/* ============================================================================= DARSHI SHAH — PORTFOLIO DESIGN TOKENS Single source of truth. Every page and case study reads from these variables. Change a value here and it propagates everywhere. Do not hardcode values in page CSS — always reference a token (var(--token-name)). Extracted from: "Darshi Shah - Hero (Clean, standalone)". ========================================================================== */ :root { /* ───────────────────────── COLOR ───────────────────────── */ /* surface */ --color-paper: #F6F1E8; /* warm paper background, the base of everything */ --color-surface: #FFFFFF; /* white the page fades into below the hero */ --color-card: #FBF9F4; /* project / image placeholder fill */ --color-card-border: #ECE6DA; /* hairline border on cards */ --color-hatch: #F1ECE1; /* diagonal hatch lines inside placeholders */ /* ink (text) */ --color-ink: #1F1F1F; /* headlines + primary UI text */ --color-ink-strong: #0A0A0A; /* hover / emphasis ink */ --color-ink-sub: #4A4A4A; /* body copy / descriptions */ --color-ink-muted: #8A8377; /* labels, captions, meta */ /* warm orb palette (the animated atmosphere) */ --color-orb-a: #F0887F; /* coral */ --color-orb-b: #F4A65E; /* amber */ --color-orb-c: #F3CE7A; /* gold */ /* accent / marker highlight (pulled from the orb palette) */ --color-accent: #F4A65E; /* the felt-tip marker + cursor orb colour */ /* selection + utility */ --color-selection: rgba(31, 31, 31, 0.12); --color-rule: rgba(35, 32, 41, 0.18); /* thin dividers */ /* ───────────────────────── TYPOGRAPHY ───────────────────────── */ /* families */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* headings + UI */ --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --font-serif: 'Noto Serif', Georgia, serif; /* italic publication / institution accents */ /* ── BODY FONT: still being chosen ────────────────────────────────────── Three candidates are kept on file and all loaded in the template. To try one, point --font-body at its candidate token below. That's the ONLY line to change — it swaps the body font everywhere at once. */ --font-body: var(--font-cand-geist); /* ← switch this to test a candidate */ --font-cand-geist: 'Geist', system-ui, sans-serif; --font-cand-hanken: 'Hanken Grotesk', system-ui, sans-serif; --font-cand-source: 'Source Sans 3', system-ui, sans-serif; /* weights Headings are smaller now, so they lean on weight (not size) for presence. --weight-head stays the UI default (nav, buttons, meta, card titles, inline strong). The two heavier tokens are reserved for display headings. */ --weight-body: 400; --weight-head: 500; /* UI text + small headings */ --weight-h2: 600; /* section / subsection headings (semibold) */ --weight-hero: 700; /* the big h1 — bold, anchors the page */ /* font sizes — fluid where the original used clamp(), fixed elsewhere. Headers were retuned down ~25%: more restrained, carried by weight above. */ --text-hero: clamp(30px, 4vw, 54px); /* h1 headline */ --text-lead: clamp(18px, 1.6vw, 22px); /* hero description / lead paragraph */ --text-h2: clamp(18px, 2.3vw, 30px); /* section / case-study heading */ --text-h3: clamp(18px, 1.5vw, 21px); /* subsection heading */ --text-title: 18px; /* card title, small heading */ --text-body: 17px; /* default running text / wordmark */ --text-small: 14px; /* nav, captions, card subtitle */ --text-eyebrow: 11px; /* uppercase mono label */ /* line heights */ --leading-tight: 1.08; /* hero headline */ --leading-snug: 1.3; --leading-normal: 1.45; --leading-relaxed:1.6; /* body copy */ /* letter spacing */ --tracking-tight: 0.005em; /* headings / UI */ --tracking-normal: 0.002em; /* body */ --tracking-hero: 0.016em; /* the big h1 */ --tracking-eyebrow:0.14em; /* uppercase mono labels */ /* ───────────────────────── SPACING ───────────────────────── */ /* 4px base scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 28px; --space-7: 36px; --space-8: 48px; --space-9: 56px; /* the page gutter rhythm */ --space-10: 72px; --space-11: 96px; --space-12: 120px; /* large section bottom padding */ /* semantic spacing */ --gutter: var(--space-9); /* horizontal page padding (desktop) */ --gutter-mobile: var(--space-5); /* horizontal page padding (<=880px) */ --section-gap: var(--space-12); /* ───────────────────────── LAYOUT ───────────────────────── */ /* Readable measure — applies to BODY TEXT ONLY. Anything that is not body text (cards, images, sections, diagrams, video, tables, etc.) is free to break past 660px and span the full content column. */ --maxw-text: 660px; --maxw-headline: 1080px; /* hero headline wrap width */ --maxw-content: 1180px; /* projects grid / main content column */ --maxw-page: 1180px; /* hard ceiling for any full-bleed content band */ --grid-gap: 56px 48px;/* row-gap col-gap for the 2-up project grid */ /* ───────────────────────── ACCESSIBILITY ───────────────────────── Tokens that keep the site usable by keyboard, screen reader, and touch. The base.css focus / skip-link / touch-target rules read from these. */ --focus-ring: var(--color-accent); /* visible keyboard focus colour */ --focus-ring-width: 2px; /* focus outline thickness */ --focus-ring-offset: 3px; /* gap between outline and element */ --tap-min: 44px; /* min hit area for any tappable control (WCAG 2.5.5) */ --scroll-offset: var(--space-10); /* space above an in-page #anchor target */ /* ───────────────────────── RADIUS ───────────────────────── */ --radius-xs: 4px; /* cards / image frames */ --radius-md: 16px; /* glass tooltip / larger panels */ --radius-pill: 999px; /* buttons / chips */ /* ───────────────────────── SHADOW & BLUR ───────────────────────── */ --shadow-glass: 0 16px 36px -10px rgba(40, 30, 60, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -8px 18px -10px rgba(255, 255, 255, 0.4); --shadow-soft: 0 1px 4px rgba(0, 0, 0, 0.12); --blur-orb: 100px; /* ambient orbs */ --blur-cursor: 42px; /* cursor-following orb */ --blur-glass: 16px; /* backdrop blur on glass surfaces */ /* ───────────────────────── ATMOSPHERE ───────────────────────── */ --grain-opacity: 0.10; /* film-grain strength */ --vignette-opacity: 0.00; /* photographic vignette strength */ /* ───────────────────────── MOTION ───────────────────────── */ --ease-rise: cubic-bezier(.2, .7, .2, 1); /* entrance rise */ --ease-glass: cubic-bezier(.2, .85, .25, 1); /* tooltip / pop */ --ease-std: ease; --dur-fast: 0.22s; --dur-base: 0.3s; --dur-slow: 1s; /* hero entrance */ /* ambient orb loop durations */ --orb-dur-a: 12s; --orb-dur-b: 15s; --orb-dur-c: 18s; /* ───────────────────────── Z-INDEX ───────────────────────── */ --z-atmos: 0; /* orb field */ --z-fade: 1; /* white fade */ --z-grain: 2; /* film grain */ --z-cursor: 3; /* cursor orb (above fade) */ --z-content: 5; /* hero text, nav, content */ --z-tooltip: 20; /* glass tooltip */ /* ───────────────────────── BREAKPOINTS ───────────────────────── CSS can't use vars in media queries, so these are documentation only — the literal px values below MUST be reused verbatim in every @media block so the whole site breaks at the same widths. The base styles are desktop-leaning; breakpoints peel off layout in stages so iPad keeps a real tablet layout instead of dropping straight to the phone view. --bp-wide: 1180px content stops growing; centred with side gutters --bp-mobile: 880px gutters → mobile, section padding tightens; heavy multi-column layouts may relax --bp-nav: 760px nav collapses to icon-only. Sits just under the smallest iPad (768px) so every iPad keeps text labels; only phones get icons --bp-small: 600px phones: 2-up grids stack to one column, tightest gutters Rules every page follows: • Wrap content in .container (max-width var(--maxw-content), auto margins) so nothing runs edge-to-edge past --bp-wide. • Horizontal padding switches --gutter → --gutter-mobile at 880px. • Type scales fluidly via the clamp() sizes above; don't add px font sizes inside media queries — retune the clamp() instead. • Multi-column grids stay 2-up through tablet and collapse to one column at 600px (not 880 — that strands iPad on a single column). • Media in content (img, video, iframe, svg) is fluid by default (see base.css: max-width:100%; height:auto). Never set fixed px widths that exceed the viewport. */ }