/* ============================================================ IT'S ALL LOVE — DESIGN SYSTEM (Option A · Editorial) ial-tokens.css — single source of truth for the whole site. Load this first, before any page CSS. ------------------------------------------------------------ Deploy: /home/doboeo1p00ii/public_html/itsalllove/assets/css/ial-tokens.css Fonts: self-host or use the Google Fonts in . ============================================================ */ :root{ /* ---- Brand color ---- */ --ink: #0A0A0A; /* primary text / dark surfaces */ --paper: #FFFFFF; /* primary background */ --paper-2: #F6F5F2; /* subtle raised background */ --love: #D81E34; /* Love Red — primary accent, tuned to the logo */ --love-dark: #B8172B; /* hover state for red */ --gold: #F5B301; /* Vibrant Gold — event / highlight accent */ --purple: #6D28D9; /* Electric Purple — culture / art accent */ --blue: #1E6FE0; /* Community Blue — data / links accent */ --line: #E7E5E0; /* hairline borders */ --muted: #6B6862; /* secondary text */ /* ---- Typography ---- */ --font-display: 'Inter Tight', system-ui, sans-serif; /* headings */ --font-util: 'Space Grotesk', monospace; /* eyebrows, labels, data */ --font-body: 'Inter', system-ui, sans-serif; /* body copy */ /* Type scale (mobile → clamp handles desktop growth) */ --t-hero: clamp(3rem, 15vw, 5.6rem); --t-h2: clamp(2.2rem, 9vw, 3.4rem); --t-h3: 1.5rem; --t-lead: 1.15rem; --t-body: 1rem; --t-small: 0.82rem; --t-eyebrow: 0.72rem; /* ---- Spacing (8px base grid) ---- */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 40px; --s-6: 48px; --s-7: 56px; --s-8: 64px; --pad: 24px; /* section side padding (mobile) */ --sep: 56px; /* vertical section separation (mobile) */ /* ---- Radius ---- */ --r-card: 16px; --r-btn: 12px; --r-pill: 999px; /* ---- Elevation & motion ---- */ --shadow: 0 20px 60px rgba(10,10,10,.10); --ease: cubic-bezier(.7,0,.2,1); --dur: .25s; } @media (min-width:768px){ :root{ --pad:48px; --sep:96px; } } /* ============================================================ BASE ============================================================ */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--paper); color:var(--ink); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,.display{ font-family:var(--font-display); letter-spacing:-.03em; line-height:.98; } .wrap{padding-left:var(--pad);padding-right:var(--pad);max-width:1200px;margin-inline:auto} .section{padding-top:var(--sep);padding-bottom:var(--sep)} /* ============================================================ TYPE UTILITIES ============================================================ */ .eyebrow{ font-family:var(--font-util); font-weight:700; font-size:var(--t-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--love); } .lead{font-size:var(--t-lead);color:var(--muted)} .muted{color:var(--muted)} /* ============================================================ BUTTONS ============================================================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--font-display);font-weight:700;font-size:.95rem; padding:15px 26px;border-radius:var(--r-btn); border:1.5px solid transparent;cursor:pointer; transition:var(--dur); } .btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .btn-primary{background:var(--love);color:#fff} .btn-primary:hover{background:var(--love-dark);transform:translateY(-2px)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#fff} .btn-block{display:flex;width:100%} /* ============================================================ CARD ============================================================ */ .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; transition:var(--dur); } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} /* ============================================================ MOTION — scroll reveal + reduced-motion guard ============================================================ */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} *{animation:none!important} html{scroll-behavior:auto} } /* ============================================================ ACCESSIBILITY ============================================================ */ :focus-visible{outline:3px solid var(--blue);outline-offset:2px} .skip{position:absolute;left:-999px} .skip:focus{left:var(--pad);top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:var(--r-btn);z-index:100}