/* ========================================================================== MODO DE LECTURA ACCESIBLE (Dimensión 7.3) Escala tipográfica fluida (100 / 120 / 140 %) y alto contraste WCAG AAA. Se carga DESPUÉS de themes.css y main.css a propósito: así puede redefinir el `font-size` de la raíz y empatar en especificidad con `body.theme-x` ganando por orden de fuente, sin recurrir a `!important`. ========================================================================== */ :root { --a11y-font-scale: 1; } /* -------------------------------------------------------------------------- Escala tipográfica La invitación es casi toda `rem` (57 usos frente a 2 en px), así que mover la raíz escala el sistema completo en bloque y de forma proporcional. Se multiplican los TRES topes del clamp original para no alterar la curva fluida entre 14px y 18px. -------------------------------------------------------------------------- */ html { font-size: clamp( calc(14px * var(--a11y-font-scale)), calc((0.92rem + 0.25vw) * var(--a11y-font-scale)), calc(18px * var(--a11y-font-scale)) ); } /* En móvil los controles de formulario se fuerzan a 16px para que iOS no haga zoom al enfocar. Se escalan también, pero nunca POR DEBAJO de 16px: el zoom lo dispara un tamaño inferior, no superior. */ @media (max-width: 768px) { .rsvp-input, .rsvp-select, .rsvp-textarea, input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="hidden"]), select, textarea { font-size: max(16px, calc(16px * var(--a11y-font-scale))); } } /* -------------------------------------------------------------------------- Alto contraste WCAG AAA Se declara en para imponerse a las variables de los 16 temas, que usan el selector `body.theme-x`. Paleta reducida a blanco / negro carbón y el oro sustituido por un ámbar oscuro legible (≥ 7:1 sobre blanco). -------------------------------------------------------------------------- */ body.a11y-high-contrast { --bg-parchment: #FFFFFF; --bg-parchment-warm: #FFFFFF; --bg-card: #FFFFFF; --bg-card-alt: #FFFFFF; --text-primary: #111111; --text-muted: #262626; --text-light: #3D3D3D; --gold-primary: #6B4A00; --gold-dark: #4A3300; --gold-light: #6B4A00; --gold-gradient: #6B4A00; --gold-soft-gradient: #EFEFEF; --gold-shimmer-gradient: none; --border-vintage: #111111; --border-vintage-light: #111111; --shadow-soft: none; --shadow-hover: none; --shadow-gold: none; background-color: #FFFFFF; color: #111111; } /* El grano fílmico es un `body::before` con feTurbulence. Sobre un fondo plano de alto contraste solo añade ruido bajo el texto: se apaga. */ body.a11y-high-contrast::before { display: none; } /* Bordes decorativos dorados → líneas sólidas que definen la jerarquía. */ body.a11y-high-contrast .module-section, body.a11y-high-contrast .reveal-card { border: 1.5px solid var(--text-primary); box-shadow: none; } body.a11y-high-contrast .music-toggle-btn { background: #FFFFFF; border: 2px solid #111111; color: #111111; box-shadow: none; } body.a11y-high-contrast .music-toggle-btn.is-playing { background: #111111; border-color: #111111; color: #FFFFFF; } /* -------------------------------------------------------------------------- Control flotante para el invitado Espejo del botón de música (abajo-izquierda, que está abajo-derecha). z-index 99: por debajo de .envelope-screen (10000), así que no interrumpe la apertura ceremonial y aparece al entrar en la invitación. -------------------------------------------------------------------------- */ .a11y-control { position: fixed; bottom: 24px; left: 24px; z-index: 99; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 9999px; background: var(--bg-card); border: 1px solid var(--border-vintage); box-shadow: var(--shadow-soft); backdrop-filter: blur(8px); } .a11y-btn { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--text-primary); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease; } .a11y-btn:hover:not(:disabled) { background: var(--gold-soft-gradient); } .a11y-btn:disabled { opacity: 0.35; cursor: not-allowed; } .a11y-btn.is-on { background: var(--gold-primary); color: #FFFFFF; } body.a11y-high-contrast .a11y-control { background: #FFFFFF; border: 2px solid #111111; box-shadow: none; } body.a11y-high-contrast .a11y-btn.is-on { background: #111111; color: #FFFFFF; } /* En pantallas estrechas el control no debe pisar el botón de música. */ @media (max-width: 420px) { .a11y-control { bottom: 20px; left: 16px; padding: 4px; } .a11y-btn { width: 30px; height: 30px; font-size: 0.75rem; } } @media print { .a11y-control { display: none; } }