/* ============================================================ Millie — web2.0 homepage Hand-rolled, zero dependencies. Fonts self-hosted. ============================================================ */ /* ---------- Fonts ---------- */ @font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("../assets/fonts/fraunces-italic-var.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } @font-face { font-family: "Inter"; src: url("../assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ---------- Tokens ---------- */ :root { --primary: #2d4a3e; --primary-2: #243d33; --primary-dark: #1a2e25; --primary-light: #6b8e7a; --band-rgb: 199, 216, 208; /* mockup header-band / sage accent: a light tint of --primary; per-theme */ --navy: #203672; --seagreen: #2b8c7f; --bg: #f7f1e6; --bg-2: #efe5d2; --border: #d8cdb6; --muted: #b5a988; --apricot: #f3a26b; --apricot-deep: #d97e3f; --gold: #d4a548; --gold-deep: #b45309; --ink: #111827; --ink-soft: #5c626d; --white: #ffffff; --sky: #7da8c3; --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --wrap: 1160px; } /* Teal theme, synced exactly to the mobile app's Teal theme (mobile/lib/theme.ts, anchored on the app-icon teal #236477). Full palette, not just accents: the background/border tokens tint teal too, matching the mobile app's teal pages. bg=50, bg-2=100, border=200, muted=300, primary-light=400, primary=500, primary-2=600, primary-dark=900, band=100. Keep in lockstep with mobile. Toggled via the swatch pill (bottom left); class lives on . */ html.theme-teal { --bg: #EFF6F7; /* mobile Teal 50 */ --bg-2: #D6EAEE; /* mobile Teal 100 */ --border: #B2D6DD; /* mobile Teal 200 */ --muted: #82BAC5; /* mobile Teal 300 */ --primary-light: #4E96A6;/* mobile Teal 400 */ --primary: #236477; /* mobile Teal 500 */ --primary-2: #1D5565; /* mobile Teal 600 */ --primary-dark: #10303A; /* mobile Teal 900 */ --band-rgb: 214, 234, 238; /* mobile Teal 100 #D6EAEE */ } /* ---------- Reset-ish ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; } ::selection { background: var(--primary); color: var(--bg); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; } .skip-link { position: fixed; top: -60px; left: 20px; z-index: 200; background: var(--primary); color: var(--bg); padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px; transition: top 0.2s var(--ease-out); } .skip-link:focus { top: 16px; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* ---------- Grain + progress ---------- */ .grain { position: fixed; inset: -50%; z-index: 90; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: 0.045; animation: grain-shift 900ms steps(2) infinite; } @keyframes grain-shift { 0% { transform: translate(0, 0); } 50% { transform: translate(2%, -1%); } 100% { transform: translate(-1%, 2%); } } .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none; } .scroll-progress span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--gold), var(--apricot)); transform-origin: 0 50%; transform: scaleX(0); } /* ---------- Type helpers ---------- */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); } .eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none; box-shadow: 0 0 0 4px rgba(212, 165, 72, 0.22); } .eyebrow-light { color: var(--bg-2); } .eyebrow-light .eyebrow-dot { background: var(--apricot); box-shadow: 0 0 0 4px rgba(243, 162, 107, 0.25); } .display { font-family: var(--font-display); font-weight: 560; font-size: clamp(2.4rem, 5.4vw, 4.2rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--primary-dark); margin: 18px 0 20px; } .display-sm { font-family: var(--font-display); font-weight: 560; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.1; letter-spacing: -0.012em; color: var(--primary-dark); margin: 16px 0 18px; } .accent { font-style: italic; font-weight: 500; color: var(--gold-deep); } .accent-gold { font-style: italic; font-weight: 500; color: var(--gold); } .section-sub, .chapter-text { font-size: clamp(1rem, 1.35vw, 1.15rem); color: var(--ink-soft); max-width: 560px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; border-radius: 999px; transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out), background 0.25s var(--ease-out), color 0.25s var(--ease-out); will-change: transform; } .btn-primary { background: var(--primary); color: var(--bg); box-shadow: 0 10px 26px -10px rgba(45, 74, 62, 0.55); } .btn-primary:hover { background: var(--primary-2); box-shadow: 0 16px 34px -12px rgba(45, 74, 62, 0.65); } .btn-primary svg { transition: transform 0.35s var(--ease-spring); } .btn-primary:hover svg { transform: translateX(4px); } .btn-ghost { color: var(--primary); box-shadow: inset 0 0 0 2px var(--border); background: rgba(255, 255, 255, 0.5); } .btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--primary-light); background: var(--white); } .btn-lg { padding: 17px 32px; font-size: 16.5px; } .btn-sm { padding: 11px 22px; font-size: 14px; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 110; padding: 0 18px; } .nav-inner { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px 12px 6px 18px; border-radius: 999px; transition: background 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out); } .nav.is-scrolled .nav-inner { background: rgba(247, 241, 230, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 34px -16px rgba(26, 46, 37, 0.35), inset 0 0 0 1px rgba(216, 205, 182, 0.5); } .nav-brand { display: inline-flex; align-items: center; gap: 9px; } .nav-brand img { border-radius: 50%; } .nav-wordmark { font-family: var(--font-display); font-weight: 620; font-style: italic; font-size: 24px; color: var(--primary-dark); letter-spacing: -0.01em; } .nav-wordmark-sm { font-size: 20px; } .nav-links { display: flex; gap: 26px; } .nav-links a { font-size: 14.5px; font-weight: 560; color: var(--ink-soft); position: relative; padding: 4px 0; } .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold); border-radius: 2px; transition: right 0.3s var(--ease-out); } .nav-links a:hover { color: var(--primary-dark); } .nav-links a:hover::after { right: 0; } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 130px 0 90px; overflow: hidden; } .hero-bg { position: absolute; inset: 0; pointer-events: none; } .blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; } .blob-a { width: 46vw; height: 46vw; min-width: 420px; min-height: 420px; right: -12vw; top: -8vw; background: radial-gradient(circle at 35% 35%, rgba(243, 162, 107, 0.5), rgba(243, 162, 107, 0) 65%); animation: blob-drift 14s ease-in-out infinite alternate; } .blob-b { width: 38vw; height: 38vw; min-width: 340px; min-height: 340px; left: -14vw; bottom: -10vw; background: radial-gradient(circle at 60% 40%, rgba(107, 142, 122, 0.42), rgba(107, 142, 122, 0) 65%); animation: blob-drift 18s ease-in-out infinite alternate-reverse; } .theme-teal .blob-b { background: radial-gradient(circle at 60% 40%, rgba(78, 150, 166, 0.42), rgba(78, 150, 166, 0) 65%); } @keyframes blob-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(4vw, 3vw) scale(1.08); } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 40px; position: relative; z-index: 2; } .hero-title { font-family: var(--font-display); font-weight: 570; font-size: clamp(3rem, 7.2vw, 6rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--primary-dark); margin: 22px 0 24px; } .line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } .line { display: block; transform: translateY(110%); animation: line-up 1s var(--ease-out) forwards; animation-delay: calc(0.12s + var(--i) * 0.14s); } @keyframes line-up { to { transform: translateY(0); } } .hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--ink-soft); max-width: 480px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .hero-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin-top: 26px; } .hero-trust li { font-size: 13.5px; font-weight: 560; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; } .hero-trust li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--apricot); } /* Hero stage */ .hero-stage { position: relative; height: clamp(380px, 42vw, 560px); display: flex; align-items: center; justify-content: center; } .hero-stage [data-depth] { will-change: transform; } .hero-ring { position: absolute; width: clamp(320px, 34vw, 470px); height: clamp(320px, 34vw, 470px); border-radius: 50%; border: 2px dashed rgba(180, 83, 9, 0.35); animation: spin 60s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .hero-owl { width: clamp(240px, 26vw, 360px); height: auto; filter: drop-shadow(0 24px 34px rgba(26, 46, 37, 0.22)); animation: owl-float 5.5s ease-in-out infinite; cursor: pointer; transition: transform 0.4s var(--ease-spring); } .hero-owl.is-hooting { animation: owl-hoot 0.7s var(--ease-spring); } @keyframes owl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } } @keyframes owl-hoot { 0% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.08) rotate(-4deg); } 60% { transform: scale(0.97) rotate(3deg); } 100% { transform: scale(1) rotate(0deg); } } .coin { position: absolute; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #8a5a10; background: radial-gradient(circle at 32% 28%, #f2d489, #d4a548 58%, #b8862f); box-shadow: inset 0 -3px 6px rgba(120, 76, 10, 0.35), inset 0 2px 4px rgba(255, 244, 214, 0.8), 0 10px 18px -8px rgba(120, 76, 10, 0.5); animation: coin-bob 4s ease-in-out infinite; } .coin-1 { top: 8%; left: 12%; animation-delay: 0s; } .coin-2 { top: 34%; right: 3%; width: 32px; height: 32px; font-size: 14px; animation-delay: 0.7s; } .coin-3 { bottom: 3%; left: 12%; width: 36px; height: 36px; font-size: 16px; animation-delay: 1.3s; } .coin-4 { bottom: 22%; right: 13%; animation-delay: 2s; } @keyframes coin-bob { 0%, 100% { translate: 0 0; rotate: -6deg; } 50% { translate: 0 -12px; rotate: 6deg; } } .float-card { position: absolute; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(8px); border: 1px solid rgba(216, 205, 182, 0.7); border-radius: 16px; padding: 12px 16px; box-shadow: 0 18px 38px -18px rgba(26, 46, 37, 0.35); animation: card-bob 6s ease-in-out infinite; } .float-card b { display: block; font-size: 13.5px; color: var(--primary-dark); line-height: 1.25; } .float-card small { font-size: 11.5px; color: var(--ink-soft); } .fc-budget { flex-direction: column; align-items: stretch; gap: 8px; top: 4%; right: 2%; animation-delay: 0.5s; } .fc-budget .fc-row { display: flex; align-items: center; gap: 10px; } .fc-goal { bottom: 4%; right: 4%; animation-delay: 1.6s; } .fc-debt { bottom: 16%; left: -2%; animation-delay: 2.4s; } @keyframes card-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } } .fc-icon { width: 28px; height: 28px; border-radius: 9px; flex: none; display: grid; place-items: center; } .fc-icon-forest { background: rgba(45, 74, 62, 0.12); color: var(--primary); } .fc-icon-apricot { background: rgba(243, 162, 107, 0.22); color: var(--apricot-deep); } .fc-bar { display: block; height: 6px; border-radius: 4px; background: var(--bg-2); overflow: hidden; min-width: 130px; } .fc-bar span { display: block; height: 100%; width: var(--w, 60%); border-radius: 4px; background: var(--primary-light); } .hero-scroll { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); z-index: 3; } .hero-scroll-line { width: 2px; height: 44px; border-radius: 2px; overflow: hidden; background: rgba(92, 98, 109, 0.25); position: relative; } .hero-scroll-line::after { content: ""; position: absolute; left: 0; right: 0; top: -50%; height: 50%; background: var(--gold-deep); border-radius: 2px; animation: scroll-hint 1.8s var(--ease-out) infinite; } @keyframes scroll-hint { 0% { top: -50%; } 60%, 100% { top: 110%; } } /* ---------- Marquee ---------- */ .marquee { background: var(--primary-dark); padding: 20px 0; overflow: hidden; transform: rotate(-1.2deg) scale(1.02); box-shadow: 0 14px 34px -20px rgba(26, 46, 37, 0.7); position: relative; z-index: 4; } .marquee-track { display: flex; width: max-content; animation: marquee 26s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee-group { display: flex; align-items: center; gap: 34px; padding-right: 34px; font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.8rem); font-weight: 500; color: var(--bg); white-space: nowrap; } .marquee-group em { font-style: italic; color: var(--apricot); } .spark { width: 16px; height: 16px; flex: none; background: var(--gold); clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%); animation: spark-twirl 6s linear infinite; } @keyframes spark-twirl { to { rotate: 360deg; } } /* ---------- Sections ---------- */ .section { padding: clamp(80px, 10vw, 130px) 0; position: relative; } /* ---------- Demo ---------- */ .demo { text-align: center; } .demo .section-sub { margin: 0 auto; } .demo-board { display: grid; grid-template-columns: minmax(260px, 0.9fr) 1.6fr; gap: 26px; align-items: stretch; margin-top: 54px; text-align: left; } .paycheck { position: relative; background: var(--primary); color: var(--bg); border-radius: var(--radius-lg); padding: 34px 30px; display: flex; flex-direction: column; justify-content: center; gap: 4px; overflow: hidden; box-shadow: 0 26px 54px -26px rgba(26, 46, 37, 0.75); } /* Teal theme: echo of the app icon gradient, sea green → teal → navy */ .theme-teal .paycheck { background: linear-gradient(160deg, var(--seagreen) -12%, var(--primary) 48%, var(--navy) 130%); } .paycheck::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 12%, rgba(212, 165, 72, 0.3), transparent 55%); } .paycheck-label { font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--apricot); position: relative; } .paycheck-amount { font-family: var(--font-display); font-weight: 590; font-size: clamp(3rem, 5vw, 4.4rem); line-height: 1.05; position: relative; font-variant-numeric: tabular-nums; transition: color 0.4s var(--ease-out); } .paycheck.is-empty .paycheck-amount { color: var(--gold); } .paycheck-caption { font-size: 14px; color: rgba(247, 241, 230, 0.75); position: relative; } .paycheck-owl { position: absolute; right: 14px; bottom: -30px; opacity: 0.9; transition: bottom 0.6s var(--ease-spring), transform 0.6s var(--ease-spring); } .paycheck.is-empty .paycheck-owl { bottom: 10px; transform: rotate(-6deg) scale(1.1); } .demo-reset { position: relative; align-self: flex-start; margin-top: 14px; font-size: 13.5px; font-weight: 650; color: var(--gold); border-bottom: 2px solid rgba(212, 165, 72, 0.5); padding-bottom: 1px; transition: color 0.25s, border-color 0.25s; } .demo-reset:hover { color: var(--bg); border-color: var(--bg); } /* Budget cards, styled after the real app's budget screen */ .envelopes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .budget-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid rgba(var(--band-rgb), 0.9); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 24px 48px -28px rgba(26, 46, 37, 0.35); } .budget-card-head { display: flex; justify-content: space-between; align-items: center; /* Category header band = --bg-2 (the 100 scale step), matching the mobile app's budget section header (MB.secondary = MB[100]): cream in Heritage, teal #D6EAEE. */ background: var(--bg-2); padding: 15px 22px; } .budget-card-head b { font-size: 15px; font-weight: 700; color: var(--ink); } .budget-card-head span { font-size: 12.5px; font-weight: 600; color: var(--ink); } .budget-card-head i { font-style: normal; font-size: 10px; } .envelope { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 15px 18px; border-top: 1px solid rgba(var(--band-rgb), 0.6); background: var(--white); text-align: left; transition: background 0.25s var(--ease-out); } .envelope:hover:not(.is-funded) { background: rgba(var(--band-rgb), 0.3); } .envelope:active:not(.is-funded) { background: rgba(var(--band-rgb), 0.5); } .env-name { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 560; color: var(--ink); white-space: nowrap; } .env-amounts { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .env-amounts b { font-weight: 400; color: var(--ink-soft); transition: color 0.3s var(--ease-out); } .env-amounts strong { font-weight: 700; color: var(--primary-dark); } .env-check { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #16a34a; color: #fff; transform: scale(0); transition: transform 0.4s var(--ease-spring); } .envelope.is-funded { cursor: default; } .envelope.is-funded .env-check { transform: scale(1); } .envelope.is-funded .env-amounts b { color: #16a34a; font-weight: 650; } .budget-add { display: flex; align-items: center; gap: 9px; padding: 13px 18px; border-top: 1px solid rgba(var(--band-rgb), 0.6); font-size: 13.5px; font-weight: 650; color: var(--muted); margin-top: auto; } .budget-add-plus { width: 19px; height: 19px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--muted); color: var(--white); font-size: 13px; font-weight: 700; line-height: 1; } /* Demo board "Add item": Heritage muted green instead of the warm --muted tone, to match the green-tinted category headers. Scoped to .budget-card so the phone mockup's own add rows (.bs-add) keep their teal. */ .budget-card .budget-add { color: var(--primary-light); } .budget-card .budget-add-plus { background: var(--primary-light); } /* Item chips, matching the app's Goal / Debt / Shared badges */ .chip { display: inline-flex; align-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 2.5px 9px; border-radius: 9px; line-height: 1.35; } .chip-goal { background: #ecfdf5; color: #16a34a; box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35); } .chip-debt { background: #fef2f2; color: #ef4444; box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.3); } .chip-shared { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); } .demo-done { margin-top: 34px; min-height: 52px; } .demo-done-stamp { display: inline-block; font-family: var(--font-display); font-style: italic; font-weight: 560; font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--primary); padding: 10px 26px; border: 2px solid var(--primary); border-radius: 999px; rotate: -2deg; opacity: 0; transform: scale(0.6); transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-spring); } .demo-done.is-shown .demo-done-stamp { opacity: 1; transform: scale(1); } /* Flying coins + confetti (JS-created) */ .fly-coin { position: fixed; z-index: 130; pointer-events: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #8a5a10; background: radial-gradient(circle at 32% 28%, #f2d489, #d4a548 58%, #b8862f); box-shadow: inset 0 -2px 4px rgba(120, 76, 10, 0.35), 0 6px 12px -4px rgba(120, 76, 10, 0.5); } /* ---------- Chapters ---------- */ .chapter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: center; } .chapter-grid-flip .chapter-copy { order: 2; } .chapter-grid-flip .chapter-visual { order: 1; } .chapter-list { list-style: none; margin-top: 22px; display: grid; gap: 12px; } .chapter-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--ink-soft); font-weight: 520; } .chapter-list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f7f1e6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.8l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 12px no-repeat; } /* Plan chapter: deep primary-green band */ .chapter-plan { background: linear-gradient(160deg, var(--primary-2), var(--primary-dark)); border-radius: clamp(28px, 4vw, 48px); width: min(var(--wrap), calc(100% - 2 * clamp(10px, 2vw, 26px))); margin: 0 auto; overflow: hidden; padding: clamp(36px, 4.5vw, 56px) 0; } .chapter-plan .display-sm { color: var(--bg); } .chapter-plan .chapter-text { color: rgba(247, 241, 230, 0.78); } .chapter-plan .chapter-list li { color: rgba(247, 241, 230, 0.85); } .chapter-plan .chapter-list li::before { background-color: var(--gold); } /* Extra inner gutter so the copy doesn't hug the green card's edge */ @media (min-width: 981px) { .chapter-plan .wrap { padding-left: 72px; } } /* Phone mockup */ .chapter-visual { position: relative; } .phone { position: relative; z-index: 2; width: min(320px, 82%); margin: 0 auto; background: #10201a; border-radius: 40px; padding: 6px; box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.08); transform: rotate(2.5deg); transition: transform 0.6s var(--ease-spring); } .phone:hover { transform: rotate(0deg) scale(1.015); } .phone-screen { background: var(--bg); border-radius: 34px; padding: 22px 18px 26px; min-height: 480px; } /* Realistic in-phone budget screen (matches the app's Budget tab) */ .phone-screen-app { padding: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--white); } .bs-month { display: flex; align-items: center; justify-content: space-between; background: var(--bg-2); padding: 13px 14px; } .bs-month b { font-size: 15.5px; color: var(--ink); } .bs-chev { width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.55); color: var(--ink-soft); font-size: 15px; font-weight: 700; } .bs-chev-on { background: var(--white); color: var(--ink); box-shadow: 0 2px 6px -2px rgba(26, 46, 37, 0.3); } .bs-pill { margin: 12px 14px 0; padding: 8px 12px; border-radius: 10px; background: #fffbeb; color: #d97706; font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } .bs-summary { display: flex; margin: 12px 14px 0; border: 1px solid rgba(216, 205, 182, 0.7); border-radius: 14px; background: var(--white); overflow: hidden; } .bs-summary > div { flex: 1; text-align: center; } .bs-summary > div + div { border-left: 1px solid rgba(216, 205, 182, 0.7); } .bs-summary small { display: block; background: var(--bg-2); font-size: 11px; font-weight: 700; color: var(--ink); padding: 7px 0; } .bs-summary b { display: block; font-size: 13px; color: var(--ink); padding: 9px 0; font-variant-numeric: tabular-nums; } .bs-card { margin: 12px 14px 0; border: 1px solid rgba(216, 205, 182, 0.7); border-radius: 14px; background: var(--white); overflow: hidden; } .bs-card-head { display: flex; justify-content: space-between; align-items: center; background: var(--bg-2); padding: 9px 12px; } .bs-card-head b { font-size: 12.5px; color: var(--ink); } .bs-card-head span { font-size: 10.5px; font-weight: 650; color: var(--ink); } .bs-card-head i { font-style: normal; font-size: 8px; } .bs-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; font-size: 12px; color: var(--ink); border-top: 1px solid rgba(216, 205, 182, 0.4); } .bs-row:first-of-type { border-top: 0; } .bs-row > span:first-child { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; } .bs-row .chip { font-size: 8.5px; padding: 1.5px 6px; border-radius: 6px; } .bs-amt { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 11.5px; } .bs-amt b { color: var(--primary-dark); font-weight: 700; } .bs-add { color: var(--muted); font-weight: 650; justify-content: flex-start; } .bs-add .budget-add-plus { width: 17px; height: 17px; font-size: 12px; } .bs-nav { margin-top: auto; display: flex; justify-content: space-around; align-items: flex-end; background: var(--white); border-top: 1px solid rgba(216, 205, 182, 0.6); padding: 9px 4px 12px; } .bs-nav span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7.5px; font-weight: 650; color: var(--ink-soft); } .bs-nav .bs-nav-on { color: var(--primary); } .phone-shadow { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: 62%; height: 40px; border-radius: 50%; background: radial-gradient(ellipse, rgba(26, 46, 37, 0.35), transparent 70%); z-index: 1; } .chapter-plan .phone-shadow { background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 70%); } /* Small Millie owl flying past the top of the plan phone. */ .plan-owl { position: absolute; z-index: 3; width: clamp(72px, 10vw, 104px); height: auto; top: -16px; right: 2%; transform: rotate(-6deg); filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.4)); pointer-events: none; } /* Debt chapter */ .chapter-debt { padding-top: clamp(90px, 11vw, 150px); } .debt-chart-card { background: var(--white); border: 1px solid rgba(216, 205, 182, 0.8); border-radius: var(--radius-lg); padding: 26px 26px 22px; box-shadow: 0 30px 60px -34px rgba(26, 46, 37, 0.45); } .debt-chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .debt-chart-head span { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .debt-chart-head b { font-family: var(--font-display); font-style: italic; font-weight: 560; font-size: 18px; color: var(--apricot-deep); } .debt-chart { width: 100%; height: auto; } .chart-grid line { stroke: rgba(216, 205, 182, 0.55); stroke-width: 1; stroke-dasharray: 3 5; } .chart-labels text { font-family: var(--font-body); font-size: 11px; font-weight: 600; fill: var(--muted); text-anchor: end; } .chart-labels .chart-x { text-anchor: middle; } .chart-line { stroke: var(--apricot-deep); stroke-width: 4; stroke-linecap: round; } .chart-ghost { stroke: rgba(181, 169, 136, 0.5); stroke-width: 2.5; stroke-dasharray: 6 8; stroke-linecap: round; } .chart-dot { fill: var(--apricot-deep); } .chart-dot-pulse { fill: none; stroke: var(--apricot-deep); stroke-width: 2; animation: dot-pulse 2s var(--ease-out) infinite; transform-origin: center; } @keyframes dot-pulse { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } } .debt-stats { display: flex; gap: 12px; margin-top: 18px; } .debt-stat { flex: 1; background: var(--bg); border-radius: 14px; padding: 12px 16px; } .debt-stat b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--primary-dark); font-variant-numeric: tabular-nums; } .debt-stat small { font-size: 12px; color: var(--ink-soft); } .strategy-toggle { position: relative; display: inline-flex; margin-top: 26px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; padding: 5px; } .strategy-btn { position: relative; z-index: 2; padding: 10px 26px; border-radius: 999px; font-size: 14.5px; font-weight: 650; color: var(--ink-soft); transition: color 0.3s var(--ease-out); } .strategy-btn.is-active { color: var(--bg); } .strategy-pill { position: absolute; z-index: 1; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); background: var(--primary); border-radius: 999px; transition: transform 0.45s var(--ease-spring); } .strategy-toggle.is-snowball .strategy-pill { transform: translateX(100%); } .strategy-note { margin-top: 16px; font-size: 14.5px; color: var(--ink-soft); max-width: 420px; min-height: 44px; } /* Goals chapter */ .chapter-goals { background: linear-gradient(180deg, rgba(212, 165, 72, 0.1), rgba(243, 162, 107, 0.12)); } .chapter-center { text-align: center; } .chapter-center .chapter-text { margin: 0 auto; } .goal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; perspective: 1200px; } .goal-card { background: var(--white); border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(216, 205, 182, 0.7); box-shadow: 0 24px 48px -28px rgba(26, 46, 37, 0.4); transform-style: preserve-3d; transition: box-shadow 0.4s var(--ease-out); will-change: transform; } .goal-card:hover { box-shadow: 0 36px 70px -30px rgba(26, 46, 37, 0.5); } .goal-img { aspect-ratio: 16 / 10; overflow: hidden; } .goal-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); } .goal-card:hover .goal-img img { transform: scale(1.06); } .goal-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px 18px; } .goal-meta b { display: block; font-size: 16px; font-weight: 680; color: var(--primary-dark); } .goal-meta small { font-size: 13px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .goal-ring { flex: none; } .goal-ring-fill { transition: stroke-dashoffset 1.4s var(--ease-out); } .goal-ring-text { font-family: var(--font-body); font-size: 11px; font-weight: 750; fill: var(--primary-dark); } /* Family chapter: profile-select screen in a phone (matches the app) */ .phone-left { transform: rotate(-2.5deg); } /* min-height matches the budget phone's content height (555px screen + 24px frame padding = 579px total) so both phone mockups render the same size; the ps-body flex column absorbs the extra height and keeps sign-out pinned. */ .ps-screen { padding: 0; display: flex; flex-direction: column; overflow: hidden; min-height: 542px; } .ps-hero { position: relative; overflow: hidden; text-align: center; padding: 44px 0 26px; } .ps-circle { position: absolute; left: 50%; top: -36px; transform: translateX(-50%); width: 216px; height: 216px; border-radius: 50%; background: var(--bg-2); opacity: 0.7; } .ps-hero img { position: relative; margin: 0 auto 4px; } .ps-wordmark { position: relative; display: block; margin-top: -6px; font-family: var(--font-display); font-weight: 650; font-size: 30px; color: var(--primary-dark); } .ps-coin { position: absolute; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px; box-shadow: 0 6px 14px -6px rgba(26, 46, 37, 0.35); } .ps-coin-a { width: 38px; height: 38px; right: 24px; top: 22px; background: #eb9a64; } .ps-coin-b { width: 34px; height: 34px; left: 20px; top: 66px; background: #cfa348; } .ps-coin-c { width: 30px; height: 30px; right: 22px; top: 122px; background: #7d9d8d; font-size: 12px; } .ps-body { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 22px 18px 24px; border-top: 1px solid rgba(216, 205, 182, 0.35); } .ps-title { font-size: 21px; font-weight: 800; color: var(--primary-dark); } .ps-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; } .ps-profiles { display: flex; gap: 13px; margin-top: 18px; margin-bottom: 26px; } .ps-profile { width: 78px; padding: 12px 7px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--white); border: 1px solid rgba(216, 205, 182, 0.85); border-radius: 15px; box-shadow: 0 10px 22px -14px rgba(26, 46, 37, 0.3); } .ps-profile i { font-style: normal; font-size: 24px; line-height: 1.15; } .ps-profile b { font-size: 13.5px; font-weight: 750; color: var(--ink); } .ps-signout { margin-top: auto; width: 78%; background: var(--primary-dark); color: var(--bg); border-radius: 999px; padding: 10px 0; text-align: center; font-size: 13px; font-weight: 700; } /* Green-teal app-preview mockups. Scoped to the app-UI preview components only, so the site chrome (hero heading, nav, buttons, marquee, section titles, finale) keeps its Heritage brand palette. Redefining the palette custom properties recolors each preview subtree in both site themes. This is a deliberately greener teal than the app's Teal theme (which leans blue, #236477): the hue is pulled to the app icon's green end (--seagreen #2b8c7f, ~170deg) while keeping the app scale's lightness ramp. Permanent accents (gold/apricot rings) and functional colors (green/red chips) are left alone. Covers: the goal cards only. The hero float cards, the paycheck demo board, and both phone screens keep the site's Heritage palette (the phones' header/hero bands use the --band-rgb category-header tint). */ .goal-card { --bg: #eff7f6; /* 50 screen / band background */ --bg-2: #d6eeea; /* 100 section bands, progress tracks */ --border: #b2ddd5; /* 200 borders */ --muted: #82c5b9; /* 300 muted icons / text */ --primary: #1e7c6b; /* 500 primary accent (green-teal) */ --primary-2: #19695b; /* 600 */ --primary-dark: #0d3d34; /* 900 darkest accent: titles, bold amounts, sign out */ --primary-light: #49ab99; /* 400 progress bars / rings */ } /* Family phone (Heritage, matching the plan phone): white screen, sage/teal (--band-rgb) hero band matching the plan phone's header + this phone's own profile-card borders, forest-green (--primary) Sign Out. */ .ps-screen { background: var(--white); } .ps-hero { background: rgb(var(--band-rgb)); } .ps-circle { background: rgba(255, 255, 255, 0.5); } .ps-screen .ps-body { border-top-color: rgba(var(--band-rgb), 0.6); } .ps-screen .ps-profile { border-color: rgba(var(--band-rgb), 0.9); } .ps-signout { background: var(--primary); } /* Plan phone (Heritage): sage (--band-rgb) card borders + green "Add income" so they match the --band-rgb header bands rather than the base warm tan. */ .phone-screen-app .bs-summary, .phone-screen-app .bs-summary > div + div, .phone-screen-app .bs-card, .phone-screen-app .bs-nav { border-color: rgba(var(--band-rgb), 0.9); } .phone-screen-app .bs-row { border-top-color: rgba(var(--band-rgb), 0.6); } .phone-screen-app .bs-add { color: var(--primary-light); } .phone-screen-app .bs-add .budget-add-plus { background: var(--primary-light); } /* ---------- Numbers ---------- */ .numbers { border-top: 1px solid rgba(216, 205, 182, 0.7); border-bottom: 1px solid rgba(216, 205, 182, 0.7); background: rgba(255, 255, 255, 0.5); padding: 52px 0; } .numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; } .number b { display: block; font-family: var(--font-display); font-weight: 590; font-size: clamp(2rem, 3.4vw, 2.9rem); color: var(--primary-dark); line-height: 1.1; font-variant-numeric: tabular-nums; } .number span { font-size: 13px; font-weight: 550; color: var(--ink-soft); } .number-inf { color: var(--gold-deep); } /* ---------- Finale ---------- */ .finale { position: relative; background: radial-gradient(circle at 18% 18%, rgba(212, 165, 72, 0.2), transparent 45%), radial-gradient(circle at 85% 70%, rgba(243, 162, 107, 0.16), transparent 50%), linear-gradient(170deg, var(--primary-2), var(--primary-dark)); padding: clamp(110px, 13vw, 180px) 0 200px; text-align: center; overflow: hidden; } .theme-teal .finale { background: radial-gradient(circle at 18% 18%, rgba(212, 165, 72, 0.2), transparent 45%), radial-gradient(circle at 85% 70%, rgba(243, 162, 107, 0.16), transparent 50%), radial-gradient(circle at 95% 0%, rgba(43, 140, 127, 0.5), transparent 55%), radial-gradient(circle at 0% 100%, rgba(32, 54, 114, 0.55), transparent 60%), linear-gradient(170deg, var(--primary-2), var(--primary-dark)); } .finale-title { font-family: var(--font-display); font-weight: 570; font-size: clamp(2.8rem, 6.4vw, 5.2rem); line-height: 1.04; letter-spacing: -0.018em; color: var(--bg); margin: 20px 0 18px; } .finale-sub { font-size: clamp(1rem, 1.5vw, 1.2rem); color: rgba(247, 241, 230, 0.75); } .store-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 38px; } .store-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--bg); color: var(--primary-dark); border-radius: 16px; padding: 13px 24px; font-weight: 650; transition: transform 0.35s var(--ease-spring), box-shadow 0.35s var(--ease-out); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, 0.45); will-change: transform; } .store-btn:hover { box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.55); } .store-btn span { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; font-size: 16px; } .store-btn small { font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; } .store-btn-soon { background: rgba(247, 241, 230, 0.14); color: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(247, 241, 230, 0.3); } .finale-note { margin-top: 20px; font-size: 12.5px; color: rgba(247, 241, 230, 0.5); } .finale-owl { position: absolute; bottom: -104px; left: 50%; transform: translateX(-50%); width: clamp(200px, 22vw, 300px); height: auto; filter: drop-shadow(0 -6px 24px rgba(0, 0, 0, 0.3)); transition: bottom 0.8s var(--ease-spring); } .finale.is-in .finale-owl { bottom: -58px; } .finale-coin { position: absolute; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: #8a5a10; background: radial-gradient(circle at 32% 28%, #f2d489, #d4a548 58%, #b8862f); box-shadow: inset 0 -3px 6px rgba(120, 76, 10, 0.35), 0 10px 18px -8px rgba(0, 0, 0, 0.4); animation: coin-bob 5s ease-in-out infinite; } .fin-c1 { left: 12%; top: 30%; } .fin-c2 { right: 10%; top: 22%; width: 28px; height: 28px; font-size: 12px; animation-delay: 1s; } .fin-c3 { right: 20%; bottom: 26%; animation-delay: 2s; } /* ---------- Footer ---------- */ .footer { background: var(--primary-dark); padding: 26px 0 30px; color: rgba(247, 241, 230, 0.65); } .footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .footer-left { display: flex; align-items: center; gap: 14px; } .footer .nav-wordmark { color: var(--bg); } .footer-links { display: flex; gap: 22px; } .footer-links a { font-size: 13.5px; font-weight: 560; transition: color 0.25s; } .footer-links a:hover { color: var(--bg); } .footer-note { font-size: 12.5px; } /* ---------- Theme switcher pill ---------- */ .theme-toggle { position: fixed; left: 18px; bottom: 18px; z-index: 140; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(216, 205, 182, 0.9); box-shadow: 0 12px 28px -14px rgba(26, 46, 37, 0.45); font-size: 12.5px; font-weight: 700; color: var(--ink-soft); transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out); } .theme-toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(26, 46, 37, 0.55); } .theme-swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } .theme-swatch-heritage { background: linear-gradient(135deg, #2d4a3e, #1a2e25); } .theme-swatch-teal { background: linear-gradient(135deg, #2b8c7f, #236477 55%, #203672); } .theme-toggle .theme-swatch { display: none; } html:not(.theme-teal) .theme-toggle .theme-swatch-teal { display: block; } html.theme-teal .theme-toggle .theme-swatch-heritage { display: block; } /* ---------- Reveal system ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: translateY(0); } /* ---------- Responsive ---------- */ @media (max-width: 1160px) { /* No-wrap budget rows need width; stack the paycheck above the cards sooner */ .demo-board { grid-template-columns: 1fr; } .paycheck { min-height: 210px; } } @media (max-width: 760px) { .envelopes { grid-template-columns: 1fr; } } @media (max-width: 980px) { .nav-links { display: none; } .hero { padding-top: 110px; } .hero-grid { grid-template-columns: 1fr; gap: 20px; } .hero-stage { height: clamp(340px, 60vw, 460px); margin-top: 10px; } .hero-scroll { display: none; } .chapter-grid { grid-template-columns: 1fr; gap: 44px; } .chapter-grid-flip .chapter-copy { order: 1; } .chapter-grid-flip .chapter-visual { order: 2; } .goal-cards { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } .numbers-grid { grid-template-columns: 1fr 1fr; gap: 30px 14px; } } @media (max-width: 560px) { .wrap { padding: 0 20px; } .hero-title { font-size: clamp(2.6rem, 12vw, 3.4rem); } .hero-ctas .btn-lg { width: 100%; justify-content: center; } .env-name { font-size: 13px; } .env-amounts { font-size: 12px; } .float-card b { font-size: 12px; } .fc-debt { left: 0; } .fc-budget { right: 0; } .marquee { transform: rotate(0deg); } .footer-inner { flex-direction: column; text-align: center; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .grain { animation: none; } .line { transform: none; animation: none; } .reveal { opacity: 1; transform: none; } .marquee-track { animation: none; } }