/* Theme Name: AV Canyelles Theme URI: https://avcanyelles.cat Description: Tema hijo de Kadence para la Associació de Veïns de Canyelles. Sistema de color con tokens, modo claro/oscuro y controles de accesibilidad. Author: nbGroup Template: kadence Version: 1.0.0 Text Domain: avcanyelles */ /* ========================================================================== 1. Tokens de color El modo oscuro se activa con [data-theme="dark"] en , y si el visitante no ha elegido nada se respeta la preferencia del sistema. ========================================================================== */ :root { --avc-bg: #FBF6EF; --avc-surface: #FFFFFF; --avc-ink: #241B15; --avc-muted: #6A5B4E; --avc-line: #E6DACA; --avc-line-strong: #C9B79F; --avc-accent: #A8412A; --avc-accent-dark: #7E2D1B; --avc-on-accent: #FFF8F1; --avc-wash: #F2E9DC; --avc-green: #3F6B4A; --avc-green-soft: #E4EDE5; --avc-footer-bg: #241B15; --avc-footer-ink: #FBF6EF; /* Escala tipográfica. --avc-scale lo cambian los botones A− / A+ */ --avc-scale: 1; --avc-text: calc(18px * var(--avc-scale)); --avc-radius: 3px; } [data-theme="dark"] { --avc-bg: #17120E; --avc-surface: #221B15; --avc-ink: #F4EBE0; --avc-muted: #BCAC9A; --avc-line: #35291F; --avc-line-strong: #4E3D2F; --avc-accent: #EC9376; --avc-accent-dark: #F0A48D; --avc-on-accent: #1A120C; --avc-wash: #1E1813; --avc-green: #8FBE9C; --avc-green-soft: #24312A; --avc-footer-bg: #110D0A; --avc-footer-ink: #EFE4D8; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --avc-bg: #17120E; --avc-surface: #221B15; --avc-ink: #F4EBE0; --avc-muted: #BCAC9A; --avc-line: #35291F; --avc-line-strong: #4E3D2F; --avc-accent: #EC9376; --avc-accent-dark: #F0A48D; --avc-on-accent: #1A120C; --avc-wash: #1E1813; --avc-green: #8FBE9C; --avc-green-soft: #24312A; --avc-footer-bg: #110D0A; --avc-footer-ink: #EFE4D8; } } /* Puente con la paleta global de Kadence y de Gutenberg, para que los bloques y los ajustes del Customizer usen los mismos colores. */ :root { --global-palette1: var(--avc-accent); --global-palette2: var(--avc-accent-dark); --global-palette3: var(--avc-ink); --global-palette4: var(--avc-muted); --global-palette5: var(--avc-line-strong); --global-palette6: var(--avc-line); --global-palette7: var(--avc-wash); --global-palette8: var(--avc-surface); --global-palette9: var(--avc-bg); --wp--preset--color--avc-accent: var(--avc-accent); --wp--preset--color--avc-ink: var(--avc-ink); --wp--preset--color--avc-bg: var(--avc-bg); --wp--preset--color--avc-wash: var(--avc-wash); --wp--preset--color--avc-green: var(--avc-green); } /* ========================================================================== 2. Base tipográfica Cuerpo a 18px y línea generosa: el público del barri es de edades muy diversas. ========================================================================== */ body { background-color: var(--avc-bg); color: var(--avc-ink); font-family: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: var(--avc-text); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .entry-title, .site-title { font-family: 'Petrona', Georgia, 'Times New Roman', serif; font-weight: 600; line-height: 1.14; letter-spacing: -0.01em; color: var(--avc-ink); } h1 { font-size: calc(3.2rem * var(--avc-scale)); } h2 { font-size: calc(2.4rem * var(--avc-scale)); } h3 { font-size: calc(1.5rem * var(--avc-scale)); } a { color: var(--avc-accent); } a:hover, a:focus { color: var(--avc-accent-dark); } p { text-wrap: pretty; } /* Foco siempre visible: requisito de accesibilidad, no decorativo. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--avc-accent); outline-offset: 2px; } /* ========================================================================== 3. Superficies de Kadence ========================================================================== */ .site-header-wrap, .site-main, .content-bg, .entry-content-wrap { background-color: var(--avc-bg); color: var(--avc-ink); } .site-header-row-container-inner, #main-header .header-navigation .header-menu-container > ul > li > a { color: var(--avc-ink); } .site-footer, .site-footer-wrap { background-color: var(--avc-footer-bg); color: var(--avc-footer-ink); } .site-footer a { color: var(--avc-footer-ink); } .entry-content-wrap, .loop-entry, .entry.loop-entry { background-color: var(--avc-surface); border-color: var(--avc-line); } /* ========================================================================== 4. Botones Altura mínima 52px: objetivo táctil cómodo también para manos poco firmes. ========================================================================== */ .wp-block-button__link, .button, button, input[type="submit"], .kb-button { background-color: var(--avc-accent); color: var(--avc-on-accent); border-radius: var(--avc-radius); font-weight: 700; min-height: 52px; padding: 0 28px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid transparent; } .wp-block-button__link:hover, .button:hover, button:hover, input[type="submit"]:hover { background-color: var(--avc-accent-dark); color: var(--avc-on-accent); } .is-style-outline .wp-block-button__link, .button.button-secondary { background-color: transparent; color: var(--avc-ink); border-color: var(--avc-line-strong); } /* ========================================================================== 5. Barra de utilidades (idioma, tamaño de texto, tema) Se inserta con el shortcode [avc_controls]. ========================================================================== */ .avc-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .avc-group { display: flex; align-items: center; border: 1px solid var(--avc-line-strong); border-radius: var(--avc-radius); overflow: hidden; } .avc-group > * { min-height: 36px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; font-size: 14px; font-weight: 700; background: transparent; color: var(--avc-muted); border: 0; border-left: 1px solid var(--avc-line-strong); text-decoration: none; cursor: pointer; line-height: 1; } .avc-group > *:first-child { border-left: 0; } .avc-group > [aria-pressed="true"], .avc-group > .is-active { background: var(--avc-accent); color: var(--avc-on-accent); } .avc-group svg { width: 19px; height: 19px; flex-shrink: 0; } /* ========================================================================== 6. Formularios (Fluent Forms) ========================================================================== */ .fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="tel"], .fluentform input[type="number"], .fluentform select, .fluentform textarea { min-height: 54px; padding: 0 16px; border: 1px solid var(--avc-line-strong); border-radius: var(--avc-radius); background: var(--avc-surface); color: var(--avc-ink); font-size: calc(17px * var(--avc-scale)); } .fluentform textarea { min-height: 160px; padding: 14px 16px; } .fluentform label, .ff-el-input--label label { font-weight: 700; color: var(--avc-ink); } /* ========================================================================== 7. The Events Calendar ========================================================================== */ .tribe-events .tribe-events-calendar-list__event-title a { color: var(--avc-ink); } .tribe-events .tribe-events-c-top-bar__datepicker-button, .tribe-events .tribe-common-c-btn { background-color: var(--avc-accent); color: var(--avc-on-accent); } .tribe-events-calendar-list__event-date-tag-daynum { color: var(--avc-accent); } /* ========================================================================== 8. Utilidades del diseño ========================================================================== */ .avc-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--avc-accent); } .avc-lede { font-size: calc(21px * var(--avc-scale)); color: var(--avc-muted); } .avc-card { background: var(--avc-surface); border: 1px solid var(--avc-line); border-radius: 4px; } .avc-wash { background: var(--avc-wash); } .avc-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--avc-radius); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: var(--avc-green-soft); color: var(--avc-green); } /* Respeta a quien ha pedido menos movimiento en su sistema. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }