/* ========================================================================== bb2026 — TOKENS Sistema de diseño: papel cálido, tinta carbón, acento verde atlántico. ========================================================================== */ :root { /* --- Color: papel --- */ --bb-paper: #F7F5F2; --bb-white: #FFFFFF; /* Fondo de los MARCOS de foto: el hueco que se ve mientras la persiana esta cerrada o mientras la imagen carga. Antes era --bb-ink-soft, un gris translucido, y se percibia como un agujero gris. Va BLANCO: el hueco tiene que leerse como pagina. Un solo sitio para todos ellos. */ --bb-frame-bg: var(--bb-white); /* Fondo de la pagina durante la CARGA de la portada: blanco puro, no el papel calido. Es lo que se ve debajo de la cortina de entrada y detras del hero mientras la persiana baja. */ --bb-load-bg: var(--bb-white); /* --- Color: tinta --- */ --bb-ink: #1C1B19; --bb-ink-soft: #58565322; /* --- Color: texto --- CONTRASTE (WCAG AA pide 4.5:1 en texto pequeno): --bb-body #565451 sobre papel #F7F5F2 -> 6.94:1 OK --bb-ink #1C1B19 sobre papel #F7F5F2 -> 15.82:1 OK --bb-label #A6A8AB sobre papel #F7F5F2 -> 2.19:1 NO CUMPLE Por eso --bb-label es valido SOLO sobre fondos OSCUROS (hero, overlay verde). Sobre papel usar --bb-body o --bb-ink, nunca --bb-label. */ --bb-body: #565451; --bb-label: #A6A8AB; /* --- Color: acento verde atlántico --- */ --bb-accent: #2E4A42; --bb-overlay: rgba(46, 74, 66, 0.95); /* --- Espaciado: escala modular base 8px --- */ --bb-s1: 8px; --bb-s2: 16px; --bb-s3: 24px; --bb-s4: 40px; --bb-s5: 64px; --bb-s6: 104px; --bb-s7: 168px; /* --- Tipografías (autoalojadas, ver fonts.css) --- */ --bb-font-display: 'Jost', 'Helvetica Neue', Arial, sans-serif; --bb-font-body: 'Mulish', 'Helvetica Neue', Arial, sans-serif; --bb-font-lyric: 'EB Garamond', Georgia, 'Times New Roman', serif; /* --- Escala tipográfica --- */ --bb-size-display-xl: clamp(3rem, 7vw, 5.5rem); --bb-size-display-l: clamp(2rem, 4.5vw, 3.25rem); --bb-size-lyric: clamp(1.75rem, 3.4vw, 3.125rem); --bb-size-body: 1.0625rem; /* 17px */ /* --- Micro-etiqueta (rotulos de seccion y texto de .bb-tag) --- Estuvo en 9px / 0.33em copiando literalmente la referencia, donde es un recurso DECORATIVO. Aqui es un rotulo INFORMATIVO (MANIFIESTO, LO QUE FOTOGRAFIO, el texto de la caja-etiqueta) y a 9px no se leia. Se sube a 11px y se baja el tracking en proporcion: 0.33em a 11px seria excesivo y ademas no cabria en la caja. MEDIDO con la Jost 500 autoalojada (fontTools: suma de advances + letter-spacing por caracter, texto en mayusculas). Palabra mas ancha del sistema: PONTEVEDRA. 11px / 0.16em -> 86.2px Ancho util de la caja = lado - 2 x padding (8px): escritorio 120 - 16 = 104px -> holgura 17.8px CABE movil 108 - 16 = 92px -> holgura 5.8px CABE Con la caja movil anterior (96px) el util era 80px y PONTEVEDRA ya desbordaba 5.8px incluso a 9px: por eso la caja movil sube a 108. Los rotulos sueltos no van en caja, asi que conservan algo mas de tracking (0.18em) para no perder el aire editorial. */ --bb-size-label: 0.6875rem; /* 11px */ --bb-track-label: 0.18em; /* rotulo suelto, sin caja */ --bb-track-tag: 0.16em; /* texto dentro de la caja-etiqueta */ /* --- Retícula --- */ --bb-max: 1512px; --bb-gutter: var(--bb-s3); /* --- Cabecera --- */ --bb-bar-h: 72px; /* --- Caja-etiqueta firma --- 108 en movil (no 96): con la micro-etiqueta a 11px la palabra mas ancha del sistema (PONTEVEDRA, 86.2px medidos) necesita 92px utiles. Ver el bloque de medidas de --bb-size-label. */ --bb-tag-size: 108px; /* --- Motion --- */ --bb-ease: cubic-bezier(0.22, 1, 0.36, 1); --bb-dur: 0.7s; /* --- PERSIANAS: duracion y curva --- Tres recortes, cada uno en su sitio. Los VALORES de los recortes que usa el JS estan en assets/js/blind.js (CLIP_DIAG_CLOSED/OPEN, CLIP_UP_CLOSED, CLIP_DOWN_CLOSED, CLIP_OPEN); aqui solo el tiempo y la curva: DIAGONAL — SOLO el paso de una foto del hero a la siguiente. Se abre desde la esquina INFERIOR DERECHA con un triangulo que crece hasta contener el rectangulo completo. La foto entrante ya esta en su sitio y a tamaño completo: NO se desplaza, solo se anima su recorte, asi que no puede quedar un punto de pantalla sin foto. VERTICAL DESCENDENTE (arriba -> abajo) — entrada del hero al cargar la pagina y banner de la CTA final. VERTICAL ASCENDENTE (abajo -> arriba) — imagenes al entrar en pantalla, incluidos los 6 paneles de servicio. La curva es simetrica de entrada y salida (ease-in-out) y NO sobrepasa el destino. El rebote elastico anterior se ha retirado: era justo lo que se rechazo por brusco, y ademas obligaba a un 6% de sobreancho. Duracion y curva viven AQUI (son sistema de diseño) y el JS las lee con getComputedStyle, para no tenerlas escritas en dos sitios. La cuenta de cobertura del triangulo esta en home-blind.css, bloque ARITMETICA DE LA PERSIANA DIAGONAL. */ --bb-ease-blind: cubic-bezier(0.65, 0, 0.35, 1); --bb-dur-blind: 1.6s; /* verticales: entrada del hero y banner CTA */ --bb-dur-reveal: 1.9s; /* resto de imagenes: al entrar en pantalla */ /* DIAGONAL — curva y duracion PROPIAS (peticion: "mas liquida"). La clienta pide la sensacion con la que pasan las fotos en ryanedy. MEDIDO alli: recorrido completo en ~1s con un ease-out muy marcado (arranque decidido y frenada larga, sin rebote): ~39, 82, 125, 134, 167, 160 px por cada 46 ms al arrancar, y 33, 31, 24, 16, 13 al final. cubic-bezier(0.16, 1, 0.3, 1) reproduce ese reparto: a la mitad del tiempo ya lleva ~96% del recorrido. Se separan de --bb-*-blind a proposito: asi la diagonal se afina en UN numero sin tocar las verticales (que estan aprobadas). */ --bb-ease-diag: cubic-bezier(0.16, 1, 0.3, 1); --bb-dur-diag: 1.2s; /* CORTINA DE ENTRADA de la portada (logotipo centrado sobre blanco). Espera corta + desvanecido; el hero arranca justo despues, para que el orden se lea "primero el logo, luego la foto bajando". Los tres valores suman poco a proposito: no debe retrasar el LCP. */ --bb-delay-curtain: 0.45s; /* cuanto se sostiene el logotipo */ --bb-dur-curtain: 0.5s; /* cuanto tarda en desvanecerse */ --bb-delay-hero: 0.55s; /* cuando arranca la persiana del hero */ } @media (min-width: 768px) { :root { --bb-gutter: var(--bb-s4); --bb-bar-h: 88px; --bb-tag-size: 120px; } } /* ========================================================================== Clases de escala tipográfica (reutilizables en cualquier plantilla) ========================================================================== */ .bb-display-xl { font-family: var(--bb-font-display); font-weight: 700; font-size: var(--bb-size-display-xl); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.08; margin: 0; } .bb-display-l { font-family: var(--bb-font-display); font-weight: 700; font-size: var(--bb-size-display-l); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.12; margin: 0; } .bb-lyric { font-family: var(--bb-font-lyric); font-weight: 400; font-style: italic; font-size: var(--bb-size-lyric); line-height: 1.25; color: var(--bb-ink); margin: 0; } .bb-body { font-family: var(--bb-font-body); font-weight: 400; font-size: var(--bb-size-body); line-height: 1.76; color: var(--bb-body); } .bb-label { font-family: var(--bb-font-display); font-weight: 500; font-size: var(--bb-size-label); text-transform: uppercase; letter-spacing: var(--bb-track-label); color: var(--bb-label); line-height: 1.4; }