/* ============================================================ MaireyAi — shared design system (Stripe-premium-light + MaireyAi green) Linked by every page. Change here, changes everywhere. ============================================================ */ /* Hanken Grotesk — self-hosted variable font (was render-blocking Google Fonts CSS). One file covers weights 300–700. Preloaded from each page . */ @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/hanken-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/hanken-grotesk-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Surfaces — warm premium (stone + warm white), never cold */ --bg: #f8f5ef; /* warm off-white canvas */ --bg-soft: #f1ece1; /* warm stone — alternating sections */ --bg-dark: #06150e; /* green-ink impact bands (matches the homepage hero) */ --surface: #fffdf8; /* warm white cards */ /* Text — warm green-charcoal, never pure black */ --heading: #16251d; --label: #2d3c33; --body: #4d5b51; --muted: #5e6557; /* AA (≥4.5) on the warm stone band */ --on-dark: #f4faf7; --on-dark-soft: rgba(244,250,247,0.74); /* MaireyAi green — identity, kept */ --brand: #0b8a5b; --brand-strong: #097049; --brand-soft: #e7f2ec; --brand-tint: #eef6f1; --brand-bright: #0a7a4d; /* AA-legible as text on warm light (dark theme overrides to neon) */ /* Brass — warm secondary accent (value / proof / jewellery only) */ --brass: #8a6212; /* deep antique gold — AA-legible on warm light */ --brass-soft: #f8f0de; /* Borders — warm hairlines */ --border: #e7ddca; --border-strong: #d9ccb3; --border-tint: #e9dfc9; /* Warm shadow ladder — soft, brown-cast, premium */ --sh-1: rgba(54,42,18,0.05) 0px 2px 5px, rgba(54,42,18,0.04) 0px 8px 18px -8px; --sh-2: rgba(54,42,18,0.07) 0px 15px 35px -10px, rgba(0,0,0,0.04) 0px 5px 15px -5px; --sh-3: rgba(40,30,12,0.18) 0px 30px 45px -30px, rgba(0,0,0,0.10) 0px 18px 36px -18px; --sh-brand: rgba(11,138,91,0.18) 0px 18px 40px -18px; /* Mono voice — eyebrows, badges, step numerals, price captions (zero load cost) */ --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; /* warm alternating band (replaces the old mint) */ --bg-mint: #f3eee2; /* Radius — conservative, never pills on cards */ --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px; /* Type scale — display-tier hero (≥1.8:1 vs section headings) */ --fs-hero: clamp(2.8rem, 6.4vw, 4.55rem); --fs-h2: clamp(1.8rem, 3.2vw, 2.45rem); --fs-h3: 1.35rem; --fs-lead: clamp(1.05rem, 1.6vw, 1.25rem); --fs-body: 1rem; --fs-sm: 0.9rem; --fs-xs: 0.8rem; --maxw: 1120px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--body); font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 400; font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { color: var(--heading); font-weight: 400; /* Stripe move: light-weight display = luxury */ letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; } h1 { font-size: var(--fs-hero); font-weight: 300; letter-spacing: -0.034em; line-height: 1.03; } h2 { font-size: var(--fs-h2); font-weight: 350; } h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; } a { color: var(--brand-strong); text-decoration: none; } /* in-text (classless) links inside prose are underlined — distinguishable per WCAG */ :where(p, li) a:not([class]) { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(9,112,73,.5); } .nav a, .nav-links a, .footer a { text-decoration: none; } strong { color: var(--heading); font-weight: 600; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } section { padding: 96px 0; } .section-soft { background: var(--bg-soft); } .eyebrow { display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: 16px; } .section-head { max-width: 640px; margin-bottom: 48px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p { font-size: var(--fs-lead); color: var(--body); margin-top: 14px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body); font-weight: 500; line-height: 1; padding: 13px 22px; border-radius: var(--r-pill); border: 1px solid transparent; cursor: pointer; transition: transform .18s var(--ease), background .18s, box-shadow .18s, border-color .18s; white-space: nowrap; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: linear-gradient(180deg, #0a7e4f 0%, #086a43 100%); color: #fff; box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,0.18); } .btn-primary:hover { background: var(--brand-strong); transform: translateY(-1px); box-shadow: var(--sh-brand), inset 0 1px 0 rgba(255,255,255,0.12); } .btn-ghost { background: var(--surface); color: var(--heading); border-color: var(--border-strong); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand-strong); } .btn-on-dark { background: #fff; color: var(--heading); } .btn-on-dark:hover { background: var(--brand); color: #fff; transform: translateY(-1px); } .btn-lg { padding: 16px 28px; font-size: 1.05rem; } /* ---------- Nav (shared) ---------- */ .nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; gap: 18px; height: 66px; } .brand { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; color: var(--heading); margin-right: auto; } .brand em { font-style: normal; color: var(--brand-strong); } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a:not(.btn) { color: var(--label); font-size: var(--fs-sm); font-weight: 500; transition: color .15s; } .nav-links a:not(.btn):hover { color: var(--brand-strong); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; } @media (max-width: 860px) { .nav-links { display: none; } .nav-links.open { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; position: absolute; top: 66px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 22px 24px; box-shadow: var(--sh-2); } .nav-links.open .btn-primary { width: 100%; justify-content: center; } .nav-toggle { display: block; } } /* ---------- Cards — Stripe elevation ladder, green-tinted ---------- */ .card { background: var(--surface); border: 1px solid var(--border-tint); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-1); transition: transform .2s var(--ease), box-shadow .2s, border-color .2s; } .card:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--border-strong); } .card-icon { width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; background: linear-gradient(180deg, #fff 0%, var(--brand-soft) 100%); border: 1px solid var(--border-tint); color: var(--brand-strong); margin-bottom: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.85), rgba(10,42,32,0.04) 0 2px 6px; } .card-icon svg { width: 22px; height: 22px; } .card h3 { margin-bottom: 8px; } .card p { font-size: var(--fs-sm); color: var(--body); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-xs); font-weight: 600; padding: 6px 13px; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong); border: 1px solid rgba(11,138,91,0.18); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-bright); } .price-from { color: var(--brass); font-weight: 600; font-feature-settings: 'tnum'; } /* ---------- Dark brand section — Linear luminance: glow hairline at the seam ---------- */ /* dark impact bands + footer use the brighter brass (rich brass is too dark on ink) */ .section-dark, .footer { --brass: #e9b949; } .section-dark { background: var(--bg-dark); color: var(--on-dark); position: relative; } .section-dark::after, .footer::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 8%, rgba(18,184,134,0.45) 50%, transparent 92%); } .footer { position: relative; } .section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; } .section-dark p { color: var(--on-dark-soft); } /* ---------- Footer ---------- */ .footer { background: var(--bg-dark); color: var(--on-dark-soft); padding: 64px 0 36px; } .footer a { color: var(--on-dark-soft); transition: color .15s; } .footer a:hover { color: #fff; } .footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 44px; } .footer h3 { color: #fff; font-size: var(--fs-sm); font-weight: 600; margin-bottom: 16px; letter-spacing: 0; line-height: 1.08; } .footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; font-size: var(--fs-xs); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; } @media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } /* ---------- Reveal animation (CSS-only, no GSAP) ---------- */ @media (prefers-reduced-motion: no-preference) { /* Gated on html.js so the page is fully visible without JS (graceful degradation) */ html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); } html.js .reveal.in { opacity: 1; transform: none; } } /* ---------- Persistent WhatsApp contact (every page) ---------- */ .wa-float { position: fixed; bottom: 22px; right: 22px; z-index: 50; width: 54px; height: 54px; border-radius: 50%; background: #25D366; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(37,211,102,0.4); transition: transform .18s var(--ease); } .wa-float:hover { transform: scale(1.06); } .wa-float svg { width: 28px; height: 28px; fill: #fff; } /* ---------- Utility grids ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } @media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (max-width: 620px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } /* ---------- Theme toggle button (injected into nav by theme.js) ---------- */ .theme-toggle { background: var(--bg-soft); border: 1px solid var(--border-strong); border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--label); transition: color .15s, border-color .15s, transform .15s, background .15s; flex-shrink: 0; } .theme-toggle:hover { color: var(--brand-strong); border-color: var(--brand); transform: rotate(12deg); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .moon { display: none; } html[data-theme="dark"] .theme-toggle .sun { display: none; } html[data-theme="dark"] .theme-toggle .moon { display: block; } /* ---------- Dark mode — ink + emerald, matches the motion homepage ---------- */ html[data-theme="dark"] { --bg: #04100b; --bg-soft: #08170f; --bg-dark: #030c08; --surface: #0a1d14; --heading: #f4faf7; --label: #d6e7dd; --body: #b9cfc2; --muted: #8da698; --border: rgba(160,225,196,0.12); --border-strong: rgba(160,225,196,0.24); --border-tint: rgba(160,225,196,0.14); --bg-mint: #07170f; --brand: #12b886; --brand-strong: #3ddfa9; --brand-soft: rgba(18,184,134,0.14); --brand-tint: rgba(18,184,134,0.08); --brand-bright: #3ddfa9; --brass: #e9b949; --brass-soft: rgba(233,185,73,0.14); --sh-1: rgba(0,0,0,0.35) 0px 3px 10px; --sh-2: rgba(0,0,0,0.45) 0px 14px 34px; --sh-3: rgba(0,0,0,0.55) 0px 30px 50px -28px, rgba(0,0,0,0.40) 0px 16px 32px -18px; --sh-brand: rgba(18,184,134,0.30) 0px 18px 44px -18px; } html[data-theme="dark"] body { background-image: radial-gradient(900px circle at 20% -10%, rgba(18,184,134,0.06), transparent 50%), radial-gradient(700px circle at 90% 0%, rgba(13,160,160,0.04), transparent 45%); } html[data-theme="dark"] .nav { background: rgba(5,18,13,0.78); } /* neutralise per-page light hero gradients in dark */ html[data-theme="dark"] .hero::before, html[data-theme="dark"] .vis-hero::before, html[data-theme="dark"] .work-hero::before, html[data-theme="dark"] .nf-hero::before, html[data-theme="dark"] .price-hero::before { background: radial-gradient(60% 50% at 85% 0%, rgba(18,184,134,0.10), transparent 70%), var(--bg) !important; } html[data-theme="dark"] main { background: radial-gradient(60% 45% at 85% 0%, rgba(18,184,134,0.06), transparent 70%), var(--bg); } /* hero accents: exact gradient parity with the motion homepage */ html[data-theme="dark"] .hero h1 .accent, html[data-theme="dark"] .vis-hero h1 .accent, html[data-theme="dark"] .work-hero h1 .accent, html[data-theme="dark"] .price-hero h1 .accent { background: linear-gradient(92deg, #3ddfa9, #12b886); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="dark"] img.hero-shot, html[data-theme="dark"] .work-item, html[data-theme="dark"] .fw-shots a { border-color: var(--border-strong); } html[data-theme="dark"] .card-icon { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(18,184,134,0.12) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }