widens to match. `align-items:start` matters: without it every card in a row would stretch to the height of the tallest, and an open mini-chart would inflate its whole row. */ @media (min-width:640px){ } @media (min-width:1024px){ } @media (min-width:1500px){ } /* The "NOW" divider is a full-width rule in a single column; inside a grid cell that reads as a broken line, so above 640px it becomes a compact badge. */ @media (min-width:640px){ } /* Wide screens have room: let the rails breathe instead of scrolling. */ @media (min-width:1024px){ .kc-rail{flex-wrap:wrap!important;overflow-x:visible!important} } /* ══ TOP BLOCK ON LARGE SCREENS ══════════════════════════════════════════════ The hero is a tall banner; on a wide screen it wasted most of the first fold and pushed the messages below it. Above 1024px the hero + status pills move into a narrow LEFT column and the admin's messages take a wider RIGHT column, so the fold carries content instead of empty violet. Below 1024px .kc-top and its two children are plain block divs — the stacked mobile order is untouched. */ @media (min-width:1024px){ /* the hero no longer needs banner height when it is a column */ /* messages get room to breathe rather than being squeezed under the banner */ } @media (min-width:1500px){ } /* ══ NOTCH / DYNAMIC ISLAND ══════════════════════════════════════════════════ Installed as a PWA there is no browser chrome, so the page starts underneath the notch and it was covering the top bar. The BACKGROUND still bleeds all the way up (the page stays edge-to-edge, which is the look we want) — only the fixed top controls and the content start are pushed below the safe area. env() is 0 in a normal browser tab, so nothing moves outside standalone. */ .kc-fixtop{top:calc(10px + env(safe-area-inset-top,0px))!important} #kcLiveFloater{top:calc(78px + env(safe-area-inset-top,0px))!important} #kcInstallCard{top:calc(150px + env(safe-area-inset-top,0px))!important} /* first-visit language chooser */ @media (min-width:640px){.kc-askgrid{grid-template-columns:1fr 1fr 1fr}.kc-askbox{max-width:560px}} /* ══ SPLASH ══════════════════════════════════════════════════════════════════ The wordmark was gold-on-transparent over a weak scrim: fine on the dark theme, nearly invisible on the light one. Now the scrim is much stronger and THEME-AWARE, and each theme gets its own vibrant wordmark + its own glitter colour. Dark = gold sparks on deep violet-black; light = magenta/violet sparks on a warm cream veil. */ [data-light="1"] .kc-splashbg,body[data-bs-theme="light"] .kc-splashbg{ background: radial-gradient(620px 380px at 50% 44%, rgba(255,252,244,.96), rgba(255,250,238,.80) 45%, rgba(255,248,232,.38) 68%, transparent 82%), radial-gradient(900px 600px at 50% 44%, rgba(255,190,120,.34), transparent 70%);} [data-light="1"] .kc-splashword,body[data-bs-theme="light"] .kc-splashword{ /* magenta -> violet -> orange: vivid, and dark enough to read on cream */ background-image:linear-gradient(100deg,#B3138A 0%,#E0219E 20%,#7A2BE0 42%,#E0219E 62%,#C2410C 82%,#B3138A 100%); filter:drop-shadow(0 2px 12px rgba(179,19,138,.30));} [data-light="1"] .kc-splashsub,body[data-bs-theme="light"] .kc-splashsub{ color:#7A2BE0;text-shadow:0 1px 8px rgba(255,255,255,.9);} /* ── glitter: four-point STARS hugging the wordmark ──────────────────────── Previously these were glowing dots sprayed over the whole viewport, which read as noise. Now the field is a box centred on the text, sparkles are clipped to a classic 4-point sparkle shape, and the radius is biased outward from the letters so the text looks like the source of the shine. */ [data-light="1"] .kc-glitter i,body[data-bs-theme="light"] .kc-glitter i{ background:linear-gradient(135deg,#FFFFFF,#E0219E 50%,#7A2BE0); filter:drop-shadow(0 0 5px rgba(224,33,158,.75))} @keyframes kcSpark{ 0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(var(--r,0deg))} 30%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(calc(var(--r,0deg) + 25deg))} 55%{opacity:.7;transform:translate(-50%,-50%) scale(.72) rotate(calc(var(--r,0deg) + 55deg))} } @media(prefers-reduced-motion:reduce){.kc-glitter{display:none}}