/* Roboto + EB Garamond are loaded via a in every page's own
(preceded by two tags), not an @import here — @import is discovered only
after this whole file downloads and parses, forcing a second sequential round trip before the
font CSS even starts fetching. A in is discovered by the browser's preloader
immediately, in parallel with this file, cutting a full round trip off first paint. Moved
2026-08-04. EB Garamond is an open-source stand-in for Adobe Garamond Pro (licensed, not
available) — used for presenter business nameplates where the logo is image-only. */
:root{
--orange: #F17923;
--orange-link: #B84300;
--orange-hover: #853000;
/* Label color for text sitting on a solid --orange fill. White on #F17923 measures only
2.80:1, failing WCAG AA (4.5:1) and even the 3:1 large-text threshold, so no font size
rescues it. This near-black brown hits 5.06:1 on the same orange, which keeps the brand
fill exactly as-is instead of darkening it — the alternative (darkening the fill to
--orange-link for white text) would have made the hero CTA nearly vanish against the
hero's own dark scrim, and would have broken again on the :hover white glaze below.
Fixed, not theme-aware, for the same reason --white is: --orange never changes either. */
--on-orange: #302A24;
--brown: #4F463D;
--header-bar: #333333;
--bg-neutral: #EEEEEE;
--white: #FFFFFF;
--card-shadow: 0px 4px 15px rgba(0,0,0,0.18);
--radius: 10px;
--max-width: 1180px;
/* Theme-aware tokens — light values here, dark overrides below. --white and --header-bar are
deliberately NOT theme-aware: they're used for elements that stay fixed regardless of the
toggle (header bar, footer, button text on colored backgrounds, partner/brand-kit logo chips). */
--page-bg: #FFFFFF;
--surface: #FFFFFF;
--text-primary: var(--brown);
--text-secondary: #6b6259;
/* Darkened from #9a9186 2026-08-04 — the original only hit a 3.10:1 contrast ratio against
white (4.5:1 needed for normal text), flagged by Lighthouse/axe. This value hits 5.25:1 on
white and 4.53:1 on --bg-neutral (#EEEEEE, the other background this token appears against),
both with real margin, fixing every --text-muted usage sitewide from one token — dark mode's
own --text-muted below already passed (5.48:1 / 4.57:1) and didn't need changing. */
--text-muted: #726b63;
}
:root[data-theme="dark"]{
--bg-neutral: #201c1a;
--page-bg: #181513;
--surface: #2a2521;
--text-primary: #f3ede7;
--text-secondary: #c4bcb2;
--text-muted: #948c82;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin: 0;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
color: var(--text-primary);
background: var(--page-bg);
transition: background-color 0.2s ease, color 0.2s ease;
}
img{ max-width: 100%; display: block; }
a{ color: var(--orange-link); }
a:hover{ color: var(--orange-hover); }
h1, h2, h3{
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 700;
color: var(--text-primary);
margin: 0;
}
.wrap{ max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.visually-hidden{
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap;
}
/* ---------- header / nav ---------- */
/* White, not --header-bar: the horizontal lockup's wordmark is a muted brown tuned for a light
background (print/business-card style) and reads poorly on dark. The vertical lockup used in
the footer IS a white-knockout mark, so that stays on --header-bar. */
.site-header{
background: var(--surface);
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
position: sticky; top: 0; z-index: 100;
transition: background-color 0.2s ease;
}
.site-header .wrap{
display: flex; align-items: center; justify-content: space-between;
padding-top: 12px; padding-bottom: 12px; gap: 20px;
}
.site-header .logo img{ height: 44px; width: auto; }
/* Two logo files, one shown at a time via data-theme — same "both in the DOM, CSS picks one"
approach as the theme-toggle's sun/moon icons, so there's no JS swap and no flash on load (the
inline head script sets data-theme before first paint). Was a fixed var(--white) bar in every
theme until 2026-08-01 — reads as blindingly high-contrast sitting above an otherwise dark page,
so the header now follows the same var(--surface) dark background every card already uses. */
.site-header .logo .logo-dark{ display: none; }
:root[data-theme="dark"] .site-header .logo .logo-light{ display: none; }
:root[data-theme="dark"] .site-header .logo .logo-dark{ display: block; }
.main-nav{ display: flex; align-items: center; gap: 28px; }
.main-nav ul{ list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.main-nav a{
color: var(--text-primary); text-decoration: none; font-weight: 500; font-size: 0.95rem;
}
.main-nav a:hover{ color: var(--orange-link); }
.main-nav a.active{ color: var(--orange-link); font-weight: 700; }
/* Light-switch style, sun/moon icons living inside the track itself with a sliding thumb that
sits behind whichever one is current — matching RopeCobra's actual finish this time: a subtle
bordered track (neutral, not a loud color, in either mode) and a thumb that always carries the
brand accent color, rather than a plain white circle that never picks up any brand identity. */
.theme-toggle{ background: none; border: none; cursor: pointer; padding: 4px; }
.theme-toggle-track{
position: relative; display: flex; align-items: center; justify-content: space-between;
width: 54px; height: 28px; padding: 0 6px; border-radius: 999px;
background: var(--bg-neutral); border: 1px solid rgba(0,0,0,0.14);
transition: background-color 0.2s ease, border-color 0.2s ease;
}
:root[data-theme="dark"] .theme-toggle-track{ background: var(--surface); border-color: rgba(255,255,255,0.14); }
.theme-toggle-track svg{ width: 14px; height: 14px; position: relative; z-index: 1; flex-shrink: 0; }
/* These set `color`, not `fill`, on purpose: the icons are RopeCobra's own pair, and the sun is a
*stroked* ring (fill:none, stroke:currentColor) while the moon is a *filled* crescent
(fill:currentColor). `fill` would leave the stroked sun completely uncolored — `color` is the
one property that reaches both through currentColor.
Whichever icon is riding the thumb reads against orange (white does that cleanly); whichever
is sitting bare on the track reads against a neutral — dark ink on light, light ink on dark. */
/* The two glyphs fill their shared 24×24 viewBox very differently — the sun's rays reach nearly
edge to edge (~22 units) while the crescent only spans ~16.7 — so at an identical box size the
moon renders ~32% smaller and looks lost inside the thumb. Scale it up to match the sun
optically. A transform doesn't affect layout, so the flex centering and the thumb alignment
both stay exactly where they were.
The crescent's ink also sits a hair off-center inside its own viewBox (its shape is asymmetric),
which scaling amplifies — the leading translate cancels that out so the active icon lands dead
center in the thumb. Written before scale(), so it resolves in final pixels, not scaled units. */
.theme-toggle-track .icon-moon{ transform: translate(0.26px, -0.26px) scale(1.32); }
.theme-toggle-track .icon-sun{ color: #fff; }
.theme-toggle-track .icon-moon{ color: var(--brown); }
:root[data-theme="dark"] .theme-toggle-track .icon-sun{ color: var(--text-muted); }
:root[data-theme="dark"] .theme-toggle-track .icon-moon{ color: #fff; }
.theme-toggle-thumb{
position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%;
background: var(--orange); box-shadow: 0 1px 3px rgba(0,0,0,0.35);
transition: transform 0.2s ease;
}
:root[data-theme="dark"] .theme-toggle-thumb{ transform: translateX(26px); }
.hamburger-btn{
background: none; border: 2px solid var(--text-primary); border-radius: 6px;
width: 34px; height: 30px; cursor: pointer; position: relative; flex-shrink: 0;
}
/* Bar positions are computed from the button's own height/width so shrinking this box later
doesn't require re-deriving the centering by hand: middle bar at (height-thickness)/2. Absolute
positioning here is relative to the padding box, which (with box-sizing:border-box) excludes
the 2px border on each side — so the available height is 30-4=26px, not the full 30px; top:12px
(not 14px) is what actually centers a 2px bar in that 26px space.
var(--text-primary), not the fixed var(--brown) this used before 2026-08-01 — the header can now
go dark (see .site-header above), and a fixed dark-brown border/bars would disappear against it. */
.hamburger-btn span{
position: absolute; left: 7px; right: 7px; top: 12px; height: 2px; background: var(--text-primary);
}
.hamburger-btn span::before, .hamburger-btn span::after{
content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--text-primary);
}
.hamburger-btn span::before{ top: -5px; }
.hamburger-btn span::after{ top: 5px; }
.hamburger-menu{
position: absolute; right: 24px; top: 100%; background: var(--surface);
border-radius: var(--radius); box-shadow: var(--card-shadow);
padding: 10px 0; min-width: 220px; display: none; flex-direction: column;
}
.hamburger-menu.open{ display: flex; }
.hamburger-menu a.active{ background: var(--bg-neutral); color: var(--orange-link); font-weight: 700; }
.hamburger-menu a{
padding: 10px 20px; text-decoration: none; color: var(--text-primary); font-weight: 500;
}
.hamburger-menu a:hover{ background: var(--bg-neutral); color: var(--orange-link); }
/* .hamburger-primary mirrors .main-nav ul's own links exactly (see every page's header markup) —
hidden above 820px since they're already visible directly in the top nav there, so showing them
again in the dropdown would just be redundant. Below 820px (the same breakpoint that hides
.main-nav ul), the hamburger becomes the *only* nav affordance on the page, so it needs to carry
the full set — without this, About/Presenters/When & Where/Partners/Team/FAQ have no way to be
reached at all on a phone or tablet once the top nav disappears (only the secondary/utility
links below ever lived in the hamburger before this). */
.hamburger-primary{ display: none; flex-direction: column; }
/* Wrapping the existing secondary links in their own div (to sit alongside .hamburger-primary)
took them out of .hamburger-menu's own flex-column context, so without this they'd fall back to
plain inline flow and wrap sideways instead of stacking — same vertical layout as before. */
.hamburger-secondary{ display: flex; flex-direction: column; }
@media (max-width: 820px){
.main-nav ul{ display: none; }
.hamburger-primary{ display: flex; }
.hamburger-secondary{ border-top: 1px solid var(--bg-neutral); margin-top: 6px; padding-top: 6px; }
}
/* ---------- share / add-to-calendar action trays (js/actions.js) ---------- */
/* Generic popover shared by every [data-share-btn] and [data-calendar-btn] trigger — same
open/close mechanic as .hamburger-menu just above (display:none -> .open{display:flex}), so
dark mode is free from the same tokens every other popover on the site already uses.
js/actions.js inserts the tray as the trigger