/* ========================================================================== v12: SCOPE FIX. Two rules in v11 were written for the homepage only but were scoped to body.rv-petrol, which is now applied SITEWIDE by snippet 19. They therefore hid the real footer, the page title and the breadcrumb on every page except the homepage. Both are now scoped to body.rv-petrol.home. Filename is versioned because LiteSpeed strips ?ver= - editing in place does nothing. ========================================================================== */ /* Scoped to body.rv-petrol - added by the enqueue snippet to the preview homepage and every guide page. To ship sitewide, add the class to unconditionally instead of removing these selectors. */ /* ========================================================================== Ransack Viking - FORGED PETROL : homepage v2 Ten sections, ten different layout families. Ground rhythm alternates petrol / white / #F2F5F4 so no two adjacent sections share a background. Signature moves used deliberately: - hero photograph bleeds past the right viewport edge - one enormous real number (2,508) against small supporting type - staggered category grid with offset tiles, never an even bento - the forge photograph overlaps the section boundary above it - one featured piece at dramatic scale against everything else - a lead pull-quote twice the size of its two supporting quotes Palette is locked to the Petrol document: #062930, #FFFFFF, #F2F5F4, bone #EDEAE2, ink #1A1F1E. No gold, no ember, no gradient. ========================================================================== */ .rv2 { --pet: #062930; --pet-lift: #0A3A44; --white: #FFFFFF; --mist: #F2F5F4; --bone: #EDEAE2; --bone-mut: #B9C4C2; --ink: #1A1F1E; --ink-soft: #4A5654; --muted: #5F6B69; --rule: rgba(6,41,48,0.14); --rule-b: rgba(237,234,226,0.22); --disp: "Cinzel", Georgia, serif; --lab: hkgroteskpro, Arial, Helvetica, sans-serif; --body: "Jost", Arial, sans-serif; --shell: min(1280px, 100% - 64px); --r: 8px; background: var(--white); color: var(--ink); overflow-x: clip; } .rv2 *, .rv2 *::before, .rv2 *::after { box-sizing: border-box; } .rv2-wrap { width: var(--shell); margin-inline: auto; } .rv2-wrap--bleed { width: min(1280px, 100% - 24px); } /* --- Shared type --------------------------------------------------------- */ html body .rv2 .rv2-h2 { font-family: var(--disp) !important; font-weight: 600 !important; font-size: clamp(30px, 4vw, 50px) !important; line-height: 1.08 !important; letter-spacing: 0.015em !important; color: var(--ink) !important; margin: 0 !important; text-transform: none !important; } html body .rv2 .rv2-h2--bone { color: var(--bone) !important; } .rv2-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 22px; margin-bottom: 34px; border-bottom: 1px solid var(--rule); } .rv2-head__link { font-family: var(--lab); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--pet); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--rule); padding-bottom: 2px; } .rv2-head__link:hover { color: var(--pet-lift); border-color: var(--pet); } /* --- Buttons ------------------------------------------------------------- */ html body .rv2 .rv2-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 32px; font-family: var(--lab) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; text-transform: uppercase !important; text-decoration: none; border-radius: var(--r) !important; cursor: pointer; box-shadow: none !important; transition: background-color 240ms cubic-bezier(.22,.61,.36,1), color 240ms cubic-bezier(.22,.61,.36,1), border-color 240ms cubic-bezier(.22,.61,.36,1); } html body .rv2 .rv2-btn--solid { background: var(--pet) !important; color: var(--bone) !important; border: 1px solid var(--pet) !important; } html body .rv2 .rv2-btn--solid:hover { background: var(--pet-lift) !important; border-color: var(--pet-lift) !important; } html body .rv2 .rv2-btn--bone { background: var(--bone) !important; color: var(--pet) !important; border: 1px solid var(--bone) !important; } html body .rv2 .rv2-btn--bone:hover { background: var(--white) !important; } html body .rv2 .rv2-btn--line { background: transparent !important; color: var(--bone) !important; border: 1px solid var(--rule-b) !important; } html body .rv2 .rv2-btn--line:hover { border-color: var(--bone) !important; } .rv2 .rv2-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .rv2-cta { display: flex; flex-wrap: wrap; gap: 12px; } .rv2-cta--center { justify-content: center; } /* --- 1. HERO ------------------------------------------------------------- */ .rv2-hero { display: grid; grid-template-columns: 46% 54%; min-height: clamp(560px, 82vh, 860px); background: var(--pet); position: relative; } .rv2-hero__panel { display: flex; align-items: center; padding: 64px 0 64px calc((100vw - var(--shell)) / 2); } .rv2-hero__inner { max-width: 560px; padding-right: 48px; } html body .rv2 .rv2-hero__title { font-family: var(--disp) !important; font-weight: 600 !important; font-size: clamp(46px, 5.6vw, 86px) !important; line-height: 1.02 !important; letter-spacing: 0.012em !important; color: var(--bone) !important; margin: 0 0 26px !important; text-transform: none !important; } /* Emphasis by tone within the same family - never a second font. */ .rv2-hero__title span { color: var(--bone-mut); } .rv2-hero__sub { font-family: var(--body); font-size: 17px; line-height: 1.7; color: var(--bone-mut); margin: 0 0 34px; max-width: 44ch; } /* The rating, set large. Real figure, given real weight. */ .rv2-hero__proof { display: flex; align-items: center; gap: 16px; padding: 20px 0 28px; margin-bottom: 8px; border-top: 1px solid var(--rule-b); border-bottom: 1px solid var(--rule-b); } .rv2-hero__score { font-family: var(--disp); font-weight: 600; font-size: 46px; line-height: 1; color: var(--bone); font-variant-numeric: tabular-nums; } .rv2-hero__scoretext { font-family: var(--lab); font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--bone-mut); line-height: 1.7; } .rv2-hero__scoretext strong { color: var(--bone); font-weight: 700; } /* Photograph runs to the right viewport edge - it does not sit in a box. */ .rv2-hero__media { position: relative; overflow: hidden; } .rv2-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0.42; filter: grayscale(0.3); } /* Petrol wash so the join to the panel is seamless, not a hard seam. */ .rv2-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--pet) 0%, rgba(6,41,48,0.55) 34%, rgba(6,41,48,0.15) 100%); } /* --- 2. PROOF ------------------------------------------------------------ */ .rv2-proof { background: var(--white); padding-block: clamp(56px, 7vw, 96px); } .rv2-proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .rv2-proof__num { display: block; font-family: var(--disp); font-weight: 600; font-size: clamp(76px, 12vw, 168px); line-height: 0.86; letter-spacing: -0.01em; color: var(--pet); font-variant-numeric: tabular-nums; } .rv2-proof__cap { display: block; margin-top: 18px; max-width: 34ch; font-family: var(--body); font-size: 16px; line-height: 1.65; color: var(--ink-soft); } .rv2-proof__list { list-style: none; margin: 0; padding: 0; } .rv2-proof__list li { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 20px 0; border-top: 1px solid var(--rule); } .rv2-proof__list li:last-child { border-bottom: 1px solid var(--rule); } .rv2-proof__list strong { font-family: var(--disp); font-weight: 600; font-size: 24px; color: var(--pet); } .rv2-proof__list span { font-family: var(--body); font-size: 15px; color: var(--muted); } /* --- 3. ARMOURY - staggered, never an even grid --------------------------- */ .rv2-armoury { background: var(--mist); padding-block: clamp(56px, 7vw, 96px); } .rv2-stagger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } .rv2-cat { position: relative; display: block; overflow: hidden; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); aspect-ratio: 4 / 3; text-decoration: none; transition: border-color 240ms ease, transform 320ms cubic-bezier(.22,.61,.36,1); } .rv2-cat--tall { aspect-ratio: 3 / 4; } .rv2-cat--drop { margin-top: clamp(20px, 4vw, 56px); } /* the stagger */ .rv2-cat:hover { border-color: var(--pet); transform: translateY(-4px); } .rv2-cat:focus-visible { outline: 2px solid var(--pet); outline-offset: 3px; } .rv2-cat img { width: 100%; height: 100%; object-fit: contain; padding: 12%; transition: transform 520ms cubic-bezier(.22,.61,.36,1); } .rv2-cat:hover img { transform: scale(1.05); } .rv2-cat__meta { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 20px; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 46%); } .rv2-cat__name { font-family: var(--disp); font-weight: 600; font-size: clamp(16px, 1.5vw, 21px); color: var(--ink); line-height: 1.15; } .rv2-cat__n { font-family: var(--lab); font-size: 12px; letter-spacing: 1px; color: var(--muted); font-variant-numeric: tabular-nums; } /* --- 4. THE FORGE - photograph overlaps the boundary above ---------------- */ .rv2-forge { background: var(--pet); display: grid; grid-template-columns: 52% 48%; align-items: center; gap: clamp(28px, 5vw, 72px); padding: 0 calc((100vw - var(--shell)) / 2) clamp(56px, 7vw, 104px) 0; position: relative; } .rv2-forge__media { margin-top: clamp(-64px, -5vw, -32px); align-self: start; } .rv2-forge__media img { display: block; width: 100%; height: auto; border-radius: 0 var(--r) var(--r) 0; } .rv2-forge__body { padding-top: clamp(48px, 6vw, 88px); max-width: 52ch; } .rv2-forge__body p { font-family: var(--body); font-size: 16px; line-height: 1.75; color: var(--bone-mut); margin: 22px 0 0; } .rv2-forge__body .rv2-btn { margin-top: 34px; } /* --- 5. PROCESS - rules and type only, no boxes --------------------------- */ .rv2-process { background: var(--white); padding-block: clamp(48px, 6vw, 84px); } .rv2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .rv2-steps li { padding: 26px 26px 26px 0; border-top: 2px solid var(--pet); margin-right: 24px; } .rv2-steps__k { display: block; font-family: var(--disp); font-weight: 600; font-size: 21px; color: var(--ink); margin-bottom: 8px; } .rv2-steps__v { display: block; font-family: var(--body); font-size: 15px; line-height: 1.65; color: var(--muted); } /* --- 6. FEATURED - one piece, dramatic scale ------------------------------ */ .rv2-feature { background: var(--mist); padding-block: clamp(56px, 7vw, 100px); } .rv2-feature__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(28px, 5vw, 72px); align-items: center; width: var(--shell); margin-inline: auto; } .rv2-feature__media { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 5%; } .rv2-feature__media img { width: 100%; height: 100%; object-fit: contain; } .rv2-feature__eyebrow { font-family: var(--lab); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 14px; } html body .rv2 .rv2-feature__title { font-family: var(--disp) !important; font-weight: 600 !important; font-size: clamp(26px, 2.8vw, 38px) !important; line-height: 1.12 !important; color: var(--ink) !important; margin: 0 0 18px !important; } .rv2-feature__price { font-family: var(--disp); font-weight: 600; font-size: 34px; color: var(--pet); font-variant-numeric: tabular-nums; display: block; margin-bottom: 6px; } .rv2-feature__rating { font-family: var(--lab); font-size: 13px; color: var(--muted); display: block; margin-bottom: 28px; } /* --- 7. RAIL ------------------------------------------------------------- */ .rv2-rail-sec { background: var(--white); padding-block: clamp(56px, 7vw, 96px); } .rv2-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--pet) var(--rule); } .rv2-rail::-webkit-scrollbar { height: 5px; } .rv2-rail::-webkit-scrollbar-thumb { background: var(--pet); border-radius: 99px; } .rv2-rail::-webkit-scrollbar-track { background: var(--rule); } .rv2-pcard { scroll-snap-align: start; text-decoration: none; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; transition: border-color 240ms ease, transform 240ms cubic-bezier(.22,.61,.36,1); } .rv2-pcard:hover { border-color: var(--pet); transform: translateY(-3px); } .rv2-pcard:focus-visible { outline: 2px solid var(--pet); outline-offset: 3px; } .rv2-pcard__img { aspect-ratio: 1; background: var(--mist); display: grid; place-items: center; padding: 12px; } .rv2-pcard__img img { width: 100%; height: 100%; object-fit: contain; } .rv2-pcard__b { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .rv2-pcard__n { font-family: var(--lab); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv2-pcard__m { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .rv2-pcard__p { font-family: var(--disp); font-weight: 600; font-size: 19px; color: var(--pet); font-variant-numeric: tabular-nums; } .rv2-pcard__r { font-family: var(--lab); font-size: 12px; color: var(--muted); } /* --- 8. REVIEWS - one lead, two supporting -------------------------------- */ .rv2-reviews { background: var(--mist); padding-block: clamp(56px, 7vw, 96px); } .rv2-reviews__grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 20px; align-items: stretch; } .rv2-quote { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); padding: 32px 30px; margin: 0; display: flex; flex-direction: column; gap: 18px; } .rv2-quote blockquote { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.7; color: var(--ink-soft); } .rv2-quote--lead { justify-content: center; padding: clamp(34px, 4vw, 52px); } .rv2-quote--lead blockquote { font-family: var(--disp); font-weight: 600; font-size: clamp(21px, 2.1vw, 30px); line-height: 1.34; color: var(--ink); } .rv2-quote figcaption { font-family: var(--lab); font-size: 13px; font-weight: 700; color: var(--ink); margin-top: auto; } .rv2-quote figcaption span { display: block; font-weight: 400; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); margin-top: 4px; } .rv2-quote__side { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; } /* --- 9. ENGRAVING -------------------------------------------------------- */ .rv2-engrave { background: var(--white); padding-block: clamp(56px, 7vw, 96px); } .rv2-engrave__grid { display: grid; grid-template-columns: 1fr 0.5fr; gap: clamp(28px, 5vw, 64px); align-items: center; border-top: 1px solid var(--rule); padding-top: clamp(36px, 4vw, 60px); } .rv2-engrave__body p { font-family: var(--body); font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 20px 0 30px; max-width: 54ch; } .rv2-engrave__mark { font-family: var(--disp); font-size: clamp(90px, 12vw, 170px); line-height: 1; color: var(--pet); opacity: 0.10; text-align: right; user-select: none; } /* --- 10. CLOSE ----------------------------------------------------------- */ .rv2-close { background: var(--pet); padding-block: clamp(64px, 9vw, 128px); text-align: center; } html body .rv2 .rv2-close__title { font-family: var(--disp) !important; font-weight: 600 !important; font-size: clamp(34px, 5.4vw, 76px) !important; line-height: 1.04 !important; color: var(--bone) !important; margin: 0 0 34px !important; } /* --- Sticky -------------------------------------------------------------- */ .rv2-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 12px 20px; background: var(--pet); border-top: 1px solid var(--rule-b); transform: translateY(110%); transition: transform 280ms cubic-bezier(.22,.61,.36,1); } .rv2-sticky span { font-family: var(--body); font-size: 14px; color: var(--bone-mut); } .rv2-sticky .rv2-btn { min-height: 44px; padding: 0 24px; } @supports (animation-timeline: scroll()) { .rv2-sticky { animation: rv2-up linear both; animation-timeline: scroll(root block); animation-range: 75vh 95vh; } @keyframes rv2-up { to { transform: translateY(0); } } } @supports not (animation-timeline: scroll()) { .rv2-sticky { transform: none; } } /* --- Responsive: every multi-column layout declares its collapse ---------- */ @media (max-width: 1024px) { .rv2 { --shell: min(1280px, 100% - 40px); } .rv2-hero { grid-template-columns: 1fr; min-height: 0; } .rv2-hero__panel { padding: 56px 20px 44px; } .rv2-hero__inner { padding-right: 0; max-width: none; } .rv2-hero__media { position: relative; height: 300px; } .rv2-hero__media::after { background: linear-gradient(180deg, var(--pet) 0%, rgba(6,41,48,0.35) 60%); } .rv2-proof__grid { grid-template-columns: 1fr; } .rv2-stagger { grid-template-columns: repeat(2, 1fr); } .rv2-cat--drop { margin-top: 0; } .rv2-forge { grid-template-columns: 1fr; padding: 0 0 56px; } .rv2-forge__media { margin-top: 0; } .rv2-forge__media img { border-radius: 0; } .rv2-forge__body { padding: 40px 20px 0; max-width: none; } .rv2-steps { grid-template-columns: repeat(2, 1fr); } .rv2-feature__grid { grid-template-columns: 1fr; } .rv2-reviews__grid { grid-template-columns: 1fr; } .rv2-engrave__grid { grid-template-columns: 1fr; } .rv2-engrave__mark { display: none; } } @media (max-width: 640px) { .rv2 { --shell: min(1280px, 100% - 32px); } .rv2-stagger { grid-template-columns: 1fr; } .rv2-cat, .rv2-cat--tall { aspect-ratio: 16 / 10; } .rv2-steps { grid-template-columns: 1fr; } .rv2-steps li { margin-right: 0; } .rv2-btn { width: 100%; } .rv2-cta { flex-direction: column; align-items: stretch; } .rv2-sticky { flex-direction: column; gap: 10px; } .rv2-sticky span { font-size: 12px; text-align: center; } .rv2-quote__side { grid-template-rows: auto auto; } } /* --- Motion 0.2: fade only, no travel. Content visible without it. -------- */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .rv2-proof__grid, .rv2-stagger, .rv2-forge__body, .rv2-steps, .rv2-feature__grid, .rv2-reviews__grid, .rv2-engrave__grid { animation: rv2-fade linear both; animation-timeline: view(); animation-range: entry 8% cover 20%; } @keyframes rv2-fade { from { opacity: 0; } to { opacity: 1; } } } } /* ========================================================================== v2.2 corrections ========================================================================== */ /* 1. Break the Woodmart 1320px cage so full-bleed sections can actually reach the viewport edge. Inner width is handled by --shell, so content still lines up; only the grounds and photographs run edge to edge. Uses percentage widths, not 100vw, so the scrollbar cannot cause horizontal overflow. */ body.rv-petrol.home .wd-content-layout.container, body.rv-petrol.home main.wd-content-layout { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } body.rv-petrol.home .wd-content-area, body.rv-petrol.home .site-content, body.rv-petrol.home .entry-content, body.rv-petrol .elementor-11544 { width: 100% !important; max-width: 100% !important; } /* 2. Let the hero photograph actually be seen. It was at 42% opacity beneath a gradient that is opaque at its left edge - between them the image was almost entirely buried. Now the photograph carries full weight and only the join to the text panel is washed, so the type stays legible. */ .rv2 .rv2-hero__media img { opacity: 1; filter: none; } .rv2 .rv2-hero__media::after { background: linear-gradient(90deg, var(--pet) 0%, rgba(6,41,48,0.78) 16%, rgba(6,41,48,0.34) 48%, rgba(6,41,48,0.10) 100%); } /* 3. Full-bleed grounds now that the cage is gone. */ .rv2-hero, .rv2-forge, .rv2-close { width: 100%; } @media (max-width: 1024px) { .rv2 .rv2-hero__media::after { background: linear-gradient(180deg, var(--pet) 0%, rgba(6,41,48,0.45) 45%, rgba(6,41,48,0.12) 100%); } } /* --- v2.3: a petrol button may never sit on a petrol ground ------------- */ html body .rv2 .rv2-hero .rv2-btn--solid, html body .rv2 .rv2-forge .rv2-btn--solid, html body .rv2 .rv2-close .rv2-btn--solid { background: var(--bone) !important; color: var(--pet) !important; border-color: var(--bone) !important; } /* Woodmart's header overlaps the top of the page; give the hero clearance so the headline is never hidden behind it. */ .rv2-hero__panel { padding-top: clamp(96px, 12vh, 150px); } @media (max-width: 1024px) { .rv2-hero__panel { padding-top: clamp(104px, 16vh, 160px); } } /* Woodmart's mobile bottom bar would sit on top of the sticky CTA. */ @media (max-width: 768px) { .rv2-sticky { bottom: 62px; } } /* --- v2.4: a homepage carries no page-title bar or breadcrumb ----------- */ body.rv-petrol.home .page-title, body.rv-petrol.home .wd-page-title, body.rv-petrol.home .wd-breadcrumbs, body.rv-petrol.home .woocommerce-breadcrumb, body.rv-petrol.home .wd-nav-product-cat, body.rv-petrol.home .entry-header, body.rv-petrol.home .entry-title { display: none !important; } /* Kill the residual white strip the title block leaves behind, so the masthead runs straight into the hero. */ body.rv-petrol.home .wd-content-layout, body.rv-petrol.home .site-content, body.rv-petrol.home .wd-content-area { padding-top: 0 !important; margin-top: 0 !important; } body.rv-petrol.home .main-page-wrapper { padding-top: 0 !important; } /* ========================================================================== v3 - new blocks ========================================================================== */ /* --- Ground rhythm ------------------------------------------------------- */ .rv2-badges { background: var(--white); } .rv2-proof { background: var(--mist); } .rv2-armoury { background: var(--white); } .rv2-steel { background: var(--pet); } .rv2-use { background: var(--white); } .rv2-rail-sec { background: var(--white); } .rv2-reviews { background: var(--mist); } .rv2-engrave { background: var(--white); } /* --- 2. TRUST BADGES ------------------------------------------------------ */ .rv2-badges { padding-block: clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--rule); } .rv2-badges__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .rv2-badges__row li { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 6px 18px; border-left: 1px solid var(--rule); } .rv2-badges__row li:first-child { border-left: 0; } .rv2-badges__row svg { width: 26px; height: 26px; color: var(--pet); margin-bottom: 4px; } .rv2-badges__k { font-family: var(--lab); font-size: 13px; font-weight: 700; letter-spacing: 0.4px; color: var(--ink); } .rv2-badges__v { font-family: var(--body); font-size: 13px; color: var(--muted); line-height: 1.5; } /* --- 4. ARMOURY - aligned grid, every tile identical ---------------------- */ .rv2-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rv2 .rv2-grid .rv2-cat { display: flex; flex-direction: column; aspect-ratio: auto; margin-top: 0; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; text-decoration: none; } .rv2-cat__img { display: block; aspect-ratio: 4 / 3; background: var(--mist); display: grid; place-items: center; padding: 8%; } .rv2-cat__img img { width: 100%; height: 100%; object-fit: contain; padding: 0; transition: transform 520ms cubic-bezier(.22,.61,.36,1); } .rv2 .rv2-grid .rv2-cat:hover .rv2-cat__img img { transform: scale(1.05); } .rv2 .rv2-grid .rv2-cat__meta { position: static; background: none; padding: 16px 18px 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule); } /* --- 5. TWO STEELS -------------------------------------------------------- */ .rv2-steel { padding-block: clamp(56px, 7vw, 100px); } .rv2-steel__lede { font-family: var(--body); font-size: 17px; line-height: 1.7; color: var(--bone-mut); max-width: 56ch; margin: 20px 0 42px; } .rv2-steel__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); } .rv2-steel__col { border-top: 2px solid var(--bone); padding-top: 26px; } .rv2 .rv2-steel__col h3 { font-family: var(--disp) !important; font-weight: 600 !important; font-size: clamp(24px, 2.6vw, 34px) !important; line-height: 1.1 !important; color: var(--bone) !important; margin: 0 0 16px !important; } .rv2-steel__col p { font-family: var(--body); font-size: 16px; line-height: 1.75; color: var(--bone-mut); margin: 0 0 16px; } .rv2-steel__for { color: var(--bone) !important; } .rv2-steel__link { display: inline-block; margin-top: 8px; font-family: var(--lab); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; color: var(--bone); text-decoration: none; border-bottom: 1px solid var(--rule-b); padding-bottom: 3px; } .rv2-steel__link:hover { border-color: var(--bone); } /* --- 6. CHOOSE BY USE ----------------------------------------------------- */ .rv2-use { padding-block: clamp(56px, 7vw, 96px); } .rv2-use__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .rv2-use__item { display: grid; align-content: start; gap: 10px; padding: 28px 26px 28px 0; margin-right: 24px; border-top: 2px solid var(--pet); text-decoration: none; transition: border-color 240ms ease; } .rv2-use__item:hover { border-top-color: var(--pet-lift); } .rv2-use__item:hover .rv2-use__k { color: var(--pet); } .rv2-use__n { font-family: var(--lab); font-size: 12px; letter-spacing: 2px; color: var(--muted); font-variant-numeric: tabular-nums; } .rv2-use__k { font-family: var(--disp); font-weight: 600; font-size: 21px; color: var(--ink); line-height: 1.15; } .rv2-use__v { font-family: var(--body); font-size: 15px; line-height: 1.65; color: var(--muted); } /* --- 12. FOOTER ----------------------------------------------------------- */ .rv2-foot { background: #041D22; padding-block: clamp(48px, 6vw, 76px) 0; } .rv2-foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(28px, 4vw, 56px); padding-bottom: 48px; } .rv2 .rv2-foot__brand { font-family: var(--disp) !important; font-weight: 600 !important; font-size: 24px !important; color: var(--bone) !important; margin: 0 0 14px !important; } .rv2-foot__blurb { font-family: var(--body); font-size: 15px; line-height: 1.7; color: var(--bone-mut); margin: 0 0 20px; max-width: 40ch; } .rv2-foot__contact { display: block; font-family: var(--lab); font-size: 15px; font-weight: 600; color: var(--bone); text-decoration: none; margin-bottom: 6px; } .rv2-foot__contact:hover { color: #FFFFFF; text-decoration: underline; } .rv2 .rv2-foot__col h4 { font-family: var(--lab) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.6px !important; text-transform: uppercase !important; color: var(--bone) !important; margin: 0 0 18px !important; } .rv2-foot__col ul { list-style: none; margin: 0; padding: 0; } .rv2-foot__col li { margin-bottom: 11px; } .rv2-foot__col a { font-family: var(--body); font-size: 15px; color: var(--bone-mut); text-decoration: none; transition: color 200ms ease; } .rv2-foot__col a:hover { color: var(--bone); } .rv2-foot__bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 0; border-top: 1px solid var(--rule-b); flex-wrap: wrap; } .rv2-foot__copy, .rv2-foot__origin { font-family: var(--body); font-size: 13px; color: var(--bone-mut); display: inline-flex; align-items: center; gap: 8px; } /* The flag: small, and only here, at the very end of the page. */ .rv2-foot__flag { width: 18px; height: 18px; border-radius: 50%; display: inline-block; }/* REMOVED: the theme footer used to be hidden on the homepage here. This rule dates from when the designed petrol footer lived INSIDE the homepage's Elementor content - the theme's own footer was hidden so the two would not stack. The designed footer is now rendered AS the theme footer on every page, and the homepage's inline copy has been removed, so hiding .footer-container on .home hides the only footer there is. */ /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 1024px) { .rv2-badges__row { grid-template-columns: repeat(2, 1fr); } .rv2-badges__row li:nth-child(3) { border-left: 0; } .rv2-badges__row li:nth-child(n+3) { border-top: 1px solid var(--rule); padding-top: 22px; margin-top: 10px; } .rv2-grid { grid-template-columns: repeat(2, 1fr); } .rv2-steel__grid { grid-template-columns: 1fr; } .rv2-use__grid { grid-template-columns: repeat(2, 1fr); } .rv2-foot__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .rv2-badges__row { grid-template-columns: 1fr; } .rv2-badges__row li { border-left: 0; border-top: 1px solid var(--rule); padding: 18px 0; margin: 0; } .rv2-badges__row li:first-child { border-top: 0; } .rv2-grid { grid-template-columns: 1fr; } .rv2-use__grid { grid-template-columns: 1fr; } .rv2-use__item { margin-right: 0; } .rv2-foot__grid { grid-template-columns: 1fr; gap: 32px; } .rv2-foot__bar { flex-direction: column; align-items: flex-start; gap: 10px; } } /* --- v3.2: keep the sticky CTA clear of Woodmart's mobile bottom bar, which appears below 1024px, not 768px as first assumed. ---------------- */ @media (max-width: 1024px) { .rv2-sticky { bottom: 62px; } } /* Reserve room so the footer's last row is never sat on by the sticky. */ .rv2-foot { padding-bottom: 96px; } @media (max-width: 1024px) { .rv2-foot { padding-bottom: 150px; } } /* ========================================================================== v4 - Viking-first repositioning ========================================================================== */ /* Ground rhythm, revised for the new block order. */ .rv2-armoury { background: var(--mist); } .rv2-myth { background: var(--pet); } .rv2-use { background: var(--white); } .rv2-knives { background: var(--white); } .rv2-engrave { background: var(--mist); } /* --- THE OLD NAMES - Norse mythology, on petrol ------------------------- */ .rv2-myth { padding-block: clamp(56px, 7vw, 100px); } .rv2-myth__lede { font-family: var(--body); font-size: 17px; line-height: 1.7; color: var(--bone-mut); max-width: 62ch; margin: 20px 0 46px; } .rv2-myth__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(24px, 3vw, 48px); } .rv2-myth__item { display: grid; align-content: start; gap: 10px; padding: 26px 0 30px; text-decoration: none; border-top: 1px solid var(--rule-b); transition: border-color 240ms ease; } .rv2-myth__item:hover { border-top-color: var(--bone); } .rv2-myth__item:hover .rv2-myth__k { color: #FFFFFF; } .rv2-myth__item:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; } .rv2-myth__k { font-family: var(--disp); font-weight: 600; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.12; color: var(--bone); transition: color 200ms ease; } .rv2-myth__v { font-family: var(--body); font-size: 15px; line-height: 1.7; color: var(--bone-mut); max-width: 34ch; } /* --- AND THE KNIVES - the secondary 20%, deliberately quieter ----------- */ .rv2-knives { padding-block: clamp(48px, 6vw, 84px); } .rv2-knives__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 72px); align-items: start; border-top: 1px solid var(--rule); padding-top: clamp(34px, 4vw, 52px); } .rv2-knives__body p { font-family: var(--body); font-size: 16px; line-height: 1.75; color: var(--ink-soft); margin: 18px 0 0; max-width: 46ch; } .rv2-knives__links { display: grid; } .rv2-knives__links a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--rule); font-family: var(--lab); font-size: 16px; color: var(--ink); text-decoration: none; transition: color 200ms ease, padding-left 200ms ease; } .rv2-knives__links a:first-child { border-top: 1px solid var(--rule); } .rv2-knives__links a:hover { color: var(--pet); padding-left: 8px; } .rv2-knives__links a span:last-child { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } @media (max-width: 1024px) { .rv2-myth__grid { grid-template-columns: repeat(2, 1fr); } .rv2-knives__grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .rv2-myth__grid { grid-template-columns: 1fr; } .rv2-myth__v { max-width: none; } } /* ========================================================================== v5 - Norse ornament Symbols are brand, not decoration for its own sake: each one names a real product family. Drawn as SVG so they render identically everywhere. ========================================================================== */ .rv2-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* --- Symbols inside the mythology block --------------------------------- */ .rv2-myth__sym { display: block; width: 46px; height: 46px; margin-bottom: 4px; color: var(--bone); opacity: 0.85; transition: opacity 240ms ease, transform 320ms cubic-bezier(.22,.61,.36,1); } .rv2-myth__sym svg { width: 100%; height: 100%; display: block; } .rv2-myth__item:hover .rv2-myth__sym { opacity: 1; transform: translateY(-2px); } /* --- Rune band divider --------------------------------------------------- */ .rv2-runeband { background: var(--white); padding: 26px 0; display: flex; justify-content: center; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .rv2-runeband svg { width: min(560px, 80%); height: 34px; color: var(--pet); opacity: 0.42; } /* The band before the closing block sits between two petrol grounds. */ .rv2-runeband + .rv2-close, .rv2-close + .rv2-runeband { border: 0; } /* --- Watermark stave behind the closing call to action ------------------- */ .rv2-close { position: relative; overflow: hidden; } .rv2-close__mark { position: absolute; right: -6%; top: 50%; transform: translateY(-50%); width: min(420px, 46vw); height: min(420px, 46vw); color: var(--bone); opacity: 0.06; pointer-events: none; } .rv2-close__mark svg { width: 100%; height: 100%; display: block; } .rv2-close .rv2-wrap { position: relative; z-index: 1; } /* --- Engraving mark is now a drawn knot, not a font glyph ---------------- */ .rv2-engrave__mark { display: block; width: min(220px, 100%); height: auto; margin-left: auto; color: var(--pet); opacity: 0.16; font-size: 0; } .rv2-engrave__mark svg { width: 100%; height: auto; display: block; } /* --- A small stave marks each section heading --------------------------- */ .rv2-armoury .rv2-h2::before, .rv2-use .rv2-h2::before, .rv2-knives .rv2-h2::before { background: var(--rule); } @media (max-width: 640px) { .rv2-myth__sym { width: 38px; height: 38px; } .rv2-runeband { padding: 20px 0; } .rv2-runeband svg { width: 88%; height: 26px; } .rv2-close__mark { opacity: 0.05; right: -18%; } } /* v5.1: symbols were reading thin beside the display type. */ .rv2-myth__sym { width: 54px; height: 54px; } @media (max-width: 640px) { .rv2-myth__sym { width: 44px; height: 44px; } } /* ========================================================================== VIDEO REVIEWS Measured against the reference block: 9:16 cards (ratio 0.555), 24px radius, 16px gap, reviewer name 18px regular. Cards are equal-size in a snap rail rather than a scaled coverflow - that centring effect needs JS, and a plain rail is both lighter and easier to use with a keyboard. ========================================================================== */ .rv2-videos { background: var(--pet); padding-block: clamp(48px, 6vw, 84px); } .rv2-videos .rv2-head { border-bottom-color: var(--rule-b); } .rv2-head__link--bone { color: var(--bone) !important; border-bottom-color: var(--rule-b) !important; } .rv2-head__link--bone:hover { border-bottom-color: var(--bone) !important; } .rv2-vidrail { display: grid; grid-auto-flow: column; grid-auto-columns: 275px; /* reference active-slide width */ gap: 16px; /* reference slide margin */ overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: thin; scrollbar-color: var(--bone-mut) rgba(237,234,226,0.16); } .rv2-vidrail::-webkit-scrollbar { height: 5px; } .rv2-vidrail::-webkit-scrollbar-thumb { background: var(--bone-mut); border-radius: 99px; } .rv2-vidrail::-webkit-scrollbar-track { background: rgba(237,234,226,0.16); } .rv2-vid { scroll-snap-align: center; margin: 0; } .rv2-vid__frame { position: relative; aspect-ratio: 9 / 16; /* 0.5625, reference measured 0.555 */ border-radius: 24px; /* reference radius */ overflow: hidden; background: #04212 6; background: #041D22; display: block; } .rv2-vid__frame img, .rv2-vid__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Scrim so the name and stars stay legible over any frame. */ .rv2-vid__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,29,34,0) 52%, rgba(4,29,34,0.86) 100%); pointer-events: none; } .rv2-vid__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.92); color: #041D22; border: 0; cursor: pointer; transition: transform 200ms cubic-bezier(.22,.61,.36,1), background-color 200ms ease; } .rv2-vid__play svg { width: 26px; height: 26px; margin-left: 3px; } .rv2-vid:hover .rv2-vid__play { transform: translate(-50%,-50%) scale(1.06); background: #FFFFFF; } .rv2-vid__play:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; } .rv2-vid__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; display: grid; justify-items: center; gap: 6px; z-index: 1; } .rv2-vid__name { font-family: var(--body); font-size: 18px; /* reference name size */ font-weight: 400; color: #FCFCFF; /* reference name colour */ text-align: center; } .rv2-vid__stars { display: inline-flex; gap: 3px; color: #FCFCFF; } .rv2-vid__stars svg { width: 15px; height: 15px; } @media (max-width: 640px) { .rv2-vidrail { grid-auto-columns: 240px; } .rv2-vid__play { width: 54px; height: 54px; } .rv2-vid__play svg { width: 22px; height: 22px; } } /* --- Runic easter egg in the footer bar --------------------------------- */ .rv2-foot__egg { position: relative; display: inline-flex; align-items: center; width: 22px; height: 22px; margin-right: 10px; color: var(--bone-mut); cursor: help; transition: color 240ms ease, transform 400ms cubic-bezier(.22,.61,.36,1); } .rv2-foot__egg svg { width: 100%; height: 100%; display: block; } .rv2-foot__egg:hover, .rv2-foot__egg:focus-visible { color: var(--bone); transform: rotate(45deg); } .rv2-foot__egg:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; border-radius: 2px; } .rv2-foot__egg-msg { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(4px); width: max-content; max-width: 260px; padding: 10px 14px; background: var(--bone); color: var(--pet); font-family: var(--body); font-size: 13px; line-height: 1.5; border-radius: var(--r); opacity: 0; pointer-events: none; transition: opacity 240ms ease, transform 240ms ease; } .rv2-foot__egg:hover .rv2-foot__egg-msg, .rv2-foot__egg:focus-visible .rv2-foot__egg-msg { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 640px) { .rv2-foot__egg-msg { left: 0; transform: translateY(4px); max-width: 220px; } .rv2-foot__egg:hover .rv2-foot__egg-msg { transform: translateY(0); } } /* ========================================================================== PRODUCT RATING STARS - petrol Two layers: an outline row, and a filled row clipped to the exact rating, so 4.89 renders as 4.89 rather than being rounded to a whole star. ========================================================================== */ .rv2-stars { position: relative; display: inline-block; line-height: 0; vertical-align: middle; } .rv2-stars__base, .rv2-stars__fill { display: block; white-space: nowrap; line-height: 0; } .rv2-stars__base svg, .rv2-stars__fill svg { width: 14px; height: 14px; display: inline-block; margin-right: 2px; } .rv2-stars__base { color: rgba(6,41,48,0.22); } .rv2-stars__fill { position: absolute; inset: 0; overflow: hidden; color: var(--pet); } /* Card meta: stars sit beside the score, price stays dominant. */ .rv2-pcard__r { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lab); font-size: 12px; color: var(--muted); white-space: nowrap; } .rv2-pcard__m { align-items: center; } /* On petrol grounds the outline would disappear - lift both layers to bone. */ .rv2-videos .rv2-stars__base, .rv2-myth .rv2-stars__base { color: rgba(237,234,226,0.32); } .rv2-videos .rv2-stars__fill, .rv2-myth .rv2-stars__fill { color: var(--bone); } @media (max-width: 640px) { .rv2-stars__base svg, .rv2-stars__fill svg { width: 13px; height: 13px; } } /* ========================================================================== GUIDES - homepage block, hub page and article pages ========================================================================== */ .rv2-guides { background: var(--mist); padding-block: clamp(48px, 6vw, 88px); } .rv2-guides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rv2-guide { display: grid; align-content: start; gap: 10px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r); padding: 28px 26px 26px; text-decoration: none; transition: border-color 240ms ease, transform 240ms cubic-bezier(.22,.61,.36,1); } .rv2-guide:hover { border-color: var(--pet); transform: translateY(-3px); } .rv2-guide:focus-visible { outline: 2px solid var(--pet); outline-offset: 3px; } .rv2-guide__sym { width: 34px; height: 34px; color: var(--pet); opacity: 0.55; margin-bottom: 6px; } .rv2-guide__sym svg { width: 100%; height: 100%; display: block; } .rv2-guide__kicker { font-family: var(--lab); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); } .rv2-guide__title { font-family: var(--disp); font-weight: 600; font-size: 21px; line-height: 1.15; color: var(--ink); } .rv2-guide__desc { font-family: var(--body); font-size: 15px; line-height: 1.7; color: var(--ink-soft); } .rv2-guide__read { font-family: var(--lab); font-size: 12px; color: var(--muted); margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--rule); } /* Video block sits between the closing petrol and the footer - step it down so two identical grounds never meet. */ .rv2-videos { background: #04222A; } @media (max-width: 1024px) { .rv2-guides__grid { grid-template-columns: 1fr; } } /* --- Hub page and article pages ----------------------------------------- */ body.page-template-default .rv-guidehub, .rv-guidehub { max-width: 1100px; margin-inline: auto; } .rv-guidehub .rv-lead { font-family: 'Jost', Arial, sans-serif; font-size: 18px; line-height: 1.7; color: #4A5654; max-width: 62ch; margin: 0 0 40px; } .rv-guidehub__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .rv-guidehub__item { display: block; background: #FFFFFF; border: 1px solid rgba(6,41,48,0.14); border-radius: 8px; padding: 28px 26px; text-decoration: none; transition: border-color 240ms ease, transform 240ms cubic-bezier(.22,.61,.36,1); } .rv-guidehub__item:hover { border-color: #062930; transform: translateY(-3px); } .rv-guidehub__kicker { display: block; font-family: hkgroteskpro, Arial, sans-serif; font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: #5F6B69; margin-bottom: 10px; } .rv-guidehub__item h2 { font-family: 'Cinzel', Georgia, serif !important; font-weight: 600 !important; font-size: 21px !important; line-height: 1.15 !important; color: #1A1F1E !important; margin: 0 0 10px !important; } .rv-guidehub__item p { font-family: 'Jost', Arial, sans-serif; font-size: 15px; line-height: 1.7; color: #4A5654; margin: 0 0 14px; } .rv-guidehub__read { font-family: hkgroteskpro, Arial, sans-serif; font-size: 12px; color: #5F6B69; display: block; padding-top: 12px; border-top: 1px solid rgba(6,41,48,0.14); } @media (max-width: 1024px) { .rv-guidehub__grid { grid-template-columns: 1fr; } } /* Guide article typography - readable measure, petrol headings. */ .rv-lead { font-family: 'Jost', Arial, sans-serif; font-size: 19px; line-height: 1.7; color: #1A1F1E; max-width: 62ch; margin: 0 0 32px; } .rv-note { border-left: 3px solid #062930; padding: 14px 0 14px 18px; margin-top: 36px; font-family: 'Jost', Arial, sans-serif; font-size: 15px; line-height: 1.7; color: #4A5654; max-width: 62ch; } /* --- Hub cards: heading carries the link, card is a div --------------- */ .rv-guidehub__item { position: relative; } .rv-guidehub__h { font-family: 'Cinzel', Georgia, serif !important; font-weight: 600 !important; font-size: 21px !important; line-height: 1.15 !important; margin: 0 0 10px !important; } .rv-guidehub__h a { color: #1A1F1E; text-decoration: none; } /* Stretch the link over the whole card without nesting blocks in an anchor. */ .rv-guidehub__h a::after { content: ''; position: absolute; inset: 0; border-radius: 8px; } .rv-guidehub__item:hover .rv-guidehub__h a { color: #062930; } .rv-guidehub__h a:focus-visible { outline: none; } .rv-guidehub__item:focus-within { border-color: #062930; outline: 2px solid #062930; outline-offset: 3px; } .rv-guidehub__p { font-family: 'Jost', Arial, sans-serif; font-size: 15px; line-height: 1.7; color: #4A5654; margin: 0 0 14px; } /* ========================================================================== GUIDE ARTICLES - designed, never a wall of prose ========================================================================== */ .rv-g { --gp:#062930; --gm:#F2F5F4; --gb:#EDEAE2; --gi:#1A1F1E; --gs:#4A5654; --gu:#5F6B69; --gr:rgba(6,41,48,0.14); --grb:rgba(237,234,226,0.22); } .rv-g * { box-sizing: border-box; } .rv-g-hero { background: var(--gp); color: var(--gb); margin: 0 calc(50% - 50vw) 0; padding: clamp(48px,7vw,88px) max(24px, calc(50vw - 560px)); display: grid; justify-items: start; gap: 14px; } .rv-g-hero__sym { width: 46px; height: 46px; color: var(--gb); opacity: .6; } .rv-g-hero__sym svg { width: 100%; height: 100%; display: block; } .rv-g-hero__kick { font-family: hkgroteskpro, Arial, sans-serif; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #B9C4C2; } .rv-g .rv-g-hero__h { font-family: 'Cinzel', Georgia, serif !important; font-weight: 600 !important; font-size: clamp(30px,4.6vw,54px) !important; line-height: 1.06 !important; color: var(--gb) !important; margin: 0 !important; max-width: 18ch; } .rv-g-hero__stand { font-family: 'Jost', Arial, sans-serif; font-size: 18px; line-height: 1.65; color: #B9C4C2; max-width: 54ch; margin: 4px 0 0; } .rv-g-hero__read { font-family: hkgroteskpro, Arial, sans-serif; font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: #B9C4C2; padding-top: 14px; border-top: 1px solid var(--grb); } .rv-g-sec { padding-block: clamp(36px,4.5vw,64px); } .rv-g-sec--dark { background: var(--gp); color: var(--gb); margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 560px)); } .rv-g-sec--tint { background: var(--gm); margin-inline: calc(50% - 50vw); padding-inline: max(24px, calc(50vw - 560px)); } .rv-g .rv-g-h2 { font-family: 'Cinzel', Georgia, serif !important; font-weight: 600 !important; font-size: clamp(24px,3vw,34px) !important; line-height: 1.12 !important; margin: 0 0 24px !important; color: var(--gi) !important; } .rv-g-sec--dark .rv-g-h2 { color: var(--gb) !important; } .rv-g .rv-g-h3 { font-family: 'Cinzel', Georgia, serif !important; font-weight: 600 !important; font-size: 19px !important; margin: 0 0 12px !important; color: var(--gi) !important; } .rv-g-sec--dark .rv-g-h3 { color: var(--gb) !important; } .rv-g-lead { font-family:'Jost',Arial,sans-serif; font-size: 19px; line-height: 1.7; color: var(--gi); max-width: 62ch; margin: 0 0 28px; } .rv-g-p { font-family:'Jost',Arial,sans-serif; font-size: 16px; line-height: 1.75; color: var(--gs); max-width: 62ch; margin: 0 0 16px; } .rv-g-sec--dark .rv-g-p { color: #B9C4C2; } /* Triple */ .rv-g-triple { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; } .rv-g-triple__i { padding: 20px 22px 20px 0; margin-right: 22px; border-top: 2px solid var(--gp); display: grid; gap: 6px; } .rv-g-triple__k { font-family:'Cinzel',Georgia,serif; font-weight:600; font-size: 19px; color: var(--gi); } .rv-g-triple__v { font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.6; color: var(--gu); } /* Steps */ .rv-g-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .rv-g-steps li { display: grid; grid-template-columns: 54px 1fr; gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--grb); align-items: start; } .rv-g-steps li:last-child { border-bottom: 1px solid var(--grb); } .rv-g-steps__n { grid-row: 1 / span 2; font-family:'Cinzel',Georgia,serif; font-size: 26px; color: var(--gb); opacity:.5; line-height:1; } .rv-g-steps__k { font-family: hkgroteskpro, Arial, sans-serif; font-weight: 700; font-size: 16px; color: var(--gb); } .rv-g-steps__v { font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.7; color: #B9C4C2; max-width: 58ch; } /* Spec rows */ .rv-g-spec { display: grid; } .rv-g-spec__row { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 14px 0; border-top: 1px solid var(--gr); font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.6; } .rv-g-spec__row:last-child { border-bottom: 1px solid var(--gr); } .rv-g-spec__row span:first-child { font-family: hkgroteskpro, Arial, sans-serif; font-weight: 700; color: var(--gi); } .rv-g-spec__row span:last-child { color: var(--gs); } /* Callout */ .rv-g-callout { border-left: 3px solid var(--gp); padding: 14px 0 14px 18px; margin-top: 26px; font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.7; color: var(--gs); max-width: 62ch; } .rv-g-sec--dark .rv-g-callout { border-left-color: var(--gb); color: #B9C4C2; } /* Two column */ .rv-g-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,56px); } /* Compare cards */ .rv-g-compare { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; } .rv-g-compare__c { background: rgba(237,234,226,0.06); border: 1px solid var(--grb); border-radius: 8px; padding: 24px 22px; } .rv-g-sec:not(.rv-g-sec--dark) .rv-g-compare__c { background: #fff; border-color: var(--gr); } .rv-g-compare__k { display:block; font-family:'Cinzel',Georgia,serif; font-weight:600; font-size: 21px; color: var(--gb); margin-bottom: 12px; } .rv-g-sec:not(.rv-g-sec--dark) .rv-g-compare__k { color: var(--gi); } .rv-g-compare__c p { font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.7; color: #B9C4C2; margin: 0 0 16px; } .rv-g-sec:not(.rv-g-sec--dark) .rv-g-compare__c p { color: var(--gs); } .rv-g-compare__c dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-family: hkgroteskpro, Arial, sans-serif; font-size: 13px; } .rv-g-compare__c dt { color: #8FA0A0; } .rv-g-compare__c dd { margin: 0; color: var(--gb); } .rv-g-sec:not(.rv-g-sec--dark) .rv-g-compare__c dt { color: var(--gu); } .rv-g-sec:not(.rv-g-sec--dark) .rv-g-compare__c dd { color: var(--gi); } /* Do / do not */ .rv-g-dd { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .rv-g-dd__col { border-top: 2px solid var(--gp); padding-top: 18px; } .rv-g-dd__col--dont { border-top-color: rgba(6,41,48,0.3); } .rv-g-dd__h { display:block; font-family: hkgroteskpro,Arial,sans-serif; font-weight:700; font-size: 12px; letter-spacing:1.6px; text-transform:uppercase; color: var(--gp); margin-bottom: 12px; } .rv-g-dd__col--dont .rv-g-dd__h { color: var(--gu); } .rv-g-dd ul { margin:0; padding-left: 18px; } .rv-g-dd li { font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.8; color: var(--gs); } /* HRC scale */ .rv-g-scale { margin-top: 26px; max-width: 620px; } .rv-g-scale__track { position: relative; height: 10px; background: var(--gm); border: 1px solid var(--gr); border-radius: 99px; overflow: hidden; } .rv-g-scale__band { position:absolute; left: 42.8%; width: 28.6%; top:0; bottom:0; background: var(--gp); } .rv-g-scale__marks { display:flex; justify-content: space-between; margin-top: 8px; font-family: hkgroteskpro,Arial,sans-serif; font-size: 12px; color: var(--gu); } .rv-g-scale__cap { display:block; margin-top: 10px; font-family: hkgroteskpro,Arial,sans-serif; font-size: 13px; font-weight:700; color: var(--gp); } /* Purpose grid */ .rv-g-purpose { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 clamp(24px,3vw,48px); } .rv-g-purpose__i { display:grid; gap: 8px; padding: 24px 0; border-top: 1px solid var(--grb); align-content:start; } .rv-g-purpose__n { font-family: hkgroteskpro,Arial,sans-serif; font-size: 12px; letter-spacing:2px; color:#8FA0A0; } .rv-g-purpose__k { font-family:'Cinzel',Georgia,serif; font-weight:600; font-size: 20px; color: var(--gb); } .rv-g-purpose__v { font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.7; color:#B9C4C2; max-width: 44ch; } /* Length bars */ .rv-g-len { display: grid; gap: 2px; } .rv-g-len__r { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 16px 0; border-top: 1px solid var(--gr); position: relative; } .rv-g-len__bar { display:block; height: 6px; background: var(--gp); opacity:.28; border-radius:99px; } .rv-g-len__r--pick .rv-g-len__bar { opacity: 1; } .rv-g-len__k { font-family: hkgroteskpro,Arial,sans-serif; font-weight:700; font-size: 15px; color: var(--gi); } .rv-g-len__v { font-family:'Jost',Arial,sans-serif; font-size: 14px; color: var(--gu); } /* Checklist */ .rv-g-check { margin-top: 26px; background: var(--gm); border-radius: 8px; padding: 24px 26px; max-width: 620px; } .rv-g-check__h { display:block; font-family: hkgroteskpro,Arial,sans-serif; font-weight:700; font-size: 12px; letter-spacing:1.6px; text-transform:uppercase; color: var(--gp); margin-bottom: 12px; } .rv-g-check ul { margin:0; padding-left:18px; } .rv-g-check li { font-family:'Jost',Arial,sans-serif; font-size: 15px; line-height:1.9; color: var(--gs); } /* Related + CTA */ .rv-g-more { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--gr); } .rv-g-more__h { display:block; font-family: hkgroteskpro,Arial,sans-serif; font-weight:700; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; color: var(--gu); margin-bottom:16px; } .rv-g-more__grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; } .rv-g-more__i { display:block; padding: 20px 22px; background:#fff; border:1px solid var(--gr); border-radius:8px; font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:18px; color: var(--gi); text-decoration:none; transition: border-color 200ms ease; } .rv-g-more__i:hover { border-color: var(--gp); } .rv-g-cta { margin-top: 28px; background: var(--gp); border-radius: 8px; padding: 30px 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .rv-g-cta__k { font-family:'Cinzel',Georgia,serif; font-weight:600; font-size: 22px; color: var(--gb); } .rv-g-cta__b { display:inline-flex; align-items:center; min-height:50px; padding:0 28px; background: var(--gb); color: var(--gp); border-radius:8px; font-family: hkgroteskpro,Arial,sans-serif; font-weight:700; font-size:13px; letter-spacing:1.2px; text-transform:uppercase; text-decoration:none; } .rv-g-cta__b:hover { background:#fff; } @media (max-width: 900px) { .rv-g-triple, .rv-g-compare, .rv-g-two, .rv-g-dd, .rv-g-purpose, .rv-g-more__grid { grid-template-columns: 1fr; } .rv-g-triple__i { margin-right: 0; } .rv-g-spec__row { grid-template-columns: 1fr; gap: 4px; } .rv-g-steps li { grid-template-columns: 40px 1fr; } } /* ========================================================================== v10.2 - prices on petrol grounds The global rule paints every price petrol, which makes the mini-cart price in the petrol header invisible (measured 1:1). Anything sitting on a petrol ground takes bone instead. ========================================================================== */ body.rv-petrol .whb-header .price, body.rv-petrol .whb-header .woocommerce-Price-amount, body.rv-petrol .whb-header .amount, body.rv-petrol .wd-dropdown-cart .price, body.rv-petrol .wd-dropdown-cart .woocommerce-Price-amount, body.rv-petrol .wd-cart-drawer .price, body.rv-petrol .wd-cart-drawer .woocommerce-Price-amount, body.rv-petrol .footer-container .price, body.rv-petrol .footer-container .woocommerce-Price-amount { color: #EDEAE2 !important; } /* Struck-through originals in those places stay legible but secondary. */ body.rv-petrol .whb-header del .woocommerce-Price-amount, body.rv-petrol .wd-dropdown-cart del .woocommerce-Price-amount, body.rv-petrol .wd-cart-drawer del .woocommerce-Price-amount { color: #B9C4C2 !important; } /* Cart drawer and header dropdowns are petrol surfaces, so their body text and titles must lift too. */ body.rv-petrol .wd-cart-drawer, body.rv-petrol .wd-dropdown-cart { background-color: #062930 !important; color: #EDEAE2 !important; } body.rv-petrol .wd-cart-drawer a, body.rv-petrol .wd-dropdown-cart a, body.rv-petrol .wd-cart-drawer .wd-entities-title, body.rv-petrol .wd-dropdown-cart .wd-entities-title { color: #EDEAE2 !important; } /* ========================================================================== v10.3 - accessibility sweep A full pass over every text element on the category template found 91 contrast failures, dominated by two causes: 1. Woodmart's default gold stars rgb(234,190,18) on white = 1.77:1 2. --color-gray-400 (#a5a5a5) used for meta text on white = 2.46:1 The Petrol direction has no gold at all, so stars become petrol. ========================================================================== */ /* Woodmart's grey ramp: the two lightest are unusable as text on white. */ body.rv-petrol { --color-gray-400: #5F6B69; /* was #a5a5a5 - 2.46:1 */ --color-gray-500: #4A5654; /* was #767676 - only just passed */ --color-gray-600: #4A5654; --color-gray-700: #3A4442; } /* Ratings: petrol, never gold. Applies to Woodmart, WooCommerce and the customer-review plugins. */ body.rv-petrol .star-rating, body.rv-petrol .star-rating span, body.rv-petrol .star-rating::before, body.rv-petrol .star-rating span::before, body.rv-petrol .wd-star-rating, body.rv-petrol .wd-star-rating span::before, body.rv-petrol .cr-review-rating, body.rv-petrol .cr-star, body.rv-petrol [class*="rating"] .star, body.rv-petrol .wd-rating-value { color: #062930 !important; } /* Empty portion of a star row stays the same hue, lighter - never grey. */ body.rv-petrol .star-rating::before { color: rgba(6,41,48,0.22) !important; } /* Product-card category labels and other small meta on light grounds. */ body.rv-petrol .wd-product-cats, body.rv-petrol .wd-product-cats a, body.rv-petrol .woocommerce-result-count, body.rv-petrol .wd-product .wd-product-brands-links, body.rv-petrol .posted_in, body.rv-petrol .sku_wrapper, body.rv-petrol .product_meta, body.rv-petrol .product_meta a { color: #5F6B69 !important; } body.rv-petrol .wd-product-cats a:hover, body.rv-petrol .product_meta a:hover { color: #062930 !important; } /* Breadcrumbs and pagination on light grounds. */ body.rv-petrol .wd-breadcrumbs, body.rv-petrol .woocommerce-breadcrumb, body.rv-petrol .woocommerce-breadcrumb a, body.rv-petrol .wd-breadcrumbs a { color: #4A5654 !important; } body.rv-petrol .woocommerce-breadcrumb a:hover { color: #062930 !important; } /* v10.3 shipped a blanket `body.rv-petrol p { color: ink }` here. It also hit every paragraph sitting on a petrol ground - hero subtext, the mythology lede, the forge story, the footer blurb - at 1.09:1. Replaced below with a rule scoped to the theme's own light content areas only. */ body.rv-petrol .whb-header p, body.rv-petrol .whb-header li, body.rv-petrol .footer-container p, body.rv-petrol .footer-container li, body.rv-petrol .rv2-sec--petrol p, body.rv-petrol .rv-g-sec--dark p { color: inherit; } /* ========================================================================== v10.4 - body copy, scoped to light grounds only ========================================================================== */ /* Woodmart's own content areas sit on white, so ink is correct there. */ body.rv-petrol .entry-content > p, body.rv-petrol .woocommerce-product-details__short-description p, body.rv-petrol .woocommerce-Tabs-panel p, body.rv-petrol .woocommerce-Tabs-panel li, body.rv-petrol .term-description p, body.rv-petrol .wd-content-area > p { color: #1A1F1E; } /* Explicitly restore every petrol-ground text colour, so no future blanket rule can bury them again. */ body.rv-petrol .rv2-hero__sub, body.rv-petrol .rv2-myth__lede, body.rv-petrol .rv2-steel__lede, body.rv-petrol .rv2-forge__body p, body.rv-petrol .rv2-myth__v, body.rv-petrol .rv2-purpose__v, body.rv-petrol .rv2-foot__blurb, body.rv-petrol .rv2-foot__col a, body.rv-petrol .rv2-foot__copy, body.rv-petrol .rv2-foot__origin, body.rv-petrol .rv2-sticky span, body.rv-petrol .rv-g-hero__stand, body.rv-petrol .rv-g-sec--dark p, body.rv-petrol .rv-g-sec--dark li, body.rv-petrol .rv-g-steps__v, body.rv-petrol .rv-g-purpose__v, body.rv-petrol .rv-g-compare__c p { color: #B9C4C2 !important; } body.rv-petrol .rv2-hero__title, body.rv-petrol .rv2-close__title, body.rv-petrol .rv2-foot__brand, body.rv-petrol .rv2-foot__contact, body.rv-petrol .rv2-steel__col h3, body.rv-petrol .rv2-myth__k, body.rv-petrol .rv2-purpose__k, body.rv-petrol .rv-g-hero__h, body.rv-petrol .rv-g-sec--dark .rv-g-h2, body.rv-petrol .rv-g-sec--dark .rv-g-h3, body.rv-petrol .rv-g-steps__k { color: #EDEAE2 !important; } /* ========================================================================== SINGLE PRODUCT + CATEGORY ARCHIVE ========================================================================== */ body.rv-petrol { --p:#062930; --pl:#0A3A44; --mist:#F2F5F4; --bone:#EDEAE2; --bonem:#B9C4C2; --ink:#1A1F1E; --soft:#4A5654; --mut:#5F6B69; --rule:rgba(6,41,48,0.14); --ruleb:rgba(237,234,226,0.22); } /* --- Trust strip under the buy button ----------------------------------- */ body.rv-petrol .rv-p-trust { list-style:none; margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--rule); display:grid; grid-template-columns:repeat(3,1fr); gap:14px; } body.rv-petrol .rv-p-trust li { display:flex; align-items:center; gap:9px; font-family:hkgroteskpro,Arial,sans-serif; font-size:13px; font-weight:600; color:var(--ink); } body.rv-petrol .rv-p-trust svg { width:20px; height:20px; color:var(--p); flex:0 0 20px; } /* --- Specification table ------------------------------------------------ */ body.rv-petrol .rv-p-spec { margin-top:30px; padding-top:26px; border-top:1px solid var(--rule); } body.rv-petrol .rv-p-spec__h { font-family:'Cinzel',Georgia,serif !important; font-weight:600 !important; font-size:20px !important; color:var(--ink) !important; margin:0 0 16px !important; } body.rv-petrol .rv-p-spec dl { margin:0; } body.rv-petrol .rv-p-spec__row { display:grid; grid-template-columns:150px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--rule); } body.rv-petrol .rv-p-spec dt { font-family:hkgroteskpro,Arial,sans-serif; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--mut); margin:0; } body.rv-petrol .rv-p-spec dd { font-family:'Jost',Arial,sans-serif; font-size:15px; color:var(--ink); margin:0; } /* --- Guides block on the product page ----------------------------------- */ body.rv-petrol .rv-p-guides { margin:56px 0 0; padding:44px 0 8px; border-top:1px solid var(--rule); } body.rv-petrol .rv-p-guides__rune { display:flex; justify-content:center; margin-bottom:26px; } body.rv-petrol .rv-p-guides__rune svg { width:min(420px,70%); height:28px; color:var(--p); opacity:.34; } body.rv-petrol .rv-p-guides__h { font-family:'Cinzel',Georgia,serif !important; font-weight:600 !important; font-size:clamp(22px,2.6vw,30px) !important; color:var(--ink) !important; margin:0 0 22px !important; text-align:center; } body.rv-petrol .rv-p-guides__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } body.rv-petrol .rv-p-guides__i { display:grid; gap:8px; align-content:start; background:var(--mist); border:1px solid var(--rule); border-radius:8px; padding:22px 22px; text-decoration:none; transition:border-color 200ms ease, transform 200ms ease; } body.rv-petrol .rv-p-guides__i:hover { border-color:var(--p); transform:translateY(-2px); } body.rv-petrol .rv-p-guides__k { font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:17px; color:var(--ink); } body.rv-petrol .rv-p-guides__v { font-family:'Jost',Arial,sans-serif; font-size:14px; line-height:1.65; color:var(--soft); } /* --- Category archive hero ---------------------------------------------- */ body.rv-petrol .rv-c-hero { background:var(--p); margin:0 calc(50% - 50vw) 0; padding:clamp(44px,6vw,80px) max(24px, calc(50vw - 620px)); } body.rv-petrol .rv-c-hero__in { display:grid; justify-items:start; gap:12px; max-width:70ch; } body.rv-petrol .rv-c-hero__sym { width:44px; height:44px; color:var(--bone); opacity:.6; } body.rv-petrol .rv-c-hero__sym svg { width:100%; height:100%; display:block; } body.rv-petrol .rv-c-hero__h { font-family:'Cinzel',Georgia,serif !important; font-weight:600 !important; font-size:clamp(30px,4.4vw,52px) !important; line-height:1.06 !important; color:var(--bone) !important; margin:0 !important; text-transform:none !important; } body.rv-petrol .rv-c-hero__n { font-family:hkgroteskpro,Arial,sans-serif; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; color:var(--bonem); } body.rv-petrol .rv-c-hero__d p { font-family:'Jost',Arial,sans-serif !important; font-size:16px !important; line-height:1.7 !important; color:var(--bonem) !important; margin:6px 0 0 !important; } /* --- Category trust strip ------------------------------------------------ */ body.rv-petrol .rv-c-trust { list-style:none; margin:0 calc(50% - 50vw) 32px; padding:14px max(24px, calc(50vw - 620px)); background:var(--mist); border-bottom:1px solid var(--rule); display:flex; flex-wrap:wrap; gap:8px 34px; } body.rv-petrol .rv-c-trust li { font-family:hkgroteskpro,Arial,sans-serif; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--mut); position:relative; padding-left:16px; } body.rv-petrol .rv-c-trust li::before { content:''; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; background:var(--p); border-radius:50%; } /* --- After the grid ------------------------------------------------------ */ body.rv-petrol .rv-c-after { margin-top:56px; padding-top:8px; } body.rv-petrol .rv-c-after__rune { display:flex; justify-content:center; margin-bottom:34px; } body.rv-petrol .rv-c-after__rune svg { width:min(440px,72%); height:28px; color:var(--p); opacity:.34; } body.rv-petrol .rv-c-h2 { font-family:'Cinzel',Georgia,serif !important; font-weight:600 !important; font-size:clamp(22px,2.6vw,30px) !important; color:var(--ink) !important; margin:0 0 20px !important; padding-bottom:14px; border-bottom:1px solid var(--rule); } body.rv-petrol .rv-c-guides__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:52px; } body.rv-petrol .rv-c-guides__i { display:grid; gap:8px; align-content:start; background:#fff; border:1px solid var(--rule); border-radius:8px; padding:22px; text-decoration:none; transition:border-color 200ms ease, transform 200ms ease; } body.rv-petrol .rv-c-guides__i:hover { border-color:var(--p); transform:translateY(-2px); } body.rv-petrol .rv-c-guides__i span { font-family:'Cinzel',Georgia,serif; font-weight:600; font-size:17px; color:var(--ink); } body.rv-petrol .rv-c-guides__i em { font-style:normal; font-family:'Jost',Arial,sans-serif; font-size:14px; line-height:1.65; color:var(--soft); } body.rv-petrol .rv-c-sibs__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } body.rv-petrol .rv-c-sibs__grid a { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:15px 18px; border:1px solid var(--rule); border-radius:8px; text-decoration:none; transition:border-color 200ms ease, background-color 200ms ease; } body.rv-petrol .rv-c-sibs__grid a:hover { border-color:var(--p); background:var(--mist); } body.rv-petrol .rv-c-sibs__grid span { font-family:hkgroteskpro,Arial,sans-serif; font-size:14px; font-weight:600; color:var(--ink); } body.rv-petrol .rv-c-sibs__grid em { font-style:normal; font-family:hkgroteskpro,Arial,sans-serif; font-size:12px; color:var(--mut); } @media (max-width:900px) { body.rv-petrol .rv-p-trust, body.rv-petrol .rv-p-guides__grid, body.rv-petrol .rv-c-guides__grid { grid-template-columns:1fr; } body.rv-petrol .rv-c-sibs__grid { grid-template-columns:repeat(2,1fr); } body.rv-petrol .rv-p-spec__row { grid-template-columns:1fr; gap:4px; } } /* ========================================================================== v12.2 - full-bleed overflow guard The container cage is restored on every page except the homepage, so the designed sections now escape it with .rv-bleed (width:100vw + negative margins). 100vw counts the scrollbar, which would add a horizontal scrollbar on desktop. Clipping the page wrapper is the standard fix and does not break sticky positioning the way overflow:hidden does. ========================================================================== */ body.rv-petrol .wd-page-content, body.rv-petrol .main-page-wrapper { overflow-x: clip; } /* Woodmart's own container supplies the side gutter again on interior pages; make sure nothing below is flush to the screen edge on small screens. */ @media (max-width: 767px) { body.rv-petrol:not(.home) .wd-content-layout.container { padding-inline: var(--rv-gutter); } }