/* ========================================================================== Stockwell Enterprises — Site Chrome shared/chrome.css Styles for and only (see shared/site.js). Every page gets identical chrome; nothing here is page-specific. ========================================================================== */ /* -------------------------------------------------------------------------- HEADER Sits over the hero as pure type, then condenses into a glass bar on scroll. -------------------------------------------------------------------------- */ site-header { display: block; } .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); display: flex; align-items: center; color: var(--c-bone); transition: background-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease), border-color var(--dur) var(--ease), height var(--dur) var(--ease); border-bottom: 1px solid transparent; } /* Scrim so white type stays legible over the brightest part of the sky. */ .site-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7, 11, 17, 0.55), rgba(7, 11, 17, 0)); pointer-events: none; transition: opacity var(--dur) var(--ease); } .site-header.is-scrolled { height: 3.75rem; background: rgba(7, 11, 17, 0.78); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(246, 242, 233, 0.12); } .site-header.is-scrolled::before { opacity: 0; } /* A page that does not open with a dark banner — a bill record, an article — needs the bar opaque from the first pixel, and needs its content to start below the fixed header rather than underneath it. Set on . */ body.chrome-solid .site-header { background: rgba(7, 11, 17, 0.92); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom-color: rgba(246, 242, 233, 0.12); } body.chrome-solid .site-header::before { opacity: 0; } body.chrome-solid main { padding-top: var(--header-h); } .site-header__inner { width: 100%; max-width: var(--width-page); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); position: relative; z-index: 1; } /* --- brand --- */ .brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: inherit; } .brand__mark { width: 1.85rem; height: 1.85rem; flex: none; overflow: visible; } .brand__mark .peak { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; } .brand__mark .sun { fill: var(--c-ember); transition: transform var(--dur-slow) var(--ease-out-soft); transform-origin: 16px 9px; } .brand:hover .brand__mark .sun { transform: translateY(-1.5px) scale(1.12); } .brand__type { display: flex; flex-direction: column; line-height: 1; } .brand__name { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .brand__sub { font-family: var(--font-mono); font-size: 0.5625rem; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.62; margin-top: 0.28rem; } /* --- desktop nav --- */ .nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.5vw, 2.5rem); } .nav__link { position: relative; font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: rgba(246, 242, 233, 0.78); padding-block: 0.35rem; transition: color var(--dur-fast) var(--ease); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--brand-soft); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out-soft); } .nav__link:hover { color: var(--c-bone); } .nav__link:hover::after { transform: scaleX(1); } .nav__link[aria-current="page"] { color: var(--c-bone); } .nav__link[aria-current="page"]::after { transform: scaleX(1); background: var(--brand-soft); } /* --- mobile toggle --- */ .nav-toggle { display: none; width: 2.75rem; height: 2.75rem; margin-right: -0.6rem; align-items: center; justify-content: center; background: none; border: 0; color: inherit; cursor: pointer; } .nav-toggle__bars { position: relative; width: 1.4rem; height: 0.75rem; } .nav-toggle__bars span { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform var(--dur) var(--ease-out-soft), opacity var(--dur-fast) var(--ease); } .nav-toggle__bars span:nth-child(1) { top: 0; } .nav-toggle__bars span:nth-child(2) { top: 50%; } .nav-toggle__bars span:nth-child(3) { top: 100%; } .site-header.is-open .nav-toggle__bars span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); } .site-header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; } .site-header.is-open .nav-toggle__bars span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); } /* --- mobile panel --- */ .nav-panel { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; /* Sit the links low: on a phone this is where the thumb already is. */ justify-content: flex-end; padding: var(--header-h) var(--gutter) clamp(3rem, 12vh, 6rem); /* Multi-stop falloff, not a single "to transparent": a two-stop radial ends with a first-derivative jump that shows up as a hard mach band on dark. */ background: radial-gradient(130% 65% at 50% 112%, rgba(221, 98, 54, 0.26) 0%, rgba(221, 98, 54, 0.13) 34%, rgba(221, 98, 54, 0.04) 60%, rgba(221, 98, 54, 0) 82%), linear-gradient(165deg, #0b131a 0%, #0e1a17 55%, #131a1e 100%); opacity: 0; visibility: hidden; transform: translateY(-1.5rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out-soft), visibility 0s linear var(--dur); } .nav-panel.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .nav-panel__list { display: flex; flex-direction: column; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .nav-panel__item { border-bottom: 1px solid rgba(246, 242, 233, 0.1); opacity: 0; transform: translateY(12px); } .nav-panel.is-open .nav-panel__item { animation: navItemIn 520ms var(--ease-out-soft) forwards; animation-delay: calc(90ms + var(--i, 0) * 60ms); } @keyframes navItemIn { to { opacity: 1; transform: none; } } .nav-panel__link { display: flex; align-items: baseline; gap: var(--sp-4); padding: clamp(0.9rem, 2.4vw, 1.35rem) 0; color: var(--c-bone); text-decoration: none; font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; } .nav-panel__link .idx { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--brand-soft); opacity: 0.9; flex: none; } .nav-panel__link[aria-current="page"] { color: var(--c-gold); } .nav-panel__foot { margin-top: var(--sp-8); font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246, 242, 233, 0.45); } @media (max-width: 56rem) { .nav { display: none; } .nav-toggle { display: inline-flex; } } @media (min-width: 56.0625rem) { .nav-panel { display: none; } } /* Locks background scroll while the mobile panel is open. */ body.nav-open { overflow: hidden; } /* -------------------------------------------------------------------------- NO-SCRIPT FALLBACK The chrome is defined in JavaScript, so with scripting off there would be no navigation at all. This is the plain-text stand-in; it only ever renders inside