/* ========================================================================== VILARCI - HEADER & SIDEBAR STYLES !! BEFORE YOU DEPLOY A CHANGE TO THIS FILE, RUN FROM THE REPO ROOT: pwsh .\stamp-cache-version.ps1 This file is served `max-age=31536000, immutable`, so the ONLY thing that makes a browser fetch a new copy is the ?v= timestamp in the 31 pages that load it. Skip the stamp and returning visitors keep this exact build for a year, with no way to push a fix to them. You will edit this file rarely enough to have forgotten that. That is why the reminder lives here rather than in a document you would have to remember to open. Full context: VILARCI_PIPELINE_HANDOFF.md section 24. -------------------------------------------------------------------------- Extracted from the componentCSS template string that used to live inside header.js. It was injected into at DOMContentLoaded, which meant the header had no styling until JS had downloaded, parsed and run - a visible flash on every page load. As a real stylesheet the browser fetches it in parallel with the HTML and styles the header before first paint. Every rule here is scoped to a .class, #id, @keyframes or @media block, so its cascade position does not matter and it cannot collide with page CSS. DELIBERATELY NOT IN THIS FILE: the three global rules (html/body font + scrollbar hiding, ::-webkit-scrollbar, and the bare header element). Those are still injected late by header.js, because winning the cascade is exactly what they are for - the brand font must override each page's own body font, and it only manages that by being injected after the page's stylesheets and after the Tailwind CDN's runtime preflight. Moving them here would silently break Playfair Display across the site. See header.js initializeComponent(). This banner is deliberately ASCII-only: it was previously written by a PowerShell here-string and PowerShell 5.1 parses a BOM-less .ps1 as ANSI, which mojibaked every box-drawing character and em-dash in it. ========================================================================== */ .border { border: 1px solid transparent; border-radius: 6px; cursor: pointer; transition: all 0.2s; } .border:hover { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); } /* TOP NAVBAR */ .navbar { height: 56px; width: 100%; background: linear-gradient(90deg, #d32f2f, #e43e3e); color: #ffffff; display: flex; align-items: center; padding: 0 15px; gap: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* LOGO AREA */ .nav-logo { display: flex; align-items: center; gap: 8px; padding: 4px 8px; /* Never squash. .nav-logo and .nav-address are both flex items holding white-space:nowrap text, and a flex item's default min-width:auto was being overridden by the shrink -- so around 440px the two boxes were sized narrower than their own contents and the "Vilarci" wordmark printed straight on top of "Results Based On / All of Tamluk". The logo holds its width; the address block below absorbs the squeeze. */ flex-shrink: 0; } .logo { height: 40px; width: 35px; object-fit: cover; border-radius: 25%; background: white; } .logo-name { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; font-family:Playfair Display; } /* LOCATION AREA */ .nav-address { display: flex; flex-direction: column; justify-content: center; padding: 4px 10px; margin-right: auto; /* Absorbs the squeeze instead of overflowing it: min-width:0 lets this flex item actually shrink, and the area name ellipsises (below) rather than spilling over the wordmark. */ min-width: 0; overflow: hidden; } .location { color: #ffd54f; font-size: 11px; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 2px; line-height: 1; } .location-name { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 5px; line-height: 1; white-space: nowrap; } /* A long area name ("All of Tamluk", "Panskura Municipality") is the thing that actually overflows. Clip it with an ellipsis; the pin icon stays. */ .location-name #loc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .location-name .fa-location-dot { flex-shrink: 0; } /* LINKS AREA */ .nav-links { display: flex; align-items: center; gap: 4px; } .nav-links a { text-decoration: none; color: #ffffff; font-weight: 600; font-size: 15px; padding: 8px 12px; white-space: nowrap; } /* --- ULTRA PREMIUM PROFILE BUTTON --- */ .profile-btn { display: flex; align-items: center; gap: 8px; /* #e43e3e behind near-white text measured 4.02:1, under the 4.5 WCAG AA floor. #d32f2f is the existing brand red (the left end of the navbar gradient) and measures 4.87:1, so this passes without a new colour. */ background: #d32f2f; color: #fffafe !important; border-radius: 50px !important; font-weight: 700 !important; font-size: 15px; text-decoration: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .profile-btn i { font-size: 22px; } .profile-btn:hover { background: #fff9f9; color: #c62828 !important; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25); border-color: #ce093a; } @media (max-width: 300px) { .profile-text { display: none; } .profile-btn { padding: 6px 12px !important; } } /* ════════════════════════════════════════════════════════════════ PROFILE HOVER MENU The account shortcuts, one hover away instead of behind the whole sidebar. DESKTOP ONLY, and deliberately so — the condition below is three tests, all of which must pass: hover + fine pointer a phone or tablet has neither, so the card is not merely hidden there, it is display:none and cannot intercept the tap meant to open the profile. Avoids the classic touch trap where a hover-revealed panel eats the first tap on its own trigger. min-width: 768px a narrow window is a small screen even with a mouse on it. Below this the caret disappears too, so nothing advertises a menu that is not there. 768px matches the small-screen break the rest of the site uses. Small screens keep the sidebar, unchanged. ════════════════════════════════════════════════════════════════ */ .profile-wrap { position: relative; display: flex; align-items: center; } .profile-menu { display: none; } /* TWO classes, and it has to stay that way. The caret is a .fa-solid, and vlr-icons.css -- which loads AFTER this file -- carries Font Awesome's own base rule: .fa, .fas, .fa-solid, .far, .fa-regular { display: var(--fa-display, inline-block); } That is one class, exactly the specificity a bare `.profile-caret` would have, so at a tie the later sheet won and the caret stayed visible on phones no matter what the media query below said. Qualifying with .profile-btn settles it on specificity instead of load order. The same reach also beats `.profile-btn i { font-size: 22px }`, which is why the size below needs no !important. */ .profile-btn .profile-caret { display: none; } @media (hover: hover) and (pointer: fine) and (min-width: 768px) { .profile-btn .profile-caret { display: inline-block; font-size: 11px; opacity: .8; transition: transform .22s ease; } .profile-menu { display: block; position: absolute; top: calc(100% + 12px); right: 0; width: 268px; /* Above the floating .cart (z-index 10), which the card overlaps */ z-index: 60; background: #ffffff; border-radius: 14px; padding: 6px 0 8px; box-shadow: 0 18px 44px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .10); font-family: 'Inter', system-ui, -apple-system, sans-serif; text-align: left; /* Guard for a short window; the list is ~440px so this normally never engages. Scrollbars are hidden site-wide, scrolling is not. */ max-height: calc(100vh - 90px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); /* visibility is NOT interpolated -- it flips instantly on open (see the open-state rule) and only after the fade on close. A transitioning visibility leaves the card non-focusable for the whole duration, which broke Escape-then-ArrowDown: the row was focused before the browser counted the card as visible again, so the focus was silently dropped and the menu felt dead. */ transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } /* Invisible bridge across the 12px gap. Without it the pointer leaves .profile-wrap on the way down to the card and the menu shuts under the cursor. */ .profile-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* Pointer notch, tucked under the first row */ .profile-menu::after { content: ''; position: absolute; top: -5px; right: 26px; width: 12px; height: 12px; background: #ffffff; border-radius: 2px; transform: rotate(45deg); } .profile-wrap:hover .profile-menu, .profile-wrap:focus-within .profile-menu { opacity: 1; visibility: visible; transform: translateY(0); /* 0s and no delay: focusable on the very same tick it opens */ transition: opacity .18s ease, transform .18s ease, visibility 0s; } .profile-wrap:hover .profile-caret, .profile-wrap:focus-within .profile-caret { transform: rotate(180deg); } /* The pill keeps its hover skin while the pointer is down in the card — otherwise it snapped back to red the moment you left the button and the two stopped reading as one control. Same values as .profile-btn:hover above; keep them in step. */ .profile-wrap:hover .profile-btn, .profile-wrap:focus-within .profile-btn { background: #fff9f9; color: #c62828 !important; box-shadow: 0 6px 15px rgba(0, 0, 0, .25); } /* Escape sets this; mouseleave clears it, so the next hover reopens */ .profile-wrap.pm-hide .profile-menu { opacity: 0 !important; visibility: hidden !important; transform: translateY(-8px) !important; } /* --- rows --- */ .profile-menu .pm-title { padding: 10px 18px 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; /* #94a3b8 on white is 2.6:1 — this is a real label, so it clears AA */ color: #64748b; } .profile-menu .pm-head { padding: 14px 18px 10px; } .profile-menu .pm-head-title { font-size: 15px; font-weight: 800; color: #0f172a; } .profile-menu .pm-head-sub { margin-top: 3px; font-size: 12.5px; font-weight: 500; line-height: 1.45; color: #64748b; } /* Specificity note: .nav-links a sets white 15px text with padding, and these rows are inside .nav-links. Two classes beats it — do not shorten these selectors to `.pm-item`. */ .profile-menu .pm-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 18px; font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.2; color: #334155 !important; text-decoration: none; text-align: left; white-space: nowrap; background: none; border: 0; cursor: pointer; position: relative; transition: background .15s ease, color .15s ease; } .profile-menu .pm-item svg { width: 18px; height: 18px; flex: 0 0 18px; color: #64748b; transition: color .15s ease; } /* Cart is a Font Awesome , not an (same pattern as data-no-footer). Two search boxes on a search page is one too many. All screen sizes, both homes: the field is hidden whether it is sitting in .panel (under 900px) or has been moved up into .navbar (900px and up). The second rule is not optional. From 900px the navbar relies on the search being elastic and .nav-address drops its auto margin to let it grow; with the search gone there is nothing elastic left, so .nav-links would strand in the middle of the bar with dead red space after it -- the exact gap that had to be fixed once already. Giving the address back its auto margin pushes the links to the edge again. */ body[data-no-navsearch] .nav-search { display: none !important; } body[data-no-navsearch] .nav-address { margin-right: auto; } /* SEARCH PANEL */ .panel { height: 50px; width: 100%; background: #9e0303; color: #fdfdfb; /* Containing block for the absolutely positioned .mega below it */ position: relative; display: flex; align-items: center; padding: 0 15px; gap: 12px; } .panel-all { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-weight: 700; font-size: 15px; color: #fff; } .nav-search { height: 38px; display: flex; flex-grow: 1; max-width: 700px; margin-right: 65px; border-radius: 6px; overflow: hidden; position: relative; /* anchors the rotating hint below */ } /* Rotating search hint — the animated stand-in for a placeholder. pointer-events:none so clicks fall through to the input/wrapper. It is hidden the moment the field is focused or has any text, so it can never sit behind what the visitor is typing. */ .search-hint { position: absolute; left: 12px; /* matches .search-input padding-left */ /* Stops 58px short of the right edge so the hint can never slide under the 50px .search-icon. Without a `right` bound an absolutely positioned box is shrink-to-fit, and with white-space:nowrap the longer hints ("Book a salon at home", "Find an AC repair expert") ran straight beneath the yellow magnifier on a narrow screen. */ right: 58px; top: 0; bottom: 0; /* line-height, not flex centring: text-overflow only applies to a block container, and a hard mid-word clip looked broken. .nav-search is a fixed 38px, so this centres exactly. */ display: block; line-height: 38px; text-overflow: ellipsis; pointer-events: none; font-size: 15px; /* #9aa4b2 on white measured 2.52:1. This is the rotating search prompt -- real content a user is meant to read, not decoration -- so it needs to clear AA. #6b7280 measures 4.83:1. */ color: #6b7280; white-space: nowrap; overflow: hidden; transition: opacity .26s ease, transform .26s ease; } .search-hint.is-out { opacity: 0; transform: translateY(-7px); } .search-hint.is-hidden { display: none; } @media (prefers-reduced-motion: reduce) { .search-hint { transition: none; } } .search-input { height: 100%; width: 100%; font-size: 15px; border: none; padding-left: 12px; color: #333; } .search-input:focus { outline: none; } .search-icon { height: 100%; width: 50px; background: #ffecb3; display: flex; justify-content: center; align-items: center; cursor: pointer; color: #d81b60; font-size: 16px; transition: background 0.2s; } .search-icon:hover { background: #ffe082; } /* FLOATING CART BUTTON */ .cart { position: fixed; right: 12px; top: 61px; height: 38px; width: 48px; background: linear-gradient(135deg, #ffffff, #ffe082); color: #9e0303; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; z-index: 10; cursor: pointer; box-shadow: 0 3px 6px rgba(0,0,0,0.2); transition: transform 0.2s; } .cart:hover { transform: scale(1.05); } .cart-amount { font-weight: 800; font-size: 13px; line-height: 1; margin-bottom: 2px;} .cart-icon { font-size: 14px; line-height: 1;} /* ════════════════════════════════════════════════════════════════ DESKTOP HEADER (1024px and up) Two problems on wide screens: the bars ran edge-to-edge while every section of the page is capped at 1400px, so the logo and links never lined up with the content beneath them; and the search box stopped at 700px leaving a wide dead strip of dark red before the floating cart. Fix: pad both bars in to the same 1400px column the page uses, and give the leftover width a job — the pillar links move up into that strip, the way a marketplace's second bar is normally used. The bars keep their full-bleed background, only the content is constrained. Heights are deliberately unchanged: 56 + 50 + 30 is what .category-scroll-container's margin-top is measured against. ════════════════════════════════════════════════════════════════ */ @media (min-width: 1024px) { /* The header is chrome, not content — it deliberately does NOT follow the 1400px content column. Below it the category strip and the red bars are full-bleed, so inset header content read as misalignment, and it cost search width plus the screen-edge cart target (an edge is an infinite click target; inset it becomes an ordinary small button). 1800px is purely an ultrawide guard: on every common laptop width this resolves to 15px, i.e. full-bleed exactly like production. It only engages past ~1830px, where edge-to-edge would stretch the search bar absurdly and fling the logo and links into opposite corners. */ .navbar, .panel { padding-left: max(15px, calc((100% - 1800px) / 2)); padding-right: max(15px, calc((100% - 1800px) / 2)); } .navbar { gap: 20px; } .nav-address { border: 1px solid rgba(255,255,255,.22); border-radius: 8px; padding: 5px 12px; } .nav-address:hover { border-color: rgba(255,255,255,.45); } .nav-links { gap: 6px; } .nav-links a { font-size: 14.5px; } /* Cart tracks the same guard, so it sits on the screen edge at normal widths and only pulls in on ultrawide */ .cart { right: max(12px, calc((100vw - 1800px) / 2)); } .nav-search { margin-right: 16px; } } /* ════════════════════════════════════════════════════════════════ PANEL DOODLE (desktop only) The strip between the search box and the cart, brought to life the Google-doodle way: a parade of little scenes drifting past on a road. Everything here is drawn in CSS — border-radius, gradients and transforms. No images, no GIFs, no sprite files, nothing to download. The cast repeats twice inside the track and the track travels exactly -50%, which makes the loop seamless with no JS timer running. Purely decorative: aria-hidden and pointer-events:none, so it can never swallow a click meant for the search box or the cart. ════════════════════════════════════════════════════════════════ */ .panel-doodle { display: none; flex: 1; align-self: stretch; position: relative; margin-right: 60px; /* clears the floating cart */ overflow: hidden; pointer-events: none; /* Objects fade in and out at the edges instead of popping */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); } .pd-track { display: flex; align-items: flex-end; gap: 46px; height: 100%; width: max-content; padding-bottom: 10px; animation: pdDrift 34s linear infinite; will-change: transform; } @keyframes pdDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } } .pd { position: relative; flex: 0 0 auto; height: 30px; opacity: .92; } .pd span { position: absolute; display: block; } @keyframes pdSpin { to { transform: rotate(360deg); } } @keyframes pdSway { from { transform: rotate(-11deg); } to { transform: rotate(11deg); } } @keyframes pdBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes pdSteam { 0% { transform: translateY(0) scale(.6); opacity: 0; } 35% { opacity: .75; } 100% { transform: translateY(-13px) scale(1.25); opacity: 0; } } @keyframes pdBounce { 0%,100% { transform: translateY(-14px); animation-timing-function: cubic-bezier(.5,0,.9,.5); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(.1,.5,.5,1); } } @keyframes pdSquash { 0%,40%,60%,100% { transform: scale(1,1); } 50% { transform: scale(1.18,.82); } } /* ── delivery scooter — the on-brand one, so it gets a real silhouette: rear + front wheel, deck, leg shield, handlebar, seat, headlight and the delivery box on the back. Whole thing bobs as it rides. ── */ @keyframes pdRide { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } } .pd-scooter { width: 52px; animation: pdRide .8s ease-in-out infinite; } .pd-scooter .s-deck { left: 11px; bottom: 6px; width: 26px; height: 5px; background: linear-gradient(180deg,#ffd9a0,#e59b52); border-radius: 3px; } .pd-scooter .s-front { left: 32px; bottom: 5px; width: 10px; height: 17px; background: linear-gradient(180deg,#ffd9a0,#e59b52); border-radius: 5px 7px 2px 3px; } .pd-scooter .s-bar { left: 36px; bottom: 21px; width: 13px; height: 3px; background: #ffe8c8; border-radius: 2px; } .pd-scooter .s-seat { left: 13px; bottom: 11px; width: 15px; height: 5px; background: #7a4a30; border-radius: 3px 4px 2px 2px; } .pd-scooter .s-box { left: 4px; bottom: 14px; width: 14px; height: 13px; background: linear-gradient(180deg,#ffe8c8,#eec79a); border-radius: 3px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.10); } .pd-scooter .s-box::after { content: ''; position: absolute; left: 3px; top: 4px; width: 8px; height: 2px; border-radius: 2px; background: rgba(158,3,3,.4); } .pd-scooter .s-light { left: 42px; bottom: 15px; width: 5px; height: 5px; border-radius: 50%; background: #fff8d6; box-shadow: 0 0 7px 2px rgba(255,248,214,.45); } .pd-scooter .s-wheel { bottom: 0; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #ffe8c8; background: rgba(0,0,0,.28); animation: pdSpin .5s linear infinite; } .pd-scooter .s-wheel::before { content: ''; position: absolute; inset: 2px 0; width: 2px; left: 50%; margin-left: -1px; background: rgba(255,232,200,.85); } .pd-scooter .s-w1 { left: 2px; } .pd-scooter .s-w2 { left: 33px; } /* ── sapling ── */ .pd-plant { width: 30px; } .pd-plant .p-pot { left: 6px; bottom: 0; width: 18px; height: 12px; background: linear-gradient(180deg,#e0784f,#b8532e); border-radius: 2px 2px 6px 6px; } .pd-plant .p-stem { left: 14px; bottom: 11px; width: 2px; height: 11px; background: #7fb069; border-radius: 2px; } .pd-plant .p-leaf { bottom: 17px; width: 11px; height: 8px; background: #86c06c; border-radius: 12px 2px 12px 2px; } .pd-plant .p-l1 { left: 3px; transform-origin: right center; animation: pdSway 2.2s ease-in-out infinite alternate; } .pd-plant .p-l2 { left: 15px; border-radius: 2px 12px 2px 12px; transform-origin: left center; animation: pdSway 2.2s ease-in-out .5s infinite alternate-reverse; } /* ── burger ── */ .pd-burger { width: 30px; animation: pdBob 2.6s ease-in-out infinite; } .pd-burger .b-top { left: 2px; bottom: 13px; width: 26px; height: 11px; background: linear-gradient(180deg,#ffcf87,#e8a75c); border-radius: 13px 13px 3px 3px; } .pd-burger .b-fill { left: 1px; bottom: 9px; width: 28px; height: 5px; background: #8d5524; border-radius: 3px; } .pd-burger .b-bot { left: 2px; bottom: 3px; width: 26px; height: 7px; background: linear-gradient(180deg,#e8a75c,#cf8a45); border-radius: 3px 3px 9px 9px; } .pd-burger .b-steam { bottom: 25px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.6); animation: pdSteam 2.4s ease-out infinite; } .pd-burger .b-s1 { left: 8px; } .pd-burger .b-s2 { left: 17px; animation-delay: 1.1s; } /* ── bouncing ball ── */ .pd-ball { width: 22px; } .pd-ball .ball-hop { left: 0; bottom: 0; width: 20px; height: 20px; animation: pdBounce 1.1s infinite; } .pd-ball .ball { left: 0; bottom: 0; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff3d6, #ffb347 62%, #e07b1f); animation: pdSquash 1.1s infinite; } .pd-ball .ball::after { content: ''; position: absolute; left: 3px; top: 9px; width: 14px; height: 3px; border-radius: 3px; background: rgba(180,80,10,.45); } /* ── little car ── */ .pd-car { width: 46px; } .pd-car .c-body { left: 0; bottom: 6px; width: 44px; height: 12px; background: linear-gradient(180deg,#9fd3e8,#5fa8c8); border-radius: 6px 8px 4px 4px; } .pd-car .c-roof { left: 10px; bottom: 16px; width: 22px; height: 9px; background: linear-gradient(180deg,#c7e7f4,#8cc4dc); border-radius: 7px 7px 2px 2px; } .pd-car .c-wheel { bottom: 0; width: 12px; height: 12px; border-radius: 50%; border: 2.5px solid #ffe8c8; background: rgba(0,0,0,.25); animation: pdSpin .55s linear infinite; } .pd-car .c-wheel::before { content: ''; position: absolute; inset: 2.5px 0; width: 2px; left: 50%; margin-left: -1px; background: rgba(255,232,200,.85); } .pd-car .c-w1 { left: 5px; } .pd-car .c-w2 { left: 28px; } /* ── shopping bag ── */ .pd-bag { width: 26px; animation: pdBob 3s ease-in-out .4s infinite; } .pd-bag .g-body { left: 1px; bottom: 0; width: 24px; height: 20px; background: linear-gradient(180deg,#ffe8c8,#f3c78a); border-radius: 3px 3px 5px 5px; } .pd-bag .g-body::after { content: ''; position: absolute; left: 6px; top: 7px; width: 12px; height: 2px; border-radius: 2px; background: rgba(158,3,3,.35); } .pd-bag .g-handle { left: 7px; bottom: 18px; width: 12px; height: 9px; border: 2.5px solid #ffe8c8; border-bottom: none; border-radius: 7px 7px 0 0; } /* ── hot cup ── */ .pd-cup { width: 24px; } .pd-cup .u-cup { left: 2px; bottom: 0; width: 18px; height: 17px; background: linear-gradient(180deg,#fff3d6,#e8c48a); border-radius: 3px 3px 7px 7px; } .pd-cup .u-ear { left: 18px; bottom: 4px; width: 8px; height: 8px; border: 2.5px solid #fff3d6; border-left: none; border-radius: 0 8px 8px 0; } .pd-cup .u-steam { bottom: 19px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.6); animation: pdSteam 2.2s ease-out infinite; } .pd-cup .u-s1 { left: 5px; } .pd-cup .u-s2 { left: 12px; animation-delay: 1s; } /* ── apple ── */ .pd-apple { width: 22px; animation: pdBob 3.4s ease-in-out .9s infinite; } .pd-apple .a-fruit { left: 0; bottom: 0; width: 20px; height: 19px; border-radius: 50% 50% 48% 48%; background: radial-gradient(circle at 33% 30%, #ff9a8b, #e5484d 66%, #b3272c); } .pd-apple .a-leaf { left: 11px; bottom: 16px; width: 9px; height: 6px; background: #86c06c; border-radius: 10px 2px 10px 2px; transform-origin: left center; animation: pdSway 2.6s ease-in-out infinite alternate; } @keyframes pdFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } } @keyframes pdFlap { from { transform: scaleX(1); } to { transform: scaleX(.34); } } @keyframes pdWiggle { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } } /* Glow is an opacity+scale fade on a pseudo-element, NOT an animated box-shadow. box-shadow can't be composited, so animating it repaints the header on every single frame on the main thread. */ @keyframes pdPulse { 0%,100% { opacity: .22; transform: scale(.82); } 50% { opacity: .8; transform: scale(1.18); } } @keyframes pdTilt { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } } @keyframes pdFlip { 0%,100% { transform: scaleX(1); } 50% { transform: scaleX(.45); } } /* ── gift box ── */ .pd-gift { width: 26px; animation: pdBob 3.1s ease-in-out .2s infinite; } .pd-gift .gf-box { left: 1px; bottom: 0; width: 24px; height: 16px; background: linear-gradient(180deg,#f7a8b8,#dd6480); border-radius: 2px 2px 4px 4px; } .pd-gift .gf-lid { left: 0; bottom: 14px; width: 26px; height: 6px; background: #ffd54f; border-radius: 3px; } .pd-gift .gf-rib { left: 11px; bottom: 0; width: 4px; height: 20px; background: #ffd54f; } .pd-gift .gf-bow { left: 8px; bottom: 19px; width: 10px; height: 7px; border: 2.5px solid #ffd54f; border-radius: 50% 50% 0 0; border-bottom: none; } /* ── open book ── */ .pd-book { width: 30px; } .pd-book .bk-p { bottom: 2px; width: 13px; height: 18px; background: linear-gradient(180deg,#fff3d6,#e2c8a0); } .pd-book .bk-l { left: 1px; border-radius: 2px 0 0 2px; transform-origin: right center; animation: pdFlip 3.2s ease-in-out infinite; } .pd-book .bk-r { left: 16px; border-radius: 0 2px 2px 0; } .pd-book .bk-sp { left: 13px; bottom: 0; width: 4px; height: 22px; background: #b8532e; border-radius: 2px; } /* ── ice cream ── */ .pd-ice { width: 22px; } .pd-ice .ic-cone { left: 4px; bottom: 0; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 13px solid #d99a5b; } .pd-ice .ic-s1 { left: 1px; bottom: 10px; width: 20px; height: 13px; border-radius: 50%; background: #ffc2d1; } .pd-ice .ic-s2 { left: 5px; bottom: 18px; width: 12px; height: 11px; border-radius: 50%; background: #fff3d6; } /* ── balloon ── */ .pd-balloon { width: 20px; animation: pdFloat 3.4s ease-in-out infinite; } .pd-balloon .bl-body { left: 2px; bottom: 9px; width: 16px; height: 20px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 34% 30%, #ffd0d0, #e05252 70%); } .pd-balloon .bl-str { left: 9px; bottom: 0; width: 2px; height: 10px; background: rgba(255,232,200,.65); } /* ── wrench (services) ── */ .pd-wrench { width: 28px; } .pd-wrench .wr { left: 5px; bottom: 8px; width: 20px; height: 6px; border-radius: 3px; background: linear-gradient(90deg,#e3eaee,#9db4c0); transform-origin: center; animation: pdWiggle 2.2s ease-in-out infinite; } .pd-wrench .wr::before { content: ''; position: absolute; left: -7px; top: -4px; width: 10px; height: 12px; border: 3px solid #e3eaee; border-radius: 50%; border-right-color: transparent; } /* ── light bulb ── */ .pd-bulb { width: 20px; } .pd-bulb .lb-glass { left: 2px; bottom: 7px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 32%, #fff8d6, #ffd54f 72%); } .pd-bulb .lb-glass::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; background: radial-gradient(circle, rgba(255,213,79,.6), transparent 70%); animation: pdPulse 2s ease-in-out infinite; } .pd-bulb .lb-base { left: 6px; bottom: 2px; width: 8px; height: 6px; background: #cfd8dc; border-radius: 1px 1px 3px 3px; } /* ── butterfly ── */ .pd-fly { width: 26px; animation: pdFloat 3s ease-in-out infinite; } .pd-fly .bf-w { bottom: 8px; width: 11px; height: 16px; border-radius: 50% 50% 40% 40%; background: linear-gradient(180deg,#d3a5f0,#8e6bd0); } .pd-fly .bf-l { left: 1px; transform-origin: right center; animation: pdFlap .5s ease-in-out infinite alternate; } .pd-fly .bf-r { left: 14px; transform-origin: left center; animation: pdFlap .5s ease-in-out infinite alternate-reverse; } .pd-fly .bf-b { left: 12px; bottom: 9px; width: 3px; height: 15px; background: #5b3f8a; border-radius: 2px; } /* ── cupcake ── */ .pd-cake { width: 24px; animation: pdBob 2.9s ease-in-out .6s infinite; } .pd-cake .cc-cup { left: 2px; bottom: 0; width: 20px; height: 12px; background: linear-gradient(180deg,#e8a75c,#bd7433); border-radius: 2px 2px 6px 6px; } .pd-cake .cc-top { left: 1px; bottom: 10px; width: 22px; height: 11px; background: linear-gradient(180deg,#fff0f5,#f7a8b8); border-radius: 11px 11px 4px 4px; } .pd-cake .cc-cy { left: 9px; bottom: 19px; width: 6px; height: 6px; border-radius: 50%; background: #e5484d; } /* ── t-shirt (fashion) ── */ .pd-tee { width: 26px; animation: pdTilt 3.2s ease-in-out infinite; } .pd-tee .ts-body { left: 4px; bottom: 0; width: 18px; height: 19px; background: linear-gradient(180deg,#9fd3e8,#5fa8c8); border-radius: 2px 2px 3px 3px; } .pd-tee .ts-sl { bottom: 11px; width: 6px; height: 8px; background: #5fa8c8; border-radius: 2px; } .pd-tee .ts-l { left: 0; } .pd-tee .ts-r { left: 20px; } .pd-tee .ts-nk { left: 9px; bottom: 15px; width: 8px; height: 4px; background: #9e0303; border-radius: 0 0 6px 6px; } /* ── flower ── */ .pd-flower { width: 22px; } .pd-flower .fl-stem { left: 10px; bottom: 0; width: 2px; height: 14px; background: #7fb069; } .pd-flower .fl-head { left: 1px; bottom: 11px; width: 20px; height: 19px; transform-origin: bottom center; animation: pdSway 2.8s ease-in-out infinite alternate; } .pd-flower .fl-head::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 16%, #ffd54f 21%, transparent 22%), radial-gradient(circle at 16% 52%, #ffd54f 21%, transparent 22%), radial-gradient(circle at 84% 52%, #ffd54f 21%, transparent 22%), radial-gradient(circle at 50% 86%, #ffd54f 21%, transparent 22%); } .pd-flower .fl-head::after { content: ''; position: absolute; left: 7px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e5484d; } /* Must sit AFTER the base .panel-doodle rule above, or its display:none wins on source order. Was 1024px, lowered to 550px. Above 900px the parade has the whole strip to itself once the search leaves for the navbar; between 550 and 900 it shares the panel with the search, which gives up width it does not need (see the band rule below). Under 550px there is no room for both and the search keeps the bar. Keep this number in step with DOODLE_MIN_WIDTH in header.js -- that constant decides whether the nodes get BUILT at all, this rule only decides whether they are shown. */ @media (min-width: 550px) { .panel-doodle { display: block; } } /* 550-899px: the search still lives in .panel here, so the two have to split the strip. The 65px right margin on .nav-search exists purely to clear the floating cart -- with the parade sitting between them it is the doodle's own 60px margin that does that job now, so the search drops it and hands the space over. */ @media (min-width: 550px) and (max-width: 899px) { .panel .nav-search { /* Percent, not vw: this resolves against .panel's content box, so the split already accounts for the bar's own padding and stays correct inside an iframe or any nested viewport -- vw does not. 40% leaves the parade ~165px at 550px and ~365px at 899px, which is 2-4 objects on screen rather than a single clipped one. */ max-width: 40%; min-width: 190px; margin-right: 0; } } @media (prefers-reduced-motion: reduce) { .pd-track { animation: none; } .pd-scooter .s-wheel, .pd-car .c-wheel, .pd-plant .p-leaf, .pd-apple .a-leaf, .pd-burger, .pd-bag, .pd-apple, .pd-ball .ball-hop, .pd-ball .ball, .pd-burger .b-steam, .pd-cup .u-steam { animation: none; } .pd-burger .b-steam, .pd-cup .u-steam { opacity: .5; } } /* TICKER MESSAGE BOX */ .message-box1 { width: 100%; background-color: #f1f5f9; height: 30px; display: flex; align-items: center; padding: 0 20px; border-bottom: 1px solid #e2e8f0; } .message-box2 { width: 100%; overflow: hidden; display: flex; align-items: center; } .message-text { display: inline-block; white-space: nowrap; color: #dc2626; font-weight: 700; font-size: 13px; animation: scrollText 20s linear infinite; } @keyframes scrollText { from { transform: translateX(100vw); } to { transform: translateX(-100%); } } /* --- SIDEBAR STYLES --- */ #usb-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.4); z-index: 9998; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(3px); } #usb-overlay.open { opacity: 1; visibility: visible; } #usb-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 85%; max-width: 340px; background: #ffffff; z-index: 9999; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; box-shadow: 4px 0 24px rgba(0,0,0,0.1); } #usb-sidebar.open { transform: translateX(0); } .usb-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: #ffffff; border-bottom: 1px solid #f1f5f9; } .usb-title { font-weight: 700; font-size: 16px; color: #0f172a; flex-grow: 1; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; } .usb-btn { background: none; border: none; padding: 6px; cursor: pointer; color: #64748b; border-radius: 8px; transition: 0.2s; display: flex; align-items: center; } .usb-btn:hover { background: #f1f5f9; color: #0f172a; } .usb-content { flex-grow: 1; overflow-y: auto; padding-bottom: 20px; } .usb-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid #f8fafc; cursor: pointer; transition: all 0.2s; } .usb-item:hover { background: #f8fafc; padding-left: 28px; } /* "See all" — reads as an action, not another category to drill into */ .usb-seeall { background: #f0fdff; border-bottom: 1px solid #cffafe; } .usb-seeall:hover { background: #e0f7fb; } .usb-seeall .usb-item-left { color: #0e7490; font-weight: 800; } .usb-item-left { display: flex; align-items: center; gap: 14px; font-weight: 600; color: #334155; font-size: 15px; } /* ── "S then a letter" badges ──────────────────────────────────────── Shown from 750px up. Width is a rough stand-in for "this device probably has a keyboard" -- it is not a precise one (a 750px tablet has no keys), but it keeps the chips off phones, where the sidebar matters most and a shortcut nobody can press would be pure noise. Rendered by chordBadge() from the same map the key handler reads, so a badge can never advertise a shortcut that does not work. */ .usb-key { display: none; gap: 4px; flex: 0 0 auto; } @media (min-width: 750px) { .usb-key { display: inline-flex; } } .usb-key kbd { font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 10.5px; font-weight: 700; line-height: 1; color: #94a3b8; background: #f1f5f9; border: 1px solid #e2e8f0; border-bottom-width: 2px; border-radius: 5px; padding: 4px 0; min-width: 20px; text-align: center; } .usb-item:hover .usb-key kbd { color: #64748b; background: #e8edf3; border-color: #d3dbe4; } /* The armed-state chip. Appears the moment S is pressed and names what the browser is now waiting for, so the chord never feels like a dead key. */ #vlr-chord { position: fixed; left: 18px; bottom: 18px; z-index: 10001; display: flex; align-items: center; gap: 9px; padding: 9px 14px; border-radius: 11px; background: #1f2937; color: #f8fafc; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 600; box-shadow: 0 12px 28px rgba(0, 0, 0, .30); pointer-events: none; /* purely an indicator */ opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; } #vlr-chord.show { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .16s ease, transform .16s ease, visibility 0s; } #vlr-chord kbd { font-family: inherit; font-size: 11px; font-weight: 800; line-height: 1; color: #1f2937; background: #ffd54f; border-radius: 5px; padding: 5px 8px; } /* ════════════════════════════════════════════════════════════════ KEYBOARD CHEAT SHEET (opened with "?" or the sidebar row) ════════════════════════════════════════════════════════════════ */ /* The cheat sheet is opened from the profile dropdown (and "?"), NOT from the sidebar -- the sidebar keeps its badges and nothing else. */ #vlr-keys-overlay { position: fixed; inset: 0; z-index: 10002; /* over the location modal (10000) */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .62); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; } #vlr-keys-overlay.open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; } .vlr-keys { width: 100%; max-width: 760px; max-height: 86vh; display: flex; flex-direction: column; background: #ffffff; border-radius: 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .38); font-family: 'Inter', system-ui, -apple-system, sans-serif; transform: translateY(10px) scale(.985); transition: transform .22s cubic-bezier(.2, .8, .3, 1); overflow: hidden; } #vlr-keys-overlay.open .vlr-keys { transform: translateY(0) scale(1); } .vlr-keys-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #eef2f7; background: linear-gradient(135deg, #fff6f6, #ffffff); } .vlr-keys-title { display: flex; align-items: center; gap: 11px; font-size: 17px; font-weight: 800; color: #0f172a; } .vlr-keys-title svg { width: 22px; height: 22px; color: #c62828; } .vlr-keys-x { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border: 0; border-radius: 9px; background: #f1f5f9; color: #475569; font-size: 15px; cursor: pointer; transition: background .15s ease, color .15s ease; } .vlr-keys-x:hover { background: #fee2e2; color: #c62828; } .vlr-keys-x:focus-visible { outline: 2px solid #c62828; outline-offset: 2px; } .vlr-keys-body { padding: 20px 22px 24px; overflow-y: auto; } /* Focused on open so arrows scroll it. A visible ring would frame the whole panel in blue the instant it appears, which reads as an error state -- the scroll position itself is the feedback here. */ .vlr-keys-body:focus { outline: none; } .vlr-keys-body:focus-visible { outline: none; } .vlr-keys-sec { margin-bottom: 26px; } .vlr-keys-sec h4 { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #c62828; margin-bottom: 4px; } .vlr-keys-note { font-size: 13px; color: #64748b; margin-bottom: 12px; line-height: 1.55; } .vlr-keys-note kbd, .vlr-keys-list kbd { display: inline-block; font-family: inherit; font-size: 11px; font-weight: 700; line-height: 1; color: #334155; background: #f1f5f9; border: 1px solid #e2e8f0; border-bottom-width: 2px; border-radius: 5px; padding: 4px 0; min-width: 22px; text-align: center; } .vlr-keys-list { list-style: none; display: grid; gap: 3px; } /* Two columns once there is room -- the jump list is 13 rows and a single column pushed the later sections below the fold on a laptop. */ @media (min-width: 620px) { #vlr-keys-goto { grid-template-columns: 1fr 1fr; column-gap: 22px; } } .vlr-keys-list li { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; color: #334155; line-height: 1.45; } .vlr-keys-list li:hover { background: #f8fafc; } .vlr-keys-list li em { font-style: normal; font-weight: 700; color: #c62828; } .vlr-keys-k { display: flex; gap: 4px; flex: 0 0 auto; min-width: 52px; } .vlr-keys-foot { padding-top: 16px; border-top: 1px solid #eef2f7; font-size: 12.5px; color: #64748b; line-height: 1.6; } @media (max-width: 560px) { #vlr-keys-overlay { padding: 12px; } .vlr-keys-body { padding: 16px 14px 18px; } } @media (prefers-reduced-motion: reduce) { #vlr-keys-overlay, .vlr-keys, .vlr-keys-x { transition: none; } } .usb-icon { width: 20px; height: 20px; object-fit: contain; color: #6366f1; } .usb-icon-img { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; } .usb-loader { padding: 24px; display: flex; flex-direction: column; gap: 16px; } .usb-skeleton { height: 20px; background: #e2e8f0; border-radius: 4px; animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } } /* --- LOCATION MODAL STYLES --- */ #loc-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.6); z-index: 10000; opacity: 0; visibility: hidden; transition: all 0.3s ease; backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; } #loc-modal-overlay.open { opacity: 1; visibility: visible; } .loc-modal { background: #ffffff; width: 90%; max-width: 400px; border-radius: 16px; padding: 24px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); transform: scale(0.95) translateY(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; } #loc-modal-overlay.open .loc-modal { transform: scale(1) translateY(0); opacity: 1; } .loc-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .loc-modal-title { font-size: 18px; font-weight: 800; color: #0f172a; display: flex; align-items: center; gap: 8px; } .loc-close-btn { background: #f1f5f9; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #64748b; transition: 0.2s; } .loc-close-btn:hover { background: #e2e8f0; color: #0f172a; } .loc-fixed-inputs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; } .loc-input-group { background: #f8fafc; border: 1px solid #e2e8f0; padding: 10px 14px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; color: #64748b; font-size: 14px; font-weight: 600; cursor: not-allowed; } .loc-label { font-size: 12px; font-weight: 700; color: #64748b; margin-bottom: 4px; display: block; text-transform: uppercase; letter-spacing: 0.5px; } .loc-select { width: 100%; padding: 12px 14px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 15px; font-weight: 600; color: #0f172a; cursor: pointer; outline: none; appearance: none; background: url('data:image/svg+xml;utf8,') no-repeat right 14px center; background-color: white; margin-bottom: 12px; transition: 0.2s; } .loc-select:focus { border-color: #e43e3e; box-shadow: 0 0 0 3px rgba(228, 62, 62, 0.2); background-image: url('data:image/svg+xml;utf8,'); } .loc-select:disabled { background-color: #f8fafc; cursor: not-allowed; color: #94a3b8; border-color: #e2e8f0; background-image: none; } .loc-save-btn { width: 100%; background: #e43e3e; color: white; border: none; padding: 14px; border-radius: 8px; font-weight: 700; font-size: 15px; margin-top: 8px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 6px -1px rgba(228, 62, 62, 0.3); } .loc-save-btn:hover { background: #c62828; transform: translateY(-1px); } .loc-save-btn:disabled { background: #cbd5e1; cursor: not-allowed; box-shadow: none; transform: none; } /* GPS area detection — see the "FIND MY AREA FROM GPS" block in header.js. */ .loc-gps-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff5f5; color: #e43e3e; border: 2px solid #e43e3e; padding: 12px; border-radius: 8px; font-weight: 700; font-size: 14.5px; cursor: pointer; transition: 0.2s; margin-bottom: 12px; } .loc-gps-btn:hover { background: #ffe8e8; } .loc-gps-btn:disabled { opacity: 0.65; cursor: progress; } .loc-gps-note { font-size: 12.5px; color: #64748b; line-height: 1.45; margin: -4px 0 12px; } /* Confirmation. GPS proposes, the buyer decides — never saved on the sensor alone, so this replaces the picker rather than sitting beside it. */ .loc-confirm { text-align: center; padding: 4px 0 0; } .loc-confirm-q { font-size: 13px; font-weight: 600; color: #64748b; } .loc-confirm-name { font-size: 20px; font-weight: 800; color: #0f172a; margin-top: 2px; } .loc-confirm-parent { font-size: 14px; font-weight: 600; color: #475569; } .loc-confirm-meta { font-size: 12px; color: #64748b; margin: 8px 0 14px; } .loc-confirm-no { width: 100%; background: none; border: none; padding: 12px; font-weight: 600; font-size: 14px; color: #475569; cursor: pointer; } .loc-confirm-no:hover { color: #0f172a; } /* ══════════════════════════════════════════════════════════════════════════ CROSS-DOCUMENT VIEW TRANSITIONS ══════════════════════════════════════════════════════════════════════════ Opts every same-origin navigation into a browser-native transition, so the page cross-fades instead of flashing white. Chrome/Edge honour it; Safari and Firefox ignore the at-rule entirely and navigate exactly as they do today, so there is no fallback to write. The named header is what makes the chrome appear to persist: the browser morphs the old header into the new one rather than tearing it down and repainting. Safe to name because no page that loads header.js has a
of its own (the 8 that do -- the policy pages, introduction, seller-home -- do not include header.js), so this name is never duplicated in one document. A duplicate would abort the whole transition. IF THE HEADER FLICKERS OR JUMPS: it is this block. header.js injects the header at DOMContentLoaded, so on a slow load the incoming document can be snapshotted before its header exists. Delete the view-transition-name rule and you keep the plain cross-fade with none of the risk. ══════════════════════════════════════════════════════════════════════════ */ @view-transition { navigation: auto; } header { view-transition-name: vlr-header; } /* Honour the OS setting -- transitions are decoration, never information. */ @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }