/* --------------------------------------------------------------------------- Lev Developments — shared UI layer Loaded AFTER styles.css on every page, and after brand-hero.css on the home page, so everything here is an intentional override. Keeping it in its own file means the button and navigation treatment can be revised without reopening the 36 KB base stylesheet. Three jobs: 1. Buttons that match the vendor onboarding portal — raised frosted glass with a shimmer pass, so the marketing site and the portal feel like one product rather than two. 2. Primary navigation as clear glass tiles. 3. Footer legal row, admin door, and the site version stamp. --------------------------------------------------------------------------- */ /* ---- 1. Buttons ---------------------------------------------------------- */ /* Lit from above, seated on a hard bottom edge that compresses when pressed. The vertical gradient does the doming; the stacked shadow does the lift. */ .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 12px; border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.5); border-bottom-color: rgba(1,15,40,0.4); background: linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.12) 52%, rgba(255,255,255,0.06)); backdrop-filter: blur(38px) saturate(135%); -webkit-backdrop-filter: blur(38px) saturate(135%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -3px 4px rgba(1,15,40,0.3), 0 4px 0 rgba(1,15,40,0.3), 0 9px 18px rgba(1,15,40,0.42); transition: transform .12s ease, box-shadow .12s ease, background .2s ease, border-color .2s ease; } .btn:hover { background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2) 52%, rgba(255,255,255,0.1)); border-color: var(--line); border-top-color: rgba(255,255,255,0.6); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -3px 4px rgba(1,15,40,0.28), 0 5px 0 rgba(1,15,40,0.3), 0 12px 22px rgba(1,15,40,0.45); } .btn:active { transform: translateY(3px); box-shadow: inset 0 2px 5px rgba(1,15,40,0.45), inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 0 rgba(1,15,40,0.3), 0 2px 6px rgba(1,15,40,0.35); } .btn--solid { color: var(--navy-deep); border-color: rgba(255,255,255,0.92); border-top-color: #fff; border-bottom-color: rgba(1,23,58,0.3); background: linear-gradient(180deg, #fff, rgba(255,255,255,0.9) 55%, rgba(255,255,255,0.78)); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px rgba(1,23,58,0.16), 0 4px 0 rgba(1,23,58,0.34), 0 9px 18px rgba(1,15,40,0.42); } .btn--solid:hover { background: linear-gradient(180deg, #fff, #fff 55%, rgba(255,255,255,0.88)); border-color: #fff; transform: translateY(-1px); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 4px rgba(1,23,58,0.14), 0 5px 0 rgba(1,23,58,0.34), 0 12px 22px rgba(1,15,40,0.45); } .btn--solid:active { box-shadow: inset 0 2px 5px rgba(1,23,58,0.28), 0 1px 0 rgba(1,23,58,0.3), 0 2px 6px rgba(1,15,40,0.35); } /* Shimmer: one pass across the face on a 1.5s cycle, same as the portal. */ @keyframes lv-shimmer { 0% { transform: translateX(-160%) skewX(-18deg); } 40%, 100% { transform: translateX(320%) skewX(-18deg); } } .btn::after { content: ""; position: absolute; top: 0; left: 0; width: 42%; height: 100%; pointer-events: none; background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0)); animation: lv-shimmer 1.5s linear infinite; } .btn--solid::after { background: linear-gradient(100deg, rgba(1,23,58,0), rgba(1,23,58,0.16), rgba(1,23,58,0)); } /* The "coming soon" style disabled pill shouldn't wink at people. */ .btn[disabled]::after, .btn[aria-disabled="true"]::after { display: none; } @media (prefers-reduced-motion: reduce) { .btn::after { display: none; } } /* Older Safari/Firefox without backdrop-filter: flat opaque panels instead of a thin blue tint that reads as a rendering fault. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .btn { background: linear-gradient(180deg, rgba(226,235,250,0.26), rgba(226,235,250,0.14)); } } /* ---- 2. Navigation as drafting tags -------------------------------------- */ /* One nav treatment for the whole site. These were domed glass tiles on the interior pages — a top-lit bevel, a three-layer 3D shadow stack and a 10px radius — which read as UI chrome sitting on top of the drawing rather than as part of it. The home masthead moved to drawn boxes first and the interior pages kept the tiles, which left two navigations that looked nothing like each other on the same site. They are now the same thing everywhere: one hairline all the way round, a transparent fill, a 2px radius that stops just short of a hard corner, and wider tracking. On a drawing, a label is boxed in thin uniform rule — so that is what these are. A middle chapter filled these solid navy for a paper band, where a filled tag was simply legible and a drawn hairline would not have been; the band is navy again, so a navy fill on navy would go back to being invisible until hovered, and the fill returns to nothing with the hairline alone carrying the pill, same as the brass frame and the logo keyline around it. The blur is gone. It mattered when the fill was translucent glass; there is nothing left to blur once the fill is either fully transparent or fully opaque, so backdrop-filter: none costs nothing to keep. Desktop only. Below the breakpoints the links become a stacked drawer, where individual boxes would fight the full-width panel behind them. The two navigations collapse at different widths — 860px for the interior pages, 900px for the home-page masthead — so each keeps its own floor. */ @media (min-width: 861px) { /* Hairline pills on navy. The band is navy again, so a filled navy tag — the paper round's answer, when the band was #F5F2EC and needed an opaque fill to read at all — would be a navy box on a navy band, invisible until hovered. Transparent instead, with the same light hairline the title-block frame and the logo keyline use, so the grid reads straight through the pill and all three read as one drafting language. Typography and sizing are untouched through every round: same 0.9rem, same 0.2em tracking, same 9px/16px padding, same 2px radius. Only the fill and the ink have ever changed here. */ .nav .nav-links a, .nav .nav-links .nav-portals-toggle { border-radius: 2px; border: 1px solid var(--paper-line); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; color: var(--paper); font-size: 0.9rem; letter-spacing: 0.2em; padding: 9px 16px; /* No transform in the transition: a drawn box does not move, so the wash lifting is the whole feedback. */ transition: border-color .2s ease, background .2s ease, color .2s ease; } /* Hover brightens the hairline and washes in a faint white fill rather than lifting to a different navy: there is no fill to lift now that the base is transparent, and a navy-on-navy wash would be as invisible as the filled tag was against a navy band. Still no transform — a drawn box does not move, so the wash and the brighter line are the whole feedback. */ .nav .nav-links a:hover, .nav .nav-links .nav-portals-toggle:hover, .nav .nav-links .nav-portals.open > .nav-portals-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.72); color: #fff; transform: none; } .nav .nav-links a:active { transform: none; } /* The current page still reads as a doubled border, but the old two-inset- shadow trick painted the second ring by repainting an opaque fill twice — it needed something solid behind it to shadow onto, and the fill is transparent now, so an inset shadow on it would paint nothing. A free ::before draws the doubled line instead: the pill's own border brightens slightly and a second ring sits 3px inside it on the pseudo, with the grid still showing through the pill's transparent centre between the two lines. The ::after underline the base stylesheet drew stays off, as it did before — two current-page markers is one too many and the doubled frame is the louder of the pair. Hover needs no rule of its own here any more either: with no fill left to protect, the base a:hover wash and ink apply on top of an active pill exactly as they would on any other. */ .nav .nav-links a.active { border-color: rgba(255,255,255,0.70); } .nav .nav-links a.active::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,0.42); pointer-events: none; } .nav .nav-links a.active::after { display: none; } /* Portals panel, floated below the trigger. CLICK-TO-OPEN BY DESIGN (Ben, 2026-08-26): opens on .open (click, driven by main.js), or :focus-within as the keyboard path when scripting is off. Hover must never open this menu — a hover clause once sat on the visibility chain below but never worked (styles.css owns display and has no hover clause), and when the selector leak made it half-work it exposed all five doors on a mere point. Do not add hover-open back. See styles.css for the base .nav-portals-menu display rules this builds on. Navy with a brass keyline, not paper. The paper round put this panel on #F5F2EC because a paper label needed an opaque rule to exist at all against a paper band; the band is navy again, and a bright paper panel hanging off a navy band is the wrong object now, not the same object turned over. Navy with the same double-inset trick the title-block frame itself uses reads instead as one more cut of the same drafting plate. Same construction as the frame's inset shadows: the first repaints navy 3px in so the panel's own edge stays crisp under the radius, the second lays a faint brass ring at 4px underneath it, and the 1px that shows between them is the keyline. The outer border is a plain brass line rather than matching the fill — unlike the header frame, this panel floats free over the page body below it, so it needs a visible edge of its own to read as a raised object rather than a hole cut in the navy. The blur is gone because the fill is fully opaque; nothing shows through to soften. */ .nav .nav-links .nav-portals-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; padding: 8px; border-radius: 4px; border: 1px solid var(--brass-line); background: #04265c; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 3px #04265c, inset 0 0 0 4px var(--brass-faint), 0 16px 36px rgba(1,15,40,0.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 55; } /* Child combinators for the same reason as the base rules in styles.css — see the long note there. This chain is the desktop half of the same leak and had to be cut in the same pass: styles.css governs display, this governs opacity/visibility, and the panel only shows when BOTH flip, so fixing one alone would have left the gate half-closed. :hover mattered most here while it existed. Written as a descendant, merely pointing at Portals painted all five doors before a single click — the fastest way to see the bug and the one no keyboard test would have caught. The hover clause is now REMOVED entirely per Ben's click-to-open ruling (2026-08-26); it was dead anyway, since styles.css owns display and never had a hover clause. The :has() clause is new on this chain rather than copied. The base rule in styles.css always carried one; this one never did, and got away with it because clicking Drawbridge leaves focus inside the parent group, so :focus-within happened to hold the parent panel visible. That is an accident, not a mechanism — it would fail the moment the panel opened from anything but a focus-bearing click. Stating it explicitly makes the parent stay visible because a nested group is open, which is the actual reason it should. */ .nav .nav-links .nav-portals.open > .nav-portals-menu, .nav .nav-links .nav-portals:has(.nav-portals.open) > .nav-portals-menu, html:not(.js-portals) .nav .nav-links .nav-portals:focus-within > .nav-portals-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; } /* The rows are menu entries, not four more pills, so they stay unboxed: background and border-color both cancel the pill styling the base .nav-links a rule would otherwise put on them. Paper ink on the navy panel now, the same light-on-dark reading as the header pills beside it — there is no paper surface left here for a navy-on-paper inversion to invert against, so hover simply lightens the row instead of flipping it. */ .nav .nav-links .nav-portals-menu a { display: block; text-align: left; background: transparent; border-color: transparent; color: var(--paper); } .nav .nav-links .nav-portals-menu a:hover, .nav .nav-links .nav-portals-menu a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; } /* Drawbridge's panel is a second .nav-portals-menu nested inside this one. Left alone it would inherit the position:absolute treatment above and float off as its own detached panel; instead it drops the floating chrome and flows in place, indented under the Drawbridge row with a brass keyline standing in for the outer panel's frame, so opening it grows this panel rather than stacking a second one on top of it. */ .nav .nav-links .nav-portals-sub .nav-portals-menu { position: static; min-width: 0; margin-top: 4px; padding: 4px 0 4px 14px; border: 0; border-left: 1px solid var(--brass-faint); border-radius: 0; background: transparent; box-shadow: none; transform: none; } } @media (min-width: 901px) { /* Drafting tags, not glass tiles. These were domed buttons — a top-lit bevel, a 3D shadow stack and a 10px radius — which read as UI chrome sitting on top of the drawing. On a sheet the labels would be boxed in thin uniform rule, so that is what they are: one hairline all the way round, a transparent fill, and a 2px radius that stops just short of a hard corner. A middle chapter filled these solid navy for a paper band; the band is navy again, so the fill goes back to nothing rather than sitting invisible on top of more navy — see the (min-width: 861px) block above for the fuller version of this note. The blur is gone. It mattered when the fill was translucent glass; there is nothing left to blur once the fill is either transparent or opaque. */ .hh-nav.nav-links a, .hh-nav.nav-links .nav-portals-toggle { border-radius: 2px; border: 1px solid var(--paper-line); background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; color: var(--paper); font-size: 0.9rem; letter-spacing: 0.2em; padding: 9px 16px; transition: border-color .2s ease, background .2s ease, color .2s ease; } /* No lift and no press. A drawn box doesn't move, so the wash and the brighter hairline are the whole feedback, which is why the transition drops transform. */ .hh-nav.nav-links a:hover, .hh-nav.nav-links .nav-portals-toggle:hover, .hh-nav.nav-links .nav-portals.open > .nav-portals-toggle { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.72); color: #fff; transform: none; } .hh-nav.nav-links a:active { transform: none; } /* The current page still carries a doubled border, drawn on a free ::before now that the fill is transparent and has nothing left for an inset shadow to repaint — see the (min-width: 861px) block above for the full explanation. */ .hh-nav.nav-links a.active { border-color: rgba(255,255,255,0.70); } .hh-nav.nav-links a.active::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,0.42); pointer-events: none; } .hh-nav.nav-links a.active::after { display: none; } /* Portals panel, same treatment as the interior-page nav's version — see the (min-width: 861px) block above for the full explanation. Duplicated rather than shared because the two navs already collapse at different breakpoints (860px / 900px) and everything else in this file follows that same split. */ .hh-nav.nav-links .nav-portals-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; padding: 8px; border-radius: 4px; border: 1px solid var(--brass-line); background: #04265c; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 0 0 3px #04265c, inset 0 0 0 4px var(--brass-faint), 0 16px 36px rgba(1,15,40,0.5); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 55; } /* Child combinators and the added :has() clause, same as the interior nav's chain above and for the same reasons — see that block. Hover clause removed per the same click-to-open ruling. */ .hh-nav.nav-links .nav-portals.open > .nav-portals-menu, .hh-nav.nav-links .nav-portals:has(.nav-portals.open) > .nav-portals-menu, html:not(.js-portals) .hh-nav.nav-links .nav-portals:focus-within > .nav-portals-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity .18s ease, transform .18s ease; } .hh-nav.nav-links .nav-portals-menu a { display: block; text-align: left; background: transparent; border-color: transparent; color: var(--paper); } .hh-nav.nav-links .nav-portals-menu a:hover, .hh-nav.nav-links .nav-portals-menu a:focus-visible { background: rgba(255,255,255,0.09); color: #fff; } /* Same nested-panel fix as the interior nav above — see that block for the full explanation. */ .hh-nav.nav-links .nav-portals-sub .nav-portals-menu { position: static; min-width: 0; margin-top: 4px; padding: 4px 0 4px 14px; border: 0; border-left: 1px solid var(--brass-faint); border-radius: 0; background: transparent; box-shadow: none; transform: none; } } /* ---- 3. Footer legal row, admin door, version stamp ---------------------- */ .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; order: 2; flex: 1 1 100%; margin: 4px 0 2px; padding-top: 16px; border-top: 1px solid var(--line-soft); } .footer-legal a { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--white-55); transition: color .2s ease; } .footer-legal a:hover { color: var(--white); } /* The staff door. Deliberately quiet — Cloudflare Access is what actually guards it, this is just a bookmark for the two people who need it. */ .footer-legal a.footer-admin { margin-left: auto; color: rgba(255,255,255,0.34); } .footer-legal a.footer-admin:hover { color: var(--white-70); } @media (max-width: 640px) { .footer-legal a.footer-admin { margin-left: 0; } } .site-ver { font-family: var(--mono); letter-spacing: 0.08em; color: rgba(255,255,255,0.34); } /* ---- 4. Legal pages ------------------------------------------------------ */ /* Long-form prose. Narrow measure, generous headings, and links that read as links — these pages exist to be read, not skimmed. */ .legal-body h2 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); margin: 40px 0 12px; } .legal-body h2:first-child { margin-top: 0; } .legal-body p { color: var(--white-70); margin: 0 0 14px; } .legal-body p strong { color: var(--white); } .legal-body a { color: var(--white); border-bottom: 1px solid var(--line); } .legal-body a:hover { border-color: var(--white-70); } .legal-body ul.tick-list { margin: 18px 0 26px; } /* ---- 5. Compact brand mark ----------------------------------------------- */ /* The circular LD monogram, used everywhere the full LEV DEVELOPMENTS lockup isn't: the interior-page headers and the footer. Inlined rather than shipped as a file because the connector that pushes this repo can't carry binaries, and 2.4 KB is a fair trade against a manual upload round-trip. If it ever grows, move it to /assets and reference it by URL. The disc is the page navy exactly, so it sinks into the background and the white ring and monogram read as floating linework. drop-shadow follows the PNG's alpha rather than its box, so the glow traces the outer circle. */ :root{ --ld-mark:url("data:image/png;base64,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"); --ld-glow:drop-shadow(0 0 3px rgba(255,255,255,.55)) drop-shadow(0 0 9px rgba(255,255,255,.32)); } /* Square box and centred, replacing the 150x40 wordmark from styles.css. The glow is back: --ld-glow is two white drop-shadows, which reads as light lifting the disc off the navy band it sits on again. It went filter:none for one round only, while the band was paper — a white halo over #F5F2EC read as a dirty edge round the disc rather than as light, so it had to come off for that one surface. The footer copy below never lost it, because the footer was always navy; the interior header rejoins it now that the band is navy again too. The artwork itself is unchanged, and deliberately so. This mark is not ink-on-transparent like the hero lockup is: its disc is an opaque navy plate with the ring and the monogram knocked out of it in white, so it cannot be masked to brass the way the hero lockup was — the alpha is the whole square, and a mask would fill that whole square solid brass rather than pick out the ring and the letters. It stays its own navy-and-white linework, with the glow doing the work of lifting it off the band instead. See the note in section 6. */ .brand-logo{ background-image:var(--ld-mark); background-position:center; width:40px; height:40px; filter:var(--ld-glow); } /* The interior mark gets the same brass keyline box the home hero's lockup uses, for consistency between the two header variants: a thin border on ::before and four corner ticks on a plate 6px beyond it on ::after, same construction as .hh-logo::before/::after in styles.css. Flat overhang values here rather than clamps, because .brand doesn't scale across viewports the way the hero lockup does — a fixed 40px mark needs no responsive term. Scoped to .nav .brand rather than the bare .brand class: .footer .brand already has a ::before of its own (the swapped-in monogram glyph, a real flex item rather than an overlay) and giving .brand a second, unscoped ::before here would collide with it on every page that has a footer, which is every page. */ .nav .brand { position: relative; } .nav .brand::before { content: ""; position: absolute; inset: -6px -10px; border: 1px solid var(--brass-line); pointer-events: none; } .nav .brand::after { content: ""; position: absolute; inset: -12px -16px; pointer-events: none; background-repeat: no-repeat; background-image: var(--brass-tick), var(--brass-tick), var(--brass-tick), var(--brass-tick); background-size: 10px 10px; background-position: 1px 1px, calc(100% - 11px) 1px, 1px calc(100% - 11px), calc(100% - 11px) calc(100% - 11px); } /* Footer: swap the house glyph for the mark. "Lev Developments" sits alongside in text, so the name survives the change here. */ .footer .brand svg{display:none} .footer .brand::before{ content:""; width:40px; height:40px; flex:none; background:var(--ld-mark) no-repeat center/contain; filter:var(--ld-glow); } /* ---- 6. Home masthead: the lockup's brass paint ---------------------------- */ /* One rule left in this section now that the header is navy again: the alpha-mask technique below is unchanged, only the paint drawn through the mask has moved from navy to brass. This file loads last on every page that has a header, which is what lets it reach .hh-logo-img, set in brand-hero.css. Two more rules used to live here and both are gone rather than restored. The dashed masthead rule and its drop tick (the paper round's .hh-masthead::after / ::before, blanked here with display:none because they were drawn in white for navy and half-disappeared on paper) are simply not in styles.css or brand-hero.css any more — the brass title-block frame replaced them outright rather than being layered on top of a display:none, so there is nothing left here to hide. The paper-only nav-toggle exception is gone the same way: the toggle now has one rule for both header variants, light-on-navy in the .nav-toggle block in styles.css, so there is no second state left for this file to patch in. Stacking either override back on top of an already-correct base rule would only reopen the bug the two of them used to fight over. */ /* The home hero lockup, recoloured to brass. Masked, not filtered. A filter chain that tries to walk white round to a specific hue has to go through invert and sepia and hue-rotate and lands on an approximation that fringes at the edges of the letterforms. The mask is exact: the artwork is 560x167 with 92 percent of it fully transparent and every opaque pixel pure white, so its alpha IS the shape of the lockup. Paint flat brass through that alpha and the result is the same drawing in brass, with the original anti-aliasing intact and no new asset to ship. The mask source is the webp, not the wordmark data-URI in styles.css. That data-URI is overridden for this element by brand-hero.css and has not been what renders here for some time; it is also a different lockup at a different aspect ratio, so masking with it would have cut the wrong shape. width and height stay where brand-hero.css set them. Only the paint changes — from #04265c, tuned for a paper band, to var(--brass) for a navy one; navy-on-navy would have been invisible. */ .hh-logo-img{ background-image:none; background-color:var(--brass); -webkit-mask-image:url("/assets/lev-logo-blueprint.webp"); mask-image:url("/assets/lev-logo-blueprint.webp"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:left center; mask-position:left center; -webkit-mask-size:contain; mask-size:contain; filter:none; }