was a direct child of ; the new wrapper div has to forward those dimensions or the hero stops short. dvh tracks the visible viewport so mobile centering survives the URL-bar show/hide. */ #app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; } /* ── HEADER ── */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250,250,250,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); padding: 0 24px; height: 60px; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 768px) { .site-header { padding: 0 28px; } } .logo { font-family: var(--font-display); font-weight: 400; font-size: 20px; letter-spacing: 0.02em; color: var(--white); text-decoration: none; } .logo .b { color: var(--red); } .header-right { display: flex; align-items: center; gap: 12px; } .lang-toggle { display: flex; background: var(--panel); border: 1px solid var(--border); border-radius: 0; overflow: hidden; } .lang-btn { padding: 5px 12px; border: none; background: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; color: var(--text-dim); cursor: pointer; transition: var(--trans); } .lang-btn.active { background: var(--red); color: #FFFFFF; } /* ── APP ── */ .app { padding-top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; isolation: isolate; } .app > :not(.page-bg-pattern) { position: relative; z-index: 1; } /* ── HERO ── */ .hero { position: relative; /* asymmetric vertical padding shifts the centered content past the fixed header and compensates for the scenario-strip below — net effect: visually centered on the viewport */ padding: 100px 16px 24px; text-align: center; background: transparent; overflow: hidden; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* Embossed "Plan B" page background — fixed full-viewport, sits behind every screen (hero, quiz, results). The translucent fixed headers and footers cover their own areas so the pattern doesn't bleed through where the user expects clean nav. Text colour matches the #F0F0F0 base so only the highlight + shadow text-shadows render, giving a subtle pressed-into-the-surface look. */ .page-bg-pattern { position: fixed; inset: 0; z-index: 0; pointer-events: none; user-select: none; overflow: hidden; background: #FAFAFA; /* Parent is always visible. The intro overlay is translucent, so the animated emboss pattern is already present behind the first line. */ opacity: 1; } .page-bg-pattern .bg-tilt { position: absolute; inset: -20%; display: flex; flex-direction: column; justify-content: space-around; align-items: stretch; transform: rotate(-18deg); transform-origin: center; } .page-bg-pattern .bg-row { display: flex; justify-content: space-around; align-items: center; gap: clamp(28px, 5vw, 64px); white-space: nowrap; font-family: var(--font-display); font-weight: 400; /* 25% larger than before — mobile floor 52px, desktop ceiling 75px. Keeps the embossed pattern readable on small screens and scales up assertively on wide ones. */ font-size: clamp(52px, 10vw, 75px); letter-spacing: 0.04em; /* Debossed (pressed-in) effect — text colour matches the panel (#FAFAFA), so only the shadows render. Light from below: dark stroke at the top-left, white highlight at the bottom-right — opposite of a raised emboss. Same intensities as the previous pass so visual weight is unchanged, just inverted direction. */ color: #FAFAFA; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.05), -2px -2px 1px rgba(0, 0, 0, 0.018), 1px 1px 0 rgba(255, 255, 255, 0.85); } .page-bg-pattern .bg-row span { display: inline-block; } /* Background pattern uses the same #FAFAFA across every page now — homepage, quiz, results all on the lighter panel. */ /* Rows slide in horizontally with alternating direction — odd rows come from the left, even rows from the right — so the pattern weaves itself together rather than fading in as one slab. The translateX sits inside the rotated .bg-tilt, so the slide is slightly off-axis in screen space (matches the diagonal tilt). */ .page-bg-pattern .bg-row { --row-delay: 0s; opacity: 0; will-change: opacity, transform; } .page-bg-pattern .bg-row:nth-child(odd) { transform: translateX(-160px); animation: bgRowSlideLeft 1.1s var(--row-delay) cubic-bezier(0.22, 0.61, 0.36, 1) forwards, bgRowDriftLeft 14s calc(var(--row-delay) + 2.1s) ease-in-out infinite; } .page-bg-pattern .bg-row:nth-child(even) { transform: translateX(160px); animation: bgRowSlideRight 1.1s var(--row-delay) cubic-bezier(0.22, 0.61, 0.36, 1) forwards, bgRowDriftRight 14s calc(var(--row-delay) + 2.1s) ease-in-out infinite; } body:not(.intro-done) .page-bg-pattern .bg-row { opacity: 1; } body:not(.intro-done) .page-bg-pattern { animation: introPatternFade 18s ease both; } body:not(.intro-done) .page-bg-pattern .bg-row:nth-child(odd) { animation: bgRowDriftLeft 14s ease-in-out infinite; } body:not(.intro-done) .page-bg-pattern .bg-row:nth-child(even) { animation: bgRowDriftRight 14s ease-in-out infinite; } body:not(.intro-done) .page-bg-pattern .bg-row { text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.075), -2px -2px 1px rgba(0, 0, 0, 0.035), 1px 1px 0 rgba(255, 255, 255, 0.9); } /* Simple slide-in per row, alternating direction, followed by a perpetual alternating drift. This starts immediately so the pattern is visible underneath the intro overlay from the first sentence onward. */ @keyframes bgRowDriftLeft { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-60px); } } @keyframes bgRowDriftRight { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(60px); } } .page-bg-pattern .bg-row:nth-child(1) { --row-delay: 0.00s; } .page-bg-pattern .bg-row:nth-child(2) { --row-delay: 0.10s; } .page-bg-pattern .bg-row:nth-child(3) { --row-delay: 0.20s; } .page-bg-pattern .bg-row:nth-child(4) { --row-delay: 0.30s; } .page-bg-pattern .bg-row:nth-child(5) { --row-delay: 0.40s; } .page-bg-pattern .bg-row:nth-child(6) { --row-delay: 0.50s; } .page-bg-pattern .bg-row:nth-child(7) { --row-delay: 0.60s; } .page-bg-pattern .bg-row:nth-child(8) { --row-delay: 0.70s; } .page-bg-pattern .bg-row:nth-child(9) { --row-delay: 0.80s; } .page-bg-pattern .bg-row:nth-child(10) { --row-delay: 0.90s; } @keyframes bgRowSlideLeft { from { opacity: 0; transform: translateX(-160px); } to { opacity: 1; transform: translateX(0); } } @keyframes bgRowSlideRight { from { opacity: 0; transform: translateX(160px); } to { opacity: 1; transform: translateX(0); } } @keyframes introPatternFade { from { opacity: 0; } to { opacity: 1; } } /* (Per-page bg override removed — every page now uses #FAFAFA.) */ /* Hero copy sits above the fixed pattern layer. */ .hero-eyebrow { position: relative; z-index: 1; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #0a0a0a; margin-bottom: 12px; /* 1.0s delay so the embossed pattern settles first; the rest of the hero (h1 / sub / cta) chains off this with their own offsets. */ animation: fadeUp 1s 1.0s ease both; font-weight: 400; } .hero h1 { position: relative; z-index: 1; font-family: var(--font-display); font-weight: 400; /* Plan-B wordmark sizing. -32px matches the hero's 16px padding each side. */ font-size: calc((100vw - 32px) / 3.8); line-height: 1; letter-spacing: 0.05em; color: #1A1A18; margin-bottom: 40px; animation: fadeUp 1s 1.15s ease both; } /* Mobile uses the same flat #F0F0F0 background as desktop now that the bg image has been removed. */ /* Tablet — same fill behaviour as mobile (hero padding stays 16px each side). */ @media (min-width: 768px) { .hero h1 { font-size: calc((100vw - 32px) / 3.8); } } @media (min-width: 900px) { .hero h1 { font-size: clamp(120px, 18vw, 240px); } } .hero h1 .b { color: #5A9A78; } /* Trademark mark — only auto-attached to the small header logo. The hero H1 uses an explicit sibling .brand-tm span instead, since CSS filters on the H1 (paint-3d) would otherwise pull ™ into the gloss. */ /* Hero brand line — flex wrapper so ™ can sit next to the painted H1 without being inside the H1's filter scope. The wrapper takes over the H1's bottom margin and entrance animation so the line moves together. */ .hero .brand-line { display: inline-block; white-space: nowrap; position: relative; z-index: 1; margin: 0 auto 40px; animation: fadeUp 1s 1.15s ease both; } .hero .brand-line h1.paint-3d { display: inline-block; vertical-align: top; margin-bottom: 0; animation: none; } .brand-tm { display: inline-block; vertical-align: super; font-family: var(--font-display); font-weight: 400; /* 1/5 of H1 size to match the small superscript scale used elsewhere */ font-size: calc((100vw - 32px) / 25); line-height: 1; color: #1A1A18; letter-spacing: 0; margin-left: 0.05em; } @media (min-width: 768px) { .brand-tm { font-size: calc((100vw - 64px) / 25); } } @media (min-width: 900px) { .brand-tm { font-size: clamp(24px, 2.8vw, 35px); } } /* Glossy 3D paint effect on the brand title — no hover state by design, the wordmark holds its painted look regardless of pointer position. */ .hero h1.paint-3d { filter: url(#paintGloss); -webkit-filter: url(#paintGloss); /* subtle vertical sheen — top catches light, bottom sinks back into the paint */ background: linear-gradient(180deg, #2a2a26 0%, #1A1A18 45%, #060604 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding: 0.12em 0.08em 0.2em; } /* Mobile — swap to the lighter paint-gloss filter so the drop shadow is dialled back. Same gradient + gloss, gentler shadow underneath. */ @media (max-width: 767px) { .hero h1.paint-3d { filter: url(#paintGlossLight); -webkit-filter: url(#paintGlossLight); font-weight: 500; text-shadow: 0.012em 0 0 currentColor; } } .hero-sub { position: relative; z-index: 1; font-family: var(--font-body); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 400; color: #0a0a0a; max-width: 520px; margin: 0 auto 40px; line-height: 1.6; animation: fadeUp 1s 2.0s ease both; } .cta-btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 400; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; padding: 18px 48px; border-radius: 0; cursor: pointer; transition: color 0.3s ease, var(--trans); animation: fadeUp 1s 2.45s ease both; /* Lift above .hero::after radial fade so the button isn't washed out */ z-index: 2; } .cta-btn span { position: relative; } /* ── EMAIL CAPTURE ── */ .email-section { background: var(--panel); border-bottom: 1px solid var(--border); padding: 28px 24px; } .email-inner { max-width: 540px; margin: 0 auto; } .email-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; } .email-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--white); margin-bottom: 6px; } .email-sub { font-size: 13px; color: var(--text-dim); margin-bottom: 16px; line-height: 1.6; } .email-form { display: flex; gap: 10px; flex-wrap: wrap; } .email-input { flex: 1; min-width: 200px; padding: 13px 16px; background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--white); font-family: var(--font-body); font-size: 15px; outline: none; transition: var(--trans); } .email-input:focus { border-color: var(--red); } .email-input::placeholder { color: var(--muted); } .email-submit { padding: 13px 24px; background: var(--red); border: none; border-radius: var(--radius); color: #0C0C0E; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--trans); white-space: nowrap; } .email-submit:hover { background: #7AB498; } .email-success { display: none; padding: 14px 20px; background: var(--green-dim); border: 1px solid var(--green); border-radius: var(--radius); color: var(--green-bright); font-size: 14px; font-weight: 600; margin-top: 10px; } .email-success.show { display: block; } .email-note { font-size: 11px; color: var(--muted); margin-top: 10px; } /* ── SCENARIO STRIP ── */ .scenario-strip { display: flex; overflow-x: auto; gap: 12px; padding: 20px 24px; background: var(--panel); border-bottom: 1px solid var(--border); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .scenario-strip::-webkit-scrollbar { display: none; } .scenario-pill { flex-shrink: 0; display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 40px; border: 1px solid rgba(255,255,255,0.06); font-family: var(--font-body); font-weight: 500; font-size: 13px; letter-spacing: 0.03em; white-space: nowrap; color: var(--text-dim); background: rgba(255,255,255,0.02); } .pill-1 { border-color: rgba(90,154,120,0.2); color: var(--red); } .pill-2 { border-color: rgba(90,154,120,0.15); color: var(--text); } .pill-3 { border-color: rgba(90,154,120,0.15); color: var(--text); } .pill-4 { border-color: rgba(106,170,138,0.2); color: var(--green); } .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; } /* ── QUESTIONNAIRE ── */ .quiz-section { width: 100%; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .quiz-section.hidden { display: none !important; } .quiz-progress-bar { position: fixed; top: 0; left: 0; right: 0; background: rgba(250,250,250,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); /* Match .site-header dimensions: 60px tall, 24px mobile / 28px desktop padding */ height: 60px; padding: 0 24px; z-index: 110; } @media (min-width: 768px) { .quiz-progress-bar { padding: 0 28px; } } body.quiz-active .site-header { display: none; } .quiz-progress-bar .progress-wrap { max-width: 540px; margin: 0 auto; } .quiz-progress-bar .progress-header { margin-bottom: 6px; } .quiz-content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 80px 24px 110px; width: 100%; } .quiz-content #question-container { width: 100%; max-width: 540px; margin: 0 auto; } .quiz-footer { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(250,250,250,0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border); padding: 14px 24px max(14px, env(safe-area-inset-bottom)); z-index: 90; } .quiz-footer .q-nav { max-width: 540px; margin: 0 auto; } .quiz-footer:empty { display: none; } .progress-wrap { margin-bottom: 0; } .progress-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .progress-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; } .progress-count { font-family: var(--font-mono); font-size: 13px; color: var(--bright); } .progress-bar { height: 3px; background: var(--muted); border-radius: 99px; overflow: hidden; } .progress-fill { height: 100%; background: var(--red); border-radius: 99px; transition: width 0.5s cubic-bezier(0.4,0,0.2,1); } .question-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; animation: fadeUp 0.35s ease both; } .q-step { font-family: var(--font-mono); font-size: 10px; color: var(--red); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 12px; } .q-text { font-family: var(--font-display); font-weight: 400; font-size: 24px; color: var(--white); line-height: 1.3; margin-bottom: 8px; } .q-sub { font-size: 13px; color: var(--text-dim); line-height: 1.6; margin-bottom: 24px; } .q-options { display: flex; flex-direction: column; gap: 10px; } .q-opt { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--panel); border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: var(--trans); -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; } .q-opt:hover { border-color: rgba(255,255,255,0.08); background: var(--deep); } .q-opt.selected { border-color: var(--red); background: rgba(90,154,120,0.06); } .q-opt.selected .opt-radio { border-color: var(--red); } .q-opt.selected .opt-radio::after { display: block; } .opt-radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--muted); flex-shrink: 0; position: relative; transition: var(--trans); } .opt-radio::after { content: ''; display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; background: var(--red); border-radius: 50%; } .opt-label { font-size: 15px; color: var(--bright); line-height: 1.4; } .opt-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; } .q-opt.multi .opt-radio { border-radius: 4px; } .q-opt.multi.selected .opt-radio { border-color: var(--red); background: var(--red); border-radius: 4px; } .q-opt.multi.selected .opt-radio::after { display: block; content: '✓'; color: white; font-size: 11px; font-weight: bold; background: none; width: auto; height: auto; top: 50%; left: 50%; transform: translate(-50%,-55%); border-radius: 0; } .slider-wrap { padding: 8px 0; } .slider-labels { display: flex; justify-content: space-between; margin-bottom: 12px; } .slider-labels span { font-size: 12px; color: var(--text-dim); font-family: var(--font-mono); } input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--muted); border-radius: 99px; outline: none; cursor: pointer; } /* Slider thumb — dark green paint style. CSS-only approximation of the SVG paintGlossBtn filter the CTA buttons use: a #2a3010 base with a linear gradient simulating the embossed top-highlight / bottom-shadow, plus an inset top stroke and a soft drop shadow. */ input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #3a4220 0%, #2a3010 55%, #161a08 100%); border: 1px solid rgba(0,0,0,0.40); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,236,200,0.22), 0 2px 6px rgba(0,0,0,0.30), 0 0 0 4px rgba(42,48,16,0.10); } input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #3a4220 0%, #2a3010 55%, #161a08 100%); border: 1px solid rgba(0,0,0,0.40); cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,236,200,0.22), 0 2px 6px rgba(0,0,0,0.30), 0 0 0 4px rgba(42,48,16,0.10); } .slider-val { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 32px; color: var(--white); margin-top: 16px; } .slider-val span { font-size: 18px; color: var(--text-dim); margin-left: 4px; } .q-nav { display: flex; gap: 12px; } .btn-back { flex: 1; height: 52px; background: var(--panel); border: 1px solid var(--border); border-radius: 0; color: var(--text-dim); font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--trans); display: flex; align-items: center; justify-content: center; } .btn-back:hover { border-color: var(--muted); color: var(--text); } .btn-next { flex: 1; height: 52px; background: var(--red); border: none; border-radius: 0; color: #FFFFFF; font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: var(--trans); box-shadow: 0 2px 20px rgba(90,154,120,0.15); } .btn-next:hover { background: #C8A870; } .btn-next:disabled { background: var(--muted); box-shadow: none; cursor: not-allowed; color: var(--deep); } /* ── RESULTS ── */ .results-section { padding: 84px 20px 80px; max-width: 600px; margin: 0 auto; width: 100%; display: none; } @media (min-width: 768px) { /* Desktop — bump the content column ~15% so the result panels and recommendation cards have more breathing room on a wide viewport. */ .results-section { max-width: 690px; } } .results-section.active { display: block; } /* Risk banner — wrapper provides positioning + padding so risk-* variants can paint their fill via ::before (the dark-green paint variant uses an SVG gloss filter that needs an isolated stacking context). */ .risk-banner { position: relative; isolation: isolate; overflow: hidden; padding: 28px 24px; border-radius: var(--radius-lg); margin-bottom: 24px; text-align: center; animation: none; } .risk-level { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 10px; opacity: 0.85; } /* Heading typeface unified with the button font (Barlow / var(--font-body)) instead of the DM Serif display face — keeps the assessment headings in the same family as the CTA buttons. */ .risk-title { font-family: var(--font-body); font-weight: 800; font-size: 36px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; margin-bottom: 10px; } .risk-desc { font-size: 14px; opacity: 0.9; line-height: 1.6; } /* Risk variants — each state wears a paint card in its own deep tint. ::before carries the painted fill (paintGlossBtn filter for the glossy embossed look that the CTA buttons use); the wrapper itself is just the drop shadow + positioning context. Text colours flip to warm cream for legibility on the dark backgrounds. */ .risk-critical, .risk-high, .risk-medium, .risk-low { background: transparent; border: none; box-shadow: 0 8px 18px rgba(0,0,0,0.18); } .risk-critical::before, .risk-high::before, .risk-medium::before, .risk-low::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; filter: url(#paintGlossBtn); -webkit-filter: url(#paintGlossBtn); } .risk-critical::before { background: #5A1818; } /* deep maroon — critical */ .risk-high::before { background: #5A3818; } /* deep amber — high */ .risk-medium::before { background: #4A3A10; } /* dark olive — moderate */ .risk-low::before { background: #2A3010; } /* dark green — prepared */ .risk-critical .risk-level, .risk-critical .risk-title, .risk-critical .risk-desc, .risk-high .risk-level, .risk-high .risk-title, .risk-high .risk-desc, .risk-medium .risk-level, .risk-medium .risk-title, .risk-medium .risk-desc, .risk-low .risk-level, .risk-low .risk-title, .risk-low .risk-desc { color: #f4ecd8; } /* Scenario tabs — flat row inside the white-paint Recommendations panel. No outer container border/padding (the panel frame already provides that); inactive tabs are quiet text buttons. The active tab wears the green-paint CTA look (same paint gloss + #2a3010 fill as the protein button) so the current scenario reads at a glance. */ .scenario-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: transparent; border: none; border-radius: 0; padding: 0; margin-bottom: 16px; animation: fadeUp 0.4s 0.1s ease both; } @media (min-width: 768px) { /* Desktop has room for one row of 4. */ .scenario-tabs { grid-template-columns: repeat(4, 1fr); } } .s-tab { flex: 1; position: relative; isolation: isolate; padding: 10px 6px; border: none; background: transparent; border-radius: 4px; font-family: var(--font-body); font-weight: 400; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); cursor: pointer; transition: color 0.2s ease; text-align: center; line-height: 1.3; } .s-tab:hover { color: var(--text); } /* Active state — green-paint button. ::before holds the glossy fill so the text colour stays solid against the dark green. */ .s-tab.active-s1, .s-tab.active-s2, .s-tab.active-s3, .s-tab.active-s4 { color: #f4ecd8; } .s-tab.active-s1::before, .s-tab.active-s2::before, .s-tab.active-s3::before, .s-tab.active-s4::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: #2a3010; filter: url(#paintGlossBtn); -webkit-filter: url(#paintGlossBtn); transition: filter 0.6s ease; } /* Recommendation cards — wear the white-paint inner-item look (#F0F0F0 + embossed shadow + inset highlight), parallel to the .q-opt items inside the question card. The rec-cards sit inside the .result-panel which is #FAFAFA, mirroring the question-card / q-opt nesting. Text colours flip to dark for legibility on the light background. */ .rec-cards { animation: fadeUp 0.4s 0.15s ease both; } .rec-card { /* Lighter card body — was #F0F0F0 (read as grey on the page); now #FAFAFA so the product info sits on a near-white surface. The header above takes the light sage tone as a visual section break. */ background: #FAFAFA; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius); margin-bottom: 12px; overflow: hidden; box-shadow: 0 3px 6px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.7); } /* Header strip wears the same light sage as the .rp-hint banner so the rec-card sections read as a coordinated family. */ .rec-header { padding: 14px 16px; display: flex; align-items: center; gap: 12px; background: #E5F0E0; border-bottom: 1px solid rgba(90,154,120,0.22); } /* Green-paint icon chip — matches the painted CTA buttons. ::before carries the dark-green fill with the gloss filter; the icon SVG inside inherits the warm-cream stroke colour via currentColor. */ .rec-icon { position: relative; isolation: isolate; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #f4ecd8; } .rec-icon::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: #2a3010; filter: url(#paintGlossBtn); -webkit-filter: url(#paintGlossBtn); } .rec-cat { font-family: var(--font-mono); font-size:14px; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; } .rec-title { font-family: var(--font-display); font-weight: 400; font-size: 18px; color: var(--text); line-height: 1.2; } .priority-badge { margin-left: auto; padding: 4px 10px; border-radius: 99px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; font-weight: 700; flex-shrink: 0; } /* Priority badges — proper traffic-light palette so urgency reads at a glance. Backgrounds are soft tints of the same hue so the pill stays light and the text colour does the colour-coding. */ .p-critical { background: rgba(192,48,48,0.10); color: #C03030; border: 1px solid rgba(192,48,48,0.30); } .p-high { background: rgba(220,124,32,0.10); color: #C16A18; border: 1px solid rgba(220,124,32,0.32); } .p-medium { background: rgba(212,168,32,0.12); color: #A48010; border: 1px solid rgba(212,168,32,0.35); } .rec-body { padding: 14px 16px; } .rec-items { display: flex; flex-direction: column; gap: 12px; } .rec-item { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,0.06); } .rec-item:last-child { border-bottom: none; padding-bottom: 0; } .item-name { font-weight: 600; font-size: 15px; color: var(--text); } .item-why { font-size: 13px; color: var(--text-dim); line-height: 1.55; } .item-cost { font-family: var(--font-mono); font-size: 13px; color: var(--green-bright); } /* Cost + affiliate-btn footer row inside each rec-item. Default (desktop) is the cost on the left and the button on the right; on mobile the button drops to its own row at full width — easier tap target. */ .rec-item-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .affiliate-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.10); border-radius: 0; color: var(--text); font-size: 12px; font-weight: 600; text-decoration: none; cursor: pointer; transition: var(--trans); width: fit-content; } .affiliate-btn:hover { background: rgba(0,0,0,0.08); } @media (max-width: 767px) { /* Mobile — break the button onto its own row beneath the cost and let it fill the rec-item width. flex-wrap on the parent does the line break; flex-basis: 100% guarantees the row split even when the cost is short. */ .rec-item-foot .affiliate-btn { flex: 0 0 100%; width: 100%; justify-content: center; padding: 12px 14px; margin-top: 4px; } } /* Budget meter — same logic as the rec-cards: text flips to dark since the .result-panel underneath is white-paint. The .budget-meter wrapper itself is stripped to transparent in the panel-body override (line ~615), so only the inner element colours need adjusting here. */ .budget-meter { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; animation: fadeUp 0.4s 0.2s ease both; } /* Inner budget title matches the panel header typography (.rp-title: var(--font-body), 700, 0.02em tracking) but a touch bigger so the total reads as the primary stat inside the panel. */ .bm-title { font-family: var(--font-body); font-weight: 700; font-size: 19px; letter-spacing: 0.02em; line-height: 1.3; color: var(--text); margin-bottom: 16px; } .budget-cats { display: flex; flex-direction: column; gap: 10px; } .bcat { display: flex; align-items: center; gap: 10px; } .bcat-label { font-size: 16px; color: var(--text-dim); width: 110px; flex-shrink: 0; } .bcat-bar-wrap { flex: 1; height: 6px; background: rgba(0,0,0,0.08); border-radius: 99px; overflow: hidden; } .bcat-bar { height: 100%; border-radius: 99px; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); } .bcat-cost { font-family: var(--font-mono); font-size: 15px; color: var(--text); width: 72px; text-align: right; flex-shrink: 0; } /* Total row — sums the breakdown above. Same .bcat layout so the label and amount align with the category rows, plus a top divider and a touch more weight to set it apart as the summary line. */ .bcat-total { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,0.08); } .bcat-total .bcat-label { color: var(--text); font-weight: 600; } .bcat-total .bcat-cost { color: var(--text); font-weight: 700; } .bcat-total .bcat-bar-wrap { background: transparent; height: 0; } /* Timeline — same dark-on-light flip. Connector line uses a subtle dark border colour so it reads on the white-paint panel. */ .timeline { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 20px; animation: fadeUp 0.4s 0.25s ease both; } .tl-title { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--text); margin-bottom: 16px; } .tl-items { display: flex; flex-direction: column; gap: 0; } /* Each step gets generous breathing room top + bottom so the timeline reads as a sequence of distinct moments rather than a tight list. Padding is consistent across every item (no first/last overrides) so the connector line positioning is stable from step to step. */ .tl-item { display: flex; gap: 16px; padding: 14px 0 28px; position: relative; } .tl-item:last-child { padding-bottom: 4px; } /* Connector line — light dotted column drawn as a dotted left border on a zero-width pseudo. Top starts 46px from item-top (just under a 32px dot sat on 14px padding) and bottom extends -14px past the item so it reaches the next item's dot at its 14px padding offset. */ .tl-item:not(:last-child)::before { content: ''; position: absolute; left: 15px; top: 46px; bottom: -14px; width: 0; border-left: 2px dotted rgba(0,0,0,0.18); } /* Timeline dot — green-paint circle that matches the rec-icon chip but round. Same painted ::before with a slightly larger size so the icon inside reads at small viewport sizes. */ .tl-dot { position: relative; isolation: isolate; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; color: #f4ecd8; } .tl-dot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: #2a3010; filter: url(#paintGlossBtn); -webkit-filter: url(#paintGlossBtn); } /* Step title — vertically centred against the 32px dot using min-height + flex centring so the label sits at the dot's mid-line rather than its top edge. Dark-green-paint colour so the title matches the rest of the brand-paint elements. */ .tl-when { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: #2a3010; margin-bottom: 6px; min-height: 32px; display: flex; align-items: center; } .tl-action { font-size:16px; color: var(--text); line-height: 1.5; } .tl-cost { font-family: var(--font-mono); font-size:15px; color: var(--green-bright); margin-top: 4px; } /* ── RESULT PANELS — collapsible accordions for progressive disclosure. Recommendations open by default; Budget and Timeline collapsed so the results page doesn't overwhelm. The panel itself becomes the white-paint card; inner sections (.budget-meter, .timeline, .scenario-tabs) drop their own box treatment so the panel frame is the only container. */ .result-panel { background: #FAFAFA; border: 1px solid rgba(0,0,0,0.06); border-radius: var(--radius-lg); margin-bottom: 14px; overflow: hidden; box-shadow: 0 7px 10.6px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7); } .result-panel-header { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.15s ease; } .result-panel-header::-webkit-details-marker { display: none; } .result-panel-header:hover { background: rgba(0,0,0,0.02); } .rp-title { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--text); flex: 1; letter-spacing: 0.02em; line-height: 1.3; } /* ── ICONS ── inline SVG line-icons inherit colour via currentColor. Sized via the width/height attribute on the