/* ========================================================================== 3D Journey with LX — design system Dark premium + 3D glow. No framework, no build step. Sections 01 Tokens 02 Reset & base 03 Layout 04 Ambient background 05 Buttons & pills 06 Header / nav 07 Hero 08 Section furniture 09 Reels 10 Trailer 11 Instructor 12 Benefits (bento) 13 Curriculum accordion 14 Pricing 15 Testimonials 16 FAQ 17 Footer 18 Forms 19 Alerts 20 Motion & reveal 21 Utilities ========================================================================== */ /* ----------------------------------------------------------------- 01 Tokens */ :root { color-scheme: dark; /* Surfaces — near-black with a blue cast, never pure #000 */ --ink-900: #06060B; --ink-800: #0A0A12; --ink-700: #10101B; --ink-600: #171725; --ink-500: #1F1F31; --glass: rgba(255, 255, 255, 0.032); --glass-strong: rgba(255, 255, 255, 0.055); --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.15); /* Text */ --text: #EFEFF8; --text-2: #A8A8C2; --text-3: #6C6C88; /* Accents */ --cyan: #22D3EE; --violet: #8B5CF6; --pink: #F472B6; --lime: #A3E635; --amber: #FBBF24; --danger: #FB7185; --grad: linear-gradient(135deg, var(--cyan) 0%, var(--violet) 55%, var(--pink) 100%); --grad-soft: linear-gradient(135deg, rgba(34,211,238,.18), rgba(139,92,246,.18)); --grad-line: linear-gradient(90deg, transparent, var(--line-strong), transparent); /* Type */ --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; /* Fluid type scale */ --fs-display: clamp(2.6rem, 1.2rem + 5.4vw, 5.6rem); --fs-h1: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); --fs-h2: clamp(1.7rem, 1.1rem + 2.2vw, 2.7rem); --fs-h3: clamp(1.15rem, 0.95rem + 0.8vw, 1.45rem); --fs-lead: clamp(1rem, 0.95rem + 0.35vw, 1.2rem); --fs-body: 1rem; --fs-sm: 0.9rem; --fs-xs: 0.8rem; /* Space */ --space-section: clamp(4.5rem, 3rem + 7vw, 9rem); --gutter: clamp(1.15rem, 0.6rem + 2.2vw, 2.5rem); --container: 1200px; --container-narrow: 780px; /* Radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-pill: 999px; /* Shadows */ --shadow-sm: 0 2px 12px rgba(0, 0, 0, .35); --shadow-md: 0 12px 40px rgba(0, 0, 0, .45); --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55); --glow-cyan: 0 0 60px -12px rgba(34, 211, 238, .55); --glow-violet: 0 0 70px -14px rgba(139, 92, 246, .6); --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --header-h: 72px; } /* ------------------------------------------------------------- 02 Reset & base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); background: var(--ink-900); /* `clip`, not `hidden`: hidden would turn into a scroll container, which detaches the fixed ambient layer from the root scroller and makes the page paint black once scrolled. */ overflow-x: clip; } body { margin: 0; min-height: 100vh; background: var(--ink-900); color: var(--text); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.1; letter-spacing: -0.028em; margin: 0 0 .6em; text-wrap: balance; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: inherit; text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--cyan); } ul, ol { margin: 0 0 1.1em; padding-left: 1.25rem; } li { margin-bottom: .4em; } hr { border: 0; height: 1px; background: var(--grad-line); margin: 2.5rem 0; } strong, b { font-weight: 650; color: var(--text); } code, pre { font-family: var(--font-mono); font-size: .9em; } ::selection { background: rgba(139, 92, 246, .4); color: #fff; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; } /* Scrollbar — subtle, matches the theme */ * { scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: var(--r-pill); border: 3px solid var(--ink-900); } *::-webkit-scrollbar-thumb:hover { background: var(--ink-600); } /* -------------------------------------------------------------- 03 Layout */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: 1400px; } .section { padding-block: var(--space-section); position: relative; } .section--tight { padding-block: calc(var(--space-section) * .6); } .section--flush-top { padding-top: 0; } .grid { display: grid; gap: var(--gutter); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .stack { display: flex; flex-direction: column; gap: 1rem; } .row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } /* ----------------------------------------------------- 04 Ambient background */ /* Aurora blobs + a faint grid + film grain. Fixed so it parallaxes for free. Kept at z-index 0 with the real content lifted to 1 — a negative z-index here would sink the layer behind the root background on some engines. */ .ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* (.header is already fixed at z-index 100, see section 06) */ main, .footer { position: relative; z-index: 1; } .ambient__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; } .ambient__blob--1 { width: 46vw; height: 46vw; top: -14vw; left: -10vw; background: radial-gradient(circle, rgba(34, 211, 238, .5), transparent 68%); animation: drift-a 26s var(--ease) infinite alternate; } .ambient__blob--2 { width: 52vw; height: 52vw; top: 8vw; right: -16vw; background: radial-gradient(circle, rgba(139, 92, 246, .48), transparent 68%); animation: drift-b 32s var(--ease) infinite alternate; } .ambient__blob--3 { width: 40vw; height: 40vw; bottom: -12vw; left: 28vw; background: radial-gradient(circle, rgba(244, 114, 182, .3), transparent 70%); animation: drift-c 38s var(--ease) infinite alternate; } .ambient__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 55% at 50% 0%, #000 20%, transparent 75%); } /* Grain stops the big gradients from banding on cheap panels. */ .ambient__grain { position: absolute; inset: -50%; opacity: .16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @keyframes drift-a { to { transform: translate3d(6vw, 5vw, 0) scale(1.16); } } @keyframes drift-b { to { transform: translate3d(-7vw, 8vw, 0) scale(1.1); } } @keyframes drift-c { to { transform: translate3d(4vw, -6vw, 0) scale(1.2); } } /* --------------------------------------------------------- 05 Buttons & pills */ .btn { --btn-bg: var(--glass-strong); --btn-fg: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.6rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--btn-bg); color: var(--btn-fg); font: 600 var(--fs-sm)/1 var(--font-display); letter-spacing: .01em; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .2s; -webkit-tap-highlight-color: transparent; } .btn:hover { transform: translateY(-2px); color: var(--btn-fg); } .btn:active { transform: translateY(0); } .btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; } .btn--primary { --btn-fg: #05050A; background: var(--grad); border-color: transparent; font-weight: 700; box-shadow: 0 8px 30px -8px rgba(139, 92, 246, .7); } .btn--primary:hover { box-shadow: 0 14px 44px -10px rgba(139, 92, 246, .9); } .btn--ghost { background: transparent; } .btn--ghost:hover { background: var(--glass); border-color: var(--line-strong); } .btn--lg { padding: 1.05rem 2.2rem; font-size: 1rem; } .btn--sm { padding: .6rem 1.1rem; font-size: var(--fs-xs); } .btn--block { width: 100%; } /* Sweep of light across the primary CTA — reads as "premium", costs nothing */ .btn--shine { position: relative; overflow: hidden; isolation: isolate; } .btn--shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%); transform: translateX(-120%); animation: shine 4.5s ease-in-out infinite; z-index: -1; } @keyframes shine { 0%, 62% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--glass); font-size: var(--fs-xs); font-weight: 550; color: var(--text-2); letter-spacing: .04em; text-transform: uppercase; } .pill--accent { border-color: rgba(34, 211, 238, .35); background: rgba(34, 211, 238, .1); color: var(--cyan); } .pill--free { border-color: rgba(163, 230, 53, .35); background: rgba(163, 230, 53, .1); color: var(--lime); text-transform: none; letter-spacing: 0; } .pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); animation: pulse 2.2s ease-in-out infinite; } @keyframes pulse { 50% { opacity: .35; transform: scale(.8); } } /* ------------------------------------------------------------- 06 Header/nav */ .header { position: fixed; inset: 0 0 auto; z-index: 100; height: var(--header-h); display: flex; align-items: center; transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s; border-bottom: 1px solid transparent; } .header.is-stuck { background: rgba(6, 6, 11, .72); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border-bottom-color: var(--line); } .header__inner { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .brand { display: inline-flex; align-items: center; gap: .65rem; font-family: var(--font-display); font-weight: 750; font-size: 1.05rem; letter-spacing: -0.03em; flex-shrink: 0; } .brand:hover { color: var(--text); } .brand__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); display: grid; place-items: center; font-size: .82rem; font-weight: 800; color: #05050A; box-shadow: var(--glow-violet); transition: transform .4s var(--ease); } .brand:hover .brand__mark { transform: rotate(-8deg) scale(1.06); } .nav { display: flex; align-items: center; gap: .35rem; } .nav__link { padding: .5rem .9rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: 550; color: var(--text-2); transition: color .2s, background .2s; } .nav__link:hover, .nav__link.is-active { color: var(--text); background: var(--glass); } /* Login lives in the header button on desktop; the nav copy is for the mobile drawer, where that button is hidden. */ .nav__link--mobile { display: none; } .header__actions { display: flex; align-items: center; gap: .6rem; } .nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); cursor: pointer; padding: 0; place-items: center; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: background .2s; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .3s var(--ease); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } /* ---------------------------------------------------------------- 07 Hero */ .hero { position: relative; padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); padding-bottom: var(--space-section); overflow: hidden; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; } .hero__eyebrow { margin-bottom: 1.5rem; } .hero__title { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.045em; line-height: .98; margin-bottom: 1.2rem; } .hero__title .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; /* Gradient text loses its glow, so paint one behind it */ filter: drop-shadow(0 0 34px rgba(139, 92, 246, .35)); } .hero__lead { font-size: var(--fs-lead); color: var(--text-2); max-width: 34rem; margin-bottom: 1.8rem; } .hero__points { list-style: none; padding: 0; margin: 0 0 2.2rem; display: grid; gap: .7rem; } .hero__points li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); color: var(--text-2); margin: 0; } .hero__points svg { flex-shrink: 0; margin-top: .2rem; color: var(--cyan); } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; } .hero__note { margin-top: 1.4rem; font-size: var(--fs-xs); color: var(--text-3); display: flex; align-items: center; gap: .5rem; } /* Media panel — the "3D multimedia on the right" from the brief */ .hero__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-xl); border: 1px solid var(--line-strong); background: radial-gradient(120% 90% at 20% 0%, rgba(34,211,238,.16), transparent 55%), radial-gradient(110% 90% at 90% 100%, rgba(139,92,246,.22), transparent 55%), var(--ink-800); overflow: hidden; box-shadow: var(--shadow-lg), var(--glow-violet); transform-style: preserve-3d; transition: transform .6s var(--ease); } .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero__media-placeholder { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; color: var(--text-3); font-size: var(--fs-sm); } /* Slow-spinning wireframe cube, pure CSS — stands in until real media lands. The scene box is taller than the cube so the rotating corners, which swing well past the 160px face, do not collide with the caption below. */ .cube-scene { perspective: 900px; width: 160px; height: 160px; margin: 0 auto 3.5rem; } .cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: spin-cube 18s linear infinite; } .cube__face { position: absolute; inset: 0; border: 1px solid rgba(34, 211, 238, .5); background: linear-gradient(135deg, rgba(34,211,238,.07), rgba(139,92,246,.07)); box-shadow: inset 0 0 40px rgba(34, 211, 238, .12); } .cube__face:nth-child(1) { transform: translateZ(80px); } .cube__face:nth-child(2) { transform: rotateY(180deg) translateZ(80px); } .cube__face:nth-child(3) { transform: rotateY(90deg) translateZ(80px); } .cube__face:nth-child(4) { transform: rotateY(-90deg) translateZ(80px); } .cube__face:nth-child(5) { transform: rotateX(90deg) translateZ(80px); } .cube__face:nth-child(6) { transform: rotateX(-90deg) translateZ(80px); } @keyframes spin-cube { to { transform: rotateX(360deg) rotateY(720deg); } } /* Floating stat chips over the media panel */ .hero__chip { position: absolute; display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: rgba(10, 10, 18, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-md); font-size: var(--fs-xs); animation: float 6s ease-in-out infinite; } .hero__chip strong { display: block; font-size: .95rem; line-height: 1.2; } .hero__chip span { color: var(--text-3); } .hero__chip--1 { top: 8%; left: -8%; animation-delay: -1s; } .hero__chip--2 { bottom: 14%; right: -6%; animation-delay: -3.5s; } @keyframes float { 50% { transform: translateY(-12px); } } /* Trusted-by / tools marquee under the hero */ .marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); padding-block: 1.1rem; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 32s linear infinite; } .marquee__item { font-family: var(--font-display); font-size: .95rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee:hover .marquee__track { animation-play-state: paused; } /* ------------------------------------------------- 08 Section furniture */ .section-head { max-width: 42rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .section-head--center { margin-inline: auto; text-align: center; } .section-head .pill { margin-bottom: 1.1rem; } .section-head__title { margin-bottom: .7rem; } .section-head__lead { font-size: var(--fs-lead); color: var(--text-2); margin: 0; } .card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); padding: clamp(1.4rem, 2.5vw, 2rem); position: relative; overflow: hidden; transition: border-color .3s var(--ease), transform .35s var(--ease), background .3s; } .card:hover { border-color: var(--line-strong); background: var(--glass-strong); } /* Cursor-tracked glow — set by site.js as --mx/--my */ .card--glow::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(139, 92, 246, .13), transparent 65%); pointer-events: none; } .card--glow:hover::before { opacity: 1; } .stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .stat { background: var(--ink-800); padding: 1.4rem 1.2rem; text-align: center; } .stat__value { font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 750; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; } .stat__label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; margin-top: .35rem; } /* ---------------------------------------------------------------- 09 Reels */ .reels { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; } .reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--ink-700); cursor: pointer; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s var(--ease); } .reel:hover { transform: translateY(-6px) scale(1.015); border-color: rgba(139, 92, 246, .5); box-shadow: var(--shadow-lg), var(--glow-violet); } .reel img, .reel video { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .4s; } .reel:hover img { transform: scale(1.07); } .reel__placeholder { position: absolute; inset: 0; background: radial-gradient(90% 70% at 30% 20%, rgba(34,211,238,.2), transparent 60%), radial-gradient(90% 70% at 70% 90%, rgba(139,92,246,.24), transparent 60%), var(--ink-700); } .reel__body { position: absolute; inset: auto 0 0; padding: 2.5rem 1.1rem 1.1rem; background: linear-gradient(transparent, rgba(6, 6, 11, .92) 55%); } .reel__title { font-family: var(--font-display); font-weight: 650; font-size: .95rem; } .reel__caption { font-size: var(--fs-xs); color: var(--text-3); margin-top: .15rem; } .reel__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.85); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: rgba(6, 6, 11, .6); border: 1px solid var(--line-strong); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s, transform .4s var(--ease); } .reel:hover .reel__play { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* -------------------------------------------------------------- 10 Trailer */ .trailer { position: relative; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line-strong); background: var(--ink-800); aspect-ratio: 16 / 9; box-shadow: var(--shadow-lg); } .trailer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 120px rgba(139, 92, 246, .18); pointer-events: none; } .trailer video, .trailer iframe { width: 100%; height: 100%; border: 0; object-fit: cover; } .trailer__poster { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(80% 70% at 30% 20%, rgba(34,211,238,.16), transparent 60%), radial-gradient(80% 70% at 75% 85%, rgba(139,92,246,.22), transparent 60%), var(--ink-800); cursor: pointer; transition: opacity .4s; } .play-button { width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--grad); display: grid; place-items: center; cursor: pointer; color: #05050A; box-shadow: 0 0 0 0 rgba(139, 92, 246, .55); animation: ripple 2.6s ease-out infinite; transition: transform .3s var(--ease); } .play-button:hover { transform: scale(1.08); } @keyframes ripple { 70% { box-shadow: 0 0 0 26px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } } /* ----------------------------------------------------------- 11 Instructor */ .instructor { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; } .instructor__photo { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 5; border: 1px solid var(--line-strong); background: var(--ink-700); box-shadow: var(--shadow-lg); } .instructor__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6,6,11,.75), transparent 45%); } .instructor__photo img { width: 100%; height: 100%; object-fit: cover; } .instructor__avatar-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 5rem; font-weight: 800; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; } .instructor__quote { border-left: 2px solid transparent; border-image: var(--grad) 1; padding-left: 1.3rem; font-size: var(--fs-lead); font-style: italic; color: var(--text); margin-block: 1.6rem; } /* ------------------------------------------------------- 12 Benefits (bento) */ .bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.1rem; } .bento__item { grid-column: span 2; } /* First two cards get extra width so the grid does not read as a plain 3-up */ .bento__item:nth-child(1), .bento__item:nth-child(2) { grid-column: span 3; } .benefit__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--cyan); margin-bottom: 1.1rem; } .benefit__title { font-size: 1.05rem; margin-bottom: .45rem; } .benefit__body { color: var(--text-2); font-size: var(--fs-sm); margin: 0; } /* -------------------------------------------------- 13 Curriculum accordion */ .curriculum { display: grid; gap: .9rem; } .phase { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--glass); overflow: hidden; transition: border-color .3s; } .phase.is-open { border-color: rgba(139, 92, 246, .4); } .phase__header { width: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.25rem clamp(1.1rem, 2vw, 1.7rem); background: none; border: 0; color: inherit; cursor: pointer; text-align: left; font: inherit; transition: background .25s; } .phase__header:hover { background: var(--glass); } .phase__index { flex-shrink: 0; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 750; font-size: .95rem; background: var(--grad-soft); border: 1px solid var(--line-strong); color: var(--cyan); } .phase.is-open .phase__index { background: var(--grad); color: #05050A; border-color: transparent; } .phase__meta { flex: 1; min-width: 0; } .phase__title { font-family: var(--font-display); font-weight: 650; font-size: 1.05rem; } .phase__sub { font-size: var(--fs-xs); color: var(--text-3); margin-top: .2rem; } .phase__chevron { flex-shrink: 0; color: var(--text-3); transition: transform .35s var(--ease), color .25s; } .phase.is-open .phase__chevron { transform: rotate(180deg); color: var(--cyan); } /* Height is animated by site.js setting an explicit max-height */ .phase__body { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); } .phase__inner { padding: 0 clamp(1.1rem, 2vw, 1.7rem) 1.3rem; } .module { border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.1rem; } .module:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .module__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; } .module__title { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--text); } .module__count { font-size: var(--fs-xs); color: var(--text-3); white-space: nowrap; } .lesson-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .25rem; } .lesson-row { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text-2); margin: 0; transition: background .2s, color .2s; } .lesson-row:hover { background: var(--glass); color: var(--text); } .lesson-row__icon { flex-shrink: 0; color: var(--text-3); } .lesson-row__title { flex: 1; min-width: 0; } .lesson-row__time { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; } /* Locked curriculum: the shape of the course without the content. The titles are absent from the HTML entirely — this is only the placeholder. */ .lesson-row--masked { pointer-events: none; } .mask-bar { display: block; height: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--ink-600), var(--ink-500), var(--ink-600)); background-size: 200% 100%; animation: mask-shimmer 3.2s ease-in-out infinite; opacity: .75; } @keyframes mask-shimmer { 50% { background-position: 100% 0; } } .phase.is-static { opacity: .92; } .curriculum-lock { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 1.3rem; margin-bottom: 1.2rem; border: 1px solid rgba(139, 92, 246, .35); border-radius: var(--r-md); background: linear-gradient(135deg, rgba(34,211,238,.07), rgba(139,92,246,.1)); } .curriculum-lock > svg { color: var(--violet); flex-shrink: 0; } .curriculum-lock div { flex: 1; min-width: 14rem; } .curriculum-lock strong { display: block; font-size: var(--fs-sm); margin-bottom: .15rem; } .curriculum-lock span { font-size: var(--fs-xs); color: var(--text-2); line-height: 1.55; } /* -------------------------------------------------------------- 14 Pricing */ .pricing { position: relative; max-width: 34rem; margin-inline: auto; border-radius: var(--r-xl); padding: clamp(1.8rem, 3vw, 2.8rem); background: radial-gradient(110% 80% at 50% 0%, rgba(139, 92, 246, .18), transparent 60%), var(--ink-800); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lg); text-align: center; overflow: hidden; } /* Animated gradient hairline along the top edge */ .pricing::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); } .pricing__mrp { font-size: 1.1rem; color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--danger); } .pricing__amount { font-family: var(--font-display); font-size: clamp(2.8rem, 2rem + 3.5vw, 4.2rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1; margin-block: .3rem .2rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .pricing__tax { font-size: var(--fs-sm); color: var(--text-2); } .pricing__list { list-style: none; padding: 0; margin: 1.8rem 0; display: grid; gap: .7rem; text-align: left; } .pricing__list li { display: flex; align-items: flex-start; gap: .7rem; font-size: var(--fs-sm); color: var(--text-2); margin: 0; } .pricing__list svg { flex-shrink: 0; margin-top: .18rem; color: var(--lime); } .pricing__trust { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.2rem; margin-top: 1.4rem; font-size: var(--fs-xs); color: var(--text-3); } .pricing__trust span { display: inline-flex; align-items: center; gap: .4rem; } /* --------------------------------------------------------- 15 Testimonials */ .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 1.1rem; } .testimonial__stars { display: flex; gap: .15rem; color: var(--amber); margin-bottom: .9rem; } .testimonial__quote { font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 1.3rem; line-height: 1.7; } .testimonial__person { display: flex; align-items: center; gap: .8rem; } .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--line-strong); font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: var(--cyan); flex-shrink: 0; overflow: hidden; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial__name { font-weight: 600; font-size: var(--fs-sm); } .testimonial__role { font-size: var(--fs-xs); color: var(--text-3); } /* ------------------------------------------------------------------- 16 FAQ */ .faq { display: grid; gap: .7rem; } .faq__item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--glass); overflow: hidden; transition: border-color .3s; } .faq__item.is-open { border-color: rgba(34, 211, 238, .35); } .faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; background: none; border: 0; color: inherit; font: 600 var(--fs-body)/1.5 var(--font-display); text-align: left; cursor: pointer; transition: background .2s; } .faq__q:hover { background: var(--glass); } .faq__icon { flex-shrink: 0; position: relative; width: 18px; height: 18px; color: var(--text-3); } .faq__icon::before, .faq__icon::after { content: ""; position: absolute; background: currentColor; border-radius: 2px; transition: transform .35s var(--ease), opacity .25s; } .faq__icon::before { inset: 8px 0; height: 2px; } .faq__icon::after { inset: 0 8px; width: 2px; } .faq__item.is-open .faq__icon { color: var(--cyan); } .faq__item.is-open .faq__icon::after { transform: rotate(90deg); opacity: 0; } .faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); } .faq__a-inner { padding: 0 1.3rem 1.2rem; color: var(--text-2); font-size: var(--fs-sm); } /* ---------------------------------------------------------------- 17 Footer */ .footer { border-top: 1px solid var(--line); background: linear-gradient(to bottom, transparent, rgba(10, 10, 18, .7)); padding-block: clamp(3rem, 5vw, 4.5rem) 2rem; margin-top: var(--space-section); } .footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-bottom: 3rem; } .footer__about { color: var(--text-3); font-size: var(--fs-sm); max-width: 24rem; } .footer__heading { font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 650; text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); margin-bottom: 1rem; } .footer__links { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; } .footer__links a { font-size: var(--fs-sm); color: var(--text-2); } .footer__links a:hover { color: var(--cyan); } .footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; } .footer__social a { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--line); background: var(--glass); display: grid; place-items: center; color: var(--text-2); transition: all .25s var(--ease); } .footer__social a:hover { color: var(--cyan); border-color: rgba(34, 211, 238, .4); transform: translateY(-2px); } .footer__bottom { border-top: 1px solid var(--line); padding-top: 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); } /* ----------------------------------------------------------------- 18 Forms */ .field { display: grid; gap: .45rem; margin-bottom: 1.1rem; } .field__label { font-size: var(--fs-xs); font-weight: 600; color: var(--text-2); letter-spacing: .03em; } .field__label .req { color: var(--danger); } .input, .textarea, .select { width: 100%; padding: .85rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: rgba(6, 6, 11, .6); color: var(--text); font: inherit; font-size: var(--fs-sm); transition: border-color .25s, box-shadow .25s, background .25s; appearance: none; } .input::placeholder, .textarea::placeholder { color: var(--text-3); } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: rgba(34, 211, 238, .6); box-shadow: 0 0 0 4px rgba(34, 211, 238, .12); background: rgba(6, 6, 11, .85); } .input.has-error, .textarea.has-error { border-color: rgba(251, 113, 133, .6); box-shadow: 0 0 0 4px rgba(251, 113, 133, .1); } .textarea { min-height: 8rem; resize: vertical; line-height: 1.6; } .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%236C6C88' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; } .field__error { font-size: var(--fs-xs); color: var(--danger); } .field__hint { font-size: var(--fs-xs); color: var(--text-3); } /* Visually hidden but still submitted — the contact-form honeypot */ .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------------------------------------------------------------- 19 Alerts */ .alerts { position: fixed; top: calc(var(--header-h) + .8rem); right: var(--gutter); z-index: 200; display: grid; gap: .6rem; width: min(24rem, calc(100vw - 2 * var(--gutter))); } .alert { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1.1rem; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: rgba(16, 16, 27, .95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-md); font-size: var(--fs-sm); animation: alert-in .4s var(--ease-out) both; } .alert--success { border-color: rgba(163, 230, 53, .4); } .alert--success .alert__icon { color: var(--lime); } .alert--error { border-color: rgba(251, 113, 133, .45); } .alert--error .alert__icon { color: var(--danger); } .alert--info .alert__icon { color: var(--cyan); } .alert__icon { flex-shrink: 0; margin-top: .15rem; } .alert__close { margin-left: auto; background: none; border: 0; color: var(--text-3); cursor: pointer; padding: 0 .2rem; font-size: 1.1rem; line-height: 1; } .alert__close:hover { color: var(--text); } @keyframes alert-in { from { opacity: 0; transform: translateX(24px); } } /* ------------------------------------------------------- 20 Motion & reveal */ [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } [data-reveal].is-visible { opacity: 1; transform: none; } /* Stagger children of a revealed container */ [data-reveal-stagger] > * { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); } [data-reveal-stagger].is-visible > * { opacity: 1; transform: none; } [data-reveal-stagger].is-visible > *:nth-child(1) { transition-delay: .04s; } [data-reveal-stagger].is-visible > *:nth-child(2) { transition-delay: .10s; } [data-reveal-stagger].is-visible > *:nth-child(3) { transition-delay: .16s; } [data-reveal-stagger].is-visible > *:nth-child(4) { transition-delay: .22s; } [data-reveal-stagger].is-visible > *:nth-child(5) { transition-delay: .28s; } [data-reveal-stagger].is-visible > *:nth-child(6) { transition-delay: .34s; } /* -------------------------------------------------------------- 21 Utilities */ .text-center { text-align: center; } .text-dim { color: var(--text-2); } .text-muted { color: var(--text-3); } .text-grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.6rem; } .mt-4 { margin-top: 2.4rem; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .divider { height: 1px; background: var(--grad-line); } .prose { max-width: 46rem; color: var(--text-2); } .prose h2 { margin-top: 2.4rem; font-size: 1.5rem; color: var(--text); } .prose h3 { margin-top: 1.8rem; font-size: 1.15rem; color: var(--text); } .prose li { font-size: var(--fs-sm); } .prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------- Responsive */ @media (max-width: 1024px) { .hero__grid { grid-template-columns: 1fr; gap: 3rem; } .hero__media { max-width: 26rem; margin-inline: auto; aspect-ratio: 1; } .hero__chip--1 { left: -4%; } .hero__chip--2 { right: -2%; } .instructor { grid-template-columns: 1fr; } .instructor__photo { max-width: 22rem; } .bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bento__item, .bento__item:nth-child(1), .bento__item:nth-child(2) { grid-column: span 2; } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 780px) { :root { --header-h: 64px; } .nav-toggle { display: grid; } .nav { position: fixed; inset: var(--header-h) 0 auto; flex-direction: column; align-items: stretch; gap: .2rem; padding: 1rem var(--gutter) 1.4rem; background: rgba(6, 6, 11, .97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); transform: translateY(-12px); opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s; } .nav.is-open { opacity: 1; visibility: visible; transform: none; } .nav__link { padding: .8rem 1rem; font-size: 1rem; } .nav__link--mobile { display: block; } .header__actions .btn--login { display: none; } .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento__item, .bento__item:nth-child(1), .bento__item:nth-child(2) { grid-column: span 2; } .reels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .footer__bottom { justify-content: center; text-align: center; } .hero__chip { display: none; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .alerts { top: auto; bottom: 1rem; right: var(--gutter); left: var(--gutter); width: auto; } } @media (max-width: 420px) { .reels { grid-template-columns: 1fr; } .btn { padding: .8rem 1.3rem; } .btn--lg { padding: .95rem 1.6rem; } .hero__cta .btn { width: 100%; } } /* --------------------------------------------------------- Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } [data-reveal], [data-reveal-stagger] > * { opacity: 1; transform: none; } .ambient__blob { animation: none; } } /* ------------------------------------------------------------------ Print */ @media print { .header, .footer, .ambient, .alerts, .btn { display: none !important; } body { background: #fff; color: #000; } } /* ========================================================================== LIGHT THEME Applied when the server writes data-theme="light" onto . Dark is the default and the brand look. This is the "classic website" alternative: white surfaces, darker accent colours so the gradient still passes contrast on white, and softer shadows. Only tokens and the handful of rules that hard-code a dark assumption are overridden — everything else inherits. ========================================================================== */ :root[data-theme="light"] { color-scheme: light; /* Surfaces */ --ink-900: #FFFFFF; --ink-800: #F8F9FC; --ink-700: #F1F3F9; --ink-600: #E4E7F0; --ink-500: #D3D8E6; --glass: rgba(15, 23, 42, 0.028); --glass-strong: rgba(15, 23, 42, 0.055); --line: rgba(15, 23, 42, 0.10); --line-strong: rgba(15, 23, 42, 0.17); /* Text */ --text: #14141F; --text-2: #4C4C66; --text-3: #7A7A96; /* Accents — darkened so they stay legible on white */ --cyan: #0891B2; --violet: #7C3AED; --pink: #DB2777; --lime: #4D7C0F; --amber: #B45309; --danger: #DC2626; --grad: linear-gradient(135deg, #0891B2 0%, #7C3AED 55%, #DB2777 100%); --grad-soft: linear-gradient(135deg, rgba(8,145,178,.10), rgba(124,58,237,.10)); --grad-line: linear-gradient(90deg, transparent, var(--line-strong), transparent); --shadow-sm: 0 1px 3px rgba(15, 23, 42, .07); --shadow-md: 0 6px 24px rgba(15, 23, 42, .09); --shadow-lg: 0 18px 50px rgba(15, 23, 42, .12); --glow-cyan: 0 0 40px -16px rgba(8, 145, 178, .4); --glow-violet: 0 0 44px -16px rgba(124, 58, 237, .4); } /* --- Ambient background: much calmer on white ------------------------- */ :root[data-theme="light"] .ambient__blob { opacity: .3; filter: blur(110px); } :root[data-theme="light"] .ambient__blob--1 { background: radial-gradient(circle, rgba(8, 145, 178, .32), transparent 68%); } :root[data-theme="light"] .ambient__blob--2 { background: radial-gradient(circle, rgba(124, 58, 237, .30), transparent 68%); } :root[data-theme="light"] .ambient__blob--3 { background: radial-gradient(circle, rgba(219, 39, 119, .18), transparent 70%); } :root[data-theme="light"] .ambient__grid { background-image: linear-gradient(rgba(15, 23, 42, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, .045) 1px, transparent 1px); } /* Film grain reads as dirt on a white page. */ :root[data-theme="light"] .ambient__grain { display: none; } /* --- Chrome ------------------------------------------------------------ */ :root[data-theme="light"] .header.is-stuck, :root[data-theme="light"] .app-header, :root[data-theme="light"] .checkout-bar, :root[data-theme="light"] .admin-top { background: rgba(255, 255, 255, .82); } :root[data-theme="light"] .admin-side { background: rgba(248, 249, 252, .9); } :root[data-theme="light"] .footer { background: linear-gradient(to bottom, transparent, rgba(241, 243, 249, .8)); } /* --- Buttons ----------------------------------------------------------- */ /* White text on the darker light-theme gradient, not near-black. */ :root[data-theme="light"] .btn--primary { --btn-fg: #FFFFFF; box-shadow: 0 6px 20px -8px rgba(124, 58, 237, .55); } :root[data-theme="light"] .btn--primary:hover { box-shadow: 0 12px 30px -10px rgba(124, 58, 237, .65); } :root[data-theme="light"] .brand__mark, :root[data-theme="light"] .phase.is-open .phase__index, :root[data-theme="light"] .checkout-panel__step, :root[data-theme="light"] .pager .is-current { color: #FFFFFF; } :root[data-theme="light"] .play-button { color: #FFFFFF; } /* The shine sweep is invisible over a light surface. */ :root[data-theme="light"] .btn--shine::after { background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.4) 50%, transparent 75%); } /* --- Forms ------------------------------------------------------------- */ :root[data-theme="light"] .input, :root[data-theme="light"] .textarea, :root[data-theme="light"] .select { background: #FFFFFF; box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04); } :root[data-theme="light"] .input:focus, :root[data-theme="light"] .textarea:focus, :root[data-theme="light"] .select:focus { background: #FFFFFF; border-color: rgba(8, 145, 178, .65); box-shadow: 0 0 0 4px rgba(8, 145, 178, .12); } :root[data-theme="light"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237A7A96' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E"); } /* --- Panels and cards -------------------------------------------------- */ :root[data-theme="light"] .card, :root[data-theme="light"] .panel, :root[data-theme="light"] .tile, :root[data-theme="light"] .phase, :root[data-theme="light"] .faq__item, :root[data-theme="light"] .track__phase, :root[data-theme="light"] .checkout-panel, :root[data-theme="light"] .player-side, :root[data-theme="light"] .resource { background: #FFFFFF; box-shadow: var(--shadow-sm); } :root[data-theme="light"] .summary, :root[data-theme="light"] .pricing, :root[data-theme="light"] .course-hero, :root[data-theme="light"] .auth-card, :root[data-theme="light"] .result-card { background: radial-gradient(110% 80% at 50% 0%, rgba(124, 92, 246, .07), transparent 60%), #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="light"] .hero__media { background: radial-gradient(120% 90% at 20% 0%, rgba(8,145,178,.10), transparent 55%), radial-gradient(110% 90% at 90% 100%, rgba(124,58,237,.14), transparent 55%), var(--ink-800); } :root[data-theme="light"] .hero__chip, :root[data-theme="light"] .alert, :root[data-theme="light"] .menu__panel { background: rgba(255, 255, 255, .97); } :root[data-theme="light"] .card--glow::before { background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(124, 58, 237, .07), transparent 65%); } :root[data-theme="light"] .stat { background: #FFFFFF; } :root[data-theme="light"] .table th { background: var(--ink-800); } :root[data-theme="light"] .table tbody tr:hover td { background: rgba(15, 23, 42, .022); } /* --- Player: the video stage stays dark in both themes ---------------- */ /* A white frame around a video is distracting and hurts perceived contrast, so only the surrounding page changes. */ :root[data-theme="light"] .stage { background: #000; border-color: var(--line-strong); } :root[data-theme="light"] .stage__overlay { background: rgba(8, 8, 14, .93); color: #ECECF4; } :root[data-theme="light"] .stage__overlay h3 { color: #FFFFFF; } :root[data-theme="light"] .stage__overlay p { color: #B9B9CE; } :root[data-theme="light"] .stage__flash { background: rgba(0, 0, 0, .72); color: #FFF; } :root[data-theme="light"] .next-up__eyebrow { color: #9A9AB4; } :root[data-theme="light"] .next-up__bar { background: rgba(255, 255, 255, .18); } /* --- Scrollbar --------------------------------------------------------- */ :root[data-theme="light"] * { scrollbar-color: var(--ink-500) transparent; } :root[data-theme="light"] *::-webkit-scrollbar-thumb { border-color: var(--ink-900); } /* --- Misc -------------------------------------------------------------- */ :root[data-theme="light"] ::selection { background: rgba(124, 58, 237, .18); color: #14141F; } :root[data-theme="light"] .cube__face { border-color: rgba(8, 145, 178, .45); background: linear-gradient(135deg, rgba(8,145,178,.05), rgba(124,58,237,.05)); box-shadow: inset 0 0 40px rgba(8, 145, 178, .08); } :root[data-theme="light"] .reel__placeholder { background: radial-gradient(90% 70% at 30% 20%, rgba(8,145,178,.16), transparent 60%), radial-gradient(90% 70% at 70% 90%, rgba(124,58,237,.18), transparent 60%), var(--ink-700); } :root[data-theme="light"] .trailer, :root[data-theme="light"] .trailer__poster { background: radial-gradient(80% 70% at 30% 20%, rgba(8,145,178,.1), transparent 60%), radial-gradient(80% 70% at 75% 85%, rgba(124,58,237,.14), transparent 60%), var(--ink-800); } :root[data-theme="light"] .trailer::after { box-shadow: inset 0 0 120px rgba(124, 58, 237, .1); } :root[data-theme="light"] .instructor__photo::after { background: linear-gradient(to top, rgba(15, 23, 42, .35), transparent 45%); } /* ========================================================================== Theme toggle control ========================================================================== */ .theme-toggle { position: relative; display: inline-flex; align-items: center; gap: .3rem; padding: .22rem; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--glass); flex-shrink: 0; } .theme-toggle__btn { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; transition: color .2s, background .2s; line-height: 0; } .theme-toggle__btn:hover { color: var(--text); } .theme-toggle__btn.is-active { background: var(--grad); color: #FFFFFF; box-shadow: 0 2px 8px -2px rgba(124, 58, 237, .6); } :root:not([data-theme="light"]) .theme-toggle__btn.is-active { color: #05050A; } @media (max-width: 780px) { .theme-toggle { order: -1; } }