/* Prepdex relaunch theme (canvas v10-v13). Active only when , which is set when the teaching_mode_v1 relaunch switch is on. Tokens: ink #1F1B2D, muted #4A4458 / #6B6579, surface #F0ECF4, line #D9D4E2, accent #FF7A3D, success #1F7A55 / #E9F8F0 / #BFEBD6, warn #B4491C / #FFF1E6 / #FFD966. Type: Rubik 500/600/700. Radii: 16px controls, 24px cards, pills. */ html.relaunch { --rl-ink:#1F1B2D; --rl-muted:#4A4458; --rl-soft:#6B6579; --rl-surface:#F0ECF4; --rl-line:#D9D4E2; --rl-accent:#FF7A3D; --rl-ok:#1F7A55; --rl-ok-bg:#E9F8F0; --rl-ok-line:#BFEBD6; --rl-warn:#B4491C; --rl-warn-bg:#FFF1E6; --rl-warn-line:#FFD966; color-scheme: light; } /* Type */ html.relaunch, html.relaunch body, html.relaunch .font-sans, html.relaunch button, html.relaunch input, html.relaunch select, html.relaunch textarea { font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif !important; } html.relaunch body { background: #FFFFFF !important; color: var(--rl-ink); -webkit-font-smoothing: antialiased; } html.relaunch .font-serif-display { font-family: 'Rubik', system-ui, sans-serif !important; font-weight: 700; letter-spacing: -0.01em; font-style: normal; } html.relaunch h1, html.relaunch h2, html.relaunch h3 { color: var(--rl-ink); letter-spacing: -0.01em; } html.relaunch em { font-style: normal; } html.relaunch .font-extrabold, html.relaunch .font-black { font-weight: 700 !important; } /* Neutral text */ html.relaunch .text-slate-900, html.relaunch .text-slate-800, html.relaunch .text-gray-900, html.relaunch .text-gray-800 { color: var(--rl-ink) !important; } html.relaunch .text-slate-700, html.relaunch .text-slate-600, html.relaunch .text-gray-700, html.relaunch .text-gray-600 { color: var(--rl-muted) !important; } html.relaunch .text-slate-500, html.relaunch .text-slate-400, html.relaunch .text-gray-500, html.relaunch .text-gray-400 { color: var(--rl-soft) !important; } /* Neutral surfaces and lines */ html.relaunch .bg-slate-50, html.relaunch .bg-slate-100, html.relaunch .bg-gray-50, html.relaunch .bg-gray-100, html.relaunch [class*="bg-[#faf8f5]"], html.relaunch [class*="bg-[#FAF8F5]"] { background-color: var(--rl-surface) !important; } html.relaunch .border-slate-100, html.relaunch .border-slate-200, html.relaunch .border-gray-100, html.relaunch .border-gray-200 { border-color: var(--rl-surface) !important; } html.relaunch .border-slate-300, html.relaunch .border-gray-300 { border-color: var(--rl-line) !important; } html.relaunch .divide-slate-100 > * + *, html.relaunch .divide-slate-200 > * + * { border-color: var(--rl-surface) !important; } /* Brand accents (indigo / violet / purple) collapse to ink + lavender */ html.relaunch [class*="text-indigo-"], html.relaunch [class*="text-violet-"], html.relaunch [class*="text-purple-"] { color: var(--rl-ink) !important; } html.relaunch .bg-indigo-50, html.relaunch .bg-indigo-100, html.relaunch .bg-violet-50, html.relaunch .bg-violet-100, html.relaunch .bg-purple-50, html.relaunch .bg-purple-100 { background-color: var(--rl-surface) !important; } html.relaunch .bg-indigo-500, html.relaunch .bg-indigo-600, html.relaunch .bg-indigo-700, html.relaunch .bg-violet-500, html.relaunch .bg-violet-600, html.relaunch .bg-violet-700, html.relaunch .bg-purple-500, html.relaunch .bg-purple-600 { background-color: var(--rl-ink) !important; } html.relaunch [class*="border-indigo-1"], html.relaunch [class*="border-indigo-2"], html.relaunch [class*="border-indigo-3"], html.relaunch [class*="border-violet-1"], html.relaunch [class*="border-violet-2"], html.relaunch [class*="border-violet-3"] { border-color: var(--rl-line) !important; } html.relaunch [class*="border-indigo-4"], html.relaunch [class*="border-indigo-5"], html.relaunch [class*="border-indigo-6"], html.relaunch [class*="border-violet-4"], html.relaunch [class*="border-violet-5"], html.relaunch [class*="border-violet-6"] { border-color: var(--rl-ink) !important; } html.relaunch [class*="ring-indigo-"], html.relaunch [class*="ring-violet-"] { --tw-ring-color: var(--rl-accent) !important; } /* Success / warning families */ html.relaunch .text-emerald-500, html.relaunch .text-emerald-600, html.relaunch .text-emerald-700, html.relaunch .text-emerald-800, html.relaunch .text-green-600, html.relaunch .text-green-700 { color: var(--rl-ok) !important; } html.relaunch .bg-emerald-50, html.relaunch .bg-emerald-100, html.relaunch .bg-green-50 { background-color: var(--rl-ok-bg) !important; } html.relaunch .bg-emerald-500, html.relaunch .bg-emerald-600 { background-color: var(--rl-ok) !important; } html.relaunch .border-emerald-200, html.relaunch .border-emerald-300 { border-color: var(--rl-ok-line) !important; } html.relaunch .text-amber-600, html.relaunch .text-amber-700, html.relaunch .text-amber-800, html.relaunch .text-orange-600 { color: var(--rl-warn) !important; } html.relaunch .bg-amber-50, html.relaunch .bg-amber-100, html.relaunch .bg-orange-50 { background-color: var(--rl-warn-bg) !important; } html.relaunch .border-amber-200, html.relaunch .border-amber-300 { border-color: var(--rl-warn-line) !important; } /* Gradients: strong ones become flat ink, pale ones flat lavender */ html.relaunch [class*="from-indigo-5"], html.relaunch [class*="from-indigo-6"], html.relaunch [class*="from-violet-5"], html.relaunch [class*="from-violet-6"], html.relaunch [class*="from-emerald-5"], html.relaunch [class*="from-emerald-6"], html.relaunch [class*="from-purple-5"], html.relaunch [class*="from-purple-6"], html.relaunch [class*="from-slate-8"], html.relaunch [class*="from-slate-9"] { background-image: none !important; background-color: var(--rl-ink) !important; } html.relaunch [class*="from-indigo-50 "], html.relaunch [class*="from-violet-50 "], html.relaunch [class*="from-purple-50 "], html.relaunch [class*="from-emerald-50 "], html.relaunch [class*="from-amber-50 "], html.relaunch [class*="from-slate-50 "] { background-image: none !important; background-color: var(--rl-surface) !important; } /* Components: neo-brutalist cards and buttons become flat canvas components */ html.relaunch .nb-card { border: 2px solid var(--rl-surface) !important; box-shadow: none !important; border-radius: 24px !important; background-color: #FFFFFF; } html.relaunch .nb-card:hover { transform: none !important; box-shadow: none !important; } html.relaunch .nb-btn-primary { background: var(--rl-ink) !important; color: #FFFFFF !important; border: none !important; box-shadow: none !important; border-radius: 16px !important; min-height: 52px; font-weight: 600 !important; display: inline-flex; align-items: center; justify-content: center; } html.relaunch .nb-btn-primary:hover { transform: none !important; box-shadow: none !important; opacity: .92; } html.relaunch .nb-btn-outline { background: #FFFFFF !important; color: var(--rl-ink) !important; border: 2px solid var(--rl-line) !important; box-shadow: none !important; border-radius: 16px !important; min-height: 48px; font-weight: 600 !important; } html.relaunch .nb-btn-outline:hover { transform: none !important; box-shadow: none !important; background: var(--rl-surface) !important; } html.relaunch .nb-badge { border: none !important; border-radius: 999px !important; background: var(--rl-surface) !important; color: var(--rl-muted) !important; font-weight: 600 !important; box-shadow: none !important; } html.relaunch .border-slate-900, html.relaunch .border-slate-800 { border-color: var(--rl-surface) !important; } html.relaunch [class*="shadow-[2px_2px"], html.relaunch [class*="shadow-[3px_3px"], html.relaunch [class*="shadow-[4px_4px"] { box-shadow: none !important; } /* Radii */ html.relaunch .rounded-xl { border-radius: 16px !important; } html.relaunch .rounded-2xl, html.relaunch .rounded-3xl { border-radius: 24px !important; } /* Form controls */ html.relaunch input[type="email"], html.relaunch input[type="text"], html.relaunch input[type="date"], html.relaunch input[type="number"], html.relaunch input[type="password"], html.relaunch select, html.relaunch textarea { border: 2px solid var(--rl-surface) !important; border-radius: 16px !important; color: var(--rl-ink) !important; background-color: #FFFFFF !important; } html.relaunch input[type="email"], html.relaunch input[type="text"], html.relaunch input[type="date"], html.relaunch select { min-height: 52px; } html.relaunch input:focus, html.relaunch select:focus, html.relaunch textarea:focus, html.relaunch button:focus-visible, html.relaunch a:focus-visible { outline: 3px solid var(--rl-accent) !important; outline-offset: 2px; box-shadow: none !important; } /* ===== Layer 2: canvas components (exam page) ===== */ html.relaunch .rl-exam { padding: 8px 0 24px; } html.relaunch .rl-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; } html.relaunch .rl-hero-grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 8px; } html.relaunch .rl-hero-copy { display: flex; flex-direction: column; gap: 16px; } html.relaunch .rl-chips { display: flex; gap: 8px; flex-wrap: wrap; } html.relaunch .rl-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #F0ECF4; font-size: 13px; font-weight: 500; color: #1F1B2D; } html.relaunch .rl-h1 { margin: 0; font-size: 44px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; color: #1F1B2D; } html.relaunch .rl-lead { margin: 0; font-size: 17px; line-height: 1.5; color: #4A4458; } html.relaunch .rl-q1 { margin: 0 -8px; padding: 20px 16px 16px; border-radius: 24px; background: #BFEBD6; display: flex; flex-direction: column; gap: 14px; } html.relaunch .rl-q1-head { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #1F1B2D; } html.relaunch .rl-q1-prompt { margin: 0; font-size: 21px; line-height: 1.3; font-weight: 700; color: #1F1B2D; } html.relaunch .rl-q1-options { display: flex; flex-direction: column; gap: 8px; } html.relaunch .rl-q1-options button { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 14px 16px !important; border: 2px solid transparent !important; border-radius: 16px !important; background: #FFFFFF !important; color: #1F1B2D !important; font-size: 16px; font-weight: 500; line-height: 1.35; text-align: left; box-shadow: none !important; } html.relaunch .rl-q1-options button:hover { border-color: #1F1B2D !important; } html.relaunch .rl-q1-options button[class*="border-blue"], html.relaunch .rl-q1-options button[class*="border-indigo"], html.relaunch .rl-q1-options button[aria-pressed="true"] { border-color: #1F1B2D !important; } html.relaunch .rl-q1-note { margin: 0; font-size: 13px; font-weight: 500; text-align: center; color: #1F1B2D; } html.relaunch .rl-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border: none; border-radius: 16px; background: #1F1B2D; color: #FFFFFF !important; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; } html.relaunch .rl-btn:disabled { opacity: .45; cursor: default; } html.relaunch .rl-btn-light { background: #FFFFFF; color: #1F1B2D !important; } html.relaunch .rl-section { padding-top: 48px; display: flex; flex-direction: column; gap: 16px; } html.relaunch .rl-h2 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 700; color: #1F1B2D; } html.relaunch .rl-on-ink { color: #FFFFFF !important; } html.relaunch .rl-muted { margin: 0; font-size: 15px; line-height: 1.45; color: #4A4458; } html.relaunch .rl-steps { display: flex; flex-direction: column; gap: 8px; } html.relaunch .rl-step { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 24px; } html.relaunch .rl-step > div { display: flex; flex-direction: column; gap: 2px; } html.relaunch .rl-mint { background: #BFEBD6; } html.relaunch .rl-yellow { background: #FFD966; } html.relaunch .rl-step-n { width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px; background: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; } html.relaunch .rl-step-t { font-size: 17px; font-weight: 600; color: #1F1B2D; } html.relaunch .rl-step-d { font-size: 15px; line-height: 1.4; color: #1F1B2D; } html.relaunch .rl-bars { display: flex; flex-direction: column; gap: 12px; } html.relaunch .rl-bar { display: flex; flex-direction: column; gap: 6px; } html.relaunch .rl-bar-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 500; color: #1F1B2D; } html.relaunch .rl-bar-row strong { font-weight: 600; } html.relaunch .rl-bar-track { height: 10px; border-radius: 5px; background: #F0ECF4; } html.relaunch .rl-bar-fill { height: 10px; border-radius: 5px; background: #1F1B2D; } html.relaunch .rl-plan { border-radius: 32px; background: #1F1B2D; color: #FFFFFF; padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; } html.relaunch .rl-plan-kicker { font-size: 13px; font-weight: 500; letter-spacing: .04em; color: #D9D4E2; } html.relaunch .rl-plan-list { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.4; } html.relaunch .rl-plan-list > div { display: flex; gap: 12px; align-items: flex-start; } html.relaunch .rl-dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 4px; background: #FFD966; flex-shrink: 0; } html.relaunch .rl-plan-price { display: flex; align-items: baseline; gap: 10px; } html.relaunch .rl-plan-price strong { font-size: 32px; font-weight: 700; } html.relaunch .rl-plan-price span { font-size: 15px; color: #D9D4E2; } @media (min-width: 1024px) { html.relaunch .rl-exam { padding-top: 32px; } html.relaunch .rl-hero-grid { grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; } html.relaunch .rl-h1 { font-size: 64px; } html.relaunch .rl-lead { font-size: 19px; max-width: 520px; } html.relaunch .rl-q1 { margin: 0; padding: 28px 24px 24px; } html.relaunch .rl-steps { flex-direction: row; } html.relaunch .rl-step { flex: 1; align-items: flex-start; padding: 20px; } html.relaunch .rl-plan { padding: 40px; } } /* ===== Layer 2b: animated readiness hero + page fixes ===== */ html.relaunch body, html.relaunch main, html.relaunch body > div.min-h-screen, html.relaunch [class*="bg-[#faf8f5]"], html.relaunch [class*="bg-[#FAF8F5]"] { background-color: #FFFFFF !important; } html.relaunch .rl-hero-grid { grid-template-areas: "copy" "viz" "cta"; } html.relaunch .rl-hero-copy { grid-area: copy; } html.relaunch .rl-viz-wrap { grid-area: viz; } html.relaunch .rl-hero-cta { grid-area: cta; } html.relaunch .rl-hero-cta { display: flex; flex-direction: column; gap: 12px; } html.relaunch .rl-cta-note { margin: 0; font-size: 13px; font-weight: 500; color: #4A4458; } html.relaunch .rl-viz-wrap { position: relative; padding: 18px 10px 22px; } html.relaunch .rl-tile { position: absolute; border-radius: 28px; z-index: 0; } html.relaunch .rl-tile-mint { width: 132px; height: 132px; background: #BFEBD6; top: 0; left: 0; transform: rotate(-9deg); } html.relaunch .rl-tile-yellow { width: 96px; height: 96px; background: #FFD966; bottom: 0; right: 0; transform: rotate(11deg); border-radius: 24px; } html.relaunch .rl-viz { position: relative; z-index: 1; background: #F0ECF4; border-radius: 24px; padding: 20px; display: flex; flex-direction: column; gap: 14px; } html.relaunch .rl-viz-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: #4A4458; } html.relaunch .rl-viz-row { display: flex; justify-content: space-between; align-items: center; } html.relaunch .rl-viz-score { display: flex; flex-direction: column; gap: 2px; } html.relaunch .rl-viz-cap { font-size: 15px; font-weight: 500; color: #1F1B2D; } html.relaunch .rl-viz-num { font-size: 52px; line-height: 1; font-weight: 700; color: #1F1B2D; } html.relaunch .rl-stack { display: inline-grid; } html.relaunch .rl-stack > * { grid-area: 1 / 1; } html.relaunch .rl-viz-chips { justify-items: end; } html.relaunch .rl-vchip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 15px; font-weight: 600; } html.relaunch .rl-vchip-1 { background: #FFFFFF; color: #B4491C; } html.relaunch .rl-vchip-2 { background: #FFD966; color: #1F1B2D; } html.relaunch .rl-vchip-3 { background: #1F7A55; color: #FFFFFF; } html.relaunch .rl-viz-track { position: relative; height: 40px; } html.relaunch .rl-viz-track::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 12px; border-radius: 6px; background: #FFFFFF; } html.relaunch .rl-viz-fill { position: absolute; left: 0; top: 14px; height: 12px; border-radius: 6px; width: 84%; background: #1F7A55; } html.relaunch .rl-viz-line { position: absolute; left: 70%; top: 4px; width: 3px; height: 32px; margin-left: -1px; border-radius: 2px; background: #1F1B2D; } html.relaunch .rl-viz-linecap { position: relative; height: 18px; margin-top: -10px; font-size: 13px; font-weight: 500; color: #1F1B2D; } html.relaunch .rl-viz-linecap span { position: absolute; left: 70%; transform: translateX(-50%); white-space: nowrap; } html.relaunch .rl-viz-secs { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border-radius: 16px; padding: 14px; } html.relaunch .rl-viz-sec { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; color: #1F1B2D; } html.relaunch .rl-viz-sec-track { height: 8px; border-radius: 4px; background: #F0ECF4; } html.relaunch .rl-viz-sec-fill { height: 8px; border-radius: 4px; background: #1F1B2D; width: 80%; } html.relaunch .rl-viz-lesson { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; background: #FFFFFF; font-size: 13px; font-weight: 600; color: #1F1B2D; } html.relaunch .rl-dot-mint { background: #1F7A55; margin-top: 0; width: 10px; height: 10px; } @media (prefers-reduced-motion: no-preference) { html.relaunch .rl-s1 { animation: rlS1 9s infinite; } html.relaunch .rl-s2 { animation: rlS2 9s infinite; } html.relaunch .rl-s3 { animation: rlS3 9s infinite; } html.relaunch .rl-viz-fill { animation: rlFill 9s infinite; } html.relaunch .rl-sec-1 { animation: rlSec1 9s infinite; } html.relaunch .rl-sec-2 { animation: rlSec2 9s infinite; } html.relaunch .rl-sec-3 { animation: rlSec3 9s infinite; } html.relaunch .rl-viz-lesson { animation: rlLesson 9s infinite; } } @media (prefers-reduced-motion: reduce) { html.relaunch .rl-s1, html.relaunch .rl-s2 { visibility: hidden; } } @keyframes rlS1 { 0%, 29% { opacity: 1; } 33%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes rlS2 { 0%, 29% { opacity: 0; } 33%, 62% { opacity: 1; } 66%, 100% { opacity: 0; } } @keyframes rlS3 { 0%, 62% { opacity: 0; } 66%, 96% { opacity: 1; } 100% { opacity: 0; } } @keyframes rlFill { 0% { width: 4%; background: #FF7A3D; } 12%, 29% { width: 48%; background: #FF7A3D; } 36%, 62% { width: 66%; background: #FFD966; } 69%, 96% { width: 84%; background: #1F7A55; } 100% { width: 4%; background: #FF7A3D; } } @keyframes rlSec1 { 0% { width: 5%; } 12%, 29% { width: 38%; } 36%, 62% { width: 62%; } 69%, 96% { width: 86%; } 100% { width: 5%; } } @keyframes rlSec2 { 0% { width: 5%; } 12%, 29% { width: 56%; } 36%, 62% { width: 70%; } 69%, 96% { width: 82%; } 100% { width: 5%; } } @keyframes rlSec3 { 0% { width: 5%; } 12%, 29% { width: 24%; } 36%, 62% { width: 48%; } 69%, 96% { width: 78%; } 100% { width: 5%; } } @keyframes rlLesson { 0%, 14% { opacity: 0; transform: translateY(6px); } 20%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } } @media (min-width: 1024px) { html.relaunch .rl-hero-grid { grid-template-areas: "copy viz" "cta viz"; grid-template-rows: auto 1fr; row-gap: 32px; align-items: start; } html.relaunch .rl-hero-copy { align-self: end; } html.relaunch .rl-hero-cta { align-items: flex-start; } html.relaunch .rl-hero-cta .rl-btn { width: auto; padding: 0 32px; } html.relaunch .rl-viz-wrap { padding: 28px 24px 32px; } html.relaunch .rl-viz { padding: 28px; gap: 18px; } html.relaunch .rl-tile-mint { width: 180px; height: 180px; } html.relaunch .rl-tile-yellow { width: 130px; height: 130px; } html.relaunch .rl-viz-num { font-size: 64px; } } /* Layer 2c: CTA above the fold on phones; page body white */ html.relaunch body.bg-slate-50, html.relaunch body.bg-slate-100, html.relaunch body[class*="bg-"] { background-color: #FFFFFF !important; } html.relaunch .rl-hero-grid { grid-template-areas: "copy" "cta" "viz"; } @media (min-width: 1024px) { html.relaunch .rl-hero-grid { grid-template-areas: "copy viz" "cta viz"; } } /* Layer 2d: plain eyebrow instead of pills; tighter hero */ html.relaunch .rl-eyebrow { margin: 0; font-size: 15px; font-weight: 600; color: #4A4458; } html.relaunch .rl-viz-wrap { padding: 0; } html.relaunch .rl-cta-note { text-align: center; } @media (min-width: 1024px) { html.relaunch .rl-cta-note { text-align: left; } } /* Layer 2e: exam page ends after What is on the exam; legacy sections hidden under the relaunch */ /* legacy sections: selling blocks hidden by js/relaunch-exam-trim.js; SEO content kept */ html.relaunch main > :not([data-teaching-q1-hero]) { max-width: 1120px; margin-left: auto; margin-right: auto; } html.relaunch .rl-exam { padding-bottom: 64px; } /* ===== Pass 3 (Impeccable craft floor + detector findings) ===== */ /* Motion: animate transform, not width */ html.relaunch .rl-viz-fill, html.relaunch .rl-viz-sec-fill { width: 100% !important; transform-origin: left center; will-change: transform; } html.relaunch .rl-viz-fill { transform: scaleX(.84); } html.relaunch .rl-viz-sec-fill { transform: scaleX(.8); } @keyframes rlFill { 0% { transform: scaleX(.04); background: #FF7A3D; } 12%, 29% { transform: scaleX(.48); background: #FF7A3D; } 36%, 62% { transform: scaleX(.66); background: #FFD966; } 69%, 96% { transform: scaleX(.84); background: #1F7A55; } 100% { transform: scaleX(.04); background: #FF7A3D; } } @keyframes rlSec1 { 0% { transform: scaleX(.05); } 12%, 29% { transform: scaleX(.38); } 36%, 62% { transform: scaleX(.62); } 69%, 96% { transform: scaleX(.86); } 100% { transform: scaleX(.05); } } @keyframes rlSec2 { 0% { transform: scaleX(.05); } 12%, 29% { transform: scaleX(.56); } 36%, 62% { transform: scaleX(.7); } 69%, 96% { transform: scaleX(.82); } 100% { transform: scaleX(.05); } } @keyframes rlSec3 { 0% { transform: scaleX(.05); } 12%, 29% { transform: scaleX(.24); } 36%, 62% { transform: scaleX(.48); } 69%, 96% { transform: scaleX(.78); } 100% { transform: scaleX(.05); } } html.relaunch .rl-viz-track, html.relaunch .rl-viz-sec-track { overflow: hidden; } html.relaunch .rl-viz-track { overflow: visible; } html.relaunch .rl-viz-track .rl-viz-fill { border-radius: 6px; } /* Off-palette legacy colors -> palette with AA contrast */ html.relaunch [class*="bg-cyan-"], html.relaunch [class*="bg-sky-5"], html.relaunch [class*="bg-sky-6"], html.relaunch [class*="bg-teal-5"], html.relaunch [class*="bg-teal-6"] { background-color: #1F1B2D !important; } html.relaunch [class*="bg-cyan-5"][class*="0"]:not([class*="-500"]):not([class*="-600"]):not([class*="-700"]) { background-color: #F0ECF4 !important; } html.relaunch [class*="text-cyan-"], html.relaunch [class*="text-sky-"], html.relaunch [class*="text-teal-"] { color: #1F1B2D !important; } html.relaunch [class*="border-cyan-"], html.relaunch [class*="border-sky-"], html.relaunch [class*="border-teal-"] { border-color: #D9D4E2 !important; } html.relaunch .text-amber-400, html.relaunch .text-amber-500, html.relaunch .text-yellow-500, html.relaunch .text-orange-500 { color: #B4491C !important; } html.relaunch .text-red-600, html.relaunch .text-red-500, html.relaunch .text-rose-600 { color: #B42318 !important; } html.relaunch .text-slate-300, html.relaunch .text-gray-300 { color: #6B6579 !important; } html.relaunch .bg-slate-900 .text-slate-400, html.relaunch .bg-slate-900 .text-slate-500, html.relaunch .bg-slate-900 .text-slate-300, html.relaunch .bg-slate-900 [class*="text-slate-"] { color: #D9D4E2 !important; } html.relaunch .bg-slate-900 a, html.relaunch footer.bg-slate-900 a { color: #FFFFFF !important; } /* Browser surfaces from the palette */ html.relaunch ::selection { background: #FFD966; color: #1F1B2D; } html.relaunch { caret-color: #1F1B2D; accent-color: #1F1B2D; scrollbar-color: #D9D4E2 transparent; } html.relaunch a { text-underline-offset: 3px; text-decoration-thickness: 1.5px; } html.relaunch .tabular-nums, html.relaunch .rl-viz-num, html.relaunch .rl-bar-row strong { font-variant-numeric: tabular-nums; } /* ===== Pass 4: typographic how-it-works; lean readiness card ===== */ html.relaunch .rl-flow { list-style: none; margin: 0; padding: 0; counter-reset: rlflow; border-top: 2px solid #F0ECF4; } html.relaunch .rl-flow li { counter-increment: rlflow; display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 4px; padding: 20px 0; border-bottom: 2px solid #F0ECF4; } html.relaunch .rl-flow li::before { content: counter(rlflow); grid-row: 1 / span 2; font-size: 15px; font-weight: 600; line-height: 1.6; color: #6B6579; font-variant-numeric: tabular-nums; } html.relaunch .rl-flow-t { font-size: 20px; line-height: 1.3; font-weight: 700; color: #1F1B2D; } html.relaunch .rl-flow-d { font-size: 16px; line-height: 1.5; color: #4A4458; max-width: 60ch; } @media (min-width: 1024px) { html.relaunch .rl-flow li { grid-template-columns: 40px minmax(240px, 1fr) 1.4fr; column-gap: 24px; align-items: baseline; padding: 24px 0; } html.relaunch .rl-flow li::before { grid-row: auto; } html.relaunch .rl-flow-t { font-size: 24px; } } html.relaunch .rl-viz { gap: 10px; } html.relaunch .rl-viz-num { font-size: 72px; letter-spacing: -0.03em; } @media (min-width: 1024px) { html.relaunch .rl-viz-num { font-size: 96px; } html.relaunch .rl-viz { padding: 32px; } } /* Footer: ink surface, readable secondary text */ html.relaunch footer.bg-slate-900, html.relaunch footer[class*="bg-[#0f172a]"], html.relaunch footer[class*="bg-slate-950"] { background-color: #1F1B2D !important; } html.relaunch footer.bg-slate-900 p, html.relaunch footer.bg-slate-900 span, html.relaunch footer.bg-slate-900 li { color: #D9D4E2 !important; } /* ===== Career photos (canvas EsExam / V4Home) ===== */ html.relaunch .rl-hero-grid { grid-template-areas: "photo" "copy" "cta" "viz"; } html.relaunch .rl-hero-grid:not(:has(.rl-photo)) { grid-template-areas: "copy" "cta" "viz"; } html.relaunch .rl-photo { grid-area: photo; margin: 0; padding: 10px; border-radius: 28px; background: #FFF1E6; } html.relaunch .rl-photo img { display: block; width: 100%; height: 220px; object-fit: cover; border-radius: 20px; } @media (min-width: 1024px) { html.relaunch .rl-hero-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr; grid-template-areas: "copy media" "cta media"; column-gap: 64px; } html.relaunch .rl-hero-grid:not(:has(.rl-photo)) { grid-template-areas: "copy viz" "cta viz"; } html.relaunch .rl-photo { grid-area: media; align-self: start; padding: 12px; border-radius: 36px; margin-bottom: 72px; } html.relaunch .rl-photo img { height: 540px; border-radius: 26px; } html.relaunch .rl-hero-grid:has(.rl-photo) .rl-viz-wrap { grid-area: media; align-self: end; justify-self: start; position: relative; z-index: 2; width: min(400px, 78%); margin-left: -56px; } html.relaunch .rl-hero-grid:has(.rl-photo) .rl-viz { box-shadow: 0 16px 40px rgba(31, 27, 45, .14); } html.relaunch .rl-hero-grid:has(.rl-photo) .rl-viz-num { font-size: 72px; } }