/* ============================================================ ADEIMANTOS AI — LEGAL PAGES (Terms / Privacy / Cookies) Shared stylesheet. Matches the index.html editorial aesthetic: monochrome, Newsreader + Inter, sharp corners, faint rules. ============================================================ */ :root { /* Color — mirrors index.html exactly */ --bg: #FAFAF9; /* Crisp, warm paper */ --bg-surface: #F3F3F1; --bg-card: #FFFFFF; --ink-strong: #000000; /* Headers and emphasis */ --ink: #222222; /* Body copy */ --ink-muted: #555555; /* Secondary text */ --ink-faint: #888888; /* Borders, meta text */ --rule: #E5E5E5; /* Faint structural lines */ --rule-strong: #000000; /* Bold structural lines */ /* Typography scale — mirrors index.html */ --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem); --text-sm: clamp(0.875rem, 0.83rem + 0.2vw, 0.9375rem); --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); --text-xl: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); --text-2xl: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem); --text-3xl: clamp(2rem, 1.7rem + 1.5vw, 3rem); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* Motion */ --ease: cubic-bezier(0.16, 1, 0.3, 1); --t-fast: 160ms var(--ease); /* Fonts — mirrors index.html. Load Newsreader + Inter in your via fonts.bunny.net (same as index). */ --f-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --f-sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { font-family: var(--f-sans); font-size: var(--text-base); line-height: 1.7; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--ink-strong); color: var(--bg); } a { color: var(--ink-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--ink-faint); transition: text-decoration-color var(--t-fast); } a:hover { text-decoration-color: var(--ink-strong); } /* ============================================================ SKIP LINK ============================================================ */ .skip-link { position: absolute; top: -100px; left: var(--space-4); z-index: 200; padding: 0.75rem 1.25rem; background: var(--ink-strong); color: var(--bg); font-family: var(--f-sans); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; transition: top var(--t-fast); } .skip-link:focus { top: var(--space-4); color: var(--bg); } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(250, 250, 249, 0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); } .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--space-6); max-width: 1100px; margin: 0 auto; } .nav__brand { font-family: var(--f-serif); font-weight: 500; font-size: 1.25rem; color: var(--ink-strong); text-decoration: none; letter-spacing: -0.01em; } .nav__brand:hover { text-decoration: none; } .nav__brand .dot { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--ink-strong); margin-left: 0.35rem; margin-bottom: 0.4rem; vertical-align: middle; } .nav__back { font-family: var(--f-sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; font-weight: 500; transition: color var(--t-fast); } .nav__back:hover { color: var(--ink-strong); text-decoration: none; } /* ============================================================ DOC LAYOUT ============================================================ */ .doc { max-width: 760px; margin: 0 auto; padding: var(--space-16) var(--space-6) var(--space-24); } .doc__eyebrow { font-family: var(--f-sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; margin-bottom: var(--space-5); } .doc__title { font-family: var(--f-serif); font-weight: 400; font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink-strong); margin-bottom: var(--space-6); } .doc__title strong { font-weight: inherit; font-style: italic; } .doc__meta { font-family: var(--f-sans); font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.06em; margin-bottom: var(--space-12); padding-bottom: var(--space-6); border-bottom: 1px solid var(--rule); } .doc__meta strong { color: var(--ink-muted); font-weight: 500; } /* ============================================================ DRAFT NOTICE Editorial-style correction notice — restrained, not garish. ============================================================ */ .doc__draft-notice { background: var(--bg-card); border: 1px solid var(--rule); border-left: 3px solid var(--ink-strong); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-12); font-family: var(--f-sans); font-size: var(--text-sm); color: var(--ink); line-height: 1.65; } .doc__draft-notice strong { display: block; font-family: var(--f-sans); text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--text-xs); margin-bottom: var(--space-2); font-weight: 500; color: var(--ink-strong); } /* ============================================================ TOC ============================================================ */ .doc__toc { background: var(--bg-card); border: 1px solid var(--rule); padding: var(--space-6) var(--space-8); margin-bottom: var(--space-12); } .doc__toc-label { font-family: var(--f-sans); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); font-weight: 500; margin-bottom: var(--space-5); display: block; padding-bottom: var(--space-3); border-bottom: 1px solid var(--rule); } .doc__toc ol { list-style: none; counter-reset: toc; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-6); } .doc__toc li { counter-increment: toc; font-family: var(--f-sans); font-size: var(--text-sm); line-height: 1.5; } .doc__toc li::before { content: counter(toc, lower-roman) "."; font-family: var(--f-serif); font-weight: 500; color: var(--ink-faint); margin-right: 0.5rem; } .doc__toc a { color: var(--ink); text-decoration: none; transition: color var(--t-fast); } .doc__toc a:hover { color: var(--ink-strong); text-decoration: underline; } /* ============================================================ PROSE — long-form legal copy ============================================================ */ .prose { font-family: var(--f-sans); font-size: var(--text-base); line-height: 1.75; color: var(--ink); } .prose h2 { font-family: var(--f-serif); font-weight: 400; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink-strong); margin: var(--space-16) 0 var(--space-5); padding-top: var(--space-8); border-top: 1px solid var(--rule-strong); } .prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .prose h2 strong { font-weight: inherit; font-style: italic; } .prose h2 .num { display: inline-block; font-family: var(--f-sans); font-style: normal; font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-right: var(--space-3); vertical-align: middle; } .prose h3 { font-family: var(--f-sans); font-weight: 500; font-size: var(--text-base); letter-spacing: -0.005em; color: var(--ink-strong); margin: var(--space-8) 0 var(--space-3); } .prose p { margin-bottom: var(--space-5); color: var(--ink); max-width: 68ch; } .prose p strong, .prose li strong { font-weight: 500; /* Softer body bolding, matching index */ color: var(--ink-strong); } .prose ul, .prose ol { margin: 0 0 var(--space-5) var(--space-6); } .prose li { margin-bottom: var(--space-3); max-width: 66ch; } /* Lede — italic serif pull-paragraph, matching index voice */ .prose .lede { font-family: var(--f-serif); font-style: italic; font-weight: 400; font-size: var(--text-lg); line-height: 1.45; color: var(--ink-strong); margin-bottom: var(--space-10); padding-left: var(--space-5); border-left: 1px solid var(--rule-strong); max-width: 60ch; } /* Callout — restrained editorial sidebar */ .prose .callout { background: var(--bg-card); border: 1px solid var(--rule); border-left: 3px solid var(--ink-strong); padding: var(--space-5) var(--space-6); margin: var(--space-6) 0; font-size: var(--text-sm); line-height: 1.65; } .prose .callout strong { display: block; font-family: var(--f-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-strong); font-weight: 500; margin-bottom: var(--space-2); } /* Definition list — clean, ruled left border */ .prose .definition-list { list-style: none; margin-left: 0; } .prose .definition-list li { padding-left: var(--space-5); border-left: 1px solid var(--rule); margin-bottom: var(--space-5); } .prose .definition-list li strong { display: block; font-family: var(--f-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); font-weight: 500; margin-bottom: var(--space-2); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 600px) { .doc__toc ol { grid-template-columns: 1fr; } .doc { padding: var(--space-10) var(--space-5) var(--space-16); } .doc__toc { padding: var(--space-5) var(--space-6); } } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--bg); border-top: 1px solid var(--rule-strong); padding: var(--space-12) 0 var(--space-8); } .footer__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); font-family: var(--f-sans); font-size: var(--text-xs); color: var(--ink-faint); letter-spacing: 0.04em; } .footer__inner a { color: var(--ink-muted); text-decoration: none; transition: color var(--t-fast); } .footer__inner a:hover { color: var(--ink-strong); text-decoration: underline; } .footer__legal { color: var(--ink-muted); } .footer__links { display: flex; gap: var(--space-5); flex-wrap: wrap; }