/* ============================================================================ W2STRIP_V1 — strict dark-canvas RIGHT control panel (v2). Scope: ONLY the right-side option sections (WHAT TO PRINT / HEART COLOR / HEART STYLE / STYLE). Header, product tabs and word chips are NOT touched. One solid #161616 canvas: no inner panel background, no divider lines, no tile boxes, no gold outlines. Only the icon + label text + heart float on the canvas. Selection = brightness. GOLD reserved for .qr-info banner and .qr-toggle slider (untouched). Loaded LAST in . ========================================================================== */ /* 1. side stripes on the app frame off (the vertical lines on the sides) */ html.w2-dark .app{ border-left:0 !important; border-right:0 !important; } /* 2. SECTION WRAPPER -> one solid canvas. .card = per-section box; base CSS gives it background:var(--card) (#232323 in dark) + border-bottom (the divider line). Kill both so every section sits directly on the #161616 page with no inner panel and no line between. */ html.w2-dark .card{ background:transparent !important; border:0 !important; border-bottom:0 !important; box-shadow:none !important; } /* 3. option tiles -> no box (WHAT TO PRINT / HEART COLOR / HEART STYLE / STYLE) */ html.w2-dark .pick-card, html.w2-dark .pick-card.sel, html.w2-dark .layout-card, html.w2-dark .layout-card.sel{ background:transparent !important; border:0 !important; border-color:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:6px 4px !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* selection by brightness, not by box */ html.w2-dark .pick-card, html.w2-dark .layout-card{ opacity:.45 !important; transition:opacity .15s ease, transform .15s ease !important; } html.w2-dark .pick-card.sel, html.w2-dark .layout-card.sel{ opacity:1 !important; } /* 4. labels: a touch of colour + a touch bolder */ html.w2-dark .df-section{ color:#f7f4ee !important; font-weight:800 !important; border:0 !important; } html.w2-dark .df-label{ color:rgba(244,241,234,.70) !important; font-weight:700 !important; } html.w2-dark .pick-lbl{ color:#f4f1ea !important; font-weight:800 !important; letter-spacing:.05em !important; } html.w2-dark .pick-sub{ color:rgba(244,241,234,.60) !important; font-weight:600 !important; } /* 6. remove the two superfluous input hints (all .phr-hint = "Don't think, just finish it" + "Mr.Host and the word are centered"). No other hint uses this class, so hiding it removes exactly those two, in every language. */ .phr-hint{ display:none !important; } /* 5. remove the frame line around the preview stage */ html.w2-dark .preview-wrap{ border:0 !important; box-shadow:none !important; } /* NOT TOUCHED (kept as-is): header (.hdr / hat.svg), product tabs (.type-sw / .type-btn), word chips (.lib-chip / pearl words), QR banner (.qr-info), QR slider (.qr-toggle / .qr-knob). */