/* ========================================================= PINKY POP — พิ้งกี้ ป๊อป Brand: grape #63319A + yolk #FCE000 ========================================================= */ /* ---------- tokens ---------- */ :root{ --grape:#63319A; --grape-d:#3E1A63; --grape-dd:#2A0F47; --grape-l:#8F5CD1; --grape-pale:#EEE3FB; --yolk:#FCE000; --yolk-d:#E4C400; --yolk-pale:#FFF6BE; --bubble:#FF74AC; --bubble-pale:#FFD9E8; --sky:#8FD9F8; --mint:#9CE8C6; --tang:#FFA43D; --cream:#FFF8E7; --paper:#FFFDF6; --ink:#2E1247; --ink-soft:#5B4270; --line:3px solid var(--grape-d); --pop: 0 6px 0 var(--grape-d); --pop-lg: 0 10px 0 var(--grape-d); --soft: 0 18px 40px rgba(62,26,99,.16); --r-s:14px; --r-m:22px; --r-l:34px; --r-xl:48px; --f-disp:'Chewy','Mali',system-ui,cursive; --f-head:'Mali',system-ui,sans-serif; --f-body:'Mali','Noto Sans Thai','Leelawadee UI',system-ui,sans-serif; --f-num:'Fredoka','Mali',system-ui,sans-serif; --nav-h:70px; } *,*::before,*::after{box-sizing:border-box} /* NOTE: do NOT add overflow-x/clip to . `overflow-x:hidden` on body computes overflow-y to `auto`; that only stays harmless while is `overflow:visible`, which lets body's overflow propagate to the viewport. Setting overflow on blocks that propagation, body turns into its own scroll container sized to the full document, and the page stops scrolling entirely. Horizontal overflow is contained by .marquee-wrap instead. */ html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 14px)} body{ margin:0; font-family:var(--f-body); font-weight:400; color:var(--ink); background:var(--cream); overflow-x:hidden; line-height:1.7; -webkit-font-smoothing:antialiased; } /* dotted paper texture */ body::before{ content:""; position:fixed;inset:0; background-image:radial-gradient(rgba(99,49,154,.10) 1.4px, transparent 1.4px); background-size:22px 22px; pointer-events:none;z-index:0; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} :focus-visible{outline:3px dashed var(--bubble);outline-offset:3px;border-radius:6px} /* ---------- shared bits ---------- */ .wrap{width:min(1180px,92vw);margin-inline:auto;position:relative;z-index:1} .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-family:var(--f-num);font-weight:600;font-size:.82rem;letter-spacing:.16em; text-transform:uppercase; background:var(--yolk);color:var(--grape-d); border:var(--line);border-radius:999px; padding:.35rem 1rem;box-shadow:0 4px 0 var(--grape-d); transform:rotate(-2deg); } .h-sec{ font-family:var(--f-head);font-weight:700; font-size:clamp(2rem,5.4vw,3.4rem); line-height:1.15;margin:.7rem 0 .4rem; color:var(--grape-d); } .h-sec .en{font-family:var(--f-disp);font-weight:400;color:var(--grape)} .h-sec .hl{ background:linear-gradient(180deg,transparent 58%,var(--yolk) 58%,var(--yolk) 92%,transparent 92%); padding-inline:.14em; } .sub{max-width:56ch;color:var(--ink-soft);font-size:1.02rem;margin:0 auto} .center{text-align:center} .center .sub{margin-inline:auto} /* squishy button */ .btn{ --bg:var(--yolk); --fg:var(--grape-d); display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--f-head);font-weight:700;font-size:1.02rem; background:var(--bg);color:var(--fg); border:var(--line);border-radius:999px; padding:.72rem 1.6rem; box-shadow:var(--pop); transition:transform .14s cubic-bezier(.34,1.7,.5,1), box-shadow .14s, background .2s; will-change:transform; } .btn:hover{transform:translateY(-3px) rotate(-1.5deg);box-shadow:var(--pop-lg)} .btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--grape-d)} .btn--grape{--bg:var(--grape);--fg:#fff} .btn--pink{--bg:var(--bubble);--fg:#fff} .btn--ghost{--bg:var(--paper);--fg:var(--grape-d)} .btn--sm{font-size:.9rem;padding:.5rem 1.1rem;box-shadow:0 4px 0 var(--grape-d)} /* ---------- loader ---------- */ #loader{ position:fixed;inset:0;z-index:9999; background:var(--grape); display:grid;place-items:center;gap:1rem; transition:opacity .5s ease,visibility .5s; } #loader.done{opacity:0;visibility:hidden} .loader-in{text-align:center} .loader-in img{width:min(230px,52vw);margin-inline:auto;animation:bobLoad 1s ease-in-out infinite} .loader-txt{ font-family:var(--f-head);font-weight:700;color:var(--yolk); margin-top:.6rem;letter-spacing:.04em; } .loader-bar{ width:min(240px,50vw);height:12px;margin:1rem auto 0; background:rgba(255,255,255,.22);border:2px solid var(--yolk);border-radius:999px;overflow:hidden; } .loader-bar i{display:block;height:100%;width:0;background:var(--yolk);border-radius:999px;transition:width .3s} @keyframes bobLoad{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}} /* ---------- sparkle cursor ---------- */ .spark{ position:fixed;z-index:9998;pointer-events:none; width:14px;height:14px;margin:-7px 0 0 -7px; animation:sparkOut .7s ease-out forwards; } @keyframes sparkOut{ 0%{transform:scale(0) rotate(0deg);opacity:1} 60%{opacity:1} 100%{transform:scale(1.5) rotate(140deg);opacity:0} } /* ---------- scroll progress (honey drip) ---------- */ #progress{ position:fixed;top:0;left:0;height:6px;width:0;z-index:1200; background:linear-gradient(90deg,var(--yolk),var(--tang),var(--bubble)); border-bottom-right-radius:8px; transition:width .1s linear; } #progress::after{ content:"";position:absolute;right:-7px;top:0; width:16px;height:16px;border-radius:0 0 60% 60%; background:var(--bubble); } /* ---------- nav ---------- */ #nav{ position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:1100; display:flex;align-items:center; transition:background .3s, box-shadow .3s, backdrop-filter .3s; } #nav.stuck{ background:rgba(255,248,231,.86); backdrop-filter:blur(14px) saturate(1.4); box-shadow:0 3px 0 rgba(62,26,99,.14); } .nav-in{width:min(1180px,94vw);margin-inline:auto;display:flex;align-items:center;gap:1rem} .brand{display:flex;align-items:center;gap:.55rem;flex:0 0 auto} .brand img{height:42px;width:auto;transition:transform .3s cubic-bezier(.34,1.7,.5,1)} .brand:hover img{transform:rotate(-7deg) scale(1.07)} .brand .logo-lite{display:none} /* nav sitting over a dark section — swap to the yellow logo and light text so the bar never disappears into the background */ #nav.on-dark .logo-ink{display:none} #nav.on-dark .logo-lite{display:block} #nav.on-dark.stuck{ background:rgba(42,15,71,.72); box-shadow:0 3px 0 rgba(0,0,0,.22); } #nav.on-dark .nav-links > a{color:#fff} #nav.on-dark .nav-links > a:hover,#nav.on-dark .nav-links > a.on{color:var(--grape-d)} #nav.on-dark .nav-cta{--bg:var(--yolk);--fg:var(--grape-d);color:var(--grape-d)} #nav.on-dark .brand-tag{color:var(--yolk);border-color:var(--yolk)} .brand-tag{ font-family:var(--f-num);font-weight:600;font-size:.64rem;letter-spacing:.14em; color:var(--grape);text-transform:uppercase; border:2px solid var(--grape);border-radius:999px;padding:.1rem .5rem; } .nav-links{display:flex;gap:.2rem;margin-left:auto;align-items:center} .nav-links a{ font-family:var(--f-head);font-weight:600;font-size:.95rem; padding:.4rem .8rem;border-radius:999px;position:relative; transition:color .2s,background .2s; } .nav-links a::after{ content:"";position:absolute;left:50%;bottom:2px;translate:-50% 0; width:0;height:8px;background:var(--yolk);border-radius:999px;z-index:-1; transition:width .25s cubic-bezier(.34,1.7,.5,1); } .nav-links a:hover::after,.nav-links a.on::after{width:calc(100% - 1rem)} .nav-cta{margin-left:.4rem} .burger{display:none;margin-left:auto;width:46px;height:46px;border:var(--line);border-radius:14px;background:var(--yolk);box-shadow:0 4px 0 var(--grape-d);place-items:center} .burger span{display:block;width:22px;height:3px;background:var(--grape-d);border-radius:9px;position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:3px;background:var(--grape-d);border-radius:9px} .burger span::before{top:-7px}.burger span::after{top:7px} /* ---------- hero ---------- */ #hero{ position:relative;padding:calc(var(--nav-h) + 3rem) 0 4.5rem; overflow:hidden; } .hero-blob{ position:absolute;border-radius:50%;filter:blur(50px);opacity:.5;pointer-events:none;z-index:0; } .hero-blob.b1{width:46vw;height:46vw;background:var(--grape-pale);top:-12%;left:-10%} .hero-blob.b2{width:38vw;height:38vw;background:var(--yolk-pale);bottom:-16%;right:-8%} .hero-blob.b3{width:26vw;height:26vw;background:var(--bubble-pale);top:38%;right:26%} .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center; } .hero-copy{position:relative;z-index:2} .hero-h{ font-family:var(--f-head);font-weight:700; font-size:clamp(2.5rem,6.6vw,4.6rem);line-height:1.14; margin:1rem 0 1.2rem;color:var(--grape-d);letter-spacing:-.01em; } /* each line is its own block so Thai vowel marks never collide with the descenders of the Chewy display face */ .hero-h .ln{display:block} .hero-h .pop-en{ font-family:var(--f-disp);font-weight:400;color:var(--grape); line-height:1;margin:.1em 0 .26em; } .hero-h .wig{display:inline-block;animation:wig 3.4s ease-in-out infinite} @keyframes wig{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}} .hero-h em{ font-style:normal;position:relative;display:inline-block;color:var(--grape-d); } .hero-h em::after{ content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.34em; background:var(--yolk);border-radius:999px;z-index:-1;transform:rotate(-1.2deg); } .hero-p{font-size:1.08rem;color:var(--ink-soft);max-width:44ch;margin:0 0 1.6rem} .hero-btns{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.6rem} .hero-perks{ list-style:none;margin:0;padding:0; display:flex;gap:.5rem;flex-wrap:wrap; } .hero-perks li{ font-size:.88rem;font-weight:600;color:var(--grape-d); background:var(--paper);border:2px solid var(--grape-d);border-radius:999px; padding:.28rem .85rem;box-shadow:0 3px 0 var(--grape-d); } /* hero stage */ .hero-stage{position:relative;z-index:2;display:grid;place-items:center;min-height:440px} .stage-ring{ position:absolute;width:min(430px,84%);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle at 50% 42%,var(--yolk) 0%,var(--yolk) 46%,transparent 47%); animation:spinSlow 26s linear infinite; } .stage-ring::after{ content:"";position:absolute;inset:-16px;border-radius:50%; border:4px dashed var(--grape-l);opacity:.5; } @keyframes spinSlow{to{transform:rotate(360deg)}} .hero-tube{ position:relative;width:auto;max-width:66%;max-height:min(470px,58vh); filter:drop-shadow(0 26px 34px rgba(62,26,99,.34)); animation:floatY 5s ease-in-out infinite; } @keyframes floatY{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-20px) rotate(2deg)}} /* floating stickers */ .stick{position:absolute;z-index:3;pointer-events:none;will-change:transform} .stick svg{display:block;filter:drop-shadow(0 6px 10px rgba(62,26,99,.22))} .s1{top:4%;left:2%;width:74px;animation:floatY 6s ease-in-out infinite} .s2{top:14%;right:4%;width:58px;animation:floatY 7s ease-in-out .6s infinite} .s3{bottom:16%;left:-2%;width:66px;animation:floatY 5.4s ease-in-out .3s infinite} .s4{bottom:4%;right:12%;width:80px;animation:floatY 6.6s ease-in-out .9s infinite} .s5{top:44%;left:76%;width:46px;animation:floatY 5s ease-in-out .2s infinite} .price-pill{ position:absolute;right:-2%;top:16%;z-index:4; background:var(--bubble);color:#fff;border:var(--line);border-radius:22px; padding:.55rem 1rem;box-shadow:var(--pop); font-family:var(--f-num);font-weight:700;text-align:center;line-height:1.05; transform:rotate(8deg); animation:pulsePill 2.6s ease-in-out infinite; } .price-pill small{display:block;font-size:.62rem;letter-spacing:.1em;font-weight:600;opacity:.95} .price-pill b{font-size:1.6rem} @keyframes pulsePill{0%,100%{transform:rotate(8deg) scale(1)}50%{transform:rotate(8deg) scale(1.07)}} /* ---------- marquee ---------- */ /* NOTE — do not "simplify" this back to transform: the tilt uses the `rotate` property and the ticker animates the `translate` property. Animating `transform` inside a rotated container made Chromium drop the raster for the whole scrolling layer (page rendered blank below the fold). `contain:paint` keeps the ticker confined to its own box. */ /* the tilted bar is deliberately wider than the page so the rotation never exposes a corner; the wrapper is what stops that extra width from becoming horizontal page overflow. */ .marquee-wrap{overflow:hidden} .marquee{ background:var(--grape);border-block:var(--line); overflow:hidden;padding:.7rem 0;position:relative;z-index:1; width:106%;margin:2rem 0 2rem -3%; rotate:-1.4deg; contain:paint;isolation:isolate; } .marquee-track{ display:flex;width:max-content; animation:slide 26s linear infinite; } .marquee:hover .marquee-track{animation-play-state:paused} .marquee span{ font-family:var(--f-disp);font-size:1.5rem;color:var(--yolk); padding-inline:1.1rem;white-space:nowrap;display:flex;align-items:center;gap:1.1rem; } .marquee span i{color:var(--bubble);font-style:normal} @keyframes slide{to{translate:-50% 0}} /* ---------- sections ---------- */ section{position:relative;padding:4.5rem 0} .sec-head{margin-bottom:2.6rem} /* wavy divider */ .wave{display:block;width:100%;height:auto;position:relative;z-index:1;margin-bottom:-2px} /* ---------- products ---------- */ #shop{background:var(--paper)} /* ★ hero product — Tone Up */ .hero-prod{ display:grid;grid-template-columns:.92fr 1.08fr;gap:0;align-items:stretch; background:var(--cream);border:var(--line);border-radius:var(--r-xl); box-shadow:var(--pop-lg);overflow:hidden;margin-bottom:3.2rem; } .hero-prod__media{ position:relative;display:grid;place-items:center;padding:2.4rem 1.5rem; background: radial-gradient(circle at 50% 46%, rgba(252,224,0,.55) 0 42%, transparent 43%), linear-gradient(150deg,var(--grape-pale),var(--bubble-pale)); border-right:var(--line);min-height:420px; } .hero-prod__ring{ position:absolute;width:min(360px,80%);aspect-ratio:1;border-radius:50%; border:4px dashed var(--grape-l);opacity:.55;animation:spinSlow 30s linear infinite; } .hero-prod__media img{ position:relative;z-index:1;width:auto;height:auto; max-height:min(400px,46vh);max-width:60%;object-fit:contain; filter:drop-shadow(0 22px 30px rgba(62,26,99,.34)); animation:floatY 5.4s ease-in-out infinite; } .hero-prod__badge{ position:absolute;top:1rem;left:1rem;z-index:2; background:var(--yolk);border:var(--line);border-radius:999px; font-family:var(--f-num);font-weight:700;font-size:.82rem;letter-spacing:.06em; padding:.28rem .9rem;box-shadow:0 4px 0 var(--grape-d);transform:rotate(-6deg); } .hero-prod__body{padding:2.4rem 2.2rem} .hero-prod__body h3{ font-family:var(--f-head);font-weight:700;line-height:1.1; font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--grape-d);margin:.7rem 0 .2rem; } .hero-prod__body h3 .en{font-family:var(--f-disp);font-weight:400;color:var(--grape)} .hero-prod__body .th{color:var(--ink-soft);font-size:.95rem;margin:0 0 .9rem} .hero-prod__body .lead{font-size:1.02rem;color:var(--ink);margin:0 0 1.3rem;max-width:48ch} .hero-prod__body .lead b{color:var(--grape)} .hero-prod__feats{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem} .hero-prod__feats li{ display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;align-items:center; background:var(--paper);border:2px solid var(--grape-d);border-radius:var(--r-s); padding:.6rem .8rem;font-size:.84rem;color:var(--ink-soft);line-height:1.35; } .hero-prod__feats li span{grid-row:span 2;font-size:1.4rem} .hero-prod__feats li b{font-family:var(--f-head);font-size:.94rem;color:var(--grape-d);align-self:end} .hero-prod__foot{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .price--xl{font-size:2.4rem} .sub-head{ text-align:center;margin:0 0 1.6rem;position:relative; font-family:var(--f-head);font-weight:700;font-size:1.15rem;color:var(--grape-d); } .sub-head::before{ content:"";position:absolute;left:0;right:0;top:50%;height:3px; background:repeating-linear-gradient(90deg,var(--grape-l) 0 10px,transparent 10px 20px); } .sub-head span{position:relative;background:var(--paper);padding-inline:1rem} .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem} .prod-grid--2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto} .card{ position:relative;background:var(--cream); border:var(--line);border-radius:var(--r-l); padding:1.4rem 1.3rem 1.5rem; box-shadow:var(--pop-lg); transition:transform .18s cubic-bezier(.34,1.5,.5,1),box-shadow .18s; transform-style:preserve-3d; } .card:hover{box-shadow:0 16px 0 var(--grape-d)} .card__media{ position:relative;border-radius:var(--r-m);overflow:hidden; background:linear-gradient(160deg,var(--grape-pale),var(--yolk-pale)); border:2px solid var(--grape-d); aspect-ratio:1;display:grid;place-items:center;margin-bottom:1rem; } /* NOTE: is a replaced element — `width:auto` resolves to the image's INTRINSIC size, so top/right/bottom/left insets alone never constrain it. The explicit 82% width+height is what makes object-fit:contain actually fit the tall packshots inside the square. */ .card__media img{ position:absolute;top:9%;left:9%; width:82%;height:82%;object-fit:contain; transition:transform .35s cubic-bezier(.34,1.5,.5,1); filter:drop-shadow(0 14px 18px rgba(62,26,99,.26)); } .card:hover .card__media img{transform:scale(1.09) rotate(-4deg)} .card__badge{ position:absolute;top:.7rem;left:.7rem;z-index:2; background:var(--yolk);border:2px solid var(--grape-d);border-radius:999px; font-family:var(--f-num);font-weight:700;font-size:.72rem;letter-spacing:.06em; padding:.2rem .7rem;box-shadow:0 3px 0 var(--grape-d);transform:rotate(-6deg); } .card__badge--pink{background:var(--bubble);color:#fff} .card__badge--mint{background:var(--mint)} .card__size{ position:absolute;bottom:.7rem;right:.7rem;z-index:2; background:var(--paper);border:2px solid var(--grape-d);border-radius:999px; font-family:var(--f-num);font-weight:600;font-size:.72rem;padding:.15rem .6rem; } .card h3{ font-family:var(--f-head);font-weight:700;font-size:1.24rem; margin:.2rem 0 .1rem;color:var(--grape-d);line-height:1.25; } .card .th{font-size:.9rem;color:var(--ink-soft);margin:0 0 .6rem} .card p.desc{font-size:.94rem;color:var(--ink-soft);margin:0 0 .9rem;min-height:3.2em} .card ul{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.35rem} .card ul li{ font-size:.78rem;background:var(--grape-pale);color:var(--grape-d); border:2px solid var(--grape-l);border-radius:999px;padding:.1rem .6rem; } .card__foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem;flex-wrap:wrap} .price{font-family:var(--f-num);font-weight:700;font-size:1.7rem;color:var(--grape);line-height:1} .price small{font-size:.86rem;font-weight:600;color:var(--ink-soft)} /* bundle band */ .bundle{ margin-top:2.4rem;background:var(--grape);border:var(--line);border-radius:var(--r-xl); box-shadow:var(--pop-lg);overflow:hidden; display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0; } .bundle__txt{ padding:2.2rem 2rem; display:flex;flex-direction:column;justify-content:center;align-items:flex-start; } .bundle__txt h3{font-family:var(--f-disp);font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--yolk);margin:.3rem 0 .5rem;line-height:1.1} .bundle__txt p{color:#EADDFA;margin:0 0 1.2rem;font-size:1rem} .bundle__txt .eyebrow{background:var(--bubble);color:#fff;border-color:#fff} /* the set poster is the brand's own square artwork — show it whole, never cropped. The column takes the image's natural height and the text column centres itself against it. */ .bundle__img{ position:relative;border-left:var(--line); background:#BFE6FA;display:flex;align-items:center; } .bundle__img img{display:block;width:100%;height:auto} .bundle-price{display:flex;align-items:baseline;gap:.6rem;margin-bottom:1.2rem;flex-wrap:wrap} .bundle-price b{font-family:var(--f-num);font-weight:700;font-size:2.4rem;color:#fff;line-height:1} .bundle-price span{color:var(--yolk);font-size:.95rem} /* ---------- benefits ---------- */ #why{background:var(--yolk-pale)} .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem} .why-card{ background:var(--paper);border:var(--line);border-radius:var(--r-m); padding:1.5rem 1.2rem;text-align:center;box-shadow:var(--pop); transition:transform .2s cubic-bezier(.34,1.6,.5,1); } .why-card:hover{transform:translateY(-7px) rotate(-1.6deg)} .why-ico{ width:64px;height:64px;margin:0 auto .8rem;border-radius:50%; display:grid;place-items:center;border:var(--line); } .why-card:nth-child(1) .why-ico{background:var(--sky)} .why-card:nth-child(2) .why-ico{background:var(--yolk)} .why-card:nth-child(3) .why-ico{background:var(--bubble)} .why-card:nth-child(4) .why-ico{background:var(--mint)} .why-card h4{font-family:var(--f-head);font-weight:700;font-size:1.05rem;margin:0 0 .3rem;color:var(--grape-d)} .why-card p{font-size:.9rem;color:var(--ink-soft);margin:0} /* ---------- video wall ---------- */ #vdo{background:var(--grape-d);color:#fff;overflow:hidden} #vdo .h-sec{color:#fff} #vdo .h-sec .en{color:var(--yolk)} #vdo .h-sec .hl{background:linear-gradient(180deg,transparent 58%,var(--bubble) 58%,var(--bubble) 92%,transparent 92%)} #vdo .sub{color:#D8C6EE} #vdo .eyebrow{background:var(--yolk);border-color:#fff;box-shadow:0 4px 0 #fff} .chips{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:1.4rem 0 2.2rem} .chip{ font-family:var(--f-head);font-weight:600;font-size:.92rem; background:transparent;color:#fff;border:2px solid rgba(255,255,255,.45); border-radius:999px;padding:.4rem 1.1rem;transition:all .2s; } .chip:hover{border-color:var(--yolk);color:var(--yolk)} .chip.on{background:var(--yolk);color:var(--grape-d);border-color:var(--yolk);box-shadow:0 4px 0 rgba(0,0,0,.25)} .vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} .vcard{ position:relative;border-radius:var(--r-m);overflow:hidden; border:3px solid #fff;background:#000;aspect-ratio:9/16; box-shadow:0 8px 0 rgba(0,0,0,.35); transition:transform .22s cubic-bezier(.34,1.5,.5,1),box-shadow .22s; cursor:pointer; } .vcard:hover{transform:translateY(-8px) rotate(-1.4deg);box-shadow:0 16px 0 rgba(0,0,0,.35)} .vcard img,.vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vcard video{opacity:0;transition:opacity .3s} .vcard.playing video{opacity:1} .vcard__veil{ position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(42,15,71,.9) 100%); display:flex;flex-direction:column;justify-content:flex-end;padding:.8rem; } .vcard__cap{font-size:.86rem;font-weight:600;color:#fff;line-height:1.35;text-shadow:0 2px 6px rgba(0,0,0,.5)} .vcard__meta{display:flex;align-items:center;gap:.4rem;margin-top:.3rem;font-family:var(--f-num);font-size:.72rem;color:var(--yolk)} .vcard__play{ position:absolute;top:50%;left:50%;translate:-50% -50%;z-index:3; width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92); display:grid;place-items:center;border:3px solid var(--grape-d); transition:transform .25s cubic-bezier(.34,1.7,.5,1),opacity .25s; } .vcard:hover .vcard__play{transform:translate(-50%,-50%) scale(1.16)} .vcard.playing .vcard__play{opacity:0} .vcard__tag{ position:absolute;top:.6rem;left:.6rem;z-index:3; background:var(--yolk);color:var(--grape-d);border:2px solid var(--grape-d); border-radius:999px;font-family:var(--f-num);font-weight:600;font-size:.66rem; padding:.1rem .55rem; } .vcard[hidden]{display:none} .vmore{display:grid;place-items:center;margin-top:2rem} /* ---------- review wall ---------- */ #review{background:var(--cream)} /* proper gallery grid — CSS `columns` fragmented the absolutely positioned tape into stray marks at the foot of each column */ .rwall{ display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 1.1rem; align-items:start; } .polaroid{ margin:0; background:var(--paper);border:var(--line);border-radius:var(--r-s); padding:.55rem .55rem 2.1rem;box-shadow:var(--pop); position:relative;cursor:zoom-in; transition:transform .25s cubic-bezier(.34,1.5,.5,1),box-shadow .25s,z-index 0s; } .polaroid:nth-child(3n){transform:rotate(1.6deg)} .polaroid:nth-child(3n+1){transform:rotate(-1.8deg)} .polaroid:nth-child(4n){transform:rotate(.9deg)} .polaroid:hover{transform:rotate(0) translateY(-8px) scale(1.03);box-shadow:var(--pop-lg);z-index:5} .polaroid img{ width:100%;height:auto;aspect-ratio:4/5;object-fit:cover; border-radius:8px;background:var(--grape-pale); } .polaroid[hidden]{display:none !important} .polaroid figcaption{ position:absolute;left:0;right:0;bottom:.45rem;text-align:center; font-size:.78rem;color:var(--grape);font-weight:600; } .polaroid .tape{ position:absolute;top:-11px;left:50%;translate:-50% 0; width:64px;height:22px;background:rgba(252,224,0,.75); border:2px solid rgba(62,26,99,.35);border-radius:3px;transform:rotate(-3deg); } /* ---------- quiz ---------- */ #quiz{background:var(--grape-pale)} .quiz-box{ max-width:760px;margin-inline:auto; background:var(--paper);border:var(--line);border-radius:var(--r-xl); box-shadow:var(--pop-lg);padding:2.2rem 2rem;position:relative;overflow:hidden; } .quiz-dots{display:flex;gap:.4rem;justify-content:center;margin-bottom:1.4rem} .quiz-dots i{width:34px;height:8px;border-radius:999px;background:var(--grape-pale);border:2px solid var(--grape-d)} .quiz-dots i.on{background:var(--yolk)} .q-step{display:none} .q-step.on{display:block;animation:popIn .4s cubic-bezier(.34,1.6,.5,1)} @keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}} .q-step h3{ font-family:var(--f-head);font-weight:700;font-size:clamp(1.2rem,3vw,1.6rem); text-align:center;margin:0 0 1.4rem;color:var(--grape-d); } .q-opts{display:grid;gap:.7rem} .q-opt{ display:flex;align-items:center;gap:.9rem;text-align:left;width:100%; background:var(--cream);border:var(--line);border-radius:var(--r-m); padding:.85rem 1.1rem;box-shadow:0 4px 0 var(--grape-d); font-family:var(--f-body);font-size:1rem;color:var(--ink); transition:transform .16s cubic-bezier(.34,1.6,.5,1),background .2s,box-shadow .16s; } .q-opt:hover{transform:translateX(6px) rotate(-.6deg);background:var(--yolk-pale);box-shadow:0 6px 0 var(--grape-d)} .q-opt .emo{font-size:1.5rem;line-height:1;flex:0 0 auto} .q-res{display:none;text-align:center} .q-res.on{display:block;animation:popIn .5s cubic-bezier(.34,1.6,.5,1)} .q-res img{ width:auto;height:190px;max-width:60%;object-fit:contain; margin:0 auto 1rem;filter:drop-shadow(0 14px 20px rgba(62,26,99,.28)); } .q-res h3{font-family:var(--f-head);font-weight:700;font-size:1.6rem;color:var(--grape-d);margin:.2rem 0 .3rem} .q-res p{color:var(--ink-soft);max-width:46ch;margin:0 auto 1.3rem} .q-res .tagline{ display:inline-block;background:var(--yolk);border:var(--line);border-radius:999px; padding:.25rem .9rem;font-family:var(--f-num);font-weight:600;font-size:.82rem; margin-bottom:.8rem;transform:rotate(-2deg); } /* ---------- gacha ---------- */ #gacha{background:var(--paper)} .gacha-wrap{ display:grid;grid-template-columns:auto 1fr;gap:2.4rem;align-items:center; max-width:900px;margin-inline:auto; background:var(--cream);border:var(--line);border-radius:var(--r-xl); box-shadow:var(--pop-lg);padding:2.2rem; } .machine{ width:190px;flex:0 0 auto;cursor:pointer; transition:transform .2s cubic-bezier(.34,1.7,.5,1); } .machine:hover{transform:scale(1.04) rotate(-2deg)} .machine.shake{animation:shakeM .55s cubic-bezier(.36,.07,.19,.97) 2} @keyframes shakeM{ 10%,90%{transform:translateX(-2px) rotate(-2deg)} 20%,80%{transform:translateX(4px) rotate(2deg)} 30%,50%,70%{transform:translateX(-7px) rotate(-3deg)} 40%,60%{transform:translateX(7px) rotate(3deg)} } .gacha-out h3{font-family:var(--f-head);font-weight:700;font-size:1.5rem;color:var(--grape-d);margin:0 0 .5rem} .gacha-msg{ background:var(--paper);border:3px dashed var(--grape-l);border-radius:var(--r-m); padding:1.2rem;min-height:132px;display:grid;place-content:center;gap:.4rem; text-align:center; } .gacha-msg .big{font-family:var(--f-head);font-weight:700;font-size:1.2rem;color:var(--grape)} .gacha-msg .small{font-size:.92rem;color:var(--ink-soft)} .gacha-msg .idle{color:var(--ink-soft);font-size:.95rem} /* ---------- buy ---------- */ #buy{background:var(--grape);color:#fff} #buy .h-sec{color:#fff} #buy .h-sec .en{color:var(--yolk)} #buy .sub{color:#E4D6F7} #buy .eyebrow{background:var(--yolk);border-color:#fff;box-shadow:0 4px 0 #fff} .shops{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem} .shop{ display:flex;align-items:center;gap:.9rem; background:var(--paper);border:var(--line);border-radius:var(--r-m); padding:1.05rem 1.15rem;box-shadow:var(--pop);color:var(--ink); transition:transform .18s cubic-bezier(.34,1.6,.5,1),box-shadow .18s; } .shop:hover{transform:translateY(-6px) rotate(-1.2deg);box-shadow:var(--pop-lg)} .shop__ico{ width:48px;height:48px;flex:0 0 auto;border-radius:14px;border:2px solid var(--grape-d); display:grid;place-items:center;font-size:1.4rem;background:var(--yolk-pale); } .shop b{display:block;font-family:var(--f-head);font-weight:700;font-size:1rem;color:var(--grape-d);line-height:1.2} .shop span{font-size:.85rem;color:var(--ink-soft)} .shop__arrow{margin-left:auto;font-family:var(--f-num);font-weight:700;color:var(--grape);transition:transform .2s} .shop:hover .shop__arrow{transform:translateX(4px)} /* ---------- footer ---------- */ footer{background:var(--grape-dd);color:#D9C8F0;padding:3rem 0 2rem;position:relative;z-index:1} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem;align-items:start} footer img.flogo{width:170px;margin-bottom:.8rem} footer h5{font-family:var(--f-head);font-weight:700;color:var(--yolk);margin:0 0 .6rem;font-size:1rem} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:.92rem} footer a:hover{color:var(--yolk)} .foot-bot{ border-top:2px dashed rgba(255,255,255,.2);margin-top:2rem;padding-top:1.2rem; display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem; } /* ---------- modal (video player) ---------- */ .modal{ position:fixed;inset:0;z-index:2000;display:none; background:rgba(42,15,71,.94);backdrop-filter:blur(8px); place-items:center;padding:1rem; } .modal.on{display:grid;animation:fadeIn .25s ease} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal__stage{position:relative;display:grid;place-items:center;width:100%;height:100%} .modal video{ max-height:84vh;max-width:min(440px,92vw);width:auto;border-radius:var(--r-m); border:4px solid #fff;box-shadow:0 20px 60px rgba(0,0,0,.6);background:#000; } .modal__cap{ margin-top:.9rem;color:#fff;font-weight:600;text-align:center;max-width:44ch; font-size:.98rem; } .modal__x,.modal__nav{ position:absolute;z-index:5;width:52px;height:52px;border-radius:50%; background:var(--yolk);border:3px solid var(--grape-d);color:var(--grape-d); display:grid;place-items:center;font-family:var(--f-num);font-weight:700;font-size:1.3rem; box-shadow:0 5px 0 var(--grape-d); transition:transform .16s cubic-bezier(.34,1.7,.5,1); } .modal__x:hover,.modal__nav:hover{transform:scale(1.12) rotate(-6deg)} .modal__x{top:1rem;right:1rem} .modal__nav.prev{left:1.2rem;top:50%;translate:0 -50%} .modal__nav.next{right:1.2rem;top:50%;translate:0 -50%} /* lightbox */ #lightbox img{ max-height:88vh;max-width:92vw;border-radius:var(--r-m); border:5px solid #fff;box-shadow:0 20px 60px rgba(0,0,0,.6); } /* ---------- back to top ---------- */ #totop{ position:fixed;right:1.1rem;bottom:1.1rem;z-index:1150; width:56px;height:56px;border-radius:50%; background:var(--yolk);border:var(--line);box-shadow:var(--pop); display:grid;place-items:center; opacity:0;visibility:hidden;transform:translateY(16px); transition:all .3s cubic-bezier(.34,1.6,.5,1); } #totop.on{opacity:1;visibility:visible;transform:none} #totop:hover{transform:translateY(-4px) rotate(-8deg)} /* ---------- confetti ---------- */ .confetti{ position:fixed;z-index:9997;pointer-events:none;border-radius:2px; will-change:transform,opacity; } /* ---------- reveal on scroll ---------- */ .rv{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.4,.5,1)} .rv.in{opacity:1;transform:none} .rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s} /* ---------- party mode easter egg ---------- */ body.party{animation:partyHue 4s linear infinite} @keyframes partyHue{to{filter:hue-rotate(360deg)}} .party-toast{ position:fixed;left:50%;bottom:2rem;translate:-50% 0;z-index:9990; background:var(--bubble);color:#fff;border:var(--line);border-radius:999px; padding:.7rem 1.4rem;box-shadow:var(--pop);font-family:var(--f-head);font-weight:700; animation:popIn .4s cubic-bezier(.34,1.7,.5,1); } /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1020px){ .prod-grid{grid-template-columns:repeat(2,1fr)} .why-grid{grid-template-columns:repeat(2,1fr)} .vgrid{grid-template-columns:repeat(3,1fr)} .rwall{grid-template-columns:repeat(3,1fr)} .shops{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:860px){ :root{--nav-h:64px} .nav-links{ position:fixed;top:var(--nav-h);left:0;right:0; flex-direction:column;align-items:stretch;gap:.2rem; background:var(--paper);border-bottom:var(--line); padding:1rem 1.2rem 1.4rem; transform:translateY(-130%);transition:transform .35s cubic-bezier(.34,1.4,.5,1); box-shadow:0 14px 30px rgba(62,26,99,.18); } .nav-links.open{transform:none} .nav-links a{padding:.7rem .9rem;font-size:1.05rem;border-bottom:2px dashed var(--grape-pale)} .nav-links a::after{display:none} /* the mobile drawer has its own light background — keep link text dark there even while the bar itself is inverted over a dark section */ #nav.on-dark .nav-links > a{color:var(--ink)} #nav.on-dark .nav-links > a:hover,#nav.on-dark .nav-links > a.on{color:var(--grape-d)} .nav-cta{margin:.6rem 0 0} .burger{display:grid} .hero-prod{grid-template-columns:1fr} .hero-prod__media{border-right:0;border-bottom:var(--line);min-height:340px} .hero-prod__body{padding:1.8rem 1.4rem} .prod-grid--2{max-width:none} .hero-grid{grid-template-columns:1fr;gap:1.5rem} .hero-stage{min-height:380px;order:-1} .hero-perks{justify-content:center} .hero-copy{text-align:center} .hero-p{margin-inline:auto} .hero-btns{justify-content:center} .hero-stats{justify-content:center} .bundle{grid-template-columns:1fr} .bundle__img{border-left:0;border-top:var(--line)} .gacha-wrap{grid-template-columns:1fr;justify-items:center;text-align:center;padding:1.8rem 1.3rem} .gacha-out{width:100%} } @media (max-width:640px){ section{padding:3.2rem 0} .prod-grid,.prod-grid--2{grid-template-columns:1fr;gap:1.3rem} .hero-prod__feats{grid-template-columns:1fr} .hero-prod__foot{justify-content:center} .price--xl{font-size:2rem} .why-grid{grid-template-columns:1fr 1fr;gap:.8rem} .vgrid{grid-template-columns:repeat(2,1fr);gap:.7rem} .rwall{grid-template-columns:repeat(2,1fr);gap:1rem .7rem} .shops{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr;gap:1.4rem} .quiz-box{padding:1.6rem 1.1rem} .marquee span{font-size:1.15rem} .modal__nav{width:44px;height:44px} .modal__nav.prev{left:.4rem}.modal__nav.next{right:.4rem} .stat b{font-size:1.5rem} .price-pill{right:2%;top:8%} } @media (max-width:400px){ .why-grid{grid-template-columns:1fr} } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } .rv{opacity:1;transform:none} .spark,.confetti{display:none} } /* ---------- print ---------- */ @media print{ #nav,#totop,#loader,#progress,.modal,.marquee{display:none !important} body{background:#fff} }