/* ============================================================ cinema-shared.css — the dark Editorial Cinema Lab system, shared across every page that carries class="cinema" on . index.html was the pilot; this file is where its chrome and typography overrides now live so every other page can adopt the same system without duplicating rules. It loads LAST in every preset that includes it (after components.css/inner.css/product.css) so it wins the cascade for the shared classes it touches. Rule: this file only ever overrides EXISTING shared classes (components.css, base.css, inner.css, product.css) or defines a small number of new dark-only utility classes (.btn--ghost). It never invents a new visual pattern — that would contradict the whole point of a single system. Pages that need something this file doesn't yet cover get that coverage added here, not as a page-local override. Palette: --bg-dark/--bg-dark-2 (warm near-black), --ink-inv/-2 (light text), --brand/--brand-inv (the one accent — sampled from the logo's own blue). --grain/--glass-bg/--glass-border/--glass-blur are defined in tokens.css. ============================================================ */ /* ── Page canvas ─────────────────────────────────────────────── */ body.cinema { background: var(--bg-dark); } .cinema-surface-1 { background: var(--bg-dark); } .cinema-surface-2 { background: var(--bg-dark-2); } /* inner.css's alternating-section background — parchment by default, the deeper near-black on any cinema page. */ .cinema .section--alt { background-color: var(--bg-dark-2); } /* ── Header ───────────────────────────────────────────────────── */ .cinema .site-header { background: var(--glass-bg); border-bottom-color: var(--glass-border); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); } .cinema .site-header.scrolled { background: rgba(14, 11, 8, 0.82); border-bottom-color: var(--glass-border); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* More prominent mark, every page: font-size scales brand-lockup__mark with it, since the mark is sized in em. */ .cinema .brand-lockup { font-size: 1.75rem; color: var(--ink-inv); } .cinema a.brand-lockup:hover { color: var(--brand-inv); } .cinema .nav__links a { color: var(--ink-inv-2); } .cinema .nav__links a:hover, .cinema .nav__links a[aria-current="page"] { color: var(--ink-inv); } .cinema .nav__links a::after { background: var(--brand-inv); } .cinema .nav__burger span { background: var(--ink-inv); } .cinema .mobile-nav { background: rgba(14, 11, 8, 0.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .cinema .mobile-nav__links a { color: var(--ink-inv); border-bottom-color: var(--glass-border); } .cinema .mobile-nav__links a:hover { color: var(--brand-inv); } .cinema .mobile-nav__cta { color: var(--brand-inv); } /* ── Footer ───────────────────────────────────────────────────── */ .cinema .site-footer { background-color: var(--bg-dark-2); border-top-color: var(--glass-border); } .cinema .footer__descriptor, .cinema .footer__founder, .cinema .footer__location, .cinema .footer__copy, .cinema .footer__col-title { color: var(--ink-inv-2); } .cinema .brand-lockup--footer { color: var(--ink-inv); } .cinema .footer__founder a, .cinema .footer__nav a, .cinema .footer__col a, .cinema .footer__social a { color: var(--ink-inv-2); border-bottom-color: var(--glass-border); } .cinema .footer__founder a:hover, .cinema .footer__col a:hover { color: var(--brand-inv); border-bottom-color: var(--brand-inv); } .cinema .footer__nav a:hover, .cinema .footer__social a:hover { color: var(--ink-inv); } .cinema .footer__base { border-top-color: var(--glass-border); } /* ── Focus ────────────────────────────────────────────────────── */ /* base.css's default :focus-visible outline is --accent, a warm umber that all but disappears against --bg-dark. --brand-inv is still the one accent colour, just its readable-on-dark variant. */ .cinema :focus-visible { outline-color: var(--brand-inv); } /* ── Section header / intro / dividers ─────────────────────────── Used on every page via .section-header, .eyebrow, .section-title, .section-intro (base.css / components.css). */ .cinema .eyebrow { color: var(--ink-inv-2); } .cinema .section-title, .cinema .subheading { color: var(--ink-inv); } .cinema .section-intro { color: var(--ink-inv-2); } .cinema .section-intro a, .cinema .prose a { color: var(--brand-inv); } .cinema .prose p, .cinema .prose li { color: var(--ink-inv-2); } .cinema .prose h2, .cinema .prose h3 { color: var(--ink-inv); } .cinema .rule { border-top-color: var(--glass-border); } .cinema .dot-list li { color: var(--ink-inv-2); } .cinema .dot-list li::before { color: var(--ink-inv-2); } .cinema .link-arrow { color: var(--ink-inv); } /* ── Buttons ──────────────────────────────────────────────────── */ /* A ghost secondary button for dark surfaces — components.css' .btn--outline is tuned for light pages (border/text = --accent, a warm umber with poor contrast on near-black). New variant rather than an override, since some pages may want it explicitly. */ .btn--ghost { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.04em; text-decoration: none; line-height: 1; cursor: pointer; min-height: var(--tap-target); padding: 0.875rem 1.75rem; color: var(--ink-inv); background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); transition: border-color var(--ease-f), background-color var(--ease-f), color var(--ease-f); } .btn--ghost:hover { border-color: var(--ink-inv-2); background: rgba(243, 240, 233, 0.08); } /* Existing .btn--outline markup (any page that already has it) gets the same treatment automatically, so pages don't need to swap classes to fit the dark system. */ .cinema .btn--outline { border-color: var(--ink-inv-2); color: var(--ink-inv); } .cinema .btn--outline:hover { background-color: var(--ink-inv); color: var(--bg-dark); } .cinema .btn--inv { background-color: var(--accent); color: var(--bg-dark-2); box-shadow: var(--shadow-glow); font-weight: 600; border: none; } .cinema .btn--inv:hover { background-color: var(--accent-lt); color: var(--bg-dark); transform: translateY(-2px); } .cinema .btn--text { color: var(--ink-inv); } .cinema .btn--text::after { background: var(--ink-inv); } .cinema .btn--text:hover { color: var(--brand-inv); } .cinema .btn--text:hover::after { background: var(--brand-inv); } /* ── Article card (components.css) ───────────────────────────── */ .cinema .article-list { border-top-color: var(--glass-border); } .cinema .article-card { border-bottom-color: var(--glass-border); } .cinema .article-card:hover { background: var(--glass-bg); } .cinema .article-card__title { color: var(--ink-inv); } .cinema .article-card__excerpt, .cinema .article-card__meta { color: var(--ink-inv-2); } /* ── Page hero (inner.css — used by every inner page) ─────────── */ .cinema .page-hero { position: relative; border-bottom-color: var(--glass-border); overflow: hidden; } .cinema .page-hero::before { content: ""; position: absolute; top: -50%; left: 50%; width: 100vw; height: 100vw; max-width: 1200px; max-height: 1200px; transform: translateX(-50%); background: radial-gradient(circle at center, rgba(16, 235, 230, 0.08) 0%, rgba(23, 19, 15, 0) 70%); z-index: -1; pointer-events: none; } .cinema .page-hero__title { color: var(--ink-inv); } .cinema .page-hero__sub { color: var(--ink-inv-2); } /* ── Breadcrumb (components.css) ──────────────────────────────── */ .cinema .breadcrumb, .cinema .breadcrumb a { color: var(--ink-inv-2); } .cinema .breadcrumb a:hover { color: var(--brand-inv); border-bottom-color: var(--brand-inv); } /* ── Commitment / credential grids (inner.css) ────────────────── */ .cinema .commitment-item { border-top-color: var(--glass-border); } .cinema .commitment-item__title { color: var(--ink-inv); } .cinema .commitment-item__body { color: var(--ink-inv-2); } .cinema .credential-item { border-bottom-color: var(--glass-border); } .cinema .credential-item__title { color: var(--ink-inv); } .cinema .credential-item__body { color: var(--ink-inv-2); } /* ── Credentials logo strip (inner.css) ───────────────────────── */ /* The white chip background is deliberately kept — on a near-black page a certification logo needs its native white/colour background to stay legible and recognisable, exactly as it would on a real institution's own site. Only the section's own rule needs to shift from --rule (invisible on dark) to --glass-border. */ .cinema .credentials-logo-strip { border-top-color: var(--glass-border); } /* ── Status chip (components.css) ─────────────────────────────── */ .cinema .status-chip { border-color: var(--glass-border); color: var(--ink-inv-2); } .cinema .status-chip--live { color: var(--brand-inv); border-color: var(--brand-inv); } /* ── Tool card (components.css) — product.css's elevation pattern. .tool-hero and .contact-cta already render dark by default (background: var(--bg-dark) baked into the component, same as .subscribe) — no override needed there. */ .cinema .tool-card { position: relative; background: var(--bg-dark-2); border-color: var(--glass-border); color: var(--ink-inv); isolation: isolate; } .cinema .tool-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: none; background: radial-gradient(circle at top right, rgba(92, 242, 242, 0.05), transparent 60%); opacity: 0; transition: opacity var(--ease); z-index: -1; } .cinema a.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-glow); border-color: var(--accent); } .cinema a.tool-card:hover::before { opacity: 1; } /* market-map.html declares its OWN .tool-card, .tool-card__name etc. in a page-local