/* Horaes — hoja de estilos unica. Sin framework y sin fuentes de terceros: se usa la tipografia del propio sistema, que no cuesta ninguna descarga. Los colores no estan escritos en cada sitio: salen de variables que cambian segun la franja del dia. El JavaScript pone data-franja en y toda la pagina se repinta sola. */ /* ------------------------------------------------------------------ */ /* Paletas: una por franja del dia */ /* ------------------------------------------------------------------ */ :root { --fuente: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ancho-maximo: 1360px; --curva: 14px; --transicion-color: 900ms ease; /* Noche, que es tambien lo que se ve antes de que arranque el JavaScript. */ --cielo-alto: #070b1c; --cielo-bajo: #16204a; --tinta: #eef2ff; --tinta-suave: #97a3cf; --tarjeta: rgba(255, 255, 255, 0.055); --tarjeta-encima: rgba(255, 255, 255, 0.1); --borde: rgba(255, 255, 255, 0.13); --acento: #ffd166; --panel: rgba(10, 14, 32, 0.92); } [data-franja="amanecer"] { --cielo-alto: #2b1b4d; --cielo-bajo: #f0a07a; --tinta: #fff6ee; --tinta-suave: #f2d3c0; --tarjeta: rgba(255, 255, 255, 0.12); --tarjeta-encima: rgba(255, 255, 255, 0.2); --borde: rgba(255, 255, 255, 0.24); --acento: #fff1a8; --panel: rgba(52, 30, 60, 0.92); } [data-franja="dia"] { --cielo-alto: #4a9fe0; --cielo-bajo: #cfe9ff; --tinta: #0d2137; --tinta-suave: #3c5f7d; --tarjeta: rgba(255, 255, 255, 0.55); --tarjeta-encima: rgba(255, 255, 255, 0.78); --borde: rgba(13, 33, 55, 0.14); --acento: #0b5fa5; --panel: rgba(255, 255, 255, 0.96); } [data-franja="atardecer"] { --cielo-alto: #3a1d52; --cielo-bajo: #e2683f; --tinta: #fff1e6; --tinta-suave: #f0c5ac; --tarjeta: rgba(255, 255, 255, 0.11); --tarjeta-encima: rgba(255, 255, 255, 0.19); --borde: rgba(255, 255, 255, 0.22); --acento: #ffd98e; --panel: rgba(46, 22, 52, 0.93); } /* ------------------------------------------------------------------ */ /* Base */ /* ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* Lo marcado con "hidden" no se ve, y punto. Sin esto, cualquier regla de este archivo que ponga un display se lo salta sin avisar: es lo que pasaba con la banda de publicidad, que seguia apareciendo estando oculta. */ [hidden] { display: none !important; } html { background: var(--cielo-alto); /* El fondo no puede cambiar de golpe al pasar de una franja a otra. */ transition: background-color var(--transicion-color); } body { margin: 0; min-height: 100vh; font-family: var(--fuente); font-size: 16px; line-height: 1.55; color: var(--tinta); background: radial-gradient(120% 80% at 50% 0%, var(--cielo-alto) 0%, var(--cielo-bajo) 100%) fixed; transition: color var(--transicion-color); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, ul, figure { margin: 0; } ul { list-style: none; padding: 0; } a { color: inherit; } :focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 4px; } /* Enlace para saltar el menu con el teclado. Solo se ve al enfocarlo. */ .saltar { position: absolute; left: -9999px; top: 0; z-index: 50; padding: 0.7rem 1.1rem; background: var(--panel); border-radius: 0 0 var(--curva) 0; } .saltar:focus { left: 0; } /* ------------------------------------------------------------------ */ /* Cabecera */ /* ------------------------------------------------------------------ */ .cabecera { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; max-width: var(--ancho-maximo); margin: 0 auto; padding: 1.1rem 1.25rem 0.4rem; } .marca { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; } .marca span { color: var(--acento); } .lema { font-size: 0.85rem; color: var(--tinta-suave); } /* ------------------------------------------------------------------ */ /* Tablero: torre, contenido, torre */ /* ------------------------------------------------------------------ */ /* Una sola columna mientras no haya publicidad. Las torres estan marcadas con "hidden" en el HTML: dos recuadros vacios de 160 x 600 hacen que la pagina parezca a medio terminar. El dia que haya codigo de Adsterra: se quita el "hidden" de las dos