/* ========================================================================= Vava Storefront — "Bold" theme skin (dark) Layers over css/storefront-default.css. Scoped to . Dark surfaces, inverted logo, translucent controls — matches storefront-bold.html so the whole Bold flow stays one dark world. ========================================================================= */ /* ---- tokens ---- */ .theme-bold { --bd-bg: #1C232D; --bd-panel: #262F3B; --bd-panel-2: #2E3846; --bd-line: rgba(255,255,255,.12); --bd-line-2: rgba(255,255,255,.18); --bd-fg: #F4F7FA; --bd-muted: rgba(255,255,255,.66); --bd-subtle: rgba(255,255,255,.46); --bd-accent: #6FA8E6; } body.theme-bold { background: var(--bd-bg); color: var(--bd-fg); } /* ---- topbar ---- */ .theme-bold .lp-topbar { background:#161C24; border-bottom:1px solid rgba(255,255,255,.07); } .theme-bold .lp-brand img { filter:brightness(0) invert(1); } .theme-bold .mn-search { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); } .theme-bold .mn-search svg { color:rgba(255,255,255,.65); } .theme-bold .mn-search input { color:#fff; } .theme-bold .mn-search input::placeholder { color:rgba(255,255,255,.55); } .theme-bold .lp-nav a { color:rgba(255,255,255,.86); font-weight:600; } .theme-bold .lp-nav a:hover { color:#fff; } .theme-bold .lp-nav a.is-current { color:#fff; } .theme-bold .lp-nav a.is-current::after { background:var(--bd-accent); } .theme-bold .lp-acct:hover { background:rgba(255,255,255,.08); } .theme-bold .lp-acct .acct-name { color:#fff; } .theme-bold .lp-acct .chev { color:rgba(255,255,255,.6); } /* buttons on the dark bar */ .theme-bold .lp-actions .btn-outline { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.28); color:#fff; } .theme-bold .lp-actions .btn-outline:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.4); color:#fff; } /* ---- breadcrumb + page head ---- */ .theme-bold .sd-crumb { color:var(--bd-muted); } .theme-bold .sd-crumb a:hover { color:#fff; } .theme-bold .sd-crumb .sep { color:var(--bd-subtle); } .theme-bold .sd-back { background:rgba(255,255,255,.06); border-color:var(--bd-line-2); color:#fff; } .theme-bold .sd-back:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); color:#fff; } .theme-bold .sd-head h1, .theme-bold .mn-head h1 { color:#fff; } .theme-bold .sd-head .sd-sub, .theme-bold .mn-count { color:var(--bd-muted); } .theme-bold .sku { background:rgba(255,255,255,.06); border-color:var(--bd-line); color:var(--bd-muted); } /* ---- panels ---- */ .theme-bold .panel { background:var(--bd-panel); border-color:var(--bd-line); box-shadow:0 2px 8px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05); } .theme-bold .panel__h { border-bottom-color:var(--bd-line); } .theme-bold .panel__h h2, .theme-bold .panel__h h3 { color:#fff; } .theme-bold .panel__h .sub { color:var(--bd-muted); } .theme-bold .kv { border-bottom-color:var(--bd-line); } .theme-bold .kv .k { color:var(--bd-muted); } .theme-bold .kv .v { color:#fff; } .theme-bold .sd-section-label { color:var(--bd-muted); } .theme-bold hr.sd-div { border-top-color:var(--bd-line); } .theme-bold .panel__b p, .theme-bold .panel__b li { color:rgba(255,255,255,.82); } /* ---- product / material cards ---- */ .theme-bold .mn-card { background:var(--bd-panel); border-color:var(--bd-line); box-shadow:0 2px 8px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.05); } .theme-bold .mn-card:hover { transform:translateY(-3px); box-shadow:0 16px 36px rgba(0,0,0,.55); border-color:rgba(111,168,230,.55); } .theme-bold .mn-name, .theme-bold a.mn-name { color:#fff; } .theme-bold a.mn-name:hover { color:var(--bd-accent); } .theme-bold .mn-meta { color:var(--bd-muted); } .theme-bold .mn-desc { color:var(--bd-subtle); } .theme-bold .mn-price { color:#fff; } .theme-bold .mn-note { color:var(--bd-accent); } .theme-bold .mn-note:hover { color:#fff; } .theme-bold .mn-add { background:rgba(255,255,255,.06); border-color:var(--bd-line-2); color:#fff; } .theme-bold .mn-add:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.12); } .theme-bold .mn-listhead h2 { color:var(--bd-muted); } .theme-bold .mn-listhead a { color:var(--bd-accent); } /* ---- product-type selector + inline chips ---- */ .theme-bold .mn-type { background:rgba(255,255,255,.06); border-color:var(--bd-line-2); color:rgba(255,255,255,.9); } .theme-bold .mn-type:hover { border-color:rgba(255,255,255,.5); color:#fff; } .theme-bold .mn-type.on { background:#fff; border-color:#fff; color:#141A21; } .theme-bold .ff-chip { background:rgba(255,255,255,.06); border-color:var(--bd-line-2); color:rgba(255,255,255,.9); } .theme-bold .ff-chip:hover { border-color:rgba(255,255,255,.5); color:#fff; } .theme-bold .ff-chip.on { background:#fff; border-color:#fff; color:#141A21; } .theme-bold .ff-open { background:rgba(255,255,255,.1); border-color:var(--bd-line-2); color:#fff; } .theme-bold .ff-open:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.16); } .theme-bold .ff-open .ff-ico, .theme-bold .ff-ico { color:#fff; } .theme-bold .seg { border-color:var(--bd-line-2); } .theme-bold .seg button { background:rgba(255,255,255,.04); color:var(--bd-muted); border-left-color:var(--bd-line); } .theme-bold .seg button.on { background:#fff; color:#141A21; } /* ---- filter drawer (dark) ---- */ .theme-bold .fdrawer__backdrop { background:rgba(8,12,16,.6); } .theme-bold .fdrawer__panel { background:#20272F; border-right-color:var(--bd-line-2); box-shadow:0 12px 40px rgba(0,0,0,.5); } .theme-bold .fdrawer__head { border-bottom-color:var(--bd-line); color:#fff; } .theme-bold .fdrawer__count { color:var(--bd-muted); } .theme-bold .fdrawer__close { color:rgba(255,255,255,.7); } .theme-bold .fdrawer__close:hover { background:rgba(255,255,255,.12); color:#fff; } .theme-bold .fdrawer__foot { border-top-color:var(--bd-line); } .theme-bold .fsec { border-top-color:var(--bd-line-2); } .theme-bold .fsec__head { color:#fff; } .theme-bold .fsec__n { color:var(--bd-subtle); } .theme-bold .fsec__sum { color:var(--bd-accent); } .theme-bold .fsec__chev { color:var(--bd-subtle); } .theme-bold .fcat { color:rgba(255,255,255,.9); } .theme-bold .fcat:hover { background:rgba(255,255,255,.06); } .theme-bold .fcat__n { border-color:var(--bd-line-2); color:var(--bd-muted); } .theme-bold .fcat.on { color:#fff; } .theme-bold .fcat.on .fcat__n { border-color:#fff; background:#fff; color:#141A21; } .theme-bold .fslider { background:rgba(255,255,255,.2); } .theme-bold .fslider__fill { background:#fff; } .theme-bold .fslider__knob { background:#fff; border-color:#1B222B; } .theme-bold .fsize__lbl, .theme-bold .fsize__val { color:var(--bd-muted); } /* ---- product detail rail ---- */ .theme-bold .pd-hero { border-color:var(--bd-line-2); } .theme-bold .pd-thumb { border-color:var(--bd-line-2); } .theme-bold .pd-thumb.active { border-color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.2); } .theme-bold .pd-price { color:#fff; } .theme-bold .sd-callout { background:rgba(207,154,58,.12); border-color:rgba(207,154,58,.4); color:rgba(255,255,255,.9); } .theme-bold .sd-lock { background:rgba(76,116,166,.16); border-color:rgba(157,187,224,.4); color:rgba(255,255,255,.9); } .theme-bold .sd-lock a { color:var(--bd-accent); } .theme-bold .sd-doc { border-bottom-color:var(--bd-line); } .theme-bold .sd-doc .meta .m { color:#fff; } .theme-bold .sd-doc .meta .s { color:var(--bd-muted); } /* ---- account / project / share components ---- */ .theme-bold .pjx-card { background:var(--bd-panel); border-color:var(--bd-line); } .theme-bold .pjx-card:hover { box-shadow:0 10px 30px rgba(0,0,0,.5); } .theme-bold .pjx-name { color:#fff; } .theme-bold .pjx-card:hover .pjx-name { color:var(--bd-accent); } .theme-bold .pjx-client { color:var(--bd-muted); } .theme-bold .pjx-meta { color:var(--bd-subtle); } .theme-bold .pjx-thumbs span { border-color:var(--bd-line); } .theme-bold .pjx-thumbs .more { background:rgba(255,255,255,.08); color:var(--bd-muted); } .theme-bold .pjx-add { background:rgba(255,255,255,.04); border-color:var(--bd-line-2); color:var(--bd-muted); } .theme-bold .pjx-add:hover { border-color:#fff; color:#fff; background:rgba(255,255,255,.08); } .theme-bold .pjw-note { background:rgba(255,255,255,.05); border-color:var(--bd-line); color:var(--bd-muted); } .theme-bold .pjw-note strong { color:#fff; } .theme-bold .pjw-actions { border-top-color:var(--bd-line); } .theme-bold .pjw-fav { background:rgba(20,26,33,.8); color:rgba(255,255,255,.7); } .theme-bold .cmp-table th, .theme-bold .cmp-table td { border-bottom-color:var(--bd-line); } .theme-bold .cmp-table thead th { background:var(--bd-panel-2); color:var(--bd-muted); } .theme-bold .cmp-table td.attr { background:var(--bd-panel-2); color:var(--bd-muted); } /* pick-list (add-to-project) */ .theme-bold .pick-row { background:rgba(255,255,255,.04); border-color:var(--bd-line-2); color:#fff; } .theme-bold .pick-row:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); } .theme-bold .pick-row:has(input:checked) { border-color:#fff; background:rgba(255,255,255,.12); } .theme-bold .pick-row .pk-thumb { border-color:var(--bd-line); } .theme-bold .pick-row .pk-name { color:#fff; } .theme-bold .pick-row .pk-meta { color:var(--bd-muted); } /* shared client view */ .theme-bold .shd-top { background:#141A21; border-bottom-color:rgba(255,255,255,.08); } .theme-bold .shd-studio .s-name { color:#fff; } .theme-bold .shd-studio .s-sub { color:var(--bd-muted); } .theme-bold .shd-powered { color:var(--bd-subtle); } .theme-bold .shd-powered img { filter:brightness(0) invert(1); } .theme-bold .shd-hero { background:var(--bd-panel); border-color:var(--bd-line); } .theme-bold .shd-hero .ro { color:var(--bd-subtle); } .theme-bold .shd-hero h1 { color:#fff; } .theme-bold .shd-hero .prepared { color:var(--bd-muted); } .theme-bold .shd-hero .prepared strong { color:#fff; } .theme-bold .shd-room > h2 { color:#fff; } .theme-bold .shd-card .sc-note { background:rgba(255,255,255,.05); border-color:var(--bd-line); color:var(--bd-muted); } .theme-bold .shd-card .sc-note strong { color:#fff; } .theme-bold .shd-footer { color:var(--bd-subtle); } /* ---- footer ---- */ .theme-bold .lp-footer { border-top-color:var(--bd-line); color:var(--bd-subtle); } .theme-bold .lp-footer a { color:var(--bd-muted); } /* ---- app.css primitives that sit on dark surfaces ---- */ .theme-bold .btn-outline { background:transparent; border-color:var(--bd-line-2); color:rgba(255,255,255,.9); } .theme-bold .btn-outline:hover { border-color:rgba(255,255,255,.5); color:#fff; background:rgba(255,255,255,.06); } .theme-bold .btn-ghost { color:rgba(255,255,255,.85); } .theme-bold .btn-ghost:hover { background:rgba(255,255,255,.1); color:#fff; } .theme-bold .icon-btn { color:rgba(255,255,255,.7); } .theme-bold .icon-btn:hover { background:rgba(255,255,255,.1); color:#fff; } .theme-bold .subtabs { border-bottom-color:var(--bd-line); } .theme-bold .subtab { color:var(--bd-muted); } .theme-bold .subtab:hover { color:#fff; } .theme-bold .subtab.active { color:#fff; } .theme-bold .subtab .count { background:rgba(255,255,255,.1); color:var(--bd-muted); } /* dropdown menu (account / switch project) */ .theme-bold .dropdown-menu { background:var(--bd-panel); border-color:var(--bd-line-2); box-shadow:0 12px 40px rgba(0,0,0,.5); } .theme-bold .dropdown-item { color:rgba(255,255,255,.9); } .theme-bold .dropdown-item:hover { background:rgba(255,255,255,.08); } .theme-bold .dropdown-section-label { color:var(--bd-subtle); } .theme-bold .dropdown-divider { background:var(--bd-line); } /* ---- modals (dark) ---- */ .theme-bold .modal { background:var(--bd-panel); border:1px solid var(--bd-line-2); color:var(--bd-fg); } .theme-bold .modal-header { border-bottom-color:var(--bd-line); } .theme-bold .modal-header h2 { color:#fff; } .theme-bold .modal-header .sub { color:var(--bd-muted); } .theme-bold .modal-footer { border-top-color:var(--bd-line); } .theme-bold .modal-close { color:rgba(255,255,255,.7); } .theme-bold .modal-close:hover { background:rgba(255,255,255,.12); color:#fff; } .theme-bold .modal .field label { color:var(--bd-muted); } .theme-bold .modal .input, .theme-bold .modal .select, .theme-bold .modal .textarea, .theme-bold .input, .theme-bold .select, .theme-bold .textarea { background:rgba(255,255,255,.06); border-color:var(--bd-line-2); color:#fff; } .theme-bold .input::placeholder, .theme-bold .textarea::placeholder { color:rgba(255,255,255,.4); } .theme-bold .modal .sub, .theme-bold .modal p.sub { color:var(--bd-muted); } .theme-bold .modal a { color:var(--bd-accent); } .theme-bold .switch-field { color:rgba(255,255,255,.9); }