/* ========================================================= ANVIL0 — Homepage-only visual layer ("Sand & Ink" redesign) Loaded ONLY by index.html, AFTER css/styles.css. Every rule here either (a) restyles existing homepage elements cosmetically (colors/type/spacing) without touching layout properties that the shared header/nav/mobile-toggle JS or styles.css media queries depend on, or (b) fully replaces the layout of sections that have no JS-driven show/hide behavior (hero, bento, catalog header, commission CTA, footer). Nothing here is loaded by any other page, so shop/product/cart/checkout/admin/blog keep the original "THE FORGE" look untouched. Fonts: Archivo (display/numbers), Space Grotesk (UI/body), JetBrains Mono (labels/specs/numbers). ========================================================= */ /* Fonts are loaded via tags in index.html's (faster than @import), so this file only defines the fallback stacks. */ body.home-v2{ --hv-ink: #0e0d0c; --hv-panel: #191715; --hv-panel-2: #14120f; --hv-line: #232019; --hv-line-soft: #2b261d; --hv-line-btn: #3a352c; --hv-sand: #c9b494; --hv-sand-hi: #d8c5a8; --hv-sand-dark: #17130d; --hv-paper: #ece7dd; --hv-text-2: #d6cec1; --hv-text-3: #b8ad9c; --hv-text-4: #8d8272; --hv-display: 'Archivo', 'Arial Narrow', sans-serif; --hv-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --hv-mono: 'JetBrains Mono', 'Courier New', monospace; /* Legacy variable bridge — recolors any leftover inline style="...var(--accent...)" (e.g. the shared footer's Privacy Policy link, and any other var(--accent)-styled inline links on this page) without touching markup. */ --accent: var(--hv-sand); background: var(--hv-ink); background-image: none; } body.home-v2 #main-content, body.home-v2 .site-footer{ background: var(--hv-ink); font-family: var(--hv-body); color: var(--hv-paper); } /* --------------------------------------------------------------- Announcement bar — cosmetic only, no layout/display changes. --------------------------------------------------------------- */ body.home-v2 .announce{ background: var(--hv-panel); border-bottom: 1px solid var(--hv-line); color: var(--hv-text-3); font-family: var(--hv-mono); letter-spacing: 0.14em; } body.home-v2 .announce b{ color: var(--hv-sand); font-weight: 500; } /* --------------------------------------------------------------- Header — cosmetic only. Display/flex/media-query behavior is left to styles.css so the existing mobile hamburger toggle (and the i18n language-switcher injected into .nav-actions) keep working exactly as before. --------------------------------------------------------------- */ body.home-v2 .site-header{ background: rgba(14,13,12,0.94); border-bottom: 1px solid var(--hv-line); } body.home-v2 .logo-word{ font-family: var(--hv-display); font-weight: 800; letter-spacing: 0.14em; color: var(--hv-paper); } body.home-v2 .logo-word b{ color: var(--hv-sand); } body.home-v2 .logo small{ font-family: var(--hv-mono); color: var(--hv-text-4); } body.home-v2 .main-nav a{ font-family: var(--hv-body); font-weight: 500; letter-spacing: 0.04em; text-transform: none; color: var(--hv-text-3); } body.home-v2 .main-nav a:hover, body.home-v2 .main-nav a.active{ color: var(--hv-paper); border-color: var(--hv-sand); } body.home-v2 .main-nav a .tag{ font-family: var(--hv-mono); background: var(--hv-line); color: var(--hv-text-4); } body.home-v2 .nav-icon-btn{ color: var(--hv-text-3); font-family: var(--hv-mono); } body.home-v2 .nav-icon-btn:hover{ color: var(--hv-paper); } body.home-v2 .cart-count{ background: var(--hv-sand); color: var(--hv-sand-dark); } /* Buttons used throughout the new sections. Scoped to home-v2 so .btn on every other page is untouched. */ body.home-v2 .btn{ font-family: var(--hv-body); border-radius: 999px; letter-spacing: 0.02em; text-transform: none; transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out; } body.home-v2 .btn-primary{ background: var(--hv-sand); color: var(--hv-sand-dark); border: none; font-weight: 600; } body.home-v2 .btn-primary:hover{ background: var(--hv-sand-hi); } body.home-v2 .btn-outline{ background: transparent; border: 1px solid var(--hv-line-btn); color: var(--hv-text-2); } body.home-v2 .btn-outline:hover{ border-color: #554d40; color: var(--hv-paper); } body.home-v2 .btn-light{ background: var(--hv-paper); color: var(--hv-ink); border: none; font-weight: 600; } body.home-v2 .btn-light:hover{ background: #ffffff; } /* --------------------------------------------------------------- Hero — "Blueprint" split rebuild (7 September). Replaces the full-bleed cinematic background (which cropped every product photo hard, since photos are near-square catalog shots, not wide cinematic photography) with a contained two-column layout: copy on the left, an actual framed photo card on the right at its own aspect ratio. Reuses the exact same .hero-split/.hero-copy/#hero-carousel DOM and every data-hc-* hook initHeroCarousel() in main.js relies on — no markup change, CSS only. The freed-up space next to the copy is filled with a faint technical line-art helmet mark, corner tick marks and a vertical "reg plate" label instead of decorative filler. --------------------------------------------------------------- */ body.home-v2 .hero-split{ position: relative; display: grid; grid-template-columns: minmax(0,1.12fr) minmax(0,1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 64px; overflow: hidden; background: var(--hv-ink); } body.home-v2 .hero-watermark{ display: none; } /* Blueprint dressing — pure background layers, zero extra markup. ::before carries a low-opacity helmet line-art mark plus 4 corner tick marks (8 hard-stop gradients); ::after carries the vertical "reg plate" label via `content`. */ body.home-v2 .hero-split::before{ content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cg fill='none' stroke='%23c9b494' stroke-opacity='0.07' stroke-width='1.4'%3E%3Cellipse cx='200' cy='190' rx='150' ry='160'/%3E%3Cpath d='M55 190 a145 145 0 0 0 290 0'/%3E%3Cpath d='M120 60 a90 150 0 0 1 160 0'/%3E%3Cline x1='200' y1='30' x2='200' y2='350'/%3E%3Cline x1='55' y1='190' x2='345' y2='190'/%3E%3Crect x='170' y='60' width='60' height='34' rx='4'/%3E%3Ccircle cx='200' cy='190' r='4' fill='%23c9b494' fill-opacity='0.07'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)), linear-gradient(var(--hv-line-btn), var(--hv-line-btn)); background-size: 300px 300px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px, 22px 1.5px, 1.5px 22px; background-position: -30px 8%, top 22px left 24px, top 22px left 24px, top 22px right 24px, top 22px right 24px, bottom 22px left 24px, bottom 22px left 24px, bottom 22px right 24px, bottom 22px right 24px; } body.home-v2 .hero-split::after{ content: 'Reg. No. HV-0001 — Novi Sad Workshop'; position: absolute; left: 0px; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-family: var(--hv-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hv-text-4); pointer-events: none; z-index: 1; } body.home-v2 .hero-copy{ position: relative; z-index: 2; max-width: none; grid-column: 1; padding-left: 34px; } body.home-v2 .hero-copy .eyebrow{ font-family: var(--hv-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--hv-sand); margin-bottom: 22px; } body.home-v2 .hero-copy .eyebrow::before{ display:none; } body.home-v2 .hero-copy h1{ font-family: var(--hv-display); font-weight: 800; font-size: 56px; line-height: 1.04; letter-spacing: -0.025em; text-transform: none; color: var(--hv-paper); text-wrap: balance; } body.home-v2 .hero-copy h1 em{ font-style: normal; color: var(--hv-sand); } body.home-v2 .hero-copy h1 span:nth-of-type(2){ color: var(--hv-sand); } body.home-v2 .hero-copy p{ max-width: 460px; margin-top: 22px; font-family: var(--hv-body); font-size: 15px; line-height: 1.8; color: var(--hv-text-3); } body.home-v2 .hero-copy .hero-cta{ margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; } body.home-v2 .hero-copy .hero-cta .btn{ padding: 14px 26px; font-size: 13px; } /* Right column: the photo card itself. A real framed card at the photo's own aspect ratio instead of a full-bleed crop, with a viewfinder-style corner mark that brightens on hover. */ body.home-v2 .hero-feature-card{ position: relative; grid-column: 2; z-index: 2; display: flex; flex-direction: column; gap: 14px; background: var(--hv-panel); border: 1px solid var(--hv-line); border-radius: 22px; padding: 14px; text-decoration: none; transition: border-color 0.2s ease; } body.home-v2 .hero-feature-card:hover{ border-color: var(--hv-line-btn); } body.home-v2 .hero-feature-card .card-media{ position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: repeating-linear-gradient(135deg, #1a1815 0 12px, #17130d 12px 24px); } body.home-v2 .hero-feature-card .card-media img{ position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform 0.5s ease; } body.home-v2 .hero-feature-card:hover .card-media img{ transform: scale(1.035); } body.home-v2 .hero-feature-card .card-media svg.helmet-icon{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34% !important; height: 34% !important; margin: 0 !important; opacity: 0.5; } body.home-v2 .hero-feature-card .card-media::after{ content: ''; position: absolute; inset: 14px; z-index: 2; pointer-events: none; opacity: 0.5; transition: opacity 0.2s ease; background-repeat: no-repeat; background-image: linear-gradient(var(--hv-sand), var(--hv-sand)), linear-gradient(var(--hv-sand), var(--hv-sand)), linear-gradient(var(--hv-sand), var(--hv-sand)), linear-gradient(var(--hv-sand), var(--hv-sand)), linear-gradient(var(--hv-sand), var(--hv-sand)), linear-gradient(var(--hv-sand), var(--hv-sand)), linear-gradient(var(--hv-sand), var(--hv-sand)), linear-gradient(var(--hv-sand), var(--hv-sand)); background-size: 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px; background-position: top 0 left 0, top 0 left 0, top 0 right 0, top 0 right 0, bottom 0 left 0, bottom 0 left 0, bottom 0 right 0, bottom 0 right 0; } body.home-v2 .hero-feature-card:hover .card-media::after{ opacity: 0.95; } @media (prefers-reduced-motion: reduce){ body.home-v2 .hero-feature-card .card-media img{ transition: none; } } body.home-v2 .hero-feature-card .hero-feature-tag{ position: absolute; top: 26px; left: 26px; z-index: 3; display: flex; align-items: center; background: rgba(14,13,12,0.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); border: 1px solid var(--hv-line-btn); padding: 5px 10px; border-radius: 999px; font-family: var(--hv-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hv-sand); } body.home-v2 .hero-feature-card .hero-feature-tag::before{ content:'●'; font-size:7px; margin-right:6px; } body.home-v2 .hero-feature-card .card-title{ display: block; font-family: var(--hv-body); font-weight: 600; font-size: 16px; color: var(--hv-paper); padding: 0 6px; } body.home-v2 .hero-feature-card p[data-hc-desc]{ display:none; } body.home-v2 .hero-spec-col{ position: static; display: flex; flex-direction: column; gap: 12px; padding: 0 6px 4px; text-align: left; } body.home-v2 .hero-feature-card .card-foot{ display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; } body.home-v2 .hero-feature-card .price-block{ display: flex; flex-direction: row; align-items: baseline; gap: 6px; } body.home-v2 .hero-feature-card .price-label{ font-family: var(--hv-mono); font-size: 11px; color: var(--hv-text-4); text-transform: uppercase; } body.home-v2 .hero-feature-card .price{ font-family: var(--hv-display); font-weight: 800; font-size: 24px; letter-spacing: -0.01em; color: var(--hv-paper); } body.home-v2 .hero-feature-card .btn{ padding: 11px 20px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; flex-shrink: 0; } body.home-v2 .hero-feature-card .hc-dots{ display: flex; gap: 6px; justify-content: center; } @media (max-width: 900px){ body.home-v2 .hero-split{ grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 32px; gap: 32px; } body.home-v2 .hero-copy{ padding-left: 0; grid-column: 1; } body.home-v2 .hero-copy h1{ font-size: 38px; } body.home-v2 .hero-feature-card{ grid-column: 1; } body.home-v2 .hero-split::after{ display: none; } } /* Trust bar — cosmetic only */ body.home-v2 .trust-bar{ background: var(--hv-panel); border-top: 1px solid var(--hv-line); border-bottom: 1px solid var(--hv-line); } body.home-v2 .trust-bar-item{ color: var(--hv-text-3); font-family: var(--hv-mono); font-size: 11px; letter-spacing: 0.08em; } body.home-v2 .trust-bar-item svg{ stroke: var(--hv-sand); fill: none; } /* --------------------------------------------------------------- Workshop bento panel — new section, fully custom markup (added in index.html), no JS-toggle dependency. --------------------------------------------------------------- */ .hv-bento{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: minmax(150px, auto); gap: 12px; padding: 22px 32px; background: var(--hv-ink); } .hv-tile{ border-radius: 20px; background: var(--hv-panel); padding: 26px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; color: var(--hv-paper); } .hv-tile-label{ font-family: var(--hv-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hv-text-3); } .hv-tile-workshop{ grid-column: span 2; } .hv-tile-workshop .hv-tile-label{ color: var(--hv-sand); } .hv-tile-workshop p{ font-family: var(--hv-body); font-size: 14px; line-height: 1.8; color: var(--hv-text-2); margin: 0; } .hv-mini-grid{ display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; font-size: 12px; } .hv-mini{ background: var(--hv-ink); border-radius: 12px; padding: 14px; } .hv-mini-num{ font-family: var(--hv-mono); color: var(--hv-sand); font-size: 12px; } .hv-mini-label{ margin-top: 6px; font-family: var(--hv-body); } .hv-tile-stat .hv-stat-value{ display: flex; align-items: baseline; gap: 4px; } .hv-tile-stat .hv-stat-num{ font-family: var(--hv-display); font-weight: 800; font-size: 48px; letter-spacing: -0.02em; color: var(--hv-paper); } .hv-tile-stat .hv-stat-sub{ font-size: 13px; color: var(--hv-text-3); margin-top: 4px; font-family: var(--hv-body); } .hv-tile-sale{ grid-column: span 2; background: var(--hv-sand); color: var(--hv-sand-dark); flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .hv-tile-sale .hv-tile-label{ color: var(--hv-sand-dark); opacity: 0.75; } .hv-tile-sale-heading{ font-family: var(--hv-display); font-weight: 800; font-size: 24px; margin-top: 8px; line-height: 1.2; letter-spacing: -0.02em; } .hv-tile-sale .countdown{ display: flex; gap: 8px; } .hv-tile-sale .cd-unit{ background: var(--hv-sand-dark); color: var(--hv-paper); border-radius: 12px; padding: 12px 15px; text-align: center; min-width: 46px; } .hv-tile-sale .cd-unit span{ display: block; font-family: var(--hv-mono); font-size: 19px; } .hv-tile-sale .cd-unit small{ font-family: var(--hv-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--hv-text-3); } .hv-tile-quote{ grid-column: span 2; justify-content: center; } .hv-tile-quote blockquote{ margin: 0; font-family: var(--hv-body); font-size: 15px; line-height: 1.7; color: var(--hv-text-2); } .hv-tile-quote cite{ display: block; margin-top: 10px; font-style: normal; font-family: var(--hv-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hv-text-4); } @media (max-width: 900px){ .hv-bento{ grid-template-columns: repeat(2, minmax(0,1fr)); } .hv-tile-workshop, .hv-tile-sale, .hv-tile-quote{ grid-column: span 2; } } @media (max-width: 560px){ .hv-bento{ grid-template-columns: 1fr; padding: 16px; } .hv-tile-workshop, .hv-tile-sale, .hv-tile-quote{ grid-column: span 1; } .hv-mini-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } .hv-tile-sale{ flex-direction: column; align-items: flex-start; } } /* --------------------------------------------------------------- Catalog — "Fresh from the Bench". #home-grid keeps its existing .card markup (rendered by main.js renderHomeGrid/productCardHTML, shared with shop.html) so add-to-cart / quick view / favorite keep working; this only restyles it toward the plate aesthetic and adds the "No. 00X" plate number via a CSS counter (no DOM change needed). --------------------------------------------------------------- */ .hv-catalog-head{ padding: 60px 32px 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: baseline; } .hv-catalog-head h2{ font-family: var(--hv-display); font-weight: 800; font-size: 34px; letter-spacing: -0.025em; color: var(--hv-paper); text-transform: none; margin: 0; } .hv-catalog-head span{ font-family: var(--hv-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hv-text-3); } body.home-v2 #home-grid{ counter-reset: hv-plate; padding: 0 32px 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } body.home-v2 #home-grid .card{ counter-increment: hv-plate; background: none; border: none; border-radius: 0; } body.home-v2 #home-grid .card-media{ border-radius: 16px; aspect-ratio: 4 / 5; background: var(--hv-panel); } body.home-v2 #home-grid .card:hover .card-media img{ transform: scale(1.03); } body.home-v2 #home-grid .card-media img{ transition: transform .25s ease-out; } body.home-v2 #home-grid .card-body{ background: none; padding: 14px 2px 0; } body.home-v2 #home-grid .card-title{ font-family: var(--hv-display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--hv-paper); text-transform: none; } body.home-v2 #home-grid .card:hover .card-title{ color: #ffffff; } body.home-v2 #home-grid .card-desc{ display: none; } body.home-v2 #home-grid .card-tags::before{ content: 'No. ' counter(hv-plate, decimal-leading-zero) ' \00b7 '; font-family: var(--hv-mono); } body.home-v2 #home-grid .card-tags{ font-family: var(--hv-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv-text-4); margin-top: 4px; display: block; } body.home-v2 #home-grid .tag{ background: none; padding: 0; color: var(--hv-text-4); } body.home-v2 #home-grid .card-foot{ margin-top: 12px; } body.home-v2 #home-grid .price{ font-family: var(--hv-mono); color: var(--hv-sand); font-size: 14px; } body.home-v2 #home-grid .price-label{ display: none; } body.home-v2 #home-grid .btn-outline{ border: 1px solid var(--hv-line-btn); color: var(--hv-text-2); font-family: var(--hv-body); } .hv-catalog-more{ text-align: center; padding: 0 32px 72px; } /* --------------------------------------------------------------- Commission CTA — new section --------------------------------------------------------------- */ .hv-commission{ padding: 0 32px 80px; } .hv-commission-inner{ border: 1px solid var(--hv-line); border-radius: 20px; padding: 48px 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; } .hv-commission-eyebrow{ font-family: var(--hv-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--hv-sand); margin-bottom: 16px; } .hv-commission-heading{ font-family: var(--hv-display); font-weight: 800; font-size: 32px; line-height: 1.15; letter-spacing: -0.025em; color: var(--hv-paper); } .hv-commission-heading em{ font-style: normal; color: var(--hv-sand); } .hv-commission .btn{ white-space: nowrap; padding: 15px 28px; } /* --------------------------------------------------------------- Footer — cosmetic-only restyle of the existing footer-grid. --------------------------------------------------------------- */ body.home-v2 .site-footer{ border-top: 1px solid var(--hv-line); } body.home-v2 .site-footer .heading-caption{ font-family: var(--hv-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--hv-paper); text-transform: uppercase; } body.home-v2 .site-footer p, body.home-v2 .site-footer ul a{ font-family: var(--hv-body); color: var(--hv-text-3); } body.home-v2 .site-footer ul a:hover{ color: var(--hv-sand); } body.home-v2 .site-footer .footer-bottom p{ font-family: var(--hv-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--hv-text-4); } body.home-v2 .site-footer .logo-word{ color: var(--hv-paper); } /* Generic .card cosmetic pass — covers the "What's Coming" teaser grid further down the page (which does NOT live inside #home-grid) so the whole homepage reads as one palette. The more specific #home-grid .card rules above still win there. */ body.home-v2 .card{ background: var(--hv-panel); border: none; border-radius: 16px; } body.home-v2 .card-title{ font-family: var(--hv-display); color: var(--hv-paper); text-transform: none; font-weight: 600; } body.home-v2 .card-desc{ font-family: var(--hv-body); color: var(--hv-text-3); } body.home-v2 .card-badge{ font-family: var(--hv-mono); } /* Value strip, craft section — light cosmetic pass so the palette reads as one page instead of switching back to copper mid-scroll. */ body.home-v2 .value-strip .heading-caption{ font-family: var(--hv-display); color: var(--hv-paper); font-weight: 600; text-transform: none; letter-spacing: 0; } body.home-v2 .value-strip svg{ stroke: var(--hv-sand); fill: none; } body.home-v2 #craft .eyebrow{ font-family: var(--hv-mono); color: var(--hv-sand); } body.home-v2 #craft .eyebrow::before{ background: var(--hv-sand); } body.home-v2 #craft h2{ font-family: var(--hv-display); color: var(--hv-paper); text-transform: none; font-weight: 700; } body.home-v2 .process-num{ font-family: var(--hv-mono); color: var(--hv-sand); } body.home-v2 .process-step h3{ font-family: var(--hv-display); color: var(--hv-paper); text-transform: none; font-weight: 600; } body.home-v2 .section .eyebrow{ font-family: var(--hv-mono); color: var(--hv-sand); } body.home-v2 .section .eyebrow::before{ background: var(--hv-sand); } body.home-v2 .section h2{ font-family: var(--hv-display); color: var(--hv-paper); text-transform: none; font-weight: 700; } body.home-v2 .article-title{ font-family: var(--hv-display); color: var(--hv-paper); font-weight: 600; } body.home-v2 .article-cat{ font-family: var(--hv-mono); color: var(--hv-sand); }