/* ============================================================================ * site.css -- IfTheyToldUs.com (apex) * * An EFI "house brand" site. Structural skeleton (nav-collapse / hamburger / * nav-utils / hero-carousel / reading-progress / back-to-top / footer) is * inherited from the experiencerteam.com template so the future collaboration * platform can inline this nav the same way. The SKIN is the site's own: * a "declassified / on the record" identity -- institutional-credible base * (light) with an analysis-room dark mode, a manila file-folder motif, and a * three-accent system where each accent has a job: * signal green -> grounded evidence (deep links, corroboration, "on record") * stamp red -> OUR framing labels only (SIMULATION, redaction, contested) * amber/gold -> primary calls to action * * Type: serif display+body (gravitas / "document"), Lato-ish sans chrome, * monospace for all DATA (claim IDs, timestamps, tags, deep links). * * Theme convention: [data-theme="light"|"dark"] on . Default light. * ============================================================================ */ /* ============================================================================ * RESET + BASE * ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-padding-top: calc(var(--nav-height) + 16px); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } :root { /* --- Chrome (nav + footer): fixed dark ink in BOTH themes --- */ --chrome-bg: #14181f; --chrome-bg-deep: #0d1016; --chrome-text: #eef1f5; --chrome-soft: rgba(238, 241, 245, 0.72); --chrome-rule: rgba(238, 241, 245, 0.14); /* --- Surfaces + ink (LIGHT default -- the credible register) --- */ --bg: #f4f1ea; /* warm document paper */ --bg-card: #ffffff; --bg-strip: #efe9db; /* tinted section band */ --text: #1b1f26; --text-soft: #4a5261; --text-faint: #8a93a0; --rule: #e0d9ca; --rule-soft: #ece6d9; --card-border: #d8d0bf; /* --- Manila file-folder motif --- */ --file-bg: #e9dcbb; --file-edge: #d3be8e; --file-tab: #dfcfa4; --file-ink: #43371f; /* --- Accents --- */ --signal: #1f7a4d; /* evidence / on the record */ --signal-deep: #16603c; --signal-soft: #dceee4; --stamp: #b23b2e; /* OUR labels: simulation / redaction / contested */ --stamp-soft: #f3ddd8; --amber: #b8842a; /* primary CTA */ --amber-bright:#c8912f; --amber-soft: #f4e7c9; /* --- Redaction / ink bars --- */ --redact: #14181f; --shadow-sm: 0 1px 3px rgba(20, 24, 31, 0.10); --shadow-md: 0 2px 12px rgba(20, 24, 31, 0.08); --shadow-lg: 0 16px 40px rgba(20, 24, 31, 0.12); /* --- Typography --- */ --font-display: 'Merriweather', Georgia, 'Times New Roman', serif; --font-body: 'Merriweather', Georgia, 'Times New Roman', serif; --font-chrome: 'Lato', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 16px; --text-md: 18px; --text-lg: 21px; --text-xl: 26px; --text-2xl: 34px; --text-3xl: 46px; --text-4xl: 64px; --line-tight: 1.22; --line-normal: 1.6; --line-loose: 1.8; --fs-scale: 1; --z-progress: 1500; --z-nav: 1000; --z-modal: 2000; --max-width: 1180px; --reading-width: 720px; --nav-height: 72px; } [data-theme="dark"] { --chrome-bg: #0a0d12; --chrome-bg-deep: #060809; --chrome-text: #e6e9ee; --chrome-soft: rgba(230, 233, 238, 0.70); --chrome-rule: rgba(230, 233, 238, 0.12); --bg: #0c0f14; /* the analysis-room black */ --bg-card: #141922; --bg-strip: #10151c; --text: #e6e9ee; --text-soft: #b3bcc7; --text-faint: #7a8590; --rule: #242c37; --rule-soft: #1b222b; --card-border: #263040; --file-bg: #211c11; --file-edge: #3a3220; --file-tab: #2b2415; --file-ink: #e6d6ac; --signal: #3fb950; --signal-deep: #2ea043; --signal-soft: #12291b; --stamp: #e0654f; --stamp-soft: #2e1a15; --amber: #e0a52e; --amber-bright:#eab53f; --amber-soft: #2c2413; --redact: #05070a; --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 2px 12px rgba(0,0,0,.45); --shadow-lg: 0 16px 40px rgba(0,0,0,.55); } html { font-size: calc(16px * var(--fs-scale)); } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: var(--text-base); line-height: var(--line-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background .2s ease, color .2s ease; overflow-x: hidden; } a { color: var(--signal-deep); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--amber); } [data-theme="dark"] a { color: var(--signal); } img { max-width: 100%; display: block; } em { font-style: italic; } strong { font-weight: 700; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, textarea, select, button { font-family: var(--font-chrome); } ::selection { background: var(--amber-soft); color: var(--text); } /* ============================================================================ * LAYOUT PRIMITIVES * ============================================================================ */ .page-wrap { min-height: 60vh; } .section { max-width: var(--max-width); margin: 0 auto; padding: 4rem 1.5rem; } .section-narrow { max-width: 820px; } .section-reading { max-width: var(--reading-width); } .section-tinted { background: var(--bg-strip); max-width: none; } .section-tinted > * { max-width: var(--max-width); margin-left: auto; margin-right: auto; } .section-divider { max-width: var(--max-width); margin: 0 auto; height: 1px; background: var(--rule); } .section-label { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--signal-deep); margin: 0 0 .6rem; } [data-theme="dark"] .section-label { color: var(--signal); } .section-title { font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--line-tight); font-weight: 900; margin: 0 0 1rem; } .section-title em { color: var(--amber); font-style: italic; } .section-sub { font-size: var(--text-md); color: var(--text-soft); max-width: 620px; margin: 0 auto; } .section-body p { margin: 0 0 1.1rem; } .section-body p:last-child { margin-bottom: 0; } .text-center { text-align: center; } /* eyebrow + monospace ID chips reused across pages */ .mono { font-family: var(--font-mono); } .claim-id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); letter-spacing: .04em; } /* ============================================================================ * BUTTONS * ============================================================================ */ .btn, .cta-button { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-chrome); font-weight: 700; font-size: var(--text-base); line-height: 1; padding: .85rem 1.6rem; border-radius: 6px; cursor: pointer; transition: background .15s ease, transform .1s ease, box-shadow .15s ease; } .cta-button, .btn-primary { background: var(--amber); color: #1b1206; box-shadow: 0 4px 16px rgba(184,132,42,.28); } .cta-button:hover, .btn-primary:hover { background: var(--amber-bright); color: #1b1206; transform: translateY(-1px); } [data-theme="dark"] .cta-button, [data-theme="dark"] .btn-primary { color: #241a06; } .btn-ghost { background: transparent; border: 1px solid var(--card-border); color: var(--text); } .btn-ghost:hover { border-color: var(--signal); color: var(--signal-deep); background: var(--signal-soft); } .btn-signal { background: var(--signal); color: #fff; } .btn-signal:hover { background: var(--signal-deep); color: #fff; transform: translateY(-1px); } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } .btn-row.center { justify-content: center; } /* ============================================================================ * TOP-LEVEL CHROME: skip link + reading progress * ============================================================================ */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-modal); background: var(--amber); color: #1b1206; padding: .6rem 1rem; font-family: var(--font-chrome); font-weight: 700; } .skip-link:focus { left: 8px; top: 8px; } .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: var(--z-progress); background: transparent; pointer-events: none; } .reading-progress-bar { height: 100%; width: 0; background: var(--signal); transition: width .1s linear; } /* ============================================================================ * NAV * ============================================================================ */ .main-nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--chrome-bg); color: var(--chrome-text); border-bottom: 1px solid var(--chrome-rule); box-shadow: var(--shadow-sm); } .nav-inner { max-width: var(--max-width); margin: 0 auto; height: var(--nav-height); padding: 0 1.5rem; display: flex; align-items: center; gap: 1rem; } .nav-brand { display: flex; align-items: center; gap: .6rem; color: var(--chrome-text); font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); letter-spacing: -.01em; } .nav-brand:hover { color: var(--amber); } .brand-logo { width: 44px; height: 44px; border-radius: 6px; } .brand-mark { font-family: var(--font-mono); color: var(--signal); font-weight: 700; } .brand-text .brand-if { color: var(--chrome-text); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; margin-left: auto; padding: 8px; } .hamburger-bar { display: block; width: 24px; height: 2px; background: var(--chrome-text); transition: transform .2s ease, opacity .2s ease; } .nav-hamburger.is-open .hamburger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.is-open .hamburger-bar:nth-child(2) { opacity: 0; } .nav-hamburger.is-open .hamburger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-collapse { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; } .nav-links { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-link { display: inline-block; color: var(--chrome-soft); font-family: var(--font-chrome); font-weight: 700; font-size: var(--text-sm); letter-spacing: .04em; text-transform: uppercase; padding: .55rem .7rem; border-radius: 5px; } .nav-link:hover, .nav-item:hover .nav-link { color: var(--chrome-text); background: rgba(255,255,255,.06); } .nav-link.is-current { color: var(--amber); } /* member-only items: hidden until body.is-member */ .nav-member { display: none; } body.is-member .nav-member { display: inline-block; } body.is-member .nav-member.nav-item { display: list-item; } body.is-member #nav-login { display: none; } .nav-cta { color: #1b1206 !important; background: var(--amber); font-weight: 800; } .nav-cta:hover { background: var(--amber-bright); } .nav-utils { display: flex; align-items: center; gap: .35rem; padding-left: .6rem; border-left: 1px solid var(--chrome-rule); } .nav-util-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; color: var(--chrome-soft); } .nav-util-btn:hover { color: var(--chrome-text); background: rgba(255,255,255,.08); } .font-controls { display: flex; gap: 2px; } .font-btn { width: auto; padding: 0 8px; font-family: var(--font-chrome); font-weight: 700; font-size: 13px; } .font-btn-active { color: var(--amber); } .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: block; } @media (max-width: 900px) { .nav-hamburger { display: flex; } .nav-collapse { position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; margin: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--chrome-bg-deep); padding: 1rem 1.5rem 2rem; overflow-y: auto; transform: translateX(100%); transition: transform .25s ease; } .nav-collapse.is-open { transform: translateX(0); } .nav-links { flex-direction: column; align-items: stretch; gap: 0; } .nav-link { padding: .9rem .4rem; border-bottom: 1px solid var(--chrome-rule); border-radius: 0; font-size: var(--text-base); } .nav-utils { border-left: 0; border-top: 1px solid var(--chrome-rule); padding: 1rem .2rem 0; margin-top: .6rem; } } /* ============================================================================ * HERO CAROUSEL * ============================================================================ */ .hero-carousel { position: relative; height: min(78vh, 640px); overflow: hidden; background: var(--chrome-bg-deep); } .hero-track { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; display: grid; align-items: center; } .hero-slide.active { opacity: 1; } .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,14,.90) 0%, rgba(8,10,14,.72) 42%, rgba(8,10,14,.30) 100%); } .hero-slide-content { position: relative; z-index: 2; max-width: var(--max-width); width: 100%; margin: 0 auto; padding: 0 1.5rem; color: #f2f4f7; } .hero-slide-content .inner { max-width: 640px; } .hero-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .28em; text-transform: uppercase; color: var(--signal); margin-bottom: 1rem; } .hero-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, var(--text-4xl)); font-weight: 900; line-height: 1.08; margin: 0 0 1rem; letter-spacing: -.015em; } .hero-title em { color: var(--amber); font-style: italic; } .hero-subtitle { font-size: var(--text-lg); color: rgba(242,244,247,.9); line-height: 1.5; margin: 0 0 1.6rem; } .hero-cta { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-chrome); font-weight: 700; color: #f2f4f7; border-bottom: 2px solid var(--amber); padding-bottom: 3px; } .hero-cta:hover { color: var(--amber); } .hero-controls { position: absolute; z-index: 3; bottom: 1.4rem; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 1rem; } .hero-arrow { width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 22px; line-height: 1; display: grid; place-items: center; } .hero-arrow:hover { background: rgba(0,0,0,.6); } .hero-dots { display: flex; gap: .5rem; } .hero-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.4); } .hero-dot.active { background: var(--amber); } @media (max-width: 640px) { .hero-carousel { height: 70vh; } } /* persistent primary CTA bar below hero */ .hero-cta-bar { text-align: center; margin: 2rem auto .5rem; padding: 0 1rem; } .hero-cta-note { margin: .7rem 0 0; font-family: var(--font-chrome); font-size: var(--text-sm); color: var(--text-soft); } /* ============================================================================ * SIMULATION BANNER (guardrail: claims-not-facts, prominent + everywhere) * ============================================================================ */ .sim-banner { max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.4rem; display: flex; gap: 1rem; align-items: flex-start; background: var(--stamp-soft); border: 1px solid color-mix(in srgb, var(--stamp) 35%, transparent); border-left: 5px solid var(--stamp); border-radius: 8px; } .sim-banner .stamp-badge { flex: none; } .sim-banner p { margin: 0; font-size: var(--text-sm); color: var(--text); line-height: 1.5; } .sim-banner.full { border-radius: 0; max-width: none; } .sim-banner.full > .sim-inner { max-width: var(--max-width); margin: 0 auto; display: flex; gap: 1rem; align-items: flex-start; } /* the SIMULATION / status "stamp" -- rubber-stamp look */ .stamp-badge { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--stamp); border: 2px solid var(--stamp); border-radius: 4px; padding: .3rem .55rem; transform: rotate(-2deg); white-space: nowrap; } .stamp-badge.solid { background: var(--stamp); color: #fff; border-color: var(--stamp); } /* ============================================================================ * THE BRIEF -- "declassified report" document card (home centerpiece) * ============================================================================ */ .brief { max-width: 880px; margin: 0 auto; } .brief-doc { background: var(--bg-card); border: 1px solid var(--card-border); border-radius: 4px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .brief-doc::before { /* top classification strip */ content: "UNCLASSIFIED // SIMULATION // FOR ILLUSTRATION ONLY"; display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-align: center; color: #fff; background: var(--stamp); padding: .4rem; text-transform: uppercase; } .brief-doc-body { padding: 2.4rem clamp(1.4rem, 5vw, 3.4rem) 2.8rem; position: relative; } .brief-doc .doc-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); border-bottom: 1px solid var(--rule); padding-bottom: 1rem; margin-bottom: 1.6rem; } .brief-doc h2, .brief-doc h3 { font-family: var(--font-display); } .brief-doc h2 { font-size: var(--text-xl); font-weight: 900; margin: 0 0 .3rem; } .brief-doc h3 { font-size: var(--text-md); margin: 1.8rem 0 .5rem; } .brief-doc p { margin: 0 0 1rem; line-height: var(--line-loose); } .brief-doc .doc-watermark { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%) rotate(-24deg); font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.4rem, 9vw, 5.5rem); letter-spacing: .1em; color: color-mix(in srgb, var(--stamp) 12%, transparent); pointer-events: none; white-space: nowrap; z-index: 0; } .brief-doc .brief-doc-body > * { position: relative; z-index: 1; } .brief-actions { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.6rem; } .placeholder-note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); text-align: center; margin-top: .9rem; } /* ============================================================================ * BUCKET BADGES (corroboration tier) -- green -> red scale * ============================================================================ */ .bucket { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 3px; border: 1px solid; } .bucket::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .bucket.strongly_corroborated { color: var(--signal-deep); border-color: color-mix(in srgb, var(--signal) 45%, transparent); background: var(--signal-soft); } [data-theme="dark"] .bucket.strongly_corroborated { color: var(--signal); } .bucket.multiply_asserted { color: #7a6a1a; border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: var(--amber-soft); } [data-theme="dark"] .bucket.multiply_asserted { color: var(--amber); } .bucket.single_source { color: var(--text-soft); border-color: var(--card-border); background: var(--bg-strip); } .bucket.contested { color: var(--stamp); border-color: color-mix(in srgb, var(--stamp) 45%, transparent); background: var(--stamp-soft); } .bucket.floor { color: var(--text-faint); border-color: var(--rule-soft); background: var(--bg-strip); } /* canonical claim detail: stack the member accounts under a proposition */ .canonical-detail { display: flex; flex-direction: column; } .member-claim { padding: .85rem 0; border-top: 1px solid var(--rule-soft); } .member-claim:first-child { border-top: 0; padding-top: .25rem; } .single-group > summary .topic-name { color: var(--text-soft); font-weight: 600; } .single-row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; justify-content: space-between; padding: .5rem .2rem; border-top: 1px solid var(--rule-soft); } .single-row:first-child { border-top: 0; } .single-statement { flex: 1 1 60%; min-width: 260px; } .single-meta { display: inline-flex; gap: .6rem; align-items: baseline; font-size: var(--text-sm); color: var(--text-faint); } /* ============================================================================ * DEEP-LINK CHIPS + evidence quotes (the "on the record" green) * ============================================================================ */ .deeplink { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; color: var(--signal-deep); background: var(--signal-soft); border: 1px solid color-mix(in srgb, var(--signal) 30%, transparent); border-radius: 4px; padding: .18rem .5rem; } [data-theme="dark"] .deeplink { color: var(--signal); } .deeplink:hover { background: var(--signal); color: #fff; } .deeplink::before { content: "\25B8"; } /* ▸ */ .evidence-quote { border-left: 3px solid var(--signal); padding: .3rem 0 .3rem 1rem; margin: .6rem 0; color: var(--text); font-style: italic; } .evidence-quote cite { display: block; font-style: normal; font-size: var(--text-sm); color: var(--text-soft); margin-top: .35rem; } .evidence-quote cite .speaker { font-family: var(--font-chrome); font-weight: 700; color: var(--text); font-style: normal; } /* ============================================================================ * FILE-FOLDER CARDS (sources / people / feature tiles) * ============================================================================ */ .file-card { position: relative; background: var(--file-bg); color: var(--file-ink); border: 1px solid var(--file-edge); border-radius: 2px 8px 8px 8px; padding: 1.3rem 1.4rem 1.4rem; box-shadow: var(--shadow-sm); } .file-card::before { /* folder tab */ content: ""; position: absolute; top: -11px; left: 18px; width: 84px; height: 12px; background: var(--file-tab); border: 1px solid var(--file-edge); border-bottom: 0; border-radius: 6px 6px 0 0; } .file-card h3 { font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 .4rem; color: var(--file-ink); } .file-card .file-no { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .1em; text-transform: uppercase; opacity: .7; } .file-card p { margin: .5rem 0 0; font-size: var(--text-sm); line-height: 1.5; } .card-grid { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* generic feature list */ .feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .feature-item { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.4rem; } .feature-item h3 { font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 .5rem; } .feature-item p { margin: 0; color: var(--text-soft); font-size: var(--text-sm); line-height: 1.55; } /* numbered "how it works" steps */ .steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .step { position: relative; background: var(--bg-card); border: 1px solid var(--rule); border-radius: 8px; padding: 1.6rem 1.4rem 1.4rem; counter-increment: step; } .step::before { content: counter(step, decimal-leading-zero); position: absolute; top: -14px; left: 1.2rem; font-family: var(--font-mono); font-weight: 700; font-size: var(--text-sm); color: #fff; background: var(--signal); padding: .25rem .5rem; border-radius: 4px; } .step h3 { font-family: var(--font-display); font-size: var(--text-md); margin: .3rem 0 .5rem; } .step p { margin: 0; color: var(--text-soft); font-size: var(--text-sm); line-height: 1.55; } /* pull quote + stat tiles */ .pull-quote { font-family: var(--font-display); font-style: italic; font-size: var(--text-xl); line-height: 1.4; color: var(--text); border-left: 4px solid var(--amber); padding-left: 1.4rem; margin: 2rem 0; } .stat-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.5rem 0; } .stat { background: var(--bg-card); border: 1px solid var(--rule); border-top: 3px solid var(--signal); border-radius: 6px; padding: 1.2rem; text-align: center; } .stat .num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 700; color: var(--text); } .stat .lbl { font-family: var(--font-chrome); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); margin-top: .3rem; } /* ============================================================================ * DATA PAGE -- category accordion + claim explorer * ============================================================================ */ .topic-group { border: 1px solid var(--rule); border-radius: 8px; margin-bottom: 1rem; overflow: hidden; background: var(--bg-card); } .topic-group > summary { list-style: none; cursor: pointer; padding: 1.1rem 1.4rem; display: flex; align-items: center; gap: 1rem; font-family: var(--font-chrome); font-weight: 700; } .topic-group > summary::-webkit-details-marker { display: none; } .topic-group > summary::before { content: "\002B"; font-family: var(--font-mono); color: var(--signal); font-weight: 700; width: 1rem; } .topic-group[open] > summary::before { content: "\2212"; } .topic-group > summary .topic-name { font-size: var(--text-md); font-family: var(--font-display); } .topic-group > summary .topic-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); margin-left: auto; } .topic-body { padding: 0 1.4rem 1rem; border-top: 1px solid var(--rule-soft); } .claim { border-bottom: 1px solid var(--rule-soft); } .claim > summary { list-style: none; cursor: pointer; padding: 1rem 0; display: flex; gap: .8rem; align-items: flex-start; } .claim > summary::-webkit-details-marker { display: none; } .claim > summary .claim-head { flex: 1; } .claim .claim-statement { font-size: var(--text-base); line-height: 1.5; } .claim .claim-glance { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .5rem; align-items: center; font-size: var(--text-xs); color: var(--text-soft); } .claim-glance .indep { font-family: var(--font-mono); } .claim-glance .indep::before { content: "\25C7 "; color: var(--signal); } .claim-detail { padding: .4rem 0 1.4rem; } .claim-detail .basis-block { background: var(--bg-strip); border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.3rem; margin-bottom: 1rem; } .claim-detail h4 { font-family: var(--font-chrome); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin: 0 0 .7rem; } .speaker-line { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .35rem 0; font-size: var(--text-sm); } .speaker-line .tier-tag { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); border: 1px solid var(--rule); border-radius: 3px; padding: 0 .35rem; } .speaker-line.derivative { opacity: .6; } .speaker-line.derivative .why { color: var(--stamp); font-family: var(--font-mono); font-size: 11px; } .score-inputs { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-soft); } .score-inputs b { color: var(--text); } /* ============================================================================ * FORMS (contact / suggest additions / custom) * ============================================================================ */ .form-card { max-width: 680px; background: var(--bg-card); border: 1px solid var(--card-border); border-left: 4px solid var(--amber); border-radius: 10px; padding: 1.8rem 1.9rem; box-shadow: var(--shadow-md); } .form-disclaimer { background: var(--bg-strip); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem 1.2rem; font-size: var(--text-sm); color: var(--text-soft); line-height: 1.55; margin-bottom: 1.4rem; } .form-disclaimer strong { color: var(--text); } .field { display: grid; gap: .35rem; margin-bottom: 1rem; } .field > span { font-family: var(--font-chrome); font-weight: 700; font-size: var(--text-sm); } .field .opt { font-weight: 400; color: var(--text-faint); } .field input[type=text], .field input[type=email], .field textarea, .field input:not([type]) { width: 100%; padding: .65rem .8rem; border: 1px solid var(--card-border); border-radius: 6px; background: var(--bg); color: var(--text); font-family: var(--font-chrome); font-size: var(--text-base); } .field textarea { resize: vertical; min-height: 92px; } .field input:focus, .field textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } } .check { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--text-sm); } .suggest-section { border: 1px solid var(--rule); border-radius: 8px; padding: 1.1rem 1.2rem; margin-bottom: 1.2rem; } .suggest-section > legend, .suggest-section > .legend { font-family: var(--font-chrome); font-weight: 800; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; } .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-status { font-size: var(--text-sm); margin-top: .8rem; } .form-status.is-error { color: var(--stamp); font-weight: 700; } .form-status.is-ok { color: var(--signal-deep); font-weight: 700; } .form-consent { font-size: var(--text-xs); color: var(--text-faint); margin: .8rem 0 0; } /* Custom-report source toggles */ .source-toggle-group { border: 1px solid var(--rule); border-radius: 8px; margin-bottom: .8rem; background: var(--bg-card); } .source-toggle-group > summary { cursor: pointer; list-style: none; padding: .9rem 1.2rem; display: flex; align-items: center; gap: .7rem; font-family: var(--font-chrome); font-weight: 700; } .source-toggle-group > summary::-webkit-details-marker { display: none; } .source-toggle-group .grp-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); } .toggle-row { display: flex; align-items: center; gap: .7rem; padding: .5rem 1.2rem; border-top: 1px solid var(--rule-soft); font-size: var(--text-sm); } .toggle-row .src-title { flex: 1; } .toggle-row .src-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } /* switch */ .switch { position: relative; width: 40px; height: 22px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: var(--card-border); border-radius: 999px; transition: background .15s ease; } .switch .track::before { content: ""; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s ease; } .switch input:checked + .track { background: var(--signal); } .switch input:checked + .track::before { transform: translateX(18px); } /* ============================================================================ * STATUS / STUB BLOCKS * ============================================================================ */ .assembling { text-align: center; border: 1px dashed var(--card-border); border-radius: 10px; padding: 2.4rem 1.6rem; background: var(--bg-strip); } .assembling .status-tag { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); border: 1px solid var(--amber); border-radius: 4px; padding: .25rem .6rem; margin-bottom: 1rem; } .assembling p { color: var(--text-soft); max-width: 560px; margin: 0 auto; } /* atmospheric strip */ .atmosphere-strip { height: 220px; overflow: hidden; } .atmosphere-strip img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); } /* ============================================================================ * FOOTER * ============================================================================ */ .site-footer { background: var(--chrome-bg); color: var(--chrome-text); margin-top: 3rem; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem 2rem; } .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.6fr 1fr 1fr 1.6fr; } @media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand { font-family: var(--font-display); font-weight: 900; font-size: var(--text-lg); color: var(--chrome-text); display: inline-flex; align-items: center; gap: .5rem; } .footer-tagline { color: var(--chrome-soft); font-size: var(--text-sm); line-height: 1.6; margin: .8rem 0 0; max-width: 320px; } .footer-heading { font-family: var(--font-chrome); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--chrome-soft); margin: 0 0 .8rem; } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .footer-links a { color: var(--chrome-text); font-size: var(--text-sm); } .footer-links a:hover { color: var(--amber); } .footer-social a { color: var(--chrome-soft); } .footer-social a:hover { color: var(--amber); } .footer-bottom { border-top: 1px solid var(--chrome-rule); margin-top: 2rem; padding-top: 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; } .footer-bottom p { margin: 0; color: var(--chrome-soft); font-size: var(--text-xs); } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: 1rem; } .footer-bottom-links a { color: var(--chrome-soft); font-size: var(--text-xs); } .footer-bottom-links a:hover { color: var(--amber); } .footer-version { font-family: var(--font-mono); font-size: 11px; color: var(--chrome-soft); } /* ============================================================================ * BACK TO TOP * ============================================================================ */ .back-to-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--signal); color: #fff; display: grid; place-items: center; font-size: 20px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease; z-index: var(--z-nav); } .back-to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); } /* reading-page prose */ .prose { max-width: var(--reading-width); margin: 0 auto; } .prose h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: 2.2rem 0 .8rem; } .prose h3 { font-family: var(--font-display); font-size: var(--text-md); margin: 1.6rem 0 .5rem; } .prose p, .prose li { line-height: var(--line-loose); } .prose ul, .prose ol { padding-left: 1.4rem; } .prose li { margin-bottom: .5rem; } .page-head { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem 1rem; } .page-head h1 { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 900; line-height: 1.1; margin: .4rem 0 .6rem; } .page-head .lede { font-size: var(--text-lg); color: var(--text-soft); max-width: 720px; } /* ============================================================================ * ROLLOVER / HOVER INTERACTIONS (house signature: lift + accent glow) * ============================================================================ */ .file-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .file-card::before { transition: background .16s ease, border-color .16s ease; } a.file-card, a.file-card:hover { color: var(--file-ink); } /* don't let the link recolor the card text */ a.file-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--amber); } a.file-card:hover::before { background: var(--amber); border-color: var(--amber); } a.file-card:hover h3 { color: var(--amber); } .feature-item { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .feature-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--signal); } .step { transition: transform .16s ease, box-shadow .16s ease; } .step:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .stat { transition: transform .16s ease, box-shadow .16s ease; } .stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } /* Data page: topic + claim rows respond on rollover */ .topic-group > summary { transition: background .16s ease; } .topic-group > summary:hover { background: var(--bg-strip); } .claim > summary { transition: color .16s ease; } .claim > summary:hover .claim-statement { color: var(--signal-deep); } [data-theme="dark"] .claim > summary:hover .claim-statement { color: var(--signal); } .source-toggle-group > summary { transition: background .16s ease; } .source-toggle-group > summary:hover { background: var(--bg-strip); } /* the enlarged nav logo gets a subtle rollover: scale + amber glow */ .brand-logo { transition: transform .18s ease, filter .18s ease; } .nav-brand:hover .brand-logo { transform: scale(1.06); filter: drop-shadow(0 0 7px rgba(224,165,46,.55)); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }