- is an inline
style, which is how the homepage ended up with four of them. */
.list-bulleted { padding-left: 1.5rem; margin: 0; }
.list-bulleted li { margin-bottom: var(--space-xs); line-height: var(--leading-body); }
.list-bulleted li:last-child { margin-bottom: 0; }
/* ============ SPEC GRID ============ */
/* Label/value pairs for product detail pages. Markup is a
- with one
per pair, so each label stays glued to its value when the grid wraps. */
.spec-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
gap: var(--space-md) var(--gutter);
margin: 0;
}
.spec-grid > div { padding-top: var(--space-sm); border-top: 1px solid var(--border-1); }
.spec-grid dt {
font-size: var(--text-label);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--space-xs);
}
.spec-grid dd { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink-1); }
/* Brand red band: product Specifications sections, the About Us values row.
All text white. White on --brand-3 is about 4.6:1, so small bold labels
still clear AA; they stay full white rather than a muted tint for that
reason. */
.surface-red { background-color: var(--brand-3); color: var(--on-dark); }
.surface-red :is(h1, h2, h3, h4, p, dt, dd) { color: var(--on-dark); }
.surface-red .spec-grid > div { border-top-color: rgba(255, 255, 255, 0.4); }
/* ============ PRODUCT CALLOUT ============ */
/* Boxed aside on product detail pages - install requirements, flue notes. Sits
on the recessed surface with a crimson edge so it reads as a note attached to
the copy, not as another section. */
.product-callout {
background: var(--surface-3);
border-left: 4px solid var(--brand-3);
padding: var(--space-md) var(--space-ml);
margin-top: var(--space-md);
}
.product-callout > :last-child { margin-bottom: 0; }
/* ============ PRODUCT GALLERY ============ */
/* Supporting product shots below the spec table. Same uncropped-edge treatment
as .about-photo above it, so the two read as one page. */
.product-gallery {
display: grid;
/* auto-fill, not auto-fit: the empty tracks are kept, so a lone image stays
one column wide instead of stretching across the row. A 400px dimension
drawing was being blown up to 1300px that way. */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
/* 35% tighter than the standard gutter (30px to 19.5px), so the shots read
as one set. */
gap: calc(var(--gutter) * 0.65);
margin: 0;
}
/* Contain, not cover: most shots are cut-outs on white and the drawings carry
dimensions at their edges, so cropping cut off the product and the numbers.
The frame keeps every row the same height. The section itself carries the
colour (surface-canvas on SUPPORTING IMAGES), so the frame stays clear and a
small drawing does not leave a white gap in a white section. */
.product-gallery figure { margin: 0; overflow: hidden; }
.product-gallery img { width: 100%; aspect-ratio: 800 / 452; object-fit: contain; display: block; }
/* A portrait product shot in .about-photo would be cropped top and bottom by
that rule's object-fit: cover, cutting the unit in half. Modifier, so the
pages already relying on cover are untouched.
.about-photo also sets min-height but no definite height, so the img's
height:100% resolves to auto and a portrait shot renders at full column width
times its aspect - roughly 1190px tall. Sized to 70% and centred instead. */
.about-photo--contain {
background: var(--surface-2);
display: flex;
align-items: center;
justify-content: center;
}
.about-photo--contain img { width: 70%; height: auto; object-fit: contain; }
/* Landscape shots wider than the box (over about 1.24:1). The min-height above
is sized for squarer photos, so a wide one sat at the top of an empty grey
band. Dropping it lets the box fit the photo, which the row then centres. */
.about-photo--wide { min-height: 0; }
/* ============ PRODUCT DRAWING ============ */
/* Technical dimension drawings. These are line art, not photography - they must
never be cropped to a tile, so the image is contained on a plain panel with
space around it rather than dropped into .product-gallery beside the
lifestyle shots. */
.product-drawing {
background: var(--surface-1);
padding: var(--space-lg);
display: flex;
justify-content: center;
}
.product-drawing img { width: 100%; max-width: 46rem; height: auto; display: block; }
/* ============ BREADCRUMB ============ */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .breadcrumb-sep { opacity: 0.5; }
/* ============ CONTACT FORM ============ */
.form-row { display: flex; flex-direction: column; margin-bottom: var(--space-md); }
.form-label { font-family: var(--font-body); font-weight: 700; color: var(--ink-1); margin-bottom: var(--space-xs); font-size: var(--text-body-sm); }
.form-input, .form-select { background: var(--surface-1); border: 1px solid var(--border-1); border-radius: var(--radius-ui); color: var(--ink-1); padding: var(--space-sm); width: 100%; font-family: var(--font-body); font-size: var(--step-0); transition: box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease; }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* ============ LEGAL PAGES ============ */
.legal-subsection { padding-left: var(--space-md); border-left: 2px solid var(--border-1); }
/* ============ SCROLL REVEAL ============ */
.reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); will-change: opacity, transform; }
.reveal.active { opacity: 1; transform: translateY(0); }
/* ============ TILE COMPONENT (AGP) ============ */
:root {
--gs-chamfer: 2rem;
}
.gs-chamfer {
clip-path: polygon(
0 var(--gs-chamfer),
var(--gs-chamfer) 0,
100% 0,
100% calc(100% - var(--gs-chamfer)),
calc(100% - var(--gs-chamfer)) 100%,
0 100%
);
}
.gs-chamfer--alt {
clip-path: polygon(
0 0,
calc(100% - var(--gs-chamfer)) 0,
100% var(--gs-chamfer),
100% 100%,
var(--gs-chamfer) 100%,
0 calc(100% - var(--gs-chamfer))
);
}
.gs-tile {
display: flex;
flex-direction: column;
gap: var(--space-sm);
text-decoration: none;
color: inherit;
outline: none;
}
.gs-tile:focus-visible .gs-tile__media {
outline: 3px solid var(--accent-tint);
outline-offset: 4px;
}
.gs-tile__media {
display: block;
aspect-ratio: 4 / 5;
overflow: hidden;
position: relative;
background-color: var(--surface-2);
}
.gs-tile__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 300ms ease;
display: block;
}
.gs-tile:hover:not(.gs-tile--flat) .gs-tile__media img {
transform: scale(1.05);
}
.gs-tile--square .gs-tile__media {
clip-path: none;
}
.gs-tile__label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: var(--space-md);
z-index: 2;
text-align: center;
}
.gs-tile:not(.gs-tile--flat) .gs-tile__label {
background: rgba(0, 0, 0, 0.3);
}
.gs-tile--flat .gs-tile__label {
position: static;
width: auto;
height: auto;
padding: 0;
background: none;
}
.gs-tile__name {
/* --font-header resolves to Anton, so this is already the display face; the
old system-ui fallback is left off because the token always resolves.
letter-spacing was var(--tracking-wide), a token defined nowhere, so the
declaration was invalid at computed-value time and the label rendered at
normal tracking. A real value instead. */
font-family: var(--font-header);
font-size: var(--step-1);
/* Anton has one face, 400. Asking for 700 gets a synthesised bold that
smears the strokes, most visibly at this size. */
font-weight: 400;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--on-dark);
}
.gs-tile__cue {
display: block;
width: 2rem;
height: 3px;
background: var(--on-dark);
transition: background-color 200ms ease;
}
.gs-tile:hover .gs-tile__cue {
background: var(--brand-3);
}
.gs-tiles { padding: var(--space-xl) 0; }
.gs-tiles__head {
margin-bottom: var(--space-xl);
text-align: center;
}
.gs-tiles__eyebrow {
font-family: var(--font-body);
font-size: var(--text-label);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--ink-3);
margin-bottom: var(--space-xs);
}
.gs-tiles__title {
font-family: var(--font-header);
/* No font-size. Every other h2 on the site takes --text-h2 from the global
heading scale; overriding this one to --step-3 made it visibly smaller
than its neighbours for no stated reason. Inheriting keeps the section
headings in one rhythm. */
margin: 0;
}
/* A capped title (e.g. .reading on /products/) still centres: the margin: 0
above would otherwise pin the narrower box to the left. */
.gs-tiles__title.reading { margin-inline: auto; }
.gs-tiles__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
@media (max-width: 64rem) {
.gs-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
.gs-tiles__grid { grid-template-columns: minmax(0, 1fr); }
}
/* ---------- Block 6: flat colour variant ---------- */
.gs-tile__media--flat {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--brand-3);
padding: clamp(1.5rem, 2.6vw, 2.5rem);
gap: var(--space-md);
}
.gs-tile__flat-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.gs-tile__flat-kicker {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgb(255 255 255 / 0.65);
}
.gs-tile__flat-copy {
font-family: var(--font-body);
font-size: clamp(1rem, 1.4vw, 1.25rem);
line-height: 1.35;
color: var(--on-dark);
max-width: 24ch;
}
.gs-tile--flat:hover .gs-tile__media--flat,
.gs-tile--flat:focus-visible .gs-tile__media--flat {
background: var(--brand-1);
}
.gs-tile--flat.no-hover:hover .gs-tile__media--flat,
.gs-tile--flat.no-hover:focus-visible .gs-tile__media--flat {
background: var(--brand-3);
}
.gs-tile--flat.no-hover:hover .gs-tile__cue,
.gs-tile--flat.no-hover:focus-visible .gs-tile__cue {
background: var(--brand-3);
}
.gs-tile__media--flat { transition: background-color 200ms ease; }
@media (prefers-reduced-motion: reduce) {
.gs-tile__media--flat { transition: none; }
}
/* ============ REVIEWS ============ */
.review-card { position: relative; }
.review-card::after {
content: '\201D';
position: absolute;
top: 1rem;
right: var(--space-md);
font-size: 16rem;
line-height: 1;
color: var(--brand-1);
opacity: 0.05;
font-family: var(--font-accent-serif);
pointer-events: none;
}
/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.site-nav::before { transition: none !important; }
}
/* ============================================================
PRODUCT PAGE HEADER (.gs-pagehead)
============================================================ */
.gs-pagehead {
padding-inline: clamp(1.25rem, 3.6vw, 4.375rem);
/* Top padding clears the fixed nav, then adds 1rem. The old value was a
fluid 32-63px against an 88px bar, so the images ran underneath it at
every width, by 25px at 1920 and 56px at 390. Derived from
--header-height so it tracks the bar if that changes again. */
padding-block: calc(var(--header-height) + 1rem) clamp(3rem, 5vw, 5rem);
max-width: 120rem;
margin-inline: auto;
}
/* ---------- Image row ---------- */
.gs-pagehead__media {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.13fr);
align-items: start;
gap: clamp(1rem, 1.6vw, 1.875rem);
}
.gs-pagehead__media figure { margin: 0; }
.gs-pagehead__media-a { aspect-ratio: 555 / 437; }
.gs-pagehead__media-b { aspect-ratio: 1180 / 710; }
.gs-pagehead__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ---------- Text row ---------- */
.gs-pagehead__body {
display: grid;
grid-template-columns: minmax(0, 555fr) minmax(0, 567fr) minmax(0, 567fr);
gap: clamp(1.5rem, 2.4vw, 2.875rem);
margin-block-start: clamp(2rem, 3.1vw, 3.75rem);
}
.gs-pagehead__eyebrow {
font-family: var(--font-display);
font-size: 0.875rem;
line-height: 1;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-heading);
margin: 0 0 clamp(1.5rem, 2.4vw, 2.3125rem);
}
.gs-pagehead__title {
font-family: var(--font-display);
font-weight: 400;
font-size: clamp(2rem, 3vw, 3.5625rem);
line-height: 1.105;
text-transform: uppercase;
color: var(--ink-heading);
text-wrap: balance;
margin: 0;
}
/* Rule + top padding on body columns only. Never on the intro column. */
.gs-pagehead__col {
border-block-start: 2px solid var(--ink-heading);
padding-block-start: clamp(2.5rem, 2.9vw, 3.3125rem);
margin-block-start: -1rem;
}
.gs-pagehead__col p {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.625;
color: var(--ink-2);
margin: 0;
}
/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
.gs-pagehead__body {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.gs-pagehead__intro { grid-column: 1 / -1; }
}
@media (max-width: 48rem) {
.gs-pagehead__media { grid-template-columns: minmax(0, 1fr); }
/* Both images, stacked, each at its own natural ratio. The previous rule
hid the detail image outright and left the main one locked to its
1180/710 box under object-fit: cover, so a phone showed one image and
showed it cropped. Releasing the aspect-ratio and letting height follow
the intrinsic size means neither is cut off. The width and height
attributes stay on the ![]()
, so the browser still reserves the right
space and nothing shifts as they load. */
.gs-pagehead__media-a,
.gs-pagehead__media-b { aspect-ratio: auto; }
.gs-pagehead__media img { height: auto; }
.gs-pagehead__body { grid-template-columns: minmax(0, 1fr); }
.gs-pagehead__intro { grid-column: auto; }
}
/* Caret in the nav dropdown toggle. Lives here rather than as an inline
style on the partial, which must stay free of hardcoded sizes. */
.nav-dropdown-caret { margin-left: 0.25rem; }
/* ---------- Partner Slider ---------- */
.partner-slider {
width: 100%;
overflow: hidden;
padding: var(--space-md) 0;
background-color: var(--surface-1);
display: flex;
}
.partner-slider-track {
display: flex;
align-items: center;
gap: 4rem;
width: max-content;
animation: slide 30s linear infinite;
}
.partner-logo {
height: 60px;
width: auto;
object-fit: contain;
filter: grayscale(100%);
opacity: 0.7;
transition: opacity 0.3s ease, filter 0.3s ease;
}
.partner-logo:hover {
filter: grayscale(0%);
opacity: 1;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
/* 13 logos + 13 gaps roughly. We translate by -50% to reset the loop */
transform: translateX(calc(-50% - 2rem));
}
}
@media (max-width: 48rem) {
.partner-logo {
height: 40px;
}
.partner-slider-track {
gap: 2rem;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-50% - 1rem));
}
}
}