/* ==========================================================================
OpenSummit.AI — LIGHT THEME OVERRIDE (16 Jun 2026)
Loads AFTER tokens.css + landing.css so it wins. Flips dark -> white while
KEEPING the brand colours (red/teal/gold) and gradients. Roll back by
removing the to this file in index.html.
========================================================================== */
:root {
/* Surfaces: deep navy -> white/paper */
--ink: #ffffff; /* primary surface */
--ink-2: #f7f8fa; /* elevated card base */
--ink-3: #eef0f4; /* raised panels / hover */
--ink-4: #e6e9ef; /* highest elevation */
--cream: #f4f6fa;
--cream-2: #eaedf3;
--cream-ink: #0a0a0a;
/* Text: light-on-dark -> dark-on-light */
--fog-0: #08090c; /* headings — near-black */
--fog-1: rgba(12,14,20,0.92); /* body */
--fog-2: rgba(12,14,20,0.60); /* muted */
--fog-3: rgba(12,14,20,0.42); /* supporting meta */
--fog-4: rgba(12,14,20,0.16); /* hairline emphasis */
/* Hairlines: white-alpha -> black-alpha */
--line: rgba(10,12,20,.10);
--line-2: rgba(10,12,20,.14);
--line-3: rgba(10,12,20,.20);
/* Brand colours UNCHANGED (red/teal/gold/gradients stay). Keep red slightly
deeper for AA contrast on white where used as text. */
--red: #e11d1d;
--red-2: #ef3b3b;
/* Shadows tuned for light mode (softer, cooler) */
--sh-cushion: 0 1px 2px rgba(16,20,40,.06), 0 8px 24px -8px rgba(16,20,40,.10);
--sh-card: 0 1px 2px rgba(16,20,40,.06), 0 16px 48px -12px rgba(16,20,40,.14);
--sh-floating:0 2px 4px rgba(16,20,40,.06), 0 24px 64px -16px rgba(16,20,40,.18);
--sh-button: 0 1px 3px rgba(16,20,40,.18), 0 1px 2px rgba(16,20,40,.10);
--sh-button-ghost: 0 0 0 1px rgba(10,12,20,.12) inset;
}
/* Page base: white with the SAME coloured atmosphere glows, softened for light */
html { background: var(--ink); color: var(--fog-1); }
body {
background:
radial-gradient(ellipse 90% 60% at 50% -15%, rgba(225,29,29,.06), transparent 65%),
radial-gradient(ellipse 70% 50% at 10% 25%, rgba(225,29,29,.05), transparent 60%),
radial-gradient(ellipse 70% 50% at 90% 75%, rgba(0,229,204,.07), transparent 60%),
radial-gradient(ellipse 50% 40% at 50% 50%, rgba(247,185,85,.05), transparent 70%),
var(--ink) !important;
}
/* ── Hardcoded dark surfaces that bypass tokens ──────────────────────────── */
.hero { background: var(--ink) !important; }
.hero__announce {
background: rgba(255,255,255,.78) !important;
border:1px solid var(--line-2) !important;
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
box-shadow: var(--sh-cushion);
}
/* Hero lede: readable GLASS BAR (Charlie request) — frosted white panel,
strong dark text, soft brand edge so it reads on the busy hero. */
.hero__lede {
background: rgba(255,255,255,.72) !important;
color: var(--fog-0) !important;
-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
border: 1px solid var(--line-2) !important;
border-radius: 16px;
padding: 18px 22px !important;
box-shadow: 0 8px 32px -10px rgba(16,20,40,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.hero__lede * { color: var(--fog-0) !important; }
.hero__countdown-wrap { background: var(--ink-2) !important; border:1px solid var(--line); }
/* Sticky nav: was dark navy glass -> white glass */
.tp__nav { background: rgba(255,255,255,.85) !important; border-bottom:1px solid var(--line); backdrop-filter: blur(14px); }
/* Speaker logo tiles were near-black; logos themselves are inverted-white SVGs.
On white we drop the dark tile AND remove the invert so logos read dark. */
.speakers__logo-tile { background: var(--ink-2) !important; border:1px solid var(--line); }
.speakers__logo { filter: none !important; }
/* Loader (pre-React paint) */
#loader { background: #ffffff !important; }
#loader div[style*="rgba(255,255,255"] { color: rgba(10,10,10,.45) !important; }
/* Any leftover hardcoded deep-navy hexes used as panel backgrounds */
[style*="#050810"], [style*="#0a0e17"], [style*="#0a0f1a"],
[style*="#0c0a16"], [style*="#0d0b14"], [style*="#0d1220"] {
background-color: var(--ink-2) !important;
}
/* Selection stays brand red on white text */
::selection { background: var(--red); color: #fff; }
/* Buttons: keep red primary; ghost/outline buttons need dark text now */
.btn--ghost, .tp__nav a, .hero__announce, .t-eyebrow { color: var(--fog-1); }
.btn--primary, .price-card__cta, .hero__cta-primary { color: #fff; }
/* Cards on white: ensure border + soft shadow so they don't float invisibly.
NOTE: .faq__item deliberately EXCLUDED — it is a border-bottom list row, not
a card. Adding a full border+shadow butchered it (Charlie flag). */
.price-card, .sponsor__card, .hero__stat-card, .contact__form, .testimonial__card {
border: 1px solid var(--line);
box-shadow: var(--sh-card);
}
/* ── FAQ: keep the clean border-bottom list look on white ─────────────────── */
.faq__item {
border: 0 !important;
border-bottom: 1px solid var(--line) !important;
box-shadow: none !important;
background: transparent !important;
}
.faq__q, .faq__q * { color: var(--fog-0) !important; }
.faq__a, .faq__a p, .faq__a * { color: var(--fog-1) !important; }
.faq__toggle { background: var(--ink-3) !important; border:1px solid var(--line-2) !important; color: var(--fog-1) !important; }
.faq__item.is-open .faq__toggle { background: var(--red) !important; color:#fff !important; border-color: var(--red) !important; }
/* Inputs were dark-glass; make them light */
input, textarea, select {
background: #fff !important;
color: var(--fog-1) !important;
border: 1px solid var(--line-2) !important;
}
input::placeholder, textarea::placeholder { color: var(--fog-3) !important; }
/* ── Dark section bands baked into the React modules (inline + injected CSS) ──
These set background:#0a0e17 / rgb(10,14,23) etc directly. Force to white. */
section#pricing, section#program.prog-section,
section#testimonials.testimonials-section, section#locations,
.prog-section, .testimonials-section {
background: var(--ink) !important;
}
/* #gallery handled by its own JS (white bg + red/teal brand glow + gradient photo
frames) per Charlie 16 Jun; do NOT force it to --ink here. */
/* Soft brand atmosphere so the white bands are not flat */
section#pricing { background:
radial-gradient(ellipse 60% 40% at 50% 0%, rgba(225,29,29,.04), transparent 60%),
var(--ink) !important; }
section#program.prog-section { background:
radial-gradient(ellipse 50% 40% at 80% 10%, rgba(0,229,204,.05), transparent 60%),
var(--ink) !important; }
/* Those bands shipped with light text; flip their descendants to dark on white */
#pricing, #program, #gallery, #testimonials, #locations,
.prog-section, .testimonials-section {
color: var(--fog-1);
}
#pricing h1,#pricing h2,#pricing h3,#program h1,#program h2,#program h3,
#testimonials h1,#testimonials h2,#testimonials h3,#locations h2,
.prog-section h1,.prog-section h2,.prog-section h3,
.testimonials-section h2,.testimonials-section h3 { color: var(--fog-0) !important; }
/* Program timeline cards/lines on white */
.prog-card-col, .prog-card, .prog-wrap { color: var(--fog-1); }
.prog-section *[style*="rgba(255,255,255"] { /* leave brand accents; only soften pure-white text holders handled above */ }
/* Catch any remaining element whose inline style hardcodes the deep navy */
section[style*="rgb(10, 14, 23)"], section[style*="rgb(10, 10, 12)"],
section[style*="#0a0e17"], div[style*="background: rgb(10, 14, 23)"] {
background: var(--ink) !important;
}
/* ── CARDS strategy (revised): the pricing cards + glass stat panels are
DARK-BY-DESIGN (rgb(10,15,26) / rgba(255,255,255,.03) glass). Charlie's rule
is "white text only on a dark background" — so the correct fix is to keep
these panels genuinely DARK (deep navy), which makes their white text VALID,
instead of forcing them white and fighting 40+ inline white-text styles.
Program timeline cards (.prog-card) also stay dark glass. ── */
.brand-border-gradient,
div[style*="rgb(10, 15, 26)"],
div[style*="background: rgb(10, 14, 23)"],
div[style*="rgba(255, 255, 255, 0.03)"],
div[style*="rgba(255,255,255,0.03)"],
div[style*="rgba(255, 255, 255, 0.02)"],
.hero__stat-card {
background: #0c111d !important; /* solid deep navy panel */
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: var(--sh-card) !important;
}
.price-card { background: #0c111d !important; border:1px solid rgba(255,255,255,.10) !important; }
.price-card--featured {
background: linear-gradient(175deg, rgba(225,29,29,.22) 0%, rgba(225,29,29,.08) 35%, #0c111d 80%) !important;
}
/* On these DARK panels, text is white/grey-on-dark = VALID. Re-assert it so the
global dark-text sweep above does not wash them out. */
.brand-border-gradient, .brand-border-gradient *,
.prog-card, .prog-card *,
.price-card, .price-card *,
.hero__stat-card, .hero__stat-card *,
div[style*="rgb(10, 15, 26)"] *,
div[style*="rgba(255, 255, 255, 0.03)"] *,
div[style*="rgba(255,255,255,0.03)"] * {
color: rgba(255,255,255,.92) !important;
}
.brand-border-gradient h1, .brand-border-gradient h2, .brand-border-gradient h3,
.price-card h1, .price-card h2, .price-card h3,
.hero__stat-card .hero__stat-num, .prog-card b, .prog-card strong { color:#fff !important; }
/* keep brand-coloured accents on dark panels */
.price-card .t-accent, .price-card [class*="red"], .prog-card [class*="teal"],
.brand-border-gradient [class*="teal"], .brand-border-gradient [class*="gold"],
.brand-border-gradient [class*="amber"] { color: inherit !important; }
/* Hero countdown / any pill that was dark-glass on dark -> light pill */
.hero__announce, .hero__announce * { color: var(--fog-1) !important; }
/* ============================================================================
HARD RULE (Charlie): no white/near-white text on a light background.
Catch inline white text styles everywhere and force them dark, EXCEPT where
the element sits on a dark/coloured fill (CTA buttons, badges, dark chips).
========================================================================== */
[style*="color:#fff"]:not([style*="background"]):not(.btn):not([class*="cta"]):not([class*="badge"]):not([class*="pill"]),
[style*="color: #fff"]:not([style*="background"]):not(.btn):not([class*="cta"]):not([class*="badge"]):not([class*="pill"]),
[style*="color:#ffffff"]:not([style*="background"]):not(.btn):not([class*="cta"]):not([class*="badge"]),
[style*="color:rgb(255,255,255)"]:not([style*="background"]):not(.btn):not([class*="cta"]),
[style*="color:rgba(255,255,255"]:not([style*="background"]):not(.btn):not([class*="cta"]) {
color: var(--fog-1) !important;
}
/* Grey-on-dark muted text that is now grey-on-white: bump to readable dark.
The token flip already remaps --fog-2/3, but inline rgba(255,255,255,.x)
text needs catching. */
[style*="rgba(255,255,255,0.6"]:not([style*="background"]),
[style*="rgba(255,255,255,0.7"]:not([style*="background"]),
[style*="rgba(255,255,255,0.5"]:not([style*="background"]),
[style*="rgba(255,255,255,0.4"]:not([style*="background"]),
[style*="rgba(255, 255, 255, 0.6"]:not([style*="background"]),
[style*="rgba(255, 255, 255, 0.7"]:not([style*="background"]) {
color: var(--fog-2) !important;
}
/* Elements that genuinely sit on dark/coloured fills KEEP white text:
re-assert it after the broad sweep above. */
.btn, [class*="cta"], .price-card__cta, .price-card__cta *,
[class*="badge"], .hero__stat-bar-fill, [style*="background:#e11d1d"] *,
[style*="background:#ff3b3b"] *, [style*="background: rgb(225"] *,
.brand-border-gradient a[style*="background"], .brand-border-gradient a[style*="background"] * {
color: #fff !important;
}
/* ============================================================================
SECTION-LEVEL DARK-TEXT DEFAULT (the real fix for the 82 light-on-light hits)
Inside these now-white sections, force ALL text dark by default. Then the
rules below re-whiten only true dark/coloured fills (steppers, badges, CTAs,
featured cards). This catches inline color:#fff with no class, where the bg
sits on a parent. Brand accent colours (red/teal/gold) are preserved because
they are not near-white and we only override near-white text.
========================================================================== */
#program *, #pricing *, #testimonials *, #host *, #gallery *,
#venue *, #locations *, .prog-section *, .testimonials-section * {
/* only bite when the text is near-white; coloured accents keep their colour */
}
#program, #program *, #pricing, #pricing *, #testimonials, #testimonials *,
#host, #host *, #venue, #venue *, .prog-section, .prog-section *,
.testimonials-section, .testimonials-section * {
color: var(--fog-1);
}
/* Headings darkest */
#program h1,#program h2,#program h3,#program h4,#pricing h1,#pricing h2,#pricing h3,
#testimonials h2,#testimonials h3,#host h2,#host h3,#venue h2,#venue h3,
.prog-section h2,.prog-section h3 { color: var(--fog-0) !important; }
/* Muted sublabels */
#program small, #pricing small, #testimonials small, #venue small,
#program [style*="0.5"], #program [style*="0.35"], #program [style*="0.4"],
#testimonials [style*="0.55"], #venue [style*="0.6"] { color: var(--fog-2) !important; }
/* Program timeline time-chips: were white text on near-black chips. The chips
read as near-white now, so make them solid dark chips with white text. */
.prog-card [style*="rgba(255,255,255,0.02"],
.prog-card [style*="rgba(255, 255, 255, 0.02"],
.prog-time, .prog-card-time, [class*="prog"][class*="time"] {
background: var(--ink-3) !important;
}
.prog-card .prog-time, .prog-card [class*="time"] b { color: var(--fog-0) !important; }
/* Re-whiten genuine dark/brand fills inside these sections */
#program [style*="background:#"]:not([style*="#fff"]):not([style*="#f7"]):not([style*="#ee"]) ,
#pricing .price-card--featured *,
.hero__stat-bar-fill, .hero__stat-bar-fill * {
/* leave as-is; handled by explicit rules */
}
/* ============================================================================
HERO HEADLINE BLUR FIX (Charlie flag 16 Jun) — the H1 ships dark drop-shadows
(text-shadow 0 2px 16px rgba(0,0,0,.6)...) tuned for the OLD dark bg. On white
that dark blur behind the letters reads as a muddy halo = "blurry h1". Kill the
shadow in light mode. Gradient span keeps crisp clipped text, no glow.
========================================================================== */
.hero__title, .hero__title.t-billboard {
text-shadow: none !important;
}
/* Gradient sub-line: ensure clean background-clip text with no inherited shadow/filter */
.hero__title [class*="grad"], .hero__title span, .hero__accent, .hero__title-grad {
text-shadow: none !important;
filter: none !important;
}
/* ============================================================================
GALLERY / SOCIALPROOF header (#gallery) — slipped through the section sweep.
"Sold Out in 4 Weeks" + "4.9 out of 5" shipped as WHITE text on the now-white
band = invisible. Force the heading + rating dark; keep the gradient "Sold"
accent + the star glyphs coloured. Mobile-first proof block must read.
========================================================================== */
#gallery, #gallery * { color: var(--fog-1); }
#gallery h1, #gallery h2, #gallery h3 { color: var(--fog-0) !important; }
/* the headline mixes a gradient span (.t-sunset/gradient) with plain white text */
#gallery h2 span:not([class*="grad"]):not([class*="sunset"]),
#gallery h2, #gallery h2 *:not([class*="grad"]):not([class*="sunset"]) {
color: var(--fog-0) !important;
}
#gallery [class*="grad"], #gallery .t-sunset { color: transparent !important; } /* keep clipped gradient */
/* rating number + label */
#gallery [class*="rating"], #gallery [class*="stat"], #gallery small,
#gallery p, #gallery .sp__sub { color: var(--fog-1) !important; }
/* the "4.9 out of 5" was pure white */
#gallery *[style*="color:#fff"], #gallery *[style*="color: rgb(255"] { color: var(--fog-0) !important; }
/* ============================================================================
HERO STAT CARDS — premium LIGHT cards (Charlie 16 Jun: "used to look cool,
now shocking"). My earlier blanket dark-card rule turned these into harsh
black boxes on white. Make them clean white cards: soft border + shadow,
dark text, brand-coloured icon chips. Dark text on light = passes the rule
AND looks premium. This block is LAST so it wins the cascade.
========================================================================== */
.hero__stat-card,
.hero__stat-card--venue,
.hero__stat-card--date {
background: #ffffff !important;
border: 1px solid var(--line) !important;
box-shadow: var(--sh-card) !important;
}
.hero__stat-card, .hero__stat-card * { color: var(--fog-1) !important; }
/* Big numbers + venue/day = near-black for punch */
.hero__stat-num, .hero__stat-venue, .hero__stat-day, .hero__stat-date {
color: var(--fog-0) !important;
}
/* Muted sublabels */
.hero__stat-label, .hero__stat-venue-sub { color: var(--fog-2) !important; }
/* "+" keeps the amber brand accent */
.hero__stat-plus { color: var(--amber) !important; }
/* Icon chips: keep their brand tints, just ensure the glyph reads.
red/amber chips stay coloured; default chip gets a soft brand-tint bg. */
.hero__stat-icon {
background: var(--ink-3) !important;
border: 1px solid var(--line) !important;
}
.hero__stat-icon svg, .hero__stat-icon * { color: var(--red) !important; }
.hero__stat-icon--amber { background: rgba(247,185,85,.14) !important; }
.hero__stat-icon--amber svg, .hero__stat-icon--amber * { color: #b9791e !important; }
.hero__stat-icon--red { background: rgba(225,29,29,.10) !important; }
.hero__stat-icon--red svg, .hero__stat-icon--red * { color: var(--red) !important; }
/* "SOLD OUT" mini-label on the first card: make it the brand red (it reads as a
badge), not washed grey. */
.hero__stat-card .hero__stat-label { letter-spacing: .08em; }
/* Specificity bump: the earlier `.hero__stat-card .hero__stat-num{color:#fff}`
(two classes) beat my single-class rule. Match specificity to force dark. */
.hero__stat-card .hero__stat-num,
.hero__stat-card .hero__stat-venue,
.hero__stat-card .hero__stat-day,
.hero__stat-card .hero__stat-date { color: var(--fog-0) !important; }
.hero__stat-card .hero__stat-label,
.hero__stat-card .hero__stat-venue-sub { color: var(--fog-2) !important; }
.hero__stat-card .hero__stat-plus { color: var(--amber) !important; }
/* ============================================================================
VENUE PARTNER LOGOS (Charlie: faint/ghosted). The logo PNGs are WHITE/light,
built for the dark theme. On the near-white tile they vanish. Give the venue
partner tiles a subtle DARK chip so the white logos read crisp. (Speaker
company logos that are dark-on-transparent keep the light tile.)
========================================================================== */
.speakers__venue-tile,
.speakers__logo-tile.speakers__venue-tile {
background: #0c111d !important;
border: 1px solid rgba(255,255,255,.10) !important;
box-shadow: var(--sh-cushion) !important;
}
.speakers__venue-tile img,
.speakers__venue-tile .speakers__logo {
filter: brightness(0) invert(1) !important; /* force logos pure white on dark chip */
opacity: .92 !important;
}
/* ============================================================================
PROGRAM / SCHEDULE REDESIGN (16 Jun 2026) — Approach A: dark band accent.
The schedule section was designed dark and looks premium as a dark band on
the white page. The earlier light-mode sweep forced #program text dark, which
made the dark-on-dark .prog-card-title (an
) INVISIBLE. This block keeps
the section genuinely dark and re-asserts white/brand text so contrast is
valid (white text only on dark = OK). Specificity here (.prog-section ...) and
source order (loaded last) beat the earlier #program h3 / #program * rules.
========================================================================== */
/* 16 Jun (Charlie): schedule band flipped to WHITE. Section bg white, header
text dark (now on white). Timeline CARDS stay dark (#0d1320) so their white
text remains valid (white-on-dark card = OK). */
section#program.prog-section, .prog-section {
background: #ffffff !important;
}
section#program.prog-section { background:
radial-gradient(ellipse 50% 40% at 80% 10%, rgba(0,229,204,.05), transparent 60%),
#ffffff !important; }
/* Kill the dark radial/grid atmosphere baked in for the dark band */
.prog-section::before { opacity: 0 !important; }
.prog-grid { opacity: 0 !important; }
/* Header text dark on the white band */
.prog-section h2, .prog-section .prog-title { color: #08090c !important; }
.prog-section .prog-subtitle { color: rgba(12,14,20,0.6) !important; }
/* The chips/doors sit on white now: give them readable dark text */
#program .prog-chip, .prog-section .prog-chip { color: rgba(12,14,20,0.72) !important; background: rgba(12,14,20,0.04) !important; border-color: rgba(12,14,20,0.1) !important; }
#program .prog-chip svg, .prog-section .prog-chip svg { color: #00b8a3 !important; }
/* Cards stay dark; their inner text stays white/light (valid on dark card) */
.prog-section .prog-card, .prog-section .prog-card * {
color: rgba(255,255,255,0.92) !important;
}
.prog-section .prog-card .prog-card-title,
#program .prog-card .prog-card-title { color: #fff !important; }
/* Timeline dot ring matched the old dark bg; on white make the ring white */
.prog-section .prog-dot { box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px rgba(0,229,204,0.3), 0 0 18px rgba(0,229,204,0.4) !important; }
.prog-section .prog-dot--key { box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px rgba(255,59,59,0.25), 0 0 18px rgba(255,59,59,0.35) !important; }
.prog-section .prog-accent {
background: linear-gradient(135deg,#ff3b3b,#00e5cc) !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* Card-internal muted greys stay light-grey on the dark CARDS (valid) */
.prog-section .prog-card-desc,
.prog-section .prog-card-org,
.prog-section .prog-card-dur,
.prog-section .prog-time-per { color: rgba(255,255,255,0.5) !important; }
/* Subtitle + doors label sit on the WHITE band now: dark muted */
.prog-section .prog-subtitle { color: rgba(12,14,20,0.6) !important; }
.prog-section .prog-doors-label { color: rgba(12,14,20,0.55) !important; }
.prog-section .prog-card-speaker { color: rgba(255,255,255,0.72) !important; }
/* Brand-coloured chips/labels keep their colour */
.prog-section .prog-label { color: #00e5cc !important; }
.prog-section .prog-doors-time { color: #00e5cc !important; }
.prog-section .prog-time { color: #00e5cc !important; }
.prog-section .prog-time--key { color: #ff7a7a !important; }
/* (stale dark-band chip rule removed 16 Jun: chips now dark-on-white via line ~413) */
/* Avatar initials + dark fills keep white */
.prog-section .prog-card-avatar { color: #fff !important; }
/* Neutralise the earlier rule that recolours prog time chip backgrounds */
.prog-section .prog-card .prog-time { background: rgba(0,229,204,0.09) !important; }
.prog-section .prog-card .prog-time--key { background: rgba(255,77,77,0.10) !important; }
/* Type chips keep brand colour over the broad white sweep (id-level to beat #program [style*="0.55"]) */
#program .prog-card .prog-type--keynote, .prog-section .prog-card .prog-type--keynote { color: #ff7a7a !important; }
#program .prog-card .prog-type--panel, .prog-section .prog-card .prog-type--panel { color: #00e5cc !important; }
#program .prog-card .prog-type--general, .prog-section .prog-card .prog-type--general { color: rgba(255,255,255,0.55) !important; }
/* General time chip + muted greys: id-level so the inline 0.5/0.4 sweep cannot win */
#program .prog-card .prog-card-desc, #program .prog-card .prog-card-org,
#program .prog-card .prog-card-dur { color: rgba(255,255,255,0.5) !important; }
#program .prog-card .prog-card-title { color: #fff !important; }
/* ============================================================================
PRICING CARD CONTRAST + CONDENSE (Charlie 16 Jun: cards "too elongated",
feature rows rendering BLANK). Root cause: the global "no white text" sweep
flips the cards' inline rgba(255,255,255,0.7) feature text to dark — but the
ticket cards are DARK navy, so dark text = invisible. The individual cards
use .brand-border-gradient; the GROUP cards have no such class so #pricing *
forced their text dark too. Re-assert light-on-dark for ALL pricing cards as
the LAST word. Cards are dark => white/light text is correct + passes the rule.
========================================================================== */
/* Individual cards (.brand-border-gradient) AND group cards (dark inline bg) */
/* 16 Jun: Charlie wants ALL card font pure white (was .72 dimmed). */
#pricing .brand-border-gradient *,
#pricing div[style*="#0a0f1a"] *,
#pricing div[style*="rgb(10, 15, 26)"] *,
#pricing div[style*="linear-gradient(180deg, rgb(26, 26, 46)"] * {
color: #ffffff !important;
}
/* Bold feature lines + names + big numbers = pure white */
#pricing .brand-border-gradient b,
#pricing .brand-border-gradient strong,
#pricing div[style*="#0a0f1a"] b,
#pricing div[style*="#0a0f1a"] strong { color:#fff !important; }
/* The feature tick rows: the label span sits right after the svg tick. Bold
ones (color:#fff inline) -> white; muted ones (rgba .7) -> readable light grey. */
#pricing .brand-border-gradient span[style*="color: rgb(255, 255, 255)"],
#pricing div[style*="#0a0f1a"] span[style*="color: rgb(255, 255, 255)"] { color:#fff !important; }
/* Tighten vertical rhythm so cards stop being elongated */
#pricing .brand-border-gradient { gap: 12px !important; }
@media (min-width:769px){
#pricing .brand-border-gradient { padding: 24px 22px 22px !important; }
}
/* ============================================================================
Move CONTACT ("Get in touch") + NEWSLETTER ("Stay sharp") bars UP a touch
(Charlie 16 Jun). Reduce the top gap above each so they sit closer to the
section before them. Desktop + mobile.
========================================================================== */
section.contact { padding-top: 32px !important; }
section.final { padding-top: 24px !important; }
@media (max-width:768px){
section.contact { padding-top: 16px !important; }
section.final { padding-top: 12px !important; }
}
/* FIX (Charlie 16 Jun screenshot): an old light-theme rule
`[class*="prog"][class*="time"]{background:var(--ink-3)}` (line ~275) was
painting a light-grey box behind the DOORS pill teal text
(.prog-doors-time). The program is now a dark band, so that pill text needs
NO background. Kill it. (The .prog-card .prog-time chip keeps its teal tint
via the later rule.) */
.prog-section .prog-doors-time,
.prog-doors-time { background: transparent !important; }
/* ============================================================================
SCHOOL OF HOPE charity card (Charlie 16 Jun: "Net proceeds" heading was
invisible). It's a DARK card inside #pricing, so the global no-white-text
sweep was forcing its heading/body dark-on-dark = invisible. Re-assert
light-on-dark as the LAST word (the gradient "School of Hope" span keeps its
own transparent fill). ========================================================================== */
.soh-card .soh-title { color:#ffffff !important; }
.soh-card .soh-body { color: rgba(255,255,255,0.62) !important; }
.soh-card .soh-cta { color:#00e5cc !important; }
.soh-card .soh-title span { -webkit-text-fill-color: transparent !important; }
/* Specificity bump: #pricing/#host h3 (id+el) beat .soh-card .soh-title. Match it.
SoH card moved into #host (next to Kate) 16 Jun, so cover both scopes. */
#pricing .soh-card .soh-title, #pricing a.soh-card .soh-title,
#host .soh-card .soh-title, #host a.soh-card .soh-title { color:#ffffff !important; }
#pricing .soh-card .soh-title span,
#host .soh-card .soh-title span { -webkit-text-fill-color: transparent !important; color: transparent !important; }
#pricing .soh-card .soh-body, #host .soh-card .soh-body { color: rgba(255,255,255,0.62) !important; }
#pricing .soh-card .soh-cta, #host .soh-card .soh-cta { color:#00e5cc !important; }
/* The host SoH card images/badge text must not get dark-swept either */
#host .soh-card { color:#fff !important; }
/* ============================================================================
PRICING TIER CARDS — all text crisp white (Charlie 16 Jun: "make sure all the
font on this is white"). The 3 tier cards are dark (.brand-border-gradient,
bg rgb(10,15,26)); their text shipped at 0.72 dimmed white. Force full white
on EVERY text node inside the cards. Accents (price colour, check icons, CTA
button fill, tier borders) live on bg/border/fill, not text, so this is safe.
========================================================================== */
#pricing .brand-border-gradient,
#pricing .brand-border-gradient * {
color: #ffffff !important;
}
/* The strikethrough RRP stays readable-but-secondary: soft white, not pure */
#pricing .brand-border-gradient s,
#pricing .brand-border-gradient del,
#pricing .brand-border-gradient [style*="line-through"] { color: rgba(255,255,255,0.65) !important; }
/* ============================================================================
PROGRAM = TEAL GLASS BARS (Charlie 16 Jun redesign)
Dark teal band + frosted teal-glass cards, no red, no left stripe.
id-level selectors so this wins over the shared dark-navy panel group above.
============================================================================ */
section#program.prog-section {
background:
radial-gradient(ellipse 600px 420px at 18% 6%, rgba(0,229,204,0.10), transparent 70%),
radial-gradient(ellipse 520px 520px at 86% 50%, rgba(0,229,204,0.07), transparent 70%),
#06100f !important;
}
#program.prog-section::before { opacity: 1 !important; }
#program.prog-section .prog-grid { opacity: 1 !important; }
/* header text light on the dark teal band */
#program .prog-title, #program.prog-section h2 { color: #fff !important; }
#program .prog-subtitle { color: rgba(255,255,255,0.5) !important; }
#program .prog-doors-label { color: rgba(255,255,255,0.5) !important; }
#program .prog-chip { color: rgba(255,255,255,0.72) !important; background: rgba(0,229,204,0.05) !important; border-color: rgba(0,229,204,0.14) !important; }
#program .prog-chip svg { color: #00e5cc !important; }
#program .prog-accent {
background: linear-gradient(135deg,#00e5cc,#3dffd6 60%,#00b8a3) !important;
-webkit-background-clip: text !important; background-clip: text !important;
-webkit-text-fill-color: transparent !important; color: transparent !important;
}
/* THE GLASS BARS: translucent teal, frosted, no left stripe */
#program .prog-card, #program.prog-section .prog-card {
background: linear-gradient(135deg, rgba(0,229,204,0.08), rgba(10,22,21,0.9)) !important;
border: 1px solid rgba(0,229,204,0.18) !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.05) !important;
}
#program .prog-card:hover, #program.prog-section .prog-card:hover {
background: linear-gradient(135deg, rgba(0,229,204,0.12), rgba(10,22,21,0.5)) !important;
border-color: rgba(0,229,204,0.4) !important;
box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 30px rgba(0,229,204,0.1), inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
#program .prog-card--tba, #program.prog-section .prog-card--tba {
background: linear-gradient(135deg, rgba(0,229,204,0.05), rgba(10,22,21,0.4)) !important;
border: 1px dashed rgba(0,229,204,0.24) !important;
}
/* card text stays light on the dark glass */
#program .prog-card, #program .prog-card * { color: rgba(255,255,255,0.92) !important; }
#program .prog-card .prog-card-title { color: #fff !important; }
#program .prog-card .prog-card-title--tba { color: rgba(255,255,255,0.62) !important; }
#program .prog-card .prog-card-desc { color: rgba(255,255,255,0.5) !important; }
#program .prog-card .prog-card-dur { color: rgba(255,255,255,0.4) !important; }
#program .prog-card .prog-card-org { color: rgba(0,229,204,0.65) !important; }
/* every time chip + type chip = teal (kill the old red keynote colour) */
#program .prog-card .prog-time, #program.prog-section .prog-card .prog-time {
color: #00e5cc !important; background: rgba(0,229,204,0.10) !important; border:1px solid rgba(0,229,204,0.24) !important;
}
#program .prog-card .prog-card-type { color: #00e5cc !important; background: rgba(0,229,204,0.10) !important; border:1px solid rgba(0,229,204,0.18) !important; }
#program .prog-card .prog-card-type--muted { color: rgba(255,255,255,0.55) !important; background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.10) !important; }
/* avatars teal */
#program .prog-card .prog-card-avatar { color:#04201c !important; }
#program .prog-card .prog-card-avatar--tba { color:#00e5cc !important; }
/* timeline dots: dark teal band ring (not white) */
#program .prog-dot { box-shadow: 0 0 0 5px #06100f, 0 0 0 6px rgba(0,229,204,0.28), 0 0 22px rgba(0,229,204,0.55) !important; }
#program .prog-dot--key { box-shadow: 0 0 0 5px #06100f, 0 0 0 6px rgba(0,229,204,0.3), 0 0 26px rgba(0,229,204,0.55) !important; }
/* Testimonials: bold LinkedIn-blue on every "OpenSummit" mention (Charlie 16 Jun).
Beats the blanket "#testimonials *{color:var(--fog-1)}" universal-selector rule. */
.testimonials-section .li-card .li-text .li-os,
#testimonials .li-os { color: #0A66C2 !important; font-weight: 700 !important; }
/* FAQ felt zoomed-in on mobile (Charlie 16 Jun) — scale heading + rows down. */
@media (max-width:768px){
#faq .faq__head .t-h1, .faq .faq__head .t-h1 { font-size:20px !important; line-height:1.15 !important; margin-top:8px !important; }
#faq .faq__head p, .faq .faq__head p { font-size:13px !important; margin-top:12px !important; }
#faq .faq__head .t-eyebrow, .faq .faq__head .t-eyebrow { font-size:11px !important; }
#faq .faq__q, .faq .faq__q { padding:14px 4px !important; gap:12px !important; justify-content:flex-start !important; }
#faq .faq__q .t-h4, .faq .faq__q .t-h4 { font-size:14px !important; line-height:1.3 !important; }
#faq .faq__a p, .faq .faq__a p { font-size:13px !important; line-height:1.5 !important; padding-bottom:16px !important; }
#faq .faq__toggle, .faq .faq__toggle { width:28px !important; height:28px !important; }
#faq .faq__layout, .faq .faq__layout { gap:20px !important; grid-template-columns: minmax(0,1fr) !important; }
/* FAQ rows were overflowing the right edge on phone (fixed grid track + min-width:auto)
pushing the chevron toggle arrows off-screen. Force every track/child to shrink. */
#faq .faq__list, .faq .faq__list,
#faq .faq__item, .faq .faq__item,
#faq .faq__head, .faq .faq__head { min-width:0 !important; max-width:100% !important; }
#faq .faq__q, .faq .faq__q { width:100% !important; box-sizing:border-box !important; }
/* Chevron toggle: Charlie 16 Jun 15:44 — move to the LEFT of each
question so the expand affordance is obvious, and keep it always
visible (the aria-hidden hide rule in landing.css now excludes it). */
#faq .faq__q .faq__toggle, .faq .faq__q .faq__toggle {
display:grid !important; place-items:center !important;
width:30px !important; height:30px !important; flex-shrink:0 !important;
order:-1 !important; margin-right:2px !important;
background:var(--red) !important; border-color:var(--red) !important; color:#fff !important;
}
#faq .faq__item.is-open .faq__toggle, .faq .faq__item.is-open .faq__toggle {
transform:rotate(180deg) !important;
}
}
/* ── HERO mobile first-screen (Charlie 16 Jun): move H1 up ~30%, stronger, CTA pinned to bottom of frame on load ── */
.hero__firstscreen { display: contents; } /* desktop: zero layout effect */
@media (max-width:768px){
/* lift everything up ~30%: cut the big top padding */
.hero { padding-top: 92px !important; }
/* first screen = column, content sized naturally (NO forced full-viewport).
Charlie 16 Jun 15:42: the 100svh min-height + margin-top:auto on the CTA
left a massive empty void between the description and the GET TICKETS button.
Let it hug the content; add a comfortable gap before the stat tiles below. */
.hero__firstscreen {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
min-height: 0 !important;
width: 100% !important;
gap: 18px !important;
padding-bottom: 44px !important;
}
/* stronger H1 */
.hero__title.t-billboard {
font-size: 40px !important;
line-height: 1.04 !important;
font-weight: 900 !important;
letter-spacing: -.035em !important;
margin-top: 4px !important;
}
.hero__firstscreen .hero__lede { margin: 0 !important; }
/* CTA sits directly under the description now (no auto-push to bottom edge) */
.hero__firstscreen .hero__cta {
margin-top: 4px !important;
width: 100% !important;
padding-bottom: 0 !important;
}
.hero__firstscreen .hero__cta .btn {
padding: 17px 20px !important;
font-size: 16px !important;
font-weight: 800 !important;
}
}
/* Clips: social thumbnails 2-across on phone, smaller (Charlie 16 Jun "massive, 2 across, less scrolling") */
@media (max-width:768px){
.clips-embeds{display:grid !important;grid-template-columns:1fr 1fr !important;flex-direction:unset !important;align-items:stretch !important;gap:10px !important;padding:0 12px !important}
.clips-thumb{max-height:none !important;border-radius:12px !important}
}
/* ============================================================================
HOST band goes DARK (Charlie 16 Jun): dark teal starts at the divider above
Kate's image, flowing straight into the Program/Schedule dark band below.
============================================================================ */
#host.section {
position: relative;
background:
radial-gradient(ellipse 600px 420px at 18% 0%, rgba(0,229,204,0.10), transparent 70%),
radial-gradient(ellipse 520px 520px at 86% 60%, rgba(0,229,204,0.06), transparent 70%),
#06100f !important;
}
/* Kate card text -> light on the dark band */
#host .host-kate .host-kate-name, #host .host-kate > div > div:nth-child(2) { color:#fff !important; }
#host .host-kate [style*="--fog-0"], #host .host-kate [style*="fog-0"] { color:#fff !important; }
#host .host-kate [style*="--fog-2"], #host .host-kate [style*="fog-2"] { color:rgba(255,255,255,0.66) !important; }
/* Host band is dark now: Kate subtitle lines use inline rgba(255,255,255,0.66) which
the global light-theme sweep (line ~227) flips to dark. Re-assert white here. */
#host .host-kate [style*="rgba(255,255,255,0.66"], #host .host-kate [style*="rgba(255, 255, 255, 0.66"] { color:rgba(255,255,255,0.66) !important; }
/* ============================================================================
Red brand divider belongs at the cream->dark boundary ABOVE Kate, not in the
middle of the now-merged Host+Program dark band (Charlie 16 Jun).
Kill the Program top line; make the Host top line full strength.
============================================================================ */
#program.prog-section::before { opacity: 0 !important; }
#host.section::before { opacity: 1 !important; }
/* ============================================================================
The venue map (.vhero) is a rounded inset card, not a full-bleed band, so the
generic `section + section::before` red divider just floats in the white
gutter above it (Charlie 16 Jun). Kill it there - the map card stands alone.
============================================================================ */
.vhero::before { display: none !important; content: none !important; }
/* ============================================================================
Social-proof purchase toast is a dark glass card on a fixed overlay. Its
inline rgba(255,255,255,.6)/.35 text gets flipped dark by the global
light-theme sweep (line ~227) -> invisible. Force white inside the toast.
============================================================================ */
.purchase-toast, .purchase-toast * { color: #fff; }
.purchase-toast [style*="rgba(255,255,255,0.6"], .purchase-toast [style*="rgba(255, 255, 255, 0.6"] { color: rgba(255,255,255,0.7) !important; }
.purchase-toast [style*="rgba(255,255,255,0.35"], .purchase-toast [style*="rgba(255, 255, 255, 0.35"] { color: rgba(255,255,255,0.45) !important; }
.purchase-toast [style*="#00e5cc"] { color: #00e5cc !important; }
/* ============================================================================
ONE CONTINUOUS BACKGROUND SYSTEM (Charlie 16 Jun)
Two clean bands, no patchy seams:
1) LIGHT "photo-frames" field: hero -> gallery -> speakers, all solid white,
running consistently down to the divider just above Kate's photo.
2) DARK black+green band: #host + #program flattened to ONE identical fill,
carried straight down through the top of #clips to land exactly at the
top of the "Highlights" line.
============================================================================ */
/* 1) Upper light band: kill the red body-gradient bleed on speakers so the
whole top of the site is one consistent white field. */
#speakers, section#speakers, .section.speakers {
background: #ffffff !important;
}
/* 2) Dark band = ONE consistent black+green fill across both sections.
Flattened (no per-section radial offsets) so Host and Schedule read as a
single uninterrupted block with no seam where they meet. */
section#host.section,
section#program.prog-section {
background:
radial-gradient(ellipse 1100px 900px at 50% 0%, rgba(0,229,204,0.05), transparent 70%),
#06100f !important;
}
/* 3) Carry the dark band down through the top of #clips, then SMOOTHLY fade it
into white so the Schedule -> Highlights transition flows (Charlie 16 Jun
16:00: "this section is ugly, doesn't flow, integrate them, make it smoother").
Was a HARD CUT (#06100f to #fff at exactly 100px = visible white line under
the HIGHLIGHTS label). Now: dark holds through the label, then a soft
gradient melt dark -> white over ~150px. Seamless with #program above. */
#clips.clips-section {
background: linear-gradient(180deg,
#06100f 0,
#06100f 110px,
#0a1614 165px,
#2a3a37 220px,
#6f8480 275px,
#b9c5c2 330px,
#ffffff 390px) !important;
}
@media (max-width: 768px) {
#clips.clips-section {
background: linear-gradient(180deg,
#06100f 0,
#06100f 64px,
#0a1614 104px,
#2a3a37 144px,
#6f8480 188px,
#b9c5c2 226px,
#ffffff 268px) !important;
}
}
/* ============================================================================
City cards -> Questions: float the red divider line UP into the middle of
the white gap between the two blocks (Charlie 16 Jun). It was sitting flush
at the top edge of the contact block; lift it ~40px into the gap so it reads
as a separator BETWEEN the two blocks, not the lid of the contact block.
============================================================================ */
#contact { position: relative; }
#contact::before {
position: absolute !important;
top: -52px !important;
left: 0 !important;
right: 0 !important;
opacity: 0.45 !important;
}
@media (max-width: 768px) {
#contact::before { top: -18px !important; }
}
/* ============================================================================
Partner logos -> Kate green band: pin the red divider line exactly to the
top edge of the GREEN band (the white->dark seam), not floating up in the
white gutter below the logos (Charlie 16 Jun). Absolute-position it at the
host band's very top so it sits right where the green starts.
============================================================================ */
#host.section { position: relative !important; }
#host.section::before {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
opacity: 1 !important;
z-index: 2 !important;
}
/* Sponsorship CTA card sits in the light pricing band but is itself dark -> its
text must stay white, overriding the band's dark-ink !important rules. */
#pricing .sponsor-cta h3 { color: #fff !important; }
#pricing .sponsor-cta p { color: rgba(255,255,255,0.62) !important; }
#pricing .sponsor-cta a { color: #0a0e17 !important; }
/* ============================================================================
Contact -> Newsletter ("Join the newsletter") divider: same treatment as the
contact line - float it to the MIDDLE of the white gap, not flush at the top
edge of the newsletter block (Charlie 16 Jun). Gap ~96px desktop.
============================================================================ */
#contact + .section { position: relative; }
#contact + .section::before {
position: absolute !important;
top: -48px !important;
left: 0 !important;
right: 0 !important;
opacity: 0.45 !important;
}
@media (max-width: 768px) {
#contact + .section::before { top: -18px !important; }
}
/* ── Pricing top divider (Charlie 16 Jun 15:25): the red->teal brand line above
#pricing ("Secure your spot at OpenSummit.AI") was floating in the white gap
below the testimonial cards because it is an in-flow ::before sitting AFTER the
section's 48px padding-top. Pin it to the section top edge = the colour-change
boundary, like the host/contact dividers. ── */
#pricing { position: relative; }
#pricing::before {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
z-index: 2 !important;
opacity: 0.45 !important;
}
/* ── Schedule -> Highlights seam (Charlie 16 Jun 16:00): the dark teal Schedule
band hard-cut straight to the white "Highlights / See it for yourself" section
with a dead dark void below the last card. Make it FLOW: give a generous bottom
buffer + a soft gradient that melts the dark band into white, so there is no
hard horizontal line. The melt sits in the empty padding below the last card. ── */
/* Trim the dead dark void below the last Schedule card so it doesn't read as an
empty gap before the Highlights fade (Charlie 16 Jun 15:35 "remove the extra
space underneath this"). Program flows straight into #clips' dark top (same
#06100f), then #clips fades to white. Pull HIGHLIGHTS up close to the card. */
section#program.prog-section { padding-bottom: 24px !important; }
#clips.clips-section { padding-top: 48px !important; }
@media (max-width: 768px) {
section#program.prog-section { padding-bottom: 16px !important; }
#clips.clips-section { padding-top: 30px !important; }
}
/* ── FOOTER brand gradients (Charlie 16 Jun 15:45): make the EVENT / CONNECT /
FOLLOW eyebrows + the divider line use the red->teal brand gradient ── */
.footer__col .t-eyebrow {
background: linear-gradient(90deg, #ff3b3b 0%, #00e5cc 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
font-weight: 800 !important;
}
/* keep the little leading dot but give it its own gradient pop */
.footer__col .t-eyebrow::before {
background: linear-gradient(135deg, #ff3b3b, #00e5cc) !important;
box-shadow: 0 0 12px rgba(0,229,204,0.5) !important;
-webkit-text-fill-color: initial !important;
}
/* the top accent line: full-width, thicker, richer red->teal gradient */
.footer::before {
width: min(680px, 80%) !important;
height: 3px !important;
opacity: 1 !important;
background: linear-gradient(90deg, transparent, #ff3b3b 25%, #00e5cc 75%, transparent) !important;
}
@media (max-width: 768px) {
.footer::before { width: 75% !important; height: 3px !important; opacity: 1 !important; }
}
/* ============================================================================
SPEAKERS(white) -> HOST(dark) ENTRY SEAM (Charlie 17 Jun): the white->black
cut above the host / "tickets with purpose" band was a hard, shocking line.
Mirror the Schedule->Highlights EXIT melt: hold white at the very top, then a
soft gradient melt white -> #06100f within the host section's top padding, so
the venue-partners white field flows into the dark host band with no hard seam.
Host then meets #program (#06100f) flat below = single uninterrupted dark band.
(Kept the band dark instead of flipping the whole thing white - a full white
host band orphans the dark SoH card + the dark Program/Schedule band below and
reads worse. The melt gives the smooth transition without the shock.)
============================================================================ */
section#host.section {
background: linear-gradient(180deg,
#ffffff 0,
#b9c5c2 64px,
#6f8480 120px,
#2a3a37 176px,
#0a1614 232px,
#06100f 300px) !important;
}
@media (max-width: 768px) {
section#host.section {
background: linear-gradient(180deg,
#ffffff 0,
#b9c5c2 40px,
#6f8480 84px,
#2a3a37 128px,
#0a1614 172px,
#06100f 224px) !important;
}
}
/* The red brand divider pinned at the host top now sits on the white edge where
the melt begins = clean separator at the colour-change boundary. Soften it so
it reads as a hairline seam, not a hard bar. */
#host.section::before { opacity: 0.5 !important; }
/* ============================================================================
NEWSLETTER -> FAQ (Charlie 17 Jun): two fixes on this screen.
1) Kill the dead white band around the tiny "Join the newsletter" block -
tighten its vertical padding so it isn't marooned in empty space.
2) Float the red->teal divider line UP to ~halfway between the SUBSCRIBE
button and "Your Questions Answered", instead of sitting flush on the FAQ.
(Both sections are overflow:hidden, so the line lives inside the FAQ's top
padding and is nudged down via margin to land mid-gap - not clipped.)
============================================================================ */
#contact + .section { /* the Newsletter section */
padding-top: 40px !important;
padding-bottom: 40px !important;
}
#faq.faq { padding-top: 72px !important; }
#faq.faq::before {
margin-top: 30px !important; /* drop the divider into the middle of the gap */
opacity: 0.45 !important;
}
@media (max-width: 768px) {
#contact + .section { padding-top: 28px !important; padding-bottom: 28px !important; }
#faq.faq { padding-top: 44px !important; }
#faq.faq::before { margin-top: 18px !important; }
}
/* FAQ blue focus-outline box (Charlie flagged it as a genuine bug): the first
accordion row showed the browser's default blue focus ring. Remove the ring on
click; keep a subtle, on-brand focus-visible ring for keyboard users (a11y). */
.faq__q { outline: none !important; }
.faq__q:focus { outline: none !important; }
.faq__q:focus-visible {
outline: 2px solid rgba(255,59,59,0.45) !important;
outline-offset: 4px !important;
border-radius: 6px;
}
/* ============================================================================
SPEAKER FLIP-TILE BACK FACE (Charlie 17 Jun): bio overflowed the tile, text
didn't fit. Restructure the back face into a clean NAME -> ROLE -> BIO stack
with the bio in a scroll-safe area so long bios (Kia, John) never overflow.
Tighter, responsive type. Back face is dark glass (var(--ink-2)) = white text
valid. Overrides the cramped legacy mobile rules in landing.css.
============================================================================ */
.sp-tile__back {
padding: 18px 16px !important;
gap: 10px !important;
justify-content: flex-start !important;
background: linear-gradient(165deg, #121826 0%, #0b0f1a 70%) !important;
}
.sp-tile__back-head {
padding-bottom: 10px !important;
margin-bottom: 2px !important;
border-bottom: 1px solid rgba(255,255,255,0.10) !important;
flex-shrink: 0;
}
.sp-tile__back .sp-tile__name {
font-size: 17px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
color: #fff !important;
}
.sp-tile__role {
margin-top: 4px;
font-size: 11.5px;
line-height: 1.3;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--teal, #00e5cc);
text-wrap: pretty;
}
.sp-tile__talk-wrap {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding-right: 4px;
/* fade the bottom edge so a scrolling bio hints there's more */
-webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
mask-image: linear-gradient(180deg, #000 88%, transparent 100%);
}
.sp-tile__talk-wrap::-webkit-scrollbar { width: 4px; }
.sp-tile__talk-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 4px; }
.sp-tile__back .sp-tile__talk-text {
font-size: 13px !important;
line-height: 1.5 !important;
color: rgba(255,255,255,0.82) !important;
text-wrap: pretty;
}
/* Desktop tiles are larger -> a touch more room */
@media (min-width: 769px) {
.sp-tile__back { padding: 22px 20px !important; gap: 12px !important; }
.sp-tile__back .sp-tile__name { font-size: 20px !important; }
.sp-tile__role { font-size: 13px; }
.sp-tile__back .sp-tile__talk-text { font-size: 14px !important; line-height: 1.55 !important; }
}
/* Small phones / 3-across grid -> shrink to guarantee fit */
@media (max-width: 480px) {
.sp-tile__back { padding: 11px 9px !important; gap: 6px !important; }
.sp-tile__back-head { padding-bottom: 6px !important; }
.sp-tile__back .sp-tile__name { font-size: 12.5px !important; }
.sp-tile__role { font-size: 9px; margin-top: 2px; }
.sp-tile__back .sp-tile__talk-text { font-size: 10px !important; line-height: 1.35 !important; }
}
/* ============================================================================
TICKET CARDS -> GLASS TILES like the SCHEDULE (Charlie 17 Jun): "redesign the
tickets, make them glass tiles, more like the schedule tiles, keep bg white,
they take too much room". Match .prog-card aesthetic: translucent teal-tinted
glass, hairline teal top edge, soft shadow, lift-on-hover. Section stays white;
only the CARDS become glass. Beats the prior flat #0c111d navy slabs.
Overrides the earlier #0c111d card fill (those rules use the same selectors;
this block is later in the cascade so it wins).
============================================================================ */
/* REWORKED (Charlie 17 Jun: "washed-out grey, didn't work"). Root cause: a
translucent teal tint over a WHITE section just renders muddy grey. Glass only
reads premium on dark. So the cards are now DEEP DARK glass tiles sitting on the
white section (Stripe/Linear style): near-opaque teal-black base, crisp glossy
top highlight, teal edge, strong drop shadow for lift off the white. White text
stays crisp (handled by the .brand-border-gradient text rules above). */
#pricing .os-glass-card {
background:
radial-gradient(120% 80% at 50% -10%, rgba(0,229,204,0.16) 0%, transparent 55%),
linear-gradient(165deg, #0f1f23 0%, #0a1418 55%, #070d10 100%) !important;
border: 1px solid rgba(0,229,204,0.22) !important;
border-radius: 20px !important;
box-shadow:
0 24px 60px -18px rgba(2,18,16,0.55),
0 6px 18px -8px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255,255,255,0.10) !important;
position: relative;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}
/* bright teal hairline + soft glow along the top edge (schedule-tile signature) */
#pricing .os-glass-card::after {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, rgba(0,229,204,0.85), transparent);
pointer-events: none; z-index: 3;
}
#pricing .os-glass-card:hover {
transform: translateY(-4px);
border-color: rgba(0,229,204,0.5) !important;
box-shadow:
0 32px 70px -16px rgba(2,18,16,0.62),
0 0 40px -6px rgba(0,229,204,0.22),
inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
/* tighten padding so the cards stop hogging vertical room */
#pricing .os-glass-card { padding: 24px 22px 22px !important; }
@media (max-width: 768px) {
#pricing .os-glass-card { padding: 20px 18px 18px !important; border-radius: 18px !important; }
}
/* Featured (Premium) tile: warm gold top-glow so it still stands out, dark base */
#pricing .os-glass-card--feat {
background:
radial-gradient(120% 80% at 50% -10%, rgba(247,185,85,0.22) 0%, transparent 55%),
linear-gradient(165deg, #1c1607 0%, #120d12 50%, #0a0d11 100%) !important;
border-color: rgba(247,185,85,0.5) !important;
box-shadow:
0 26px 64px -16px rgba(2,18,16,0.6),
0 0 36px -10px rgba(247,185,85,0.25),
inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
#pricing .os-glass-card--feat::after {
background: linear-gradient(90deg, transparent, rgba(247,185,85,0.9), transparent) !important;
}
#pricing .os-glass-card--feat:hover {
border-color: rgba(247,185,85,0.7) !important;
box-shadow:
0 34px 74px -14px rgba(2,18,16,0.66),
0 0 46px -6px rgba(247,185,85,0.32),
inset 0 1px 0 rgba(255,255,255,0.12) !important;
}
/* Group glass tiles: blue-teal top glow, dark base */
#pricing .os-glass-card--group {
background:
radial-gradient(120% 80% at 50% -10%, rgba(74,144,217,0.22) 0%, transparent 55%),
linear-gradient(165deg, #0d1722 0%, #0a1018 55%, #070b10 100%) !important;
border-color: rgba(74,144,217,0.3) !important;
}
#pricing .os-glass-card--group::after {
background: linear-gradient(90deg, transparent, rgba(74,144,217,0.85), transparent) !important;
}
#pricing .os-glass-card--group.os-glass-card--feat {
border-color: rgba(74,144,217,0.55) !important;
box-shadow:
0 26px 64px -16px rgba(2,18,16,0.6),
0 0 38px -10px rgba(74,144,217,0.25),
inset 0 1px 0 rgba(255,255,255,0.10) !important;
}
/* Dark glass cards -> force crisp white/grey text (group cards especially, since
their inline bg no longer matches the legacy #0a0f1a sweep). Brand accents kept. */
#pricing .os-glass-card,
#pricing .os-glass-card * {
color: rgba(255,255,255,0.92);
}
#pricing .os-glass-card [style*="line-through"] { color: rgba(255,255,255,0.45) !important; }