/* * Services page — built from the design handoff. * * The handoff was written for a Next.js/React codebase; this site is static * HTML, so its components become server-generated markup and these rules. * Its prototype used inline styles throughout; per the handoff those are * deliberately not carried over. * * Everything is scoped under .sv-page so this page's near-black palette and * Barlow/IBM Plex typography cannot leak into the rest of the site, which * still uses the Kadence theme. */ /* ========================================================================= PALETTE ========================================================================= The site ships in dark (night) mode -- the original design handoff palette. Light mode is one attribute away: Nothing else changes: no second stylesheet, no rebuild. Every colour on the site resolves from these tokens, which is what makes a swap enough, and theme.js flips the attribute for the header switch. The -rgb tokens hold bare triples so a rule can write rgba(var(--ink-rgb), 0.6) and get a muted tone that follows the theme. Before they existed there were 146 hardcoded colour literals across the page stylesheets, and every one would have stayed dark-on-dark. ========================================================================= */ :root { /* ---- dark (night) -- the default ---- */ --bg: #14110f; --bg-rgb: 20, 17, 15; --bg-raised: #191614; --bg-raised-rgb: 25, 22, 20; --bg-hover: #1f1b18; --bg-image: #0d0b0a; --bg-input: #0f0d0c; --ink: #f4f1ec; --ink-rgb: 244, 241, 236; --accent: #c8352a; --accent-hover: #e04236; --accent-rgb: 200, 53, 42; --accent-soft: #ff8071; /* * The accent as SMALL TEXT, which is a different problem from the accent as * a surface. #c8352a on this page measures 3.58:1, and 3.43:1 on the raised * surface -- under the 4.5:1 WCAG AA needs below 24px. It affects every * eyebrow and every "read more" on the site. * * This is a lighter red that clears it at 5.35:1 on the raised surface. The * accent itself is untouched: as a button background with white text it is * fine, and as large display type it clears the 3:1 large-text threshold. */ --accent-text: #ef5a4c; --ok: #3fa45b; --ok-rgb: 63, 164, 91; --ok-soft: #6fce8b; --warn: #d9a441; --on-accent: #ffffff; --on-accent-rgb: 255, 255, 255; --rule: rgba(244, 241, 236, 0.14); --rule-soft: rgba(244, 241, 236, 0.1); --border-idle: rgba(244, 241, 236, 0.22); --header-bg: rgba(20, 17, 15, 0.94); /* * The CTA band is a full-bleed block of colour, and a large area reads far * brighter than the same red does as a button. * * Measured against the page rather than picked by eye. Full --accent put the * band at 3.58x the page luminance -- a flare across the full width. #8c2219 * was still 2.11x. This sits at 1.58x: present, clearly the brand red, but * no longer the brightest thing on a dark screen. White text on it measures * 11.9:1, so nothing was traded for it. * * The accent itself is untouched, so buttons and links keep their punch. */ --band-bg: #6b1811; --band-ink: rgba(255, 255, 255, 0.96); --band-ink-soft: rgba(255, 255, 255, 0.78); --img-filter: saturate(0.85) contrast(1.05); --img-muted: grayscale(1) brightness(0.62) contrast(1.1); /* Light-on-dark tolerates far lower alpha, so these keep the original feel. */ --text-faint: rgba(244, 241, 236, 0.5); --text-muted: rgba(244, 241, 236, 0.66); --text-soft: rgba(244, 241, 236, 0.8); } /* ---- light (day) ---- */ :root[data-theme="light"] { /* ---- light (day) -- opt in with ---- */ /* Warm off-white, not pure white: this is an industrial brand, and a clinical white ground fights the condensed type and hairline rules. */ --bg: #f4f1ec; --bg-rgb: 244, 241, 236; --bg-raised: #fbf9f6; --bg-raised-rgb: 251, 249, 246; --bg-hover: #ebe6de; --bg-image: #e2ddd4; --bg-input: #ffffff; --ink: #14110f; --ink-rgb: 20, 17, 15; /* Deepened from the handoff's #c8352a. That red was tuned to glow against near-black; on a light ground it needs more weight to hold contrast as body-adjacent text and as a link colour. */ --accent: #b4271c; --accent-hover: #8f1d14; --accent-rgb: 180, 39, 28; /* Light mode already passes: #b4271c measures 5.74:1 on the page and 6.15:1 on the raised surface, so small accent text needs no lightening here. */ --accent-text: #b4271c; /* On dark this was a lighter tint of the accent. On light it has to go the other way -- darker, not lighter -- or it disappears. */ --accent-soft: #94180f; --ok: #2f7d45; --ok-rgb: 47, 125, 69; --ok-soft: #276639; --warn: #9a6a12; --on-accent: #ffffff; --on-accent-rgb: 255, 255, 255; --rule: rgba(20, 17, 15, 0.16); --rule-soft: rgba(20, 17, 15, 0.11); --border-idle: rgba(20, 17, 15, 0.28); --header-bg: rgba(244, 241, 236, 0.92); /* A light page tolerates more red than a dark one -- the band is darker than its surroundings here, so it reads as weight rather than glare. */ --band-bg: #942017; --band-ink: rgba(255, 255, 255, 0.97); --band-ink-soft: rgba(255, 255, 255, 0.82); /* The photography is dark, moody artwork. On a light ground it needs lifting, or the images read as holes punched through the page. */ --img-filter: saturate(0.95) contrast(1.02) brightness(1.08); --img-muted: grayscale(1) brightness(0.95) contrast(1.03); /* * De-emphasised text, with a floor. * * Dark-on-light loses contrast much faster than light-on-dark: the same * rgba(ink, 0.45) that reads ~5:1 on near-black reads 2.97:1 here, under * the 4.5:1 WCAG AA minimum. Alpha is baked into each rule and cannot vary * by theme, so every muted colour resolves through these instead. * * Measured on the deployed page: faint 4.61:1, muted 5.55:1, soft 7.4:1. */ --text-faint: rgba(20, 17, 15, 0.63); --text-muted: rgba(20, 17, 15, 0.72); --text-soft: rgba(20, 17, 15, 0.82); } .sv-page { --gutter: 40px; margin: 0; background: var(--bg); color: var(--ink); font-family: Barlow, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; } /* ---- document ---- */ html { -webkit-text-size-adjust: 100%; } body.sv-body { margin: 0; background: var(--bg); color: var(--ink); font-family: Barlow, system-ui, -apple-system, sans-serif; } /* ---- sticky header ---- */ .sv-topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--gutter); background: var(--header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-soft); } .sv-brand { display: flex; align-items: baseline; gap: 10px; color: inherit; } .sv-wordmark { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 26px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); line-height: 1; } .sv-wordmark-sm { font-size: 24px; margin: 0; } .sv-brand-meta { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); } .sv-nav { display: flex; gap: 26px; flex-wrap: wrap; } .sv-nav a { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); transition: color .15s; } .sv-nav a:hover { color: var(--ink); } .sv-nav a[aria-current="page"] { color: var(--ink); } /* ---- menu button ---- */ /* * Hidden until nav.js marks the document ready. Until then the nav row is the * menu, so a failed script leaves working links rather than an inert button * next to nothing. */ .sv-burger { display: none; } .sv-burger-bars { display: grid; gap: 4px; width: 20px; } .sv-burger-bars span { display: block; height: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; } /* Three bars fold into a cross while the panel is open. */ .sv-burger[aria-expanded="true"] .sv-burger-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .sv-burger[aria-expanded="true"] .sv-burger-bars span:nth-child(2) { opacity: 0; } .sv-burger[aria-expanded="true"] .sv-burger-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* ---- day / night switch ---- */ .sv-theme { display: inline-flex; align-items: center; justify-content: center; /* 44px, the comfortable tap target, without looking like a chunky button. */ width: 44px; height: 44px; flex: none; padding: 0; background: none; border: 1px solid var(--border-idle); color: var(--ink); font-size: 19px; line-height: 1; cursor: pointer; transition: border-color .15s, color .15s; } .sv-theme:hover { border-color: var(--accent); color: var(--accent-text); } /* * One glyph is shown at a time, and which one is driven by the theme rather * than by JavaScript. That means the icon is never briefly wrong: the boot * script sets the attribute before first paint, so the correct glyph is in * place on the very first frame, before theme.js has even loaded. */ .sv-theme-sun { display: inline; } .sv-theme-moon { display: none; } :root[data-theme="light"] .sv-theme-sun { display: none; } :root[data-theme="light"] .sv-theme-moon { display: inline; } .sv-phone { display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px; background: var(--accent); color: var(--on-accent); font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; transition: background .15s; } .sv-phone:hover { background: var(--accent-hover); color: var(--on-accent); } .sv-phone-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--on-accent); flex: none; } /* ---- footer ---- */ .sv-footer { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding: 52px var(--gutter) 44px; border-top: 1px solid var(--rule-soft); } .sv-copy { margin-top: 10px; font-size: 14px; color: var(--text-faint); } .sv-footer-contact { display: flex; flex-wrap: wrap; gap: 28px; } .sv-footer-contact p { display: block; } .sv-footer-contact .sv-label { display: block; font-size: 10px; letter-spacing: 0.16em; } .sv-footer-contact a { display: block; margin-top: 4px; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 20px; letter-spacing: 0.04em; color: var(--ink); transition: color .15s; } .sv-footer-contact a:hover { color: var(--accent-text); } @media (max-width: 900px) { /* * flex-wrap is load-bearing: the menu panel is a flex item with width:100%, * and without wrapping it cannot take its own row -- it gets shrunk into * whatever space is left on the header line. Dropping this collapsed the * open panel to 108px jammed against the right edge. */ .sv-topbar { flex-wrap: wrap; gap: 12px; padding: 12px var(--gutter); } /* Phone and switch shrink to leave room for the menu button on one row. */ .sv-phone { padding: 10px 14px; font-size: 15px; } .sv-theme { width: 40px; height: 40px; font-size: 17px; } .sv-brand-meta { display: none; } /* * Collapsed menu. Only applies once nav.js has marked the document, so a * failed script leaves the plain wrapped nav instead of no menu at all. */ [data-nav="ready"] .sv-burger { display: inline-flex; align-items: center; gap: 9px; order: 2; padding: 10px 14px; background: none; border: 1px solid rgba(var(--ink-rgb), 0.28); color: var(--ink); font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } /* * display:none rather than a height animation. The 0fr/1fr grid trick needs * a single wrapper child, and this nav has six link children -- it would * only have collapsed the first row. * * The adjacent sibling selector is why nav.js does not need a class: the * button's own aria-expanded drives the panel. */ [data-nav="ready"] .sv-nav { display: none; order: 4; width: 100%; margin: 0; } [data-nav="ready"] .sv-burger[aria-expanded="true"] + .sv-nav { display: grid; gap: 1px; background: var(--rule); margin: 4px 0 2px; } [data-nav="ready"] .sv-nav > a { min-height: 0; padding: 14px 16px; background: var(--bg); font-size: 16px; color: var(--text-soft); } [data-nav="ready"] .sv-nav > a[aria-current="page"] { color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); } /* No script: keep the old wrapped row, with tappable targets. */ .sv-nav { order: 4; width: 100%; gap: 4px 14px; } .sv-nav a { padding: 11px 0; } .sv-footer { grid-template-columns: 1fr; gap: 28px; padding: 40px var(--gutter); } .sv-footer-contact a { display: inline-block; padding: 6px 0; } } .sv-page *, .sv-page *::before, .sv-page *::after { box-sizing: border-box; } .sv-page h1, .sv-page h2, .sv-page h3 { font-family: "Barlow Condensed", Barlow, sans-serif; text-transform: uppercase; margin: 0; } .sv-page p { margin: 0; } .sv-page ul, .sv-page ol { margin: 0; padding: 0; list-style: none; } .sv-page a { text-decoration: none; } /* Sticky theme header sits above; keep anchor targets clear of it. */ .sv-page [id] { scroll-margin-top: 90px; } /* ---- shared type ---- */ .sv-eyebrow { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-text); margin: 0 0 14px; } .sv-eyebrow-bar { display: flex; align-items: center; gap: 12px; color: var(--text-faint); margin-bottom: 28px; } .sv-eyebrow-bar::before { content: ""; width: 34px; height: 2px; background: var(--accent); flex: none; } .sv-h1 { font-weight: 700; font-size: clamp(46px, 6vw, 88px); line-height: 0.94; text-wrap: balance; } .sv-accent { color: var(--accent); } .sv-h2 { font-weight: 700; font-size: clamp(32px, 3.8vw, 50px); line-height: 1; } .sv-h2-split { font-size: clamp(30px, 3.4vw, 44px); } .sv-label { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); margin: 0; } .sv-label-accent { color: var(--accent-text); } /* ---- buttons: square everywhere, per the handoff ---- */ .sv-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } /* * background and color are declared here, not left to the variants. * * Without them a