/* ============================================================================ Value-story ("why") pages — the shared skeleton behind why/*.html. One claim per page: pain -> mechanism -> evidence -> objection -> sign up. Theme is set by a single class on : .why-student or .why-instructor. The closing conversion block is injected by shared/js/why-page.js from shared/components/why-cta.html, so the pitch is written exactly once. ========================================================================= */ body.why-student { --why: #7c3aed; --why-light: #a78bfa; --why-pale: #ede9fe; --why-hero-a: #12071f; --why-hero-b: #2a1250; } body.why-instructor { --why: #2563eb; --why-light: #60a5fa; --why-pale: #dbeafe; --why-hero-a: #06101f; --why-hero-b: #123055; } .why-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; } /* ── auth bar (the root marketing pages inline this; ten pages should not) ─ */ .why-page .auth-bar { background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 0.75rem 0; } .why-page .auth-bar__container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; display: flex; justify-content: space-between; align-items: center; } .why-page .auth-bar__links { display: flex; gap: 1.5rem; align-items: center; margin-left: auto; } .why-page .auth-bar__links a { color: #3b82f6; text-decoration: none; font-size: 0.95rem; font-weight: 500; } .why-page .auth-bar__links a:hover { text-decoration: underline; } .why-page button.auth-bar__logout { color: #3b82f6; background: transparent; border: none; cursor: pointer; font: inherit; font-weight: 500; text-decoration: underline; padding: 0; margin-left: 0.75rem; } /* ── hero ───────────────────────────────────────────────────────────────── */ .why-hero { position: relative; overflow: hidden; margin: 1.5rem auto 0; max-width: 1140px; border-radius: 24px; padding: 3.25rem 2rem 3rem; text-align: center; color: #f8fafc; background: linear-gradient(140deg, var(--why-hero-a) 0%, var(--why-hero-b) 100%); } .why-hero::before { content: ''; position: absolute; top: -40%; right: -10%; width: 60%; height: 160%; background: radial-gradient(circle, color-mix(in srgb, var(--why-light) 22%, transparent) 0%, transparent 68%); pointer-events: none; } .why-hero > * { position: relative; } .why-eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; color: var(--why-light); background: color-mix(in srgb, var(--why-light) 15%, transparent); border: 1px solid color-mix(in srgb, var(--why-light) 38%, transparent); padding: 0.3rem 0.95rem; border-radius: 999px; margin-bottom: 1rem; } .why-hero h1 { margin: 0 auto 0.9rem; max-width: 20ch; font-size: clamp(1.85rem, 4.6vw, 2.85rem); font-weight: 800; line-height: 1.16; letter-spacing: -0.025em; } .why-hero h1 em { font-style: normal; color: var(--why-light); } .why-lede { margin: 0 auto; max-width: 60ch; font-size: clamp(1rem, 2.2vw, 1.15rem); line-height: 1.6; color: #cbd5e1; } .why-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; } .why-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.6rem; border-radius: 12px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s; } .why-btn--primary { background: linear-gradient(135deg, var(--why), color-mix(in srgb, var(--why) 65%, #000)); color: #ffffff; box-shadow: 0 4px 20px color-mix(in srgb, var(--why) 40%, transparent); } .why-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--why) 55%, transparent); } .why-btn--ghost { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: #e2e8f0; } .why-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-2px); } .why-btn:focus-visible { outline: 3px solid #ffffff; outline-offset: 3px; } /* ── the pain line ──────────────────────────────────────────────────────── */ .why-pain { max-width: 760px; margin: 3rem auto 0; padding: 1.4rem 1.6rem; border-left: 4px solid var(--why); background: color-mix(in srgb, var(--why) 5%, #ffffff); border-radius: 0 12px 12px 0; font-size: clamp(1.05rem, 2.4vw, 1.3rem); font-weight: 600; line-height: 1.5; color: #1e293b; } /* ── section scaffolding ────────────────────────────────────────────────── */ .why-section { margin: 3.25rem auto 0; } .why-section-head { text-align: center; margin-bottom: 1.75rem; } .why-section-head h2 { margin: 0 0 0.45rem; font-size: clamp(1.35rem, 3vw, 1.85rem); font-weight: 800; color: #0f172a; letter-spacing: -0.02em; } .why-section-head p { margin: 0 auto; max-width: 62ch; color: #64748b; font-size: 1rem; line-height: 1.6; } /* ── mechanism: the three beats of what actually happens ────────────────── */ .why-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.15rem; counter-reset: whystep; } .why-step { position: relative; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 1.5rem 1.35rem 1.35rem; transition: transform 0.2s, box-shadow 0.2s; } .why-step:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09); } .why-step::before { counter-increment: whystep; content: counter(whystep); position: absolute; top: -16px; left: 1.35rem; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 0.9rem; font-weight: 800; color: #ffffff; background: linear-gradient(135deg, var(--why), color-mix(in srgb, var(--why) 60%, #000)); box-shadow: 0 3px 10px color-mix(in srgb, var(--why) 38%, transparent); } .why-step h3 { margin: 0.35rem 0 0.5rem; font-size: 1.05rem; font-weight: 700; color: #0f172a; } .why-step p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: #475569; } /* ── evidence band: the concrete artifacts behind the claim ─────────────── */ .why-evidence { background: #0f172a; border-radius: 20px; padding: 2rem 1.75rem; color: #e2e8f0; } .why-evidence h2 { margin: 0 0 1.35rem; text-align: center; font-size: clamp(1.25rem, 2.8vw, 1.6rem); font-weight: 800; color: #f8fafc; } .why-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; } .why-fact { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(148, 163, 184, 0.22); border-radius: 14px; padding: 1.1rem 1.15rem; } .why-fact b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--why-light); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 0.3rem; } .why-fact span { font-size: 0.86rem; line-height: 1.5; color: #cbd5e1; } /* ── objection block: name the doubt out loud ──────────────────────────── */ .why-objection { max-width: 780px; margin: 3.25rem auto 0; background: #fffbeb; border: 1px solid #fde68a; border-radius: 16px; padding: 1.5rem 1.6rem; } .why-objection h2 { margin: 0 0 0.6rem; font-size: 1.1rem; font-weight: 800; color: #92400e; display: flex; align-items: center; gap: 0.5rem; } .why-objection p { margin: 0 0 0.7rem; font-size: 0.96rem; line-height: 1.65; color: #78350f; } .why-objection p:last-child { margin-bottom: 0; } /* ── sibling stories, injected by why-page.js ──────────────────────────── */ .why-more { margin: 3.25rem auto 0; } .why-more h2 { text-align: center; margin: 0 0 1.25rem; font-size: 1.2rem; font-weight: 800; color: #0f172a; } .why-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem; } .why-more-card { display: block; text-decoration: none; padding: 0.95rem 1.1rem; border-radius: 12px; border: 1px solid #e2e8f0; background: #ffffff; transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; } .why-more-card:hover { transform: translateY(-3px); border-color: var(--why-light); box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08); } .why-more-card strong { display: block; font-size: 0.94rem; font-weight: 700; color: #0f172a; line-height: 1.4; margin-bottom: 0.2rem; } .why-more-card span { font-size: 0.8rem; color: #64748b; } /* ── closing conversion block ──────────────────────────────────────────── */ .why-cta { margin-top: 3.5rem; padding: 3rem 1.5rem; background: linear-gradient(140deg, var(--why-hero-a) 0%, var(--why-hero-b) 100%); text-align: center; color: #f8fafc; } .why-cta h2 { margin: 0 auto 0.75rem; max-width: 22ch; font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; } .why-cta > p { margin: 0 auto; max-width: 60ch; color: #cbd5e1; font-size: 1.02rem; line-height: 1.65; } .why-cta-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; } .why-cta-fine { margin-top: 1.15rem; font-size: 0.85rem; color: #94a3b8; } /* Audience swap inside the shared CTA partial. */ body.why-student .why-cta [data-audience-only="instructor"], body.why-instructor .why-cta [data-audience-only="student"] { display: none; } /* ── footer ────────────────────────────────────────────────────────────── */ .why-footer { text-align: center; padding: 2rem 1rem; background: #f9fafb; border-top: 1px solid #e5e7eb; } .why-footer p { margin: 0 0 0.5rem; color: #6b7280; font-size: 0.95rem; } .why-footer p:last-child { margin: 0; color: #9ca3af; font-size: 0.85rem; } .why-footer a { color: #3b82f6; text-decoration: none; font-weight: 500; } .why-footer a:hover { text-decoration: underline; } .why-footer .sep { margin: 0 0.75rem; color: #d1d5db; } /* ── shared demo frame for the per-page animated proof ─────────────────── */ .why-demo { position: relative; margin: 0 auto; max-width: 620px; border-radius: 18px; overflow: hidden; background: linear-gradient(150deg, #0b1220 0%, #131f36 100%); border: 1px solid rgba(148, 163, 184, 0.28); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22); } .why-demo-chrome { display: flex; align-items: center; gap: 6px; padding: 0.55rem 0.85rem; background: rgba(148, 163, 184, 0.12); border-bottom: 1px solid rgba(148, 163, 184, 0.16); } .why-demo-chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(203, 213, 225, 0.45); } .why-demo-chrome b { margin-left: 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; color: #94a3b8; } .why-demo-stage { height: 260px; position: relative; } .why-demo-stage .aud-viz { height: 100%; border-bottom: none; --aud-accent: var(--why-light); --aud-accent-strong: var(--why); } .why-demo-caption { margin: 0.85rem auto 0; max-width: 56ch; text-align: center; font-size: 0.86rem; color: #64748b; line-height: 1.55; } @media (max-width: 640px) { .why-hero { border-radius: 0; margin-top: 0; padding: 2.5rem 1.25rem; } .why-demo-stage { height: 200px; } }