/* Caravaggio — Baroque tenebrism cinematic skin (ADR 0050). OPT-IN + FULLY SCOPED. Linked only by the design site; every rule sits under [data-theme^="caravaggio-"], so it is inert for every other theme and every consumer that doesn't link it. The 18-token palette lives in themes.css; this file is the motif kit — the inscriptional @font-face (Cinzel), the chiaroscuro candlelight backdrop, gilt frames + warm glow, and inscriptional heading treatment. CSS-ONLY: no motion JS. The light pool is static, with an optional prefers-reduced-motion-gated candle flicker. */ @font-face { font-family: "Cinzel"; src: url("/static/design/fonts/Cinzel-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* ============================================================ Shared across both modes — inscriptional type + gilt ornament ============================================================ */ /* Headings + title classes carry the shipped display weight (600) so the browser never synthesises faux-bold from the single woff2, plus a little Roman-inscription tracking. (base.css already points these at --font-family-display; we set weight + tracking.) */ :root[data-theme^="caravaggio-"] h1, :root[data-theme^="caravaggio-"] h2, :root[data-theme^="caravaggio-"] h3, :root[data-theme^="caravaggio-"] .card-title, :root[data-theme^="caravaggio-"] .section-heading, :root[data-theme^="caravaggio-"] .marketing-nav-brand, :root[data-theme^="caravaggio-"] .section-intro-eyebrow { font-weight: 600; letter-spacing: 0.02em; } /* The wordmark + section headings read as carved plaques: uppercase, tracked out. */ :root[data-theme^="caravaggio-"] .marketing-nav-brand { text-transform: uppercase; letter-spacing: 0.16em; } :root[data-theme^="caravaggio-"] .section-heading { text-transform: uppercase; letter-spacing: 0.13em; } /* A thin gilt rule under section headings, fading out like leaf. */ :root[data-theme^="caravaggio-"] .section-heading::after { content: ""; display: block; height: 1px; margin-top: 0.5rem; background: linear-gradient(90deg, var(--accent), transparent 72%); opacity: 0.55; } /* Buttons: engraved brass plates — letterspaced, with a faint sheen on the primary (gilt) action. */ :root[data-theme^="caravaggio-"] .button { letter-spacing: 0.04em; } :root[data-theme^="caravaggio-"] .button--primary { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.07)); } /* Cards get a gilt frame from the (gilt) subtle border. */ :root[data-theme^="caravaggio-"] .card { border: 1px solid var(--border-subtle); } /* Links: gilt. */ :root[data-theme^="caravaggio-"] a { color: var(--accent); } /* Chips: small engraved labels. */ :root[data-theme^="caravaggio-"] .chip { text-transform: uppercase; letter-spacing: 0.06em; } /* ============================================================ Dark mode — canonical tenebrism: a single candlelight pool, content emerging from near-black shadow, warm gilt glow. ============================================================ */ /* Lit headings catch the candle — warm highlight + gilt halo. */ :root[data-theme="caravaggio-dark"] h1, :root[data-theme="caravaggio-dark"] h2, :root[data-theme="caravaggio-dark"] .card-title, :root[data-theme="caravaggio-dark"] .marketing-nav-brand { color: #f4e8cc; text-shadow: 0 0 20px rgba(201, 162, 74, 0.22); } /* Cards emerge from shadow: a warm top rim-light, an inner gilt liner, a deep drop into black, and a soft gilt outer glow. */ :root[data-theme="caravaggio-dark"] .card { box-shadow: inset 0 1px 0 rgba(244, 232, 204, 0.06), inset 0 0 0 1px rgba(201, 162, 74, 0.10), 0 24px 60px -30px rgba(0, 0, 0, 0.9), 0 0 50px -22px rgba(201, 162, 74, 0.30); } :root[data-theme="caravaggio-dark"] .button--primary { box-shadow: 0 0 22px -6px rgba(201, 162, 74, 0.55); } /* The candlelight backdrop. base.css paints html+body with --bg-primary (warm near-black); we drop body's background so this fixed ::before (z-index -1) shows above the html canvas but behind content. A single warm light pool set high-left (the source), falling off into black at the edges (tenebrism). */ :root[data-theme="caravaggio-dark"] body { background: transparent; } :root[data-theme="caravaggio-dark"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 32% 18%, rgba(201, 162, 74, 0.16), rgba(11, 8, 6, 0) 55%), radial-gradient(60% 60% at 78% 92%, rgba(150, 96, 34, 0.06), rgba(11, 8, 6, 0) 60%), radial-gradient(120% 100% at 50% 40%, rgba(11, 8, 6, 0) 55%, rgba(0, 0, 0, 0.55)); } :root[data-theme="caravaggio-dark"] ::selection { background: rgba(201, 162, 74, 0.30); color: #1a1206; } /* Optional candle flicker — a slow, subtle breathing of the pool's intensity. Gated on no-preference so reduced-motion users keep the static pool. */ @media (prefers-reduced-motion: no-preference) { :root[data-theme="caravaggio-dark"] body::before { animation: caravaggio-flicker 7s ease-in-out infinite; } } @keyframes caravaggio-flicker { 0%, 100% { opacity: 1; } 38% { opacity: 0.95; } 52% { opacity: 0.98; } 68% { opacity: 0.91; } } /* ============================================================ Light mode — a warm "gallery daylight": cream/parchment with the same gilt frames + oxblood, but crisp and glare-free. No glow. ============================================================ */ /* A faint warm wash, like daylight from a high window — no dark vignette. */ :root[data-theme="caravaggio-light"] body { background: transparent; } :root[data-theme="caravaggio-light"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80% 60% at 50% 0%, rgba(180, 140, 60, 0.07), rgba(240, 231, 214, 0) 60%); } /* Cards read as framed canvases on a gallery wall: gilt liner + a soft warm drop-shadow. */ :root[data-theme="caravaggio-light"] .card { box-shadow: inset 0 0 0 1px rgba(165, 118, 29, 0.12), 0 8px 24px -14px rgba(60, 40, 10, 0.4); } :root[data-theme="caravaggio-light"] ::selection { background: rgba(165, 118, 29, 0.24); color: #2a1f12; }