/* Pink — Design tokens * Sistema visual para creative studios (y adaptable a portfolios UGC premium). * Referencia: https://the-gum.com/ * Cada valor de este archivo tiene entrada en `mediciones.md`. */ :root { /* Color · paleta canónica --------------------------------------------- * FUERA el rosa. Existía como "acento cromático" heredado del sistema Pink, * pero en Bold no pintaba NADA: la sección que se llama .bgPink la sobreescribe * styles.css a --nut, el hover del nav también estaba redirigido a --nut, y las * utilidades .colorPink/.fill--pink/.ph--pink no las usaba ninguna plantilla. * Un color en la paleta que no se ve en la web no es una paleta, es un ruido: * hacía elegir por un rosa que nunca iba a aparecer. * El protagonista de verdad de esta piel es --nut: pinta TODOS los títulos de * sección, el fondo de contacto, la marca de agua, la tarjeta de acento y los * logos. Es el color que se cambia para cambiar el aspecto de la piel. */ --egg: #FFFAED; /* fondo base + tinta contrastante sobre color */ --nut: #C3BBA7; /* tan/avena · cuerpo secundario + fondos alt. */ --ink: #000000; /* tinta pura para titulares sobre egg */ --egg-hard: #EEE7D3; /* auxiliar · nav en reposo, "casi invisible" */ /* Superficie por defecto */ --bg: var(--egg); --fg: var(--ink); } /* ---- PALETAS DE BOLD ------------------------------------------------------ * Variantes de COLOR de la misma piel. Cambian estos CUATRO valores y nada más: * ni tipografía, ni ritmo, ni composición. Cada paleta conserva el PAPEL de * cada color, que es lo que hace que el diseño no se caiga: * * --nut EL QUE MANDA. Pinta todos los títulos de sección, el fondo * entero de contacto, la marca de agua de Fotos, la tarjeta de * acento y los logos. Cambiar la paleta es, sobre todo, cambiar * este. Tiene que leerse sobre --egg y aguantar texto --egg encima * (en contacto y en la tarjeta de acento el texto va en crema). * --egg el fondo base. Claro; nunca blanco puro. * --ink la tinta del cuerpo. Contraste alto sobre --egg. * --egg-hard el auxiliar "casi invisible": tarjetas, nav en reposo y el * titular grande de la portada. Un paso bajo --egg. * * Se activan con data-paleta en (lo pone Base.astro desde el contenido). * "original" NO tiene bloque: es la de arriba. * * Historia que conviene no perder: había un quinto color, --pink, heredado del * sistema Pink como "acento cromático". Se quitó porque no pintaba NADA en Bold * (ver la nota de arriba). El sistema Pink, la demo aprobada y Bold tenían los * cinco colores idénticos: lo que hacía que Pink se recordara ROSADO no era la * paleta, era que pintaba nueve superficies con ese rosa. Bold no pintaba * ninguna. Ese aspecto se recupera hoy con la paleta "rosa". * ------------------------------------------------------------------------- */ /* Rosa · el aspecto ROSADO del sistema Pink antiguo, recuperado como paleta. Aquí hay una historia que conviene no perder: el Pink antiguo y Bold de hoy tienen los CINCO colores idénticos. Lo que hacía que el antiguo se recordara "rosado" no era la paleta, era el REPARTO: pintaba nueve superficies con ese rosa (secciones enteras, el card-stack, la barra de carga, el contacto), mientras Bold solo pinta Contacto. Recuperar eso moviendo superficies habría cambiado el diseño de Bold para TODAS las paletas, y Bold está aprobado. Así que se recupera por donde toca: se tiñe la superficie base de rosa, y el rosa fuerte se queda de acento donde ya estaba. La web entera se lee rosada sin tocar ni una sección. */ :root[data-paleta="rosa"] { /* El protagonista ES el rosa del sistema Pink, ese que se quitó de la paleta Crema por no verse nunca. Aquí sí se ve: pinta los títulos de sección, el fondo entero de contacto, la marca de agua y los logos. */ --nut: #FF73A4; /* el rosa del sistema, ahora sí a la vista */ --egg: #FFF1F5; /* crema teñida de rosa · nunca blanco puro */ --ink: #24101A; /* casi negro, con temperatura rosada */ --egg-hard: #FBE0E8; } /* Cielo · azul cielo claro sobre blanco frío. Es la fría de las tres, para que haya rango de verdad y no dos versiones de lo cálido. Azul CLARO y alegre a propósito: el azul profundo que probamos antes dejaba la piel seria y pesada, y esto vende trabajo de creators, no un informe. */ :root[data-paleta="cielo"] { --nut: #7CC7EA; /* azul cielo · títulos, contacto, marca de agua, logos */ --egg: #F6FBFD; /* blanco con una gota de azul */ --ink: #16324A; /* azul noche suave, no negro */ --egg-hard: #E4F1F8; } :root { /* Overlays -------------------------------------------------------------*/ --backdrop-nut: rgba(0, 0, 0, 0.25); /* .workDetail__backdrop */ /* Tipografía · familias ------------------------------------------------*/ /* Display: Boldonse (Google Fonts, OFL) — sustituto SIL de social-gothic * Fallback stack: system + Archivo Black para robustez si Boldonse falla. */ --font-display: 'Boldonse', 'Archivo Black', 'Archivo', system-ui, sans-serif; --font-text: 'Archivo', system-ui, sans-serif; /* Tipografía · escala viewport-relative -------------------------------- * Titulares y nav-letters escalan con vw/vh — ver mediciones.md */ --title-size: 5.5vw; /* .title, section titles, us title */ --title-size-mobile: 8vw; /* override en móvil portrait <767px */ --title-line: 1; --nav-letter-size: 8vh; /* desktop · portfolio 9 items */ --nav-letter-size-land-coarse: 7vh; --nav-letter-size-portrait-md: 7vh; --nav-letter-size-mobile: 6vh; --nav-svg-letter-size: 6vh; --nav-svg-letter-size-land-coarse: 6vh; --nav-svg-letter-size-portrait-md: 6vh; --nav-svg-letter-size-mobile: 5vh; /* Tipografía · cuerpo (px) ---------------------------------------------*/ --size-lead: 35px; /* Archivo 300 · ls -1.05px */ --size-lead-md: 45px; /* tablet portrait */ --size-lead-mobile: 25px; /* móvil <767 */ --size-para: 24px; /* Archivo 300 · ls -0.72px */ --size-para-md: 30px; /* tablet portrait */ --size-list: 20px; /* Archivo 300 · ls -0.6px (li en servicios) */ --size-list-md: 24px; /* tablet portrait */ --size-sub-title: 24px; /* social-gothic 700 uppercase ls -0.72px */ --size-cursor: 30px; /* Archivo 500 · cursor-indicator + scroll */ --size-social: 18px; /* nav secondary links */ --size-legal: 14px; /* legal + address */ --size-body: 16px; /* body por defecto */ /* Tipografía · letter-spacing ------------------------------------------*/ /* Regla del estudio: ls ≈ -0.03em (proporcional al tamaño). */ --ls-title: -0.03em; /* 115.2 × -0.03 = -3.456px ✅ */ --ls-lead: -0.03em; /* 35 × -0.03 = -1.05px ✅ */ --ls-para: -0.03em; /* 24 × -0.03 = -0.72px ✅ */ --ls-list: -0.03em; /* 20 × -0.03 = -0.6px ✅ */ --ls-legal: -0.03em; /* 14 × -0.03 = -0.42px ✅ */ --ls-cursor: -0.03em; /* 30 × -0.03 = -0.9px ✅ */ /* Tipografía · pesos ---------------------------------------------------*/ --w-display: 700; --w-text-lt: 300; /* Archivo Light · body + lead */ --w-text-md: 500; /* Archivo Medium · sub-titulares + email hero */ /* Layout ---------------------------------------------------------------*/ --pad-x-desktop: 40px; /* padding lateral desktop (calibra por sección) */ --pad-x-mobile: 10px; /* móvil: width: calc(100vw - 20px) */ --toggle-size: 55px; /* .toggleMenu 55×55 */ --toggle-top: 20px; --toggle-right: 20px; --nav-z: 20; --toggle-z: 20; --cursor-z: 9; --backdrop-z: 12; /* Motion · duraciones --------------------------------------------------*/ --dur-fast: 0.2s; /* cursor opacity */ --dur-swap: 0.3s; /* opacity swaps (menu-link, color hover, toggle) */ --dur-move: 0.4s; /* transform swaps */ --dur-backdrop: 0.35s;/* workDetail__backdrop */ --dur-cross: 0.5s; /* front→back cross-fade */ --dur-nav: 0.6s; /* nav slide-up */ --dur-letter: 0.6s; /* keyframe letterIn */ --dur-bounce: 1s; /* keyframe bounce */ /* Motion · easings -----------------------------------------------------*/ --ease-nav: cubic-bezier(0.7, 0, 0.2, 1); /* nav slide + primary swaps */ --ease-basic: ease; /* letterIn, bounce */ /* Motion · stagger -----------------------------------------------------*/ --stagger-letter: 40ms; /* delay entre letras del title reveal */ /* Alturas de section por defecto --------------------------------------*/ --section-h: 100vh; --section-h-coarse: 100svh; /* iOS URL bar safe */ --section-h-mobile: 100dvh; } /* ----------------------------------------------------------------------- * Keyframes canónicos del sistema * ----------------------------------------------------------------------- */ @keyframes letterIn { 100% { transform: translateY(0); opacity: 1; } } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-10px); } } /* ----------------------------------------------------------------------- * Overrides responsive · corresponden a las media queries de la referencia * (los componentes leerán las variables sin volver a declarar sizes). * ----------------------------------------------------------------------- */ @media (max-width: 1024px), (pointer: coarse) { :root { /* En coarse pointer el swap cromático del nav se apaga a nut */ --nav-hover-color: var(--nut); } } @media (pointer: coarse) and (orientation: landscape) { :root { --nav-letter-size: var(--nav-letter-size-land-coarse); --nav-svg-letter-size: var(--nav-svg-letter-size-land-coarse); } } @media (pointer: coarse) and (orientation: portrait) and (min-width: 768px) { :root { --nav-letter-size: var(--nav-letter-size-portrait-md); --nav-svg-letter-size: var(--nav-svg-letter-size-portrait-md); --size-lead: var(--size-lead-md); --size-para: var(--size-para-md); --size-list: var(--size-list-md); } } @media (max-width: 767px) { :root { --title-size: var(--title-size-mobile); --nav-letter-size: var(--nav-letter-size-mobile); --nav-svg-letter-size: var(--nav-svg-letter-size-mobile); --size-lead: var(--size-lead-mobile); --pad-x-desktop: var(--pad-x-mobile); } } /* Default color del hover del nav (fine pointer / desktop). Apuntaba al rosa, pero styles.css ya lo redirigía a --nut, así que era letra muerta: ahora apunta directamente al protagonista de la paleta. */ :root { --nav-hover-color: var(--nut); }