/* Hallmark · genre: playful · macrostructure: Marquee Hero (hero-only phase) · theme: Hum + iMessage-blue card * axes: paper=light(97%) · display=rounded-sans · accent=multi (pear 95 / cyan 235 / coral 18 / hero-blue 258) * nav: N9 edge-aligned minimal (blue sent-bubble CTA) · footer: bubble-hills scape (Nabi register) * enrichment: blue hero card + iPhone render + two-scene chat loop (day bit / 2AM dark-mode fraud scene) * + SVG character cast with agent job chips (Penny/Dozer/Mint/Pip/Sunny, Grok-minimal capsule eyes) * contrast: pass (40-41) · mobile: pass (34, 49, 50-57) · honest: pass (46) · tokens: pass (48) * + hero phone plays four real scenes (dining bit 9:41, sushi check 5:42, the $10,818 * payout 8:12 with LFG, fraud 2:07 night mode); each prefills the last scene as history * + teach-it-once board (pinned memory notes: agent tints, tape strips, tilt, brain tapbacks) * + scroll rhythm: section heads rise on eyeline, notes pin in with spring settle, board hover lift * pre-emit critique: P5 H5 E5 S5 R4 V5 */ :root { /* color · Hum palette */ --color-paper: oklch(97% 0.012 95); --color-paper-2: oklch(94% 0.016 95); --color-paper-3: oklch(91% 0.020 95); --color-ink: oklch(20% 0.012 250); --color-accent: oklch(86% 0.18 95); /* pear · primary action */ --color-accent-deep: oklch(72% 0.15 95); /* pear edge for push buttons */ --color-accent-cast: oklch(76% 0.20 95 / 0.45); --color-accent-2: oklch(66% 0.18 235); /* sky-cyan · links, tints */ --color-accent-3: oklch(68% 0.24 18); /* coral · the one loud moment */ --color-mint: oklch(80% 0.16 150); --color-lavender: oklch(74% 0.16 305); --color-focus: oklch(55% 0.19 235); /* tints for bands and cards (accent at low opacity over paper) */ --tint-pear: oklch(93% 0.055 95); --tint-pear-soft: oklch(94% 0.038 95); /* matches cyan/mint weight; yellow needs a touch more chroma to stay warm */ --tint-cyan: oklch(93% 0.030 235); --tint-blue: oklch(93.5% 0.028 258); /* chat-blue family, for surfaces about texting */ --tint-coral: oklch(94% 0.025 18); --tint-mint: oklch(94% 0.030 150); --tint-lav: oklch(93% 0.030 305); /* hero card · iMessage-blue stage (Nabi-style color block) */ --hero-blue: oklch(52% 0.19 258); --hero-blue-deep: oklch(46% 0.18 258); --hero-ink: oklch(99% 0.003 258); --hero-ink-soft: oklch(99% 0.003 258 / 0.92); --radius-hero: 32px; --char-face: oklch(24% 0.012 250); /* bubble buttons */ --bubble-white: oklch(99% 0.002 95); --bubble-white-edge: oklch(85% 0.008 250); --bubble-white-cast: oklch(20% 0.012 250 / 0.30); --hero-blue-cast: oklch(46% 0.18 258 / 0.45); /* ink at opacity, never new greys */ --ink-90: oklch(20% 0.012 250 / 0.90); --ink-70: oklch(20% 0.012 250 / 0.70); --ink-60: oklch(20% 0.012 250 / 0.60); --ink-25: oklch(20% 0.012 250 / 0.25); --ink-12: oklch(20% 0.012 250 / 0.12); --ink-08: oklch(20% 0.012 250 / 0.08); /* chip elevation · one crisp contact + one tight ambient, engineered not fluffy */ --shadow-chip: 0 1px 2px oklch(20% 0.012 250 / 0.05), 0 4px 10px -4px oklch(20% 0.012 250 / 0.10); --shadow-chip-hover: 0 1px 2px oklch(20% 0.012 250 / 0.06), 0 8px 18px -6px oklch(20% 0.012 250 / 0.16); /* agent chips · Live Activity pills. These are the background layer of the * product reporting in, so they are deliberately NOT another white card: * the page already spends white on the phone, the bubbles and the composer. * * The face is a blue-black in the slab's own hue (258), two steps lighter * than the phone bezel so a chip never merges into it. * * ONE face for all three, deliberately. Giving each chip its mascot's colour * was tried and reverted: colour is this page's scarce resource and the blue * slab already spends it, so three saturated cards competed with the slab and * landed on a red/green/brown trio that read as Material Design. The mascot * already carries its own identity in the avatar; repeating it in the card * face is redundant, and it forces Penny's yellow into brown, because yellow * has no dark form. Subtler versions (a faint hue cast, a lit coloured rim) * were tried too: the cast reads as grime, the rim reads as gaming UI. * Restraint is the whole look here. Leave the faces alone. */ --chip-face: oklch(24% 0.040 258); --chip-edge: oklch(100% 0 0 / 0.13); --chip-edge-hot: oklch(100% 0 0 / 0.30); --chip-sheen: oklch(100% 0 0 / 0.09); /* top-lit inset, what keeps dark UI from going flat */ --chip-ink: oklch(97% 0.004 95); --chip-ink-soft: oklch(100% 0 0 / 0.62); --chip-ink-meta: oklch(100% 0 0 / 0.52); --chip-up: oklch(72% 0.20 18); /* coral, lifted so it still reads on the dark face */ --radius-chip: 18px; /* float elevation · these hover OVER the blue slab, not on paper. Dark * objects need more shadow than light ones to sit convincingly. */ --shadow-float: 0 2px 4px oklch(18% 0.030 258 / 0.22), 0 18px 36px -12px oklch(18% 0.040 258 / 0.52); --shadow-float-hover: 0 3px 6px oklch(18% 0.030 258 / 0.26), 0 26px 48px -14px oklch(18% 0.040 258 / 0.60); /* highlighter bands */ --hl-pear: oklch(86% 0.18 95 / 0.55); --hl-coral: oklch(68% 0.24 18 / 0.28); /* frosted surfaces */ --nav-frost: oklch(97% 0.012 95 / 0.86); --shadow-tapback: 0 1px 3px oklch(20% 0.012 250 / 0.14); /* phone interior · iMessage palette (its own system, scoped to the phone) */ --phone-bezel: oklch(16% 0.012 250); --phone-screen: oklch(99.5% 0.002 95); --phone-blue: oklch(55% 0.20 258); /* a notch darker than stock so 13px white passes 4.5:1 */ --phone-blue-ink: oklch(99% 0.003 258); --phone-gray: oklch(93% 0.004 270); --phone-gray-ink: oklch(22% 0.010 250); --phone-meta: oklch(55% 0.010 250); --phone-hairline: oklch(88% 0.005 270); --phone-head: oklch(97% 0.003 270 / 0.85); --phone-avatar-1: oklch(88% 0.004 270); --phone-avatar-2: oklch(78% 0.006 270); /* emoji contact photos sit on an iOS pastel, not the monogram gray */ --phone-avatar-emoji-1: oklch(94% 0.065 95); --phone-avatar-emoji-2: oklch(88% 0.085 92); /* night card · Mint's 2 AM shift on the day-board */ --night: oklch(26% 0.030 265); --night-2: oklch(34% 0.028 265); /* received bubble on night */ --night-ink: oklch(97% 0.004 265); --night-meta: oklch(97% 0.004 265 / 0.62); --night-line: oklch(97% 0.004 265 / 0.15); --night-line-2: oklch(97% 0.004 265 / 0.30); --night-meta-2: oklch(97% 0.004 265 / 0.78); --night-chip-bg: oklch(80% 0.16 150 / 0.16); /* Mint's tag, translucent on night */ --night-chip-ink: oklch(88% 0.11 150); --night-chip-line: oklch(80% 0.16 150 / 0.34); --night-coral-bg: oklch(68% 0.24 18 / 0.18); /* alert glyph dot on night */ /* the hero phone's 2 AM shift · dark-mode surfaces for scene two */ --night-head: oklch(30% 0.028 265 / 0.85); --night-avatar-1: oklch(46% 0.055 95); --night-avatar-2: oklch(38% 0.06 92); --night-screen-fade: oklch(26% 0.030 265 / 0); --paper-screen-fade: oklch(99.5% 0.002 95 / 0); /* over-budget alarm · the coral bar heats up and glows */ --coral-deep: oklch(58% 0.24 25); --coral-glow: oklch(68% 0.24 18 / 0.40); /* faq draft chips · unsent-message look, phone-blue family */ --draft-bg: oklch(94% 0.030 258); --draft-line: oklch(55% 0.20 258 / 0.38); /* footer hills · money-green landscape, light-to-deep with distance */ --hill-1: oklch(66% 0.10 150); /* far ridge, hazier */ --hill-2: oklch(52% 0.13 150); /* mid */ --hill-3: oklch(44% 0.125 150); /* near ridge, deepest */ --hill-4: oklch(36% 0.11 150); /* meta pill, darker than any ridge */ /* setup cards · solid brand slabs, drawn from the two boldest surfaces the * page already has: the hero's iMessage blue and the footer's hills. The * third is the pear accent dropped to a honey, so the payoff card reads * warm instead of shouting over the other two. Deep enough to carry text, * so the white phones read as objects sitting ON the card. */ --step-blue: oklch(52% 0.190 258); /* texting · the hero blue, exactly */ --step-green: oklch(45% 0.125 150); /* money · between hill-2 and hill-3 */ --step-honey: oklch(74% 0.145 88); /* the payoff · pear, deepened */ --step-ink: oklch(99% 0.003 258); --step-ink-soft: oklch(100% 0 0 / 0.90); --step-line: oklch(100% 0 0 / 0.15); --step-line-hot: oklch(100% 0 0 / 0.34); --step-num-light: oklch(94% 0.100 95); /* pear, lifted to pass on the deep slabs */ --step-honey-ink: oklch(24% 0.045 80); --step-honey-soft: oklch(24% 0.045 80 / 0.82); --step-honey-num: oklch(34% 0.085 80); --step-honey-line: oklch(24% 0.045 80 / 0.14); --step-honey-hot: oklch(24% 0.045 80 / 0.32); /* each slab casts its own hue, so the trio sits on paper instead of floating */ --cast-blue: 0 1px 2px oklch(30% 0.09 258 / 0.10), 0 10px 24px -10px oklch(30% 0.09 258 / 0.38); --cast-blue-hot: 0 2px 4px oklch(30% 0.09 258 / 0.12), 0 18px 36px -12px oklch(30% 0.09 258 / 0.48); --cast-green: 0 1px 2px oklch(35% 0.08 150 / 0.10), 0 10px 24px -10px oklch(35% 0.08 150 / 0.38); --cast-green-hot: 0 2px 4px oklch(35% 0.08 150 / 0.12), 0 18px 36px -12px oklch(35% 0.08 150 / 0.48); --cast-honey: 0 1px 2px oklch(45% 0.10 88 / 0.12), 0 10px 24px -10px oklch(45% 0.10 88 / 0.40); --cast-honey-hot: 0 2px 4px oklch(45% 0.10 88 / 0.14), 0 18px 36px -12px oklch(45% 0.10 88 / 0.50); /* the serif voice · one manifesto line, said plainly */ --font-serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; /* the pen that writes on the sticky notes */ --font-hand: "Shantell Sans", "Bradley Hand", "Comic Sans MS", cursive; --pen-ink: oklch(38% 0.09 262); /* sticky notes · real post-it saturation, one per agent hue; the deep * variant shades the folded corner */ --sticky-pear: oklch(94% 0.115 101); --sticky-pear-deep: oklch(87% 0.115 98); --sticky-mint: oklch(94.5% 0.082 155); --sticky-mint-deep: oklch(87% 0.09 152); --sticky-lav: oklch(94% 0.062 299); --sticky-lav-deep: oklch(87% 0.07 300); /* hairline borders that match each agent tint (role tags) */ --line-mint: oklch(52% 0.14 150 / 0.30); --line-coral: oklch(55% 0.20 18 / 0.28); --line-pear: oklch(58% 0.13 95 / 0.38); --line-lav: oklch(52% 0.16 305 / 0.28); /* darker accent variants that pass small-text contrast on tinted bands */ --color-accent-text: oklch(52% 0.12 95); --color-accent-2-text: oklch(46% 0.13 235); --color-blue-text: oklch(47% 0.14 258); /* chat-blue that passes small text on --tint-blue */ --color-mint-text: oklch(42% 0.12 150); --color-coral-text: oklch(48% 0.17 18); --color-lav-text: oklch(45% 0.15 305); /* type */ --font-display: "Plus Jakarta Sans", "Geist", ui-rounded, system-ui, sans-serif; --font-body: "Plus Jakarta Sans", "Geist", ui-rounded, system-ui, sans-serif; --font-label: "JetBrains Mono", ui-monospace, monospace; --font-phone: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; /* scale · 1.25 major third */ --text-sm: 0.8rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.5625rem; --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-3xl: 3.0518rem; --text-display: clamp(2.5rem, 3.6vw + 0.9rem, 4.15rem); --text-number: clamp(1.6rem, 4.5vw, 3.4rem); /* space · 4pt scale */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6.5rem; /* shell */ --page-max: 72rem; --page-gutter: clamp(1rem, 4vw, 2rem); --shell: var(--page-max); /* radius · Hum is the rounded theme */ --radius-card: 20px; --radius-input: 12px; --radius-pill: 999px; /* motion */ --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1); --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-snap: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-press: cubic-bezier(0.2, 0.7, 0.3, 1); --dur-fast: 140ms; --dur-med: 220ms; --dur-slow: 600ms; /* elevation · layered, contact + ambient */ --shadow-card: 0 1px 2px oklch(20% 0.012 250 / 0.06), 0 12px 32px -16px oklch(20% 0.012 250 / 0.16); --shadow-lift: 0 2px 4px oklch(20% 0.012 250 / 0.08), 0 20px 44px -18px oklch(20% 0.012 250 / 0.22); --shadow-phone: 0 2px 4px oklch(20% 0.012 250 / 0.10), 0 34px 70px -30px oklch(20% 0.012 250 / 0.35); /* z scale */ --z-nav: 500; --z-float: 20; --z-burst: 600; /* nav geometry */ --bar-h: 64px; }