/* ========================================================================== Talkino — Landing Design System Single-page marketing site. No framework, no CDN: every token lives here. Sections are ordered: tokens → base → primitives → layout → components. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Font (self-hosted variable Vazirmatn — Google Fonts is unreliable in IR) -------------------------------------------------------------------------- */ @font-face { font-family: 'Vazirmatn'; src: url('/fonts/Vazirmatn[wght].woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; font-style: normal; } /* -------------------------------------------------------------------------- 2. Tokens -------------------------------------------------------------------------- */ :root { /* brand */ --blue-50: #EEF4FF; --blue-100: #DCE7FF; --blue-300: #7FA8FF; --blue-500: #2563EB; --blue-600: #1D4ED8; --blue-700: #1E3A8A; --orange-50: #FFF3E9; --orange-300: #FDBA74; --orange-500: #F97316; --orange-600: #EA580C; --mint-50: #E7F8F2; --mint-500: #10B981; --mint-600: #059669; --violet-500: #8B5CF6; --rose-500: #F43F5E; --amber-500: #F59E0B; /* surfaces */ --bg: #F4F8FE; --bg-alt: #EAF1FC; --surface: #FFFFFF; --surface-2: #F7FAFF; --border: #E3EBF8; --border-2: #D2DFF2; /* ink */ --ink: #0A1730; --ink-2: #47597A; --ink-3: #8496B2; /* semantic */ --accent: var(--orange-500); --accent-soft: var(--orange-50); --primary: var(--blue-500); --primary-soft: var(--blue-50); --success: var(--mint-500); --success-soft: var(--mint-50); /* effects */ --grid-line: rgba(37, 99, 235, .055); --glass-bg: rgba(255, 255, 255, .74); --glass-border: rgba(255, 255, 255, .8); --shadow-xs: 0 1px 2px rgba(10, 23, 48, .05); --shadow-sm: 0 2px 4px rgba(10, 23, 48, .05), 0 4px 12px rgba(10, 23, 48, .05); --shadow-md: 0 8px 28px rgba(10, 23, 48, .09); --shadow-lg: 0 24px 60px rgba(10, 23, 48, .13); --shadow-xl: 0 40px 90px rgba(10, 23, 48, .18); --glow-primary: 0 10px 30px -6px rgba(37, 99, 235, .5); --glow-accent: 0 10px 30px -6px rgba(249, 115, 22, .5); /* radii */ --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px; /* rhythm */ --section-y: clamp(72px, 9vw, 128px); --gutter: clamp(18px, 4vw, 28px); --maxw: 1200px; /* motion */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); color-scheme: light; } html.dark { --bg: #060D1C; --bg-alt: #0A1428; --surface: #0F1D36; --surface-2: #14243F; --border: #1F3155; --border-2: #2A3F66; --ink: #E9F1FC; --ink-2: #9CAFCD; --ink-3: #62789C; --blue-50: rgba(59, 130, 246, .13); --blue-500: #4F8DF7; --blue-600: #2563EB; --orange-50: rgba(249, 115, 22, .14); --orange-500: #FB923C; --mint-50: rgba(16, 185, 129, .14); --mint-500: #34D399; --grid-line: rgba(255, 255, 255, .04); --glass-bg: rgba(15, 29, 54, .72); --glass-border: rgba(255, 255, 255, .08); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 2px 4px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .35); --shadow-md: 0 8px 28px rgba(0, 0, 0, .45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55); --shadow-xl: 0 40px 90px rgba(0, 0, 0, .6); color-scheme: dark; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* `overflow-x: hidden` on alone does not contain overflow in an RTL document — it shifts the initial scroll position instead. Clip on both. */ overflow-x: clip; /* sticky header height + breathing room, so anchors never land under the nav */ scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 16px; line-height: 1.75; background: var(--bg); color: var(--ink); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .4s var(--ease-out), color .4s var(--ease-out); } h1, h2, h3, h4 { margin: 0; line-height: 1.28; font-weight: 800; letter-spacing: -.02em; } p { margin: 0; } figure, figcaption { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, svg, picture { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } /* component display rules (.btn, .chip, …) would otherwise beat [hidden] */ [hidden] { display: none !important; } :where(a, button, summary, [tabindex]):focus-visible { outline: 2px solid var(--blue-500); outline-offset: 3px; border-radius: 8px; } ::selection { background: var(--blue-500); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-alt); } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); border: 2px solid var(--bg-alt); } ::-webkit-scrollbar-thumb:hover { background: var(--blue-500); } /* Numbers inside Persian copy read better with tabular figures */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .ltr { direction: ltr; text-align: left; unicode-bidi: isolate; } /* -------------------------------------------------------------------------- 4. Layout primitives -------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: 820px; } .section { position: relative; padding-block: var(--section-y); overflow: hidden; } .section-alt { background: var(--bg-alt); } .section-alt::before, .section::after { content: none; } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } .grid { display: grid; gap: 20px; } .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .split-wide-text { grid-template-columns: 1.08fr .92fr; } /* -------------------------------------------------------------------------- 5. Typography helpers -------------------------------------------------------------------------- */ .display { font-size: clamp(2.15rem, 1.15rem + 4.4vw, 3.85rem); font-weight: 900; letter-spacing: -.035em; /* roomy enough that the hand-drawn swash under line 1 never touches line 2 */ line-height: 1.42; } .h2 { font-size: clamp(1.65rem, 1.05rem + 2.2vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.22; } .h3 { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); font-weight: 800; } .lead { font-size: clamp(1rem, .95rem + .35vw, 1.16rem); line-height: 2; color: var(--ink-2); } .small { font-size: .875rem; line-height: 1.85; } .tiny { font-size: .78rem; line-height: 1.7; } .ink { color: var(--ink); } .ink-2 { color: var(--ink-2); } .ink-3 { color: var(--ink-3); } .grad { background: linear-gradient(100deg, var(--blue-500) 5%, var(--violet-500) 45%, var(--orange-500) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .accent { color: var(--orange-500); } /* Hand-drawn underline used on the hero's key phrase */ .underline-swash { position: relative; display: inline-block; white-space: nowrap; } .underline-swash svg { position: absolute; inset-inline: -6px; bottom: -.1em; width: calc(100% + 12px); height: .3em; overflow: visible; } .underline-swash path { fill: none; stroke: var(--orange-500); stroke-width: 8; opacity: .75; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 420; } .underline-swash.in path { animation: draw 1s var(--ease-out) .45s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } /* -------------------------------------------------------------------------- 6. Section headers -------------------------------------------------------------------------- */ .sec-head { text-align: center; max-width: 660px; margin-inline: auto; margin-bottom: clamp(36px, 5vw, 60px); } .sec-head .lead { margin-top: 16px; } .sec-head .h2 { margin-top: 16px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 7px 15px; border-radius: var(--r-full); font-size: .8rem; font-weight: 800; line-height: 1; background: var(--blue-50); color: var(--blue-500); border: 1px solid transparent; } .eyebrow-accent { background: var(--orange-50); color: var(--orange-600); } .eyebrow-mint { background: var(--mint-50); color: var(--mint-600); } html.dark .eyebrow-accent { color: var(--orange-500); } html.dark .eyebrow-mint { color: var(--mint-500); } /* -------------------------------------------------------------------------- 7. Cards & surfaces -------------------------------------------------------------------------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); } .card-pad { padding: clamp(22px, 2.4vw, 30px); } /* Lift and tilt share one transform. JS writes --rx/--ry from the pointer; the hover rule only moves --lift, so the two never fight over `transform`. */ .card-lift { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); } .card-lift:hover { --lift: -6px; box-shadow: var(--shadow-md); border-color: var(--border-2); } .glass { background: var(--glass-bg); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border: 1px solid var(--glass-border); } .icon-tile { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.4rem; flex-shrink: 0; background: var(--blue-50); color: var(--blue-500); } .icon-tile-accent { background: var(--orange-50); color: var(--orange-600); } .icon-tile-mint { background: var(--mint-50); color: var(--mint-600); } .icon-tile-violet { background: rgba(139, 92, 246, .12); color: var(--violet-500); } .icon-tile-rose { background: rgba(244, 63, 94, .12); color: var(--rose-500); } .icon-tile-amber { background: rgba(245, 158, 11, .14); color: var(--amber-500); } .icon-tile svg { width: 25px; height: 25px; } /* Shared icon primitive — sized in `em` so it always matches its text. */ .ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; vertical-align: -.2em; } .icon-tile .ic { stroke-width: 1.7; } .chip .ic { width: 1em; height: 1em; } .streak-day .dot .ic { width: 18px; height: 18px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); font-size: .84rem; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: border-color .2s, color .2s, transform .2s var(--ease-out); } .chip:hover { border-color: var(--blue-500); color: var(--blue-500); transform: translateY(-2px); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-full); font-size: .7rem; font-weight: 800; line-height: 1.6; } .pill-easy { background: var(--mint-50); color: var(--mint-600); } .pill-mid { background: rgba(245,158,11,.14); color: #B45309; } .pill-hard { background: rgba(244,63,94,.13); color: var(--rose-500); } html.dark .pill-easy { color: var(--mint-500); } html.dark .pill-mid { color: var(--amber-500); } /* -------------------------------------------------------------------------- 8. Buttons -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 14px 26px; border-radius: 15px; font-size: .95rem; font-weight: 800; line-height: 1.4; white-space: nowrap; transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background-color .22s, border-color .22s, color .22s; } .btn svg { width: 19px; height: 19px; flex-shrink: 0; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: var(--glow-primary); } .btn-primary:hover { box-shadow: 0 16px 40px -8px rgba(37, 99, 235, .6); } .btn-accent { background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); color: #fff; box-shadow: var(--glow-accent); } .btn-accent:hover { box-shadow: 0 16px 40px -8px rgba(249, 115, 22, .6); } .btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border-2); box-shadow: var(--shadow-xs); } .btn-ghost:hover { border-color: var(--blue-500); color: var(--blue-500); } .btn-lg { padding: 17px 34px; font-size: 1rem; border-radius: 17px; } .btn-block { width: 100%; } /* -------------------------------------------------------------------------- 9. Store buttons (download section + hero) -------------------------------------------------------------------------- */ .store-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px; border-radius: var(--r-md); background: var(--ink); color: var(--surface); border: 1px solid transparent; box-shadow: var(--shadow-sm); transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out); position: relative; } html.dark .store-btn { background: #F3F7FF; color: #0A1730; } .store-btn:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .store-btn svg { width: 26px; height: 26px; flex-shrink: 0; } .store-btn small { display: block; font-size: .68rem; opacity: .72; font-weight: 500; line-height: 1.4; } .store-btn b { display: block; font-size: .98rem; font-weight: 900; line-height: 1.4; } .store-btn-soft { background: var(--surface); color: var(--ink); border-color: var(--border-2); } html.dark .store-btn-soft { background: var(--surface); color: var(--ink); border-color: var(--border-2); } .badge-soon { position: absolute; top: -9px; inset-inline-start: 12px; background: var(--orange-500); color: #fff; font-size: .6rem; font-weight: 800; padding: 2px 8px; border-radius: var(--r-full); letter-spacing: .01em; } /* -------------------------------------------------------------------------- 10. Decorative background art -------------------------------------------------------------------------- */ .blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; } .grid-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 78%); pointer-events: none; z-index: 0; } .above { position: relative; z-index: 1; } /* -------------------------------------------------------------------------- 11. Navbar -------------------------------------------------------------------------- */ #nav { position: fixed; inset-inline: 0; top: 0; z-index: 200; transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; } #nav.scrolled { background: var(--glass-bg); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 var(--border), 0 8px 30px -18px rgba(10, 23, 48, .3); } .nav-inner { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .brand { display: inline-flex; align-items: center; gap: 10px; } .brand-mark { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-500), var(--orange-500)); box-shadow: var(--glow-primary); flex-shrink: 0; } .brand-mark svg { width: 22px; height: 22px; } .brand-name { font-size: 1.28rem; font-weight: 900; letter-spacing: -.03em; } .nav-links { display: flex; align-items: center; gap: 2px; } .nav-link { padding: 9px 14px; border-radius: 11px; font-size: .89rem; font-weight: 600; color: var(--ink-2); transition: color .2s, background-color .2s; } .nav-link:hover, .nav-link.active { color: var(--blue-500); background: var(--blue-50); } .icon-btn { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; border: 1px solid var(--border-2); background: var(--surface); color: var(--ink); transition: border-color .2s, color .2s, transform .2s var(--ease-out); } .icon-btn:hover { border-color: var(--blue-500); color: var(--blue-500); transform: translateY(-2px); } .icon-btn svg { width: 19px; height: 19px; } #scroll-progress { position: absolute; inset-inline-start: 0; bottom: 0; height: 2.5px; width: 0; background: linear-gradient(90deg, var(--blue-500), var(--orange-500)); transition: width .12s linear; } /* mobile drawer */ #nav-toggle { display: none; } #mobile-menu { position: fixed; inset: 72px 0 auto; z-index: 199; padding: 16px var(--gutter) 24px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 4px; } #mobile-menu.open { display: flex; animation: slideDown .3s var(--ease-out); } #mobile-menu .nav-link { padding: 13px 14px; font-size: 1rem; } @keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } } /* -------------------------------------------------------------------------- 12. Hero -------------------------------------------------------------------------- */ #hero { position: relative; overflow: hidden; padding-block: clamp(104px, 12vw, 152px) clamp(64px, 8vw, 104px); background: radial-gradient(ellipse 80% 60% at 78% 8%, rgba(37, 99, 235, .16), transparent 62%), radial-gradient(ellipse 70% 60% at 12% 90%, rgba(249, 115, 22, .13), transparent 62%), linear-gradient(170deg, var(--bg-alt), var(--bg) 55%); } /* slow-drifting colour field behind the hero — three blurred blobs, GPU-cheap */ .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(80px); will-change: transform; animation: auroraDrift 26s ease-in-out infinite; } .aurora i:nth-child(1) { width: 34vw; height: 34vw; background: #2563EB; opacity: .17; top: -10%; inset-inline-end: -6%; } .aurora i:nth-child(2) { width: 28vw; height: 28vw; background: #F97316; opacity: .13; bottom: -14%; inset-inline-start: -4%; animation-delay: -9s; } .aurora i:nth-child(3) { width: 22vw; height: 22vw; background: #8B5CF6; opacity: .1; top: 38%; inset-inline-start: 40%; animation-delay: -17s; } html.dark .aurora i:nth-child(1) { opacity: .24; } html.dark .aurora i:nth-child(2) { opacity: .18; } html.dark .aurora i:nth-child(3) { opacity: .15; } @keyframes auroraDrift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(4%, 6%, 0) scale(1.12); } 66% { transform: translate3d(-5%, -4%, 0) scale(.94); } } .hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 60px); align-items: center; } /* -------------------------------------------------------------------------- 12b. Hero stage — the mascot is a cut-out PNG, so it can be centred on its own light instead of sitting inside a cropped banner box. -------------------------------------------------------------------------- */ .hero-stage { position: relative; display: grid; place-items: center; min-height: clamp(340px, 40vw, 520px); --px: 0; --py: 0; } .stage-glow { position: absolute; width: min(440px, 96%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgba(37, 99, 235, .34), rgba(249, 115, 22, .18) 46%, transparent 68%); filter: blur(26px); animation: breathe 7s ease-in-out infinite; } .stage-ring { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border-2); opacity: .7; pointer-events: none; } .stage-ring.r1 { width: min(310px, 66%); } .stage-ring.r2 { width: min(400px, 84%); border-style: dashed; opacity: .5; } .stage-ring.r3 { width: min(490px, 100%); opacity: .32; } /* one satellite dot per orbit; the wrapper spins, the dot rides the rim */ .orbit { position: absolute; aspect-ratio: 1; animation: spin 26s linear infinite; } .orbit.o1 { width: min(310px, 66%); } .orbit.o2 { width: min(400px, 84%); animation-duration: 38s; animation-direction: reverse; } .orbit i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-inline-start: -5px; border-radius: 50%; background: var(--orange-500); box-shadow: 0 0 14px 2px rgba(249, 115, 22, .6); } .orbit.o2 i { background: var(--blue-500); box-shadow: 0 0 14px 2px rgba(37, 99, 235, .55); } @keyframes spin { to { transform: rotate(360deg); } } @keyframes breathe { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } } /* pointer parallax lives on the wrapper so the idle float can stay a keyframe */ .mascot-wrap { position: relative; z-index: 3; width: min(370px, 78%); transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -10px), 0); transition: transform .5s var(--ease-out); } .hero-mascot { width: 100%; height: auto; filter: drop-shadow(0 26px 34px rgba(10, 23, 48, .3)); animation: floatY 7s ease-in-out infinite; } html.dark .hero-mascot { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .65)); } /* the cut-out's bottom edge is feathered; this ellipse reads as its ground */ .stage-plate { position: absolute; bottom: 4%; width: min(320px, 68%); height: 34px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(10, 23, 48, .3), transparent 70%); filter: blur(9px); z-index: 2; } html.dark .stage-plate { background: radial-gradient(ellipse at center, rgba(0, 0, 0, .6), transparent 70%); } /* Chips ride deeper than the mascot. The wrapper owns the pointer parallax so the card itself keeps its idle bob keyframe — two transforms, two elements. */ .chip-float { position: absolute; z-index: 5; transform: translate3d(calc(var(--px) * -1 * var(--depth, 22px)), calc(var(--py) * -1 * var(--depth, 22px)), 0); transition: transform .5s var(--ease-out); } .chip-float .float-card { position: relative; inset: auto; } .hero-stats { display: inline-flex; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); } .hero-stats > div { padding: 13px clamp(14px, 2.4vw, 26px); text-align: center; } .hero-stats > div + div { border-inline-start: 1px solid var(--border); } .hero-stats .num { font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); font-weight: 900; line-height: 1.3; } .hero-stats .lbl { font-size: .7rem; color: var(--ink-3); line-height: 1.5; } /* floating cards over the artwork */ .float-card { position: absolute; z-index: 3; border-radius: var(--r-md); padding: 10px 14px; display: flex; align-items: center; gap: 9px; font-size: .8rem; font-weight: 700; box-shadow: var(--shadow-md); white-space: nowrap; } .dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--mint-500); box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); animation: pulseDot 1.9s infinite; flex-shrink: 0; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); } 70% { box-shadow: 0 0 0 9px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* -------------------------------------------------------------------------- 13. Phone mockups -------------------------------------------------------------------------- */ .phone { width: 100%; max-width: 276px; background: #05090F; border: 8px solid #0B111C; border-radius: 44px; box-shadow: var(--shadow-xl), inset 0 0 0 2px rgba(255, 255, 255, .07); overflow: hidden; position: relative; z-index: 2; flex-shrink: 0; } .phone::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 108px; height: 24px; background: #05090F; border-radius: 0 0 15px 15px; z-index: 10; } .phone-screen { background: linear-gradient(180deg, #0C1B33, #081123); min-height: 528px; display: flex; flex-direction: column; padding: 38px 12px 14px; gap: 11px; color: #fff; } .phone-screen .p-title { font-size: .78rem; font-weight: 800; } .phone-screen .p-sub { font-size: .62rem; color: #7E90AD; } .p-panel { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 14px; padding: 11px 12px; } .p-panel-blue { background: rgba(37, 99, 235, .16); border-color: rgba(79, 141, 247, .34); } .p-panel-accent { background: rgba(249, 115, 22, .13); border-color: rgba(249, 115, 22, .28); } .p-bar { height: 6px; background: rgba(255, 255, 255, .1); border-radius: var(--r-full); overflow: hidden; } .p-bar > span { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--blue-500), var(--mint-500)); width: 0; transition: width 1.4s var(--ease-out); } .in .p-bar > span { width: var(--w, 60%); } /* Light phone screens — these mirror the real app, which is a light UI. Colours are hard-coded (not themed) because a mockup must look like the app regardless of which theme the visitor is browsing the site in. */ .phone-light .phone-screen { background: #F6F9FE; color: #0A1730; padding: 34px 10px 12px; gap: 9px; } .ps-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 2px; } .ps-title { font-size: .8rem; font-weight: 800; color: #0A1730; } .ps-sub { font-size: .58rem; color: #7C8CA6; line-height: 1.6; } .ps-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #fff; border: 1.5px solid #FCD9B6; font-size: .62rem; font-weight: 800; color: #0A1730; } .ps-card { background: #fff; border: 1px solid #E9EFFA; border-radius: 14px; padding: 10px 11px; box-shadow: 0 1px 3px rgba(10, 23, 48, .05); } .ps-bar { height: 5px; background: #E7EEFB; border-radius: 999px; overflow: hidden; } .ps-bar > span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2563EB, #60A5FA); transition: width 1.4s var(--ease-out); } .in .ps-bar > span { width: var(--w, 0%); } .ps-num { width: 27px; height: 27px; border-radius: 999px; display: grid; place-items: center; border: 1.5px solid #BBD2F8; color: #2563EB; font-size: .64rem; font-weight: 800; flex-shrink: 0; } .ps-pct { font-size: .55rem; font-weight: 800; color: #2563EB; background: #EAF1FF; border-radius: 999px; padding: 2px 7px; flex-shrink: 0; } .ps-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .52rem; font-weight: 800; border: 1px solid; } .ps-pill-hard { color: #E5484D; border-color: #F7C3C5; background: #FEF2F2; } .ps-pill-mid { color: #B4700A; border-color: #F5D9A8; background: #FFFBEB; } .ps-pill-easy { color: #0E8A5F; border-color: #A9E0CB; background: #ECFDF5; } .ps-pill-idle { color: #7C8CA6; border-color: #E3EAF6; background: #F4F7FC; } /* the dark banner card at the top of the learning-path screen */ .ps-banner { position: relative; border-radius: 14px; overflow: hidden; background: linear-gradient(140deg, #10203E, #061020); padding: 11px; color: #fff; } .ps-banner-stats { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: rgba(0, 0, 0, .34); border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; padding: 7px 9px; margin-top: 9px; } .ps-ring { width: 38px; height: 38px; border-radius: 999px; border: 3px solid rgba(255, 255, 255, .14); display: grid; place-items: center; font-size: .58rem; font-weight: 800; flex-shrink: 0; } /* scenario row inside the simulator screen */ .ps-scenario { display: flex; gap: 9px; align-items: stretch; } .ps-scenario img { width: 62px; height: 62px; border-radius: 11px; object-fit: cover; flex-shrink: 0; } .ps-tabs { display: flex; gap: 6px; overflow: hidden; } .ps-tab { padding: 5px 11px; border-radius: 999px; background: #fff; border: 1px solid #E9EFFA; font-size: .58rem; font-weight: 700; color: #47597A; white-space: nowrap; flex-shrink: 0; } .ps-tab-on { background: linear-gradient(135deg, #F97316, #EA580C); color: #fff; border-color: transparent; } .chat-peek { position: absolute; z-index: 5; width: 208px; inset-inline-end: -9%; bottom: 22%; animation-delay: 1.2s; } .ps-cta { background: linear-gradient(135deg, #2563EB, #4F46E5); color: #fff; border-radius: 12px; padding: 9px; text-align: center; font-size: .66rem; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; } /* -------------------------------------------------------------------------- 14. Voice / avatar animations -------------------------------------------------------------------------- */ .wave-group { display: flex; align-items: flex-end; gap: 3px; } .wave { width: 3px; border-radius: var(--r-full); background: var(--orange-500); transform-origin: bottom; animation: waveform 1s ease-in-out infinite; } @keyframes waveform { 0%, 100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } } .ring-pulse { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--orange-500); animation: ringPulse 2.6s var(--ease-out) infinite; pointer-events: none; } .ring-pulse.d2 { animation-delay: .9s; border-color: var(--blue-500); } @keyframes ringPulse { 0% { transform: scale(.86); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes blinkEye { 0%, 7%, 100% { transform: scaleY(1); } 3.5% { transform: scaleY(.08); } } .float-y { animation: floatY 6.5s ease-in-out infinite; } .float-y2 { animation: floatY 8.5s ease-in-out infinite; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-13px); } } .wiggle { display: inline-block; transform-origin: 70% 75%; animation: wiggle 2.6s ease-in-out infinite; } @keyframes wiggle { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-15deg); } 85% { transform: rotate(15deg); } } /* -------------------------------------------------------------------------- 15. Reveal on scroll -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; } .reveal[data-delay="5"] { transition-delay: .4s; } /* -------------------------------------------------------------------------- 16. Method tabs (learning path ↔ simulator) -------------------------------------------------------------------------- */ .tabs { display: inline-flex; padding: 5px; gap: 4px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xs); } .tab { padding: 10px 22px; border-radius: var(--r-full); font-size: .9rem; font-weight: 700; color: var(--ink-2); transition: background-color .28s var(--ease-out), color .28s, box-shadow .28s; } .tab[aria-selected="true"] { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: var(--glow-primary); } .tab-panel[hidden] { display: none; } .tab-panel { animation: fadeUp .5s var(--ease-out); } @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } } /* -------------------------------------------------------------------------- 17. Level ladder (A0 → B2) -------------------------------------------------------------------------- */ .ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; position: relative; } .ladder::before { content: ''; position: absolute; inset-inline: 8%; top: 34px; height: 3px; background: linear-gradient(90deg, var(--blue-500), var(--violet-500), var(--orange-500)); opacity: .28; border-radius: var(--r-full); } .rung { text-align: center; position: relative; z-index: 1; } .rung img { width: 68px; height: 68px; margin-inline: auto; object-fit: contain; filter: drop-shadow(0 8px 16px rgba(10, 23, 48, .18)); transition: transform .35s var(--ease-spring); } .rung:hover img { transform: translateY(-6px) scale(1.06); } .rung .code { font-weight: 900; font-size: 1rem; margin-top: 10px; } .rung .desc { font-size: .78rem; color: var(--ink-3); line-height: 1.6; } /* -------------------------------------------------------------------------- 18. Scenario marquee -------------------------------------------------------------------------- */ .marquee { position: relative; overflow: hidden; /* A max-content track inside an RTL parent is pinned to the parent's right edge, which pushes the whole strip out of view. Keep the strip LTR (the captions opt back into RTL) so the -50% loop stays inside the frame. */ direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: 16px; width: max-content; /* The -50% loop assumes the track grows rightwards. In an RTL container it grows leftwards instead and the strip empties out, so pin the track LTR and restore direction on the captions. */ direction: ltr; animation: marquee var(--dur, 60s) linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-rtl .marquee-track { animation-direction: reverse; } @keyframes marquee { to { transform: translateX(-50%); } } .scenario-card { position: relative; width: 224px; aspect-ratio: 1; border-radius: var(--r-lg); overflow: hidden; flex-shrink: 0; box-shadow: var(--shadow-sm); border: 1px solid var(--border); background: var(--surface-2); } .scenario-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .scenario-card:hover img { transform: scale(1.07); } .scenario-card figcaption { direction: rtl; position: absolute; inset-inline: 0; bottom: 0; padding: 26px 14px 13px; background: linear-gradient(to top, rgba(4, 10, 22, .92), rgba(4, 10, 22, .55) 55%, transparent); color: #fff; font-size: .84rem; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .scenario-card figcaption > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* -------------------------------------------------------------------------- 19. Word-review interactive demo -------------------------------------------------------------------------- */ .quiz { max-width: 520px; margin-inline: auto; align-self: start; } .quiz-sentence { font-size: clamp(1rem, .95rem + .6vw, 1.3rem); font-weight: 600; line-height: 2.1; direction: ltr; text-align: left; margin-bottom: 22px; } .quiz-blank { display: inline-block; min-width: 118px; text-align: center; border-bottom: 2.5px dashed var(--blue-300); /* the placeholder is a nbsp run, so the dashed border is the only rule */ letter-spacing: .04em; color: var(--blue-500); font-weight: 800; transition: color .3s, border-color .3s; } .quiz-blank.filled { border-bottom-style: solid; } .quiz-blank.ok { color: var(--mint-500); border-color: var(--mint-500); } .quiz-blank.bad { color: var(--rose-500); border-color: var(--rose-500); } .quiz-opts { display: grid; gap: 10px; } .quiz-opt { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-radius: var(--r-md); border: 1.5px solid var(--border); background: var(--surface); text-align: start; font-size: .95rem; font-weight: 700; direction: ltr; transition: border-color .25s, background-color .25s, transform .25s var(--ease-out); } .quiz-opt:hover:not(:disabled) { border-color: var(--blue-500); transform: translateX(4px); } .quiz-opt .key { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: .74rem; font-weight: 800; color: var(--ink-3); flex-shrink: 0; } .quiz-opt.correct { border-color: var(--mint-500); background: var(--mint-50); } .quiz-opt.correct .key { background: var(--mint-500); color: #fff; border-color: transparent; } .quiz-opt.wrong { border-color: var(--rose-500); background: rgba(244, 63, 94, .08); } .quiz-opt:disabled { cursor: default; } .quiz-feedback { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); font-size: .9rem; font-weight: 700; display: none; animation: fadeUp .4s var(--ease-out); } .quiz-feedback.show { display: block; } .quiz-feedback.ok { background: var(--mint-50); color: var(--mint-600); } .quiz-feedback.bad { background: rgba(244, 63, 94, .1); color: var(--rose-500); } html.dark .quiz-feedback.ok { color: var(--mint-500); } /* -------------------------------------------------------------------------- 20. Gamification widgets -------------------------------------------------------------------------- */ .ring-stat { position: relative; width: 108px; height: 108px; margin-inline: auto; } .ring-stat svg { transform: rotate(-90deg); width: 100%; height: 100%; } .ring-stat .track { stroke: var(--border); } .ring-stat .bar { stroke: url(#ringGrad); stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease-out); } .ring-stat .val { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.35rem; font-weight: 900; } .streak-week { display: flex; justify-content: space-between; gap: 6px; } .streak-day { text-align: center; flex: 1; } .streak-day .dot { width: 100%; aspect-ratio: 1; max-width: 38px; margin-inline: auto; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); border: 1.5px solid var(--border); font-size: .9rem; transition: transform .3s var(--ease-spring); } .streak-day.done .dot { background: linear-gradient(135deg, var(--orange-500), var(--orange-600)); border-color: transparent; color: #fff; box-shadow: var(--glow-accent); } .streak-day.today .dot { border-color: var(--blue-500); border-style: dashed; } .streak-day .lbl { font-size: .66rem; color: var(--ink-3); margin-top: 6px; } .rank-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); } .rank-row.me { background: var(--blue-50); border-color: var(--blue-300); } .rank-row .pos { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: .8rem; font-weight: 900; background: var(--surface); border: 1px solid var(--border); flex-shrink: 0; } .rank-row.gold .pos { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #fff; border-color: transparent; } .rank-row.silver .pos { background: linear-gradient(135deg, #CBD5E1, #94A3B8); color: #fff; border-color: transparent; } .rank-row.bronze .pos { background: linear-gradient(135deg, #D9A066, #B45309); color: #fff; border-color: transparent; } /* -------------------------------------------------------------------------- 21. Pricing -------------------------------------------------------------------------- */ .plan { display: flex; flex-direction: column; height: 100%; } .plan-featured { border-color: var(--blue-500); box-shadow: var(--shadow-lg), 0 0 0 4px var(--blue-50); } .plan-flag { position: absolute; top: -14px; inset-inline-end: 24px; background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); color: #fff; font-size: .72rem; font-weight: 800; padding: 5px 14px; border-radius: var(--r-full); box-shadow: var(--glow-primary); } .price { display: flex; align-items: baseline; gap: 7px; margin-block: 14px 6px; } .price .amount { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); font-weight: 900; letter-spacing: -.03em; } .price .unit { font-size: .85rem; color: var(--ink-3); font-weight: 600; } .price .was { font-size: .9rem; color: var(--ink-3); text-decoration: line-through; } .plan-features { display: flex; flex-direction: column; gap: 11px; margin-block: 20px; flex: 1; } .plan-features li { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.8; } .plan-features svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 5px; color: var(--mint-500); } .plan-features li.off { color: var(--ink-3); } .plan-features li.off svg { color: var(--ink-3); opacity: .6; } /* -------------------------------------------------------------------------- 22. Testimonials -------------------------------------------------------------------------- */ .quote-card { display: flex; flex-direction: column; gap: 14px; height: 100%; } .stars { display: flex; gap: 2px; color: var(--amber-500); } .stars svg { width: 16px; height: 16px; } .quote-author { display: flex; align-items: center; gap: 11px; margin-top: auto; } .quote-author .av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-500), var(--orange-500)); color: #fff; font-weight: 900; font-size: .9rem; flex-shrink: 0; } /* -------------------------------------------------------------------------- 23. FAQ accordion -------------------------------------------------------------------------- */ .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 1rem; font-weight: 700; cursor: pointer; list-style: none; transition: color .2s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--blue-500); } .faq-item summary .plus { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--blue-50); color: var(--blue-500); flex-shrink: 0; transition: transform .35s var(--ease-out), background-color .25s; } .faq-item[open] summary .plus { transform: rotate(45deg); background: var(--orange-50); color: var(--orange-600); } .faq-item .answer { padding: 0 4px 22px; color: var(--ink-2); font-size: .94rem; line-height: 2; } .faq-item[open] .answer { animation: fadeUp .35s var(--ease-out); } /* -------------------------------------------------------------------------- 24. Download section -------------------------------------------------------------------------- */ #download { position: relative; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 20% 0%, rgba(37, 99, 235, .2), transparent 60%), radial-gradient(ellipse 60% 60% at 85% 100%, rgba(249, 115, 22, .18), transparent 60%), linear-gradient(160deg, var(--bg-alt), var(--bg)); } .download-card { position: relative; border-radius: var(--r-xl); padding: clamp(28px, 4vw, 56px); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xl); overflow: hidden; } .download-card::before { content: ''; position: absolute; inset-inline: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blue-500), var(--violet-500), var(--orange-500)); } .store-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .step-num { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 900; font-size: .92rem; background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; flex-shrink: 0; box-shadow: var(--glow-primary); } /* -------------------------------------------------------------------------- 25. Footer -------------------------------------------------------------------------- */ footer { background: var(--bg-alt); border-top: 1px solid var(--border); padding-block: 52px 28px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 34px; border-bottom: 1px solid var(--border); } .footer-grid h4 { font-size: .92rem; margin-bottom: 14px; } .footer-grid a { display: block; font-size: .88rem; color: var(--ink-2); padding-block: 6px; transition: color .2s, transform .2s var(--ease-out); } .footer-grid a:hover { color: var(--blue-500); transform: translateX(-4px); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; font-size: .8rem; color: var(--ink-3); } /* -------------------------------------------------------------------------- 25b. Device chrome — a mockup only reads as "the app" if the frame around it reads as a phone: status bar, notch, home indicator, glass glare. -------------------------------------------------------------------------- */ .phone-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .56rem; font-weight: 800; letter-spacing: .01em; padding-inline: 6px; margin-bottom: 2px; opacity: .85; } .phone-status .sig { display: flex; align-items: flex-end; gap: 1.5px; } .phone-status .sig span { width: 2.5px; background: currentColor; border-radius: 1px; } .phone-status .sig span:nth-child(1) { height: 3px; } .phone-status .sig span:nth-child(2) { height: 5px; } .phone-status .sig span:nth-child(3) { height: 7px; } .phone-status .sig span:nth-child(4) { height: 9px; } .phone-status .batt { width: 17px; height: 9px; border: 1px solid currentColor; border-radius: 2.5px; padding: 1px; position: relative; } .phone-status .batt::after { content: ''; position: absolute; inset-inline-end: -3px; top: 50%; transform: translateY(-50%); width: 1.5px; height: 4px; background: currentColor; border-radius: 0 1px 1px 0; } .phone-status .batt i { display: block; height: 100%; width: 72%; background: currentColor; border-radius: 1px; } .phone-home { width: 74px; height: 4px; border-radius: 999px; background: currentColor; opacity: .28; margin: 8px auto 0; flex-shrink: 0; } /* one diagonal sheen across the glass, so the screen is not a flat rectangle */ .phone::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; background: linear-gradient(122deg, rgba(255, 255, 255, .16) 0 18%, transparent 34% 100%); } /* -------------------------------------------------------------------------- 25c. Scroll story — the device pins while the chapters scroll past it, and each chapter swaps the screen. This is the product demo. -------------------------------------------------------------------------- */ #story { position: relative; overflow: clip; background: radial-gradient(ellipse 60% 40% at 85% 4%, rgba(37, 99, 235, .12), transparent 60%), radial-gradient(ellipse 55% 45% at 8% 96%, rgba(249, 115, 22, .1), transparent 60%); } .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); align-items: start; } .story-stage { position: sticky; top: 118px; display: grid; place-items: center; padding-block: 8px; } .story-device { position: relative; } /* every screen inside is absolutely positioned, so the frame has no intrinsic width to fill — it has to be stated */ .story-device .phone { width: 288px; max-width: 100%; } .story-device .phone-screen { min-height: 560px; position: relative; padding: 0; } /* screens stack on top of each other; only the active one is opaque */ .story-screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 9px; padding: 34px 11px 12px; opacity: 0; transform: translateY(14px) scale(.985); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); pointer-events: none; } .story-screen.on { opacity: 1; transform: none; pointer-events: auto; } /* a halo behind the device that takes the accent colour of the active chapter */ .story-aura { position: absolute; inset: -14% -22%; border-radius: 50%; background: radial-gradient(circle, var(--story-tint, rgba(37, 99, 235, .38)), transparent 66%); filter: blur(46px); z-index: -1; transition: background .6s var(--ease-out); } .story-steps { display: flex; flex-direction: column; } .story-step { position: relative; padding: clamp(26px, 4vw, 40px) 0 clamp(26px, 4vw, 40px) 0; padding-inline-start: 46px; min-height: 46vh; display: flex; flex-direction: column; justify-content: center; opacity: .38; filter: saturate(.5); transition: opacity .45s var(--ease-out), filter .45s var(--ease-out); } .story-step.on { opacity: 1; filter: none; } /* the rail: a hairline through every chapter, filled up to the active one */ .story-step::before { content: ''; position: absolute; inset-inline-start: 15px; top: 0; bottom: 0; width: 2px; background: var(--border); } .story-step:first-child::before { top: 50%; } .story-step:last-child::before { bottom: 50%; } .story-step .bullet { position: absolute; inset-inline-start: 4px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--border-2); font-size: .68rem; font-weight: 900; color: var(--ink-3); z-index: 1; transition: background-color .35s, border-color .35s, color .35s, box-shadow .35s, transform .35s var(--ease-spring); } .story-step.on .bullet { background: linear-gradient(135deg, var(--blue-500), var(--violet-500)); border-color: transparent; color: #fff; transform: translateY(-50%) scale(1.18); box-shadow: var(--glow-primary); } .story-step .step-kicker { font-size: .74rem; font-weight: 800; color: var(--blue-500); margin-bottom: 8px; } .story-step .step-title { font-size: clamp(1.2rem, 1rem + .9vw, 1.7rem); font-weight: 900; letter-spacing: -.03em; } .story-step p { margin-top: 10px; } .story-step .step-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 16px; } /* -------------------------------------------------------------------------- 25d. Story screen widgets — small, app-accurate pieces reused across screens -------------------------------------------------------------------------- */ .sc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .74rem; font-weight: 800; color: #0A1730; } .sc-lvl { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 13px; background: #fff; border: 1.5px solid #E9EFFA; transition: border-color .3s, box-shadow .3s; } .sc-lvl.on { border-color: #2563EB; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); } .sc-lvl img { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; } .sc-lvl b { font-size: .7rem; } .sc-lvl span { font-size: .54rem; color: #7C8CA6; display: block; line-height: 1.5; } .sc-lvl .tick { margin-inline-start: auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #D4DFF0; display: grid; place-items: center; flex-shrink: 0; } .sc-lvl.on .tick { background: #2563EB; border-color: #2563EB; color: #fff; } .sc-lvl.on .tick svg { width: 9px; height: 9px; } .sc-lvl:not(.on) .tick svg { display: none; } .sc-sentence { background: #fff; border: 1px solid #E9EFFA; border-radius: 14px; padding: 12px; text-align: center; } .sc-sentence .en { direction: ltr; font-size: .82rem; font-weight: 800; color: #0A1730; line-height: 1.7; } .sc-sentence .fa { font-size: .58rem; color: #7C8CA6; margin-top: 5px; } .sc-mic { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-inline: auto; background: linear-gradient(135deg, #F97316, #EA580C); color: #fff; box-shadow: 0 8px 22px rgba(249, 115, 22, .45); position: relative; flex-shrink: 0; } .sc-mic svg { width: 22px; height: 22px; } .sc-mic .ring-pulse { border-color: #F97316; } .sc-score { background: #fff; border: 1px solid #E9EFFA; border-radius: 14px; padding: 11px 12px; } .sc-score .top { display: flex; align-items: center; justify-content: space-between; font-size: .6rem; font-weight: 800; } .sc-score .pct { font-size: .95rem; font-weight: 900; color: #0E8A5F; } .sc-track { height: 7px; background: #E7EEFB; border-radius: 999px; overflow: hidden; margin-top: 8px; } .sc-track i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #2563EB, #10B981); transition: width 1.2s var(--ease-out); } .story-screen.on .sc-track i { width: var(--w, 0%); } .sc-words { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 10px; direction: ltr; } .sc-words span { font-size: .6rem; font-weight: 700; padding: 2px 7px; border-radius: 7px; background: #ECFDF5; color: #0E8A5F; } .sc-words span.miss { background: #FEF2F2; color: #E5484D; } .sc-bubble { max-width: 86%; padding: 9px 11px; border-radius: 14px; font-size: .64rem; line-height: 1.75; } .sc-bubble .en { direction: ltr; font-weight: 700; color: #0A1730; } .sc-bubble .fa { font-size: .54rem; color: #7C8CA6; margin-top: 3px; } .sc-bubble.ai { background: #fff; border: 1px solid #E9EFFA; border-end-start-radius: 5px; align-self: flex-start; } .sc-bubble.me { background: #FFF3E9; border: 1px solid rgba(249, 115, 22, .28); border-end-end-radius: 5px; align-self: flex-end; } .sc-quiz { background: #fff; border: 1px solid #E9EFFA; border-radius: 14px; padding: 12px; } .sc-opt { display: flex; align-items: center; gap: 7px; padding: 8px 10px; border-radius: 11px; border: 1.5px solid #E9EFFA; font-size: .64rem; font-weight: 700; direction: ltr; margin-top: 7px; color: #0A1730; } .sc-opt.ok { border-color: #10B981; background: #ECFDF5; color: #0E8A5F; } .sc-opt.bad { border-color: #F7C3C5; background: #FEF2F2; color: #E5484D; } .sc-streak { display: flex; justify-content: space-between; gap: 4px; } .sc-streak div { flex: 1; aspect-ratio: 1; border-radius: 9px; display: grid; place-items: center; background: #F1F5FC; border: 1.5px solid #E4EBF7; font-size: .52rem; color: #7C8CA6; } .sc-streak div.done { background: linear-gradient(135deg, #F97316, #EA580C); border-color: transparent; color: #fff; } .sc-rank { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 11px; background: #fff; border: 1px solid #E9EFFA; font-size: .6rem; font-weight: 700; } .sc-rank.me { background: #EAF1FF; border-color: #BBD2F8; } .sc-rank b { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; background: #F1F5FC; font-size: .55rem; flex-shrink: 0; } /* -------------------------------------------------------------------------- 25e. AI teacher avatar — flat vector, viseme-driven mouth. Deliberately stylised: a semi-realistic face at this size lands in the uncanny valley. -------------------------------------------------------------------------- */ .teacher { position: relative; width: min(320px, 82vw); aspect-ratio: 1; display: grid; place-items: center; } .teacher-disc { position: absolute; inset: 10%; border-radius: 50%; padding: 5px; background: conic-gradient(from 0deg, var(--blue-500), var(--violet-500), var(--orange-500), var(--blue-500)); box-shadow: var(--shadow-lg); animation: spin 20s linear infinite; } .teacher-disc > span { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: linear-gradient(165deg, #EAF2FF, #D6E4FB); animation: spin 20s linear infinite reverse; } html.dark .teacher-disc > span { background: linear-gradient(165deg, #16294a, #0d1a33); } .teacher-disc svg { width: 100%; height: 100%; display: block; } /* only the viseme matching the current mouth shape is drawn */ .viseme { opacity: 0; } [data-viseme="0"] .v0, [data-viseme="1"] .v1, [data-viseme="2"] .v2, [data-viseme="3"] .v3, [data-viseme="4"] .v4 { opacity: 1; } .blink { animation: blinkEye 5.2s ease-in-out infinite; transform-origin: center; } .brow-l, .brow-r { animation: browLift 5.2s ease-in-out infinite; } @keyframes browLift { 0%, 62%, 100% { transform: translateY(0); } 72% { transform: translateY(-3px); } } .teacher-caption { position: absolute; bottom: -6px; inset-inline: 6%; border-radius: var(--r-full); padding: 9px 16px; text-align: center; box-shadow: var(--shadow-md); font-size: .8rem; font-weight: 800; direction: ltr; min-height: 40px; display: grid; place-items: center; z-index: 4; } .teacher-caption .cursor { display: inline-block; width: 2px; height: 1em; background: var(--orange-500); margin-inline-start: 2px; vertical-align: -.15em; animation: caret 1s steps(2) infinite; } @keyframes caret { 50% { opacity: 0; } } /* -------------------------------------------------------------------------- 25f. Motion utilities -------------------------------------------------------------------------- */ /* the CTA leans toward the cursor before you reach it */ .magnetic { transition: transform .3s var(--ease-out); } /* -------------------------------------------------------------------------- 26. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .chat-peek { position: static; width: 100%; max-width: 320px; margin-top: 18px; } .nav-links, .nav-desktop-only { display: none !important; } /* Sticky needs a taller containing block than the element itself. As a grid item in a one-column grid the area collapses to the item, so drop the grid and let the device stick against the whole chapter list. */ .story-grid { display: block; } .story-stage { top: 84px; margin-bottom: 10px; z-index: 3; padding-block: 10px; background: linear-gradient(to bottom, var(--bg) 78%, transparent); } .story-device .phone { max-width: 218px; } .story-device .phone-screen { min-height: 428px; } .story-screen { padding: 28px 9px 10px; } .story-step { min-height: 0; padding-block: 26px; } .story-step::before { display: none; } .story-step .bullet { top: 26px; transform: none; } .story-step.on .bullet { transform: scale(1.15); } #nav-toggle { display: grid; } .hero-grid, .split, .split-wide-text { grid-template-columns: 1fr; } /* headline before artwork on narrow screens: the value proposition should be the first thing read, not the mockup */ .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ladder { grid-template-columns: repeat(3, 1fr); gap: 20px 10px; } .ladder::before { display: none; } } @media (max-width: 640px) { body { font-size: 15.5px; } /* The chips crowd the mascot at this width — the mascot wins. */ .hero-stage .chip-float { display: none; } .hero-stage { min-height: 300px; } .mascot-wrap { width: min(260px, 66%); } .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } .store-grid { grid-template-columns: 1fr; } .store-btn { justify-content: center; } .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; } .hero-stats > div + div { border-inline-start: 1px solid var(--border); } .scenario-card { width: 158px; } .ladder { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .btn { width: 100%; } .btn-inline { width: auto; } .phone { max-width: 250px; } } /* -------------------------------------------------------------------------- 27. Motion & print preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .marquee-track { animation: none; } .mascot-wrap, .chip-float, .magnetic { transform: none !important; } .card-lift { --rx: 0deg; --ry: 0deg; } .story-screen { transition: opacity .01ms; } } @media print { #nav, #mobile-menu, .blob, .grid-bg { display: none !important; } .reveal { opacity: 1 !important; transform: none !important; } }