/* ============================================================================ TRAIN WITH MAIS — BRAND DESIGN SYSTEM · brand.css ---------------------------------------------------------------------------- Single source of truth for every Train with Mais page. Link it in any page's , then build with the components below so everything stays on-brand. Voice: fun, warm, community-first. Visual-first, very little text (think apple.com / spacex.com, but joyful). Yellow leads; ink anchors; coral pops. Handle is @trainwithmais everywhere. Tagline: "On Mondays we chill." SECTIONS 1. Tokens 6. Section heads 2. Base / reset 7. Cards (ethos · session · strava · path) 3. Layout 8. Marquee · badge · final CTA 4. Typography 9. Footer 5. Buttons/chips 10. Utilities · motion · responsive ============================================================================ */ /* ─── 1. TOKENS ─────────────────────────────────────────────────────────── Use these variables instead of hard-coded values on new pages. */ :root{ /* color — palette */ --paper:#FBF4E6; /* warm off-white — default page background */ --paper-2:#F4E9D2; /* deeper paper — alternating sections */ --ink:#1C1710; /* warm near-black — text, borders, dark sections */ --ink-soft:#5B5346; /* muted ink — secondary text */ --sun:#FFC42E; /* PRIMARY gold (Mais's colour) — heroes, CTAs, fills */ --sun-deep:#F2A900; /* deeper gold — gradients, depth */ --ember:#FF5A36; /* coral pop — use sparingly: smile, accents, kudos */ --sea:#1F7A6D; /* swim / sea accent */ --line:rgba(28,23,16,.14); /* hairlines on paper */ /* color — on dark (ink) sections */ --on-ink: #FBF4E6; --on-ink-soft: rgba(251,244,230,.74); --on-ink-line: rgba(251,244,230,.20); /* type — families */ --display:"Fraunces", Georgia, serif; /* expressive soft serif */ --sans:"Hanken Grotesk", system-ui, sans-serif; /* clean body / UI */ /* type — scale (fluid). Headings should use these. */ --fs-display: clamp(3.1rem, 8.2vw, 6.6rem); /* hero statement */ --fs-h1: clamp(2.6rem, 7vw, 5.4rem); /* page / CTA headline */ --fs-h2: clamp(2.1rem, 5vw, 3.5rem); /* section headline */ --fs-h3: clamp(1.8rem, 3.4vw, 2.6rem); /* card / sub headline */ --fs-lead: clamp(1.05rem,1.5vw, 1.28rem); /* intro paragraph */ --fs-body: 1.05rem; --fs-small: .86rem; --fs-eyebrow: .78rem; /* shape / depth */ --r:22px; /* card radius */ --r-pill:100px; /* pills, buttons, chips */ --shadow: 0 18px 50px -22px rgba(28,23,16,.45); --shadow-sm: 0 8px 24px -14px rgba(28,23,16,.40); --shadow-pop:3px 3px 0 var(--ink); /* sticker / playful offset */ /* layout */ --maxw:1220px; --space-section:96px; /* vertical rhythm per block */ --gap:24px; /* motion */ --ease-bounce: cubic-bezier(.34,1.56,.64,1); --ease-out: cubic-bezier(.2,.7,.2,1); --dur:.25s; } /* ─── 2. BASE / RESET ─────────────────────────────────────────────────── */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} ::selection{background:var(--ink);color:var(--sun)} :focus-visible{outline:3px solid var(--ember);outline-offset:3px;border-radius:4px} /* grain overlay — tactile, premium texture over the whole page. */ body::before{ content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); mix-blend-mode:multiply; } /* ─── 3. LAYOUT ─────────────────────────────────────────────────────────── .wrap centred max-width container section.block standard vertical section spacing .alt one shade deeper background (alternate sections) .on-dark ink background section with light text */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} section.block{padding:var(--space-section) 0} .alt{background:var(--paper-2)} .on-dark{background:var(--ink);color:var(--on-ink)} .on-dark .eyebrow{color:var(--sun)} /* ─── 4. TYPOGRAPHY ─────────────────────────────────────────────────────── .serif/.ital switch family / style .eyebrow small uppercase label above a heading .hl yellow marker highlight behind inline text .smile the signature hand-drawn underline (smile / sun / route). Wrap a word in .smile and drop an arc inside; it draws itself when an ancestor gets .in-view. */ .serif{font-family:var(--display)} .ital{font-style:italic} .eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)} .hl{background:linear-gradient(transparent 62%, var(--sun) 62%);padding:0 .06em} .handle{font-weight:800;font-size:1rem} /* @trainwithmais */ .dotsep{width:5px;height:5px;border-radius:50%;background:var(--ink);opacity:.4} /* inline separator */ .smile{position:relative;display:inline-block} .smile svg{position:absolute;left:-2%;bottom:-.42em;width:104%;height:.5em;overflow:visible} .smile svg path{fill:none;stroke:var(--ember);stroke-width:9;stroke-linecap:round;stroke-dasharray:1000;stroke-dashoffset:1000} .in-view .smile svg path{animation:draw 1s .35s var(--ease-bounce) forwards} @keyframes draw{to{stroke-dashoffset:0}} /* ─── 5. BUTTONS & CHIPS ────────────────────────────────────────────────── .btn base pill button (defaults to ink) .btn--sun yellow (primary CTA) .btn--ghost outline .statchip data pill (km, pace…) .tag category pill on media .chip-float playful sticker (.c1/.c2 = preset float positions) .ph-label label on a media poster */ .btn{ display:inline-flex;align-items:center;gap:.55em; font-family:var(--sans);font-weight:700;font-size:1rem;line-height:1; padding:1.05em 1.6em;border-radius:var(--r-pill);border:2px solid var(--ink); background:var(--ink);color:var(--paper);cursor:pointer; transition:transform var(--dur) var(--ease-bounce), box-shadow var(--dur), background .2s; will-change:transform; } .btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:var(--shadow)} .btn--sun{background:var(--sun);color:var(--ink);border-color:var(--ink)} .btn--ghost{background:transparent;color:var(--ink)} .btn svg{width:18px;height:18px;flex:none} .t-short{display:none} /* responsive: show a shorter button label on mobile */ .statchip{background:rgba(251,244,230,.85);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:5px 11px;font-weight:700;font-size:.78rem;backdrop-filter:blur(3px)} .tag{background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-pill);padding:6px 12px;font-weight:700;font-size:.78rem} .chip-float{position:absolute;z-index:6;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-pill);padding:9px 14px;font-weight:700;font-size:.85rem;box-shadow:var(--shadow-pop);display:inline-flex;align-items:center;gap:7px} .chip-float.c1{left:-22px;top:34%;transform:rotate(-6deg);animation:bob 5s ease-in-out infinite} .chip-float.c2{right:6%;bottom:-18px;transform:rotate(4deg);background:var(--sun);animation:bob 6s ease-in-out infinite .6s} @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -9px}} .ph-label{position:absolute;left:16px;top:16px;z-index:3;display:inline-flex;align-items:center;gap:8px;background:rgba(28,23,16,.78);color:var(--paper);padding:8px 13px;border-radius:var(--r-pill);font-size:.8rem;font-weight:700;backdrop-filter:blur(4px)} /* Strava follow — the casual, recurring CTA. Put it in nav, hero and footer. */ .strava-mini{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.86rem;color:var(--ink-soft);transition:color .2s} .strava-mini:hover{color:var(--ember)} .strava-mini svg{width:16px;height:16px} /* ─── NAV ─────────────────────────────────────────────────────────────────