/*
MOBILE.CSS v7 — Creator House
276 documented improvements across every section.
Target: 390px iPhone 14. Scales through 860px.
Philosophy: what the laptop experience feels like in your hand —
not a squish, a purpose-built composition.
v5: +60 improvements — mastermind push, glow system, decorative cuts,
section sizing, WHO/impressions stack, apply polish, hero v3.
Improvement index (213):
§0 Global — 3 (#1-3)
§1 Nav — 6 (#4-9)
§2 Hero — 13 (#10-22)
§3 Value strip — 4 (#23-26)
§4 Stats — 5 (#27-31)
§5 Testimonials — 8 (#32-39)
§6 THE SIX — 7 (#40-46)
§7 WHO + Timeline — 5 (#47-51)
§8 BWY — 5 (#52-56)
§9 BM Photos — 3 (#57-59)
§10 Mastermind — 4 (#60-63)
§11 Prog-Hist — 2 (#64-65)
§12 Impressions — 5 (#66-70)
§13 FAQ — 3 (#71-73)
§14 Apply — 4 (#74-77)
§15 Footer — 3 (#78-80)
§16 Hover fix — 7 (#81-87) [@media(hover:none)]
§17 Small phones — 2 (#88-89) [≤390px]
§18 Micro-interact — 4 (#90-93) [active states + focus glow]
§19 Conversion v2 — 6 (#94-99) [WhatsApp CTA + form polish]
§20 Hero v2 — 6 (#100-105) [svh + safe-area + drift hide]
§21 Nav v2 — 4 (#106-110) [touch targets + safe-area] (Note: #106 used in §20, #107-110 here)
§22 Value strip v2 — 2 (#111-112)
§23 Testimonials v2 — 7 (#113-119) [2×2 stats + order polish]
§24 SIX v2 — 4 (#120-123)
§25 Mastermind v2 — 5 (#124-128)
§26 WHO v2 — 6 (#129-134) [ORDER SWAP: history photo first]
§27 Impressions v2 — 5 (#135-139) [2×2 stats + film roll]
§28 FAQ v2 — 3 (#140-142)
§29 Footer v2 — 2 (#143-144)
§30 Global polish — 9 (#145-153) [tap · stamps · perf · ey]
§31 Mastermind v3 — 5 (#154-158) [0.3cm push · carousel tight]
§32 Glow + Lighting — 7 (#159-165) [text-shadow · ambient boost]
§33 Cut noise — 6 (#166-171) [.al · ghost · blobs · film]
§34 Section sizing — 7 (#172-178) [vertical rhythm mobile]
§35 WHO polish — 6 (#179-184) [stack gap · image · labels]
§36 Impressions v3 — 6 (#185-190) [column stack · film · stats]
§37 Apply v2 — 5 (#191-195) [heading · labels · glass]
§38 Red-testi polish— 5 (#196-200) [stack · manifesto · btn]
§39 Hero v3 — 5 (#201-205) [deck · portal · cta stack]
§40 Typography — 4 (#206-209) [floor · balance · italic]
§41 SIX v3 — 4 (#210-213) [heading · padding · cards]
§42 WHO vertical v3 — 2 (#214-215) [single-col grid · sh gap]
§43 Vertical savings— 10 (#216-225) [mq hide · sh · wc · seams]
§44 Resize perfect — 10 (#226-235) [is-n · vc-lead · portal · fq]
§45 Beauty system — 10 (#236-245) [glass nav · gold dots · glow]
§46 Bonus — 5 (#246-250) [ov-utils · arch · orn · glow]
§47 WHO accordion — 3 (#251-253) [click-to-expand descriptions]
§48 Hero bottom cut — 1 (#254) [0.7cm less padding below video]
§49 Mast dots — 2 (#255-256) [3px · 2px gap · fits 2.6cm]
§50 SIX heading — 5 (#257-261) [horizontal flex · h2 inline]
§51 SIX cards 9:16 — 3 (#262-264) [portrait · narrow · tight]
§52 Testi H-scroll — 4 (#265-268) [row scroll · 2.5 visible]
§53 Modal vid small — 3 (#269-271) [float-left · 35vw]
§54 Unrebuilt fixes — 5 (#272-276) [six-outer · members · faq · apply · form]
§75 Precision pass — 9 (#401-409) [spacing · see-all · modal vid · WHO flat · impr · WA · apply · mast · faq]
§76 Flush sections — 8 (#410-417) [sections touching · rt-stats · six-sub nowrap · WHO boxes · impr order · mast label · faq chevron · WA circle]
§77 Batch 4 — 10 (#418-427) [hero center+no-svh · testi 2col · six lc grid · six scroll+tap · pm panel grid · pm arrows · impr full-x · impr scroll · WA white · mast hide]
§78 Batch 5 — 9 (#428-436) [spk scroll · vc size match · mast red-fade gone · sharp edges · sub bright · rt-stats fix · nav hamburger-right · nav-cta hide]
§79 Batch 6 — 10 (#435-444) [scroll-thumb glow · pm float layout · pm-imgs 2col · rt-stats show+styled · pm-arr center+glass · overlay buttons glass · touch-action fix · faq=who style · impr-stats full-x · footer redesign]
§80 Batch 7 — 3 (#445-447) [vc-play small+corner · testi card size=speaker · hero-chapter fallback]
*/
/* ══════════════════════════════════════════════════════════════════
§0 GLOBAL
══════════════════════════════════════════════════════════════════ */
/* #1 — Text size adjust: stop iOS/Chrome inflating text automatically */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@media (max-width: 860px) {
/* #2 — Kill scroll-driven animation + override opacity:0 initial state.
@supports(animation-timeline:view()) in the base CSS fires in Chrome/Edge,
applying animation-timeline:view() which keeps .rz at opacity:0 when the
page cannot scroll (iframe scrolling="no"). animation:none alone does NOT
reset animation-timeline/animation-range in all browsers — explicit reset
required. Combined with opacity:1 !important this unblocks all sections. */
.rz {
animation: none !important;
animation-timeline: auto !important;
animation-range: normal !important;
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* #3 — Prevent accidental horizontal overflow from desktop-sized elements */
.wrap {
overflow-x: hidden;
}
}
/* ══════════════════════════════════════════════════════════════════
§1 NAV
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #4 — Logo text: white regardless of scroll state or backdrop tint */
.nav-logo { color: #fff !important; }
/* #5 — Seal: white background + red text = clear CH monogram on dark */
.nav-seal {
background: rgba(255, 255, 255, 0.94) !important;
color: var(--red) !important;
}
/* #6 — Hamburger lines: white on any background */
.hb { background: #fff !important; }
/* #7 — CTA button: too cramped beside logo + hamburger at 390px */
.nav-cta { display: none; }
/* #8 — Architectural lines: desktop composition aids, no purpose on mobile */
.al { display: none !important; }
/* #9 — Mobile overlay links: large, editorial, confident.
The overlay is full-screen — links should fill the space. */
.ov-link {
font-size: clamp(26px, 7vw, 38px) !important;
letter-spacing: -0.01em !important;
line-height: 1.1 !important;
padding: 6px 0 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§2 HERO
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #10 — Top padding: nav is ~50px fixed, give 22px breathing room above
the title. Bottom: 40px before the value strip. */
.hero {
padding-top: 72px;
padding-bottom: 40px;
}
/* #11 — Hero text: remove right padding added for golden-ratio split */
.hero-text {
padding-right: 0;
gap: 14px;
}
/* #12 — H1 title: 10.8vw at 390px ≈ 42px — fills the screen width
intentionally. At 860px = 92.9px (smooth transition to desktop 108px cap). */
.h1 {
font-size: clamp(42px, 10.8vw, 108px);
line-height: 0.91;
}
/* #13 — Second h1 line: slightly smaller, same rhythm as desktop */
.h1 .l2 {
font-size: clamp(40px, 10.5vw, 104px);
}
/* #14 — Hero strip: tighter margin above portal */
.hero-strip { margin-bottom: 16px; }
/* #15 — Primary CTA: hidden on ALL mobile.
Was at @media(max-width:480px) — reappeared between 481–860px. Fixed. */
.hero-ctas .btn { display: none; }
/* #16 — Hero quote block: breathes better in single-column stacking */
.hero-quote {
padding: 10px 0 10px 12px;
gap: 7px;
}
/* #17 — HERO PORTAL CASCADE FIX ─────────────────────────────────────
Base CSS line 572: .hero-portal-wrap { position:absolute; left:61.8%;
top:-4cm; ... } — no media query, comes AFTER the 860px override at
line 528 → wins the cascade at every screen size.
!important required to override. */
.hero-portal-wrap {
position: relative !important;
display: block !important;
width: 100% !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
padding: 28px 0 0 0 !important;
pointer-events: all !important;
}
/* #18 — Portal: full-width content block. box-shadow creates depth that
reads as "designed for mobile" rather than just a collapsed layout. */
.hero-portal {
margin-top: 0;
margin-left: 0;
max-width: 100%;
border-radius: 0;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.88);
}
/* #19 — Portal caption text: base is 9.5px — too small when the portal
is shown full-width. Bump to 11px for readability. */
.hero-portal .cap .l,
.hero-portal .cap .r {
font-size: 11px;
letter-spacing: 0.22em;
}
/* #20 — Corner marks: slightly larger for visual presence at full width */
.hero-portal .c-mark {
width: 18px;
height: 18px;
}
/* Play button stays visible — ::after + ::before are kept.
Hover changes handled in @media(hover:none) below. */
}
@media (max-width: 480px) {
/* #21 — Deck text: base clamp min 13px → 15px for legibility on narrow screens */
.hero-deck {
font-size: 15px;
max-width: 100%;
letter-spacing: 0.06em;
}
/* #22 — Ghost CTA button on narrow phones: ensure it has enough tap height */
.btn-ghost {
padding-top: 10px;
padding-bottom: 10px;
}
}
/* ══════════════════════════════════════════════════════════════════
§3 VALUE STRIP
══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
/* #23 — .ax-item has white-space:nowrap — 5 items × ~90px ≈ 480px, overflows
at 390px. Wrap with centred layout. */
.mq-track {
flex-wrap: wrap;
justify-content: center;
gap: 4px 14px;
padding: 8px clamp(16px, 4vw, 28px);
}
/* #24 — Item text: allow wrapping */
.ax-item {
font-size: 11px;
white-space: normal;
}
/* #25 — Ornamental separators: break the wrapping flow, hide them */
.orn { display: none; }
/* #26 — Value strip: a little more vertical breathing room when wrapped */
.mq {
padding: clamp(12px, 2vw, 18px) 0;
}
}
/* ══════════════════════════════════════════════════════════════════
§4 STATS
══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
/* #27 — Numbers: base clamp(22px,3.2vw,44px) → at 390px = 22px (tiny).
Make them commanding — these are KPIs, they should hit. */
.sc .num {
font-size: clamp(30px, 7.5vw, 42px);
}
/* #28 — Label: base clamp min = 6px (unreadable). Force readable size. */
.sc .lbl {
font-size: 9px;
letter-spacing: 0.16em;
white-space: normal;
line-height: 1.3;
}
/* #29 — Cell padding: tighter on mobile */
.sc {
padding: 20px 8px 18px;
}
/* #30 — Row separator on 2-col grid: base CSS has glowing separators only
on the right side. On 2-col mobile, there's no separation between rows.
Add a subtle bottom border to separate them. */
.sc {
border-bottom: 0.5px solid rgba(184, 108, 42, 0.1);
}
/* #31 — Last row cells: remove redundant bottom border */
.stat-grid .sc:nth-last-child(-n+2) {
border-bottom: none;
}
}
/* ══════════════════════════════════════════════════════════════════
§5 TESTIMONIALS — red section
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #32 — Left panel: generous padding on stacked layout */
.rt-left {
padding: clamp(32px, 6vw, 48px) clamp(20px, 5vw, 32px);
}
/* #33 — Ghost text: the huge animated background text reads as noise
at mobile scale. Hide it. */
.rt-ghost { display: none; }
/* #34 — Manifesto: base clamp min = 20px. Mobile needs punch. */
.rt-manifesto {
font-size: clamp(22px, 5.8vw, 30px);
line-height: 0.97;
}
/* #35 — Stats row inside left panel: bigger numbers */
.rs .n {
font-size: clamp(28px, 7vw, 40px);
}
/* #36 — vc-lead: base CSS applies margin-left:clamp(-90px,-6.5vw,-52px)
to overlap with the red left panel on desktop. On mobile (single column),
rt-right is below rt-left — no panel to overlap. Remove negative margin. */
.vc-lead {
margin-left: 0 !important;
}
/* #37 — vc-area: JS applies scroll-based margin-left parallax.
On mobile this fights the stacked layout. Lock it to zero. */
.vc-area {
margin-left: 0 !important;
}
/* #38 — Hover: stuck on tap — reset */
.vc:hover {
transform: none;
box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.72), 0 0 0 0.5px rgba(0, 0, 0, 0.45);
}
/* #39 */
.vc:hover img { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
§6 THE SIX
══════════════════════════════════════════════════════════════════ */
/* Base CSS collapses to 1-col at 780px ✓. .six-grid already has
scroll-snap:x mandatory + overflow-x:auto in base CSS ✓ */
@media (max-width: 780px) {
/* #40 — Left column border becomes bottom border when stacked */
.six-lc {
border-right: none;
border-bottom: 0.5px solid var(--hl2);
padding-bottom: clamp(20px, 3vw, 28px);
padding-top: clamp(24px, 3.5vw, 36px);
}
/* #41 — Section heading: base clamp min 20px → give it 24px on mobile */
.six-lc h2 {
font-size: clamp(24px, 6.2vw, 34px);
}
/* #42 — Sub-label: bump from 10px to 11px for readability */
.six-lc .sub {
font-size: 11px;
max-width: 100%;
}
/* #43 — Card heading: base clamp min 16px → 18px at mobile width */
.six-h {
font-size: clamp(18px, 4.6vw, 24px);
}
/* #44 — Card label: reduce tracking so it fits narrow cards */
.six-lbl-t {
font-size: 12px;
letter-spacing: 0.22em;
}
/* #45 — Card grid gap: tighter */
.six-grid {
gap: 8px;
/* Less vertical padding — section is already generous */
padding-top: 20px;
padding-bottom: 20px;
}
/* #46 — Fade edge: .six-rc::after fades 88px. On narrow mobile the whole
section is narrower so reduce the fade width for balance. */
.six-rc::after {
width: 56px;
}
}
/* ══════════════════════════════════════════════════════════════════
§7 WHO + PROGRAM HISTORY
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #47 — Who left: bottom breathing room when stacked */
.who-left {
padding-bottom: clamp(24px, 4vw, 36px);
}
/* #48 — Who right: top breathing room when stacked below */
.who-right {
padding-top: clamp(24px, 4vw, 36px);
}
/* #49 — History image: base aspect-ratio 21/8 is very wide and short
(342×130px at 390px). Change to 4/3 for much more visual presence
(342×256px) — feels like a proper photo on mobile. */
.who-hist-img {
aspect-ratio: 4 / 3;
margin-top: 0;
}
/* #50 — Timeline: reduce min-height on mobile so it doesn't dominate */
.who-tl {
min-height: 200px;
}
/* #51 — Who grid: wc card body text readable size */
.wc .wd {
font-size: 13px;
line-height: 1.7;
}
}
/* ══════════════════════════════════════════════════════════════════
§8 BEERS WITH YOU
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #52 — Grid: bwy-inner collapses at 820px but bwy-grid stays 2-col */
.bwy-grid {
grid-template-columns: 1fr;
}
/* #53 — Section heading: base clamp min 24px → 26px */
.bwy-text h2 {
font-size: clamp(26px, 6.5vw, 52px);
}
/* #54 — Body text: bump from 13px to 14px on mobile */
.bwy-text p {
font-size: 14px;
line-height: 1.75;
max-width: 100%;
}
/* #55 — Wide image: 16/7 gives a 48px-tall result at 390px which is too thin.
Change to 16/9 for proper photo proportions on mobile. */
.bwy-wide {
aspect-ratio: 16 / 9;
}
/* #56 — Hover: stuck on tap */
.bwy-img:hover img { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
§9 BM PHOTOS (moment/gallery section)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
/* #57 — Section heading: same bump pattern */
.bm-header h2 {
font-size: clamp(26px, 6.5vw, 52px);
}
/* #58 — Header paragraph: remove max-width constraint that causes orphaned
lines at 52ch on narrow screens */
.bm-header p {
max-width: 100%;
}
/* #59 — Hover: stuck on tap */
.bm-img:hover img { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
§10 MASTERMIND / LINEUP (speakers carousel)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #60 — Section heading: base 34px min + 1.06 line-height.
Tighten line-height for more editorial impact on mobile. */
.lineup h2 {
line-height: 0.98;
font-size: clamp(32px, 8.5vw, 88px);
}
/* #61 — Speaker cards: base clamp(272px,32vw,406px) → at 390px = 272px.
In a 350px inner width, 272px shows ~1.3 cards. Narrow slightly so
~1.5 cards peek → clearer "swipe for more" affordance. */
.cc {
width: clamp(230px, 58vw, 340px);
}
/* #62 — Location / dates strip: bump font size, reduce tracking */
.lm-row {
font-size: 10px;
letter-spacing: 0.18em;
gap: 10px;
padding: 12px 0 2px;
}
/* #63 — Right fade gradient: narrower on small screens */
.car-wrap::after {
width: 60px;
}
}
/* ══════════════════════════════════════════════════════════════════
§11 PROGRAM HISTORY
══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
/* #64 — History heading bump */
.ph-text h2 {
font-size: clamp(20px, 5vw, 32px);
}
/* #65 — History body text: base clamp min 10px → 12px readable */
.ph-text p {
font-size: 12px;
max-width: 100%;
}
}
/* ══════════════════════════════════════════════════════════════════
§12 IMPRESSIONS
══════════════════════════════════════════════════════════════════ */
@media (max-width: 740px) {
/* #66 — Film roll: min-height when stacked below left panel */
.impr-right { min-height: 260px; }
/* #67 — Left panel: remove right border that bleeds when stacked */
.impr-left {
border-right: none;
border-bottom: 0.5px solid rgba(140, 90, 30, 0.15);
padding: clamp(24px, 4vw, 36px) clamp(16px, 4vw, 28px);
}
/* #68 — Section heading: base clamp min 18px → 22px */
.impr-left h2 {
font-size: clamp(22px, 5.5vw, 30px);
}
/* #69 — Stat numbers min-width: remove constraint causing overflow */
.is-n { min-width: 56px; }
/* #70 — Film strip gap: slightly tighter */
.impr-row { gap: 6px; }
}
/* ══════════════════════════════════════════════════════════════════
§13 FAQ
══════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
/* #71 — List padding: comfortable reading margins */
.faq-list {
padding-left: clamp(16px, 4vw, 24px);
padding-right: clamp(16px, 4vw, 24px);
}
/* #72 — Question text: base clamp min 12px → bump to 14px.
12px italic serif on a phone is hard to read without squinting. */
.fq {
font-size: 14px;
/* Ensure minimum touch target height (Apple HIG: 44px) */
padding: 18px 0;
min-height: 44px;
}
/* #73 — Plus/minus icon: slightly larger tap/visual target */
.fi-ic {
width: 16px;
height: 16px;
}
}
/* ══════════════════════════════════════════════════════════════════
§14 APPLY
══════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {
/* #74 — Form container: comfortable padding */
.app-form {
padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 28px);
}
/* #75 — iOS auto-zooms inputs < 16px — prevent zoom on tap */
.app-form input,
.app-form textarea,
.app-form select {
font-size: 16px !important;
}
/* #76 — Submit button: full-width on mobile (HTML uses type="button") */
.app-form button {
width: 100%;
justify-content: center;
/* Ensure 44px minimum touch target */
padding-top: 15px;
padding-bottom: 15px;
}
/* #77 — Section heading on mobile: bump from 28px min */
.app-text h2 {
font-size: clamp(30px, 7.5vw, 58px);
}
}
/* ══════════════════════════════════════════════════════════════════
§15 FOOTER
══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* #78 — Footer layout: center everything on narrow screens */
footer {
padding-left: clamp(20px, 5vw, 40px);
padding-right: clamp(20px, 5vw, 40px);
text-align: center;
}
/* #79 — Footer row: center the logo/links on narrow screens */
.f-row {
justify-content: center;
}
/* #80 — Footer links: wrap and center at narrow width */
.f-links {
flex-wrap: wrap;
justify-content: center;
gap: 10px 18px;
}
}
/* ══════════════════════════════════════════════════════════════════
§16 GLOBAL HOVER FIX — touch devices
Wrap ALL hover state overrides here so mouse/trackpad users still
get the full interaction, while touch users never get stuck states.
══════════════════════════════════════════════════════════════════ */
@media (hover: none) {
/* #81 — Button: reset hover transform + shadow */
.btn:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.18);
box-shadow:
0 1.5px 0 rgba(255, 255, 255, 0.24) inset,
0 -1px 0 rgba(0, 0, 0, 0.32) inset,
0 1px 3px rgba(0, 0, 0, 0.22),
0 6px 18px rgba(0, 0, 0, 0.32),
0 22px 44px -14px rgba(0, 0, 0, 0.48);
}
/* #82 — Ghost button: reset hover color */
.btn-ghost:hover { color: #f5f1e9; }
.btn-ghost:hover .tail {
width: 16px;
background: rgba(245, 241, 233, 0.78);
}
/* #83 — BWY image hover */
.bwy-img:hover img { transform: none; }
/* #84 — BM image hover */
.bm-img:hover img { transform: none; }
/* #85 — Testimonial card hover */
.vc:hover {
transform: none;
box-shadow: 0 6px 24px -4px rgba(0, 0, 0, 0.72), 0 0 0 0.5px rgba(0, 0, 0, 0.45);
}
.vc:hover img { transform: none; }
/* #86 — Hero portal: reset circle colour so it doesn't stay red after tap */
.hero-portal:hover::after {
background: rgba(0, 0, 0, 0.32);
border-color: rgba(255, 255, 255, 0.45);
transform: translate(-50%, -50%);
}
/* #87 — Footer founder button: reset hover */
.bm-img:hover img { transform: none; }
}
/* ══════════════════════════════════════════════════════════════════
§17 SMALL PHONES (≤390px)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 390px) {
/* #88 — Headline: tight tracking on very narrow screens prevents overflow */
.h1 {
letter-spacing: -0.02em;
}
/* #89 — Stat grid already 2-col from base CSS at ≤400px ✓.
Ensure the numbers don't clip at ≤360px */
.sc .num {
font-size: clamp(26px, 6.5vw, 36px);
}
}
/* ══════════════════════════════════════════════════════════════════
§18 MICRO-INTERACTIONS — touch feedback + focus glow
Inspired by: Aceternity UI (Glowing Effect) + Componentry (Border Beam)
══════════════════════════════════════════════════════════════════ */
/* #90 — Active tap feedback: buttons feel physical on touch.
0.97 scale + slight dim = pressed-in effect without JS. */
@media (hover: none) {
.btn:active {
transform: scale(0.97) !important;
opacity: 0.82;
transition: transform 0.08s ease, opacity 0.08s ease;
}
.btn-ghost:active {
opacity: 0.65;
transition: opacity 0.08s ease;
}
}
/* #91 — Testimonial + mastermind card tap feedback */
@media (hover: none) {
.vc:active {
transform: scale(0.985) !important;
transition: transform 0.08s ease;
}
.cc:active {
transform: scale(0.985) !important;
transition: transform 0.08s ease;
}
}
/* #92 — Form input focus glow (Aceternity Glowing Effect adapted).
On mobile, tapped inputs get a warm gold glow — signals active field
without iOS' default blue outline. */
@media (max-width: 860px) {
.app-form input:focus,
.app-form textarea:focus,
.app-form select:focus {
outline: none;
border-color: rgba(184, 108, 42, 0.55) !important;
box-shadow:
0 0 0 1px rgba(184, 108, 42, 0.22),
0 0 14px rgba(184, 108, 42, 0.12);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
}
/* #93 — Scroll padding: prevents fixed nav (≈50px) from clipping section
headings when anchor links fire from the overlay menu. */
@media (max-width: 860px) {
html {
scroll-padding-top: 64px;
}
}
/* ══════════════════════════════════════════════════════════════════
§19 CONVERSION — WhatsApp CTA + Apply form v2
WhatsApp is the low-friction mobile path. On mobile it deserves
primary visual weight. Form fields need generous spacing.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {
/* #94 — WhatsApp link: on mobile this IS the primary CTA. Full-width
button treatment with brand-green signal colour. */
.wa-link {
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 20px;
border: 1px solid rgba(37, 211, 102, 0.35);
border-radius: 6px;
background: rgba(37, 211, 102, 0.06);
color: rgba(37, 211, 102, 0.9) !important;
font-size: 14px;
letter-spacing: 0.08em;
text-decoration: none;
box-shadow: 0 0 18px rgba(37, 211, 102, 0.08);
transition: background 0.18s ease, box-shadow 0.18s ease;
}
.wa-link:active {
background: rgba(37, 211, 102, 0.12);
}
.wa-link svg {
flex-shrink: 0;
}
/* #95 — .app-wa block: more top breathing room above, acts as visual
anchor before the form. */
.app-wa {
margin-top: 20px !important;
margin-bottom: 8px;
}
/* #96 — "Selected personally" note: on mobile this is a trust signal.
Bump size and spacing. */
.app-note {
font-size: 11px !important;
letter-spacing: 0.18em;
opacity: 0.75;
margin-top: 10px;
}
/* #97 — Form field gaps: more vertical breathing between inputs */
.app-form .ff {
margin-bottom: 14px;
}
/* #98 — Textarea fields: taller minimum on mobile — makes them feel
less like a text message and more like a considered answer. */
.app-form textarea {
min-height: 100px;
line-height: 1.65;
}
/* #99 — Submit button: letter-spacing makes it feel more editorial */
.app-form button {
letter-spacing: 0.06em;
font-size: 13px;
}
}
/* ══════════════════════════════════════════════════════════════════
§20 HERO v2 — viewport height + safe area + polish
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #100 — svh: uses Small Viewport Height (excludes browser chrome).
100vh includes the address bar and shifts on scroll. 100svh stays
stable — the hero holds its intended full-screen height. */
.hero {
min-height: 100svh;
padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
}
/* #101 — Safe area for notch phones: top padding accounts for status
bar + nav. */
.hero {
padding-top: max(72px, calc(52px + env(safe-area-inset-top, 0px)));
}
/* #102 — Ghost text (IX, CH drifting behind hero): decorative on desktop,
noise at 390px. Hide. */
.drift {
display: none !important;
}
/* #103 — Hero portal video frame: rounded corners make it feel designed
for mobile rather than a desktop element squeezed down. */
.hero-portal {
border-radius: 12px;
overflow: hidden;
}
/* #104 — Hero layout: use column flex to stack text → portal naturally,
with vertical centering. */
.hero-grid {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
/* #105 — Decorative rule under h1: saves vertical space on mobile,
the headline provides enough visual break. */
.hero-line {
display: none;
}
}
/* ══════════════════════════════════════════════════════════════════
§21 NAV v2 — touch targets + safe area
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #107 — Nav: explicit min-height ensures 44px touch comfort */
.nav {
min-height: 52px;
display: flex;
align-items: center;
}
/* #108 — Overlay links: more margin between items for fat-finger safety */
.ov-link {
margin-bottom: 4px !important;
}
/* #109 — Hamburger: ensure it meets Apple HIG 44×44px */
.nav-hamburger {
min-width: 44px !important;
min-height: 44px !important;
display: flex !important;
align-items: center;
justify-content: center;
}
/* #110 — Overlay: account for notch/status bar on iPhone */
.nav-overlay {
padding-top: max(40px, env(safe-area-inset-top, 40px));
}
}
/* ══════════════════════════════════════════════════════════════════
§22 VALUE STRIP v2
══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
/* #111 — Bump item text to 12px: 11px was below the natural reading
size. At 12px they feel intentional, not afterthought small. */
.ax-item {
font-size: 12px !important;
}
/* #112 — More vertical padding: the strip needs to breathe as a
section, not feel like it's being squeezed between hero and red. */
.mq {
padding: clamp(16px, 3vw, 22px) 0 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§23 TESTIMONIALS v2 — red section deeper work
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #113 — rt-stats: 2×2 grid (4 stats become 2 rows of 2).
On mobile the vertical list of 4 is too long — a 2×2 grid scans
faster and each stat gets more visual presence. */
.rt-stats {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
}
/* #114 — Stats numbers in red section: increase to feel commanding */
.rs .n {
font-size: clamp(34px, 8.5vw, 48px) !important;
line-height: 0.92;
}
/* #115 — Manifesto: center-align on mobile for emotional symmetry.
"Some rooms change your perspective" centered = reading a manifesto,
not scanning a document. */
.rt-manifesto {
text-align: center;
}
/* #116 — rt-rule (thin horizontal line): not needed on stacked layout */
.rt-rule {
display: none;
}
/* #117 — vc-lead (blaze card): cap max-height so it doesn't dominate */
.vc-lead {
max-height: 420px;
}
/* #118 — "More opinions" button: full-width on mobile */
.rt-more-btn {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
display: flex !important;
margin-top: 20px !important;
}
/* #119 — Placeholder cards: hide on mobile — they're visual filler for
empty slots. On mobile they just waste scroll space. */
.vc-ph {
display: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§24 THE SIX v2
══════════════════════════════════════════════════════════════════ */
@media (max-width: 780px) {
/* #120 — "drag →" hint: base is 8px — completely unreadable. Bump to
11px and increase opacity so it actually communicates. */
.six-rc > p {
font-size: 11px !important;
letter-spacing: 0.28em !important;
color: rgba(184, 168, 120, 0.35) !important;
text-align: right;
padding: 4px 20px 16px !important;
}
/* #121 — SIX section: more vertical breathing room */
#six {
padding-top: clamp(48px, 7vw, 72px);
padding-bottom: clamp(32px, 5vw, 48px);
}
/* #122 — Card heading: tighter line-height for editorial impact */
.six-h {
line-height: 1.0 !important;
letter-spacing: -0.01em;
}
/* #123 — Decorative VI stamp: hide at mobile (noise in narrow viewport) */
#six > .stamp {
display: none;
}
}
/* ══════════════════════════════════════════════════════════════════
§25 MASTERMIND v2 — speakers carousel
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #124 — Hide desktop prev/next arrow buttons: swipe replaces them.
Showing them on touch wastes space and signals "not designed for
mobile." */
.car-nav-btn {
display: none !important;
}
/* #125 — Carousel dots: increase size for easier tap/visual scanning */
.car-dots .d-btn {
width: 8px !important;
height: 8px !important;
border-radius: 50% !important;
}
.car-dots {
gap: 6px !important;
}
/* #126 — Mastermind heading: tighter tracking for compressed impact */
.lineup h2 {
letter-spacing: -0.02em !important;
}
/* #127 — More top padding before the heading */
.lineup .wrap {
padding-top: clamp(36px, 5vw, 52px);
}
/* #128 — "Past Speakers" label: center on mobile */
.lm-row {
justify-content: center !important;
text-align: center;
margin-top: 16px;
}
}
/* ══════════════════════════════════════════════════════════════════
§26 WHO v2 — order swap + polish
The most impactful structural change: show the program history photo
FIRST on mobile. An aspirational image of the actual event anchors
belief before asking "is this for me?".
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #129 — Make who-split a flex column so order property works */
.who-split {
display: flex !important;
flex-direction: column !important;
}
/* #130 — Show program history photo FIRST on mobile.
On desktop, who-left (text) is on the left. On mobile, seeing the
actual villa/event photo first = aspiration before qualification.
"I want to be there" must come before "am I right for this." */
.who-right {
order: -1 !important;
}
.who-left {
order: 0 !important;
}
/* #131 — History image: show faces/action, not sky */
.who-hist-img img {
object-position: center 30% !important;
}
/* #132 — WHO cards: add subtle separator between each person type */
.wc {
border-top: 0.5px solid rgba(184, 168, 120, 0.12);
padding-top: 14px;
margin-top: 0;
}
.who-grid .wc:first-child {
border-top: none;
}
/* #133 — "View all editions" button: full-width on mobile */
.ph-btn {
width: 100% !important;
justify-content: center !important;
display: flex !important;
margin-top: 20px !important;
}
/* #134 — WHO heading: tighter line-height */
.who-left h2 {
line-height: 0.96;
}
}
/* ══════════════════════════════════════════════════════════════════
§27 IMPRESSIONS v2 — espresso section
The emotional climax. Stats must hit hard. Film roll must feel visceral.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 740px) {
/* #135 — Stats: 2×2 grid. On mobile the vertical list of 4 is too
sparse. 2×2 condenses the social proof into a punchy block. */
.impr-stats {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 14px 16px;
}
.is-row {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
/* #136 — Left panel: more generous padding */
.impr-left {
padding: clamp(32px, 6vw, 52px) clamp(20px, 5vw, 36px) !important;
}
/* #137 — "900+" key stat: make it a statement, not a number */
.is-n-key {
font-size: clamp(44px, 11vw, 64px) !important;
line-height: 0.88 !important;
}
/* #138 — Film roll (right side): enough min-height to see the photos */
.impr-right {
min-height: 340px !important;
}
/* #139 — Impressions heading: bigger and bolder */
.impr-left h2 {
font-size: clamp(26px, 6.5vw, 36px) !important;
line-height: 0.96;
margin-bottom: clamp(20px, 4vw, 32px);
}
}
/* ══════════════════════════════════════════════════════════════════
§28 FAQ v2
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #140 — FAQ section: more top padding so heading doesn't crowd
the seam from Impressions */
.faq {
padding-top: clamp(52px, 8vw, 80px) !important;
}
/* #141 — Answer text: base is tiny. 14px makes it genuinely readable. */
.fa p {
font-size: 14px !important;
line-height: 1.7;
padding: 10px 0 16px;
}
/* #142 — FAQ questions: more right padding so text doesn't crowd the +/−
icon on long questions. */
.fq {
padding-right: 40px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§29 FOOTER v2 — safe area + touch
══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
/* #143 — Safe area inset: iPhone home bar sits at the bottom.
Without this, footer content sits under the swipe gesture area. */
footer {
padding-bottom: calc(clamp(20px, 4vw, 32px) + env(safe-area-inset-bottom, 0px));
}
/* #144 — "Founder" button: 44px touch target minimum */
.f-founder {
min-height: 44px !important;
min-width: 44px !important;
padding: 10px 12px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§30 GLOBAL POLISH — tap highlight · stamps · performance · eyebrows
══════════════════════════════════════════════════════════════════ */
/* #145 — Tap highlight: default browser tap highlight is an ugly
blue/grey flash. Brand-consistent subtle highlight instead. */
@media (hover: none) {
* {
-webkit-tap-highlight-color: rgba(184, 108, 42, 0.08);
}
}
@media (max-width: 480px) {
/* #146 — Decorative Roman numeral stamps: at ≤480px they compete
with content. Hide them — they serve the desktop composition. */
.stamp {
display: none !important;
}
/* #147 — pdl-glow (background spotlight effect): expensive to paint
on low-end mobile. Reduce opacity to near-zero to keep performance. */
.pdl-glow {
opacity: 0.3 !important;
}
}
@media (max-width: 860px) {
/* #148 — Eyebrow labels (.ey "The right room", "The format" etc.):
Bump from default to 9px — current base may be 8px, too tight. */
.ey {
font-size: 9px !important;
letter-spacing: 0.24em;
}
/* #149 — Prevent heading overflow on very long words by adding soft
hyphens via CSS. Essential for German-influenced names/headings
that might be added later. */
h1, h2, h3 {
overflow-wrap: break-word;
word-break: break-word;
}
/* #150 — Video play buttons on testimonial cards: ensure 44×44px */
.vc-play {
min-width: 44px !important;
min-height: 44px !important;
}
/* #151 — Smooth scroll: makes anchor links feel premium, not jarring */
html {
scroll-behavior: smooth;
}
/* #152 — Section headings: consistent mobile heading size bump for
sections that use generic h2 without clamp. Baseline safety net. */
.sh h2 {
font-size: clamp(28px, 7.2vw, 44px);
}
/* #153 — pdl-pat (subtle pattern overlay): reduce on mobile for
cleaner reading experience and better contrast on small screens. */
.pdl-pat {
opacity: 0.5 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§31 MASTERMIND v3 — "Meet the people" push + section polish
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #154 — "Meet the people" heading 0.3cm further down. Adds 11px
to the clamp set by #127 (clamp(36px,5vw,52px) → clamp(47px,...)).
At 390px the heading now enters the viewport with intentional
separation from the section edge. */
.lineup .wrap {
padding-top: clamp(47px, calc(5vw + 11px), 63px) !important;
}
/* #155 — Mastermind section: tighter bottom padding. The default
max of 58px wastes space when there is little content below the
carousel. 44px max reads as deliberate restraint. */
#mastermind.lineup {
padding-bottom: clamp(28px, 4vw, 44px) !important;
}
/* #156 — Carousel track: reduce inter-card gap slightly so at 390px
a partial second card peeks in, signalling "swipe for more". */
.car-track {
gap: 10px !important;
}
/* #157 — Carousel dots: extra separation above so dots float clearly
beneath the last card rather than feeling glued to it. */
.car-dots {
margin-top: 20px !important;
padding-bottom: 4px !important;
}
/* #158 — "Past Speakers" label row: more vertical breathing room
above it so it reads as a label, not a footer tag. */
.lm-row {
margin-top: 20px !important;
padding-top: 12px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§32 GLOW + LIGHTING — ambient warmth system for mobile
The laptop has architectural lines and golden-ratio geometry to
create depth. On mobile those are hidden (§33). Glow replaces them:
every section gets a warm light source appropriate to its palette.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #159 — Hero h1: warm radial text-shadow reads as sunlit, not neon.
The falloff across two radius values (40px → 80px) mimics natural
light diffusion. Invisible on light backgrounds, adds life on dark. */
#hero h1 {
text-shadow:
0 0 40px rgba(255, 80, 18, 0.14),
0 0 80px rgba(220, 60, 10, 0.06);
}
/* #160 — Mastermind red bleed: the wall-red ambient glow can be
stronger on mobile since it fills the full viewport width.
Deeper red saturation adds atmosphere without adding weight. */
#mastermind .pdl-red-bleed {
opacity: 0.88 !important;
}
/* #161 — WHO section glow: the orange glow on dark-wall sections
compensates for the now-hidden architectural lines (§33). Without
the vertical golden-ratio line the section needs another depth cue. */
#who .pdl-glow {
opacity: 0.58 !important;
}
/* #162 — Impressions heading: warm amber text-shadow on "Incredible
connections". The espresso palette needs heat — this applies it
directly to the most visible text element in the section. */
.impr-left h2 {
text-shadow:
0 0 60px rgba(200, 110, 30, 0.28),
0 0 120px rgba(160, 80, 20, 0.12);
}
/* #163 — Apply heading: deep red ambient glow. The form is the
final action — the heading should feel charged. The glow ties
the apply heading into the brand's red signature. */
#apply .app-text h2 {
text-shadow:
0 0 60px rgba(180, 28, 8, 0.22),
0 0 120px rgba(120, 18, 6, 0.10);
}
/* #164 — All h2 in dark-wall sections: universal very-subtle warm
glow. Unifies the depth system across sections — every heading
sits in warm ambient light, consistent with the brand warmth. */
.wall-dark h2 {
text-shadow: 0 2px 48px rgba(180, 70, 18, 0.08);
}
/* #165 — Dark-wall background glow: slightly stronger on mobile.
Low-DPI screens clip the lightest opacity gradients — bumping
opacity makes the fiery undertone register on cheaper displays. */
.wall-dark .pdl-glow {
opacity: 0.44 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§33 CUT — hide desktop-only decorative elements on mobile
These elements were designed for the 1280px viewport composition.
On 390px they are either misaligned, invisible, or visual noise.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #166 — Architectural lines (.al): designed around the golden-ratio
master line at ~61.8% of a 1280px canvas. At 390px the math no
longer holds — lines land at wrong positions. Hidden = cleaner. */
.al {
display: none !important;
}
/* #167 — Ghost text (.rt-ghost "Room"): decorative typographic
overlay on the red-testi section. At 390px it competes with the
manifesto text and video cards. No information value — cut. */
.rt-ghost {
display: none !important;
}
/* #168 — Placeholder testimonial cards (.vc-ph): empty spacer cards
that maintain desktop grid column structure. On mobile they are
blank rectangles with no purpose. Cut cleanly. */
.vc-ph {
display: none !important;
}
/* #169 — Pattern overlays (.pdl-pat): noise texture that reads well
at 1280px. On mobile the grain can appear muddy on low-DPI screens.
#153 set 0.5 — reduce further to 0.32 for clean small screens. */
.pdl-pat {
opacity: 0.32 !important;
}
/* #170 — Hero background blobs (.hero-blobs): large organic shapes
behind the hero. On mobile viewport they clip awkwardly. Hiding
them produces a cleaner, faster hero without visual regression. */
.hero-blobs {
display: none !important;
}
/* #171 — Film-strip edge decorations (.film-l, .film-r): sprocket-
hole vertical strips on the Impressions section sides. They frame
the desktop layout. When stacked on mobile they become orphaned
at section edges with no functional or aesthetic purpose. */
.film-l,
.film-r {
display: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§34 SECTION SIZING — vertical rhythm recalibrated for mobile
Desktop padding is generous to frame side-by-side layouts.
Mobile stacks — every extra padding unit is scroll distance.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #172 — Red testimonials: desktop padding frames the two-column
card layout. Stacked on mobile, that padding becomes dead space
above and below. Reduce to crisp section transitions. */
.red-testi {
padding-top: clamp(36px, 5.5vw, 60px) !important;
padding-bottom: clamp(36px, 5.5vw, 60px) !important;
}
/* #173 — SIX section bottom: the carousel adds visual weight below
the drag hint. Section bottom padding can be tighter — the
seam transition handles the boundary. */
#six {
padding-bottom: clamp(28px, 4vw, 44px) !important;
}
/* #174 — WHO section: content-dense section where desktop padding
creates avoidable scroll. Tighter but still breathable. */
.who {
padding-top: clamp(36px, 5vw, 56px) !important;
padding-bottom: clamp(36px, 5vw, 56px) !important;
}
/* #175 — Impressions left column: when stacked on mobile the default
top padding creates a block of empty espresso-dark before stats
appear. Pull the heading up to land faster. */
.impr-left {
padding-top: clamp(36px, 5vw, 56px) !important;
padding-bottom: clamp(28px, 4vw, 44px) !important;
}
/* #176 — FAQ section: reduce top padding. #140 added extra padding —
at narrow widths the heading can be pushed far below the seam.
Tighter entry keeps the section feeling intentional. */
.faq {
padding-top: clamp(44px, 6vw, 80px) !important;
}
/* #177 — Apply section: after scrolling through all content, users
arrive intent-ready. Remove the extra 80px+ of dark before the
heading — pull the form up toward the fold. */
#apply {
padding-top: clamp(44px, 6vw, 72px) !important;
}
/* #178 — Footer: padding closure. Footer is navigation + legal —
not a content section. 28px top is sufficient to separate it
from the apply section. Compact = confident. */
footer {
padding-top: clamp(28px, 4vw, 48px) !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§35 WHO SECTION POLISH — stacked layout fine-tuning
§26 handled the order swap (photo first). These improvements fix
spacing, image sizing, and labels in the stacked configuration.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 820px) {
/* #179 — who-split column gap: when the two halves stack vertically,
an explicit gap separates the photo block from the text block.
Without it they read as one merged section. 28px is enough. */
.who-split {
gap: 28px !important;
}
/* #180 — Program history image container: explicit height so the
event photo fills a meaningful viewport area. Without a height
the container may collapse or render inconsistently. */
.who-hist-img {
height: clamp(200px, 52vw, 300px) !important;
overflow: hidden !important;
border-radius: 6px !important;
}
/* #181 — History image fill: explicitly cover the container.
Without object-fit:cover the image may letterbox or stretch.
Combined with #131's object-position this shows people, not sky. */
.who-hist-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* #182 — "View all editions" button: full-width on mobile.
A left-aligned ghost button in a full-width column looks like
an afterthought. Full-width reads as a real CTA. */
.ph-btn {
width: 100% !important;
justify-content: center !important;
margin-top: 14px !important;
}
/* #183 — Person-type labels (.wl): bump to 14px minimum.
These are the entry-point labels ("Creators", "Founders") —
users scan them first before reading descriptions below. */
.wl {
font-size: clamp(14px, 3.6vw, 17px) !important;
}
/* #184 — Person-type description (.wd): 13px + 1.62 line-height.
Dense text on mobile strains the eye. Comfortable line-height
and a clear floor size prevents the descriptions feeling hostile. */
.wd {
font-size: 13px !important;
line-height: 1.62 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§36 IMPRESSIONS v3 — proper mobile column stack
On desktop: side-by-side left (stats) + right (film roll).
On mobile: stats above, film roll below — full width both.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #185 — Impressions section: force flex-column so stats land above
film roll. On desktop these are side-by-side via a different layout
model — this makes the mobile ordering explicit and reliable. */
.impr {
display: flex !important;
flex-direction: column !important;
}
/* #186 — Impressions columns: full-width when stacked. Without this
both columns try to maintain desktop percentage widths, which clips
content against the right edge and creates awkward gutters. */
.impr-left,
.impr-right {
width: 100% !important;
max-width: 100% !important;
}
/* #187 — Film roll scroll area: minimum height so the image strip
has visual weight when displayed below the stats. Too short and
it looks like a broken loading state. 240px is comfortable. */
.impr-scroll {
min-height: 240px !important;
}
/* #188 — "900+" key stat: maximum visual punch. This is the single
most credibility-signaling number on the page. #139 set 44px+ —
bump further to fill the mobile viewport with authority. */
.is-n-key {
font-size: clamp(56px, 14vw, 80px) !important;
line-height: 0.9 !important;
}
/* #189 — Stat labels: uppercase with generous letter-spacing.
At 11px these need the tracking to prevent letter-collision on
sub-pixel renders on cheaper Android screens. */
.is-l {
font-size: 11px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
}
/* #190 — Impressions stats container: bottom breathing room so
the film roll doesn't crowd the stats block from below. */
.impr-stats {
padding-bottom: 8px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§37 APPLY SECTION v2 — form conversion final mile
The apply form is the revenue action. Every friction point costs.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 660px) {
/* #191 — Apply heading: bump from #77's 30px minimum to 34px.
The final CTA needs maximum authority. Slightly larger at entry
increases intent-matching before the user reads a single word. */
#apply .app-text h2 {
font-size: clamp(34px, 8.5vw, 56px) !important;
}
/* #192 — Form labels: 12px floor with slight letter-spacing.
Labels smaller than 12px are a micro-friction point before the
user even starts typing. Letter-spacing aids scan speed. */
.app-form label {
font-size: 12px !important;
letter-spacing: 0.06em !important;
}
/* #193 — Apply submit button: 52px min-height for confident tap.
44px is the accessibility floor — 52px signals "this is the
primary action" without being comically large. */
.app-form button {
min-height: 52px !important;
}
/* #194 — Apply supporting paragraph: 15px + 1.65 line-height.
The text above the form sets expectation. Readable without
zooming = trust before commitment. */
.app-text p {
font-size: 15px !important;
line-height: 1.65 !important;
}
/* #195 — Form container: subtle dark glass backdrop. A fractional
background tint on the form card increases figure/ground separation
— the form reads as a distinct action area inside the section. */
.app-form {
background: rgba(0, 0, 0, 0.12) !important;
border-radius: 10px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§38 RED-TESTI POLISH — testimonial section layout for mobile
Desktop: left (manifesto + stats) | right (video cards).
Mobile: manifesto reads first, then proof (videos below).
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #196 — Red testimonials: flex-column stacking. The emotional
manifesto text must come before the video proof on mobile —
story before evidence, not side-by-side. */
.red-testi {
display: flex !important;
flex-direction: column !important;
}
/* #197 — RT left column: full width + remove desktop right padding
that creates asymmetric gutters when stacked. */
.rt-left {
width: 100% !important;
padding-right: 0 !important;
}
/* #198 — RT right column (video cards): full width when stacked.
Without this it may retain desktop % width and clip content. */
.rt-right {
width: 100% !important;
}
/* #199 — Manifesto text: bump size for authority. "Some rooms
change your perspective" is the emotional anchor of the section.
At mobile it should read bold and large, not like body copy. */
.rt-manifesto {
font-size: clamp(18px, 4.8vw, 28px) !important;
line-height: 1.4 !important;
}
/* #200 — "More opinions" button: full-width on mobile. Consistent
with the WhatsApp and apply button pattern. A full-width button
reads as a real secondary CTA, not a text link afterthought. */
.rt-more-btn {
width: 100% !important;
justify-content: center !important;
margin-top: 16px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§39 HERO v3 — viewport-first composition
§2 and §20 handled the structure. v3 fine-tunes reading comfort,
portal positioning, and CTA layout at the narrowest phones.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #201 — Hero text block: remove any right-side padding that
creates asymmetric gutters at narrow widths. The wrap handles
consistent side padding globally via §0 rule #3. */
.hero-text {
padding-right: 0 !important;
max-width: 100% !important;
}
/* #202 — Hero deck paragraph: calibrated mobile reading size.
3.6vw = ~14px at 390px, capped at 18px. Sets authority hierarchy
clearly below h1 without competing or shrinking to body size. */
.hero-deck {
font-size: clamp(14px, 3.6vw, 18px) !important;
line-height: 1.52 !important;
}
/* #203 — Hero portal wrap: predictable top margin below the text
block. Prevents portal from sitting directly against the last
paragraph with no visual breath. */
.hero-portal-wrap {
margin-top: clamp(16px, 3.5vw, 28px) !important;
}
/* #204 — Hero alumni quote: compact on mobile. The testimonial
quote is supporting proof — it should be present but not push
the CTA below the fold before the video portal is seen. */
.hero-quote {
font-size: 11.5px !important;
max-width: 88% !important;
}
}
@media (max-width: 600px) {
/* #205 — Hero CTAs: stack vertically on narrow phones. Side-by-side
at 390px can make buttons too compressed to read cleanly. Stacked =
full readable width + clear primary / secondary action hierarchy. */
.hero-ctas {
flex-direction: column !important;
width: 100% !important;
gap: 10px !important;
}
.hero-ctas .btn {
width: 100% !important;
justify-content: center !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§40 TYPOGRAPHY — reading comfort + hierarchy baseline
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #206 — Body copy floor in content sections: 13px minimum for
key reading areas. Wraps the most common text-bearing containers
so fine-print body copy doesn't drop below legibility. */
.wrap p,
.fa p,
.who-left p {
font-size: max(13px, 1em);
}
/* #207 — Italic heading elements: explicit font-style + synthesis.
Some Android system fonts don't synthesize italics — the h2 em
elements (e.g. "Mastermind.") would render upright without this. */
h1 em, h2 em, h3 em {
font-style: italic;
font-synthesis: style;
}
/* #208 — Heading balance: CSS text-wrap:balance prevents awkward
one-word orphan lines at heading ends. Supported Chrome 114+.
Ignored gracefully on older engines — no regression risk. */
h2, h3 {
text-wrap: balance;
}
/* #209 — Fine print floor: footer copy, legal lines — intentionally
small, but below 11px becomes an accessibility failure on mobile.
max() ensures the floor without overriding intentional large text. */
small,
.f-copy,
.f-legal {
font-size: max(11px, 0.75em) !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§41 SIX v3 — card gallery heading + padding polish
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #210 — SIX section heading: explicit size override. The #152
base `.sh h2` rule sets a clamp — but `#six .sh h2` should
be slightly more generous to land with visual authority. */
#six .sh h2 {
font-size: clamp(30px, 7.5vw, 52px) !important;
}
/* #211 — SIX section top padding: breathing room above the heading
on scroll-in. The seam above the section is decorative — the
heading needs space to feel intentional, not crammed. */
#six {
padding-top: clamp(40px, 5.5vw, 64px) !important;
}
/* #212 — Speaker / content card inner: ensure inner content areas
don't clip with overflow:hidden at narrow widths. max-height:none
lets the card caption grow to fit its content naturally. */
.cc-inner {
max-height: none !important;
overflow: visible !important;
}
/* #213 — Card heading in SIX cards: line-height tighten for compact
presentation. Card headings at 15-18px need slightly tighter
line-height than body text — 1.2 reads as editorial, not loose. */
.cc-name,
.cc-title,
.cc h3,
.cc .name {
line-height: 1.22 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§42 WHO SECTION VERTICAL FIX
"This is for / Who this is for." → single-column cards at all
mobile widths, not just ≤560px as the base CSS sets.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #214 — who-grid single column at ≤860px. The base CSS only collapses
to 1fr at ≤560px — between 561–860px the 2-col grid shows on wide
phones and tablets. Description text is too long for a narrow half-
column. Force vertical list for all mobile viewport widths. */
.who-grid {
grid-template-columns: 1fr !important;
}
/* #215 — who-left .sh heading block: clear vertical gap between the
"This is for / Who this is for." heading unit and the grid below.
Without this the heading and first card feel merged on mobile. */
.who-left .sh {
margin-bottom: clamp(18px, 3.5vw, 28px) !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§43 VERTICAL SAVINGS — sections end when content ends
Ten targeted reductions. Goal: after content, section closes.
No empty dark. No wasted scroll distance.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #216 — Value strip (.mq): hide on mobile. The 5 items with
separators try to justify-space-between across 390px — they squash
unreadably. The strip adds context for desktop scanners; mobile
users who scroll past the hero are already past the scan phase. */
.mq {
display: none !important;
}
/* #217 — Section heading block (.sh): reduce the bottom margin
between the heading unit and the first content element below it.
16–24px is enough visual separation without leaving a void. */
.sh {
margin-bottom: clamp(16px, 3vw, 24px) !important;
}
/* #218 — WHO person cards (.wc) padding: reduce internal top/bottom
so each of the four stacked cards is compact. Cards as a vertical
list need less padding than a 2-col grid — less air = faster scan. */
.wc {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* #219 — Hero alumni quote: pull the margin in. The quote sits
between the heading text and CTAs — shrinking its top/bottom
margin keeps the CTA buttons closer to the visual fold. */
.hero-quote {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
/* #220 — Red-testi stats (.rt-stats): tighter vertical gap between
the four outcome stats (20 clients, 14 live together, etc.).
Desktop gap fills column height — single-column mobile doesn't
need that air. 6px gap is plenty for scanning. */
.rt-stats {
gap: 6px !important;
}
/* #221 — Impressions stat rows (.is-row): reduce each row's
top/bottom padding. The 4 stats (900+, 7 editions, 4.5M, 25
countries) stack vertically — 8px padding per row is enough. */
.is-row {
padding-top: 8px !important;
padding-bottom: 8px !important;
}
/* #222 — FAQ items (.fi): the outer item wrapper may have default
padding that stacks with the button's own padding. Zeroing the
wrapper padding lets the .fq button control all spacing. */
.fi {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* #223 — Decorative seams: reduce height. Seams signal transitions,
not content. 16–28px is enough gradient height to read the colour
shift without consuming real scroll estate. */
.seam {
height: clamp(16px, 2.5vw, 28px) !important;
}
/* #224 — Apply text block bottom margin: reduce the gap between
the intro text/heading and the form below it. Tight proximity
makes the form feel like the natural next step, not a new section. */
.app-text {
margin-bottom: clamp(18px, 3.5vw, 28px) !important;
}
/* #225 — FAQ list top padding: reduce the gap between the "Questions."
heading and the first FAQ item. Desktop leaves generous space here
that on mobile just means extra scrolling before answers start. */
.faq-list {
padding-top: 12px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§44 RESIZE PERFECT — 10 things that now fit the 390px canvas
Every rule below corrects a size mismatch between desktop values
and what looks right on the actual phone screen.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #226 — Impression stat numbers (.is-n) non-key stats: calibrate
size. The base CSS inherits a smaller size than .is-n-key. On
mobile single-column layout these numbers can be larger and still
fit perfectly: clamp(28px, 7.2vw, 42px). */
.is-n {
font-size: clamp(28px, 7.2vw, 42px) !important;
}
/* #227 — Red-testi stat numbers (.rs .n): calibrated clamp for
single-column mobile. Base clamp(26px,3.2vw,44px) = 26px at 390px.
A full-width column can afford slightly more visual weight here. */
.rs .n {
font-size: clamp(28px, 7.2vw, 44px) !important;
}
/* #228 — Lead testimonial card (.vc-lead): constrain width. In
the single-column layout .vc-lead expands to 100% which can feel
overwhelming. 88vw gives consistent side gutters. */
.vc-lead {
max-width: 88vw !important;
width: 100% !important;
}
/* #229 — Hero video portal: enforce correct aspect-ratio + full
width on mobile. The desktop version uses absolute positioning
and margin-top:65px that §20 overrides — this ensures the portal
renders at a correct 16:9 ratio with no height distortion. */
.hero-portal {
aspect-ratio: 16 / 9 !important;
max-width: 100% !important;
width: 100% !important;
margin-top: 0 !important;
margin-left: 0 !important;
}
/* #230 — WHO person cards: min-height zero so card height is
driven purely by content. Desktop grid rows equalize heights
across a row — single-column mobile each card should be its
own height, no imposed minimum. */
.wc {
min-height: 0 !important;
align-self: start !important;
}
/* #231 — Form inputs and selects: consistent 46px height. Uniform
field height = premium, intentional form. Mixed heights across
fields look sloppy and undermine trust before a single character
is typed. Textarea excluded — it needs variable height. */
.app-form input,
.app-form select {
height: 46px !important;
min-height: 46px !important;
box-sizing: border-box !important;
}
/* #232 — RT left column horizontal padding: on single-column mobile
the 24–48px desktop horizontal padding is too generous. Align it
with the site-wide wrap padding for consistent gutters. */
.rt-left {
padding-left: clamp(18px, 5vw, 32px) !important;
padding-right: clamp(18px, 5vw, 32px) !important;
}
/* #233 — Impressions "Incredible connections." heading: calibrated
for 390px. Large enough to dominate the espresso section without
overflowing. 7.8vw = ~30px at 390px, capped at 52px. */
.impr-left h2 {
font-size: clamp(28px, 7.8vw, 52px) !important;
}
/* #234 — Nav overlay links: confirm floor at 32px. The base CSS
clamp starts at 2.2rem (35.2px in most browsers). On very small
phones 32px ensures readability without overflowing the overlay. */
.ov-link {
font-size: clamp(32px, 9vw, 3.8rem) !important;
}
/* #235 — FAQ question button (.fq): align-items:flex-start so that
when the question text wraps to 2 lines, the +/− icon aligns to
the first line top rather than vertically centring against the
whole multi-line block (which looks misaligned). */
.fq {
align-items: flex-start !important;
line-height: 1.45 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§45 BEAUTY SYSTEM — 10 targeted aesthetic improvements
Each rule addresses a specific visual gap at 390px. Together they
elevate the mobile to the same premium register as the desktop.
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #236 — Nav overlay: frosted glass effect. The flat dark overlay
gets backdrop-filter:blur for a premium feel — content blurs
through at 93% opacity. Standard on luxury mobile experiences. */
.nav-overlay {
background: rgba(6, 9, 5, 0.93) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* #237 — Active carousel dot: brand gold. The active dot signals
"you are here" — using --gold-h (the site's gold accent) ties
navigation state to the brand's active-colour system. */
.car-dots .d-btn.on {
background: var(--gold-h, #c89b3c) !important;
}
/* #238 — Testimonials manifesto italic ("who you become"): gold on
deep red. The em phrase is the emotional peak — gold italic on
dark red creates the "luxury editorial" moment this section
builds toward. Contrast ratio maintained (WCAG AA on this bg). */
.rt-manifesto em {
color: var(--gold-h, #c89b3c) !important;
}
/* #239 — RT decorative rule: gold gradient. The thin horizontal
rule separating the manifesto from the stats becomes a gold line
— a visual bridge between the brand palette and the section. */
.rt-rule {
background: linear-gradient(
to right,
transparent 0%,
var(--gold-h, #c89b3c) 38%,
var(--gold-h, #c89b3c) 62%,
transparent 100%
) !important;
height: 0.5px !important;
opacity: 0.45 !important;
border: none !important;
}
/* #240 — Dark-wall eyebrow labels (.ey): warm gold tint on all
dark sections. The existing near-white reads flat — rgba(195,170,100)
is warm gold that complements the dark ink background without
competing with the heading. Only on .wall-dark for precision. */
.wall-dark .ey {
color: rgba(195, 170, 100, 0.78) !important;
}
/* #241 — Impressions heading italic "connections": pure white.
On the espresso (.wall-esp) dark background, the em should be
the brightest element — full white creates the emphasis that
#162's warm text-shadow then halos with amber light. */
.impr-left h2 em {
color: #ffffff !important;
}
/* #242 — Program history photo: golden border frame. First element
users see after the §26 order swap. A 0.5px warm-gold border
elevates it from a plain div to a curated portrait. The subtle
double-ring effect (border + box-shadow) adds depth. */
.who-hist-img {
border: 0.5px solid rgba(198, 155, 60, 0.3) !important;
box-shadow: 0 0 0 1px rgba(198, 155, 60, 0.06) !important;
}
/* #243 — Lead testimonial card (.vc-lead): premium border treatment.
First video proof users reach on scroll. A translucent white border
lifts the card off the red section background and signals it's the
most important of the three testimonials. */
.vc-lead {
border: 0.5px solid rgba(255, 255, 255, 0.14) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04),
0 16px 48px -8px rgba(0, 0, 0, 0.6) !important;
}
/* #244 — Hero portal warm frame: the video portal is the hero's
dominant element. Matching the `.al` architectural line colour
(that we've now hidden on mobile) with a portal border recreates
the same "golden frame" visual language in a mobile-native way. */
.hero-portal {
border-color: rgba(200, 210, 155, 0.2) !important;
}
/* #245 — Eyebrow-to-h2 tight coupling (.sh .ey): reduce margin-bottom
from the base 11px to 7px. Eyebrow + heading are one semantic unit —
kiss-fitting them reads as intentional design, not two separate
elements. Tighter = more editorial, less template. */
.sh .ey {
margin-bottom: 7px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§46 BONUS — 5 final refinements
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #246 — Nav overlay utility buttons (.ov-utils): hide on mobile.
These secondary utility actions clutter the overlay below the main
nav links. On a small screen the overlay should be navigation only —
one purpose, no distraction. */
.ov-utils {
display: none !important;
}
/* #247 — Hero portal arches: hide the 5 nested arch dividers inside
the portal on mobile. They add depth at 1280px. At 390px the portal
is ~350px wide — the arches are imperceptible but still consume
paint resources. Remove for cleaner faster hero. */
.hero-portal .arch {
display: none !important;
}
/* #248 — Value strip ornament separators (.orn ✦): hide the decorative
separators. Even if .mq shows (e.g. tablet ≥861px) the ✦ symbols
are visual clutter at small font sizes. Items can sit side-by-side
with just gap spacing rather than explicit ornaments. */
.orn {
display: none !important;
}
/* #249 — RT stats top padding: breathing room above the four stats.
The .rt-rule gold line sits above .rt-stats — 12px below the rule
before the numbers start prevents the line and numbers from crowding. */
.rt-stats {
padding-top: 12px !important;
}
/* #250 — RT left edge glow (::before): on single-column mobile the
left-edge gradient glow can be narrower. There's no adjacent column
to bleed into — the glow should be a focused strip, not a wash. */
.rt-left::before {
width: 18% !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§47 WHO ACCORDION — click-to-read descriptions
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #251 — WHO description: collapsed by default. JS toggles .open.
CSS handles the animated open/close via max-height transition.
padding-top/bottom: 0 ensures tight collapse with box-sizing. */
.wd {
max-height: 0 !important;
overflow: hidden !important;
opacity: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.2s ease !important;
}
/* #252 — WHO label: flex row for the +/− indicator, pointer cursor */
.wl {
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
user-select: none !important;
-webkit-user-select: none !important;
padding-bottom: 10px !important;
}
/* #253 — WHO open state: expand to show description */
.wc.open .wd {
max-height: 300px !important;
opacity: 1 !important;
padding-top: 8px !important;
padding-bottom: 10px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§48 HERO BOTTOM CUT — remove ~0.7cm below hero video
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #254 — Hero: trim bottom padding by ~26px. Excess space below
the portal video on mobile makes scroll-to-content feel slow. */
#hero {
padding-bottom: clamp(16px, 3vw, 28px) !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§49 MASTERMIND DOTS — 3px micro-dots, 2px gap, all in 2.6cm
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #255 — Dots container: cap at 2.6cm (≈98px), no wrap, centered.
20 dots × (3px + 2px gap) - 2px = 98px. All speakers visible. */
.car-dots {
max-width: 2.6cm !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
gap: 2px !important;
justify-content: center !important;
}
/* #256 — Individual dot: 3px micro-indicator */
.car-dots .d-btn {
width: 3px !important;
height: 3px !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
min-width: 3px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§50 SIX HEADING HORIZONTAL — compact inline layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #257 — SIX left column: horizontal flex to pack all elements inline.
Saves ~60px of vertical space vs stacked block layout. */
.six-lc {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 4px 10px !important;
padding: 12px 16px 10px !important;
border-bottom: none !important;
text-align: center !important;
}
/* #258 — SIX h2: inline flex so "Six" and "parts." sit on one line */
.six-lc h2 {
display: flex !important;
align-items: baseline !important;
gap: 4px !important;
font-size: clamp(15px, 4.2vw, 20px) !important;
margin: 0 !important;
line-height: 1 !important;
}
/* #259 — SIX h2
: hide so "Six parts." stays on one line */
.six-lc h2 br {
display: none !important;
}
/* #260 — SIX decorative rule: hide to save height */
.six-lc .rule {
display: none !important;
}
/* #261 — SIX subtitle: compact, full-width so it wraps below inline items */
.six-lc p.sub {
font-size: 9px !important;
letter-spacing: 0.06em !important;
flex-basis: 100% !important;
text-align: center !important;
margin: 0 !important;
opacity: 0.5 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§51 SIX CARDS — portrait 9:16, narrow width (~3 visible)
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #262 — Card width: 120px so 3 cards + gaps ≈ 390px viewport.
Slight overflow shows a 4th card edge as scroll hint. */
.cc {
width: clamp(110px, 30vw, 135px) !important;
min-width: 0 !important;
flex: 0 0 clamp(110px, 30vw, 135px) !important;
}
/* #263 — Card frame: portrait 9:16.
Phone-native story/reel format — more intuitive on mobile. */
.cc-frame {
aspect-ratio: 9 / 16 !important;
}
/* #264 — SIX grid: tighter gap + side padding for card alignment */
.six-grid {
gap: 8px !important;
padding-left: 16px !important;
padding-right: 16px !important;
padding-bottom: 8px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§52 TESTIMONIALS HORIZONTAL SCROLL — 2.5 cards visible
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #265 — Testimonial area: horizontal scroll row.
All .vc cards flatten into one scrollable track. */
.vc-area {
display: flex !important;
flex-direction: row !important;
overflow-x: auto !important;
overflow-y: visible !important;
scroll-snap-type: x mandatory !important;
gap: 8px !important;
padding: 0 16px 8px !important;
scrollbar-width: none !important;
}
.vc-area::-webkit-scrollbar {
display: none !important;
}
/* #266 — vc-row: collapse wrapper so its .vc children become direct flex
items of .vc-area — enables flat horizontal scroll across all cards. */
.vc-row {
display: contents !important;
}
/* #267 — Each video card: 150px for 2.5 visible at 390px.
150 × 2.5 + 8 × 1.5 = 387px ≈ viewport (partial 3rd = scroll hint). */
.vc-area .vc {
flex: 0 0 150px !important;
width: 150px !important;
scroll-snap-align: start !important;
max-width: none !important;
min-width: 0 !important;
}
/* #268 — Placeholder cards: fade to signal "coming soon" */
.vc-area .vc.vc-ph {
opacity: 0.35 !important;
flex: 0 0 150px !important;
width: 150px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§53 SIX CARD MODAL — smaller video, side-by-side layout
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #269 — Modal video: float left at 35vw. Text wraps right beside it.
Magazine layout cuts vertical height by ~60% vs full-width portrait. */
.pm-vid-wrap {
width: 35vw !important;
max-width: 130px !important;
float: left !important;
margin-right: 14px !important;
margin-bottom: 8px !important;
flex-shrink: 0 !important;
}
/* #270 — Modal image grid: shorten rows on mobile */
.pm-imgs {
grid-template-rows: repeat(2, 52px) !important;
}
/* #271 — Image column: override the ≤700px full-width rule —
keep it floated right so images + video sit beside the text. */
.pm-right-col {
float: right !important;
width: clamp(80px, 22vw, 110px) !important;
margin-left: 10px !important;
margin-bottom: 8px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§54 UNREBUILT FIXES — sections not yet addressed for mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #272 — SIX outer: force single-column so heading sits above cards.
Base CSS collapses at 780px but may not apply at 860px breakpoint. */
.six-outer {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
/* #273 — Members portal: desktop admin section — hide on mobile.
Keeps the conversion flow clean with no dead UI elements. */
.mem, #mem {
display: none !important;
}
/* #274 — FAQ answers: extra line-height for readability on narrow screens */
.fa {
line-height: 1.65 !important;
}
/* #275 — Apply submit button: full-width on mobile for easy tap */
#apply-form button[type="submit"],
.apply-submit,
.btn-apply {
width: 100% !important;
max-width: none !important;
}
/* #276 — Form inline groups: stack vertically on mobile
so labels and inputs don't overflow the phone width. */
.ff-group {
flex-direction: column !important;
gap: 12px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§55 SECTION CUTS — 0.6cm tight trim on all sections
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #277 — Hero: end 0.6cm below video */
#hero {
padding-bottom: 0.6cm !important;
}
/* #278 — SIX: end 0.6cm below cards */
#six {
padding-bottom: 0.6cm !important;
}
/* #279 — Mastermind: 0.6cm tighter on top above heading */
#mastermind.lineup {
padding-top: clamp(20px, 3.5vw, 32px) !important;
}
/* #280 — Red-testi: reduce top/bottom vertical breathing */
.red-testi {
padding-top: clamp(22px, 3vw, 32px) !important;
padding-bottom: 0.6cm !important;
}
/* #281 — FAQ: tighter top */
#faq {
padding-top: clamp(24px, 3.5vw, 36px) !important;
}
/* #282 — WHO section: tighter top + bottom */
.who {
padding-top: clamp(22px, 3vw, 32px) !important;
padding-bottom: 0.6cm !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§56 MANIFESTO HORIZONTAL — two phrases side by side
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #283 — Manifesto container: flex row so phrases share one Y-axis */
.rt-manifesto {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 12px !important;
text-align: left !important;
}
/* #284 — First phrase (rt-m1 span): equal column */
.rt-m1 {
flex: 1 1 0 !important;
display: block !important;
line-height: 1.35 !important;
}
/* #285 — Italic phrase (em): equal column, inline-block treated as block */
.rt-manifesto > em {
flex: 1 1 0 !important;
display: block !important;
line-height: 1.35 !important;
}
/* #286 — Spacer span inside original manifesto: hide (no longer needed) */
.rt-manifesto span[aria-hidden] {
display: none !important;
}
/* #287 — rt-stats after DOM reorder: horizontal wrap layout */
.red-testi > .rt-stats {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-around !important;
padding: 14px 16px !important;
gap: 8px 10px !important;
border-top: 0.5px solid rgba(200, 150, 80, 0.15) !important;
margin: 0 !important;
width: 100% !important;
}
.red-testi > .rt-stats .rs {
text-align: center !important;
flex: 0 0 auto !important;
min-width: 68px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§57 RIGHT ROOM EYEBROW + TESTI SIZE
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #288 — Hide "The right room" eyebrow — manifesto is self-explanatory */
.rt-left .ey {
display: none !important;
}
/* #289 — Testimonial cards: 165px = ~2.3 visible at 390px viewport */
.vc-area .vc {
flex: 0 0 165px !important;
width: 165px !important;
}
/* #290 — Placeholder cards: same width */
.vc-area .vc.vc-ph {
flex: 0 0 165px !important;
width: 165px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§58 LINEUP VERTICAL SCROLL — 16:9 cards stack vertically
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #291 — Lineup car-wrap: let vertical overflow through */
.lineup .car-wrap {
overflow: visible !important;
}
/* #292 — Lineup car: flip axis to vertical */
.lineup .car {
overflow-x: hidden !important;
overflow-y: auto !important;
max-height: 68vh !important;
scroll-snap-type: y mandatory !important;
scrollbar-width: none !important;
width: 100% !important;
}
.lineup .car::-webkit-scrollbar {
display: none !important;
}
/* #293 — Lineup car-track: column stack, full width */
.lineup .car-track {
flex-direction: column !important;
min-width: 0 !important;
width: 100% !important;
gap: 10px !important;
padding: 0 16px !important;
}
/* #294 — Lineup cards: full width */
.lineup .cc {
width: 100% !important;
flex: 0 0 auto !important;
min-width: 0 !important;
scroll-snap-align: start !important;
}
/* #295 — Lineup card frame: 16:9 landscape */
.lineup .cc-frame {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§59 SIX CARDS SCOPED — portrait 9:16 explicitly for .six-grid
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #296 — SIX grid cards: scoped portrait size */
.six-grid .cc {
width: clamp(110px, 30vw, 135px) !important;
flex: 0 0 clamp(110px, 30vw, 135px) !important;
min-width: 0 !important;
scroll-snap-align: start !important;
}
/* #297 — SIX card frames: portrait 9:16 */
.six-grid .cc-frame {
aspect-ratio: 9 / 16 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§60 IMPRESSIONS STATS HORIZONTAL — scroll with indicator
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #298 — Stats: horizontal scroll */
.impr-stats {
flex-direction: row !important;
overflow-x: auto !important;
scrollbar-width: none !important;
padding-bottom: 10px !important;
gap: 0 !important;
border-bottom: 0.5px solid rgba(200, 160, 80, 0.18) !important;
margin-bottom: 4px !important;
}
.impr-stats::-webkit-scrollbar {
display: none !important;
}
/* #299 — Each stat: fixed min-width, column layout, right border divider */
.is-row {
flex: 0 0 auto !important;
min-width: 88px !important;
flex-direction: column !important;
padding: 4px 14px 4px 0 !important;
border-right: 0.5px solid rgba(200, 160, 80, 0.12) !important;
align-items: flex-start !important;
gap: 3px !important;
margin-right: 14px !important;
}
.is-row:last-child {
border-right: none !important;
margin-right: 0 !important;
}
/* #300 — Scroll hint label below stats */
.impr-left::after {
content: 'scroll →' !important;
display: block !important;
font-family: var(--s) !important;
font-size: 7.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: rgba(200, 160, 80, 0.28) !important;
margin-top: 7px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§61 WHATSAPP WHITE + APPLY CENTERED
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #301 — WhatsApp: remove green box, clean white */
.wa-link {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: rgba(255, 255, 255, 0.88) !important;
padding: 10px 0 !important;
width: auto !important;
justify-content: center !important;
letter-spacing: 0.14em !important;
font-size: 11px !important;
}
.wa-link svg,
.wa-link svg path,
.wa-link svg circle {
stroke: rgba(255, 255, 255, 0.8) !important;
fill: none !important;
color: rgba(255, 255, 255, 0.8) !important;
}
/* #302 — Apply inner: center-stacked */
.app-inner {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* #303 — Apply text block: full width, centered */
.app-text {
text-align: center !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
/* #304 — Apply WhatsApp container: center */
.app-wa {
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
/* #305 — Apply form: full width, visible, centered */
.app-form {
display: block !important;
width: 100% !important;
max-width: 100% !important;
flex: none !important;
padding: clamp(20px, 4vw, 32px) clamp(16px, 4vw, 24px) !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§62 SEAM REDESIGN — subtler on mobile
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #306 — Seams: reduce height + opacity for cleaner section breaks */
.seam {
opacity: 0.5 !important;
min-height: 12px !important;
max-height: 22px !important;
}
/* #307 — Seam glows: softer blur radius on narrow screen */
.seam::before,
.seam::after {
opacity: 0.28 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§64 MASTERMIND BUTTON + DOTS + LM-ROW
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #314 — "See all speakers" button */
.spk-load-more-btn {
display: flex !important;
align-items: center !important;
gap: 6px !important;
margin: 14px auto 0 !important;
padding: 9px 20px !important;
background: rgba(255, 255, 255, 0.06) !important;
border: 0.5px solid rgba(255, 255, 255, 0.16) !important;
border-radius: 4px !important;
color: rgba(255, 255, 255, 0.75) !important;
font-family: var(--s) !important;
font-size: 10px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: background 0.2s !important;
}
.spk-load-more-btn:active {
background: rgba(255, 255, 255, 0.12) !important;
}
/* #315 — Past Speakers row: 0.9cm higher */
.lm-row {
margin-top: calc(20px - 0.9cm) !important;
}
/* #316 — Dots container: centered margins */
.car-dots {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§65 VIDEO CARDS — portrait framing, gradient scrims, snap
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #317 — Testimonials: portrait 3:4 so faces fill the card */
.vc-area .vc {
aspect-ratio: 3 / 4 !important;
height: auto !important;
}
/* #318 — Testimonial images: object-position top so faces don't crop */
.vc-area .vc img {
aspect-ratio: unset !important;
height: 100% !important;
object-position: top center !important;
}
/* #319 — Testimonial scroll: snap card-by-card, breathing room from edge */
.vc-area {
scroll-snap-type: x mandatory !important;
padding-left: 16px !important;
scroll-padding-left: 16px !important;
padding-right: 8px !important;
}
.vc-area .vc,
.vc-area .vc-lead {
scroll-snap-align: start !important;
}
/* #320 — Testimonial gradient overlay: deeper bottom scrim for name readability */
.vc .vc-ov {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.62) 0%,
rgba(0, 0, 0, 0.12) 42%,
transparent 65%
) !important;
}
/* #321 — vc-play button: smaller, lighter glass pill on mobile */
.vc-play {
width: 26px !important;
height: 26px !important;
background: rgba(0, 0, 0, 0.28) !important;
border: 0.5px solid rgba(255, 255, 255, 0.28) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
}
.vc-play::after {
border-width: 4px 0 4px 7px !important;
margin-left: 2px !important;
}
/* #322 — SIX grid: left breathing room so first card doesn't touch edge */
.six-rc {
padding-left: 16px !important;
padding-right: 8px !important;
}
.six-grid {
scroll-padding-left: 0 !important;
}
/* #323 — SIX card poster: top-biased for face-forward portrait cards */
.six-grid .cc-poster {
object-position: top center !important;
aspect-ratio: unset !important;
height: 100% !important;
}
/* #324 — SIX card frame: subtle definition + border-radius */
.six-grid .cc-frame {
border: 0.5px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
/* #325 — SIX card: bottom scrim so any label stays readable */
.six-grid .cc-frame::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.44) 0%,
transparent 48%
) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* #326 — Lineup card: subtle border + border-radius */
.lineup .cc-frame {
border: 0.5px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
/* #327 — Lineup card: bottom gradient for speaker label below */
.lineup .cc-frame::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.38) 0%,
transparent 42%
) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* #328 — Lineup card poster: top-biased for faces */
.lineup .cc-poster {
object-position: top center !important;
aspect-ratio: unset !important;
height: 100% !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§66 TYPOGRAPHY — mobile-first hierarchy and scale
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #329 — rt-manifesto: smaller since 2-column, preserve line-height */
.rt-manifesto {
font-size: clamp(11px, 2.9vw, 14px) !important;
line-height: 1.42 !important;
}
/* #330 — Eyebrow: consistent 9px floor across sections */
.ey {
font-size: 9px !important;
letter-spacing: 0.26em !important;
}
/* #331 — Impressions key stat: standout scale */
.is-n-key {
font-size: clamp(28px, 8vw, 40px) !important;
}
/* #332 — Impressions regular stats: legible but compact */
.is-n {
font-size: clamp(22px, 6.5vw, 30px) !important;
}
/* #333 — Stat label: softened hierarchy */
.is-l {
font-size: 9px !important;
opacity: 0.65 !important;
letter-spacing: 0.14em !important;
}
/* #334 — WHO description text: clear hierarchy below gold label */
.wd {
font-size: 12.5px !important;
line-height: 1.55 !important;
color: rgba(200, 185, 150, 0.65) !important;
}
/* #335 — Mastermind heading: fit mobile without cramping */
.lineup h2 {
font-size: clamp(32px, 8.5vw, 52px) !important;
letter-spacing: -0.025em !important;
margin-bottom: 6px !important;
}
/* #336 — impr-left "Incredible connections": mobile scale */
.impr-left h2 {
font-size: clamp(22px, 6vw, 34px) !important;
line-height: 1.06 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§67 SPACING + LAYOUT POLISH
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #337 — rt-rule: full width line as section divider */
.rt-rule {
width: 100% !important;
max-width: 100% !important;
height: 0.5px !important;
margin: 10px 0 8px !important;
}
/* #338 — rt-left: no artificial min-width on mobile */
.rt-left {
min-width: 0 !important;
flex: none !important;
width: 100% !important;
}
/* #339 — rt-right: full width for horizontal testimonial scroll */
.rt-right {
min-width: 0 !important;
width: 100% !important;
flex: none !important;
}
/* #340 — car-dots gap: slightly more breathing between dots */
.car-dots {
gap: 6px !important;
}
/* #341 — lm-more-btn: flush center, consistent with dots */
.spk-load-more-btn {
margin-left: auto !important;
margin-right: auto !important;
}
/* #342 — WHO grid: consistent 8px gap between accordion items */
.sh .wg,
.who .wg {
gap: 8px !important;
}
/* #343 — Apply form: rounded + subtle border */
.app-form {
border-radius: 8px !important;
border: 0.5px solid rgba(255, 255, 255, 0.07) !important;
}
/* #344 — Apply text section: adequate top breathing room */
.app-text {
padding-top: clamp(28px, 5vw, 48px) !important;
padding-bottom: 16px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§68 COLOUR + VISUAL POLISH
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #345 — rt-ghost watermark: barely there, adds depth without noise */
.rt-ghost {
font-size: clamp(90px, 26vw, 150px) !important;
opacity: 0.022 !important;
letter-spacing: -0.04em !important;
}
/* #346 — rt-manifesto em: gold italic phrase stays on mobile */
.rt-manifesto > em {
color: var(--gold-h, #c89b3c) !important;
font-style: italic !important;
}
/* #347 — WHO open card: gold label brightens to confirm selection */
.wc.open .wl {
color: rgba(210, 172, 78, 0.95) !important;
text-shadow: 0 0 14px rgba(200, 152, 60, 0.28) !important;
}
/* #348 — SIX drag hint: barely visible whisper, doesn't compete */
#six .six-rc > p {
opacity: 1 !important;
color: rgba(184, 168, 120, 0.22) !important;
font-size: 7.5px !important;
letter-spacing: 0.34em !important;
padding: 4px 0 0 !important;
text-align: right !important;
padding-right: 8px !important;
}
/* #349 — Stats separators on mobile (rs row): gold dividers */
.rs {
position: relative !important;
}
.red-testi > .rt-stats .rs::after {
content: '' !important;
position: absolute !important;
top: 10% !important;
right: 0 !important;
height: 80% !important;
width: 0.5px !important;
background: rgba(200, 150, 80, 0.18) !important;
}
.red-testi > .rt-stats .rs:last-child::after {
display: none !important;
}
/* #350 — Lineup card shadow in vertical stack: depth separation */
.lineup .cc {
box-shadow: 0 3px 14px -4px rgba(0, 0, 0, 0.45) !important;
}
/* #351 — Seam warm-dark (red → dark): keep visible transition */
.seam.s-red-dk {
opacity: 0.55 !important;
}
/* #352 — impr-stats scroll indicator visual bar */
.impr-stats-wrap,
.impr-left {
position: relative !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§69 TOUCH QUALITY + INTERACTION
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #353 — Video card (testimonial): satisfying press feedback */
.vc-area .vc:active {
transform: scale(0.96) !important;
transition: transform 0.1s ease !important;
}
/* #354 — SIX card: subtle press */
.six-grid .cc:active {
transform: scale(0.97) !important;
transition: transform 0.1s ease !important;
}
/* #355 — Lineup card: press feedback */
.lineup .cc:active {
transform: scale(0.98) !important;
transition: transform 0.1s ease !important;
}
/* #356 — CTA buttons: unified press state */
.rt-more-btn:active,
.spk-load-more-btn:active,
.wa-link:active,
.app-btn:active {
opacity: 0.7 !important;
transform: scale(0.97) !important;
}
/* #357 — Form inputs: 16px prevents iOS auto-zoom (critical UX) */
#apply-form input,
#apply-form textarea,
#apply-form select,
.cc-form-input,
.ff-input {
font-size: 16px !important;
}
/* #358 — Footer: safe-area-inset-bottom for iPhone home bar */
footer {
padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
}
/* #359 — Apply section: safe-area clearance at page bottom */
#apply {
padding-bottom: calc(0.6cm + env(safe-area-inset-bottom, 0px)) !important;
}
/* #360 — Modal close buttons: 44px minimum touch target */
.pm-x,
.tm-x {
min-width: 44px !important;
min-height: 44px !important;
display: grid !important;
place-items: center !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§70 CRITICAL FIXES — WHO flat, testi 16:9, mastermind 2-col, cuts
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #361 — WHO: flat list — no background box, just subtle divider */
.wc {
background: transparent !important;
border: none !important;
border-bottom: 0.5px solid rgba(200, 185, 150, 0.1) !important;
border-radius: 0 !important;
padding: 13px 0 !important;
box-shadow: none !important;
}
.wc:last-child {
border-bottom: none !important;
}
/* #362 — WHO wl: flex so + indicator pushes to right */
.wl {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
margin-bottom: 0 !important;
}
/* #363 — Testimonials: revert to 16:9 (user preference) */
.vc-area .vc {
aspect-ratio: 16 / 9 !important;
height: auto !important;
}
.vc-area .vc img {
object-position: center !important;
}
/* #364 — Mastermind: 2-column grid + vertical scroll (overrides §58) */
.lineup .car {
scroll-snap-type: none !important;
}
.lineup .car-track {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
flex-direction: unset !important;
min-width: 0 !important;
width: 100% !important;
gap: 8px !important;
padding: 0 12px !important;
}
.lineup .cc {
scroll-snap-align: unset !important;
width: 100% !important;
min-width: 0 !important;
}
/* #365 — Mastermind dots: not meaningful for grid, hide */
.lineup .car-dots {
display: none !important;
}
/* #366 — Hero: push "Meet the people" down from top */
.hero-wrap {
padding-top: max(88px, calc(env(safe-area-inset-top, 0px) + 72px)) !important;
}
/* #367 — AGGRESSIVE SECTION CUTS — all major sections */
.red-testi { padding-top: 20px !important; padding-bottom: 18px !important; }
#six { padding-top: 20px !important; padding-bottom: 0.5cm !important; }
#mastermind.lineup { padding-top: 18px !important; padding-bottom: 18px !important; }
.who { padding-top: 20px !important; padding-bottom: 20px !important; }
.impr { padding-top: 18px !important; padding-bottom: 18px !important; }
#faq { padding-top: 20px !important; padding-bottom: 20px !important; }
#apply { padding-top: 24px !important; }
/* #368 — WHO right (program history): hide to save vertical space */
.who-right {
display: none !important;
}
/* #369 — WHO left: full width since right is hidden */
.who-split {
flex-direction: column !important;
}
.who-left {
width: 100% !important;
flex: none !important;
padding-right: 0 !important;
}
/* #370 — WHO grid: tight, no gaps between flat items */
.who-grid {
gap: 0 !important;
margin-top: 8px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§71 HERO REFINEMENTS — scale, breathing, buttons
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #371 — Hero H1: proper mobile scale + tight leading */
.h1,
#hero .h1 {
font-size: clamp(34px, 9vw, 52px) !important;
line-height: 0.97 !important;
letter-spacing: -0.02em !important;
}
/* #372 — Hero secondary line: barely softened opacity */
#hero .h1 .l2 {
opacity: 0.86 !important;
}
/* #373 — Hero deck: short, readable, de-emphasized */
.hero-deck {
font-size: 13px !important;
line-height: 1.54 !important;
max-width: 32ch !important;
opacity: 0.68 !important;
margin-top: 10px !important;
}
/* #374 — Hero CTAs: stack vertically for thumb zone */
.hero-ctas {
flex-direction: column !important;
gap: 10px !important;
align-items: flex-start !important;
margin-top: 20px !important;
}
/* #375 — Primary CTA: sensible max-width, centered text */
.hero-ctas .btn {
width: 100% !important;
max-width: 270px !important;
justify-content: center !important;
text-align: center !important;
}
/* #376 — Ghost CTA: lightweight text link feel */
.hero-ctas .btn-ghost {
padding: 8px 0 !important;
font-size: 11px !important;
letter-spacing: 0.2em !important;
}
/* #377 — Hero-line: shorter decorative rule */
.hero-line {
width: 24px !important;
margin: 12px 0 14px !important;
}
/* #378 — Hero architectural lines: hide on mobile (noise at 390px) */
#hero-vline,
#hero-hline {
display: none !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§72 WHO + APPLY POLISH
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #379 — WHO heading block: less margin below */
.who .sh {
margin-bottom: 8px !important;
}
/* #380 — WHO section heading scale */
.who .sh h2 {
font-size: clamp(26px, 7vw, 38px) !important;
margin-bottom: 0 !important;
}
/* #381 — WHO wl: no bottom margin (padding on .wc handles spacing) */
.wc .wl {
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
padding-bottom: 0 !important;
}
/* #382 — Apply rule separator: hide, saves space */
.app-rule {
display: none !important;
}
/* #383 — Apply note: small, de-emphasized */
.app-note {
font-size: 9.5px !important;
letter-spacing: 0.22em !important;
opacity: 0.5 !important;
margin-top: 8px !important;
}
/* #384 — Apply form input labels: uppercase micro-type */
.app-form label,
.ff-label {
font-size: 9px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
opacity: 0.65 !important;
}
/* #385 — Apply CTA wrap: always visible, centered */
.app-wa {
margin-top: 20px !important;
}
/* #386 — Apply form: no top margin gap */
.app-form {
margin-top: 12px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§73 IMPRESSIONS + FAQ POLISH
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #387 — Impressions right (film strip): hide, decorative only */
.impr-right {
display: none !important;
}
/* #388 — Impressions left: full width since right hidden */
.impr {
display: block !important;
}
.impr-left {
width: 100% !important;
flex: none !important;
}
/* #389 — Impr left heading: tight margins */
.impr-left h2 {
margin-bottom: 10px !important;
}
.impr-left .ey {
margin-bottom: 5px !important;
display: block !important;
}
/* #390 — FAQ items: flat, divider-based */
.fi {
border-bottom: 0.5px solid rgba(200, 185, 150, 0.1) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
margin-bottom: 0 !important;
}
/* #391 — FAQ question: clean, readable */
.fq {
font-size: 13px !important;
letter-spacing: 0.005em !important;
line-height: 1.4 !important;
padding: 13px 0 !important;
}
/* #392 — FAQ answer text: comfortable reading.
Padding lives ONLY on the open state so a closed item is fully
collapsed (no sliver) until the user clicks. */
.fa {
font-size: 13px !important;
line-height: 1.64 !important;
color: rgba(200, 185, 150, 0.7) !important;
}
.fi.open .fa {
padding-bottom: 14px !important;
}
/* #393 — FAQ toggle icon: right-aligned, consistent */
.fi-ic {
flex-shrink: 0 !important;
width: 22px !important;
height: 22px !important;
opacity: 0.55 !important;
}
/* #394 — FAQ section heading: mobile scale */
#faq h2 {
font-size: clamp(24px, 6.5vw, 38px) !important;
margin-bottom: 12px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§74 RHYTHM + DEPTH — consistency, spacing, final pass
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* #395 — Section stamps: hide (noise at mobile size) */
.stamp {
display: none !important;
}
/* #396 — Section architectural lines: hide on mobile */
.al {
display: none !important;
}
/* #397 — Stats .rs numbers: impactful scale */
.rs .n {
font-size: clamp(26px, 7.5vw, 36px) !important;
line-height: 1 !important;
}
.rs .l {
font-size: 9px !important;
letter-spacing: 0.12em !important;
opacity: 0.58 !important;
max-width: 10ch !important;
line-height: 1.25 !important;
margin-top: 2px !important;
}
/* #398 — rt-manifesto: no br line-height bleed */
.rt-manifesto br {
line-height: 0 !important;
display: block !important;
content: '' !important;
margin: 0 !important;
}
/* #399 — Eyebrow: consistent block + margin below */
.ey {
display: block !important;
margin-bottom: 5px !important;
}
/* #400 — Section headings: consistent margin under h2 */
.red-testi .rt-left h2,
.who .sh h2,
.lineup h2,
#six .six-lc h2,
.impr-left h2 {
margin-bottom: 6px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§75 PRECISION PASS — 0.35cm spacing rule · layout fixes · redesigns
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* ── #401 — SECTION SPACING RULE: 0.35cm (≈13px) above first + below last element ── */
section.hero.wall-dark {
padding-bottom: 13px !important;
}
.red-testi {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
#six {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
#mastermind.lineup {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
.who {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
.impr {
padding-bottom: 13px !important;
}
.faq {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
#apply {
padding-top: 13px !important;
padding-bottom: 13px !important;
}
/* ── #402 — "SEE ALL" BUTTONS: left-aligned ── */
.rt-more-btn,
.spk-load-more-btn {
align-self: flex-start !important;
margin-left: 0 !important;
margin-right: auto !important;
padding-left: 0 !important;
}
/* Ensure the parent containers allow left-align */
.rt-right,
.car-wrap ~ .spk-load-more-btn {
display: flex !important;
justify-content: flex-start !important;
}
/* Mastermind "More" button: centered (id-specificity beats the #402
left-push above AND the later .spk-load-more-btn{display:none} rules). */
#mastermind.lineup .spk-load-more-btn {
display: flex !important;
justify-content: center !important;
text-align: center !important;
align-self: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ── #403 — SIX CARD MODAL (pm panel): video compact at top, text full-width below ── */
.pm-panel {
max-height: 94vh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.pm-bar {
flex-shrink: 0 !important;
}
.pm-top {
padding: 14px 16px !important;
flex: 1 !important;
overflow-y: auto !important;
}
/* Video: landscape 16:9 at top, full width, not 9:16 portrait */
.pm-right-col {
float: none !important;
width: 100% !important;
margin: 0 0 14px 0 !important;
}
.pm-vid-wrap {
aspect-ratio: 16 / 9 !important;
max-height: 42vw !important;
}
/* pm-imgs: 3 col, shorter rows */
.pm-imgs {
grid-template-rows: repeat(2, 60px) !important;
margin-top: 10px !important;
padding-top: 10px !important;
}
/* ── #404 — WHO CARDS: flat, no box in any state ── */
.wc,
.who .wc,
.who-grid .wc {
background: transparent !important;
border: none !important;
border-bottom: 0.5px solid rgba(200, 185, 150, 0.08) !important;
border-radius: 0 !important;
padding: 12px 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
.who-grid .wc:last-child {
border-bottom: none !important;
}
/* WHO grid: no gap, tight */
.who-grid {
gap: 0 !important;
padding: 0 !important;
}
/* ── #405 — IMPRESSIONS: film strip on top, numbers below ── */
/* Override §73 which hid .impr-right */
.impr {
display: flex !important;
flex-direction: column !important;
padding-top: 0 !important;
}
.impr-right {
display: block !important;
order: 1 !important;
height: 190px !important;
width: 100% !important;
flex-shrink: 0 !important;
position: relative !important;
overflow: hidden !important;
background: var(--esp) !important;
}
.impr-scroll {
height: 100% !important;
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
scrollbar-width: none !important;
}
.impr-scroll::-webkit-scrollbar { display: none !important; }
/* Film border overlays still work */
.film-l, .film-r {
display: block !important;
z-index: 2 !important;
}
.impr-left {
order: 2 !important;
width: 100% !important;
flex: none !important;
padding: 16px 20px 6px !important;
}
/* Stats in a horizontal 2×2 grid — numbers feel bold and quick to scan */
.impr-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px 16px !important;
margin-top: 14px !important;
flex-direction: unset !important;
}
.is-row {
display: flex !important;
flex-direction: column !important;
gap: 1px !important;
}
.is-n-key {
font-size: clamp(28px, 7.5vw, 36px) !important;
}
.is-n {
font-size: clamp(22px, 6vw, 30px) !important;
line-height: 1 !important;
}
.is-l {
font-size: 10px !important;
letter-spacing: 0.08em !important;
opacity: 0.58 !important;
}
/* ── #406 — WHATSAPP BUTTON: redesigned pill ── */
.app-wa {
margin-top: 20px !important;
}
.wa-link {
display: inline-flex !important;
align-items: center !important;
gap: 9px !important;
background: #1DA851 !important;
color: #fff !important;
padding: 11px 20px 11px 14px !important;
border-radius: 999px !important;
font-family: var(--s) !important;
font-size: 12px !important;
letter-spacing: 0.08em !important;
font-weight: 500 !important;
text-decoration: none !important;
border: none !important;
box-shadow: 0 4px 18px rgba(29, 168, 81, 0.35), 0 0 0 1px rgba(255,255,255,0.06) !important;
transition: transform 0.2s, box-shadow 0.2s !important;
}
.wa-link:active {
transform: scale(0.97) !important;
}
.wa-link svg {
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
fill: #fff !important;
}
/* ── #407 — APPLY FORM: brighter labels + better spacing ── */
/* Override base label opacity (.42) to .72 for readability */
#apply .ff label,
.app-form .ff label {
color: rgba(255, 255, 255, 0.72) !important;
font-size: 11px !important;
letter-spacing: 0.16em !important;
}
#apply .app-form input,
#apply .app-form textarea {
font-size: 15px !important;
padding-top: 24px !important;
padding-bottom: 8px !important;
color: rgba(255, 255, 255, 0.95) !important;
border-bottom-color: rgba(255, 255, 255, 0.22) !important;
}
/* Taller textarea so long questions are comfortable to read while filling */
#apply .app-form textarea {
height: 72px !important;
line-height: 1.6 !important;
}
#apply .app-form {
padding: 24px 20px !important;
background: rgba(255, 255, 255, 0.03) !important;
border-radius: 12px !important;
border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}
/* Focused fields: gold tint */
#apply .app-form input:focus,
#apply .app-form textarea:focus {
border-bottom-color: rgba(200, 160, 80, 0.55) !important;
}
#apply .app-form .ff label {
top: 20px !important;
}
/* ── #408 — MASTERMIND load-more button (mobile pagination) ── */
.spk-load-more-btn {
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 8px 0 !important;
padding: 11px 0 !important;
background: transparent !important;
border: 0.5px solid rgba(200, 185, 150, 0.25) !important;
border-radius: 8px !important;
color: rgba(220, 200, 155, 0.75) !important;
font-family: var(--s) !important;
font-size: 11px !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: border-color 0.2s, color 0.2s !important;
}
.spk-load-more-btn:active {
border-color: rgba(200, 185, 150, 0.55) !important;
color: rgba(245, 225, 175, 0.95) !important;
}
/* ── #409 — FAQ questions: remove any residual box look ── */
.fi {
background: transparent !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border: none !important;
border-bottom: 0.5px solid rgba(200, 185, 150, 0.1) !important;
}
.fi:last-child {
border-bottom: none !important;
}
.fq {
width: 100% !important;
background: transparent !important;
border: none !important;
color: rgba(242, 237, 229, 0.82) !important;
font-family: var(--s) !important;
font-size: 13px !important;
text-align: left !important;
padding: 14px 0 !important;
letter-spacing: 0.01em !important;
cursor: pointer !important;
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
line-height: 1.4 !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§76 SECTIONS FLUSH · IMPRESSIONS ABOVE · WHO BOXES · SIX SUB · TOGGLES
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* ── #410 — SECTIONS TOUCHING: zero section padding, seam provides separation ── */
section.hero.wall-dark,
.red-testi,
#six,
#mastermind.lineup,
.who,
.impr,
.faq,
#apply {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Strip last-child internal margins so sections end at content */
.red-testi > *:last-child,
#six > *:last-child,
#mastermind.lineup > *:last-child,
.who > *:last-child,
.faq > *:last-child {
margin-bottom: 0 !important;
}
/* Internal section containers: kill bottom padding so sections are flush */
.six-outer { padding-bottom: 0 !important; }
.who-split { padding-bottom: 0 !important; }
.who-left { padding-bottom: 8px !important; }
.who-right { padding-bottom: 8px !important; }
.faq-list { padding-bottom: 0 !important; }
.app-inner { padding-bottom: 16px !important; }
/* Top gaps: small breathing room for section starts */
.six-lc { padding-top: 16px !important; }
#mastermind.lineup .wrap { padding-bottom: 10px !important; }
.who-left { padding-top: 16px !important; }
.faq .sh { padding-top: 16px !important; }
/* Hero: keep natural top padding (nav clearance) but trim bottom */
.hero-wrap { padding-bottom: 0 !important; }
.hero-portal-wrap { margin-bottom: 0 !important; }
/* ── #411 — rt-stats LEFT-ALIGNED (linksbündig) ── */
.rt-stats {
justify-content: flex-start !important;
align-items: flex-start !important;
text-align: left !important;
flex-wrap: wrap !important;
gap: 8px 20px !important;
}
.rs {
text-align: left !important;
flex: 0 0 auto !important;
}
.rs .n, .rs .l {
text-align: left !important;
}
/* ── #412 — SIX SECTION: labels vertically stacked, sub in one line ── */
.six-lc {
border-right: none !important;
padding: 16px 20px 12px !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 4px !important;
}
.six-lc h2 {
margin: 0 !important;
}
.six-lc .rule {
margin: 4px 0 !important;
}
.six-lc .sub {
max-width: none !important;
white-space: nowrap !important;
font-size: 10px !important;
margin-top: 2px !important;
line-height: 1.4 !important;
}
.six-rc {
padding-top: 0 !important;
}
/* ── #413 — WHO BOXES: equal margins, nicer card look ── */
.who-grid {
padding: 0 16px 12px !important;
gap: 6px !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
grid-template-columns: unset !important;
}
.wc {
background: rgba(200, 185, 150, 0.04) !important;
border: 0.5px solid rgba(200, 185, 150, 0.14) !important;
border-radius: 8px !important;
padding: 13px 16px !important;
margin: 0 !important;
box-shadow: 0 1px 12px rgba(0,0,0,0.12) !important;
width: 100% !important;
box-sizing: border-box !important;
}
.wc .wl {
font-size: 10px !important;
letter-spacing: 0.22em !important;
margin-bottom: 5px !important;
}
.wc .wd {
font-size: 12.5px !important;
line-height: 1.68 !important;
color: rgba(242, 237, 229, 0.72) !important;
}
/* ── #414 — IMPRESSIONS: heading+stats ABOVE photos (fix §75 order) ── */
.impr-right {
order: 2 !important;
}
.impr-left {
order: 1 !important;
padding: 16px 20px 12px !important;
}
/* Stats in ONE horizontal row */
.impr-stats {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
gap: 0 !important;
margin-top: 10px !important;
grid-template-columns: unset !important;
}
.is-row {
flex: 1 !important;
flex-direction: column !important;
gap: 1px !important;
align-items: flex-start !important;
min-width: 0 !important;
}
/* ── #415 — MASTERMIND: "Past Speakers" label styling ── */
.lm-past-lbl {
display: block !important;
margin-top: 4px !important;
color: rgba(220, 200, 155, 0.55) !important;
font-size: 9px !important;
letter-spacing: 0.22em !important;
}
/* Dots: hide on mobile (we use pagination) */
.car-dots {
display: none !important;
}
/* ── #416 — FAQ: smaller gap before list, chevron-down toggle ── */
.faq .sh {
margin-bottom: 6px !important;
padding-bottom: 0 !important;
}
/* Replace + icon with chevron down V */
.fi-ic {
width: 10px !important;
height: 10px !important;
flex-shrink: 0 !important;
position: relative !important;
}
.fi-ic::before {
content: '' !important;
position: absolute !important;
width: 6px !important;
height: 1px !important;
background: currentColor !important;
top: 50% !important;
left: 0 !important;
transform: translateY(-2px) rotate(40deg) !important;
transform-origin: left center !important;
border-radius: 1px !important;
}
.fi-ic::after {
content: '' !important;
position: absolute !important;
width: 6px !important;
height: 1px !important;
background: currentColor !important;
top: 50% !important;
right: 0 !important;
left: auto !important;
transform: translateY(-2px) rotate(-40deg) !important;
transform-origin: right center !important;
border-radius: 1px !important;
}
/* When open: rotate whole icon to show ^ */
.fi.open .fi-ic {
transform: rotate(180deg) !important;
}
.fi.open .fi-ic::after {
opacity: 1 !important;
}
/* ── #417 — WHATSAPP: white text, circle icon ── */
.wa-link {
gap: 10px !important;
}
.wa-text {
color: #fff !important;
font-weight: 500 !important;
}
.wa-circle {
flex-shrink: 0 !important;
width: 22px !important;
height: 22px !important;
}
}
/* ══════════════════════════════════════════════════════════════════
§77 BATCH 4 — hero/testi/six-panel/impr/wa/mastermind
Items: #418–#430
══════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* ── #418 — HERO: center-align text + remove 100svh min-height ── */
.hero {
min-height: 0 !important;
}
.hero-text {
align-items: center !important;
text-align: center !important;
}
.h1 {
text-align: center !important;
}
.hero-deck {
text-align: center !important;
max-width: 100% !important;
}
.hero-ctas {
justify-content: center !important;
}
.hero-line {
align-self: center !important;
}
/* ── #419 — TESTI-MODAL: 2-col portrait grid on mobile ── */
.rt-more-btn {
margin-top: -4px !important;
}
.tm-scroll {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
overflow-x: hidden !important;
overflow-y: visible !important;
scroll-snap-type: none !important;
padding: 0 14px 28px !important;
gap: 10px !important;
flex-wrap: unset !important;
}
.tm-scroll-wrap::after {
display: none !important;
}
.tm-card {
width: 100% !important;
flex: none !important;
aspect-ratio: 9 / 16 !important;
scroll-snap-align: none !important;
border-radius: 10px !important;
}
.tm-card.tm-ph {
background: rgba(255, 255, 255, 0.04) !important;
border: 0.5px solid rgba(255, 255, 255, 0.08) !important;
}
/* ── #420 — SIX lc: sub text at Y-mid of h2 block, slightly bigger ── */
.six-lc {
display: grid !important;
grid-template-columns: max-content 1fr !important;
grid-template-rows: auto 1fr auto !important;
column-gap: 16px !important;
row-gap: 0 !important;
align-items: start !important;
border-right: none !important;
padding: 14px 16px 8px !important;
}
.six-lc > .ey {
grid-column: 1 !important;
grid-row: 1 !important;
}
.six-lc > h2 {
grid-column: 1 !important;
grid-row: 2 !important;
align-self: center !important;
}
.six-lc > .rule {
grid-column: 1 !important;
grid-row: 3 !important;
}
.six-lc > .sub,
.six-lc > p.sub {
grid-column: 2 !important;
grid-row: 1 / 4 !important;
align-self: center !important;
font-size: 12px !important;
line-height: 1.55 !important;
max-width: none !important;
white-space: normal !important;
padding-top: 0 !important;
color: rgba(200, 185, 150, 0.62) !important;
}
/* ── #421 — SIX: scroll track + drag hint visible + card tap hint ── */
.six-scroll-track {
margin: 4px 16px 0 !important;
height: 1.5px !important;
background: rgba(200, 185, 140, 0.12) !important;
border-radius: 2px !important;
overflow: hidden !important;
position: relative !important;
}
.six-scroll-thumb {
position: absolute !important;
left: 0 !important;
top: 0 !important;
height: 100% !important;
width: 30% !important;
background: linear-gradient(90deg, rgba(210, 185, 110, 0.5), rgba(240, 215, 140, 0.85)) !important;
border-radius: 2px !important;
transition: transform 0.08s linear !important;
}
/* Tap-to-open badge on six cards */
.six-card::after {
content: 'open' !important;
position: absolute !important;
bottom: 10px !important;
right: 10px !important;
font-family: var(--s) !important;
font-size: 7.5px !important;
letter-spacing: 0.24em !important;
text-transform: uppercase !important;
color: rgba(240, 230, 200, 0.45) !important;
background: rgba(0, 0, 0, 0.38) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
padding: 3px 7px !important;
border-radius: 3px !important;
pointer-events: none !important;
border: 0.5px solid rgba(255, 255, 255, 0.1) !important;
}
/* ── #422 — SIX PM PANEL: video 16:9 full-width top, title|desc side-by-side ── */
.pm-top {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-areas:
"video video"
"info body"
"imgs imgs" !important;
gap: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
.pm-right-col {
grid-area: video !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
align-self: stretch !important;
}
.pm-left {
width: 100% !important;
background: none !important;
border-radius: 0 !important;
}
.pm-vid-wrap {
aspect-ratio: 16 / 9 !important;
max-height: none !important;
border-radius: 0 !important;
}
.pm-info {
grid-area: info !important;
padding: 12px 8px 8px 14px !important;
gap: 5px !important;
margin-bottom: 0 !important;
align-self: start !important;
border-right: 0.5px solid rgba(200, 185, 140, 0.1) !important;
}
.pm-b {
grid-area: body !important;
padding: 12px 14px 8px 10px !important;
align-self: start !important;
font-size: 11px !important;
line-height: 1.56 !important;
margin: 0 !important;
}
.pm-imgs {
grid-area: imgs !important;
margin: 8px 14px 14px !important;
}
/* ── #423 — SIX PM ARROWS: move to bottom corners to avoid text overlap ── */
.pm-arr {
position: fixed !important;
top: auto !important;
bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
transform: none !important;
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: rgba(18, 14, 8, 0.78) !important;
border: 0.5px solid rgba(200, 185, 140, 0.28) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
z-index: 1200 !important;
}
.pm-arr-l {
left: 14px !important;
right: auto !important;
}
.pm-arr-r {
right: 14px !important;
left: auto !important;
}
/* ── #424 — IMPRESSIONS STATS: full x-axis, grid across phone width ── */
.impr-left {
padding: 14px 0 10px !important;
}
.impr-left h2 {
padding-left: 16px !important;
padding-right: 16px !important;
margin-bottom: 8px !important;
}
.impr-stats {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
width: 100% !important;
gap: 0 !important;
margin-top: 8px !important;
border-top: 0.5px solid rgba(200, 185, 150, 0.1) !important;
border-bottom: 0.5px solid rgba(200, 185, 150, 0.1) !important;
}
.is-row {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 10px 2px !important;
gap: 2px !important;
border-right: 0.5px solid rgba(200, 185, 150, 0.08) !important;
min-width: 0 !important;
}
.is-row:last-child {
border-right: none !important;
}
/* ── #425 — IMPRESSIONS: scroll progress bar below photos ── */
.impr-right {
padding-bottom: 20px !important;
}
.impr-scroll-bar {
position: absolute !important;
bottom: 7px !important;
left: 16px !important;
right: 16px !important;
height: 2px !important;
background: rgba(200, 185, 140, 0.12) !important;
border-radius: 2px !important;
overflow: hidden !important;
}
.impr-scroll-thumb {
position: absolute !important;
left: 0 !important;
top: 0 !important;
height: 100% !important;
width: 30% !important;
background: linear-gradient(90deg, rgba(210, 185, 110, 0.5), rgba(240, 215, 140, 0.85)) !important;
border-radius: 2px !important;
transition: transform 0.08s linear !important;
}
/* ── #426 — WHATSAPP: all-white icon + text, no pill background ── */
.wa-link {
color: rgba(255, 255, 255, 0.88) !important;
background: none !important;
border: none !important;
padding: 0 !important;
gap: 9px !important;
}
.wa-text {
color: rgba(255, 255, 255, 0.88) !important;
letter-spacing: 0.2em !important;
font-size: 9px !important;
}
.wa-circle {
width: 24px !important;
height: 24px !important;
opacity: 1 !important;
}
/* ── #427 — MASTERMIND: hide See all button ── */
.spk-load-more-btn {
display: none !important;
}
/* ════════════════════════════════════════════════════════════════
§78 BATCH 5 — 9 FIXES (#428–436)
════════════════════════════════════════════════════════════════ */
/* ── #428 — SPEAKER MODAL: touch-scroll fix ── */
.pm-panel {
overscroll-behavior: contain !important;
overflow-y: auto !important;
touch-action: pan-y !important;
}
.pm-bg {
touch-action: none !important;
}
/* ── #429 — TESTIMONIAL VIDEO CARDS: same size as speaker cards, one horizontal row ── */
/* Match .cc speaker card width; single scrolling line (display:contents already flattens .vc-row) */
.vc-area {
gap: 9px !important;
padding-bottom: 6px !important;
align-items: stretch !important;
}
.vc-area .vc,
.vc-area .vc-lead,
.vc-area .vc.vc-ph {
flex: 0 0 clamp(240px, 60vw, 280px) !important;
width: clamp(240px, 60vw, 280px) !important;
height: auto !important;
max-height: none !important;
aspect-ratio: 3 / 4 !important;
}
.vc-lead {
max-height: none !important;
}
/* ── #430 — MASTERMIND: remove reddish right-border gradient ── */
#mastermind .car-wrap::after {
display: none !important;
}
/* ── #431 — SHARP EDGES: hero portal + testimonial cards + mastermind vc cards ── */
.hero-portal {
border-radius: 0 !important;
}
.vc-area .vc,
.vc-area .vc-lead {
border-radius: 0 !important;
}
.tm-card {
border-radius: 0 !important;
}
/* ── #432 — SIX SUB TEXT: brighter ── */
.six-lc > .sub,
.six-lc > p.sub {
color: rgba(235, 220, 190, 0.9) !important;
}
/* ── #433 — RT-STATS / RED-TESTI: fix section padding + grid layout ── */
/* Restore padding zeroed by #410; must come after §76 to win same-specificity race */
.red-testi {
padding-top: 20px !important;
padding-bottom: 20px !important;
}
/* Use same selector specificity as #287 (.red-testi > .rt-stats) so this wins */
.red-testi > .rt-stats {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 0 !important;
justify-content: unset !important;
flex-wrap: unset !important;
align-items: unset !important;
width: 100% !important;
}
.red-testi > .rt-stats .rs {
flex: unset !important;
text-align: left !important;
padding: 12px 10px !important;
}
/* ── #434 — NAV: hamburger in right corner, hide Apply CTA on mobile ── */
.nav-cta {
display: none !important;
}
.nav-hamburger {
margin-left: auto !important;
display: flex !important;
}
/* ════════════════════════════════════════════════════════════════
§79 BATCH 6 — 10 FIXES (#435–444)
════════════════════════════════════════════════════════════════ */
/* ── #435 — SCROLL THUMBS: brighter gold with glow ── */
.six-scroll-thumb,
.impr-scroll-thumb {
background: linear-gradient(90deg,
oklch(0.82 0.18 80 / 0.72),
oklch(0.92 0.22 78 / 0.96)) !important;
box-shadow: 0 0 6px rgba(255, 210, 60, 0.45), 0 0 14px rgba(255, 190, 20, 0.22) !important;
}
/* ── #436 — PM PANEL: restore float layout — video right side, text beside ── */
/* Override §78 #422 grid. Restores the base float-right approach with mobile sizing. */
.pm-top {
display: block !important;
grid-template-columns: unset !important;
grid-template-areas: unset !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
}
.pm-right-col {
float: right !important;
width: 36vw !important;
max-width: 148px !important;
margin-left: 12px !important;
margin-bottom: 8px !important;
grid-area: unset !important;
}
.pm-vid-wrap {
aspect-ratio: 9 / 16 !important;
max-height: none !important;
border-radius: 6px !important;
width: 100% !important;
}
/* Word "Square" wrap: text MUST stay normal-flow (overflow:visible) so it
wraps beside the floated video on overlapping lines, then reclaims FULL
width below the video's bottom edge. overflow:hidden = BFC = rigid narrow
column for the whole height (the bug). Do NOT set overflow:hidden here. */
.pm-info {
grid-area: unset !important;
float: none !important;
overflow: visible !important;
}
.pm-b {
grid-area: unset !important;
overflow: visible !important;
}
.pm-imgs {
grid-area: unset !important;
clear: both !important;
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: unset !important;
margin: 8px 0 0 !important;
}
/* ── #437 — PM-IMGS: 2 bigger columns ── */
.pm-imgs {
grid-template-columns: repeat(2, 1fr) !important;
grid-template-rows: unset !important;
min-height: 0 !important;
}
.pm-img {
aspect-ratio: 4 / 3 !important;
height: auto !important;
}
/* ── #438 — RT-STATS: show in red section, horizontal 4-col strip ── */
/* Un-hide — user wants these stats visible in the red testimonial section */
.red-testi > .rt-stats,
.rt-stats {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
width: 100% !important;
padding: 10px 0 !important;
border-top: 0.5px solid rgba(255, 255, 255, 0.08) !important;
border-bottom: none !important;
}
.red-testi > .rt-stats .rs,
.rt-stats .rs {
flex: unset !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 10px 4px !important;
border-right: 0.5px solid rgba(255, 255, 255, 0.06) !important;
}
.red-testi > .rt-stats .rs:last-child,
.rt-stats .rs:last-child {
border-right: none !important;
}
.rt-stats .n {
font-size: clamp(20px, 5.5vw, 28px) !important;
line-height: 1 !important;
}
.rt-stats .l {
font-size: 7px !important;
letter-spacing: 0.06em !important;
line-height: 1.4 !important;
color: rgba(255, 255, 255, 0.42) !important;
margin-top: 3px !important;
}
/* ── #439 — NAV OVERLAY BUTTONS: glass-minimal, more see-through ── */
/* pm-arr: centered at bottom instead of corners */
.pm-arr {
position: fixed !important;
bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
transform: none !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: rgba(6, 4, 2, 0.28) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border: 0.5px solid rgba(220, 195, 140, 0.18) !important;
color: rgba(235, 215, 165, 0.7) !important;
font-size: 18px !important;
z-index: 1200 !important;
box-shadow: none !important;
}
.pm-arr-l { left: calc(50vw - 44px) !important; right: auto !important; }
.pm-arr-r { right: auto !important; left: calc(50vw + 4px) !important; }
/* pm-x close button: glass pill */
.pm-x {
width: 36px !important;
height: 36px !important;
background: rgba(6, 4, 2, 0.28) !important;
backdrop-filter: blur(14px) !important;
-webkit-backdrop-filter: blur(14px) !important;
border: 0.5px solid rgba(220, 195, 140, 0.15) !important;
color: rgba(220, 200, 155, 0.55) !important;
font-size: 16px !important;
}
/* vbox-x: lighter glass */
.vbox-x {
background: rgba(0, 0, 0, 0.28) !important;
border-color: rgba(255, 255, 255, 0.1) !important;
color: rgba(245, 241, 233, 0.6) !important;
}
/* car-nav-btn: lighter on mobile */
.car-nav-btn {
background: rgba(8, 6, 4, 0.42) !important;
border-color: rgba(200, 175, 110, 0.18) !important;
color: rgba(220, 200, 155, 0.6) !important;
box-shadow: none !important;
}
/* ── #440 — MASTERMIND + IMPRESSIONS: touch-action fix for vertical page scroll ── */
.car {
touch-action: pan-x pan-y !important;
}
.impr-scroll {
touch-action: pan-x pan-y !important;
}
/* ── #441 — FAQ: styled like WHO section cards ── */
.faq {
padding: 0 !important;
border-top: none !important;
}
.faq .sh {
padding: 14px 16px 0 !important;
text-align: left !important;
}
.faq-list {
padding: 8px 0 !important;
max-width: none !important;
margin: 0 !important;
}
.fi {
border-bottom: none !important;
border-top: 0.5px solid rgba(200, 185, 150, 0.08) !important;
}
.fq {
padding: 14px 16px !important;
font-size: 9px !important;
letter-spacing: 0.28em !important;
text-transform: uppercase !important;
color: rgba(200, 180, 130, 0.72) !important;
font-family: var(--s) !important;
font-weight: 500 !important;
gap: 8px !important;
}
.fa p {
padding: 0 16px 14px !important;
font-size: 11px !important;
color: rgba(210, 195, 165, 0.6) !important;
line-height: 1.7 !important;
}
/* ── #442 — IMPR-STATS: spread full x-axis ── */
.impr-left {
padding-left: 0 !important;
padding-right: 0 !important;
}
.impr-stats {
width: 100% !important;
padding: 0 !important;
border-left: none !important;
border-right: none !important;
}
.is-row {
padding: 10px 4px !important;
justify-content: center !important;
}
/* ── #443 — FOOTER: clean centered mobile redesign ── */
footer {
padding: 28px 20px max(20px, env(safe-area-inset-bottom, 20px)) !important;
align-items: center !important;
gap: 0 !important;
text-align: center !important;
border-top: 0.5px solid rgba(255, 255, 255, 0.07) !important;
}
.f-row {
flex-direction: column !important;
align-items: center !important;
gap: 14px !important;
width: 100% !important;
padding-bottom: 18px !important;
border-bottom: 0.5px solid rgba(255, 255, 255, 0.06) !important;
margin-bottom: 14px !important;
}
.f-logo {
font-family: var(--s) !important;
font-size: 9px !important;
letter-spacing: 0.44em !important;
text-transform: uppercase !important;
color: rgba(255, 235, 228, 0.55) !important;
}
.f-links {
display: flex !important;
gap: 24px !important;
justify-content: center !important;
align-items: center !important;
}
.f-links a,
.f-founder {
font-family: var(--s) !important;
font-size: 9px !important;
letter-spacing: 0.26em !important;
text-transform: uppercase !important;
color: rgba(255, 235, 228, 0.5) !important;
}
.f-legal {
justify-content: center !important;
flex-wrap: wrap !important;
gap: 12px !important;
font-size: 8px !important;
}
.f-legal a,
.f-copy {
font-size: 8px !important;
color: rgba(255, 235, 228, 0.28) !important;
letter-spacing: 0.12em !important;
}
/* ════════════════════════════════════════════════════════════════
§80 BATCH 7 — 3 FIXES (#445–447)
════════════════════════════════════════════════════════════════ */
/* ── #445 — VC-PLAY: smaller, corner-pinned so it doesn't cover faces ── */
.vc-play {
width: 16px !important;
height: 16px !important;
top: auto !important;
left: auto !important;
bottom: 10px !important;
right: 10px !important;
transform: none !important;
background: rgba(255, 255, 255, 0.1) !important;
}
.vc:hover .vc-play {
transform: scale(1.1) !important;
}
.vc-play::after {
border-width: 3px 0 3px 5px !important;
margin-left: 1px !important;
}
/* ── #446 — TESTIMONIAL CARDS: exact same width as mastermind speaker cards (.cc) ── */
.vc-area .vc,
.vc-area .vc-lead,
.vc-area .vc.vc-ph {
flex: 0 0 clamp(272px, 32vw, 406px) !important;
width: clamp(272px, 32vw, 406px) !important;
}
/* ════════════════════════════════════════════════════════════════
§81 BATCH 8 — 1 FIX (#448)
════════════════════════════════════════════════════════════════ */
/* ── #448 — TESTIMONIAL CARDS: aspect-ratio 16/9 to match .cc-frame (mastermind) ── */
/* §78 #429 set 3/4 portrait — override to landscape 16/9, identical to .cc-frame */
.vc-area .vc,
.vc-area .vc-lead,
.vc-area .vc.vc-ph {
aspect-ratio: 16 / 9 !important;
max-height: none !important;
height: auto !important;
}
/* ════════════════════════════════════════════════════════════════
§82 BATCH 9 — 11 FIXES (#449–459)
════════════════════════════════════════════════════════════════ */
/* ── #449 — TESTI-MODAL "See all": cards 16:9 landscape (override #419's 9:16) ── */
.tm-card {
aspect-ratio: 16 / 9 !important;
}
/* ── #450 — SIX grid: allow vertical page scroll while swiping cards ── */
.six-grid {
touch-action: pan-x pan-y !important;
}
/* ── #451 — SIX card headline: bigger on mobile ── */
.six-h {
font-size: clamp(20px, 5.2vw, 26px) !important;
line-height: 1.02 !important;
}
/* ── #452 — PM panel X button: lower down ── */
.pm-bar {
padding-top: 24px !important;
}
/* ── #453 — Mastermind carousel: momentum scroll so last cards reachable ── */
.car .cc {
scroll-snap-stop: normal !important;
}
#mastermind .car-track {
padding-right: 60px !important;
}
/* ── #454 — Mastermind: remove "See all" button (redundant on mobile) ── */
.spk-load-more-btn {
display: none !important;
}
/* ── #455 — Incredible Connections stats: spread full x-axis ── */
.impr-stats {
flex-direction: row !important;
justify-content: space-between !important;
max-width: 100% !important;
width: 100% !important;
gap: 0 !important;
align-items: flex-start !important;
}
.impr-stats .is-row {
flex-direction: column !important;
align-items: center !important;
gap: 2px !important;
}
.impr-stats .is-n {
font-size: clamp(18px, 4.8vw, 26px) !important;
min-width: unset !important;
}
.impr-stats .is-l {
text-align: center !important;
font-size: 7.5px !important;
max-width: 60px !important;
word-break: break-word !important;
}
/* ── #456 — "Content that converts" numbered headers (1: 2: 3:): gold-d (matches "Create" label) ── */
.pm-b p > strong {
color: var(--gold-d) !important;
}
/* ── #457 — Nav: show "For Members" button in nav bar on mobile ── */
.nav-members {
display: inline-flex !important;
align-items: center !important;
margin-left: auto !important;
margin-right: 6px !important;
font-size: 8px !important;
padding: 5px 10px !important;
letter-spacing: .18em !important;
}
.nav-hamburger {
margin-left: 0 !important;
}
/* ── #458 — DEAD 2026-06-01: .rt-stats HTML removed, replaced by .rt-stats-m ── */
/* ── #459 — PM panel vbox: allow vertical scroll when touching video area ── */
.pm-vid-wrap {
touch-action: pan-y !important;
}
.pm-top {
overscroll-behavior-y: contain !important;
}
/* ═══════════════════════════════════════ §83 Batch 10 — 6 (#460-465) ══ */
/* ── #460 — Mastermind: full-width one-card-at-a-time carousel on mobile ── */
#mastermind .car {
margin-left: 0 !important;
padding: 0 16px !important;
scroll-snap-type: x mandatory !important;
}
#mastermind .car-track {
padding-left: 0 !important;
padding-right: 0 !important;
gap: 10px !important;
}
#mastermind .cc {
width: calc(100vw - 32px) !important;
scroll-snap-align: start !important;
}
#mastermind .car-wrap::after {
display: none !important;
}
/* ── #461 — DEAD 2026-06-01: .rt-stats HTML removed ── */
/* ── #462 — vbox-nav arrows: optical centering for ‹ › character ── */
.vbox-nav span {
display: block !important;
line-height: 1 !important;
transform: translateY(-1px) !important;
}
/* ── #463 — vbox-nav: shift below video area on mobile ── */
.vbox-nav {
top: calc(50% + 60px) !important;
transform: translateY(-50%) !important;
}
.vbox-chapters {
padding-top: 8px !important;
margin-top: 16px !important;
}
/* ── #464 — Mastermind section: tighter bottom spacing after "See all" removal ── */
#mastermind {
padding-bottom: clamp(20px, 4vw, 36px) !important;
}
/* ── #465 — Remove lm-more-btn space (belt+suspenders if button re-added) ── */
.spk-load-more-btn-wrap {
display: none !important;
}
/* ── #466 — Member modal: hide door seam line ── */
.mem-seam {
display: none !important;
}
/* ── #467 — Nav hamburger: push tight to right corner ── */
.nav {
padding-right: 8px !important;
}
/* ── #468 — rt-stats-m: mobile-only stats strip inside red-testi section ── */
.rt-stats-m {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 0 !important;
width: 100% !important;
padding: 20px 16px 24px !important;
background: var(--red-deep, #6e0616) !important;
border-top: .5px solid rgba(255,255,255,.12) !important;
}
.rs-m {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
padding: 0 4px !important;
}
.n-m {
font-family: var(--d) !important;
font-size: clamp(22px, 6vw, 32px) !important;
color: #fff !important;
line-height: 1 !important;
margin-bottom: 6px !important;
}
.l-m {
font-size: 8px !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.65) !important;
line-height: 1.35 !important;
}
/* ── #469 — Mastermind: 2 cards per view on mobile ── */
#mastermind .car {
padding: 0 8px !important;
}
#mastermind .car-track {
gap: 8px !important;
}
#mastermind .cc {
width: calc(50vw - 12px) !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
}
/* ── #470 — pm-x: fixed overlay, always tappable even when panel scrolled
(safe-area on top/right so notch + Dynamic Island don't cover it, iPhone 14+) ── */
.pm-x {
position: fixed !important;
top: max(14px, env(safe-area-inset-top, 14px)) !important;
right: max(14px, env(safe-area-inset-right, 14px)) !important;
z-index: 10010 !important;
width: 36px !important;
height: 36px !important;
font-size: 22px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
}
.pm-bar {
min-height: 0 !important;
padding: 0 !important;
}
/* ── #471 — pm panel: use full x-axis, video floats right with text alongside ── */
.pm-right-col {
float: right !important;
width: 42vw !important;
max-width: 164px !important;
margin-left: 12px !important;
margin-bottom: 8px !important;
}
.pm-vid-wrap {
aspect-ratio: 9/16 !important;
}
/* ── #472 — pm panel: dvh = adjusts to iOS URL bar; overlay visible below ── */
.pm-panel {
max-height: 86dvh !important;
}
.pm-top {
padding-bottom: max(40px, env(safe-area-inset-bottom, 0px)) !important;
}
/* ── #473 (rev) — WHO cards: clean label left, ONE "+" on the right ──
Earlier rev added a numeral ::before that read as a SECOND marker next
to the plus. Reverted: null the ::before, keep exactly one ::after "+"
pushed right via space-between, and restore tap-to-reveal accordion.
Last word wins — beats base 848-853 + #183/#252/#347/#362/#381. ── */
.who-grid {
counter-reset: none !important;
}
.wc {
counter-increment: none !important;
cursor: pointer !important;
position: relative !important;
padding: 15px 17px 16px !important;
}
.wc .wl {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
margin-bottom: 0 !important;
}
.wc .wl::before {
content: none !important; /* kill the stray numeral marker */
display: none !important;
}
.wc .wl::after {
content: '+' !important; /* the single clean plus, on the right */
display: inline-block !important;
font-family: var(--s) !important;
font-size: 14px !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
color: rgba(200, 184, 136, 0.45) !important;
-webkit-text-fill-color: rgba(200, 184, 136, 0.45) !important;
text-shadow: none !important;
transition: transform .35s var(--e, ease), color .25s !important;
flex-shrink: 0 !important;
}
.wc.open .wl::after {
transform: rotate(45deg) !important;
color: rgba(200, 184, 136, 0.85) !important;
-webkit-text-fill-color: rgba(200, 184, 136, 0.85) !important;
}
/* accordion restored — descriptions hidden until the card is tapped */
.wc .wd {
max-height: 0 !important;
opacity: 0 !important;
overflow: hidden !important;
padding-top: 0 !important;
}
.wc.open .wd {
max-height: 260px !important;
opacity: 1 !important;
overflow: visible !important;
padding-top: 10px !important;
}
/* ── #474 — MASTERMIND pagination: let the speaker grid flow so each
"More" reveal is directly visible. The grid sat inside .car capped at
68vh with inner overflow-y:auto, so the last batch landed below the
inner-scroll fold and looked like "nothing happened". Uncap on mobile;
mobileSpkPaginate() + scrollIntoView keep it compact + in-view. ── */
.lineup .car {
max-height: none !important;
overflow: visible !important;
}
/* ── #475 — FAQ "Before you apply" / "Questions": match WHO's single "+"
(same size + style). Kills the drawn two-bar cross, renders a text "+"
that rotates 45deg to "×" on open. ── */
.faq .fi-ic {
width: auto !important;
height: auto !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.faq .fi-ic::before {
display: none !important; /* horizontal bar of the drawn cross */
}
.faq .fi-ic::after {
content: '+' !important;
position: static !important;
width: auto !important;
height: auto !important;
background: none !important;
border-radius: 0 !important;
font-family: var(--s) !important;
font-size: 14px !important;
font-weight: 300 !important;
letter-spacing: 0 !important;
color: rgba(200, 184, 136, 0.45) !important;
-webkit-text-fill-color: rgba(200, 184, 136, 0.45) !important;
transform: none !important;
opacity: 1 !important;
transition: transform .35s var(--e, ease), color .25s !important;
}
.faq .fi.open .fi-ic::after {
transform: rotate(45deg) !important;
opacity: 1 !important;
color: rgba(200, 184, 136, 0.85) !important;
-webkit-text-fill-color: rgba(200, 184, 136, 0.85) !important;
}
/* ── #476 — "The right room" manifesto: both lines SAME colour (white),
slightly bigger, stacked full-width so "The right one changes who you
become." sits on ONE line. Overrides #283-286 (2-col row) + #346 (gold
em) + #398. The
inside was removed in the HTML. ── */
.rt-manifesto {
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
align-items: flex-start !important;
text-align: left !important;
}
.rt-m1 {
flex: 0 0 auto !important;
display: block !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-size: clamp(21px, 5.8vw, 27px) !important;
line-height: 1.12 !important;
}
.rt-manifesto > em {
flex: 0 0 auto !important;
display: block !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-style: italic !important;
font-size: clamp(16px, 4.7vw, 21px) !important;
line-height: 1.12 !important;
white-space: nowrap !important;
letter-spacing: -0.01em !important;
margin-top: 1px !important;
}
/* ── #477 — PM modal: ONLY the body text wraps around the floated video (#471).
Pictures stay a full-width grid BELOW, as before — reverted 2026-06-01
(user: "pictures as before, just text around the video on the right"). ── */
.pm-b { overflow: visible !important; }
.pm-imgs {
float: none !important;
clear: both !important;
width: 100% !important;
max-width: none !important;
margin: 10px 0 0 0 !important;
padding-top: 0 !important;
border-top: none !important; /* kill the gold gradient separator line */
border-image: none !important; /* (base .pm-imgs border-image) */
}
/* ── #478 — PM modal: strip the video FRAME, leave only a play button on the
right rail. Text still wraps around it (Word "Square"); tap → fullscreen
player (pmPlayToggle already calls vboxOpen). (user 2026-06-01:
"remove the video frame on the cards, just a play button right of the text") ── */
.pm-right-col {
float: right !important;
width: auto !important;
max-width: none !important;
margin: 4px 7vw 8px 16px !important; /* right margin pushes the button further left off the edge */
}
.pm-left {
width: auto !important;
background: none !important;
overflow: visible !important;
}
.pm-vid-wrap {
aspect-ratio: auto !important;
width: 46px !important;
height: 46px !important;
border: none !important;
box-shadow: none !important;
background: none !important;
border-radius: 50% !important;
overflow: visible !important;
}
#pm-vid { display: none !important; } /* hide the video frame entirely */
.pm-play {
width: 46px !important;
height: 46px !important;
left: 50% !important; /* center in its own 46px wrap; rail moved via margin-right */
background: rgba(204,18,48,.16) !important;
border: 1px solid rgba(200,160,80,.5) !important;
}
.pm-play::after { border-width: 7px 0 7px 12px !important; } /* triangle scaled to button */
.pm-play.playing { opacity: 1 !important; pointer-events: auto !important; } /* stay visible after tap */
/* ── #479 — Program-history (redesigned polaroid fan) shows on mobile again.
Supersedes #368, which display:none'd the OLD timeline/image to save space.
The new .wr-* design already uses mobile-aware clamp() floors (fan 150px,
panel min-height 300px), so the layout holds at narrow widths; the only
real fix is the caption CTA, which must NOT inherit #133's full-width.
NOTE: .who-hist-img / .who-tl mobile rules are now dead (DOM removed) but
inert (match nothing) — cleanup tracked in the mobile-builder prompt.
(user 2026-06-01: "we redesigned a section, do this as well" → mobile) ── */
.who-right {
display: block !important; /* un-hide (overrides #368) */
min-height: 320px !important; /* breathing room for fan + caption */
}
.who-right .wr-cap .ph-btn {
width: auto !important; /* override #133 full-width inside the overlay */
display: inline-flex !important;
margin-top: 12px !important;
}
/* ── #480 — Founder modal: iOS dvh safety. Base .fm-panel uses 88vh, which on
iOS Safari counts the URL bar → panel taller than the visible viewport → the
bottom of the scrollable .fm-text (incl. the new .fm-ig block) hides behind
the bar. dvh = visible height. Same fix as #472 for pm-panel. The laptop's
minmax(0,1fr) + min-height:0 scroll fix stays (base, not overridden). ── */
.fm-panel {
max-height: 88dvh !important;
}
/* ── #481 — Founder modal: ONE scroll container + smaller image. Base mobile
grid (auto / minmax(0,1fr)) pins the image row fixed and only scrolls .fm-text,
so you can't scroll the picture away. Make the whole panel the scroller:
display:block → image + text flow normally → panel itself scrolls past both.
Image height capped so it doesn't eat the first screen. ── */
.fm-panel {
display: block !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
}
.fm-img {
height: 46dvh !important;
min-height: 280px !important;
max-height: 420px !important;
}
.fm-text {
overflow: visible !important; /* panel scrolls, not the text box on its own */
min-height: 0 !important;
}
/* ── #482 — Video lightbox mobile polish (3 of the "5 good ones") ──────────── */
/* #2 — Portrait fit: 9:16 testimonials + dance video at width:100% overflow the
phone vertically. Size to the viewport HEIGHT instead so the whole clip fits. */
.vbox-inner {
width: auto !important;
max-width: 94vw !important;
}
.vbox-vid {
width: auto !important;
max-width: 94vw !important;
max-height: 82dvh !important;
margin: 0 auto !important;
}
/* #3 — Bigger, thumb-friendly close + nav targets, clear of the notch */
.vbox-x {
width: 44px !important;
height: 44px !important;
font-size: 22px !important;
top: max(12px, env(safe-area-inset-top)) !important;
right: max(12px, env(safe-area-inset-right)) !important;
}
.vbox-nav {
width: 50px !important;
height: 50px !important;
}
/* #4 — Tactile press feedback on the play button + SIX cards (touch has no hover) */
.pm-play:active {
transform: translate(-50%, -50%) scale(.9) !important;
}
.six-vid:active,
.six-grid .cc:active {
transform: scale(.985) !important;
transition: transform .1s ease !important;
}
/* ── #483 — B11: iOS zoom-on-focus guard (catch-all). The existing 16px rules
only target .app-form / #apply-form / .cc-form-input / .ff-input. The collab
form fields (#ccf-idea, #ccf-value, #ccf-days, #ccf-ig, #ccf-email) carry NO
class → they were < 16px → iOS auto-zoomed the page on focus. Any < 16px text
field triggers the zoom, so guarantee the floor for every text input/area/select.
Excludes range/checkbox/radio (font-size is irrelevant there). ── */
input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]),
textarea,
select {
font-size: 16px !important;
}
}
/* ════════════════════════════════════════════════════════════════
§80 LAUNCH MOBILE FIXES — 2026-06-02 (mobile.css-only)
Source: LAUNCH_PREP/AUDIT_MOBILE.md · Scope: builder/mobile.css ONLY
════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
/* P0-01 — iOS vh modal clipping: dvh with vh fallback */
.pm-panel { max-height: 92vh; max-height: 92dvh; }
.fm-panel { max-height: 88vh; max-height: 88dvh; }
/* P0-02 — img-fs lightbox dvh cap (beats inline 92vh) */
#img-fs img { max-height: 86dvh !important; }
/* P0-03 — g3 photoshoot modal: scrollable + dvh + contained */
.g3-modal .g3-panel {
max-height: 90dvh !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
}
/* P0-04 / P2-02 — history modal: 2-col grid + 44px close + safe-area top */
.hist-pages { grid-template-columns: repeat(2, 1fr) !important; }
.hm-x {
width: 44px !important;
height: 44px !important;
top: calc(8px + env(safe-area-inset-top)) !important;
}
/* P0-05 — testimonial modal: cards fit viewport, padded scroll */
.tm-scroll { padding: 0 clamp(16px, 4vw, 24px) !important; }
.tm-card { flex: 0 0 min(85vw, 300px) !important; }
/* P0-06 / P1-06 / P2-10 — iOS auto-zoom guard: input font >=16px
(universal floor already present ~line 5429; explicit belt-and-suspenders) */
.mem-pw,
.mem-inner-pw,
.ccf input,
.ccf textarea { font-size: 16px !important; }
/* P1-07 — founder modal close: 44px tap target */
.fm-x { width: 44px !important; height: 44px !important; }
/* P2-01 — img-fs close button: 44px tap target */
#img-fs > button[aria-label="Close image viewer"] {
width: 44px !important;
height: 44px !important;
}
/* P2-03 — speaker/person card arrows: 44px tap target */
.pm-arr { width: 44px !important; height: 44px !important; }
/* P2-06 — nav-overlay links: 44px tap height */
#nav-overlay .nav-links a { padding: 12px 4px !important; }
/* P2-07 — video lightbox: contain scroll, no background bleed */
.vbox.open { overscroll-behavior: contain !important; touch-action: none !important; }
/* P2-09 — who-right portrait crop: lower bias so faces aren't cut */
.who-right .wr-pi img { object-position: 50% 30% !important; }
/* P2-13 — disable hover-zoom on touch (history thumbnails) */
.hist-page:hover img { filter: brightness(.94) !important; transform: none !important; }
/* HEADLINE 4 — kill horizontal overflow at narrow widths (P1-09) */
body { overflow-x: hidden !important; }
.hero-strip { overflow: hidden !important; }
}
/* P2-14 — bm-row-3 collapses to single column on small phones */
@media (max-width: 480px) {
.bm-row-3 { grid-template-columns: 1fr !important; }
}
/* P2-08 — drop backdrop-filter when motion reduced (perf on low-end) */
@media (prefers-reduced-motion: reduce) {
.pm-bg, .vbox { backdrop-filter: none !important; }
}