/* =================================================================== topnav.css — shared top navigation for non-index pages. Mirrors index's topnav: brand-lockup with arc-lamp dot, Newsreader italic OpenSSL + uppercase Conference + filament date. =================================================================== */ /* ============================================================ FOOTER GREEN-BOOK SIZE — site-wide enforcement. Some pages don't link footer.css and don't carry the inline .foot-brand-mark rule from index.html, leaving the sketch loader's auto-rendered SVG to render at its intrinsic ~300×300px. Lock the size here (loaded on every page) so every footer green-book mark matches the index/mission size. ============================================================ */ .foot-brand-mark { width: 96px !important; height: 120px !important; } /* ============================================================ UNIVERSAL — kill horizontal overflow site-wide. Every page on this site uses generous editorial widths; without this rule a single overflowing element (a stretched SVG, a wide image, an absolutely-positioned firefly) causes the entire page to be horizontally scrollable, which makes users on smaller windows feel they "can't see the whole site". This is a defensive guard, applied at the document root. Sidebar — `overflow-x: hidden` on body makes a scroll container, which silently disables `position: sticky` on every descendant. We do NOT swap to `overflow: clip` here because that pattern interacted badly with the rest of the layout on speakers.html (vertical scrolling stopped, header bumped). Any sticky element on a page that loads topnav.css MUST therefore use a JS-toggled `position: fixed` pattern (see speakers-chapter.js az-rail handler) instead of relying on `position: sticky`. ============================================================ */ html, body { overflow-x: hidden; max-width: 100%; } /* Catch wide images/embeds — make sure they never push past the viewport */ img, video, iframe, svg { max-width: 100%; } /* Scoped to nav.topnav (NOT :root) — otherwise these tokens leak site-wide and override the brand --paper-warm to gilt, turning every body paragraph gold. Confirmed bug: was at :root, made body copy unreadable on tier cards / offer cards / __lr-target. */ nav.topnav { --paper-warm: #E5C77A; --filament: #E5C77A; --filament-d: #B68A3E; --rule: rgba(60,40,10,0.18); --muted: rgba(40,28,12,0.55); } .topnav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 36px; padding: 22px 48px 22px 64px; background: linear-gradient(to bottom, rgba(244,236,218,0.94), rgba(244,236,218,0.78) 70%, rgba(244,236,218,0)); border-bottom: 1px solid rgba(40,28,12,0.06); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .topnav .brand { position: relative; display: inline-flex; align-items: center; gap: 0; padding-left: 16px; text-decoration: none; color: var(--ink, #1A1208); font-family: 'Newsreader', Georgia, serif; font-style: italic; font-weight: 300; font-size: 22px; letter-spacing: -0.01em; line-height: 1; } /* warm pulsing halo behind the lockup — breathes on a 4.6s cycle to match the arc-lamp dot. Brought in from the per-page inline topnav styles (mission/dinners/etc) so journal-family pages get the same rim treatment instead of a static halo. */ .topnav .brand::before { content: ''; position: absolute; left: -10px; top: -2px; width: 96px; height: 56px; background: radial-gradient(ellipse 50% 60% at 22% 38%, rgba(255, 214, 107, 0.55) 0%, rgba(255, 214, 107, 0.22) 38%, transparent 72%); filter: blur(14px); pointer-events: none; z-index: 0; animation: __brand-halo-breathe-tn 4.6s ease-in-out infinite; } @keyframes __brand-halo-breathe-tn { 0%, 100% { opacity: 0.78; transform: scale(1); filter: blur(14px) brightness(1); } 50% { opacity: 1.05; transform: scale(1.06); filter: blur(14px) brightness(1.18); } } .topnav .brand .mark, .topnav .brand .brand-lockup { position: relative; z-index: 1; } /* The arc-lamp dot — sits over the cap of the "O" in OpenSSL */ .topnav .brand .mark { width: 10px; height: 10px; border: 0; border-radius: 50%; position: absolute; left: 11px; top: 4px; background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFE9A8 22%, #FFB73D 50%, #D17A0A 78%, rgba(122,63,5,0) 100%); box-shadow: 0 0 4px rgba(255,255,240,1), 0 0 12px rgba(255,200,90,1), 0 0 28px rgba(220,130,30,0.85), 0 0 56px rgba(180,90,20,0.50); animation: __arc-lamp-breathe-tn 4.6s ease-in-out infinite; } .topnav .brand .mark::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%); background: radial-gradient(circle, #FFFFFF 0%, #FFEFB8 60%, transparent 100%); border-radius: 50%; filter: blur(0.4px); /* inner-pip flicker — faster than the halo breath so the lamp feels lit, not pulsed. */ animation: __arc-lamp-core-tn 2.1s ease-in-out infinite; } /* orbiting spark — a tiny off-axis bead that drifts around the lamp. Same effect that mission/dinners/etc inline. */ .topnav .brand .mark::before { content: ''; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; background: #FFE9A8; border-radius: 50%; box-shadow: 0 0 4px #FFE9A8, 0 0 10px rgba(255,214,107,0.8); transform-origin: -14px center; animation: __arc-spark-orbit-tn 5.8s linear infinite; pointer-events: none; } @keyframes __arc-lamp-core-tn { 0%, 100% { opacity: 0.92; transform: translate(-50%, -50%) scale(1); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); } 50% { opacity: 0.78; transform: translate(-50%, -50%) scale(0.92); } 65% { opacity: 1; transform: translate(-50%, -50%) scale(1.10); } } @keyframes __arc-spark-orbit-tn { 0% { transform: translate(0, -1px) rotate(0deg) translateX(14px); opacity: 0; } 8% { opacity: 1; } 50% { transform: translate(0, -1px) rotate(180deg) translateX(14px); opacity: 0.85; } 92% { opacity: 0; } 100% { transform: translate(0, -1px) rotate(360deg) translateX(14px); opacity: 0; } } /* Respect reduced-motion — kill the breathing/flicker/orbit so the lamp goes quiet for visitors who've opted out of motion. */ @media (prefers-reduced-motion: reduce) { .topnav .brand::before, .topnav .brand .mark, .topnav .brand .mark::after, .topnav .brand .mark::before { animation: none !important; } .topnav .brand .mark::before { opacity: 0; } } @keyframes __arc-lamp-breathe-tn { 0%, 100% { transform: scale(1); box-shadow: 0 0 4px rgba(255,255,240,1), 0 0 12px rgba(255,200,90,1), 0 0 28px rgba(220,130,30,0.85), 0 0 56px rgba(180,90,20,0.50); } 50% { transform: scale(1.10); box-shadow: 0 0 6px rgba(255,255,240,1), 0 0 18px rgba(255,210,110,1), 0 0 42px rgba(230,140,30,1), 0 0 88px rgba(190,100,20,0.70); } } /* Lockup column: OpenSSL row + Conference/dates row */ .topnav .brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; white-space: nowrap; } .topnav .brand-name { display: inline-flex; align-items: baseline; gap: 12px; font-family: 'Newsreader', Georgia, serif; line-height: 1; color: var(--ink, #1A1208); } .topnav .brand-roman { font-style: italic; font-weight: 400; font-size: 26px; letter-spacing: -0.018em; color: var(--ink, #1A1208); text-shadow: 0 1px 0 rgba(255,237,200,0.6), 0 0 18px rgba(182,138,62,0.16); } .topnav .brand-event { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; transform: translateY(-1px); } .topnav .brand-em { font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink, #1A1208); transform: translateY(-1px); } .topnav .brand-dates { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--filament); line-height: 1; text-shadow: 0 0 10px rgba(255, 214, 107, 0.35); position: relative; } .topnav .brand-dates::before { content: ''; display: block; width: 100%; height: 1px; background: linear-gradient(to right, rgba(229, 199, 122, 0) 0%, rgba(229, 199, 122, 0.45) 18%, rgba(229, 199, 122, 0.45) 82%, rgba(229, 199, 122, 0) 100%); margin-bottom: 5px; } /* Links */ .topnav .links { display: flex; gap: 20px; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(26, 18, 8, 0.88); font-weight: 600; } .topnav .links a { color: inherit; text-decoration: none; transition: color 160ms ease; position: relative; } .topnav .links a:hover, .topnav .links a.is-active { color: var(--ink, #1A1208); } .topnav .links a.is-active { background: rgba(74,107,92,0.10); padding: 4px 10px; border-radius: 2px; } .topnav .links a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: #4A6B5C; } .topnav .right { display: flex; align-items: center; gap: 18px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); font-weight: 500; } /* Brass-plate Reserve button */ .topnav .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid rgba(40,18,2,0.55); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; background: linear-gradient(150deg, #6B4910 0%, #B68A3E 14%, #E8C572 38%, #B68A3E 58%, #8A6620 82%, #6B4910 100%); color: #2A1A06; text-shadow: 0 -1px 0 rgba(40,18,2,0.35), 0 1px 0 rgba(255,243,200,0.45); box-shadow: inset 0 1px 0 rgba(255,243,200,0.55), inset 0 -1px 0 rgba(40,18,2,0.55), 0 6px 14px rgba(40,28,8,0.28); transition: transform 140ms ease, filter 140ms ease; position: relative; overflow: hidden; } .topnav .btn:hover { filter: brightness(1.06); transform: translateY(-1px); } @media (max-width: 720px) { .topnav { padding: 16px 20px; gap: 16px; } .topnav .brand-dates { display: none; } } /* ============================================================ MOBILE TOPNAV — hamburger toggle + slide-in drawer The toggle button + drawer chrome are injected by topnav-mobile.js. Desktop styling above stays untouched at >960px; this block kicks in at ≤960px. ============================================================ */ /* Hide the button by default (desktop) — JS adds it, CSS hides it */ .topnav .topnav-toggle { display: none; } .topnav .topnav-drawer-close { display: none; } .topnav-backdrop { display: none; } @media (max-width: 960px) { /* Switch nav off the desktop 3-col grid (brand | links | right) and into flex so the injected reload + hamburger buttons + brand can line up on the left, with the drawer behaving as an overlay. */ .topnav { display: flex !important; align-items: center !important; gap: 10px !important; padding: 14px 20px !important; justify-content: flex-start !important; } /* Brand pushes to the right of the toggle buttons */ .topnav .brand { margin-left: auto !important; margin-right: 0 !important; } /* Reveal the hamburger button on narrow widths */ .topnav .topnav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: transparent; border: 1px solid var(--rule-2, rgba(40,28,12,0.22)); cursor: pointer; padding: 0; margin-right: 4px; transition: border-color 200ms ease, background 200ms ease; z-index: 80; border-radius: 2px; color: var(--ink, #1A1208); } .topnav .topnav-toggle:hover { border-color: var(--filament, #B68A3E); background: rgba(229,199,122,0.10); } .topnav .topnav-toggle-bars { display: inline-flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; width: 18px; } .topnav .topnav-toggle-bars > span { display: block; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 220ms ease, opacity 200ms ease; transform-origin: center; } /* Animated bars → X when drawer is open */ body.topnav-open .topnav .topnav-toggle-bars > span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } body.topnav-open .topnav .topnav-toggle-bars > span:nth-child(2) { opacity: 0; } body.topnav-open .topnav .topnav-toggle-bars > span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* The drawer — slides in from the right, full-height, cream paper. Above the body, below modals if any. */ .topnav .topnav-drawer { /* override the desktop inline-flex row */ position: fixed !important; top: 0; right: 0; bottom: 0; height: 100dvh; width: min(360px, 86vw); background: var(--paper, #FBF5E5); border-left: 1px solid var(--rule-2, rgba(40,28,12,0.22)); box-shadow: -20px 0 48px -24px rgba(40,28,12,0.35); z-index: 90; display: flex !important; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding: 84px 0 32px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* hidden by default; transform on for slide */ transform: translateX(100%); transition: transform 320ms cubic-bezier(0.4, 0.0, 0.2, 1); visibility: hidden; } /* When the drawer is open, lift the entire .topnav above the backdrop. The topnav is position:fixed z-index:50, which forms its own stacking context — so the drawer's z-index:90 only beats things INSIDE the topnav. The backdrop sits on document.body at z:85 and would otherwise render above the topnav (and therefore above the drawer), swallowing every tap on the menu links. */ body.topnav-open .topnav { z-index: 95 !important; } body.topnav-open .topnav .topnav-drawer { transform: translateX(0); visibility: visible; } /* Backdrop behind the drawer */ .topnav-backdrop { display: block; position: fixed; inset: 0; background: rgba(40, 28, 12, 0.4); z-index: 85; opacity: 0; visibility: hidden; transition: opacity 320ms ease, visibility 0s linear 320ms; } body.topnav-open .topnav-backdrop { opacity: 1; visibility: visible; transition: opacity 320ms ease, visibility 0s; } body.topnav-open { overflow: hidden; } /* Drawer close button — small × in the top-right of the drawer */ .topnav .topnav-drawer-close { display: inline-flex !important; align-items: center; justify-content: center; position: absolute; top: 20px; right: 16px; width: 36px; height: 36px; background: transparent; border: 1px solid var(--rule-2, rgba(40,28,12,0.22)); color: var(--ink, #1A1208); font-size: 22px; line-height: 1; cursor: pointer; padding: 0; z-index: 2; transition: border-color 200ms ease, background 200ms ease; } .topnav .topnav-drawer-close:hover { border-color: var(--filament, #B68A3E); background: rgba(229,199,122,0.10); } /* Drawer links — full-width stacked rows */ .topnav .topnav-drawer a, .topnav .topnav-drawer .nav-sub > .sub-toggle { display: block !important; padding: 16px 32px !important; font-family: 'Newsreader', Georgia, serif !important; font-style: italic !important; font-weight: 400 !important; font-size: 22px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink, #1A1208) !important; border-bottom: 1px solid var(--rule, rgba(40,28,12,0.10)); line-height: 1.2; background: transparent !important; border-radius: 0 !important; } .topnav .topnav-drawer a::after { display: none !important; } .topnav .topnav-drawer a:hover, .topnav .topnav-drawer .nav-sub > .sub-toggle:hover { background: rgba(229, 199, 122, 0.08) !important; color: var(--filament-d, #8a6620) !important; } .topnav .topnav-drawer a.is-active { background: rgba(74,107,92,0.10) !important; color: var(--ink, #1A1208) !important; padding: 16px 32px !important; } /* Sub-menus inside the drawer — render inline (not floating) */ .topnav .topnav-drawer .nav-sub { position: relative; display: block !important; align-items: stretch !important; } .topnav .topnav-drawer .nav-sub > .sub-toggle { padding-right: 56px !important; position: relative; } .topnav .topnav-drawer .nav-sub > .sub-toggle::after { content: '+'; position: absolute; right: 32px; top: 50%; transform: translateY(-50%); width: 14px; height: auto; border: 0 !important; background: transparent !important; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 22px; color: var(--filament-d, #8a6620); line-height: 1; } .topnav .topnav-drawer .nav-sub-menu { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; background: rgba(229, 199, 122, 0.06) !important; border: 0 !important; border-top: 1px solid var(--rule, rgba(40,28,12,0.10)) !important; padding: 0 !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } .topnav .topnav-drawer .nav-sub-menu a { padding: 12px 32px 12px 48px !important; font-size: 16px !important; font-style: normal !important; border-bottom: 1px solid var(--rule, rgba(40,28,12,0.10)) !important; } .topnav .topnav-drawer .nav-sub-menu a .sm-k { display: block; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 17px; color: var(--ink, #1A1208); margin-bottom: 2px; } .topnav .topnav-drawer .nav-sub-menu a .sm-d { display: block; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2, rgba(40,28,12,0.42)); margin-top: 2px; } .topnav .topnav-drawer .nav-sub-menu hr { margin: 0; border: 0; border-top: 1px dashed var(--rule, rgba(40,28,12,0.10)); } /* The "Reserve a seat" right-side button — pulled into the drawer for narrow viewports so it doesn't overflow the header. */ .topnav .right { display: none; } /* Provide a clear reserve CTA at the bottom of the drawer. We add a duplicate Reserve button via JS would be cleaner, but for now relying on the user reaching "Register" in the drawer is acceptable. */ } @media (max-width: 720px) { /* Tighter padding inside the drawer at very narrow widths */ .topnav { padding: 12px 16px; } .topnav .topnav-drawer a, .topnav .topnav-drawer .nav-sub > .sub-toggle { padding: 14px 24px !important; font-size: 20px !important; } .topnav .topnav-drawer .nav-sub-menu a { padding: 10px 24px 10px 40px !important; } } /* ============================================================ CFP nav link — pulsing verdigris/filament dot ============================================================ */ nav.topnav .links a.cfp-link { display: inline-flex; align-items: center; gap: 8px; } nav.topnav .links a.cfp-link::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #FFFFFF 0%, #FFE9A8 18%, #FFB73D 45%, #C97A0E 80%, rgba(120,50,5,0) 100%); box-shadow: 0 0 3px rgba(255,255,240,1), 0 0 8px rgba(255,200,90,0.95), 0 0 18px rgba(220,130,30,0.7), 0 0 36px rgba(180,90,20,0.4); animation: __cfp-spark 2.6s ease-in-out infinite; } @keyframes __cfp-spark { 0%, 100% { transform: scale(1); box-shadow: 0 0 3px rgba(255,255,240,1), 0 0 8px rgba(255,200,90,0.85), 0 0 18px rgba(220,130,30,0.55), 0 0 32px rgba(180,90,20,0.30); } 50% { transform: scale(1.18); box-shadow: 0 0 5px rgba(255,255,240,1), 0 0 14px rgba(255,210,110,1), 0 0 28px rgba(230,140,30,0.85), 0 0 56px rgba(190,100,20,0.55); } } /* ============================================================ Register dropdown — submenu under Register link ============================================================ */ nav.topnav .links .nav-sub { position: relative; display: inline-flex; align-items: center; } nav.topnav .links .nav-sub > .sub-toggle { position: relative; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding-right: 0; color: inherit; text-decoration: none; } nav.topnav .links .nav-sub > .sub-toggle::after { content: ''; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid currentColor; opacity: 0.55; margin-left: 4px; transform: translateY(1px); } nav.topnav .links .nav-sub-menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 240px; background: var(--paper, #F4ECDA); border: 1px solid var(--rule-2, #C8A961); box-shadow: 0 12px 24px rgba(20,12,2,0.18); padding: 8px; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; z-index: 60; } nav.topnav .links .nav-sub:hover .nav-sub-menu, nav.topnav .links .nav-sub:focus-within .nav-sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } nav.topnav .links .nav-sub-menu a { display: grid; grid-template-columns: 1fr; padding: 10px 12px; text-decoration: none; color: var(--ink, #2A1B0A) !important; background: transparent !important; border: 0 !important; border-radius: 2px; line-height: 1.3; } nav.topnav .links .nav-sub-menu a::after { display: none !important; } nav.topnav .links .nav-sub-menu a:hover { background: rgba(74,107,92,0.08) !important; } nav.topnav .links .nav-sub-menu .sm-k { font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 16px; font-weight: 400; } nav.topnav .links .nav-sub-menu .sm-d { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted, #6B5A36); margin-top: 2px; } nav.topnav .links .nav-sub-menu hr { border: 0; border-top: 1px dashed var(--rule, rgba(60,40,10,0.18)); margin: 4px 6px; }