/* PrepEng — shared design system + every logged-out page (landing, SEO, pricing, auth). Loaded by ALL pages. Signed-in app pages load app-in.css on top of this. Split out of the old single app.css on 2026-07-22: 72% of that file was signed-in-only UI that still blocked first paint on the ad landing page. Keep marketing-visible rules here, app-only rules there. */ /* Outfit, self-hosted (OFL-1.1). Was fonts.googleapis.com: that put two extra origins (DNS + TLS + a render-blocking CSS round trip) in front of first paint. Same file, served from our own already-open connection. The latin subset is preloaded from every page's ; latin-ext is fetched only if the text needs it (Turkish, accented names). */ @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/outfit-latin.woff2?v=1) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Outfit'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/outfit-latin-ext.woff2?v=1) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* PrepEng — shared design system. One stylesheet, no build step. */ :root { --bg: #ffffff; --surface: #ffffff; --surface-2: #f8f9fa; --border: #e5e7eb; --text: #111827; --text-dim: #4b5563; --text-faint: #9ca3af; --primary: #2563eb; --primary-dark: #1d4ed8; --primary-soft: #eff6ff; --primary-glow: rgba(37, 99, 235, 0.25); --accent: #3b82f6; --toefl: #2563eb; --success: #059669; --success-soft: #d1fae5; --warn: #d97706; --warn-soft: #fef3c7; --danger: #dc2626; --radius: 12px; --radius-sm: 8px; --shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.02); --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02); --font: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --maxw: 1080px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.2; margin: 0 0 0.4em; letter-spacing: -0.01em; } h1 { font-size: 2rem; } h2 { font-size: 1.35rem; } h3 { font-size: 1.05rem; } p { margin: 0 0 1em; } .muted { color: var(--text-dim); } /* A placeholder worth showing only if the wait is real: a normal load replaces this node well inside the delay, so it never paints and there is no flash of "Loading…" between the tap and the first screen. */ .deferred-loading { opacity: 0; animation: deferred-loading-in 0.15s ease 0.6s forwards; } @keyframes deferred-loading-in { to { opacity: 1; } } .faint { color: var(--text-faint); } .center { text-align: center; } /* Layout ------------------------------------------------------------ */ .container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .stack > * + * { margin-top: 16px; } .grid { display: grid; gap: 16px; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .row { display: flex; gap: 12px; align-items: center; } .row.wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .grow { flex: 1; } /* Header ------------------------------------------------------------ */ .site-header { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; } .site-header .container { display: flex; align-items: center; justify-content: space-between; height: 60px; } .brand { font-weight: 700; font-size: 1.15rem; color: var(--text); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; } .brand:hover { text-decoration: none; } .brand .dot { color: var(--primary); } .brand-logo { display: block; width: 34px; height: 34px; border-radius: 9px; flex: none; } .brand-word { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); } .brand-word b { font-weight: 700; color: var(--primary); } .nav { display: flex; align-items: center; gap: 4px; } .nav a { color: var(--text-dim); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.95rem; font-weight: 500; } .nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav a.active { color: var(--primary); background: var(--primary-soft); } /* App shell (sidebar layout) ---------------------------------------- */ [x-cloak] { display: none !important; } .app-layout { display: flex; min-height: 100vh; align-items: stretch; } .app-sidebar { flex: none; width: 248px; border-right: 1px solid var(--border); background: var(--surface); padding: 20px 16px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 0; height: 100vh; z-index: 30; } .app-sidebar .brand { padding: 6px 8px 14px; font-size: 1.25rem; } .app-nav { display: flex; flex-direction: column; gap: 4px; } .app-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size: 0.95rem; font-weight: 500; } .app-nav a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .app-nav a.active { background: var(--primary-soft); color: var(--primary); } .app-nav a svg { width: 19px; height: 19px; flex: none; } .app-sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); } .app-user { font-size: 0.85rem; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .app-content { flex: 1; width: 100%; max-width: 1280px; margin: 0; padding: 32px 32px 56px; } .app-content > .stack > * + * { margin-top: 16px; } /* Mobile top bar + off-canvas sidebar */ .app-topbar { display: none; } .app-burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-dim); cursor: pointer; } .app-burger svg { width: 20px; height: 20px; } .app-backdrop { display: none; } @media (max-width: 860px) { .app-topbar { display: flex; align-items: center; gap: 14px; position: sticky; top: 0; z-index: 25; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .app-sidebar { position: fixed; top: 0; left: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--shadow-lg); } .app-layout.open .app-sidebar { transform: none; } .app-layout.open .app-backdrop { display: block; position: fixed; inset: 0; z-index: 20; background: rgba(17, 24, 39, 0.45); } /* Bottom tab bar replaces the hamburger/drawer on phones. */ .app-burger { display: none; } .app-content { padding: 20px 16px calc(76px + env(safe-area-inset-bottom)); } } /* Mobile bottom tab navigator (hidden on desktop). Rendered into by dxui.js renderBottomNav(); fixed to the bottom, safe-area aware. */ .pe-bottomnav { display: none; } @media (max-width: 860px) { .pe-bottomnav { display: flex; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 6px 6px calc(4px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--border); } .pe-tab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 5px 2px; color: var(--text-faint); font-size: 0.66rem; font-weight: 600; line-height: 1; text-decoration: none; -webkit-tap-highlight-color: transparent; } .pe-tab:hover, .pe-tab:focus { text-decoration: none; } .pe-tab-ico { display: inline-flex; } .pe-tab-ico svg { width: 24px; height: 24px; } .pe-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .pe-tab.active { color: var(--primary); } /* Full-screen onboarding / results takeovers hide the chrome — hide the tab bar too. */ .app-layout.calibration-mode ~ .pe-bottomnav, .calibration-results-building .pe-bottomnav, .calibration-results-paywall .pe-bottomnav { display: none; } } /* Dashboard panels -------------------------------------------------- */ .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .panel-head h2 { margin: 0; font-size: 1.1rem; } .dash-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dash-hero h1 { margin: 0 0 2px; } .upgrade-panel { border-color: var(--warn); background: var(--warn-soft); } .skill-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .skill-tab { font-family: inherit; font-size: 0.85rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text-dim); transition: border-color 0.12s, background 0.12s, color 0.12s; } .skill-tab:hover { border-color: var(--primary); color: var(--primary); } .skill-tab.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); } /* Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 0.95rem; font-weight: 600; padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s; text-decoration: none; white-space: nowrap; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--primary); color: #fff !important; border: none; min-height: 44px; box-shadow: 0 2px 8px var(--primary-glow); } .btn-primary:hover { background: var(--primary-dark); } .btn-ghost { background: transparent; color: var(--text-dim); border-color: var(--border); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-block { width: 100%; } .btn-sm { padding: 6px 12px; font-size: 0.85rem; } .btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* Cards ------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .card-pad-lg { padding: 28px; } /* Badges ------------------------------------------------------------ */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-dim); } .badge-paid { background: var(--success-soft); color: var(--success); } .badge-free { background: var(--warn-soft); color: var(--warn); } .badge-toefl { background: #e8f0fe; color: var(--toefl); } /* Forms ------------------------------------------------------------- */ label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 6px; } input[type="email"], input[type="password"], input[type="text"], textarea, select { width: 100%; font-family: inherit; font-size: 1rem; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .field + .field { margin-top: 16px; } /* Destructive action button (delete account) */ .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn-danger:hover { filter: brightness(1.05); color: #fff; } /* Danger Zone settings card gets a red-tinted border to set it apart */ .set-card.set-danger { border-color: #f5c6c2; } /* Auth card --------------------------------------------------------- */ .auth-wrap { min-height: calc(100vh - 60px); display: flex; align-items: center; justify-content: center; padding: 40px 20px; } .auth-card { width: 100%; max-width: 400px; } /* Split auth layout (brand panel + form) ---------------------------- */ .auth-split { min-height: 100vh; display: flex; } .auth-split-card { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); overflow: hidden; } /* Left brand panel */ .auth-aside { position: relative; padding: 48px 46px; color: #fff; background: linear-gradient(160deg, var(--primary) 0%, #1e3a8a 100%); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .auth-aside-content { position: relative; z-index: 1; width: 100%; max-width: 420px; } .auth-brand { display: inline-flex; align-items: center; gap: 9px; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 26px; } .auth-brand svg { width: 28px; height: 28px; } .auth-brand strong { font-weight: 800; } .auth-aside h2 { font-size: 2.1rem; font-weight: 800; margin: 18px 0 12px; letter-spacing: -0.025em; color: #fff; line-height: 1.12; } .auth-accent { color: #bfdbfe; } .auth-aside > .auth-aside-content > p { color: rgba(255, 255, 255, 0.82); margin: 0; font-size: 0.97rem; max-width: 34ch; } .auth-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); font-size: 0.78rem; font-weight: 600; } .auth-badge-dots { display: inline-flex; } .auth-badge-dots i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } .auth-badge-dots i:nth-child(1) { background: #fbbf24; } .auth-badge-dots i:nth-child(2) { background: #f472b6; margin-left: -3px; } .auth-badge-dots i:nth-child(3) { background: #60a5fa; margin-left: -3px; } .auth-badge-dots i:nth-child(4) { background: #34d399; margin-left: -3px; } .auth-features { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; } .auth-features li { display: flex; gap: 14px; align-items: flex-start; } .auth-feat-icon { flex: none; width: 40px; height: 40px; border-radius: 11px; background: rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; color: #fff; } .auth-feat-icon svg { width: 20px; height: 20px; display: block; } .auth-features div strong { display: block; font-weight: 700; font-size: 0.97rem; } .auth-features div span { display: block; color: rgba(255, 255, 255, 0.78); font-size: 0.86rem; line-height: 1.45; } .auth-trust { margin-top: 30px; padding: 18px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); } .auth-trust-main { display: flex; align-items: center; gap: 12px; } .auth-avatars { display: inline-flex; } .auth-avatars i { width: 36px; height: 36px; border-radius: 50%; background: var(--c, #60a5fa); border: 2px solid #2c4ea8; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; font-style: normal; color: #fff; margin-left: -10px; } .auth-avatars i:first-child { margin-left: 0; } .auth-trust-text strong { display: block; color: #bfdbfe; font-weight: 700; } .auth-trust-text span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); } .auth-trust-meta { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.82rem; color: rgba(255, 255, 255, 0.85); } .auth-stars { color: #fbbf24; white-space: nowrap; } .auth-stars b { color: #fff; font-weight: 700; } .auth-trust-meta > span:last-child { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.15); } .auth-aside .blob { position: absolute; border-radius: 50%; background: #fff; opacity: 0.12; z-index: 0; } /* Right form panel */ .auth-panel { position: relative; min-width: 0; max-width: 100%; padding: 48px 48px; display: flex; flex-direction: column; justify-content: center; } .auth-panel-inner { width: 100%; min-width: 0; max-width: 400px; margin: 0 auto; } .auth-panel-inner form, .auth-panel-inner .field, .auth-panel-inner .input-wrap { min-width: 0; max-width: 100%; } .auth-panel h1 { font-size: 1.7rem; margin-bottom: 6px; text-align: center; } .auth-sub { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 26px; text-align: center; } .auth-sub a { font-weight: 600; } .field-head { display: flex; align-items: center; justify-content: space-between; } .field-head .forgot-link { margin-top: 0; } /* Input with leading icon + optional trailing toggle */ .input-wrap { position: relative; display: flex; align-items: center; } .input-wrap .input-icon { position: absolute; left: 14px; width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; } .input-wrap input { padding-left: 42px; } .input-wrap input[type="password"], .input-wrap input.has-toggle { padding-right: 48px; } .input-toggle { position: absolute; top: 50%; right: 0; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--text-faint); transform: translateY(-50%); } .input-toggle:hover { color: var(--text-dim); } .input-toggle svg { width: 19px; height: 19px; } .auth-remember { display: flex; align-items: center; gap: 9px; margin: -4px 0 18px; font-size: 0.9rem; color: var(--text-dim); cursor: pointer; } .auth-remember input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; } .auth-or { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 0.85rem; margin: 22px 0 16px; } .auth-or span { flex: 1; height: 1px; background: var(--border); } /* Google Identity renders its iframe 20px wider than the width we request and draws the button inset 10px inside it. Squeezing the iframe back to the mount width sheared off the button's right border, so let it keep its natural size and centre it: the painted button then lands flush with the 400px fields. renderButton() already clamps the request to the mount width, so the 10px spill never causes a scrollbar. */ .google-btn-mount { display: flex; justify-content: center; width: 100%; max-width: 100%; min-height: 0; } .google-btn-mount > div { flex: none; } .google-btn-mount iframe { flex: none; } .auth-panel .cf-turnstile { width: 100%; max-width: 100%; } .auth-panel .cf-turnstile iframe { max-width: 100%; } .auth-switch { text-align: center; font-size: 0.92rem; margin: 22px 0 0; color: var(--text-dim); } .auth-switch a { font-weight: 700; } .auth-secure { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 18px 0 0; font-size: 0.82rem; color: var(--text-faint); } .auth-secure svg { width: 15px; height: 15px; } .auth-footer-links { display: flex; justify-content: center; gap: 18px; margin-top: 22px; font-size: 0.85rem; font-weight: 600; } .auth-footer-links a { color: var(--text-faint); } .auth-footer-links a:hover { color: var(--primary); text-decoration: none; } /* Unified login / account creation ----------------------------------- */ .login-page { min-height: 100%; overflow-x: hidden; background: #fff; } .login-shell { min-height: 100vh; min-height: 100svh; display: flex; justify-content: center; padding: 32px 20px 44px; background: #fff; } .login-card { width: min(100%, 400px); color: #0a1535; text-align: center; display: flex; flex-direction: column; } .login-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } .login-heading h1 { margin: 0; color: #07122e; font-size: clamp(2.15rem, 5vw, 2.75rem); line-height: 1.08; letter-spacing: -0.052em; } .login-heading p { margin: 13px 0 36px; color: #59647d; font-size: 1.16rem; line-height: 1.4; } .login-card > .alert { margin: 0 0 16px; text-align: left; } .login-google { min-height: 40px; } .login-divider { margin: 31px 0 28px; color: #59647d; font-size: 0.96rem; white-space: nowrap; } .login-divider span { background: #cfd5e2; } .login-card form { text-align: left; } .login-card form .field + .field { margin-top: 25px; } .login-card form label { margin-bottom: 10px; color: #07122e; font-size: 1rem; font-weight: 700; } .login-card .input-wrap .input-icon { left: 17px; width: 22px; height: 22px; color: #667089; } .login-card .input-wrap input { min-height: 64px; padding: 14px 50px; border: 1.5px solid #ccd3e0; border-radius: 12px; color: #0a1535; font-size: 1.05rem; box-shadow: none; } .login-card .input-wrap input::placeholder { color: #727c94; opacity: 1; } .login-card .input-wrap input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11); } .login-card .input-toggle { right: 7px; width: 48px; height: 48px; color: #667089; } .login-card .input-toggle svg { width: 23px; height: 23px; } .login-field-head { margin-bottom: 10px; } .login-card form .login-field-head label { margin-bottom: 0; } .login-forgot { margin: 0; color: #2563eb; font-size: 0.85rem; font-weight: 600; } .login-turnstile { width: 100%; margin-top: 18px; } .login-continue { min-height: 62px; margin-top: 24px; border: 0; border-radius: 12px; background: linear-gradient(110deg, #0757f8 0%, #1954ef 100%); box-shadow: 0 10px 24px rgba(24, 84, 239, 0.18); font-size: 1.18rem; } .login-continue:hover { filter: brightness(1.04); } .login-legal { margin: 45px 0 0; color: #59647d; font-size: 0.86rem; line-height: 1.55; } .login-legal a { color: #0757f8; } .login-private { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 0; color: #59647d; font-size: 0.9rem; } .login-private svg { width: 27px; height: 27px; flex: none; color: #59647d; } .login-footer { display: flex; justify-content: center; gap: 54px; margin-top: 38px; } .login-footer a { color: #4d5872; font-size: 0.9rem; font-weight: 650; text-decoration: none; } .login-footer a:hover { color: #0757f8; } @media (max-width: 480px) { .login-shell { padding: 46px 20px 34px; } .login-heading h1 { font-size: 2.08rem; } .login-heading p { margin: 11px 0 31px; font-size: 1.02rem; } .login-divider { margin: 27px 0 25px; } .login-legal { margin-top: 39px; } .login-footer { gap: 42px; margin-top: 34px; } } @media (max-width: 350px) { .login-shell { padding-left: 15px; padding-right: 15px; } .login-heading h1 { font-size: 1.88rem; } .login-divider { font-size: 0.86rem; } .login-footer { gap: 32px; } } /* Desktop login = the same two-column brand/form split as /signup. The unified auth card lives in the right column; .auth-aside hides itself at <=860px, so phones keep the single-screen card below. */ @media (min-width: 861px) { .login-page .auth-panel.login-shell { min-height: 0; padding: 40px 48px; background: transparent; } /* Card fills the column so .login-body centres the form and .login-footer stays pinned to the bottom of the page, as it is on phones. */ .login-page .login-card { flex: 1 1 auto; width: 100%; max-width: 400px; margin: 0 auto; } .login-page .login-heading h1 { font-size: 2.1rem; } .login-page .login-heading p { margin: 10px 0 26px; font-size: 1.02rem; } .login-page .login-divider { margin: 22px 0 20px; } .login-page .login-card .input-wrap input { min-height: 54px; } .login-page .login-continue { min-height: 54px; margin-top: 20px; font-size: 1.06rem; } .login-page .login-legal { margin-top: 26px; } .login-page .login-private { margin-top: 16px; } .login-page .login-footer { gap: 34px; margin-top: 26px; } } /* On a phone the unified login is a single-screen gate: lock it to the visual viewport so browser bounce, page panning and double-tap zoom cannot move the whole UI. Desktop keeps the normal document flow and can scroll — a fixed, overflow-hidden page would clip the CTA in a short browser window. */ @media (max-width: 640px) { .login-page { position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; } .login-page .login-shell { width: 100%; height: 100%; min-height: 0; max-height: 100%; overflow: hidden; padding-top: max(32px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); } .login-page .login-card { height: 100%; min-height: 0; max-height: 100%; overflow: hidden; } .login-page .login-body { min-height: 0; } } /* Preserve every login action on short phones without introducing an inner scroller. Normal-height screens retain the roomier layout above. */ @media (max-width: 640px) and (max-height: 800px) { .login-page .login-shell { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); } .login-heading h1 { font-size: 1.85rem; } .login-heading p { margin: 6px 0 16px; font-size: 0.95rem; } .login-divider { margin: 14px 0; font-size: 0.86rem; } .login-card form .field + .field { margin-top: 12px; } .login-card form label { margin-bottom: 6px; font-size: 0.92rem; } .login-card .input-wrap input { min-height: 52px; padding-top: 10px; padding-bottom: 10px; font-size: 1rem; } .login-card .input-toggle { width: 42px; height: 42px; } .login-turnstile { margin-top: 10px; } .login-continue { min-height: 50px; margin-top: 10px; font-size: 1rem; } .login-legal { margin-top: 14px; font-size: 0.76rem; line-height: 1.4; } .login-private { margin-top: 9px; font-size: 0.8rem; } .login-private svg { width: 20px; height: 20px; } .login-footer { margin-top: 10px; } .login-footer a { font-size: 0.8rem; } } @media (max-width: 640px) and (max-height: 620px) { .login-heading p { margin-bottom: 10px; } .login-divider { margin: 8px 0; } .login-card form .field + .field { margin-top: 8px; } .login-card .input-wrap input { min-height: 48px; } .login-turnstile { margin-top: 6px; } .login-continue { min-height: 48px; margin-top: 8px; } .login-legal { margin-top: 8px; } .login-private { display: none; } .login-footer { margin-top: 8px; } } @media (max-width: 860px) { .auth-split { display: block; min-height: 100vh; } .auth-split-card { grid-template-columns: 1fr; } .auth-aside { display: none; } .auth-panel { padding: 40px 24px; min-height: 100vh; } } @media (max-width: 340px) { .auth-panel { padding: 32px 16px; } } /* Auth card entrance animation */ .auth-card-enter { animation: authSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes authSlideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Forgot password link */ .forgot-link { display: inline-block; margin-top: 6px; font-size: 0.85rem; font-weight: 500; color: var(--text-faint); transition: color 0.15s; } .forgot-link:hover { color: var(--primary); text-decoration: none; } /* Auth success/error state */ .auth-success { text-align: center; } .auth-success h1 { margin-top: 10px; } .auth-success-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--success-soft); color: var(--success); margin-bottom: 8px; } .auth-success-icon svg { width: 32px; height: 32px; } .auth-success-icon--error { background: #fcebea; color: var(--danger); } /* Alerts ------------------------------------------------------------ */ .alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 0.9rem; border: 1px solid transparent; } .alert-error { background: #fcebea; color: var(--danger); border-color: #f5c6c2; } .alert-info { background: var(--primary-soft); color: var(--primary-dark); } .alert-success { background: var(--success-soft); color: var(--success); border-color: #bfe3cf; } .hidden { display: none !important; } /* Account page ------------------------------------------------------ */ .account-panel { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 32px; box-shadow: var(--shadow-lg); animation: authSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .account-panel::before { content: ""; position: absolute; inset: -40% 30% auto -10%; height: 320px; background: radial-gradient(closest-side, var(--primary-soft), transparent); opacity: 0.7; pointer-events: none; } .account-panel > * { position: relative; } .account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .account-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-faint); border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 5px 12px; } .account-head h1 { margin: 14px 0 4px; font-size: 1.9rem; font-weight: 700; } .account-head .account-sub { margin: 0; max-width: 46ch; color: var(--text-dim); font-size: 0.95rem; } .badge-lg { font-size: 0.8rem; padding: 6px 14px; } .account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; align-items: start; } .account-col { display: flex; flex-direction: column; gap: 20px; } .subcard { border: 1px solid var(--border); border-radius: 16px; padding: 20px; background: var(--surface-2); } .subcard > h2 { font-size: 1rem; font-weight: 600; margin: 0 0 2px; } .subcard-desc { font-size: 0.85rem; color: var(--text-faint); margin: 0 0 16px; } .plan-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 14px; } .plan-price .now { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--primary); } .plan-price .was { color: var(--text-faint); text-decoration: line-through; font-size: 1.05rem; } .plan-price .per { color: var(--text-faint); font-size: 0.9rem; } .account-footer { display: flex; justify-content: flex-end; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); } /* Read-only detail row with an inline edit affordance */ .detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .detail-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 3px; } .detail-val { font-weight: 500; word-break: break-word; } .detail-val.mask { letter-spacing: 0.18em; color: var(--text-dim); } .btn-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .btn-icon:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } .btn-icon svg { width: 16px; height: 16px; } /* Modal --------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(17, 24, 39, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: modalFade 0.15s ease; } @keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } .modal { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); padding: 24px; animation: authSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .modal-head h2 { margin: 0; font-size: 1.2rem; } .modal-head .modal-desc { margin: 4px 0 0; font-size: 0.88rem; color: var(--text-faint); } .modal-close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; margin: -4px -4px 0 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--text-faint); cursor: pointer; transition: background 0.15s, color 0.15s; } .modal-close:hover { background: var(--surface-2); color: var(--text); } .modal-close svg { width: 18px; height: 18px; } @media (max-width: 720px) { .account-panel { padding: 22px; border-radius: 18px; } .account-grid { grid-template-columns: 1fr; } } /* Dashboard widgets ------------------------------------------------- */ .stat { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; } .stat-label { font-size: 0.8rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; } .list { list-style: none; margin: 0; padding: 0; } .list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); } .list li:last-child { border-bottom: none; } .empty { text-align: center; color: var(--text-faint); padding: 28px 12px; } /* Hero (landing) ---------------------------------------------------- */ .hero { padding: 90px 0 70px; text-align: center; position: relative; } .hero h1 { font-size: 3.5rem; max-width: 18ch; margin: 0 auto 0.3em; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; color: var(--text); } .text-gradient { color: var(--primary); } .hero p.lead { font-size: 1.25rem; color: var(--text-dim); max-width: 52ch; margin: 0 auto 32px; font-weight: 400; } .hero .cta-row { justify-content: center; } /* Landing helpers --------------------------------------------------- */ .kicker { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary); margin-bottom: 10px; } .checklist { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; } .checklist li { position: relative; padding-left: 28px; color: var(--text-dim); } .checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primary); font-weight: 700; } .hero .checklist { max-width: 44ch; margin: 24px auto 28px; text-align: left; } .painlist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .painlist li { position: relative; padding-left: 26px; } .painlist li::before { content: "✕"; position: absolute; left: 0; top: 1px; color: var(--warn); font-weight: 700; font-size: 0.85rem; } .painlist b { font-weight: 600; } .step-num { color: var(--primary); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em; } .qa { display: grid; gap: 18px; } .qa p { margin: 0; } .qa .q { font-weight: 600; margin-bottom: 3px; } .feature h3 { display: flex; align-items: center; gap: 8px; } .section { padding: 40px 0; } .section > h2 { margin-bottom: 16px; } /* Landing page redesign --------------------------------------------- */ .home-page-root, .home-page { width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; } .home-page { touch-action: manipulation; } .landing-page { --lp-ink: #071231; --lp-muted: #53607a; --lp-line: #e6ebf4; --lp-blue: #2868f6; --lp-purple: #7c3df2; --lp-green: #16b978; --lp-orange: #ff7a2f; --lp-red: #ff6b7a; background: linear-gradient(180deg, #f6f9ff 0, #ffffff 45%, #ffffff 100%); color: var(--lp-ink); } .landing-page a:hover { text-decoration: none; } .lp-container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; } .lp-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.78); border-bottom: 1px solid rgba(221, 227, 239, 0.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .lp-nav-shell { min-height: 66px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; } .lp-brand { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; color: var(--lp-ink); font-weight: 800; font-size: 1.2rem; } .lp-brand-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; color: var(--lp-blue); } .lp-brand-mark svg, .lp-mini-logo svg { width: 100%; height: 100%; } .lp-nav { display: flex; align-items: center; justify-content: center; gap: 26px; } .lp-nav a { position: relative; color: #0f1831; font-size: 0.9rem; font-weight: 650; padding: 23px 0 20px; } .lp-nav a.active { color: var(--lp-blue); } .lp-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 2px; border-radius: 999px; background: var(--lp-blue); } .lp-start { justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border-radius: 8px; color: #fff; background: #101935; box-shadow: 0 12px 24px rgba(16, 25, 53, 0.2); font-weight: 750; font-size: 0.9rem; } .lp-start svg, .lp-btn svg { width: 18px; height: 18px; } .lp-hero { position: relative; overflow: hidden; padding: 18px 0 0; background: radial-gradient(circle at 4% 33%, rgba(40, 104, 246, 0.15) 0 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(135deg, #f5faff 0%, #f9fbff 45%, #f7efff 100%); } .lp-hero::after { content: ""; position: absolute; inset: auto -15% 0 -15%; height: 48%; background: linear-gradient(150deg, rgba(40, 104, 246, 0.14), rgba(124, 61, 242, 0.14)); border-radius: 50% 50% 0 0 / 100% 100% 0 0; pointer-events: none; } .lp-hero > .lp-container { position: relative; z-index: 1; text-align: center; } /* Staggered hero entrance — elements rise into view one after another */ @keyframes lpHeroRise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .lp-hero > .lp-container > * { opacity: 0; animation: lpHeroRise 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .lp-hero > .lp-container > .lp-trust-pill { animation-delay: 0.05s; } .lp-hero > .lp-container > h1 { animation-delay: 0.18s; } .lp-hero > .lp-container > .lp-hero-copy { animation-delay: 0.31s; } .lp-hero > .lp-container > .lp-hero-actions { animation-delay: 0.44s; } .lp-hero > .lp-container > .lp-product-shot { animation: lpHeroReveal 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.58s forwards; } @keyframes lpHeroReveal { from { opacity: 0; transform: translateY(34px) scale(0.97); } to { opacity: 1; transform: none; } } .lp-hero > .lp-container > .lp-hero-feature-row { animation-delay: 0.78s; } @media (prefers-reduced-motion: reduce) { .lp-hero > .lp-container > * { opacity: 1; animation: none; } } /* Scroll-triggered reveal — sections rise into view as they enter the viewport. Elements start hidden; JS adds .is-visible via IntersectionObserver. */ .lp-reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .lp-reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .lp-reveal { opacity: 1; transform: none; transition: none; } } /* Time pill used on the 2026 spec cards */ .lp-spec-time { display: inline-block; margin: 2px 0 10px; padding: 3px 11px; border-radius: 999px; background: #eef3fd; color: var(--lp-blue); font-weight: 750; font-size: 0.82rem; } .lp-spec-score { margin-top: 10px; font-size: 0.82rem; font-weight: 700; color: #59667f; } .lp-spec-note { max-width: 640px; margin: 22px auto 0; text-align: center; color: #59667f; font-size: 0.95rem; } /* ---- SEO / content article pages (landing-page system) ------------------- Compact gradient hero (keeps the staggered hero entrance) + a readable white article card. Used by the footer resource/guide/practice pages. */ .lp-hero-compact { padding: 22px 0 0; } .lp-hero-compact::after { display: none; } .lp-hero-compact > .lp-container { max-width: 880px; } .lp-hero-compact h1 { font-size: 2.9rem; margin-bottom: 14px; } .lp-hero-compact .lp-trust-pill { font-size: 0.86rem; font-weight: 700; } .lp-hero-compact .lp-hero-copy { margin-bottom: 6px; } .lp-article-wrap { width: min(840px, calc(100% - 40px)); padding-top: 10px; } .lp-article { background: #fff; border: 1px solid var(--lp-line); border-radius: 20px; padding: 38px 40px; box-shadow: 0 24px 60px rgba(34, 49, 88, 0.10); color: #2a3550; font-size: 1.02rem; line-height: 1.7; } .lp-article > :first-child { margin-top: 0; } .lp-article > :last-child { margin-bottom: 0; } .lp-article h2 { margin: 30px 0 12px; font-size: 1.45rem; font-weight: 800; color: var(--lp-ink); } .lp-article h3 { margin: 22px 0 8px; font-size: 1.12rem; font-weight: 750; color: var(--lp-ink); } .lp-article p { margin: 0 0 1em; } .lp-article ul, .lp-article ol { margin: 0 0 1.1em; padding-left: 22px; } .lp-article li { margin: 6px 0; } .lp-article strong { color: var(--lp-ink); font-weight: 700; } .lp-article a { color: var(--lp-blue); font-weight: 650; } .lp-article-cta { margin: 28px auto 0; text-align: center; } /* Blog list + guide cards reuse the article shell */ .lp-article .lp-post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .lp-article .lp-post-list li { padding: 16px 0; border-bottom: 1px solid var(--lp-line); margin: 0; } .lp-article .lp-post-list li:last-child { border-bottom: 0; } .lp-article .lp-post-list a { display: inline-block; font-size: 1.12rem; font-weight: 750; color: var(--lp-ink); } .lp-article .lp-post-list a:hover { color: var(--lp-blue); } .lp-article .lp-post-list p { margin: 4px 0 0; color: var(--lp-muted); font-size: 0.95rem; } @media (max-width: 640px) { .lp-article { padding: 26px 22px; } .lp-hero-compact h1 { font-size: 2.1rem; } } /* Guide hub: grid of linked resource cards */ .lp-guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 10px; } .lp-guide-grid article { background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; padding: 24px 22px; box-shadow: 0 16px 40px rgba(34, 49, 88, 0.07); transition: transform 0.14s ease, box-shadow 0.14s ease; } .lp-guide-grid article:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(34, 49, 88, 0.12); } .lp-guide-grid h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 750; } .lp-guide-grid h3 a { color: var(--lp-ink); } .lp-guide-grid h3 a:hover { color: var(--lp-blue); } .lp-guide-grid p { margin: 0; color: var(--lp-muted); font-size: 0.95rem; line-height: 1.6; } @media (max-width: 900px) { .lp-guide-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .lp-guide-grid { grid-template-columns: 1fr; } } .lp-trust-pill { display: inline-flex; align-items: center; gap: 16px; min-height: 46px; padding: 6px 20px 6px 10px; margin: 0 auto 20px; color: #53607a; background: rgba(255, 255, 255, 0.9); border: 1px solid #edf1f8; border-radius: 999px; box-shadow: 0 16px 35px rgba(26, 45, 88, 0.08); font-weight: 650; } .lp-avatar-row { display: inline-flex; align-items: center; padding-left: 8px; } .lp-trust-copy-short { display: none; } .lp-avatar-row img { width: 26px; height: 26px; margin-left: -7px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; background: #d9e5ff; } .lp-hero h1 { max-width: 880px; margin: 0 auto 10px; color: #071231; font-size: 3.7rem; line-height: 1.04; font-weight: 850; letter-spacing: 0; } .lp-hero h1 span { color: transparent; background: linear-gradient(90deg, var(--lp-blue), var(--lp-purple)); -webkit-background-clip: text; background-clip: text; } .lp-hero-copy { max-width: 690px; margin: 0 auto 24px; color: #34415f; font-size: 1.08rem; line-height: 1.55; } .lp-hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-bottom: 14px; } .lp-hero-reassure { margin: 0 auto 14px; color: #6b7896; font-size: 0.92rem; font-weight: 600; } /* Secondary, understated entry points — kept as text links so the hero has one button (one next step) while preserving the free-score lead magnet. */ .lp-hero-secondary { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 0 auto 14px; font-size: 0.92rem; font-weight: 650; } .lp-hero-secondary a { color: var(--lp-blue); } .lp-hero-secondary a:hover { text-decoration: underline; } .lp-hero-secondary span { color: #c2cbdc; } .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 154px; min-height: 48px; padding: 0 24px; border-radius: 8px; font-weight: 800; } .lp-btn-primary { color: #fff; background: linear-gradient(135deg, var(--lp-blue), #3c37f4); box-shadow: 0 16px 30px rgba(40, 104, 246, 0.26); } .lp-btn-light { color: #121b35; background: #fff; border: 1px solid #e7edf7; box-shadow: 0 16px 28px rgba(26, 45, 88, 0.1); } .lp-product-shot { position: relative; width: min(980px, 100%); margin: 14px auto 38px; padding: 32px 16px 0; border-radius: 24px; background: rgba(255,255,255,0.72); border: 1px solid rgba(227, 233, 246, 0.95); box-shadow: 0 34px 80px rgba(34, 49, 88, 0.18); text-align: left; cursor: pointer; } .lp-window-dots { position: absolute; top: 15px; left: 24px; display: flex; gap: 8px; } .lp-window-dots span { width: 10px; height: 10px; border-radius: 50%; } .lp-window-dots span:nth-child(1) { background: #ff725f; } .lp-window-dots span:nth-child(2) { background: #ffbd4f; } .lp-window-dots span:nth-child(3) { background: #4bd67d; } .lp-app-preview { display: grid; grid-template-columns: 210px 1fr; min-height: 472px; overflow: hidden; border-radius: 10px 10px 0 0; background: rgba(255,255,255,0.94); border: 1px solid rgba(229, 235, 246, 0.9); } .lp-preview-side { padding: 22px 18px; background: linear-gradient(180deg, #fbfdff, #f5f8ff); border-right: 1px solid #edf1f8; } .lp-preview-logo, .lp-preview-user { display: flex; align-items: center; gap: 10px; color: #0c1732; font-weight: 800; } .lp-mini-logo { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--lp-blue); } .lp-preview-user { margin: 22px 0; padding: 10px; border: 1px solid #edf1f8; border-radius: 8px; background: #fff; font-size: 0.74rem; } .lp-user-photo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #d9e5ff; } .lp-preview-user small { display: block; color: #687692; font-size: 0.65rem; font-weight: 650; } .lp-preview-menu { margin: 0 0 8px; color: #8a95aa; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; } .lp-preview-nav { display: grid; gap: 5px; padding: 0; margin: 0; list-style: none; } .lp-preview-nav li { padding: 8px 10px; border-radius: 8px; color: #53607a; font-size: 0.74rem; font-weight: 750; } .lp-preview-nav li.active { color: var(--lp-blue); background: #edf3ff; } .lp-preview-main { padding: 20px; background: rgba(255,255,255,0.95); } .lp-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .lp-search { flex: 1; max-width: 360px; color: #8792a8; border: 1px solid #e6ebf4; border-radius: 8px; padding: 9px 14px; font-size: 0.72rem; } .lp-price-badge { display: grid; place-items: center; min-width: 108px; padding: 9px 12px; color: #fff; background: #111a39; border-radius: 8px; line-height: 1.05; } .lp-price-badge small { color: rgba(255,255,255,0.75); font-size: 0.62rem; } .lp-progress-panel, .lp-recent-row > div, .lp-mini-panel { border: 1px solid #e6ebf4; border-radius: 8px; background: #fff; box-shadow: 0 10px 24px rgba(40, 52, 84, 0.04); } .lp-progress-panel { padding: 14px 16px; } .lp-panel-head { display: flex; justify-content: space-between; gap: 12px; color: #101a35; font-size: 0.74rem; } .lp-panel-head small { display: block; color: #6c7890; margin-top: 4px; } .lp-target { color: #101a35; font-weight: 800; } .lp-band-score { margin-top: 6px; color: #667188; font-weight: 800; } .lp-band-score span { color: var(--lp-blue); font-size: 1.55rem; } .lp-score-bars { position: relative; display: grid; grid-template-columns: 1fr 1fr .86fr .78fr .32fr; gap: 4px; margin: 6px 0 12px; } .lp-score-bars span, .lp-score-bars i { height: 7px; border-radius: 999px; display: block; } .lp-score-bars span:nth-child(1) { background: var(--lp-blue); } .lp-score-bars span:nth-child(2) { background: var(--lp-green); } .lp-score-bars span:nth-child(3) { background: var(--lp-purple); } .lp-score-bars span:nth-child(4) { background: var(--lp-orange); } .lp-score-bars i { background: #dfe5ef; } .lp-score-legend { display: flex; flex-wrap: wrap; gap: 12px; color: #56627b; font-size: 0.69rem; font-weight: 700; } .lp-score-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; vertical-align: 1px; } .lp-score-legend .reading { background: var(--lp-blue); } .lp-score-legend .listening { background: var(--lp-green); } .lp-score-legend .speaking { background: var(--lp-purple); } .lp-score-legend .writing { background: var(--lp-orange); } .lp-recent-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; } .lp-recent-row > div { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 12px; min-width: 0; } .lp-recent-row b, .lp-recent-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lp-recent-row b { color: #151d37; font-size: 0.74rem; } .lp-recent-row small { color: #7a849a; font-size: 0.65rem; } .lp-card-icon { grid-row: span 2; width: 34px; height: 34px; border-radius: 8px; background: #edf3ff; } .lp-card-icon.listening { background: #e9f8f1; } .lp-card-icon.speaking { background: #f2eaff; } .lp-card-icon.writing { background: #fff0e7; } .lp-preview-grid { display: grid; grid-template-columns: 1.1fr 1.15fr .95fr 1.2fr; gap: 12px; margin-top: 14px; } .lp-mini-panel { padding: 13px; min-height: 130px; } .lp-mini-panel strong { display: block; margin-bottom: 10px; color: #151d37; font-size: 0.78rem; } .lp-mini-panel p { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: #53607a; font-size: 0.66rem; } .lp-mini-panel p span { flex: 1; } .lp-mini-panel p i { flex: 0 0 54px; height: 5px; overflow: hidden; border-radius: 999px; background: #e9edf5; } .lp-mini-panel p i b { display: block; height: 100%; border-radius: inherit; background: var(--lp-blue); } .lp-mini-panel p em { color: #7a849a; font-style: normal; font-weight: 800; } .lp-ring-panel { text-align: center; } .lp-ring { display: grid; place-items: center; width: 84px; height: 84px; margin: 10px auto 4px; border-radius: 50%; background: conic-gradient(var(--lp-green) 0 78%, #e8edf4 78% 100%); } .lp-ring span { display: grid; place-items: center; width: 61px; height: 61px; color: #121a34; background: #fff; border-radius: 50%; font-weight: 850; } .lp-ring small { color: #8390a6; font-size: 0.65rem; } .lp-mod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .lp-mod-grid span { display: block; padding: 10px 8px; border-radius: 8px; color: #24304d; background: #f3f6fc; font-size: 0.65rem; font-weight: 800; } .lp-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 64px; height: 64px; transform: translate(-50%, -50%); color: #5b35ff; background: #fff; border: 1px solid #dfe6f2; border-radius: 50%; box-shadow: 0 16px 36px rgba(29, 39, 70, 0.18); } .lp-play { cursor: pointer; padding: 0; } .lp-play svg { width: 28px; height: 28px; } .lp-video-modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; } .lp-video-modal[hidden] { display: none; } .lp-video-backdrop { position: absolute; inset: 0; background: rgba(11, 16, 33, 0.72); backdrop-filter: blur(2px); } .lp-video-frame { position: relative; width: min(960px, 100%); max-height: 86vh; aspect-ratio: 1488 / 1080; background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); } .lp-video-frame video { width: 100%; height: 100%; display: block; object-fit: contain; } .lp-video-close { position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; color: #fff; background: rgba(0, 0, 0, 0.45); border: none; border-radius: 50%; cursor: pointer; } .lp-video-close:hover { background: rgba(0, 0, 0, 0.7); } .lp-video-close svg { width: 20px; height: 20px; } .lp-hero-feature-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: min(940px, 100%); margin: 0 auto -44px; text-align: left; } .lp-hero-feature-row a { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 20px; min-height: 116px; color: var(--lp-ink); background: rgba(255,255,255,0.94); border: 1px solid #e4eaf5; border-radius: 8px; box-shadow: 0 18px 42px rgba(28, 43, 79, 0.08); } .lp-hero-feature-row b, .lp-hero-feature-row small { display: block; grid-column: 2; } .lp-hero-feature-row b { font-size: 1rem; } .lp-hero-feature-row small { color: #59667f; font-size: 0.82rem; line-height: 1.4; } .lp-alert-band { display: grid; grid-template-columns: 1.2fr 1fr 250px; gap: 34px; align-items: center; margin-top: 96px; padding: 28px; border: 1px solid #e8edf6; border-radius: 18px; background: linear-gradient(105deg, #fbfdff, #fff9fb 58%, #f8f2ff); box-shadow: 0 14px 42px rgba(28, 43, 79, 0.06); } .lp-megaphone { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 12px; border-radius: 50%; color: var(--lp-purple); background: #f1eaff; font-weight: 850; } .lp-alert-band h2, .lp-section h2, .lp-testimonials h2, .lp-final-cta h2 { margin: 0 auto 10px; color: var(--lp-ink); font-size: 1.72rem; line-height: 1.15; letter-spacing: 0; text-align: center; } .lp-alert-band h2 { text-align: left; font-size: 2rem; max-width: 390px; margin-left: 0; } .lp-alert-band p { margin: 0; color: #53607a; line-height: 1.5; } .lp-alert-band ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; color: #36425c; font-weight: 650; font-size: 0.9rem; } .lp-alert-band li { position: relative; padding-left: 34px; } .lp-alert-band li::before { content: "x"; position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 22px; height: 22px; color: var(--lp-red); background: #fff0f2; border-radius: 50%; font-weight: 850; } .lp-price-card { padding: 22px; border-radius: 8px; background: #fff; border: 1px solid #e8edf6; box-shadow: 0 18px 40px rgba(28, 43, 79, 0.1); text-align: center; } .lp-price-card span, .lp-final-price span { color: #8994aa; text-decoration: line-through; font-weight: 800; } .lp-price-card strong, .lp-final-price strong { display: block; color: #101935; font-size: 2rem; line-height: 1; } .lp-price-card small, .lp-final-price small { display: block; color: #748098; margin: 4px 0 14px; font-weight: 750; } .lp-price-card a, .lp-final-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; width: 100%; border-radius: 8px; color: #fff; background: var(--lp-blue); font-weight: 850; } .lp-section { padding: 34px 0; text-align: center; } .lp-eyebrow { margin: 0 0 4px; color: #8dabff; font-size: 0.78rem; font-weight: 850; text-transform: uppercase; letter-spacing: 0; text-align: center; } .lp-step-grid, .lp-feature-grid, .lp-proof-grid, .lp-testimonial-grid { display: grid; gap: 18px; margin-top: 18px; } .lp-step-grid { grid-template-columns: repeat(3, 1fr); } .lp-feature-grid { grid-template-columns: repeat(4, 1fr); } .lp-proof-grid { grid-template-columns: repeat(4, 1fr); } .lp-testimonial-grid { grid-template-columns: repeat(3, 1fr); } .lp-step-grid article, .lp-feature-grid article, .lp-proof-grid article, .lp-testimonial-grid article { padding: 24px; border: 1px solid #e5ebf5; border-radius: 8px; background: #fff; box-shadow: 0 10px 30px rgba(28, 43, 79, 0.045); text-align: left; } .lp-step-grid article { min-height: 140px; } .lp-step-grid small { display: block; margin: 10px 0 4px; color: var(--lp-blue); font-size: 0.72rem; font-weight: 850; text-transform: uppercase; } .lp-step-grid h3, .lp-feature-grid h3, .lp-proof-grid h3 { margin: 0 0 8px; color: #121a34; font-size: 1rem; line-height: 1.25; } .lp-step-grid p, .lp-feature-grid p, .lp-proof-grid p, .lp-testimonial-grid p { margin: 0; color: #5d6880; line-height: 1.5; font-size: 0.9rem; } .lp-tm-author { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #eef1f8; } .lp-tm-author img { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: #eef4ff; } .lp-tm-author strong { display: block; color: #18213a; font-size: 0.92rem; line-height: 1.2; } .lp-band-pill { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; } .lp-band-pill.blue { color: #1d4ee8; background: #e7eeff; } .lp-band-pill.purple { color: #6f32e6; background: #efe7ff; } .lp-band-pill.green { color: #128a5a; background: #e2f6ee; } .lp-feature-grid article { display: flex; flex-direction: column; min-height: 250px; } .lp-feature-grid a { margin-top: auto; color: var(--lp-blue); font-weight: 800; font-size: 0.88rem; } .lp-step-icon, .lp-feature-icon, .lp-proof-icon, .lp-hero-feature-row span:first-child { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; color: var(--icon-color, var(--lp-blue)); background: var(--icon-bg, #eef4ff); } .lp-step-icon svg, .lp-feature-icon svg, .lp-proof-icon svg { width: 28px; height: 28px; } /* Per-accent tint + colour for the SVG section icons */ .lp-step-icon.doc, .lp-feature-icon.speaking, .lp-proof-icon.shield { --icon-color: var(--lp-blue); --icon-bg: #e9f1ff; } .lp-step-icon.bolt, .lp-feature-icon.writing, .lp-proof-icon.brain { --icon-color: var(--lp-purple); --icon-bg: #f1eaff; } .lp-step-icon.target, .lp-feature-icon.listening, .lp-proof-icon.tag { --icon-color: var(--lp-green); --icon-bg: #e3f7ee; } .lp-feature-icon.mock, .lp-proof-icon.infinity { --icon-color: var(--lp-orange); --icon-bg: #fff0e6; } /* Letter glyphs remain only on the hero feature row */ .lp-hero-feature-row span:first-child::before { color: var(--icon-color, var(--lp-blue)); font-weight: 900; font-size: 1.45rem; } .lp-hero-feature-row .doc::before { content: "A"; } .lp-hero-feature-row .mic::before { content: "M"; --icon-color: var(--lp-purple); } .lp-hero-feature-row .plan::before { content: "C"; --icon-color: var(--lp-green); } .lp-faq-section { display: grid; grid-template-columns: 320px 1fr; gap: 48px; align-items: center; text-align: left; } .lp-faq-section h2, .lp-faq-section .lp-eyebrow { text-align: left; } .lp-faq-visual { position: relative; min-height: 300px; display: grid; place-items: center; } .lp-faq-portrait { width: 280px; height: 280px; border-radius: 50%; object-fit: cover; background: #eef4ff; box-shadow: 0 24px 50px rgba(28, 43, 79, 0.10); } .lp-floating-note { position: absolute; display: flex; align-items: center; gap: 8px; width: 104px; height: 50px; padding-left: 12px; border-radius: 10px; background: #fff; border: 1px solid #e8eefa; box-shadow: 0 16px 34px rgba(28, 43, 79, 0.10); } .lp-floating-note.one { right: -6px; top: 44px; } .lp-floating-note.two { right: 14px; top: 118px; } .lp-floating-note::after { content: ""; width: 40px; height: 6px; border-radius: 999px; background: #dfe7f5; box-shadow: 0 12px 0 -1px #e9eef8; } .lp-note-check { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: #2868f6; color: #fff; font-size: 0.7rem; font-weight: 900; } .lp-floating-note.two .lp-note-check { background: #1fb877; } .lp-faq-badge { position: absolute; right: 30px; bottom: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1fb877; color: #fff; font-size: 1rem; font-weight: 900; border: 3px solid #fff; box-shadow: 0 12px 26px rgba(31, 184, 119, 0.35); } .lp-faq-list { display: grid; gap: 0; margin-top: 18px; border: 1px solid #e5ebf5; border-radius: 8px; overflow: hidden; background: #fff; } .lp-faq-list details + details { border-top: 1px solid #e5ebf5; } .lp-faq-list summary { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 20px; color: #18213a; font-weight: 850; list-style: none; } .lp-faq-list summary::-webkit-details-marker { display: none; } .lp-faq-list summary::after { content: "+"; color: #53607a; font-size: 1.2rem; } .lp-faq-list details[open] summary::after { content: "-"; } .lp-faq-list p { margin: -6px 20px 16px; color: #5c687f; font-size: 0.92rem; } .lp-testimonials { padding: 34px 0; text-align: center; } .lp-testimonials { border-radius: 18px; background: linear-gradient(135deg, #f7fbff, #faf6ff); padding: 32px; } .lp-stars { margin-bottom: 10px; color: #f4a81d; font-size: 0.9rem; letter-spacing: 0; } .lp-final-cta { position: relative; overflow: hidden; margin-top: 30px; padding: 32px 40px 34px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #165ef0, #1d4ee8 46%, #6f32e6); text-align: center; display: flex; align-items: center; justify-content: center; gap: 28px; } .lp-cta-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; flex: 1; } .lp-final-cta h2, .lp-final-cta p { color: #fff; position: relative; z-index: 1; } .lp-final-cta h2 { font-size: 1.95rem; margin-bottom: 6px; } .lp-final-cta p { margin: 0 auto 12px; max-width: 720px; color: rgba(255,255,255,0.86); } .lp-final-price { position: relative; z-index: 1; display: inline-flex; align-items: baseline; justify-content: center; gap: 14px; margin: 2px 0 12px; } .lp-final-price span, .lp-final-price small { color: rgba(255,255,255,0.72); } .lp-final-price strong { color: #fff; display: inline; } .lp-final-cta a { position: relative; z-index: 1; width: min(330px, 100%); background: #fff; color: var(--lp-blue); } .lp-payment-badge { position: relative; z-index: 1; display: inline-grid; place-items: center; min-height: 34px; padding: 0 16px; margin-bottom: 10px; border-radius: 999px; color: #163fbc; background: #fff; font-weight: 850; font-size: 0.78rem; } .lp-confetti { position: absolute; inset: 0; opacity: 0.5; background: radial-gradient(circle at 6% 22%, #fff 0 2.5px, transparent 3.5px), radial-gradient(circle at 13% 70%, #ffd364 0 3px, transparent 4px), radial-gradient(circle at 22% 38%, #7ff0c5 0 2px, transparent 3px), radial-gradient(circle at 31% 82%, #ff8fb4 0 2.5px, transparent 3.5px), radial-gradient(circle at 40% 18%, #b69cff 0 2px, transparent 3px), radial-gradient(circle at 58% 78%, #ffd364 0 2.5px, transparent 3.5px), radial-gradient(circle at 67% 30%, #7ff0c5 0 3px, transparent 4px), radial-gradient(circle at 78% 64%, #fff 0 2px, transparent 3px), radial-gradient(circle at 86% 22%, #ffb16b 0 3px, transparent 4px), radial-gradient(circle at 93% 74%, #b69cff 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 50%, #ff8fb4 0 2px, transparent 3px); } .lp-cta-sub { margin: 12px 0 0 !important; font-size: 0.82rem; color: rgba(255, 255, 255, 0.78) !important; } @media (max-width: 1000px) { .lp-nav-shell { grid-template-columns: 1fr auto; } .lp-nav { display: none; } .lp-app-preview { grid-template-columns: 1fr; } .lp-preview-side { display: none; } .lp-preview-grid, .lp-feature-grid, .lp-proof-grid { grid-template-columns: repeat(2, 1fr); } .lp-alert-band { grid-template-columns: 1fr; } .lp-price-card { max-width: 320px; } .lp-faq-section { grid-template-columns: 1fr; } .lp-faq-visual { display: none; } } @media (max-width: 740px) { .lp-container { width: min(100% - 28px, 1180px); } .lp-nav-shell { min-height: 60px; } .lp-brand { font-size: 1rem; } .lp-start { padding: 0 12px; min-height: 44px; font-size: 0.82rem; } .lp-hero { padding-top: 24px; } .home-page .lp-trust-pill { gap: 10px; min-height: 40px; padding: 5px 12px 5px 8px; margin-bottom: 14px; font-size: 0.78rem; white-space: nowrap; } .home-page .lp-avatar-row { flex: none; } .home-page .lp-avatar-row img:nth-child(n + 5) { display: none; } .home-page .lp-trust-copy-full { display: none; } .home-page .lp-trust-copy-short { display: inline; } .lp-hero h1 { font-size: 2.35rem; } .lp-hero-copy { font-size: 1rem; } /* Owner call 2026-07-21: the dashboard mock renders as a tall, unreadable column on a phone and pushed the real content below the fold. Hidden on mobile; the hero copy + CTA carry the page there. Still shown on tablet/desktop. */ .lp-product-shot { display: none; } .lp-preview-main { padding: 12px; } .lp-preview-top { align-items: stretch; flex-direction: column; } .lp-price-badge { align-self: flex-start; } .lp-recent-row, .lp-preview-grid, .lp-hero-feature-row, .lp-step-grid, .lp-feature-grid, .lp-proof-grid, .lp-testimonial-grid { grid-template-columns: 1fr; } .lp-hero-feature-row { margin-bottom: -22px; } .lp-alert-band { margin-top: 58px; padding: 22px; border-radius: 14px; } .lp-alert-band h2, .lp-section h2, .lp-testimonials h2, .lp-final-cta h2 { font-size: 1.45rem; } .lp-section { padding: 28px 0; } .lp-testimonials { padding: 24px; border-radius: 14px; } .lp-final-cta { padding: 24px 18px; border-radius: 14px; gap: 0; } .lp-final-price { display: grid; gap: 2px; } } /* Landing comparison table (us vs old courses vs tutor) ------------- */ .lp-compare-wrap { margin-top: 20px; overflow-x: auto; } .lp-compare { width: 100%; min-width: 680px; border-collapse: separate; border-spacing: 0; text-align: left; font-size: 0.9rem; } .lp-compare th, .lp-compare td { padding: 14px 16px; border-bottom: 1px solid var(--lp-line); vertical-align: top; color: #4a5570; } .lp-compare thead th { font-size: 0.84rem; font-weight: 800; color: #6b7793; border-bottom: 2px solid var(--lp-line); } .lp-compare tbody th { font-weight: 750; color: var(--lp-ink); } .lp-compare .yes, .lp-compare .no, .lp-compare .maybe { font-weight: 850; margin-right: 7px; } .lp-compare .yes { color: var(--lp-green); } .lp-compare .no { color: var(--lp-red); } .lp-compare .maybe { color: var(--lp-orange); } .lp-compare strong { color: var(--lp-ink); font-weight: 850; } /* Highlight the "us" column so the comparison reads in our favour at a glance. */ .lp-compare .lp-compare-us { background: linear-gradient(180deg, rgba(40, 104, 246, 0.07), rgba(124, 61, 242, 0.05)); color: var(--lp-ink); border-left: 1px solid rgba(40, 104, 246, 0.18); border-right: 1px solid rgba(40, 104, 246, 0.18); } .lp-compare thead th.lp-compare-us { color: var(--lp-blue); border-top: 1px solid rgba(40, 104, 246, 0.18); border-top-left-radius: 10px; border-top-right-radius: 10px; } .lp-compare tbody tr:last-child td.lp-compare-us { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } /* Spec table (marketing exam pages) --------------------------------- */ .spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .spec-table th, .spec-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; } .spec-table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); border-bottom: 2px solid var(--border); } .spec-table tbody th { font-weight: 700; white-space: nowrap; } .spec-table tr:last-child td, .spec-table tr:last-child th { border-bottom: none; } .spec-wrap { overflow-x: auto; } footer.site-footer { border-top: 1px solid var(--border); margin-top: 48px; padding: 28px 0; color: var(--text-faint); font-size: 0.9rem; } /* Rich SEO footer --------------------------------------------------- */ footer.site-footer-rich { margin-top: 64px; padding: 64px 0 32px; background: #0b1220; color: #9aa6bf; font-size: 0.95rem; } footer.site-footer-rich a { color: #c7d0e3; } footer.site-footer-rich a:hover { color: #fff; text-decoration: none; } /* Footer lead — a strong, memorable close + the single CTA, so the page doesn't end on the SEO link list. Links below it read as secondary. */ .footer-lead { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer-lead h2 { margin: 0; color: #fff; font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; } .footer-lead p { margin: 0; color: #9aa6bf; font-size: 1rem; } .footer-lead a { margin-top: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 8px; background: linear-gradient(135deg, var(--lp-blue), #3c37f4); color: #fff !important; font-weight: 800; box-shadow: 0 16px 30px rgba(40, 104, 246, 0.26); } .footer-grid { display: grid; grid-template-columns: 2.4fr minmax(220px, 1fr); gap: 48px; } .footer-heading { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7793; margin: 0 0 22px; } /* Resource link columns */ .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; } .footer-links a { display: block; padding: 6px 0; line-height: 1.4; } .footer-links a.seo-primary { font-weight: 700; color: #fff; } /* Contact column */ .footer-contact { display: flex; flex-direction: column; gap: 16px; } .footer-contact-row { display: flex; gap: 12px; align-items: flex-start; } .footer-contact-row .ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(16, 185, 129, 0.12); color: #34d399; } .footer-contact-row .ic svg { width: 16px; height: 16px; } .footer-contact-row address { font-style: normal; line-height: 1.5; } /* Legal bar */ .footer-bottom { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.85rem; color: #6b7793; } .footer-legal { display: flex; gap: 20px; align-items: center; white-space: nowrap; } .footer-legal .sep { color: #3a4458; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr; gap: 40px; } .footer-bottom { flex-direction: column; } } @media (max-width: 520px) { .footer-links { grid-template-columns: 1fr; } } /* Practice picker ---------------------------------------------------- */ .test-card { display: flex; flex-direction: column; gap: 12px; } .test-card .test-meta { color: var(--text-faint); font-size: 0.85rem; } .test-card h3 { margin: 0; } .practice-section-head { margin: 28px 0 4px; } /* Test runner -------------------------------------------------------- */ .runner-bar { position: sticky; top: 0; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .runner-bar .container { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; } .runner-title { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .timer { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; padding: 6px 14px; border-radius: 999px; background: var(--surface-2); color: var(--text); } .timer:empty { display: none; } .timer.warn { background: var(--warn-soft); color: var(--warn); } .timer.danger { background: #fcebea; color: var(--danger); } .section-block { margin-bottom: 28px; } .section-block > .section-head { border-left: 3px solid var(--primary); padding: 4px 0 4px 14px; margin-bottom: 16px; } .section-head h2 { margin: 0 0 2px; } .section-audio { width: 100%; max-width: 480px; margin-top: 10px; } /* Reading passage (runner) ------------------------------------------ */ .reading-passage { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 24px; margin-bottom: 18px; max-height: 460px; overflow-y: auto; line-height: 1.7; } .passage-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 10px; } .reading-passage p { margin: 0 0 1em; } .reading-passage p:last-child { margin-bottom: 0; } /* Listening clip (runner) ------------------------------------------- */ .listening-clip { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px; } .listening-clip .passage-label { margin-bottom: 8px; } .tts-controls { display: flex; align-items: center; gap: 12px; } .question { padding: 18px 0; border-bottom: 1px solid var(--border); } .question:last-child { border-bottom: none; } .question .q-prompt { font-weight: 600; margin-bottom: 12px; display: flex; gap: 10px; } .q-num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 6px; background: var(--primary-soft); color: var(--primary-dark); border-radius: 999px; font-size: 0.85rem; font-weight: 700; } .q-hint { font-size: 0.85rem; color: var(--text-faint); font-weight: 400; } .options { display: flex; flex-direction: column; gap: 8px; } .option { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; font-weight: 400; transition: border-color 0.12s, background 0.12s; } .option:hover { border-color: var(--primary); background: var(--primary-soft); } .option input { margin: 0; accent-color: var(--primary); } .option.checked { border-color: var(--primary); background: var(--primary-soft); } .gap-input { max-width: 320px; } /* Writing task (runner) --------------------------------------------- */ .source-material { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 14px; max-height: 280px; overflow-y: auto; } .source-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 6px; } .source-body { white-space: pre-wrap; color: var(--text-dim); font-size: 0.95rem; } .essay-input { min-height: 280px; resize: vertical; line-height: 1.6; } .word-counter { margin-top: 8px; font-size: 0.85rem; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; } .word-counter.under { color: var(--warn); } .word-counter.met { color: var(--success); } /* Speaking task recorder -------------------------------------------- */ .recorder { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .recorder .rec-hint { margin: 0; font-size: 0.9rem; } .rec-row { display: flex; align-items: center; gap: 12px; } .rec-status { font-weight: 600; } .rec-status.prep { color: var(--warn); } .rec-status.rec { color: var(--danger); } .rec-status.done { color: var(--success); } .rec-clock { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.1rem; } .recorder audio { width: 100%; max-width: 360px; } .runner-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; } /* Full-mock exam engine (screen-by-screen) -------------------------- */ .exam-narrow { max-width: 820px; margin: 0 auto; } .exam-stage-head { border-left: 3px solid var(--primary); padding: 2px 0 2px 14px; margin-bottom: 20px; } .exam-stage-head h2 { margin: 0; } .exam-stage-head .sub { font-size: 0.8rem; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; } /* Reading: passage left, questions right. */ .exam-split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .exam-split .exam-passage { position: sticky; top: 76px; max-height: calc(100vh - 100px); overflow-y: auto; } .exam-split .exam-passage .reading-passage { max-height: none; margin-bottom: 0; } .exam-questions > .question:first-child { padding-top: 0; } .exam-screen { animation: examFade 0.18s ease; } @keyframes examFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .q-prompt.big { font-size: 1.05rem; line-height: 1.5; margin-bottom: 18px; } .exam-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--border); } .exam-nav .faint { font-variant-numeric: tabular-nums; } /* Section break / directions screen. */ .transition-screen { text-align: center; max-width: 560px; margin: 56px auto; padding: 40px 28px; } .transition-kicker { text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; font-weight: 700; color: var(--text-faint); } .transition-screen h2 { margin: 10px 0 12px; } .transition-clock { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 20px 0 6px; } @media (max-width: 860px) { .exam-split { grid-template-columns: 1fr; gap: 16px; } .exam-split .exam-passage { position: static; max-height: 42vh; } } /* 2026 task widgets: Build a Sentence + Complete the Words ----------- */ .bs-answer { min-height: 48px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 14px; border: 1px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .bs-bank { display: flex; flex-wrap: wrap; gap: 8px; } .bs-chip { padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-weight: 500; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .bs-chip:hover { border-color: var(--primary); background: var(--primary-soft); } .bs-chip.chosen { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-dark); } .bs-answer .bs-chip.chosen { padding: 3px 4px; border: 0; border-radius: 5px; background: transparent; color: var(--text); font-size: 0.96rem; font-weight: 600; line-height: 1.45; } .bs-answer .bs-chip.chosen:hover { background: var(--primary-soft); color: var(--primary-dark); } .bs-chip.used { opacity: 0.35; cursor: default; } /* Cloze (inline fill-in-the-blanks paragraph) ----------------------------- */ .cloze-para { font-size: 1.05rem; line-height: 1.9; color: var(--text); } .cloze-wrap { position: relative; display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; color: var(--primary-dark); } .cloze-bg { color: var(--text-faint); opacity: 0.6; white-space: pre; pointer-events: none; visibility: visible; } input.cloze-input { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; padding: 0; margin: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; letter-spacing: 1ch; caret-color: var(--primary); text-align: left; } input.cloze-input:focus { outline: none; box-shadow: none; border: none; } .cw-masked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.25rem; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 10px; color: var(--text); } /* Practice runner (two-column, quiz-info sidebar) ------------------------- */ .rn-end { margin-left: 8px; } .rn-head { margin-bottom: 22px; } .rn-title { margin: 0; font-size: 1.85rem; letter-spacing: -0.02em; } .rn-crumb { display: flex; gap: 8px; align-items: center; color: var(--text-faint); font-size: 0.85rem; margin-top: 4px; } .rn-crumb .sep { opacity: 0.55; } /* Per-skill accent (falls back to the brand blue). */ .rn-grid { --rn-accent: var(--primary); --rn-accent-soft: var(--primary-soft); } .rn-reading { --rn-accent: var(--c-reading); --rn-accent-soft: var(--c-reading-soft); } .rn-listening { --rn-accent: var(--c-listening); --rn-accent-soft: var(--c-listening-soft); } .rn-speaking { --rn-accent: var(--c-speaking); --rn-accent-soft: var(--c-speaking-soft); } .rn-writing { --rn-accent: var(--c-writing); --rn-accent-soft: var(--c-writing-soft); } .rn-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .rn-grid.solo { grid-template-columns: minmax(0, 1fr); } .rn-main { min-width: 0; } .rn-aside { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 80px; } .rn-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; margin-bottom: 18px; } .rn-screen { animation: examFade 0.18s ease; } .rn-qwrap { display: block; } /* Reading: passage left (sticky), question right. */ .rn-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .rn-passage-col { position: sticky; top: 80px; max-height: calc(100vh - 110px); overflow-y: auto; margin-bottom: 0; } .rn-passage-col .reading-passage { background: none; border: none; padding: 0; margin: 0; max-height: none; } .rn-qcol { margin-bottom: 0; } .rn-qcol .question { padding-top: 0; border-bottom: none; } /* Prompt card (speaking / writing). */ .rn-prompt-card { } .rn-prompt-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rn-accent); margin-bottom: 10px; } .rn-prompt-text { font-size: 1.15rem; font-weight: 600; line-height: 1.5; } .rn-rec-card { display: flex; flex-direction: column; align-items: stretch; gap: 14px; } .rn-rec-card .recorder { align-items: center; background: var(--surface-2); } /* Paging controls. */ .rn-pagenav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; } .rn-pos { font-variant-numeric: tabular-nums; font-weight: 600; } /* Sidebar info panels. */ .rn-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; } .rn-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .rn-panel-head h3 { margin: 0; font-size: 1rem; } .rn-panel-foot { margin: 14px 0 0; font-size: 0.8rem; color: var(--text-faint); line-height: 1.5; } .rn-ic { color: var(--rn-accent); display: inline-flex; } .rn-ic svg, .rn-instr-ic svg, .rn-check-ic svg, .rn-tip-ic svg { width: 18px; height: 18px; } .rn-instr-list { display: flex; flex-direction: column; } .rn-instr { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: 0.9rem; color: var(--text-dim); line-height: 1.45; } .rn-instr + .rn-instr { border-top: 1px dashed var(--border); } .rn-instr-ic { flex: none; color: var(--rn-accent); display: inline-flex; margin-top: 1px; } /* Static scoring scale (reference only — no live grading). */ .rn-crit { display: flex; align-items: center; gap: 12px; padding: 9px 0; } .rn-crit + .rn-crit { border-top: 1px solid var(--border); } .rn-crit-label { flex: 1; font-size: 0.88rem; font-weight: 600; } .rn-scale { display: flex; gap: 5px; } .rn-scale-cell { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 6px; font-size: 0.78rem; color: var(--text-faint); } .rn-scale-max { font-size: 0.8rem; color: var(--text-faint); } .rn-meta { display: flex; flex-direction: column; } .rn-meta-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 0.9rem; color: var(--text-dim); } .rn-meta-row + .rn-meta-row { border-top: 1px solid var(--border); } .rn-meta-row span { flex: 1; } .rn-meta-row b { color: var(--text); font-weight: 600; } .rn-check { display: flex; flex-direction: column; gap: 4px; } .rn-check-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9rem; color: var(--text-dim); } .rn-check-ic { color: var(--text-faint); display: inline-flex; } .rn-notes { width: 100%; min-height: 150px; resize: vertical; } .rn-tip { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--rn-accent-soft); border-radius: var(--radius); font-size: 0.85rem; } .rn-tip-ic { flex: none; color: var(--rn-accent); display: inline-flex; margin-top: 1px; } .rn-tip b { display: block; margin-bottom: 2px; } /* Question navigator. */ .rn-nav-wrap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); } .rn-nav-label { font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; } .rn-nav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; } .rn-nav-cell { height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 0.12s, background 0.12s, color 0.12s; } .rn-nav-cell:hover { border-color: var(--rn-accent); } .rn-nav-cell.answered { background: var(--rn-accent-soft); border-color: var(--rn-accent-soft); color: var(--rn-accent); } .rn-nav-cell.current { background: var(--rn-accent); border-color: var(--rn-accent); color: #fff; } /* Reading bottom info strip. */ .rn-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; margin-top: 22px; padding: 18px 22px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); } .rn-strip-cell { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; } .rn-strip-cell b { font-size: 1rem; } /* Redesigned reading-practice runner (Complete the Words & friends) -------- */ .rn-head2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; } .rn-titlerow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rn-task-pill { background: var(--primary-soft); color: var(--primary); padding: 4px 13px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; } .rn-crumb .cur { color: #6d28d9; font-weight: 600; } .rn-head-meta { display: flex; align-items: center; gap: 14px; color: var(--text-dim); font-size: 0.9rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .rn-head-sep { width: 1px; height: 18px; background: var(--border); display: inline-block; } .rn-progress-wrap { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; } .rn-progress-bar { flex: 1; height: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .rn-progress-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #6366f1, #8b5cf6); transition: width 0.25s ease; } .rn-progress-pct { font-size: 0.85rem; font-weight: 600; color: var(--text-dim); white-space: nowrap; } .rn-qcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 28px; } .rn-qcard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .rn-qpill { background: var(--primary-soft); color: var(--primary); padding: 5px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; } .rn-flag { display: inline-flex; align-items: center; gap: 7px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 7px 14px; font-size: 0.85rem; font-weight: 600; color: var(--text-dim); cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; } .rn-flag:hover { border-color: #f59e0b; color: #b45309; } .rn-flag.flagged { background: #fff7ed; border-color: #f59e0b; color: #b45309; } .rn-flag-ic { display: inline-flex; } .rn-flag-ic svg { width: 15px; height: 15px; } .rn-qtitle { margin: 0 0 6px; font-size: 1.15rem; } .rn-qinstr { margin: 0 0 18px; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; } .rn-clozebox { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px; } .rn-clozebox .cloze-para { font-size: 1.08rem; line-height: 2.2; } .rn-tipbox { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 18px 20px; background: var(--primary-soft); border: 1px solid var(--border); border-radius: var(--radius); } .rn-tipbox-ic { flex: none; display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--primary); } .rn-tipbox-ic svg { width: 20px; height: 20px; } .rn-tipbox-title { font-weight: 700; margin-bottom: 3px; } .rn-tipbox-text { color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; } .btn-grad { background: linear-gradient(90deg, #4f46e5, #7c3aed); color: #fff; border: none; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.32); } .btn-grad:hover { filter: brightness(1.06); color: #fff; } .rn-strip-rich { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .rn-strip-rich .rn-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; flex: none; } .rn-strip-body { display: flex; flex-direction: column; line-height: 1.3; } .rn-strip-label { font-size: 0.78rem; color: var(--text-faint); } .rn-strip-rich .rn-strip-cell b { font-size: 1.05rem; } .rn-strip-sub { font-size: 0.72rem; color: var(--text-faint); margin-top: 1px; } /* Mobile "Instructions & tips" bottom sheet. On desktop the wrapper dissolves (display:contents) so the aside / tip / strip lay out exactly as before, and the trigger + sheet chrome are hidden. */ .rn-sheet { display: contents; } .rn-help-btn { display: none; } .rn-sheet-head { display: none; } .rn-sheet-backdrop { display: none; } .rn-questions-btn { display: none; } /* mobile-only (sticky footer) */ .rn-nav-sheet { display: none; } /* mobile-only question navigator sheet */ @media (max-width: 900px) { .rn-grid, .rn-grid.solo { grid-template-columns: 1fr; } .rn-aside { position: static; } .rn-split { grid-template-columns: 1fr; } .rn-passage-col { position: static; max-height: 40vh; } .rn-head2 { flex-direction: column; align-items: flex-start; gap: 10px; } .rn-head-meta { white-space: normal; } /* Compact the top: the sticky runner bar already names the test and the footer shows the position, so the whole header (title/breadcrumb/meta) and the progress bar are dropped on mobile. */ .rn-head { display: none; } .rn-progress-wrap { display: none; } /* Trigger: a compact bulb icon button, right-aligned above the question. */ .rn-help-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; margin: 0 0 12px auto; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-dim); cursor: pointer; } .rn-help-btn-label { display: none; } .rn-help-btn-ic { display: inline-flex; color: var(--primary); } .rn-help-btn svg { width: 20px; height: 20px; } /* The sheet itself: fixed, slides up from the bottom. */ .rn-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--surface); border-top-left-radius: 18px; border-top-right-radius: 18px; box-shadow: 0 -12px 40px rgba(2, 8, 23, 0.22); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } body.rn-sheet-open .rn-sheet { transform: translateY(0); } /* Aux panels stack full-width inside the sheet. */ .rn-sheet .rn-aside { display: flex; } .rn-sheet .rn-tipbox { margin-top: 0; } .rn-sheet .rn-strip-rich { grid-template-columns: 1fr 1fr; margin-top: 14px; } .rn-sheet-head { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; padding: 16px 0 10px; margin-bottom: 6px; background: var(--surface); border-bottom: 1px solid var(--border); } .rn-sheet-title { font-weight: 700; } .rn-sheet-grab { position: absolute; top: 7px; left: 50%; transform: translateX(-50%); width: 38px; height: 4px; border-radius: 2px; background: var(--border); } .rn-sheet-close { width: 34px; height: 34px; flex: none; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text-dim); cursor: pointer; } .rn-sheet-close svg { width: 18px; height: 18px; } .rn-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(15, 23, 42, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.22s; } body.rn-sheet-open .rn-sheet-backdrop, body.rn-nav-open .rn-sheet-backdrop { opacity: 1; visibility: visible; } /* Sticky footer: Previous · Questions · Next. */ .rn-pagenav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border); } .rn-pagenav .rn-pos { display: none; } /* min-height (not vertical padding) sets the button height, so content stays vertically centered even where padding is zeroed for the icon-only buttons. */ .rn-pagenav .btn { flex: 0 0 auto; gap: 6px; min-height: 46px; } .rn-nav-ic { display: inline-flex; } .rn-nav-ic svg { width: 20px; height: 20px; } /* Previous + non-submit Next are icon-only (square). Submit keeps its label. */ .rn-prev .rn-nav-label, .rn-next:not(.rn-is-submit) .rn-nav-label { display: none; } .rn-pagenav .rn-prev, .rn-pagenav .rn-next:not(.rn-is-submit) { width: 48px; padding: 0; justify-content: center; } .rn-pagenav .rn-next.rn-is-submit { padding: 0 18px; } .rn-questions-btn { min-height: 46px; } .rn-questions-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; } .rn-questions-ic { display: inline-flex; color: var(--primary); } .rn-questions-btn svg { width: 18px; height: 18px; } .rn-questions-count { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Reserve space so the fixed footer never covers the last content. */ .rn-main { padding-bottom: 84px; } /* Inline navigators move into the Questions sheet on mobile. */ .rn-nav-wrap, .rn-aside-nav { display: none; } /* Question navigator bottom sheet. */ .rn-nav-sheet { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--surface); border-top-left-radius: 18px; border-top-right-radius: 18px; box-shadow: 0 -12px 40px rgba(2, 8, 23, 0.22); transform: translateY(100%); transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } body.rn-nav-open .rn-nav-sheet { transform: translateY(0); } .rn-nav-sheet-body { padding: 10px 0 4px; } } /* Simplified Practice tab: full-test card + four section cards -------- */ /* ---- Practice Engine: target section -> task type -> start ------------------ Every option shown is backed by real sets; the counts come from the catalog filtered against /api/tests. */ .ref-page.prac-engine { max-width: 720px; gap: 24px; } .prac-head h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.05rem); letter-spacing: -0.03em; } .prac-head p { margin: 6px 0 0; color: var(--text-dim); } .prac-label { margin: 0 0 12px; color: var(--text-dim); font-size: 0.74rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; } .prac-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .prac-target { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 16px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .prac-target:hover { border-color: #c7d2e4; } .prac-target.on { border-color: var(--primary); background: var(--primary-soft); } .prac-target-ic { width: 30px; height: 30px; display: inline-flex; margin-bottom: 4px; color: var(--text-dim); } .prac-target-ic svg { width: 26px; height: 26px; } .prac-target.on .prac-target-ic { color: var(--primary); } .prac-target > b { font-size: 1rem; } .prac-target > small { color: var(--text-dim); font-size: 0.76rem; } .prac-types { display: grid; gap: 10px; } .prac-type { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 16px; border: 1.5px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s; -webkit-tap-highlight-color: transparent; } .prac-type:hover { border-color: #c7d2e4; } .prac-type.on { border-color: var(--primary); background: linear-gradient(110deg, #fbfdff, #eef4ff); } .prac-radio { width: 22px; height: 22px; border: 2px solid #b6c0d1; border-radius: 50%; background: #fff; transition: border-color 0.15s, border-width 0.15s; } .prac-type.on .prac-radio { border: 7px solid var(--primary); } .prac-type-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .prac-type-copy > b { font-size: 0.98rem; } .prac-type-copy > small { color: var(--text-dim); font-size: 0.82rem; } .prac-type-count { color: var(--text-dim); font-size: 0.76rem; white-space: nowrap; } .prac-empty { margin: 0; color: var(--text-dim); font-size: 0.88rem; } .prac-start { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .prac-start-cta { min-height: 56px; padding: 0 30px; font-size: 1.02rem; } .prac-start-meta { margin: 0; color: var(--text-dim); font-size: 0.84rem; } @media (max-width: 640px) { .ref-page.prac-engine { gap: 20px; } .prac-start { align-items: stretch; } .prac-start-cta { width: 100%; } .prac-type { grid-template-columns: 20px minmax(0, 1fr); } .prac-type-count { display: none; } } /* Desktop: the design is a phone screen; stacking it in one 720px column leaves the right half of the page empty. Put the sections beside their task types. */ @media (min-width: 900px) { .ref-page.prac-engine { max-width: 1060px; display: grid; align-content: start; align-items: start; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-areas: "head head" "targets types" "targets start"; gap: 22px 34px; } .prac-head { grid-area: head; } .prac-group-targets { grid-area: targets; } .prac-group-types { grid-area: types; } .prac-start { grid-area: start; flex-direction: row; align-items: center; gap: 16px; } } /* Redesigned results (mobile-first, one centred column) --------------- */ .res-page { display: flex; flex-direction: column; gap: 16px; } .res-page .card { border-radius: 16px; } .res-head { text-align: center; margin: 6px 0 8px; } .res-hero-check { position: relative; width: 74px; height: 74px; margin: 0 auto 14px; display: grid; place-items: center; } .res-check-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--success-soft); } .res-check-badge { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; } .res-check-badge svg { width: 26px; height: 26px; } .res-eyebrow { color: var(--success); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.09em; text-transform: uppercase; } .res-title { margin: 6px 0 0; font-size: clamp(1.7rem, 5vw, 2.1rem); letter-spacing: -0.025em; line-height: 1.12; } .res-stats { padding: 24px; background: var(--primary-soft); border: 1px solid var(--border); } .res-stats-row { display: flex; align-items: stretch; justify-content: center; } .res-stat { flex: 1; text-align: center; min-width: 0; } .res-stat-big { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text); } .res-stat-sub { margin-top: 5px; color: var(--text-dim); font-size: 0.92rem; } .res-stat-div { width: 1px; background: var(--border); margin: 4px 8px; flex: none; } .res-stats-note { margin: 16px 0 0; text-align: center; color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; } .res-focus { display: flex; align-items: center; gap: 16px; padding: 18px 20px; } .res-focus-ic { flex: none; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); } .res-focus-ic svg { width: 26px; height: 26px; } .res-focus-title { font-weight: 700; } .res-focus-text { margin-top: 3px; color: var(--text-dim); font-size: 0.92rem; line-height: 1.4; } .res-review { padding: 0; } .res-review-sum { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer; list-style: none; } .res-review-sum::-webkit-details-marker { display: none; } .res-review-ic { color: var(--primary); display: inline-flex; } .res-review-ic svg { width: 22px; height: 22px; } .res-review-label { font-weight: 700; } .res-review-count { margin-left: auto; color: var(--text-dim); font-size: 0.9rem; } .res-review-chev { color: var(--text-faint); display: inline-flex; transition: transform 0.2s; } .res-review-chev svg { width: 20px; height: 20px; } .res-review[open] .res-review-chev { transform: rotate(180deg); } .res-review[open] .res-review-sum { border-bottom: 1px solid var(--border); } .res-review .review-list { margin: 0; padding: 14px 18px 16px; } .res-upnext { padding: 20px; } .res-upnext-row { display: flex; gap: 16px; align-items: flex-start; } .res-upnext-copy { flex: 1; min-width: 0; } .res-upnext-eyebrow { color: var(--primary); font-weight: 700; font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; } .res-upnext-title { margin: 7px 0 3px; font-size: 1.4rem; letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .res-upnext-sub { margin: 0; color: var(--text-dim); font-size: 0.92rem; } .res-upnext-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .res-upnext-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--text-dim); font-size: 0.82rem; font-weight: 600; } .res-upnext-meta i { display: inline-flex; color: var(--primary); } .res-upnext-meta svg { width: 15px; height: 15px; } .res-upnext-art { flex: none; width: 92px; height: 92px; border-radius: 16px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); } .res-upnext-art svg { width: 42px; height: 42px; } .res-continue { margin-top: 18px; } .res-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; } .btn.res-choose { border: 1.5px solid var(--primary); color: var(--primary); background: transparent; } .btn.res-choose:hover { background: var(--primary-soft); } .btn.res-link { background: transparent; color: var(--primary); border: 0; font-weight: 700; } .btn.res-link:hover { text-decoration: underline; } .res-skill-list { display: flex; flex-direction: column; gap: 12px; } .res-skill-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; } .res-skill-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); } .res-skill-ic svg { width: 22px; height: 22px; } .res-skill-body { flex: 1; min-width: 0; } .res-skill-name { font-weight: 700; } .res-skill-meta { color: var(--text-dim); font-size: 0.85rem; margin-top: 2px; } .res-skill-band { font-weight: 800; color: var(--primary); white-space: nowrap; } .res-skill-band.faint { font-weight: 600; color: var(--text-faint); } .res-pending { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-dim); } /* Per-skill accent for the icon chips. */ .res-focus-ic.reading, .res-skill-ic.reading, .res-upnext-art.reading { background: var(--c-reading-soft); color: var(--c-reading); } .res-focus-ic.listening, .res-skill-ic.listening, .res-upnext-art.listening { background: var(--c-listening-soft); color: var(--c-listening); } .res-focus-ic.speaking, .res-skill-ic.speaking, .res-upnext-art.speaking { background: var(--c-speaking-soft); color: var(--c-speaking); } .res-focus-ic.writing, .res-skill-ic.writing, .res-upnext-art.writing { background: var(--c-writing-soft); color: var(--c-writing); } /* Legacy results (still used by feedback view internals) ------------- */ .score-hero { text-align: center; padding: 28px 20px; } .score-hero .big { font-size: 3rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .score-hero .scale { color: var(--text-faint); margin-top: 6px; } .score-hero .legacy-score { display: inline-flex; margin-top: 10px; padding: 4px 11px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: 0.82rem; font-weight: 700; } .skill-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .skill-tile { text-align: center; } .skill-tile .skill-score { font-size: 1.6rem; font-weight: 700; } .skill-tile .legacy-section-score { margin: 2px 0 5px; color: var(--text-dim); font-size: 0.76rem; } .pending-note { display: inline-flex; align-items: center; gap: 8px; } /* Covers /pricing while a paid checkout hands off to the dashboard. */ .pp-return-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: #fff; } .pp-return-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--text-dim); text-align: center; } .pp-return-overlay p { margin: 0; font-size: 0.98rem; } /* AI writing feedback report ----------------------------------------- */ .badge-ai { background: var(--primary-soft); color: var(--primary-dark); } .feedback-section { margin-top: 8px; } .feedback-section > h2 { margin-bottom: 16px; } .feedback-card + .feedback-card { margin-top: 16px; } .feedback-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .feedback-head h3 { margin: 0; } .feedback-prompt { font-size: 0.95rem; margin: 8px 0 16px; } .feedback-audio { width: 100%; margin: 12px 0 4px; } .criteria { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; } .criterion-head { display: flex; justify-content: space-between; align-items: baseline; } .criterion-name { font-weight: 600; font-size: 0.95rem; } .criterion-score { font-weight: 700; font-variant-numeric: tabular-nums; } .criterion-bar { height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; margin-top: 6px; } .criterion-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; } .criterion-fb { font-size: 0.88rem; margin: 6px 0 0; } .feedback-block { margin-top: 16px; } .feedback-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin-bottom: 6px; } .feedback-list { margin: 0; padding-left: 20px; } .feedback-list li { margin-bottom: 4px; } .feedback-fold { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; } .feedback-fold summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; color: var(--primary); } .feedback-fold summary:hover { text-decoration: underline; } /* Per-question review ------------------------------------------------ */ .review-card > summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; } .review-card > summary:hover { color: var(--primary); } .review-list { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; } .review-q { border: 1px solid var(--border); border-left-width: 3px; border-radius: var(--radius-sm); padding: 12px 14px; } .review-q.correct { border-left-color: var(--success); } .review-q.wrong { border-left-color: var(--danger); } .review-head { display: flex; gap: 10px; align-items: baseline; } .review-num { flex: 0 0 auto; min-width: 24px; height: 24px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--text-dim); } .review-prompt { flex: 1; font-weight: 600; } .review-mark { flex: 0 0 auto; font-weight: 700; font-size: 1.1rem; } .review-mark.ok { color: var(--success); } .review-mark.no { color: var(--danger); } .review-answers { margin: 8px 0 0 34px; font-size: 0.92rem; display: flex; flex-direction: column; gap: 2px; } .review-label { color: var(--text-faint); } .review-good { color: var(--success); font-weight: 600; } .review-bad { color: var(--danger); } .review-explain { margin: 8px 0 0 34px; font-size: 0.9rem; } .feedback-text { white-space: pre-wrap; margin-top: 10px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: 0.95rem; line-height: 1.6; color: var(--text-dim); } .spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (max-width: 600px) { .hero h1 { font-size: 2.5rem; } .nav a.hide-sm { display: none; } } /* ---- Pricing page (/pricing) ---------------------------------------------- Standalone page styled on the landing-page (.landing-page / lp-) system. Three duration-based subscription plans; middle plan is highlighted. */ .pp-hero { text-align: center; padding: 46px 0 8px; } .pp-eyebrow-pill { display: inline-flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 20px; margin-bottom: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); border: 1px solid #edf1f8; box-shadow: 0 16px 35px rgba(26, 45, 88, 0.08); color: #2a3550; font-weight: 700; font-size: 0.9rem; } .pp-dots { display: inline-flex; } .pp-dots i { width: 13px; height: 13px; border-radius: 50%; margin-left: -5px; border: 2px solid #fff; } .pp-dots i:nth-child(1) { background: var(--lp-orange); margin-left: 0; } .pp-dots i:nth-child(2) { background: #f4c64a; } .pp-dots i:nth-child(3) { background: var(--lp-green); } .pp-dots i:nth-child(4) { background: var(--lp-blue); } .pp-hero h1 { margin: 0 auto 14px; max-width: 820px; font-size: 3.1rem; line-height: 1.08; font-weight: 850; color: var(--lp-ink); } .pp-hero h1 span { color: transparent; background: linear-gradient(90deg, var(--lp-blue), var(--lp-purple)); -webkit-background-clip: text; background-clip: text; } .pp-hero p { margin: 0 auto; max-width: 640px; color: var(--lp-muted); font-size: 1.05rem; } /* Cards --------------------------------------------------------------------- */ .pp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; margin-top: 40px; } .pp-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lp-line); border-radius: 18px; padding: 30px 26px; box-shadow: 0 18px 44px rgba(34, 49, 88, 0.07); } .pp-card.pp-featured { border: 2px solid #b9c8ff; box-shadow: 0 26px 60px rgba(40, 104, 246, 0.18); padding-top: 38px; } .pp-ribbon { position: absolute; top: 0; left: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 30px; border-radius: 16px 16px 0 0; background: linear-gradient(135deg, var(--lp-blue), #5b54f2); color: #fff; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.01em; } .pp-ribbon svg { width: 15px; height: 15px; color: #ffe08a; } .pp-save { position: absolute; top: 22px; right: 22px; padding: 4px 11px; border-radius: 999px; background: var(--lp-green); color: #fff; font-weight: 800; font-size: 0.74rem; } .pp-card-head { text-align: center; padding-bottom: 18px; border-bottom: 1px solid var(--lp-line); margin-bottom: 20px; } .pp-card-head h2 { font-size: 1.5rem; font-weight: 850; color: var(--lp-ink); margin: 0 0 4px; } .pp-card-tag { color: var(--lp-muted); font-size: 0.88rem; margin: 0 0 16px; } .pp-price-before { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 5px; } .pp-price-before s { color: #7b8497; font-size: 0.92rem; font-weight: 700; } .pp-price-before span { padding: 3px 8px; border-radius: 999px; background: #e7f8ef; color: #138a55; font-size: 0.72rem; font-weight: 850; } .pp-price { display: inline-flex; align-items: flex-start; justify-content: center; color: var(--lp-blue); line-height: 1; } .pp-cur { font-size: 1.7rem; font-weight: 800; margin-top: 6px; } .pp-amt { font-size: 3.4rem; font-weight: 850; letter-spacing: -0.02em; } .pp-card-note { color: var(--lp-muted); font-size: 0.84rem; margin: 8px 0 0; } .pp-feats { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 13px; } .pp-feats li { position: relative; padding-left: 30px; font-size: 0.92rem; color: #29344e; } .pp-feats li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--lp-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } .pp-feats li.pp-extra-purple::before { background-color: var(--lp-purple); } .pp-feats li.pp-extra-green::before { background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316b978'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z'/%3E%3C/svg%3E"); background-size: 19px; } .pp-feat-extra { font-weight: 700; } .pp-extra-purple { color: var(--lp-purple); } .pp-extra-green { color: var(--lp-green); } /* CTA buttons (shared shape across the page) -------------------------------- */ .pp-cta { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border-radius: 12px; font-weight: 800; font-size: 0.96rem; color: #fff; background: linear-gradient(135deg, var(--lp-blue), #3c37f4); box-shadow: 0 14px 26px rgba(40, 104, 246, 0.24); transition: transform 0.12s ease, box-shadow 0.12s ease; } .pp-cta:hover { color: #fff; transform: translateY(-1px); } .pp-cta svg { width: 18px; height: 18px; } .pp-cta.is-loading { opacity: 0.7; pointer-events: none; } .pp-cta-dark { background: #101935; box-shadow: 0 14px 26px rgba(16, 25, 53, 0.22); } .pp-cta-purple { background: linear-gradient(135deg, var(--lp-purple), #6d4bf6); box-shadow: 0 14px 26px rgba(124, 61, 242, 0.24); } .pp-cta-blue { background: linear-gradient(135deg, var(--lp-blue), #3c37f4); } /* Trust strip --------------------------------------------------------------- */ .pp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 28px; padding: 20px 8px; background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; box-shadow: 0 14px 36px rgba(34, 49, 88, 0.06); } .pp-trust-item { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px 14px; } .pp-trust-item + .pp-trust-item { border-left: 1px solid var(--lp-line); } .pp-trust-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; flex: none; } .pp-trust-ic svg { width: 20px; height: 20px; } .pp-ic-blue { background: #e8efff; color: var(--lp-blue); } .pp-ic-purple { background: #f0e9ff; color: var(--lp-purple); } .pp-ic-green { background: #e1f7ee; color: var(--lp-green); } .pp-ic-orange { background: #ffeede; color: var(--lp-orange); } .pp-trust-item b { display: block; color: var(--lp-ink); font-size: 0.92rem; } .pp-trust-item small { color: var(--lp-muted); font-size: 0.82rem; } /* Comparison table ---------------------------------------------------------- */ .pp-compare { margin-top: 28px; padding: 8px 10px; background: #fff; border: 1px solid var(--lp-line); border-radius: 16px; box-shadow: 0 14px 36px rgba(34, 49, 88, 0.06); overflow-x: auto; } .pp-table { width: 100%; border-collapse: collapse; min-width: 620px; } .pp-table th, .pp-table td { padding: 15px 18px; text-align: center; font-size: 0.92rem; } .pp-table thead th { color: var(--lp-ink); font-weight: 850; font-size: 1rem; border-bottom: 2px solid var(--lp-line); } .pp-table thead th:first-child, .pp-table tbody th { text-align: left; } .pp-table tbody th { font-weight: 600; color: #29344e; display: flex; align-items: center; gap: 10px; } .pp-row-ic { font-size: 1rem; line-height: 1; } .pp-table tbody tr + tr th, .pp-table tbody tr + tr td { border-top: 1px solid #eef1f7; } .pp-table td[data-yes]::before { content: ""; display: inline-block; width: 20px; height: 20px; border-radius: 50%; background: #eaf0ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232868f6' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; } .pp-th-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; vertical-align: middle; } .pp-badge-blue { background: #e8efff; color: var(--lp-blue); } .pp-badge-green { background: #e1f7ee; color: var(--lp-green); } .pp-row-muted { background: #f8faff; } .pp-row-muted th, .pp-row-muted td { color: var(--lp-muted); font-weight: 700; } /* FAQ + final CTA ----------------------------------------------------------- */ .pp-faq { margin-top: 40px; } .pp-faq .lp-faq-list { margin-top: 0; } .pp-final { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; margin: 40px 0; padding: 26px 34px; border-radius: 20px; background: linear-gradient(120deg, #eaf0ff 0%, #f2ecff 100%); border: 1px solid #e2e7fb; } .pp-final-ic { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; color: var(--lp-purple); box-shadow: 0 12px 26px rgba(124, 61, 242, 0.16); } .pp-final-ic svg { width: 40px; height: 40px; } .pp-final-copy h2 { margin: 0; font-size: 1.7rem; font-weight: 850; color: var(--lp-ink); line-height: 1.15; } .pp-final-copy h2 span { color: var(--lp-blue); } .pp-final-action { display: grid; justify-items: center; gap: 8px; } .pp-final-action .pp-cta { width: 100%; min-width: 180px; } .pp-final-action small { color: var(--lp-muted); font-size: 0.82rem; } .pp-active-note { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 14px; } @media (max-width: 900px) { .pp-hero h1 { font-size: 2.3rem; } .pp-hero h1 br, .pp-hero p br { display: none; } .pp-cards { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } .pp-featured { order: -1; } .pp-trust { grid-template-columns: 1fr 1fr; gap: 16px 0; } .pp-trust-item:nth-child(odd) { border-left: 0; } .pp-trust-item:nth-child(3), .pp-trust-item:nth-child(4) { border-top: 1px solid var(--lp-line); padding-top: 16px; } .pp-final { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 16px; } .pp-final-copy h2 br { display: none; } }