/* ===== Storefront design system ===== Premium tokens in :root; every color/size derives from them. Legacy token names are aliased to the new palette so admin/account/table/form pages recolor for free. */ :root { /* JAA Contractors palette (Phase 2 rebrand) — canonical tokens, matches mockup/JAA-HOME.html exactly. Every legacy alias below is repointed to these so admin recolor + every downstream component (built against the old bronze/paper names) repaints for free, no call-site changes. */ --hivis: #EDB420; /* JAA logo yellow — primary accent */ --hivis-deep: #C9950E; --girder: #17191C; /* charcoal — dark chrome + body ink */ --girder-2: #212429; --steel: #5B5F64; /* muted secondary text */ --steel-light:#8A8E93; --concrete: #E9E6E0; /* page background */ --concrete-2: #DEDAD2; --surface: #ffffff; --line: #D5D1C9; --line-dark: #33373C; --f-disp: 'Archivo',system-ui,'Segoe UI',sans-serif; --f-body: 'Inter',system-ui,'Segoe UI',sans-serif; --f-mono: 'Inter',system-ui,'Segoe UI',sans-serif; /* label/data alias — sans, no typewriter anywhere */ --pad: clamp(24px, 5vw, 90px); /* full-width band side padding */ --wrap: 1440px; /* Legacy aliases (older admin/account/form/table classes reference these names) */ --paper: var(--concrete); --ink: var(--girder); --stone: var(--concrete-2); --mut: var(--steel); --bronze: var(--hivis); --bronze-d:var(--hivis-deep); --char: var(--girder); /* dark chrome — topbar + admin sidebar */ --accent-dark: var(--hivis); /* accent color for use on dark chrome */ --sage: #4E5A4C; --bg: var(--paper); --accent: var(--bronze); --font-body: var(--f-body); --font-mono: var(--f-mono); } * { box-sizing: border-box; } /* Guard: never allow a horizontal scroll on any device. `clip` blocks sideways overflow without creating a scroll container (so sticky/position stay intact). */ html { overflow-x: clip; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--f-body); /* Sticky footer: full-height flex column so main grows and the footer stays at the bottom. */ min-height: 100vh; display: flex; flex-direction: column; overflow-x: clip; max-width: 100%; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--f-disp); font-weight: 800; margin: 0; letter-spacing: -.015em; } :focus-visible { outline: 3px solid var(--bronze); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); } .mono { font-family: var(--f-mono); } .eyebrow { font: 600 11px/1.4 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--bronze-d); margin: 0 0 10px; } /* ---- Full-bleed content shell ---- */ .site-main { flex: 1 0 auto; } /* grows to pin the footer */ .page { padding-top: 26px; padding-bottom: 72px; } /* default (non-full-bleed) page wrapper — bottom gap before footer */ /* ---- Top contact bar + header ---- */ .topbar { background: var(--girder); color: #CFD2D6; font: 600 12.5px var(--f-body); } .topbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; min-height: 40px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; } .topbar span { font-size: 12.5px; letter-spacing: .02em; } .topbar b { color: #fff; } .topbar .sep { color: var(--steel); margin: 0 12px; } .header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; } /* The header row can run wider than the 1200px body wrap (matches the mockup) and must NEVER wrap to a second line — logo + nav always share one row on desktop. */ .header .wrap { max-width: var(--wrap); display: flex; align-items: center; gap: 28px; min-height: 80px; flex-wrap: nowrap; position: relative; } .logo { font-family: var(--f-disp); font-weight: 800; font-size: 21px; letter-spacing: -.01em; margin-right: 8px; flex: none; } .logo b { color: var(--bronze); } .header .logo-img { height: 30px; width: auto; flex: none; } /* Phase 9a.2 added "In-House Trades" as its own nav item; gap/font tightened a touch (28px/14.5px -> 20px/13.5px) so all 7 items (Home/About/What We Do/In-House Trades/What We Build/Resources/ Contact) still share one row at desktop widths down to ~1280px. Never wraps (flex-wrap: nowrap) and never drops an item. */ .mainnav { display: flex; flex: 1; justify-content: center; align-items: stretch; align-self: stretch; gap: 20px; font-weight: 600; font-size: 13.5px; flex-wrap: nowrap; } .header-cta { flex: none; padding: 10px 18px; } .tb-link { color: #fff; font-weight: 700; } .tb-link:hover { color: var(--hivis); } .mainnav > .nav-top { position: relative; } .mainnav a { white-space: nowrap; } .mainnav a:hover { color: var(--bronze-d); } .mainnav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--hivis); } .mainnav > a.btn { align-self: center; padding: 10px 16px; flex: none; } /* Mega menu (Phase 9a): a CONTAINED charcoal card bounded to the header content width (not edge-to-edge, it's positioned relative to .header .wrap above), opened on hover AND keyboard focus (:focus-within), collapsing to a plain stacked list inside the mobile burger menu, and degrading to plain links (no JS at all) if scripting is off. */ .nav-item { display: flex; align-items: center; } /* Catalog entry that appears ONLY inside the mobile menu. Needs a.nav-mobile-only (0,2,1) to beat .mainnav > .nav-top (0,2,0) below — otherwise it leaks onto desktop and Catalog shows twice. */ .mainnav a.nav-mobile-only { display: none; } .mainnav > .nav-top, .nav-item > .nav-top { display: inline-flex; align-items: center; height: 100%; position: relative; } .has-mega > .nav-top::after { content: ""; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .55; transition: transform .15s ease; } .nav-item:hover > .nav-top::after, .nav-item:focus-within > .nav-top::after { transform: translateY(0) rotate(225deg); } .mega { position: absolute; left: 0; right: 0; top: calc(100% + 9px); background: var(--girder); border: 1px solid var(--line-dark); box-shadow: 0 30px 60px rgba(0,0,0,.4); padding: 26px clamp(20px, 4vw, 72px) 30px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 40; } .mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; } /* hover bridge over the float gap */ .nav-item:hover > .mega, .nav-item:focus-within > .mega { opacity: 1; visibility: visible; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .mega, .has-mega > .nav-top::after { transition: none; } } .mega-in { display: block; max-width: var(--wrap); margin: 0 auto; } /* ONE shared grid for every mega panel (megamenu cohesion pass): one or two link columns (or the What We Build market-card grid) on the left, plus the consistent .mega-feature panel on the right. grid-auto-columns: max-content + justify-content: center sizes the whole row to its actual content and centers it inside the header-width bar — a lighter menu (What We Do) reads as an intentionally compact card with balanced margins on both sides, a fuller one (Resources) fills more of the same space, and neither ever shows a stretched grid with a lopsided empty void on one side (the old Resources bug). */ .mega-grid { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; align-items: start; justify-content: center; gap: 48px; } .mega-col { display: flex; flex-direction: column; min-width: 190px; } .mega-colh { font-family: var(--f-disp); font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--hivis); margin: 0 0 12px; } .mega-l { display: block; padding: 7px 0; font-family: var(--f-body); font-size: 14.5px; font-weight: 500; color: #E4E6E8; border-radius: 3px; } .mega-l:hover { color: var(--hivis); } .mega-l-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; } .mega-more { display: inline-block; margin-top: 10px; font-weight: 700; font-size: 13px; color: var(--hivis); } .mega-more:hover { color: #fff; } /* Shared feature-panel spec (all 4 menus, cohesion pass): bordered charcoal card, hi-vis eyebrow, Archivo heading, one line of copy, and a CTA. Fixed width + min-height so every menu's right rail reads as the same sibling component no matter how much link content sits to its left. */ .mega-feature { width: 280px; min-height: 210px; background: var(--girder-2); border: 1px solid var(--line-dark); border-radius: 4px; padding: 26px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; } .mega-feature-eyebrow { font-family: var(--f-body); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--hivis); } .mega-feature-h { font-family: var(--f-disp); font-weight: 800; font-size: 19px; line-height: 1.2; color: #fff; margin: 0; letter-spacing: -.01em; } .mega-feature p { color: #AEB2B7; font-size: 13.5px; line-height: 1.5; margin: 0; flex: 1; } .mega-feature .btn { text-align: center; justify-content: center; margin-top: auto; } .mega-feature .mega-more { text-align: center; } /* Resources' "Featured guide" card adds a thumbnail above the eyebrow — same panel spec, more content, so the extra height reads as an intentionally richer card, not a mismatched one. */ .mega-feature-media { margin: -26px -26px 4px; overflow: hidden; } /* What We Build: 6 market cards with a thumbnail image (or a clean placeholder), sized to their own column now that the grid sizes to content instead of stretching to the full header width. */ .mega-mcards { display: grid; grid-template-columns: repeat(3, 116px); gap: 16px 14px; } .mega-mcard { display: block; } .mega-mcard-img { display: block; aspect-ratio: 4/3; border-radius: 4px; overflow: hidden; background: var(--girder-2); border: 1px solid var(--line-dark); } .mega-mcard-img img { width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .15s ease, transform .3s ease; } .mega-mcard:hover .mega-mcard-img img { opacity: 1; transform: scale(1.05); } .mega-mcard-ph { display: block; width: 100%; height: 100%; background: repeating-linear-gradient(135deg, var(--girder-2) 0 10px, var(--girder) 10px 20px); } .mega-mcard-t { display: block; margin-top: 9px; font-weight: 700; font-size: 13.5px; color: #E4E6E8; } .mega-mcard:hover .mega-mcard-t { color: var(--hivis); } /* Mobile nav toggle (no-JS checkbox hack) — hidden on desktop, revealed under 900px */ .nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; } .nav-burger { display: none; width: 44px; height: 44px; margin-left: auto; cursor: pointer; position: relative; } .nav-burger span, .nav-burger span::before, .nav-burger span::after { position: absolute; left: 10px; width: 24px; height: 2px; background: var(--ink); transition: transform .15s ease, opacity .15s ease; } .nav-burger span { top: 21px; } .nav-burger span::before { content: ""; top: -7px; } .nav-burger span::after { content: ""; top: 7px; } .nav-toggle:checked ~ .nav-burger span { background: transparent; } .nav-toggle:checked ~ .nav-burger span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle:checked ~ .nav-burger span::after { transform: translateY(-7px) rotate(-45deg); } .hspace { flex: 1; } .hsearch { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: #fff; padding: 9px 13px; min-width: 210px; color: var(--mut); font-size: 14px; } .hsearch:hover { border-color: var(--bronze); } .hicons { display: flex; gap: 18px; font-weight: 600; font-size: 14px; } .hicons a:hover { color: var(--bronze); } /* ---- Footer ---- */ /* Bare presentation chrome (no-login shared spec book): brand + document, nothing to wander into. */ .header-bare .wrap { justify-content: space-between; gap: 16px; } .bare-tag { font: 700 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); white-space: nowrap; } .footer.footer-bare { background: transparent; color: var(--mut); padding: 0; margin-top: 44px; } .footer.footer-bare .base { border-top: 1px solid var(--line); margin-top: 0; padding: 18px 0; color: var(--mut); font-size: 13px; } .footer { background: var(--girder); color: #AEB2B7; padding: 64px 0 0; font-size: 14px; } .footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 30px; padding-bottom: 44px; } .footer .logo { color: #fff; margin-bottom: 16px; } .footer .logo b { color: var(--accent-dark); } .footer .blurb { color: #9DA1A6; margin-top: 12px; max-width: 34ch; line-height: 1.7; } .footer h5 { font: 600 12px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-light); margin: 0 0 18px; } .footer a { display: block; padding: 5px 0; color: #C4C8CC; font-size: 14.5px; } .footer a:hover { color: var(--hivis); } .footer .base { border-top: 1px solid var(--line-dark); margin-top: 0; padding: 22px 0; color: var(--steel); font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; } .footer .legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; } .footer .legal-links a { display: inline; padding: 0; color: var(--steel); } .footer .legal-links a:hover { color: #fff; } /* Newsletter signup — footer box, posts to /newsletter, fires newsletter_subscribed. */ .nl { display: flex; gap: 8px; margin-top: 14px; } .nl input { flex: 1; background: var(--girder-2); border: 1px solid var(--line-dark); color: #fff; padding: 11px 13px; font-family: inherit; font-size: 14px; } .nl input::placeholder { color: var(--steel); } .nl button { background: var(--hivis); color: var(--girder); border: 0; font-weight: 700; padding: 0 18px; cursor: pointer; } .nl button:hover { background: var(--hivis-deep); } .nl-msg { margin-top: 10px; font-size: 13px; } .nl-msg.ok { color: #fff; } .nl-msg.error { color: #F3B9A3; } /* ---- Portal (admin + client): sidebar + content ---- */ .portal { flex: 1 0 auto; display: grid; grid-template-columns: 250px minmax(0, 1fr) 344px; min-height: 100vh; } .portal.no-rail { grid-template-columns: 250px minmax(0, 1fr); } .p-side { background: var(--char); color: #CFC7B8; display: flex; flex-direction: column; padding: 20px 0 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .p-brand { font-family: var(--f-disp); font-weight: 600; font-size: 21px; color: #fff; padding: 0 22px 16px; } .p-brand b { color: var(--accent-dark); } .p-user { padding: 0 22px 16px; margin: 0 0 6px; border-bottom: 1px solid #3a352e; font-size: 14px; color: #fff; } .p-user span { display: block; font: 700 10px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #8C8474; margin-top: 3px; } .p-nav { flex: 1 0 auto; padding: 8px 0; } .p-nav h5 { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #8C8474; margin: 18px 22px 6px; } .p-nav a { display: block; padding: 8px 22px; color: #CFC7B8; font-size: 14px; border-left: 3px solid transparent; } .p-nav a:hover { background: #2b2721; color: #fff; } .p-nav a.active { background: #2b2721; color: #fff; border-left-color: var(--bronze); } .p-side-foot { padding: 14px 22px 0; margin-top: 10px; border-top: 1px solid #3a352e; } .p-side-foot a { color: #8C8474; font-size: 13px; display: block; padding: 6px 0; } .p-side-foot a:hover { color: #fff; } .p-logout { background: transparent; color: #CFC7B8; border: 1px solid #4a453d; padding: 9px 14px; width: 100%; margin-top: 8px; font-weight: 600; } .p-logout:hover { background: #2b2721; color: #fff; } .p-main { background: var(--paper); min-width: 0; } .p-content { padding: 28px 44px 64px; max-width: none; } /* Right rail — permanent shell furniture. Reserved for global Alerts + Activity (wired later); a page may also dock context here. Fills the far-right space; tucks away on narrow screens. */ .p-rail { background: #fff; border-left: 1px solid var(--line); height: 100vh; position: sticky; top: 0; overflow-y: auto; padding: 26px 22px; } .rail-panel { margin-bottom: 28px; } .rail-panel:last-child { margin-bottom: 0; } .rail-panel > h4 { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .rail-empty { color: var(--mut); font-size: 13px; line-height: 1.5; } .rail-feed { list-style: none; margin: 0; padding: 0; } .rail-feed li { padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; } .rail-feed li:last-child { border-bottom: 0; } .rail-feed .rf-time { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; } .rail-alert { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.4; } .rail-alert:last-child { border-bottom: 0; } .rail-alert .rf-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze); margin-top: 5px; } .rail-more { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--bronze-d); } .p-content h1 { font-size: 30px; margin: 0 0 4px; } .p-content > p:first-of-type { color: var(--mut); } .p-sub { color: var(--mut); margin: 0 0 8px; } /* Dashboard stat cards */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; margin: 24px 0 8px; } .stat-card { background: #fff; border: 1px solid var(--line); padding: 20px; display: block; } .stat-card:hover { border-color: var(--bronze); } .stat-card b { display: block; font-family: var(--f-disp); font-size: 34px; line-height: 1; color: var(--ink); } .stat-card .lbl { display: block; font-weight: 700; font-size: 14px; margin: 10px 0 4px; color: var(--ink); } .stat-card .desc { color: var(--mut); font-size: 13px; } /* Mobile admin drawer: hidden/inert on desktop, activated in the ≤820px block below. */ .p-drawer-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .p-topbar, .p-backdrop { display: none; } /* Rail tucks away before the layout gets tight; nav + main stay. */ @media (max-width: 1240px) { .portal { grid-template-columns: 250px minmax(0, 1fr); } .p-rail { display: none; } } @media (max-width: 820px) { /* auto 1fr so the top bar stays content-height (grid's align-content:normal would otherwise stretch it) and the main panel fills the viewport. */ .portal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } /* Compact sticky bar so page content starts at the top, not below the whole menu. */ .p-topbar { display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 45; background: var(--char); color: #fff; padding: 10px 14px; } .p-topbrand { font-family: var(--f-disp); font-weight: 600; font-size: 18px; color: #fff; } .p-topbrand b { color: var(--accent-dark); } .p-burger { display: inline-flex; width: 42px; height: 42px; cursor: pointer; position: relative; flex: none; } .p-burger span, .p-burger span::before, .p-burger span::after { content: ""; position: absolute; left: 9px; width: 24px; height: 2px; background: #fff; transition: transform .18s ease, opacity .18s ease; } .p-burger span { top: 20px; } .p-burger span::before { top: -7px; } .p-burger span::after { top: 7px; } /* Sidebar becomes an off-canvas drawer. */ .p-side { position: fixed; top: 0; left: 0; bottom: 0; width: 274px; max-width: 84vw; height: 100vh; z-index: 60; transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.55); } .p-drawer-cb:checked ~ .portal .p-side { transform: translateX(0); } .p-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .2s ease; } .p-drawer-cb:checked ~ .portal .p-backdrop { opacity: 1; visibility: visible; } /* When open, morph the burger into an X. */ .p-drawer-cb:checked ~ .portal .p-burger span { background: transparent; } .p-drawer-cb:checked ~ .portal .p-burger span::before { transform: translateY(7px) rotate(45deg); } .p-drawer-cb:checked ~ .portal .p-burger span::after { transform: translateY(-7px) rotate(-45deg); } .p-content { padding: 22px 16px; } /* Continuous view-transition names fight the fixed drawer on navigation — off on mobile. */ .p-side, .p-main { view-transition-name: none; } } /* ---- Material image box (real photo, or SVG texture fallback) ---- */ .img { position: relative; overflow: hidden; background: var(--stone); } .img > svg, .img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .img .tag { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(26,23,18,.82); color: #FAF6EE; font: 700 10px var(--f-body); letter-spacing: .12em; text-transform: uppercase; padding: 5px 9px; } .ratio-1 { aspect-ratio: 1/1; } .ratio-43 { aspect-ratio: 4/3; } .ratio-56 { aspect-ratio: 5/6; } .ratio-169 { aspect-ratio: 16/9; } /* ---- Media slot: an operator-pasted image URL, or a clean captioned placeholder when blank (Phase 9b, lib/media.php media_slot()). Used on every service/trade/market/city/article image slot so an unset image looks intentional, never broken. ---- */ .media-slot { position: relative; overflow: hidden; background: var(--concrete-2); display: block; } .media-slot.cover { position: absolute; inset: 0; } .media-slot img { width: 100%; height: 100%; object-fit: cover; display: block; } .media-slot.ph { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--line); } .media-slot.ph .ph-cap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; text-align: center; } .media-slot.ph .ph-ic { width: 26px; height: 26px; stroke: var(--hivis-deep); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .media-slot.ph .ph-txt { font: 600 12.5px/1.4 var(--f-body); color: var(--steel); max-width: 22ch; } /* On a dark full-bleed hero band the placeholder is a plain charcoal panel (matches the no-photo hero this replaces) instead of a light dashed box. */ .media-slot.hero-img.ph { border: none; background: var(--girder); } .media-slot.hero-img.ph .ph-ic { stroke: var(--hivis); opacity: .55; } .media-slot.hero-img.ph .ph-txt { color: rgba(255,255,255,.55); } /* A boxed lead image at the top of a detail page's body (service/trade/city). */ .lead-media { margin-top: 48px; } /* ---- Buttons ---- */ .btn, button { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); border: 0; font: 700 14px var(--f-body); padding: 12px 22px; cursor: pointer; } .btn:hover, button:hover { background: var(--char); } /* Bronze/yellow fill needs DARK text for contrast (the accent is now a bright hi-vis yellow, not the old dark brick) — every existing .btn.bronze call site repaints correctly for free. */ .btn.bronze, .btn-accent { background: var(--bronze); color: var(--girder); } .btn.bronze:hover, .btn-accent:hover { background: var(--bronze-d); color: var(--girder); } .btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--paper); } /* Ghost button on a dark background (hero, dark panels) — light text/border instead of dark. */ .btn.ghost.on-dark { color: #fff; border-color: #fff; } .btn.ghost.on-dark:hover { background: rgba(255,255,255,.1); color: #fff; } /* Dark-fill button — the CTA-band "Get a quote" action on the yellow band. */ .btn.dark { background: var(--girder); color: #fff; } .btn.dark:hover { background: var(--girder-2); color: #fff; } .btn.big { padding: 15px 28px; font-size: 15px; } /* ============================================================================ Back-office control primitives — scoped to .p-content (admin + client portal). The storefront layout is separate and untouched. Built by lib/ui.php (ui_btn / ui_post / ui_pill). Kinds: primary, default, quiet, danger, icon. Size: .sm. Every real admin button is a .btn (emitted by the helpers); component buttons that carry their own class (.cms-tab, media pickers, etc.) keep their own styling. ============================================================================ */ .p-content .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: #fff; color: var(--ink); border: 1px solid var(--line); font: 600 13px var(--f-body); padding: 8px 14px; line-height: 1.15; border-radius: 5px; cursor: pointer; text-decoration: none; align-self: center; white-space: nowrap; vertical-align: middle; } .p-content .btn:hover { background: var(--paper); border-color: var(--mut); color: var(--ink); } /* primary — bronze fill, the one main action of a view. Legacy .btn-accent/.bronze map here. */ .p-content .btn.primary, .p-content .btn.bronze, .p-content .btn-accent { background: var(--bronze); border-color: var(--bronze); color: #fff; } .p-content .btn.primary:hover, .p-content .btn.bronze:hover, .p-content .btn-accent:hover { background: var(--bronze-d); border-color: var(--bronze-d); color: #fff; } /* quiet — borderless muted text; inline & row actions. Legacy portal .ghost maps here. */ .p-content .btn.quiet, .p-content .btn.ghost { background: transparent; border-color: transparent; color: var(--mut); padding: 6px 8px; } .p-content .btn.quiet:hover, .p-content .btn.ghost:hover { background: transparent; border-color: transparent; color: var(--ink); } /* danger — quiet until you reach for it. */ .p-content .btn.danger { background: transparent; border-color: transparent; color: var(--mut); padding: 6px 8px; } .p-content .btn.danger:hover { background: transparent; border-color: transparent; color: #b3261e; } /* icon — square, icon-only (reorder arrows, etc.). */ .p-content .btn.icon { width: 30px; height: 30px; padding: 0; color: var(--mut); } .p-content .btn.icon:hover { border-color: var(--ink); color: var(--ink); background: #fff; } /* size */ .p-content .btn.sm { padding: 5px 10px; font-size: 12px; } .p-content .btn.icon.sm { width: 26px; height: 26px; padding: 0; } /* ============================================================================ Operator-workspace layout primitives (page_head / admin_cols / .dtable / admin_actions in lib/ui.php). Pages COMPOSE these — no page writes its own layout CSS. ============================================================================ */ /* Page header: title left, the page's primary action(s) pinned right. */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 0 0 6px; } .page-head h1 { margin: 0; } .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; } /* Two-column workspace: wide main + a docked aside that fills the space (stacks on narrow). */ .admin-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; margin-top: 22px; } .admin-cols > .ac-main { min-width: 0; } .admin-cols > .ac-aside { position: sticky; top: 20px; } .admin-cols > .ac-aside .admin-block, .admin-cols > .ac-aside .card-form { margin: 0; } .admin-cols > .ac-aside .sgrid { grid-template-columns: 1fr; } .admin-cols > .ac-aside .inline-form { flex-wrap: wrap; } .admin-cols > .ac-aside .inline-form input, .admin-cols > .ac-aside input:not([type=checkbox]):not([type=radio]), .admin-cols > .ac-aside textarea, .admin-cols > .ac-aside select { max-width: none; width: 100%; } @media (max-width: 1080px) { .admin-cols { grid-template-columns: 1fr; } .admin-cols > .ac-aside { position: static; } } /* Data table: full-width list; the last cell holds all row actions on ONE row. */ .dtable { width: 100%; border-collapse: collapse; background: #fff; } .dtable th { text-align: left; font: 400 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 11px 16px; border-bottom: 1px solid var(--line); } .dtable td { padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; } .dtable tr:last-child td { border-bottom: 0; } .dtable .dt-actions { text-align: right; white-space: nowrap; width: 1%; } .dtable .dt-actions .row-actions { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; } /* First column absorbs slack so secondary columns (Shown / actions) group at the right, no mid-gap. */ .dtable th:first-child, .dtable td:first-child { width: 100%; } .dtable td:not(:first-child), .dtable th:not(:first-child) { white-space: nowrap; } /* Mobile: a data table becomes a stack of cards — no horizontal overflow, actions never cut off. */ @media (max-width: 820px) { .dtable, .dtable tbody, .dtable tr, .dtable td { display: block; width: auto; } .dtable tr:first-child { display: none; } /* header row */ .dtable tr { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; margin-bottom: 10px; } .dtable td { border: 0; padding: 3px 0; white-space: normal; } .dtable td:first-child { width: auto; margin-bottom: 4px; } .dtable .dt-actions { text-align: left; width: auto; padding-top: 8px; } .dtable .dt-actions .row-actions { justify-content: flex-start; flex-wrap: wrap; gap: 4px; } /* Complex non-card tables (orders, products) scroll sideways instead of breaking the page. */ .p-content > .admin-block { overflow-x: auto; } } /* ---- Hero ---- */ .hero { padding: 60px 0 40px; } .hero .grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: start; } .hero h1 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; margin: 14px 0 18px; max-width: 20ch; text-wrap: balance; } .hero p:not(.eyebrow) { font-size: 19px; color: var(--mut); max-width: 46ch; margin: 0 0 26px; } .cta { display: flex; gap: 12px; flex-wrap: wrap; } /* button-pair primitive — reused everywhere */ .hero .cta { margin-bottom: 28px; } .stats { display: flex; gap: 30px; border-top: 1px solid var(--line); padding-top: 18px; flex-wrap: wrap; } .stat b { display: block; font-family: var(--f-disp); font-size: 20px; } .stat span { font: 600 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } .collage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 180px 130px 130px; gap: 14px; overflow: hidden; min-width: 0; } .collage .img:nth-child(1) { grid-row: span 2; } .collage .img:nth-child(4) { grid-column: span 2; } /* Hero-tile slideshow (2+ slide images rotate inside the large tile). Slides crossfade over the dark tile background; reduced motion = first slide only. */ .img.slides { background: #140d08; } .img .slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; } .img .slide:first-child { opacity: 1; } .slides-2 .slide { animation: heroFade2 12s infinite; } .slides-3 .slide { animation: heroFade3 18s infinite; } .slides-4 .slide { animation: heroFade4 24s infinite; } .slides-5 .slide { animation: heroFade5 30s infinite; } .img .slide:nth-child(2) { animation-delay: 6s; } .img .slide:nth-child(3) { animation-delay: 12s; } .img .slide:nth-child(4) { animation-delay: 18s; } .img .slide:nth-child(5) { animation-delay: 24s; } @keyframes heroFade2 { 0% { opacity: 1; } 42% { opacity: 1; } 50% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } } @keyframes heroFade3 { 0% { opacity: 1; } 28% { opacity: 1; } 33% { opacity: 0; } 95% { opacity: 0; } 100% { opacity: 1; } } @keyframes heroFade4 { 0% { opacity: 1; } 21% { opacity: 1; } 25% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes heroFade5 { 0% { opacity: 1; } 17% { opacity: 1; } 20% { opacity: 0; } 97% { opacity: 0; } 100% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .img .slide { animation: none; } } /* Inline field warning (e.g. a social link pasted into an mp4 field). */ .field-warn { margin: 6px 0 0; font-size: 13px; color: #8A2E1C; background: #F7E8E4; border: 1px solid #E4C4BA; padding: 8px 10px; border-radius: 6px; } /* ---- Section + heading ---- */ .section { padding: 54px 0; } .section.alt { background: var(--stone); } .shead { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 26px; } .shead h2 { font-size: 32px; letter-spacing: -.01em; } .shead a { font-weight: 700; font-size: 14px; color: var(--bronze); border-bottom: 1.5px solid var(--bronze); padding-bottom: 2px; white-space: nowrap; } /* ---- Category showcase ---- */ .cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } /* ---- Solutions / capability cards ---- */ .solgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .boards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 24px; } .boards .img { aspect-ratio: 4/3; } .board-cap { margin-top: 10px; font-weight: 600; color: var(--ink); } .solcard { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; } .solcard:hover { border-color: var(--bronze); } .solcard .img { aspect-ratio: 16/9; } .solcard .body { padding: 18px 20px 20px; } .solcard h3 { font-size: 21px; margin: 0 0 6px; } .solcard .mode { font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--bronze); margin: 0 0 8px; } .solcard p { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; } /* ---- Admin product manager: actions + filter bar ---- */ .admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; } .filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; } .filterbar input[type=search], .filterbar select { padding: 8px 11px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); width: auto; } .filterbar input[type=search] { flex: 1 1 240px; min-width: 200px; } .filterbar select { flex: 0 0 auto; min-width: 150px; } .filterbar button { flex: 0 0 auto; padding: 8px 16px; } .pager .off { color: var(--mut); opacity: .55; } .bulkbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); } .bulkbar select, .bulkbar input { padding: 7px 10px; border: 1px solid var(--line); background: #fff; font: inherit; color: var(--ink); width: auto; } .bulkbar .sel-count { font: 700 12px var(--f-mono); letter-spacing: .04em; color: var(--mut); margin-right: 4px; } .bulkbar button { padding: 7px 16px; } .cbcol { width: 34px; text-align: center; } .cell-edit { width: 82px; border: 1px solid transparent; background: transparent; font: inherit; color: var(--ink); padding: 4px 6px; } .cell-edit.narrow { width: 56px; } .cell-edit:hover { border-color: var(--line); background: #fff; } .cell-edit:focus { border-color: var(--bronze); background: #fff; outline: none; } .inline-save { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; } .inline-save .hint { margin: 0; } .healthlist { list-style: none; margin: 8px 0 0; padding: 0; } .healthlist li { padding: 7px 12px; margin: 5px 0; border-left: 3px solid var(--line); background: #fff; font-size: 14px; } .healthlist .h-error { border-left-color: #B4472E; } .healthlist .h-warn { border-left-color: var(--bronze); } .healthlist .h-info { border-left-color: var(--mut); color: var(--mut); } .mp-wrap { max-width: 420px; } .gallery-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } .gallery-thumbs img { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid var(--line); } .detail-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; } .detail-gallery .img { margin: 0; } /* ---- Client project workspace ---- */ .proj-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; } .fulfill { border: 1px solid var(--line); background: #fff; padding: 14px 16px; margin: 10px 0; } .fulfill-top { font-size: 14px; margin-bottom: 10px; } .fulfill-strip { list-style: none; display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; counter-reset: step; } .fulfill-strip li { flex: 1 1 0; min-width: 90px; text-align: center; font-size: 11.5px; color: var(--mut); padding: 8px 4px 0; border-top: 3px solid var(--line); position: relative; } .fulfill-strip li.done { color: var(--ink); border-top-color: var(--bronze); } .fulfill-strip li.now { color: var(--bronze-d); font-weight: 700; border-top-color: var(--bronze); } .release-line { margin: 12px 0 0; font-size: 14px; color: var(--ink); } .rl-label { font: 700 10px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); margin-right: 8px; } .release-form input[type=date] { max-width: 150px; } .timeline { list-style: none; margin: 6px 0 0; padding: 0; } .timeline li { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; } .timeline li:first-child { border-top: 0; } .timeline .tl-when { color: var(--mut); font-size: 12px; margin-right: 10px; } /* ---- Account overview cards ---- */ .acct-cards { grid-template-columns: repeat(4, 1fr); margin-top: 22px; } .acct-contact { margin-top: 28px; max-width: 460px; } @media (max-width: 900px) { .acct-cards { grid-template-columns: 1fr 1fr; } } /* ---- Capability "how we deliver" pipeline ---- */ .lede { font-size: 19px; line-height: 1.5; color: var(--ink); max-width: 760px; margin: 0 0 26px; } .pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .pipeline li { background: var(--paper); padding: 22px 22px 24px; position: relative; } .pipeline .pnum { font: 700 12px var(--f-mono); letter-spacing: .12em; color: var(--bronze); } .pipeline h3 { font-size: 19px; margin: 8px 0 6px; } .pipeline p { color: var(--mut); font-size: 14.5px; margin: 0; } @media (max-width: 860px) { .pipeline { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .pipeline { grid-template-columns: 1fr; } } .deliver-teaser { text-align: center; max-width: 840px; margin: 0 auto; } .deliver-teaser .lede { margin: 12px auto 22px; } /* ---- Locations (service-area index) ---- */ .loc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .loc-card { background: #fff; border: 1px solid var(--line); padding: 20px 22px; } .loc-card h3 { font-size: 21px; margin: 0 0 12px; } .loc-card h3 span { font: 700 11px var(--f-mono); letter-spacing: .08em; color: var(--mut); margin-left: 8px; } .loc-card ul { list-style: none; margin: 0; padding: 0; } .loc-card li { padding: 5px 0; border-top: 1px solid var(--line); } .loc-card li:first-child { border-top: 0; } .loc-card a { color: var(--ink); font-size: 14.5px; } .loc-card a:hover { color: var(--bronze); } @media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .loc-grid { grid-template-columns: 1fr; } } /* ---- Editorial split ---- */ .split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: center; } .split.reverse { grid-template-columns: .9fr 1.1fr; } .split.reverse .split-media { order: 2; } .split .img { aspect-ratio: 4/3; } .split h2 { font-size: 36px; line-height: 1.06; margin: 12px 0 14px; } .split p:not(.eyebrow) { font-size: 17px; color: var(--mut); margin: 0 0 20px; } .split ul { margin: 0 0 22px; padding-left: 18px; color: var(--mut); } .split li { margin: 6px 0; } /* ---- Product cards ---- */ .prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .prods.wide { grid-template-columns: repeat(3, 1fr); } .pcard { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; } .pcard:hover { border-color: var(--bronze); } .pcard .img { aspect-ratio: 1/1; } .pcard .b { padding: 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; } .pcard .dept { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bronze); } .pcard .desc { font-size: 13px; line-height: 1.45; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard .sku { font: 11px var(--f-mono); letter-spacing: .05em; color: var(--mut); } .pcard .name { font-family: var(--f-body); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ink); } .pcard .chip { align-self: flex-start; font: 600 11px var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--sage); border: 1px solid #C9D0C5; padding: 3px 8px; } .pcard .made { color: var(--bronze); border-color: #E2CBAF; } .pcard .price { margin-top: auto; font-family: var(--f-disp); font-size: 22px; font-variant-numeric: tabular-nums; } .pcard .trade { margin-top: auto; font: 700 11px var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--bronze); } .pcard .buy { margin-top: 10px; text-align: center; padding: 10px; font-weight: 700; font-size: 13px; border: 1.5px solid var(--ink); } .pcard .buy:hover { background: var(--ink); color: var(--paper); } /* ---- Value strip ---- */ .values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .value svg { width: 30px; height: 30px; stroke: var(--bronze); fill: none; stroke-width: 1.6; margin-bottom: 12px; } .value h3 { font-family: var(--f-body); font-weight: 700; font-size: 15px; margin: 0 0 5px; } .value p { margin: 0; font-size: 14px; color: var(--mut); } /* ---- Dark band ---- */ .band { background: var(--bronze); color: #fff; padding: 60px 0; } .band .wrap { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; } .band .eyebrow { color: rgba(255,255,255,.72); } .band h2 { font-size: 38px; line-height: 1.05; margin: 8px 0 0; max-width: 20ch; color: #fff; } .band p:not(.eyebrow) { color: rgba(255,255,255,.85); margin: 12px 0 0; max-width: 46ch; } .band .cta-wrap { margin-left: auto; } .band .btn.bronze, .band .btn-accent { background: #fff; color: var(--bronze); } .band .btn.bronze:hover, .band .btn-accent:hover { background: var(--paper); color: var(--bronze-d); } /* ---- Shop layout (facets + grid) ---- */ .shop-layout { display: grid; grid-template-columns: 230px 1fr; gap: 30px; align-items: start; } .facet { background: #fff; border: 1px solid var(--line); padding: 18px; } .facet h3 { margin: 22px 0 12px; font: 700 12px var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .facet h3:first-child { margin-top: 0; } .facet .check { display: block; margin: 7px 0; font-size: 14px; } .facet a.check { color: var(--mut); padding-left: 14px; } .facet a.check:hover { color: var(--bronze); } .facet a.check.active { color: var(--ink); font-weight: 700; } /* Collapsible facet — the toggle only appears on mobile (see the 900px block); on desktop the body is always shown. */ .facet-toggle-cb { position: absolute; opacity: 0; width: 1px; height: 1px; } .facet-toggle { display: none; } .facet-body { display: block; } .pager { display: flex; gap: 10px; margin: 28px 0; font-family: var(--f-mono); } .pager a, .pager span { padding: 7px 13px; border: 1px solid var(--line); background: #fff; } .pager .current { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---- Product detail ---- */ .product-detail { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 40px; align-items: start; } .detail-media .img { aspect-ratio: 4/3; } .detail-desc { color: var(--mut); margin-top: 16px; } /* Sticky on desktop so price / size / add-to-quote stay in view while the sheet scrolls; the offset clears the 78px sticky header, and sticky releases at the end of the grid. */ .spec-panel { background: #fff; border: 1px solid var(--line); padding: 26px; position: sticky; top: 94px; } .spec-panel h1 { font-size: 28px; margin: 6px 0 10px; line-height: 1.12; } .price-big { font-family: var(--f-disp); font-weight: 500; font-size: 34px; margin: 10px 0 6px; } .gate-note { color: var(--mut); font-size: 13px; margin-top: 6px; } .chip-trade { display: inline-block; background: var(--stone); color: var(--bronze); font: 700 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 11px; } .spec-table { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px; background: transparent; } .spec-table th { text-align: left; font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 8px 28px 8px 0; border-bottom: 1px solid var(--line); width: 1%; white-space: nowrap; } .spec-table td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line); } /* ---- Forms ---- */ input, select, textarea { font: 14px var(--f-body); border: 1px solid var(--line); background: #fff; padding: 11px 13px; width: 100%; color: var(--ink); } input:focus, select:focus, textarea:focus { border-color: var(--bronze); outline: none; } label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; } label.check { font-weight: 400; } label.check input { width: auto; margin-right: 6px; } .stack-form { max-width: 620px; } .p-content .stack-form { max-width: 880px; } /* admin forms (item + CMS editor) get room — wider URL/SEO fields */ .inline-form { display: flex; gap: 8px; margin-top: 12px; } .inline-form input { max-width: 280px; } .config-form { margin-top: 14px; } .config-form label { margin: 10px 0 4px; } .config-note { font-size: 12px; color: var(--mut); margin-top: 3px; } .config-note .mono { letter-spacing: .04em; } .error { background: #fff; border: 1px solid var(--ink); padding: 11px 15px; font-weight: 600; } .hint { color: var(--mut); font-size: 13px; } .qty-input { max-width: 90px; } .thumb-preview { max-width: 160px; border: 1px solid var(--line); margin-top: 8px; } /* ---- Tables + admin/account (recolored via tokens) ---- */ h1 { font-size: 30px; } table { width: 100%; border-collapse: collapse; background: #fff; } th { text-align: left; font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } th, td { padding: 13px 18px; border-bottom: 1px solid var(--line); } .admin-block { margin: 30px 0; } .admin-block h2 { font-size: 20px; margin: 0 0 14px; } fieldset { border: 1px solid var(--line); padding: 12px 15px 14px; margin: 14px 0; background: #fff; } legend { font: 400 11px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); padding: 0 6px; } fieldset label.check { display: inline-block; margin: 5px 18px 5px 0; } .area-pick { margin-top: 8px; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 8px; } .area-pick label.check { display: inline-block; width: 220px; margin: 4px 0; } .topic-pick label.check { display: block; width: auto; } .topic-pick label.check-written { opacity: .55; } .area-capability { margin: 28px 0; padding: 22px 24px; background: #fff; border-top: 3px solid var(--bronze); } .area-capability h2 { margin-bottom: 8px; } .area-capability .cta { margin-top: 16px; } .care-list { margin: 6px 0 14px; padding-left: 20px; } .care-list li { margin: 7px 0; } .admin-nav { display: flex; flex-wrap: wrap; gap: 18px; margin: 26px 0 18px; padding-top: 18px; border-top: 1px solid var(--line); } .admin-nav a { font-weight: 700; font-size: 14px; } .admin-nav a:hover { color: var(--bronze); } .build { color: var(--mut); font-family: var(--f-mono); font-size: 11px; margin-top: 40px; } .status-banner { background: #fff; border: 1px solid var(--line); padding: 14px 18px; margin-bottom: 22px; border-radius: 5px; } .status-banner.ok { border-color: var(--bronze); background: #F7EEEA; } .status-banner .eyebrow { margin-bottom: 4px; } .msg-body { white-space: pre-wrap; } .invoice-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px; } .invoice-head .brand-print { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 20px; } /* ---- Responsive ---- */ @media (max-width: 900px) { .hero .grid, .split, .split.reverse { grid-template-columns: 1fr; } .split.reverse .split-media { order: 0; } .cats, .prods, .prods.wide, .values, .footer .cols, .solgrid, .boards { grid-template-columns: 1fr 1fr; } .shop-layout { grid-template-columns: 1fr; } /* Facet becomes a collapsed accordion so products are visible immediately, not buried under 40+ departments. */ .facet { padding: 0; } .facet-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; font: 700 13px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); } .facet-toggle::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--bronze); border-bottom: 2px solid var(--bronze); transform: rotate(45deg); transition: transform .15s ease; margin-top: -3px; } .facet-toggle-cb:checked ~ .facet-toggle::after { transform: rotate(-135deg); margin-top: 3px; } .facet-body { display: none; padding: 0 16px 16px; } .facet-toggle-cb:checked ~ .facet-body { display: block; } .facet-body h3:first-child { margin-top: 4px; } .product-detail { grid-template-columns: 1fr; } .spec-panel { position: static; } .hsearch { display: none; } .header .wrap { position: relative; } .nav-burger { display: block; } /* Once the menu is a burger, the top bar is just logo + burger. Account actions (.hicons) move into the menu (.nav-mobile-only), so the header can never crowd or clip. */ .hicons { display: none; } /* On mobile the standalone CTA hides; the burger menu carries its own Get-a-quote + Log in. */ .header-cta { display: none; } .nav-burger { margin-left: auto; } .mainnav a.nav-mobile-only { display: block; height: auto; font-weight: 700; } .mainnav a.btn.nav-mobile-only { display: block; margin: 10px clamp(20px, 4vw, 72px) 4px; text-align: center; } .mainnav { display: none; align-self: auto; align-items: stretch; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-left: 0; border-bottom: 1px solid var(--line); box-shadow: 0 14px 26px rgba(36,27,18,.12); padding: 4px 0 10px; z-index: 30; max-height: calc(100vh - 60px); overflow-y: auto; } .nav-toggle:checked ~ .mainnav { display: flex; } .mainnav a { padding: 13px clamp(20px, 4vw, 72px); border-top: 1px solid var(--line); font-size: 16px; } /* Mega panels flatten into the stacked burger accordion: each trigger (What We Do/Build, Resources) becomes a section heading, its child links always shown underneath (no hover, no JS toggle needed), matching how the rest of the mobile menu already works. */ .nav-item { display: block; } .nav-item > .nav-top { display: block; height: auto; font-weight: 700; } .has-mega > .nav-top::after { display: none; } .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-radius: 0; background: none; padding: 0; } .mega::before { display: none; } .mega-in { display: block; padding: 0; max-width: none; margin: 0; } .mega-grid { display: block; } .mega-col, .mega-mcards-col { min-width: 0; } .mega-l-grid { display: block; } .mega-colh { color: var(--bronze-d); margin: 14px clamp(36px, 8vw, 92px) 2px; } .mega-l, .mega-more { display: block; padding: 11px clamp(36px, 8vw, 92px); border-top: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--ink); margin: 0; border-radius: 0; } .mega-more { font-weight: 700; color: var(--bronze-d); text-align: left; } /* Market cards collapse to compact rows (small thumbnail + name) instead of a card grid. */ .mega-mcards { display: block; } .mega-mcard { display: flex; align-items: center; gap: 12px; padding: 11px clamp(36px, 8vw, 92px); border-top: 1px solid var(--line); } .mega-mcard-img { width: 46px; height: 34px; flex: none; } .mega-mcard-t { margin-top: 0; color: var(--ink); } /* The feature panel (teaser copy + CTA) is redundant on mobile — its own links are already in the flattened accordion above, so it just hides rather than breaking the accordion. */ .mega-feature { display: none; } .band .wrap { flex-direction: column; align-items: flex-start; } .band .cta-wrap { margin-left: 0; } } @media (max-width: 560px) { /* Products stay 2-up even on phones — a single full-width column makes each card's 1:1 image enormous. */ .cats, .values, .footer .cols, .solgrid, .boards { grid-template-columns: 1fr; } .prods, .prods.wide { grid-template-columns: 1fr 1fr; gap: 12px; } .wrap { padding: 0 20px; } } @media print { .topbar, .header, .footer, .no-print { display: none !important; } body { background: #fff; } .page { padding-top: 0; } } /* ---- CMS page editor (Content / SEO tabs + live preview) ---- */ .cms-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .cms-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 14px 0 24px; } .cms-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 18px; margin-bottom: -1px; font: 600 14px var(--f-body); color: var(--mut); cursor: pointer; } .cms-tab:hover { color: var(--ink); } .cms-tab.is-active { color: var(--ink); border-bottom-color: var(--bronze); } .cms-panel[hidden] { display: none; } .cms-imgfield { margin: 0 0 18px; } .cms-imgfield .cms-upload { display: block; margin-top: 6px; font-size: 13px; color: var(--mut); } .thumb-preview { display: block; max-width: 240px; border: 1px solid var(--line); border-radius: 6px; margin-top: 10px; } .cms-seo-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 30px; align-items: start; } /* Two-pane live editor: fields on the left, the real page rendered live on the right. */ .cms-editor { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 28px; align-items: start; } .cms-edit { min-width: 0; } .cms-editor .cms-seo-grid, .cms-editor .sgrid { grid-template-columns: 1fr; } /* narrow left column: stack fields */ .cms-editor .card-form { margin: 0; } .cms-live { position: sticky; top: 18px; } .cms-live-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .cms-live-label { font: 700 11px var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); } .cms-live-status { font-size: 12px; color: var(--bronze); } .cms-live-open { margin-left: auto; font-size: 13px; } .cms-live-frame { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #fff; height: calc(100vh - 132px); position: relative; } .cms-live-frame iframe { border: 0; display: block; background: #fff; transform-origin: top left; } /* Flash a field when you click its element in the preview (reverse locate). */ .cms-field-hit, .cms-field-hit input, .cms-field-hit textarea { outline: 2px solid var(--bronze); outline-offset: 2px; } label.cms-field-hit { border-radius: 3px; box-shadow: 0 0 0 3px rgba(168,67,42,.16); } /* Draggable gallery thumbnail strip under the Images field. */ .img-strip { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 2px; } .img-chip { position: relative; width: 84px; height: 84px; border: 1px solid var(--line); background: var(--stone); overflow: hidden; cursor: grab; border-radius: 3px; } .img-chip img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; pointer-events: none; } .img-chip.dragging { opacity: .4; } .img-chip.drop-into { outline: 2px solid var(--bronze); outline-offset: -2px; } .img-badge { position: absolute; left: 0; bottom: 0; right: 0; background: rgba(168,67,42,.92); color: #fff; font: 700 9px var(--f-body); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 2px 0; } .img-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(35,25,15,.78); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; padding: 0; } .img-x:hover { background: var(--bronze-d); } /* Admin guide & documentation. */ .guide { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; align-items: start; } .guide-toc { position: sticky; top: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 2px; } .guide-toc .gt-title { font: 700 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); margin: 0 0 8px; } .guide-toc a { display: block; padding: 6px 10px; border-left: 2px solid var(--line); color: var(--mut); border-radius: 0 3px 3px 0; } .guide-toc a:hover { color: var(--ink); border-left-color: var(--bronze); background: #fff; } .guide-body { max-width: 820px; } .guide-body .lead { font-size: 18px; line-height: 1.55; color: var(--char); margin: 0 0 8px; } .guide-body h2 { font-family: var(--f-disp); font-size: 24px; margin: 40px 0 10px; padding-top: 10px; border-top: 1px solid var(--line); scroll-margin-top: 16px; } .guide-body h3 { font-family: var(--f-disp); font-size: 18px; margin: 24px 0 6px; } .guide-body p, .guide-body li { line-height: 1.65; color: var(--ink); } .guide-body ul, .guide-body ol { margin: 8px 0 8px; padding-left: 22px; } .guide-body li { margin: 0 0 6px; } .guide-body code { background: var(--stone); padding: 1px 5px; border-radius: 3px; font-size: 13px; } .guide-defs { margin: 8px 0; } .guide-defs dt { font-weight: 700; margin-top: 12px; } .guide-defs dd { margin: 2px 0 0; color: var(--ink); line-height: 1.6; } @media (max-width: 900px) { .guide { grid-template-columns: 1fr; gap: 20px; } .guide-toc { position: static; flex-flow: row wrap; } .guide-toc a { border-left: 0; border: 1px solid var(--line); border-radius: 3px; } } /* Launch-readiness checklist. */ .launch-score { display: inline-flex; align-items: baseline; gap: 8px; margin: 4px 0 18px; } .launch-score b { font-family: var(--f-disp); font-weight: 800; font-size: 34px; color: var(--ink); } .launch-score span { color: var(--mut); font-size: 14px; } .launch-list { list-style: none; margin: 0; padding: 0; } .launch-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); } .launch-list li:first-child { border-top: 0; } .lc-icon { flex: none; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; } .lc-ok .lc-icon { background: #2e7d46; } .lc-warn .lc-icon { background: var(--bronze); } .lc-info .lc-icon { background: var(--mut); font-style: italic; } .lc-body { flex: 1; min-width: 0; } .lc-label { display: block; font-weight: 600; } .lc-detail { display: block; font-size: 13.5px; color: var(--mut); } /* Saved package templates on the quote list. */ .saved-packages { margin: 20px 0 30px; padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: 5px; } .saved-packages h2 { font-size: 18px; margin: 0 0 4px; } .saved-list { list-style: none; margin: 12px 0 0; padding: 0; } .saved-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); } .sp-name { font-weight: 600; } .sp-actions { display: flex; gap: 8px; } .save-package { margin-top: 16px; gap: 8px; } /* City page internal-link mesh. */ .area-projects { margin: 40px 0; } .area-explore { margin: 40px 0; padding: 30px 0; border-top: 1px solid var(--line); } .explore-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .explore-cols h3 { font-family: var(--f-disp); font-weight: 700; font-size: 15px; margin: 0 0 12px; } .link-list { list-style: none; margin: 0; padding: 0; } .link-list li { margin: 0 0 8px; } .link-list a { font-size: 14.5px; color: var(--ink); } .link-list a:hover { color: var(--bronze-d); } @media (max-width: 640px) { .explore-cols { grid-template-columns: 1fr; gap: 22px; } } /* City page "Serving {city} and nearby" metro cross-links (Phase 8a). */ .area-nearby { margin: 0 0 40px; padding: 24px 0; border-top: 1px solid var(--line); } .area-nearby h3 { font-family: var(--f-disp); font-weight: 700; font-size: 15px; margin: 0 0 12px; } .nearby-list { display: flex; flex-wrap: wrap; gap: 10px 14px; } .nearby-list li { margin: 0; } .nearby-list a { display: inline-block; padding: 5px 12px; background: var(--stone); font-size: 13.5px; color: var(--ink); } .nearby-list a:hover { color: var(--bronze-d); } /* Email deliverability DNS records table. */ .dns-records { margin: 12px 0; } .dns-records code { font-size: 12px; word-break: break-all; } .dns-records em { color: var(--bronze-d); font-style: normal; } /* Leads dashboard: source bars + funnel. */ .lead-bar-cell { width: 40%; } .lead-bar { display: inline-block; height: 10px; background: var(--bronze); border-radius: 5px; min-width: 2px; } .funnel { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; } .funnel-step { flex: 1 1 120px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 16px 18px; text-align: center; } .funnel-step b { display: block; font: 700 30px var(--f-disp); color: var(--ink); } .funnel-step span { font-size: 13px; color: var(--mut); } .funnel-arrow { align-self: center; color: var(--mut); font-size: 20px; } /* Public FAQ accordion. */ .faq-list { max-width: 820px; } .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; list-style: none; padding: 18px 0; font-family: var(--f-disp); font-weight: 700; font-size: 18px; color: var(--ink); display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--bronze); font-size: 24px; font-weight: 400; line-height: 1; } .faq-item[open] summary::after { content: "\2013"; } .faq-a { padding: 0 0 20px; line-height: 1.65; color: var(--ink); max-width: 70ch; } /* Media library grid. */ .media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } .media-card { border: 1px solid var(--line); border-radius: 5px; background: #fff; overflow: hidden; display: flex; flex-direction: column; } .media-thumb { aspect-ratio: 4/3; background: var(--stone); overflow: hidden; } .media-thumb img { width: 100%; height: 100%; object-fit: contain; background: #fff; display: block; } .media-meta { display: flex; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line); } .media-meta input { flex: 1; min-width: 0; } .media-actions { display: flex; gap: 6px; align-items: center; justify-content: space-between; padding: 8px; } /* "Choose from library" picker modal. */ .media-picker { display: none; position: fixed; inset: 0; z-index: 90; background: rgba(20,15,10,.55); align-items: center; justify-content: center; padding: 24px; } .mp-box { background: var(--paper); border-radius: 8px; width: min(880px, 96vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,.4); } .mp-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .mp-head b { font-family: var(--f-disp); } .mp-search { flex: 1; } .mp-close { border: 0; background: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--mut); padding: 0 4px; } .mp-grid { padding: 16px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; } .mp-item { border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 0; cursor: pointer; overflow: hidden; aspect-ratio: 1/1; } .mp-item:hover { border-color: var(--bronze); box-shadow: 0 0 0 2px rgba(168,67,42,.25); } .mp-item img { width: 100%; height: 100%; object-fit: cover; display: block; } .mp-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); } .media-pick-btn { margin-top: 6px; } @media (max-width: 1080px) { .cms-editor { grid-template-columns: 1fr; } .cms-live { position: static; margin-top: 26px; } .cms-live-frame { height: 72vh; } } .seo-preview { position: sticky; top: 20px; } .seo-preview-label { font: 600 11px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mut); margin: 0 0 8px; } .seo-google { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-bottom: 22px; } .seo-g-url { display: block; font-size: 12px; color: #5f6368; margin-bottom: 3px; } .seo-g-title { display: block; font-size: 18px; line-height: 1.3; color: #1a0dab; } .seo-g-desc { display: block; font-size: 13px; line-height: 1.5; color: #4d5156; margin-top: 3px; min-height: 1.5em; } .seo-social { background: #fff; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .seo-s-img { aspect-ratio: 1.91 / 1; background: var(--stone) center / cover no-repeat; position: relative; } .seo-s-img[data-empty]::after { content: "No social image set"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 12px var(--f-body); letter-spacing: .04em; text-transform: uppercase; color: var(--mut); } .seo-s-body { padding: 12px 15px; } .seo-s-title { display: block; font: 700 15px var(--f-body); color: var(--ink); } .seo-s-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--mut); margin-top: 4px; } @media (max-width: 900px) { .cms-seo-grid { grid-template-columns: 1fr; } .seo-preview { position: static; } } /* ---- Capability strip (R1 full-width band under the hero) ---- */ .capstrip { background: var(--stone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .capstrip .row { display: grid; grid-template-columns: repeat(4, 1fr); } .capstrip .cap { padding: 22px 28px; border-right: 1px solid var(--line); } .capstrip .cap:first-child { padding-left: 0; } .capstrip .cap:last-child { border-right: 0; } .capstrip .k { display: block; font: 600 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); } .capstrip .v { display: block; font-size: 15px; line-height: 1.4; margin-top: 8px; color: var(--ink); } .capstrip .v b { color: var(--bronze-d); font-weight: 800; font-family: var(--f-disp); } @media (max-width: 760px) { .capstrip .row { grid-template-columns: 1fr 1fr; } .capstrip .cap { padding: 18px 20px; } .capstrip .cap:nth-child(odd) { padding-left: 0; } .capstrip .cap:nth-child(2) { border-right: 0; } } /* ---- Pipeline as a full-width dark band (R1) ---- */ .pipeline-band { background: var(--char); color: var(--paper); } .pipeline-band .shead h2, .pipeline-band h2 { color: #fff; } .pipeline-band .lede { color: #C7BFB0; } .pipeline-band .pipeline { grid-template-columns: repeat(6, 1fr); background: transparent; border: 0; gap: 0; } .pipeline-band .pipeline li { background: transparent; border-right: 1px solid #3a352e; padding: 4px 26px; } .pipeline-band .pipeline li:first-child { padding-left: 0; } .pipeline-band .pipeline li:last-child { border-right: 0; padding-right: 0; } .pipeline-band .pipeline .pnum { color: var(--accent-dark); font-family: var(--f-disp); font-weight: 800; font-size: 22px; letter-spacing: 0; } .pipeline-band .pipeline h3 { color: #fff; } .pipeline-band .pipeline p { color: #B6AC97; } @media (max-width: 860px) { .pipeline-band .pipeline { grid-template-columns: 1fr 1fr 1fr; } .pipeline-band .pipeline li { padding-bottom: 18px; } } @media (max-width: 520px) { .pipeline-band .pipeline { grid-template-columns: 1fr 1fr; } } /* ---- CMS editor gold-plating (counters, reset, drag-drop) ---- */ .cms-count { display: block; margin-top: 6px; font: 600 11px var(--f-body); color: var(--mut); } .cms-count.ok { color: var(--sage); } .cms-count.over { color: var(--bronze); } .stack-form label { position: relative; } .cms-reset { position: absolute; top: 0; right: 0; background: none; border: 0; padding: 2px 4px; font: 600 11px var(--f-body); color: var(--mut); cursor: pointer; opacity: 0; transition: opacity .12s; } .stack-form label:hover .cms-reset, .stack-form label:focus-within .cms-reset { opacity: 1; } .cms-reset:hover { background: none; color: var(--bronze); text-decoration: underline; } .cms-imgfield { border-radius: 8px; transition: outline-color .12s; } .cms-imgfield.dragover { outline: 2px dashed var(--bronze); outline-offset: 6px; } /* ---- Empty state ---- */ .empty { text-align: center; padding: 60px 24px; border: 1px dashed var(--line); background: var(--stone); } .empty h3 { font-family: var(--f-disp); font-size: 22px; margin: 0 0 8px; } .empty p { color: var(--mut); max-width: 46ch; margin: 0 auto 20px; line-height: 1.6; } /* ---- Consistent card hover: subtle lift + brick border ---- */ .solcard, .pcard, .stat-card { transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; } .solcard:hover, .pcard:hover, .stat-card:hover { border-color: var(--bronze); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36,27,18,.08); } /* ---- Smooth cross-document navigation (kills the sidebar flash on each menu click) ---- */ @view-transition { navigation: auto; } /* Desktop only — on mobile .p-side is a fixed off-canvas drawer and a continuous view-transition-name fights the slide animation on navigation. */ @media (min-width: 821px) { .p-side { view-transition-name: cs-sidebar; } /* named = treated as continuous, no repaint flash */ .p-main { view-transition-name: cs-main; } .p-rail { view-transition-name: cs-rail; } /* rail is continuous too — no whole-page flash */ } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* ---- Public single-form pages: centered, not floating in dead space ---- */ .form-page { max-width: 660px; margin: 0 auto; } /* ---- Apply page: form + benefits aside (fills the space, reads designed) ---- */ .apply-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 48px; align-items: start; margin-top: 10px; } .apply-layout .stack-form { max-width: none; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .apply-aside { background: var(--stone); border: 1px solid var(--line); padding: 24px 26px; position: sticky; top: 20px; } .apply-aside h3 { font-family: var(--f-disp); font-size: 18px; margin: 0 0 16px; } .apply-aside ul { margin: 0 0 6px; padding: 0; list-style: none; } .apply-aside li { position: relative; padding: 0 0 13px 24px; font-size: 14px; color: var(--mut); line-height: 1.5; } .apply-aside li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--bronze); font-weight: 800; } .apply-aside li b { color: var(--ink); font-weight: 700; } @media (max-width: 780px) { .apply-layout { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .apply-aside { position: static; } } /* ---- Safety net: forms never sprawl full-width in the back office ---- */ /* Bulk table form, filter bars and tiny inline action forms opt out. */ .p-content form:not(#bulkform):not(.filterbar):not(.inline-form):not(.wide-form) { max-width: 880px; } /* ---- Admin card forms: card sections with two-column fields (fills the width, reads designed) ---- */ .card-form { max-width: none; } .card-form .admin-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px 22px; margin: 0 0 18px; } .card-form .admin-block h2 { font-size: 18px; margin: 0 0 16px; } .card-form > button { margin-top: 2px; } .sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; align-items: start; } .sgrid > label, .sgrid > fieldset { margin: 0 0 12px; } .sgrid > label.wide, .sgrid > fieldset.wide { grid-column: 1 / -1; } .sgrid > .thumb-preview, .sgrid > .gallery-thumbs, .sgrid > .hint, .sgrid > p { grid-column: 1 / -1; } @media (max-width: 720px) { .sgrid { grid-template-columns: 1fr; } } /* ---- Shop facet: family group headings ---- */ .facet-fam { font: 600 10.5px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-d); margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid var(--line); } .facet-fam:first-of-type { margin-top: 12px; padding-top: 0; border-top: 0; } /* ---- Contact page: form card + reach panel + offices band ---- */ .contact-hero { padding: 58px 0 40px; } .contact-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: start; } .reach-card { background: #fff; border: 1px solid var(--line); padding: 26px 26px 28px; } .reach-card h3 { font-size: 17px; margin-bottom: 14px; } .contact-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 48px; align-items: start; } .contact-form-card { background: #fff; border: 1px solid var(--line); padding: 32px 32px 34px; } .contact-form-card h2 { font-size: 24px; margin-bottom: 18px; } .contact-info { display: flex; flex-direction: column; gap: 26px; } .info-block h3 { font-size: 17px; margin-bottom: 12px; } .contact-lines { list-style: none; display: flex; flex-direction: column; gap: 12px; } .contact-lines li { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.45; } .contact-lines .k { font: 700 11px var(--f-body); letter-spacing: .1em; text-transform: uppercase; color: var(--mut); } .contact-lines a { color: var(--ink); font-weight: 600; } .contact-lines a:hover { color: var(--bronze); } .next-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 9px; color: var(--mut); font-size: 15px; line-height: 1.45; } .next-steps li::marker { color: var(--bronze); font-weight: 700; } .trade-cta { border-top: 1px solid var(--line); padding-top: 24px; } .trade-cta p { color: var(--mut); font-size: 15px; margin: 0 0 14px; line-height: 1.45; } .offices-band { background: #EAE1CD; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 58px 0 62px; } .offices-band h2 { font-size: clamp(26px, 2.6vw, 36px); margin: 6px 0 0; max-width: 24ch; } .offices-band .lede { margin: 14px 0 0; color: var(--mut); max-width: 60ch; } /* Fills the full wrap width like the hero (right edge aligns). A 300px minimum caps it at 4 across on wide screens so a 5th/6th wraps to a new row instead of squeezing; auto-fit still fills the row for any count, and min(100%,…) stops a card overflowing on narrow phones. */ .offices-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; margin-top: 30px; } .office-card { background: #fff; border: 1px solid var(--line); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 5px; } .office-div { font: 700 10.5px var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--bronze-d); } .office-card h3 { font-size: 18px; margin: 2px 0 6px; } .office-addr { color: var(--mut); font-size: 14.5px; line-height: 1.4; } .office-phone a { color: var(--ink); font-weight: 700; } .office-phone a:hover { color: var(--bronze); } .office-rep { margin-top: 8px; font-size: 14px; color: var(--ink); } .office-email a { font-size: 14px; color: var(--bronze-d); } .office-email a:hover { color: var(--bronze); } /* Admin list rows: quiet, compact action controls — shared by packages/faqs/services/content/offices/pricing/account. Bare