/* ============================================================ Sambeet Dash — portfolio Tokens taken directly from Figma: Desktop node 6454:2467 (1440 x 1541) Mobile node 6454:2469 (360 x 2123) ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Colour */ --bg: #ffffff; --ink: #000000; --ink-muted: rgba(0, 0, 0, 0.64); --card-bg: #fcfcfc; --card-border: #e3e3e3; --tag: #f2e2de; /* Chosen deliberately. Measures 4.13:1 on --tag, under the 4.5:1 AA floor for 9px text — raised with Sambeet and confirmed. Don't "fix" it. */ --tag-ink: #a75266; --arrow: #c8c8c8; --arrow-hover: rgba(0, 0, 0, 0.5); /* --ink at 50% — darkens on hover without going solid */ /* Radii */ --r-card: 24px; --r-media: 16px; --r-tag: 2px; /* Type families */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-nav: "Work Sans", var(--font-ui); /* Type scale — mobile first, overridden at 768px */ --fs-h1: 20px; --lh-h1: 32px; --ls-h1: 0.02px; --fs-bio: 14px; --lh-bio: 28px; --ls-bio: 0.014px; --fs-contact: 14px; --lh-contact: 22px; --ls-contact: 0.014px; --fs-card-sub: 13px; /* card body — 13 on mobile, 14 from 768 up */ /* Layout */ --container: 720px; --gutter: 16px; --card-inset: 16px; /* title / arrow inset from card's left & right */ --card-inset-block: 24px; /* title / arrow inset from card top — 24 at both sizes */ --media-inset: 12px; /* thumbnail inset from card edge */ --grid-gap: 24px; /* Vertical rhythm */ --space-header-h1: 54px; /* header bottom -> h1 */ --space-h1-bio: 16px; --space-bio-grid: 48px; --space-grid-foot: 66px; --space-line-socials: 14px; /* contact line -> Email / LinkedIn row */ --space-foot-tail: 78px; /* below the socials row; was a 224px placeholder while the row was unbuilt. Figma mobile frame 6454:2469 is 2012 tall, links end at 1934. */ --logo-size: 24px; /* Header row height is held independent of the logo so resizing the mark doesn't shift the H1 (which the design pins at y=94 / y=142). */ --header-row: 24px; } @media (min-width: 768px) { :root { --fs-h1: 32px; --lh-h1: 44px; --ls-h1: 0.032px; --fs-bio: 16px; --lh-bio: 28px; --ls-bio: 0.016px; --fs-contact: 24px; --lh-contact: 32px; --ls-contact: 0.024px; --fs-card-sub: 14px; --gutter: 24px; --card-inset: 24px; --grid-gap: 32px; --space-header-h1: 86px; --space-h1-bio: 22px; --space-bio-grid: 64px; --space-grid-foot: 140px; --space-line-socials: 16px; --space-foot-tail: 136px; /* desktop frame 6454:2467 is 1426 tall, links end at 1290 */ --logo-size: 32px; --header-row: 40px; } } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } h1, h2, h3, p, ul, li, figure { margin: 0; padding: 0; } ul { list-style: none; } a { color: inherit; } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; } /* ---------- Layout shell ---------- */ .wrap { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } /* ---------- Header ---------- */ .site-header { padding-top: 16px; } /* Case studies are long scrolls (Strategy Builder is ~12,600px), so the header follows the reader. Scoped to .case-study on rather than applied to .site-header outright: the landing page is one screen of content and keeps its static header. The background must be opaque — content scrolls underneath. */ .case-study .site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); padding-bottom: 10px; } /* Derived from the tokens above so it can't drift: 16px top pad, the header row, 10px bottom pad. Anything else that pins to the top of a case study offsets by this. */ .case-study { --header-sticky-h: calc(16px + var(--header-row) + 10px); } /* market-nudge.html carries its own sticky in-page TOC at top:0. Push it below the header rather than letting the two pin to the same line. These out-specify that page's own `.toc` / `section[id]` rules, so they win despite its