/* ============================================================ Come Glow With Me — core tokens + base Brand: sage green / warm white / antique gold ============================================================ */ /* Fonts are loaded with a in each page's , not with @import. An @import here cannot start downloading until this file has been fetched AND parsed, which put the webfonts three serial round trips behind the HTML. */ :root { /* --- colour --- */ --ink: #1D231C; /* volcanic — body text, dark ground */ --sage-deep: #38473A; /* tea field — dark surfaces */ --sage: #7C9076; /* sage — the brand green */ --sage-mist: #C4D0BC; /* mist — rules, muted type */ --wash: #E8EDE1; /* linen sage — pale sections */ --paper: #F8F9F4; /* paper — sage-tinted white, the base */ --gold: #A87C2E; /* antique gold — accent, hairlines */ --gold-leaf: #D8BC80; /* gold leaf — accent on dark */ /* --- type --- */ --display: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace; /* --- spacing scale (intentional, not ad-hoc) --- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px; --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); /* --- depth: base → elevated → floating --- */ --lift-1: 0 1px 2px rgba(29,35,28,.05), 0 6px 18px -8px rgba(56,71,58,.18); --lift-2: 0 2px 4px rgba(29,35,28,.05), 0 18px 44px -18px rgba(56,71,58,.30); --lift-3: 0 4px 8px rgba(29,35,28,.06), 0 40px 80px -32px rgba(56,71,58,.38); --ease: cubic-bezier(.16,1,.3,1); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; font-weight: 350; line-height: 1.72; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; } ::selection { background: var(--gold-leaf); color: var(--ink); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; } /* ---------- type roles ---------- */ .u-label { /* the technical voice: steps, specs, eyebrows */ font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; } .u-display { font-family: var(--display); font-weight: 300; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 120; letter-spacing: -.03em; line-height: 1.0; margin: 0; } .u-h2 { font-family: var(--display); font-weight: 300; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 90; font-size: clamp(2rem, 3.6vw, 3.15rem); letter-spacing: -.028em; line-height: 1.08; margin: 0; } .u-h3 { font-family: var(--display); font-weight: 400; font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 30; font-size: 1.3rem; letter-spacing: -.015em; line-height: 1.25; margin: 0; } .u-lede { font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.72; color: color-mix(in srgb, var(--ink) 82%, transparent); max-width: 54ch; margin: 0; } .u-rule { height: 1px; background: var(--gold); opacity: .55; border: 0; margin: 0; } /* ---------- layout ---------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .sec { padding-block: clamp(72px, 10vw, 152px); position: relative; } .sec--tight { padding-block: clamp(56px, 7vw, 96px); } .sec--wash { background: var(--wash); } .sec--deep { background: var(--sage-deep); color: var(--paper); } .sec--deep .u-lede { color: color-mix(in srgb, var(--paper) 80%, transparent); } /* ---------- logo lockup ---------- */ .logo { display: inline-flex; align-items: baseline; gap: 0; text-decoration: none; } .logo-text { font-family: var(--display); font-weight: 300; font-variation-settings: 'SOFT' 40, 'WONK' 1, 'opsz' 60; font-size: var(--logo-size, 25px); letter-spacing: -.022em; color: currentColor; white-space: nowrap; } .logo-halo { width: calc(var(--logo-size, 25px) * .60); height: calc(var(--logo-size, 25px) * .60); margin-inline: .035em; transform: translateY(.02em); flex: none; } /* ---------- buttons ---------- */ .btn { --btn-bg: var(--ink); --btn-fg: var(--paper); display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); border-radius: 999px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: var(--lift-2); } .btn:active { transform: translateY(0); } .btn--gold { --btn-bg: var(--gold); --btn-fg: #FFFDF7; } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: color-mix(in srgb, var(--ink) 22%, transparent); } .btn--ghost:hover { border-color: var(--gold); color: var(--gold); } .btn--onDark { --btn-bg: var(--paper); --btn-fg: var(--ink); } .btn--ghostDark { --btn-bg: transparent; --btn-fg: var(--paper); border-color: color-mix(in srgb, var(--gold-leaf) 55%, transparent); } .btn--ghostDark:hover { border-color: var(--gold-leaf); color: var(--gold-leaf); } .btn .btn-arrow { transition: transform .35s var(--ease); } .btn:hover .btn-arrow { transform: translateX(4px); } /* text link with a gold underline that grows */ .tlink { font-family: var(--sans); font-size: 14px; font-weight: 600; text-decoration: none; padding-bottom: 3px; background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s var(--ease), color .3s var(--ease); } .tlink:hover { background-size: 100% 1px; color: var(--gold); } /* ---------- screen-reader only ---------- */ /* Visible to assistive tech and to anything reading textContent, invisible on screen. Used for the "o" of "glow" in the hero, which is drawn as an SVG halo. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- reveal ---------- */ /* Gated on .js so that if the reveal script never runs - blocked, errored, or edited badly - the content is simply visible rather than invisible forever. */ .js .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .js .rv.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }