gets focus for skip-links; hide its outline */ } /* .container centres a block of content and caps its width. Used everywhere to keep text aligned to a consistent column. NOTE: never put a max-width or a margin shorthand on an element that also carries .container. Narrowing the box leaves margin-inline:auto centring it in the viewport instead of aligning it to the container edge, and `margin: 0` cancels the centring outright. Constrain the children instead. */ .container { /* Use the full width minus gutters, but never wider than --content-width. */ width: min(100% - (2 * var(--page-gutter)), var(--content-width)); margin-inline: auto; /* centre horizontally */ } /* .sr-only hides content visually but keeps it for screen readers (used for labels like "Open navigation"). Do not change unless you know the pattern. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* The "Skip to content" link: hidden off-screen (translated up) until a keyboard user tabs to it, then it slides into view. */ .skip-link { position: fixed; z-index: 1000; /* above everything */ top: 0.75rem; left: 0.75rem; padding: 0.75rem 1rem; color: var(--color-ink); background: var(--color-gold); font-weight: 700; text-decoration: none; transform: translateY(-160%); /* parked off-screen above the top */ transition: transform var(--transition); } .skip-link:focus { transform: translateY(0); /* slide into view when focused */ } /* ---- 3. HEADER / NAVIGATION ------------------------------------------------- The shell wraps the header and handles the "hide on scroll down" slide (toggled by layout.js adding/removing .is-hidden). */ .site-header-shell { position: sticky; /* stays pinned to the top as you scroll */ z-index: 100; top: 0; transition: transform 240ms var(--ease-out); will-change: transform; /* hint the browser to prep for the slide */ } .site-header-shell.is-hidden { transform: translateY(calc(-100% - 1px)); /* slide fully out of view (plus 1px for the border) */ } /* Keyboard focus must never wait for the slide animation to finish before the focused navigation control becomes visible — so snap it back instantly. */ .site-header-shell:focus-within { transform: none; transition: none; } /* The dark bar itself. */ .site-header { position: relative; color: var(--color-paper); background: rgba(17, 17, 17, 0.98); /* near-solid black, slightly translucent */ border-bottom: 1px solid var(--color-line); } /* The flex row inside the header: brand on the left, nav on the right. */ .header__inner { min-height: var(--header-height); display: flex; align-items: center; justify-content: space-between; /* push brand and nav apart */ gap: 2rem; } /* The "RMETA" brand/logo link. */ .brand { flex: 0 0 auto; /* never shrink or grow */ display: inline-flex; align-items: center; min-height: 3rem; color: var(--color-paper); text-decoration: none; } .brand__text { display: grid; /* stack the name over the tagline */ gap: 0.05rem; } /* The big "RMETA" wordmark. */ .brand__text strong { font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; letter-spacing: -0.045em; /* tighten the letters */ } /* The small tagline under the wordmark. */ .brand__text small { color: var(--color-gold-light); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.095em; line-height: 1.25; text-transform: uppercase; } /* The horizontal list of nav links. */ .primary-nav { display: flex; align-items: center; gap: clamp(0.3rem, 1vw, 1rem); /* spacing scales a little with width */ } /* Each nav link and the dropdown toggle share this base style. */ .primary-nav > a, .nav-dropdown__toggle { position: relative; /* so the underline pseudo-element can position */ min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0 0.55rem; color: #f2f2f2; background: transparent; border: 0; font-size: 0.79rem; font-weight: 600; letter-spacing: 0.025em; text-decoration: none; cursor: pointer; transition: color var(--transition); } /* The gold underline under each nav link — hidden (scaleX 0) until hover. */ .primary-nav > a:not(.register-link)::after, .nav-dropdown__toggle::after { content: ""; position: absolute; right: 0.55rem; bottom: 0.28rem; left: 0.55rem; height: 2px; background: var(--color-gold); transform: scaleX(0); /* collapsed by default */ transform-origin: right; transition: transform var(--transition); } /* On hover / focus / current page: turn the link gold. */ .primary-nav > a:hover, .primary-nav > a:focus-visible, .primary-nav > a[aria-current="page"], .nav-dropdown__toggle:hover, .nav-dropdown__toggle:focus-visible, .nav-dropdown__toggle.is-current, .nav-dropdown__toggle[aria-expanded="true"] { color: var(--color-gold-light); } /* ...and grow the underline out from the left. */ .primary-nav > a:hover::after, .primary-nav > a:focus-visible::after, .primary-nav > a[aria-current="page"]::after, .nav-dropdown__toggle:hover::after, .nav-dropdown__toggle:focus-visible::after, .nav-dropdown__toggle.is-current::after, .nav-dropdown__toggle[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; } /* The filled gold "Register" button in the nav. (!important overrides the shared nav-link styles above.) */ .register-link { margin-left: 0.25rem; padding-inline: 1.1rem !important; color: var(--color-ink) !important; background: var(--color-gold) !important; border: 1px solid var(--color-gold); transition: color var(--transition), background var(--transition) !important; } /* Register button on hover: invert to outline style. */ .register-link:hover, .register-link:focus-visible { color: var(--color-paper) !important; background: transparent !important; } /* The "ETA Ecosystem" dropdown wrapper (positions the menu below it). */ .nav-dropdown { position: relative; } .nav-dropdown__toggle { gap: 0.35rem; touch-action: manipulation; /* faster tap response, no double-tap zoom */ } /* The little chevron arrow in the dropdown toggle. */ .nav-dropdown__toggle svg { width: 0.75rem; transition: transform var(--transition); } /* Flip the chevron upside-down when the dropdown is open. */ .nav-dropdown__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* The dropdown panel itself: floats below the toggle, hidden until opened. */ .nav-dropdown__menu { position: absolute; top: calc(100% + 0.65rem); /* just below the toggle */ right: 0; width: 16rem; padding: 0.55rem; margin: 0; list-style: none; color: var(--color-paper); background: var(--color-ink); border: 1px solid var(--color-line); box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.25); opacity: 0; /* hidden state... */ visibility: hidden; transform: translateY(-0.4rem); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } /* ...shown state (is-open added by layout.js). */ .nav-dropdown__menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Each link inside the dropdown. */ .nav-dropdown__menu a { min-height: 2.75rem; display: flex; align-items: center; padding: 0.65rem 0.8rem; color: #eeeeee; font-size: 0.86rem; text-decoration: none; touch-action: manipulation; transition: color var(--transition), background var(--transition); } /* Dropdown link hover/current: gold background, dark text. */ .nav-dropdown__menu a:hover, .nav-dropdown__menu a:focus-visible, .nav-dropdown__menu a[aria-current="page"] { color: var(--color-ink); background: var(--color-gold); } /* The mobile hamburger button. Hidden on desktop (display:none), shown at the narrow breakpoint further down. Its two s are the bars. */ .menu-toggle { width: 3rem; height: 3rem; display: none; /* revealed in the @media (max-width:1180px) block */ touch-action: manipulation; place-content: center; gap: 0.4rem; padding: 0; color: var(--color-paper); background: transparent; border: 1px solid var(--color-line); cursor: pointer; } /* The two hamburger bars. */ .menu-toggle span:not(.sr-only) { width: 1.25rem; height: 1px; display: block; background: currentColor; transition: transform var(--transition); } /* When open, cross the two bars into an "X". */ .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(0.22rem) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.22rem) rotate(-45deg); } /* The main content area of each interior page (min height so short pages still fill the screen). */ .page-canvas { min-height: clamp(30rem, calc(100dvh - var(--header-height)), 58rem); background: var(--color-paper); outline: none; } /* ---- 5. FOOTER -------------------------------------------------------------- Dark footer, built by layout.js. */ .site-footer { color: var(--color-paper); background: var(--color-ink); } /* Top part of the footer: identity block + the three link columns, side by side. */ .footer__main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2fr); /* identity | nav */ gap: clamp(3rem, 8vw, 8rem); padding-block: clamp(4rem, 7vw, 7rem); } .footer__identity { align-self: start; } /* The large brand mark in the footer. */ .brand--footer { margin-bottom: 2rem; } .brand--footer .brand__text strong { font-size: clamp(2.75rem, 5vw, 4.75rem); /* much bigger than the header logo */ } .brand--footer .brand__text small { max-width: 20rem; font-size: 0.7rem; } /* The "November 7, 2026 / venue address" block. */ .footer__event { margin: 0; color: var(--color-muted); font-size: 0.92rem; } /* The little uppercase date label above the address. */ .footer__event strong { display: block; margin-bottom: 0.35rem; color: var(--color-gold-light); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; } /* The venue name doubles as the map link wherever it appears in a fact list or a sentence. Underlined at a distance so it reads as a link inside otherwise plain text, and it picks up gold on approach like every other link on the site. */ .venue-link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color 260ms var(--ease-out); } /* Venue link hover → gold. */ .venue-link:hover, .venue-link:focus-visible { color: var(--story-gold); } /* The footer address is also the map link: plain until hovered, then underlined. */ .footer__event a { color: inherit; text-decoration: none; transition: color 260ms var(--ease-out); } .footer__event a:hover, .footer__event a:focus-visible { color: var(--color-gold-light); text-decoration: underline; text-underline-offset: 0.2em; } /* The three footer link columns. */ .footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } /* Each footer column stacks its heading + links. */ .footer__nav section { display: grid; align-content: start; gap: 0.75rem; } /* The uppercase heading atop each footer column. */ .footer__nav h2 { padding-bottom: 0.8rem; margin: 0 0 0.25rem; color: var(--color-gold-light); border-bottom: 1px solid var(--color-line); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } /* Footer column links. */ .footer__nav a { width: fit-content; /* underline only spans the text */ color: #e2e2e2; font-size: 0.9rem; text-decoration: none; transition: color var(--transition); } .footer__nav a:hover, .footer__nav a:focus-visible { color: var(--color-gold-light); } /* The bottom strip: credit, social icons, legal links. */ .footer__bottom { min-height: 5.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1rem; border-top: 1px solid var(--color-line); } .footer__bottom p { margin: 0; color: var(--color-muted); font-size: 0.75rem; } /* Privacy link, the cookie-settings control, and the copyright share the closing line (right-aligned). */ .footer__legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem 1.25rem; } .footer__legal a, .footer__legal .footer__linkish { color: inherit; text-underline-offset: 0.2em; transition: color 260ms var(--ease-out); } .footer__legal a:hover, .footer__legal a:focus-visible, .footer__legal .footer__linkish:hover, .footer__legal .footer__linkish:focus-visible { color: var(--color-gold-light); } /* The "Cookie settings" control is a