/* =========================================================================
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;
/* The type scale is itops.nz's own, read from its stylesheet. It steps once,
at 1024px, rather than scaling with the window:
below 1024px from 1024px
h1 26px / 1.375 48px / 1.25 700
h2 19px / 1.375 32px / 1.25 700
h3 18px / 1.5 22px / 1.5 600
lead 19px / 1.625 24px / 1.625 400
p 14px / 1.56 16px / 1.56 400, always the dark blue */
--fs-body: 16px;
--fs-p: 14px;
--fs-lead: 19px;
--fs-h3: 18px;
--fs-h2: 19px;
--fs-h1: 26px;
--lh-head: 1.375;
--fs-script: clamp(3rem, 2rem + 5vw, 5.75rem);
--wrap: 1232px; /* production's 1280px container less its 24px column padding each side */
--wrap-narrow: 780px;
--gutter: clamp(1.75rem, 4vw, 2.5rem); /* 28px on phones, as on itops.nz */
--band-y: 3.75rem; /* production's section spacing: 60 / 70 / 90px at 768 and 1024px */
--header-h: 79px;
--radius: 12px;
--shadow: 0 8px 30px rgba(0, 19, 45, .08);
}
@media (min-width: 768px) {
:root { --band-y: 4.375rem; }
}
@media (min-width: 1024px) {
:root {
--fs-p: 16px; --fs-lead: 24px; --fs-h3: 22px; --fs-h2: 32px; --fs-h1: 48px;
--lh-head: 1.25; --band-y: 5.625rem;
}
}
/* -------------------------------------------------------------------------
2. RESET & BASE
------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Production scrolls smoothly to in-page links. */
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
margin: 0;
font-family: var(--font);
font-size: var(--fs-body);
font-weight: 400;
line-height: 1.56;
color: var(--ink);
background: var(--white);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
h1, h2, h3 { color: var(--dark); font-weight: 700; line-height: var(--lh-head); margin: 0 0 .55em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.5; }
p { font-size: var(--fs-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; }
/* Links behave as they do on itops.nz: they never change colour, and one
that is underlined loses the underline on hover. The guideline blue is
not used anywhere on that site, so it is not used here either. */
a { color: var(--dark); text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 3px solid var(--dark); outline-offset: 3px; border-radius: 3px; }
.cta-band :focus-visible, .primary-nav.is-open :focus-visible,
.site-header:has(.primary-nav.is-open) :focus-visible { outline-color: var(--yellow); }
/* Bulleted lists are production's: plain round bullets, 24px in, 8px apart. */
.bullets { list-style: disc; margin: 0 0 2rem; padding-left: 1.5rem; }
.bullets li { padding-left: .5rem; margin-bottom: .5rem; font-size: 16px; }
.bullets:last-child, .bullets li:last-child { margin-bottom: 0; }
/* Production's lists carry 32px above as well as below. After a paragraph
that collapses with the paragraph's own margin, so the list always starts
32px under the text, on a phone as on a desktop. */
p + .bullets { margin-top: 2rem; }
.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); }
.band--yellow { background: var(--yellow); }
/* A band of row tiles ends on the last tile's own 64px (96px) of space. */
.band--rows { padding-bottom: 0; }
/* Production leaves 48px under a section heading, or 24px when a paragraph
introduces the section, with the 48px (32px below 1024px) after that. */
.section-title { margin-bottom: 48px; }
.section-title:has(+ .section-intro) { margin-bottom: 24px; }
/* The heading and its introduction share production's half-width column from
1024px (592px on a desktop); below that they run the full width. */
.section-intro { margin-bottom: 32px; }
@media (min-width: 1024px) {
.section-intro { margin-bottom: 48px; }
.section-intro, .section-title:has(+ .section-intro) { max-width: calc(50% - 24px); }
}
.lede { font-size: var(--fs-lead); font-weight: 400; line-height: 1.625; }
.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 — the three pills itops.nz uses, read from its stylesheet.
.button--yellow its `.button` the header call to action
yellow, dark text hover: dark blue, WHITE text
.button--dark its `.button.btn-small` every button in the page body
dark blue, white text hover: yellow, dark text
.button--white its `.button.btn-white` the dark call-to-action band
white, dark text hover: yellow, dark text
Sizes are theirs too: 14px/600 below 1024px, then 18px/700 for the large
pill and 16px/600 for the small dark one.
------------------------------------------------------------------------- */
.button {
display: inline-block; border: 0; border-radius: 9999px; font-family: inherit;
padding: .75rem 2rem; font-size: 14px; font-weight: 600; line-height: 1.56;
text-decoration: none; cursor: pointer; transition: .3s;
}
@media (min-width: 1024px) {
.button { padding: .75rem 2.5rem; font-size: 18px; font-weight: 700; }
}
.button--yellow { background: var(--yellow); color: var(--dark); }
.button--yellow:hover, .button--yellow:focus-visible, .button--yellow:active { background: var(--dark); color: var(--white); }
.button--dark { background: var(--dark); color: var(--white); padding: .5rem 1.5rem; }
@media (min-width: 1024px) {
.button--dark { padding: .75rem 2rem; font-size: 16px; font-weight: 600; }
}
.button--dark:hover, .button--dark:focus-visible, .button--dark:active { background: var(--yellow); color: var(--dark); }
/* On a yellow band the dark pill turns white instead (their .btn-small--var). */
.button--on-yellow:hover, .button--on-yellow:focus-visible, .button--on-yellow:active { background: var(--white); color: var(--dark); }
.button--white { background: var(--white); color: var(--dark); }
.button--white:hover, .button--white:focus-visible, .button--white:active { 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(--dark); border-color: var(--dark); }
.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-h has to be the height the header actually renders at, because
everything that has to clear the header is offset by it. These are
itops.nz's three headers, read in the browser pane:
< 640px mobile lockup 128 x 79, flush to the top-left corner 79px
640-1023px desktop lockup 224 x 125 125px
>= 1024px desktop lockup 190 x 106, menu row beside it 132px */
@media (min-width: 640px) {
:root { --header-h: 125px; }
}
/* From 1024px the row matches itops.nz: a 132px header with the lockup pinned
to the top and the menu row centred beside it. */
@media (min-width: 1024px) {
:root { --header-h: 132px; }
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
/* margin-right: auto pushes whatever follows the lockup to the right edge:
the call button and menu button while the menu is collapsed, and the phone
number on the landing pages, whose header has nothing else in it. */
.brand { display: block; flex: none; align-self: flex-start; margin-right: auto; }
.brand img { width: 190px; height: auto; }
/* Below 640px the markup swaps to the mobile lockup. Its white disc is drawn
to bleed off the top-left corner, so the lockup has to sit flush in that
corner, as it does on itops.nz; set in from the edge, the disc shows its
cropped sides as a white box. The header row gives up its left gutter for
that and keeps production's 24px on the right. */
@media (max-width: 639px) {
.site-header .wrap { width: 100%; margin-inline: 0; padding-right: 24px; }
.brand img { width: 128px; }
}
/* On every page but the home page production shifts the lockup 19% of its
own width to the left: 24px on a phone, 36px on a desktop. */
@media (max-width: 639px), (min-width: 1024px) {
body:not(.page-home) .brand img { transform: translateX(-19%); }
}
/* 640-1023px: production's larger lockup, 9px off the left edge. */
@media (min-width: 640px) and (max-width: 1023px) {
.brand { margin-left: calc(-9px - var(--gutter)); }
.brand img { width: 224px; }
}
/* The call button that sits beside the hamburger while the nav is collapsed.
Production shows it at every width below 1280 and it is the only way to
phone iTops from a phone without opening the menu first. */
/* Both controls sit 6px below the row's centre and 24px apart, as measured. */
.nav-call { display: none; align-items: center; margin-right: .5rem; position: relative; top: 6px; z-index: 2; }
.nav-call img { width: 28px; height: auto; display: block; }
/* Desktop menu, measured against itops.nz at 1280px: Montserrat 500 18px in
the dark blue, 32px between items, bold on hover and active, the active
item underlined 2px black, the dropdown a grey rounded panel with a notch.
Each link reserves its bold width with a hidden copy of its label (the
data-text attribute), so hovering never shifts its neighbours. */
.primary-nav {
display: flex; align-items: center; justify-content: space-between;
flex: 1 1 auto; min-width: 0; margin-left: 2.5rem; gap: 1rem;
}
.nav-list { display: flex; align-items: center; gap: 1.5rem; }
.nav-list > li > a {
display: inline-flex; flex-direction: column; align-items: flex-start; white-space: nowrap;
font-size: 18px; font-weight: 500; line-height: 22px; color: var(--dark); text-decoration: none;
padding: .5rem 0 calc(.5rem - 2px); border-bottom: 2px solid transparent;
}
.nav-list > li > a::after {
content: attr(data-text); display: block; height: 0; overflow: hidden; visibility: hidden;
font-weight: 700; pointer-events: none; user-select: none;
}
.nav-list > li:hover > a, .nav-list > li:focus-within > a { font-weight: 700; color: var(--dark); }
.nav-list > li > a.is-active { font-weight: 700; border-bottom-color: #000; }
.has-children { position: relative; }
.submenu {
position: absolute; z-index: 5; top: calc(100% + 1.9rem); left: 0; min-width: 300px;
padding: 2rem 3rem; background: var(--grey); border-radius: 30px;
opacity: 0; visibility: hidden; /* shown at once on hover, as production does; no fade */
}
.submenu::before {
content: ""; position: absolute; top: -.65rem; left: 20%; width: 1.375rem; height: 1.375rem;
background: var(--grey); transform: translateX(-50%) rotate(45deg);
}
.has-children:hover .submenu, .has-children:focus-within .submenu { opacity: 1; visibility: visible; }
.submenu li:not(:last-child) { padding-bottom: .75rem; }
.submenu a {
display: block; font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--dark);
text-decoration: none; white-space: nowrap; transition: padding .3s ease-in-out;
}
.submenu a:hover { padding-left: 1rem; font-weight: 600; color: var(--dark); }
/* On desktop the parent item is the link to the overview page, as on itops.nz;
the explicit Overview entry is for the collapsed menu, where the parent
cannot be both a link and a disclosure. */
.submenu__overview { display: none; }
@media (min-width: 1024px) {
/* Keeps the item hovered while the pointer crosses the gap to the panel. */
.has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 2rem; }
}
.nav-actions { display: flex; align-items: center; gap: 2rem; }
.nav-phone {
display: inline-flex; align-items: center; gap: .45rem; font-size: 18px; font-weight: 500;
color: var(--dark); text-decoration: none; border-bottom: 2px solid transparent;
}
.nav-phone:hover { color: var(--dark); border-bottom-color: #000; }
.nav-phone img { width: 16px; }
.nav-phone, .nav-actions .button { white-space: nowrap; }
/* itops.nz runs its header edge to edge at 1280px; ours keeps the page gutter,
so the same row has 80px less to work with until the window is wider. */
/* From 1280px the header row sits in itops.nz's own 1280px container, so the
lockup lands where theirs does. The home hero is positioned off the same
edge: the yellow circle and the copy are both measured from the lockup. */
@media (min-width: 1280px) {
.site-header .wrap { width: min(100% - (var(--gutter) * 2), 1280px); }
}
@media (min-width: 1280px) and (max-width: 1439px) {
.primary-nav { margin-left: 2rem; }
.nav-list { gap: 1.125rem; }
.nav-list > li > a { font-size: 17px; }
.nav-actions { gap: 1.75rem; }
.nav-phone { font-size: 17px; }
.nav-actions .button { padding-inline: 32px; }
}
@media (min-width: 1280px) {
.nav-phone img { display: none; }
}
/* From 1440px the row has room for close to itops.nz's own spacing. The extra
Blog item means it is still a little tighter than theirs. */
@media (min-width: 1440px) {
.primary-nav { margin-left: 2.5rem; }
.nav-list { gap: 1.5rem; }
.nav-actions { gap: 2rem; }
}
/* The menu button: production's three 37 x 3px bars, 9px apart, no disc
behind them. Open, they fold into a white cross over the dark menu. */
.nav-toggle {
display: none; width: 37px; height: 38px; padding: 0; border: 0; background: none;
cursor: pointer; align-items: center; justify-content: center;
position: relative; top: 6px; z-index: 2;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
display: block; width: 37px; height: 3px; background: var(--dark);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -9px; }
.nav-toggle-bars::after { top: 9px; }
/* Opening and closing is production's "squeeze", with its timings: the outer
bars close onto the middle one in 75ms, then the middle bar turns 45deg
and the bottom one 90deg against it to make the cross, the top bar fading
out underneath. Closing runs the same two steps in reverse. */
.nav-toggle-bars { transition: transform 75ms cubic-bezier(.55, .055, .675, .19); }
.nav-toggle-bars::before { transition: top 75ms ease .12s, opacity 75ms ease; }
.nav-toggle-bars::after { transition: top 75ms ease .12s, transform 75ms cubic-bezier(.55, .055, .675, .19); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars,
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before,
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { background: var(--white); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
transform: rotate(45deg); transition-delay: .12s; transition-timing-function: cubic-bezier(.215, .61, .355, 1);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
top: 0; opacity: 0; transition: top 75ms ease, opacity 75ms ease .12s;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
top: 0; transform: rotate(-90deg); transition: top 75ms ease, transform 75ms cubic-bezier(.215, .61, .355, 1) .12s;
}
/* "Home" is in the collapsed menu only; on desktop the lockup is the way home. */
.nav-home { display: none; }
/* -------------------------------------------------------------------------
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; }
/* The yellow disc below 1280px.
itops.nz sizes this in JavaScript (app.min.js, function `g`), recomputing a
clip-path circle on load and on resize. The tiers below are that function's
own numbers, written as CSS so the shape is right before a script runs
rather than after — radius r with the centre at (cx, cy), measured from the
top of the page, which is where this element starts:
< 420px r = 250px centre (52vw, 150px)
420–767px r = 100vw / 2.25 centre (0.7r, 0.7r)
768–1023px r = 50vw centre (35vw, 35vw)
>= 1024px r = 480px centre (logo left + 380px, 192px)
In the last tier their lockup sits at the left edge of the window between
1024 and 1279px, so the centre is 380px in from it. From 1280px the lockup
moves with the container and the circle follows it; that is the HERO block
further down. */
.banner__device {
position: absolute; z-index: 0; background: var(--yellow); border-radius: 50%;
width: 500px; height: 500px; max-width: none; max-height: none;
left: calc(52vw - 250px); top: -100px;
}
@media (min-width: 420px) {
.banner__device {
width: 88.889vw; height: 88.889vw;
left: -13.333vw; top: -13.333vw;
}
}
@media (min-width: 768px) {
.banner__device {
width: 100vw; height: 100vw;
left: -15vw; top: -15vw;
}
}
@media (min-width: 1024px) {
.banner__device {
width: 960px; height: 960px;
left: calc(380px - 480px); top: calc(192px - 480px);
}
}
/* The copy column's padding steps up with the viewport, the same ladder the
live site uses (2rem / 3.5rem+4rem / 4rem+5rem, then the 1280px block below
takes over). The bottom padding stays at zero on phones on purpose: the
photograph is meant to start while the yellow is still overhead, so the two
shapes meet. Padding there opens a white band between them. */
.banner__inner { position: relative; z-index: 2; padding-block: 2rem 0; }
@media (min-width: 768px) {
.banner__inner { padding-block: 3.5rem 4rem; }
}
@media (min-width: 1024px) {
.banner__inner { padding-block: 4rem 5rem; }
}
.banner__inner > * { max-width: none; }
.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;
}
/* The inner-page hero, read from itops.nz/services at 390, 800, 1100, 1280,
1440 and 1920px. The copy starts a fixed distance under the header and
runs in production's column:
width padding column h1 script line intro
< 768px 32 / 32 full 26px 19px 15px
768-1023px 56 / 64 456px 26px 19px 15px
1024-1279px 64 / 80 635px 48px 28px 18px
>= 1280px 72 / 96 592px 48px 28px 18px
The line under the heading is the brand script, Kalam Bold on a 1.5 line,
not a second Montserrat heading; the intro sits on a 1.625 line. Pages
without a photograph (.page-head) use the same ladder. Blog articles are
the exception: their heading runs the width of the article column. */
.banner:not(.banner--home) .banner__inner { padding-bottom: 2rem; }
.banner__inner h1, .page-head h1 { margin-bottom: 24px; }
.banner__sub {
font-family: var(--font-script); font-weight: 700; font-size: 19px; line-height: 1.5;
color: var(--dark); margin: 0 0 16px;
}
.banner__intro p, .page-head__sub { font-size: 15px; line-height: 1.625; color: var(--ink); margin: 0 0 16px; }
.banner__intro p:last-child, .page-head__sub:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
.banner:not(.banner--home) .banner__inner { padding-bottom: 4rem; }
.banner:not(.banner--home) .banner__inner > *, .page-head .wrap:not(.narrow) > * { max-width: 456px; }
}
@media (min-width: 1024px) {
.banner:not(.banner--home) .banner__inner { padding-bottom: 5rem; }
.banner:not(.banner--home) .banner__inner > *, .page-head .wrap:not(.narrow) > * { max-width: 635px; }
.banner__sub { font-size: 28px; }
.banner__intro p, .page-head__sub { font-size: 18px; margin-bottom: 24px; }
}
@media (min-width: 1280px) {
.banner:not(.banner--home) .banner__inner > *, .page-head .wrap:not(.narrow) > * { max-width: 592px; }
}
/* The home copy below 1280px, read from itops.nz at 390, 600, 700, 900 and
1100px. The lead is 19px on a 1.625 line until 1024px and runs the full
column on phones; the kicker is 24px bold throughout; the script steps
48px / 66px / 92px at 768 and 1280px, always on a 1.5 line and 40px in. */
.banner--home .banner__inner > *, .banner--home .banner__lead { max-width: none; }
.banner--home .banner__lead { font-size: 19px; line-height: 1.625; margin: 0; }
.banner--home .banner__kicker { font-size: 24px; line-height: 1.56; margin: 16px 0 0; }
.banner--home .banner__script { font-size: 48px; line-height: 1.5; padding-left: 40px; margin: 0 0 8px; }
@media (min-width: 768px) {
.banner--home .banner__inner > *, .banner--home .banner__lead { max-width: 456px; }
.banner--home .banner__script { font-size: 66px; }
}
@media (min-width: 1024px) {
.banner--home .banner__inner > *, .banner--home .banner__lead { max-width: 635px; }
.banner--home .banner__lead { font-size: 24px; }
}
/* Below 1280px the photograph is an ordinary block in the flow, sitting under
the copy — the same stack the live site uses. It is a full viewport wide and
nudged right, so it bleeds off the right edge and the banner's overflow
clips it; that off-centre crop is what gives the dome its shape. The
1280px block further down lifts it out of the flow and onto the right. */
.banner__image {
position: relative; z-index: 1; display: block;
width: 100%; margin-left: 1.5rem; max-width: 62.5rem;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: cover; mask-size: cover;
-webkit-mask-position: left bottom; mask-position: left 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,");
}
@media (min-width: 640px) {
/* Past the phone widths the photograph is pushed further right so the copy
above it keeps a clear column: 20% on every page, the home page included,
so the dome is the same size everywhere. */
.banner__image { margin-left: 20%; }
}
.banner__image img {
display: block; width: 100%; height: auto;
object-fit: cover; object-position: center bottom;
}
@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, from the
top of the PAGE
yellow centre x 452px 692px = lockup left + 380px
photo box 684 x 590 920 x 590 = 48% x full height
photo left edge 741px 1038px = right-aligned, then
54.5% from 1920px
copy column 233 .. 689 473 .. 929 = lockup left + 160px,
456px wide
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;
/* 703px is production's interior band; the header's height is added on
top of it because the band starts BELOW the header (see the note on
.banner__image further down) rather than underneath it. */
--band-h: calc(703px + var(--header-h));
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)); }
/* ---- 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;
/* Centre 380px in from the lockup's left edge, which is the left edge of
the header's 1280px container. */
left: calc(max((100% - 1280px) / 2, var(--gutter)) + 380px - 480px);
/* Centre 192px from the top of the page: 60px below where the header
ends. The banner starts at the top of the page, underneath the fixed
header, so the header's height has to be counted in. Without it the
circle sat 132px too high and its lower half fell short of the copy. */
top: calc(var(--header-h) + 60px - 480px);
}
/* ---- the photograph -------------------------------------------------- */
/* The top of the circle sits below the navigation, never behind it.
itops.nz/about-us was read in the browser pane at 1440px: header 0..132,
banner top 132, photograph top 132 — the hero starts exactly where the
header ends. Ours had the photograph at top 0 with the fixed header
laid over it, so the nav crossed the top of the circle. The band's
height already has the header's height added to it, so the circle keeps
its full 703px rather than being squeezed into what is left over. */
/* Interior pages, as production has them up to 1919px: 48% of the window,
flush to the right edge, under the "internal" mask whose circle is wider
than the box and so runs off the right edge. At 1425px wide that is
741..1425. The 1920px step further down moves it to 52.5% and shows the
whole circle. This used to apply the 1920px geometry at every width,
which put the photograph 107px off the right edge on a 1440px screen. */
.banner__image {
position: absolute;
top: var(--header-h); height: calc(100% - var(--header-h));
left: auto; right: 0; width: 48%;
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%;
/* circle-mask-internal.svg, inlined */
-webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,");
}
/* margin-left is reset here too: the 640px rule above is more specific than
the shorthand `margin: 0` a few lines up, so without this the 30% nudge
from the mobile stack survives into the desktop layout. */
/* Home: 48% of the window, flush to the right edge, as production has it
up to 1919px. Between 1280 and 1679px production swaps to the "internal"
mask, whose circle is wider than the box so it runs off the right edge
instead of closing; from 1680px the whole circle shows again. */
.banner--home .banner__image {
left: auto; right: 0; width: 48%; margin-left: 0;
/* circle-mask-internal-home.svg, inlined */
-webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,");
}
.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;
/* Percentages, not vw: 100vw counts the scrollbar and put the column
7px to the right of the lockup it is supposed to line up with. */
--inner-left: max(calc((100% - 1280px) / 2), var(--gutter));
width: 100%; max-width: none; margin-inline: 0;
min-height: var(--band-h);
padding: calc(var(--header-h) + 4.5rem) 0 6rem var(--inner-left);
display: flex; flex-direction: column; justify-content: flex-start;
}
/* Interior copy lines up with the content below it, which is the 1232px
column, not the header's 1280px container. */
.banner:not(.banner--home) .banner__inner { padding-left: max(calc((100% - 1232px) / 2), var(--gutter)); padding-bottom: 6rem; }
/* 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);
}
/* Production's column is 456px wide and its three lines are set solid:
24px/39px, a 16px gap, 24px bold, then the 92px script on a 138px line.
Measured at 1425px: lead 204..321, kicker 337..374, script 375..513. */
.banner--home .banner__inner > * { max-width: 456px; }
.banner--home .banner__lead { max-width: 456px; font-size: 24px; line-height: 39px; margin: 0; }
.banner--home .banner__kicker { font-size: 24px; line-height: 1.56; margin: 16px 0 0; }
.banner--home .banner__script { font-size: 92px; line-height: 1.5; padding-left: 40px; margin: 0 0 8px; }
}
@media (min-width: 1680px) {
.banner--home .banner__image {
/* circle-mask-whole-home.svg */
-webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,");
}
}
@media (min-width: 1920px) {
.banner__image {
left: 52.5%; right: auto; width: 55%; max-width: 1200px;
-webkit-mask-position: 0 0; mask-position: 0 0;
/* circle-mask-whole.svg */
-webkit-mask-image: url("data:image/svg+xml,"); mask-image: url("data:image/svg+xml,");
}
.banner--home .banner__image { left: 54.5%; right: auto; width: 920px; -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
}
/* One circle on every inner page. The photograph's box is as tall as the
band, the band grows with the copy, and the old mask scaled to cover its
box, so a page with more copy got a bigger circle: 1000px across on most
pages, 1134px on About us, 853px on the shorter listing pages.
The circle is now drawn at a fixed size from the top-left corner of the
box, which starts under the header on every page: 1000px across, as the
"internal" mask drew it on a standard 703px band, and from 1920px the
1050px shape of the "whole" mask. A taller band shows a little more of the
same circle and a shorter one a little less; its size and position do not
change. */
@media (min-width: 1280px) {
.banner:not(.banner--home) .banner__image, .banner.banner--home .banner__image {
-webkit-mask-image: none; mask-image: none;
clip-path: circle(500px at 500px 500px);
}
}
@media (min-width: 1920px) {
.banner:not(.banner--home) .banner__image, .banner.banner--home .banner__image { clip-path: ellipse(525px 546.8px at 525px 546.8px); }
/* The home photograph used to sit 38px further right in a narrower box. */
.banner.banner--home .banner__image { left: 52.5%; right: auto; width: 55%; max-width: 1200px; }
}
/* The home page shares the circle. Its masks drew the same 1000px circle up
to 1679px, then a 920px one, where the inner pages have 1000px and, from
1920px, 1050px; on a wide screen the home circle was visibly smaller and,
from 1920px, further right. Its band is still the shorter 590px, so it
shows a little less of the circle than the inner pages do. */
/* Below 1280px the photograph sits under the copy, masked to a dome whose
size follows the photograph's own shape. Every page, the home page
included, is held to the same shape at each width (the old site's crops: 920 by 703, and 420 by 300
on phones), so the dome matches from page to page whatever file a page
uses. */
@media (max-width: 1279px) {
.banner .banner__image img { display: block; width: 100%; height: auto; aspect-ratio: 920 / 703; object-fit: cover; }
}
@media (max-width: 767px) {
.banner .banner__image img { aspect-ratio: 420 / 300; }
}
/* 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) + 2rem); padding-bottom: 2rem;
}
@media (min-width: 768px) {
.page-head { padding-top: calc(var(--header-h) + 3.5rem); padding-bottom: 4rem; }
}
@media (min-width: 1024px) {
.page-head { padding-top: calc(var(--header-h) + 4rem); padding-bottom: 5rem; }
}
@media (min-width: 1280px) {
.page-head { padding-top: calc(var(--header-h) + 4.5rem); padding-bottom: 6rem; }
}
/* 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; }
/* Circular photograph sitting on the device */
/* Production crops these 308px below 1020px. Above that the home page's are
495px and every other page's 608px, which its column holds at 592px. */
.circle-photo { position: relative; width: min(100%, 308px); }
@media (min-width: 1020px) {
.circle-photo { width: min(100%, 592px); }
.page-home .circle-photo { width: min(100%, 495px); }
}
.circle-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; position: relative; z-index: 1; }
/* 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 — production's rhythm: heading, 24px, copy in the dark blue,
24px, button. One column on phones with 64px between tiles, two from
768px, three from 1024px. The band keeps its top padding and ends 64px
(96px from 1024px) below the last tile, which is how theirs is built. */
.tiles { display: grid; gap: 64px 48px; grid-template-columns: 1fr; }
.band:has(.tiles) { padding-bottom: 64px; }
/* Once tiles sit side by side production gives every tile in the set the
height of the tallest, including those on later rows. */
@media (min-width: 768px) {
.tiles { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
}
@media (min-width: 1024px) {
.tiles { grid-template-columns: repeat(3, 1fr); row-gap: 96px; }
.band:has(.tiles) { padding-bottom: 96px; }
}
.tile { display: flex; flex-direction: column; align-items: flex-start; }
.tile h3 { margin: 0 0 24px; }
.tile p { color: var(--ink); margin: 0 0 24px; }
.tile > :last-child { margin-bottom: 0; }
/* Stacked on a phone, production's list tile keeps its last bullet's 8px. */
@media (max-width: 767px) {
.tile .bullets li:last-child { margin-bottom: .5rem; }
}
.tile .button { margin-top: auto; }
/* What we do: the service tiles carry a centred 100px illustration. */
.tile__icon { align-self: center; width: 100px; height: 100px; object-fit: cover; margin-bottom: 32px; }
/* Split image/text rows */
/* .split--media-first → photograph left, copy right ("We're built for better IT")
.split--text-first → copy left, photograph right (success-story teaser)
Measured on itops.nz. Phones: photograph on top at the left, 32px, heading,
32px, copy, 32px, button. From 768px the two sit side by side in equal
columns. From 1280px production sets them on its 12-column grid, the
photograph in six columns and the copy in five with one between, and on
the home page alone it indents the whole row 160px:
at 1425px wide photograph copy
home, media first 256 .. 751 865 .. 1284
home, text first 774 .. 1269 257 .. 676
other, media first 97 .. 689 785 .. 1270
other, text first 678 .. 1270 97 .. 582 */
.split { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
.split .split-media { order: -1; }
.split-body h2 { margin-bottom: 32px; }
/* The story's one-line summary, production's bold line under the client. */
.split-sub { font-size: 16px; line-height: 1.5; font-weight: 700; color: #000; margin: 0; } /* runs straight into the paragraph, as theirs does */
.split-body > :has(+ .button) { margin-bottom: 0; }
.split-body .button { margin-top: 32px; }
/* The photograph slides 30px into place as its row scrolls into view, over
1.5s: from the left, or from the right when it is the right-hand column.
It is production's one scroll animation, on these rows only. main.js adds
the class when the photograph's top edge reaches the bottom of the window;
without the script the photograph simply sits where it belongs. */
@keyframes photo-in-from-left { from { transform: translateX(-1.875rem); } to { transform: translateX(0); } }
@keyframes photo-in-from-right { from { transform: translateX(1.875rem); } to { transform: translateX(0); } }
.split .circle-photo img.is-in { animation: photo-in-from-left 1.5s ease 1 normal forwards; }
.split--text-first .circle-photo img.is-in { animation-name: photo-in-from-right; }
/* Two of these in a row are 90px apart on production, not two bands' worth. */
.section-split + .section-split { padding-top: 0; }
@media (min-width: 768px) {
.split { grid-template-columns: 1fr 1fr; gap: 56px; }
.split--text-first .split-media { order: 0; }
.split-body h2 { margin-bottom: 40px; }
.split-body .button { margin-top: 40px; }
}
@media (min-width: 1280px) {
.split { justify-content: start; }
.split--media-first { grid-template-columns: 616px 485px; column-gap: 72px; }
.split--text-first { grid-template-columns: 485px 592px; column-gap: 96px; }
.page-home .split { padding-left: 160px; column-gap: 96px; }
.page-home .split--media-first { grid-template-columns: 512px 419px; }
.page-home .split--text-first { grid-template-columns: 419px 512px; }
}
/* Row tiles — production's two-across list (About "How we work", the service
pages, the privacy policy). Each tile is 45% of the row with a 2px grey
rule under every row but the last; one column on phones with no rules. On
a service page the illustration takes a quarter of the tile and the copy
two thirds; without one the copy runs the tile's width. */
.row-tiles { display: grid; grid-template-columns: 1fr; }
.row-tile { display: flex; padding-bottom: 32px; margin-bottom: 32px; }
.row-tile__icon { flex: 0 0 25%; margin-right: 16px; }
.row-tile__icon img { width: 100%; height: auto; }
.row-tile__body { flex: 0 0 66.667%; min-width: 0; }
.row-tile--plain .row-tile__body { flex-basis: 100%; }
.row-tile h3, .row-tile h2 { margin: 0 0 24px; }
.row-tile p { margin: 0 0 16px; }
.row-tile__body > :last-child { margin-bottom: 0; }
@media (min-width: 768px) {
.row-tiles { grid-template-columns: 45% 45%; justify-content: space-between; }
.row-tile { border-bottom: 2px solid #dddfe4; }
.row-tile:nth-child(odd):nth-last-child(-n+2),
.row-tile:nth-child(odd):nth-last-child(-n+2) ~ .row-tile { border-bottom: 0; }
}
@media (min-width: 1024px) {
.row-tile { padding-bottom: 48px; margin-bottom: 48px; }
.row-tile__icon { margin-right: 0; }
.row-tile p { margin-bottom: 24px; }
}
/* People — production's grid of 220px round photographs: one, two, three,
then five across. From 1280px the rows sit directly under one another, as
theirs do. The name and title are centred under the photograph. */
.people { display: grid; grid-template-columns: 1fr; }
.people > li { min-width: 0; margin-bottom: 48px; }
/* The partners heading has 32px under it below 1024px, where the others keep 48px. */
.section-title:has(+ .people) { margin-bottom: 32px; }
.person {
display: block; width: 220px; max-width: 100%; margin-inline: auto; padding: 0; border: 0;
background: none; font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.person__photo { position: relative; display: block; width: 220px; max-width: 100%; aspect-ratio: 1; margin-inline: auto; }
.person__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* "Read profile" over the photograph on hover; not shown on phones. */
.person__overlay {
display: none; position: absolute; inset: 0; border-radius: 50%; background: var(--dark); color: var(--white);
align-items: center; justify-content: center; font-size: 16px; font-weight: 600;
opacity: 0; visibility: hidden; transition: all .3s;
}
.person:hover .person__overlay, .person:focus-visible .person__overlay { opacity: 1; visibility: visible; }
.person__name { display: block; margin: 24px 0 0; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--dark); }
.person__role { display: block; margin: 8px 0 0; font-size: var(--fs-p); line-height: 1.56; }
@media (min-width: 640px) {
.people { grid-template-columns: 1fr 1fr; }
.person, .person__photo { margin-inline: 0; }
.person__overlay { display: flex; }
}
@media (min-width: 768px) {
.people { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
.person__name { font-size: 18px; }
.section-title:has(+ .people) { margin-bottom: 48px; }
}
@media (min-width: 1280px) {
.people { grid-template-columns: repeat(5, 1fr); }
.people > li { margin-bottom: 0; }
}
/* A person's profile, opened from the grid (assets/js/main.js). Production's
white rounded panel over a dark blue wash: 58% of the window on a desktop,
at most 80% of its height, the photograph beside the write-up. */
.profile-backdrop {
position: fixed; inset: 0; z-index: 70; background: var(--dark);
opacity: 0; visibility: hidden; transition: all .3s;
}
.profile-backdrop.is-open { opacity: .94; visibility: visible; }
.profile {
position: fixed; z-index: 80; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 91.667%; max-height: 80vh; overflow-y: auto; padding: 64px 0;
background: var(--white); border-radius: 30px;
opacity: 0; visibility: hidden; transition: all .3s;
}
.profile.is-open { opacity: 1; visibility: visible; }
.profile__close {
position: absolute; top: 48px; right: 40px; width: 28px; height: 26px; padding: 0; border: 0; cursor: pointer;
background: url("../img/close.svg") no-repeat 50% / cover;
}
.profile__cols { display: flex; flex-direction: column; justify-content: center; }
/* On a phone the photograph is a small 87px round at the top left, as theirs is. */
.profile__photo { width: 33.333%; padding-left: 32px; }
.profile__photo img { width: 265px; max-width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.profile__body { width: 83.333%; margin-inline: auto; }
.profile__body .person__name { text-align: left; margin: 24px 0 0; }
.profile__body .person__role { text-align: left; margin: 8px 0 0; }
/* Mobile number and LinkedIn profile side by side, 32px apart as on the
previous site. Each mark sits on its label's baseline. */
.profile__contact { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 16px; font-weight: 600; margin: 24px 0 0; }
.profile__contact a { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; }
.profile__contact svg { height: 17px; width: auto; flex: none; }
.profile__contact a:hover span, .profile__contact a:focus-visible span { text-decoration: underline; }
.profile__bio { margin: 24px 0 0; }
@media (min-width: 1024px) {
.profile { width: 83.333%; }
.profile__close { top: 64px; }
.profile__cols { flex-direction: row; }
.profile__photo { width: 33.333%; padding-left: 0; display: flex; justify-content: center; align-self: flex-start; }
.profile__body { width: 50%; margin-inline: 0; padding-right: 32px; }
}
@media (min-width: 1280px) {
.profile { width: 58.333%; }
.profile__photo { width: 41.667%; }
}
/* Support — production's channels: four across on the grey band (three from
768px, stacked on phones), each a single link with a centred illustration,
heading and one line. The band has no padding of its own; the links do. */
.channels { display: flex; flex-direction: column; flex-wrap: wrap; width: min(100%, 1280px); }
.channel { display: block; width: 100%; padding: 48px 28px; text-align: center; text-decoration: none; }
.channel img { height: 100px; width: auto; margin: 0 auto 32px; }
.channel h2 { margin: 0 0 24px; }
.channel p { margin: 0; }
@media (min-width: 768px) {
.channels { flex-direction: row; }
.channel { width: 33.333%; padding-block: 96px; }
}
@media (min-width: 1024px) {
/* Their copy sits in the left eleven twelfths of each column. */
.channel { width: 25%; padding-left: 24px; padding-right: calc(24px + 2.0833%); }
}
/* 404 — production's single centred block. */
.not-found { padding: calc(var(--header-h) + var(--band-y)) 0 var(--band-y); text-align: center; }
.not-found h1 { margin-bottom: 24px; }
.not-found p { margin: 0 0 16px; }
/* CTA band */
.cta-band { background: var(--dark); text-align: center; }
/* Production's lead: 19px, 24px from 1024px, on a 1.625 line. From 768px its
column is half the band less the column padding, so it grows with the
screen: 337px on a tablet, 665px at 1440px, 905px at 1920px. On phones it
runs the full width. */
.cta-band { container-type: inline-size; }
.cta-lead {
color: var(--white); font-size: var(--fs-lead); font-weight: 400; line-height: 1.625;
max-width: none; margin: 0 auto 2rem;
}
@media (min-width: 768px) {
.cta-lead { max-width: calc(50vw - 56px); max-width: calc(50cqw - 56px); }
}
@media (min-width: 1024px) {
.cta-lead { max-width: calc(50vw - 48px); max-width: calc(50cqw - 48px); }
}
/* -------------------------------------------------------------------------
8. FORMS
------------------------------------------------------------------------- */
/* Contact — production's page. The email address and phone number are set
large (26px, 44px from 768px) under small labels. The form sits on a grey
band in the left two thirds, with the hours and addresses in the right
third. Each field is a single dark rule with its label resting on it; the
label floats up when the field has focus or a value. */
.contact-lines { padding-bottom: var(--band-y); }
.contact-lines__row { display: flex; flex-direction: column; }
.contact-lines__row > div { margin-bottom: 16px; }
.contact-lines__label { font-size: 18px; margin: 0; }
.contact-lines__value {
font-size: 26px; font-weight: 600; line-height: 1.25; text-decoration: none; border-bottom: 2px solid transparent;
}
.contact-lines__value:hover { border-bottom-color: #000; }
.contact-band { padding: 30px 0 60px; }
.contact-grid { display: flex; flex-direction: column; }
.contact-band .contact-form .field { display: block; margin-top: 24px; }
.contact-band .contact-form .field__label {
position: relative; z-index: 1; top: 40px; display: inline-block; width: 100%; padding-bottom: 4px;
font-size: 18px; font-weight: 400; pointer-events: none; transition: top .2s ease-in;
}
.contact-band .contact-form .field:focus-within .field__label,
.contact-band .contact-form .field:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) .field__label { top: 0; }
.field__optional { opacity: .5; }
.contact-band .contact-form .field input, .contact-band .contact-form .field textarea {
display: block; width: 100%; margin-top: 4px; padding: 8px 12px; font: inherit; font-size: 16px; line-height: 1.5;
color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--dark); border-radius: 0;
}
.contact-band .contact-form .field input:focus, .contact-band .contact-form .field textarea:focus { outline: none; border-bottom-color: #000; }
.contact-band .contact-form { display: block; }
.contact-band .contact-form .button { margin-top: 24px; }
.contact-band .contact-form .form-note { margin-top: 16px; }
/* Form extras: the bot decoy is off-screen (not display:none, which some bots
skip), and the Turnstile box sits above the submit button. */
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-turnstile { margin-top: 24px; min-height: 65px; }
.form-turnstile[hidden] { display: none; }
.form-note.form-note--error { color: #b00020; }
/* Thank-you panel that replaces the form after a successful send. */
.form-success { background: var(--white); border-left: 6px solid var(--yellow); border-radius: 4px; padding: 32px; margin-top: 24px; align-self: start; scroll-margin-top: 160px; }
.form-success:focus { outline: none; }
.contact-form[hidden] { display: none !important; }
.form-success__title { font-size: var(--fs-h3); line-height: 1.35; font-weight: 700; color: var(--dark); margin: 0 0 12px; }
.form-success__body { font-size: 1.0625rem; line-height: 1.55; color: var(--dark); margin: 0 0 20px; }
.form-success__body a { color: inherit; text-decoration: underline; }
.form-success__again { font: inherit; font-weight: 600; color: var(--dark); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.form-success__again:hover, .form-success__again:focus-visible { color: var(--blue); }
.lp-form-wrap .form-success { margin-top: 0; padding: 24px; background: var(--grey); }
.lp-form-wrap .form-success__title { font-size: 1.25rem; }
.lp-form-wrap .form-success__body { font-size: 1rem; }
/* When the form can't be used, the note moves above the fields so it is read first. */
.contact-form .form-note.form-note--top { margin: 0 0 8px; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.form-note a { color: inherit; text-decoration: underline; }
.form-note__setup { display: block; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; color: var(--ink-soft, #555); }
.contact-aside { margin-top: 64px; }
.contact-aside > div { margin-bottom: 48px; }
.contact-aside > div:last-child { margin-bottom: 0; }
.contact-aside__label { font-size: 18px; font-weight: 600; line-height: 1.625; margin: 0 0 8px; }
.contact-aside p, .contact-aside address { font-size: var(--fs-p); font-style: normal; line-height: 1.56; margin: 0; padding-bottom: 4px; }
@media (min-width: 768px) {
.contact-lines__row { width: 66.667%; }
.contact-lines__value { font-size: 44px; }
.contact-grid { flex-direction: row; }
.contact-band .contact-form { width: 66.667%; }
.contact-aside { width: 33.333%; display: grid; justify-content: center; align-content: start; }
}
@media (min-width: 1024px) {
.contact-band { padding: 50px 0 100px; }
}
@media (min-width: 1280px) {
.contact-lines__row { flex-direction: row; }
.contact-lines__row > div { width: 50%; margin-bottom: 0; }
}
/* The landing pages' enquiry forms: boxed fields in a simple stack. */
.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
------------------------------------------------------------------------- */
/* A light footer under the dark call-to-action band, so the two read as
separate blocks: grey ground, dark blue text. */
.site-footer { background: var(--grey); color: var(--dark); padding-top: clamp(2.5rem, 6vw, 4rem); }
/* A page with no call-to-action band can end on a grey section; a rule keeps
the footer distinct from it. */
main:not(:has(> .cta-band:last-child)) + .site-footer { border-top: 1px solid #d9dee5; }
.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1.6fr repeat(3, 1fr); padding-bottom: 2.5rem; }
/* The logo file is cropped to the artwork on the left, so the logo, the
tagline and the LinkedIn icon share one left edge. */
.footer-brand img { width: 144px; }
.footer-tag { font-size: .875rem; max-width: 32ch; margin-top: 1rem; }
/* The LinkedIn mark is the letters "in", so it sits on the label's baseline
like a larger letter rather than being centred on the line. At 15px tall
the body of the "in" is the label's cap height and only its dot rises above. */
.footer-social { display: inline-flex; align-items: baseline; gap: .5rem; color: var(--dark); text-decoration: none; font-size: .875rem; }
.footer-social svg { width: auto; height: 15px; flex: none; }
.footer-social:hover span { text-decoration: underline; }
/* Column headings are set in sentence case, as the brand's headings are
everywhere else on the site: no capitals and no letter-spacing. */
.footer-col h2 { font-size: 1rem; font-weight: 600; line-height: 1.5; color: var(--dark); margin-bottom: .875rem; }
.footer-col li { margin-bottom: .55rem; font-size: .875rem; line-height: 1.55; }
.footer-col a { color: var(--dark); text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
border-top: 1px solid #d9dee5; padding-block: 1.25rem; font-size: .8125rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--dark); }
.footer-bottom a:hover { text-decoration-thickness: 2px; }
/* -------------------------------------------------------------------------
10. RESPONSIVE
------------------------------------------------------------------------- */
@media (max-width: 1100px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
/* Between 1024 and 1279px — most laptops — keep the primary navigation on
screen rather than behind a hamburger. The phone number drops to its icon
and the items pull closer so the row fits beside the 190px lockup. */
@media (min-width: 1024px) and (max-width: 1279px) {
.primary-nav { margin-left: 1.5rem; }
.nav-list { gap: 1rem; }
.nav-list > li > a { font-size: 14px; }
.nav-actions { gap: 1.25rem; }
.nav-phone span { display: none; }
.nav-phone img { width: 22px; }
.nav-phone { gap: 0; border-bottom: 0; }
.nav-actions .button { font-size: 16px; padding: 10px 28px; }
}
/* Below 1024px the row genuinely does not fit, so collapse it into
production's menu: a dark blue sheet over the whole window, the lockup
hidden, the call and close buttons in white where they already were, and
the links set large in white with the current section in yellow. "What we
do" opens in place (assets/js/main.js) rather than leaving the menu.
Measured on itops.nz at 390px: links 18px/600 on a 22px line, 24px apart,
starting 96px down and 24px in; child links 18px/400, 48px further in. */
@media (max-width: 1023px) {
.nav-toggle { display: inline-flex; }
.nav-call { display: inline-flex; }
.primary-nav {
position: fixed; inset: 0; z-index: 1; display: block; margin: 0;
background: var(--dark); padding: 96px 24px 2rem; overflow-y: auto;
opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.primary-nav.is-open { opacity: 1; visibility: visible; }
.site-header:has(.primary-nav.is-open) .brand { visibility: hidden; opacity: 0; transition: opacity .3s, visibility .3s; }
.site-header:has(.primary-nav.is-open) .nav-call img { filter: brightness(0) invert(1); }
.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
.nav-home { display: list-item; }
.nav-list > li { margin-bottom: 24px; min-height: 25px; }
.nav-list > li > a,
.nav-list > li:hover > a, .nav-list > li:focus-within > a {
display: block; padding: 0; border: 0;
font-size: 18px; font-weight: 600; line-height: 22px; color: var(--white); white-space: normal;
}
.nav-list > li > a::after { display: none; }
.nav-list > li > a.is-active, .nav-list > li > a:hover { color: var(--yellow); border: 0; font-weight: 600; }
/* The open/closed marker beside "What we do": production's 13 x 9 arrow. */
.has-children::after {
content: ""; position: absolute; right: 0; top: 6px; width: 24px; height: 14px; pointer-events: none;
background: url("data:image/svg+xml,") center / 13px 9px no-repeat;
}
.has-children.is-open::after { background-image: url("data:image/svg+xml,"); }
.submenu {
position: static; min-width: 0; padding: 0 0 0 48px; background: none; border-radius: 0;
max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
transition: max-height .3s cubic-bezier(.4, 0, .2, 1), padding .3s cubic-bezier(.4, 0, .2, 1), opacity .3s, visibility .3s;
}
.has-children.is-open .submenu { max-height: 1000px; padding-top: 32px; opacity: 1; visibility: visible; }
.submenu::before { display: none; }
.submenu li, .submenu li:not(:last-child) { padding: 0; margin-bottom: 24px; min-height: 25px; }
.submenu li:last-child { margin-bottom: 0; }
.submenu__overview { display: list-item; }
.submenu a, .submenu a:hover {
padding: 0; font-size: 18px; font-weight: 400; line-height: 22px; color: var(--white); white-space: normal;
}
.submenu a:hover { color: var(--yellow); }
/* Production's menu ends with the white pill and nothing else; the phone
number is already the call button in the header. */
.nav-actions { display: block; margin-top: 16px; }
.nav-phone { display: none; }
.nav-actions .button { background: var(--white); color: var(--dark); font-size: 14px; font-weight: 600; padding: .75rem 2rem; }
.nav-actions .button:hover, .nav-actions .button:focus-visible { background: var(--yellow); color: var(--dark); }
}
@media (min-width: 640px) and (max-width: 1023px) {
.primary-nav { padding-inline: var(--gutter); }
}
@media (min-width: 768px) and (max-width: 1023px) {
.primary-nav { padding-top: 128px; }
}
/* The "back to the offer" pill would sit on top of the open menu. */
body:has(.primary-nav.is-open) .lp-return { display: none; }
@media (max-width: 640px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* 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
The hub, the topic pages and the article, built from the client's final
design boards ("Blog listing" and "Blog article v2"). The header, the
call-to-action band and the footer are the site's own.
------------------------------------------------------------------------- */
.title-link { color: var(--dark); text-decoration: none; }
.title-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.post-meta { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: #4a5568; }
/* The filter script hides cards, the pager and the search box with the
hidden attribute; these are flex and grid boxes, so say so explicitly. */
.blog-list [hidden] { display: none; }
/* --- Listing hero (blog hub, topic pages, success stories listing).
These pages carry a heading and a few lines, so the full 703px band of the
other inner pages left the copy stranded at the top of a tall, empty
space. The band is shorter here and the copy sits in the middle of it,
with the same space above it (below the header) as beneath it. The
introduction is set at the service pages' size. */
@media (min-width: 1280px) {
.banner.banner--listing { --band-h: calc(600px + var(--header-h)); }
.banner.banner--listing .banner__inner { justify-content: center; padding-top: var(--header-h); padding-bottom: 0; }
}
/* The blog photograph is cropped tight round the two people so they sit
in the middle of the circle; the success
stories one keeps the engineer's head clear of the top of the circle. */
.banner--blog .banner__image img { object-position: 50% 40%; }
.banner--stories .banner__image img { object-position: 50% 8%; }
/* --- Hub: the featured article, on grey */
.blog-feature { padding-block: 80px; }
.blog-feature__row { display: flex; align-items: center; gap: 72px; }
.blog-feature__art { flex: none; display: block; width: 360px; height: 360px; }
.blog-feature__art img, .post-card__art img, .related-card__art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.blog-feature__art:hover, .post-card__art:hover, .related-card__art:hover { opacity: .85; }
.blog-feature__copy { flex: 1 1 auto; min-width: 0; max-width: 680px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.blog-feature__copy h2 { margin: 0; font-size: var(--fs-h2); line-height: 1.25; }
.blog-feature__excerpt { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.56; color: #000; }
.blog-feature .button { margin-top: 8px; }
@media (max-width: 860px) {
.blog-feature__row { flex-direction: column; align-items: flex-start; gap: 32px; }
}
@media (max-width: 640px) {
.blog-feature { padding-block: 56px; }
.blog-feature__art { width: 280px; max-width: 100%; height: auto; aspect-ratio: 1; }
}
/* --- Hub: topic buttons, search and the count */
.blog-list { padding: 80px 0 clamp(80px, 10vw, 140px); }
.blog-list__title { margin: 0 0 24px; }
.blog-tools {
display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px;
padding-bottom: 24px; border-bottom: 1px solid #e2e6ec;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 600px; min-width: 0; }
.chip {
display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
border: 1.5px solid var(--dark); border-radius: 9999px; background: var(--white); color: var(--dark);
font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
transition: background-color .15s, color .15s;
}
.chip:hover { background: var(--grey); }
.chip.is-active, .chip.is-active:hover { background: var(--dark); color: var(--white); }
.blog-search { position: relative; flex: 0 1 320px; min-width: 240px; }
.blog-search svg { position: absolute; left: 18px; top: 12px; width: 20px; height: 20px; color: var(--dark); pointer-events: none; }
.blog-search input {
width: 100%; height: 44px; padding: 0 20px 0 48px;
border: 1.5px solid var(--dark); border-radius: 9999px; background: var(--white);
font-family: inherit; font-size: 16px; font-weight: 500; color: var(--dark);
-webkit-appearance: none; appearance: none;
}
.blog-search input::placeholder { color: #5a6577; opacity: 1; }
.blog-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 64px; }
.blog-status p { margin: 0; font-size: 15px; font-weight: 500; color: #4a5568; }
.link-button {
min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
font-family: inherit; font-size: 15px; font-weight: 600; color: var(--dark);
text-decoration: underline; text-underline-offset: 4px;
}
/* --- Hub: the grid of articles */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; row-gap: 64px; padding-top: 16px; }
.post-card { display: flex; flex-direction: column; gap: 18px; }
.post-card__art { display: block; width: 180px; height: 180px; margin-bottom: 6px; }
.post-card h3 { margin: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.5; }
.post-card > p { margin: 0; font-size: 16px; line-height: 1.56; color: var(--dark); }
.post-card > .post-meta { margin-top: auto; font-size: 14px; line-height: 1.5; color: #4a5568; }
@media (max-width: 1000px) {
.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.post-grid { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
.blog-list { padding-top: 56px; }
.blog-search { flex-basis: 100%; min-width: 0; }
}
.blog-empty { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 56px 0; text-align: center; }
.blog-empty h3, .blog-empty p { margin: 0; }
.pager-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 80px; }
.pill {
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 16px;
border-radius: 9999px; font-size: 16px; font-weight: 600; text-decoration: none; color: var(--dark);
}
a.pill:hover { background: var(--grey); }
.pill.is-active, a.pill.is-active:hover { background: var(--dark); color: var(--white); }
.pill.is-disabled { color: #8a94a6; }
/* --- Article: heading */
.post-col { width: min(100% - (var(--gutter) * 2), 752px); margin-inline: auto; }
.post-head { display: flex; flex-direction: column; gap: 20px; padding-top: calc(var(--header-h) + 32px); }
.back-link {
display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px;
font-size: 16px; font-weight: 500; color: #5a6577; text-decoration: none;
}
.back-link svg { width: 16px; height: 16px; }
.back-link:hover { color: var(--dark); text-decoration: underline; text-underline-offset: 4px; }
/* The site's breadcrumb trail, on one line: an article's title is long, so
it is cut short with an ellipsis rather than wrapping under the trail. */
.post-head .breadcrumbs { margin: 0; }
.post-head .breadcrumbs ol { flex-wrap: nowrap; }
.post-head .breadcrumbs li { flex: none; }
.post-head .breadcrumbs li[aria-current="page"] {
flex: 0 1 auto; min-width: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-head .breadcrumbs li[aria-current="page"]::before { margin-right: .6rem; }
.post-head .breadcrumbs + .back-link { margin-top: -12px; }
.post-head h1 { margin: 0; font-size: 46px; line-height: 1.2; }
.post-head .post-meta { color: #5a6577; }
/* --- Article: the text */
.prose { padding-top: 48px; font-size: 17px; line-height: 1.75; color: #1a2840; }
.prose::after { content: ""; display: block; clear: both; }
.prose p { margin: 0 0 20px; font-size: inherit; line-height: inherit; color: inherit; }
.prose h2 { margin: 64px 0 18px; font-size: 30px; font-weight: 700; line-height: 1.3; color: var(--dark); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h3 { margin: 40px 0 12px; font-size: 22px; font-weight: 600; line-height: 1.45; color: var(--dark); }
.prose p a {
color: var(--dark); font-weight: 600; text-decoration: underline; text-decoration-color: var(--yellow);
text-decoration-thickness: 3px; text-underline-offset: 4px;
}
.prose p a:hover { text-decoration-color: var(--dark); }
.prose .act { font-weight: 600; color: var(--dark); }
.prose .scene { margin-bottom: 40px; }
.prose .scene p { margin: 0 0 12px; font-size: 19px; line-height: 1.6; color: var(--dark); }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 24px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: 8px; padding-left: 6px; }
.prose li::marker { color: var(--dark); }
/* The article photograph: a circle the text runs around. */
.post-hero {
float: right; display: block; width: 340px; height: 340px; margin: 8px 0 24px 40px;
border-radius: 50%; object-fit: cover; background: var(--grey);
shape-outside: circle(50%); shape-margin: 20px;
}
/* "The short answer" and pulled quotations share the yellow rule. */
.short-answer, .prose blockquote { margin: 48px 0; padding: 4px 0 4px 28px; border-left: 4px solid var(--yellow); }
.prose .short-answer__label { margin: 0 0 10px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--dark); }
.prose .short-answer__text, .prose blockquote { font-size: 21px; font-weight: 600; line-height: 1.55; color: var(--dark); }
.prose .short-answer__text { margin: 0; }
/* A comparison table, and the same rows as an accordion on a phone. */
.table-wrap { overflow-x: auto; margin: 8px 0 28px; }
.table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 16px; line-height: 1.5; color: var(--dark); }
.table th { padding: 14px 12px; background: var(--dark); color: var(--white); font-size: 17px; font-weight: 700; text-align: left; }
.table td { padding: 14px 12px; vertical-align: top; border-bottom: 1px solid #8a94a6; }
.acc-list { display: none; margin: 8px 0 28px; border: 1px solid #e2e6ec; border-radius: 16px; overflow: hidden; }
.prose .acc-list__head { margin: 0; padding: 14px 20px; background: var(--dark); color: var(--white); font-size: 15px; font-weight: 600; line-height: 1.4; }
.acc { border-top: 1px solid #e2e6ec; }
.acc[open] { background: var(--grey); }
.acc summary, .post-faq summary {
display: flex; justify-content: space-between; align-items: center; min-height: 44px;
list-style: none; cursor: pointer; font-weight: 600; line-height: 1.45; color: var(--dark);
}
.acc summary::-webkit-details-marker, .post-faq summary::-webkit-details-marker { display: none; }
.acc summary { gap: 16px; padding: 16px 20px; font-size: 16px; }
.pm {
flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
border-radius: 50%; color: var(--dark); transition: transform .2s;
}
.acc .pm { background: var(--grey); }
.acc[open] .pm { background: var(--white); transform: rotate(45deg); }
.acc__body { padding: 0 20px 18px; }
.prose .acc__label { margin: 14px 0 4px; font-size: 13px; font-weight: 700; line-height: 1.4; color: #4a5568; }
.prose .acc__label:first-child { margin-top: 0; }
.prose .acc__value { margin: 0; font-size: 15px; line-height: 1.55; color: var(--dark); }
/* Frequently asked questions, inside the article. */
.post-faqs { border-top: 1px solid #e2e6ec; }
.post-faq { border-bottom: 1px solid #e2e6ec; }
.post-faq summary { gap: 20px; padding: 20px 0; font-size: 18px; }
.post-faq .pm { background: var(--yellow); }
.post-faq[open] .pm { transform: rotate(45deg); }
.post-faq__answer, .prose .post-faq__answer { margin: 0; padding: 0 48px 22px 0; font-size: 16px; line-height: 1.6; color: var(--dark); }
/* The same accordion closes the service pages and the contact page, on grey,
where the rules need a shade more weight to show. */
.faq-band .section-title { margin-bottom: 24px; }
.faq-band .post-faqs, .faq-band .post-faq { border-color: #d9dee5; }
.post-byline {
clear: both; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
margin-top: 64px; padding-top: 28px; border-top: 1px solid #e2e6ec;
}
.prose .post-byline__name { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; color: var(--dark); }
.prose .post-byline__role { margin: 2px 0 0; font-size: 14px; line-height: 1.5; color: #5a6577; }
/* --- Article: related reading */
.post-related { padding: 112px 0; }
.post-related h2 { margin: 0 0 40px; }
.related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
/* A size down from the design's 24px titles and 16px summaries, at the
client's request: the pair read as too large beneath an article. */
.related-card { display: flex; align-items: center; gap: 32px; }
.related-card__art { flex: none; display: block; width: 176px; height: 176px; }
.related-card__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.related-card h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.35; }
.related-card p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: #000; }
.related-card .button { padding: .625rem 1.5rem; font-size: 15px; }
@media (max-width: 1140px) {
.related-card { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 1000px) {
.related-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 640px) {
.post-head h1 { font-size: 34px; }
.prose h2 { font-size: 25px; }
.prose .short-answer__text, .prose blockquote { font-size: 19px; }
.post-hero { float: none; width: 240px; height: 240px; margin: 0 auto 32px; }
.table-wrap { display: none; }
.acc-list { display: block; }
.post-faq__answer, .prose .post-faq__answer { padding-right: 0; }
.post-related { padding: 72px 0; }
.related-card__art { width: 160px; height: 160px; }
}
/* Success stories — the listing and the story page, from the client's final
design boards ("Success stories listing" and "Success story v2"). The
listing shares its hero, featured band, filter buttons, search and pager
with the blog hub above; what is here is particular to stories and comes
after it so that it wins where the two overlap. */
/* --- Listing: a round photograph beside each story, on alternating sides */
.blog-feature__art--photo { width: 320px; height: 320px; }
.blog-feature__art--photo img, .story-item__photo img, .related-card__art--photo img {
display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: var(--grey);
}
.blog-feature__text { margin: 0; font-size: 16px; line-height: 1.56; color: var(--dark); }
.story-list__rows { display: flex; flex-direction: column; gap: 80px; padding-top: 40px; }
/* The copy runs the full width beside its photograph, as the design has it.
Where the photograph is on the right the copy's ragged line ends face it,
which reads as a wider gap than the straight left edge does on the other
rows, so the column gap is narrower there to even the two out by eye. */
.story-item { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 64px; align-items: center; }
.story-item.is-flipped { grid-template-columns: minmax(0, 1fr) 320px; column-gap: 56px; }
.story-item.is-flipped .story-item__photo { order: 2; }
.story-item p { text-wrap: pretty; }
.story-item__photo { display: block; width: 320px; height: 320px; }
.story-item__photo:hover { opacity: .85; }
.story-item__copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.story-item h3 { margin: 0 0 16px; font-size: var(--fs-h2); font-weight: 700; line-height: 1.25; }
.story-item p { margin: 0; font-size: 16px; line-height: 1.56; color: var(--dark); }
.story-item .story-item__sub { font-weight: 600; color: #000; }
.story-item__sub + p { margin-top: 16px; }
.story-item .button { margin-top: 24px; }
.story-list .pager-pills { margin-top: 96px; }
@media (max-width: 860px) {
.story-item, .story-item.is-flipped { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.story-item.is-flipped .story-item__photo { order: 0; }
.story-list__rows { gap: 64px; }
}
@media (max-width: 640px) {
.story-item__photo, .blog-feature__art--photo { width: 280px; max-width: 100%; height: auto; aspect-ratio: 1; }
}
/* --- Story page: heading and summary in a narrow column */
.story-head { padding-top: calc(var(--header-h) + 40px); }
.story-head__col { display: flex; flex-direction: column; gap: 24px; max-width: 720px; }
.story-head h1 { margin: 0; }
/* The heading block uses the service pages' sizes: the summary line in the
brand script under the name, then the introduction, as in their banners. */
.story-intro p { margin: 0 0 16px; font-size: 15px; line-height: 1.625; color: var(--ink); }
.story-intro p:last-child { margin-bottom: 0; }
.story-intro .story-intro__sub {
font-family: var(--font-script); font-weight: 700; font-size: 19px; line-height: 1.5; color: var(--dark); margin-bottom: 16px;
}
@media (min-width: 1024px) {
.story-intro p { font-size: 18px; margin-bottom: 24px; }
.story-intro .story-intro__sub { font-size: 28px; margin-bottom: 16px; }
}
/* --- Story page: the write-up, with the client's words on a yellow circle.
The circle is 900px across and runs off the right of the page. The quote
starts level with the top of the circle and reads down over it, as on the
previous site, so a long quote never spills off the circle's left edge. */
.story { position: relative; overflow: hidden; padding: 72px 0 96px; }
.story__cols { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.story__content { max-width: 700px; }
.story-section h2 { margin: 56px 0 18px; font-size: 26px; font-weight: 700; line-height: 1.25; }
.story-section:first-child h2 { margin-top: 0; }
.story-section p { margin: 0 0 20px; font-size: 16px; line-height: 1.75; color: var(--dark); }
.story-section .bullets, .story-section p + .bullets { margin: 0 0 20px; padding-left: 24px; }
.story-section .bullets li { margin-bottom: 12px; padding-left: 4px; font-size: 16px; line-height: 1.7; color: var(--dark); }
.story-section .bullets li strong { font-weight: 600; }
.story__quote {
position: relative; align-self: stretch; box-sizing: border-box; min-height: 1040px; margin: 0; padding: 140px 0 0;
display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 24px; text-align: center;
}
.story__quote::before {
content: ""; position: absolute; z-index: 0; left: -40px; top: 140px;
width: 900px; height: 900px; border-radius: 50%; background: var(--yellow);
}
.story__quote blockquote, .story__quote figcaption { position: relative; z-index: 1; max-width: 424px; }
.story__quote blockquote { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.7; color: var(--dark); }
.story__quote figcaption { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--dark); }
.story__avatar { display: block; width: 80px; height: 80px; margin-bottom: 18px; border-radius: 50%; object-fit: cover; }
.story__quote figcaption strong { font-size: 17px; font-weight: 700; }
.story__quote figcaption span { font-size: 15px; line-height: 1.5; }
/* Below 1001px the quote follows the write-up, on a circle sized to hold it. */
@media (max-width: 1000px) {
.story__cols { grid-template-columns: minmax(0, 1fr); }
.story__quote { min-height: 0; padding: 96px 0 120px; justify-content: center; }
.story__quote::before { top: 16px; bottom: 16px; left: 50%; width: auto; height: auto; aspect-ratio: 1; transform: translateX(-50%); }
}
@media (max-width: 640px) {
.story { padding: 56px 0 72px; }
.story__quote blockquote, .story__quote figcaption { max-width: 300px; }
}
/* --- Story page: two more stories, as cards with round photographs */
.story-more { padding-top: 0; }
.related-card--story h3 { font-size: 22px; line-height: 1.3; }
/* -------------------------------------------------------------------------
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); font-weight: 600; line-height: 1.5; }
.t-h4 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
/* Breadcrumbs */
/* The trail sits at the top of the page head, above the eyebrow and H1,
rather than in its own ruled band below the hero. */
.breadcrumbs { margin: 0 0 1.25rem; }
/* 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; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; 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(--dark); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--dark); font-weight: 600; }
/* Production has no breadcrumb trail. Ours sits in the padding above the
heading, pulled up by its own height and gap, so the heading stays where
production puts it. On phones there is only 32px above the heading, so it
is pulled up 16px and the heading starts 16px lower than theirs. */
.banner__inner .breadcrumbs, .page-head .breadcrumbs { margin: -16px 0 12px; }
@media (min-width: 768px) {
.banner__inner .breadcrumbs, .page-head .breadcrumbs { margin: -40px 0 20px; }
}
@media (min-width: 1024px) {
.banner__inner .breadcrumbs, .page-head .breadcrumbs { margin: -44px 0 24px; }
}
/* CR-05 — map facade. Nothing loads from Google until the button is pressed. */
.map {
position: relative; width: 100%; border-radius: var(--radius); overflow: hidden;
background: var(--grey); border: 1px solid var(--grey-line);
aspect-ratio: 21 / 9; min-height: 260px;
}
/* A 21:9 box with a 260px floor resolves to 607px WIDE once the floor bites,
which pushed the whole contact page sideways on a phone. Below that point
the map takes a shape that fits instead. */
@media (max-width: 720px) {
.map { aspect-ratio: 4 / 3; min-height: 0; }
}
.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; }
/* -------------------------------------------------------------------------
11. ADVERT LANDING PAGES
Site header, navigation and footer are the standard ones. What differs is
between them: a conversion layout rather than a service page. The promise
and the form sit side by side above the fold, then what's included, then
proof, then the ask again.
------------------------------------------------------------------------- */
.lp-hero {
position: relative; overflow: hidden;
/* Clears the fixed site header, the way .banner and .page-head do. */
padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3rem));
padding-bottom: clamp(2rem, 5vw, 4rem);
}
/* The brand's circle, clipped by an edge of the frame. It sits behind the
form card, never behind the copy: a disc edge running through a headline
reads as a mistake rather than as the graphic device. */
.lp-hero__device {
position: absolute; z-index: 0; background: var(--yellow); border-radius: 50%;
pointer-events: none;
width: 72vw; height: 72vw; right: -30vw; bottom: -34vw; top: auto; left: auto;
}
@media (min-width: 900px) {
.lp-hero__device {
width: 46vw; height: 46vw; max-width: 760px; max-height: 760px;
/* Starts below the header rather than behind it: the header's own
"Get in touch" button is yellow, and on the disc it disappeared. */
right: -14vw; top: var(--header-h); bottom: auto;
}
}
.lp-hero__inner {
position: relative; z-index: 1;
display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (min-width: 900px) {
.lp-hero__inner { grid-template-columns: 1fr minmax(360px, 420px); }
}
.lp-hero__copy h1 { font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; margin: 0 0 1rem; }
.lp-hero__sub { font-size: var(--fs-lead); font-weight: 600; margin: 0 0 1rem; max-width: 34ch; }
.lp-hero__intro { max-width: 52ch; margin: 0 0 1.5rem; }
.lp-hero__call { font-weight: 600; margin: 0; }
.lp-hero__call a { font-weight: 700; }
.lp-form-wrap {
background: var(--white); border: 1px solid var(--grey-line); border-radius: var(--radius);
padding: clamp(1.25rem, 3vw, 1.75rem); box-shadow: var(--shadow);
}
.lp-form-wrap h2 { font-size: 1.375rem; margin: 0 0 1rem; }
.lp-form .field { margin-bottom: .85rem; }
.lp-form button { width: 100%; }
.lp-form__fineprint { font-size: .8125rem; color: var(--ink-soft); margin: .85rem 0 0; }
.lp-points__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 720px) { .lp-points__list { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } }
.lp-points__list h3 { font-size: 1.125rem; margin: 0 0 .4rem; }
.lp-points__list p { margin: 0; }
.lp-proof__list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .85rem; max-width: 62ch; }
.lp-proof__list li { padding-left: 1.6rem; position: relative; }
.lp-proof__list li::before {
content: ""; position: absolute; left: 0; top: .55em;
width: .6rem; height: .6rem; border-radius: 50%; background: var(--yellow);
}
.lp-proof__note { font-size: .9375rem; color: var(--ink-soft); margin: 0; }
.lp-close { text-align: center; }
.lp-close h2 { margin-bottom: 1rem; }
.lp-close__phone { display: inline-block; margin-left: 1rem; font-weight: 700; }
@media (max-width: 520px) {
.lp-close .button { display: block; }
.lp-close__phone { margin: .9rem 0 0; }
}
/* The way back to a landing page.
Built by assets/js/main.js only for a visitor who actually arrived on one,
so it never appears for anyone who came from search or typed the address.
Fixed to the bottom so it cannot disturb the layout of any page it lands
on, and above the footer rather than in it so it stays reachable. */
.lp-return {
position: fixed; z-index: 70; left: var(--gutter); bottom: 1rem;
display: inline-flex; align-items: stretch; max-width: calc(100vw - (var(--gutter) * 2));
background: var(--white); border: 1px solid var(--grey-line);
border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 19, 45, .16);
overflow: hidden;
}
.lp-return__link {
display: inline-flex; align-items: center; gap: .5rem; min-width: 0;
padding: .7rem .5rem .7rem 1rem;
font-size: .9375rem; font-weight: 600; color: var(--dark); text-decoration: none;
}
.lp-return__link:hover { text-decoration: underline; }
.lp-return__link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-return__arrow { width: 1.05em; height: 1.05em; flex: 0 0 auto; }
.lp-return__close {
border: 0; background: none; cursor: pointer; padding: 0 .85rem 0 .5rem;
font-size: 1.25rem; line-height: 1; color: var(--ink-soft); font-family: inherit;
}
.lp-return__close:hover { color: var(--dark); }
@media (max-width: 520px) {
.lp-return { left: var(--gutter); right: var(--gutter); bottom: .75rem; }
.lp-return__link { flex: 1 1 auto; }
}
@media print { .lp-return { display: none !important; } }