/* ========================================================================== Site chrome (Claude): the header and footer patterns on every page. Loaded everywhere by includes/site-chrome.php; the landing page's own stylesheet (hero-claude.scss) loads after it. Tokens follow the POAST brand kit. ========================================================================== */ /* ---- Fonts (self-hosted): the two the header and footer set. The landing page adds its Grift display weights in its own stylesheet. ---- */ @font-face { font-family: Outfit; src: url("../../fonts/outfit/Outfit-Variable-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../../fonts/jetbrains-mono/JetBrainsMono-Variable-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; } /* ========================================================================== Header (Claude): resend.com's glass bar in the brand palette ========================================================================== */ /* Only the root scrolls, so the lock never turns into a scroll container (which would un-stick the bar). While the menu is open the bar is pinned outright; its flow footprint is zero anyway. */ html.sahc-nav-lock { overflow: hidden; } .sahc-nav.is-menu-open { position: fixed; /* stylelint-disable-next-line length-zero-no-unit */ inset: var(--wp-admin--admin-bar--height, 0px) 0 auto; transform: none; transition: none; } .sahc-nav { /* One height at all times. The bar sits over the hero's background; the*/ /* hero's content starts below it.*/ --sahc-nav-h: 68px; position: sticky; /* stylelint-disable-next-line length-zero-no-unit -- the fallback must carry a unit inside calc() elsewhere; kept alike here */ top: var(--wp-admin--admin-bar--height, 0px); z-index: 40; height: 68px; margin-bottom: -68px; color: #E8E4DD; font-family: Outfit, sans-serif; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); /* Slides away while the page scrolls down, back on the first scroll up (the script toggles the class). */ /* The bar: edge to edge, near-black and a little see-through, with the MVP header's hairline along its bottom edge. */ /* The theme's blur-up loader must not touch the logo or card art. */ /* stylelint-disable-next-line no-descending-specificity */ } .sahc-nav.is-hidden { transform: translateY(calc(-100% - 2px)); } .sahc-nav *, .sahc-nav *::before, .sahc-nav *::after { box-sizing: border-box; } .sahc-nav :where(ul, li, p) { margin: 0; padding: 0; list-style: none; } .sahc-nav::after { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 0; height: var(--sahc-nav-h); border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(13, 14, 16, 0.9); backdrop-filter: blur(10px); transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .sahc-nav img { animation: none !important; background: none !important; } /* The site's circuit lines, faint, clipped to the box. */ .sahc-nav__lines { position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: var(--sahc-nav-h); overflow: hidden; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; } .sahc-nav__lines::before, .sahc-nav__lines::after { content: ""; position: absolute; top: 0; bottom: 0; width: min(50%, 760px); background: rgba(232, 228, 221, 0.022); mask-repeat: no-repeat; mask-size: 100% auto; } .sahc-nav__lines::before { left: 0; mask-image: url("../../img/left-pattern-full.svg"); mask-position: top right; } .sahc-nav__lines::after { right: 0; mask-image: url("../../img/right-pattern-full.svg"); mask-position: top left; } .sahc-nav__inner { position: relative; z-index: 2; display: flex; align-items: center; width: calc(100% - 64px); height: var(--sahc-nav-h); margin-inline: auto; transition: height 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .sahc-nav__start { display: flex; flex: 1; align-items: center; min-width: 0; } /* Only the mark itself is the link; the row around it is not. */ .sahc-nav__logo { display: inline-flex; flex: none; align-items: center; padding: 0; /* stylelint-disable-next-line no-descending-specificity */ } .sahc-nav__logo img { display: block; width: auto; height: 32px; } .sahc-nav__menu { display: flex; } /* The centre section: an outlined pill, as on the site. */ .sahc-nav__list { display: flex; align-items: center; height: 40px; padding: 0; border: 1px solid rgba(232, 228, 221, 0.12); border-radius: 999px; background: rgba(13, 14, 16, 0.5); } .sahc-nav .sahc-nav__item { display: flex; gap: 7px; align-items: center; height: 38px; margin: 0; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: #E8E4DD; font: inherit; font-size: 15px; font-weight: 400; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; appearance: none; -webkit-user-select: none; user-select: none; transition: color 0.15s ease-in-out; /* stylelint-disable-next-line no-descending-specificity */ } .sahc-nav .sahc-nav__item:hover, .sahc-nav .sahc-nav__item:focus-visible { color: #F7B041; } .sahc-nav .sahc-nav__item[aria-expanded=true] { color: #F7B041; background: rgba(232, 228, 221, 0.08); } .sahc-nav .sahc-nav__item:focus-visible { outline: 2px solid rgba(247, 176, 65, 0.7); outline-offset: -4px; border-radius: 999px; } .sahc-nav .sahc-nav__item svg { width: 15px; height: 15px; opacity: 0.7; transition: transform 0.2s ease-in; } .sahc-nav .sahc-nav__item[aria-expanded=true] svg { transform: translateY(2px); } .sahc-nav__actions { display: flex; flex: 1; gap: 16px; align-items: center; justify-content: flex-end; } /* Newsletter: the ghost pill. Also dresses the site's modal and logout buttons when they carry this class, so every declaration a button needs is here. */ .sahc-nav .sahc-nav__text { display: inline-flex; align-items: center; justify-content: center; height: 40px; margin: 0; padding: 0 20px; border: 1px solid rgba(232, 228, 221, 0.22); border-radius: 999px; /* The bar's own surface, solid: the pill reads as clear, and the circuit lines behind the bar stop at its edge instead of showing through. */ background: #0D0E10; color: #E8E4DD; font-family: Outfit, sans-serif; font-size: 15px; font-weight: 400; line-height: 1; letter-spacing: 0; text-transform: none; white-space: nowrap; text-decoration: none; cursor: pointer; appearance: none; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; } .sahc-nav .sahc-nav__text:focus { outline: none; } .sahc-nav .sahc-nav__text:hover, .sahc-nav .sahc-nav__text:focus-visible { border-color: rgba(247, 176, 65, 0.6); background: color-mix(in srgb, #F7B041 8%, #0D0E10); color: #F7B041; } .sahc-nav .sahc-nav__text:focus-visible { outline: 2px solid #F7B041; outline-offset: 3px; } /* The login button: the amber pill. The site's modal button block renders it as a