/*
Theme Name: Cinesist Nexus
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.0.4
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.
Uploaded from Home PC 6-25-2026 @ 2:22am.
*/
/*
-----------------
>>> TABLE OF CONTENTS:
0 - System Tokens (Reset, @property, Root Variables)
1 - Framework & Core Resets (Admin Visibility, Selection Glow)
2 - Typography (Global Headings, Fluid Scales, Fonts)
3 - Layout (Global Containers, Grid/Flex Patterns)
4 - Navigation (Main Menu, Header, Navigation HUD)
5 - Elements (Buttons, Pills, UI Components)
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 - CinesistDB Core
18 - Social & Recruitment
19 - bbPress - Not Implemented
20 - WooCommerce - Not Implemented
21 - Mailpoet
22 - Wordpress Hacks
23 - Admin
24 - Gallery Patterns
-----------------
*/
/*
-----------------
0 - System Tokens (Reset, Root Variables)
-----------------
*/
/*
-----------------
Fonts & Icons Import
-----------------
*/
/* Emojis */
@font-face {
font-family: "Noto Color Emoji";
src: url("assets/fonts/Noto Color Emoji/NotoColorEmoji-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* Body Font */
/* Geist Roman (Upright Variable) */
@font-face {
font-family: 'Geist';
src: url('assets/fonts/Geist/Geist-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* Geist Italic (Variable) */
@font-face {
font-family: 'Geist';
src: url('assets/fonts/Geist/Geist-Italic-VariableFont_wght.ttf') format('truetype-variations');
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
/* Headings Font */
/* Blinker Variable Font (Main weights) */
@font-face {
font-family: 'Blinker';
src: url('assets/fonts/Blinker/Blinker_variable_font.ttf') format('truetype-variations');
font-weight: 100 900;
/* Maps full weight range (Thin to Black) */
font-style: normal;
font-display: swap;
}
/* Blinker Headline (Static standalone weight) */
@font-face {
font-family: 'Blinker Headline';
src: url('assets/fonts/Blinker/Blinker-Headline.ttf') format('truetype');
font-weight: 700;
/* Or use 'normal' if you prefer */
font-style: normal;
font-display: swap;
}
/*
-----------------
Global Root Variables
-----------------
*/
:root {
/* Cinesist Fonts */
/* Body Font */
--font-sans: "Geist", sans-serif !important;
/* Headings Font */
--font-heading: "Blinker", sans-serif !important;
/* Legacy Variable */
--font-display: "Blinker", sans-serif !important;
/* Cinesist Emoji's */
--font-emoji: "Noto Color Emoji";
/* Elementor Overrides */
--e-global-typography-primary-font-family: "Blinker", sans-serif !important;
--e-global-typography-secondary-font-family: "Geist", sans-serif !important;
/* Movie Engine Font Family Over rides */
--movie-engine-heading-font: 'Blinker', sans-serif;
--movie-engine-body-font: 'Geist', sans-serif;
/*
-----------------
Base Colors based on Tailwind.css (OKLCH)
-----------------
*/
--color-red-50: oklch(97.1% 0.013 17.38);
--color-red-100: oklch(93.6% 0.032 17.717);
--color-red-200: oklch(88.5% 0.062 18.334);
--color-red-300: oklch(80.8% 0.114 19.571);
--color-red-400: oklch(70.4% 0.191 22.216);
--color-red-500: oklch(63.7% 0.237 25.331);
--color-red-600: oklch(57.7% 0.245 27.325);
--color-red-700: oklch(50.5% 0.213 27.518);
--color-red-800: oklch(44.4% 0.177 26.899);
--color-red-900: oklch(39.6% 0.141 25.723);
--color-red-950: oklch(25.8% 0.092 26.042);
--color-yellow-50: oklch(98.7% 0.026 102.212);
--color-yellow-100: oklch(97.3% 0.071 103.193);
--color-yellow-200: oklch(94.5% 0.129 101.54);
--color-yellow-300: oklch(90.5% 0.182 98.111);
--color-yellow-400: oklch(85.2% 0.199 91.936);
--color-yellow-500: oklch(79.5% 0.184 86.047);
--color-yellow-600: oklch(68.1% 0.162 75.834);
--color-yellow-700: oklch(55.4% 0.135 66.442);
--color-yellow-800: oklch(47.6% 0.114 61.907);
--color-yellow-900: oklch(42.1% 0.095 57.708);
--color-yellow-950: oklch(28.6% 0.066 53.813);
--color-lime-50: oklch(98.6% 0.031 120.757);
--color-lime-100: oklch(96.7% 0.067 122.328);
--color-lime-200: oklch(93.8% 0.127 124.321);
--color-lime-300: oklch(89.7% 0.196 126.665);
--color-lime-400: oklch(84.1% 0.238 128.85);
--color-lime-500: oklch(76.8% 0.233 130.85);
--color-lime-600: oklch(64.8% 0.2 131.684);
--color-lime-700: oklch(53.2% 0.157 131.589);
--color-lime-800: oklch(45.3% 0.124 130.933);
--color-lime-900: oklch(40.5% 0.101 131.063);
--color-lime-950: oklch(27.4% 0.072 132.109);
--color-green-50: oklch(98.2% 0.018 155.826);
--color-green-100: oklch(96.2% 0.044 156.743);
--color-green-200: oklch(92.5% 0.084 155.995);
--color-green-300: oklch(87.1% 0.15 154.449);
--color-green-400: oklch(79.2% 0.209 151.711);
--color-green-500: oklch(72.3% 0.219 149.579);
--color-green-600: oklch(62.7% 0.194 149.214);
--color-green-700: oklch(52.7% 0.154 150.069);
--color-green-800: oklch(44.8% 0.119 151.328);
--color-green-900: oklch(39.3% 0.095 152.535);
--color-green-950: oklch(26.6% 0.065 152.934);
--color-emerald-50: oklch(97.9% 0.021 166.113);
--color-emerald-100: oklch(95% 0.052 163.051);
--color-emerald-200: oklch(90.5% 0.093 164.15);
--color-emerald-300: oklch(84.5% 0.143 164.978);
--color-emerald-400: oklch(76.5% 0.177 163.223);
--color-emerald-500: oklch(69.6% 0.17 162.48);
--color-emerald-600: oklch(59.6% 0.145 163.225);
--color-emerald-700: oklch(50.8% 0.118 165.612);
--color-emerald-800: oklch(43.2% 0.095 166.913);
--color-emerald-900: oklch(37.8% 0.077 168.94);
--color-emerald-950: oklch(26.2% 0.051 172.552);
--color-teal-50: oklch(98.4% 0.014 180.72);
--color-teal-100: oklch(95.3% 0.051 180.801);
--color-teal-200: oklch(91% 0.096 180.426);
--color-teal-300: oklch(85.5% 0.138 181.071);
--color-teal-400: oklch(77.7% 0.152 181.912);
--color-teal-500: oklch(70.4% 0.14 182.503);
--color-teal-600: oklch(60% 0.118 184.704);
--color-teal-700: oklch(51.1% 0.096 186.391);
--color-teal-800: oklch(43.7% 0.078 188.216);
--color-teal-900: oklch(38.6% 0.063 188.416);
--color-teal-950: oklch(27.7% 0.046 192.524);
/* The Wire Main Color */
--color-cyan-50: oklch(98.4% 0.019 200.873);
--color-cyan-100: oklch(95.6% 0.045 203.388);
--color-cyan-200: oklch(91.7% 0.08 205.041);
--color-cyan-300: oklch(86.5% 0.127 207.078);
--color-cyan-400: oklch(78.9% 0.154 211.53);
/* The Wire Base Color */
--color-cyan-500: oklch(71.5% 0.143 215.221);
/* The Wire Hover Color */
--color-cyan-600: oklch(60.9% 0.126 221.723);
--color-cyan-700: oklch(52% 0.105 223.128);
--color-cyan-800: oklch(45% 0.085 224.283);
--color-cyan-900: oklch(39.8% 0.07 227.392);
--color-cyan-950: oklch(30.2% 0.056 229.695);
--color-sky-50: oklch(97.7% 0.013 236.62);
--color-sky-100: oklch(95.1% 0.026 236.824);
--color-sky-200: oklch(90.1% 0.058 230.902);
--color-sky-300: oklch(82.8% 0.111 230.318);
--color-sky-400: oklch(74.6% 0.16 232.661);
--color-sky-500: oklch(68.5% 0.169 237.323);
--color-sky-600: oklch(58.8% 0.158 241.966);
--color-sky-700: oklch(50% 0.134 242.749);
--color-sky-800: oklch(44.3% 0.11 240.79);
--color-sky-900: oklch(39.1% 0.09 240.876);
--color-sky-950: oklch(29.3% 0.066 243.157);
--color-blue-50: oklch(97% 0.014 254.604);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-200: oklch(88.2% 0.059 254.128);
--color-blue-300: oklch(80.9% 0.105 251.813);
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-800: oklch(42.4% 0.199 265.638);
--color-blue-900: oklch(37.9% 0.146 265.522);
--color-blue-950: oklch(28.2% 0.091 267.935);
--color-indigo-50: oklch(96.2% 0.018 272.314);
--color-indigo-100: oklch(93% 0.034 272.788);
--color-indigo-200: oklch(87% 0.065 274.039);
--color-indigo-300: oklch(78.5% 0.115 274.713);
--color-indigo-400: oklch(67.3% 0.182 276.935);
--color-indigo-500: oklch(58.5% 0.233 277.117);
--color-indigo-600: oklch(51.1% 0.262 276.966);
--color-indigo-700: oklch(45.7% 0.24 277.023);
--color-indigo-800: oklch(39.8% 0.195 277.366);
--color-indigo-900: oklch(35.9% 0.144 278.697);
--color-indigo-950: oklch(25.7% 0.09 281.288);
--color-violet-50: oklch(96.9% 0.016 293.756);
--color-violet-100: oklch(94.3% 0.029 294.588);
--color-violet-200: oklch(89.4% 0.057 293.283);
--color-violet-300: oklch(81.1% 0.111 293.571);
--color-violet-400: oklch(70.2% 0.183 293.541);
--color-violet-500: oklch(60.6% 0.25 292.717);
--color-violet-600: oklch(54.1% 0.281 293.009);
--color-violet-700: oklch(49.1% 0.27 292.581);
--color-violet-800: oklch(43.2% 0.232 292.759);
--color-violet-900: oklch(38% 0.189 293.745);
--color-violet-950: oklch(28.3% 0.141 291.089);
--color-pink-50: oklch(97.1% 0.014 343.198);
--color-pink-100: oklch(94.8% 0.028 342.258);
--color-pink-200: oklch(89.9% 0.061 343.231);
--color-pink-300: oklch(82.3% 0.12 346.018);
--color-pink-400: oklch(71.8% 0.202 349.761);
--color-pink-500: oklch(65.6% 0.241 354.308);
--color-pink-600: oklch(59.2% 0.249 0.584);
--color-pink-700: oklch(52.5% 0.223 3.958);
--color-pink-800: oklch(45.9% 0.187 3.815);
--color-pink-900: oklch(40.8% 0.153 2.432);
--color-pink-950: oklch(28.4% 0.109 3.907);
--color-rose-50: oklch(96.9% 0.015 12.422);
--color-rose-100: oklch(94.1% 0.03 12.58);
--color-rose-200: oklch(89.2% 0.058 10.001);
--color-rose-300: oklch(81% 0.117 11.638);
--color-rose-400: oklch(71.2% 0.194 13.428);
--color-rose-500: oklch(64.5% 0.246 16.439);
--color-rose-600: oklch(58.6% 0.253 17.585);
--color-rose-700: oklch(51.4% 0.222 16.935);
--color-rose-800: oklch(45.5% 0.188 13.697);
--color-rose-900: oklch(41% 0.159 10.272);
--color-rose-950: oklch(27.1% 0.105 12.094);
--color-slate-50: oklch(98.4% 0.003 247.858);
--color-slate-100: oklch(96.8% 0.007 247.896);
--color-slate-200: oklch(92.9% 0.013 255.508);
--color-slate-300: oklch(86.9% 0.022 252.894);
--color-slate-400: oklch(70.4% 0.04 256.788);
--color-slate-500: oklch(55.4% 0.046 257.417);
--color-slate-600: oklch(44.6% 0.043 257.281);
--color-slate-700: oklch(37.2% 0.044 257.287);
--color-slate-800: oklch(27.9% 0.041 260.031);
--color-slate-900: oklch(20.8% 0.042 265.755);
--color-slate-950: oklch(12.9% 0.042 264.695);
--color-gray-50: oklch(98.5% 0.002 247.839);
--color-gray-100: oklch(96.7% 0.003 264.542);
--color-gray-200: oklch(92.8% 0.006 264.531);
--color-gray-300: oklch(87.2% 0.01 258.338);
--color-gray-400: oklch(70.7% 0.022 261.325);
--color-gray-500: oklch(55.1% 0.027 264.364);
--color-gray-600: oklch(44.6% 0.03 256.802);
--color-gray-700: oklch(37.3% 0.034 259.733);
--color-gray-800: oklch(27.8% 0.033 256.848);
--color-gray-900: oklch(21% 0.034 264.665);
--color-gray-950: oklch(13% 0.028 261.692);
--color-zinc-50: oklch(98.5% 0 0);
--color-zinc-100: oklch(96.7% 0.001 286.375);
--color-zinc-200: oklch(92% 0.004 286.32);
--color-zinc-300: oklch(87.1% 0.006 286.286);
--color-zinc-400: oklch(70.5% 0.015 286.067);
--color-zinc-500: oklch(55.2% 0.016 285.938);
--color-zinc-600: oklch(44.2% 0.017 285.786);
--color-zinc-700: oklch(37% 0.013 285.805);
--color-zinc-800: oklch(27.4% 0.006 286.033);
--color-zinc-900: oklch(21% 0.006 285.885);
--color-zinc-950: oklch(14.1% 0.005 285.823);
--color-neutral-50: oklch(98.5% 0 0);
--color-neutral-100: oklch(97% 0 0);
--color-neutral-200: oklch(92.2% 0 0);
--color-neutral-300: oklch(87% 0 0);
--color-neutral-400: oklch(70.8% 0 0);
--color-neutral-500: oklch(55.6% 0 0);
--color-neutral-600: oklch(43.9% 0 0);
--color-neutral-700: oklch(37.1% 0 0);
--color-neutral-800: oklch(26.9% 0 0);
--color-neutral-900: oklch(20.5% 0 0);
--color-neutral-950: oklch(14.5% 0 0);
--color-stone-50: oklch(98.5% 0.001 106.423);
--color-stone-100: oklch(97% 0.001 106.424);
--color-stone-200: oklch(92.3% 0.003 48.717);
--color-stone-300: oklch(86.9% 0.005 56.366);
--color-stone-400: oklch(70.9% 0.01 56.259);
--color-stone-500: oklch(55.3% 0.013 58.071);
--color-stone-600: oklch(44.4% 0.011 73.639);
--color-stone-700: oklch(37.4% 0.01 67.558);
--color-stone-800: oklch(26.8% 0.007 34.298);
--color-stone-900: oklch(21.6% 0.006 56.043);
--color-stone-950: oklch(14.7% 0.004 49.25);
--color-mauve-50: oklch(98.5% 0 0);
--color-mauve-100: oklch(96% 0.003 325.6);
--color-mauve-200: oklch(92.2% 0.005 325.62);
--color-mauve-300: oklch(86.5% 0.012 325.68);
--color-mauve-400: oklch(71.1% 0.019 323.02);
--color-mauve-500: oklch(54.2% 0.034 322.5);
--color-mauve-600: oklch(43.5% 0.029 321.78);
--color-mauve-700: oklch(36.4% 0.029 323.89);
--color-mauve-800: oklch(26.3% 0.024 320.12);
--color-mauve-900: oklch(21.2% 0.019 322.12);
--color-mauve-950: oklch(14.5% 0.008 326);
--color-olive-50: oklch(98.8% 0.003 106.5);
--color-olive-100: oklch(96.6% 0.005 106.5);
--color-olive-200: oklch(93% 0.007 106.5);
--color-olive-300: oklch(88% 0.011 106.6);
--color-olive-400: oklch(73.7% 0.021 106.9);
--color-olive-500: oklch(58% 0.031 107.3);
--color-olive-600: oklch(46.6% 0.025 107.3);
--color-olive-700: oklch(39.4% 0.023 107.4);
--color-olive-800: oklch(28.6% 0.016 107.4);
--color-olive-900: oklch(22.8% 0.013 107.4);
--color-olive-950: oklch(15.3% 0.006 107.1);
--color-mist-50: oklch(98.7% 0.002 197.1);
--color-mist-100: oklch(96.3% 0.002 197.1);
--color-mist-200: oklch(92.5% 0.005 214.3);
--color-mist-300: oklch(87.2% 0.007 219.6);
--color-mist-400: oklch(72.3% 0.014 214.4);
--color-mist-500: oklch(56% 0.021 213.5);
--color-mist-600: oklch(45% 0.017 213.2);
--color-mist-700: oklch(37.8% 0.015 216);
--color-mist-800: oklch(27.5% 0.011 216.9);
--color-mist-900: oklch(21.8% 0.008 223.9);
--color-mist-950: oklch(14.8% 0.004 228.8);
/* Taupe Scale */
--color-taupe-50: oklch(98.6% 0.002 67.8);
--color-taupe-100: oklch(96% 0.002 17.2);
--color-taupe-200: oklch(92.2% 0.005 34.3);
--color-taupe-300: oklch(86.8% 0.007 39.5);
--color-taupe-400: oklch(71.4% 0.014 41.2);
--color-taupe-500: oklch(54.7% 0.021 43.1);
--color-taupe-600: oklch(43.8% 0.017 39.3);
--color-taupe-700: oklch(36.7% 0.016 35.7);
--color-taupe-800: oklch(26.8% 0.011 36.5);
--color-taupe-900: oklch(21.4% 0.009 43.1);
--color-taupe-950: oklch(14.7% 0.004 49.3);
--color-black: #000;
--color-white: #fff;
/*
--------------------
New light-dark Variables(replaces foxiz dual variables system.)
--------------------
*/
/* --- Brand: Purple (#d102d1) to Brand: Orange (#d45f35) --- */
--cs-brand: light-dark(oklch(0.604 0.277 328.37), oklch(0.624 0.158 39.51));
--cs-brand-50: light-dark(oklch(0.962 0.034 325.9), oklch(0.958 0.018 26.18));
--cs-brand-100: light-dark(oklch(0.921 0.072 326.17), oklch(0.926 0.032 27.46));
--cs-brand-200: light-dark(oklch(0.846 0.148 326.8), oklch(0.852 0.066 30.1));
--cs-brand-300: light-dark(oklch(0.771 0.233 327.56), oklch(0.779 0.108 32.98));
--cs-brand-400: light-dark(oklch(0.698 0.32 328.37), oklch(0.706 0.161 37.82));
--cs-brand-500: light-dark(oklch(0.604 0.277 328.37), oklch(0.624 0.158 39.51));
--cs-brand-600: light-dark(oklch(0.514 0.236 328.37), oklch(0.531 0.135 39.32));
--cs-brand-700: light-dark(oklch(0.424 0.194 328.37), oklch(0.433 0.11 39.24));
--cs-brand-800: light-dark(oklch(0.331 0.152 328.37), oklch(0.335 0.085 39.24));
--cs-brand-900: light-dark(oklch(0.239 0.11 328.37), oklch(0.239 0.06 39.29));
--cs-brand-950: light-dark(oklch(0.188 0.087 328.37), oklch(0.18 0.046 38.7));
/* --- Brand: Orange (#d45f35) to Brand: Purple (#d102d1) --- */
--cs-brand-2: light-dark(oklch(0.624 0.158 39.51), oklch(0.604 0.277 328.37));
--cs-brand-2-50: light-dark(oklch(0.958 0.018 26.18), oklch(0.962 0.034 325.9));
--cs-brand-2-100: light-dark(oklch(0.926 0.032 27.46), oklch(0.921 0.072 326.17));
--cs-brand-2-200: light-dark(oklch(0.852 0.066 30.1), oklch(0.846 0.148 326.8));
--cs-brand-2-300: light-dark(oklch(0.779 0.108 32.98), oklch(0.771 0.233 327.56));
--cs-brand-2-400: light-dark(oklch(0.706 0.161 37.82), oklch(0.698 0.32 328.37));
--cs-brand-2-500: light-dark(oklch(0.624 0.158 39.51), oklch(0.604 0.277 328.37));
--cs-brand-2-600: light-dark(oklch(0.531 0.135 39.32), oklch(0.514 0.236 328.37));
--cs-brand-2-700: light-dark(oklch(0.433 0.11 39.24), oklch(0.424 0.194 328.37));
--cs-brand-2-800: light-dark(oklch(0.335 0.085 39.24), oklch(0.331 0.152 328.37));
--cs-brand-2-900: light-dark(oklch(0.239 0.06 39.29), oklch(0.239 0.11 328.37));
--cs-brand-2-950: light-dark(oklch(0.18 0.046 38.7), oklch(0.188 0.087 328.37));
/* Brand: Purple-Orange Opacity Scale */
--cs-brand-90: oklch(from var(--cs-brand) l c h / 0.9);
--cs-brand-80: oklch(from var(--cs-brand) l c h / 0.8);
--cs-brand-70: oklch(from var(--cs-brand) l c h / 0.7);
--cs-brand-60: oklch(from var(--cs-brand) l c h / 0.6);
--cs-brand-50: oklch(from var(--cs-brand) l c h / 0.5);
--cs-brand-40: oklch(from var(--cs-brand) l c h / 0.4);
--cs-brand-30: oklch(from var(--cs-brand) l c h / 0.3);
--cs-brand-20: oklch(from var(--cs-brand) l c h / 0.2);
--cs-brand-10: oklch(from var(--cs-brand) l c h / 0.1);
/* Brand: Orange-Purple Opacity Scale */
--cs-brand-2-90: oklch(from var(--cs-brand-2) l c h / 0.9);
--cs-brand-2-80: oklch(from var(--cs-brand-2) l c h / 0.8);
--cs-brand-2-70: oklch(from var(--cs-brand-2) l c h / 0.7);
--cs-brand-2-60: oklch(from var(--cs-brand-2) l c h / 0.6);
--cs-brand-2-50: oklch(from var(--cs-brand-2) l c h / 0.5);
--cs-brand-2-40: oklch(from var(--cs-brand-2) l c h / 0.4);
--cs-brand-2-30: oklch(from var(--cs-brand-2) l c h / 0.3);
--cs-brand-2-20: oklch(from var(--cs-brand-2) l c h / 0.2);
--cs-brand-2-10: oklch(from var(--cs-brand-2) l c h / 0.1);
/* White to Black scaling */
--white-to-black-50: light-dark(var(--color-neutral-50), var(--color-neutral-950));
--white-to-black-100: light-dark(var(--color-neutral-100), var(--color-neutral-900));
--white-to-black-100-rgb: light-dark(rgb(245, 245, 244), rgb(23, 23, 23));
--white-to-black-200: light-dark(var(--color-neutral-200), var(--color-neutral-800));
--white-to-black-300: light-dark(var(--color-neutral-300), var(--color-neutral-700));
--white-to-black-400: light-dark(var(--color-neutral-400), var(--color-neutral-600));
--white-to-black-500: light-dark(var(--color-neutral-500), var(--color-neutral-500));
--white-to-black-600: light-dark(var(--color-neutral-600), var(--color-neutral-400));
--white-to-black-700: light-dark(var(--color-neutral-700), var(--color-neutral-300));
--white-to-black-800: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--white-to-black-900: light-dark(var(--color-neutral-900), var(--color-neutral-100));
--white-to-black-950: light-dark(var(--color-neutral-950), var(--color-neutral-50));
/* Black to White scaling */
--black-to-white-50: light-dark(var(--color-neutral-950), var(--color-neutral-50));
--black-to-white-100: light-dark(var(--color-neutral-900), var(--color-neutral-100));
--black-to-white-100-rgb: light-dark(rgb(23, 23, 23), rgb(245, 245, 244));
--black-to-white-200: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--black-to-white-300: light-dark(var(--color-neutral-700), var(--color-neutral-300));
--black-to-white-400: light-dark(var(--color-neutral-600), var(--color-neutral-400));
--black-to-white-500: light-dark(var(--color-neutral-500), var(--color-neutral-500));
--black-to-white-600: light-dark(var(--color-neutral-400), var(--color-neutral-600));
--black-to-white-600-rgb: light-dark(rgb(82, 82, 82), rgb(214, 211, 209));
--black-to-white-700: light-dark(var(--color-neutral-300), var(--color-neutral-700));
--black-to-white-800: light-dark(var(--color-neutral-200), var(--color-neutral-800));
--black-to-white-900: light-dark(var(--color-neutral-100), var(--color-neutral-900));
--black-to-white-950: light-dark(var(--color-neutral-50), var(--color-neutral-950));
/* Heading Text Color */
--heading-color: light-dark(var(--color-neutral-950), var(--color-neutral-50));
/* Body Content Text Color */
--primary-text-color: light-dark(var(--color-neutral-800), var(--color-neutral-100));
--secondary-text-color: light-dark(var(--color-neutral-700), var(--color-neutral-200));
/* Elementor Variable Overides Temp-delete when elementor removed */
--e-global-color-primary: var(--cs-brand-400);
--e-global-color-secondary: var(--cs-brand-2-400);
--e-global-color-text: var(--primary-text-color);
--e-global-color-accent: var(--cs-brand);
--e-global-color-1fd2991: var(--heading-color);
--e-global-color-f93ac62: #E5E5E5;
--e-global-color-a22e375: #D4D4D4;
--e-global-color-e4c1a00: #1A1A1A;
--e-global-color-193ea87: #E50914;
--e-global-color-7a0a430: #E12AFB;
--e-global-color-3b4128c: #A800B7;
--e-global-color-be7eab9: #FF6900;
--e-global-color-4b26f47: #BB4D00;
--e-global-color-fb66372: #1A1B1FCC;
--e-global-color-fb354da: #E5E5E5CC;
--e-global-color-43c9a83: #1A1B1FF2;
--e-global-color-071f34b: #FF6900B3;
--e-global-color-9476a4a: #A1A1A1;
--e-global-color-9ab51c1: #107C10;
--e-global-color-13c390a: #003FAE;
--e-global-color-970e10e: #708090;
--e-global-color-0e9374f: #7CCF00;
--e-global-color-cf0ea69: #FDC700;
--e-global-color-c668243: #0070DD;
--e-global-color-30d58ee: #1EFF00;
--e-global-color-2af310b: #9D9D9D;
--e-global-color-0482736: #FF0000;
/* Consolidated Light/Dark Variables */
--contrast-1: light-dark(#ffffff, #000000);
--contrast-2: light-dark(#eaeaea, #131313);
/* --- Light To Dark Mode Neutral Scale (#F2F2F2 Base) --- */
--cs-bg: light-dark(oklch(0.9612 0 0), oklch(0.5275 0 0));
--cs-bg-100: light-dark(oklch(0.9515 0 0), oklch(0.5275 0 0));
--cs-bg-500: var(--cs-bg);
--cs-bg-900: oklch(0.5275 0 0);
/* Light Mode to Dark Mode BG Opacities */
--cs-bg-90: oklch(from var(--cs-bg) l c h / 0.9);
--cs-bg-50: oklch(from var(--cs-bg) l c h / 0.5);
--cs-bg-10: oklch(from var(--cs-bg) l c h / 0.1);
/* --- Light Mode to Dark Mode Rich Scale (#DBDBDB Base) --- */
--cs-bg-2: light-dark(oklch(0.8914 0 0), oklch(0.33588 0 0));
--cs-bg-2-rgb: light-dark(rgb(219, 219, 219), rgb(13, 13, 13));
--cs-bg-2-100: light-dark(oklch(87.2% 0.01 258.338), oklch(33.588% 0.033 261.424));
--cs-bg-2-500: var(--cs-bg-2);
--cs-bg-2-900: oklch(33.588% 0.033 261.424);
/* Light Mode to Dark Mode BG Opacities */
--cs-bg-2-90: oklch(from var(--cs-bg-2) l c h / 0.9);
--cs-bg-2-50: oklch(from var(--cs-bg-2) l c h / 0.5);
--cs-bg-2-10: oklch(from var(--cs-bg-2) l c h / 0.1);
/* Light Gray to Dark Gray */
--flex-bg-color-1: light-dark (var(--color-neutral-200), var(--color-neutral-900));
--flex-bg-color-2: light-dark (var(--color-neutral-300), var(--color-neutral-800));
--flex-bg-color-3: light-dark (var(--color-neutral-400), var(--color-neutral-700));
/* Dark Gray to Light Gray */
--flex-bg-color-4: light-dark (var(--color-neutral-900), var(--color-neutral-200));
--flex-bg-color-5: light-dark (var(--color-neutral-800), var(--color-neutral-300));
--flex-bg-color-6: light-dark (var(--color-neutral-700), var(--color-neutral-400));
/* White to Black Header Color */
--flex-header-bg: light-dark(linear-gradient(to right, #fff 20%, #e5e5e5 100%),
linear-gradient(to right, #000000 20%, #1a1b1f 100%));
--flex-footer-bg: light-dark(linear-gradient(to right, #fff 20%, #e5e5e5 100%),
linear-gradient(to right, #000000 20%, #1a1b1f 100%));
/* White to Black Footer Color */
--flex-footer-color: light-dark(#fff, #000);
--flex-header-color: light-dark(#fff, #000);
/* Light Gray to Dark Gray */
--flex-gray-1: light-dark(var(--color-gray-100), var(--color-neutral-900));
--flex-gray-2: light-dark(var(--color-gray-200), var(--color-neutral-800));
--flex-gray-3: light-dark(var(--color-gray-300), var(--color-neutral-700));
--flex-gray-4: light-dark(var(--color-gray-400), var(--color-neutral-600));
/* Dark Gray to Light Gray */
--flex-gray-5: light-dark(var(--color-gray-500), var(--color-neutral-500));
--flex-gray-6: light-dark(var(--color-gray-600), var(--color-neutral-400));
--flex-gray-7: light-dark(rgba(255, 255, 255, 0.35) !important, rgba(0, 0, 0, 0.35) !important);
--flex-gray-8: light-dark(var(--color-gray-800), var(--color-neutral-300));
/* Extended Light Grays to Dark Grays */
--flex-gray-15: light-dark(#888888ea, #88888826);
/* Brand Purple Stages */
--cs-brand: light-dark(var(--cs-brand-400), var(--cs-brand-400));
--cs-brand-90: light-dark(var(--cs-brand-90), var(--cs-brand-90));
--cs-brand-50: light-dark(var(--cs-brand-50), var(--cs-brand-50));
/* Brand Orange Stages */
--brand-orange: light-dark(var(--cs-brand-2-400), var(--cs-brand-2-400));
--brand-orange-90: light-dark(var(--cs-brand-2-90), var(--cs-brand-2-90));
--brand-orange-50: light-dark(var(--cs-brand-2-50), var(--cs-brand-2-50));
/* Dark Gray Title to White Title */
--flex-text-title: light-dark(#1a1a1a !important, #ffffff !important);
--flex-text-primary: light-dark(#2a2a2a, #f0f0f0);
--flex-text-secondary: light-dark(#555555, #cccccc);
--flex-decor-border: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
/* Glass BG */
--flex-glass-bg: light-dark(rgb(255, 255, 255, /70%) !important, rgb(0 0 0 / 60%) !important);
--news-letter-bg: light-dark(#e5e5e5, #1a1b1f);
--flex-hover-brightness: light-dark(110%, 1.2);
/* Custom Shadows */
--shadow-1: light-dark(5px 10px 20px 0px #00000051, 5px 10px 20px 0px #0000004d);
--shadow-7: light-dark(#00000051, #00000051);
--ticket-bg-color: light-dark(var(--flex-gray-3), var(--flex-gray-3));
--ticket-text-color: light-dark(var(--flex-title-color), var(--flex-title-color));
--ticket-text-hover: light-dark(var(--cs-brand-400), #d45f35);
--ticket-text-current: light-dark(#111111, #ffffff);
--review-color: light-dark(var(--review-accent), var(--review-accent));
--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--cs-brand: var(--cs-brand);
--wp--preset--color--cs-brand-90: var(--cs-brand-90);
--wp--preset--color--cs-brand-50: var(--cs-brand-50);
--wp--preset--color--brand-orange: var(--brand-orange);
--wp--preset--color--brand-orange-90: var(--brand-orange-90);
--wp--preset--color--brand-orange-50: var(--brand-orange-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);
/* Movie Engine Color Over rides */
--movie-engine-primary-color: var(--cs-brand);
--movie-engine-primary-hover-color: var(--cs-brand-600);
--movie-engine-bg-color: var(--cs-bg-2);
--movie-engine-bg-rgb: var(--cs-bg-2-500);
--movie-engine-body-color: var(--primary-text-color);
--movie-engine-white-color: var(--black-to-white-100);
--movie-engine-white-color-rgb: var(--black-to-white-100-rgb);
--movie-engine-black-color: var(--white-to-black-100);
--movie-engine-black-rgb: var(--white-to-black-100-rgb);
/*
-----------------
Layout Widths
-----------------
*/
--cs-width-full: 100%;
--cs-width-xl: 1520px;
--cs-width-lg: 1300px;
--cs-width-md: 1000px;
--cs-width-sm: 800px;
--layout-full-width: var(--cs-width-full);
--layout-page-max-width: var(--cs-width-xl);
--layout-content-max-width: var(--cs-width-lg);
--cs-width: var(--cs-width-lg);
/* Movie Engine Width Overrides */
--movie-engine-container-width: var(--cs-width-lg);
/*
-----------------
Dimensions & Spacing
-----------------
*/
--spacing: 0.25rem;
--container-2xl: 42rem;
--container-7xl: var(--cs-width-lg);
--border-radius-1: 0.25rem;
--border-radius-2: 0.5rem;
--border-radius-3: 0.75rem;
--border-radius-4: 1rem;
--border-radius-5: 1.25rem;
--border-radius-6: 1.5rem;
--border-radius-7: 1.75rem;
--border-radius-8: 2rem;
/*
-----------------
Layout Tokens
-----------------
*/
--tracking-tighter: -0.05em;
--tracking-tight: -0.025em;
--tracking-wide: 0.025em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
--leading-tight: 1.25;
--leading-relaxed: 1.625;
/*
-----------------
Effects & Transitions
-----------------
*/
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
--drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / 0.15);
--cs-border: 1px solid var(--cs-brand-30);
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--blur-sm: 8px;
--blur-md: 12px;
--blur-lg: 16px;
--blur-xl: 24px;
--blur-3xl: 64px;
--aspect-video: 16 / 9;
--default-transition-duration: 150ms;
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
/*
-----------------
Fluid Typography
Base: 16px Ratio: ~1.25 (Major Third) for High Impact
-----------------
*/
/* --- Heading Sizes --- */
/* H6: Metadata/Labels (Target 14px -> 16px) */
--cs-font-size-h6: clamp(0.875rem, 0.1vw + 0.85rem, 1rem);
/* H5: Minor Subheads (Target 16px -> 20px) */
--cs-font-size-h5: clamp(1rem, 0.3vw + 0.95rem, 1.25rem);
/* H4: Card Titles/Subsections (Target 20px -> 24px) */
--cs-font-size-h4: clamp(1.05rem, 0.5vw + 1.1rem, 1.25rem);
/* H3: Section Headers (Target 24px -> 32px) */
--cs-font-size-h3: clamp(1.3rem, 1vw + 1.2rem, 1.75rem);
/* H2: Major Anchors (Target 32px -> 48px) */
--cs-font-size-h2: clamp(1.75rem, 2vw + 1.5rem, 2.5rem);
/* H1: The Headliner (Target 40px -> 64px) */
--cs-font-size-h1: clamp(2.1rem, 4vw + 2rem, 3.5rem);
/* --- Contextual Roles --- */
--cs-hero-title-size: var(--cs-font-size-h1);
--cs-post-title-size: var(--cs-font-size-h1);
--cs-post-subtitle-size: var(--cs-font-size-h2);
--cs-card-title-size: var(--cs-font-size-h4);
/* --- Body & UI --- */
--cs-font-size-xs: 0.75rem;
--cs-font-size-sm: 0.875rem;
--cs-font-size-body: 1rem;
--cs-font-size-caption: 0.9rem;
--cs-font-size-cta: clamp(1.1rem, 0.2vw + 1rem, 1.125rem);
/* Icon Sizes */
--cs-icon-size-xs: clamp(0.875rem, 0.1vw + 0.85rem, 1rem);
--cs-icon-size-sm: clamp(0.875rem, 0.1vw + 0.85rem, 1rem);
--cs-icon-size-md: clamp(1rem, 0.3vw + 0.95rem, 1.25rem);
--cs-icon-size-lg: clamp(1.05rem, 0.5vw + 1.1rem, 1.25rem);
--cs-icon-size-xl: clamp(1.3rem, 1vw + 1.2rem, 1.75rem);
/* --- Line Heights (Tighter for Larger Type) --- */
--line-height-h1: 1.1;
--line-height-h2: 1.15;
--line-height-h3: 1.2;
--line-height-h4: 1.3;
--line-height-h5: 1.4;
--line-height-h6: 1.5;
--line-height-body: 1.625;
--line-height-caption: 1.5;
--line-height-cta: 1.2;
/* --- Tracking (The "Vibe" Layer) --- */
--cs-tracking-h1: var(--tracking-tighter);
--cs-tracking-h2: var(--tracking-tight);
--cs-tracking-h3: var(--tracking-tight);
--cs-tracking-h4: normal;
--cs-tracking-h5: var(--tracking-wide);
--cs-tracking-h6: var(--tracking-wider);
--cs-tracking-body: normal;
/* --- Weights --- */
--font-weight-medium: 500;
--font-weight-bold: 700;
--font-weight-black: 900;
--cs-heading-weight: var(--font-weight-bold);
--cs-body-weight: 400;
/*
-----------------
Fluid Spacing
-----------------
*/
/* Article Spacing Protocol */
--cs-article-heading-margin: 1rem;
--cs-article-paragraph-margin: 2rem;
--cs-article-caption-margin: 1rem;
--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-sm: clamp(0.8rem, calc(0.67vw + 0.6rem), 1.24rem);
--cs-space-md: clamp(1rem, calc(1.15vw + 0.66rem), 1.75rem);
--cs-space-lg: 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);
/* Fresh Spacing Clamps */
--cs-space-1: clamp(0.25rem, calc(0vw + 0.25rem), 0.25rem);
--cs-space-2: clamp(0.50rem, calc(0.16vw + 0.45rem), 0.60rem);
--cs-space-3: clamp(0.75rem, calc(0.58vw + 0.58rem), 1.13rem);
--cs-space-4: clamp(1.00rem, calc(1.15vw + 0.66rem), 1.75rem);
--cs-space-5: clamp(1.25rem, calc(1.87vw + 0.70rem), 2.47rem);
--cs-space-6: clamp(1.50rem, calc(2.76vw + 0.68rem), 3.30rem);
--cs-space-7: clamp(1.75rem, calc(3.77vw + 0.64rem), 4.21rem);
--cs-space-8: clamp(2.00rem, calc(4.84vw + 0.57rem), 5.16rem);
--cs-space-9: clamp(2.50rem, calc(7.34vw + 0.33rem), 7.28rem);
--cs-space-10: clamp(3.00rem, calc(10.20vw + -0.02rem), 9.65rem);
--cs-space-11: clamp(4.00rem, calc(15.93vw + -0.71rem), 14.39rem);
--cs-space-12: clamp(5.00rem, calc(21.66vw + -1.41rem), 19.13rem);
/* Functional 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
-----------------
*/
/* Columns */
--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));
--cs-columns-9: repeat(9, minmax(0, 1fr));
--cs-columns-10: repeat(10, minmax(0, 1fr));
--cs-columns-11: repeat(11, minmax(0, 1fr));
--cs-columns-12: repeat(12, 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);
/* 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);
/* Cinesist Primary Shadow */
--cs-shadow-1: 0 5px 30px var(--shadow-7), #00000051;
/*
-----------------
Foxiz Root Overrides
-----------------
*/
--em-mini: 1em;
--rem-mini: 0.8rem;
/*
-----------------
Color Pallette
-----------------
*/
/* Brand Colors */
--cs-black-hat: light-dark(#1a1b1f, #1a1b1f);
--cs-white-hat: light-dark(#e5e5e5, #e5e5e5);
--cinesist-dark-grey: light-dark(#1a1a1a, #1a1a1a);
--cinesist-middle-grey: light-dark(#2a2a2a, #2a2a2a);
--cinesist-light-grey: light-dark(#f2f2f2, #f2f2f2);
--cinesist-title-color: light-dark(#ffffff, #ffffff);
--cinesist-text-color: light-dark(#f0f0f0, #f0f0f0);
--cinesist-gold: light-dark(oklch(0.7868 0.1602 89.51), oklch(0.7868 0.1602 89.51));
--cinesist-red: light-dark(oklch(0.5814 0.2349 27.99), oklch(0.5814 0.2349 27.99));
--cinesist-cyan: light-dark(oklch(.789 .154 211.53), oklch(.789 .154 211.53));
--cinesist-pink: light-dark(oklch(.656 .241 354.297), oklch(.656 .241 354.308));
--cinesist-green: light-dark(oklch(0.7914 0.2091 151.66), oklch(0.7914 0.2091 151.66));
--cinesist-border-color: light-dark(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
--CinesistDB-purple: light-dark(#d102d1, #d102d1);
--cs-brand-accent: light-dark(#792c85, #792c85);
--cinefox-orange: light-dark(#dd7b45, #dd7b45);
--cinefox-orange-accent: light-dark(#d45f35, #d45f35);
--cinesist-industry: light-dark(#708090, #708090);
--cinesist-tv: light-dark(#0078ae, #0078ae);
--cinesist-info: light-dark(#00ddff, #00ddff);
--cinesist-sucess: light-dark(#7dce94, #7dce94);
--cinesist-warning: light-dark(#fff685, #fff685);
--cinesist-danger: light-dark(#f0217d, #f0217d);
--cinebar-red: light-dark(#ff0d0d, #ff0d0d);
--cinebar-orange: light-dark(#ff5612, #ff5612);
--cinebar-yellow: light-dark(#ffa444, #ffa444);
--cinebar-midgreen: light-dark(#a0b339, #a0b339);
--cinebar-green: light-dark(#50a735, #50a735);
--cinefox-white-spy: #e5e5e5;
--cinesist-dark-grey: #1a1a1a;
--cinesist-middle-grey: #2a2a2a;
--cinesist-light-grey: #f2f2f2;
--cinesist-title-color: #ffffff;
/* Makes Titles Gleam White */
--cinesist-text-color: #f0f0f0;
/* Off-white for general text */
--cinesist-gold: light-dark(oklch(0.7868 0.1602 89.51), oklch(0.7868 0.1602 89.51));
/* Cinesist Gold for accents */
--cinesist-red: light-dark(oklch(0.5814 0.2349 27.99), oklch(0.5814 0.2349 27.99));
/* Cinesist Red for accents */
--cinesist-border-color: rgba(255, 255, 255, 0.2);
/* Subtle white border */
--CinesistDB-purple: #d102d1;
/* New: Devil Purple for specific elements */
--cs-brand-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 */
/* Light Mode: White Spy Icon */
--cinesist-card-logo: url("https://www.cinesist.com/wp-content/uploads/2025/10/Cinesist-Black-and-Purple-Icon-Logomark.webp");
--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-brand-purple: #d102d1;
/* CinesistDB Purple Color */
--gc-brand-purple-accent: #792c85;
/* CinesistDB Purple Accent Color */
--bbp-white: #e5e5e5;
/* Custom variable for bbPress white background */
--flex-desc: #000;
/* Custom variable for form description text color */
--cs-spy: #e5e5e5;
/* Custom variable for Cinesist White Spy color */
--btn-primary: var(--cs-brand);
/* CinesistDB Purple to Orange */
--btn-primary-h: var(--brand-orange);
/* CinesistDB Purple Reverse on Hover */
/* --- Solid Colors --- */
--cs-border-color: var(--cs-brand-30);
/* --- Brand: Purple (#d102d1) --- */
--cs-purple: oklch(0.604 0.277 328.37);
--cs-purple-50: oklch(0.962 0.034 325.9);
--cs-purple-100: oklch(0.921 0.072 326.17);
--cs-purple-200: oklch(0.846 0.148 326.8);
--cs-purple-300: oklch(0.771 0.233 327.56);
--cs-purple-400: oklch(0.698 0.32 328.37);
--cs-purple-500: oklch(0.604 0.277 328.37);
--cs-purple-600: oklch(0.514 0.236 328.37);
--cs-purple-700: oklch(0.424 0.194 328.37);
--cs-purple-800: oklch(0.331 0.152 328.37);
--cs-purple-900: oklch(0.239 0.11 328.37);
--cs-purple-950: oklch(0.188 0.087 328.37);
/* Brand: Purple Opacity Scale */
--cs-purple-90: oklch(from var(--cs-purple-500) l c h / 0.9);
--cs-purple-80: oklch(from var(--cs-purple-500) l c h / 0.8);
--cs-purple-70: oklch(from var(--cs-purple-500) l c h / 0.7);
--cs-purple-60: oklch(from var(--cs-purple-500) l c h / 0.6);
--cs-purple-50: oklch(from var(--cs-purple-500) l c h / 0.5);
--cs-purple-40: oklch(from var(--cs-purple-500) l c h / 0.4);
--cs-purple-30: oklch(from var(--cs-purple-500) l c h / 0.3);
--cs-purple-20: oklch(from var(--cs-purple-500) l c h / 0.2);
--cs-purple-10: oklch(from var(--cs-purple-500) l c h / 0.1);
/* --- Brand: Orange (#d45f35) --- */
--cs-orange-base: oklch(0.58 0.16 38.6);
--cs-orange-100: oklch(0.95 0.04 38.6);
--cs-orange-200: oklch(0.85 0.08 38.6);
--cs-orange-300: oklch(0.75 0.12 38.6);
--cs-orange-400: oklch(0.65 0.15 38.6);
--cs-orange-500: var(--cs-orange-base);
--cs-orange-600: oklch(0.5 0.16 38.6);
--cs-orange-700: oklch(0.4 0.14 38.6);
--cs-orange-800: oklch(0.3 0.1 38.6);
--cs-orange-900: oklch(0.15 0.05 38.6);
/* Brand: Orange Opacity Scale */
--cs-orange-90: oklch(from var(--cs-orange-base) l c h / 0.9);
--cs-orange-80: oklch(from var(--cs-orange-base) l c h / 0.8);
--cs-orange-70: oklch(from var(--cs-orange-base) l c h / 0.7);
--cs-orange-60: oklch(from var(--cs-orange-base) l c h / 0.6);
--cs-orange-50: oklch(from var(--cs-orange-base) l c h / 0.5);
--cs-orange-40: oklch(from var(--cs-orange-base) l c h / 0.4);
--cs-orange-30: oklch(from var(--cs-orange-base) l c h / 0.3);
--cs-orange-20: oklch(from var(--cs-orange-base) l c h / 0.2);
--cs-orange-10: oklch(from var(--cs-orange-base) l c h / 0.1);
/* --- Light Mode Neutral Scale (#F2F2F2 Base) --- */
--cs-bg: oklch(0.9612 0 0);
--cs-bg-100: oklch(0.9515 0 0);
--cs-bg-500: var(--cs-bg);
--cs-bg-900: oklch(0.5275 0 0);
/* Light Mode BG Opacities */
--cs-bg-90: oklch(from var(--cs-bg) l c h / 0.9);
--cs-bg-50: oklch(from var(--cs-bg) l c h / 0.5);
--cs-bg-10: oklch(from var(--cs-bg) l c h / 0.1);
/* --- Light Mode Rich Scale (#DBDBDB Base) --- */
--cs-bg-2: oklch(0.8914 0 0);
--cs-bg-2-rgb: light-dark (rgb(219, 219, 219), rgb(13, 13, 13));
--cs-bg-2-100: oklch(87.2% 0.01 258.338);
--cs-bg-2-500: var(--cs-bg-2);
--cs-bg-2-900: oklch(33.588% 0.033 261.424);
/* Light Mode BG Opacities */
--cs-bg-2-90: oklch(from var(--cs-bg-2) l c h / 0.9);
--cs-bg-2-50: oklch(from var(--cs-bg-2) l c h / 0.5);
--cs-bg-2-10: oklch(from var(--cs-bg-2) l c h / 0.1);
/* --- Component BG (Light #c4c4c4) --- */
--cs-comp: oklch(89.804% 0.022 258.338);
--cs-comp-50: oklch(from var(--cs-comp) l c h / 0.5);
/* --- Component Scales (Light #c4c4c4 / Dark #4c4c4c) --- */
--cs-comp-light: oklch(0.8 0 0);
--cs-comp-dark: oklch(0.38 0 0);
--cs-comp-light-50: oklch(from var(--cs-comp-light) l c h / 0.5);
--cs-comp-dark-50: oklch(from var(--cs-comp-dark) l c h / 0.5);
/* --- Light Mode Titles (#1a1a1a) --- */
--cs-title: oklch(0.2 0 0);
/* Base #1a1a1a is ~20% lightness */
--cs-title-100: oklch(0.95 0 0);
--cs-title-200: oklch(0.85 0 0);
--cs-title-300: oklch(0.75 0 0);
--cs-title-400: oklch(0.65 0 0);
--cs-title-500: var(--cs-title);
--cs-title-600: oklch(0.18 0 0);
--cs-title-700: oklch(0.15 0 0);
--cs-title-800: oklch(0.1 0 0);
--cs-title-900: oklch(0.05 0 0);
/* Light Mode Title Opacity Scale */
--cs-title-90: oklch(from var(--cs-title) l c h / 0.9);
--cs-title-80: oklch(from var(--cs-title) l c h / 0.8);
--cs-title-70: oklch(from var(--cs-title) l c h / 0.7);
--cs-title-60: oklch(from var(--cs-title) l c h / 0.6);
--cs-title-50: oklch(from var(--cs-title) l c h / 0.5);
--cs-title-40: oklch(from var(--cs-title) l c h / 0.4);
--cs-title-30: oklch(from var(--cs-title) l c h / 0.3);
--cs-title-20: oklch(from var(--cs-title) l c h / 0.2);
--cs-title-10: oklch(from var(--cs-title) l c h / 0.1);
/*
-----------------
Cinescore Ratings Colors
-----------------
*/
/* --- 1-2: Burn (Red #e50914) --- */
--cs-burn: oklch(0.58 0.23 28);
--cs-burn-100: oklch(0.95 0.05 28);
--cs-burn-200: oklch(0.85 0.1 28);
--cs-burn-300: oklch(0.75 0.16 28);
--cs-burn-400: oklch(0.65 0.2 28);
--cs-burn-500: var(--cs-burn);
--cs-burn-600: oklch(0.5 0.23 28);
--cs-burn-700: oklch(0.4 0.2 28);
--cs-burn-800: oklch(0.3 0.14 28);
--cs-burn-900: oklch(0.15 0.07 28);
/* Burn: Opacity Scale */
--cs-burn-90: oklch(from var(--cs-burn) l c h / 0.9);
--cs-burn-80: oklch(from var(--cs-burn) l c h / 0.8);
--cs-burn-70: oklch(from var(--cs-burn) l c h / 0.7);
--cs-burn-60: oklch(from var(--cs-burn) l c h / 0.6);
--cs-burn-50: oklch(from var(--cs-burn) l c h / 0.5);
--cs-burn-40: oklch(from var(--cs-burn) l c h / 0.4);
--cs-burn-30: oklch(from var(--cs-burn) l c h / 0.3);
--cs-burn-20: oklch(from var(--cs-burn) l c h / 0.2);
--cs-burn-10: oklch(from var(--cs-burn) l c h / 0.1);
/* --- 3-4: Trash (Gray #9D9D9D) --- */
--cs-trash: oklch(0.68 0 0);
--cs-trash-100: oklch(0.95 0 0);
--cs-trash-200: oklch(0.85 0 0);
--cs-trash-300: oklch(0.75 0 0);
--cs-trash-400: oklch(0.7 0 0);
--cs-trash-500: var(--cs-trash);
--cs-trash-600: oklch(0.6 0 0);
--cs-trash-700: oklch(0.5 0 0);
--cs-trash-800: oklch(0.3 0 0);
--cs-trash-900: oklch(0.15 0 0);
/* Trash: Opacity Scale */
--cs-trash-90: oklch(from var(--cs-trash) l c h / 0.9);
--cs-trash-80: oklch(from var(--cs-trash) l c h / 0.8);
--cs-trash-70: oklch(from var(--cs-trash) l c h / 0.7);
--cs-trash-60: oklch(from var(--cs-trash) l c h / 0.6);
--cs-trash-50: oklch(from var(--cs-trash) l c h / 0.5);
--cs-trash-40: oklch(from var(--cs-trash) l c h / 0.4);
--cs-trash-30: oklch(from var(--cs-trash) l c h / 0.3);
--cs-trash-20: oklch(from var(--cs-trash) l c h / 0.2);
--cs-trash-10: oklch(from var(--cs-trash) l c h / 0.1);
/* --- 5-6: Basic (Green #1EFF00) --- */
--cs-basic: oklch(0.86 0.29 142.5);
--cs-basic-100: oklch(0.98 0.05 142.5);
--cs-basic-200: oklch(0.95 0.12 142.5);
--cs-basic-300: oklch(0.92 0.2 142.5);
--cs-basic-400: oklch(0.89 0.25 142.5);
--cs-basic-500: var(--cs-basic);
--cs-basic-600: oklch(0.7 0.29 142.5);
--cs-basic-700: oklch(0.55 0.25 142.5);
--cs-basic-800: oklch(0.4 0.18 142.5);
--cs-basic-900: oklch(0.25 0.08 142.5);
/* Basic: Opacity Scale */
--cs-basic-90: oklch(from var(--cs-basic) l c h / 0.9);
--cs-basic-80: oklch(from var(--cs-basic) l c h / 0.8);
--cs-basic-70: oklch(from var(--cs-basic) l c h / 0.7);
--cs-basic-60: oklch(from var(--cs-basic) l c h / 0.6);
--cs-basic-50: oklch(from var(--cs-basic) l c h / 0.5);
--cs-basic-40: oklch(from var(--cs-basic) l c h / 0.4);
--cs-basic-30: oklch(from var(--cs-basic) l c h / 0.3);
--cs-basic-20: oklch(from var(--cs-basic) l c h / 0.2);
--cs-basic-10: oklch(from var(--cs-basic) l c h / 0.1);
/* --- 7-8: Epic (Blue #0070DD) --- */
--cs-epic: oklch(0.52 0.2 253.9);
--cs-epic-100: oklch(0.95 0.05 253.9);
--cs-epic-200: oklch(0.85 0.1 253.9);
--cs-epic-300: oklch(0.75 0.15 253.9);
--cs-epic-400: oklch(0.65 0.18 253.9);
--cs-epic-500: var(--cs-epic);
--cs-epic-600: oklch(0.45 0.2 253.9);
--cs-epic-700: oklch(0.35 0.16 253.9);
--cs-epic-800: oklch(0.25 0.11 253.9);
--cs-epic-900: oklch(0.15 0.06 253.9);
/* Epic: Opacity Scale */
--cs-epic-90: oklch(from var(--cs-epic) l c h / 0.9);
--cs-epic-80: oklch(from var(--cs-epic) l c h / 0.8);
--cs-epic-70: oklch(from var(--cs-epic) l c h / 0.7);
--cs-epic-60: oklch(from var(--cs-epic) l c h / 0.6);
--cs-epic-50: oklch(from var(--cs-epic) l c h / 0.5);
--cs-epic-40: oklch(from var(--cs-epic) l c h / 0.4);
--cs-epic-30: oklch(from var(--cs-epic) l c h / 0.3);
--cs-epic-20: oklch(from var(--cs-epic) l c h / 0.2);
--cs-epic-10: oklch(from var(--cs-epic) l c h / 0.1);
/* --- 9-10: Legendary (Gold #e2b304) --- */
--cs-legendary: oklch(0.79 0.18 85.9);
--cs-legendary-100: oklch(0.98 0.03 85.9);
--cs-legendary-200: oklch(0.95 0.08 85.9);
--cs-legendary-300: oklch(0.9 0.12 85.9);
--cs-legendary-400: oklch(0.85 0.16 85.9);
--cs-legendary-500: var(--cs-legendary);
--cs-legendary-600: oklch(0.65 0.18 85.9);
--cs-legendary-700: oklch(0.5 0.16 85.9);
--cs-legendary-800: oklch(0.35 0.12 85.9);
--cs-legendary-900: oklch(0.2 0.06 85.9);
/* Legendary: Opacity Scale */
--cs-legendary-90: oklch(from var(--cs-legendary) l c h / 0.9);
--cs-legendary-80: oklch(from var(--cs-legendary) l c h / 0.8);
--cs-legendary-70: oklch(from var(--cs-legendary) l c h / 0.7);
--cs-legendary-60: oklch(from var(--cs-legendary) l c h / 0.6);
--cs-legendary-50: oklch(from var(--cs-legendary) l c h / 0.5);
--cs-legendary-40: oklch(from var(--cs-legendary) l c h / 0.4);
--cs-legendary-30: oklch(from var(--cs-legendary) l c h / 0.3);
--cs-legendary-20: oklch(from var(--cs-legendary) l c h / 0.2);
--cs-legendary-10: oklch(from var(--cs-legendary) l c h / 0.1);
/* Black BG */
/* Black Spy Color for Day Time Adapt*/
--flex-bg-color-1: light-dark (var(--color-neutral-200), var(--color-neutral-900));
--flex-bg-color-2: light-dark (var(--color-neutral-300), var(--color-neutral-800));
--flex-bg-color-3: light-dark (var(--color-neutral-400), var(--color-neutral-700));
--flex-header-bg: linear-gradient(to right, #fff 20%, #e5e5e5 100%);
--flex-footer-bg: linear-gradient(to right, #fff 20%, #e5e5e5 100%);
--flex-footer-color: #fff;
/* Solid Footer BG */
--flex-header-color: #fff;
/* Solid Header BG */
/* FLex Gray Color Changes */
--flex-gray-50: light-dark(var(--color-neutral-50), var(--color-neutral-950));
--flex-gray-100: light-dark(var(--color-neutral-100), var(--color-neutral-900));
--flex-gray-200: light-dark(var(--color-neutral-200), var(--color-neutral-800));
--flex-gray-300: light-dark(var(--color-neutral-300), var(--color-neutral-700));
--flex-gray-400: light-dark(var(--color-neutral-400), var(--color-neutral-600));
--flex-gray-500: light-dark(var(--color-neutral-500), var(--color-neutral-500));
--flex-gray-600: light-dark(var(--color-neutral-600), var(--color-neutral-400));
--flex-gray-700: light-dark(var(--color-neutral-700), var(--color-neutral-300));
--flex-gray-800: light-dark(var(--color-neutral-800), var(--color-neutral-200));
--flex-gray-900: light-dark(var(--color-neutral-900), var(--color-neutral-100));
--flex-gray-950: light-dark(var(--color-neutral-950), var(--color-neutral-50));
/* Note: --flex-gray-900 and 950 were not in the original theme, but added for completeness */
--flex-gray-15: light-dark(#88888826, #66666680);
--flex-gray-25: light-dark(#d6d6d626, #88888866);
--flex-gray-35: light-dark(#aaaaaa33, #aaaaaa4d);
--flex-gray-45: light-dark(#8888884d, #88888833);
--flex-gray-55: light-dark(#66666659, #66666626);
--flex-gray-65: light-dark(#44444466, #88888819);
--flex-gray-75: light-dark(#22222273, #bbbbbb0f);
--flex-gray-85: light-dark(#00000080, #22222205);
/* Note: --flex-gray-15 to 85 were not in the original theme, but added for completeness */
/* Flex CinesistDB Brand Colors */
--cs-brand: var(--cs-brand-400);
/* CinesistDB Purple */
--cs-brand-90: var(--cs-brand-90);
/* CinesistDB Purple 90% Opacity */
--cs-brand-50: var(--cs-brand-50);
/* CinesistDB Purple 50% Opacity */
--brand-orange: var(--cs-brand-2-400);
/* CinesistDB Orange Reverse */
--brand-orange-90: var(--cs-brand-2-90);
/* CinesistDB Orange Reverse */
--brand-orange-50: var(--cs-brand-2-50);
/* CinesistDB Orange Reverse */
/* Flex Text Colors */
--flex-text-title: #1a1a1a !important;
/* 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, /70%) !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: var(--flex-gray-3);
--ticket-text-color: var(--flex-title-color);
--ticket-text-hover: var(--cs-brand-400);
--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--cs-brand: var(--cs-brand);
--wp--preset--color--cs-brand-90: var(--cs-brand-90);
--wp--preset--color--cs-brand-50: var(--cs-brand-50);
--wp--preset--color--brand-orange: var(--brand-orange);
--wp--preset--color--brand-orange-90: var(--brand-orange-90);
--wp--preset--color--brand-orange-50: var(--brand-orange-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);
}
/* ====================
Dark Mode
==================== */
[data-theme="dark"],
.light-scheme {
/* Legacy fallback – values are handled by light‑dark() in :root */
/* --- 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");
}
:root {
/* Cinesist Emblem Variable */
--cinesist-emblem-logo: light-dark(url("https://cinesist.com/wp-content/uploads/2026/05/Cinesist-Black-and-Purple-Icon-Logomark.webp"), url("https://cinesist.com/wp-content/uploads/2026/05/Cinesist-White-Spy-Icon-Logomark.webp"));
/* We define the cinesist Emblem logo */
--cinesist-emblem-logo: url("https://cinesist.com/wp-content/uploads/2026/05/Cinesist-Black-and-Purple-Icon-Logomark.webp");
}
/* If body or html has a dark mode class applied by WordPress */
body[data-theme="dark"] {
--cinesist-emblem-logo: url("https://cinesist.com/wp-content/uploads/2026/05/Cinesist-White-Spy-Icon-Logomark.webp");
}
/* ====================
End Cinesist System Tokens
==================== */
/*
-----------------
1 - Framework
-----------------
*/
/* Margin Utility Classes */
/* Vertical Margins */
.margin-v-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.margin-v-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.margin-v-3 {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
.margin-v-4 {
margin-top: 1rem;
margin-bottom: 1rem;
}
.margin-v-5 {
margin-top: 1.25rem;
margin-bottom: 1.25rem;
}
.margin-v-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.margin-v-7 {
margin-top: 1.75rem;
margin-bottom: 1.75rem;
}
.margin-v-8 {
margin-top: 2rem;
margin-bottom: 2rem;
}
.margin-v-9 {
margin-top: 2.25rem;
margin-bottom: 2.25rem;
}
.margin-v-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.margin-v-11 {
margin-top: 2.75rem;
margin-bottom: 2.75rem;
}
.margin-v-12 {
margin-top: 3rem;
margin-bottom: 3rem;
}
/* Single Direction Margins */
/* Margin Top */
.margin-top-1 {
margin-top: 0.25rem;
}
.margin-top-2 {
margin-top: 0.5rem;
}
.margin-top-3 {
margin-top: 0.75rem;
}
.margin-top-4 {
margin-top: 1rem;
}
.margin-top-5 {
margin-top: 1.25rem;
}
.margin-top-6 {
margin-top: 1.5rem;
}
.margin-top-7 {
margin-top: 1.75rem;
}
.margin-top-8 {
margin-top: 2rem;
}
.margin-top-9 {
margin-top: 2.25rem;
}
.margin-top-10 {
margin-top: 2.5rem;
}
.margin-top-11 {
margin-top: 2.75rem;
}
.margin-top-12 {
margin-top: 3rem;
}
/* Margin Bottom */
.margin-bottom-1 {
margin-bottom: 0.25rem;
}
.margin-bottom-2 {
margin-bottom: 0.5rem;
}
.margin-bottom-3 {
margin-bottom: 0.75rem;
}
.margin-bottom-4 {
margin-bottom: 1rem;
}
.margin-bottom-5 {
margin-bottom: 1.25rem;
}
.margin-bottom-6 {
margin-bottom: 1.5rem;
}
.margin-bottom-7 {
margin-bottom: 1.75rem;
}
.margin-bottom-8 {
margin-bottom: 2rem;
}
.margin-bottom-9 {
margin-bottom: 2.25rem;
}
.margin-bottom-10 {
margin-bottom: 2.5rem;
}
.margin-bottom-11 {
margin-bottom: 2.75rem;
}
.margin-bottom-12 {
margin-bottom: 3rem;
}
/* Margin Left */
.margin-left-1 {
margin-left: 0.25rem;
}
.margin-left-2 {
margin-left: 0.5rem;
}
.margin-left-3 {
margin-left: 0.75rem;
}
.margin-left-4 {
margin-left: 1rem;
}
.margin-left-5 {
margin-left: 1.25rem;
}
.margin-left-6 {
margin-left: 1.5rem;
}
.margin-left-7 {
margin-left: 1.75rem;
}
.margin-left-8 {
margin-left: 2rem;
}
.margin-left-9 {
margin-left: 2.25rem;
}
.margin-left-10 {
margin-left: 2.5rem;
}
.margin-left-11 {
margin-left: 2.75rem;
}
.margin-left-12 {
margin-left: 3rem;
}
/* Margin Right */
.margin-right-1 {
margin-right: 0.25rem;
}
.margin-right-2 {
margin-right: 0.5rem;
}
.margin-right-3 {
margin-right: 0.75rem;
}
.margin-right-4 {
margin-right: 1rem;
}
.margin-right-5 {
margin-right: 1.25rem;
}
.margin-right-6 {
margin-right: 1.5rem;
}
.margin-right-7 {
margin-right: 1.75rem;
}
.margin-right-8 {
margin-right: 2rem;
}
.margin-right-9 {
margin-right: 2.25rem;
}
.margin-right-10 {
margin-right: 2.5rem;
}
.margin-right-11 {
margin-right: 2.75rem;
}
.margin-right-12 {
margin-right: 3rem;
}
/* Horizontal Margins */
.margin-h-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.margin-h-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.margin-h-3 {
margin-left: 0.75rem;
margin-right: 0.75rem;
}
.margin-h-4 {
margin-left: 1rem;
margin-right: 1rem;
}
.margin-h-5 {
margin-left: 1.25rem;
margin-right: 1.25rem;
}
.margin-h-6 {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.margin-h-7 {
margin-left: 1.75rem;
margin-right: 1.75rem;
}
.margin-h-8 {
margin-left: 2rem;
margin-right: 2rem;
}
.margin-h-9 {
margin-left: 2.25rem;
margin-right: 2.25rem;
}
.margin-h-10 {
margin-left: 2.5rem;
margin-right: 2.5rem;
}
.margin-h-11 {
margin-left: 2.75rem;
margin-right: 2.75rem;
}
.margin-h-12 {
margin-left: 3rem;
margin-right: 3rem;
}
/* Padding Utility Classes */
.padding-v-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.padding-v-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.padding-v-3 {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.padding-v-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.padding-v-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.padding-v-6 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.padding-v-7 {
padding-top: 1.75rem;
padding-bottom: 1.75rem;
}
.padding-v-8 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.padding-v-9 {
padding-top: 2.25rem;
padding-bottom: 2.25rem;
}
.padding-v-10 {
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.padding-v-11 {
padding-top: 2.75rem;
padding-bottom: 2.75rem;
}
.padding-v-12 {
padding-top: 3rem;
padding-bottom: 3rem;
}
.padding-h-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.padding-h-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.padding-h-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.padding-h-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.padding-h-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.padding-h-6 {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.padding-h-7 {
padding-left: 1.75rem;
padding-right: 1.75rem;
}
.padding-h-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.padding-h-9 {
padding-left: 2.25rem;
padding-right: 2.25rem;
}
.padding-h-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.padding-h-11 {
padding-left: 2.75rem;
padding-right: 2.75rem;
}
.padding-h-12 {
padding-left: 3rem;
padding-right: 3rem;
}
/* Single Direction Paddings */
/* Padding Top */
.padding-top-1 {
padding-top: 0.25rem;
}
.padding-top-2 {
padding-top: 0.5rem;
}
.padding-top-3 {
padding-top: 0.75rem;
}
.padding-top-4 {
padding-top: 1rem;
}
.padding-top-5 {
padding-top: 1.25rem;
}
.padding-top-6 {
padding-top: 1.5rem;
}
.padding-top-7 {
padding-top: 1.75rem;
}
.padding-top-8 {
padding-top: 2rem;
}
.padding-top-9 {
padding-top: 2.25rem;
}
.padding-top-10 {
padding-top: 2.5rem;
}
.padding-top-11 {
padding-top: 2.75rem;
}
.padding-top-12 {
padding-top: 3rem;
}
/* Padding Bottom */
.padding-bottom-1 {
padding-bottom: 0.25rem;
}
.padding-bottom-2 {
padding-bottom: 0.5rem;
}
.padding-bottom-3 {
padding-bottom: 0.75rem;
}
.padding-bottom-4 {
padding-bottom: 1rem;
}
.padding-bottom-5 {
padding-bottom: 1.25rem;
}
.padding-bottom-6 {
padding-bottom: 1.5rem;
}
.padding-bottom-7 {
padding-bottom: 1.75rem;
}
.padding-bottom-8 {
padding-bottom: 2rem;
}
.padding-bottom-9 {
padding-bottom: 2.25rem;
}
.padding-bottom-10 {
padding-bottom: 2.5rem;
}
.padding-bottom-11 {
padding-bottom: 2.75rem;
}
.padding-bottom-12 {
padding-bottom: 3rem;
}
/* Padding Left */
.padding-left-1 {
padding-left: 0.25rem;
}
.padding-left-2 {
padding-left: 0.5rem;
}
.padding-left-3 {
padding-left: 0.75rem;
}
.padding-left-4 {
padding-left: 1rem;
}
.padding-left-5 {
padding-left: 1.25rem;
}
.padding-left-6 {
padding-left: 1.5rem;
}
.padding-left-7 {
padding-left: 1.75rem;
}
.padding-left-8 {
padding-left: 2rem;
}
.padding-left-9 {
padding-left: 2.25rem;
}
.padding-left-10 {
padding-left: 2.5rem;
}
.padding-left-11 {
padding-left: 2.75rem;
}
.padding-left-12 {
padding-left: 3rem;
}
/* Padding Right */
.padding-right-1 {
padding-right: 0.25rem;
}
.padding-right-2 {
padding-right: 0.5rem;
}
.padding-right-3 {
padding-right: 0.75rem;
}
.padding-right-4 {
padding-right: 1rem;
}
.padding-right-5 {
padding-right: 1.25rem;
}
.padding-right-6 {
padding-right: 1.5rem;
}
.padding-right-7 {
padding-right: 1.75rem;
}
.padding-right-8 {
padding-right: 2rem;
}
.padding-right-9 {
padding-right: 2.25rem;
}
.padding-right-10 {
padding-right: 2.5rem;
}
.padding-right-11 {
padding-right: 2.75rem;
}
.padding-right-12 {
padding-right: 3rem;
}
/* Grid Utility Classes */
/* Grid Gaps */
.grid-gap-1 {
display: grid;
gap: 0.25rem;
}
.grid-gap-2 {
display: grid;
gap: 0.5rem;
}
.grid-gap-3 {
display: grid;
gap: 0.75rem;
}
.grid-gap-4 {
display: grid;
column-gap: 1rem;
row-gap: 1rem;
}
.grid-gap-5 {
display: grid;
gap: 1.25rem;
}
.grid-gap-6 {
display: grid;
gap: 1.5rem;
}
.grid-gap-7 {
display: grid;
gap: 1.75rem;
}
.grid-gap-8 {
display: grid;
gap: 2rem;
}
.grid-gap-9 {
display: grid;
gap: 2.25rem;
}
.grid-gap-10 {
display: grid;
gap: 2.5rem;
}
.grid-gap-11 {
display: grid;
gap: 2.75rem;
}
.grid-gap-12 {
display: grid;
gap: 3rem;
}
/* Grid Column Gaps */
.grid-col-gap-1 {
display: grid;
column-gap: 0.25rem;
}
.grid-col-gap-2 {
display: grid;
column-gap: 0.5rem;
}
.grid-col-gap-3 {
display: grid;
column-gap: 0.75rem;
}
.grid-col-gap-4 {
display: grid;
column-gap: 1rem;
}
.grid-col-gap-5 {
display: grid;
column-gap: 1.25rem;
}
.grid-col-gap-6 {
display: grid;
column-gap: 1.5rem;
}
.grid-col-gap-7 {
display: grid;
column-gap: 1.75rem;
}
.grid-col-gap-8 {
display: grid;
column-gap: 2rem;
}
.grid-col-gap-9 {
display: grid;
column-gap: 2.25rem;
}
.grid-col-gap-10 {
display: grid;
column-gap: 2.5rem;
}
.grid-col-gap-11 {
display: grid;
column-gap: 2.75rem;
}
.grid-col-gap-12 {
display: grid;
column-gap: 3rem;
}
/* Grid Row Gaps */
.grid-row-gap-1 {
display: grid;
row-gap: 0.25rem;
}
.grid-row-gap-2 {
display: grid;
row-gap: 0.5rem;
}
.grid-row-gap-3 {
display: grid;
row-gap: 0.75rem;
}
.grid-row-gap-4 {
display: grid;
row-gap: 1rem;
}
.grid-row-gap-5 {
display: grid;
row-gap: 1.25rem;
}
.grid-row-gap-6 {
display: grid;
row-gap: 1.5rem;
}
.grid-row-gap-7 {
display: grid;
row-gap: 1.75rem;
}
.grid-row-gap-8 {
display: grid;
row-gap: 2rem;
}
.grid-row-gap-9 {
display: grid;
row-gap: 2.25rem;
}
.grid-row-gap-10 {
display: grid;
row-gap: 2.5rem;
}
.grid-row-gap-11 {
display: grid;
row-gap: 2.75rem;
}
.grid-row-gap-12 {
display: grid;
row-gap: 3rem;
}
/* Grid Column utility classes */
.grid-columns-auto {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
}
.grid-columns-1 {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-columns-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-columns-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-columns-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-columns-5 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-columns-6 {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-columns-7 {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-columns-8 {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-columns-9 {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-columns-10 {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-columns-11 {
display: grid;
grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-columns-12 {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* Grid Row Utility Classes */
.grid-rows-auto {
display: grid;
grid-auto-flow: row;
grid-auto-rows: minmax(0, 1fr);
}
.grid-rows-1 {
display: grid;
grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
display: grid;
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
display: grid;
grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
display: grid;
grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
display: grid;
grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid-rows-7 {
display: grid;
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid-rows-8 {
display: grid;
grid-template-rows: repeat(8, minmax(0, 1fr));
}
.grid-rows-9 {
display: grid;
grid-template-rows: repeat(9, minmax(0, 1fr));
}
.grid-rows-10 {
display: grid;
grid-template-rows: repeat(10, minmax(0, 1fr));
}
.grid-rows-11 {
display: grid;
grid-template-rows: repeat(11, minmax(0, 1fr));
}
.grid-rows-12 {
display: grid;
grid-template-rows: repeat(12, minmax(0, 1fr));
}
/* Flexbox Utility Classes */
/* Flexbox Gaps */
.flex-gap-1 {
display: flex;
gap: 0.25rem;
}
.flex-gap-2 {
display: flex;
gap: 0.5rem;
}
.flex-gap-3 {
display: flex;
gap: 1rem;
}
.flex-gap-4 {
display: flex;
gap: 1.25rem;
}
.flex-gap-5 {
display: flex;
gap: 1.5rem;
}
.flex-gap-6 {
display: flex;
gap: 1.75rem;
}
.flex-gap-7 {
display: flex;
gap: 2rem;
}
.flex-gap-8 {
display: flex;
gap: 2.25rem;
}
.flex-gap-9 {
display: flex;
gap: 2.5rem;
}
.flex-gap-10 {
display: flex;
gap: 2.75rem;
}
.flex-gap-11 {
display: flex;
gap: 3rem;
}
.flex-gap-12 {
display: flex;
gap: 3.25rem;
}
/* Flexbox Column Gaps */
.flex-col-gap-1 {
display: flex;
column-gap: 0.25rem;
}
.flex-col-gap-2 {
display: flex;
column-gap: 0.5rem;
}
.flex-col-gap-3 {
display: flex;
column-gap: 1rem;
}
.flex-col-gap-4 {
display: flex;
column-gap: 1.25rem;
}
.flex-col-gap-5 {
display: flex;
column-gap: 1.5rem;
}
.flex-col-gap-6 {
display: flex;
column-gap: 1.75rem;
}
.flex-col-gap-7 {
display: flex;
column-gap: 2rem;
}
.flex-col-gap-8 {
display: flex;
column-gap: 2.25rem;
}
.flex-col-gap-9 {
display: flex;
column-gap: 2.5rem;
}
.flex-col-gap-10 {
display: flex;
column-gap: 2.75rem;
}
.flex-col-gap-11 {
display: flex;
column-gap: 3rem;
}
.flex-col-gap-12 {
display: flex;
column-gap: 3.25rem;
}
/* Flexbox Row Gaps */
.flex-row-gap-1 {
display: flex;
row-gap: 0.25rem;
}
.flex-row-gap-2 {
display: flex;
row-gap: 0.5rem;
}
.flex-row-gap-3 {
display: flex;
row-gap: 1rem;
}
.flex-row-gap-4 {
display: flex;
row-gap: 1.25rem;
}
.flex-row-gap-5 {
display: flex;
row-gap: 1.5rem;
}
.flex-row-gap-6 {
display: flex;
row-gap: 1.75rem;
}
.flex-row-gap-7 {
display: flex;
row-gap: 2rem;
}
.flex-row-gap-8 {
display: flex;
row-gap: 2.25rem;
}
.flex-row-gap-9 {
display: flex;
row-gap: 2.5rem;
}
.flex-row-gap-10 {
display: flex;
row-gap: 2.75rem;
}
.flex-row-gap-11 {
display: flex;
row-gap: 3rem;
}
.flex-row-gap-12 {
display: flex;
row-gap: 3.25rem;
}
/* Flexbox Layout Direction & Wrap */
.flex-row {
display: flex;
flex-direction: row;
}
.flex-row-reverse {
display: flex;
flex-direction: row-reverse;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-col-reverse {
display: flex;
flex-direction: column-reverse;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
.flex-nowrap {
display: flex;
flex-wrap: nowrap;
}
.flex-inline {
display: inline-flex;
}
/* Flex Item Sizing */
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-none {
flex: none;
}
.flex-grow {
flex-grow: 1;
}
.flex-shrink {
flex-shrink: 1;
}
/* Flex Alignment Helpers */
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
.align-start {
align-items: flex-start;
}
.align-end {
align-items: flex-end;
}
.align-center {
align-items: center;
}
.align-baseline {
align-items: baseline;
}
.align-stretch {
align-items: stretch;
}
/* BASE HTML & BODY RESETS */
html {
color-scheme: light dark;
font-size: 100%;
scroll-behavior: smooth;
}
/* MAP ATTRIBUTES TO THE BROWSER ENGINE */
body[data-theme="default"] {
color-scheme: light !important;
}
body[data-theme="dark"] {
color-scheme: dark !important;
}
/* GLOBAL BODY STYLES */
body {
background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
color: var(--primary-text-color);
font-family: var(--font-sans), var(--font-emoji), sans-serif;
font-size: var(--cs-font-size-body);
line-height: var(--line-height-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Smoothly animates the colors when the theme toggles */
transition:
background-color 0.4s ease,
color 0.4s ease,
border-color 0.4s ease;
}
/* GLOBAL HEADINGS */
/* Defeat the Movie Engine Plugin Headings */
html body.movie-engine-plugin :is(h1, h2, h3, h4, h5, h6, .me-heading) {
font-family: var(--font-heading), sans-serif !important;
color: var(--heading-color);
font-weight: var(--cs-heading-weight) !important;
text-wrap: wrap;
}
/* Super-charged, high-specificity Global Headings block */
html body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6)[class*=""] {
font-family: var(--font-heading), sans-serif !important;
font-weight: var(--cs-heading-weight) !important;
/* Added !important here to match */
margin-top: 0 !important;
}
h1 {
font-size: var(--cs-font-size-h1);
line-height: var(--line-height-h1);
letter-spacing: var(--cs-tracking-h1);
}
h2 {
font-size: var(--cs-font-size-h2);
line-height: var(--line-height-h2);
letter-spacing: var(--cs-tracking-h2);
}
h3 {
font-size: var(--cs-font-size-h3);
line-height: var(--line-height-h3);
letter-spacing: var(--cs-tracking-h3);
}
h4 {
font-size: var(--cs-font-size-h4);
line-height: var(--line-height-h4);
letter-spacing: var(--cs-tracking-h4);
}
h5 {
font-size: var(--cs-font-size-h5);
line-height: var(--line-height-h5);
letter-spacing: var(--cs-tracking-h5);
}
h6 {
font-size: var(--cs-font-size-h6);
line-height: var(--line-height-h6);
letter-spacing: var(--cs-tracking-h6);
text-transform: uppercase;
font-weight: var(--font-weight-bold);
}
a {
font-weight: 700;
text-decoration: none;
transition: color 0.3s ease;
}
.cs-link a {color: currentColor; font-weight: 500; text-decoration: none;}
.cs-link::before { content: "🔗"; }
.cs-link a:hover {
--decoration-type: unset;
text-decoration: var(--decoration-type);
--decoration-color: unset;
text-decoration-color: var(--decoration-color);
--underline-thickness: unset;
text-decoration-thickness: var(--underline-thickness);
--underline-offset: unset;
text-underline-offset: var(--underline-offset);
}
/* --- Admin Visibility Protocol --- */
.cs-admin-only {
display: none !important;
}
body.is-admin-user .cs-admin-only {
display: inline-flex !important;
align-items: center;
gap: 4px;
background: rgba(255, 255, 255, 0.05);
padding: 2px 6px;
border-radius: 4px;
border: 1px dashed rgba(255, 255, 255, 0.2);
font-size: 0.7rem;
font-family: var(--wp--preset--font-family--space-grotesk, monospace);
color: var(--cinesist-gold, #ffd700);
vertical-align: middle;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* --- Selection Glow --- */
::selection {
background: var(--cs-brand);
color: #fff;
}
/* Site Background */
div#cs-main {
background-color: light-dark(var(--color-neutral-100), var(--color-neutral-800));
}
/*
-----------------
2 - General
-----------------
*/
html :where(.editor-styles-wrapper) p {
font-family: var(--body-family);
font-size: var(--body-fsize);
font-weight: var(--body-fweight);
font-style: var(--body-font-style);
line-height: var(--body-fheight, 1.7);
letter-spacing: var(--body-fspace);
text-transform: var(--body-transform);
color: var(--body-fcolor);
margin-bottom: var(--cs-article-paragraph-margin) !important;
}
html :where(.editor-styles-wrapper) h1,
html :where(.editor-styles-wrapper) h2,
html :where(.editor-styles-wrapper) h3,
html :where(.editor-styles-wrapper) h4,
html :where(.editor-styles-wrapper) h5,
html :where(.editor-styles-wrapper) h6 {
font-family: var(--body-family);
font-size: var(--body-fsize);
font-weight: var(--body-fweight);
font-style: var(--body-font-style);
line-height: var(--body-fheight, 1.7);
letter-spacing: var(--body-fspace);
text-transform: var(--body-transform);
color: var(--body-fcolor);
margin-bottom: var(--cs-article-heading-margin) !important;
}
html :where(.editor-styles-wrapper) h1 {
font-size: var(--cs-font-size-h1) !important;
line-height: var(--line-height-h1) !important;
letter-spacing: var(--cs-tracking-h1) !important;
font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h2 {
font-size: var(--cs-font-size-h2) !important;
line-height: var(--line-height-h2) !important;
letter-spacing: var(--cs-tracking-h2) !important;
font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h3 {
font-size: var(--cs-font-size-h3) !important;
line-height: var(--line-height-h3) !important;
letter-spacing: var(--cs-tracking-h3) !important;
font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h4 {
font-size: var(--cs-font-size-h4) !important;
line-height: var(--line-height-h4) !important;
letter-spacing: var(--cs-tracking-h4) !important;
font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h5 {
font-size: var(--cs-font-size-h5) !important;
line-height: var(--line-height-h5) !important;
letter-spacing: var(--cs-tracking-h5) !important;
font-weight: var(--cs-heading-weight) !important;
}
html :where(.editor-styles-wrapper) h6 {
font-size: var(--cs-font-size-h6) !important;
line-height: var(--line-height-h6) !important;
letter-spacing: var(--cs-tracking-h6) !important;
font-weight: var(--font-weight-bold) !important;
text-transform: uppercase !important;
}
html :where(.editor-styles-wrapper) figcaption,
html :where(.editor-styles-wrapper) .wp-caption-text {
margin-bottom: var(--cs-article-caption-margin) !important;
}
body :where(.editor-styles-wrapper) {
--gb-container-width: 1520px;
background-color: #fff !important;
}
.editor-styles-wrapper.block-editor-writing-flow {
background-color: #ffffff !important;
}
/*
-----------------
3 - Layout
-----------------
*/
/* --- Global Container Protocol --- */
/* ROOT ANCHOR
The main layout driver.
*/
main#cs {
width: 100%;
position: relative;
}
/* --- UNIVERSAL SCAFFOLDING --- */
/* [SECTION] The Environment */
.cs-section {
display: block !important;
/* Overrides the old section-level grid */
width: 100%;
position: relative;
padding: 2rem 0;
/* Adjust vertical spacing as needed */
}
/* [WRAP] The Wrapper */
.cs-wrap {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: minmax(auto, auto);
gap: 1rem;
max-width: 1300px;
margin: 0px auto;
align-items: start;
}
/* GLOBAL RESPONSIVITY */
@media (max-width: 1024px) {
.cs-section {
grid-template-columns: [full-start] 1rem [content-start] 1fr [content-end] 1rem [full-end] !important;
}
.cs-wrap {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* Wide wrapper utility breaks out of default 1300px cs-wrap columns to a 1520px limit */
.cs-wrap-wide {
grid-column: full-start / full-end;
max-width: 1520px;
width: 100%;
margin-inline: auto;
box-sizing: border-box;
gap: 1rem;
}
@media (max-width: 767px) {
.cs-wrap-wide {
padding-inline: 1rem;
gap: 1rem;
}
}
@media (max-width: 767px) {
.cs-section-inner {
width: 100% !important;
grid-column: 1 / -1 !important;
}
}
.cs-section-head {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
/* Vertically centers headline and anchor */
color: var(--black-to-white-100);
}
#cs-main .cs-section-head h2 {
color: var(--black-to-white-100);
}
.cs-tile-card-headline {
grid-column: 1;
margin: 0;
margin-bottom: 0 !important;
word-spacing: 0.25rem;
gap: 0.5rem;
}
.cs-tile-card-anchor {
grid-column: 2;
display: inline-flex;
justify-self: end;
}
.cs-section .cs-wrap .cs-section-header .cs-tile-card-anchor {
display: inline-flex;
justify-content: flex-end;
align-items: center;
column-gap: 0.5em;
grid-column: 11 / span 2;
}
.cs-tile-card-tagline {
grid-column: 1 / -1;
margin-top: 10px;
/* Optional spacing */
}
.cs-section .cs-wrap .cs-section-header .cs-section-header-border {
grid-row: 2;
grid-column: 1 / span 12;
background-blend-mode: screen;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-block: 0;
}
/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
.cs-tile-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cs-tile-card-grid>.cs-tile-card-item:nth-child(1),
.cs-tile-card-grid>.cs-tile-card-item:nth-child(2) {
grid-column: span 1;
}
.cs-tile-card-grid>.cs-tile-card-item:nth-child(1) .cs-tile-card,
.cs-tile-card-grid>.cs-tile-card-item:nth-child(2) .cs-tile-card {
aspect-ratio: 1 / 1;
}
}
/* Mobile (max-width: 767px) */
@media (max-width: 767px) {
.cs-tile-card-grid {
grid-template-columns: 1fr;
}
.cs-tile-card-grid>.cs-tile-card-item:nth-child(1),
.cs-tile-card-grid>.cs-tile-card-item:nth-child(2) {
grid-column: span 1;
}
.cs-tile-card-grid>.cs-tile-card-item:nth-child(1) .cs-tile-card,
.cs-tile-card-grid>.cs-tile-card-item:nth-child(2) .cs-tile-card {
aspect-ratio: 16 / 9;
}
}
/* Tablet & Mobile Adjustments */
@media (max-width: 1024px) {
#hp-hero ul.cs-tile-card-grid {
grid-template-columns: repeat(2, 1fr);
/* 2 columns for tablet */
grid-template-rows: auto;
/* Let it grow naturally */
min-height: auto;
/* Remove the fixed height for mobile/tablet */
}
/* Reset spans so cards don't overlap or break layout */
#hp-hero ul.cs-tile-card-grid li {
grid-column: span 2 !important;
/* Make cards full width on mobile if preferred */
grid-row: auto !important;
}
}
@media (min-width: 1025px) {
/* Keep your 530px height only for Desktop */
#hp-hero ul.cs-tile-card-grid {
/* min-height: 530px; */
}
}
/* Post 1 - Most Important (2x2) */
ul.cs-tile-card-grid li:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
/* Post 2 - Secondary (Tall 1x2) */
ul.cs-tile-card-grid li:nth-child(2) {
grid-column: 3 / span 1;
grid-row: 1 / span 2;
}
/* Tile 2 Refinements */
ul.cs-tile-card-grid li:nth-child(2) .cs-tile-card-details {
padding-left: 12px !important;
padding-right: 12px !important;
}
/* Post 3 - Tertiary (Top Small) */
ul.cs-tile-card-grid li:nth-child(3) {
grid-column: 4 / span 1;
grid-row: 1 / span 1;
}
/* Tiles 3 & 4 Refinements */
ul.cs-tile-card-grid li:nth-child(3) .cs-tile-card-title,
ul.cs-tile-card-grid li:nth-child(4) .cs-tile-card-title {
font-size: 18px;
}
/* Post 4 - Quaternary (Bottom Small) */
ul.cs-tile-card-grid li:nth-child(4) {
grid-column: 4 / span 1;
grid-row: 2 / span 1;
}
ul.cs-tile-card-grid li:nth-child(3) .cs-tile-card-details,
ul.cs-tile-card-grid li:nth-child(4) .cs-tile-card-details {
padding-left: 10px;
padding-right: 10px;
}
/* ALIGNMENT & WRAPPING FIXES */
.cs-tile-card-details {
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
box-sizing: border-box;
}
/* Uniform Headlines */
.cs-tile-card-title {
margin-bottom: 0 !important;
}
.cs-tile-card-title a,
.cs-tile-card-title h1,
.cs-tile-card-title h2,
.cs-tile-card-title h3,
.cs-tile-card-title h4,
.cs-tile-card-title h5,
.cs-tile-card-title h6 {
margin-bottom: 0;
}
/* Specific fix for the smaller titles (Posts 3 & 4) */
ul.cs-tile-card-grid li:nth-child(3) .cs-tile-card-title,
ul.cs-tile-card-grid li:nth-child(4) .cs-tile-card-title {
line-height: 1.25;
/* Slightly more line height for smaller text */
font-size: var(--cs-font-size-h4);
}
/* Force text to fill width and break correctly */
.cs-tile-card-title,
.cs-tile-card-title a {
display: block;
width: 100%;
max-width: 100%;
min-width: 0;
line-height: 1.2;
margin-bottom: 0;
}
/* --- Modular Tile Card & Utility Classes --- */
/* Ensure the containers take up the full width */
.cs-tile-card-feed {
grid-column: 1 / -1;
/* Spans all columns of the section's outer wrap */
width: 100%;
}
.cs-tile-card-query {
/* width: 100%; */
}
/* Grid Container */
ul.cs-tile-card-grid {
display: grid;
width: 100%;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: auto auto;
gap: 24px;
}
/* --- Tile Card Grid Custom Coordinates --- */
.cs-tile-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.cs-tile-card-grid>.cs-tile-card-item {
/* display: flex; */
/* flex-direction: column; */
}
/* Master aspect-ratio and size rules */
.cs-tile-card-grid>.cs-tile-card-item:nth-child(1) .cs-tile-card-title {
font-size: clamp(1.4rem, 2.5vw, 2.25rem);
font-weight: 900;
line-height: 1.15;
}
/* Secondary aspect-ratio and size rules */
.cs-tile-card-grid>.cs-tile-card-item:nth-child(2) .cs-tile-card {
height: 100%;
}
.cs-tile-card-grid>.cs-tile-card-item:nth-child(2) .cs-tile-card-title {
font-size: var(--cs-font-size-h3);
font-weight: 800;
line-height: 1.25;
-webkit-line-clamp: 3;
}
@media (min-width: 1025px) {
.cs-tile-card-grid>.cs-tile-card-item:nth-child(2) .cs-tile-card {
aspect-ratio: auto;
}
}
/* Base Tile Card Component */
.cs-tile-card {
position: relative;
/* display: block; */
width: 100%;
height: 100%;
overflow: hidden;
border-radius: 8px;
isolation: isolate;
background-color: #000;
aspect-ratio: 1 / 1;
/* Default is square */
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
/* Makes the cards pop on hover */
.cs-tile-card-item:hover {
transform: translateY(-5px);
/* overflow: hidden; */
border-radius: 5px;
}
/* Aspect Ratio Modifiers */
.cs-tile-card--widescreen {
aspect-ratio: 16 / 10;
}
.cs-tile-card--tall {
aspect-ratio: 3 / 4;
}
@media (max-width: 767px) {
.cs-tile-card--widescreen {
aspect-ratio: 16 / 9;
}
.cs-tile-card--tall {
aspect-ratio: 4 / 5;
}
}
/* Landscape Modifier: Flex layout, image left, details right */
.cs-tile-card--landscape {
display: flex;
flex-direction: row;
aspect-ratio: auto;
background-color: transparent;
overflow: visible;
}
.cs-tile-card--landscape .cs-tile-card-img {
position: relative !important;
width: 40% !important;
height: 100% !important;
flex-shrink: 0;
border-radius: 8px;
}
.cs-tile-card--landscape .cs-tile-card-details {
position: relative;
/* width: 60%; */
background: transparent;
color: inherit;
padding: 1.5rem;
pointer-events: auto;
}
/* Theme adaptation for landscape card */
[data-theme="light"] .cs-tile-card--landscape {
background-color: #ffffff;
}
[data-theme="dark"] .cs-tile-card--landscape {
background-color: #000000;
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Card image element & hover scale zoom */
.cs-tile-card-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.cs-tile-card:hover .cs-tile-card-img {
transform: scale(1.06);
}
/* Details Overlay Gradient */
.cs-tile-card-details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 2.5rem 1rem 1rem;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 25%, rgba(0, 0, 0, 0.7) 75%, transparent 100%);
color: #ffffff;
z-index: 10;
gap: 0.5rem;
display: flex;
flex-direction: column;
justify-content: flex-end;
pointer-events: none;
box-sizing: border-box;
}
.cs-tile-card-details * {
pointer-events: auto;
}
/* Card Title (Headline) */
.cs-tile-card-title {
margin: 0;
padding: 0;
color: #ffffff;
font-family: var(--font-heading, inherit);
text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.8);
transition: color 0.3s ease;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cs-tile-card-title a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s ease;
}
/* Hover Brand Underline on title when hovering over the card */
.cs-tile-card-title:hover {
--decoration-type: unset;
text-decoration: var(--decoration-type);
--decoration-color: unset;
text-decoration-color: var(--decoration-color);
--underline-thickness: unset;
text-decoration-thickness: var(--underline-thickness);
--underline-offset: unset;
text-underline-offset: var(--underline-offset);
}
/* Link Treatments */
.cs-link {
--decoration-type: unset;
text-decoration: var(--decoration-type);
}
/* Link Hover Treatments */
.cs-link:hover {
--decoration-type: unset;
text-decoration: var(--decoration-type);
--decoration-color: unset;
text-decoration-color: var(--decoration-color);
--underline-thickness: unset;
text-decoration-thickness: var(--underline-thickness);
--underline-offset: unset;
text-underline-offset: var(--underline-offset);
}
/* Light Mode Card Details Override */
[data-theme="light"] .cs-tile-card {
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
/* Base state for tiles */
.cs-tile-card-item {
position: relative;
border-radius: var(--round-5);
transition: transform 0.3s ease;
overflow: clip;
transition:
transform 0.3s ease,
filter 0.3s ease,
opacity 0.3s ease;
opacity: 1;
overflow: hidden;
/* min-height: 250px; */
}
/* Sets the Article Wrapper for Posts */
.cs-tile-card-item article {
transition: transform 0.3s ease,
filter 0.3s ease,
opacity 0.3s ease;
opacity: 1;
overflow: hidden;
height: 100%;
width: 100%;
}
/* Hover refinement */
.cs-tile-card-item:hover article {
opacity: scale(1.05);
filter: brightness(1.1);
}
/* Subtle image zoom */
.cs-tile-card-item .cs-tile-card-img {
transition: transform 0.5s ease;
}
.cs-tile-card-item:hover .cs-tile-card-img {
transform: scale(1.05);
}
/* Making all the bylines and card-meta look sleek */
.cs-tile-card-details .tile-card-byline,
.cs-tile-card-details .tile-card-date {
font-size: 0.8rem;
}
/* Making Writer Persona Links Uniform */
.cs-tile-card-details .tile-card-byline a:hover {
--decoration-type: unset;
text-decoration: var(--decoration-type);
--decoration-color: unset;
text-decoration-color: var(--decoration-color);
--underline-thickness: unset;
text-decoration-thickness: var(--underline-thickness);
--underline-offset: unset;
text-underline-offset: var(--underline-offset);
}
/* Flex Controls */
/* Go Column */
.flex-column {
display: flex;
flex-direction: column
}
/* Go Row */
.flex-row {
display: flex;
flex-direction: row;
}
/* Grid Spans */
.grid-span-12 {
grid-column: span 12;
}
.grid-span-8 {
grid-column: span 8;
}
.grid-span-6 {
grid-column: span 6;
}
.grid-span-4 {
grid-column: span 4;
}
.grid-span-3 {
grid-column: span 3;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.grid-span-6 {
grid-column: span 12;
}
/* Stack 50/50 blocks on tablet/mobile */
}
/* Cinesist Custom Borders */
/* Cinesist Gaming Border */
.cinesist-border-green {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--cinesist-green) 35%, var(--cinebar-green) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Cinesist Rants Border */
.cinesist-border-red {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--cinesist-red) 35%, var(--cinesist-red) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Cinesist Reviews Border */
.cinesist-border-gold {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--cinesist-gold) 35%, var(--cinesist-gold) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Cinesist News Border */
.cinesist-border-news {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--cinesist-cyan) 35%, var(--cinesist-cyan) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Cinesist Brand Purple to Orange Border */
.cinesist-border-brand {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--cs-brand) 35%, var(--cs-brand) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Cinesist Brand Orange to Purple Border */
.cinesist-border-brand-2 {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--cs-brand-2) 35%, var(--cs-brand-2) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Cinesist Topic Color Border */
.cinesist-border-topic {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--topic-accent) 35%, var(--topic-accent) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Cinesist Rumors and Predictions Border */
.cinesist-border-arkahna {
background-blend-mode: screen;
background-image: linear-gradient(100deg, var(--cinesist-pink) 35%, var(--cinesist-pink) 50%, rgba(0, 0, 0, 0) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 5px;
width: 100%;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Base Styles */
/* --- OLD Layout Scaffolding Remove When Finished --- */
/* 2. TIER 1: SECTION WRAP
Purpose: Full-width background and responsive side-gutters.
Logic: width 100%, max-width none, no internal constraints.
*/
.cs-section-wrap {
width: 100%;
max-width: none;
margin: 0 !important;
padding-inline: 1rem;
/* Better to use rem for mobile base gutters */
box-sizing: border-box;
}
/* 3. TIER 2: INNER CONTAINER
Purpose: The 1520px containment logic.
Logic: Limits total width of the 'grid' or 'layout' group.
*/
.cs-container,
.gb-element-ir-inner,
.void-inner {
width: 100%;
max-width: 1520px;
margin-inline: auto !important;
display: block;
/* Ensures centering logic works on block elements */
}
/* 4. TIER 3: CONTENT WRAPPER
Purpose: The 1300px readability/focus tier.
Logic: Centers the actual text/media content.
*/
.cs-content,
.hp-wire-wrapper,
.gb-element-ir-header-wrap {
width: 100%;
max-width: 1300px;
margin-inline: auto !important;
}
/* --- Responsive Gutters --- */
@media (min-width: 768px) {
.cs-section-wrap {
padding-inline: 2rem;
}
}
@media (min-width: 1520px) {
/* Once the screen is larger than our container,
we can zero out padding if we want a flush 1520px look,
or keep it for extra breathing room. */
.cs-section-wrap {
padding-inline: 0;
}
}
/* --- 1.1: Layout & Containers --- */
/* Ultra-Wide Container (1520px) - Great for high-end galleries or hero areas */
.cs-container-wide {
width: var(--cs-width-full);
max-width: var(--cs-width-xl);
margin: 0 auto;
}
/* Standard Site Container (1300px limit) - Our default content width */
.cs-main,
.inner-w {
width: 100% !important;
max-width: var(--cs-width-lg) !important;
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 5rem);
box-sizing: border-box;
}
/* Full Width Utility - For background bleeds */
.full-w {
width: 100% !important;
max-width: none !important;
}
/* Narrow Focus Container (1000px) - Best for readability on long-form blog posts */
.cs-narrow,
.cs-container-narrow {
width: var(--cs-width-full);
max-width: var(--cs-width-md);
margin: 0 auto;
}
/* Minimalist Focus (800px) - Use for single column, text-heavy focus */
.cs-container-focus {
width: var(--cs-width-full);
max-width: var(--cs-width-sm);
margin: 0 auto;
}
/* --- Fluid Headings & Noto Color Emoji --- */
/* ====================
2 - Typography Protocol
==================== */
h1,
.h1 {
font-size: var(--cs-font-size-h1);
line-height: var(--line-height-h1);
letter-spacing: var(--cs-tracking-h1);
font-weight: var(--cs-heading-weight);
}
h2,
.h2 {
font-size: var(--cs-font-size-h2);
line-height: var(--line-height-h2);
letter-spacing: var(--cs-tracking-h2);
font-weight: var(--cs-heading-weight);
}
h3,
.h3 {
font-size: var(--cs-font-size-h3);
line-height: var(--line-height-h3);
letter-spacing: var(--cs-tracking-h3);
font-weight: var(--cs-heading-weight);
}
h4,
.h4 {
font-size: var(--cs-font-size-h4);
line-height: var(--line-height-h4);
letter-spacing: var(--cs-tracking-h4);
font-weight: var(--font-weight-bold);
}
h5,
.h5 {
font-size: var(--cs-font-size-h5);
line-height: var(--line-height-h5);
letter-spacing: var(--cs-tracking-h5);
font-weight: var(--font-weight-bold);
}
h6,
.h6 {
font-size: var(--cs-font-size-h6);
line-height: var(--line-height-h6);
letter-spacing: var(--cs-tracking-h6);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
h2.cs-review-blurb {
margin-bottom: 1.5rem !important;
text-shadow: 1px 1px var(--cs-brand) !important;
font-size: var(--cs-font-size-h2) !important;
line-height: var(--line-height-h2) !important;
}
/* --- Article Body Spacing Protocol --- */
.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,
.post-body-article h1,
.post-body-article h2,
.post-body-article h3,
.post-body-article h4,
.post-body-article h5,
.post-body-article h6 {
margin-bottom: var(--cs-article-heading-margin) !important;
}
.cs-review-body__article p,
.post-body-article p {
margin-bottom: var(--cs-article-paragraph-margin) !important;
}
.cs-review-body__article figcaption,
.post-body-article figcaption {
margin-bottom: var(--cs-article-caption-margin) !important;
}
@media (min-width: 1025px) {
.review-content {
padding: 0px !important;
}
}
h1.cs-section-heading {
font-size: 2.5rem;
}
h2.cs-section-heading {
font-size: 1.75rem;
color: var(--flex-text-title) !important;
}
p.cs-section-summary {
font-size: 1.25rem;
}
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-font-style);
letter-spacing: var(--meta-fspace);
text-transform: var(--meta-transform);
margin-bottom: var(--cs-article-caption-margin) !important;
}
/* Default Foxiz Padding: Set to left and right edge (20px*2). */
.edge-padding {
padding-right: 0 !important;
padding-left: 0 !important;
}
/* --- Hyperlinks Style --- */
/* --- Button Style --- */
input[type="submit"],
.is-btn,
.button,
div:where(.entry-content) button {
padding: var(--padding-40);
border: none;
border-radius: var(--round-3);
background: var(--cs-brand-400, var(--g-color));
color: var(--btn-accent, var(--awhite));
line-height: var(--height-40);
transition: var(--effect);
cursor: pointer;
white-space: nowrap;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none;
}
/* Hovers */
#back-top:hover i,
.swpm-logged-logout-link a:hover,
a.show-post-comment:hover,
a.page404-btn:hover,
.wp-block-search [type="submit"]:hover,
.wp-block-search [type="submit"]:active,
a.page-numbers:hover,
.page-links a.post-page-numbers:hover,
.pagination-nextprev a:hover,
.pagination-wrap:not(.pagination-nextprev, .page-links) a:hover span,
.pagination-simple a:hover,
.meta-like>span:hover,
.p-readmore:hover,
.tagcloud a:hover,
.wp-block-tagcloud a:hover,
.qlayout-2 .qlink a:hover,
.qlayout-4 .qlink a:hover,
input[type="submit"]:hover,
.is-btn:hover,
.yt-trigger:hover,
a.comment-reply-link:hover {
background-color: var(--cs-brand-500, var(--g-color));
color: var(--btn-accent-h, var(--awhite));
transform: var(--btn-animation);
border-color: var(--cs-brand-500, var(--g-color));
box-shadow: var(--btn-shadow, 0 3px 12px var(--cs-brand-90, var(--g-color-90)));
}
.is-btn {
color: var(--awhite) !important;
}
.is-button a:hover {
color: var(--awhite);
}
/* --- Framework Sub-Utilities --- */
/* 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-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-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: 0.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: 0.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;
}
/* --- Tailwind Static Grid Utilities Removed (Handled by Tailwind CSS v4 CDN) --- */
/* 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;
}
.cs-line-clamp {
-webkit-line-clamp: 2 !important;
}
/* Multi-line Truncation Utility */
.cs-line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2 !important;
line-clamp: 2 !important;
}
/* --- Zoom Animations --- */
/* Image Zoom and Brighten Effect */
.cs-zoom {
position: relative;
overflow: hidden;
display: block;
}
/* The Image (Base State) */
/* 2. The Zooming Image */
.cs-zoom img {
transition:
transform 0.8s cubic-bezier(0.33, 1, 0.68, 1),
filter 0.8s ease-in-out !important;
will-change: transform;
/* Fixes the "stuck" performance issue */
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1);
}
/* 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;
}
/* Image Zoom and Brighten Effect */
.cs-zoom-2 {
position: relative;
overflow: clip;
display: block;
}
/* The Image (Base State) */
.cs-zoom-2 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 */
}
/* The Isolated Action */
/* Only zooms the image if its specific parent container (.cs-zoom) is hovered */
.cs-zoom-2:hover img {
filter: brightness(110%) !important;
transform: scale(1.05) !important;
}
/* 1. The Container */
.cs-zoom-2 {
position: relative;
overflow: hidden;
/* Changed from clip for better corner support */
display: block;
}
/* 2. The Image (Base State) */
.cs-zoom-2 img {
/* Snappier 0.3s duration matches the 'vibe' better than 0.8s */
transition:
transform 0.3s ease-in-out,
filter 0.3s ease-in-out;
display: block;
/* Removes bottom whitespace gap in some themes */
width: 100%;
height: auto;
transform: scale(1);
}
/* 3. The Hover State */
.cs-zoom-2:hover img {
filter: brightness(1.1);
/* Matches your 110% but slightly cleaner syntax */
transform: scale(1.04);
/* 1.05 is good, 1.04 is a bit more elegant for galleries */
}
/* 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 */
}
/**
* 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;
}
}
/* --- Core Component Resets --- */
.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;
}
/* --- 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(--cs-brand) !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);
}
.bookmarked .follow-i svg {
color: red;
}
/* --- Global Icon Sets & Logic --- */
/* --- 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;
}
/* --- 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(--cs-brand)) !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(--font-sans);
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;
}
}
/* Container settings */
.bio-title-wrap {
display: flex;
align-items: center;
}
/* Hide the 'Followed' button by default */
.followed-icon-btn {
display: none !important;
}
/* When the parent is in 'followed' state, swap buttons */
.is-followed .follow-icon-btn {
display: none !important;
}
.is-followed .followed-icon-btn {
display: inline-flex !important;
}
/* --- Gallery & Slider Modules (Third Party) --- */
/* --- 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;
}
}
/*
-----------------
4 - Navigation (Main Menu, HUD, Command Bar)
-----------------
*/
/* Fixes Foxiz Notification Center Font Color */
.notification-content .entry-title {
color: var(--primary-text-color);
font-size: 1rem;
}
/* --- MOBILE HEADER FIXES --- */
@media screen and (max-width: 600px) {
/* 1. Ensure full-width header layout */
.header-mobile,
.header-mobile-wrap,
.mbnav-center,
.sticky-holder {
width: 100% !important;
max-width: 100% !important;
display: flex !important;
box-sizing: border-box !important;
}
/* 2. Space elements (Hamburger, Logo, Search) to the edges */
.mbnav-center {
justify-content: space-between !important;
padding: 0 15px !important;
flex: 1 !important;
}
/* 3. Center the logo specifically */
.navbar-center {
flex: 1 !important;
display: flex !important;
justify-content: center !important;
}
/* 4. Keep icons on left/right edges */
.navbar-left,
.navbar-right {
flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
}
/* 5. Sticky Header Behavior - Lock it to the very top */
.is-smart-sticky .header-mobile-wrap,
.is-smart-sticky .sticky-holder {
position: fixed !important;
top: 0 !important;
z-index: 9999 !important;
}
}
/* Hide Admin Bar on Mobile */
@media screen and (max-width: 600px) {
#wpadminbar {
display: none !important;
}
html,
body {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* --- Header logged in greeting --- */
.logged-welcome {
font-size: 1rem;
align-items: center;
}
/* LIGHT MODE: Ultra-clear, crisp light-gray liquid glass */
:root {
--header-bg: linear-gradient(
135deg,
rgba(225, 225, 225, 0.05) 0%,
rgba(230, 230, 230, 0.05) 50%,
rgba(245, 245, 245, 0.05) 100%
);
/* a gradient border that simulates light catching the top rim */
--header-border: 1px solid rgba(255, 255, 255, 0.4);
--header-border-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.1) 100%
);
/* Layered 3D shadows: 1 inset highlight for thickness + 2 drop shadows */
--header-shadow:
inset 0 1px 1px rgba(0, 0, 0, 0.6),
0 1px 3px rgba(0, 0, 0, 0.03),
0 10px 30px rgba(0, 0, 0, 0.06);
--text-color: #1a1a1a;
}
/* DARK MODE: Smoky, deep off-black polished obsidian glass */
[data-theme="dark"] {
--header-bg: linear-gradient(
135deg,
rgba(2, 2, 2, 0.85) 0%,
rgba(1, 0, 0, 0.50) 50%,
rgba(1, 0, 0, 0.40) 100%
);
--header-border-image: linear-gradient(
to bottom,
rgba(255, 255, 255, 0.2) 0%,
rgba(255, 255, 255, 0.02) 100%
);
--header-shadow:
inset 0 1px 0px rgba(255, 255, 255, 0.15),
0 4px 6px rgba(0, 0, 0, 0.2),
0 20px 40px rgba(0, 0, 0, 0.4);
--text-color: #f0f0f0;
}
/* 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 */
background: var(--header-bg);
border-bottom: var(--header-border);
border-image: var(--header-border-image) 1;
box-shadow: var(--header-shadow);
color: var(--text-color);
/* Fixed 5px frosting blur requested */
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
/* Smooth transition animation between light and dark modes */
transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}
/* 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;
}
.mode-icon-default {
color: var(--dm-light-color, var(--awhite));
}
/* --- 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: var(--cs-width-xl);
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;
}
.rb-container {
max-width: var(--rb-width, var(--cs-width-lg));
}
/* --- 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(--cs-brand);
--theme-link-active-color: var(--gc-brand-purple-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(--cs-brand);
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(--brand-orange);
}
.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(--cs-brand-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;
}
/*
-----------------
6 - Post Entry
-----------------
*/
/* Foxiz Category Badges */
.p-category {
position: relative;
z-index: 1;
display: inline-flex;
color: var(--cat-fcolor, inherit);
font-family: inherit;
font-weight: inherit;
line-height: 1;
font-style: inherit;
background-color: var(--cat-highlight);
padding: 5px 5px;
border-radius: var(--border-radius-1);
}
/* --- 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;
}
/* --- Cinesist Post Header Meta HUD --- */
.smeta-extra {
display: flex;
align-items: center;
flex-flow: row nowrap;
flex-shrink: 0;
flex-direction: row-reverse;
/* Reverses the order of the elements */
}
/* Make the read time bold */
.meta-el.meta-read {
font-weight: 700;
padding-right: 0.75rem;
}
/*
-----------------
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;
}
/* --- 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(--cs-brand));
}
/*
-----------------
-----------------
8 - Blocks
-----------------
*/
/**
* MODERN FRAME COMPONENT
* Architecture: Glassmorphism / Elevated Card
*/
.modern-frame-container {
position: relative;
border-radius: 2.5rem;
background: var(--bg-secondary);
border: 1px solid var(--border-primary);
box-shadow:
0 10px 30px -10px rgba(0, 0, 0, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.05);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
padding: 0.75rem;
display: flex;
flex-direction: column;
overflow: hidden;
mask-image: radial-gradient(circle at bottom right, transparent 65px, black 66px);
-webkit-mask-image: radial-gradient(circle at bottom right, transparent 65px, black 66px);
}
.modern-frame-wrapper:hover .modern-frame-container {
transform: translateY(-5px);
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.3);
border-color: var(--cs-brand);
}
.modern-frame-image-wrapper {
position: relative;
width: 100%;
height: 100%;
border-radius: 1.75rem;
overflow: hidden;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}
.modern-frame-image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.modern-frame-wrapper:hover .modern-frame-image-wrapper img {
transform: scale(1.05);
}
.modern-frame-cta-button {
width: 54px;
height: 54px;
background: var(--cs-brand);
border-radius: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
color: white;
transition: all 0.3s ease;
box-shadow: 0 8px 16px -4px rgba(209, 2, 209, 0.5);
pointer-events: auto;
}
.modern-frame-wrapper:hover .modern-frame-cta-button {
transform: scale(1.1) rotate(5deg);
background: var(--cinesist-orange);
box-shadow: 0 12px 24px -8px rgba(255, 85, 0, 0.6);
}
/* --- 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(--font-sans);
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(--cs-brand);
}
/* 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(--cs-brand);
}
/* 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(--cs-brand);
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));
}
}
/*
-----------------
6 - Post Entry (Article Header, Layout, Meta)
-----------------
*/
/* --- Section Transitions & Logic --- */
/* --- 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);
}
/* --- 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 var(--cinesist-red);
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: var(--cinesist-red);
}
50% {
border-color: transparent;
}
100% {
border-color: var(--cinesist-red);
}
}
.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);
}
/**
* RUMOR HUD COMPONENT
* Architecture: BEM (.rumor-hud)
*/
/* Base HUD Container */
.rumor-hud-base {
position: relative;
border-left: 5px solid #333;
background: #111;
/* Dark background to pop from article white/grey */
padding: 1.5rem;
margin-bottom: 2rem;
display: flex;
align-items: center;
gap: 20px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Label Styling */
.rumor-hud__label {
font-family: var(--font-heading), sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
margin: 0 !important;
}
/* Percentage Styling */
.rumor-hud__value {
opacity: 0.6;
}
/* TIER 25%: STATIC NOISE (The Low-Level Leak) */
.rumor-hud--tier-25 {
border-color: #555;
background:
linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAElBMVEWFhYWDg4N3d3dtbW1mzMzMzMz960JAAAAABnRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLjsuOz09Pj8/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr+AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/P0f6AAAAAnRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLjsuOz09Pj8/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr+AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/P0f6AAAAInRSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLjsuOz09Pj8/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr+AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7/P0f6");
}
/* TIER 50%: INTERCEPTED (The Danger Zone) */
.rumor-hud--tier-50 {
border-color: var(--cinesist-gold);
background: repeating-linear-gradient(-45deg, #222, #222 10px, #333 10px, #333 20px);
box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.2);
}
.rumor-hud--tier-50 .rumor-hud__label {
color: var(--cinesist-gold);
}
/* TIER 75%: DECLASSIFIED (The Blue Chip Intel) */
.rumor-hud--tier-75 {
border-color: var(--cs-brand);
background: rgba(0, 255, 255, 0.05);
box-shadow: 0 0 15px rgba(0, 255, 255, 0.1);
}
.rumor-hud--tier-75 .rumor-hud__label {
color: var(--cs-brand);
text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
/* TIER 100%: VERIFIED (The Green Truth) */
.rumor-hud--tier-100 {
border-color: var(--flex-legendary);
background: rgba(50, 205, 50, 0.1);
animation: verified-pulse 2s infinite;
}
.rumor-hud--tier-100 .rumor-hud__label {
color: var(--flex-legendary);
}
@keyframes verified-pulse {
0% {
box-shadow: 0 0 5px rgba(50, 205, 50, 0.2);
}
50% {
box-shadow: 0 0 25px rgba(50, 205, 50, 0.5);
}
100% {
box-shadow: 0 0 5px rgba(50, 205, 50, 0.2);
}
}
/* --- Cinesist Movie Review Pattern Style --- */
/* Cinesist Review 2.0 Base Styles */
.cinesist-review-container {
--cs-primary: var(--cinesist-gold);
/* Default Gold */
--cs-accent: var(--cinesist-red);
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: var(--flex-legendary);
/* 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: var(--cinesist-red);
/* 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, var(--cinesist-gold) 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-white-black);
/* white Spy background */
color: var(--body-fcolor);
/* White Spy */
border-top: 5px solid var(--cs-brand) !important;
border: 1px solid var(--cs-brand);
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;
}
.CinesistDB-btn {
display: inline-block;
margin-top: 15px;
padding: 8px 15px;
background: var(--cs-brand);
box-shadow: 0 0 10px var(--cs-brand);
/* CinesistDB Purple [cite: 16] */
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
transition: background 0.2s;
}
.CinesistDB-btn:hover {
background: var(--cs-brand);
}
/* D20 Score Overlay */
.d20-score-overlay {
position: absolute;
top: 10px;
right: 10px;
width: 60px;
height: 60px;
background: var(--cs-brand);
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: var(--cs-brand);
}
/* CinesistDB Purple fills */
/* The Orange-to-Purple CTA */
.cta-gradient-btn {
display: block;
padding: 15px;
text-align: center;
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(--cs-brand);
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(--brand-orange);
/* Cinefox Orange to CinesistDB 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: var(--cinesist-red);
color: #fff;
}
/* Burn Notice [cite: 166] */
/* CinesistDB CTA Get Intel Section */
.CinesistDB-action {
display: flex;
padding-bottom: 25px;
}
.cinesist-db-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;
}
.age-rating {
border: 2px solid var(--cs-brand);
padding: 2px 5px 2px 5px;
}
.age-rating a {
text-decoration: none;
}
.age-rating a:hover {
color: var(--brand-orange);
}
/* Score-based Color Logic [cite: 168] */
.meta-word.legendary {
background: var(--cs-brand);
color: #fff;
}
/* Purple */
.meta-word.epic {
background: #27ae60;
color: #fff;
}
.meta-word.burn {
background: var(--cinesist-red);
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: var(--cinesist-orange);
}
/* 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(--cinesist-gold);
/* Legendary Gold */
box-shadow: 0 0 8px rgb(241, 202, 43 / 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-burn {
background-color: var(--cinesist-red);
box-shadow: 0 0 5px rgba(255, 13, 13, 0.3);
}
.score-bar.fill-trash {
background-color: #717171;
}
.score-bar.fill-basic {
background-color: #22c55e;
}
.score-bar.fill-epic {
background-color: #3b82f6;
}
.score-bar.fill-legendary {
background-color: var(--cinesist-gold);
box-shadow: 0 0 8px rgb(241, 202, 43 / 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: var(--cinesist-red);
}
.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: var(--cinesist-orange);
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: var(--cinesist-orange);
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: var(--cinesist-orange);
font-weight: 900;
font-size: 15px;
}
/* --- Cinescore Dynamic Bar Colors --- */
/* --- Cinebar Color Progression --- */
.score-bar.filled.fill-burn {
background: var(--cinesist-red);
}
.score-bar.filled.fill-trash {
background: #717171;
}
.score-bar.filled.fill-basic {
background: #22c55e;
}
.score-bar.filled.fill-epic {
background: #3b82f6;
}
.score-bar.filled.fill-legendary {
background: var(--cinesist-gold);
}
/* The "Glow" logic: only the highest filled bar glows */
.score-bar.filled.glowing.fill-burn {
box-shadow: 0 0 10px 1px #991b1b;
}
.score-bar.filled.glowing.fill-trash {
box-shadow: 0 0 10px 1px #404040;
}
.score-bar.filled.glowing.fill-basic {
box-shadow: 0 0 10px 1px #166534;
}
.score-bar.filled.glowing.fill-epic {
box-shadow: 0 0 10px 1px #1e40af;
}
.score-bar.filled.glowing.fill-legendary {
box-shadow: 0 0 10px 1px #a16207;
}
/* Intel Bullet Styling */
/* --- 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 var(--cinesist-orange);
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: var(--cinesist-orange);
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: var(--cinesist-orange) !important;
}
/* --- Badge & Genre Polish --- */
.badge-row {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
}
.cinesist-links a {
color: var(--cinesist-orange);
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-white-black);
border-top: 1px solid #333;
}
.cta-wrapper a {
color: #fff;
font-weight: 900;
}
.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(--cs-brand);
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;
}
.cinesist-db-intel-btn {
font-weight: 900;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}
.cinesist-db-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(--brand-orange);
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-white-black);
border-top: 1px dashed #333;
}
/* --- Verdict Section Polish --- */
.verdict-row {
padding: 25px 30px;
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: CinesistDB Tag Box --- */
#cinesist-db-links-box {
background-color: var(--gc-spy);
border-radius: 12px;
padding: 20px 25px;
margin-top: 30px;
border-top: 3px solid var(--cs-brand);
box-shadow: var(--shadow-1);
}
.cinesist-db-links-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.cinesist-db-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;
}
.cinesist-db-tag-link img {
width: 30px;
height: 30px;
object-fit: cover;
border-radius: 2px;
margin-right: 10px;
}
.cinesist-db-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(--cs-brand, #f0217d) !important;
}
#acf-group_cinesist_review_box_fields .hndle {
color: var(--cs-brand, #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(--cs-brand) !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(--cs-brand) !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(--cs-brand) !important;
border-color: var(--cs-brand) !important;
}
/*
-----------------
9 - Single
-----------------
*/
/* --- Blog Pages Body Styles --- */
/* --- Review Header Layering Fix --- */
header.review-header {
z-index: 40 !important;
padding: 0;
}
/* Review Header Right Side Meta Read Time */
.single-right-meta {
padding-right: 0.75rem;
}
.single-right-meta:not(:first-child):after {
content: "";
display: inline-flex;
width: 1px;
/* padding-right: 0.75rem; */
height: 6px;
margin-right: 10px;
margin-left: 6px;
background-color: var(--meta-fcolor);
opacity: 0.25;
}
/* --- Adjust Blog Font Size --- */
.eplus-wrapper {
font-size: 18px;
}
/* --- Cinepress 3.0: Post Dossier DNA Skin --- */
/* 1. Automated Image Borders (Featured and In-Post) */
/* 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(--cs-brand)) !important;
opacity: 0.7 !important;
}
/* --- Cinepress 3.0: Post Dossier DNA Skin --- */
/* 3. Subtitle Sync */
.cs-dossier-subtitle {
color: var(--review-accent, var(--cs-brand)) !important;
}
/* --- Cinepress 3.0: Review Dossier Skin --- */
/* 1. THE SPOTLIGHT HUD */
.cs-review-spotlight {
min-height: 500px !important;
border-bottom: 4px solid var(--cs-brand);
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,
h1.cs-review__headline,
h1.post-headline {
font-size: var(--cs-font-size-h1) !important;
font-weight: 900 !important;
color: #fff !important;
line-height: 1;
margin-bottom: 1.5rem !important;
word-spacing: 0.25rem;
}
h2.post-subline {
color: var(--cinesist-gold) !important;
display: flex;
fill: var(--review-accent, var(--cinesist-gold));
font-family: var(--font-sans) !important;
font-size: var(--cs-font-size-h3);
font-weight: 500;
position: relative;
z-index: 9999;
}
.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(--cs-brand));
}
/* 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(--cs-brand));
box-shadow: 0 0 10px var(--review-accent, var(--cs-brand, #333));
transition: width 1.5s ease-in-out;
}
/* --- Cinepress 3.0: High-Fidelity Ticket Stub Breadcrumbs --- */
.breadcrumbs-wrapper {
border-bottom-style: solid;
border-bottom-width: 0px;
border-left-style: solid;
border-left-width: 0px;
border-right-style: solid;
border-right-width: 0px;
border-top-style: solid;
border-top-width: 0px;
display: flex;
flex-direction: column;
max-width: 1300px;
position: relative;
width: 100%;
z-index: 30;
border-radius: 0px;
margin: 0rem auto;
padding: 0;
visibility: none;
height: 0;
}
/* 1. Reset the Nav & Paragraph */
nav.rank-math-breadcrumb {
margin-top: 2rem;
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(--flex-gray-1);
padding: 8px 20px;
color: var(--primary-text-color);
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(--cs-brand) !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(--cs-brand);
}
.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(--cs-brand);
position: sticky;
top: 100px;
}
/* Review Content Area */
.cs-review-content {
width: 100%;
}
.cs-review-content p,
.cs-review-content h1,
.cs-review-content h2,
.cs-review-content h3,
.cs-review-content h4,
.cs-review-content h5,
.cs-review-content h6 {
color: var(--primary-text-color);
}
/* 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;
}
.updated-date {
color: var(--primary-text-color);
}
.wp-block-post-terms__prefix {
color: var(--primary-text-color);
}
/* --- 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(--secondary-text-color);
}
.cs-reaction-sec-content .reaction-count {
background: var(--flex-gray-1);
color: var(--primary-text-color);
padding: 2px 8px;
border-radius: 10px;
font-size: 10px;
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(--cs-brand));
}
/* 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(--cs-brand));
font-weight: 500;
line-height: 1.3;
z-index: 5;
margin-left: 0 !important;
margin-right: 0 !important;
align-self: start;
}
/* 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(--cs-brand);
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(--cs-brand);
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(--cs-brand);
position: fixed;
top: 100px;
}
/* --- Cinepress 3.0: CinesistDB Holographic Sidebar --- */
.cs-CinesistDB-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 (CinesistDB Purple) */
.cs-dir {
color: var(--cs-brand);
/* 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(--cs-brand);
border-right: 1px solid var(--cs-brand);
border-bottom: 1px solid var(--cs-brand);
border-left: 1px solid var(--cs-brand);
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;
color: var(--flex-black-white);
}
.cs-review-comments-label {
margin: 0 !important;
font-size: var(--cs-font-size-h5);
color: var(--cs-title);
}
.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(--cs-brand);
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 */
/* --- CinesistDB: 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: var(--cinesist-red);
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(--cs-brand-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(--cs-brand);
/* Adjust to your brand color */
padding-left: 5px;
}
.brand-last {
font-weight: 600;
}
.required-mark {
color: var(--cinesist-red);
}
.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(--cs-brand);
border-radius: 50%;
}
.cs-logged-in-as {
margin: 0 !important;
font-size: 0.75rem;
color: var(--secondary-text-color);
}
#post-footer a.cs-update-profile:hover {
--decoration-type: underline;
text-decoration: var(--decoration-type);
--decoration-color: var(--cs-brand-80);
text-decoration-color: var(--decoration-color);
--underline-thickness: 2px;
text-decoration-thickness: var(--underline-thickness);
--underline-offset: 2px;
text-underline-offset: var(--underline-offset);
}
#post-footer a.cs-abort-session {
color: var(--cinesist-red);
}
#post-footer a.cs-abort-session:hover {
color: oklch(from var(--cinesist-red) l c h / 0.8);
--decoration-type: line-through;
text-decoration: var(--decoration-type);
--decoration-color: var(--flex-gray-2);
text-decoration-color: var(--decoration-color);
--underline-thickness: 2px;
text-decoration-thickness: var(--underline-thickness);
--underline-offset: unset;
text-underline-offset: var(--underline-offset);
}
.cs-logged-out-msg {
margin: 0 !important;
font-size: 0.75rem;
color: var(--primary-text-color);
}
.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 {
margin-bottom: 0 !important;
}
.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: 0.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(--cs-brand);
}
@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(--cs-brand);
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(--cs-brand);
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(--cs-brand);
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;
background: var(--cs-brand);
border: 1px solid white;
}
.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;
background: var(--cs-brand);
}
.cs-archive-hero.post-item:hover .cs-admin-edit-shroud {
opacity: 1;
}
.cs-edit-link {
display: inline-block;
background: var(--cs-brand);
color: var(--awhite) !important;
font-family: var(--font-sans, 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: var(--cs-brand-600);
color: var(--cinesist-orange);
}
/* 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(--font-sans);
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(--cinesist-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(--cinesist-orange);
}
/* --- Archive Feed --- */
/* Feed Cards */
/* --- Pagination Navigation --- */
/* --- 10A --- Cinesist Reviews Archive Template --- */
/* --- Cinesist Engine: Tactical Topic Hero Grid --- */
.cs-topic-hero-grid {
margin: 0 !important;
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 {
position: absolute;
bottom: 0;
left: 0;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
gap: 12px !important;
margin: 0 !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(--cs-brand) !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(--cs-brand)) !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 --- */
/* Container Grid Setup */
.cs-topic-hero-main {
margin: 0 !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(--cs-brand)) !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(--cs-brand)) !important;
text-decoration-thickness: 2px;
}
/*
-----------------
11 - Pages
-----------------
*/
.page-header-1 .page-header-inner {
display: none;
/* Hides Default Foxiz Page Header */
}
/* --- Homepage Styles Migrated to assets/css/home.css --- */
/* ==========================================
Cinesist Animations
======================================== */
/* --- 1. Soft Pulse --- */
.card-pulse {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
cursor: pointer;
}
.card-pulse:hover {
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
}
70% {
transform: scale(1.05);
box-shadow: 0 0 0 15px rgba(0, 0, 0, 0);
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}
/* --- 2. Glitch Flicker --- */
.card-flicker {
transition: opacity 0.2s ease;
cursor: pointer;
}
.card-flicker:hover {
animation: flicker 0.2s infinite;
}
@keyframes flicker {
0% {
opacity: 1;
transform: translateX(0);
}
25% {
opacity: 0.8;
transform: translateX(-1px);
}
50% {
opacity: 0.9;
transform: translateX(1px);
}
75% {
opacity: 0.7;
transform: translateX(-1px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
/* --- 3. Attention Shake --- */
.card-shake {
transition: transform 0.2s ease;
cursor: pointer;
}
.card-shake:hover {
animation: shake 0.5s ease-in-out;
}
@keyframes shake {
0%,
100% {
transform: rotate(0deg);
}
20% {
transform: rotate(-3deg);
}
40% {
transform: rotate(3deg);
}
60% {
transform: rotate(-3deg);
}
80% {
transform: rotate(3deg);
}
}
/* --- 4. Floating Ghost --- */
.card-float {
transition: transform 0.5s ease;
cursor: pointer;
}
.card-float:hover {
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
/* --- 5. Glow Trail --- */
.card-glow {
transition: filter 0.3s ease;
cursor: pointer;
}
.card-glow:hover {
animation: glow 1s ease-in-out infinite alternate;
}
@keyframes glow {
from {
filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #3498db);
}
to {
filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #3498db);
}
}
/* ===============================================================
CINESCORE TIER EFFECTS
=============================================================== */
/* Base Card Styling */
.cinesist-card {
background: none;
transition: all 0.3s ease-in-out;
border: 3px solid transparent;
box-shadow: 0 10px 30px transparent;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.cinesist-card:hover,
.cinesist-card:focus {
transform: translateY(-5px) translateZ(0);
}
/* 9-10: LEGENDARY(Gold)👑 */
.tier-legendary {
--tier-color: var(--cs-legendary-500);
border-color: var(--tier-color);
border-radius: 0.5rem;
}
.tier-legendary:hover {
box-shadow: 0 0 25px var(--tier-color);
box-shadow: 10px 10px 20px var(--tier-color);
/* Add a subtle "shimmer" effect here */
}
.tier-legendary a:hover {
text-decoration: 2px solid underline var(--tier-color);
text-decoration-color: var(--tier-color);
}
/* 7-8: Epic(Blue)💎 */
.tier-epic {
--tier-color: var(--cs-epic-500);
border-color: var(--tier-color);
}
.tier-epic:hover {
box-shadow: 0 0 20px rgba(0, 150, 255, 0.5);
box-shadow: 10px 10px 20px var(--tier-color);
}
.tier-epic a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color);
}
/* 5-6: Basic(Green)🔋 */
.tier-basic {
--tier-color: var(--cs-basic-500);
border-color: var(--tier-color);
border-style: dashed;
/* The "System Flaw" look */
}
.tier-basic:hover {
box-shadow: 10px 10px 20px var(--tier-color);
}
.tier-basic a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--cs-brand));
}
/* 3-4: Trash(Grey)🗑️ */
.tier-trash {
--tier-color: var(--cs-trash-500);
border-image: repeating-linear-gradient(45deg, var(--tier-color), var(--tier-color) 10px, #000 10px, #000 20px) 5 !important;
/* z-index: 9999999; */
border-radius: var(--border-radius-2);
}
.tier-trash:hover {
box-shadow: 10px 10px 20px var(--tier-color);
}
.tier-trash a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--cs-brand));
}
/* 1-2: Burn(Red)🔥 */
.tier-burn {
--tier-color: var(--cs-burn-500);
border-image: repeating-linear-gradient(45deg, var(--tier-color), var(--tier-color) 10px, #000 10px, #000 20px) 5;
animation: flicker 3s ease-in-out infinite;
}
.tier-burn:hover {
animation: flicker 0.1s infinite !important;
background: linear-gradient(0deg, rgba(255, 0, 0, 0.2) 0%, transparent 100%);
box-shadow: 10px 10px 20px var(--tier-color);
}
.tier-burn a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--tier-color, var(--cs-brand));
}
@keyframes flicker {
0% {
border-color: #ff0000;
}
50% {
border-color: #ff8000;
}
100% {
border-color: #ff0000;
}
}
/* Tier: NR (Not Rated / Flex CinesistDB) */
.tier-nr {
/* Uses your global flex variable */
--tier-color: var(--cs-brand);
border-color: var(--cs-brand);
border-style: double;
/* Gives it a "double-encrypted" look */
opacity: 0.9;
}
.tier-nr:hover {
opacity: 1;
box-shadow: 0 0 15px var(--cs-brand);
/* 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(--cs-brand);
}
50% {
border-color: rgba(128, 128, 128, 0.5);
}
/* Fades toward a neutral grey */
100% {
border-color: var(--cs-brand);
}
}
/* Ensure the Meta Badge for NR looks distinct */
.tier-nr .cinescore-badge {
background-color: var(--cs-brand);
letter-spacing: 1px;
text-transform: uppercase;
}
/* Apply colors to internal elements automatically */
.cinescore-overlay>.cinescore-number {
color: var(--tier-color);
text-shadow: #000 1px 1px 1px;
}
.cinescore-overlay>.cinescore-badge {
background-color: var(--tier-color);
}
/* ===============================================================
CINESCORE GEM/BADGE EFFECTS
=============================================================== */
/* Set the Font size on the badges */
.cinescore-badge {
font-size: 0.85rem;
}
.cinescore-badge a {
font-size: 0.85rem;
}
.cinescore-badge.cinescore-overlay {
color: transparent;
}
/* Custom Badge for Prediction Cinescore Badges */
.cinescore-badge.predictions {
align-items: center;
background-blend-mode: screen;
background-image: linear-gradient(135deg, rgba(250, 100, 182, 0.61) 0%, rgba(230, 0, 119, 0.74) 100%) !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: row;
justify-content: center;
left: 10px;
position: absolute;
top: 10px;
z-index: 20;
border: 2px solid var(--cinefox-white-spy);
border-radius: 5px;
padding: 0px 10px;
}
/* Legendary Gem */
.is-legendary-gem {
background-blend-mode: normal;
background-image: linear-gradient(135deg, var(--cs-legendary-400) 0%, var(--cs-legendary-600) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 20px 0px var(--cs-legendary-300);
transform: scale(1.1);
transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) 0s;
}
.is-legendary-gem:is(:hover, :focus) {
border: 1px solid var(--color-yellow-100);
}
.is-legendary-gem a {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
.is-legendary-gem a:hover {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
/* Epic Gem */
.is-epic-gem {
background-blend-mode: normal;
background-image: linear-gradient(135deg, var(--cs-epic-400) 0%, var(--cs-epic-600) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 20px 0px var(--cs-epic-300);
transform: scale(1.1);
transition: all 0.5s ease 0s;
}
.is-epic-gem:is(:hover, :focus) {
border: 1px solid var(--color-blue-100);
}
.is-epic-gem a {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
.is-epic-gem a:hover {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
/* Basic Gem */
.is-basic-gem {
background-blend-mode: normal;
background-image: linear-gradient(135deg, var(--cs-basic-400) 0%, var(--cs-basic-600) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 20px 0px var(--cs-basic-300);
transform: scale(1.1);
transition: all 0.5s ease 0s;
}
.is-basic-gem:is(:hover, :focus) {
border: 1px solid var(--color-green-100);
}
.is-basic-gem a {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
.is-basic-gem a:hover {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
/* Trash Gem */
.is-trash-gem {
background-blend-mode: normal;
background-image: linear-gradient(135deg, var(--cs-trash-400) 0%, var(--cs-trash-600) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 20px 0px var(--cs-trash-300);
transform: scale(1.1);
transition: all 0.5s ease 0s;
}
.is-trash-gem:is(:hover, :focus) {
border: 1px solid var(--color-neutral-100);
}
.is-trash-gem a {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
.is-trash-gem a:hover {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
/* Burn Gem */
.is-burn-gem {
background-blend-mode: normal;
background-image: linear-gradient(135deg, var(--cs-burn-400) 0%, var(--cs-burn-600) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 20px 0px var(--cs-burn-300);
transform: scale(1.1);
transition: all 0.5s ease 0s;
}
.is-burn-gem:is(:hover, :focus) {
border: 1px solid var(--color-red-100);
}
.is-burn-gem a {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
.is-burn-gem a:hover {
text-decoration: none;
color: var(--wp--preset--color--custom-frost-white, #fafafa);
}
/* Not Rated Gem */
.is-nr-gem {
background-blend-mode: normal;
background-image: linear-gradient(135deg, var(--color-purple-400) 0%, var(--color-purple-600) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0 0 20px 0px var(--color-purple-300);
transform: scale(1.1);
transition: all 0.5s ease 0s;
}
.is-nr-gem:is(:hover, :focus) {
border: 1px solid var(--cs-brand-100);
}
.is-nr-gem a {
text-decoration: none;
}
.is-nr-gem a:hover {
text-decoration: none;
}
/* --- 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(--cs-brand);
/* Default to CinesistDB 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);
}
/* --- Cinescore Color Injection System --- */
/* Fallback for all cards */
.is-review-card {
--cinescore-accent: var(--cs-brand);
}
/* 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(--cs-brand);
}
/* 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 */
/* 4. ELEMENT STYLING */
img.cs-intel-card-image {
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);
}
h1.cs-intel-card-title {
font-size: 2.5rem;
color: #fff !important;
}
h2.cs-intel-card-title {
font-size: 2.5rem;
color: #fff;
}
h3.cs-intel-card-title {
font-size: 2.25rem;
}
h4.cs-intel-card-title {
font-size: 2rem;
}
h5.cs-intel-card-title {
font-size: 1.75rem;
color: var(--flex-text-title);
}
.cs-intel-card-title a {
color: var(--flex-text-title);
font-size: 1.15rem;
font-weight: 900;
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;
padding-left: 0;
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;
}
img.card-writer-av {
height: 3rem;
width: 3rem;
border-radius: 50%;
}
.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,
h4.entry-title a:hover,
h5.entry-title a:hover {
text-decoration: 3px solid underline;
text-decoration-color: var(--review-accent, var(--topic-accent, var(--cs-brand))) !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(--cs-brand)); */
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;
}
/* Global Meta Badge: High Efficiency */
.cs-meta-badge {
width: fit-content;
/* Shrink background to text size */
align-self: flex-start;
/* Stop stretching in flex containers */
display: inline-flex;
/* Ensure it behaves like a badge */
padding: 4px 12px;
/* Adjust padding for a nice badge look */
border-radius: 4px;
/* Optional: round those corners */
}
/* --- 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(--cs-brand);
}
/* 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(--cs-brand);
font-weight: 900;
}
/* 6. The Button (CinesistDB 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(--cs-brand);
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(--cs-brand));
}
.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(--cs-brand) !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(--cs-brand-50);
transition: all 0.3s ease;
position: relative;
}
.cs-video-queue .wp-block-post:hover {
border-left-color: var(--cs-brand-90);
background: var(--cs-brand-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(--cs-brand-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(--cs-brand);
}
.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(--cs-brand);
/* CinesistDB 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 --- */
/* Main Footer Background */
.cs-footer {
background-color: var(--flex-gray-50);
box-shadow: -6px -3px 20px 7px rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
max-width: 100%;
padding-top: 2rem;
position: relative;
width: 100%;
z-index: 90;
border-top: 4px solid var(--cs-brand-500);
}
/* Root Container Padding & Background */
.cs-terminal-footer {
--rb-width: var(--cs-width-xl);
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-7);
margin-block-start: 0 !important;
padding-block-start: 2rem;
/* padding-top: 2rem; */
border-top: 4px solid var(--cs-brand-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(--font-sans);
}
/* 1. The Vanguard: Mascots & Newsletter */
.cs-footer-vanguard {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
/* 3 Columns: Start, Center, End */
gap: 2rem;
padding: 0;
margin-bottom: 1rem;
}
/* The Center of the Vanguard */
.vanguard-col {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Container Wrapper - Ensure parent container expands */
form.mailpoet_form .mailpoet_form_columns_container,
.mailpoet_form_columns_container {
width: 100% !important;
flex: 1 1 auto !important;
container-type: normal !important;
}
/* Container - Force Row Layout */
form.mailpoet_form .mailpoet_form_columns.resist-signup-wrapper,
.mailpoet_form_columns.resist-signup-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
gap: 0 !important;
align-items: stretch !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
container-type: normal !important;
}
/* Email Column - Expand to fill space */
form.mailpoet_form .mailpoet_form_column.resist-email-wrapper,
.mailpoet_form_column.resist-email-wrapper {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
flex-basis: auto !important;
/* Override MailPoet inline flex-basis: 100% */
margin: 0 !important;
padding: 0 !important;
container-type: normal !important;
}
/* Button Column - Stay fixed size */
form.mailpoet_form .mailpoet_form_column.resist-btn-wrapper,
.mailpoet_form_column.resist-btn-wrapper {
flex: 0 0 auto !important;
width: auto !important;
flex-basis: auto !important;
/* Override MailPoet inline flex-basis: 25% */
margin: 0 !important;
padding: 0 !important;
container-type: normal !important;
}
/* Internal Reset */
form.mailpoet_form .mailpoet_form_column .mailpoet_paragraph,
.resist-signup-wrapper .mailpoet_paragraph {
margin: 0 !important;
}
/* Input & Button Styling */
form.mailpoet_form input.mailpoet_text,
.resist-signup-wrapper input.mailpoet_text {
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right: none !important;
height: 100% !important;
}
form.mailpoet_form input.mailpoet_submit,
.resist-signup-wrapper input.mailpoet_submit {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
margin: 0 !important;
height: 100% !important;
}
/* Speech Bubble */
.cs-speech-bubble {
position: relative;
font-size: 18px;
line-height: 24px;
width: 300px;
background: var(--flex-gray-300);
border-radius: 8px;
padding: 24px;
text-align: center;
color: var(--primary-text-color);
}
/* Speech Bubble Pointer (The "Tail") */
.cs-speech-bubble::before,
.cs-speech-bubble::after {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-left: 24px solid var(--flex-gray-300);
border-right: 12px solid transparent;
border-top: 12px solid var(--flex-gray-300);
border-bottom: 20px solid transparent;
right: 4.5rem;
bottom: -24px;
background-color: transparent;
}
.cs-speech-bubble__cipher-msg,
.gb-text-3d6e62f1,
.gb-text-43a8e9f1 {
color: var(--primary-text-color) !important;
}
.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(--font-sans);
font-weight: 900;
font-size: 0.7rem;
letter-spacing: 1px;
margin-top: 1rem;
text-transform: uppercase;
}
.status-purple {
color: var(--cs-brand-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(--cs-brand-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(--flex-gray-200) !important;
border: 1px solid var(--cs-brand-90) !important;
/* CinesistDB Purple */
border-right: none !important;
/* Seam */
border-radius: 0.25rem 0 0 0.25rem !important;
color: var(--secondary-text-color) !important;
padding: 0 1rem !important;
font-family: var(--font-sans) !important;
outline: none !important;
}
#mailpoet_form_1 .mailpoet_text:focus {
border-color: var(--cs-brand-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(--cs-brand) !important;
border-color: var(--cs-brand-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(--cs-brand) !important;
border-color: var(--cs-brand-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(--cs-brand);
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(--cs-brand-50);
}
70% {
box-shadow: 0 0 0 10px var(--cs-brand-90);
}
100% {
box-shadow: 0 0 0 0 var(--cs-brand);
}
}
/* Encryption Text */
.gb-text-30eb9c83 {
color: var(--secondary-text-color);
}
/* 2. The Directory: Link Columns */
.cs-footer-directory {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.875rem;
margin-bottom: 3.75rem;
}
/* Cinesist Footer Text */
.gb-element-e8b6b716,
.gb-element-e6ee87ea,
.gb-element-b7398aa2,
.gb-text-78429c5c {
color: var(--primary-text-color) !important;
}
.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(--cs-brand-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(--cs-brand);
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(--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);
}
/* --- 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(--cs-brand);
transform: var(--cs-brand);
color: var(--btn-accent-h, var(--awhite));
border-color: var(--cs-brand, var(--cs-brand));
background-color: var(--cs-brand, var(--cs-brand));
box-shadow: var(--btn-shadow, 0 3px 12px var(--cs-brand-90, var(--cs-brand-90)));
}
/* Cinesist Buttons */
/* CinesistDB Intel Button */
.cinesist-db-intel-btn {
font-weight: 900;
text-decoration: none;
font-size: 12px;
text-transform: uppercase;
}
.cinesist-db-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(--cs-brand));
}
figcaption:not(:empty):before,
.wp-caption-text:before {
display: var(--caption-bdisplay, inline-block);
width: 30px;
height: 0.3rem;
margin-right: 7px;
content: "";
border-top: 3px solid;
}
.entry-content figcaption {
text-align: unset !important;
margin-block: 0.5em 0;
font-weight: 600;
color: var(--secondary-text-color);
}
/* --- 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(--cs-brand);
/* CinesistDB 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 --- */
/* --- Notification Popup Style --- */
.header-dropdown.notification-dropdown .notification-popup .notification-header span.h4 {
font-size: 1rem;
}
.header-dropdown.notification-dropdown .notification-popup .notification-header .notification-url.meta-text {
font-size: 0.8rem;
}
/* Notification Bubble */
.notification-popup {
display: block;
width: var(--dropdown-w, 400px);
max-width: 100vw;
--bottom-spacing: 0;
border: 1px solid var(--flex-gray-4);
border-top: none;
font-size: 1rem;
}
/* Notification Header */
.notification-header {
display: flex;
align-items: center;
padding: 10px 20px;
/* Added new border */
border-bottom: 1px solid var(--flex-gray-3);
}
/* --- Cinesist Overlay/Pop-up Search Block --- */
/* Cinesist Search Overlay: "The Intercept" */
/* 1. Backdrop Blur & Darken */
.gb-overlay-1000065662 .gb-overlay__backdrop {
background-color: rgba(10, 10, 10, 0.9) !important;
backdrop-filter: blur(20px) saturate(180%) !important;
-webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}
/* 2. Inner Wrapper Layout */
.cs-search-overlay-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
height: 100%;
}
/*
-----------------
10 - Pages (Default Page, Contact, Legal)
-----------------
*/
/*
-----------------
11 - Forms (Search, Newsletter, Inputs)
-----------------
*/
/* 3. The Search Input Group */
.cs-search-input-group {
display: flex;
align-items: center;
width: 100%;
border-bottom: 3px solid var(--cs-brand);
padding: 15px 0;
margin-bottom: 40px;
position: relative;
transition:
border-color 0.4s ease,
box-shadow 0.4s ease;
}
.cs-search-input-group:focus-within {
border-color: #ffffff;
box-shadow: 0 5px 20px -10px var(--cs-brand);
}
.cs-search-icon {
color: var(--cs-brand);
margin-right: 25px;
display: flex;
align-items: center;
opacity: 0.8;
}
.cs-search-input {
background: transparent !important;
border: none !important;
color: var(--flex-text-title) !important;
font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
font-weight: 200 !important;
width: 100% !important;
outline: none !important;
font-family: var(--font-primary, sans-serif) !important;
padding: 0 !important;
}
.cs-search-input::placeholder {
color: var(--flex-text-secondary) !important;
}
/* 4. Popular Tags / Active Signals */
.cs-search-popular {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
animation: fadeIn 0.8s ease forwards;
animation-delay: 0.3s;
opacity: 0;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.cs-popular-label {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 3px;
color: var(--cs-brand);
font-weight: 800;
white-space: nowrap;
}
.cs-tag-cloud {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.cs-search-tag {
color: var(--flex-text-secondary);
text-decoration: none;
font-size: 1.1rem;
font-weight: 500;
transition: all 0.3s ease;
padding: 4px 10px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.05);
}
.cs-search-tag:hover {
color: #ffffff;
background: var(--cs-brand);
transform: translateY(-2px);
}
/* 5. Close Button Styling (Custom) */
.cs-custom-close {
position: fixed !important;
top: 40px !important;
right: 40px !important;
color: var(--flex-text-title);
font-size: 40px !important;
line-height: 1 !important;
opacity: 0.6;
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
cursor: pointer;
background: transparent !important;
border: none !important;
z-index: 999999 !important;
padding: 10px !important;
}
.cs-custom-close:hover {
opacity: 1;
color: var(--cs-brand) !important;
transform: rotate(90deg);
}
.cs-custom-close:active {
transform: rotate(360deg) scale(0.7);
color: var(--cs-brand) !important;
}
/* --- Cinesist: Tactical Load More Scanner --- */
.cs-terminal-loader {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
color: var(--cs-brand);
text-shadow: 0 0 5px var(--cs-brand);
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(--cs-brand) !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: 0.3em;
margin-right: 7px;
content: "";
color: var(--review-accent);
border-top: 3px solid currentColor;
}
/*
-----------------
7 - Post Modules (Grids, Sliders, Heros)
-----------------
/* --- CinesistDB 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(--cs-brand);
/* CinesistDB 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(--cs-brand-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(--cs-brand);
/* Glows CinesistDB 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(--cs-brand);
box-shadow: 0 0 20px var(--cs-brand-90);
}
/* Glassmorphism Cinescore Badge */
.cinescore-overlay {
position: absolute;
bottom: 35%;
left: 50%;
transform: translateX(-50%);
background: var(--flex-gray-65);
color: var(--tier-color);
backdrop-filter: blur(5px);
border: 2px solid var(--tier-color);
border-radius: 8px;
padding: 5px 5px;
display: flex;
align-items: center;
gap: 8px;
min-width: 60px;
justify-content: center;
z-index: 10;
}
/* 1. Default Style: Light Mode Layout */
.card-icon-marker {
width: 24px;
height: 24px;
background-image: url("https://cinesist.com/wp-content/uploads/2026/05/Cinesist-Black-and-Purple-Icon-Logomark.webp");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
z-index: 20;
border: none !important;
}
/* 2. Overriding Style: Automatic Dark Mode Switch */
[data-theme="dark"] {
.card-icon-marker {
background-image: url("https://cinesist.com/wp-content/uploads/2026/05/Cinesist-White-Spy-Icon-Logomark.webp");
}
}
.cinescore-number {
display: inline-flex;
align-items: center;
font-weight: 900;
font-size: 1.4rem;
color: inherit;
font-family: var(--font-sans);
}
.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(--cs-brand-90);
text-decoration: underline;
}
.film-title a:hover {
color: var(--cs-brand-90);
}
.film-title .year {
display: block;
font-size: 0.8em;
opacity: 0.7;
color: var(--cs-brand);
}
/* --- CS Bookmark Button --- */
/* 1. Fix the Overlap (Put it back in line) */
.user-action-bar .qa-button.bookmark-trigger.rb-bookmark {
position: static !important;
width: 48px !important;
height: 48px !important;
margin: 0 !important;
color: var(--cs-brand);
}
/* 2. Hide the fill icon by default */
/* We target the specific gb-shape class that GB uses */
.user-action-bar .qa-button.bookmark-trigger .gb-shape.bookmarked-icon {
display: none !important;
}
/* 3. Show the outline icon by default */
.user-action-bar .qa-button.bookmark-trigger .gb-shape:not(.bookmarked-icon) {
display: flex !important;
}
/* Change the outline icon color when the button is hovered */
.user-action-bar .qa-button.bookmark-trigger:hover .gb-shape:not(.bookmarked-icon),
.user-action-bar .qa-button.bookmark-trigger:hover .gb-shape:not(.bookmarked-icon) svg {
color: var(--cs-brand) !important;
fill: var(--cs-brand);
}
/* Optional: Add a smooth transition so it doesn't just 'snap' */
.user-action-bar .qa-button.bookmark-trigger .gb-shape {
transition: color 0.2s ease-in-out !important;
}
/* 4. Bookmarked State (The Swap) */
.user-action-bar .qa-button.bookmark-trigger.bookmarked .gb-shape:not(.bookmarked-icon) {
display: none !important;
}
.user-action-bar .qa-button.bookmark-trigger.bookmarked .gb-shape.bookmarked-icon {
display: flex !important;
color: var(--cs-brand-90) !important;
}
/* 5. Centering fix for GenerateBlocks spans */
.user-action-bar .qa-button.bookmark-trigger .gb-shape {
justify-content: center !important;
align-items: center !important;
font-size: 28px !important;
line-height: 1 !important;
margin: 0 !important;
}
/* --- CS Bookmark Spinning Animation --- */
/* 1. Define the smooth 360-degree spin */
@keyframes bookmark-spin-smooth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* 2. Apply the animation when the 'is-loading' class is present */
.user-action-bar .qa-button.bookmark-trigger.is-loading .qa-icon,
.user-action-bar .qa-button.bookmark-trigger.is-loading .gb-shape {
/* 0.8s duration with a smooth cubic-bezier curve */
animation: bookmark-spin-smooth 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
/* 3. Ensure the icon container allows the spin without clipping */
.user-action-bar .qa-button.bookmark-trigger .qa-icon {
display: flex !important;
transition: color 0.2s ease-in-out !important;
}
.qa-button svg {
overflow: visible;
}
.cs-quickbar-av {
border-radius: 50%;
}
/* Sets the font size for quick links */
.qlink {
font-size: var(--rem-mini);
/* 0.8rem */
}
/* ====================
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(--cs-brand);
}
.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(--cs-brand);
/* 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(--brand-orange);
}
/* 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(--cs-brand);
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(--cs-brand);
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(--cs-brand);
/* CinesistDB 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(--cs-brand);
font-weight: 800;
text-transform: uppercase;
font-size: 13px;
text-decoration: none;
transition: color 0.3s ease;
}
.show-more-trigger:hover {
color: var(--brand-orange);
}
.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;
}
/*
-----------------
13 - Widgets (Sidebar, Sidebars, Dynamic Widgets)
-----------------
*/
/* --- 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(--font-sans);
}
.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(--cs-brand);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--cs-spacing-sm);
border-bottom: 2px solid var(--cs-brand);
}
.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(--cs-brand);
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(--cs-brand);
}
.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(--cs-brand);
}
.review-sidebar-col .jw-offer-label {
color: var(--flex-text-title);
}
/*
-----------------
12 - Comments (Post Comments, Threaded Replies)
-----------------
*/
/* ====================
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(--font-sans);
font-size: 1rem;
text-transform: none;
letter-spacing: 1px;
color: var(--cs-brand);
}
.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(--cs-brand);
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(--brand-orange);
}
/* Responsive Recon */
@media (max-width: 991px) {
.dossier-grid {
grid-template-columns: 1fr;
}
.recon-sidebar {
max-width: 400px;
margin: 0 auto;
}
}
/* --- CinesistDB 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-cs-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(--cs-brand);
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(--brand-orange);
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
}
/* --- CinesistDB Social Meta Style --- */
#cinesist-db-social-meta .meta-like i {
font-size: calc(1em + 10px);
}
#cinesist-db-social-meta .smeta-sec .meta-like>span {
min-width: 52px;
background: var(--cs-brand);
color: var(--awhite);
}
#cinesist-db-social-meta .meta-like>span:hover {
-webkit-transform: var(--brand-orange);
transform: var(--brand-orange);
color: var(--btn-accent-h, var(--awhite));
border-color: var(--brand-orange, var(--brand-orange));
background-color: var(--brand-orange, var(--brand-orange));
box-shadow: var(--btn-shadow, 0 3px 12px var(--brand-orange-90, var(--brand-orange-90)));
}
@media (min-width: 768px) {
#cinesist-db-social-meta .meta-bookmark .rb-bookmark i {
font-size: calc(var(--meta-fsize) * 1.45);
}
}
.bookmark-notification-inner {
border: 2px solid var(--cs-brand-90) !important;
}
.bookmark-title {
color: var(--cs-brand) !important;
}
.follow-info strong {
margin-left: 7px;
font-size: 1.1em;
color: var(--cs-brand);
}
/* --- CinesistDB Page Wrapper Style --- */
.cinesist-db-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);
}
/* --- CinesistDB Linked Profiles Box Style --- */
#cinesist-db-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(--cs-brand);
box-shadow: var(--shadow-1);
}
#cinesist-db-links-box .csdb-emblem {
background-image: var(--cinesist-emblem-logo);
display: inline-block;
width: 30px;
height: 30px;
background-size: cover;
background-position: center;
margin-right: 10px;
}
#cinesist-db-links-box .links-box-heading h3 {
color: var(--cs-brand);
font-size: 18px;
font-weight: 700;
margin-top: 0;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}
#cinesist-db-links-box .cinesist-db-links-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
/* Spacing between tags */
}
/* --- CinesistDB Pill Tag Style --- */
#cinesist-db-links-box .cinesist-db-tag-link {
display: inline-flex;
align-items: center;
background-color: var(--page-bg-color);
color: var(--cs-brand);
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 */
}
#cinesist-db-links-box .cinesist-db-tag-link:hover {
opacity: 0.75;
}
/* --- CinesistDB Pill Tag Image Style --- */
#cinesist-db-links-box .cinesist-db-tag-link img {
width: 40px;
/* Size of the thumbnail */
height: 100%;
/* Size of the thumbnail */
object-fit: cover;
margin-right: 10px;
/* Space between image and text */
border: none;
}
/* --- CinesistDB Pill Tag Fallback Icon Style --- */
#cinesist-db-links-box .cinesist-db-tag-link .cinesist-db-tag-icon {
width: 28px;
height: 28px;
margin-right: 10px;
background-color: #555;
/* Fallback dot color */
border-right: 1px solid #444;
}
/* --- CinesistDB Pill Tag Text Style --- */
#cinesist-db-links-box .cinesist-db-tag-link span {
padding-right: 12px;
/* Add padding to the text */
/* The color is inherited from the tag */
}
/* --- CinesistDB Person Name Shortcode [person_name] --- */
#cinesist-db-links-box .cinesist-db-person-name,
#cinesist-db-links-box .cinesist-db-movie-title {
font-size: 1.7rem;
font-weight: 700;
color: var(--cs-brand);
}
/* --- CinesistDB Profile Box --- */
.wp-block-group>.cinesist-db-box-genres {
display: inline-flex;
}
/*
-----------------
16 - BuddyPress (Social Networking)
-----------------
*/
/* --- 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 --- */
/*
-----------------
12 - Comments (Post Comments, Threaded Replies)
-----------------
*/
/*
-----------------
16 - BuddyPress (Social Networking)
-----------------
*/
/* --- 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>.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 .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-brand-purple-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(--cs-brand);
}
.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-brand-purple);
}
.acomment-content {
color: var(--awhite);
}
/*
-----------------
17 - bbPress (Forums)
-----------------
*/
/* --- 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;
}
/*
-----------------
18 - WooCommerce (Shop)
-----------------
*/
/*
-----------------
19 - Mailpoet (Newsletter)
-----------------
*/
/*
-----------------
20 - Contact Form 7 (Inquiries)
-----------------
*/
/*
-----------------
21 - Third Party Plugins (RankMath, etc.)
-----------------
*/
/* --- 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 */
}
/*
-----------------
14 - Footer (Main Footer Area, Copyright)
-----------------
*/
/*
-----------------
15 - Social (Sharing, Follow, Profiles)
-----------------
*/
/* ===============================================================
CINESIST PERSONALIZATION (RECRUIT & SIPHON)
=============================================================== */
.cs-follow-btn,
.cs-bookmark-btn-wrapper {
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 12px;
transition: all 0.2s ease;
text-decoration: none !important;
}
/* Stabbed Note SVG Architecture */
.cs-stabbed-note-icon {
order: -1;
width: 28px;
height: 28px;
fill: currentColor;
transition:
fill 0.2s ease,
transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: block;
}
/* Active State: The Brand Stab */
.cs-follow-btn.followed .cs-stabbed-note-icon,
.cs-bookmark-btn-wrapper.bookmarked .cs-stabbed-note-icon {
fill: var(--cs-brand) !important;
transform: scale(1.15) rotate(-5deg);
/* Dynamic "Stabbed" animation */
}
/* Loading State: Reactive feedback */
.cs-follow-btn.loading,
.cs-bookmark-btn-wrapper.loading {
opacity: 0.5;
pointer-events: none;
cursor: wait;
}
/* Label Toggling: Track vs Remove */
.cs-follow-btn .cs-active-label,
.cs-bookmark-btn-wrapper .cs-active-label {
display: none !important;
}
.cs-follow-btn.followed .cs-active-label,
.cs-bookmark-btn-wrapper.bookmarked .cs-active-label {
display: inline-block !important;
}
.cs-follow-btn.followed .cs-default-label,
.cs-bookmark-btn-wrapper.bookmarked .cs-default-label {
display: none !important;
}
/* Suppression of Legacy Icon Injections */
.cs-follow-btn i,
.cs-bookmark-btn-wrapper i {
display: none !important;
}
/* Hover States */
.cs-follow-btn:hover,
.cs-bookmark-btn-wrapper:hover {
opacity: 0.85;
}
.cs-follow-btn:hover .cs-stabbed-note-icon,
.cs-bookmark-btn-wrapper:hover .cs-stabbed-note-icon {
transform: translateY(-2px);
}
/* 1. Ensure Title and Button are centered vertically */
.feed-bookmark-heading {
display: flex;
align-items: center;
gap: 15px;
}
/* 2. Button container reset */
.feed-bookmark-heading h2:nth-child(2) {
margin: 0;
display: flex;
align-items: center;
}
.cs-recruit-wrapper {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: color 0.3s ease;
text-transform: uppercase;
font-weight: bold;
}
.cs-recruit-wrapper .cs-stabbed-note-icon {
width: 40px;
height: 40px;
transition: fill 0.3s ease;
}
.cs-recruit-wrapper .cs-default-label,
.cs-recruit-wrapper .cs-active-label {
font-size: 14px;
letter-spacing: 1px;
}
/* 4. 'TRACK' STATE (Not followed): Primary Text color/fill, hovers to Purple Brand color */
.cs-recruit-wrapper:not(.followed) {
color: var(--flex-text-primary);
}
.cs-recruit-wrapper:not(.followed) .cs-stabbed-note-icon {
fill: var(--flex-text-primary);
}
.cs-recruit-wrapper:not(.followed):hover {
color: var(--cs-brand-400);
}
.cs-recruit-wrapper:not(.followed):hover .cs-stabbed-note-icon {
fill: var(--cs-brand-400);
}
/* 5. 'REMOVE' STATE (Followed): Purple text/fill, hovers to Primary Text */
.cs-recruit-wrapper.followed {
color: var(--cs-brand-400);
}
.cs-recruit-wrapper.followed .cs-stabbed-note-icon {
fill: var(--cs-brand-400);
}
.cs-recruit-wrapper.followed:hover {
color: var(--primary-text-color);
}
.cs-recruit-wrapper.followed:hover .cs-stabbed-note-icon {
fill: var(--flex-text-primary);
}
/*
-----------------
22 - WP Hacks (Core Overrides, Fixes)
-----------------
*/
/* --- Hide Wordpress Page Titles --- */
.page-title {
display: none;
}
.p-url {
position: relative;
display: inline;
font-size: inherit;
line-height: inherit;
text-underline-offset: min(3px, 0.1em);
color: var(--flex-black-white) !important;
}
/* Ensure the main site container respects your framework gutter */
.wp-site-blocks,
.entry-content {
padding-left: 0;
padding-right: 0;
padding-top: 0;
padding-bottom: 0;
padding: 0;
margin: 0;
}
/* 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: 32px auto !important;
padding: 40px !important;
background-color: #ffffff !important;
max-width: var(--cs-width-xl) !important;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
}
/* Ensure editor text is readable on forced white background */
body.admin-bar :where(.editor-styles-wrapper) :where(.wp-block-paragraph, .wp-block-heading, .wp-block-list, li) {
color: #1a1a1a !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;
}
.p-wrap>*:not(:last-child),
.grid-box>*:not(:last-child),
.p-content>*:not(:last-child) {
margin-bottom: 0 !important;
}
.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;
}
/* --- CONVERTED STATIC CSS (Replaces @apply) --- */
.wordpress-content {
color: var(--text-secondary);
}
.wordpress-content h1,
.wordpress-content h2,
.wordpress-content h3,
.wordpress-content h4 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 900;
letter-spacing: -0.025em;
color: var(--primary-text-color);
}
.wordpress-content p {
margin-bottom: 1.5rem;
line-height: 1.625;
}
.wordpress-content img {
border-radius: 0.75rem;
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
margin-top: 2rem;
margin-bottom: 2rem;
width: 100%;
height: auto;
object-fit: cover;
border: 1px solid rgba(228, 228, 231, 0.2);
}
:root :where(.wp-block-quote),
.wp-block-quote,
.wp-block-pullquote,
.wp-block-quote:not(.is-large):not(.is-style-large) {
margin-bottom: 2rem;
background-color: var(--wp--preset--color--flex-gray-3);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
border-top-color: var(--wp--preset--color--cs-brand);
border-top-width: 1px;
border-top-style: solid;
border-right-color: var(--wp--preset--color--flex-text-title);
border-right-width: 1px;
border-right-style: solid;
border-bottom-color: var(--wp--preset--color--flex-text-title);
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-color: var(--wp--preset--color--cs-brand-90);
border-left-width: 5px;
border-left-style: solid;
color: var(--wp--preset--color--flex-text-title);
font-size: var(--wp--preset--font-size--medium);
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.5;
margin-right: 0;
margin-left: 0;
padding-top: var(--wp--preset--spacing--cs-spacing-sm);
padding-right: var(--wp--preset--spacing--cs-spacing-sm);
padding-bottom: var(--wp--preset--spacing--cs-spacing-sm);
padding-left: var(--wp--preset--spacing--cs-spacing-sm);
}
.wordpress-content blockquote {
border-left-width: 4px;
border-color: var(--brand-primary);
padding-left: 1.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
margin-top: 2rem;
margin-bottom: 2rem;
font-style: italic;
font-size: 1.25rem;
color: var(--primary-text-color);
background-color: rgba(244, 244, 245, 0.5);
border-radius: 0 0.5rem 0.5rem 0;
}
.wordpress-content a {
color: var(--brand-primary);
font-weight: 700;
text-decoration: underline;
text-decoration-color: var(--brand-secondary);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
transition: color 0.3s ease;
}
.wordpress-content a:hover {
color: var(--brand-secondary);
}
/* --- LEGACY TAILWIND CUSTOM STYLES --- */
/* Magical Animations */
@keyframes puffIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(2, 2);
filter: blur(2px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
@keyframes vanishIn {
0% {
opacity: 0;
transform-origin: 50% 50%;
transform: scale(1.5, 1.5);
filter: blur(20px);
}
100% {
opacity: 1;
transform-origin: 50% 50%;
transform: scale(1, 1);
filter: blur(0px);
}
}
@keyframes neonPulse {
from {
box-shadow:
0 0 5px var(--color-brand-purple),
0 0 15px var(--color-brand-purple);
}
to {
box-shadow:
0 0 15px var(--color-brand-purple-light),
0 0 30px var(--color-brand-purple-light);
}
}
.animate-magic-puff-in {
animation: puffIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.hover\:animate-magic-puff-in:hover {
animation: puffIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.animate-magic-vanish-in {
animation: vanishIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.hover\:animate-magic-vanish-in:hover {
animation: vanishIn 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.animate-neon-pulse {
animation: neonPulse 2s infinite alternate;
}
.hover\:animate-neon-pulse:hover {
animation: neonPulse 2s infinite alternate;
}
/* --- Arkahna Float Animation --- */
.animate-float {
animation: float 7s ease-in-out infinite;
}
@keyframes float {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-15px) rotate(1deg);
}
100% {
transform: translateY(0px) rotate(0deg);
}
}
/* Global UI Interactions */
.hover-lift {
transition:
transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: var(--drop-shadow-xl);
}
/* ========================================= */
/* --- 24 - Gallery Patterns & Modules --- */
/* ========================================= */
/**
* post-gallery-grid-3
* A high-impact 3-image gallery grid.
* One large featured image (left) and two stacked smaller images (right).
*/
.post-gallery-grid-3 {
display: grid !important;
grid-template-columns: 2fr 1fr !important;
grid-template-rows: 450px !important;
gap: 0.75rem !important;
margin: 2.5rem 0 !important;
align-items: stretch !important;
}
/* Featured Column */
.post-gallery-left-col {
height: 100% !important;
width: 100% !important;
overflow: hidden !important;
border-radius: 8px !important;
position: relative !important;
}
/* Side Stack Column */
.post-gallery-right-col {
display: flex !important;
flex-direction: column !important;
gap: 0.75rem !important;
height: 100% !important;
width: 100% !important;
}
/* Ensure the two items in the right column share height exactly */
.post-gallery-right-col>div {
flex: 1 !important;
height: calc(50% - 0.375rem) !important;
overflow: hidden !important;
border-radius: 8px !important;
position: relative !important;
}
/* Force object-fit on all gallery images */
.post-gallery-grid-3 img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
border: 0 !important;
}
/* Interaction: Zoom Effect (cs-zoom-2) */
.post-gallery-grid-3 .cs-zoom-2:hover img {
transform: scale(1.08) !important;
}
/* Mobile Responsiveness */
@media (max-width: 767px) {
.post-gallery-grid-3 {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
height: auto !important;
gap: 1rem !important;
}
.post-gallery-left-col {
height: 300px !important;
}
.post-gallery-right-col {
height: auto !important;
gap: 1rem !important;
}
.post-gallery-right-col>div {
height: 250px !important;
flex: none !important;
}
}
/* ========================================= */
/* --- 35 - Responsive (Mobilization) --- */
/* ========================================= */
@media (max-width: 1024px) {
/* Stack Flex Containers */
.cs-flex-md-row {
flex-direction: column !important;
}
/* Reduce Spacing */
:root {
--cs-spacing-lg: 2rem;
--cs-spacing-xl: 3rem;
--container-7xl: min(1300px, calc(100vw - (var(--cs-gutter) * 2)));
}
/* Mobilize Hero Grid */
ul.cs-tile-grid {
grid-template-columns: 1fr !important;
grid-template-rows: auto !important;
height: auto !important;
}
ul.cs-tile-grid>li {
grid-column: auto !important;
grid-row: auto !important;
aspect-ratio: 16 / 9 !important;
}
/* Peeking Character fix for Tablet */
.cinefox-peeking,
.arkahna-peeking {
display: none !important;
/* Hide peeking on touch devices to avoid layout shift */
}
/* 1. Force the Back to Top button to stay inside the real viewport */
#back-top {
right: 20px !important;
/* Anchor it to the actual screen edge */
left: auto !important;
position: fixed !important;
bottom: 20px !important;
}
/* 2. Reset the Footer and its inner containers */
footer,
.footer-inner,
.cs-footer-vanguard,
.cs-footer-vanguard-inner {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
footer {
padding-left: 0 !important;
padding-right: 0 !important;
}
.footer-inner,
.cs-footer-vanguard,
.cs-footer-vanguard-inner {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* 3. Ensure the footer grid stacks correctly */
.cs-footer-vanguard {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 2rem !important;
}
/* 4. Fix the body overflow that allows scrolling right */
html,
body {
overflow-x: hidden !important;
width: 100% !important;
position: relative !important;
}
.gb-element-footer-inner {
padding-inline: var(--cs-gutter) !important;
}
/* Header Mobilization */
.cs-topBar {
height: auto !important;
padding-block: 1rem !important;
}
.cs-master-grid__header-bottom {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
gap: 1.5rem !important;
}
.intel-stream__label,
.hubs-nav__label {
display: none !important;
/* Hide 'Intel Stream' and 'Our Realms' labels on mobile */
}
.hubs-links {
flex-wrap: wrap !important;
justify-content: center !important;
}
/* Mobilize Text */
h1 {
font-size: calc(var(--cs-font-size-h1) * 0.75) !important;
}
h2 {
font-size: calc(var(--cs-font-size-h2) * 0.8) !important;
}
/* Stack all GB Grids that aren't already mobile-ready */
.gb-grid-wrapper>.gb-grid-column {
width: 100% !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
}
/**
* CINESIST BRANDING OVERRIDE: Arkahna Persona (Pink #ff69b4)
* Overrides legacy blue/orange with Intelligence Nexus colors.
*/
:root {
--cs-arkahna-pink: #ff69b4;
--cs-nexus-accent: var(--cs-arkahna-pink);
}
/* 1. Rumor Probability Meter (HUD) */
.cs-rumor-meter__bar-fill {
background: linear-gradient(90deg, #ff1493, #ff69b4) !important;
box-shadow: 0 0 10px rgba(255, 105, 180, 0.5) !important;
}
.cs-rumor-meter__percentage {
color: var(--cs-arkahna-pink) !important;
}
/* 2. Summoning Smoke / HUD Accents */
.cs-summoning-smoke {
color: var(--cs-arkahna-pink) !important;
}
/* 3. Global Article Headings (Pink Accents) */
.cs-review-body__article h1,
.cs-review-body__article h2,
.post-body-article h1,
.post-body-article h2 {
border-left: 4px solid var(--cs-arkahna-pink) !important;
padding-left: 1rem !important;
}
/* --- Global Post Header Fix --- */
.post-header {
z-index: 40;
}
/*
--------------
Movie Listings
--------------
*/
/* Movie Engine Listing Wrapper */
.movie-engine-archive-wrapper {
background-color: var(--cs-bg-2);
color: var(--primary-text-color);
min-height: 100vh;
padding: 6rem 0 4rem;
font-family: var(--font-sans);
}
/* Movie Engine Listing Container */
.movie-engine-container-fluid {
width: 100%;
max-width: 1300px;
/* <-- Changed to our width */
margin-right: auto;
margin-left: auto;
padding-right: calc(var(--movie-engine-gutter-x)*.5);
padding-left: calc(var(--movie-engine-gutter-x)*.5);
}
/* Movie Engine Library Container */
.movie-engine-library-container {
display: flex;
gap: 30px;
margin-top: 0 !important;
}
/* Movie Engine Filter Bar */
.cs-body .movie-engine-filter-bar {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto 40px;
padding: 8px;
background: var(--flex-gray-55);
backdrop-filter: blur(25px);
border: 1px solid var(--cinesist-border-color);
border-radius: 12px;
box-shadow: 0 20px 50px rgba(var(--movie-engine-black-rgb), 0.5);
transition: all .4s cubic-bezier(0.165, 0.84, 0.44, 1);
position: relative;
z-index: 10;
}
/* Movie Engine Search Bar */
.movie-engine-filter-bar .movie-engine-filter-group.me-search-group {
flex: 1;
display: flex;
align-items: center;
background: var(--cs-brand-500);
border: 1px solid var(--cs-brand-40);
border-radius: 8px;
padding: 0;
height: 52px;
transition: all .3s ease;
}
.cs-body .movie-engine-filter-bar .movie-engine-filter-group.me-search-group .movie-engine-search-field::placeholder {
color: rgba(var(--movie-engine-white-color-rgb), 0.35);
}
.cs-body .movie-engine-filter-bar .movie-engine-filter-group.me-search-group .movie-engine-search-field {
color: var(--movie-engine-white-color);
font-size: 15px;
font-family: var(--movie-engine-body-font);
height: 100%;
box-shadow: none;
flex: 1 1 0%;
background: var(--white-to-black-200) !important;
border-width: medium;
border-style: none;
border-color: var(--cinesist-border-color);
border-image: initial;
padding: 0px;
outline: none;
}
.cs-body .movie-engine-filter-bar .movie-engine-filter-select {
height: 52px;
background-color: var(--flex-gray-40);
border: 2px solid var(--cs-brand);
border-radius: 8px;
color: rgba(var(--movie-engine-white-color-rgb), 0.7);
padding: 0 35px 0 18px;
font-size: 14px;
font-weight: 500;
min-width: 150px;
width: 100%;
cursor: pointer;
transition: all .2s ease;
appearance: none;
/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' opacity='0.5' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); */
background-repeat: no-repeat;
background-position: right 14px center;
}
/* Movie Engine Card Poster */
.movie-engine-card-content {
padding-inline: 0.5rem;
}
/* Movie Engine Play button */
.movie-engine-movie-card .movie-engine-card-poster .movie-engine-card-overlay span {
font-size: 48px;
color: var(--awhite);
background-color: var(--cs-brand);
padding: 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
border: 2px solid var(--cs-brand-80);
border-radius: 50px;
width: 35%;
}
/* Movie Engine Quality Badge */
.movie-engine-movie-card .movie-engine-card-poster .movie-engine-card-quality {
position: absolute;
top: 10px;
left: 10px;
background: var(--movie-engine-primary-color);
color: var(--awhite);
font-size: 12px;
font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
z-index: 5;
text-transform: uppercase;
}
.movie-engine-movie-card .movie-engine-card-poster {
display: block;
position: relative;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 2/3;
background: var(--movie-engine-black-color);
margin-bottom: 0;
}
.cs-body .movie-engine-movie-card .movie-engine-card-poster img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s;
position: relative;
}
.cs-body .movie-engine-movie-card {
transition: transform .2s;
position: relative;
}
.cs-body .movie-engine-card-content {
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 50%, transparent 100%);
border-radius: 0px 0px 10px 10px;
padding: 1rem 0.5rem;
padding-top: 2rem;
color: var(--awhite) !important;
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
z-index: 3;
}
/* Movie Card Title */
/* Movie Card Title Anchor */
.cs-body .movie-engine-movie-card .movie-engine-card-content .movie-engine-card-title a {
color: var(--awhite);
text-decoration: none;
transition: color .2s;
width: 100%;
}
/* Movie Card Content Meta */
.cs-body .movie-engine-movie-card .movie-engine-card-content .movie-engine-card-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--movie-engine-muted-color);
}
/* Movie Rating Element */
.cs-body .movie-engine-movie-card .movie-engine-card-poster .movie-engine-card-rating {
position: absolute;
bottom: 15px;
left: 0;
background: rgba(var(--movie-engine-black-rgb), 0.7);
color: var(--movie-engine-yellow-color);
font-size: 11px;
font-weight: 600;
padding: 2px 6px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 4px;
z-index: 5;
backdrop-filter: blur(4px);
}
/* Movie Engine Release Year */
.cs-body .movie-engine-movie-card .movie-engine-card-content .movie-engine-card-meta span:first-child {
margin-right: 5px;
visibility: hidden;
}
.cs-body .movie-engine-movie-card .movie-engine-card-content .movie-engine-card-title {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
font-size: 1.25rem;
overflow: hidden;
text-wrap: wrap !important;
hyphens: none;
width: 100%;
}
.cs-body .movie-engine-card-title {
display: -webkit-box !important;
-webkit-box-orient: vertical !important;
-webkit-line-clamp: 2 !important;
overflow: hidden !important;
text-wrap: wrap !important;
line-height: 1.3;
height: 2.6em;
}
/*
--------------
Movie Profile
--------------
*/
/* Profile Backgrounds */
.me-main-content {
position: relative;
z-index: 8;
background-color: var(--flex-bg-color-1) !important;
}
.movie-engine-single-movie-wrapper {
background-color: var(--flex-gray-2);
color: var(--movie-engine-white-color);
font-family: var(--movie-engine-body-font);
min-height: 100vh;
padding-bottom: var(--movie-engine-spacer-3);
}
/* Genre List */
/* Genre Separator */
.cs-body.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-genre-list {
margin-bottom: 15px;
font-size: 15px;
font-weight: 700;
color: var(--awhite);
letter-spacing: .5px;
}
/* Genre Achors */
.cs-body .movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-genre-list a {
color: var(--awhite);
text-decoration: none;
}
/* Title */
.cs-body.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-movie-title {
font-family: var(--movie-engine-heading-font);
font-size: 64px;
font-weight: 800;
margin: 0 0 20px;
line-height: 1.1;
color: var(--awhite) !important;
}
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-movie-title {
font-family: var(--movie-engine-heading-font);
font-size: 64px;
font-weight: 800;
margin: 0 0 20px;
line-height: 1.1;
color: #fff;
}
/* Movie Engine IMDB Badge */
.cs-body span.me-imdb-badge svg path {
fill: var(--awhite) !important;
}
/* Meta Row */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-meta-row .movie-engine-meta-item {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 40px;
padding: 0 16px;
font-size: 15px;
font-weight: 700;
color: #fff;
background: rgba(var(--movie-engine-white-color-rgb), 0.08);
border: 1px solid rgba(var(--movie-engine-white-color-rgb), 0.15);
border-radius: 8px;
transition: all .2s ease;
}
/* Synopsis */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-short-synopsis .me-synopsis-text {
font-size: 20px;
line-height: 1.5;
color: #FFF;
font-weight: 500;
margin-bottom: 12px;
}
/* Read More Synopsis */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-short-synopsis .movie-engine-read-more-btn {
background: var(--cs-brand-700);
border: none;
color: var(--awhite);
padding: 4px 12px;
font-size: 15px;
border-radius: 4px;
cursor: pointer;
transition: background .2s;
}
/* Read More Modal */
/* Modal Body Background */
.movie-engine-modal.me-movie-details-modal .movie-engine-modal-content {
width: 95%;
max-width: 1100px;
background: linear-gradient(160deg, var(--movie-engine-black-color) 0%, var(--flex-gray-3) 100%);
border: none;
box-shadow: 0 50px 100px -20px rgba(var(--movie-engine-black-rgb), 0.9), 0 30px 60px -30px rgba(var(--movie-engine-black-rgb), 0.8), inset 0 1px 0 rgba(var(--movie-engine-white-color-rgb), 0.05);
}
/* Modal Genres */
.movie-engine-modal.me-movie-details-modal .me-modal-genres a {
padding: 6px 14px;
background: var(--cs-brand-600);
border: 1px solid var(--cs-brand-700);
border-radius: 20px;
color: var(--awhite);
font-size: 12px;
font-weight: 500;
text-decoration: none;
transition: all .2s ease;
}
/* Modal Content */
/* Hide Broken Genres */
.movie-engine-modal.me-movie-details-modal .me-modal-details-list p:nth-child(2) {
display: none;
}
/* Watch Now Button */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-hero-actions .movie-engine-btn.movie-engine-btn-play {
background: var(--movie-engine-primary-color);
color: var(--awhite);
}
/* Watchlist Button */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-hero-actions .movie-engine-btn.movie-engine-btn-secondary {
background: transparent;
color: var(--awhite);
}
/* Watchlist Add Hover */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-hero-actions .movie-engine-btn.movie-engine-btn-secondary:hover {
background: transparent;
color: var(--color-green-400);
}
/* Watchlist Remove Hover */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-info-wrapper .movie-engine-hero-actions .movie-engine-btn.movie-engine-btn-secondary.movie-engine-watchlist-btn.active:hover {
background: transparent;
color: var(--color-red-600);
}
/* Like Button */
/* Standard Button */
.movie-engine-layout-fullwidth .movie-engine-movie-hero .movie-engine-hero-actions .me-icon-actions .movie-engine-action-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(var(--movie-engine-white-color-rgb), 0.1);
border: 1px solid rgba(var(--movie-engine-white-color-rgb), 0.05);
color: var(--awhite);
padding: 0;
margin: 0;
transition: all .3s ease;
cursor: pointer;
position: relative;
}
/* Standard Like Button Hover */
.movie-engine-layout-fullwidth .movie-engine-movie-hero .movie-engine-hero-actions .me-icon-actions .movie-engine-action-btn.me-like-btn:hover {
background: transparent;
color: var(--color-red-600);
}
/* Active Like */
.movie-engine-layout-fullwidth .movie-engine-movie-hero .movie-engine-hero-actions .me-icon-actions .movie-engine-action-btn:hover,
.movie-engine-layout-fullwidth .movie-engine-movie-hero .movie-engine-hero-actions .me-icon-actions .movie-engine-action-btn.active {
background: transparent;
color: var(--color-red-600);
}
/* Remove Like Hover */
.movie-engine-layout-fullwidth .movie-engine-movie-hero .movie-engine-hero-actions .me-icon-actions .movie-engine-action-btn .me-like-btn.active {
background: transparent;
color: var(--color-red-600);
}
/* Remove Like Hover */
.movie-engine-layout-fullwidth .movie-engine-movie-hero .movie-engine-hero-actions .me-icon-actions .movie-engine-action-btn:hover,
.movie-engine-layout-fullwidth .movie-engine-movie-hero .movie-engine-hero-actions .me-icon-actions .movie-engine-action-btn.active:hover {
background: transparent;
color: var(--awhite);
}
/* Share Pop-up Element */
/* Modal Background */
/* Modal Close */
.movie-engine-close-modal {
padding: 0;
border: none;
outline: none;
color: var(--awhite);
font-size: 2rem;
font-weight: 600;
position: absolute;
right: 16px;
top: 16px;
z-index: 100;
cursor: pointer;
line-height: 1;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--cs-brand);
backdrop-filter: blur(10px);
transition: all .2s ease;
}
/* Modal Close Hover */
.movie-engine-close-modal:hover {
color: var(--awhite);
background: var(--color-red-800);
transform: rotate(90deg);
}
/* Share Link Field */
.movie-engine-modal.me-movie-share-modal .me-share-input-wrapper {
display: flex;
gap: 8px;
background: var(--flex-gray-300);
border: 1px solid var(--cs-brand-80);
border-radius: 12px;
padding: 6px;
}
/* Copy Link Button */
.movie-engine-modal.me-movie-share-modal .me-share-input-wrapper button {
padding: 12px 24px;
background: var(--movie-engine-primary-color);
border: none;
border-radius: 8px;
color: var(--awhite);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all .2s ease;
white-space: nowrap;
}
/* Social Channel Buttons */
.movie-engine-modal.me-movie-share-modal .me-social-share-grid .me-social-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: var(--flex-gray-40);
border: 1px solid var(--cs-brand-50);
transition: all .2s ease;
}
/* Social Channel Buttons Icons */
.movie-engine-modal.me-movie-share-modal .me-social-share-grid .me-social-icon svg {
width: 20px;
height: 20px;
fill: white;
stroke: var(--cs-brand-60);
stroke-width: 1px;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Custom Glass Video Controls */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-hero-video-controls {
position: absolute;
bottom: 30px;
right: 30px;
z-index: 200;
display: flex;
align-items: center;
gap: 12px;
/* Custom Settings */
background-color: var(--flex-gray-55);
backdrop-filter: blur(15px);
border-radius: var(--border-radius-2);
}
/* Control Buttons */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-video-control-btn {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: var(--cs-brand-50);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--cs-brand-70);
border-radius: 50%;
cursor: pointer;
transition: all .25s ease;
color: var(--awhite);
padding: 0;
}
/* Control Buttons Hover */
.movie-engine-single-movie-wrapper .movie-engine-movie-hero .movie-engine-video-control-btn:hover {
background: var(--cs-brand-800);
border-color: var(--cs-brand);
transform: scale(1.08);
color: var(--flex-gray-400);
}
/* Comments/Review Section */
#respond {
background: var(--flex-gray-1);
border: 1px solid var(--cinesist-border-color);
border-radius: 20px;
padding: 30px;
/* margin: 20px 0; */
box-shadow: var(--shadow-1);
}
/* ==========================================================================
CINESIST MASTER POST TILE ARCHITECTURE (style.css)
BEM Compliant, Razor-Flat DOM, Zero Specificity Overrides
========================================================================== */
/* The Core Card Hull Blueprint Template Element */
.cs-matrix-card {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 100%;
background-color: #0d0d11;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
overflow: hidden;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Graphic Layer Performance Configuration */
.cs-matrix-card .cs-card-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}
.cs-matrix-card .cs-card-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
/* Custom theatrical poster crop lock */
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Master Scrim Overlays (Zero JS Background Blending) */
.cs-matrix-card .cs-card-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
z-index: 2;
pointer-events: none;
}
/* Typographic & Metadata Injections Content Box */
.cs-matrix-card .cs-card-content {
position: relative;
z-index: 3;
padding: 24px;
width: 100%;
}
/* Dynamic Content Controls (Line Clamp Prevents Box Breaking) */
.cs-matrix-card .cs-card-title {
font-family: var(--cs-font-heading, 'Space Grotesk', sans-serif);
color: #ffffff;
margin: 8px 0 0 0;
padding: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.cs-matrix-card .cs-card-title a {
color: inherit;
text-decoration: none;
}
/* The Stretch Link Trigger Utility */
.cs-matrix-card .cs-card-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
}
/* Interactivity Hover Responses */
.cs-matrix-card:hover {
transform: translateY(-4px);
border-color: rgba(255, 255, 255, 0.12);
}
.cs-matrix-card:hover .cs-card-media img {
transform: scale(1.04);
}