/* =========================================================================
iTops — site styles
Built to the iTops Brand Guidelines (2020) and the live itops.nz design.
1. Brand tokens
2. Reset & base
3. Layout
4. Buttons
5. Header
6. Banner + the yellow graphic device
7. Content blocks
8. Forms
9. Footer
10. Responsive
========================================================================= */
/* -------------------------------------------------------------------------
0. BRAND FONTS — self-hosted so the site works offline and makes no
external requests. Montserrat (300/400/500/600/700) + Kalam Bold, the two
Google Fonts named in the brand guidelines.
------------------------------------------------------------------------- */
@font-face { font-family: Montserrat; font-style: normal; font-weight: 300; font-display: swap;
src: url(../fonts/montserrat-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 400; font-display: swap;
src: url(../fonts/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 500; font-display: swap;
src: url(../fonts/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 600; font-display: swap;
src: url(../fonts/montserrat-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Montserrat; font-style: normal; font-weight: 700; font-display: swap;
src: url(../fonts/montserrat-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Kalam; font-style: normal; font-weight: 700; font-display: swap;
src: url(../fonts/kalam-latin-700-normal.woff2) format('woff2'); }
/* -------------------------------------------------------------------------
1. BRAND TOKENS
Colours are the guideline palette, matched to the values actually used in
the live site's assets (the SVG icons ship as #FCD602 / #00132D).
Guideline reference values: yellow #fbd705, dark blue #00152c, blue #223d94.
------------------------------------------------------------------------- */
:root {
--yellow: #fcd602; /* primary brand colour, used generously */
--yellow-soft: #fef4b8;
--blue: #223d94; /* used sparingly, to complement the yellow */
--dark: #00132d; /* dark blue — type, dark bands, footer */
--white: #ffffff;
--grey: #f5f6f8; /* light section background */
--grey-line: #e2e5ea;
--ink: #00132d;
--ink-soft: #4a5768;
/* Type — Montserrat for everything, Kalam Bold for the brand line only */
--font: Montserrat, "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
--font-script: Kalam, "Comic Sans MS", cursive;
--fs-body: 16px;
--fs-lead: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
--fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
--fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
--fs-h1: clamp(1.9rem, 1.4rem + 2vw, 3rem);
--fs-script: clamp(3rem, 2rem + 5vw, 5.75rem);
--wrap: 1240px;
--wrap-narrow: 780px;
--gutter: clamp(1.25rem, 4vw, 2.5rem);
--band-y: clamp(3rem, 7vw, 5.625rem);
--header-h: 100px;
--radius: 12px;
--shadow: 0 8px 30px rgba(0, 19, 45, .08);
}
/* -------------------------------------------------------------------------
2. RESET & BASE
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
margin: 0;
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.7;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3 { color: var(--dark); font-weight: 700; line-height: 1.2; margin: 0 0 .55em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--dark); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 3px; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--dark); color: #fff; padding: .75rem 1.25rem; }
.skip-link:focus { left: 0; }
.arrow { width: 1em; height: 1em; flex: none; }
/* -------------------------------------------------------------------------
3. LAYOUT
------------------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap.narrow { max-width: var(--wrap-narrow); }
.band { padding-block: var(--band-y); position: relative; }
.band--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.band--grey { background: var(--grey); }
.section-title { margin-bottom: 1rem; }
.section-intro { max-width: 70ch; color: var(--ink-soft); margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.lede { font-size: var(--fs-lead); font-weight: 400; line-height: 1.55; }
.center { text-align: center; margin-inline: auto; max-width: 62ch; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; font-weight: 700; margin-bottom: .75rem; }
/* -------------------------------------------------------------------------
4. BUTTONS — brand pill, Montserrat Bold 18px, 12px/40px
------------------------------------------------------------------------- */
.button {
display: inline-block; border: 2px solid transparent; border-radius: 9999px;
padding: 12px 40px; font-size: 18px; font-weight: 700; line-height: 1.25;
text-decoration: none; cursor: pointer; transition: .3s;
}
.button--sm { font-size: 14px; padding: 9px 26px; }
.button--yellow { background: var(--yellow); color: var(--dark); }
.button--yellow:hover { background: var(--dark); color: var(--yellow); }
.button--white { background: var(--white); color: var(--dark); }
.button--white:hover { background: var(--yellow); color: var(--dark); }
.card-link {
display: inline-flex; align-items: center; gap: .4rem;
font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--dark);
border-bottom: 2px solid var(--yellow); padding-bottom: 2px;
}
.card-link:hover { color: var(--blue); border-color: var(--blue); }
.card-link .arrow { transition: transform .2s ease; }
.card-link:hover .arrow { transform: translateX(3px); }
/* -------------------------------------------------------------------------
5. HEADER
------------------------------------------------------------------------- */
/* The header sits over the top of the hero so the yellow device can run up
behind it, the way it does on itops.nz. It only paints a white bar once
the page has scrolled. */
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: transparent; transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { background: var(--white); box-shadow: 0 1px 12px rgba(0, 19, 45, .08); }
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.brand { margin-right: auto; display: block; }
.brand img { width: 190px; height: auto; } /* 20-year lockup, sized up 20% twice from the original 132px */
.primary-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
.nav-list { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.5rem); }
.nav-list a {
display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap;
font-size: 14px; font-weight: 600; color: var(--dark); text-decoration: none; padding: .5rem 0;
}
.nav-list a:hover, .nav-list a.is-active { color: var(--blue); }
.nav-list a.is-active { box-shadow: inset 0 -3px 0 var(--yellow); }
.caret { width: .65em; height: .65em; }
.has-children { position: relative; }
.submenu {
position: absolute; top: 100%; left: -1rem; min-width: 260px; padding: .4rem;
background: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity .16s, transform .16s, visibility .16s;
}
.has-children:hover .submenu, .has-children:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.submenu a { display: block; padding: .6rem .8rem; border-radius: 8px; }
.submenu a:hover { background: var(--yellow-soft); }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-phone { display: inline-flex; align-items: center; gap: .45rem; font-size: 14px; font-weight: 700; text-decoration: none; }
.nav-phone img { width: 16px; }
.nav-toggle {
display: none; width: 46px; height: 46px; border: 0; background: var(--yellow);
border-radius: 50%; cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
display: block; width: 20px; height: 2px; background: var(--dark); border-radius: 2px; transition: .2s;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
/* -------------------------------------------------------------------------
6. BANNER + THE YELLOW GRAPHIC DEVICE
The brand's graphic device is a circle that is always cropped by the edge
of the frame — never centred, always clipping over an edge. Here it is a
real circle positioned so it runs off the left of the viewport, with the
banner photograph masked into the matching circle on the right using the
same SVG masks the live site uses.
------------------------------------------------------------------------- */
.banner { position: relative; overflow: hidden; background: var(--white); padding-top: var(--header-h); }
/* Wrapper for the two hero circles. Transparent to layout until the
1280px breakpoint turns it into the clipping frame (section 6 below). */
.banner__frame { display: contents; }
.banner__device {
position: absolute; z-index: 0; background: var(--yellow); border-radius: 50%;
width: 150vw; height: 150vw; max-width: 1500px; max-height: 1500px;
left: -58vw; top: -46%;
}
.banner--home .banner__device { left: -40vw; top: -42%; }
@media (min-width: 1280px) {
/* The device runs behind the masked photograph, so the two circles meet
with no white gap — the same relationship the live site has. */
/* The two circles are sized off the viewport so the relationship holds at
any width: the yellow one clips off the left edge, the photograph bleeds
off the right, and their edges meet at 46.5% with no overlap. */
.banner__device {
width: 56vw; height: 56vw; max-width: none; max-height: none;
left: auto; right: 53.5%; top: 50%; transform: translateY(-50%);
}
.banner--home .banner__device {
width: 56vw; height: 56vw; left: auto; right: 53.5%; top: 50%; transform: translateY(-50%);
}
}
.banner__inner { position: relative; z-index: 2; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.banner--home .banner__inner { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 6rem); }
.banner__inner > * { max-width: 30ch; }
.banner__lead { font-size: var(--fs-lead); font-weight: 400; color: var(--dark); max-width: 22ch; }
.banner__kicker { font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 .25rem; }
.banner__script {
font-family: var(--font-script); font-weight: 700; font-size: var(--fs-script);
line-height: 1.05; color: var(--dark); padding-left: 2.5rem; margin: 0;
}
.banner__sub { font-size: var(--fs-lead); color: var(--dark); max-width: 34ch; margin: 0; }
.banner__image {
position: relative; z-index: 1; width: calc(100% - 1.5rem); margin-left: auto;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: cover; mask-size: cover;
-webkit-mask-position: center bottom; mask-position: center bottom;
/* circle-mask-whole.svg, inlined (see assets/img/ for the source files) */
-webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,");
}
.banner--home .banner__image {
/* circle-mask-whole-home.svg */
-webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,");
}
.banner__image img { width: 100%; object-fit: cover; }
@media (min-width: 1280px) {
/* ======================================================================
HERO — measured from the production DOM, not from a screenshot.
itops.nz was opened in a real browser at 1425px and 1905px wide and its
rendered boxes read straight off the page. The result settles what the
guessing could not:
at 1425px wide at 1905px wide
banner height 590px 590px <- FIXED
yellow circle 960px diameter 960px diameter <- FIXED
yellow centre y 192px 192px <- FIXED
yellow centre x 452px 692px = 50% - 260px
photo box 684 x 590 920 x 590 = 48% x full height
The hero does NOT scale with the window. The band is a fixed 590px and
the yellow is a fixed 960px circle; only its horizontal position tracks
the centre of the page. Every earlier version of this file sized the
composition in vw, which is why it could be made to match at one window
width and was wrong at every other one.
The photograph is not a clip-path circle either — production masks it
with the same SVGs in assets/img/, sized `cover` and pinned to the
bottom-left, which is what gives the circle its flat bottom edge where
it meets the band.
Interior pages: no yellow, photo box 55% wide at 52.5% across, full
band height, band min-height 703px and free to grow with the copy.
To re-check any of this, open itops.nz in the browser pane, set a
viewport, and read the boxes back — do not measure a screenshot.
====================================================================== */
.banner {
display: block;
position: relative;
padding-top: 0;
--band-h: 703px; /* interior default, production's value */
min-height: var(--band-h);
}
/* Production's hero is 590px of content starting BELOW its 132px header —
the nav never sits on top of the photograph. Ours had the photo starting
at y=0 with the fixed header overlaying it, which is what made the top of
the page look busy. The yellow still runs up behind the header, exactly
as it does on production. */
.banner--home { --band-h: calc(590px + var(--header-h)); }
.banner--home .banner__image {
top: var(--header-h);
height: calc(100% - var(--header-h));
}
/* ---- the yellow graphic device: home only, fixed size ---------------- */
.banner__device,
.banner--home .banner__device {
position: absolute; z-index: 0;
width: 960px; height: 960px;
max-width: none; max-height: none;
border-radius: 50%; background: var(--yellow);
right: auto; transform: none;
left: calc(50% - 260px - 480px); /* centre at 50% - 260px */
top: calc(60px - 480px); /* centre 60px below the band top */
}
/* ---- the photograph -------------------------------------------------- */
.banner__image {
position: absolute; top: 0; height: 100%;
left: 52.5%; width: min(55%, 920px); /* 920px = the source width */
right: auto; margin: 0; transform: none;
border-radius: 0; overflow: hidden; clip-path: none;
-webkit-mask-size: cover; mask-size: cover;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 0% 100%; mask-position: 0% 100%;
}
.banner--home .banner__image { left: 54.5%; width: 48%; }
.banner__image img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
/* ---- the copy -------------------------------------------------------- */
/* Production runs a 1280px container with the copy in a 640px half
column. .wrap is 1240px, so half of it is 620px — same shape. */
/* Production's banner container is 1280px — not the 1240px the rest of the
page uses — and its copy column is exactly half of that, 640px. At
1905px wide production's column measures 313..953; this reproduces that
to the pixel. The column also never exceeds the photograph's left edge,
so it cannot collide at narrow widths. */
.banner__inner,
.banner--home .banner__inner {
position: relative; z-index: 2;
--inner-left: max(calc((100vw - 1280px) / 2), var(--gutter));
width: 100%; max-width: none; margin-inline: 0;
min-height: var(--band-h);
padding: var(--header-h) 0 2rem var(--inner-left);
display: flex; flex-direction: column; justify-content: center;
}
.banner__inner > * {
max-width: min(640px, calc(52.5vw - var(--inner-left) - 2rem));
}
/* Production indents the home copy a further 10rem inside the container
(its own `xl:pl-40`): at 1425px wide the copy starts at x=232, not at
the container edge. */
.banner--home .banner__inner {
justify-content: flex-start;
padding-top: calc(var(--header-h) + 4.5rem);
padding-left: calc(var(--inner-left) + 10rem);
}
.banner--home .banner__inner > * {
max-width: min(40rem, calc(54.5vw - var(--inner-left) - 12rem));
}
.banner--home .banner__lead { max-width: 24ch; }
.banner__sub { font-size: var(--fs-h2); font-weight: 700; margin: 0 0 1rem; }
.banner__intro { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
.banner__intro p + p { margin-top: .9em; }
}
/* Page heads without a photograph. The small yellow device that used to clip
the top-right corner here is gone: production does not use one, and having
it on Success stories / Blog / Support but not on the banner pages read as
inconsistent. */
.page-head {
position: relative; overflow: hidden;
padding-top: calc(var(--header-h) + clamp(2rem, 4vw, 3rem));
padding-bottom: clamp(2.5rem, 6vw, 4.25rem);
}
/* On pages with no hero photograph the device clips the right-hand edge,
clear of the left-aligned copy. */
.page-head__device {
position: absolute; z-index: 0; background: var(--yellow); border-radius: 50%;
width: 46vw; height: 46vw; max-width: 700px; max-height: 700px;
left: auto; right: -10vw; top: -55%;
}
@media (max-width: 860px) {
.page-head__device { width: 60vw; height: 60vw; right: -22vw; top: -34%; }
}
.page-head .wrap { position: relative; z-index: 1; }
.page-head__sub { font-size: var(--fs-lead); max-width: 62ch; margin: 0; }
.page-head--story .page-head__sub { font-weight: 600; }
.page-head .eyebrow a { text-decoration: none; }
/* Circular photograph sitting on the device */
.circle-photo { position: relative; width: min(100%, 30rem); margin-inline: auto; }
.circle-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; }
.circle-photo .logo-circle { width: 100%; }
/* No graphic device behind these photographs — the live site uses a plain
circular crop here, and the yellow disc fought with the image. */
/* -------------------------------------------------------------------------
7. CONTENT BLOCKS
------------------------------------------------------------------------- */
/* Home tiles */
.tiles { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.tile { display: flex; flex-direction: column; align-items: flex-start; }
.tile p { color: var(--ink-soft); margin-bottom: 1.5rem; }
.tile .button { margin-top: auto; }
/* Split image/text rows */
.split { display: grid; gap: clamp(2rem, 6vw, 5rem); grid-template-columns: 1fr 1fr; align-items: center; }
/* .split--media-first → photograph left, copy right ("We're built for better IT")
.split--text-first → copy left, photograph right (success-story teaser) */
.split-body h2 { margin-bottom: 1.25rem; }
.split-sub { font-weight: 700; margin-bottom: 1rem; }
.split-body .button { margin-top: 1rem; }
/* Panels (about) */
.panels { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.panel h3 { font-size: var(--fs-h3); }
.panel p { color: var(--ink-soft); }
.values { display: grid; gap: 1rem; }
.value { position: relative; padding-left: 1.75rem; }
.value__dot { position: absolute; left: 0; top: .55rem; width: 12px; height: 12px; border-radius: 50%; background: var(--yellow); }
.value strong { font-weight: 700; }
.value { font-size: .9375rem; color: var(--ink-soft); }
/* Service cards with the brand illustrations */
.cards { display: grid; gap: clamp(1.75rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card-icon { width: 88px; height: auto; margin-bottom: 1.25rem; }
.card p { color: var(--ink-soft); font-size: .9375rem; margin-bottom: 1.25rem; }
.card .card-link { margin-top: auto; }
/* People */
.people { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.person__photo { width: 180px; margin-bottom: 1.1rem; }
.person__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.person h3 { margin-bottom: .1rem; }
.person__role { font-weight: 600; color: var(--blue); margin-bottom: .35rem; }
.person__phone { font-size: .9375rem; margin-bottom: .5rem; }
.person__bio { font-size: .9375rem; color: var(--ink-soft); }
/* How we work */
.hows { display: grid; gap: clamp(1.75rem, 4vw, 2.75rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.hows p { color: var(--ink-soft); font-size: .9375rem; }
/* Partners */
.partners { text-align: center; }
.partners h2 { font-size: var(--fs-h3); margin-bottom: 1.5rem; }
.partner-logos { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; align-items: center; }
.partner-logos img { width: 130px; height: auto; }
/* Success story cards */
.story-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.story-card__media { position: relative; display: block; width: 190px; margin-bottom: 1.25rem;
/* the mark is the link here, not the text inside it; text-decoration set on
an ancestor can't be cancelled further down, so it has to come off here */
text-decoration: none; }
/* ---------------------------------------------------------------------------
Client mark on the success stories.
The circle is kept — it is the brand's device — but the logo sits INSIDE it
rather than being cropped by it. A wide logo in a circular object-fit:cover
loses both its ends; contained and padded, it reads properly. Where there is
no logo file the circle carries a wordmark of the client's name instead, so
the grid never has a hole in it.
--------------------------------------------------------------------------- */
.logo-circle {
display: grid; place-items: center;
width: 100%; aspect-ratio: 1; border-radius: 50%;
background: var(--grey); border: 1px solid var(--grey-line);
position: relative; z-index: 1; overflow: hidden;
transition: transform .3s, border-color .3s;
}
.logo-circle img {
/* --logo-w is set per logo by the build, from the file's aspect ratio: a wide
wordmark fits more width inside a circle than a square mark does, so a
single fixed width would leave the wide ones looking shrunken. */
width: var(--logo-w, 66%); height: 66%; object-fit: contain;
}
.logo-circle--text span {
padding: 0 14%; text-align: center; font-weight: 700; color: var(--dark);
line-height: 1.25; font-size: .9375rem; letter-spacing: -.01em;
/* the circle sits inside the card's link, so the wordmark would otherwise
inherit the link underline and read as a second link */
text-decoration: none;
}
.logo-circle--feature { background: #fff; }
.logo-circle--feature.logo-circle--text span { font-size: 1.5rem; }
.story-card__media:hover .logo-circle { transform: scale(1.03); border-color: var(--yellow); }
.story-card__sector { text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .35rem; }
.story-card h2 { font-size: var(--fs-h3); margin-bottom: .4rem; }
.story-card h2 a { text-decoration: none; }
.story-card h2 a:hover { color: var(--blue); }
.story-card__sub { font-size: .9375rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
/* Story detail */
.story-section { margin-top: clamp(2rem, 4vw, 3rem); }
.story-section h2 { font-size: var(--fs-h2); }
.ticks { display: grid; gap: .7rem; margin: 1.25rem 0; }
.ticks li { position: relative; padding-left: 1.85rem; }
.ticks li::before {
content: ""; position: absolute; left: 0; top: .55rem;
width: 11px; height: 11px; border-radius: 50%; background: var(--yellow);
}
.pullquote { margin: 0; }
.pullquote blockquote {
margin: 0 0 1.5rem; padding: 0; font-size: var(--fs-lead); line-height: 1.55;
font-weight: 500; color: var(--dark); position: relative;
}
.pullquote blockquote::before {
content: "“"; font-family: Georgia, serif; font-size: 5rem; line-height: 0;
color: var(--yellow); position: absolute; left: -.55em; top: .45em;
}
.pullquote figcaption { display: flex; align-items: center; gap: 1rem; }
.pullquote figcaption img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.pullquote figcaption span { display: grid; font-size: .9375rem; color: var(--ink-soft); }
.pullquote figcaption strong { color: var(--dark); font-size: 1rem; }
/* Support cards — real iTops icons, which already carry the yellow circle */
.support-grid { display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.support-card { display: flex; flex-direction: column; align-items: flex-start; }
.support-card img { width: 64px; height: 64px; margin-bottom: 1.1rem; }
.support-card h3 { margin-bottom: .35rem; }
.support-card p { font-size: .9375rem; color: var(--ink-soft); margin-bottom: 1.25rem; }
.support-card .button { margin-top: auto; }
/* The after-hours note on the support page: plain copy, no highlight box. */
.support-note {
margin-top: clamp(2rem, 4vw, 3rem);
max-width: 62ch; margin-inline: auto; text-align: center;
font-size: .9375rem; color: var(--ink-soft);
}
/* CTA band */
.cta-band { background: var(--dark); text-align: center; }
.cta-lead {
color: var(--white); font-size: var(--fs-lead); font-weight: 400;
max-width: 46ch; margin: 0 auto 2rem;
}
/* -------------------------------------------------------------------------
8. FORMS
------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr 1.35fr; align-items: start; }
.contact-details dl { margin: 0; }
.contact-details dt { font-weight: 700; margin-top: 1.15rem; font-size: .875rem; text-transform: uppercase; letter-spacing: .06em; }
.contact-details dd { margin: 0; color: var(--ink-soft); }
.contact-details dd a { color: var(--ink-soft); }
.contact-form { display: grid; gap: 1.15rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .9375rem; }
.field input, .field textarea {
font: inherit; color: inherit; width: 100%; padding: .8rem 1rem;
border: 2px solid var(--grey-line); border-radius: 8px; background: #fff; transition: border-color .2s;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--yellow); }
.field textarea { resize: vertical; }
.contact-form .button { justify-self: start; }
.form-note { font-size: .875rem; color: var(--ink-soft); margin: 0; }
/* -------------------------------------------------------------------------
9. FOOTER
------------------------------------------------------------------------- */
.site-footer { background: var(--dark); color: #c3ccd8; padding-top: clamp(2.5rem, 6vw, 4rem); }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1.6fr repeat(3, 1fr); padding-bottom: 2.5rem; }
.footer-brand img { width: 150px; } /* reversed logo — no filter, so nothing washes out */
.footer-tag { font-size: .875rem; max-width: 32ch; margin-top: 1rem; }
.footer-social { display: inline-flex; align-items: center; gap: .5rem; color: #c3ccd8; text-decoration: none; font-size: .875rem; }
.footer-social svg { width: 22px; height: 22px; }
.footer-social:hover { color: var(--yellow); }
.footer-col h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .1em; color: var(--white); margin-bottom: 1rem; }
.footer-col li { margin-bottom: .55rem; font-size: .875rem; line-height: 1.55; }
.footer-col a { color: #c3ccd8; text-decoration: none; }
.footer-col a:hover { color: var(--yellow); }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
border-top: 1px solid rgba(255, 255, 255, .13); padding-block: 1.25rem; font-size: .8125rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: #c3ccd8; }
.footer-bottom a:hover { color: var(--yellow); }
/* -------------------------------------------------------------------------
10. RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.split, .contact-grid { grid-template-columns: 1fr; }
.split .split-media { order: -1; max-width: 26rem; }
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
.nav-toggle { display: inline-flex; }
.primary-nav {
position: fixed; inset: var(--header-h) 0 auto 0; display: none; flex-direction: column;
align-items: stretch; gap: 0; background: #fff; padding: 1rem var(--gutter) 1.75rem;
max-height: calc(100dvh - var(--header-h)); overflow-y: auto; box-shadow: var(--shadow);
}
.primary-nav.is-open { display: flex; }
.site-header:has(.primary-nav.is-open) { background: var(--white); }
.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.nav-list > li { border-bottom: 1px solid var(--grey-line); }
.nav-list a { padding: .9rem 0; font-size: 1rem; justify-content: space-between; }
.submenu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; padding: 0 0 .5rem .9rem; min-width: 0; }
.submenu a { font-size: .9375rem; padding: .5rem 0; }
.nav-actions { flex-direction: column; align-items: stretch; gap: 1rem; margin-top: 1.25rem; }
.nav-actions .button { text-align: center; }
.nav-phone { justify-content: center; }
}
@media (max-width: 640px) {
.footer-grid { grid-template-columns: 1fr; }
.banner__script { padding-left: 1.25rem; }
.button { padding: 11px 30px; font-size: 16px; }
.pullquote blockquote::before { display: none; }
}
/* Print — case studies get shared as PDFs often enough to be worth it */
@media print {
.site-header, .site-footer, .cta-band, .nav-toggle, .banner__device, .page-head__device { display: none !important; }
body { color: #000; }
.band { padding-block: 1rem; }
}
/* -------------------------------------------------------------------------
11. BLOG
------------------------------------------------------------------------- */
.post-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.post-card { display: flex; flex-direction: column; align-items: flex-start; }
.post-card__media { display: block; width: 100%; margin-bottom: 1.25rem; border-radius: var(--radius); overflow: hidden; }
.post-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .35s ease; }
.post-card__media:hover img { transform: scale(1.03); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; font-size: .8125rem; color: var(--ink-soft); margin-bottom: .6rem; }
.post-tag {
background: var(--yellow); color: var(--dark); font-weight: 700;
text-transform: uppercase; letter-spacing: .08em; font-size: .6875rem;
border-radius: 999px; padding: .25rem .7rem;
}
.post-card h2 { font-size: var(--fs-h3); margin-bottom: .5rem; }
.post-card h2 a { text-decoration: none; }
.post-card h2 a:hover { color: var(--blue); }
.post-card p { font-size: .9375rem; color: var(--ink-soft); margin-bottom: 1.1rem; }
.post-card .card-link { margin-top: auto; }
.post-body h2 { font-size: var(--fs-h2); margin-top: 2.25rem; }
.post-body h3 { margin-top: 1.75rem; }
.post-body ul { display: grid; gap: .7rem; margin: 1.25rem 0; }
.post-body ul li { position: relative; padding-left: 1.85rem; }
.post-body ul li::before {
content: ""; position: absolute; left: 0; top: .6rem;
width: 11px; height: 11px; border-radius: 50%; background: var(--yellow);
}
.post-body blockquote {
margin: 2rem 0; padding: 0 0 0 1.5rem; border-left: 5px solid var(--yellow);
font-size: var(--fs-lead); font-weight: 500; color: var(--dark); line-height: 1.5;
}
.post-figure { margin: 0 0 clamp(2rem, 4vw, 3rem); border-radius: var(--radius); overflow: hidden; }
.post-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.post-footer {
margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
border-top: 1px solid var(--grey-line); display: flex; flex-wrap: wrap;
gap: 1rem; justify-content: space-between; align-items: center;
}
.post-author { font-size: .9375rem; color: var(--ink-soft); }
.post-author strong { color: var(--dark); display: block; }
/* -------------------------------------------------------------------------
12. CHANGE-BRIEF COMPONENTS
Breadcrumbs (MET-05), FAQ accordion (MET-03), blog filtering and
pagination (CR-04), the contact map facade (CR-05), and the heading
size utilities that decouple level from look (CR-01).
------------------------------------------------------------------------- */
/* CR-01 — any heading tag can take any visual size. The tag carries the
document outline; the class carries the design. */
.t-h1 { font-size: var(--fs-h1); }
.t-h2 { font-size: var(--fs-h2); }
.t-h3 { font-size: var(--fs-h3); }
.t-h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
/* Breadcrumbs */
.breadcrumbs { border-bottom: 1px solid var(--grey-line); }
/* The keeps its browser-default 1em margin unless it is reset — and at
this font size 1em is 13px, which was opening a 13px white gap above the
trail and another below it. */
.breadcrumbs ol { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding-block: .9rem; font-size: .8125rem; }
.breadcrumbs li { display: flex; align-items: center; gap: .4rem .6rem; color: var(--ink-soft); }
.breadcrumbs li + li::before { content: "/"; color: var(--ink-300); }
.breadcrumbs a { color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--blue); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--dark); font-weight: 600; }
/* FAQ accordion */
.faqs { display: grid; gap: .75rem; }
.faq { background: #fff; border: 1px solid var(--grey-line); border-radius: var(--radius); }
.faq summary {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1.1rem 1.4rem; cursor: pointer; font-weight: 600; color: var(--dark);
list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
background: var(--yellow); position: relative; transition: transform .2s ease;
background-image: linear-gradient(var(--dark), var(--dark)), linear-gradient(var(--dark), var(--dark));
background-size: 10px 2px, 2px 10px; background-position: center, center;
background-repeat: no-repeat;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 1.4rem 1.25rem; color: var(--ink-soft); }
.faq__answer p { margin: 0; }
/* Blog: category chips + pagination */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: clamp(1.75rem, 4vw, 2.5rem); }
.chip {
border: 1.5px solid var(--grey-line); border-radius: 999px; padding: .4rem 1rem;
font-size: .8125rem; font-weight: 600; text-decoration: none; color: var(--ink-soft);
transition: .2s;
}
.chip:hover { border-color: var(--dark); color: var(--dark); }
.chip.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--dark); }
.pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.pagination ul { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.pagination a {
display: inline-flex; min-width: 42px; height: 42px; align-items: center; justify-content: center;
padding: 0 .8rem; border-radius: 999px; border: 1.5px solid var(--grey-line);
text-decoration: none; font-weight: 600; font-size: .875rem; color: var(--ink-soft);
}
.pagination a:hover { border-color: var(--dark); color: var(--dark); }
.pagination a.is-active { background: var(--dark); border-color: var(--dark); color: #fff; }
/* Featured post spans the grid and runs horizontally */
.post-flag {
background: var(--dark); color: #fff; font-weight: 700; text-transform: uppercase;
letter-spacing: .08em; font-size: .6875rem; border-radius: 999px; padding: .25rem .7rem;
}
.post-card--featured { grid-column: 1 / -1; }
@media (min-width: 860px) {
.post-card--featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.post-card--featured .post-card__media { margin-bottom: 0; }
.post-card--featured .post-card__media img { aspect-ratio: 3 / 2; } /* same ratio as every other card */
.post-card--featured h2 { font-size: var(--fs-h2); }
}
.post-card__body { display: flex; flex-direction: column; align-items: flex-start; }
a.post-tag { text-decoration: none; }
a.post-tag:hover { background: var(--dark); color: var(--yellow); }
/* CR-05 — map facade. Nothing loads from Google until the button is pressed. */
.map {
position: relative; border-radius: var(--radius); overflow: hidden;
background: var(--grey); border: 1px solid var(--grey-line);
aspect-ratio: 21 / 9; min-height: 260px;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__load {
position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
background:
radial-gradient(circle at 30% 30%, rgba(252, 214, 2, .35), transparent 55%),
var(--grey);
font-family: inherit; font-weight: 700; font-size: 1rem; color: var(--dark);
}
.map__load small { font-weight: 400; font-size: .8125rem; color: var(--ink-soft); }
.map__load:hover { background: var(--yellow-soft); }
.map__pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--dark); box-shadow: 0 6px 16px rgba(0,19,45,.2); }
.map__pin::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--yellow); transform: translate(9.5px, 9.5px); }
.map__link { margin-top: .9rem; font-size: .875rem; }
/* Footer NAP is per-field, not one blob of text */
.nap, address { font-style: normal; }
.nap-hours { color: #9fb0c2; }