/* ========================================================================== AMAC — Alile Medical Aesthetics tokens.css — the single source of truth for the brand. Change a value here and it propagates across every page. ========================================================================== */ :root { /* --- Brand colour -------------------------------------------------- */ /* Pulled from the AMAC wordmark: warm ivory ground, polished gold leaf. */ --ivory: #FBF8F4; /* page ground — the wall behind the logo */ --ivory-deep: #F4EDE4; /* alternating band */ --linen: #EFE6DA; /* cards on ivory */ --blush: #F3E7DE; /* soft warm accent wash */ --espresso: #2A211C; /* primary text */ --espresso-soft: #453930; /* secondary text */ --taupe: #6F6154; /* meta, captions — 5.5:1 on ivory */ --taupe-light: #9C8B7C; /* placeholders, hairline text */ --gold: #C0912F; /* the brand gold — decorative uses */ --gold-deep: #9A711F; /* hover / pressed */ --gold-light: #E3C878; /* highlights */ --gold-pale: #EFE0BC; /* tint fills */ /* Gold is beautiful but fails contrast at small sizes: #C0912F on ivory is only 3.4:1. Anywhere gold carries actual words — eyebrows, links, prices — use this darker cut instead. It reads as the same colour and clears WCAG AA at 5.1:1. Keep --gold for rules, borders and ornament. */ --gold-text: #8A6318; /* Leafed-gold gradient — mirrors the light raking across the logo. Use for the wordmark, rules, and small ornamental marks. Never for body text: the mid-tones fail contrast at small sizes. */ --gold-leaf: linear-gradient( 100deg, #8E6516 0%, #C0912F 18%, #F0DCA4 38%, #C99C3C 55%, #8E6516 72%, #D8B25C 88%, #A87C24 100% ); /* The same raking light, moved down the value scale so it survives on an ivory ground. The gradient above is built for the espresso sections, where its highlight reads at 11.6:1 — on ivory that same highlight is 1.28:1, which is why the middle of the AMAC wordmark washed out to nothing. What makes this read as metal rather than as brown paint is the SIZE of the swing between specular and shadow — 3.3x here, against 1.8x for a naive dark ramp, which just looks like flat brown. The hue swings with it: warm yellow at the highlights (44°), red-brown in the shadows (32°), which is how gold actually behaves. The speculars sit as bright as the 3:1 floor allows (3.57:1 on ivory, 3.25:1 on ivory-deep) and the shadows run to 11.8:1 — so the range is bought at the dark end, where contrast is free. Use this anywhere the leaf carries words on a light ground; keep --gold-leaf for dark grounds, buttons and rules. */ --gold-leaf-deep: linear-gradient( 100deg, #4F2F0A 0%, #6D4810 10%, #A07F24 18%, #795414 27%, #52300A 38%, #9C7721 50%, #734E12 62%, #4E2C09 74%, #9F7C23 86%, #6D4810 95%, #5A370C 100% ); --line: rgba(42, 33, 28, 0.10); /* hairline dividers */ --line-gold: rgba(192, 145, 47, 0.28); --white: #FFFFFF; /* --- Type ---------------------------------------------------------- */ /* Display is a high-contrast Didone to match the AMAC wordmark. UI is a geometric sans set wide — reads clinical, not corporate. */ --font-display: "Playfair Display", "Didot", "Bodoni MT", Georgia, serif; --font-body: "Jost", "Futura", "Century Gothic", system-ui, sans-serif; /* Fluid scale. Each step interpolates between a 360px and 1440px viewport, so nothing needs a media query to stay in proportion. */ --fs-hero: clamp(3.2rem, 1.4rem + 8.0vw, 8.5rem); --fs-h1: clamp(2.4rem, 1.4rem + 4.4vw, 5.0rem); --fs-h2: clamp(1.9rem, 1.3rem + 2.6vw, 3.4rem); --fs-h3: clamp(1.35rem, 1.1rem + 1.1vw, 2.0rem); --fs-h4: clamp(1.1rem, 1.0rem + 0.5vw, 1.35rem); --fs-lead: clamp(1.05rem, 0.97rem + 0.4vw, 1.28rem); --fs-body: 1rem; --fs-sm: 0.875rem; --fs-xs: 0.78rem; --track-eyebrow: 0.34em; /* the wide letterspacing on section labels */ --track-display: 0.02em; --track-btn: 0.16em; /* --- Space --------------------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* Vertical rhythm between full-bleed sections — generous, like the Wix build. Luxury reads as space more than as ornament. */ --section-y: clamp(4rem, 2rem + 7vw, 9rem); /* --- Layout -------------------------------------------------------- */ --measure: 68ch; /* max line length for readable prose */ --container: 1280px; --container-nr: 1040px; /* narrow — editorial pages */ --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3.5rem); /* The height of the fixed header. site.js measures the real header on load and on resize and writes the true value back into this property, because the announcement ribbon wraps to two and three lines as the viewport narrows — anything hard-coded is wrong on most phones. The values here and in the queries below are the no-JS fallback: close enough that sticky offsets and anchor jumps still land in the right place. */ --header-h: 115px; /* --- Surface ------------------------------------------------------- */ --radius-sm: 2px; --radius: 3px; /* the brand is square-ish; rounding reads cheap */ --radius-lg: 4px; --shadow-sm: 0 1px 2px rgba(42, 33, 28, 0.04), 0 2px 8px rgba(42, 33, 28, 0.04); --shadow: 0 2px 4px rgba(42, 33, 28, 0.04), 0 12px 32px rgba(42, 33, 28, 0.07); --shadow-lg: 0 4px 8px rgba(42, 33, 28, 0.05), 0 24px 64px rgba(42, 33, 28, 0.11); /* --- Motion -------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.30, 1); --dur: .38s; --dur-fast: .2s; --z-header: 100; --z-menu: 110; --z-modal: 200; } /* ========================================================================== Screen-size adjustments to the tokens themselves. The scale above interpolates smoothly between a 360px and a 1440px viewport, so components almost never need a media query to stay in proportion. What follows are the two ends of that range, where linear interpolation stops being the right answer: very large screens, where the measure would otherwise keep growing past comfortable reading, and very small ones, where wide letterspacing costs more than it earns. Components change *shape* in main.css §17. Only the scale changes here. ========================================================================== */ /* Beyond ~1600px the 1280 container starts to look marooned in the middle of the screen. Let it grow a little, and open the gutters to match. */ @media (min-width: 1600px) { :root { --container: 1360px; --container-nr: 1120px; --gutter: 4rem; } } /* Below the desktop nav breakpoint the announcement ribbon wraps, so the header grows. Fallback only — site.js overwrites this with the measured height as soon as it runs. */ @media (max-width: 1079px) { :root { --header-h: 118px; } } @media (max-width: 620px) { :root { --header-h: 130px; /* 0.34em of tracking on a phone pushes a three-word eyebrow onto three lines and leaves the flanking rules stranded. Tighten it. */ --track-eyebrow: 0.24em; } } /* Small phones — iPhone SE, older Androids, and anything in a split view. */ @media (max-width: 380px) { :root { --gutter: 1.125rem; --track-eyebrow: 0.2em; --track-btn: 0.1em; --measure: 58ch; } }