/* ===================================================== 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; } } /* === Comparison table (.cmp) === Single source of truth for the Rundock-vs-Claude comparison table. Used by the full six-row table on /compare (compare.html) and the three-row teaser on the homepage (index.html). Adapted from Des's master asset to the site design tokens above. GO-STALE NOTE: the copy in the Price row and the Cowork cells lives in the page markup, not here. This block only styles the table. */ /* Horizontal scroll on small screens so columns never crush. The 1px border + radius live here (not on the table) so the whole table reads as one contained object. overflow: hidden clips the accent-glow column and radius corners cleanly. Right-edge scroll affordance (Lea Verou scroll-shadow technique): a "cover" gradient pinned to the right via background-attachment: local sits over a "shadow" gradient pinned via scroll. The cover hides the shadow when scrolled fully right, and the shadow shows only while there is more table off to the right. On wide screens where the table fits, there is no scroll, so the shadow never shows. --base is the dark page background the fade resolves to. */ .cmp-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; background: /* right cover: solid base pinned to the right edge, scrolls with content */ linear-gradient(to left, var(--base), var(--base)) right center / 24px 100% no-repeat local, /* right shadow: fade to base, fixed to the container's right edge */ linear-gradient(to left, var(--base), rgba(26, 26, 26, 0)) right center / 40px 100% no-repeat scroll; } table.cmp { width: 100%; /* separate (not collapse) so the container radius clips corners. */ border-collapse: separate; border-spacing: 0; table-layout: fixed; min-width: 680px; } /* Column widths: label narrower, three data cols equal, Rundock wider. */ table.cmp col.col-label { width: 18%; } table.cmp col.col-data { width: 18.3%; } table.cmp col.col-rundock { width: 27%; } /* Column headers. Faint surface tint anchors the "what am I comparing" axis. The Rundock header override below keeps its accent standout. */ table.cmp thead th { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-2); background: var(--surface); padding: 14px 20px 12px; vertical-align: bottom; border-bottom: 2px solid var(--border); text-align: left; line-height: 1.3; } table.cmp thead th:first-child { border-right: 1px solid var(--border); } table.cmp thead th.col-rundock { color: var(--accent); background: var(--accent-glow); border-bottom-color: var(--accent); border-left: 1px solid var(--border); } /* Body cells shared. */ table.cmp tbody th, table.cmp tbody td { padding: 22px 20px; vertical-align: top; border-bottom: 1px solid var(--border); text-align: left; line-height: 1.55; } /* Row label. Faint surface tint anchors the "on what dimension" axis. */ table.cmp tbody th { font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--surface); border-right: 1px solid var(--border); } /* Data cells default. Opaque --base background so the right-edge scroll-shadow on .cmp-wrap shows only in the overflow gutter, never bleeding through the cells. */ table.cmp tbody td { font-size: 15px; font-weight: 400; color: var(--text-2); background: var(--base); } /* Rundock column emphasis. */ table.cmp tbody td.col-rundock { color: var(--text-1); font-weight: 500; background: var(--accent-glow); border-left: 1px solid var(--border); } /* Row-label sub-note (the "checked July 2026" date on the Price row). */ .cmp .row-label-note { display: block; font-size: 11px; font-weight: 400; opacity: 0.6; margin-top: 3px; text-transform: none; letter-spacing: 0; } /* Last row: no bottom border. */ table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom: none; } /* Best-for row: summary row. No italics, no size override; the cells inherit the defaults (15px data, 14px label) like every other row. */ table.cmp tbody tr.row-best td.col-rundock { font-weight: 600; color: var(--accent); } /* Contained-cost callout beneath the table. */ .cost-callout { margin-top: 24px; background: var(--accent-glow); border: 1px solid var(--accent); border-radius: 10px; padding: 16px 22px; font-size: 15px; line-height: 1.6; color: var(--text-1); } /* Dated pricing footnote. */ .cmp-footnote { margin-top: 18px; font-size: 13px; line-height: 1.65; color: var(--text-2); opacity: 0.85; } .cmp-footnote strong { color: var(--text-2); font-weight: 600; } @media (max-width: 720px) { table.cmp tbody th { font-size: 13px; } table.cmp tbody td { font-size: 14px; } }