/* ========================================================================== AEROVISTA - DESIGN TOKENS Implements DESIGN.md 52, tightened by BUILD-PLAN.md 5. Nothing in this file is decorative. Every value is referenced elsewhere. ========================================================================== */ :root { /* --- Colour ------------------------------------------------------------ DESIGN.md 03. Six colours. No gradients, no tints beyond these. */ /* The dark end of the palette is the client's brochure navy, sampled from the cover artwork (the dominant field measures #0C0830). It replaces the architectural black everywhere black was doing a job: page ink, the hero, the footer and every dark section. The brochure itself is navy-on-navy. This site stays light — warm white is still the dominant ground — so the navy is used as ink and as the dark sections that punctuate it, not as the page. That is the whole adaptation: same colour, inverted relationship. 17.02:1 as ink on warm white, and 4.82:1 both ways against terracotta, so the accent still passes AA on a navy ground and a navy label still passes on a terracotta button. */ /* HOME-PAGE-DEMO.html palette. The brochure navy stays the dark end, at the two values the demo actually uses: #0B0624 as ink (page text, footer) and #10184B as the "night" ground the dark statement bands are painted in. The light ground moves from warm white to the demo's cool paper, and the accent from terracotta to the demo's orange. The accent is the developer's own orange rather than the demo's; the split by job is kept and extended — see the accent block below. Same for stone. */ --c-ink: #0B0624; /* demo --ink - primary ink + footer ground */ --c-ink-soft: #10184B; /* demo --night - dark statement sections */ --c-warm-white: #F0F2FA; /* demo --paper - primary light ground */ --c-white: #FCFCFF; /* demo --white - raised surface */ /* Editorial home components use this semantic paper alias. */ --c-bg: var(--c-warm-white); --c-stone: #69718D; /* demo --muted - borders + large secondary */ /* The accent is the developer's own orange, sampled from the Dukia mark: #FC4E00. It is a hot vermilion, and that is the problem it brings with it — nothing legible sits on top of it. White measures 3.37:1 and navy 5.84:1, so the demo's white label failed outright and the navy label that replaced it passed on paper while reading as a hazard stripe. So the brand orange is split by the job it is doing: --c-accent the fill. Deepened to 40% lightness at the same hue, which is where WHITE reaches 4.91:1 — a filled button with a white label, which is what a filled button should be, and far calmer than either version above. --c-accent-bright the mark's exact colour. Small text and marks on the DARK grounds, where 5.84:1 on ink is comfortable and the deepened fill would be too close to the ground. --c-accent-text small text on paper, at 5.60:1. Same hue (18.6°) and same full saturation throughout, so all three read as one colour at three depths rather than as three oranges. */ --c-accent: #CC3F00; /* fill: white label at 4.91:1 */ --c-accent-bright: #FC4E00; /* the mark's own orange, on dark */ /* Hover goes DARKER, not lighter. The label on a filled button is white now, so lightening the fill closes the gap against it — #E04705 would drop the label to 4.14:1 and under AA. This opens it to 6.26:1. */ --c-accent-hover: #B03500; /* Status colours. Both were literals repeated across the site and the admin panel, which is how one of them ends up half-updated. */ --c-error: #A03B2A; /* 5.90:1 on warm white */ --c-ok: #2F6B4F; /* 5.58:1 on warm white */ /* Light-theme surfaces. Warm white is the page ground; pure white is a raised content surface used sparingly, and it is the ONLY way a card is distinguished besides a hairline — no shadow, no fill tint. */ /* Paper grain. An inline SVG turbulence tile at 580 bytes — no HTTP request, no raster asset, resolution-independent, and seamless because stitchTiles makes the 160px square repeat without a visible grid. Held at 3.5%. It should read as uncoated stock, not as an effect: at any strength where you can consciously see "texture", it has become decoration and the brief says the site is expensive through restraint. It is grain, not a gradient and not a blur — the two things actually banned. Light grounds only. On near-black it would read as sensor noise. */ --paper: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%3E%3Cfilter%20id%3D%22p%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22100%25%22%20height%3D%22100%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.82%22%20numOctaves%3D%224%22%20stitchTiles%3D%22stitch%22%20result%3D%22n%22%2F%3E%3CfeColorMatrix%20in%3D%22n%22%20type%3D%22saturate%22%20values%3D%220%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22160%22%20height%3D%22160%22%20filter%3D%22url%28%23p%29%22%2F%3E%3C%2Fsvg%3E"); --paper-opacity: .035; --c-surface: #FCFCFF; --c-surface-alt: #E4E7F3; /* one step down from the ground, for insets */ /* Accent, split for contrast — the same problem stone had. #B96B4A measures 4.82:1 on the brochure navy but only 3.53:1 on warm white, so it is fine for small text on a dark section and fails it on a light one. Since light is now the default ground, small accent text uses the deeper value (4.85:1 on warm white, 5.47:1 on pure white). --c-accent stays for fills, borders, large text and decoration, where 3:1 is the bar. */ --c-accent-text: #B03500; /* 5.60:1 on paper */ /* Accessibility split on stone. #8A8894 on warm white measures 3.09:1 - enough for a border or 24px+ text, NOT enough for 12-14px metadata, which needs 4.5:1. So small secondary text uses the darker value below (5.00:1). This is a correction to DESIGN.md, which used one stone for both. */ --c-stone-text: #5F6782; /* 5.01:1 on paper */ /* Secondary text on the dark grounds is a separate value, and has to be. Both greys above carry a navy cast so they sit in the same family as the ink — which is exactly what makes them fail on a navy ground: #69718D measures 3.47:1 on #10184B. The demo does not use its grey there at all, it uses white at 68%. Same idea, one notch brighter: 9.07:1 on the statement band, and still clearly secondary to the warm white beside it. */ --c-stone-on-dark: rgba(255, 255, 255, .72); /* --- Hairlines --------------------------------------------------------- The structural device of the whole site. Depth comes from these, not from shadow and never from blur. */ --hairline: rgba(11, 6, 36, .16); /* demo hairline on paper */ --hairline-dark: rgba(255, 255, 255, .16); /* separators on navy */ --hairline-strong: var(--c-stone); /* input + control borders, 3.09:1 non-text contrast */ --border-width: 1px; /* never 2px, never 0 */ /* --- Elevation --------------------------------------------------------- The site used to have exactly one shadow, on the modal. The demo theme adds three more, and they all do the same job: they are what a hover lift is made of. Nothing here is a resting-state shadow on a card or a button. */ --shadow-none: none; --shadow-modal: 0 1px 3px rgba(11, 6, 36, .14); /* The demo lifts a card, a tile and a filled button on hover, and the lift is carried by a shadow rather than by a border change. Three values, each lifted straight out of HOME-PAGE-DEMO.html. */ --shadow-lift: 0 14px 30px rgba(11, 6, 36, .14); --shadow-lift-lg:0 16px 32px rgba(11, 6, 36, .18); --shadow-accent: 0 9px 18px rgba(204, 63, 0, .28); /* The islands. "Almost invisible" is the brief and the numbers are meant to be read that way: a shadow at 7% and a border at 55% white are barely perceptible in isolation and are the entire reason the panels read as glass rather than as flat plates. */ --shadow-nav: 0 8px 30px rgba(0, 0, 0, .05); --shadow-nav-on: 0 10px 34px rgba(0, 0, 0, .09); --shadow-logo: 0 6px 22px rgba(11, 6, 36, .08); /* Two different glasses, because the two islands have different jobs. The logo island is a plate: the mark has to read, so it is nearly opaque ivory and the page does not show through it. The centre rail is not a plate. It is a readability layer — the thing a visitor should notice is the navigation text, not the container holding it — so it is barely there: a 15% wash and a 18%-white edge, carried almost entirely by the blur underneath. */ --glass-logo: rgba(248, 248, 244, .90); --glass-logo-blur: blur(16px) saturate(130%); --glass-logo-edge: rgba(255, 255, 255, .65); --glass-rail: rgba(245, 245, 240, .15); --glass-rail-on: rgba(245, 245, 240, .26); /* once scrolled */ --glass-rail-blur: blur(18px) saturate(130%); --glass-rail-edge: rgba(255, 255, 255, .18); --r-island: 22px; /* logo island, outer corners */ --r-pill: 999px; /* rail, CTA, hover chips */ /* --- Scrim ------------------------------------------------------------- Blur is banned, so contrast over imagery is bought with flat gradient. */ /* Card scrim: text sits at the foot, so a foot gradient is enough. */ --scrim-image: linear-gradient(to top, rgba(11,6,36,.64), rgba(11,6,36,0) 60%); /* Hero scrim: copy occupies the full height and the photograph may be a bright evening render, so the wash never reaches zero. Measured to keep warm-white body text above 4.5:1 over the lightest area of the image. */ --scrim-hero: linear-gradient(to top, rgba(11,6,36,.78) 0%, rgba(11,6,36,.48) 45%, rgba(11,6,36,.36) 100%); --scrim-modal: rgba(11, 6, 36, .74); /* --- Radius ------------------------------------------------------------ DESIGN.md 40. The architecture stays the dominant geometry. */ /* The demo is square: buttons, inputs, the modal panel and every image edge are cut, not rounded, and that squareness is a large part of why it reads as editorial rather than as an app. The names are kept so nothing that references them breaks; they simply all resolve to a cut corner now. */ --r-xs: 0; /* buttons */ --r-sm: 0; /* inputs, modal */ --r-md: 0; /* cards, images */ /* --- Type -------------------------------------------------------------- One family. Variable weight does the work a second family would. */ --font: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Display face. The demo pairs a serif display with a neutral sans, which is the single biggest change this theme makes — every heading on the site now sets in the serif and every piece of running copy and UI stays in the sans. The demo's own stack is "Iowan Old Style", "Baskerville", "Times New Roman". Those first two are macOS-only, so on Windows and Android the demo falls all the way to Times New Roman, which at -0.055em tracking looks like a mistake rather than a decision. Source Serif 4 is loaded ahead of them: same warm old-style proportions, a real display cut, and it renders identically on every platform. The demo's stack stays behind it verbatim, so a Mac with Iowan installed and no network still gets the intended face. */ --font-display: "Source Serif 4", "Iowan Old Style", "Baskerville", "Times New Roman", serif; --w-light: 300; --w-normal: 400; --w-medium: 500; /* Display weight. The sans display sizes were set at 300; a serif at 300 does not exist and would synthesise. Headings take the regular cut. */ --w-display: 400; /* Fluid scale. DESIGN.md 05 mobile min -> desktop max, interpolated with clamp so every width between the breakpoints is composed, not snapped. */ --t-display-xl: clamp(3.25rem, 0.95rem + 9.60vw, 8.750rem); /* 52 -> 140 */ --t-display-l: clamp(3.625rem, 1.10rem + 7.50vw, 7.250rem); /* 58 -> 116 demo h1 */ --t-display-m: clamp(2.500rem, 1.42rem + 5.00vw, 4.750rem); /* 40 -> 76 demo h2 */ --t-h1: clamp(2.00rem, 1.38rem + 2.60vw, 4.000rem); /* 32 -> 64 */ --t-h2: clamp(2.125rem, 1.42rem + 3.27vw, 4.000rem); /* 34 -> 64 section head */ --t-h3: clamp(1.375rem, 1.11rem + 1.09vw, 2.250rem); /* 22 -> 36 */ --t-body-l: clamp(1.125rem, 1.03rem + 0.39vw, 1.500rem); /* 18 -> 24 */ /* Floor raised 15 -> 16px. Report §2.2: paragraphs are read, not scanned, and 15px is where this typeface starts feeling cramped on a phone. It also removes the last reason iOS would zoom a tapped control. */ --t-body: clamp(1.0rem, 0.97rem + 0.13vw, 1.125rem); /* 16 -> 18 */ --t-small: clamp(0.75rem, 0.73rem + 0.10vw, 0.875rem); /* 12 -> 14 */ --t-micro: clamp(0.625rem, 0.61rem + 0.06vw, 0.750rem); /* 10 -> 12 */ /* Report §2.2. --t-micro bottoms out at 10px, which is fine for a decorative section index and wrong for anything a visitor has to act on or is legally entitled to read. These three never go below 12px at any width. */ --t-ui: clamp(0.75rem, 0.73rem + 0.10vw, 0.875rem); /* 12 -> 14 eyebrows, action labels */ --t-bar-label: clamp(0.75rem, 0.74rem + 0.05vw, 0.8125rem);/* 12 -> 13 sticky bar only */ --t-caption: clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem); /* 13 -> 14 captions, trust notes */ /* Numeric display: prices, areas, possession dates, distances. */ --t-stat: clamp(1.500rem, 1.19rem + 1.31vw, 2.250rem); /* 24 -> 36 */ /* Serif display sets tighter and closer than the sans did: the demo runs its h1 at 0.84 leading and -0.065em, its h2 at 0.91 and -0.055em. These are the midpoint of the two, because one pair of values has to serve both. */ --lh-display: 0.88; --lh-heading: 0.98; --lh-body: 1.65; /* body copy must never feel compressed - DESIGN.md 04 */ --lh-tight: 1.30; --ls-display: -0.055em; --ls-heading: -0.035em; --ls-body: -0.01em; /* The demo tracks its uppercase labels at 0.2em, which is what makes a 12px eyebrow read as a rule rather than as small text. */ --ls-meta: 0.18em; /* uppercase metadata only */ /* --- Space ------------------------------------------------------------- DESIGN.md 52. */ --s-xs: 8px; --s-sm: 16px; --s-md: 32px; --s-lg: 64px; --s-xl: 96px; --s-2xl: 140px; /* Section rhythm. DESIGN.md 07 - reduced intelligently on mobile, not scaled down by a flat percentage. */ /* Retuned after measuring the page rather than reading the values. Section padding is charged twice at every join — the section above pays its bottom and the one below pays its top — so a 96px --sec-md was 192px of nothing between two ordinary sections, and two --sec-lg sections met across 280px. On the home page that added up to 2,080px of padding in an 11,754px page: 18% of the scroll was empty by construction. These are roughly 30% tighter. The rhythm is unchanged — three steps, same ratios between them — the whole scale is just less generous. */ --sec-sm: clamp(1.750rem, 1.40rem + 1.50vw, 2.750rem); /* 28 -> 44 */ --sec-md: clamp(2.750rem, 2.22rem + 2.25vw, 4.250rem); /* 44 -> 68 */ --sec-lg: clamp(3.750rem, 3.05rem + 3.00vw, 5.750rem); /* 60 -> 92 */ --sec-hero: clamp(4.500rem, 2.37rem + 9.10vw, 10.31rem); /* 72 -> 165 */ /* --- Grid -------------------------------------------------------------- DESIGN.md 06. */ --grid-max: 1440px; --grid-max-lg: 1600px; --gutter: clamp(1.25rem, 0.68rem + 2.42vw, 4.000rem); /* 20 -> 64 */ --col-gap: clamp(0.75rem, 0.39rem + 1.52vw, 2.000rem); /* 12 -> 32 */ /* --- Motion ------------------------------------------------------------ DESIGN.md 49-50. The complete timing vocabulary - BUILD-PLAN.md 6. */ --m-micro: 140ms; /* button press */ --m-fast: 200ms; /* hover, arrow */ --m-normal: 300ms; /* nav, card image, accordion */ --m-modal: 260ms; --m-menu: 500ms; --m-text: 600ms; /* section entry */ --m-image: 800ms; /* clip-path reveal */ --m-hero: 1200ms; /* hero scale, once */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.33, 1, .68, 1); --stagger: 60ms; /* --- Layers ------------------------------------------------------------ DESIGN.md 51. No arbitrary z-index anywhere else in the codebase. */ --z-base: 0; --z-image: 1; --z-scrim: 2; /* must sit above the image it darkens */ --z-overlay: 10; --z-sticky: 50; --z-nav: 100; --z-menu: 200; --z-modal: 300; /* --- Controls ---------------------------------------------------------- */ --tap-min: 48px; /* DESIGN.md 30 preferred touch target */ /* --- Buttons ----------------------------------------------------------- One geometry for every call to action on the site. Primary (orange fill), secondary (navy hairline), the navbar's navy fill and every form submit are the SAME component: they differ only in fill and border, never in height, padding, radius, type or timing. Anything that needs a different number belongs to a different component, not to a new button. Cut corners, not pills: --btn-radius resolves to the same 0 the rest of the site uses, so a button reads as architectural rather than as app UI. The navbar CTA is allowed to be a touch taller and wider than the rest, because it is the site's standing conversion action — but it keeps the family's type, radius, arrow and timing. */ --btn-h: 50px; /* desktop; 48-52 band */ --btn-h-sm: 46px; /* phones; above the 44 floor */ --btn-pad-x: 30px; /* desktop; 28-34 band */ --btn-pad-x-sm: 22px; --btn-radius: var(--r-xs); /* 0 - a cut corner */ --btn-border: var(--border-width); /* 1px, always */ --btn-font-size: 0.75rem; /* 12px, steady at every width */ --btn-weight: var(--w-medium); /* 500 - never bold */ --btn-tracking: 0.18em; /* inside the .16-.20em band */ --btn-gap: 0.85em; /* label to arrow */ --btn-arrow-travel: 5px; /* hover shift, 4-6px band */ --btn-lift: 2px; /* hover lift, 1-2px band */ --btn-transition: 250ms; /* 250-350ms band */ --btn-ease: cubic-bezier(.33, 1, .68, 1); /* The bar is sized by the mark it has to hold, and the mark is now the Dukia lockup — wordmark over a tagline rule. Both scale with the viewport rather than snapping at a breakpoint, so the tagline is legible on a desktop and the bar is not eating a phone screen. Clearance stays ~10px top and bottom across the whole range. */ /* The header is three floating islands, so its geometry is described by the islands rather than by a bar. --nav-h is what the rest of the site reserves for it — the top offset above and below the tallest island — and it is still called --nav-h because a dozen rules across the site measure their clearance against that name. */ /* The floating islands need their visual breathing room below a phone's cutout as well as below the physical top edge. Keeping this in the existing spacing token preserves every consumer of --nav-top while preventing the logo, CTA and menu trigger from entering the unsafe area. */ --nav-top: calc(env(safe-area-inset-top, 0px) + clamp(14px, 1.10vw, 22px)); --nav-rail-h: clamp(44px, 0.70vw + 34px, 52px); /* the centre rail */ --nav-cta-h: clamp(46px, 0.60vw + 38px, 52px); /* the CTA pill */ --nav-logo-h: clamp(60px, 0.96vw + 50.4px, 69.6px); /* left island, +20% */ /* The logo island is now the tallest header element, so the site's existing header-clearance token measures it rather than the CTA. */ --nav-h: calc(var(--nav-top) * 2 + var(--nav-logo-h)); /* Logo sizing. The Aerovista mark is a stacked lockup at 1.4:1, so height drives it. Never set both dimensions — that is how a mark gets stretched. */ /* The supplied mark is a stacked lockup: the tower is 60% of its height, so the wordmark only ever gets ~18% of whatever height we set. At 38px that put "AEROVISTA" at 6.9px and the mark read as decoration. Trimming the dead alpha from the source recovered 11%, and 56px in a 76px header gives the wordmark 10px while keeping 10px of clearance top and bottom. Height only — width stays auto so the lockup is never stretched. */ --logo-nav-h: 56px; --logo-foot-h: 68px; --logo-dukia-h: 30px; /* The header brand is the Dukia mark, not the project mark: this is Dukia's site and Aerovista is the project it presents. That mark is a horizontal lockup at 3.27:1 with a tagline rule under it, so it is sized by height and its width follows — 44px gives 144px of width, which leaves room for the project name beside it, five links and the CTA at the 1000px breakpoint where the links first appear. */ /* The Dukia mark inside the logo island: island height less its own padding, so the island grows and the mark grows with it. */ /* The Dukia mark inside the logo island: island height less its padding. */ --logo-brand-h: clamp(36px, 0.72vw + 28.8px, 45.6px); /* 36 -> 45.6, +20% */ --bar-h: 64px; /* sticky mobile CTA bar: icon + 12px label, plus safe area */ } /* The full Dukia/Aerovista lockup has room to breathe at desktop widths. The compact base values above remain in force on phones and tablets, where the CTA and menu trigger share the same narrow header row. */ @media (min-width: 1200px) { :root { /* The logo island grows with the 30% larger original Dukia lockup. */ --nav-logo-h: clamp(93.6px, 1.4976vw + 78.624px, 108.576px); --logo-brand-h: clamp(80.8704px, 1.617408vw + 64.69632px, 102.43584px); } } /* Short viewports. Fixed chrome is charged against height, not width: a 76px header plus a 64px sticky bar is 140px, which is 21% of a 667px phone and 26% of a landscape one. Both shrink together so the page keeps its proportions instead of the content being squeezed between two full-size bars. */ @media (max-height: 700px) { :root { --nav-top: calc(env(safe-area-inset-top, 0px) + 12px); --nav-rail-h: 44px; --nav-cta-h: 46px; --nav-logo-h: 60px; --logo-nav-h: 48px; --logo-brand-h: 36px; } } @media (max-height: 560px) { :root { --nav-top: calc(env(safe-area-inset-top, 0px) + 10px); --nav-rail-h: 42px; --nav-cta-h: 44px; --nav-logo-h: 55.2px; --logo-nav-h: 40px; --logo-brand-h: 33.6px; --bar-h: 54px; /* Section rhythm is the other thing measured against a screen the visitor has to scroll. Halving the top of the range keeps the page readable rather than making every section a full screen of padding. */ --sec-sm: 1.5rem; --sec-md: 2.0rem; --sec-lg: 2.5rem; } } /* Mobile shortens the motion vocabulary rather than reusing desktop timings. BUILD-PLAN.md 6 - mobile motion is different, not smaller. */ @media (max-width: 767px) { :root { --m-text: 400ms; --m-image: 600ms; --m-menu: 450ms; } } /* DESIGN.md 27. Accessibility takes priority over visual effect. */ @media (prefers-reduced-motion: reduce) { :root { /* The button system follows the same rule as the rest of the motion vocabulary: the state change still happens, it just stops travelling. */ --btn-transition: 120ms; --btn-arrow-travel: 0px; --btn-lift: 0px; --m-micro: 120ms; --m-fast: 120ms; --m-normal:120ms; --m-modal: 120ms; --m-menu: 120ms; --m-text: 120ms; --m-image: 120ms; --m-hero: 1ms; --stagger: 0ms; } }