/* base.css ----------------------------------------------------------------------------- Purpose - One global token system (single palette applied site-wide). - Global primitives only: resets, container, buttons, focus, skip link. - Shared chrome only: header/nav, dropdowns, mobile drawer, modal, footer. - Does NOT own body section geometry or approved page shapes. */ :root{ /* Token defaults (fail-soft). base.js can override these on . */ --bg:#0b0f14; --surface: rgba(255,255,255,.04); --surface-2: rgba(255,255,255,.07); --text: rgba(255,255,255,.90); --text-muted: rgba(255,255,255,.68); --heading: rgba(255,255,255,.95); --accent:#b01117; --on-accent:#fff; --border: rgba(255,255,255,.12); --frame: rgba(255,255,255,.14); --focus: rgba(255,255,255,.85); /* Optional nav tokens */ --nav-text: var(--text); --nav-bg: transparent; --nav-border: transparent; --nav-hover-bg: color-mix(in srgb, var(--surface) 60%, transparent 40%); --nav-hover-border: var(--border); --nav-home-text: var(--text); --nav-home-bg: transparent; --nav-home-border: transparent; --nav-home-hover-bg: color-mix(in srgb, var(--surface) 60%, transparent 40%); --nav-home-hover-border: var(--border); /* Radius system */ --pill: 999px; --r1: 14px; --r2: 20px; /* Component radii */ --btn-radius: var(--pill); --tab-radius: var(--pill); /* Rails tuning */ --panel-radius: var(--r2); --card-radius: var(--r1); --nav-tab-radius: var(--r1); --nav-subtab-radius: var(--pill); --nav-dd-radius: var(--r1); --nav-shell-bg-mix: 65%; --nav-dd-bg-mix: 86%; --nav-dd-border-mix: 86%; --nav-dd-blur: 18px; --mobile-nav-bg-mix: 94%; --mobile-nav-blur: 18px; --brand-wordmark-h: 30px; --shadow: 0 22px 60px rgba(0,0,0,.42); /* Neutral shared width tokens */ --container-max: 1160px; --container-wide-max: 1320px; --container-pad: 18px; --readable-max: 92ch; /* Header height rail (measured by base.js) */ --site-header-h: 0px; /* Shared rhythm tokens consumed by body.css */ --section-y: clamp(18px, 3.2vw, 34px); --section-gap: 14px; } *{ box-sizing:border-box; } html,body{ height:100%; } html{ color: var(--text); background: var(--bg); scroll-padding-top: var(--site-header-h); } body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; line-height:1.65; background: var(--bg); color: var(--text); } main{ display:block; } a{ color: inherit; text-decoration:none; } a:hover{ text-decoration:none; } img,video{ max-width:100%; display:block; } .muted{ color: var(--text-muted); } .container{ width:100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } /* Skip link */ .skip-link{ position:absolute; left:-999px; top: 10px; z-index: 99999; padding: 10px 12px; border-radius: var(--pill); background: var(--accent); color: var(--on-accent); font-weight: 900; } .skip-link:focus{ left: 10px; outline: 3px solid var(--focus); outline-offset: 3px; } /* Focus-visible rail */ :focus-visible{ outline: 3px solid var(--focus); outline-offset: 3px; } /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 8px; font-weight: 950; font-size: 13px; padding: 10px 14px; border-radius: var(--btn-radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .btn:hover{ background: var(--surface-2); border-color: color-mix(in srgb, var(--border) 70%, #fff 30%); } .btn:disabled{ opacity:.55; cursor:not-allowed; } .btn-primary{ background: var(--accent); border-color: color-mix(in srgb, var(--accent) 72%, #fff 28%); color: var(--on-accent); } .btn-primary:hover{ background: color-mix(in srgb, var(--accent) 82%, #fff 18%); } .btn-ghost{ background: transparent; border-color: var(--border); } /* Shared header/nav skeleton (base.js fills markup) Fixed mode is used when nav.sticky is true so the header is not bounded by sticky ancestor limits. The outer host preserves layout space using the measured header height token from base.js. */ [data-site-header]{ position: relative; z-index: 14000; } html[data-nav-sticky="true"] [data-site-header]{ min-height: var(--site-header-h); } html[data-nav-sticky="false"] [data-site-header]{ min-height: 0; } .site-header{ position: relative; z-index: 14000; } html[data-nav-sticky="true"] .site-header{ position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 14000; } html[data-nav-sticky="false"] .site-header{ position: relative; } .nav-shell{ position: relative; z-index: 14020; background: color-mix(in srgb, var(--surface-2) var(--nav-shell-bg-mix), var(--bg)); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); } /* Brand left, nav centered, actions right */ .nav-inner{ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px 0; } /* Brand (logo + wordmark) */ .brand{ display:inline-flex; align-items:center; gap: 10px; min-width: 0; } .brand strong{ font-weight: 950; font-size: 13px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34ch; } .brand-icon{ width: 48px; height: 48px; border-radius: 12px; object-fit: contain; flex: 0 0 auto; } .brand-wordmark{ height: var(--brand-wordmark-h); width: auto; max-width: min(320px, 36vw); object-fit: contain; flex: 0 0 auto; } /* Center group */ .nav-links{ display:flex; align-items:center; justify-content: center; gap: 14px; min-width: 0; } /* Shared nav text/padding */ .nav-link{ display: inline-flex; align-items: center; justify-content: center; font-weight: 950; font-size: 13px; padding: 9px 12px; white-space: nowrap; border: 1px solid transparent; background: transparent; color: var(--nav-text, var(--text)); } .nav-button{ appearance: none; font: inherit; cursor: pointer; } /* Top-level hooks */ .nav-top-link{ border-radius: var(--nav-tab-radius); } html[data-nav-top-surface="pill"] .nav-top-link{ border-color: var(--nav-border, transparent); background: var(--nav-bg, transparent); } html[data-nav-top-surface="pill"] .nav-top-link:hover{ border-color: var(--nav-hover-border, var(--border)); background: var(--nav-hover-bg, color-mix(in srgb, var(--surface) 60%, transparent 40%)); } html[data-nav-top-surface="text"] .nav-top-link{ border-color: transparent; background: transparent; } html[data-nav-top-surface="text"] .nav-top-link:hover{ border-color: transparent; background: transparent; color: var(--heading); } html[data-nav-top-surface="pill"] .nav-top-link.is-active, html[data-nav-top-surface="pill"] .nav-top-link[aria-current="page"]{ border-color: var(--nav-hover-border, var(--border)); background: var(--nav-hover-bg, color-mix(in srgb, var(--surface) 60%, transparent 40%)); color: var(--heading); } html[data-nav-top-surface="text"] .nav-top-link.is-active, html[data-nav-top-surface="text"] .nav-top-link[aria-current="page"]{ border-color: transparent; background: transparent; color: var(--heading); } /* Home keeps its own tokens when using pill surface */ html[data-nav-top-surface="pill"] .nav-link.nav-link-home{ border-color: var(--nav-home-border, transparent); background: var(--nav-home-bg, transparent); color: var(--nav-home-text, var(--text)); } html[data-nav-top-surface="pill"] .nav-link.nav-link-home:hover{ border-color: var(--nav-home-hover-border, var(--border)); background: var(--nav-home-hover-bg, color-mix(in srgb, var(--surface) 60%, transparent 40%)); } html[data-nav-top-surface="text"] .nav-link.nav-link-home{ border-color: transparent; background: transparent; color: var(--nav-home-text, var(--text)); } html[data-nav-top-surface="text"] .nav-link.nav-link-home:hover{ border-color: transparent; background: transparent; color: var(--heading); } /* Dropdown / subtab hooks */ .nav-group{ position:relative; } .nav-sub-link{ width: 100%; justify-content: flex-start; display:block; border-radius: var(--nav-subtab-radius); } html[data-nav-sub-surface="pill"] .nav-sub-link{ border-color: var(--nav-border, transparent); background: var(--nav-bg, transparent); } html[data-nav-sub-surface="pill"] .nav-sub-link:hover{ border-color: var(--nav-hover-border, var(--border)); background: var(--nav-hover-bg, color-mix(in srgb, var(--surface) 60%, transparent 40%)); } html[data-nav-sub-surface="text"] .nav-sub-link{ border-color: transparent; background: transparent; } html[data-nav-sub-surface="text"] .nav-sub-link:hover{ border-color: transparent; background: transparent; color: var(--heading); } html[data-nav-sub-surface="pill"] .nav-sub-link.is-active, html[data-nav-sub-surface="pill"] .nav-sub-link[aria-current="page"]{ border-color: var(--nav-hover-border, var(--border)); background: var(--nav-hover-bg, color-mix(in srgb, var(--surface) 60%, transparent 40%)); color: var(--heading); } html[data-nav-sub-surface="text"] .nav-sub-link.is-active, html[data-nav-sub-surface="text"] .nav-sub-link[aria-current="page"]{ border-color: transparent; background: transparent; color: var(--heading); } /* Dropdown surface */ .nav-dd-menu{ position:absolute; top: calc(100% + 8px); left:0; min-width: 340px; padding: 8px; border:1px solid var(--border); box-shadow: var(--shadow); z-index:14500; } [data-dd-menu]{ background: color-mix(in srgb, var(--bg) var(--nav-dd-bg-mix), var(--surface-2)) !important; border-radius: var(--nav-dd-radius) !important; border-color: color-mix(in srgb, var(--border) var(--nav-dd-border-mix), transparent) !important; backdrop-filter: blur(var(--nav-dd-blur)) !important; } [data-dd-menu] .nav-link{ border-radius: var(--nav-subtab-radius); } .nav-actions{ display:flex; gap: 10px; align-items:center; } .nav-toggle{ display:none; } .nav-ribbon{ position: relative; z-index: 14010; background: color-mix(in srgb, var(--surface-2) 80%, transparent 20%); border-bottom: 1px solid var(--border); } .nav-ribbon-inner{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 10px 0; } .nav-ribbon-text{ font-size: 13px; color: var(--text-muted); } .nav-ribbon-text strong{ color: var(--text); } .nav-ribbon-actions{ display:flex; gap: 10px; align-items:center; } /* Mobile drawer */ .mobile-nav{ display:none; background: color-mix(in srgb, var(--bg) var(--mobile-nav-bg-mix), var(--surface-2)); border-top: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(var(--mobile-nav-blur)); } .nav-backdrop{ position: fixed; inset: 0; background: rgba(0,0,0,.62); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 13500; } body.nav-open .nav-backdrop{ opacity: 1; pointer-events: auto; } body.nav-open .mobile-nav{ display:block; position: fixed; top: var(--site-header-h); height: calc(100vh - var(--site-header-h)); height: calc(100dvh - var(--site-header-h)); overflow:auto; z-index: 13600; } html[data-mobile-menu-align="full"] body.nav-open .mobile-nav{ left: 0; right: 0; width: auto; } html[data-mobile-menu-align="right"] body.nav-open .mobile-nav{ right: 0; left: auto; width: min(420px, 92vw); border-left: 1px solid var(--border); } html[data-mobile-menu-align="left"] body.nav-open .mobile-nav{ left: 0; right: auto; width: min(420px, 92vw); border-right: 1px solid var(--border); } .mobile-nav-inner{ display:grid; gap: 8px; padding: 12px 0; } .mnav-link{ display:block; padding: 10px 12px; border-radius: var(--r1); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 60%, transparent 40%); font-weight: 900; font-size: 13px; } .mnav-link.is-active, .mnav-link[aria-current="page"]{ border-color: var(--nav-hover-border, var(--border)); background: var(--nav-hover-bg, color-mix(in srgb, var(--surface) 60%, transparent 40%)); color: var(--heading); } .mnav-sublink{ margin-left: 8px; } .mnav-sub{ padding-top: 6px; display:grid; gap: 8px; } .mnav-group{ border: 1px solid var(--border); border-radius: var(--r1); background: color-mix(in srgb, var(--surface) 52%, transparent 48%); overflow: hidden; } .mnav-summary{ list-style: none; cursor: pointer; padding: 12px; font-weight: 950; font-size: 13px; user-select: none; } .mnav-summary.is-active{ color: var(--heading); } .mnav-summary::-webkit-details-marker{ display:none; } .mnav-summary::after{ content: "+"; float: right; font-weight: 950; } .mnav-group[open] > .mnav-summary::after{ content: "−"; } .mnav-group > .mnav-sub{ padding: 0 8px 10px; } .mnav-section-label{ margin: 8px 0 0; font-weight: 950; font-size: 13px; } .mnav-section-label.is-active{ color: var(--heading); } html[data-mobile-menu-mode="flat"] .mnav-group{ border: none; background: transparent; border-radius: 0; } html[data-mobile-menu-mode="flat"] .mnav-summary{ padding: 0; cursor: default; } html[data-mobile-menu-mode="flat"] .mnav-summary::after{ content: ""; } html[data-mobile-menu-mode="flat"] .mnav-group > .mnav-sub{ padding: 0; } .mnav-actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 10px; } /* Footer */ .footer-shell{ border-bottom:none; } .footer-inner{ padding-top:14px; padding-bottom:14px; } .footer-meta{ display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between; align-items:center; } /* Modal (shared) */ .modal{ position: fixed; inset: 0; display:grid; place-items:center; z-index: 20000; } .modal[aria-hidden="true"]{ display:none; } .modal-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.68); } .modal-panel{ position: relative; width: min(760px, calc(100% - 28px)); border-radius: var(--r2); border: 1px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow); padding: 14px; } .modal-head{ display:flex; align-items:center; justify-content: space-between; gap: 10px; } .modal-title{ margin:0; } .modal-copy{ margin-top: 8px; } .modal-close{ width: 38px; height: 38px; border-radius: var(--pill); border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 20px; cursor:pointer; } .region-grid{ display:grid; gap:10px; margin-top:10px; } .region-option{ justify-content:flex-start; width:100%; } .region-option-name{ font-weight:950; } .region-option-meta{ margin-left:8px; } /* Basic responsive */ @media (max-width: 980px){ .nav-links{ display:none; } .nav-toggle{ display:inline-flex; } .brand-icon{ width: 44px; height: 44px; } } /* Keep header compact on very small screens */ @media (max-width: 520px){ html[data-mobile-wordmark="false"] .brand-wordmark{ display:none; } html[data-mobile-wordmark="true"] .nav-inner{ gap: 8px; grid-template-columns: auto 1fr auto; } html[data-mobile-wordmark="true"] .brand{ min-width: 0; } html[data-mobile-wordmark="true"] .brand-wordmark{ display:block; max-width: min(180px, 42vw); } html[data-mobile-wordmark="true"] .nav-actions{ justify-self: end; } html[data-mobile-wordmark="true"] .nav-toggle{ white-space: nowrap; } }