/* === /public/css/style.css === */ /* v2025-08-03 10:31:21 */ *, *::before, *::after { box-sizing: border-box; } /* === Fonts === */ @font-face { font-family: Inter; src: url('/public/fonts/Inter-Light.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; } @font-face { font-family: Inter; src: url('/public/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: Inter; src: url('/public/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { /* Existing */ --card-bg: #1e293b; --card-border: #60a5fa; /* --text-secondary: #93c5fd; */ --link-color: #93c3ce; /* --spotlight-max-width: 100%; */ /* New (neutral defaults) */ --card-radius: .25rem; /* --card-pad-x: 1.5rem; */ /* --card-pad-y: 1.5rem; */ --card-shadow: 0 4px 12px rgb(0 0 0 / 10%); /* Optional: base text color token (keeps cards consistent) */ --text-color: #eee; --text-secondary: #cbd5e1; --text-1: var(--text-color); --border-3: var(--card-border); } /* === Global heading reset === */ /* h1, h2, h3, h4, h5, h6 { font-weight: 400; line-height: 1.2; margin-top: 0rem; margin-bottom: 0.75rem; letter-spacing: 0.01em; } */ /* === v2025-08-25 Global Typeface (Manrope headings) === */ @font-face{ font-family: "ManropeVar"; src: url("/public/fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; } /* Body font (adjust if you already set this elsewhere) */ /* === v2025-08-25 Body Typeface === */ :where(html, body){ font-family: "ManropeVar", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 200; /* lighter than 400, still very readable */ line-height: 1.55; } :where(p, li, dd, td, label, input, textarea, small){ font-weight: inherit; /* ensure everything follows the body weight */ } /* Headings (light & elegant) */ :where(h1,h2,h3,h4,h5,h6){ font-family: "ManropeVar", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; line-height: 1.15; letter-spacing: -0.005em; /* subtle tighten */ } /* Progressive enhancement: only add balanced wrapping if the browser supports it */ @supports (text-wrap: balance) { :where(h1,h2,h3,h4,h5,h6){ text-wrap: balance; } } :where(h1){ font-weight: 200; } :where(h2){ font-weight: 250; } :where(h3){ font-weight: 300; } :where(h4){ font-weight: 500; } :where(h5){ font-weight: 500; } :where(h6){ font-weight: 500; } /* Lists and small text inherit body; no per-page overrides needed */ /* === Base layout === */ /* Body reset + colors only (let global rules set fonts/weights) */ body { margin: 0; background: #111; color: #fff; } /* Make dark mode work whether .dark is on or */ html.dark, body.dark { background: #111; color: #eee; } /* === Links === */ a { color: #1e40af; /* blue-800 */ text-decoration: none; } a:hover { text-decoration: underline; } a:visited { color: #1e3a8a; /* blue-900 */ } @media (prefers-color-scheme: dark) { a { color: #93c5fd; /* blue-300 */ } a:visited { color: #bfdbfe; /* blue-200 */ } } /* === Card Globals === */ /* Global card skin (visual only — no layout changes) */ .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-pad-y) var(--card-pad-x); box-shadow: var(--card-shadow); color: var(--text-color); } /* === Base layout === */ .wrap { max-width: 1024px; margin: 0 auto; /* padding: 1rem; */ } /* === Header / Footer === */ .site-footer { /* margin-top: 1rem; */ } .site-footer a { color: #fff; margin-right: 0.4rem; text-decoration: none; } /* === Logo position and dark mode switch === */ img.logo-light { display: none; } img.logo-dark { display: inline; } .dark img.logo-dark { display: none; } .dark img.logo-light { display: inline; } .wrap.card h1 img { vertical-align: middle; position: relative; top: 3px; } /* === Card layout (header/footer/content) === */ .wrap.card { /* display: flex; */ /* justify-content: space-between; */ /* align-items: center; */ /* flex-wrap: wrap; */ /* gap: 1.5rem; */ /* background: #0369a1; */ /* color: #fff; */ border: 1px solid #001845; /* border-radius: 0.25rem; */ box-shadow: 0 4px 12px rgb(0 0 0 / 10%); padding: 1.5rem; max-width: 1024px; margin: 1rem auto 1rem; } .dark .wrap.card { background: #1e293b; color: #eee; border-color: #60a5fa; } .wrap.card.flex-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } /* === Nav area === */ .wrap.card nav { display: flex; flex-wrap: wrap; gap: 0.1rem; justify-content: flex-end; align-items: center; flex-grow: 1; } /* Primary inline anchors spacing */ /* nav #main-nav a + a { margin-left: 0.8rem; } */ /* Dropdown behavior */ .dropdown { position: relative; } .dropdown .dropdown-content { display: none; position: absolute; top: 100%; left: 0; min-width: 260px; max-height: 60vh; /* long lists scroll */ overflow: auto; padding: 0.5rem 0.75rem; z-index: 1000; } .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { display: block; } /* Links inside dropdowns */ .dropdown .dropdown-link { display: block; padding: 0.25rem 0; white-space: normal; /* allow wrapping */ line-height: 1.3; } /* Optional spacing between primary links and dropdowns */ /* nav #main-nav { margin-right: 1rem; } */ /* === Dropdown structure === */ .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; min-width: 200px; padding: 0.5rem; border-radius: 0.5rem; z-index: 1000; box-shadow: 0 4px 12px rgb(0 0 0 / 20%); background: #fff; } .dropdown:hover .dropdown-content { display: block; } .dark .dropdown-content { background: #1e293b; } /* === Dropdown links (shared size, separate color) === */ .dropdown-content a { display: block; padding: 0.5rem 0.75rem; font-size: 0.9rem; color: #111; text-decoration: none; border: 1px solid transparent; border-radius: 4px; margin-bottom: 0.3rem; } .dropdown-content a:hover { background: #e0f2fe; border-color: #93c5fd; } .dark .dropdown-content a { color: #eee; border-color: transparent; } .dark .dropdown-content a:hover { background: #334155; border-color: #60a5fa; } /* === Utility: heading spacing === */ /* === Theme toggle button === */ .theme-toggle { position: fixed; top: 1rem; right: 1rem; background: none; border: none; color: #111; cursor: pointer; z-index: 10000; padding: 0.5rem; } .dark .theme-toggle { color: #eee; } .theme-toggle svg { width: 24px; height: 24px; display: block; } .site-footer { margin-bottom: 2rem; } /* === Footer layout === */ .site-footer .wrap.card { background: #0369a1; color: #fff; /* border: 2px solid #001845; */ /* border-radius: 0.5rem; */ box-shadow: 0 4px 12px rgb(0 0 0 / 10%); display: flex; justify-content: space-between; flex-wrap: wrap; padding: 1.5rem; font-size: 11px; } .dark .site-footer .wrap.card { background: #1e293b; border-color: #60a5fa; color: #eee; } .footer-links { font-size: 1rem; text-align: right; } .footer-links a { color: inherit; text-decoration: none; margin-left: 0.5rem; } .footer-links a:first-child { margin-left: 0; } .footer-links a:hover { text-decoration: underline; } /* === Visually hidden text for accessibility === */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* === Animated icon toggle === */ .theme-toggle svg { width: 24px; height: 24px; display: block; transition: transform 0.3s ease; } .theme-toggle:hover svg { transform: rotate(15deg); } /* === Page-level card wrapper (around content-card blocks) === */ .page-main > .wrap.card { background: #fff; color: #111; border: 1px solid #001845; /* border-radius: 0.5rem; */ box-shadow: 0 4px 12px rgb(0 0 0 / 10%); padding: 1.5rem; margin: 0 auto 1rem; max-width: 1024px; } .dark .page-main > .wrap.card { background: #1e293b; color: #eee; border-color: #60a5fa; } /* === Forms inside .wrap.card === */ form:not(.contact-form):not(.quote-contact-form):not(.qr-form) { display: grid; grid-template-columns: 160px 1fr; gap: 1rem 1.5rem; margin-top: 2rem; align-items: start; } form textarea { width: 100%; padding: 0.5rem; font-size: 1rem; border-radius: 6px; background: #fff; color: #111; border: 1px solid var(--card-border); min-height: 120px; resize: vertical; } form fieldset { grid-column: 1 / -1; border: none; padding: 0; margin: 1.5rem 0 0.5rem; } form input[type='submit'] { grid-column: 2 / 3; justify-self: end; background: #0369a1; color: #fff; padding: 0.5rem 1rem; font-size: 1rem; border: none; border-radius: 6px; cursor: pointer; transition: background 0.2s ease; } form input[type='submit']:hover { background: #025f8f; } .dark form textarea { background: #1e293b; color: #eee; border-color: #334155; } .dark form input[type='submit'] { background: #60a5fa; color: #000; } .dark form input[type='submit']:hover { background: #93c5fd; } /* === Enforced global link styles for cards and content blocks === */ .page-main a { color: #1e40af; } .dark .page-main h1 { color: #eee; } .page-main a:visited { color: #1e3a8a; } .page-main a:hover { text-decoration: underline; } @media (prefers-color-scheme: dark) { .page-main a { color: #93c5fd; } .page-main a:visited { color: #bfdbfe; } } /* === Content layout variants === */ .wrap.card.content { display: block; } .wrap.card.align-top { align-items: flex-start; } /* === Quote Summary (Single Column) === */ /* === Button Row Layout === */ .button-row { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1rem; } /* === Heading Letter Spacing === */ /* h3 { letter-spacing: 0.02em; font-weight: 300; } */ /* === Tag Styling === */ .tag { font-size: 0.75rem; background: #e5e7eb; color: #374151; padding: 0.2rem 0.5rem; border-radius: 4px; } .dark .tag { background: #374151; color: #d1d5db; } /* === Form Spacing Fixes === */ form:not(.contact-form):not(.quote-contact-form):not(.qr-form) { display: grid; grid-template-columns: 160px 1fr; gap: 1rem 1.5rem; margin-top: 0rem; align-items: start; } form label { text-align: right; margin-top: 0.75rem; } .quote-contact-form form:not(.contact-form):not(.quote-contact-form):not(.qr-form) { display: grid; grid-template-columns: 160px 1fr; gap: 1rem 1.5rem; margin-top: 2rem; align-items: start; } /* === Contact Page Layout (Left: Title, Right: Form) === */ /* === Left Column (Heading) === */ .contact-heading h1 { margin-top: 0; font-size: 1.5rem; font-weight: 400; line-height: 1.2; } /* === Right Column (Form Container) === */ .contact-form-wrapper { padding-right: 1rem; } /* === Submit Button === */ .contact-heading { align-self: start; } .availability { font-weight: 500; font-size: 0.95rem; margin-top: 0.5rem; } .contact-grid-layout { display: grid; grid-template-columns: 30% 70%; gap: 2rem; align-items: start; margin-bottom: 2rem; } /* Reuse your card style, apply extra alignment if needed */ .contact-info-card h1 { margin-top: 0; } .hour-table { width: 100%; font-size: 0.95rem; border-collapse: collapse; margin: 0.5rem 0 1rem 0; } .hour-table td { padding: 0.25rem 0.5rem 0.25rem 0; vertical-align: top; color: var(--text-secondary); } .availability { font-weight: 500; font-size: 0.95rem; margin-top: 0.5rem; } .contact-grid-layout { display: grid; grid-template-columns: 30% 70%; gap: 2rem; align-items: start; margin: 0 auto 2rem; max-width: 1024px; } /* Prevent overlap and enforce consistent layout */ .page-main { padding-bottom: 2rem; } /* Remove unintended outer margin that could break alignment */ .contact-grid-layout > .wrap.card { margin-bottom: 0; } .availability { font-weight: 500; font-size: 0.95rem; margin-top: 0.5rem; } .card-row { display: flex; flex-wrap: nowrap; gap: 1rem; max-width: 1024px; margin: 0 auto 1rem; } /* Drop .wrap for inner cards to prevent max-width override */ .page-main { padding-bottom: 0; } /* Outer row card (full width like header/footer) */ .page-main { padding-bottom: 0; } .contact-info-card { flex: 3; } .contact-form-card { flex: 7; } .card.contact-form-card { padding: 1.5rem; background: var(--card-bg, #fff); color: inherit; border: 1px solid var(--card-border); border-radius: .25rem; box-shadow: 0 4px 12px rgb(0 0 0 / 10%); } .dark .card.contact-form-card { background: #1e293b; color: #eee; border-color: #60a5fa; } .status-dot { display: inline-block; width: 10px; height: 10px; margin-right: 0.5rem; border-radius: 50%; vertical-align: middle; } .status-dot.online { background-color: #25d366; } .status-dot.offline { background-color: #b91c1c; } .contact-grid-layout {display: grid; grid-template-columns: 30% 70%; gap: 2rem; align-items: start; margin: 0 auto 2rem; max-width: 1024px;} /* .status-dot.online {background-color: #25d366;} .hour-table {width: 100%; font-size: 0.95rem; border-collapse: collapse; margin: 0.5rem 0 1rem 0;} .hour-table td {padding: 0.25rem 0.5rem 0.25rem 0; vertical-align: top; color: var(--text-secondary);} */ form textarea {width: 100%; padding: 0.5rem; font-size: 1rem; border-radius: 6px; background: #fff; color: #111; border: 1px solid;} .availability {font-weight: 500; font-size: 0.95rem; margin-top: 0.5rem;} .card.contact-info-card { padding: 1.5rem; background: var(--card-bg, #fff); color: inherit; border: 1px solid; border-radius: .25rem; box-shadow: 0 4px 12px rgb(0 0 0 / 10%); } .dark .card.contact-info-card { background: #1e293b; color: #eee; border-color: #60a5fa; } .contact-form { display: grid; grid-template-columns: 160px 1fr; gap: 1rem 1.5rem; align-items: start; margin-top: 0.75rem; } .contact-form label { text-align: right; font-weight: 400; margin-top: -1px; } .contact-form button { grid-column: 2 / 3; justify-self: end; padding: 0.5rem 1rem; background: #0369a1; color: #fff; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; } .contact-form button:hover { background: #025f8f; } .contact-info-card h1 { font-size: 1.75rem; font-weight: 400; margin-top: 0; margin-bottom: 1rem; line-height: 1.2; } .card.contact-form-card { display: flex; flex-direction: column; justify-content: flex-start; } .card.contact-form-card .contact-thankyou { display: flex; flex-direction: column; padding-top: 0; } .card.contact-form-card .contact-thankyou h1 { align-self: flex-start; margin-top: 0; margin-bottom: 1rem; font-size: 1.75rem; font-weight: 400; line-height: 1.2; } @media (prefers-color-scheme: dark) { .contact-form input, .contact-form textarea { background: #1e293b; color: #eee; border-color: #334155; } } @media (min-width: 768px) { .contact-form { grid-template-columns: 140px 1fr; gap: 1rem 1rem; } .contact-form button { justify-self: start; } } .contact-form button { grid-column: 2 / 3; justify-self: start; max-width: 200px; } .price-display { font-size: 1.1em; margin: 0; } .form-group { margin-bottom: 1em; } .form-input, .form-select { width: 100%; max-width: 300px; padding: 0.5em; } /* v2025-08-31 — Submenu refinement */ .site-nav .submenu a{ font-size: 0.9375rem; /* 15px @16 base */ line-height: 1.25; /* tighter, still readable */ padding: .4rem .75rem; /* slightly slimmer than top-level */ letter-spacing: .01em; } /* If your submenu uses
  • > a, keep hit area generous */ .site-nav .submenu li > a { display: block; } /* Optional: subtle separators for elegance (comment out if not needed) */ .site-nav .submenu li + li > a { border-top: 1px solid var(--border-muted, rgba(255,255,255,.08)); } /* v2025-09-01 — nav split + submenu refinement */ .site-nav { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } /* push the whole group (About + dropdowns + Contact) to the right */ #nav-static-left { margin-left: auto; /* <-- move the 'push' here */ display: flex; gap: .35rem; } /* Contact block no longer needs to push; just sit to the right of the group */ .nav-static-right { margin-left: .35rem; /* spacing before Contact */ display: flex; align-items: center; gap: .35rem; } /* Spacing for the in-between dropdowns */ header nav .dropdown + .dropdown { margin-left: .35rem; /* space between consecutive dropdowns */ } /* Space between left static group and first dropdown */ #nav-static-left + .dropdown { margin-left: .35rem; } /* Space between last dropdown and the right static group */ header nav .dropdown + .nav-static-right { margin-left: .35rem; } /* (Optional) make each dropdown link a comfy, aligned hit area */ header nav .dropdown > a { display: flex; align-items: center; padding: .5rem .6rem; /* keeps ~44px tap height with your header line-height */ /* font-size: 0.95rem; <- uncomment if you also want the subtle size tweak */ } /* existing container layout (leave as is) */ .site-nav { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; } /* Primary inline anchors spacing (new left block) */ #nav-static-left a + a { margin-left: 0.35rem; } /* Optional extra gap between “About” and the dropdowns */ #nav-static-left { margin-right: .35rem; } @media (max-width: 700px){ #nav-static-left { margin-left: 0; } } /* Tighter spacing between dropdowns and static groups */ header nav .dropdown + .dropdown { margin-left: .2rem; /* was .8rem */ } #nav-static-left + .dropdown { margin-left: .2rem; /* was .8rem */ } header nav .dropdown + .nav-static-right { margin-left: .2rem; /* was .8rem */ } /* Top-level triggers: smaller text + tighter horizontal padding (covers common structures whether anchors are direct children or inside UL > LI) */ header nav #nav-static-left > a, header nav #nav-static-left > ul > li > a, header nav .dropdown > a, header nav > ul > li.dropdown > a, header nav .nav-static-right > a, header nav .nav-static-right > ul > li > a { font-size: .93rem; line-height: 1.1; padding: .45rem .5rem; /* tighter inline padding, keeps good hit area */ } /* (Optional) nudge caret/icons in triggers down a touch */ header nav .dropdown > a svg { inline-size: .9em; block-size: .9em; } /* Make gap the single source of truth */ .site-nav { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; } #nav-static-left { margin-left: auto; /* keep the spacer that pushes the group right */ display: flex; gap: .35rem; /* was .8rem */ } /* Remove additive margins; let gap handle spacing */ #nav-static-left a + a { margin-left: 0; } /* was 0.8rem */ header nav .dropdown + .dropdown { margin-left: 0; } /* was .8rem */ #nav-static-left + .dropdown { margin-left: 0; } /* was .8rem */ .nav-static-right { margin-left: 0; /* was .8rem; rely on gap instead */ display: flex; align-items: center; gap: .35rem; /* was .8rem */ } header nav .dropdown + .nav-static-right { margin-left: 0; } /* was .8rem */ .flex-row { gap: .5rem; } /* was 1rem */ /* ===== NAV EMERGENCY NORMALIZE — v2025-09-07 ===== */ /* Make gap the only spacing source; kill all additive margins inside nav */ .site-header .site-nav { gap: .32rem !important; } .site-header #nav-static-left, .site-header .nav-static-right { gap: .32rem !important; } /* Remove ALL margin-left inside the nav tree (this is the big reset) */ .site-header .site-nav * + * { margin-left: 0 !important; } /* Keep the nav pushed to the right, but no extra jumps */ .site-header #nav-static-left { margin-left: auto !important; } .site-header .nav-static-right { margin-left: 0 !important; } /* Ensure dropdown siblings don't reintroduce margins */ .site-header .dropdown + .dropdown, .site-header #nav-static-left + .dropdown, .site-header .dropdown + .nav-static-right { margin-left: 0 !important; } /* Optional: slightly tighten top-level link padding so items look less bulky */ .site-header .site-nav a { padding: .30rem .45rem !important; line-height: 1.15; } /* ===== NAV NORMALIZE + REBUILD — v2025-09-07 ===== */ /* 0) Kill all gaps + margins inside the nav so nothing stacks */ .site-header nav.site-nav, .site-header #nav-static-left, .site-header .nav-static-right { gap: 0 !important; } /* Remove ANY adjacent margin inside the nav tree (anchors, divs, lis, etc.) */ .site-header nav.site-nav * + * { margin-left: 0 !important; } /* 1) Rebuild spacing with ONE knob (direct children of the nav) */ .site-header nav.site-nav > * + * { margin-left: .28rem !important; } /* 2) Left group: consistent spacing between its immediate children */ .site-header #nav-static-left > * + * { margin-left: .28rem !important; } /* 3) Keep the nav pushed to the right next to the logo (but no extra jumps) */ .site-header #nav-static-left { margin-left: auto !important; } .site-header .nav-static-right { margin-left: 0 !important; } /* 4) Ensure the dropdown sibling combos don’t reintroduce margins */ .site-header .dropdown + .dropdown, .site-header #nav-static-left + .dropdown, .site-header .dropdown + .nav-static-right { margin-left: 0 !important; } /* 5) Slightly trim top-level link padding so the items don’t feel bulky */ .site-header nav.site-nav a { padding: .1rem .1rem !important; line-height: 1.15; } /*.flex-row { gap: .2rem; } */ /* ===== Header quote badge ===== */ .site-header .nav-quote { position: relative; display: inline-flex; align-items: center; } .site-header .nav-quote .quote-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ef4444; /* red */ color: #fff; font-size: 11px; line-height: 16px; font-weight: 600; text-align: center; box-shadow: 0 0 0 2px var(--card-bg, #fff); } .dark .site-header .nav-quote .quote-badge { box-shadow: 0 0 0 2px var(--header-bg, #0f172a); } /* ===== Quote Request – bring new classes to life (final) ===== */ /* 1) Neutralize global .card flex just on this page */ #quote-summary .qr-card { display: block !important; align-items: initial !important; justify-content: initial !important; flex-wrap: initial !important; gap: 0 !important; } /* 2) Cancel global form grid for this one form */ #quote-summary .qr-form { display: block !important; } /* 3) Two-column wrapper: Personal (L) | Job (R) */ #quote-summary .qr-cols { display: grid; grid-template-columns: 1fr; /* mobile: 1 column */ gap: 1.25rem 1.5rem; width: 100%; } @media (min-width: 900px) { #quote-summary .qr-cols { grid-template-columns: 1fr 1fr; } } /* 4) Inside each column, stack fields neatly */ #quote-summary .qr-col > .grid { display: grid !important; grid-template-columns: 1fr; row-gap: 1rem; column-gap: 1rem; } /* 5) Labels above inputs; controls full-width */ #quote-summary .qr-col .item-field > span { display: block; margin-bottom: .4rem; font-weight: 600; line-height: 1.25; } #quote-summary .qr-col .item-field input, #quote-summary .qr-col .item-field select, #quote-summary .qr-col .item-field textarea { width: 100%; box-sizing: border-box; min-height: 2.25rem; padding: .5rem .6rem; } /* 6) Details block spacing (full-width by default) */ #quote-summary details { margin-top: 1rem; } #quote-summary details > .grid { margin-top: .5rem; } /* 7) Actions aligned right */ #quote-summary .form-actions { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1rem; } /* Make the quote page's
    stack, not row */ #quote-summary.wrap.card.quote-layout { flex-direction: column !important; align-items: stretch !important; /* don't center-shrink the child */ } /* Ensure the inner card behaves like a normal block, not a flex row */ #quote-summary .qr-card { display: block !important; width: 100% !important; max-width: none !important; /* ignore any global card max-width */ } /* ===== Home layout (scoped) ===== */ #home .home-columns { display: grid; grid-template-columns: 4fr 1fr; /* ~80/20 */ gap: 1rem; } @media (max-width: 1200px) { #home .home-columns { grid-template-columns: 7fr 3fr; } /* ~70/30 */ } @media (max-width: 900px) { #home .home-columns { grid-template-columns: 1fr; } /* Optional: surface sidebar above main on mobile */ /* #home .home-side { order: -1; } */ } /* Hero actions row (reuses .button from your site if present) */ #home .hero-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; /* if your typography scale doesn’t already give spacing */ } /* Link lists and bullet lists (compact, readable) */ #home .link-list, #home .bullets { margin: 0; padding-left: 1.1rem; /* respect your base list indent */ } #home .link-list li + li, #home .bullets li + li { margin-top: .35rem; } /* Optional: light spacing for “more” links under lists */ #home .more-link { margin-top: .75rem; } /* Optional: CTA links separator */ #home .cta-links { margin-top: .5rem; } /* ===== Home layout (scoped to the front page) ===== */ #home .home-columns{ display:grid; grid-template-columns:4fr 1fr; /* ~80/20 split */ column-gap:1rem; /* horizontal gap between columns */ align-items:start; } /* On slightly narrower viewports, relax to ~70/30 */ @media (max-width:1200px){ #home .home-columns{ grid-template-columns:7fr 3fr; } } /* Stack vertically on phones/tablets */ @media (max-width:900px){ #home .home-columns{ grid-template-columns:1fr; row-gap:1rem; /* vertical gap between the two columns when stacked */ } } /* Vertical space between cards inside each column */ #home .home-main > .card + .card, #home .home-side > .card + .card{ margin-top:1rem; /* vertical rhythm between full cards */ margin-bottom:1rem; } /* Optional: extra top space when sidebar follows main on mobile */ @media (max-width:900px){ #home .home-side{ margin-top:0; } /* rely on row-gap + per-card spacing */ } /* Optional: icon-only variant */ .btn.icon-only { display: inline-flex; align-items: center; justify-content: center; padding: 0; } .btn.icon-only svg { margin-right: 0; } .btn svg { width: 1.5em; height: 1.5em; vertical-align: -0.15em; } .btn.icon-only { display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; padding:0; } .btn.icon-only svg { margin-right: 0; } /* Off-screen honeypot container */ .hp { position: absolute !important; left: -100vw; /* far off-screen; not display:none so naive bots still see it */ top: 0; width: 1px; height: 1px; overflow: hidden; } /* Standard visually-hidden utility for the label */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(50%); clip: rect(0 0 0 0); overflow: hidden; } /* ========================= Dark-only link colours ========================= */ /* Header/nav links inherit header colour (no iOS blue/purple) */ .site-header nav.site-nav a, .site-header nav.site-nav a:visited, .site-header nav.site-nav a:hover, .site-header nav.site-nav a:active, .site-header nav.site-nav a:focus { color: inherit; text-decoration: none; } /* Stop iOS auto-styling tel/mail links inside header */ .site-header nav.site-nav a[href^="tel:"], .site-header nav.site-nav a[href^="mailto:"] { color: inherit; text-decoration: none; } /* Content links use single dark palette token; visited same */ .page-main a, .page-main a:visited { color: var(--link-color); } .page-main a:hover, .page-main a:focus { text-decoration: underline; } /* Reduce tap highlight just for the nav */ .site-header nav.site-nav { -webkit-tap-highlight-color: transparent; } /* ========================= Hamburger collapse (<=720px) Activates ONLY when .has-hamburger is on .site-header ========================= */ /* Desktop default: show menu, hide trigger */ .site-header .nav-trigger { display: none; } @media (max-width: 720px) { .site-header.has-hamburger { position: relative; } /* Show the trigger on mobile when feature-flagged */ .site-header.has-hamburger .nav-trigger { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--border-muted, rgba(255,255,255,.15)); border-radius: .5rem; background: var(--header-bg, #0f172a); color: var(--header-fg, #e5e7eb); cursor: pointer; } .site-header.has-hamburger .nav-trigger:focus-visible { outline: 2px solid var(--focus-ring, #93c5fd); outline-offset: 2px; } .site-header.has-hamburger .nav-trigger svg { pointer-events: none; } /* Hide menu by default at mobile size */ .site-header.has-hamburger nav.site-nav { display: none; } /* Open state: reveal menu as a panel under header */ .site-header.has-hamburger.is-open nav.site-nav { display: flex; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; flex-direction: column; gap: .25rem; padding: .5rem; background: var(--header-bg, #0f172a); border-top: 1px solid var(--border-muted, rgba(255,255,255,.12)); box-shadow: 0 10px 30px rgb(0 0 0 / 30%); } /* Comfy tap targets in the dropdown */ .site-header.has-hamburger nav.site-nav a { padding: .6rem .75rem; line-height: 1.25; } .site-header.has-hamburger.is-open nav.site-nav a:focus-visible { outline: 2px solid var(--focus-ring, #93c5fd); outline-offset: 2px; border-radius: .375rem; } } /* Motion safety */ @media (prefers-reduced-motion: reduce) { .site-header.has-hamburger.is-open nav.site-nav { transition: none; } } /* ========== Mobile menu overlay (top-anchored, content-height) ========== */ @media (max-width: 1024px) { .site-header.has-hamburger.is-open nav.site-nav { position: fixed; left: 0; right: 0; top: 0; /* anchor to the very top */ z-index: 9999; /* Reserve space for header + safe-area, so links start just below header */ padding-top: calc(var(--menu-top, 64px) + env(safe-area-inset-top, 0px)); /* Usual padding + safe-area at the bottom */ padding-left: .5rem; padding-right: .5rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); /* Don’t *force* full height; allow content height, up to viewport */ max-height: calc(100dvh - env(safe-area-inset-bottom, 0px)); overflow-y: auto; /* Layout: stack items from the top, no big empty area */ display: grid; grid-auto-rows: min-content; row-gap: .25rem; align-content: start; /* <- keep content at the top */ justify-items: stretch; background: var(--header-bg, #0f172a); border-top: 1px solid var(--border-muted, rgba(255,255,255,.12)); box-shadow: 0 10px 30px rgb(0 0 0 / 30%); } /* Comfy tap targets remain */ .site-header.has-hamburger nav.site-nav a { padding: .6rem .75rem; line-height: 1.25; } } /* ========== Mobile menu: single-row pill bar (top-anchored) ========== */ @media (max-width: 1024px) { .site-header.has-hamburger.is-open nav.site-nav { position: fixed; left: 0; right: 0; top: 0; /* anchor at very top */ z-index: 9999; /* push content down by header height (+ safe area) so first item sits under header */ padding-top: calc(var(--menu-top, 64px) + env(safe-area-inset-top, 0px)); padding-left: .5rem; padding-right: .5rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); background: var(--header-bg, #0f172a); border-top: 1px solid var(--border-muted, rgba(255,255,255,.12)); box-shadow: 0 10px 30px rgb(0 0 0 / 30%); /* one-line horizontal layout */ display: flex; flex-wrap: wrap; /* keep on a single row */ gap: .5rem; align-items: center; justify-content: flex-start; overflow-x: auto; /* scroll if it ever overflows */ overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* Make top-level items compact “pills” */ .site-header.has-hamburger nav.site-nav > .dropdown > a, .site-header.has-hamburger nav.site-nav > a, .site-header.has-hamburger nav.site-nav > .nav-static-right > a, .site-header.has-hamburger nav.site-nav > #nav-static-left > a { display: inline-flex; align-items: flex-end; padding: .5rem .75rem; /* ~44px hit height */ line-height: 1.25; border-radius: .5rem; border: 1px solid var(--border-muted, rgba(255,255,255,.12)); background: transparent; white-space: nowrap; /* keep each pill intact */ } /* Don’t let icons shrink */ .site-header.has-hamburger nav.site-nav > a.nav-quote, .site-header.has-hamburger nav.site-nav > a.search-toggle-icon { flex: 0 0 auto; } } /* ===== Mobile menu: column layout (one item per row) ===== */ @media (max-width: 1024px) { /* Top-anchored overlay under the header, content starts at the top */ .site-header.has-hamburger.is-open nav.site-nav { position: fixed; left: 0; right: 0; top: 0; z-index: 9999; /* push content below header height (+ safe-area) */ padding-top: calc(var(--menu-top, 64px) + env(safe-area-inset-top, 0px)); padding-left: .5rem; padding-right: .5rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); background: var(--header-bg, #0f172a); border-top: 1px solid var(--border-muted, rgba(255,255,255,.12)); box-shadow: 0 10px 30px rgb(0 0 0 / 30%); display: flex; flex-direction: column; /* <-- column, not row */ align-items: stretch; /* each child fills width */ gap: .375rem; max-height: calc(100dvh - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overflow-x: hidden; } /* Ensure each top-level child is block & full-width */ .site-header.has-hamburger nav.site-nav > .dropdown, .site-header.has-hamburger nav.site-nav > #nav-static-left, .site-header.has-hamburger nav.site-nav > .nav-static-right, .site-header.has-hamburger nav.site-nav > a { display: block; width: 100%; } /* Make all visible links render as their own row */ .site-header.has-hamburger nav.site-nav > .dropdown > a, .site-header.has-hamburger nav.site-nav > a, .site-header.has-hamburger nav.site-nav #nav-static-left a, .site-header.has-hamburger nav.site-nav .nav-static-right a { display: block; /* not inline */ width: 100%; padding: .6rem .75rem; /* ~44px tap height */ line-height: 1.25; border: 1px solid var(--border-muted, rgba(255,255,255,.12)); border-radius: .5rem; background: transparent; white-space: normal; /* allow wrap if needed */ } /* Disable desktop hover dropdowns on mobile */ .site-header.has-hamburger nav.site-nav .dropdown .dropdown-content { display: none !important; } } /* ====== FIX: Safari value + enforce column rows (mobile open) ====== */ @media (max-width: 1024px) { /* Use flex-start instead of 'start' for iOS/Safari compatibility */ .site-header.has-hamburger.is-open nav.site-nav { align-items: flex-start; /* was: start (parsing error) */ align-content: flex-start; /* for any grid/flex cross-axis alignment */ } /* Make every top-level item fill the row */ .site-header.has-hamburger.is-open nav.site-nav > .dropdown, .site-header.has-hamburger.is-open nav.site-nav > #nav-static-left, .site-header.has-hamburger.is-open nav.site-nav > .nav-static-right, .site-header.has-hamburger.is-open nav.site-nav > a { display: block !important; width: 100% !important; } /* And ensure their links are block-level too (no side-by-side) */ .site-header.has-hamburger.is-open nav.site-nav > .dropdown > a, .site-header.has-hamburger.is-open nav.site-nav > a, .site-header.has-hamburger.is-open nav.site-nav #nav-static-left > a, .site-header.has-hamburger.is-open nav.site-nav .nav-static-right > a { display: block !important; width: 100% !important; padding: .6rem .75rem; line-height: 1.25; border: 1px solid var(--border-muted, rgba(255,255,255,.12)); border-radius: .5rem; background: transparent; white-space: normal; /* allow wrapping if label is long */ } /* Disable hover drop-downs on mobile */ .site-header.has-hamburger.is-open nav.site-nav .dropdown .dropdown-content { display: none !important; } } /* === Mobile menu: extend to bottom (no clipping), scroll within === */ @media (max-width: 1024px) { .site-header.has-hamburger.is-open nav.site-nav { /* Fill viewport height safely */ position: fixed; top: 0; bottom: 0; /* <-- extend to bottom so long lists aren’t cut */ z-index: 9999; /* Keep the content starting just under the header */ padding-top: calc(var(--menu-top, 64px) + env(safe-area-inset-top, 0px)); padding-left: .5rem; padding-right: .5rem; /* Make sure the last item clears iOS bars */ padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); /* Let the menu scroll instead of clipping */ overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; /* Remove any earlier height caps that caused truncation */ max-height: none; height: auto; } /* Safari/iOS dynamic viewport friendly fallbacks */ .site-header.has-hamburger.is-open nav.site-nav { /* Prefer the small viewport unit when supported */ max-height: calc(100svh - 0px); /* harmless when bottom:0 is in effect */ contain: content; overscroll-behavior: contain; } } /* Glossary links */ .glossary-link { border-bottom: 1px dotted currentColor; text-decoration: none; } .glossary-link:hover, .glossary-link:focus, .glossary-link:focus-visible { outline: none; text-decoration: underline; } /* Definition list styling (glossary page) */ .page-section dl { margin: .75rem 0; } .page-section dt { font-weight: 600; margin-top: .5rem; } .page-section dd { margin: .25rem 0 .75rem 0; color: var(--muted, #9aa1ad); } /* Keep glossary wrappers inline and out of layout */ .glossary, .glossary-term, .glossary-link, .glossary-anchor, .glossary-mark { display: inline !important; white-space: inherit; line-height: inherit; margin: 0; padding: 0; } /* Terms/links act as positioning anchors for their own tooltip */ .glossary-term, .glossary-link { position: relative; /* anchor for absolutely-positioned .glossary-tip */ } /* Tooltip (per-term) — hidden by default */ .glossary-tip { position: absolute; bottom: 100%; /* sit above the term */ left: 0; transform: translateY(-0.4rem); display: none; /* hidden until term gets .is-open */ z-index: 40; /* above cards; below modals if those are >40 */ max-width: 34ch; padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem); border-radius: var(--radius-2xl, 1rem); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.18)); background: var(--card-bg, #111); color: var(--card-fg, #eee); line-height: 1.35; font-size: 0.9375rem; } /* Show tooltip when JS adds .is-open to the term/link */ .glossary-term.is-open .glossary-tip, .glossary-link.is-open .glossary-tip { display: block; } /* Content tweaks */ .glossary-tip__title { font-weight: 600; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .glossary-tip { transition: none; } } /* Brief highlight ring for in-page term targets */ .glossary-focus { outline: 2px solid var(--accent, #4da3ff); outline-offset: 4px; } /* ensure tooltip sizes to content nicely */ .glossary-tip { white-space: normal; overflow-wrap: anywhere; /* allow long words to wrap if needed */ } /* render tip as an inline-block (prevents 1-char wrapping weirdness) */ .glossary-term.is-open .glossary-tip, .glossary-link.is-open .glossary-tip { display: inline-block; /* was: display:block */ } /* keep title + short on one line unless it needs to wrap */ .glossary-tip__inner { display: inline; } .glossary-tip__title, .glossary-tip__short { display: inline; } .glossary-tip__short { margin-left: .25rem; } /* Anchor terms as inline-block so the abspos tooltip has a sane containing block */ .glossary-term, .glossary-link { display: inline-block; /* was inline */ position: relative; } /* Tooltip sizing + placement */ .glossary-tip { bottom: calc(100% + 0.4rem); /* little gap above the term */ left: 0; /* Let content define width, but keep sensible guards */ width: max-content; /* size to content */ min-width: 20ch; /* don’t collapse to a sliver */ max-width: min(90vw, 42ch); /* don’t overflow viewport */ white-space: normal; /* wrap as needed */ overflow-wrap: break-word; /* wrap long words (not every char) */ word-break: normal; hyphens: auto; } /* Render tip as inline-block when open to avoid full-width blocks */ .glossary-term.is-open .glossary-tip, .glossary-link.is-open .glossary-tip { display: inline-block; /* was block */ } /* Inline content flow so title + short sit naturally */ .glossary-tip__inner { display: inline; } .glossary-tip__title, .glossary-tip__short { display: inline; } .glossary-tip__short { margin-left: .25rem; } /* logo container baseline */ .site-logo { position: relative; display: inline-block; width: 48px; height: 32px; } /* static logo */ .logo-static { width: 100%; height: auto; display: block; } /* animated logo block (existing behaviour preserved) */ .brand-anim { position: absolute; inset: 0; display: block; } /* hide animation when motion is reduced or iOS Safari */ @media (prefers-reduced-motion: reduce) { .brand-anim { display: none; } } /* simple WebKit test → hide anim on iOS Safari */ @supports (-webkit-touch-callout: none) { .brand-anim { display: none; } } /* === Footer (scoped) ===================================================== */ .site-footer { /* your card already handles radius/border/padding */ /* leave visual card styles to existing classes; only layout/alignment here */ } /* Layout container */ .site-footer .footer-inner { width: 100%; } /* Columns: Brand/Address • Contact • Policies */ .site-footer .footer-sections { display: grid; grid-template-columns: 1.2fr 1fr 1fr; /* address a touch wider */ gap: 1.25rem; align-items: start; } /* Stack on narrower screens */ @media (max-width: 960px) { .site-footer .footer-sections { grid-template-columns: 1fr; } } /* Hard reset any inherited right-aligns in this region */ .site-footer .footer-col, .site-footer .footer-col * { text-align: left; } /* Titles */ .site-footer .footer-title { margin: 0 0 .5rem 0; font-size: 0.95rem; font-weight: 600; opacity: 0.9; } /* Address block (prevent
    default italics on some UA styles) */ .site-footer .footer-address { font-style: normal; line-height: 1.5; } .site-footer .footer-address > div { /* each line */ margin: 0.1rem 0; } /* Contact lines */ .site-footer .contact-line { margin: 0.15rem 0; } .site-footer .contact-line a { text-decoration: none; } .site-footer .contact-line a:hover, .site-footer .contact-line a:focus { text-decoration: underline; } /* Small notes (hours, ICO, build) */ .site-footer .muted, .site-footer .legal-note, .site-footer .contact-note { opacity: 0.8; font-size: 0.92em; margin: 0.4rem 0 0; } /* “All contact details” link */ .site-footer .contact-more { margin-top: 0.5rem; } /* Policies — supports BOTH