/* ========================================================================== FilmPulse — cinema news design system. Dark-first, because a film-news site is read like a cinema: bright art on a dark ground. A light theme is available and fully specified; the toggle writes data-theme on and a pre-paint inline script applies it, so there is never a flash of the wrong theme. Motion policy: every animation is decorative and every one is disabled under prefers-reduced-motion. Nothing below animates layout properties — only transform and opacity — so scrolling stays on the compositor. ========================================================================== */ /* ---------- 1. Tokens ----------------------------------------------------- */ :root { /* Brand — a projector red against deep neutral. */ --red-600:#E11D48; --red-500:#F43F5E; --red-400:#FB7185; --red-300:#FDA4AF; --amber-500:#F59E0B; --amber-400:#FBBF24; --violet-500:#8B5CF6; --sky-500:#0EA5E9; --teal-500:#14B8A6; --pink-500:#EC4899; /* Neutrals — warm-shifted charcoals, not blue-grey. */ --n-1000:#08070A; --n-950:#0C0B10; --n-900:#121017; --n-850:#17151E; --n-800:#1E1B26; --n-700:#2A2633; --n-600:#3A3546; --n-500:#57506A; --n-400:#7C748F; --n-300:#A49BB5; --n-200:#C9C2D6; --n-150:#DED8E7; --n-100:#ECE8F1; --n-50:#F6F4F9; --n-0:#FFFFFF; /* Semantic — dark (default) */ --page:var(--n-950); --surface:var(--n-900); --surface-2:var(--n-850); --surface-3:var(--n-800); --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16); --text:#F7F5FA; --text-body:var(--n-200); --text-muted:var(--n-300); --text-faint:var(--n-400); --brand:var(--red-500); --brand-strong:var(--red-600); --brand-tint:rgba(225,29,72,.14); --on-brand:#fff; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 14px -4px rgba(0,0,0,.55); --shadow-3:0 18px 40px -12px rgba(0,0,0,.7); --glow:0 0 0 1px rgba(244,63,94,.35), 0 8px 32px -8px rgba(244,63,94,.45); --scrim:linear-gradient(to top, rgba(8,7,10,.96) 8%, rgba(8,7,10,.72) 42%, rgba(8,7,10,0) 82%); /* Geometry */ --r-1:4px; --r-2:8px; --r-3:12px; --r-4:16px; --r-5:22px; --r-pill:999px; --wrap:1240px; --wrap-narrow:748px; --header-h:64px; /* Type. --font-lang is swapped per language by the layout so Indic scripts get a face designed for them, with Inter for the Latin runs inside. */ --font-latin:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --font-lang:var(--font-latin); --font-ui:var(--font-lang),var(--font-latin); --font-head:'Sora',var(--font-lang),var(--font-latin); --t-11:.6875rem; --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem; --t-15:.9375rem; --t-16:1rem; --t-17:1.0625rem; --t-18:1.125rem; --h4:clamp(1.0625rem,1rem + .3vw,1.25rem); --h3:clamp(1.25rem,1.12rem + .6vw,1.625rem); --h2:clamp(1.5rem,1.28rem + 1vw,2.25rem); --h1:clamp(1.875rem,1.45rem + 2vw,3.25rem); --hero:clamp(2.25rem,1.5rem + 3.4vw,4.5rem); --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); } :root[data-theme="light"] { --page:var(--n-50); --surface:var(--n-0); --surface-2:var(--n-50); --surface-3:var(--n-100); --border:rgba(18,16,23,.11); --border-strong:rgba(18,16,23,.2); --text:var(--n-1000); --text-body:#3A3546; --text-muted:var(--n-500); --text-faint:var(--n-400); --brand:var(--red-600); --brand-strong:#BE123C; --brand-tint:rgba(225,29,72,.09); --shadow-1:0 1px 2px rgba(18,16,23,.07); --shadow-2:0 4px 14px -4px rgba(18,16,23,.14); --shadow-3:0 18px 40px -12px rgba(18,16,23,.2); --glow:0 0 0 1px rgba(225,29,72,.28), 0 8px 28px -10px rgba(225,29,72,.35); --scrim:linear-gradient(to top, rgba(10,9,12,.94) 6%, rgba(10,9,12,.6) 45%, rgba(10,9,12,0) 85%); } /* ---------- 2. Reset ------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)} body{ margin:0;background:var(--page);color:var(--text); font-family:var(--font-ui);font-size:var(--t-16);line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{display:block;max-width:100%} img{height:auto} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.15;letter-spacing:-.018em;margin:0} h1{font-size:var(--h1)}h2{font-size:var(--h2)}h3{font-size:var(--h3)}h4{font-size:var(--h4)} p{margin:0 0 1.15em} ul,ol{margin:0 0 1.15em;padding-left:1.25em} :focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:var(--r-1)} ::selection{background:var(--brand);color:#fff} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)} .wrap--narrow{max-width:var(--wrap-narrow)} .skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:#fff;padding:.7rem 1.1rem;border-radius:0 0 var(--r-2) 0} .skip-link:focus{left:0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .ic{width:1em;height:1em;flex:none} /* ---------- 3. Header ----------------------------------------------------- */ .topbar{ background:var(--n-1000);color:var(--n-300);font-size:var(--t-12); border-bottom:1px solid var(--border); } :root[data-theme="light"] .topbar{background:var(--n-1000);color:var(--n-200)} .topbar__inner{display:flex;align-items:center;gap:1rem;min-height:34px;flex-wrap:wrap} .topbar__live{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--red-400)} .topbar__dot{width:7px;height:7px;border-radius:50%;background:var(--red-500);animation:pulse 2s var(--ease) infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}} .topbar__spacer{margin-left:auto} .topbar a{color:inherit;opacity:.85} .topbar a:hover{opacity:1;color:var(--red-300)} .header{ position:sticky;top:0;z-index:90; background:color-mix(in srgb, var(--page) 88%, transparent); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--border); transition:box-shadow .25s var(--ease), background .25s var(--ease); } .header.is-stuck{box-shadow:var(--shadow-2)} .header__inner{display:flex;align-items:center;gap:.85rem;min-height:var(--header-h)} .brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;flex:none} .brand__mark{ width:32px;height:32px;display:grid;place-items:center;border-radius:9px; background:linear-gradient(135deg,var(--red-600),var(--amber-500));color:#fff; box-shadow:0 4px 14px -4px rgba(225,29,72,.6); } .brand__mark .ic{width:18px;height:18px} .brand__name b{color:var(--brand)} .mainnav{display:flex;align-items:center;gap:.2rem;margin-left:.6rem;overflow:auto;scrollbar-width:none} .mainnav::-webkit-scrollbar{display:none} .mainnav__link{ position:relative;padding:.5rem .7rem;border-radius:var(--r-2); font-size:var(--t-14);font-weight:600;color:var(--text-muted);white-space:nowrap; transition:color .18s var(--ease),background .18s var(--ease); } .mainnav__link:hover{color:var(--text);background:var(--surface-2)} .mainnav__link[aria-current="page"]{color:var(--text)} .mainnav__link[aria-current="page"]::after{ content:"";position:absolute;left:.7rem;right:.7rem;bottom:.15rem;height:2px; border-radius:2px;background:var(--brand); } .header__actions{display:flex;align-items:center;gap:.4rem;margin-left:auto;flex:none} .iconbtn{ width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-2); background:transparent;border:1px solid transparent;color:var(--text-muted);cursor:pointer; transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease); } .iconbtn:hover{background:var(--surface-2);color:var(--text);border-color:var(--border)} .iconbtn .ic{width:19px;height:19px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.45rem; padding:.6rem 1.05rem;border-radius:var(--r-pill);border:1px solid transparent; font-size:var(--t-14);font-weight:650;cursor:pointer;white-space:nowrap; transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease); } .btn:active{transform:translateY(1px)} .btn--primary{background:var(--brand);color:var(--on-brand)} .btn--primary:hover{background:var(--brand-strong);box-shadow:var(--glow)} .btn--ghost{background:transparent;border-color:var(--border-strong);color:var(--text)} .btn--ghost:hover{background:var(--surface-2);border-color:var(--brand)} .btn--sm{padding:.42rem .8rem;font-size:var(--t-13)} .btn--block{width:100%} /* Language switcher ------------------------------------------------------- */ .langpick{position:relative} .langpick__btn{ display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .7rem; border-radius:var(--r-pill);border:1px solid var(--border-strong); background:var(--surface-2);color:var(--text);font-size:var(--t-13);font-weight:600;cursor:pointer; transition:border-color .18s var(--ease),background .18s var(--ease); } .langpick__btn:hover{border-color:var(--brand)} .langpick__menu{ position:absolute;right:0;top:calc(100% + .5rem);min-width:190px;z-index:95; background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-3); box-shadow:var(--shadow-3);padding:.35rem; opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right; transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s; } .langpick.is-open .langpick__menu{opacity:1;visibility:visible;transform:none} .langpick__menu a{ display:flex;align-items:center;justify-content:space-between;gap:.75rem; padding:.55rem .7rem;border-radius:var(--r-2);font-size:var(--t-14);color:var(--text-body); } .langpick__menu a:hover{background:var(--surface-2);color:var(--text)} .langpick__menu a[aria-current="true"]{color:var(--brand);font-weight:650} .langpick__menu small{color:var(--text-faint);font-size:var(--t-12)} /* Drawer ------------------------------------------------------------------ */ .drawer{ position:fixed;inset:var(--header-h) 0 0;z-index:88;background:var(--page); padding:1.25rem clamp(1rem,4vw,2rem) 3rem;overflow:auto; transform:translateY(-8px);opacity:0;visibility:hidden; transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s; } .drawer.is-open{opacity:1;visibility:visible;transform:none} .drawer__label{display:block;font-size:var(--t-11);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:1.25rem 0 .5rem} .drawer a{display:flex;align-items:center;justify-content:space-between;padding:.85rem 0;border-bottom:1px solid var(--border);font-weight:600} .drawer a .ic{color:var(--text-faint)} /* ---------- 4. Hero ------------------------------------------------------- */ .hero{position:relative;overflow:hidden;isolation:isolate;padding:clamp(2.5rem,7vw,5rem) 0 clamp(2rem,5vw,3.5rem)} /* The canvas is a decorative backdrop only. If Three.js never loads — mobile, reduced motion, slow link — the gradient below is the finished design, so nothing is missing and nothing shifts. */ .hero__canvas{position:absolute;inset:0;z-index:-2;opacity:0;transition:opacity 1.2s var(--ease); /* A canvas is a replaced element: with width/height auto, inset:0 resolves to its intrinsic 300x150 instead of stretching, so the size must be stated outright or the scene renders into a small box in the corner. */ width:100%;height:100%} .hero__canvas.is-live{opacity:1} .hero::before{ content:"";position:absolute;inset:0;z-index:-3; background: radial-gradient(60% 80% at 18% 0%, rgba(225,29,72,.30), transparent 62%), radial-gradient(50% 70% at 88% 12%, rgba(139,92,246,.26), transparent 60%), radial-gradient(70% 60% at 50% 100%, rgba(245,158,11,.16), transparent 65%); } .hero::after{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(to bottom, transparent 55%, var(--page) 99%); } .hero__kicker{ display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .85rem; border-radius:var(--r-pill);border:1px solid var(--border-strong); background:color-mix(in srgb, var(--surface) 70%, transparent); font-size:var(--t-12);font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted); backdrop-filter:blur(8px); } .hero__title{font-size:var(--hero);letter-spacing:-.035em;margin:1rem 0 .75rem;max-width:16ch} .hero__title em{font-style:normal;background:linear-gradient(100deg,var(--red-400),var(--amber-400));-webkit-background-clip:text;background-clip:text;color:transparent} .hero__lead{font-size:clamp(1rem,.95rem + .4vw,1.2rem);color:var(--text-muted);max-width:56ch;margin-bottom:1.5rem} .hero__actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} /* Ticker ------------------------------------------------------------------ */ .ticker{ display:flex;align-items:center;gap:1rem;margin-top:2.25rem;padding:.6rem .9rem; border:1px solid var(--border);border-radius:var(--r-3); background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:blur(10px);overflow:hidden; } .ticker__tag{display:inline-flex;align-items:center;gap:.4rem;flex:none;font-size:var(--t-12);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--brand)} .ticker__viewport{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 92%,transparent)} .ticker__track{display:flex;gap:2.5rem;width:max-content;animation:slide 48s linear infinite} .ticker:hover .ticker__track,.ticker:focus-within .ticker__track{animation-play-state:paused} .ticker__track a{font-size:var(--t-14);color:var(--text-body);white-space:nowrap} .ticker__track a:hover{color:var(--brand)} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- 5. Cards ------------------------------------------------------ */ .section{padding:clamp(2rem,5vw,3.5rem) 0} .section--tight{padding:clamp(1.25rem,3vw,2rem) 0} .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap} .sechead h2{display:flex;align-items:center;gap:.6rem} .sechead h2::before{content:"";width:4px;height:1.1em;border-radius:3px;background:var(--accent,var(--brand))} .sechead__more{font-size:var(--t-14);font-weight:600;color:var(--text-muted);display:inline-flex;align-items:center;gap:.3rem} .sechead__more:hover{color:var(--brand)} .sechead__more .ic{transition:transform .2s var(--ease)} .sechead__more:hover .ic{transform:translateX(3px)} .grid{display:grid;gap:clamp(1rem,2.2vw,1.6rem)} .grid--3{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))} .grid--4{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))} .grid--lead{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)} @media (max-width:900px){.grid--lead{grid-template-columns:1fr}} .card{ position:relative;display:flex;flex-direction:column; background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3); overflow:hidden;transition:transform .32s var(--ease-out),border-color .32s var(--ease),box-shadow .32s var(--ease); } .card:hover{transform:translateY(-4px);border-color:var(--border-strong);box-shadow:var(--shadow-3)} .card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--surface-3)} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)} .card:hover .card__media img{transform:scale(1.055)} .card__body{padding:.95rem 1.05rem 1.15rem;display:flex;flex-direction:column;gap:.5rem;flex:1} .card__title{font-size:var(--t-17);line-height:1.3;font-weight:700} .card:hover .card__title{color:var(--brand)} .card__excerpt{font-size:var(--t-14);color:var(--text-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card__meta{margin-top:auto;display:flex;align-items:center;gap:.5rem;font-size:var(--t-12);color:var(--text-faint)} .card__link{position:absolute;inset:0;z-index:2} /* The pill sits on the artwork, so it needs its own contrast, not the page's. */ .pill{ display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:var(--r-pill); font-size:var(--t-11);font-weight:700;letter-spacing:.05em;text-transform:uppercase; background:var(--accent,var(--brand));color:#fff; } .pill--ghost{background:var(--surface-3);color:var(--text-muted)} .card__media .pill{position:absolute;left:.7rem;top:.7rem;z-index:1;box-shadow:0 2px 10px rgba(0,0,0,.45)} /* Lead story -------------------------------------------------------------- */ .lead{position:relative;border-radius:var(--r-4);overflow:hidden;min-height:clamp(340px,42vw,520px);display:flex;align-items:flex-end;background:var(--surface-3)} .lead img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)} .lead:hover img{transform:scale(1.04)} .lead::after{content:"";position:absolute;inset:0;background:var(--scrim)} .lead__body{position:relative;z-index:1;padding:clamp(1.25rem,3vw,2.25rem);color:#fff;max-width:60ch} .lead__title{font-size:var(--h2);margin:.6rem 0 .5rem;text-shadow:0 2px 20px rgba(0,0,0,.5)} .lead__excerpt{color:rgba(255,255,255,.82);font-size:var(--t-15);margin:0 0 .7rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .lead__meta{display:flex;align-items:center;gap:.6rem;font-size:var(--t-12);color:rgba(255,255,255,.72)} /* Compact list ------------------------------------------------------------ */ .rail{display:flex;flex-direction:column;gap:.2rem} .rail__item{display:flex;gap:.85rem;padding:.75rem 0;border-bottom:1px solid var(--border);position:relative;transition:padding-left .25s var(--ease)} .rail__item:hover{padding-left:.4rem} .rail__item:last-child{border-bottom:0} .rail__thumb{width:96px;aspect-ratio:16/11;border-radius:var(--r-2);object-fit:cover;flex:none;background:var(--surface-3)} .rail__num{font-family:var(--font-head);font-size:1.5rem;font-weight:800;color:var(--border-strong);line-height:1;flex:none;width:1.6ch;transition:color .25s var(--ease)} .rail__item:hover .rail__num{color:var(--brand)} .rail__title{font-size:var(--t-14);font-weight:650;line-height:1.35;margin:0 0 .25rem} .rail__item:hover .rail__title{color:var(--brand)} .rail__meta{font-size:var(--t-12);color:var(--text-faint)} /* ---------- 6. Article ---------------------------------------------------- */ .crumbs{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap;font-size:var(--t-13);color:var(--text-faint);padding:1rem 0 0} .crumbs a:hover{color:var(--brand)} .crumbs .ic{width:14px;height:14px;opacity:.5} .article__head{padding:1.25rem 0 1.5rem} .article__title{font-size:var(--h1);margin:.6rem 0 .75rem;max-width:22ch} .article__standfirst{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:var(--text-muted);max-width:62ch;margin:0 0 1.15rem;line-height:1.55} .article__meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:var(--t-13);color:var(--text-faint);padding-top:.9rem;border-top:1px solid var(--border)} .article__meta time{color:var(--text-muted)} .figure{margin:0 0 1.5rem} .figure img{width:100%;border-radius:var(--r-3);background:var(--surface-3)} .figure figcaption{font-size:var(--t-12);color:var(--text-faint);padding-top:.55rem;display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap} .figure figcaption a{color:var(--text-muted);text-decoration:underline;text-underline-offset:2px} .figure figcaption a:hover{color:var(--brand)} .keypoints{ background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--brand); border-radius:var(--r-2);padding:1.05rem 1.25rem;margin:0 0 1.75rem; } .keypoints h2{font-size:var(--t-13);text-transform:uppercase;letter-spacing:.09em;color:var(--brand);margin-bottom:.6rem} .keypoints ul{margin:0;padding-left:1.1em} .keypoints li{font-size:var(--t-15);color:var(--text-body);margin-bottom:.4rem} .keypoints li::marker{color:var(--brand)} .prose{font-size:1.0625rem;line-height:1.75;color:var(--text-body)} .prose h2{font-size:var(--h3);margin:2.1rem 0 .85rem;color:var(--text);scroll-margin-top:calc(var(--header-h) + 1rem)} .prose h3{font-size:var(--h4);margin:1.6rem 0 .6rem;color:var(--text)} .prose a{color:var(--brand);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px} .prose a:hover{text-decoration-thickness:2px} .prose blockquote{margin:1.5rem 0;padding:.4rem 0 .4rem 1.15rem;border-left:3px solid var(--brand);color:var(--text);font-size:1.1rem} .prose strong{color:var(--text)} .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:2rem 0} .tag{ padding:.35rem .8rem;border-radius:var(--r-pill);border:1px solid var(--border); background:var(--surface);font-size:var(--t-13);color:var(--text-muted); transition:border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease); } .tag:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)} /* Source credit — deliberately prominent, not a footnote. */ .credit{ display:flex;gap:.75rem;align-items:flex-start;margin:2rem 0 0;padding:1rem 1.15rem; border:1px solid var(--border);border-radius:var(--r-3);background:var(--surface-2); font-size:var(--t-13);color:var(--text-muted); } .credit .ic{color:var(--brand);width:18px;height:18px;margin-top:.15rem;flex:none} .credit strong{color:var(--text);display:block;margin-bottom:.2rem;font-size:var(--t-14)} .credit a{color:var(--brand);text-decoration:underline;text-underline-offset:2px} /* Language availability strip -------------------------------------------- */ .langstrip{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1.5rem 0;padding:.85rem 1rem;border:1px dashed var(--border-strong);border-radius:var(--r-3)} .langstrip__label{font-size:var(--t-12);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-right:.25rem} .langstrip a{padding:.32rem .75rem;border-radius:var(--r-pill);background:var(--surface-2);border:1px solid var(--border);font-size:var(--t-14);font-weight:600;transition:all .18s var(--ease)} .langstrip a:hover{border-color:var(--brand);color:var(--brand)} .langstrip a[aria-current="true"]{background:var(--brand-tint);border-color:var(--brand);color:var(--brand)} /* Reading progress -------------------------------------------------------- */ .progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:100;background:transparent;pointer-events:none} .progress__bar{height:100%;width:0;background:linear-gradient(90deg,var(--red-500),var(--amber-400));transform-origin:left;transition:width .1s linear} /* Share ------------------------------------------------------------------- */ .share{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin:1.5rem 0} .share__label{font-size:var(--t-12);text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-right:.25rem} /* ---------- 7. Layout with sidebar --------------------------------------- */ .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(1.5rem,4vw,3rem);align-items:start} @media (max-width:1024px){.layout{grid-template-columns:1fr}.layout__aside{display:none}} .layout__aside{position:sticky;top:calc(var(--header-h) + 1.25rem);display:flex;flex-direction:column;gap:1.5rem} .panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-3);padding:1.1rem} .panel > h3{font-size:var(--t-13);text-transform:uppercase;letter-spacing:.09em;color:var(--text-faint);margin-bottom:.85rem;display:flex;align-items:center;gap:.4rem} /* ---------- 8. Ads -------------------------------------------------------- */ .ad-slot{display:block;margin:2rem auto;text-align:center;max-width:100%;overflow:hidden} .ad-slot__label{display:block;font-size:var(--t-11);letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.35rem} .ad-slot--leaderboard{min-height:100px} .ad-slot--in-article{min-height:280px} .ad-slot--sidebar{min-height:250px;margin:0} .ad-slot--footer{min-height:100px} .ad-slot ins{margin-inline:auto} /* ---------- 9. Search modal ---------------------------------------------- */ .modal{position:fixed;inset:0;z-index:120;display:none} .modal.is-open{display:block} .modal__backdrop{position:absolute;inset:0;background:rgba(8,7,10,.72);backdrop-filter:blur(4px);animation:fade .2s var(--ease)} .modal__panel{ position:relative;max-width:640px;margin:12vh auto 0;background:var(--surface); border:1px solid var(--border-strong);border-radius:var(--r-4);box-shadow:var(--shadow-3); overflow:hidden;animation:pop .24s var(--ease-out); } @keyframes fade{from{opacity:0}to{opacity:1}} @keyframes pop{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}} .modal__search{display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;border-bottom:1px solid var(--border)} .modal__search input{flex:1;background:transparent;border:0;outline:0;font-size:var(--t-16)} .modal__results{max-height:56vh;overflow:auto;padding:.4rem} .modal__results a{display:block;padding:.7rem .8rem;border-radius:var(--r-2)} .modal__results a:hover,.modal__results a.is-active{background:var(--surface-2)} .modal__results .r-t{font-size:var(--t-14);font-weight:650;margin-bottom:.15rem} .modal__results .r-d{font-size:var(--t-12);color:var(--text-faint)} .modal__empty{padding:1.75rem 1rem;text-align:center;color:var(--text-faint);font-size:var(--t-14)} /* ---------- 10. Footer ---------------------------------------------------- */ .footer{background:var(--n-1000);color:var(--n-300);margin-top:3rem;padding:3rem 0 1.75rem;border-top:1px solid var(--border)} .footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem} @media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}} @media (max-width:520px){.footer__grid{grid-template-columns:1fr}} .footer h4{font-size:var(--t-13);text-transform:uppercase;letter-spacing:.09em;color:#fff;margin-bottom:.85rem} .footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem} .footer a{font-size:var(--t-14);color:var(--n-300)} .footer a:hover{color:var(--red-400)} .footer__brand p{font-size:var(--t-14);max-width:44ch;margin:.85rem 0 1rem} .footer__social{display:flex;gap:.4rem} .footer__social .iconbtn{border-color:rgba(255,255,255,.14);color:var(--n-300)} .footer__social .iconbtn:hover{background:rgba(255,255,255,.07);color:#fff} .footer__legal{font-size:var(--t-12);line-height:1.7;color:var(--n-400);border-top:1px solid rgba(255,255,255,.09);margin-top:2.25rem;padding-top:1.25rem} .footer__legal a{color:var(--n-300);text-decoration:underline;text-underline-offset:2px} .footer__bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--t-12);color:var(--n-400);padding-top:1rem} /* ---------- 11. Consent --------------------------------------------------- */ .consent{ position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:130;max-width:660px;margin-inline:auto; background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-3); box-shadow:var(--shadow-3);padding:1rem 1.15rem;display:none; } .consent.is-visible{display:block;animation:pop .3s var(--ease-out)} .consent p{font-size:var(--t-13);color:var(--text-muted);margin:0 0 .75rem} .consent__row{display:flex;gap:.5rem;justify-content:flex-end;flex-wrap:wrap} /* ---------- 12. Pagination + misc ---------------------------------------- */ .pager{display:flex;gap:.4rem;justify-content:center;align-items:center;margin:2.5rem 0;flex-wrap:wrap} .pager a,.pager span{min-width:38px;height:38px;display:grid;place-items:center;padding-inline:.6rem;border-radius:var(--r-2);border:1px solid var(--border);font-size:var(--t-14);font-weight:600;color:var(--text-muted)} .pager a:hover{border-color:var(--brand);color:var(--brand)} .pager [aria-current="page"]{background:var(--brand);border-color:var(--brand);color:#fff} .empty{text-align:center;padding:4rem 1rem;color:var(--text-faint)} .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:none} /* ---------- 13. Entrance animation --------------------------------------- Applied by cinema.js via IntersectionObserver. The initial state lives in a class the script adds, never in the stylesheet, so content is visible when JavaScript fails rather than stuck at opacity 0. ------------------------------------------------------------------------- */ .js-reveal{opacity:0;transform:translateY(14px)} .js-reveal.is-in{opacity:1;transform:none;transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)} /* ---------- 14. Responsive ------------------------------------------------ */ @media (max-width:860px){ .mainnav{display:none} .header__cta{display:none} } @media (min-width:861px){ .header__burger{display:none} } @media (max-width:520px){ .rail__thumb{width:76px} .hero{padding-top:2rem} } /* ---------- 15. Motion and print ------------------------------------------ */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .js-reveal{opacity:1;transform:none} .ticker__track{animation:none} } @media print{ .header,.topbar,.footer,.ad-slot,.consent,.modal,.progress,.langstrip,.share,.layout__aside{display:none !important} body{background:#fff;color:#000} .layout{grid-template-columns:1fr} } /* ---------- 16. Details the templates rely on ---------------------------- Kept together at the end because each of these styles a hook emitted by something other than this stylesheet: ads.js, the markdown renderer, the icon helper. ------------------------------------------------------------------------ */ /* ads.js marks a slot that came back with no creative. Collapsing it is what turns an unsold impression into no gap at all. */ .ad-slot.is-unfilled{display:none} /* The markdown renderer prefixes every heading with an anchor link. It should be invisible until the heading is hovered, and never affect the text flow. */ .prose h2 .anchor,.prose h3 .anchor{ float:left;margin-left:-1em;width:1em; color:var(--text-faint);text-decoration:none;opacity:0; transition:opacity .18s var(--ease); } .prose h2:hover .anchor,.prose h3:hover .anchor,.anchor:focus-visible{opacity:1} @media (max-width:760px){.prose .anchor{display:none}} /* Markdown tables must scroll inside their own box; the page body must never scroll sideways. */ .table-wrap{overflow-x:auto;margin:1.5rem 0;border:1px solid var(--border);border-radius:var(--r-2)} .table-wrap table{border-collapse:collapse;width:100%;font-size:var(--t-14)} .table-wrap th,.table-wrap td{padding:.6rem .85rem;text-align:left;border-bottom:1px solid var(--border)} .table-wrap th{background:var(--surface-2);font-weight:650;color:var(--text)} .table-wrap tr:last-child td{border-bottom:0} /* The pager reuses the chevron icon for "previous", pointing the other way. */ .ic.flip{transform:rotate(180deg)} /* Copy-link confirmation. */ .iconbtn.is-done{color:var(--brand);border-color:var(--brand)} /* Code, if a source article ever carries any. */ .prose code{background:var(--surface-3);padding:.12em .4em;border-radius:var(--r-1);font-size:.9em} .prose pre.code-block{background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-2);padding:1rem;overflow-x:auto} .prose pre.code-block code{background:none;padding:0} /* A tag with too few stories to earn a hub page still shows, but must not look clickable. */ .tag--flat{cursor:default;opacity:.6} .tag--flat:hover{border-color:var(--border);color:var(--text-muted);transform:none}