/* ───────────────────────────────────────────────────────────────────────── * Dressup — design system (rigid). * * Palette: near-black warm base + hot pink accent + gold currency. That's it. * Buttons: ONE pattern. Skeuomorphic (light on top, dark bevel below), * no colored glow. * Selection ≠ CTA: tabs use underline, CTAs use pink fill. * Icons: Microsoft Fluent 3D Emoji (real illustrated icons). * ───────────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ /* Surfaces — warm near-black */ --bg:#15111a; /* body */ --surface:#221c2a; /* cards */ --surface-hi:#2d2636; /* hover */ --surface-sunk:#0f0b14; /* recessed */ --surface-line:rgba(255,255,255,0.06); /* Ink */ --text:#f6eff3; --text-dim:#a89aa8; --text-muted:#6d6170; --text-ink:#15111a; /* dark text on light bg */ /* Accent — one color, used only for CTAs and the equipped state */ --accent:#ff3b8d; --accent-hi:#cf1e6a; /* darker — used for bevel below buttons */ --accent-lo:#ff6ba9; /* lighter — used for gradient highlight */ /* Currency */ --gold:#ffc14f; /* Shadows — dark neutral, no color tint (avoid halo effect) */ --sh-xs:0 1px 2px rgba(0, 0, 0, 0.35); --sh-sm:0 2px 6px rgba(0, 0, 0, 0.35); --sh-md:0 6px 16px rgba(0, 0, 0, 0.40); --sh-lg:0 18px 36px rgba(0, 0, 0, 0.50); --sh-xl:0 28px 56px rgba(0, 0, 0, 0.55); /* Button bevel shadow values — reused by every button */ --bevel-light:inset 0 1px 0 rgba(255, 255, 255, 0.16); --bevel-dark:inset 0 -2px 0 rgba(0, 0, 0, 0.22); /* Type */ --fs-display:28px; --fs-h:17px; --fs-body:14px; --fs-cap:12px; --font-display:'Fraunces',Georgia,serif; --font-ui:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; /* Space */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:28px; --s-7:40px; /* Radii */ --r-sm:12px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px; /* Motion */ --ease:cubic-bezier(0.4, 0, 0.2, 1); --ease-soft:cubic-bezier(0.34, 1.1, 0.4, 1); --ease-bounce:cubic-bezier(0.34, 1.6, 0.64, 1); --t-fast:150ms; --t:250ms; --t-bounce:380ms; /* Layout */ --w:440px; --topbar:60px; --pad:20px; } /* Scale up tastefully on wider screens — still mobile-first column. */ @media (min-width: 640px) { :root{ --w:480px; --pad:24px; --fs-display:30px; } } @media (min-width: 900px) { :root{ --w:520px; --fs-display:34px; } } html,body{ background:var(--bg); color:var(--text); font-family:var(--font-ui); font-weight:500; -webkit-font-smoothing:antialiased; letter-spacing:-0.005em; /* Suppress iOS rubber-band on the whole document — inner scroll * containers manage their own overscroll. */ overscroll-behavior:none; } body{min-height:100vh;min-height:100dvh} /* Opt-in scroll lock: pages that manage their own full-height layout * (design, vote) add class="lock-scroll" to so the page itself * never scrolls — only inner containers (overflow-y:auto) can scroll. */ body.lock-scroll{ position:fixed;inset:0; overflow:hidden; overscroll-behavior:none; } /* Kill the grey tap flash iOS adds to any tappable element. */ *{-webkit-tap-highlight-color:transparent} .material-symbols-rounded{ font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; user-select:none;line-height:1; } button{ font-family:inherit;cursor:pointer;border:none;background:none;color:inherit; /* Kill the 300ms tap delay on iOS so :active fires immediately. */ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } /* Touch devices: reinforce the :active state with a brightness dip so the * press feedback is unmissable even when the transform animation is fast. */ @media (hover:none), (pointer:coarse){ button:active:not(:disabled), .btn:active:not(:disabled), .btn-icon:active, .topbar-back:active, .pick-btn:active, .cl-card:active, .cl-tab:active, .ap-stage-btn:active{ filter:brightness(0.88); } } /* ── Icons (Microsoft Fluent 3D Emoji) ────────────────────────────────── */ .ico{ display:inline-block;vertical-align:-0.22em;flex-shrink:0; width:1.2em;height:1.2em; background-size:contain;background-repeat:no-repeat;background-position:center; } .ico-coin {background-image:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Coin/3D/coin_3d.png')} .ico-gem {background-image:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Gem%20stone/3D/gem_stone_3d.png')} .ico-star {background-image:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Star/3D/star_3d.png')} .ico-trophy {background-image:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Trophy/3D/trophy_3d.png')} .ico-sparkle{background-image:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Sparkles/3D/sparkles_3d.png')} .ico-party {background-image:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Party%20popper/3D/party_popper_3d.png')} .ico-dress {background-image:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Dress/3D/dress_3d.png')} .ico-sm{width:1em;height:1em;vertical-align:-0.18em} .ico-lg{width:1.5em;height:1.5em;vertical-align:-0.32em} .ico-xl{width:2em;height:2em;vertical-align:-0.4em} /* Token icon (the game's single currency) — gem stone 3D, reads clearly * as premium-currency even at tiny sizes. */ .ico-token{ display:inline-block;vertical-align:-0.22em;flex-shrink:0; width:1.2em;height:1.2em; background:url('https://cdn.jsdelivr.net/gh/microsoft/fluentui-emoji@main/assets/Gem%20stone/3D/gem_stone_3d.png') center/contain no-repeat; } /* ── Page fade-in ─────────────────────────────────────────────────────── */ .page-fade{opacity:0;animation:page-in 280ms var(--ease) 50ms forwards} @keyframes page-in{ from{opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)} } /* ── Page nav transitions (fade in on load, fade out on navigate) ─────── */ /* Body starts hidden so there's never a flash of unstyled content before * page-nav.js runs. page-nav adds .pn-ready (reveal) and .pn-leaving * (fade out ahead of a navigate). */ body{ opacity:0; transition:opacity 220ms var(--ease); } html.pn-ready body{opacity:1} html.pn-leaving body{opacity:0} /* ── Type ────────────────────────────────────────────────────────────── */ .display{ font-family:var(--font-display); font-size:var(--fs-display);font-weight:600; line-height:1.1;letter-spacing:-0.02em; font-variation-settings:'SOFT' 80, 'WONK' 1; color:var(--text); } .display-lg{font-size:36px} .head{font-size:var(--fs-h);font-weight:700;line-height:1.3;letter-spacing:-0.01em} .body{font-size:var(--fs-body);font-weight:500;line-height:1.5} .cap{font-size:var(--fs-cap);font-weight:600;line-height:1.4} .dim{color:var(--text-dim)} .eyebrow{ font-size:11px;font-weight:800;color:var(--text-dim); text-transform:uppercase;letter-spacing:0.1em; } /* ── Layout ──────────────────────────────────────────────────────────── */ .page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} .wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 var(--pad)} .content{flex:1;padding-top:var(--s-2);padding-bottom:var(--s-7)} /* ── Top bar ─────────────────────────────────────────────────────────── */ .topbar{ height:var(--topbar); background:var(--bg); position:sticky;top:0;z-index:10; flex-shrink:0;display:flex;align-items:center; border-bottom:1px solid var(--surface-line); } .topbar > .wrap{display:flex;align-items:center;gap:var(--s-3)} .topbar-title{ flex:1;min-width:0; font-family:var(--font-display); font-size:18px;font-weight:600;letter-spacing:-0.015em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; color:var(--text); } /* ── Buttons — ONE system ────────────────────────────────────────────── */ /* * Every button has the same base shape + same bevel structure. * Only the background color changes between variants. */ .btn{ display:inline-flex;align-items:center;justify-content:center; gap:7px;height:46px;padding:0 22px; border-radius:var(--r-pill); font-family:var(--font-ui);font-size:14px;font-weight:800; letter-spacing:-0.005em;white-space:nowrap; color:var(--text); transition:transform var(--t-bounce) var(--ease-bounce), background var(--t-fast), box-shadow var(--t-fast); position:relative; } .btn:hover:not(:disabled){transform:translateY(-2px)} .btn:active:not(:disabled){transform:translateY(2px);transition-duration:90ms} .btn:disabled{opacity:0.45;cursor:default;filter:saturate(0.3)} .btn .material-symbols-rounded{font-size:18px} .btn-sm{height:38px;padding:0 16px;font-size:13px;gap:5px} .btn-sm .material-symbols-rounded{font-size:16px} .btn-block{width:100%;margin-bottom:3px} /* compensate for 3px bevel */ /* Primary (pink) — only for true CTAs */ .btn-primary{ color:#fff; background:var(--accent); box-shadow: var(--bevel-light), var(--bevel-dark), 0 3px 0 var(--accent-hi), var(--sh-md); } .btn-primary:hover:not(:disabled){background:var(--accent-lo);box-shadow:var(--bevel-light), var(--bevel-dark), 0 3px 0 var(--accent-hi), var(--sh-lg)} .btn-primary:active:not(:disabled){ transform:translateY(2px); box-shadow: var(--bevel-light), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 1px 0 var(--accent-hi), var(--sh-sm); } /* Ghost (neutral) — secondary actions, stage buttons, top bar */ .btn-ghost{ background:var(--surface); box-shadow: var(--bevel-light), var(--bevel-dark), 0 3px 0 rgba(0, 0, 0, 0.35), var(--sh-sm); } .btn-ghost:hover:not(:disabled){background:var(--surface-hi)} .btn-ghost:active:not(:disabled){ transform:translateY(2px); box-shadow: var(--bevel-light), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 1px 0 rgba(0, 0, 0, 0.35), var(--sh-xs); } /* Icon-only button (back, close, stage controls) — same system as ghost */ .btn-icon{ width:40px;height:40px;padding:0;border-radius:50%; background:var(--surface); color:var(--text); display:flex;align-items:center;justify-content:center; box-shadow: var(--bevel-light), var(--bevel-dark), 0 3px 0 rgba(0, 0, 0, 0.35), var(--sh-sm); transition:transform 80ms var(--ease), background var(--t-fast); } .btn-icon:hover{background:var(--surface-hi)} .btn-icon:active{ transform:translateY(2px); box-shadow:var(--bevel-light), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 1px 0 rgba(0, 0, 0, 0.35), var(--sh-xs); } .btn-icon .material-symbols-rounded{font-size:20px} /* Topbar back button — same as .btn-icon */ .topbar-back{ width:40px;height:40px;border-radius:50%; background:var(--surface);color:var(--text); display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:var(--bevel-light), var(--bevel-dark), 0 3px 0 rgba(0, 0, 0, 0.35), var(--sh-sm); transition:transform 80ms var(--ease), background var(--t-fast); } .topbar-back:hover{background:var(--surface-hi)} .topbar-back:active{transform:translateY(2px);box-shadow:var(--bevel-light), inset 0 -1px 0 rgba(0, 0, 0, 0.22), 0 1px 0 rgba(0, 0, 0, 0.35), var(--sh-xs)} .topbar-back .material-symbols-rounded{font-size:20px} /* ── Cards ───────────────────────────────────────────────────────────── */ .card{ background:var(--surface); border-radius:var(--r-md); padding:var(--s-4); box-shadow:var(--sh-sm); } .card-hero{ background:var(--surface); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-lg); } /* ── Currency chip ───────────────────────────────────────────────────── */ .coins{ display:inline-flex;align-items:center;gap:6px; height:40px;padding:0 14px 0 10px; background:var(--surface); color:var(--text); font-size:14px;font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-0.005em; border-radius:var(--r-pill); box-shadow:var(--bevel-light), var(--bevel-dark), 0 2px 0 rgba(0,0,0,0.35), var(--sh-sm); } .coins .ico{width:22px;height:22px;vertical-align:-0.28em} /* ── Forms ───────────────────────────────────────────────────────────── */ .input, .textarea, .select{ width:100%;background:var(--surface-sunk);color:var(--text); padding:12px 16px;border-radius:var(--r-md); font-family:var(--font-ui);font-size:var(--fs-body);font-weight:600; outline:none; box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4); transition:box-shadow var(--t-fast); border:none; } .input:focus, .textarea:focus, .select:focus{ box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 59, 141, 0.28); } .input::placeholder,.textarea::placeholder{color:var(--text-muted)} .textarea{min-height:92px;resize:vertical;line-height:1.5} .field-label{ display:block;font-size:var(--fs-cap);font-weight:800;color:var(--text-dim); margin-bottom:var(--s-2);letter-spacing:0.04em; } .field-stack{display:flex;flex-direction:column;gap:var(--s-4)} .field-row{display:flex;gap:var(--s-3)} .field-row > *{flex:1} /* ── Pills ───────────────────────────────────────────────────────────── */ .pill{ display:inline-flex;align-items:center;gap:4px; height:24px;padding:0 10px; font-size:10px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase; border-radius:var(--r-pill); background:var(--surface);color:var(--text-dim); box-shadow:var(--bevel-light); } .pill-accent{ background:var(--accent);color:#fff; box-shadow:var(--bevel-light), 0 1px 2px rgba(0,0,0,0.3); } .pill-gold{ background:var(--gold);color:var(--text-ink); box-shadow:var(--bevel-light), 0 1px 2px rgba(0,0,0,0.3); } /* Light pill — for hero overlays where we need readability on images */ .pill-light{ background:rgba(255,255,255,0.96); color:var(--text-ink); box-shadow:0 2px 6px rgba(0,0,0,0.25); } /* ── Modal ───────────────────────────────────────────────────────────── */ .modal-bg{ position:fixed;inset:0;z-index:100; background:rgba(0, 0, 0, 0.65); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); display:none;align-items:flex-end;justify-content:center; } .modal-bg.open{display:flex;animation:fade 240ms var(--ease)} @keyframes fade{from{opacity:0}to{opacity:1}} .modal{ width:100%;max-width:var(--w);max-height:85vh; background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0; display:flex;flex-direction:column;overflow:hidden; animation:rise 420ms var(--ease-bounce); box-shadow:var(--sh-xl); } @media (min-width:480px){ .modal-bg{align-items:center;padding:20px} .modal{border-radius:var(--r-xl)} } @keyframes rise{ 0%{transform:translateY(40px);opacity:0} 60%{opacity:1} 100%{transform:translateY(0);opacity:1} } .modal-head{ padding:var(--s-5) var(--s-5) var(--s-3); display:flex;align-items:center;justify-content:space-between; flex-shrink:0; } .modal-body{padding:0 var(--s-5) var(--s-4);overflow-y:auto;flex:1} .modal-foot{padding:var(--s-4) var(--s-5) var(--s-5);display:flex;gap:var(--s-3);flex-shrink:0} /* ── Toast ───────────────────────────────────────────────────────────── */ .toast{ position:fixed;bottom:28px;left:50%;z-index:200; transform:translateX(-50%) translateY(20px) scale(0.9); height:44px;padding:0 20px; background:var(--surface-hi);color:var(--text); border-radius:var(--r-pill); font-size:var(--fs-body);font-weight:700; display:flex;align-items:center;gap:6px; opacity:0;pointer-events:none; box-shadow:var(--sh-lg); transition:opacity 180ms, transform 360ms var(--ease-bounce); } .toast.open{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} /* ── Spinner ─────────────────────────────────────────────────────────── */ .spinner{ width:20px;height:20px;border:2.5px solid rgba(255, 255, 255, 0.12); border-top-color:var(--accent);border-radius:50%; animation:spin 0.7s linear infinite; } .spinner-lg{width:40px;height:40px;border-width:3px} @keyframes spin{to{transform:rotate(360deg)}} /* ── Empty ───────────────────────────────────────────────────────────── */ .empty{text-align:center;padding:48px 20px;color:var(--text-dim)} .empty .ico-xl{margin-bottom:var(--s-3)} .empty-title{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--text);margin-bottom:var(--s-1)} .empty-body{font-size:var(--fs-body);max-width:260px;margin:0 auto;line-height:1.5}