/* ========================================================================== Round the Clock | Cleaning, Event Planning, Catering, Supplies roundtheclock.pro | Victoria, BC -------------------------------------------------------------------------- Light theme only. Depth comes from 1px borders and background steps, not from shadow: only the toast and the back-to-top control carry one, because they genuinely float above the page. Interactive controls are pills or circles and respond to press with a scale plus a ripple from the pointer. Static surfaces stay flat and rectangular. All of it is suppressed under prefers-reduced-motion. -------------------------------------------------------------------------- Contents 01 Tokens 02 Reset and base 03 Typography 04 Layout 05 Buttons and chips 06 Header and navigation 07 Footer 08 Hero 09 Category cards 10 Product cards and grid 11 Steps, stats, features 12 Testimonials 13 Collection banner and toolbar 14 FAQ 15 Product detail 16 Catalogue detail and toast 17 Forms and CTA band 18 Utilities and motion ========================================================================== */ /* 01 Tokens ============================================================== */ :root { color-scheme: light; /* Neutrals: warm, not blue-grey */ --ink: #171310; --ink-2: #4a4038; --ink-3: #6f6459; /* clears 4.5:1 on --surface-2, where the SKU chip sits */ --paper: #fbf8f4; --surface: #ffffff; --surface-2: #f4efe8; --line: #e7dfd5; --line-2: #d5c9ba; /* Brand */ --brand: #b4451f; --brand-dark: #8e3616; --brand-soft: #fbede6; --on-brand: #ffffff; /* Permanently dark surfaces: footer, announcement bar, CTA band, card overlays. Tokenised so dark mode can shift them without inverting. */ --inverse-bg: #171310; --inverse-fg: #b9aea3; --inverse-heading: #ffffff; --inverse-line: rgba(255, 255, 255, .12); --scrim: rgba(23, 19, 16, .5); /* Category accents */ --cleaning: #0f6e63; --events: #8c2f4a; --catering: #8a6115; --supplies: #2c5aa0; /* Feedback */ --success: #1c6b45; --danger: #a32020; --danger-soft:#fdeceb; /* Spacing scale (4pt rhythm) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* Radii. Anything you press is a pill or a circle; anything you only read (cards, panels, chips, form fields) keeps a small rectangular radius. That split is what tells an action apart from a label at a glance. */ --r-sm: 3px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-pill: 999px; /* Depth is carried by 1px borders and background steps, not shadow. These are reserved for things that genuinely float above the page: the mobile nav panel, toasts, and the back-to-top control. */ --sh-1: none; --sh-2: 0 1px 2px rgba(23, 19, 16, .06); --sh-3: 0 2px 6px rgba(23, 19, 16, .07); --sh-4: 0 6px 24px rgba(23, 19, 16, .12); /* Motion */ --t-fast: 150ms cubic-bezier(.4, 0, .2, 1); --t-base: 220ms cubic-bezier(.4, 0, .2, 1); --t-slow: 320ms cubic-bezier(.22, .61, .36, 1); /* Layers */ --z-header: 100; --z-drawer: 400; --z-toast: 500; /* One neutral grotesque for everything. System stack, so nothing is downloaded and it renders as Helvetica Neue on macOS, Arial elsewhere. */ --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", "Nimbus Sans", sans-serif; --container: 1200px; --header-h: 68px; } /* Per-category theming hook: */ [data-cat="cleaning"] { --accent: var(--cleaning); } [data-cat="events"] { --accent: var(--events); } [data-cat="catering"] { --accent: var(--catering); } [data-cat="supplies"] { --accent: var(--supplies); } body { --accent: var(--brand); } body[data-cat="cleaning"] { --accent: var(--cleaning); } body[data-cat="events"] { --accent: var(--events); } body[data-cat="catering"] { --accent: var(--catering); } body[data-cat="supplies"] { --accent: var(--supplies); } /* 02 Reset and base ====================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--ink-2); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, picture, svg, video { display: block; max-width: 100%; } img { height: auto; background: var(--surface-2); } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } ul, ol { list-style: none; padding: 0; } a { color: inherit; text-decoration: none; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } ::selection { background: var(--brand); color: var(--on-brand); } .skip-link { position: absolute; left: var(--s-4); top: -100px; z-index: 999; background: var(--inverse-bg); color: var(--inverse-heading); padding: var(--s-3) var(--s-5); border-radius: var(--r-md); font-weight: 600; transition: top var(--t-fast); } .skip-link:focus { top: var(--s-4); } /* 03 Typography ========================================================== */ h1, h2, h3, h4, .display { font-family: var(--font-sans); color: var(--ink); font-weight: 700; line-height: 1.1; letter-spacing: -0.021em; text-wrap: balance; } h1 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.3rem); } h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); } h3 { font-size: clamp(1.12rem, 1.04rem + .4vw, 1.32rem); line-height: 1.3; letter-spacing: -0.014em; } h4 { font-size: 1.02rem; line-height: 1.35; letter-spacing: -0.01em; } p { text-wrap: pretty; } .lead { font-size: clamp(1.03rem, .98rem + .3vw, 1.2rem); line-height: 1.65; color: var(--ink-2); max-width: 62ch; } .section-head { max-width: 60ch; margin-bottom: var(--s-6); } .section-head h2 { margin-top: var(--s-3); } .section-head p { margin-top: var(--s-3); color: var(--ink-2); } .muted { color: var(--ink-3); } .small { font-size: .875rem; } .tabular { font-variant-numeric: tabular-nums; } /* 04 Layout ============================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--s-5); } @media (min-width: 768px) { .container { padding-inline: var(--s-6); } } .section { padding-block: clamp(var(--s-7), 6vw, var(--s-9)); } .section--tight { padding-block: clamp(var(--s-6), 4.5vw, var(--s-8)); } .section--surface { background: var(--surface); } .section--tinted { background: var(--surface-2); } .rule { height: 1px; background: var(--line); border: 0; } .split { display: grid; gap: clamp(var(--s-5), 4vw, var(--s-8)); align-items: center; } @media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--media-first > :first-child { order: 2; } } .stack > * + * { margin-top: var(--s-4); } /* 05 Buttons and chips =================================================== */ .btn { --btn-bg: var(--brand); --btn-fg: var(--on-brand); --btn-bd: transparent; position: relative; overflow: hidden; /* clips the ripple */ isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 46px; padding: 11px 24px; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bd); border-radius: var(--r-pill); font-size: .94rem; font-weight: 600; letter-spacing: .005em; cursor: pointer; text-align: center; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform 120ms cubic-bezier(.2, .8, .3, 1); touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .btn:hover { background: var(--brand-dark); } /* Press feedback: scale only, so nothing around it reflows */ .btn:active { transform: scale(.965); } .btn--accent { --btn-bg: var(--accent); } .btn--accent:hover { background: var(--accent); filter: brightness(.88); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--line-2); } /* Fill wipes in from the left rather than snapping on */ .btn--ghost::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface-2); transform: scaleX(0); transform-origin: left center; transition: transform 280ms cubic-bezier(.4, 0, .2, 1); } .btn--ghost:hover::before { transform: scaleX(1); } .btn--ghost:hover { border-color: var(--ink); } .btn--ink { --btn-bg: var(--inverse-bg); --btn-fg: var(--inverse-heading); } .btn--ink:hover { filter: brightness(1.5); } .btn--light { --btn-bg: var(--inverse-heading); --btn-fg: var(--inverse-bg); } .btn--light:hover { background: #e9e2d9; } /* 44px minimum tap height even at the small size (Apple HIG, Material) */ .btn--sm { min-height: 44px; padding: 9px 18px; font-size: .85rem; } .btn--block { width: 100%; } .btn--lg { min-height: 54px; padding: 14px 30px; font-size: 1rem; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; } .btn .spinner { width: 15px; height: 15px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Ripple ------------------------------------------------------------------ Injected by main.js at the pointer position. Uses currentColor, so it reads light on a filled button and dark on a ghost one without extra rules. */ .ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: .3; transform: scale(0); pointer-events: none; z-index: 0; animation: ripple 560ms cubic-bezier(.22, .61, .36, 1) forwards; } @keyframes ripple { to { transform: scale(2.6); opacity: 0; } } /* Underline via text-decoration rather than a border, so the vertical padding that lifts this to a 44px target does not push the rule away from the text. */ .link-arrow { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; color: var(--accent); padding-block: 10px; margin-block: -10px; transition: gap var(--t-fast); } .link-arrow:hover { text-decoration: underline; text-underline-offset: 4px; gap: var(--s-3); } .link-arrow svg { transition: transform var(--t-fast); } .link-arrow:hover svg { transform: translateX(3px); } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-sm); font-size: .75rem; font-weight: 600; letter-spacing: .02em; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); white-space: nowrap; } .chip--accent { background: color-mix(in srgb, var(--accent) 10%, #fff); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 24%, #fff); } .chip--cleaning { background: #e7f2f0; color: var(--cleaning); border-color: #c4e0db; } .chip--events { background: #f8e9ed; color: var(--events); border-color: #eccdd6; } .chip--catering { background: #f7efdc; color: var(--catering); border-color: #e6d5ae; } .chip--supplies { background: #e6edf8; color: var(--supplies); border-color: #c8d8ef; } .chip--stock { background: #e4f1ea; color: var(--success); border-color: #bfdfcd; } /* A chip inside a flex column or grid would otherwise stretch the full width and read as a banner. Keep it hugging its label. */ .card__body > .chip { align-self: flex-start; } .buybox__head > .chip { justify-self: start; } .chip--low { background: #fdeee6; color: var(--brand); border-color: #f4d3c3; } /* 06 Header and navigation =============================================== */ .announce { background: var(--inverse-bg); color: var(--inverse-fg); font-size: .82rem; letter-spacing: .01em; } .announce .container { display: flex; align-items: center; justify-content: center; gap: var(--s-4); min-height: 38px; text-align: center; flex-wrap: wrap; } .announce strong { color: var(--inverse-heading); } .announce a { text-decoration: underline; text-underline-offset: 3px; padding-block: 13px; /* lifts the tap target past 44px */ } .announce a:hover { color: var(--inverse-heading); } .header { position: sticky; top: 0; z-index: var(--z-header); /* A solid surface avoids repainting a full-width backdrop blur on every scroll frame, which is especially noticeable on mobile Safari. */ background: var(--paper); border-bottom: 1px solid transparent; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--sh-2); } .header__inner { display: flex; align-items: center; gap: var(--s-5); min-height: var(--header-h); } /* Supplied lockup: mark and wordmark are one image, so there is no separate text node to keep in sync. Width is derived from the 4.5:1 aspect. */ .logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 44px; } .logo img { height: 38px; width: auto; display: block; /* img carries a placeholder background globally; the lockup is transparent and would otherwise sit on a visible grey plate. */ background: none; } @media (min-width: 768px) { .logo img { height: 46px; } } .logo--footer img { height: 50px; } .nav { display: none; margin-inline-start: auto; } @media (min-width: 1000px) { .nav { display: block; } } .nav ul { display: flex; align-items: center; gap: var(--s-1); } /* Pill highlight rather than an underline. The previous hover tint was --surface-2 on a --paper header, a difference of about two percent lightness, so the animation ran but was invisible. */ .nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: var(--r-pill); font-size: .93rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: color var(--t-fast), background var(--t-fast), transform 120ms cubic-bezier(.2, .8, .3, 1); } .nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); } .nav a:active { transform: scale(.96); } /* Current page is a solid pill, so location is never ambiguous */ .nav a[aria-current="page"] { color: var(--paper); background: var(--ink); font-weight: 600; } .nav a[aria-current="page"]:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); } .header__actions { display: flex; align-items: center; gap: var(--s-2); margin-inline-start: auto; } @media (min-width: 1000px) { .header__actions { margin-inline-start: var(--s-3); } } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background var(--t-fast), transform 120ms cubic-bezier(.2, .8, .3, 1); } .icon-btn:hover { background: var(--surface-2); } .icon-btn:active { transform: scale(.92); } .nav-toggle { display: inline-flex; } @media (min-width: 1000px) { .nav-toggle { display: none; } } /* Mobile drawer navigation */ .mobile-nav { position: fixed; inset: 0; z-index: var(--z-drawer); visibility: hidden; } .mobile-nav.is-open { visibility: visible; } .mobile-nav__scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--t-base); } .mobile-nav.is-open .mobile-nav__scrim { opacity: 1; } .mobile-nav__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(88vw, 360px); background: var(--paper); padding: var(--s-5); overflow-y: auto; transform: translateX(-100%); transition: transform var(--t-slow); display: flex; flex-direction: column; gap: var(--s-5); } .mobile-nav.is-open .mobile-nav__panel { transform: none; } .mobile-nav__head { display: flex; align-items: center; justify-content: space-between; } .mobile-nav__links { display: grid; gap: 2px; } .mobile-nav__links a { display: flex; align-items: center; gap: var(--s-3); padding: 13px var(--s-3); border-radius: var(--r-md); font-size: 1.05rem; font-weight: 500; color: var(--ink); min-height: 48px; } .mobile-nav__links a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); } .mobile-nav__links a[aria-current="page"] { background: var(--ink); color: var(--paper); font-weight: 600; } .mobile-nav__links .dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; } /* 07 Footer ============================================================== */ .footer { background: var(--inverse-bg); color: var(--inverse-fg); padding-block: var(--s-8) var(--s-5); margin-top: auto; } .footer a { color: var(--inverse-fg); transition: color var(--t-fast); } .footer a:hover { color: var(--inverse-heading); } .footer h3 { color: var(--inverse-heading); font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: var(--s-4); } .footer h4 { color: var(--inverse-heading); font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: var(--s-4); } .footer__grid { display: grid; gap: var(--s-7) var(--s-5); grid-template-columns: 1fr; } @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; } } .footer__grid ul { display: grid; gap: 2px; font-size: .92rem; } /* Inline-block with vertical padding so each footer link clears 44px, rather than an 18px text box with a gap that is not tappable. */ .footer__grid ul a { display: inline-block; padding-block: 12px; } .footer .logo__text { color: var(--inverse-heading); } .footer__blurb { font-size: .92rem; margin-top: var(--s-4); max-width: 34ch; } .footer__bottom { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--inverse-line); display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); align-items: center; justify-content: space-between; font-size: .84rem; } .footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); } .footer__legal a { display: inline-block; padding-block: 12px; } .footer__contact { display: grid; gap: var(--s-3); font-size: .92rem; } .footer__contact div { display: flex; gap: var(--s-3); align-items: flex-start; } .footer__contact svg { flex-shrink: 0; margin-top: 3px; color: #8d8177; } .footer__contact a { display: inline-block; padding-block: 11px; margin-block: -11px; } /* 08 Hero ================================================================ */ .hero { padding-block: clamp(var(--s-6), 5vw, var(--s-8)) clamp(var(--s-7), 6vw, var(--s-9)); } .hero__grid { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-8)); align-items: center; } @media (min-width: 940px) { .hero__grid { grid-template-columns: 1.02fr .98fr; } } .hero h1 { margin-top: var(--s-4); } .hero .lead { margin-top: var(--s-5); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); } .hero__media { position: relative; } /* Four tiles, one per service. Each is 4:3, so the 2x2 block is itself 4:3 and occupies exactly the space the single hero photo used to. */ .hero__collage { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); } .hero__tile { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); } .hero__tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* Names the service, so four photographs are not left to be decoded */ .hero__tile figcaption { position: absolute; left: var(--s-2); bottom: var(--s-2); background: rgba(23, 19, 16, .82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .03em; padding: 4px 9px; border-radius: var(--r-sm); white-space: nowrap; } @media (min-width: 640px) { .hero__collage { gap: var(--s-3); } .hero__tile figcaption { font-size: .74rem; padding: 5px 10px; } } /* 09 Category cards ====================================================== */ .cat-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 560px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .cat-grid { grid-template-columns: repeat(4, 1fr); } } .cat-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--inverse-bg); isolation: isolate; min-height: 340px; transition: opacity var(--t-fast), transform var(--t-base); } .cat-card:hover { opacity: .96; } .cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 520ms cubic-bezier(.22, .61, .36, 1); } .cat-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(15, 12, 10, .88) 0%, rgba(15, 12, 10, .55) 38%, rgba(15, 12, 10, .12) 70%, rgba(15, 12, 10, .05) 100%); } .cat-card__body { position: absolute; inset-inline: 0; bottom: 0; padding: var(--s-5); color: #fff; } .cat-card__body h3 { color: var(--inverse-heading); font-size: 1.35rem; } .cat-card__body p { font-size: .87rem; color: #ddd5cc; margin-top: 6px; } .cat-card:focus-visible { outline-offset: 4px; } .cat-card__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-4); font-size: .82rem; font-weight: 600; } .cat-card__bar { height: 4px; width: 42px; border-radius: 4px; background: var(--accent); margin-bottom: var(--s-4); } /* 10 Product cards and grid ============================================= */ .product-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 480px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } } @media (min-width: 820px) { .product-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .product-grid { grid-template-columns: repeat(4, 1fr); } } .product-grid--3 { grid-template-columns: 1fr; } @media (min-width: 560px) { .product-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .product-grid--3 { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--t-fast), transform var(--t-base); } .card:hover { border-color: var(--ink-3); } .card.is-hidden { display: none; } /* Movement is reserved for devices that genuinely hover; touch devices do not get a sticky post-tap state. */ @media (hover: hover) and (pointer: fine) { .cat-card:hover { transform: translateY(-3px); } .cat-card:hover img { transform: scale(1.025); } .product-grid > .card:hover { transform: translateY(-3px); } } .card__media { position: relative; overflow: hidden; background: var(--surface-2); } .card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .card__tag { position: absolute; top: var(--s-3); left: var(--s-3); backdrop-filter: blur(4px); } .card__flag { position: absolute; top: var(--s-3); right: var(--s-3); background: var(--inverse-bg); color: #fff; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-sm); } /* Text sitting on a photograph is set lighter than text on a flat surface. Arial only ships Regular and Bold, so 500 is the lowest step that still resolves down rather than up: it renders Medium on Helvetica Neue and Regular on Arial. Asking for 600 would round back up to Bold on Windows and change nothing. */ .card__flag, .hero__tile figcaption, .cat-card__body h3, .cat-card__body p, .cat-card__meta, .banner__body h1, .banner__body p, .banner__facts .chip { font-weight: 500; } .card__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-4) var(--s-4) var(--s-5); gap: var(--s-2); } .card__body h3 { font-size: 1.06rem; } /* Padding plus matching negative margin: grows the hit area past the 24px AA minimum for a heading link without moving anything visually. */ .card__body h3 a { display: inline-block; padding-block: 12px; margin-block: -12px; transition: color var(--t-fast); } .card__body h3 a:hover { color: var(--accent); } /* Three lines is enough to place the listing. The rest is on its own page. */ .card__desc { font-size: .875rem; color: var(--ink-3); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .card__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-5); } .card__actions .btn { flex: 1 1 auto; } .card__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); } .card__price { line-height: 1.25; } .card__price .amount { font-family: var(--font-sans); font-size: 1.22rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .card__price .qual { display: block; font-size: .74rem; color: var(--ink-3); } .rating { display: flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--ink-3); } .rating__stars { display: inline-flex; gap: 1px; color: #c9820c; } .rating__stars svg { width: 13px; height: 13px; } /* 11 Steps, stats, features ============================================= */ .steps { display: grid; gap: var(--s-5); counter-reset: step; grid-template-columns: 1fr; } @media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } } .step { position: relative; padding-top: var(--s-5); border-top: 3px solid var(--line); } .step::before { counter-increment: step; content: "0" counter(step); font-family: var(--font-sans); font-size: .95rem; font-weight: 700; color: var(--accent); letter-spacing: .04em; } .step h3 { margin-top: var(--s-2); font-size: 1.18rem; } .step p { margin-top: var(--s-2); font-size: .93rem; } .feature-list { display: grid; gap: var(--s-4); } .feature-list li { display: flex; gap: var(--s-4); align-items: flex-start; } .feature-list .ic { flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) 11%, #fff); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 20%, #fff); } .feature-list h3, .feature-list h4 { font-family: var(--font-sans); font-weight: 600; font-size: .98rem; line-height: 1.35; color: var(--ink); } .feature-list p { font-size: .9rem; margin-top: 3px; } .trust-strip { display: grid; gap: var(--s-4); grid-template-columns: 1fr; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } @media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .trust-strip { grid-template-columns: repeat(4, 1fr); gap: var(--s-5); } } .trust-strip li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .88rem; } .trust-strip svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; } .trust-strip strong { display: block; color: var(--ink); font-size: .92rem; } /* 12 Testimonials ======================================================= */ .quote-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 760px) { .quote-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } } .quote { display: flex; flex-direction: column; gap: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); } .quote blockquote { font-family: var(--font-sans); font-size: 1.06rem; line-height: 1.5; color: var(--ink); letter-spacing: -.005em; } .quote figcaption { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; } .quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .quote cite { font-style: normal; font-weight: 600; font-size: .9rem; color: var(--ink); display: block; } .quote .role { font-size: .8rem; color: var(--ink-3); } /* 13 Collection banner and toolbar ====================================== */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 7px; font-size: .82rem; color: var(--ink-3); padding-block: var(--s-2); } .crumbs a, .crumbs > span { display: inline-block; padding-block: 12px; } .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .crumbs [aria-current] { color: var(--ink-2); font-weight: 500; } .crumbs svg { opacity: .55; } .banner { position: relative; isolation: isolate; border-radius: var(--r-xl); overflow: hidden; background: var(--inverse-bg); padding: clamp(var(--s-6), 5vw, var(--s-8)); min-height: 300px; display: flex; align-items: flex-end; } .banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; } .banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, rgba(15, 12, 10, .9) 0%, rgba(15, 12, 10, .74) 42%, rgba(15, 12, 10, .34) 100%); } .banner__body { max-width: 58ch; color: #e6ded5; } .banner__body h1 { color: var(--inverse-heading); margin-top: var(--s-3); } .banner__body p { margin-top: var(--s-4); font-size: 1.02rem; line-height: 1.6; } .banner__facts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); } .banner__facts .chip { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .25); backdrop-filter: blur(3px); } /* Sticky so search and filters stay reachable through a 12 card grid rather than forcing a scroll back to the top of the page. */ .toolbar { position: sticky; top: calc(var(--header-h) - 1px); z-index: 50; display: grid; gap: var(--s-3); padding-block: var(--s-4); margin-bottom: var(--s-5); background: color-mix(in srgb, var(--paper) 93%, transparent); backdrop-filter: saturate(1.7) blur(14px); -webkit-backdrop-filter: saturate(1.7) blur(14px); border-bottom: 1px solid var(--line); } .toolbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); justify-content: space-between; } /* Search */ .search { position: relative; display: flex; flex: 1 1 250px; max-width: 460px; } .search input { width: 100%; min-height: 44px; padding: 10px 42px 10px 42px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: .9rem; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .search input::placeholder { color: var(--ink-3); } /* type=search draws its own clear button in WebKit, which would sit next to ours. Suppress it and keep the styled one. */ .search input::-webkit-search-cancel-button, .search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .search input:hover { border-color: var(--ink-3); } .search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); } .search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; } .search__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: none; place-items: center; border-radius: 50%; color: var(--ink-3); cursor: pointer; } .search__clear:hover { background: var(--surface-2); color: var(--ink); } .search.has-value .search__clear { display: grid; } .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); } .filter { display: inline-flex; align-items: center; gap: 6px; position: relative; overflow: hidden; padding: 10px 16px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--ink-2); cursor: pointer; min-height: 44px; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform 120ms cubic-bezier(.2, .8, .3, 1); } .filter:hover { border-color: var(--ink-3); color: var(--ink); background: var(--surface-2); } .filter:active { transform: scale(.955); } .filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); } /* Match count, so the cost of a filter is visible before it is applied */ .filter__n { font-variant-numeric: tabular-nums; font-size: .76rem; opacity: .6; } .filter[aria-pressed="true"] .filter__n { opacity: .75; } .filter[data-empty="true"] { opacity: .4; } .toolbar__right { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; } .result-count { font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .result-count strong { color: var(--ink); font-weight: 600; } /* Only offered once something is actually filtering */ .clear-filters { display: none; align-items: center; gap: 5px; position: relative; overflow: hidden; min-height: 44px; padding: 6px 14px; border-radius: var(--r-pill); font-size: .82rem; font-weight: 600; color: var(--brand); cursor: pointer; touch-action: manipulation; transition: background var(--t-fast), transform 120ms cubic-bezier(.2, .8, .3, 1); } .clear-filters:hover { background: var(--brand-soft); } .clear-filters:active { transform: scale(.955); } .clear-filters.is-on { display: inline-flex; } .select-wrap { position: relative; display: inline-flex; align-items: center; } .select-wrap svg { position: absolute; right: 12px; pointer-events: none; color: var(--ink-3); } select.select { appearance: none; min-height: 44px; padding: 10px 38px 10px 18px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); font-size: .85rem; font-weight: 600; color: var(--ink); cursor: pointer; } select.select:hover { border-color: var(--ink-3); } .empty-state { text-align: center; padding: var(--s-8) var(--s-5); border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); color: var(--ink-3); } .empty-state h3 { margin-bottom: var(--s-2); } /* 14 FAQ ================================================================= */ .faq { display: grid; gap: var(--s-3); max-width: 800px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); } .faq details[open] { border-color: var(--line-2); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); cursor: pointer; font-weight: 600; color: var(--ink); font-size: .98rem; list-style: none; min-height: 56px; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { background: var(--surface-2); } .faq summary .ic { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; color: var(--accent); transition: transform var(--t-base); } .faq details[open] summary .ic { transform: rotate(45deg); } .faq .faq__body { padding: 0 var(--s-5) var(--s-5); font-size: .93rem; max-width: 68ch; } /* 15 Product detail ===================================================== */ .pdp { display: grid; gap: clamp(var(--s-6), 4vw, var(--s-8)); align-items: start; } @media (min-width: 940px) { .pdp { grid-template-columns: 1.06fr .94fr; } } .gallery { display: grid; gap: var(--s-3); position: sticky; top: calc(var(--header-h) + 16px); } @media (max-width: 939px) { .gallery { position: static; } } .gallery__main { border-radius: var(--r-lg); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); } .gallery__main img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: var(--s-3); } .gallery__thumbs button { border-radius: var(--r-md); overflow: hidden; border: 2px solid var(--line); cursor: pointer; background: var(--surface-2); transition: border-color var(--t-fast); padding: 0; } .gallery__thumbs button:hover { border-color: var(--ink-3); } .gallery__thumbs button:active { transform: scale(.96); } .gallery__thumbs button { transition: border-color var(--t-fast), transform 120ms cubic-bezier(.2, .8, .3, 1); } .gallery__thumbs button[aria-selected="true"] { border-color: var(--accent); } .gallery__thumbs img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; } .buybox { display: grid; gap: var(--s-5); } .buybox__head { display: grid; gap: var(--s-3); } .buybox__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); } .buybox h1 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.2rem); } /* Long-form copy below the fold on a listing page */ .detail-copy { max-width: 72ch; } .detail-copy h2 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); margin-bottom: var(--s-3); } .detail-copy h2 + p, .detail-copy h2 + ul { margin-top: 0; } .detail-copy p { margin-bottom: var(--s-4); } .detail-copy > * + h2 { margin-top: var(--s-7); } .detail-list { display: grid; gap: var(--s-2); } .detail-list li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .95rem; } .detail-list li::before { content: ""; flex-shrink: 0; width: 5px; height: 5px; margin-top: 10px; border-radius: 50%; background: var(--accent); } .buybox__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); } .price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-3); } .price { font-family: var(--font-sans); font-size: 2.1rem; font-weight: 700; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; } .price-was { font-size: 1.02rem; color: var(--ink-3); text-decoration: line-through; } .price-note { font-size: .82rem; color: var(--ink-3); } .opt-group { display: grid; gap: var(--s-3); } .opt-group__label { display: flex; justify-content: space-between; align-items: baseline; font-size: .85rem; font-weight: 600; color: var(--ink); } .opt-group__label span { font-weight: 400; color: var(--ink-3); } .opts { display: flex; flex-wrap: wrap; gap: var(--s-2); } .opt { padding: 10px 16px; border: 1.5px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); font-size: .88rem; font-weight: 600; cursor: pointer; min-height: 44px; transition: all var(--t-fast); } .opt:hover { border-color: var(--ink-3); } .opt[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: #fff; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--surface); } .qty button { width: 44px; height: 46px; display: grid; place-items: center; cursor: pointer; color: var(--ink); transition: background var(--t-fast); } .qty button:hover { background: var(--surface-2); } .qty input { width: 48px; height: 46px; text-align: center; border: 0; background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .buy-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; } .buy-actions .btn { flex: 1 1 190px; } .pdp-facts { display: grid; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .88rem; } .pdp-facts li { display: flex; gap: var(--s-3); align-items: flex-start; } .pdp-facts svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; } .tabs { border-bottom: 1px solid var(--line); display: flex; gap: var(--s-1); overflow-x: auto; } .tabs button { padding: 13px var(--s-4); font-size: .93rem; font-weight: 600; color: var(--ink-3); cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; min-height: 48px; transition: color var(--t-fast), border-color var(--t-fast); } .tabs button:hover { color: var(--ink); } .tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); } .tab-panel { padding-top: var(--s-5); max-width: 76ch; } .tab-panel[hidden] { display: none; } .tab-panel h3 { margin-bottom: var(--s-3); } .tab-panel p + p, .tab-panel p + h3, .tab-panel ul + h3 { margin-top: var(--s-4); } .tab-panel ul { display: grid; gap: var(--s-2); margin-top: var(--s-3); } .tab-panel ul li { display: flex; gap: var(--s-3); align-items: flex-start; font-size: .94rem; } .tab-panel ul li::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; margin-top: 9px; border-radius: 50%; background: var(--accent); } .spec-table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: var(--s-3); } .spec-table th, .spec-table td { padding: 11px var(--s-3); text-align: left; border-bottom: 1px solid var(--line); } .spec-table th { font-weight: 600; color: var(--ink); width: 42%; } .spec-table td { color: var(--ink-2); font-variant-numeric: tabular-nums; } /* 16 Catalogue detail and toast ========================================= */ /* Offer-type flag on the card media. Neutral on purpose: the label text carries the meaning, and a coloured flag fights the per-category accent. */ .card__flag--service, .card__flag--product, .card__flag--rental { background: rgba(23, 19, 16, .82); backdrop-filter: blur(4px); } /* Spec list inside a catalogue card. Sentence case rather than shouting micro-caps, and a plain rule instead of a dashed one. */ .card__spec { display: grid; gap: 6px; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); font-size: .82rem; line-height: 1.45; } .card__spec > div { display: grid; grid-template-columns: 78px 1fr; gap: var(--s-3); } .card__spec dt { color: var(--ink-3); font-weight: 400; } .card__spec dd { color: var(--ink-2); } /* SKU: plain reference text, not a badge */ .sku { font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace; font-size: .72rem; letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; } /* Carousel --------------------------------------------------------------- Native scroll-snap, no library. Falls back to a plain horizontal scroller if JS is off, which is why the buttons are added by script. */ .carousel { position: relative; } .carousel__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); flex-wrap: wrap; } /* 3D stage. Cards are absolutely positioned and placed by index, not by scroll: each sits at a fixed step away from the centre, so the whole deck animates as one when the index changes. Values follow a linear model, translateX and translateZ and scale and blur all step per card away from centre, with a single constant rotateY, which is what gives the fanned deck look rather than a curved arc. */ .stage { --slide-w: 290px; --slide-h: 510px; --step-x: 172px; /* about 0.57 of the slide width */ --step-z: 100px; --step-s: .15; --tilt: 25deg; position: relative; height: var(--slide-h); perspective: 1000px; overflow: hidden; /* Full bleed, so the deck fans past the container edges instead of being cut off by it. body already has overflow-x hidden, so 100vw is safe. */ width: 100vw; margin-inline: calc(50% - 50vw); } @media (min-width: 700px) { .stage { --slide-w: 330px; --slide-h: 520px; --step-x: 188px; } } @media (min-width: 1100px) { .stage { --slide-w: 352px; --slide-h: 528px; --step-x: 201px; } } .stage__item { position: absolute; top: 50%; left: 50%; width: var(--slide-w); height: var(--slide-h); margin-top: calc(var(--slide-h) / -2); margin-left: calc(var(--slide-w) / -2); transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform, opacity; transition: transform 620ms cubic-bezier(.32, .72, 0, 1), opacity 620ms cubic-bezier(.32, .72, 0, 1); } /* Only the centred card is a click target for the whole surface */ .stage__item[data-active="false"] { cursor: pointer; } .stage__item[data-active="false"] .card__actions { pointer-events: none; } /* The card has to hold a fixed height on the stage */ .stage__item .card__media img { aspect-ratio: 4 / 3; } .stage__item .card__body { overflow: hidden; } .stage__item .card__desc { -webkit-line-clamp: 3; } .stage__item .card { height: 100%; } .stage__count { margin-top: var(--s-5); font-size: .85rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .stage__count span { color: var(--ink); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .stage__item { transition: none; } } .carousel__nav { display: flex; gap: var(--s-2); flex-shrink: 0; } .carousel__btn { position: relative; overflow: hidden; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background var(--t-fast), border-color var(--t-fast), opacity var(--t-fast), transform 120ms cubic-bezier(.2, .8, .3, 1); } .carousel__btn:hover:not([disabled]) { background: var(--surface-2); border-color: var(--ink-3); } .carousel__btn:active:not([disabled]) { transform: scale(.9); } .carousel__btn[disabled] { opacity: .3; cursor: default; } /* The arrow leans the way it will travel */ .carousel__btn svg { transition: transform 200ms cubic-bezier(.2, .8, .3, 1); } .carousel__btn[data-carousel-prev]:hover:not([disabled]) svg { transform: translateX(-2px); } .carousel__btn[data-carousel-next]:hover:not([disabled]) svg { transform: translateX(2px); } .toast-zone { position: fixed; left: 50%; bottom: var(--s-5); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--s-2); width: min(94vw, 400px); pointer-events: none; } .toast { display: flex; align-items: center; gap: var(--s-3); background: var(--inverse-bg); color: var(--inverse-heading); padding: 13px var(--s-4); border-radius: var(--r-md); box-shadow: var(--sh-4); font-size: .9rem; animation: toast-in var(--t-slow) both; } .toast svg { flex-shrink: 0; color: #7fd1a8; } .toast--error svg { color: #ff9b9b; } .toast.is-out { animation: toast-out var(--t-base) both; } @keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.97); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.98); } } /* 17 Forms and CTA band ================================================= */ .cta-band { background: var(--inverse-bg); color: var(--inverse-fg); border-radius: var(--r-xl); padding: clamp(var(--s-6), 5vw, var(--s-8)); display: grid; gap: var(--s-5); align-items: center; } @media (min-width: 860px) { .cta-band { grid-template-columns: 1.4fr 1fr; gap: var(--s-7); } } .cta-band h2 { color: var(--inverse-heading); } .cta-band p { margin-top: var(--s-3); max-width: 52ch; } .cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); } @media (min-width: 860px) { .cta-band__actions { justify-content: flex-end; } } .field { display: grid; gap: 6px; } .field label { font-size: .85rem; font-weight: 600; color: var(--ink); } .field .hint { font-size: .78rem; color: var(--ink-3); } .field input, .field textarea, .field select { width: 100%; min-height: 46px; padding: 11px var(--s-4); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); } .field textarea { min-height: 110px; resize: vertical; } /* JavaScript-created honeypot. It remains available to simple form bots but cannot be reached or seen by visitors. */ .hp-field { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; opacity: 0 !important; pointer-events: none !important; } .field input:hover, .field textarea:hover { border-color: var(--ink-3); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); } .field .req { color: var(--brand); } /* Validation. Colour is never the only signal: the message carries an icon and states both the cause and the fix. */ .field__error { display: none; align-items: flex-start; gap: 6px; font-size: .8rem; line-height: 1.45; color: var(--danger); font-weight: 500; } .field__error svg { flex-shrink: 0; margin-top: 2px; } .field.is-invalid .field__error { display: flex; } .field.is-invalid input, .field.is-invalid textarea, .field.is-invalid select { border-color: var(--danger); background: var(--danger-soft); } .field.is-invalid input:focus, .field.is-invalid textarea:focus { border-color: var(--danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent); } .field.is-valid input, .field.is-valid textarea { border-color: color-mix(in srgb, var(--success) 55%, var(--line-2)); } /* Error summary above the form, anchored to each invalid field */ .form-summary { display: none; gap: var(--s-3); padding: var(--s-4); border: 1.5px solid var(--danger); background: var(--danger-soft); border-radius: var(--r-md); font-size: .88rem; color: var(--ink); } .form-summary.is-on { display: flex; } .form-summary svg { flex-shrink: 0; color: var(--danger); margin-top: 2px; } .form-summary h3 { font-family: var(--font-sans); font-size: .92rem; font-weight: 700; } .form-summary ul { margin-top: var(--s-2); display: grid; gap: 4px; } .form-summary a { color: var(--danger); text-decoration: underline; text-underline-offset: 2px; } /* Prefilled-from-catalogue notice */ .quote-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: .82rem; line-height: 1.5; color: var(--ink-2); background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-radius: var(--r-sm); padding: var(--s-3); } .quote-banner strong { color: var(--ink); } /* Back to top. The collections run long, so give scroll position a way back. */ .to-top { position: fixed; right: var(--s-5); bottom: var(--s-5); z-index: 90; width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: var(--sh-2); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base), background var(--t-fast); } .to-top:hover { background: var(--surface-2); } .to-top:active { transform: scale(.92); } .to-top svg { transition: transform 200ms cubic-bezier(.2, .8, .3, 1); } .to-top:hover svg { transform: translateY(-2px); } .to-top.is-on { opacity: 1; visibility: visible; transform: none; } @media (min-width: 1560px) { .to-top { right: calc((100vw - var(--container)) / 2 - 68px); } } .newsletter { display: flex; gap: var(--s-2); flex-wrap: wrap; } .newsletter input { flex: 1 1 190px; min-height: 46px; padding: 11px var(--s-5); border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; } .newsletter input::placeholder { color: #9a8f85; } .newsletter input:focus { outline: none; border-color: #fff; background: rgba(255, 255, 255, .12); } /* 18 Utilities and motion =============================================== */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .no-scroll { overflow: hidden; } /* Show only from the desktop breakpoint up */ .only-lg { display: none; } @media (min-width: 1000px) { .only-lg { display: inline-flex; } } /* iOS zooms the viewport when a focused control is under 16px. Bump the two controls that sit below that on the type scale. */ @media (max-width: 767px) { .search input, select.select { font-size: 16px; } } .text-center { text-align: center; } .mt-5 { margin-top: var(--s-5); } .mt-6 { margin-top: var(--s-6); } .mt-7 { margin-top: var(--s-7); } .flow > * + * { margin-top: var(--s-4); } .page { display: flex; flex-direction: column; min-height: 100dvh; } /* Progressive scroll reveals. JavaScript adds the data attribute only when IntersectionObserver is available, so content stays visible without JS. */ .motion-ready [data-reveal] { opacity: 0; transform: translateY(16px); } .motion-ready [data-reveal].is-visible { opacity: 1; transform: none; transition: opacity 500ms cubic-bezier(.22, .61, .36, 1), transform 500ms cubic-bezier(.22, .61, .36, 1); transition-delay: var(--reveal-delay, 0ms); } /* Same-origin page navigation gets a restrained fade where the browser supports cross-document view transitions; unsupported browsers ignore it. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: page-out 120ms ease-out both; } ::view-transition-new(root) { animation: page-in 220ms ease-out both; } @keyframes page-out { to { opacity: 0; } } @keyframes page-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ripple { display: none !important; } .btn:active, .filter:active, .icon-btn:active, .carousel__btn:active, .to-top:active { transform: none !important; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } } @media print { .header, .footer, .drawer, .announce, .toast-zone, .mobile-nav { display: none !important; } body { background: #fff; } }