/* ========================================================================== Belec — v2 layer (home-v2 PREVIEW). Loaded only on v2 front-controller pages. NAMESPACING CONVENTION (keeps the v2 design fully isolated from the live theme and lets us add more v2 pages without ever clashing with the old CSS): • --bel-* design tokens -> SHARED with the live theme on purpose (same palette/type). v2 reuses them; do NOT fork. • bel-* components -> reused as-is from the theme (.bel-btn, .bel-badge, .bel-product-card, .bel-drawer, .bel-section …) for consistency + trivial migration. v2 never edits these GLOBALLY. • belv2-* v2-only classes-> unique prefix => can never collide with old CSS. • .belv2 PAGE SCOPE -> every v2 page carries (added by its front controller). EVERY rule below is nested under .belv2, which guarantees: (a) v2 rules never apply on non-v2 pages; (b) v2 reliably beats the theme's single-class rules (extra .belv2 raises specificity) -> no !important, load order stops mattering. To add another v2 page: new front controller -> add body class `belv2` + load a `-v2.css` whose rules are all nested under .belv2. Shared v2 utilities can later move to a `v2-base.css` loaded on every v2 page. ========================================================================== */ /* ---- Full-width HOME layout — HOME ONLY (body#index), NOT body.belv2. .belv2 is now site-wide (chrome), so these must stay scoped to the home or they'd collapse the columns/sidebars on category/product/etc. (home.css also sets body#index full-width). ---- */ body#index #columns.container { max-width: none; width: 100%; padding: 0; } body#index #center_column { width: 100%; padding: 0; float: none; } body#index #columns > .row { margin: 0; } body#index #top_column { display: none; } body#index .columns-container { padding: 0; } /* Migration step 1: labels above the "Actuel" / "Nouveau · v2" comparison grids on the real home (these labels live OUTSIDE the .belv2 wrapper, so this rule is intentionally un-scoped; the class is uniquely prefixed so it cannot collide with old CSS). */ .belv2-compare-label { display: block; margin: 28px 0 12px; } /* Hidden blockcart kept in the DOM on the home so cart-drawer.js can read .cart_block. */ .belv2-hooktop-hidden { display: none; } /* ========================================================================== 0) Chrome — render the prototype's announce/header/nav/footer on v2 pages and HIDE the live theme chrome (the module front controller always wraps content in the theme header.tpl/footer.tpl; we can't edit those, so we swap the visible bars here — the assets + column structure are untouched). ========================================================================== */ /* (No theme-chrome hide rules: the v2 chrome now renders site-wide INSTEAD of the theme chrome, so .bel-announce/.header-container/.footer-container aren't output, and breadcrumbs stay visible on inner pages.) */ /* ---- Announce bar (always dark -> --bel-fixed-*) ---- */ .belv2 .belv2-announce { background: var(--bel-fixed-ink); color: var(--bel-fixed-on-ink); font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 20px; display: flex; justify-content: space-between; align-items: center; gap: 20px; overflow: hidden; position: relative; } .belv2 .belv2-announce__scroll { flex: 1 1 0; min-width: 0; display: flex; gap: 36px; white-space: nowrap; animation: belv2-scroll 30s linear infinite; } .belv2 .belv2-announce__item { display: inline-flex; align-items: center; gap: 8px; opacity: .8; } .belv2 .belv2-announce__item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--bel-gold); } .belv2 .belv2-announce__side { position: absolute; top: 0; right: 0; height: 100%; z-index: 2; display: flex; align-items: center; background: var(--bel-fixed-ink); padding: 0 20px 0 16px; } .belv2 .belv2-lang { color: var(--bel-fixed-on-ink); opacity: .6; text-decoration: none; padding: 0 2px; transition: opacity var(--bel-fast) var(--bel-ease); } .belv2 .belv2-lang:hover { opacity: 1; } .belv2 .belv2-lang--active { opacity: 1; font-weight: 700; } @keyframes belv2-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- Header (sticky) ---- */ .belv2 .belv2-header { background: var(--bel-card); border-bottom: 1px solid var(--bel-rule); position: sticky; top: 0; z-index: 40; backdrop-filter: blur(8px); } .belv2 .belv2-header__top { display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 14px 28px; max-width: var(--bel-shell-max, 1480px); margin: 0 auto; } .belv2 .belv2-brand { display: inline-flex; align-items: center; gap: 12px; } .belv2 .belv2-brand__logo { height: 44px; width: auto; display: block; } .belv2 .belv2-brand__tag { font-family: var(--bel-font-mono); font-size: 10px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; color: var(--bel-muted); border-left: 1px solid var(--bel-rule); padding-left: 12px; } /* Search */ .belv2 .belv2-search { position: relative; width: 100%; max-width: 620px; justify-self: center; } .belv2 .belv2-search__input { width: 100%; padding: 12px 44px 12px 42px; background: var(--bel-sheet); border: 1px solid var(--bel-rule); border-radius: 999px; font: inherit; color: var(--bel-ink); outline: none; transition: border-color var(--bel-fast) var(--bel-ease), background var(--bel-fast) var(--bel-ease), box-shadow var(--bel-fast) var(--bel-ease); } .belv2 .belv2-search__input:focus { border-color: var(--bel-ink); background: var(--bel-card); box-shadow: 0 0 0 4px rgba(245, 206, 26, .25); } .belv2 .belv2-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bel-muted); pointer-events: none; display: inline-flex; } .belv2 .belv2-search__kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-family: var(--bel-font-mono); font-size: 10px; background: var(--bel-card); border: 1px solid var(--bel-rule); padding: 3px 7px; border-radius: 4px; color: var(--bel-muted); } /* Header actions */ .belv2 .belv2-hactions { display: flex; align-items: center; gap: 4px; justify-self: end; } .belv2 .belv2-haction { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 8px; transition: background var(--bel-fast) var(--bel-ease); font-family: inherit; font-size: 13px; color: var(--bel-ink-2); position: relative; background: none; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap; } .belv2 .belv2-haction:hover { background: var(--bel-sheet); color: var(--bel-ink); } .belv2 .belv2-haction__count { position: absolute; top: 4px; right: 4px; background: var(--bel-gold); color: var(--bel-gold-ink); font-family: var(--bel-font-mono); font-size: 10px; font-weight: 700; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bel-card); } .belv2 .belv2-haction__count[hidden] { display: none; } /* Nav */ .belv2 .belv2-nav { border-top: 1px solid var(--bel-rule); background: var(--bel-card); } .belv2 .belv2-nav__inner { display: flex; align-items: center; gap: 4px; padding: 0 28px; max-width: var(--bel-shell-max, 1480px); margin: 0 auto; overflow-x: auto; } .belv2 .belv2-nav__link { padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--bel-ink-2); border-bottom: 2px solid transparent; white-space: nowrap; transition: color var(--bel-fast) var(--bel-ease), border-color var(--bel-fast) var(--bel-ease); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; } .belv2 .belv2-nav__link:hover { color: var(--bel-ink); } .belv2 .belv2-nav__link.active { color: var(--bel-ink); border-bottom-color: var(--bel-gold); } .belv2 .belv2-nav__link--all { background: var(--bel-ink); color: var(--bel-paper); padding: 8px 14px; border-radius: 6px; margin: 6px 12px 6px 0; border-bottom: 0; } .belv2 .belv2-nav__link--all:hover { background: var(--bel-ink-2); color: var(--bel-paper); } .belv2 .belv2-nav__pill { margin-left: auto; font-family: var(--bel-font-mono); font-size: 11px; color: var(--bel-muted); padding: 6px 10px; border: 1px solid var(--bel-rule); border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; } .belv2 .belv2-nav__pill .belv2-pulse { width: 6px; height: 6px; background: var(--bel-stock-ok); border-radius: 50%; animation: bel-pulse 2s infinite; } /* ---- Footer (always dark -> --bel-fixed-*) ---- */ .belv2 .belv2-footer { background: var(--bel-fixed-ink); color: var(--bel-fixed-on-ink); padding: 56px 28px 32px; margin-top: 80px; } .belv2 .belv2-footer__inner { max-width: var(--bel-shell-max, 1480px); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; } .belv2 .belv2-footer__brand { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; } .belv2 .belv2-footer__logo { height: 44px; width: auto; } .belv2 .belv2-footer__addr { font-size: 13px; line-height: 1.6; color: rgba(244, 242, 232, .7); max-width: 280px; margin: 0; } .belv2 .belv2-footer__addr a { color: inherit; text-decoration: none; } .belv2 .belv2-footer__addr a:hover { color: var(--bel-gold); } /* Newsletter signup (replicates blocknewsletter: name=submitNewsletter + email + hidden action) */ .belv2 .belv2-footer__news { display: flex; flex-direction: column; gap: 8px; max-width: 280px; } .belv2 .belv2-footer__news label { font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bel-gold); } .belv2 .belv2-footer__news-row { display: flex; gap: 8px; } .belv2 .belv2-footer__news input[type=email] { flex: 1; min-width: 0; padding: 9px 12px; font-size: 13px; color: var(--bel-fixed-on-ink); background: rgba(244, 242, 232, .06); border: 1px solid rgba(244, 242, 232, .2); border-radius: var(--bel-r-sm); outline: none; transition: border-color var(--bel-fast) var(--bel-ease); } .belv2 .belv2-footer__news input[type=email]::placeholder { color: rgba(244, 242, 232, .45); } .belv2 .belv2-footer__news input[type=email]:focus { border-color: var(--bel-gold); } .belv2 .belv2-footer__news button { flex: 0 0 auto; padding: 9px 16px; font-family: var(--bel-font-body); font-size: 13px; font-weight: 600; color: var(--bel-gold-ink); background: var(--bel-gold); border: 0; border-radius: var(--bel-r-sm); cursor: pointer; transition: background var(--bel-fast) var(--bel-ease); } .belv2 .belv2-footer__news button:hover { background: var(--bel-gold-hi); } /* Social icons */ .belv2 .belv2-footer__social { display: flex; gap: 10px; } .belv2 .belv2-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: rgba(244, 242, 232, .75); border: 1px solid rgba(244, 242, 232, .2); border-radius: var(--bel-r-sm); transition: color var(--bel-fast) var(--bel-ease), border-color var(--bel-fast) var(--bel-ease); } .belv2 .belv2-footer__social a:hover { color: var(--bel-gold); border-color: var(--bel-gold); } .belv2 .belv2-footer__col h4 { font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--bel-gold); margin: 0 0 14px; } .belv2 .belv2-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .belv2 .belv2-footer__col a { font-size: 13px; color: rgba(244, 242, 232, .75); cursor: pointer; text-decoration: none; } .belv2 .belv2-footer__col a:hover { color: var(--bel-gold); } .belv2 .belv2-footer__bot { max-width: var(--bel-shell-max, 1480px); margin: 40px auto 0; padding-top: 24px; border-top: 1px solid rgba(244, 242, 232, .1); display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .04em; color: rgba(244, 242, 232, .55); } /* ---- Chrome responsive ---- */ @media (max-width: 980px) { .belv2 .belv2-footer__inner { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .belv2 .belv2-search { display: none; } .belv2 .belv2-footer__inner { grid-template-columns: 1fr 1fr; } .belv2 .belv2-footer__bot { flex-direction: column; align-items: flex-start; } } @media (max-width: 600px) { .belv2 .belv2-haction span:not(.belv2-haction__count) { display: none; } } @media (max-width: 520px) { .belv2 .belv2-footer__inner { grid-template-columns: 1fr; } } /* ========================================================================== 1) Content hero + live product ticker (prototype .hero / .hero__ticker) The hero box is ALWAYS dark -> use --bel-fixed-* (these don't invert in dark) ========================================================================== */ .belv2 .belv2-hero { position: relative; margin: 28px 0 40px; border-radius: var(--bel-r-lg); overflow: hidden; background: var(--bel-fixed-ink); color: var(--bel-fixed-on-ink); min-height: 460px; display: grid; grid-template-columns: 1.2fr 1fr; } .belv2 .belv2-hero__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 85% 40%, rgba(245, 206, 26, 0.28), transparent 60%), repeating-linear-gradient(135deg, transparent 0 40px, rgba(245, 206, 26, 0.04) 40px 41px), var(--bel-fixed-ink); } .belv2 .belv2-hero__content { position: relative; z-index: 2; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .belv2 .belv2-hero__eyebrow { font-family: var(--bel-font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bel-gold); display: inline-flex; align-items: center; gap: 10px; } .belv2 .belv2-hero__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--bel-gold); } .belv2 .belv2-hero__title { font-family: var(--bel-font-display); font-weight: 800; font-size: clamp(42px, 5vw, 76px); line-height: .95; letter-spacing: -.03em; margin: 16px 0 0; color: var(--bel-fixed-on-ink) } .belv2 .belv2-hero__title em { font-style: normal; color: var(--bel-gold); white-space: nowrap; } .belv2 .belv2-hero__sub { max-width: 520px; margin-top: 20px; font-size: 16px; line-height: 1.55; color: rgba(244, 242, 232, .78); } .belv2 .belv2-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; } .belv2 .belv2-hero__meta { display: flex; gap: 36px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid rgba(244, 242, 232, .12); } .belv2 .belv2-hero__meta-num { font-family: var(--bel-font-display); font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--bel-fixed-on-ink); } .belv2 .belv2-hero__meta-label { font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 242, 232, .55); margin-top: 2px; } /* right column — ticker stack (transparent, sits inside the dark hero) */ .belv2 .belv2-hero__ticker { position: relative; z-index: 2; padding: 40px 48px 40px 24px; display: flex; flex-direction: column; gap: 12px; justify-content: center; } .belv2 .belv2-hero__ticker-head { display: flex; justify-content: space-between; align-items: center; padding: 0 16px 10px; font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(244, 242, 232, .55); border-bottom: 1px solid rgba(244, 242, 232, .1); } .belv2 .belv2-hero__ticker-head span:last-child { display: inline-flex; align-items: center; gap: 6px; } .belv2 .belv2-hero__ticker-head .belv2-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--bel-gold); animation: belv2-blink 1.5s infinite; } @keyframes belv2-blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .belv2 .belv2-hero__ticker-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 8px; background: rgba(244, 242, 232, .04); border: 1px solid rgba(244, 242, 232, .08); font-size: 13px; transition: all .15s var(--bel-ease); } .belv2 .belv2-hero__ticker-row:hover { background: rgba(245, 206, 26, .08); border-color: rgba(245, 206, 26, .25); } .belv2 .belv2-hero__ticker-row .name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; } .belv2 .belv2-hero__ticker-row__sku { font-family: var(--bel-font-mono); font-size: 11px; color: rgba(244, 242, 232, .5); margin-top: 2px; } .belv2 .belv2-hero__ticker-row__price { font-family: var(--bel-font-display); font-weight: 700; font-size: 16px; } .belv2 .belv2-hero__ticker-row__tag { font-family: var(--bel-font-mono); font-size: 10px; padding: 3px 7px; border-radius: 3px; letter-spacing: .08em; text-transform: uppercase; } .belv2 .belv2-hero__ticker-row__tag--new { background: rgba(23, 107, 58, .22); color: #70d99a; } .belv2 .belv2-hero__ticker-row__tag--used { background: rgba(245, 206, 26, .18); color: var(--bel-gold); } /* ========================================================================== 2) Categories icon grid (prototype .cat-grid / .cat-tile) ========================================================================== */ .belv2 .belv2-cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .belv2 .belv2-cat-tile { position: relative; overflow: hidden; padding: 20px 16px; min-height: 140px; background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); cursor: pointer; display: flex; flex-direction: column; gap: 10px; justify-content: space-between; transition: all .15s var(--bel-ease); text-decoration: none; color: inherit; } .belv2 .belv2-cat-tile:hover { border-color: var(--bel-ink); transform: translateY(-2px); box-shadow: var(--bel-shadow-md); } .belv2 .belv2-cat-tile__icon { width: 36px; height: 36px; color: var(--bel-ink); display: flex; align-items: center; justify-content: center; } .belv2 .belv2-cat-tile__name { font-weight: 600; font-size: 14px; line-height: 1.25; color: var(--bel-ink); } .belv2 .belv2-cat-tile__count { font-family: var(--bel-font-mono); font-size: 11px; color: var(--bel-muted); } .belv2 .belv2-cat-tile__corner { position: absolute; top: -8px; right: -8px; width: 40px; height: 40px; background: var(--bel-gold); transform: rotate(45deg); opacity: 0; transition: opacity .15s var(--bel-ease); } .belv2 .belv2-cat-tile:hover .belv2-cat-tile__corner { opacity: 1; } /* ========================================================================== 3) Pitch — 4-up value props (prototype .pitch) ========================================================================== */ .belv2 .belv2-pitch { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); overflow: hidden; background: var(--bel-card); } .belv2 .belv2-pitch__item { padding: 24px; border-right: 1px solid var(--bel-rule); display: flex; gap: 14px; align-items: flex-start; } .belv2 .belv2-pitch__item:last-child { border-right: 0; } .belv2 .belv2-pitch__icon { width: 40px; height: 40px; flex-shrink: 0; background: var(--bel-sheet); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--bel-ink); } .belv2 .belv2-pitch__title { font-weight: 600; font-size: 14px; margin: 0 0 4px; color: var(--bel-ink); } .belv2 .belv2-pitch__text { font-size: 13px; line-height: 1.5; color: var(--bel-muted); margin: 0; } /* ========================================================================== 4) Surplus CTA — reuse .bel-valueprop; only fix the ghost button on gold. Scoped .belv2 .belv2-on-gold (0,0,2,0) beats theme .bel-btn--ghost (0,0,1,0) on specificity -> no !important needed. ========================================================================== */ .belv2 .belv2-on-gold { border-color: var(--bel-gold-ink); color: var(--bel-gold-ink); } .belv2 .belv2-on-gold:hover { background: rgba(43, 33, 0, .08); } /* ========================================================================== 4b) Product card — prototype .prod-card (floating "+" add, favorite heart, hover) Used by _partials/product-card-v2.tpl in the home-v2 product grids. ========================================================================== */ .belv2 .belv2-prod-card { position: relative; background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .15s var(--bel-ease), box-shadow .15s var(--bel-ease), border-color .15s var(--bel-ease); } .belv2 .belv2-prod-card .wishlist { display: none; } .belv2 .belv2-prod-card:hover { border-color: var(--bel-ink-3); transform: translateY(-2px); box-shadow: var(--bel-shadow-md); } .belv2 .belv2-prod-card__media { position: relative; aspect-ratio: 1; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--bel-rule); } .belv2 .belv2-prod-card__img { width: 70%; height: 70%; object-fit: contain; transition: transform .3s var(--bel-ease); } .belv2 .belv2-prod-card:hover .belv2-prod-card__img { transform: scale(1.05); } .belv2 .belv2-prod-card__chip { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; } .belv2 .belv2-prod-card__heart { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; background: rgba(255, 255, 255, .9); border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--bel-muted); cursor: pointer; opacity: 0; backdrop-filter: blur(4px); transition: opacity .12s var(--bel-ease), color .12s var(--bel-ease), transform .12s var(--bel-ease); } .belv2 .belv2-prod-card:hover .belv2-prod-card__heart { opacity: 1; } .belv2 .belv2-prod-card__heart:hover { color: var(--bel-gold-lo); transform: scale(1.1); } .belv2 .belv2-prod-card__heart.active { color: var(--bel-stock-out); opacity: 1; } .belv2 .belv2-prod-card__heart.active svg { fill: currentColor; } .belv2 .belv2-prod-card__body { padding: var(--bel-card-pad); display: flex; flex-direction: column; gap: 6px; flex: 1; } .belv2 .belv2-prod-card__brand { font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bel-muted); } .belv2 .belv2-prod-card__title { font-size: 14px; font-weight: 500; line-height: 1.35; margin: 0; color: var(--bel-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(14px * 1.35 * 2); } .belv2 .belv2-prod-card__sku { font-family: var(--bel-font-mono); font-size: 11px; color: var(--bel-muted-2); } .belv2 .belv2-prod-card__foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: auto; padding-top: 10px; gap: 8px; } .belv2 .belv2-prod-card__price { font-family: var(--bel-font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--bel-ink); } .belv2 .belv2-prod-card__price-old { font-size: 12px; color: var(--bel-muted); text-decoration: line-through; margin-left: 6px; font-weight: 400; } .belv2 .belv2-prod-card__stock { font-family: var(--bel-font-mono); font-size: 10px; color: var(--bel-stock-ok); text-transform: uppercase; letter-spacing: .08em; display: inline-flex; align-items: center; gap: 5px; } .belv2 .belv2-prod-card__stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .belv2 .belv2-prod-card__stock--low { color: var(--bel-stock-low); } .belv2 .belv2-prod-card__stock--out { color: var(--bel-stock-out); } .belv2 .belv2-prod-card__add { position: absolute; bottom: var(--bel-card-pad); right: var(--bel-card-pad); width: 36px; height: 36px; background: var(--bel-ink); color: var(--bel-paper); border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(6px); transition: opacity .15s var(--bel-ease), transform .15s var(--bel-ease), background .15s var(--bel-ease), color .15s var(--bel-ease); } .belv2 .belv2-prod-card:hover .belv2-prod-card__add { opacity: 1; transform: translateY(0); } .belv2 .belv2-prod-card__add:hover { background: var(--bel-gold); color: var(--bel-gold-ink); } /* touch devices have no hover -> keep the heart + add reachable */ @media (hover: none) { .belv2 .belv2-prod-card__heart, .belv2 .belv2-prod-card__add { opacity: 1; transform: none; } } /* ========================================================================== 5) Mock cart drawer backdrop (the drawer reuses .bel-drawer / .bel-cart-line) Separate from the theme's .bel-drawer-backdrop so the real cart JS is untouched. ========================================================================== */ .belv2 .belv2-backdrop { position: fixed; inset: 0; background: rgba(14, 14, 12, .5); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; transition: opacity var(--bel-base) var(--bel-ease), visibility var(--bel-base) var(--bel-ease); z-index: 1190; } .belv2 .belv2-backdrop.is-open { opacity: 1; visibility: visible; } /* keep the mock drawer above its backdrop */ .belv2 #belv2-cart-drawer { z-index: 1200; } .belv2 .belv2-cart-drawer__total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1180px) { .belv2 .belv2-cat-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 980px) { .belv2 .belv2-hero { grid-template-columns: 1fr; } .belv2 .belv2-hero__ticker { order: -1; } .belv2 .belv2-cat-grid { grid-template-columns: repeat(3, 1fr); } .belv2 .belv2-pitch { grid-template-columns: repeat(2, 1fr); } .belv2 .belv2-pitch__item:nth-child(2) { border-right: 0; } .belv2 .belv2-pitch__item:nth-child(1), .belv2 .belv2-pitch__item:nth-child(2) { border-bottom: 1px solid var(--bel-rule); } } @media (max-width: 760px) { .belv2 .belv2-hero__content { padding: 32px 24px; } .belv2 .belv2-hero__ticker { display: none; } .belv2 .belv2-cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .belv2 .belv2-pitch { grid-template-columns: 1fr; } .belv2 .belv2-pitch__item { border-right: 0; border-bottom: 1px solid var(--bel-rule); } .belv2 .belv2-pitch__item:last-child { border-bottom: 0; } } /* ========================================================================== /surplus — buy-back landing (real page). Ported from v2-pages.css (preview-only) to here (site-wide) so the styles apply on the real route. Selectors target the site-wide `.belv2` body class. Width recipe + honeypot + form polish below. ========================================================================== */ /* match the catalog/account width recipe — full-bleed #columns + .bel-shell wrap */ body.belv2-surplus #columns.container { max-width: none; width: 100%; padding: 0; } body.belv2-surplus #center_column { width: 100%; padding: 0; float: none; } body.belv2-surplus .columns-container { padding: 0; } body.belv2-surplus #columns > .row { margin: 0; } /* breadcrumb-hide for belv2-surplus is grouped in components.css (shared) */ /* Hero (ALWAYS dark — uses --bel-fixed-* tokens) */ .belv2 .belv2-surplus-hero { background: var(--bel-fixed-ink); color: var(--bel-fixed-on-ink); border-radius: var(--bel-r-lg); padding: 64px 56px; margin: 24px 0 40px; position: relative; overflow: hidden; min-height: 380px; display: flex; flex-direction: column; justify-content: center; } .belv2 .belv2-surplus-hero__bg { position: absolute; inset: 0; background: radial-gradient(circle at 80% 30%, rgba(245,206,26,.2), transparent 50%), repeating-linear-gradient(0deg, transparent 0 30px, rgba(245,206,26,.03) 30px 31px); } .belv2 .belv2-surplus-hero__stamp { position: absolute; top: 40px; right: 60px; font-family: var(--bel-font-display); font-weight: 800; font-size: 200px; color: rgba(245,206,26,.06); line-height: 1; pointer-events: none; } .belv2 .belv2-surplus-hero__content { position: relative; max-width: 680px; } .belv2 .belv2-surplus-hero__title { font-family: var(--bel-font-display); font-size: clamp(44px, 6vw, 84px); font-weight: 800; line-height: .95; letter-spacing: -.03em; margin: 12px 0 18px; color: var(--bel-fixed-on-ink); } .belv2 .belv2-surplus-hero__title em { font-style: normal; color: var(--bel-gold); } .belv2 .belv2-surplus-hero__sub { font-size: 17px; line-height: 1.55; color: rgba(244,242,232,.8); } .belv2 .belv2-hero__eyebrow { color: rgba(244,242,232,.6); } /* Steps */ .belv2 .belv2-surplus-steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-md); overflow: hidden; margin-bottom: 40px; } .belv2 .belv2-surplus-step { padding: 24px; border-right: 1px solid var(--bel-rule); background: var(--bel-card); display: flex; flex-direction: column; gap: 10px; } .belv2 .belv2-surplus-step:last-child { border-right: 0; } .belv2 .belv2-surplus-step__num { font-family: var(--bel-font-display); font-weight: 800; font-size: 36px; color: var(--bel-gold); letter-spacing: -.02em; line-height: 1; } .belv2 .belv2-surplus-step__title { font-weight: 600; font-size: 15px; color: var(--bel-ink); } .belv2 .belv2-surplus-step__text { font-size: 13px; color: var(--bel-muted); line-height: 1.5; margin: 0; } /* Form */ .belv2 .belv2-surplus-form { background: var(--bel-card); border: 1px solid var(--bel-rule); border-radius: var(--bel-r-lg); padding: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .belv2 .belv2-surplus-form__head { grid-column: 1 / -1; margin-bottom: 8px; } .belv2 .belv2-surplus-form__head h3 { font-family: var(--bel-font-display); font-size: 24px; margin: 0; color: var(--bel-ink); } .belv2 .belv2-surplus-form__head p { color: var(--bel-muted); margin: 6px 0 0; font-size: 14px; } .belv2 .belv2-field { display: flex; flex-direction: column; gap: 6px; } .belv2 .belv2-field--full { grid-column: 1 / -1; } .belv2 .belv2-field label { font-family: var(--bel-font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--bel-muted); } .belv2 .belv2-field input, .belv2 .belv2-field textarea, .belv2 .belv2-field select { padding: 11px 14px; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); background: var(--bel-card); font: inherit; color: var(--bel-ink); outline: none; transition: border-color .12s var(--bel-ease), box-shadow .12s var(--bel-ease); } .belv2 .belv2-field input:focus, .belv2 .belv2-field textarea:focus, .belv2 .belv2-field select:focus { border-color: var(--bel-ink); box-shadow: 0 0 0 3px rgba(245,206,26,.25); } .belv2 .belv2-field textarea { resize: vertical; min-height: 100px; } /* Form foot: privacy note left + submit right */ .belv2 .belv2-surplus-form__foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .belv2 .belv2-surplus-form__note { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--bel-muted); } /* Errors list */ .belv2 .belv2-surplus-errors { color: var(--bel-stock-out); background: rgba(174, 49, 49, .06); border: 1px solid rgba(174, 49, 49, .2); border-radius: var(--bel-r-sm); padding: 10px 12px 10px 30px; font-size: 13px; } /* Success state */ .belv2 .belv2-surplus-form--sent { text-align: center; padding: 48px 32px; display: block; } .belv2 .belv2-surplus-form--sent .belv2-surplus-form__head { text-align: center; margin-bottom: 20px; } .belv2 .belv2-surplus-form--sent .belv2-surplus-form__head h3 { font-size: 28px; } /* Honeypot — visually hidden but in the DOM. Bots fill it; humans don't see it. */ .belv2 .belv2-surplus-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Responsive */ @media (max-width: 980px) { .belv2 .belv2-surplus-hero { padding: 48px 32px; min-height: 320px; } .belv2 .belv2-surplus-hero__stamp { font-size: 140px; right: 20px; top: 20px; } .belv2 .belv2-surplus-steps { grid-template-columns: repeat(2, 1fr); } .belv2 .belv2-surplus-step:nth-child(2) { border-right: 0; } .belv2 .belv2-surplus-step:nth-child(1), .belv2 .belv2-surplus-step:nth-child(2) { border-bottom: 1px solid var(--bel-rule); } .belv2 .belv2-surplus-form { grid-template-columns: 1fr; padding: 24px; } } @media (max-width: 520px) { .belv2 .belv2-surplus-hero { padding: 32px 20px; } .belv2 .belv2-surplus-hero__stamp { font-size: 96px; } .belv2 .belv2-surplus-steps { grid-template-columns: 1fr; } .belv2 .belv2-surplus-step { border-right: 0; border-bottom: 1px solid var(--bel-rule); } .belv2 .belv2-surplus-step:last-child { border-bottom: 0; } } /* ========================================================================== Unified form-select skin (site-wide). Loaded LAST so it beats per-context rules that used `background:` shorthand (which wiped the chevron). Native selects are used everywhere now (jQuery Uniform skinning disabled in statesManagement.js / stores.js / blocklayered.js), so this is the single source of truth for selects. Catalog toolbar selects (.selectProductSort / .nbrItemPage select / #belv2-sort / .belv2-cat-toolbar__sort select) are intentionally NOT matched here — they keep their own compact toolbar styling. background-color + background-image are set SEPARATELY so a later `background:` shorthand can't silently drop the chevron. ========================================================================== */ select.form-control, .form-group select, fieldset select, .std select, .contact-form-box select, #id_contact, .bel-field select, .belv2-field select, .belv2 .belv2-field select, .belv2-checkout select.form-control, .attribute_select, .belv2-pdp .attribute_select, .bel-pdp .attribute_select, .address_select { -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: var(--bel-font-body); font-size: 14px; color: var(--bel-ink); height: auto; min-height: 42px; padding: 10px 38px 10px 12px; line-height: 1.3; cursor: pointer; border: 1px solid var(--bel-rule); border-radius: var(--bel-r-sm); box-shadow: none; background-color: var(--bel-card); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233A3A33' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 15px; text-overflow: ellipsis; transition: border-color var(--bel-fast) var(--bel-ease), box-shadow var(--bel-fast) var(--bel-ease); } select.form-control::-ms-expand, .form-group select::-ms-expand, .contact-form-box select::-ms-expand, .attribute_select::-ms-expand { display: none; } select.form-control:hover, .form-group select:hover, .contact-form-box select:hover, .bel-field select:hover, .belv2-field select:hover, .belv2-checkout select.form-control:hover, .attribute_select:hover { border-color: var(--bel-ink-3); } select.form-control:focus, .form-group select:focus, fieldset select:focus, .std select:focus, .contact-form-box select:focus, #id_contact:focus, .bel-field select:focus, .belv2-field select:focus, .belv2 .belv2-field select:focus, .belv2-checkout select.form-control:focus, .attribute_select:focus, .belv2-pdp .attribute_select:focus, .bel-pdp .attribute_select:focus, .address_select:focus { outline: none; border-color: var(--bel-ink); box-shadow: 0 0 0 3px rgba(245, 206, 26, .28); }