/* ============================================================ QUIMERA — Tweaks effects Driven by data-attrs on : data-register, data-apparatus, data-voice. Each control reshapes the FEEL of the whole page, not a single property. ============================================================ */ /* ============================================================ VOICE — the signature accent that runs through everything. Overrides --lav-300 / --lav-600 so eyebrows, link-hovers, nav dots, ::selection, and dossier marks all re-tone in lockstep. ============================================================ */ html[data-voice="oxide"] { --lav-300: #C26A60; --lav-200: #D9A19B; --lav-600: #5C2D28; --quimera-bebacc: #C26A60; } html[data-voice="copper"] { --lav-300: #C99166; --lav-200: #DDB89A; --lav-600: #5C432A; --quimera-bebacc: #C99166; } html[data-voice="slate"] { --lav-300: #7A95B0; --lav-200: #B0C0D0; --lav-600: #2F4258; --quimera-bebacc: #7A95B0; } /* ============================================================ REGISTER — the overall posture of the page. editorial : default. Dark ink shell, paper sections punctuate. atelier : paper-dominant. Warm bone throughout, ink retreats to type. cinema : deepest blacks + ambient violet wash. Less paper, more glass. ============================================================ */ /* ----- ATELIER ----- */ html[data-register="atelier"] { --bg-shell: var(--bone-50); --bg-elev-1: var(--bone-100); --bg-elev-2: var(--bone-200); --fg-1: var(--ink-950); --fg-2: var(--ink-600); --fg-3: var(--ink-500); --rule: rgba(14, 13, 18, 0.10); --rule-strong: rgba(14, 13, 18, 0.22); } html[data-register="atelier"] body { background: var(--bone-50); } html[data-register="atelier"] .q-header { background: rgba(245, 242, 235, 0.78) !important; border-bottom: 1px solid rgba(14, 13, 18, 0.10); } html[data-register="atelier"] .q-section.paper { background: var(--bone-100); } html[data-register="atelier"] .q-btn.primary { background: var(--ink-950); color: var(--bone-50); } html[data-register="atelier"] .q-btn.primary:hover { background: var(--ink-800); } html[data-register="atelier"] .q-btn.secondary { color: var(--ink-950); border-color: rgba(14, 13, 18, 0.22); } html[data-register="atelier"] .q-footer { background: var(--bone-100); color: var(--ink-600); border-top: 1px solid rgba(14, 13, 18, 0.10); } html[data-register="atelier"] .q-footer h4 { color: var(--ink-500); } html[data-register="atelier"] .q-footer li a { color: var(--ink-950); } html[data-register="atelier"] .q-footer .colophon { color: var(--ink-500); border-color: rgba(14, 13, 18, 0.10); } html[data-register="atelier"] .q-card.dark { background: var(--bone-100); border-color: rgba(14, 13, 18, 0.10); color: var(--ink-950); } html[data-register="atelier"] .q-card.dark h3 { color: var(--ink-950); } html[data-register="atelier"] .q-card.dark p { color: var(--ink-600); } html[data-register="atelier"] .q-card.dark .eyebrow { color: var(--ink-500); } /* Flip the white outline mark to black in atelier */ html[data-register="atelier"] img[src*="outline-white"] { filter: invert(1); } /* ----- CINEMA ----- */ html[data-register="cinema"] { --bg-shell: #050507; --bg-paper: #0F0E16; --on-bone-1: var(--bone-50); --on-bone-2: var(--ink-200); --on-bone-3: var(--ink-300); --rule-paper: rgba(190, 186, 204, 0.10); --rule-paper-strong: rgba(190, 186, 204, 0.22); } html[data-register="cinema"] body { background: radial-gradient(1200px 720px at 50% -10%, rgba(190, 186, 204, 0.14), transparent 62%), radial-gradient(900px 600px at 100% 28%, rgba(190, 186, 204, 0.06), transparent 60%), #050507; background-attachment: fixed; min-height: 100vh; } html[data-register="cinema"] .q-header { background: rgba(5, 5, 7, 0.55) !important; backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); } html[data-register="cinema"] .q-section.paper { background: var(--bg-paper); color: var(--bone-50); } html[data-register="cinema"] .q-section.paper .q-card { background: rgba(190, 186, 204, 0.04); border-color: var(--rule-paper); } html[data-register="cinema"] .q-footer { background: #030305; } /* Cinema gives the hero more drama */ html[data-register="cinema"] section.q-section.loose:first-of-type { padding-top: 180px; padding-bottom: 160px; } /* ============================================================ APPARATUS — how much "intelligence-dossier" framing shows. clean : hide §, coord ribbons, corner stamps. Contemporary site. standard : default. Visible coord ribbons, §, corner stamps. dossier : add file-code margin labels + REVIEW COPY stamp. ============================================================ */ /* ----- CLEAN ----- */ html[data-apparatus="clean"] .q-coord-ribbon, html[data-apparatus="clean"] .q-section-header .num, html[data-apparatus="clean"] [data-dossier-mark] { display: none !important; } /* Without ribbons the hero collapses awkwardly — pull it back up. */ html[data-apparatus="clean"] section.q-section.loose:first-of-type > .q-container > div:last-child { margin-top: 0 !important; } /* ----- DOSSIER — added file-code margins + diagonal stamp ----- */ html[data-apparatus="dossier"] .q-dossier-margin-l, html[data-apparatus="dossier"] .q-dossier-margin-r, html[data-apparatus="dossier"] .q-dossier-stamp { display: block !important; } .q-dossier-margin-l, .q-dossier-margin-r, .q-dossier-stamp { display: none; } .q-dossier-margin-l, .q-dossier-margin-r { position: fixed; top: 50%; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--lav-300); opacity: 0.55; pointer-events: none; z-index: 40; white-space: nowrap; text-transform: uppercase; } .q-dossier-margin-l { left: 16px; transform: rotate(-90deg) translateX(50%); transform-origin: left center; } .q-dossier-margin-r { right: 16px; transform: rotate(90deg) translateX(-50%); transform-origin: right center; } /* Diagonal REVIEW COPY stamp on the hero — outlined, voice-tinted, mineral. */ .q-dossier-stamp { position: absolute; top: 220px; right: 6%; transform: rotate(-14deg); pointer-events: none; z-index: 5; padding: 14px 28px 12px; border: 3px solid var(--lav-300); border-radius: 4px; color: var(--lav-300); opacity: 0.42; font-family: var(--font-title); font-weight: 700; font-size: 28px; letter-spacing: 0.18em; text-transform: uppercase; text-align: center; line-height: 1; } .q-dossier-stamp .sub { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.32em; opacity: 0.85; } /* Hero needs to be a positioning context for the absolute stamp. */ section.q-section.loose:first-of-type { position: relative; } /* ============================================================ ::selection re-tones automatically through --lav-300 override. ============================================================ */