/* ============================================================================ 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. */ .hdr-glass .hdr-avatar[src*="mr_host"]{ content:url("/miniapp/construct/hat.svg") !important; object-fit:contain !important; background:#fff !important; border:1px solid rgba(0,0,0,.07) !important; border-radius:50% !important; padding:7px !important; box-shadow:0 1px 4px rgba(0,0,0,.10) !important; } /* ===================== 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;} .app .hdr .hdr-avatar[src*="mr_host"]{ content:url("/miniapp/construct/hat.svg") !important; object-fit:contain !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; }