/* ============================================================================ mall-ui.css — the one standard every mall page follows. ---------------------------------------------------------------------------- Sapna's three rules, in one place so no page invents its own: 1. WEAR THE MALL the b41 tokens, verbatim. No page picks its own colours. 2. FIT THE SCREEN a page opens to the viewport and does NOT scroll on the desktop — unless the page itself is a flow of content that honestly needs to (a shop, a long record). That page opts in with
. 3. ALL SEVEN SIZES 360 · 390 · 768 · 1024 · 1280 · 1440 · 1920. Fluid type and grids carry the in-between; four breakpoints (400 · 640 · 820 · 1100) turn the corners. Desktop (>=1024) never scrolls a fixed screen; phones may, because thirty things do not fit a phone at once. A page includes this once, in : then builds with .screen / .wrap / .grid / .card / .panel / .btn / .chip. ========================================================================== */ :root{ --ink:#0C0910; --panel:#191322; --panel-2:#241C2E; --bone:#F4E9DC; --dim:#A79BA6; --heart:#FF5FA2; --glass:#34D8C0; --brass:#FFC24B; --line:rgba(244,233,220,.11); --line-2:rgba(244,233,220,.06); --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif; --body:"Instrument Sans","Helvetica Neue",Arial,sans-serif; --mono:"DM Mono",ui-monospace,"Courier New",monospace; --pad-x:clamp(14px,2.4vw,34px); --pad-y:clamp(14px,2.2vh,26px); --gap:clamp(8px,1vw,12px); --radius:14px; } *{box-sizing:border-box} html,body{height:100%;margin:0} body{ background:radial-gradient(130% 70% at 50% -10%,#1c1428,var(--ink) 60%); color:var(--bone);font-family:var(--body);line-height:1.5; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* --- the frame: one screen, no desktop scroll ---------------------------- */ .screen{ height:100dvh;display:flex;flex-direction:column; padding:var(--pad-y) var(--pad-x);overflow:hidden; } /* opt in to scrolling when the content is a genuine flow (shop, long record) */ .screen.flow{height:100dvh;overflow-y:auto;overflow-x:hidden} .screen.flow::-webkit-scrollbar{width:9px} .screen.flow::-webkit-scrollbar-thumb{background:var(--panel-2);border-radius:999px} /* a centred column for reading-width content pages (account, recovery) */ .wrap{width:100%;max-width:640px;margin:0 auto} .wrap.wide{max-width:920px} /* --- header row ---------------------------------------------------------- */ .head{display:flex;align-items:flex-end;gap:14px;flex:0 0 auto; margin-bottom:clamp(8px,1.6vh,16px)} .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--dim);margin:0 0 4px} h1,.h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.95; font-size:clamp(24px,3.4vw,40px);margin:0} h1 .accent,.h1 .accent{color:var(--heart)} h2,.h2{font-family:var(--display);font-weight:600;font-size:clamp(15px,1.7vw,19px); letter-spacing:-.01em;margin:clamp(14px,2vh,26px) 0 6px} .lead{color:var(--dim);font-size:13px;margin:0 0 12px} .spacer{margin-left:auto} /* --- the close / back control (top-right of a screen) -------------------- */ .close{flex:0 0 auto;width:38px;height:38px;border-radius:999px;border:1px solid var(--line); background:rgba(25,19,34,.7);color:var(--bone);text-decoration:none; display:grid;place-items:center;font-size:19px;line-height:1} .close:hover{border-color:var(--heart);color:var(--heart)} .back{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim); text-decoration:none;border:1px solid var(--line);border-radius:999px; padding:8px 14px;display:inline-block} .back:hover{color:var(--bone);border-color:var(--dim)} /* --- grid that fills the remaining height -------------------------------- */ .grid{flex:1 1 auto;display:grid;gap:var(--gap);min-height:0; grid-template-columns:repeat(auto-fill,minmax(clamp(150px,15vw,215px),1fr)); grid-auto-rows:minmax(0,1fr)} /* a grid inside a .flow page should size to content, not stretch */ .flow .grid{flex:0 0 auto;grid-auto-rows:auto} /* --- surfaces ------------------------------------------------------------ */ .card,.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)} .card{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden; border-left:3px solid var(--edge,var(--heart));border-radius:0 var(--radius) var(--radius) 0; padding:clamp(9px,1.3vh,14px) clamp(11px,1vw,15px); text-decoration:none;color:inherit;transition:background .15s,transform .15s} a.card:hover{background:var(--panel-2);transform:translateY(-2px)} .panel{padding:clamp(14px,2vh,20px) clamp(15px,1.6vw,22px)} /* --- small parts --------------------------------------------------------- */ .badge{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);background:var(--edge,var(--heart));border-radius:999px;padding:2px 8px} .chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--bone); border:1px solid var(--line);border-radius:999px;padding:6px 12px;white-space:nowrap} .chip b{color:var(--glass)} .nm{font-family:var(--display);font-weight:600;letter-spacing:-.01em; font-size:clamp(14px,1.5vw,18px);line-height:1.12} .muted{color:var(--dim)} /* --- buttons ------------------------------------------------------------- */ .btn{font-family:var(--mono);font-size:12px;letter-spacing:.05em;cursor:pointer; border:0;border-radius:999px;padding:12px 20px;background:var(--heart);color:#20040F; font-weight:600;text-decoration:none;display:inline-block;text-align:center} .btn:hover{filter:brightness(1.06)} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--bone);font-weight:400} .btn.ghost:hover{border-color:var(--heart);color:var(--heart)} /* --- fields -------------------------------------------------------------- */ .field{width:100%;background:#100C1C;border:1px solid var(--line);border-radius:11px; padding:13px 14px;color:var(--bone);font-family:var(--body);font-size:15px;outline:none} .field:focus{border-color:var(--heart)} label{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;color:var(--dim);margin:0 0 6px} /* --- notices ------------------------------------------------------------- */ .note{border-radius:0 11px 11px 0;padding:11px 14px;font-size:13.5px; background:rgba(25,19,34,.6);border:1px solid var(--line);border-left:3px solid var(--glass)} .note.warn{border-left-color:var(--brass)} .note.bad{border-left-color:var(--heart)} /* ============================================================================ THE SEVEN SIZES Fixed screens (>=1024) never scroll; the grid columns just re-count. ========================================================================== */ /* 1440 / 1920 — the default rules above already fill the width */ /* 1024–1279 (tablet landscape / small laptop) */ @media (max-width:1100px){ .grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} } /* 768–1023 (tablet portrait) */ @media (max-width:820px){ .grid{grid-template-columns:repeat(3,1fr)} .wrap{max-width:100%} } /* 390–767 (phones) — scrolling is honest here */ @media (max-width:640px){ .screen{height:auto;min-height:100dvh;overflow:visible} .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto} .card{min-height:116px} .head{position:sticky;top:0;z-index:5;padding-bottom:8px; background:linear-gradient(var(--ink),rgba(12,9,16,.86))} .counts,.spacer{width:100%} } /* 360 (small phone) */ @media (max-width:400px){ .grid{grid-template-columns:1fr} .card{min-height:0} h1,.h1{font-size:26px} }