/* ============================================================ GeekPress content cards — [geekpress_card] output. Two families: movie/TV (.gkc--m1..m5, warm editorial) and game (.gkc--g1..g5, dark store). Theme via [data-gkc-theme] = auto | light | dark. .gkc--transparent drops the surface. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); .gkc{ margin:1.6em auto; max-width:760px; line-height:1.6; } .gkc, .gkc *, .gkc *::before, .gkc *::after{ box-sizing:border-box; } .gkc-empty{ font:13px/1.5 system-ui,sans-serif; color:#b3261e; padding:14px 16px; border:1px dashed #f0506e; border-radius:10px; background:rgba(240,80,110,.07); } /* links: inherit card colours, no theme underline; cast names underline on hover */ .gkc a{ color:inherit; } .gkc .gkc-cta{ text-decoration:none; } .gkc a.gkc-cast-n{ text-decoration:none; cursor:pointer; } .gkc a.gkc-cast-n:hover{ text-decoration:underline; } .gkc a.gkc-tlink{ color:inherit; text-decoration:none; cursor:pointer; } .gkc a.gkc-tlink:hover{ text-decoration:underline; text-decoration-thickness:2px; } /* ---------- shared poster / cover image ---------- */ .gkc-poster, .gkc-cov-img{ background-size:cover; background-position:center; } .gkc-poster--ph, .gkc-cov-img--ph{ display:flex; align-items:center; justify-content:center; } .gkc-poster--ph span{ font-family:'Fraunces',serif; font-size:42px; font-weight:600; opacity:.5; } /* ==================================================================== MOVIE / TV (warm editorial) ==================================================================== */ /* Light context prefers the palette's `-l` set (theme palettes ship both); flat --gkc-pal-* = dark/primary set, and the legacy both-modes fallback. */ .gkc[class*="gkc--m"]{ --ink:var(--gkc-pal-text-l,var(--gkc-pal-text,#1a1714)); --muted:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#6b6358)); --faint:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#9a9087)); --line:var(--gkc-pal-border-l,var(--gkc-pal-border,#e7e1d8)); --card:var(--gkc-pal-bg-l,var(--gkc-pal-bg,#fff)); --accent:var(--gkc-pal-accent-l,var(--gkc-pal-accent,oklch(0.62 0.14 38))); --gold:var(--gkc-pal-rating-l,var(--gkc-pal-rating,oklch(0.74 0.13 78))); --pal-title:var(--gkc-pal-title-l,var(--gkc-pal-title,var(--ink))); --pal-btn:var(--gkc-pal-btn-l,var(--gkc-pal-btn,var(--accent))); --pal-btn-fg:var(--gkc-pal-btn-fg-l,var(--gkc-pal-btn-fg,#fff)); font-family:'Inter',system-ui,sans-serif; color:var(--ink); } .gkc[class*="gkc--m"][data-gkc-theme="dark"]{ --ink:var(--gkc-pal-text,#f0ebe3); --muted:var(--gkc-pal-muted,#a79e91); --faint:var(--gkc-pal-muted,#7a7268); --line:var(--gkc-pal-border,#332e28); --card:var(--gkc-pal-bg,#1f1b16); --accent:var(--gkc-pal-accent,oklch(0.62 0.14 38)); --gold:var(--gkc-pal-rating,oklch(0.74 0.13 78)); --pal-title:var(--gkc-pal-title,var(--ink)); --pal-btn:var(--gkc-pal-btn,var(--accent)); --pal-btn-fg:var(--gkc-pal-btn-fg,#fff); } @media (prefers-color-scheme:dark){ .gkc[class*="gkc--m"][data-gkc-theme="auto"]{ --ink:var(--gkc-pal-text,#f0ebe3); --muted:var(--gkc-pal-muted,#a79e91); --faint:var(--gkc-pal-muted,#7a7268); --line:var(--gkc-pal-border,#332e28); --card:var(--gkc-pal-bg,#1f1b16); --accent:var(--gkc-pal-accent,oklch(0.62 0.14 38)); --gold:var(--gkc-pal-rating,oklch(0.74 0.13 78)); --pal-title:var(--gkc-pal-title,var(--ink)); --pal-btn:var(--gkc-pal-btn,var(--accent)); --pal-btn-fg:var(--gkc-pal-btn-fg,#fff); } } /* SITE theme toggle beats the OS preference for auto cards — GeekPress themes put [data-theme=light|dark] on /; the extra ancestor bumps specificity above the media-query block either way. */ [data-theme="light"] .gkc[class*="gkc--m"][data-gkc-theme="auto"]{ --ink:var(--gkc-pal-text-l,var(--gkc-pal-text,#1a1714)); --muted:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#6b6358)); --faint:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#9a9087)); --line:var(--gkc-pal-border-l,var(--gkc-pal-border,#e7e1d8)); --card:var(--gkc-pal-bg-l,var(--gkc-pal-bg,#fff)); --accent:var(--gkc-pal-accent-l,var(--gkc-pal-accent,oklch(0.62 0.14 38))); --gold:var(--gkc-pal-rating-l,var(--gkc-pal-rating,oklch(0.74 0.13 78))); --pal-title:var(--gkc-pal-title-l,var(--gkc-pal-title,var(--ink))); --pal-btn:var(--gkc-pal-btn-l,var(--gkc-pal-btn,var(--accent))); --pal-btn-fg:var(--gkc-pal-btn-fg-l,var(--gkc-pal-btn-fg,#fff)); } [data-theme="dark"] .gkc[class*="gkc--m"][data-gkc-theme="auto"]{ --ink:var(--gkc-pal-text,#f0ebe3); --muted:var(--gkc-pal-muted,#a79e91); --faint:var(--gkc-pal-muted,#7a7268); --line:var(--gkc-pal-border,#332e28); --card:var(--gkc-pal-bg,#1f1b16); --accent:var(--gkc-pal-accent,oklch(0.62 0.14 38)); --gold:var(--gkc-pal-rating,oklch(0.74 0.13 78)); --pal-title:var(--gkc-pal-title,var(--ink)); --pal-btn:var(--gkc-pal-btn,var(--accent)); --pal-btn-fg:var(--gkc-pal-btn-fg,#fff); } .gkc[class*="gkc--m"] .gkc-poster{ background-color:var(--line); background-image:var(--bg,none); } .gkc[class*="gkc--m"] .gkc-poster--ph{ background:repeating-linear-gradient(135deg,var(--line) 0 10px,transparent 10px 20px); color:var(--faint); } .gkc[class*="gkc--m"] .gkc-title{ font-family:'Fraunces',serif; font-weight:600; line-height:1.1; margin:0; color:var(--pal-title); } .gkc[class*="gkc--m"] .gkc-year{ color:var(--faint); font-weight:400; } .gkc[class*="gkc--m"] .gkc-sum{ font-size:14px; color:var(--muted); margin:0 0 14px; } .gkc[class*="gkc--m"] .gkc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; } .gkc[class*="gkc--m"] .gkc-genre{ font-size:12px; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); padding:4px 10px; border-radius:7px; } .gkc[class*="gkc--m"] .gkc-dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); display:inline-block; } .gkc[class*="gkc--m"] .gkc-runtime{ font-size:13px; color:var(--muted); } .gkc[class*="gkc--m"] .gkc-pill{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; background:color-mix(in srgb, var(--gold) 14%, transparent); color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 36%, transparent); padding:5px 11px; border-radius:999px; font-weight:700; font-size:15px; } .gkc[class*="gkc--m"] .gkc-pill svg{ width:14px; height:14px; color:var(--gold); } .gkc[class*="gkc--m"] .gkc-out{ color:var(--faint); font-weight:500; font-size:12px; } .gkc[class*="gkc--m"] .gkc-stars{ display:inline-flex; gap:1px; } .gkc[class*="gkc--m"] .gkc-stars svg{ width:14px; height:14px; color:var(--gold); } .gkc[class*="gkc--m"] .gkc-stars .off svg{ opacity:.3; } /* cast */ .gkc[class*="gkc--m"] .gkc-cast{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .gkc[class*="gkc--m"] .gkc-cast-l{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:9px; } .gkc[class*="gkc--m"] .gkc-cast-list{ display:flex; flex-wrap:wrap; gap:16px; } .gkc-cast-m{ display:flex; align-items:center; gap:9px; } .gkc-av{ width:34px; height:34px; border-radius:50%; flex-shrink:0; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; } .gkc[class*="gkc--m"] .gkc-av{ background-color:var(--line); color:var(--faint); border:1px solid var(--line); } .gkc-cast-t{ display:flex; flex-direction:column; line-height:1.2; } .gkc[class*="gkc--m"] .gkc-cast-n{ font-size:13px; font-weight:600; } .gkc[class*="gkc--m"] .gkc-cast-r{ font-size:11.5px; color:var(--faint); } .gkc[class*="gkc--m"] .gkc-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--pal-btn); color:var(--pal-btn-fg); text-decoration:none; font-weight:600; font-size:13.5px; padding:10px 18px; border-radius:10px; } /* m1 classic — poster left */ .gkc--m1, .gkc--m3, .gkc--m5{ display:grid; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 18px 40px -26px rgba(40,30,15,.3); } .gkc--m1{ grid-template-columns:160px 1fr; } .gkc--m1 .gkc-poster--side, .gkc--m3 .gkc-poster--side{ min-height:240px; } .gkc--m1 .gkc-body, .gkc--m3 .gkc-body, .gkc--m5 .gkc-body{ padding:22px 24px; display:flex; flex-direction:column; } .gkc--m1 .gkc-head, .gkc--m5 .gkc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; } .gkc--m1 .gkc-title{ font-size:24px; } .gkc--m1 .gkc-cast{ margin-top:auto; } /* m2 poster top — tall */ .gkc--m2{ width:300px; max-width:100%; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; position:relative; box-shadow:0 18px 40px -26px rgba(40,30,15,.3); } .gkc--m2 .gkc-poster--top{ height:200px; } .gkc--m2 .gkc-body{ padding:18px 20px 20px; } .gkc--m2 .gkc-title{ font-size:21px; margin-bottom:4px; } .gkc--m2 .gkc-subline{ font-size:12.5px; color:var(--faint); margin-bottom:12px; } .gkc--m2 .gkc-float{ position:absolute; top:12px; right:12px; background:rgba(26,23,20,.78); color:#fff; backdrop-filter:blur(4px); display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px; font-weight:700; font-size:14px; } .gkc--m2 .gkc-float svg{ width:13px; height:13px; color:var(--gold); } .gkc-cast-foot{ display:flex; align-items:center; gap:11px; margin-top:6px; } .gkc-stack{ display:flex; } .gkc-stack .gkc-av{ width:32px; height:32px; margin-left:-8px; box-shadow:0 0 0 2px var(--card); } .gkc-stack .gkc-av:first-child{ margin-left:0; } .gkc[class*="gkc--m"] .gkc-cast-names{ font-size:12px; color:var(--muted); line-height:1.3; } /* m3 cinematic */ .gkc--m3{ grid-template-columns:130px 1fr; } .gkc--m3 .gkc-title{ font-size:23px; margin-bottom:8px; } .gkc--m3 .gkc-stars-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .gkc--m3 .gkc-num{ font-weight:700; font-size:14px; } .gkc--m3 .gkc-mtxt{ font-size:12.5px; color:var(--muted); } .gkc--m3 .gkc-cast-line{ font-size:12.5px; color:var(--muted); margin-top:auto; } /* m4 minimal compact */ .gkc--m4{ display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 10px 30px -24px rgba(40,30,15,.3); } .gkc--m4 .gkc-poster--mini{ width:64px; height:90px; border-radius:8px; flex-shrink:0; } .gkc--m4 .gkc-body{ flex:1; min-width:0; } .gkc--m4 .gkc-head{ display:flex; align-items:baseline; gap:8px; } .gkc--m4 .gkc-title{ font-size:18px; } .gkc--m4 .gkc-meta{ margin:5px 0 7px; font-size:12.5px; color:var(--muted); } .gkc--m4 .gkc-g{ color:var(--accent); font-weight:600; } .gkc--m4 .gkc-sum{ font-size:12.5px; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gkc--m4 .gkc-score{ flex-shrink:0; text-align:center; } .gkc--m4 .gkc-score-n{ font-family:'Fraunces',serif; font-weight:600; font-size:26px; line-height:1; color:oklch(0.55 0.13 70); } .gkc--m4 .gkc-score-l{ font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-top:3px; } /* m5 detailed */ .gkc--m5{ grid-template-columns:190px 1fr; border-radius:18px; } .gkc--m5 .gkc-poster--tall{ min-height:380px; } .gkc--m5 .gkc-title{ font-size:26px; } .gkc--m5 .gkc-credits{ font-size:13px; color:var(--muted); margin:7px 0 0; } .gkc--m5 .gkc-ratings{ display:flex; margin:18px 0 16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; } .gkc--m5 .gkc-r{ flex:1; text-align:center; padding:12px 8px; } .gkc--m5 .gkc-r + .gkc-r{ border-left:1px solid var(--line); } .gkc--m5 .gkc-rn{ font-family:'Fraunces',serif; font-weight:600; font-size:22px; color:var(--ink); } .gkc--m5 .gkc-rl{ display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-top:6px; } .gkc--m5 .gkc-foot{ margin-top:auto; padding-top:18px; } /* ==================================================================== GAME (dark store) ==================================================================== */ /* Game family defaults DARK; the light blocks below prefer the palette's `-l` set so theme palettes adapt instead of forcing dark colours. */ .gkc[class*="gkc--g"]{ --bg:#0c0e14; --card:var(--gkc-pal-bg,#13161f); --card2:#171b27; --line:var(--gkc-pal-border,#262b3a); --text:var(--gkc-pal-text,#eef1f8); --muted:var(--gkc-pal-muted,#9aa3b8); --faint:var(--gkc-pal-muted,#5d6479); --green:var(--gkc-pal-accent,oklch(0.74 0.17 155)); --violet:oklch(0.68 0.19 295); --cyan:oklch(0.78 0.13 210); --amber:var(--gkc-pal-rating,oklch(0.80 0.15 70)); --pal-title:var(--gkc-pal-title,var(--text)); --pal-btn:var(--gkc-pal-btn,linear-gradient(135deg,var(--green),oklch(0.78 0.16 160))); --pal-btn-fg:var(--gkc-pal-btn-fg,#08130c); font-family:'Sora',system-ui,sans-serif; color:var(--text); } .gkc[class*="gkc--g"][data-gkc-theme="light"]{ --bg:#eceef4; --card:var(--gkc-pal-bg-l,var(--gkc-pal-bg,#fff)); --card2:#f3f5fa; --line:var(--gkc-pal-border-l,var(--gkc-pal-border,#e3e6ef)); --text:var(--gkc-pal-text-l,var(--gkc-pal-text,#15171f)); --muted:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#5a6175)); --faint:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#9aa0b2)); --green:var(--gkc-pal-accent-l,var(--gkc-pal-accent,oklch(0.60 0.15 155))); --amber:var(--gkc-pal-rating-l,var(--gkc-pal-rating,oklch(0.66 0.14 70))); --pal-title:var(--gkc-pal-title-l,var(--gkc-pal-title,var(--text))); --pal-btn:var(--gkc-pal-btn-l,var(--gkc-pal-btn,linear-gradient(135deg,var(--green),oklch(0.64 0.15 160)))); --pal-btn-fg:var(--gkc-pal-btn-fg-l,var(--gkc-pal-btn-fg,#f4fff8)); } @media (prefers-color-scheme:light){ .gkc[class*="gkc--g"][data-gkc-theme="auto"]{ --bg:#eceef4; --card:var(--gkc-pal-bg-l,var(--gkc-pal-bg,#fff)); --card2:#f3f5fa; --line:var(--gkc-pal-border-l,var(--gkc-pal-border,#e3e6ef)); --text:var(--gkc-pal-text-l,var(--gkc-pal-text,#15171f)); --muted:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#5a6175)); --faint:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#9aa0b2)); --green:var(--gkc-pal-accent-l,var(--gkc-pal-accent,oklch(0.60 0.15 155))); --amber:var(--gkc-pal-rating-l,var(--gkc-pal-rating,oklch(0.66 0.14 70))); --pal-title:var(--gkc-pal-title-l,var(--gkc-pal-title,var(--text))); --pal-btn:var(--gkc-pal-btn-l,var(--gkc-pal-btn,linear-gradient(135deg,var(--green),oklch(0.64 0.15 160)))); --pal-btn-fg:var(--gkc-pal-btn-fg-l,var(--gkc-pal-btn-fg,#f4fff8)); } } /* site theme toggle ([data-theme] on /) wins over the OS for auto */ [data-theme="light"] .gkc[class*="gkc--g"][data-gkc-theme="auto"]{ --bg:#eceef4; --card:var(--gkc-pal-bg-l,var(--gkc-pal-bg,#fff)); --card2:#f3f5fa; --line:var(--gkc-pal-border-l,var(--gkc-pal-border,#e3e6ef)); --text:var(--gkc-pal-text-l,var(--gkc-pal-text,#15171f)); --muted:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#5a6175)); --faint:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#9aa0b2)); --green:var(--gkc-pal-accent-l,var(--gkc-pal-accent,oklch(0.60 0.15 155))); --amber:var(--gkc-pal-rating-l,var(--gkc-pal-rating,oklch(0.66 0.14 70))); --pal-title:var(--gkc-pal-title-l,var(--gkc-pal-title,var(--text))); --pal-btn:var(--gkc-pal-btn-l,var(--gkc-pal-btn,linear-gradient(135deg,var(--green),oklch(0.64 0.15 160)))); --pal-btn-fg:var(--gkc-pal-btn-fg-l,var(--gkc-pal-btn-fg,#f4fff8)); } [data-theme="dark"] .gkc[class*="gkc--g"][data-gkc-theme="auto"]{ --bg:#0c0e14; --card:var(--gkc-pal-bg,#13161f); --card2:#171b27; --line:var(--gkc-pal-border,#262b3a); --text:var(--gkc-pal-text,#eef1f8); --muted:var(--gkc-pal-muted,#9aa3b8); --faint:var(--gkc-pal-muted,#5d6479); --green:var(--gkc-pal-accent,oklch(0.74 0.17 155)); --amber:var(--gkc-pal-rating,oklch(0.80 0.15 70)); --pal-title:var(--gkc-pal-title,var(--text)); --pal-btn:var(--gkc-pal-btn,linear-gradient(135deg,var(--green),oklch(0.78 0.16 160))); --pal-btn-fg:var(--gkc-pal-btn-fg,#08130c); } .gkc[class*="gkc--g"] .gkc-cov-img{ background-color:#0e1018; background-image:linear-gradient(160deg, oklch(0.30 0.10 295), #0e1018), repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 14px,transparent 14px 28px); } .gkc[class*="gkc--g"] .gkc-cov-img[style]{ background-blend-mode:normal; } .gkc[class*="gkc--g"] .gkc-title{ font-weight:800; letter-spacing:-.02em; margin:0; color:var(--pal-title); } .gkc[class*="gkc--g"] .gkc-story{ font-size:13px; color:var(--muted); line-height:1.6; margin:0 0 14px; } .gkc[class*="gkc--g"] .gkc-pub{ font-size:12.5px; color:var(--faint); margin-bottom:12px; } .gkc[class*="gkc--g"] .gkc-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; } .gkc[class*="gkc--g"] .gkc-genre{ font-family:'JetBrains Mono',monospace; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:6px; color:var(--green); background:color-mix(in srgb, var(--green) 14%, transparent); } .gkc[class*="gkc--g"] .gkc-ptag{ font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; padding:4px 7px; border-radius:6px; background:rgba(8,9,14,.6); color:#cfd5e6; border:1px solid rgba(255,255,255,.12); } .gkc[class*="gkc--g"] .gkc-dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); display:inline-block; } .gkc[class*="gkc--g"] .gkc-float{ display:inline-flex; align-items:center; gap:5px; background:rgba(8,9,14,.7); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(6px); padding:5px 10px; border-radius:99px; font-weight:800; font-size:13px; } .gkc[class*="gkc--g"] .gkc-float svg{ width:13px; height:13px; color:var(--amber); } .gkc[class*="gkc--g"] .gkc-stars{ display:inline-flex; gap:2px; } .gkc[class*="gkc--g"] .gkc-stars svg{ width:15px; height:15px; color:var(--amber); } .gkc[class*="gkc--g"] .gkc-stars .off svg{ opacity:.35; } .gkc[class*="gkc--g"] .gkc-stars-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .gkc[class*="gkc--g"] .gkc-num{ font-weight:800; font-size:15px; } .gkc[class*="gkc--g"] .gkc-cnt{ font-size:12px; color:var(--faint); } .gkc[class*="gkc--g"] .gkc-cta{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700; font-size:14px; padding:11px 20px; border-radius:11px; background:var(--pal-btn); color:var(--pal-btn-fg); } .gkc[class*="gkc--g"] .gkc-badge{ align-self:flex-start; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); border:1px solid oklch(0.78 0.13 210 / .45); background:oklch(0.78 0.13 210 / .12); padding:4px 9px; border-radius:6px; margin-bottom:12px; } .gkc[class*="gkc--g"] .gkc-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--green); margin-bottom:8px; font-weight:700; } .gkc[class*="gkc--g"] .gkc-sec{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint); margin:0 0 9px; display:flex; align-items:center; gap:8px; } .gkc[class*="gkc--g"] .gkc-sec::after{ content:""; flex:1; height:1px; background:var(--line); } /* g1 hero */ .gkc--g1, .gkc--g2, .gkc--g5{ background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:0 40px 90px -44px rgba(0,0,0,.8); } .gkc--g1 .gkc-hero{ position:relative; height:230px; } .gkc--g1 .gkc-cov-img{ position:absolute; inset:0; } .gkc--g1 .gkc-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,var(--card) 4%, rgba(19,22,31,.2) 60%, transparent); } .gkc--g1 .gkc-tags{ position:absolute; top:16px; left:16px; display:flex; gap:6px; z-index:2; } .gkc--g1 .gkc-float{ position:absolute; top:16px; right:16px; z-index:2; } .gkc--g1 .gkc-htitle{ position:absolute; left:22px; bottom:16px; z-index:2; } .gkc--g1 .gkc-htitle h2{ font-size:28px; font-weight:800; margin:0; letter-spacing:-.02em; } .gkc--g1 .gkc-htitle .gkc-sub{ color:var(--muted); font-size:13px; margin-top:3px; } .gkc--g1 .gkc-body, .gkc--g2 .gkc-body, .gkc--g5 .gkc-body{ padding:18px 22px 22px; } .gkc--g1 .gkc-foot, .gkc--g5 .gkc-foot{ display:flex; } /* g2 vertical tile */ .gkc--g2{ width:300px; max-width:100%; } .gkc--g2 .gkc-cover--top{ position:relative; height:170px; } .gkc--g2 .gkc-cov-img{ position:absolute; inset:0; } .gkc--g2 .gkc-tags{ position:absolute; top:12px; left:12px; display:flex; gap:5px; z-index:2; } .gkc--g2 .gkc-float{ position:absolute; top:12px; right:12px; z-index:2; } .gkc--g2 .gkc-title{ font-size:19px; margin-bottom:3px; } /* g3 compact list row */ .gkc--g3{ display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; } .gkc--g3 .gkc-cover--mini{ width:88px; height:88px; border-radius:11px; flex-shrink:0; overflow:hidden; position:relative; } .gkc--g3 .gkc-cov-img{ position:absolute; inset:0; } .gkc--g3 .gkc-body{ flex:1; min-width:0; } .gkc--g3 .gkc-head{ display:flex; align-items:baseline; gap:9px; } .gkc--g3 .gkc-title{ font-size:18px; font-weight:700; } .gkc--g3 .gkc-yr{ font-size:12px; color:var(--faint); } .gkc--g3 .gkc-row{ margin:6px 0 7px; font-size:12px; color:var(--muted); } .gkc--g3 .gkc-story{ font-size:12px; margin:0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .gkc--g3 .gkc-right{ flex-shrink:0; } .gkc-ring{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; position:relative; background:conic-gradient(var(--cyan) var(--p,80%), var(--line) 0); } .gkc-ring::before{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--card); } .gkc-ring span{ position:relative; font-weight:800; font-size:15px; } /* g4 neon spotlight */ .gkc--g4{ display:grid; grid-template-columns:200px 1fr; background:linear-gradient(135deg, oklch(0.18 0.06 210), var(--card) 55%); border:1px solid oklch(0.78 0.13 210 / .3); border-radius:20px; overflow:hidden; box-shadow:0 40px 90px -44px rgba(0,0,0,.8); } .gkc--g4 .gkc-cover--side{ min-height:230px; position:relative; } .gkc--g4 .gkc-cov-img{ position:absolute; inset:0; } .gkc--g4 .gkc-body{ padding:22px 24px; display:flex; flex-direction:column; } .gkc--g4 .gkc-title{ font-size:24px; margin-bottom:4px; } /* g5 detailed */ .gkc--g5{ display:grid; grid-template-columns:280px 1fr; } .gkc--g5 .gkc-cover--tall{ position:relative; min-height:380px; padding:18px; } .gkc--g5 .gkc-cov-img{ position:absolute; inset:0; } .gkc--g5 .gkc-cov-top{ position:relative; z-index:1; } .gkc--g5 .gkc-body{ padding:24px 26px 26px; display:flex; flex-direction:column; } .gkc--g5 .gkc-title{ font-size:26px; margin-bottom:6px; } .gkc--g5 .gkc-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--muted); font-size:13px; margin-bottom:18px; } .gkc--g5 .gkc-score-row{ margin-bottom:20px; } .gkc--g5 .gkc-metascore{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:72px; border-radius:12px; background:linear-gradient(160deg, oklch(0.74 0.17 155 / .18), oklch(0.74 0.17 155 / .04)); border:1px solid oklch(0.74 0.17 155 / .35); padding:8px; } .gkc--g5 .gkc-ms-n{ font-size:30px; font-weight:800; line-height:1; color:var(--green); } .gkc--g5 .gkc-ms-l{ font-family:'JetBrains Mono',monospace; font-size:8.5px; letter-spacing:.12em; color:var(--muted); margin-top:5px; text-transform:uppercase; } .gkc--g5 .gkc-foot{ margin-top:auto; padding-top:18px; } /* ==================================================================== TV SERIES (cool broadcast) — scoped via .gkc-fam--t (NOT [class*=gkc--t], which would also match .gkc--transparent). ==================================================================== */ .gkc-fam--t{ --ink:var(--gkc-pal-text-l,var(--gkc-pal-text,#141d28)); --muted:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#5a6b7f)); --faint:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#93a1b3)); --line:var(--gkc-pal-border-l,var(--gkc-pal-border,#dfe6ee)); --card:var(--gkc-pal-bg-l,var(--gkc-pal-bg,#fff)); --accent:var(--gkc-pal-accent-l,var(--gkc-pal-accent,oklch(0.62 0.13 235))); --gold:var(--gkc-pal-rating-l,var(--gkc-pal-rating,oklch(0.74 0.13 78))); --pal-title:var(--gkc-pal-title-l,var(--gkc-pal-title,var(--ink))); --pal-btn:var(--gkc-pal-btn-l,var(--gkc-pal-btn,var(--accent))); --pal-btn-fg:var(--gkc-pal-btn-fg-l,var(--gkc-pal-btn-fg,#fff)); font-family:'Inter',system-ui,sans-serif; color:var(--ink); position:relative; } .gkc-fam--t[data-gkc-theme="dark"]{ --ink:var(--gkc-pal-text,#e8eef6); --muted:var(--gkc-pal-muted,#9fb0c3); --faint:var(--gkc-pal-muted,#6b7a8d); --line:var(--gkc-pal-border,#273341); --card:var(--gkc-pal-bg,#131a23); --accent:var(--gkc-pal-accent,oklch(0.70 0.12 230)); --gold:var(--gkc-pal-rating,oklch(0.78 0.13 78)); --pal-title:var(--gkc-pal-title,var(--ink)); --pal-btn:var(--gkc-pal-btn,var(--accent)); --pal-btn-fg:var(--gkc-pal-btn-fg,#04121c); } @media (prefers-color-scheme:dark){ .gkc-fam--t[data-gkc-theme="auto"]{ --ink:var(--gkc-pal-text,#e8eef6); --muted:var(--gkc-pal-muted,#9fb0c3); --faint:var(--gkc-pal-muted,#6b7a8d); --line:var(--gkc-pal-border,#273341); --card:var(--gkc-pal-bg,#131a23); --accent:var(--gkc-pal-accent,oklch(0.70 0.12 230)); --gold:var(--gkc-pal-rating,oklch(0.78 0.13 78)); --pal-title:var(--gkc-pal-title,var(--ink)); --pal-btn:var(--gkc-pal-btn,var(--accent)); --pal-btn-fg:var(--gkc-pal-btn-fg,#04121c); } } /* site theme toggle ([data-theme] on /) wins over the OS for auto */ [data-theme="light"] .gkc-fam--t[data-gkc-theme="auto"]{ --ink:var(--gkc-pal-text-l,var(--gkc-pal-text,#141d28)); --muted:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#5a6b7f)); --faint:var(--gkc-pal-muted-l,var(--gkc-pal-muted,#93a1b3)); --line:var(--gkc-pal-border-l,var(--gkc-pal-border,#dfe6ee)); --card:var(--gkc-pal-bg-l,var(--gkc-pal-bg,#fff)); --accent:var(--gkc-pal-accent-l,var(--gkc-pal-accent,oklch(0.62 0.13 235))); --gold:var(--gkc-pal-rating-l,var(--gkc-pal-rating,oklch(0.74 0.13 78))); --pal-title:var(--gkc-pal-title-l,var(--gkc-pal-title,var(--ink))); --pal-btn:var(--gkc-pal-btn-l,var(--gkc-pal-btn,var(--accent))); --pal-btn-fg:var(--gkc-pal-btn-fg-l,var(--gkc-pal-btn-fg,#fff)); } [data-theme="dark"] .gkc-fam--t[data-gkc-theme="auto"]{ --ink:var(--gkc-pal-text,#e8eef6); --muted:var(--gkc-pal-muted,#9fb0c3); --faint:var(--gkc-pal-muted,#6b7a8d); --line:var(--gkc-pal-border,#273341); --card:var(--gkc-pal-bg,#131a23); --accent:var(--gkc-pal-accent,oklch(0.70 0.12 230)); --gold:var(--gkc-pal-rating,oklch(0.78 0.13 78)); --pal-title:var(--gkc-pal-title,var(--ink)); --pal-btn:var(--gkc-pal-btn,var(--accent)); --pal-btn-fg:var(--gkc-pal-btn-fg,#04121c); } /* signature: a "signal" strip across the top of every TV card */ .gkc-fam--t::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; z-index:3; background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent) 55%, transparent); } .gkc-fam--t.gkc--transparent::before{ display:none; } .gkc-fam--t .gkc-poster{ background-color:var(--line); } .gkc-fam--t .gkc-poster--ph{ background:repeating-linear-gradient(135deg,var(--line) 0 10px,transparent 10px 20px); color:var(--faint); } .gkc-fam--t .gkc-title{ font-family:'Sora',system-ui,sans-serif; font-weight:800; letter-spacing:-.02em; line-height:1.12; margin:0; color:var(--pal-title); } .gkc-fam--t .gkc-year{ color:var(--faint); font-weight:500; } .gkc-fam--t .gkc-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; } .gkc-fam--t .gkc-eyebrow::before{ content:""; width:14px; height:2px; background:var(--accent); border-radius:2px; } .gkc-fam--t .gkc-sum{ font-size:14px; color:var(--muted); margin:0 0 14px; } .gkc-fam--t .gkc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:12px 0; } .gkc-fam--t .gkc-genre{ font-size:11.5px; font-weight:600; color:var(--accent); background:color-mix(in srgb, var(--accent) 11%, transparent); border:1px solid color-mix(in srgb, var(--accent) 24%, transparent); padding:3px 9px; border-radius:6px; } .gkc-fam--t .gkc-g{ color:var(--accent); font-weight:600; font-size:12.5px; } .gkc-fam--t .gkc-dot{ width:3px; height:3px; border-radius:50%; background:var(--faint); display:inline-block; } .gkc-fam--t .gkc-runtime{ font-size:13px; color:var(--muted); } .gkc-fam--t .gkc-pill{ flex-shrink:0; display:inline-flex; align-items:center; gap:5px; background:color-mix(in srgb, var(--gold) 14%, transparent); color:var(--gold); border:1px solid color-mix(in srgb, var(--gold) 36%, transparent); padding:5px 11px; border-radius:999px; font-weight:700; font-size:15px; } .gkc-fam--t .gkc-pill svg{ width:14px; height:14px; color:var(--gold); } .gkc-fam--t .gkc-out{ color:var(--faint); font-weight:500; font-size:12px; } .gkc-fam--t .gkc-stars{ display:inline-flex; gap:1px; } .gkc-fam--t .gkc-stars svg{ width:14px; height:14px; color:var(--gold); } .gkc-fam--t .gkc-stars .off svg{ opacity:.3; } .gkc-fam--t .gkc-stars-row{ display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap; } .gkc-fam--t .gkc-num{ font-weight:800; font-size:14px; } .gkc-fam--t .gkc-cnt{ font-size:12px; color:var(--faint); } .gkc-fam--t .gkc-cast{ margin-top:14px; padding-top:14px; border-top:1px solid var(--line); } .gkc-fam--t .gkc-cast-l{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--faint); font-weight:600; margin-bottom:9px; } .gkc-fam--t .gkc-cast-list{ display:flex; flex-wrap:wrap; gap:16px; } .gkc-fam--t .gkc-av{ background-color:var(--line); color:var(--faint); border:1px solid var(--line); } .gkc-fam--t .gkc-cast-n{ font-size:13px; font-weight:600; } .gkc-fam--t .gkc-cast-r{ font-size:11.5px; color:var(--faint); } .gkc-fam--t .gkc-cast-names{ font-size:12px; color:var(--muted); line-height:1.3; } .gkc-fam--t .gkc-cast-line{ font-size:12.5px; color:var(--muted); margin-top:auto; } .gkc-fam--t .gkc-cta{ display:inline-flex; align-items:center; gap:8px; background:var(--pal-btn); color:var(--pal-btn-fg); text-decoration:none; font-weight:700; font-size:13.5px; padding:10px 18px; border-radius:10px; } .gkc-fam--t .gkc-ring{ background:conic-gradient(var(--accent) var(--p,80%), var(--line) 0); } .gkc-fam--t .gkc-ring::before{ background:var(--card); } .gkc-fam--t .gkc-float{ position:absolute; top:14px; right:14px; z-index:2; display:inline-flex; align-items:center; gap:5px; background:rgba(10,16,24,.72); color:#fff; backdrop-filter:blur(5px); padding:5px 10px; border-radius:999px; font-weight:700; font-size:13.5px; } .gkc-fam--t .gkc-float svg{ width:13px; height:13px; color:var(--gold); } /* t1 billboard — poster left */ .gkc--t1, .gkc--t4, .gkc--t5{ display:grid; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 22px 48px -30px rgba(10,25,45,.45); } .gkc--t1{ grid-template-columns:160px 1fr; } .gkc--t1 .gkc-poster--side{ min-height:250px; } .gkc--t1 .gkc-body, .gkc--t4 .gkc-body, .gkc--t5 .gkc-body{ padding:22px 24px; display:flex; flex-direction:column; } .gkc--t1 .gkc-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; } .gkc--t1 .gkc-title{ font-size:23px; } .gkc--t1 .gkc-cast{ margin-top:auto; } /* t2 on-air tile — title over the artwork */ .gkc--t2{ width:300px; max-width:100%; background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 22px 48px -30px rgba(10,25,45,.45); } .gkc--t2 .gkc-tv-cover{ position:relative; height:230px; } .gkc--t2 .gkc-poster--top{ position:absolute; inset:0; } .gkc--t2 .gkc-tv-grad{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(8,14,22,.88) 0%, rgba(8,14,22,.25) 52%, transparent 75%); } .gkc--t2 .gkc-tv-over{ position:absolute; left:16px; right:16px; bottom:14px; z-index:2; } .gkc--t2 .gkc-tv-over .gkc-title{ color:#fff; font-size:21px; } .gkc--t2 .gkc-tv-over .gkc-eyebrow{ color:#9fd6ff; margin-bottom:5px; } .gkc--t2 .gkc-tv-over .gkc-eyebrow::before{ background:#9fd6ff; } .gkc--t2 .gkc-body{ padding:14px 18px 18px; } .gkc--t2 .gkc-meta{ margin-top:0; } /* t3 guide row — compact listing */ .gkc--t3{ display:flex; align-items:center; gap:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; box-shadow:0 12px 32px -26px rgba(10,25,45,.45); } .gkc--t3 .gkc-poster--mini{ width:110px; height:72px; border-radius:9px; flex-shrink:0; } .gkc--t3 .gkc-body{ flex:1; min-width:0; } .gkc--t3 .gkc-eyebrow{ margin-bottom:3px; } .gkc--t3 .gkc-head{ display:flex; align-items:baseline; gap:8px; } .gkc--t3 .gkc-title{ font-size:17px; } .gkc--t3 .gkc-meta{ margin:4px 0 6px; font-size:12.5px; color:var(--muted); } .gkc--t3 .gkc-sum{ font-size:12.5px; margin:0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; } .gkc--t3 .gkc-right{ flex-shrink:0; } /* t4 spotlight — copy left, artwork right */ .gkc--t4{ grid-template-columns:1fr 190px; background:linear-gradient(125deg, color-mix(in srgb, var(--accent) 8%, var(--card)), var(--card) 55%); } .gkc--t4 .gkc-poster--side{ min-height:250px; order:2; } .gkc--t4 .gkc-title{ font-size:25px; margin-bottom:10px; } /* t5 dossier */ .gkc--t5{ grid-template-columns:190px 1fr; border-radius:18px; } .gkc--t5 .gkc-poster--tall{ min-height:380px; } .gkc--t5 .gkc-title{ font-size:25px; } .gkc--t5 .gkc-credits{ font-size:13px; color:var(--muted); margin:7px 0 0; } .gkc--t5 .gkc-ratings{ display:flex; margin:18px 0 16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; } .gkc--t5 .gkc-r{ flex:1; text-align:center; padding:12px 8px; } .gkc--t5 .gkc-r + .gkc-r{ border-left:1px solid var(--line); } .gkc--t5 .gkc-rn{ font-family:'Sora',system-ui,sans-serif; font-weight:800; font-size:21px; color:var(--ink); } .gkc--t5 .gkc-rl{ display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); margin-top:6px; } .gkc--t5 .gkc-foot{ margin-top:auto; padding-top:18px; } /* ==================================================================== POLISH — richer surfaces across all three families ==================================================================== */ /* gentle lift on hover for the big card shapes */ .gkc--m1, .gkc--m2, .gkc--m3, .gkc--m5, .gkc--g1, .gkc--g2, .gkc--g4, .gkc--g5, .gkc--t1, .gkc--t2, .gkc--t4, .gkc--t5{ transition:transform .22s ease, box-shadow .22s ease; } .gkc--m1:hover, .gkc--m2:hover, .gkc--m3:hover, .gkc--m5:hover, .gkc--t1:hover, .gkc--t2:hover, .gkc--t4:hover, .gkc--t5:hover{ transform:translateY(-3px); box-shadow:0 30px 60px -32px rgba(30,25,15,.45); } .gkc--g1:hover, .gkc--g2:hover, .gkc--g4:hover, .gkc--g5:hover{ transform:translateY(-3px); box-shadow:0 50px 100px -48px rgba(0,0,0,.9); } .gkc--transparent:hover{ transform:none !important; box-shadow:none !important; } /* side/tall posters get a soft right-edge blend into the card */ .gkc--m1 .gkc-poster--side, .gkc--m3 .gkc-poster--side, .gkc--m5 .gkc-poster--tall, .gkc--t1 .gkc-poster--side, .gkc--t5 .gkc-poster--tall{ position:relative; } .gkc--m1 .gkc-poster--side::after, .gkc--m3 .gkc-poster--side::after, .gkc--m5 .gkc-poster--tall::after, .gkc--t1 .gkc-poster--side::after, .gkc--t5 .gkc-poster--tall::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent 78%, color-mix(in srgb, var(--card) 30%, transparent)); pointer-events:none; } /* movie m2: deepen the floating badge + add a bottom poster gradient */ .gkc--m2 .gkc-poster--top{ position:relative; } .gkc--m2 .gkc-poster--top::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, color-mix(in srgb, var(--card) 55%, transparent), transparent 45%); } /* game g1 hero: stronger cinematic scrim + edge vignette */ .gkc--g1 .gkc-scrim{ background:linear-gradient(0deg,var(--card) 4%, rgba(19,22,31,.35) 55%, rgba(0,0,0,.25)); } /* game g5 metascore glow */ .gkc--g5 .gkc-metascore{ box-shadow:0 0 24px -6px oklch(0.74 0.17 155 / .45); } /* ---------- transparent: drop the surface, blend into the post ---------- */ .gkc--transparent{ box-shadow:none !important; border-color:transparent !important; background:transparent !important; } .gkc--transparent.gkc--m4, .gkc--transparent.gkc--g3, .gkc--transparent.gkc--t3{ padding:0; } .gkc--transparent .gkc-ratings, .gkc--transparent .gkc-cast{ border-color:var(--line); } @media (max-width:560px){ .gkc--m1, .gkc--m3, .gkc--m5, .gkc--g4, .gkc--g5, .gkc--t1, .gkc--t5{ grid-template-columns:1fr; } .gkc--t4{ grid-template-columns:1fr; } .gkc--t4 .gkc-poster--side{ order:0; min-height:200px; } .gkc--m2, .gkc--g2, .gkc--t2{ width:100%; } .gkc--m4, .gkc--g3, .gkc--t3{ flex-wrap:wrap; } }