/* ==========================================================================
LAUNCHIFY PAKISTAN — LANDING PAGE
Shared stylesheet for index.html and enroll.html
Sections are ordered to match the page, top to bottom.
========================================================================== */
/* --------------------------------------------------------------------------
1. DESIGN TOKENS
-------------------------------------------------------------------------- */
:root {
--bg: #121212;
--surface-1: #1A1A1A;
--surface-2: #1E1E1E;
--surface-3: #252525;
--accent: #18cb96;
--accent-hover: #15b585;
--accent-dim: rgba(24, 203, 150, 0.10);
--accent-border: rgba(24, 203, 150, 0.20);
--border: rgba(255, 255, 255, 0.06);
--border-hover: rgba(255, 255, 255, 0.12);
--text-primary: #FFFFFF;
--text-secondary: #A0A8A6;
/* Was #5C6360, which is 3.04:1 on --bg and 2.81:1 on the cards — under the
4.5:1 WCAG AA needs for body text, across 18 usages (footer, module
labels, module outcome lists). #8A9491 keeps the same muted grey-green
and clears AA on both grounds. */
--text-muted: #8A9491;
--whatsapp: #25D366;
--maxw: 1100px;
--radius-card: 16px;
--radius-lg: 20px;
--section-pad: 100px;
--ease: 0.2s ease;
}
/* --------------------------------------------------------------------------
2. RESET & BASE
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must actually hide. Any class that sets `display` outranks the user
agent's [hidden]{display:none}, so an element can report hidden === true and
still be on screen — which is exactly what the order rows were doing. This
makes the attribute reliable everywhere and retires the per-class overrides
scattered below. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
margin: 0;
/* Two very soft accent blooms plus the base colour, so large dark areas
have some depth instead of reading as flat black. */
background:
radial-gradient(900px 520px at 15% 4%, rgba(24, 203, 150, 0.035), transparent 62%),
radial-gradient(760px 460px at 85% 38%, rgba(24, 203, 150, 0.022), transparent 64%),
var(--bg);
background-attachment: fixed;
color: var(--text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* max-width alone is not enough once carries width/height attributes.
Those attributes are what let the browser reserve the right box BEFORE the
bytes arrive — which is the whole CLS fix — but they also become the
element's intrinsic size, so an image the CSS narrows would be squashed
without `height: auto` to restore the ratio.
The `:not([class])` carve-out matters: images the layout sizes deliberately
(.gallery-item img, .module__media img and friends set an explicit height
with object-fit) must keep that height, so this only governs images that
have no styling of their own. Everything else opts in below. */
img { max-width: 100%; display: block; }
img:not([class]) { height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* --------------------------------------------------------------------------
3. LAYOUT PRIMITIVES
-------------------------------------------------------------------------- */
.container {
max-width: var(--maxw);
margin: 0 auto;
padding: 0 24px;
}
/* Lets a section break past --maxw without leaving the page gutter. Used by
the VSL, which the reference runs wider than its body copy. */
.container--wide { max-width: 1228px; }
/* 1056 panel + 2x24 gutter — the community card's exact reference width. */
.container--community { max-width: 1104px; }
/* Three 392px testimonial cards at a 22px gap + gutter. */
.container--quotes { max-width: 1268px; }
.section { padding: var(--section-pad) 0; }
/* Alternating surface tone stops the page reading as flat #121212 */
.section--raised { background: linear-gradient(180deg, #121212 0%, #161616 50%, #121212 100%); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head--left { text-align: left; }
/* --------------------------------------------------------------------------
4. TYPOGRAPHY
-------------------------------------------------------------------------- */
.label-sm {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.10em;
color: var(--accent);
margin: 0 0 14px;
}
.label-sm--muted { color: var(--text-muted); }
.section-title {
font-size: 42px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0 0 16px;
color: var(--text-primary);
}
/* Editing Skool's section headings: 38px/700 Manrope, 45.6px line-height,
tracking normal. Applied where a section has been matched to theirs. */
.section-title--ref {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 38px;
font-weight: 700;
letter-spacing: normal;
line-height: 45.6px;
}
.section-sub {
font-size: 16px;
color: var(--text-secondary);
margin: 0 auto;
max-width: 620px;
}
.card-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; }
.body-text { font-size: 16px; color: var(--text-secondary); line-height: 1.7; }
.accent { color: var(--accent); }
/* --------------------------------------------------------------------------
5. BUTTONS
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border-radius: 50px;
font-weight: 700;
font-size: 15px;
border: none;
transition: all var(--ease);
white-space: nowrap;
}
.btn-primary {
background: var(--accent);
color: #121212;
padding: 14px 32px;
/* layered glow: tight ring + soft bloom, so it reads as lit rather than
just shadowed */
box-shadow: 0 0 0 1px rgba(24, 203, 150, 0.35),
0 6px 22px rgba(24, 203, 150, 0.35),
0 0 46px rgba(24, 203, 150, 0.28);
}
.btn-primary:hover {
background: var(--accent-hover);
transform: scale(1.02);
box-shadow: 0 0 0 1px rgba(24, 203, 150, 0.5),
0 8px 26px rgba(24, 203, 150, 0.45),
0 0 62px rgba(24, 203, 150, 0.4);
}
.btn-outline {
background: transparent;
border: 1.5px solid var(--accent);
color: var(--accent);
padding: 12px 28px;
font-weight: 600;
}
.btn-outline:hover { background: rgba(24, 203, 150, 0.08); }
/* White on WhatsApp green is 1.98:1 — it was the least readable thing on the
page, on a button people are meant to click. The brand green stays as the
background so the button still reads as WhatsApp at a glance; only the label
goes near-black, which is 13.7:1. The icon inherits via currentColor. */
.btn-whatsapp {
background: var(--whatsapp);
color: #0A1F14;
padding: 14px 32px;
}
.btn-whatsapp:hover { background: #1da851; transform: scale(1.02); }
.btn-full { width: 100%; }
.btn svg { flex-shrink: 0; }
/* --------------------------------------------------------------------------
6. SCROLL REVEAL
The .reveal class is only added by JS after first paint, so content is
visible if JS fails and never flashes on initial load.
-------------------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible { opacity: 1; transform: none; }
/* --------------------------------------------------------------------------
7. MARQUEE (shared by proof strip, platforms, testimonials, gallery)
-------------------------------------------------------------------------- */
.marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee-left var(--speed, 30s) linear infinite;
}
.marquee__track--reverse { animation-name: marquee-right; }
.marquee:hover .marquee__track,
.marquee-group:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* --------------------------------------------------------------------------
8. PLACEHOLDER (used wherever a real asset has not been supplied yet)
-------------------------------------------------------------------------- */
.ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(145deg, #1c1c1c 0%, #161616 100%);
border: 1px dashed rgba(255, 255, 255, 0.10);
border-radius: 12px;
color: var(--text-muted);
font-size: 12px;
font-weight: 500;
text-align: center;
padding: 20px;
min-height: 160px;
}
.ph svg { opacity: 0.45; }
/* ==========================================================================
SECTION 0 — HEADER
========================================================================== */
.site-header {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
width: calc(100% - 48px);
max-width: var(--maxw);
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(26, 26, 26, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border);
/* 18px radius + even 12px padding, matching the reference's rounded bar
(it is a soft rectangle, not a full pill). Even padding puts the logo
12px from the left and the Log in button 12px from the right. */
border-radius: 18px;
padding: 12px;
min-height: 64px;
}
/* Mark only — no wordmark in the bar. 34px matches the reference's 35x33. */
.logo { display: flex; align-items: center; }
.logo img { width: 34px; height: 34px; object-fit: contain; }
/* Log in — small rounded rect on the right of the bar (82x40, radius 6px) */
.btn-login {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 18px;
min-height: 40px;
border-radius: 6px;
border: 1px solid var(--border-hover);
background: var(--surface-2);
color: var(--text-primary);
font-size: 16px;
font-weight: 500;
transition: all var(--ease);
}
.btn-login:hover { border-color: var(--accent); color: var(--accent); }
.logo span { color: var(--accent); }
/* ==========================================================================
SECTION 1 — HERO
========================================================================== */
.hero {
position: relative;
min-height: 58vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: hidden;
padding: 118px 0 6px;
}
/* --------------------------------------------------------------------------
HERO CURSOR-GLOW GRID
Four stacked layers, matching the Kalakar construction:
1. .hero__grid-lines a 1px line grid drawn with a repeating-conic-
gradient anchored at 1px 1px. 33px cells.
2. .hero__grid-mask the SAME pattern used as a mask at the SAME size
and position, so its children can only paint where
a grid line is. This is the whole trick — the glow
lights the lines, not the space between them.
3. .hero__glow soft blobs inside the mask, moved by JS. Two of
them: a wide halo and a tighter core, so the
light reads bright at the centre with a green
falloff rather than a flat single colour.
4. .hero__grid-vignette fades the grid out at the edges so it never meets
a hard boundary.
Tune the light in one place:
--glow-core the bright centre
--glow-halo the surrounding green falloff
-------------------------------------------------------------------------- */
.hero__grid {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
--grid-cell: 33px;
--grid-line: rgba(255, 255, 255, 0.07);
/* Launchify green rather than the amber this started as — the warm cast
fought every other accent on the page. Kept low so the grid reads as
faintly lit, not spotlit. */
--glow-core: rgba(214, 255, 240, 0.34);
--glow-halo: rgba(24, 203, 150, 0.55);
}
/* Shared by the line layer and the mask layer — they must stay in lockstep,
or the glow drifts off the lines it is supposed to be lighting. */
.hero__grid-lines,
.hero__grid-mask {
position: absolute;
inset: 0;
background-size: var(--grid-cell) var(--grid-cell);
background-position: 50% 50%;
}
.hero__grid-lines {
background-image: repeating-conic-gradient(
at 1px 1px,
var(--grid-line) 0deg, var(--grid-line) 90deg,
transparent 90deg, transparent 180deg,
var(--grid-line) 180deg, var(--grid-line) 360deg
);
}
.hero__grid-mask {
background: none;
-webkit-mask-image: repeating-conic-gradient(
at 1px 1px,
#fff 0deg, #fff 90deg,
transparent 90deg, transparent 180deg,
#fff 180deg, #fff 360deg
);
mask-image: repeating-conic-gradient(
at 1px 1px,
#fff 0deg, #fff 90deg,
transparent 90deg, transparent 180deg,
#fff 180deg, #fff 360deg
);
-webkit-mask-size: var(--grid-cell) var(--grid-cell);
mask-size: var(--grid-cell) var(--grid-cell);
-webkit-mask-position: 50% 50%;
mask-position: 50% 50%;
}
/* The blob itself. The many-stop radial mask is a Gaussian falloff — a plain
two-stop gradient has a visibly linear edge and reads as a circle rather
than as light. Positioned from its own centre so JS can pass raw pointer
coordinates without compensating for the size. */
.hero__glow {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
opacity: 0;
transform: translate3d(-9999px, -9999px, 0);
transition: opacity 0.45s ease;
will-change: transform, opacity;
-webkit-mask-image: radial-gradient(closest-side,
#fff 0%, rgba(255,255,255,0.98) 7.14%, rgba(255,255,255,0.91) 14.29%,
rgba(255,255,255,0.79) 21.43%, rgba(255,255,255,0.635) 28.57%,
rgba(255,255,255,0.486) 35.71%, rgba(255,255,255,0.357) 42.86%,
rgba(255,255,255,0.255) 50%, rgba(255,255,255,0.173) 57.14%,
rgba(255,255,255,0.114) 64.29%, rgba(255,255,255,0.067) 71.43%,
rgba(255,255,255,0.035) 78.57%, rgba(255,255,255,0.016) 85.71%,
rgba(255,255,255,0.004) 92.86%, rgba(255,255,255,0) 100%);
mask-image: radial-gradient(closest-side,
#fff 0%, rgba(255,255,255,0.98) 7.14%, rgba(255,255,255,0.91) 14.29%,
rgba(255,255,255,0.79) 21.43%, rgba(255,255,255,0.635) 28.57%,
rgba(255,255,255,0.486) 35.71%, rgba(255,255,255,0.357) 42.86%,
rgba(255,255,255,0.255) 50%, rgba(255,255,255,0.173) 57.14%,
rgba(255,255,255,0.114) 64.29%, rgba(255,255,255,0.067) 71.43%,
rgba(255,255,255,0.035) 78.57%, rgba(255,255,255,0.016) 85.71%,
rgba(255,255,255,0.004) 92.86%, rgba(255,255,255,0) 100%);
}
/* Wide green halo underneath */
.hero__glow--warm {
width: 620px; height: 620px;
margin: -310px 0 0 -310px;
background-color: var(--glow-halo);
}
/* Tight bright centre on top. Kept small and quite transparent so the halo
still reads around it — a full-strength white core at this size just
bleaches the green away and brings the glare back. */
.hero__glow--core {
width: 240px; height: 240px;
margin: -120px 0 0 -120px;
background-color: var(--glow-core);
}
.hero__grid.is-lit .hero__glow--warm { opacity: 0.5; }
.hero__grid.is-lit .hero__glow--core { opacity: 0.75; }
.hero__grid-vignette {
position: absolute;
inset: 0;
z-index: 1;
background: radial-gradient(50% 50% at 50% 45%,
transparent 30%,
rgba(18,18,18,0.55) 72%,
var(--bg) 100%);
}
.hero__content { position: relative; z-index: 1; max-width: 860px; padding: 0 24px; margin-top: -34px; }
/* 62px / 700 / -2px tracking / 1.5 line-height, measured on the reference */
.hero__title {
font-size: 62px;
font-weight: 700;
letter-spacing: -0.032em;
line-height: 1.5;
margin: 0 0 10px;
}
/* ---- Selection-box treatment -------------------------------------------
Reference geometry: a 488x41 text sits in a 520x61 outlined box (16px
horizontal / 10px vertical padding, square corners) with a 12px round
handle centred on each corner. The handle fill is the page background —
on the reference that reads white; here it reads dark — so the handles
look punched out of the page rather than painted on top. */
.hero__select {
position: relative;
display: inline-block;
padding: 10px 16px;
margin: 0 0 34px;
}
.hero__select-text {
font-size: 34px;
font-weight: 600;
line-height: 1.2;
color: var(--text-primary);
white-space: nowrap;
}
/* The outline and its four handles, as one scalable unit */
.hero__frame {
position: absolute;
inset: 0;
border: 1.5px solid var(--accent);
animation: hero-frame-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.hero__handle {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--bg);
border: 1.5px solid var(--accent);
}
/* -7px so each handle is centred on its corner (half of 12px, plus the
frame's own 1.5px border) */
.hero__handle--tl { top: -7px; left: -7px; }
.hero__handle--tr { top: -7px; right: -7px; }
.hero__handle--bl { bottom: -7px; left: -7px; }
.hero__handle--br { bottom: -7px; right: -7px; }
/* Sits 17px right of the box, starting 6px above its bottom edge — the
reference's offsets. Anchoring with left/top rather than right/bottom
keeps the pointer's tip pinned to the corner as it flies in. */
.hero__cursor {
position: absolute;
left: calc(100% + 17px);
top: calc(100% - 6px);
width: 54px;
height: 53px;
color: var(--accent);
animation: hero-cursor-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
/* ---- Hero entrance ------------------------------------------------------
The frame settles down from slightly oversized; the pointer travels in
from below-right and lands on the corner. */
@keyframes hero-frame-in {
from { opacity: 0; transform: scale(1.12); }
to { opacity: 1; transform: scale(1); }
}
@keyframes hero-cursor-in {
from { opacity: 0; transform: translate(54px, 46px) scale(0.8); }
to { opacity: 1; transform: translate(0, 0) scale(1); }
}
/* The "+ Students Enrolled" label is added by JS and held back until the
number finishes counting. Default is visible so it still shows if the
script never runs. */
.hero__count-label {
opacity: 0;
transition: opacity 0.45s ease;
}
.hero__count-label.is-shown { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.hero__frame,
.hero__cursor { animation: none; opacity: 1; transform: none; }
.hero__count-label { opacity: 1; }
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: 12px;
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: 50px;
padding: 8px 18px 8px 10px;
font-size: 14px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 34px;
}
.avatar-stack { display: flex; }
.avatar-stack img,
.avatar-stack .avatar-fallback {
width: 30px;
height: 30px;
border-radius: 50%;
border: 2px solid var(--surface-1);
object-fit: cover;
margin-right: -10px;
}
.avatar-stack :last-child { margin-right: 0; }
.avatar-fallback {
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--accent), #0e8f68);
color: #121212; font-size: 12px; font-weight: 800;
}
/* ==========================================================================
SECTION 3 — VSL
========================================================================== */
/* Horizon line above the video, as on the Kalakar hero: a hairline that fades
out at both ends, a soft bloom sitting under it, and a highlight travelling
along its length. Same warm-white light as the hero grid. */
.horizon {
/* Absolutely anchored to the player's top edge, so no margin maths can
drift it into looking like a section divider. */
position: absolute;
top: 0;
left: 6%;
right: 6%;
height: 60px;
margin: -30px 0 0;
/* Clipped, so the travelling highlight can only ever appear between the
two ends of the line. Left visible it ran on past the player edges,
which read as a stray beam rather than light along the frame. */
overflow: hidden;
pointer-events: none;
z-index: 3;
--horizon-light: rgba(24, 203, 150, 0.75);
}
.horizon__line,
.horizon__bloom,
.horizon__sweep {
position: absolute;
left: 0;
right: 0;
display: block;
}
/* The hairline itself — brightest in the middle, gone at the edges */
/* Green rather than the warm cream it was, and dimmer at the centre — the
old midpoint read as a yellow hotspot against the rest of the page. */
.horizon__line {
top: 50%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(24, 203, 150, 0.10) 15%,
rgba(178, 245, 222, 0.40) 50%,
rgba(24, 203, 150, 0.10) 85%,
transparent 100%);
}
/* Soft bloom beneath it. Kalakar blurs a flat pill rather than stacking a
shadow, which keeps the falloff even across the full width. */
.horizon__bloom {
top: 50%;
height: 30px;
margin-top: -15px;
border-radius: 50%;
filter: blur(18px);
opacity: 0.26;
background: radial-gradient(50% 50% at 50% 50%,
var(--horizon-light) 0%,
rgba(24, 203, 150, 0.28) 55%,
transparent 100%);
}
/* The travelling highlight. Kept narrow and hard-centred — widen it much past
this and it stops reading as a moving point of light and becomes a smear. */
.horizon__sweep {
top: 50%;
height: 1px;
margin-top: -0.5px;
right: auto;
width: 24%;
border-radius: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(178, 245, 222, 0.18) 35%,
rgba(214, 255, 240, 0.8) 50%,
rgba(178, 245, 222, 0.18) 65%,
transparent 100%);
box-shadow: 0 0 12px 1px rgba(24, 203, 150, 0.35);
animation: horizon-sweep 7s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Travels edge to edge of the line only: the sweep is 24% of the track, so
316% of its own width carries it exactly from one end to the other, and
it fades up and out well inside both ends. */
@keyframes horizon-sweep {
0% { transform: translateX(0); opacity: 0; }
18% { opacity: 1; }
82% { opacity: 1; }
100% { transform: translateX(316%); opacity: 0; }
}
/* The travelling highlight is the one part that is purely decorative motion */
@media (prefers-reduced-motion: reduce) {
.horizon__sweep { display: none; }
}
.vsl { position: relative; max-width: 1180px; margin: 0 auto; }
.video-frame {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 20px;
border: 1px solid var(--border);
overflow: hidden;
background: var(--surface-1);
/* Green, and weighted downward so the bloom sits under the player instead
of floating above it as a free-standing band. */
box-shadow:
0 26px 90px -30px rgba(24, 203, 150, 0.22),
0 30px 80px -40px rgba(0, 0, 0, 0.9);
}
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-ph {
width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
background: linear-gradient(145deg, #1c1c1c, #141414);
color: var(--text-secondary);
text-align: center;
padding: 30px;
}
.video-ph__play {
width: 68px; height: 68px; border-radius: 50%;
background: var(--accent-dim);
border: 1px solid var(--accent-border);
display: flex; align-items: center; justify-content: center;
}
/* ==========================================================================
SECTION 4 — FEATURE CARDS
========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 28px;
transition: border-color var(--ease), transform var(--ease);
}
.card:hover { border-color: var(--accent-border); }
.card__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: var(--accent-dim);
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
color: var(--accent);
}
.card__body { font-size: 15px; color: var(--text-secondary); line-height: 1.75; margin: 0; }
/* ---- Interactive card stack --------------------------------------------
Reference behaviour: one card sits forward at full size while the other
two sit behind it, smaller, dimmed and rotated. Every card is clickable —
picking a back card brings it to the front. Card metrics follow the
reference: 380px wide, 24px radius, 24px padding. */
.stack {
position: relative;
height: 560px;
max-width: 900px;
margin: 0 auto;
}
/* Card internals measured off their DOM: 380 x 521.8, 24px radius, 24px
padding, 16px column gap. The card is
24 + 36(icon) + 16 + 200.8(text) + 16 + 205(image) + 24 = 521.8
so the image is structural — every card carries one, which is why a card
without one reads as broken next to the others. */
.stack__card {
position: absolute;
top: 0;
left: 50%;
width: 380px;
max-width: 86vw;
padding: 24px;
border-radius: 24px;
display: flex;
flex-direction: column;
gap: 16px;
background: var(--surface-1);
/* No border: theirs has none, and a 1px one would eat the 332px the
inner blocks need to match. Definition comes from fill + radius. */
border: none;
cursor: pointer;
/* transform-driven so the browser can composite the shuffle cheaply */
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.5s ease, border-color 0.3s ease;
transform: translateX(-50%);
}
.stack__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* front */
.stack__card[data-pos="0"] {
transform: translateX(-50%) scale(1);
opacity: 1;
z-index: 3;
background: linear-gradient(180deg, rgba(24, 203, 150, 0.10), rgba(24, 203, 150, 0.04)), var(--surface-1);
box-shadow: 0 0 0 1px var(--accent-border), 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* Back cards scale to 0.884, which puts them at their 336px. */
.stack__card[data-pos="1"] {
transform: translateX(calc(-50% - 250px)) scale(0.884) rotate(-4deg);
opacity: 0.45;
z-index: 2;
}
.stack__card[data-pos="2"] {
transform: translateX(calc(-50% + 250px)) scale(0.884) rotate(4deg);
opacity: 0.45;
z-index: 1;
}
.stack__card:not([data-pos="0"]):hover { opacity: 0.7; }
/* Icon: 36x36 at an 8px radius with 8px padding around a 20px glyph. The
shared .card__icon carries an 18px bottom margin; the 16px flex gap does
that job here, so it is zeroed. */
.stack .card__icon {
width: 36px;
height: 36px;
padding: 8px;
border-radius: 8px;
margin-bottom: 0;
flex: 0 0 auto;
}
.stack .card__icon svg { width: 20px; height: 20px; }
/* Text block: 332 wide, 8px between title and body, 8px of tail padding. */
.card__text {
display: flex;
flex-direction: column;
gap: 8px;
padding-bottom: 8px;
}
.stack .card-title {
font-size: 18px;
font-weight: 500;
line-height: 25.2px;
letter-spacing: normal;
margin: 0;
color: var(--text-primary);
}
.stack .card__body {
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
margin: 0;
color: var(--text-secondary);
}
/* Image: 332 x 205 at a 15px radius, cropped rather than letterboxed. */
.card__media {
width: 100%;
height: 205px;
border-radius: 15px;
overflow: hidden;
flex: 0 0 auto;
margin: 0;
border: none;
background: var(--surface-2);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Holds the slot until the community screenshot arrives. */
.card__media--empty {
border: 1px dashed rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.02);
}
.card-ph {
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 10px;
color: var(--text-muted);
font-size: 13px;
}
/* ==========================================================================
SECTION 7 — PLATFORM STRIP
========================================================================== */
/* Reference: a tinted card (20px radius) holding a 16px/500 centred title
above a constant-speed logo row — logos normalised to ~150px wide with a
61px gap. Their card is an accent wash over a white page; these logos are
supplied with baked-in light backgrounds, so the card here is light too,
which is the only way they read correctly. */
/* Pairs with the VSL above it: the video section drops its bottom padding
so the strip sits just beneath the player, as on the reference. The
section that follows supplies its own top padding. */
.section--vsl { padding: 14px 0 0; }
.platforms { padding: 88px 0 0; }
/* ==========================================================================
SECTION 3c — NEXT LIVE SESSION
Reference: a 960x255 pill (160px radius) holding a full-bleed photo cap
on the left and, on the right, a 32px/500 title, 50px countdown and a
22px/300 line tracked out to 0.16em.
========================================================================== */
.live-session {
padding: 104px 0 0;
/* two offset dot grids read as a scattered field rather than a lattice */
background-image:
radial-gradient(rgba(255, 255, 255, 0.075) 1px, transparent 1px),
radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
background-size: 63px 63px, 97px 97px;
background-position: 0 0, 31px 47px;
}
/* Wrapper carries the dashed ring, because the pill itself clips its
overflow and would cut the ring off. */
.live-wrap { position: relative; max-width: 960px; margin: 0 auto; }
/* Dot field, drawn wider than the pill so the drift reads past its edges. */
.live-dots {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% + 240px);
height: calc(100% + 120px);
max-width: 100vw;
pointer-events: none;
z-index: 0;
}
.live-pill { position: relative; z-index: 1; }
.live-wrap::before {
content: '';
position: absolute;
inset: -14px;
border: 1.5px dashed rgba(24, 203, 150, 0.32);
border-radius: 999px;
pointer-events: none;
}
.live-pill {
position: relative;
display: flex;
align-items: center;
gap: 56px;
min-height: 255px;
background: var(--surface-1);
border-radius: 160px;
overflow: hidden; /* clips the photo into the pill's left cap */
}
/* Absolutely-positioned image so the photo's own aspect ratio cannot
dictate the pill's height — the body content and min-height do. */
.live-pill__media { flex: 0 0 251px; align-self: stretch; position: relative; }
.live-pill__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%; /* frames the face inside the pill cap */
display: block;
}
.live-pill__body { padding: 28px 56px 28px 0; }
.live-pill__title {
font-size: 32px;
font-weight: 500;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 14px;
color: var(--text-primary);
}
/* overrides the accent styling `.countdown` uses elsewhere on the page */
.live-pill__timer {
font-size: 50px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0;
line-height: 1.1;
}
.live-pill__timer .sep { font-weight: 500; opacity: 0.45; margin: 0 6px; }
.live-pill__meta {
font-size: 22px;
font-weight: 300;
letter-spacing: 0.16em;
color: var(--text-secondary);
margin: 12px 0 0;
}
/* Accent-tinted glass, matching the reference's treatment
(they use linear-gradient(rgba(255,149,0,.11) -> .17); this is the same
wash in Launchify green). The logos are rendered as white marks below so
they read on the dark tint instead of needing a light panel. */
/* Reference: 130px tall, 20px radius, a flat rgba(255,149,0,0.08) accent
wash and nothing else — no glass, no border, no shadow. Same in green,
raised to the alpha that reads equivalently on a dark page. */
.logo-strip {
background: rgba(24, 203, 150, 0.14);
border-radius: 20px;
min-height: 130px;
padding: 16px 0 18px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
overflow: hidden;
}
.logo-strip__title {
font-size: 16px;
font-weight: 500;
color: var(--text-primary);
text-align: center;
margin: 0;
}
/* Their exact edge fade: gone by 2%, solid 27%–73%, gone again by 98%. */
.logo-strip .marquee {
width: 100%;
-webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 27%, #000 73%, transparent 98%);
mask-image: linear-gradient(90deg, transparent 2%, #000 27%, #000 73%, transparent 98%);
}
/* The strip never reacts to the pointer: no pause, no lift, nothing
clickable. Editing Skool's runs straight through on hover. */
.logo-strip .marquee:hover .marquee__track { animation-play-state: running; }
/* No chips — the marks sit straight on the wash, at the reference's ~150px
width and 61px gap. The flat backgrounds that used to force a chip have
been cut out of the source PNGs themselves (git history holds the originals). */
.partner-logo {
flex: 0 0 auto;
width: 150px;
height: 46px;
margin: 0 30px;
display: flex;
align-items: center;
justify-content: center;
}
.partner-logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
opacity: 1;
}
/* PostEx and Leopards are black artwork, so once their background is gone
they vanish on a dark strip — both are flattened to white. TCS keeps its
red and vlinq is already white, so those two stay untouched. */
.partner-logo img[src*="postex"],
.partner-logo img[src*="leopards"] {
filter: brightness(0) invert(1);
opacity: 0.88;
}
/* partner-m is an app-icon square by design, so it keeps chip corners. */
.partner-logo img[src*="partner-m"] { border-radius: 9px; }
/* Per-logo optical balance. Each brand mark carries different internal
weight, so matching the boxes is not enough — these nudge the marks to
look the same size to the eye. */
.partner-logo img[src*="tcs"] { max-height: 62%; }
.partner-logo img[src*="leopards"] { max-height: 76%; }
.partner-logo img[src*="postex"] { max-height: 40%; }
.partner-logo img[src*="vlinq"] { max-height: 62%; }
.partner-logo img[src*="partner-m"] { max-height: 88%; }
/* ==========================================================================
SECTION 8 — CURRICULUM
========================================================================== */
/* Reference mechanism, read off their DOM: each card is sticky with a `top`
stepping 20 / 30 / 40 / 50 / 60px, cards are 440px tall at a 36px gap, and
every card is fully opaque with no border. Because each one sticks 10px
lower than the last, the incoming card rides up and covers the previous
one completely, leaving only a 10px sliver of it above — a stacked deck.
A border would draw a line across that cover, which is why theirs has none. */
.modules { display: flex; flex-direction: column; gap: 36px; }
.module {
position: sticky;
top: calc(20px + var(--i) * 10px);
/* NO min-height. Forcing every card to the tallest one's height left the
short modules — 7 worst of all — with a slab of empty space under the
text. The outcome list now fills the width that used to be blank, so the
cards can hug their own content and differ in height honestly. */
display: grid;
/* A fixed rail for the numeral rather than 1fr 1fr: the numeral needs about
the same room on every card, and the copy should take everything else. */
grid-template-columns: 132px 1fr;
gap: 40px;
align-items: start;
background: var(--surface-1);
border-radius: 32px;
padding: 56px 44px;
overflow: hidden;
}
/* Near-black tints, the dark counterpart of their barely-there card hues
(#FFF3F1, #FBFFF5, #F5FEFF) — identity per card without colour noise. */
.module:nth-child(5n+1) { background: #1B1A19; }
.module:nth-child(5n+2) { background: #191B1A; }
.module:nth-child(5n+3) { background: #191A1B; }
.module:nth-child(5n+4) { background: #1A1B19; }
.module:nth-child(5n+5) { background: #1A1919; }
/* --- The numeral rail ---------------------------------------------------
The number used to be a 12px label above the title, doing nothing the eye
could catch. At this size it is what tells the cards apart while they are
stacked, and it gives the left column a reason to exist now the image has
gone. Low contrast on purpose: it identifies, it does not compete with the
title for first read. */
.module__index {
display: flex;
flex-direction: column;
gap: 2px;
/* Aligned to the TITLE, not the top of the card. The pill and its margin
sit above the title, so the rail is pushed down by that much and the
numeral reads as belonging to the heading beside it rather than floating
at the card's ceiling. Measured, not guessed: pill 28px + its 18px margin,
less the label's own 19px line above the numeral. */
margin-top: 27px;
}
.module__index-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--text-muted);
}
.module__index-no {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 76px;
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.05em;
/* Tabular figures so 01 and 07 occupy the same width and the rail does not
shift between cards. */
font-variant-numeric: tabular-nums;
/* 0.13 read as a rendering fault rather than a decision — people saw a
half-loaded number. Present enough to be obviously deliberate, still well
under the title so the hierarchy holds. */
color: rgba(255, 255, 255, 0.24);
}
/* --- The copy ----------------------------------------------------------- */
.module__text { min-width: 0; }
.pill {
display: inline-block;
background: var(--accent-dim);
color: var(--accent);
border-radius: 50px;
padding: 4px 12px;
font-size: 12px;
font-weight: 700;
margin-bottom: 18px;
}
/* Bigger than the old 26px: with nothing else to look at, the title is the
card, and it needs to outrank the numeral rather than tie with it. */
.module__title {
font-size: 30px;
font-weight: 800;
letter-spacing: -0.015em;
margin: 0 0 14px;
line-height: 1.22;
max-width: 22ch;
}
/* Copy on the left, takeaways on the right. The description gets a real
measure instead of the full card width; the column that used to be empty
beside it now carries the outcome list. */
.module__body {
display: grid;
/* Explicit rail for the outcomes rather than 1fr. `65ch` on the description
measured 656px — `ch` is the width of the "0" glyph, which is a good deal
wider than average lowercase text — and that left the outcomes column at
92px, far too narrow to read. Sizing the outcomes column instead lets the
description take the rest — 260px here lands the description at ~496px,
which measures 65 real characters in this face at 15.5px, and leaves the
outcomes wide enough that most sit on one line. */
grid-template-columns: minmax(0, 1fr) 260px;
gap: 36px;
align-items: start;
}
.module__desc {
font-size: 15.5px;
color: var(--text-secondary);
line-height: 1.75;
margin: 0;
/* The grid above already lands this near 65 characters on a full-width
card. This is the backstop for narrower ones, and is intentionally
generous because `ch` over-measures real text. */
max-width: 68ch;
}
/* Deliberately quieter than the description: smaller, tighter, and marked
with a small accent dash rather than a bullet. It is a scannable summary of
what the paragraph already says, so it must not read as the main content. */
.module__outcomes {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.module__outcomes li {
position: relative;
padding-left: 18px;
font-size: 13.5px;
line-height: 1.5;
color: var(--text-muted);
}
.module__outcomes li::before {
content: "";
position: absolute;
left: 0;
top: 0.62em;
width: 8px;
height: 1.5px;
border-radius: 1px;
background: var(--accent);
opacity: 0.75;
}
/* Visible to screen readers only — carries "Module N" into the heading now
that the numeral itself is aria-hidden decoration. */
.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;
}
/* ==========================================================================
SECTION 9 — INSTRUCTOR
Sits on its own panel so it reads as a distinct block rather than loose
text on the page background — as on the reference.
========================================================================== */
/* One card holding the whole section, as on the reference — a warm wash at
the top fading into the surface, so it lifts off the page background.
Reference: 400x300 photos at 24px radius, 38px/500 heading, 15px/27px body. */
/* Reference panel: 1009px wide, 12px radius, 24/30/48 padding, 43px stack
gap, centre-aligned, with a wide photo on top and a layered soft shadow.
Colour is ours; every measurement is theirs. */
.instructor-panel {
max-width: 1009px;
margin-inline: auto;
background:
linear-gradient(180deg, rgba(24, 203, 150, 0.13) 0%, rgba(24, 203, 150, 0.04) 34%, rgba(255,255,255,0.02) 100%),
var(--surface-1);
border-radius: 12px;
padding: 24px 30px 48px;
display: flex;
flex-direction: column;
align-items: center;
gap: 43px;
box-shadow:
0.12px 0.36px 0.53px -0.67px rgba(0, 0, 0, 0.36),
0.45px 1.34px 1.98px -1.33px rgba(0, 0, 0, 0.32),
1.6px 4.8px 7.1px -2px rgba(0, 0, 0, 0.26);
}
/* Their heading block is 949 wide and centre-aligned, with the name line
4px under the title. */
.instructor-panel__head {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
/* 38px/500 at a 60.8px line-height, -0.76px tracking — weight 500, not 700. */
.instructor-panel__title {
font-size: 38px;
font-weight: 500;
letter-spacing: -0.76px;
line-height: 60.8px;
margin: 0;
color: var(--text-primary);
}
.instructor-panel__name {
font-size: 16px;
font-weight: 400;
line-height: 16px;
margin: 0;
color: var(--text-secondary);
}
/* Rows: 400x300 photo at a 24px radius, 489px of copy, 60px between.
Row 1 puts the photo on the left, row 2 on the right — their order. */
.bio {
width: 100%;
display: grid;
grid-template-columns: 489px 400px;
gap: 60px;
align-items: center;
}
.bio--flip { grid-template-columns: 400px 489px; }
.bio--flip .bio__media { order: -1; }
.bio__media img {
width: 400px;
max-width: 100%;
aspect-ratio: 4 / 3;
/* height:auto is doing real work, not tidying. These tags carry
width/height ATTRIBUTES for CLS, and the height attribute lands as a
presentational hint (height: 1000px). With both dimensions definite,
aspect-ratio is ignored and the frame renders as a 400x1000 strip rather
than the intended 4:3. Declaring height here overrides the hint and hands
the ratio back to aspect-ratio.
Verified: an element with the attributes computed 1000px tall, while an
otherwise identical one without them computed 300px. */
height: auto;
object-fit: cover;
border-radius: 24px;
display: block;
}
/* No object-position here any more. The instructor photos ship as three
pre-cropped files apiece — one per breakpoint — so the framing is decided in
the image rather than nudged in CSS. See the tags in index.html. */
.bio__media picture { display: block; }
.bio__media .ph { min-height: 300px; border-radius: 24px; }
/* Body copy 15px/400 at 27px line-height, -0.15px tracking. */
.bio p {
font-size: 15px;
font-weight: 400;
line-height: 27px;
letter-spacing: -0.15px;
color: var(--text-secondary);
margin: 0 0 18px;
}
.bio p:last-child { margin-bottom: 0; }
.bio__label { color: var(--text-primary); font-weight: 500; }
/* Their two closing lines: 18px/500 then 22px/400, both centred at 844px. */
.instructor-panel__lead,
.instructor-panel__sig {
width: 100%;
max-width: 844px;
text-align: center;
margin: 0;
letter-spacing: -0.5px;
}
.instructor-panel__lead {
font-size: 18px;
font-weight: 500;
line-height: 27px;
color: var(--text-primary);
}
.instructor-panel__sig {
font-size: 22px;
font-weight: 400;
line-height: 33px;
color: var(--accent);
}
/* ==========================================================================
SECTION 10 — WINS CAROUSEL
========================================================================== */
/* Geometry taken from editingskool.com: every slide is an identical
681x320 box (18px radius, dark fill, 12px gap) and the off-centre ones
are only faded to 0.4 — never scaled. Uniform size is what makes the
row read as clean, so the card is a fixed aspect box and the screenshot
is cover-fitted inside it regardless of its own proportions. */
.wins { position: relative; }
/* The off-centre slides used to end on a hard edge, which read as a cut-off
card. Fading the viewport lets them dissolve into the page instead.
THE FADE MUST CLEAR THE FEATURED CARD. It did not: the mask went opaque only
between 22% and 78%, while the centred card spans 17.6% to 82.4% — so its
own left and right edges sat inside the ramp and dissolved. That is what
read as distortion at the edges, and no amount of adjusting the neighbours
was going to fix it, because the damage was to the card in focus.
Opaque from 12% to 88% now, which clears the card with ~5% to spare, and the
ramp is stepped rather than a single stop so it reads as a gradual falloff
instead of a visible seam. */
.wins__viewport {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg,
transparent 0%, rgba(0,0,0,0.4) 5%, #000 12%,
#000 88%, rgba(0,0,0,0.4) 95%, transparent 100%);
mask-image: linear-gradient(90deg,
transparent 0%, rgba(0,0,0,0.4) 5%, #000 12%,
#000 88%, rgba(0,0,0,0.4) 95%, transparent 100%);
}
.wins__track { display: flex; align-items: center; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
/* The slides are pre-composed 1920x1080 artwork, so the card takes their
16:9 ratio exactly — nothing is cropped and nothing letterboxes. Their
own backdrop is #121212, identical to the page, so the card fill matches
and the rounded corners blend away. */
.win-card {
position: relative;
flex: 0 0 681px;
max-width: 88vw;
aspect-ratio: 16 / 9;
margin: 0 6px; /* 6 + 6 = the reference's 12px gap */
background: var(--bg);
border-radius: 18px;
overflow: hidden;
/* ONE control for how far back the neighbours sit, not four.
This used to be 0.32 opacity AND a 2.5px blur AND a 55% dark overlay AND
the viewport mask, all compounding. On a page this dark the result was
neighbours that had effectively vanished, and the blur is what made their
edges look smeared rather than out of focus.
The blur and the overlay are gone; opacity alone carries it, and at 0.55
the neighbouring wins are legible enough to be worth having on screen —
which is the point of showing them — while still clearly secondary to the
card in focus at full strength. */
opacity: 0.55;
transition: opacity 0.5s ease;
/* centres the screenshot; the card, not the image, defines the size */
display: flex;
align-items: center;
justify-content: center;
}
.win-card.is-active { opacity: 1; }
/* The dark wash that used to sit over the off-centre slides is gone. It was
doing the same job as the opacity above, and stacking the two is how the
neighbours ended up invisible. */
/* The image is sized to its own aspect (never stretched or cropped) and
centred, so the element box IS the visible screenshot — which means the
radius below masks the screenshot's real corners. Any white rounded
corner baked into a screenshot is replaced by the card fill behind it.
Safeguard: the shipped files are already cropped clean. */
.win-card img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
border-radius: 16px;
}
/* No CSS ribbon: the corner banner is part of the slide artwork itself. */
/* 36px circles on a flat dark fill, as on the reference */
.wins__nav { display: flex; justify-content: center; gap: 12px; margin-top: 28px; }
.wins__btn {
width: 44px; height: 44px; /* was 36 — a thumb target, not a cursor target */
border-radius: 50%;
background: #262626;
border: none;
color: var(--text-primary);
display: flex; align-items: center; justify-content: center;
transition: background var(--ease), color var(--ease);
}
.wins__btn:hover { background: var(--accent); color: #121212; }
/* ==========================================================================
SECTION 11 — TEXT TESTIMONIALS
Reference card: 392x274, 12px radius, 24/24/20 padding, accent wash at
13%, 14px/25.2px quote, 16px/500 name, 13px/400 role.
========================================================================== */
/* Six columns so five 2-column cards land as a centred pair over a row of
three — the reference's 2-then-3 arrangement, every card the same 392px. */
.quote-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 22px;
max-width: 1220px;
margin: 0 auto;
}
.quote-card:nth-child(1) { grid-column: 2 / span 2; }
.quote-card:nth-child(2) { grid-column: 4 / span 2; }
.quote-card:nth-child(3) { grid-column: 1 / span 2; }
.quote-card:nth-child(4) { grid-column: 3 / span 2; }
.quote-card:nth-child(5) { grid-column: 5 / span 2; }
/* 392x274 at a 12px radius, 24/24/20 padding, 21px stack gap and their
layered soft shadow. Wash raised from their 13% to read on a dark page. */
.quote-card {
background: rgba(24, 203, 150, 0.16);
border-radius: 12px;
padding: 24px 24px 20px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 21px;
box-shadow:
0 0.36px 0.51px -1.17px rgba(0, 0, 0, 0.20),
0 1.37px 1.92px -2.33px rgba(0, 0, 0, 0.18),
0 3.63px 5.09px -3.5px rgba(0, 0, 0, 0.14);
}
/* Person first, quote underneath — the order their cards use. */
.quote-card__who { display: flex; align-items: center; gap: 18px; width: 100%; }
.quote-card__avatar {
width: 56px; height: 56px;
border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
background: linear-gradient(135deg, var(--accent), #0e8f68);
color: #121212;
font-size: 20px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
/* their avatar treatment: a 2px ring plus a deep offset shadow */
box-shadow: 0 0 0 2px #fff, 0 16px 28px -11px rgba(0, 0, 0, 0.55);
}
.quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-card__id { flex: 1; min-width: 0; }
.quote-card__name {
font-size: 16px; font-weight: 500;
line-height: 25.6px; letter-spacing: -0.32px;
color: var(--text-primary);
}
.quote-card__role {
font-size: 13px; font-weight: 400;
line-height: 16px; letter-spacing: -0.26px;
color: var(--text-secondary);
}
.quote-card__social {
width: 34px; height: 34px;
flex-shrink: 0;
border-radius: 9px;
display: flex; align-items: center; justify-content: center;
}
.quote-card__social svg { width: 19px; height: 19px; }
.quote-card__text {
font-size: 14px;
font-weight: 400;
line-height: 25.2px;
letter-spacing: -0.14px;
color: var(--text-primary);
margin: 0;
}
/* Stat cluster in the curriculum head (28px/500 number, 16px/400 label) */
.stat-row {
display: flex;
justify-content: center;
gap: 56px;
margin-top: 26px;
}
.stat-row__item { display: flex; flex-direction: column; align-items: center; }
.stat-row__num { font-size: 28px; font-weight: 500; color: var(--accent); line-height: 1.2; }
.stat-row__label { font-size: 16px; font-weight: 400; color: var(--text-secondary); }
/* ==========================================================================
SECTION 12 — GALLERY
========================================================================== */
.gallery-item {
flex: 0 0 auto;
width: 280px;
height: 180px;
margin-right: 16px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--border);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item .ph { height: 100%; min-height: 0; border: none; border-radius: 0; }
/* ==========================================================================
SECTION 13 — COMMUNITY
========================================================================== */
/* Panel metrics read off Editing Skool's live DOM: 1056x423, 60px padding,
31px radius, fill rgb(10,10,10), flex row with a 50px gap. No border —
their card is defined by fill and radius alone. Left column is a fixed
568px, right column is the 318px voice panel. Manrope, as theirs is. */
.community {
position: relative;
max-width: 1056px;
margin-inline: auto;
background: #0A0A0A;
border-radius: 31px;
padding: 60px;
display: flex;
gap: 50px;
align-items: center;
overflow: hidden;
font-family: 'Manrope', 'Inter', sans-serif;
}
/* Collage sits in the right 634px of the panel, tilted 12deg, then a
270deg scrim wipes it back to solid #0A0A0A under the copy. */
.community__collage {
position: absolute;
top: 0; right: 0; bottom: 0;
left: 422px;
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.community__tiles {
position: absolute;
top: 50%; left: 50%;
width: max-content;
transform: translate(-50%, -50%) rotate(12deg);
display: flex;
flex-direction: column;
}
/* Their rows sit on a 128px pitch with 150px-tall images, so each row
overlaps the one above it by 22px. */
.community__row + .community__row { margin-top: -22px; }
/* Each row is a marquee: 8 images, cloned once by initCommunityCollage(),
so translating the track by exactly one set loops seamlessly. Adjacent
rows run in opposite directions, which is what makes the field read as
drifting rather than sliding as one block — the reference's four tracks
sit at +0.32 / -0.32 / +0.32 / -0.32. */
.community__row {
display: flex;
gap: 10px;
/* the trailing gap makes one set exactly half the doubled track */
padding-right: 10px;
width: max-content;
animation: community-drift var(--drift, 60s) linear infinite;
}
.community__row:nth-child(even) { animation-direction: reverse; }
@keyframes community-drift {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
.community__row { animation: none; }
}
.community__row img {
width: 195px;
height: 150px;
flex: 0 0 195px;
object-fit: cover;
border-radius: 6px;
/* Their source stills are far darker than our screenshots, so the scrim
alone leaves ours shouting. This lands the collage on their tone. */
filter: brightness(0.5) saturate(0.85);
}
.community__scrim {
position: absolute;
inset: 0;
background: linear-gradient(270deg,
rgba(10, 10, 10, 0.60) 0%,
rgba(10, 10, 10, 0.96) 64.4%,
rgb(10, 10, 10) 100%);
}
.community__col {
position: relative;
z-index: 1;
flex: 0 0 568px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.community__col--panel { flex: 0 0 318px; }
/* 172x39 at 8px 12px padding, fill rgb(20,20,20), text 15px/500 in #B3B3B3. */
.badge-pill {
display: inline-flex;
align-items: center;
background: #141414;
color: #B3B3B3;
border-radius: 100px;
padding: 8px 12px;
font-size: 15px;
font-weight: 500;
line-height: 22.5px;
margin: 0;
}
/* 38px/700 at line-height 45.6px, tracking normal — theirs does not tighten. */
.community h2 {
font-size: 38px;
font-weight: 700;
letter-spacing: normal;
line-height: 45.6px;
margin: 0;
color: #F2F2F2;
}
/* One paragraph, not a bullet list. 18px/500, 27px line-height, #999. */
.community__body {
margin: 0;
font-size: 18px;
font-weight: 500;
line-height: 27px;
color: #999;
}
/* Voice chat mockup panel */
/* 318x296.2 overall: 33px topbar + 20px gap + 148.8px member grid + 20px gap
+ 74.4px audio block. 16px radius, fill rgb(26,28,29). Reference values. */
.voice-panel {
width: 318px;
max-width: 100%;
margin-left: auto;
background: #1A1C1D;
border-radius: 16px;
padding: 0;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 20px;
font-family: 'Inter', sans-serif;
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.45);
}
/* Their topbar is its own strip: 33px tall, two points darker than the
panel, with a 1px rgb(34,36,38) rule underneath. */
.voice-panel__head {
position: relative;
height: 33px;
flex-shrink: 0;
padding: 0 10px;
background: #161819;
border-bottom: 1px solid #222426;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.voice-panel__title { font-size: 12px; font-weight: 500; line-height: 14.4px; color: #9BA1A5; }
.voice-panel__close {
position: absolute;
right: 10px;
color: #9BA1A5;
display: flex;
/* The icon inside is 16px, which made the whole hit area 16x16 — under the
24x24 WCAG 2.5.8 minimum and a genuinely hard thing to hit with a thumb.
Padding grows the target without changing how the X looks; centring keeps
it optically where it was. */
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -14px; /* absorb the growth so the layout does not shift */
padding: 0;
background: none;
border: none;
padding: 2px;
border-radius: 4px;
transition: color var(--ease);
}
.voice-panel__close:hover { color: #fff; }
/* Collapsed pill: overlapping avatars, an overflow count and a chevron. */
.voice-collapsed {
display: flex;
align-items: center;
gap: 12px;
margin-left: auto;
padding: 10px 18px 10px 12px;
background: rgba(26, 28, 29, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 100px;
color: #9BA1A5;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
transition: border-color var(--ease);
}
.voice-collapsed:hover { border-color: rgba(255, 255, 255, 0.2); }
.voice-collapsed[hidden] { display: none; }
.voice-collapsed__stack { display: flex; }
.voice-collapsed__stack img {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #1A1C1D;
margin-right: -12px;
}
.voice-collapsed__stack img:last-child { margin-right: 0; }
.voice-collapsed__more { font-size: 15px; font-weight: 500; color: var(--text-primary); }
.voice-panel[hidden] { display: none; }
/* Five 48px avatars across, left-aligned, 20px side padding, 16px row gap —
the reference's grid, which leaves row two ragged rather than centred. */
.voice-grid {
display: grid;
grid-template-columns: repeat(5, 48px);
justify-content: start;
gap: 16px 9.5px;
padding: 0 20px;
margin: 0;
}
.voice-member { text-align: center; }
/* The badge lives on this wrapper, not on the clipped circle below it. */
.voice-member__avatar {
position: relative;
width: 48px;
height: 48px;
margin-bottom: 4px;
}
.voice-member__pic {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: var(--surface-3);
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
}
.voice-member__pic img { width: 100%; height: 100%; object-fit: cover; }
.voice-member.is-speaking .voice-member__pic {
box-shadow: 0 0 0 2px #fff, 0 4px 8px -2px rgba(0, 0, 0, 0.4);
}
.voice-member__speak {
position: absolute;
top: 0; right: 0;
width: 20px; height: 20px;
border-radius: 50%;
background: #fff;
color: #121212;
display: flex; align-items: center; justify-content: center;
border: 2px solid #1A1C1D;
}
/* Four bars rising and falling out of phase — reads as live audio. */
.wave { display: flex; align-items: center; gap: 1.5px; height: 10px; }
.wave i {
display: block;
width: 2px;
border-radius: 1px;
background: #121212;
animation: wave-bar 0.9s ease-in-out infinite;
}
.wave i:nth-child(1) { animation-delay: 0s; height: 4px; }
.wave i:nth-child(2) { animation-delay: 0.15s; height: 9px; }
.wave i:nth-child(3) { animation-delay: 0.3s; height: 6px; }
.wave i:nth-child(4) { animation-delay: 0.45s; height: 8px; }
@keyframes wave-bar {
0%, 100% { transform: scaleY(0.45); }
50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .wave i { animation: none; } }
.voice-member__name { font-size: 12px; line-height: 14.4px; color: #9BA1A5; font-weight: 400; }
/* Audio block: 0 20px 16px padding, 8px between the bar and its caption. */
.voice-panel__audio {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 20px 16px;
}
/* White bar, 36px tall, 8px radius, 0 10px padding — reference values. */
.audio-bar {
width: 100%;
height: 44px; /* was 36 — full-width, but too short to tap */
flex-shrink: 0;
display: flex;
align-items: center;
gap: 10px;
background: #fff;
border: none;
border-radius: 8px;
padding: 0 10px;
transition: opacity var(--ease);
}
.audio-bar:hover { opacity: 0.92; }
.audio-bar:disabled { opacity: 0.45; cursor: not-allowed; }
.audio-bar__label { flex: 1; text-align: left; font-size: 12px; font-weight: 600; color: #050505; }
.audio-bar__play { display: flex; align-items: center; justify-content: center; color: #050505; flex-shrink: 0; }
.audio-bar__time { font-size: 12px; font-weight: 500; color: #050505; font-variant-numeric: tabular-nums; }
.audio-cap { text-align: center; font-size: 12px; line-height: 14.4px; font-weight: 400; color: #98999C; margin: 0; }
/* ==========================================================================
SECTION 14 — VIDEO TESTIMONIALS
========================================================================== */
/* Reference layout: a two-column grid of players, each with the student's
name (20px/500) and city (16px/400, muted) centred underneath, and a
"See More" button below the grid. Heading is 38px/700 over two lines. */
/* 38px/700 Manrope at a 45.6px line-height, tracking normal — theirs does
not tighten these headings. */
.vt-title {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 38px;
font-weight: 700;
letter-spacing: normal;
line-height: 45.6px;
margin: 0;
color: var(--text-primary);
}
/* Reference geometry: 459px cards in a 10px-gap row, each padded
51px / 24px / 37px at a 12px radius, holding a 413x264 player at an
18px radius, then 22px of air before the name/city block. */
.vt-grid {
display: grid;
grid-template-columns: repeat(2, 459px);
justify-content: center;
gap: 10px;
margin: 0 auto;
}
.vt-card {
padding: 51px 24px 37px;
border-radius: 12px;
display: flex;
flex-direction: column;
gap: 22px;
}
.vt-card.is-hidden { display: none; }
.vt-card__video {
position: relative;
width: 100%;
aspect-ratio: 413 / 264;
background: var(--surface-2);
border-radius: 18px;
overflow: hidden;
}
.vt-card__video iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Click-to-play facade. Editing Skool runs an unbranded Bunny player; a
YouTube iframe always carries its own chrome, so the card shows our own
poster and play control and only swaps in the iframe once clicked. */
.vt-play {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: block;
}
.vt-play__poster {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vt-play__btn {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--accent);
display: flex;
align-items: center;
justify-content: center;
color: #08130F;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
transition: transform 0.2s ease, background 0.2s ease;
}
.vt-play:hover .vt-play__btn { transform: translate(-50%, -50%) scale(1.08); background: var(--accent-hover); }
/* The VSL is a much larger frame, so its control scales up to match. */
.vt-play__btn--lg { width: 68px; height: 68px; }
.vt-card__meta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vt-card__name {
font-size: 20px;
font-weight: 500;
line-height: 32px;
letter-spacing: -0.4px;
color: var(--text-primary);
}
.vt-card__city {
font-size: 16px;
font-weight: 400;
line-height: 16px;
letter-spacing: -0.32px;
color: #71717A;
}
.vt-more { text-align: center; margin-top: 24px; }
/* .btn sets display:inline-flex, which would beat the hidden attribute */
.btn[hidden] { display: none; }
/* ==========================================================================
SECTION 15 — CERTIFICATION
Reference: a 40px-radius panel on an accent wash
(linear-gradient(rgba(255,149,0,.11) -> .17)), 56px/80px padding, copy on
the left and the certificate on the right. Same wash in Launchify green.
========================================================================== */
/* Measured: 1032x432 panel, 56px/80px padding, 40px radius, four-stop wash
at .11 / .17 / .23 / .36, a 1px 25%-black shadow, and an 872px inner row
with an 80px gap. Certificate art sits at 384x320. */
.cert-panel {
max-width: 1032px;
margin-inline: auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 80px;
padding: 56px 80px;
border-radius: 40px;
background: linear-gradient(180deg,
rgba(24, 203, 150, 0.11) 0%,
rgba(24, 203, 150, 0.17) 35.59%,
rgba(24, 203, 150, 0.23) 62.16%,
rgba(24, 203, 150, 0.36) 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.cert-panel__body { flex: 0 1 408px; }
.cert-panel__art { flex: 0 0 384px; min-width: 0; }
/* 34px/700 Manrope at a 40.8px line-height, tracking normal. */
.cert-panel__title {
font-family: 'Manrope', 'Inter', sans-serif;
font-size: 34px;
font-weight: 700;
letter-spacing: normal;
line-height: 40.8px;
margin: 0 0 26px;
color: var(--text-primary);
}
/* Item text 16px/400 at 19.2px line-height; 21px tick at a 12px gap. */
.cert-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 16px; }
.cert-list li {
display: flex;
align-items: center;
gap: 12px;
font-size: 16px;
font-weight: 400;
line-height: 19.2px;
color: var(--text-primary);
}
.cert-list__tick {
flex-shrink: 0;
width: 21px;
height: 21px;
border-radius: 50%;
background: var(--accent);
color: #121212;
display: flex;
align-items: center;
justify-content: center;
}
/* Their certificate photo has the wooden frame baked into the image. Ours
builds the frame in CSS so the certificate itself stays a flat swappable
file: wood rail, gilt inner line, cream mat, then the artwork. */
/* NO wooden frame here any more.
The supplied artwork has its own frame drawn into it, and a CSS frame around
that produced two, one inside the other. So this element keeps its place in
the structure — it is still what sizes and lifts the artwork off the page —
but the wood, the mat and the bevel are gone.
Height is auto rather than fixed: the artwork sets its own, which is what
lets it show whole instead of being cropped to a box it does not fit. */
.cert-frame {
width: 384px;
max-width: 100%;
border-radius: 14px;
overflow: hidden;
/* Kept: a drop shadow, so a framed picture still reads as sitting ON the
section rather than printed into it. The inset bevel is gone with the
wood it was shading. */
box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.65);
}
.cert-frame__mat { padding: 0; background: none; box-shadow: none; }
.cert-frame__mat > * { width: 100%; height: auto; display: block; }
.cert-panel__art img {
width: 100%;
height: auto;
display: block;
/* NOT blurred. This carried filter: blur(2.5px) so a placeholder would read
as a teaser rather than a legible document. The certificate is real now
and is meant to be read, so the blur — and the hover that lifted it — are
gone.
height:auto with no object-fit means the artwork is never cropped: it has
a frame drawn into it, and cover would have sliced the left and right
edges of that frame off. */
}
/* the placeholder only appears once the real image fails to load */
.cert-ph { display: none; }
.cert-panel__art.is-missing .cert-ph {
display: flex;
flex-direction: column;
justify-content: center;
background: #FFFDF7;
color: #1A1A1A;
padding: 18px 20px;
text-align: center;
}
/* Sits on the cream mat now, so the placeholder reads dark-on-light. */
.cert-ph__logo { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 800; margin-bottom: 10px; }
.cert-ph__logo img { width: 15px; height: 15px; object-fit: contain; }
.cert-ph__logo .accent { color: #0F8A65; }
.cert-ph__title { font-size: 22px; font-weight: 800; letter-spacing: 0.06em; }
.cert-ph__sub { font-size: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #0F8A65; margin-top: 4px; }
.cert-ph__name { font-size: 15px; margin-top: 16px; color: #4A4A4A; }
.cert-ph__rule { height: 1px; background: rgba(0, 0, 0, 0.22); margin: 6px auto 16px; max-width: 180px; width: 100%; }
.cert-ph__foot { display: flex; justify-content: space-between; font-size: 8px; color: #8A8A8A; }
/* ==========================================================================
SECTION 16 — GUARANTEE
========================================================================== */
/* Metrics lifted directly from editingskool.com's guarantee card:
24px padding, 24px radius, 28px/500 centred heading, 16px/1.4 body.
The tight line-height and small padding are what keep it short. */
.guarantee {
max-width: 1000px;
margin: 0 auto;
padding: 24px;
background: linear-gradient(180deg, #101010 0%, #0B0B0B 100%);
border: 1px solid var(--border);
border-radius: 24px;
position: relative;
overflow: hidden;
}
/* faint accent bloom at the base of the card */
.guarantee::after {
content: '';
position: absolute;
left: 50%;
bottom: -45%;
width: 130%;
height: 85%;
transform: translateX(-50%);
background: radial-gradient(ellipse at center, rgba(24, 203, 150, 0.07), transparent 70%);
pointer-events: none;
}
.guarantee > * { position: relative; z-index: 1; }
.guarantee h2 {
font-size: 28px;
font-weight: 500;
letter-spacing: 0;
line-height: 1.4;
text-align: center;
color: #fff;
margin: 0 0 14px;
}
.guarantee p {
color: #fff;
font-size: 16px;
font-weight: 400;
line-height: 1.4;
margin: 0 0 20px;
text-align: left;
}
.guarantee p:last-child { margin-bottom: 0; }
/* highlighted phrases */
.guarantee .hl { color: var(--accent); }
a.hl { color: var(--accent); text-decoration: none; }
a.hl:hover { text-decoration: underline; }
/* de-emphasised fine print — same size as body, greyed + italic
(selector is p.guarantee__fine so it outranks `.guarantee p` above) */
.guarantee p.guarantee__fine {
font-style: italic;
font-size: 16px;
line-height: 1.4;
color: var(--text-secondary);
margin-top: 0;
}
.guarantee__badges { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.badge-outline {
border: 1px solid var(--accent-border);
color: var(--accent);
border-radius: 50px;
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
}
/* ==========================================================================
SECTION 17 — PRICING
========================================================================== */
/* Metrics lifted from editingskool.com's pricing card: 32px padding,
16px radius, accent-tinted fill, left-aligned stack, auto-width pill
button, and a 14px/500 checklist with 21px ticks at a 16px gap. */
.pricing {
max-width: 640px;
margin: 0 auto;
/* accent tint over the card surface, mirroring their orange-wash fill */
background: linear-gradient(0deg, rgba(24, 203, 150, 0.07), rgba(24, 203, 150, 0.07)), var(--surface-1);
border: 1px solid var(--accent-border);
border-radius: 16px;
padding: 32px;
text-align: left;
box-shadow: 0 0 80px rgba(24, 203, 150, 0.06);
}
.pricing__name {
font-size: 34px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0 0 6px;
}
.pricing__price {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.3;
margin: 0;
}
.pricing__sub {
font-size: 16px;
font-weight: 400;
line-height: 1.6;
color: var(--text-secondary);
margin: 6px 0 18px;
}
/* auto-width pill, left aligned — not full bleed */
.pricing .btn-primary {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 8px 24px;
border-radius: 100px;
font-size: 16px;
font-weight: 500;
}
/* no divider in the pricing card — the reference separates the button
from the list with whitespace alone. Kept for use elsewhere. */
.pricing__divider { height: 1px; background: var(--border); margin: 22px 0; }
.pricing .check-list { margin-top: 22px; }
.check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.check-list li {
display: flex;
align-items: flex-start;
gap: 16px;
font-size: 14px;
font-weight: 500;
line-height: 1.45;
color: #fff;
}
.check-list svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
/* ==========================================================================
SECTION 18 — FAQ
========================================================================== */
/* Their FAQ is a 960px accent-wash panel (16px padding, 24px radius, 16px
gap) holding white cards at 20px padding / 16px radius. Same geometry
here; the wash is Launchify green at the same 9%, and the cards sit
lighter than the wash so they still read as lifted off it. */
.faq {
max-width: 960px;
margin: 0 auto;
padding: 16px;
border-radius: 24px;
/* Theirs is 9% orange on white, where a 9% wash shifts the page by ~23
levels and reads clearly. The same 9% on #121212 moves it by 17 and
vanishes, so the alpha is raised to land on their perceived tint. */
background: rgba(24, 203, 150, 0.16);
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: #262626;
border-radius: 16px;
overflow: hidden;
}
.faq-q {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
background: none;
border: none;
color: #E8E8E8;
font-size: 16px;
font-weight: 400;
line-height: 22.4px;
text-align: left;
padding: 20px;
}
/* A 20px plus that loses its upright stroke when open, becoming a minus. */
.faq-q .faq-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
color: rgba(255, 255, 255, 0.55);
}
.faq-q .faq-icon .bar-v { transform-origin: center; transition: transform 0.3s ease, opacity 0.3s ease; }
.faq-item.is-open .faq-q { color: #fff; }
.faq-item.is-open .faq-icon { color: var(--accent); }
.faq-item.is-open .faq-icon .bar-v { transform: scaleY(0); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-a p { margin: 0; padding: 0 20px 20px; font-size: 15px; color: var(--text-secondary); line-height: 1.75; }
/* ==========================================================================
SECTION 19 — FOOTER
========================================================================== */
.contact-card {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 48px;
text-align: center;
}
.contact-card h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 12px; }
.contact-card p { color: var(--text-secondary); margin: 0 0 28px; }
.contact-card__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
border-top: 1px solid var(--border);
margin-top: 60px;
padding: 32px 0 120px;
}
.footer-bottom__brand { font-size: 16px; font-weight: 700; color: var(--accent); }
.footer-bottom small { display: block; font-size: 13px; color: var(--text-muted); font-weight: 400; margin-top: 4px; }
.footer-bottom__right { font-size: 13px; color: var(--text-muted); }
/* ==========================================================================
SECTION 20 — STICKY BOTTOM BAR
========================================================================== */
/* Floating glass pill bar, matching editingskool.com: a fixed wrapper
24px above the viewport bottom holding a blurred translucent shell
(16px padding, 24px radius, 24px gap) with three 51px pills inside.
It is always visible — it never hides or slides away on scroll. */
.sticky-bar {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 50;
width: max-content;
max-width: calc(100vw - 32px);
}
/* Shell measured off their DOM: 647x83, 16px padding, 24px radius, 24px gap,
backdrop-filter blur(10px). Their fill is rgba(145,144,144,0.22), a grey
wash designed against a white page — inverted here for a dark one. */
.sticky-bar__glass {
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
padding: 16px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.09);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
/* Every pill is exactly 189x51 on the reference. */
.sticky-bar__pill {
width: 189px;
height: 51px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Pill 1: 100px radius, 16px/24px padding, 30px logo, 12px/500 at 18px
line-height over two lines. Theirs is solid white on a white page. */
.sticky-bar__brand {
background: rgba(255, 255, 255, 0.12);
border-radius: 100px;
padding: 16px 24px;
gap: 8px;
justify-content: flex-start;
}
.sticky-bar__logo { width: 30px; height: 30px; object-fit: contain; flex-shrink: 0; }
.sticky-bar__tagline { font-size: 12px; font-weight: 500; line-height: 18px; color: #fff; white-space: nowrap; }
/* Pill 2: 80px radius, label 12px/600 at 16px line-height, digits 16px/500
with the colons dropped to 50% opacity. */
.sticky-bar__timer {
background: rgba(255, 255, 255, 0.10);
border-radius: 80px;
flex-direction: column;
gap: 3px;
}
.sticky-bar__label { font-size: 12px; font-weight: 600; line-height: 16px; color: rgba(255, 255, 255, 0.82); }
.sticky-bar__timer .countdown {
font-size: 16px;
font-weight: 500;
line-height: 16px;
color: #fff;
letter-spacing: normal;
font-variant-numeric: tabular-nums;
}
.sticky-bar__timer .countdown .sep { font-size: 16px; font-weight: 500; color: #fff; opacity: 0.5; margin: 0 3px; }
/* Pill 3: 80px radius, label 16px/600 at 16px line-height. */
.sticky-bar__cta {
background: var(--accent);
border-radius: 80px;
color: #121212;
font-size: 16px;
font-weight: 600;
line-height: 16px;
text-decoration: none;
box-shadow: 0 4px 18px rgba(24, 203, 150, 0.4);
transition: background 0.2s ease, box-shadow 0.2s ease;
}
.sticky-bar__cta:hover { background: var(--accent-hover); box-shadow: 0 6px 24px rgba(24, 203, 150, 0.55); }
/* ==========================================================================
ENROLL PAGE
========================================================================== */
.checkout-topbar {
border-bottom: 1px solid var(--border);
background: var(--surface-1);
}
.checkout-topbar__inner {
max-width: var(--maxw);
margin: 0 auto;
padding: 16px 24px;
display: flex;
align-items: center;
justify-content: space-between;
}
.secure-note { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.secure-note svg { color: var(--accent); }
.checkout {
max-width: var(--maxw);
margin: 0 auto;
padding: 48px 24px 90px;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 36px;
align-items: start;
}
.summary, .checkout-panel {
background: var(--surface-1);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 34px;
}
.summary__title { font-size: 24px; font-weight: 800; margin: 0 0 4px; letter-spacing: -0.02em; }
.summary__sub { font-size: 14px; color: var(--text-secondary); margin: 0 0 24px; }
.summary__price { font-size: 40px; font-weight: 900; letter-spacing: -0.03em; line-height: 1; }
.summary__note { font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.summary__divider { height: 1px; background: var(--border); margin: 26px 0; }
.summary__heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 16px; }
.guarantee-box {
background: var(--accent-dim);
border: 1px solid var(--accent-border);
border-radius: 12px;
padding: 18px 20px;
}
.guarantee-box strong { display: block; color: var(--accent); font-size: 14px; margin-bottom: 6px; }
.guarantee-box p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.65; }
/* Form */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text-secondary); }
.field input {
width: 100%;
background: var(--surface-2);
border: 1px solid var(--border-hover);
border-radius: 10px;
padding: 13px 15px;
color: var(--text-primary);
font-size: 15px;
font-family: inherit;
transition: border-color var(--ease), box-shadow var(--ease);
}
.field input::placeholder { color: var(--text-muted); }
.field input:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-dim);
}
.field.has-error input { border-color: #e5484d; }
.field__error { display: none; font-size: 12px; color: #e5484d; margin-top: 6px; }
.field.has-error .field__error { display: block; }
.phone-input { display: flex; align-items: stretch; }
/* A native