/* ═════════════════════════════════════════════════════════════════ TheNomba · 1000 Nombas — Design Tokens ═════════════════════════════════════════════════════════════════ Paleta: la de la marca, sin naranjas. Las semillas salen de los assets reales (site/brand/logos/) y de los tokens de SUPRA CRM: #D0FD00 lima — el color del wordmark. El acento. #96B800 lima apagado — = --temp-hot del CRM #18D591 esmeralda neón — la energía fría del emblema #063F32 esmeralda honda — el material del emblema facetado #F7F8E5 crema — tipografía y núcleo incandescente #070706 obsidiana — el vacío EL FUEGO ES LAVA NEÓN VERDE, no ámbar: verde honda -> esmeralda -> lima incandescente -> núcleo crema. Ninguna de las cuatro semillas de marca es naranja, así que el "volcán" tampoco. ═════════════════════════════════════════════════════════════════ */ :root{ /* ── base ─────────────────────────────────────────────────────── */ --obsidian: #070706; --carbon: #0D110C; /* carbón con tinte verde, no neutro */ --bg-base: var(--obsidian); --surface: #111710; --surface-2: #18200F; /* ── tipografía sobre oscuro ──────────────────────────────────── */ --cream: #F7F8E5; --text: var(--cream); --text-dim: rgba(247, 248, 229, .62); --text-mute: rgba(247, 248, 229, .38); /* ── acentos ──────────────────────────────────────────────────── */ --lime: #D0FD00; --lime-dim: #96B800; --lime-olive: #4A6400; --emerald-neon: #18D591; --emerald-deep: #063F32; --emerald: #0B5B47; --gold: #B88A37; /* solo filos y reglas, nunca masas */ --stone: #6B7263; --lime-bg: rgba(208, 253, 0, .14); --lime-border: rgba(208, 253, 0, .42); --lime-glow: rgba(208, 253, 0, .45); --emerald-bg: rgba(24, 213, 145, .10); --emerald-border:rgba(24, 213, 145, .32); --border-subtle: rgba(247, 248, 229, .06); --border: rgba(247, 248, 229, .10); --border-strong: rgba(247, 248, 229, .18); /* ── la lava (rampa de fuego verde) ──────────────────────────── */ --lava-ash: #0A1608; --lava-deep: var(--emerald-deep); --lava-neon: var(--emerald-neon); --lava-hot: var(--lime); --lava-core: var(--cream); /* ── tipografía ───────────────────────────────────────────────── */ /* Beaufort Pro solo tiene DOS redondas en los assets de marca (Light 300 y Medium 500). Los ficheros llamados "Regular" y "Heavy" son en realidad Italic y Heavy Italic: se auditó el name table de los cuatro OTF y de ahí venía el bold-italic que no habíamos pedido. Aquí solo entran las redondas. */ --font-display: 'Beaufort Pro', 'Fraunces', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ── radios ───────────────────────────────────────────────────── */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 9999px; /* ── motion ─────────────────────────────────────────────────────── ease IN-OUT de verdad para entradas y salidas: arranca lento, cruza rápido, frena. La curva anterior (.22,1,.36,1) es un expo-OUT: entraba de golpe. Esta es easeInOutCubic. */ --ease: cubic-bezier(.65, 0, .35, 1); --ease-soft: cubic-bezier(.45, 0, .55, 1); --motion-fast: 140ms var(--ease); --motion-base: 220ms var(--ease); --motion-slow: 340ms var(--ease); } /* ═════════════════════════════════════════════════════════════════ Tipografía autoalojada — SOLO REDONDAS Rangos de peso deliberados: declarar Medium como 500-700 evita que el navegador SINTETICE un falso negrita cuando el CSS pide 600 o 700 (el faux-bold es lo que ensuciaba los titulares). Con font-synthesis:none, además, ningún motor puede inventarse una cursiva o un negrita que no existan en el fichero. ═════════════════════════════════════════════════════════════════ */ @font-face{ font-family:'Beaufort Pro'; src:url('../fonts/beaufort-pro-light.woff2') format('woff2'); font-weight:300 400; font-style:normal; font-display:swap; } @font-face{ font-family:'Beaufort Pro'; src:url('../fonts/beaufort-pro-medium.woff2') format('woff2'); font-weight:500 700; font-style:normal; font-display:swap; } @font-face{ font-family:'Inter'; src:url('../fonts/inter.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; } /* Cinturón de seguridad global: nada de cursivas ni negritas sintéticas. Si un peso no existe en el fichero, se usa el más cercano REAL en vez de deformar el glifo. */ html{ font-synthesis: none; -webkit-font-synthesis: none; } /* ── Titular neón verdoso metálico ──────────────────────────────── UNA SOLA CAPA de texto. La versión anterior duplicaba el titular en un segundo para pintar la fisura encima, y ese duplicado se veía como texto fantasma desalineado. Ahora: relleno de metal verde oscuro por background-clip, filo neón por text-stroke, y el resplandor por drop-shadow. Un nodo, texto real, seleccionable e indexable. paint-order:stroke fill pone el filo POR DETRÁS del relleno, así que engrosa el glifo desde fuera sin comerse el interior — que es justo el "súbele un poco al peso" que no puede dar el fichero (Beaufort no tiene redonda por encima de Medium 500). */ .title-neon{ font-family:var(--font-display); font-weight:500; color:transparent; /* 180deg EXACTOS, no 176. Con 4° de inclinación sobre una caja de 736x165 el degradado deriva 51 px en vertical de un extremo al otro: el lado izquierdo cogía las paradas claras y el derecho las oscuras, así que "993" salía brillante y "1.000" apagado en el MISMO titular. Las dos bandas claras (0-22 % y el rebote del 58 %) son lo que hace que lea como metal pulido y no como texto con degradado. */ /* El metal se lee por el CONTRASTE DENTRO del glifo: zonas casi blancas pegadas a zonas casi negras. Un degradado de tonos medios, aunque sea verde, lee como "texto de color", no como metal. De ahí el rango largo y el rebote fuerte del 62 %. */ background:linear-gradient(180deg, #FBFFF2 0%, /* filo alto: casi blanco */ #E4F7B4 13%, /* lima pálido pulido */ #A6D172 32%, #43682F 49%, /* sombra media: el quiebre que hace metal */ #C8EE8A 61%, /* rebote de luz fuerte */ #6A9440 80%, #35521F 100%); /* canto inferior */ -webkit-background-clip:text; background-clip:text; /* El engrosado va con text-shadow, NO con -webkit-text-stroke. Blink acepta paint-order pero lo IGNORA en texto HTML (solo lo respeta en SVG), así que el stroke se pintaba ENCIMA del relleno y se comía los trazos finos: el "1.000" salía hueco, en contorno. text-shadow siempre se pinta por DETRÁS del glifo, así que ocho copias a 1 px engrosan desde fuera —el "súbele un poco al peso" que el fichero no puede dar, porque Beaufort no tiene redonda por encima de Medium 500— y de paso dejan el canto en lima neón. */ text-shadow: /* engrosado: cuatro copias en el VERDE del metal, no en lima. Con lima opaco las ocho sombras se sumaban y tapaban el relleno: el titular salía plano, de neón puro, sin cuerpo metálico. En verde medio solo engordan la silueta. */ .7px 0 0 rgba(150,196,96,.75), -.7px 0 0 rgba(150,196,96,.75), 0 .8px 0 rgba(40,62,26,.9), 0 -.7px 0 rgba(233,250,190,.8), /* y el neón queda como HALO alrededor, que es donde se lee como neón */ 0 0 10px rgba(208,253,0,.55), 0 0 30px rgba(208,253,0,.3), 0 0 66px rgba(24,213,145,.2); filter:drop-shadow(0 10px 24px rgba(0,0,0,.7)); /* solo el asiento */ } .title-neon::selection{ color:var(--cream); background:var(--emerald-deep) } /* En el clímax el fondo es una explosión de luz verde: el mismo metal que destaca sobre negro se queda corto. Ahí el titular sube un punto de luz y dobla el halo, para seguir siendo el objeto más brillante del encuadre. */ .sec--climax .title-neon{ background:linear-gradient(180deg, #FFFFFA 0%, #F0FDD2 12%, #C4E895 30%, #5A8440 48%, #E2F7A8 60%, #86B455 80%, #48682C 100%); -webkit-background-clip:text; background-clip:text; text-shadow: .8px 0 0 rgba(178,222,120,.8), -.8px 0 0 rgba(178,222,120,.8), 0 .9px 0 rgba(46,70,30,.92), 0 -.8px 0 rgba(245,255,214,.85), /* El halo apretado iba a 14px/.7 y florecía DENTRO de las contraformas: el degradado metálico se empastaba y el titular salía plano. El halo grande queda (es el neón); el de contacto se recoge. */ 0 0 9px rgba(208,253,0,.42), 0 0 44px rgba(208,253,0,.4), 0 0 96px rgba(24,213,145,.26); } /* En cuerpos pequeños ocho sombras a 1 px empastan las contraformas: el filo se adelgaza y el halo se recoge. */ @media (max-width:640px){ .title-neon{ text-shadow: .6px 0 0 rgba(208,253,0,.42), -.6px 0 0 rgba(208,253,0,.42), 0 .6px 0 rgba(208,253,0,.42), 0 -.6px 0 rgba(208,253,0,.42), 0 0 12px rgba(208,253,0,.3); } }