/* PagePod — Web Brand carried from the app: cool minimal, Safari-Reader clean. Newsreader serif for reading; system sans for chrome. One calm purple accent. */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&display=swap'); :root { /* neutrals — cool near-white / soft ink */ --bg: oklch(0.984 0.004 245); --surface: oklch(1 0 0); --surface-2: oklch(0.966 0.005 245); --surface-3: oklch(0.945 0.006 245); --ink: oklch(0.265 0.015 262); --ink-2: oklch(0.485 0.012 262); --ink-3: oklch(0.625 0.010 262); --ink-4: oklch(0.74 0.008 262); --line: oklch(0.918 0.005 255); --line-2: oklch(0.948 0.004 255); /* one quiet accent — calm purple-blue */ --accent: oklch(0.575 0.118 210); --accent-press:oklch(0.515 0.118 210); --accent-ink: oklch(0.46 0.12 210); --accent-soft: oklch(0.965 0.024 210); --accent-line: oklch(0.90 0.045 210); --good: oklch(0.60 0.10 158); --good-soft: oklch(0.95 0.035 158); /* dark surfaces (briefs / player / hero accents) */ --d-bg: oklch(0.205 0.014 264); --d-surface: oklch(0.255 0.015 264); --d-ink: oklch(0.965 0.004 260); --d-ink-2: oklch(0.74 0.012 260); --d-ink-3: oklch(0.58 0.012 260); --d-line: oklch(0.36 0.014 264); --d-accent: oklch(0.70 0.115 210); --ui: -apple-system, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", Arial, sans-serif; --read: "Newsreader", Georgia, "Times New Roman", serif; --r-card: 20px; --r-lg: 28px; --shadow-sm: 0 0.5px 1px rgba(20,28,40,0.04); --shadow-md: 0 1px 2px rgba(20,28,40,0.05), 0 6px 16px -10px rgba(20,28,40,0.14); --shadow-lg: 0 2px 6px -2px rgba(20,28,40,0.10), 0 14px 34px -16px rgba(20,28,40,0.20); --shadow-xl: 0 4px 10px -3px rgba(20,28,40,0.12), 0 30px 60px -24px rgba(20,28,40,0.28); --maxw: 1140px; } * { box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Never allow horizontal scrolling on any device. `hidden` on the root scroll container has universal support (older mobile Safari ignores `clip`); it does not break the sticky header (the header is a direct child of ). */ html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--ui); letter-spacing: -0.011em; line-height: 1.5; /* Sticky footer: a min-height flex column lets `.foot { margin-top: auto }` pin the footer to the bottom of the viewport on short pages (empty feed, unavailable article) while staying in normal flow on long pages. NOTE: do NOT put overflow-x here — overflow on makes it a scroll container and breaks the sticky header. Horizontal clipping is handled on (the root scroll container) instead. */ display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } a { color: inherit; text-decoration: none; } ::selection { background: var(--accent-soft); color: var(--accent-ink); } /* ── reading-progress bar (top of viewport) ── */ .progress-top { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200; background: transparent; } .progress-top > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.1s linear; } /* ── site header — liquid glass ── */ .nav { position: sticky; top: 0; z-index: 120; background: oklch(1 0 0 / 0.66); backdrop-filter: blur(26px) saturate(200%) brightness(1.04); -webkit-backdrop-filter: blur(26px) saturate(200%) brightness(1.04); border-bottom: 0.5px solid oklch(0.5 0.01 255 / 0.12); box-shadow: inset 0 0.5px 0 oklch(1 0 0 / 0.9); } .nav-in { max-width: var(--maxw); margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 18px; } .nav-links { display: flex; align-items: center; gap: 26px; margin-left: 22px; } .nav-links a { font-size: 14.5px; font-weight: 540; color: var(--ink-2); } .nav-links a:hover { color: var(--ink); } .nav-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } /* ── wordmark ── */ .mark { display: inline-flex; align-items: center; gap: 9px; } .mark .glyph { width: 27px; height: 27px; border-radius: 8px; background: url(/icon.png) center/cover no-repeat; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: inset 0 0.5px 0 oklch(1 0 0 / 0.18), 0 1px 3px oklch(0.5 0.1 210 / 0.3); } /* The icon-painter injects an inline ) pins it to the bottom of the viewport on short pages; on long pages it just follows the content. The top padding gives breathing room above the footer regardless. */ .foot { border-top: 1px solid var(--line); margin-top: auto; } .foot-in { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 56px; display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .foot-col { display: flex; flex-direction: column; gap: 11px; } .foot-col h5 { margin: 0 0 3px; font-size: 12px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); } .foot-col a { font-size: 14px; color: var(--ink-2); } .foot-col a:hover { color: var(--ink); } /* fade-in on load */ @media (prefers-reduced-motion: no-preference) { .rise { opacity: 0; transform: translateY(14px); animation: rise 0.7s cubic-bezier(0.16,1,0.3,1) forwards; } @keyframes rise { to { opacity: 1; transform: none; } } } @media (max-width: 720px) { .nav-links { display: none; } .wrap, .nav-in, .foot-in { padding-left: 18px; padding-right: 18px; } /* Keep only the primary CTA in the bar on phones: hide "Sign in", the URL / status chip, and the secondary glass button ("Open in app" — the reader's right rail still offers it). */ .nav-right .btn-quiet { display: none; } .nav-right > .muted-3 { display: none; } .nav-right .btn-glass { display: none; } .nav-right { gap: 8px; } } @media (max-width: 380px) { /* Very narrow phones: trim the primary button so it never clips. */ .nav-right .btn { padding: 0 14px; font-size: 14px; } } /* ── legal / content pages (about, privacy, terms) ── */ .legal { max-width: 760px; margin: 0 auto; padding: 56px 24px 16px; } .legal .eyebrow { display: block; } .legal h1 { font-family: var(--read); font-size: clamp(34px, 5.4vw, 52px); font-weight: 600; letter-spacing: -0.024em; line-height: 1.06; margin: 12px 0 0; text-wrap: balance; } .legal .lede { font-size: 19px; line-height: 1.55; color: var(--ink-2); margin: 18px 0 0; max-width: 620px; } .legal h2 { font-family: var(--read); font-size: 24px; font-weight: 600; letter-spacing: -0.018em; margin: 38px 0 0; line-height: 1.22; } .legal p, .legal li { font-size: 16.5px; line-height: 1.62; color: var(--ink); margin: 13px 0 0; } .legal ul { margin: 12px 0 0; padding-left: 22px; } .legal li { margin-top: 8px; } .legal a.inline { color: var(--accent-ink); font-weight: 600; } .legal .meta { font-size: 14px; color: var(--ink-3); margin-top: 30px; } @media (max-width: 600px) { .legal { padding-top: 40px; } .legal h2 { font-size: 22px; } }