@charset "UTF-8"; /* Theme Name: Xixón al Día Theme URI: https://xixonaldia.com/ Author: Xixón al Día Author URI: https://xixonaldia.com/ Description: Tema clásicu de xixonaldia.com. Ensin compilación, ensin constructor visual y ensin dependencies: lo que hai equí ye lo que corre nel sirvidor. El sistema visual entero ta en docs/adr/0015-identida-visual.md. Version: 0.13.0 Requires at least: 6.4 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: xixonaldia Tags: news, blog, custom-menu, translation-ready, accessibility-ready */ /* =========================================================================== AVISO 1 — POR QUÉ ESTE FICHERU EMPIEZA CON @charset Los nomes de variable que fixa ADR-0015 lleven acentu y eñe: --xal-escuro-apagáu, --xal-claro-apagáu, --xal-pegañosu. Ye CSS válidu, pero si la fueya se interpreta nuna codificación que nun ye UTF-8, el nome NUN casa y el valor cáyese ensin avisar: nun hai error en consola, nun hai avisu, la páxina carga y el color ta mal. @charset zarra esa puerta. WordPress llee la cabecera del tema con una expresión regular sobre los primeros 8 KB del ficheru, non pola posición: poner @charset delantre NON rompe el reconocimientu del tema. AVISO 2 — EL RADIU DE LES ESQUINES NUN S'ESCRIBE NUNCA, NIN NUN COMENTARIU ADR-0015, «Cómo se verifica», puntu 3: el conteu d'esa propiedá nesti ficheru tien que dar CERO, y el grep que lu mide nun distingue una regla d'un comentariu. Poro nun s'escribe la propiedá en nengún sitiu, nin equí. La variable --xal-requexu declárase pero nun s'aplica: aplicala obligaría a escribila. Nun fai falta, porque'l valor ye 0 y 0 ye lo que val por defeutu; la variable queda como declaración d'intención. Les esquines rectes de los controles del formulariu consíguense con appearance: none. AVISO 3 — LO QUE container-type FAI, Y LO QUE NON FAI Esto ta MIDÍO nun navegador, non lleío na especificación. La especificación diz que container-type aplica contención de disposición, y d'ehí sacaríase que l'elementu se vuelve bloque contenedor de los sos descendientes con position: fixed y qu'abre contestu d'apiláu. Nel navegador NUN pasa nin una cosa nin la otra: - un position: fixed dientro de .xal-sitiu sigue midiéndose contra la ventana (top 0 dempués de baxar 1500 px); - un z-index de dientro NON queda atrapáu: gana a un hermanu de .xal-sitiu. Poro, DOS coses: 1. El menú llateral cuelga de por otres razones, non por esa: quier el so propiu container-type —el so conteníu tien que midise contra'l panel y non contra la páxina— y va delantre de .xal-sitiu pa que `:target` nun dea un saltu de scroll. Nun se mueva de sitiu. 2. ⚠ Como .xal-sitiu NUN abre contestu d'apiláu, el z-index de la cabecera (20) y el del menú (80) compiten na MESMA pila. Un elementu de dientro con z-index mayor de 80 travesaría'l velu del menú. Nun subas d'ehí ensin mirar esto. =========================================================================== */ /* --------------------------------------------------------------------------- 1. Les fontes (ADR-0015 § 3) ⚠ font-stretch: 62% 125% ye OBLIGATORIU. Ensin esti descriptor el navegador trata la fonte como d'anchu únicu y DESCARTA toles declaraciones de font-stretch de les regles, anque'l ficheru traiga l'exe wdth. La páxina carga, la consola ta llimpio, y TOLOS titulares del sitiu salen anchos. Los dos valores son los del ficheru midíu, non los que s'usen. Nun se recorta el conxuntu de carauteres: la ḥ asturiana y la flecha ↗ tán fuera de «latin». ADR-0015 § 3. --------------------------------------------------------------------------- */ @font-face { font-family: 'Archivo'; src: url('fonts/Archivo[wdth,wght].woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono[wght].woff2') format('woff2-variations'); font-weight: 100 800; font-display: swap; } /* --------------------------------------------------------------------------- 2. El sistema: 34 pasos con nome (ADR-0015 § 1) Nenguna regla d'esti ficheru lleva un númberu de color, d'espaciáu o de tamañu. Si un valor fai falta y nun ta equí, AÑÁDESE EQUÍ, non na regla. La unidá ye cqi, non vw: .xal-sitiu declara container-type: inline-size, y asina un bloque puestu na columna llateral compórtase como bloque de columna llateral y non como bloque de portada. --------------------------------------------------------------------------- */ :root { /* --- Retícula ------------------------------------------------- */ --xal-anchu-max: 1560px; --xal-marxe: clamp(14px, 2.6cqi, 44px); /* marxe llateral */ --xal-alto-cabecera: clamp(58px, 4.8cqi, 72px); --xal-alto-logo: clamp(24px, 2.6cqi, 36px); --xal-pegañosu: clamp(72px, 5.6cqi, 88px); /* top de lo pegañoso */ --xal-requexu: 0; /* el radiu de les esquines. Cero. Ver AVISO 2 */ /* --- Espaciáu: ocho pasos, y nin unu más ---------------------- */ --xal-e1: clamp( 6px, 0.8cqi, 12px); --xal-e2: clamp( 9px, 1.1cqi, 15px); --xal-e3: clamp(12px, 1.4cqi, 20px); --xal-e4: clamp(14px, 1.7cqi, 26px); --xal-e5: clamp(17px, 2.1cqi, 34px); --xal-e6: clamp(20px, 2.5cqi, 44px); --xal-e7: clamp(24px, 3.0cqi, 56px); --xal-e8: clamp(30px, 4.0cqi, 74px); /* --- Tamaños de titular (Archivo) ----------------------------- */ --xal-t1: clamp(13px, 1.05cqi, 15px); --xal-t2: clamp(14px, 1.15cqi, 17px); --xal-t3: clamp(15px, 1.35cqi, 20px); --xal-t4: clamp(17px, 1.5cqi, 23px); --xal-t5: clamp(19px, 1.8cqi, 28px); --xal-t6: clamp(22px, 2.1cqi, 34px); --xal-t7: clamp(28px, 3.2cqi, 52px); --xal-t8: clamp(32px, 4.4cqi, 72px); --xal-t9: clamp(42px, 6.4cqi, 112px); --xal-t10: clamp(96px, 17cqi, 300px); /* la cifra «404», y nada más */ /* --- Testu llargu (Archivo 400) ------------------------------- */ --xal-cuerpu: clamp(16px, 1.3cqi, 18px); --xal-entradiella: clamp(14px, 1.25cqi, 19px); --xal-estractu: clamp(13px, 1.05cqi, 15px); --xal-pie-semeya: clamp(11px, 0.95cqi, 13px); /* --- Metadatu (JetBrains Mono) -------------------------------- */ --xal-m1: 9px; /* el metadatu, 232 usos */ --xal-m2: 10px; /* botones, paxinación, migues */ --xal-m3: clamp(10px, 0.95cqi, 13px); /* rótulu de banda */ --xal-m4: 15px; /* la cifra d'un bloque */ /* --- Dimensiones de semeya ------------------------------------ */ --xal-miniatura: clamp( 46px, 4.4cqi, 64px); /* cuadrada 1/1 */ --xal-miniatura-media: clamp( 72px, 7cqi, 108px); --xal-miniatura-ancha: clamp( 76px, 8cqi, 136px); --xal-semeya-1: clamp(110px, 9cqi, 146px); /* tarxeta de rexella */ --xal-semeya-2: clamp(124px, 10.5cqi, 182px); /* destacada de bloque */ --xal-semeya-3: clamp(185px, 20cqi, 330px); /* apertura de seición */ --xal-semeya-4: clamp(195px, 24cqi, 420px); /* apertura de portada */ /* --- AÑADÍO POL TRAMU 1 DE T-006 ------------------------------ ADR-0015 nun trai nin anchu de panel nin xeometría d'iconu, y les dos coses son d'esti tramu. La respuesta correuta ye AÑADIR el valor equí, non poner un númberu suelto na regla («Consecuencias» del ADR). ⚠ Esto NON son pasos d'escala. La escala d'espaciáu y la de titular siguen teniendo ocho y diez pasos, los del ADR. El avisu del ADR —«si fai falta añader más de dos o tres, la escala ta mal»— refierse a esos pasos, non a la midida d'un iconu. La xeometría del burger ye la del mock, midida: caxa de 22 × 14, tres rayes de 2 px y la del mediu más curtia. Los 4 px d'aire nun se escriben: salen de repartir el güecu con space-between. */ /* La midida ye la del mock —clamp(180px, 46vw, 320px)—, en cqi y non en vw porque ADR-0015 § 1 nun dexa nin una sola escepción de vw. Dientro d'un `position: fixed` que ye'l so propiu contenedor, 46cqi ye 46vw. */ --xal-anchu-menu: clamp(180px, 46cqi, 320px); --xal-anchu-llau: clamp(220px, 17cqi, 300px); /* la columna llateral del articulu */ --xal-anchu-testu: 900px; /* el bloque de comentarios */ /* L'anchu del artículu enteru: cuerpu (70ch ≈ 722 px) + aire + la columna llateral. Añadíu el 2026-09-01: ensin él, el bloque de conteníu midía 1.000 px dientro d'una caxa de 1.351 y quedaba pegáu a la manzorga, con 350 px d'aire muertu a la derecha. Midío, non aparente. */ --xal-anchu-articulu: 1020px; /* Xeometria FIXA: ornamentos que NON escalen. Nun son pasos d'escala -la d'espaciau sigue teniendo ocho y la de titular diez, les del ADR-. Son midides d'iconu, y un iconu que crez con el contenedor deforma. */ --xal-iconu: 22px; /* anchu de los iconos de la cabecera */ --xal-iconu-curtiu: 14px; /* la raya curtia del indiz, y l'altor de la caxa */ --xal-raya-marcador: 9px; /* l'anchu de raya del marcador de semeya */ --xal-cuadru-llau: 6px; /* el cuadradin ambre del bloque de tema */ --xal-avatar: 38px; /* l'avatar d'un comentariu */ /* --- AÑADÍO NOS ARREGLOS DE LA PRIMERA REVISIÓN (2026-09-01) --- Otra vuelta lo mesmo: la respuesta correuta ye añadir el valor equí y non poner un númberu suelto na regla. Nengún d'estos ye un pasu d'escala. */ --xal-columna-pie: clamp(112px, 9cqi, 150px); /* anchu mínimu d'una columna de la llista del pie */ --xal-anchu-sofitu: clamp(150px, 14cqi, 220px); /* el logotipu del Principáu nel pie */ --xal-desvanecíu: clamp(18px, 3cqi, 34px); /* lo que se desvanez nes vores de la navegación */ /* El techu d'altor de la semeya d'apertura d'un artículu. Baxó de 760 a 520 el 2026-09-01: con 760, una foto 9:16 obligaba a rodar una pantalla entera enantes de llegar a la primer llinia del testu. */ --xal-semeya-alta: clamp(280px, 40cqi, 520px); } /* --------------------------------------------------------------------------- 3. La paleta: dos rampes y cuatro acentos (ADR-0015 § 2) Cada rampa tien el so propiu gris: fríos sobre escuro, cálidos sobre claro. NUN se mecen. Los 30 hexadecimales del mock consérvense unu a unu, y de les 6 rgba consérvense 5. --------------------------------------------------------------------------- */ :root { /* Rampa escuro */ --xal-escuro: #0C0D12; /* fondu */ --xal-claro: #F3F0EA; /* testu sobre escuro, y fondu de la banda clara */ --xal-escuro-testu2: #A2A3AE; /* entradielles, navegación inactiva */ --xal-escuro-meta: #85868F; --xal-escuro-meta2: #8A8B95; --xal-escuro-meta3: #7C7D87; --xal-escuro-apagáu: #4C4D57; /* llinia llegal, y lo desactiváu */ --xal-escuro-borde: #31333F; /* borde de botón y de chip */ --xal-escuro-filete: #22232C; /* la separación principal */ --xal-escuro-banda: #1A1B23; --xal-escuro-banda2: #282A35; --xal-escuro-fondu2: #171922; /* fondu de «Y amás» */ --xal-escuro-marca1: #1A1C24; /* les dos rayes del marcador de semeya */ --xal-escuro-marca2: #13151B; /* Rampa clara */ --xal-claro-testu: #1C1D24; /* cuerpu del artículu */ --xal-claro-testu2: #3A3B44; /* titulares secundarios y chips */ --xal-claro-testu3: #5B5952; /* entradiella, pie de semeya */ --xal-claro-meta: #6E6C66; /* fecha, «Ver too», «Cargar más» */ --xal-claro-apagáu: #8C8A82; --xal-claro-filete: #DBD7CF; /* separación ente pieces */ --xal-claro-filete2: #E4E0D9; /* separación DIENTRO d'una llista */ --xal-claro-fondu2: #EDEAE4; /* fondu d'avatar, y raya del marcador */ --xal-claro-marca: #E2DED6; /* la otra raya del marcador de semeya */ --xal-blancu: #fff; /* campos del formulariu, testu sobre azul */ --xal-claro-inactivu: #B3B0A8; /* «← Anterior» desactiváu */ --xal-claro-puntos: #A9A69E; /* los … de la paxinación */ /* Acentos */ --xal-azul: #4E6BF5; /* seición, :hover de too enllaz, ::selection */ --xal-azul-fondu: #1E3FE0; /* menú llateral, botones d'aición, enllaces del cuerpu */ --xal-ambre: #E8B23A; /* aniellu de focu, pestaña activa, mes actual */ --xal-ambre-marca: #F6E4B4; /* el de la gueta, y nada más */ /* Tresparencies */ --xal-velu: rgba(13,13,15,.55); /* el velu del menú */ --xal-llinia-menu: rgba(255,255,255,.3); /* llinies dientro del menú azul */ --xal-llinia-menu2: rgba(255,255,255,.28); --xal-llinia-menu3: rgba(255,255,255,.35); --xal-campu-menu: rgba(0,0,0,.18); /* el campu de gueta del menú */ } /* --------------------------------------------------------------------------- 4. LES BANDES (ADR-0015 § 2) — ESTO YE LO QUE NUN SE PUEDE ROMPER Una pieza usa var(--xal-testu) y var(--xal-filete) y NUN SABE en qué banda ta. La banda ye la que los define. Esto ye lo que fai que nengún componente de los tramos 2 y 3 haiga qu'escribilu dos vegaes, en versión clara y escura. Si una pieza nueva precisa un color que nun ta nesti xuegu, añádese a los TRES sitios —el :root d'abaxo y les dos bandes—, nunca na regla del componente. Si t'atopes escribiendo .xal-banda-escura .lo-que-sea, para: ye la señal de que fai falta un token. ⚠ EL SUELU DEL SITIU YE ESCURO. Midío nel mock: el `div` raíz lleva de fondu el color de --xal-escuro, y les bandes clares son seiciones DIENTRO. Poro los valores por defeutu de :root son los de la rampa escura — asina una pieza suelta, fuera de toa banda, sal col color del suelu y non al revés. --------------------------------------------------------------------------- */ :root { --xal-fondu: var(--xal-escuro); --xal-testu: var(--xal-claro); --xal-testu2: var(--xal-escuro-testu2); --xal-meta: var(--xal-escuro-meta); --xal-apagáu: var(--xal-escuro-apagáu); --xal-filete: var(--xal-escuro-filete); --xal-filete2: var(--xal-escuro-banda); --xal-borde: var(--xal-escuro-borde); --xal-inactivu: var(--xal-escuro-apagáu); --xal-hover: var(--xal-azul); --xal-campu: var(--xal-escuro-banda); /* fondu d'un campu de formulariu */ --xal-campu-testu: var(--xal-claro); --xal-aicion: var(--xal-azul-fondu); /* fondu d'un botón d'aición */ --xal-aicion-testu: var(--xal-blancu); --xal-marcador1: var(--xal-escuro-marca1); /* les dos rayes del marcador */ --xal-marcador2: var(--xal-escuro-marca2); --xal-testu3: var(--xal-escuro-meta3); /* estractu d'un resultáu */ } .xal-banda-escura { --xal-fondu: var(--xal-escuro); --xal-testu: var(--xal-claro); --xal-testu2: var(--xal-escuro-testu2); --xal-meta: var(--xal-escuro-meta); --xal-apagáu: var(--xal-escuro-apagáu); --xal-filete: var(--xal-escuro-filete); --xal-filete2: var(--xal-escuro-banda); --xal-borde: var(--xal-escuro-borde); --xal-inactivu: var(--xal-escuro-apagáu); --xal-hover: var(--xal-azul); --xal-campu: var(--xal-escuro-banda); --xal-campu-testu: var(--xal-claro); --xal-aicion: var(--xal-azul-fondu); --xal-aicion-testu: var(--xal-blancu); --xal-marcador1: var(--xal-escuro-marca1); --xal-marcador2: var(--xal-escuro-marca2); --xal-testu3: var(--xal-escuro-meta3); background-color: var(--xal-fondu); color: var(--xal-testu); } .xal-banda-clara { --xal-fondu: var(--xal-claro); --xal-testu: var(--xal-claro-testu); --xal-testu2: var(--xal-claro-testu2); --xal-meta: var(--xal-claro-meta); --xal-apagáu: var(--xal-claro-apagáu); --xal-filete: var(--xal-claro-filete); --xal-filete2: var(--xal-claro-filete2); --xal-borde: var(--xal-claro-filete); --xal-inactivu: var(--xal-claro-inactivu); --xal-hover: var(--xal-azul); --xal-campu: var(--xal-blancu); --xal-campu-testu: var(--xal-claro-testu); --xal-aicion: var(--xal-azul-fondu); --xal-aicion-testu: var(--xal-blancu); --xal-marcador1: var(--xal-claro-marca); --xal-marcador2: var(--xal-claro-fondu2); --xal-testu3: var(--xal-claro-testu3); background-color: var(--xal-fondu); color: var(--xal-testu); } /* El panel azul del menú ye un TERCER contestu, non una escepción. Se resuelve del mesmu mou: redefiniendo los tokens. Asina'l formulariu de gueta ye UN solu formulariu y nun hai que reescribilu pa cuando ta dientro del menú. Ye lo mesmo que fai ADR-0015 § 2 con les dos bandes; el ADR nun lu nomó porque'l menú nun ye una banda de la páxina, pero'l mecanismu ye ésti. ⚠ Equí'l :hover ye ESCURO, non azul (inventariu § 9). */ .xal-banda-menu { --xal-fondu: var(--xal-azul-fondu); --xal-testu: var(--xal-blancu); --xal-testu2: var(--xal-blancu); --xal-meta: var(--xal-blancu); --xal-apagáu: var(--xal-blancu); --xal-filete: var(--xal-llinia-menu); --xal-filete2: var(--xal-llinia-menu2); --xal-borde: var(--xal-llinia-menu3); --xal-inactivu: var(--xal-llinia-menu); --xal-hover: var(--xal-escuro); --xal-campu: var(--xal-campu-menu); --xal-campu-testu: var(--xal-blancu); --xal-aicion: var(--xal-blancu); --xal-aicion-testu: var(--xal-azul-fondu); --xal-marcador1: var(--xal-llinia-menu2); --xal-marcador2: var(--xal-campu-menu); --xal-testu3: var(--xal-blancu); background-color: var(--xal-fondu); color: var(--xal-testu); } /* --------------------------------------------------------------------------- 5. Base --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background-color: var(--xal-fondu); color: var(--xal-testu); font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--xal-cuerpu); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* El contenedor raíz. Tolos cqi de :root resuélvense contra esti anchu. ⚠ Ver AVISO 3: esto vuélvelu bloque contenedor de los fixed de dientro. */ .xal-sitiu { container-type: inline-size; font-size: var(--xal-cuerpu); min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg, video, iframe { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color .12s ease; } /* El :hover sal del contestu, non d'un color fixu: azul na páxina y escuro dientro del menú azul (inventariu § 9). Una pieza nun sabe ónde ta. */ a:hover { color: var(--xal-hover); } /* El focu vese siempre (ADR-0015 § 6, regla 6). Nun s'anula en nenguna regla d'esti ficheru: la comprobación 5 del ADR busca el contorno anuláu y nun distingue una regla d'un comentariu, asina que nin equí s'escribe. */ :focus-visible { outline: 2px solid var(--xal-ambre); outline-offset: 2px; } ::selection { background-color: var(--xal-azul); color: var(--xal-blancu); } /* Ensin appearance: none, Safari y iOS ponen esquines redondiaes a los controles. Nun se correx con la propiedá del radiu: ver AVISO 2. */ input, button, select, textarea { appearance: none; -webkit-appearance: none; font: inherit; color: inherit; background-color: transparent; border: 0; margin: 0; } button, [type='submit'] { cursor: pointer; } @media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; /* anula la transición del núcleu y la propia */ animation-duration: .01ms !important; scroll-behavior: auto !important; } /* ⚠ Y EQUÍ NUN VA UNA ESCEPCIÓN PA `.xal-nav`, que ye lo que paecía que faía falta. El desvanecíu de les dos vores de la navegación —más abaxo— muévese con `animation-timeline: scroll()`: nun se mueve solu, el so reló ye'l dedu de quien rueda, igual que una barra de scroll. La dulda yera si esti `animation-duration: .01ms !important` lu rompía, dexándolu saltar al últimu fotograma en cuanto se rodara un píxel —que diría una mentira: «nun queda nada a la derecha»—. **Midióse, y non:** en Chromium 148, cola duración forzada a .01ms, la vera esquierda sigue dando 0 px al 0 %, 5,9 al 2 %, 18 a la metá y la derecha 0 al final; esautamente lo mesmo que con `auto`. Nuna llinia de tiempu de progresu la duración en segundos nun manda. Poro nun se escribe una regla que nun fai nada. */ } /* --------------------------------------------------------------------------- 6. Tipografía (ADR-0015 § 4) Un pasu tipográficu NUN ye un tamañu: ye un paquete de cuatro valores, porque l'anchu, l'interletraxe y la interlinia van pegaos al cuerpu. Ensin compilación nun hai mixin, asina que'l paquete ye una CLASE. El marcáu lleva class="xal-tit xal-tit-4". El pesu queda FUERA de la escala y ye llibre (400–800). --------------------------------------------------------------------------- */ .xal-tit { font-family: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif; text-wrap: pretty; } .xal-tit-1 { font-size: var(--xal-t1); font-stretch: 93%; letter-spacing: -.013em; line-height: 1.2; } .xal-tit-2 { font-size: var(--xal-t2); font-stretch: 92%; letter-spacing: -.018em; line-height: 1.15; } .xal-tit-3 { font-size: var(--xal-t3); font-stretch: 92%; letter-spacing: -.021em; line-height: 1.15; } .xal-tit-4 { font-size: var(--xal-t4); font-stretch: 90%; letter-spacing: -.026em; line-height: 1.1; } .xal-tit-5 { font-size: var(--xal-t5); font-stretch: 89%; letter-spacing: -.029em; line-height: 1.05; } .xal-tit-6 { font-size: var(--xal-t6); font-stretch: 88%; letter-spacing: -.032em; line-height: 1.02; } .xal-tit-7 { font-size: var(--xal-t7); font-stretch: 86%; letter-spacing: -.038em; line-height: 0.94; } .xal-tit-8 { font-size: var(--xal-t8); font-stretch: 85%; letter-spacing: -.045em; line-height: 0.90; } .xal-tit-9 { font-size: var(--xal-t9); font-stretch: 84%; letter-spacing: -.05em; line-height: 0.87; } .xal-tit-10{ font-size: var(--xal-t10);font-stretch: 80%; letter-spacing: -.06em; line-height: 0.78; } .xal-tit-7, .xal-tit-8, .xal-tit-9, .xal-tit-10 { text-wrap: balance; } /* El metadatu en Mono ye una sola regla repetida 232 vegaes nel mock. ⚠ La flecha ↗ (U+2197) NUN ta n'Archivo, sí en Mono: va SIEMPRE dientro d'un .xal-meta. Puesta nun titular sal cola fonte de respaldu. */ .xal-meta { font: 500 var(--xal-m1)/1 'JetBrains Mono', ui-monospace, Consolas, monospace; letter-spacing: .14em; text-transform: uppercase; } .xal-meta--m2 { font-size: var(--xal-m2); } .xal-meta--m3 { font-size: var(--xal-m3); } .xal-meta--m4 { font-size: var(--xal-m4); } .xal-entradiella { font-size: var(--xal-entradiella); line-height: 1.4; color: var(--xal-testu2); } .xal-estractu { font-size: var(--xal-estractu); line-height: 1.5; color: var(--xal-testu2); } .xal-pie-semeya { font-size: var(--xal-pie-semeya); line-height: 1.4; color: var(--xal-meta); } /* --------------------------------------------------------------------------- 7. Retícula --------------------------------------------------------------------------- */ .xal-caxa { width: 100%; max-width: var(--xal-anchu-max); margin-inline: auto; padding-inline: var(--xal-marxe); } .xal-conteniu { flex: 1 0 auto; } /* ⚠

NON lleva .xal-caxa. Les bandes van de vera a vera y la caxa va DIENTRO de cada una; ponela tamién nel

aplicaba'l marxe dos vegaes. Les pantalles que nun tienen bandes propies —index.php— usen esti envoltoriu. */ .xal-conteniu__caxa { padding-block: var(--xal-e6); } /* El saltu al conteníu. Ye la primera parada del tabulador y tien que verse cuando toma'l focu: si non, nun sirve pa nada. */ .xal-saltu { position: fixed; top: var(--xal-e3); left: var(--xal-e3); z-index: 100; padding: var(--xal-e2) var(--xal-e4); background-color: var(--xal-ambre); color: var(--xal-escuro); transform: translateY(-200%); } .xal-saltu:focus { transform: translateY(0); color: var(--xal-escuro); } /* La definición del logo. Ver inc/marca.php: píntase una sola vez por documentu y reutilízase con . */ .xal-logo-def { position: absolute; width: 0; height: 0; overflow: hidden; } /* --------------------------------------------------------------------------- 8. Cabecera (ADR-0015 § 8 y § 9, y la xeometría del mock) ÍNDIZ + LOGO + NAVEGACIÓN + GUETAR, y nada más. El reló-tiempu que'l mock pon ente la navegación y Guetar ta FUERA, y el bloque d'Instagram tamién (ADR-0015 § 9). ⚠ PEGAÑOSA, y midío que sigue siéndolo dientro de .xal-sitiu: dempués de baxar 1500 px la cabecera queda en top 0. Lo que sí ruempe `position: sticky` ye un `overflow` distintu de `visible` nun antepasáu — nun lu añadas a .xal-sitiu nin a . --------------------------------------------------------------------------- */ .xal-cabecera { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--xal-filete); } .xal-cabecera__caxa { display: flex; align-items: center; gap: var(--xal-e4); min-height: var(--xal-alto-cabecera); } /* El índiz. Nel mock ye un