/* ========================================================================== Aivinir landing — styles Design tokens are the OFFICIAL Aivinir brandbook palette (v1.0, 2026). Source of truth: docs/DESIGN_SYSTEM.md + docs/BRANDBOOK.md. Dark-ONLY system — no light theme (brandbook: ~70% dark base; the wordmark is never recoloured). Single type family: Inter (display = heavier weight). ========================================================================== */ :root { /* --- raw brandbook tokens (stр. 21/32 PDF) --- */ --aivinir-bg: #030811; /* MIDNIGHT — фон ~70% */ --aivinir-surface: #071523; /* SURFACE — карточки */ --aivinir-deep: #0D2530; /* DEEP SURF — выделения */ --aivinir-aqua: #14D9D4; /* AQUA — AI-акцент */ --aivinir-blue: #3152FF; /* ELECTRIC — digital */ --aivinir-text: #F4F7F8; /* CLOUD — текст/свет */ --aivinir-muted: #95A6AE; /* SLATE — вторичный */ --aivinir-human: #E08A2E; /* HUMAN AMBER — тепло */ /* --- semantic map --- */ --background: var(--aivinir-bg); --foreground: var(--aivinir-text); --card: var(--aivinir-surface); --card-foreground: var(--aivinir-text); --popover: var(--aivinir-deep); --popover-foreground: var(--aivinir-text); --primary: var(--aivinir-aqua); --primary-foreground: var(--aivinir-bg); --secondary: var(--aivinir-deep); --secondary-foreground: var(--aivinir-text); --muted: var(--aivinir-deep); --muted-foreground: var(--aivinir-muted); --accent: var(--aivinir-deep); --accent-foreground: var(--aivinir-text); --destructive: #ff5d5d; --success: var(--aivinir-aqua); --warning: var(--aivinir-human); --brand-amber: var(--aivinir-human); --blue: var(--aivinir-blue); --border: #173043; --input: #173043; --input-fill: #0a1a28; --ring: var(--aivinir-aqua); --lock-backdrop: #12151b; /* graphite — opaque backdrop that fully hides the page behind a locked checkout */ /* radii — brandbook: 24px large cards / 16px mobile */ --radius: 1rem; --radius-sm: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; /* 16px (mobile card) */ --radius-2xl: 1.25rem; /* 20px */ --radius-3xl: 1.5rem; /* 24px (large card) */ /* single family — Inter (display = same family, heavier weight) */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --maxw: 75rem; --shadow-card: 0 1px 2px rgba(0,0,0,0.45), 0 14px 36px rgba(0,0,0,0.34); } /* ---- Reset / base ------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--background); color: var(--foreground); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Headings use Inter at display weight (800) — distinction by weight, not family */ h1, h2, h3, .font-display { font-family: var(--font-serif); letter-spacing: -0.02em; line-height: 1.1; font-weight: 800; } h1 { font-size: clamp(2.1rem, 6.5vw, 4rem); } /* up to ~64px */ h2 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); } /* ~40px */ h3 { font-size: clamp(1.2rem, 2.8vw, 1.5rem); } /* ~24px */ a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; padding: 0; } /* ---- Layout helpers ---------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } .section { padding-block: clamp(3rem, 8vw, 5.5rem); position: relative; } .section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); } .eyebrow { display: inline-block; font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); margin-bottom: 0.75rem; } .section__head { max-width: 46rem; margin-bottom: 2.25rem; } .section--center .section__head { margin-inline: auto; text-align: center; } .lead { color: var(--muted-foreground); font-size: 1.05rem; } /* ---- Brand pattern (verbatim from globals.css) ------------------------- */ .brand-pattern { background-image: radial-gradient(circle at 26px 26px, color-mix(in oklab, var(--primary) 70%, transparent) 0 1.6px, transparent 2.4px), radial-gradient(circle at 26px 26px, color-mix(in oklab, var(--brand-amber) 60%, transparent) 0 1px, transparent 7px); background-size: 52px 52px; } /* ---- Icons ------------------------------------------------------------- */ /* Base size for inline SVGs; specific contexts (.icon-list, .chip, .features) override via higher-specificity descendant rules below. Without this an SVG with no width/height attributes stretches to fill its flex parent. */ svg.ic { width: 1.5rem; height: 1.5rem; flex: none; } /* ---- Buttons ----------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.8rem 1.5rem; border-radius: var(--radius-xl); border: 1px solid transparent; font-size: 0.98rem; font-weight: 600; line-height: 1; transition: filter .15s, background .15s, transform .05s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn svg { width: 1.15rem; height: 1.15rem; flex: none; } .btn--icon svg { width: 1.15rem; height: 1.15rem; } .btn--primary { background: var(--primary); color: var(--primary-foreground); } .btn--primary:hover { filter: brightness(1.07); } .btn--secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); } .btn--secondary:hover { background: var(--accent); } .btn--ghost { background: transparent; color: var(--foreground); } .btn--ghost:hover { background: var(--accent); } .btn--outline { background: transparent; color: var(--foreground); border-color: var(--border); } .btn--outline:hover { background: var(--accent); } .btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; min-height: 52px; } .btn--block { width: 100%; } .btn--icon { padding: 0.5rem; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-lg); background: transparent; color: var(--foreground); border: 1px solid var(--border); } .btn--icon:hover { background: var(--accent); } /* ---- Header ------------------------------------------------------------ */ .header { position: relative; z-index: 40; /* not sticky — header lives only on the first screen */ background: color-mix(in oklab, var(--background) 82%, transparent); border-bottom: 1px solid var(--border); } .header__inner { display: flex; align-items: center; gap: 1rem; height: 3.2rem; } /* 20% shorter */ .brandmark { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-serif); font-weight: 600; font-size: 1.3rem; } .brandmark__dot { width: 0.85rem; height: 0.85rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 22%, transparent); } /* Wordmark logo — transparent PNG (light-on-dark). The system is dark-only, so it always sits on the brand-dark surface (brandbook: logo never recoloured). */ .logo-img { height: 1.7rem; width: auto; display: block; } .footer .logo-img { height: 2rem; } .header__nav { display: none; gap: 1.5rem; margin-inline-start: 1.5rem; } .header__nav a { color: var(--muted-foreground); font-size: 0.95rem; font-weight: 500; } .header__nav a:hover { color: var(--foreground); } .header__spacer { flex: 1; } .header__tools { display: flex; align-items: center; gap: 0.5rem; } .lang-select { background: var(--input-fill); color: var(--foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.45rem 0.6rem; font-size: 0.9rem; font-family: inherit; } .header__cta { display: none; } /* ---- Hero -------------------------------------------------------------- */ /* less top space (nav → eyebrow halved) so more of the video showcase shows */ .hero { position: relative; overflow: hidden; padding-top: clamp(1.5rem, 4.5vw, 3rem); padding-bottom: clamp(3rem, 8vw, 5.5rem); } .hero__pattern { position: absolute; inset: 0; opacity: 0.16; -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 40%, transparent 100%); } /* AI Glow — Midnight → Aqua → Blue (brandbook gradient for launches/tech) */ .hero__glow { position: absolute; top: -25%; left: 50%; transform: translateX(-50%); width: 64rem; height: 42rem; background: radial-gradient(circle at 50% 40%, color-mix(in oklab, var(--aivinir-aqua) 30%, transparent), color-mix(in oklab, var(--aivinir-blue) 18%, transparent) 45%, transparent 68%); filter: blur(44px); pointer-events: none; } .hero__inner { position: relative; text-align: center; } .hero__copy { max-width: 54rem; margin-inline: auto; } /* Bigger, bolder hero headline laid out in ~3 lines (partner request). Wider than the generic h1 (up to ~76px) + text-wrap:balance for even line distribution. */ /* Phone sizing is driven by ~7vw (≈27px @ 393px) so BOTH the TR and the (longer) RU hero title fit 3 lines on an iPhone 15 — text-wrap:balance evens them out. (A 40px floor forced 4 lines TR / 5 lines RU; 8vw≈31px still left RU at 5.) Desktop still hits the 4.75rem cap → 3 lines in the 54rem copy column. */ .hero h1 { margin-bottom: 1rem; font-size: clamp(1.5rem, 7vw, 4.75rem); text-wrap: balance; } /* RU hero title is longer than TR/EN, so at the 4.75rem/76px desktop cap it wrapped to 5 lines (TR/EN already fit 3). Cap RU a touch smaller on desktop → 3 lines too. Mobile is untouched: below the cap the shared 7vw term drives sizing identically for every language, so this only bites at ≥960px. Measured in the 54rem/864px copy column: 4.5rem=4 lines, 4.3rem=3, so 4.2rem keeps a safe 3-line RU. Verified 3 lines at 1024/1440px. */ html[lang="ru"] .hero h1 { font-size: clamp(1.5rem, 7vw, 4.2rem); } .hero__subtitle { font-family: var(--font-serif); font-size: clamp(1.2rem, 3vw, 1.6rem); color: var(--primary); margin-bottom: 1.25rem; } /* hero video showcase — infinite, centered-first carousel (dusle.ai-style) */ .hero__showcase { margin-top: 2rem; } .hero-carousel-wrap { position: relative; } .hero-carousel { /* NOTE: no `scroll-behavior: smooth` here — it makes init-centering + the recycle handler's scrollLeft writes animate, which fights into a runaway auto-scroll on load. Arrow clicks pass {behavior:"smooth"} to scrollBy. */ display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; /* momentum settles per card — no runaway fling */ scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-block: 0.5rem; margin-inline: -1.25rem; padding-inline: 1.25rem; /* bleed to edges */ } .hero-carousel::-webkit-scrollbar { display: none; } .hero-card { flex: 0 0 auto; width: 62vw; max-width: 14rem; margin: 0; scroll-snap-align: center; } /* student-results handle: visible, but NOT clickable and NOT selectable/copyable */ .case-handle { margin-top: 0.6rem; text-align: center; font-weight: 600; font-size: 0.92rem; color: var(--primary); user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; pointer-events: none; -webkit-touch-callout: none; } /* technique caption under instructor-demo clips */ .clip-caption { margin-top: 0.6rem; text-align: center; font-size: 0.9rem; line-height: 1.3; color: var(--card-foreground); } .video-card__media { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--deep-surface); box-shadow: var(--shadow-card); } .video-card__poster, .video-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Tap-to-play affordance — shown ONLY in data-saver mode, hidden once a card starts playing */ .video-card__play { display: none; } .hero-carousel.is-saver .video-card__media:not(.is-playing) .video-card__play { display: flex; position: absolute; inset: 0; align-items: center; justify-content: center; background: color-mix(in oklab, var(--deep-surface) 30%, transparent); cursor: pointer; } .video-card__play-ic { width: 2.5rem; height: 2.5rem; fill: #fff; opacity: 0.95; filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.45)); } /* Hero placeholder tile shown until self-hosted clips are wired (config.mediaBase). */ .video-card__media--placeholder { background-image: radial-gradient(circle at 30% 22%, color-mix(in oklab, var(--primary) 28%, transparent), transparent 62%), linear-gradient(160deg, var(--deep-surface), var(--background)); } .hero__text { color: var(--muted-foreground); margin-bottom: 1rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-block: 1.75rem; } .hero__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .chip { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--card); border: 1px solid var(--border); color: var(--card-foreground); border-radius: 999px; padding: 0.4rem 0.85rem; font-size: 0.85rem; font-weight: 500; } .chip svg { width: 1rem; height: 1rem; color: var(--primary); } .chip--anchor { font-weight: 600; } .chip--anchor::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent); } .hero__note { margin-top: 1.75rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-xl); background: color-mix(in oklab, var(--primary) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border)); color: var(--muted-foreground); font-size: 0.92rem; max-width: 40rem; margin-inline: auto; } /* ---- Cards / grids ----------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.5rem; box-shadow: var(--shadow-card); } .grid { display: grid; gap: 1rem; } .grid--2 { grid-template-columns: 1fr; } .grid--3 { grid-template-columns: 1fr; } .grid--4 { grid-template-columns: 1fr 1fr; } .icon-list { display: grid; gap: 0.85rem; } .icon-list li { display: flex; gap: 0.75rem; align-items: flex-start; } .icon-list .ic { flex: none; width: 1.5rem; height: 1.5rem; color: var(--primary); margin-top: 0.1rem; } .audience-card .ic { width: 1.6rem; height: 1.6rem; color: var(--primary); margin-bottom: 0.75rem; } .audience-card h3 { margin-bottom: 0.4rem; } .audience-card p { color: var(--muted-foreground); font-size: 0.95rem; } /* transform before/after — mobile: horizontal swipe carousel (one pair per slide) */ .transform-rows { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-inline: -1.25rem; padding-inline: 1.25rem; padding-bottom: 0.35rem; } .transform-rows::-webkit-scrollbar { display: none; } .transform-rows > .transform-row { flex: 0 0 86%; scroll-snap-align: center; } .transform-row { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: stretch; } .ba { border-radius: var(--radius-xl); padding: 1.1rem 1.25rem; border: 1px solid var(--border); } .ba--before { background: var(--card); color: var(--muted-foreground); } .ba--after { background: color-mix(in oklab, var(--primary) 12%, var(--card)); border-color: color-mix(in oklab, var(--primary) 35%, var(--border)); } .ba__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.35rem; } .ba--before .ba__label { color: var(--muted-foreground); } .ba--after .ba__label { color: var(--primary); } /* "Что изменится" before→after line icons (replaced the old emoji). Inline before the text; colored via currentColor from the card (.ba--before muted / .ba--after aqua). */ .ba__icon { display: inline-block; width: 1.7rem; height: 1.7rem; margin-right: 0.5rem; vertical-align: -0.42em; flex: none; } .ba--after .ba__icon { color: var(--primary); } /* numbered list (difference / format) */ .numbered { counter-reset: n; display: grid; gap: 0.85rem; } .numbered li { counter-increment: n; display: flex; gap: 0.9rem; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1rem 1.1rem; } .numbered li::before { content: counter(n, decimal-leading-zero); font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; color: var(--primary); flex: none; min-width: 1.8rem; } /* program modules */ .module { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.5rem; } .module__num { font-family: var(--font-serif); color: var(--primary); font-weight: 700; font-size: 0.95rem; } .module h3 { margin: 0.25rem 0 0.9rem; } .curriculum-head { margin-top: 2.75rem; max-width: none; } .curriculum-head h3 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); } .numbered--lessons li { font-weight: 500; } .curriculum-acc { margin-top: 1.25rem; } /* ---- Carousel (brandbook §4b) ----------------------------------------- */ .carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem; padding-bottom: 0.5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-inline: -1.25rem; padding-inline: 1.25rem; /* bleed to screen edges */ } .carousel::-webkit-scrollbar { display: none; } .carousel__card { scroll-snap-align: start; flex: 0 0 auto; width: 82%; max-width: 22rem; } /* Audience: single-row carousel — swipe one-at-a-time on mobile, then on desktop the 3 cards fill the row evenly (no scroll, no arrows). */ .carousel--audience > .carousel__card { align-self: stretch; } /* Carousel arrows — desktop only (mobile uses native swipe). */ .carousel-wrap { position: relative; } .carousel-arrow { display: none; } @media (min-width: 768px) { .carousel-arrow { display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer; background: color-mix(in oklab, var(--card) 88%, transparent); border: 1px solid var(--border); color: var(--foreground); box-shadow: var(--shadow-card); transition: background .15s, transform .15s; } .carousel-arrow:hover { background: var(--card); transform: translateY(-50%) scale(1.06); } .carousel-arrow .ic { width: 1.25rem; height: 1.25rem; } .carousel-arrow--prev { left: -0.5rem; } .carousel-arrow--next { right: -0.5rem; } } /* Required-field marker + validation errors */ .req { color: var(--brand-amber, #e08a2e); } .field input.input-error, .field .select.input-error { border-color: #f0626f !important; box-shadow: 0 0 0 3px color-mix(in oklab, #f0626f 30%, transparent); } /* placeholder option (unselected) reads as muted, real choices as normal text */ .select:has(option[value=""]:checked) { color: var(--muted-foreground, #95a6ae); } #checkoutError, #paymentError { color: #f0a0a8; } .shake { animation: shake .38s cubic-bezier(.36,.07,.19,.97); } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } /* Button loading spinner */ .btn-spinner { display: inline-block; width: 1em; height: 1em; margin-right: .5em; vertical-align: -0.15em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .7s linear infinite; } @keyframes btn-spin { to { transform: rotate(360deg); } } /* Legal pages (Terms / Privacy) */ .legal { max-width: 46rem; } .legal h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.25rem; } .legal h2 { font-size: 1.15rem; margin: 1.75rem 0 0.4rem; } .legal p { color: var(--muted-foreground); line-height: 1.7; } .legal .lead { color: var(--foreground); } .legal-back { display: inline-block; margin-bottom: 1.25rem; color: var(--primary); text-decoration: none; } .legal-updated { font-size: 0.85rem; margin-top: 0; } .legal-entity { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.85rem; } /* placeholder note (social-proof mock content) */ .placeholder-note { color: var(--muted-foreground); font-size: 0.8rem; font-style: italic; margin: -0.75rem 0 1rem; opacity: 0.8; } /* case cards (results / before-after) */ .case-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-card); } a.case-card:hover { border-color: var(--primary); } .case-card__media { position: relative; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; background-color: var(--deep-surface); } .case-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 16%, transparent), color-mix(in oklab, var(--blue) 16%, transparent)); } .case-card .case-ic { position: relative; z-index: 1; width: 2.4rem; height: 2.4rem; color: var(--primary); opacity: 0.9; } .case-card__tag { position: absolute; z-index: 2; top: 0.75rem; left: 0.75rem; background: var(--bg, var(--background)); color: var(--foreground); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; } .case-card__body { padding: 1.1rem 1.15rem 1.25rem; } .case-card__body h3 { font-size: 1.15rem; margin-bottom: 0.3rem; } .case-card__body p { color: var(--muted-foreground); font-size: 0.92rem; } .case-card__handle { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.7rem; color: var(--primary); font-size: 0.85rem; font-weight: 600; } .case-card__handle svg { width: 0.95rem; height: 0.95rem; } /* testimonial cards */ .testi-card { display: flex; flex-direction: column; justify-content: space-between; gap: 1.1rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: 1.4rem 1.35rem; box-shadow: var(--shadow-card); } .testi-card__quote { font-size: 1rem; line-height: 1.55; } .testi-card__quote::before { content: "“"; color: var(--primary); font-family: var(--font-serif); font-weight: 800; margin-right: 0.1rem; } .testi-author { display: flex; align-items: center; gap: 0.65rem; } .avatar { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary-foreground); background: var(--primary); } .testi-author__meta { display: flex; flex-direction: column; line-height: 1.2; } /* Review screenshots: tap-to-zoom image cards. Inherit .carousel__card width. */ .review-card { -webkit-appearance: none; appearance: none; padding: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); cursor: zoom-in; display: block; } .review-card img { display: block; width: 100%; height: auto; } .carousel--reviews { align-items: flex-start; } /* portrait + landscape mix → top-align */ .testi-author__meta b { font-size: 0.95rem; } .testi-author__meta span { color: var(--muted-foreground); font-size: 0.82rem; } /* chips list (usecases) */ .taglist { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* stats */ .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .stat { text-align: center; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1.25rem 0.75rem; } .stat__value { font-family: var(--font-serif); font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; color: var(--primary); } .stat__label { color: var(--muted-foreground); font-size: 0.85rem; margin-top: 0.25rem; } .bio p { color: var(--muted-foreground); margin-bottom: 0.85rem; } .bio p:last-child { margin-bottom: 0; } /* founder bio: slightly smaller + tighter so the whole story fits one screen */ .trust-lead .bio { padding: 1.25rem; } .trust-lead .bio p { font-size: 0.9rem; line-height: 1.5; margin-bottom: 0.6rem; } .trust-lead { display: grid; gap: 1.25rem; margin-bottom: 1.5rem; } /* right column next to the photo: bio on top, the stat plaques below it */ .trust-main { display: grid; gap: 1rem; min-width: 0; align-content: start; } /* compact founder photo — ~1/3 of the old full-width size so it doesn't eat the whole mobile screen */ .instructor { max-width: 9rem; margin-inline: auto; } .instructor-photo { width: 100%; height: auto; border-radius: var(--radius-2xl); border: 1px solid var(--border); display: block; box-shadow: var(--shadow-card); } .instructor-caption { margin-top: 0.75rem; text-align: center; font-weight: 600; font-size: 0.92rem; color: var(--brand-amber); } .proof-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; } .proof-link { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.5rem 0.9rem; font-size: 0.9rem; font-weight: 500; background: var(--card); } .proof-link:hover { background: var(--accent); } .proof-link svg { width: 1rem; height: 1rem; color: var(--primary); } /* accordion (concerns / faq) */ .accordion { display: grid; gap: 0.6rem; } .acc-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } .acc-q { width: 100%; text-align: start; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: transparent; color: var(--foreground); font-weight: 600; font-size: 1rem; border: none; } .acc-q .chev { transition: transform .2s; flex: none; width: 1.2rem; height: 1.2rem; color: var(--muted-foreground); } .acc-item[open] .chev, .acc-item.open .chev { transform: rotate(180deg); } .acc-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; color: var(--muted-foreground); } .acc-a__inner { padding: 0 1.15rem 1.1rem; } .acc-item.open .acc-a { max-height: 48rem; } /* pricing */ .pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .price-card { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-3xl); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; overflow-wrap: break-word; } /* CTA labels vary a lot in length by language — the global `.btn { white-space: nowrap }` made a long RU label (e.g. "Подать заявку на VIP и узнать детали") set the card's min-width, pushing the whole card past the viewport (~25px overflow). Let the pricing CTA wrap; short TR labels still fit on one line, so TR is unchanged. */ .price-card .btn { white-space: normal; } .price-card--popular { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), 0 12px 40px color-mix(in oklab, var(--primary) 18%, transparent); } /* Badge sits in NORMAL FLOW at the top of the card (not absolute) so the card grows to fit a 1- or 2-line badge and it can NEVER overlap the

(the old absolute badge overlapped on narrow screens / large system fonts when the long TR text wrapped). Negative margin-top pulls it up to straddle the top edge and keep the VIP

roughly aligned with the badge-less card. */ .price-badge { align-self: center; width: fit-content; max-width: 100%; margin: -1.9rem auto 0.7rem; text-align: center; line-height: 1.25; background: var(--primary); color: var(--primary-foreground); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.35rem 0.85rem; border-radius: 999px; } .price-card h3 { font-size: 1.5rem; } .price-card__tagline { color: var(--muted-foreground); font-size: 0.95rem; margin: 0.4rem 0 1.1rem; min-height: 2.6em; } .price-amount { display: flex; align-items: baseline; gap: 0.4rem; } .price-amount__num { font-family: var(--font-serif); font-size: clamp(2rem, 7vw, 2.8rem); font-weight: 700; } .price-amount__cur { font-size: 1.3rem; font-weight: 600; color: var(--muted-foreground); } .price-amount__period { color: var(--muted-foreground); font-size: 0.9rem; margin-top: 0.2rem; margin-bottom: 1.25rem; } .price-card .features { display: grid; gap: 0.6rem; margin-bottom: 1.25rem; } .price-card .features li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; } .price-card .features .ic { flex: none; width: 1.15rem; height: 1.15rem; color: var(--primary); margin-top: 0.2rem; } .price-forwho { border-top: 1px solid var(--border); margin-top: auto; padding-top: 1rem; } .price-forwho__title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.5rem; } .price-forwho li { color: var(--muted-foreground); font-size: 0.9rem; padding-block: 0.15rem; } /* final cta */ .final { text-align: center; position: relative; overflow: hidden; } .final .card { padding: clamp(2rem, 6vw, 3.5rem); position: relative; } .final__pattern { position: absolute; inset: 0; opacity: 0.12; pointer-events: none; } .final h2 { margin-bottom: 0.75rem; } .final p { color: var(--muted-foreground); max-width: 38rem; margin-inline: auto; } .final__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.75rem; } .final__badges { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.5rem; } .final__badges .chip { white-space: nowrap; } /* keep each badge on one line */ /* footer */ .footer { border-top: 1px solid var(--border); padding-block: 2.5rem; } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } .footer h4 { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 0.75rem; } .footer__brand .brandmark { margin-bottom: 0.6rem; } .footer__brand p { color: var(--muted-foreground); font-size: 0.92rem; } .footer__brand a { color: var(--primary); } .footer__links li { padding-block: 0.25rem; } .footer__links a { color: var(--muted-foreground); font-size: 0.92rem; } .footer__links a:hover { color: var(--foreground); } .footer__company { color: var(--muted-foreground); font-size: 0.85rem; } .footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; color: var(--muted-foreground); font-size: 0.85rem; } .stripe-note { display: inline-flex; align-items: center; gap: 0.45rem; } .stripe-note svg { width: 1.1rem; height: 1.1rem; color: var(--primary); } /* ---- Modals ------------------------------------------------------------ */ /* Overlay is sized to the VISIBLE viewport (dvh tracks the iOS address bar) and padded by the safe-area insets (notch / home indicator) so a tall bottom-sheet modal never clips its title under the status bar. */ .modal-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: none; align-items: flex-end; justify-content: center; background: oklch(0 0 0 / 0.6); backdrop-filter: blur(4px); height: 100vh; height: 100dvh; box-sizing: border-box; padding: 1rem; padding-top: calc(1rem + env(safe-area-inset-top, 0px)); padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); } .modal-overlay.open { display: flex; } /* Locked checkout (deep-link ?buy=…&lock=1): hide the close icon (closeCheckout() is a no-op while this class is set, so backdrop/Esc/click can't dismiss it either) AND paint the backdrop an opaque graphite so the page behind is fully hidden — no peek-through at the top on mobile in-app webviews (Instagram/Telegram/WhatsApp). */ #checkoutOverlay.checkout-locked { background: var(--lock-backdrop); backdrop-filter: none; -webkit-backdrop-filter: none; } #checkoutOverlay.checkout-locked [data-action="close-checkout"] { display: none; } .modal { background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-3xl) var(--radius-3xl) 0 0; width: 100%; max-width: 32rem; max-height: 100%; overflow-y: auto; padding: 1.5rem; box-shadow: 0 -8px 40px oklch(0 0 0 / 0.4); animation: slideUp .22s ease; } @keyframes slideUp { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Review lightbox: centered (not a bottom sheet), transparent chrome, image fills. */ #reviewOverlay { align-items: center; } .modal--review { position: relative; background: transparent; border: 0; box-shadow: none; padding: 0; max-width: min(94vw, 30rem); width: auto; max-height: 100%; overflow: visible; animation: none; } .review-lightbox img { display: block; width: 100%; height: auto; max-height: 82dvh; object-fit: contain; border-radius: var(--radius-2xl); box-shadow: 0 14px 50px oklch(0 0 0 / 0.55); } .review-close { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 2; background: oklch(0 0 0 / 0.55); border-color: transparent; color: #fff; } .review-close:hover { background: oklch(0 0 0 / 0.75); } /* ---- Free-lesson block: one centered poster card (Play + CTA) → player modal ---- */ .lesson-wrap { display: flex; justify-content: center; } .lesson-card { position: relative; display: block; width: min(20rem, 78vw); margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lesson-card .video-card__media { aspect-ratio: 9 / 16; } /* Big, ALWAYS-visible Play affordance (unlike the carousels' glyph, shown only in data-saver). */ .lesson-card__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in oklab, var(--deep-surface) 20%, transparent); transition: background .18s ease; } .lesson-card:hover .lesson-card__play { background: color-mix(in oklab, var(--deep-surface) 8%, transparent); } .lesson-card__play-ic { width: 2rem; height: 2rem; fill: #fff; stroke: #fff; padding: 1.05rem; box-sizing: content-box; border-radius: 999px; background: color-mix(in oklab, var(--primary) 92%, #000); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); } /* CTA label sits ON the poster (per brief: "written right on it"). */ .lesson-card__label { position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; padding: 0.5rem 0.9rem; border-radius: 999px; background: color-mix(in oklab, #000 62%, transparent); color: #fff; font-weight: 700; font-size: 0.95rem; backdrop-filter: blur(6px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } .lesson-card__label svg { width: 1rem; height: 1rem; fill: #fff; stroke: #fff; flex: 0 0 auto; } /* Standalone /free_lesson page: brand logo → the lesson video → a "questions?" WhatsApp CTA. */ .lesson-page { max-width: 34rem; margin-inline: auto; padding: 1.5rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 1.25rem; min-height: 100dvh; box-sizing: border-box; } .lesson-page__logo { align-self: center; } .lesson-page__logo .logo-img { height: 1.9rem; width: auto; } .lesson-page__player { width: 100%; display: flex; justify-content: center; } .lesson-page__video { display: block; width: auto; max-width: 100%; max-height: 70dvh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: var(--radius-2xl); border: 1px solid var(--border); box-shadow: var(--shadow-card); } .lesson-page__ask { width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .lesson-page__ask h2 { margin: 0; } .lesson-page__wa { display: inline-flex; align-items: center; gap: 0.5rem; } .lesson-page__wa svg { width: 1.15rem; height: 1.15rem; } @media (min-width: 768px) { .lesson-page__video { max-height: 78dvh; } } .modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; } .modal__head h3 { font-size: 1.3rem; } .modal__summary { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 0.9rem 1.1rem; margin-bottom: 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .modal__summary .name { font-weight: 600; } .modal__summary .price { font-family: var(--font-serif); font-weight: 700; font-size: 1.2rem; } .field { margin-bottom: 0.9rem; } .field label { display: block; font-size: 0.85rem; font-weight: 500; margin-bottom: 0.35rem; color: var(--muted-foreground); } .field input { width: 100%; background: var(--input-fill); color: var(--foreground); border: 1px solid var(--input); border-radius: var(--radius-lg); padding: 0.7rem 0.9rem; font-size: 1rem; font-family: inherit; } .field input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ring) 30%, transparent); } .field__hint { color: var(--muted-foreground); font-size: 0.78rem; margin-top: 0.4rem; line-height: 1.45; } /* Native