/* ========================================================= FONTS ========================================================= */ @font-face{ font-family:'Montserrat Variable'; src:url('../fonts/MONTSERRAT-VARIABLEFONT_WGHT.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:'Janna LT Regular'; src:url('../fonts/JANNA%20LT%20REGULAR.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } /* used only for the "TÉCNICAMENTE ESPRESSO" wordmark treatment */ @font-face{ font-family:'Optima Normal'; src:url('../fonts/OPTIMA_normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'Optima Bold'; src:url('../fonts/OPTIMA_bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* ========================================================= GLOBAL VARIABLES ========================================================= */ :root{ --dark:#1C1C1C; --cream:#E4D5B7; --font-title:'Montserrat Variable', Arial, sans-serif; --font-body:'Janna LT Regular', Georgia, serif; --accent-triangle:#D21D1B; --accent-larocca:#0091B3; --accent-markibar:#C31A4B; --accent-cunill:#C54039; --accent-remidag:#27A95B; --accent-eureka:#880000; --ease:cubic-bezier(.4,0,.2,1); /* ========================================================= FROZEN VIEWPORT UNITS — the fixed-scale/anti-reflow mechanism. Every structural "Nvw" value in this stylesheet is written as calc(N * var(--frozen-vw)) instead of the native vw unit. The default below (1vw) makes this behave exactly like plain vw until the lock script in overrides this custom property with a FIXED PX value — recomputed only on a genuine window resize, and deliberately left untouched when window.innerWidth only changed because of browser zoom (Ctrl +/-, pinch-zoom, etc. — detected via the devicePixelRatio heuristic, see the script tag near the top of ). Net effect: the HERO and every major section keep the exact same composition at any zoom level, but still adapt once to a genuinely different window/device size. See also the FIXED-SCALE script in . (There is deliberately no --frozen-vh: the HERO now uses aspect-ratio instead of a viewport-height value — see .hero below — so it never depends on the device's own physical height, which is what made it balloon into a tall portrait box on real phones even with the width pinned to the desktop reference.) */ --frozen-vw:1vw; /* Single shared inset for the locked composition. Both .site-frame and .floating-header read this SAME variable, so the fixed-position header can never drift a hair off from the frame's real edge — previously they were two separately-computed calc() expressions that could round a pixel apart, causing a hairline gap/strip. Flat 30px cap (not a vw-proportional value): gives the hero/frame the maximum available width at any screen size, per request. */ --frame-inset: 30px; /* UNIFIED HEADER STACK sizing — the ticker strip + the header bar below it, both fixed to the viewport top at every screen size. Redefined smaller at the 680px tier for real phones; everything that depends on the total stack height (.hero's margin-top, the flyout menu's top) reads from these same two variables, so they never need to be recalculated by hand in more than one place. */ --ticker-h: 22px; --header-bar-h: 74px; } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} /* Anclas del menú (¿Quiénes somos? / Servicio técnico): dejan espacio arriba igual a la cinta + el header fijo, para que la sección no quede tapada/mordida por el header al saltar. */ #quienes-somos{ scroll-margin-top:calc(var(--ticker-h) + var(--header-bar-h) + 24px); } /* Servicio técnico: que arranque justo en la foto (sin la franja crema de arriba). Se resta el margin-top propio del bloque .tec-espresso. */ #tecnicamente-espresso{ scroll-margin-top:calc(var(--ticker-h) + var(--header-bar-h)); } html,body{overflow-x:hidden;} body{ font-family:var(--font-body); background:var(--dark); /* #1C1C1C dead space — not pure black */ color:var(--dark); line-height:1.5; } /* ========================================================= SITE FRAME — locked-composition wrapper. The viewport meta stays "width=device-width, initial-scale=1.0" (a fixed "width=1280" meta previously made the site look artificially zoomed out — rejected). Instead the lock happens purely in CSS: symmetric left/right margins of --frame-inset produce the exact same ~90vw (capped at 1800px) composition as before, but expressed as the SAME shared variable that .floating-header also reads for its fixed-position left offset — guaranteeing the two can never render a pixel apart. Body's dark #1C1C1C fills any lateral dead space — never pure black. ========================================================= */ .site-frame{ position:relative; margin-left:var(--frame-inset); margin-right:var(--frame-inset); background:var(--cream); overflow-x:hidden; } img{display:block;max-width:100%;} h1,h2,h3{font-family:var(--font-title);} a{color:inherit;text-decoration:none;} button{font-family:var(--font-title);border:none;background:none;cursor:pointer;} .uppercase{text-transform:uppercase;} /* NOTE: the custom "9bares_offical-font.woff2" treatment was removed — the font file was corrupted/truncated on every upload attempt and never rendered correctly. Per the current rule, every visible brand-name mention ("9bares" / "9BARES" / "9 bares" / "9 BARES") is now just wrapped in instead, inheriting the existing font-family of its own section/context (no dedicated class needed — "strong" already carries its own default bold weight, and every section here already sets its own font-family upstream). */ .sr-only{ position:absolute; width:1px;height:1px; padding:0;margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} } /* ========================================================= FLOATING HEADER — left-edge tab/card, aligned with the exact left edge of the hero carousel/site-frame composition (not the raw browser edge). Uses the SAME --frame-inset variable as .site-frame (see GLOBAL VARIABLES), so the dark block always starts exactly where the frame starts — no independent formula that could drift a pixel apart and show a hairline gap/strip. The logo asset (icon/9bares_LOGO-flotante_Wh.svg) is alpha-only, so the dark #1C1C1C rectangular tab is built here in CSS instead of being baked into the SVG. The block is wide (generous horizontal padding) for proper breathing room around the logo; padding stays slightly biased right so the logo sits a little right of dead-center. Shares the same top + height as .hero-badge so both feel like one aligned header line (see HEADER ROW ALIGNMENT below). ========================================================= */ .floating-header{ position:fixed; top:var(--ticker-h); left:0; right:0; width:auto; height:var(--header-bar-h); z-index:300; display:flex; align-items:center; justify-content:flex-start; background:var(--dark); padding:0 28px 0 40px; /* full-width unified header bar: hamburger+logo stay left-aligned; the slogan+language badge (.hero-header-right, see below) docks to the right of this SAME row via its own fixed positioning — same top+height, so the two read as one continuous bar even though they're separate elements. */ } .floating-logo{ height:48px; /* enlarged from 38px, per request */ width:auto; animation:headerLogoGlow 4s ease-in-out infinite; } /* subtle intermittent glow — mostly off, briefly rises to a soft cream glow once every 4s cycle, then fades back out. Elegant, not flashy: peak is a gentle drop-shadow, no scale/brightness change. */ @keyframes headerLogoGlow{ 0%, 88%, 100%{ filter:drop-shadow(0 0 0 rgba(228,213,183,0)); } 94%{ filter:drop-shadow(0 0 9px rgba(228,213,183,.6)); } } /* ========================================================= MOBILE HEADER BRAND SWAP — solo en teléfonos. El logo 9bares queda centrado en el header y cada 5s hace un swipe-up con desvanecimiento que muestra el slogan, y vuelve al logo, en loop. En desktop está oculto: no cambia nada del diseño actual. ========================================================= */ .mobile-brand-swap{ display:none; } /* Ciclo total 13s = logo 8s + slogan 5s. El swipe-up queda CONTENIDO dentro del header gracias a overflow:hidden en el contenedor. */ @keyframes brandSwapLogo{ 0% { opacity:1; transform:translateY(0); } /* logo visible */ 61.54% { opacity:1; transform:translateY(0); } /* ...hasta los 8s */ 63% { opacity:0; transform:translateY(-100%); } /* swipe up + fade out */ 63.1% { opacity:0; transform:translateY(100%); } /* reset abajo (invisible) */ 98.5% { opacity:0; transform:translateY(100%); } 100% { opacity:1; transform:translateY(0); } /* vuelve a entrar */ } @keyframes brandSwapSlogan{ 0% { opacity:0; transform:translateY(-100%); } 0.1% { opacity:0; transform:translateY(100%); } /* esperando abajo */ 61.54% { opacity:0; transform:translateY(100%); } 63% { opacity:1; transform:translateY(0); } /* swipe up + fade in (a los 8s) */ 98.5% { opacity:1; transform:translateY(0); } /* visible ~5s */ 100% { opacity:0; transform:translateY(-100%); } /* swipe up + fade out */ } @media (max-width:680px){ /* el logo de la izquierda y el slogan de la derecha se ocultan: ahora ese contenido vive en el swap centrado */ .floating-header .floating-logo{ display:none; } .hero-badge p{ display:none; } .mobile-brand-swap{ display:block; position:absolute; inset:0; z-index:2; overflow:hidden; /* el swipe no se sale del header */ pointer-events:none; /* los taps pasan al menú/idiomas */ } .mobile-brand-swap .swap-item{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; will-change:transform,opacity; } .swap-logo img{ height:32px; width:auto; display:block; } .swap-slogan{ font-family:var(--font-body); font-weight:400; font-size:13px; letter-spacing:.3px; white-space:nowrap; color:var(--cream); } .swap-logo{ animation:brandSwapLogo 13s ease-in-out infinite; } .swap-slogan{ animation:brandSwapSlogan 13s ease-in-out infinite; } } /* accesibilidad: si el usuario pidió menos movimiento, sin animación (queda solo el logo fijo, centrado). */ @media (max-width:680px) and (prefers-reduced-motion:reduce){ .swap-logo{ animation:none; opacity:1; transform:none; } .swap-slogan{ display:none; } } /* ========================================================= HEADER MENU ICON — three plain horizontal lines, sits to the left of the 9bares logo inside the same dark tab. Minimal, no circle/rounded button, no heavy hamburger UI. ========================================================= */ .header-menu-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width:22px; height:16px; margin-right:22px; flex-shrink:0; cursor:pointer; } .header-menu-toggle span{ display:block; width:100%; height:2px; background:#787878; transition:background .3s var(--ease); } .header-menu-toggle:hover span{background:#9c9c9c;} /* sliding panel with the menu items — now shares the EXACT SAME left edge as the header tab (--frame-inset), not an offset formula: this is what keeps the button-container itself aligned to the logo's own container, per request. Each item's left PADDING (not the box) is what pushes the visible label text to start under the "9" — see .header-menu-item below. */ .header-menu-panel{ position:fixed; top:calc(var(--ticker-h) + var(--header-bar-h) + 10px); left:var(--frame-inset); z-index:290; display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease); } .header-menu-panel.open{ opacity:1; visibility:visible; transform:translateY(0); } .header-menu-item{ display:block; width:100%; background:rgba(28,28,28,0.70); color:var(--cream); font-family:var(--font-title); font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; text-align:left; /* explicit: