/* Theme Name: Blocksy Factory Child Template: blocksy Description: Client Site Factory child theme. Brand palette is applied by scripts/apply-brand.sh (lines marked @brand:*). Mirrors the proven a1-compounds/rts pattern: CSS custom properties override Blocksy surfaces; theme.json carries the block-editor palette. Version: 1.0.6 */ /* Google Fonts — must precede all CSS rules. Vegas Tides "Marble Vault" type system. */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* @brand markers — apply-brand.sh rewrites the hex on each marked line */ --bpc-primary: #C9A227; /* @brand:primary */ --bpc-primary-hover: #E6C766; /* @brand:primary-hover */ --bpc-foreground: #F5EFE0; /* @brand:foreground */ --bpc-body: #C9C4B8; /* @brand:body */ --bpc-background: #0A0A0B; /* @brand:background */ --bpc-card: #121214; /* @brand:card */ --bpc-border: #342B11; /* @brand:border */ --bpc-background-deeper: #060607; /* @brand:background-deeper */ /* Marble Vault type system */ --bpc-font-display: 'Cinzel', serif; /* headings, wordmark, gilded display */ --bpc-font-serif: 'Cormorant Garamond', serif; /* editorial accents */ --bpc-font-sans: 'Inter', system-ui, sans-serif; /* body */ --bpc-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* prices, SKUs */ --bpc-radius: 20px; /* Gold hairline — translucent companion to the solid --bpc-border stand-in */ --bpc-border-gold: rgba(201, 162, 39, 0.22); } /* Force the client palette onto Blocksy's surfaces (mirrors a1-compounds !important pattern) */ body { background: var(--bpc-background) !important; color: var(--bpc-foreground) !important; font-family: var(--bpc-font-sans); } a { color: var(--bpc-primary); } a:hover { color: var(--bpc-primary-hover); } /* Map the brand onto Blocksy's OWN palette variables. WITHOUT this, Blocksy renders buttons, links, breadcrumbs, the active-nav state, tags, and the add-to-cart CTA in its default accent #2872FA — off-brand AND only 4.31:1 on white (fails WCAG AA). apply-brand.sh fills --bpc-* above; these inherit it. !important is required: Blocksy emits its own :root palette inline in AFTER this stylesheet, so only an !important custom-property declaration wins the cascade. */ :root { --theme-palette-color-1: var(--bpc-primary) !important; /* links, buttons, accents, active nav */ --theme-palette-color-2: var(--bpc-primary-hover) !important; /* hover / darker accent */ --theme-palette-color-3: var(--bpc-foreground) !important; /* headings, dark text */ --theme-palette-color-4: var(--bpc-primary-hover) !important; /* secondary / meta text */ --theme-palette-color-5: var(--bpc-border) !important; /* borders */ --theme-palette-color-6: var(--bpc-card) !important; /* light surfaces */ --theme-palette-color-8: var(--bpc-background) !important; /* base background */ } /* ---- Age gate: premium brand skin (one-click 21+ confirm) ---- */ .age-gate__wrapper { position: fixed !important; inset: 0 !important; z-index: 999999 !important; display: grid !important; place-items: center !important; width: 100vw !important; min-height: 100dvh !important; max-width: none !important; padding: clamp(20px, 4vw, 48px) !important; overflow-y: auto !important; overscroll-behavior: contain; border-radius: 0 !important; box-shadow: none !important; background: radial-gradient(circle at 50% 18%, rgba(201, 162, 39, .16), transparent 42%), rgba(6, 6, 7, .96) !important; } .age-gate__background, .age-gate__background-color, .age-gate__loader { display: none !important; } .age-gate__wrapper .age-gate { width: min(100%, 700px) !important; max-width: 700px !important; margin: 0 auto !important; padding: clamp(34px, 5vw, 52px) !important; border: 1px solid var(--bpc-border-gold) !important; border-radius: 20px !important; background: #121214 !important; box-shadow: 0 28px 80px rgba(0, 0, 0, .58) !important; color: var(--bpc-foreground) !important; text-align: center !important; } .age-gate__form { display: grid !important; gap: 18px !important; margin: 0 !important; } .age-gate__buttons { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: center !important; gap: 12px !important; } .age-gate__buttons .age-gate__submit { flex: 1 1 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .age-gate__heading-title { font-family: var(--bpc-font-display) !important; color: var(--bpc-primary); font-size: 30px; font-weight: 800; letter-spacing: -0.01em; } .age-gate__subheadline { font-family: var(--bpc-font-sans) !important; color: var(--bpc-foreground); font-size: 15px; line-height: 1.55; max-width: 32ch; margin: 10px auto 22px; } .age-gate__button, .age-gate__submit { font-family: var(--bpc-font-display) !important; border-radius: 999px !important; padding: 13px 30px !important; font-weight: 700; font-size: 15px; border: 2px solid var(--bpc-primary) !important; cursor: pointer; transition: background .15s ease, color .15s ease; } .age-gate__button--yes, .age-gate__submit--yes { background: var(--bpc-primary) !important; color: #fff !important; } .age-gate__button--yes:hover, .age-gate__submit--yes:hover { background: var(--bpc-primary-hover) !important; border-color: var(--bpc-primary-hover) !important; } .age-gate__button--no, .age-gate__submit--no { background: transparent !important; color: var(--bpc-primary) !important; } .age-gate__button--no:hover, .age-gate__submit--no:hover { background: var(--bpc-border) !important; } .age-gate__remember-wrapper, .age-gate__remember { font-family: var(--bpc-font-sans) !important; color: var(--bpc-foreground); font-size: 13px; } .age-gate__errors { color: #b3261e; font-size: 14px; } @media (max-width: 689px) { .age-gate__wrapper { padding: 18px !important; } .age-gate__wrapper .age-gate { width: 100% !important; padding: 30px 22px !important; } .age-gate__buttons { flex-direction: column !important; } .age-gate__buttons .age-gate__submit { width: 100% !important; } } @media (max-height: 620px) { .age-gate__wrapper { place-items: start center !important; } } /* ---- Marble Vault typography overrides ---- Blocksy emits dynamic typography CSS in that beats the child stylesheet on specificity/order, so font-family must be forced with !important. Body = Inter, all headings + wordmark = Cinzel, monospace utility (prices/SKUs) = JetBrains Mono. */ body, .entry-content, p, li, td, th, input, select, textarea, button { font-family: var(--bpc-font-sans) !important; } h1, h2, h3, h4, h5, h6, .site-title, .entry-title, .woocommerce-loop-product__title, .product_title { font-family: var(--bpc-font-display) !important; } .price, .amount, .woocommerce-Price-amount, .sku, code, kbd, pre { font-family: var(--bpc-font-mono) !important; } /* ---- Logo presence (Austin's bar): header mark >=48px tall on desktop ---- Blocksy caps logo WIDTH by default, which lands this 900x462 mark at ~50px tall. Setting a height floor + auto width makes the 54px ceiling the binding constraint. */ [data-id="logo"] .site-logo-container img, .site-logo-container img { height: 54px !important; max-height: 54px !important; width: auto !important; max-width: none !important; } @media (max-width: 768px) { [data-id="logo"] .site-logo-container img, .site-logo-container img { height: 46px !important; max-height: 46px !important; } } .site-title { font-size: 26px !important; font-family: var(--bpc-font-display) !important; letter-spacing: 0.02em; } /* ---- Front page: suppress Blocksy's auto "Home" page-title hero ---- The static front page renders a duplicate "Home" H1 in the page header. The homepage copy/layout supplies its own H1, so hide the theme header on the front page only (csf-assemble step 7). */ body.home .entry-header, body.home .page-title, body.home .hero-section[data-type] { display: none !important; } /* ════════════════════════════════════════════════════════════════════════ MANUS "MARBLE VAULT" HOMEPAGE PORT (Phase G3 — faithful port of clients/vegas-tides/manus/index.html). All rules namespaced .vt-* so they cannot leak into shop/product/policy pages. Tokens reuse the --bpc-* set already declared above; the extended Manus ramp + glass tokens are added here. ════════════════════════════════════════════════════════════════════════ */ :root{ /* translucent gold hairline used by the Manus surfaces (solid --bpc-border stays the @brand marker; this is the design's intended rgba hairline) */ --vt-border: rgba(201,162,39,.22); --vt-gold-deep:#8A6D1F; --vt-gold-grad:linear-gradient(180deg,#F2E2A6 0%,#E6C766 35%,#C9A227 65%,#8A6D1F 100%); --vt-glass:rgba(255,255,255,.045); --vt-glass-border:rgba(255,255,255,.10); --vt-light:#EDEAE3; --vt-ink:#16140F; } /* ── Front-page chrome suppression ── The Marble Vault ships its own floating glass nav pill + footer, so the stock Blocksy header AND footer are hidden on the front page only. This is ALSO carried-fix (b): hiding #header removes the duplicate logo-mark + Cinzel wordmark — the pill carries the single logo mark. */ body.home #header, body.home .ct-header, body.home header[data-device]{ display:none !important; } body.home .site-main > .ct-container, body.home .entry-content{ margin:0 !important; padding:0 !important; max-width:none !important; } body.home .entry-content > *{ margin-block:0; } body.home #main, body.home .site-main{ padding:0 !important; } /* let the bands run edge-to-edge even inside Blocksy's constrained content */ body.home .vt-band{ width:100vw; margin-left:calc(50% - 50vw); } /* ── shared layout primitives ── */ .vt-rail{width:100%;max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)} .vt-band{position:relative;width:100%} .vt-band, .vt-band *{ box-sizing:border-box; } .vt-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--bpc-font-mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--bpc-primary-hover);background:var(--vt-glass);border:1px solid var(--vt-glass-border);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:8px 16px;border-radius:999px} .vt-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--vt-gold-grad);box-shadow:0 0 10px var(--bpc-primary)} .vt-h2{font-family:var(--bpc-font-display) !important;font-weight:600;color:var(--bpc-foreground) !important;font-size:clamp(28px,3.6vw,46px);line-height:1.1;letter-spacing:.01em} .vt-h2 em{font-style:normal;background:var(--vt-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .vt-lead{font-size:16.5px;line-height:1.65;max-width:60ch;color:var(--bpc-body)} .vt-sectionhead{display:flex;flex-direction:column;gap:16px;align-items:flex-start;margin-bottom:40px} .vt-sectionhead.is-center{align-items:center;text-align:center} /* ── buttons ── */ .vt-btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--bpc-font-sans) !important;font-weight:600;font-size:14.5px;letter-spacing:.02em;padding:14px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s,color .25s;text-decoration:none} .vt-btn--solid{background:var(--vt-gold-grad);color:#1a1505 !important;box-shadow:0 10px 30px rgba(201,162,39,.28)} .vt-btn--solid:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(201,162,39,.42);color:#1a1505 !important} .vt-btn--ghost{background:transparent;color:var(--bpc-foreground) !important;border-color:var(--vt-glass-border)} .vt-btn--ghost:hover{border-color:var(--bpc-primary);color:var(--bpc-primary-hover) !important} /* ── 1. HEADER — floating glass nav pill ── */ .vt-nav{position:fixed;z-index:9999;top:18px;left:50%;transform:translateX(-50%);width:min(1200px,calc(100% - 32px)); display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 12px 10px 22px; background:rgba(10,10,11,.6);border:1px solid var(--vt-glass-border);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:999px;box-shadow:0 12px 34px rgba(0,0,0,.45)} .vt-nav__logo{height:48px;width:auto;filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))} .vt-nav__links{display:flex;gap:28px;font-size:13.5px;letter-spacing:.04em;color:var(--bpc-body)} .vt-nav__links a{transition:color .2s;color:var(--bpc-body);text-decoration:none} .vt-nav__links a:hover{color:var(--bpc-primary-hover)} .vt-nav__right{display:flex;align-items:center;gap:14px} .vt-nav__cta{font-size:13px;font-weight:600;color:#1a1505 !important;background:var(--vt-gold-grad);padding:9px 20px;border-radius:999px;text-decoration:none} .vt-nav__cart{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:999px;border:1px solid var(--vt-glass-border);color:var(--bpc-primary-hover)} .vt-nav__cart svg{width:18px;height:18px} .vt-nav__burger{display:none;width:40px;height:40px;border-radius:999px;border:1px solid var(--vt-glass-border);color:var(--bpc-foreground);align-items:center;justify-content:center} @media(max-width:900px){ .vt-nav__links{display:none} .vt-nav__cta{display:none} .vt-nav__burger{display:inline-flex} } /* ── 2. HERO ── */ .vt-hero{position:relative;isolation:isolate;overflow:hidden;min-height:760px;display:flex;align-items:center;background:#000} .vt-hero__media{ position:absolute;inset:0;z-index:0;overflow:hidden; background:#050506 url('assets/home/vegas-tides-homepage-hero-poster.webp') 82% center/cover no-repeat; } .vt-hero__video{ position:absolute;inset:0;width:100%;height:100%;display:block; object-fit:cover;object-position:82% center; } .vt-hero__media::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(4,4,5,.92) 0%,rgba(4,4,5,.82) 34%,rgba(4,4,5,.38) 56%,rgba(4,4,5,.08) 78%); } .vt-hero .vt-rail{position:relative;z-index:3;width:100%;display:grid;grid-template-columns:1.12fr .88fr;align-items:center;gap:24px;padding-top:150px;padding-bottom:90px} .vt-hero__copy{position:relative;z-index:2} .vt-hero__title{font-family:var(--bpc-font-display) !important;color:var(--bpc-foreground) !important;font-weight:600;line-height:1.07;letter-spacing:.01em;margin:22px 0 0;font-size:clamp(38px,5.4vw,72px)} .vt-hero__title em{font-style:normal;display:inline-block;background:var(--vt-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .vt-hero__sub{font-size:17px;line-height:1.62;max-width:50ch;margin:22px 0 0;color:var(--bpc-body)} .vt-hero__ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap} .vt-hero__trust{display:flex;gap:24px;margin-top:30px;flex-wrap:wrap} .vt-hero__trust span{font-size:12.5px;letter-spacing:.03em;color:var(--bpc-body);opacity:.85;display:inline-flex;align-items:center;gap:8px} .vt-hero__trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--bpc-primary)} .vt-hero__ruo{margin-top:30px;font-family:var(--bpc-font-mono);font-size:11px;letter-spacing:.07em;color:rgba(201,196,184,.5)} .vt-hero__art{position:relative;z-index:2;justify-self:center;align-self:stretch;display:flex;align-items:center;justify-content:center} .vt-hero__vial{width:min(420px,92%);height:auto;-webkit-mask-image:radial-gradient(70% 78% at 50% 46%,#000 55%,transparent 86%);mask-image:radial-gradient(70% 78% at 50% 46%,#000 55%,transparent 86%);filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))} @media(max-width:900px){ .vt-hero{min-height:660px} .vt-hero__media{background-position:80% center} .vt-hero__video{object-position:80% center} .vt-hero__media::after{ background:linear-gradient(90deg,rgba(4,4,5,.90) 0%,rgba(4,4,5,.78) 58%,rgba(4,4,5,.30) 100%); } .vt-hero .vt-rail{grid-template-columns:1fr;padding-top:130px;padding-bottom:64px} .vt-hero__copy{max-width:min(620px,78%)} } @media(max-width:520px){ .vt-hero{min-height:720px;align-items:flex-start} .vt-hero__media{background-position:80% center} .vt-hero__video{object-position:80% center} .vt-hero__media::after{ background: linear-gradient(180deg,rgba(4,4,5,.78) 0%,rgba(4,4,5,.70) 52%,rgba(4,4,5,.28) 78%,rgba(4,4,5,.10) 100%), linear-gradient(90deg,rgba(4,4,5,.84) 0%,rgba(4,4,5,.64) 66%,rgba(4,4,5,.18) 100%); } .vt-hero .vt-rail{padding-top:122px;padding-bottom:48px} .vt-hero__copy{max-width:100%} .vt-hero__title{font-size:clamp(36px,11.2vw,48px)} .vt-hero__sub{font-size:15px;line-height:1.55;max-width:32ch} .vt-hero__trust{gap:12px 18px;margin-top:24px} .vt-hero__ruo{max-width:34ch;margin-top:24px} } @media(prefers-reduced-motion:reduce){ .vt-hero__video{display:none} } /* ── 3. TICKER / utility band ── */ .vt-ticker{background:var(--bpc-background-deeper);border-top:1px solid var(--vt-border);border-bottom:1px solid var(--vt-border)} .vt-ticker .vt-rail{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding-top:18px;padding-bottom:18px} .vt-ticker__item{display:inline-flex;align-items:center;gap:10px;letter-spacing:.05em;color:var(--bpc-body);text-transform:uppercase;font-family:var(--bpc-font-mono);font-size:11.5px} .vt-ticker__item svg{width:16px;height:16px;color:var(--bpc-primary)} /* ── 4. CATEGORY GRID ── */ .vt-cats{background:var(--bpc-background);padding:96px 0} .vt-cats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .vt-cat{position:relative;border:1px solid var(--vt-border);border-radius:var(--bpc-radius);overflow:hidden;background:var(--bpc-card);transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column;text-decoration:none} .vt-cat:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(0,0,0,.5);border-color:var(--bpc-primary)} .vt-cat:hover .vt-cat__img{transform:scale(1.04)} .vt-cat__well{position:relative;aspect-ratio:1/1;overflow:hidden;background:#1a1a1c} .vt-cat__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .5s} .vt-cat__well::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,18,20,0) 55%,var(--bpc-card) 100%)} .vt-cat__body{position:relative;z-index:2;padding:22px 22px 24px;display:flex;flex-direction:column;flex:1} .vt-cat__title{font-family:var(--bpc-font-display) !important;font-size:20px;color:var(--bpc-foreground) !important;font-weight:600;letter-spacing:.02em;line-height:1.15} .vt-cat__desc{font-size:13px;margin-top:8px;color:var(--bpc-body);opacity:.85;flex:1} .vt-cat__link{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--bpc-primary-hover);text-transform:uppercase;font-family:var(--bpc-font-mono)} @media(max-width:980px){.vt-cats__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.vt-cats__grid{grid-template-columns:1fr}} /* ── 5. FEATURED PRODUCTS (dark band) — Woo loop styled to match the design ── */ .vt-featured{position:relative;isolation:isolate;overflow:hidden;background:var(--bpc-background);padding:96px 0;color:var(--bpc-foreground)} .vt-featured__mark{position:absolute;z-index:0;left:50%;top:-8%;transform:translateX(-50%);width:min(900px,90%);opacity:.04;pointer-events:none} .vt-featured .vt-rail{position:relative;z-index:2} .vt-featured__foot{display:flex;justify-content:center;margin-top:44px} /* Style the Woo [products] grid into the Manus photo-well card look */ .vt-featured__woo .woocommerce{margin:0} .vt-featured__woo ul.products{display:grid !important;grid-template-columns:repeat(4,1fr);gap:22px;margin:0 !important;padding:0;list-style:none} .vt-featured__woo ul.products::before, .vt-featured__woo ul.products::after{display:none !important} .vt-featured__woo ul.products li.product{width:auto !important;margin:0 !important;float:none !important;background:var(--bpc-card);border:1px solid var(--vt-border);border-radius:var(--bpc-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s;padding:0;text-align:left} .vt-featured__woo ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.5);border-color:var(--bpc-primary)} .vt-featured__woo li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;height:100%;text-decoration:none} .vt-featured__woo li.product img{width:100%;aspect-ratio:1/1.06;object-fit:cover;margin:0 !important;background:#1a1a1c;border-radius:0} .vt-featured__woo li.product .woocommerce-loop-product__title{font-family:var(--bpc-font-display) !important;font-size:19px;font-weight:600;color:var(--bpc-foreground) !important;letter-spacing:.01em;padding:20px 20px 0;margin:0} .vt-featured__woo li.product .price{display:block;font-family:var(--bpc-font-mono) !important;font-size:16px;font-weight:500;color:var(--bpc-foreground) !important;padding:8px 20px 0;margin:0} .vt-featured__woo li.product .price del{opacity:.5;font-size:12px} .vt-featured__woo li.product .price ins{text-decoration:none} /* "View product" CTA — csf-atc-gate already rewrites the featured-grid action to View product; style whatever button/link Woo renders to the Manus gold pill */ .vt-featured__woo li.product .button, .vt-featured__woo li.product .added_to_cart{display:inline-flex;align-items:center;gap:6px;margin:14px 20px 22px !important;padding:10px 18px !important;font-family:var(--bpc-font-sans) !important;font-size:12.5px !important;font-weight:600;letter-spacing:.03em;color:var(--bpc-primary-hover) !important;background:transparent !important;border:1px solid var(--vt-glass-border) !important;border-radius:999px !important;width:max-content;transition:border-color .25s,color .25s} .vt-featured__woo li.product .button:hover, .vt-featured__woo li.product .added_to_cart:hover{border-color:var(--bpc-primary) !important;color:var(--bpc-foreground) !important} @media(max-width:980px){.vt-featured__woo ul.products{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.vt-featured__woo ul.products{grid-template-columns:1fr}} /* ── 6. TRUST BAND ── */ .vt-trust{position:relative;isolation:isolate;overflow:hidden;background:var(--bpc-background-deeper);padding:100px 0} .vt-trust__mark{position:absolute;z-index:0;right:-4%;top:50%;transform:translateY(-50%);width:min(640px,60%);opacity:.05;pointer-events:none} .vt-trust__wave{position:absolute;z-index:0;left:-6%;bottom:-30%;width:min(560px,55%);opacity:.10;pointer-events:none;filter:drop-shadow(0 0 40px rgba(201,162,39,.3))} .vt-trust .vt-rail{position:relative;z-index:2} .vt-trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:42px} .vt-tile{background:var(--vt-glass);border:1px solid var(--vt-glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--bpc-radius);padding:28px 24px;transition:transform .3s,border-color .3s} .vt-tile:hover{transform:translateY(-5px);border-color:var(--bpc-primary)} .vt-tile__icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(201,162,39,.12);color:var(--bpc-primary-hover);margin-bottom:16px} .vt-tile__icon svg{width:21px;height:21px} .vt-tile__title{font-family:var(--bpc-font-display) !important;font-size:17px;color:var(--bpc-foreground) !important;font-weight:600;letter-spacing:.01em} .vt-tile__desc{font-size:13.5px;line-height:1.55;margin-top:8px;color:var(--bpc-body)} @media(max-width:980px){.vt-trust__grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.vt-trust__grid{grid-template-columns:1fr}} /* ── 7. FAQ teaser ── */ .vt-faq{background:var(--bpc-background);padding:96px 0} .vt-faq__layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px;align-items:start} .vt-faq__list{display:flex;flex-direction:column;gap:14px} .vt-faq__item{border:1px solid var(--vt-border);border-radius:16px;background:var(--bpc-card);padding:22px 24px;transition:border-color .3s} .vt-faq__item:hover{border-color:var(--bpc-primary)} .vt-faq__q{font-family:var(--bpc-font-display) !important;font-size:17px;color:var(--bpc-foreground) !important;font-weight:600;letter-spacing:.01em} .vt-faq__a{font-size:14px;line-height:1.6;margin-top:9px;color:var(--bpc-body)} @media(max-width:880px){.vt-faq__layout{grid-template-columns:1fr;gap:32px}} /* ── 8. RUO compliance band ── */ .vt-ruo{background:var(--bpc-background-deeper);padding:54px 0;border-top:1px solid var(--vt-border);border-bottom:1px solid var(--vt-border)} .vt-ruo__inner{display:flex;align-items:center;gap:22px;justify-content:center;text-align:center;flex-wrap:wrap;max-width:880px;margin:0 auto;background:var(--vt-glass);border:1px solid var(--vt-glass-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:var(--bpc-radius);padding:30px 36px} .vt-ruo__icon{flex:0 0 auto;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:rgba(201,162,39,.12);color:var(--bpc-primary-hover)} .vt-ruo__icon svg{width:24px;height:24px} .vt-ruo__text{font-family:var(--bpc-font-serif) !important;font-size:19px;line-height:1.5;color:var(--bpc-foreground) !important;letter-spacing:.01em} .vt-ruo__text strong{color:var(--bpc-primary-hover) !important;font-weight:600} /* ── 9. CLOSING CTA band ── */ .vt-cta{position:relative;isolation:isolate;overflow:hidden;background:#000;padding:110px 0} .vt-cta__bg{position:absolute;inset:0;z-index:0;background:url('/wp-content/uploads/2026/06/hero-marble-bg-1920.webp') center/cover no-repeat;transform:scaleX(-1)} .vt-cta__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 50%,rgba(6,6,7,.55),rgba(6,6,7,.92))} .vt-cta .vt-rail{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px} .vt-cta__title{font-family:var(--bpc-font-display) !important;font-weight:600;color:var(--bpc-foreground) !important;font-size:clamp(32px,4.6vw,58px);line-height:1.08;letter-spacing:.01em} .vt-cta__title em{font-style:normal;background:var(--vt-gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .vt-cta__sub{font-size:16.5px;line-height:1.6;max-width:54ch;color:var(--bpc-body)} .vt-cta__btns{display:flex;gap:14px;margin-top:14px;flex-wrap:wrap;justify-content:center} /* ── 10. FOOTER ── */ .vt-footer{background:var(--bpc-background-deeper);padding:72px 0 34px;border-top:1px solid var(--vt-border)} .vt-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .vt-footer__brand img{height:42px;width:auto;margin-bottom:18px} .vt-footer__brand p{font-size:13.5px;line-height:1.6;color:var(--bpc-body);max-width:34ch} .vt-footer__col h2{font-family:var(--bpc-font-mono) !important;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bpc-primary-hover) !important;margin-bottom:16px} .vt-footer__col a{display:block;font-size:14px;color:var(--bpc-body);margin-bottom:11px;transition:color .2s;text-decoration:none} .vt-footer__col a:hover{color:var(--bpc-primary-hover)} .vt-footer__micro{margin-top:48px;padding-top:26px;border-top:1px solid var(--vt-border);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center} .vt-footer__ruo{font-family:var(--bpc-font-mono) !important;font-size:11px;letter-spacing:.05em;color:rgba(201,196,184,.55);max-width:62ch} .vt-footer__copy{font-size:12px;color:rgba(201,196,184,.5)} @media(max-width:880px){.vt-footer__top{grid-template-columns:1fr 1fr;gap:32px}} @media(max-width:540px){.vt-footer__top{grid-template-columns:1fr}.vt-footer__micro{flex-direction:column;align-items:flex-start}} /* ── Mobile bottom-bar clearance (csf-bottom-bar fixed nav sits over the footer) ── */ @media(max-width:768px){ body.home .vt-footer{ padding-bottom:calc(34px + 72px); } } /* ════════════════════════════════════════════════════════════════════════ DESIGN ELEVATION — PASS 1 (global + commerce skin) Re-scopes the homepage's premium .vt-* system onto every INNER page (shop, product, cart, checkout, content) so the whole site reads as premium as the home. All rules guarded against body.home (the home keeps its faithful Manus port untouched). Reuses --bpc-* tokens + --vt-gold-grad + the glass vars. Gold-on-dark only (AA). NO new customer-facing copy. ════════════════════════════════════════════════════════════════════════ */ /* ── 1. TOP UTILITY STRIP (csf-topstrip) — stop the run-on ── Two phrases were butting together ("…consumptionUS shipping"). Lay them out as a centered wrapping flex row with a gap + a hairline separator so they never touch even when stacked. */ .csf-topstrip{ display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:center; padding:7px 16px;background:var(--bpc-background-deeper);color:var(--bpc-body); font-family:var(--bpc-font-mono);font-size:11px;letter-spacing:.06em;line-height:1.3; border-bottom:1px solid var(--vt-glass-border);text-align:center; } .csf-topstrip > span{display:inline-flex;align-items:center} /* dot separator between the two phrases; disappears when they wrap to two lines is fine — the gap still keeps them apart */ .csf-topstrip__right::before{ content:"";display:inline-block;width:4px;height:4px;border-radius:50%; background:var(--bpc-primary);margin-right:14px;opacity:.7; } @media(max-width:560px){ .csf-topstrip__right::before{display:none} } body.home .csf-topstrip{display:none !important} /* home pill nav owns the top; no strip */ /* ── 2. UNIFY THE HEADER (inner pages) — slim dark glass bar, single logo ── Home hides #header entirely (the floating glass pill is sole nav — left as-is). Inner pages get a matching dark-glass header so there's no "two sites" whiplash. */ /* kill the duplicate Cinzel wordmark everywhere */ #header .site-title, .ct-header .site-title{ display:none !important; } body:not(.home) #header{ background:rgba(10,10,11,.72) !important; -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-bottom:1px solid var(--vt-glass-border); } /* Blocksy paints the header bg on inner row wrappers — force them transparent so the glass on #header is what shows through */ body:not(.home) #header [data-row], body:not(.home) #header .ct-header-middle, body:not(.home) #header .ct-header-top, body:not(.home) #header .ct-header-bottom{ background:transparent !important; } /* nav links → body color, gold on hover/active */ body:not(.home) #header .ct-menu-link{ color:var(--bpc-body) !important; transition:color .2s; } body:not(.home) #header .ct-menu-link:hover, body:not(.home) #header .current-menu-item > .ct-menu-link{ color:var(--bpc-primary-hover) !important; } /* header search/cart icons in brand gold */ body:not(.home) #header .ct-header-search, body:not(.home) #header .ct-header-cart, body:not(.home) #header .ct-toggle{ color:var(--bpc-primary-hover) !important; } body:not(.home) #header .ct-header-search svg, body:not(.home) #header .ct-header-cart svg, body:not(.home) #header .ct-toggle svg{ color:var(--bpc-primary-hover) !important; fill:currentColor; } /* ── 3. GLOBAL BRAND BUTTONS — gradient pills replace stock Woo rectangles ── Excludes the homepage's own .vt-btn (different system) and the bottom bar. */ .woocommerce a.button:not(.vt-btn), .woocommerce button.button:not(.vt-btn), .woocommerce input.button:not(.vt-btn), .woocommerce #respond input#submit, #place_order, .single_add_to_cart_button, .wc-block-cart__submit-button, .checkout-button, .woocommerce-button.button{ background:var(--vt-gold-grad) !important; color:#1a1505 !important; border:none !important; border-radius:999px !important; padding:13px 28px !important; font-family:var(--bpc-font-sans) !important; font-weight:600 !important; letter-spacing:.02em; text-shadow:none !important; box-shadow:0 10px 30px rgba(201,162,39,.28); transition:transform .25s,box-shadow .25s !important; cursor:pointer; } .woocommerce a.button:not(.vt-btn):hover, .woocommerce button.button:not(.vt-btn):hover, .woocommerce input.button:not(.vt-btn):hover, .woocommerce #respond input#submit:hover, #place_order:hover, .single_add_to_cart_button:hover, .wc-block-cart__submit-button:hover, .checkout-button:hover, .woocommerce-button.button:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(201,162,39,.42); color:#1a1505 !important; } /* Ghost / secondary actions — transparent + gold hairline pill (coupon "Apply", "Update cart", and Woo's .alt-flagged-secondary buttons) */ .woocommerce button[name="apply_coupon"], .woocommerce button[name="update_cart"], .woocommerce input[name="apply_coupon"], .woocommerce input[name="update_cart"], .woocommerce a.button.wc-backward, .woocommerce .button.alt--disabled{ background:transparent !important; color:var(--bpc-primary-hover) !important; border:1px solid var(--vt-glass-border) !important; box-shadow:none !important; } .woocommerce button[name="apply_coupon"]:hover, .woocommerce button[name="update_cart"]:hover, .woocommerce input[name="apply_coupon"]:hover, .woocommerce input[name="update_cart"]:hover, .woocommerce a.button.wc-backward:hover{ border-color:var(--bpc-primary) !important; color:var(--bpc-foreground) !important; transform:translateY(-1px); } /* ── 5. FOOTER ── (a) Home: kill the stock .ct-footer (csf-bigfoot) — the design ships .vt-footer, so the stock one is a duplicate below it. (b) Inner pages: discipline the .csf-bigfoot stock footer to a dark layout. */ body.home .ct-footer{ display:none !important; } /* The .csf-bigfoot block (rendered through Blocksy's copyright element) had NO CSS anywhere — give it a real dark layout so inner-page footers read intentional. */ .ct-footer{ background:var(--bpc-background-deeper) !important; } .csf-bigfoot{ background:var(--bpc-background-deeper); padding:64px 0 30px; border-top:1px solid var(--vt-border); } .csf-bigfoot__wrap{ width:100%;max-width:1160px;margin:0 auto; padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px); display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px; } .csf-bigfoot__brand .csf-footer-logo{ height:38px;width:auto;margin-bottom:16px;display:block; } .csf-bigfoot__name{ display:block;font-family:var(--bpc-font-display);font-size:20px;letter-spacing:.04em; color:var(--bpc-foreground);margin-bottom:12px; } .csf-bigfoot__brand p{ font-size:13.5px;line-height:1.6;color:var(--bpc-body);max-width:34ch;margin:0; } .csf-bigfoot__col h2{ font-family:var(--bpc-font-mono) !important;font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--bpc-primary-hover);margin:0 0 14px; } .csf-bigfoot__col a{ display:block;margin-bottom:10px;font-size:14px;color:var(--bpc-body); text-decoration:none;transition:color .2s; } .csf-bigfoot__col a:hover{ color:var(--bpc-primary-hover); } .csf-bigfoot__bar{ max-width:1160px;margin:40px auto 0;padding:24px clamp(20px,4vw,48px) 0; border-top:1px solid var(--vt-border); font-family:var(--bpc-font-mono);font-size:11px;letter-spacing:.04em;line-height:1.6; color:rgba(201,196,184,.55);text-align:center; } /* If the big name shows beside a logo, hide the separate name when the logo carries it? Keep both — the wordmark is the brand; logo is the emblem. */ @media(max-width:880px){ .csf-bigfoot__wrap{grid-template-columns:1fr 1fr;gap:30px} } @media(max-width:540px){ .csf-bigfoot__wrap{grid-template-columns:1fr;gap:26px} /* fixed bottom bar clearance so footer links never hide behind it */ .ct-footer{ padding-bottom:calc(30px + 72px) !important; } } @media(max-width:768px){ .ct-footer{ padding-bottom:calc(30px + 72px) !important; } } /* ════════════════════════════════════════════════════════════════════════ COMMERCE SKIN — the biggest cheap tells (shop / product / cart / checkout) ════════════════════════════════════════════════════════════════════════ */ /* ── 6. SHOP / CATEGORY ARCHIVE ── Scope: NOT inside the homepage featured band (.vt-featured already styles its own Woo loop). These rules hit the real archive loop on /shop/ + categories. */ /* archive header — wrap the bare "Shop" H1 in a vt-band-style header */ body.woocommerce-page:not(.home) .woocommerce-products-header, .post-type-archive-product .woocommerce-products-header, .tax-product_cat .woocommerce-products-header{ text-align:center;padding:18px 0 8px; } .woocommerce-products-header__title.page-title, .tax-product_cat .page-title{ font-family:var(--bpc-font-display) !important;color:var(--bpc-foreground) !important; font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:.01em;position:relative; } /* gold eyebrow above the archive title */ .woocommerce-products-header::before{ content:"Vegas Tides Catalog";display:block; font-family:var(--bpc-font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--bpc-primary-hover);margin-bottom:10px; } /* result-count + ordering bar → brand */ .woocommerce .woocommerce-result-count{ font-family:var(--bpc-font-mono) !important;font-size:11.5px;letter-spacing:.05em; color:var(--bpc-body) !important;opacity:.8; } .woocommerce .woocommerce-ordering select{ background-color:var(--bpc-card) !important;color:var(--bpc-foreground) !important; border:1px solid var(--vt-glass-border) !important;border-radius:999px !important; padding:9px 38px 9px 16px !important;font-size:13px;cursor:pointer; -webkit-appearance:menulist;appearance:auto; background-image:none !important; } .woocommerce-ordering .ct-sort-icon{ display:none !important; } /* product cards on the real archive loop. SCOPE NOTE: the home featured grid is DIV.vt-featured__woo > DIV.woocommerce — the marker class sits on the PARENT, so a `.woocommerce:not(.vt-featured__woo)` negation would NOT exclude it. Archive loops only ever render on non-home templates, so `body:not(.home)` is the correct, airtight isolation (the home featured grid keeps its .vt-featured__woo styling untouched). */ body:not(.home) ul.products li.product{ background:var(--bpc-card); border:1px solid var(--vt-glass-border); border-radius:20px; overflow:hidden; padding:0; transition:transform .3s,box-shadow .3s,border-color .3s; display:flex;flex-direction:column; } body:not(.home) ul.products li.product:hover{ transform:translateY(-6px); box-shadow:0 22px 46px rgba(0,0,0,.5); border-color:var(--bpc-primary); } /* The media well is 4:5. Woo reuses .woocommerce-LoopProduct-link on the separate title anchor, so that class must never participate in media layout. */ body:not(.home) ul.products li.product a.ct-media-container{ display:block;aspect-ratio:4/5 !important;overflow:hidden;background:#fff; } body:not(.home) ul.products li.product a.ct-media-container img{ width:100% !important;height:100% !important;aspect-ratio:4/5 !important; object-fit:contain !important;background:#fff !important; margin:0 !important;border-radius:0;display:block; } body:not(.home) ul.products li.product a.woocommerce-LoopProduct-link:not(.ct-media-container){ display:block;height:auto !important;min-height:0 !important; aspect-ratio:auto !important;overflow:visible !important;background:transparent !important; } /* title (Cinzel) + price (mono) + consistent internal padding */ body:not(.home) ul.products li.product .woocommerce-loop-product__title{ font-family:var(--bpc-font-display) !important;font-size:18px;font-weight:600; color:var(--bpc-foreground) !important;letter-spacing:.01em;line-height:1.2; padding:16px 18px 0;margin:0; } body:not(.home) ul.products li.product .price{ font-family:var(--bpc-font-mono) !important;font-size:15.5px;font-weight:500; color:var(--bpc-foreground) !important;padding:4px 18px 16px;margin:0;display:block; } body:not(.home) ul.products li.product .price del{ opacity:.5;font-size:12px; } body:not(.home) ul.products li.product .price ins{ text-decoration:none; } /* the loop action — csf-atc-gate renders a "View product" link; gold pill/link with consistent 18-22px internal padding */ body:not(.home) ul.products li.product .button, body:not(.home) ul.products li.product .added_to_cart{ display:inline-flex !important;align-items:center;gap:6px;width:max-content; margin:auto 18px 20px !important;padding:10px 20px !important; font-family:var(--bpc-font-sans) !important;font-size:12.5px !important;font-weight:600; letter-spacing:.03em;border-radius:999px !important; background:var(--vt-gold-grad) !important;color:#1a1505 !important;border:none !important; box-shadow:0 8px 22px rgba(201,162,39,.26) !important; transition:transform .25s,box-shadow .25s !important; } body:not(.home) ul.products li.product .button:hover{ transform:translateY(-2px);box-shadow:0 14px 32px rgba(201,162,39,.4) !important;color:#1a1505 !important; } /* ── 7. SINGLE PRODUCT PAGE ── */ /* gallery image in a glass well + subtle marble ambient */ body.single-product .woocommerce-product-gallery{ background:var(--bpc-card); border:1px solid var(--vt-glass-border); border-radius:24px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.45); position:relative;overflow:hidden; } body.single-product .woocommerce-product-gallery::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 90% at 80% -10%,rgba(201,162,39,.10),transparent 60%); } body.single-product .woocommerce-product-gallery > *{ position:relative;z-index:1; } body.single-product .woocommerce-product-gallery img{ border-radius:14px; } /* title bigger Cinzel */ body.single-product .product_title{ font-family:var(--bpc-font-display) !important;font-size:clamp(30px,3.4vw,40px) !important; color:var(--bpc-foreground) !important;letter-spacing:.01em;line-height:1.1; } /* price ~22px mono */ body.single-product .summary .price, body.single-product .summary p.price{ font-family:var(--bpc-font-mono) !important;font-size:22px !important;font-weight:500; color:var(--bpc-primary-hover) !important; } body.single-product .summary .price del{ opacity:.5;font-size:15px; } body.single-product .summary .price ins{ text-decoration:none; } /* RUO disclaimer as a small gold-accent callout */ body.single-product .csf-ruo{ display:flex;align-items:flex-start;gap:9px; background:rgba(201,162,39,.08);border:1px solid var(--vt-border); border-left:3px solid var(--bpc-primary);border-radius:12px; padding:11px 14px;margin:14px 0 18px; font-size:12.5px;line-height:1.45;color:var(--bpc-body) !important;letter-spacing:.01em; } /* variation