/* ========================================================================== Attic Salt — the site header. ONE component for all 32 pages, replacing four implementations (the theme nav widget on the home page, the Elementor 714 header on the inner pages, the hand-built .site-header on services, and the Perspectives

). FLOATING CAPSULE At the top of the page the bar is full width and transparent, sitting over the hero. Past the hero it contracts into a centred capsule with a blurred backdrop. The morph is one orchestrated transition — width, radius, inset, backdrop and shadow all on the same curve — not a fade between two bars. The signature is the tension between the two shapes: the Attic Salt logo is a hard-edged rectangle, and the capsule wraps it. Rectangle inside pill. SKIN Colour comes from data-as-ground on (see as-tokens.css). There is no forked markup and no light/dark variant class — a page with a dark hero sets data-as-ground="dark" and the header follows. No entry animation. Chrome is present at first paint; only content reveals. ========================================================================== */ .as-header, .as-header *, .as-drawer, .as-drawer * { box-sizing: border-box; } /* --------------------------------------------------------------- skip link */ .as-skip { position: absolute; left: -9999px; top: 0; z-index: calc(var(--as-z-header) + 10); padding: 12px 20px; background: var(--as-ink); color: #fff; font-family: var(--as-font); font-size: 0.875rem; text-decoration: none; } .as-skip:focus { left: 8px; top: 8px; } /* ------------------------------------------------------------------ shell */ .as-header { position: fixed; inset: 0 0 auto 0; z-index: var(--as-z-header); display: flex; justify-content: center; padding: 0; transition: padding var(--as-dur-morph) var(--as-ease-out); } .as-header.is-pinned { padding: 12px var(--as-s-4); } /* ------------------------------------------------------------------- bar */ .as-header__bar { display: flex; align-items: center; gap: var(--as-s-5); width: 100%; max-width: 100%; height: var(--as-header-h); padding: 0 var(--as-gutter); border: 1px solid transparent; border-radius: 0; background: transparent; transition: max-width var(--as-dur-morph) var(--as-ease-out), height var(--as-dur-morph) var(--as-ease-out), padding var(--as-dur-morph) var(--as-ease-out), border-radius var(--as-dur-morph) var(--as-ease-out), border-color var(--as-dur-morph) var(--as-ease-out), background-color var(--as-dur-morph) var(--as-ease-out), box-shadow var(--as-dur-morph) var(--as-ease-out); } .as-header.is-pinned .as-header__bar { max-width: 940px; height: var(--as-header-h-sm); padding: 0 10px 0 var(--as-s-5); border-radius: 999px; border-color: var(--as-rule); background-color: color-mix(in srgb, var(--as-bg) 88%, transparent); box-shadow: var(--as-shadow); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); } /* color-mix is well supported, but a solid fallback keeps the bar opaque rather than invisible if it is not. Declared first so color-mix wins. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { .as-header.is-pinned .as-header__bar { background-color: var(--as-bg); } } /* ------------------------------------------------------------------ logo */ .as-header__logo { flex: 0 0 auto; display: block; line-height: 0; } .as-header__logo img { display: block; width: auto; height: 68px; transition: height var(--as-dur-morph) var(--as-ease-out); } .as-header.is-pinned .as-header__logo img { height: 44px; } /* Two lockups: dark-on-light and light-on-dark. The ground picks one. */ .as-header__logo .as-logo--dark { display: none; } [data-as-ground="dark"] .as-header__logo .as-logo--light { display: none; } [data-as-ground="dark"] .as-header__logo .as-logo--dark { display: block; } /* ------------------------------------------------------------------- nav */ .as-header__nav { position: relative; flex: 1 1 auto; display: flex; justify-content: center; } .as-header__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } .as-header__list > li { margin: 0; padding: 0; list-style: none; } .as-header__list > li > a { display: block; padding: 10px 14px; font-family: var(--as-font); font-size: 0.8125rem; /* 13px */ font-weight: var(--as-w-semi); letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--as-fg); opacity: .82; transition: opacity var(--as-dur-fast) var(--as-ease); } .as-header__list > li > a:hover, .as-header__list > li > a:focus-visible, .as-header__list > li.is-current > a { opacity: 1; } /* --- the marker ----------------------------------------------------------- One element that slides between items, rather than a border on each. It rests under the current page and follows the pointer. Transform-only, so it composites on the GPU. Width is set by JS from the target item's box. */ .as-header__marker { position: absolute; left: 0; bottom: 6px; height: 2px; width: 0; background: var(--as-green); border-radius: 1px; transform: translateX(0); transform-origin: left; opacity: 0; pointer-events: none; transition: transform var(--as-dur-morph) var(--as-ease-out), width var(--as-dur-morph) var(--as-ease-out), opacity var(--as-dur-fast) var(--as-ease); } .as-header__marker.is-on { opacity: 1; } /* Before JS measures it, the marker must not flash at 0,0. */ .as-header__marker:not(.is-ready) { transition: none; } /* While the capsule is morphing, the marker is re-measured every frame to stay locked to its item. Its own transition must be off for that: otherwise it animates towards each intermediate value while the next one is already being set, and the bar visibly stretches across two nav items on the way. */ .as-header__marker.is-following { transition: none; } /* --- services dropdown --------------------------------------------------- */ .as-header__list .as-has-sub { position: relative; } .as-header__caret { display: inline-block; margin-left: .34em; font-size: .62em; vertical-align: middle; opacity: .7; } .as-header__sub { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--as-z-dropdown); min-width: 244px; margin: 0; padding: var(--as-s-2) 0; list-style: none; background: var(--as-card-bg); border: 1px solid var(--as-rule); box-shadow: var(--as-shadow-pop); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity var(--as-dur-fast) var(--as-ease), transform var(--as-dur-fast) var(--as-ease), visibility var(--as-dur-fast) var(--as-ease); } /* Invisible bridge over the gap between Services and its panel, so the pointer never leaves the item on the way down. */ .as-header__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 7px; } .as-header__list .as-has-sub.is-open > .as-header__sub { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .as-header__sub li { margin: 0; padding: 0; list-style: none; } .as-header__sub > li > a { display: block; padding: 10px 18px; font-family: var(--as-font); font-size: 0.875rem; font-weight: var(--as-w-reg); line-height: 1.35; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; color: var(--as-fg); transition: background var(--as-dur-fast) var(--as-ease); } .as-header__sub > li > a:hover, .as-header__sub > li > a:focus-visible { background: var(--as-bg-alt); } /* On a dark ground --as-bg-alt and --as-card-bg are the same #171B20, so the hover above paints panel-on-panel and vanishes. A light wash of the foreground gives the dark panel a visible step, as bone does on white. */ [data-as-ground="dark"] .as-header__sub > li > a:hover, [data-as-ground="dark"] .as-header__sub > li > a:focus-visible { background: rgba(242, 241, 234, .07); } /* --------------------------------------------------------------- actions */ .as-header__actions { flex: 0 0 auto; display: flex; align-items: center; gap: var(--as-s-3); } /* --------------------------------------------------------------- burger */ .as-header__burger { display: none; width: 44px; height: 44px; padding: 12px 9px; background: none; border: 0; cursor: pointer; } .as-header__burger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--as-fg); transition: transform var(--as-dur-fast) var(--as-ease), opacity var(--as-dur-fast) var(--as-ease); } .as-header__burger span + span { margin-top: 5px; } /* ========================================================================== MOBILE DRAWER ========================================================================== */ .as-drawer { position: fixed; inset: 0 0 0 auto; z-index: var(--as-z-drawer); width: min(340px, 88vw); padding: var(--as-s-5) var(--as-s-6) var(--as-s-8); background: var(--as-ink-deep); color: #F2F1EA; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform var(--as-dur-morph) var(--as-ease-out); } .as-drawer.is-open { transform: translateX(0); } .as-scrim { position: fixed; inset: 0; z-index: var(--as-z-scrim); background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transition: opacity var(--as-dur-morph) var(--as-ease), visibility var(--as-dur-morph) var(--as-ease); } .as-scrim.is-open { opacity: 1; visibility: visible; } /* Box and behaviour come from .as-iconbtn; only placement is local. */ .as-drawer__close { margin: 0 0 var(--as-s-4) auto; } .as-drawer nav a { display: block; padding: 13px 0; font-family: var(--as-font); font-size: 0.9375rem; font-weight: var(--as-w-semi); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; color: #F2F1EA; border-bottom: 1px solid rgba(242, 241, 234, .1); } .as-drawer__label { display: block; padding: 13px 0 4px; font-family: var(--as-font); font-size: 0.9375rem; font-weight: var(--as-w-semi); letter-spacing: 0.08em; text-transform: uppercase; color: var(--as-green); /* green text on ink — 10.35:1 */ } /* Scoped through `nav` to match the specificity of `.as-drawer nav a` above — without it the parent rule wins and the sub-items render full size. */ .as-drawer nav .as-drawer__sub a { padding: 9px 0 9px var(--as-s-4); font-size: 0.8125rem; font-weight: var(--as-w-reg); letter-spacing: 0; text-transform: none; color: rgba(242, 241, 234, .75); border-bottom: 0; } .as-drawer__cta { margin-top: var(--as-s-6); display: grid; gap: var(--as-s-3); } .as-drawer__cta .as-btn { width: 100%; } /* ========================================================================== PAGE OFFSET The header is fixed, so pages whose previous header sat IN FLOW need that space reserved or their first heading slides under the bar. Pages built with a full-bleed hero (home, services, Perspectives) already allow for it and deliberately let the bar float over the top — they omit the attribute. ========================================================================== */ body[data-as-offset] { padding-top: var(--as-header-h); /* The reserved strip shows the BODY's background, and on these pages that is still white — the dark comes from the first Elementor container, which the padding now sits above. Painting the body from the ground token makes the strip continuous with the page (both resolve to #111418 on a dark page). */ background-color: var(--as-bg); } /* ========================================================================== BREAKPOINTS ========================================================================== */ @media (max-width: 1279px) { .as-header__list > li > a { padding: 10px 10px; font-size: 0.75rem; letter-spacing: .06em; } .as-header.is-pinned .as-header__bar { max-width: 860px; } } @media (max-width: 1024px) { .as-header__nav { display: none; } .as-header__burger { display: block; } .as-header__actions .as-btn { display: none; } .as-header__bar { height: var(--as-header-h-sm); justify-content: space-between; } .as-header.is-pinned .as-header__bar { height: 60px; max-width: 100%; } .as-header__logo img { height: 46px; } .as-header.is-pinned .as-header__logo img { height: 40px; } body[data-as-offset] { padding-top: var(--as-header-h-sm); } } /* Off-site mark on Work, rendered only when it opens in a new tab. */ .as-header__ext { margin-left: .3em; font-size: .9em; } /* ========================================================================== ENQUIRY MODAL Opened by Get in Touch (header, drawer) and in-page [data-as-enquiry] CTAs. Light panel to match the site's contact card. Lives here rather than in as-components.css because the header block owns its markup and behaviour. Selectors go through .as-modal: the Elementor pages carry theme rules such as `.elementor-kit-5747 h2` (0,1,1) that out-rank a bare component class. ========================================================================== */ .as-modal, .as-modal * { box-sizing: border-box; } .as-modal { position: fixed; inset: 0; z-index: calc(var(--as-z-drawer) + 50); /* above drawer, scrim and chat widget */ display: flex; align-items: center; justify-content: center; padding: var(--as-s-5); visibility: hidden; opacity: 0; pointer-events: none; /* never intercept clicks while fading out */ /* Closing: fade, THEN hide. Opening (below): visible immediately — a field inside an element still transitioning out of visibility:hidden cannot take focus, which left focus on the Get in Touch button instead of Name. */ transition: opacity var(--as-dur-morph) var(--as-ease), visibility 0s linear var(--as-dur-morph); } /* .active is the open state on the Perspectives Strategy Call modal (scripts.js). */ .as-modal.is-open, .as-modal.active { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity var(--as-dur-morph) var(--as-ease), visibility 0s; } .as-modal .as-modal__scrim { position: absolute; inset: 0; background: rgba(17, 20, 24, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* Panel, type and fields mirror .as-contact__card in as-contact.css value for value, so the modal and the "Let's work together" band are the same form. Change one, change the other. */ .as-modal .as-modal__panel { position: relative; width: 100%; max-width: 410px; max-height: calc(100dvh - 2 * var(--as-s-5)); overflow-y: auto; overscroll-behavior: contain; padding: 50px 40px 67px 45px; background: var(--as-card-bg); color: var(--as-fg); border: 0; border-radius: 40px; box-shadow: var(--as-shadow-pop); font-family: "DM Sans", sans-serif; text-align: left; transform: translateY(16px); transition: transform var(--as-dur-morph) var(--as-ease-out); } .as-modal.is-open .as-modal__panel, .as-modal.active .as-modal__panel { transform: none; } .as-modal .as-modal__close { position: absolute; top: 20px; right: 20px; } .as-modal .as-modal__title { margin: 0 0 25px; font-family: "DM Sans", sans-serif; font-size: 28px; font-weight: 500; font-style: normal; line-height: 1.0714em; letter-spacing: -0.6px; text-transform: uppercase; color: var(--as-fg); } .as-modal .as-modal__lede { margin: 0 0 15px; font-family: "DM Sans", sans-serif; font-size: 18px; font-weight: 300; line-height: 1.2em; color: var(--as-fg-mute); } .as-modal .as-modal__form { margin: 0; } .as-modal .as-field { display: block; margin: 0 0 37px; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 300; font-style: normal; line-height: 1.2631em; letter-spacing: -0.3px; color: var(--as-fg); } .as-modal .as-field input, .as-modal .as-field textarea { display: block; width: 100%; margin: 3px 0; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--as-fg); border-radius: 0; box-shadow: none; outline: none; font-family: "DM Sans", sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: normal; color: var(--as-fg-mute); -webkit-appearance: none; appearance: none; } .as-modal .as-field textarea { resize: vertical; min-height: 0; height: auto; } .as-modal .as-field input:focus, .as-modal .as-field textarea:focus { border-bottom-color: var(--as-green); } .as-modal .as-field [aria-invalid="true"] { border-bottom-color: #B3261E; } /* Inline pill, as in the band — not stretched across the panel. 15px flat: the ported theme shrinks the root font size on phones, so .as-btn's rem size would come out smaller on the Elementor pages than everywhere else. */ .as-modal .as-modal__submit { margin: 0; font-size: 15px; letter-spacing: 0.15px; } .as-modal .as-modal__submit[disabled] { opacity: .6; cursor: progress; transform: none; } .as-modal .as-hp { display: none !important; } @media (max-width: 1024px) { .as-modal .as-modal__panel { max-width: 320px; padding: 40px 37px; } .as-modal .as-modal__title { font-size: 23px; margin-bottom: 20px; } } /* Phones: a full-screen sheet, so the keyboard never hides the submit button. */ /* Phones: the same card as the band's mobile layout (full width inside a 20px gutter, 20px radius, 35/30 padding), not a full-screen sheet. The panel scrolls inside itself if the keyboard leaves too little room. */ @media (max-width: 767px) { .as-modal { padding: 20px; } .as-modal .as-modal__panel { max-width: none; max-height: calc(100dvh - 40px); padding: 35px 30px; border-radius: 20px; } .as-modal .as-modal__title { font-size: 22px; margin-bottom: 15px; } } @media (prefers-reduced-motion: reduce) { .as-header, .as-header__bar, .as-header__logo img, .as-header__marker, .as-drawer, .as-scrim, .as-modal, .as-modal .as-modal__panel { transition: none; } }