/* =========================================================================== لورین — Shared shop styles: search overlay (macOS-style), header badges, footer icons, toast. Included on every page after the page stylesheet. =========================================================================== */ /* NOTE: do NOT add `overflow-x: clip/hidden` to html or body as an anti-overflow safety net — it propagates to the viewport and kills vertical scrolling. Overflow must be prevented at the source instead (see the header rules below). */ /* Keep the auth pill compact on narrow phones so the header never overflows (an overflowing header widens the whole document and, in RTL, leaves a blank strip down the left edge of every page). */ @media (max-width: 430px) { header .max-w-content, header .max-w-content-p { padding-inline: 14px !important; } /* the wordmark is the widest header item; trim it so the row fits */ .brand { font-size: 1.1rem !important; letter-spacing: .07em !important; } .js-auth-link { padding-inline: 8px; font-size: 12px; } } @media (pointer: coarse) and (max-width: 430px) { header .icon-btn:not(.hidden) { min-width: 40px; min-height: 40px; } } /* Extra-narrow phones (≤360px): tighten further. 36px taps are below the 44px ideal, but on a 320-360px screen that is the honest trade for keeping the cart, search and sign-in all reachable without a sideways-shifted page. */ @media (max-width: 375px) { header .max-w-content, header .max-w-content-p { padding-inline: 10px !important; } .brand { font-size: 1rem !important; letter-spacing: .04em !important; } .js-auth-link { padding-inline: 7px; font-size: 11px; } } @media (pointer: coarse) and (max-width: 375px) { header .icon-btn:not(.hidden) { min-width: 36px; min-height: 36px; } } /* Foldable cover screens (~280-320px). Everything in the header row shrinks one more step so the sign-in pill still fits beside the cart and search. */ @media (max-width: 320px) { header .max-w-content, header .max-w-content-p { padding-inline: 6px !important; gap: 8px !important; } .brand { font-size: .92rem !important; letter-spacing: .02em !important; } .js-auth-link { padding-inline: 5px; font-size: 10.5px; } header .icon-btn svg { width: 18px; height: 18px; } } @media (pointer: coarse) and (max-width: 320px) { header .icon-btn:not(.hidden) { min-width: 32px; min-height: 32px; } } /* --- macOS-style motion (site-wide) ---------------------------------------- Every element that already animates (hover, accordion, menu, overlay, …) inherits the same smooth Apple-like bezier curve. */ :root { --ease-mac: cubic-bezier(.32, .72, 0, 1); } /* !important so it also wins over `transition: x .2s ease` shorthands */ *, *::before, *::after { transition-timing-function: var(--ease-mac) !important; animation-timing-function: var(--ease-mac); } /* Gentle page enter. Fade only — a transform on would make it the containing block for the sticky header and the fixed buy-bar/overlay while the animation runs, nudging them out of place. */ @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } body { animation: pageIn .45s var(--ease-mac) both; } @media (prefers-reduced-motion: reduce) { body { animation: none; } } /* --- header count badges -------------------------------------------------- */ .icon-badge { position: relative; } .icon-badge .count { position: absolute; top: -4px; inset-inline-start: -4px; min-width: 16px; height: 16px; padding-inline: 4px; background: #111; color: #fff; font-size: 10px; line-height: 16px; text-align: center; border-radius: 999px; font-feature-settings: "tnum"; } /* --- macOS-spotlight search overlay --------------------------------------- */ #searchOverlay { position: fixed; inset: 0; z-index: 70; pointer-events: none; } #searchOverlay .search-backdrop { position: absolute; inset: 0; background: rgba(17, 17, 17, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .32s ease; } #searchOverlay .search-panel { position: absolute; inset-inline: 0; top: 14vh; margin-inline: auto; width: min(620px, calc(100vw - 32px)); opacity: 0; transform: translateY(-14px) scale(.92); transition: opacity .32s cubic-bezier(.32,.72,0,1), transform .32s cubic-bezier(.32,.72,0,1); } #searchOverlay.is-open { pointer-events: auto; } #searchOverlay.is-open .search-backdrop { opacity: 1; } #searchOverlay.is-open .search-panel { opacity: 1; transform: translateY(0) scale(1); } .search-pill { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, .06); border-radius: 999px; /* the oval */ padding: 14px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .18); } .search-pill input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; font: inherit; font-size: 15px; color: #111; } .search-pill input::placeholder { color: #9b9b9b; } .search-results { margin-top: 10px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(0, 0, 0, .06); border-radius: 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .16); overflow: hidden; max-height: 0; opacity: 0; transition: max-height .35s cubic-bezier(.32,.72,0,1), opacity .25s ease; } .search-results.has-items { max-height: 420px; opacity: 1; overflow-y: auto; } .search-hit { display: flex; align-items: center; gap: 14px; padding: 10px 18px; transition: background .15s ease; } .search-hit:hover { background: rgba(0, 0, 0, .045); } .search-hit img { width: 44px; height: 56px; object-fit: cover; border-radius: 10px; } /* --- footer --------------------------------------------------------------- */ .foot-ic { width: 38px; height: 38px; display: grid; place-items: center; background: #fff; border: 1px solid #e7e6e3; border-radius: 999px; transition: opacity .2s ease; } .foot-ic:hover { opacity: .6; } .enamad { display: inline-block; margin-inline-start: 6px; padding: 6px 12px; border: 1px dashed #c9c7c3; border-radius: 8px; font-size: 9px; line-height: 1.5; text-align: center; color: #9b9b9b; } /* --- shared toast ---------------------------------------------------------- */ .lur-toast { position: fixed; inset-inline: 0; bottom: 90px; margin-inline: auto; width: max-content; max-width: 90vw; background: #111; color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 14px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s ease, transform .3s ease; z-index: 80; } .lur-toast.is-show { opacity: 1; transform: translateY(0); } @media (pointer: coarse) { .foot-ic { min-width: 44px; min-height: 44px; } } /* --- forms (sign-in + admin) ------------------------------------------------ */ .field-label { display: block; font-size: 14px; margin-bottom: 8px; } .login-input, .adm-in { width: 100%; border: 1px solid #e7e6e3; border-radius: 14px; padding: 13px 16px; font: inherit; background: #fff; color: #111; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .login-input:focus, .adm-in:focus { border-color: #111; } .login-input[aria-invalid="true"] { border-color: #d6336c; box-shadow: 0 0 0 3px rgba(214, 51, 108, .12); } .login-input::placeholder, .adm-in::placeholder { color: #b3b1ad; } /* --- admin panel ------------------------------------------------------------- */ .adm-warn { color: #d6336c; } .adm-code { background: #f4f3f1; border-radius: 6px; padding: 1px 6px; font-size: .9em; direction: ltr; display: inline-block; } .adm-card { background: #fff; border: 1px solid #e7e6e3; border-radius: 20px; } .adm-tab { padding: 10px 18px; border-radius: 999px; font-size: 14px; color: #6b6b6b; white-space: nowrap; border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; } .adm-tab:hover { color: #111; } .adm-tab.is-active { background: #111; color: #fff; } .adm-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #e7e6e3; border-radius: 16px; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; } .adm-row:hover { border-color: #c9c7c3; box-shadow: 0 6px 18px rgba(0, 0, 0, .05); } .adm-thumb { width: 48px; height: 64px; object-fit: cover; border-radius: 10px; background: #f4f3f1; flex-shrink: 0; } .adm-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #e7e6e3; border-radius: 12px; background: #fff; color: #111; transition: background .2s ease, color .2s ease, border-color .2s ease; } .adm-icon:hover { background: #111; color: #fff; border-color: #111; } .adm-icon--danger:hover { background: #d6336c; border-color: #d6336c; } /* size grid: label / waist / hip / thigh / remove */ .adm-size-row { display: grid; gap: 8px; align-items: center; grid-template-columns: repeat(4, minmax(0, 1fr)) 40px; } .adm-size-row .adm-in { padding: 10px 12px; text-align: center; } .adm-size-head { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)) 40px; font-size: 12px; color: #6b6b6b; padding-inline: 12px; } #fileText { width: 100%; min-height: 320px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; direction: ltr; text-align: left; border: 1px solid #e7e6e3; border-radius: 14px; padding: 14px; background: #faf9f7; } /* On a phone the four boxes stay in one row (they hold 2-3 digits) and the remove button drops to its own full-width row rather than landing in the middle of a wrapped grid. */ @media (max-width: 640px) { .adm-size-row { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 6px; } .adm-size-row .adm-in { padding: 10px 4px; font-size: 13px; } .adm-size-row .adm-icon { grid-column: 1 / -1; width: 100%; height: 34px; } .adm-size-head { display: none; } }