/* ===================================================================== COMPONENTES ===================================================================== Piezas de UI reutilizables. Usan los tokens de tokens.css — no deberían tener ningún color o tamaño "suelto" escrito a mano acá. Nota sobre estados: en Figma cada estado (Default/Hover/Disabled) es una capa distinta. En CSS no duplicamos esas capas: usamos pseudo-clases (:hover, :disabled) que el navegador aplica solo. ===================================================================== */ /* ---------- Fonts ---------- Fuentes de Google (Work Sans, Inter, Material Symbols) se cargan vía en el de cada página. DIN Next LT Pro es una fuente paga (licencia de Fischbach), self-hosted acá porque no tiene un externo — David la usa como prueba de tipografía completa en project-onboarding.html (--font-display/--font-body redefinidos SOLO ahí, ver project-onboarding.css), no reemplaza Work Sans/Inter en el resto del sitio. 4 declaraciones para los pesos que la página realmente usa (headlines 700, botones 500/600, eyebrow 600, body 400) — no cargamos italic, Condensed, Black, etc. del paquete completo que mandó David, esos no se usan acá. DIN Next no tiene un archivo "SemiBold"/600 propio: el de Medium se registra dos veces (500 y 600) para que los usos con font-weight:600 (.btn--lg, .eyebrow) no salten directo a Bold/700 — sin esto, el navegador busca el peso disponible más cercano hacia arriba y usaría Bold en vez de Medium, perdiendo la jerarquía visual que ya tenían botones/eyebrow frente a los headlines. */ @font-face { font-family: "DIN Next LT Pro"; src: url("../assets/fonts/din-next-lt-pro/DINNextLTPro-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "DIN Next LT Pro"; src: url("../assets/fonts/din-next-lt-pro/DINNextLTPro-Medium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "DIN Next LT Pro"; src: url("../assets/fonts/din-next-lt-pro/DINNextLTPro-Medium.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "DIN Next LT Pro"; src: url("../assets/fonts/din-next-lt-pro/DINNextLTPro-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* YouTubeDisplay — la fuente real de títulos que usa brand.youtube (no confundir con "YouTube Sans", que es la de la UI de la app, no esta). Self-hosted acá con el mismo criterio que DIN Next arriba: David pidió usar la tipografía real encontrada en el research (era un fallback de sistema hasta ahora, ver design-system.html #youtube-discovery-ref) en vez de quedarnos con la aproximación. Archivos sacados del propio CDN de Google (gstatic.com/marketing-cms/...) inspeccionando qué carga brand.youtube en vivo — no están en Google Fonts ni tienen licencia pública de reuso; se usan igual a pedido explícito de David, a sabiendas de que es un asset de marca de Google (proyecto conceptual de portafolio, no un producto real). --font-display se redefine SOLO en project-youtube-discovery.css (ver ese archivo), no reemplaza Work Sans/Inter en el resto del sitio — mismo patrón que DIN Next. 3 pesos (los que trae el archivo original, no hay Medium/SemiBold propio): Regular 400, Bold 700, ExtraBold 800 — los títulos de esta página piden el peso más pesado disponible (ExtraBold), no 900 (esa fuente no tiene ese peso; pedirlo haría que el navegador cayera en sintetizar bold sobre ExtraBold, verse peor que usar 800 directo). */ @font-face { font-family: "YouTubeDisplay"; src: url("../assets/fonts/youtube-display/youtubedisplay-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "YouTubeDisplay"; src: url("../assets/fonts/youtube-display/youtubedisplay-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "YouTubeDisplay"; src: url("../assets/fonts/youtube-display/youtubedisplay-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; } /* ---------- Button ---------- Fuente: componente "Button" de Figma (5 estilos x 3 tamaños x 3 estados). Los colores de "Secondary"/"Outline"/"Ghost" son valores exactos del componente (no son parte de la escala Gray — son un poco distintos, a propósito se dejan literales acá). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; border-radius: 999px; font-family: var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .btn:disabled, .btn.is-disabled { opacity: 0.7; cursor: not-allowed; } /* Tamaños */ .btn--lg { min-height: 48px; padding: 12px 20px; font-size: 16px; font-weight: 600; } .btn--md { min-height: 40px; padding: 8px 16px; font-size: 14px; font-weight: 500; } .btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; font-weight: 500; } /* Modifier: solo-ícono — mismo .btn (radio/colores/tamaños sin cambios), sin texto, perfectamente circular. Se combina con un tamaño (.btn--sm/md/lg) y un color (.btn--outline, etc.) igual que cualquier otro botón — este modifier solo saca el padding horizontal y fuerza ancho = alto (aspect-ratio:1/1 contra el min-height que ya define cada tamaño). */ .btn--icon { padding: 0; aspect-ratio: 1 / 1; } /* Estilo: Primary */ .btn--primary { background-color: var(--color-purple-500); color: var(--color-text-white); } .btn--primary:hover { background-color: var(--color-purple-700); } .btn--primary:disabled, .btn--primary.is-disabled { background-color: var(--color-purple-200); } /* Estilo: Secondary */ .btn--secondary { background-color: var(--color-gray-200); color: var(--color-text-black); } .btn--secondary:hover { background-color: var(--color-gray-300); } .btn--secondary:disabled, .btn--secondary.is-disabled { background-color: #f2f2f7; } /* Estilo: Destructive */ .btn--destructive { background-color: var(--color-red-500); color: var(--color-text-white); } .btn--destructive:hover { background-color: var(--color-red-700); } .btn--destructive:disabled, .btn--destructive.is-disabled { background-color: var(--color-red-200); } /* Estilo: Outline */ .btn--outline { background-color: white; border: 1px solid #ccccd4; color: var(--color-text-black); } .btn--outline:hover { background-color: #f2f2f7; } .btn--outline:disabled, .btn--outline.is-disabled { border-color: #b2c2eb; } /* Estilo: Ghost */ .btn--ghost { background-color: transparent; color: var(--color-text-black); } .btn--ghost:hover { background-color: #f2f2f7; } /* Estilo: Dark No es una variante del componente "Button" original de Figma — la agregamos nosotros: un "negro" que en realidad sale de la misma escala púrpura (purple-950), para que combine con el resto de la marca en vez de ser un gris/negro genérico. El hover se aclara (purple-900) en vez de oscurecerse, al revés que Primary. */ .btn--dark { background-color: var(--color-purple-950); color: var(--color-text-white); } .btn--dark:hover { background-color: var(--color-purple-900); } .btn--dark:disabled, .btn--dark.is-disabled { background-color: var(--color-purple-200); } /* ---------- Icons ---------- Íconos de Google Material Symbols (Rounded) — nunca SVG dibujado a mano. El nombre del ícono va como texto adentro del (ej. "arrow_forward"); la fuente lo convierte en el glifo. El color sale solo de `color` (currentColor), así que dentro de un .btn ya toma el color de texto del botón sin configurar nada aparte. CSS base tal cual la provee Google. */ .material-symbols-rounded { font-family: "Material Symbols Rounded"; font-weight: normal; font-style: normal; font-size: 20px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; /* FILL 0 = trazo, sin relleno — la fuente es variable y el navegador no siempre asume este eje por su cuenta, así que se fija explícito en vez de confiar en el default. */ font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; } /* Ícono "avanzar" — clase opt-in, no todos los íconos la llevan (un ícono de "eliminar", por ejemplo, no debería deslizarse). Se usa en botones tipo CTA ("Go to project"): al pasar el mouse por el botón, el ícono se desliza suavemente hacia la derecha, reforzando la idea de "seguir adelante". */ .material-symbols-rounded.icon-forward { transition: transform 0.2s ease; } .btn:hover .material-symbols-rounded.icon-forward { transform: translateX(4px); } /* Ícono "retroceder" — misma idea que .icon-forward, pero para íconos que apuntan hacia atrás/izquierda (ej. "arrow_back" en "Back to home"): al pasar el mouse, se desliza hacia la IZQUIERDA, no hacia la derecha — deslizar a la derecha reforzaría "avanzar", lo contrario de lo que dice la flecha. Por eso es una clase separada de .icon-forward y no una variante con el mismo signo invertido a mano en cada uso. */ .material-symbols-rounded.icon-back { transition: transform 0.2s ease; } .btn:hover .material-symbols-rounded.icon-back { transform: translateX(-4px); } /* ---------- Eyebrow ---------- Etiqueta chica en mayúsculas que antecede a un título de sección (escala Overline de tokens.css). Nació como estilo puntual de la página de proyecto (label de "About the project" y de la ficha Role/Team/Timeline) — se sube acá al pasar a usarse en una segunda sección de esa misma página, para no repetir la regla dos veces. */ .eyebrow { display: block; font-family: var(--font-body); font-weight: 600; font-size: var(--text-overline-size); line-height: var(--text-overline-line); letter-spacing: var(--text-overline-tracking); text-transform: uppercase; color: var(--color-text-black); } /* ===================================================================== DEV TOOLS ===================================================================== Herramienta de guía — NO es parte del diseño del sitio, es para trabajar. Antes vivía duplicada como