/* ============================================================ BOMBINETTE — styles.css One stylesheet for the whole site (we'll split it later only if there's a real reason to). Read DESIGN.md for the brand rules. ============================================================ */ /* ---- 1. Brand tokens ------------------------------------------------- CSS "custom properties" (variables). Define the palette once here, then use var(--name) everywhere. Change a colour in one place and it updates across the whole site. */ :root { --chalk: #F2EFE9; /* main background */ --tarmac: #16181D; /* primary text, footer */ --blue: #0A2F7A; /* heritage blue — structure */ --fire: #E8341C; /* the one loud accent */ --brass: #C9A227; /* secondary accent, sparingly */ --asphalt: #5C5C5C; /* secondary text, captions */ /* One consistent corner radius everywhere — never mixed. The rally plate's soft corners set the value. */ --radius: 6px; } /* ---- 2. Sensible resets --------------------------------------------- box-sizing makes width include padding/border, which keeps sizing predictable. Stripping default margins gives us a clean slate. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ---- 3. Page shell --------------------------------------------------- Mobile-first: these rules are for narrow screens, and we only add adjustments for wider screens later via media queries. The body is a vertical flex column that fills the screen height, so the footer always sits at the bottom (its margin-top:auto pushes it down). This base layout is for normal CONTENT pages — header, then content, then footer, flowing top to bottom. */ body { background-color: var(--chalk); color: var(--tarmac); font-family: "Inter", system-ui, sans-serif; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } /* The HOLDING PAGE is the exception: it centres its single block of brand + message in the middle of the screen. We switch that on with a class on (class="page--holding"), so it doesn't affect content pages. */ .page--holding { align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 3.5rem); padding: 2rem 1.5rem; text-align: center; } /* ---- 4. The rally plate (logo image) -------------------------------- The signature brand device, used as the page hero. It's your artwork, so all we do here is centre it and let it scale fluidly with the screen. */ .brand { width: 100%; display: flex; justify-content: center; } /* The logo is a link into the site (the stock page). inline-flex keeps the link wrapped tightly around the image, and a subtle fade on hover hints that it's clickable. */ .brand__logo-link { display: inline-flex; border-radius: var(--radius); transition: opacity 0.15s ease; } .brand__logo-link:hover { opacity: 0.9; } .brand__logo { /* Fluid width: grows with the screen but never wider than 620px and never wider than the screen allows. height:auto keeps the aspect ratio. */ width: clamp(280px, 80vw, 620px); height: auto; display: block; } /* ---- 5. The intro copy ----------------------------------------------- */ .intro { max-width: 38rem; /* keeps lines short and readable */ } .intro__label { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--fire); margin: 0 0 1rem; } .intro__ethos { font-size: clamp(1rem, 2.4vw, 1.2rem); color: var(--tarmac); margin: 0; } /* ---- 6. Footer ------------------------------------------------------- */ .site-footer { margin-top: auto; /* pushes the footer to the bottom of the screen */ padding-top: 2rem; } .site-footer__line { font-family: "IBM Plex Mono", monospace; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--asphalt); margin: 0; } /* ---- 7. The one orchestrated motion ---------------------------------- On load, the rally plate "settles" into place: it starts slightly lifted and faded, then drops in. One moment, nothing more. */ @keyframes plate-settle { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } .brand__logo { animation: plate-settle 0.6s ease-out both; } /* Accessibility: if the visitor has asked their system to reduce motion, we turn the animation off entirely. Required by the quality floor. */ @media (prefers-reduced-motion: reduce) { .brand__logo { animation: none; } } /* ---- 8. Accessibility: visible focus --------------------------------- When anything focusable is reached by keyboard (Tab), give it a clear fire-red outline so keyboard users can see where they are. */ :focus-visible { outline: 3px solid var(--fire); outline-offset: 3px; } /* ---- 9. Wider screens ------------------------------------------------ A small bump in breathing room on the holding page on tablets/desktops. The clamp() values above already do most of the scaling, so we keep this light. */ @media (min-width: 700px) { .page--holding { padding: 3rem; } } /* ====================================================================== CONTENT PAGES — everything below is for the full brochure pages (our-cars.html, etc.), not the holding page. ====================================================================== */ /* ---- 10. Shared container ------------------------------------------- A reusable wrapper that caps content width and adds side padding, so text and grids don't stretch edge-to-edge on big screens. We reuse this inside the header and inside each page section. */ .container { width: 100%; max-width: 1200px; margin: 0 auto; /* centres the block horizontally */ padding-inline: clamp(1rem, 4vw, 2.5rem); } /* ---- 11. Site header + navigation ----------------------------------- A slim heritage-blue bar across the top: the rally-plate logo on the left, the nav links on the right. */ .site-header { background-color: var(--blue); color: var(--chalk); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; /* lets the nav drop to its own row on phones */ gap: 0.75rem 1.5rem; padding-block: 0.75rem; } /* The logo is your rally plate. On the blue bar it reads as a white number-plate badge — which is exactly the look we want. */ .site-header__logo { display: block; height: 38px; width: auto; } /* The nav list: a horizontal row of links, no bullets. */ .site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(0.9rem, 3vw, 1.75rem); } .site-nav__link { /* The "spec sheet" voice for navigation: mono, uppercase, spaced out */ font-family: "IBM Plex Mono", monospace; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--chalk); padding-block: 0.25rem; border-bottom: 2px solid transparent; /* room for the hover underline */ transition: border-color 0.15s ease, color 0.15s ease; } .site-nav__link:hover { border-bottom-color: var(--fire); /* one loud accent, on hover */ } /* The link for the page you're currently on gets a permanent fire underline, so visitors always know where they are. */ .site-nav__link[aria-current="page"] { border-bottom-color: var(--fire); } /* On phones: stack the header into a column — logo on top, nav centred beneath it. A column is far more predictable than wrapping a row, so the four links always sit centred with room to spare. */ @media (max-width: 599px) { .site-header__inner { flex-direction: column; align-items: center; text-align: center; } .site-header__inner nav { width: 100%; } .site-nav__list { width: 100%; flex-wrap: wrap; justify-content: center; gap: 0.9rem; } .site-nav__link { font-size: 0.74rem; letter-spacing: 0.08em; } } /* ---- 12. Page heading block ----------------------------------------- The "// In stock" mono label above a big display heading. Used at the top of each content section. */ .page-head { padding-top: clamp(2rem, 6vw, 3.5rem); padding-bottom: clamp(1.25rem, 4vw, 2rem); } .page-head__label { font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--fire); margin: 0 0 0.5rem; } .page-head__title { font-family: "Anton", "Archivo", sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1; margin: 0; color: var(--tarmac); } /* ---- 13. Stock grid + cards ----------------------------------------- Mobile-first: one column. Two columns on tablets, three on desktop. */ .stock-grid { display: grid; grid-template-columns: 1fr; /* one column by default (phones) */ gap: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: clamp(2.5rem, 6vw, 4rem); } @media (min-width: 600px) { .stock-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .stock-grid { grid-template-columns: repeat(3, 1fr); } } /* Each card. It's a flex column filling the full height of its grid cell, so that within a row every card is the same height and their red dividers line up (see .stock-card__rule below). */ .stock-card { display: flex; flex-direction: column; height: 100%; } /* The photo area. A clean white panel standing in for a real photo (placeholder cars). When a real image is added it fills this box (see .stock-card__photo img below). */ .stock-card__photo { aspect-ratio: 4 / 3; /* keeps every photo box the same shape */ background-color: #ffffff; /* clean white — no tints */ border-radius: var(--radius); overflow: hidden; display: flex; align-items: center; justify-content: center; } /* When you drop a real photo into a card, it fills the box neatly:

inside .stock-card__photo. */ .stock-card__photo img { width: 100%; height: 100%; object-fit: cover; /* crop to fill without squashing */ display: block; } /* Faded version of the logo's front-facing car, shown in an empty photo box as a tasteful, on-brand placeholder until real photography is added. */ .stock-card__fill { width: 100%; height: 70%; background: url("images/car-front.png") center / contain no-repeat; opacity: 0.14; /* faded right back, so it's quiet on white */ } /* The text below the photo. Also a flex column that grows to fill the card, so we can push the divider to the very bottom. */ .stock-card__body { padding-top: 0.9rem; flex: 1; display: flex; flex-direction: column; } .stock-card__name { font-family: "Anton", "Archivo", sans-serif; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.4rem; line-height: 1.05; margin: 0 0 0.5rem; color: var(--tarmac); } /* The mono "spec sheet" line: year, miles, power */ .stock-card__spec { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem; color: var(--asphalt); margin: 0 0 0.6rem; } /* A short, specific note in the spec-sheet voice */ .stock-card__note { font-size: 0.85rem; color: var(--asphalt); margin: 0 0 0.9rem; } .stock-card__price { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 1.05rem; color: var(--tarmac); margin: 0 0 0.9rem; } /* The thin fire-red divider under each card. margin-top:auto pushes it to the bottom of the card, so dividers align across a row even when notes are different lengths. */ .stock-card__rule { border: none; border-top: 2px solid var(--fire); margin: 0; margin-top: auto; } /* ---- 15. Fuller site footer (content pages) -------------------------- */ .site-footer--full { background-color: var(--tarmac); color: var(--chalk); padding-block: clamp(1.5rem, 4vw, 2rem); margin-top: auto; /* sticks to the bottom of short pages */ } .site-footer--full .site-footer__line { color: var(--chalk); }