/* W2_MERGED_CSS_V1 — all constructor CSS overlays concatenated in exact index.html load order. 28 files -> 1. Cascade order preserved => pixel-identical. Source files kept for rollback. */ /* ==================== w2skin.css ==================== */ /* ============================================================================ W2SKIN_v18_260612_1955 — ShopLink V3 chrome skin (header + footer + soft-black) Cosmetic override ONLY, layered over the live /miniapp/construct/ dist. v1: warm-glass header/footer + lens (#w2lens) + frameless phrase + soft CTA. v3 carries v2 ++ brand-style tile logo -15%; + all harsh constructor black -> soft #46413a. NOTE: temporary skin — a rebuild/promote of the constructor dist drops it. --soft-ink = the Add-to-cart tone, used everywhere black was harsh. ========================================================================== */ :root{ --text:#46413a !important; /* body / pill text */ --accent:#46413a !important; --w2-ink:#46413a; /* soft warm near-black (= Add to cart) */ --bg:#FAF9F5 !important; /* clean soft white (not harsh) */ --card:#FAF9F5 !important; --heart:#EB4014 !important; /* brand-style red (calmer than #e52d2d) */ } body,.app{background:#FAF9F5 !important;} /* ========================== v1: HEADER glass ============================== */ .hdr-glass{ background:linear-gradient(180deg, rgba(248,239,233,.60), rgba(243,232,226,.50)) !important; -webkit-backdrop-filter:blur(3px) saturate(1.7) brightness(1.05) url(#w2lens) !important; backdrop-filter:blur(3px) saturate(1.7) brightness(1.05) url(#w2lens) !important; border:1px solid rgba(255,255,255,.65) !important; border-radius:20px !important; box-shadow:0 10px 34px rgba(60,40,28,.16), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -9px 16px rgba(120,90,70,.06) !important; position:sticky; overflow:visible !important; } .hdr-glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 42%);mix-blend-mode:screen;} /* ========================== v1: FOOTER glass ============================== */ .w2-foot-bubble{ background:linear-gradient(180deg, rgba(248,239,233,.83), rgba(241,229,223,.78)) !important; /* W2_FOOT_OPACITY_V1: transparency halved */ -webkit-backdrop-filter:blur(6px) saturate(1.6) brightness(1.04) url(#w2lens) !important; backdrop-filter:blur(6px) saturate(1.6) brightness(1.04) url(#w2lens) !important; border:1px solid rgba(255,255,255,.70) !important; box-shadow:0 16px 48px rgba(60,40,28,.20), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -11px 18px rgba(120,90,70,.07) !important; position:relative; overflow:visible !important; } .w2-foot-bubble::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 38%);mix-blend-mode:screen;} /* v1: frameless phrase plaque */ .hdr-bubble{background:transparent !important;border:0 !important;box-shadow:none !important;-webkit-backdrop-filter:none !important;backdrop-filter:none !important;} /* v1: phrase bolder + paler */ .hdr-phrase{font-weight:800 !important;color:rgba(74,66,58,.60) !important;letter-spacing:-.01em !important;} .hdr-phrase .w2ink{font-weight:900 !important;} /* keep lens sheen below interactive children */ .w2-foot-bubble > *{position:relative;z-index:1;} .hdr-glass > *{position:relative;z-index:1;} /* ===================== v3 carries v2 +brand-style tile logo -15% ===================== */ /* keep native box (height:30/min-height:32) so labels align with CLASSIC/STREET; shrink visually */ .style-brandmark{transform:scale(.85) !important;transform-origin:center !important;margin-bottom:2px !important;} /* ===================== v3 carries v2 +land ALL harsh black -> soft #46413a =========== */ /* buttons / selected fills (was #111 / #0a0a0a) */ .btn-main,.btn-open{background:#46413a !important;} .btn-main:hover{background:#565046 !important;} .w2-foot-cta{background:#46413a !important;box-shadow:0 6px 18px rgba(70,65,58,.28) !important;} .w2-foot-cta:active{background:#322e27 !important;} .type-btn.sel{background:#46413a !important;} .pill.sel{background:#46413a !important;border-color:#46413a !important;} .lib-chip.sel{background:#46413a !important;border-color:#46413a !important;} .vbtn:active,.vbtn.active{background:#46413a !important;border-color:#46413a !important;} /* selected borders / focus borders / accents (was #111) */ .pick-card.sel{border-color:#46413a !important;} .layout-card.sel{border-color:#46413a !important;} .phr-wrap:focus-within{border-color:#46413a !important;} .df-input:focus{border-color:#46413a !important;} .qr-big{border-color:#46413a !important;} .spinner{border-top-color:#46413a !important;} /* text / typed input (was #111) */ .df-section,.df-input,.df-select{color:#46413a !important;} .w2-foot-field{color:#46413a !important;} /* tile/garment brandmarks (currentColor). HEADER wordmark left ALONE (native grey). */ .style-brandmark{color:#46413a !important;} /* NOTE: .sh-brandmark/.cb-brandmark inherit .sh-block ink (white on dark, soft on light) — do NOT force here */ /* on-garment print preview text on LIGHT shirts (was #0a0a0a); dark-shirt white stays via its own !important rule */ .chest-brand-small,.chest-main-text,.center-word,.brand-w,.brand-2,.brand-date,.overlay-phrase{color:#46413a !important;} /* small black chrome on the preview */ .size-badge{background:rgba(70,65,58,.66) !important;} /* ===================== v4: reach the INLINE-coloured black ================= */ /* CLASSIC / STREET tile logos render with inline color:#0A0A0A on .w2logo-tile */ .w2logo-tile{color:#46413a !important;} /* on-garment print: ink is inline color:#0A0A0A on LIGHT shirts (white on dark stays — only soften the dark-ink case) */ /* ANY element whose ink is inline black (#0A0A0A / rgb(10,10,10)) -> soft. Catches garment brandmark .sh-brandmark/.cb-brandmark (the `be` span), the FREE text div, .sh-block, tile logos, etc. White-on-dark (#FFFFFF / rgb(255,255,255)) is a different value, so it stays white. */ [style*="rgb(10, 10, 10)"], [style*="#0A0A0A"], [style*="#0a0a0a"]{color:#46413a !important;} /* the one hard-coded black path inside the brand-style W❤² svg */ [fill="#0A0A0A"],[fill="#0a0a0a"]{fill:#46413a !important;} /* .sh-phrase / .sh-brandmark inherit currentColor from .sh-block -> softened with it */ /* ===================== v5: calm the bright red to brand red =============== */ .sp-heart,.cbs-heart{color:#EB4014 !important;} .hdr-phrase .w2ink-h{color:#EB4014 !important;} /* red heart PNGs nudged toward the calmer brand red-orange; orange/white left alone */ img[src*="heart_red"]{filter:hue-rotate(10deg) saturate(.9) !important;} /* BLACK heart PNGs (heart_black_*) -> soft ink #46413a — same soft black as everywhere. Covers garment heart + the BLACK colour swatch + HEART STYLE previews when black is picked. */ img[src*="heart_black"]{filter:invert(74%) sepia(99%) saturate(43%) hue-rotate(358deg) brightness(7%) contrast(56%) !important;} /* ===================== v6: avatars back to normal; Host -> hat ============ */ /* Owner (your) avatar: native circle (the broken v4 override is gone, nothing to do). */ /* Guest slot only (src=…mr_host.svg): swap the Mr.Host figure for the brand top-hat, as a clean circle of the same size. Owner photos (other src) are untouched. */ /* ===================== v8: equalize heart size across styles ============== */ /* w2logo heart height is inline .74*heartScale em; classic=1.1 (=.814em), others=1 (=.74em). Force all to the classic size so STREET/MAVERICK match CLASSIC — tiles AND on garments. */ .w2logo-h{height:.814em !important;} /* ===================== v9: FREE 3rd style = Brand Style font =============== */ /* Maverick is identified by its inline font "Petit Formal Script". Replace it everywhere with our Brand-Style font = Bagel Fat One (self-hosted @font-face, monolithic / uppercase). Colour stays the .sh-block ink (black on light, white on dark). The tile label/preview text is JS, so we re-letter it in CSS. */ /* on-garment FREE text (both lines inherit from .sh-block) */ /* broad: catches the classless FREE
, .sh-block and any maverick text ("Petit Formal Script" appears only for maverick, so this is exact) */ [style*="Petit Formal Script"]{ font-family:"Bagel Fat One",system-ui,sans-serif !important; text-transform:uppercase !important; letter-spacing:.01em !important; } /* tile: re-letter MAVERICK -> BRAND STYLE and show the Brand font in the preview */ .style-preview[style*="Petit Formal Script"]{font-size:0 !important;} .style-preview[style*="Petit Formal Script"]::after{ content:"BRAND"; font-family:"Bagel Fat One",system-ui,sans-serif; font-size:16px; line-height:1; color:#46413a; text-transform:uppercase; } .pick-card:has(.style-preview[style*="Petit Formal Script"]) .pick-lbl{font-size:0 !important;} .pick-card:has(.style-preview[style*="Petit Formal Script"]) .pick-lbl::after{ content:"BRAND STYLE"; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-family:Montserrat,sans-serif; } .pick-card:has(.style-preview[style*="Petit Formal Script"]) .pick-sub{font-size:0 !important;} .pick-card:has(.style-preview[style*="Petit Formal Script"]) .pick-sub::after{ content:"font"; font-size:9px; font-family:"DM Sans",sans-serif; } /* ===================== v10: site (non-glass) header rework ================ */ /* Centre the logo, make it grey + -20%; drop the GAME TEE / HOODIE tag words; swap the Mr.Host figure for our top-hat sized to the logo. All scoped to .hdr so the shoplink .hdr-glass header stays exactly as it is. NOTE: the figure shown is the static hat.svg placeholder — the real "dancing cylinder" asset is not in the dist; wire it once located. */ /* centre the logo; pin the right cluster (now just the hat) to the edge */ .app .hdr{position:relative !important; justify-content:center !important; padding-left:64px !important; padding-right:64px !important;} .app .hdr .hdr-right{position:absolute !important; right:16px !important; top:50% !important; transform:translateY(-50%) !important; gap:0 !important;} /* logo: grey like shoplink, -20% (30px -> 24px) */ .app .hdr svg.logo-img{color:#aab0ba !important; height:24px !important;} /* drop the tag words */ .app .hdr .hdr-tag{display:none !important;} /* Mr.Host figure -> our top-hat, ~logo height, no circle chrome */ .app .hdr .hdr-avatar{width:30px !important; height:30px !important; border:0 !important; background:transparent !important; box-shadow:none !important; padding:0 !important;} /* tidy the floating Catalog pill: harsh blue -> soft ink */ [style*="rgb(37, 99, 235)"],[style*="#2563eb"]{color:#46413a !important;} /* === W2SKIN_FOOT_PRICE_V1 — footer price matches the cart ================= $ price: black ink + Syne (like .w2c-total-val) GBT: red #FF4D00 + Montserrat (like .w2c-total-gbt) kills the old multicolor (#ec4015 $ / #ff8a00 gbt). */ .w2-foot-usd{color:#46413a !important; font-family:Syne,sans-serif !important;} .w2-foot-gbt{color:#FF4D00 !important; font-family:Montserrat,sans-serif !important;} /* === W2SKIN_SMOOTH_V1 — smooth product switching (no emoji flash) ========== On product/color switch the bundle clears the src and async-loads the PNG; meanwhile it renders .shirt-fallback = a grey box with an emoji (👜/🧢/👕). We replace that jarring emoji with the calm Mr.Host hat loader, and fade the real garment image in on (re)mount. Combined with JS preload (w2cart.js), the switch reads as a smooth branded load, never a random bag picture. */ .shirt-fallback{ font-size:0 !important; /* hide the emoji glyph */ opacity:1 !important; background:transparent !important; /* drop the harsh colour box */ background-image:url("/miniapp/construct/hat.svg") !important; background-repeat:no-repeat !important; background-position:center !important; background-size:60px auto !important; animation:w2HatPulse 1s ease-in-out infinite !important; } @keyframes w2HatPulse{ 0%,100%{opacity:.32; transform:translateY(0) scale(1);} 50% {opacity:.7; transform:translateY(-3px) scale(1.05);} } /* gentle fade-in of the actual garment image whenever it (re)mounts */ .shirt-img{animation:w2FadeIn .28s ease both;} @keyframes w2FadeIn{from{opacity:0;}to{opacity:1;}} /* === W2_LAYOUT_GPT_V1 — sticky-composer clearance + GPT section order (with w2layout.js) === */ .scroll{ display:flex !important; flex-direction:column !important; padding-bottom:190px !important; } /* === W2_LOGO_SHRINK_V2 (center-scoped; left chest restored) — on-shirt prints smaller, TOP-anchored (top edge stays put) === */ /* uses individual `scale:` so the bundle's own transforms are preserved */ .sh-block.center .sh-brandmark{ scale: .60 !important; transform-origin: top center !important; } /* brand logo -40% (center only) */ .sh-block.center .w2logo{ scale: .82 !important; transform-origin: top center !important; } /* classic/street logo -18% (center only) */ .sh-block.center .sh-phrase{ scale: .85 !important; transform-origin: top center !important; } /* word -15% (center only) */ /* === W2HEADER_ICONS_V1 — Catalog pill -> two round blue icons (close + share) === */ .w2h-bar{ display:flex !important; align-items:center !important; gap:4px !important; padding:4px !important; border-radius:16px !important; background:rgba(255,255,255,.95) !important; box-shadow:0 6px 18px rgba(0,0,0,.16) !important; border:1px solid #ececec !important; } .w2h-ic{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:50%; color:#2563eb; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .15s ease, transform .12s ease; } .w2h-ic svg{ width:22px; height:22px; display:block; } .w2h-ic:hover{ background:rgba(37,99,235,.08); } .w2h-ic:active{ background:rgba(37,99,235,.16); transform:scale(.9); } /* === W2CART_CSS_ICON_V2 — cart icon + count as pseudo-elements on the native CTA. No DOM child is injected into the React button (that crashed mobile on keyboard resize). === */ .w2-foot-cta{ position: relative !important; } .w2-foot-cta::before{ content:""; display:inline-block; width:18px; height:18px; margin-right:9px; vertical-align:-3px; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat; } .w2-foot-cta[data-w2c-count]:not([data-w2c-count="0"])::after{ content:attr(data-w2c-count); position:absolute; top:7px; right:13px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#e23744; color:#fff; font-size:11px; font-weight:700; line-height:18px; text-align:center; box-sizing:border-box; } /* === W2_CB_BRAND_SHRINK_V3 (.72, -15% more) (svg-safe transform:scale) — cap + bag brand-style logo -15% (logo only) === */ .cb-brandmark{ transform: scale(.72) !important; transform-origin: center !important; } /* === W2_CENTER_SPACING_V6 (neg-margin, tight) — pull the word to the W❤² lockup, both center layouts === */ /* one-line (front_center_1): flex-row [logo]·[word] -> tight gap, centered */ .sh-block.center > div[style*="nowrap"]{ /* W2_INLINE_ROW_FIX_v1 */ gap: 0 !important; align-items: center !important; justify-content: center !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; } .sh-block.center > div[style*="nowrap"] > .sh-phrase{ margin-left: -.136em !important; margin-top: 0 !important; scale: none !important; font-size: 22px !important; transform: translateY(-2px) !important; } /* two-line (front_center_2): word below the lockup -> raise it to the logo */ /* brand two-line word is an inline
(no .sh-phrase) */ .sh-block.center > div[style*="230px"], .sh-block.center > div[style*="86%"]{ margin-top: -18px !important; } /* non-brand (classic/street) two-line word: .sh-phrase as a DIRECT child (one-line .sh-phrase is a grandchild via the nowrap div, so it is NOT hit) */ .sh-block.center > .sh-phrase{ margin-top: -14px !important; } /* === W2FOOTFIX_CSS_V1 — footer glides above the iOS keyboard (with w2footfix.js) === */ .w2-foot{ transition: transform .22s cubic-bezier(.22,.61,.36,1) !important; will-change: transform; } /* === W2_MASCOT_LIFT_V1 — raise the on-shirt Mr.Host mascot onto the chest (up ~one figure) === */ .sh-block div:has(> img[src*="mr_host"]){ transform: translateY(-58px) !important; } /* === W2_MASCOT_LIFT_V2 — per-position mascot lift === chest (LEFT CHEST) keeps the perfect lift; center sits just below the collar. */ .sh-block.chest div:has(> img[src*="mr_host"]){ transform: translateY(-58px) !important; } .sh-block.center div:has(> img[src*="mr_host"]){ transform: translateY(-26px) !important; } /* ==================== w2clean.css ==================== */ /* W2CLEAN_V1 — MOBILE ONLY: strip the preview furniture for a clean canvas. Heart size is now pinch (two fingers). Desktop keeps the slider (no pinch on desktop). Side rotate arrows stay. */ @media (max-width: 480px) { .color-ind { display: none !important; } /* top "White · Front" chip */ .size-badge { display: none !important; } /* bottom "T-SHIRT" badge */ .w2sz { display: none !important; } /* heart-size slider (pinch replaces it) */ } /* W2WORD_PIN_V1 — MOBILE: word chips pinned to the BOTTOM OF THE PHOTO (not the footer). Absolute inside the preview, horizontal scroll only, no drift. */ @media (max-width: 480px) { .preview-wrap { position: relative !important; } #w2word { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 8px !important; top: auto !important; width: auto !important; z-index: 6 !important; } #w2word .w2word-chips { padding-left: 12px; padding-right: 16px; } } /* W2_WEB_NATIVE_ARROWS_V1 — hide the "White · Front" chip on ALL sizes (was mobile-only). */ .color-ind{ display:none !important; } /* W2_SZ_TOPCENTER_V1 — desktop: heart-size slider centered horizontally over the garment. */ @media (min-width: 481px) { .w2sz { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; } } /* W2_WHITEHEART_OUTLINE_V1 — thin dark outline so the WHITE heart stays visible on light surfaces (size slider, palette thumbnails) and reads crisp on the garment too. Targets any white-heart PNG by src; colored hearts untouched. */ img[src*="heart_white"]{ filter: drop-shadow(0.7px 0 0 #232323) drop-shadow(-0.7px 0 0 #232323) drop-shadow(0 0.7px 0 #232323) drop-shadow(0 -0.7px 0 #232323) !important; } /* ==================== w2wordfit.css ==================== */ /* W2WORDFIT_V1 — on-garment word fit: ROOT CAUSE: .sh-phrase had overflow:hidden and .sh-block line-height:1, so letter descenders (y, g, j, p) fell outside the line box and got clipped. FIX: give the line box room for descenders (line-height 1.2) so tails show; and pull the word up ~12% toward the logo for a compact, correct look. Logo stays put — only the word moves. Loaded AFTER w2skin.css. */ /* descenders visible for every on-garment word (classic / street / brand) */ .sh-block .sh-phrase{ line-height: 1.2 !important; } /* pull the word up ~12% toward the logo (was margin-top:-14px in w2skin) */ .sh-block.center > .sh-phrase{ margin-top: -18px !important; } /* ==================== w2preview.css ==================== */ /* W2PREVIEW_V1 — cleaner preview stage: 1) remove the golden view dots (the side arrows already rotate the garment); 2) tshirt+hoodie only (shirt group = has .sh-ovl): web -> raise a bit (too much empty space above), mobile -> lower a bit. Cap/Bag untouched. */ /* 1) drop the golden view indicators under the garment */ .vdot{display:none!important} /* 2a) WEB: lift tshirt/hoodie up */ .preview-canvas-wrap:has(.sh-ovl) .shirt-img{ top:-18px!important; bottom:18px!important; } /* 2b) MOBILE: lower tshirt/hoodie down instead */ @media (max-width:480px){ .preview-canvas-wrap:has(.sh-ovl) .shirt-img{ top:14px!important; bottom:-14px!important; } } /* ==================== w2cart.css ==================== */ /* W2CART_V1 styles — Mr.Host Store cart look, themed to the W❤² skin. Ink #46413a, warm white #FAF9F5, line #E6E4DE, orange badge #FF4D00. */ /* cart icon + badge on the Add-to-cart button */ .w2c-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;} .w2c-ico-wrap{position:relative;display:inline-flex;align-items:center;color:#fff;} .w2c-ico{display:block;} .w2c-badge{position:absolute;top:-9px;right:-11px;min-width:17px;height:17px;padding:0 4px; display:none;align-items:center;justify-content:center;background:#FF4D00;color:#fff; border-radius:9px;font:700 11px/1 Montserrat,sans-serif;box-shadow:0 1px 3px rgba(0,0,0,.25);} /* lock scroll when open */ body.w2c-lock{overflow:hidden;} /* root + backdrop + bottom sheet */ #w2c-root{position:fixed;inset:0;z-index:1000;display:none;} #w2c-root.open{display:block;} #w2c-root .w2c-backdrop{position:absolute;inset:0;background:rgba(40,36,32,.42); -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);} #w2c-root .w2c-sheet{position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:100%;max-width:560px;max-height:86vh;overflow:hidden;display:flex;flex-direction:column; background:#FAF9F5;border:1px solid #E6E4DE;border-bottom:0; border-radius:22px 22px 0 0;box-shadow:0 -14px 44px rgba(0,0,0,.18); animation:w2c-up .22s cubic-bezier(.22,.8,.3,1);} @keyframes w2c-up{from{transform:translate(-50%,18px);opacity:.6}to{transform:translate(-50%,0);opacity:1}} /* header */ .w2c-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;} .w2c-title{font:800 19px/1 Syne,sans-serif;color:#46413a;} .w2c-x{border:0;background:none;font-size:24px;line-height:1;color:#8a8a8a;cursor:pointer;padding:2px 6px;} /* list */ .w2c-list{overflow-y:auto;padding:4px 14px;} .w2c-empty{display:none;padding:26px 18px 30px;text-align:center;color:#8a8a8a; font:500 14px/1.4 DM Sans,sans-serif;} .w2c-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #EFEDE7;} .w2c-row:last-child{border-bottom:0;} /* thumbnail (cloned live preview) */ .w2c-thumb{width:64px;height:74px;flex:0 0 auto;border-radius:10px;overflow:hidden; background:#f5f3ef;border:1px solid #EFEDE7;position:relative;} .w2c-thumb-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.26);transform-origin:center;} /* info */ .w2c-info{flex:1 1 auto;min-width:0;} .w2c-name{font:700 14px/1.2 Syne,sans-serif;color:#46413a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .w2c-price{margin-top:3px;font:600 12px/1 DM Sans,sans-serif;color:#8a6a3a;} /* qty stepper */ .w2c-qty{flex:0 0 auto;display:flex;align-items:center;gap:8px;} .w2c-qty button{width:26px;height:26px;border:1px solid #E6E4DE;background:#fff;border-radius:8px; font-size:16px;line-height:1;color:#46413a;cursor:pointer;display:flex;align-items:center;justify-content:center;} .w2c-qty button:active{background:#f1efe9;} .w2c-q{min-width:16px;text-align:center;font:700 14px/1 Montserrat,sans-serif;color:#46413a;} .w2c-trash{flex:0 0 auto;border:0;background:none;cursor:pointer;font-size:15px;opacity:.55;padding:4px;} .w2c-trash:hover{opacity:1;} /* footer / totals / actions */ .w2c-foot{padding:12px 18px 18px;border-top:1px solid #EFEDE7;background:#FAF9F5;} .w2c-totals{display:flex;align-items:baseline;gap:8px;margin-bottom:12px;} .w2c-total-lbl{font:600 13px/1 DM Sans,sans-serif;color:#8a8a8a;} .w2c-total-val{font:800 22px/1 Syne,sans-serif;color:#46413a;margin-left:auto;} .w2c-total-gbt{font:700 12px/1 Montserrat,sans-serif;color:#FF4D00;} .w2c-actions{display:flex;gap:10px;} .w2c-continue{flex:1 1 0;padding:14px;border:1px solid #E6E4DE;background:#fff;border-radius:14px; font:700 15px/1 Montserrat,sans-serif;color:#46413a;cursor:pointer;} .w2c-checkout{flex:2 1 0;padding:14px;border:0;border-radius:14px;background:#46413a;color:#fff; font:800 15px/1 Montserrat,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(70,65,58,.28);} .w2c-checkout:active{background:#322e27;} /* ==================== w2footer.css ==================== */ /* W2FOOTER_COMPACT_V1_260615_1130 — MOBILE-ONLY compact composer. Scoped to body.w2-footer-compact, which w2footer.js adds ONLY when innerWidth<=480 => web is never touched. Fully reversible (drop the class). No bundle rewrite. Loads after w2skin/w2cart. */ :root{ --w2fc-idle:152px; --w2fc-edit:116px; } /* stick closer to the bottom */ body.w2-footer-compact .w2-foot{ padding:0 10px max(6px, env(safe-area-inset-bottom)) !important; } /* tighter glass bubble */ body.w2-footer-compact .w2-foot-bubble{ padding:8px !important; gap:7px !important; border-radius:20px !important; box-shadow:0 10px 30px rgba(60,40,28,.18), inset 0 1px 0 rgba(255,255,255,.9) !important; } /* input row: smaller but keeps a 44px touch target */ body.w2-footer-compact .w2-foot-input{ padding:9px 14px !important; min-height:44px !important; border-radius:13px !important; } body.w2-footer-compact .w2-foot-field{ font-size:17px !important; } /* CTA: keep its internals, just trim padding/font, keep >=46px */ body.w2-footer-compact .w2-foot-cta{ padding:12px 14px !important; min-height:46px !important; border-radius:13px !important; font-size:15px !important; } body.w2-footer-compact .w2-foot-usd{ font-size:26px !important; line-height:1 !important; } body.w2-footer-compact .w2-foot-gbt{ font-size:12px !important; line-height:1 !important; } /* idle reserve driven by target footer height, not a guessed 190 */ body.w2-footer-compact .scroll{ padding-bottom:calc(var(--w2fc-idle) + env(safe-area-inset-bottom)) !important; transition:padding-bottom .2s ease; } /* smooth collapse hook for editing mode */ body.w2-footer-compact .w2-foot-actions{ transition:max-height .2s ease, opacity .18s ease, margin .2s ease; max-height:64px; overflow:hidden; } /* EDITING (typing the word): drop the buy row, give the shirt room */ body.w2-footer-compact.w2-keyboard-on .w2-foot-actions{ max-height:0 !important; opacity:0 !important; margin:0 !important; pointer-events:none !important; } body.w2-footer-compact.w2-keyboard-on .w2-foot-bubble{ gap:0 !important; padding:7px 8px !important; } body.w2-footer-compact.w2-keyboard-on .scroll{ padding-bottom:calc(var(--w2fc-edit) + env(safe-area-inset-bottom)) !important; } /* ==================== w2inputfix.css ==================== */ /* W2INPUTFIX_V1 — force visible dark text + caret in all text inputs. Telegram Mini App (dark theme) was rendering the caret and text fill white on the white input background -> the cursor and typed text vanished. Forcing color-scheme:light + explicit color / caret-color / -webkit-text-fill-color fixes it on every surface. */ :root{ color-scheme: light; } input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select{ color:#111 !important; caret-color:#111 !important; -webkit-text-fill-color:#111 !important; } input::placeholder, textarea::placeholder{ color:#9aa0a6 !important; -webkit-text-fill-color:#9aa0a6 !important; opacity:1 !important; } /* ==================== w2free.css ==================== */ /* =========================================================================== W2FREE_V1 — FREE-mode input fix (mobile + web) --------------------------------------------------------------------------- Problem: - In FREE mode the print text was editable in TWO places at once — the dedicated Line 1 / Line 2 fields AND the persistent footer field — both bound to the same value, which feels like a duplicate input. - On the narrow mobile canvas the preview line had no wrap guard, so a single line broke into 2-3 visual lines after ~5-6 characters. Fix: 1) In FREE mode hide the duplicate footer input (keep Add-to-cart + price). Free text is then edited ONLY in the dedicated Line 1 / Line 2 fields. 2) Free preview lines never wrap — each line stays on one line up to 10 chars (incl. space), same as web. FREE mode is detected by w2free.js, which toggles `body.w2free`. Additive overlay: no bundle edits, reversible. =========================================================================== */ /* 1) Hide the duplicate footer input while in FREE mode (cart + price stay) */ body.w2free .w2-foot-input{ display:none !important; } /* 2) Free preview lines stay on one line (no 2-3 line wrap on mobile) */ body.w2free .sh-block div, body.w2free .shirt-overlay div{ white-space:nowrap !important; } /* ==================== w2lightbox.css ==================== */ /* W2LIGHTBOX_V2css — polished product modal. Tap a design mockup -> a centered product card scales in from the photo on a clean studio surface (no white haze on dark garments); dark blurred scrim. Only data:image snapshots trigger it (see w2lightbox.js). */ img[src^="data:image"]{ cursor:zoom-in; } .w2lb-overlay{ position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; padding:max(20px,4vh) max(16px,4vw); background:rgba(9,9,11,.80) !important; -webkit-backdrop-filter:blur(9px) !important; backdrop-filter:blur(9px) !important; cursor:zoom-out; opacity:0; transition:opacity .2s ease; } .w2lb-overlay.w2lb-in{ opacity:1; } .w2lb-overlay.w2lb-closing{ opacity:0; } /* the product frame — scales in from the photo */ .w2lb-card{ position:relative; max-width:min(560px,92vw); max-height:88vh; border-radius:24px; overflow:hidden; background:linear-gradient(180deg,#f7f6f4 0%,#edebe7 100%); box-shadow:0 34px 90px rgba(0,0,0,.58), 0 3px 10px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.65); cursor:default; transform:scale(.9); opacity:0; transition:transform .27s cubic-bezier(.2,.72,.24,1), opacity .22s ease; } .w2lb-overlay.w2lb-in .w2lb-card{ transform:scale(1); opacity:1; } .w2lb-overlay.w2lb-closing .w2lb-card{ transform:scale(.94); opacity:0; } /* garment sits crisp on the studio surface — no white img-background halo */ .w2lb-img{ display:block; width:100%; height:auto; max-width:100%; max-height:88vh; object-fit:contain; background:transparent !important; image-rendering:auto; } .w2lb-close{ position:fixed; top:18px; right:20px; width:44px; height:44px; border:none; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:26px; line-height:44px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .15s; } .w2lb-close:hover{ background:rgba(255,255,255,.26); } .w2lb-hint{ position:fixed; bottom:22px; left:0; right:0; text-align:center; color:rgba(255,255,255,.62); font:500 13px/1.2 system-ui,sans-serif; pointer-events:none; } /* ==================== w2brandlogo.css ==================== */ /* W2BRANDLOGO_v5 — constructor ShopLink header: brand-style logo as PURE VECTOR. "W" and "2" are the actual Bagel Fat One glyph OUTLINES (SVG paths), so they render identically on any origin/CSP/cache — no webfont dependency. Static heart. */ /* header geometry: full width on mobile, ~25% shorter bar */ .hdr-glass{ transform:none !important; padding-top:5px !important; padding-bottom:5px !important; gap:10px !important; margin-top:8px !important; margin-bottom:6px !important; } .hdr-glass .hdr-avatar{ width:38px !important; height:38px !important; } @media (max-width:560px){ .hdr-glass{ width:auto !important; max-width:none !important; margin-left:8px !important; margin-right:8px !important; } } /* brand wordmark (vector) */ .w2bl-host{ display:inline-flex; align-items:center; } .w2bl{ display:inline-flex; align-items:center; color:#46413a; font-size:30px; line-height:1; } .w2bl-w{ display:inline-flex; align-items:center; } .w2bl-w svg{ height:.82em; width:auto; display:block; } .w2bl-h3d{ display:inline-flex; width:1em; height:1em; margin:0 .04em; flex:0 0 auto; align-self:center; position:relative; top:.02em; } /* W2BL_HEART_SIZE_V1 */ .w2bl-h3d svg{ display:block; width:100%; height:100%; filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); } .w2bl-sup{ display:inline-flex; align-self:flex-start; margin-left:.03em; margin-top:-.02em; } .w2bl-sup svg{ height:.46em; width:auto; display:block; } /* V6 — spinning brand heart (same 3D spin as site/dock) */ .w2bl-h3d svg{ transform-origin: center; will-change: transform; animation: w2blspin 3.4s linear infinite; } @keyframes w2blspin{ 0% { transform: perspective(320px) rotateY(0deg); } 100% { transform: perspective(320px) rotateY(360deg); } } @media (prefers-reduced-motion: reduce){ .w2bl-h3d svg{ animation: none !important; } } /* V7 — brand logo on tiles (CUSTOM + BRAND STYLE) */ .w2bl-host{ justify-content:center; } .w2bl-host--custom{ display:flex; margin:0 auto 2px; } .w2bl-host--custom .w2bl{ font-size:33px; } /* ~ old .style-brandmark 30px */ .w2bl-host--tile{ display:flex; margin:0 auto 2px; } .w2bl-host--tile .w2bl{ font-size:46px; } /* match CLASSIC/STREET heart size */ /* V11 — precise tile sizes (tunable knobs) */ .w2bl-host--custom{ display:flex; margin:0 auto 2px; } .w2bl-host--custom .w2bl{ font-size:26px !important; } /* CUSTOM tile (knob) */ .w2bl-host--brand{ display:flex; margin:0 auto 2px; } .w2bl-host--brand .w2bl{ font-size:28px !important; } /* BRAND STYLE tile (knob, ~30% smaller than v10) */ /* V3 — BRAND on-garment font tuning (print path). Scoped to .sh-brand only; classic/street untouched. Fixes descender clipping + slightly lighter read. */ .sh-brand{ line-height:1.16 !important; } .sh-brand .sh-phrase{ line-height:1.30 !important; /* g,y,j,G tails fit, no bottom clip */ letter-spacing:0.012em !important; /* a touch looser -> reads less heavy */ padding-bottom:3px; /* extra bottom breathing room */ -webkit-font-smoothing:antialiased; /* crisper, hair thinner */ text-rendering:geometricPrecision; } /* V12 — brand INK: soften flat black to one canonical soft-dark gradient. Native BRAND STYLE tile text -> gradient-clip (UI only; heart img unaffected). */ .w2bl-inktile{ background:linear-gradient(170deg,#45464d 0%,#212227 52%,#0d0e11 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ==================== w2i18n.css ==================== */ /* W2I18N_v4 — styling moved to w2hdr.css. (kept for index reference) */ /* ==================== w2word.css ==================== */ /* W2WORD_v2 — word chips only (no label/helper), PEARL, above input, web+mobile. Change: removed CHOOSE-YOUR-WORD label + helper text; chips sit right above the input with a small gap; horizontal smooth scroll with a soft right fade; pearl/ivory (жемчужный) chip color; shown on mobile too. */ /* 1) denser bottom panel (kept as-is) */ .w2-foot-bubble{ background:rgba(255,255,255,.96)!important; -webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important; border:1px solid rgba(40,36,30,.10)!important; box-shadow:0 12px 36px rgba(0,0,0,.14)!important; } .w2-foot-bubble::after{display:none!important;} /* 2) input row (kept) */ .w2-foot-input{ background:#ffffff!important;border:2px solid #d8d3cc!important;border-radius:18px!important; box-shadow:0 6px 18px rgba(0,0,0,.08)!important;min-height:56px!important; transition:border-color .15s ease, box-shadow .15s ease!important; } .w2-foot-field{ background:transparent!important;color:#111111!important;font-weight:900!important; font-size:22px!important;letter-spacing:-.01em!important; } .w2-foot-field::placeholder{color:#aaa39b!important;font-weight:700!important;} .w2-foot-input:focus-within{ border-color:#ff3b30!important; box-shadow:0 0 0 4px rgba(255,59,48,.12),0 10px 26px rgba(0,0,0,.12)!important; } /* 3) counter states (kept) */ .w2-foot-max{font-size:12px!important;font-weight:800!important;color:#b4aca3!important;letter-spacing:.02em!important;} .w2-foot-max.w2warn{color:#ff8a00!important;} .w2-foot-max.w2full{color:#ff3b30!important;} /* 4) body-level chips block — CHIPS ONLY, glued just above the input */ #w2word{position:fixed;z-index:58;pointer-events:none; font-family:'DM Sans',system-ui,-apple-system,sans-serif} #w2word>*{pointer-events:auto} /* W2WORD_v2: hide the label + helper — chips speak for themselves */ #w2word .w2word-label, #w2word .w2word-helper{display:none!important} /* horizontal scroll row: hidden scrollbar, smooth, soft right fade = "more →" */ #w2word .w2word-chips{ display:flex;gap:8px;overflow-x:auto;padding:2px 16px 4px 2px;margin:0; scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none; -webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(to right,#000 90%,transparent); mask-image:linear-gradient(to right,#000 90%,transparent); } #w2word .w2word-chips::-webkit-scrollbar{display:none} /* PEARL / ivory (жемчужный) chips with a soft pearlescent sheen */ #w2word .w2word-chip{ border:1px solid rgba(184,170,140,.38); background:linear-gradient(145deg,#faf7f0 0%,#efe8d6 55%,#f5f0e4 100%); border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:800; color:#5a5344;white-space:nowrap;cursor:pointer;flex:0 0 auto; box-shadow:0 3px 10px rgba(120,105,70,.14),inset 0 1px 0 rgba(255,255,255,.75); -webkit-tap-highlight-color:transparent; transition:transform .12s ease, box-shadow .12s ease; } #w2word .w2word-chip:hover{ box-shadow:0 5px 14px rgba(120,105,70,.22),inset 0 1px 0 rgba(255,255,255,.85); } #w2word .w2word-chip:active{transform:scale(.94)} /* 5) mobile: SHOW the pearl chips (was fully hidden before) */ @media (max-width:480px){ body.w2-footer-compact .w2-foot-field,.w2-foot-field{font-size:20px!important} body.w2-footer-compact .w2-foot-input,.w2-foot-input{min-height:54px!important} #w2word{display:block!important} #w2word .w2word-chips{padding-right:20px} #w2word .w2word-chip{padding:7px 13px;font-size:13px} } /* ==================== w2inputstyle.css ==================== */ /* W2INPUTSTYLE_V1 — the word input legible on dark + its font is synced to the selected STYLE by w2inputstyle.js (classic->Barlow, street->Permanent Marker, brand->Bagel Fat One). This file only fixes the dark-theme text colour; the font-family/weight are applied inline by the JS so they track the style. */ html.w2-dark .w2-foot-field{ color:#f4f1ec !important; } html.w2-dark .w2-foot-field::placeholder{ color:rgba(255,255,255,.42) !important; } /* ==================== w2hdr.css ==================== */ /* W2HDR_v6 — controls in-flow grid children of .hdr (scroll with header). Canonical language+THEME menu: dark panel (#1c1c1e), spacious, 3 langs + theme. */ #w2hl{display:flex!important;align-items:center!important;gap:9px!important;justify-self:start!important;grid-column:1!important} #w2hr{display:flex!important;align-items:center!important;gap:10px!important;justify-self:end!important;grid-column:3!important} .w2flag-wrap{position:relative;display:flex;align-items:center;font-family:'DM Sans',system-ui,-apple-system,sans-serif} #w2hl button,#w2hr button{border:0;background:transparent;padding:0;margin:0;cursor:pointer; -webkit-tap-highlight-color:transparent;display:flex;align-items:center;justify-content:center} .w2hdr-flag{font-size:24px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))} .w2hdr-flag:active{transform:scale(.9)} .w2hdr-maps{width:30px;height:30px} .w2hdr-maps svg{width:24px;height:24px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18))} .w2hdr-maps:active{transform:scale(.9)} #w2hr .w2hdr-call{width:36px;height:36px;border-radius:50%;background:#16C65A!important;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.20)} .w2hdr-call svg{width:21px;height:21px;display:block} .w2hdr-call:active{transform:scale(.92)} /* ---- canonical dark menu (same look as the site name-row menu) ---- */ .w2hdr-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:288px;background:#1c1c1e; border:1px solid rgba(255,255,255,.08);border-radius:16px; box-shadow:0 22px 50px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.30); padding:8px;display:none;z-index:80} .w2hdr-menu.open{display:block;animation:w2menuIn .14s ease} @keyframes w2menuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .w2hdr-menu > button{width:100%;display:flex;align-items:center;gap:13px;text-align:left; color:#fff;font-size:16px;font-weight:600;line-height:1;padding:14px 14px;border-radius:12px;white-space:nowrap} .w2hdr-menu > button:hover{background:rgba(255,255,255,.08)} .w2hdr-menu > button.on{background:rgba(255,255,255,.06)} .w2hdr-menu .w2hdr-fe{font-size:21px;line-height:1} .w2hdr-menu .w2hdr-ln{flex:1} .w2hdr-menu .w2hdr-ck{color:#16C65A;font-size:16px;font-weight:800} /* theme row */ .w2hdr-sep{height:1px;background:rgba(255,255,255,.08);margin:6px 8px} .w2hdr-themes{display:flex;gap:6px;padding:2px 6px 6px} .w2hdr-themes button{flex:1;display:flex;align-items:center;justify-content:center;gap:7px; padding:11px 8px;border-radius:11px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.62); font-size:13.5px;font-weight:700;line-height:1;font-family:'DM Sans',system-ui,sans-serif} .w2hdr-themes button.on{background:rgba(255,255,255,.14);color:#fff} .w2hdr-themes .w2hdr-ti{display:inline-flex} .w2hdr-themes svg{width:15px;height:15px;display:block} @media (max-width:480px){.w2hdr-flag{font-size:22px}#w2hr .w2hdr-call{width:34px;height:34px}.w2hdr-maps{width:28px;height:28px}.w2hdr-maps svg{width:22px;height:22px}.w2hdr-menu{min-width:260px}} /* ==================== w2overrides.css ==================== */ /* W2HEARTFIX_V1 — white heart visible on white card: crisp dark outline of the heart shape */ .heart-thumb[src*="heart_white"]{ filter: drop-shadow(.7px 0 0 rgba(0,0,0,.6)) drop-shadow(-.7px 0 0 rgba(0,0,0,.6)) drop-shadow(0 .7px 0 rgba(0,0,0,.6)) drop-shadow(0 -.7px 0 rgba(0,0,0,.6)); } /* ==================== w2sitefooter.css ==================== */ /* W2SITEFOOTER_V2 — constructor footer (bottom of .scroll). Dark, neat, animated. */ .w2-sitefooter, .w2-sitefooter * { box-sizing: border-box; } .w2-sitefooter { order: 99999; /* pinned last among .scroll children */ margin: 26px -16px 16px; /* bleed to the scroll padding edges */ padding: 24px 20px 26px; background: linear-gradient(170deg, #45464d 0%, #212227 52%, #0d0e11 100%); /* canonical brand ink gradient */ border-radius: 22px; /* neat rounded card — all corners */ color: #cfcfd4; font-family: "DM Sans", "Montserrat", system-ui, -apple-system, sans-serif; } /* ---- brand: W + spinning heart + ² ---- */ .w2-sitefooter .w2sf-brand { margin-bottom: 16px; } .w2-sitefooter .w2sf-logo { font-family: "Bagel Fat One", cursive; font-weight: 400; font-size: 30px; color: #fff; letter-spacing: .5px; line-height: 1; display: inline-flex; align-items: baseline; gap: 1px; } .w2-sitefooter .w2sf-logo sup { font-size: .55em; } .w2-sitefooter .w2sf-heart { display: inline-flex; width: .86em; height: .86em; margin: 0 .04em; vertical-align: -.04em; } .w2-sitefooter .w2sf-heart svg { display: block; width: 100%; height: 100%; transform-origin: center; will-change: transform; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.28)); animation: w2sfHeartSpin 3.4s linear infinite; /* one-to-one with custom tile */ } @keyframes w2sfHeartSpin { 0% { transform: perspective(320px) rotateY(0deg); } 100% { transform: perspective(320px) rotateY(360deg); } } @media (prefers-reduced-motion: reduce) { .w2-sitefooter .w2sf-heart svg { animation: none; } } /* ---- links (shared) ---- */ .w2-sitefooter .w2sf-link { color: #b9b9c0; font-size: 13px; line-height: 1.4; text-decoration: none; transition: color .15s; } .w2-sitefooter .w2sf-link:hover { color: #fff; text-decoration: underline; } /* ---- Documents accordion ---- */ .w2-sitefooter .w2sf-acc { padding-top: 18px; } .w2-sitefooter .w2sf-acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; padding: 4px 0; cursor: pointer; color: #fff; font-family: "Syne", system-ui, sans-serif; font-weight: 800; font-size: 16px; } .w2-sitefooter .w2sf-caret { transition: transform .22s ease; color: #c5a059; flex: none; } .w2-sitefooter .w2sf-acc.open .w2sf-caret { transform: rotate(180deg); } .w2-sitefooter .w2sf-acc-panel { max-height: 0; overflow: hidden; transition: max-height .28s cubic-bezier(.22,.61,.36,1); } .w2-sitefooter .w2sf-acc-inner { padding-top: 12px; } .w2-sitefooter .w2sf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; } @media (max-width: 460px) { .w2-sitefooter .w2sf-grid { grid-template-columns: 1fr; } } .w2-sitefooter .w2sf-all { display: inline-block; margin-top: 14px; color: #c5a059; font-weight: 700; font-size: 13px; text-decoration: none; } .w2-sitefooter .w2sf-all:hover { text-decoration: underline; } /* ---- contacts: Support / Investors / Partners + briefs ---- */ .w2-sitefooter .w2sf-contacts { margin-top: 20px; padding-top: 0; } .w2-sitefooter .w2sf-cgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } @media (max-width: 460px) { .w2-sitefooter .w2sf-cgrid { grid-template-columns: 1fr; gap: 10px; } } .w2-sitefooter .w2sf-contact { display: flex; flex-direction: column; gap: 2px; text-decoration: none; } .w2-sitefooter .w2sf-contact b { color: #fff; font-size: 12px; font-weight: 700; } .w2-sitefooter .w2sf-contact span { color: #b9b9c0; font-size: 12px; font-weight: 600; transition: color .15s; } .w2-sitefooter .w2sf-contact:hover span { color: #cfcfd4; } .w2-sitefooter .w2sf-briefs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; } .w2-sitefooter .w2sf-brief { color: #c5a059; font-weight: 700; font-size: 13px; text-decoration: none; } .w2-sitefooter .w2sf-brief:hover { text-decoration: underline; } /* ---- company line ---- */ .w2-sitefooter .w2sf-co { margin-top: 20px; padding-top: 0; color: #9a9aa2; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; } /* W2_SUP_FIX_V1 - keep the superscript "2" raised regardless of flex/theme, matching the canonical front W2Logo (translateY, not vertical-align, because .w2sf-logo is a flex row where vertical-align is ignored). */ .w2-sitefooter .w2sf-logo sup{ font-size:.58em !important; line-height:1 !important; vertical-align:baseline !important; align-self:center !important; transform:translateY(-.42em) !important; margin-left:.04em !important; } /* ==================== w2rufont.css ==================== */ /* W2_RU_FONT_V1 — Russian UI in ALS Direct (slightly bolder). Family name "ALS" matches the front; .otf files are copied next to the overlays on deploy and served from /miniapp/construct/fonts/. */ @font-face { font-family: "ALS"; src: url("/miniapp/construct/fonts/ALSDirect-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "ALS"; src: url("/miniapp/construct/fonts/ALSDirect-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* general Russian UI text -> ALS Direct, a touch bolder than default */ html[lang="ru"] body, html[lang="ru"] .app, html[lang="ru"] .scroll { font-family: "ALS", "Manrope", system-ui, sans-serif; font-weight: 500; } /* section titles a bit bolder for presence */ html[lang="ru"] .sec-t { font-family: "ALS", "Manrope", system-ui, sans-serif; font-weight: 600; } /* brand wordmark / logo keep their own fonts (they declare font-family explicitly) */ /* ==================== w2dark.css ==================== */ /* W2_FROST_DROP_V1 — frosted glass drop for active tab + cart CTA */ /* ============================================================================ 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:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)) !important; color:#fff !important; border:1px solid rgba(255,255,255,.18) !important; box-shadow:0 6px 18px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.10) !important; -webkit-backdrop-filter:blur(14px) !important; backdrop-filter:blur(14px) !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:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06)) !important; color:#fff !important; border:1px solid rgba(255,255,255,.20) !important; box-shadow:0 10px 30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.12) !important; -webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important; } html.w2-dark .w2-foot-cta:active{ background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.12)) !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; } /* W2_WTP_DARKINK_V1 — dark theme: whiten the 'What to print' logo (W + superscript), the FREE label and the style previews so they stay visible; hearts keep their red. */ html.w2-dark .wtp-ink{ color:#ffffff !important; } html.w2-dark .pick-card .style-preview{ color:#ffffff !important; } /* ==================== w2hdrlight.css ==================== */ /* W2HDRLIGHT_V1 — pin the constructor header to the LIGHT (skin) glass in BOTH themes, so theme switching never darkens it and the logo stays readable. Loaded AFTER w2dark.css; re-asserts the w2skin light values under html.w2-dark. Header only — body/cards/footer stay dark in dark theme. */ /* light glass (exact values from w2skin .hdr-glass) */ html.w2-dark .hdr-glass{ background:linear-gradient(180deg, rgba(248,239,233,.60), rgba(243,232,226,.50)) !important; -webkit-backdrop-filter:blur(3px) saturate(1.7) brightness(1.05) url(#w2lens) !important; backdrop-filter:blur(3px) saturate(1.7) brightness(1.05) url(#w2lens) !important; border:1px solid rgba(255,255,255,.65) !important; box-shadow:0 10px 34px rgba(60,40,28,.16), inset 0 1px 0 rgba(255,255,255,.88), inset 0 -9px 16px rgba(120,90,70,.06) !important; } /* light sheen */ html.w2-dark .hdr-glass::after{ background:linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 42%) !important; mix-blend-mode:screen !important; } /* header phrase: light-theme ink (dark text on light glass) */ html.w2-dark .hdr-phrase{ color:rgba(74,66,58,.60) !important; } html.w2-dark .hdr-phrase .w2ink{ color:#46413a !important; } /* maps pin: dark stroke for the light glass (override the dark-theme white) */ html.w2-dark .w2hdr-maps svg{ stroke:#46413a !important; } /* ==================== w2styletiles.css ==================== */ /* W2STYLETILES_V4 — style-tile word sizing (responsive) + dark-theme lighten. */ .w2sp-word{display:inline-flex;align-items:center;justify-content:center;height:34px;line-height:1; letter-spacing:-.01em;white-space:nowrap;font-size:23px;opacity:1;pointer-events:none} .w2sp-word.w2sp-brand{font-size:21px} /* mobile: shrink + allow wrap so even BRAND STYLE fits the tile */ @media (max-width:560px){ .w2sp-word{height:auto;min-height:28px;white-space:normal;text-align:center;line-height:1.04;font-size:14px;padding:1px 2px} .w2sp-word.w2sp-street{font-size:15px} .w2sp-word.w2sp-brand{font-size:12px} } html.w2-dark .pick-sub{ color:rgba(244,241,236,.60) !important; } html.w2-dark .pick-card{ background:rgba(255,255,255,.055) !important; border-color:rgba(255,255,255,.10) !important; } html.w2-dark .pick-card.sel{ background:rgba(212,170,39,.14) !important; border-color:var(--gold,#d4aa27) !important; } /* ==================== w2compose.css ==================== */ /* W2COMPOSE_v4 — composer: - placeholder TEXT only is swapped to "Would love to..." (set by JS). No font, size, colour or ellipsis change — it inherits the field's own placeholder styling, exactly like the original "Type your word...". - the 0/10 counter is hidden and a sticker (printable image) icon takes its place on the right of the input, opening the picker. */ /* NOTE: intentionally no ::placeholder font/colour overrides — keep it native. */ /* hide the 0/10 counter — replaced by the sticker icon */ .w2-foot-max{display:none!important;} /* sticker icon button (body-level, glued where the counter was) */ /* W2COMPOSE_v7 — native flex child of .w2-foot-input (no fixed, no jitter) */ #w2wltc-emoji{ position:static;flex:0 0 auto;width:34px;height:34px;border-radius:11px;cursor:pointer;color:#6b6b70; display:flex;align-items:center;justify-content:center;padding:0;margin:0; border:1px solid rgba(120,120,128,.28);background:rgba(120,120,128,.10); transition:transform .12s ease, background .15s ease;-webkit-tap-highlight-color:transparent; } #w2wltc-emoji.w2on{display:flex;} #w2wltc-emoji:hover{background:rgba(120,120,128,.20);} #w2wltc-emoji:active{transform:scale(.92);} /* ---- sticker modal ---- */ .w2wltc-modal-ov{ position:fixed;inset:0;z-index:2147483600;display:flex;align-items:flex-end;justify-content:center; background:rgba(15,14,13,.46);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); opacity:0;transition:opacity .16s ease; } .w2wltc-modal-ov.w2on{opacity:1;} @media (min-width:560px){.w2wltc-modal-ov{align-items:center;}} .w2wltc-modal{ width:min(440px,94vw);margin:0 0 14px;background:#1f1d1b;color:#f4f1ec; border:1px solid rgba(255,255,255,.08);border-radius:20px; box-shadow:0 24px 70px rgba(0,0,0,.5);padding:16px 16px 18px; transform:translateY(14px);transition:transform .18s ease; } @media (min-width:560px){.w2wltc-modal{margin:0;}} .w2wltc-modal-ov.w2on .w2wltc-modal{transform:none;} .w2wltc-head{display:flex;align-items:center;justify-content:space-between;margin:0 2px 12px;} .w2wltc-title{ font-family:'WLT Brand','Bagel Fat One',cursive;font-weight:400;font-size:22px;line-height:1; background:linear-gradient(150deg,#f0b25a 0%,#e2433f 70%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent; } .w2wltc-x{ width:30px;height:30px;border-radius:999px;border:0;background:rgba(255,255,255,.08); color:#f4f1ec;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; } .w2wltc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;} .w2wltc-item{ aspect-ratio:1;border-radius:14px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05); display:flex;align-items:center;justify-content:center;font-size:30px;cursor:pointer; transition:transform .12s ease, background .15s ease;-webkit-tap-highlight-color:transparent; } .w2wltc-item:hover{background:rgba(255,255,255,.10);} .w2wltc-item:active{transform:scale(.92);} .w2wltc-note{margin:12px 4px 0;font-size:12px;font-weight:600;color:#a9a097; font-family:'DM Sans',system-ui,-apple-system,sans-serif;} /* ==================== w2footfont.css ==================== */ /* W2FOOTFONT_V1 — constructor footer polish: - whole footer in ALS Direct ("ALS"), except the W❤² wordmark (keeps its brand font); - inner texts a bit larger, a bit bolder, brighter for readability; - the language flag becomes a centered chip on the brand row. Loaded after w2sitefooter.css; relies on the "ALS" @font-face (re-declared here for safety; the .otf files are served from /miniapp/construct/fonts/). */ @font-face{ font-family:"ALS"; src:url("/miniapp/construct/fonts/ALSDirect-Regular.otf") format("opentype"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"ALS"; src:url("/miniapp/construct/fonts/ALSDirect-Bold.otf") format("opentype"); font-weight:700;font-style:normal;font-display:swap; } /* ---- whole footer -> ALS Direct (wordmark keeps its own brand font) ---- */ .w2-sitefooter, .w2-sitefooter .w2sf-link, .w2-sitefooter .w2sf-acc-btn, .w2-sitefooter .w2sf-contact b, .w2-sitefooter .w2sf-contact span, .w2-sitefooter .w2sf-brief, .w2-sitefooter .w2sf-all, .w2-sitefooter .w2sf-co{ font-family:"ALS","DM Sans",system-ui,-apple-system,sans-serif !important; } .w2-sitefooter .w2sf-logo{font-family:"Bagel Fat One",cursive !important;} /* ---- Documents heading: ALS, keep its (normal) size ---- */ .w2-sitefooter .w2sf-acc-btn{font-weight:700 !important;color:#ffffff !important;} /* ---- inner texts: larger, bolder, brighter (much easier to read) ---- */ .w2-sitefooter .w2sf-contact b{font-size:14px !important;font-weight:700 !important;color:#ffffff !important;} .w2-sitefooter .w2sf-contact span{font-size:14px !important;font-weight:600 !important;color:#d6d6dc !important;} .w2-sitefooter .w2sf-link{font-size:14.5px !important;font-weight:600 !important;color:#d2d2d9 !important;} .w2-sitefooter .w2sf-brief{font-size:14.5px !important;font-weight:700 !important;} .w2-sitefooter .w2sf-all{font-size:14.5px !important;font-weight:700 !important;} .w2-sitefooter .w2sf-co{font-size:13px !important;font-weight:600 !important;color:#bcbcc4 !important;letter-spacing:.02em;} /* ---- language: flag -> centered chip on the brand row ---- */ .w2-sitefooter .w2sf-brand{position:relative;} .w2-sitefooter .w2fl-btn{ position:absolute !important;left:50% !important;top:50% !important; transform:translate(-50%,-50%) !important;margin:0 !important; display:inline-flex !important;align-items:center;gap:7px; padding:6px 13px !important;border-radius:999px !important;font-size:19px !important;line-height:1 !important; background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.16) !important; box-shadow:0 4px 14px rgba(0,0,0,.18) !important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px); } .w2-sitefooter .w2fl-btn::before{content:"\1F310";font-size:15px;opacity:.92;} /* 🌐 */ .w2-sitefooter .w2fl-btn:active{transform:translate(-50%,-50%) scale(.94) !important;} html.w2-dark .w2-sitefooter .w2fl-btn{ background:rgba(0,0,0,.06) !important;border-color:rgba(0,0,0,.10) !important; } /* ==================== w2freeinput.css ==================== */ /* W2FREEINPUT_V1 — FREE/CUSTOM line inputs legible on dark. The Line 1 / Line 2 / Word fields (.phr-inp) sit on a dark wrap in dark theme (html.w2-dark .phr-wrap -> #232323), but w2inputfix.css forces ALL inputs to black text+caret (#111) with high specificity, so the typed text and caret are invisible there. Restore the theme's light text/caret on dark only (light theme keeps dark text on its light wrap). Specificity intentionally exceeds the w2inputfix :not()-chain so this wins. */ html.w2-dark .phr-inp:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]){ color:var(--text) !important; -webkit-text-fill-color:var(--text) !important; caret-color:var(--text) !important; } html.w2-dark .phr-inp::placeholder{ color:rgba(255,255,255,.42) !important; -webkit-text-fill-color:rgba(255,255,255,.42) !important; opacity:1 !important; } /* ==================== w2strip.css ==================== */ /* ============================================================================ 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). */ /* ==================== w2slcard.css ==================== */ /* ============================================================================ W2SLCARD_V1 — ShopLink card polish (constructor). [rev6 — theme-aware] - DARK theme -> card dark #323232 (address-block tone). This beats w2dark's `html.w2-dark .w2-sitefooter{cream}` (0,2,1) because the card element is