/* Storefront design system. * * Every rule here derives from the theme's CSS custom properties emitted in the * storefront layout (--primary, --primary-text, --bg, --accent, --radius, * --font-heading, --font-body), so it works for ANY operator colour scheme. The * tonal ladder below is the key trick: color-mix() computes washes, tints, * hairlines and deep shades from the shop's own colours, giving a full palette * from two or three inputs instead of raw-primary-on-flat-white. */ body.storefront-body { /* ── Tonal ladder ─────────────────────────────────────────────────────── */ --primary-soft: color-mix(in srgb, var(--primary) 6%, var(--bg)); --primary-tint: color-mix(in srgb, var(--primary) 13%, var(--bg)); --primary-line: color-mix(in srgb, var(--primary) 28%, transparent); --primary-deep: color-mix(in srgb, var(--primary) 78%, #121212); /* Panels sit near-white regardless of page background so menus stay readable over dark themes and background images alike. */ --panel: color-mix(in srgb, #ffffff 94%, var(--primary)); --ink: color-mix(in srgb, #191b20 94%, var(--primary)); --ink-soft: color-mix(in srgb, var(--ink) 55%, #9a9a9a); --hairline: color-mix(in srgb, var(--ink) 10%, transparent); /* Accents can be light (e.g. lime); pulling them 30% toward ink keeps them readable on panels while preserving the hue. */ --accent-ink: color-mix(in srgb, var(--accent) 65%, var(--ink)); /* Corner radius for boxes: follows the button shape but clamped, so "pill" buttons don't balloon cards into ellipses. */ --radius-panel: min(var(--radius), 1rem); --radius-row: min(var(--radius), 0.5rem); } /* ── Utility bar (slim chrome above the masthead) ─────────────────────────── */ .storefront-header .sf-shoplink { font-size: 1rem; } /* On the menu page the masthead names the shop, so the bar's copy starts hidden and fades in once the masthead scrolls behind it (condensed_header controller adds .is-visible). JS-off leaves it visible — better a shop named twice than not at all. */ @media (scripting: enabled) { .sf-shoplink--condensed { opacity: 0; visibility: hidden; transition: opacity 0.18s ease; } } .sf-shoplink--condensed.is-visible { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: reduce) { .sf-shoplink--condensed { transition: none; } } /* ── Masthead — the shop's fascia board ───────────────────────────────────── */ .sf-masthead { /* The gradient shades AWAY from the text colour, never toward it. It used to run primary → --primary-deep (a fixed darkening), which on a mid-tone brand meant the right-hand end — where the right-aligned fact rail sits, ~83% across — was the darkest part of the band. Measured on production: dark ink was 4.65 on the primary but 3.20 under the facts, i.e. the ink chosen for readability was picked against a colour the text doesn't actually sit on. --fascia-motif is the ink's opposite (see StorefrontTheme#fascia_motif), so mixing toward it can only raise contrast across the band. */ background: linear-gradient(130deg, var(--primary) 20%, color-mix(in srgb, var(--primary) 86%, var(--fascia-motif, #121212))); color: var(--primary-text); position: relative; overflow: hidden; /* So the motif can sit at z-index -1 (behind the content, in front of the band) without escaping the section. */ isolation: isolate; } .sf-masthead--hero { min-height: 16rem; display: flex; align-items: flex-end; } .sf-masthead--hero .sf-masthead-inner { position: relative; z-index: 1; } .sf-masthead-photo { position: absolute; inset: 0; background-size: cover; background-position: center; } /* The shop's own mark, blown up and bled off the trailing edge so it reads as texture rather than a second copy of the logo. Drawn as a SILHOUETTE, not the logo's own colours: a brand's logo is usually in its brand colour, which is usually the primary — so painting it over the primary band left it invisible. Masking and filling makes it read as a tonal shape whatever the logo is coloured. --fascia-motif is deliberately the OPPOSITE of the band's ink (see StorefrontTheme#fascia_motif) so the watermark always pushes the band away from the text colour. Filling with the ink colour instead measurably broke the fact rail's contrast on a mid-tone band. Only rendered for logos with real transparency; masking one with a solid background would produce a plain rectangle (Account#logo_suits_motif?). */ .sf-masthead-motif { position: absolute; inset-block: -35%; inset-inline-end: -6%; width: min(40rem, 62%); z-index: -1; pointer-events: none; background-color: var(--fascia-motif, #000000); opacity: 0.1; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center right; mask-position: center right; -webkit-mask-size: contain; mask-size: contain; } @media (max-width: 1023px) { .sf-masthead-motif { width: 78%; opacity: 0.08; } } .sf-masthead-scrim { position: absolute; inset: 0; background: linear-gradient( to top, color-mix(in srgb, var(--primary-deep) 88%, transparent) 0%, color-mix(in srgb, var(--primary-deep) 35%, transparent) 55%, color-mix(in srgb, var(--primary-deep) 12%, transparent) 100% ); } .sf-masthead-inner { width: 100%; max-width: 72rem; margin-inline: auto; padding: 1.6rem 1rem 1.5rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .sf-masthead-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; min-width: 0; } @media (min-width: 1024px) { /* Brand left, facts right — the band stays shallow and the right half isn't dead space. */ .sf-masthead-inner { padding: 2rem 1rem 1.9rem; flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; } .sf-masthead--hero .sf-masthead-inner { padding-top: 3.75rem; } } body.header-centre .sf-masthead-inner { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; } body.header-centre .sf-masthead-brand { align-items: center; } body.header-centre .sf-masthead-lockup { flex-direction: column; align-items: center; } body.header-centre .sf-masthead-facts { align-items: center; text-align: center; } /* Logo above the name on a phone, side by side once there's room. */ .sf-masthead-lockup { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; color: inherit; text-decoration: none; min-width: 0; } @media (min-width: 640px) { .sf-masthead-lockup { flex-direction: row; align-items: center; gap: 1.15rem; } } .sf-shopname { font-family: var(--font-heading); font-size: clamp(1.75rem, 4vw, 2.6rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.015em; text-wrap: balance; } /* A wordmark logo already spells the name, so showing it twice is noise — but the heading stays in the DOM for search engines and screen readers. */ .sf-shopname--hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); } /* One height cap cannot serve every logo: at max-height 3.5rem a wide wordmark renders ~300px across while a square roundel renders ~68px — the same rule flattering one and shrinking the other to nothing. Size by what the logo actually IS; Theme::LogoProfiler measures it at upload and the partial emits the class as [data-logo]. Unprofiled logos keep the old conservative cap. */ .sf-masthead-logo { display: block; width: auto; height: auto; max-width: min(70vw, 20rem); max-height: 3.5rem; } [data-logo="wordmark"] .sf-masthead-logo { max-height: 4.25rem; max-width: min(78vw, 24rem); } [data-logo="combo"] .sf-masthead-logo { max-height: 4.75rem; max-width: min(72vw, 20rem); } [data-logo="emblem"] .sf-masthead-logo { max-height: 5rem; max-width: 5rem; } [data-logo="tall"] .sf-masthead-logo { max-height: 5.5rem; max-width: 8rem; } @media (min-width: 1024px) { .sf-masthead-logo { max-height: 4.25rem; } [data-logo="wordmark"] .sf-masthead-logo { max-height: 5rem; } [data-logo="combo"] .sf-masthead-logo { max-height: 5.75rem; } [data-logo="emblem"] .sf-masthead-logo { max-height: 7rem; max-width: 7rem; } [data-logo="tall"] .sf-masthead-logo { max-height: 6.5rem; max-width: 10rem; } } /* Most logos are drawn for light backgrounds, so they get a white sign-board plate on the coloured masthead. Shops whose logo is made for dark backgrounds can turn the plate off (theme setting → body.logo-no-plate). */ .sf-logoplate { display: inline-flex; align-items: center; justify-content: center; background: #ffffff; padding: 0.55rem 0.8rem; border-radius: min(var(--radius), 0.9rem); box-shadow: 0 2px 10px -6px rgb(0 0 0 / 0.35); } /* A roundel needs even padding all round, or the plate reads as an off-centre rectangle behind a circle. */ [data-logo="emblem"] .sf-logoplate { padding: 0.6rem; border-radius: min(var(--radius), 1.1rem); } body.logo-no-plate .sf-logoplate { background: transparent; padding: 0; box-shadow: none; } .storefront-header .sf-logoplate { padding: 0.2rem 0.45rem; border-radius: min(var(--radius), 0.45rem); box-shadow: none; } body.logo-no-plate .storefront-header .sf-logoplate { padding: 0; } /* --fascia-ink is the theme's text colour, or white/near-black when that colour only clears AA for large text — the tagline and facts are small, so they can't inherit the heading's contrast allowance. Set in the layout. */ .sf-tagline { font-size: 1rem; color: var(--fascia-ink, var(--primary-text)); max-width: 46ch; text-wrap: balance; } /* Wrapping pills on a phone; a right-aligned column of plain lines on desktop, so the band reads as a fascia with a notice board rather than a row of tags. */ .sf-masthead-facts { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; color: var(--fascia-ink, var(--primary-text)); } .sf-fact { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.3rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent); border: 1px solid color-mix(in srgb, currentColor 26%, transparent); } /* Only the closed state gets a marker — it's the one a customer needs to notice. Dotting "open" too just adds a stray bullet to the list. */ .sf-fact--closed::before { content: ""; flex: none; width: 0.45rem; height: 0.45rem; border-radius: 999px; background: currentColor; } @media (min-width: 1024px) { .sf-masthead-facts { flex: none; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; } .sf-fact { padding: 0; border: 0; background: none; font-size: 0.9rem; font-weight: 500; } } /* ── Menu panels — a printed-menu section, not floating cards ─────────────── */ .menu-panel { background: var(--panel); color: var(--ink); border-radius: var(--radius-panel); overflow: hidden; } /* .card treatments (cards-flat / cards-outlined body classes) target .card, so panels carry both classes; shadowed default lives here. */ .menu-panel.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.05), 0 6px 18px -8px rgb(0 0 0 / 0.14); } body.cards-flat .menu-panel.card { box-shadow: none; } body.cards-outlined .menu-panel.card { box-shadow: none; border: 1px solid var(--primary-line); } .menu-panel-head { padding: 1.1rem 1.25rem 0.85rem; border-bottom: 2px solid var(--primary-line); } .menu-panel-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 0.15rem; } .menu-panel-title { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } .menu-panel-desc { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.3rem; max-width: 60ch; } .menu-rows { list-style: none; margin: 0; padding: 0; } .menu-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1.25rem; } .menu-row + .menu-row { border-top: 1px solid var(--hairline); } .menu-row:hover { background: var(--primary-soft); } .menu-row-text { flex: 1; min-width: 0; } .menu-row-name { font-weight: 600; line-height: 1.3; } .menu-row-desc { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.35; margin-top: 0.1rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .menu-row-price { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.95rem; color: var(--accent-ink); white-space: nowrap; } .menu-row-price .from { font-weight: 500; font-size: 0.78rem; color: var(--ink-soft); } /* Compact density — tighter rows, one-line descriptions. */ body.menu-compact .menu-row { padding-block: 0.5rem; } body.menu-compact .menu-row-desc { -webkit-line-clamp: 1; } body.menu-compact .menu-panel-head { padding-block: 0.85rem 0.6rem; } /* ── Category navigation (Classic sidebar) ───────────────────────────────── */ .sf-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.55rem; } .sf-catnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .sf-catnav a { display: flex; align-items: center; gap: 0.65rem; padding: 0.55rem 0.75rem; border-left: 3px solid transparent; border-radius: 0 var(--radius-row) var(--radius-row) 0; font-size: 0.92rem; color: var(--ink); transition: background 0.12s ease; } .sf-catnav a:hover { background: var(--primary-soft); } .sf-catnav a.active { border-left-color: var(--primary); background: var(--primary-tint); font-weight: 650; } .sf-catnav .count { margin-left: auto; font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); } /* Sidebar sits on the page background (which may be an image) — give the nav a panel of its own so it always reads. */ .sf-sidebar-panel { background: var(--panel); color: var(--ink); border-radius: var(--radius-panel); padding: 1rem 0.85rem; } body.cards-outlined .sf-sidebar-panel { border: 1px solid var(--primary-line); } .menu-panel.card, .sf-sidebar-panel { backdrop-filter: none; } /* Fallback category thumb — the category's initial set in the heading face, so shops with no photography still get visual rhythm. */ .sf-thumb { width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: var(--radius-row); object-fit: cover; } .sf-thumb--initial { display: inline-flex; align-items: center; justify-content: center; background: var(--primary-tint); color: var(--primary-deep); font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; } /* ── Mobile category chips (Classic below lg) ─────────────────────────────── */ .sf-catchips { display: flex; gap: 0.45rem; overflow-x: auto; padding: 0.6rem 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sf-catchips::-webkit-scrollbar { display: none; } .sf-catchips a { flex-shrink: 0; font-size: 0.85rem; font-weight: 600; padding: 0.42rem 0.95rem; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1px solid var(--hairline); white-space: nowrap; } .sf-catchips a.active { background: var(--primary); color: var(--primary-text); border-color: var(--primary); } /* Variants: tab bar (Tabbed layout) and mini anchor nav (Scroll layout) share the chip vocabulary at different sizes. */ .sf-catchips--tabs { padding-inline: 0; } .sf-catchips--tabs a { font-size: 0.9rem; padding: 0.5rem 1.1rem; } .sf-catchips--mini { padding-inline: 0; } .sf-catchips--mini a { font-size: 0.78rem; padding: 0.3rem 0.75rem; } .sf-stickybar { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ── Category grid tiles (Classic "browse all") ───────────────────────────── */ .sf-tile { display: block; overflow: hidden; background: var(--panel); color: var(--ink); border-radius: var(--radius-panel); transition: transform 0.15s ease, box-shadow 0.15s ease; } .sf-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.25); } .sf-tile-image { aspect-ratio: 4 / 3; background: var(--primary-tint); overflow: hidden; } .sf-tile-initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; font-size: 2.6rem; color: var(--primary-deep); background: radial-gradient(circle at 20% 15%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 55%), var(--primary-tint); } /* ── Configurator modal (Customise) ───────────────────────────────────────── */ .sf-config .modal-box { background: var(--panel); color: var(--ink); border-radius: var(--radius-panel); font-family: var(--font-body); } .sf-config-title { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; } .sf-config-desc { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.25rem; } .sf-config-group { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--hairline); } .sf-config-group-name { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); } .sf-config-required { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--primary-tint); color: var(--primary-deep); } .sf-config-option { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-row); cursor: pointer; } .sf-config-option:hover { background: var(--primary-soft); } .sf-config-option .modifier { font-variant-numeric: tabular-nums; font-size: 0.85rem; font-weight: 600; color: var(--accent-ink); flex-shrink: 0; } .sf-config-preview { background: var(--primary-soft); border: 1px solid var(--primary-line); border-radius: var(--radius-row); padding: 0.85rem 1rem; } .sf-config-preview .total { font-family: var(--font-heading); font-variant-numeric: tabular-nums; } /* ── Reduced motion ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sf-tile, .sf-catnav a { transition: none; } .sf-tile:hover { transform: none; } } /* --------------------------------------------------------------------------- Basket pill "item added" announcement --------------------------------------------------------------------------- The pill grows downward to expose a message, then shrinks back. 🔴 The reveal panel is ABSOLUTELY POSITIONED behind the pill's face, so the pill only APPEARS to grow — its layout box never changes and the header keeps its height. The predecessor to this was a message in the document flow, which pushed the masthead down 48px on every add and let it spring back. Collapsed it is exactly the height of the face, which covers it completely; expanding it below the face is what "exposes" the message. min-width rather than a fixed width so a longer message grows leftward instead of clipping. */ .sf-pill { position: relative; display: inline-flex; } .sf-pill__face { position: relative; z-index: 1; transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease; } .sf-pill__reveal { position: absolute; top: 0; right: 0; min-width: 100%; height: 100%; z-index: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0.5rem 0.28rem; border-radius: var(--radius-field, 0.5rem); background: var(--color-success); color: var(--color-success-content); font-size: 0.68rem; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; opacity: 0; pointer-events: none; transition: height 260ms cubic-bezier(0.2, 0.8, 0.3, 1), opacity 140ms ease; } .sf-pill--announcing .sf-pill__reveal { height: calc(100% + 1.45rem); opacity: 1; } /* The face flashes to the same confirm colour, so the whole pill reads as one object changing state rather than a coloured tab appearing behind a button. */ .sf-pill--announcing .sf-pill__face { background-color: var(--color-success); border-color: var(--color-success); color: var(--color-success-content); } @media (prefers-reduced-motion: reduce) { .sf-pill__reveal, .sf-pill__face { transition-duration: 1ms; } } /* --------------------------------------------------------------------------- Mobile navigation drawer --------------------------------------------------------------------------- The shop's own pages were reachable only from a footer link at the bottom of the menu. They live here now, along with the opening/collection detail that used to eat the top of every phone screen. */ .sf-drawer__backdrop { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / 0.4); opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 200ms; } .sf-drawer--open .sf-drawer__backdrop { opacity: 1; visibility: visible; } .sf-drawer__panel { position: fixed; top: 0; left: 0; bottom: 0; z-index: 61; width: min(19rem, 84vw); display: flex; flex-direction: column; background: var(--panel, #fff); color: var(--ink); /* The drawer reaches the top of the screen, so IT carries the status-bar inset — the header no longer does once this is over it. Only the topmost element may, or you get a dead strip. */ padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 0 40px -8px rgb(0 0 0 / 0.35); transform: translateX(-100%); transition: transform 240ms cubic-bezier(0.2, 0.8, 0.3, 1); overflow-y: auto; } .sf-drawer--open .sf-drawer__panel { transform: translateX(0); } .sf-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.75rem 0.75rem 0.75rem 1.15rem; border-bottom: 1px solid var(--hairline); } .sf-drawer__title { font-weight: 700; font-size: 1rem; } .sf-drawer__links { list-style: none; margin: 0; padding: 0.5rem 0; } .sf-drawer__links--secondary { border-top: 1px solid var(--hairline); margin-top: auto; } .sf-drawer__links a { display: block; padding: 0.85rem 1.15rem; font-weight: 600; font-size: 0.95rem; /* A comfortable tap target on a phone, and room for a chevron. */ min-height: 2.75rem; } .sf-drawer__links a:active { background: color-mix(in srgb, var(--primary) 10%, transparent); } .sf-drawer__links a::after { content: "›"; float: right; opacity: 0.35; font-weight: 400; } .sf-drawer__links--secondary a { font-weight: 500; } @media (prefers-reduced-motion: reduce) { .sf-drawer__panel, .sf-drawer__backdrop { transition-duration: 1ms; } } /* --------------------------------------------------------------------------- Masthead facts on a phone --------------------------------------------------------------------------- 🔴 Only the FIRST fact survives, plus anything marked closed. FasciaFacts already emits them most-decisive-first (the ordering deadline leads), so the one a customer needs before ordering is the one that stays; the rest are a tap away in the drawer. A "closed today" fact is an exception state and is never hidden — that is the one time the top of the screen has to argue with the customer's assumption that they can order. */ @media (max-width: 639px) { .sf-masthead-facts > .sf-fact:nth-child(n + 2):not(.sf-fact--closed) { display: none; } } /* --------------------------------------------------------------------------- "There is more this way" on the category rail --------------------------------------------------------------------------- The rail hides its scrollbar, which left nothing at all to say the categories continue past the edge. Both the fade and the chevron are driven by measured scroll position, so neither appears on a rail that already fits — a permanent arrow pointing at nothing is worse than none. */ .sf-scrollhint { position: relative; } .sf-scrollhint::before, .sf-scrollhint::after { content: ""; position: absolute; top: 0; bottom: 0; width: 2.75rem; pointer-events: none; opacity: 0; transition: opacity 160ms ease; z-index: 1; } .sf-scrollhint::before { left: 0; background: linear-gradient(to right, var(--bg) 15%, transparent); } .sf-scrollhint::after { right: 0; background: linear-gradient(to left, var(--bg) 35%, transparent); } .sf-scrollhint--back::before { opacity: 1; } .sf-scrollhint--more::after { opacity: 1; } .sf-scrollhint__more { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--panel); color: var(--ink); border: 1px solid var(--hairline); box-shadow: 0 1px 6px -2px rgb(0 0 0 / 0.35); } .sf-scrollhint__more svg { width: 0.9rem; height: 0.9rem; } .sf-scrollhint--more .sf-scrollhint__more { display: flex; } @media (prefers-reduced-motion: reduce) { .sf-scrollhint::before, .sf-scrollhint::after { transition-duration: 1ms; } } /* Sign out sits at the foot of the drawer — least-used control, and it was costing the shop's logo room in the header. */ .sf-drawer__signout { border-top: 1px solid var(--hairline); padding: 0.5rem 0; } .sf-drawer__signout-button { display: block; width: 100%; text-align: left; padding: 0.85rem 1.15rem; min-height: 2.75rem; font-size: 0.95rem; font-weight: 500; color: var(--ink); opacity: 0.75; } .sf-drawer__signout-button:active { background: color-mix(in srgb, var(--primary) 10%, transparent); }