/* Assay — static site styles Brand: Medici house system — true-black canvas, Electric Blue lead, Gold sparing. The site reads as a certificate of verification: the octagonal assay stamp is the signature device. Typography and the stamp motif carry the identity; everything else stays quiet. (Ref: option-index-tracker/docs/brand-guide.md §3, §6.) */ /* ---------- Fonts (self-hosted, latin subset, variable, SIL OFL) ---------- Paths are relative to THIS file (public/assets/site.css) → public/assets/fonts/. */ @font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/eb-garamond-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/inter-latin.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); } /* ---------- Theme system ---------- Two complete themes. Every color reference below goes through a variable; both themes define the full set, so neither has a hardcoded-only color. The initial data-theme is set pre-paint by an inline script (localStorage 'assay-theme' → else prefers-color-scheme). The blocks below also cover the no-JS case: default :root = light, a media query flips to dark when the system prefers it and no explicit choice is present. */ :root { /* Non-color design tokens (theme-independent) */ --font-heading: 'EB Garamond', 'Georgia', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace; --radius: 8px; --max-width: 960px; --step: 8px; /* spacing rhythm unit */ } /* Dark — the Medici true-black surface */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0A0A0A; --color-surface: #12151C; --color-surface-2: #171A22; --color-border: #262A33; --color-border-soft: #1E222A; --color-text: #F5F5F5; --color-text-sec: #AAB1BD; --color-text-muted: #838B98; --color-faint: #6E7684; --color-legal: #7E8794; --color-accent: #3366FF; /* Electric Blue — frames, buttons */ --color-accent-text: #6E90FF; /* lifted for AA on black */ --color-accent-hover:#2E5AE6; /* darkens on hover; keeps white-ink AA */ --color-blue-tint: rgba(51, 102, 255, 0.08); --color-blue-line: rgba(51, 102, 255, 0.28); --color-gold: #D4A843; /* fineness/stamp punch — used sparingly */ --color-gold-tint: rgba(212, 168, 67, 0.12); --header-bg: rgba(10, 10, 10, 0.85); --hero-glow: rgba(51, 102, 255, 0.10); --mark-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } /* Light — the brand light-document palette (ink is near-black, never #000) */ :root, :root[data-theme="light"] { color-scheme: light; --color-bg: #FFFFFF; --color-surface: #F5F6F8; --color-surface-2: #EEF0F3; --color-border: #E4E7EC; /* hairline */ --color-border-soft: #EDEFF2; --color-text: #1A1D26; /* ink */ --color-text-sec: #5B6472; /* muted */ --color-text-muted: #667085; /* AA-safe small-text grey */ --color-faint: #8A93A3; /* faint — decorative only */ --color-legal: #667085; --color-accent: #3366FF; /* Electric Blue — frames, buttons */ --color-accent-text: #2B54D4; /* darkened for AA on white */ --color-accent-hover:#1A3DAA; --color-blue-tint: rgba(51, 102, 255, 0.07); --color-blue-line: rgba(51, 102, 255, 0.22); --color-gold: #B5851F; /* deepened so the stamp punch reads on white */ --color-gold-tint: rgba(181, 133, 31, 0.12); --header-bg: rgba(255, 255, 255, 0.85); --hero-glow: rgba(51, 102, 255, 0.08); --mark-shadow: 0 10px 30px rgba(26, 29, 38, 0.18); } /* No-JS auto-detect: honor the system preference when no explicit choice is set. (When JS is on, the inline head script always sets data-theme, so this is a progressive-enhancement fallback.) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #0A0A0A; --color-surface: #12151C; --color-surface-2: #171A22; --color-border: #262A33; --color-border-soft: #1E222A; --color-text: #F5F5F5; --color-text-sec: #AAB1BD; --color-text-muted: #838B98; --color-faint: #6E7684; --color-legal: #7E8794; --color-accent: #3366FF; --color-accent-text: #6E90FF; --color-accent-hover:#2E5AE6; --color-blue-tint: rgba(51, 102, 255, 0.08); --color-blue-line: rgba(51, 102, 255, 0.28); --color-gold: #D4A843; --color-gold-tint: rgba(212, 168, 67, 0.12); --header-bg: rgba(10, 10, 10, 0.85); --hero-glow: rgba(51, 102, 255, 0.10); --mark-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; overflow-x: hidden; /* belt-and-braces: no page-level horizontal scroll */ } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; color: var(--color-text); line-height: 1.2; overflow-wrap: break-word; } h1 { font-size: 2.75rem; letter-spacing: -0.01em; } h2 { font-size: 1.75rem; margin: 2.5rem 0 1rem; } h3 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; } h4 { font-size: 1rem; margin: 1rem 0 0.5rem; } p { margin: 0.75rem 0; } p + p { margin-top: 0.5rem; } a { color: var(--color-accent-text); text-decoration: none; } a:hover { text-decoration: underline; color: var(--color-accent-hover); } /* Visible keyboard focus everywhere (a11y floor) */ a:focus-visible, .btn:focus-visible, summary:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 3px; border-radius: 3px; } pre, code { font-family: var(--font-mono); font-size: 0.875rem; } code { background: var(--color-surface); padding: 0.15em 0.4em; border-radius: 4px; color: var(--color-text); border: 1px solid var(--color-border-soft); overflow-wrap: break-word; } pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; line-height: 1.5; } pre code { background: none; padding: 0; border: 0; } ul, ol { margin: 0.75rem 0; padding-left: 1.5rem; } li { margin: 0.25rem 0; } strong { color: var(--color-text); font-weight: 600; } /* ---------- Header ---------- */ .site-header { border-bottom: 1px solid var(--color-border); padding: 1.25rem 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; background: var(--header-bg); backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 10; } .site-header .brand { display: flex; align-items: center; gap: 0.75rem; } .site-header .brand img { height: 36px; width: 36px; display: block; } .site-header .brand a { font-family: var(--font-heading); font-weight: 600; font-size: 1.25rem; color: var(--color-text); text-decoration: none; letter-spacing: -0.01em; } .site-header .brand a:hover { color: var(--color-accent-text); text-decoration: none; } .site-header nav { display: flex; gap: 1.5rem; flex-wrap: wrap; } .site-header nav a { color: var(--color-text-sec); font-size: 0.9rem; font-weight: 500; padding: 0.25rem 0; border-bottom: 1px solid transparent; } .site-header nav a:hover { color: var(--color-text); text-decoration: none; border-bottom-color: var(--color-accent); } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin-left: 0.35rem; background: transparent; border: 1px solid var(--color-border); border-radius: 8px; color: var(--color-text-sec); cursor: pointer; transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out; } .theme-toggle:hover { color: var(--color-text); border-color: var(--color-accent); background: var(--color-surface); } .theme-toggle svg { width: 18px; height: 18px; display: block; } /* Show the icon of the theme you'll switch TO; base = moon (light-theme look), no-JS safe */ .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } /* ---------- Layout ---------- */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; } /* ---------- Hero (the signature: the stamp on a certificate field) ---------- */ .hero { text-align: center; padding: 4.5rem 1.5rem 3.5rem; background: radial-gradient(120% 80% at 50% 0%, var(--hero-glow), transparent 60%), var(--color-bg); border-bottom: 1px solid var(--color-border); position: relative; } .hero .assay-mark { height: 88px; width: 88px; margin-bottom: 1.5rem; border-radius: 20px; box-shadow: 0 0 0 1px var(--color-border), var(--mark-shadow); /* one deliberate motion moment: the stamp presses down once on load */ animation: assay-stamp 520ms cubic-bezier(0.2, 0.75, 0.25, 1) both; } @keyframes assay-stamp { 0% { transform: scale(1.35); opacity: 0; } 55% { transform: scale(0.95); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .hero h1 { font-size: 3rem; margin-bottom: 0.75rem; letter-spacing: -0.02em; } .hero .subtitle { font-size: 1.15rem; color: var(--color-text-sec); max-width: 640px; margin: 0 auto 2rem; line-height: 1.55; } .hero .cta-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.75rem 1.5rem; font-size: 0.9rem; font-weight: 600; border-radius: var(--radius); text-decoration: none; transition: background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out; font-family: var(--font-body); cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--color-accent); color: #FFFFFF; } .btn-primary:hover { background: var(--color-accent-hover); color: #FFFFFF; } .btn-secondary { background: transparent; border: 1px solid var(--color-border); color: var(--color-text); } .btn-secondary:hover { border-color: var(--color-accent); color: var(--color-accent-text); } /* ---------- Panels ---------- */ .panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin: 3rem 0; } .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem; transition: border-color 150ms ease-out, background 150ms ease-out; } .panel h3 { font-size: 1.2rem; margin: 0 0 0.75rem; color: var(--color-accent-text); } .panel p { color: var(--color-text-sec); font-size: 0.95rem; margin: 0; } a.panel:hover { background: var(--color-surface-2); border-color: var(--color-accent); } /* ---------- Honest-framing block (candor is load-bearing — keep it legible) ---------- */ .honest-framing { background: var(--color-blue-tint); border: 1px solid var(--color-blue-line); border-radius: var(--radius); padding: 1.75rem 2rem; margin: 2.5rem 0; } .honest-framing h2 { margin-top: 0; font-size: 1.3rem; border-bottom: 0; padding-left: 0; } .honest-framing h2::before { display: none; } .honest-framing p { color: var(--color-text-sec); font-size: 0.97rem; line-height: 1.6; } .honest-framing strong { color: var(--color-text); } /* ---------- Content sections (scoped so the hero never inherits these) ---------- */ .container section, .explainer-main section { margin: 3rem 0; } .container section h2, .explainer-main section h2 { border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; position: relative; } /* the stamp punch: a small gold octagon marks each section heading */ .container section h2::before, .explainer-main section h2::before { content: ''; display: inline-block; width: 11px; height: 11px; margin-right: 0.6rem; background: var(--color-gold); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); vertical-align: baseline; position: relative; top: 1px; } /* ---------- Quickstart steps (a genuine 1..6 sequence — ordinals are earned) ---------- */ .quickstart-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .step { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; } .step .num { display: inline-flex; align-items: center; justify-content: center; background: var(--color-blue-tint); color: var(--color-accent-text); border: 1px solid var(--color-blue-line); width: 30px; height: 30px; border-radius: 7px; font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; margin-bottom: 0.75rem; } .step h4 { margin: 0 0 0.5rem; font-size: 1.05rem; } .step p, .step pre { font-size: 0.85rem; margin: 0.25rem 0; } .step pre { padding: 0.5rem 0.75rem; } /* ---------- Article slots ---------- */ .article-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 1.5rem 0; } .slot { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem; } .slot h4 { margin: 0 0 0.5rem; font-size: 1rem; } .slot p { color: var(--color-text-sec); font-size: 0.9rem; margin: 0; } .slot .coming { color: var(--color-text-muted); font-style: italic; font-size: 0.85rem; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--color-border); padding: 2.5rem 1.5rem; margin-top: 4rem; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; } .site-footer p { margin: 0.25rem 0; } .site-footer a { color: var(--color-text-muted); } .site-footer a:hover { color: var(--color-accent-text); } .legal { font-size: 0.6875rem; line-height: 1.6; color: var(--color-legal); max-width: 780px; margin-left: auto; margin-right: auto; } .legal + .legal { margin-top: 10px; } /* ---------- Utilities ---------- */ a.panel, a.panel:hover { text-decoration: none; } .articles-note { color: var(--color-text-muted); font-size: 0.85rem; } .back-home { margin-top: 2.5rem; } /* Lifecycle diagram — a real sequence; render as a mono stamp strip that scrolls on small screens */ .lifecycle-diagram { font-size: 1.05rem; text-align: center; padding: 1.5rem 1.25rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); white-space: nowrap; } .lifecycle-diagram .arrow, .lifecycle-diagram { } /* ---------- Explainer pages ---------- */ .explainer-main { max-width: 760px; margin: 0 auto; padding: 3rem 1.5rem; } .explainer-main > h1 { font-size: 2.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.75rem; } .explainer-main > p:first-of-type { color: var(--color-text-sec); font-size: 1.05rem; } /* ---------- Info / note blocks ---------- */ .note { background: var(--color-surface); border-left: 3px solid var(--color-accent); padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 var(--radius) var(--radius) 0; font-size: 0.95rem; color: var(--color-text-sec); } .note strong { color: var(--color-text); } /* ---------- Tables (wrapped in .table-wrap for horizontal scroll on small screens) ---------- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border-radius: var(--radius); } table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .table-wrap table { margin: 0; } thead th { font-family: var(--font-body); font-weight: 500; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; } tbody td { padding: 0.75rem; border-bottom: 1px solid var(--color-border-soft); color: var(--color-text-sec); vertical-align: top; } tbody td strong { color: var(--color-text); } tbody tr:hover { background: var(--color-surface); } /* ---------- Responsive ---------- */ @media (max-width: 700px) { /* Header: unstick and stack so a wrapped nav never eats the viewport */ .site-header { position: static; flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1.1rem; } .site-header nav { width: 100%; gap: 0.15rem 1rem; flex-wrap: wrap; } .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; } .theme-toggle { width: 44px; height: 44px; margin-left: 0; } } @media (max-width: 640px) { h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } .hero { padding: 3rem 1.25rem 2.25rem; } .hero h1 { font-size: 2.1rem; } .hero .subtitle { font-size: 1.05rem; } .hero .assay-mark { height: 76px; width: 76px; } .hero .cta-row { flex-direction: column; align-items: stretch; } .hero .cta-row .btn { width: 100%; } .explainer-main { padding: 2rem 1.25rem; } .explainer-main > h1 { font-size: 2rem; } .panels { gap: 1rem; margin: 2rem 0; } .panel { padding: 1.35rem; } .honest-framing { padding: 1.35rem 1.25rem; } .container section, .explainer-main section { margin: 2.25rem 0; } } @media (max-width: 380px) { body { font-size: 15px; } .hero h1 { font-size: 1.9rem; } } /* ---------- Reduced motion (a11y floor) ---------- */ @media (prefers-reduced-motion: reduce) { .hero .assay-mark { animation: none; } * { transition: none !important; } }