/* ============================================================
VPC — Venetian Plaster Company (plaster.im)
Hugo stylesheet ported from the vplaster2026 WordPress theme.
1. Design tokens — :root block copied verbatim from
vplaster2026/style.css (lines 24-124)
2. PORTED FROM vplaster2026 — component styles carried over
from custom/styles.css + style.css base typography
3. VPC HUGO ADDITIONS — header/nav, homepage, generic pages,
forms, lightbox, footer overrides (new for the Hugo build)
============================================================ */
:root {
/* ========================================
VENETIAN PLASTER COMPANY BRAND COLORS
Based on logo and brand identity
======================================== */
/* Primary Brand Colors */
--color-primary: #C97856; /* Terracotta - Warm clay for CTAs and accents */
--color-primary-dark: #A85F42; /* Darker terracotta for hover states */
--color-primary-light: #D99478; /* Lighter terracotta for subtle accents */
/* Secondary Brand Colors */
--color-secondary: #3A4B54; /* Slate - Dark blue-grey for headers and navigation */
--color-secondary-dark: #2A3740; /* Darker slate for emphasis */
--color-secondary-light: #4F6169; /* Lighter slate for secondary elements */
--color-accent: #C97856; /* Terracotta accent (same as primary) */
/* Neutral Brand Colors */
--color-cream: #E8E4D9; /* Off-white cream for backgrounds */
--color-taupe: #A39482; /* Warm neutral for borders and dividers */
--color-beige: #D4C4A8; /* Light neutral for alternate sections */
--color-bronze: #8B6F47; /* Metallic bronze for highlights */
/* Text Colors */
--color-text-primary: #2B2520; /* Dark brown for body text */
--color-text-secondary: #6B6158; /* Medium brown for secondary text */
--color-text-light: #A39482; /* Taupe for light text */
--color-text-muted: #6B6158; /* Muted text color */
--color-text-white: #ffffff; /* White text */
/* Background Colors */
--color-bg-primary: #ffffff; /* Pure white for main backgrounds */
--color-bg-secondary: #F5F3EF; /* Light warm background */
--color-bg-light: #E8E4D9; /* Cream background */
--color-bg-dark: #3A4B54; /* Slate background for dark sections */
--color-bg-accent: #E8E4D9; /* Cream accent background */
/* Button Colors */
--color-button-primary: #C97856; /* Terracotta primary button */
--color-button-primary-hover: #A85F42; /* Darker terracotta on hover */
--color-button-text: #ffffff; /* White button text */
--color-button-text-alt: #2B2520; /* Dark text for light buttons */
--color-button-border: #C97856; /* Terracotta button border */
/* Button Variations */
--color-button-secondary: #3A4B54; /* Slate secondary button */
--color-button-secondary-hover: #2A3740; /* Darker slate on hover */
--color-button-outline: #A39482; /* Taupe outline button */
--color-button-success: #28a745; /* Keep green for success actions */
/* Contact Form 7 & Form Colors */
--color-form-bg: #F5F3EF; /* Light warm form background */
--color-form-border: #A39482; /* Taupe form borders */
--color-form-text: #2B2520; /* Dark text in forms */
--color-form-error: #CF0404; /* Red for errors */
--color-form-focus: #C97856; /* Terracotta focus state */
/* Border Colors */
--color-border-light: #E8E4D9; /* Cream light borders */
--color-border-medium: #A39482; /* Taupe medium borders */
--color-border-dark: #3A4B54; /* Slate dark borders */
/* Header Colors */
--color-header-h1: #3A4B54; /* Slate for H1 */
--color-header-h2: #3A4B54; /* Slate for H2 */
--color-header-h3: #2B2520; /* Dark brown for H3 */
--color-header-h4: #2B2520; /* Dark brown for H4 */
--color-header-h5: #6B6158; /* Medium brown for H5 */
--color-header-h6: #6B6158; /* Medium brown for H6 */
/* Link Colors */
--color-link: #C97856; /* Terracotta links */
--color-link-hover: #3A4B54; /* Slate on hover */
--color-link-footer: #E8E4D9; /* Cream footer links */
--color-link-footer-hover: #C97856; /* Terracotta footer link hover */
/* Status Colors */
--color-success: #28a745; /* Green for success */
--color-warning: #f5b901; /* Yellow for warnings */
--color-error: #CF0404; /* Red for errors */
--color-info: #3A4B54; /* Slate for info */
/* Typography - Font Families */
--font-body: Georgia, 'Times New Roman', serif; /* Body text font - Classic serif */
--font-heading: 'Playfair Display', Georgia, serif; /* Heading font - Elegant serif */
--font-heading-h2: 'Reem Kufi', sans-serif; /* H2 heading font - Modern sans-serif */
/* Additional colors for enhanced grid and icon blocks */
--color-white: #ffffff; /* Pure white */
--color-light-gray: #F5F3EF; /* Light warm grey */
/* Border radius variables */
--border-radius-small: 4px;
--border-radius-medium: 8px;
--border-radius-large: 16px;
/* Background variations for grid items */
--color-background-light: #F5F3EF; /* Light warm background */
--color-background-cream: #E8E4D9; /* Cream background */
--color-background-beige: #D4C4A8; /* Beige background */
}
/* Aliases used by the ported component rules (custom/styles.css
referenced these names without defining them in :root) */
:root {
--color-slate: var(--color-secondary);
--color-terracotta: var(--color-primary);
--color-terracotta-light: var(--color-primary-light);
}
/* ============================================================
2. PORTED FROM vplaster2026
============================================================ */
/* ---------- Base typography (style.css) ---------- */
body {
line-height: 1.6;
font-family: var(--font-body);
font-size: 16px;
color: #333333;
background-color: var(--color-bg-primary);
}
.content-block { width: 100%; max-width: 1240px; padding: 3em 1em; margin: 0 auto; box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); clear: both; font-weight: 500; }
h1 { font-size: clamp(1.8rem, 5.5vw, 2.9rem); font-weight: bold; margin: .5em 0; color: var(--color-header-h1); }
h2 {
font-family: var(--font-heading-h2);
font-size: clamp(1.5rem, 5vw, 2.4rem);
color: var(--color-header-h2);
margin-bottom: .5em;
font-weight: 600;
}
/* h3 used to run to 2rem against h2's 2.4rem — barely a step, and on the service
pages, where the section h2 is clamped at 2rem below 1067px, the two were
*exactly* the same size. A subheading that matches its own section heading
stops being a subheading. Held well clear of h2 and well above h4. */
h3 { font-size: clamp(1.3rem, 2.8vw, 1.75rem); margin-bottom: .3em; color: var(--color-header-h3); }
/* Headings had no top margin anywhere, so a heading inside prose sat 15px below
the previous paragraph and 8px above its own — closer to the text it was
*not* about. Space goes above a heading, not below, and only when something
precedes it: a heading that opens a section still starts flush. */
:is(p, ul, ol, dl, blockquote, table, figure, pre) + :is(h2, h3, h4, h5) { margin-top: 1.9em; }
h4 { font-size: clamp(1.1rem, 4vw, 1.4rem); color: var(--color-header-h4); margin-bottom: .1em; }
h5 { font-size: clamp(1rem, 3vw, 1.2rem); color: var(--color-header-h5); font-style: italic; line-height: 1.4; }
h6 { font-size: clamp(0.6rem, 2.5vw, 0.7rem); color: var(--color-header-h6); }
b, strong { font-weight: 600; }
p { margin-bottom: 15px; line-height: 1.6; }
a { color: var(--color-link); font-weight: bold; text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: none; }
img { max-width: 100%; height: auto; }
blockquote {
padding: 2em;
color: var(--color-secondary);
width: 100%;
max-width: 900px;
margin: .5em auto;
box-sizing: border-box;
background: var(--color-bg-secondary);
font-size: 1.2em;
line-height: 1.3;
}
/* Prose lists (scoped so nav / footer lists stay clean) */
.vpc-page-content ul, .vpc-page-content ol, .project-description-content ul, .project-description-content ol, .service-content ul, .service-content ol, .finish-description ul, .finish-description ol, .project-editor-content ul, .project-editor-content ol {
list-style: disc;
line-height: 1.5;
font-size: 1.05em;
margin: 1em 0 1em 2em;
color: var(--color-secondary);
}
.vpc-page-content ol, .project-description-content ol, .service-content ol, .finish-description ol, .project-editor-content ol {
list-style: decimal;
}
/* ---------- Buttons ---------- */
.btn {
display: inline-block;
padding: 0.875rem 2rem;
text-decoration: none;
border-radius: var(--border-radius-small);
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid transparent;
cursor: pointer;
font-family: var(--font-heading-h2);
}
.btn-primary { background: var(--color-terracotta); color: var(--color-text-white); }
.btn-primary:hover {
background: var(--color-slate);
color: var(--color-text-white);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.btn-secondary { background: var(--color-white); color: var(--color-slate); border-color: var(--color-slate); }
.btn-secondary:hover { background: var(--color-slate); color: var(--color-text-white); transform: translateY(-2px); }
.btn i { vertical-align: middle; margin-left: 0.5rem; }
/* ---------- Hero gradient fallbacks (no hero image set) ---------- */
.project-hero-gradient, .finish-hero-gradient, .service-hero-gradient {
background-image: linear-gradient(135deg, #2A3740 0%, #3A4B54 55%, #C97856 100%);
}
/* ============================================================
Services — single template
============================================================ */
.single-service-wrapper { background: var(--color-bg-primary); }
.service-hero {
position: relative;
min-height: 400px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
.service-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Lightened from 0.85/0.75, which reduced every hero photograph to an
orange haze — the domed ceiling at The Arches was unrecognisable under
it. Matches the contact and enquiries heroes. Titles keep their
text-shadow, which is what carries legibility. */
background: linear-gradient(135deg, rgba(42, 55, 64, 0.58) 0%, rgba(58, 75, 84, 0.34) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.service-hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 3rem 1rem;
max-width: 900px;
margin: 0 auto;
}
.service-title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 4rem);
color: var(--color-text-white);
margin: 0 0 1.5rem 0;
font-weight: 600;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.service-excerpt {
font-size: clamp(1.1rem, 2vw, 1.4rem);
color: var(--color-text-white);
line-height: 1.6;
margin: 0;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
/* .service-hero-thumb used to be emitted on the single service page too, where
the hero is painted as a section background and the ![]()
was redundant — so
it was hidden. The single page no longer emits it; the only thing left
carrying the class is the archive card, which the rule was blanking out. */
.service-card-image a { display: block; height: 100%; }
/* The width limit lives on the .content-block wrappers inside main now, so a
section can opt out of it and run the full width of the page. */
.single-service-content { max-width: none; margin: 0; }
/* Stacked content-blocks would each contribute their own 3em top and bottom, so
the gap either side of the band would double. Sections already carry their own
4rem, so the inner blocks only need the side padding. */
.single-service-content > .content-block { padding-top: 0; padding-bottom: 0; }
.single-service-content > .content-block:first-child { padding-top: 3em; }
.single-service-content > .content-block:last-child { padding-bottom: 3em; }
.service-included > .content-block { padding-top: 0; padding-bottom: 0; }
.service-description, .service-included, .service-process, .service-related-finishes, .service-related-projects {
margin-bottom: 4rem;
}
/* The list of what a service covers is a different kind of thing from the prose
above it — a spec rather than an argument — so it sits on its own ground
instead of running on down the same white page. */
.service-included {
/* Cream, not --color-bg-secondary. That grey is #F5F3EF against a white page
— a four per cent step, which reads as no change at all. Cream is the
palette's actual panel ground and is already what the Quick Info box and
the characteristic tiles sit on, so this matches something rather than
introducing a shade of its own. */
background: var(--color-cream);
/* Square and edge to edge: it spans the page now, and a corner radius on a
full-width band reads as a card that has been stretched. Same reasoning as
the closing banner. */
border-radius: 0;
padding: 4rem 0;
margin-bottom: 4rem;
}
.service-included h2 { margin-top: 0; }
@media (max-width: 600px) { .service-included { padding: 2.5rem 0; } }
.service-description h2, .service-included h2, .service-process h2, .service-related-finishes h2, .service-related-projects h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 3vw, 2.5rem);
color: var(--color-header-h2);
margin-bottom: 2rem;
text-align: center;
}
.service-content, .included-content { max-width: 900px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; }
/* The opening paragraph carries the whole idea of the page — on Bespoke it is
the sentence that explains why the page exists at all — and it was set at the
same size as everything under it. Every service page opens h2 then paragraph,
so first-of-type lands on the right one. Leading comes down as the size goes
up; 1.8 at this size reads as loose. */
.service-content > p:first-of-type {
font-size: 1.45rem;
line-height: 1.55;
color: var(--color-secondary);
margin-bottom: 1.4em;
}
@media (max-width: 600px) { .service-content > p:first-of-type { font-size: 1.25rem; } }
.included-content ul { list-style: none; padding: 0; margin: 0; }
.included-content li { padding: 0.75rem 0; padding-left: 2rem; position: relative; }
/* The tick is drawn, not typed. Sized and positioned to sit where the ✓
character did, so the list measure is unchanged. */
.included-content .tick {
position: absolute;
left: 0;
top: 1.05rem;
width: 1.15rem;
height: 1.15rem;
overflow: visible;
fill: none;
stroke: var(--color-primary);
stroke-width: 2.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.included-content li:before {
/* The character tick stays the default: .included-content is also used by the
Enquiries checklist, whose markup is written as plain HTML in the page and
gets no SVG. Removing this outright left that list with no marks at all.
Only lists that carry drawn ticks suppress it — by an explicit class rather
than :has(), so there is no chance of a doubled mark. */
content: "\2713";
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: bold;
font-size: 1.2rem;
}
/* Lists that carry a drawn tick suppress the character one. Must come after
the rule above: same specificity, so order decides it — and it did, the wrong
way round, which put two marks on every service item. */
.included-content-drawn li:before { content: ""; }
/* Six things VPC makes, shown as the things rather than listed as words. */
.covers-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.75rem;
margin-top: 2.5rem;
text-align: left;
}
/* A single card left alone on the last row is the stranded-card problem again.
Where the count leaves exactly one over, it takes the middle column. */
@media (min-width: 901px) {
.covers-grid > :last-child:nth-child(3n + 1) { grid-column: 2 / 3; }
}
@media (max-width: 900px) { .covers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .covers-grid { grid-template-columns: minmax(0, 1fr); } }
.cover-card {
display: flex;
flex-direction: column;
/* Slate, not white. A white caption box on the cream band was the brightest
thing on the card, so the eye went to the label rather than the work. Dark
underneath, the photograph is what lights up. */
background: var(--color-secondary-dark);
border-radius: var(--border-radius-small);
overflow: hidden;
text-decoration: none;
color: inherit;
font-weight: normal;
box-shadow: 0 4px 14px rgba(42, 55, 64, 0.10);
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.3s ease;
}
a.cover-card:hover, a.cover-card:focus-visible {
transform: translateY(-5px);
box-shadow: 0 12px 28px rgba(42, 55, 64, 0.18);
color: inherit;
}
.cover-card-image { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-secondary-dark); }
.cover-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
a.cover-card:hover .cover-card-image img { transform: scale(1.05); }
/* Colour development has no single job to point at — mixing to a sample is the
whole of it — so that card is text on the cream, not a photograph. */
.cover-card-text { padding: 1.15rem 1.25rem 1.35rem; }
.cover-card-text h3 { font-size: 1.15rem; margin: 0 0 0.35em; color: var(--color-cream); }
.cover-card-text p { font-size: 0.95rem; line-height: 1.55; color: rgba(232, 228, 217, 0.78); margin: 0; }
/* Colour development has no single job to point at, but it still gets the same
card so the grid stays a grid. */
@media (prefers-reduced-motion: reduce) {
.cover-card, .cover-card-image img { transition: none; }
a.cover-card:hover { transform: none; }
a.cover-card:hover .cover-card-image img { transform: none; }
}
/* Process Steps */
.process-steps {
display: grid;
/* auto-fit put four steps in a row of three and left the fourth on its own
beside two empty cells. The count now picks the columns; see the template. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.process-steps.process-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .process-steps, .process-steps.process-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .process-steps, .process-steps.process-cols-2 { grid-template-columns: minmax(0, 1fr); } }
.process-step {
background: var(--color-bg-secondary);
/* Left-aligned. At two across a card is around 500px wide, and centred body
text over that measure gives a ragged left edge with nothing to hang on —
the same reason the four-across cards on About Us were changed. */
text-align: left;
padding: 2rem;
border-radius: var(--border-radius-medium);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.step-icon {
width: 64px;
height: 64px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-terracotta), #B86846);
border-radius: 50%;
}
.step-icon i { font-size: 1.6rem; color: var(--color-text-white); }
.step-icon img { max-width: 100%; height: auto; }
.step-title {
font-family: var(--font-heading);
font-size: 1.4rem;
color: var(--color-primary);
margin-bottom: 0.6rem;
text-align: left;
}
.step-description { font-size: 1rem; line-height: 1.6; color: var(--color-text-primary); text-align: left; }
/* Related Finishes & Projects Grids */
.related-finishes-grid, .related-projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
/* ============================================================
Services — archive
============================================================ */
.archive-services-wrapper { background: var(--color-bg-primary); }
.services-archive-header {
background-image: linear-gradient(135deg, rgba(42, 55, 64, 0.58) 0%, rgba(58, 75, 84, 0.34) 100%), url('/images/site/services-hero.jpg');
background-size: cover;
background-position: center;
padding: 4rem 1rem;
text-align: center;
color: var(--color-text-white);
}
.services-archive-header .archive-title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 1.5rem;
color: var(--color-text-white);
}
.services-archive-header .archive-description {
font-size: 1.2rem;
line-height: 1.8;
max-width: 900px;
margin: 0 auto;
color: var(--color-text-white);
}
.services-archive-content { max-width: 1240px; margin: 0 auto; }
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.service-card {
background: var(--color-bg-secondary);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.service-card:hover { transform: translateY(-8px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.service-card-image { width: 100%; height: 250px; overflow: hidden; position: relative; }
.service-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.service-card:hover .service-card-image img { transform: scale(1.1); }
.service-placeholder-image {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.service-placeholder-image i { font-size: 60px; color: var(--color-text-white); }
.service-card-content { padding: 2rem; flex-grow: 1; display: flex; flex-direction: column; }
.service-card-title { font-family: var(--font-heading); font-size: 1.8rem; margin-bottom: 1rem; }
.service-card-title a { color: var(--color-text-primary); text-decoration: none; transition: color 0.3s ease; }
.service-card-title a:hover { color: var(--color-primary); }
.service-card-excerpt {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-secondary);
margin-bottom: 1.5rem;
flex-grow: 1;
}
.service-card-meta { margin-bottom: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border-light); }
.service-steps-count {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--color-text-secondary);
}
.service-steps-count i { color: var(--color-primary); }
.service-card-footer { margin-top: auto; }
.service-card-footer .btn {
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-sizing: border-box;
}
/* Services CTA Section */
.services-cta-section { background: var(--color-bg-secondary); padding: 4rem 1rem; margin-top: 3rem; }
.services-cta-content { text-align: center; max-width: 800px; margin: 0 auto; }
.services-cta-content h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--color-text-primary);
margin-bottom: 1rem;
}
.services-cta-content p { font-size: 1.2rem; color: var(--color-text-secondary); margin-bottom: 2rem; }
.cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* ============================================================
Finishes — single template
============================================================ */
.single-finish-wrapper { background: var(--color-bg-primary); }
.finish-hero {
position: relative;
min-height: 400px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
}
.finish-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Lightened from 0.85/0.75, which reduced every hero photograph to an
orange haze — the domed ceiling at The Arches was unrecognisable under
it. Matches the contact and enquiries heroes. Titles keep their
text-shadow, which is what carries legibility. */
background: linear-gradient(135deg, rgba(42, 55, 64, 0.58) 0%, rgba(58, 75, 84, 0.34) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.finish-hero-content { position: relative; z-index: 1; text-align: center; color: white; padding: 2rem; }
.finish-category {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
opacity: 0.9;
font-weight: 500;
}
.finish-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
margin: 0;
line-height: 1.2;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.finish-hero-content .finish-title { color: var(--color-text-white); }
/* Finish Overview Grid */
.finish-overview { margin-bottom: 3rem; }
/* Quick Info floats right and the copy runs past it, rather than a 2-column grid
that caps the copy for the whole page and leaves an empty strip below the box.
Paragraph measure is capped separately so full width does not mean long lines. */
.finish-overview-grid { display: block; }
.finish-overview-grid::after { content: ""; display: block; clear: both; }
.finish-description { font-size: 1.1rem; line-height: 1.8; }
.finish-description h2 { color: var(--color-slate); margin-top: 2rem; margin-bottom: 1rem; }
.finish-description p { margin-bottom: 1.5rem; }
/* Quick Info Sidebar */
.finish-quick-info { float: right; width: 320px; margin: 0 0 1.75rem 3rem; }
/* The global heading rule sets `clear: both`, which would drop every heading
below the floated Quick Info box and leave a hole beside it. */
.finish-description > h2, .finish-description > h3, .finish-description > h4 { clear: none; }
/* Cap the measure so full width does not mean unreadably long lines. Not `ch`:
on a 2rem heading 68ch is over 1600px, so it caps nothing. */
.finish-description > p, .finish-description > ul, .finish-description > ol,
.finish-band-text > p, .finish-band-text > ul, .finish-band-text > ol { max-width: 44rem; }
.finish-description > h2, .finish-description > h3 { max-width: 44rem; }
.quick-info-box {
background: var(--color-cream);
padding: 2rem;
border-radius: var(--border-radius-medium);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.quick-info-box h3 {
color: var(--color-slate);
margin-top: 0;
margin-bottom: 1.5rem;
font-size: 1.5rem;
border-bottom: 2px solid var(--color-terracotta);
padding-bottom: 0.5rem;
}
.info-item { margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.info-item:last-child { margin-bottom: 0; }
.info-item .info-label {
font-weight: 600;
color: var(--color-slate);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
}
.info-item .info-value { color: var(--color-text-primary); font-size: 1rem; }
.finish-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.finish-category-tag {
display: inline-block;
background: var(--color-terracotta);
color: white;
padding: 0.4rem 0.8rem;
border-radius: var(--border-radius-small);
font-size: 0.85rem;
text-decoration: none;
transition: all 0.3s ease;
font-weight: 500;
}
.finish-category-tag:hover { background: var(--color-slate); color: white; transform: translateY(-2px); }
/* Characteristics Section */
.finish-characteristics {
background: white;
padding: 3rem;
border-radius: var(--border-radius-medium);
margin-bottom: 3rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.finish-characteristics h2 { color: var(--color-slate); margin-top: 0; margin-bottom: 2rem; }
.characteristics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.characteristic-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
background: var(--color-cream);
border: 2px solid rgba(201, 120, 86, 0.15);
border-radius: var(--border-radius-medium);
transition: all 0.3s ease;
}
.characteristic-item:hover {
border-color: var(--color-terracotta);
box-shadow: 0 4px 12px rgba(201, 120, 86, 0.15);
transform: translateY(-2px);
}
.characteristic-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--color-terracotta), #B86846);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.characteristic-icon i { font-size: 15px; color: white; }
.characteristic-text { flex: 1; font-size: 1rem; line-height: 1.6; color: var(--color-slate); font-weight: 500; }
/* Applications Section */
.finish-applications {
/* Full width, square. It was a rounded cream box inset in the content block;
edge to edge it reads as a band of the page, the same as What's Included on
the service pages. */
background: var(--color-cream);
padding: 4rem 0;
border-radius: 0;
margin: 0 0 3rem 0;
}
.finish-applications > .content-block { padding-top: 0; padding-bottom: 0; }
.single-finish-content > .content-block { padding-top: 0; padding-bottom: 0; }
.single-finish-content > .content-block:first-child { padding-top: 3em; }
.single-finish-content > .content-block:last-child { padding-bottom: 3em; }
@media (max-width: 600px) { .finish-applications { padding: 2.5rem 0; } }
.finish-applications h2 { color: var(--color-slate); margin-top: 0; margin-bottom: 2rem; }
.applications-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.application-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
background: white;
border: 2px solid rgba(201, 120, 86, 0.15);
border-radius: var(--border-radius-medium);
transition: all 0.3s ease;
}
.application-item:hover {
border-color: var(--color-terracotta);
box-shadow: 0 4px 12px rgba(201, 120, 86, 0.15);
transform: translateY(-2px);
}
.application-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
background: linear-gradient(135deg, var(--color-terracotta), #B86846);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.application-icon i { font-size: 15px; color: white; }
.application-text { flex: 1; font-size: 1rem; line-height: 1.6; color: var(--color-slate); font-weight: 500; }
/* Technical Specifications Section */
.finish-technical {
/* White on a white page with a barely-there shadow read as nothing at all.
A hairline and a little more air is enough to say "this is the spec". */
background: var(--color-bg-primary);
padding: 3rem 3rem 2.25rem;
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius-medium);
margin-bottom: 3rem;
box-shadow: none;
}
@media (max-width: 600px) { .finish-technical { padding: 2rem 1.5rem 1.25rem; } }
/* Read as a data sheet rather than a bulleted list. The label was set bold and
dark, the same weight as its own value, so the two competed on every row;
it is now a quiet small-caps caption above the thing it names. */
.technical-content h3 {
color: var(--color-slate);
margin-top: 0;
margin-bottom: 0.6rem;
font-size: 1.6rem;
}
.technical-content h3::after {
content: "";
display: block;
width: 2.75rem;
height: 2px;
margin-top: 0.85rem;
background: var(--color-primary);
}
.technical-content ul {
list-style: none;
padding: 0;
margin: 1.75rem 0 0;
color: var(--color-text-primary);
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 3.5rem;
}
@media (max-width: 700px) { .technical-content ul { grid-template-columns: minmax(0, 1fr); } }
.technical-content li {
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: 1rem 0;
font-size: 1.05rem;
line-height: 1.5;
border-bottom: 1px solid var(--color-border-light);
}
.technical-content strong {
font-family: var(--font-heading-h2);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--color-text-secondary);
display: block;
min-width: 0;
margin: 0;
}
/* Related Projects (single finish) */
.finish-projects { margin-bottom: 3rem; }
.finish-projects h2 { color: var(--color-slate); margin-bottom: 2rem; text-align: center; }
/* ============================================================
Finishes — archive
============================================================ */
.archive-finishes-wrapper { background: var(--color-bg-primary); }
.finishes-archive-header {
background-image: linear-gradient(135deg, rgba(42, 55, 64, 0.58) 0%, rgba(58, 75, 84, 0.34) 100%), url('/images/site/finishes-hero.jpg');
background-size: cover;
background-position: center;
color: white;
padding: 4rem 2rem;
text-align: center;
margin-bottom: 3rem;
}
.finishes-archive-header .archive-title {
color: white;
margin: 0 0 1rem 0;
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-family: var(--font-heading);
}
.finishes-archive-header .archive-description {
font-size: 1.1rem;
max-width: 800px;
margin: 0 auto;
opacity: 0.95;
line-height: 1.6;
color: white;
}
.finishes-archive-content { max-width: 1240px; margin: 0 auto; }
/* Filter Categories (finishes) */
.finishes-filter { background: white; padding: 2rem 0; margin-bottom: 3rem; border-bottom: 1px solid #eee; }
.filter-categories { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
/* Finishes Grid */
.finishes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.finish-card {
background: white;
border-radius: var(--border-radius-medium);
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.finish-card:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); }
.finish-card-link { text-decoration: none; color: inherit; display: block; }
.finish-card-image { position: relative; height: 300px; overflow: hidden; background: var(--color-cream); }
.finish-card-image a { display: block; width: 100%; height: 100%; }
.finish-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.finish-card:hover .finish-card-image img { transform: scale(1.05); }
.finish-thumb { width: 100%; height: 100%; object-fit: cover; }
.finish-placeholder, .finish-placeholder-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-cream);
}
.finish-placeholder i, .finish-placeholder-image i { font-size: 4rem; color: var(--color-slate); opacity: 0.3; }
.finish-category-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--color-terracotta);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--border-radius-small);
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.finish-card-content { padding: 2rem; flex: 1; display: flex; flex-direction: column; }
.finish-card-title {
margin: 0 0 1rem 0;
font-size: 1.5rem;
font-family: var(--font-heading);
color: var(--color-slate);
}
.finish-card-title a { color: var(--color-slate); text-decoration: none; transition: color 0.3s ease; }
.finish-card-title a:hover { color: var(--color-terracotta); }
.finish-card-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #eee;
}
.meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; color: var(--color-text-secondary); }
.meta-item i { font-size: 0.9rem; color: var(--color-terracotta); }
.finish-card-excerpt { margin-bottom: 1rem; line-height: 1.6; color: var(--color-text-primary); }
.finish-card-features { list-style: none; padding: 0; margin: 0 0 1.5rem 0; flex: 1; }
.finish-card-features li { padding: 0.5rem 0 0.5rem 1.5rem; position: relative; font-size: 0.9rem; line-height: 1.4; }
.finish-card-features li:before {
content: "\2022";
position: absolute;
left: 0;
color: var(--color-terracotta);
font-weight: bold;
}
.finish-card-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--color-terracotta);
color: white;
text-decoration: none;
border-radius: var(--border-radius-small);
font-weight: 500;
transition: all 0.3s ease;
align-self: flex-start;
}
.finish-card-btn:hover { background: var(--color-slate); color: white; transform: translateX(5px); }
.finish-card-btn i { font-size: 0.9rem; }
/* Finish application line (used inside finish cards) */
.finish-application {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-terracotta);
font-size: 0.9rem;
margin: 0;
}
.finish-application i { font-size: 0.9rem; }
/* Nested finish-card variant inside project pages */
.project-finishes-section { margin: 4rem 0; }
.project-finishes-section h2 {
font-family: var(--font-heading);
font-size: 2.2rem;
color: var(--color-slate);
margin: 0 0 2rem 0;
text-align: center;
}
.project-finishes-section .finishes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-bottom: 0;
}
.project-finishes-section .finish-card-image { height: 200px; }
.project-finishes-section .finish-placeholder {
background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-terracotta-light) 100%);
}
.project-finishes-section .finish-placeholder i { color: var(--color-terracotta); opacity: 0.5; }
.project-finishes-section .finish-card-content { padding: 1.5rem; }
.project-finishes-section .finish-card-title { font-size: 1.3rem; margin: 0 0 0.5rem 0; }
/* No Finishes Found */
.no-finishes-found { text-align: center; padding: 4rem 2rem; }
.no-finishes-found h2 { color: var(--color-slate); margin-bottom: 1rem; }
.no-finishes-found p { font-size: 1.1rem; margin-bottom: 2rem; color: var(--color-text-secondary); }
/* ============================================================
Projects — single template
============================================================ */
.single-project-wrapper { background: var(--color-bg-primary); }
.project-hero {
position: relative;
min-height: 300px;
background-color: #e8e4d9;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0;
}
.project-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Raised from 0.35 and given a centre scrim: the legacy header images used to
carry their own baked-in darkening, and now that those have been replaced
with the undarkened originals the pale hero text needs real contrast of its
own. The radial layer sits under the text only, so bright images stay bright
at the edges. */
background:
radial-gradient(ellipse 60% 80% at 50% 50%, rgba(30, 38, 44, 0.42) 0%, rgba(30, 38, 44, 0) 100%),
linear-gradient(135deg, rgba(58, 75, 84, 0.42) 0%, rgba(201, 120, 86, 0.42) 100%);
display: flex;
align-items: center;
justify-content: center;
}
.project-hero-gradient .project-hero-overlay { background: none; }
.project-hero-content { position: relative; z-index: 2; text-align: center; color: var(--color-cream); padding: 2rem; text-shadow: 0 1px 12px rgba(20, 26, 30, 0.55); }
.project-category {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
color: #3a4b54;
opacity: 0.9;
}
.project-title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-family: var(--font-heading);
font-weight: 700;
color: #3a4b54;
margin: 0 0 1rem 0;
line-height: 1.2;
}
.project-location-hero {
font-size: 1.1rem;
color: #3a4b54;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.project-location-hero i { font-size: 1.1rem; }
/* Gallery + Project Details Split Section (50/50) */
.project-header-split { background-color: #f9f9f9; padding: 2rem 0; margin-bottom: 0; }
.header-split-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: start; }
.header-gallery-column { position: sticky; top: 2rem; }
.header-gallery-wrapper {
position: relative;
width: 100%;
height: auto;
aspect-ratio: 4/3;
background: #fff;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.header-gallery-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease;
display: block;
pointer-events: none;
}
.header-gallery-item.active { opacity: 1; z-index: 1; pointer-events: auto; }
.header-gallery-item img { width: 100%; height: 100%; object-fit: contain; }
.header-gallery-thumbs { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.gallery-thumb {
width: 80px;
height: 80px;
border: 3px solid transparent;
border-radius: var(--border-radius-small);
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease;
background: none;
padding: 0;
}
.gallery-thumb:hover { border-color: var(--color-terracotta); transform: translateY(-2px); }
.gallery-thumb.active { border-color: var(--color-slate); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Right Column - Project Details */
.header-details-column { padding: 0; background: transparent; }
.header-details-column h2 {
font-family: var(--font-heading);
font-size: 2.5rem;
color: var(--color-slate);
margin-bottom: 2rem;
font-weight: 400;
}
/* Project Info Grid - Compact */
.project-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.info-card {
background: #e8e4d9;
border-radius: var(--border-radius-medium);
padding: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.info-card-wide { grid-column: span 2; }
.info-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.4);
border-radius: 6px;
}
.info-icon i { font-size: 15px; color: var(--color-slate); opacity: 0.7; }
.info-content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.info-card .info-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6B5D4F;
font-weight: 600;
display: block;
opacity: 0.7;
}
.info-card .info-value { font-size: 0.95rem; color: var(--color-slate); font-weight: 500; line-height: 1.3; }
.info-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.info-tag {
display: inline-block;
padding: 0.3rem 0.75rem;
background: #fff;
color: var(--color-slate);
text-decoration: none;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
transition: all 0.2s ease;
border: 1px solid rgba(58, 75, 84, 0.1);
}
.info-tag:hover { background: var(--color-slate); color: #fff; border-color: var(--color-slate); }
/* Project Description - Full Width Section */
.project-description-section { background: #fff; padding: 3rem 0 0 0; margin-bottom: 0; }
.project-description-content {
max-width: 900px;
margin: 0 auto;
font-size: 1.1rem;
line-height: 1.8;
color: var(--color-slate);
}
.project-description-content p { margin-bottom: 1.5rem; line-height: 1.8; }
.project-description-content p:last-child { margin-bottom: 0; }
/* Project Highlights Section */
.project-highlights {
margin: 3rem 0;
padding: 2rem;
background: var(--color-cream);
border-radius: var(--border-radius-medium);
}
.project-highlights h2 {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--color-slate);
margin: 0 0 2rem 0;
text-align: center;
}
.highlights-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }
.highlight-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: white;
border-radius: 6px;
border-left: 4px solid var(--color-terracotta);
transition: all 0.3s ease;
}
.highlight-item:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.highlight-icon {
flex-shrink: 0;
width: 32px;
height: 32px;
background: var(--color-terracotta);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.highlight-icon i { color: white; font-size: 1rem; }
.highlight-text { flex: 1; color: var(--color-slate); line-height: 1.6; }
/* Project Content Sections - Tabs & Accordion */
.project-content-sections { margin: 3rem 0; }
.project-content-sections .content-block { padding: 0; }
.project-content-sections-title {
font-family: var(--font-heading-h2);
font-size: 2rem;
color: var(--color-slate);
margin-bottom: 2rem;
}
.project-tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
border-bottom: 3px solid var(--color-cream);
}
.project-tab-button {
background: transparent;
border: none;
padding: 1rem 1.5rem;
font-size: 1rem;
font-weight: 600;
font-family: var(--font-heading-h2);
color: var(--color-slate);
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
margin-bottom: -3px;
position: relative;
}
.project-tab-button:hover { color: var(--color-terracotta); background: rgba(201, 120, 86, 0.05); }
.project-tab-button.active {
color: var(--color-terracotta);
border-bottom-color: var(--color-terracotta);
background: rgba(201, 120, 86, 0.05);
}
/* Without the script, no panel ever gets .active — which hid every photograph on
a project page, 38 of them on JAK's. The first panel is shown by default and
the script marks the container ready, at which point .active takes over. So JS
changes which panel is open rather than being required to open one at all. */
.project-tab-content { display: none; animation: vpcFadeIn 0.3s ease; }
.project-tabs-content:not(.tabs-ready) .project-tab-content:first-child { display: block; }
.project-tabs-content.tabs-ready .project-tab-content.active { display: block; }
@keyframes vpcFadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Gallery Section */
.project-gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.project-gallery-item {
position: relative;
overflow: hidden;
border-radius: var(--border-radius-medium);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
display: block;
}
.project-gallery-item:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.project-gallery-item img {
width: 100%;
height: 300px;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.project-gallery-item:hover img { transform: scale(1.05); }
.project-gallery-item-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
color: white;
padding: 1rem;
font-size: 0.9rem;
opacity: 0;
transition: opacity 0.3s ease;
}
.project-gallery-item:hover .project-gallery-item-title { opacity: 1; }
/* Editor Section */
.project-editor-content { padding: 2rem 0; line-height: 1.8; }
.project-editor-content img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius-medium);
margin: 1.5rem 0;
}
.project-editor-content iframe, .project-editor-content video {
max-width: 100%;
border-radius: var(--border-radius-medium);
margin: 1.5rem 0;
}
/* Accordion - Mobile */
.project-accordion { display: none; }
.project-accordion-item {
border: 2px solid var(--color-cream);
border-radius: var(--border-radius-medium);
margin-bottom: 1rem;
overflow: hidden;
}
.project-accordion-header {
background: var(--color-cream);
padding: 1rem 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
font-weight: 600;
color: var(--color-slate);
}
.project-accordion-header:hover { background: var(--color-terracotta); color: white; }
.project-accordion-header.active { background: var(--color-terracotta); color: white; }
.project-accordion-icon { font-size: 1.2rem; transition: transform 0.3s ease; }
.project-accordion-header.active .project-accordion-icon { transform: rotate(180deg); }
.project-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 1.5rem; }
.project-accordion:not(.accordion-ready) .project-accordion-content { max-height: none; padding: 1.5rem; }
.project-accordion-content.active { max-height: 5000px; padding: 1.5rem; }
/* Related Projects Section */
.related-projects {
margin: 4rem 0;
padding: 3rem 2rem;
background: var(--color-cream);
border-radius: var(--border-radius-medium);
}
.related-projects h2 {
font-family: var(--font-heading);
font-size: 2.2rem;
color: var(--color-slate);
margin: 0 0 2rem 0;
text-align: center;
}
.related-projects .projects-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 0;
}
/* ============================================================
Projects — cards & archive
============================================================ */
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2.5rem;
margin-bottom: 3rem;
}
.project-card {
background: white;
border-radius: var(--border-radius-medium);
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.project-card:hover { transform: translateY(-10px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
/* Featured: brand bronze (the palette's highlight metal) instead of WP's gold */
.project-card.featured-project {
border: 2px solid var(--color-bronze);
box-shadow: 0 4px 18px rgba(139, 111, 71, 0.25);
}
.project-card-link { text-decoration: none; color: inherit; display: block; }
.project-card-image { position: relative; height: 250px; overflow: hidden; background: var(--color-cream); }
.project-card-image a { display: block; width: 100%; height: 100%; }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.project-card:hover .project-card-image img { transform: scale(1.1); }
.project-thumb { width: 100%; height: 100%; object-fit: cover; }
.project-placeholder, .project-placeholder-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-cream) 0%, var(--color-terracotta-light) 100%);
}
.project-placeholder i, .project-placeholder-image i { font-size: 4rem; color: var(--color-terracotta); opacity: 0.4; }
.featured-badge-overlay {
position: absolute;
top: 1rem;
right: 1rem;
background: linear-gradient(135deg, #A3855C 0%, var(--color-bronze) 100%);
color: var(--color-text-white);
text-shadow: 0 1px 2px rgba(43, 37, 32, 0.35);
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 0.4rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.featured-badge-overlay i { font-size: 0.9rem; }
.project-type-badge {
position: absolute;
bottom: 1rem;
left: 1rem;
background: var(--color-terracotta);
color: white;
padding: 0.4rem 0.8rem;
border-radius: var(--border-radius-small);
font-size: 0.85rem;
font-weight: 500;
}
.project-card-content { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.project-card-title {
font-family: var(--font-heading);
font-size: 1.5rem;
margin: 0 0 1rem 0;
color: var(--color-slate);
}
.project-card-title a { color: var(--color-slate); text-decoration: none; transition: color 0.3s ease; }
.project-card-title a:hover { color: var(--color-terracotta); }
.project-card-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(58, 75, 84, 0.1);
}
.project-card-excerpt { color: var(--color-slate); line-height: 1.6; margin: 0 0 1rem 0; flex: 1; }
.project-card-finishes {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--color-cream);
border-radius: 6px;
font-size: 0.9rem;
}
.finishes-label { font-weight: 600; color: var(--color-slate); margin-right: 0.5rem; }
.finishes-list { color: var(--color-terracotta); }
.finishes-more { color: var(--color-slate); font-style: italic; margin-left: 0.5rem; opacity: 0.7; }
.project-card-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: var(--color-terracotta);
color: white;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: all 0.3s ease;
align-self: flex-start;
}
.project-card-btn:hover { background: var(--color-slate); color: white; transform: translateX(5px); }
.project-card-btn i { font-size: 0.9rem; transition: transform 0.3s ease; }
.project-card-btn:hover i { transform: translateX(3px); }
/* Project location / year (related project cards) */
.project-location, .project-year {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--color-slate);
font-size: 0.9rem;
margin: 0.5rem 0;
}
.project-location i, .project-year i { color: var(--color-terracotta); font-size: 0.9rem; }
/* Archive Header */
.projects-archive-header {
background-image: linear-gradient(135deg, rgba(42, 55, 64, 0.58) 0%, rgba(58, 75, 84, 0.34) 100%), url('/images/site/projects-hero.jpg');
background-size: cover;
background-position: center;
padding: 4rem 0;
text-align: center;
margin-bottom: 0;
}
.projects-archive-header .content-block { padding-top: 0; padding-bottom: 0; }
.projects-archive-header .archive-title {
font-family: var(--font-heading);
font-size: clamp(2.5rem, 5vw, 4rem);
color: #fff;
margin: 0 0 1rem 0;
}
.projects-archive-header .archive-description {
font-size: 1.2rem;
color: #fff;
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
opacity: 0.95;
}
/* Filter Section */
.projects-filter {
background: var(--color-cream);
padding: 2rem 0;
margin-bottom: 0;
border-top: 3px solid var(--color-terracotta);
border-bottom: 3px solid var(--color-terracotta);
}
.projects-filter .content-block { padding-top: 0; padding-bottom: 0; }
.filter-section { margin-bottom: 1.5rem; }
.filter-section:last-child { margin-bottom: 0; }
.filter-heading { font-family: var(--font-heading); font-size: 1.3rem; color: var(--color-slate); margin: 0 0 1rem 0; }
.projects-filter .filter-categories { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; }
.filter-btn {
display: inline-block;
padding: 0.6rem 1.2rem;
background: white;
color: var(--color-slate);
border: 2px solid var(--color-slate);
border-radius: 6px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.filter-btn:hover {
background: var(--color-slate);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.filter-btn.active { background: var(--color-terracotta); color: white; border-color: var(--color-terracotta); }
.filter-btn-finish { border-color: var(--color-terracotta); color: var(--color-terracotta); }
.filter-btn-finish:hover { background: var(--color-terracotta); border-color: var(--color-terracotta); color: white; }
.projects-archive-content { margin-bottom: 3rem; }
/* No Projects Found */
.no-projects-found {
text-align: center;
padding: 4rem 2rem;
background: var(--color-cream);
border-radius: var(--border-radius-medium);
}
.no-projects-found h2 {
font-family: var(--font-heading);
font-size: 2rem;
color: var(--color-slate);
margin: 0 0 1rem 0;
}
.no-projects-found p { font-size: 1.1rem; color: var(--color-slate); margin: 0 0 2rem 0; }
/* Bottom CTA Section */
.projects-bottom-cta {
background: var(--color-cream);
padding: 3rem 0;
margin-top: 4rem;
border-top: 3px solid var(--color-terracotta);
}
.projects-bottom-cta .content-block { padding-top: 0; padding-bottom: 0; }
.cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.cta-box {
background: white;
padding: 2rem;
border-radius: var(--border-radius-medium);
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.cta-box:hover { transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.cta-box h2 { font-family: var(--font-heading); font-size: 1.8rem; color: var(--color-slate); margin: 0 0 1rem 0; }
.cta-box p { color: var(--color-slate); line-height: 1.6; margin: 0 0 1.5rem 0; }
/* ============================================================
CTA banners (gradients baked in from the WP inline styles)
============================================================ */
.project-cta {
margin: 4rem 0 2rem 0;
padding: 4rem 2rem;
background: #2A3B44;
background: linear-gradient(135deg, #2A3B44 0%, #3A4B54 50%, #4A5B64 100%);
border-radius: 0; /* square: it spans the page, so a corner radius made it read as a card */
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.project-cta::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, transparent 0%, rgba(201, 120, 86, 0.15) 100%);
pointer-events: none;
z-index: 0;
}
.project-cta .cta-content { position: relative; z-index: 10; }
.finish-cta {
/* Same treatment as the front page and the service pages: full width, square,
the slate gradient. It used to be a rounded box inset inside the content
block, so the page ended on a card rather than on a call. */
background: #2A3B44;
background: linear-gradient(135deg, #2A3B44 0%, #3A4B54 50%, #4A5B64 100%);
color: white;
padding: 4rem 2rem;
border-radius: 0;
text-align: center;
/* Same 2rem below as the front page and service banners, so the footer does
not butt straight up against it. */
margin: 4rem 0 2rem 0;
position: relative;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.finish-cta::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(201, 120, 86, 0.15) 100%);
pointer-events: none;
z-index: 0;
}
.finish-cta .cta-content { position: relative; z-index: 1; }
/* .service-cta removed — service pages now use the same closing banner as the front page. */
.project-cta .cta-content h2, .finish-cta h2, .finish-cta .cta-content h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 5vw, 3rem);
color: #ffffff;
margin: 0 0 1.5rem 0;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.project-cta .cta-content p, .finish-cta p, .finish-cta .cta-content p {
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
color: #ffffff;
margin: 0 auto 2.5rem auto;
max-width: 700px;
line-height: 1.7;
font-weight: 400;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.project-cta .cta-buttons, .finish-cta .cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.project-cta .btn-primary, .finish-cta .btn-primary {
background: #C97856;
color: #ffffff;
border: 2px solid #C97856;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
box-shadow: 0 4px 12px rgba(201, 120, 86, 0.4);
text-decoration: none;
}
.project-cta .btn-primary:hover, .finish-cta .btn-primary:hover {
background: #B86846;
border-color: #B86846;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(201, 120, 86, 0.5);
}
.project-cta .btn-secondary, .finish-cta .btn-secondary {
background: transparent;
color: #ffffff;
border: 2px solid #ffffff;
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 600;
text-decoration: none;
}
.project-cta .btn-secondary:hover, .finish-cta .btn-secondary:hover {
background: #ffffff;
color: #3A4B54;
border-color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}
/* ============================================================
Ported responsive breakpoints
============================================================ */
@media (max-width: 1024px) {
.content-block { padding: 2em 1em; }
.finish-quick-info { float: none; width: auto; margin: 0 0 2rem 0; }
.finish-description > h2, .finish-description > h3, .finish-description > p,
.finish-description > ul, .finish-description > ol { max-width: none; }
.finish-band-text > p, .finish-band-text > ul, .finish-band-text > ol { max-width: none; }
.finishes-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
.projects-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; }
}
@media (max-width: 768px) {
.service-hero, .finish-hero { min-height: 300px; }
.project-hero { min-height: 300px; }
.finish-title { font-size: 2rem; }
.project-title { font-size: 2rem; }
.finish-category, .project-category { font-size: 0.8rem; }
.finish-characteristics, .finish-applications, .finish-technical { padding: 2rem; }
.characteristics-grid, .applications-grid { grid-template-columns: 1fr; }
.projects-grid, .finishes-grid, .services-grid { grid-template-columns: 1fr; gap: 2rem; }
.process-steps { grid-template-columns: 1fr; }
.related-finishes-grid, .related-projects-grid { grid-template-columns: 1fr; }
.header-split-grid { grid-template-columns: 1fr; gap: 2rem; }
.header-gallery-column { position: relative; top: 0; }
.header-details-column h2 { font-size: 1.5rem; }
.highlights-grid { grid-template-columns: 1fr; }
.project-finishes-section .finishes-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; }
.related-projects .projects-grid { grid-template-columns: 1fr; }
.project-info-grid { grid-template-columns: 1fr; }
.info-card-wide { grid-column: span 1; }
.project-description-section { padding: 2rem 0 0 0; }
.project-description-content { font-size: 1rem; }
.filter-categories { gap: 0.5rem; }
.filter-btn { font-size: 0.85rem; padding: 0.5rem 1rem; }
.cta-grid { grid-template-columns: 1fr; gap: 2rem; }
.cta-buttons { flex-direction: column; }
.cta-buttons .btn { width: 100%; box-sizing: border-box; text-align: center; }
/* Hide tabs, show accordion on mobile */
.project-tabs-nav { display: none; }
.project-tab-content { display: none !important; }
.project-accordion { display: block; }
.project-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.project-gallery-item img { height: 250px; }
}
@media (max-width: 480px) {
.service-card-image { height: 200px; }
.service-card-content, .finish-card-content, .quick-info-box { padding: 1.5rem; }
.finish-card-image { height: 250px; }
.finish-cta, .project-cta { padding: 3rem 1.5rem; }
.project-hero-content { padding: 1rem; }
.project-card-meta { flex-direction: column; gap: 0.5rem; }
.projects-archive-header { padding: 2rem 0; }
.projects-archive-header .archive-title { font-size: 2rem; }
.projects-archive-header .archive-description { font-size: 1rem; }
.info-card { padding: 0.75rem; gap: 0.5rem; }
.info-icon { width: 28px; height: 28px; }
.info-icon i { font-size: 13px; }
.project-gallery-grid { grid-template-columns: 1fr; }
.project-accordion-header { padding: 0.8rem 1rem; font-size: 0.95rem; }
}
/* ============================================================
3. VPC HUGO ADDITIONS
============================================================ */
/* ---------- Header & navigation ---------- */
.vpc-header { background: var(--color-bg-primary); box-shadow: 0 2px 8px rgba(42, 55, 64, 0.08); }
/* The logo sits tighter to the left edge than the nav does to the right, because
the mark carries no whitespace of its own. --vpc-logo-inset is the one number
to re-tune when the artwork changes; nothing else in the bar moves. */
/* The logo is the tallest thing in the bar, so it — not the padding — sets the
header height. The theme's 0.8em top and bottom was doing nothing but making
the mark small; spending it on the logo instead gives a third more mark at the
same 78px bar. --vpc-logo-height and the padding move together: they have to
add up to the same total. */
.vpc-header .wb-header-inner {
max-width: 1240px;
padding-left: calc(1.5em + var(--vpc-logo-inset, 1rem));
padding-top: 0.3em;
padding-bottom: 0.3em;
}
.vpc-header .wb-header-logo { display: flex; align-items: center; gap: 0.9em; }
.vpc-header .wb-header-logo img { max-height: var(--vpc-logo-height, 68px); width: auto; }
.vpc-strapline {
font-family: var(--font-heading-h2);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-secondary);
line-height: 1.3;
max-width: 220px;
}
.vpc-header .wb-header-nav > ul > li > a {
font-family: var(--font-heading-h2);
font-weight: 600;
color: var(--color-secondary);
padding: 0.5em 0;
display: inline-block;
}
.vpc-header .wb-header-nav > ul > li > a:hover, .vpc-header .wb-header-nav > ul > li > a.active {
color: var(--color-primary);
}
.vpc-header .wb-header-nav a i { font-size: 0.7em; margin-left: 0.25em; opacity: 0.7; }
/* Dropdown menus */
.has-dropdown { position: relative; }
/* selector strength note: header.css sets `.wb-header-nav ul { display:flex }`
(0-1-1), so the hide/show rules here must carry at least one class + element
more — hence the `.wb-header-nav ul.vpc-dropdown` form throughout. */
.wb-header-nav ul.vpc-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 260px;
background: var(--color-bg-primary);
border-top: 3px solid var(--color-primary);
border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
box-shadow: 0 10px 28px rgba(42, 55, 64, 0.18);
padding: 0.5em 0;
margin: 0;
list-style: none;
z-index: 200;
}
.wb-header-nav .has-dropdown:hover > ul.vpc-dropdown,
.wb-header-nav .has-dropdown.open > ul.vpc-dropdown { display: block; }
.vpc-dropdown li { margin: 0; padding: 0; }
.vpc-dropdown a {
display: block;
padding: 0.55em 1.1em;
font-family: var(--font-heading-h2);
font-size: 0.92rem;
font-weight: 500;
color: var(--color-secondary);
white-space: nowrap;
transition: all 0.2s ease;
}
.vpc-dropdown a:hover { background: var(--color-bg-secondary); color: var(--color-primary); }
.wb-header-nav ul.vpc-dropdown-wide { min-width: 480px; max-height: 70vh; overflow-y: auto; right: 0; left: auto; }
.wb-header-nav .has-dropdown:hover > ul.vpc-dropdown-wide,
.wb-header-nav .has-dropdown.open > ul.vpc-dropdown-wide {
display: grid;
grid-template-columns: 1fr 1fr;
}
.vpc-dropdown-wide a { white-space: normal; }
/* Mobile navigation (<=900px) */
@media (max-width: 900px) {
/* The extra room to the left of the logo is a desktop refinement. Once the
nav collapses to a burger sitting 1.5em off the right edge, it just reads
as a lopsided bar. */
.vpc-header .wb-header-inner { --vpc-logo-inset: 0rem; }
.vpc-header .wb-menu-toggle { display: block; }
.vpc-header .wb-header-nav {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-bg-primary);
box-shadow: 0 12px 24px rgba(42, 55, 64, 0.15);
padding: 1em 1.25em 1.5em;
max-height: calc(100vh - 80px);
overflow-y: auto;
}
.vpc-header nav#main-nav.open { display: block; }
.vpc-header .wb-header-nav ul { flex-direction: column; gap: 0; text-align: left; }
.vpc-header .wb-header-nav > ul > li { padding: 0.4em 0; border-bottom: 1px solid var(--color-border-light); }
.vpc-header .wb-header-nav > ul > li:last-child { border-bottom: none; }
/* Dropdowns render inline in the mobile panel */
.wb-header-nav ul.vpc-dropdown, .wb-header-nav .has-dropdown:hover > ul.vpc-dropdown, .wb-header-nav .has-dropdown.open > ul.vpc-dropdown, .wb-header-nav .has-dropdown:hover > ul.vpc-dropdown-wide, .wb-header-nav .has-dropdown.open > ul.vpc-dropdown-wide {
display: block;
position: static;
min-width: 0;
width: 100%;
box-shadow: none;
border-top: none;
border-left: 3px solid var(--color-border-light);
border-radius: 0;
padding: 0.25em 0 0.25em 0.5em;
margin: 0.25em 0 0.25em 0.25em;
max-height: none;
overflow: visible;
grid-template-columns: 1fr;
}
.vpc-strapline { display: none; }
}
/* ---------- Homepage ---------- */
.vpc-home-hero {
position: relative;
min-height: 700px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--color-secondary-dark);
display: flex;
align-items: stretch;
}
.vpc-home-hero-overlay {
flex: 1;
background: rgba(29, 30, 35, 0.45);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.vpc-home-title {
font-family: var(--font-heading);
font-size: clamp(3rem, 6vw, 4.5rem);
color: var(--color-text-white);
margin: 0 0 0.4em 0;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
line-height: 1.15;
}
.vpc-home-subtitle {
font-family: var(--font-heading-h2);
font-size: clamp(1.1rem, 2.5vw, 1.6rem);
font-weight: 500;
color: var(--color-text-white);
margin: 0;
letter-spacing: 0.04em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.vpc-home-intro { background: var(--color-bg-primary); text-align: center; }
.vpc-home-intro .content-block { max-width: 900px; }
.vpc-home-intro h2 { margin-bottom: 0.75em; }
.intro-lead { font-size: 1.2rem; line-height: 1.7; color: var(--color-secondary); }
.vpc-home-services { background: var(--color-bg-secondary); text-align: center; }
.vpc-home-services h2 { margin-bottom: 1.25em; }
/* Icon grid (services block) */
.icon-grid { display: grid; gap: 2rem; margin-top: 1rem; }
.icon-grid-3 { grid-template-columns: repeat(3, 1fr); }
/* Four across left 226px cards at desktop: every title broke over two lines and
the body ran three or four words to a line, centred, so both edges were
ragged. Two across with the icon set beside the words instead of above them
gives each card a real measure, and the block ends up no taller. */
.icon-grid-4 { grid-template-columns: repeat(2, 1fr); }
.icon-grid-4 .icon-item {
display: grid;
/* Fixed icon column, not `auto`: a clock is narrower than a handshake, so an
auto column put the two cards in a row on different left edges. */
grid-template-columns: 2.25rem minmax(0, 1fr);
column-gap: 1.35rem;
align-content: start;
text-align: left;
padding: 1.75rem;
}
.icon-grid-4 .icon-item-icon {
grid-column: 1; grid-row: 1 / span 2;
align-self: start; /* level with the title, not floating mid-card */
margin-bottom: 0;
justify-content: center;
width: 2.25rem;
}
.icon-grid-4 .icon-item-icon i { font-size: 1.6rem; line-height: 1.35; }
.icon-grid-4 .icon-item-title { grid-column: 2; margin-top: 0; }
.icon-grid-4 .icon-item-text { grid-column: 2; }
.icon-item {
display: block;
background: var(--color-bg-primary);
padding: 2rem 1.5rem;
border-radius: var(--border-radius-medium);
box-shadow: 0 2px 10px rgba(42, 55, 64, 0.08);
text-align: center;
transition: all 0.3s ease;
border: 2px solid transparent;
text-decoration: none;
color: inherit;
font-weight: normal;
}
.icon-item:hover {
transform: translateY(-6px);
box-shadow: 0 10px 26px rgba(42, 55, 64, 0.15);
border-color: var(--color-primary);
color: inherit;
}
.icon-item-icon { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.icon-item-icon i { font-size: 2rem; color: var(--color-primary); }
/* Held at component specificity on purpose. `.vpc-page-content h3` is a
descendant rule of the same weight, so on About Us and Enquiries it was
winning: card titles came out at 1.6rem with a 1.25em gap shoved between the
icon and the words. A component's own title beats the page it happens to
sit in. */
.icon-item .icon-item-title {
font-family: var(--font-heading);
font-size: 1.2rem;
color: var(--color-secondary);
margin: 0 0 0.5em 0;
}
.icon-item-text { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
/* Signature finish features (50/50 image + content) */
.vpc-home-feature { background: var(--color-bg-primary); }
.vpc-feature-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.vpc-feature-image {
min-height: 420px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--color-cream);
}
.vpc-feature-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 3.5rem 3rem;
background: var(--color-cream);
color: var(--color-secondary);
}
.vpc-feature-microcement .vpc-feature-content { background: var(--color-bg-secondary); }
.vpc-feature-content h2 { font-family: var(--font-heading); color: var(--color-secondary); margin-bottom: 0.5em; }
.vpc-feature-content p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; max-width: 34em; }
.vpc-feature-content .btn { align-self: flex-start; }
/* More finishes grid */
.vpc-home-more-finishes { background: var(--color-bg-primary); text-align: center; }
.grid-block { display: grid; gap: 1.5rem; text-align: left; }
.grid-block-2 { grid-template-columns: repeat(2, 1fr); }
.grid-block-3 { grid-template-columns: repeat(3, 1fr); }
.grid-item {
display: block;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-light);
border-radius: var(--border-radius-medium);
padding: 1.75rem 1.5rem;
transition: all 0.3s ease;
text-decoration: none;
color: inherit;
font-weight: normal;
}
a.grid-item:hover {
border-color: var(--color-primary);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(42, 55, 64, 0.12);
color: inherit;
}
.grid-item .grid-item-title {
font-family: var(--font-heading);
font-size: 1.3rem;
color: var(--color-secondary);
margin: 0 0 0.5em 0;
}
.grid-item-text { font-size: 0.95rem; line-height: 1.6; color: var(--color-text-secondary); margin: 0; }
/* ---------- Generic pages ---------- */
.vpc-page-hero {
position: relative;
min-height: 360px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: var(--color-secondary-dark);
display: flex;
align-items: stretch;
}
.vpc-page-hero-overlay {
flex: 1;
/* lighter than it was: these heroes now carry photographs rather than a
flat slate texture, and 0.65 buried them. The title keeps its text-shadow. */
background: linear-gradient(135deg, rgba(42, 55, 64, 0.58) 0%, rgba(58, 75, 84, 0.34) 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.vpc-page-hero .content-block { padding-top: 2em; padding-bottom: 2em; }
.vpc-page-title {
font-family: var(--font-heading);
color: var(--color-text-white);
margin: 0 0 0.3em 0;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}
.vpc-page-subtitle {
font-family: var(--font-heading-h2);
font-size: clamp(1rem, 2.2vw, 1.35rem);
font-weight: 500;
color: var(--color-cream);
margin: 0;
letter-spacing: 0.04em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.vpc-page-content { max-width: 900px; margin: 0 auto; font-size: 1.05rem; line-height: 1.8; }
.vpc-page-content h2 { margin-top: 1.5em; }
.vpc-page-content h3 {
font-size: clamp(1.2rem, 3vw, 1.6rem);
margin-top: 1.25em;
color: var(--color-secondary);
font-family: var(--font-heading);
}
.vpc-page-content img { border-radius: var(--border-radius-medium); margin: 1.5rem 0; }
/* Section rhythm & helpers */
.vpc-section { margin: 4rem 0; }
.vpc-intro-section { max-width: 800px; margin: 0 auto 3rem auto; text-align: center; }
.vpc-feature-rows { margin: 2rem 0; }
.vpc-feature-row {
background: var(--color-bg-secondary);
border-radius: var(--border-radius-medium);
padding: 2rem;
margin-bottom: 1.5rem;
}
.vpc-feature-row:nth-child(even) { background: var(--color-cream); }
.vpc-feature-row h3 {
font-size: 1.4rem;
font-family: var(--font-heading);
color: var(--color-secondary);
margin-bottom: 0.5em;
}
.vpc-values-section { margin: 4rem 0; text-align: center; }
/* Centred like their neighbours. These were the only left-aligned section
headings on their pages, sitting between centred ones, which read as a
mistake rather than a choice. */
.vpc-contact-split > h2,
.vpc-enquiry-form-section > h2,
.vpc-important-info > h2 { text-align: center; }
/* The confidentiality note sits under the send button, so it lines up with it
rather than floating centred over a left-aligned form. */
.vpc-enquiry-form-section .vpc-note { text-align: left; margin-top: 1rem; }
/* .vpc-quote-checklist removed with the section it styled — the enquiry page
is now an opening statement and the form. */
.vpc-note { font-style: italic; font-size: 0.95rem; color: var(--color-text-muted); }
/* Contact page split layout.
NB only .vpc-contact-grid is the two-column part. .vpc-contact-split is the
section around it and holds the h2 — making that a grid too gave the heading
a whole 40% column and squeezed the details and the form into what was left. */
.vpc-contact-split { margin: 2rem 0; }
.vpc-contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 3rem;
align-items: start;
margin: 2rem 0;
}
.vpc-contact-details h3 {
font-size: 1.4rem;
font-family: var(--font-heading);
color: var(--color-secondary);
margin-bottom: 0.75em;
}
.vpc-contact-details ul { list-style: none; margin: 0 0 1.5rem 0; padding: 0; font-size: 1.05rem; }
.vpc-contact-details li { padding: 0.4rem 0; }
.vpc-contact-details i { color: var(--color-primary); width: 1.4em; margin-right: 0.4em; }
.vpc-contact-form { background: var(--color-bg-secondary); border-radius: var(--border-radius-medium); padding: 2rem; }
.vpc-enquiry-form-section { max-width: 820px; margin: 0 auto; }
/* ---------- Forms ---------- */
.vpc-form label {
display: block;
margin-bottom: 1.2rem;
font-family: var(--font-heading-h2);
font-weight: 600;
color: var(--color-form-text);
font-size: 0.95rem;
}
.vpc-form input[type="text"], .vpc-form input[type="email"], .vpc-form input[type="tel"], .vpc-form select, .vpc-form textarea {
display: block;
width: 100%;
margin-top: 0.5em;
padding: 0.75em 0.9em;
border: 1px solid var(--color-form-border);
border-radius: 4px;
background: var(--color-bg-primary);
font-family: var(--font-body);
font-size: 1rem;
color: var(--color-form-text);
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
}
.vpc-form select {
background-image: linear-gradient(45deg, transparent 50%, var(--color-secondary) 50%),
linear-gradient(135deg, var(--color-secondary) 50%, transparent 50%);
background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
background-size: 5px 5px;
background-repeat: no-repeat;
cursor: pointer;
}
.vpc-form textarea { min-height: 120px; resize: vertical; }
/* The location box sits beside a single-line phone field; at the message box's
120px it dwarfed it. Two lines is enough to invite a sentence. */
.vpc-form textarea[name="project-location"] { min-height: 3.5rem; }
.vpc-form input:focus, .vpc-form select:focus, .vpc-form textarea:focus {
outline: none;
border-color: var(--color-form-focus);
box-shadow: 0 0 0 3px rgba(201, 120, 86, 0.15);
}
.vp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
.vp-form-meta { margin-bottom: 1rem; }
.vpc-form input[name="_gotcha"] { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vpc-form-submit { font-size: 1.05rem; padding: 0.8rem 2.5rem; }
.vpc-form-status {
display: none;
margin: 1rem 0 0 0;
padding: 0.8rem 1rem;
border-radius: var(--border-radius-small);
font-family: var(--font-heading-h2);
font-weight: 500;
}
.vpc-form-status.ok { display: block; background: #ecf7ee; color: #1e6a2e; border: 1px solid rgba(40, 167, 69, 0.35); }
.vpc-form-status.err { display: block; background: #fdf0f0; color: #9b1c1c; border: 1px solid rgba(207, 4, 4, 0.3); }
/* ---------- Lightbox ---------- */
.vpc-lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.92);
z-index: 9999;
align-items: center;
justify-content: center;
}
.vpc-lightbox.open { display: flex; }
.vpc-lightbox-figure { margin: 0; max-width: 90vw; text-align: center; }
.vpc-lightbox-img {
max-width: 90vw;
max-height: 85vh;
width: auto;
height: auto;
display: block;
margin: 0 auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
}
.vpc-lightbox-caption {
color: var(--color-text-white);
text-align: center;
font-family: var(--font-heading-h2);
font-size: 0.95rem;
padding: 0.75rem 1rem 0 1rem;
}
.vpc-lightbox-close, .vpc-lightbox-prev, .vpc-lightbox-next {
position: absolute;
background: transparent;
border: none;
color: var(--color-text-white);
font-size: 2.5rem;
line-height: 1;
cursor: pointer;
padding: 0.5rem 1rem;
z-index: 10000;
transition: color 0.2s ease, transform 0.2s ease;
}
.vpc-lightbox-close:hover, .vpc-lightbox-prev:hover, .vpc-lightbox-next:hover { color: var(--color-primary-light); }
.vpc-lightbox-close { top: 0.5rem; right: 1rem; }
.vpc-lightbox-prev { left: 0.5rem; top: 50%; transform: translateY(-50%); }
.vpc-lightbox-next { right: 0.5rem; top: 50%; transform: translateY(-50%); }
body.vpc-lightbox-locked { overflow: hidden; }
/* ---------- Taxonomy pages ---------- */
.taxonomy-index { padding: 1.5rem 0 3rem 0; justify-content: flex-start; }
.term-finishes-section { background: var(--color-bg-secondary); }
.term-finishes-section .content-block { padding-top: 3em; padding-bottom: 4em; }
.term-finishes-section h2 { text-align: center; margin-bottom: 1.5em; }
/* ---------- Footer brand overrides ---------- */
.vpc-footer { background: var(--color-secondary-dark); color: var(--color-cream); font-size: 0.95rem; }
.vpc-footer h4 {
font-family: var(--font-heading-h2);
color: var(--color-cream);
letter-spacing: 0.03em;
text-transform: uppercase;
font-size: 1rem;
}
.vpc-footer a { color: var(--color-link-footer); font-weight: normal; transition: color 0.3s ease; }
.vpc-footer a:hover { color: var(--color-link-footer-hover); }
.vpc-footer .wb-footer-col ul li i { color: var(--color-primary); }
/* Footer social mark. Site palette rather than Facebook blue — it is a link to
their page, not a Facebook badge dropped into someone else's footer. */
.vpc-footer-social { margin-top: 1.25rem; }
.vpc-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
color: var(--color-cream);
border: 1px solid rgba(233, 226, 213, 0.35);
font-size: 1rem;
text-decoration: none;
transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
/* Scoped to .vpc-footer on purpose. `.vpc-footer a:hover` is (0,2,1) and
`.vpc-social-link:hover` only (0,2,0), so the footer's own link hover was
winning and painting the mark terracotta — the same terracotta as the
background it sits on, which made it disappear on hover. */
.vpc-footer .vpc-social-link:hover,
.vpc-footer .vpc-social-link:focus-visible {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-text-white);
}
@media (prefers-reduced-motion: reduce) { .vpc-social-link { transition: none; } }
.vpc-footer .wb-footer-description { color: var(--color-cream); opacity: 0.85; line-height: 1.7; }
.wb-copyright { background: #232E36; color: var(--color-cream); }
.wb-copyright a { color: var(--color-primary-light); }
.wb-copyright a:hover { color: var(--color-text-white); }
/* ---------- Additions: responsive ---------- */
@media (max-width: 1024px) {
.icon-grid-3, .icon-grid-4 { grid-template-columns: repeat(2, 1fr); }
.grid-block-3 { grid-template-columns: repeat(2, 1fr); }
.vpc-feature-content { padding: 2.5rem 2rem; }
}
@media (max-width: 900px) {
.vpc-home-hero { min-height: 520px; }
.vpc-feature-grid { grid-template-columns: 1fr; }
/* Image always stacks first on mobile, including reversed rows */
.vpc-feature-grid .vpc-feature-image { order: -1; min-height: 300px; }
}
@media (max-width: 768px) {
.vp-form-row { grid-template-columns: 1fr; }
.vpc-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
.vpc-page-hero { min-height: 300px; }
.vpc-section { margin: 3rem 0; }
.icon-grid-3, .icon-grid-4, .grid-block-2, .grid-block-3 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.vpc-home-hero { min-height: 420px; }
.vpc-home-title { font-size: 2.2rem; }
.vpc-feature-content { padding: 2rem 1.25rem; }
.vpc-contact-form { padding: 1.5rem; }
.vpc-lightbox-close, .vpc-lightbox-prev, .vpc-lightbox-next { font-size: 2rem; padding: 0.4rem 0.6rem; }
.vpc-page-cta .btn { display: block; margin: 0.5rem 0; }
}
/* ============================================================
Feedback round 1 (Webb 2026-07-18): finishes mega-dropdown,
grouped finishes page, related-project browse links
============================================================ */
/* Finishes mega-dropdown (grouped per the finish hierarchy) */
.wb-header-nav .vpc-mega {
display: none;
position: absolute;
top: 100%;
right: 0;
width: min(760px, calc(100vw - 3rem));
background: var(--color-bg-primary);
border-top: 3px solid var(--color-primary);
border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
box-shadow: 0 10px 28px rgba(42, 55, 64, 0.18);
padding: 1.1em 1.2em 1.2em;
z-index: 200;
/* Three deliberate columns, not a reflowed multi-column box: each column has to
keep its own pairing (Venetian Plaster + Modern Materials, and so on), which
`columns: 3` cannot guarantee because it balances by height.
NB no `display` here — the panel stays `display: none` until hover/open sets
it to grid. Declaring it in this block would hold the menu permanently open. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 1.5em;
align-items: start;
}
.wb-header-nav .has-dropdown:hover > .vpc-mega,
.wb-header-nav .has-dropdown.open > .vpc-mega { display: grid; }
.vpc-mega-col { min-width: 0; }
.vpc-mega-group { margin-bottom: 1em; }
.vpc-mega-group:last-child { margin-bottom: 0; }
.vpc-mega-group { min-width: 0; }
.vpc-mega-label {
display: block;
font-family: var(--font-heading-h2);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-primary);
border-bottom: 1px solid var(--color-border-light);
padding-bottom: 0.35em;
margin-bottom: 0.35em;
}
.wb-header-nav .vpc-mega ul { display: block; margin: 0; padding: 0; list-style: none; }
.vpc-mega-group li { margin: 0; padding: 0; }
.vpc-mega-group a {
display: block;
padding: 0.3em 0.2em;
font-family: var(--font-heading-h2);
font-size: 0.88rem;
font-weight: 500;
color: var(--color-secondary);
transition: color 0.2s ease;
}
.vpc-mega-group a:hover { color: var(--color-primary); }
/* Grouped finishes archive */
.finish-group-section { margin-bottom: 3.5rem; }
.finish-group-title {
font-family: var(--font-heading-h2);
color: var(--color-secondary);
border-bottom: 2px solid var(--color-primary);
display: inline-block;
padding-bottom: 0.2em;
margin-bottom: 1.2rem;
}
/* Browse-on links under Similar Projects */
.related-browse-links { margin-top: 1.25rem; display: flex; gap: 2em; flex-wrap: wrap; }
.related-browse-links a {
font-family: var(--font-heading-h2);
font-weight: 500;
color: var(--color-primary);
}
.related-browse-links a:hover { color: var(--color-secondary); }
@media (max-width: 900px) {
/* Mega panel renders inline in the mobile nav panel */
.wb-header-nav .vpc-mega,
.wb-header-nav .has-dropdown:hover > .vpc-mega,
.wb-header-nav .has-dropdown.open > .vpc-mega {
display: block;
position: static;
width: 100%;
max-height: none;
box-shadow: none;
border-top: none;
border-left: 3px solid var(--color-border-light);
border-radius: 0;
padding: 0.25em 0 0.25em 0.75em;
}
.vpc-mega-group { margin-bottom: 0.75em; }
}
/* Poster for a film Facebook gives no thumbnail for.
It has to occupy exactly the box the iframe would, in all three places a film
appears, so the layout does not move when it is swapped for the embed. */
.fb-film-poster {
position: relative;
display: block;
width: 100%;
overflow: hidden;
border: 0;
border-radius: var(--border-radius-medium);
background: var(--color-secondary-dark);
line-height: 0;
}
.fb-film-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-film-poster-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.5rem;
line-height: 1;
/* A wash rather than a full scrim: the still is the point, and it should
still read as a photograph of the work. */
background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0) 70%);
transition: background 0.25s ease;
}
.fb-film-poster-play i {
display: flex;
align-items: center;
justify-content: center;
width: 3.4rem;
height: 3.4rem;
padding-left: 0.2rem; /* a triangle looks off-centre in a circle */
border-radius: 50%;
background: rgba(20, 26, 31, 0.55);
border: 2px solid rgba(255, 255, 255, 0.85);
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.25s ease;
}
.fb-film-poster:hover .fb-film-poster-play i,
.fb-film-poster:focus-visible .fb-film-poster-play i {
transform: scale(1.08);
background: var(--color-primary);
}
@media (prefers-reduced-motion: reduce) {
.fb-film-poster-play i { transition: none; }
.fb-film-poster:hover .fb-film-poster-play i { transform: none; }
}
.fb-film-frame { width: 100%; border: 0; border-radius: var(--border-radius-medium); }
/* In the films strip the box is sized by height, not width, like the iframes. */
.finish-film .fb-film-poster,
.finish-film .fb-film-frame {
height: var(--film-height);
width: calc(var(--film-height) * var(--film-ratio, 1.7778));
max-width: 100%;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 700px) {
.finish-film .fb-film-poster,
.finish-film .fb-film-frame { width: 100%; height: auto; }
}
.project-video-embed .fb-film-poster,
.project-video-embed .fb-film-frame { box-shadow: 0 6px 20px rgba(42, 55, 64, 0.12); }
/* Project video sections (Facebook embeds) */
.project-video-embed { max-width: 860px; margin: 0 auto; }
.project-video-embed iframe {
width: 100%;
aspect-ratio: 16 / 9; /* fallback only — video embeds carry their measured ratio inline */
border: 0;
border-radius: var(--border-radius-medium);
box-shadow: 0 6px 20px rgba(42, 55, 64, 0.12);
}
.project-video-caption {
text-align: center;
color: var(--color-text-secondary);
font-style: italic;
margin-top: 0.75em;
}
/* Inline logo image inside project body (B&B Furniture etc.) */
.vp-inline-logo { text-align: center; margin: 1.5em 0; }
.vp-inline-logo img { display: inline-block; border-radius: var(--border-radius-small); }
/* Homepage testimonials */
.vpc-home-testimonials { padding: 4rem 0; background: var(--color-bg-secondary); text-align: center; }
.vpc-home-testimonials h2 { margin-bottom: 2rem; }
.testimonials-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 480px)); justify-content: center; align-items: start; }
.testimonial-card {
background: var(--color-bg-primary);
border-left: 4px solid var(--color-primary);
border-radius: var(--border-radius-medium);
box-shadow: 0 4px 16px rgba(42, 55, 64, 0.08);
margin: 0;
padding: 1.75rem 2rem;
text-align: left;
}
.testimonial-quote { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.7; color: var(--color-text-primary); font-style: italic; margin: 0 0 1rem; }
.testimonial-meta { font-family: var(--font-heading-h2); font-size: 0.9rem; color: var(--color-text-secondary); }
.testimonial-name { color: var(--color-primary); font-weight: 600; }
/* Testimonials that name a project show its thumbnail and link through.
Card goes side-by-side above 560px, stacked below. */
.testimonial-card-has-image { display: flex; flex-direction: column; gap: 1.25rem; padding: 1.5rem; }
/* A quote with no job to point at has no photograph, so beside two illustrated
cards it reads as one with a missing image. It gets a mark of its own instead
— the quote is the whole of it, so it is set as one. Illustrated quotes are
preferred first (see the shortcode); this is what the fallback looks like. */
.testimonial-card:not(.testimonial-card-has-image) { padding: 1.75rem 1.75rem 1.5rem; }
.testimonial-card:not(.testimonial-card-has-image)::before {
content: "\201C";
display: block;
font-family: var(--font-heading);
font-size: 3.2rem;
line-height: 0.7;
color: var(--color-primary);
opacity: 0.35;
margin-bottom: 0.4rem;
}
.testimonial-card:not(.testimonial-card-has-image) .testimonial-quote { font-size: 1.08rem; }
.testimonial-image { display: block; flex: 0 0 auto; border-radius: var(--border-radius-small); overflow: hidden; line-height: 0; }
.testimonial-image img { width: 100%; height: auto; object-fit: cover; transition: transform 0.4s ease; }
.testimonial-image:hover img,
.testimonial-image:focus-visible img { transform: scale(1.04); }
.testimonial-body { min-width: 0; }
.testimonial-project-link { display: block; margin-top: 0.4rem; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.testimonial-project-link:hover,
.testimonial-project-link:focus-visible { text-decoration: underline; }
@media (min-width: 560px) {
.testimonial-card-has-image { flex-direction: row; align-items: flex-start; }
.testimonial-card-has-image .testimonial-image { width: 160px; }
.testimonial-card-has-image .testimonial-image img { height: 120px; }
}
/* Project index (editorial page for Jen) */
.project-index h1 { margin-bottom: 0.5rem; }
.pi-filter {
width: 100%;
max-width: 480px;
padding: 0.7em 1em;
border: 1px solid var(--color-form-border);
border-radius: var(--border-radius-small);
font-size: 1rem;
margin: 1rem 0 0.5rem;
}
.pi-filter:focus { outline: none; border-color: var(--color-form-focus); box-shadow: 0 0 0 3px rgba(201, 120, 86, 0.15); }
.pi-count { color: var(--color-text-secondary); font-size: 0.9rem; margin-bottom: 1rem; }
.pi-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.pi-table th {
text-align: left;
font-family: var(--font-heading-h2);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-secondary);
border-bottom: 2px solid var(--color-primary);
padding: 0.5em 0.75em;
}
.pi-table td { padding: 0.55em 0.75em; border-bottom: 1px solid var(--color-border-light); vertical-align: top; }
.pi-table tr:hover td { background: var(--color-bg-secondary); }
.pi-none { color: var(--color-error); font-style: italic; }
/* Video tiles inside finish media galleries */
.gallery-video-item { display: flex; flex-direction: column; }
.gallery-video-item iframe { width: 100%; border: 0; } /* aspect-ratio set inline, from measurement */
/* Single video in a finish gallery: centre it and let it breathe */
.finish-media-gallery .gallery-video-item {
grid-column: 1 / -1;
max-width: 720px;
width: 100%;
margin: 0 auto;
}
/* Reviewed rows in the project index */
.pi-reviewed td a { text-decoration: line-through; color: var(--color-text-secondary); }
.pi-reviewed td { color: var(--color-text-light); }
.pi-tick { color: var(--color-success); font-weight: 700; text-decoration: none; display: inline-block; margin-left: 0.3em; }
/* Body images in prose pages (About etc.) */
.vp-body-image { margin: 2rem auto; max-width: 820px; text-align: center; }
.vp-body-image img { width: 100%; border-radius: var(--border-radius-medium); box-shadow: 0 6px 20px rgba(42, 55, 64, 0.14); }
.vp-body-image figcaption { color: var(--color-text-secondary); font-style: italic; margin-top: 0.6em; font-size: 0.95rem; }
/* Portrait and square Facebook videos: keep their own shape and don't span the
row. The aspect ratio itself is set inline per video from the measured data. */
.finish-media-gallery :is(.gallery-video-portrait, .gallery-video-square),
:is(.gallery-video-portrait, .gallery-video-square) {
grid-column: auto;
max-width: 320px;
margin: 0 auto;
}
.gallery-video-square { max-width: 420px; }
/* Testimonial quote on project pages */
.vp-project-testimonial {
background: var(--color-bg-secondary);
border-left: 4px solid var(--color-primary);
border-radius: var(--border-radius-medium);
margin: 2rem auto;
max-width: 820px;
padding: 1.75rem 2rem;
}
.vp-project-testimonial p { font-family: var(--font-heading); font-style: italic; font-size: 1.1rem; line-height: 1.7; margin: 0 0 0.75rem; }
.vp-project-testimonial footer { font-family: var(--font-heading-h2); color: var(--color-primary); font-weight: 600; }
/* Square / portrait project videos */
.project-video-embed.video-square { max-width: 520px; }
.project-video-embed.video-portrait { max-width: 340px; }
.project-video-embed.video-fbpost { max-width: 500px; }
.project-video-embed.video-fbpost iframe { aspect-ratio: 5 / 4; }
/* Testimonials beneath the enquiry and contact forms.
The columns here are narrower than the homepage grid, so the side-by-side
card layout would squeeze the quote to a word a line. Stack them instead:
image on top, quote beneath, whatever the viewport width. */
.vpc-form-testimonials { margin-top: 3rem; }
.vpc-form-testimonials h2 { text-align: center; }
.vpc-form-testimonials .testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vpc-form-testimonials .testimonial-card-has-image { flex-direction: column; align-items: stretch; }
.vpc-form-testimonials .testimonial-card-has-image .testimonial-image { width: 100%; }
.vpc-form-testimonials .testimonial-card-has-image .testimonial-image img { height: 150px; }
.vpc-form-testimonials .testimonial-quote { font-size: 1rem; }
/* Finish pages with only one or two linked projects: a lone card in an
auto-fill grid leaves two empty columns and looks stranded. Give one and
two-card rows their own widths so they sit deliberately instead. */
.projects-grid-count-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.projects-grid-count-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 480px)); justify-content: center; }
/* ---------- Finish page bands ----------
A section of a finish page with its photograph beside its own text, so the
Rilievo picture sits next to the Rilievo words instead of in a gallery further
down the page. Bands alternate side; nothing is hidden behind a click, because
a parent page's job is to show the whole range at a glance. */
.finish-band {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: 2rem 2.5rem;
align-items: start;
margin: 2.5rem 0 3rem;
}
.finish-band-flip .finish-band-media { order: 2; }
.finish-band-textonly { grid-template-columns: minmax(0, 1fr); }
/* Alternate bands take a pale tint as well as the alternate side, and the tint
runs the full width of the window while the words stay on their measure.
Painted by a pseudo-element rather than a background on the band itself: the
band is 1240px at most (.content-block), so the only way to reach the window
edge is 100vw, and 100vw includes the scrollbar — set as a width on the band
it would push the page 15px wider and add a horizontal scrollbar. As an
absolutely-positioned child it is clipped instead, by overflow-x: clip on the
page wrapper below. `clip`, not `hidden`: hidden would make the wrapper a
scroll container and break sticky positioning inside it.
The tint sits at z-index 0 and the band's own contents are lifted to 1, which
is why they carry position: relative. z-index: -1 would be the obvious way to
put a background behind text, but it does not work here: negative layers
paint before in-flow descendants' backgrounds, and .single-finish-wrapper is
opaque white — the tint vanished underneath it. */
.finish-band { padding-block: 1.75rem; position: relative; }
.finish-band-tint::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: rgba(42, 55, 64, 0.045);
z-index: 0;
}
.finish-band > * { position: relative; z-index: 1; }
.single-finish-wrapper { overflow-x: clip; }
.finish-band-media {
/* shrink-to-fit, so a portrait photograph's caption is as wide as the
photograph rather than running the full width of the column beside it */
margin: 0 auto;
width: fit-content;
max-width: 100%;
}
.finish-band-media img {
display: block;
/* portrait photos would otherwise tower over the text beside them */
width: auto;
max-width: 100%;
height: auto;
max-height: 460px;
margin: 0 auto;
border-radius: var(--border-radius-small);
box-shadow: 0 6px 20px rgba(42, 55, 64, 0.14);
}
.finish-band-media figcaption {
margin-top: 0.65em;
font-family: var(--font-heading-h2);
font-size: 0.85rem;
font-style: italic;
line-height: 1.5;
color: var(--color-text-muted);
}
/* A manufacturer's logo is not a photograph — no shadow, no rounded corner, and
held well back from photo size so it reads as a mark rather than as work. */
.finish-band-plain .finish-band-media img {
max-height: 190px;
border-radius: 0;
box-shadow: none;
}
.finish-band-title { grid-column: 1 / -1; margin: 0 0 0.4rem; }
.finish-band-text > h2:first-child, .finish-band-text > h3:first-child { margin-top: 0; }
.finish-band-text > p:last-child { margin-bottom: 0; }
@media (max-width: 780px) {
.finish-band { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; margin: 2rem 0 2.5rem; }
/* stack image above its own text on both sides, so the reading order is
picture-then-words all the way down rather than alternating */
.finish-band-flip .finish-band-media { order: 0; }
}
/* What the client said — a project's own testimonial, pulled from
data/testimonials.json by its `project` slug. */
.project-client-said { margin: 4rem 0; }
.project-client-said h2 { text-align: center; margin-bottom: 1.75rem; }
/* ---------- Films on a finish page ----------
Every film sits at the same height whatever its shape, so a portrait phone
video and a landscape one line up instead of one towering over the other.
Kept apart from the photo grid, which they used to drag out of line. */
.finish-films-heading {
font-family: var(--font-heading-h2);
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-secondary);
text-align: center;
margin: 2.5rem 0 1.25rem;
}
.finish-films {
--film-height: 330px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 1.5rem;
margin: 0;
}
.finish-film { margin: 0; max-width: 100%; }
.finish-film iframe {
display: block;
border: 0;
height: var(--film-height);
max-width: 100%;
border-radius: var(--border-radius-medium);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
background: var(--color-bg-secondary);
}
/* Width comes from the film's own measured ratio, set on the as
--film-ratio. It used to be 16/9 or 9/16 and nothing else, so every 4:3 and
square video was pillarboxed inside a widescreen frame. */
.finish-film iframe { width: calc(var(--film-height) * var(--film-ratio, 1.7778)); }
.finish-film figcaption {
margin-top: 0.6em;
font-family: var(--font-heading-h2);
font-size: 0.85rem;
font-style: italic;
line-height: 1.5;
color: var(--color-text-muted);
max-width: calc(var(--film-height) * var(--film-ratio, 1.7778));
}
@media (max-width: 700px) {
/* one per row, natural shape, so a phone shows them at a usable size */
.finish-films { --film-height: auto; gap: 2rem; }
.finish-film { width: 100%; }
/* aspect-ratio is set inline per film from the measured data, so the shape
is right here without repeating it. */
.finish-film iframe { width: 100%; height: auto; }
.finish-film-portrait iframe { max-width: 280px; margin: 0 auto; }
.finish-film figcaption { max-width: none; }
}
/* ---------- Testimonials, laid out like masonry ----------
Both the homepage block and the full page use CSS multi-column rather than
grid, so the cards pack: a two-line quote and a ten-line one sit under each
other with no gap, where a grid row is as tall as its tallest card and leaves
a hole beside every short one.
The trade is reading order — multicol fills column one top to bottom, then
column two. For a set of independent quotes in no particular sequence that is
fine; it would not be for anything that had to be read in order.
`columns: 300px 2` means "two columns, unless there is not room for 300px
each", so it collapses to one column on a phone without a media query. */
.vpc-home-testimonials .testimonials-grid,
.testimonials-page .testimonials-all {
display: block;
columns: 300px 2;
column-gap: 1.75rem;
text-align: left;
}
.vpc-home-testimonials .testimonial-card,
.testimonials-page .testimonials-all .testimonial-card {
break-inside: avoid;
margin-bottom: 1.75rem;
}
/* the homepage block is centred text, and two 600px columns is too wide a
measure for a quote — hold it in */
.vpc-home-testimonials .testimonials-grid { max-width: 1000px; margin: 0 auto; }
.testimonials-page .testimonials-all { margin-top: 2.5rem; }
/* breathing room under the films before whatever comes next */
.finish-media-gallery .finish-films { margin-bottom: 1.5rem; }
.finish-media-gallery { margin-bottom: 3.5rem; }
/* ---------- Spaces ----------
The second route in: the visitor who is thinking about a room rather than a
material. Landing page at /space/, one card per space; then a space page that
borrows the finish page's hero and the projects archive's grid, with a
generated "finishes that suit this" block between them. */
.spaces-group { margin-bottom: 3.5rem; }
.spaces-group-title {
margin: 0 0 1.5rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--color-border, rgba(42, 55, 64, 0.15));
}
.spaces-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.75rem;
}
.space-card {
/* flex column so the caption block fills whatever height the grid row gives
the card — otherwise a two-line title leaves its neighbours short */
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
border-radius: var(--border-radius-small);
overflow: hidden;
background: #fff;
box-shadow: 0 4px 16px rgba(42, 55, 64, 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.space-card:hover,
.space-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 10px 26px rgba(42, 55, 64, 0.2);
}
.space-card-image { line-height: 0; aspect-ratio: 640 / 420; background: var(--color-bg-secondary); }
.space-card-image img { width: 100%; height: 100%; object-fit: cover; }
.space-card-content { flex: 1; padding: 1.1rem 1.25rem 1.35rem; }
/* a group with a single space gets a wide card rather than a stranded one */
.spaces-grid-solo { grid-template-columns: minmax(0, 1fr); }
.spaces-grid-solo .space-card { flex-direction: row; align-items: stretch; }
.spaces-grid-solo .space-card-image { flex: 0 0 55%; aspect-ratio: auto; }
.spaces-grid-solo .space-card-content { display: flex; flex-direction: column; justify-content: center; padding: 1.5rem 2rem; }
@media (max-width: 700px) {
.spaces-grid-solo .space-card { flex-direction: column; }
.spaces-grid-solo .space-card-image { flex: 0 0 auto; aspect-ratio: 640 / 420; }
}
.space-card-title { margin: 0 0 0.25rem; }
.space-card-count { margin: 0; font-family: var(--font-heading-h2); font-size: 0.9rem; color: var(--color-text-muted); }
/* the line under the h1 in the hero: a count on a space page, a sentence on the
/space/ landing page, so it needs a measure as well as a size */
.space-hero-count {
margin: 0.6rem auto 0;
max-width: 42rem;
font-family: var(--font-heading-h2);
font-size: 1.05rem;
line-height: 1.5;
opacity: 0.88;
}
/* centred, not left-hung: on a finish page the copy sits left because the Quick
Info box floats beside it, but a space page has nothing on the right and a
left-hung column just reads as a missing panel */
.space-intro { max-width: 44rem; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; }
.space-intro > p { margin-bottom: 1.25rem; }
.space-finishes { padding-bottom: 1rem; }
.space-finishes h2 { margin-bottom: 0.25rem; }
.space-finishes-note {
margin: 0 0 1.75rem;
font-family: var(--font-heading-h2);
font-size: 0.95rem;
color: var(--color-text-muted);
}
/* Homepage: the same cards, in the slot the four-tile finishes grid used to hold */
.vpc-home-spaces { padding: 4rem 0 1rem; }
.vpc-home-spaces h2 { text-align: center; margin-bottom: 0.4rem; }
.vpc-home-spaces .vpc-home-spaces-lead { text-align: center; margin: 0 auto 2.25rem; max-width: 44rem; }
.space-card-line { margin: 0.9rem 0 0; max-width: 34rem; color: var(--color-text-secondary); }
/* three across rather than four-then-two — six cards want two even rows */
.vpc-home-spaces .spaces-grid { max-width: 1100px; margin: 0 auto; }
/* a single illustration inside a space intro — same measure as the copy */
.space-intro-figure { margin: 2rem 0 0; }
.space-intro-figure img { display: block; width: 100%; height: auto; border-radius: var(--border-radius-small); box-shadow: 0 6px 20px rgba(42, 55, 64, 0.14); }
.space-intro-figure figcaption { margin-top: 0.65em; font-family: var(--font-heading-h2); font-size: 0.85rem; font-style: italic; line-height: 1.5; color: var(--color-text-muted); }
/* Home in the nav is an icon on desktop and a normal word in the mobile menu,
where there is room and a lone icon in a list of words reads as a mistake. */
.wb-nav-home-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wb-nav-home a i { font-size: 1.05em; }
@media (max-width: 900px) {
.wb-nav-home-label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.wb-nav-home a i { margin-right: 0.5em; }
}
/* ---------- About page ---------- */
/* The two portraits came off the old site at thumbnail size — 253px and 300px
wide — so they are shown at something close to natural size rather than
stretched up into mush. */
.vpc-about-portraits { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 2rem; }
.vpc-about-portraits figure { margin: 0; max-width: 300px; }
.vpc-about-portraits img { display: block; width: 100%; height: auto; border-radius: var(--border-radius-small); box-shadow: 0 4px 14px rgba(42, 55, 64, 0.16); }
.vpc-about-portraits figcaption { margin-top: 0.5em; font-family: var(--font-heading-h2); font-size: 0.85rem; font-style: italic; color: var(--color-text-muted); }
/* an accreditation mark is a logo, not a photograph — no shadow, held small */
.vpc-about-accreditation { margin: 0 0 1.25rem; }
.vpc-about-accreditation img { display: block; width: 270px; max-width: 100%; height: auto; }
/* the glitter jacket: picture beside its own few lines */
/* The lead aside carries the portrait, so it gets a little more room than the
later ones and the text sits centred against it rather than at the top. */
.vpc-about-lead { align-items: center; }
.vpc-about-lead .vp-body-image-portrait img { border-radius: var(--border-radius-medium); }
.vpc-about-lead .vpc-about-aside-text h3 { margin-top: 0; }
/* Two photographs of the outfit at work, side by side and the same height. They
were different sizes and shapes stacked in the intro, which read as two
thumbnails rather than a pair. */
.vpc-about-pair {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin: 1.5rem 0 1.75rem;
}
.vpc-about-pair figure { margin: 0; }
.vpc-about-pair img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
border-radius: var(--border-radius-small);
box-shadow: 0 4px 14px rgba(42, 55, 64, 0.14);
}
.vpc-about-pair figcaption {
margin-top: 0.6em;
font-family: var(--font-heading);
font-style: italic;
font-size: 0.95rem;
color: var(--color-text-secondary);
line-height: 1.5;
}
@media (max-width: 620px) { .vpc-about-pair { grid-template-columns: minmax(0, 1fr); } }
.vpc-about-aside { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 2.5rem; align-items: center; }
.vpc-about-aside .vp-body-image { margin: 0; }
.vpc-about-aside img { display: block; width: 100%; height: auto; border-radius: var(--border-radius-small); box-shadow: 0 6px 20px rgba(42, 55, 64, 0.16); }
.vpc-about-aside figcaption { margin-top: 0.65em; font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; color: var(--color-secondary); }
@media (max-width: 780px) {
.vpc-about-aside { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}
/* Keep a phrase on one line — "Isle of Man" in the homepage h1, where the
default break orphaned "Man". */
.nowrap { white-space: nowrap; }
/* Archive headers now sit on photographs — the titles need the same
shadow the finish and project heroes use to stay legible. */
.services-archive-header .archive-title, .finishes-archive-header .archive-title,
.projects-archive-header .archive-title { text-shadow: 2px 2px 6px rgba(0,0,0,0.55); }
.services-archive-header .archive-description, .finishes-archive-header .archive-description,
.projects-archive-header .archive-description { text-shadow: 1px 1px 4px rgba(0,0,0,0.55); }
/* Anchor targets sit under the sticky header (78px) unless told otherwise —
this covers the group jump links on /finishes/ and the #ewi band on the
Render Systems page. Smooth scrolling only for people who have not asked
the system to reduce motion. */
[id] { scroll-margin-top: 6rem; }
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}