/* ============================================================================ Blinta — shared UI layer ---------------------------------------------------------------------------- Loaded AFTER /styles.css on every user-facing page. It carries the design language introduced on the landing page (/home.css) across the rest of the site without rewriting each page's markup. Two mechanisms do most of the work: 1. It redefines the :root tokens that styles.css already consumes (--text, --muted, --card, --border, --accent), so several thousand existing rules pick up the new palette for free. 2. It restyles the ~25 shared primitives every page is composed from (.panel, .link-btn, .section-title, the sidebar, the quick rail, the footer, tables and form controls). Page-specific layouts are intentionally left alone; they inherit from the above. Equal-specificity overrides rely on load order, so this file must stay after styles.css in the . ========================================================================= */ :root { /* --- Tokens styles.css already consumes (remapped) --- */ --text: #f4f2ee; /* warm off-white, never pure #fff */ /* Warm equivalent of the old #888. Kept at that brightness on purpose: styles.css uses --muted for real secondary copy, not just decorative labels, so dimming it to --paper-mute costs readability. */ --muted: #8a8781; --bg1: #050507; --bg2: #0a0a0c; --card: #0c0c10; --border: rgba(255, 255, 255, 0.07); --accent: #e61c24; /* --- New tokens --- */ --ink-900: #050507; --ink-800: #0c0c10; --ink-700: #121218; --ink-600: #191921; --paper: #f4f2ee; --paper-dim: #a3a09b; --paper-mute: #6d6a66; --paper-ghost: #37363a; --red: #e61c24; --red-hot: #ff3b43; --red-deep: #8f0f15; --gold: #c9a961; --gold-lt: #ecd9a8; --line: rgba(255, 255, 255, 0.07); --line-mid: rgba(255, 255, 255, 0.13); --line-hot: rgba(255, 255, 255, 0.24); --display: "Anton", "Arial Narrow", sans-serif; --sans: "Space Grotesk", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace; /* App pages run full-bleed rather than in the landing page's centred column, so the shared header (nav.css uses --shell) spans the viewport here. */ --shell: 100%; --notch: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); --notch-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); --ease: cubic-bezier(0.16, 1, 0.3, 1); } /* ============================================================================ Base ========================================================================= */ body { background: var(--ink-900); color: var(--paper); } /* Film grain. Applied via a pseudo-element so no page markup has to change. */ body::after { content: ""; position: fixed; inset: -50%; z-index: 9999; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: uiGrain 700ms steps(1) infinite; } @keyframes uiGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(1%, -2%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(2%, 1%); } } ::selection { background: var(--red); color: #fff; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ============================================================================ Typography ========================================================================= */ h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; text-transform: uppercase; color: var(--paper); } h1 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 0.98; } h2 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.02; } h3, h4 { font-family: var(--sans); font-weight: 600; color: var(--paper); letter-spacing: 0.01em; } .section-title { font-family: var(--display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--paper); } .helper { color: var(--muted); font-size: 0.9rem; line-height: 1.65; } a { color: var(--red-hot); } a:hover { color: var(--red-hot); } /* Long-form legal copy (terms, privacy) keeps sentence-case body headings. Condensed uppercase display type hurts scanning across 38 headings, and these pages are read, not skimmed. */ .tos-panel h1, .tos-panel h2, .tos-panel h3 { font-family: var(--sans); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--paper); } .tos-panel h1 { font-size: 1.55rem; } .tos-panel h2 { font-size: 1.12rem; } .tos-panel h3 { font-size: 0.98rem; } /* Small uppercase mono labels — the workhorse of the new look */ .eyebrow { font-family: var(--mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; color: var(--paper-mute); } /* ============================================================================ Buttons ========================================================================= */ .link-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; clip-path: var(--notch-sm); border: 0; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px var(--line-mid); color: var(--paper); font-family: var(--mono); font-size: 0.71rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.62rem 1.1rem; overflow: hidden; isolation: isolate; transition: background 0.25s ease, transform 0.25s var(--ease), box-shadow 0.25s ease; } .link-btn:hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px var(--line-hot); color: var(--paper); transform: translateY(-2px); } .link-btn:active { transform: translateY(0); } /* Primary treatment for the affirmative action in a row */ .link-btn.is-primary, .link-btn[data-variant="primary"], button[type="submit"], .side-footer-button-link { background: var(--red); box-shadow: none; color: #fff; } button[type="submit"]:hover, .link-btn.is-primary:hover, .side-footer-button-link:hover { background: var(--red-hot); box-shadow: none; color: #fff; } /* Light sweep, shared by every notched button */ .link-btn::after, .buttonupgrade::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.3) 50%, transparent 62%); transform: translateX(-130%); transition: transform 0.75s var(--ease); } .link-btn:hover::after, .buttonupgrade:hover::after { transform: translateX(130%); } button { font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; font-weight: 600; border-radius: 0; } /* Premium upsell button — the one gold element in the chrome */ .buttonupgrade, .upgrade-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; clip-path: var(--notch-sm); border-radius: 0; border: 0; background: linear-gradient(135deg, var(--gold-lt), var(--gold) 55%, #a8873f); color: #17130a; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; padding: 0.62rem 1rem; overflow: hidden; isolation: isolate; text-decoration: none; transition: background 0.25s ease, transform 0.25s var(--ease); } .buttonupgrade:hover, .upgrade-link:hover { background: linear-gradient(135deg, #fff0cf, var(--gold-lt) 55%, var(--gold)); color: #17130a; transform: translateY(-2px); } .buttonupgrade svg, .upgrade-link svg { width: 15px; height: auto; fill: currentColor; } /* ============================================================================ Panels ========================================================================= */ .panel { border: 0; border-radius: 0; clip-path: var(--notch); background: linear-gradient(165deg, var(--ink-700), var(--ink-800)); box-shadow: inset 0 0 0 1px var(--line); padding: 1.35rem; } .lol-panel { background: radial-gradient(ellipse 80% 60% at 0% 0%, rgba(201, 169, 97, 0.08), transparent 62%), linear-gradient(165deg, var(--ink-700), var(--ink-800)); box-shadow: inset 0 0 0 1px rgba(201, 169, 97, 0.22); } /* ============================================================================ Form controls ========================================================================= */ label { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-mute); } input, select, textarea { border-radius: 0; clip-path: var(--notch-sm); border: 0; box-shadow: inset 0 0 0 1px var(--line-mid); background: rgba(255, 255, 255, 0.03); color: var(--paper); font-family: var(--sans); font-size: 0.94rem; padding: 0.72rem 0.85rem; transition: box-shadow 0.2s ease, background 0.2s ease; } input:focus, select:focus, textarea:focus { outline: none; background: rgba(255, 255, 255, 0.055); box-shadow: inset 0 0 0 1px var(--red); } input::placeholder, textarea::placeholder { color: #4d4a46; } /* ============================================================================ Site chrome — layout only ---------------------------------------------------------------------------- nav.js rebuilds the