/* Reg Heaven - main stylesheet Ported from the signed-off Modern design (build-reference/designs/assets/css/design.css). Canvas chrome, Heritage theme and the .simulator frame removed; .simulator.sim-mobile rules re-expressed as @media (max-width:768px). carries class 'design' + data-dir='modern'. */ /* ============================================================ Reg Heaven – design system for Canvas design build e90382a3 Two directions, themed by [data-dir] on : • heritage → Spectral + Inter, yellow-led, light & editorial • modern → Space Grotesk + Inter, coral-led, dark & bold Loaded AFTER wireframe.css. Styles only .rh-* content classes plus a reset of the wireframe container. Canvas chrome (banner, toolbar, simulator, notes drawer) is untouched. ============================================================ */ :root { --rh-slate: #474c52; --rh-ink: #2f3338; --rh-yellow: #ffcc00; --rh-coral: #ff8c42; --rh-silver: #e1e9ea; --rh-white: #ffffff; --rh-muted: #6b7178; --rh-line: #dfe4e6; --rh-paper: #f4f6f7; /* theme hooks – overridden per direction below */ --rh-display: 'Inter', system-ui, sans-serif; --rh-body: 'Inter', system-ui, sans-serif; --rh-accent: var(--rh-coral); --rh-radius: 10px; --rh-radius-lg: 16px; --rh-h1-weight: 700; --rh-h1-spacing: -0.5px; --rh-eyebrow-spacing: 2px; } /* ---- the genuine UK number-plate typeface (Charles Wright) ---- */ @font-face { font-family: 'Charles Wright'; src: url('../fonts/charles-wright-bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } /* ---- container reset: strip the wireframe scaffolding ---- */ body.design .wireframe.wf { padding: 0; gap: 0; background: var(--rh-white); font-family: var(--rh-body); color: var(--rh-ink); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; } body.design .wireframe.wf * { box-sizing: border-box; } body.design .rh-wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; } /* ============================================================ TYPE ============================================================ */ .rh-eyebrow { display: inline-block; font-family: var(--rh-body); font-size: 12px; font-weight: 600; letter-spacing: var(--rh-eyebrow-spacing); text-transform: uppercase; color: var(--rh-accent); margin-bottom: 14px; } .rh-h1 { font-family: var(--rh-display); font-weight: var(--rh-h1-weight); font-size: clamp(40px, 5vw, 60px); line-height: 1.04; letter-spacing: var(--rh-h1-spacing); color: inherit; margin: 0 0 18px; } .rh-h2 { font-family: var(--rh-display); font-weight: var(--rh-h1-weight); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: var(--rh-h1-spacing); margin: 0 0 14px; } .rh-h3 { font-family: var(--rh-display); font-weight: 600; font-size: 20px; margin: 0 0 8px; line-height: 1.2; } .rh-lead { font-size: 18px; color: var(--rh-muted); margin: 0 0 26px; max-width: 56ch; } .rh-text { color: var(--rh-muted); margin: 0 0 14px; } .rh-center { text-align: center; } .rh-center .rh-lead { margin-left: auto; margin-right: auto; } /* ============================================================ BUTTONS ============================================================ */ .rh-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--rh-body); font-weight: 600; font-size: 15px; padding: 15px 28px; border-radius: var(--rh-radius); background: var(--rh-slate); color: #fff; border: 1.5px solid var(--rh-slate); cursor: default; text-decoration: none; line-height: 1; } .rh-btn--accent { background: var(--rh-accent); border-color: var(--rh-accent); color: var(--rh-ink); } .rh-btn--ghost { background: transparent; color: var(--rh-slate); border-color: var(--rh-line); } .rh-btn--light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); } .rh-btn.sm { padding: 11px 20px; font-size: 13.5px; } /* deposit CTA on the plate page – larger text + a faded coral outline ring */ .rh-btn--pay { font-size: 18px; font-weight: 900; padding-top: 17px; padding-bottom: 17px; box-shadow: 0 0 0 4px rgba(255,140,66,.45); } .rh-btn__icon { width: 15px; height: 15px; flex-shrink: 0; } .rh-btn-row { display: flex; gap: 14px; flex-wrap: wrap; } /* ============================================================ PROMO + HEADER ============================================================ */ .rh-promo { background: var(--rh-slate); color: #fff; font-size: 13px; letter-spacing: .2px; } .rh-promo__inner { max-width: 1320px; margin: 0 auto; padding: 8px 48px; text-align: center; } .rh-promo b { color: var(--rh-accent); font-weight: 700; margin: 0 4px; } .rh-header { background: #fff; border-bottom: 1px solid var(--rh-line); } /* needs body.design specificity to beat `body.design .rh-wrap`'s padding shorthand */ body.design .rh-header__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; } .rh-header__logo { height: 28px; width: auto; display: block; } .rh-header__nav { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .rh-header__nav li { font-size: 14.5px; font-weight: 500; color: var(--rh-slate); } .rh-header__menu { display: none; background: none; border: 0; color: inherit; } /* ============================================================ HERO ============================================================ */ .rh-hero { background: #fff; padding: 76px 0 84px; } .rh-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; } .rh-hero__copy { max-width: 40em; } /* hero headline: each phrase on its own line, sized to stay single-line */ .rh-hero .rh-h1 { font-size: clamp(42px, 4.8vw, 60px); } .rh-h1__line { display: block; white-space: nowrap; } .rh-search { display: flex; gap: 8px; margin: 28px 0 12px; max-width: 480px; background: #fff; border: 1.5px solid var(--rh-line); border-radius: var(--rh-radius); padding: 6px; box-shadow: 0 10px 30px rgba(47,51,56,.07); } .rh-search input { flex: 1; border: 0; outline: 0; font: inherit; font-size: 16px; padding: 12px 14px; background: transparent; color: var(--rh-ink); } .rh-search button { border: 0; font: inherit; font-weight: 700; font-size: 14px; padding: 0 22px; border-radius: 7px; background: var(--rh-yellow); color: #111; cursor: default; display: inline-flex; align-items: center; gap: 7px; } .rh-search button .rh-search__arrow { font-weight: 700; } /* Compact search used in the browse/results filter bar (left end, opposite Sort by). */ .rh-search--compact { margin: 0; max-width: 300px; flex: 0 1 300px; box-shadow: none; padding: 5px; } .rh-search--compact input { padding: 9px 12px; font-size: 15px; } .rh-search--compact button { padding: 0 13px; } .rh-hero__caption { font-size: 14px; color: var(--rh-muted); } .rh-hero__caption .hl { color: var(--rh-coral); font-weight: 600; } /* Inline link inside a lead paragraph (e.g. "hand-picked selection" in the hero): subtle underline in the text colour, coral on hover. */ .rh-lead__link { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent); transition: color .2s ease, border-color .2s ease; } .rh-lead__link:hover { color: var(--rh-coral); border-bottom-color: var(--rh-coral); } /* image placeholder – intentional, not broken */ .rh-media { position: relative; border-radius: var(--rh-radius-lg); overflow: hidden; background: radial-gradient(120% 120% at 70% 20%, rgba(255,204,0,.16), transparent 55%), linear-gradient(135deg, var(--rh-silver), #cdd6d9); min-height: 360px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rh-line); } .rh-media__tag { font-size: 12.5px; font-weight: 500; color: var(--rh-slate); background: rgba(255,255,255,.7); padding: 8px 14px; border-radius: 100px; max-width: 80%; text-align: center; line-height: 1.4; backdrop-filter: blur(2px); } .rh-media__icon { position: absolute; top: 18px; left: 18px; width: 26px; height: 26px; opacity: .5; color: var(--rh-slate); } .rh-media--tall { min-height: 460px; } /* ============================================================ THE PLATE (iconic UK reg) ============================================================ */ /* UK rear (yellow) plate – real oblong proportions: big characters fill the height, modest side margins, thin keyline rather than a heavy outline. */ .rh-plate { display: inline-flex; align-items: center; justify-content: center; background: var(--rh-yellow); color: #111; font-family: 'Charles Wright', var(--rh-body); font-weight: 700; letter-spacing: 1px; word-spacing: 6px; font-size: 38px; line-height: 1; padding: 0.32em 27px 0.15em; min-width: 180px; border-radius: 4px; border: 1px solid rgba(0,0,0,.22); text-transform: uppercase; white-space: nowrap; } .rh-plate--xl { font-size: 92px; padding: 20px 54px; letter-spacing: 2px; word-spacing: 12px; min-width: 380px; border-radius: 6px; } /* ============================================================ SECTIONS / generic band ============================================================ */ .rh-section { padding: 76px 0; } .rh-section--silver { background: var(--rh-paper); } .rh-section__head { max-width: 640px; margin: 0 0 40px; } .rh-center .rh-section__head { margin-left: auto; margin-right: auto; } /* STEPS */ .rh-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 26px; } .rh-step { background: #fff; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); padding: 32px 28px; } .rh-step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--rh-accent); color: var(--rh-ink); font-weight: 700; font-family: var(--rh-display); margin-bottom: 18px; font-size: 17px; } .rh-step p { color: var(--rh-muted); margin: 0; font-size: 15px; } /* PLATE GRID + CARDS */ .rh-plate-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Similar plates: cards keep their natural size and centre + wrap, so a lone card never stretches. */ .rh-similar { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; } .rh-plate-card { background: #fff; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .rh-plate-card .rh-plate { width: 258px; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: 31px; letter-spacing: .5px; word-spacing: 3px; } .rh-plate-card__price { font-family: var(--rh-display); font-weight: 700; font-size: 26px; color: var(--rh-ink); } .rh-plate-card__cta { font-size: 13.5px; font-weight: 600; color: var(--rh-accent); } /* The whole card is a link: drop the underline on the plate + price, keep it on "View details". */ .rh-plate-card { text-decoration: none; } .rh-plate-card__cta { display: inline-block; text-decoration: none; border-bottom: 1px solid var(--rh-line); transition: border-color .2s ease; } .rh-plate-card:hover .rh-plate-card__cta { border-bottom-color: currentColor; } .rh-pricing-note { font-size: 13px; color: var(--rh-muted); margin-top: 20px; } /* FINDER block */ .rh-finder { background: var(--rh-paper); border-radius: var(--rh-radius-lg); padding: 56px 48px; text-align: center; border: 1px solid var(--rh-line); } .rh-finder .rh-btn-row { justify-content: center; } /* SELL / two-col */ .rh-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .rh-split--wide { grid-template-columns: 1.4fr 1fr; } .rh-trust-list { list-style: none; margin: 22px 0; padding: 0; } .rh-trust-list li { padding: 9px 0 9px 28px; position: relative; color: var(--rh-muted); border-bottom: 1px solid var(--rh-line); } .rh-trust-list li:before { content: ''; position: absolute; left: 0; top: 15px; width: 14px; height: 14px; border-radius: 50%; background: var(--rh-accent); } .rh-trust-list b, .rh-trust-list strong { color: var(--rh-ink); } /* ABOUT (centered trust) */ .rh-about { max-width: 720px; margin: 0 auto; text-align: center; } .rh-about .rh-trust-list { display: inline-block; text-align: left; } .rh-about .rh-lead { margin-left: auto; margin-right: auto; } /* centre the 56ch lead inside the centred block */ /* Trust-block reasons: 4-up icon grid (icon above, reason below). */ .rh-reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); justify-content: center; gap: 30px; max-width: 940px; margin: 44px auto 0; } .rh-reason { text-align: center; } .rh-reason__icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(255, 140, 66, .12); color: var(--rh-coral); margin-bottom: 16px; } .rh-reason__icon svg { width: 26px; height: 26px; display: block; } .rh-reason__text { color: var(--rh-muted); font-size: 16px; line-height: 1.6; margin: 0 auto; max-width: 200px; } .rh-reason__text strong, .rh-reason__text b { color: var(--rh-ink); } @media (max-width: 768px) { .rh-reasons { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; max-width: 440px; } } /* JOURNAL */ .rh-journal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .rh-news-card { background: #fff; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); padding: 28px; display: flex; flex-direction: column; position: relative; transition: transform .2s ease, box-shadow .2s ease; } .rh-news-card__cta { margin-top: auto; } /* Whole journal card is the click target (matches the blog landing cards): the CTA link is stretched over the card via ::after, so a click anywhere opens the post. */ .rh-news-card__cta::after { content: ''; position: absolute; inset: 0; z-index: 1; } @media (hover: hover) { .rh-news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(47,51,56,.12); } } .rh-news-card__date { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--rh-accent); } .rh-news-card h3 { margin: 12px 0 10px; } .rh-news-card p { color: var(--rh-muted); font-size: 15px; margin: 0 0 16px; } .rh-news-card__cta { font-size: 13.5px; font-weight: 600; color: var(--rh-slate); } /* FINAL CTA band */ .rh-cta { background: var(--rh-slate); color: #fff; text-align: center; padding: 80px 0; } .rh-cta .rh-lead { color: rgba(255,255,255,.78); } .rh-cta .rh-btn-row { justify-content: center; } /* ============================================================ FOOTER ============================================================ */ .rh-footer { background: var(--rh-ink); color: rgba(255,255,255,.66); font-size: 14px; } .rh-footer__trust { padding: 20px 0; } .rh-footer__trust-inner { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; } .rh-footer__body { padding: 14px 0 40px; } .rh-footer__trust span { font-weight: 600; color: #fff; font-size: 13px; } .rh-footer__trust span:before { content: '✓'; color: var(--rh-accent); margin-right: 7px; } .rh-footer__brand { text-align: center; padding: 30px 0; } .rh-footer__brand img { height: 26px; } .rh-footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); } .rh-footer__grid h4 { color: #fff; font-family: var(--rh-display); font-size: 15px; margin: 0 0 14px; } .rh-footer__grid ul { list-style: none; margin: 0; padding: 0; } .rh-footer__grid li { padding: 5px 0; } .rh-footer__disclaimer { font-size: 12px; color: rgba(255,255,255,.45); padding-top: 26px; line-height: 1.6; } .rh-footer__copy { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 10px; } .rh-footer__regoffice { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 10px; } .rh-footer__social { display: flex; gap: 12px; } .rh-footer__social--bottom { justify-content: center; padding: 22px 0 26px; } .rh-footer__social--inline { display: none; } /* shown in the Contact column for Direction A */ .rh-footer__social-link { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; color: #fff; } /* accepted payment methods – shown on both directions */ .rh-footer__pay { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 0 30px; } .rh-footer__pay-label { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--rh-muted); } .rh-footer__pay-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; } .rh-footer__pay-mark { height: 32px; width: auto; display: block; border-radius: 4px; } /* dark (B): white cards pop on ink; just lighten the label */ body[data-dir="modern"] .rh-footer__pay-label { color: rgba(255,255,255,.5); } /* footer logo is the slate wordmark; invert to white on the dark Modern footer */ body[data-dir="modern"] .rh-footer__brand img { filter: brightness(0) invert(1); } /* ============================================================ SEARCH RESULTS ============================================================ */ .rh-breadcrumb { padding: 18px 0; font-size: 13px; color: var(--rh-muted); } .rh-breadcrumb b { color: var(--rh-ink); font-weight: 600; } .rh-breadcrumb span.sep { margin: 0 9px; opacity: .5; } .rh-pagehead { padding: 8px 0 28px; } /* Search + sort sit in a light-grey band; the refine sidebar below stays white + outlined. */ .rh-plates-bar { background: var(--rh-paper); padding: 16px 0; } .rh-filterbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .rh-filterbar__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--rh-muted); } .rh-filters__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .rh-filterbar__spacer { flex: 1; } .rh-sort { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--rh-muted); } .rh-sort select { font: inherit; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--rh-line); background: #fff; color: var(--rh-ink); } .rh-results { display: grid; grid-template-columns: 300px 1fr; gap: 40px; padding: 36px 0 0; align-items: start; } /* sidebar matches the 300px search box above */ .rh-filters { background: #fff; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); padding: 24px; } @media ( min-width: 769px ) { .rh-filters { position: sticky; top: 16px; } } /* header is static, so no offset needed */ /* Nothing to refine (no results, no active filters): dim + disable the groups, never the search box. */ /* Nothing to refine (no results, no active filters): fade the whole panel – border, the "Refine" heading and the groups all together – not just the option rows. */ .rh-filters--locked { opacity: .5; } .rh-filters--locked .rh-filters__opt { cursor: not-allowed; } .rh-enhanced .rh-filters__apply { display: none; } /* "Show results" only for the no-JS path */ /* Scroll target for the AJAX filter/search jump and the homepage-search landing: offset by the 64px sticky bar, same as in-page anchors elsewhere. The JS re-aligns against the live layout after an AJAX swap (the hero summary can reflow 2->3 lines), so this margin only has to be right for the no-JS / initial case. */ #rh-results-live { scroll-margin-top: 64px; } /* No-results: a centred card with an icon. */ .rh-empty { text-align: center; max-width: 460px; margin: 8px auto; padding: 26px 24px 32px; } .rh-empty__icon { width: 64px; height: 64px; margin: 0 auto 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 140, 66, .12); color: var(--rh-coral); } .rh-empty__icon svg { width: 28px; height: 28px; } .rh-empty__title { font-family: var(--rh-display); font-size: 22px; margin: 0 0 8px; color: var(--rh-ink); } .rh-empty__text { color: var(--rh-slate); font-size: 15.5px; line-height: 1.6; margin: 0 auto 22px; } /* "Plate finder service" link: the site's subtle border-bottom treatment, coral on hover. */ .rh-empty__text a { color: inherit; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); transition: color .2s ease, border-color .2s ease; } .rh-empty__text a:hover { color: var(--rh-coral); border-bottom-color: var(--rh-coral); } .rh-empty__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* No-results "a few from our stock" picks + browse-all, shown under the empty message. */ .rh-empty-picks { margin-top: 36px; } .rh-empty-picks__label { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--rh-muted); margin: 0 0 16px; } .rh-empty-picks__more { text-align: center; margin-top: 26px; } /* Results pager. */ .rh-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 36px; } .rh-pager__nums { display: flex; flex-wrap: wrap; gap: 6px; } .rh-pager__num { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--rh-line); color: var(--rh-ink); text-decoration: none; font-size: 14px; font-weight: 600; } .rh-pager__num:hover { border-color: var(--rh-ink); } .rh-pager__num.is-current { background: var(--rh-ink); color: #fff; border-color: var(--rh-ink); cursor: default; } .rh-pager__step { font-size: 14px; font-weight: 600; color: var(--rh-ink); text-decoration: none; border-bottom: 1px solid transparent; } .rh-pager__step:hover { border-bottom-color: currentColor; } .rh-pager__step.is-disabled { color: var(--rh-muted); opacity: .55; } .rh-filters h3 { font-family: var(--rh-display); font-size: 17px; margin: 0 0 16px; } /* Refine header (acts as a no-JS accordion toggle on mobile; plain heading on desktop) */ .rh-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--rh-display); font-size: 17px; font-weight: 600; color: var(--rh-ink); margin: 0 0 16px; } .rh-filters__plus { position: relative; flex: none; width: 16px; height: 16px; display: none; } .rh-filters__plus::before, .rh-filters__plus::after { content: ''; position: absolute; background: var(--rh-slate); border-radius: 1px; } .rh-filters__plus::before { top: 7px; left: 0; width: 16px; height: 2px; } .rh-filters__plus::after { left: 7px; top: 0; width: 2px; height: 16px; transition: opacity .2s ease; } .rh-filters__toggle:checked ~ .rh-filters__head .rh-filters__plus::after { opacity: 0; } .rh-filters__count { display: none; } /* active-filter count badge: shown only on the mobile accordion */ .rh-filters__group { padding: 14px 0; border-top: 1px solid var(--rh-line); } .rh-filters__group h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--rh-muted); margin: 0 0 12px; } .rh-filters__opt { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14.5px; color: var(--rh-slate); } .rh-filters__opt input { width: 16px; height: 16px; accent-color: var(--rh-accent); } .rh-results__count { font-size: 14px; color: var(--rh-muted); margin-bottom: 4px; } .rh-results__count b { color: var(--rh-ink); } .rh-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 14px; } .rh-filters__clear { display: inline-block; text-align: center; font-size: 13.5px; color: var(--rh-muted); text-decoration: none; border-bottom: 1px solid transparent; } .rh-filters__clear:hover { color: var(--rh-ink); border-bottom-color: currentColor; } /* Results header: count on the left, pricing note on the right. */ .rh-results__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; } .rh-results__head .rh-pricing-note { margin: 0; } /* ============================================================ PLATE DETAIL ============================================================ */ .rh-detail { display: grid; grid-template-columns: 1fr 420px; gap: 48px; padding: 36px 0 64px; align-items: start; } .rh-detail__visual { background: var(--rh-paper); border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); padding: 64px 32px; text-align: center; } .rh-detail__visual-meta { display: flex; justify-content: center; gap: 22px; margin-top: 24px; font-size: 13px; color: var(--rh-muted); } .rh-buy { background: #fff; border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); padding: 30px; box-shadow: 0 18px 50px rgba(47,51,56,.08); } .rh-buy__price { font-family: var(--rh-display); font-weight: 700; font-size: 40px; color: var(--rh-ink); line-height: 1; } .rh-buy__price-meta { font-size: 13.5px; color: var(--rh-muted); margin: 8px 0 20px; } .rh-specs { list-style: none; margin: 0 0 18px; padding: 0; } .rh-specs li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rh-line); font-size: 14px; } .rh-specs li span:first-child { color: var(--rh-muted); } .rh-specs li span:last-child { color: var(--rh-ink); font-weight: 500; text-align: right; } /* Inline info tooltip — no JS. Reveals on hover (desktop) and tap/focus (touch + keyboard). */ .rh-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; } .rh-tip__btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--rh-line); color: var(--rh-ink); font-family: var(--rh-display, sans-serif); font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease; } .rh-tip__btn:hover, .rh-tip:focus-within .rh-tip__btn { background: var(--rh-coral); color: #fff; } .rh-tip__btn:focus-visible { outline: 2px solid var(--rh-coral); outline-offset: 2px; } .rh-tip__bubble { position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: 30; width: max-content; max-width: 230px; padding: 10px 12px; border-radius: var(--rh-radius, 8px); background: var(--rh-ink, #2f3338); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left; box-shadow: 0 12px 32px rgba(47,51,56,.24); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease, visibility .18s; } .rh-tip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--rh-ink, #2f3338); } .rh-tip:hover .rh-tip__bubble, .rh-tip:focus-within .rh-tip__bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .rh-buy .rh-btn-row { flex-direction: column; margin: 20px 0; } .rh-buy .rh-btn { width: 100%; justify-content: center; } .rh-trust-block { border-top: 1px solid var(--rh-line); padding-top: 16px; } .rh-trust-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--rh-muted); margin: 0 0 8px; } .rh-trust-row svg { width: 18px; height: 18px; color: var(--rh-accent); flex-shrink: 0; } .rh-trust-row--primary { color: var(--rh-ink); font-weight: 600; } .rh-card-marks { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } /* plate-detail sidebar trust block: centred, DVLA line kept on one row */ .rh-buy .rh-trust-block { text-align: center; } .rh-buy .rh-trust-row { justify-content: center; } .rh-buy .rh-trust-row--primary { font-size: 12px; white-space: nowrap; gap: 8px; } .rh-buy .rh-trust-row--primary svg { width: 16px; height: 16px; } .rh-buy .rh-card-marks { justify-content: center; } .rh-card-mark { height: 26px; width: auto; display: block; } .rh-aside-card { background: var(--rh-paper); border: 1px solid var(--rh-line); border-radius: var(--rh-radius-lg); padding: 28px; } .rh-aside-card > div + div { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rh-line); } .rh-aside-card h3 { font-size: 16.5px; } .rh-aside-card p { color: var(--rh-muted); font-size: 14px; margin: 0; } /* FAQ accordion – native

, no JS (works under Delay JS). */ .rh-faq__item { border: 1px solid var(--rh-line); border-radius: var(--rh-radius); margin-bottom: 14px; background: #fff; overflow: hidden; } .rh-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 26px; cursor: pointer; list-style: none; font-family: var(--rh-display); font-weight: 600; font-size: 17px; color: var(--rh-ink); } .rh-faq__q::-webkit-details-marker { display: none; } /* hide default disclosure triangle (WebKit) */ .rh-faq__q::marker { content: ""; } .rh-faq__icon { flex: none; width: 9px; height: 9px; position: relative; top: -2px; border-right: 2px solid var(--rh-coral); border-bottom: 2px solid var(--rh-coral); transform: rotate(45deg); transition: transform .25s ease, top .25s ease; } .rh-faq__item[open] .rh-faq__icon { transform: rotate(-135deg); top: 2px; } .rh-faq__a { padding: 0 26px 22px; } .rh-faq__a p { color: var(--rh-muted); font-size: 15px; margin: 0 0 10px; } .rh-faq__a p:last-child { margin-bottom: 0; } /* ============================================================ DIRECTION B · MODERN (Space Grotesk + Inter, coral-led, dark) ============================================================ */ body[data-dir="modern"] { --rh-display: 'Space Grotesk', 'Inter', sans-serif; --rh-accent: var(--rh-coral); --rh-radius: 6px; --rh-radius-lg: 10px; --rh-h1-weight: 700; --rh-h1-spacing: -1px; --rh-eyebrow-spacing: 3px; } /* dark, continuous top: promo + header + hero read as one slate block */ /* Direction B: light (near-white) top bar */ body[data-dir="modern"] .rh-promo { background: var(--rh-paper); color: #5f5e5e; font-size: 12px; font-family: var(--rh-display); font-weight: 600; } body[data-dir="modern"] .rh-promo b { color: var(--rh-muted); } /* Mobile pre-header: comfortable padding, slightly smaller text, and the three phrases fade-cycle one at a time instead of inline-with-dots. */ @media (max-width: 768px) { body[data-dir="modern"] .rh-promo { font-size: 12.5px; } body[data-dir="modern"] .rh-promo__inner { padding-top: 11px; padding-bottom: 11px; } } @media (max-width: 768px) and (prefers-reduced-motion: no-preference) { /* grid-stack so the bar keeps its natural one-line height + padding (no absolute fill) */ body[data-dir="modern"] .rh-promo__inner { display: grid; justify-content: center; } body[data-dir="modern"] .rh-promo b { display: none; } /* hide the dot separators while cycling */ body[data-dir="modern"] .rh-promo__item { grid-area: 1 / 1; opacity: 0; animation: rh-promo-fade 12s infinite; } body[data-dir="modern"] .rh-promo__item:nth-of-type(2) { animation-delay: 4s; } body[data-dir="modern"] .rh-promo__item:nth-of-type(3) { animation-delay: 8s; } } /* each message fades out in place; the next nudges up from below as it fades in */ @keyframes rh-promo-fade { 0% { opacity: 0; transform: translateY(7px); } 8% { opacity: 1; transform: translateY(0); } 30% { opacity: 1; transform: translateY(0); } 34% { opacity: 0; transform: translateY(0); } 100% { opacity: 0; transform: translateY(0); } } /* slightly darker nav bar (≈ slate + 10% black) so it separates from the hero */ body[data-dir="modern"] .rh-header { background: #40444a; border-bottom-color: rgba(255,255,255,.1); } body[data-dir="modern"] .rh-header__nav li { color: #ffffff; } body[data-dir="modern"] .rh-hero { background: linear-gradient(180deg, rgba(47,51,56,.62) 0%, rgba(47,51,56,0) 22%), linear-gradient(95deg, rgba(47,51,56,.62) 0%, rgba(47,51,56,.34) 32%, rgba(47,51,56,0) 58%), url('../img/luxury-saloon-hero4.jpg') 64% 54% / cover no-repeat; color: #fff; min-height: 720px; margin-top: -96px; padding: 178px 0 120px; /* pull fully up behind the nav (seamless); push text below it */ position: relative; z-index: 1; } /* the photo is now the full-bleed hero background, so drop the right-column placeholder */ body[data-dir="modern"] .rh-hero .rh-media { display: none; } /* no heavy scrim (let the car pop) – keep text legible with a soft shadow instead */ body[data-dir="modern"] .rh-hero .rh-h1, body[data-dir="modern"] .rh-hero .rh-lead, body[data-dir="modern"] .rh-hero__caption { text-shadow: 0 2px 18px rgba(0,0,0,.6); } /* hero eyebrow: light grey + slightly smaller (was coral) */ body[data-dir="modern"] .rh-hero .rh-eyebrow { color: rgba(255,255,255,.72); font-size: 11px; text-shadow: 0 1px 8px rgba(0,0,0,.5); } /* nav floats over the hero on the homepage with just a light tint; promo pinned above so the pulled-up image tucks behind both (no gap) */ body[data-dir="modern"] .wf:has(.rh-hero, .rh-pagehero, .rh-platehero) .rh-header { position: relative; z-index: 3; background: transparent; border-bottom: 0; } body[data-dir="modern"] .wf:has(.rh-hero, .rh-pagehero, .rh-platehero) .rh-promo { position: relative; z-index: 3; } /* subtle shadow so the floating nav stays legible over the photo */ body[data-dir="modern"] .wf:has(.rh-hero, .rh-pagehero, .rh-platehero) .rh-header__nav li { text-shadow: 0 1px 6px rgba(0,0,0,.5); } /* Slick sticky header (hero pages only – that's where the header content is white). Pins to the top and, scroll-driven, fades from transparent-over-the-hero to a solid brand-slate bar (no blur) while the bar shrinks slightly. Pure CSS scroll-timeline: no JS, so it's Delay-JS-safe and cacheable. Progressive enhancement – only where scroll-timeline is supported and motion is allowed; everywhere else the header stays exactly as before. The white nav/logo + light "Browse plates" pill all stay readable on the dark bar, so no colour flip is needed mid-scroll. */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { body[data-dir="modern"] .wf:has(.rh-hero, .rh-pagehero, .rh-platehero) .rh-header { position: sticky; top: 0; z-index: 20; animation: rh-header-solidify linear both; animation-timeline: scroll(root); animation-range: 30px 150px; } body[data-dir="modern"] .wf:has(.rh-hero, .rh-pagehero, .rh-platehero) .rh-header__inner { animation: rh-header-shrink linear both; animation-timeline: scroll(root); animation-range: 30px 150px; } /* the logo scales down a touch as the bar tightens – desktop only (the mobile logo is already small). transform:scale (anchored left) is visual-only, so the logo keeps its layout box and the nav/CTA stay put rather than sliding left as it shrinks. */ @media (min-width: 769px) { body[data-dir="modern"] .wf:has(.rh-hero, .rh-pagehero, .rh-platehero) .rh-header__logo { transform-origin: left center; animation: rh-header-logo linear both; animation-timeline: scroll(root); animation-range: 30px 150px; } } /* The pinned bar is 64px high (shrunk, desktop), so offset anchored targets by that much. Each target keeps its own top padding – that provides the breathing room below the bar. */ body[data-dir="modern"] .wf:has(.rh-hero, .rh-pagehero, .rh-platehero) :target { scroll-margin-top: 64px; } } } @keyframes rh-header-solidify { to { background-color: var(--rh-slate); /* brand Slate Grey #474c52, solid (no blur) */ box-shadow: 0 8px 26px rgba(0,0,0,.18); } } @keyframes rh-header-shrink { to { padding-top: 12px; padding-bottom: 12px; } } @keyframes rh-header-logo { to { transform: scale(.875); } /* 28/32, visual only – layout box stays so the nav doesn't move */ } /* Direction B homepage section backgrounds */ body[data-dir="modern"] .rh-section--steps { background: #fff; } /* Find, buy & transfer */ body[data-dir="modern"] .rh-section--featured { background: var(--rh-paper); } /* Featured registrations on grey */ body[data-dir="modern"] .rh-section--featured .rh-plate-card { background: #fff; } /* with white cards */ /* Plate finder: image sits behind the boxed panel (placeholder until supplied) */ body[data-dir="modern"] .rh-section--finderbg { background: var(--rh-paper); padding-top: 20px; } /* awaiting a detail shot (car wing / alloys) behind the box; pulled up tighter to the section above */ body[data-dir="modern"] .rh-hero .rh-lead { color: rgba(255,255,255,.74); } body[data-dir="modern"] .rh-hero .rh-search { background: rgba(0,0,0,.42); border-color: rgba(255,255,255,.28); box-shadow: none; backdrop-filter: blur(3px); margin-top: 40px; } body[data-dir="modern"] .rh-hero .rh-search input { color: #fff; } body[data-dir="modern"] .rh-hero .rh-search input::placeholder { color: rgba(255,255,255,.9); } /* Filled accent buttons use brand Coral Orange (#ff8c42, --rh-coral) with dark ink text: ink on coral is ~5.5:1 (passes WCAG AA); white on coral is only ~2.3:1. */ body[data-dir="modern"] .rh-btn--accent { background: var(--rh-coral); border-color: var(--rh-coral); color: var(--rh-ink); } body[data-dir="modern"] .rh-btn--pay { font-weight: 900; } /* step index = ghost treatment, like the coral ghost buttons (white fill masks the timeline line behind each) */ body[data-dir="modern"] .rh-step__num { background: #fff; border: 2px solid var(--rh-coral); color: var(--rh-coral); } /* modern leans on uppercase, tighter display */ body[data-dir="modern"] .rh-h1, body[data-dir="modern"] .rh-h2 { letter-spacing: -1px; } body[data-dir="modern"] .rh-header__logo { filter: brightness(0) invert(1); height: 32px; } body[data-dir="modern"] .rh-header__menu { color: #fff; } /* burger is white on the dark / over-image modern header */ /* ---- Direction B gets its OWN treatment, not just a colour swap ---- Heritage = soft, light, rounded, generous. Modern = flat, sharp, bold-bordered cards with coral accents and a dark focal block. */ body[data-dir="modern"] .rh-step, body[data-dir="modern"] .rh-plate-card, body[data-dir="modern"] .rh-news-card, body[data-dir="modern"] .rh-faq__item, body[data-dir="modern"] .rh-filters, body[data-dir="modern"] .rh-buy { border: 1.5px solid var(--rh-ink); border-radius: 4px; box-shadow: none; } /* The form sidebar stays light – a soft paper panel, not a heavy framed box. */ body[data-dir="modern"] .rh-aside-card { border: 0; border-radius: 4px; } /* feature cards carry a bold coral top edge */ body[data-dir="modern"] .rh-step, body[data-dir="modern"] .rh-news-card { border-top: 4px solid var(--rh-coral); } /* square coral index block instead of Heritage's soft round badge */ body[data-dir="modern"] .rh-step__num { border-radius: 4px; width: 48px; height: 48px; font-size: 21px; } /* heavier, tighter headings + uppercase, tracked card titles */ body[data-dir="modern"] .rh-h2 { font-weight: 700; } body[data-dir="modern"] .rh-step h3 { text-transform: uppercase; letter-spacing: .5px; font-size: 17px; } body[data-dir="modern"] .rh-news-card h3 { text-transform: none; letter-spacing: 0; font-size: 18px; line-height: 1.3; } /* the Plate finder service becomes a solid dark focal block (vs Heritage's light card) */ body[data-dir="modern"] .rh-finder { background: var(--rh-ink); color: #fff; border: 1.5px solid var(--rh-ink); border-radius: 4px; } body[data-dir="modern"] .rh-finder .rh-h2 { color: #fff; } body[data-dir="modern"] .rh-finder .rh-lead { color: rgba(255,255,255,.74); } body[data-dir="modern"] .rh-finder .rh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.4); } /* bolder price on the plate cards */ body[data-dir="modern"] .rh-plate-card__price { font-weight: 700; } /* featured image on cards – Direction B only (hidden elsewhere) */ .rh-news-card__img { display: none; } /* blog cards on B match the simplified registration cards: very light grey, no outline, rounded, with a featured image up top */ body[data-dir="modern"] .rh-news-card { background: #F5F6F7; border: 0; border-radius: var(--rh-radius-lg); box-shadow: none; overflow: hidden; } body[data-dir="modern"] .rh-news-card__img { display: block; height: 168px; margin: -28px -28px 22px; background-size: cover; background-position: center; background-repeat: no-repeat; } body[data-dir="modern"] .rh-journal-grid .rh-news-card:nth-child(1) .rh-news-card__img { background-image: url('../img/blog-new-plates.jpg'); } body[data-dir="modern"] .rh-journal-grid .rh-news-card:nth-child(2) .rh-news-card__img { background-image: url('/wp-content/uploads/2026/06/green-legacy-sports.jpg'); } body[data-dir="modern"] .rh-journal-grid .rh-news-card:nth-child(3) .rh-news-card__img { background-image: url('/wp-content/uploads/2026/06/blog-transfer-v750.jpg'); } /* ---- Direction B refinements (round 2) ---- */ /* Header "Browse plates" CTA: a light-chrome pill (subtle white->silver gradient) rather than the coral fill – pops against the dark hero, and the thin edge + soft shadow keep it defined on the white header on inner pages. Dark ink label/icon (high contrast either way). */ body[data-dir="modern"] .rh-header .rh-btn--accent { background: linear-gradient(180deg, #ffffff 0%, #e6ebec 100%); border-color: transparent; color: var(--rh-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(47,51,56,.14); } body[data-dir="modern"] .rh-header .rh-btn--accent:hover { background: linear-gradient(180deg, #ffffff 0%, #dde3e5 100%); } /* On the browse/search page the header CTA becomes an "Ask a question" ghost – white so it reads on the dark hero at top and on the slate bar once scrolled. */ body[data-dir="modern"] .rh-header .rh-btn--ghost { color: #fff; border-color: rgba(255,255,255,.45); text-shadow: 0 1px 6px rgba(0,0,0,.35); } body[data-dir="modern"] .rh-header .rh-btn--ghost .rh-btn__icon { filter: drop-shadow(0 1px 4px rgba(0,0,0,.3)); } body[data-dir="modern"] .rh-header .rh-btn--ghost:hover { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); } /* uppercase, tracked navigation */ body[data-dir="modern"] .rh-header__nav li { text-transform: uppercase; letter-spacing: 1px; font-size: 11.5px; font-weight: 600; } /* all buttons square + uppercase */ body[data-dir="modern"] .rh-btn, body[data-dir="modern"] .rh-search button { border-radius: 3px; text-transform: uppercase; letter-spacing: .6px; font-size: 13px; font-weight: 500; } /* ---- Direction B button system: solid = plate-yellow, ghosts = coral ---- */ /* prefooter CTA: yellow solid + white-bordered ghost */ body[data-dir="modern"] .rh-cta .rh-btn--accent { background: var(--rh-yellow); border-color: var(--rh-yellow); color: var(--rh-ink); text-shadow: none; } body[data-dir="modern"] .rh-cta .rh-btn--light { background: transparent; border-color: #fff; color: #fff; } /* plate finder: yellow solid */ body[data-dir="modern"] .rh-finder .rh-btn--accent { background: var(--rh-yellow); border-color: var(--rh-yellow); color: var(--rh-ink); text-shadow: none; } /* sell / about / featured / journal: coral ghost, all full size */ body[data-dir="modern"] .rh-section--sell .rh-btn, body[data-dir="modern"] .rh-section--about .rh-btn, body[data-dir="modern"] .rh-section--transfer .rh-btn, body[data-dir="modern"] .rh-section--featured .rh-btn, body[data-dir="modern"] .rh-section--journal .rh-btn { background: transparent; border-color: var(--rh-coral); color: var(--rh-coral); padding: 15px 28px; font-size: 13px; } /* hero caption in white (the link stays coral) */ body[data-dir="modern"] .rh-hero__caption { color: rgba(255,255,255,.85); } /* "How it works" as a connected timeline instead of cards */ body[data-dir="modern"] .rh-steps { position: relative; } body[data-dir="modern"] .rh-steps::before { content: ''; position: absolute; top: 24px; left: 16.66%; right: 16.66%; height: 1px; background: rgba(71,76,82,.28); z-index: 0; } body[data-dir="modern"] .rh-step { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 0 14px; text-align: center; position: relative; z-index: 1; } body[data-dir="modern"] .rh-step__num { margin-bottom: 20px; } body[data-dir="modern"] .rh-step h3 { text-transform: uppercase; letter-spacing: .5px; } /* pre-footer (final CTA): coastal-drive photo, dark at the top for the text, staying visible lower down; the footer is pulled up over it and fades the image out to ink by the logo (homepage only). */ body[data-dir="modern"] .rh-cta { background: linear-gradient(to bottom, rgba(47,51,56,.82) 0%, rgba(47,51,56,.58) 48%, rgba(47,51,56,.18) 100%), url('../img/coastal-drive.jpg') center 38% / cover no-repeat; padding: 96px 0 116px; position: relative; z-index: 1; } /* footer pulls up so the trust band overlaps the photo; the body is solid ink below */ body[data-dir="modern"] .wf:has(.rh-cta) .rh-footer { position: relative; z-index: 2; margin-top: -65px; background: transparent; } /* trust indicators in a full-width slightly-darker band over the photo (like the nav) */ body[data-dir="modern"] .rh-footer__trust { background: rgba(0,0,0,.45); } body[data-dir="modern"] .rh-footer__body { background: var(--rh-ink); } /* Sell (image right) + About (image left) section images – shared by both directions. Heritage shows them BOXED (the default .rh-media card); Modern makes them full-bleed 50% (below). */ .rh-section--sell .rh-media { background: url('/wp-content/uploads/2026/06/sell-your-reg-photo.jpg') center/cover no-repeat; } .rh-section--about .rh-media { background: url('/wp-content/uploads/2026/06/a-family-business-you-can-trust.jpg') center/cover no-repeat; } .rh-section--transfer .rh-media { background: url('/wp-content/uploads/2026/06/blog-transfer-v750.jpg') center/cover no-repeat; } .rh-section--split .rh-media { background: url('../img/car-911nop.jpg') center/cover no-repeat; } .rh-section--sell .rh-media__icon, .rh-section--sell .rh-media__tag, .rh-section--about .rh-media__icon, .rh-section--about .rh-media__tag { display: none; } /* Modern: full-bleed (not boxed) – sell image right, about image left */ body[data-dir="modern"] .rh-section--sell, body[data-dir="modern"] .rh-section--about, body[data-dir="modern"] .rh-section--transfer, body[data-dir="modern"] .rh-section--split { position: relative; overflow: hidden; } body[data-dir="modern"] .rh-section--sell .rh-media, body[data-dir="modern"] .rh-section--about .rh-media, body[data-dir="modern"] .rh-section--transfer .rh-media, body[data-dir="modern"] .rh-section--split .rh-media { position: absolute; top: 0; bottom: 0; width: 50%; margin: 0; padding: 0; border: 0; border-radius: 0; min-height: 0; } body[data-dir="modern"] .rh-section--sell .rh-media { right: 0; } body[data-dir="modern"] .rh-section--transfer .rh-media { right: 0; } body[data-dir="modern"] .rh-section--split .rh-media { right: 0; } body[data-dir="modern"] .rh-section--about .rh-media { left: 0; } /* about: image is absolute-left, so force the copy into the right column (else it back-fills col1 over the image) */ body[data-dir="modern"] .rh-section--about .rh-split > div:last-child { grid-column: 2; padding-left: 52px; } /* media-split with image on the left: flip the photo + push the copy into the right column */ body[data-dir="modern"] .rh-section--split.is-image-left .rh-media { left: 0; right: auto; } body[data-dir="modern"] .rh-section--split.is-image-left .rh-split > div { grid-column: 2; padding-left: 52px; } /* transfer: timeline fills the copy column (left-aligned, not the centred default) */ .rh-section--transfer .rh-timeline { margin: 0; max-width: none; } .rh-section--transfer .rh-timeline + .rh-btn { margin-top: 26px; } /* featured registration cards: very light grey fill, no outline (white on the grey sections so they keep some contrast) */ body[data-dir="modern"] .rh-plate-card { border: 0; box-shadow: none; background: #F5F6F7; } body[data-dir="modern"] .rh-section--silver .rh-plate-card { background: #fff; } /* very subtle drop shadow to lift the plate off the card */ body[data-dir="modern"] .rh-plate { box-shadow: 0 4px 14px rgba(0,0,0,.13); } /* footer: centred logo on top, balanced centred columns, centred legal text */ body[data-dir="modern"] .rh-footer__grid { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; gap: 28px; border-bottom: 0; } body[data-dir="modern"] .rh-footer__disclaimer { text-align: center; } /* Centred copyright with "Built by 37 Digital" after the company number, matching the centred disclaimer above it. A middot separates the two. */ body[data-dir="modern"] .rh-footer__copy { text-align: center; } body[data-dir="modern"] .rh-footer__regoffice { text-align: center; } body[data-dir="modern"] .rh-footer__built::before { content: "·"; margin: 0 8px; opacity: .5; } .rh-footer__built a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.32); transition: color .2s ease, border-color .2s ease; } .rh-footer__built a:hover { color: #fff; border-bottom-color: currentColor; } body[data-dir="modern"] .rh-footer__disclaimer { color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.14); padding-top: 30px; } /* Disclaimer on one line: the footer wrap is a query container, so the font scales with the width (capped at 12px) to keep the legal text on a single row. Mobile wraps at a readable size – one line isn't possible there. */ .rh-footer__body .rh-wrap { container-type: inline-size; } body[data-dir="modern"] .rh-footer__disclaimer { white-space: nowrap; font-size: min(12px, 0.95cqw); } @media ( max-width: 768px ) { body[data-dir="modern"] .rh-footer__disclaimer { white-space: normal; font-size: 11.5px; } } /* social: borderless icons, in the Contact column beneath the email (centred) */ body[data-dir="modern"] .rh-footer__social-link { border: 0; border-radius: 0; width: auto; height: auto; } body[data-dir="modern"] .rh-footer__social-link svg { width: 18px; height: 18px; } body[data-dir="modern"] .rh-footer__social--inline { display: flex; justify-content: center; gap: 14px; padding-top: 14px; } body[data-dir="modern"] .rh-footer__social--bottom { display: none; } /* trust ticks set inside a darker circle */ body[data-dir="modern"] .rh-footer__trust span { display: inline-flex; align-items: center; } body[data-dir="modern"] .rh-footer__trust span:before { content: '✓'; display: inline-flex; align-items: center; justify-content: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(0,0,0,.45); color: var(--rh-yellow); font-size: 14px; margin-right: 9px; } /* ============================================================ BUILD-OUT (Direction B / Modern): editorial article + checkout ============================================================ */ /* ---- Editorial / article ---- */ .rh-article { padding: 6px 0 60px; } body.design .rh-article > .rh-wrap { max-width: 768px; } .rh-article__head { padding: 14px 0 26px; } .rh-article__title { font-size: clamp(32px, 4vw, 48px); margin: 14px 0 18px; line-height: 1.08; } .rh-article__meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 14px; color: var(--rh-muted); } .rh-article__meta .dot { opacity: .5; } .rh-article__lead { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 8px; display: block; margin: 6px 0 36px; } .rh-article__body { font-size: 17px; line-height: 1.72; color: var(--rh-slate); } .rh-article__standfirst { font-size: 20px; line-height: 1.6; color: var(--rh-ink); margin: 0 0 28px; } .rh-article__body h2 { font-size: 26px; margin: 40px 0 14px; } .rh-article__body p { margin: 0 0 20px; } .rh-article__list { margin: 0 0 24px; padding: 0; list-style: none; } .rh-article__list li { position: relative; padding: 0 0 13px 26px; margin: 0 0 13px; border-bottom: 1px solid var(--rh-line); font-size: 16px; line-height: 1.6; } .rh-article__list li:before { content: ''; position: absolute; left: 0; top: 9px; width: 9px; height: 9px; background: var(--rh-coral); } .rh-article__list li:last-child { border-bottom: 0; } .rh-pullquote { margin: 32px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--rh-coral); font-family: var(--rh-display); font-size: 23px; line-height: 1.4; color: var(--rh-ink); font-weight: 500; } .rh-article__share { display: flex; align-items: center; gap: 16px; margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--rh-line); } .rh-article__share-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px; color: var(--rh-muted); } .rh-article__share-icons { display: flex; gap: 10px; } .rh-share-link { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1.5px solid var(--rh-line); color: var(--rh-slate); border-radius: 4px; } /* ---- Checkout ---- */ .rh-checkout-bar { background: #40444a; border-bottom: 1px solid rgba(255,255,255,.1); } .rh-checkout-bar__inner { display: flex; align-items: center; justify-content: space-between; padding-top: 23px !important; padding-bottom: 23px !important; } /* left/right gutter comes from .rh-wrap so it matches the main header */ .rh-checkout-bar__logo { height: 26px; display: block; filter: brightness(0) invert(1); } .rh-checkout-bar__secure { display: flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.66); } .rh-checkout-bar__secure b { color: rgba(255,255,255,.4); margin: 0 2px; } .rh-checkout-progress { background: #fff; border-bottom: 1px solid var(--rh-line); } .rh-progress { display: flex; gap: 8px; list-style: none; margin: 0; padding: 18px 0; } .rh-progress__step { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--rh-muted); } .rh-progress__step:not(:last-child) { flex: 1; } .rh-progress__step:not(:last-child):after { content: ''; flex: 1; height: 1px; background: var(--rh-line); margin-left: 6px; } .rh-progress__num { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--rh-line); font-size: 13px; font-weight: 600; color: var(--rh-muted); flex: none; } .rh-progress__step.is-active { color: var(--rh-ink); font-weight: 600; } .rh-progress__step.is-active .rh-progress__num { background: var(--rh-coral); border-color: var(--rh-coral); color: #fff; } .rh-checkout-section { background: var(--rh-paper); } .rh-checkout { display: flex; align-items: flex-start; gap: 40px; } .rh-checkout__main { flex: 1 1 auto; min-width: 0; order: 1; } .rh-checkout > .rh-summary--accordion { flex: 0 0 360px; order: 2; } .rh-checkout__main h1 { margin-bottom: 8px; } .rh-checkout__main .rh-lead { font-size: 16px; margin-bottom: 26px; } .rh-form { background: #fff; border: 1.5px solid var(--rh-ink); border-radius: 4px; padding: 30px; } .rh-form__legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--rh-ink); margin: 0 0 16px; } .rh-form__legend:not(:first-child) { margin-top: 28px; border-top: 1px solid var(--rh-line); padding-top: 26px; } .rh-form__note { font-size: 13.5px; color: var(--rh-muted); margin: -8px 0 16px; } .rh-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rh-field { display: flex; flex-direction: column; gap: 6px; } .rh-field--full { grid-column: 1 / -1; } .rh-field__label { font-size: 13px; font-weight: 600; color: var(--rh-slate); } /* Subject + (conditional) Registration field: one column normally, two when "Buying a plate". */ .rh-subject-row { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: end; } .rh-subject-row.is-plate { grid-template-columns: 1fr 1fr; } .rh-subject-row__reg[hidden] { display: none; } /* beats .rh-field { display:flex } */ .rh-field input { font: inherit; font-size: 15px; padding: 12px 14px; border: 1.5px solid var(--rh-line); border-radius: 3px; background: #fff; color: var(--rh-ink); width: 100%; } .rh-field input::placeholder { color: var(--rh-muted); } .rh-field__hint { font-size: 12px; color: var(--rh-muted); } .rh-check { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; font-size: 14px; color: var(--rh-slate); line-height: 1.5; } .rh-check__box { flex: none; width: 20px; height: 20px; border: 1.5px solid var(--rh-coral); border-radius: 3px; display: inline-flex; align-items: center; justify-content: center; color: var(--rh-coral); background: rgba(255,140,66,.08); margin-top: 1px; } .rh-radio-card { display: flex; gap: 14px; padding: 16px; border: 1.5px solid var(--rh-line); border-radius: 4px; margin-bottom: 12px; } .rh-radio-card p { margin: 4px 0 0; font-size: 13.5px; color: var(--rh-muted); line-height: 1.55; } .rh-radio-card strong { font-size: 15px; color: var(--rh-ink); } .rh-radio-card__dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--rh-line); margin-top: 2px; background: #fff; } .rh-radio-card.is-selected { border-color: var(--rh-coral); background: rgba(255,140,66,.05); } .rh-radio-card.is-selected .rh-radio-card__dot { border: 6px solid var(--rh-coral); } .rh-checkout__actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .rh-checkout__trust { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rh-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .rh-checkout__trust .rh-trust-row { margin: 0; } .rh-summary { background: #fff; border: 1.5px solid var(--rh-ink); border-radius: 4px; padding: 26px; position: sticky; top: 20px; } .rh-summary__title { font-size: 18px; margin: 0 0 18px; text-transform: uppercase; letter-spacing: .5px; } .rh-summary__plate { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--rh-line); } .rh-summary__plate-meta { display: flex; gap: 16px; font-size: 12.5px; color: var(--rh-muted); } .rh-summary .rh-specs { margin-bottom: 0; } .rh-summary__deposit { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px 16px; background: var(--rh-ink); color: #fff; border-radius: 4px; font-size: 14px; } .rh-summary__deposit strong { font-size: 22px; font-weight: 700; color: var(--rh-yellow); font-family: var(--rh-display); } .rh-summary__balance { font-size: 12.5px; color: var(--rh-muted); margin: 12px 0 0; line-height: 1.55; } /* DESKTOP: order summary is the normal sidebar (inherits .rh-summary). Title only, stacked body. */ .rh-summary__head { display: block; margin-bottom: 18px; } .rh-summary__head .rh-summary__title { display: block; margin: 0; } .rh-summary__head-right { display: none; } .rh-summary__head-amount { font-family: var(--rh-display); font-weight: 700; font-size: 16px; color: var(--rh-ink); } .rh-summary__toggle { align-items: center; justify-content: center; width: 28px; height: 28px; border: 1.5px solid var(--rh-line); border-radius: 4px; font-size: 20px; line-height: 1; color: var(--rh-ink); } .rh-summary__body { display: block; } .rh-checkout-foot { background: var(--rh-ink); color: rgba(255,255,255,.62); } .rh-checkout-foot .rh-wrap { padding-top: 38px !important; padding-bottom: 38px !important; text-align: center; } .rh-checkout-foot__disclaimer { font-size: 12px; line-height: 1.6; margin: 0 0 8px; } .rh-checkout-foot__copy { font-size: 12px; margin: 0; color: rgba(255,255,255,.45); } /* restore left/right breathing room on phone */ /* ---- Inner-page hero (search / about): full-bleed image, scrim, nav floats over it ---- */ .rh-pagehero { position: relative; margin-top: -96px; padding: 150px 0 58px; color: #fff; background: var(--rh-slate); overflow: hidden; z-index: 1; } .rh-pagehero::before { content: ''; position: absolute; inset: 0; z-index: 0; background: center / cover no-repeat; } /* photo layer (set per variant); fades in on load */ .rh-pagehero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(47,51,56,.82) 0%, rgba(47,51,56,.6) 100%); } /* dark scrim over the photo */ /* Photo heroes show the brand-slate base on first paint, then fade the photo AND its scrim in together once the image has fully downloaded (the preloader 's native onload adds .is-bg-loaded). Scoped to --has-photo so image-less heroes keep their scrim from the start. */ .rh-pagehero--has-photo::before, .rh-pagehero--has-photo::after { opacity: 0; transition: opacity .6s ease; } .rh-pagehero--has-photo.is-bg-loaded::before, .rh-pagehero--has-photo.is-bg-loaded::after { opacity: 1; } .rh-pagehero__preload { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .rh-pagehero--has-photo::before, .rh-pagehero--has-photo::after { transition: none; } } .rh-pagehero > .rh-wrap { position: relative; z-index: 2; } .rh-pagehero .rh-breadcrumb { padding: 0 0 16px; color: rgba(255,255,255,.72); } .rh-pagehero .rh-breadcrumb b { color: #fff; } .rh-pagehero .rh-eyebrow { color: rgba(255,255,255,.78); text-shadow: 0 1px 8px rgba(0,0,0,.4); } .rh-pagehero .rh-h1 { color: #fff; margin: 0 0 14px; font-size: clamp(34px, 4.2vw, 52px); text-shadow: 0 2px 16px rgba(0,0,0,.4); } .rh-pagehero__q { color: var(--rh-yellow); } /* the searched term, highlighted in the title */ .rh-pagehero__sub { font-size: 18px; color: rgba(255,255,255,.85); max-width: 58ch; margin: 0; line-height: 1.55; text-shadow: 0 1px 10px rgba(0,0,0,.4); } .rh-pagehero--search::before { background-image: url('../img/search-hero-latest.jpg'); background-position: center 70%; } .rh-pagehero--about::before { background-image: url('/wp-content/uploads/2026/06/a-family-business-you-can-trust.jpg'); } .rh-pagehero--howitworks::before { background-image: url('/wp-content/uploads/2026/06/london-scene-green-repositioned.jpg'); } .rh-pagehero--sell::before { background-image: url('/wp-content/uploads/2026/06/family-estate-sporty-yellow.jpg'); } .rh-pagehero--contact::before { background-image: url('/wp-content/uploads/2026/06/riverside-parked.jpg'); } .rh-pagehero--post::before { background-image: var(--rh-hero-photo); } /* single post: the featured image */ /* Standard page heroes: one consistent minimum height across the site, content vertically centred (taller content just grows the hero). */ @media (min-width: 769px) { .rh-pagehero { min-height: 440px; display: flex; align-items: center; padding-top: 110px; padding-bottom: 48px; } /* Browse/results hero: shorter so the results show sooner (the min-height, not the padding, drives the height). Only the /plates search template adds --browse; /plate-finder reuses --search purely for the hero image and so keeps the standard page-hero padding. */ .rh-pagehero--browse { min-height: 340px; padding-bottom: 28px; } .rh-pagehero > .rh-wrap { width: 100%; } } /* Load-in: the copy nudges in (the homepage uses .rh-hero, so it's unaffected). The photo fades in on actual image load instead – see .rh-pagehero--has-photo above. Motion-gated. */ @media (prefers-reduced-motion: no-preference) { .rh-pagehero .rh-breadcrumb, .rh-pagehero .rh-eyebrow, .rh-pagehero .rh-h1, .rh-pagehero__sub { animation: rh-nudge-soft .7s cubic-bezier(.22, 1, .36, 1) backwards; } .rh-pagehero .rh-breadcrumb { animation-delay: .05s; } .rh-pagehero .rh-eyebrow { animation-delay: .11s; } .rh-pagehero .rh-h1 { animation-delay: .17s; } .rh-pagehero__sub { animation-delay: .24s; } } /* Subtle: copy eases in from the left on desktop, up on mobile (gentler than the homepage hero). */ @media (prefers-reduced-motion: no-preference) and (max-width: 768px) { .rh-pagehero .rh-breadcrumb, .rh-pagehero .rh-eyebrow, .rh-pagehero .rh-h1, .rh-pagehero__sub { animation-name: rh-nudge-up-soft; } } @keyframes rh-nudge-soft { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } } @keyframes rh-nudge-up-soft { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* After an AJAX filter swap, the hero copy is replaced in place – don't re-run its load animation. */ body.rh-ajax .rh-pagehero .rh-breadcrumb, body.rh-ajax .rh-pagehero .rh-eyebrow, body.rh-ajax .rh-pagehero .rh-h1, body.rh-ajax .rh-pagehero__sub { animation: none; } /* Plate detail hero: the breadcrumb, the car+plate stage, the meta line and the floating buy card ease in on load – the same soft fade/nudge as the page heroes, staggered for the two-column composition. Transforms only touch wrapper elements, so the absolutely-placed plate overlay and card keep their position. Motion-gated. */ @media (prefers-reduced-motion: no-preference) { .rh-platehero .rh-breadcrumb { animation: rh-nudge-soft .7s cubic-bezier(.22, 1, .36, 1) .05s backwards; } .rh-platehero__stage, .rh-platehero__meta, .rh-platetop__cardwrap .rh-buy { animation: rh-nudge-up-soft .8s cubic-bezier(.22, 1, .36, 1) backwards; } .rh-platehero__stage { animation-delay: .12s; } .rh-platetop__cardwrap .rh-buy { animation-delay: .20s; } .rh-platehero__meta { animation-delay: .30s; } } /* ---- Search-again box (under the results) ---- */ .rh-searchagain { background: var(--rh-ink); color: #fff; border-radius: 4px; padding: 48px 40px; text-align: center; } .rh-searchagain .rh-h2 { color: #fff; } .rh-searchagain .rh-lead { color: rgba(255,255,255,.74); max-width: 46ch; margin-left: auto; margin-right: auto; } .rh-searchagain .rh-search { margin: 0 auto; max-width: 460px; } .rh-searchagain__alt { font-size: 14px; color: rgba(255,255,255,.6); margin: 16px 0 0; } .rh-searchagain__alt .hl { color: var(--rh-coral); font-weight: 600; } /* ---- About page ---- */ .rh-about-story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } /* Our story: isolated car cut-out (no background) so it doesn't clash with the full-width hero */ .rh-about-story__car { position: relative; align-self: center; max-width: 100%; margin: 0 auto; } .rh-about-story__car .rh-platecars__car { position: static; width: 100%; height: auto; display: block; } .rh-about-story__car .rh-platecars__plate { left: 48.4%; top: 69.4%; width: 24%; aspect-ratio: 4.9 / 1; min-width: 0; padding: 0; font-size: 15px; letter-spacing: .5px; word-spacing: 4px; } .rh-about-story__car:before { content: ''; position: absolute; left: 50%; top: 95%; transform: translateX(-50%); width: 56%; height: 7%; background: radial-gradient(ellipse at center, rgba(15,18,22,.2) 0%, rgba(15,18,22,0) 72%); filter: blur(7px); } .rh-about-creds { max-width: 720px; margin: 28px 0 44px; } /* trust indicators as a row under the Our story block, divided by a thin line */ .rh-creds-row { max-width: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin: 44px 0 0; padding-top: 32px; border-top: 1px solid var(--rh-line); } .rh-creds-row li { border-bottom: 0; padding: 0 0 0 28px; font-size: 14.5px; } /* stats sit below the Our story block, divided by a thin line */ .rh-about-stats { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--rh-line); } /* Why choose us: image left, text right */ .rh-about-why { position: relative; overflow: hidden; } .rh-about-why__photo { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: url('/wp-content/uploads/2026/06/green-legacy-sports.jpg') center / cover no-repeat; } .rh-about-why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; position: relative; min-height: 300px; } .rh-about-why__spacer { display: none; } .rh-about-why__grid > div:last-child { grid-column: 2; padding-left: 24px; } /* text always in the right half, clear of the edge-to-edge photo */ .rh-about-why .rh-about-creds { max-width: none; margin: 22px 0; } .rh-about-why__points { list-style: none; margin: 4px 0 0; padding: 0; } .rh-about-why__points li { position: relative; padding: 0 0 14px 22px; margin: 0 0 14px; border-bottom: 1px solid var(--rh-line); font-size: 15px; color: var(--rh-muted); line-height: 1.55; } .rh-about-why__points li:before { content: ''; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; background: var(--rh-coral); } .rh-about-why__points li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .rh-about-why__points strong { color: var(--rh-ink); } .rh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .rh-stat { padding: 8px 0; } .rh-stat__num { display: block; font-family: var(--rh-display); font-weight: 700; font-size: 38px; letter-spacing: -1px; color: var(--rh-coral); line-height: 1.05; } .rh-stat__label { display: block; font-size: 14px; color: var(--rh-muted); margin-top: 8px; } /* ---- Plate detail: reg superimposed on a car + a static slider pager (look only, no action) ---- */ .rh-platecars { background: transparent; border: 0; padding: 0; box-shadow: none; } .rh-platecars__stage { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--rh-line); aspect-ratio: 1 / 1; background: radial-gradient(120% 95% at 50% 36%, #fbfcfc 0%, #e8edee 68%, #d7dee0 100%); } /* soft contact shadow so the car sits on the floor, not floating (paints under the car img) */ .rh-platecars__stage:before { content: ''; position: absolute; left: 50%; top: 80%; transform: translateX(-50%); width: 62%; height: 5.5%; background: radial-gradient(ellipse at center, rgba(15,18,22,.34) 0%, rgba(15,18,22,0) 72%); filter: blur(5px); pointer-events: none; } .rh-platecars__car { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } /* white front plate, sized to fill and seated in the bumper recess */ .rh-plate--white { background: #fff; color: #141414; } .rh-platecars__plate { position: absolute; left: 49.9%; top: 69.5%; transform: translate(-50%, -50%); font-size: 30px; padding: 5px 14px; min-width: 0; letter-spacing: .5px; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.22); } .rh-platecars__pager { display: flex; justify-content: center; gap: 9px; margin-top: 18px; } .rh-platecars__pager span { width: 9px; height: 9px; border-radius: 50%; background: var(--rh-line); } .rh-platecars__pager span.is-active { width: 24px; border-radius: 5px; background: var(--rh-coral); } /* ---- Plate detail: short full-width showroom band (nav over it); car on the left, the white price card overlapping its bottom edge and hanging below ---- */ .rh-platetop { position: relative; margin-top: -96px; } .rh-platehero { position: relative; padding: 112px 0 46px; color: #fff; z-index: 1; /* final grey studio backdrop (no photo – Dan's call 2026-06-05) */ background: linear-gradient(180deg, rgba(26,30,34,.42) 0%, rgba(26,30,34,.7) 100%), radial-gradient(115% 130% at 50% 10%, #4b525a 0%, #363c42 55%, #20252a 100%); } .rh-platehero > .rh-wrap { position: relative; } .rh-platehero .rh-breadcrumb { padding: 0; color: rgba(255,255,255,.7); } .rh-platehero .rh-breadcrumb b { color: #fff; } /* gap between the breadcrumb and the car; right column reserved for the card */ .rh-platehero__row { display: grid; grid-template-columns: 1fr 400px; gap: 48px; align-items: start; margin-top: 20px; } .rh-platehero__spacer { display: none; } .rh-platehero__media { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 600px; margin: 30px auto 0; } .rh-platehero__stage { position: relative; width: 100%; container-type: inline-size; } /* cqw lets the plate scale with the car */ .rh-platehero__stage .rh-platecars__car { position: static; display: block; width: 100%; height: auto; object-fit: unset; } .rh-platehero .rh-platecars__plate { width: 27%; aspect-ratio: 4.45 / 1; min-width: 0; font-size: 4.4cqw; padding: 1cqw 0 0; letter-spacing: .14cqw; word-spacing: .8cqw; border-radius: 3px; } /* fixed wide-plate proportion (a touch taller than a real plate); cqw font scales with the car; top padding centres the caps */ .rh-platehero__stage:before { content: ''; position: absolute; left: 50%; top: 96%; transform: translateX(-50%); width: 58%; height: 9%; background: radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 72%); filter: blur(7px); } .rh-platehero__meta { display: block; margin-top: 14px; color: var(--rh-yellow); font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; text-align: center; } .rh-platehero .rh-platecars__pager { margin-top: 12px; justify-content: center; } .rh-platehero .rh-platecars__pager span { background: rgba(255,255,255,.4); } .rh-platehero .rh-platecars__pager span.is-active { background: var(--rh-coral); } /* full-width light-silver band: 2nd car (yellow rear plate) + what's included, borderless */ .rh-platesilver { position: relative; background: var(--rh-paper); padding: 40px 0 46px; z-index: 1; } .rh-platesilver__incl > div { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.09); } .rh-platesilver__incl > div:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .rh-platesilver__incl .rh-h3 { margin-bottom: 4px; } .rh-platesilver__incl p { color: var(--rh-muted); margin: 0; font-size: 14.5px; } /* "A standout dateless registration" split: copy left, reversed car right */ .rh-platestory { display: grid; grid-template-columns: 60fr 40fr; gap: 48px; align-items: center; } .rh-platestory .rh-text:last-child { margin-bottom: 0; } .rh-platerev { position: relative; margin-top: 16px; container-type: inline-size; } /* cqw lets the plate scale with the car */ .rh-platerev__car { width: 100%; height: auto; display: block; } .rh-platerev__plate { position: absolute; left: 50%; top: 51.5%; transform: translate(-50%, -50%); width: 28%; aspect-ratio: 4.64 / 1; min-width: 0; font-size: 4.2cqw; padding: 0.9cqw 0 0; letter-spacing: .12cqw; word-spacing: .7cqw; border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 3px 5px -2px rgba(0,0,0,.4); } /* sized + positioned to the recess; cqw font fills it; top padding nudges caps to centre */ /* price card: top-aligned to the car, spanning down into the silver band, over the right column */ .rh-platetop__cardwrap { position: absolute; top: 150px; left: 0; right: 0; z-index: 4; pointer-events: none; } .rh-platetop__cardinner { display: flex; justify-content: flex-end; } .rh-platetop__cardwrap .rh-buy { width: 400px; pointer-events: auto; box-shadow: 0 28px 64px rgba(0,0,0,.4); } /* ===================== Responsive (<= 768px) ===================== */ @media (max-width: 768px) { /* ============================================================ MOBILE (Canvas simulator is container-scoped at 380px, so we target the .sim-mobile container rather than a media query) ============================================================ */ .rh-wrap, .rh-promo__inner { padding-left: 20px; padding-right: 20px; } .rh-header__nav { display: none; } .rh-header__menu { display: inline-flex; } .rh-hero__grid, .rh-steps, .rh-plate-grid, .rh-split, .rh-journal-grid, .rh-results, .rh-results-grid, .rh-detail, .rh-footer__grid { grid-template-columns: 1fr; gap: 22px; } .rh-hero { padding: 40px 0 48px; } .rh-section, .rh-cta { padding: 48px 0; } .rh-h1 { font-size: 34px; } /* Hero headline: shrink so each line holds its own row ("Your perfect plate." / "Made in heaven."). */ .rh-hero .rh-h1 { font-size: clamp(26px, 8vw, 34px); } .rh-h1__line { white-space: nowrap; } .rh-plate--xl { font-size: 38px; padding: 18px 24px; } .rh-btn-row .rh-btn { width: 100%; justify-content: center; } .rh-media { min-height: 240px; } .rh-filterbar { gap: 10px; flex-wrap: nowrap; align-items: stretch; } .rh-filterbar__spacer { display: none; } /* ---- Mobile pass: header + Modern full-bleed sections ---- */ /* The header CTA (Browse plates / Ask a question) becomes a bare icon beside the burger on phones — see the app.css tablet/mobile blocks. The nav→burger collapse happens at <=1160. */ .rh-header__menu { order: 3; } .rh-header__inner { padding-top: 16px; padding-bottom: 16px; } body[data-dir="modern"] .rh-header__logo { height: 26px; } /* a touch smaller on mobile */ /* Modern hero is pulled up behind the nav – give it enough top padding to clear the header on mobile */ body[data-dir="modern"] .rh-hero { /* fill the viewport and vertically centre the copy on mobile (desktop already does this at ≥769px) */ display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh; padding: 88px 0 64px; /* on mobile the text spans the full width, so the desktop directional gradient leaves copy over the bright side unreadable – use a full overlay across the whole hero */ background: linear-gradient(180deg, rgba(47,51,56,.74) 0%, rgba(47,51,56,.55) 100%), url('../img/luxury-saloon-hero4.jpg') 64% 54% / cover no-repeat; } /* as a flex child the wrap would shrink-wrap (its margin:0 auto) – force full width so copy lines up */ body[data-dir="modern"] .rh-hero > .rh-wrap { width: 100%; } /* Modern sell/about images are full-bleed absolute 50% on desktop – make them static stacked blocks on mobile */ body[data-dir="modern"] .rh-section--sell .rh-media, body[data-dir="modern"] .rh-section--about .rh-media { position: static; width: auto; min-height: 220px; border-radius: 8px; } body[data-dir="modern"] .rh-section--about .rh-split > div:last-child { grid-column: auto; padding-left: 0; } /* plate detail: the xl plate's 380px min-width (+ visual padding) blew the detail grid past the phone width */ .rh-detail { grid-template-columns: minmax(0, 1fr); } .rh-detail__visual { padding: 40px 18px; } .rh-plate--xl { min-width: 0; } /* ---- Mobile type scale ---- The simulator is a fixed-width frame, NOT a real viewport, so the clamp()/vw display sizes don't scale down on their own. Set explicit mobile sizes. */ .rh-h2 { font-size: 26px; line-height: 1.15; } .rh-h3 { font-size: 18px; } .rh-lead { font-size: 16px; } .rh-text { font-size: 15px; } .rh-eyebrow { font-size: 11px; } .rh-finder .rh-h2 { font-size: 24px; } .rh-buy__price { font-size: 32px; } .rh-buy__price-meta { font-size: 13px; } .rh-section__head { margin-bottom: 28px; } /* hero search: inline input + button gets cut off on mobile – stack the button below a full-width input */ .rh-search { flex-direction: column; align-items: stretch; gap: 6px; } .rh-search button { width: 100%; justify-content: center; padding: 13px 22px; } /* PLATES browse bar (mobile): tighter grey band, inline search + sort-icon row, Refine accordion */ .rh-plates-bar { padding: 12px 0; } .rh-filterbar .rh-search--compact { flex-direction: row; flex: 1; min-width: 0; max-width: none; } .rh-filterbar .rh-search--compact input { font-size: 17px; padding: 7px 12px; } /* a touch larger; also ≥16px stops iOS zoom-on-focus */ .rh-filterbar .rh-search--compact button { width: auto; padding: 0 16px; } .rh-sort { align-self: stretch; align-items: stretch; gap: 0; } .rh-sort__label { display: none; } .rh-sort select { -webkit-appearance: none; appearance: none; width: 46px; min-height: 40px; padding: 0; color: transparent; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23474c52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v16m0 0-3-3m3 3 3-3M16 20V4m0 0-3 3m3-3 3 3'/%3E%3C/svg%3E") center / 20px no-repeat; border: 1px solid var(--rh-line); border-radius: 8px; } /* Refine: less gap above, tighter interior */ .rh-results { padding-top: 8px; } .rh-filters { padding: 12px 16px; } .rh-filters__head { margin: 0; padding: 4px 0; cursor: pointer; } .rh-filters__plus { display: block; } .rh-filters__group { display: none; padding: 12px 0; } .rh-filters__toggle:checked ~ .rh-filters__group { display: block; } .rh-filters__group:first-of-type { margin-top: 8px; } /* small gap under the Refine header before the first divider line */ .rh-filters__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 8px; border-radius: 10px; background: var(--rh-slate); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; vertical-align: middle; } /* MOBILE: order summary becomes a static accordion at the top */ .rh-summary--accordion { position: static; padding: 0; margin-bottom: 26px; } .rh-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 0; padding: 16px 20px; } .rh-summary__head-right { display: inline-flex; align-items: center; gap: 12px; } .rh-summary__title { white-space: nowrap; font-size: 14px; letter-spacing: .3px; } .rh-summary__head-amount { white-space: nowrap; } .rh-summary__body { display: none; } /* collapsed: just the cost + plus */ .rh-checkout__main { order: 2; } .rh-checkout > .rh-summary--accordion { order: 1; flex-basis: auto; width: 100%; } /* ---- Mobile (build-out pages) ---- */ .rh-checkout { flex-direction: column; gap: 24px; } .rh-field-grid { grid-template-columns: 1fr; } .rh-form { padding-left: 20px; padding-right: 20px; } /* tighter side gutters on mobile (valuation / plate-finder / contact) */ .rh-subject-row.is-plate { grid-template-columns: 1fr; } /* stack subject + reg on mobile */ .rh-summary { position: static; } .rh-progress { gap: 4px; } .rh-progress__label { display: none; } .rh-progress__step:not(:last-child) { flex: 1; } .rh-article__standfirst { font-size: 18px; } .rh-article__body { font-size: 16px; } .rh-article__body h2 { font-size: 22px; } .rh-pullquote { font-size: 20px; } .rh-checkout-bar__secure span { display: none; } /* keep just the padlock on the right on phone */ .rh-checkout-bar__inner { padding-top: 20px !important; padding-bottom: 20px !important; } .rh-about-why { padding-top: 0; } .rh-about-why__photo { position: static; width: 100%; height: 240px; } .rh-about-why__grid { grid-template-columns: 1fr; padding-top: 30px; min-height: 0; } .rh-creds-row { grid-template-columns: 1fr; gap: 14px; } .rh-about-why__grid > div:last-child { grid-column: auto; padding-left: 0; } /* ---- Mobile (inner hero + about) ---- */ .rh-pagehero { padding: 116px 0 40px; } .rh-about-story { grid-template-columns: 1fr; gap: 24px; } .rh-stats { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .rh-searchagain { padding: 32px 20px; } /* hero plate scales with the car via cqw (see .rh-platehero .rh-platecars__plate) – no fixed mobile size */ /* mobile: flat dark band, everything stacks, card full width in flow */ .rh-platehero { padding: 100px 0 22px; background: linear-gradient(180deg, #3a4046 0%, #262b30 100%); } .rh-platehero__row { grid-template-columns: 1fr; margin-top: 12px; } .rh-platehero__media { max-width: 100%; padding: 0 28px; } /* breathe a little on mobile */ .rh-platesilver__incl { grid-template-columns: 1fr; gap: 22px; } .rh-platestory { grid-template-columns: 1fr; gap: 26px; } .rh-platetop__cardwrap { position: static; } .rh-platetop__cardinner { justify-content: center; } .rh-platetop__cardwrap .rh-buy { width: 100%; } /* mobile: pricing card sits flush on white, no border, no side margin */ .rh-platetop__cardinner { padding-left: 0; padding-right: 0; } body.design .rh-platetop__cardwrap .rh-wrap { padding-left: 0; padding-right: 0; } /* beat body.design .rh-wrap's 24px so the card goes full-bleed; its own 24px padding then aligns content with the header */ body[data-dir="modern"] .rh-buy { border: 0; border-radius: 0; box-shadow: none; padding-left: 24px; padding-right: 24px; } /* match the page gutter (.rh-wrap) so the card content lines up with other sections */ /* mobile order: car image, then sidebar card, then what's included */ .rh-platetop { display: flex; flex-direction: column; } .rh-platehero { order: 1; } .rh-platetop__cardwrap { order: 2; } .rh-platesilver { order: 3; } .rh-platehero__media { margin-top: 16px; } .rh-buy .rh-trust-row--primary { white-space: normal; } } /* ---- Blog: index card grid + single-post prose ---- */ .rh-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; } .rh-blog-card { background: #fff; border: 1px solid var(--rh-line); border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .rh-blog-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } .rh-blog-card__media { aspect-ratio: 16 / 9; background: var(--rh-silver, #e1e9ea); overflow: hidden; } .rh-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .rh-blog-card__body { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; flex: 1; } .rh-blog-card__date { font-size: 13px; color: var(--rh-accent); font-weight: 600; } .rh-blog-card__title { font-family: var(--rh-display); font-size: 20px; line-height: 1.3; margin: 0; color: var(--rh-ink); } .rh-blog-card__excerpt { font-size: 15px; line-height: 1.6; color: var(--rh-muted); margin: 0; } .rh-blog-card__more { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--rh-accent); } @media (hover: hover) { .rh-blog-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(47,51,56,.12); border-color: transparent; } } /* Single post: narrow, readable prose column */ body[data-dir="modern"] .rh-post__wrap { max-width: 760px; } .rh-prose > * + * { margin-top: 1.1em; } .rh-prose h2 { font-family: var(--rh-display); font-size: 25px; line-height: 1.25; color: var(--rh-ink); margin-top: 1.6em; } .rh-prose h3 { font-size: 20px; color: var(--rh-ink); margin-top: 1.4em; } .rh-prose ul, .rh-prose ol { padding-left: 1.3em; } .rh-prose li + li { margin-top: .4em; } .rh-prose a { color: var(--rh-accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); } .rh-prose a:hover { border-bottom-color: currentColor; } /* "Wide width" images (e.g. blog infographics) break out beyond the 720px reading column, centred. */ .rh-prose .alignwide { display: block; width: min(900px, 92vw); max-width: none; margin: 2.2em 0 2.2em 50%; transform: translateX(-50%); } .rh-prose .alignwide img { display: block; width: 100%; height: auto; } /* Share buttons at the foot of a post */ .rh-share { margin: 44px 0 8px; padding-top: 24px; border-top: 1px solid var(--rh-line); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .rh-share__label { font-family: var(--rh-display); font-weight: 600; font-size: 14px; color: var(--rh-muted); } .rh-share__row { display: flex; gap: 10px; } .rh-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--rh-paper); color: var(--rh-slate); border: 1px solid var(--rh-line); transition: background .2s ease, color .2s ease, transform .15s ease; } .rh-share__btn:hover { background: var(--rh-slate); color: #fff; transform: translateY(-2px); } .rh-post__back { margin-top: 36px; } .rh-post__back a { color: var(--rh-muted); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); transition: color .2s ease, border-color .2s ease; } .rh-post__back a:hover { color: var(--rh-accent); border-bottom-color: currentColor; } /* Blog pagination */ .rh-pagination { margin-top: 40px; } .rh-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .rh-pagination a, .rh-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--rh-line); border-radius: 8px; text-decoration: none; color: var(--rh-ink); font-weight: 600; } .rh-pagination .current { background: var(--rh-accent); border-color: var(--rh-accent); color: var(--rh-ink); } .rh-pagination a:hover { border-color: var(--rh-accent); color: var(--rh-accent); }