/* ========================================================================== Suttons Business Park — Design Tokens Derived from: _resources/supplied/css/figma.css (1440px artboard) Author: Charlie G — Cormack Advertising -------------------------------------------------------------------------- This file defines ONLY custom properties. No selectors emit styles here except :root and the theme scopes. Never hard-code a hex or a px font-size anywhere else in the theme — add a token here instead. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. BRAND PALETTE (raw values — do not use directly in components, use the semantic tokens in section 2) ---------------------------------------------------------------------- */ /* Dark neutrals — the spine of the brand */ --sbp-ink: #091218; /* deepest — hero scrims, footer, favicon */ --sbp-ink-900: #171C24; /* gradient start */ --sbp-charcoal: #2A313C; /* primary dark section background */ --sbp-slate-700: #455165; /* gradient end / raised surfaces */ --sbp-slate-500: #55647D; /* hairlines, muted type on dark */ --sbp-black: #000000; /* Blues — the cool mid-range used for body copy + outlines on dark */ --sbp-blue-400: #6C86B6; --sbp-blue-300: #7591C5; /* interactive outline, active states */ --sbp-blue-200: #A8B5CC; /* default button border, secondary type */ --sbp-blue-100: #D3E0F4; /* light rules, list markers */ /* Light neutrals — the Availability page runs light */ --sbp-mist: #E8EFF3; /* light page background */ --sbp-mist-alt: #E8ECF3; --sbp-white: #FFFFFF; /* Gold — the single accent. Used sparingly: active toggle, live map pin, hover borders, section rules. Never for body copy. */ --sbp-gold: #E0AF5A; --sbp-gold-light: #E0C08B; --sbp-gold-deep: #CAA76C; /* Brushed-metal stops (logo lockup, spec numerals) */ --sbp-metal-100: #A5AEBE; --sbp-metal-300: #7C8491; --sbp-metal-500: #545B66; /* ---------------------------------------------------------------------- 2. SEMANTIC COLOUR (default = DARK theme, the site's resting state) ---------------------------------------------------------------------- */ --color-bg: var(--sbp-charcoal); --color-bg-deep: var(--sbp-ink); --color-bg-raised: var(--sbp-slate-700); --color-text: var(--sbp-white); --color-text-muted: var(--sbp-blue-200); --color-text-subtle: var(--sbp-slate-500); --color-text-invert: var(--sbp-ink); --color-accent: var(--sbp-gold); --color-accent-hover: var(--sbp-gold-light); --color-on-accent: var(--sbp-ink); --color-border: var(--sbp-blue-200); --color-border-subtle: rgba(85, 100, 125, 0.48); --color-border-strong: var(--sbp-blue-300); --color-border-accent: var(--sbp-gold); --color-focus: var(--sbp-gold); --color-overlay: rgba(9, 18, 24, 0.72); /* Buttons sit over photography, so the default carries a dark glass fill rather than being transparent — it holds up over a bright sky. */ --color-btn-surface: rgba(9, 18, 24, 0.57); --color-btn-surface-hover: rgba(9, 18, 24, 0.78); /* Lighter glass — used under the gold-hairline variant */ --color-btn-surface-light: rgba(255, 255, 255, 0.09); /* Emphasised pair-mate (e.g. "Google Maps" beside "Explore Downloads") */ --color-btn-primary-bg: var(--sbp-blue-300); --color-btn-primary-bg-hover: var(--sbp-blue-400); --color-btn-primary-border: rgba(85, 100, 125, 0.48); /* ---------------------------------------------------------------------- 3. GRADIENTS (lifted verbatim from the Figma export) ---------------------------------------------------------------------- */ /* Full-bleed section wash — dark top-left to slate bottom-right */ --grad-section: linear-gradient(165.21deg, #091218 0.04%, #2A313C 58.24%, #55647D 99.96%); /* Shorter section wash (site plan, spec blocks) */ --grad-section-alt: linear-gradient(165.21deg, #455165 0.04%, #2A313C 95.15%); /* Deep vertical wash (location / map lead-in) */ --grad-deep: linear-gradient(170.61deg, #171C24 6.76%, #455165 93.72%); /* Translucent panel — the floating map info card */ --grad-panel: linear-gradient(180deg, rgba(42, 49, 60, 0.7) 0%, rgba(41, 53, 72, 0.7) 100%); /* Top scrim so the fixed nav stays legible over imagery */ --grad-scrim-top: linear-gradient(360deg, rgba(0, 0, 0, 0) 0%, rgba(9, 18, 24, 0.6) 100%); /* Hero scrim — darkens only the top third, behind the nav and headline, then clears so the aerial photography stays open. */ --grad-scrim-hero: linear-gradient(180deg, rgba(9, 18, 24, 0.62) 0%, rgba(9, 18, 24, 0.34) 18%, rgba(9, 18, 24, 0.10) 34%, rgba(9, 18, 24, 0) 48%); /* Bottom scrim for captioned / Ken-Burns imagery */ --grad-scrim-image: linear-gradient(180deg, rgba(9, 18, 24, 0.264) 0%, rgba(9, 18, 24, 0.8) 100%); /* Brushed metal — the oversized watermark type and logo lockup */ --grad-metal: linear-gradient(180deg, #A5AEBE 0%, #7C8491 50.48%, #545B66 100%); /* Quiet dark band — the "Inspired" section. Barely a gradient: charcoal with the top-left corner pulled down toward ink. */ --grad-band: linear-gradient(160deg, #171C24 0%, #2A313C 68%); /* Second band — straight vertical, deliberately darkest at the very top so it reads as a new surface starting, then opens out downwards. */ --grad-band-alt: linear-gradient(180deg, #141A22 0%, #212833 38%, #2E3745 100%); /* Footer picks up EXACTLY where --grad-band-alt leaves off (#2E3745) so there is no step at the join, then settles down to ground the page. */ --grad-footer: linear-gradient(180deg, #2E3745 0%, #232A35 100%); /* The Site — the plan sits on a wash that changes with the toggle. General: open and grey, warming toward mauve at the foot. Available: pulled right down so the gold-highlighted units carry. */ --grad-site-general: linear-gradient(180deg, #2B323D 0%, #4E5561 42%, #6B6875 100%); --grad-site-available: linear-gradient(180deg, #151A22 0%, #1E242E 45%, #39414F 100%); /* ---------------------------------------------------------------------- 4. TYPEFACES -------------------------------------------------------------------- Inter ships with the project (variable, self-hosted — see base.css). Halyard Display is specified in the Figma file for BUTTON labels and the legal footnote, but the licensed files were not supplied. The --font-display stack therefore falls through to Inter today; drop the Halyard webfonts into assets/fonts/ and add the @font-face block in base.css and every button picks it up with no other change. ---------------------------------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Halyard Display', var(--font-sans); /* Optical sizing — Inter is a variable font with an opsz axis */ --font-opsz-text: 18; --font-opsz-display: 28; /* Weights actually used in the design */ --fw-light: 300; /* button labels, oversized display type */ --fw-regular: 400; /* body copy, nav */ --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* headings, emphasis, unit names */ /* ---------------------------------------------------------------------- 5. TYPE SCALE -------------------------------------------------------------------- Each step is clamp(mobile, fluid, design-value). The max of every clamp is the literal px from the 1440px Figma artboard, so at >=1440px the build is pixel-true to the comps. ---------------------------------------------------------------------- */ /* Watermark — the giant part-cropped word behind the Location section */ --fs-watermark: clamp(5.5rem, 17.4vw, 15.625rem); /* 88 → 250px */ --lh-watermark: 0.94; /* Hero display */ --fs-display-l: clamp(2.75rem, 6.95vw, 6.25rem); /* 44 → 100px */ --lh-display-l: 0.9; --fs-display-m: clamp(2.25rem, 4.51vw, 4.0625rem); /* 36 → 65px */ --lh-display-m: 0.95; /* Page title — CONTACT, EXPLORE AVAILABILITY */ --fs-display-s: clamp(2rem, 3.47vw, 3.125rem); /* 32 → 50px */ --lh-display-s: 1.2; /* Section headings */ --fs-h1: clamp(1.75rem, 2.78vw, 2.5rem); /* 28 → 40px */ --lh-h1: 1.1; --fs-h2: clamp(1.5rem, 2.29vw, 2.0625rem); /* 24 → 33px */ --lh-h2: 1.21; --fs-h3: clamp(1.25rem, 1.53vw, 1.375rem); /* 20 → 22px */ --lh-h3: 1.45; /* Body */ --fs-lead: clamp(1.0625rem, 1.39vw, 1.25rem); /* 17 → 20px */ --lh-lead: 1.5; --fs-body-l: clamp(1rem, 1.25vw, 1.125rem); /* 16 → 18px */ --lh-body-l: 1.67; --fs-body: 1rem; /* 16px */ --lh-body: 1.5625; /* 16 / 25 */ --fs-body-s: 0.9375rem; /* 15px */ --lh-body-s: 1.53; /* UI */ /* 17.5px at the 1440 artboard, easing down so two pills still fit the gutter on a 390px screen */ --fs-button: clamp(0.9375rem, 1.215vw, 1.09375rem); /* 15 → 17.5px */ --lh-button: 1.43; --btn-padding-x: clamp(1rem, 1.8vw, 1.625rem); /* 16 → 26px */ --fs-nav: 0.75rem; /* 12px */ --lh-nav: 1.25; --fs-caption: 0.75rem; /* 12px */ --lh-caption: 1.25; --fs-legal: 0.6875rem; /* 11px */ --lh-legal: 1.18; /* Tracking */ --ls-wide: 0.05em; /* eyebrows, nav, small caps */ --ls-display: -0.02em; /* large display type */ --ls-normal: 0; /* ---------------------------------------------------------------------- 6. SPACING (4px base) ---------------------------------------------------------------------- */ --space-3xs: 0.25rem; /* 4px */ --space-2xs: 0.5rem; /* 8px */ --space-xs: 0.75rem; /* 12px */ --space-sm: 1rem; /* 16px */ --space-md: 1.5rem; /* 24px */ --space-lg: 2rem; /* 32px */ --space-xl: 3rem; /* 48px */ --space-2xl: 4rem; /* 64px */ --space-3xl: 5rem; /* 80px */ --space-4xl: 7.5rem; /* 120px */ --space-5xl: 10rem; /* 160px */ /* Vertical rhythm between full-width sections */ --section-padding-y: clamp(3.5rem, 7vw, 7.5rem); /* ---------------------------------------------------------------------- 7. LAYOUT ---------------------------------------------------------------------- */ --artboard: 1440px; /* the design reference width */ /* The layout runs full-bleed: 100% wide with a flat 80px gutter each side. Change --container-inset here and every section follows — it steps down on smaller screens in the media queries at the foot of this file. Sections that shouldn't stretch across a very wide monitor add .container--capped, which stops at --container-cap. That cap is the OUTER width (border-box), so content lands at 1600 − 160 = 1440px. */ --container-inset: 80px; --container-cap: 1600px; --container-narrow: 880px; /* long-form copy measure */ /* Header — logo is 29.6px tall at top:25px, nav baseline at top:32px, so the band centres on y=40 and stands 80px tall. */ --header-height: clamp(60px, 5.55vw, 80px); --logo-height: clamp(24px, 2.06vw, 29.6px); --nav-gap: clamp(1.125rem, 1.875vw, 1.6875rem); /* 18 → 27px */ /* "Inspired" drum — words are 40/60 bold at a 60px pitch, five in view. Opacity falls away from the centre as 0.30^distance, which is what the comp measures (1.00 / 0.29 / 0.10). */ --drum-item-h: clamp(2.75rem, 4.17vw, 3.75rem); /* 44 → 60px */ /* The three below are read by app.js via getComputedStyle, not by CSS. They look unused to a linter — they are not. Tune the wheel here. */ --drum-visible: 5; --drum-falloff: 0.30; /* opacity = falloff ^ distance-from-centre */ --drum-scale: 0.04; /* how much each step shrinks — 0 to disable */ --inspired-gap: clamp(0.75rem, 1.6vw, 1.4375rem); /* 12 → 23px */ /* Occupier ribbon. Duration is for ONE full pass of the duplicated track; raise it to slow the drift. Slot size keeps marks of wildly different aspect ratios optically even. */ --ribbon-duration: 48s; /* the oversized Location band — slow on purpose */ --watermark-duration: 35s; /* was 42s — a touch quicker */ --ribbon-gap: clamp(2.5rem, 5vw, 4.5rem); /* 40 → 72px */ --logo-slot-w: clamp(100px, 10.4vw, 150px); --logo-slot-h: clamp(40px, 3.9vw, 56px); /* Site-plan magnifier. --lens-size is the outer diameter of the glass, --lens-zoom how hard it magnifies. */ /* Contact panel. --contact-ratio-h must match the background frame — the section takes its height from it, so update this whenever the photograph is replaced (it is 3031 x 2701 today). --contact-overlay-opacity is what makes the supplied wash a wash: the file itself is fully opaque and would hide the picture outright. */ --contact-ratio-h: 0.8912; /* 2701 / 3031 — height per unit width */ --contact-overlay-opacity: 0.62; --contact-overlay-height: 40%; /* the wash covers the top band only */ --map-scrim-height: 33%; /* nav legibility over the live map */ /* Behind the map — the same base geometry colour the Google style uses, so there is no flash of a different shade while tiles load. */ --map-bg: #171A26; --lens-size: clamp(190px, 18vw, 260px); --lens-zoom: 2; /* where the + sits on the plan, measured up from the bottom */ --siteplan-zoom-bottom: 22%; /* Hero — the comp band is 1440 x 1005, i.e. 69.8% of the width. */ --hero-ratio: 69.8vw; --hero-title-top: clamp(5rem, 10.49vw, 9.4375rem); /* 80 → 151px */ /* Headline line-box ends at 271px, buttons sit at 305px → 34px apart */ --hero-actions-gap: clamp(1.25rem, 2.36vw, 2.125rem); /* 20 → 34px */ /* ---------------------------------------------------------------------- 8. SHAPE ---------------------------------------------------------------------- */ --radius-3xs: 2px; --radius-pill: 40px; /* buttons, toggles — the dominant shape */ --radius-round: 50px; --radius-card: 10px; /* map panel, unit cards */ --radius-full: 9999px; --border-hair: 0.7px; --border-thin: 1px; --border-thick: 2px; /* ---------------------------------------------------------------------- 9. ELEVATION ---------------------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(9, 18, 24, 0.24); --shadow-md: 0 8px 24px rgba(9, 18, 24, 0.32); --shadow-lg: 0 24px 64px rgba(9, 18, 24, 0.45); --blur-panel: blur(12px); /* ---------------------------------------------------------------------- 10. MOTION -------------------------------------------------------------------- The build calls for scroll-reveals, Ken Burns, carousels, accordions and toggles. Every one of them pulls its timing from here so the whole site moves with one personality. ---------------------------------------------------------------------- */ --dur-instant: 120ms; --dur-fast: 200ms; --dur-base: 320ms; --dur-slow: 600ms; --dur-reveal: 900ms; /* fade-in-up on scroll */ --dur-kenburns: 18000ms; /* slow image drift */ --dur-split: 1100ms; /* a line of type rising into place */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* UI settle */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* travel */ --ease-linear: linear; /* Ken Burns */ /* How far a revealed element travels. 24px was barely perceptible — the eye read it as a fade with a wobble. At 80 the movement is the point, and it is what the reference does at 150 on a much taller page. */ --reveal-offset: 80px; /* One step of a stagger, whether between siblings or between the lines of a heading. Everything that cascades is a multiple of this. */ --stagger-step: 90ms; /* The tilt a line of type carries as it rises, straightening as it lands. Small: at anything past 8deg it reads as a mistake. */ --split-tilt: 5deg; /* ---------------------------------------------------------------------- 11. Z-INDEX ---------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-overlay: 300; --z-modal: 400; } /* ========================================================================== LIGHT THEME SCOPE -------------------------------------------------------------------------- The Availability page (and any section that needs to breathe) runs on the pale mist background with ink type. Apply to or to any section: — whole page
— one band Only the semantic tokens flip. The raw palette never changes. ========================================================================== */ .theme-light, [data-theme='light'] { --color-bg: var(--sbp-mist); --color-bg-deep: var(--sbp-mist-alt); --color-bg-raised: var(--sbp-white); --color-text: var(--sbp-ink); --color-text-muted: var(--sbp-slate-500); --color-text-subtle: var(--sbp-metal-300); --color-text-invert: var(--sbp-white); --color-on-accent: var(--sbp-ink); --color-border: var(--sbp-ink); --color-border-subtle: rgba(9, 18, 24, 0.18); --color-border-strong: var(--sbp-slate-700); --color-overlay: rgba(232, 239, 243, 0.85); --color-btn-surface: transparent; --color-btn-surface-hover: rgba(9, 18, 24, 0.06); --color-btn-primary-bg: var(--sbp-blue-300); --color-btn-primary-bg-hover: var(--sbp-blue-400); --color-btn-primary-border: rgba(85, 100, 125, 0.48); --shadow-sm: 0 2px 8px rgba(9, 18, 24, 0.08); --shadow-md: 0 8px 24px rgba(9, 18, 24, 0.12); --shadow-lg: 0 24px 64px rgba(9, 18, 24, 0.16); } /* ========================================================================== RESPONSIVE GUTTER -------------------------------------------------------------------------- 80px is right on desktop but eats a phone. Stepping the token itself means every .container and every section that reads it follows — there is no per-component override to keep in sync. ========================================================================== */ @media (max-width: 900px) { :root { --container-inset: 40px; } } @media (max-width: 600px) { :root { --container-inset: 24px; } } /* Explicit dark scope — for flipping a band back to dark inside a light page (e.g. the footer at the bottom of Availability). */ .theme-dark, [data-theme='dark'] { --color-bg: var(--sbp-charcoal); --color-bg-deep: var(--sbp-ink); --color-bg-raised: var(--sbp-slate-700); --color-text: var(--sbp-white); --color-text-muted: var(--sbp-blue-200); --color-text-subtle: var(--sbp-slate-500); --color-text-invert: var(--sbp-ink); --color-border: var(--sbp-blue-200); --color-border-subtle: rgba(85, 100, 125, 0.48); --color-border-strong: var(--sbp-blue-300); --color-overlay: rgba(9, 18, 24, 0.72); }