/* ============================================================ Messerschmitt Foundation of Great Britain — styles.css Production-grade, mobile-first responsive design system. ------------------------------------------------------------ Contents: 01. CSS Custom Properties (design tokens) 02. Reset & Base 03. Accessibility Utilities 04. Layout Primitives 05. Header & Navigation 06. Buttons & Links 07. Hero Section 08. Media Placeholder System 09. Section Headings & Prose 10. Cards & Pillars 11. Timeline 12. Exhibits & Spec Tables 13. Contact Form & Sidebar 14. Footer & Back-to-Top 15. Responsive Media Queries ============================================================ */ /* ============================================================ 01. CSS Custom Properties ============================================================ */ :root { /* Palette — restrained & airy (clean, Wix-style) */ --color-primary: #334155; /* Soft slate — header / footer */ --color-ink: #1F2937; /* Heading ink */ --color-accent: #2E6B4F; /* Muted heritage racing green */ --color-gold: #8C6A35; /* Muted brass — tiny details only */ --color-background: #FFFFFF; /* White base */ --color-surface: #FFFFFF; /* Cards & panels */ --color-surface-muted: #F6F7F9; /* Alternate section bands */ --color-text: #3B4658; /* Body text */ --color-text-light: #667085; /* Secondary text */ --color-border: #E6E8EC; /* Hairlines */ --color-placeholder: #F1F3F6; /* Media placeholders */ /* Typography */ --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-heading: 'Montserrat', 'Inter', system-ui, sans-serif; /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 0.875rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; /* Radii */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Elevation */ --shadow-sm: 0 1px 3px rgba(31, 41, 55, 0.06); --shadow-md: 0 6px 18px rgba(31, 41, 55, 0.08); --shadow-lg: 0 14px 34px rgba(31, 41, 55, 0.12); /* Motion */ --transition-fast: 150ms ease; --transition: 250ms ease; /* Focus ring */ --focus-ring: 3px solid var(--color-accent); /* Layout */ --container-max: 1200px; --header-height: 76px; } /* ============================================================ 01b. Night Drive Dark Theme ------------------------------------------------------------ Toggled by the floating dash button via the data-theme attribute on . Only overrides design tokens — all components adapt automatically. ============================================================ */ html[data-theme="dark"] { --color-background: #0F141C; --color-surface: #1A222C; --color-surface-muted: #161D26; --color-text: #E3E8EF; --color-text-light: #9AA6B4; --color-border: #2B3542; --color-placeholder: #212A35; --color-ink: #F2F5F9; --color-accent: #86C29E; --color-gold: #C9A05C; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4); --shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5); } /* ============================================================ 02. Reset & Base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 16px); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { display: block; max-width: 100%; } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--color-ink); line-height: 1.2; font-weight: 700; } /* ============================================================ 03. Accessibility Utilities ============================================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -60px; left: 16px; z-index: 2000; padding: 0.75rem 1.25rem; background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); transition: top var(--transition-fast); } .skip-link:focus { top: 12px; outline: var(--focus-ring); outline-offset: 2px; } :focus-visible { outline: var(--focus-ring); outline-offset: 3px; } ::selection { background: rgba(46, 107, 79, 0.22); color: inherit; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 04. Layout Primitives ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 1.25rem; } .section { padding-block: var(--space-xl); } .section-alt { background: var(--color-surface-muted); } /* ============================================================ 05. Header & Navigation ============================================================ */ .site-header { position: sticky; top: 0; z-index: 1000; background: var(--color-primary); color: #fff; box-shadow: var(--shadow-md); } /* Pinned header compresses once the page is scrolled so the tab navigation always stays visible without taking up extra room. */ .site-header.is-scrolled .header-inner { min-height: calc(var(--header-height) - 16px); padding-block: 0.4rem; } .site-header.is-scrolled .brand-logo { height: 34px; } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--header-height); padding-block: 0.75rem; transition: min-height var(--transition), padding var(--transition); } .brand { display: inline-flex; align-items: center; gap: 0.75rem; color: #fff; } .brand:hover { text-decoration: none; } .brand-logo { height: 44px; width: auto; flex-shrink: 0; object-fit: contain; transition: height var(--transition); } .brand-text { font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.35; } /* Hamburger toggle */ .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 2px solid rgba(255, 255, 255, 0.35); border-radius: var(--radius-sm); } .nav-toggle-bar { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform var(--transition), opacity var(--transition-fast); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile drawer */ .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--color-primary); border-top: 1px solid rgba(255, 255, 255, 0.12); } .main-nav.is-open { display: block; } .nav-list { list-style: none; padding: 0.5rem 0 1rem; } .nav-link { display: block; padding: 0.85rem 1.25rem; color: rgba(255, 255, 255, 0.88); font-weight: 500; border-left: 3px solid transparent; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); } .nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.06); text-decoration: none; } .nav-link.is-active { color: #fff; border-left-color: var(--color-accent); } .nav-link.is-active:hover { text-decoration: none; } /* ============================================================ 06. Buttons & Links ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.75rem; border-radius: var(--radius-md); font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.02em; text-align: center; border: 2px solid transparent; transition: transform var(--transition-fast), box-shadow var(--transition), background var(--transition), color var(--transition); } .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--color-primary); color: #fff; } .btn-primary:hover { background: #26543F; } .btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-ink); } .btn-secondary:hover { background: var(--color-primary); color: #fff; } /* ============================================================ 07. Hero Section ============================================================ */ .hero-section { position: relative; background: var(--color-surface-muted); color: var(--color-text); overflow: hidden; } .hero-section::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--color-accent); opacity: 0.35; } .hero-grid { display: grid; gap: var(--space-lg); padding-block: var(--space-xl); } .hero-title { color: var(--color-ink); font-size: clamp(1.75rem, 5vw, 2.9rem); margin-block: 0.75rem 1rem; } .hero-lede { color: var(--color-text-light); font-size: 1.05rem; max-width: 34em; margin-bottom: var(--space-md); } .eyebrow { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); } .hero-section .eyebrow { color: var(--color-gold); } .callout-box { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; margin-bottom: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); color: var(--color-text); font-size: 0.98rem; max-width: 34em; } .callout-box strong { color: var(--color-accent); font-family: var(--font-heading); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } /* ---- 07c. Home Collection Stack ---- Three exhibit widgets, one above the other, in the hero's second column. Each one deep-links to Our Exhibits with its car promoted. ------------------------------------------------------------------ */ .hero-collection { display: flex; flex-direction: column; gap: 0.9rem; } .car-stack { display: flex; flex-direction: column; gap: 0.75rem; } .car-widget { display: grid; grid-template-columns: 128px 1fr auto; align-items: center; gap: 1rem; padding: 0.7rem; color: inherit; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .car-widget:hover, .car-widget:focus-visible { border-color: var(--color-gold); transform: translateY(-3px); box-shadow: var(--shadow-lg); } .car-widget-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-placeholder); border-radius: var(--radius-sm); } .car-widget-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); } .car-widget:hover .car-widget-media img { transform: scale(1.05); } .car-widget-label { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .car-widget .placeholder-badge { font-size: 0.78rem; padding: 0.25rem 0.7rem; box-shadow: none; } .car-widget .placeholder-caption { position: static; margin: 0; font-size: 0.78rem; color: var(--color-text-light); } .car-widget-go { display: grid; place-items: center; width: 36px; height: 36px; color: var(--color-accent); background: rgba(46, 107, 79, 0.08); border-radius: 50%; transition: background var(--transition-fast), color var(--transition-fast); } .car-widget-go svg { width: 18px; height: 18px; } .car-widget:hover .car-widget-go, .car-widget:focus-visible .car-widget-go { background: var(--color-gold); color: #fff; } /* ---- 07d. Home Hero Photograph Deck ---- The hero's three photographs sit in a shuffled stack: the one on show is full size, the two behind peek out up and to the right, and app.js module 09 deals the stack forward every few seconds — the next plate rising to the front while the old front steps back. The reveal is budgeted inside the frame rather than around it. The frame keeps a --reveal-x strip down its right side and a matching --reveal-y strip above, the plate on show is inset by exactly those strips, and the plates behind are translated by half and then all of the way out. Nothing spills past the frame, so the deck can never tread on the column gutter or the hero text at any width. --reveal-y is --reveal-x restated as a share of the height: the frame is 4:3, so the same number of pixels is 8 / 0.75 = 10.667%. The translate percentages resolve against each plate's own size, which is slightly smaller than the frame, so the plates land just inside the strips rather than exactly on their edges. ------------------------------------------------------------------ */ .hero-photo { --reveal-x: 8%; --reveal-y: 10.667%; /* The figure is a grid so the caption and the step buttons can share a row beneath the frame without a wrapper — a figcaption has to stay a direct child of the figure. */ display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.9rem; row-gap: 0.65rem; align-items: center; margin: 0; } /* The 4:3 box the plates are laid out in. It is a child of the figure rather than the figure itself so that the caption below can sit in flow without the ratio box growing to swallow it — the plates size themselves against the frame, and would be a caption taller if the aspect-ratio sat on the figure. */ .hero-deck-frame { grid-column: 1 / -1; position: relative; aspect-ratio: 4 / 3; /* Keeps the plates' z-indexes out of the page's own competition. */ isolation: isolate; /* A sideways drag belongs to the deck; up and down still scrolls the page, so a diagonal flick is never swallowed. */ touch-action: pan-y; } /* A caption belongs to one plate and is only shown while that plate is the one on show. It keeps its height when hidden, so the deck does not resize as the stack turns. */ .hero-deck-caption { grid-column: 1; font-size: 0.78rem; line-height: 1.5; color: var(--color-text-light); opacity: 0; transition: opacity 320ms ease; } .hero-deck-caption.is-shown { opacity: 1; } .hero-deck-controls { grid-column: 2; display: flex; gap: 0.4rem; } /* Same circular control as the Collection widgets, so the two panels read as one set of objects. */ .hero-deck-step { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 50%; box-shadow: var(--shadow-sm); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .hero-deck-step:hover, .hero-deck-step:focus-visible { background: var(--color-gold); border-color: var(--color-gold); color: #fff; } .hero-deck-step svg { width: 17px; height: 17px; } .hero-deck-slide { position: absolute; left: 0; bottom: 0; width: calc(100% - var(--reveal-x)); height: calc(100% - var(--reveal-y)); object-fit: cover; background: var(--color-placeholder); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); /* The back-out curve is what makes a plate read as *coming forward*: it overshoots the upright position and settles back into it. Keep the duration in step with HOLD in app.js module 09. */ transition: transform 700ms cubic-bezier(0.2, 1.22, 0.36, 1), opacity 700ms ease; } /* The plate on show — full size, upright, in front. */ .hero-deck-slide[data-depth="0"] { transform: none; opacity: 1; z-index: 3; } /* First and second behind it, each half and then all of the way out. The easy scale gives the two behind a sense of sitting further away. */ .hero-deck-slide[data-depth="1"] { transform: translate(calc(var(--reveal-x) / 2), calc(var(--reveal-y) / -2)) scale(0.985); opacity: 0.9; z-index: 2; } .hero-deck-slide[data-depth="2"] { transform: translate(var(--reveal-x), calc(var(--reveal-y) * -1)) scale(0.97); opacity: 0.78; z-index: 1; } /* The fan has room for the plate on show and two behind it. A deck with more plates than that parks the extras in the back slot and fades them out, so four or five photographs still read as a stack of three. data-depth="3" is the state before app.js takes the deck over. */ .hero-deck-slide[data-depth="3"], .hero-deck-slide.is-buried { opacity: 0; } /* Each plate keeps the crop line that suits it. The portrait one is framed high, because centring it would take the owner's head off. */ .hero-deck-slide[data-focus="high"] { object-position: center 15%; } /* .btn-secondary on light heroes uses the default outline style */ /* ============================================================ 07b. Page Hero (interior pages) ============================================================ */ .page-hero { position: relative; background: var(--color-surface-muted); color: var(--color-text); padding-block: var(--space-xl); overflow: hidden; } .page-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--color-accent); opacity: 0.35; } .page-hero .page-title { color: var(--color-ink); font-size: clamp(1.75rem, 4vw, 2.5rem); margin-block: 0.75rem; } .page-hero .page-subtitle { color: var(--color-text-light); font-size: 1.05rem; max-width: 46em; } .page-hero .eyebrow { color: var(--color-gold); } /* ============================================================ 08. Media Placeholder System ============================================================ */ .media-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; aspect-ratio: 16 / 9; padding: 1.5rem; background-color: var(--color-placeholder); background-image: linear-gradient(45deg, rgba(51, 65, 85, 0.05) 25%, transparent 25%, transparent 75%, rgba(51, 65, 85, 0.05) 75%), linear-gradient(45deg, rgba(51, 65, 85, 0.05) 25%, transparent 25%, transparent 75%, rgba(51, 65, 85, 0.05) 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; border: 2px dashed var(--color-border); border-radius: var(--radius-md); color: var(--color-text-light); } .placeholder-icon { width: 44px; height: 44px; color: var(--color-ink); opacity: 0.6; } .placeholder-badge { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.3rem 0.85rem; box-shadow: var(--shadow-sm); } .placeholder-caption { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; } /* Alternate 4:3 ratio variant */ .media-placeholder.ratio-4-3 { aspect-ratio: 4 / 3; } /* Real photo fills the frame; badge/caption overlay the photo */ .media-placeholder.has-photo { position: relative; overflow: hidden; padding: 0; border-style: solid; } .media-placeholder.has-photo .media-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .media-placeholder.has-photo .placeholder-badge { position: absolute; left: 0.75rem; bottom: 0.75rem; margin: 0; z-index: 2; } .media-placeholder.has-photo .placeholder-caption { position: absolute; right: 0.75rem; bottom: 0.9rem; margin: 0; z-index: 2; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85); } /* ---- Whole-photo selector (promotes the exhibit) ---- */ .exhibit-select { position: absolute; inset: 0; z-index: 2; padding: 0; cursor: pointer; border: 2px solid transparent; background: transparent; transition: border-color var(--transition), background var(--transition); } .exhibit-select[hidden] { display: none; } .exhibit-select:hover { border-color: rgba(140, 106, 55, 0.5); background: rgba(15, 20, 28, 0.08); } .exhibit-select:focus-visible { outline: var(--focus-ring); outline-offset: -6px; } .media-placeholder.has-photo.is-selected { box-shadow: inset 0 0 0 2px var(--color-gold); } .media-placeholder.has-photo.is-selected .placeholder-badge { background: var(--color-gold); border-color: var(--color-gold); color: #fff; } /* A soft scrim along the foot of every photo so the badge and the caption stay readable whatever the picture does underneath. */ .media-placeholder.has-photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 48%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(10, 14, 20, 0) 0%, rgba(10, 14, 20, 0.62) 62%, rgba(10, 14, 20, 0.86) 100%); } /* ---- Badge / caption overlay bar --------------------------------- The badge and caption share the foot of the photo: side by side while both fit, wrapping onto two left-aligned lines once the photo (or the column it sits in) gets narrow. Driven by the content itself, so it needs no breakpoints. ------------------------------------------------------------------ */ .media-placeholder.has-photo .photo-overlay { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 2; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.5rem; } .media-placeholder.has-photo .photo-overlay .placeholder-badge, .media-placeholder.has-photo .photo-overlay .placeholder-caption { position: static; inset: auto; margin: 0; } /* ============================================================ 09. Section Headings & Prose ============================================================ */ .section-heading { margin-bottom: var(--space-lg); } .section-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); margin-block: 0.5rem 0.75rem; } .section-subtitle { color: var(--color-text-light); max-width: 46em; } .prose-grid { display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); } .prose-grid p { max-width: 72ch; } /* ---- 09b. Foundation Panel (About page) ---- The Fend House details, the donation link and the archive summary, migrated from the Foundation's previous page. Only the arrangement is carried over — every colour, font and radius here is the site's own, so the panel sits in the page rather than on top of it. ------------------------------------------------------------------ */ .foundation-panel { margin-bottom: var(--space-lg); } /* Register name, charity number and address, wrapping onto as many lines as the width needs. */ .foundation-masthead { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; padding-bottom: var(--space-sm); margin-bottom: var(--space-md); border-bottom: 1px solid var(--color-border); } .foundation-masthead span { font-size: 0.82rem; color: var(--color-text-light); } .foundation-masthead span:first-child { font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.03em; color: var(--color-ink); } /* The donation line borrows the callout treatment — accent edge, quiet surface — so it reads as the one thing on the panel worth pressing. */ .foundation-donate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem; padding: 0.75rem 1rem; margin-bottom: var(--space-md); background: var(--color-surface-muted); border: 1px solid var(--color-border); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); } .foundation-donate a { font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.01em; overflow-wrap: anywhere; } .foundation-donate span { font-size: 0.88rem; color: var(--color-text-light); } .foundation-grid { display: grid; gap: var(--space-md); } .foundation-photo img { width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .foundation-facts { display: grid; gap: 0.85rem; } .foundation-facts p { font-size: 0.95rem; } .foundation-facts strong { font-family: var(--font-heading); font-size: 0.88rem; letter-spacing: 0.01em; color: var(--color-ink); } /* Stacked, the two columns would both run away with themselves: the photograph is only 500px wide and would be stretched to nearly twice that, and the facts would set at well over a hundred characters a line. Cap both, left-aligned so they share an edge. */ @media (max-width: 1024px) { .foundation-photo img { max-width: 500px; } .foundation-facts p { max-width: 72ch; } } /* Photograph beside the facts once there is width for both. */ @media (min-width: 1025px) { .foundation-grid { grid-template-columns: 0.85fr 1.15fr; column-gap: var(--space-lg); align-items: start; } } /* ============================================================ 10. Cards & Pillars ============================================================ */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 1.5rem; transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .card-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--space-md); color: var(--color-accent); background: rgba(46, 107, 79, 0.08); border-radius: var(--radius-md); } .card-icon svg { width: 28px; height: 28px; } .card-title { font-size: 1.2rem; margin-bottom: 0.6rem; } .card-text { color: var(--color-text-light); font-size: 0.97rem; } .pillars-grid { display: grid; gap: var(--space-md); } .explore-grid { display: grid; gap: var(--space-md); } .explore-card { display: flex; flex-direction: column; gap: 0.5rem; color: inherit; text-decoration: none; } .explore-card:hover { text-decoration: none; } .explore-card .card-icon { margin-bottom: 0.5rem; } /* ============================================================ 11. Timeline ============================================================ */ .history-page-shell { position: relative; isolation: isolate; } .history-spotlight { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.96; } .history-spotlight-image-wrap { position: absolute; inset: 0; overflow: hidden; filter: saturate(1.1) contrast(1.2) brightness(0.82); } .history-spotlight-image-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); opacity: 0; clip-path: inset(0 0 100% 0); transition: opacity 200ms ease, transform 300ms ease; } .history-spotlight-image-wrap img.is-front { opacity: 0.96; clip-path: inset(0 0 0 0); } .history-spotlight-image-wrap img.is-enter { z-index: 2; transition: opacity 200ms ease, transform 300ms ease, clip-path 200ms cubic-bezier(0.4, 0, 0.2, 1); } /* Tall 1955 photo: keep the top of the image in view (the two people). */ .history-spotlight-image-wrap img[src$="1955.jpg"] { object-position: top center; } .history-spotlight-gradient { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7, 12, 17, 0.72) 0%, rgba(14, 20, 25, 0.64) 22%, rgba(14, 20, 25, 0.34) 58%, rgba(14, 20, 25, 0.74) 100%), linear-gradient(180deg, rgba(15, 20, 28, 0.18) 0%, rgba(10, 14, 19, 0.7) 100%); } .page-hero, .section, .site-footer { position: relative; z-index: 1; } .timeline { list-style: none; position: relative; padding-left: 1.25rem; max-width: 780px; z-index: 1; /* Scroll progress through the timeline, driven from app.js */ --progress: 0; /* End of the fill: measured by app.js to the last dot so it never runs past it */ --dot-end: 100%; } /* Unfilled track of the timeline progress line. */ .timeline::before { content: ""; position: absolute; top: 0; left: 5px; width: 3px; height: var(--dot-end, 100%); background: rgba(140, 106, 53, 0.8); opacity: 0.35; border-radius: 3px; } /* Filled portion of the timeline progress line. */ .timeline::after { content: ""; position: absolute; top: 0; left: 5px; width: 3px; height: calc(var(--progress) * var(--dot-end, 100%)); background: rgba(226, 178, 96, 0.95); box-shadow: 0 0 8px rgba(226, 178, 96, 0.55); border-radius: 3px; transition: height 120ms linear; } body[data-page="history"] .section, body[data-page="history"] .section-alt, body[data-page="history"] .site-footer { background: transparent; } body[data-page="history"] .timeline-item { padding: 0.5rem 0 var(--space-lg) 1.5rem; } body[data-page="history"] .timeline-item .timeline-body { background: rgba(9, 14, 18, 0.18); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1rem; padding: 1rem 1.1rem; backdrop-filter: blur(1.5px); } .timeline-item { position: relative; padding: 0 0 var(--space-lg) 1.5rem; transition: transform var(--transition), opacity var(--transition); } .timeline-item:last-child { padding-bottom: 0; } .timeline-item.is-active { transform: translateX(10px); } .timeline-marker { position: absolute; top: 6px; left: -1.25rem; width: 14px; height: 14px; border-radius: 50%; background: rgba(140, 106, 53, 0.9); border: 3px solid rgba(15, 20, 28, 0.9); box-shadow: 0 0 0 3px rgba(140, 106, 53, 0.22); z-index: 1; /* keep dots visible above the progress fill */ transition: all var(--transition); } .timeline-item.is-active .timeline-marker { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25), 0 0 20px rgba(255, 255, 255, 0.35); } /* "Today" dot — fills with the progress line and glows at the end. */ .timeline-item.is-today .timeline-marker { width: 16px; height: 16px; background: rgba(226, 178, 96, 0.4); border-color: rgba(226, 178, 96, 0.85); } .timeline-item.is-today.is-active .timeline-marker { background: #f0c878; border-color: #fff; box-shadow: 0 0 0 4px rgba(226, 178, 96, 0.35), 0 0 22px 6px rgba(226, 178, 96, 0.7); animation: today-glow 1.8s ease-in-out infinite; } @keyframes today-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(226, 178, 96, 0.3), 0 0 14px 4px rgba(226, 178, 96, 0.5); } 50% { box-shadow: 0 0 0 5px rgba(226, 178, 96, 0.45), 0 0 32px 10px rgba(226, 178, 96, 0.9); } } .timeline-meta { display: inline-block; margin-bottom: 0.5rem; } .timeline-year { display: inline-block; font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: rgba(51, 65, 85, 0.82); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); padding: 0.2rem 0.7rem; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast); box-shadow: var(--shadow-sm); } .timeline-item.is-active .timeline-year { background: rgba(46, 107, 79, 0.9); border-color: rgba(255, 255, 255, 0.36); box-shadow: 0 0 0 2px rgba(46, 107, 79, 0.35), var(--shadow-md); transform: translateY(-1px); } .timeline-title { font-size: 1.15rem; margin-bottom: 0.4rem; color: rgba(255, 255, 255, 0.96); transition: color var(--transition); } .timeline-item.is-active .timeline-title { color: #f8f2e8; } .timeline-text { color: rgba(244, 247, 251, 0.96); max-width: 60ch; line-height: 1.7; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28); } /* ============================================================ 11b. Archive Catalog ============================================================ */ .archive-layout { display: grid; gap: var(--space-lg); } .archive-group { padding: 1.5rem; } .archive-group-title { margin-bottom: 1rem; font-size: 1.15rem; } .archive-list { list-style: none; display: grid; gap: 0.9rem; } .archive-list li { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.02); } .archive-list a { font-weight: 600; } .archive-list span { font-size: 0.8rem; color: var(--color-text-light); letter-spacing: 0.02em; } /* ============================================================ 12. Exhibits & Spec Tables ============================================================ */ .exhibits-grid { display: grid; gap: var(--space-lg); } .exhibit-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; } .exhibit-card .exhibit-placeholder { border: none; border-radius: 0; border-bottom: 1px solid var(--color-border); } .exhibit-featured { order: -1; /* whichever card holds the slot is placed first */ border-color: rgba(46, 107, 79, 0.4); box-shadow: 0 0 0 1px rgba(46, 107, 79, 0.18), var(--shadow-md); } /* The smaller boxes are pressable — pressing one promotes it */ .exhibit-card:not(.exhibit-featured) { cursor: pointer; } /* Nothing to press on the featured card's own photo, so drop the hint */ .exhibit-card.exhibit-featured .exhibit-select { cursor: default; } .exhibit-card.exhibit-featured .exhibit-select:hover { border-color: transparent; background: transparent; } /* Promotion / demotion — a quick grow into the featured slot */ .exhibit-card.is-promoting { animation: exhibit-promote 400ms cubic-bezier(0.2, 0.7, 0.3, 1); } @keyframes exhibit-promote { from { opacity: 0; transform: scale(0.94) translateY(14px); } to { opacity: 1; transform: none; } } .exhibit-card.is-demoting { animation: exhibit-demote 340ms ease; } @keyframes exhibit-demote { from { opacity: 0.5; transform: scale(1.02); } to { opacity: 1; transform: none; } } .exhibit-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .exhibit-tag { align-self: flex-start; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); background: rgba(46, 107, 79, 0.08); border-radius: 999px; padding: 0.3rem 0.8rem; } .spec-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin-top: 0.5rem; } .spec-table th, .spec-table td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; } .spec-table th { width: 40%; font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink); white-space: nowrap; } .spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: none; } .spec-table tr:hover th, .spec-table tr:hover td { background: var(--color-surface-muted); } /* ---- Specification panel ------------------------------------------ The featured card's sheet. Promoting an exhibit replaces the sheet inside it, with a short out/in animation on the body and a brass flash on the frame. ------------------------------------------------------------------ */ .spec-panel { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition), box-shadow var(--transition); } .spec-panel.is-swapping { border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(140, 106, 55, 0.14); } .spec-panel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; } .spec-panel-eyebrow { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-gold); } .spec-panel-car { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.25rem 0.7rem; } .spec-panel-body { transition: opacity var(--transition-fast), transform var(--transition-fast); } .spec-panel-body.is-out { opacity: 0; transform: translateY(6px); } .spec-panel-body.is-in { animation: spec-sheet-in 220ms ease; } @keyframes spec-sheet-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Row hover reads as a brass tint on the muted sheet */ .spec-panel .spec-table tr:hover th, .spec-panel .spec-table tr:hover td { background: rgba(140, 106, 55, 0.08); } /* ============================================================ 13. Contact Form & Sidebar ============================================================ */ .contact-grid { display: grid; gap: var(--space-lg); } .contact-form { display: grid; gap: var(--space-md); padding: var(--space-lg); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .form-field { display: flex; flex-direction: column; gap: 0.4rem; } .form-field label { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-ink); } .form-field input, .form-field select, .form-field textarea { font-family: inherit; font-size: 1rem; color: var(--color-text); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.75rem 0.9rem; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(46, 107, 79, 0.18); } .form-field textarea { resize: vertical; min-height: 130px; } .form-field input.has-error, .form-field select.has-error, .form-field textarea.has-error { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.15); } .form-error { font-size: 0.85rem; color: #B3261E; min-height: 1em; } .form-status { font-size: 0.95rem; font-weight: 600; min-height: 1.4em; } .form-status.is-success { color: var(--color-accent); } .form-status.is-error { color: #B3261E; } /* Delivery choices shown after a valid submit. Each opens a new tab holding the enquiry already written, so nothing depends on the visitor having a mail app registered. Buttons rather than links in look, because they feel like an action, but they are real elements — they do navigate somewhere new. */ .form-send { display: grid; gap: 0.7rem; padding: var(--space-md); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .form-send[hidden] { display: none; } .form-send-heading { font-size: 0.95rem; font-weight: 700; color: var(--color-ink); } .form-send-options { display: flex; flex-wrap: wrap; gap: 0.6rem; } .form-send-option { display: inline-flex; align-items: center; padding: 0.6rem 1.15rem; font-family: var(--font-heading); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.02em; color: var(--color-ink); background: var(--color-background); border: 2px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition); } .form-send-option:hover { color: var(--color-accent); border-color: var(--color-accent); transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; } .form-send-note { font-size: 0.85rem; color: var(--color-text-light); } .contact-sidebar { display: grid; gap: var(--space-md); align-content: start; } .contact-address { font-style: normal; line-height: 2; color: var(--color-text-light); } .contact-address a { font-weight: 600; } .policy-list { list-style: none; display: grid; gap: 0.6rem; color: var(--color-text-light); font-size: 0.95rem; } .policy-list li { position: relative; padding-left: 1.4rem; } .policy-list li::before { content: "•"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700; } /* ============================================================ 14. Footer & Back-to-Top ============================================================ */ .site-footer { background: var(--color-primary); color: rgba(255, 255, 255, 0.85); padding-block: var(--space-xl) var(--space-md); margin-top: var(--space-lg); } .footer-grid { display: grid; gap: var(--space-lg); padding-bottom: var(--space-lg); } .footer-logo { height: 40px; width: auto; object-fit: contain; margin-bottom: 0.75rem; } .footer-title { color: #fff; font-size: 0.95rem; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .footer-text { color: rgba(255, 255, 255, 0.7); font-size: 0.92rem; } .footer-heading { color: rgba(255, 255, 255, 0.9); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.75rem; } .footer-nav ul, .footer-legal ul { list-style: none; display: grid; gap: 0.5rem; } .footer-nav a, .footer-legal a { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; } .footer-nav a:hover, .footer-legal a:hover { color: var(--color-gold); } .footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); padding-top: var(--space-md); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); } .back-to-top { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--color-accent); color: #fff; font-size: 1.25rem; font-weight: 700; box-shadow: var(--shadow-md); transition: transform var(--transition), opacity var(--transition); } .back-to-top:hover { transform: translateY(-3px); } /* ============================================================ 15. Responsive Media Queries ------------------------------------------------------------ Mobile-first: default styles above target < 768px. ============================================================ */ /* Tablet (768px – 1024px) */ @media (min-width: 768px) { .container { padding-inline: 2rem; } .section { padding-block: calc(var(--space-xl) + 1rem); } .hero-grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-xl); } /* A third column does not fit yet — the H1 would lose its measure and the car widgets their labels — so the deck sits above the text-and-collection row. It is capped rather than run full width: a stack of photographs should read as one object, and a frame the full 1100px would push the headline off a tablet screen entirely. The cap is a width, not a max-width: every plate is absolutely positioned, so the figure has no content to size itself from, and auto margins would otherwise collapse it to nothing. */ .hero-photo { grid-column: 1 / -1; width: min(44rem, 100%); margin-inline: auto; } .pillars-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .explore-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .exhibits-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .exhibit-featured { grid-column: span 2; } .exhibit-featured .exhibit-body { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); } .exhibit-featured .card-title, .exhibit-featured .card-text, .exhibit-featured .exhibit-tag { grid-column: 1; } .exhibit-featured .spec-panel { grid-column: 2; grid-row: 1 / span 3; align-self: center; } .contact-grid { grid-template-columns: 1.2fr 0.8fr; align-items: start; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-lg); } } /* Desktop (> 1024px) */ @media (min-width: 1025px) { .container { padding-inline: 2.5rem; } /* ---- Horizontal navigation --------------------------------- The six tabs plus the two-line wordmark need about a thousand pixels. Revealed at 768px they used to run straight over the brand — "FOUNDATION OF GREAT BRITAIN" printed across "Home" — so the drawer now holds the whole way up to the desktop breakpoint, where the row genuinely fits. */ .nav-toggle { display: none; } .main-nav { display: block; position: static; max-height: none; overflow: visible; background: transparent; border-top: none; box-shadow: none; } .nav-list { display: flex; align-items: center; gap: 0.25rem; padding: 0; } .nav-link { display: block; min-height: 0; padding: 0.6rem 0.7rem; font-size: 1rem; border-left: none; border-bottom: 3px solid transparent; border-radius: var(--radius-sm); } .nav-link.is-active { border-left-color: transparent; border-bottom-color: var(--color-accent); } .explore-grid { grid-template-columns: repeat(4, 1fr); } .exhibits-grid { grid-template-columns: repeat(3, 1fr); } .exhibit-featured { grid-column: span 3; } .exhibit-featured .exhibit-body { grid-template-columns: 1.15fr 1fr; } .prose-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-lg); } .prose-grid p:last-child { grid-column: span 2; } } /* Wide desktop: once there is room to spare, the tabs go back to their original spacing. Between 1025px and here they run a little tighter so the row clears the wordmark. */ @media (min-width: 1200px) { .nav-link { padding: 0.6rem 0.85rem; } /* ---- Hero: photograph | text | collection -------------------- The container reaches its 1200px ceiling here, and the photograph now leads the row at roughly 460px — the largest of the three columns by some way. The text and the car widgets are held at the narrowest widths they still work at: the H1 keeps a readable measure, and the widgets keep room for a thumbnail beside their two labels. Three things pay for the extra width: the gutter drops from --space-xl to --space-md (80px back to the photograph), the H1 steps down again, and the widget thumbnails slim to 94px so "FMR Tg500" still sets on one line. */ .hero-grid { grid-template-columns: 1.5fr 1.05fr 0.95fr; gap: var(--space-md); } /* Back into a column of its own, filling it rather than sitting at the capped width the 768px block set. */ .hero-photo { grid-column: auto; width: auto; margin-inline: 0; } /* This column no longer grows with the viewport, so a 2.5rem headline would set as a narrow ribbon. */ .hero-title { font-size: clamp(1.5rem, 2.9vw, 2.25rem); } /* The widest badge, "FMR Tg500", needs 101px on one line, so the thumbnail and gutter give up a little more to leave the label comfortably clear of a wrap at the narrow end of this range. The 1280px block below starts widening both again as the column grows. */ .car-widget { grid-template-columns: 94px 1fr auto; gap: 0.8rem; } } /* ============================================================ Wide screens — the hero breathes (>= 1280px) ------------------------------------------------------------ Everything above is written for a 1200px container, and the container used to stop dead there. On a large display that left the whole site huddled in the middle of a lot of empty screen while the hero sat at its most compressed: a 24px gutter, a 36px headline, and a text column narrow enough to set the headline as a ribbon. Past 1280px the container now grows with the viewport, up to 1520px, so the space is actually used. The hero then ramps two things in step with it — the gutter between the three components, and the size of the text inside them. Every ramp below is a straight line anchored to 1280px, so each one meets the 1200px block exactly at the join and there is no jump when the browser crosses the breakpoint: 1280px 1600px 1920px container 1200 1400 1520 (capped) hero gutter 24 40 56 text column 322 372 398 headline 36.2 43.2 44.8 (capped) lede 16.8 18.4 20.0 eyebrow 12.5 13.2 14.1 widget thumbnail 94 113 120 (capped) The headline stops at 2.8rem rather than running on: its column and its type do not grow at the same rate, and past about 45px the headline starts breaking a line earlier and setting nine lines where it set seven, which is more cramped than before, not less. At the far end that leaves the hero photograph around 570px wide — still the largest of the three columns, and a good deal taller in the frame than the 345px it stood at before. ============================================================ */ @media (min-width: 1280px) { :root { --container-max: clamp(1200px, 62.5vw + 400px, 1520px); } .hero-grid { gap: clamp(1.5rem, 5vw - 2.5rem, 3.5rem); } .hero-title { font-size: clamp(1.5rem, 2.2vw + 0.5rem, 2.8rem); } .hero-lede { font-size: clamp(1.05rem, 0.5vw + 0.65rem, 1.3rem); } .hero-section .eyebrow { font-size: clamp(0.78rem, 0.25vw + 0.58rem, 0.9rem); } .callout-box { font-size: clamp(0.98rem, 0.35vw + 0.7rem, 1.12rem); } /* Room again for a fuller thumbnail as the column widens. */ .car-widget { grid-template-columns: clamp(94px, 6vw + 17px, 120px) 1fr auto; gap: 0.9rem; } } /* ============================================================ ME 200 "In the Wild" — background of the Explore section ------------------------------------------------------------ The photo fills the Explore section as a background, biased to show the top (the figures), and blends into the page with top and bottom gradient fades. ============================================================ */ .section-explore-bg { position: relative; background-color: var(--color-background); background-image: linear-gradient(180deg, var(--color-background) 0%, rgba(13, 18, 26, 0.7) 14%, rgba(13, 18, 26, 0.22) 32%, rgba(13, 18, 26, 0.22) 64%, rgba(13, 18, 26, 0.74) 88%, var(--color-background) 100%), url("me 200 in the wild.jpeg"); background-size: 100% 100%, cover; background-position: center, top center; background-repeat: no-repeat; } .section-explore-bg .section-heading { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65); } /* This band always sits on a darkened photograph, whichever way the red button is switched, so its type is pinned light rather than following the theme — in Day mode the heading ink was landing dark on a dark picture. */ .section-explore-bg .section-title { color: #F5F8FC; } .section-explore-bg .section-subtitle { color: rgba(238, 243, 249, 0.92); } .section-explore-bg .eyebrow { color: #D9A85E; } /* ============================================================ 16. Glassmorphism "Canopy Door" Exhibit Card ------------------------------------------------------------ A layered exhibit card inspired by the acrylic side-hinged canopy of the KR200. The glass "lid" hinges open on hover / focus / tap to reveal the cabin's technical specs beneath. ============================================================ */ .canopy-scene { perspective: 1000px; } .canopy-card { position: relative; width: min(560px, 100%); margin-inline: auto; border-radius: 16px; } /* Top layer: the glass canopy lid (a real