/* ========================================================================== Etnoagronomía: Tejiendo Saberes — hoja de estilo del portal -------------------------------------------------------------------------- Este archivo se compone de tres partes, en este orden: 1. Un reinicio mínimo, que sustituye al "preflight" de Tailwind. 2. La hoja de estilo autoral de la maqueta, íntegra y sin cambios salvo los tres señalados en docs/20-migracion-maqueta.md. 3. Un bloque de "capa funcional" al final, claramente delimitado, con lo que hizo falta añadir para que el portal funcione sin JavaScript. Si tienes que cambiar el diseño, cambia la parte 2. Si tienes que arreglar una función, cambia la parte 3. No mezcles las dos: es lo que permite saber de un vistazo qué es decisión de diseño y qué es necesidad técnica. ========================================================================== */ /* ========================================================================== Reinicio mínimo -------------------------------------------------------------------------- La maqueta se escribió sobre Tailwind, que aplica su propio "preflight" y deja en cero los márgenes de títulos, párrafos y listas. Al quitar Tailwind (ver docs/20-migracion-maqueta.md) esos márgenes volvían a los del navegador y el diseño se descuadraba. Esto es solo la parte del preflight de Tailwind que el diseño necesita. No añade estilo propio: devuelve el punto de partida que la maqueta asumía. Pesa poco más de medio kilobyte frente a los ~13 KB comprimidos de Tailwind. ========================================================================== */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre { margin: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } ul, ol, menu { margin: 0; padding: 0; list-style: none; } img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; } img, video { max-width: 100%; height: auto; } table { border-collapse: collapse; text-indent: 0; border-color: inherit; } hr { height: 0; color: inherit; border-top-width: 1px; } fieldset, legend { margin: 0; padding: 0; border: 0; } b, strong { font-weight: bolder; } small { font-size: 80%; } kbd, code, pre, samp { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1em; } button, [type="button"], [type="submit"] { -webkit-appearance: button; cursor: pointer; } ::placeholder { color: var(--muted); opacity: 1; } textarea { resize: vertical; } [hidden] { display: none !important; } /* ========================================================================== Hoja de estilo autoral de la maqueta ========================================================================== */ /* Tipografías autoalojadas. Se generan con herramientas/generar_fuentes.py y viven en el repositorio: el portal no pide una sola fuente a un tercero. El rango añade, frente a la maqueta original: U+2000-206F las comillas tipográficas, la raya y los puntos suspensivos que el diseño usa y que faltaban U+A78B-A78C el saltillo, que usan varias ortografías de lenguas de México */ @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/atkinson-400.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0100-024F, U+02BC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+A78B-A78C; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/atkinson-700.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700; unicode-range: U+0000-00FF, U+0100-024F, U+02BC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+A78B-A78C; } /* Complemento para lenguas originarias. --------------------------------------------------------------------------- Atkinson Hyperlegible tiene 342 caracteres y NO incluye los signos que usan las ortografías de las lenguas originarias de México: le faltan la o con macrón (ō) del náhuatl, el apóstrofo modificador (ʼ), el saltillo (ꞌ Ꞌ), la o con ogonek (ǫ) del otomí y las letras con punto suscrito (ṣ ṭ). Sin esto, publicar una palabra en náhuatl haría que el navegador cambiara de tipografía a media palabra, justo en la familia que se eligió por legible. Es un recorte de Noto Sans con SOLO los caracteres que a Atkinson le faltan, declarado con el mismo nombre de familia. El diseño no cambia: todo el texto en español sigue dibujándose con Atkinson. **En una página solo en español pesa 0 bytes.** El navegador no descarga un archivo cuyo unicode-range no aparece en la página. Por eso no cuenta en el presupuesto de datos de PESOS.md. Si hace falta un signo que no esté aquí, se amplía RANGOS en herramientas/generar_fuentes.py y se vuelve a ejecutar; el script imprime el unicode-range nuevo para pegarlo abajo. */ @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/complemento-400.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0108-0109, U+0114-0115, U+011C-011D, U+0124-0125, U+0128-0129, U+012C-012D, U+0130, U+0132-0135, U+0138-013A, U+013F-0140, U+0149-014F, U+0156-0157, U+015C-015D, U+0166-0169, U+016C-016D, U+0174-0177, U+017F-0191, U+0193-0217, U+021C-024F, U+02BC, U+1E00-1EFF, U+2000-2012, U+2015-2017, U+201B, U+201F, U+2023-2025, U+2027-202F, U+2031-2038, U+203B-2043, U+2045-2064, U+2066-206F, U+A78B-A78C; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/complemento-700.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700; unicode-range: U+0108-0109, U+0114-0115, U+011C-011D, U+0124-0125, U+0128-0129, U+012C-012D, U+0130, U+0132-0135, U+0138-013A, U+013F-0140, U+0149-014F, U+0156-0157, U+015C-015D, U+0166-0169, U+016C-016D, U+0174-0177, U+017F-0191, U+0193-0217, U+021C-024F, U+02BC, U+1E00-1EFF, U+2000-2012, U+2015-2017, U+201B, U+201F, U+2023-2025, U+2027-202F, U+2031-2038, U+203B-2043, U+2045-2064, U+2066-206F, U+A78B-A78C; } /* Una sola instancia de Noto Serif para todo el rango 400-700. El diseño la usa en títulos y citas, siempre en peso alto; servir además el peso 400 costaría 28 KB más para una diferencia que casi no se ve en pantalla. Esta sí trae los signos de las lenguas originarias, así que no necesita complemento. */ @font-face { font-family: "Noto Serif"; src: url("../fuentes/noto-serif-600.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400 700; unicode-range: U+0000-00FF, U+0100-024F, U+02BC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122, U+A78B-A78C; } /* ========================================================================== Hoja de estilo autoral de la maqueta ========================================================================== */ /* Tipografías autoalojadas. Se generan con herramientas/generar_fuentes.py y viven en el repositorio: el portal no pide una sola fuente a un tercero. El rango añade U+2000-206F frente a la maqueta original, donde faltaban las comillas tipográficas, la raya y los puntos suspensivos. */ @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/atkinson-400.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400; unicode-range: U+0000-00FF, U+0100-024F, U+02BC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Atkinson Hyperlegible"; src: url("../fuentes/atkinson-700.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 700; unicode-range: U+0000-00FF, U+0100-024F, U+02BC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122; } /* Una sola instancia de Noto Serif para todo el rango 400-700. El diseño la usa en títulos y citas, siempre en peso alto; servir además el peso 400 costaría 28 KB más para una diferencia que casi no se ve en pantalla. Si algún día se quiere el peso fino, se añade aquí y se regenera. */ @font-face { font-family: "Noto Serif"; src: url("../fuentes/noto-serif-600.woff2") format("woff2"); font-display: swap; font-style: normal; font-weight: 400 700; unicode-range: U+0000-00FF, U+0100-024F, U+02BC, U+1E00-1EFF, U+2000-206F, U+20AC, U+2122; } :root { --ink: #152e2a; --ink-soft: #31504a; --muted: #6f7e78; --surface: #f6f3e8; --paper: #fffdf7; --paper-2: #f0ede1; --line: #d9ded3; --gold: #e6c84f; --red: #b85b3e; --purple: #6b3f2a; --water: #4e8690; --green: #3c765d; --focus: #d6754f; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px; --ease-out: cubic-bezier(.23, 1, .32, 1); --shadow-soft: 0 10px 30px rgba(21, 46, 42, .07); --shadow-float: 0 24px 60px rgba(21, 46, 42, .13); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: var(--surface); color: var(--ink); font-family: "Atkinson Hyperlegible", "Trebuchet MS", sans-serif; font-size: 16px; line-height: 1.5; } button, input, select, textarea { font: inherit; } a { color: inherit; text-decoration: none; } button { border: 0; background: none; color: inherit; } button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } .container { width: min(100% - 36px, 1216px); margin-inline: auto; } .eyebrow { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; } .eyebrow.accent { color: var(--red); } .water-text { color: var(--water); } .site-header { position: relative; z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); } .header-inner { width: min(100% - 36px, 1216px); min-height: 76px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 11px; min-width: max-content; } .brand-mark { width: 33px; height: 33px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-items: end; transform: rotate(-11deg); } .brand-mark span { display: block; border-radius: 3px 3px 1px 1px; background: var(--ink); } .brand-mark span:nth-child(1) { height: 56%; background: var(--gold); } .brand-mark span:nth-child(2) { height: 86%; background: var(--water); } .brand-mark span:nth-child(3) { height: 67%; background: var(--red); } .brand-copy { display: flex; flex-direction: column; line-height: 1.05; } .brand-copy strong { font-family: "Noto Serif", Georgia, serif; font-size: 1.03rem; letter-spacing: -.03em; } .brand-copy small { color: var(--muted); font-size: .68rem; letter-spacing: .06em; } .main-nav { display: flex; align-items: center; gap: 24px; color: var(--ink-soft); font-size: .9rem; } .main-nav a:not(.header-cta) { transition: color .18s ease; } .main-nav a:not(.header-cta):hover { color: var(--red); } .header-cta { display: inline-flex; align-items: center; gap: 7px; padding: 11px 14px; border: 1px solid var(--ink); border-radius: 100px; color: var(--ink); font-weight: 700; } .header-cta:hover { background: var(--ink); color: var(--surface); } .menu-button { display: none; align-items: center; gap: 7px; min-height: 44px; font-size: .86rem; } .module-ribbon-wrap { overflow: hidden; border-top: 1px solid var(--line); background: rgba(246,243,232,.75); } .ribbon-inner { display: flex; align-items: center; gap: 20px; min-height: 52px; } .ribbon-label { color: var(--muted); font-size: .72rem; white-space: nowrap; } .module-ribbon { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; } .module-ribbon::-webkit-scrollbar { display: none; } .module-pill { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 7px 15px; border-right: 1px solid var(--line); white-space: nowrap; color: var(--ink-soft); } .module-pill:first-child { border-left: 1px solid var(--line); } .module-pill:hover, .module-pill.active { background: var(--paper); color: var(--ink); } .module-pill.active { box-shadow: inset 0 -3px 0 var(--red); } .module-pill > span:last-child { display: flex; flex-direction: column; line-height: 1.05; } .module-pill b { font-size: .78rem; font-weight: 700; } .module-pill small { color: var(--muted); font-size: .65rem; margin-top: 3px; } .pill-dot, .legend-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--ink); } .module-pill[data-color="gold"] .pill-dot, .legend-dot.gold { background: var(--gold); } .module-pill[data-color="water"] .pill-dot, .legend-dot.water { background: var(--water); } .module-pill[data-color="red"] .pill-dot, .legend-dot.red { background: var(--red); } .module-pill[data-color="purple"] .pill-dot { background: var(--purple); } .module-pill[data-color="green"] .pill-dot { background: var(--green); } .hero { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(340px, .96fr); gap: clamp(34px, 7vw, 104px); padding-top: clamp(58px, 9vw, 126px); padding-bottom: clamp(65px, 9vw, 125px); align-items: center; } .hero h1, .section-intro h1, .detail-page h1, .longform-copy h1, .not-found h1 { margin: 13px 0 21px; max-width: 680px; font-family: "Noto Serif", Georgia, serif; font-size: clamp(2.35rem, 5vw, 5.1rem); line-height: .98; letter-spacing: -.065em; font-weight: 500; } .hero h1 em { color: var(--red); font-style: normal; position: relative; white-space: nowrap; } .hero h1 em::after { content: ""; position: absolute; left: 2px; right: -3px; bottom: -3px; height: 7px; background: var(--gold); z-index: -1; transform: rotate(-1.5deg); opacity: .75; } .hero-lead { max-width: 520px; color: var(--ink-soft); font-size: clamp(1.05rem, 1.5vw, 1.27rem); line-height: 1.5; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 30px; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 11px 17px; border-radius: 100px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: transform .16s var(--ease-out), background .18s ease, color .18s ease, border-color .18s ease; } .button:active, .icon-button:active { transform: scale(.97); } .button.primary { background: var(--ink); color: var(--surface); } .button.primary:hover { background: var(--red); } .button.ghost { border: 1px solid #aabbb1; color: var(--ink); } .button.ghost:hover { border-color: var(--ink); background: var(--paper); } .button.light { background: var(--surface); color: var(--ink); } .button.light:hover { background: white; } .text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--red); font-size: .88rem; font-weight: 700; } .text-link:hover { gap: 10px; } .hero-trust { display: flex; align-items: center; gap: 9px; margin-top: 45px; color: var(--muted); font-size: .73rem; } .trust-line { width: 27px; height: 1px; background: #b4c1b7; } .hero-graphic { min-height: 490px; position: relative; background: var(--ink); overflow: hidden; isolation: isolate; } .hero-graphic::before { content: ""; position: absolute; inset: 0; opacity: .09; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 13px 13px; } .hero-graphic::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -12%; height: 55%; border-top: 1px solid rgba(255,255,255,.25); border-radius: 50%; transform: rotate(-13deg); box-shadow: 0 -27px 0 rgba(255,255,255,.06), 0 -54px 0 rgba(255,255,255,.06), 0 -81px 0 rgba(255,255,255,.06); } .hero-stamp { position: absolute; top: 26px; left: 28px; width: 86px; height: 86px; display: grid; place-content: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: .62rem; line-height: 1.15; text-align: center; letter-spacing: .1em; text-transform: uppercase; transform: rotate(-9deg); z-index: 2; } .hero-stamp span { color: var(--surface); letter-spacing: .04em; text-transform: none; font-family: "Noto Serif", Georgia, serif; font-size: .75rem; } .layer { position: absolute; border-radius: 50% 50% 0 0; transform: rotate(-17deg); transform-origin: bottom left; } .layer-one { height: 340px; width: 160%; left: 31%; bottom: -180px; background: var(--gold); } .layer-two { height: 285px; width: 160%; left: 16%; bottom: -180px; background: var(--red); opacity: .94; } .layer-three { height: 220px; width: 155%; left: -8%; bottom: -166px; background: var(--water); opacity: .92; } .layer-four { height: 156px; width: 150%; left: -22%; bottom: -128px; background: #86aa83; opacity: .9; } .hero-graphic-caption { position: absolute; left: 25px; right: 25px; bottom: 21px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--surface); font-size: .7rem; z-index: 4; } .hero-graphic-caption .legend-dot { margin-left: 8px; } .hero-graphic-caption .legend-dot:first-child { margin-left: 0; } .principles-bar { background: var(--ink); color: var(--surface); } .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .principles-grid > div { padding: 31px 34px 34px 0; border-right: 1px solid rgba(246,243,232,.2); } .principles-grid > div:not(:first-child) { padding-left: 34px; } .principles-grid > div:last-child { border-right: 0; } .principle-number { display: block; color: var(--gold); font-size: .72rem; margin-bottom: 23px; } .principles-grid h3 { margin: 0 0 7px; font-family: "Noto Serif", Georgia, serif; font-size: 1.3rem; font-weight: 500; } .principles-grid p { max-width: 260px; margin: 0; color: #c9d5cc; font-size: .9rem; line-height: 1.45; } .content-section, .modules-section { padding-top: 95px; } .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; } .section-heading h2, .participation-banner h2 { margin: 9px 0 0; font-family: "Noto Serif", Georgia, serif; font-weight: 500; font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.08; letter-spacing: -.05em; } .heading-note { max-width: 310px; margin: 0; color: var(--muted); font-size: .95rem; } .card-grid { display: grid; grid-template-columns: 1.18fr 1fr 1fr; gap: 17px; } .content-card { display: flex; flex-direction: column; min-width: 0; background: var(--paper); border: 1px solid var(--line); transition: transform .22s var(--ease-out), box-shadow .22s ease; } .content-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); } .visual-green { background: #d5e2c7; color: var(--green); } .visual-water { background: #d2e5e1; color: var(--water); } .visual-purple { background: #eadbd0; color: var(--purple); } .card-visual { position: relative; min-height: 185px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .featured-card .card-visual { min-height: 232px; } .card-visual::before { content: ""; position: absolute; width: 130%; height: 170%; border: 1px solid currentColor; border-radius: 50%; transform: rotate(-25deg); opacity: .4; } .card-visual::after { content: ""; position: absolute; width: 122%; height: 110%; border: 1px solid currentColor; border-radius: 50%; transform: rotate(-25deg) translateY(23px); opacity: .32; } .visual-lines { position: absolute; width: 140%; height: 100%; top: 30%; left: -20%; background: repeating-linear-gradient(-16deg, transparent 0 19px, rgba(255,255,255,.42) 20px 21px); opacity: .65; } .card-visual > span { position: relative; z-index: 1; width: 54px; height: 54px; border: 1px solid currentColor; display: grid; place-items: center; border-radius: 50%; } .card-visual small { position: absolute; left: 17px; bottom: 14px; z-index: 1; color: currentColor; font-size: .7rem; font-weight: 700; } .card-body { padding: 20px 19px 21px; } .card-topline, .audio-top, .audio-bottom, .listing-toolbar, .detail-byline, .annotation-author, .place-heading, .panel-heading, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 11px; } .dot-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: .7rem; font-weight: 700; } .dot-label::before { content: ""; width: 6px; height: 6px; background: currentColor; border-radius: 50%; } .dot-label.green { color: var(--green); } .dot-label.water { color: var(--water); } .dot-label.purple { color: var(--purple); } .dot-label.red { color: var(--red); } .card-meta { color: var(--muted); font-size: .7rem; } .card-body h3 { margin: 21px 0 12px; font-family: "Noto Serif", Georgia, serif; font-size: 1.33rem; line-height: 1.1; letter-spacing: -.04em; font-weight: 500; } .card-author { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; } .card-author span { padding-inline: 3px; color: #aab7ae; } .permission-badge { display: flex; align-items: flex-start; gap: 8px; margin: 22px 0; padding: 11px 12px; background: #eef0e8; border-left: 2px solid var(--green); color: var(--ink); } .permission-badge svg { flex: 0 0 auto; color: var(--green); margin-top: 2px; } .permission-badge span { display: flex; flex-direction: column; gap: 2px; } .permission-badge b { font-size: .75rem; font-weight: 700; } .permission-badge small { color: var(--muted); font-size: .67rem; } .permission-badge.compact { margin: 16px 0 18px; padding: 8px 9px; border-left-width: 1px; } .permission-badge.compact b { font-size: .67rem; } .permission-badge.compact small { font-size: .61rem; } .modules-section { padding-bottom: 95px; } .module-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .module-tile { min-height: 142px; display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 21px; border: 1px solid var(--line); background: var(--paper); transition: transform .18s var(--ease-out), background .18s ease; } .module-tile:hover { transform: translateY(-3px); background: #fff; } .module-tile:nth-child(4) { grid-column: span 2; } .tile-index { color: var(--muted); font-size: .7rem; } .module-tile h3 { margin: 0 0 6px; font-family: "Noto Serif", Georgia, serif; font-size: 1.2rem; line-height: 1.1; font-weight: 500; } .module-tile p { margin: 0; color: var(--muted); font-size: .8rem; } .module-tile > svg { color: var(--red); } .tile-water { border-top: 3px solid var(--water); } .tile-red { border-top: 3px solid var(--red); } .tile-purple { border-top: 3px solid var(--purple); } .tile-green { border-top: 3px solid var(--green); } .tile-gold { border-top: 3px solid var(--gold); } .participation-banner { display: grid; grid-template-columns: 75px minmax(0, 1fr) minmax(200px, 290px); gap: 24px; align-items: center; margin-bottom: 100px; padding: 34px 38px; background: var(--red); color: var(--surface); } .participation-mark { width: 57px; height: 57px; display: grid; place-items: center; border: 1px solid rgba(246,243,232,.6); border-radius: 50%; } .participation-banner .eyebrow { color: #f3d3c2; } .participation-banner h2 { max-width: 430px; color: white; } .participation-banner p { max-width: 480px; margin: 12px 0 0; color: #f4dfd6; font-size: .93rem; } .participation-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .social-link { display: inline-flex; align-items: center; gap: 7px; color: white; font-size: .78rem; } .site-footer { padding: 60px 0 25px; background: #e8e8dc; border-top: 1px solid var(--line); } .footer-grid { display: grid; grid-template-columns: 1.65fr 1fr 1fr 1.25fr; gap: 35px; padding-bottom: 55px; } .footer-intro p { max-width: 260px; color: var(--muted); font-size: .83rem; } .site-footer h3 { margin: 2px 0 13px; font-size: .78rem; font-weight: 700; } .site-footer > .container > div:not(.footer-intro) > a { display: block; width: max-content; margin: 8px 0; color: var(--muted); font-size: .8rem; } .site-footer > .container > div:not(.footer-intro) > a:hover { color: var(--red); } .footer-note { padding-left: 22px; border-left: 1px solid #c9d0c8; } .footer-note p { margin: 12px 0 16px; color: var(--muted); font-size: .8rem; } .footer-note a { display: inline-flex; gap: 6px; align-items: center; color: var(--red); font-size: .8rem; font-weight: 700; } .footer-bottom { padding-top: 19px; border-top: 1px solid #c9d0c8; color: var(--muted); font-size: .68rem; } .section-intro { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding: 78px 0 45px; } .section-intro h1 { max-width: 650px; margin-bottom: 0; font-size: clamp(2.35rem, 5.5vw, 4.4rem); } .intro-side { max-width: 355px; padding-bottom: 5px; } .intro-side p { margin: 0 0 17px; color: var(--ink-soft); font-size: 1.03rem; } .module-cover { min-height: 240px; position: relative; display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; overflow: hidden; margin-bottom: 50px; padding: 25px 28px; color: white; } .module-cover::before { content: ""; position: absolute; inset: 0; opacity: .16; background-image: repeating-linear-gradient(-15deg, transparent 0 24px, #fff 25px 26px); } .cover-gold { background: var(--gold); color: var(--ink); } .cover-water { background: var(--water); } .cover-red { background: var(--red); } .cover-purple { background: var(--purple); } .cover-green { background: var(--green); } .cover-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.17) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.17) 1px, transparent 1px); background-size: 44px 44px; opacity: .35; } .cover-number { position: relative; display: block; font-family: "Noto Serif", Georgia, serif; font-size: clamp(3.5rem, 11vw, 7.7rem); line-height: .7; opacity: .85; } .module-cover p { position: relative; max-width: 270px; margin: 0 0 3px; font-size: .87rem; line-height: 1.35; } .cover-words { position: relative; display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; align-self: start; } .cover-words span { padding: 5px 8px; border: 1px solid rgba(255,255,255,.55); border-radius: 100px; font-size: .68rem; } .cover-gold .cover-words span { border-color: rgba(21,46,42,.35); } .listing-layout { display: grid; grid-template-columns: 215px minmax(0, 1fr); align-items: start; gap: 43px; padding-bottom: 100px; } .filter-rail { position: sticky; top: 18px; } .filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; color: var(--muted); } .filter-link { display: flex; justify-content: space-between; padding: 10px 0; color: var(--muted); border-bottom: 1px solid var(--line); font-size: .8rem; } .filter-link:hover, .filter-link.active { color: var(--ink); } .filter-link.active { font-weight: 700; } .filter-link span { color: #98a79d; font-size: .7rem; } .filter-callout { margin-top: 36px; padding: 15px; background: #e9eee4; } .filter-callout p { margin: 8px 0 12px; color: var(--muted); font-size: .76rem; line-height: 1.35; } .icon-text-button { display: inline-flex; gap: 6px; align-items: center; color: var(--red); font-size: .75rem; font-weight: 700; } .listing-main > .content-card { display: grid; grid-template-columns: 190px 1fr; margin-bottom: 12px; } .listing-main .card-visual, .listing-main .featured-card .card-visual { min-height: 185px; } .listing-main .card-body h3 { margin-top: 14px; font-size: 1.3rem; } .listing-main .card-body .permission-badge { max-width: 285px; } .listing-toolbar { margin-bottom: 14px; color: var(--muted); font-size: .78rem; } .sort-button { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-soft); font-size: .78rem; } .empty-inline { display: flex; align-items: center; gap: 17px; margin-top: 28px; padding: 20px; border: 1px dashed #b9c6bb; } .empty-plus { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; background: #e2eadc; border-radius: 50%; color: var(--green); } .empty-inline h3 { margin: 0; font-family: "Noto Serif", Georgia, serif; font-size: 1.04rem; font-weight: 500; } .empty-inline p { margin: 3px 0 0; color: var(--muted); font-size: .75rem; } .empty-inline .text-link { margin-left: auto; white-space: nowrap; } .pagination { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 33px; } .pagination button, .pagination span { width: 32px; height: 32px; display: grid; place-items: center; color: var(--muted); font-size: .77rem; } .pagination button:hover, .pagination .current { background: var(--ink); color: var(--surface); } .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .72rem; } .breadcrumbs a:hover { color: var(--red); } .detail-page { padding-top: 40px; padding-bottom: 105px; } .detail-layout { display: grid; grid-template-columns: minmax(0, 720px) minmax(240px, 300px); justify-content: space-between; gap: 70px; padding-top: 42px; } .detail-main h1 { font-size: clamp(2.8rem, 5.2vw, 5rem); } .detail-deck { max-width: 590px; color: var(--ink-soft); font-size: 1.18rem; line-height: 1.45; } .detail-byline { justify-content: start; margin-top: 31px; padding: 17px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .detail-byline > div:nth-child(2) { display: flex; flex-direction: column; } .detail-byline strong { font-size: .86rem; } .detail-byline span, .detail-byline time { color: var(--muted); font-size: .74rem; } .detail-byline time { margin-left: auto; } .avatar { width: 38px; height: 38px; display: grid; place-items: center; background: var(--ink); color: var(--surface); border-radius: 50%; font-size: .68rem; font-weight: 700; } .avatar.small { width: 29px; height: 29px; font-size: .58rem; } .gold-avatar { background: var(--gold); color: var(--ink); } .audio-player { display: flex; gap: 16px; align-items: center; margin-top: 30px; padding: 18px; background: var(--ink); color: var(--surface); } .play-button { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; background: var(--gold); color: var(--ink); border-radius: 50%; } .audio-info { min-width: 0; flex: 1; } .audio-top, .audio-bottom { color: #cad8ce; font-size: .69rem; } .audio-top { color: white; font-weight: 700; } .audio-bottom { margin-top: 5px; } .waveform { display: flex; align-items: center; gap: 3px; height: 41px; margin: 4px 0; } .waveform i { width: 3px; min-height: 7px; display: block; background: var(--water); border-radius: 5px; } .transcript-box { margin-top: 12px; border: 1px solid var(--line); } .transcript-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; color: var(--ink); font-weight: 700; font-size: .82rem; } .transcript-toggle span { display: flex; align-items: center; gap: 8px; } .transcript-copy { padding: 0 16px 15px; color: var(--ink-soft); font-size: .88rem; } .transcript-copy p { margin: 12px 0; } .article-copy { margin-top: 41px; color: var(--ink-soft); font-family: "Noto Serif", Georgia, serif; font-size: 1.06rem; line-height: 1.66; } .article-copy .lead-paragraph { color: var(--ink); font-size: 1.3rem; line-height: 1.45; } .article-copy blockquote { margin: 35px 0; padding: 16px 0 16px 23px; border-left: 3px solid var(--gold); color: var(--ink); font-size: 1.55rem; line-height: 1.3; } .detail-aside { padding-top: 54px; } .aside-block { margin-top: 31px; padding-top: 22px; border-top: 1px solid var(--line); } .aside-block dl { margin: 16px 0 0; } .aside-block dl div { padding: 9px 0; border-bottom: 1px solid var(--line); } dt { color: var(--muted); font-size: .72rem; } dd { margin: 3px 0 0; font-size: .82rem; } .related a { display: flex; align-items: center; gap: 7px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .78rem; } .related a svg:last-child { margin-left: auto; color: var(--red); } .report-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 30px; color: var(--muted); font-size: .72rem; } .map-page, .repository-page, .longform-page, .form-page, .diagnostic-page, .team-page, .styleguide-page { padding-bottom: 100px; } .map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; min-height: 560px; border: 1px solid var(--line); background: var(--paper); } .map-canvas { min-height: 560px; padding: 12px; } .map-surface { position: relative; height: 100%; min-height: 536px; overflow: hidden; background: #dbe7dc; background-image: radial-gradient(#b4ccb7 1px, transparent 1px); background-size: 17px 17px; } .map-surface::before { content: ""; position: absolute; inset: 0; background: linear-gradient(119deg, transparent 30%, rgba(255,255,255,.34) 30.3%, transparent 30.6%, transparent 60%, rgba(255,255,255,.34) 60.3%, transparent 60.6%); opacity: .8; } .contour { position: absolute; border: 1px solid #99b9a0; border-radius: 50%; transform: rotate(-22deg); opacity: .7; } .contour-a { width: 90%; height: 56%; top: 16%; left: -5%; } .contour-b { width: 73%; height: 42%; top: 28%; left: 13%; } .contour-c { width: 52%; height: 28%; top: 35%; left: 27%; } .river { position: absolute; top: -10%; left: 58%; height: 125%; width: 33px; background: #83b6b4; border: 7px solid #c3dbcf; border-radius: 60%; transform: rotate(26deg); opacity: .9; } .map-label { position: absolute; color: #668d76; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; } .label-north { top: 15%; left: 16%; } .label-south { bottom: 18%; right: 17%; } .map-pin { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; background: var(--paper); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 6px 16px rgba(30,60,45,.18); } .map-pin span { display: grid; place-items: center; color: var(--water); transform: rotate(45deg); } .map-pin.selected { outline: 3px solid rgba(184,91,62,.35); } .map-pin.pin-two span { color: var(--green); } .map-pin.pin-three span { color: var(--purple); } .pin-one { top: 41%; left: 55%; } .pin-two { top: 59%; left: 32%; } .pin-three { top: 27%; left: 72%; } .map-placeholder-note { position: absolute; bottom: 13px; left: 13px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; background: rgba(255,253,247,.86); color: var(--muted); font-size: .68rem; } .map-panel { display: flex; flex-direction: column; padding: 25px 23px; border-left: 1px solid var(--line); } .panel-heading strong { display: block; margin-top: 4px; font-family: "Noto Serif", Georgia, serif; font-size: 1.05rem; font-weight: 500; } .icon-button { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--line); color: var(--muted); } .icon-button:hover { border-color: var(--ink); color: var(--ink); } .layer-toggle { display: flex; align-items: center; gap: 9px; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .78rem; } .layer-toggle input { position: absolute; opacity: 0; } .checkmark { width: 10px; height: 10px; border-radius: 50%; } .water-check { background: var(--water); } .green-check { background: var(--green); } .purple-check { background: var(--purple); } .layer-toggle small { margin-left: auto; color: var(--muted); } .selected-place { margin-top: auto; padding: 17px; background: #e9f0e8; } .place-heading { justify-content: start; margin: 13px 0; } .place-icon { width: 33px; height: 33px; display: grid; place-items: center; background: var(--water); color: white; border-radius: 50%; } .place-heading h3 { margin: 0; font-family: "Noto Serif", Georgia, serif; font-size: 1rem; font-weight: 500; } .place-heading span { color: var(--muted); font-size: .7rem; } .selected-place p { margin: 0 0 16px; color: var(--ink-soft); font-size: .77rem; line-height: 1.4; } .map-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 21px; color: var(--muted); font-size: .68rem; } .map-legend span { display: inline-flex; align-items: center; gap: 5px; } .legend-pin { width: 7px; height: 7px; border-radius: 50%; } .legend-pin.water { background: var(--water); } .legend-pin.green { background: var(--green); } .legend-pin.purple { background: var(--purple); } .repository-page .section-intro { padding-bottom: 34px; } .repository-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .76rem; } .repository-toolbar > div:first-child { display: flex; align-items: center; gap: 18px; } .toolbar-actions { display: flex; align-items: center; gap: 6px; } .toolbar-zoom { font-size: .7rem; } .repository-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; margin-top: 21px; border: 1px solid var(--line); background: #e9e7dc; } .document-column { padding: clamp(16px, 5vw, 48px); } .document-paper { position: relative; min-height: 700px; max-width: 700px; margin-inline: auto; padding: clamp(28px, 5vw, 70px); background: #fffdf5; box-shadow: var(--shadow-soft); } .document-stamp { position: absolute; top: 34px; right: 30px; width: 60px; height: 60px; display: grid; place-items: center; border: 1px solid var(--purple); border-radius: 50%; color: var(--purple); font-size: .47rem; line-height: 1.05; text-align: center; transform: rotate(11deg); } .document-stamp span { font-size: .4rem; } .doc-label { color: var(--red); font-size: .68rem; font-weight: 700; } .document-paper h2 { max-width: 400px; margin: 23px 0 6px; font-family: "Noto Serif", Georgia, serif; font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 500; line-height: 1; letter-spacing: -.06em; } .doc-meta { color: var(--muted); font-size: .72rem; } .document-paper hr { margin: 28px 0; border: 0; border-top: 1px solid var(--line); } .document-paper p { color: var(--ink-soft); font-family: "Noto Serif", Georgia, serif; font-size: 1rem; line-height: 1.72; } .document-paper .annotated { position: relative; padding: 9px 12px; margin-inline: -12px; background: rgba(230,200,79,.28); } .document-paper .annotated::after { content: "1"; position: absolute; top: 5px; right: -8px; width: 19px; height: 19px; display: grid; place-items: center; background: var(--red); color: white; border-radius: 50%; font-family: sans-serif; font-size: .62rem; } .document-signature { display: flex; justify-content: space-between; gap: 15px; margin-top: 55px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; } .annotation-column { padding: 24px 19px; background: #f5f2e9; border-left: 1px solid var(--line); } .annotation-head { display: flex; align-items: start; justify-content: space-between; padding-bottom: 19px; border-bottom: 1px solid var(--line); } .annotation-head strong { display: block; margin-top: 4px; font-family: "Noto Serif", Georgia, serif; font-size: 1rem; font-weight: 500; } .annotation-card { position: relative; margin-top: 17px; padding: 15px; background: var(--paper); border: 1px solid var(--line); } .annotation-card.selected { border-color: var(--gold); } .annotation-card.selected .annotation-line { position: absolute; left: -23px; top: 19px; width: 23px; border-top: 2px solid var(--red); } .annotation-author { justify-content: start; } .annotation-author > div:nth-child(2) { display: flex; flex-direction: column; min-width: 0; } .annotation-author strong { font-size: .72rem; } .annotation-author span, .annotation-author time { color: var(--muted); font-size: .62rem; } .annotation-author time { margin-left: auto; align-self: start; white-space: nowrap; } .annotation-card p { margin: 13px 0; color: var(--ink-soft); font-size: .77rem; line-height: 1.45; } .annotation-card .permission-badge { margin: 0; } .reply-link { margin-top: 13px; color: var(--red); font-size: .7rem; font-weight: 700; } .add-annotation { display: flex; align-items: center; gap: 7px; margin-top: 18px; color: var(--red); font-size: .78rem; font-weight: 700; } .longform-layout { display: grid; grid-template-columns: 205px minmax(0, 720px); justify-content: space-between; gap: 80px; padding-top: 26px; } .toc { position: sticky; top: 20px; align-self: start; display: flex; flex-direction: column; gap: 0; } .toc a { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .78rem; } .toc a:hover, .toc a.active { color: var(--red); font-weight: 700; } .longform-copy h1 { font-size: clamp(2.3rem, 5vw, 4.1rem); } .intro-copy { margin: 28px 0 35px; color: var(--ink-soft); font-family: "Noto Serif", Georgia, serif; font-size: 1.3rem; line-height: 1.5; } .longform-copy h2 { margin: 56px 0 15px; font-family: "Noto Serif", Georgia, serif; font-size: 2rem; font-weight: 500; letter-spacing: -.05em; } .longform-copy > p:not(.intro-copy), .glossary { color: var(--ink-soft); font-size: 1.03rem; line-height: 1.7; } .callout-note { display: flex; gap: 14px; margin: 30px 0; padding: 19px; border-left: 3px solid var(--gold); background: #edeadd; color: var(--ink-soft); } .callout-note svg { color: var(--red); flex: 0 0 auto; } .callout-note p { margin: 0; font-size: .94rem; } .numbered-list { border-top: 1px solid var(--line); } .numbered-list > div { display: grid; grid-template-columns: 45px 1fr; gap: 13px; padding: 17px 0; border-bottom: 1px solid var(--line); } .numbered-list b { color: var(--red); font-size: .76rem; } .numbered-list p { margin: 0; color: var(--ink-soft); line-height: 1.5; } .glossary div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 14px 0; border-top: 1px solid var(--line); } .glossary dt { color: var(--ink); font-weight: 700; font-size: .9rem; } .glossary dd { margin: 0; } .form-page .section-intro { padding-bottom: 58px; } .form-layout { display: grid; grid-template-columns: minmax(0, 700px) minmax(230px, 300px); justify-content: space-between; gap: 75px; align-items: start; } .story-form { padding: 0 0 50px; } .form-progress { display: flex; gap: 24px; padding-bottom: 21px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .7rem; } .form-progress span { display: flex; align-items: center; gap: 5px; } .form-progress span.active { color: var(--red); } .form-progress b { font-weight: 700; } .form-section { padding: 32px 0; border-bottom: 1px solid var(--line); } .form-section h2 { margin: 7px 0 25px; font-family: "Noto Serif", Georgia, serif; font-size: 1.75rem; font-weight: 500; letter-spacing: -.04em; } label { display: block; margin: 16px 0 7px; color: var(--ink); font-size: .78rem; font-weight: 700; } input, select, textarea { width: 100%; padding: 12px 13px; border: 1px solid #bfc9bf; border-radius: 2px; background: var(--paper); color: var(--ink); } input::placeholder, textarea::placeholder { color: #9ba8a0; } input:focus, select:focus, textarea:focus { border-color: var(--water); outline: 3px solid rgba(78,134,144,.17); } textarea { resize: vertical; } .field-help { margin-top: 8px; color: var(--muted); font-size: .71rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; } .consent-box { display: flex; gap: 10px; margin-top: 23px; padding: 13px; background: #e9eee4; } .consent-box input { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; accent-color: var(--green); } .consent-box label { margin: 0; font-size: .78rem; } .consent-box label span { display: block; margin-top: 4px; color: var(--muted); font-size: .71rem; font-weight: 400; } .form-submit { margin-top: 27px; } .form-aside { position: sticky; top: 20px; } .aside-quote { padding: 22px; background: var(--ink); color: var(--surface); } .quote-mark { display: block; color: var(--gold); font-family: Georgia, serif; font-size: 4rem; line-height: .5; } .aside-quote p { margin: 18px 0; font-family: "Noto Serif", Georgia, serif; font-size: 1.2rem; line-height: 1.3; } .quote-attribution { color: #bfd0c4; font-size: .7rem; } .whatsapp-block { display: flex; gap: 11px; margin-top: 15px; padding: 15px; background: #e8eee5; color: var(--ink); } .whatsapp-block > svg { color: var(--green); flex: 0 0 auto; } .whatsapp-block strong { font-size: .8rem; } .whatsapp-block p { margin: 5px 0 11px; color: var(--muted); font-size: .74rem; line-height: 1.35; } .whatsapp-block a { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: .73rem; font-weight: 700; } .provisional-badge, .version-tag { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; border: 1px solid #b9c8ba; color: var(--green); font-size: .73rem; font-weight: 700; } .diagnostic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; } .diagnostic-card { min-height: 320px; display: flex; flex-direction: column; padding: 24px; color: white; } .diagnostic-card.green { background: var(--green); } .diagnostic-card.water { background: var(--water); } .diagnostic-card.red { background: var(--red); } .diag-number { margin-bottom: 43px; color: rgba(255,255,255,.75); font-size: .7rem; } .diagnostic-card .eyebrow { color: rgba(255,255,255,.72); } .diagnostic-card h2 { margin: 10px 0 12px; font-family: "Noto Serif", Georgia, serif; font-size: 1.65rem; line-height: 1.05; font-weight: 500; } .diagnostic-card p { margin: 0; color: rgba(255,255,255,.86); font-size: .9rem; line-height: 1.45; } .diag-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 25px; border-top: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.75); font-size: .68rem; } .diagnostic-note { display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 16px; margin-top: 15px; padding: 22px; border: 1px dashed #b9c8ba; } .note-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #e4ebdf; color: var(--green); } .diagnostic-note h3 { margin: 5px 0 4px; font-family: "Noto Serif", Georgia, serif; font-size: 1.2rem; font-weight: 500; } .diagnostic-note p { max-width: 600px; margin: 0; color: var(--muted); font-size: .8rem; } .team-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 14px; padding-bottom: 70px; } .team-card { min-height: 320px; display: flex; flex-direction: column; padding: 25px; background: var(--paper); border: 1px solid var(--line); } .team-lead { background: var(--ink); color: var(--surface); } .team-avatar { width: 65px; height: 65px; display: grid; place-items: center; margin-bottom: 35px; border-radius: 50%; font-family: "Noto Serif", Georgia, serif; font-size: 1.3rem; } .avatar-water { background: #b9d6d2; color: var(--water); } .avatar-green { background: #cedfc8; color: var(--green); } .avatar-red { background: #ecd0c3; color: var(--red); } .team-lead .eyebrow { color: #b5cbc1; } .team-card h2 { margin: 9px 0; font-family: "Noto Serif", Georgia, serif; font-size: 1.55rem; font-weight: 500; } .team-card p { color: var(--muted); font-size: .86rem; line-height: 1.45; } .team-lead p { color: #c9d5cc; } .provisional-label { margin-top: auto; color: var(--muted); font-size: .68rem; } .styleguide-nav { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .styleguide-nav a { padding: 8px 12px; border: 1px solid var(--line); color: var(--muted); font-size: .74rem; white-space: nowrap; } .styleguide-nav a:hover { color: var(--ink); border-color: var(--ink); } .component-section { padding: 35px 0; border-bottom: 1px solid var(--line); } .component-label { margin-bottom: 25px; color: var(--red); font-size: .72rem; font-weight: 700; } .type-specimen { display: grid; grid-template-columns: 1.3fr 1fr; gap: 45px; align-items: center; } .type-specimen h2 { margin: 12px 0; font-family: "Noto Serif", Georgia, serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; letter-spacing: -.06em; } .type-specimen p { max-width: 440px; color: var(--muted); } .swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .swatches span { min-height: 112px; display: flex; flex-direction: column; justify-content: end; padding: 9px; color: white; font-size: .68rem; } .swatches span:nth-child(2) { color: var(--ink); } .swatches small { margin-top: 3px; font-size: .6rem; opacity: .8; } .component-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .component-grid-demo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .permission-demo { display: flex; align-items: center; gap: 16px; margin-top: 18px; color: var(--muted); font-size: .75rem; } .permission-demo .permission-badge { min-width: 240px; margin: 0; } .states-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .state-box { min-height: 165px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 22px; border: 1px dashed #b7c4b8; } .state-box > svg { color: var(--red); } .state-box h3 { margin: 12px 0 4px; font-family: "Noto Serif", Georgia, serif; font-size: 1rem; font-weight: 500; } .state-box p { margin: 0 0 10px; color: var(--muted); font-size: .75rem; } .state-box a { color: var(--red); font-size: .74rem; font-weight: 700; } .loading-state { gap: 10px; } .loading-line { display: block; width: 85%; height: 10px; background: #dce3da; } .loading-line.short { width: 60%; } .error-state { background: #f0dfd8; border-color: #d7a997; } .error-state > svg { color: var(--red); } .demo-form { max-width: 520px; } .search-field { display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #bfc9bf; background: var(--paper); } .search-field input { padding-inline: 0; border: 0; background: transparent; } .search-field input:focus { outline: 0; } .search-field kbd { padding: 3px 6px; border: 1px solid var(--line); color: var(--muted); font-size: .65rem; white-space: nowrap; } .error-input { border-color: var(--red); } .error-message { display: block; margin-top: 6px; color: var(--red); font-size: .71rem; } .not-found { min-height: 560px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; } .not-found p { margin: 0 0 25px; color: var(--muted); } .plus-icon { position: relative; width: 14px; height: 14px; display: inline-block; } .plus-icon span { position: absolute; top: 6px; left: 1px; width: 12px; height: 2px; background: currentColor; } .plus-icon span + span { transform: rotate(90deg); } @media (max-width: 900px) { .main-nav { gap: 14px; } .header-cta { padding: 9px 11px; } .hero { grid-template-columns: 1fr; padding-top: 70px; } .hero-graphic { min-height: 380px; max-width: 600px; } .card-grid { grid-template-columns: repeat(2, 1fr); } .card-grid .featured-card { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; } .card-grid .featured-card .card-visual { min-height: 100%; } .participation-banner { grid-template-columns: 58px 1fr; } .participation-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; } .detail-layout, .form-layout { grid-template-columns: minmax(0, 1fr) 250px; gap: 35px; } .map-layout { grid-template-columns: 1fr 290px; } .repository-layout { grid-template-columns: minmax(0, 1fr) 300px; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } .footer-note { grid-column: span 3; padding: 20px 0 0; border-left: 0; border-top: 1px solid #c9d0c8; } } @media (max-width: 700px) { .container, .header-inner { width: min(100% - 28px, 1216px); } .site-header { position: relative; } .header-inner { min-height: 69px; } .menu-button { display: inline-flex; } .main-nav { position: absolute; top: 68px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 14px 16px; border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-soft); } .main-nav.is-open { display: flex; } .main-nav a { min-height: 44px; display: flex; align-items: center; } .header-cta { justify-content: center; margin-top: 8px; } .ribbon-inner { width: calc(100% - 28px); gap: 9px; } .ribbon-label { display: none; } .module-pill { padding-inline: 11px; } .hero { padding-top: 50px; padding-bottom: 58px; } .hero h1 { font-size: clamp(2.7rem, 13vw, 4.8rem); } .hero-lead { font-size: 1rem; } .hero-actions .button { width: 100%; } .hero-trust { flex-wrap: wrap; margin-top: 27px; } .hero-graphic { min-height: 320px; } .principles-grid { grid-template-columns: 1fr; } .principles-grid > div, .principles-grid > div:not(:first-child) { padding: 23px 0; border-right: 0; border-bottom: 1px solid rgba(246,243,232,.2); } .principles-grid > div:last-child { border-bottom: 0; } .principle-number { margin-bottom: 9px; } .content-section, .modules-section { padding-top: 65px; } .section-heading { align-items: start; flex-direction: column; gap: 12px; } .card-grid { grid-template-columns: 1fr; } .card-grid .featured-card { grid-column: auto; display: flex; } .card-grid .featured-card .card-visual { min-height: 210px; } .module-grid { grid-template-columns: 1fr; } .module-tile:nth-child(4) { grid-column: auto; } .participation-banner { grid-template-columns: 1fr; gap: 17px; margin-bottom: 65px; padding: 25px; } .participation-actions { grid-column: auto; flex-direction: column; align-items: flex-start; } .site-footer { padding-top: 45px; } .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } .footer-intro, .footer-note { grid-column: span 2; } .footer-note { padding-top: 22px; } .footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; } .section-intro { align-items: start; flex-direction: column; padding: 51px 0 33px; gap: 20px; } .section-intro h1 { font-size: clamp(2.65rem, 13vw, 4rem); } .intro-side { max-width: 100%; } .module-cover { min-height: 300px; grid-template-columns: 1fr; gap: 20px; } .cover-words { justify-content: start; align-self: end; } .listing-layout { grid-template-columns: 1fr; gap: 24px; padding-bottom: 65px; } .filter-rail { position: static; display: flex; flex-wrap: wrap; gap: 8px; } .filter-header { width: 100%; margin-bottom: 0; } .filter-link { padding: 8px 10px; border: 1px solid var(--line); background: var(--paper); } .filter-callout { display: none; } .listing-main > .content-card { grid-template-columns: 1fr; } .listing-main .card-visual, .listing-main .featured-card .card-visual { min-height: 170px; } .empty-inline { align-items: flex-start; flex-wrap: wrap; } .empty-inline .text-link { margin-left: 47px; } .detail-layout, .form-layout { grid-template-columns: 1fr; gap: 45px; } .detail-page { padding-bottom: 65px; } .detail-aside { padding-top: 0; } .detail-main h1 { font-size: clamp(2.8rem, 13vw, 4.3rem); } .detail-byline { flex-wrap: wrap; } .detail-byline time { width: 100%; margin-left: 48px; } .article-copy { font-size: 1rem; } .map-layout { grid-template-columns: 1fr; } .map-canvas { min-height: 390px; padding: 7px; } .map-surface { min-height: 376px; } .map-panel { border-left: 0; border-top: 1px solid var(--line); } .selected-place { margin-top: 22px; } .repository-toolbar { align-items: flex-start; flex-direction: column; } .repository-toolbar > div:first-child { align-items: flex-start; flex-direction: column; gap: 4px; } .repository-layout { grid-template-columns: 1fr; } .annotation-column { border-left: 0; border-top: 1px solid var(--line); } .annotation-card.selected .annotation-line { display: none; } .document-paper { min-height: 600px; padding: 28px 22px; } .longform-layout { grid-template-columns: 1fr; gap: 28px; } .toc { position: static; display: grid; grid-template-columns: repeat(2, 1fr); } .toc .eyebrow { grid-column: span 2; margin-bottom: 7px; } .toc a { padding: 8px 6px; } .longform-copy h1 { font-size: clamp(2.6rem, 12vw, 4rem); } .glossary div { grid-template-columns: 1fr; gap: 5px; } .field-row { grid-template-columns: 1fr; gap: 0; } .form-progress { gap: 12px; } .form-progress span b { display: none; } .form-aside { position: static; } .diagnostic-grid, .team-grid { grid-template-columns: 1fr; } .diagnostic-card { min-height: 275px; } .diagnostic-note { grid-template-columns: 42px 1fr; } .diagnostic-note .button { grid-column: 2; justify-self: start; } .styleguide-nav { margin-inline: -14px; padding-inline: 14px 0; } .type-specimen { grid-template-columns: 1fr; gap: 25px; } .swatches { grid-template-columns: repeat(5, minmax(45px, 1fr)); } .swatches span { min-height: 87px; padding: 6px; } .swatches b { font-size: .58rem; } .swatches small { font-size: .5rem; } .component-grid-demo, .states-grid { grid-template-columns: 1fr; } .permission-demo { align-items: start; flex-direction: column; gap: 9px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* ========================================================================== Capa funcional -------------------------------------------------------------------------- Todo lo que hay debajo de esta línea se añadió al migrar la maqueta de React a plantillas de servidor. Nada de esto cambia el diseño: reemplaza con HTML y CSS los cinco interruptores que antes hacía JavaScript, para que el portal funcione con JavaScript desactivado. Cada bloque dice qué sustituye. Ver docs/20-migracion-maqueta.md. ========================================================================== */ /* --- Menú del encabezado --------------------------------------------------- Antes: useState(open) en React. Ahora: una casilla oculta que el