/* Hand-written layer. styles.css is generated from the design canvas and holds the base and the hover/focus states; everything here is the static site's own chrome — the skip link, the enquiry form, and the no-JS defaults for the two canvas interactions that had no static equivalent. House rule: the no-JS state is the COMPLETE state. Every rule that hides something is scoped to a class that only script adds. */ :root { --cream: #FBF7EC; --sand: #F1EAD8; --ink: #1B2423; --muted: #544F45; --gold: #FFCC1F; --gold-deep: #F4B400; --bronze: #7A5606; --line: #E4DECB; --line-strong: #C9C3B0; } /* ---- skip link --------------------------------------------------------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--cream); padding: 14px 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; } .skip:focus { left: 8px; top: 8px; } /* ---- the delivery chevron ---------------------------------------------- */ /* Default: every panel is shown, so the whole delivery model reads without script. ui.js adds .chev-js to the wrapper and collapses it to one. */ [data-chev-panels] > p { margin-bottom: 14px; } .chev-js > p { display: none; } .chev-js > p.on { display: block; } [data-chev] { transition: background .2s ease; } /* ---- enquiry form ------------------------------------------------------ */ /* Meaningless until JS steps the form — without script every question is on the page at once, so a "step 1 of 4" bar would be a lie. The bar sits outside
, so the flag goes on . */ [data-progress] { display: none; gap: 6px; margin-bottom: 26px; } .wizard-on [data-progress] { display: flex; } .step { border: 0; padding: 0; margin: 0 0 30px; } .step-counter, .step-title { display: block; } .step-counter { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--bronze); margin: 0 0 10px; } .wizard-js .step-counter { display: none; } /* JS shows a single live counter */ .step-title { font-family: 'Bodoni Moda', serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.18; color: var(--ink); margin: 0 0 20px; padding: 0; } .opts { display: flex; flex-direction: column; gap: 8px; } .opt { display: block; position: relative; cursor: pointer; font-size: 18px; padding: 15px 18px; border-radius: 2px; border: 2px solid var(--line); background: var(--cream); color: var(--ink); } .opt input { position: absolute; opacity: 0; width: 0; height: 0; } .opt:hover { border-color: var(--ink); } .opt:has(input:checked) { border-color: var(--ink); background: var(--gold); } .opt:has(input:focus-visible) { outline: 3px solid var(--bronze); outline-offset: 3px; } .fields { display: flex; flex-direction: column; gap: 16px; } .field { display: flex; flex-direction: column; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 14px; color: var(--muted); } .field input, .field textarea { font-family: 'Barlow', sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--ink); padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: 2px; background: var(--cream); } .field textarea { resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--ink); outline: 2px solid var(--bronze); outline-offset: 1px; } /* Honeypot. Off-screen rather than display:none — bots skip hidden fields but fill this one, and it stays reachable to nothing a human uses. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .note { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--bronze); background: var(--sand); border-left: 4px solid var(--gold); padding: 11px 14px; margin: 18px 0 0; } .form-nav { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .btn-primary, .btn-ghost { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 16px; border-radius: 2px; cursor: pointer; } .btn-primary { background: var(--gold); border: 0; color: var(--ink); padding: 15px 26px; } .btn-primary:hover { background: var(--gold-deep); } .btn-ghost { background: transparent; border: 2px solid var(--line-strong); color: var(--muted); padding: 13px 22px; } .btn-ghost:hover { border-color: var(--ink); color: var(--ink); } .summary { font-size: 15px; color: var(--muted); } .form-error { font-size: 17px; line-height: 1.5; color: #8A2B14; background: #FBEAE5; border-left: 4px solid #8A2B14; padding: 14px 16px; margin: 0 0 22px; } /* ---- motion ------------------------------------------------------------ */ /* Everything motion.js does is inline-style driven and additive, so there is nothing to undo here. This only stops the canvas transitions from firing for anyone who has asked for less movement. */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }