/* * La portada de tabsley.com (plan 19). Paleta, tipografía y proporciones del * logotipo salen de docs/marca/identidad-tabsley.html (plan 12, decisiones 6 * y 7); si cambian allí, cambian aquí. Solo sigue al tema del sistema: la * mascota llega como , en un fichero por tema elegido por el mismo * prefers-color-scheme, y un conmutador manual la dejaría en el tema * contrario al de la página. */ @font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('/fonts/bricolage-grotesque-latin.woff2') format('woff2'); } /* Instancia estática (itálica, opsz 24, peso 400) y no la variable: pesa 24 KB frente a 147 KB, y la web solo la usa para el eslogan. */ @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/newsreader-italic-latin.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/manrope-latin.woff2') format('woff2'); } :root { --paper: #EDEFE8; --paper-2: #E2E6DD; --ink: #1E2B27; --muted: #5B6A64; --tie: #7A2E2E; --brass: #B08A38; --font-ui: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Bricolage Grotesque', var(--font-ui); --font-voice: 'Newsreader', Georgia, 'Times New Roman', serif; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --paper: #151D1A; --paper-2: #1D2724; --ink: #E8EDE6; --muted: #A2B0A8; --tie: #A84545; --brass: #D2AD5A; } } /* Los dos idiomas conviven en el documento; se ve el de . */ :root[lang="es"] .lang-text[lang="en"], :root[lang="en"] .lang-text[lang="es"] { display: none; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; background: radial-gradient(ellipse 70% 55% at 50% 42%, var(--paper-2), transparent 70%), var(--paper); color: var(--ink); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .stage { display: grid; justify-items: center; align-content: center; padding: 48px 16px 24px; text-align: center; } .mascot img { display: block; width: min(620px, 90vw); height: auto; } .lockup { display: flex; align-items: center; gap: 0.2em; margin: 8px 0 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(52px, 11vw, 104px); letter-spacing: -0.035em; line-height: 0.95; } /* Las proporciones del lockup de la identidad: pajarita de 92 × 46 junto a un logotipo de 92 px, o sea, un em de ancho y medio de alto. */ .lockup .mark { width: 1em; height: 0.5em; flex: none; color: var(--tie); } .slogan { margin: 0.9em 0 0; font-family: var(--font-voice); font-style: italic; font-weight: 400; font-size: clamp(21px, 3.4vw, 30px); line-height: 1.3; } /* La frase que explica el eslogan: voz de interfaz (Manrope), un paso por debajo en tamaño y en tono para que el eslogan siga mandando. */ .descriptor { margin: 0.75em 0 0; max-width: 30ch; font-family: var(--font-ui); font-weight: 500; font-size: clamp(15px, 1.7vw, 18px); line-height: 1.45; color: var(--muted); text-wrap: balance; } .foot { display: flex; justify-content: center; padding: 12px 16px 28px; } .lang-switch { font: 600 14px/1 var(--font-ui); color: var(--muted); background: none; border: 0; border-radius: 8px; padding: 10px 12px; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 4px; } .lang-switch:hover { color: var(--ink); } .lang-switch:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .mascot, .lockup, .slogan, .descriptor { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .lockup { animation-delay: 0.08s; } .slogan { animation-delay: 0.16s; } .descriptor { animation-delay: 0.24s; } } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }