/* ══════════════════════════════════════════════════════════════════════ LIQUID GLASS — capa de MATERIAL ────────────────────────────────────────────────────────────────────── Port 1:1 del material de penny.flights (client/app/globals.css) a CSS plano, sin Tailwind ni build. Mismos ingredientes, mismos números, mismas curvas: lo único que cambia es el color de marca — donde allí había ROJO #F71E0B aquí hay AZUL #0B7AF7. Este archivo NO sabe nada de la tienda: solo define tokens y materiales. El layout vive en styles.css y consume estos tokens. Cargar siempre liquid-glass.css ANTES que styles.css. Nota sobre prefijos: penny.flights compila con Lightning CSS, que añade los -webkit- solos y por eso allí se escribe únicamente la propiedad estándar. Aquí no hay bundler, así que las formas -webkit- van escritas a mano (Safari las necesita para backdrop-filter y mask). ══════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════ TIPOGRAFÍA DE MARCA — Paladins ────────────────────────────────────────────────────────────────────── La display oficial del logo (Paladins, de Daniel Zadorozny / Iconian Fonts). Se sirve DESDE AQUÍ, no desde un CDN: es el logo, no puede depender de un tercero. El .woff2 lleva la familia completa (222 códigos, con acentos y comillas tipográficas) y aun así pesa 5 KB, así que no se recorta a un subconjunto: recortarlo ahorraría bytes irrelevantes y rompería el logo el día que cambie una letra. `font-display: block` — y no el `swap` habitual — porque el logo NUNCA debe verse con la tipografía equivocada: la misma línea mide 11.39 em aquí contra 6.36 em en Inter 800 (ver el cálculo en styles.css), así que un `swap` enseñaría el wordmark en Inter y acto seguido lo estiraría un 79 % de golpe. Con `block` el hueco se queda en blanco hasta que llega la fuente, que va PRECARGADA desde el y son 5 KB del mismo origen: en la práctica gana siempre la carrera. Si algún día fallara, a los 3 s cae a Inter. ══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Paladins'; src: url('../fonts/paladins.woff2') format('woff2'); /* La familia solo existe en un peso y su inclinación va DIBUJADA en los trazos, no es una variante itálica: declarar cualquier otra cosa haría que el navegador falsificara negrita u oblicua sobre este mismo archivo y engordara/torciera una geométrica muy precisa. */ font-weight: 400; font-style: normal; font-display: block; } :root { /* ── Marca ──────────────────────────────────────────────────────────── La escala roja de penny.flights rotada de tono a azul: mismos saturación y brillo en cada peldaño, así que el material se comporta exactamente igual (las sombras y tintes están calculados sobre el 500). */ --primary-50: #f4f8fe; --primary-100: #d3e6fd; --primary-200: #a1cbfc; --primary-300: #6fb0fb; --primary-400: #3d94f9; --primary-500: #0b7af7; /* ← el antiguo #F71E0B */ --primary-600: #096bd9; /* ← el antiguo #d91a09 (hover) */ --primary-700: #085ab8; --primary-800: #064996; --primary-900: #053975; --primary-rgb: 11, 122, 247; /* La display del logo como token, para que el wordmark no cargue con el nombre del archivo. Es una tipografía de TITULAR: sirve para el logo y, como mucho, para un rótulo corto — nunca para texto corrido, porque es unicase (las minúsculas se dibujan a altura de mayúscula) y a tamaño de párrafo sería ilegible. El resto del sitio sigue en Inter. */ --font-brand: 'Paladins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Liquid Glass motion — el muelle sobrepasa un pelín y vuelve, el "flow" del sistema de Apple; `--lg-ease` es la curva estándar para sombras/color. */ --lg-spring: cubic-bezier(0.34, 1.5, 0.5, 1); --lg-ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ══════════════════════════════════════════════════════════════════════ MODO CLARO / OSCURO — capa de tokens semánticos ────────────────────────────────────────────────────────────────────── El tema lo decide SIEMPRE EL SISTEMA: el claro es la base y la media query `prefers-color-scheme: dark` lo vuelve oscuro. Sin JS, sin parpadeo y sin interruptor — no hay override manual ni `data-theme`. Los canales de color van como "R G B" (sin comas) para poder aplicar alfa desde el consumidor: rgb(var(--c-ink) / 0.6). El azul `primary` y los verdes/ámbar semánticos son CONSTANTES: no se tematizan. ══════════════════════════════════════════════════════════════════════ */ /* ── CLARO (base) ── */ :root { color-scheme: light; --c-canvas: 238 241 246; /* #eef1f6 fondo de página/hero */ --c-elevated: 255 255 255; /* #ffffff superficie sólida elevada */ --c-elevated-hover: 241 245 250; /* #f1f5fa */ --c-chip: 238 241 245; /* #eef1f5 píldoras/meta */ --c-ink: 11 15 25; /* #0b0f19 titulares */ --c-body: 51 63 82; /* #333f52 texto */ --c-muted: 100 116 139; /* #64748b secundario */ --c-subtle: 148 163 184; /* #94a3b8 tenue */ --c-faint: 203 213 225; /* #cbd5e1 divisores/puntos */ --hairline: rgba(15, 23, 42, 0.10); --hairline-strong: rgba(15, 23, 42, 0.16); --pill: rgba(15, 23, 42, 0.05); --track: rgba(15, 23, 42, 0.06); --hover-soft: rgba(15, 23, 42, 0.06); --scrollbar: rgba(15, 23, 42, 0.20); --glass-top: rgba(255, 255, 255, 0.72); --glass-bottom: rgba(255, 255, 255, 0.52); --glass-hover-top: rgba(255, 255, 255, 0.85); --glass-hover-bottom: rgba(255, 255, 255, 0.62); --glass-shadow: 0 10px 30px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(15, 23, 42, 0.06); --glass-shadow-hover: 0 20px 44px rgba(15, 23, 42, 0.14), 0 5px 14px rgba(15, 23, 42, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(15, 23, 42, 0.08); --glass-edge: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 22%, rgba(255, 255, 255, 0) 50%, rgba(15, 23, 42, 0.02) 74%, rgba(255, 255, 255, 0.55) 100%); /* Vidrio TEÑIDO de marca: el mismo material, con el azul dentro. En penny.flights esto marcaba la isla de /alerts; aquí marca las fichas destacadas ("nuestra elección"). En claro el tinte es una escarcha azulada — el azul puro a esta opacidad sobre blanco vira a gris. */ --glass-brand-top: rgba(238, 245, 255, 0.82); --glass-brand-bottom: rgba(222, 236, 255, 0.58); --glass-brand-shadow: 0 10px 30px rgba(11, 80, 180, 0.14), 0 2px 8px rgba(11, 80, 180, 0.07), inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(11, 122, 247, 0.16); --glass-brand-edge: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(204, 226, 255, 0.35) 22%, rgba(255, 255, 255, 0) 50%, rgba(11, 122, 247, 0.06) 74%, rgba(165, 203, 255, 0.6) 100%); --panel-solid: linear-gradient(180deg, #ffffff, #f4f7fb); --fieldgroup-shadow: 0 8px 24px rgba(15, 23, 42, 0.10), inset 0 0 0 1px rgba(15, 23, 42, 0.10); --dock-top: rgba(255, 255, 255, 0.9); --dock-bottom: rgba(255, 255, 255, 0.6); --dock-hover-top: rgba(255, 255, 255, 0.98); --dock-hover-bottom: rgba(255, 255, 255, 0.72); --dock-shadow: 0 6px 18px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.08), inset 0 1px 0.5px rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(15, 23, 42, 0.06); --dock-hover-shadow: 0 14px 30px rgba(15, 23, 42, 0.16), 0 3px 8px rgba(15, 23, 42, 0.10), inset 0 1px 0.5px rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(15, 23, 42, 0.08); --dock-edge: linear-gradient(160deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 26%, rgba(255, 255, 255, 0) 52%, rgba(15, 23, 42, 0.02) 74%, rgba(255, 255, 255, 0.5) 100%); --dock-ink: rgba(15, 23, 42, 0.62); --dock-ink-hover: #0b0f19; --focus-ring: rgba(15, 23, 42, 0.5); --hero-glow-op: 0.5; /* resplandor decorativo tras la isla: atenuado en claro */ } /* ── OSCURO por preferencia del sistema ── */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; --c-canvas: 0 0 0; --c-elevated: 26 34 54; --c-elevated-hover: 37 51 73; --c-chip: 30 41 59; --c-ink: 255 255 255; --c-body: 219 226 236; --c-muted: 148 163 184; --c-subtle: 100 116 139; --c-faint: 71 85 105; --hairline: rgba(255, 255, 255, 0.10); --hairline-strong: rgba(255, 255, 255, 0.18); --pill: rgba(255, 255, 255, 0.06); --track: rgba(255, 255, 255, 0.10); --hover-soft: rgba(255, 255, 255, 0.14); --scrollbar: rgba(255, 255, 255, 0.18); --glass-top: rgba(255, 255, 255, 0.11); --glass-bottom: rgba(255, 255, 255, 0.045); --glass-hover-top: rgba(255, 255, 255, 0.17); --glass-hover-bottom: rgba(255, 255, 255, 0.07); --glass-shadow: 0 10px 36px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -10px 28px rgba(255, 255, 255, 0.03); --glass-shadow-hover: 0 22px 56px rgba(0, 0, 0, 0.46), 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.62), inset 0 0 0 1px rgba(255, 255, 255, 0.16), inset 0 -10px 28px rgba(255, 255, 255, 0.05); --glass-edge: linear-gradient(160deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.12) 22%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.06) 74%, rgba(255, 255, 255, 0.32) 100%); /* Vidrio de marca en oscuro: azul a muy poca alfa sobre el negro, más un rim azul. Sube algo más que la escarcha blanca del vidrio normal porque sobre negro el color se apaga antes que el blanco a la misma opacidad. */ --glass-brand-top: rgba(11, 122, 247, 0.22); --glass-brand-bottom: rgba(11, 122, 247, 0.06); --glass-brand-shadow: 0 10px 36px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.24), inset 0 1px 1px rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(11, 122, 247, 0.34), inset 0 -10px 28px rgba(11, 122, 247, 0.05); --glass-brand-edge: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(140, 190, 255, 0.24) 22%, rgba(255, 255, 255, 0) 50%, rgba(11, 122, 247, 0.16) 74%, rgba(105, 175, 255, 0.4) 100%); --panel-solid: linear-gradient(180deg, rgba(24, 26, 34, 0.96), rgba(13, 15, 21, 0.95)); --fieldgroup-shadow: 0 8px 24px rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(15, 23, 42, 0.04); --dock-top: rgba(255, 255, 255, 0.12); --dock-bottom: rgba(255, 255, 255, 0.045); --dock-hover-top: rgba(255, 255, 255, 0.19); --dock-hover-bottom: rgba(255, 255, 255, 0.08); --dock-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.22), inset 0 1px 0.5px rgba(255, 255, 255, 0.42), inset 0 0 0 1px rgba(255, 255, 255, 0.07); --dock-hover-shadow: 0 14px 30px rgba(0, 0, 0, 0.42), 0 3px 8px rgba(0, 0, 0, 0.26), inset 0 1px 0.5px rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.14); --dock-edge: linear-gradient(160deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.1) 26%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.05) 74%, rgba(255, 255, 255, 0.28) 100%); --dock-ink: rgba(255, 255, 255, 0.82); --dock-ink-hover: #ffffff; --focus-ring: rgba(255, 255, 255, 0.75); --hero-glow-op: 1; } } /* ══════════════════════════════════════════════════════════════════════ EL MATERIAL ══════════════════════════════════════════════════════════════════════ */ /* ── Liquid Glass ──────────────────────────────────────────────── Material tipo Apple (iOS 26 / macOS Tahoe) para las "islas" flotantes. Es autocontenido: pon la clase y deja el `border-radius` y el padding en el elemento — los pseudo-bordes heredan el radio. Tres ingredientes hacen el efecto: 1) translucidez + blur + saturate: el fondo se ve difuminado y con más color, la firma del material de Apple. 2) borde refractivo (::before enmascarado a 1px): brillo especular fuerte en el canto superior, se apaga, y vuelve como un destello suave abajo. 3) sombra flotante en capas + rims internos (inset) que dan grosor de vidrio. No pongas otro `box-shadow` en el mismo elemento: lo sobrescribiría. El realce "barato" va como `outline`, desacoplado. */ .liquid-glass { position: relative; isolation: isolate; border-radius: 1.25rem; /* Tinte translúcido tematizado: escarcha blanca sobre negro en oscuro, escarcha luminosa sobre luz en claro (tokens en :root, arriba). */ background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom)); -webkit-backdrop-filter: blur(20px) saturate(180%) brightness(1.06); backdrop-filter: blur(20px) saturate(180%) brightness(1.06); /* flotación + rim especular + hairline: negro/blanco en oscuro, neutro suave + hairline oscuro en claro (var --glass-shadow). */ box-shadow: var(--glass-shadow); } /* Refracción real: el vidrio actúa de LENTE y dobla el fondo en los cantos — el rasgo que separa el Liquid Glass del glassmorphism plano. Mejora progresiva: solo donde backdrop-filter acepta un filtro SVG (Chromium hoy). Donde no, queda el blur translúcido de arriba, intacto. El filtro #liquid-glass se define una sola vez, inline en el del index. */ @supports (backdrop-filter: url("#liquid-glass")) or (-webkit-backdrop-filter: url("#liquid-glass")) { .liquid-glass { -webkit-backdrop-filter: url(#liquid-glass) blur(7px) saturate(180%) brightness(1.06); backdrop-filter: url(#liquid-glass) blur(7px) saturate(180%) brightness(1.06); } } .liquid-glass::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; background: var(--glass-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* Islas interactivas (tarjetas): el vidrio se ELEVA con un muelle al pasar el ratón y se hunde al pulsar — el "flow" del sistema de Apple. */ .liquid-glass--interactive { transition: transform 0.45s var(--lg-spring), box-shadow 0.35s var(--lg-ease), background 0.35s var(--lg-ease); will-change: transform; } .liquid-glass--interactive:hover { transform: translateY(-4px) scale(1.006); background: linear-gradient(180deg, var(--glass-hover-top), var(--glass-hover-bottom)); box-shadow: var(--glass-shadow-hover); } .liquid-glass--interactive:active { transform: translateY(-1px) scale(0.992); transition: transform 0.13s var(--lg-ease), box-shadow 0.13s var(--lg-ease); } @media (prefers-reduced-motion: reduce) { .liquid-glass--interactive, .liquid-glass--interactive:active { transition: box-shadow 0.2s ease, background 0.2s ease; } .liquid-glass--interactive:hover, .liquid-glass--interactive:active { transform: none; } } /* ── Vidrio TEÑIDO de marca ────────────────────────────────────────── Es un MODIFICADOR: hereda el blur, la lente SVG y el ::before de `.liquid-glass`, y solo repinta el tinte, la sombra y el degradado del rim. Así una mejora del material llega a las dos variantes a la vez. */ .liquid-glass--brand { background: linear-gradient(180deg, var(--glass-brand-top), var(--glass-brand-bottom)); box-shadow: var(--glass-brand-shadow); } .liquid-glass--brand::before { background: var(--glass-brand-edge); } .liquid-glass--brand.liquid-glass--interactive:hover { box-shadow: var(--glass-brand-shadow), 0 18px 40px rgba(11, 122, 247, 0.22); } /* Panel sólido sobre vidrio (desplegables, hojas): el fondo translúcido de la isla se transparentaría a través y el texto quedaría ilegible. Conserva el blur, la sombra flotante y el rim; solo opaca el fondo. */ .glass-panel-solid { background: var(--panel-solid); } /* Lozenge de Liquid Glass para piezas pequeñas (insignias sobre las fotos de producto). Conserva el tinte de color de cada insignia y añade el vidrio: blur translúcido + rim especular. Sobre la foto se ve el color del producto a través del cristal — ahí es donde el material cobra vida. */ .liquid-chip { position: relative; -webkit-backdrop-filter: blur(7px) saturate(170%); backdrop-filter: blur(7px) saturate(170%); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } @supports (backdrop-filter: url("#liquid-glass-chip")) or (-webkit-backdrop-filter: url("#liquid-glass-chip")) { .liquid-chip { -webkit-backdrop-filter: url(#liquid-glass-chip) blur(3px) saturate(170%); backdrop-filter: url(#liquid-glass-chip) blur(3px) saturate(170%); } } /* ── Dock de accesos rápidos del hero ─────────────────────────────────── Cuadraditos estilo icono de app (iOS) en la banda entre el logo y la isla. Material Liquid Glass en gris translúcido por defecto; el que corresponde a la categoría actual se enciende en azul `primary` (aria-current="page"). Los iconos heredan el color de la baldosa vía `currentColor`, así que el estado (gris → tinta en hover → blanco sobre azul activo) es un único cambio de `color`. El radio se fija aquí para conservar la esquina continua de un icono de app. */ .hero-dock-tile { position: relative; isolation: isolate; border-radius: 16px; color: var(--dock-ink); background: linear-gradient(180deg, var(--dock-top), var(--dock-bottom)); -webkit-backdrop-filter: blur(7px) saturate(170%); backdrop-filter: blur(7px) saturate(170%); box-shadow: var(--dock-shadow); transition: transform 0.45s var(--lg-spring), box-shadow 0.35s var(--lg-ease), background 0.35s var(--lg-ease), color 0.35s var(--lg-ease); will-change: transform; } /* Refracción real (misma lente que .liquid-chip): solo donde backdrop-filter acepta un filtro SVG; si no, queda el blur translúcido de arriba. */ @supports (backdrop-filter: url("#liquid-glass-chip")) or (-webkit-backdrop-filter: url("#liquid-glass-chip")) { .hero-dock-tile { -webkit-backdrop-filter: url(#liquid-glass-chip) blur(3px) saturate(170%); backdrop-filter: url(#liquid-glass-chip) blur(3px) saturate(170%); } } /* Borde refractivo a 1px enmascarado: destello especular arriba, se apaga, y vuelve suave abajo — el mismo truco de máscara que `.liquid-glass::before`. */ .hero-dock-tile::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; background: var(--dock-edge); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } /* El contenido (icono o texto), por encima del rim: el ::before va a z-index 1, así que un hijo sin posicionar quedaría pintado DEBAJO del canto de vidrio. */ .hero-dock-tile svg, .hero-dock-tile .hero-dock-text { position: relative; z-index: 2; } /* El vidrio se eleva con un muelle al pasar el ratón y se hunde al pulsar. */ .hero-dock-tile:hover { transform: translateY(-3px) scale(1.045); color: var(--dock-ink-hover); background: linear-gradient(180deg, var(--dock-hover-top), var(--dock-hover-bottom)); box-shadow: var(--dock-hover-shadow); } .hero-dock-tile:active { transform: translateY(-1px) scale(0.965); transition: transform 0.13s var(--lg-ease), box-shadow 0.13s var(--lg-ease); } .hero-dock-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; } /* Marcado = categoría actual: azul `primary` SÓLIDO, el mismo #0B7AF7 del botón principal — no un degradado translúcido, para que el azul lea idéntico. En hover pasa a primary-600. El rim especular de `::before` sigue dando el canto de vidrio. */ .hero-dock-tile--active { color: #fff; background: var(--primary-500); box-shadow: 0 8px 22px rgba(11, 122, 247, 0.4), 0 2px 6px rgba(0, 0, 0, 0.28), inset 0 1px 0.5px rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.16); } .hero-dock-tile--active:hover { transform: translateY(-3px) scale(1.045); color: #fff; background: var(--primary-600); box-shadow: 0 16px 34px rgba(11, 122, 247, 0.48), 0 3px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0.5px rgba(255, 255, 255, 0.58), inset 0 0 0 1px rgba(255, 255, 255, 0.2); } @media (prefers-reduced-motion: reduce) { .hero-dock-tile, .hero-dock-tile:active { transition: box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; } .hero-dock-tile:hover, .hero-dock-tile--active:hover, .hero-dock-tile:active { transform: none; } } /* ── Resplandor del hero ───────────────────────────────────────────────── Manchas de color difuminadas DETRÁS de la isla y recortadas a su silueta: la página sigue limpia por fuera, pero el vidrio translúcido tiene algo que difuminar y refractar por dentro — ahí cobra vida la lente. Puramente decorativo. */ .hero-glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; opacity: var(--hero-glow-op); } .hero-glow span { position: absolute; border-radius: 9999px; filter: blur(64px); } .hero-glow span:nth-child(1) { left: 8%; top: -10%; width: 16rem; height: 16rem; background: rgba(11, 122, 247, 0.30); } .hero-glow span:nth-child(2) { right: 6%; bottom: -12%; width: 18rem; height: 18rem; background: rgba(14, 165, 233, 0.25); } .hero-glow span:nth-child(3) { left: 46%; top: 24%; width: 14rem; height: 14rem; background: rgba(139, 92, 246, 0.25); } /* ── Scrollbar fino (listas dentro del vidrio) ── */ .thin-scroll { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; } .thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; } .thin-scroll::-webkit-scrollbar-track { background: transparent; } .thin-scroll::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 9999px; } .thin-scroll::-webkit-scrollbar-thumb:hover { background: var(--hairline-strong); }