/* ===================================================== Rundock site — shared.css Tokens, reset, base typography, and shared chrome shared between index.html and directory.html. Page-specific styles remain embedded in each page. Page-specific rules can override anything here via later cascade (this file is linked first). ===================================================== */ /* === Design tokens === */ :root { --base: #1A1A1A; --surface: #212121; --elevated: #272727; --card: #333333; --border: #3D3D3D; --text-1: #F0EDE8; --text-2: #9A9590; --accent: #E87A5A; --accent-hover: #F09070; --accent-glow: rgba(232,122,90,0.12); --success: #6BC67E; --working: #7AA2E8; --idle: #7A756E; } /* === Reset === */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } html { scroll-behavior: smooth; } /* No `overflow-x: clip/hidden` on or : - On , `overflow-x: clip` establishes a scroll-containing block, which silently breaks `position: sticky` on direct body children (e.g.

) in Chromium *and* WebKit. - On , `overflow-x: hidden` doesn't reliably contain `.screenshot::before` (width: 140%) on mobile, and `clip` on body doesn't propagate to viewport — so the html element still allows horizontal scroll. Containment is applied per-section instead (see `.hero` and `.feature-section` rules in each page's stylesheet), which keeps the glow bleed visible past `.screenshot` while preventing the page from scrolling horizontally on mobile. */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--base); color: var(--text-1); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* === Typography === */ h1 { font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--text-1); text-wrap: balance; } h2 { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-1); margin-bottom: 16px; text-wrap: balance; } h3 { font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text-1); margin-bottom: 8px; } p { color: var(--text-2); font-size: 16px; line-height: 1.7; text-wrap: pretty; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } /* === Layout === */ .container { max-width: 960px; margin: 0 auto; padding: 0 24px; } section { padding: 80px 0; } section + section { border-top: 1px solid var(--border); } /* === Header chrome === Sticky on both pages. background: var(--base) ensures the solid nav masks content scrolling beneath it — no glass on the nav, which avoids stacking context conflicts with glass cards in the scroll layer below. */ header { padding: 24px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--base); z-index: 100; } header .container { display: flex; align-items: center; justify-content: space-between; } .logo { font-size: 18px; font-weight: 700; color: var(--text-1); text-decoration: none; letter-spacing: -0.02em; } .header-nav { display: flex; gap: 24px; align-items: center; } .header-link { color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500; } .header-link:hover { color: var(--text-1); } /* === Buttons === .btn-secondary is the canonical neutral ghost button (per Des's audit). The directory's previous accent-outline variant has been renamed to .btn-accent-outline below. */ .btn-primary { display: inline-block; background-color: var(--accent); color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; padding: 14px 32px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; letter-spacing: -0.01em; transition: background-color 0.15s ease; } .btn-primary:hover { background-color: var(--accent-hover); color: #FFFFFF; } .btn-primary-sm { display: inline-block; background-color: var(--accent); color: #FFFFFF; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; padding: 12px 24px; border-radius: 8px; text-decoration: none; border: none; cursor: pointer; letter-spacing: -0.01em; transition: background-color 0.15s ease; } .btn-primary-sm:hover { background-color: var(--accent-hover); color: #FFFFFF; } .btn-secondary { display: inline-block; background: transparent; color: var(--text-1); font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; padding: 14px 32px; border-radius: 8px; text-decoration: none; border: 1px solid var(--border); cursor: pointer; letter-spacing: -0.01em; transition: border-color 0.15s ease, color 0.15s ease; } .btn-secondary:hover { border-color: var(--text-2); color: var(--text-1); } .btn-accent-outline { display: inline-block; background: transparent; color: var(--accent); font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 500; padding: 7px 18px; border-radius: 6px; border: 1px solid var(--accent); text-decoration: none; cursor: pointer; letter-spacing: -0.01em; transition: background 0.15s ease, color 0.15s ease; } .btn-accent-outline:hover { background: var(--accent); color: #FFFFFF; } /* === Footer === Shared 3-column footer used by index.html and directory.html. Collapses to a single column at <=768px. */ footer { border-top: 1px solid var(--border); padding: 48px 0 32px; } .footer-layout { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-brand-col .logo { display: block; margin-bottom: 8px; } .footer-tagline { font-size: 14px; color: var(--text-2); margin-bottom: 0; line-height: 1.6; } .footer-col-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); margin-bottom: 16px; } .footer-col-links { display: flex; flex-direction: column; gap: 10px; } .footer-col-links a { font-size: 14px; color: var(--text-2); text-decoration: none; } .footer-col-links a:hover { color: var(--text-1); } .footer-credit { font-size: 13px; color: var(--text-2); padding-top: 24px; border-top: 1px solid var(--border); } .footer-credit a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .footer-credit a:hover { color: var(--text-1); } @media (max-width: 768px) { .footer-layout { grid-template-columns: 1fr; gap: 32px; } }