/* ISMA Landing — Design System */ :root { /* Coral sunset (default) */ --bg: #FFF9F2; --bg-alt: #FFF1E3; --ink: #1E1B2E; --ink-soft: #4A4560; --ink-muted: #7A748E; --line: rgba(30, 27, 46, 0.08); --card: #FFFFFF; --primary: #FF6B4A; /* coral */ --primary-ink: #7A1E0A; --accent: #6C5CE7; /* indigo */ --accent-2: #00B894; /* mint */ --accent-3: #FFC93C; /* sunny */ --accent-4: #E84393; /* pink */ /* Warm "human" accent — used for trust badges, urgency cues, free trial. */ --warm: #F97316; --radius-sm: 10px; --radius-md: 18px; --radius-lg: 28px; --radius-xl: 40px; /* Layered, soft shadows — single-layer blurs feel cheap. These stack a tight near-shadow with a wider ambient shadow for natural depth. */ --shadow-sm: 0 1px 2px rgba(30, 27, 46, 0.04), 0 2px 8px rgba(30, 27, 46, 0.04); --shadow-md: 0 2px 4px rgba(30, 27, 46, 0.04), 0 12px 32px rgba(30, 27, 46, 0.08); --shadow-lg: 0 4px 12px rgba(30, 27, 46, 0.06), 0 24px 64px rgba(30, 27, 46, 0.12); --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--primary) 25%, transparent), 0 24px 64px color-mix(in oklab, var(--primary) 30%, transparent); --font-display: "Fraunces", "DM Serif Display", Georgia, serif; --font-body: "Manrope", "Inter", system-ui, sans-serif; } [data-theme="ocean"] { /* Refined sky palette — slightly cooler bg, more vibrant primary, deeper text on accents. Pairs with the warm CTA color above for high-contrast moments. */ --bg: #F0F9FF; --bg-alt: #E0F2FE; --ink: #0C1E35; --ink-soft: #334E68; --ink-muted: #627D98; --line: rgba(12, 30, 53, 0.08); --primary: #0EA5E9; --primary-ink: #075985; --accent: #6C5CE7; --accent-2: #10B981; --accent-3: #FBBF24; --accent-4: #F97316; --warm: #F97316; } [data-theme="forest"] { --bg: #F4F8F0; --bg-alt: #E8F0DB; --primary: #27AE60; --accent: #E67E22; --accent-2: #6C5CE7; --accent-3: #F1C40F; --accent-4: #E84393; } [data-theme="berry"] { --bg: #FDF4F8; --bg-alt: #FAE7EF; --primary: #E84393; --accent: #6C5CE7; --accent-2: #00B894; --accent-3: #FFC93C; --accent-4: #FF6B4A; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Sticky nav is ~64–80px tall — reserve that space when anchor-scrolling so section titles aren't hidden under the nav. */ scroll-padding-top: 80px; /* Lock horizontal scroll at the html level too — body alone isn't enough on iOS Safari when an absolutely-positioned descendant peeks past the viewport. Use `clip`, not `hidden`: `overflow-x: hidden` turns into a scroll container, which breaks `position: sticky` on the nav. `clip` clips the overflow without creating a scroll container, so the sticky header still pins. */ overflow-x: clip; /* Belt-and-braces: prevents the layout shifting when an off-screen element briefly increases scrollWidth on some Android Chromium versions. */ max-width: 100%; } ::selection { background: color-mix(in oklab, var(--primary) 28%, transparent); color: var(--ink); } /* Single visible focus ring for keyboard users — covers buttons, links, inputs. :focus-visible only fires on keyboard tab, never on mouse click — so we get accessibility without the "outline appears when I click" eyesore. */ :focus-visible { outline: 2px solid color-mix(in oklab, var(--primary) 70%, transparent); outline-offset: 3px; border-radius: 4px; } button:focus-visible, a:focus-visible { outline-offset: 4px; } body { margin: 0; font-family: var(--font-body); background: var(--bg); color: var(--ink); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* `clip` (not `hidden`) so the sticky nav keeps working — see note on . */ overflow-x: clip; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } p { text-wrap: pretty; margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } .container { max-width: 1240px; margin: 0 auto; padding: 0 28px; padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); } /* NAV */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom: 1px solid var(--line); } .nav-inner { display: flex; align-items: center; gap: 32px; padding: 14px 28px; padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); max-width: 1240px; margin: 0 auto; } .nav-right { display: flex; gap: 12px; align-items: center; } .nav-cta { padding: 10px 18px; font-size: 14px; } /* Hamburger (mobile only) */ .nav-burger { display: none; width: 44px; height: 44px; border-radius: 12px; background: var(--bg-alt); position: relative; flex-shrink: 0; transition: background 0.2s; } .nav-burger:hover { background: color-mix(in oklab, var(--bg-alt) 70%, var(--ink) 6%); } .nav-burger span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease; } .nav-burger span:nth-child(1) { top: 15px; } .nav-burger span:nth-child(2) { top: 21px; } .nav-burger span:nth-child(3) { top: 27px; } .nav-burger.open span:nth-child(1) { top: 21px; transform: rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* Mobile drawer */ .nav-drawer { position: fixed; inset: 0; background: rgba(30, 27, 46, 0.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 40; } .nav-drawer.open { opacity: 1; pointer-events: auto; } .nav-drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); background: var(--bg); padding: calc(14px + env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 22px; display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.22, 0.8, 0.2, 1); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.18); overflow-y: auto; overscroll-behavior: contain; } .nav-drawer.open .nav-drawer-panel { transform: translateX(0); } .nav-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .nav-drawer-close { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-alt); color: var(--ink-soft); display: grid; place-items: center; flex-shrink: 0; transition: background 0.2s, color 0.2s, transform 0.25s; } .nav-drawer-close:hover { background: var(--ink); color: var(--bg); transform: rotate(90deg); } .nav-drawer-close svg { width: 18px; height: 18px; } .nav-drawer-label { font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); padding-left: 18px; margin-bottom: 6px; } .nav-drawer-links { display: flex; flex-direction: column; gap: 1px; margin-bottom: 12px; } .nav-drawer-links a { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-radius: 12px; font-family: var(--font-display); font-size: 17px; font-weight: 500; color: var(--ink); min-height: 40px; transition: background 0.18s ease, color 0.18s ease; position: relative; } .nav-drawer-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); flex-shrink: 0; transition: background 0.2s, transform 0.2s; } .nav-drawer-text { flex: 1; } .nav-drawer-arrow { color: var(--ink-muted); font-size: 18px; opacity: 0; transform: translateX(-6px); transition: opacity 0.18s, transform 0.18s; } .nav-drawer-links a:hover, .nav-drawer-links a:active, .nav-drawer-links a:focus-visible { background: var(--bg-alt); color: var(--primary); outline: none; } .nav-drawer-links a:hover .nav-drawer-dot, .nav-drawer-links a:active .nav-drawer-dot, .nav-drawer-links a:focus-visible .nav-drawer-dot { background: var(--primary); transform: scale(1.6); } .nav-drawer-links a:hover .nav-drawer-arrow, .nav-drawer-links a:active .nav-drawer-arrow, .nav-drawer-links a:focus-visible .nav-drawer-arrow { color: var(--primary); opacity: 1; transform: translateX(0); } /* Language switch lives in the drawer on mobile (top bar shows Онлайн instead). */ .nav-drawer-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 10px; padding: 0 4px; } .nav-drawer-lang-label { font-size: 14px; font-weight: 600; color: var(--ink-soft); } .nav-drawer-lang .lang-switch { padding: 3px; font-size: 14px; } .nav-drawer-lang .lang-switch button { padding: 8px 18px; } .nav-drawer-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .nav-drawer-cta { justify-content: center; padding: 13px 20px; font-size: 15px; min-height: 48px; } /* WhatsApp + Instagram share one row to save vertical space in the menu. */ .nav-drawer-social { display: flex; gap: 8px; } .nav-drawer-social .btn { flex: 1; justify-content: center; gap: 8px; padding: 11px 12px; font-size: 14px; min-height: 44px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; } .logo-mark { width: 36px; height: 36px; border-radius: 10px; background: var(--primary); display: grid; place-items: center; color: white; font-family: var(--font-display); font-size: 19px; font-weight: 700; position: relative; overflow: hidden; } .logo-mark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,0.25) 50%); } .logo-img { display: block; height: 52px; width: auto; object-fit: contain; } /* Scroll-progress ring around the logo. --scroll-progress (0..1) is pushed onto by Nav — both the progress stroke and the rotation follow it. */ .logo-badge { position: relative; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 16px; } .logo-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .logo-ring-track, .logo-ring-progress { rx: 16; ry: 16; fill: none; } .logo-ring-track { stroke: color-mix(in oklab, var(--ink) 7%, transparent); stroke-width: 2; } .logo-ring-progress { stroke: var(--primary); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - 1 * var(--scroll-progress, 0)); /* No transition: scroll-progress updates on every rAF (60fps) — adding a 0.1s transition made each update queue its own tween that fought the next frame, stealing cycles from smooth-scroll and causing visible jank on desktop. */ } /* Compact mobile-only chips for the two route pages. */ .nav-route-chips { display: none; } .nav-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: color 0.15s, border-color 0.15s, background 0.15s; } .nav-chip:hover, .nav-chip:focus-visible { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 40%, var(--line)); background: color-mix(in oklab, var(--primary) 6%, var(--bg-alt)); } .nav-chip svg { width: 14px; height: 14px; flex-shrink: 0; } /* Онлайн chip — accented so the online format is obvious in the mobile bar. */ .nav-chip-online { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 45%, var(--line)); background: color-mix(in oklab, var(--primary) 10%, var(--bg-alt)); } .nav-chip-online:hover, .nav-chip-online:focus-visible { color: var(--primary); border-color: color-mix(in oklab, var(--primary) 60%, var(--line)); background: color-mix(in oklab, var(--primary) 18%, var(--bg-alt)); } .nav-links { display: flex; gap: 4px; flex: 1; justify-content: center; } .nav-links a { padding: 6px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink-soft); line-height: 1.4; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; } .nav-links a:hover { background: var(--bg-alt); color: var(--ink); } /* Route links (Преподавателям / Франшиза) — primary color, same pill shape as others */ .nav-links a.nav-link-route { color: var(--primary); } .nav-links a.nav-link-route:hover { background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); } .lang-switch { display: inline-flex; background: var(--bg-alt); border-radius: 999px; padding: 3px; font-size: 13px; font-weight: 600; } .lang-switch button { padding: 6px 12px; border-radius: 999px; color: var(--ink-muted); transition: all 0.2s; } .lang-switch button.active { background: var(--ink); color: var(--bg); } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.2s ease, color 0.2s ease; white-space: nowrap; } .btn-primary { background: var(--primary); color: white; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 20px color-mix(in oklab, var(--primary) 35%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 16px 32px color-mix(in oklab, var(--primary) 45%, transparent); } .btn-primary:active { transform: translateY(0); } .btn-ghost { background: var(--bg-alt); color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn-ink { background: var(--ink); color: var(--bg); } .btn-ink:hover { transform: translateY(-2px); } .btn-wa { background: #25D366; color: white; } .btn-wa:hover { background: #1EBE5A; transform: translateY(-2px); } /* SECTION */ section { padding: 100px 0; position: relative; } .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary); margin-bottom: 20px; } .kicker::before { content: ""; width: 28px; height: 2px; background: var(--primary); border-radius: 2px; } .section-title { font-size: clamp(36px, 4.5vw, 64px); max-width: 900px; margin-bottom: 20px; } .section-lead { font-size: 19px; color: var(--ink-soft); max-width: 720px; } /* HERO */ .hero { padding: 60px 0 100px; position: relative; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; } .hero-badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary-ink); border-radius: 999px; font-size: 13px; font-weight: 600; margin-bottom: 28px; } .hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent); } .hero h1 { font-size: clamp(48px, 6.5vw, 96px); font-weight: 500; letter-spacing: -0.035em; margin-bottom: 28px; } .hero h1 .accent { color: var(--primary); font-style: italic; font-weight: 400; } .hero h1 .underline { position: relative; display: inline-block; } .hero h1 .underline::after { content: ""; position: absolute; bottom: 0.05em; left: -2%; width: 104%; height: 0.18em; background: var(--accent-3); z-index: -1; border-radius: 4px; } .hero p.lead { font-size: 20px; color: var(--ink-soft); max-width: 560px; margin-bottom: 36px; } /* Trust badge: stars + rating + social proof number, sits between subtitle and CTAs. Highest-impact placement for converting "interested" into "click" — readers see the rating right when their eye crosses to the action. */ .hero-trust { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-sm); font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; } .hero-trust-stars { display: inline-flex; align-items: center; gap: 1px; color: var(--accent-3); } .hero-trust-rating { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); } .hero-trust-sep { color: var(--ink-muted); font-weight: 400; } .hero-trust-text { color: var(--ink-soft); font-weight: 500; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 36px; } .hero-tags { display: flex; gap: 12px; flex-wrap: nowrap; } .hero-tag { padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; white-space: nowrap; } .hero-tag svg { width: 16px; height: 16px; } /* Hero illustration */ .hero-illus { position: relative; aspect-ratio: 1 / 1.05; } .hero-illus svg { width: 100%; height: 100%; overflow: visible; } .hero-float { position: absolute; padding: 14px 18px; background: white; border-radius: 18px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; } .hero-float-1 { top: 8%; left: -8%; animation: float1 6s ease-in-out infinite; } .hero-float-2 { bottom: 14%; right: -4%; animation: float2 7s ease-in-out infinite; } .hero-float-3 { top: 42%; right: -6%; animation: float1 8s ease-in-out infinite reverse; } @keyframes float1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes float2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(14px); } } .hero-float .emoji { width: 34px; height: 34px; border-radius: 10px; display:grid; place-items:center; font-size: 18px; background: var(--bg-alt); } .hero-sale-pill { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 16px; background: var(--ink); color: var(--bg); border-radius: 999px; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; } .hero-sale-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in oklab, var(--ink) 30%, transparent); } .hero-sale-pill .pct { background: var(--accent-3); color: var(--ink); padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; } /* STATS */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 80px; padding: 28px; background: var(--ink); color: var(--bg); border-radius: var(--radius-lg); position: relative; overflow: hidden; } .stats-strip::before { content: ""; position: absolute; top: -60%; right: -10%; width: 320px; height: 320px; background: radial-gradient(circle, var(--primary), transparent 70%); opacity: 0.3; } .stat { padding: 8px 24px; border-right: 1px solid rgba(255,255,255,0.1); position: relative; } .stat:last-child { border-right: none; } .stat-value { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; } .stat-value .star { color: var(--accent-3); } .stat-label { font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 500; } /* ABOUT */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .about-points { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; } .about-point { display: flex; gap: 18px; padding: 20px; background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--line); } .about-point-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; background: var(--bg-alt); } .about-point-icon svg { width: 24px; height: 24px; } .about-point h4 { font-family: var(--font-body); font-size: 16px; font-weight: 700; margin-bottom: 4px; } .about-point p { font-size: 14px; color: var(--ink-muted); } .about-para { font-size: 17px; line-height: 1.65; color: var(--ink-soft); max-width: 560px; } .about-video { position: relative; /* Phone body in the site's brand blue. 9:16 matches the source clip exactly, so object-fit:cover fills the screen with no bars or crop. */ aspect-ratio: 9 / 16; width: 100%; max-width: 380px; margin: 0 auto; border-radius: 34px; overflow: hidden; border: 4px solid var(--primary-ink); background: var(--primary-ink); box-shadow: var(--shadow-lg); /* When reached via "Смотреть видео", stop ~40px below the sticky nav so the "О школе" heading stays framed with the video instead of jamming the top. */ scroll-margin-top: 40px; } /* Subtle screen rim inside the bezel. */ .about-video::after { content: ""; position: absolute; inset: 0; border-radius: calc(34px - 4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); pointer-events: none; } .about-video-el { display: block; width: 100%; height: 100%; border-radius: calc(34px - 4px); object-fit: cover; background: #000; } .about-video .play { position: absolute; inset: 0; display: grid; place-items: center; cursor: pointer; appearance: none; border: 0; padding: 0; background: transparent; } .about-video .play-btn { width: 88px; height: 88px; border-radius: 50%; background: white; display: grid; place-items: center; box-shadow: 0 12px 40px rgba(0,0,0,0.2); transition: transform 0.2s; } .about-video .play:hover .play-btn { transform: scale(1.08); } .about-video .play-btn::after { content: ""; width: 0; height: 0; border-left: 22px solid var(--primary); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; } /* PROGRAM (steps) */ .program { background: var(--bg-alt); } .steps { margin-top: 60px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; } .steps::before { content: ""; position: absolute; top: 40px; left: 8%; right: 8%; height: 2px; background: repeating-linear-gradient(to right, var(--ink) 0 6px, transparent 6px 12px); opacity: 0.2; } .step { padding: 0 14px; position: relative; } .step-num { font-family: var(--font-display); font-size: 42px; font-weight: 500; color: var(--primary); width: 80px; height: 80px; background: var(--card); border-radius: 50%; display: grid; place-items: center; margin: 0 auto 24px; box-shadow: var(--shadow-sm); position: relative; z-index: 1; border: 2px solid var(--primary); } .step h3 { font-family: var(--font-body); font-size: 17px; font-weight: 700; margin-bottom: 8px; text-align: center; } .step p { font-size: 14px; color: var(--ink-muted); text-align: center; } /* SKILLS */ /* Skills sits right after AbacusDemo — pull it up so the pair reads as one block */ #skills { padding-top: 40px; } .skills-grid { margin-top: 60px; display: grid; /* 2×2 grid on desktop — feels balanced for exactly four cards. With three columns the fourth card hung alone on a second row. */ grid-template-columns: repeat(2, 1fr); gap: 20px; } .skill { padding: 32px; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.25s ease; } .skill:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--primary) 35%, var(--line)); box-shadow: var(--shadow-md); } .skill-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 20px; transition: transform 0.3s cubic-bezier(0.34, 1.26, 0.64, 1); } .skill-icon svg { width: 26px; height: 26px; display: block; } .skill:hover .skill-icon { transform: scale(1.06) rotate(-2deg); } /* Each card paints its icon tile with a soft tint of a brand colour, and the icon itself in the deeper full-strength version. Re-using brand vars keeps theme switches in sync (coral / ocean / forest / berry). */ .skill:nth-child(1) .skill-icon { background: color-mix(in oklab, var(--accent-3) 22%, transparent); color: color-mix(in oklab, var(--accent-3) 100%, var(--ink) 30%); } .skill:nth-child(2) .skill-icon { background: color-mix(in oklab, var(--accent) 16%, transparent); color: var(--accent); } .skill:nth-child(3) .skill-icon { background: color-mix(in oklab, var(--accent-2) 20%, transparent); color: var(--accent-2); } .skill:nth-child(4) .skill-icon { background: color-mix(in oklab, var(--primary) 16%, transparent); color: var(--primary); } .skill h3 { font-family: var(--font-body); font-size: 20px; font-weight: 700; margin-bottom: 10px; } .skill p { color: var(--ink-soft); } /* TEACHERS */ .teachers-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .teacher { padding: 28px; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease; } .teacher:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--primary) 25%, var(--line)); } .teacher-photo { width: 100%; aspect-ratio: 1; border-radius: var(--radius-md); margin-bottom: 22px; position: relative; overflow: hidden; } .teacher-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .teacher:nth-child(1) .teacher-photo { background: linear-gradient(135deg, var(--primary), var(--accent-4)); } .teacher:nth-child(2) .teacher-photo { background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .teacher:nth-child(3) .teacher-photo { background: linear-gradient(135deg, var(--accent-3), var(--primary)); } .teacher:nth-child(4) .teacher-photo { background: linear-gradient(135deg, var(--accent-2), var(--accent-4)); } .teacher-photo::after { content: attr(data-initials); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 72px; color: white; font-weight: 500; } .teacher-photo .plc { position: absolute; bottom: 12px; left: 12px; padding: 4px 10px; background: rgba(255,255,255,0.9); color: var(--ink-muted); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .teacher h3 { font-family: var(--font-display); font-size: 28px; margin-bottom: 6px; } .teacher .role { font-size: 13px; color: var(--primary); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .teacher p { color: var(--ink-soft); font-size: 15px; } .teacher:nth-child(1) { background: var(--ink); color: var(--bg); border: none; } .teacher:nth-child(1) .role { color: var(--accent-3); } .teacher:nth-child(1) p { color: rgba(255,255,255,0.75); } /* REVIEWS */ .reviews { background: var(--bg-alt); } .reviews-grid { margin-top: 60px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .review { padding: 32px; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); position: relative; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; } .review:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .review-stars { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--accent-2); font-size: 18px; letter-spacing: 2px; } .review-stars-rating { color: var(--ink); font-weight: 700; font-size: 16px; letter-spacing: 0; font-family: var(--font-body); } .review p { font-size: 17px; color: var(--ink); margin-bottom: 18px; line-height: 1.55; } .review-author { font-size: 14px; color: var(--ink-muted); font-weight: 500; display: flex; align-items: center; gap: 10px; } .review-author::before { content: ""; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-alt); border: 2px solid var(--card); } .review:nth-child(1) .review-author::before { background: var(--primary); } .review:nth-child(2) .review-author::before { background: var(--accent); } .review:nth-child(3) .review-author::before { background: var(--accent-2); } .review:nth-child(4) .review-author::before { background: var(--accent-4); } /* PRICES */ .prices-header { display: flex; justify-content: space-between; align-items: end; margin-bottom: 50px; gap: 40px; flex-wrap: wrap; } .prices-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .price-card { padding: 40px; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .price-card:not(.popular):hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in oklab, var(--primary) 30%, var(--line)); } .price-card.popular { background: var(--ink); color: var(--bg); border: none; transform: scale(1.02); box-shadow: var(--shadow-glow); } .price-card.popular:hover { transform: scale(1.02) translateY(-4px); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 35%, transparent), 0 32px 80px color-mix(in oklab, var(--primary) 38%, transparent); } .price-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-alt); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 24px; align-self: flex-start; } .price-card.popular .price-tag { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); } .price-card h3 { font-family: var(--font-display); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; } .price-sub { font-size: 15px; color: var(--ink-muted); margin-bottom: 32px; } .price-card.popular .price-sub { color: rgba(255,255,255,0.6); } .price-money { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; flex-wrap: nowrap; } .price-was { font-family: var(--font-display); font-size: 28px; color: var(--ink-muted); text-decoration: line-through; } .price-card.popular .price-was { color: rgba(255,255,255,0.45); } .price-now { font-family: var(--font-display); font-size: 72px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--primary); } .price-card.popular .price-now { color: var(--accent-3); } .price-period { font-size: 18px; color: var(--ink-muted); font-weight: 500; white-space: nowrap; } .price-card.popular .price-period { color: rgba(255,255,255,0.55); } .price-first-note { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 30px; padding: 8px 14px; background: color-mix(in oklab, var(--accent-3) 40%, transparent); color: var(--ink); border-radius: 8px; font-size: 13px; font-weight: 600; align-self: flex-start; } .price-card.popular .price-first-note { background: var(--accent-3); } .price-includes { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .price-includes li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; } .price-includes li::before { content: "\2713"; width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; background: var(--accent-2); color: white; font-size: 13px; font-weight: 800; display: grid; place-items: center; line-height: 1; } .price-card.popular .price-includes li::before { background: var(--accent-3); color: var(--ink); } .popular-badge { position: absolute; top: -14px; right: 24px; max-width: calc(100% - 48px); padding: 7px 14px; background: var(--accent-3); color: var(--ink); border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; box-shadow: 0 6px 16px color-mix(in oklab, var(--accent-3) 50%, transparent); } .price-trial { margin-top: 28px; padding: 20px; background: var(--bg-alt); border-radius: var(--radius-md); text-align: center; font-size: 15px; color: var(--ink-soft); } .price-trial strong { color: var(--ink); } /* FAQ */ .faq { background: var(--bg-alt); } .faq-wrap { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; margin-top: 20px; } .faq-items { display: flex; flex-direction: column; gap: 12px; } .faq-item { background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--line); overflow: hidden; transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; } .faq-item:hover { border-color: color-mix(in oklab, var(--primary) 40%, var(--line)); } .faq-item.open { border-color: var(--primary); box-shadow: 0 12px 32px color-mix(in oklab, var(--primary) 14%, transparent); } .faq-q { width: 100%; padding: 22px 28px; display: flex; align-items: center; justify-content: space-between; text-align: left; font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--ink); gap: 16px; min-height: 44px; } .faq-q-text { flex: 1; } .faq-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--bg-alt); display: grid; place-items: center; flex-shrink: 0; color: var(--ink-soft); transition: transform 0.35s cubic-bezier(0.34, 1.26, 0.64, 1), background 0.25s, color 0.25s; } .faq-icon svg { width: 18px; height: 18px; } .faq-item.open .faq-icon { background: var(--primary); color: white; transform: rotate(180deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-a-inner { padding: 0 28px 24px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; } /* FORM */ .contact-btn { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); font-weight: 600; font-size: 16px; transition: background 0.2s, border-color 0.2s; } .contact-btn:hover { background: color-mix(in oklab, var(--bg-alt) 70%, var(--ink) 6%); border-color: color-mix(in oklab, var(--primary) 30%, var(--line)); } .contact-btn .icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; } .contact-btn .icon.wa { background: #25D366; } .contact-btn .icon.call { background: var(--primary); } .contact-btn .icon svg { width: 20px; height: 20px; color: white; } .contact-btn > div { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .contact-btn-num { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 500; line-height: 1.2; color: var(--ink); } .contact-btn-sub { display: block; font-size: 12px; color: var(--ink-muted); font-weight: 500; line-height: 1.2; } form.lead-form { background: var(--card); padding: 0; border-radius: var(--radius-lg); color: var(--ink); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); } .field input, .field textarea { padding: 14px 16px; background: var(--bg-alt); border: 2px solid transparent; border-radius: var(--radius-sm); font-family: inherit; font-size: 15px; color: var(--ink); /* Snappy focus — the old 0.2s bg+border transition made taps feel laggy because the field appeared to "fade in" rather than react instantly. */ transition: border-color 0.12s ease; -webkit-tap-highlight-color: transparent; } .field input:focus, .field textarea:focus { outline: none; background: white; border-color: var(--primary); } .field textarea { resize: vertical; min-height: 88px; } /* Mount point for the invisible Turnstile widget — it stays in the DOM but takes no visible space. CF only injects its UI here if it needs to show an interactive challenge (rare with `appearance: interaction-only`). */ .form-turnstile { display: block; margin: 0; } .form-turnstile:empty { display: none; } .form-error { margin: 6px 0 4px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--primary) 10%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); color: var(--primary-ink, var(--ink)); font-size: 13px; font-weight: 500; } .form-submit { width: 100%; padding: 16px; background: var(--primary); color: white; border-radius: 999px; font-weight: 700; font-size: 16px; transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s; margin-top: 8px; } .form-submit:disabled { opacity: 0.6; cursor: progress; } .form-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 24px color-mix(in oklab, var(--primary) 40%, transparent); } .form-privacy { margin-top: 14px; font-size: 12px; color: var(--ink-muted); text-align: center; line-height: 1.5; } .form-success { padding: 40px 20px; text-align: center; } .form-success .check { width: 72px; height: 72px; border-radius: 50%; background: var(--accent-2); margin: 0 auto 20px; display: grid; place-items: center; color: white; animation: pop 0.4s; } .form-success h3 { font-family: var(--font-display); font-size: 32px; margin-bottom: 10px; } .form-success p { color: var(--ink-soft); } @keyframes pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } } /* OFFICES */ .offices-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; margin-top: 60px; align-items: stretch; } .offices-list { display: flex; flex-direction: column; gap: 16px; } .office { padding: 24px; background: var(--card); border-radius: var(--radius-md); border: 1px solid var(--line); transition: border-color 0.2s, transform 0.2s; cursor: pointer; } .office:hover { border-color: var(--primary); transform: translateY(-2px); } .office.selected { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 8%, var(--card)); } .office-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .office h3 { font-family: var(--font-body); font-size: 19px; font-weight: 700; } .office-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; } .office-badge.open { background: color-mix(in oklab, var(--accent-2) 20%, transparent); color: #0a6e50; } .office-badge.soon { background: var(--bg-alt); color: var(--ink-muted); } .office-addr { font-size: 15px; color: var(--ink-soft); margin-bottom: 4px; } .office-hours { font-size: 13px; color: var(--ink-muted); } .map-canvas { aspect-ratio: 4/3; border-radius: var(--radius-lg); background: var(--bg-alt); position: relative; overflow: hidden; border: 1px solid var(--line); } .map-canvas svg { width: 100%; height: 100%; display: block; } /* Map pins are rendered inside the SVG (Rest.jsx) so they stay locked to the coastline at any size. Colour + hover/selected scaling handled here. */ .map-pin-svg { cursor: pointer; } .map-pin-shadow { fill: #000; opacity: 0.16; } .map-pin-mark { fill: var(--primary); } .map-pin-svg.soon .map-pin-mark { fill: var(--ink-muted); } .map-pin-num { font-family: var(--font-body); font-size: 13px; font-weight: 700; fill: var(--primary); } .map-pin-svg.soon .map-pin-num { fill: var(--ink-muted); } .map-pin-inner { transform-box: fill-box; transform-origin: 50% 100%; transition: transform 0.2s; } .map-pin-svg:hover .map-pin-inner { transform: scale(1.08); } .map-pin-svg.selected .map-pin-inner { transform: scale(1.16); } .map-pin-tip { filter: drop-shadow(0 4px 10px rgba(0,0,0,0.18)); } .map-pin-tip-text { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--ink); } /* FOOTER */ footer { padding: 60px 0 40px; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-grid h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; } .footer-grid a, .footer-grid p { display: block; font-size: 15px; color: var(--ink-soft); margin-bottom: 8px; } .footer-grid a:hover { color: var(--primary); } .footer-grid .social-row { display: flex; gap: 10px; margin-top: 12px; } .footer-grid .social-row a.social-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 9px; color: white; border: none; transition: transform .2s ease, opacity .2s ease; opacity: 0.92; } .footer-grid .social-row a.social-btn:hover { color: white; transform: translateY(-1px); opacity: 1; } .footer-grid .social-row a.social-btn svg { width: 17px; height: 17px; } .footer-grid .social-row a.social-btn--wa { background: #25D366; } .footer-grid .social-row a.social-btn--ig { background: radial-gradient(circle at 30% 107%, #FDCE6F 0%, #F77737 20%, #E1306C 45%, #C13584 65%, #833AB4 85%, #515BD4 100%); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); } /* Tweaks Panel */ .tweaks-panel { position: fixed; bottom: 24px; right: 24px; background: white; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); padding: 20px; z-index: 100; width: 280px; display: none; } .tweaks-panel.visible { display: block; } .tweaks-panel h4 { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 14px; } .swatches { display: flex; gap: 8px; margin-bottom: 18px; } .swatch { width: 36px; height: 36px; border-radius: 10px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; } .swatch.active { border-color: var(--ink); } .swatch.coral { background: #FF6B4A; } .swatch.ocean { background: #0984E3; } .swatch.forest { background: #27AE60; } .swatch.berry { background: #E84393; } .tweaks-row { display: flex; gap: 8px; flex-wrap: wrap; } .tweak-btn { padding: 8px 12px; background: var(--bg-alt); border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--ink-soft); cursor: pointer; } .tweak-btn.active { background: var(--ink); color: white; } /* Lead-form modal (open via custom event 'open-lead' — see Rest.jsx openLead) */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(30, 27, 46, 0.6); /* backdrop-filter is GPU-expensive on mobile — every input keystroke would trigger a re-blur of the entire viewport behind the modal, jamming the UI. Kept on desktop where it's cheap; killed on phones via the @media block. */ -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(24px, env(safe-area-inset-bottom)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; overflow-y: auto; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal-card { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); max-height: calc(100svh - 48px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); padding: 44px 40px 36px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); transform: translateY(16px) scale(0.98); opacity: 0; transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 0.25s ease; } .modal-overlay.open .modal-card { transform: translateY(0) scale(1); opacity: 1; } .modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-alt); color: var(--ink-soft); display: grid; place-items: center; transition: background 0.2s, color 0.2s, transform 0.2s; z-index: 1; } .modal-close:hover { background: var(--ink); color: var(--bg); transform: rotate(90deg); } .modal-close svg { width: 18px; height: 18px; } .modal-kicker { margin-bottom: 14px; } .modal-title { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 36px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 10px; padding-right: 40px; } .modal-lead { color: var(--ink-soft); font-size: 16px; margin-bottom: 22px; } .lead-form.modal-form { background: transparent; padding: 0; box-shadow: none; color: var(--ink); } .modal-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 14px; } .modal-divider::before, .modal-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .modal-divider span { font-size: 11px; font-weight: 700; color: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; } .modal-contacts { display: flex; flex-direction: column; gap: 10px; } .modal-contacts .contact-btn { background: var(--bg-alt); border: 1px solid var(--line); color: var(--ink); } .modal-contacts .contact-btn:hover { background: color-mix(in oklab, var(--bg-alt) 70%, var(--ink) 6%); } .modal-contacts .contact-btn-num { color: var(--ink); } .modal-contacts .contact-btn-sub { color: var(--ink-muted); } .modal-success { padding: 24px 0; } .modal-success-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; flex-wrap: wrap; } .modal-success-actions .btn { min-height: 44px; } /* ======================================================================== Partner cards (home page) + Subpages (/franchise, /teach) ======================================================================== */ /* Partner cards block on home — two big cards, distinct styling per audience */ .partners { background: var(--bg-alt); } .partner-grid { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .partner-card { display: flex; flex-direction: column; gap: 12px; padding: 36px; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); color: var(--ink); position: relative; overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .partner-card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: 0 20px 48px color-mix(in oklab, var(--primary) 18%, transparent); } .partner-card-tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; color: var(--primary); background: color-mix(in oklab, var(--primary) 12%, transparent); } .partner-card--franchise .partner-card-tag { color: var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent); } .partner-card-icon { font-size: 42px; line-height: 1; } .partner-card-icon--chart { display: inline-flex; line-height: 0; color: var(--accent); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .partner-card:hover .partner-card-icon--chart { transform: translateY(-3px); } .partner-card h3 { font-family: var(--font-display); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; margin: 4px 0 0; } .partner-card p { color: var(--ink-soft); font-size: 16px; line-height: 1.5; flex: 1; } .partner-card-cta { align-self: flex-start; font-weight: 700; color: var(--primary); padding: 10px 0; transition: transform 0.2s; } .partner-card--franchise .partner-card-cta { color: var(--accent); } .partner-card:hover .partner-card-cta { transform: translateX(4px); } /* Subpage shared layout */ .subpage-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); background: color-mix(in oklab, var(--bg) 85%, transparent); border-bottom: 1px solid var(--line); } .subpage-header .nav-inner { padding: 14px 28px; } .subpage-back { font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; color: var(--ink-soft); transition: background 0.2s, color 0.2s; } .subpage-back:hover { background: var(--bg-alt); color: var(--ink); } .subpage { min-height: 50vh; } /* Reveal on scroll — elements with data-reveal fade+slide in once visible. */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.22, 0.8, 0.2, 1); transition-delay: var(--reveal-delay, 0s); } [data-reveal][data-shown="true"] { opacity: 1; transform: translateY(0); } /* Franchise cost numbers get an extra pop-scale when they animate in */ .cost-card[data-reveal] .cost-value { transform: scale(0.75); opacity: 0; transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease; transition-delay: calc(var(--reveal-delay, 0s) + 0.15s); } .cost-card[data-reveal][data-shown="true"] .cost-value { transform: scale(1); opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal][data-shown="true"], .cost-card[data-reveal] .cost-value { opacity: 1 !important; transform: none !important; transition: none !important; } } .subpage-hero { padding: 80px 0 60px; text-align: center; background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 8%, var(--bg)) 0%, var(--bg) 100%); position: relative; overflow: hidden; } /* Floating decoration emojis — drift gently around the hero title */ .subpage-floats { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .subpage-float { position: absolute; font-size: 44px; opacity: 0.55; animation: subpage-float-drift 9s ease-in-out infinite; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.08)); user-select: none; } .subpage-float--1 { top: 12%; left: 8%; animation-delay: 0s; } .subpage-float--2 { top: 20%; right: 10%; animation-delay: 2.2s; } .subpage-float--3 { bottom: 18%; left: 14%; animation-delay: 4.4s; } .subpage-float--4 { bottom: 24%; right: 12%; animation-delay: 6.6s; } @keyframes subpage-float-drift { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-22px) rotate(6deg); } } .subpage-hero .container { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .subpage-float { animation: none; } } .subpage-hero .kicker { justify-content: center; } /* 2-column hero (text + SVG illustration) for /teach and /franchise */ .subpage-hero--split { padding: 60px 0 48px; } .subpage-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; text-align: left; } .subpage-hero-grid .kicker { justify-content: flex-start; } .subpage-hero-grid .subpage-title, .subpage-hero-grid .subpage-lead { margin-left: 0; margin-right: 0; max-width: 560px; } .subpage-hero-grid .subpage-hero-cta { justify-content: flex-start; } .subpage-hero-illus-wrap { display: flex; justify-content: center; align-items: center; } .subpage-illus { width: 100%; height: auto; max-width: 480px; display: block; animation: subpage-illus-float 8s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(30, 27, 46, 0.08)); } @keyframes subpage-illus-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .subpage-illus { animation: none; } } .subpage-title { font-family: var(--font-display); font-size: clamp(36px, 5vw, 64px); font-weight: 500; letter-spacing: -0.03em; max-width: 820px; margin: 0 auto 20px; } .subpage-lead { font-size: 19px; color: var(--ink-soft); max-width: 640px; margin: 0 auto 32px; line-height: 1.5; } .subpage-hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } .subpage-section-title { text-align: center; margin: 0 auto 48px; } .subpage-points { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 0 auto; } .subpage-point { display: flex; gap: 18px; padding: 24px; background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--line); transition: border-color 0.25s, transform 0.25s; } .subpage-point:hover { border-color: var(--primary); transform: translateY(-2px); } .subpage-point-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in oklab, var(--primary) 12%, transparent); color: var(--primary); display: grid; place-items: center; transition: transform 0.25s, background 0.25s, color 0.25s; } .subpage-point-icon svg { width: 26px; height: 26px; display: block; } .subpage-point:hover .subpage-point-icon { transform: scale(1.08) rotate(-4deg); } /* Cycle accent colors across cards — each point gets its own tinted tile for visual variety */ .subpage-points .subpage-point:nth-child(6n+1) .subpage-point-icon { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); } .subpage-points .subpage-point:nth-child(6n+2) .subpage-point-icon { background: color-mix(in oklab, var(--accent) 14%, transparent); color: var(--accent); } .subpage-points .subpage-point:nth-child(6n+3) .subpage-point-icon { background: color-mix(in oklab, var(--accent-2) 16%, transparent); color: var(--accent-2); } .subpage-points .subpage-point:nth-child(6n+4) .subpage-point-icon { background: color-mix(in oklab, var(--accent-3) 28%, transparent); color: color-mix(in oklab, var(--accent-3) 65%, var(--ink)); } .subpage-points .subpage-point:nth-child(6n+5) .subpage-point-icon { background: color-mix(in oklab, var(--accent-4) 14%, transparent); color: var(--accent-4); } .subpage-points .subpage-point:nth-child(6n+6) .subpage-point-icon { background: color-mix(in oklab, var(--primary) 14%, transparent); color: var(--primary); } .subpage-point h3 { font-family: var(--font-body); font-size: 18px; font-weight: 700; margin: 0 0 6px; letter-spacing: -0.01em; } .subpage-point p { color: var(--ink-soft); font-size: 15px; line-height: 1.5; } /* Franchise cost grid — 3 big numbers */ .franchise-costs { background: var(--ink); color: var(--bg); padding: 80px 0; position: relative; overflow: hidden; } .franchise-costs::before { content: ""; position: absolute; top: -40%; right: -10%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 70%); opacity: 0.25; pointer-events: none; } .franchise-costs .section-title { color: var(--bg); } .cost-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; position: relative; } .cost-card { padding: 36px 28px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg); text-align: center; } .cost-value { font-family: var(--font-display); font-size: 56px; font-weight: 500; letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px; color: var(--accent-3); } .cost-label { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.7); margin-bottom: 10px; } .cost-sub { font-size: 14px; color: rgba(255, 255, 255, 0.55); line-height: 1.4; } /* ===== Franchise cost section — animated presenter + cost cards ===== */ .franchise-cost-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; align-items: center; margin-top: 40px; position: relative; } .franchise-cost-stage { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; } /* Board sits on the right; the 3D teacher overlaps its left, raised, and floats. */ .cost-board { width: 62%; flex-shrink: 0; } .cost-teacher { position: absolute; left: -4%; bottom: 28%; width: 52%; height: auto; z-index: 2; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45)); animation: cost-teacher-float 5s ease-in-out infinite; will-change: transform; } @keyframes cost-teacher-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } /* Beside the presenter the cards stack vertically, value on the left like a slide bullet */ .franchise-cost-layout .cost-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 0; } .franchise-cost-layout .cost-card { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; row-gap: 2px; align-items: center; text-align: left; padding: 20px 24px; } .franchise-cost-layout .cost-value { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin-bottom: 0; font-size: 42px; } .franchise-cost-layout .cost-label { grid-column: 2; margin-bottom: 0; } .franchise-cost-layout .cost-sub { grid-column: 2; } .cost-presenter { display: block; width: 100%; height: auto; overflow: visible; transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.2, 1); } .franchise-cost-stage:hover .cost-presenter { transform: translateY(-4px); } /* Idle motion — loops continuously; the character breathes, the arm points, the % badge pulses and sparkles twinkle. */ .cp-figure { transform-box: fill-box; transform-origin: 50% 100%; animation: cp-breathe 4.5s ease-in-out infinite; } .cp-arm { transform-box: fill-box; transform-origin: 6% 92%; animation: cp-point 4.5s ease-in-out infinite; } .cp-badge { transform-box: fill-box; transform-origin: 50% 50%; animation: cp-pulse 2.8s ease-in-out infinite; } .cp-shadow { animation: cp-shadow 4.5s ease-in-out infinite; } .cp-spark { transform-box: fill-box; transform-origin: 50% 50%; } .cp-spark-1 { animation: cp-twinkle 3.2s ease-in-out infinite; } .cp-spark-2 { animation: cp-twinkle 3.2s ease-in-out 0.7s infinite; } .cp-spark-3 { animation: cp-twinkle 3.2s ease-in-out 1.4s infinite; } .cp-spark-4 { animation: cp-twinkle 3.2s ease-in-out 2.1s infinite; } @keyframes cp-breathe { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3px) rotate(-0.6deg); } } @keyframes cp-point { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-5deg); } } @keyframes cp-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } } @keyframes cp-shadow { 0%, 100% { transform: scaleX(1); opacity: 0.35; } 50% { transform: scaleX(0.94); opacity: 0.28; } } @keyframes cp-twinkle { 0%, 100% { opacity: 0.25; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1); } } /* Chart build-in — gated on the stage scrolling into view (data-shown). */ .franchise-cost-stage .cp-bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; transition: transform 0.7s cubic-bezier(0.34, 1.4, 0.5, 1), opacity 0.3s ease; } .franchise-cost-stage[data-shown="true"] .cp-bar { transform: scaleY(1); opacity: 1; } .franchise-cost-stage .cp-trend { stroke-dasharray: 150; stroke-dashoffset: 150; transition: stroke-dashoffset 0.9s cubic-bezier(0.5, 0, 0.2, 1) 0.55s; } .franchise-cost-stage[data-shown="true"] .cp-trend { stroke-dashoffset: 0; } .franchise-cost-stage .cp-trend-arrow { opacity: 0; transition: opacity 0.3s ease 1.35s; } .franchise-cost-stage[data-shown="true"] .cp-trend-arrow { opacity: 1; } .franchise-cost-stage .cp-dot { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .franchise-cost-stage[data-shown="true"] .cp-dot { transform: scale(1); } .cp-donut-1 { stroke-dasharray: 62 200; stroke-dashoffset: 62; } .cp-donut-2 { stroke-dasharray: 38 200; stroke-dashoffset: 38; } .franchise-cost-stage .cp-donut { transition: stroke-dashoffset 0.9s cubic-bezier(0.5, 0, 0.2, 1) 0.4s; } .franchise-cost-stage[data-shown="true"] .cp-donut { stroke-dashoffset: 0; } /* Hover replays a quick staggered bar bounce (delay comes from the inline animationDelay). */ .franchise-cost-stage:hover .cp-bar { animation: cp-bar-bounce 0.6s ease; } @keyframes cp-bar-bounce { 0% { transform: scaleY(1); } 45% { transform: scaleY(1.07) translateY(-2px); } 100% { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .cost-presenter *, .cp-figure, .cp-arm, .cp-badge, .cp-shadow, .cp-spark, .cost-teacher { animation: none !important; transition: none !important; } .franchise-cost-stage .cp-bar { transform: scaleY(1) !important; opacity: 1 !important; } .franchise-cost-stage .cp-trend { stroke-dashoffset: 0 !important; } .franchise-cost-stage .cp-trend-arrow { opacity: 1 !important; } .franchise-cost-stage .cp-dot { transform: scale(1) !important; } .cp-donut { stroke-dashoffset: 0 !important; } .cp-spark { opacity: 1 !important; } .franchise-cost-stage:hover .cost-presenter { transform: none !important; } } /* Subpage final CTA card */ .subpage-cta-section { padding-bottom: 80px; } .subpage-cta-card { background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; padding: 56px 40px; border-radius: var(--radius-lg); text-align: center; max-width: 800px; margin: 0 auto; box-shadow: 0 30px 60px color-mix(in oklab, var(--primary) 25%, transparent); } .subpage-cta-card h2 { font-family: var(--font-display); font-size: clamp(28px, 3.5vw, 40px); font-weight: 500; margin: 0 0 12px; color: #fff; } .subpage-cta-card p { color: rgba(255, 255, 255, 0.88); font-size: 17px; margin: 0 0 24px; } .subpage-cta-card .btn-primary { background: #fff; color: var(--primary); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15); } .subpage-cta-card .btn-primary:hover { transform: translateY(-2px); } /* Floating WhatsApp pill — bottom-right, pulses for attention, hides near footer */ .floating-wa { position: fixed; bottom: 24px; bottom: max(24px, env(safe-area-inset-bottom)); right: 24px; right: max(24px, env(safe-area-inset-right)); z-index: 30; display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px 12px 12px; background: #25D366; color: #fff; font-weight: 600; font-size: 14px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 10px 28px rgba(37, 211, 102, 0.45), 0 2px 4px rgba(0, 0, 0, 0.08); transition: transform 0.3s cubic-bezier(0.34, 1.26, 0.64, 1), opacity 0.3s ease; animation: floating-wa-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both 0.6s, floating-wa-pulse 2s ease-out 1.2s infinite; } .floating-wa:hover { transform: translateY(-3px); animation-play-state: paused, paused; box-shadow: 0 0 0 8px rgba(37, 211, 102, 0.18), 0 16px 36px rgba(37, 211, 102, 0.55), 0 2px 4px rgba(0, 0, 0, 0.08); } .floating-wa:active { transform: translateY(0); } .floating-wa.hidden { opacity: 0; transform: translateY(24px) scale(0.8); pointer-events: none; animation-play-state: paused, paused; } .floating-wa-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); display: grid; place-items: center; flex-shrink: 0; position: relative; z-index: 1; } .floating-wa-icon svg { display: block; } .floating-wa-label { position: relative; z-index: 1; } /* Expanding ring that ripples out — purely box-shadow on the outermost layer */ @keyframes floating-wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55), 0 10px 28px rgba(37, 211, 102, 0.45), 0 2px 4px rgba(0, 0, 0, 0.08); } 70% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0), 0 10px 28px rgba(37, 211, 102, 0.45), 0 2px 4px rgba(0, 0, 0, 0.08); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0), 0 10px 28px rgba(37, 211, 102, 0.45), 0 2px 4px rgba(0, 0, 0, 0.08); } } @keyframes floating-wa-in { from { opacity: 0; transform: translateY(20px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Floating "back to top" — bottom-left, mirrors the WhatsApp pill's sizing so they feel like a matched pair. Only visible after the user has scrolled past the first screen. */ .floating-top { position: fixed; bottom: 24px; bottom: max(24px, env(safe-area-inset-bottom)); left: 24px; left: max(24px, env(safe-area-inset-left)); z-index: 30; width: 48px; height: 48px; border-radius: 50%; background: var(--bg); color: var(--primary); border: 2px solid var(--primary); display: grid; place-items: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease; cursor: pointer; } .floating-top:hover { background: var(--primary); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px color-mix(in oklab, var(--primary) 45%, transparent); } .floating-top:active { transform: translateY(0); } .floating-top.hidden { opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; } .floating-top svg { display: block; } @media (max-width: 600px) { .floating-top { width: 44px; height: 44px; bottom: 20px; left: 20px; } .floating-top svg { width: 20px; height: 20px; } } @media (prefers-reduced-motion: reduce) { .floating-wa { animation: floating-wa-in 0.3s both; } } /* Social icon wrapper (Instagram etc.) in footer */ .social-ig { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; color: var(--primary); } /* Carousel dots (hidden on desktop, visible on mobile) */ .carousel-dots { display: none; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; } .carousel-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in oklab, var(--ink) 18%, transparent); padding: 0; cursor: pointer; transition: background 0.25s ease, width 0.25s ease; flex-shrink: 0; } .carousel-dots .dot:hover { background: color-mix(in oklab, var(--ink) 35%, transparent); } .carousel-dots .dot.active { background: var(--primary); width: 24px; border-radius: 999px; } .prices-dots { margin-top: 18px; margin-bottom: 28px; } /* Responsive — tablet / small laptop */ @media (max-width: 960px) { .hero-grid, .about-grid, .faq-wrap, .offices-wrap { grid-template-columns: 1fr; gap: 40px; } /* single-column hero: no illustration column to extend into, so let the tags wrap again instead of overflowing / clipping. */ .hero-tags { flex-wrap: wrap; } /* Reviews + Prices + Teachers — horizontal scroll-snap carousel on mobile. grid-auto-columns is resolved against the grid's content-box (already reduced by padding-inline: 20px). The extra -40px narrows each card so the neighbour slide peeks ~20px on each side — the "peek-next-card" affordance that hints at swipe. */ .reviews-grid, .prices-grid, .teachers-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 40px); gap: 14px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 10px 20px 4px; margin: 20px -20px 0; scroll-padding-inline: 20px; } .reviews-grid::-webkit-scrollbar, .prices-grid::-webkit-scrollbar, .teachers-grid::-webkit-scrollbar { display: none; } .reviews-grid > *, .prices-grid > *, .teachers-grid > * { scroll-snap-align: center; scroll-snap-stop: always; } .prices-grid { padding-top: 28px; margin-top: 30px; } .price-card.popular { transform: none; } .carousel-dots { display: flex; } .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; } .steps::before { display: none; } .skills-grid { grid-template-columns: 1fr 1fr; } .stats-strip { grid-template-columns: repeat(2, 1fr); } .stat { border-bottom: 1px solid rgba(255,255,255,0.1); padding: 16px; } .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); } .stat:nth-child(2), .stat:nth-child(-n+2) { border-right: 1px solid rgba(255,255,255,0.1); } .nav-links { display: none; } .nav-cta { display: none; } .nav-burger { display: grid; place-items: center; } .nav-right { margin-left: auto; gap: 8px; } .nav-route-chips { display: inline-flex; gap: 6px; } .nav-inner { gap: 12px; padding: 12px 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } .container { padding: 0 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } section { padding: 70px 0; } .footer-grid { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: 52px; } .form-row { grid-template-columns: 1fr; } } /* Phones */ @media (max-width: 600px) { .container { padding: 0 18px; padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); } .nav-inner { padding: 10px 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); gap: 10px; } .logo { font-size: 20px; gap: 8px; } .logo-mark { width: 32px; height: 32px; font-size: 17px; border-radius: 9px; } .logo-img { height: 36px; } .logo-badge { padding: 3px 7px; border-radius: 11px; } .logo-ring-track, .logo-ring-progress { rx: 11; ry: 11; } /* Phones: soft filled pill chips — polished look, still space-efficient. */ .nav-chip { padding: 5px 11px; font-size: 11.5px; font-weight: 600; background: color-mix(in oklab, var(--primary) 9%, transparent); border: 1px solid transparent; color: var(--primary); border-radius: 999px; letter-spacing: -0.01em; } .nav-chip:hover, .nav-chip:focus-visible { background: color-mix(in oklab, var(--primary) 16%, transparent); border-color: transparent; } .nav-route-chips { gap: 4px; } .nav-inner { gap: 6px; padding: 10px 14px; } /* Top-bar language toggle moves into the drawer menu on mobile; an Онлайн chip takes its place so the online option is visible without opening the menu. */ .nav-right > .lang-switch { display: none; } .lang-switch { padding: 2px; font-size: 11px; } .lang-switch button { padding: 4px 8px; } section { padding: 32px 0; } .section-title { font-size: clamp(28px, 7.5vw, 40px); } .section-lead { font-size: 16px; } .kicker { font-size: 12px; margin-bottom: 16px; } .kicker::before { width: 20px; } /* HERO */ .hero { padding: 32px 0 64px; } .hero::before { content: ""; position: absolute; top: -10%; right: -30%; width: 70vw; height: 70vw; max-width: 500px; max-height: 500px; background: radial-gradient(circle, color-mix(in oklab, var(--primary) 35%, transparent), transparent 65%); filter: blur(40px); pointer-events: none; z-index: 0; } .hero::after { content: ""; position: absolute; top: 30%; left: -40%; width: 80vw; height: 80vw; max-width: 480px; max-height: 480px; background: radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent), transparent 65%); filter: blur(50px); pointer-events: none; z-index: 0; } .hero .container { position: relative; z-index: 1; } .hero-ctas .btn-primary { box-shadow: 0 14px 30px color-mix(in oklab, var(--primary) 40%, transparent); } .hero-grid { gap: 20px; } .hero-badge { margin-bottom: 20px; font-size: 12px; padding: 6px 12px 6px 8px; } .hero-trust { font-size: 12px; padding: 7px 12px; gap: 6px; white-space: normal; margin-bottom: 18px; } .hero-trust-rating { font-size: 13px; } .hero-trust-stars svg { width: 12px; height: 12px; } .hero { padding: 32px 0 48px; } .hero h1 { font-size: clamp(32px, 8.5vw, 44px); margin-bottom: 14px; letter-spacing: -0.025em; } .hero p.lead { font-size: 15.5px; margin-bottom: 18px; line-height: 1.5; } .hero-ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 18px; } .hero-ctas .btn { justify-content: center; width: 100%; padding: 14px 20px; min-height: 48px; } /* On mobile the trust badge already conveys what these tags + sale pill say, and they overflowed the eye / contributed to side-scroll. Hide them. */ .hero-tags { display: none; } .hero-sale-pill { display: none; } /* Phone-only: overlay the abacus illustration as an ambient background behind the hero text instead of stacking it below. Cuts hero height by ~380px and gives a more designed, less template feel. */ .hero-grid { position: relative; grid-template-columns: 1fr; gap: 0; } .hero-grid > div:first-child { position: relative; z-index: 2; } .hero-illus { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; margin: 0; opacity: 0.18; pointer-events: none; /* Tone down vivid bead colours so they read as a watermark, not a competing focal point. */ filter: saturate(0.5); /* Pull the illustration upward so the abacus frame sits behind the title/ subtitle (the eye-catching area) instead of being half-buried behind the CTAs. Hero has overflow:hidden so anything pushed past the top is clipped. */ transform: translateY(-18%); } .hero-illus svg { width: 100%; height: 100%; } .hero-float { display: none; } /* STATS — tighter row, smaller numbers, no excess padding. */ .stats-strip { padding: 12px; margin-top: 28px; gap: 0; border-radius: var(--radius-md); } .stat { padding: 12px 8px; } .stat-value { font-size: 26px; margin-bottom: 2px; } .stat-label { font-size: 11.5px; line-height: 1.3; } /* ABOUT */ .about-para { font-size: 16px; line-height: 1.6; } .about-points { margin-top: 24px; gap: 12px; } .about-point { padding: 16px; gap: 14px; } .about-point-icon { width: 40px; height: 40px; border-radius: 12px; } .about-video { max-width: 300px; border-width: 3px; } .about-video .play-btn { width: 68px; height: 68px; } .about-video .play-btn::after { border-left: 18px solid var(--primary); border-top-width: 11px; border-bottom-width: 11px; } /* PROGRAM */ /* Program steps: compact horizontal list on phones — circle-number on the left, title + description stacked on the right. The number spans both rows so the paragraph doesn't fall into the narrow left column. */ .steps { margin-top: 24px; grid-template-columns: 1fr; gap: 18px; } .step { display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; row-gap: 4px; padding: 0; text-align: left; } .step-num { width: 52px; height: 52px; font-size: 22px; margin: 0; border-width: 1.5px; grid-row: 1 / span 2; align-self: center; } .step h3 { font-size: 15px; text-align: left; margin-bottom: 0; line-height: 1.25; align-self: end; } .step p { font-size: 13px; text-align: left; line-height: 1.45; align-self: start; } /* SKILLS — 2×2 compact grid on phones. */ #skills { padding-top: 24px; } .skills-grid { margin-top: 24px; gap: 10px; grid-template-columns: 1fr 1fr; } .skill { padding: 16px 14px; border-radius: var(--radius-md); } .skill-icon { width: 36px; height: 36px; margin-bottom: 10px; border-radius: 10px; } .skill-icon svg { width: 18px; height: 18px; } .skill h3 { font-size: 14px; margin-bottom: 4px; line-height: 1.2; } .skill p { font-size: 12.5px; line-height: 1.35; } /* TEACHERS (mobile carousel — margin/gap set by the shared carousel rule above) */ .teacher { padding: 22px; } .teacher-photo { margin-bottom: 18px; border-radius: var(--radius-sm); } .teacher-photo::after { font-size: 56px; } .teacher h3 { font-size: 22px; } .teacher p { font-size: 14px; } /* REVIEWS */ .review { padding: 24px; border-radius: var(--radius-md); min-width: 0; } .review p { font-size: 15px; margin-bottom: 14px; } /* PRICES */ .prices-header { margin-bottom: 20px; gap: 14px; } .price-card { padding: 28px 22px; border-radius: var(--radius-md); min-width: 0; } .price-card h3 { font-size: 34px; } .price-sub { font-size: 14px; margin-bottom: 22px; } .price-money { flex-wrap: wrap; gap: 6px 10px; } .price-now { font-size: 54px; } .price-was { font-size: 22px; } .price-period { font-size: 15px; } .popular-badge { right: 20px; } /* FAQ */ .faq-wrap { gap: 24px; } .faq-q { padding: 18px 20px; font-size: 15px; gap: 12px; } .faq-icon { width: 28px; height: 28px; } .faq-icon::before { width: 10px; } .faq-icon::after { height: 10px; } .faq-a-inner { padding: 0 20px 18px; font-size: 14px; } /* FORM */ .field input, .field textarea { padding: 14px; font-size: 16px; } /* 16px prevents iOS zoom */ .form-submit { padding: 15px; font-size: 15px; min-height: 48px; } .contact-btn { padding: 14px; font-size: 15px; } .contact-btn-num { font-size: 16px; } /* Modal: centered card with equal top/bottom breathing room on phones. Drop the backdrop-filter — re-blur on every keystroke kills typing perf on mobile GPUs. Compensate with a darker solid background for separation. */ .modal-overlay { padding: 16px; padding-top: max(16px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); align-items: center; background: rgba(12, 30, 53, 0.78); -webkit-backdrop-filter: none; backdrop-filter: none; } .modal-card { max-width: 100%; max-height: calc(100svh - 32px); padding: 22px 18px 18px; border-radius: var(--radius-lg); transform: translateY(12px) scale(0.98); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); } .modal-overlay.open .modal-card { transform: translateY(0) scale(1); } /* No drag handle on centered modal — that was bottom-sheet affordance. */ .modal-card::before { display: none; } .modal-close { top: 10px; right: 10px; width: 36px; height: 36px; } .modal-card { padding: 22px 18px 18px; padding-bottom: max(18px, env(safe-area-inset-bottom)); } .modal-card::before { margin: -12px auto 10px; } .modal-kicker { margin-bottom: 8px; } .modal-title { font-size: 22px; padding-right: 44px; margin-bottom: 6px; } .modal-lead { font-size: 13.5px; margin-bottom: 14px; line-height: 1.4; } .lead-form.modal-form .form-row { grid-template-columns: 1fr; } /* Compact fields so all 4 + submit fit without scroll on typical phones. */ .lead-form .field { margin-bottom: 10px; gap: 4px; } .lead-form .field label { font-size: 12px; } .lead-form .field input, .lead-form .field textarea { padding: 10px 12px; /* 16px is the magic number — anything smaller triggers iOS Safari's auto-zoom when the field is focused (accessibility feature we don't want here). */ font-size: 16px; border-width: 1.5px; } .lead-form .field textarea { min-height: 52px; } .lead-form .form-submit { padding: 12px; font-size: 15px; margin-top: 4px; } .lead-form .form-privacy { font-size: 11px; margin-top: 10px; } /* Compact divider + contact buttons so the whole modal fits without scroll. */ .modal-divider { margin: 14px 0 10px; } .modal-divider span { font-size: 10px; } .modal-contacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .modal-contacts .contact-btn { padding: 10px 12px; gap: 10px; font-size: 13px; } .modal-contacts .contact-btn .icon { width: 32px; height: 32px; border-radius: 10px; } .modal-contacts .contact-btn .icon svg { width: 16px; height: 16px; } .modal-contacts .contact-btn-num { font-size: 13px; font-weight: 600; } /* Subtitle ("Написать в WhatsApp" / "Позвонить") hidden — icon + number is clear. */ .modal-contacts .contact-btn-sub { display: none; } /* OFFICES */ .offices-wrap { margin-top: 40px; gap: 24px; } /* Keep 4/3 (matches the SVG viewBox) so nothing is cropped and pins stay aligned. */ .map-canvas { aspect-ratio: 4 / 3; border-radius: var(--radius-md); } .office { padding: 18px; } /* FOOTER */ footer { padding: 48px 0 32px; } .footer-grid { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 20px; } /* Tweaks panel */ .tweaks-panel { left: 16px; right: 16px; bottom: 16px; width: auto; } /* Partner cards */ .partner-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 28px; } .partner-card { padding: 26px; border-radius: var(--radius-md); } .partner-card h3 { font-size: 24px; } .partner-card-icon { font-size: 36px; } .partner-card-icon--chart svg { width: 42px; height: 42px; } /* Subpages */ .subpage-header .nav-inner { padding: 10px 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } .subpage-back { font-size: 13px; padding: 6px 12px; } .subpage-hero { padding: 48px 0 36px; } .subpage-hero--split { padding: 36px 0 28px; } /* Stack text + illustration on mobile */ .subpage-hero-grid { grid-template-columns: 1fr; gap: 24px; text-align: center; } .subpage-hero-grid .kicker, .subpage-hero-grid .subpage-hero-cta { justify-content: center; } .subpage-hero-grid .subpage-title, .subpage-hero-grid .subpage-lead { margin-left: auto; margin-right: auto; } .subpage-hero-grid .subpage-hero-cta { flex-direction: column; align-items: stretch; } .subpage-hero-grid .subpage-hero-cta .btn { justify-content: center; } .subpage-illus { max-width: 320px; margin: 0 auto; order: -1; } .subpage-float { font-size: 28px; opacity: 0.4; } .subpage-float--1 { top: 4%; left: 4%; } .subpage-float--2 { top: 8%; right: 4%; } .subpage-float--3 { bottom: 6%; left: 6%; } .subpage-float--4 { bottom: 10%; right: 6%; } .subpage-title { font-size: clamp(28px, 8vw, 38px); margin-bottom: 14px; } .subpage-lead { font-size: 16px; margin-bottom: 24px; } .subpage-hero-cta { flex-direction: column; align-items: stretch; } .subpage-hero-cta .btn { justify-content: center; } .subpage-section-title { margin-bottom: 28px; } .subpage-points { grid-template-columns: 1fr; gap: 12px; } .subpage-point { padding: 18px; gap: 14px; } .subpage-point-icon { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; } /* Three chips + logo + burger is tight on phones — compact the chips so Онлайн / Учителям / Франшиза all fit on one line without overflow. */ .nav-chip { padding: 5px 9px; font-size: 11px; gap: 4px; } .nav-chip svg { width: 13px; height: 13px; } .nav-route-chips { gap: 4px; } /* Franchise costs */ .franchise-costs { padding: 44px 0; } .cost-grid { grid-template-columns: 1fr; gap: 12px; } .cost-card { padding: 28px 22px; } .cost-value { font-size: 44px; } /* The cost-board art is portrait (viewBox 290×362), so on a narrow column it renders very tall and its easel-stand reads as empty space. Cap the stage height and shrink it so the value cards pull up instead of floating far below. */ .franchise-cost-layout { grid-template-columns: 1fr; gap: 18px; } .franchise-cost-stage { max-width: 320px; margin: 0 auto; width: 100%; } .franchise-cost-layout .cost-card { padding: 18px 20px; } .franchise-cost-layout .cost-value { font-size: 38px; } /* Subpage CTA card */ .subpage-cta-section { padding-bottom: 56px; } .subpage-cta-card { padding: 36px 22px; border-radius: var(--radius-md); } .subpage-cta-card h2 { font-size: 24px; } .subpage-cta-card p { font-size: 15px; margin-bottom: 20px; } /* Floating WhatsApp → compact circle on phones */ .floating-wa { bottom: max(16px, env(safe-area-inset-bottom)); right: max(16px, env(safe-area-inset-right)); padding: 10px; gap: 0; border-radius: 50%; } .floating-wa-icon { width: 40px; height: 40px; background: transparent; } .floating-wa-icon svg { width: 26px; height: 26px; } .floating-wa-label { display: none; } /* "Не в Анталье?" online CTA: its long label can't fit the pill on one line on phones (.btn is white-space:nowrap), so it overflowed the viewport. Let just this CTA wrap inside a width-capped centered pill. */ .prices-online-cta .btn { white-space: normal; max-width: 300px; text-align: center; line-height: 1.35; padding: 12px 22px; } } /* Very small phones — iPhone SE, small Samsung */ @media (max-width: 380px) { .container { padding: 0 14px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .nav-inner { gap: 4px; padding: 10px 12px; } .lang-switch { padding: 2px; font-size: 11px; } .lang-switch button { padding: 4px 7px; } .logo { font-size: 18px; } .logo-img { height: 32px; } .logo-badge { padding: 2px 6px; } .nav-chip { padding: 4px 8px; font-size: 10.5px; gap: 3px; } /* Drop the Онлайн globe on the narrowest phones to win back room; the accent colour still makes the chip stand out. */ .nav-chip-online svg { display: none; } .nav-route-chips { gap: 3px; } .hero h1 { font-size: 32px; } .hero-float-1, .hero-float-2 { display: none; } .hero-tags { justify-content: flex-start; } .price-now { font-size: 46px; } .stats-strip { grid-template-columns: 1fr 1fr; } .stat-value { font-size: 26px; } } /* Respect reduced-motion */ @media (prefers-reduced-motion: reduce) { .hero-float-1, .hero-float-2, .hero-float-3 { animation: none; } .nav-drawer, .nav-drawer-panel { transition-duration: 0s; } } /* PRIVACY / LEGAL PAGE */ .subpage--privacy .subpage-hero { padding-bottom: 16px; } .subpage-updated { color: var(--ink-muted); font-size: 14px; margin-top: 10px; } /* Privacy hero illustration: shield checkmark draws in, a "protected" ring pulses outward, and a few accent dots twinkle. (Float + reduced-motion are handled by .subpage-illus.) */ .privacy-illus-check { stroke-dasharray: 180; stroke-dashoffset: 180; animation: privacy-check-draw 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.55s forwards; } .privacy-illus-ring { transform-box: fill-box; transform-origin: center; animation: privacy-ring-pulse 3.2s ease-out infinite; } .privacy-illus-dot { animation: privacy-twinkle 2.8s ease-in-out infinite; } .privacy-illus-dot--2 { animation-delay: 0.6s; } .privacy-illus-dot--3 { animation-delay: 1.2s; } .privacy-illus-dot--4 { animation-delay: 1.8s; } @keyframes privacy-check-draw { to { stroke-dashoffset: 0; } } @keyframes privacy-ring-pulse { 0% { transform: scale(0.82); opacity: 0.45; } 80% { opacity: 0; } 100% { transform: scale(1.3); opacity: 0; } } @keyframes privacy-twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.85; } } @media (prefers-reduced-motion: reduce) { .privacy-illus-check { animation: none; stroke-dashoffset: 0; } .privacy-illus-ring, .privacy-illus-dot { animation: none; } } .subpage-legal-section { padding-top: 24px; } .legal-doc { max-width: 760px; } .legal-block { padding: 22px 0; border-bottom: 1px solid var(--line); } .legal-block:last-child { border-bottom: 0; } .legal-block h2 { font-family: var(--font-display); font-weight: 500; font-size: 21px; letter-spacing: -0.01em; margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; } .legal-num { color: var(--primary); font-variant-numeric: tabular-nums; } .legal-block p { color: var(--ink-soft); line-height: 1.65; font-size: 16px; max-width: 68ch; } .legal-back { margin-top: 36px; } .legal-block a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; } /* ONLINE PAGE + homepage online CTA */ /* Tighter rhythm between the online page's sections — the default 100px section padding leaves too much air between the hero, feature cards and CTA card. */ .subpage--online .subpage-hero--split { padding-bottom: 32px; } .subpage--online > section:not(.subpage-hero):not(.subpage-cta-section) { padding: 40px 0; } .subpage--online .subpage-cta-section { padding-top: 32px; } .prices-online-cta { text-align: center; margin-top: 28px; } .online-price-tag { display: inline-block; margin: 16px 0 2px; font-weight: 600; font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; } .online-price-row { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 2px 0 10px; } .online-price-note { margin-bottom: 24px; } /* Discount + terms as one solid gold pill — mirrors the prices-card .price-first-note. */ .online-price-pill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--accent-3); color: #1E1B2E; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: center; } /* The CTA card has a coloured gradient + white text, so the price must be white too. */ .subpage-cta-card .online-price-tag { color: rgba(255, 255, 255, 0.82); } .subpage-cta-card .price-now { color: #fff; } .subpage-cta-card .price-was { color: rgba(255, 255, 255, 0.6); } .subpage-cta-card .price-period { color: rgba(255, 255, 255, 0.85); } /* Instagram in the header — eye-catching gradient pill so people notice and click. */ .nav-ig { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; color: #fff; background: linear-gradient(45deg, #f09433 5%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 2px 8px rgba(188, 24, 136, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease; } .nav-ig:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 22px rgba(188, 24, 136, 0.4); } .nav-ig svg { width: 20px; height: 20px; } @media (max-width: 700px) { .nav-ig { display: none; } } /* mobile uses the drawer button */ .nav-drawer-ig { color: #fff; background: linear-gradient(45deg, #f09433 5%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); } .nav-drawer-ig:hover { transform: translateY(-2px); }