/* Base styles shared by every page. * * Load order: tokens.css -> base.css -> one page stylesheet (home / learn / * privacy). Anything here must be safe on all pages; page-specific rules * belong in the page stylesheet. * * The Geist webfont is loaded via in each page's , not @import, * so the font request starts in parallel with the stylesheet instead of * queuing behind it. */ html { background: var(--gray-50); /* fallback behind the body gradient */ height: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-x: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } ::selection { background: var(--primary-light); color: var(--gray-900); } body { font-family: 'Geist', sans-serif; font-size: clamp(16px, 1.2vw, 18px); background: var(--bg-gradient-main); background-attachment: fixed; color: var(--text-primary); min-height: 100vh; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; overflow-x: hidden; overscroll-behavior-x: none; touch-action: pan-y pinch-zoom; } /* Layout ------------------------------------------------------------------ */ /* Legacy sidebar slot. Collapsed to nothing but kept because every page's markup still contains #left; removing it would mean editing all pages. */ #left { height: 1px; display: none; min-width: 0; overflow: hidden; width: 0; margin: 0; padding: 0; } #content { margin-top: 0; margin-left: auto; margin-right: auto; float: none; width: min(1100px, 100%); padding: 0 24px; box-sizing: border-box; } /* Clears the fixed navbar. */ #content .page { padding-top: 90px; } /* Typography -------------------------------------------------------------- */ #content h1, #content h2, #content h3 { font-family: 'Geist', sans-serif; margin: 0; color: var(--primary-light); font-weight: 600; } #content h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--text-primary); line-height: 1.25; margin-bottom: 0.4rem; } #content h2 { margin-top: 1em; } #content h3 { color: var(--text-secondary); margin-top: 0.85em; } #content p, #content ul, #content ol, #content blockquote { color: var(--text-primary); line-height: 1.6; } hr { border: none; border-top: 2px solid var(--border-light); margin: var(--space-6) 0; } /* Links ------------------------------------------------------------------- */ a, a:visited, a:active { color: var(--primary); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--primary-light); text-decoration: underline; } /* Navbar ------------------------------------------------------------------ */ .navbar { display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; right: 0; width: 100%; transform: none; box-sizing: border-box; z-index: 1000; background: rgba(4, 13, 23, 0.92); padding: var(--space-4) 24px; margin-bottom: var(--space-6); border-bottom: 2px solid var(--border-light); height: 50px; /* fixed, to avoid layout shift on load */ backface-visibility: visible; will-change: auto; perspective: none; -webkit-font-smoothing: subpixel-antialiased; } .nav-logo { font-size: 1.5rem; font-weight: bold; color: var(--gray-800); text-decoration: none; background: var(--primary-gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: flex; align-items: center; height: 100%; } .nav-logo img { height: 30px; width: auto; margin-right: 20px; display: block; backface-visibility: hidden; transform: translateZ(0); -webkit-font-smoothing: subpixel-antialiased; } .nav-links { display: flex; align-items: center; gap: 1.25rem; } .nav-links a { color: var(--gray-800); font-size: 14px; text-decoration: none; } .nav-links a:hover { color: var(--primary-light); text-decoration: none; } .nav-links .nav-cta { padding: 0.4rem 0.9rem; border-radius: 999px; background: var(--primary-gradient); color: var(--gray-900); font-weight: 600; } .nav-links .nav-cta:hover { color: var(--gray-900); opacity: 0.9; } /* Footer ------------------------------------------------------------------ */ .site-footer { text-align: center; /* NOTE: this rule previously read `padding: var(--space-3) 0 var(--space-3)`, but --space-3 was never defined. An undefined custom property makes the whole declaration invalid at computed-value time, so the padding has always resolved to 0. Kept at 0 here to preserve the current appearance. To restore the evidently intended spacing, add a --space-3 token and use it — that is a deliberate visual change, not a refactor. */ padding: 0; color: var(--text-muted); font-size: 0.85rem; border-top: 1px solid var(--border-light); margin-top: var(--space-4); } /* Responsive -------------------------------------------------------------- */ @media (max-width: 768px) { body { font-size: 17px; } #left { display: none; width: 0; } #content { float: none; width: auto; margin: 0; padding: 0 16px; } .navbar { height: auto; flex-wrap: wrap; gap: 8px; width: 100%; padding-left: 16px; padding-right: 16px; } .nav-links { gap: 8px; flex-wrap: wrap; } .nav-logo img { height: 24px; margin-right: 12px; } }