/* The Joker Barbershop — lo que no es una utilidad de Tailwind. * * Aquí solo viven los @font-face, los @keyframes, el reset mínimo y el bloque * de movimiento reducido. Todo lo demás (colores, tipografías, espaciados) * son clases de Tailwind con los tokens declarados en el . * * Los woff2 son los subsets `latin` de Google Fonts servidos desde aquí: ningún * carácter de la web necesita `latin-ext`. El único glifo fuera de `latin` es * ★ (U+2605), que cae en fuente de sistema. */ @font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/anton-400.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/barlow-400.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-500.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-600.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/barlow-condensed-500.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/barlow-condensed-600.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/barlow-condensed-700.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/jetbrains-mono-400.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/jetbrains-mono-400.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html, body { margin:0; padding:0; background:#000; } /* Tailwind va sin preflight (la maqueta trae su propio reset); de él solo adoptamos la convención de bordes, o las utilidades border-* no pintan. Y no vale poner border-solid: pinta los cuatro lados a 3px. */ *, ::before, ::after { border-width: 0; border-style: solid; } * { box-sizing:border-box; } a { color:#E67E22; text-decoration:none; } a:hover { color:#F2A65A; } ::selection { background:#D4AF37; color:#000; } @keyframes jokerGlow { 0%,100% { opacity:.55; transform:scale(1);} 50% { opacity:.9; transform:scale(1.04);} } @keyframes tickerL { from { transform:translate3d(0,0,0);} to { transform:translate3d(-50%,0,0);} } @keyframes tickerR { from { transform:translate3d(-50%,0,0);} to { transform:translate3d(0,0,0);} } @keyframes spinSlow { from { transform:rotate(0);} to { transform:rotate(360deg);} } @keyframes spinBack { from { transform:rotate(360deg);} to { transform:rotate(0);} } @keyframes riseIn { from { transform:translateY(115%);} to { transform:translateY(0);} } @keyframes fadeUp { from { opacity:0; transform:translateY(18px);} to { opacity:1; transform:translateY(0);} } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes lbIn { from { opacity:0; transform:scale(.97); } to { opacity:1; transform:scale(1); } } @keyframes sweep { 0% { transform:translateX(-120%);} 55%,100% { transform:translateX(320%);} } /* Recorte lateral del envoltorio. * * No vale `overflow-x:hidden` a secas: con `overflow-y:visible` el navegador * lo promociona a `auto`, el div se convierte en contenedor de scroll y la * cabecera `sticky` pasa a resolverse contra un scrollport que nunca se mueve * — o sea, deja de pegarse y el botón de reservar se va con el scroll. * `overflow-x:clip` recorta igual sin crear contenedor de scroll. El `hidden` * de la línea de arriba es el suelo para quien no entienda `clip` * (Safari < 16): recorta, pero ahí la cabecera no se pega. */ .jk-wrap { overflow-x: hidden; overflow-x: clip; } .jk-galtrack { scrollbar-width:none; -ms-overflow-style:none; } /* Con pocas fotos el carrusel no recorre nada: galeria.js marca el contenedor y aquí se retiran las flechas y la barra de progreso. */ .jk-galwrap.sin-carrusel .jk-galnav, .jk-galwrap.sin-carrusel + .jk-galbar { display:none; } .jk-galtrack::-webkit-scrollbar { display:none; } /* ── Base ─────────────────────────────────────────────────────── */ /* --hdr es la altura de la cabecera. La leen las clases min-h-[calc(100svh-var(--hdr))] y scroll-mt-[var(--hdr)]; si cambia el padding de la cabecera hay que recalcularla. 69px = 44 del botón + 12+12 de padding + 1 de filete 61px = 44 del botón + 8+ 8 de padding + 1 de filete --tickers es lo que suman las dos marquesinas del hero (la dorada de arriba y la naranja de abajo). El emblema la resta para saber cuánto alto le queda, y así el banner entero cabe en la primera pantalla. Sale del tamaño de letra y el padding de cada banda; si se tocan, recalcularla: 92px = 50 (Anton 20px + 9+9) + 42 (Anton 19px + 7+7) 66px = 36 (Anton 15px + 6+6) + 30 (Anton 13,5px + 5+5) */ :root { --hdr: 69px; --tickers: 92px; } html { scroll-behavior: smooth; } a:focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; } @media (max-width: 760px) { :root { --hdr: 61px; --tickers: 66px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } }