/* ============================================================ The public site. Same rule as everywhere else: NOT ONE COLOUR VALUE IN THIS FILE. Every colour is var(--token), emitted into from the settings table. When the name and palette change hands, the public face changes with them — otherwise the handover is only two thirds done. THE LOOK, AND WHERE IT COMES FROM The mark is brushed steel with an electric blue rim. So the page is cut from the same material: near-black ground, a faint engineering grid, headings filled with a chrome gradient, and one saturated blue doing all the pointing. Nothing here is invented decoration — every effect is the logo's own treatment carried into type and edges so the badge belongs to the page instead of sitting on top of it. Type is a webfont for DISPLAY ONLY, loaded with display=swap, and the body stays on the system stack. A client on a patchy rural connection still reads the words immediately; the face arrives when it arrives. That was the original reason for no webfonts and it still holds — it just does not require the headings to be plain. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--void); color: var(--text); font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-font-smoothing: antialiased; /* The grid. Two hairline layers at 64px, so the ground reads as drawing paper rather than a black rectangle. It is BELOW every panel, never on top of text. */ background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 64px 64px, 64px 64px; background-attachment: fixed; } a { color: var(--accent); } img { max-width: 100%; } .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; position: relative; } .narrow { max-width: 760px; } /* ---------- The display face ---------- One place. Everything that should look struck rather than typed points at this. */ .display, h1, h2, .stat .n, .btn, .site-head nav a.cta, button { font-family: "Saira Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif; } h1, h2 { text-transform: uppercase; letter-spacing: 0.005em; font-weight: 800; } /* Chrome fill. The gradient is clipped to the glyphs, so a heading is the same brushed steel as the badge above it. Falls back to flat --chrome-1 where background-clip is unsupported, which is why the colour is set first. THE PER-LINE TRICK, AND WHY IT IS NOT OPTIONAL A single gradient stretched over the whole block gives line one the highlight and line five the shadow — a five-line headline fades to dark grey at the bottom and reads as broken, not as metal. background-size caps the gradient at ONE LINE TALL and lets it tile, so every line gets the full sweep. The value has to track line-height; both live here together for that reason. */ .chrome, h1, h2, .brand-word { color: var(--chrome-1); background-image: linear-gradient(180deg, var(--chrome-1) 0%, var(--chrome-1) 26%, var(--chrome-2) 52%, var(--chrome-3) 74%, var(--chrome-2) 100%); background-size: 100% 1em; background-repeat: repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* The blue bloom under the metal, straight off the logo. */ filter: drop-shadow(0 2px 14px var(--glow-soft)); } /* ---------- Header ---------- */ .site-head { border-bottom: 1px solid var(--edge-soft); background: var(--void); position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--glow-soft), 0 10px 30px -18px var(--void); } /* Same 1060px as .wrap, and that is not negotiable: a header on a wider container than the body puts the logo and the headline on two different left edges, and a misaligned gutter reads as carelessness from across the room. The nav was made to fit the container rather than the container widened to fit the nav. */ .site-head-in { max-width: 1060px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 16px; min-height: 74px; flex-wrap: wrap; } .brand-lockup { display: inline-flex; align-items: center; gap: 9px; } .brand-crest { height: 40px; width: auto; display: block; flex: none; /* Lifts the badge off a near-black ground — without it the dark bevels on the wings disappear into the header. */ filter: drop-shadow(0 0 16px var(--glow-soft)); } .brand-word { font-family: "Saira Condensed", "Oswald", "Arial Narrow", system-ui, sans-serif; font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: 0.005em; line-height: 1.1; background-size: 100% 1.1em; white-space: nowrap; filter: none; } .brand-tick { font-family: "Saira", system-ui, sans-serif; font-size: 10px; color: var(--void); background: var(--accent); padding: 3px 6px; border-radius: 2px; margin-left: 2px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; box-shadow: 0 0 14px var(--glow); } .brand-logo { height: 44px; width: auto; display: block; } .site-head nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; align-items: center; } .site-head nav a { font-family: "Saira", system-ui, sans-serif; color: var(--text-dim); padding: 9px 9px; border-radius: 4px; font-size: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.055em; font-weight: 600; white-space: nowrap; position: relative; } .site-head nav a:hover { color: var(--text); } /* The active mark is a rule under the word, not a filled pill — it points without competing with the call to action. */ .site-head nav a.on { color: var(--text); } .site-head nav a.on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--glow); } .site-head nav a.cta { background: var(--accent); color: var(--void); font-weight: 700; letter-spacing: 0.07em; padding: 10px 15px; margin-left: 6px; border: 1px solid var(--accent); box-shadow: 0 0 0 1px var(--void), 0 6px 22px -6px var(--glow); } .site-head nav a.cta:hover { background: var(--accent-dark); color: var(--text); } .site-head nav a.cta::after { display: none; } /* ---------- Hero ---------- */ .hero { padding: 104px 0 84px; border-bottom: 1px solid var(--edge-soft); position: relative; overflow: hidden; } /* The bloom. One soft blue light off the top-left, the same colour as the rim on the badge. Pointer-events off so it can never eat a click. */ .hero::before { content: ""; position: absolute; inset: -40% 30% 20% -25%; background: radial-gradient(closest-side, var(--glow-soft), transparent 72%); pointer-events: none; } .hero > .wrap { position: relative; z-index: 1; } .eyebrow { font-family: "Saira", system-ui, sans-serif; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; margin: 0 0 20px; display: flex; align-items: center; gap: 14px; } /* The tick that runs off the eyebrow — the tell that ties this page to the other two sites in the family. */ .eyebrow::after { content: ""; flex: 1; height: 1px; max-width: 220px; background: linear-gradient(90deg, var(--accent), transparent); } /* line-height and background-size are one decision — see .chrome. */ .hero h1 { font-size: clamp(36px, 5.6vw, 62px); line-height: 1.03; background-size: 100% 1.03em; margin: 0 0 26px; letter-spacing: 0.005em; max-width: 22ch; filter: drop-shadow(0 3px 22px var(--glow-soft)); } .hero p.lede { font-size: clamp(17px, 2vw, 20px); color: var(--text-dim); max-width: 60ch; margin: 0 0 32px; } .hero .where { color: var(--text-faint); font-size: 12px; margin: 30px 0 0; font-family: "Saira", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.2em; } /* ---------- Buttons ---------- */ .btn { display: inline-block; background: var(--accent); color: var(--void); padding: 15px 28px; border-radius: 4px; font-weight: 700; text-decoration: none; border: 1px solid var(--accent); text-transform: uppercase; letter-spacing: 0.09em; font-size: 16px; box-shadow: 0 10px 30px -10px var(--glow); transition: box-shadow .15s ease, transform .15s ease, background .15s ease; } .btn:hover { background: var(--accent-dark); color: var(--text); box-shadow: 0 14px 34px -10px var(--glow); transform: translateY(-1px); } .btn-quiet { background: var(--panel); color: var(--text); border-color: var(--edge-loud); box-shadow: none; } .btn-quiet:hover { background: var(--rise); color: var(--text); border-color: var(--accent); } .btn-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ---------- Sections ---------- */ section { padding: 76px 0; border-bottom: 1px solid var(--edge-soft); position: relative; } section:last-of-type { border-bottom: none; } h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.12; margin: 0 0 18px; background-size: 100% 1.12em; } h3 { font-family: "Saira", system-ui, sans-serif; font-size: 17px; margin: 0 0 8px; font-weight: 700; letter-spacing: 0.01em; } .section-lede { color: var(--text-dim); max-width: 60ch; margin: 0 0 40px; } .cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; } .cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 22px; } @media (max-width: 860px) { .cols { grid-template-columns: minmax(0,1fr); } } @media (max-width: 700px) { .cols-2 { grid-template-columns: minmax(0,1fr); } } .card { background: var(--panel); border: 1px solid var(--edge); border-radius: 6px; padding: 26px 26px 28px; position: relative; overflow: hidden; transition: border-color .15s ease, transform .15s ease; } /* A lit top edge. One hairline, brightest in the middle — the same move as the rim light on the badge. */ .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--glow), transparent); opacity: .55; } .card:hover { border-color: var(--edge-loud); transform: translateY(-2px); } .card p:last-child { margin-bottom: 0; } .card .num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 3px; border: 1px solid var(--accent); color: var(--accent); font-family: "Saira Condensed", "Oswald", system-ui, sans-serif; font-size: 17px; font-weight: 800; margin-bottom: 16px; background: var(--glow-soft); box-shadow: 0 0 18px -4px var(--glow); } /* The claim the whole business rests on gets its own treatment. */ .proof { background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--clear); border-radius: 6px; padding: 32px 34px; } .proof h2 { margin-bottom: 12px; } .proof .line { font-size: 19px; font-weight: 600; color: var(--clear); margin: 24px 0 0; } /* What gets checked — a real example list, not stock icons */ .checklist { list-style: none; padding: 0; margin: 0; } .checklist li { padding: 13px 0 13px 32px; border-bottom: 1px solid var(--edge-soft); position: relative; } .checklist li:last-child { border-bottom: none; } .checklist li::before { content: ""; position: absolute; left: 4px; top: 22px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--clear); box-shadow: 0 0 10px -1px var(--clear); } .checklist li span { display: block; color: var(--text-faint); font-size: 14.5px; } /* ---------- Contact ---------- */ label { display: block; font-size: 11px; color: var(--text-faint); margin-bottom: 7px; font-family: "Saira", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } input[type=text], input[type=email], input[type=tel], textarea { width: 100%; background: var(--void); color: var(--text); border: 1px solid var(--edge); border-radius: 4px; padding: 13px 15px; font: inherit; font-size: 16px; } input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow-soft); } textarea { min-height: 130px; resize: vertical; } .field { margin-bottom: 20px; } button { background: var(--accent); color: var(--void); border: 1px solid var(--accent); padding: 15px 30px; border-radius: 4px; font: inherit; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.09em; font-size: 16px; box-shadow: 0 10px 30px -10px var(--glow); } button:hover { background: var(--accent-dark); color: var(--text); } /* The honeypot. Off-screen rather than display:none — some bots skip anything explicitly hidden, and none of them read this. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .flash { padding: 15px 19px; border-radius: 4px; margin: 0 0 24px; border: 1px solid var(--edge); background: var(--panel); border-left-width: 3px; } .flash-ok { border-color: var(--clear); color: var(--clear); } .flash-error { border-color: var(--overdue); color: var(--overdue); } .contact-facts { list-style: none; padding: 0; margin: 0; } .contact-facts li { padding: 12px 0; border-bottom: 1px solid var(--edge-soft); } .contact-facts li:last-child { border-bottom: none; } .contact-facts .k { color: var(--text-faint); font-size: 11px; font-family: "Saira", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; } .contact-facts .v { font-size: 17px; } /* ---------- Footer ---------- */ .site-foot { border-top: 1px solid var(--edge-soft); padding: 46px 0 64px; color: var(--text-faint); font-size: 14.5px; background: var(--panel); } .site-foot-in { display: flex; gap: 22px; justify-content: space-between; flex-wrap: wrap; } .site-foot a { color: var(--text-dim); text-decoration: none; } .site-foot a:hover { color: var(--accent); } .site-foot .tagline { font-family: "Saira", system-ui, sans-serif; letter-spacing: 0.24em; text-transform: uppercase; font-size: 11px; color: var(--accent); margin-top: 6px; } /* The full lockup, once, at the bottom — where there is room for it to be read at the size it was drawn. */ .foot-logo { max-width: 260px; margin: 0 0 16px; opacity: .95; } /* Who built it, kept quieter than whose business it is. Sits under a rule so it reads as a credit rather than a fourth column. */ .site-credit { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--edge-soft); font-size: 11px; color: var(--text-faint); font-family: "Saira", system-ui, sans-serif; text-transform: uppercase; letter-spacing: 0.16em; } .site-credit a { color: var(--text-faint); } .site-credit a:hover { color: var(--accent); } /* ---------- Reduced motion ---------- The transforms are decoration. Anybody who has asked their system to stop moving things gets the same page, still. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .card:hover, .btn:hover { transform: none; } html { scroll-behavior: auto; } }