:root{ --paper:#f7f7f5; --paper-2:#eeeeeb; --white:#ffffff; --black:#1a1a1a; --ink-soft:#6b6a66; --neon:#c8e64a; --neon-dark:#a9c93a; --line:rgba(17,17,17,0.10); --shadow-sm:0 2px 8px rgba(17,17,17,0.06); --shadow-md:0 10px 28px rgba(17,17,17,0.10); } /* ---- Girls store theme ------------------------------------------------- Toggled by adding/removing the "theme-girls" class on — see applyGenderTheme() in script.js. Because almost every color in this file is written as var(--paper)/var(--neon)/etc rather than a hardcoled hex, overriding just these variables re-skins the ENTIRE site (nav, buttons, cards, chips, badges…) to light pink automatically, without needing to touch every individual rule. --black/--ink-soft are left alone on purpose so body text stays high-contrast and readable against the new pink backgrounds. ---- */ body.theme-girls{ --paper:#fdf1f6; --paper-2:#fbe0ec; --white:#fffbfd; --neon:#f7a8c8; --neon-dark:#ee82ae; --line:rgba(190,60,110,0.14); } /* A soft cross-fade instead of an instant color snap when the theme switches — kept to a short, cheap list of containers rather than a blanket "*" selector so it doesn't fight existing hover/active transitions elsewhere. */ body, nav, .hero, .sec-paper, .sec-black, footer, .product-card, .feature-card, .why-item, .label-panel, .about-photo, .tab, .btn-neon, .btn-black, .kicker, .eyebrow-mono{ transition: background-color .35s ease, color .35s ease, border-color .35s ease; } *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;} button, a, .btn, .icon-btn, .tab, .size-chip, input, select{-webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;} button:focus, a:focus{outline:none;} html{scroll-behavior:smooth; max-width:100%; overflow-x:hidden;} body{background:var(--paper); color:var(--black); font-family:'Inter',sans-serif; line-height:1.5; overflow-x:hidden; max-width:100%; width:100%;} .display{font-family:'Poppins',sans-serif; font-weight:700; text-transform:none; letter-spacing:-0.01em;} .mono{font-family:'Inter',sans-serif;} :focus-visible{outline:3px solid var(--black); outline-offset:2px;} .wrap{max-width:1220px; margin:0 auto; padding:0 32px;} h2.display{font-size:clamp(1.9rem,3.6vw,2.8rem); line-height:1.1; margin-bottom:12px;} p{color:var(--ink-soft);} a{color:inherit;} button{font-family:inherit;} .btn{font-weight:600; font-size:0.85rem; letter-spacing:0.01em; padding:14px 26px; border-radius:10px; border:1px solid var(--black); cursor:pointer; transition:background .15s, color .15s, transform .1s, box-shadow .15s; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap;} .btn:active{transform:scale(0.97);} .btn-neon{background:var(--neon); color:var(--black); border-color:var(--neon);} .btn-neon:hover{background:var(--neon-dark); border-color:var(--neon-dark);} .btn-black{background:var(--black); color:var(--white); border-color:var(--black);} .btn-black:hover{background:#2e2e2e;} .btn-outline{background:transparent; color:var(--black); border-color:var(--black);} .btn-outline:hover{background:var(--black); color:var(--white);} .btn-sm{padding:10px 16px; font-size:0.76rem;} .btn-full{width:100%;} .btn:disabled{opacity:0.4; cursor:not-allowed;} @media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important; scroll-behavior:auto !important;} } .reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease;} .reveal.in-view{opacity:1; transform:translateY(0);} nav{position:sticky; top:0; z-index:60; background:var(--white); border-bottom:1px solid var(--line);} nav .navbar{display:flex; align-items:center; justify-content:space-between; height:76px; gap:18px;} .wordmark{font-family:'Poppins',sans-serif; font-weight:700; font-size:1.3rem; color:var(--black); text-decoration:none; flex-shrink:0; letter-spacing:-0.01em;} .footer-wordmark{color:var(--black); margin-bottom:14px;} .hero-lang-center{font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(2.2rem,6vw,3.6rem); color:var(--black); text-align:center; line-height:1.05; transition:opacity .3s ease; margin-bottom:22px;} .hero-lang-center.lang-flip{animation:lang-flip .5s ease;} .nav-links{display:flex; gap:28px;} .nav-links a{position:relative; font-family:'Inter',sans-serif; font-size:0.86rem; font-weight:500; color:var(--black); text-decoration:none; opacity:0.75; transition:opacity .15s; padding-bottom:3px;} .nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--black); transition:width .2s ease;} .nav-links a:hover{opacity:1;} .nav-links a:hover::after{width:100%;} .nav-actions{display:flex; align-items:center; gap:4px;} /* ---- Boys / Girls store toggle ------------------------------------ Moved OUT of the top nav (it crowded the login button) and into the hero — the empty space above the big "TEENSTORE" wordmark is exactly where it sits now (.gender-toggle-hero below). A slim copy also lives in the mobile drawer as a secondary way to switch without scrolling back to the top. Two buttons inside one rounded track; whichever is active gets the dark "selected" treatment. Calls setGender('boys'| 'girls') in script.js on tap — that function handles persistence, the loading overlay, the theme swap and re-filtering the grid. ---- */ .gender-toggle{ display:inline-flex; align-items:center; background:var(--paper-2); border:1px solid var(--line); border-radius:30px; padding:3px; gap:2px; flex-shrink:0; } .gender-toggle .gender-opt{ font-family:'Inter',sans-serif; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:7px 14px; border-radius:26px; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; transition:background .2s ease, color .2s ease; white-space:nowrap; } .gender-toggle .gender-opt.active{ background:var(--black); color:var(--neon); } .gender-toggle.gender-toggle-sm .gender-opt{ padding:6px 12px; font-size:0.66rem; } /* Standalone version used in the mobile drawer, full width, larger tap targets */ .gender-toggle.gender-toggle-drawer{ width:100%; padding:4px; margin-bottom:4px; } .gender-toggle.gender-toggle-drawer .gender-opt{ flex:1; padding:12px 10px; font-size:0.74rem; } /* The hero placement — bigger, centered, sits right where the empty gap above the TEENSTORE wordmark used to be. Fades/scales in with the rest of the hero art (shares the .reveal-safe entrance below). */ .gender-toggle-hero{ padding:8px; margin-bottom:52px; box-shadow:var(--shadow-md); animation:gender-hero-in .5s ease backwards; animation-delay:.1s; } .gender-toggle-hero .gender-opt{ padding:22px 58px; font-size:1.4rem; font-weight:800; border-radius:30px; } @keyframes gender-hero-in{ from{opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} } .icon-btn{position:relative; background:none; border:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; cursor:pointer; color:var(--black); transition:background .15s;} .icon-btn:hover{background:var(--paper-2);} .icon-btn svg{width:19px; height:19px;} .badge{position:absolute; top:0; right:0; background:var(--black); color:var(--neon); font-family:'Inter',sans-serif; font-size:0.6rem; font-weight:700; min-width:15px; height:15px; border-radius:50%; display:flex; align-items:center; justify-content:center; padding:0 3px;} .badge.hidden{display:none;} .search-wrap{position:relative; display:flex; align-items:center;} .search-input{width:0; opacity:0; padding:0; border:1px solid var(--black); background:var(--white); color:var(--black); border-radius:8px; font-family:'Inter',sans-serif; font-size:0.82rem; transition:width .25s ease, opacity .2s ease, padding .25s; position:absolute; right:40px; height:34px;} .search-input.open{width:190px; opacity:1; padding:0 12px;} .hamburger{display:none; background:none; border:none; width:36px; height:36px; position:relative; cursor:pointer;} .hamburger span{position:absolute; left:9px; right:9px; height:2px; background:var(--black); transition:transform .25s, opacity .2s;} .hamburger span:nth-child(1){top:13px;} .hamburger span:nth-child(2){top:18px;} .hamburger span:nth-child(3){top:23px;} .hamburger.active span:nth-child(1){transform:translateY(5px) rotate(45deg);} .hamburger.active span:nth-child(2){opacity:0;} .hamburger.active span:nth-child(3){transform:translateY(-5px) rotate(-45deg);} .mobile-drawer{position:fixed; top:0; right:0; height:100%; width:min(80vw,320px); background:var(--white); z-index:90; box-shadow:-10px 0 30px rgba(0,0,0,0.12); transform:translateX(100%); transition:transform .3s ease; padding:88px 30px 30px; display:flex; flex-direction:column; gap:26px; overflow-y:auto; border-left:1px solid var(--line);} .mobile-drawer.open{transform:translateX(0);} .mobile-drawer a{font-family:'Poppins',sans-serif; font-weight:600; font-size:1.25rem; color:var(--black); text-decoration:none;} .mobile-drawer button{background:none; border:none; font-family:'Poppins',sans-serif; font-weight:600; font-size:1.25rem; color:var(--black); text-decoration:none; text-align:left; cursor:pointer; padding:0; display:flex; align-items:center; gap:12px;} .scrim{position:fixed; inset:0; background:rgba(17,17,17,0.5); z-index:80; opacity:0; pointer-events:none; transition:opacity .25s;} .scrim.open{opacity:1; pointer-events:auto;} .user-avatar, .user-avatar-sm{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--neon); color:var(--black); font-family:'Inter',sans-serif; font-weight:700; text-transform:uppercase; border:1px solid var(--black); vertical-align:middle; } .user-avatar{width:26px; height:26px; font-size:0.72rem; margin-right:2px;} .user-avatar-sm{width:34px; height:34px; font-size:0.85rem; border-color:var(--black);} img.user-avatar, img.user-avatar-sm{background:var(--paper-2);} .nav-avatar-label{vertical-align:middle;} .drawer-account-info{display:flex; align-items:center; gap:12px; padding-bottom:20px; margin-bottom:-4px; border-bottom:1px solid var(--line);} .drawer-account-text{display:flex; flex-direction:column; gap:2px; min-width:0;} .drawer-account-name{font-family:'Poppins',sans-serif; font-weight:600; font-size:0.95rem; color:var(--black); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .drawer-account-email{font-family:'Inter',sans-serif; font-size:0.72rem; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .hero{background:var(--paper); position:relative; overflow:hidden; border-bottom:1px solid var(--line);} .hero::before{content:''; position:absolute; top:-20%; right:-10%; width:52%; padding-bottom:52%; background:radial-gradient(circle, rgba(200,230,74,0.35) 0%, transparent 70%); border-radius:50%; filter:blur(10px); animation:hero-drift 9s ease-in-out infinite; pointer-events:none; will-change:transform; transform:translateZ(0);} body.theme-girls .hero::before{ background:radial-gradient(circle, rgba(247,168,200,0.45) 0%, transparent 70%); } @keyframes hero-drift{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-18px,24px) scale(1.06);} } .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:30px; padding:70px 0 76px;} .eyebrow-mono{font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; background:var(--black); color:var(--neon); display:inline-block; padding:6px 12px; border-radius:20px; margin-bottom:22px;} .hero h1{font-family:'Poppins',sans-serif; font-weight:700; font-size:clamp(2.6rem,6.4vw,4.6rem); line-height:1.03; letter-spacing:-0.01em;} .hero-sub{font-size:1.05rem; max-width:440px; margin:24px 0 32px; color:var(--ink-soft);} .hero-cta-row{display:flex; gap:14px; flex-wrap:wrap;} .hero-art{position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:400px;} .hero-media{position:relative; width:100%; max-width:400px; height:380px; border-radius:14px; overflow:hidden;} .hero-media img{width:100%; height:100%; object-fit:contain; padding:10px;} .hero-media-sm{max-width:220px; height:200px;} .sticker{position:absolute; font-family:'Poppins',sans-serif; font-weight:600; background:var(--neon); color:var(--black); border:1px solid var(--black); border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center; box-shadow:var(--shadow-md); z-index:3;} #plainLangText{display:inline-block;} @keyframes lang-flip{ 0%{transform:rotateX(0deg); opacity:1;} 45%{transform:rotateX(90deg); opacity:0;} 55%{transform:rotateX(-90deg); opacity:0;} 100%{transform:rotateX(0deg); opacity:1;} } .sticker.s2{width:74px; height:74px; font-size:0.62rem; bottom:2%; left:-2%; background:var(--white); animation:float-2 4.2s ease-in-out infinite;} @keyframes float-2{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} } @keyframes cd-flip{ 0%{transform:translateY(-4px); opacity:0.4;} 100%{transform:translateY(0); opacity:1;} } .img-fallback{display:none; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center; gap:8px; background:var(--paper-2); border:1px dashed var(--line); border-radius:10px; color:var(--ink-soft); text-align:center; padding:10px;} .img-fallback svg{width:26px; height:26px; opacity:0.5;} .img-fallback span{font-family:'Inter',sans-serif; font-size:0.64rem; letter-spacing:0.02em; opacity:0.7; word-break:break-all;} .no-img .img-fallback{display:flex;} .hero-media .img-fallback svg{width:34px; height:34px;} .hero-media .img-fallback span{font-size:0.7rem;} section{padding:84px 0;} .sec-paper{background:var(--paper);} .sec-black{background:var(--paper); color:var(--black); border-bottom:1px solid var(--line);} .sec-black p{color:var(--ink-soft);} .section-head{max-width:600px; margin-bottom:36px;} .kicker{font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--black); background:var(--neon); display:inline-block; padding:5px 12px; border-radius:20px; margin-bottom:14px;} .sec-black .kicker{color:var(--black);} .toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; border-bottom:1px solid var(--line); padding-bottom:18px;} .tab-row{display:flex; gap:10px; flex-wrap:wrap;} .tab{font-family:'Inter',sans-serif; font-size:0.8rem; font-weight:600; background:var(--white); border:1px solid var(--line); border-radius:20px; cursor:pointer; color:var(--black); padding:8px 16px; transition:background .15s,color .15s,border-color .15s;} .tab.active{background:var(--black); color:var(--neon); border-color:var(--black);} .sort-select{font-family:'Inter',sans-serif; font-size:0.78rem; font-weight:500; padding:9px 12px; border-radius:8px; border:1px solid var(--line); background:var(--white); color:var(--black); cursor:pointer;} .result-count{font-family:'Inter',sans-serif; font-size:0.78rem; color:var(--ink-soft);} /* ---- Media carousel: renders every image a product has, not just the first ---- */ .media-wrap{position:absolute; inset:0; overflow:hidden;} .media-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .25s ease, transform .3s ease; display:block; pointer-events:none;} .media-img.active{pointer-events:auto;} .media-img.active{opacity:1;} .hero-media .media-img{object-fit:contain; padding:10px;} /* NOTE: the single source of truth for grid-thumbnail image sizing/fit is the .product-media / .product-media img rule in index.html's inline