/* ========================================================================== House of Cornwall — Stylesheet -------------------------------------------------------------------------- This file is the "rulebook" for how the whole site looks. Section 1 sets up the design system: colours, fonts, spacing, and the base page styling. Later sections add the hero and content styles. ========================================================================== */ /* -------------------------------------------------------------------------- FONT LOADING -------------------------------------------------------------------------- Mundial Narrow is the body/UI font, self-hosted from public/fonts/ as woff2 (converted from the supplied OTF weights). Five weights cover the site's use: Regular 400, Medium 500, SemiBold 600, Bold 700, Black 900. The browser picks the right file per element's font-weight; until they load it falls back to Arial Narrow (set further down in --font-body). font-display: swap shows the fallback immediately and swaps Mundial in once ready (no invisible-text flash). -------------------------------------------------------------------------- */ @font-face { font-family: 'Mundial Narrow'; src: url('../public/fonts/MundialNarrow-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Mundial Narrow'; src: url('../public/fonts/MundialNarrow-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Mundial Narrow'; src: url('../public/fonts/MundialNarrow-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Mundial Narrow'; src: url('../public/fonts/MundialNarrow-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Mundial Narrow'; src: url('../public/fonts/MundialNarrow-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- DESIGN TOKENS -------------------------------------------------------------------------- These are the project's reusable values. Think of them as named tins of paint and fixed ruler marks. Everything else in the site refers back to these names instead of repeating raw values, so a change here updates the whole site at once. -------------------------------------------------------------------------- */ :root { /* ----- Colours (taken directly from the cover art) ----- */ --ink: #0F1823; /* Dark sky — page + footer background */ --gold: #F5A623; /* Logo ring + "HOUSE OF" — accents, CTAs */ --cream: #FFFFFF; /* "CORNWALL" — headings + body text */ --mid: #1C2B3A; /* Container mid-tone — cards, alt sections */ --mid-2: #223647; /* Lighter navy — top of alt-section gradient */ --ink-2: #0C131C; /* Deeper navy — foot of the page for depth */ --muted: #AEC0D2; /* Faded sky — secondary text (lifted for confidence) */ --border: rgba(255, 255, 255, 0.12); /* Faint dividers + card borders */ --gold-line: rgba(245, 166, 35, 0.30); /* Hairline gold rules between sections */ --gold-soft: rgba(245, 166, 35, 0.16); /* Soft gold for glows + faint fills */ /* ----- Fonts ----- */ /* Constantia is a system serif already on Windows + macOS, so it needs no loading. Mundial Narrow is self-hosted (see the @font-face block above); Arial Narrow is just the fallback while it loads or if it's unavailable. */ --font-display: Constantia, 'Times New Roman', Times, serif; --font-body: 'Mundial Narrow', 'Arial Narrow', Arial, sans-serif; /* Heavy display voice for punchy gold caps + numerals (loaded in ). TODO: swap Montserrat for the real socials display face if supplied. */ --font-impact: 'Montserrat', 'Arial Black', 'Helvetica Neue', system-ui, sans-serif; /* ----- Spacing scale ----- */ /* A fixed set of gaps so spacing stays consistent across the whole site. */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; /* Width of the left catalogue spine that the oversized lot numbers sit in. */ --spine: clamp(3.75rem, 9.5vw, 7rem); } /* -------------------------------------------------------------------------- RESET + BASE -------------------------------------------------------------------------- Browsers add their own default margins and sizing quirks. These rules wipe the slate clean so the design starts from a predictable baseline. -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; /* padding + border count inside an element's set width, which makes layout predictable */ margin: 0; padding: 0; } html { scroll-behavior: smooth; /* gentle scrolling for any on-page jump links */ } body { font-family: var(--font-body); color: var(--cream); /* The brand's signature: a corrugated shipping-container surface. Fine vertical ribbing (rounded light/shadow bands) with occasional horizontal panel seams, over the top-to-bottom navy depth gradient. Kept subtle for long-scroll reading; transparent (plain) sections reveal it, while the lighter alt sections cover it with a smooth panel so the texture varies. TODO: if the team supplies a real container texture image, swap the two repeating-linear-gradients below for that tile (background-repeat). */ background: repeating-linear-gradient(180deg, transparent 0 174px, rgba(0, 0, 0, 0.22) 175px 176px, transparent 177px 180px), repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.16) 0px, rgba(255, 255, 255, 0.025) 7px, rgba(0, 0, 0, 0.16) 14px), linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); background-color: var(--ink); /* fallback */ line-height: 1.7; -webkit-font-smoothing: antialiased; /* crisper text on macOS/iOS */ text-rendering: optimizeLegibility; /* Categorical guarantee: nothing can ever produce a horizontal scrollbar or let a card spill past the edge. `clip` (unlike `hidden`) doesn't create a scroll container, so sticky/fixed children and vertical scrolling are unaffected. The card grid is already clip-proof; this is belt-and-braces. */ overflow-x: clip; } /* Barely-there film grain over the whole page so the dark surfaces have texture rather than reading as flat fills. Inline SVG noise — no image file. Kept very low opacity and non-interactive so it never competes with content. */ body::after { content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } img { display: block; /* removes the small gap browsers leave under images, which otherwise breaks alignment */ max-width: 100%; } a { color: inherit; /* links take the surrounding text colour unless a specific style says otherwise */ } /* -------------------------------------------------------------------------- TYPE SCALE -------------------------------------------------------------------------- Heading and paragraph sizes. The clamp() values let text grow with the screen: clamp(smallest, preferred, largest). So a heading is never tinier than the first value on a phone, nor bigger than the last on a wide monitor. -------------------------------------------------------------------------- */ h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5rem); color: var(--cream); font-weight: 700; line-height: 1.1; } h2 { font-family: var(--font-display); /* Bigger and more confident than before (was max 3rem) so the section headings carry real weight and widen the serif's scale range. */ font-size: clamp(2.25rem, 5.5vw, 4rem); color: var(--cream); font-weight: 700; line-height: 1.08; letter-spacing: -0.015em; } h3 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.5vw, 1.6rem); color: var(--cream); font-weight: 600; line-height: 1.3; } p { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--muted); } /* -------------------------------------------------------------------------- BUTTON -------------------------------------------------------------------------- One button style used everywhere. Dark with a gold outline and gold text; on hover it fills gold with dark text. Used for the "Watch on eBay" CTAs. -------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 0.75rem 2rem; font-family: var(--font-impact); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); background: transparent; border: 1.5px solid var(--gold); text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .btn:hover { background-color: var(--gold); color: var(--ink); box-shadow: 0 0 22px rgba(245, 166, 35, 0.4); } /* A clear, visible outline when tabbing through with a keyboard. */ .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ========================================================================== PERSISTENT HEADER -------------------------------------------------------------------------- A slim bar fixed across the top. It starts transparent so it floats over the hero, then fades to a solid blurred ink once the page is scrolled, so the brand and "Watch on eBay" CTA stay reachable on a long scroll. ========================================================================== */ .site-header { position: fixed; inset: 0 0 auto 0; /* top, full width */ z-index: 100; padding: 0.55rem clamp(1rem, 4vw, 2rem); border-bottom: 1px solid transparent; transition: background-color 0.3s ease, border-color 0.3s ease; } .site-header.is-scrolled { background-color: rgba(15, 24, 35, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom-color: var(--border); } .site-header__inner { width: min(100%, 1100px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } /* ----- Shield wordmark lockup (header + footer) ----- */ .lockup { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; vertical-align: middle; } .lockup__shield { width: auto; height: 2.1rem; /* header size */ flex-shrink: 0; filter: drop-shadow(0 1px 6px rgba(15, 24, 35, 0.6)); } .lockup__text { display: flex; flex-direction: column; line-height: 1; } .lockup__top { font-family: var(--font-impact); font-weight: 800; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .lockup__main { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cream); text-shadow: 0 1px 8px rgba(15, 24, 35, 0.7); } /* Larger lockup for the footer sign-off (stacked, centred). */ .lockup--lg { flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-sm); } /* "EST. 2019" heritage mark — small, widely spaced, understated. */ .est { font-family: var(--font-impact); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); opacity: 0.72; margin-bottom: var(--space-md); } .lockup--lg .lockup__shield { height: 3.75rem; } .lockup--lg .lockup__text { align-items: center; } .lockup--lg .lockup__top { font-size: 0.72rem; } .lockup--lg .lockup__main { font-size: 1.6rem; } /* ========================================================================== BACK TO TOP -------------------------------------------------------------------------- A quiet circular control fixed bottom-right. Hidden until the page is scrolled down a screenful, then fades in. ========================================================================== */ .to-top { position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem); z-index: 90; width: 2.75rem; height: 2.75rem; display: flex; align-items: center; justify-content: center; color: var(--gold); background-color: rgba(15, 24, 35, 0.85); border: 1px solid var(--border); border-radius: 50%; cursor: pointer; opacity: 0; pointer-events: none; /* not clickable while faded out */ transform: translateY(0.5rem); transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease; } /* JS removes the `hidden` attribute on first reveal, then toggles .is-visible to fade the control in and out as the user scrolls. */ .to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .to-top:hover { background-color: var(--gold); color: var(--ink); } /* ========================================================================== SECTION A — HERO -------------------------------------------------------------------------- The opening, full-screen panel. Four images are stacked exactly on top of each other (like transparent sheets) and fade in one by one. The title is crisp HTML text overlaid near the bottom, with the tagline + button below. ========================================================================== */ .hero { position: relative; /* anchor point for the absolutely-placed layers and title inside it */ min-height: 100vh; /* fill the whole screen height on load */ min-height: 100svh; /* same, but accounts for mobile browser bars */ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; /* title block + CTA sit low, below the faces */ padding-top: clamp(4.5rem, 13vh, 9rem); padding-bottom: var(--space-lg); overflow: hidden; /* trim any image that spills past the edges */ background-color: var(--ink); /* dark base shown before images load */ } /* The box that holds the four stacked image layers. */ .hero__layers { position: absolute; inset: 0; /* stretch to all four edges of the hero */ z-index: 1; } /* A soft warm radial glow behind the wordmark, so the golden light of the photo gathers around the title and carries the warmth down into the page. */ .hero::before { content: ""; position: absolute; inset: 0; z-index: 3; /* above the photo + dark gradient, below text */ pointer-events: none; background: radial-gradient(ellipse 55% 38% at 50% 80%, rgba(245, 166, 35, 0.20), transparent 70%); } /* Each image layer: pinned to fill the same space, so they line up exactly. They start invisible (opacity 0) and fade in when the script adds .visible. */ .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* fill the area, cropping rather than squashing */ object-position: top center; /* keep the people + sky; crop from the bottom */ opacity: 0; transition: opacity 0.8s ease; } /* Two soft dark gradients improve legibility without hiding the sunset: one from the bottom (under the CTA) and a lighter one from the top (under the title block, which now sits in the upper part of the scene). */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; /* never blocks clicks on the button */ background: linear-gradient( to top, rgba(15, 24, 35, 0.96) 0%, rgba(15, 24, 35, 0.85) 22%, rgba(15, 24, 35, 0.45) 42%, rgba(15, 24, 35, 0) 62% ), linear-gradient( to bottom, rgba(15, 24, 35, 0.55) 0%, rgba(15, 24, 35, 0) 28% ); } /* ----- The title block, sitting low in the hero, below the team's faces ----- */ .hero__head { position: relative; z-index: 5; /* above the photo + gradient */ width: min(92%, 1100px); margin-bottom: var(--space-md); text-align: center; opacity: 0; /* fades in last, like the layers */ transition: opacity 0.8s ease; } .hero__title { font-weight: 400; /* reset the bold

default; lines set their own */ } .hero__title-line1 { /* "House of" — gold sans caps, brand lockup */ display: block; font-family: var(--font-impact); font-weight: 800; font-size: clamp(0.95rem, 2.2vw, 1.6rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 12px rgba(15, 24, 35, 0.7); } .hero__title-line2 { /* "Cornwall" */ display: block; font-family: var(--font-display); font-weight: 700; /* Scaled to roughly half the original cover-art size so the word no longer dominates the hero. Plan spec was clamp(4rem, 14vw, 11rem); this keeps the same proportions at half the scale. */ font-size: clamp(2rem, 7vw, 5.5rem); letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); line-height: 1; text-shadow: 0 2px 18px rgba(15, 24, 35, 0.75); } /* Smaller show-format strapline — raised contrast: brighter than before, a touch larger, with a shadow so it reads cleanly over the photo. */ .hero__strap { margin-top: var(--space-sm); font-family: var(--font-impact); font-weight: 700; font-size: clamp(0.8rem, 1.4vw, 1rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 10px rgba(15, 24, 35, 0.85); } /* Plain descriptor line directly beneath the wordmark. */ .hero__intro { max-width: 36rem; margin: var(--space-sm) auto 0; color: var(--cream); font-size: clamp(1rem, 2vw, 1.2rem); text-shadow: 0 1px 12px rgba(15, 24, 35, 0.85); } /* ----- CTA, sitting just below the title block at the bottom of the hero ----- */ .hero__cta { position: relative; z-index: 10; /* above everything else in the hero */ text-align: center; padding-inline: var(--space-md); } /* ----- The fade-in switch ----- */ /* The script adds .visible to each layer and the title block in turn; that flips opacity from 0 to 1 over 0.8s, producing the staggered reveal. */ .layer.visible, .hero__head.visible { opacity: 1; } /* ----- Phones: keep the big serif word inside the screen ----- */ /* On narrow screens "CORNWALL" can run past the edges. This caps its size so the whole word always fits, and gives the title a little more breathing room from the bottom. */ @media (max-width: 480px) { .hero__head { width: 96%; } .hero__title-line2 { font-size: clamp(1.75rem, 9vw, 3rem); letter-spacing: 0; } .hero__strap { letter-spacing: 0.16em; } /* Schedule: stack each day above its times so the longer weekday slots never run off the edge of a narrow screen. */ .schedule__row { flex-direction: column; gap: 0.15rem; } } /* ========================================================================== LIVE STATUS BAR -------------------------------------------------------------------------- A calm strip directly under the hero. JavaScript fills it with either a "Live now" badge (while a show is on air) or a ticking countdown to the next scheduled slot. On brand: gold accents, serif countdown, muted supporting text. Collapses to nothing if JS is unavailable (the inner div stays hidden). ========================================================================== */ .livebar { position: relative; background-color: var(--ink); padding-block: var(--space-md); border-block: 1px solid var(--gold-line); overflow: hidden; /* keep the glow within the bar */ } /* The same warm glow as the hero, carried down behind the countdown so the energy doesn't stop at the fold. */ .livebar::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 45% 130% at 50% 50%, rgba(245, 166, 35, 0.12), transparent 70%); } .livebar__inner { position: relative; z-index: 1; /* keep the content above the glow */ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm) var(--space-md); text-align: center; } .livebar__badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-impact); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } /* When a show is live, the badge picks up the gold accent and a gentle pulsing glow, so the live state clearly signals "happening right now". The countdown state has no such animation, staying calm by contrast. */ .livebar__badge--live { color: var(--gold); border-color: var(--gold); animation: livebadge-glow 2.4s ease-in-out infinite; } @keyframes livebadge-glow { 0%, 100% { box-shadow: 0 0 0 rgba(245, 166, 35, 0); } 50% { box-shadow: 0 0 20px rgba(245, 166, 35, 0.5); } } /* The small pulsing dot beside "Live now". */ .livebar__dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background-color: var(--gold); animation: livebar-pulse 1.6s ease-out infinite; } @keyframes livebar-pulse { 0% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.55); } 70% { box-shadow: 0 0 0 0.6rem rgba(245, 166, 35, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0); } } /* The countdown — heavy display numerals in gold, punchy and brand-confident, with tabular figures so the numbers don't jitter as the seconds tick. */ .livebar__count { font-family: var(--font-impact); font-size: clamp(1.5rem, 4vw, 2.35rem); font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; letter-spacing: 0.005em; } .livebar__when { font-family: var(--font-body); color: var(--muted); font-size: 0.95rem; } .livebar__msg { font-family: var(--font-body); color: var(--cream); font-size: 0.95rem; } /* A compact variant of the main button, for use inside the live bar. */ .btn--sm { padding: 0.5rem 1.25rem; font-size: 0.8rem; } /* ========================================================================== SHARED LAYOUT — sections and centred container -------------------------------------------------------------------------- Every content block below the hero uses the same vertical rhythm and a centred, width-capped container so copy never stretches too wide to read. ========================================================================== */ .section { /* Generous breaks between whole sections, so the eye feels a clear gap from one lot to the next. Within a section, headings sit close to their content (see .section__heading / .section__lead) — the rhythm varies with meaning. */ padding-block: clamp(3.75rem, 8vw, 6.5rem); } /* A deliberately denser section (the schedule), so the page doesn't breathe at one constant rate. Its ledger of times wants less air around it. */ .section--tight { padding-block: clamp(2.5rem, 4.5vw, 3.5rem); } /* Alternate sections sit on the lighter navy, lit subtly from the top so they have internal depth rather than a flat fill, and framed top and bottom by hairline gold rules so the transition reads as deliberate. */ .section--alt { background: linear-gradient(180deg, var(--mid-2) 0%, var(--mid) 60%); border-block: 1px solid var(--gold-line); } .container { width: min(92%, 1100px); margin-inline: auto; } /* Section headings: left-aligned, sitting close to their own content so the heading and what follows read as one group (tight within, open between). */ .section__heading { text-align: left; margin-bottom: var(--space-md); } /* When an intro follows a heading, the heading hugs it even closer. */ .section__heading:has(+ .section__lead) { margin-bottom: var(--space-sm); } .section__lead { max-width: 46ch; margin: 0 0 var(--space-md); text-align: left; color: var(--muted); } /* ========================================================================== AUCTION LABEL + LOT-NUMBER SYSTEM -------------------------------------------------------------------------- `.label` is the single reusable small gold-caps treatment — the same character as the live bar's "NEXT SHOW" and the hero strapline. `.lotmark` is the catalogue-style eyebrow that opens each major section: a short gold hairline, the "Lot" label, and a large outlined-gold numeral as the anchor. ========================================================================== */ .label { font-family: var(--font-impact); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); } /* ----- Catalogue spine: oversized lot number anchoring each section ----- */ /* Each body section is a two-column grid: a left gutter (the spine) holding an oversized outlined lot number, and the heading + content to its right. The number spans the gutter's full height so the numbers line up down the page like a catalogue spine, with the heading locked to the top of each. */ .section__grid { width: min(92%, 1100px); margin-inline: auto; display: grid; grid-template-columns: var(--spine) minmax(0, 1fr); column-gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } .section__grid > .lot { grid-column: 1; grid-row: 1 / -1; /* span the gutter; number sits at the top */ align-self: start; } .section__grid > :not(.lot) { grid-column: 2; /* heading + content stack in the right column */ } .lot { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; } .lot .label { margin-bottom: 0.4rem; } /* Oversized solid-gold numeral in the heavy display face — stamped and confident rather than the old delicate outlined serif. */ .lot__num { font-family: var(--font-impact); font-weight: 900; font-size: clamp(3rem, 8.5vw, 6rem); line-height: 0.82; margin-left: -0.04em; letter-spacing: -0.01em; color: var(--gold); } /* Mobile: the spine folds to an inline "Lot NN" tag above the heading. Every child returns to the single column (the desktop rule pins content to col 2, which would otherwise spawn a phantom second column here). */ @media (max-width: 640px) { .section__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-sm); } .section__grid > .lot, .section__grid > :not(.lot) { grid-column: 1; } .section__grid > .lot { grid-row: auto; flex-direction: row; align-items: baseline; gap: 0.55rem; } .lot .label { margin-bottom: 0; } .lot__num { font-size: clamp(2.5rem, 13vw, 3.5rem); } } /* ========================================================================== FEATURE GRID — "What we do" -------------------------------------------------------------------------- Asymmetric instead of three identical boxes: a tall lead card on the left spanning two rows, with two narrower cards stacked on the right. Collapses to a single column on small screens. `minmax(0, …)` keeps it clip-proof. ========================================================================== */ .feature-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--space-md); } /* The lead card spans both rows on the left. */ .feature-grid .card--lead { grid-row: span 2; } @media (max-width: 720px) { .feature-grid { grid-template-columns: minmax(0, 1fr); } .feature-grid .card--lead { grid-row: auto; } } .card { padding: var(--space-md); background-color: var(--mid); border: 1px solid var(--border); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* Hover: a small lift and a soft gold border glow. */ .card:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(245, 166, 35, 0.18); } /* The lead card carries more presence: a reserved photo area up top that fills the taller card on purpose, then a gold tag, larger title, and body beneath. */ .card--lead { display: flex; flex-direction: column; border-color: var(--gold-line); } /* Object-photo space. `flex: 1` makes it absorb the lead card's extra height so there's no accidental void; the photo fills the frame and is cropped to fit. */ .card__media { flex: 1 0 9rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; margin-bottom: var(--space-md); border: 1px solid var(--gold-line); border-radius: 2px; background: radial-gradient(ellipse at 50% 38%, var(--gold-soft), transparent 72%); color: var(--muted); overflow: hidden; } .card__media img { width: 100%; height: 100%; min-height: 9rem; object-fit: cover; display: block; } .card__media svg { width: 2rem; height: 2rem; opacity: 0.75; } .card__media-note { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .card__tag { display: block; margin-bottom: var(--space-sm); } .card__title { margin-bottom: var(--space-sm); color: var(--gold); } .card--lead .card__title { font-size: clamp(1.5rem, 3vw, 2rem); } .card__body { color: var(--muted); } /* ========================================================================== ON THE ROAD — crest lockup with angled sticker + service copy -------------------------------------------------------------------------- Two balanced columns inside the lot's content column: the vertical crest lockup with the "ON THE ROAD" sticker laid over it on the left, the service copy and CTA on the right. Collapses to a single column (graphic on top) at the same 720px breakpoint the feature grid uses. ========================================================================== */ .road { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-md), 5vw, var(--space-lg)); align-items: center; } @media (max-width: 720px) { .road { grid-template-columns: minmax(0, 1fr); } /* Narrower crest stage + sticker on mobile: the extra reserve keeps the rotated banner's corners inside the column rather than touching the edge. */ .road__crest { padding: var(--space-md) var(--space-sm); min-height: 18rem; } .road__lockup .lockup__shield { height: 7.5rem; } .road__lockup .lockup__main { font-size: 2.5rem; } .road__sticker { width: min(74%, 12rem); } } /* The relative stage the sticker is absolutely positioned within. Centres the crest lockup; the sticker is laid over its lower half. */ .road__crest { --road-tilt: -4deg; /* sticker rotation — easy to nudge */ position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-lg) var(--space-md); min-height: 22rem; } /* The crest is the section's title here (the right-hand heading is removed), so it carries real weight: a large shield over "House of / Cornwall", with the "ON THE ROAD" sticker tucked onto the corner of the wordmark. `position: relative` makes the lockup the anchor for that sticker. */ .road__lockup { position: relative; margin-bottom: 0; /* override .lockup--lg's footer spacing */ gap: var(--space-md); } .road__lockup .lockup__shield { height: 9.5rem; margin-bottom: -1.5rem; /* lift the shield slightly above the text */ } .road__lockup .lockup__top { font-size: 1.25rem; letter-spacing: 0.26em; } .road__lockup .lockup__main { font-size: 3rem; } /* The "ON THE ROAD" sticker sits on the bottom-right corner of "Cornwall", rotated and above the wordmark in z-order — a small sticker on the lockup, matching the brand reference. Its width is a share of the wordmark, so it scales with the crest; the drop shadow matches the crest's shadow tint. */ .road__sticker { position: absolute; right: -1rem; bottom: -2rem; width: min(64%, 12.5rem); transform: rotate(var(--road-tilt)); transform-origin: center; z-index: 2; filter: drop-shadow(0 6px 14px rgba(15, 24, 35, 0.55)); pointer-events: none; } .road__copy { align-self: center; } .road__body { max-width: 50ch; margin-bottom: var(--space-sm); } .road__cta { margin-top: var(--space-md); } /* ========================================================================== STEPPER — "How eBay Live works" -------------------------------------------------------------------------- A vertical numbered list: large gold step numbers threaded by a thin gold line, content to the right. Deliberately unlike the card grid. ========================================================================== */ .stepper { list-style: none; max-width: 44rem; margin: 0; } .step { position: relative; display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-md); padding-bottom: var(--space-lg); } .step:last-child { padding-bottom: 0; } /* The thread connecting one step number down to the next. */ .step:not(:last-child)::before { content: ""; position: absolute; top: 3.25rem; bottom: 0; left: calc(1.625rem - 1px); width: 2px; background: linear-gradient(to bottom, var(--gold), var(--gold-line)); } /* The step number sits as a circular node on the line. Its background matches the section so the line appears to start and stop at the node edge. */ .step__num { position: relative; z-index: 1; width: 3.25rem; height: 3.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--gold); background-color: var(--mid); font-family: var(--font-impact); font-weight: 900; font-size: 1.4rem; color: var(--gold); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } /* Hovering a step warms its number node to a solid gold with a soft glow. */ .step:hover .step__num { background-color: var(--gold); color: var(--ink); box-shadow: 0 0 18px rgba(245, 166, 35, 0.45); } .step__body { padding-top: 0.35rem; } .step__title { margin-bottom: var(--space-xs); color: var(--cream); } .step__text { color: var(--muted); } /* ========================================================================== MEET THE TEAM -------------------------------------------------------------------------- Asymmetric: one larger feature portrait (the host) on the left as the eye's landing point, with the other two as smaller side rows on the right. Circular placeholders carry a gold initial, ready to be swapped for real photos. ========================================================================== */ .team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-lg); align-items: center; } @media (max-width: 720px) { .team { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); } } /* Shared portrait disc. */ .team__photo { aspect-ratio: 1; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 35%, var(--mid), var(--ink)); border: 1px solid var(--gold-line); overflow: hidden; } .team__photo span { font-family: var(--font-display); font-weight: 700; color: var(--gold); opacity: 0.9; } /* ----- Feature member (large, left-aligned with the column) ----- */ .team__member--feature { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .team__photo--lg { width: clamp(9rem, 24vw, 13rem); margin-bottom: var(--space-md); } .team__photo--lg span { font-size: clamp(3rem, 7vw, 4rem); } /* ----- The two smaller members, stacked as rows ----- */ .team__rest { display: flex; flex-direction: column; gap: var(--space-md); } .team__member--row { display: flex; flex-direction: row; align-items: center; gap: var(--space-md); text-align: left; } .team__photo--sm { width: clamp(4.5rem, 12vw, 6rem); } .team__photo--sm span { font-size: clamp(1.5rem, 4vw, 2rem); } .team__name { color: var(--cream); } .team__role { margin-top: var(--space-xs); color: var(--muted); } /* On small screens, the feature stacks above the two rows, all left-aligned for the rows and centred for the feature. */ @media (max-width: 720px) { .team__member--feature { margin-bottom: var(--space-md); } } /* ========================================================================== RECENT WINS — carousel -------------------------------------------------------------------------- A horizontal, swipeable carousel of win cards (item + buyer name). Native scroll-snap handles touch/trackpad; the arrow buttons scroll by one card. ========================================================================== */ .carousel { position: relative; } .carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* hide the scrollbar (Firefox) */ padding-bottom: 0.5rem; } .carousel__viewport::-webkit-scrollbar { display: none; /* hide the scrollbar (WebKit) */ } .carousel__viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } .carousel__track { display: flex; gap: var(--space-md); list-style: none; } /* Each win card. */ .win { flex: 0 0 clamp(14rem, 72vw, 17rem); scroll-snap-align: start; display: flex; flex-direction: column; background-color: var(--mid); border: 1px solid var(--gold-line); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .win:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(245, 166, 35, 0.18); } /* Win-photo frame: the buyer's photo fills a 4:3 area, cropped to fit. */ .win__media { aspect-ratio: 4 / 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; border-bottom: 1px solid var(--gold-line); background: radial-gradient(ellipse at 50% 38%, var(--gold-soft), transparent 72%); color: var(--muted); overflow: hidden; } .win__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .win__media svg { width: 1.8rem; height: 1.8rem; opacity: 0.7; } .win__media-note { font-family: var(--font-impact); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .win__body { padding: var(--space-sm) var(--space-md) var(--space-md); } .win__item { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.25; color: var(--cream); margin-bottom: 0.45rem; } .win__buyer { font-family: var(--font-body); font-size: 0.9rem; color: var(--muted); } /* The buyer's name in the heavy gold voice, sitting next to their win. */ .win__name { font-family: var(--font-impact); font-weight: 800; letter-spacing: 0.01em; color: var(--gold); } /* Prev / next controls. */ .carousel__nav { display: flex; gap: 0.6rem; margin-top: var(--space-md); } .carousel__btn { width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .carousel__btn:hover { background-color: var(--gold); color: var(--ink); box-shadow: 0 0 18px rgba(245, 166, 35, 0.35); } .carousel__btn svg { width: 1.1rem; height: 1.1rem; } /* ========================================================================== SECTION C — LIVE SCHEDULE -------------------------------------------------------------------------- Each day is a row: the day name on the left, the broadcast times on the right, divided by a faint rule. On phones the times drop below the day. ========================================================================== */ .schedule { list-style: none; max-width: 38rem; margin: 0; } .schedule__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-xs) var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--border); } .schedule__day { font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.75rem); color: var(--cream); } /* Days with two broadcasts stack their slots vertically (one time per line) rather than running side by side, so each show reads as its own line. */ .schedule__times { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; color: var(--muted); letter-spacing: 0.02em; } /* Each broadcast slot: its time text plus a small "add to calendar" button. */ .schedule__slot { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } /* The "and" connector only makes sense when the two slots sit side by side. Now that they're stacked one per line, it's hidden (kept in the markup so the layout can revert to inline by removing this rule). */ .schedule__and { display: none; } /* Small, unobtrusive "add to calendar" button — a muted calendar-plus icon that warms to gold on hover/focus. */ .schedule__ics { display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem; background: transparent; border: none; color: var(--muted); cursor: pointer; border-radius: 4px; transition: color 0.2s ease, background-color 0.2s ease; } .schedule__ics:hover { color: var(--gold); } .schedule__ics:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; color: var(--gold); } .schedule__cta { margin-top: var(--space-md); text-align: left; } .schedule__note { margin-bottom: var(--space-md); color: var(--cream); } /* ========================================================================== SECTION D — FIND US (link pills) -------------------------------------------------------------------------- A centred row of pill buttons, wrapping as needed. Same hover behaviour as the main button: gold outline filling on hover. ========================================================================== */ .links { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-sm); } .link-pill { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1.5rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.05em; color: var(--cream); text-decoration: none; border: 1px solid var(--border); border-radius: 999px; transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* The brand glyph inside each pill — inherits the pill's text colour, so it flips to ink along with the label on hover. */ .link-pill__icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .link-pill:hover { transform: translateY(-2px); background-color: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 0 18px rgba(245, 166, 35, 0.3); } /* ========================================================================== GAVEL DIVIDER -------------------------------------------------------------------------- The page's one deliberate flourish: a hand-drawn auctioneer's gavel between gold hairlines, closing the catalogue. Tilted a few degrees so it reads as hand-placed rather than a default icon. Used exactly once. ========================================================================== */ .gavel { display: flex; align-items: center; justify-content: center; gap: var(--space-md); width: min(92%, 1100px); margin-inline: auto; padding-block: clamp(2.5rem, 6vw, 4rem); color: var(--gold); } .gavel__rule { flex: 1; max-width: 9rem; height: 1px; background: linear-gradient(to right, transparent, var(--gold-line)); } .gavel__rule:last-child { background: linear-gradient(to left, transparent, var(--gold-line)); } .gavel__icon { flex-shrink: 0; width: clamp(2.75rem, 6vw, 3.5rem); height: auto; transform: rotate(-4deg); /* a touch of hand-placed character */ } /* ========================================================================== LANORA HOUSE CROSS-LINK -------------------------------------------------------------------------- A quiet, narrow strip above the footer. Subtle muted text with gold links, so it supports the channel without competing with the shows. ========================================================================== */ .lanora { background-color: var(--ink); border-top: 1px solid var(--gold-line); padding-block: var(--space-lg); text-align: center; } .lanora__inner { max-width: 44rem; } .lanora__line { color: var(--muted); font-size: 0.95rem; } .lanora__line + .lanora__line { margin-top: var(--space-xs); } .lanora__line--soft { font-size: 0.9rem; } .lanora a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .lanora a:hover { color: var(--cream); } /* ========================================================================== SECTION E — FOOTER -------------------------------------------------------------------------- Minimal, centred, small text on the dark ink base. ========================================================================== */ .footer { padding-block: var(--space-lg); border-top: 1px solid var(--border); text-align: center; } .footer__brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--cream); } .footer__line { color: var(--muted); } .footer__copyright { margin-top: var(--space-sm); font-size: 0.85rem; color: var(--muted); } /* ========================================================================== SCROLL REVEALS -------------------------------------------------------------------------- Sections fade in and rise a touch as they enter the viewport. The hidden state only applies once JS has added `.js-reveal` to , so with no JS (or reduced motion, where JS bails) everything is simply visible. Only opacity + transform animate, so there is never any layout shift. ========================================================================== */ .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; } .js-reveal .reveal.is-revealed { opacity: 1; transform: none; } /* ========================================================================== REDUCED MOTION -------------------------------------------------------------------------- If the visitor has asked their system to minimise animation (a comfort and accessibility setting), we honour it: the hero shows everything at once at full opacity instead of the staggered fade, and on-page scrolling jumps rather than glides. The JS still adds .visible — these rules just make that instant and ensure the layers are visible even before the script runs. ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* Show the hero layers and title immediately, with no fade. */ .layer, .hero__head { opacity: 1; transition: none; } /* Neutralise every other transition (button/link hovers still change colour, just without the timed ease). */ *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }