Spaces:
Running
Running
| :root { | |
| --navy: #071b45; | |
| --navy-2: #0d2a63; | |
| --card: rgba(255, 255, 255, 0.06); | |
| --card-border: rgba(255, 255, 255, 0.14); | |
| --ink: #eef2ff; | |
| --muted: #aab6d8; | |
| --accent-a: #7c8cff; | |
| --accent-b: #c66bff; | |
| --grad: linear-gradient(135deg, #7c8cff 0%, #b06bff 55%, #c66bff 100%); | |
| --good: #4cd9a0; | |
| --warn: #ffc04d; | |
| --bad: #ff6b8a; | |
| --radius: 18px; | |
| } | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arial", sans-serif; | |
| background: | |
| radial-gradient(1200px 700px at 85% -10%, rgba(198, 107, 255, 0.20), transparent 60%), | |
| radial-gradient(1000px 600px at -10% 110%, rgba(124, 140, 255, 0.22), transparent 55%), | |
| var(--navy); | |
| color: var(--ink); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.55; | |
| } | |
| /* ---------- top bar ---------- */ | |
| .topbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| padding: 18px 28px; | |
| border-bottom: 1px solid var(--card-border); | |
| background: rgba(7, 27, 69, 0.55); | |
| backdrop-filter: blur(8px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 20; | |
| } | |
| .brand { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } | |
| .brand-emoji { font-size: 20px; } | |
| .brand-name { font-weight: 800; letter-spacing: 0.02em; } | |
| .brand-sub { color: var(--muted); font-size: 13px; } | |
| .steps { display: flex; gap: 6px; flex-wrap: wrap; } | |
| .step { | |
| background: transparent; | |
| color: var(--muted); | |
| border: 1px solid transparent; | |
| border-radius: 999px; | |
| padding: 7px 14px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .step:hover { color: var(--ink); border-color: var(--card-border); } | |
| .step.is-active { | |
| background: var(--grad); | |
| color: #fff; | |
| font-weight: 700; | |
| border-color: transparent; | |
| } | |
| /* ---------- shell ---------- */ | |
| .shell { | |
| width: 100%; | |
| max-width: 860px; | |
| margin: 0 auto; | |
| padding: 40px 24px 60px; | |
| flex: 1; | |
| } | |
| .view { animation: fade 0.35s ease; } | |
| @keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| .week-badge { | |
| display: inline-block; | |
| padding: 6px 12px; | |
| border-radius: 999px; | |
| background: rgba(124, 140, 255, 0.14); | |
| border: 1px solid rgba(124, 140, 255, 0.35); | |
| color: #cdd6ff; | |
| font-size: 12.5px; | |
| font-weight: 600; | |
| letter-spacing: 0.03em; | |
| margin-bottom: 18px; | |
| } | |
| .hero-title { | |
| font-size: clamp(30px, 5vw, 48px); | |
| line-height: 1.12; | |
| margin: 0 0 12px; | |
| font-weight: 800; | |
| } | |
| .hero-title em { | |
| font-style: italic; | |
| background: var(--grad); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero-title.small { font-size: clamp(24px, 4vw, 36px); } | |
| .hero-sub { color: var(--muted); font-size: 17px; max-width: 640px; margin: 0 0 18px; } | |
| .tag-row { margin-bottom: 22px; } | |
| .tag { | |
| font-size: 13px; | |
| color: #cdd6ff; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--card-border); | |
| padding: 7px 12px; | |
| border-radius: 10px; | |
| } | |
| /* ---------- cards ---------- */ | |
| .card { | |
| background: var(--card); | |
| border: 1px solid var(--card-border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| margin-bottom: 22px; | |
| } | |
| .card h2 { margin: 0 0 10px; font-size: 19px; } | |
| .card p { margin: 0 0 10px; } | |
| .card p:last-child { margin-bottom: 0; } | |
| .muted { color: var(--muted); } | |
| /* ---------- roles ---------- */ | |
| .roles { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 18px; | |
| margin-bottom: 22px; | |
| } | |
| .role-card { | |
| background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04)); | |
| border: 1px solid var(--card-border); | |
| border-radius: var(--radius); | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .role-kicker { | |
| display: inline-block; | |
| align-self: flex-start; | |
| font-size: 12px; | |
| font-weight: 800; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| background: var(--grad); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 10px; | |
| } | |
| .role-card h3 { margin: 0 0 8px; font-size: 20px; } | |
| .role-card p { color: var(--muted); margin: 0 0 18px; flex: 1; } | |
| /* ---------- buttons ---------- */ | |
| .btn { | |
| display: inline-block; | |
| align-self: flex-start; | |
| border: none; | |
| cursor: pointer; | |
| background: var(--grad); | |
| color: #fff; | |
| font-weight: 700; | |
| font-size: 14.5px; | |
| padding: 12px 20px; | |
| border-radius: 12px; | |
| transition: transform 0.12s ease, filter 0.12s ease; | |
| } | |
| .btn:hover { filter: brightness(1.08); transform: translateY(-1px); } | |
| .btn.ghost { | |
| background: transparent; | |
| color: var(--muted); | |
| border: 1px solid var(--card-border); | |
| } | |
| .btn.ghost:hover { color: var(--ink); border-color: var(--accent-a); } | |
| .btn-row { display: flex; gap: 12px; flex-wrap: wrap; } | |
| /* ---------- slider ---------- */ | |
| .slider-block { margin: 22px 0; } | |
| .slider-scale { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 10px; | |
| font-size: 13px; | |
| color: var(--muted); | |
| margin-bottom: 12px; | |
| flex-wrap: wrap; | |
| } | |
| input[type="range"] { | |
| width: 100%; | |
| accent-color: var(--accent-b); | |
| cursor: pointer; | |
| } | |
| .slider-bars { | |
| display: flex; | |
| height: 30px; | |
| border-radius: 8px; | |
| overflow: hidden; | |
| margin: 14px 0 10px; | |
| border: 1px solid var(--card-border); | |
| } | |
| .bar-x { background: var(--bad); transition: width 0.18s ease; display: flex; align-items: center; padding-left: 8px; font-size: 12px; font-weight: 700; } | |
| .bar-y { background: var(--good); transition: width 0.18s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; font-size: 12px; font-weight: 700; } | |
| .money-readout { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ink); gap: 10px; flex-wrap: wrap; } | |
| /* ---------- reveal ---------- */ | |
| .reveal-verdict { | |
| font-size: 20px; | |
| font-weight: 800; | |
| margin-bottom: 10px; | |
| } | |
| .reveal-compare { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 14px; | |
| margin-top: 18px; | |
| } | |
| .reveal-compare > div { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--card-border); | |
| border-radius: 12px; | |
| padding: 16px; | |
| } | |
| /* ---------- lessons ---------- */ | |
| .lessons { padding-left: 48px; } | |
| .lessons li { margin-bottom: 14px; padding-left: 4px; } | |
| .lessons li::marker { color: var(--accent-a); font-weight: 800; } | |
| /* ---------- footer ---------- */ | |
| .foot { | |
| text-align: center; | |
| color: var(--muted); | |
| font-size: 13px; | |
| padding: 20px; | |
| border-top: 1px solid var(--card-border); | |
| } | |
| @media (max-width: 560px) { | |
| .topbar { padding: 14px 16px; } | |
| .shell { padding: 28px 16px 48px; } | |
| .steps { width: 100%; justify-content: flex-start; } | |
| } | |