/* ========================================================================= Flip the Menu marketing site — drop-in replacement for flipthemenu-web/styles.css Design tokens mirror the app (constants/colors.ts light + dark palettes, fonts.ts, radii). Plain static CSS, no build step. Theme is driven by [data-theme="light"|"dark"] on . ========================================================================= */ :root, [data-theme="light"] { --bg: #faf6f0; --surface: #ffffff; --surface-muted: #f4eee2; --border: #eee6da; --divider: #e7d8c5; --text: #2a2520; --text-muted: #8a7f76; --text-subtle: #b8aea3; --heading: #172d26; /* forest-deep in light */ --on-accent: #ffffff; --forest: #2d4a3e; --terracotta: #c76a4a; /* Inverse panels (dark feature cards / bands) */ --panel-bg: #172d26; --panel-text: #faf6f0; --panel-muted: rgba(255, 253, 248, 0.72); --panel-subtle: rgba(255, 253, 248, 0.55); --panel-border: rgba(255, 253, 248, 0.13); --panel-inset: rgba(255, 253, 248, 0.08); --footer-bg: #172d26; --header-bg: rgba(250, 246, 240, 0.78); --header-bg-scroll: rgba(250, 246, 240, 0.96); /* Affordability tiers */ --fair: #8fa888; --fair-bg: #e7eee3; --fair-fg: #4a6a44; --mid: #d9a55a; --mid-bg: #f6e9cc; --mid-fg: #8c6320; --high: #b45f4d; --high-bg: #f1d9d2; --high-fg: #8e3f2e; /* Confidence (low = warm grey, never clay) */ --conf-high-bg: #e7eee3; --conf-high-fg: #4a6a44; --conf-high-dot: #8fa888; --conf-mid-bg: #f6e9cc; --conf-mid-fg: #8c6320; --conf-mid-dot: #d9a55a; --conf-low-bg: #ede5d8; --conf-low-fg: #6b5f54; --conf-low-dot: #a89a8c; --honey: #e8b860; --honey-bg: #faefd2; --rose: #d8a7a0; --shadow-card: 0 6px 18px rgba(42, 37, 32, 0.06); --shadow-lift: 0 20px 48px rgba(42, 37, 32, 0.14); } [data-theme="dark"] { --bg: #16120e; --surface: #221c16; --surface-muted: #2a231c; --border: #332b22; --divider: #332b22; --text: #f2ebe2; --text-muted: #a99c8e; --text-subtle: #7c7064; --heading: #f2ebe2; --on-accent: #ffffff; --forest: #4f7d69; --terracotta: #d9805f; --panel-bg: #1f2e28; --panel-text: #eaf1ea; --panel-muted: rgba(234, 241, 234, 0.66); --panel-subtle: rgba(234, 241, 234, 0.5); --panel-border: rgba(255, 255, 255, 0.1); --panel-inset: rgba(255, 255, 255, 0.06); --footer-bg: #100c09; --header-bg: rgba(22, 18, 14, 0.78); --header-bg-scroll: rgba(22, 18, 14, 0.95); --fair: #8fa888; --fair-bg: #22301f; --fair-fg: #a9c6a0; --mid: #d9a55a; --mid-bg: #2f2917; --mid-fg: #e6c281; --high: #c2735f; --high-bg: #33221e; --high-fg: #e2a695; --conf-high-bg: #22301f; --conf-high-fg: #a9c6a0; --conf-high-dot: #8fa888; --conf-mid-bg: #2f2917; --conf-mid-fg: #e6c281; --conf-mid-dot: #d9a55a; --conf-low-bg: #2a251f; --conf-low-fg: #b0a294; --conf-low-dot: #a89a8c; --honey: #e8b860; --honey-bg: #2f2818; --rose: #d8a7a0; --shadow-card: 0 8px 22px rgba(0, 0, 0, 0.4); --shadow-lift: 0 24px 54px rgba(0, 0, 0, 0.55); } :root { --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --max: 1160px; } * { box-sizing: border-box; } html { background: var(--bg); color: var(--text); scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; min-width: 320px; overflow-x: hidden; transition: background 300ms ease, color 300ms ease; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } button { cursor: pointer; } ::selection { background: rgba(232, 184, 96, 0.4); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } h1, h2, h3 { font-family: var(--serif); color: var(--heading); font-weight: 500; letter-spacing: -0.01em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(40px, 5.4vw, 60px); line-height: 1.04; } h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.08; } h3 { font-size: 20px; line-height: 1.25; } p { margin: 0; color: var(--text-muted); } .eyebrow { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--terracotta); margin: 0 0 14px; } /* =========================== HEADER =========================== */ .site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding: 0 32px; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .site-header.is-scrolled { background: var(--header-bg-scroll); border-color: var(--border); box-shadow: 0 8px 26px rgba(42, 37, 32, 0.08); } .brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; } .brand-mark { display: inline-block; width: 36px; height: 36px; object-fit: contain; } .brand-name { font-family: var(--serif); font-weight: 600; font-size: 21px; color: var(--heading); } .nav-links { display: flex; align-items: center; gap: 26px; flex: 1 1 auto; justify-content: center; } .nav-links a { font-size: 15px; font-weight: 600; color: var(--text-muted); transition: color 150ms ease; } .nav-links a:hover { color: var(--forest); } .header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--surface-muted); border: 1px solid var(--border); color: var(--heading); transition: transform 150ms ease, background 150ms ease; } .theme-toggle:hover { transform: translateY(-1px); } .theme-icon { width: 18px; height: 18px; position: relative; display: inline-block; } /* Sun (shown in light mode — tap for dark) */ [data-theme="light"] .theme-icon { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--heading); } [data-theme="light"] .theme-icon::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: radial-gradient(2px 2px at 50% 0, var(--heading) 99%, transparent), radial-gradient(2px 2px at 50% 100%, var(--heading) 99%, transparent), radial-gradient(2px 2px at 0 50%, var(--heading) 99%, transparent), radial-gradient(2px 2px at 100% 50%, var(--heading) 99%, transparent); } /* Moon (shown in dark mode — tap for light) */ [data-theme="dark"] .theme-icon { border-radius: 50%; box-shadow: inset -5px 3px 0 0 var(--heading); transform: rotate(-22deg); } /* =========================== BUTTONS =========================== */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; line-height: 1; border: 1px solid transparent; transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease; white-space: nowrap; } .btn-primary { background: var(--forest); color: var(--on-accent); border-color: var(--forest); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(45, 74, 62, 0.26); } .btn-ghost { background: transparent; color: var(--forest); border-color: var(--divider); } .btn-ghost:hover { background: var(--surface-muted); border-color: var(--forest); } .header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; background: var(--forest); color: var(--on-accent); border-radius: var(--r-pill); font-size: 14px; font-weight: 600; transition: transform 150ms ease, box-shadow 150ms ease; } .header-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(45, 74, 62, 0.24); } :focus-visible { outline: 3px solid rgba(232, 184, 96, 0.85); outline-offset: 3px; } /* =========================== BADGES =========================== */ .aff-badge, .conf-pill, .worth-pill, .home-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 700; line-height: 1; padding: 7px 12px 7px 10px; white-space: nowrap; } .aff-badge .dot, .conf-pill .dot { width: 8px; height: 8px; border-radius: 4px; flex: 0 0 auto; } .aff-fair { background: var(--fair-bg); color: var(--fair-fg); } .aff-fair .dot { background: var(--fair); } .aff-mid { background: var(--mid-bg); color: var(--mid-fg); } .aff-mid .dot { background: var(--mid); } .aff-high { background: var(--high-bg); color: var(--high-fg); } .aff-high .dot { background: var(--high); } .aff-badge.sm { font-size: 11px; padding: 5px 9px 5px 8px; } .aff-badge.sm .dot { width: 6px; height: 6px; } .conf-pill { font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; } .conf-high { background: var(--conf-high-bg); color: var(--conf-high-fg); } .conf-high .dot { background: var(--conf-high-dot); } .conf-medium { background: var(--conf-mid-bg); color: var(--conf-mid-fg); } .conf-medium .dot { background: var(--conf-mid-dot); } .conf-low { background: var(--conf-low-bg); color: var(--conf-low-fg); } .conf-low .dot { background: var(--conf-low-dot); } .worth-pill, .home-pill { background: var(--surface-muted); color: var(--text-muted); padding: 7px 12px; } .worth-pill strong, .home-pill strong { color: var(--heading); font-weight: 600; } .tone-fair { color: var(--fair-fg); } .tone-mid { color: var(--mid-fg); } .tone-high { color: var(--high-fg); } /* =========================== HERO =========================== */ .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 48px; max-width: var(--max); margin: 0 auto; padding: 72px 32px 64px; } .hero-copy { max-width: 560px; } .hero-lede { font-size: 19px; line-height: 1.55; margin: 22px 0 0; color: var(--text-muted); } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 16px; } .hero-note { font-size: 13.5px; color: var(--text-subtle); font-weight: 500; } .hero-phone { position: relative; display: flex; justify-content: center; } .hero-phone-glow { position: absolute; inset: 8% -6% 4% -6%; z-index: -1; background: radial-gradient(60% 55% at 50% 40%, rgba(199, 106, 74, 0.18), transparent 70%), radial-gradient(60% 55% at 60% 70%, rgba(143, 168, 136, 0.22), transparent 70%); filter: blur(6px); } /* =========================== PHONE FRAME =========================== */ .phone { position: relative; width: 300px; background: #15110d; border-radius: 42px; padding: 10px; box-shadow: var(--shadow-lift), inset 0 0 0 2px rgba(255, 255, 255, 0.04); } .phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 24px; background: #15110d; border-radius: 0 0 14px 14px; z-index: 4; } .phone-screen { position: relative; background: var(--bg); border-radius: 33px; overflow: hidden; height: 600px; } .phone-tall .phone-screen { height: 660px; } .scr-pad { padding: 22px 16px 16px; } .scr-dark { background: #15110d; } .scr-hero { position: relative; height: 200px; background-size: cover; background-position: center; } .scr-hero.short { height: 150px; } .scr-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23, 45, 38, 0.34), rgba(23, 45, 38, 0) 40%); } .scr-hero-top { position: relative; z-index: 2; display: flex; justify-content: space-between; padding: 38px 14px 0; } .round-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 253, 248, 0.92); color: #172d26; font-size: 17px; box-shadow: var(--shadow-card); } .round-btn.sm { width: 30px; height: 30px; font-size: 14px; } /* place detail summary card */ .scr-card { position: relative; margin: -28px 14px 0; z-index: 3; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-card); } .scr-eyebrow { font-size: 10px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terracotta); margin-bottom: 6px; } .scr-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .scr-title { font-size: 21px; line-height: 1.1; } .meta-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .meta-pill { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 10px; font-size: 11px; font-weight: 700; color: var(--text); white-space: nowrap; } .metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .metric-tile { background: var(--surface-muted); border-radius: var(--r-md); padding: 11px; display: flex; flex-direction: column; gap: 8px; min-height: 78px; } .metric-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: 900; } .ic-sm { width: 12px; height: 12px; flex: 0 0 auto; } .metric-value { font-size: 14px; font-weight: 700; line-height: 1.25; } /* place detail menu row */ .menu-row { margin: 12px 14px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px; box-shadow: var(--shadow-card); } .menu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .menu-titles { min-width: 0; flex: 1 1 auto; } .menu-name { display: block; font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--heading); } .menu-desc { display: block; font-size: 11.5px; line-height: 1.35; color: var(--text-muted); margin-top: 3px; } .menu-price-block { text-align: right; flex: 0 0 auto; } .menu-price-label { display: block; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .menu-price { display: block; font-size: 16px; font-weight: 700; color: var(--heading); margin-top: 2px; } .est-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; } .est-cell { background: var(--surface-muted); border-radius: var(--r-sm); padding: 8px; min-height: 52px; display: flex; flex-direction: column; gap: 5px; } .est-label { font-size: 8.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); line-height: 1.2; } .est-value { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.2; } .menu-foot { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .tier-dot { width: 8px; height: 8px; border-radius: 4px; } .tier-dot-high { background: var(--high); } .tier-foot { font-size: 12px; font-weight: 700; } .conf-foot { margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } /* discover screen */ .scr-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .loc-pill { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px; font-size: 13px; font-weight: 600; color: var(--heading); } .scr-icons { display: flex; gap: 8px; } .scr-greeting { font-size: 20px; } .scr-subtle { font-size: 12.5px; color: var(--text-muted); margin-bottom: 14px; } .chip-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: nowrap; overflow: hidden; } .chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 13px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .chip-active { background: var(--forest); border-color: var(--forest); color: var(--on-accent); } /* vertical place card — full-bleed photo, heart + badge overlaid (mirrors PlaceCard.tsx) */ .place-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); margin-bottom: 14px; } .place-photo { position: relative; width: 100%; height: 152px; background-size: cover; background-position: center; background-color: var(--surface-muted); } .place-photo .aff-badge { position: absolute; top: 11px; right: 11px; box-shadow: var(--shadow-card); } .place-heart { position: absolute; top: 11px; left: 11px; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: rgba(250, 246, 240, 0.92); color: #2a2520; box-shadow: var(--shadow-card); } .place-heart svg { width: 18px; height: 18px; } .place-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .place-name { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.18; color: var(--heading); } .place-meta-row { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); } .place-meta-row strong { color: var(--text); font-weight: 700; } .place-meta-row .sep { color: var(--text-subtle); } .place-context { font-size: 12.5px; color: var(--text-muted); font-weight: 500; } .value-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--border); } .value-stat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-muted); } .value-stat strong { font-weight: 800; color: var(--text); } .value-stat.tone-fair, .value-stat.tone-fair strong { color: var(--fair-fg); } .value-stat.tone-high, .value-stat.tone-high strong { color: var(--high-fg); } .ic { width: 14px; height: 14px; flex: 0 0 auto; } .ic-star { color: var(--honey); } /* recipe app cards */ .scr-body { padding: 16px; } .scr-body .scr-title { font-size: 22px; margin-bottom: 4px; } .scr-meta { font-size: 12.5px; color: var(--text-muted); } .stepper { display: flex; align-items: center; justify-content: space-between; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 8px 12px; margin: 13px 0; } .stepper-label { font-size: 13px; font-weight: 600; color: var(--text); } .stepper-ctrl { display: flex; align-items: center; gap: 14px; } .step-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-muted); color: var(--forest); font-weight: 600; } .step-n { font-size: 15px; font-weight: 600; color: var(--heading); } .app-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 13px; box-shadow: var(--shadow-card); margin-bottom: 12px; } .app-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .app-eyebrow { display: block; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .app-title { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--heading); margin-top: 3px; } .app-title.sm { font-size: 16px; } .app-sub { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 3px; } .app-card-head .conf-pill { font-size: 10px; padding: 5px 9px 5px 8px; } .app-card-head .conf-pill .dot { width: 6px; height: 6px; } .app-bar { display: flex; height: 14px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-muted); margin-bottom: 12px; } .app-rows { display: grid; gap: 9px; } .app-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text); } .app-row span:first-child { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .app-row .mono { font-size: 13px; font-weight: 600; color: var(--heading); } .macro-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .macro { background: var(--surface-muted); border-radius: var(--r-sm); padding: 9px 6px; text-align: center; } .macro strong { display: block; font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--heading); } .macro span { font-size: 8.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-muted); } .scr-cta-row { display: flex; gap: 10px; } .scr-cta { flex: 1 1 0; text-align: center; background: var(--forest); color: var(--on-accent); border-radius: var(--r-pill); padding: 12px; font-size: 14px; font-weight: 600; } .scr-cta-alt { background: var(--surface); color: var(--forest); border: 1px solid var(--divider); } /* scan screen */ .scan-frame { position: relative; height: 330px; margin: 30px 16px 0; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); } .scan-corner { position: absolute; width: 26px; height: 26px; border: 3px solid rgba(232, 184, 96, 0.9); } .scan-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; } .scan-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; } .scan-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; } .scan-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; } .scan-line { position: absolute; left: 18px; right: 18px; top: 50%; height: 2px; background: rgba(232, 184, 96, 0.85); box-shadow: 0 0 14px rgba(232, 184, 96, 0.7); animation: scanmove 2.6s ease-in-out infinite; } @keyframes scanmove { 0%, 100% { top: 22%; } 50% { top: 78%; } } .scan-hint { position: absolute; bottom: -2px; left: 0; right: 0; text-align: center; color: rgba(255, 253, 248, 0.7); font-size: 12px; transform: translateY(22px); } .scan-results { background: var(--bg); border-radius: 24px 24px 0 0; padding: 16px; position: absolute; left: 0; right: 0; bottom: 0; } .scan-results-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 900; color: var(--text-muted); margin-bottom: 10px; } .scan-item { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--text); } .scan-item .mono { color: var(--heading); } .scan-foot { font-size: 12px; color: var(--text-muted); margin-top: 10px; } @media (prefers-reduced-motion: reduce) { .scan-line { animation: none; top: 50%; } } /* =========================== BANDS / SECTIONS =========================== */ .band { padding: 40px 32px; } .band-panel { background: var(--panel-bg); } .band-inner { max-width: var(--max); margin: 0 auto; } .band-kicker { color: var(--panel-subtle); font-size: 13px; font-weight: 600; text-align: center; margin-bottom: 22px; } .tier-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .tier-key-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .tier-key-item p { color: var(--panel-muted); font-size: 13px; } .band-foot { color: var(--panel-muted); font-size: 13px; text-align: center; margin-top: 24px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .section { max-width: var(--max); margin: 0 auto; padding: 84px 32px; } .section-band { padding: 84px 32px; } .section-band.band-soft { background: var(--surface-muted); } .section-inner { max-width: var(--max); margin: 0 auto; } .section-head { margin-bottom: 40px; max-width: 620px; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .section-sub { font-size: 17px; margin-top: 14px; } /* pillars */ .pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pillar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-card); } .pillar-tag { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--terracotta); margin-bottom: 12px; } .pillar h3 { margin-bottom: 8px; } .pillar p { font-size: 14.5px; } /* split layout */ .split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; } .split.reverse .split-media { order: 2; } .split-media { display: flex; justify-content: center; } .split-copy { max-width: 520px; } .split-copy p { margin-top: 16px; } .check-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; } .check-list li { position: relative; padding-left: 28px; font-size: 15px; color: var(--text); line-height: 1.45; } .check-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 17px; height: 17px; border-radius: 50%; background-color: var(--fair-bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5 5-5.5' fill='none' stroke='%238fa888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; } .fine-note { font-size: 13px; color: var(--text-subtle); margin-top: 20px; line-height: 1.5; } /* =========================== ENGINE / PRICE CARD =========================== */ .engine-band { background: var(--surface-muted); } .engine { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 0.95fr; gap: 52px; align-items: center; } .engine-copy { max-width: 520px; } .engine-copy p { margin-top: 16px; } .dish-tabs { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; } .dish-tab { background: transparent; border: 1px solid var(--divider); border-radius: var(--r-pill); padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--forest); transition: all 150ms ease; } .dish-tab.is-active { background: var(--forest); border-color: var(--forest); color: var(--on-accent); } .price-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-lift); } .price-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .price-card-head { min-width: 0; } .price-card-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 900; color: var(--text-muted); margin-bottom: 6px; } .price-card h3 { font-size: 28px; line-height: 1.1; } .price-card-sub { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-top: 6px; } .demo-badges { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; } .stacked-bar { display: flex; height: 16px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-muted); margin-bottom: 18px; } .seg { display: block; min-width: 6px; transition: flex 320ms ease, width 320ms ease; } .seg-ing, .key-ing { background: var(--forest); } .seg-labor, .key-labor { background: var(--honey); } .seg-over, .key-over { background: var(--terracotta); } .seg-margin, .key-margin { background: var(--fair); } .breakdown { margin: 0; display: grid; gap: 12px; } .breakdown div { display: flex; align-items: center; justify-content: space-between; } .breakdown dt { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--text); } .breakdown dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--heading); } .key { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: 0 0 auto; } .breakdown-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--text-muted); flex-wrap: wrap; } .text-link { color: var(--forest); font-size: 13px; font-weight: 700; } /* =========================== REMIX + PLUS =========================== */ .remix-band { background: var(--surface-muted); } .remix-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 28px; align-items: start; } .remix-demo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-card); } .remix-kicker { font-size: 11px; font-weight: 900; letter-spacing: 0.1em; color: var(--terracotta); } .remix-base { font-size: 22px; margin: 4px 0 14px; } .remix-prompt { font-size: 14px; color: var(--text-muted); margin-bottom: 14px; } .target-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .target { display: flex; flex-direction: column; align-items: center; gap: 7px; background: var(--surface-muted); border: 1px solid transparent; border-radius: var(--r-md); padding: 16px 8px; font-size: 13px; font-weight: 700; color: var(--text); } .target-active { border-color: var(--forest); background: var(--fair-bg); color: var(--fair-fg); } .remix-result { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; } .remix-edit { font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); } .remix-name { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--heading); margin: 6px 0 0; } .remix-meta { font-size: 12.5px; font-weight: 700; color: var(--text-subtle); margin: 8px 0 0; } .remix-ings { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 9px; } .remix-ings li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text); } .remix-ings strong { font-weight: 800; } .reuse-icon, .add-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: 0 0 auto; font-weight: 700; } .reuse-icon { color: var(--forest); } .add-icon { color: var(--text-subtle); } .remix-result .scr-cta { display: inline-flex; width: auto; padding: 11px 22px; } .plus-card { position: relative; background: var(--panel-bg); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-lift); } .plus-flag { position: absolute; top: 22px; right: 22px; background: var(--honey); color: #172d26; border-radius: var(--r-pill); padding: 5px 11px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .plus-card h3 { color: var(--panel-text); font-size: 24px; } .plus-sub { color: var(--panel-muted); font-size: 14px; margin: 8px 0 18px; } .plan { border-top: 1px solid var(--panel-border); padding: 16px 0; } .plan-name { display: inline-block; font-family: var(--serif); font-size: 16px; color: var(--honey); margin-bottom: 10px; } .plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; } .plan li { font-size: 13.5px; color: var(--panel-muted); padding-left: 18px; position: relative; } .plan li::before { content: "·"; position: absolute; left: 4px; color: var(--honey); font-weight: 700; } .plan-pro li::before { content: "✦"; font-size: 9px; top: 3px; } .plus-card .fine-note { color: var(--panel-subtle); } /* =========================== SHOP / PROVIDERS =========================== */ .provider-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .provider { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-card); } .provider-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .provider-name { font-family: var(--serif); font-size: 19px; color: var(--heading); } .provider p { font-size: 14px; } .status { border-radius: var(--r-pill); padding: 4px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; } .status-live { background: var(--fair-bg); color: var(--fair-fg); } .status-soft { background: var(--surface-muted); color: var(--text-muted); } .status-plan { background: var(--conf-low-bg); color: var(--conf-low-fg); } .commission-note { font-size: 13px; color: var(--text-subtle); margin-top: 24px; text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; } /* =========================== COMMUNITY =========================== */ .community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .comm-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-card); } .comm-card h3 { margin-bottom: 16px; } .rate-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .rate-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); } .rate-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-muted); color: var(--forest); font-weight: 600; font-size: 13px; flex: 0 0 auto; } .feed-post { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 14px; } .feed-photo { height: 130px; background-size: cover; background-position: center; } .feed-body { padding: 12px; display: flex; flex-direction: column; gap: 4px; } .feed-user { font-size: 14px; font-weight: 600; color: var(--heading); } .feed-react { font-size: 12.5px; color: var(--text-muted); } .leader-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .leader-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text); } .leader-list .aff-badge { margin-left: auto; } .rank { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--forest); color: var(--on-accent); font-size: 12px; font-weight: 600; flex: 0 0 auto; } /* =========================== ACTIVITY / SAVINGS RING =========================== */ .center-media { flex-direction: column; } .savings-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; } .savings-ring { width: 230px; height: 230px; border-radius: 50%; background: conic-gradient(var(--honey) 0 68%, var(--surface-muted) 68% 100%); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); } .ring-inner { width: 174px; height: 174px; border-radius: 50%; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .ring-amount { font-family: var(--serif); font-size: 44px; color: var(--heading); } .ring-label { font-size: 13px; color: var(--text-muted); } .activity-stats { display: flex; gap: 28px; } .activity-stats div { display: flex; flex-direction: column; align-items: center; } .activity-stats strong { font-size: 22px; font-weight: 600; color: var(--heading); } .activity-stats span { font-size: 12px; color: var(--text-subtle); } /* =========================== METHODOLOGY =========================== */ .methodology { background: var(--surface-muted); } .methodology-copy { max-width: var(--max); margin: 0 auto; } .methodology-copy > p { max-width: 640px; margin-top: 16px; } .method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 30px; } .method-grid article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; } .method-grid h3 { font-size: 17px; margin-bottom: 8px; } .method-grid p { font-size: 14px; } .honest-note { background: var(--honey-bg); border-left: 4px solid var(--honey); border-radius: var(--r-sm); color: var(--heading); font-size: 15px; font-weight: 500; margin-top: 24px; padding: 16px 18px; max-width: 760px; } /* =========================== FAQ =========================== */ .faq { max-width: 880px; } .faq-list { display: grid; gap: 12px; } details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; } details summary { list-style: none; cursor: pointer; padding: 20px 22px; font-size: 17px; font-weight: 600; color: var(--heading); font-family: var(--serif); display: flex; justify-content: space-between; align-items: center; gap: 16px; } details summary::-webkit-details-marker { display: none; } details summary::after { content: "+"; color: var(--terracotta); font-size: 22px; line-height: 1; flex: 0 0 auto; } details[open] summary::after { content: "–"; } details p { padding: 0 22px 20px; font-size: 15px; } /* =========================== FINAL CTA =========================== */ .final-cta { text-align: center; color: #faf6f0; padding: 96px 32px; background: linear-gradient(0deg, rgba(23, 45, 38, 0.84), rgba(23, 45, 38, 0.84)), url("https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?auto=format&fit=crop&w=1800&q=80") center / cover no-repeat; } .final-cta h2 { color: #faf6f0; } .final-cta p { color: rgba(255, 253, 248, 0.85); max-width: 540px; margin: 14px auto 0; } .waitlist-form { max-width: 540px; margin: 30px auto 0; text-align: left; } .waitlist-form label { display: block; color: #faf6f0; font-size: 13px; font-weight: 600; margin-bottom: 8px; } .waitlist-field { display: flex; gap: 10px; background: rgba(255, 253, 248, 0.14); border: 1px solid rgba(255, 253, 248, 0.24); border-radius: var(--r-pill); padding: 8px; } .waitlist-field input { flex: 1 1 auto; min-width: 0; background: #fffdf8; border: 0; border-radius: var(--r-pill); padding: 0 18px; min-height: 46px; color: #2a2520; } /* =========================== LEGAL =========================== */ .legal { max-width: 1040px; display: grid; gap: 56px; } .legal-block .amazon-disclosure { background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--r-sm); display: inline-block; padding: 12px 14px; font-size: 13px; font-weight: 600; color: var(--text); margin-top: 16px; } .legal-block > p { margin-top: 16px; max-width: 760px; } .legal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 22px; } .legal-grid article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px; } .legal-grid h3 { font-size: 17px; margin-bottom: 8px; } .legal-grid p { font-size: 14px; } .legal-grid a { color: var(--forest); font-weight: 600; text-decoration: underline; } /* =========================== FOOTER =========================== */ .footer { background: var(--footer-bg); color: var(--panel-muted); padding: 56px 32px 28px; } .footer-top { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; } .footer-brand .brand-mark { background: var(--honey); color: #172d26; } .footer-brand .brand-name { color: var(--panel-text); } .footer-top > p { color: var(--panel-muted); max-width: 360px; margin-top: 14px; grid-column: 1; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .footer-cols h3 { font-family: var(--sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--panel-subtle); margin-bottom: 14px; } .footer-cols nav { display: flex; flex-direction: column; gap: 10px; } .footer-cols a { color: var(--panel-muted); font-size: 14px; } .footer-cols a:hover { color: var(--panel-text); } .footer-bottom { max-width: var(--max); margin: 36px auto 0; padding-top: 22px; border-top: 1px solid var(--panel-border); display: flex; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--panel-subtle); flex-wrap: wrap; } /* =========================== RESPONSIVE =========================== */ @media (max-width: 960px) { .nav-links { display: none; } .hero { grid-template-columns: 1fr; text-align: center; } .hero-copy { margin: 0 auto; } .hero-actions { justify-content: center; } .split, .engine, .remix-grid { grid-template-columns: 1fr; gap: 36px; } .split.reverse .split-media { order: 0; } .split-copy, .engine-copy { max-width: none; } .pillar-grid, .provider-grid, .community-grid, .method-grid, .legal-grid { grid-template-columns: repeat(2, 1fr); } .tier-key { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } .footer-top { grid-template-columns: 1fr; } } @media (max-width: 560px) { .section, .section-band { padding: 60px 20px; } .hero { padding: 48px 20px; } .pillar-grid, .provider-grid, .community-grid, .method-grid, .legal-grid { grid-template-columns: 1fr; } .footer-cols { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; } .site-header { padding: 0 18px; gap: 12px; } .nav-links { display: none; } }