/* ============================================================ MOVE ON A DIME — tokens.css Sky Spritz palette + MOAD orange + rounded bento vibe. Inherits the V6 Benjo-chill spirit: soft brutalist, sans-serif. ============================================================ */ @import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&f[]=clash-grotesk@400,500,600,700&display=swap'); :root { /* ---------- Sky Spritz palette ---------- */ --paper: #EEF3F8; /* mist */ --paper-2: #E2EAF2; --paper-3: #D4DEEC; --ink: #142033; /* deep midnight blue ink */ --ink-2: #243349; --ink-soft: rgba(20, 32, 51, 0.08); /* ---------- Accents ---------- */ --azure: #3D7DDB; /* sky azure */ --azure-2: #5C97EE; --butter: #FFE38A; /* butter yellow */ --lilac: #C8B5E5; /* dusty lavender from Sky Spritz */ /* ---------- MOAD ORANGE — the action color ---------- */ --orange: #FF5005; /* the brand orange */ --orange-2: #FF7A3D; /* hover */ --orange-soft: rgba(255, 80, 5, 0.12); /* ---------- Coin / metallic accents (for dimes) ---------- */ --silver: #C9CDD4; --silver-2: #E5E8ED; --coin-deep: #1A1F2A; /* inside-coin background to match dime artwork */ /* ---------- Text ---------- */ --fg: var(--ink); --fg-2: #4A5468; --fg-muted: #7C8AA0; --bg: var(--paper); --line: var(--ink); /* ---------- Type ---------- */ --font-display: 'Clash Grotesk', 'General Sans', ui-sans-serif, system-ui, sans-serif; --font-ui: 'General Sans', ui-sans-serif, system-ui, sans-serif; --font-mono: 'General Sans', ui-monospace, ui-sans-serif, monospace; /* ---------- Borders + radii (rounded vibe) ---------- */ --b: 2px solid var(--ink); --b-thin: 1.5px solid var(--ink); --r: 18px; --r-card: 22px; --r-pill: 999px; --r-btn: 14px; /* ---------- Shadow (offset + softened) ---------- */ --sh: 4px 4px 0 var(--ink); --sh-press: 2px 2px 0 var(--ink); --sh-lg: 6px 6px 0 var(--ink); --sh-soft: 0 8px 24px rgba(20, 32, 51, 0.08); --ease: cubic-bezier(0.2, 0.7, 0.1, 1); --dur: 220ms; } * { box-sizing: border-box; } html, body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); margin: 0; -webkit-font-smoothing: antialiased; } /* ============================================================ Body background variants — switched by data-bg on Default = "blueprint" (the original dot+line grid). ============================================================ */ /* default / fallback */ body { background-color: var(--paper); position: relative; } /* Subtle ambient highlight on EVERY background — a soft radial near center that drifts slowly. Adds design vibe without being noisy. */ body::before { content: ""; position: fixed; inset: -10%; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 55% 45% at var(--amb-x, 50%) var(--amb-y, 45%), rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 35%, transparent 70%); mix-blend-mode: soft-light; animation: amb-drift 22s ease-in-out infinite; } @keyframes amb-drift { 0%, 100% { --amb-x: 48%; --amb-y: 42%; opacity: 0.85; } 25% { --amb-x: 56%; --amb-y: 48%; opacity: 1; } 50% { --amb-x: 52%; --amb-y: 54%; opacity: 0.9; } 75% { --amb-x: 44%; --amb-y: 46%; opacity: 1; } } @property --amb-x { syntax: ''; inherits: false; initial-value: 50%; } @property --amb-y { syntax: ''; inherits: false; initial-value: 45%; } /* 1. Blueprint grid — original layered look: fine dot field (~6px) + sparse 56px line grid. --grid-dot / --grid-line per-layer alpha; --grid-opacity multiplies. */ body[data-bg="blueprint"] { background-color: var(--paper); background-image: radial-gradient(rgba(20, 32, 51, calc(var(--grid-dot, 0.16) * var(--grid-opacity, 1))) 1px, transparent 1px), linear-gradient(rgba(61, 125, 219, calc(var(--grid-line, 0.12) * var(--grid-opacity, 1))) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 125, 219, calc(var(--grid-line, 0.12) * var(--grid-opacity, 1))) 1px, transparent 1px); background-size: 6px 6px, 56px 56px, 56px 56px; } /* 2. Cream paper — warm off-white, fine grain */ body[data-bg="cream"] { background-color: #F4EFE6; background-image: radial-gradient(rgba(80, 60, 30, 0.05) 1px, transparent 1px), radial-gradient(rgba(80, 60, 30, 0.04) 1px, transparent 1px); background-size: 3px 3px, 7px 7px; background-position: 0 0, 1.5px 1.5px; } /* 3. Newsprint — slightly grey warm, denser grain */ body[data-bg="newsprint"] { background-color: #ECE7DC; background-image: radial-gradient(rgba(40, 30, 15, 0.07) 0.6px, transparent 0.7px), radial-gradient(rgba(40, 30, 15, 0.05) 0.6px, transparent 0.7px); background-size: 2.5px 2.5px, 5px 5px; background-position: 0 0, 1.2px 1.8px; } /* 4. Linen — cool ivory + woven cross-hatch */ body[data-bg="linen"] { background-color: #EFEAE0; background-image: repeating-linear-gradient(0deg, rgba(60, 45, 25, 0.04) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(60, 45, 25, 0.04) 0 1px, transparent 1px 3px); } /* 5. Concrete — neutral cool grey + soft mottle */ body[data-bg="concrete"] { background-color: #E4E2DD; background-image: radial-gradient(circle at 25% 30%, rgba(60,55,45,0.06) 0, transparent 35%), radial-gradient(circle at 70% 75%, rgba(60,55,45,0.05) 0, transparent 40%), radial-gradient(rgba(40,35,25,0.06) 1px, transparent 1.2px); background-size: auto, auto, 4px 4px; } /* 6. Solid — totally clean, no texture */ body[data-bg="solid"] { background-color: var(--paper); background-image: none; } ::selection { background: var(--orange); color: white; } :focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; } body { line-height: 1.45; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0; } /* ============================================================ Orange swatch fill — masked into text or filling buttons ============================================================ */ .swatch-text { display: inline-block; padding: 0.04em 0.06em 0.08em 0.04em; /* breathing room on all sides so cover fully wraps every glyph */ margin: -0.04em -0.06em -0.08em -0.04em; /* pull layout back so spacing looks unchanged */ background-image: url('./images/orange-sw-wide.avif'); background-repeat: no-repeat; background-size: cover; background-position: center; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; /* Default orange button = swatch background. Use longhand props so they don't get reset by a `background:` shorthand later. */ background-color: var(--orange); background-image: url('./images/orange-sw-wide.avif'); background-repeat: no-repeat; background-size: cover; background-position: center; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.3); border: 2px solid var(--ink); border-radius: var(--r-btn); font-family: var(--font-ui); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; box-shadow: var(--sh); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); text-decoration: none; white-space: nowrap; } .btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); background-color: var(--orange-2); } .btn:active { transform: translate(2px, 2px); box-shadow: var(--sh-press); } /* Ghost variant — flat paper, no swatch. Override longhands explicitly. */ .btn--ghost { background-color: var(--paper); background-image: none; color: var(--ink); text-shadow: none; } .btn--ghost:hover { background-color: var(--azure); color: white; } .btn--big { padding: 18px 28px; font-size: 16px; } .btn--sm { padding: 9px 14px; font-size: 12px; } /* .btn--swatch kept as an alias — .btn already carries the swatch now. */ .btn--swatch { /* no-op, retained for backwards compat */ } /* ============================================================ Cards / Bento tiles ============================================================ */ .card { background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-card); box-shadow: var(--sh); padding: 28px; position: relative; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card--azure { background: var(--azure); color: white; } .card--butter { background: var(--butter); } .card--lilac { background: var(--lilac); } .card--ink { background: var(--ink); color: var(--paper); } .card--orange { background: var(--orange); color: white; } .card--paper2 { background: var(--paper-2); } /* Orange swatch fill on a card — same texture as .btn--swatch and .swatch-text. Defined AFTER .card so its background-image isn't reset by the .card `background:` shorthand. */ .card--swatch { background-color: var(--orange); background-image: url('./images/orange-sw-wide.avif'); background-repeat: no-repeat; background-size: cover; background-position: center; color: white; text-shadow: 0 1px 2px rgba(0,0,0,0.25); } .card-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: inherit; opacity: 0.7; margin-bottom: 6px; } .card-title { font-family: var(--font-display); font-size: 36px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.0; margin: 0 0 8px 0; } .card-tease { font-size: 18px; font-weight: 500; line-height: 1.35; margin-bottom: 14px; opacity: 0.95; } .card-body { font-size: 15px; line-height: 1.55; color: inherit; } .card-body p { margin: 0 0 10px 0; } /* ============================================================ Inputs (bento-feel, big & friendly) ============================================================ */ .input { width: 100%; padding: 18px 20px; background: white; border: 2px solid var(--ink); border-radius: var(--r-btn); font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; box-shadow: 4px 4px 0 var(--ink); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); } .input:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); } .input:focus { outline: none; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--orange); border-color: var(--orange); } .input::placeholder { color: var(--fg-muted); font-weight: 400; } @media (max-width: 640px) { .input { font-size: 22px; padding: 14px 16px; box-shadow: 3px 3px 0 var(--ink); } } /* ============================================================ Step list (sequential nav across walkthrough) ============================================================ */ .steps { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-soft); margin-bottom: 28px; } .step { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--paper-2); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-btn); font-family: var(--font-ui); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; } .step:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 var(--ink); } .step .num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: var(--ink); color: var(--paper); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.05em; } .step--done { background: var(--azure); color: white; } .step--done .num { background: white; color: var(--azure); } .step--current { background: var(--orange); color: white; box-shadow: 3px 3px 0 var(--ink); animation: step-pulse 1.6s var(--ease) infinite; position: relative; } .step--current .num { background: white; color: var(--orange); } .step--current::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: -8px; height: 4px; background: var(--ink); border-radius: 2px; transform-origin: center; animation: step-tick-grow 420ms cubic-bezier(0.2, 0.7, 0.1, 1) both; } @keyframes step-tick-grow { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } } .step--locked { opacity: 0.45; filter: saturate(0.6); cursor: not-allowed; } .step-arrow { color: var(--fg-muted); font-size: 13px; } @keyframes step-pulse { 0%, 100% { box-shadow: 3px 3px 0 var(--ink); } 50% { box-shadow: 5px 5px 0 var(--ink); transform: translate(-1px, -1px); } } /* ============================================================ COIN — the central visual motif ============================================================ */ .coin { position: relative; width: 220px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; background: var(--coin-deep); border: 2px solid var(--ink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink), 0 12px 28px rgba(20, 32, 51, 0.35); } .coin img { width: 100%; height: 100%; object-fit: cover; display: block; } .coin--sm { width: 96px; } .coin--md { width: 140px; } .coin--lg { width: 280px; } .coin--xl { width: 360px; } /* Slow rotate */ .coin--spin { animation: coin-spin 22s linear infinite; } @keyframes coin-spin { to { transform: rotate(360deg); } } /* Explicit reduced-motion guard for the coin spin — the global guard zeroes animation duration but keeps the keyframe transform as the final state, so we hard-cancel here to keep the coin upright. */ @media (prefers-reduced-motion: reduce) { .coin--spin { animation: none !important; } } /* Float drift */ .coin--float { animation: coin-float 6s var(--ease) infinite; } @keyframes coin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* Coin flip on entrance */ .coin--flip-in { animation: coin-flip 1.6s var(--ease) both; } @keyframes coin-flip { 0% { transform: rotateY(0deg) scale(0.4); opacity: 0; } 60% { transform: rotateY(720deg) scale(1.05); opacity: 1; } 100% { transform: rotateY(720deg) scale(1); } } /* Rim engraving — circular text wrapper */ .coin-engrave { position: relative; display: inline-block; } .coin-engrave svg { position: absolute; inset: -12%; width: 124%; height: 124%; pointer-events: none; overflow: visible; } .coin-engrave svg text { font-family: var(--font-display); font-weight: 600; font-size: 8px; letter-spacing: 0.28em; fill: var(--silver-2); text-transform: uppercase; } /* Glow when chosen */ .coin--glow { box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--orange), 0 0 40px var(--orange), 0 12px 28px rgba(255, 80, 5, 0.4); } /* ============================================================ Vinyl groove decoration ============================================================ */ .grooves { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 18%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0.06) 19%, transparent 19%, transparent 22%, rgba(255,255,255,0.05) 22%, rgba(255,255,255,0.05) 23%, transparent 23%, transparent 27%, rgba(255,255,255,0.04) 27%, rgba(255,255,255,0.04) 28%, transparent 28%, transparent 33%, rgba(255,255,255,0.04) 33%, rgba(255,255,255,0.04) 34%, transparent 34%); mix-blend-mode: screen; } /* ============================================================ Layout helpers ============================================================ */ .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; } /* Break out of container — used by full-bleed phases like Step 03 ladder */ .bento--bleed { margin-left: calc(50% - 50vw + 32px); margin-right: calc(50% - 50vw + 32px); padding-left: 32px; padding-right: 32px; max-width: none; } @media (max-width: 880px) { .bento--bleed { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } .section { padding: 40px 0; } .section--tight { padding: 20px 0; } /* Shared height baseline for the walkthrough steps so the user doesn't see big jumps between phases. Steps 04–09 opt in by adding the step-NN class on the .bento section. */ :root { --step-min-h: 540px; } .bento.step-04, .bento.step-06, .bento.step-07, .bento.step-09 { min-height: var(--step-min-h); } .bento.step-04 > .card, .bento.step-06 > .card, .bento.step-07 > .card, .bento.step-09 > .card { min-height: var(--step-min-h); } .bento.step-05 { min-height: calc(var(--step-min-h) - 140px); } .bento.step-05 > .card { min-height: calc(var(--step-min-h) - 140px); } .bento.step-08 { min-height: var(--step-min-h); } .bento.step-08 > .card { min-height: var(--step-min-h); } /* Step 04 is the exception — it's a 2-row bento (slim hero on row 1, body+rail on row 2). Forcing every card to 540px stacks heights and the section balloons past the shared floor. Reset child min-heights so only the section-level min-height applies. */ .bento.step-04 > .card { min-height: 0; } @media (max-width: 880px) { .bento.step-04, .bento.step-05, .bento.step-06, .bento.step-07, .bento.step-08, .bento.step-09 { min-height: 0; } .bento.step-04 > .card, .bento.step-05 > .card, .bento.step-06 > .card, .bento.step-07 > .card, .bento.step-08 > .card, .bento.step-09 > .card { min-height: 0; } } .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(100px, auto); gap: 18px; } .bento .span-2 { grid-column: span 2; } .bento .span-3 { grid-column: span 3; } .bento .span-4 { grid-column: span 4; } .bento .span-6 { grid-column: span 6; } .bento .row-2 { grid-row: span 2; } @media (max-width: 880px) { .bento { grid-template-columns: 1fr; } .bento [class*="span-"] { grid-column: span 1; } .bento [class*="row-"] { grid-row: auto; } .container { padding: 0 18px; } .section { padding: 28px 0; } } /* ============================================================ MOAD wordmark — split treatment from the coin artwork ============================================================ */ .wordmark { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 0.9; } .wordmark span { display: inline-block; } .wordmark .ink { color: var(--ink); } .wordmark .accent { color: var(--orange); } /* ============================================================ Confetti / sparks at payoff ============================================================ */ .spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); pointer-events: none; animation: spark-fly 2s var(--ease) forwards; } @keyframes spark-fly { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--sx, 100px), var(--sy, -120px)) scale(0); opacity: 0; } } /* ============================================================ Utilities ============================================================ */ .muted { color: var(--fg-muted); } .tiny { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .divider { height: 3px; background: var(--ink); border-radius: 3px; margin: 24px 0; } .center { text-align: center; } /* ============================================================ Global motion guard — respect prefers-reduced-motion ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ Mobile tightening — typography, padding, button sizing ============================================================ */ @media (max-width: 640px) { .card { padding: 22px; border-radius: var(--r-card-sm, 18px); } .card-title { font-size: clamp(28px, 7vw, 42px) !important; line-height: 1.02; letter-spacing: -0.02em; } .card-eyebrow { font-size: 10px; } .btn { padding: 12px 18px; font-size: 14px; width: 100%; justify-content: center; } .btn--big { padding: 14px 20px; font-size: 15px; } .btn--sm { width: auto; } .btn--ghost { width: 100%; } }