instead (see the `main { overflow-x: clip }` rule below), which keeps the sole scroller -> scrollbar on the right. */ } /* ============================================================ GLOBAL RULE: NO ORPHAN WORDS (project-wide, applies to ALL future work) ------------------------------------------------------------ Never let a single word drop alone onto the last line of a heading or paragraph. `text-wrap: pretty` makes the browser pull the previous word down too, so a wrap always carries at least two words to the next line. This is inherited from above, but we also set it explicitly on the common text elements so it still applies if a child resets text-wrap. Degrades gracefully (normal wrapping) on browsers without text-wrap:pretty. ============================================================ */ h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dd, dt, .t-h1, .t-h2, .t-h3, .t-body, .t-body-lg, .hero__headline, .hero__tagline, .section-header > *, [class*="__title"], [class*="__desc"] { text-wrap: pretty; } /* ── Horizontal-overflow containment (mobile fix) ── The decorative .page-blobs are 1200–1500px wide and bleed past the screen edges by design. On phones that created a ~1280px sideways scroll, so the browser zoomed the whole page out (everything tiny, draggable left into empty space). We clip that horizontal bleed on

, NOT on : the root already carries `overflow-y: auto` (for the RTL scrollbar), and per spec pairing `overflow-x: clip` with a scrolling overflow-y DOWNGRADES the clip to `hidden` — which on the root propagates to the viewport and fails to stop touch panning on mobile (that was the recurring bug). On

we keep overflow-y VISIBLE, so `clip` stays `clip` (no downgrade, no new scroll container), the vertical blob bleed between sections is preserved, and the page still scrolls vertically via . Reliable on all browsers because

is a normal in-flow element, not the root. */ main { overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: 'Rubik', sans-serif; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } /* ============================================================ 1. DESIGN TOKENS ============================================================ */ :root { /* Background layers */ --bg: #0A0914; --surface-1: #110E24; --surface-2: #1A1535; --surface-3: #221C42; /* Brand colors */ --purple: #7C3AED; --purple-lt: #9333EA; --purple-dim: rgba(124, 58, 237, 0.15); --pink: #EC4899; --blue: #60A5FA; --trust: #059669; --trust-lt: #10B981; --underline: #8C52FF; /* Text scale */ --text-primary: #FFFFFF; --text-heading: #F1F5F9; --text-body-lg: #CBD5E1; --text-body: #B8C4D4; --text-muted: #94A3B8; --text-dim: #8896A8; /* was #475569 — too dark on dark bg */ --text-placeholder: #4A5568; /* for form placeholders only */ /* Spacing scale — in rem so it scales with html font-size (fluid). Reference values at 16px root: 4/8/16/24/28/40/52/68/88. */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 1rem; /* 16px */ --sp-4: 1.5rem; /* 24px */ --sp-5: 1.75rem; /* 28px */ --sp-6: 2.5rem; /* 40px */ --sp-7: 3.25rem; /* 52px */ --sp-8: 4.25rem; /* 68px */ --sp-9: 5.5rem; /* 88px */ /* Border radius */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-2xl: 24px; --r-full: 9999px; /* Shadows & glows */ --glow-purple: 0 0 24px rgba(124, 58, 237, 0.35); --glow-pink: 0 0 24px rgba(236, 72, 153, 0.25); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40); --shadow-lg: 0 8px 48px rgba(0, 0, 0, 0.55); /* Animation */ --dur-fast: 150ms; --dur-base: 350ms; --dur-slow: 600ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); /* Layout */ --container: 1200px; --container-sm: 800px; --nav-h: 4.5rem; /* 72px at root 16px — scales with html font-size */ } /* ============================================================ 2. TYPOGRAPHY ============================================================ */ /* --- Scale --- */ .t-hero { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(2.25rem, 5.5vw, 4rem); line-height: 1.15; color: var(--text-heading); letter-spacing: -0.02em; } .t-h1 { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.2; color: var(--text-heading); letter-spacing: -0.015em; } .t-h2 { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.25; color: var(--text-heading); letter-spacing: -0.01em; } .t-h3 { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.625rem); line-height: 1.3; color: var(--text-heading); } .t-h4 { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.125rem; line-height: 1.35; color: var(--text-heading); } .t-body-lg { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.75; color: var(--text-body-lg); } .t-body { font-size: 1rem; line-height: 1.7; color: var(--text-body); } .t-sm { font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); } .t-xs { font-size: 0.75rem; line-height: 1.5; color: var(--text-dim); letter-spacing: 0.03em; } /* Price display */ .t-price { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; color: var(--text-primary); } /* Overline / label */ .t-label { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 0.75rem; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); } /* --- Accent underline (exact Webflow technique) --- */ .accent-underline { text-decoration-line: underline; text-decoration-color: #8C52FF; text-decoration-skip-ink: none; text-underline-position: under; text-underline-offset: -6px; text-decoration-thickness: 4px; } /* --- Section title pattern --- */ .section-label { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff; margin-bottom: var(--sp-3); display: inline-block; border-radius: var(--r-full); padding: 4px 14px; } /* ============================================================ 3. LAYOUT UTILITIES ============================================================ */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .container-sm { width: 100%; max-width: var(--container-sm); margin-inline: auto; padding-inline: var(--sp-5); } .section { padding-block: var(--sp-7); } .section-lg { padding-block: var(--sp-8); } .section-sm { padding-block: var(--sp-5); } /* Grid utilities */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .text-center { text-align: center; } .text-start { text-align: start; } /* Stack spacing */ .stack-2 > * + * { margin-top: var(--sp-2); } .stack-3 > * + * { margin-top: var(--sp-3); } .stack-4 > * + * { margin-top: var(--sp-4); } .stack-5 > * + * { margin-top: var(--sp-5); } .stack-6 > * + * { margin-top: var(--sp-6); } /* ============================================================ 4. BUTTONS ============================================================ */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1; /* Padding in rem so buttons shrink with the fluid root font-size */ padding: 0.875rem var(--sp-5); border-radius: var(--r-full); cursor: pointer; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); white-space: nowrap; text-decoration: none; border: none; } /* No hover lift on buttons (per Tal) — only the glow + chevron glide react */ /* Chevron arrow — arrowhead only; glides forward (left, RTL) on hover */ .btn-arrow { width: 1.1em; height: 1.1em; flex-shrink: 0; stroke-width: 3.25; transition: transform 0.4s ease-in-out; } .btn:hover .btn-arrow { transform: translateX(-3px); } /* Primary: purple */ .btn-primary { background: var(--purple); color: var(--text-primary); box-shadow: var(--glow-purple); } /* Soft inner glow that brightens the button's center on hover — replaces the old hover color change. Sits above the fill, below the label (z-index:-1 inside the .btn stacking context). */ .btn-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; /* Glow concentrated along the bottom edge, rising upward; ~half the previous intensity (0.45 -> 0.22). */ background: radial-gradient(ellipse 85% 60% at 50% 100%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 75%); opacity: 0; transition: opacity 0.4s ease-in-out; pointer-events: none; z-index: -1; } .btn-primary:hover { box-shadow: 0 0 36px rgba(124, 58, 237, 0.5); } .btn-primary:hover::before { opacity: 1; } /* Secondary: outlined */ .btn-secondary { background: transparent; color: var(--text-heading); border: 1.5px solid rgba(255, 255, 255, 0.2); } .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.05); } /* Ghost: text-only */ .btn-ghost { background: transparent; color: var(--text-muted); padding-inline: var(--sp-3); } .btn-ghost:hover { color: var(--text-heading); } /* Sizes — padding in rem so buttons scale with the fluid root font-size */ .btn-sm { font-size: 0.875rem; padding: 0.625rem var(--sp-4); } .btn-lg { font-size: 1.125rem; padding: 1.0625rem var(--sp-6); } /* ============================================================ 5. NAVIGATION ============================================================ */ .nav { position: fixed; top: 0; inset-inline: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; transition: background var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .nav.scrolled { background: rgba(10, 9, 20, 0.88); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); } .nav__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); display: flex; align-items: center; justify-content: space-between; } /* Logo */ .nav__logo { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; } .nav__logo-icon { width: 32px; height: 32px; object-fit: contain; } .nav__logo-text { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.125rem; color: var(--text-primary); letter-spacing: -0.01em; } /* Links */ .nav__links { display: flex; align-items: center; gap: var(--sp-5); } /* The logo PNG carries the "STARTUP KID" wordmark in its lower band, so when the (fully visible) logo is centered in the bar the word sits ~7px below the centerline. Nudge the links + CTA down by the same amount so they line up with the wordmark — without shifting the logo and clipping the rocket. Fixed px on purpose: the logo is a fixed 50px, so this offset is constant. */ .nav__links, .nav__cta { transform: translateY(7px); } .nav__link { font-weight: 500; font-size: 0.9375rem; color: var(--text-muted); transition: color var(--dur-fast) var(--ease); text-decoration: none; white-space: nowrap; } .nav__link:hover { color: var(--text-primary); } /* Active page: highlight the current nav link (e.g. Bootcamp on /bootcamp) */ .nav__link[aria-current="page"], .nav__drawer .nav__link[aria-current="page"] { color: var(--text-primary); font-weight: 600; } .nav__soon { display: inline-block; margin-inline-start: 0.35em; padding: 0.1em 0.5em; font-size: 0.68em; font-weight: 600; line-height: 1.4; color: var(--teal); background: rgba(0, 201, 200, 0.12); border: 1px solid rgba(0, 201, 200, 0.3); border-radius: 999px; vertical-align: middle; } /* "חדש!" badge next to the Bootcamp nav link — teal, matches the bootcamp accent */ .nav__new { display: inline-block; margin-inline-start: 0.4em; padding: 0.12em 0.55em; font-size: 0.66em; font-weight: 700; line-height: 1.4; color: #00C9C8; background: rgba(0, 201, 200, 0.14); border: 1px solid rgba(0, 201, 200, 0.4); border-radius: 999px; vertical-align: middle; } /* Mobile hamburger */ .nav__hamburger { display: none; flex-direction: column; gap: 5px; padding: var(--sp-2); cursor: pointer; } .nav__hamburger span { display: block; width: 22px; height: 2px; background: var(--text-muted); border-radius: 2px; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__hamburger.open span:nth-child(2) { opacity: 0; } .nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer — full-screen glassy overlay that blends with the nav and animates open. Sits UNDER the nav (z 99 < 100) so the X + logo stay on top and read as part of the same surface. */ .nav__drawer { position: fixed; top: 0; inset-inline: 0; /* Height = content (drops from the top, ends just under the CTA — a tidy "half-screen" sheet rather than a full-screen panel). */ z-index: 99; display: flex; flex-direction: column; gap: var(--sp-3); padding: calc(var(--nav-h) + var(--sp-5)) var(--sp-6) var(--sp-6); /* Brand gradient (purple + teal) over a deep translucent base + blur, so the panel reads as one cohesive glassy sheet with the header above it. */ background: radial-gradient(135% 90% at 85% -10%, rgba(123, 79, 255, 0.30), transparent 60%), radial-gradient(120% 80% at -10% 120%, rgba(0, 201, 200, 0.16), transparent 55%), rgba(12, 11, 26, 0.88); backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%); border-radius: 0 0 var(--r-2xl) var(--r-2xl); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.55); /* Closed state */ opacity: 0; visibility: hidden; transform: translateY(-12px); pointer-events: none; transition: opacity 0.3s ease, transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.42s; } .nav__drawer.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } /* While the drawer is open, let the nav melt into the drawer surface behind it (no separate bg/blur/shadow) so the X + logo blend seamlessly. */ body.drawer-open .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .nav__drawer .nav__link { font-size: 1.125rem; font-weight: 500; color: var(--text-body-lg); padding-block: var(--sp-2); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color var(--dur-fast) var(--ease); } .nav__drawer .nav__link:hover { color: var(--text-primary); } /* CTA sits right under the last link (no bottom-pinning) */ .nav__drawer .btn { margin-top: var(--sp-3); } /* Staggered entrance: each item fades + slides up slightly, one after another */ .nav__drawer > a { opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } .nav__drawer.open > a { opacity: 1; transform: none; } .nav__drawer.open > a:nth-child(1) { transition-delay: 0.10s; } .nav__drawer.open > a:nth-child(2) { transition-delay: 0.16s; } .nav__drawer.open > a:nth-child(3) { transition-delay: 0.22s; } .nav__drawer.open > a:nth-child(4) { transition-delay: 0.28s; } .nav__drawer.open > a:nth-child(5) { transition-delay: 0.34s; } /* The CTA (6th child) should NOT trail the links — reveal it with the opening wave (same as the first item) so it appears together with the rest. */ .nav__drawer.open > a.btn { transition-delay: 0.10s; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { .nav__drawer, .nav__drawer > a { transition-duration: 0.01ms; transition-delay: 0s !important; transform: none; } } /* The drawer is a MOBILE-only element. The hamburger that opens it is hidden above 640px, but the drawer is always in the DOM — so if it's left .open and the viewport grows to desktop (e.g. rotate / resize), it would overlay the whole desktop site. Hard-hide it on desktop regardless of state. */ @media (min-width: 641px) { .nav__drawer { display: none !important; } } /* ============================================================ 6. HERO SECTION ============================================================ */ .hero { position: relative; /* Normal-flow section with FIXED padding — no min-height:100svh. The old 100svh + vertical centering made the top/bottom gaps grow elastically (infinitely on zoom-out). Now the gap above the H1 (nav clearance + --sp-7) and below the hero (--sp-7) is fixed and matches the spacing between every other section. The fluid root font-size still keeps the hero compact on shorter screens. */ padding-top: calc(var(--nav-h) + var(--sp-7)); padding-bottom: var(--sp-7); overflow: hidden; background: var(--bg); } /* Watermark wordmark behind everything */ .hero__watermark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; overflow: hidden; } .hero__watermark img { width: 130%; max-width: none; opacity: 0.035; object-fit: cover; filter: blur(1px); } /* Subtle radial vignette */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(124, 58, 237, 0.08) 0%, transparent 70%); pointer-events: none; z-index: 1; } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); text-align: center; } /* Center headline + tagline but keep them full-width for text wrapping */ .hero__headline, .hero__tagline { margin-inline: auto; } /* Center the tags row */ .hero-tags { justify-content: center; } /* Trust badge above headline */ .hero__badge { display: inline-flex; align-items: center; gap: var(--sp-2); background: rgba(5, 150, 105, 0.12); border: 1px solid rgba(5, 150, 105, 0.3); border-radius: var(--r-full); padding: 6px 14px; font-size: 0.8125rem; font-weight: 700; color: var(--trust-lt); margin-bottom: var(--sp-4); letter-spacing: 0.02em; } .hero__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--trust-lt); flex-shrink: 0; animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } .hero__headline { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: clamp(1.25rem, 2.8vw, 2.1rem); line-height: 1.25; color: var(--text-heading); letter-spacing: -0.02em; margin-bottom: var(--sp-3); max-width: 960px; overflow-wrap: break-word; } .hero__sub { font-size: clamp(1rem, 1.75vw, 1.175rem); line-height: 1.75; color: var(--text-body-lg); max-width: 640px; margin-bottom: var(--sp-6); } /* Video embed — keeps a true 16:9 ratio at every size. The trick: cap max-width by viewport height (50vh * 16/9 = ~89vh of width). When the viewport is short, max-width drops below 780px and the video shrinks proportionally — height drops, width drops, ratio stays perfect. */ .hero__video { position: relative; width: 100%; max-width: min(780px, calc(50vh * 16 / 9)); aspect-ratio: 16 / 9; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden; margin-bottom: var(--sp-6); box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.08); background: var(--surface-1); } .hero__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* CTA area */ .hero__cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); margin-inline: auto; max-width: 400px; } .hero__cta-note { font-size: 0.8125rem; color: var(--text-dim); } /* ============================================================ 7. SECTION HEADERS (shared pattern) ============================================================ */ .section-header { text-align: center; margin-bottom: var(--sp-7); } .section-header .t-h2 { margin-bottom: var(--sp-3); } .section-header .t-body-lg { max-width: 560px; margin-inline: auto; } /* ============================================================ 8. TRUST BAR ============================================================ */ .trust-bar { background: var(--surface-1); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding-block: var(--sp-4); } .trust-bar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-6); } .trust-stat { text-align: center; } .trust-stat__num { font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.625rem; color: var(--text-primary); line-height: 1; } .trust-stat__label { font-size: 0.8125rem; color: var(--text-muted); margin-top: var(--sp-1); } .trust-bar__divider { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.1); flex-shrink: 0; } /* ============================================================ 9. WIN-WIN POLICY COMPONENT ============================================================ */ .win-win { display: flex; align-items: flex-start; gap: var(--sp-4); background: rgba(5, 150, 105, 0.08); border: 1px solid rgba(5, 150, 105, 0.25); border-radius: var(--r-xl); padding: var(--sp-5); } .win-win__icon { width: 40px; height: 40px; background: rgba(5, 150, 105, 0.18); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; } .win-win__title { font-weight: 700; font-size: 1rem; color: var(--trust-lt); margin-bottom: var(--sp-2); } .win-win__text { font-size: 0.9375rem; color: var(--text-body); line-height: 1.65; } /* ============================================================ 10. HOW IT WORKS ============================================================ */ .how-it-works { background: var(--surface-1); } .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); position: relative; } /* Connector line between steps (desktop) */ .steps::before { content: ''; position: absolute; top: 28px; inset-inline-start: calc(100% / 6); inset-inline-end: calc(100% / 6); height: 1px; background: linear-gradient(to left, transparent, rgba(124, 58, 237, 0.3), transparent); pointer-events: none; } .step { position: relative; text-align: center; padding: var(--sp-5) var(--sp-4); } .step__num { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-2); border: 2px solid var(--purple); display: flex; align-items: center; justify-content: center; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 1.125rem; color: var(--purple-lt); margin-inline: auto; margin-bottom: var(--sp-4); position: relative; z-index: 1; } .step__title { font-weight: 700; font-size: 1.0625rem; color: var(--text-heading); margin-bottom: var(--sp-2); } .step__text { font-size: 0.9375rem; color: var(--text-body); line-height: 1.65; } /* ============================================================ 11. PROGRAM TRACK CARDS (Ages) ============================================================ */ .tracks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .track-card { background: var(--surface-1); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-xl); padding: var(--sp-6); transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .track-card:hover { border-color: rgba(124, 58, 237, 0.35); box-shadow: var(--glow-purple); } .track-card__tag { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-lt); background: var(--purple-dim); border-radius: var(--r-full); padding: 4px 12px; margin-bottom: var(--sp-4); } .track-card__title { font-weight: 700; font-size: 1.375rem; color: var(--text-heading); margin-bottom: var(--sp-3); } .track-card__features { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-4); } .track-card__feature { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: 0.9375rem; color: var(--text-body); line-height: 1.55; } .track-card__feature::before { content: '✓'; color: var(--trust-lt); font-weight: 700; flex-shrink: 0; margin-top: 1px; } /* ============================================================ 12. TESTIMONIALS ============================================================ */ .testimonials { background: var(--bg); } /* Full-bleed wrapper — the WhatsApp marquee spans the whole viewport width */ .testimonials-wide { width: 100%; margin-top: var(--sp-6); } /* Video grid stays within the normal container width (like the rest of the site). 4 vertical clips per row on desktop. */ .testimonials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); max-width: 1104px; /* ~20% larger than the previous 920px */ margin-inline: auto; } .testimonial-video { position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--surface-1); box-shadow: var(--shadow-card); border: 1px solid rgba(255, 255, 255, 0.07); } .testimonial-video::before { content: ''; display: block; padding-top: 177.78%; /* 9:16 vertical */ } .testimonial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } .testimonial-video__caption { padding: var(--sp-3) var(--sp-4); font-size: 0.875rem; color: var(--text-muted); background: var(--surface-1); } .testimonial-video__name { font-weight: 700; color: var(--text-body-lg); font-size: 0.9375rem; } /* Text testimonials */ .testimonial-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-top: var(--sp-5); } .testimonial-card { background: var(--surface-1); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: var(--r-xl); padding: var(--sp-5); transition: border-color var(--dur-base) var(--ease); } .testimonial-card:hover { border-color: rgba(124, 58, 237, 0.3); } .testimonial-card__quote { font-size: 0.9375rem; color: var(--text-body-lg); line-height: 1.7; margin-bottom: var(--sp-4); position: relative; padding-top: var(--sp-4); } .testimonial-card__quote::before { content: '"'; position: absolute; top: 0; inset-inline-start: 0; font-size: 2rem; color: var(--purple); font-weight: 700; line-height: 1; } .testimonial-card__author { display: flex; align-items: center; gap: var(--sp-3); } .testimonial-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--surface-2); object-fit: cover; flex-shrink: 0; } .testimonial-card__name { font-weight: 700; font-size: 0.875rem; color: var(--text-heading); } .testimonial-card__role { font-size: 0.8rem; color: var(--text-dim); } /* ============================================================ 13. PRICING ============================================================ */ .pricing { background: var(--surface-1); } .pricing-card { background: var(--surface-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-2xl); padding: var(--sp-7); max-width: 540px; margin-inline: auto; text-align: center; position: relative; box-shadow: var(--shadow-lg); } .pricing-card__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--purple); color: white; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; padding: 5px 16px; border-radius: var(--r-full); white-space: nowrap; } .pricing-card__title { font-weight: 700; font-size: 1.25rem; color: var(--text-heading); margin-bottom: var(--sp-3); } .pricing-card__price-row { display: flex; align-items: baseline; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-2); } .pricing-card__price { font-family: 'Rubik', sans-serif; font-weight: 900; font-size: clamp(2.5rem, 5vw, 3.25rem); color: var(--text-primary); line-height: 1; } .pricing-card__currency { font-weight: 700; font-size: 1.25rem; color: var(--text-muted); } .pricing-card__period { font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--sp-5); } .pricing-card__features { text-align: start; margin-bottom: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); } .pricing-card__feature { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: 0.9375rem; color: var(--text-body-lg); } .pricing-card__feature-icon { width: 20px; height: 20px; border-radius: 50%; background: rgba(5, 150, 105, 0.15); display: flex; align-items: center; justify-content: center; color: var(--trust-lt); font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .pricing-card__divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin-block: var(--sp-5); } /* ============================================================ 14. FAQ ============================================================ */ .faq { background: var(--bg); } .faq-list { max-width: 720px; margin-inline: auto; } .faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .faq-item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.08); } .faq-question { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-4); font-weight: 700; font-size: 1.0625rem; color: var(--text-heading); cursor: pointer; width: 100%; text-align: start; background: none; border: none; font-family: 'Rubik', sans-serif; transition: color var(--dur-fast) var(--ease); } .faq-question:hover { color: var(--text-primary); } .faq-question__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--purple-lt); font-size: 1rem; transition: transform var(--dur-base) var(--ease), background var(--dur-base) var(--ease); } .faq-item.open .faq-question__icon { transform: rotate(45deg); background: var(--purple-dim); } .faq-answer { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease); } .faq-answer__inner { padding-bottom: var(--sp-4); font-size: 0.9375rem; color: var(--text-body); line-height: 1.75; } /* ============================================================ 15. LEAD FORM ============================================================ */ .lead-form-section { background: var(--surface-1); position: relative; overflow: hidden; } .lead-form-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(124, 58, 237, 0.07) 0%, transparent 70%); pointer-events: none; } .lead-form { max-width: 480px; margin-inline: auto; position: relative; z-index: 1; } .form-group { margin-bottom: var(--sp-4); } .form-label { display: block; font-size: 0.875rem; font-weight: 700; color: var(--text-body-lg); margin-bottom: var(--sp-2); } .form-input, .form-select { width: 100%; background: var(--surface-2); border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: var(--r-lg); padding: 13px var(--sp-4); font-family: 'Rubik', sans-serif; font-size: 1rem; color: var(--text-heading); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); direction: rtl; appearance: none; } .form-input::placeholder { color: var(--text-placeholder); } .form-input:focus, .form-select:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15); } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 12px center; padding-left: 40px; cursor: pointer; } .form-select option { background: var(--surface-2); color: var(--text-heading); } .form-submit { width: 100%; margin-top: var(--sp-2); } /* Thank you state */ .form-thanks { display: none; text-align: center; padding: var(--sp-7) var(--sp-5); animation: fadeInUp var(--dur-base) var(--ease) both; } .form-thanks.visible { display: block; } .form-thanks__icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(5, 150, 105, 0.15); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-inline: auto; margin-bottom: var(--sp-4); } /* ============================================================ 16. ABOUT TEASER (Home) ============================================================ */ .about-teaser { background: var(--bg); } .about-teaser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; } .about-teaser__photo { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(255, 255, 255, 0.08); aspect-ratio: 4/3; object-fit: cover; width: 100%; } .about-teaser__tag { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--purple-lt); background: var(--purple-dim); border-radius: var(--r-full); padding: 4px 12px; margin-bottom: var(--sp-3); } /* ============================================================ 17. APP SCREENS (Social Proof) ============================================================ */ .app-screens { background: var(--surface-1); } .app-screens__gallery { display: flex; gap: var(--sp-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sp-3); -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(124, 58, 237, 0.4) transparent; } .app-screens__gallery::-webkit-scrollbar { height: 4px; } .app-screens__gallery::-webkit-scrollbar-track { background: transparent; } .app-screens__gallery::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.4); border-radius: 2px; } .app-screen { flex-shrink: 0; width: min(280px, 75vw); scroll-snap-align: start; border-radius: var(--r-xl); overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-card); } .app-screen img { width: 100%; height: auto; display: block; } /* ============================================================ 18. FOOTER ============================================================ */ .footer { background: var(--surface-1); border-top: 1px solid rgba(255, 255, 255, 0.06); padding-block: var(--sp-7); } .footer__container { background: linear-gradient(135deg, rgba(123, 79, 255, 0.18), rgba(0, 201, 200, 0.14)); border: 1px solid rgba(123, 79, 255, 0.35); border-radius: var(--r-2xl); padding: var(--sp-7); box-shadow: var(--glow); } .footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-3); } .footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(123, 79, 255, 0.3); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .footer__social-link:hover { color: #fff; background: var(--purple); transform: translateY(-2px); } .footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--sp-7); } .footer__brand-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-top: var(--sp-3); max-width: 300px; } .footer__col-title { font-weight: 700; font-size: 0.875rem; color: var(--text-body-lg); margin-bottom: var(--sp-4); } .footer__links { display: flex; flex-direction: column; gap: var(--sp-2); } .footer__link { font-size: 0.9rem; color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease); } .footer__link:hover { color: var(--text-body-lg); } .footer__bottom { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-3); } .footer__copy { font-size: 0.8125rem; color: var(--text-dim); } /* ============================================================ 19. SCROLL REVEAL ANIMATIONS ============================================================ */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 100ms; } .reveal-delay-2 { transition-delay: 200ms; } .reveal-delay-3 { transition-delay: 300ms; } .reveal-delay-4 { transition-delay: 400ms; } /* Fade only variant */ .reveal-fade { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); } .reveal-fade.visible { opacity: 1; } /* ============================================================ 20. UTILITY CLASSES ============================================================ */ .mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); } .mt-7 { margin-top: var(--sp-7); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); } .mb-5 { margin-bottom: var(--sp-5); } .mb-6 { margin-bottom: var(--sp-6); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ============================================================ 21. RESPONSIVE — TABLET (max 960px) ============================================================ */ @media (max-width: 960px) { :root { --nav-h: 4rem; /* 64px at root 16px */ } .grid-3 { grid-template-columns: 1fr 1fr; } .grid-4 { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } .steps::before { display: none; } .tracks { grid-template-columns: 1fr; } .about-teaser__grid { grid-template-columns: 1fr; gap: var(--sp-6); } .about-teaser__photo { max-width: 480px; } .testimonials-grid { grid-template-columns: repeat(2, 1fr); } .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } .footer__inner > :first-child { grid-column: 1 / -1; } } /* ============================================================ 22. RESPONSIVE — MOBILE (max 640px) ============================================================ */ @media (max-width: 640px) { :root { --nav-h: 3.75rem; /* 60px at root 16px */ } .section { padding-block: var(--sp-7); } .section-lg { padding-block: var(--sp-8); } .section-sm { padding-block: var(--sp-5); } .container, .container-sm { padding-inline: var(--sp-4); } /* Nav: hide links, show hamburger */ .nav__links { display: none; } .nav__cta { display: none; } .nav__hamburger { display: flex; } /* Logo fix: the has a hard inline height:50px, but --nav-h shrinks with the fluid root font on mobile (down to ~50px). The 50px logo then overflowed the nav and its top got clipped at the viewport edge. Scale the logo with the nav (rem) so it keeps ~8px clearance at any root size. !important is needed to beat the inline height on the . */ .nav__logo-img { height: 2.5rem !important; } /* Hero */ .hero { padding-top: calc(var(--nav-h) + var(--sp-4)); } .hero__cta { align-items: stretch; } .hero__cta .btn { width: 100%; justify-content: center; } /* Bigger headline on mobile only (desktop keeps its clamp size) */ .hero__headline { font-size: 1.9rem; line-height: 1.2; } /* Grid → single column */ .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .steps { max-width: none; } .testimonial-cards { grid-template-columns: 1fr; } .trust-bar__inner { gap: var(--sp-4); } .trust-bar__divider { display: none; } .pricing-card { padding: var(--sp-5); } /* Footer */ .footer__inner { grid-template-columns: 1fr; gap: var(--sp-5); } .footer__inner > :first-child { grid-column: auto; } .footer__bottom { flex-direction: column; align-items: flex-start; } /* Win-win */ .win-win { flex-direction: column; } } /* ============================================================ 23. RESPONSIVE — SHORT VIEWPORTS (height-based) Safety net for laptops with limited vertical space (e.g. 1366×768). The fluid root font-size already shrinks typography, spacing, and the video. This just tightens hero gaps a touch more. ============================================================ */ @media (max-height: 760px) { .hero { padding-top: calc(var(--nav-h) + var(--sp-4)); padding-bottom: var(--sp-4); } .hero__video { margin-bottom: var(--sp-4); } .hero-tags { margin-bottom: var(--sp-3); } } @media (max-height: 620px) { .hero-tags { /* On really short screens, hide the tag row to save space — the headline, video, and CTA carry the message just fine. */ display: none; } } /* ============================================================ ADDITIONS — New sections from original site copy ============================================================ */ /* Hero tagline */ .hero__tagline { font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; color: var(--text-heading); margin-bottom: var(--sp-3); max-width: 700px; line-height: 1.4; } /* Hero subject tags */ .hero-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); justify-content: center; } .hero-tag { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-full); padding: 5px 13px; font-size: 0.875rem; color: var(--text-body-lg); white-space: nowrap; } /* Zombie / school section */ .zombie-section { background: transparent; } .zombie-grid { display: grid; grid-template-columns: 340px 540px; gap: var(--sp-5); align-items: center; justify-content: center; margin: 0 auto; } .zombie-grid > figure { display: flex; justify-content: center; } .zombie-img { width: 100%; max-width: 340px; border-radius: var(--r-xl); display: block; } .zombie-text { text-align: right; } .zombie-text h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; color: var(--text-heading); margin-bottom: var(--sp-3); } .zombie-text p { font-size: clamp(0.95rem, 1.5vw, 1.1rem); line-height: 1.9; color: var(--text-body-lg); margin-bottom: var(--sp-4); } .zombie-text p:last-child { margin-bottom: 0; } /* Subject cards (3 topics) */ .subject-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); } .subject-card { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-xl); padding: var(--sp-5); display: flex; flex-direction: column; } .subject-card__icon { font-size: 2rem; text-align: center; margin-bottom: var(--sp-3); } .subject-card__title { font-size: 1.05rem; font-weight: 700; text-align: center; color: var(--text-heading); margin-bottom: var(--sp-2); } .subject-card__sub { font-size: 0.75rem; color: var(--text-body); text-align: center; margin-bottom: var(--sp-3); } .subject-card__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); } .subject-card__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; color: var(--text-body); line-height: 1.6; } .subject-card__list li::before { content: '✦'; color: var(--purple); font-size: 0.6rem; flex-shrink: 0; margin-top: 5px; } /* How it works — list style */ .hiw-list { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 760px; margin-inline: auto; } .hiw-item { display: flex; gap: var(--sp-4); align-items: flex-start; background: var(--surface-1); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-xl); padding: var(--sp-4) var(--sp-5); } .hiw-item__icon { font-size: 1.75rem; flex-shrink: 0; line-height: 1; padding-top: 2px; } .hiw-item__text { line-height: 1.7; } .hiw-item__text strong { color: var(--text-heading); } /* App section */ .app-section { background: transparent; } .app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; } .app-screenshot { width: 100%; border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-lg); } .app-list { list-style: none; padding: 0; margin: var(--sp-4) 0; display: flex; flex-direction: column; gap: var(--sp-2); } .app-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.95rem; line-height: 1.5; } .app-list li::before { content: '✦'; color: var(--purple); font-size: 0.6rem; flex-shrink: 0; margin-top: 6px; } /* Marquee (WhatsApp screenshots) */ .marquee-wrapper { overflow: hidden; position: relative; padding: var(--sp-4) 0; } .marquee-wrapper::before, .marquee-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .marquee-wrapper::before { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .marquee-wrapper::after { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .marquee-track { display: flex; animation: marquee-rtl 45s linear infinite; width: max-content; } .marquee-track:hover { animation-play-state: paused; } /* RTL marquee: the track is anchored to the right and its duplicate copies extend off-screen to the LEFT, so we must translate the track to the RIGHT (positive X) to scroll new images in — translating left would drag the track's right edge inward and expose an empty gap. Moving by exactly +50% (one full duplicated set, including each image's trailing margin) lands on an identical frame, so the loop is perfectly seamless and never stops. */ @keyframes marquee-rtl { from { transform: translateX(0); } to { transform: translateX(50%); } } .marquee-img { width: 300px; border-radius: var(--r-xl); flex-shrink: 0; display: block; margin-inline-start: var(--sp-3); } /* Omer bio section */ .omer-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--sp-8); align-items: center; } .omer-photo-wrap { position: relative; } .omer-photo { width: 100%; border-radius: var(--r-xl); display: block; } /* Photo collage — main image with two overlapping corner photos */ .omer-collage { position: relative; padding-bottom: 18%; padding-inline-start: 10%; max-width: 340px; margin-inline: auto; } .omer-photo--main { width: 90%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 35%; } .omer-photo--badge { position: absolute; width: 42%; height: auto; border-radius: var(--r-xl); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } .omer-photo--br { bottom: 6%; right: 0; transform: rotate(4deg); } .omer-photo--bl { bottom: 0; left: 0; transform: rotate(-4deg); } .brands-grid { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 0.75rem var(--sp-5); align-items: center; margin: var(--sp-5) 0; max-width: 520px; } /* single container behind the logo column */ .brands-grid::before { content: ""; position: absolute; inset-block: calc(-1 * var(--sp-4)); inset-inline-start: 0; width: 88px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(11, 9, 20, 0.9) 100%); border: 1px solid rgba(124, 58, 237, 0.25); border-radius: var(--r-xl); box-shadow: 0 2px 16px rgba(0,0,0,0.3); z-index: 0; } .brand-logo { position: relative; z-index: 1; justify-self: center; height: 36px; width: auto; max-width: 56px; object-fit: contain; filter: brightness(0.95) saturate(0.85); } .brand-text { position: relative; z-index: 1; font-size: 1.0625rem; color: var(--text-body); line-height: 1.45; } .brand-text strong { color: var(--text-heading); } /* Process — 4 steps */ .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } .process-step { background: var(--surface-1); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--r-xl); padding: var(--sp-5); } .process-step__num { width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #fff; font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); } .process-step__title { font-weight: 700; font-size: 1rem; color: var(--text-heading); margin-bottom: var(--sp-2); } .process-step__text { font-size: 0.875rem; color: var(--text-body); line-height: 1.6; } /* Responsive additions */ /* Zombie section stacks earlier (1024px) so its two fixed columns never overflow / force the long lines to wrap into orphan words. */ @media (max-width: 1024px) { .zombie-grid { grid-template-columns: 1fr; max-width: 600px; } .zombie-grid > figure { order: -1; } } @media (max-width: 960px) { .app-grid { grid-template-columns: 1fr; } .omer-grid { grid-template-columns: 1fr; } .subject-cards { grid-template-columns: 1fr; } .process-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .process-grid { grid-template-columns: 1fr; } /* Subject tags: as large as possible while still capping at 3 rows. The width-based clamp scales the text up on wider phones (≈10.5px @360, ≈11.6px @393, ≈13px @430+) but never enough to spill onto a 4th row. px-based (not rem) so it tracks viewport WIDTH and isn't thrown off by the height-based fluid root. Placed after the base .hero-tag rule so it wins on source order. */ .hero-tags { gap: var(--sp-1); } .hero-tag { font-size: clamp(10.5px, calc(3.4vw - 1.74px), 13px); padding: 4px 8px; } .brands-grid { grid-template-columns: 64px 1fr; } .brands-grid::before { width: 64px; } .brand-logo { height: 30px; max-width: 44px; } /* School-intro paragraphs + app feature list: match the regular body text size on mobile. Both otherwise floor at 0.95rem and read too small on a narrow phone. Desktop unchanged. */ .zombie-text p, .app-list li { font-size: 1rem; } } /* ============================================================ COLOR & GRADIENT IMPROVEMENTS ============================================================ */ /* ---------- Subject cards — purple/pink gradient borders ---------- */ .subject-card { background: linear-gradient(145deg, rgba(124, 58, 237, 0.10) 0%, rgba(17, 14, 36, 0.95) 60%); border: 1px solid rgba(124, 58, 237, 0.35); box-shadow: 0 0 24px rgba(124, 58, 237, 0.08); transition: border-color 300ms, box-shadow 300ms; } .subject-card:hover { border-color: rgba(124, 58, 237, 0.6); box-shadow: 0 0 40px rgba(124, 58, 237, 0.18); } .subject-card:nth-child(2) { background: linear-gradient(145deg, rgba(236, 72, 153, 0.10) 0%, rgba(17, 14, 36, 0.95) 60%); border-color: rgba(236, 72, 153, 0.35); box-shadow: 0 0 24px rgba(236, 72, 153, 0.08); } .subject-card:nth-child(2):hover { border-color: rgba(236, 72, 153, 0.6); box-shadow: 0 0 40px rgba(236, 72, 153, 0.18); } .subject-card:nth-child(3) { background: linear-gradient(145deg, rgba(6, 182, 212, 0.10) 0%, rgba(17, 14, 36, 0.95) 60%); border-color: rgba(6, 182, 212, 0.35); box-shadow: 0 0 24px rgba(6, 182, 212, 0.08); } .subject-card:nth-child(3):hover { border-color: rgba(6, 182, 212, 0.6); box-shadow: 0 0 40px rgba(6, 182, 212, 0.18); } .subject-card__title { font-size: 1.25rem; } /* ---------- HIW items — more visible ---------- */ .hiw-item { background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(11, 9, 20, 0.9) 100%); border: 1px solid rgba(124, 58, 237, 0.25); box-shadow: 0 2px 16px rgba(0,0,0,0.3); transition: border-color 300ms; } .hiw-item:hover { border-color: rgba(124, 58, 237, 0.5); } /* ---------- Process steps ---------- */ .process-step { background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(17, 14, 36, 0.95) 100%); border: 1px solid rgba(124, 58, 237, 0.25); box-shadow: 0 2px 16px rgba(0,0,0,0.3); } /* ---------- Section backgrounds with gradient glows ---------- */ /* Program cards section */ #program { background: var(--bg); position: relative; } #program::before { content: ''; position: absolute; top: -10%; left: 50%; transform: translateX(-50%); width: 70%; height: 60%; background: radial-gradient(ellipse, rgba(124, 58, 237, 0.12) 0%, transparent 70%); pointer-events: none; } /* HIW section */ .hiw-section-wrap { background: transparent; position: relative; } /* General: add glow to surface-1 sections */ section[style*="surface-1"] { position: relative; } /* Zombie section glow */ .zombie-section { position: relative; } .zombie-section::before { content: ''; position: absolute; top: 0; right: 0; width: 45%; height: 100%; background: radial-gradient(ellipse at right top, rgba(236, 72, 153, 0.10) 0%, transparent 65%); pointer-events: none; } .zombie-section::after { content: ''; position: absolute; bottom: 0; left: 0; width: 45%; height: 60%; background: radial-gradient(ellipse at left bottom, rgba(124, 58, 237, 0.10) 0%, transparent 65%); pointer-events: none; } /* App section glow */ .app-section { position: relative; } .app-section::before { content: ''; position: absolute; top: 50%; right: -5%; transform: translateY(-50%); width: 40%; height: 80%; background: radial-gradient(ellipse, rgba(124, 58, 237, 0.15) 0%, transparent 70%); pointer-events: none; } /* Testimonials section glow */ #testimonials { position: relative; } #testimonials::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 50%; background: radial-gradient(ellipse, rgba(236, 72, 153, 0.08) 0%, transparent 70%); pointer-events: none; } /* About section */ #about { position: relative; } #about::before { content: ''; position: absolute; bottom: 0; left: 0; width: 50%; height: 60%; background: radial-gradient(ellipse at left bottom, rgba(124, 58, 237, 0.12) 0%, transparent 70%); pointer-events: none; } /* FAQ section glow */ #faq { position: relative; } #faq::before { content: ''; position: absolute; top: 0; right: 0; width: 45%; height: 50%; background: radial-gradient(ellipse at right top, rgba(124, 58, 237, 0.10) 0%, transparent 70%); pointer-events: none; } /* ---------- Hero — stronger gradient ---------- */ .hero::before { background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 70%) !important; } /* ---------- Trust bar — colored ---------- */ .trust-bar { background: linear-gradient(180deg, rgba(124, 58, 237, 0.06) 0%, transparent 100%); border-top: 1px solid rgba(124, 58, 237, 0.15); border-bottom: 1px solid rgba(124, 58, 237, 0.15); } /* ---------- FAQ items ---------- */ .faq-item { border-bottom-color: rgba(124, 58, 237, 0.2) !important; } .faq-item.open .faq-question { color: var(--purple-lt); } /* ---------- Section labels — white text for readability ---------- */ .section-label { /* White text on a more solid purple pill — the old purple-on-translucent-purple was low-contrast and hard to read over the dark gradient background. */ color: #ffffff; border: 1px solid rgba(124, 58, 237, 0.55); background: rgba(124, 58, 237, 0.30); } /* ---------- Win-win / trust banner ---------- */ .win-win { background: linear-gradient(135deg, rgba(5, 150, 105, 0.10) 0%, rgba(17, 14, 36, 0.8) 100%); border: 1px solid rgba(5, 150, 105, 0.3); } /* ============================================================ UNIFIED PAGE BACKGROUND — floating blobs across all sections ============================================================ */ /* Single base background on body */ body { background: #0A0914; } /* All sections transparent — blobs show through */ .hero, .zombie-section, #program, .hiw-section-wrap, .app-section, #about, #testimonials, section[aria-labelledby="process-heading"], #faq { background: transparent !important; } /* Hero top glow — cyan + pink blend */ .hero::before { background: radial-gradient(ellipse 70% 60% at 80% -10%, rgba(56,189,248,0.45) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 20% 20%, rgba(236,72,153,0.35) 0%, transparent 60%) !important; } /* Kill old per-section pseudo-elements */ .zombie-section::before, .zombie-section::after, #program::before, .app-section::before, #about::before, #testimonials::before, #faq::before { display: none !important; } /* ── Blob layer ── */ .page-blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; /* No overflow:hidden — blobs must bleed past section boundaries */ } /* All sections need z-index so content sits above blobs. IMPORTANT: exclude .hero__watermark so its position:absolute stays intact */ .hero > *:not(.hero__watermark), .zombie-section > *, #program > *, .hiw-section-wrap > *, .app-section > *, #about > *, #testimonials > *, section[aria-labelledby="process-heading"] > *, #faq > * { position: relative; z-index: 1; } .blob { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(72px); } /* Blobs are positioned with % of the full page height (the .page-blobs layer spans the entire

), NOT vh. This keeps them distributed across the actual content at any screen size, with generous vertical overlap so the ambient glow is continuous — no dark bands between sections. */ /* Blob 1 — cyan top-right (hero) */ .blob-1 { width: 1200px; height: 1200px; background: radial-gradient(circle, rgba(56,189,248,0.60) 0%, rgba(99,102,241,0.30) 55%, transparent 75%); top: -3%; right: -280px; } /* Blob 2 — vivid pink left (zombie + program) */ .blob-2 { width: 1250px; height: 1250px; background: radial-gradient(circle, rgba(236,72,153,0.60) 0%, rgba(192,38,211,0.25) 55%, transparent 75%); top: 11%; left: -260px; } /* Blob 3 — purple right (HIW + app) */ .blob-3 { width: 1300px; height: 1300px; background: radial-gradient(circle, rgba(139,92,246,0.58) 0%, rgba(56,189,248,0.22) 55%, transparent 75%); top: 30%; right: -260px; } /* Blob 4 — pink + purple left (about + testimonials) */ .blob-4 { width: 1300px; height: 1300px; background: radial-gradient(circle, rgba(236,72,153,0.55) 0%, rgba(139,92,246,0.22) 55%, transparent 75%); top: 49%; left: -240px; } /* Blob 5 — cyan + purple right (process + FAQ) */ .blob-5 { width: 1500px; height: 1500px; background: radial-gradient(circle, rgba(56,189,248,0.50) 0%, rgba(139,92,246,0.25) 55%, transparent 75%); top: 68%; right: -220px; } /* MOBILE: the desktop blobs are 1200–1500px — 3x a phone's width — so each one floods the whole screen and the background reads as solid blue/purple. On mobile we want the original intent: a near-black base with small rounded blue/pink gradient TOUCHES. Scale the blobs down to ~viewport-relative sizes and tuck them toward alternating edges so the dark base dominates and each blob is a localized glow. blob-1 starts below the nav so the header stays dark (it was the worst offender — it covered the entire top). */ @media (max-width: 640px) { .blob { filter: blur(48px); } .blob-1 { width: 76vw; height: 76vw; top: 2%; right: -26vw; left: auto; } .blob-2 { width: 80vw; height: 80vw; top: 13%; left: -28vw; right: auto; } .blob-3 { width: 82vw; height: 82vw; top: 30%; right: -26vw; left: auto; } .blob-4 { width: 82vw; height: 82vw; top: 48%; left: -28vw; right: auto; } .blob-5 { width: 88vw; height: 88vw; top: 68%; right: -24vw; left: auto; } } /* --- Cards: remove dark override, keep color only from gradient sections --- */ .subject-card, .hiw-item, .process-step { background: rgba(255, 255, 255, 0.045) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.10) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important; } .subject-card:hover, .hiw-item:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(255, 255, 255, 0.18) !important; } /* ============================================================ POPUP MODAL ============================================================ */ .popup-overlay { position: fixed; inset: 0; z-index: 9999; background: rgba(5, 4, 18, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); opacity: 0; transition: opacity 0.25s ease; } .popup-overlay:not([hidden]) { opacity: 1; } .popup-overlay[hidden] { display: none !important; } /* ============================================================ LEGAL PAGES (תקנון / מדיניות פרטיות) ============================================================ */ .legal { padding-top: calc(var(--nav-h) + var(--sp-7)); padding-bottom: var(--sp-8); } .legal__header { text-align: center; margin-bottom: var(--sp-7); } .legal__updated { color: var(--text-muted); font-size: 0.95rem; margin-top: var(--sp-2); } .legal__card { background: rgba(17, 14, 36, 0.62); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--r-2xl); box-shadow: var(--shadow-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: clamp(1.5rem, 4vw, 3rem); } .legal__intro { color: var(--text-body-lg); font-size: 1.05rem; line-height: 1.9; margin-bottom: var(--sp-5); } .legal h2 { font-size: 1.4rem; color: var(--purple-lt); margin-top: var(--sp-6); margin-bottom: var(--sp-3); padding-bottom: var(--sp-2); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .legal h2:first-of-type { margin-top: 0; } .legal h3 { font-size: 1.1rem; color: var(--text-heading); margin-top: var(--sp-4); margin-bottom: var(--sp-2); } .legal p, .legal li { color: var(--text-body); line-height: 1.95; font-size: 1rem; } .legal p { margin-bottom: var(--sp-3); } .legal ul { list-style: none; margin: 0 0 var(--sp-3); padding: 0; } .legal ul li { position: relative; padding-inline-start: 1.5rem; margin-bottom: var(--sp-2); } .legal ul li::before { content: ""; position: absolute; inset-inline-start: 0.25rem; top: 0.75em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--purple-lt); } .legal strong { color: var(--text-heading); font-weight: 700; } .legal a { color: var(--purple-lt); text-decoration: underline; } .popup-card { background: #13102a; border: 1px solid rgba(124, 58, 237, 0.55); border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6); width: 100%; max-width: 460px; position: relative; /* Depth shadow + purple glow outline */ box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(124, 58, 237, 0.35), 0 0 28px rgba(124, 58, 237, 0.55), 0 0 64px rgba(124, 58, 237, 0.28); } .popup-close { position: absolute; top: var(--sp-3); left: var(--sp-3); background: transparent; border: none; color: var(--text-dim); font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 4px 8px; transition: color 0.2s; } .popup-close:hover { color: var(--text-heading); } .popup-title { font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 700; color: var(--text-heading); margin-bottom: var(--sp-5); text-align: center; } .popup-sub { font-size: 0.9rem; color: var(--text-dim); text-align: center; margin-bottom: var(--sp-5); } /* Inline thank-you state (shown after a successful submit, replaces the form) */ .popup-thanks { text-align: center; padding: var(--sp-5) 0; outline: none; } .popup-thanks[hidden] { display: none !important; } .popup-thanks__head { display: flex; align-items: center; justify-content: center; gap: 0.55em; font-size: clamp(1.25rem, 2.5vw, 1.6rem); font-weight: 700; color: var(--text-heading); line-height: 1.3; } .popup-thanks__check { width: 1.35em; height: 1.35em; flex-shrink: 0; color: var(--text-heading); } .popup-thanks__sub { margin-top: var(--sp-3); font-size: 1.05rem; color: var(--text-heading); /* Same accent underline as the hero headline */ text-decoration-line: underline; text-decoration-color: #8C52FF; text-decoration-skip-ink: none; text-underline-position: under; text-underline-offset: -2px; text-decoration-thickness: 3px; } .popup-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-3); } .popup-field label { font-size: 0.85rem; font-weight: 600; color: var(--text-body); } .popup-field input { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); padding: 12px 14px; color: var(--text-heading); font-size: 1rem; font-family: 'Rubik', sans-serif; outline: none; transition: border-color 0.2s; direction: rtl; } .popup-field input:focus { border-color: var(--purple); } .popup-field input.error { border-color: var(--pink); } /* Cohort dropdown — matches the text inputs, custom arrow on the left (RTL) */ .popup-field select { width: 100%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); padding: 12px 14px 12px 40px; color: var(--text-heading); font-size: 1rem; font-family: 'Rubik', sans-serif; outline: none; transition: border-color 0.2s; direction: rtl; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238892A4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; background-size: 16px; } .popup-field select:focus { border-color: var(--purple); } .popup-field select.error { border-color: var(--pink); } /* Dim the text while the placeholder option is still selected */ .popup-field select:required:invalid { color: var(--text-dim); } .popup-field select option { color: var(--text-heading); background: #1b1736; } .popup-field select option[value=""] { color: var(--text-dim); } .popup-consent { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--sp-3); font-size: 0.85rem; line-height: 1.55; color: var(--text-dim); cursor: pointer; text-align: right; } .popup-consent input[type="checkbox"] { flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px; accent-color: var(--purple); cursor: pointer; } .popup-consent a { color: var(--purple-lt); text-decoration: underline; } .popup-consent a:hover { color: var(--text-heading); } /* Required-consent error state — flagged when the user submits without ticking */ .popup-consent.error { color: var(--pink); } .popup-consent.error input[type="checkbox"] { outline: 2px solid var(--pink); outline-offset: 1px; accent-color: var(--pink); } .popup-consent-error { margin-top: var(--sp-2); color: var(--pink); font-size: 0.82rem; font-weight: 600; text-align: center; } .btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: saturate(0.6); } /* ============================================================ REGISTER PAGE — Multi-step form ============================================================ */ .register-page { min-height: 100vh; background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(124,58,237,0.3) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 80%, rgba(236,72,153,0.2) 0%, transparent 60%), #0A0914; display: flex; flex-direction: column; align-items: center; padding: calc(var(--nav-h) + var(--sp-6)) var(--sp-4) var(--sp-9); } .register-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--r-xl); padding: var(--sp-7) var(--sp-6); width: 100%; max-width: 580px; backdrop-filter: blur(8px); } /* Progress bar */ .reg-progress { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: var(--sp-6); } .reg-step-dot { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--text-dim); flex-shrink: 0; transition: all 0.3s; } .reg-step-dot.active { background: var(--purple); border-color: var(--purple); color: #fff; } .reg-step-dot.done { background: var(--trust-lt); border-color: var(--trust-lt); color: #fff; } .reg-step-line { height: 2px; width: 48px; background: rgba(255,255,255,0.1); flex-shrink: 0; } .reg-step-line.done { background: var(--trust-lt); } /* Step content */ .reg-step { display: none; } .reg-step.active { display: block; } .reg-step-title { font-size: clamp(1.2rem, 2.5vw, 1.5rem); font-weight: 700; color: var(--text-heading); margin-bottom: var(--sp-2); text-align: center; } .reg-step-sub { font-size: 0.9rem; color: var(--text-dim); text-align: center; margin-bottom: var(--sp-5); } /* Kids count selector */ .kids-count-row { display: flex; gap: var(--sp-3); justify-content: center; margin-bottom: var(--sp-5); } .kids-count-btn { width: 56px; height: 56px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); color: var(--text-heading); font-size: 1.25rem; font-weight: 700; cursor: pointer; transition: all 0.2s; font-family: 'Rubik', sans-serif; } .kids-count-btn:hover, .kids-count-btn.selected { background: var(--purple); border-color: var(--purple); } /* Age inputs */ .age-inputs { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); } .age-row { display: flex; align-items: center; gap: var(--sp-3); } .age-row label { min-width: 90px; font-size: 0.9rem; color: var(--text-body); font-weight: 600; } .age-row select { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-md); padding: 10px 12px; color: var(--text-heading); font-size: 0.95rem; font-family: 'Rubik', sans-serif; outline: none; cursor: pointer; direction: rtl; } .age-row select:focus { border-color: var(--purple); } /* Group cards (step 2) */ .group-cards { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-5); } .group-card { background: rgba(255,255,255,0.045); border: 2px solid rgba(255,255,255,0.10); border-radius: var(--r-lg); padding: var(--sp-4); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: var(--sp-3); } .group-card:hover { border-color: rgba(124,58,237,0.5); background: rgba(124,58,237,0.08); } .group-card.selected { border-color: var(--purple); background: rgba(124,58,237,0.12); } .group-card__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.2s; } .group-card.selected .group-card__radio { border-color: var(--purple); background: var(--purple); } .group-card.selected .group-card__radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .group-card__info { flex: 1; } .group-card__name { font-weight: 700; color: var(--text-heading); font-size: 0.95rem; margin-bottom: 2px; } .group-card__meta { font-size: 0.8rem; color: var(--text-dim); } .group-placeholder { text-align: center; padding: var(--sp-6); color: var(--text-dim); font-size: 0.9rem; border: 1px dashed rgba(255,255,255,0.12); border-radius: var(--r-lg); } /* Navigation buttons */ .reg-nav { display: flex; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-4); } .reg-nav .btn-back { background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--text-body); border-radius: var(--r-full); padding: 10px 22px; cursor: pointer; font-family: 'Rubik', sans-serif; font-size: 0.9rem; transition: all 0.2s; } .reg-nav .btn-back:hover { border-color: rgba(255,255,255,0.3); color: var(--text-heading); }