/* ============================================================================= ANDERSON'S GIFT CARD v2 · BASE ----------------------------------------------------------------------------- Tokens, reset y tipografía. Todo lo demás se apoya en este archivo. Los colores son los MISMOS del landing (landing-giftcard/index.html), para que tienda y landing se sientan una sola cosa. Si el landing cambia de paleta, se cambia aquí y nada más. ORDEN DE CARGA (importa: cada hoja puede pisar a la anterior) 1. base.css <- este 2. tarjeta.css <- componente .gc-card 3. tienda.css <- pantallas y navegación 4. sitio.css <- encabezado y pie; pisa parte de tienda.css 5. gracias.css <- solo en gracias.html / thank-you.html ============================================================================= */ /* =========================================================================== 1 · TOKENS =========================================================================== */ :root{ /* --- Marca · paleta NAVY (misma que el landing) ----------------------- */ --navy: #16202F; /* navy: header, tarjetas, fondos */ --navy-2: #222E40; /* navy un paso más claro (superficie) */ --taupe: #4C5D70; /* acento azul-plata: acento principal */ --taupe-2: #5E7185; /* acento claro: hover y degradados */ /* --- Superficies ------------------------------------------------------ */ --bg: #ECEAE4; /* hueso: fondo de la app */ --bg-2: #E3E1D9; /* hueso un tono más hondo */ --surf: #ffffff; /* tarjetas de contenido, hojas */ --surf-2: #F4F2EC; /* superficie alterna */ /* --- Texto ------------------------------------------------------------ */ --text: #16202F; --muted: #4C5D70; /* apoyos y descripciones */ --muted-2: #8FA0B2; /* placeholders */ /* --- Líneas y estados ------------------------------------------------- */ --border: rgba(0,0,0,.10); --border-2: rgba(0,0,0,.16); --ok: #2E7D5B; --error: #B4232B; /* --- Radios ----------------------------------------------------------- */ --r-sm: 10px; --r: 16px; --r-lg: 24px; --r-xl: 32px; /* --- Sombras ---------------------------------------------------------- */ --sh-sm: 0 2px 8px -2px rgba(0,0,0,.10); --sh: 0 12px 32px -18px rgba(0,0,0,.28); --sh-lg: 0 28px 60px -30px rgba(0,0,0,.38); /* --- Medidas de la app ------------------------------------------------ */ --nav-h: 70px; /* alto del encabezado del SITIO — igual al landing */ --header-h: 58px; /* alto de la barra compacta de la app (móvil) */ --barra-h: 84px; /* alto de la barra de acción fija de abajo */ --ancho-max: 480px; /* la app se mantiene angosta incluso en desktop */ /* --- Movimiento ------------------------------------------------------- */ --t-rapido: .18s cubic-bezier(.4,0,.2,1); --t: .30s cubic-bezier(.4,0,.2,1); --t-suave: .45s cubic-bezier(.22,1,.36,1); /* --- Áreas seguras (notch / barra de gestos del iPhone) ---------------- */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } /* =========================================================================== 2 · RESET =========================================================================== */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 } html{ -webkit-text-size-adjust:100%; /* iOS no reescala al girar el teléfono */ scroll-behavior:smooth; /* Las pantallas entran deslizándose 26px desde un lado. Durante esa fracción de segundo el contenido se sale y el teléfono muestra una barra horizontal, así que se corta. ⚠️ PERO `overflow` en un ancestro —incluido `clip`— ROMPE el `position:sticky` de los descendientes. En el checkout el pedido tiene que quedarse pegado, así que ahí se desactiva el recorte; a cambio la pantalla de checkout entra sin desplazamiento lateral (ver tienda.css), con lo cual no hay nada que recortar. */ overflow-x:clip; } body{ font-family:'Inter',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; /* Sin resaltado azul al tocar en móvil: se siente app, no web */ -webkit-tap-highlight-color:transparent; } img,svg{ display:block; max-width:100% } button,input,select,textarea{ font:inherit; color:inherit } button{ background:none; border:0; cursor:pointer } a{ color:inherit; text-decoration:none } ul,ol{ list-style:none } /* =========================================================================== 3 · TIPOGRAFÍA =========================================================================== */ h1,h2,h3{ font-family:'Cinzel',Georgia,serif; /* títulos en Cinzel, igual que el landing */ color:#4C5D70; /* azul grisáceo: títulos sobre fondo claro */ font-weight:700; letter-spacing:.2px; /* Cinzel respira mejor sin tracking apretado */ line-height:1.14; text-wrap:balance; /* evita títulos con una palabra sola abajo */ } h1{ font-size:clamp(25px,6vw,33px) } h2{ font-size:clamp(20px,5vw,25px) } h3{ font-size:17px; letter-spacing:.3px } p{ text-wrap:pretty } /* Antetítulo en versalitas — el mismo recurso que usa el landing */ .kicker{ font-size:14px; letter-spacing:2.6px; font-weight:800; text-transform:uppercase; color:var(--taupe); } /* Texto de apoyo bajo un título */ .sub{ color:var(--muted); font-size:15px; margin-top:8px; } /* --------------------------------------------------------------------------- Idioma --------------------------------------------------------------------------- Cada texto se escribe dos veces y aquí se esconde el que no toca. El atributo data-lang lo pone js/idioma.js en . ContinuarContinue Lleva !important a propósito: hay reglas de componente más específicas (por ejemplo `.seg-op span{display:block}`) que si no ganarían y dejarían los DOS idiomas visibles a la vez. Es una utilidad de visibilidad: debe ganar siempre. -------------------------------------------------------------------------- */ [data-l]{ display:none !important } html[data-lang="es"] [data-l="es"], html[data-lang="en"] [data-l="en"]{ display:inline !important } /* Respaldo: si una página usa este CSS pero no carga js/idioma.js, no lleva data-lang y sin esta regla NO se vería ningún texto. Mostramos el español, que es el idioma por defecto. */ html:not([data-lang]) [data-l="es"]{ display:inline !important } /* Utilidades */ .center { text-align:center } .oculto { display:none !important } .solo-lector{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap } /* =========================================================================== 4 · ACCESIBILIDAD =========================================================================== */ /* Foco visible SOLO cuando se navega con teclado (no al tocar con el dedo) */ :focus-visible{ outline:2px solid var(--taupe); outline-offset:3px; border-radius:6px; } /* Respetar a quien pidió menos movimiento en su sistema */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }