/* ============================================================================ W2DARK_V1 — premium dark theme for the constructor (scoped under html.w2-dark). Strategy: flip the bundle's CSS variables, then surgically darken the hard-coded #fff/#f8f8f8 panels from both the bundle and w2skin.css. The PRODUCT STAGE (.preview-wrap / garment) stays light — a lit studio stage in a dark UI. Selected states + cart CTA go brand-gold. Loaded LAST in so it wins source order; uses !important to beat the skin's !important :root vars. ========================================================================== */ html.w2-dark{ --bg:#161616 !important; --card:#232323 !important; --text:#f4f4f4 !important; --muted:rgba(255,255,255,.56) !important; --border:rgba(255,255,255,.12) !important; --accent:#f4f4f4 !important; /* --gold / --heart kept (brand + product colours) */ } /* page / app shell (skin forces body,.app -> #FAF9F5) */ html.w2-dark body, html.w2-dark .app{ background:#161616 !important; } /* ---- section headings & labels (follow --muted/--text where possible) ---- */ html.w2-dark .df-section{ color:var(--text) !important; } html.w2-dark .df-label{ color:var(--muted) !important; } /* ---- option cards (WHAT TO PRINT / colours / styles) ---- */ html.w2-dark .pick-card{ background:#232323 !important; } html.w2-dark .pick-card.sel{ background:#2c2c2c !important; border-color:var(--gold) !important; } html.w2-dark .pick-sub{ color:rgba(255,255,255,.45) !important; } html.w2-dark .layout-card{ background:#232323 !important; } html.w2-dark .layout-card.sel{ background:#2c2c2c !important; border-color:var(--gold) !important; } /* ---- word chips ---- */ html.w2-dark .lib-chip{ background:#232323 !important; border-color:rgba(255,255,255,.14) !important; color:rgba(255,255,255,.80) !important; } html.w2-dark .lib-chip.sel{ background:var(--gold) !important; border-color:var(--gold) !important; color:#161616 !important; } /* ---- pills / type switch ---- */ html.w2-dark .pill{ background:#232323 !important; color:var(--text) !important; } html.w2-dark .pill.sel{ background:var(--gold) !important; border-color:var(--gold) !important; color:#161616 !important; } html.w2-dark .type-sw{ background:#202020 !important; } html.w2-dark .type-btn.sel{ background:var(--gold) !important; color:#161616 !important; } /* ---- inputs / phrase field / selects (bundle #fff + skin #46413a text) ---- */ html.w2-dark .df-input, html.w2-dark .df-select{ background:#2a2a2a !important; color:var(--text) !important; border-color:rgba(255,255,255,.14) !important; } html.w2-dark .df-input::placeholder{ color:rgba(255,255,255,.40) !important; } html.w2-dark .phr-wrap{ background:#232323 !important; } html.w2-dark .w2-foot-field{ color:var(--text) !important; } html.w2-dark .w2-foot-input{ background:#2a2a2a !important; color:var(--text) !important; } /* ---- QR helper note (gold-tinted, keep but darken) ---- */ html.w2-dark .qr-info{ background:rgba(216,170,39,.10) !important; border-color:rgba(216,170,39,.28) !important; color:#e3c069 !important; } /* ---- colour indicator on the stage ---- */ html.w2-dark .color-ind{ background:rgba(28,28,28,.92) !important; border-color:rgba(255,255,255,.14) !important; color:rgba(255,255,255,.72) !important; } /* ---- header glass -> dark glass (skin warm-light glass + ::after sheen) ---- */ html.w2-dark .hdr-glass{ background:linear-gradient(180deg, rgba(42,42,48,.62), rgba(28,28,32,.52)) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:0 10px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important; } html.w2-dark .hdr-glass::after{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 42%) !important; } html.w2-dark .hdr-phrase{ color:rgba(255,255,255,.62) !important; } html.w2-dark .hdr-phrase .w2ink{ color:#fff !important; } /* maps pin outline visible on dark glass */ html.w2-dark .w2hdr-maps svg{ stroke:#e9e9e9 !important; } /* ---- footer bubble / bottom bar -> dark glass ---- */ html.w2-dark .w2-foot-bubble{ background:linear-gradient(180deg, rgba(40,40,46,.88), rgba(24,24,28,.84)) !important; border:1px solid rgba(255,255,255,.10) !important; box-shadow:0 16px 48px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important; } html.w2-dark .w2-foot-bubble::after{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 38%) !important; } html.w2-dark .bottom{ background:rgba(20,20,20,.86) !important; } html.w2-dark .w2-foot-usd{ color:var(--text) !important; } /* ---- cart CTA -> premium gold ---- */ html.w2-dark .w2-foot-cta{ background:var(--gold) !important; color:#161616 !important; box-shadow:0 8px 22px rgba(197,160,89,.35) !important; } html.w2-dark .w2-foot-cta:active{ background:#b8924d !important; } html.w2-dark .btn-main, html.w2-dark .btn-open{ background:#333 !important; } html.w2-dark .btn-main:hover{ background:#3d3d3d !important; } /* ---- success modal ---- */ html.w2-dark .succ-card{ background:#232323 !important; color:var(--text) !important; } /* ---- PRODUCT STAGE stays light (lit studio) ---- */ /* .preview-wrap / .preview-canvas-wrap intentionally NOT darkened. On-garment QR keeps its white quiet zone. */ html.w2-dark .sh-qr{ background:#fff !important; } /* ============================================================================ W2DARK_V2 — mobile edge seal + white Mr.Host mascot + inverted (light) footer ========================================================================== */ /* seal the whole html so overscroll / notch / safe-area show no light seam */ html.w2-dark{ background:#161616 !important; } html.w2-dark body{ background:#161616 !important; } /* control-panel Mr.Host mascot -> white silhouette. Scoped to .pick-card so the mascot ON the light garment stage stays dark. */ html.w2-dark .pick-card img[src*="mr_host"]{ filter:brightness(0) invert(1) !important; opacity:.92 !important; } /* footer INVERTED: a light card floating on the dark page (premium contrast). Light theme keeps the dark ink-gradient footer untouched. */ html.w2-dark .w2-sitefooter{ background:linear-gradient(170deg, #fbfbfa 0%, #f1f0ec 100%) !important; color:#3a3a3a !important; box-shadow:0 16px 44px rgba(0,0,0,.5) !important; } html.w2-dark .w2-sitefooter .w2sf-logo{ color:#161616 !important; } html.w2-dark .w2-sitefooter .w2sf-acc-btn{ color:#161616 !important; } html.w2-dark .w2-sitefooter .w2sf-link{ color:#5c5c63 !important; } html.w2-dark .w2-sitefooter .w2sf-link:hover{ color:#000 !important; } html.w2-dark .w2-sitefooter .w2sf-contact b{ color:#161616 !important; } html.w2-dark .w2-sitefooter .w2sf-contact span{ color:#5c5c63 !important; } html.w2-dark .w2-sitefooter .w2sf-contact:hover span{ color:#161616 !important; } html.w2-dark .w2-sitefooter .w2sf-co{ color:#83838b !important; } html.w2-dark .w2-sitefooter .w2sf-caret, html.w2-dark .w2-sitefooter .w2sf-all, html.w2-dark .w2-sitefooter .w2sf-brief{ color:#9a7a35 !important; }