/* ============================================================
SQUIRE FURNISHINGS — SHARED STYLESHEET
Included on every page via:
CSS variables (colours, fonts) output by theme.php
============================================================ */
/* ---- RESET & BASE ---- */
:root {
--navy: var(--primary);
--navy-mid: #1E2C31;
--navy-light: #26363B;
--gold: var(--secondary);
--gold-light: #B98F4F;
--gold-dark: #7E5526;
/* The brand ink as bare channels, so shadows, hairlines and image
overlays can be written rgba(var(--shade), .12) and follow the
theme. Previously these were rgba(var(--shade),...) and rgba(var(--shade),...)
written out longhand in 24 places, which is why the old navy used to
survive a theme change and make it look half-applied. */
--shade: 16, 25, 28; /* the ink, blue-dark not brown — warm hairlines sepia-washed every surface */
--orange: var(--accent);
--white: #FFFFFF;
--off-white: var(--bg-light, #EFF0EB);
--cream: #FDF9F4;
--text: var(--color-body, #2a2a2a);
--text-muted: var(--color-muted, #6a7a8a);
}
html { scroll-behavior: smooth; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-body), sans-serif; background: var(--bg-light, #EFF0EB); color: var(--color-body, #2a2a2a); line-height: var(--line-height-body, 1.7); overflow-x: hidden; font-size: var(--size-body, 15px); }
h1, h2, h3, h4 { font-family: var(--font-head), serif; font-weight: 600; color: var(--color-heading, #0F203C); }
img { max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
/* ---- ANNOUNCEMENT BAR ---- */
.announcement-bar { text-align: center; padding: 10px 20px; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; position: relative; overflow: hidden; }
.announcement-bar::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent); animation: shimmer 3s infinite; }
@keyframes shimmer { to { left: 200%; } }
/* ---- HEADER & NAV ---- */
header { background: rgba(247,248,244,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--shade),0.08); position: sticky; top: 0; z-index: 1000; transition: box-shadow 0.3s ease; }
header.scrolled { box-shadow: 0 4px 30px rgba(var(--shade),0.12); }
.header-inner { max-width: 1500px; width: 95%; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.header-inner .main-nav { grid-column: 2; }
.header-inner .header-right { grid-column: 3; display: flex; justify-content: flex-end; align-items: center; }
.header-inner .menu-toggle { grid-column: 3; justify-self: end; }
.logo-wrap { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo-wrap:hover { opacity: 0.85; }
/* The founding year, set as a colophon rather than a tagline: a hairline
rule, "est." in the heading italic, then the year letterspaced small. It
is the quiet half of the mark, so it takes the muted colour and never
competes with the name. Hidden below 560px, where the nav needs the room
more than the year does. */
.logo-est { display: inline-flex; align-items: center; gap: 9px; margin-left: 12px; font-family: var(--font-body), sans-serif; font-size: 9px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.logo-est::before { content: ''; display: block; width: 20px; height: 1px; background: currentColor; opacity: 0.55; }
.logo-est i { font-family: var(--font-head), serif; font-style: italic; font-size: 11px; letter-spacing: 0.02em; text-transform: none; }
@media (max-width: 560px) { .logo-est { display: none; } }
.logo-text { font-family: var(--font-head), serif; font-size: 22px; font-weight: 600; color: var(--navy); letter-spacing: 2px; text-transform: uppercase; transition: opacity 0.3s; line-height: 1; }
.logo-text span { color: var(--gold-dark); }
.nav-list { display: flex; list-style: none; align-items: center; gap: clamp(0.6rem, 1.5vw, 1.8rem); flex-wrap: nowrap; }
.nav-list > li > a { color: var(--navy); text-decoration: none; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 1.2px; padding: 6px 0; position: relative; transition: color 0.3s; white-space: nowrap; }
.nav-list > li > a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 50%; background: var(--gold); transition: all 0.3s ease; transform: translateX(-50%); }
.nav-list > li > a:hover,
.nav-list > li > a.active { color: var(--gold-dark); }
.nav-list > li > a:hover::after,
.nav-list > li > a.active::after { width: 100%; }
.nav-btn-sale { background: var(--orange) !important; color: #fff !important; padding: 8px 18px !important; border-radius: var(--radius-btn, 3px); font-size: 12px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; transition: background 0.3s !important; }
.nav-btn-sale:hover { opacity: 0.9 !important; }
.nav-btn-sale::after { display: none !important; }
.nav-btn-gold { background: var(--gold) !important; color: var(--navy) !important; padding: 8px 16px !important; border-radius: var(--radius-btn, 3px); font-size: 11px !important; font-weight: 600 !important; white-space: nowrap; transition: all 0.3s !important; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; }
.nav-btn-gold:hover { background: var(--gold-dark) !important; color: #fff !important; }
.dropdown { position: relative; }
.dropdown::after { content: ''; position: absolute; width: 100%; height: 20px; bottom: -20px; left: 0; }
.dropdown-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%) translateY(8px); background: #fff; min-width: 220px; box-shadow: 0 20px 50px rgba(var(--shade),0.14); border-top: 3px solid var(--gold); border-radius: 0 0 6px 6px; opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.16,1,0.3,1); list-style: none; padding: 8px 0; z-index: 200; }
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-menu li a { display: block; padding: 10px 20px; color: var(--navy); text-decoration: none; font-size: 13px; font-weight: 400; border-left: 3px solid transparent; transition: all 0.2s; white-space: nowrap; }
.dropdown-menu li a:hover { background: var(--off-white); color: var(--gold-dark); border-left-color: var(--gold); padding-left: 26px; }
.menu-toggle { display: none; background: none; border: 2px solid var(--navy); border-radius: 3px; width: 40px; height: 40px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; transition: all 0.3s; }
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---- FOOTER ---- */
footer { background: var(--footer-bg, var(--navy)); border-top: 4px solid var(--gold); color: rgba(255,255,255,0.6); }
.footer-top { padding: 60px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.footer-about { }
.footer-logo { font-family: var(--font-head), serif; font-size: 28px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.footer-logo span { color: var(--gold); }
.footer-tagline { font-size: 13px; font-weight: 300; line-height: 1.8; margin-bottom: 20px; max-width: 280px; }
.footer-phone { font-family: var(--font-head), serif; font-size: 26px; color: var(--gold); text-decoration: none; display: block; margin-bottom: 4px; transition: color 0.3s; }
.footer-phone:hover { color: var(--gold-light); }
.footer-social { display: flex; gap: 12px; margin-top: 16px; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); text-decoration: none; font-size: 14px; transition: all 0.3s; }
.footer-social a:hover { background: var(--gold); color: var(--navy); }
.footer-col h4 { font-family: var(--font-body), sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: #fff; margin-bottom: 20px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a { font-size: 13px; color: rgba(255,255,255,0.45); text-decoration: none; font-weight: 300; transition: color 0.3s; }
.footer-col ul li a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 20px 0; }
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-copy { font-size: 12px; color: rgba(255,255,255,0.35); }
.footer-legal { display: flex; gap: 20px; }
.footer-legal a { font-size: 12px; color: rgba(255,255,255,0.3); text-decoration: none; transition: color 0.3s; }
.footer-legal a:hover { color: var(--gold); }
/* ---- PAGE HERO ---- */
.page-hero { position: relative; height: 55vh; min-height: 400px; background-color: var(--navy); background-size: cover; background-position: center 40%; background-attachment: fixed; display: flex; align-items: center; overflow: hidden; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(var(--shade),0.85) 0%, rgba(var(--shade),0.5) 60%, rgba(var(--shade),0.15) 100%); }
.page-hero-content { position: relative; z-index: 2; padding: 0 0 0 8%; }
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.3s; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span.current { color: var(--gold); }
.page-hero h1 { font-family: var(--font-head), serif; font-size: clamp(40px, 6vw, 74px); font-weight: 700; line-height: 1.0; color: #fff; margin-bottom: 16px; }
.page-hero h1 em { font-style: italic; color: var(--gold-light); }
.page-hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.65); max-width: 520px; line-height: 1.8; }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.hero-anim-1 { animation: heroFadeUp 0.8s 0.2s ease both; }
.hero-anim-2 { animation: heroFadeUp 0.8s 0.4s ease both; }
.hero-anim-3 { animation: heroFadeUp 0.8s 0.6s ease both; }
/* ---- USP STRIP ---- */
.usp-strip { background: var(--navy); overflow: hidden; }
.usp-inner { display: flex; justify-content: center; flex-wrap: wrap; }
.usp-item { display: flex; align-items: center; gap: 10px; padding: 18px 32px; color: rgba(255,255,255,0.75); font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; border-right: 1px solid rgba(255,255,255,0.07); transition: background 0.3s; }
.usp-item:last-child { border-right: none; }
.usp-item:hover { background: rgba(255,255,255,0.04); }
/* ---- SECTION TYPOGRAPHY ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--color-eyebrow, var(--orange)); margin-bottom: 16px; }
.eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--color-eyebrow, var(--orange)); }
.section-title { font-family: var(--font-head), serif; font-size: clamp(32px, 5vw, var(--size-title, 52px)); font-weight: 700; color: var(--color-heading, var(--navy)); line-height: 1.05; margin-bottom: 16px; }
.section-title em { font-style: italic; color: var(--gold-dark); }
.section-sub { font-size: var(--size-body, 15px); font-weight: 300; color: var(--color-muted, var(--text-muted)); max-width: 560px; line-height: var(--line-height-body, 1.8); }
/* HOW IT WORKS — numbered process steps, used on flooring.php */
.process { padding: 90px 0; background: var(--white); }
.process-header { text-align: center; margin-bottom: 56px; }
.process-header .section-sub { margin: 12px auto 0; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step { text-align: left; }
.step-num { display: block; font-family: var(--font-head), serif; font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 14px; }
.step-title { font-size: 17px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.step-text { font-size: 13px; font-weight: 300; color: var(--text-muted); line-height: 1.7; }
/* ---- RANGE / CATEGORY SECTION ---- */
.range-section { padding: 90px 0; background: var(--off-white); }
.range-header { margin-bottom: 60px; }
.range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* FLOORING TYPE CARDS — full-bleed photo cards with overlaid text, used on flooring.php */
.types-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.type-card { position: relative; border-radius: 4px; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; }
.type-card-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: #e0e4ee; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.type-card:hover .type-card-bg { transform: scale(1.05); }
.type-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--shade),0.85) 0%, rgba(var(--shade),0.35) 55%, transparent 100%); }
.type-card-content { position: relative; z-index: 1; padding: 28px 26px; color: #ffffff; }
.type-card-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.type-card-icon { display: block; font-size: 22px; margin-bottom: 8px; }
.type-card-title { display: block; font-family: var(--font-head), serif; font-size: 24px; font-weight: 600; color: #ffffff; margin-bottom: 10px; line-height: 1.1; }
.type-card-desc { font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.85); line-height: 1.7; margin: 0; }
/* ---- RANGE CARDS ---- */
.range-card { background: var(--white); border-radius: 4px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; }
.range-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(var(--shade),0.12); }
.range-card-img { height: 240px; background-size: cover; background-position: center; position: relative; overflow: hidden; background-color: #e0e4ee; }
.range-card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--shade),0.5) 0%, transparent 60%); }
.range-card-img-inner { height: 100%; width: 100%; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.range-card:hover .range-card-img-inner { transform: scale(1.05); }
.range-card-body { padding: 24px 26px 28px; }
.range-card-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); margin-bottom: 8px; }
.range-card-title { font-family: var(--font-head), serif; font-size: 24px; font-weight: 600; color: var(--navy); margin-bottom: 8px; line-height: 1.1; }
.range-card-desc { font-size: 13px; font-weight: 300; color: var(--text-muted); line-height: 1.7; margin-bottom: 16px; }
.range-card-link { font-size: 12px; font-weight: 600; color: var(--navy); text-transform: uppercase; letter-spacing: 1.5px; display: inline-flex; align-items: center; gap: 8px; transition: gap 0.3s, color 0.3s; }
.range-card-link::after { content: '→'; }
.range-card:hover .range-card-link { color: var(--gold-dark); gap: 12px; }
/* ---- FEATURE STRIP ---- */
.feature-strip { background: var(--navy); padding: 80px 0; position: relative; overflow: hidden; }
.feature-strip::before { content: ''; position: absolute; top: -50%; right: -10%; width: 60%; height: 200%; background: radial-gradient(ellipse, rgba(197,160,89,0.06) 0%, transparent 70%); pointer-events: none; }
.feature-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.feature-content { color: rgba(255,255,255,0.85); }
.feature-content h2 { color: #ffffff; }
.feature-content h2 em { color: var(--gold-light); font-style: italic; }
.feature-content .feature-eyebrow { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px; display: block; }
.feature-content .feature-title { font-family: var(--font-head), serif; font-size: clamp(28px, 4vw, 44px); font-weight: 700; color: #ffffff; line-height: 1.1; margin-bottom: 20px; }
.feature-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.feature-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.feature-title { font-family: var(--font-head), serif; font-size: clamp(30px, 4vw, 46px); font-weight: 700; color: #fff; line-height: 1.1; margin-bottom: 20px; }
.feature-title em { font-style: italic; color: var(--gold-light); }
.feature-body { font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 300; line-height: 1.8; margin-bottom: 28px; }
.feature-img { position: relative; border-radius: 4px; overflow: hidden; height: 400px; background-size: cover; background-position: center; background-color: #e0e4ee; }
.feature-img img, .feature-img-inner { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; }
.feature-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(197,160,89,0.15) 0%, transparent 60%); }
/* ---- CTA BANNER ---- */
.cta-banner { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.cta-content { position: relative; z-index: 1; }
.cta-banner h2 { font-family: var(--font-head), serif; font-size: clamp(32px, 5vw, 52px); font-weight: 700; color: #fff; margin-bottom: 16px; }
.cta-banner p { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.6); max-width: 500px; margin: 0 auto 36px; line-height: 1.8; }
/* ---- BUTTONS ---- */
.btn-gold { display: inline-block; background: var(--gold); color: var(--navy); padding: 16px 36px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border-radius: 2px; border: 2px solid var(--gold); transition: all 0.3s; }
.btn-gold:hover { background: transparent; color: var(--gold); }
/* ---- SCROLL REVEAL ---- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }
/* ---- PRODUCT CATALOGUE ---- */
.page-header { background: var(--navy); padding: 60px 0 50px; position: relative; overflow: hidden; }
.page-header::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(197,160,89,0.06) 0%, transparent 60%); }
.page-header-content { position: relative; z-index: 1; }
.page-header h1 { font-family: var(--font-head), serif; font-size: clamp(36px, 5vw, 62px); font-weight: 700; color: #fff; line-height: 1.0; margin-bottom: 12px; }
.page-header h1 em { font-style: italic; color: var(--gold-light); }
.page-header-sub { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.55); max-width: 560px; }
.filter-bar { background: var(--white); border-bottom: 1px solid rgba(var(--shade),0.08); position: sticky; top: 72px; z-index: 100; }
.filter-inner { display: flex; align-items: center; overflow-x: auto; scrollbar-width: none; }
.filter-inner::-webkit-scrollbar { display: none; }
.filter-tab { padding: 18px 24px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; transition: all 0.3s; background: none; border-top: none; border-left: none; border-right: none; font-family: var(--font-body), sans-serif; }
.filter-tab:hover { color: var(--navy); }
.filter-tab.active { color: var(--navy); border-bottom-color: var(--gold); }
.catalogue-section { padding: 60px 0; }
.section-label { display: flex; align-items: center; gap: 16px; margin-bottom: 36px; }
.section-label-text { font-family: var(--font-head), serif; font-size: 32px; font-weight: 600; color: var(--navy); }
.section-label-text em { font-style: italic; color: var(--gold-dark); }
.section-label-line { flex: 1; height: 1px; background: rgba(var(--shade),0.1); }
.section-label-count { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text-muted); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.product-card { background: var(--white); border-radius: var(--radius-card, 6px); overflow: hidden; border: 1px solid rgba(var(--shade),0.06); box-shadow: var(--shadow-card, 0 2px 8px rgba(0,0,0,0.07)); transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(var(--shade),0.1); }
.product-card-img { height: 260px; position: relative; overflow: hidden; background-color: var(--off-white); cursor: pointer; }
.product-card-img-inner { height: 100%; width: 100%; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); }
.product-card:hover .product-card-img-inner { transform: scale(1.04); }
.product-card-badge { position: absolute; top: 16px; left: 16px; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; border-radius: 2px; z-index: 2; }
.badge-sale { background: var(--orange); }
.badge-new { background: var(--navy); }
.badge-popular { background: var(--gold-dark); }
.badge-fast { background: #2e7d32; }
.badge-clearance { background: #6a1b9a; }
.badge-order { background: #1565c0; }
.card-gallery-count { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.55); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px; z-index: 3; }
.product-card-body { padding: 22px 24px 26px; }
.product-card-category { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--orange); margin-bottom: 6px; display: block; }
.product-card-name { font-family: var(--font-head), serif; font-size: 22px; font-weight: 600; color: var(--navy); line-height: 1.15; margin-bottom: 8px; }
a.product-card-name { display: block; text-decoration: none; }
.product-card-desc { font-size: 13px; font-weight: 300; color: var(--text-muted); line-height: 1.7; margin-bottom: 6px; }
/* "In stock in Skegness" — only appears when a real unit is on a shop floor,
so it reads as a genuine promise rather than marketing. Green because it is
the one line on the card that says "you can have this today". */
.product-card-stock { font-size: 12.5px; font-weight: 600; color: #1d6244; margin: 2px 0 8px; letter-spacing: .01em; }
/* Three answers, three weights. On the floor is the one worth driving for, so
it keeps the green and the bold. In stock out the back is real but needs
asking for. To order is the honest majority of the catalogue and should not
look like a warning — it is quiet, not red. */
.product-card-stock.is-floor { color: #1d6244; }
.product-card-stock.is-stock { color: var(--gold-dark, #7E5526); }
.product-card-stock.is-order { color: var(--text-muted); font-weight: 500; }
.product-card-detail { font-size: 12px; margin-bottom: 16px; }
.product-card-detail span { display: inline-block; background: var(--off-white); padding: 3px 10px; border-radius: 2px; margin: 2px 3px 2px 0; font-size: 11px; font-weight: 500; color: var(--navy); }
.product-card-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 16px; }
.price-now { font-family: var(--font-body), sans-serif; font-size: 17px; font-weight: 600; color: var(--color-price, var(--navy)); letter-spacing: -0.3px; }
.price-was { font-family: var(--font-body), sans-serif; font-size: 13px; font-weight: 400; color: #999; text-decoration: line-through; }
.product-card-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid rgba(var(--shade),0.07); } .product-card-actions-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-visit { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--navy); color: #fff; padding: 12px 16px; border-radius: var(--radius-btn, 3px); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; transition: background 0.3s; }
.btn-visit:hover { background: var(--navy-light); }
.btn-enquire { display: flex; align-items: center; justify-content: center; gap: 6px; background: #fff; color: var(--navy); padding: 12px 16px; border-radius: var(--radius-btn, 3px); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid rgba(var(--shade),0.25); transition: all 0.3s; cursor: pointer; }
.btn-enquire:hover { border-color: var(--gold); color: var(--gold-dark); }
.btn-buy-online { display: flex; align-items: center; justify-content: center; background: var(--gold, #C5A059); color: var(--navy, #0F203C); padding: 12px 16px; border-radius: var(--radius-btn, 3px); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: none; cursor: pointer; width: 100%; transition: opacity 0.3s; }
.btn-buy-online:hover { opacity: 0.85; }
.btn-buy-online:disabled { opacity: 0.5; cursor: wait; }
/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
.menu-toggle { display: flex; }
.header-right { display: none !important; }
.header-inner { grid-template-columns: 1fr auto; }
.main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 3px solid var(--gold); padding: 20px 0; z-index: 999; box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.main-nav.active { display: block; }
.nav-list { flex-direction: column; gap: 0; padding: 0 20px; }
.nav-list > li > a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(var(--shade),0.06); font-size: 14px; }
.dropdown-menu { position: static; transform: none; box-shadow: none; border-top: none; opacity: 1; visibility: visible; padding: 0 0 0 16px; }
.range-grid { grid-template-columns: 1fr 1fr; }
.types-grid { grid-template-columns: 1fr 1fr; }
.steps { grid-template-columns: 1fr 1fr; gap: 40px; }
.product-grid { grid-template-columns: 1fr 1fr !important; }
.feature-inner { grid-template-columns: 1fr; gap: 40px; }
.feature-img { height: 280px; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }}
@media (max-width: 640px) {
.page-hero { background-attachment: scroll; min-height: 320px; }
.page-hero-content { padding: 0 0 0 5%; }
.range-grid { grid-template-columns: 1fr; }
.types-grid { grid-template-columns: 1fr; }
.steps { grid-template-columns: 1fr; gap: 32px; }
.product-grid { grid-template-columns: 1fr !important; }
.product-card-actions { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.usp-inner { gap: 0; }
.usp-item { width: 50%; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 14px 16px; }
}
/* ============================================================
HOMEPAGE SPECIFIC
============================================================ */
/* HERO */
.hero { position: relative; height: 100vh; min-height: 600px; background: var(--navy); background-size: cover; background-position: center; display: flex; align-items: center; overflow: hidden; }
/* Hero layout variants */
/* padding-inline, not the `padding` shorthand: these three variant rules are
more specific than any `.hero .hero-content` rule, so a shorthand here
silently zeroed the bottom padding that keeps the copy clear of .hero-foot —
including the phone fix further down, which never actually took effect. */
.hero.layout-overlay-left .hero-content { padding-inline: 8%; max-width: 700px; text-align: left; }
.hero.layout-overlay-centre { justify-content: center; }
.hero.layout-overlay-centre .hero-content { padding-inline: 5%; max-width: 800px; text-align: center; }
.hero.layout-overlay-centre .hero-eyebrow { justify-content: center; }
.hero.layout-overlay-centre .hero-eyebrow::before { display: none; }
.hero.layout-overlay-centre .hero-btns { justify-content: center; }
.hero.layout-split { height: auto; min-height: 500px; background: none; }
.hero.layout-split .hero-overlay { display: none; }
.hero.layout-split .hero-split-inner { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; }
.hero.layout-split .hero-split-text { background: var(--navy); display: flex; align-items: center; padding: 60px 8%; }
.hero.layout-split .hero-split-img { background-size: cover; background-position: center; min-height: 400px; }
.hero.layout-split .hero-content { padding-inline: 0; max-width: 100%; }
/* Cookie banner */
.cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: var(--navy,#0F203C); color: #fff; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; z-index: 999; font-size: 13px; line-height: 1.5; }
.cookie-banner a { color: var(--gold,#C5A059); }
.cookie-btn { background: var(--gold,#C5A059); color: var(--navy,#0F203C); border: none; padding: 8px 20px; border-radius: var(--radius-btn,3px); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; letter-spacing: 0.5px; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(110deg, rgba(var(--shade),0.92) 0%, rgba(var(--shade),0.6) 60%, rgba(var(--shade),0.2) 100%); }
.hero-content { position: relative; z-index: 2; padding-inline: 8%; max-width: 700px; }
.hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; }
.hero-eyebrow::before { content: ''; display: block; width: 30px; height: 1px; background: var(--gold); }
.hero h2 { font-family: var(--font-head), serif; font-size: clamp(48px, 8vw, 90px); font-weight: 700; color: #fff; line-height: 0.95; margin-bottom: 24px; }
.hero h2 em { font-style: italic; color: var(--gold-light); }
.hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.65); max-width: 480px; line-height: 1.8; margin-bottom: 36px; }
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-scroll { position: absolute; bottom: 32px; left: 8%; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 2; }
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.4)); }
.hero-scroll span { font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.3); writing-mode: vertical-rl; }
.hero-stats { position: absolute; bottom: 32px; right: 8%; display: flex; gap: 48px; z-index: 2; }
.hero-stat { text-align: right; }
.hero-stat-num { display: block; font-family: var(--font-head), serif; font-size: 40px; font-weight: 700; color: var(--gold); line-height: 1; }
.hero-stat-label { display: block; font-size: 10px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-top: 4px; line-height: 1.5; }
/* USP STRIP (homepage version) */
.usp-icon { font-size: 14px; }
/* WELCOME */
.welcome { padding: 100px 0; background: var(--white); }
.welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.welcome-text p { font-size: 15px; font-weight: 300; color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; }
.welcome-text a { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--navy); text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; margin-top: 8px; transition: gap 0.3s; }
.welcome-text a:hover { gap: 14px; color: var(--gold-dark); }
.welcome-visual { position: relative; height: 500px; }
.welcome-img-frame { width: 100%; height: 100%; background: var(--off-white); border-radius: 4px; background-size: cover; background-position: center; }
.welcome-badge { position: absolute; bottom: -20px; left: -20px; background: var(--navy); color: #fff; padding: 20px 24px; border-radius: 4px; text-align: center; box-shadow: 0 8px 30px rgba(var(--shade),0.2); }
.welcome-badge-num { display: block; font-family: var(--font-head), serif; font-size: 36px; font-weight: 700; color: var(--gold); }
.welcome-badge-text { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 4px; }
/* CATEGORIES */
.categories { padding: 100px 0; background: var(--off-white); }
.categories-header { text-align: center; margin-bottom: 60px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cat-grid .cat-card:first-child { grid-column: 1 / 3; }
.cat-card { position: relative; height: 340px; border-radius: 4px; overflow: hidden; text-decoration: none; display: block; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.cat-card:hover { transform: scale(1.02); }
.cat-img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); background-color: var(--navy); }
.cat-card:hover .cat-img { transform: scale(1.06); }
.cat-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--shade),0.85) 0%, rgba(var(--shade),0.2) 60%, transparent 100%); }
.cat-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 28px 24px; }
.cat-label { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(197,160,89,0.4); padding: 4px 10px; border-radius: 2px; margin-bottom: 8px; }
.cat-name { display: block; font-family: var(--font-head), serif; font-size: 24px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.cat-desc { display: block; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.6); margin-bottom: 12px; }
.cat-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; transition: gap 0.3s; }
.cat-arrow::after { content: '→'; }
.cat-card:hover .cat-arrow { gap: 12px; }
/* JUNE BANNER */
.june-banner { padding: 80px 8%; display: grid; grid-template-columns: 1fr; position: relative; overflow: hidden; }
.june-inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; width: 100%; }
.june-bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--font-head), serif; font-size: clamp(120px, 18vw, 220px); font-weight: 700; color: rgba(255,255,255,0.03); white-space: nowrap; pointer-events: none; user-select: none; }
.june-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.june-title { font-family: var(--font-head), serif; font-size: clamp(40px, 6vw, 72px); font-weight: 700; color: #fff; line-height: 0.9; }
.june-subtitle { font-size: 14px; font-weight: 300; color: rgba(255,255,255,0.5); margin-top: 12px; }
.june-detail { font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 16px; max-width: 320px; line-height: 1.7; }
.june-pct-wrap { width: 180px; height: 180px; border-radius: 50%; border: 2px solid rgba(197,160,89,0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.june-pct { font-family: var(--font-head), serif; font-size: 56px; font-weight: 700; line-height: 1; }
.june-pct-off { font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 4px; }
.june-items { list-style: none; margin-bottom: 24px; }
.june-items li { font-size: 13px; color: rgba(255,255,255,0.6); padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 8px; }
.june-items li::before { content: '✓'; color: var(--gold); font-weight: 700; }
.btn-fire { display: inline-block; padding: 14px 32px; border-radius: 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; text-decoration: none; color: #fff; border: 2px solid; transition: all 0.3s; }
.btn-fire:hover { background: transparent !important; }
/* WHY US */
.why-us { padding: 100px 0; background: var(--white); }
.why-header { text-align: center; margin-bottom: 60px; }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.pillar { padding: 32px; background: var(--off-white); border-radius: 4px; border-top: 3px solid var(--gold); }
.pillar-num { display: block; font-family: var(--font-head), serif; font-size: 48px; font-weight: 700; color: rgba(var(--shade),0.08); line-height: 1; margin-bottom: 12px; }
.pillar-title { font-family: var(--font-head), serif; font-size: 20px; font-weight: 600; color: var(--navy); margin-bottom: 10px; }
.pillar-text { font-size: 13px; color: var(--text-muted); line-height: 1.7; font-weight: 300; }
/* FIND US */
.find-us { padding: 100px 0; background: var(--off-white); }
.find-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.find-locations { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; }
.find-location { padding: 24px; background: var(--white); border-radius: 4px; border-left: 4px solid var(--gold); }
.find-location-label { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.find-location-name { font-family: var(--font-head), serif; font-size: 22px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.find-location-detail { font-size: 13px; color: var(--text-muted); line-height: 1.8; }
.find-location-detail a { color: var(--navy); font-weight: 500; }
.find-map { border-radius: 4px; overflow: hidden; box-shadow: 0 8px 40px rgba(var(--shade),0.1); }
/* Store selector — the picked shop is the one on the map */
.find-location { transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s; }
.find-location[data-map] { cursor: pointer; }
.find-location[data-map]:hover { box-shadow: 0 6px 24px rgba(var(--shade),0.09); }
.find-location.is-active { border-left-color: var(--navy); box-shadow: 0 8px 30px rgba(var(--shade),0.12); }
.find-location-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.find-location-pick { font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 12px 18px; border-radius: 2px; border: 2px solid var(--gold); background: transparent; color: var(--navy); cursor: pointer; transition: all 0.25s; }
.find-location-pick:hover { background: var(--gold); }
.find-location.is-active .find-location-pick { background: var(--gold); border-color: var(--gold); cursor: default; }
.find-location-dir { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(var(--shade),0.25); padding-bottom: 2px; }
.find-location-dir:hover { border-bottom-color: var(--gold); }
/* BUTTONS */
.btn-primary { display: inline-block; background: var(--gold); color: var(--navy); padding: 16px 36px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border-radius: 2px; border: 2px solid var(--gold); transition: all 0.3s; }
.btn-primary:hover { background: transparent; color: var(--gold); }
.btn-ghost { display: inline-block; background: transparent; color: #fff; padding: 16px 36px; font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; border-radius: 2px; border: 2px solid rgba(255,255,255,0.3); transition: all 0.3s; }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
/* Homepage responsive */
@media (max-width: 1100px) {
.welcome-grid { grid-template-columns: 1fr; gap: 40px; }
.welcome-visual { height: 300px; }
.june-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
.june-pct-wrap { margin: 0 auto; }
.june-items { text-align: left; max-width: 320px; margin: 0 auto 24px; }
.pillars { grid-template-columns: 1fr 1fr; }
.find-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-stats { display: none; }
.cat-grid { grid-template-columns: 1fr 1fr; }
.cat-grid .cat-card:first-child { grid-column: 1 / 3; }
}
@media (max-width: 640px) {
.hero h2 { font-size: clamp(38px, 12vw, 56px); }
.cat-grid { grid-template-columns: 1fr; }
.cat-grid .cat-card:first-child { grid-column: 1; }
.pillars { grid-template-columns: 1fr; }
.hero-btns { flex-direction: column; }
}
/* ============================================================
CATEGORY PAGE SPECIFIC
============================================================ */
.page-hero-sub { font-size: 16px; font-weight: 300; color: rgba(255,255,255,0.65); max-width: 520px; line-height: 1.8; }
/* ============================================================
ABOUT PAGE SPECIFIC
============================================================ */
.about-hero-sub { font-size: 16px; color: rgba(255,255,255,0.65); max-width: 560px; }
.about-hero h1 { color: #ffffff; }
.about-hero h1 em { color: var(--gold-light); font-style: italic; }
.story-section { padding: 100px 0; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.story-img { height: 500px; border-radius: 4px; background-size: cover; background-position: center; background-color: var(--off-white); }
.story-text p { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; font-weight: 300; }
.story-est { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-top: 8px; }
/* STORY IMAGE STACK — main photo with a smaller accent photo overlapping
its bottom-right corner and the "Est. year" badge overlapping top-left,
same overhang technique as .welcome-visual/.welcome-badge on the homepage. */
.story-img-stack { position: relative; height: 480px; }
.story-img-main { display: block; width: 82%; height: 100%; margin-left: auto; background-size: cover; background-position: center; background-color: var(--off-white); border-radius: 4px; box-shadow: 0 20px 50px rgba(var(--shade),0.15); }
.story-img-accent { position: absolute; left: 0; bottom: -32px; width: 50%; height: 55%; background-size: cover; background-position: center; background-color: var(--off-white); border-radius: 4px; border: 6px solid #fff; box-shadow: 0 12px 30px rgba(var(--shade),0.18); }
.story-img-badge { position: absolute; top: -20px; left: -20px; z-index: 2; background: var(--navy); color: #fff; padding: 20px 24px; border-radius: 4px; text-align: center; box-shadow: 0 8px 30px rgba(var(--shade),0.2); }
.story-img-badge-num { display: block; font-family: var(--font-head), serif; font-size: 36px; font-weight: 700; color: var(--gold); }
.story-img-badge-text { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-top: 4px; }
.timeline { padding: 80px 0; background: var(--navy); }
.timeline-header { text-align: center; margin-bottom: 70px; }
.timeline-header .section-title { color: #fff; }
.timeline-header .section-sub { color: rgba(255,255,255,0.5); margin: 0 auto; }
.timeline-track { position: relative; max-width: 860px; margin: 0 auto; }
.timeline-track::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(197,160,89,0.25); transform: translateX(-50%); }
.timeline-item { display: grid; grid-template-columns: 1fr 30px 1fr; align-items: start; margin-bottom: 56px; position: relative; }
.timeline-content-left { padding-right: 48px; text-align: right; }
.timeline-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); border: 3px solid var(--navy); box-shadow: 0 0 0 2px rgba(197,160,89,0.5); margin-top: 14px; justify-self: center; flex-shrink: 0; }
.timeline-content-right { padding-left: 48px; }
.timeline-year { font-family: var(--font-head), serif; font-size: 44px; font-weight: 700; color: var(--gold); line-height: 1; }
.timeline-title { font-size: 10px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(197,160,89,0.55); margin-bottom: 10px; margin-top: 4px; }
.timeline-text { font-size: 14px; color: rgba(255,255,255,0.5); line-height: 1.8; font-weight: 300; }
@media (max-width: 768px) {
.timeline-track::before { left: 14px; }
.timeline-item { grid-template-columns: 28px 1fr; gap: 0; }
.timeline-content-left { display: none; }
.timeline-dot { margin-top: 12px; }
.timeline-content-right { padding-left: 24px; }
}
.values { padding: 100px 0; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }
.value-item { padding: 28px; background: var(--off-white); border-radius: 4px; }
.value-icon { font-size: 32px; margin-bottom: 12px; }
.value-title { font-family: var(--font-head), serif; font-size: 20px; font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.value-text { font-size: 13px; color: var(--text-muted); line-height: 1.7; font-weight: 300; }
@media (max-width: 1100px) {
.story-grid { grid-template-columns: 1fr; }
.story-img { height: 300px; }
.story-img-stack { height: 320px; }
.values-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.values-grid { grid-template-columns: 1fr; }
}
/* ============================================================
BRANDS / STOCK / CLEARANCE PAGES
============================================================ */
.brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; padding: 60px 0; }
.brand-card { background: var(--white); border-radius: 4px; padding: 32px 24px; text-align: center; border: 1px solid rgba(var(--shade),0.06); transition: box-shadow 0.3s, transform 0.3s; }
.brand-card:hover { box-shadow: 0 8px 30px rgba(var(--shade),0.1); transform: translateY(-2px); }
.brand-name { font-family: var(--font-head), serif; font-size: 22px; font-weight: 600; color: var(--navy); }
.stock-intro { padding: 60px 0 20px; text-align: center; }
/* ============================================================
SHARED CATEGORY PAGE COMPONENTS
============================================================ */
/* BREADCRUMB (hero version) */
.page-hero-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; animation: heroFadeUp 0.8s 0.2s ease both; }
.page-hero-breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.3s; }
.page-hero-breadcrumb a:hover { color: var(--gold); }
/* CTA BUTTONS PAIR */
.cta-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 32px; }
/* INTRO SECTION (2-col with image) */
.intro { padding: 90px 0; background: var(--white); }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.intro-text p { font-size: 15px; color: var(--text-muted); line-height: 1.8; margin-bottom: 16px; font-weight: 300; }
.intro-img { border-radius: 4px; overflow: hidden; height: 460px; background-size: cover; background-position: center; background-color: var(--off-white); }
/* FEATURE GRID */
.feature-strip .feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.feature-points { list-style: none; margin-top: 16px; }
.feature-points li { font-size: 14px; color: rgba(255,255,255,0.7); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; gap: 10px; }
.feature-points li::before { content: '✓'; color: var(--gold); font-weight: 700; flex-shrink: 0; }
/* BRANDS MENTION */
.brands-mention { padding: 60px 0; background: var(--off-white); }
.brands-mention-white { background: #fff; }
.brands-mention-light { background: var(--off-white); }
.brands-mention-dark { background: var(--navy); }
.brands-mention-dark .section-title { color: #fff; }
.brands-mention-dark .brand-tag { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }
/* TESTIMONIALS */
.testimonials { padding: 90px 0; }
.testimonials-light { background: var(--off-white); }
.testimonials-white { background: #fff; }
.testimonials-dark { background: var(--navy); }
.testi-header { text-align: center; margin-bottom: 50px; }
.testimonials-dark .testi-header .section-title { color: #fff; }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.testi-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 28px 26px; }
.testimonials-light .testi-card, .testimonials-white .testi-card { background: #fff; border-color: rgba(var(--shade),0.08); box-shadow: 0 4px 20px rgba(var(--shade),0.05); }
.testi-stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.testi-text { font-size: 14px; font-weight: 300; line-height: 1.8; color: rgba(255,255,255,0.75); margin-bottom: 18px; font-style: italic; }
.testimonials-light .testi-text, .testimonials-white .testi-text { color: var(--text-muted); }
.testi-name { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.testimonials-light .testi-name, .testimonials-white .testi-name { color: var(--navy); }
.brands-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.brand-tag { padding: 8px 20px; background: var(--white); border: 1px solid rgba(var(--shade),0.08); border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--navy); }
.brand-tags { display: flex; flex-wrap: wrap; gap: 10px; }
/* FLOORING TYPES */
.flooring-types { margin-top: 48px; }
/* HERITAGE / STATS STRIP */
.heritage { background: var(--navy); padding: 60px 0; }
.heritage-inner { display: flex; justify-content: center; gap: 0; flex-wrap: wrap; }
.heritage-stat { text-align: center; padding: 20px 48px; border-right: 1px solid rgba(255,255,255,0.07); }
.heritage-stat:last-child { border-right: none; }
.heritage-num { display: block; font-family: var(--font-head), serif; font-size: 48px; font-weight: 700; color: var(--gold); line-height: 1; }
.heritage-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 6px; }
.heritage-divider { display: none; }
/* CARAVAN BANNER */
.caravan-banner { padding: 80px 0; background: var(--navy); }
.caravan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.caravan-grid p { font-size: 14px; color: rgba(255,255,255,0.65); font-weight: 300; line-height: 1.8; margin-bottom: 16px; }
.caravan-img { height: 400px; border-radius: 4px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.05); }
/* ABOUT PAGE SPECIFIC */
.about-hero { position: relative; min-height: 500px; background: var(--navy); display: flex; align-items: center; overflow: hidden; }
.about-hero-inner { position: relative; z-index: 2; padding: 80px 8%; }
.about-hero-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.story { padding: 100px 0; }
.community { padding: 100px 0; background: var(--navy); }
.community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.community-img { height: 400px; border-radius: 4px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.05); }
.community h2 { color: #ffffff; }
.community h2 em { color: var(--gold-light); font-style: italic; }
.community p { color: rgba(255,255,255,0.65); }
.community p strong { color: rgba(255,255,255,0.9); }
.community .eyebrow { color: var(--gold); }
/* Responsive */
@media (max-width: 1100px) {
.intro-grid { grid-template-columns: 1fr; gap: 40px; }
.intro-img { height: 300px; }
.feature-grid { grid-template-columns: 1fr 1fr; }
.caravan-grid { grid-template-columns: 1fr; }
.community-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.feature-grid { grid-template-columns: 1fr; }
.heritage-inner { flex-direction: column; }
.heritage-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.07); padding: 16px 0; width: 100%; }
}
/* ---- STICKY CATALOGUE CTA ---- */
.sticky-cta { background: var(--primary, #0F203C); border-top: 3px solid var(--secondary, #C5A059); padding: 24px 0; }
.sticky-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.sticky-cta-text { font-size: 14px; color: rgba(255,255,255,0.7); }
.sticky-cta-text strong { color: #fff; }
.sticky-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.sticky-btn-visit { display: inline-flex; align-items: center; gap: 8px; background: var(--secondary, #C5A059); color: var(--primary, #0F203C); padding: 10px 22px; border-radius: 3px; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; transition: all 0.3s; }
.sticky-btn-visit:hover { opacity: 0.85; }
.sticky-btn-enquire { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: rgba(255,255,255,0.85); padding: 10px 22px; border-radius: 3px; font-size: 12px; font-weight: 700; text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid rgba(255,255,255,0.3); transition: all 0.3s; }
.sticky-btn-enquire:hover { border-color: var(--secondary, #C5A059); color: var(--secondary, #C5A059); }
@media (max-width: 640px) {
.sticky-cta-inner { flex-direction: column; text-align: center; }
.sticky-cta-btns { width: 100%; justify-content: center; }
}
/* ---- NAV SEARCH BUTTON ---- */
.nav-search-btn { background: none; border: none; cursor: pointer; color: var(--nav-text, #fff); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; transition: background 0.2s; margin-left: 8px; }
.nav-search-btn:hover { background: rgba(255,255,255,0.1); }
.header-right { display: flex; align-items: center; gap: 8px; }
/* ---- FEATURED PRODUCTS (Homepage) ---- */
.featured-section { padding: 80px 0; background: var(--bg-white, #fff); }
.featured-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }
.featured-card { text-decoration: none; border-radius: 8px; overflow: hidden; border: 1px solid #eee; background: #fff; transition: box-shadow 0.3s, transform 0.3s; display: flex; flex-direction: column; }
.featured-card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.12); transform: translateY(-4px); border-color: rgba(197,160,89,0.4); }
.featured-card-img { height: 220px; background-size: cover; background-position: center; background-color: var(--off-white, #EFF0EB); position: relative; }
.featured-badge { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 20px; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.featured-card-body { padding: 20px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.featured-card-cat { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--color-eyebrow, var(--orange)); }
.featured-card-name { font-family: var(--font-head), serif; font-size: 18px; font-weight: 700; color: var(--color-heading, var(--navy)); line-height: 1.2; }
.featured-card-price { margin-top: 4px; }
.featured-card-cta { margin-top: auto; padding-top: 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-dark, #A88644); }
.btn-outline { display: inline-block; padding: 12px 32px; border: 2px solid var(--primary, #0F203C); color: var(--primary, #0F203C); border-radius: 3px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; text-decoration: none; transition: all 0.3s; }
.btn-outline:hover { background: var(--primary, #0F203C); color: #fff; }
@media (max-width: 640px) { .featured-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .featured-card-img { height: 160px; } }
/* ADD TO LIST — heart toggle on card image, and button inside the Buy Now modal */
.card-list-toggle { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; transition: transform 0.2s, background 0.2s; }
.card-list-toggle svg { fill: none; stroke: #e75480; stroke-width: 1.6; transition: fill 0.2s; }
.card-list-toggle:hover { transform: scale(1.1); background: #fff; }
.card-list-toggle.on-list { background: #fff; }
.card-list-toggle.on-list svg { fill: #e75480; }
.btn-add-to-list { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: none; color: var(--navy); padding: 10px 16px; border-radius: var(--radius-btn, 3px); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid rgba(var(--shade),0.15); cursor: pointer; margin-top: 8px; transition: all 0.3s; }
.btn-add-to-list svg { fill: #e75480; flex-shrink: 0; }
.btn-add-to-list:hover { border-color: var(--gold); color: var(--gold-dark); }
.btn-add-to-cart { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; background: none; color: var(--navy); padding: 10px 16px; border-radius: var(--radius-btn, 3px); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; border: 1px solid rgba(var(--shade),0.15); cursor: pointer; margin-top: 8px; transition: all 0.3s; }
.btn-add-to-cart svg { flex-shrink: 0; }
.btn-add-to-cart:hover { border-color: var(--gold); color: var(--gold-dark); }
/* BUY NOW QUICK-VIEW MODAL */
.sf-buynow-overlay { display: none; position: fixed; inset: 0; z-index: 9997; background: rgba(var(--shade),0.7); align-items: center; justify-content: center; padding: 24px; }
.sf-buynow-box { background: #fff; border-radius: 8px; max-width: 960px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; }
.sf-buynow-close { position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.06); border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--navy); z-index: 2; transition: background 0.2s; }
.sf-buynow-close:hover { background: rgba(0,0,0,0.12); }
.sf-buynow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.sf-buynow-media { padding: 32px; background: var(--off-white, #EFF0EB); }
.sf-buynow-main-img { width: 100%; height: 380px; background-size: cover; background-position: center; border-radius: 4px; background-color: #e0e4ee; }
.sf-buynow-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.sf-buynow-thumb { width: 56px; height: 56px; background-size: cover; background-position: center; border-radius: 4px; cursor: pointer; opacity: 0.55; border: 2px solid transparent; transition: all 0.2s; background-color: #e0e4ee; }
.sf-buynow-thumb:hover { opacity: 0.85; }
.sf-buynow-thumb.active { opacity: 1; border-color: var(--gold); }
.sf-buynow-info { padding: 40px 40px 32px; }
.sf-buynow-brand { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gold-dark, #A88644); margin-bottom: 8px; }
.sf-buynow-title { font-family: var(--font-head), serif; font-size: 26px; font-weight: 600; color: var(--navy); line-height: 1.2; margin-bottom: 14px; }
.sf-buynow-price { font-size: 20px; margin-bottom: 18px; }
.sf-buynow-price .price-now { font-size: 20px; }
.sf-buynow-desc { font-size: 14px; color: var(--text-muted); line-height: 1.8; font-weight: 300; margin-bottom: 16px; }
.sf-buynow-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }
.sf-buynow-tags span { background: var(--off-white, #EAEBE6); color: var(--navy); font-size: 11px; padding: 5px 12px; border-radius: 20px; }
.sf-buynow-qty-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.sf-buynow-qty-row label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--navy); }
.sf-buynow-qty { display: flex; align-items: center; border: 1px solid rgba(var(--shade),0.15); border-radius: var(--radius-btn, 3px); overflow: hidden; }
.sf-buynow-qty button { background: var(--off-white, #EAEBE6); border: none; width: 34px; height: 34px; font-size: 16px; cursor: pointer; color: var(--navy); }
.sf-buynow-qty button:hover { background: #e8e8e8; }
.sf-buynow-qty span { display: inline-block; min-width: 36px; text-align: center; font-size: 14px; font-weight: 600; color: var(--navy); }
.sf-buynow-actions { margin-bottom: 24px; }
.sf-buynow-actions .product-card-actions-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.sf-buynow-share { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(var(--shade),0.08); }
.sf-buynow-share span { font-size: 12px; color: var(--text-muted); }
.sf-buynow-share-icons { display: flex; gap: 8px; }
.sf-buynow-share-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--off-white, #EAEBE6); color: var(--navy); text-decoration: none; transition: background 0.2s, transform 0.2s, color 0.2s; }
.sf-buynow-share-icon:hover { background: var(--gold); color: var(--navy); transform: translateY(-2px); }
@media (max-width: 768px) {
.sf-buynow-grid { grid-template-columns: 1fr; }
.sf-buynow-media { padding: 24px; }
.sf-buynow-info { padding: 24px; }
.sf-buynow-main-img { height: 260px; }
}
/* ============================================================
KEYBOARD FOCUS
------------------------------------------------------------
Nine places in this codebase set outline:none on form fields —
the header search, the newsletter inputs, the catalogue search,
every field in the customer portal. Some replace it with a
border colour change, which is a colour-only cue (WCAG 1.4.1)
and invisible to someone scanning for their position; most
replace it with nothing at all.
:focus-visible, not :focus. The browser only matches it for
keyboard/assistive focus, never for a mouse click — so this
restores the ring for the people who need it without bringing
back the click outline those outline:none rules were written
to suppress. Nothing changes for a mouse user.
!important is load-bearing and not laziness: several of those
rules are inline style="" attributes (header.php, catalogue.php),
which beat any stylesheet selector, and others are more specific
than this one (.fg input:focus in portal.php). Without it this
rule silently loses in exactly the places that need it most.
Two colours, not one: a single ring disappears against whichever
background it happens to match. The white outer ring separates
the accent from dark navy panels, and the accent separates it
from white forms — so it stays visible on both.
============================================================ */
:focus-visible {
outline: 3px solid var(--accent, #e8541a) !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.9) !important;
border-radius: 2px;
}
/* Respect the OS "reduce motion" setting. The announcement bar runs a
shimmer on a 3s infinite loop and the page uses scroll-behavior:smooth;
both are exactly what this setting exists to turn off. Kept to a single
short duration rather than 0s so anything mid-transition still settles
instead of snapping. */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ---------- HERO VIDEO ----------
The film sits behind the gradient overlay, never in front of the words. It
fades in only once it is genuinely playing, so a slow connection shows the
poster still rather than a black rectangle, and .hero keeps its own
background-image underneath as the last fallback of all.
The grain is not decoration. A loop compressed small enough to serve off
cPanel bands badly on flat walls and sky; a fine noise layer hides that,
which is why it is on every piece of film work that does not look cheap. */
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.hero-video.is-playing { opacity: 1; }
/* A 16:9 frame in a tall phone viewport loses about a third off each side,
and on this footage the window — the sea, the beach huts, the whole reason
the shot is ours — sits hard left. Centred, a phone shows a lamp and a
cushion. Pulling the framing left keeps the window in shot without losing
the sofa, which is still the thing being sold. */
.hero-video { object-position: center; }
@media (max-width: 760px) { .hero-video { object-position: 34% center; } }
@media (max-width: 480px) { .hero-video { object-position: 36% center; } }
.hero-grain { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.26; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
/* Asked for less motion: the still is the whole design, so drop the film
entirely rather than freeze a video element on top of it. */
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
.hero-grain { opacity: 0.18; }
}
/* ---------- OPEN RIGHT NOW ----------
Sits under the promises strip and answers the thing a visitor actually
wants: can I go today. Read from the same hours the admin edits, so it
cannot drift out of step with the sign on the door. */
.sf-open-now { background: var(--bg-white, #F7F8F4); border-bottom: 1px solid rgba(var(--shade), 0.08); padding: 16px 0; }
.sf-open-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.sf-open-head { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--color-heading); letter-spacing: .01em; }
.sf-open-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 3px rgba(var(--shade), 0.08); flex: none; }
.sf-open-head.is-open .sf-open-dot { background: #1d6244; box-shadow: 0 0 0 3px rgba(29, 98, 68, 0.16); }
.sf-open-list { display: flex; gap: 28px; flex-wrap: wrap; }
.sf-open-shop b { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-heading); line-height: 1.4; }
.sf-open-shop span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-muted); }
.sf-open-shop span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); flex: none; }
.sf-open-shop.is-open span::before { background: #1d6244; }
.sf-open-shop.is-open span { color: #1d6244; }
@media (max-width: 700px) { .sf-open-list { gap: 18px; } .sf-open-inner { gap: 12px; } }
/* ---------- DELIVERED TO ----------
A slow drift of real place names. The plain list underneath is the same
towns as ordinary text: the rail is decoration and is hidden from screen
readers, so the information itself is never trapped in an animation.
Paused on hover so anyone looking for their own village can read it. */
.sf-delivered { padding: 54px 0 58px; background: var(--bg-light, #EFF0EB); overflow: hidden; }
.sf-delivered-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.sf-delivered-note { font-size: 12.5px; color: var(--text-muted); }
.sf-delivered-rail { overflow: hidden; }
.sf-delivered-run { display: flex; width: max-content; animation: sfDeliverDrift 78s linear infinite; }
.sf-delivered-run span { font-family: var(--font-head), serif; font-style: italic; font-size: clamp(21px, 2.7vw, 34px); color: var(--color-body); padding-right: 22px; white-space: nowrap; }
.sf-delivered-run span::after { content: '\00B7'; padding-left: 22px; color: var(--text-muted); font-style: normal; }
.sf-delivered:hover .sf-delivered-run { animation-play-state: paused; }
@keyframes sfDeliverDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sf-delivered-plain { margin: 20px 0 0; font-size: 12px; line-height: 1.9; color: var(--text-muted); }
@media (prefers-reduced-motion: reduce) {
.sf-delivered-rail { display: none; }
.sf-delivered-plain { font-size: 13px; color: var(--color-body); }
}
/* ==========================================================
SQUIRES LAYOUT PASS
----------------------------------------------------------
The palette and the typefaces come from settings. This is the part that
settings cannot reach: how big the type is, how much of the film you can
actually see, and whether a thing sits in a box or runs to the edge of the
screen. It is what makes the page look like the design rather than like the
old page in new colours.
========================================================== */
/* ---- THE HERO IS A ROOM, NOT A BANNER ----
The old overlay opened at 0.92 opacity on the left, which is most of a
solid navy panel with a photograph faintly behind it. Now that the film is
a real room worth looking at, the overlay only has to do one job: keep white
type readable over the left third. A directional wash plus a soft vignette
does that at a third of the weight. */
.hero-overlay {
background:
linear-gradient(100deg, rgba(var(--shade), 0.74) 0%, rgba(var(--shade), 0.46) 38%, rgba(var(--shade), 0.12) 70%, rgba(var(--shade), 0) 100%),
radial-gradient(130% 100% at 50% 38%, transparent 44%, rgba(var(--shade), 0.42));
}
.hero { height: min(88vh, 860px); min-height: 540px; }
/* Bodoni wants size and air. At 74px in a bold weight it reads like a notice;
at this size in the regular it reads like a magazine cover, which is the
whole point of choosing a didone. */
.hero h2 {
font-size: clamp(3rem, 7.6vw, 6.6rem);
font-weight: 400;
line-height: 0.94;
letter-spacing: -0.022em;
text-wrap: balance;
margin-bottom: 26px;
}
.hero h2 em { font-style: italic; color: inherit; }
.hero-sub { font-size: clamp(15px, 1.3vw, 17.5px); color: rgba(255,255,255,0.82); max-width: 46ch; line-height: 1.62; margin-bottom: 34px; }
.hero-eyebrow { color: #fff; letter-spacing: 0.24em; font-size: 10.5px; text-shadow: 0 1px 12px rgba(0,0,0,0.45); }
.hero-eyebrow::before { width: 34px; height: 2px; background: var(--secondary); }
/* ---- PILLS, NOT SLABS ----
A square gold block with letterspaced capitals is the house style of every
furniture retailer in the country. The pill is the one shape none of them
use, and it is what the reference sites all reach for. */
.btn-primary, .btn-ghost, .sticky-btn-visit, .cookie-btn {
border-radius: 100px;
text-transform: none;
letter-spacing: 0.01em;
font-size: 14px;
font-weight: 500;
padding: 13px 26px;
transition: transform .3s cubic-bezier(.2,.7,.3,1), background .3s, color .3s, border-color .3s;
}
.btn-primary { background: var(--color-heading); color: var(--bg, #fff); border: 1px solid var(--color-heading); }
.btn-primary:hover { background: transparent; color: #fff; border-color: #fff; transform: translateY(-2px); }
.btn-ghost { border: 1px solid rgba(255,255,255,0.45); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,0.08); }
.btn-ghost:hover { border-color: #fff; color: #fff; transform: translateY(-2px); }
/* The stats sat bottom-right in gold, competing with the headline for the
same glance. Quietened to a caption so the film and the sentence win. */
.hero-stats { gap: 34px; opacity: 0.9; }
.hero-stat-num { font-size: 26px; font-weight: 400; color: rgba(255,255,255,0.92); }
.hero-stat-label { font-size: 9.5px; letter-spacing: 1.8px; color: rgba(255,255,255,0.5); }
.hero-scroll span { font-size: 9.5px; letter-spacing: 2.4px; }
/* ---- THE PROMISES, WITHOUT THE EMOJI ----
Free delivery and a price match are worth saying. A lorry, a tick, a star, a
flag and a sofa in a row are what a template looks like. The words stay, the
clip-art goes, and the strip becomes a quiet rule instead of a navy band. */
.usp-icon { display: none; }
.usp-strip { background: var(--color-heading); }
.usp-item { padding: 15px 26px; font-size: 10.5px; letter-spacing: 0.2em; color: rgba(255,255,255,0.72); }
/* ---- HEADINGS ----
One scale, used everywhere, with the italic doing the emphasis rather than a
second colour. */
.section-title { font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(30px, 4.4vw, var(--size-title, 52px)); }
.section-title em { font-style: italic; color: inherit; }
.section-label-text { font-weight: 400; letter-spacing: -0.015em; font-size: clamp(26px, 3.2vw, 36px); }
.section-label-text em { font-style: italic; color: inherit; }
/* ---- CATEGORIES RUN TO THE EDGE ----
Rounded cards with gaps between them read as a component library. Butting
the tiles together with a single hairline between makes the grid one object,
which is what every one of the reference sites does with its work. */
.cat-grid { gap: 1px; background: rgba(var(--shade), 0.10); }
.cat-card { border-radius: 0; height: 380px; }
.cat-card:hover { transform: none; }
.cat-card:hover .cat-img { transform: scale(1.045); }
@media (max-width: 900px) { .cat-card { height: 300px; } }
/* Cards elsewhere lose the rounding too, so one shape reads across the page. */
.product-card, .brand-card, .range-card, .testi-card { border-radius: 0; }
/* ==========================================================
THE SQUIRES HOMEPAGE
Sections built to the design rather than restyled from the old ones.
Everything sits on the site tokens, so the whole page still follows the
Site Theme screen.
========================================================== */
.sq-block { position: relative; }
.sq-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: clamp(56px,7vw,104px) 0 clamp(20px,2.4vw,30px); }
.sq-label { display: block; font-family: var(--font-body), sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--text-muted); }
.sq-h { font-family: var(--font-head), serif; font-weight: 400; letter-spacing: -.02em; line-height: 1.03; color: var(--color-heading); margin: 9px 0 0; font-size: clamp(29px,4.2vw,52px); }
.sq-h em { font-style: italic; }
.sq-aside { max-width: 35ch; font-size: 14px; color: var(--color-body); margin: 0; }
/* ---- THE SEASON, AS A MASTHEAD ----
Twelve of these already exist in settings, one per month, each with its own
colour. Printed as a masthead rather than a starburst: the fact that the
shop has a named season is good material, the sticker is not. */
.sq-season { background: var(--bg-white, #F7F8F4); border-bottom: 1px solid rgba(var(--shade), 0.12); }
.sq-season-bar { height: 3px; background: linear-gradient(90deg, var(--sq-season, var(--secondary)), color-mix(in srgb, var(--sq-season, var(--secondary)) 20%, transparent)); }
.sq-season-in { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; padding: 20px 0; }
.sq-season h2 { font-family: var(--font-head), serif; font-weight: 400; font-size: clamp(21px,2.8vw,32px); letter-spacing: -.012em; color: var(--color-heading); margin: 0; }
.sq-season h2 em { font-style: italic; color: var(--sq-season, var(--secondary)); }
.sq-season-right { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.sq-offer { font-size: 13.5px; color: var(--color-body); }
.sq-offer b { color: var(--color-heading); font-weight: 600; }
.sq-season-btn { padding: 10px 20px !important; font-size: 13px !important; }
/* ---- THE CATALOGUE, BY MATERIAL ----
Butted together with a hairline so the grid reads as one object. The
swatches are drawn in CSS and are the slots real photography drops into. */
.sq-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(var(--shade), 0.10); border-block: 1px solid rgba(var(--shade), 0.10); }
@media (max-width: 1040px) { .sq-mosaic { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .sq-mosaic { grid-template-columns: repeat(2, 1fr); } }
.sq-tile { position: relative; aspect-ratio: 1/1; display: flex; flex-direction: column; justify-content: flex-end; padding: 19px; overflow: hidden; text-decoration: none; background: var(--bg-white); }
.sq-swatch { position: absolute; inset: 0; z-index: 0; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.sq-tile:hover .sq-swatch { transform: scale(1.05); }
/* A photograph in the swatch slot: same box, same hover, cropped to the square. */
.sq-photo { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.sq-scrim { position: absolute; inset: auto 0 0 0; height: 72%; z-index: 1; background: linear-gradient(180deg, transparent, rgba(10,16,18,.34) 46%, rgba(10,16,18,.74)); }
.sq-tile-meta { position: relative; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.sq-tile-meta b { font-family: var(--font-body), sans-serif; font-size: 15px; font-weight: 500; color: #F3F2EE; }
.sq-n { font-size: 11.5px; color: rgba(243,242,238,.66); font-variant-numeric: tabular-nums; }
.sq-go { position: absolute; top: 17px; right: 17px; z-index: 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.16); opacity: 0; transform: translateY(-4px); transition: opacity .35s, transform .35s; }
.sq-tile:hover .sq-go { opacity: 1; transform: none; }
.sq-go svg { width: 11px; height: 11px; }
.sq-sw-wool { background: repeating-linear-gradient(46deg,#B4A992 0 2px,#C3B9A5 2px 4px), linear-gradient(150deg,#CEC4B0,#A79C86); }
.sq-sw-oak { background: repeating-linear-gradient(96deg,rgba(112,78,40,.18) 0 3px,transparent 3px 11px), linear-gradient(120deg,#C39A62,#A2763F 60%,#B58852); }
.sq-sw-walnut { background: repeating-linear-gradient(93deg,rgba(46,26,12,.22) 0 2px,transparent 2px 9px), linear-gradient(126deg,#5E4028,#3B2818 58%,#4E3622); }
.sq-sw-velvet { background: radial-gradient(120% 82% at 30% 18%,rgba(255,255,255,.30),transparent 60%), linear-gradient(160deg,#4A5A63,#2B373F); }
.sq-sw-linen { background: repeating-linear-gradient(0deg,rgba(255,255,255,.45) 0 1px,transparent 1px 5px), repeating-linear-gradient(90deg,rgba(148,138,118,.34) 0 1px,transparent 1px 5px), linear-gradient(140deg,#E0D9C8,#CBC2AD); }
.sq-sw-stone { background: radial-gradient(90% 72% at 35% 22%,rgba(255,255,255,.40),transparent 62%), linear-gradient(150deg,#CFCFC9,#A4A59F); }
.sq-sw-brass { background: linear-gradient(112deg,#836427,#D4AC5F 38%,#957132 62%,#C29E56); }
.sq-sw-slate { background: linear-gradient(150deg,#5A6970,#39454B); }
/* ---- PIECES ON THE FLOOR ---- */
.sq-pieces { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(var(--shade), 0.10); border-block: 1px solid rgba(var(--shade), 0.10); }
@media (max-width: 980px) { .sq-pieces { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .sq-pieces { grid-template-columns: 1fr; } }
.sq-piece { display: flex; flex-direction: column; background: var(--bg, #fff); padding-bottom: 22px; text-decoration: none; }
.sq-shot { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-white); }
.sq-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.3,1); }
.sq-piece:hover .sq-shot img { transform: scale(1.045); }
.sq-flag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 6px 12px; border-radius: 100px; background: color-mix(in srgb, var(--bg) 86%, transparent); border: 1px solid rgba(var(--shade), 0.10); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent, var(--secondary)); }
.sq-piece-body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 0; }
.sq-cat { font-size: 10.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); }
.sq-piece-name { font-family: var(--font-head), serif; font-weight: 400; font-size: 20px; line-height: 1.22; letter-spacing: -.006em; color: var(--color-heading); margin-top: 9px; }
.sq-av { display: inline-flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 10px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.sq-av::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex: none; background: currentColor; }
.sq-av.is-floor { color: #1d6244; }
.sq-av.is-stock { color: var(--gold-dark, #7E5526); }
.sq-av.is-order { color: var(--text-muted); }
.sq-price { margin-top: auto; padding-top: 16px; display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
.sq-now { font-family: var(--font-body), sans-serif; font-size: 18px; font-weight: 500; letter-spacing: -.01em; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.sq-was { font-size: 13.5px; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
.sq-fin { width: 100%; margin-top: 3px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sq-fin b { color: var(--color-body); font-weight: 500; }
/* ---- MAKE IT YOURS ----
The order picker turned round to face the customer: base price plus what
each option adds, which is the arithmetic the shop floor already does. */
.sq-config { display: grid; grid-template-columns: 1.04fr .96fr; border-block: 1px solid rgba(var(--shade), 0.10); }
@media (max-width: 920px) { .sq-config { grid-template-columns: 1fr; } }
.sq-stage { position: relative; min-height: clamp(320px,42vw,540px); overflow: hidden; background: linear-gradient(148deg,#4A5A63,#26313A); }
.sq-stage-sheen { position: absolute; inset: 0; background: radial-gradient(78% 62% at 30% 16%, rgba(255,255,255,.30), transparent 64%), linear-gradient(180deg, transparent 52%, rgba(10,16,18,.42)); }
.sq-cap { position: absolute; left: clamp(18px,2.2vw,28px); bottom: clamp(16px,2vw,24px); z-index: 3; }
.sq-cap b { display: block; font-family: var(--font-head), serif; font-weight: 400; font-size: clamp(19px,2.2vw,27px); color: #F3F2EE; letter-spacing: -.01em; }
.sq-cap span { display: block; margin-top: 7px; font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: rgba(243,242,238,.7); }
.sq-panel { display: flex; flex-direction: column; gap: clamp(16px,2vw,24px); padding: clamp(28px,3.6vw,56px) clamp(22px,3vw,54px); background: var(--bg); }
.sq-config-name { font-size: clamp(26px,3.4vw,40px) !important; margin-top: 4px !important; }
.sq-optrow { display: flex; flex-direction: column; gap: 10px; }
.sq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sq-chip { display: inline-flex; align-items: center; gap: 9px; border: 1px solid rgba(var(--shade), 0.18); background: transparent; color: var(--color-heading); border-radius: 100px; padding: 9px 16px; font-family: var(--font-body), sans-serif; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.sq-chip:hover { border-color: var(--color-heading); }
.sq-chip[aria-pressed="true"] { background: var(--color-heading); color: var(--bg); border-color: var(--color-heading); }
.sq-up { font-size: 11px; opacity: .62; font-variant-numeric: tabular-nums; }
.sq-stores3 { display: flex; gap: 20px; flex-wrap: wrap; }
.sq-stores3 span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-muted); }
.sq-stores3 i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--shade), 0.22); flex: none; }
.sq-stores3 .yes { color: var(--color-body); }
.sq-stores3 .yes i { background: #1d6244; }
.sq-total { margin-top: auto; padding-top: clamp(16px,2vw,22px); border-top: 1px solid rgba(var(--shade), 0.14); display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap; }
.sq-big { font-family: var(--font-body), sans-serif; font-size: clamp(26px,3.2vw,36px); font-weight: 500; letter-spacing: -.022em; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.sq-mo { font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sq-mo b { color: var(--color-body); font-weight: 500; }
.sq-built { width: 100%; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
/* ---- THE THREE SHOWROOMS ---- */
.sq-rooms { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(var(--shade), 0.10); border-top: 1px solid rgba(var(--shade), 0.10); }
@media (max-width: 900px) { .sq-rooms { grid-template-columns: 1fr; } }
.sq-room { display: flex; flex-direction: column; gap: 12px; min-height: 246px; padding: clamp(28px,3.4vw,44px) clamp(22px,2.6vw,36px); background: var(--bg-white); }
.sq-room h5 { font-size: clamp(23px,2.5vw,31px) !important; margin: 0 !important; }
.sq-room-trading { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted); }
.sq-room address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--color-body); max-width: 27ch; }
.sq-tel { font-size: 13.5px; color: var(--color-body); text-decoration: none; font-variant-numeric: tabular-nums; }
.sq-tel:hover { color: var(--color-heading); }
.sq-room-status { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); }
.sq-room-status i { width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--shade), 0.24); flex: none; }
.sq-room.is-open .sq-room-status { color: #1d6244; }
.sq-room.is-open .sq-room-status i { background: #1d6244; }
.sq-room-status b { font-weight: 500; }
/* ==========================================================
HERO FAULTS, FIXED
Four things that were wrong on the live page and are not wrong in the
design. All of them appeared only once the type got big.
========================================================== */
/* 1. THE HEADLINE WAS BREAKING INTO FIVE LINES.
.hero-content is capped at 700px, which was right at 74px type and is
about seven characters a line at 105px. The design wraps "Furniture that
/ lives in your light." across two. Widen the column, and cap the
heading in characters rather than pixels so it wraps by its own measure
at any size. */
.hero.layout-overlay-left .hero-content,
.hero .hero-content { max-width: min(1120px, 66vw); }
.hero h2 { max-width: 15ch; font-size: clamp(2.75rem, 6.2vw, 6rem); }
.hero-sub { max-width: 48ch; }
@media (max-width: 900px) {
.hero.layout-overlay-left .hero-content, .hero .hero-content { max-width: 100%; }
.hero h2 { max-width: 100%; }
}
/* 2. "SCROLL" SAT ON TOP OF THE BUTTONS.
It is pinned bottom-left at the same 8% inset the buttons use, so the
taller headline pushed the buttons straight through it. It is decoration
on a page that now says "Browse the catalogue" in words — so it goes. */
.hero-scroll { display: none; }
/* 3. THE STATS WERE FLOATING OVER THE FURNITURE.
30+ / 3 / 100% bottom-right, over the middle of the photograph, competing
with the headline for the same glance. The design has no such block; the
three showrooms get a section of their own further down. */
.hero-stats { display: none; }
/* 4. THE HERO WAS TALLER THAN THE SCREEN.
At 88vh plus a 116px announcement bar and header, the buttons fell below
the fold on a laptop. Sized against the space actually left. */
.hero { height: min(84vh, 820px); min-height: 520px; }
/* ==========================================================
THE LIGHT
The idea the design rests on. Two painted layers over the hero, both
independent of whether the film is there: a shaft that travels, and the
colour of the hour. Driven by three custom properties the script sets.
========================================================== */
:root { --hero-hue: 38; --hero-ray: 0.34; --hero-sx: 22%; }
/* The shaft. Skewed, blurred and screened so it reads as light falling
through a window rather than a white stripe drawn on top. It drifts slowly
on its own as well as moving with the hour. */
.hero-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-light span {
position: absolute; top: -16%; bottom: -16%; left: var(--hero-sx); width: 24%;
transform: skewX(-13deg); filter: blur(3px); mix-blend-mode: screen;
background: linear-gradient(90deg, transparent,
hsl(var(--hero-hue) 84% 88% / var(--hero-ray)) 26%,
hsl(var(--hero-hue) 92% 95% / var(--hero-ray)) 50%,
hsl(var(--hero-hue) 84% 88% / var(--hero-ray)) 74%, transparent);
animation: heroDrift 52s ease-in-out infinite alternate;
}
.hero-light span.b { left: calc(var(--hero-sx) + 33%); width: 12%; opacity: .55; animation-duration: 70s; }
@keyframes heroDrift {
from { transform: skewX(-13deg) translateX(-4%); }
to { transform: skewX(-13deg) translateX(8%); }
}
/* The colour of the hour, laid over whatever is behind — the photograph today,
the film when it lands. Multiply keeps the furniture's own colour and shifts
its temperature, which is what a grade does; a flat overlay would just wash
it out. */
.hero-grade {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
mix-blend-mode: soft-light; opacity: .85;
background: linear-gradient(178deg,
hsl(var(--hero-hue) 62% 62% / .55),
hsl(var(--hero-hue) 44% 46% / .30) 62%,
hsl(var(--hero-hue) 30% 30% / .38));
}
/* ---- THE HERO FOOT ----
The showrooms and the light control, sitting in the hero the way the design
has them, so the answer to "can I go today" is above the fold. */
.hero-foot {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
display: flex; align-items: flex-end; justify-content: space-between;
gap: 24px; flex-wrap: wrap; padding: 0 8% 30px;
}
/* ---- AND ITS OWN ROOM ABOVE IT ----
The foot is out of flow, so nothing reserves its height. .hero-content is
centred in the hero and grows downward into it — the showroom names printed
straight over the two buttons. That was known on a phone; it happens just as
readily on a wide but SHORT window, because the headline is clamped to 7.6vw
and grows with the width while the height it has to live in does not.
One shop line is ~38px plus the foot's own 30px, so 96px clears it. */
.hero-content { padding-bottom: 96px; }
.hero-shops { display: flex; gap: 28px; flex-wrap: wrap; }
.hero-shop b { display: block; font-size: 12.5px; font-weight: 500; color: #fff; line-height: 1.4; }
.hero-shop span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,0.62); margin-top: 2px; }
.hero-shop span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.42); flex: none; }
.hero-shop.is-open span { color: rgba(255,255,255,0.9); }
.hero-shop.is-open span::before { background: #7FCB92; box-shadow: 0 0 0 3px rgba(127,203,146,0.22); }
.hero-lightctl { display: flex; align-items: center; gap: 12px; }
.hero-lightlbl { font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap; }
.hero-lightctl input {
-webkit-appearance: none; appearance: none; width: 116px; height: 2px;
border-radius: 2px; background: rgba(255,255,255,0.30); outline: none; cursor: ew-resize;
}
.hero-lightctl input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff; cursor: ew-resize; }
.hero-lightctl input::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: #fff; cursor: ew-resize; }
.hero-lighttime { font-size: 11.5px; font-weight: 500; color: rgba(255,255,255,0.8); min-width: 40px; font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
.hero-foot { padding: 0 8% 22px; gap: 14px; }
.hero-lightctl { display: none; }
.hero-shops { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .hero-light span { animation: none; } }
/* The band under the hero is now redundant — the same three shops are in the
hero itself. Kept in the markup for the classic layout, hidden here. */
body .sf-open-now { display: none; }
/* ---- THE MAP, IN THE SAME LIGHT ----
A Google embed arrives in Google's colours: bright white roads, a blue sea
and a red pin, which is the one thing on the page that belongs to somebody
else. Warmed and desaturated to sit with the rest, and returned to full
colour on hover so it is still a usable map when somebody actually needs it. */
.find-map, .find-map iframe, .map-embed, .map-embed iframe {
filter: sepia(0.42) saturate(0.72) hue-rotate(-8deg) contrast(0.94) brightness(1.02);
transition: filter .5s ease;
}
.find-map:hover, .find-map:hover iframe, .map-embed:hover, .map-embed:hover iframe {
filter: none;
}
/* ==========================================================
SECOND PASS — the things that were still wrong on the live page
========================================================== */
/* ---- THE RAYS ARE OFF ----
They read as a painted stripe rather than light, because there is now a real
room behind them with its own real light in it — a lamp, a window, a candle.
Adding a second, fake light source on top just muddied it. The colour of the
hour stays, because that grades the actual footage and is the honest half of
the idea; the shaft goes. */
.hero-light { display: none; }
/* The grade alone, and gentler now it is not fighting a shaft. */
.hero-grade { opacity: .62; }
/* ---- THE ANNOUNCEMENT BAR ----
A block of solid orange shouting in capitals is the loudest thing on a page
whose whole argument is restraint. Same words, same link, but in the ink with
the season kept as a single hairline underneath — so it reads as a masthead
rule rather than a warning label. */
.announcement-bar, .top-bar, .promo-bar {
background: var(--color-heading) !important;
color: rgba(255,255,255,0.82) !important;
font-size: 10.5px !important;
font-weight: 400 !important;
letter-spacing: .14em !important;
text-transform: none !important;
padding: 9px 20px !important;
border-bottom: 2px solid var(--secondary);
}
.announcement-bar a, .top-bar a, .promo-bar a { color: #fff !important; }
.announcement-bar strong, .top-bar strong { font-weight: 500 !important; }
/* The nav sale button was a second orange block immediately under the first. */
.nav-btn-sale {
background: transparent !important;
color: var(--secondary) !important;
border: 1px solid var(--secondary);
border-radius: 100px;
padding: 7px 15px !important;
font-size: 10.5px !important;
letter-spacing: .16em;
font-weight: 500 !important;
}
.nav-btn-sale:hover { background: var(--secondary) !important; color: #fff !important; }
.nav-btn-gold {
background: transparent !important;
color: var(--color-heading) !important;
border: 1px solid rgba(var(--shade), 0.28);
border-radius: 100px;
font-weight: 500 !important;
letter-spacing: .12em;
}
.nav-btn-gold:hover { border-color: var(--color-heading); }
.nav-list > li > a { font-size: 12.5px; letter-spacing: .04em; text-transform: none; font-weight: 400; }
/* ---- THE DELIVERY TICKER ----
The full list printed underneath was belt and braces for a rail nobody can
read at speed. It is a wall of place names and it looked like one, so it is
kept for anyone who has asked for less motion and hidden for everybody else.
The line about the vans is centred under the rail, where it reads as a
caption to the places rather than a heading above them. */
.sf-delivered-plain { display: none; }
@media (prefers-reduced-motion: reduce) {
.sf-delivered-plain { display: block; text-align: center; font-size: 13px; color: var(--color-body); max-width: 70ch; margin: 0 auto; }
}
.sf-delivered-head { display: block; text-align: center; margin-bottom: 22px; }
.sf-delivered-note {
display: block; text-align: center; max-width: 52ch; margin: 22px auto 0;
font-size: 13px; color: var(--text-muted);
}
.sf-delivered .container:last-of-type { order: 3; }
/* ---- FIND US ----
Three white boxes with a coloured spine, floating on a chalk page next to a
map that showed the wrong shop — none of it belonged. Now: one column, flat
on the page, divided by hairlines, and the map opens underneath the shop you
asked about. */
.find-grid { display: block !important; }
.find-locations { display: block; max-width: 100%; }
.find-location {
background: transparent !important;
border: 0 !important;
border-top: 1px solid rgba(var(--shade), 0.14) !important;
border-left: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: clamp(22px, 2.6vw, 32px) 0 !important;
margin: 0 !important;
transform: none !important;
}
.find-location:last-child { border-bottom: 1px solid rgba(var(--shade), 0.14) !important; }
.find-location.is-active { box-shadow: none !important; }
.find-location-label {
font-size: 10px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 8px;
}
.find-location-name {
font-family: var(--font-head), serif; font-weight: 400;
font-size: clamp(24px, 3vw, 34px); letter-spacing: -.015em; line-height: 1.1;
color: var(--color-heading); margin-bottom: 10px;
}
.find-location-detail { font-size: 14px; line-height: 1.7; color: var(--color-body); }
.find-location-detail a { color: var(--color-body); text-decoration: none; border-bottom: 1px solid rgba(var(--shade), 0.22); }
.find-location-detail a:hover { color: var(--color-heading); }
.find-location-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.find-location-pick {
background: transparent; color: var(--color-heading);
border: 1px solid rgba(var(--shade), 0.24); border-radius: 100px;
padding: 9px 18px; font-family: var(--font-body), sans-serif;
font-size: 12.5px; font-weight: 500; letter-spacing: .01em; cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
.find-location-pick:hover { border-color: var(--color-heading); }
.find-location-pick[aria-expanded="true"] { background: var(--color-heading); color: var(--bg); border-color: var(--color-heading); }
.find-location-dir {
font-size: 11px !important; font-weight: 500 !important; letter-spacing: .18em;
text-transform: uppercase; color: var(--text-muted) !important;
text-decoration: none; border-bottom: 1px solid rgba(var(--shade), 0.2);
}
.find-location-dir:hover { color: var(--color-heading) !important; }
/* The map itself: full width of the card, warmed to match, full colour on
hover so it is still a usable map when somebody actually needs it. */
.find-location-map { margin-top: 20px; }
.find-location-map iframe {
display: block; width: 100%; border: 0;
filter: sepia(0.40) saturate(0.70) hue-rotate(-8deg) contrast(0.94) brightness(1.03);
transition: filter .5s ease;
}
.find-location-map:hover iframe { filter: none; }
/* ==========================================================
THIRD PASS
========================================================== */
/* ---- THE PAGE WAS READING WHITE ----
The palette was applied and the page still looked cold, because twenty-two
surfaces in this stylesheet paint themselves #ffffff regardless: every card,
the nav, the dropdown, the filter bar, the welcome and why-us bands. On a
chalk ground a true-white card is the brightest thing on the screen, so the
eye reads the whole page as white no matter what the ground is set to.
These are the SURFACES only. The forty-one white TEXT colours are left
exactly alone — they sit on dark panels and have to stay white. */
.main-nav, .dropdown-menu, .filter-bar,
.process, .welcome, .why-us, .intro,
.brands-mention-white, .testimonials-white,
.range-card, .product-card, .brand-card, .featured-card, .brand-tag,
.testimonials-light .testi-card, .testimonials-white .testi-card,
.btn-enquire, .sf-buynow-box {
background: var(--bg-white, #F3F4F0) !important;
}
/* The header sat above them all at 0.97 white. Same treatment. */
header { background: color-mix(in srgb, var(--bg-white, #F3F4F0) 94%, transparent) !important; }
/* ---- A BIGGER WORDMARK ----
render_logo() writes its size inline from a setting, so this has to shout to
be heard over it. Bodoni at 22px is a caption; at 34 it is a shopfront. */
.logo-wrap > span:not(.logo-est) { font-size: clamp(26px, 2.6vw, 34px) !important; line-height: 1 !important; }
.logo-est { margin-left: 14px; }
.logo-est i { font-size: 12px; }
@media (max-width: 700px) { .logo-wrap > span:not(.logo-est) { font-size: 24px !important; } }
/* ---- THE HERO IS THE SHAPE OF THE FILM ----
The film is cropped to 1280x520 to keep the mangled faces in the mantelpiece
portraits out of shot, which makes it a 2.46:1 letterbox. Sizing the hero to
roughly that means object-fit has almost nothing left to crop, so what you
framed is what gets shown. */
/* A minimum, not a fixed height. At 1280x720 the letterbox is 461px while the
eyebrow, a two-line headline at 7.6vw, the sentence and the buttons need
~486px — so the hero was clipping its own content (overflow is hidden) and
the foot sat on top of the buttons. It keeps the 2.46:1 shape whenever the
words fit, and grows instead of overlapping when they do not. */
.hero { height: auto; min-height: max(440px, min(64vh, 620px)); }
@media (max-width: 900px) { .hero { min-height: max(440px, min(72vh, 560px)); } }
/* ---- MAPS ON THE SHOWROOM BLOCK ----
The old Visit Us section printed these same three shops a second time lower
down with their own maps. One block now, one map each, opened on demand. */
.sq-room-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.sq-room-pick {
background: transparent; color: var(--color-heading);
border: 1px solid rgba(var(--shade), 0.24); border-radius: 100px;
padding: 8px 16px; font-family: var(--font-body), sans-serif;
font-size: 12px; font-weight: 500; cursor: pointer;
transition: background .25s, color .25s, border-color .25s;
}
.sq-room-pick:hover { border-color: var(--color-heading); }
.sq-room-pick[aria-expanded="true"] { background: var(--color-heading); color: var(--bg); border-color: var(--color-heading); }
.sq-room-dir {
font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
color: var(--text-muted); text-decoration: none;
border-bottom: 1px solid rgba(var(--shade), 0.2);
}
.sq-room-dir:hover { color: var(--color-heading); }
.sq-room-map { margin-top: 16px; }
.sq-room-map iframe {
display: block; width: 100%; border: 0;
filter: sepia(0.40) saturate(0.70) hue-rotate(-8deg) contrast(0.94) brightness(1.03);
transition: filter .5s ease;
}
.sq-room-map:hover iframe { filter: none; }
/* ---- THE CROSS-FADE ----
Two copies of the same film, offset, dissolving into each other near the end
so the cut never happens. Both fill the hero; the script decides which is
showing. */
.hero-video { transition: opacity 1.1s ease; }
.hero-video.is-under { opacity: 0; }
/* ==========================================================
THE WORDMARK, SECOND ATTEMPT
The first was three fussy treatments in one inch: Bodoni at 700, an italic
"est.", a hairline that read as a dash, and the year letterspaced so wide it
said "1 9 9 5". Each was defensible; together they were a mess.
Now: the name in Bodoni regular, which is what the face is for, and the year
set quiet and tight beside it. One idea, not four.
========================================================== */
.logo-wrap > span:not(.logo-est) {
font-weight: 400 !important;
letter-spacing: 0.005em !important;
}
.logo-wrap > span span { font-weight: 400 !important; }
.logo-est {
gap: 0;
margin-left: 13px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.10em;
color: var(--text-muted);
transform: translateY(-1px);
}
/* The rule is gone. At 20px against a wordmark it reads as an em-dash, which
makes the mark say "Squires — est. 1995" like a sentence. */
.logo-est::before { display: none; }
.logo-est i {
font-family: var(--font-body), sans-serif;
font-style: normal;
font-size: 10px;
letter-spacing: 0.10em;
text-transform: uppercase;
margin-right: 5px;
color: inherit;
}
/* The est mark, sized once so nothing upstream can reach it. Both halves the
same size: it should read as one small quiet unit beside the name, not two
treatments arguing. */
.logo-est, .logo-est i {
font-family: var(--font-body), sans-serif !important;
font-size: 10px !important;
font-weight: 500 !important;
font-style: normal !important;
letter-spacing: 0.10em !important;
line-height: 1 !important;
text-transform: uppercase !important;
color: var(--text-muted) !important;
}
.logo-est { margin-left: 13px !important; transform: translateY(-1px); }
.logo-est i { margin-right: 4px; }
.logo-est::before { display: none !important; }
/* ==========================================================
EVERY OTHER PAGE
----------------------------------------------------------
Thirty pages, one vocabulary: .page-hero, .range-card, .section-title,
.cta-banner, .feature-strip, .intro. Restyling those carries the design
everywhere at once and leaves every page's own content alone.
========================================================== */
/* ---- THE PAGE HEADER ----
It was a 55vh navy slab with the photograph at 15% opacity behind an 0.85
overlay, and the heading set in the display face at 700. Same treatment the
homepage hero had before: a coloured panel with a picture faintly in it.
Now it is the picture, with only enough wash on the left to keep the words
readable — and shorter, because a header is not a hero and should not cost
somebody half a screen before they reach what they came for. */
.page-hero {
height: min(42vh, 400px);
min-height: 260px;
background-position: center 45%;
}
.page-hero-overlay {
background:
linear-gradient(100deg, rgba(var(--shade), 0.72) 0%, rgba(var(--shade), 0.44) 40%, rgba(var(--shade), 0.12) 72%, rgba(var(--shade), 0) 100%),
radial-gradient(130% 100% at 50% 40%, transparent 46%, rgba(var(--shade), 0.34));
}
.page-hero h1 {
font-weight: 400;
font-size: clamp(34px, 5.4vw, 64px);
line-height: 0.98;
letter-spacing: -.022em;
text-wrap: balance;
max-width: 16ch;
margin-bottom: 14px;
}
.page-hero h1 em { font-style: italic; color: inherit; }
.page-hero-sub {
font-size: 15.5px; font-weight: 400; color: rgba(255,255,255,0.80);
max-width: 46ch; line-height: 1.62;
}
.page-hero-breadcrumb {
font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,0.55);
margin-bottom: 18px;
}
.page-hero-breadcrumb a { color: rgba(255,255,255,0.55); }
.page-hero-breadcrumb a:hover { color: #fff; }
/* ---- THE RANGE CARDS ----
Rounded white cards floating on a tinted band with 24px gutters, each lifting
6px on hover. That is a component library, not a shopfront. Butted together
with a hairline between, they read as one object — the same grid the homepage
catalogue uses, so a department page and the homepage are recognisably the
same site. */
.range-section { padding: 0; background: transparent; }
.range-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(var(--shade), 0.10);
border-block: 1px solid rgba(var(--shade), 0.10);
}
@media (max-width: 1000px) { .range-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .range-grid { grid-template-columns: 1fr; } }
.range-card {
border-radius: 0;
background: var(--bg-white);
box-shadow: none;
transition: none;
}
.range-card:hover { transform: none; box-shadow: none; }
.range-card-img { height: 300px; }
.range-card-img::after {
background: linear-gradient(to top, rgba(10,16,18,.42) 0%, transparent 58%);
}
.range-card:hover .range-card-img-inner { transform: scale(1.045); }
.range-card-body { padding: 24px 26px 30px; }
.range-card-tag {
font-size: 10px; font-weight: 500; letter-spacing: .2em;
color: var(--text-muted); margin-bottom: 10px;
}
.range-card-title {
font-weight: 400; font-size: clamp(22px, 2.4vw, 28px);
letter-spacing: -.015em; line-height: 1.12; color: var(--color-heading);
}
.range-card-desc { font-weight: 400; font-size: 13.5px; line-height: 1.7; }
.range-card-link {
font-size: 10.5px; font-weight: 500; letter-spacing: .2em;
color: var(--text-muted);
}
.range-card:hover .range-card-link { color: var(--color-heading); }
/* ---- THE CALL TO ACTION ----
A navy gradient with a tiled SVG pattern behind it and a 700-weight heading.
Flat ink, regular weight, and the pattern gone — the page has photographs to
carry the interest. */
.cta-banner {
background: var(--color-heading) !important;
padding: clamp(56px, 7vw, 92px) 0;
}
.cta-banner::before { display: none; }
.cta-banner h2 {
font-weight: 400; letter-spacing: -.02em; line-height: 1.04;
font-size: clamp(28px, 4.4vw, 48px); max-width: 20ch; margin-inline: auto;
}
.cta-banner p { font-weight: 400; color: rgba(255,255,255,0.72); max-width: 52ch; }
/* ---- THE FEATURE STRIP ----
Same treatment: the gold radial glow behind it was doing the work a
photograph should do. */
.feature-strip { background: var(--color-heading); padding: clamp(56px, 7vw, 92px) 0; }
.feature-strip::before { display: none; }
.feature-title { font-weight: 400; letter-spacing: -.02em; line-height: 1.05; }
.feature-title em { font-style: italic; color: var(--secondary); }
.feature-eyebrow, .feature-content .feature-eyebrow {
font-weight: 500; letter-spacing: .22em; font-size: 10.5px; color: var(--secondary);
}
.feature-body { font-weight: 400; color: rgba(255,255,255,0.72); }
.feature-img, .intro-img { border-radius: 0; }
.feature-img::after { display: none; }
.feature-points li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--secondary); flex: none; }
.feature-points li { border-bottom-color: rgba(255,255,255,0.10); font-weight: 400; }
/* ---- SECTION FURNITURE ---- */
.eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; color: var(--color-eyebrow); }
.eyebrow::before { width: 34px; height: 2px; background: var(--color-eyebrow); }
.section-sub { font-weight: 400; max-width: 52ch; }
.intro { padding: clamp(56px, 7vw, 92px) 0; background: transparent; }
.intro-grid { gap: clamp(40px, 5vw, 80px); }
.intro-text p { font-weight: 400; font-size: 15px; }
/* ---- THE PRODUCT GRID ON A CATALOGUE PAGE ----
Same reasoning as the range cards: one object, hairlines, square corners. */
.product-grid { gap: 1px; background: rgba(var(--shade), 0.10); }
.product-card { box-shadow: none !important; border: 0 !important; }
.product-card:hover { transform: none; box-shadow: none !important; }
.product-card:hover .product-card-img-inner { transform: scale(1.045); }
.product-card-name { font-family: var(--font-head), serif; font-weight: 400; font-size: 19px; letter-spacing: -.006em; line-height: 1.22; }
.product-card-category { font-size: 10px; font-weight: 500; letter-spacing: .2em; color: var(--text-muted); }
.product-card-price { font-family: var(--font-body), sans-serif; }
.section-label-count { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* ---- THE FILTER BAR ----
It sticks under the header, so it has to belong to the page rather than sit
on it. Hairline instead of a shadow, pills instead of tabs. */
.filter-bar { border-bottom: 1px solid rgba(var(--shade), 0.12); box-shadow: none; }
.filter-tab {
border-radius: 100px; border: 1px solid transparent;
font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
text-transform: none; color: var(--color-body); padding: 8px 16px;
}
.filter-tab:hover { border-color: rgba(var(--shade), 0.22); }
.filter-tab.active {
background: var(--color-heading); color: var(--bg);
border-color: var(--color-heading);
}
/* ---- THE FOOTER ---- */
footer { border-top: 0; }
.footer-logo { font-weight: 400; }
.footer-phone { font-weight: 400; color: var(--secondary); }
/* ==========================================================
THE PRODUCT PAGE
The screen where somebody decides to spend fifteen hundred pounds, and it
was the thinnest on the site: a name, a price, three buttons.
========================================================== */
.sf-buynow-brand { font-size: 10px; font-weight: 500; letter-spacing: .22em; color: var(--text-muted); }
.sf-buynow-title {
font-family: var(--font-head), serif; font-weight: 400;
font-size: clamp(26px, 3.4vw, 42px); line-height: 1.08;
letter-spacing: -.02em; color: var(--color-heading); margin: 10px 0 18px;
}
.sf-buynow-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-now { font-family: var(--font-body), sans-serif; font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; letter-spacing: -.02em; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.price-was { font-size: 15px; color: var(--text-muted); text-decoration: line-through; text-decoration-thickness: 1px; font-variant-numeric: tabular-nums; }
/* Can I go and sit on it. Three answers, three weights: on the floor is the
one worth driving for, to order is the honest majority and should not look
like a warning. */
.pd-availability {
display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.pd-availability::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pd-availability.is-floor { color: #1d6244; }
.pd-availability.is-stock { color: var(--gold-dark, #7E5526); }
.pd-availability.is-order { color: var(--text-muted); }
/* And what it is a month, which for a £1,510 bed base is the number that
actually decides it. */
.pd-finance { margin-top: 8px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.pd-finance b { color: var(--color-body); font-weight: 500; }
/* ---- ONE PRODUCT, SEVERAL SIZES ----
A mattress used to be five products down the page, one per size. Now it is
one, and the sizes are chosen here: the same soft pills as the tags, with
the price under each so nobody has to open anything to compare. */
.pd-sizes, .sf-buynow-sizes { margin-top: 16px; }
.pd-sizes-label, .sf-buynow-size-label, .sf-buynow-size-one {
font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 10px;
}
.sf-buynow-size-label b { color: var(--color-heading); font-weight: 600; letter-spacing: .08em; }
.pd-sizes-list, .sf-buynow-size-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pd-size, .sf-size {
display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
min-width: 88px; padding: 9px 14px; border: 1px solid rgba(var(--shade), 0.18); border-radius: 14px;
background: #fff; font: inherit; font-size: 13px; line-height: 1.25; color: var(--color-heading);
cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s;
}
.pd-sizes-list li { display: inline-flex; }
span.pd-size { cursor: default; }
.pd-size small, .sf-size small { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
button.pd-size:hover, .sf-size:hover { border-color: var(--gold-dark, #7E5526); }
button.pd-size:focus-visible, .sf-size:focus-visible { outline: 2px solid var(--gold-dark, #7E5526); outline-offset: 2px; }
.sf-size.on { border-color: var(--color-heading); background: var(--color-heading); color: #fff; box-shadow: 0 4px 14px rgba(var(--shade), 0.16); }
.sf-size.on small { color: rgba(255,255,255,0.75); }
.sf-buynow-sizes { margin-bottom: 18px; }
.sf-sizes-nudge .sf-buynow-size-label { color: #b3261e; }
.sf-sizes-nudge .sf-buynow-size-list { animation: sf-size-nudge .45s ease; }
@keyframes sf-size-nudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .sf-sizes-nudge .sf-buynow-size-list { animation: none; } }
.product-card-sizes {
display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 100px;
border: 1px solid rgba(var(--shade), 0.16); font-size: 11px; font-weight: 500;
color: var(--text-muted); vertical-align: middle; letter-spacing: .02em;
}
.sf-buynow-desc { font-size: 15px; line-height: 1.75; color: var(--color-body); font-weight: 400; }
.sf-buynow-tags span {
display: inline-block; margin: 0 6px 6px 0; padding: 6px 12px;
border: 1px solid rgba(var(--shade), 0.16); border-radius: 100px;
font-size: 11.5px; color: var(--color-body);
}
.sf-buynow-actions { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.product-card-actions-top { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-visit, .btn-enquire, .btn-buy-online, .btn-add-to-list {
border-radius: 100px !important; font-size: 13.5px !important; font-weight: 500 !important;
letter-spacing: .01em !important; text-transform: none !important; padding: 12px 22px !important;
}
.btn-visit { background: var(--color-heading) !important; color: var(--bg) !important; border: 1px solid var(--color-heading) !important; }
.btn-enquire { background: transparent !important; color: var(--color-heading) !important; border: 1px solid rgba(var(--shade), 0.24) !important; }
.btn-enquire:hover { border-color: var(--color-heading) !important; }
.btn-buy-online { background: var(--secondary) !important; color: #fff !important; border: 0 !important; }
.btn-add-to-list { background: transparent !important; color: var(--text-muted) !important; border: 1px solid rgba(var(--shade), 0.16) !important; }
/* The related grid was inline-styled with the old navy and rounded corners. */
.pd-related { display: block; text-decoration: none; color: inherit; background: var(--bg-white); overflow: hidden; }
.pd-related-img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.7,.3,1); }
.pd-related:hover .pd-related-img { transform: scale(1.045); }
.pd-related-body { padding: 16px 18px 20px; }
.pd-related-name { font-family: var(--font-head), serif; font-weight: 400; font-size: 17px; line-height: 1.25; color: var(--color-heading); }
.pd-related-price { margin-top: 6px; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* The page header on inner pages — same family as .page-hero, without a photo. */
.page-header { background: var(--color-heading); padding: clamp(30px,4vw,52px) 0; }
.page-header h1 { font-family: var(--font-head), serif; font-weight: 400; color: #fff; letter-spacing: -.02em; font-size: clamp(26px,3.4vw,40px); }
.page-header-sub { color: rgba(255,255,255,0.72); font-weight: 400; }
.breadcrumb, .page-header .breadcrumb { font-size: 10px; letter-spacing: .2em; color: rgba(255,255,255,0.55); }
.breadcrumb a { color: rgba(255,255,255,0.55); }
.breadcrumb a:hover { color: #fff; }
/* ==========================================================
THE STORY PAGES — about, brands, and the rest
========================================================== */
/* ---- ABOUT ----
A 500px navy panel with a small heading floating in the middle of it. The
page is thirty years of a family business and it opened with an empty box. */
.about-hero { min-height: min(46vh, 420px); background-color: var(--color-heading); }
.about-hero::after {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, rgba(var(--shade), 0.74) 0%, rgba(var(--shade), 0.44) 42%, rgba(var(--shade), 0.14) 74%, transparent 100%);
}
.about-hero-inner { padding: clamp(40px, 5vw, 72px) 8%; }
.about-hero h1 {
font-family: var(--font-head), serif; font-weight: 400;
font-size: clamp(34px, 5.4vw, 64px); line-height: 0.98; letter-spacing: -.022em;
max-width: 16ch; text-wrap: balance;
}
.about-hero h1 em { font-style: italic; color: inherit; }
.about-hero-eyebrow { font-size: 10.5px; font-weight: 500; letter-spacing: .22em; color: var(--secondary); }
.about-hero-sub { font-size: 15.5px; font-weight: 400; color: rgba(255,255,255,0.80); max-width: 46ch; line-height: 1.62; }
.story, .story-section, .values { padding: clamp(56px, 7vw, 92px) 0; }
.story-img, .story-img-stack, .story-img-main, .story-img-accent, .community-img { border-radius: 0; }
.story-text p, .values p { font-weight: 400; font-size: 15px; }
.story-est { font-weight: 500; letter-spacing: .22em; font-size: 10.5px; color: var(--text-muted); }
.story-img-badge { background: var(--color-heading); border-radius: 0; }
.story-img-badge-num { font-weight: 400; color: var(--secondary); font-size: 32px; }
.story-img-badge-text { font-weight: 500; letter-spacing: .2em; font-size: 10px; }
/* ---- THE TIMELINE ----
Thirty years down a gold hairline with the years at 44px in 700. The dates
are the story; they just do not need to shout to be it. */
.timeline { background: var(--color-heading); padding: clamp(56px, 7vw, 92px) 0; }
.timeline-track::before { background: rgba(255,255,255,0.14); }
.timeline-dot { background: var(--secondary); border-color: var(--color-heading); box-shadow: 0 0 0 2px rgba(255,255,255,0.10); }
.timeline-year {
font-family: var(--font-head), serif; font-weight: 400; font-size: clamp(30px, 3.6vw, 42px);
color: #fff; letter-spacing: -.02em;
}
.timeline-title { font-weight: 500; letter-spacing: .2em; font-size: 10px; color: var(--secondary); }
.timeline-text { font-weight: 400; color: rgba(255,255,255,0.66); }
.timeline-header .section-sub { color: rgba(255,255,255,0.66); }
/* ---- VALUES AND COMMUNITY ---- */
.values-grid { gap: 1px; background: rgba(var(--shade), 0.10); border-block: 1px solid rgba(var(--shade), 0.10); margin-top: 44px; }
.values-grid > * { background: var(--bg-white); padding: clamp(26px, 3vw, 38px); }
@media (max-width: 1000px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } }
.community { background: var(--color-heading); padding: clamp(56px, 7vw, 92px) 0; }
.community p { color: rgba(255,255,255,0.72); font-weight: 400; }
.community .eyebrow { color: var(--secondary); }
.community .eyebrow::before { background: var(--secondary); }
/* ---- BRANDS ----
The two names customers actually know — Buoyant and Sherborne — deserve more
than a bordered box each. */
.brand-card { border: 0 !important; border-radius: 0; padding: clamp(30px, 3.4vw, 44px) clamp(22px, 2.6vw, 32px); text-align: left; }
.brand-card:hover { transform: none; box-shadow: none; }
.brand-grid, .brands-grid { gap: 1px; background: rgba(var(--shade), 0.10); border-block: 1px solid rgba(var(--shade), 0.10); }
.brand-tag { border-radius: 100px; border-color: rgba(var(--shade), 0.18) !important; font-weight: 500; }
/* ---- THE LEGAL PAGES ----
Terms, privacy and GDPR are read, not scanned. One column at a readable
measure with real typographic hierarchy costs nothing and is the difference
between a page somebody can use and a wall. */
.legal-content, .terms-content, .policy-content { max-width: 68ch; }
.legal-content h2, .terms-content h2, .policy-content h2 {
font-family: var(--font-head), serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px);
letter-spacing: -.015em; margin: 44px 0 12px;
}
.legal-content p, .terms-content p, .policy-content p { font-size: 15px; line-height: 1.8; color: var(--color-body); }
.legal-content li, .terms-content li, .policy-content li { font-size: 15px; line-height: 1.8; color: var(--color-body); }
/* ---- THE SALE BUTTON TEXT ----
sale_btn_text is free text in settings and currently reads "🔥 June Sale".
The emoji is left in the data — changing it is one field on the Site Theme
screen — but it is not given room to shout here. */
.nav-btn-sale { font-variant-emoji: text; }
/* ==========================================================
ON A PHONE
Most furniture browsing happens on one, and the hero was broken there: the
foot is pinned to the bottom, the headline at 375px runs to three lines, and
the two collided — the showroom names printed straight over the buttons.
========================================================== */
@media (max-width: 820px) {
/* Let the hero grow to whatever the words need, and reserve the foot its
own room at the bottom rather than having the buttons run into it. */
.hero { height: auto; min-height: min(92vh, 740px); }
/* Three shops at min-width:44% wrap to two rows here, so the foot is about
101px tall, not the ~68px it is on a desktop. 104px left 3px of daylight;
this reserve only began taking effect once the variant rules above
stopped clobbering it with the `padding` shorthand. */
.hero .hero-content { padding-top: 26px; padding-bottom: 128px; }
.hero h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
.hero-sub { font-size: 15px; margin-bottom: 26px; }
.hero-btns { flex-direction: column; align-items: flex-start; gap: 10px; }
.hero-btns .btn-primary, .hero-btns .btn-ghost { width: 100%; text-align: center; justify-content: center; }
/* Three shops side by side do not fit 375px. Stacked, and the light
control is already hidden at this width. */
.hero-foot { padding: 0 8% 22px; }
.hero-shops { gap: 6px 20px; }
.hero-shop { min-width: 44%; }
.hero-shop b { font-size: 12px; }
.hero-shop span { font-size: 11px; }
/* The season masthead stacks rather than squeezing four things onto a row. */
.sq-season-in { flex-direction: column; align-items: flex-start; gap: 12px; }
.sq-season-right { flex-direction: column; align-items: flex-start; gap: 8px; }
/* Section headers: the aside sits under the heading instead of beside it. */
.sq-head, .head { flex-direction: column; align-items: flex-start; gap: 12px; }
.sq-aside { max-width: 100%; }
/* The configurator is one column, and the picture leads. */
.sq-config { grid-template-columns: 1fr; }
.sq-stage { min-height: 220px; }
/* Page headers shrink with the screen rather than keeping a desktop
height that leaves the heading floating in a tall empty box. */
.page-hero { height: auto; min-height: 210px; padding: 34px 0; }
.page-hero h1 { font-size: clamp(28px, 8.6vw, 40px); max-width: 100%; }
.page-hero-sub { font-size: 14.5px; }
.about-hero { min-height: 260px; }
/* A phone shows one product at a time, at a size worth looking at. */
.product-grid { grid-template-columns: 1fr !important; }
.range-card-img { height: 240px; }
/* The filter tabs scroll rather than wrapping into four ragged rows. */
.filter-bar .filter-inner > div:first-child { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.filter-bar .filter-inner > div:first-child::-webkit-scrollbar { display: none; }
/* Find Us and the showrooms: one column, full-width maps. */
.sq-rooms { grid-template-columns: 1fr; }
.find-grid { display: block; }
}
@media (max-width: 480px) {
/* Still two rows of shops at this width, so this must not drop below the
820px reserve — 96px here would have put the names back on the buttons. */
.hero .hero-content { padding-bottom: 128px; }
.sq-mosaic { grid-template-columns: 1fr 1fr; }
.sq-tile { padding: 15px; }
.sq-tile-meta b { font-size: 13.5px; }
}
/* ============================================================
A JOURNAL ENTRY THAT WAS WRITTEN IN THE TOOLBAR
------------------------------------------------------------
The editor can only produce the classes below — blog_body_sanitise() drops
every other class before an entry reaches this page. So this short block is
the whole vocabulary a journal entry has, and an entry cannot be made to look
like anything the site has not agreed to.
Everything else in an entry (paragraphs, headings, lists, quotes) is left to
the ordinary element styles, which is why it goes on looking like the rest of
the site rather than like a word processor.
============================================================ */
/* A photograph placed between the paragraphs. Never wider than the column, and
never stretched out of shape — a picture straight off a phone is a great deal
bigger than the text it is sitting in. */
.jn-body img,
.jn-body .jn-fig {
display: block;
max-width: 100%;
height: auto;
margin: 26px auto;
border-radius: 6px;
}
.jn-body figure { margin: 26px 0; }
.jn-body figcaption {
font-size: 13px;
color: #666;
text-align: center;
margin-top: 8px;
}
/* Alignment. Written by the toolbar as a class rather than an inline style, so
that what arrives here is something this file has decided on. */
.jn-body .jn-left { text-align: left; }
.jn-body .jn-center { text-align: center; }
.jn-body .jn-right { text-align: right; }
/* Two sizes either side of the body text. Relative, so they stay in proportion
on a phone instead of a "large" line taking four lines to itself. */
.jn-body .jn-lg { font-size: 1.22em; line-height: 1.5; }
.jn-body .jn-sm { font-size: 0.86em; }
/* The lists the toolbar writes are plain
/ and inherit the site's own
list styling; only the indent is worth stating, because an entry written in
the toolbar nests them more often than the old plain-text format could. */
.jn-body ul,
.jn-body ol { padding-left: 22px; margin: 0 0 18px; }
.jn-body li { margin-bottom: 6px; }