/* ========================================================================== Nithya for the City — design tokens -------------------------------------------------------------------------- Hand-built to visually match nithyaforthecity.com. No Squarespace CSS or JS. PROVENANCE Values here are extracted, not inferred. Three sources, all recorded in README.md: 1. squarespace.html — a saved copy of the live home page: markup, nav, footer, header config, the @font-face families and weights. 2. the site's site.css — fetched from static1.squarespace.com. This is where the --*-hsl palette, the font role assignments and the rendered logo sizes actually live; a page save does not capture them. 3. a headless render — the live page screenshotted at 1440px and 500px, then pixel-sampled, to confirm the header background, CTA colours and the announcement-bar and header heights. Nothing below is a guess. Where a value could not be sourced it is marked. ========================================================================== */ /* Minimal reset. Without border-box, any width:100% element that also has horizontal padding (e.g. .btn--block in the mobile overlay) overflows. */ *, *::before, *::after { box-sizing: border-box; } :root { /* --- Source palette ---------------------------------------------------- Squarespace's five role tokens, copied verbatim from site.css :root so that any snippet lifted from their markup resolves correctly here. READ THIS BEFORE USING THEM: on this site the role names do not describe the colours. --black-hsl is indigo. --white-hsl is pure black. --accent is a near-white cream. The campaign assigned brand colours to whichever slots the template offered, which is normal and completely opaque. Use the appearance-named aliases below in component CSS; these five exist for traceability, not for authoring. */ --black-hsl: 253, 84%, 48%; /* #4014E1 indigo */ --white-hsl: 0, 0%, 0%; /* #000000 black */ --accent-hsl: 53, 100%, 98%; /* #FFFEF5 cream */ --darkAccent-hsl: 253, 84%, 48%; /* #4014E1 indigo */ --lightAccent-hsl: 50, 100%, 50%; /* #FFD400 gold */ /* --- Brand palette, named for what it looks like ----------------------- Bare HSL triplets, so alpha composes the way the source site does it: hsla(var(--indigo-hsl), 0.5) */ --indigo-hsl: 253, 84%, 48%; /* #4014E1 nav, CTA fill, announcement bar */ --gold-hsl: 50, 100%, 50%; /* #FFD400 logo seal, heading underlines */ --cream-hsl: 53, 100%, 98%; /* #FFFEF5 header + page background */ --indigo: hsl(var(--indigo-hsl)); --gold: hsl(var(--gold-hsl)); --cream: hsl(var(--cream-hsl)); /* Pure yellow, not the gold. The DONATE label samples to exactly #FFFF00 against the indigo fill; the seal artwork is #FFD400. They are two different colours and swapping them is visible. */ --cta-yellow: #FFFF00; --ink: #000000; --pure-white: #FFFFFF; --hairline: hsla(var(--indigo-hsl), 0.15); /* --- Semantic aliases — components reference these, never raw names ---- */ --color-header-bg: var(--cream); --color-header-fg: var(--indigo); --color-header-border: hsla(var(--indigo-hsl), 1); --color-page-bg: var(--cream); --color-footer-bg: var(--cream); --color-footer-fg: var(--indigo); --color-footer-rule: var(--hairline); --color-link: var(--indigo); --color-cta-bg: var(--indigo); --color-cta-fg: var(--cta-yellow); --color-focus-ring: var(--indigo); /* Source header config: menuOverlayTheme "dark-bold", which maps to the darkAccent background — indigo, with light type over it. */ --color-overlay-bg: var(--indigo); --color-overlay-fg: var(--cream); /* Announcement bar: indigo ground, white type. Confirmed by pixel sample at both widths. */ --color-announce-bg: var(--indigo); --color-announce-fg: var(--pure-white); /* --- Type -------------------------------------------------------------- Role assignment is from site.css, not guessed: --heading-font "swell-fq4jx3" 400, uppercase, ls .06em --body-font "Roboto" 400, ls -.02em, lh 1.4em --site-navigation-font "Lexend" 700, uppercase, lh 1.9em --header-button-font "Poppins" 700, ls .02em, no transform --meta-font "Lexend" 400 Only 400 and 700 appear in any @font-face on the page — no 300/500/600. Poppins ships 700 only, which is why it is a button face by design. 'Swell' is the campaign's uploaded display face (Squarespace font id swell-fq4jx3, single weight 400). It is not on Google Fonts and the upload is likely licensed to their platform only, so it is declared first and falls back to Lexend. Drop a licensed woff2 into fonts.css and it takes over with no other change. */ --font-display: 'Swell', 'Lexend', system-ui, -apple-system, sans-serif; --font-nav: 'Lexend', system-ui, -apple-system, sans-serif; --font-ui: 'Poppins', 'Lexend', system-ui, -apple-system, sans-serif; --font-meta: 'Lexend', system-ui, -apple-system, sans-serif; --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif; --weight-regular: 400; --weight-bold: 700; /* Heading scale, verbatim from site.css */ --type-h1: 3.7rem; --type-h2: 2.8rem; --type-h3: 1.8rem; --type-h4: 1.2rem; --type-nav: 1.1rem; /* --site-navigation-font-font-size */ --type-cta: 0.9rem; /* --header-button-font-font-size */ --type-body: 1rem; --type-small: 0.8125rem; --type-fine: 0.6875rem; /* SMS-consent and FPPC disclaimers */ --type-col-head: 0.875rem; --leading-nav: 1.9; /* --site-navigation-font-line-height */ --leading-heading: 1.1; --leading-tight: 1.2; /* --header-button-font-line-height */ --leading-body: 1.4; /* --body-font-line-height */ --tracking-heading: 0.06em; --tracking-cta: 0.02em; --tracking-body: -0.02em; --tracking-nav: 0em; /* --- Space ------------------------------------------------------------- 4px base step. */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; /* --- Layout ------------------------------------------------------------ */ --page-max: 1280px; --page-gutter: 4vw; /* --pagePadding */ /* Logo: 1:1 circular seal, source art 1500x1500. These are the source's real rendered caps, from site.css: .header-title-logo img { max-height: 138px } @media (max-width: 767px) { … max-height: 85px } */ --logo-size: 138px; --logo-size-mobile: 85px; /* Header height = logo + the source's vertical padding, which is .9vw top and bottom on desktop and min(3.5vw, 2vmax) on mobile. At 1440px that is 138 + 26 = 164; at 500px it is 85 + 35 = 120. Both match the rendered page to within 3px. Fixed px rather than vw so the fixed-header offset stays computable without a resize observer. */ --header-height: 164px; --header-height-mobile: 120px; /* Announcement bar, measured off the render: 48px at 1440, 39px at 500. */ --announcement-height: 48px; --announcement-height-mobile: 39px; /* Source header config: borderOptions enabled, position bottom, colour black, thickness 0px — reserved but invisible. Kept as a token. */ --header-border-width: 0px; --radius-sm: 4px; --radius-button: 6.4px; /* --primary-button-rounded-border-*-radius */ --radius-pill: 999px; /* Button padding, verbatim from --primary-button-padding-x/y. Kept in em so it scales with the label size the way the source does. At the header CTA's .9rem this reproduces the live button's 117x50px exactly. */ --button-pad-y: 1.2em; --button-pad-x: 2.004em; /* --- Motion ------------------------------------------------------------ */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 250ms; /* --- Breakpoint -------------------------------------------------------- 768px exactly. Confirmed twice: site.css switches the logo cap at max-width 767px, and every fluid-engine block carries its desktop grid-area inside @media (min-width: 768px). CSS media queries cannot read a custom property, so 767.98px/768px is written literally in the component stylesheets — keep them in sync. */ --bp-mobile: 768px; /* Header sits ABOVE the overlay so the burger stays visible and clickable as the close control while the menu is open. */ --z-overlay: 150; --z-header: 200; --z-skiplink: 300; }