/** * GTD Desco — navigation. * * Ported from site/_hero-prototype.html, which is the approved design. The bar, * panel, tokens and states below are that file's CSS with the selectors bound * to the rendered markup; nothing has been redesigned in the port. * * Added here, because the prototype hides the desktop list below 1180px and * stops: the mobile drawer. It follows the prototype's own logic — same tokens, * same ease, same focus treatment — rather than introducing a second language. * * Plain CSS, not a Sass partial. The theme compiles sass/style.scss through * Compass (config.rb, Ruby) and nobody has confirmed that toolchain still runs; * making the header depend on it would be a poor trade. Fold it into the Sass * tree once the build is proven. */ :root{ --red:#c60000; --red-lift:#e11414; --ink:#101d1d; --line:rgba(255,255,255,.22); --ease:cubic-bezier(.16,1,.3,1); --nav-h:92px; --nav-h-sm:72px; --logo-drop:34px; --logo-drop-sm:22px; /* * The bar's inner cap. It was 1800px — the live site's nav wrap — while the * page's own content runs at 1520px, so on any screen wider than about * 1520 the logo started 152px to the LEFT of the heading beneath it and the * bar read as a separate object laid over the page. * * It is the page container now: `.container` is capped at 1520px above * 1400px (sass/style.css, the `min-width: 1400px` block) and carries * Bootstrap's own 12px inner gutter, so the page's first ink sits at * (100% - 1520) / 2 + 12. The bar starts on that same line. * * Below ~1520 the container falls back through Bootstrap's stepped * max-widths — 1440 puts its content at 12px, 1280 at 82px — which is a * ladder the bar should not follow: the gutter floor below keeps the bar's * own inset steady instead, exactly as it is today. */ --wrap:1520px; --wrap-pad:12px; --gutter:clamp(1.25rem,3.5vw,3rem); /* * logo-2.svg carries 12.05 units of blank inside a 353-unit viewBox before * the shield begins — 3.41% of its rendered width. Aligning the file's box * would leave the mark that much to the right of the type it is meant to * line up with, so the box is pulled back by its own blank and the shield * lands on the line. Set as a share of the logo's width, not a fixed pixel * value, because the logo shrinks in the scrolled state. */ --logo-w:clamp(200px,21vw,330px); --logo-blank:.0341; } /* ── the bar ──────────────────────────────────────────────────────── */ .nav{ position:fixed;inset:0 0 auto;z-index:60; height:var(--nav-h); background:var(--red); box-shadow:inset 0 -1px 0 rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.14); transition:height .3s var(--ease),box-shadow .3s var(--ease); } .nav *,.nav *::before,.nav *::after, .drawer *,.drawer *::before,.drawer *::after{box-sizing:border-box} /* The drawer is a sibling of .nav, not a descendant, so it needs the same reset: bootstrap.min.css underlines every on the page. */ .nav a,.drawer a{color:inherit;text-decoration:none} .nav ul,.drawer ul{list-style:none;margin:0;padding:0} .nav img,.nav svg,.drawer img,.drawer svg{display:block;max-width:100%} .nav__in{ height:100%; display:flex;align-items:center; /* sass/style.css sets `nav { display: flex }`, which made this a flex item with flex-grow 0 — so it shrank to its content, the bar's right-hand CTA stopped 320px short of the gutter on a 1920 screen, and `margin-left:auto` on the list had nothing to push against. */ flex:1 1 auto;min-width:0; padding-inline:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--wrap-pad))); gap:clamp(1.5rem,4vw,3rem); } /* The lockup overhangs the bar, as it does on the live site. Given a shadow so the overhang reads as deliberate rather than as overflow. */ .nav__logo{ flex:none;position:relative;z-index:2;align-self:stretch;display:flex;align-items:center; /* Optical, not mathematical: the shield's edge lands on the page's line, not the file's box. On the this fed back through `.nav img{max-width:100%}` — a negative margin shrank the lockup, which shrank the mark inside it. */ margin-left:calc(var(--logo-w) * var(--logo-blank) * -1); transition:margin-left .3s var(--ease); } .nav__logo img{ width:var(--logo-w);height:auto;display:block; margin-bottom:calc(-1 * var(--logo-drop)); filter:drop-shadow(0 6px 14px rgba(0,0,0,.28)); transition:width .3s var(--ease),margin-bottom .3s var(--ease); } .nav__logo:focus-visible{outline:2px solid #fff;outline-offset:3px} .nav__list{display:flex;align-items:stretch;gap:clamp(.35rem,1vw,1.1rem);height:100%} /* `.nav ul{margin:0}` above is (0,1,1) and was beating `.nav__list{margin-left:auto}` at (0,1,0), so the list never pushed to the right gutter. It only showed once .nav__in stopped shrink-wrapping and there was space to push into. */ .nav .nav__list{margin-left:auto} .nav__list > li{display:flex;align-items:center;position:relative} .nav__list > li > a:not(.nav__cta){ display:flex;align-items:center;gap:.45rem; height:100%;padding:0 .55rem; /* a real hit area, not 0 vertical */ font-size:.94rem!important;font-weight:700; letter-spacing:.1em;text-transform:uppercase; color:#fff;white-space:nowrap; position:relative; } /* Underline grows from the centre rather than appearing whole. */ .nav__list > li > a:not(.nav__cta)::after{ content:"";position:absolute;left:.55rem;right:.55rem;bottom:22px;height:2px; background:#fff;transform:scaleX(0);transform-origin:center; transition:transform .28s var(--ease); } .nav__list > li > a:not(.nav__cta):hover::after, .nav__list > li:focus-within > a:not(.nav__cta)::after, .nav__list > li[aria-current] > a::after{transform:scaleX(1)} .nav__list a:focus-visible{outline:2px solid #fff;outline-offset:-4px;border-radius:2px} .nav__caret{width:7px;height:7px;opacity:.75;transition:transform .28s var(--ease)} .nav__item:hover .nav__caret,.nav__item:focus-within .nav__caret{transform:rotate(180deg)} /* White pill, as live — but with padding that makes it a button, a radius that matches the brand's hard geometry, and the house chevron. */ .nav__cta{ display:inline-flex;align-items:center; padding:.86rem 1.45rem;margin-left:.6rem; /* Split out of the `font:` shorthand: type.css's `a{font-size:…!important}` overrides a shorthand's size but cannot be answered inside one. */ font:700 .82rem/1 "eurostile",sans-serif;font-size:.82rem!important; letter-spacing:.14em;text-transform:uppercase; background:#fff;color:var(--red);border:1px solid transparent;border-radius:4px; gap:.7rem; transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .nav__cta:hover{background:#fff;color:var(--red);transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.22)} .nav__cta:focus-visible{outline:2px solid #fff;outline-offset:3px} .nav__cta .btn__chev{width:16px;height:12px;flex:none;transition:transform .25s var(--ease)} .nav__cta:hover .btn__chev{transform:translateX(4px)} /* Scrolled: the bar compacts and gains depth, so long pages keep the footage visible and the bar stops feeling pasted on. NOTE: this animates height/width, which a craft detector flags as a layout transition. Accepted deliberately: a one-shot 300ms change fired twice per page visit on a position:fixed element outside document flow, not a per-frame scroll-linked animation. The real geometry has to change because .mega is anchored to the bar's height. */ .nav.is-scrolled{height:var(--nav-h-sm);box-shadow:inset 0 -1px 0 rgba(0,0,0,.22), 0 10px 30px rgba(0,0,0,.34)} .nav.is-scrolled{--logo-w:clamp(170px,16vw,260px)} .nav.is-scrolled .nav__logo img{margin-bottom:calc(-1 * var(--logo-drop-sm))} .nav.is-scrolled .nav__list > li > a:not(.nav__cta)::after{bottom:16px} /* Every font-size below carries !important. That is not decoration: type.css sets `h1..h4, p, a, li { font-size: var(--t-*) !important }` on bare element selectors, and !important beats specificity, so without it the panel renders at body scale — headings at 25px instead of 12.5px, links at 17px instead of 16px. type.css says the same thing about itself at its head: it is answering rules that were already !important. This file answers type.css. */ /* ── mega panel ───────────────────────────────────────────────────── */ /* The live one is #f1f1f1 but renders semi-transparent, so page content shows through it. Solid here, with a red top rule. */ .mega{ position:fixed;left:0;right:0;top:var(--nav-h); background:#f2f1ef;color:#16211f; border-top:3px solid var(--red); box-shadow:0 24px 48px rgba(0,0,0,.3); padding:2.4rem max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--wrap-pad))) 2.8rem; display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.75rem,3vw,3.25rem); opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s,top .3s var(--ease); } .nav.is-scrolled .mega{top:var(--nav-h-sm)} .nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:none} /* Both heads are

now, not

— they label a group of links inside