/*
Theme Name: Cineverse
Theme URI:
Author: Cinesist
Author URI:
Description: This is the Official Theme created and managed by Cinesist and the team! We have migrated multiple themes into one Framework to use FSE!
Requires at least: 6.9
Tested up to: 6.9
Requires PHP:
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: foxiz
Text Domain: cineverse
Tags: custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments.
*/
/*
-----------------
>>> TABLE OF CONTENTS:
1 - CSS Variables(root)
2 - General
3 - Icon Fonts
4 - Swiper Slider
5 - Header
6 - Post Entry
7 - Post Modules
8 - Blocks
9 - Single
10 - Archives
11 - Pages
12 - Footer
13 - Responsive
14 - Print
15 - Forms
16 - UI/UX
17 - Snarkive
18 - Buddypress - Not Implemented, Has a separate CSS file
19 - bbPress - Not Implemented, Has a separate CSS file
20 - WooCommerce - Not Implemented
22 - Wordpress Hacks
23 - Admin
-----------------
*/
/*
-----------------
1 - Cinesist Framework v1.0 CSS Variables(root)
-----------------
*/
/* ====================
Fonts & Icons Import (Local Theme Root)
==================== */
/* --- Noto Color Emoji --- */
@font-face {
font-family: "Noto Color Emoji";
/* Corrected: points to fonts folder inside cineverse theme root */
src: url("assets/fonts/Noto Color Emoji/NotoColorEmoji-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* --- Work Sans (Variable Local) --- */
@font-face {
font-family: "Work Sans";
/* Handles all weights 100-900 in one file */
src: url("assets/fonts/work-sans/WorkSans-VariableFont_wght.woff2") format("truetype-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* --- Quicksand (Variable) --- */
@font-face {
font-family: "Quicksand";
src: url("assets/fonts/quicksand/Quicksand-VariableFont_wght.woff2") format("truetype-variations");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
:root {
/* Cinesist fluid variables into the WordPress Preset variables */
--wp--preset--spacing--xxs: var(--cs-spacing-xxs);
--wp--preset--spacing--xs: var(--cs-spacing-xs);
--wp--preset--spacing--sm: var(--cs-spacing-sm);
--wp--preset--spacing--md: var(--cs-spacing-md);
--wp--preset--spacing--lg: var(--cs-spacing-lg);
--wp--preset--spacing--xl: var(--cs-spacing-xl);
--wp--preset--spacing--xxl: var(--cs-spacing-xxl);
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5rem;
/* 2. Overpower Blocksy's internal spacing variables */
--theme-content-spacing: var(--cs-spacing-xxs) !important;
--theme-block-gap: var(--cs-spacing-xs) !important;
/* ====================
Fonts Declarations
==================== */
--cs-font-primary: "Work Sans", sans-serif;
--cs-font-secondary: "Quicksand", sans-serif;
--cs-font-emoji: "Noto Color Emoji", sans-serif;
/* ====================
Layouts & Widths
==================== */
--layout-page-max-width: 1520px;
--layout-content-max-width: 1300px;
--cs-width: 1300px !important;
/* ====================
Typography (Fluid) - Recalibrated
Base: 16px (html { font-size: 1rem; })
==================== */
/* --- Headings --- */
/* Target 15px -> 16px */
--cs-font-size-h6: clamp(0.9375rem, 0.15vw + 0.9rem, 1rem);
/* Target 16px -> 18px */
--cs-font-size-h5: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
/* Target 18px -> 20px */
--cs-font-size-h4: clamp(1.125rem, 0.4vw + 1.05rem, 1.25rem);
/* Target 20px -> 22px */
--cs-font-size-h3: clamp(1.25rem, 0.5vw + 1.15rem, 1.375rem);
/* Target 24px -> 28px */
--cs-font-size-h2: clamp(1.5rem, 1vw + 1.3rem, 1.75rem);
/* Target 28px -> 32px */
--cs-font-size-h1: clamp(1.75rem, 1.5vw + 1.4rem, 2rem);
--cs-hero-title-size: var(--cs-font-size-h2);
--cs-post-title-size: var(--cs-font-size-h1);
--cs-post-subtitle-size: var(--cs-font-size-h2);
/* --- Body & UI --- */
--cs-font-size-xs: 0.75rem; /* Fixed 12px for technical readouts */
--cs-font-size-sm: 0.875rem; /* Fixed 14px */
--cs-font-size-body: 1rem; /* 16px */
--cs-font-size-caption: 0.9rem; /* 14.4px */
--cs-font-size-cta: clamp(1.1rem, 0.2vw + 1rem, 1.125rem);
/* --- Wordpress Font Size Presets --- */
--wp--preset--font-family--work-sans: "Work Sans", sans-serif;
--wp--preset--font-family--quicksand: "Quicksand", sans-serif;
/* ====================
Line Heights
==================== */
--line-height-h1: 1.2;
--line-height-h2: 1.3;
--line-height-h3: 1.4;
--line-height-h4: 1.5;
--line-height-h5: 1.6;
--line-height-h6: 1.7;
--line-height-body: 1.5;
--line-height-caption: 1.4;
--line-height-cta: 1.5;
/* ====================
Fluid Spacing
==================== */
--cs-spacing-xxs: clamp(0.25rem, 0.5vw, 0.5rem);
/* ~4px-8px */
--cs-spacing-xs: clamp(0.5rem, 0.8vw, 1rem);
/* ~8px-16px */
--cs-spacing-sm: clamp(1rem, 1.2vw, 1.5rem);
/* ~16px-24px */
--cs-spacing-reg: clamp(1rem, 1.2vw, 1rem);
--cs-spacing-md: clamp(1.5rem, 2vw, 2.5rem);
/* ~24px-40px */
--cs-spacing-lg: clamp(2.5rem, 3.5vw, 4rem);
/* ~40px-64px */
--cs-spacing-xl: clamp(4rem, 5vw, 6rem);
/* ~64px-96px */
--cs-spacing-xxl: clamp(6rem, 8vw, 8rem);
/* ~96px-128px */
--cs-space-4xs: clamp(0.33rem, calc(-0.03vw + 0.34rem), 0.31rem);
--cs-space-3xs: clamp(0.41rem, calc(0.04vw + 0.4rem), 0.44rem);
--cs-space-2xs: clamp(0.51rem, calc(0.16vw + 0.46rem), 0.62rem);
--cs-space-xs: clamp(0.64rem, calc(0.36vw + 0.53rem), 0.88rem);
--cs-space-s: clamp(0.8rem, calc(0.67vw + 0.6rem), 1.24rem);
--cs-space-m: clamp(1rem, calc(1.15vw + 0.66rem), 1.75rem);
--cs-space-l: clamp(1.25rem, calc(1.87vw + 0.69rem), 2.47rem);
--cs-space-xl: clamp(1.56rem, calc(2.96vw + 0.68rem), 3.5rem);
--cs-space-2xl: clamp(1.95rem, calc(4.58vw + 0.59rem), 4.95rem);
--cs-space-3xl: clamp(2.44rem, calc(6.97vw + 0.37rem), 7rem);
--cs-space-4xl: clamp(3.05rem, calc(10.47vw + -0.06rem), 9.89rem);
/* Spacing */
--cs-header-space: var(--cs-space-s);
--cs-btn-space: var(--cs-space-xs) var(--cs-space-s);
--cs-card-space: var(--cs-space-s);
--cs-footer-space: var(--cs-space-s) var(--cs-space-m);
/* ====================
Fluid Layout
==================== */
--cs-columns-1: repeat(1, minmax(0, 1fr));
--cs-columns-2: repeat(2, minmax(0, 1fr));
--cs-columns-3: repeat(3, minmax(0, 1fr));
--cs-columns-4: repeat(4, minmax(0, 1fr));
--cs-columns-5: repeat(5, minmax(0, 1fr));
--cs-columns-6: repeat(6, minmax(0, 1fr));
--cs-columns-7: repeat(7, minmax(0, 1fr));
--cs-columns-8: repeat(8, minmax(0, 1fr));
/* ====================
Radius
==================== */
--cs-radius-xs: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
--cs-radius-s: clamp(0.38rem, calc(-0.19vw + 0.56rem), 0.5rem);
--cs-radius-m: clamp(0.63rem, calc(-0.19vw + 0.81rem), 0.75rem);
--cs-radius-l: clamp(1rem, calc(-0.38vw + 1.36rem), 1.25rem);
--cs-radius-xl: clamp(1.63rem, calc(-0.57vw + 2.17rem), 2rem);
--cs-radius-full: 999rem;
/* ====================
Shadows
==================== */
--cs-shadow-xs: 0 1px 2px var(--cs-shadow-primary);
--cs-shadow-s: 0 1.5px 3px var(--cs-shadow-primary);
--cs-shadow-m: 0 2px 6px var(--cs-shadow-primary);
--cs-shadow-l: 0 3px 12px var(--cs-shadow-primary);
--cs-shadow-xl: 0 6px 48px var(--cs-shadow-primary);
/* ====================
Foxiz Root Overrides
==================== */
--em-mini: 1em;
--rem-mini: 0.8rem;
/* ====================
Color Pallette
==================== */
/* --- Brand Colors --- */
--cinefox-black-spy: #1a1b1f;
--cinefox-white-spy: #e5e5e5;
--cinesist-dark-grey: #1a1a1a;
--cinesist-middle-grey: #2a2a2a;
--cinesist-light-grey: #cccccc;
--cinesist-title-color: #ffffff;
/* Makes Titles Gleam White */
--cinesist-text-color: #f0f0f0;
/* Off-white for general text */
--cinesist-gold: #e2b304;
/* Cinesist Gold for accents */
--cinesist-red: #e50914;
/* Cinesist Red for accents */
--cinesist-border-color: rgba(255, 255, 255, 0.2);
/* Subtle white border */
--snarkive-purple: #d102d1;
/* New: Devil Purple for specific elements */
--snarkive-purple-accent: #792c85;
/* New: Devil Purple accents */
--cinefox-orange: #dd7b45;
/* CineFox Primary Fur Color */
--cinefox-orange-accent: #d45f35;
/* CineFox Auxillary Fur Color */
--cinesist-gaming: #107c10;
/* Used for all things Gaming Related */
--cinesist-industry: #708090;
/* Used for all things Industry Related */
--cinesist-tv: #0078ae;
/* Used for all things TV Related */
--cinesist-info: #00ddff;
/* Electric Blue */
--cinesist-sucess: #7dce94;
/* Lime Green */
--cinesist-warning: #fff685;
/*Biohazard Yellow */
--cinesist-danger: #f0217d;
/* Comicbook Pink */
--cinebar-red: #ff0d0d;
/* Red Rating Bar */
--cinebar-orange: #ff5612;
/*orange Rating Bar */
--cinebar-yellow: #ffa444;
/* Yellow Rating Bar */
--cinebar-midgreen: #a0b339;
/* Mid Green Rating Bar */
--cinebar-green: #50a735;
/* Green Rating Bar */
/*
* Review Flex Colors - Uses Review as Base Color and then a Catch Color
*/
--cs-review__rating-h2-gold-flex: var(--review-accent, var(--cinesist-gold));
--cs-review__rating-snarkive-flex: var(--review-accent, var(--flex-snarkive));
--cs-duo__snarkive-red-flex: var(--flex-snarkive, var(--cinesist-red));
/* ========================================= */
/* == Spy Vs Spy Theme (Light/Dark Mode) == */
/* ========================================= */
/* Light Mode: White Spy Icon */
--cinesist-card-logo: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-Black-and-Purple-Icon-Logomark.png");
/* ====================
White Spy Colors For Light Mode
==================== */
/* --- Cinesist Light Branded Colors --- */
--gc-color: #d45f35;
/* Primary Orange Color */
--body-fcolor: #1a1b1f;
/* Body Black Spy Flex Color */
--gc-spy: #e5e5e5;
/* White Spy Color */
--gc-gold: #e2b304;
/* Cinesist Gold Color */
--gc-red: #e50914;
/* Cinesist Red Color */
--gc-snarkive-purple: #d102d1;
/* Snarkive Purple Color */
--gc-snarkive-accent: #792c85;
/* Snarkive Purple Accent Color */
--bbp-white: #e5e5e5;
/* Custom variable for bbPress white background */
--padding-c40: 10px 40px;
--flex-desc: #000;
/* Custom variable for form description text color */
--cs-spy: #e5e5e5;
/* Custom variable for Cinesist White Spy color */
--btn-primary: var(--flex-snarkive);
/* Snarkive Purple to Orange */
--btn-primary-h: var(--flex-snarkive-rev);
/* Snarkive Purple Reverse on Hover */
/* --- Flexible Colors --- */
--flex-overlay-1: rgba(255, 255, 255, 0.4);
--flex-icon-1: rgba(18, 43, 70, 0.5);
--contrast-1: #ffffff;
--contrast-2: #eaeaea;
--flex-bg-color: #e8e8e8;
/* Black BG */
/* Black Spy Color for Day Time Adapt*/
--flex-bg-color-2: #e5e5e5;
--flex-bg-color-3: #c4c4c4;
--flex-header-bg: linear-gradient(to right, #fff 20%, #e5e5e5 80%);
--flex-footer-bg: linear-gradient(to right, #fff 20%, #e5e5e5 80%);
/* FLex Gray Color Changes */
--flex-gray-1: #bab6b6;
--flex-gray-2: #ededed;
--flex-gray-3: #aaaaaa;
--flex-gray-4: #eaeaea;
--flex-gray-7: rgba(255, 255, 255, 0.35) !important;
--flex-gray-15: #88888826;
/* Flex Snarkive Brand Colors */
--flex-snarkive: #d102d1;
/* Snarkive Purple */
--flex-snarkive-90: #d102d1e6;
/* Snarkive Purple 90% Opacity */
--flex-snarkive-50: #d102d180;
/* Snarkive Purple 50% Opacity */
--flex-snarkive-rev: #d45f35;
/* Snarkive Orange Reverse */
--flex-snarkive-rev-90: #d45f35e6;
/* Snarkive Orange Reverse */
--flex-snarkive-rev-50: #d45f3580;
/* Snarkive Orange Reverse */
/* Flex Text Colors */
--flex-text-title: #1a1a1a;
/* Makes Titles Dark */
--flex-text-primary: #2a2a2a;
/* Dark grey for general text */
--flex-text-secondary: #555555;
/* --Cinesist-middle-grey */
--flex-decor-border: rgba(0, 0, 0, 0.2);
/* Subtle dark border */
--flex-glass-bg: rgb(255, 255, 255, / 40%) !important;
/* Flex Effects */
--news-letter-bg: #e5e5e5;
--flex-hover-brightness: 110%;
/* 80% brightness (20% darker) */
--shadow-1: 5px 10px 20px 0px #00000051;
--shadow-7: #00000051;
--round-10: 10px;
/* Standard Border Radius */
--round-5: 5px;
--page-bg-color: #ffffff;
/* --- Set your ticket stub colors --- */
--ticket-bg-color: #f1f1f1;
--ticket-text-color: #555555;
--ticket-text-hover: #d45f35;
/* Kept your orange! */
--ticket-text-current: #111111;
/* --- Cinescore Review Section Colors --- */
--review-color: var(--review-accent);
/* --- Wordpress Color Presets For Light Mode --- */
--wp--preset--color--flex-header-bg: var(--flex-header-bg);
--wp--preset--color--flex-footer-bg: var(--flex-footer-bg);
--wp--preset--color--flex-bg-color: var(--flex-bg-color);
--wp--preset--color--flex-bg-color-2: var(--flex-bg-color-2);
--wp--preset--color--flex-snarkive: var(--flex-snarkive);
--wp--preset--color--flex-snarkive-90: var(--flex-snarkive-90);
--wp--preset--color--flex-snarkive-50: var(--flex-snarkive-50);
--wp--preset--color--flex-snarkive-rev: var(--flex-snarkive-rev);
--wp--preset--color--flex-snarkive-rev-90: var(--flex-snarkive-rev-90);
--wp--preset--color--flex-snarkive-rev-50: var(--flex-snarkive-rev-50);
--wp--preset--color--flex-gray-1: var(--flex-gray-1);
--wp--preset--color--flex-gray-2: var(--flex-gray-2);
--wp--preset--color--flex-gray-3: var(--flex-gray-3);
--wp--preset--color--flex-gray-4: var(--flex-gray-4);
--wp--preset--color--flex-gray-7: var(--flex-gray-7);
--wp--preset--color--flex-text-title: var(--flex-text-title);
--wp--preset--color--flex-text-primary: var(--flex-text-primary);
--wp--preset--color--flex-text-secondary: var(--flex-text-secondary);
--wp--preset--color--flex-decor-border: var(--flex-decor-border);
}
/* ====================
Black Spy Colors For Dark Mode
==================== */
[data-theme="dark"],
.light-scheme {
/* --- Cinesist Branded Icons --- */
/* Dark Mode: Black & Purple Icon */
--cinesist-card-logo: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-White-Spy-Icon-Logomark-1.png");
/* --- Cinesist Dark Branded Colors --- */
--gc-color: #d45f35;
/* Primary Orange Color */
--gc-spy: #1a1b1f;
/* Black Spy Color */
--gc-snarkive-accent: #d45f35;
--btn-primary: var(--flex-snarkive);
/* Snarkive Purple to Orange */
--btn-primary-h: var(--flex-snarkive-rev);
/* Snarkive Purple Reverse on Hover */
/* --- Flexible Colors --- */
/* Custom variable for form description text color */
--cs-spy: #1a1b1f;
--flex-overlay-1: rgba(0, 0, 0, 0.4);
--flex-icon-1: rgb(229, 232, 235, 0.5);
--contrast-1: #000000;
--contrast-2: #131313;
--flex-bg-color: #282828;
/* White BG */
/* White Spy Color for Night Time Adapt */
--flex-bg-color-2: #1a1b1f;
--flex-bg-color-3: #353839;
/* Black Spy Color for Dark Mode */
/* Flex Color For Header Footer */
--flex-header-bg: linear-gradient(to right, #000000 20%, #1a1b1f 80%);
--flex-footer-bg: linear-gradient(to right, #000000 20%, #1a1b1f 80%);
/* FLex Gray Color Changes */
--flex-gray-1: rgb(20 20 20);
--flex-gray-2: #2d2e32;
--flex-gray-3: #414245;
--flex-gray-4: #222222;
--flex-gray-7: rgba(0, 0, 0, 0.35) !important;
--flex-gray-15: #88888840;
--flex-snarkive: #dd7b45;
/* Snarkive Orange */
--flex-snarkive-90: #dd7b45e6;
/* Snarkive Orange 90% Opacity */
--flex-snarkive-50: #dd7b4580;
/* Snarkive Orange 50% Opacity */
--flex-snarkive-rev: #d102d1;
/* Snarkive Purple Reverse */
--flex-snarkive-rev-90: #d102d1e6;
/* Snarkive Purple Reverse 90% Opacity */
--flex-snarkive-rev-50: #d102d180;
/* Snarkive Purple Reverse 50% Opacity */
--flex-text-title: #ffffff;
/* Makes Titles Gleam White */
--flex-text-primary: #f0f0f0;
/* Off-white for general text */
--flex-text-secondary: #cccccc;
/* --Cinesist-light-grey */
--flex-decor-border: rgba(255, 255, 255, 0.2);
/* Subtle white border */
--flex-glass-bg: rgb(0 0 0 / 40%) !important;
--news-letter-bg: #1a1b1f;
--flex-hover-brightness: 1.2;
/* 120% brightness (20% brighter) */
--shadow-1: 5px 10px 20px 0px #0000004d;
--page-bg-color: #111111;
/* --- Set your ticket stub colors --- */
--ticket-bg-color: #5e5e5e;
--ticket-text-color: #aaaaaa;
--ticket-text-hover: #d45f35;
/* Kept your orange! */
--ticket-text-current: #ffffff;
/* --- Wordpress Color Presets For Light Mode --- */
--wp--preset--color--flex-header-bg: var(--flex-header-bg);
--wp--preset--color--flex-footer-bg: var(--flex-footer-bg);
--wp--preset--color--flex-bg-color: var(--flex-bg-color);
--wp--preset--color--flex-bg-color-2: var(--flex-bg-color-2);
--wp--preset--color--flex-snarkive: var(--flex-snarkive);
--wp--preset--color--flex-snarkive-90: var(--flex-snarkive-90);
--wp--preset--color--flex-snarkive-50: var(--flex-snarkive-50);
--wp--preset--color--flex-snarkive-rev: var(--flex-snarkive-rev);
--wp--preset--color--flex-snarkive-rev-90: var(--flex-snarkive-rev-90);
--wp--preset--color--flex-snarkive-rev-50: var(--flex-snarkive-rev-50);
--wp--preset--color--flex-gray-1: var(--flex-gray-1);
--wp--preset--color--flex-gray-2: var(--flex-gray-2);
--wp--preset--color--flex-gray-3: var(--flex-gray-3);
--wp--preset--color--flex-gray-4: var(--flex-gray-4);
--wp--preset--color--flex-gray-7: var(--flex-gray-7);
--wp--preset--color--flex-text-title: var(--flex-text-title);
--wp--preset--color--flex-text-primary: var(--flex-text-primary);
--wp--preset--color--flex-text-secondary: var(--flex-text-secondary);
--wp--preset--color--flex-decor-border: var(--flex-decor-border);
}
/* ====================
End Cinesist Framework Variables
==================== */
/* ====================
BASE HTML STYLES
==================== */
html {
font-size: 100%;
/* Sets base to 16px */
scroll-behavior: smooth;
}
body {
font-family: var(--cs-font-primary), var(--cs-font-emoji), sans-serif;
font-size: var(--cs-font-size-body);
line-height: var(--line-height-body);
}
/* --- Selection Glow --- */
::selection {
background: var(--flex-snarkive);
color: #fff;
}
/* --- Global Container Protocol --- */
/* Full Width Part of Website section */
.cs-section {
width: 100%;
margin: 0;
margin-block-start: 0 !important;
margin-block-end: 0 !important;
}
/* Cinesist Wrapper - Holds the max site width of website - use to insulate the section and hold the content or container at 1520px */
.cs-wrapper {
max-width: 1520px;
margin: 0 auto;
}
/* Container Block - Holds 1300px Inner Content to maintain virtual gutters */
.cs-content {
max-width: 1300px;
width: 100%;
margin: 0 auto;
}
/* This is a narrow containment container - use for long blog posts, or content that you want to add focus to, max 1000px */
.cs-narrow {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
/* Container Block - Holds our content */
.cs-container {
width: 100%;
margin: 0;
}
/* --- Fluid Headings & Noto Color Emoji --- */
h1,
.h1 {
font-size: var(--cs-font-size-h1);
line-height: var(--line-height-h1);
font-family: var(--cs-font-primary), var(--cs-font-emoji), sans-serif;
font-weight: 800;
}
h2,
.h2 {
font-size: var(--cs-font-size-h2);
line-height: var(--line-height-h2);
font-family: var(--cs-font-primary), var(--cs-font-emoji), sans-serif;
font-weight: 700;
}
h3,
.h3 {
font-size: var(--cs-font-size-h3);
line-height: var(--line-height-h3);
font-family: var(--cs-font-primary), var(--cs-font-emoji), sans-serif;
font-weight: 700;
}
h4,
.h4 {
font-size: var(--cs-font-size-h4);
line-height: var(--line-height-h4);
font-family: var(--cs-font-primary), var(--cs-font-emoji), sans-serif;
font-weight: 600;
}
h5,
.h5 {
font-size: var(--cs-font-size-h5);
line-height: var(--line-height-h5);
font-family: var(--cs-font-primary), var(--cs-font-emoji), sans-serif;
font-weight: 600;
}
h6,
.h6 {
font-size: var(--cs-font-size-h6);
line-height: var(--line-height-h6);
font-family: var(--cs-font-primary), var(--cs-font-emoji), sans-serif;
font-weight: 600;
}
h2.cs-review-blurb {
margin-bottom: 1.5rem !important;
text-shadow: 1px 1px var(--flex-snarkive) !important;
font-size: var(--cs-font-size-h2) !important;
line-height: var(--line-height-h2) !important;
}
.cs-review-body__article h1,
.cs-review-body__article h2,
.cs-review-body__article h3,
.cs-review-body__article h4,
.cs-review-body__article h5,
.cs-review-body__article h6,
.cs-review-body__article p,
.cs-review-body__article figcaption {
margin-bottom: 1rem;
}
figcaption,
.wp-caption-text {
font-family: var(--cs-font-secondary);
font-size: var(--cs-font-size-caption)!important;
font-weight: 500;
font-style: var(--meta-fstyle);
letter-spacing: var(--meta-fspace);
text-transform: var(--meta-transform);
margin-bottom: var(--cs-spacing-reg)!important;
}
/* Default Foxiz Padding: Set to left and right edge (20px*2). */
.edge-padding {
padding-right: 0 !important;
padding-left: 0 !important;
}
/* --- Hyperlinks Style --- */
a {
color: var(--flex-snarkive);
font-weight: 700;
text-decoration: none;
transition: color 0.3s ease;
}
/* --- Button Style --- */
.is-btn {
color: var(--awhite) !important;
}
.is-button a:hover {
color: var(--awhite);
}
/* Padding */
.cs-padding-4xs {
padding: var(--cs-space-4xs);
}
.cs-padding-3xs {
padding: var(--cs-space-3xs);
}
.cs-padding-2xs {
padding: var(--cs-space-2xs);
}
.cs-padding-xs {
padding: var(--cs-space-xs);
}
.cs-padding-s {
padding: var(--cs-space-s);
}
.cs-padding-m {
padding: var(--cs-space-m);
}
.cs-padding-l {
padding: var(--cs-space-l);
}
.cs-padding-xl {
padding: var(--cs-space-xl);
}
.cs-padding-2xl {
padding: var(--cs-space-2xl);
}
.cs-padding-3xl {
padding: var(--cs-space-3xl);
}
.cs-padding-4xl {
padding: var(--cs-space-4xl);
}
.cs-padding-left-4xs {
padding-left: var(--cs-space-4xs);
}
.cs-padding-left-3xs {
padding-left: var(--cs-space-3xs);
}
.cs-padding-left-2xs {
padding-left: var(--cs-space-2xs);
}
.cs-padding-left-xs {
padding-left: var(--cs-space-xs);
}
.cs-padding-left-s {
padding-left: var(--cs-space-s);
}
.cs-padding-left-m {
padding-left: var(--cs-space-m);
}
.cs-padding-left-l {
padding-left: var(--cs-space-l);
}
.cs-padding-left-xl {
padding-left: var(--cs-space-xl);
}
.cs-padding-left-2xl {
padding-left: var(--cs-space-2xl);
}
.cs-padding-left-3xl {
padding-left: var(--cs-space-3xl);
}
.cs-padding-left-4xl {
padding-left: var(--cs-space-4xl);
}
.cs-padding-right-4xs {
padding-right: var(--cs-space-4xs);
}
.cs-padding-right-3xs {
padding-right: var(--cs-space-3xs);
}
.cs-padding-right-2xs {
padding-right: var(--cs-space-2xs);
}
.cs-padding-right-xs {
padding-right: var(--cs-space-xs);
}
.cs-padding-right-s {
padding-right: var(--cs-space-s);
}
.cs-padding-right-m {
padding-right: var(--cs-space-m);
}
.cs-padding-right-l {
padding-right: var(--cs-space-l);
}
.cs-padding-right-xl {
padding-right: var(--cs-space-xl);
}
.cs-padding-right-2xl {
padding-right: var(--cs-space-2xl);
}
.cs-padding-right-3xl {
padding-right: var(--cs-space-3xl);
}
.cs-padding-right-4xl {
padding-right: var(--cs-space-4xl);
}
.cs-padding-top-4xs {
padding-top: var(--cs-space-4xs);
}
.cs-padding-top-3xs {
padding-top: var(--cs-space-3xs);
}
.cs-padding-top-2xs {
padding-top: var(--cs-space-2xs);
}
.cs-padding-top-xs {
padding-top: var(--cs-space-xs);
}
.cs-padding-top-s {
padding-top: var(--cs-space-s);
}
.cs-padding-top-m {
padding-top: var(--cs-space-m);
}
.cs-padding-top-l {
padding-top: var(--cs-space-l);
}
.cs-padding-top-xl {
padding-top: var(--cs-space-xl);
}
.cs-padding-top-2xl {
padding-top: var(--cs-space-2xl);
}
.cs-padding-top-3xl {
padding-top: var(--cs-space-3xl);
}
.cs-padding-top-4xl {
padding-top: var(--cs-space-4xl);
}
.cs-padding-bottom-4xs {
padding-bottom: var(--cs-space-4xs);
}
.cs-padding-bottom-3xs {
padding-bottom: var(--cs-space-3xs);
}
.cs-padding-bottom-2xs {
padding-bottom: var(--cs-space-2xs);
}
.cs-padding-bottom-xs {
padding-bottom: var(--cs-space-xs);
}
.cs-padding-bottom-s {
padding-bottom: var(--cs-space-s);
}
.cs-padding-bottom-m {
padding-bottom: var(--cs-space-m);
}
.cs-padding-bottom-l {
padding-bottom: var(--cs-space-l);
}
.cs-padding-bottom-xl {
padding-bottom: var(--cs-space-xl);
}
.cs-padding-bottom-2xl {
padding-bottom: var(--cs-space-2xl);
}
.cs-padding-bottom-3xl {
padding-bottom: var(--cs-space-3xl);
}
.cs-padding-bottom-4xl {
padding-bottom: var(--cs-space-4xl);
}
.cs-padding-horizontal-4xs {
padding-left: var(--cs-space-4xs);
padding-right: var(--cs-space-4xs);
}
.cs-padding-horizontal-3xs {
padding-left: var(--cs-space-3xs);
padding-right: var(--cs-space-3xs);
}
.cs-padding-horizontal-2xs {
padding-left: var(--cs-space-2xs);
padding-right: var(--cs-space-2xs);
}
.cs-padding-horizontal-xs {
padding-left: var(--cs-space-xs);
padding-right: var(--cs-space-xs);
}
.cs-padding-horizontal-s {
padding-left: var(--cs-space-s);
padding-right: var(--cs-space-s);
}
.cs-padding-horizontal-m {
padding-left: var(--cs-space-m);
padding-right: var(--cs-space-m);
}
.cs-padding-horizontal-l {
padding-left: var(--cs-space-l);
padding-right: var(--cs-space-l);
}
.cs-padding-horizontal-xl {
padding-left: var(--cs-space-xl);
padding-right: var(--cs-space-xl);
}
.cs-padding-horizontal-2xl {
padding-left: var(--cs-space-2xl);
padding-right: var(--cs-space-2xl);
}
.cs-padding-horizontal-3xl {
padding-left: var(--cs-space-3xl);
padding-right: var(--cs-space-3xl);
}
.cs-padding-horizontal-4xl {
padding-left: var(--cs-space-4xl);
padding-right: var(--cs-space-4xl);
}
.cs-padding-vertical-4xs {
padding-top: var(--cs-space-4xs);
padding-bottom: var(--cs-space-4xs);
}
.cs-padding-vertical-3xs {
padding-top: var(--cs-space-3xs);
padding-bottom: var(--cs-space-3xs);
}
.cs-padding-vertical-2xs {
padding-top: var(--cs-space-2xs);
padding-bottom: var(--cs-space-2xs);
}
.cs-padding-vertical-xs {
padding-top: var(--cs-space-xs);
padding-bottom: var(--cs-space-xs);
}
.cs-padding-vertical-s {
padding-top: var(--cs-space-s);
padding-bottom: var(--cs-space-s);
}
.cs-padding-vertical-m {
padding-top: var(--cs-space-m);
padding-bottom: var(--cs-space-m);
}
.cs-padding-vertical-l {
padding-top: var(--cs-space-l);
padding-bottom: var(--cs-space-l);
}
.cs-padding-vertical-xl {
padding-top: var(--cs-space-xl);
padding-bottom: var(--cs-space-xl);
}
.cs-padding-vertical-2xl {
padding-top: var(--cs-space-2xl);
padding-bottom: var(--cs-space-2xl);
}
.cs-padding-vertical-3xl {
padding-top: var(--cs-space-3xl);
padding-bottom: var(--cs-space-3xl);
}
.cs-padding-vertical-4xl {
padding-top: var(--cs-space-4xl);
padding-bottom: var(--cs-space-4xl);
}
/* Margins */
.cs-margin-4xs {
margin: var(--cs-space-4xs);
}
.cs-margin-3xs {
margin: var(--cs-space-3xs);
}
.cs-margin-2xs {
margin: var(--cs-space-2xs);
}
.cs-margin-xs {
margin: var(--cs-space-xs);
}
.cs-margin-s {
margin: var(--cs-space-s);
}
.cs-margin-m {
margin: var(--cs-space-m);
}
.cs-margin-l {
margin: var(--cs-space-l);
}
.cs-margin-xl {
margin: var(--cs-space-xl);
}
.cs-margin-2xl {
margin: var(--cs-space-2xl);
}
.cs-margin-3xl {
margin: var(--cs-space-3xl);
}
.cs-margin-4xl {
margin: var(--cs-space-4xl);
}
.cs-margin-left-4xs {
margin-left: var(--cs-space-4xs);
}
.cs-margin-left-3xs {
margin-left: var(--cs-space-3xs);
}
.cs-margin-left-2xs {
margin-left: var(--cs-space-2xs);
}
.cs-margin-left-xs {
margin-left: var(--cs-space-xs);
}
.cs-margin-left-s {
margin-left: var(--cs-space-s);
}
.cs-margin-left-m {
margin-left: var(--cs-space-m);
}
.cs-margin-left-l {
margin-left: var(--cs-space-l);
}
.cs-margin-left-xl {
margin-left: var(--cs-space-xl);
}
.cs-margin-left-2xl {
margin-left: var(--cs-space-2xl);
}
.cs-margin-left-3xl {
margin-left: var(--cs-space-3xl);
}
.cs-margin-left-4xl {
margin-left: var(--cs-space-4xl);
}
.cs-margin-right-4xs {
margin-right: var(--cs-space-4xs);
}
.cs-margin-right-3xs {
margin-right: var(--cs-space-3xs);
}
.cs-margin-right-2xs {
margin-right: var(--cs-space-2xs);
}
.cs-margin-right-xs {
margin-right: var(--cs-space-xs);
}
.cs-margin-right-s {
margin-right: var(--cs-space-s);
}
.cs-margin-right-m {
margin-right: var(--cs-space-m);
}
.cs-margin-right-l {
margin-right: var(--cs-space-l);
}
.cs-margin-right-xl {
margin-right: var(--cs-space-xl);
}
.cs-margin-right-2xl {
margin-right: var(--cs-space-2xl);
}
.cs-margin-right-3xl {
margin-right: var(--cs-space-3xl);
}
.cs-margin-right-4xl {
margin-right: var(--cs-space-4xl);
}
.cs-margin-top-4xs {
margin-top: var(--cs-space-4xs);
}
.cs-margin-top-3xs {
margin-top: var(--cs-space-3xs);
}
.cs-margin-top-2xs {
margin-top: var(--cs-space-2xs);
}
.cs-margin-top-xs {
margin-top: var(--cs-space-xs);
}
.cs-margin-top-s {
margin-top: var(--cs-space-s);
}
.cs-margin-top-m {
margin-top: var(--cs-space-m);
}
.cs-margin-top-l {
margin-top: var(--cs-space-l);
}
.cs-margin-top-xl {
margin-top: var(--cs-space-xl);
}
.cs-margin-top-2xl {
margin-top: var(--cs-space-2xl);
}
.cs-margin-top-3xl {
margin-top: var(--cs-space-3xl);
}
.cs-margin-top-4xl {
margin-top: var(--cs-space-4xl);
}
.cs-margin-bottom-4xs {
margin-bottom: var(--cs-space-4xs);
}
.cs-margin-bottom-3xs {
margin-bottom: var(--cs-space-3xs);
}
.cs-margin-bottom-2xs {
margin-bottom: var(--cs-space-2xs);
}
.cs-margin-bottom-xs {
margin-bottom: var(--cs-space-xs);
}
.cs-margin-bottom-s {
margin-bottom: var(--cs-space-s);
}
.cs-margin-bottom-m {
margin-bottom: var(--cs-space-m);
}
.cs-margin-bottom-l {
margin-bottom: var(--cs-space-l);
}
.cs-margin-bottom-xl {
margin-bottom: var(--cs-space-xl);
}
.cs-margin-bottom-2xl {
margin-bottom: var(--cs-space-2xl);
}
.cs-margin-bottom-3xl {
margin-bottom: var(--cs-space-3xl);
}
.cs-margin-bottom-4xl {
margin-bottom: var(--cs-space-4xl);
}
.cs-margin-horizontal-4xs {
margin-left: var(--cs-space-4xs);
margin-right: var(--cs-space-4xs);
}
.cs-margin-horizontal-3xs {
margin-left: var(--cs-space-3xs);
margin-right: var(--cs-space-3xs);
}
.cs-margin-horizontal-2xs {
margin-left: var(--cs-space-2xs);
margin-right: var(--cs-space-2xs);
}
.cs-margin-horizontal-xs {
margin-left: var(--cs-space-xs);
margin-right: var(--cs-space-xs);
}
.cs-margin-horizontal-s {
margin-left: var(--cs-space-s);
margin-right: var(--cs-space-s);
}
.cs-margin-horizontal-m {
margin-left: var(--cs-space-m);
margin-right: var(--cs-space-m);
}
.cs-margin-horizontal-l {
margin-left: var(--cs-space-l);
margin-right: var(--cs-space-l);
}
.cs-margin-horizontal-xl {
margin-left: var(--cs-space-xl);
margin-right: var(--cs-space-xl);
}
.cs-margin-horizontal-2xl {
margin-left: var(--cs-space-2xl);
margin-right: var(--cs-space-2xl);
}
.cs-margin-horizontal-3xl {
margin-left: var(--cs-space-3xl);
margin-right: var(--cs-space-3xl);
}
.cs-margin-horizontal-4xl {
margin-left: var(--cs-space-4xl);
margin-right: var(--cs-space-4xl);
}
.cs-margin-vertical-4xs {
margin-top: var(--cs-space-4xs);
margin-bottom: var(--cs-space-4xs);
}
.cs-margin-vertical-3xs {
margin-top: var(--cs-space-3xs);
margin-bottom: var(--cs-space-3xs);
}
.cs-margin-vertical-2xs {
margin-top: var(--cs-space-2xs);
margin-bottom: var(--cs-space-2xs);
}
.cs-margin-vertical-xs {
margin-top: var(--cs-space-xs);
margin-bottom: var(--cs-space-xs);
}
.cs-margin-vertical-s {
margin-top: var(--cs-space-s);
margin-bottom: var(--cs-space-s);
}
.cs-margin-vertical-m {
margin-top: var(--cs-space-m);
margin-bottom: var(--cs-space-m);
}
.cs-margin-vertical-l {
margin-top: var(--cs-space-l);
margin-bottom: var(--cs-space-l);
}
.cs-margin-vertical-xl {
margin-top: var(--cs-space-xl);
margin-bottom: var(--cs-space-xl);
}
.cs-margin-vertical-2xl {
margin-top: var(--cs-space-2xl);
margin-bottom: var(--cs-space-2xl);
}
.cs-margin-vertical-3xl {
margin-top: var(--cs-space-3xl);
margin-bottom: var(--cs-space-3xl);
}
.cs-margin-vertical-4xl {
margin-top: var(--cs-space-4xl);
margin-bottom: var(--cs-space-4xl);
}
/* Gaps */
.cs-gap-4xs {
gap: var(--cs-space-4xs);
}
.cs-gap-3xs {
gap: var(--cs-space-3xs);
}
.cs-gap-2xs {
gap: var(--cs-space-2xs);
}
.cs-gap-xs {
gap: var(--cs-space-xs);
}
.cs-gap-s {
gap: var(--cs-space-s);
}
.cs-gap-m {
gap: var(--cs-space-m);
}
.cs-gap-l {
gap: var(--cs-space-l);
}
.cs-gap-xl {
gap: var(--cs-space-xl);
}
.cs-gap-2xl {
gap: var(--cs-space-2xl);
}
.cs-gap-3xl {
gap: var(--cs-space-3xl);
}
.cs-gap-4xl {
gap: var(--cs-space-4xl);
}
/* ====================
Components
==================== */
/* Components */
.cs-btn {
display: flex;
align-items: center;
justify-content: center;
gap: var(--cs-space-3xs);
padding: var(--cs-space-xs) var(--cs-space-s);
background: var(--cs-primary);
color: #fff;
font-size: var(--text-m);
font-weight: 600;
border-radius: var(--cs-radius-m);
border: 1px solid var(--cs-primary-d-1);
box-shadow: var(--cs-shadow-m);
transition: all 0.25s ease-in-out;
outline: 0;
cursor: pointer;
}
.cs-btn:hover {
background: var(--cs-primary-d-1);
transform: translateY(-0.1rem);
}
.cs-btn.small {
font-size: var(--text-s);
padding: var(--cs-space-xs) var(--cs-space-s);
}
.cs-btn.large {
font-size: var(--text-l);
padding: var(--cs-space-s) var(--cs-space-m);
}
.cs-btn.tertiary {
background: var(--tertiary);
border-color: var(--tertiary-d-1);
}
.cs-btn.ghost {
color: var(--cs-dark-80);
background: transparent;
border-color: transparent;
box-shadow: none;
}
.cs-btn.slight {
color: var(--cs-dark-80);
background: var(--cs-bg-surface);
border-color: var(--cs-border-primary);
box-shadow: var(--cs-shadow-s);
}
.cs-btn.secondary {
background: var(--cs-secondary);
border-color: var(--cs-secondary-d-1);
}
.cs-btn.ghost:hover {
background: var(--cs-dark-10);
}
.cs-btn.slight:hover {
background: var(--cs-dark-5);
}
.cs-btn.tertiary:hover {
background: var(--tertiary-d-1);
}
.cs-btn.secondary:hover {
background: var(--cs-secondary-d-1);
}
.cs-btn:focus {
outline: 4px solid var(--cs-primary-l-3);
outline-offset: 2px;
}
.cs-btn.no-bg {
color: var(--cs-dark-80);
background: transparent;
box-shadow: none;
border-color: transparent;
}
.cs-btn.no-bg:hover {
color: var(--cs-dark);
}
.cs-badge {
display: flex;
align-items: center;
justify-content: center;
gap: var(--cs-space-4xs);
padding: var(--cs-space-2xs) var(--cs-space-s);
background: var(--cs-dark-10);
color: var(--cs-primary);
font-size: var(--text-s);
font-weight: 500;
border-radius: var(--cs-radius-full);
border: 0;
outline: 0;
}
.cs-badge.secondary {
color: var(--cs-secondary);
}
.cs-link {
color: var(--cs-primary);
font-size: var(--text-m);
font-weight: 600;
letter-spacing: 0.05rem;
box-shadow: 0 2px 0 var(--cs-primary-20);
text-decoration: none;
transition: all 0.15s ease-in-out;
}
.cs-link:hover {
box-shadow: 0 2px 0 var(--cs-primary-40);
}
.cs-link:focus {
background: var(--cs-primary-10);
}
.cs-link.secondary {
color: var(--cs-secondary);
border-color: var(--cs-secondary-20);
}
.cs-link.tertiary {
color: var(--tertiary);
border-color: var(--tertiary-20);
}
.cs-input {
padding: var(--cs-space-xs) var(--cs-space-s);
background: var(--cs-dark-5);
color: var(--cs-text-title);
font-size: var(--text-m);
font-weight: 500;
border-radius: var(--cs-radius-m);
border: 1px solid var(--cs-border-primary);
box-shadow: var(--cs-shadow-xs);
transition: all 0.25s ease-in-out;
appearance: none;
outline: 0;
}
.cs-input:focus {
background: var(--cs-primary-20);
border-color: var(--cs-primary);
box-shadow: var(--cs-shadow-l);
}
.cs-input:hover {
border-color: var(--cs-primary);
background: transparent;
box-shadow: var(--cs-shadow-l);
}
.cs-input::placeholder {
color: var(--cs-dark-40);
}
.cs-input:invalid {
border-color: var(--cs-error);
background: var(--cs-error-10);
}
.cs-input:disabled {
cursor: not-allowed;
opacity: .75;
box-shadow: none;
background: var(--cs-dark-10);
}
.cs-select {
padding: var(--cs-space-xs) var(--cs-space-s);
background: var(--cs-dark-5);
color: var(--cs-text-body);
font-size: var(--text-m);
font-weight: 500;
border-radius: var(--cs-radius-m);
border: 1px solid var(--cs-border-primary);
box-shadow: var(--cs-shadow-xs);
transition: all 0.25s ease-in-out;
outline: 0;
}
.cs-select:focus {
background: var(--cs-primary-20);
border-color: var(--cs-primary);
}
.cs-select:hover {
border-color: var(--cs-primary);
}
.cs-select::placeholder {
color: var(--cs-dark-40);
}
.cs-select:invalid {
border-color: var(--cs-error);
background: var(--cs-error-10);
}
.cs-select:disabled {
cursor: not-allowed;
opacity: .75;
box-shadow: none;
background: var(--cs-dark-10);
}
.cs-card {
display: grid;
gap: var(--cs-space-xs);
padding: var(--cs-space-m);
font-size: var(--text-m);
color: var(--cs-text-body);
background: var(--cs-bg-surface);
line-height: 1.3;
border-radius: var(--cs-radius-m);
box-shadow: var(--cs-shadow-m);
}
.cs-card.secondary {
background: var(--cs-secondary);
color: #fff;
}
.cs-card.primary {
background: var(--cs-primary);
color: #fff;
}
.cs-icon {
color: var(--cs-primary);
width: var(--cs-space-2xl);
height: auto;
font-size: var(--cs-space-2xl);
}
.cs-icon.large {
width: var(--cs-space-3xl);
font-size: var(--cs-space-3xl);
}
.cs-icon.secondary {
color: var(--cs-secondary);
}
.cs-icon.tertiary {
color: var(--tertiary);
}
.cs-icon.outline {
padding: 0.5em;
border: 1px solid var(--cs-border-primary);
border-radius: 100%;
box-sizing: content-box;
}
.cs-icon.filled {
padding: 0.5em;
border-radius: 100%;
box-sizing: content-box;
background: var(--cs-dark-10);
}
.cs-icon.small {
width: var(--cs-space-l);
font-size: var(--cs-space-l);
}
.cs-avatar {
width: var(--cs-space-2xl);
height: var(--cs-space-2xl);
border-radius: 100%;
box-shadow: var(--cs-shadow-m);
object-fit: cover;
}
.cs-avatar.small {
width: var(--cs-space-l);
height: var(--cs-space-l);
}
.cs-avatar.large {
width: var(--cs-space-4xl);
height: var(--cs-space-4xl);
}
.cs-divider {
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 1px;
height: 1px;
max-height: 1px;
background: var(--cs-border-primary);
margin: var(--cs-space-m) 0;
border: 0;
}
.cs-divider.vertical {
min-width: 1px;
width: 1px;
max-width: 1px;
min-height: 100%;
height: 100%;
max-height: 100%;
}
.cs-checkbox {
appearance: none;
display: grid;
place-content: center;
border: 2px solid var(--cs-dark-40);
border-radius: var(--cs-radius-s);
width: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
height: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
}
.cs-checkbox:checked:before {
transform: scale(1);
}
.cs-checkbox::before {
content: "";
width: 1em;
height: 1em;
box-shadow: inset 1em 1em #fff;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
transform: scale(0);
transition: transform 0.2s;
}
.cs-checkbox:hover {
border-color: var(--cs-primary);
}
.cs-checkbox:focus {
outline: 3px solid var(--cs-primary-l-3);
outline-offset: 2px;
}
.cs-checkbox:checked {
background: var(--cs-primary);
border-color: var(--cs-primary);
}
.cs-radio {
appearance: none;
display: grid;
place-content: center;
border: 2px solid var(--cs-dark-40);
border-radius: var(--cs-radius-full);
width: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
height: clamp(1.13rem, calc(-0.38vw + 1.49rem), 1.38rem);
}
.cs-radio:checked:before {
transform: scale(1);
}
.cs-radio::before {
content: "";
width: 1em;
height: 1em;
border-radius: 100%;
transform: scale(0);
transition: transform 0.2s;
background: var(--cs-primary);
}
.cs-radio:hover {
border-color: var(--cs-primary);
}
.cs-radio:focus {
outline: 3px solid var(--cs-primary-l-3);
outline-offset: 2px;
}
.cs-radio:checked {
border-color: var(--cs-primary);
}
/* Text Modifiers */
.cs-italic {
font-style: italic;
}
.cs-bold {
font-weight: bold;
}
.cs-lowercase {
text-transform: lowercase;
}
.cs-uppercase {
text-transform: uppercase;
}
.cs-underline {
text-decoration: underline;
}
.cs-font-100 {
font-weight: 100;
}
.cs-font-200 {
font-weight: 200;
}
.cs-font-300 {
font-weight: 300;
}
.cs-font-400 {
font-weight: 400;
}
.cs-font-500 {
font-weight: 500;
}
.cs-font-600 {
font-weight: 600;
}
.cs-font-700 {
font-weight: 700;
}
.cs-font-800 {
font-weight: 800;
}
.cs-font-900 {
font-weight: 900;
}
/* Text Alignment */
.cs-text-left {
text-align: left;
}
.cs-text-center {
text-align: center;
}
.cs-text-right {
text-align: right;
}
.cs-text-justify {
text-align: justify;
}
/* Grid Variables */
/* Grid Layouts */
.cs-row {
display: grid;
grid-auto-flow: column;
justify-content: start;
}
.cs-column {
display: grid;
grid-auto-flow: row;
justify-items: start;
align-content: start;
}
.cs-columns-2 {
display: grid;
grid-template-columns: var(--columns-2);
}
.cs-columns-3 {
display: grid;
grid-template-columns: var(--columns-3);
}
.cs-columns-4 {
display: grid;
grid-template-columns: var(--columns-4);
}
.cs-columns-5 {
display: grid;
grid-template-columns: var(--columns-5);
}
.cs-columns-6 {
display: grid;
grid-template-columns: var(--columns-6);
}
.cs-columns-7 {
display: grid;
grid-template-columns: var(--columns-7);
}
.cs-columns-8 {
display: grid;
grid-template-columns: var(--columns-8);
}
/* Automatic Columns */
.cs-columns-min-5 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
}
.cs-columns-min-10 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.cs-columns-min-20 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
.cs-columns-min-30 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}
.cs-columns-min-40 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
}
.cs-columns-min-50 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}
.cs-columns-min-60 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(60rem, 1fr));
}
.cs-columns-min-70 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(70rem, 1fr));
}
/* Simple Flex Layouts */
.cs-flex-row {
display: flex;
flex-direction: row;
}
.cs-flex-column {
display: flex;
flex-direction: column;
}
.cs-flex-1 {
flex: 1;
}
.cs-flex-2 {
flex: 2;
}
.cs-flex-3 {
flex: 3;
}
.cs-flex-wrap {
flex-wrap: wrap;
}
.cs-flex-nowrap {
flex-wrap: nowrap;
}
/* Grid Column Span */
.cs-col-span-2 {
grid-column: auto / span 2;
}
.cs-col-span-3 {
grid-column: auto / span 3;
}
.cs-col-span-4 {
grid-column: auto / span 4;
}
.cs-col-span-5 {
grid-column: auto / span 5;
}
.cs-col-span-6 {
grid-column: auto / span 6;
}
.cs-col-span-7 {
grid-column: auto / span 7;
}
.cs-col-span-8 {
grid-column: auto / span 8;
}
/* Grid Column Start */
.cs-col-start-1 {
grid-column-start: 1;
}
.cs-col-start-2 {
grid-column-start: 2;
}
.cs-col-start-3 {
grid-column-start: 3;
}
.cs-col-start-4 {
grid-column-start: 4;
}
.cs-col-start-5 {
grid-column-start: 5;
}
.cs-col-start-6 {
grid-column-start: 6;
}
.cs-col-start-7 {
grid-column-start: 7;
}
.cs-col-start-8 {
grid-column-start: 8;
}
/* Grid Row Span */
.cs-row-span-2 {
grid-row: auto / span 2;
}
.cs-row-span-3 {
grid-row: auto / span 3;
}
.cs-row-span-4 {
grid-row: auto / span 4;
}
.cs-row-span-5 {
grid-row: auto / span 5;
}
.cs-row-span-6 {
grid-row: auto / span 6;
}
.cs-row-span-7 {
grid-row: auto / span 7;
}
.cs-row-span-8 {
grid-row: auto / span 8;
}
/* Grid Row Start */
.cs-row-start-1 {
grid-row-start: 1;
}
.cs-row-start-2 {
grid-row-start: 2;
}
.cs-row-start-3 {
grid-row-start: 3;
}
.cs-row-start-4 {
grid-row-start: 4;
}
.cs-row-start-5 {
grid-row-start: 5;
}
.cs-row-start-6 {
grid-row-start: 6;
}
.cs-row-start-7 {
grid-row-start: 7;
}
.cs-row-start-8 {
grid-row-start: 8;
}
/* Alignments */
.cs-items-left {
justify-items: start;
}
.cs-content-left {
justify-content: start;
}
.cs-items-center {
justify-items: center;
}
.cs-content-center {
justify-content: center;
}
.cs-items-right {
justify-items: end;
}
.cs-content-right {
justify-content: end;
}
.cs-items-top {
align-items: start;
}
.cs-content-top {
align-content: start;
}
.cs-items-middle {
align-items: center;
}
.cs-content-middle {
align-content: center;
}
.cs-items-bottom {
align-items: end;
}
.cs-content-bottom {
align-content: end;
}
.cs-items-stretch {
align-items: stretch;
}
.cs-content-stretch {
justify-content: stretch;
}
.cs-space-between {
justify-content: space-between;
}
.cs-space-around {
justify-content: space-around;
}
/* Self Alignments */
.cs-self-left {
margin-right: auto;
place-self: start;
}
.cs-self-center {
margin-inline: auto;
place-self: center;
}
.cs-self-right {
margin-left: auto;
place-self: end;
}
.cs-self-top {
margin-bottom: auto;
align-self: start;
}
.cs-self-middle {
margin-block: auto;
align-self: center;
}
.cs-self-bottom {
margin-top: auto;
align-self: end;
}
.cs-self-stretch {
align-self: stretch;
}
/* Dimensions */
.cs-full-width {
width: 100%;
}
.cs-full-height {
height: 100%;
}
.cs-screen-width {
width: 100vw;
}
.cs-screen-height {
height: 100vh;
}
.cs-auto-width {
width: auto;
}
.cs-auto-height {
height: auto;
}
.cs-width-90 {
width: 90%;
}
.cs-width-80 {
width: 80%;
}
.cs-width-70 {
width: 70%;
}
.cs-width-60 {
width: 60%;
}
.cs-width-50 {
width: 50%;
}
.cs-width-40 {
width: 40%;
}
.cs-width-30 {
width: 30%;
}
.cs-width-20 {
width: 20%;
}
.cs-width-10 {
width: 10%;
}
/* Max Width */
.cs-max-site-width {
max-width: var(--cs-max-screen-width);
width: 100%;
}
.cs-max-width-140 {
max-width: 140rem;
}
.cs-max-width-130 {
max-width: 130rem;
}
.cs-max-width-120 {
max-width: 120rem;
}
.cs-max-width-110 {
max-width: 110rem;
}
.cs-max-width-100 {
max-width: 100rem;
}
.cs-max-width-90 {
max-width: 90rem;
}
.cs-max-width-80 {
max-width: 80rem;
}
.cs-max-width-70 {
max-width: 70rem;
}
.cs-max-width-60 {
max-width: 60rem;
}
.cs-max-width-50 {
max-width: 50rem;
}
.cs-max-width-40 {
max-width: 40rem;
}
.cs-max-width-30 {
max-width: 30rem;
}
.cs-max-width-20 {
max-width: 20rem;
}
.cs-max-width-10 {
max-width: 10rem;
}
/* Border Radius */
.cs-radius-xs {
border-radius: var(--cs-radius-xs);
}
.cs-radius-s {
border-radius: var(--cs-radius-s);
}
.cs-radius-m {
border-radius: var(--cs-radius-m);
}
.cs-radius-l {
border-radius: var(--cs-radius-l);
}
.cs-radius-xl {
border-radius: var(--cs-radius-xl);
}
.cs-radius-full {
border-radius: var(--cs-radius-full);
}
/* Borders */
.cs-border {
border-width: 1px;
border-style: solid;
}
.cs-border-left {
border-left-width: 1px;
border-left-style: solid;
}
.cs-border-right {
border-right-width: 1px;
border-right-style: solid;
}
.cs-border-top {
border-top-width: 1px;
border-top-style: solid;
}
.cs-border-bottom {
border-bottom-width: 1px;
border-bottom-style: solid;
}
/* Shadows */
.cs-shadow-xs {
box-shadow: var(--cs-shadow-xs);
}
.cs-shadow-s {
box-shadow: var(--cs-shadow-s);
}
.cs-shadow-m {
box-shadow: var(--cs-shadow-m);
}
.cs-shadow-l {
box-shadow: var(--cs-shadow-l);
}
.cs-shadow-xl {
box-shadow: var(--cs-shadow-xl);
}
/* Opacity */
.cs-opacity-0 {
opacity: 0;
}
.cs-opacity-10 {
opacity: 0.1;
}
.cs-opacity-20 {
opacity: 0.2;
}
.cs-opacity-30 {
opacity: 0.3;
}
.cs-opacity-40 {
opacity: 0.4;
}
.cs-opacity-50 {
opacity: 0.5;
}
.cs-opacity-60 {
opacity: 0.6;
}
.cs-opacity-70 {
opacity: 0.7;
}
.cs-opacity-80 {
opacity: 0.8;
}
.cs-opacity-90 {
opacity: 0.9;
}
.cs-opacity-100 {
opacity: 1;
}
/* Aspect Ratios */
.cs-aspect-1 {
aspect-ratio: 1;
}
.cs-aspect-4-3 {
aspect-ratio: 4 / 3;
}
.cs-aspect-3-4 {
aspect-ratio: 3 / 4;
}
.cs-aspect-3-2 {
aspect-ratio: 3 / 2;
}
.cs-aspect-2-3 {
aspect-ratio: 2 / 3;
}
.cs-aspect-16-9 {
aspect-ratio: 16 / 9;
}
.cs-aspect-9-16 {
aspect-ratio: 9 / 16;
}
/* Image Fit */
.cs-fit-contain {
object-fit: contain;
}
.cs-fit-cover {
object-fit: cover;
}
.cs-fit-fill {
object-fit: fill;
}
/* Backdrop Blur */
.cs-bg-blur-xs {
backdrop-filter: blur(2px);
}
.cs-bg-blur-s {
backdrop-filter: blur(4px);
}
.cs-bg-blur-m {
backdrop-filter: blur(8px);
}
.cs-bg-blur-l {
backdrop-filter: blur(16px);
}
.cs-bg-blur-xl {
backdrop-filter: blur(32px);
}
/* Filters */
.cs-grayscale {
filter: grayscale(1);
}
/* Transforms */
.cs-rotate-90 {
transform: rotate(90deg);
}
.cs-rotate-180 {
transform: rotate(180deg);
}
/* Positioning */
.cs-relative {
position: relative;
}
.cs-absolute {
position: absolute;
}
.cs-sticky {
position: sticky;
}
.cs-fixed {
position: fixed;
}
.cs-inset-0 {
inset: 0;
}
.cs-bottom-0 {
bottom: 0;
}
.cs-top-0 {
top: 0;
}
.cs-left-0 {
left: 0;
}
.cs-right-0 {
right: 0;
}
/* Cursors */
.cs-pointer {
cursor: pointer;
}
.cs-not-allowed {
cursor: not-allowed;
}
.cs-cursor-auto {
cursor: auto;
}
.cs-no-pointer-events {
pointer-events: none;
}
/* Z-Index */
.cs-z--1 {
z-index: -1;
}
.cs-z-0 {
z-index: 0;
}
.cs-z-1 {
z-index: 1;
}
.cs-z-10 {
z-index: 10;
}
.cs-z-100 {
z-index: 100;
}
.cs-z-1000 {
z-index: 1000;
}
.cs-z-10000 {
z-index: 10000;
}
@media (max-width: 1400px) {
.cs-column--on-xl {
grid-template-columns: 1fr;
grid-auto-flow: row;
}
.cs-row--on-xl {
grid-template-columns: unset;
grid-auto-flow: column;
}
.cs-columns-2--on-xl {
grid-template-columns: repeat(2, 1fr);
}
.cs-columns-3--on-xl {
grid-template-columns: repeat(3, 1fr);
}
.cs-columns-4--on-xl {
grid-template-columns: repeat(4, 1fr);
}
.cs-columns-5--on-xl {
grid-template-columns: repeat(5, 1fr);
}
.cs-columns-6--on-xl {
grid-template-columns: repeat(6, 1fr);
}
.cs-col-span-1--on-xl {
grid-column: auto / span 1;
}
.cs-col-span-2--on-xl {
grid-column: auto / span 2;
}
.cs-col-span-3--on-xl {
grid-column: auto / span 3;
}
.cs-col-span-4--on-xl {
grid-column: auto / span 4;
}
.cs-col-span-5--on-xl {
grid-column: auto / span 5;
}
.cs-col-span-6--on-xl {
grid-column: auto / span 6;
}
.cs-col-start-1--on-xl {
grid-column-start: 1;
}
.cs-col-start-2--on-xl {
grid-column-start: 2;
}
.cs-col-start-3--on-xl {
grid-column-start: 3;
}
.cs-col-start-4--on-xl {
grid-column-start: 4;
}
.cs-col-start-5--on-xl {
grid-column-start: 5;
}
.cs-col-start-6--on-xl {
grid-column-start: 6;
}
.cs-row-span-1--on-xl {
grid-row: auto / span 1;
}
.cs-row-span-2--on-xl {
grid-row: auto / span 2;
}
.cs-row-span-3--on-xl {
grid-row: auto / span 3;
}
.cs-row-span-4--on-xl {
grid-row: auto / span 4;
}
.cs-row-span-5--on-xl {
grid-row: auto / span 5;
}
.cs-row-span-6--on-xl {
grid-row: auto / span 6;
}
.cs-row-start-1--on-xl {
grid-row-start: 1;
}
.cs-row-start-2--on-xl {
grid-row-start: 2;
}
.cs-row-start-3--on-xl {
grid-row-start: 3;
}
.cs-row-start-4--on-xl {
grid-row-start: 4;
}
.cs-row-start-5--on-xl {
grid-row-start: 5;
}
.cs-row-start-6--on-xl {
grid-row-start: 6;
}
}
@media (max-width: 992px) {
.cs-column--on-l {
grid-template-columns: 1fr;
grid-auto-flow: row;
}
.cs-row--on-l {
grid-template-columns: unset;
grid-auto-flow: column;
}
.cs-columns-2--on-l {
grid-template-columns: repeat(2, 1fr);
}
.cs-columns-3--on-l {
grid-template-columns: repeat(3, 1fr);
}
.cs-columns-4--on-l {
grid-template-columns: repeat(4, 1fr);
}
.cs-columns-5--on-l {
grid-template-columns: repeat(5, 1fr);
}
.cs-columns-6--on-l {
grid-template-columns: repeat(6, 1fr);
}
.cs-col-span-1--on-l {
grid-column: auto / span 1;
}
.cs-col-span-2--on-l {
grid-column: auto / span 2;
}
.cs-col-span-3--on-l {
grid-column: auto / span 3;
}
.cs-col-span-4--on-l {
grid-column: auto / span 4;
}
.cs-col-span-5--on-l {
grid-column: auto / span 5;
}
.cs-col-span-6--on-l {
grid-column: auto / span 6;
}
.cs-col-start-1--on-l {
grid-column-start: 1;
}
.cs-col-start-2--on-l {
grid-column-start: 2;
}
.cs-col-start-3--on-l {
grid-column-start: 3;
}
.cs-col-start-4--on-l {
grid-column-start: 4;
}
.cs-col-start-5--on-l {
grid-column-start: 5;
}
.cs-col-start-6--on-l {
grid-column-start: 6;
}
.cs-row-span-1--on-l {
grid-row: auto / span 1;
}
.cs-row-span-2--on-l {
grid-row: auto / span 2;
}
.cs-row-span-3--on-l {
grid-row: auto / span 3;
}
.cs-row-span-4--on-l {
grid-row: auto / span 4;
}
.cs-row-span-5--on-l {
grid-row: auto / span 5;
}
.cs-row-span-6--on-l {
grid-row: auto / span 6;
}
.cs-row-start-1--on-l {
grid-row-start: 1;
}
.cs-row-start-2--on-l {
grid-row-start: 2;
}
.cs-row-start-3--on-l {
grid-row-start: 3;
}
.cs-row-start-4--on-l {
grid-row-start: 4;
}
.cs-row-start-5--on-l {
grid-row-start: 5;
}
.cs-row-start-6--on-l {
grid-row-start: 6;
}
}
@media (max-width: 768px) {
.cs-column--on-m {
grid-template-columns: 1fr;
grid-auto-flow: row;
}
.cs-row--on-m {
grid-template-columns: unset;
grid-auto-flow: column;
}
.cs-columns-2--on-m {
grid-template-columns: repeat(2, 1fr);
}
.cs-columns-3--on-m {
grid-template-columns: repeat(3, 1fr);
}
.cs-columns-4--on-m {
grid-template-columns: repeat(4, 1fr);
}
.cs-columns-5--on-m {
grid-template-columns: repeat(5, 1fr);
}
.cs-columns-6--on-m {
grid-template-columns: repeat(6, 1fr);
}
.cs-col-span-1--on-m {
grid-column: auto / span 1;
}
.cs-col-span-2--on-m {
grid-column: auto / span 2;
}
.cs-col-span-3--on-m {
grid-column: auto / span 3;
}
.cs-col-span-4--on-m {
grid-column: auto / span 4;
}
.cs-col-span-5--on-m {
grid-column: auto / span 5;
}
.cs-col-span-6--on-m {
grid-column: auto / span 6;
}
.cs-col-start-1--on-m {
grid-column: 1;
}
.cs-col-start-2--on-m {
grid-column: 2;
}
.cs-col-start-3--on-m {
grid-column: 3;
}
.cs-col-start-4--on-m {
grid-column: 4;
}
.cs-col-start-5--on-m {
grid-column: 5;
}
.cs-col-start-6--on-m {
grid-column: 6;
}
.cs-row-span-1--on-m {
grid-row: auto / span 1;
}
.cs-row-span-2--on-m {
grid-row: auto / span 2;
}
.cs-row-span-3--on-m {
grid-row: auto / span 3;
}
.cs-row-span-4--on-m {
grid-row: auto / span 4;
}
.cs-row-span-5--on-m {
grid-row: auto / span 5;
}
.cs-row-span-6--on-m {
grid-row: auto / span 6;
}
.cs-row-start-1--on-m {
grid-row-start: 1;
}
.cs-row-start-2--on-m {
grid-row-start: 2;
}
.cs-row-start-3--on-m {
grid-row-start: 3;
}
.cs-row-start-4--on-m {
grid-row-start: 4;
}
.cs-row-start-5--on-m {
grid-row-start: 5;
}
.cs-row-start-6--on-m {
grid-row-start: 6;
}
}
@media (max-width: 480px) {
.cs-column--on-s {
grid-template-columns: 1fr;
grid-auto-flow: row;
}
.cs-row--on-s {
grid-template-columns: 1fr;
grid-auto-flow: column;
}
.cs-columns-2--on-s {
grid-template-columns: repeat(2, 1fr);
}
.cs-columns-3--on-s {
grid-template-columns: repeat(3, 1fr);
}
.cs-columns-4--on-s {
grid-template-columns: repeat(4, 1fr);
}
.cs-columns-5--on-s {
grid-template-columns: repeat(5, 1fr);
}
.cs-columns-6--on-s {
grid-template-columns: repeat(6, 1fr);
}
.cs-col-span-1--on-s {
grid-column: auto / span 1;
}
.cs-col-span-2--on-s {
grid-column: auto / span 2;
}
.cs-col-span-3--on-s {
grid-column: auto / span 3;
}
.cs-col-span-4--on-s {
grid-column: auto / span 4;
}
.cs-col-span-5--on-s {
grid-column: auto / span 5;
}
.cs-col-span-6--on-s {
grid-column: auto / span 6;
}
.cs-col-start-1--on-s {
grid-column-start: 1;
}
.cs-col-start-2--on-s {
grid-column-start: 2;
}
.cs-col-start-3--on-s {
grid-column-start: 3;
}
.cs-col-start-4--on-s {
grid-column-start: 4;
}
.cs-col-start-5--on-s {
grid-column-start: 5;
}
.cs-col-start-6--on-s {
grid-column-start: 6;
}
.cs-row-span-1--on-s {
grid-row: auto / span 1;
}
.cs-row-span-2--on-s {
grid-row: auto / span 2;
}
.cs-row-span-3--on-s {
grid-row: auto / span 3;
}
.cs-row-span-4--on-s {
grid-row: auto / span 4;
}
.cs-row-span-5--on-s {
grid-row: auto / span 5;
}
.cs-row-span-6--on-s {
grid-row: auto / span 6;
}
.cs-row-start-1--on-s {
grid-row-start: 1;
}
.cs-row-start-2--on-s {
grid-row-start: 2;
}
.cs-row-start-3--on-s {
grid-row-start: 3;
}
.cs-row-start-4--on-s {
grid-row-start: 4;
}
.cs-row-start-5--on-s {
grid-row-start: 5;
}
.cs-row-start-6--on-s {
grid-row-start: 6;
}
}
/* --- Cinesist Grid --- */
@media (width >=992px) {
.grid-container {
flex-flow: row nowrap;
}
.grid-container>*:nth-child(1) {
flex: 100%;
width: 100%;
}
.grid-container>*:nth-child(2) {
flex: 100%;
width: 100%;
}
}
/** desktop */
@media (width >=1025px) {
.grid-container {
margin-right: 0px;
margin-left: 0px;
}
.grid-container>* {
padding-right: 0px;
padding-left: 0px;
}
}
/* --- Utility Classes --- */
.cs-display-none {
display: none;
}
.cs-visible {
visibility: visible;
}
.cs-hidden {
visibility: hidden;
}
.cs-overflow-hidden {
overflow: hidden;
}
.cs-overflow-auto {
overflow: auto;
}
.cs-overflow-x-hidden {
overflow-x: hidden;
}
.cs-overflow-x-auto {
overflow-x: auto;
}
.cs-overflow-y-hidden {
overflow-y: hidden;
}
.cs-overflow-y-auto {
overflow-y: auto;
}
.cs-list-none {
list-style-type: none;
}
.cs-white-space-nowrap {
white-space: nowrap;
}
.cs-transition-global {
transition: all 0.3s;
}
/* Image Zoom and Brighten Effect */
.cs-zoom {
position: relative;
overflow: hidden;
display: block;
}
/* 2. The Image (Base State) */
.cs-zoom img {
transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform, filter;
transform: scale(1);
/* Ensure a base scale is set */
}
/* 3. The Isolated Action */
/* Only zooms the image if its specific parent container (.cs-zoom) is hovered */
.cs-zoom:hover img {
filter: brightness(110%) !important;
transform: scale(1.08) !important;
}
/* 1. The Overlay Container */
.cs-overlay {
position: relative;
display: block;
overflow: hidden;
border-radius: inherit;
/* Matches your .cs-zoom logic */
}
/* 2. The Gradient Layer */
.cs-overlay::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
/* Allows clicking the image underneath */
/* Premium Gradient: Transparent -> 70% Black */
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.2) 50%,
rgba(0, 0, 0, 0.7) 100%);
/* Smooth fade in case you want to toggle it */
transition: opacity 0.3s ease;
z-index: 2;
}
/* 3. Ensure HUD Text stays ON TOP of the gradient */
.cs-overlay .cinescore-hud,
.cs-overlay .grid-meta {
position: absolute;
bottom: 15px;
left: 15px;
z-index: 3;
/* Higher than the ::after layer */
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
/* Extra crispness */
}
/* Line Clamp 1 - to keep all of the headings and excerpts uniform and end them with ellipsis (Premium Look) */
.cs-line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
line-clamp: 1;
text-overflow: ellipsis;
/* Optional: Add a min-height for uniform alignment
min-height: 60px; */
}
/* Line Clamp 2 - to keep all of the headings and excerpts uniform and end them with ellipsis (Premium Look) */
.cs-line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
/* Optional: Add a min-height for uniform alignment
min-height: 60px; */
}
/**
* Animations
**/
/* Dual Color Loading Animation */
/* HTML: */
.jw-loader {
width: fit-content;
font-weight: bold;
color: currentColor;
background: linear-gradient(90deg, currentColor calc(50% + 0.5ch), currentColor 0) right/calc(200% + 1ch) 100%;
-webkit-background-clip: text;
background-clip: text;
animation: l7 2s infinite steps(11);
}
.jw-loader:before {
content:"Downloading Data..."
}
@keyframes l7 {to{background-position: left}}
/*
-----------------
2 - General
-----------------
*/
.wp-site-blocks {
padding: 0;
}
/* --- Cinesist Wrapper gives us Nice Uniform Gutters --- */
.edge-margin {
margin: 0 20px;
margin-block-end: 0 !important;
margin-block-start: 0 !important;
}
/* For elements that need to span the full width */
.breakout {
grid-column: 1 / -1;
}
/* --- Mobile Gutters --- */
@media (min-width: 768px) {
.wrapper {
/* --margin-gutter: 2rem; */
padding: 0.5rem 2rem;
}
}
/* --- Smaller Screen Gutters --- */
@media (min-width: 1024px) {
.wrapper {
--margin-gutter: 3rem;
padding: 0 3rem;
}
}
/* --- Laptop Gutters --- */
@media (min-width: 1440px) {
.wrapper {
--margin-gutter: 80px;
padding: 0 80px;
}
}
/* --- Cinesist Framework Over Rides: Checking Relevancy as this made Blocksy Spacing use our spacing --- */
/* --- Display Post Card Titles --- */
.entry-title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
/* Adjust this number to limit lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Ensures ellipsis appears */
}
/* --- Table of Contents Override --- */
.rbtoc {
display: inline-flex;
float: none;
flex-flow: column nowrap;
width: 100%;
max-width: 100%;
margin-right: 0;
padding: 20px 20px 13px;
border-radius: var(--round-5);
background-color: var(--toc-bg, var(--flex-gray-7));
box-shadow: 0 5px 30px var(--shadow-7);
}
/* --- Comments Section Style --- */
#comment {
border-width: 2px;
border-style: groove;
border-color: var(--flex-snarkive) !important;
border-radius: 10px;
box-shadow:
inset 0px 2px 5px rgba(0, 0, 0, 0.3),
inset 0px -2px 5px rgba(255, 255, 255, 0.5);
}
/*
-----------------
3 - Icon Fonts
-----------------
*/
/* --- Global Icon Protocol --- */
i[class^="rbi-"],
i[class*=" rbi-"],
.fa-solid,
.fa-regular {
transition: color 0.3s ease, transform 0.2s ease;
align-items: center;
justify-content: center;
vertical-align: middle;
}
/* --- Elementor Icon Mode Adaptation --- */
.elementor-icon-list-icon svg {
fill: var(--text-2);
/* Using our unified variable instead of body-fcolor */
transition: fill 0.3s ease;
}
/* --- Foxiz Bookmark Hijack (Protocol e906/e907) --- */
.rbi-plus:before {
content: "\e907" !important;
/* Outlined Bookmark */
}
.rbi-bookmark-fill:before {
content: "\e906" !important;
/* Filled Bookmark */
color: var(--review-accent, var(--flex-snarkive)) !important;
/* Visual confirmation of 'Saved' state */
}
/* --- Follow Button Logic --- */
.b-follow .rb-follow i {
position: relative;
align-items: center;
}
.b-follow .rb-follow i:after {
font-family: var(--cs-font-primary);
font-size: 0.85rem;
font-weight: 700;
margin-left: 8px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* RESPONSIVE ICON SCALING
Breakpoint 768px (Tablets)
*/
@media (max-width: 768px) {
.rbi-plus:before,
.rbi-bookmark-fill:before {
font-size: 16px;
/* Ensure touch targets are usable but not bloated */
}
.b-follow .rb-follow i:after {
display: none;
/* Hide 'Follow' text on mobile to save HUD space */
}
}
/* Breakpoint 480px (Mobile) */
@media (max-width: 480px) {
.elementor-icon-list-icon svg {
width: 18px;
height: 18px;
}
}
/*
-----------------
4 - Swiper Slider
-----------------
*/
/* --- Main Container Overrides --- */
.rb-swiper-container,
.swiper-container {
overflow: visible !important;
/* Allows our glows to bleed out without being clipped */
}
/* --- Navigation Arrows (Tactical HUD Look) --- */
.swiper-button-next,
.swiper-button-prev {
background: rgba(0, 0, 0, 0.8) !important;
border: 1px solid var(--primary);
width: 40px !important;
height: 40px !important;
color: var(--primary) !important;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
}
.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 14px !important;
font-weight: 900;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background: var(--primary) !important;
color: #000 !important;
box-shadow: 0 0 15px var(--primary);
}
/* --- Pagination Dots (Power Indicators) --- */
.swiper-pagination-bullet {
background: var(--text-muted) !important;
opacity: 0.5;
width: 8px;
height: 2px;
/* Rectangular 'Terminal' style dots */
border-radius: 0;
transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
background: var(--primary) !important;
opacity: 1;
width: 20px;
/* Expands when active */
box-shadow: 0 0 10px var(--primary);
}
/* -----------------
RESPONSIVE: SWIPER SCALING
-----------------
*/
/* Breakpoint: 1400px - 1520px */
@media (max-width: 1520px) {
.swiper-button-next {
right: -10px;
}
.swiper-button-prev {
left: -10px;
}
}
/* Breakpoint: 992px (Small Laptops/Tablets) */
@media (max-width: 992px) {
.swiper-button-next,
.swiper-button-prev {
width: 35px !important;
height: 35px !important;
}
}
/* Breakpoint: 768px (Mobile Portrait) */
@media (max-width: 768px) {
/* Hide arrows on mobile to favor touch swiping and save space */
.swiper-button-next,
.swiper-button-prev {
display: none !important;
}
.swiper-pagination {
bottom: 5px !important;
}
}
/* Breakpoint: 480px (Small Mobile) */
@media (max-width: 480px) {
.swiper-pagination-bullet {
width: 6px;
}
.swiper-pagination-bullet-active {
width: 15px;
}
}
/*
-----------------
5 - Header
-----------------
*/
/* --- Header logged in greeting --- */
.logged-welcome {
font-size: 1rem;
align-items: center;
}
/* Apply glassmorphism effect to #sticky-holder when body has the 'sticky-on' class */
body.sticky-on #sticky-holder, .gb-is-sticky {
background-color: var(--flex-glass-bg) !important;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
/* Subtle white border for separation */
}
/* Ensure the navbar-outer placeholder has correct height */
#navbar-outer {
/* height: 60px !important; */
/* Adjust if your actual header height is different */
}
/* Hide all default logos within the sticky header, to allow JS to show the correct one */
body.sticky-on .logo-wrap .logo img {
display: none !important;
}
/* Ensure the specific logo-transparent is visible when JavaScript makes it active */
body.sticky-on .logo-wrap .logo img.logo-transparent {
display: block !important;
}
/* --- News Ticker Styles --- */
/* --- Sticky Header "Tinted Glass" Effect --- */
/* Target the sticky container when the body is in its sticky state and the container itself is active */
body[data-header*='type-1'] .ct-header [data-sticky*='yes'] [data-row*='middle'] {
/* Ensure a background color is set for backdrop-filter to work */
background-color: rgba(255, 255, 255, 0.2);
/* Light mode translucent white */
border-radius: 3px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
backdrop-filter: blur(5px) saturate(180%) !important;
-webkit-backdrop-filter: blur(2px) saturate(180%);
/* For Safari compatibility */
border: 1px solid rgba(255, 255, 255, 0.3);
/* You might also need to adjust border, shadow, etc., if Blocksy adds them */
/* For example, if it has a box-shadow that you want to remove or change */
/* box-shadow: none !important; */
}
/* Dark Mode Tinted Glass for Sticky Header */
html[data-color-mode='dark'] body[data-header*='type-1'] .ct-header [data-sticky*='yes'] [data-row*='middle'] {
background-color: rgba(0, 0, 0, 0.3);
/* Dark mode translucent black */
/* Adjust blur/saturate if you want a different effect for dark mode */
backdrop-filter: blur(2px) saturate(150%) !important;
border-radius: 3px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1) !important;
-webkit-backdrop-filter: blur(5px) saturate(150%);
border: 1px solid rgba(0, 0, 0, 0.3);
z-index: 99999;
}
/* ==========================================================================
CINESIST: DARK MODE IMAGE TOGGLE EXPLOIT
========================================================================== */
/* 1. Default State (Light Mode is Active)
Hide the dark image, show the light image. */
.cs-img-dark {
display: none !important;
}
.cs-img-light {
display: block !important; /* Use inline-block if it's acting weird in flex containers */
}
/* 2. Foxiz Dark Mode Triggered
When Foxiz applies [data-theme="dark"] to the root/body, invert the visibility. */
[data-theme="dark"] .cs-img-light {
display: none !important;
}
[data-theme="dark"] .cs-img-dark {
display: block !important;
}
/* --- 1. BASE CONTAINER & ELEMENT SETUP --- */
.cs-site-header__brand-wrapper {
position: relative;
display: inline-flex;
align-items: center;
min-width: 180px; /* Adjust to match your widest logo */
height: 50px; /* Adjust to match your header height */
}
/* Base style for ALL logo variants: Absolute positioning for perfect stacking */
.cs-site-header__brand-wrapper img {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
visibility: hidden;
/* NO transition here by default to prevent jank on scroll-up */
}
/* --- 2. SELECTIVE TRANSITION (ONLY ON SCROLL DOWN) --- */
/* We only apply the transition when .gb-is-sticky is active */
.gb-is-sticky .cs-site-header__brand-wrapper img {
transition: opacity 0.3s ease-in-out, visibility 0.3s;
}
/* --- 3. LIGHT MODE LOGIC (Default) --- */
/* Normal Header (Light): Show Cinefox Logo */
:not([data-theme="dark"]) .gb-site-header:not(.gb-is-sticky) .cinefox-logo {
opacity: 1;
visibility: visible;
}
/* Sticky Header (Light): Show Light Mode Emblem (cs-brand-lm) */
:not([data-theme="dark"]) .gb-is-sticky .cs-brand-lm {
opacity: 1 !important;
visibility: visible !important;
}
/* --- 4. DARK MODE LOGIC (Foxiz [data-theme="dark"]) --- */
/* Normal Header (Dark): Show Cipher Logo */
[data-theme="dark"] .gb-site-header:not(.gb-is-sticky) .cipher-logo {
opacity: 1;
visibility: visible;
}
/* Sticky Header (Dark): Show Dark Mode Emblem (cs-brand-dm) */
[data-theme="dark"] .gb-is-sticky .cs-brand-dm {
opacity: 1 !important;
visibility: visible !important;
}
/* --- 5. HIDE LOGOS DURING STICKY FAIL-SAFE --- */
/* Explicitly ensures default logos vanish when sticky is active */
.gb-is-sticky .cinefox-logo,
.gb-is-sticky .cipher-logo {
opacity: 0 !important;
visibility: hidden !important;
}
/* --- Possibly Defunct CSS --- */
/* Sticky Header (Light Mode): Show sticky logo, hide default and dark mode logos */
body[data-header*='sticky:shrink'] .cs-site-header__brand-wrapper .default-logo,
body[data-header*='sticky:shrink'] .cs-site-header__brand-wrapper .dark-mode-logo {
display: none;
/* Hide default and dark mode logos when sticky */
}
body[data-header*='sticky:shrink'] .site-logo-container .sticky-logo {
display: inline;
/* Show sticky logo */
}
/* Sticky Header (Dark Mode): Show sticky logo (if it's also dark-mode appropriate) */
/* This rule assumes your .sticky-logo is suitable for both light and dark sticky states. */
/* If you have a *separate* sticky-dark-mode-logo, you'd adjust this. */
html[data-color-mode='dark'] body[data-header*='sticky:shrink'] .site-logo-container .sticky-logo {
display: inline;
/* Ensure sticky logo is visible in dark mode sticky state */
/* If your sticky logo needs a filter for dark mode (e.g., if it's light and needs to appear dark) */
/* filter: brightness(0.5) invert(0.8); */
}
/* IMPORTANT: If Blocksy adds additional CSS that overrides these rules, you might need to use `!important`
or increase specificity. Always test thoroughly. */
/* --- Header Bottom Row --- */
/* Light Mode */
[data-header*='type-1'] .ct-header [data-row*='bottom'] {
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow:
0px 5px 15px rgba(0, 0, 0, 0.3),
0px 10px 30px rgba(0, 0, 0, 0.2),
0px 0px 0px 2px rgba(255, 255, 255, 0.03) !important;
transform: perspective(1000px) rotateX(2deg) translateY(-2px);
transform-origin: bottom center;
transition: all 0.3s ease;
overflow: hidden;
}
/* Dark Mode */
html[data-color-mode='dark'] [data-header*='type-1'] .ct-header [data-row*='bottom'] {
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow:
0px 5px 15px rgba(0, 0, 0, 0.3),
0px 10px 30px rgba(0, 0, 0, 0.2),
0px 0px 0px 2px rgba(0, 0, 0, 0.03) !important;
transform: perspective(1000px) rotateX(2deg) translateY(-2px);
transform-origin: bottom center;
transition: all 0.3s ease;
overflow: hidden;
}
/* --- Header Wrapper --- */
.header-set-1 {
/* Setting Full Width */
--rb-width: 1520px;
background: var(--nav-bg);
background: -webkit-linear-gradient(left, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%);
background: linear-gradient(to right, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%);
box-shadow: 0 4px 30px var(--shadow-7);
grid-column: 1 / -1;
}
.navbar-outer {
/* background: var(--nav-bg); */
/* background: -webkit-linear-gradient(left, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%); */
/* background: linear-gradient(to right, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%); */
}
.rb-container {
max-width: var(--rb-width, 1300px);
}
.cs-container {
max-width: var(--cs-width, 1300px);
width: 100%;
}
/* .cs-block-group {
grid-column: 2;
}
*/
.style-shadow .navbar-wrap:not(.navbar-transparent),
.sticky-on .navbar-wrap {
/* box-shadow: none !important; */
}
.wrapper {
margin: 0 auto;
padding: 0 1rem;
--margin-site: 1rem;
}
@media (min-width: 768px) {
.wrapper {
padding: .5rem 2rem;
}
}
@media (min-width: 1024px) {
.wrapper {
padding: 0 3rem;
}
}
@media (min-width: 1440px) {
.wrapper {
padding: 0 80px;
}
}
@media (min-width: 768px) {
.wrapper {
--margin-site: 2rem;
}
}
@media (min-width: 1024px) {
.wrapper {
--margin-site: 3rem;
}
}
@media (min-width: 1440px) {
.wrapper {
--margin-site: 80px;
}
}
/* --- Header Navigation --- */
[data-header*="type-1"] .ct-header [data-id="menu"]>ul>li>a {
--theme-font-weight: 700;
--theme-text-transform: uppercase;
--theme-font-size: 1rem;
--theme-line-height: 1.3;
--theme-link-initial-color: var(--body-fcolor);
--theme-link-hover-color: var(--flex-snarkive);
--theme-link-active-color: var(--gc-snarkive-accent);
}
/* --- Cinesist Header Search Modal --- */
.cs-search-modal__form-inner {
border: 0 !important;
}
span.cs-search__modal-icon-svg {
font-size: 3rem;
}
.cs-search-modal-form input[type='text'] {
font-size: 4rem;
padding: 0 1rem 2rem 6rem;
border: 0;
border-bottom: 2px solid var(--flex-snarkive);
height: 100%;
}
/* --- Cinesist Mode Selector Switch --- */
.dark-mode-toggle-wrap:not(:first-child) .dark-mode-toggle {
margin: 0;
}
i.dark-mode-slide-btn {
background: var(--flex-snarkive-rev);
}
.dark-mode-slide-btn svg {
width: 1.25rem;
height: 1.25rem;
}
/* --- Remove Margin Spacing from Template Parts --- */
.wp-block-template-part {
margin-block-start: 0 !important;
margin-block-end: 0 !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}
/* --- Cinesist Bottom Header --- */
.cs-header-bottom {
background-color: var(--flex-bg-color-3);
border-bottom: 4px solid var(--flex-snarkive-50);
box-shadow: var(--wp--preset--shadow--natural);
grid-column: 1 / -1;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.cs-bottom-header {
display: flex;
max-width: 1300px;
justify-content: space-between;
align-items: center;
margin-top: 0 !important;
margin: 0 auto;
padding: 0 !important;
}
/* --- Cinesist Bottom Header End Row --- */
.cs-bottom-header-end {
display: flex;
align-items: center;
justify-content: flex-end;
}
.cs-intel-header {
margin: 0 !important;
padding: 0 !important;
}
/* --- Cinesist Intel Command Bar --- */
.cinesist-intel-command-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
background: var(--black-spy);
padding: 0;
margin-bottom: 0 !important;
min-height: 3.5rem;
gap: 2rem;
}
.cinesist-intel-command-bar-start {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
background: var(--black-spy);
padding: 0.5rem 0;
min-height: 3.5rem;
gap: 2rem;
}
.cinesist-intel-command-bar-end {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
width: 100%;
background: var(--black-spy);
padding: 0.5rem 0;
min-height: 3.5rem;
gap: 2rem;
}
/* Intel Stream Module */
.intel-stream-module {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
/* Occupy all available middle space */
overflow: hidden;
width: 100%;
}
.stream-icon,
.stream-text,
.hubs-nav__label-text {
margin-block-end: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
.stream-label {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: 0;
margin-block-end: 0 !important;
margin-bottom: 0 !important;
color: var(--flex-snarkive);
font-weight: 800;
text-transform: uppercase;
font-size: 0.75rem;
white-space: nowrap;
height: 1.5rem;
background: var(--flex-gray-2);
padding: 0 10px;
border-radius: 5px;
box-shadow: 0 2px 10px var(--shadow-7);
}
.stream-icon svg {
width: 14px;
height: 14px;
}
/* Ticker Inner Fix */
.cinesist-ticker-wrapper {
flex: 1;
position: relative;
height: 1.5rem;
/* Exactly one line high */
overflow: hidden;
width: 35rem;
}
/* Hubs Module */
.hubs-nav-module {
display: flex;
align-items: center;
gap: 1rem;
flex-shrink: 0;
/* Don't allow hubs to squish */
}
.hubs-nav__label {
display: flex;
align-items: center;
gap: 0.5rem;
margin-right: 0;
margin-block-end: 0 !important;
margin-bottom: 0 !important;
color: var(--flex-snarkive);
font-weight: 800;
text-transform: uppercase;
font-size: 0.75rem;
white-space: nowrap;
height: 1.5rem;
background: var(--flex-gray-2);
padding: 0 10px;
border-radius: 5px;
box-shadow: 0 2px 10px var(--shadow-7);
}
.hubs-nav__label-text {
color: var(--flex-snarkive);
font-weight: 800;
font-size: 0.75rem;
text-transform: uppercase;
white-space: nowrap;
}
.hubs-links {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
flex-shrink: 0;
gap: 0.5rem;
}
/* Hub Pill Styling */
.hub-pill {
padding: 0.4rem 0.8rem !important;
font-size: 0.7rem;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
border-radius: 3px;
color: #fff !important;
transition:
filter 0.2s ease,
transform 0.1s ease;
white-space: nowrap;
}
.hub-pill:hover {
filter: brightness(1.2);
transform: translateY(-1px);
}
.pill-red {
background-color: var(--cinesist-red) !important;
}
.pill-blue {
background-color: var(--cinesist-tv) !important;
}
.pill-green {
background-color: var(--cinesist-gaming) !important;
}
.pill-gray {
background-color: var(--cinesist-industry) !important;
}
/* Mobile Optimization */
@media (max-width: 1024px) {
/* .cs-bottom-header,
.cs-bottom-header-start,
.cs-bottom-header-end {
display: none !important;
} */
.cinesist-intel-command-bar {
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
}
.intel-stream-module,
.hubs-nav-module {
width: 100%;
justify-content: center;
}
.hubs-links {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 767px) {
.editor-styles-wrapper .cs-master-grid__header-bottom {
display: Flex;
}
}
/* --- Cinesist Intel Stream: Fix for One-Line Ticker --- */
.cs-sub-nav-row {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
min-height: 3.5rem;
/* Ensure a stable height */
}
.news-ticker-col {
flex: 1 1 auto !important;
/* Take up remaining space */
display: flex !important;
align-items: center !important;
overflow: hidden;
}
.cs-intel-stream-label {
flex-shrink: 0;
margin-right: 0;
white-space: nowrap;
}
.cinesist-ticker-container {
width: 100%;
height: 1.5rem;
/* Force a single line height */
position: relative;
overflow: hidden;
flex-grow: 1;
}
.ticker-list {
position: relative;
height: 100%;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.ticker-item {
position: absolute !important;
/* This is the key to one-line fades */
top: 0;
left: 0;
width: 100%;
white-space: nowrap;
/* Prevent text wrapping */
overflow: hidden;
text-overflow: ellipsis;
/* Add "..." if title is too long */
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease-in-out;
display: block !important;
/* Overwrite any block defaults */
}
.ticker-item.active {
opacity: 1;
visibility: visible;
}
/* --- Fix for Horizontal Hub Buttons --- */
.cs-hubs-nav-col {
flex: 0 0 auto !important;
/* Stay on the right */
display: flex !important;
justify-content: flex-end !important;
}
.cs-hubs-nav-col .wp-block-group {
display: flex !important;
flex-direction: row !important;
/* Force Horizontal */
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0.5rem !important;
}
.cs-hubs-nav-col .wp-block-buttons {
display: flex !important;
flex-direction: row !important;
/* Force buttons side-by-side */
flex-wrap: nowrap !important;
gap: 0.5rem !important;
}
/* Responsive: Stack only on mobile if necessary */
@media (max-width: 768px) {
.cs-sub-nav-row {
flex-direction: column !important;
height: auto;
}
.cs-hubs-nav-col .wp-block-buttons {
flex-wrap: wrap;
justify-content: center;
}
}
/* --- Cinesist Intel Stream Styling --- */
.cinesist-ticker-container {
display: flex;
align-items: center;
background: var(--black-spy);
width: 500px;
color: var(--flex-text-title);
height: 1.75rem;
overflow: hidden;
font-family: var(--cs-font-primary);
}
.ticker-label {
background: var(--cinesist-red);
padding: 0 1.5rem;
height: 100%;
display: flex;
align-items: center;
font-weight: 800;
font-size: 0.75rem;
letter-spacing: 1px;
white-space: nowrap;
}
.ticker-content {
position: relative;
flex-grow: 1;
height: 100%;
}
.ticker-list {
list-style: none;
margin: 0 !important;
padding: 0 !important;
height: 100%;
}
.ticker-item {
position: absolute;
top: 0;
left: 0.5rem;
height: 100%;
display: flex;
align-items: center;
opacity: 0;
transition: opacity 1s ease-in-out;
pointer-events: none;
}
.ticker-item.active {
opacity: 1;
pointer-events: auto;
}
.ticker-item a {
color: var(--body-fcolor);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
}
.ticker-item a:hover {
color: var(--body-fcolor);
font-weight: 600;
text-decoration: 2px underline;
text-decoration-color: var(--flex-snarkive-90);
}
/* Sticky Header */
.sticky-title {
line-height: var(--nav-height, inherit);
font-size: 1rem;
display: block;
overflow: hidden;
width: 100%;
max-width: 600px;
white-space: nowrap;
text-overflow: ellipsis;
}
/* --- Cinesist Responsive Stack --- */
@media (max-width: 1024px) {
/* 1. Force the main wrapper to stack and clear fixed heights */
.cinesist-intel-command-bar,
.cinesist-intel-command-bar-start,
.cinesist-intel-command-bar-end,
.cs-sub-nav-row {
flex-direction: column !important;
height: auto !important;
min-height: 0 !important;
gap: 1rem !important;
padding: 1rem 0 !important;
}
/* 2. Reset Widths so elements don't push past the screen edge */
.intel-stream-module,
.cinesist-ticker-wrapper,
.cinesist-ticker-container,
.hubs-nav-module {
width: 100% !important;
max-width: 100% !important;
flex-basis: auto !important;
}
/* 3. Center align labels and nav for a cleaner mobile look */
.stream-label,
.hubs-nav__label {
align-self: center;
margin-right: 0 !important;
}
/* 4. Allow the Hubs Nav to wrap so buttons don't fly off-screen */
.hubs-links,
.cs-hubs-nav-col .wp-block-buttons,
.wp-block-navigation__container {
flex-wrap: wrap !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
}
/* 5. Ticker Text Adjustment: Allow wrapping or ensure hidden overflow works */
.ticker-item {
width: 100% !important;
left: 0 !important;
text-align: center;
justify-content: center;
}
.ticker-item a {
font-size: 0.8rem !important; /* Slightly smaller for mobile */
white-space: normal !important; /* Optional: allow news titles to wrap to 2 lines on small phones */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 6. Fix for the "End" column alignment */
.cs-bottom-header-end,
.cs-hubs-nav-col {
justify-content: center !important;
width: 100% !important;
}
}
/* Extra small screens (Phones) */
@media (max-width: 480px) {
.hub-pill {
padding: 0.3rem 0.6rem !important;
font-size: 0.65rem !important;
}
.stream-text {
display: none; /* Hide "Intel Stream" text, keep icon to save space */
}
}
/*
-----------------
6 - Post Entry
-----------------
*/
/* --- Featured Image Container Style --- */
.s-feat-holder {
border-radius: var(--round-10);
/* More Rounded Corners */
box-shadow: var(--shadow-1);
/* Use Uniform Shadow Variable */
}
/* --- Featured Image Gradient Overlay --- */
.single-standard-3 .single-header-inner:before {
height: 628px;
/* Made the Featured Image look complete */
background: linear-gradient(to top, var(--dark-accent) 30%, transparent 100%);
}
/* --- Post Title Style --- */
.s-title {
margin-bottom: 5px;
}
/* --- Captions Decoration Style --- */
figcaption:not(:empty):before,
.wp-caption-text:before {
color: var(--g-color);
}
/* --- Cinesist Category Button Style --- */
.s-cats {
margin: 0;
}
/*
-----------------
7 - Post Modules
-----------------
*/
/* --- Highlight Post Module Wrapper Style --- */
.s-hl.s-hl-1 {
background-color: var(--news-letter-bg);
border-radius: var(--round-10);
/* More Rounded Corners */
box-shadow: 5px 10px 20px 0px var(--shadow-7);
}
/* --- Highlight Post Module Style --- */
.s-hl-1 .s-hl-heading {
opacity: 0.55;
z-index: 1;
}
.s-hl-1 .hl-point:not(:last-child) {
padding-bottom: var(--s-hl-gap);
border-bottom: none;
}
/* --- Cinescore Quick Section Styles --- */
.sqview {
border-top: 2px solid var(--g-color);
border-radius: var(--round-10);
/* More Rounded Corners */
box-shadow: 5px 10px 20px 0px var(--shadow-7);
}
/* --- Cinescore Section Styles --- */
.review-section {
background-color: var(--news-letter-bg);
border-top: 2px solid var(--g-color);
border-radius: var(--round-10);
/* More Rounded Corners */
box-shadow: 5px 10px 20px 0px var(--shadow-7);
}
/* --- Cinescore Meta Bar Style --- */
.rline-wrap {
border: solid 1px #888888ab;
/* A Nice little border to give 3d effect */
}
/* --- Cinescore Meta Score Style --- */
.review-quickview-meta .meta-score {
font-size: max(28px, 2rem) !important;
line-height: 1;
}
/* --- Cinescore Meta Rating Word Style --- */
.meta-text {
font-size: 16px !important;
/* font-weight: 700; Bold for Emphasis */
}
/* --- Remove Foxiz Text Related Post Links from Posts --- */
.widget.entry-widget .related-sec {
width: 100%;
max-width: 100%;
padding: 0;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
display: none;
}
/**
* Cinescore Content Section
**/
/* --- Cinescore Breakdown Label Info Line Style --- */
.review-label-info {
border-left: 3px solid var(--review-accent, var(--flex-snarkive));
}
/*
-----------------
8 - Blocks
-----------------
*/
/* --- Layout Headings --- */
/* Layout 3 Title */
.heading-layout-3 .heading-inner,
.heading-layout-c3 .heading-inner {
border-bottom: 2px solid var(--body-fcolor);
}
.heading-layout-3 .heading-title>* {
display: inline-flex;
padding-bottom: var(--heading-spacing, 10px);
border-bottom: 5px solid var(--heading-sub-color);
/* position: absolute; */
bottom: -3px;
}
/* Layout 12 Title */
.heading-layout-12 .heading-inner {
width: 100%;
padding-bottom: var(--heading-spacing, 7px);
border-bottom: 2px solid var(--heading-color);
}
.heading-layout-12 .heading-title>*:before {
display: none;
}
/* --- Cinepress 3.0: Popular Intel Terminal --- */
.ct-trending-block {
padding: 2.5rem 0;
margin: 2rem 0;
border-top: 1px solid var(--flex-decor-border);
border-bottom: 1px solid var(--flex-decor-border);
background: var(--flex-gray-7);
/* Using your flexible gray opacity */
}
/* Module Title Styling */
.ct-module-title {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--cs-font-primary);
font-weight: 900;
text-transform: uppercase;
font-size: 1.25rem;
color: var(--flex-text-title);
margin-bottom: 1.875rem;
letter-spacing: 1px;
}
/* --- Cinepress 3.0: Custom Bolt Icon Injection --- */
/* 1. Hide the original Fire SVG */
.ct-module-title svg {
display: none !important;
}
/* 2. Remove the previous ::after that floated to the right */
/* 3. Target the text directly (Blocksy usually wraps this in a span or just text) */
/* We will use the 'Popular Intel' text as the anchor */
.ct-module-title {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
position: relative;
gap: 0.5rem;
}
/* 4. Inject the Bolt specifically after the text content */
/* We target the specific text node if possible, or just the main title */
.ct-module-title {
position: relative;
}
.ct-module-title::before {
content: '';
display: inline-block;
width: 1.25rem;
height: 1.25rem;
background-color: var(--cinesist-gold);
/* Clean URL-Encoded SVG Bolt with overflow handling */
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M296 160H180.6l42.6-129.8C227.2 15 215.7 0 200 0H56C44 0 33.8 8.9 32.2 20.8l-32 240C-1.7 275.2 9.5 288 24 288h118.7L96.6 482.5c-3.6 15.2 8 29.5 23.3 29.5 8.4 0 16.4-4.4 20.8-12l176-304c9.3-15.9-2.2-36-20.7-36z'/%3E%3C/svg%3E") no-repeat center;
/* Ensure it fits exactly in your 1.25rem box */
mask-size: contain;
-webkit-mask-size: contain;
filter: drop-shadow(0 0 5px var(--cinesist-gold));
animation: bolt-arc-flicker 4s infinite;
}
/* Ensure the navigation arrows stay on the far right */
.ct-slider-arrows {
margin-left: auto !important;
/* Pushes only the arrows to the right */
}
/* 5. The Arc Flicker Animation */
@keyframes bolt-arc-flicker {
0%,
19%,
21%,
23%,
25%,
54%,
56%,
100% {
opacity: 1;
transform: scale(1);
}
20%,
24%,
55% {
opacity: 0.4;
transform: scale(0.9);
}
}
/* The Cards (Items) */
.ct-trending-block .ct-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.ct-trending-block-item {
display: flex;
flex-direction: column;
gap: 0.75rem;
transition: transform 0.3s ease;
}
.ct-trending-block-item:hover {
transform: translateY(-5px);
}
/* Media (Images) */
.ct-media-container img {
border-radius: 0.25rem;
border: 1px solid var(--flex-decor-border);
transition: border-color 0.3s ease;
}
.ct-trending-block-item:hover img {
border-color: var(--flex-snarkive);
}
/* Post Titles */
.ct-post-title {
font-size: 0.9rem;
font-weight: 700;
line-height: 1.4;
color: var(--flex-text-title);
text-decoration: none;
transition: color 0.2s ease;
}
.ct-post-title:hover {
color: var(--flex-snarkive);
}
/* Arrows (Slider Navigation) */
.ct-slider-arrows {
display: flex;
gap: 0.5rem;
margin-left: auto !important;
/* Pushes only the arrows to the right */
}
.ct-arrow-prev,
.ct-arrow-next {
cursor: pointer;
background: var(--flex-gray-2);
padding: 0.5rem;
border-radius: 0.25rem;
color: var(--flex-text-title);
transition: all 0.2s ease;
}
.ct-arrow-prev:hover,
.ct-arrow-next:hover {
background: var(--flex-snarkive);
color: #fff;
}
@keyframes flicker-red {
0% {
opacity: 0.8;
filter: drop-shadow(0 0 2px var(--cinesist-red));
}
100% {
opacity: 1;
filter: drop-shadow(0 0 8px var(--cinesist-red));
}
}
/* Mobile: 2 Columns for Small Screens */
@media (max-width: 768px) {
.ct-trending-block .ct-container {
grid-template-columns: repeat(2, 1fr);
}
}
/* --- Cinepress 3.0: Global Smart Adaptive Section Header --- */
.cs-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
width: 100%;
border-bottom: 3px solid var(--flex-decor-border);
position: relative;
/* DEFAULT FALLBACK (Red) */
--accent: var(--cinesist-red);
}
.cs-section-heading {
position: relative;
display: inline-flex !important;
margin: 0 !important;
padding-bottom: 7px;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--flex-text-title) !important;
}
/* The Solid Bar */
.cs-section-heading::before {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100%;
height: 3px;
background-color: var(--accent);
/* Uses our variable */
z-index: 5;
}
/* The Gradient Tail */
.cs-section-heading::after {
content: '';
position: absolute;
bottom: -3px;
right: -100px;
width: 100px;
height: 3px;
/* NOW it works because it has a real color variable to pull from */
background: linear-gradient(to right, var(--accent), transparent) !important;
z-index: 4;
}
/* --- THE PRESETS --- */
/* You just add these classes to the outer Header Group in the editor */
.is-news {
--accent: var(--cinesist-info);
}
.is-rants {
--accent: var(--cinesist-red);
}
.is-movies {
--accent: var(--cinesist-gold);
}
.is-gaming {
--accent: var(--cinesist-gaming);
}
.is-tv {
--accent: var(--cinesist-tv);
}
.is-industry {
--accent: var(--cinesist-industry);
}
.is-reviews {
/* --accent: var(--review-accent); */
}
.is-topic {
--accent: var(--flex-snarkive);
}
/* --- Cinesist Spoiler Warning Block Styling --- */
.cinesist-spoiler-warning-block {
clear: both;
/* Ensures it breaks out of any floats */
margin: 50px auto;
/* Centered with vertical spacing */
padding: 2rem;
max-width: 900px;
/* Consistent with CTA block */
background: linear-gradient(145deg, var(--gc-spy), var(--flex-gray-1));
/* Subtle Color Changing Gradient */
border-radius: 15px;
border: 2px dashed #ff0d0d;
border-left: 5px outset var(--gc-color) !important;
/* Cinefox Orange outset border on the left */
box-shadow:
10px 10px 30px rgba(0, 0, 0, 0.7),
/* Stronger shadow for depth */
-5px -5px 15px rgba(50, 50, 50, 0.2);
/* Subtle light source shadow */
text-align: center;
box-sizing: border-box;
animation: pulse-border 2s infinite;
}
@keyframes pulse-border {
0% {
border-color: #ff0d0d;
}
50% {
border-color: transparent;
}
100% {
border-color: #ff0d0d;
}
}
.cinesist-spoiler-inner {
display: flex;
align-items: center;
/* Vertically align icon and text */
justify-content: center;
/* Center content horizontally */
gap: 20px;
/* Space between icon and text */
flex-wrap: wrap;
/* Allow wrapping on smaller screens */
}
.cinesist-spoiler-icon {
font-size: 2em;
/* Large siren emoji */
line-height: 1;
display: block;
/* Ensure it behaves as a block for sizing */
color: var(--cinesist-red);
/* Make the siren red (or keep default emoji color) */
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
/* Subtle 3D effect */
flex-shrink: 0;
/* Prevent it from shrinking */
/* Add a subtle animation to make it "flash" or pulse a bit */
animation: cinesist-siren-pulse 1.5s infinite alternate;
}
@keyframes cinesist-siren-pulse {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(1.05);
opacity: 0.9;
}
}
.cinesist-spoiler-text {
font-family: var(--cinesist-body-font);
/* Set Font */
font-size: 1.4em;
color: var(--body-fcolor);
/* Color Changing text */
font-weight: 600;
line-height: 1.5;
margin: 0;
/* Remove default paragraph margin */
max-width: 700px;
/* Constrain text width */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
/* Subtle text shadow */
}
.cinesist-spoiler-text strong {
color: var(--cinesist-red);
/* Make "SPOILER ALERT!" bold and red */
}
.cinesist-content-breakdown::before {
content: var(--cinesist-card-logo);
}
/* --- Cinesist Movie Review Pattern Style --- */
/* Cinesist Review 2.0 Base Styles */
.cinesist-review-container {
--cs-primary: #f39c12;
/* Default Gold */
--cs-accent: #e74c3c;
border: 3px solid var(--cs-primary);
padding: 2rem;
background: var(--cs-bg);
color: var(--cs-text);
border-radius: 5px;
}
/* MASTERPIECE VARIANT (Good Review) */
.cinesist-review-container.is-legendary {
--cs-primary: #50a735;
/* Cinescore Legendary🏆 Green */
--cs-accent: #00d4ff;
box-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
}
/* DISASTER VARIANT (Bad Review) */
.cinesist-review-container.is-burn {
--cs-primary: #ff0d0d;
/* Cinescore Burn Notice🔥 Red Red */
--cs-accent: #ffa502;
box-shadow: 0 0 20px rgba(255, 71, 87, 0.2);
}
/* Header & Subtitle */
.cinesist-title {
font-size: 2.5rem;
margin-bottom: 10px;
text-transform: capitalize;
font-weight: 700;
}
/* Subtitle Styling */
.cinesist-subtitle {
font-style: italic;
font-weight: 500;
color: var(--cs-primary);
border-left: 4px solid var(--cs-accent);
padding-left: 1rem;
margin: 1.5rem 0;
}
/* Fourth Wall Styling */
/* Fourth Wall Break */
.cinesist-fourth-wall {
background: rgba(255, 255, 255, 0.05);
border: 1px dashed var(--cs-primary);
padding: 1.5rem;
position: relative;
font-size: 1.1rem;
margin: 2rem 0;
}
.cinesist-fourth-wall::before {
content: "👀 INTERNAL MONOLOGUE";
position: absolute;
top: -12px;
left: 10px;
background: var(--cs-primary);
color: #000;
font-size: 0.7rem;
font-weight: 900;
padding: 2px 8px;
}
.wall-label {
position: absolute;
top: -12px;
left: 20px;
background: var(--cs-primary);
color: #000;
font-weight: 900;
font-size: 0.7rem;
padding: 2px 10px;
}
/* Verdict Box */
.cinesist-verdict-box {
background: #1a1a1a;
border-radius: 15px;
padding: 20px;
margin-top: 40px;
}
.verdict-title {
padding: 0;
}
.cinescore-circle {
width: 60px;
height: 60px;
border-radius: 50%;
border: 4px solid var(--cs-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
}
/* Cinesist Character Bio Post Insert Style */
/* Bio Wrapper Grid */
.cinesist-bio-wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 40px 0;
}
/* Individual Bio Card */
.character-bio-card {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 15px;
border-radius: 10px;
transition: transform 0.3s ease;
}
.character-bio-card:hover {
transform: translateY(-5px);
border-color: var(--cs-primary);
}
/* Bio Image Circle */
.bio-image img {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--cs-primary);
margin-right: 15px;
}
/* Text Elements */
.actor-name {
font-size: 1.1rem;
margin: 0;
color: var(--cs-primary);
text-transform: uppercase;
letter-spacing: 1px;
}
.character-name {
display: block;
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 8px;
opacity: 0.8;
}
.bio-snark {
font-size: 0.9rem;
line-height: 1.4;
margin: 0;
}
/* Visual Masonry Grid for Review Posts */
/* Gallery Container */
.cinesist-visual-gallery {
margin: 50px 0;
padding: 20px;
background: rgba(255, 255, 255, 0.02);
border-radius: 15px;
}
.gallery-title {
text-align: center;
color: var(--cs-primary);
margin-bottom: 30px;
font-family: "Inter", sans-serif;
text-transform: uppercase;
}
/* Masonry Layout */
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-auto-rows: 200px;
gap: 15px;
}
.masonry-item {
position: relative;
margin: 0;
overflow: hidden;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.masonry-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.masonry-item:hover img {
transform: scale(1.1);
}
/* Large image spanning two rows */
.masonry-item.is-large {
grid-row: span 2;
}
/* Snarky Caption Overlay */
.masonry-item figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 0.75rem;
padding: 8px;
transform: translateY(100%);
transition: transform 0.3s ease;
font-style: italic;
}
.masonry-item:hover figcaption {
transform: translateY(0);
}
/* Deep Thoughts Container */
.cinesist-deep-thoughts {
display: flex;
align-items: center;
gap: 30px;
margin: 60px 0;
padding: 30px;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.05) 0%,
transparent 100%);
border-radius: 15px;
position: relative;
overflow: hidden;
}
/* The Character Graphic */
.thoughts-character-art {
width: 200px;
height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
flex-shrink: 0;
filter: drop-shadow(0 0 10px var(--cs-primary));
}
/* LEGENDARY Logic: Cinefox */
.is-legendary .thoughts-character-art {
background-image: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinefox-The-Inquisitor-Legendary-Movie-Review-Graphic.png");
}
/* BURN Logic: Hacker Cipher */
.is-burn .thoughts-character-art {
background-image: url("https://www.cinesist.com/wp-content/uploads/2025/10/Hacker-Cipher-Burn-Notice-Movie-Graphic.png");
}
/* Text Content Styling */
.thoughts-content {
flex-grow: 1;
}
.thoughts-heading {
color: var(--cs-primary);
font-size: 1.8rem;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
.thoughts-signature {
display: block;
margin-top: 20px;
font-size: 0.8rem;
color: var(--cs-primary);
text-transform: uppercase;
opacity: 0.7;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.cinesist-deep-thoughts {
flex-direction: column;
text-align: center;
}
.thoughts-character-art {
width: 150px;
height: 150px;
}
}
/* Badge Container Logic */
.cinesist-badge-wrapper {
display: none;
/* Hidden by default */
justify-content: center;
margin-bottom: 20px;
}
/* Only show badge if the review is a Masterpiece */
.is-legendary .cinesist-badge-wrapper {
display: flex;
}
/* The Badge Design */
.cinesist-must-watch-badge {
position: relative;
background: linear-gradient(135deg, #ffd700 0%, #ffac00 100%);
color: #000;
padding: 8px 20px;
border-radius: 50px;
font-weight: 900;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 0 4px 15px rgba(255, 172, 0, 0.4);
overflow: hidden;
/* For the shimmer effect */
}
.badge-icon {
font-size: 1.2rem;
}
/* The Shimmer Effect */
.cinesist-must-watch-badge::after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to bottom right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0) 40%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0) 60%,
rgba(255, 255, 255, 0) 100%);
transform: rotate(45deg);
animation: cinesist-shimmer 3s infinite;
}
@keyframes cinesist-shimmer {
0% {
transform: translateX(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) rotate(45deg);
}
}
/* --- Cinesist Heading Tagline Style - Makes the Heading Transparent and Large --- */
/* --- Applies to Heading Layout 11 Large Faded Headings --- */
.heading-layout-11 .heading-tagline,
.heading-layout-c11 .heading-tagline {
font-size: 3rem;
line-height: 1;
position: absolute;
top: auto;
bottom: -20px;
/* Adjust position as needed */
left: 0;
margin: 0;
pointer-events: none;
opacity: 30%;
}
/* --- Cinesist Ultimate Review Box Style --- */
.ultimate-review-wrapper {
margin-block-start: 2rem !important;
background: var(--flex-bg-color-2);
/* white Spy background */
color: var(--body-fcolor);
/* White Spy */
border-top: 5px solid var(--flex-snarkive) !important;
border: 1px solid var(--flex-snarkive);
border-radius: 8px;
box-shadow: 5px 10px 20px 0px var(--shadow-7);
overflow: hidden;
font-family: 'Work Sans', sans-serif;
}
.top-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
/* Ensure the Hexagon Score stays on top of poster */
.col-poster {
position: relative;
overflow: hidden;
flex: 0 0 220px;
/* Fixed poster width */
}
.col-poster img {
border-radius: 4px;
width: 100%;
height: auto;
display: block;
}
.col-details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.snarkive-btn {
display: inline-block;
margin-top: 15px;
padding: 8px 15px;
background: #111;
border: 1px solid #d102d1;
/* Snarkive Purple [cite: 16] */
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
transition: background 0.2s;
}
.snarkive-btn:hover {
background: #d102d1;
}
/* D20 Score Overlay */
.d20-score-overlay {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 60px;
background: var(--flex-snarkive);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 24px;
color: #fff;
}
/* 5-Bar Score Visualizer */
.bar-container {
display: flex;
gap: 4px;
height: 10px;
width: 100px;
}
.bar {
flex: 1;
background: #333;
border-radius: 2px;
}
.bar.filled {
background: #d102d1;
}
/* Snarkive Purple fills */
/* The Orange-to-Purple CTA */
.cta-gradient-btn {
display: block;
padding: 15px;
text-align: center;
background: linear-gradient(90deg, #dd7b45 0%, #d102d1 100%);
color: #fff;
font-weight: 700;
text-transform: uppercase;
border-radius: 5px;
text-decoration: none;
margin-top: 20px;
}
/* Economic Warfare Bar Styling [cite: 157] */
.economic-warfare-bar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--flex-gray-40);
border: 1px solid #333;
border-radius: 4px;
padding: 10px 15px;
margin: 10px 0;
}
.metric-item {
display: flex;
flex-direction: column;
text-align: center;
}
.metric-label {
font-size: 12px;
text-transform: uppercase;
color: var(--flex-snarkive);
margin-bottom: 2px;
}
.metric-value {
font-weight: 700;
color: var(--body-fcolor);
/* Body text color to Change on Modes */
}
.metric-divider {
font-weight: 900;
color: var(--flex-snarkive-rev);
/* Cinefox Orange to Snarkive Purple */
font-style: italic;
}
/* Success/Fail Field Styling [cite: 158] */
.verdict-status-field {
text-align: center;
margin-top: 5px;
}
.status-indicator {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}
.status-indicator.cash-cow {
background: #27ae60;
color: #fff;
}
/* Win [cite: 159] */
.status-indicator.flop {
background: #c0392b;
color: #fff;
}
/* Burn Notice [cite: 166] */
/* Snarkive CTA Get Intel Section */
.snarkive-action {
display: flex;
padding-bottom: 25px;
}
.snarkive-intel-btn {
font-size: var(--btn-fsize);
display: inline-flex;
align-items: center;
}
/* Middle Section: Breakdown Styles */
.middle-row {
padding: 20px;
background: var(--flex-bg-color-2);
/* Cinefox White Spy to Black Spy */
border-top: 1px solid #333;
border-bottom: 1px solid #333;
}
.breakdown-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
}
.breakdown-header h3 {
margin: 0;
font-size: 20px;
color: #e5e5e5;
/* Cinefox White Spy */
}
.meta-word {
padding: 4px 12px;
border-radius: 4px;
color: var(--awhite);
font-weight: 800;
text-transform: uppercase;
font-size: 16px;
background: var(--review-accent, var(--cinesist-red));
}
.age-rating {
border: 2px solid var(--flex-snarkive);
padding: 2px 5px 2px 5px;
}
.age-rating a {
text-decoration: none;
}
.age-rating a:hover {
color: var(--flex-snarkive-rev);
}
/* Score-based Color Logic [cite: 168] */
.meta-word.legendary {
background: #d102d1;
color: #fff;
}
/* Purple */
.meta-word.solid {
background: #27ae60;
color: #fff;
}
.meta-word.burn-it {
background: #c0392b;
color: #fff;
}
.breakdown-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.metric-line {
margin-bottom: 15px;
}
.metric-info {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
font-size: 16px;
font-weight: 600;
align-items: center;
}
.metric-title {
color: var(--body-fcolor);
border-radius: 6px;
border-left: 3px solid var(--review-color);
padding: 10px;
}
.metric-number {
color: #dd7b45;
}
/* Cinefox Orange [cite: 12] */
/* The 5-Bar System */
.bar-visualizer {
display: flex;
gap: 5px;
height: 8px;
}
.score-bar {
flex: 1;
background: #333;
border-radius: 2px;
transition: background 0.3s ease;
}
.score-bar.filled {
background: var(--cinebar-green);
/* Legendary Green */
box-shadow: 0 0 8px rgb(80 167 53 / 50%);
}
/* --- Cinescore Dynamic Bar Colors --- */
.score-bar {
flex: 1;
height: 10px;
border-radius: 2px;
background-color: #333;
/* Default Empty Bar */
transition: all 0.3s ease;
}
/* Logic: Classes applied based on the bar index and total score */
.score-bar.fill-red {
background-color: #ff0d0d;
box-shadow: 0 0 5px rgba(255, 13, 13, 0.3);
}
.score-bar.fill-orange {
background-color: #ff5612;
}
.score-bar.fill-yellow {
background-color: #f1ca2b;
}
.score-bar.fill-light-green {
background-color: #b2cc21;
}
.score-bar.fill-legendary {
background-color: var(--cinebar-green);
box-shadow: 0 0 8px rgb(80 167 53 / 50%);
}
/* Container spacing */
.bar-visualizer {
display: flex;
gap: 4px;
width: 100%;
max-width: 150px;
margin-top: 5px;
}
/* --- Middle Row: Intel & Bullets --- */
.col-intel {
display: flex;
flex-direction: column;
gap: 20px;
}
.intel-block h4 {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 8px;
}
.intel-block.gold h4 {
color: #27ae60;
}
.intel-block.bad h4 {
color: #c0392b;
}
.hex-bullet {
width: 12px;
height: 12px;
background: currentColor;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.intel-block ul {
list-style: none;
padding: 0;
margin: 0;
}
.intel-block li {
font-size: 13px;
margin-bottom: 8px;
padding-left: 15px;
position: relative;
color: var(--body-fcolor);
line-height: 1.4;
}
.intel-block li::before {
content: '>';
position: absolute;
left: 0;
color: #dd7b45;
font-weight: 900;
}
.intel-block.gold li {
font-size: 13px;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
color: var(--body-fcolor);
line-height: 1.4;
}
.intel-block.gold li::before {
content: '🪙';
position: absolute;
left: 0;
color: #dd7b45;
font-weight: 900;
font-size: 15px;
}
.intel-block.bad li {
font-size: 13px;
margin-bottom: 8px;
padding-left: 20px;
position: relative;
color: var(--body-fcolor);
line-height: 1.4;
}
.intel-block.bad li::before {
content: '🗡️';
position: absolute;
left: 0;
color: #dd7b45;
font-weight: 900;
font-size: 15px;
}
/* --- Cinescore Dynamic Bar Colors --- */
/* --- Cinebar Color Progression --- */
.score-bar.filled.fill-red {
background: #ff0d0d;
}
.score-bar.filled.fill-orange {
background: #ff5612;
}
.score-bar.filled.fill-yellow {
background: #f1ca2b;
}
.score-bar.filled.fill-light-green {
background: #b2cc21;
}
.score-bar.filled.fill-legendary {
background: var(--cinebar-green);
}
/* The "Glow" logic: only the highest filled bar glows */
.score-bar.filled.glowing.fill-red {
box-shadow: 0 0 10px 1px #ff0d0d;
}
.score-bar.filled.glowing.fill-orange {
box-shadow: 0 0 10px 1px #ff5612;
}
.score-bar.filled.glowing.fill-yellow {
box-shadow: 0 0 10px 1px #f1ca2b;
}
.score-bar.filled.glowing.fill-light-green {
box-shadow: 0 0 10px 1px #b2cc21;
}
.score-bar.filled.glowing.fill-legendary {
box-shadow: 0 0 10px 1px var(--cinebar-green);
}
/* Intel Bullet Styling */
.hex-bullet {
width: 12px;
height: 12px;
background: currentColor;
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.intel-block.gold h4 {
color: #27ae60;
}
/* Green Spy */
.intel-block.bad h4 {
color: #c0392b;
}
/* Burn Notice */
/* --- Featured Crew Style --- */
.featured-crew-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}
.crew-card {
display: flex;
align-items: center;
gap: 10px;
border-radius: 6px;
border-left: 3px solid #dd7b45;
padding: 10px;
background: var(--flex-gray-15);
}
.crew-card img {
border-radius: 4px;
width: 40px;
height: 40px;
object-fit: cover;
border: 1px solid #333;
}
.crew-info {
display: flex;
flex-direction: column;
}
.crew-label {
font-size: 9px;
color: #dd7b45;
text-transform: uppercase;
font-weight: 800;
text-decoration: none;
}
.crew-name {
font-size: 13px;
color: var(--body-fcolor) !important;
font-weight: 700;
text-decoration: none !important;
}
.crew-name a {
color: var(--body-fcolor) !important;
text-decoration: none !important;
}
.crew-name a:hover {
color: #dd7b45 !important;
}
/* --- Badge & Genre Polish --- */
.badge-row {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.cinesist-links a {
color: #dd7b45;
text-decoration: none;
font-weight: 700;
}
.cinesist-links a:hover {
text-decoration: underline;
}
.item-title {
margin: 0 0 15px 0;
font-size: 2rem;
letter-spacing: -1.5px;
line-height: 1;
text-transform: uppercase;
font-weight: 900;
}
/* --- Interactive Toggle Logic --- */
.breakdown-state-check {
display: none;
/* Hide the actual checkbox */
}
.breakdown-content {
max-height: 2000px;
/* Large enough for content */
overflow: hidden;
transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
border-top: 1px solid #333;
}
/* Logic: When checkbox is NOT checked, collapse the content */
.breakdown-state-check:not(:checked)~.breakdown-content {
max-height: 0;
}
.cinesist-review-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
background: var(--flex-gray-15);
border-top: 1px solid #333;
}
.cinesist-review-footer .cta-wrapper {
display: flex;
align-items: center;
gap: 15px;
}
.cta-price {
font-family: monospace;
font-weight: 800;
color: #27ae60;
font-size: 14px;
}
.toggle-btn-label {
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
color: var(--flex-snarkive);
cursor: pointer;
user-select: none;
}
/* Toggle Text Logic */
.breakdown-state-check:checked~.cinesist-review-footer .text-closed {
display: none;
}
.breakdown-state-check:not(:checked)~.cinesist-review-footer .text-open {
display: none;
}
.snarkive-intel-btn {
font-weight: 900;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}
.snarkive-intel-btn:hover {
text-decoration: underline;
}
/* --- Footer Truth Row --- */
.footer-left {
display: flex;
flex-direction: column;
gap: 5px;
}
.math-declassified {
font-family: monospace;
font-size: 11px;
color: #888;
text-transform: uppercase;
}
.final-calc {
color: var(--flex-snarkive-rev);
font-weight: 900;
}
/* --- Layout Refinements --- */
.metrics-grid {
display: grid;
grid-template-columns: 1fr 1fr;
/* Two columns of metrics */
gap: 20px 40px;
padding: 30px;
}
.intel-row {
background: var(--flex-gray-1);
border-top: 1px dashed #333;
}
/* --- Verdict Section Polish --- */
.verdict-row {
padding: 25px 30px;
background: rgba(255, 255, 255, 0.02);
border-top: 1px solid #333;
}
.verdict-row h3 {
margin: 0 0 10px 0;
font-size: 22px;
color: var(--body-fcolor);
text-transform: uppercase;
letter-spacing: -0.5px;
}
.verdict-row p {
font-size: 14px;
line-height: 1.6;
color: var(--body-fcolor);
margin: 0;
}
/* --- Footer Score Polish --- */
.footer-score-wrap {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 10px;
}
.total-visualizer {
max-width: 165px !important;
height: 10px !important;
}
.footer-meta-label {
display: flex;
align-items: center;
gap: 10px;
}
.final-score-val {
font-size: 32px;
font-weight: 900;
color: var(--body-fcolor);
}
/* --- Transformed CTA Button --- */
.cta-wrapper .cta-gradient-btn {
position: relative;
padding: 12px 30px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.2;
}
.cta-price-tag {
display: block;
font-size: 11px;
font-family: monospace;
color: #00ff00;
/* Arcade Green Price */
margin-top: 4px;
opacity: 0.9;
}
/* --- Cinepress 3.0: Snarkive Tag Box --- */
.snarkive-links-box {
background-color: var(--gc-spy);
border-radius: 12px;
padding: 20px 25px;
margin-top: 30px;
border-top: 3px solid var(--flex-snarkive);
box-shadow: var(--shadow-1);
}
.snarkive-links-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.snarkive-tag-link {
display: flex;
align-items: center;
background: var(--flex-header-bg);
border: 1px solid var(--flex-decor-border);
padding: 5px 12px 5px 5px;
border-radius: 4px;
text-decoration: none !important;
transition: all 0.3s ease;
}
.snarkive-tag-link img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 2px;
margin-right: 10px;
}
.snarkive-tag-link:hover {
border-color: var(--cinesist-gold);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
/* --- Cinepress 3.0: Cinesist Review Box Admin Skin --- */
/* 1. The Postbox Wrapper */
#acf-group_cinesist_review_box_fields {
background: #1a1a1a !important;
border: 2px solid #333 !important;
color: #e5e5e5 !important;
}
#acf-group_cinesist_review_box_fields .postbox-header {
background: #222 !important;
border-bottom: 2px solid var(--flex-snarkive, #f0217d) !important;
}
#acf-group_cinesist_review_box_fields .hndle {
color: var(--flex-snarkive, #f0217d) !important;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 900;
}
/* 2. Sidebar Tabs (The Data Streams) */
#acf-group_cinesist_review_box_fields .acf-tab-wrap {
background: #111 !important;
border-right: 1px solid #333 !important;
}
#acf-group_cinesist_review_box_fields .acf-tab-group li a {
background: transparent !important;
color: #888 !important;
border: none !important;
transition: all 0.3s ease;
}
#acf-group_cinesist_review_box_fields .acf-tab-group li.active a {
color: var(--cinesist-gold, #ffde21) !important;
font-weight: 900;
text-shadow: 0 0 10px rgba(255, 222, 33, 0.4);
background: rgba(255, 222, 33, 0.05) !important;
}
/* 3. The Fields (Diagnostic Modules) */
.acf-field {
border-color: #333 !important;
}
.acf-label label {
color: #aaa !important;
text-transform: uppercase;
font-size: 11px !important;
letter-spacing: 1px;
}
/* 4. Score Breakdown Coloring (Dynamic DNA) */
/* We target the specific fields for Plot, Performance, etc. */
.acf-field-plot-score,
.acf-field-performance-score,
.acf-field-execution-score,
.acf-field-visuals-vibes-score,
.acf-field-pacing-score,
.acf-field-rewatch-factor-score {
background: rgba(255, 255, 255, 0.02) !important;
}
.acf-field input[type="number"],
.acf-field input[type="text"],
.acf-field textarea {
background: #000 !important;
border: 1px solid #444 !important;
color: #00ff41 !important;
/* Matrix/Hacker Green text */
font-family: 'Courier New', Courier, monospace !important;
}
/* 5. The "Master Score" Module */
.admin-cinescore {
background: rgba(240, 33, 125, 0.05) !important;
border-top: 2px solid var(--flex-snarkive) !important;
}
.admin-cinescore input {
font-size: 24px !important;
text-align: center;
color: var(--cinesist-gold, #ffde21) !important;
}
/* 6. The Switch (The Disruptor Toggle) */
.acf-switch {
background: #333 !important;
}
.acf-switch .acf-switch-on {
background: var(--flex-snarkive) !important;
}
/* 7. Radio Buttons (Horizontal) */
.acf-radio-list li label {
background: #222 !important;
border: 1px solid #444 !important;
color: #eee !important;
padding: 5px 15px !important;
}
.acf-radio-list li label.selected {
background: var(--flex-snarkive) !important;
border-color: var(--flex-snarkive) !important;
}
/*
-----------------
9 - Single
-----------------
*/
/* --- Blog Pages Body Styles --- */
/* --- Adjust Blog Font Size --- */
.eplus-wrapper {
font-size: 18px;
}
/* --- Cinepress 3.0: Post Dossier DNA Skin --- */
/* 1. Automated Image Borders (Featured and In-Post) */
img.is-review-image {
border: 4px solid var(--review-accent, var(--flex-snarkive));
border-radius: 5px;
}
/* 3. The Snarky Highlights Sync */
.s-hl {
border: 2px solid var(--review-accent) !important;
background: rgba(0, 0, 0, 0.4) !important;
}
.s-hl-heading {
background: var(--review-accent) !important;
color: #000 !important;
}
/* 4. Pullquote "Glow" */
figure.wp-block-pullquote blockquote:before {
color: var(--review-accent, var(--flex-snarkive)) !important;
opacity: .7 !important;
}
/* --- Cinepress 3.0: Post Dossier DNA Skin --- */
/* 3. Subtitle Sync */
.cs-dossier-subtitle {
color: var(--review-accent, var(--flex-snarkive)) !important;
}
/* --- Cinepress 3.0: Review Dossier Skin --- */
/* 1. THE SPOTLIGHT HUD */
.cs-review-spotlight {
min-height: 500px !important;
border-bottom: 4px solid var(--flex-snarkive);
margin: auto 5% auto 5%;
/* Review Wrapper Simulator */
}
.cs-review-spotlight img {
width: 100%;
height: 100%;
object-fit: cover;
}
.cs-spotlight-inner {
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.cs-spotlight-meta {
font-weight: 900;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--review-accent, var(--cinesist-gold)) !important;
background: rgba(0, 0, 0, 0.5);
display: inline-block;
padding: 5px 20px;
border-radius: 2px;
margin-bottom: 1rem !important;
}
.cs-spotlight-title {
font-size: clamp(2rem, 5vw, 4rem) !important;
font-weight: 900 !important;
text-transform: uppercase;
line-height: 1;
margin-bottom: 1.5rem !important;
}
.cs-spotlight-verdict {
font-family: var(--cs-font-mono, monospace);
font-size: 1.1rem;
color: var(--flex-text-secondary);
max-width: 700px;
margin: 0 auto !important;
}
/* 2. THE ANALYTICS HUB GAUGE */
.cs-analytics-hub {
background: var(--flex-gray-2);
padding: 3rem !important;
margin: 2rem 0 !important;
border: 1px solid var(--flex-decor-border);
border-left: 10px solid var(--review-accent, var(--flex-snarkive));
}
/* Progress Bar Track */
.cs-gauge-track {
background: #000;
height: 10px;
width: 100%;
margin-top: 10px;
position: relative;
}
/* Progress Bar Fill - Animated */
.cs-gauge-fill {
height: 100%;
background: var(--review-accent, var(--flex-snarkive));
box-shadow: 0 0 10px var(--review-accent, var(--flex-snarkive, #333));
transition: width 1.5s ease-in-out;
}
/* --- Cinepress 3.0: Post Template Meta & Layout --- */
/* --- Cinepress 3.0: High-Fidelity Ticket Stub Breadcrumbs --- */
/* 1. Reset the Nav & Paragraph */
nav.rank-math-breadcrumb {
margin: 20px 0 25px 0;
display: block;
overflow: visible;
/* Required for the cutout circles to pop out */
}
nav.rank-math-breadcrumb p {
display: flex !important;
/* Forces all links/spans onto one line */
flex-wrap: wrap;
/* Allows wrapping on small mobile screens */
align-items: center;
margin: 0;
padding: 0;
gap: 2px;
/* Creates the space for the circular cutouts */
}
/* 2. Style the Ticket Stubs */
nav.rank-math-breadcrumb a,
nav.rank-math-breadcrumb .last {
display: inline-flex !important;
align-items: center;
position: relative;
background: var(--ticket-bg-color, #f1f1f1);
padding: 8px 20px;
color: var(--ticket-text-color, #555);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none !important;
border-radius: 4px;
/* Slight base rounding */
transition: all 0.3s ease;
}
/* 3. The "Punch Hole" Cutouts (Pseudo-elements) */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::before,
nav.rank-math-breadcrumb .last::after {
content: "";
position: absolute;
top: 50%;
width: 14px;
/* Slightly smaller for a cleaner look */
height: 14px;
border-radius: 50%;
background-color: var(--flex-gray-3);
/* Matches page background to "punch" through */
transform: translateY(-50%);
z-index: 5;
}
/* Position Left Hole */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb .last::before {
left: -8px;
}
/* Position Right Hole */
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::after {
right: -8px;
}
/* 4. Hide the separators entirely */
nav.rank-math-breadcrumb .separator {
display: none !important;
}
/* 5. Start/End Exceptions */
/* Home Link: No left hole, rounded left edge */
nav.rank-math-breadcrumb a:first-of-type {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
nav.rank-math-breadcrumb a:first-of-type::before {
display: none;
}
/* Last Item: Different color/weight, rounded right edge, no right hole */
nav.rank-math-breadcrumb .last {
background: var(--cinesist-gold) !important;
color: #000 !important;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
nav.rank-math-breadcrumb .last::after {
display: none;
}
/* 6. Interaction */
nav.rank-math-breadcrumb a:hover {
background: var(--flex-snarkive) !important;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 10;
}
/* 1. THE META BAR */
.cs-post-meta-bar {
padding: 15px 0;
border-bottom: 1px solid var(--flex-decor-border);
margin-bottom: 2rem !important;
justify-content: space-between !important;
align-items: center !important;
margin: auto 5%;
}
body .smeta-sec .meta-avatar img {
width: 4rem;
height: 4rem;
}
@media (width <= 767px) {
body .smeta-sec .meta-avatar img {
width: 3rem;
height: 3rem;
}
}
.cs-meta-author {
display: flex;
align-items: center;
gap: 12px;
}
.cs-meta-author img {
border-radius: 50%;
border: 2px solid var(--flex-snarkive);
}
.wp-block-post-author-name a {
font-weight: 800;
text-transform: uppercase;
font-size: 1rem;
}
.cs-meta-stats {
display: flex;
gap: 20px;
font-family: var(--cs-font-mono, monospace);
font-size: 0.8rem;
text-transform: uppercase;
}
.meta-el.meta-comment {
display: none;
}
@media (min-width: 768px) {
.smeta-in .is-meta>*,
.smeta-in .meta-text>*,
.review-section .meta-text>*,
.spon-qview .sponsor-label,
.spon-qview .is-text,
.ubox .nice-name {
font-size: 1rem;
}
}
/* Review Post & Sidebar Columns */
.cs-dossier-columns {
/* display: flex; */
flex-direction: row;
/* gap: 20px; */
}
/* 2. THE COLUMNS GRID */
.cs-dossier-grid {
gap: 3rem !important;
margin-top: 2rem !important;
}
/* Sidebar Specific Styling */
.cs-sidebar-profile {
background: var(--flex-gray-2);
border: 1px solid var(--flex-decor-border);
padding: 20px;
border-top: 4px solid var(--flex-snarkive);
position: sticky;
top: 100px;
}
/* Review Content Area */
.cs-review-content {
width: 100%;
}
/* Content Area Polish */
.wp-block-post-content {
line-height: 1.8;
font-size: 1.1rem;
}
/* --- Save It Placeholder Glow --- */
.cs-meta-stats p:contains('[SAVE]') {
color: var(--cinesist-gold);
cursor: pointer;
font-weight: 900;
}
/* --- Reaction Section --- */
/* The Container */
/* Individual Reaction Module */
.cs-reaction-sec-content .reaction {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.2s ease;
}
/* Mobile View */
@media (max-width: 767px) {
.cs-reaction-sec-content .rb-reaction {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 1rem;
}
}
/* Desktop View */
@media (min-width: 768px) {
.cs-reaction-sec-content .rb-reaction {
display: grid;
grid-template-columns: repeat(10, 1fr); /* All 10 in one line */
gap: 0.5rem;
}
}
/* The SVG Icons */
.cs-reaction-sec-content .reaction-icon svg {
width: 45px; /* Sized for 5-across fit */
height: 45px;
transition: all 0.3s ease;
}
/* The "Cinesist" Hover - Lights up the Tech */
.cs-reaction-sec-content .reaction:hover .reaction-icon svg {
transform: scale(1.2) rotate(5deg);
}
/* The Labels (Love, Sad, etc.) */
.cs-reaction-sec-content .reaction-title {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
margin-top: 10px;
color: var(--flex-text-muted);
}
.cs-reaction-sec-content .reaction-count {
background: var(--flex-gray-1);
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
font-family: monospace; /* Tactical font */
margin-top: 5px;
border: 1px solid var(--flex-decor-border);
}
/* Bring back the color only when selected */
.cs-reaction-sec-content .reaction.is-active .reaction-icon svg {
transform: scale(1.3);
/* Add a purple 'Cinesist pulse' to show selection */
filter: drop-shadow(0 0 8px var(--flex-snarkive));
}
/* Optional: Slight pulse animation for the active selection */
@keyframes signalPulse {
0% { transform: scale(1.3); }
50% { transform: scale(1.4); }
100% { transform: scale(1.3); }
}
.cs-reaction-sec-content .reaction.is-active {
animation: signalPulse 2s infinite ease-in-out;
}
/* --- Conflict Widget --- */
.cs-btn__black-spy:hover {
animation: glitch 0.3s infinite;
}
@keyframes glitch {
0% { transform: translate(0) }
20% { transform: translate(-2px, 1px) }
40% { transform: translate(-2px, -1px) }
60% { transform: translate(2px, 1px) }
80% { transform: translate(2px, -1px) }
100% { transform: translate(0) }
}
/* Initial State: Bars are zeroed and hidden */
.cs-gauge__white-bar,
.cs-gauge__black-bar {
width: 0%;
opacity: 0;
transition: width 1.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease;
}
/* Standby State for the Widget */
.cs-conflict-widget {
transition: opacity 0.5s ease;
opacity: 0.3; /* Dimmed until data is ready */
}
/* Active State triggered by script */
.cs-conflict-widget.is-ready {
opacity: 1;
}
.cs-conflict-widget.is-ready .cs-gauge__white-bar,
.cs-conflict-widget.is-ready .cs-gauge__black-bar {
opacity: 1;
}
/* --- Streaming Tonight Widget - Powered by JustWatch --- */
/* Force the JustWatch widget to be cleaner */
.cs-streaming-hud [data-jw-widget] {
margin-bottom: 10px !important;
}
/* ---------------------------------*/
/* --- Cinepress 3.0: Cinematic Spotlight Protocol --- */
/* Remove foxiz Extra Meta from Mobile */
@media (width <= 991px) {
.smeta-extra {
display: none;
}
}
/* 1. The Stage & Backdrop */
.cs-spotlight-stage {
display: flex !important;
align-items: flex-end !important;
/* Pushes text to the bottom */
position: relative;
}
.cs-spotlight-img {
position: relative;
overflow: hidden;
}
.cs-spotlight-img img {
border-radius: var(--round-5);
box-shadow: var(--shadow-1), 0 0 15px rgba(0, 0, 0, 0.5), 0 0 5px var(--review-accent);
border: 5px solid var(--review-accent) !important;
transition: all 0.5s ease;
}
.cs-spotlight-overlay {
width: 100%;
position: absolute;
right: 0;
padding: 1.5rem 2rem !important;
display: flex;
flex-direction: column;
align-items: center;
}
/* 2. Dossier Typography */
.cs-dossier-title {
font-size: var(--cs-font-size-h1) !important;
text-transform: CAPITALIZE;
color: #fff !important;
font-weight: 800;
line-height: 0.95;
margin-bottom: 10px !important;
z-index: 5;
}
.cs-dossier-subtitle {
font-family: var(--cs-font-secondary) !important;
color: var(--review-accent, var(--flex-snarkive));
font-weight: 500;
line-height: 1.3;
z-index: 5;
margin-left: 0 !important;
margin-right: 0 !important;
align-self: start;
}
/* Rankmath Movie Ticket Breadcrumbs Wrapper */
.cs-review-breadcrumbs-wrapper {
padding: 0;
}
/* Rank Math Ticket Breadcrumbs */
nav.rank-math-breadcrumb {
background: none;
padding: 0;
border-radius: 0;
margin-top: 20px;
margin-bottom: 25px;
overflow: visible;
}
nav.rank-math-breadcrumb {
margin: 20px 0 25px 0;
display: block;
overflow: visible;
}
nav.rank-math-breadcrumb p {
display: flex !important;
flex-wrap: wrap;
align-items: center;
margin: 0;
gap: 2px;
}
nav.rank-math-breadcrumb a:first-child {
border-radius: 8px 0 0 8px;
}
nav.rank-math-breadcrumb a:first-of-type {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}
nav.rank-math-breadcrumb a, nav.rank-math-breadcrumb .last {
display: inline-flex;
align-items: center;
gap: .5em;
position: relative;
background: var(--flex-gray-40);
padding: clamp(8px, calc(0.5vw + 6px), 10px) clamp(12px, calc(1vw + 8px), 20px);
color: var(--ticket-text-color);
font-size: clamp(13px, calc(0.2vw + 12px), 14px);
line-height: 1.2;
text-decoration: none;
transition: all 0.2s ease;
}
nav.rank-math-breadcrumb .emoji {
height: 1.2em;
width: auto;
flex-shrink: 0;
}
nav.rank-math-breadcrumb .separator {
display: none !important;
}
nav.rank-math-breadcrumb .last {
border-radius: 0 8px 8px 0;
color: var(--ticket-text-current);
font-weight: 500;
}
nav.rank-math-breadcrumb a::before, nav.rank-math-breadcrumb .last::before {
left: -10px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
nav.rank-math-breadcrumb a::before, nav.rank-math-breadcrumb a::after, nav.rank-math-breadcrumb .last::before, nav.rank-math-breadcrumb .last::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: var(--page-bg-color);
}
/* Hide breadcrumbs on screens smaller than or equal to 767px */
@media (max-width: 767px) {
.cs-review-breadcrumbs-wrapper { /* Or use the more specific selector: .gb-element-362dbf90.cs-review-breadcrumbs-wrapper */
display: none; /* Use !important if necessary to override existing rules */
}
}
/* Ensure they are visible on screens larger than 767px (tablet/desktop) */
@media (min-width: 768px) {
.cs-review-breadcrumbs-wrapper {
display: flex; /* Or whatever its default display type should be */
}
}
/* 3. The Meta HUD Bar */
.cs-meta-hud-bar {
justify-content: space-between !important;
}
.cs-operative-info {
display: flex;
align-items: center;
gap: 15px;
padding-left: 0;
padding-right: 0;
}
.cs-operative-info img {
width: 3rem;
border: 2px solid var(--flex-snarkive);
border-radius: 50%;
}
.cs-operative-info-box {
display: flex;
align-items: center;
position: relative;
gap: 15px;
padding-left: 0;
padding-right: 0;
}
.cs-operative-info-box img {
width: 3.5rem;
border: 2px solid var(--flex-snarkive);
border-radius: 50%;
}
.cs-operative-info-verify {
position: absolute;
left: 75px;
margin-top: -1.3em !important;
}
.cs-user-badge {
display: flex;
position: relative;
}
/* --- Cinepress 3.0: Mission Status HUD --- */
.cs-mission-status {
display: flex;
align-items: center;
gap: 15px;
font-family: var(--cs-font-mono, monospace);
}
/* The Meta Word (Legendary, Burn-it, etc.) */
.cs-hud-meta-word {
font-weight: 900;
text-transform: uppercase;
font-size: 2rem;
letter-spacing: 2px;
text-shadow: 0 0 10px currentColor;
/* Gives it that neon glow */
}
/* The Large Cinescore Bubble */
.cs-hud-big-score {
font-size: 2rem;
font-weight: 900;
color: var(--review-accent);
padding: 5px 15px;
/* Color injected by PHP */
border-radius: 2px;
text-shadow: 0 0 10px currentColor;
}
/* Interaction: Pulse effect on the score */
.cs-hud-big-score:hover {
transform: scale(1.1);
transition: transform 0.2s ease-in-out;
}
/* 4. Sidebar Card Styling */
.cs-sidebar-card {
background: var(--flex-gray-2);
border: 1px solid var(--flex-decor-border);
padding: 25px !important;
border-top: 4px solid var(--flex-snarkive);
position: fixed;
top: 100px;
}
/* --- Cinepress 3.0: Snarkive Holographic Sidebar --- */
.cs-snarkive-intel-card {
position: -webkit-sticky;
position: sticky;
top: 30px;
/* Adjust based on your header height */
margin-bottom: 50px;
background: var(--flex-gray-15);
border: 1px solid var(--flex-decor-border);
border-top: 5px solid var(--review-accent);
padding: 0 !important;
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 0, 0, 0.3);
border-radius: 4px;
z-index: 10;
transition: top 0.3s ease;
}
/* 1. The Holographic Poster Effect */
/* We create a "double" poster look using a pseudo-element for the blurred background */
.cs-sidebar-poster-wrap {
position: relative;
height: 350px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background: #000;
}
/* The "ghost" background image */
.cs-sidebar-poster-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(15px) opacity(0.4) saturate(2);
transform: scale(1.2);
}
/* The sharp front-facing poster */
.cs-sidebar-poster-main {
position: relative;
z-index: 2;
height: 80%;
width: auto;
border: 1px solid var(--review-accent);
box-shadow: 0 0 30px var(--review-accent);
transform: perspective(1000px) rotateY(-5deg);
/* Subtle 3D tilt */
}
/* --- Cinepress 3.0: GitBash Terminal Styling --- */
.cs-terminal-line {
font-family: var(--cs-font-mono, monospace);
font-size: 0.75rem;
line-height: 1.4;
margin-bottom: 15px;
background: #000;
padding: 8px 12px;
border-radius: 4px;
border-left: 3px solid #333;
display: block;
white-space: nowrap;
overflow: hidden;
}
/* User & Host (Green) */
.cs-user {
color: #2ecc71;
/* Classic Terminal Green */
font-weight: 700;
}
/* Separator (White) */
.cs-bash-sep {
color: #ffffff;
margin: 0 2px;
}
/* Directory (Snarkive Purple) */
.cs-dir {
color: var(--flex-snarkive);
/* Injects the score color or purple */
font-weight: 600;
}
/* Command & Args (White) */
.cs-command {
color: #ecf0f1;
margin-left: 8px;
}
/* Blinking Cursor Effect */
.cs-cursor {
color: var(--review-accent);
font-weight: 900;
animation: terminal-blink 1s step-end infinite;
}
@keyframes terminal-blink {
from,
to {
opacity: 0;
}
50% {
opacity: 1;
}
}
/* Content adjustment to fit the new terminal line */
.cs-intel-title {
margin-top: 10px !important;
}
/* 2. Content Area: Data Terminal */
.cs-intel-card-content {
padding: 25px !important;
position: relative;
}
/* Scanline Effect Overlay */
.cs-intel-card-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
background-size: 100% 4px, 3px 100%;
pointer-events: none;
z-index: 5;
}
.cs-intel-title {
font-size: 1.5rem !important;
font-weight: 900 !important;
text-transform: uppercase;
color: var(--flex-text-primary);
margin-bottom: 5px !important;
letter-spacing: -1px;
}
.cs-intel-type {
font-family: var(--cs-font-mono, monospace);
font-size: 0.7rem;
color: var(--review-accent);
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 15px;
display: block;
}
.cs-intel-overview {
font-size: 0.9rem;
line-height: 1.5;
color: var(--flex-text-secondary);
border-top: 1px dashed var(--flex-decor-border);
padding-top: 15px;
}
/* 3. The Access Button */
.cs-intel-btn {
display: block;
width: 100%;
text-align: center;
background: var(--review-accent) !important;
/* Solid Brand Color */
border: 1px solid var(--review-accent) !important;
border-radius: 2px;
color: #fff !important;
box-shadow: 0 4px 0px rgba(0, 0, 0, 0.5), 0 0 15px var(--review-accent);
transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
padding: 12px;
margin-top: 20px;
font-weight: 900;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.cs-intel-btn:hover {
background: var(--review-accent) !important;
color: #ffffff;
transform: translateY(-3px) scale(1.02);
filter: brightness(1.2);
box-shadow: 0 6px 20px var(--review-accent);
}
/* Interaction: "Active Signal" Animation on the button */
.cs-intel-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 0px rgba(0, 0, 0, 0.8);
}
/* --- Cinepress Review Share Box --- */
.cs-review-social-share {
margin-block-start: var(--cs-spacing-md) !important;
margin-block-end: var(--cs-spacing-md) !important;
padding: 0 !important;
}
.cs-review-share-box {
display: flex !important;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-right: 10px;
}
.cs-post-author-box {
border-radius: 5px;
border-top: 5px solid var(--flex-snarkive);
border-right: 1px solid var(--flex-snarkive);
border-bottom: 1px solid var(--flex-snarkive);
border-left: 1px solid var(--flex-snarkive);
box-shadow: var(--wp--preset--shadow--natural);
}
/* --- Cinesist After Review Wrapper --- */
.cs-section.after-review-section {
background-color: var(--flex-bg-color);
}
.cs-after-review-wrapper {
background-color: var(--flex-bg-color);
}
/* --- Cinesist Review Comments Block --- */
/* Comments Spacing */
.cs-review-comments-wrapper {
margin-block-start: var(--cs-spacing-md) !important;
margin-block-end: var(--cs-spacing-md) !important;
background-color: var(--flex-bg-color);
padding-top: 2rem;
padding-bottom: 2rem;
}
.cs-review-comments-label-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
}
.cs-review-thoughts-label {
display: flex;
align-items: center;
gap: 10px;
}
.cs-review-comments-label-icon {
margin: 0 !important;
padding: 0 !important;
font-size: 1.5rem !important;
}
.cs-review-comments-label {
margin: 0 !important;
font-size: var(--cs-font-size-h5);
}
.comment-respond:not(:only-child) .comment-reply-title,
.cs-comments-reply-title {
position: relative;
padding-top: var(--cs-spacing-sm) !important;
border-top: 1px solid var(--flex-text-title) !important;
}
.comment-respond:not(:only-child) .comment-reply-title::before,
.cs-comments-reply-title::before {
background-color: var(--flex-snarkive);
top: -2.5px;
content: "";
height: 5px;
left: 0;
position: absolute;
width: 27%;
z-index: 1;
}
/* Comments Text Area */
/* Styling for all comment inputs and textarea */
/* --- Snarkive: Comment Heading Protocol --- */
.cs-comments-reply-title {
font-family: var(--font-mono, monospace);
font-size: 1.1rem;
font-weight: 800;
text-transform: uppercase;
color: #fff;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
/* Add a "Ready to Type" Cursor effect to the heading */
.cs-comments-reply-title::after {
content: "_";
color: var(--body-fcolor);
animation: terminal-blink 1s step-end infinite;
}
/* Ensure the 'Cancel Reply' link doesn't break the layout */
.cs-comments-reply-title small a {
font-size: 0.6rem;
color: #ff5612;
text-decoration: underline;
margin-left: 15px;
font-weight: 400;
}
.comment-form-field-textarea textarea,
.comment-form-author input,
.comment-form-email input,
.comment-form-url input {
border: 2px solid var(--flex-snarkive-90) !important;
border-radius: 10px;
padding: 10px;
width: 100%;
/* Ensure they fill the container */
box-shadow: inset 5px 5px 10px var(--flex-gray-2),
inset -5px -5px 10px var(--wp--preset--color--flex-gray-4);
}
/* Hide labels but keep them accessible for screen readers */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
word-wrap: normal !important;
}
.comment-form .logged-in-as,
.comment-form .comment-notes {
display: none;
}
/* Avatar styling */
.user-avatar-circle,
.user-icon-placeholder {
border-radius: 50%;
vertical-align: middle;
margin: 0 5px;
}
/* Brand styling for comments login/out link */
.cs-comment-operative-info .brand-first,
.cs-comment-operative-info .brand-last {
display: inline-flex;
}
.brand-first {
font-weight: bold;
color: var(--flex-snarkive);
/* Adjust to your brand color */
padding-left: 5px;
}
.brand-last {
font-weight: 600;
}
.required-mark {
color: #e74c3c;
}
.cs-comment-operative-info {
display: flex !important;
margin-bottom: 20px;
line-height: 1.6;
align-items: center;
gap: 5px;
}
.cs-comment-operative-info .login-toggle {
vertical-align: unset;
}
.cs-comment-operative-info img {
width: 2.25rem;
border: 2px solid var(--flex-snarkive);
border-radius: 50%;
}
.cs-logged-in-as {
margin: 0 !important;
font-size: 0.75rem;
}
.cs-logged-out-msg {
margin: 0 !important;
font-size: 0.75rem;
}
.cs-logged-out-msg .login-toggle {
vertical-align: unset;
}
.cs-operative-info-avatar-icon {
font-size: 1.2rem;
align-items: center;
width: 1.5rem;
color: var(--body-fcolor);
fill: var(--body-fcolor);
}
/* Blocksy Modal Trigger Style */
.ct-open-modal {
text-decoration: underline;
cursor: pointer;
font-weight: bold;
}
/* --- Cinesist Suggest Card Grid --- */
/* Section Wrapper */
.cs-suggest-grid-wrapper {
background-color: var(--flex-bg-color);
margin-bottom: 0 !important;
}
.cs-suggest-grid-card {
/* position: relative; */
/* overflow: hidden; */
}
.cs-suggest-grid-card li {
position: relative;
overflow: hidden;
}
.cs-suggest-grid-card-image-holder {
position: relative;
overflow: hidden;
border-radius: 8px;
}
.cs-suggest-grid-card-image {
position: relative;
/* overflow: hidden !important; */
/* Hardware acceleration (will-change) + smooth cubic-bezier */
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: transform;
height: 400px;
border-radius: 8px;
margin-bottom: 0;
}
.cs-suggest-grid-card-image img {
object-fit: cover;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
}
.cs-suggest-grid-card-image:hover {
transform: scale(1.05);
}
/* related resource: generateblocks-inline-css:2:2788 */
.gb-element-7984b69f { /* the element was .gb-element-7984b69f */
overflow: hidden;
}
/* related resource: style.css?ver=2.7.2:696:1 */
a.gb-element-7984b69f { /* the element was a */
display: block;
}
.cs-suggest-grid-card {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cs-suggest-grid-card-details {
bottom: 0;
display: flex;
flex-direction: column;
gap: .15rem;
/* grid-area: auto; */
left: 0;
padding: 3rem 1rem 1rem;
position: absolute;
width: 100%;
z-index: 2;
}
.cs-suggest-grid-card-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-moz-line-clamp: 3;
line-clamp: 3;
overflow: hidden;
-webkit-box-orient: vertical;
}
.cs-suggest-grid-card-title a {
color: unset;
}
.cs-suggest-grid-card-title a:hover {
color: unset;
cursor: pointer;
text-decoration: underline;
text-decoration-color: var(--flex-snarkive);
}
@media (min-width: 768px) {
.cs-suggest-grid-card-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-moz-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
-webkit-box-orient: vertical;
}
}
/*
-----------------
10 - Archives
-----------------
*/
/* Archive Grid */
.archive-header-content {
flex-grow: 1;
border-bottom: 3px solid;
/* Gives us the nice separation */
max-width: 1250px;
/* Makes the header lineup with the page */
padding: 0px 0px 0px 0px;
/* Removes all the padding */
}
.archive-title {
text-align: left !important;
/* Fixes Foxiz Stuck on Center Rule */
padding: 0px !important;
/* Takes the spacing away from the left side */
margin-bottom: 1rem !important;
/* Adds a small space between the Archive Title and Description */
font-size: var(--cs-font-size-h1) !important;
}
/* --- Heading Titles --- */
.archive-title.b-follow {
display: flex;
align-items: center;
flex-flow: row wrap;
gap: 20px;
/* border-bottom: 3px solid var(--body-fcolor); /* Adds a border underneath the Heading, that changes colors */
}
/* Find this rule in your Foxiz CSS and add the two lines below: */
.b-follow .rb-follow {
width: auto;
min-width: 25px;
padding-right: 0px;
padding-left: 0px;
border-radius: var(--round-7);
display: inline-flex;
align-items: center;
/* THIS IS THE KEY FLEXBOX PROPERTY */
justify-content: center;
/* ADD THIS to center content horizontally as well */
border: none;
}
.b-follow .rb-follow:hover {
color: var(--flex-snarkive);
cursor: pointer;
}
/* Now, ensure the icon and the text added via ::after are aligned */
.b-follow .rb-follow i {
-webkit-transform: none !important;
transform: none !important;
/* ADD THIS to ensure the icon is centered relative to the text baseline */
vertical-align: middle;
font-size: 1em !important;
color: var(--flex-text-primary);
font-weight: 600;
}
.b-follow .rb-follow i:hover {
color: var(--flex-snarkive);
cursor: pointer;
}
.b-follow .rb-follow i:before {
font-size: 2em;
}
.b-follow .rb-follow i:after {
font-family: var(--meta-b-family);
font-size: 1.25em;
font-weight: var(--meta-b-fweight);
margin-left: 5px;
position: absolute;
color: var(--flex-text-primary);
}
.b-follow .rb-follow i:after:hover {
color: var(--flex-snarkive);
cursor: pointer;
}
/* --- Target the main wrapper to ensure it has space to work with --- */
.category-hero-wrap {
/* Set an appropriate height/max-height for the hero section */
/* Example: adjust the max-height as needed */
max-height: 400px;
}
/* --- Ensure the item container takes up the full space and is a Flex container --- */
.category-hero-item-inner {
width: 100%;
height: 100%;
/* Ensures items inside are centered (optional, but often helpful for 'contain') */
display: flex;
justify-content: center;
align-items: center;
}
/* --- The KEY Change: Use 'object-fit: contain' --- */
.category-hero-item-inner img {
/* Set dimensions to ensure the image can use the whole container space */
width: 100%;
height: 100%;
/* This scales the image down to fit its container without cropping. */
/* It preserves the image's aspect ratio, so you'll see the whole image. */
object-fit: contain;
/* Remove any fixed margins or padding that might be squishing the image */
margin: 0;
padding: 0;
}
/* =========================================
CINESIST HERO: TRI-INTEL GRID (GB PRO SKIN) - CONSOLIDATED & OPTIMIZED
========================================= */
/* Container must be relative for the link to stick */
/* Tactical Admin Overlays */
.cs-admin-edit-shroud {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
opacity: 0;
transition: opacity 0.3s ease;
}
/* 2. Reveal on hover of the li (p-wrap) */
.p-wrap:hover .cs-edit-link-wrapper {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.cs-edit-link-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none; /* Prevents blocking clicks when invisible */
}
.cs-edit-link-wrapper:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.cs-archive-hero.post-item:hover .cs-admin-edit-shroud {
opacity: 1;
}
.cs-edit-link {
display: inline-block;
background: var(--cinefox-orange, #ff7300);
color: #000 !important;
font-family: var(--cs-font-primary, sans-serif);
font-size: 10px;
font-weight: 900;
padding: 3px 8px;
border-radius: 2px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.cs-edit-link:hover {
background: #fff;
color: var(--cinefox-orange) !important;
}
/* Target the cards specifically in the archive feed */
.cs-archive-hero.post-item.p-wrap {
position: relative;
display: flex;
flex-direction: column;
}
/* Ensure the 'p-link' (the invisible full-card link) covers the GB structure */
.cs-archive-hero.post-item.p-wrap .p-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
/* Archive Hero Grid - Main Grid Container */
div#cs-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"main main sideCol"
"main main sideCol";
gap: 10px;
max-height: 550px;
/* Overall max height for the entire grid */
overflow: hidden;
/* Prevents content overflow */
}
/* Large Main Item Wrapper: placed in the 'main' area */
.cs-archive-hero.grid-query.first-post-query-wrapper {
grid-area: main;
height: 100%;
/* Important: Wrapper must fill its grid area */
/* If this wrapper needs to be a flex container for its children (the ul), uncomment below */
/* display: flex; */
/* flex-direction: column; */
}
/* UL within the Large Main Item Wrapper */
.cs-archive-hero.grid-query.first-post-query-wrapper>ul.gbp-list--unstyled.cs-archive-hero-loop-list {
height: 100%;
/* Important: This ul must fill its parent wrapper */
width: 100%;
display: grid;
/* Make this ul a flex container for its li child */
flex-direction: column;
/* Stack its li child vertically */
grid-area: unset;
/* Ensure no conflicting grid-area property */
}
/* Individual Large List Item (the large tile) */
li.gb-loop-item.post-item.cs-archive-hero-loop-item.cs-hero-large-tile {
height: 100% !important;
/* Force li to fill its ul parent */
width: 100%;
flex-grow: 1 !important;
/* Allow li to grow within its flex ul parent */
overflow: hidden !important;
/* Contains any overflowing children within this li */
display: flex;
/* Make the li a flex container for its tile-holder */
flex-direction: column;
/* Stack children vertically */
grid-area: unset;
/* Remove any conflicting grid-area property */
}
.cs-archive-hero-loop-item.cs-hero-large-tile {
margin: unset;
}
/* Wrapper for the Two Small Tiles: placed in the 'sideCol' area */
.cs-archive-hero.grid-query.second-post-query-wrapper {
grid-area: sideCol;
display: grid;
/* Make this wrapper itself a grid container */
grid-template-columns: 1fr;
/* Single column for stacking its children (the ul) */
height: 100%;
/* Important: This wrapper must take 100% height of its grid-area */
}
/* Unordered list (ul) that holds the two small tiles */
.cs-archive-hero.grid-query.second-post-query-wrapper>ul.gbp-list--unstyled.cs-archive-hero-loop-list {
display: grid;
/* Make the ul a grid container */
grid-template-rows: 270px 270px;
/* Two rows, each 270px high, to fit within 550px total height with a 10px gap */
gap: 10px;
/* Gap between the two small tiles (li children) */
height: 100%;
/* Important: Ensure the ul takes full height of its parent */
grid-area: unset;
/* Ensure no conflicting grid-area property */
}
/* Individual small list items (the small tiles) */
li.gb-loop-item.post-item.cs-archive-hero-loop-item.cs-hero-small-tile {
grid-area: unset;
/* Remove any conflicting grid-area property */
height: 100%;
/* Important: Ensure li fills its grid row */
width: 100%;
display: flex;
/* Make it a flex container to control internal content */
flex-direction: column;
}
/* 3. TILE INTERIOR (Article Container) - Apply to both large and small tiles */
.cs-archive-hero.tile-holder {
position: relative;
height: 100%;
/* Important: Ensures the tile-holder fills its parent (li) */
width: 100%;
overflow: hidden;
/* Necessary for object-fit on image and potential hover effects */
background: var(--cinefox-black-spy);
border: 1px solid var(--cinesist-border-color);
border-radius: var(--round-10);
display: flex;
/* Make it a flex container to center/align content if needed */
flex-direction: column;
/* Often useful for stacking image and text overlay */
}
/* Wrapper for the image (the 'a' tag) within the tile-holder */
.cs-archive-hero.tile-holder>a {
display: block !important;
/* Force it to be a block for consistent sizing */
height: 100% !important;
/* Important: Make the 'a' tag fill its parent .tile-holder */
width: 100% !important;
overflow: hidden !important;
/* Crucial to contain the image if it tries to overflow */
}
/* Feature Image Layer - Specific to the image itself */
.cs-archive-hero .tile-feat img {
/* General rule for all such images */
width: 100% !important;
height: 100% !important;
/* Important: Make the image fill its parent container */
object-fit: cover !important;
/* Maintain aspect ratio and cover the area */
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
/* Removes extra space below images */
transform: scale(0.9);
}
.tile-feat img {
/* General rule for all such images */
width: 100% !important;
height: 100% !important;
/* Important: Make the image fill its parent container */
object-fit: cover !important;
/* Maintain aspect ratio and cover the area */
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
/* Removes extra space below images */
transform: scale(0.9);
}
/* .cs-archive-hero.post-item:hover .cs-archive-hero.tile-feat img */
/* ... existing hover styles ... */
.cs-archive-hero.post-item:hover .cs-archive-hero.tile-feat img {
transform: scale(1.08);
}
/* Text Overlay (The Details Container) */
.cs-archive-hero.tile-details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 25px;
z-index: 5;
}
/* 4. TYPOGRAPHY & META (Dossier Branding) */
/* These seem fine as they are for text styling */
.cs-archive-hero.tile-meta-title a {
color: var(--cinesist-title-color) !important;
font-family: var(--cs-font-primary);
font-weight: 700;
text-decoration: none;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.cs-archive-hero.tile-meta-term {
color: var(--cinefox-orange);
text-transform: uppercase;
font-weight: 900;
font-size: 0.65rem;
letter-spacing: 2px;
margin-bottom: 8px;
}
.cs-archive-hero.tile-meta-summary {
color: var(--cinesist-text-color);
font-size: 0.9rem;
opacity: 0.85;
}
/* Author Byline Sub-Section */
.cs-archive-hero.tile-meta-writer-info {
display: flex;
align-items: center;
gap: 12px;
margin-top: 0.5rem;
padding-top: 0.5rem;
}
.cs-archive-hero.tile-meta-writer-av {
border-radius: 50%;
border: 2px solid var(--cinefox-orange);
}
/* --- Archive Feed --- */
/* Feed Cards */
/* --- Pagination Navigation --- */
/* --- 10A --- Cinesist Reviews Archive Template --- */
/* --- Cinesist Engine: Tactical Topic Hero Grid --- */
.cs-topic-hero-wrap {}
.cs-topic-hero-grid {
gap: 10px !important;
}
/* 1. THE DOSSIER CARD (Base) */
.cs-topic-hero-wrap li.wp-block-post {
position: relative;
overflow: hidden;
border-radius: 4px;
height: 100%;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: flex-end;
/* Pushes content to bottom */
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-topic-hero-wrap li.wp-block-post:hover {
transform: scale(1.01);
border-color: var(--review-accent);
}
/* 2. THE IMAGE (Full Bleed Background) */
.cs-topic-hero-wrap figure.cs-featured-hero-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0 !important;
z-index: 1;
}
.cs-topic-hero-wrap figure.cs-featured-hero-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
opacity: 0.6;
/* Cinematic dimming */
transition: opacity 0.3s ease;
}
.cs-topic-hero-wrap li.wp-block-post:hover img {
opacity: 0.8;
}
/* 4. THE CONTENT (Text HUD) */
.cs-topic-hero-wrap h2.cs-featured-hero-title {
position: relative;
z-index: 3;
padding: 25px;
margin: 0;
font-weight: 900;
line-height: 1.1;
color: #fff;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.cs-topic-hero-wrap h2.cs-featured-hero-title a {
color: #fff !important;
text-decoration: none !important;
}
/* Main Hero (Large Left) */
.cs-topic-hero-main h2.cs-featured-hero-title {
font-size: clamp(1.8rem, 4vw, 2.5rem);
max-width: 85%;
}
/* Sidebar Dossiers (Small Right) */
.cs-topic-hero-sidebar h2.cs-featured-hero-title {
font-size: 1.3rem;
padding: 15px;
}
.cs-topic-query-sidebar ul {
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
}
/* Force Sidebar items to split height evenly */
.cs-topic-hero-sidebar li.wp-block-post {
flex: 1;
}
/* 5. TACTICAL "STAR" OR SCORE BAR INJECTION
(If you use the meta-bar here, we style it for overlay) */
.cs-topic-hero-wrap .cs-meta-overlay {
position: relative;
z-index: 3;
padding: 0 25px 25px 25px;
display: flex;
gap: 15px;
font-family: var(--font-mono);
font-size: 10px;
color: #aaa;
}
/* Cinesist Archive Hero Review Hud */
.cs-hero-review-hud {
display: flex;
align-items: center;
gap: 15px;
margin: 0 !important;
padding: 0.5rem 1rem !important;
}
.cs-hero-review-hud {
position: absolute;
bottom: 0;
left: 0;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
gap: 12px !important;
padding: 0.5rem 1rem !important;
z-index: 55;
}
/* Cinesist Topic Hero Card Title */
.cs-topic-featured-hero-title .wp-block-post-title {
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
z-index: 22;
margin: 0 !important;
}
/* Cinesist Topic Hero Card Title Links */
.entry-title a {
color: var(--awhite);
transition: coloe 0.3 ease;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.entry-title a:hover {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: var(--flex-snarkive)!important;
text-decoration-thickness: 2px;
}
h2.entry-title {
font-size: var(--title-size, var(--h2-fsize)) !important;
font-weight: 800 !important;
margin: 0 !important;
}
h2.entry-title.overlay a {
color: var(--awhite);
transition: color 0.3s ease;
}
h2.entry-title.overlay a:hover {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: var(--review-accent, var(--flex-snarkive)) !important;
text-decoration-thickness: 2px;
}
/* --- Cinesist Topic Hero Card Cinescore Stats --- */
/* Topic Review Cinemeter */
.cs-review-hud-cinemeter-wrapper {
display: contents;
}
/* Cinesist Topic Review Cinescore Number */
.cs-review-hud-cinescore {
margin: 0 !important;
display: flex;
align-items: center;
}
/* Cinesist Cinescore Meta Word */
.cs-review-hud-cinescore-meta-word-badge {
background: var(--review-accent);
color: #e5e5e5 !important;
padding: 2px 15px !important;
font-size: 1rem !important;
font-weight: 900 !important;
text-transform: uppercase;
z-index: 15;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
/* --- Cinesist: Tactical Topic Hero HUD --- */
/* Large Tile Spacing */
.cs-topic-query-featured,
.cs-topic-main-featured-card,
.cs-topic-query-sidebar,
.cs-topic-main-sidebar-card,
.cs-topic-hero-grid {
margin: 0 !important;
}
/* Container Grid Setup */
.cs-topic-hero-main {
margin: 0 !important;
}
.cs-topic-hero-grid {
gap: 10px !important;
}
/* 1. UNIVERSAL CARD STYLING (Main & Sidebar) */
.cs-topic-hero-wrap li.wp-block-post {
position: relative;
overflow: hidden;
border-radius: 5px;
list-style: none;
height: 100%;
margin: 0 !important;
}
/* 2. IMAGE HANDLING (Background Layer) */
.cs-topic-featured-hero-img,
.cs-topic-sidebar-hero-img {
margin: 0 !important;
height: 100%;
}
.cs-topic-featured-hero-img img,
.cs-topic-sidebar-hero-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: opacity 0.4s ease, transform 0.8s ease;
}
/* 3. THE HUD CONTENT (Foreground Layer) */
.cs-hero-review-hud {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 1rem !important;
z-index: 99;
pointer-events: none;
/* Let clicks pass to the image link */
}
.cs-hero-review-hud * {
pointer-events: auto;
/* Re-enable for title links */
}
.cs-topic-hud-author {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 !important;
flex-wrap: nowrap;
}
.cs-topic-hud-author .wp-block-post-author__avatar {
margin: 0 !important;
}
.cs-topic-hud-pub {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
}
.cs-topic-hud-pub-date {
font-size: 12px;
margin: 0 !important;
}
/* 4. MAIN FEATURED HUD (Large Left) */
.cs-topic-featured-hero-title {
font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
font-weight: 900 !important;
line-height: 1.1;
margin-bottom: 0.5rem !important;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}
.cs-topic-featured-hero-title a {
color: #fff !important;
text-decoration: none !important;
}
/* Cinescore Overlay Rows */
.cs-topic-hero-cinescore {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
margin: 0 !important;
}
/* Meta HUD (Author/Date) */
.cs-topic-hud-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 0.75rem;
text-transform: uppercase;
color: #ccc;
letter-spacing: 1px;
margin: 0 !important;
}
.cs-topic-hud-author .wp-block-post-author__avatar img {
width: 20px !important;
height: 20px !important;
border-radius: 50%;
opacity: 1 !important;
}
/* 5. SIDEBAR CARDS (Stacked Right) */
.cs-topic-query-sidebar ul {
display: flex;
flex-direction: column;
gap: 10px !important;
height: 100%;
}
.cs-topic-hero-sidebar li.wp-block-post {
flex: 1;
/* Splits the height evenly */
min-height: 225px;
}
/* Sidebar Text HUD */
h3.entry-title {
font-size: var(--title-size, var(--h3-fsize)) !important;
font-weight: 800 !important;
margin: 0 !important;
}
h3.entry-title.overlay a {
color: var(--awhite);
transition: color 0.3s ease;
}
h3.entry-title.overlay a:hover {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: var(--review-accent, var(--flex-snarkive)) !important;
text-decoration-thickness: 2px;
}
/* Post Cards Excerpts */
.entry-summary p {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-block-end: 0 !important;
}
.cs-topic-featured-hero-title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-topic-sidebar-hero-title {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
z-index: 10;
font-size: 1.2rem !important;
font-weight: 800;
line-height: 1.2;
margin: 0 !important;
}
.cs-topic-sidebar-hero-title a {
color: #fff !important;
text-decoration: none;
}
/* Sidebar Gradient Protection */
.cs-topic-hero-sidebar li.wp-block-post::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0) 60%);
z-index: 5;
}
/* 6. SPECIAL HUD ELEMENTS (C-METER placeholders) */
.cs-topic-main-sidebar-card .cs-topic-hero-cinescore .cs-card-cinemeter {
margin: unset;
}
.cs-topic-main-sidebar-card .cs-topic-hero-cinescore .cs-meter-icon {
font-size: 1.2rem;
}
.cs-topic-main-sidebar-card .cs-hud-value {
font-size: 1.5rem;
}
.cs-topic-main-sidebar-card .cs-review-hud-cinescore-meta-word-badge {
font-size: 0.9rem !important;
}
.cs-review-hud-cinescore-meta-word-badge {
background: var(--review-accent, #ff5612);
color: #000;
padding: 2px 8px;
font-weight: 900;
font-size: 10px;
border-radius: 2px;
}
/* Suggested Article Titles */
h4.entry-title {
font-size: var(--title-size, var(--h4-fsize)) !important;
font-weight: 800 !important;
margin: 0 !important;
}
h4.entry-title.overlay a {
color: var(--awhite);
transition: color 0.3s ease;
}
h4.entry-title.overlay a:hover {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: var(--review-accent, var(--flex-snarkive)) !important;
text-decoration-thickness: 2px;
}
/*
-----------------
11 - Pages
-----------------
*/
.page-header-1 .page-header-inner {
display: none;
/* Hides Default Foxiz Page Header */
}
/* --- Homepage --- */
/* Sets the font size for quick links */
.qlink {
font-size: var(--rem-mini);
/* 0.8rem */
}
/* Homepage Category Boxes */
.cbox-title {
font-size: 1.2rem;
}
@media (min-width: 768px) {
/* makes .cbox elements shrink to 15% width,
but only when the screen width is 768px or larger. */
.rb-col-4>.block-inner>.cbox {
flex-basis: 15%;
width: auto;
/* Ensures flex-basis takes precedence over width */
}
}
/* --- 11 A. The Homepage --- */
/* --- Cinesist HQ: Hero Grid Revamp --- */
/* 1. The Main Frame */
.hero-section[data-type='type-1'] {
text-align: var(--alignment);
margin-bottom: var(--margin-bottom, 0) !important;
}
.cs-homepage-hero-wrap {
padding: 0.5rem 0;
margin: 0 auto;
}
.cs-hero__grid-tile:nth-child(1) .cs-hero__grid-title.smallTile,
.cs-hero__grid-tile:nth-child(1) .smallTile__summary,
.cs-intel-card__heroVid:nth-child(1) .cs-hero__grid-title.smallTile {
display: none;
}
.cs-hero__grid-tile:nth-child(n+2) .cs-hero__grid-title.largeTile,
.cs-intel-card__heroVid:nth-child(n+2) .cs-hero__grid-title.largeTile,
.cs-hero__grid-tile:nth-child(n+2) .largeTile__summary,
.cs-hero__grid-tile:nth-child(n+2) .cs-hero__grid-pub {
display: none;
}
/* 1. Ensure the first tile is the "Anchor" for the absolute fox */
.cs-hero-grid > .cs-hero__grid-tile:nth-child(1) {
position: relative;
overflow: visible; /* Important: Allow fox to peek outside the tile */
transition: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
/* 2. Hide the fox on all tiles EXCEPT the first one */
.cs-hero__grid-tile:nth-child(n+2) .cinefox-peeking {
display: none !important;
}
.cinefox-peeking {
transform: translateX(100%) rotateY(308deg) !important; /* Initial position: fully below the container */
transition: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
/* 3. Hover Trigger: Move only when the first tile is hovered */
/* Note: We use the tile itself as the trigger for the image inside it */
.cs-hero-grid > .cs-hero__grid-tile:nth-child(1):hover .cinefox-peeking {
transform: scale(1.05) translateY(0) rotate(10deg)!important;
}
/* 3. Hover Trigger: Move only when the first tile is hovered */
/* Note: We use the tile itself as the trigger for the image inside it */
.cs-hero-grid > .cs-hero__grid-tile:nth-child(n+2):hover .cinefox-peeking {
transform: none !important;
/* -translate-x-2 is ~8px */
}
/* 1. The Featured Card (70% Column) */
.cs-hero-main .wp-block-post {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
background: var(--contrast-1);
transition: transform 0.3s ease;
}
/* Target the Cover Block specifically in our Hero */
.cs-hero-main .wp-block-cover {
padding: 2.5rem !important;
/* Spacing inside the "Terminal" */
border-radius: 0.5rem;
overflow: hidden;
}
/* The Adaptive Underline for the Title inside the Cover */
.cs-hero-main .wp-block-cover .wp-block-post-title a {
color: #ffffff !important;
/* Always white over the dark gradient */
font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
/* Responsive font sizing */
line-height: 1.1;
display: inline;
background-image: linear-gradient(var(--flex-snarkive), var(--flex-snarkive));
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 3px;
transition: background-size 0.3s;
}
.cs-hero-main .wp-block-cover:hover .wp-block-post-title a {
background-size: 100% 3px;
}
/* The Gradient Overlay: Ensuring Title Scannability */
.cs-hero-main .wp-block-post-featured-image {
position: relative;
margin: 0 !important;
height: 35rem;
transition: filter 0.3s ease;
/* Smooth transition for the effect */
}
.cs-hero-main .wp-block-post-featured-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
/* Only covers the bottom half */
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 40%, transparent 100%);
pointer-events: none;
}
.cs-hero-main .wp-block-post-featured-image img {
height: 100% !important;
width: 100% !important;
object-fit: cover;
filter: brightness(0.7) contrast(1.1);
transition: filter 0.5s ease;
}
.cs-hero-main .wp-block-post-featured-image img:hover {
filter: brightness(var(--flex-hover-brightness));
}
/* Overlay the Headline on the image */
.cs-hero-main .wp-block-post-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
z-index: 22;
margin: 0 !important;
}
.cs-hero-main .wp-block-post-title a {
color: #fff;
font-size: var(--cs-font-size-h2) !important;
font-weight: 900;
line-height: 1.1;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}
.largeTile a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--flex-snarkive);
color: unset;
}
.smallTile a:hover, .cs-hero__grid-pub-info a:hover {
text-decoration: 2px solid underline;
text-decoration-color: var(--flex-snarkive);
color: unset;
}
/* 2. Adaptive Title Links & Hover Underline */
.cs-hero-main .wp-block-post-title a,
.cs-hero-sidebar .wp-block-post-title a {
color: #e5e5e5;
text-decoration: none;
position: relative;
transition: color 0.3s ease;
display: inline-block;
}
/* Sidebar Title Hover Logic */
.cs-hero-sidebar .wp-block-post-title a {
color: var(--flex-text-title);
/* Adaptive: Dark in Light mode, White in Dark mode */
transition: color 0.2s ease;
}
.cs-hero-main .wp-block-post-title a:hover {
text-decoration: underline;
text-decoration-color: var(--flex-snarkive);
}
/* 3. The Sidebar Intel (30% Column) */
.cs-hero-sidebar .wp-block-post-template {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cs-hero-sidebar .wp-block-post {
display: flex;
gap: 1rem;
align-items: center;
background: var(--flex-gray-2);
padding: 0.75rem;
border-bottom: 1px solid var(--flex-decor-border);
border-left: 3px solid var(--flex-snarkive-50);
transition: all 0.3s ease;
margin-bottom: 0;
}
.cs-main-feature-list-card-content {
margin-bottom: 0;
}
.cs-hero-sidebar .wp-block-post:hover {
border-left-color: var(--flex-snarkive-90);
background: var(--flex-snarkive-50);
/* Subtle tinted background on hover */
}
.cs-hero-sidebar .wp-block-post-featured-image {
flex: 0 0 6rem;
/* Small thumbnails */
margin: 0 !important;
}
.cs-hero-sidebar .wp-block-post-featured-image img {
aspect-ratio: 1/1;
border-radius: 2px;
border-radius: 0.25rem;
width: 6.25rem;
/* ~100px */
height: 6.25rem;
object-fit: cover;
}
/* 4. Formatting Sidebar Titles */
.cs-hero-sidebar .wp-block-post-title {
font-size: 0.95rem !important;
font-weight: 700;
line-height: 1.3;
}
.cs-hero-main .wp-block-post-excerpt {
color: #f0f0f0;
/* Kept bright for visibility over dark gradient */
font-size: 1rem;
max-width: 80%;
margin-top: 0.5rem;
}
/* ===============================================================
ARKAHNA SUMMONING ANIMATION
=============================================================== */
/* 1. Base Container Setup */
.arkahna-summoning-container {
position: relative;
display: inline-block; /* Or width/max-width */
overflow: hidden; /* Keeps smoke inside the bounds */
border-radius: 12px; /* Optional: adds a slight corner soften */
line-height: 0; /* Prevents image bottom spacing */
}
/* 2. The Base Image */
.arkahna-image {
width: 100%;
height: auto;
display: block;
mix-blend-mode: screen; /* Optional: If she is on a dark background */
}
/* 3. The Existing Floating Animation (You Already Have This) */
.arkahna-float {
animation: float_up_down 5s ease-in-out infinite;
}
/* Define YOUR float animation (if needed for testing) */
@keyframes float_up_down {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
/* ------------------------------------------------ */
/* 4. THE INTRICATE CSS SMOKE EFFECT */
/* ------------------------------------------------ */
/* Define the base properties for all smoke wisps */
.smoke-effect {
position: absolute;
border-radius: 50%; /* Start spherical, blend via gradient */
filter: blur(25px); /* Crucial: Softens the edges of the gradient */
opacity: 0;
pointer-events: none; /* Prevents the smoke from being clickable */
}
/* Create different smoke elements with different positions, sizes, and animations */
/* SMOKE 1: Subtle Left Hand Swirl */
.smoke-1 {
position: absolute;
width: 25%; height: 25%;
background: radial-gradient(circle, rgba(144 6 230 / 94%) 0%, rgba(255, 255, 255, 0) 70%);
top: 25%; left: 5%;
animation: smoke_wisp_left 8s ease-in-out infinite;
animation-delay: -2s; /* Starts at a different phase */
z-index: 20;
}
/* SMOKE 2: Central Rune Pulse */
.smoke-2 {
position: absolute;
width: 20%;
height: 20%;
background: radial-gradient(circle, rgba(144 6 230 / 94%), rgb(145 9 241 / 88%) 85%);
top: 35%;
left: 40.5%;
animation: smoke_pulse_center 10s ease-in-out infinite;
border-radius: 50%;
z-index: 99;
}
/* SMOKE 3: Subtle Right Hand Swirl (Opposite) */
.smoke-3 {
position: absolute;
width: 20%; height: 20%;
background: radial-gradient(circle, rgba(144 6 230 / 94%) 0%, rgba(255, 255, 255, 0) 70%);
top: 25%; right: 5%;
animation: smoke_wisp_right 7s ease-in-out infinite;
animation-delay: -4s; /* Starts at a different phase */
z-index: 20;
}
/* ------------------------------------------------ */
/* 5. INFINITE SMOKE KEYFRAMES */
/* ------------------------------------------------ */
/* Left Wisp: Drifts slightly up and right, fading in/out */
@keyframes smoke_wisp_left {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
20% { opacity: 0.5; }
50% { transform: translate(15px, -15px) scale(1.1); opacity: 0.8; }
80% { opacity: 0.3; }
100% { transform: translate(25px, -25px) scale(0.9); opacity: 0; }
}
/* Right Wisp: Drifts slightly up and left (opposite), fading in/out */
@keyframes smoke_wisp_right {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
30% { opacity: 0.7; }
60% { transform: translate(-10px, -10px) scale(1.05); opacity: 0.6; }
90% { opacity: 0.2; }
100% { transform: translate(-20px, -20px) scale(1); opacity: 0; }
}
/* Center Pulse: Pulsates in opacity and scale, no drift */
@keyframes smoke_pulse_center {
0% { transform: scale(1); opacity: 0.2; }
50% { transform: scale(1.15); opacity: 0.5; }
100% { transform: scale(1); opacity: 0.2; }
}
/* ===============================================================
CINESCORE TIER EFFECTS
=============================================================== */
/* Base Card Styling */
.cinesist-card {
transition: all 0.3s ease-in-out;
border: 5px solid transparent;
box-shadow: 0 10px 30px transparent; border-radius: 8px;
position: relative;
overflow: hidden;
}
/* 9-10: LEGENDARY 🏆 */
.tier-legendary {
--tier-color: oklch(62.7% 0.194 149.214);
border-color: var(--tier-color);
}
.tier-legendary:hover {
box-shadow: 0 0 25px var(--tier-color);
box-shadow: 0 10px 30px var(--tier-color);
/* Add a subtle "shimmer" effect here */
}
.tier-legendary a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--flex-snarkive))
}
/* 7-8: CERTIFIED ✅ */
.tier-certified {
--tier-color: oklch(54.6% 0.245 262.881);
border-color: var(--tier-color);
}
.tier-certified:hover {
box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
box-shadow: 0 10px 30px var(--tier-color);
}
.tier-certified a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--flex-snarkive))
}
/* 5-6: REDACTED ⚠️ */
.tier-redacted {
--tier-color: oklch(85.2% 0.199 91.936);
border-color: var(--tier-color);
border-style: dashed; /* The "System Flaw" look */
}
.tier-redacted:hover {
box-shadow: 0 10px 30px var(--tier-color);
}
.tier-redacted a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--flex-snarkive))
}
/* 3-4: COMPROMISED ⛔ */
.tier-compromised {
--tier-color: oklch(64.6% 0.222 41.116);
border-image: repeating-linear-gradient(45deg, var(--tier-color), var(--tier-color) 10px, #000 10px, #000 20px) 5;
}
.tier-compromised:hover {
box-shadow: 0 10px 30px var(--tier-color);
}
.tier-compromised a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--flex-snarkive))
}
/* 1-2: BURN-IT 🔥 */
.tier-burnit {
--tier-color: oklch(57.7% 0.245 27.325);
border-color: var(--tier-color);
}
.tier-burnit:hover {
animation: flicker 0.1s infinite !important;
background: linear-gradient(0deg, rgba(255,0,0,0.2) 0%, transparent 100%);
box-shadow: 0 10px 30px var(--tier-color);
}
.tier-burnit a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--flex-snarkive))
}
@keyframes flicker {
0% { border-color: #ff0000; }
50% { border-color: #ff8000; }
100% { border-color: #ff0000; }
}
/* Tier: NR (Not Rated / Flex Snarkive) */
.tier-nr {
/* Uses your global flex variable */
--tier-color: var(--flex-snarkive);
border-color: var(--flex-snarkive);
border-style: double; /* Gives it a "double-encrypted" look */
opacity: 0.9;
}
.tier-nr:hover {
opacity: 1;
box-shadow: 0 0 15px var(--flex-snarkive);
/* A subtle pulse to indicate it's "Active" but unranked */
animation: nr-pulse 2s infinite ease-in-out !important;
}
@keyframes nr-pulse {
0% { border-color: var(--flex-snarkive); }
50% { border-color: rgba(128, 128, 128, 0.5); } /* Fades toward a neutral grey */
100% { border-color: var(--flex-snarkive); }
}
/* Ensure the Meta Badge for NR looks distinct */
.tier-nr .cinescore-badge {
background-color: var(--flex-snarkive);
letter-spacing: 1px;
text-transform: uppercase;
}
/* Apply colors to internal elements automatically */
.cinesist-card .cinescore-number { color: var(--tier-color); }
.cinesist-card .cinescore-badge { background-color: var(--tier-color); }
/* --- Cinepress 3.0: Rant Section Logic --- */
.cs-rants-wrapper {
padding: 0.5rem 0;
margin-top: 3rem;
/* Custom 25% Red / 75% Adaptive Border */
}
/* Force the Query Loop into a 3-column Horizontal Grid */
.cs-rants-grid .wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.cs-rants-card-inner {
padding: 0 !important;
}
/* --- Cinepress 3.0: Adaptive Intel Heading --- */
/* The Container Wrapper */
.cs-rants-header {
display: flex;
align-items: center;
/* Keeps the heading and "View All" on the same line */
justify-content: space-between;
width: 100%;
/* The Base Track: This stretches across the whole screen */
border-bottom: 3px solid var(--flex-decor-border);
margin-bottom: 2.5rem;
}
/* The Heading Logic */
.cs-rants-heading {
position: relative;
display: inline-flex !important;
/* Forces the block to shrink-wrap the text */
margin: 0 !important;
padding-bottom: 10px;
/* Space above the border */
color: var(--cinesist-red) !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 2px;
}
/* The Solid Red Bar (Adapts to text width) */
.cs-rants-heading::before {
content: '';
position: absolute;
bottom: -3px;
/* Sits on the container's border-bottom */
left: 0;
width: 100%;
/* MAGIC: Always matches the width of the heading text */
height: 3px;
background: var(--cinesist-red);
z-index: 5;
}
/* The Fade-Out (Fixed length at the end of the text) */
.cs-rants-heading::after {
content: '';
position: absolute;
bottom: -3px;
right: -100px;
/* Positions it just outside the right edge of the text */
width: 100px;
height: 3px;
background: linear-gradient(to right, var(--cinesist-red), transparent);
z-index: 4;
}
/* If you have a "View All" link on the right */
.cs-rants-header a.view-all {
font-size: 0.8rem;
font-weight: 800;
text-transform: uppercase;
color: var(--flex-text-secondary);
text-decoration: none;
transition: color 0.3s ease;
}
.cs-rants-header a.view-all:hover {
color: var(--cinesist-red);
}
/* The Grid Cards: Horizontal Polish */
.cs-rants-grid .wp-block-post {
display: flex;
flex-direction: column;
height: 100%;
/* Ensures all cards match height */
background: var(--flex-gray-2) !important;
border: 1px solid var(--flex-decor-border);
border-bottom: 4px solid var(--cinesist-red);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
}
/* Hover Effect: The "Red Alert" Glow */
.cs-rants-grid .wp-block-post:hover {
transform: translateY(-8px);
border-color: var(--cinesist-red);
box-shadow: 0 10px 30px rgba(229, 9, 20, 0.2);
}
/* Image Scanner Look */
.cs-rant-image img {
width: 100%;
height: 15rem;
/* ~240px */
object-fit: cover;
transition: all 0.5s ease;
}
.cs-rant-image img:hover {
border-bottom: 2px solid var(--cinesist-red);
}
.cs-rants-grid .wp-block-post:hover .cs-rant-image img {
border-bottom: 2px solid var(--cinesist-red);
transform: scale(1.05);
box-shadow: 0 0 20px var(--cinesist-red);
}
.cs-rants-grid .wp-block-post:hover::before .cs-rant-image img {
opacity: 1;
transform: rotate(-45deg) translateY(100%);
}
/* Title: High Intensity */
.cs-rant-title a {
color: var(--flex-text-title) !important;
font-size: 1.25rem !important;
font-weight: 900 !important;
text-transform: uppercase;
padding: 0.5rem 0.5rem 0.5rem !important;
display: block;
text-decoration: none;
}
.cs-rant-title a:hover {
color: var(--cinesist-red) !important;
}
/* Excerpt: Redacted Body Text */
.cs-rant-excerpt {
flex-grow: 1;
padding: 0.315rem 0.5rem !important;
font-size: 0.9rem !important;
line-height: 1.6;
color: var(--flex-text-primary);
border-top: 1px dashed var(--flex-decor-border);
opacity: 0.8;
}
.cs-rant-post-meta {
gap: var(--cs-spacing-xxs);
padding: 0.315rem;
}
.cs-rant-cal-icon {
padding: unset;
}
.cs-rant-date {
font-size: 0.8rem;
}
/* Mobile: Collapse to 1 Column */
@media (max-width: 768px) {
.cs-rants-grid .wp-block-post-template {
grid-template-columns: 1fr !important;
}
}
/* --- Cinepress 3.0: Global Intel Card & Header Framework --- */
/* 1. THE VARIABLE ENGINE */
.cs-intel-card-section-wrapper {
--accent: var(--flex-snarkive); /* Default to Snarkive Brand */
padding: 0.5rem 0;
}
/* Presets: Just add these classes to the wrapper in the editor */
.cs-intel-card-section-wrapper.is-rants, .p-wrap.is-rants {
--accent: var(--cinesist-red);
}
.cs-intel-card-section-wrapper.is-news, .p-wrap.is-news {
--accent: var(--cinesist-info);
}
.cs-intel-card-section-wrapper.is-gaming, .p-wrap.is-gaming {
--accent: var(--cinesist-gaming);
}
.cs-intel-card-section-wrapper.is-tv, .p-wrap.is-tv {
--accent: var(--cinesist-tv);
}
.cs-intel-card-section-wrapper.is-reviews, .p-wrap.is-reviews,
.cs-intel-card__inner.is-reviews {
/* --accent: var(--review-accent, var (--flex-snarkive)); */
}
/* --- Cinescore Color Injection System --- */
/* Fallback for all cards */
.is-review-card {
--cinescore-accent: var(--flex-snarkive);
}
/* Specific rank overrides */
.has-cinescore-legendary { --cinescore-accent: #50a735;
--cinescore-accent-60: #50a73599;
--cinescore-accent-40: #50a73566; }
.has-cinescore-solid { --cinescore-accent: #c7e811;
--cinescore-accent-60: #c7e81199;
--cinescore-accent-40: #c7e81166;}
.has-cinescore-redacted { --cinescore-accent: #ffde21;
--cinescore-accent-60: #ffde2199;
--cinescore-accent-40: #ffde2166;}
.has-cinescore-compromised { --cinescore-accent: #ff5612;
--cinescore-accent-60: #ff561299;
--cinescore-accent-40: #ff561266;}
.has-cinescore-burn { --cinescore-accent: #ff0d0d;
--cinescore-accent-60: #ff0d0d99;
--cinescore-accent-40: #ff0d0d66;}
.has-cinescore-nr {
--cinescore-accent: var(--flex-title-color);
border: 4px solid var(--flex-title-color);
border-radius: 5px;
box-shadow: unset;
}
.has-cinescore-nr {
border: 2px solid var(--cinescore-accent);
border-radius: 5px;
box-shadow: inset 0 0 15px rgba(80, 167, 53, 0.1);
}
/* Apply the Glow to elements inside */
.has-cinescore-legendary .is-review-card {
border: 1px solid var(--cinescore-accent);
box-shadow: inset 0 0 15px rgba(80, 167, 53, 0.1);
}
.cs-cinescore__card-value {
color: var(--cinescore-accent);
}
/* --- [END Cinescore Color Injection System] --- */
.cs-intel-card-section-wrapper.is-movies, .p-wrap.is-movies {
--accent: var(--cinesist-gold);
}
.cs-intel-card-section-wrapper.is-industry, .p-wrap.is-industry {
--accent: var(--cinesist-industry);
}
.cs-intel-card-section-wrapper.is-topic, .p-wrap.is-topic {
--accent: var(--flex-snarkive);
}
/* 2. THE ADAPTIVE HEADER */
.cs-intel-card-section-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
/* border-bottom: 3px solid var(--flex-decor-border); */
margin-bottom: 1rem !important;
position: relative;
}
.cs-intel-card-section-heading {
position: relative;
display: inline-flex !important;
margin: 0 !important;
padding-bottom: 10px;
color: var(--flex-text-title) !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 2px;
font-style: normal;
}
/* 3. THE INTEL GRID & CARDS */
.cs-intel-card-grid .wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 1.5rem !important;
list-style: none !important;
padding: 0 !important;
}
.cs-intel-card-inner, .cs-intel-card__inner {
display: flex;
flex-direction: column;
height: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
padding: 0 !important;
/* Resetting the inline padding */
}
/* Hover State: The Alert Mode */
.cs-intel-card-inner:hover,
.cs-intel-card__inner:hover {
/* transform: translateY(-8px); */
/* border-color: var(--accent); */
/* box-shadow: 0 10px 30px var(--accent); */
/* Now glows in the accent color! */
}
/* 4. ELEMENT STYLING */
.cs-intel-card-image img {
width: 100%;
height: 15rem;
object-fit: cover;
}
.cs-intel-card-inner:hover .cs-intel-card-image img {
transform: scale(1.05);
border-bottom: 2px solid var(--accent);
}
.cs-intel-card-title a {
color: var(--flex-text-title) !important;
font-size: 1.15rem !important;
font-weight: 900 !important;
text-transform: uppercase;
display: block;
text-decoration: none;
transition: color 0.3s ease;
}
.cs-intel-card-title a {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-intel-card-title {
padding: 0.5rem;
margin-block-end: 0 !important;
}
.cs-intel-card-excerpt {
flex-grow: 0;
font-size: 0.85rem !important;
line-height: 1.5;
color: var(--flex-text-primary);
border-top: 1px dashed var(--flex-decor-border);
opacity: 0.8;
margin-block-end: 0 !important;
overflow: hidden;
}
.cs-intel-card-excerpt p {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
margin-block-end: 0 !important;
min-height: 2.5rem;
}
/* Meta Data & Calendar Icon */
.cs-intel-card-post-meta {
padding: 0.5rem !important;
/* display: flex; */
align-items: center;
gap: 0.5rem;
background: rgba(0, 0, 0, 0.05);
margin-block-end: 0 !important;
}
.cs-intel-card-cal-icon {
margin-block-end: 0 !important;
color: var(--review-accent);
fill: var(--review-accent);
}
.cs-intel-card-cal-icon svg {
width: 0.85rem;
height: 0.85rem;
color: var(--review-accent, var(--accent)) !important;
fill: var(--review-accent);
/* Calendar icon matches section color */
}
.cs-intel-card-date {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
color: var(--flex-text-secondary);
}
/* Mobile: Collapse */
@media (max-width: 1024px) {
.cs-intel-card-grid .wp-block-post-template {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 768px) {
.cs-intel-card-grid .wp-block-post-template {
grid-template-columns: 1fr !important;
}
}
/* --- Cinepress 3.0: Review Intel Card Fix --- */
/* 1. Correcting the Wrapper/Grid Relationship */
.cs-intel-card-section-wrapper .is-reviews .cs-intel-card {
background: var(--flex-gray-2) !important;
margin-bottom: 0 !important;
/* Force spacing if grid-gap fails */
position: relative;
padding-top: 4px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
/* DYNAMIC COLOR */
}
h2.entry-title a:hover,
h3.entry-title a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--review-accent, var(--flex-snarkive)) !important;
}
/* 3. The Meta Badge: Slanted HUD */
.cs-review-meta-badge, .cs-cinescore__card-meta-badge {
position: absolute;
top: 10px;
left: 0;
/* Slight offset for that disruptive look */
/* background: var(--review-accent, var(--flex-snarkive)); */
color: #e5e5e5 !important;
padding: 2px 10px !important;
font-size: 0.8rem !important;
font-weight: 900 !important;
text-transform: uppercase;
z-index: 15;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
p.cs-review-meta-badge {
margin: 0 !important;
}
/* --- Cinepress 3.0: Review HUD --- */
/* 1. Main Wrapper: Change to Row and align items center */
.cs-review-hud-stats {
display: flex !important;
flex-direction: row !important;
/* Forces one line */
flex-wrap: wrap;
/* Allows the long Verdict to drop to a second line if needed */
align-items: center !important;
gap: 12px !important;
padding: 0.5rem;
}
/* 2. Cinemeter Container: Kill the 100% width so the score can sit next to it */
.cs-card-cinemeter, .cs-cinescore__card-cinemeter {
display: flex;
align-items: center;
gap: 8px;
width: auto !important;
/* Key fix: allows score to sit next to it */
margin-bottom: 0 !important;
/* Remove bottom margin to keep centered with score */
}
/* 3. The Bars: Ensure they have a base width since the parent is now 'auto' -Updated 1/31*/
.cs-meter-bars, .cs-cinescore__card-cinemeter-bars {
display: flex;
gap: 1px;
border: solid 1px #888888ab;
}
/* 4. The Score: Remove bottom margin from paragraph if WP added one */
.cs-review-meta-score {
margin: 0 !important;
display: flex;
align-items: center;
}
p.cs-review-meta-score {
margin: 0 !important;
}
/* 5. The Verdict: Force this to a new line so the HUD stays clean */
.cs-review-meta-verdict {
width: 100%;
/* Forces the long text to the next line */
margin: 5px 0 0 0 !important;
border-top: 1px dashed var(--flex-decor-border);
padding-top: 5px;
font-size: var(--cs-font-size-caption);
}
p.cs-review-meta-verdict {
margin: 0 !important;
}
/* Adding Line Clamp to uniform Cards */
.cs-review-meta-verdict {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
line-clamp: 1;
display: -webkit-box;
overflow: hidden;
}
.cs-hud-row, .cs-cinescore__card-row {
display: flex;
align-items: center;
gap: 12px;
}
/* 4. HUD Stats (Score & Verdict) */
.cs-review-hud-stats, .cs-cinescore__card-stats {
display: flex;
align-items: center;
gap: 15px;
margin: 0 !important;
border-top: 1px dashed var(--flex-decor-border);
border-bottom: 1px dashed var(--flex-decor-border);
}
.cs-hud-value, .cs-cinescore__card-value {
font-size: 1.4rem;
font-weight: 900;
color: var(--review-accent);
line-height: 1;
}
.cs-hud-verdict, .cs-cinescore__card-verdict {
-webkit-line-clamp: 1;
/* Number of lines to show before truncation */
line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
font-size: 0.7rem;
text-transform: uppercase;
line-height: 1.2;
color: var(--flex-text-secondary);
overflow: hidden;
text-overflow: ellipsis;
/* Adds the '...' at the end */
}
/* --- Cinepress 3.0: Card Cinemeter HUD --- */
.cs-meter-icon {
color: var(--review-accent);
display: none;
align-items: center;
line-height: 1;
opacity: 0.8;
font-size: 1.2rem;
}
.cs-meter-bars {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 3px;
/* Clean gap between segments */
width: 100px;
/* Fixed width for the whole track */
height: 12px;
/* Fixed height for the track */
border: 1px solid rgba(136, 136, 136, 0.4);
padding: 2px;
/* Inner padding for the "boxed" look */
background: rgba(0, 0, 0, 0.2);
}
.cs-meter-bars .cs-bar {
display: block !important;
flex: 1;
/* Automatically divides the 80px into 5 equal parts */
height: 100% !important;
/* Fills the 12px track height */
background-color: var(--flex-gray-15);
/* Inactive bar color */
border-radius: 1px;
transition: all 0.3s ease;
}
.cs-meter-bars .cs-bar:not(.is-active) {
background-color: var(--flex-gray-15);
}
/* Ensure the wrapper doesn't force a block layout */
.cs-review-meter-wrapper {
display: contents;
/* Allows children to participate in the parent flex row */
}
/* --- DNA Active States --- */
/* We target the .is-active class added by the PHP */
.cs-bar.is-active.cs-bar-1 {
background-color: #ff0d0d !important;
box-shadow: 0 0 8px rgba(255, 13, 13, 0.6);
}
.cs-bar.is-active.cs-bar-2 {
background-color: #ff5612 !important;
box-shadow: 0 0 8px rgba(255, 86, 18, 0.6);
}
.cs-bar.is-active.cs-bar-3 {
background-color: #ffde21 !important;
box-shadow: 0 0 8px rgba(255, 222, 33, 0.6);
}
.cs-bar.is-active.cs-bar-4 {
background-color: #c7e811 !important;
box-shadow: 0 0 8px rgba(199, 232, 17, 0.6);
}
.cs-bar.is-active.cs-bar-5 {
background-color: #50a735 !important;
box-shadow: 0 0 8px rgba(80, 167, 53, 0.6);
}
/* Tablet Optimization: Drop to 2 columns */
@media (max-width: 1024px) {
.cs-intel-card-section-wrapper.is-reviews .wp-block-post-template {
grid-template-columns: repeat(2, 1fr) !important;
}
}
/* Mobile Optimization: Single Column Dossier */
@media (max-width: 768px) {
.cs-intel-card-section-wrapper.is-reviews .wp-block-post-template {
grid-template-columns: 1fr !important;
}
}
/* --- Cinepress 3.0: CineScore Analytics Hub --- */
.cs-analytics-hub {
background: var(--flex-header-bg);
/* Adaptive Terminal Background */
border-top: 2px solid var(--flex-decor-border);
border-bottom: 2px solid var(--flex-decor-border);
padding: 3rem 0;
margin: 4rem 0;
}
/* 1. The Score Module */
.cs-score-module {
text-align: center;
border-right: 1px dashed var(--flex-decor-border);
}
.cs-score-module h2 {
font-size: 5rem !important;
font-weight: 900;
color: var(--cinesist-gold);
line-height: 1;
margin: 0 !important;
text-shadow: 0 0 15px var(--cinesist-gold);
}
/* 2. The Gauges (The Rating Bars) */
.cs-gauge-container {
padding: 0 2rem;
}
.cs-gauge-row {
margin-bottom: 1.5rem;
}
.cs-gauge-label {
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
color: var(--flex-text-secondary);
display: flex;
justify-content: space-between;
}
/* The Progress Bars */
.cs-progress-bar {
height: 8px;
background: var(--flex-gray-2);
border-radius: 4px;
margin-top: 5px;
position: relative;
overflow: hidden;
}
.cs-progress-fill {
height: 100%;
background: linear-gradient(to right, var(--cinebar-yellow), var(--cinebar-green));
width: 85%;
/* This is what you change for each review */
}
/* 3. The Verdict Module */
.cs-verdict-module {
border-left: 1px dashed var(--flex-decor-border);
padding-left: 2rem;
}
.cs-verdict-module h3 {
color: var(--cinesist-info);
font-size: 0.9rem !important;
text-transform: uppercase;
letter-spacing: 1px;
}
/* --- Cinepress 3.0: Cinescore DNA Banner Skin --- */
.cs-dna-banner-wrapper {
padding: var(--cs-spacing-md) !important;
border-top: 2px solid var(--flex-decor-border);
border-bottom: 2px solid var(--flex-decor-border);
position: relative;
overflow: hidden;
background-color: var(--flex-gray-2) !important;
}
.cs-dna-banner {
display: flex;
}
.cs-dna-banner-hook-col {
display: flex;
flex-direction: column;
justify-content: space-around;
}
/* 1. Logo Adaptive Logic */
/* --- Cinepress 3.0: High-Precision Logo Toggle --- */
/* 1. Base State (Light Mode) */
[data-theme="default"] .cs-dna-banner-lm-logo {
display: block !important;
}
[data-theme="dark"] .cs-dna-banner-lm-logo {
display: none !important;
}
/* 2. Tactical State (Dark Mode Trigger) */
/* This matches your root [data-color-mode*="dark"] exactly */
[data-theme="default"] .cs-dna-banner-dm-logo {
display: none !important;
}
[data-theme="dark"] .cs-dna-banner-dm-logo {
display: block !important;
}
/* 3. Global CSS Variable Cleanup */
/* Let's make sure the images stay sharp during the transition */
.cs-dna-banner-lm-logo img,
.cs-dna-banner-dm-logo img {
max-width: 320px !important;
height: auto;
transition: opacity 0.3s ease-in-out;
}
/* 2. Typography Impact */
.cs-dna-banner-mission {
font-size: var(--cs-font-size-h2) !important;
font-weight: 900 !important;
line-height: 1.1 !important;
max-width: 800px;
margin-bottom: 1rem !important;
}
.cs-dna-banner-tagline {
font-family: var(--cs-font-mono, monospace);
font-size: var(--cs-font-size-h4) !important;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.1rem !important;
color: var(--flex-snarkive);
}
/* 3. The DNA Info-Box (Floating Terminal) */
.cs-dna-infobox {
padding: 2.5rem !important;
border: 1px solid var(--flex-decor-border);
border-radius: 4px;
box-shadow: var(--shadow-1);
position: relative;
background-color: var(--flex-bg-color);
}
.cs-dna-info-heading {
text-align: center;
font-size: 1rem !important;
font-weight: 900 !important;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1.5rem !important;
}
/* 4. The Pulsing Rating Bar */
.cs-dna-rating-bar {
gap: 4px !important;
margin-bottom: 2rem !important;
}
.cs-dna-rating-bar>div {
height: 8px;
flex-grow: 1;
border-radius: 2px;
opacity: 0.8;
transition: all 0.3s ease;
}
/* Animation: Subtle 'Scanning' pulse across the bar */
.cs-dna-rating-bar:hover>div {
opacity: 1;
box-shadow: 0 0 10px currentColor;
transform: scaleY(1.2);
}
/* 5. The List Breakdown */
.cs-dna-infobox-breakdown {
margin-bottom: 2rem !important;
padding-left: 0 !important;
list-style: none !important;
}
.cs-dna-infobox-item {
font-size: 0.85rem !important;
line-height: 1.4;
margin-bottom: 12px !important;
position: relative;
padding-left: 20px;
}
.cs-dna-infobox-item::before {
content: '→';
position: absolute;
left: 0;
color: var(--flex-snarkive);
font-weight: 900;
}
/* 6. The Button (Snarkive Glow) */
.cs-dna-infobox-button a {
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease !important;
border: none !important;
}
.cs-dna-infobox-button a:hover {
transform: scale(1.05);
box-shadow: 0 0 20px var(--flex-snarkive);
filter: brightness(1.2);
}
/* --- Cinepress 3.0: Review Grid & Card Skin --- */
/* 1. THE Section HEADER: Intelligence Branding */
.cs-review-grid .cs-intel-card-section-header {
--accent: var(--cinesist-gold);
/* Reviews default to Gold Intelligence */
margin-bottom: 3rem;
}
/* 1. THE GRID: Targeting the UL correctly */
.cs-review-query ul.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 2.5rem !important;
list-style: none !important;
padding: 0 !important;
background: transparent !important;
/* Remove that solid block background */
border: none !important;
}
/* 2. THE CARD: Targeting the LI specifically */
.cs-review-query li.wp-block-post {
background: var(--flex-gray-2) !important;
border: 1px solid var(--flex-decor-border);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
margin: 0 !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
--card-accent: var(--cinesist-gold);
}
.cs-review-card {
background: var(--flex-gray-2) !important;
border: 1px solid var(--flex-decor-border);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
/* Makes all cards in a row equal height */
margin: 0 !important;
/* Resetting any weird theme margins */
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
/* Default Accent - ACF will override this later */
--card-accent: var(--cinesist-gold);
}
/* THE CINEMETER: The top glowing bar */
.cs-review-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: var(--card-accent);
z-index: 30;
box-shadow: 0 0 15px var(--card-accent);
}
/* HOVER EFFECT: The "Identity" Match */
.cs-review-card:hover {
border-color: var(--card-accent) !important;
transform: translateY(-10px) scale(1.02);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
0 0 20px var(--card-accent);
}
/* THE CINEMETER: Top Accent Bar on the LI */
.cs-review-query li.wp-block-post::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--card-accent);
z-index: 20;
box-shadow: 0 0 12px var(--card-accent);
}
/* Hover effect on the LI */
.cs-review-query li.wp-block-post:hover {
transform: translateY(-10px);
border-color: var(--card-accent);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}
/* 3. VISUAL WRAPPER: Poster & Badge */
.cs-card-visual-wrapper {
position: relative;
height: 240px;
overflow: hidden;
margin: 0 !important;
}
.cs-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(30%) brightness(0.8);
transition:
transform 0.6s ease,
filter 0.6s ease;
}
.cs-review-card:hover .cs-card-image img {
filter: grayscale(0%) brightness(1);
transform: scale(1.08);
}
/* THE META BADGE: Score Overlay */
.cs-card-meta-badge {
background: var(--card-accent) !important;
color: #000 !important;
box-shadow: 0 0 10px var(--card-accent);
font-family: var(--cs-font-mono, monospace);
font-weight: 900;
text-transform: uppercase;
/* Tactical Scanline look */
background-image: linear-gradient(rgba(0, 0, 0, 0.1) 50%, transparent 50%);
background-size: 100% 2px;
}
/* 4. CONTENT AREA: Intel & Metadata */
.cs-card-content {
padding: 1.5rem !important;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* --- Cinepress 3.0: Card Subject Thumbnail Skin --- */
.cs-card-subject-thumb {
width: 45px;
height: 60px;
/* Poster Aspect Ratio */
background: var(--flex-gray-3);
border: 1px solid var(--card-accent);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
margin-bottom: 1rem !important;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.cs-subject-mini-poster {
width: 100%;
height: 100%;
object-fit: cover;
}
.cs-subject-placeholder {
width: 100%;
height: 100%;
background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.05) 10px, rgba(255, 255, 255, 0.05) 20px);
}
.cs-card-title {
margin: 0 0 0.75rem 0 !important;
}
.cs-card-title a {
font-size: 1.35rem !important;
font-weight: 900 !important;
line-height: 1.2 !important;
text-transform: uppercase;
color: var(--flex-text-title) !important;
text-decoration: none !important;
transition: color 0.3s ease;
}
.cs-card-title a:hover {
color: var(--card-accent) !important;
}
.cs-review-card:hover .cs-card-title a {
color: var(--card-accent) !important;
}
.cs-card-excerpt {
font-size: 0.9rem !important;
line-height: 1.5 !important;
color: var(--flex-text-secondary);
margin-top: auto !important;
/* Pushes excerpt to bottom */
padding-top: 1rem;
border-top: 1px dashed var(--flex-decor-border);
}
/* 5. POST DATE: The Timestamp */
.cs-review-card .wp-block-post-date {
font-family: var(--cs-font-mono, monospace);
font-size: 0.7rem !important;
color: var(--card-accent);
opacity: 0.8;
padding: 0 1.5rem 1.5rem !important;
}
/* --- Cinepress 3.0: Video Section (Hero Clone) --- */
.cs-video-hub-wrapper {
padding: 0;
margin: 4rem 0;
}
/* 1. THE MAIN SPOTLIGHT (Left Side) */
.cs-video-spotlight .wp-block-post {
position: relative;
overflow: hidden;
border-radius: 0.5rem;
background: #000;
}
/* The Feature Image (matching your 35rem height) */
.cs-video-spotlight-thumbnail {
position: relative;
margin: 0 !important;
height: 35rem;
/* Sync with Hero Main */
}
.cs-video-spotlight-thumbnail img {
height: 100% !important;
width: 100% !important;
object-fit: cover;
filter: brightness(0.7);
transition: filter 0.5s ease;
}
/* Central Play Button Overlay */
.cs-video-spotlight-icon {
font-size: 2rem;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 25;
pointer-events: none;
opacity: 0.8;
}
.cs-video-spotlight:hover .cs-video-spotlight-icon {
filter: drop-shadow(0 0 20px var(--flex-snarkive));
}
.cs-video-spotlight .wp-block-post:hover img {
filter: brightness(0.9);
}
/* Title Styling (Overlay at bottom) */
.cs-video-spotlight-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2rem 1.5rem 1rem !important;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, transparent 100%);
z-index: 22;
margin: 0 !important;
}
.cs-video-spotlight-title a {
color: #fff !important;
font-size: var(--cs-font-size-h2) !important;
font-weight: 900;
text-transform: uppercase;
text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
}
.cs-video-spotlight-title a:hover {
text-decoration-color: var(--flex-snarkive) !important;
}
/* 2. THE QUEUE SIDEBAR (Right Side) */
.cs-queue-item {
padding-top: 0 !important;
}
.cs-video-queue ul {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
}
.cs-video-queue .wp-block-post {
display: flex;
gap: 1rem;
align-items: center;
background: var(--flex-gray-2);
padding: 0.75rem;
border-bottom: 1px solid var(--flex-decor-border);
border-left: 3px solid var(--flex-snarkive-50);
transition: all 0.3s ease;
position: relative;
}
.cs-video-queue .wp-block-post:hover {
border-left-color: var(--flex-snarkive-90);
background: var(--flex-snarkive-50);
}
/* Sidebar Thumbnails (matching your 6.25rem Hero logic) */
.cs-queue-item-thumbnail {
flex: 0 0 6.25rem;
height: 6.25rem;
margin: 0 !important;
position: relative;
}
.cs-queue-item-thumbnail img {
width: 100%;
height: 100%;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 0.25rem;
}
/* Small Play Icon for Sidebar */
.cs-queue-item-icon {
position: absolute !important;
top: 50% !important;
left: 3rem !important;
/* Centered over the 6rem thumbnail */
transform: translate(-50%, -50%) scale(0.4) !important;
z-index: 30;
opacity: 0.8;
}
.cs-queue-item-title {
font-size: 0.95rem !important;
font-weight: 700;
line-height: 1.3;
}
.cs-queue-item-title a {
color: var(--flex-text-title) !important;
text-decoration: none;
}
/* --- 11 B. Cinescore DNA --- */
/* --- Cinepress 3.0: Cinescore Protocol Skin --- */
.is-danger {
border: 5px dashed #8b0000;
/* Deep blood red */
animation: danger-flash 0.8s step-end infinite;
}
@keyframes danger-flash {
50% {
border-color: transparent;
}
}
.is-warning {
border: 12px solid transparent;
border-image: repeating-linear-gradient(-45deg, #000, #000 15px, #ffb101 15px, #ffb101 30px) 12;
transition:
transform 0.3s ease,
filter 0.3s ease;
}
/* Interactive Hover Effect */
.is-warning:hover {
transform: scale(1.02);
/* Slight pop out */
filter: drop-shadow(0 0 10px rgba(255, 177, 1, 0.7));
/* Glowing warning */
cursor: help;
/* Changes cursor to a question mark/help icon */
}
.is-safe {
border: 4px solid #bdfcc9;
/* Soft mint green */
border-radius: 20px;
background: white;
padding: 20px;
box-shadow: 0 0 15px rgba(189, 252, 201, 0.5);
transition: all 0.5s ease;
animation: safe-breath 6s infinite ease-in-out;
}
@keyframes safe-breath {
0%,
100% {
box-shadow: 0 0 10px rgba(189, 252, 201, 0.4);
}
50% {
box-shadow: 0 0 25px rgba(189, 252, 201, 0.8);
}
}
/* Interactive Hover sanctuary effect */
.is-safe:hover {
transform: translateY(-5px);
/* Gentle float */
cursor: default;
/* Reassuring standard cursor */
border-color: #399953;
/* Deepens to a lush green on focus */
}
.cinescore-dna {
line-height: 1.6;
color: var(--flex-text-primary);
}
/* The Parameter Table: "Diagnostic Scanner" */
.cs-cinescore-parameter-table table {
border-collapse: separate;
border-spacing: 0 8px;
border: none !important;
}
.cs-cinescore-parameter-table thead tr {
background: var(--flex-snarkive-90);
color: var(--flex-text-title);
text-transform: uppercase;
letter-spacing: 2px;
}
.cs-cinescore-parameter-table tbody tr {
background: var(--flex-gray-2);
transition:
transform 0.2s ease,
background 0.2s ease;
}
.cs-cinescore-parameter-table tbody tr:hover {
transform: scale(1.02);
background: var(--flex-gray-3);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.cs-cinescore-parameter-table td {
padding: 1.25rem !important;
border: none !important;
}
/* The Scoreboard: "System Gauges" */
.cs-cinescore-scoreboard {
font-size: 1rem;
}
.cs-cinescore-scoreboard .wp-block-column {
border-radius: 4px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.cs-cinescore-scoreboard .wp-block-column:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
filter: brightness(1.1);
}
/* Adding a "Glow" line to the top of the scoreboard blocks */
.cs-cinescore-scoreboard .wp-block-column::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: rgba(255, 255, 255, 0.3);
}
/* --- Cinepress 3.0: Title Spotlight Pattern --- */
.cs-title-spotlight-wrapper {
border: 2px solid var(--flex-decor-border);
margin: 3rem 0;
padding: 2rem !important;
position: relative;
box-shadow: inset 0 0 50px #000;
}
/* The HUD Score (Left) */
.cs-spotlight-score-col {
text-align: center;
border-right: 1px dashed var(--flex-decor-border);
}
.cs-spotlight-score-col h2 {
font-size: 6rem !important;
font-weight: 900;
color: #ff5612;
/* Compromised Orange */
line-height: 1;
margin: 0 !important;
text-shadow: 0 0 20px rgba(255, 86, 18, 0.5);
}
.cs-spotlight-score-col p {
letter-spacing: 4px;
font-weight: 800;
text-transform: uppercase;
color: #ff5612;
}
/* The Intel Diagnostic (Center) */
.cs-spotlight-intel-col {
padding: 0 2rem !important;
}
.cs-spotlight-intel-col h3 {
font-family: var(--cs-font-mono, monospace);
color: var(--cinesist-gold);
text-transform: uppercase;
margin-bottom: 1rem !important;
}
/* The Verdict (Right) */
.cs-spotlight-verdict-col {
border-left: 1px dashed var(--flex-decor-border);
padding-left: 2rem !important;
display: flex;
flex-direction: column;
justify-content: center;
}
.cs-spotlight-verdict-col p {
font-size: 0.7rem;
color: var(--flex-text-secondary);
margin-bottom: 5px !important;
}
.cs-spotlight-verdict-col h4 {
color: #ff0d0d;
/* Red Alert */
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1.5rem !important;
}
/* The Button - "Authorization Required" */
.cs-spotlight-verdict-col .wp-block-button__link {
background: transparent !important;
border: 1px solid var(--flex-decor-border) !important;
color: var(--flex-text-title) !important;
font-size: 0.7rem !important;
text-transform: uppercase;
font-weight: 700;
}
.cs-spotlight-verdict-col .wp-block-button__link:hover {
background: var(--cinesist-gold) !important;
color: #000 !important;
border-color: var(--cinesist-gold) !important;
}
/* The Meta Breakdowns: "Intelligence Dossiers" */
.cs-cinescore-meta-breakdown {
background: var(--flex-gray-2);
padding: 2rem !important;
list-style: none !important;
margin-bottom: 2rem !important;
}
.cs-cinescore-meta-breakdown li:first-child {
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 1rem;
}
.cs-cinescore-meta-breakdown li:nth-child(1) {
font-size: 1.5rem;
font-weight: 900;
text-transform: uppercase;
margin-bottom: 1rem;
}
.cs-cinescore-meta-breakdown li:nth-child(2) {
font-style: italic;
opacity: 0.9;
}
/* --- Cinepress 3.0: Oath & Core Terminal Skin --- */
/* The Oath Columns: From Pastels to Protocols */
.cs-snark-oath-one,
.cs-snark-oath-two,
.cs-snark-oath-three {
background-color: var(--flex-gray-2) !important;
/* Neutralize the pastels */
border: 1px solid var(--flex-decor-border);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
/* Hover Effect: "Focusing the Signal" */
.cs-snark-oath-one:hover,
.cs-snark-oath-two:hover,
.cs-snark-oath-three:hover {
transform: translateY(-5px);
border-color: var(--cinesist-gold);
box-shadow: 0 10px 30px rgba(255, 222, 33, 0.1);
}
/* Color Accent Bars for the Oath Nodes */
.cs-snark-oath-one::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--cinesist-gold);
}
.cs-snark-oath-two::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--flex-snarkive);
}
.cs-snark-oath-three::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--cinesist-info);
}
.cs-snark-oath-one h2,
.cs-snark-oath-two h2,
.cs-snark-oath-three h2 {
color: var(--flex-text-title) !important;
text-transform: uppercase;
letter-spacing: 2px;
}
/* Cinefreaks Core: The Signal Reception Hub */
.cs-cinefreaks-core-section {
background: var(--flex-header-bg);
border: 2px solid var(--flex-decor-border);
padding: 3rem !important;
margin: 4rem 0;
position: relative;
border-left: 8px solid var(--flex-snarkive);
/* Snarkive Purple Anchor */
}
/* Contact List: "Mastermind Direct Line" */
.cs-contact-masterminds {
list-style: none !important;
padding-left: 0 !important;
}
.cs-contact-masterminds li {
padding: 1rem;
background: var(--flex-gray-2);
margin-bottom: 0.5rem;
border-left: 3px solid var(--cinesist-gold);
font-family: var(--cs-font-mono, monospace);
}
.wp-container-core-columns-is-layout-d2da2050 .wp-block-column {
border: 1px solid var(--flex-decor-border);
transition: background 0.3s ease;
}
.wp-container-core-columns-is-layout-d2da2050 .wp-block-column:hover {
background-color: var(--flex-gray-3) !important;
}
/*
-----------------
12 - Footer
-----------------
*/
/* --- Style Footer Top Section --- */
.rb-section.fw-widget.top-footer.edge-padding {
margin-top: 20px;
padding-top: 10px;
background-color: var(--flex-gray-1);
border-top-width: 2px;
border-top-style: groove;
}
#footer {
background: var(--flex-bg-color);
}
/* --- Cinesist Terminal Footer: The Skin --- */
/* Root Container Padding & Background */
.cs-terminal-footer {
--rb-width: 1520px;
background: var(--nav-bg) !important;
background: -webkit-linear-gradient(left, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%);
background: linear-gradient(to right, var(--nav-bg-from) 0%, var(--nav-bg-to) 100%) !important;
box-shadow: 0 4px 30px var(--shadow-1);
margin-block-start: 0 !important;
padding-block-start: 2rem;
/* padding-top: 2rem; */
border-top: 4px solid var(--flex-snarkive-50);
box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
grid-column: 1 / -1;
}
.cs-terminal-footer-wrap {
padding: 1rem;
/* Color shifts based on Blocksy root variables */
color: var(--body-fcolor);
font-family: var(--cs-font-primary);
}
/* 1. The Vanguard: Mascots & Newsletter */
.cs-footer-vanguard {
display: grid;
grid-template-columns: 1.2fr 1.5fr 1.2fr;
/* 3 Columns: Start, Center, End */
align-items: center;
gap: 2.5rem;
padding: 0;
margin-bottom: 3rem;
}
.vanguard-col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Speech Bubble */
.cs-speech-bubble {
position: relative;
font-size: 18px;
line-height: 24px;
width: 300px;
background: #e5e5e5;
border-radius: 40px;
padding: 24px;
text-align: center;
color: #000;
}
/* Speech Bubble Pointer (The "Tail") */
.cs-speech-bubble::before,
.cs-speech-bubble::after {
content: '';
width: 0px;
height: 0px;
position: absolute;
border-left: 24px solid #e5e5e5;
border-right: 12px solid transparent;
border-top: 12px solid #e5e5e5;
border-bottom: 20px solid transparent;
right: 4.5rem;
bottom: -24px;
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.transition-colors {
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
/* Status Text & Color Wraps */
.cs-status-text {
font-family: var(--cs-font-primary);
font-weight: 900;
font-size: 0.7rem;
letter-spacing: 1px;
margin-top: 1rem;
text-transform: uppercase;
}
.status-purple {
color: var(--snarkive-purple-accent);
font-weight: 800;
}
/* Typing Cursor Effect */
.status-purple:after,
.status-orange:after {
content: '_';
animation: cursor-blink 1s infinite;
}
@keyframes cursor-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.status-orange {
color: var(--cinefox-orange);
font-weight: 800;
}
/* High-Intensity Glitch for Cipher Status */
.status-orange.is-glitching {
position: relative;
display: inline-block;
animation: status-shake 0.3s infinite;
text-shadow:
2px 0 var(--cinesist-red),
-2px 0 var(--snarkive-purple-accent);
}
@keyframes status-shake {
0% {
transform: translate(0);
}
25% {
transform: translate(1px, -1px);
}
50% {
transform: translate(-1px, 1px);
}
75% {
transform: translate(1px, 1px);
}
100% {
transform: translate(0);
}
}
/* Ensure this variable exists */
/* Cinefox Glow (Alpha-aware) */
.cs-cinefox-footer-logo img {
width: 10rem !important;
/* Increased from 125px (~7.8rem) */
height: auto;
filter: drop-shadow(0 0 0.93rem rgba(226, 179, 4, 0.6));
transition:
filter 0.3s ease,
transform 0.3s ease;
}
.cs-cinefox-footer-logo img:hover {
filter: drop-shadow(0 0 1.56rem rgba(226, 179, 4, 0.9));
transform: scale(1.05);
}
/* Cipher Glow (Alpha-aware) */
.cs-cipher-footer-logo img {
width: 15rem !important;
/* Significant increase for the Disruptor */
height: auto;
filter: drop-shadow(0 0 0.93rem rgba(121, 44, 133, 0.5));
transition:
filter 0.3s ease,
transform 0.3s ease;
}
.cs-cipher-footer-logo img:hover {
filter: drop-shadow(0 0 1.56rem rgba(121, 44, 133, 0.8));
animation: glitch-mini 0.2s infinite;
transform: scale(1.05);
}
/* Middle Column Styling */
.terminal-header {
padding: 0;
margin: 0;
}
.cs-resistance-title {
color: var(--cinesist-red);
font-weight: 900;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.cs-resistance-sub {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 1.5rem;
}
/* Responsive Fix */
@media (max-width: 1024px) {
.cs-footer-vanguard {
grid-template-columns: 1fr;
gap: 4rem;
}
}
/* --- Cinesist Terminal Form: Clean Revamp --- */
/* Reset the MailPoet container */
#mailpoet_form_1 {
width: 100% !important;
max-width: 31.25rem !important;
/* 500px */
margin: 0 auto !important;
background: transparent !important;
border-radius: 0 !important;
}
#mailpoet_form_1 form.mailpoet_form {
display: flex !important;
flex-direction: row !important;
align-items: stretch !important;
gap: 0 !important;
/* The Magic: Removes the gap */
padding: 0 !important;
}
/* Style the Paragraph wrappers MailPoet injects */
#mailpoet_form_1 .mailpoet_paragraph {
margin-bottom: 0 !important;
flex: 1;
/* Makes the email field expand */
}
#mailpoet_form_1 .mailpoet_paragraph.cs-footer-newsletter-button {
flex: 0 0 auto !important;
/* Keeps the button tight */
}
/* The Email Input Field */
#mailpoet_form_1 .mailpoet_text {
width: 100% !important;
height: 3.125rem !important;
/* ~50px */
background: var(--cs-spy) !important;
border: 1px solid var(--flex-snarkive-90) !important;
/* Snarkive Purple */
border-right: none !important;
/* Seam */
border-radius: 0.25rem 0 0 0.25rem !important;
color: var(--white-spy) !important;
padding: 0 1rem !important;
font-family: var(--cs-font-primary) !important;
outline: none !important;
}
#mailpoet_form_1 .mailpoet_text:focus {
border-color: var(--snarkive-purple-accent) !important;
box-shadow: inset 0 0 5px rgba(121, 44, 133, 0.2);
}
/* The Authorize Submit Button */
#mailpoet_form_1 .mailpoet_submit {
height: 3.125rem !important;
background-color: var(--cinesist-red) !important;
color: #fff !important;
border: 1px solid var(--cinesist-red) !important;
border-radius: 0 0.25rem 0.25rem 0 !important;
padding: 0 1.5rem !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
}
#mailpoet_form_1 .mailpoet_submit:hover {
background-color: var(--flex-snarkive) !important;
border-color: var(--flex-snarkive-50) !important;
transform: none !important;
}
/* Handle the "Loading" animation positioning */
#mailpoet_form_1 .mailpoet_form_loading {
position: absolute;
bottom: -1.5rem;
left: 50%;
transform: translateX(-50%);
}
/* Mobile: Stack them when space is tight */
@media (max-width: 37.5rem) {
/* 600px */
#mailpoet_form_1 form.mailpoet_form {
flex-direction: column !important;
gap: 0.625rem !important;
}
#mailpoet_form_1 .mailpoet_text {
border-right: 1px solid rgba(121, 44, 133, 0.4) !important;
border-radius: 0.25rem !important;
}
#mailpoet_form_1 .mailpoet_submit {
border-radius: 0.25rem !important;
width: 100% !important;
}
}
.cs-mailpoet-terminal-wrap input.mailpoet_submit:hover {
background-color: var(--flex-snarkive) !important;
border-color: var(--flex-snarkive-50) !important;
}
/* Security Status Detail */
.terminal-footer-security {
margin-top: 15px;
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 1.5px;
opacity: 0.5;
padding: 5px;
}
.blink-dot {
height: 6px;
width: 6px;
background-color: var(--flex-snarkive);
border-radius: 50%;
display: inline-block;
margin-right: 5px;
animation: pulse-cinesist 2s infinite;
}
@keyframes pulse-cinesist {
0% {
box-shadow: 0 0 0 0 var(--flex-snarkive-50);
}
70% {
box-shadow: 0 0 0 10px var(--flex-snarkive-90);
}
100% {
box-shadow: 0 0 0 0 var(--flex-snarkive);
}
}
/* 2. The Directory: Link Columns */
.cs-footer-directory {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.875rem;
margin-bottom: 3.75rem;
}
.cs-footer-directory h4 {
color: var(--cinesist-red);
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 2px;
margin-bottom: 1.25rem;
border-left: 3px solid var(--cinesist-red);
padding-left: 0.75rem;
}
.cs-footer-directory ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.cs-footer-directory ul li a {
color: var(--body-fcolor);
opacity: 0.7;
text-decoration: none;
font-size: 0.9rem;
line-height: 2.2;
transition: all 0.2s ease;
}
.cs-footer-directory ul li a:hover {
opacity: 1;
color: var(--snarkive-purple-accent);
padding-left: 0.5rem;
}
/* 3. The Signature Block */
.cs-footer-signature {
text-align: center;
border-top: 1px dashed rgba(128, 128, 128, 0.3);
padding-top: 0;
margin-block-end: 0 !important;
margin-bottom: 0 !important;
}
.cs-footer-signature-branding {
margin-block-end: 0 !important;
margin-bottom: 0 !important;
}
/* Light/Dark Wordmark Logic */
/* We only show the dark wordmark in dark mode, and vice versa */
[data-theme="default"] .cs-dark-wordmark-logo {
display: none !important;
}
[data-theme="default"] .cs-light-wordmark-logo {
display: block;
margin: 0 auto 0.93rem;
}
[data-theme="dark"] .cs-dark-wordmark-logo {
display: block;
margin: 0 auto 0.93rem;
}
[data-theme='dark'] .cs-light-wordmark-logo {
display: none;
}
.cs-footer-signature p {
font-size: 0.75rem;
letter-spacing: 1px;
opacity: 0.6;
margin-bottom: 0 !important;
}
/* Mini Glitch for Cipher */
@keyframes glitch-mini {
0% {
transform: translate(0);
}
20% {
transform: translate(-2px, 1px);
}
40% {
transform: translate(2px, -1px);
}
100% {
transform: translate(0);
}
}
/* Mobile Responsive Adjustments */
@media (max-width: 900px) {
.cs-footer-vanguard {
flex-direction: column;
text-align: center;
gap: 2rem;
}
.cs-footer-directory {
grid-template-columns: repeat(2, 1fr);
}
.cs-cipher-footer-logo img,
.cs-cinefox-footer-logo img {
width: 12rem !important;
}
}
.wp-block-group.alignfull.cs-footer-signature {
max-width: 100vw;
}
/*
-----------------
13 - Responsive
-----------------
*/
/*
-----------------
14 - Print
-----------------
*/
/* --- Remove Foxiz Mark Spacing in Copy --- */
mark {
margin: 0;
/* Removes extra space */
padding: 0;
/* Removes extra space */
}
/*
-----------------
15 - Forms
-----------------
*/
/* --- Style All Input Forms --- */
input[type="text"],
input[type="tel"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="number"] {
border: 1px solid #d45f3559;
color: var(--body-fcolor);
}
/* --- Post News-Letter Form Style --- */
#mailpoet_form_1 {
border-radius: var(--round-10);
/* More Rounded Corners */
background: var(--news-letter-bg);
/* Use variable for background color change */
text-align: left;
}
/* --- Footer Newsletter Form Style --- */
#mailpoet_form_2 {
border: 2px solid var(--g-color);
border-radius: var(--round-10);
/* More Rounded Corners */
background: var(--news-letter-bg);
/* Use variable for background color change */
text-align: left;
}
#mailpoet_form_1 .mailpoet_message {
margin: 0;
padding: 0 20px;
display: none;
}
/* --- Style User Review Comment Section --- */
.comment-box-wrap.entry-sec.rb-user-reviews {
background-color: var(--news-letter-bg);
border-style: solid;
border-width: 1px 1px 1px 1px;
--border-top-width: 1px;
--border-right-width: 1px;
--border-bottom-width: 1px;
--border-left-width: 1px;
border-color: var(--e-global-color-fb66372);
--border-color: var(--e-global-color-fb66372);
border-radius: var(--round-10);
/* More Rounded Corners */
box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.5);
--margin-top: 20px;
--margin-bottom: 0px;
--margin-left: 0px;
--margin-right: 0px;
padding: 20px;
}
/* --- Search Form Style --- */
.is-form-layout .search-icon,
.is-form-layout .rbi-cright {
opacity: 0.8;
/* Override Foxiz Default */
}
/*
-----------------
16 - UI/UX
-----------------
*/
/* --- Custom Selection Style --- */
.rbct *::selection {
background: var(--flex-snarkive);
color: var(--awhite);
}
/* --- Noto Emoji Font Application --- */
/* --- Ensures Noto Emoji renders on key UI elements like navigation, tags, and category names --- */
.category-item a,
.tag-list li a,
.post-title a,
.nav-menu li a,
.emoji {
font-family: inherit, var(--cs-font-emoji);
}
/* --- Admin Interface Changes --- */
.rwtm-images li {
position: relative;
float: left;
width: 150px;
height: 100%;
margin: 0 10px 10px 0;
text-align: center;
border: 3px solid #9ed1bc;
}
/* --- Cinesist Review Cinescore Bars Style --- */
.rline-wrap {
position: relative;
display: inline-flex;
overflow: hidden;
flex-flow: row nowrap;
margin-right: 10px;
gap: 1px;
}
.rline {
display: inline-flex;
width: calc(var(--rating-size, 14px) * 1.5);
max-width: 20%;
height: min(calc(var(--rating-size, 14px) * 0.5), 10px);
background-color: var(--flex-gray-15);
}
/* Cinescore Burn-it🔥 Red Rating Bar */
.rline:nth-child(1) {
background-color: #ff0d0d;
}
/* Cinescore Compromised⚠️ Orange Rating Bar */
.rline:nth-child(2) {
background-color: #ff5612;
}
/* Cinescore Redacted❓ Yellow Rating Bar */
.rline:nth-child(3) {
background-color: #f1ca2b;
}
/* Cinescore Solid👍 Light Green Rating Bar */
.rline:nth-child(4) {
background-color: #b2cc21;
}
/* Cinescore Legendary🏆 Green Rating Bar */
.rline:nth-child(5) {
background-color: #50a735;
}
.rline:not(.activated) {
background-color: var(--flex-gray-15);
}
/* --- Movie Ticket Breadcrumb Navigation Style --- */
/* 1. Reset the main nav container */
nav.rank-math-breadcrumb {
background: none;
padding: 0;
border-radius: 0;
margin-top: 20px;
margin-bottom: 25px;
overflow: visible;
/* Allows cutouts to "pop" */
}
/* 2. Use Flexbox for the inner wrapper */
nav.rank-math-breadcrumb .breadcrumb-inner {
margin: 0;
padding: 0;
display: flex;
/* Aligns all stubs in a row */
align-items: center;
}
/* 3. Hide the original Rank Math separator */
nav.rank-math-breadcrumb .separator {
display: none;
}
/* 4. Style ALL stubs (links and the last item) */
nav.rank-math-breadcrumb a,
nav.rank-math-breadcrumb .last {
display: block;
position: relative;
/* Crucial for positioning the cutouts */
background: var(--flex-gray-40);
padding: 10px 20px;
/* More padding for the cutout space */
color: var(--ticket-text-color);
font-size: 14px;
line-height: 1.2;
text-decoration: none;
transition: all 0.2s ease;
}
/* 5. Add the "torn" cutouts to BOTH sides of every stub */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::before,
nav.rank-math-breadcrumb .last::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
/* Size of the cutout */
height: 20px;
/* Size of the cutout */
border-radius: 50%;
background-color: var(--page-bg-color);
/* This "punches" the hole */
}
/* --- Position the left cutout --- */
nav.rank-math-breadcrumb a::before,
nav.rank-math-breadcrumb .last::before {
left: -10px;
/* Moves it halfway out */
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
/* Optional: adds a subtle shadow */
}
/* --- Position the right cutout --- */
nav.rank-math-breadcrumb a::after,
nav.rank-math-breadcrumb .last::after {
right: -10px;
/* Moves it halfway out */
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
/* Optional: adds a subtle shadow */
}
/* 6. Fix the ends of the ticket chain */
/* --- The FIRST item ("Home") --- */
nav.rank-math-breadcrumb a:first-child {
border-radius: 8px 0 0 8px;
/* Rounds the outer-left corners */
}
/* --- Hide its left-side cutout --- */
nav.rank-math-breadcrumb a:first-child::before {
display: none;
}
/* --- The LAST item (Current Page) --- */
nav.rank-math-breadcrumb .last {
border-radius: 0 8px 8px 0;
/* Rounds the outer-right corners */
color: var(--ticket-text-current);
font-weight: 500;
}
/* --- Hide its right-side cutout --- */
nav.rank-math-breadcrumb .last::after {
display: none;
}
/* 7. Styling the links */
nav.rank-math-breadcrumb a:hover {
color: var(--ticket-text-hover);
background: var(--flex-gray-1);
/* A slight background change on hover */
z-index: 2;
/* Brings it "on top" of the next stub */
}
/* --- Review Stars Style --- */
.rb-review-stars {
color: var(--g-color);
}
/* --- Review Star Filled In Style --- */
rbi rbi-star-o {
color: var(--g-color);
}
/* --- Like/Dislike Button Styles --- */
.meta-like>span:hover {
-webkit-transform: var(--flex-snarkive);
transform: var(--flex-snarkive);
color: var(--btn-accent-h, var(--awhite));
border-color: var(--flex-snarkive, var(--flex-snarkive));
background-color: var(--flex-snarkive, var(--flex-snarkive));
box-shadow: var(--btn-shadow,
0 3px 12px var(--flex-snarkive-90, var(--flex-snarkive-90)));
}
/* Cinesist Buttons */
/* Snarkive Intel Button */
.snarkive-intel-btn {
font-weight: 900;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}
.snarkive-intel-btn {
font-size: 0.85rem;
display: inline-flex;
align-items: center;
}
/* Adding Flare to Images and Captions */
figcaption:not(:empty):before,
.wp-caption-text:before {
color: var(--review-accent, var(--flex-snarkive));
}
figcaption:not(:empty):before,
.wp-caption-text:before {
display: var(--caption-bdisplay, inline-block);
width: 30px;
height: .3rem;
margin-right: 7px;
content: '';
border-top: 3px solid;
}
.entry-content figcaption {
text-align: unset !important;
margin-block: .5em 0;
font-weight: 600
}
/* --- Push Button Template. Apply .is-push-btn to any Button Block or the Comment Submit Button */
.is-push-btn {
/* 1. SETUP DEFAULT COLORS (Edit these for manual use) */
--btn-bg-color: var(--flex-snarkive);
/* Snarkive Flex Color */
--btn-text-color: #ffffff;
position: relative;
border: none !important;
padding: 0 !important;
cursor: pointer;
display: inline-block;
text-decoration: none;
transition: filter 250ms;
}
/* The 3D Edge & Shadow */
.is-push-btn::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: inherit;
/* Fallback: Uses black at 50% brightness of the background */
background: var(--flex-decor-border);
filter: brightness(0.5);
opacity: 0.6;
transform: translateY(0);
transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
}
/* The Top Face */
.is-push-btn>* {
display: block;
position: relative;
/* SMART LOGIC:
Use inherited color if FSE sets it,
otherwise use our --btn-bg-color variable */
background-color: var(--wp--preset--color--primary, var(--btn-bg-color)) !important;
color: var(--wp--preset--color--white, var(--btn-text-color)) !important;
border-radius: inherit !important;
padding: 12px 42px !important;
will-change: transform;
transform: translateY(-6px);
transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1);
border: none !important;
}
/* HOVER & ACTIVE STATES */
.is-push-btn:hover {
filter: brightness(110%);
}
.is-push-btn:hover>* {
transform: translateY(-8px);
transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5);
}
.is-push-btn:active>* {
transform: translateY(-2px);
transition: transform 34ms;
}
/* Ensure the button inside our push-wrapper behaves correctly */
.is-push-btn button {
border: none !important;
background-color: inherit !important;
color: inherit !important;
font-family: inherit;
cursor: pointer;
}
/* --- END PUSH BUTTON --- */
/* --- Cinesist: Tactical Load More Scanner --- */
.cs-terminal-loader {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--snarkive);
text-shadow: 0 0 5px var(--snarkive);
animation: cs-pulse 1.5s infinite;
}
@keyframes cs-pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.3;
}
100% {
opacity: 1;
}
}
/* Live Search Results */
.ct-search-results a {
display: flex;
align-items: center;
gap: var(--items-spacing, 15px);
padding: var(--items-padding, 16px);
color: var(--flex-text-title);
}
.ct-search-results a:hover {
text-decoration: underline;
color: var(--flex-snarkive) !important;
}
/* --- Block Quotes --- */
figure.wp-block-pullquote {
position: relative;
padding: 70px;
text-align: initial;
border-width: 1px !important;
border-style: solid;
border-color: var(--review-accent) !important;
border-left-color: var(--review-accent) !important;
border-left-width: 5px !important;
border-radius: 5px;
}
.figure.wp-block-pullquote blockquote:before {
color: var(--review-accent);
}
cite {
font-family: var(--meta-family);
font-size: min(14px, var(--rem-small));
font-weight: var(--meta-fweight);
font-style: italic !important;
}
blockquote cite:before {
display: inline-block;
width: 30px;
height: .3em;
margin-right: 7px;
content: '';
color: var(--review-accent);
border-top: 3px solid currentColor;
}
/*
-----------------
17 - Snarkive
-----------------
/* --- Snarkive Movie Rating Badge Style --- */
/* Base style for Desktop/Large Screens */
.elementor-1000042565 .elementor-element.elementor-element-7e9c79b .dynamic-content-for-elementor-acf {
color: #ffffff;
margin-bottom: 0px;
font-size: 1.75rem;
/* Large screen size */
font-weight: 800;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
/* RESPONSIVE FONT SHRINK: Triggers when screen width is 768px or smaller */
@media only screen and (max-width: 768px) {
.elementor-1000042565 .elementor-element.elementor-element-7e9c79b .dynamic-content-for-elementor-acf {
font-size: 1rem;
/* Smaller screen size */
}
}
/* --- Snarkive Person 'Dossier' Template --- */
.person-dossier-wrapper {
padding: var(--cs-spacing-lg) 0;
max-width: var(--layout-content-max-width);
margin: 0 auto;
}
.dossier-grid {
display: grid;
grid-template-columns: 300px 1fr;
gap: var(--cs-spacing-lg);
}
/* Standard spacing for the dossier biography */
.entry-content.dossier-bio p {
margin-bottom: 1.5em;
/* Adds space after each paragraph */
line-height: 1.6;
/* Improves readability within paragraphs */
}
/* Optional: Remove margin from the very last paragraph to avoid extra bottom space */
.entry-content.dossier-bio p:last-child {
margin-bottom: 0;
}
.tactical-note {
margin-bottom: 1.5em;
}
/* --- Filmography Grid & Glassmorphism Badge --- */
.filmography-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 172px);
/* Strict width */
gap: 10px;
/* Strict 10px gap */
/* justify-content: center; */
}
.film-card {
width: 172px;
height: 259px;
/* Strict height */
overflow: hidden;
transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.film-card:hover {
transform: translateY(-8px);
}
.card-poster {
position: relative;
width: 172px;
height: 259px;
border-radius: var(--round-5);
overflow: hidden;
}
/* --- The Bottom Title Overlay --- */
.card-meta-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 60px 10px 15px 10px;
/* Increased top padding for role height */
background: linear-gradient(to top,
rgba(0, 0, 0, 0.95) 0%,
rgba(0, 0, 0, 0.6) 50%,
transparent 100%);
z-index: 3;
pointer-events: none;
/* Allows clicks to pass through to the link */
}
/* Alias/Role Tag Styling */
.film-alias-tag {
font-family: var(--cs-font-secondary);
font-size: 11px;
font-weight: 400;
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.alias-prefix {
color: var(--flex-snarkive);
/* Snarkive Purple/Orange */
font-weight: 700;
margin-right: 3px;
}
.alias-link {
color: #fff;
text-decoration: none;
pointer-events: auto;
/* Re-enable clicks for the taxonomy link */
}
.alias-link:hover {
color: var(--flex-snarkive-90);
text-decoration: underline;
}
/* --- Title Styling with 1-Line Ellipsis --- */
.film-title-overlay {
color: #ffffff;
font-size: 14px;
font-weight: 700;
margin: 0;
text-align: center;
line-height: 1.2;
transition: color 0.3s ease;
/* Strict 1-Line Truncation */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* --- Hover Effect --- */
.film-card:hover .film-title-overlay {
color: var(--flex-snarkive);
/* Glows Snarkive Purple/Orange on hover */
}
/* Ensure image fills the fixed dimensions */
.poster-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Glowing Border Logic */
.film-card:hover .card-poster {
border-color: var(--flex-snarkive);
box-shadow: 0 0 20px var(--flex-snarkive-90);
}
/* Glassmorphism Cinescore Badge */
.cinescore-overlay {
position: absolute;
bottom: 35%;
left: 50%;
transform: translateX(-50%);
background: var(--flex-gray-1);
/* Black Spy Semi-Transparent */
backdrop-filter: blur(8px);
border: 2px solid var(--flex-snarkive);
border-radius: 8px;
padding: 5px 12px;
display: flex;
align-items: center;
gap: 8px;
min-width: 80px;
justify-content: center;
z-index: 2;
}
.card-icon-marker {
width: 24px;
height: 24px;
background-image: var(--cinesist-card-logo);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.film-cinescore-number {
display: inline-flex;
align-items: center;
font-weight: 900;
font-size: 1.4rem;
color: var(--body-fcolor);
font-family: var(--cs-font-primary);
}
.film-title {
display: -webkit-box;
-webkit-line-clamp: 1;
line-clamp: 1;
/* Adjust this number to limit lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/* Ensures ellipsis appears */
margin-top: var(--cs-spacing-xs);
line-height: 1.2;
color: var(--flex-text-primary);
}
.film-title:hover {
color: var(--flex-snarkive-90);
text-decoration: underline;
}
.film-title a:hover {
color: var(--flex-snarkive-90);
}
.film-title .year {
display: block;
font-size: 0.8em;
opacity: 0.7;
color: var(--flex-snarkive);
}
/* ====================
Tagged Intel Grid
==================== */
.intel-tag-grid {
display: grid;
grid-template-columns: repeat(auto-fill, 275px);
/* Strict width */
gap: 5px;
/*justify-content: center;*/
}
.intel-tag-card {
width: 275px;
height: 260px;
/* Strict height */
background: var(--contrast-2);
border-radius: var(--round-5);
/* Requested Border Radius */
overflow: hidden;
transition:
transform 0.3s ease,
border-color 0.3s ease;
border: 1px solid var(--flex-decor-border);
display: flex;
flex-direction: column;
}
.intel-tag-card:hover {
transform: translateY(-5px);
border-color: var(--flex-snarkive);
}
.intel-tag-thumb {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
}
.intel-tag-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.intel-tag-body {
padding: var(--cs-spacing-xs);
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
/* 2-Line Title Clamp with Ellipsis */
.intel-tag-title {
font-size: 1.15rem;
line-height: 1.3;
font-weight: 700;
color: var(--flex-text-title);
margin: 0 0 var(--cs-spacing-sm) 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/* Ensure the title link doesn't look like a standard blue hyperlink */
.intel-tag-title-link {
text-decoration: none;
display: block;
}
.intel-tag-title-link:hover .intel-tag-title {
color: var(--flex-snarkive);
/* Glow title on hover */
}
.intel-tag-footer {
border-top: 1px solid var(--flex-decor-border);
padding-top: var(--cs-spacing-xs);
}
.author-meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
/* Author and Comment links */
.author-profile-link,
.comment-recon-link {
text-decoration: none;
display: flex;
align-items: center;
transition: opacity 0.2s ease;
}
.author-profile-link:hover,
.comment-recon-link:hover {
opacity: 0.8;
color: var(--flex-snarkive-rev);
}
/* Thumbnail hover effect */
.intel-tag-thumb-link {
display: block;
overflow: hidden;
}
.intel-tag-thumb-link img {
transition: transform 0.5s ease;
}
.intel-tag-thumb-link:hover img {
transform: scale(1.05);
}
/* Container styling */
.intel-tag-writer-img {
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid var(--flex-snarkive);
display: inline-block;
/* Ensures span respects dimensions */
overflow: hidden;
/* Clips the image to the circle */
}
/* Specific styling for the image inside the container */
.intel-tag-writer-img img {
width: 100%;
/* Fills the container width */
height: 100%;
/* Fills the container height */
display: block;
/* Removes bottom whitespace gap */
object-fit: cover;
/* Prevents distortion by cropping to fit */
border-radius: 50%;
/* Extra safeguard for older browsers */
}
.author-name {
color: var(--flex-snarkive);
font-weight: 800;
font-size: 13px;
padding-left: 5px;
}
.article-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.intel-tag-date {
font-size: 11px;
font-weight: 300;
color: var(--body-fcolor);
}
.comment-recon {
display: flex;
align-items: center;
gap: 4px;
color: var(--body-fcolor);
}
.chat-icon-custom {
font-size: 1.25rem;
color: var(--flex-snarkive);
/* Snarkive Color Change */
font-variation-settings:
"FILL" 1,
"wght" 400,
"GRAD" 0,
"opsz" 24;
}
.myster-icon-custom {
font-size: 1.25rem;
font-variation-settings:
"FILL" 1,
"wght" 400,
"GRAD" 0,
"opsz" 24;
}
.folder-eye-icon-custom {
font-size: 1.25rem;
font-variation-settings:
"FILL" 1,
"wght" 400,
"GRAD" 0,
"opsz" 24;
}
.comment-recon .material-symbols-sharp {
font-size: 16px;
font-variation-settings:
"FILL" 1,
"wght" 400,
"GRAD" 0,
"opsz" 20;
}
.comment-num {
font-size: 12px;
font-weight: 700;
}
/* --- Show More Button Styling --- */
.show-more-wrap {
text-align: center;
margin: var(--cs-spacing-md) 0;
}
.show-more-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--flex-snarkive);
font-weight: 800;
text-transform: uppercase;
font-size: 13px;
text-decoration: none;
transition: color 0.3s ease;
}
.show-more-trigger:hover {
color: var(--flex-snarkive-rev);
}
.show-more-trigger .material-symbols-sharp {
font-variation-settings: "FILL" 1;
/* Filled icons as requested */
}
/* --- Legal Attribution --- */
.dossier-legal {
margin-top: var(--cs-spacing-xl);
padding-top: var(--cs-spacing-md);
border-top: 1px solid var(--flex-decor-border);
font-size: 0.85rem;
opacity: 0.6;
text-align: center;
}
/* --- Left Column: Headshot & Intel --- */
.recon-sidebar {
display: flex;
flex-direction: column;
gap: var(--cs-spacing-md);
}
.person-headshot-wrap {
position: relative;
border-radius: var(--round-10);
overflow: hidden;
border: 1px solid var(--flex-decor-border);
}
.headshot-img {
width: 100%;
height: auto;
display: block;
}
.popularity-meter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--cs-spacing-xs);
background: var(--flex-gray-3);
color: #fff;
display: flex;
justify-content: space-between;
font-weight: 700;
font-family: var(--cs-font-primary);
}
.meter-label,
.meter-value {
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
font-size: 14px;
}
/* --- Person's Threat Level --- */
.threat-low {
color: #3498db;
}
/* Blue */
.threat-elevated {
color: #e67e22;
}
/* Orange */
.threat-critical {
color: #e74c3c;
}
/* Red */
.threat-defcon {
color: #e74c3c;
font-weight: 900;
text-shadow: 0 0 10px rgba(231, 76, 60, 0.5);
}
.strategic-intel-card {
background: var(--contrast-2);
padding: var(--cs-spacing-md);
border-radius: var(--round-10);
border: 1px solid var(--flex-decor-border);
}
.intel-header {
color: var(--flex-snarkive);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--cs-spacing-sm);
border-bottom: 2px solid var(--flex-snarkive);
}
.intel-list {
list-style: none;
padding: 0;
margin: 0 0 var(--cs-spacing-md) 0;
}
.intel-list li {
padding: var(--cs-spacing-xxs) 0;
border-bottom: 1px solid var(--flex-decor-border);
font-size: var(--cs-font-body-sm);
}
/* --- Right Column: Briefing --- */
.intelligence-briefing {
background: var(--contrast-1);
padding: var(--cs-spacing-lg);
border-radius: var(--round-10);
border: 1px solid var(--flex-decor-border);
}
.person-name {
margin-bottom: var(--cs-spacing-xs);
color: var(--flex-text-title);
}
.keyword-tag {
display: inline-block;
background: var(--flex-gray-2);
color: var(--flex-snarkive);
padding: 2px 10px;
border-radius: 4px;
font-size: 11px;
margin-right: 5px;
font-weight: 700;
}
.section-title {
margin: var(--cs-spacing-md) 0 var(--cs-spacing-sm);
color: var(--flex-snarkive);
}
.social-recon-links {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.social-btn {
background: var(--flex-gray-3);
color: #fff !important;
padding: 5px 12px;
border-radius: 4px;
font-size: 12px;
}
.social-btn:hover {
background: var(--flex-snarkive);
}
/* ====================
Tactical Discussion (Comments)
==================== */
.tactical-discussion {
grid-column: 1 / -1;
/* Forces the section to span the full width of the dossier grid */
border-top: 1px dashed var(--flex-decor-border);
}
.discussion-inner {
max-width: 1000px;
/* Gives the comments breathing room without being too wide */
margin: 0 auto;
}
.foxiz-comment-wrapper {
background: var(--contrast-2);
padding: var(--cs-spacing-md);
border-radius: var(--round-5);
border: 1px solid var(--flex-decor-border);
}
/* Foxiz Comment Styling Overrides */
#respond #reply-title {
font-family: var(--cs-font-primary);
font-size: 1rem;
text-transform: none;
letter-spacing: 1px;
color: var(--flex-snarkive);
}
.comment-list .comment-body {
border-bottom: 1px solid var(--flex-gray-2);
padding: var(--cs-spacing-sm) 0;
}
.comment-author .fn {
font-weight: 800;
color: var(--flex-text-title);
}
/* Make sure the "Post Comment" button matches your spy theme */
#respond input#submit {
background: var(--flex-snarkive);
color: #fff;
border: none;
border-radius: var(--round-5);
font-weight: 800;
text-transform: uppercase;
padding: 10px 25px;
cursor: pointer;
transition: background 0.3s ease;
}
#respond input#submit:hover {
background: var(--flex-snarkive-rev);
}
/* Responsive Recon */
@media (max-width: 991px) {
.dossier-grid {
grid-template-columns: 1fr;
}
.recon-sidebar {
max-width: 400px;
margin: 0 auto;
}
}
/* --- Snarkive Person Grid Style --- */
.cinesist-person-grid {
display: grid;
/* Adjust columns for responsive */
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
}
.cinesist-person-card {
display: flex;
flex-direction: column;
}
.cinesist-person-card .cinesist-person-image-link img {
width: 100%;
height: auto;
border-radius: 8px;
/* Or 0px for square */
aspect-ratio: 2 / 3;
/* Classic poster ratio */
object-fit: cover;
margin-bottom: 10px;
transition: transform 0.2s ease;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
/* A Little Shadow for Effect */
}
.cinesist-person-card .cinesist-person-image-link:hover img {
transform: scale(1.03);
}
.cinesist-person-info {
display: flex;
flex-direction: column;
}
.cinesist-person-info .cinesist-person-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--cinesist-text-primary);
/* Uses your light/dark mode color! */
text-decoration: none;
}
.cinesist-person-info .cinesist-person-name:hover {
text-decoration: underline;
text-decoration-color: #d45f35;
}
.cinesist-person-info .cinesist-person-role {
font-size: 0.9rem;
font-style: italic;
color: var(--cinesist-text-secondary);
transition: color 0.3s ease;
/* Optional: smooth color change */
}
/* Add this new rule: */
.cinesist-person-info .cinesist-person-role:hover {
color: #d45f35;
/* The new color on hover */
}
/* Hides the extra cast/crew cards by default */
.cinesist-person-hidden {
display: none;
}
/* NEW - This wrapper pushes the button to the right */
.cinesist-grid-toggle-wrapper {
display: flex;
justify-content: flex-end;
width: 100%;
margin-top: 15px;
}
/* UPDATED - Styles the "Show All" link to be smaller */
.cinesist-grid-toggle {
display: inline-block;
/* Changed from block */
text-align: center;
padding: 8px 16px;
/* Made padding smaller */
background-color: var(--flex-snarkive);
color: #fff;
text-decoration: none;
font-weight: bold;
border-radius: 4px;
transition: background-color 0.2s ease;
font-size: 14px;
/* Added to control size */
}
.cinesist-grid-toggle:hover {
background-color: var(--flex-snarkive-rev);
color: #fff;
}
/* When the grid is toggled, show the hidden items */
.cinesist-person-grid-wrapper.is-open .cinesist-person-hidden {
display: block;
}
.cinesist-person-grid-wrapper.is-collapsible .cinesist-person-grid {
/* * This is the magic. Adjust this height!
* It should be the height of ONE card + its bottom margin.
* e.g., If your card is 220px tall with 20px margin, set this to 240px.
*/
max-height: 290px;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
/* This is the 'open' state */
.cinesist-person-grid-wrapper.is-expanded .cinesist-person-grid {
/* Set to a number larger than the grid could ever be */
max-height: 3000px;
transition: max-height 0.6s ease-in;
}
/* Optional: Smooths the button wrapper's appearance */
.cinesist-grid-toggle-wrapper {
transition: opacity 0.4s ease;
}
/* Hides the button when the grid is open (optional but clean) */
.cinesist-person-grid-wrapper.is-expanded .cinesist-grid-toggle-wrapper {
/* You can hide it, or just let the JS text-swap work */
opacity: 1;
}
/* --- Cast/Crew Differentiation Styles --- */
/* 1. Purple Border for CAST */
.cinesist-person-grid-wrapper.is-cast .cinesist-person-card .cinesist-person-image-link img {
/* Example: Purple/Primary Color */
border: 3px solid #7d3c98;
/* Purple for Cast */
box-shadow: 0 0 10px rgba(125, 60, 152, 0.5);
}
/* 2. Orange Border for CREW */
.cinesist-person-grid-wrapper.is-crew .cinesist-person-card .cinesist-person-image-link img {
/* Example: Orange/Secondary Color */
border: 3px solid #f27405;
/* Orange for Crew */
box-shadow: 0 0 10px rgba(242, 116, 5, 0.5);
}
/* Optional: Different name color for crew to separate the text visually
.cinesist-person-grid-wrapper.is-crew
.cinesist-person-info
.cinesist-person-name {
color: #ffb347; /* Lighter Orange or Gold tone
}
/* --- Snarkive Social Meta Style --- */
#snarkive-social-meta .meta-like i {
font-size: calc(1em + 10px);
}
#snarkive-social-meta .smeta-sec .meta-like>span {
min-width: 52px;
background: var(--flex-snarkive);
color: var(--awhite);
}
#snarkive-social-meta .meta-like>span:hover {
-webkit-transform: var(--flex-snarkive-rev);
transform: var(--flex-snarkive-rev);
color: var(--btn-accent-h, var(--awhite));
border-color: var(--flex-snarkive-rev, var(--flex-snarkive-rev));
background-color: var(--flex-snarkive-rev, var(--flex-snarkive-rev));
box-shadow: var(--btn-shadow,
0 3px 12px var(--flex-snarkive-rev-90, var(--flex-snarkive-rev-90)));
}
@media (min-width: 768px) {
#snarkive-social-meta .meta-bookmark .rb-bookmark i {
font-size: calc(var(--meta-fsize) * 1.45);
}
}
.bookmark-notification-inner {
border: 2px solid var(--flex-snarkive-90) !important;
}
.bookmark-title {
color: var(--flex-snarkive) !important;
}
/* --- Snarkive Page Wrapper Style --- */
.snarkive-page-wrapper {
/* This applies your 1536px max-width */
max-width: var(--layout-max-width-full);
/* This applies your 80px fluid padding */
padding-left: var(--layout-padding-global);
padding-right: var(--layout-padding-global);
/* This centers it on the page */
margin-left: auto;
margin-right: auto;
/* This is your 32-35px vertical gap */
margin-bottom: var(--layout-block-gap);
}
/* --- Snarkive Linked Profiles Box Style --- */
.snarkive-links-box {
background-color: var(--gc-spy);
border-radius: 12px;
padding: 20px 25px;
margin-top: 30px;
margin-block-start: 2rem !important;
border-top: 3px solid var(--flex-snarkive);
box-shadow: var(--shadow-1);
}
.snarkive-links-box h3 {
color: var(--flex-snarkive);
font-size: 18px;
font-weight: 700;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
.snarkive-links-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
/* Spacing between tags */
}
/* --- Snarkive Pill Tag Style --- */
.snarkive-tag-link {
display: inline-flex;
align-items: center;
background-color: var(--page-bg-color);
color: var(--flex-snarkive);
border-radius: 5px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
overflow: hidden;
box-shadow: var(--shadow-1);
padding: 3px 7px;
/* Padding around the tag */
}
.snarkive-tag-link:hover {
opacity: 0.75;
}
/* --- Snarkive Pill Tag Image Style --- */
.snarkive-tag-link img {
width: 40px;
/* Size of the thumbnail */
height: auto;
/* Size of the thumbnail */
object-fit: cover;
margin-right: 10px;
/* Space between image and text */
border: none;
}
/* --- Snarkive Pill Tag Fallback Icon Style --- */
.snarkive-tag-link .snarkive-tag-icon {
width: 28px;
height: 28px;
margin-right: 10px;
background-color: #555;
/* Fallback dot color */
border-right: 1px solid #444;
}
/* --- Snarkive Pill Tag Text Style --- */
.snarkive-tag-link span {
padding-right: 12px;
/* Add padding to the text */
/* The color is inherited from the tag */
}
/* --- Snarkive Person Name Shortcode [person_name] --- */
.snarkive-person-name,
.snarkive-movie-title {
font-size: 1.7rem;
font-weight: 700;
color: var(--flex-snarkive);
}
/* --- Snarkive Profile Box --- */
.wp-block-group>.snarkive-box-genres {
display: inline-flex;
}
/*
-----------------
18 - Buddypress
-----------------
*/
/* --- Buddy Press Text Fields Style --- */
.buddypress-wrap .standard-form .groups-members-search input[type="search"],
.buddypress-wrap .standard-form .groups-members-search input[type="text"],
.buddypress-wrap .standard-form [data-bp-search] input[type="search"],
.buddypress-wrap .standard-form [data-bp-search] input[type="text"],
.buddypress-wrap .standard-form input[type="color"],
.buddypress-wrap .standard-form input[type="date"],
.buddypress-wrap .standard-form input[type="datetime-local"],
.buddypress-wrap .standard-form input[type="datetime"],
.buddypress-wrap .standard-form input[type="email"],
.buddypress-wrap .standard-form input[type="month"],
.buddypress-wrap .standard-form input[type="number"],
.buddypress-wrap .standard-form input[type="password"],
.buddypress-wrap .standard-form input[type="range"],
.buddypress-wrap .standard-form input[type="search"],
.buddypress-wrap .standard-form input[type="tel"],
.buddypress-wrap .standard-form input[type="text"],
.buddypress-wrap .standard-form input[type="time"],
.buddypress-wrap .standard-form input[type="url"],
.buddypress-wrap .standard-form input[type="week"],
.buddypress-wrap .standard-form select,
.buddypress-wrap .standard-form textarea {
background: var(--flex-gray-15);
border: 1px solid #d6d6d6;
border-radius: 0;
font: inherit;
font-size: 100%;
padding: 0.7em;
}
/* --- Buddy Press Tooltip Style --- */
[data-bp-tooltip]:after {
background-color: var(--gc-color);
}
/* --- Buddy Press Profile Avatar Style --- */
#item-header-cover-image #item-header-avatar img.avatar {
max-width: 175px;
height: auto;
border-radius: 50%;
/* Make it circle */
}
#item-header-avatar img {
border: solid 2px var(--flex-gray-1);
/* Flex them colors to change with White and Black Spy Modes */
background: var(--contrast-1);
/* Flex them colors to change with White and Black Spy Modes */
box-shadow: none;
display: block;
margin: 0 auto;
}
.users-header #item-header-avatar:hover .link-change-overlay {
position: absolute;
left: 15px;
right: 0px;
top: 0px;
height: 175px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
max-width: 175px;
}
/* --- Buddy Press NiceNames Style --- */
#buddypress div#item-header-cover-image h2 {
color: #dd7b45;
text-rendering: optimizelegibility;
text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05);
margin: 0 0 0.6em;
font-size: 200%;
font-style: normal;
text-transform: capitalize;
}
/* --- Buddy Press Navigation Menu Style --- */
.buddypress-wrap .bp-navs li:not(.current) a:hover,
.buddypress-wrap .bp-navs li:not(.selected) a:hover {
background: var(--flex-overlay-1);
color: var(--body-fcolor);
}
@media screen and (min-width: 46.8em) {
.buddypress-wrap.bp-dir-hori-nav:not(.bp-vertical-navs) nav {
border-bottom: 1px solid var(--flex-gray-1);
border-top: 1px solid var(--flex-gray-1);
margin-bottom: 20px;
-webkit-box-shadow: var(--shadow-1);
-moz-box-shadow: var(--shadow-1);
box-shadow: var(--shadow-1);
background-color: var(--flex-gray-2);
}
}
@media screen and (min-width: 46.8em) {
.buddypress-wrap .main-navs:not(.dir-navs) li.current a,
.buddypress-wrap .main-navs:not(.dir-navs) li.selected a {
background: var(--flex-overlay-1);
color: var(--body-fcolor);
font-weight: 600;
}
}
/* --- Buddy Press Status Update Form Style --- */
#whats-new-form,
.bp-nouveau-activity-form-placeholder- {
background-color: var(--contrast-1);
}
.bb-poll-form .bb-model-footer {
background-color: var(--flex-gray-2);
}
.bb-action-popup .bb-action-popup-content {
margin: 0 -30px;
max-height: calc(100vh - 220px);
overflow: auto;
padding: 20px 30px;
background-color: var(--gc-spy);
}
.buddypress .buddypress-wrap button {
background: var(--gc-color);
color: var(--alight);
}
.buddypress .buddypress-wrap button:hover {
background: var(--gc-color);
color: var(--alight);
}
.buddypress .buddypress-wrap a.button {
background: var(--gc-color);
}
.buddypress .buddypress-wrap a.button:hover {
background: var(--gc-color);
color: var(--alight);
}
/* --- Whats New Update Status --- */
#whats-new-textarea [contenteditable="true"]:empty:before,
#whats-new-textarea-placeholder [contenteditable="true"]:empty:before {
content: attr(placeholder);
color: var(--body-fcolor);
cursor: text;
display: block;
}
.activity-update-form .whats-new-title,
.bp-nouveau-activity-form-placeholder- .whats-new-title {
color: var(--body-fcolor);
}
.activity-update-form .bb-model-header,
.bp-nouveau-activity-form-placeholder- .bb-model-header {
display: none;
background-color: var(--flex-gray-2) !important;
}
.activity-update-form #whats-new-form #whats-new-toolbar,
.activity-update-form #whats-new-form-placeholder #whats-new-toolbar,
.bp-nouveau-activity-form-placeholder- #whats-new-form #whats-new-toolbar,
.bp-nouveau-activity-form-placeholder- #whats-new-form-placeholder #whats-new-toolbar {
padding: 12px 16px;
background-color: var(--flex-gray-2);
border-top: 1px solid #eee;
}
#whats-new-toolbar [class*=" bb-icon-"] {
color: var(--flex-icon-1);
/* make them icons change with the spies */
}
.activity-update-form .whats-new-form-footer,
.bp-nouveau-activity-form-placeholder- .whats-new-form-footer {
display: flex;
justify-content: space-between;
background-color: var(--flex-gray-2);
border-top: 1px solid #eee;
}
/* --- Buddy Press Activity Feed Style --- */
.activity-list.bp-list {
background: var(--flex-gray-2);
border: 1px solid var(--flex-decor-border);
}
/* --- BP Activity Feed H2 Title --- */
.activity-list .activity-item .activity-title h2 {
color: var(--body-fcolor);
font-size: 18px;
font-weight: 600;
margin: 0 0 10px 0;
}
/* --- Buddy Press Activity Status Screen Overlay --- */
.activity-update-form.modal-popup,
.bp-nouveau-activity-form-placeholder-.modal-popup {
background-color: var(--flex-overlay-1);
}
.activity-list.bp-list .activity-item {
background: var(--gc-spy);
border: 1px solid #b7b7b7;
-webkit-box-shadow: 0 0 6px #d2d2d2;
-moz-box-shadow: 0 0 6px #d2d2d2;
box-shadow: 0 0 6px #d2d2d2;
margin: 20px 0;
}
.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta,
.activity-list .activity-item .activity-content>.bp-generic-meta.groups-meta,
.activity-list .activity-item.elementor-activity-item .activity-actions>.bp-generic-meta.action,
.activity-list .activity-item>.bp-generic-meta.activity-meta,
.activity-list .activity-item>.bp-generic-meta.groups-meta,
.activity-list .activity-item>.bp-generic-meta[class*="-meta"] {
display: flex;
justify-content: space-around;
border-top: 1px solid #eaeaea;
padding: 5px 0;
position: relative;
background-color: var(--flex-gray-2);
}
.buddypress .buddypress-wrap .generic-button a,
.buddypress .buddypress-wrap a.button {
color: var(--flex-icon-1);
}
#buddypress .activity-list .activity-item .activity-content .bp-generic-meta.action .button>.like-count {
color: var(--flex-icon-1) !important;
}
.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta .acomment-reply.button .comment-count {
color: var(--flex-icon-1);
}
.activity-list .activity-item .activity-content>.bp-generic-meta.activity-meta div.generic-button>a:hover {
background-color: var(--flex-overlay-1);
}
.like-count reactions_item {
color: var(--flex-icon-1);
}
.activity-list .activity-item .ac-emotions_list {
background-color: var(--flex-gray-1);
}
/* --- Buddy Press View Profile Style --- */
.buddypress-wrap .bp-tables-user tbody tr {
background-color: var(--flex-gray-15);
}
.buddypress-wrap .bp-tables-user tr.alt td {
background-color: var(--flex-gray-2);
}
.buddypress-wrap .standard-form p.description {
color: var(--body-fcolor);
margin: 5px 0;
}
.buddypress-wrap .current-visibility-level {
font-style: normal;
color: var(--body-fcolor);
}
.buddypress-wrap .profile.edit .editfield {
background: var(--flex-gray-2);
border: 1px solid #eee;
margin: 15px 0;
padding: 1em;
}
.buddypress-wrap .current-visibility-level {
font-style: normal;
color: var(--body-fcolor);
}
.buddypress .buddypress-wrap input[type="submit"] {
background: var(--gc-color);
color: var(--alight);
}
/* --- Buddy Press Activity Feed --- */
.activity-list li.bbp_reply_create .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.bbp_reply_create .activity-content .activity-inner .bb-post-title,
.activity-list li.bbp_topic_create .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.bbp_topic_create .activity-content .activity-inner .bb-post-title,
.activity-list li.blogs .activity-content .activity-inner .activity-discussion-title-wrap,
.activity-list li.blogs .activity-content .activity-inner .bb-post-title {
font-size: 16px;
font-weight: 500;
margin-bottom: 10px;
display: block;
color: var(--body-fcolor);
}
/* Activity Avatar */
.activity-list .activity-item div.item-avatar img {
height: auto;
max-width: 50%;
}
/* Activity Inner */
.activity-list li.blogs .activity-content .activity-inner {
display: flex;
border: 1px solid #eaeaea21;
padding: 12px;
border-radius: 5px;
max-width: 640px;
}
.activity-list li.blogs .activity-content .activity-inner .bb-post-img-link {
background-color: transparent;
display: block;
border-radius: 3px 3px 0 0;
}
/* Activity Entry Background */
.activity-list li.blogs .activity-content .activity-inner .bb-content-wrp {
display: block;
padding: 12px;
background-color: transparent;
}
/* Activity Comments Section */
.acomment-content_wrap {
width: 750px;
}
.buddypress-wrap .activity-comments .acomment_inner .acomment-content_block {
background-color: var(--gc-snarkive-accent);
}
.buddypress-wrap .activity-comments .acomment-meta {
padding-left: 0;
}
.buddypress .buddypress-wrap .generic-button a {
background: transparent;
}
.buddypress-wrap .activity-comments .acomment-foot-actions .generic-button {
background-color: var(--gc-color);
}
.like-count {
color: var(--flex-snarkive);
}
.like-count:hover {
color: var(--btn-accent-h, var(--awhite));
}
form.ac-form .ac-reply-content {
border: 1px solid var(--cinefox-orange-accent);
background-color: var(--flex-gray-7);
border-radius: 5px;
padding: 8px;
margin-left: 10px;
}
form.ac-form .ac-reply-content:focus-within {
border-color: var(--gc-snarkive-purple);
}
.acomment-content {
color: var(--awhite);
}
/*
-----------------
19 - bbPress
-----------------
*/
/* --- Forum Header --- */
#bbpress-forums li.bbp-header {
background: var(--flex-gray-1);
}
.page-header-1 img {
width: 150px;
}
/* --- Forum Markers --- */
.rbct ul {
list-style: none;
}
.rbct ul ul {
list-style: none;
}
/* --- Forum Body --- */
#bbpress-forums div.odd,
#bbpress-forums ul.odd {
background-color: var(--flex-overlay-1);
}
.bbp-forum-content ul.sticky,
.bbp-topics ul.sticky,
.bbp-topics ul.super-sticky,
.bbp-topics-front ul.super-sticky {
background-color: #e6440a54 !important;
font-size: 1.1em;
}
/* Forum Meta Avatar */
#bbpress-forums p.bbp-topic-meta img.avatar {
float: none;
margin-bottom: -3px;
border: 3px solid #ddd;
-webkit-box-shadow: none;
box-shadow: none;
width: 30px;
border-radius: 50%;
}
/* Forum Tags */
.select2-container--default .select2-selection--multiple {
background-color: var(--flex-gray-7);
border: 1px solid #d45f3559 !important;
border-radius: 4px;
cursor: text;
}
body .bb-select-dropdown.select2-dropdown {
background: var(--flex-gray-7);
box-shadow:
0 2px 7px 1px rgba(0, 0, 0, 0.05),
0 6px 32px 0 rgba(18, 43, 70, 0.1);
border-radius: 4px;
border: 0;
padding: 5px 10px;
margin-right: 0;
max-width: 300px;
}
/* --- Forum Footer --- */
#bbpress-forums li.bbp-footer,
#bbpress-forums li.bbp-header {
background: var(--flex-gray-1);
border-top: 1px solid #eee;
font-weight: 700;
padding: 8px;
text-align: center;
}
/* --- Thread Header --- */
#bbpress-forums div.bbp-forum-header,
#bbpress-forums div.bbp-reply-header,
#bbpress-forums div.bbp-topic-header {
background-color: var(--flex-gray-7);
}
/* --- Thread Body --- */
#bbpress-forums div.even,
#bbpress-forums ul.even {
background-color: var(--flex-gray-2);
box-shadow: 0 0px 20px -5px;
}
span.bbp-admin-links a {
color: var(--body-fcolor);
font-weight: 400;
font-size: 10px;
text-transform: uppercase;
text-decoration: none;
}
@media (min-width: 1025px) {
.type-reply,
.bbp-replies .topic {
margin-bottom: 30px;
padding: 40px;
box-shadow: 0 2px 20px -5px;
}
}
#bbpress-forums div.bbp-the-content-wrapper {
margin-bottom: 10px;
border: 1px solid #d45f3559 !important;
}
/* --- Single Forum Box Style --- */
.ruby-single-forum {
display: flex;
align-items: center;
flex-flow: row nowrap;
width: 100%;
min-height: 120px;
padding: 20px;
border-left: 5px solid;
border-radius: var(--bbp-round-7);
box-shadow: 0 5px 20px var(--shadow-7);
gap: 30px;
background-color: var(--bbp-white);
}
/* --- Thread Background Color --- */
@media (min-width: 1025px) {
.type-reply,
.bbp-replies .topic {
margin-bottom: 30px;
padding: 40px;
box-shadow: 0 4px 20px;
}
}
/* --- Thread Reply Box --- */
.bbp-reply-form .bbp-form {
border: solid 1px;
}
/*
-----------------
20 - WooCommerce
-----------------
*/
/*-----------------
21 - Mailpoet
-------------------
*/
/* --- Mailpoet Form Field Background Color --- */
.mp-email-field {
background-color: var(--input-bg,
var(--flex-gray-7)) !important;
/* Match Foxiz input background */
color: var(--input-fcolor) !important;
/* Match Foxiz input text color */
}
/*
-----------------
22 - Wordpress Hacks
-----------------
*/
/* --- Hide Wordpress Page Titles --- */
.page .entry-title,
.page-title {
display: none;
}
/* Ensure the main site container respects your framework gutter */
body {
--wp--style--root--padding-left: 0;
--wp--preset--spacing--md: 0
/* Fallback if JSON fails */
}
.wp-site-blocks,
.entry-content {
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
}
/* 23 - Admin */
.wp-block .wp-block[data-type='core/group']:not([data-align='full']):not([data-align='wide']):not([data-align='left']):not([data-align='right']),
.wp-block .wp-block[data-type='core/cover']:not([data-align='full']):not([data-align='wide']):not([data-align='left']):not([data-align='right']) {
max-width: unset !important;
margin-right: unset !important;
margin-left: unset !important;
}
/* Admin Editor Wrapper */
body.admin-bar :where(.editor-styles-wrapper) {
margin-top: 32px !important;
padding: 30px !important;
}
/* Admin Editor - Title */
:root :where(.editor-styles-wrapper) :where(.wp-block-post-title) {
font-weight: 600 !important;
}
/* Post Card Edit Link */
.p-wrap {
position: relative;
}
.card-edit-link {
position: absolute;
top: 10px;
right: 10px;
z-index: 10;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.p-wrap:hover .card-edit-link {
opacity: 1;
}
.card-edit-link:hover {
background-color: rgba(0, 0, 0, 0.9);
}
.card-edit-link svg {
fill: #fff;
}