/* ═══════════════════════════════════════════════════════════════════════════ base.css — shared base styles for public_base.html (tokens, reset, container, nav, footer, buttons). Page-specific styles load AFTER this file. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Unified palette: navy throughout via */ --tg-blue: #2A5CDF; --tg-blue-light: #5BB6FF; --tg-blue-soft: #E3ECFF; --navy: #0F1B3D; --navy-2: #162553; --navy-3: #172655; --navy-line: rgba(255,255,255,.08); --ink: #14213D; --ink-soft: #4B5572; --ink-mute: #7C8499; --paper: #FFFFFF; --bg: #F4F6FA; --line: #E4E8F0; --line-soft: #EEF1F6; --mint: #D6F3E5; --uc-teal: #0EA68D; --uc-blue: #2A5CDF; --uc-sky: #3E8FE8; --uc-violet: #7C5CFF; --uc-indigo: #5B7FE5; --uc-cyan: #1AA8D2; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; overflow-x: hidden; overflow-x: clip; } body { min-width: 320px; } body { font-family: 'Manrope', system-ui, -apple-system, sans-serif; color: var(--ink); background-color: var(--navy); background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px), radial-gradient(1000px 450px at 80% 6%, rgba(91,182,255,.18), transparent 55%), radial-gradient(900px 500px at 8% 22%, rgba(124,92,255,.14), transparent 55%), radial-gradient(900px 500px at 90% 55%, rgba(42,92,223,.14), transparent 60%); background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%; background-repeat: repeat, no-repeat, no-repeat, no-repeat; -webkit-font-smoothing: antialiased; line-height: 1.5; } h1, h2, h3, h4, p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ───────── Skip link ───────── */ .skip-link { position: absolute; top: -100%; left: 8px; background: var(--tg-blue); color: #fff; padding: 8px 16px; border-radius: 0 0 8px 8px; font-size: 13px; font-weight: 600; z-index: 9999; } .skip-link:focus { top: 0; } /* ───────── Focus styles ───────── */ :focus-visible { outline: 2px solid #5BB6FF; outline-offset: 3px; border-radius: 4px; } .btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* ───────── Layout ───────── */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); } /* ───────── Top nav ───────── */ .nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; padding: 24px clamp(16px, 4vw, 32px); color: #fff; } .nav-logo { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-size: clamp(15px, 1.5vw, 17px); font-weight: 800; letter-spacing: -.01em; } .nav-logo img { height: clamp(24px, 2.4vw, 30px); width: auto; display: block; filter: drop-shadow(0 0 12px rgba(91,182,255,.25)); } .nav-links { display: flex; gap: 6px; } .nav-link { padding: 8px 14px; border-radius: 10px; font-size: clamp(12px, 1.2vw, 13px); font-weight: 500; color: rgba(255,255,255,.85); transition: background .15s; } .nav-link:hover { background: rgba(255,255,255,.1); } .nav-link.is-active { background: rgba(91,182,255,.12); color: var(--tg-blue-light); } @media (max-width: 720px) { .nav { display: none; } } /* ───────── Desktop sticky nav ───────── position: sticky so the nav travels with the scroll and locks at top: 0. When JS adds .is-floating (scroll > 80% of nav height), it transitions to a glass card at top: 10px with border-radius and backdrop-filter. The subtle ring border is always present so the transition feels continuous. */ @media (min-width: 721px) { .nav { position: sticky; top: 0; z-index: 20; border-radius: 0; box-shadow: 0 0 0 1px transparent, 0 0 0 rgba(8,14,36,0); transition: top .35s ease, background .35s ease, border-radius .35s ease, box-shadow .1s ease; } .nav.is-floating { top: 10px; background: rgba(15, 27, 61, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 14px; box-shadow: 0 0 0 1px var(--navy-line), 0 8px 24px rgba(8, 14, 36, .35); transition: top .35s ease, background .35s ease, border-radius .35s ease, box-shadow .2s ease .3s; } .nav .nav-progress { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; opacity: 0; transition: opacity .35s ease; } .nav.is-floating .nav-progress { opacity: 1; } .nav .nav-progress path { fill: none; stroke: var(--tg-blue-light); stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: var(--scroll-dash, 0.02) 1; transition: stroke-dasharray .1s linear; filter: drop-shadow(0 0 4px rgba(91,182,255,.55)); } } @media (min-width: 721px) and (prefers-reduced-motion: reduce) { .nav { transition: background .25s ease, box-shadow .25s ease, border-radius .25s ease; } } /* ───────── Section nav ───────── Mobile-only floating pill. Title is set per page (and updated by scroll-spy on the landing page). Two SVG arcs fill from center-top — right arc clockwise, left arc counter-clockwise — bound to --scroll-progress on . Paths are generated in JS so they track the live width/height of the pill. */ .section-nav { display: none; position: fixed; top: 10px; z-index: 20; transition: opacity .2s ease; } .section-nav-collapse { position: relative; background: rgba(15, 27, 61, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--navy-line); border-radius: 14px; padding: 6px 10px; box-shadow: 0 8px 24px rgba(8, 14, 36, .35); color: #fff; } .section-nav-collapse > summary { display: flex; align-items: center; gap: 8px; list-style: none; cursor: pointer; user-select: none; min-height: 32px; } .section-nav-collapse > summary::-webkit-details-marker { display: none; } .section-nav-collapse > summary::marker { content: ''; } .section-nav-home { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .section-nav-home img { width: 22px; height: auto; display: block; filter: drop-shadow(0 0 6px rgba(91,182,255,.3)); } .section-nav-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); } .section-nav-chevron { color: rgba(255,255,255,.5); flex-shrink: 0; transition: transform .2s ease; } .section-nav-collapse[open] .section-nav-chevron { transform: rotate(180deg); } .section-nav-progress { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; } .section-nav-progress path { fill: none; stroke: var(--tg-blue-light); stroke-width: 1.5; stroke-linecap: butt; stroke-dasharray: var(--scroll-dash, 0.02) 1; transition: stroke-dasharray .3s linear; filter: drop-shadow(0 0 4px rgba(91,182,255,.55)); } @media (prefers-reduced-motion: reduce) { .section-nav-progress path { transition: none; } } .section-nav-links { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; } .section-nav-links a { display: block; padding: 8px 10px; border-left: 2px solid transparent; border-radius: 0 8px 8px 0; font-size: 13px; color: rgba(255,255,255,.65); transition: color .15s ease, background .15s ease, border-color .15s ease; } .section-nav-links a:hover { color: #fff; background: rgba(255,255,255,.04); } .section-nav-links a.is-active { color: var(--tg-blue-light); border-left-color: var(--tg-blue-light); background: rgba(91,182,255,.08); } .section-nav-divider { display: block; height: 1px; background: var(--navy-line); margin: 6px 10px; } /* Cross-page quick links displayed as a single horizontal row above the in-page TOC. Used on long-form pages (legal + blog posts). */ .section-nav-quick { display: flex; gap: 4px; margin-bottom: 2px; } .section-nav-quick a { flex: 1; text-align: center; padding: 8px 6px; border-left: 0; border-radius: 8px; background: rgba(255,255,255,.04); font-size: 12px; font-weight: 500; color: rgba(255,255,255,.75); } .section-nav-quick a:hover { background: rgba(255,255,255,.1); color: #fff; } /* Mobile: pill is full-width, .nav is gone */ @media (max-width: 720px) { .section-nav { display: block; left: 12px; right: 12px; opacity: .8; } .section-nav.is-prominent, .section-nav:has([data-section-nav][open]) { opacity: 1; } } /* ───────── Buttons ───────── */ .btn-primary { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #5BB6FF 0%, var(--tg-blue) 100%); color: #fff; border: none; padding: 14px 22px; border-radius: 12px; font-size: clamp(14px, 1.5vw, 15px); font-weight: 700; box-shadow: 0 10px 30px rgba(42,92,223,.4); transition: transform .15s, box-shadow .15s; } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(42,92,223,.5); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); padding: 13px 18px; border-radius: 12px; font-size: clamp(13px, 1.4vw, 14px); font-weight: 600; } .btn-ghost:hover { background: rgba(255,255,255,.14); } /* ───────── Footer ───────── */ .footer { background: var(--navy); color: rgba(255,255,255,.65); padding: clamp(40px, 6vw, 64px) 0 clamp(20px, 3vw, 32px); } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid rgba(255,255,255,.08); } .footer-cta { margin-top: 18px; } @media (max-width: 720px) { .footer-top { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 4vw, 32px); row-gap: clamp(28px, 6vw, 40px); } .footer-brand { grid-column: 1 / -1; text-align: center; } .footer-brand p { margin-left: auto; margin-right: auto; } .footer-cta { margin: clamp(24px, 5vw, 32px) 0 clamp(20px, 5vw, 28px); } .footer { padding-top: clamp(20px, 3vw, 32px); } .footer-col { padding-right: clamp(8px, 2vw, 14px); padding-left: calc(clamp(28px, 6vw, 36px) - clamp(16px, 4vw, 32px)); } .footer-col + .footer-col { border-left: 1px solid rgba(255,255,255,.08); padding-left: clamp(28px, 6vw, 36px); } .footer-bottom { flex-direction: column; justify-content: center; text-align: center; gap: 10px; } .footer-bottom-links { justify-content: center; } } .footer-brand h3 { color: #fff; font-size: clamp(20px, 2vw, 22px); font-weight: 800; margin-bottom: 10px; } .footer-brand p { font-size: clamp(13px, 1.3vw, 14px); line-height: 1.6; max-width: 320px; } .footer-col h4 { color: #fff; font-size: clamp(12px, 1.2vw, 13px); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; } .footer-col a { display: block; font-size: clamp(13px, 1.3vw, 14px); padding: 6px 0; transition: color .15s; } .footer-col a:hover { color: #fff; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: clamp(12px, 1.2vw, 13px); flex-wrap: wrap; gap: 12px; } .footer-bottom-links { display: flex; flex-wrap: wrap; gap: clamp(12px, 2vw, 20px); } /* ───────── Mobile helper ───────── */ br.mob { display: none; } @media (max-width: 640px) { br.mob { display: initial; } .mob-break::before { content: "\A"; white-space: pre; } }