/* * DBD theme CSS — block styles + base treatments. * Tokens are theme.json presets (--wp--preset--color--*, --wp--preset--spacing--*, * --wp--custom--*). Transactional surfaces (product, price, checkout) never use the * personality device styles. */ /* --------------------------------------------------------------------------- * Accessibility (WCAG 2.2) * ------------------------------------------------------------------------- */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--wp--preset--color--cobalt); outline-offset: 2px; } .skip-link:focus { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); } /* Comfortable tap targets for dense link rows. */ .dbd-footer-links a, .dbd-nav a { display: inline-block; min-height: 24px; line-height: 1.5; } /* --------------------------------------------------------------------------- * Heading font-size presets — repair * WP does not emit --wp--preset--font-size--h1/h2/h3 for these slug names, so * `.has-hN-font-size` references an empty var (invalid → dropped) and headings * fall back to 16px. Define the intended scale directly (values mirror theme.json). * ------------------------------------------------------------------------- */ .has-h1-font-size { font-size: clamp(30px, 1.7rem + 1vw, 36px); } .has-h2-font-size { font-size: clamp(26px, 1.5rem, 28px); } .has-h3-font-size { font-size: clamp(20px, 1.2rem, 22px); } /* --------------------------------------------------------------------------- * Mono label — eyebrows, index numbers, nav, spec labels * ------------------------------------------------------------------------- */ .has-mono-label-font-size { font-family: var(--wp--preset--font-family--mono); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } /* --------------------------------------------------------------------------- * Section header — "01 / WHAT I DO" + heading + fine rule * ------------------------------------------------------------------------- */ .dbd-section-header { border-top: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); padding-top: var(--wp--preset--spacing--3); } .dbd-section-header .dbd-index { margin: 0 0 var(--wp--preset--spacing--2); color: var(--wp--preset--color--ink-muted); } /* --------------------------------------------------------------------------- * Rule header — index label above a full-width hairline (Figma "02 / THE SHOP") * ------------------------------------------------------------------------- */ .dbd-rule-header .dbd-index { margin: 0; color: inherit; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; } .dbd-rule-header .dbd-rule { width: 100%; max-width: none; height: var(--wp--custom--rule--weight, 1px); margin: 0; border: 0; opacity: 1; } /* --------------------------------------------------------------------------- * Spec sheet — mono label left, value right, hairline rows * ------------------------------------------------------------------------- */ .dbd-spec-sheet { display: flex; flex-direction: column; } .dbd-spec-row { display: flex; justify-content: space-between; gap: var(--wp--preset--spacing--4); padding: var(--wp--preset--spacing--3) 0; margin: 0; border-top: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); } .dbd-spec-row > * { margin: 0; } .dbd-spec-label { color: var(--wp--preset--color--ink-muted); } .dbd-spec-value { text-align: right; } /* --------------------------------------------------------------------------- * Read-out panel — bordered mono status box ("OPEN 11 to 6") * ------------------------------------------------------------------------- */ .is-style-read-out { border: var(--wp--custom--rule--weight) solid currentColor; padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3); font-family: var(--wp--preset--font-family--mono); } /* --------------------------------------------------------------------------- * Footer (ink ground) * ------------------------------------------------------------------------- */ .dbd-stamp { display: inline-block; margin: 0; padding: 4px 10px; border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); } .dbd-footer .dbd-stamp { border-color: var(--wp--preset--color--paper); } .dbd-footer .dbd-spec-row { border-top-color: color-mix(in srgb, var(--wp--preset--color--paper) 28%, transparent); } .dbd-footer .dbd-spec-label { color: color-mix(in srgb, var(--wp--preset--color--paper) 70%, transparent); } .dbd-footer .dbd-spec-value a { color: var(--wp--preset--color--paper); } .dbd-footer-links a { color: var(--wp--preset--color--paper); text-decoration: none; } .dbd-footer-links a:hover, .dbd-footer-links a:focus-visible { text-decoration: underline; } .dbd-footer .dbd-signoff { color: color-mix(in srgb, var(--wp--preset--color--paper) 80%, transparent); margin: 0; } /* --------------------------------------------------------------------------- * Header + navigation * ------------------------------------------------------------------------- */ .dbd-header { border-bottom: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); position: sticky; top: 0; z-index: 100; } /* The block template part wraps the header in its own
, whose height equals the header's — so sticky on the inner element never has room to stick. Make the wrapper the sticky box (admin bar offset for logged-in users). */ .wp-block-template-part:has(> .dbd-header) { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; } .dbd-header { /* Full-bleed bar, but wordmark/nav align to the same centred content column (--wp--style--global--content-size = 1100px) as every page section + the footer. */ padding-inline: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--content-size, 1100px)) / 2)); } .dbd-wordmark a { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: var(--wp--preset--font-size--h3); letter-spacing: -0.01em; color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-nav a, .dbd-nav .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-nav a:hover { text-decoration: underline; } .dbd-readout { padding: 6px 10px; } .dbd-readout p { margin: 0; } /* Desktop cluster vs mobile menu toggle */ .dbd-nav-mobile { display: none; } @media (max-width: 781px) { .dbd-header .dbd-nav-desktop { display: none !important; } .dbd-header .dbd-nav-mobile { display: block; } } /* Menu toggle — closed-state button that lives in the header (Figma 417:771 trigger) */ .dbd-menu-toggle { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 8px 14px; background: transparent; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); border-radius: 0; } /* Full-screen overlay — open state (Figma 417:771) */ .dbd-mobile-menu { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; overflow-y: auto; /* Top clearance only; the bottom is 0 so the pinned contact/CTA can reach the foot of the screen (the CTA carries its own safe-area bottom padding). */ padding: var(--wp--custom--safe-top) var(--wp--custom--gutter) 0; background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); opacity: 0; transition: opacity 0.2s ease; -webkit-overflow-scrolling: touch; } .dbd-mobile-menu[hidden] { display: none; } .dbd-mobile-menu.is-open { opacity: 1; } .dbd-mobile-menu a { color: var(--wp--preset--color--paper); } /* .is-style-grain sets position:relative at equal specificity and later in the source order; re-assert fixed positioning with a higher-specificity selector. */ .dbd-mobile-menu.is-style-grain { position: fixed; inset: 0; } /* Fill the visible overlay so the contact block can pin to the bottom. flex-grow makes it fill when content is short (portrait → balanced whitespace); flex-shrink:0 lets it exceed the viewport and scroll when content is tall (landscape → no overlap). */ .dbd-mobile-menu__panel { display: flex; flex-direction: column; width: 100%; flex: 1 0 auto; } /* Top bar: wordmark + CLOSE */ .dbd-mobile-menu__bar { display: flex; align-items: center; justify-content: space-between; padding: var(--wp--preset--spacing--3) 0; } .dbd-mobile-menu__wordmark { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 18px; text-decoration: none; } .dbd-menu-close { cursor: pointer; margin: 0; /* Symmetric inline padding — George clocked the uneven left/right. */ padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3); min-height: 44px; background: transparent; border: 0; color: var(--wp--preset--color--paper); font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.6px; text-transform: uppercase; } /* Nav — uppercase rows with full-width hairlines */ .dbd-mobile-menu__nav { list-style: none; margin: 0; padding: var(--wp--preset--spacing--2) 0 0; } .dbd-mobile-menu__nav li { padding: 0 var(--wp--preset--spacing--4); } .dbd-mobile-menu__nav a { display: block; padding: var(--wp--preset--spacing--3) 0; border-bottom: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); font-family: var(--wp--preset--font-family--mono); font-weight: 400; font-size: 19px; line-height: 1.5; text-transform: uppercase; text-decoration: none; } /* Contact block — pinned to the bottom of the visible menu (phone and below). margin-top:auto only consumes *free* space, so when the menu is taller than the viewport (landscape) it collapses to 0 and the menu scrolls instead of overlapping. */ .dbd-mobile-menu__contact { margin-top: auto; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); padding: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--4); } .dbd-mobile-menu__contact p { margin: 0; } .dbd-mobile-menu__phone { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 24px; } .dbd-mobile-menu__phone a { text-decoration: none; } .dbd-mobile-menu__contact p:not(.dbd-mobile-menu__phone) { font-family: var(--wp--preset--font-family--mono); font-weight: 400; font-size: var(--wp--preset--font-size--body); line-height: 1.65; } .dbd-mobile-menu__contact a { text-decoration: none; } .dbd-mobile-menu__contact a:hover, .dbd-mobile-menu__contact a:focus-visible { text-decoration: underline; } /* CTA button — full-width vermilion. Bottom padding respects the home-indicator safe area so the button never sits under the notch/gesture bar. */ .dbd-mobile-menu__cta { padding: var(--wp--preset--spacing--4) 0 max(var(--wp--preset--spacing--5), env(safe-area-inset-bottom)); } .dbd-mobile-menu__btn { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; padding: var(--wp--preset--spacing--4); background-color: var(--wp--preset--color--vermilion); color: var(--wp--preset--color--paper); border-radius: var(--wp--custom--radius--sm); font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 15px; letter-spacing: 0.6px; text-transform: uppercase; text-decoration: none; } .dbd-mobile-menu__btn:hover, .dbd-mobile-menu__btn:focus-visible { background-color: color-mix(in srgb, var(--wp--preset--color--vermilion) 88%, #000); } /* Short viewports (landscape phones): the bottom-pin auto-collapses and the menu scrolls, so nothing overlaps — just trim the vertical rhythm so there's less to scroll and the layout still breathes. */ @media (max-height: 600px) { .dbd-mobile-menu__nav a { padding-block: var(--wp--preset--spacing--2); font-size: 17px; } .dbd-mobile-menu__contact { padding-block: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2); } .dbd-mobile-menu__phone { font-size: 20px; } .dbd-mobile-menu__cta { padding-top: var(--wp--preset--spacing--3); } } /* Load-in animation (Figma 443:799 "text out" → 417:771 "text in"): overlay ground appears, then each block fades + lifts in, staggered. Gated behind no-preference so reduced-motion users get the content at once. */ @media (prefers-reduced-motion: no-preference) { .dbd-mobile-menu__panel > * { opacity: 0; transform: translateY(10px); transition: opacity 0.45s ease, transform 0.45s ease; } .dbd-mobile-menu.is-open .dbd-mobile-menu__panel > * { opacity: 1; transform: none; } .dbd-mobile-menu.is-open .dbd-mobile-menu__panel > *:nth-child(1) { transition-delay: 0.05s; } .dbd-mobile-menu.is-open .dbd-mobile-menu__panel > *:nth-child(2) { transition-delay: 0.12s; } .dbd-mobile-menu.is-open .dbd-mobile-menu__panel > *:nth-child(3) { transition-delay: 0.19s; } .dbd-mobile-menu.is-open .dbd-mobile-menu__panel > *:nth-child(4) { transition-delay: 0.26s; } } /* --------------------------------------------------------------------------- * Grain — fine print texture on saturated grounds (never on text) * ------------------------------------------------------------------------- */ .is-style-grain { position: relative; isolation: isolate; } .is-style-grain > * { position: relative; z-index: 1; } .is-style-grain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; /* Monochrome grain: black speckles, alpha driven by noise (multiply on light grounds). */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.9 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px 180px; /* Softened from 0.55 — at full strength the black speckle competed with body text on the light (yellow) About ground and hurt readability (V5). */ opacity: 0.32; mix-blend-mode: multiply; } /* Dark grounds get white grain via screen blend (dark speckles would be invisible). */ .is-style-grain.has-ink-background-color::after, .is-style-grain.has-cobalt-background-color::after, .is-style-grain.has-vermilion-background-color::after, .is-style-grain.has-olive-background-color::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); mix-blend-mode: screen; opacity: 0.2; } /* --------------------------------------------------------------------------- * Colour-field section — body lives on an inset paper card on dark grounds * ------------------------------------------------------------------------- */ .dbd-card { background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--6); } /* --------------------------------------------------------------------------- * Snow Trekkin' hero devices * ------------------------------------------------------------------------- */ .dbd-hero { overflow: clip; } .is-style-st-pop { font-family: var(--wp--preset--font-family--display-anton); font-weight: 400; color: var(--wp--preset--color--ink); text-transform: uppercase; line-height: 0.9; letter-spacing: 0.01em; text-shadow: 4px 5px 0 var(--wp--preset--color--cobalt); } .is-style-st-ramp { transform: rotate(var(--wp--custom--angle--headline)) skewX(-5deg); transform-origin: left bottom; } .is-style-st-eyebrow { display: inline-block; transform: rotate(var(--wp--custom--angle--eyebrow)); background: var(--wp--preset--color--field-yellow); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); padding: 4px 10px; font-family: var(--wp--preset--font-family--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wp--preset--color--vermilion); } /* Caption ribbon on photos */ .is-style-ribbon-tint { background: var(--wp--preset--color--ribbon-tint); color: var(--wp--preset--color--paper); } /* Builds strip / image placeholders (stand-ins for George's photography) */ .dbd-photo-ph { background: var(--wp--preset--color--surface-muted); color: var(--wp--preset--color--ink-muted); min-height: 220px; display: flex; align-items: center; justify-content: center; } /* --------------------------------------------------------------------------- * Builds hero — two-column dark editorial header (Figma 252:695) * ------------------------------------------------------------------------- */ .dbd-builds-hero__cols { gap: var(--wp--preset--spacing--4); } /* Text column fills the photo's height; the flexible space sits between the header (tag + title) and the body (tagline + intro + dots) so the column balances against the photo (Image #18). Columns stretch to equal height. */ .dbd-builds-hero__text { display: flex; flex-direction: column; justify-content: space-between; gap: var(--wp--preset--spacing--5); padding-left: var(--wp--preset--spacing--5); } .dbd-builds-head { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--4); } .dbd-builds-body { margin: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); } /* Left: tall portrait photo with the pink tag riding its bottom edge. Feedback round 2026-07-09: "SINCE 2023" removed (fewer elements), tag moved over the bottom of the photo and tilted a bit more. */ .dbd-builds-since { position: relative; } /* Belt-and-braces: the vertical label was removed from the patterns, but page content saved from the old pattern may still carry it — hide it everywhere. */ .dbd-vertical-label { display: none; } .dbd-builds-since .dbd-builds-tag { position: relative; z-index: 1; margin-top: calc(-1 * var(--wp--preset--spacing--5)); margin-left: var(--wp--preset--spacing--3); transform: rotate(-6deg); } .dbd-builds-photo { margin: 0; width: 100%; max-width: 362px; } .dbd-builds-photo img { display: block; width: 100%; height: auto; aspect-ratio: 362 / 484; object-fit: cover; } /* Right: tag, title, italic tagline, body, dot row */ .dbd-builds-tag { width: fit-content; max-width: 100%; align-self: flex-start; margin: 0; transform: rotate(var(--wp--custom--angle--skew-sm)); /* -3deg */ transform-origin: left center; background-color: var(--wp--preset--color--accent-pink); color: var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3); font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--mono-label); letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 4px 4px 0 0 #000; /* Figma: hard black drop shadow (an effect, not a palette fill) */ } .dbd-builds-title { margin: 0; font-family: var(--wp--preset--font-family--display-anton); font-weight: 400; font-size: clamp(64px, 13vw, 96px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; color: var(--wp--preset--color--paper); } .dbd-builds-tagline { margin: 0; font-family: var(--wp--preset--font-family--mono); font-style: italic; font-size: clamp(20px, 4.5vw, 26px); line-height: 1.25; color: var(--wp--preset--color--accent-pink); } .dbd-builds-intro { margin: 0; max-width: 44ch; line-height: 1.65; } .dbd-builds-dots { display: flex; gap: var(--wp--preset--spacing--2); } .dbd-builds-dots span { display: block; width: 10px; height: 10px; background-color: var(--wp--preset--color--accent-pink); } .dbd-builds-dots span:nth-child(even) { background-color: var(--wp--preset--color--zine-blue); } @media (max-width: 781px) { .dbd-builds-photo { max-width: 300px; } .dbd-builds-hero__text { padding-left: 0; } } /* --------------------------------------------------------------------------- * About page — "01 / About the shop" (Figma 252:608) * ------------------------------------------------------------------------- */ /* Content uses the standard centred 1100 content column — aligns with every other section and the footer (no bespoke left-jammed width). */ .dbd-about-head .dbd-index { font-weight: 700; color: var(--wp--preset--color--ink); } .dbd-about-headrow { width: 100%; } .dbd-about-title { margin: 0; letter-spacing: -0.01em; } /* "SINCE 2023 / DALRY, EDINBURGH" stamp — box border dropped (tester: "any reason for this element to be so blocky?"); a slight tilt keeps the stamp feel without the heavy frame. */ .dbd-about-badge { flex-shrink: 0; border: 0; padding: var(--wp--preset--spacing--1) 0; transform: rotate(-2deg); } .dbd-about-badge__since { margin: 0; font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--ink); } .dbd-about-badge__place { margin: 0; font-family: var(--wp--preset--font-family--mono); font-weight: 400; font-size: var(--wp--preset--font-size--mono-label); line-height: 1.5; text-transform: uppercase; color: var(--wp--preset--color--ink); } .dbd-about-body { margin: 0; max-width: var(--wp--custom--measure--prose); } /* Two-up photo grid (equal columns, wrap below ~440px) */ .dbd-about-photo { flex: 1 1 200px; margin: 0; } .dbd-about-photo img { display: block; width: 100%; height: 240px; object-fit: cover; } @media (max-width: 781px) { .dbd-about-photo img { height: 200px; } } /* --------------------------------------------------------------------------- * Find us — two-column contact panel (Figma 252:624) * ------------------------------------------------------------------------- */ /* Stacked spec rows: label (ink-muted) above value (ink), hairline dividers. */ .dbd-findus-specs { border-top: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); } .dbd-findus-row { padding-block: var(--wp--preset--spacing--2); border-bottom: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); } .dbd-findus-label { margin: 0; font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--mono-label); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--wp--preset--color--ink-muted); } .dbd-findus-value { margin: 0; font-family: var(--wp--preset--font-family--mono); font-weight: 400; font-size: var(--wp--preset--font-size--body-s); line-height: 1.6; color: var(--wp--preset--color--ink); } .dbd-findus-value a { color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-findus-value a:hover, .dbd-findus-value a:focus-visible { text-decoration: underline; } .dbd-findus-caption { margin: 0; font-family: var(--wp--preset--font-family--mono); line-height: 1.65; color: var(--wp--preset--color--ink-muted); } /* Secondary "Open in Google Maps" — outlined, fills ink on hover/focus. */ .dbd-maps-btn .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--ink); border: 2px solid var(--wp--preset--color--ink); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); } .dbd-maps-btn .wp-block-button__link:hover, .dbd-maps-btn .wp-block-button__link:focus-visible { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); } /* Right-column photo */ .dbd-findus-photo { margin: 0; width: 100%; max-width: 520px; } .dbd-findus-photo img { display: block; width: 100%; height: 320px; object-fit: cover; } @media (max-width: 781px) { .dbd-findus-photo img { height: 240px; } } /* Flatten the diagonals on mobile (responsive grammar) */ @media (max-width: 781px) { .is-style-st-ramp, .is-style-st-eyebrow { transform: none; } .is-style-st-pop { text-shadow: 3px 3px 0 var(--wp--preset--color--cobalt); } } /* --------------------------------------------------------------------------- * Home page * ------------------------------------------------------------------------- */ .dbd-hero-photo { position: relative; } @media (max-width: 781px) { .dbd-hero-photo { min-height: 68svh !important; } } .dbd-hero-text .has-lead-font-size { max-width: var(--wp--custom--measure--prose); } /* Grid (not CSS columns) so each row's two items share a top edge — the rule lines above paired items line up even when one wraps to two lines (V8/V20). */ .dbd-services { list-style: none; margin: var(--wp--preset--spacing--3) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--wp--preset--spacing--6); } .dbd-services li { padding: var(--wp--preset--spacing--3) 0; border-top: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); /* Sentence case: the caps eyebrow ("01 / …") is now the only all-caps element in the section, so the label/list hierarchy reads clearly (tester: the eyebrow "blends a bit much with the sub-headings"). */ text-transform: none; letter-spacing: 0.02em; } @media (max-width: 560px) { .dbd-services { grid-template-columns: 1fr; } } .dbd-rating { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 56px; line-height: 1; margin: 0; } .dbd-rating-label { font-weight: 700; margin: 0; } .dbd-quote-card { border-radius: var(--wp--custom--radius--md); } .dbd-quote-by { margin: 0; font-weight: 700; } @media (max-width: 781px) { .dbd-builds-strip { flex-wrap: wrap !important; } .dbd-builds-strip > .wp-block-column { flex-basis: calc(50% - var(--wp--preset--spacing--3)) !important; } } /* --------------------------------------------------------------------------- * Angled section header + italic accent (jpmag / Builds personality) * ------------------------------------------------------------------------- */ .is-style-jp-angled { display: inline-block; transform: skewX(var(--wp--custom--angle--banner)); transform-origin: left bottom; } .dbd-accent-italic { font-family: var(--wp--preset--font-family--accent-italic); font-style: italic; } @media (max-width: 781px) { .is-style-jp-angled { transform: none; } } /* --------------------------------------------------------------------------- * Enquiry form — native [dbd_enquiry_form] handler (Figma 252:532). No plugin. * ------------------------------------------------------------------------- */ .dbd-form { max-width: var(--wp--custom--measure--prose); } .dbd-form .dbd-field { margin: 0 0 var(--wp--preset--spacing--5); } .dbd-form label { display: block; font-family: var(--wp--preset--font-family--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--mono-label); margin-bottom: var(--wp--preset--spacing--2); } .dbd-form .dbd-hint { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--wp--preset--color--ink-muted); margin-top: 2px; } .dbd-form input, .dbd-form textarea { width: 100%; box-sizing: border-box; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--body); color: var(--wp--preset--color--ink); background: var(--wp--preset--color--surface); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--3); } .dbd-form input:focus-visible, .dbd-form textarea:focus-visible { outline: 3px solid var(--wp--preset--color--cobalt); outline-offset: 2px; } .dbd-form .dbd-required { color: var(--wp--preset--color--vermilion); } .dbd-submit { font-family: var(--wp--preset--font-family--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border: none; border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); min-height: 44px; cursor: pointer; } /* Enquiry form card + states — Figma 252:532 "Tell me about your bike". */ .dbd-enquiry { max-width: 680px; } .dbd-enquiry .dbd-form { max-width: none; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--4); background: var(--wp--preset--color--surface); border: 2px solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--5); } .dbd-enquiry__title { margin: 0; font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink); } .dbd-enquiry .dbd-field { margin: 0; display: flex; flex-direction: column; gap: 4px; } .dbd-enquiry .dbd-field label { font-weight: 700; margin-bottom: 0; } .dbd-enquiry .dbd-hint { margin: 0; } .dbd-enquiry .dbd-optional { color: var(--wp--preset--color--ink-muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .dbd-enquiry input, .dbd-enquiry textarea { border: 2px solid var(--wp--preset--color--ink); min-height: 48px; } .dbd-enquiry textarea { min-height: 120px; resize: vertical; } .dbd-enquiry .dbd-submit { align-self: flex-start; font-weight: 700; } /* honeypot — visually hidden, off the tab order */ .dbd-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* validation states */ .dbd-field--error input, .dbd-field--error textarea { border-color: var(--wp--preset--color--jp-red); } .dbd-field__error { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--body-s); color: var(--wp--preset--color--vermilion); } .dbd-enquiry__note { border: 2px solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--4); margin-bottom: var(--wp--preset--spacing--4); } .dbd-enquiry__note p { font-family: var(--wp--preset--font-family--mono); margin: 0 0 var(--wp--preset--spacing--2); } .dbd-enquiry__note p:last-child { margin-bottom: 0; } .dbd-enquiry__note .dbd-enquiry__title { margin-bottom: var(--wp--preset--spacing--2); } .dbd-enquiry__errors { border-color: var(--wp--preset--color--jp-red); } .dbd-enquiry__errors ul { margin: 0; padding-left: 1.2em; font-family: var(--wp--preset--font-family--mono); } .dbd-enquiry__errors a { color: var(--wp--preset--color--vermilion); } .dbd-enquiry__muted { color: var(--wp--preset--color--ink-muted); } /* --------------------------------------------------------------------------- * Shop — category nav + product grid (clean spec-sheet, no colour fields) * ------------------------------------------------------------------------- */ /* Category nav — pill chips (active=ink, default=paper+border, sale=vermilion+hard shadow). */ .dbd-cat-nav { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); list-style: none; margin: 0; padding: 0; } .dbd-cat-nav a { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--mono-label); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--wp--preset--color--ink); text-decoration: none; padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3); background: var(--wp--preset--color--paper); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--sm); } .dbd-cat-nav a:hover, .dbd-cat-nav a:focus-visible { border-color: var(--wp--preset--color--ink); } .dbd-cat-nav .dbd-cat-active { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--ink); } /* Unselected "Sale" chip — outline only (vermilion text + border on paper), NOT a filled/shadowed button, so it no longer reads as already-selected. It fills in only when it IS the active view (below), matching every other chip. */ .dbd-cat-nav .dbd-cat-sale { color: var(--wp--preset--color--vermilion); border-color: var(--wp--preset--color--vermilion); } .dbd-cat-nav .dbd-cat-sale:hover, .dbd-cat-nav .dbd-cat-sale:focus-visible { border-color: var(--wp--preset--color--vermilion); background: color-mix(in srgb, var(--wp--preset--color--vermilion) 12%, var(--wp--preset--color--paper)); } /* Selected "Sale" view — fills vermilion so the active state reads clearly. */ .dbd-cat-nav .dbd-cat-sale.dbd-cat-active { background: var(--wp--preset--color--vermilion); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--vermilion); box-shadow: none; } /* Shop toolbar: category chips on the left, sort control on the right. The shop Query Loop inherits the main query, so the chips (category / on-sale) and the sort (?orderby) drive what it shows — kept in sync with WooCommerce. */ .dbd-shop-toolbar { gap: var(--wp--preset--spacing--4); } .dbd-shop-sort { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--2); margin: 0; } .dbd-shop-sort__label { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--mono-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--ink-muted); } .dbd-shop-sort__select { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--mono-label); letter-spacing: 0.04em; text-transform: uppercase; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--paper); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3); min-height: 40px; cursor: pointer; } .dbd-shop-sort__select:hover, .dbd-shop-sort__select:focus-visible { border-color: var(--wp--preset--color--ink); outline: none; } .dbd-shop-sort__go { font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; margin-left: var(--wp--preset--spacing--2); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--3); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); cursor: pointer; } /* Product cards — bordered white spec cards: image 180, mono-bold title 15, price 20 (Figma 252:446). */ .dbd-product-grid .wp-block-post { background: var(--wp--preset--color--surface); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); padding: var(--wp--preset--spacing--4); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); } .dbd-product-grid .wp-block-post-featured-image { margin: 0; background: var(--wp--preset--color--surface-muted); min-height: 180px; } .dbd-product-grid .wp-block-post-featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; } .dbd-product-grid .wp-block-post-title { margin: 0; font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 15px; line-height: 1.3; } .dbd-product-grid .wp-block-post-title a { color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-product-grid .wp-block-post-title a:hover { text-decoration: underline; } .dbd-product-grid .woocommerce-Price-amount, .dbd-product-grid .wc-block-components-product-price, .dbd-product-grid .price { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 20px; color: var(--wp--preset--color--ink); } .dbd-product-grid del { position: relative; display: inline-block; color: var(--wp--preset--color--ink-muted); font-weight: 400; text-decoration: none; } .dbd-product-grid del::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: currentColor; pointer-events: none; } /* --------------------------------------------------------------------------- * Product (PDP) — clean spec-sheet surface, big mono price read-out * ------------------------------------------------------------------------- */ .dbd-pdp { padding-top: var(--wp--preset--spacing--7); padding-bottom: var(--wp--preset--spacing--9); } .dbd-pdp .wp-block-post-title { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h1); line-height: 1.1; letter-spacing: -0.01em; margin: 0; } .dbd-pdp-media { margin: 0; } .dbd-pdp-media .wp-block-woocommerce-product-image-gallery, .dbd-pdp-media img { width: 100%; } .dbd-pdp-price { margin: 0; } .dbd-pdp-price .woocommerce-Price-amount, .dbd-pdp-price ins, .dbd-pdp-price .price { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 28px; color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-pdp-desc { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--body); line-height: 1.65; color: var(--wp--preset--color--ink); } /* Per-product spec sheet (Vendor / Fits / Includes / In stock …), output by the [dbd_product_specs] shortcode from WooCommerce product attributes — the Figma's hairline label/value table. George edits the values in Product data → Attributes. */ .dbd-pdp-specs { margin: 0; border-top: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); } .dbd-pdp-spec-row { display: flex; gap: var(--wp--preset--spacing--4); padding: var(--wp--preset--spacing--2) 0; border-bottom: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); } .dbd-pdp-spec-row dt { flex: 0 0 38%; margin: 0; font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink-muted); line-height: 1.5; } .dbd-pdp-spec-row dd { flex: 1; margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--body-s); color: var(--wp--preset--color--ink); line-height: 1.5; } .dbd-pdp-price del { position: relative; display: inline-block; font-family: var(--wp--preset--font-family--mono); color: var(--wp--preset--color--ink-muted); font-weight: 400; margin-right: var(--wp--preset--spacing--3); /* Draw the strike ourselves: IBM Plex Mono's default line-through sits high. A centred pseudo-element line is positionable and a touch thicker. */ text-decoration: none; } .dbd-pdp-price del::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: currentColor; pointer-events: none; } .dbd-delivery { color: var(--wp--preset--color--ink-muted); margin-top: var(--wp--preset--spacing--4); } .woocommerce-breadcrumb { font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink-muted); margin: 0; } .woocommerce-breadcrumb a { color: var(--wp--preset--color--ink-muted); text-decoration: none; } /* WooCommerce add-to-cart + checkout buttons → the DBD ink button */ .dbd-pdp .single_add_to_cart_button, .wc-block-components-button, .woocommerce a.button, .woocommerce button.button { font-family: var(--wp--preset--font-family--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border: none; border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6); min-height: 44px; cursor: pointer; } .dbd-pdp .quantity input { font-family: var(--wp--preset--font-family--mono); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--2); } /* --------------------------------------------------------------------------- * Hero v2 — full-bleed photo (sticker + ribbon) + big pop headline * ------------------------------------------------------------------------- */ .dbd-hero-photo .wp-block-cover__inner-container { position: static; width: 100%; max-width: 100%; padding: 0; } /* Sticker + caption overlay the full-bleed photo but align to the 1100 content column (same edge as the header/headline): the column offset = max(gutter, (viewport - contentSize) / 2). The ribbon's tint band stays full-bleed (left/right:0) while its text is inset to the column via padding. */ .dbd-sticker { position: absolute; top: var(--wp--preset--spacing--6); right: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--content-size, 1100px)) / 2)); transform: rotate(-6deg); margin: 0; padding: 6px 12px; background: var(--wp--preset--color--accent-pink); color: var(--wp--preset--color--ink); font-weight: 500; } .dbd-hero-ribbon { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding-block: var(--wp--preset--spacing--2); padding-inline: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--content-size, 1100px)) / 2)); background: var(--wp--preset--color--ribbon-tint); color: var(--wp--preset--color--paper); } /* Bands stack flush — no gap under the nav, none between stacked sections, none before the footer. Each band carries its own top/bottom padding, so WP's 24px block-gap (margin-block-start on every sibling after the first) is removed here; left in, it leaks the page background as a white sliver between coloured bands and above the footer. Scoped to top-level page sections so prose spacing inside product descriptions (post-content text) is untouched. */ .wp-site-blocks > main { margin-block-start: 0; } .wp-site-blocks > footer { margin-block-start: 0; } .wp-site-blocks > main > section, .wp-site-blocks > main > .wp-block-cover, .wp-block-post-content > section { margin-block-start: 0; } .dbd-hero-photo { margin-block: 0 !important; } .dbd-hero { margin-block-start: 0 !important; } .dbd-hero-headline { font-size: clamp(40px, 7vw, 82px); line-height: 1.0; margin: 0; } .dbd-hero-tag { margin: 0 0 var(--wp--preset--spacing--2); color: var(--wp--preset--color--vermilion); } .dbd-retro { display: inline-block; margin: 0; font-family: var(--wp--preset--font-family--display); text-transform: uppercase; line-height: 1.05; box-shadow: inset 0 -0.18em 0 var(--wp--preset--color--accent-turquoise); } .dbd-header-phone { margin: 0; } .dbd-header-phone a { color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-header-phone a:hover { text-decoration: underline; } /* --------------------------------------------------------------------------- * Enquiry CTA (cobalt ground, pop headline) * ------------------------------------------------------------------------- */ .dbd-cta-heading { font-family: var(--wp--preset--font-family--display-anton); font-weight: 400; font-size: clamp(34px, 6vw, 56px); line-height: 1.05; text-transform: uppercase; color: var(--wp--preset--color--paper); } /* --------------------------------------------------------------------------- * Footer — three columns (address / links / contact), left-aligned * ------------------------------------------------------------------------- */ .dbd-footer-name { margin: 0 0 var(--wp--preset--spacing--4); color: var(--wp--preset--color--paper); } .dbd-footer-muted { color: color-mix(in srgb, var(--wp--preset--color--paper) 72%, transparent); } .dbd-footer-links { list-style: none; margin: 0; padding: 0; } .dbd-footer-links li { margin: 0 0 var(--wp--preset--spacing--2); } .dbd-footer p a, .dbd-footer-links a { color: var(--wp--preset--color--paper); text-decoration: none; } .dbd-footer p a:hover, .dbd-footer-links a:hover { text-decoration: underline; } /* Legal/policy row — horizontal, muted, divided off below the columns. */ .dbd-footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--4); margin: var(--wp--preset--spacing--6) 0 0; padding: var(--wp--preset--spacing--5) 0 0; border-top: var(--wp--custom--rule--weight) solid color-mix(in srgb, var(--wp--preset--color--paper) 22%, transparent); } .dbd-footer-legal li { margin: 0; } .dbd-footer-legal a { color: color-mix(in srgb, var(--wp--preset--color--paper) 78%, transparent); text-decoration: none; } .dbd-footer-legal a:hover { color: var(--wp--preset--color--paper); text-decoration: underline; } /* --------------------------------------------------------------------------- * Responsive spacing — the token scale tightens on mobile, matching the Figma * Desktop/Mobile modes (DBD tokens collection). Everything uses these vars, so * binding them here makes the whole site's rhythm responsive in one place. * ------------------------------------------------------------------------- */ @media (max-width: 781px) { :root { --wp--preset--spacing--5: 20px; --wp--preset--spacing--6: 24px; --wp--preset--spacing--7: 28px; --wp--preset--spacing--8: 40px; --wp--preset--spacing--9: 48px; --wp--custom--gutter: 20px; /* 24px, not the old 56px: 56 was reserving room for the logged-in admin bar, which real visitors never see — it just stole space from the menu. */ --wp--custom--safe-top: 24px; } } /* === Persona-fix additions (2026-06-24): IG links, shop-card descriptor + */ /* add-to-basket, home featured-products strip === */ /* Shop card: one-line product descriptor (short description / excerpt) */ .dbd-product-grid .dbd-card-desc { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--body-s); line-height: 1.45; color: var(--wp--preset--color--ink-muted); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Shop card: add-to-basket button pinned to the card foot, full width */ .dbd-product-grid .wp-block-button, .dbd-product-grid .wc-block-components-product-button { margin-top: auto; width: 100%; text-align: center; } .dbd-product-grid .wp-block-button__link, .dbd-product-grid .wc-block-components-product-button__button, .dbd-product-grid a.add_to_cart_button, .dbd-product-grid a.button { display: flex; justify-content: center; width: 100% !important; text-align: center; font-family: var(--wp--preset--font-family--mono); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--mono-label); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border: none; border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); min-height: 44px; cursor: pointer; } .dbd-product-grid a.added_to_cart { display: block; text-align: center; margin-top: var(--wp--preset--spacing--2); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--body-s); color: var(--wp--preset--color--ink); text-decoration: underline; } /* Instagram social icon — header (inline, logos-only) + footer */ .dbd-social { margin: 0; } .dbd-social .wp-block-social-link { margin: 0; padding: 0; } .dbd-social-footer { margin-top: var(--wp--preset--spacing--4); } /* Find-us: embedded Google map */ .dbd-findus-map { border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); border-radius: var(--wp--custom--radius--sm); overflow: hidden; line-height: 0; } .dbd-findus-map iframe { width: 100%; border: 0; display: block; } /* === Brand logo (painted wordmark) — replaces the text wordmark, recoloured per background === */ .dbd-logo { margin: 0; line-height: 0; } .dbd-logo a { display: inline-block; line-height: 0; } .dbd-logo img { display: block; width: auto; height: auto; } /* Header: ink logo on the paper bar */ .dbd-logo--header img { height: 46px; } /* Footer: yellow logo on the ink footer */ .dbd-logo--footer { margin: 0 0 var(--wp--preset--spacing--4); } .dbd-logo--footer img { width: 240px; max-width: 100%; } /* Mobile menu bar wordmark → logo */ .dbd-mobile-menu__wordmark img { display: block; height: 30px; width: auto; } @media (max-width: 781px) { .dbd-logo--header img { height: 36px; } } /* === Blog: single post === */ .dbd-post > * { max-width: var(--wp--custom--measure--prose, 68ch); margin-left: auto; margin-right: auto; } .dbd-post .dbd-index { color: var(--wp--preset--color--ink-muted); margin: 0; } .dbd-post-title { font-family: var(--wp--preset--font-family--display); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; font-size: clamp(2rem, 5vw, 3.25rem); margin: 0; } .dbd-post-hero { margin: 0; } .dbd-post-hero img { display: block; width: 100%; height: auto; border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); } /* Verbatim Shopify article body — readable prose inside the brutalist frame */ .dbd-post-content { font-size: var(--wp--preset--font-size--body); line-height: 1.7; } .dbd-post-content > * { max-width: 100%; } .dbd-post-content p { margin: 0 0 var(--wp--preset--spacing--4); } .dbd-post-content a { color: var(--wp--preset--color--ink); text-underline-offset: 2px; } .dbd-post-content img { display: block; width: 100%; height: auto; margin: var(--wp--preset--spacing--5) 0; border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); } .dbd-post-content h2 { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h3); line-height: 1.1; margin: var(--wp--preset--spacing--6) 0 var(--wp--preset--spacing--3); } .dbd-post-content h3 { font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: var(--wp--preset--font-size--body); margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--2); } .dbd-post-content ul, .dbd-post-content ol { margin: 0 0 var(--wp--preset--spacing--4); padding-left: 1.4em; } .dbd-post-content li { margin-bottom: var(--wp--preset--spacing--1); } .dbd-post-content iframe, .dbd-post-content video { max-width: 100%; } .dbd-post-content blockquote { border-left: 3px solid var(--wp--preset--color--ink); margin: var(--wp--preset--spacing--5) 0; padding-left: var(--wp--preset--spacing--4); font-style: italic; } .dbd-post-back a { color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-post-back a:hover { text-decoration: underline; } /* === Blog: index grid === */ .dbd-blog-grid .wp-block-post { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); } .dbd-blog-card__img { margin: 0 0 var(--wp--preset--spacing--1); } .dbd-blog-card__img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: var(--wp--preset--color--surface-muted); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); } .dbd-blog-grid .dbd-index { color: var(--wp--preset--color--ink-muted); margin: 0; } .dbd-blog-card__title { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: var(--wp--preset--font-size--body); line-height: 1.25; margin: 0; } .dbd-blog-card__title a { color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-blog-card__title a:hover { text-decoration: underline; } .dbd-blog-grid .wp-block-post-excerpt { margin: 0; } .dbd-blog-grid .wp-block-post-excerpt p { font-size: var(--wp--preset--font-size--body-s); color: var(--wp--preset--color--ink-muted); line-height: 1.5; margin: 0; } .dbd-blog-grid .wp-block-post-excerpt__more-text { display: none; } /* Pagination */ .dbd-pagination { margin-top: var(--wp--preset--spacing--7); padding-top: var(--wp--preset--spacing--4); border-top: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--mono-label); } .dbd-pagination a, .dbd-pagination .wp-block-query-pagination-numbers { color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-pagination a:hover { text-decoration: underline; } .dbd-pagination .current { font-weight: 700; } /* === Bike-build checklist + resources (parts-list page) === */ /* "Take it with you" bar */ .dbd-buildbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--3); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--surface); } .dbd-buildbar__progress { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink-muted); margin: 0; margin-right: auto; } .dbd-copybtn { font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--mono-label); background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border: none; border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4); min-height: 44px; cursor: pointer; } .dbd-copybtn.is-copied { background: var(--wp--preset--color--cobalt); } .dbd-pdfbtn { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink); text-decoration: none; border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4); min-height: 44px; display: inline-flex; align-items: center; } .dbd-pdfbtn:hover { background: var(--wp--preset--color--surface-muted); } .dbd-resetbtn { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--mono-label); background: none; border: 0; color: var(--wp--preset--color--ink-muted); text-decoration: underline; cursor: pointer; padding: var(--wp--preset--spacing--2); } /* F15 — "Ask George about these parts": carries the ticked checklist into the servicing enquiry. Sits in the build bar; filled cobalt so it reads as the primary outward action, distinct from the ink "copy" button beside it. */ .dbd-enquirebtn { background: var(--wp--preset--color--cobalt); color: var(--wp--preset--color--paper); border-color: var(--wp--preset--color--cobalt); text-decoration: none; } .dbd-enquirebtn:hover { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); } /* Checklist */ .dbd-checklist { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--6); } .dbd-checklist__group h3 { font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--mono-label); margin: 0 0 var(--wp--preset--spacing--2); padding-bottom: var(--wp--preset--spacing--1); border-bottom: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); } .dbd-checklist ul { list-style: none; margin: 0; padding: 0; } .dbd-checklist li { border-bottom: 1px dashed var(--wp--preset--color--border-subtle); } .dbd-checklist label { display: flex; gap: var(--wp--preset--spacing--3); align-items: baseline; padding: var(--wp--preset--spacing--2) 0; cursor: pointer; } .dbd-checklist input[type="checkbox"] { inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--wp--preset--color--ink); flex: 0 0 auto; position: relative; top: 3px; } .dbd-checklist__item { font-weight: 500; } .dbd-checklist__note { display: block; color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--body-s); line-height: 1.4; } /* Checked = picked, not crossed off. The strikethrough read as "remove this part" (Lead-UX feedback); a highlighter swipe signals a positive pick. */ .dbd-checklist input:checked + .dbd-checklist__text .dbd-checklist__item { text-decoration: none; color: var(--wp--preset--color--ink); font-weight: 700; background: linear-gradient(transparent 55%, color-mix(in srgb, var(--wp--preset--color--accent-pink) 45%, transparent) 55%); } /* Resources, in build-flow order */ .dbd-resources { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--5); } .dbd-resgroup__label { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink-muted); margin: 0 0 var(--wp--preset--spacing--3); } .dbd-reslist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--3); } .dbd-res { border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); border-radius: var(--wp--custom--radius--sm); padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--4); background: var(--wp--preset--color--surface); } .dbd-res a { font-family: var(--wp--preset--font-family--mono); font-weight: 700; color: var(--wp--preset--color--ink); text-decoration: none; } .dbd-res a:hover { text-decoration: underline; } .dbd-res a::after { content: " ↗"; color: var(--wp--preset--color--ink-muted); } .dbd-res__desc { margin: var(--wp--preset--spacing--1) 0 0; color: var(--wp--preset--color--ink-muted); font-size: var(--wp--preset--font-size--body-s); line-height: 1.5; } @media (min-width: 600px) { .dbd-reslist { grid-template-columns: 1fr 1fr; } } /* Home: featured-products strip — styles the [products] shortcode loop */ .dbd-featured .woocommerce { margin: 0; } .dbd-featured ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--5); } .dbd-featured ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; } .dbd-featured ul.products::before, .dbd-featured ul.products::after { content: none; display: none; } .dbd-featured ul.products li.product { position: relative; width: auto !important; margin: 0 !important; float: none !important; background: var(--wp--preset--color--surface); border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--border-subtle); padding: var(--wp--preset--spacing--4); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--2); } .dbd-featured ul.products li.product a img { width: 100%; height: 160px; object-fit: cover; margin: 0; background: var(--wp--preset--color--surface-muted); } /* Anchor the "Sale!" badge to the card's image corner so it stops overlapping the section heading / shifting the grid (V13/V17). */ .dbd-featured ul.products li.product .onsale { position: absolute; top: var(--wp--preset--spacing--4); right: var(--wp--preset--spacing--4); left: auto; min-height: 0; min-width: 0; margin: 0; padding: 2px 10px; border-radius: 999px; font-family: var(--wp--preset--font-family--mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; line-height: 1.6; background: var(--wp--preset--color--vermilion); color: var(--wp--preset--color--paper); z-index: 2; } .dbd-featured ul.products li.product .woocommerce-loop-product__title { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--wp--preset--color--ink); padding: 0; margin: 0; } .dbd-featured ul.products li.product .price { font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 18px; color: var(--wp--preset--color--ink); } .dbd-featured ul.products li.product a.button { display: none; } /* teaser: click card to view */ @media (max-width: 781px) { .dbd-product-grid .wp-block-button__link, .dbd-product-grid a.add_to_cart_button, .dbd-product-grid a.button { min-height: 48px; } .dbd-featured ul.products { grid-template-columns: repeat(2, 1fr); } } /* === Header cart (F3) — always-visible basket icon === */ .dbd-header-actions { margin: 0; } .dbd-cart { margin: 0; line-height: 0; } .dbd-cart .wc-block-mini-cart__button { padding: 8px; color: var(--wp--preset--color--ink); min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: 0; } .dbd-cart .wc-block-mini-cart__amount { display: none; } /* icon-only, keeps the header tight */ .dbd-cart .wc-block-mini-cart__badge { background: var(--wp--preset--color--vermilion); color: var(--wp--preset--color--paper); font-family: var(--wp--preset--font-family--mono); font-weight: 700; border: 0; } .dbd-cart svg, .dbd-cart img { width: 24px; height: 24px; } /* === Home "Lately" mini gallery (F1) — square thumbs, replacing the IG feed === */ .dbd-blog-grid--mini .dbd-blog-card__img img { aspect-ratio: 1 / 1; } .dbd-blog-grid--mini .dbd-blog-card__title { font-size: var(--wp--preset--font-size--body-s); } .dbd-blog-grid--mini .dbd-blog-grid__wrap { gap: var(--wp--preset--spacing--2); } /* === Blog / builds filter chips === */ /* margin omitted on purpose: the section's block-gap sets the top gap so the chips sit on the same vertical rhythm as the grid below (2026-07-02 fix). */ .dbd-blog-filters { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--2); padding: 0; } .dbd-blog-filters a { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink); text-decoration: none; padding: 8px 16px; min-height: 40px; display: inline-flex; align-items: center; border: var(--wp--custom--rule--weight) solid var(--wp--preset--color--ink); border-radius: 999px; background: var(--wp--preset--color--surface); } .dbd-blog-filters a:hover { background: var(--wp--preset--color--surface-muted); } .dbd-blog-filters a.is-active, .dbd-blog-filters a[aria-current="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); } .dbd-blog-filters a:focus-visible { outline: 2px solid var(--wp--preset--color--cobalt); outline-offset: 2px; } /* Single-post tags (≤3, links to the tag archives) */ .dbd-post-tags { font-family: var(--wp--preset--font-family--mono); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--wp--preset--font-size--mono-label); color: var(--wp--preset--color--ink-muted); } .dbd-post-tags a { color: var(--wp--preset--color--ink); text-underline-offset: 2px; } /* === Centred (Dosnoventa-style) header: logo left · nav centred · utilities right === */ .dbd-header > .dbd-logo--header { flex: 1 1 0; } .dbd-header > .dbd-nav-desktop { flex: 0 1 auto; } .dbd-header > .dbd-header-actions { flex: 1 1 0; justify-content: flex-end; } .dbd-nav .wp-block-navigation__container { gap: var(--wp--preset--spacing--6); } @media (max-width: 781px) { /* keep the mobile bar to logo + cart + Menu; phone/IG live in the overlay menu */ .dbd-header-actions .dbd-header-phone, .dbd-header-actions .dbd-social { display: none; } } /* =========================================================================== * Hero v3 — the tag is pulled ONTO the photo (yellow band removed), with an * animated reveal. Inspiration: Wolverine ("expand from centre + line rise") * and a 2026-clean, 90s-flavoured entrance. Pure CSS — no library, no JS, no * percentage loader. Real

text stays selectable for a11y + SEO. All * motion is gated behind prefers-reduced-motion: no-preference. * ========================================================================= */ /* Layout — overlay pinned bottom-left, inside the 1100 content column. The inner container must be positioned + above the scrim (an earlier rule sets it position:static, which would drop the text behind the dim layer). */ .dbd-hero-photo.wp-block-cover { flex-direction: column; justify-content: flex-end; align-items: stretch; } .dbd-hero-photo .wp-block-cover__inner-container { position: relative; z-index: 2; width: 100%; max-width: 100%; padding: 0; } .dbd-hero__overlay { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--content-size, 1100px); margin-inline: auto; padding-inline: var(--wp--custom--gutter); padding-block-end: clamp(28px, 6vh, 64px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--4); } /* The overlay is authored as raw HTML (wp:html), so WP's global border-box reset doesn't reach inside it — without this, a button's width:100% + padding + border overflows its column (the mobile button spill). */ .dbd-hero__overlay * { box-sizing: border-box; } /* Legibility scrim — recolour the cover's dim layer into a bottom-up gradient. Paper text lands on ~0.9-opacity ink at the baseline → far past WCAG AA. */ .dbd-hero-photo .dbd-hero__scrim { background: linear-gradient(to top, rgba(24, 24, 40, 0.92) 0%, rgba(24, 24, 40, 0.62) 26%, rgba(24, 24, 40, 0.18) 52%, rgba(24, 24, 40, 0) 76%) !important; opacity: 1 !important; z-index: 1; } /* Faint film grain over the photo (90s) — sits under the text. */ .dbd-hero-photo .dbd-hero__scrim::after { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px 180px; mix-blend-mode: screen; opacity: 0.10; pointer-events: none; } /* Tagline (was a tiny uppercase eyebrow) — now a readable sentence: sentence case, tighter tracking, a little larger, so the longer line stays legible. */ .dbd-hero__kicker { margin: 0; max-width: 34ch; font-family: var(--wp--preset--font-family--mono); font-weight: 500; font-size: clamp(15px, 1.9vw, 19px); line-height: 1.4; letter-spacing: 0.01em; color: var(--wp--preset--color--field-yellow); } /* Big tag — reuse the Anton "pop" face (is-style-st-pop), recoloured paper for the photo, with the cobalt offset (brand) + a soft dark halo (legibility). */ .dbd-hero__headline { margin: 0; color: var(--wp--preset--color--paper); font-size: clamp(46px, 9vw, 104px); line-height: 0.92; max-width: 16ch; } .dbd-hero__line { display: block; overflow: hidden; padding-block: 0.04em; } .dbd-hero__lineinner { display: block; text-shadow: 3px 4px 0 var(--wp--preset--color--cobalt), 0 2px 22px rgba(24, 24, 40, 0.5); } /* CTAs over the photo */ .dbd-hero__cta { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--3); margin-top: var(--wp--preset--spacing--2); } .dbd-hero__btn { display: inline-block; font-family: var(--wp--preset--font-family--mono); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; padding: 14px 22px; border: 2px solid transparent; border-radius: var(--wp--custom--radius--sm); transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease; } /* Shop-era pink + teal (the accents people liked), filled with ink text for AA contrast (pink ~6.4:1, teal ~11:1 on ink). --ghost is now the filled teal. */ .dbd-hero__btn--primary { background: var(--wp--preset--color--accent-pink); color: var(--wp--preset--color--ink); } .dbd-hero__btn--primary:hover { background: color-mix(in srgb, var(--wp--preset--color--accent-pink) 88%, #000); } .dbd-hero__btn--ghost { background: var(--wp--preset--color--accent-turquoise); color: var(--wp--preset--color--ink); border-color: transparent; } .dbd-hero__btn--ghost:hover { background: color-mix(in srgb, var(--wp--preset--color--accent-turquoise) 88%, #000); } .dbd-hero__btn:hover { transform: translateY(-2px); } .dbd-hero__btn:focus-visible { outline: 3px solid var(--wp--preset--color--anodised-yellow); outline-offset: 2px; } @media (max-width: 781px) { .dbd-hero-photo { min-height: 84svh !important; } /* The cover already carries the gutter (root padding); drop the overlay's own inset on mobile so content is truly full-width and never overflows. */ .dbd-hero__overlay { padding-inline: 0; } /* Smaller floor so the longest line ("Your local bike shop") never clips, down to ~320px phones; scales back up with the viewport. */ .dbd-hero__headline { max-width: none; font-size: clamp(31px, 8.8vw, 54px); } .dbd-hero__lineinner { text-shadow: 2px 3px 0 var(--wp--preset--color--cobalt), 0 2px 16px rgba(24, 24, 40, 0.55); } /* Stack the buttons full-width (column + stretch beats flex:1-1-auto, which could sit them side-by-side or spill past the edge). */ .dbd-hero__cta { width: 100%; flex-direction: column; align-items: stretch; } .dbd-hero__btn { width: 100%; text-align: center; } } /* Reveal — plays once on first paint. Photo opens from a soft rounded inset + a gentle scale settle; kicker/lines/CTAs rise; the headline lines carry a quick cobalt/vermilion chromatic split that resolves into the resting offset. Held at final state for reduced-motion users (whole block is skipped). */ @media (prefers-reduced-motion: no-preference) { .dbd-hero-photo { animation: dbd-hero-open 1s cubic-bezier(0.16, 0.84, 0.34, 1) both; } .dbd-hero-photo .wp-block-cover__image-background { animation: dbd-hero-settle 1.6s cubic-bezier(0.16, 0.84, 0.34, 1) both; } .dbd-hero__kicker { opacity: 0; transform: translateY(12px); animation: dbd-fade-up 0.7s ease 0.1s forwards; } .dbd-hero__lineinner { transform: translateY(112%); } .dbd-hero__line:nth-child(1) .dbd-hero__lineinner { animation: dbd-line-rise 0.9s cubic-bezier(0.16, 0.84, 0.34, 1) 0.24s both, dbd-split 0.62s ease 0.24s both; } .dbd-hero__line:nth-child(2) .dbd-hero__lineinner { animation: dbd-line-rise 0.9s cubic-bezier(0.16, 0.84, 0.34, 1) 0.38s both, dbd-split 0.62s ease 0.38s both; } .dbd-hero__cta { opacity: 0; transform: translateY(12px); animation: dbd-fade-up 0.7s ease 0.66s forwards; } } @keyframes dbd-hero-open { from { clip-path: inset(6% 9% 6% 9% round 18px); } to { clip-path: inset(0 0 0 0 round 0); } } @keyframes dbd-hero-settle { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes dbd-line-rise { from { transform: translateY(112%); } to { transform: translateY(0); } } @keyframes dbd-fade-up { to { opacity: 1; transform: translateY(0); } } @keyframes dbd-split { 0% { text-shadow: -8px 0 0 var(--wp--preset--color--vermilion), 8px 0 0 var(--wp--preset--color--cobalt); } 55% { text-shadow: -3px 0 0 var(--wp--preset--color--vermilion), 3px 0 0 var(--wp--preset--color--cobalt); } 100% { text-shadow: 3px 4px 0 var(--wp--preset--color--cobalt), 0 2px 22px rgba(24, 24, 40, 0.5); } } /* =========================================================================== * WCAG 2.2 AA remediation — 2026-07-02 site review. * Appended last so each fix wins by source order over the base rules above. * ========================================================================= */ /* A1 [CRITICAL] — visible focus on dark grounds. The base focus ring is cobalt (excellent on paper, 8.2:1) but invisible on cobalt bands (1:1) and weak on ink (2:1) — this hit the primary CTAs and the whole footer / mobile menu. Switch the ring to anodised-yellow wherever the ground is dark (5.1:1 on cobalt, ~10:1 on ink). Only the colour changes; width/offset inherit. */ .has-ink-background-color :focus-visible, .has-cobalt-background-color :focus-visible, .has-vermilion-background-color :focus-visible, .dbd-footer :focus-visible, .dbd-mobile-menu :focus-visible { outline-color: var(--wp--preset--color--anodised-yellow); } /* A2 — restore the focus ring on the shop sort