/* Theme Name: Casa de Oficios Podcast Theme URI: https://github.com/ Author: Fondart Iquique Author URI: https://github.com/ Description: Tema de bloques (FSE) para el Centro Cultural Casa de Oficios y su podcast, financiado por Fondart Iquique. Construido con templates HTML y theme.json, sin PHP en las plantillas. Requires at least: 6.4 Tested up to: 6.6 Requires PHP: 7.4 Version: 1.6.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: casa-oficios-podcast Tags: full-site-editing, block-theme, one-column */ /* ════════════════════════════════════════════════════════════ CASA DE OFICIOS · PODCAST Sistema de diseño — Fondart Iquique Paleta extraída del imagotipo real del cliente ════════════════════════════════════════════════════════════ */ /* ─── FUENTES ─── Declaradas SOLO en theme.json (settings.typography.fontFamilies): WordPress las imprime en el vía wp_print_font_faces y así valen también para el editor. No duplicar acá con @font-face — la versión anterior además apuntaba al .ttc, que WP rechaza (mime no permitido) y los navegadores no soportan en @font-face: PT Sans nunca cargó. */ /* ─── TOKENS ─── */ :root { /* Paleta oficial del cliente — extraída de los PNG */ /* Fuente: ImagotipoPodcast-color.png + LogoCasaDeOficios-colores4.png */ --terracota: #9c4041; /* micro top, hojas, isotipo chakana */ --terracota-deep: #430303; /* borde chakana, base, títulos contrast */ --terracota-soft: #c1764a; /* sol central isotipo, marrón anaranjado */ --oliva: #7d8023; /* micro bottom, hojas olivo */ --oliva-soft: #97a25b; --naranja: #f29100; /* sol del imagotipo, acento cálido */ --naranja-soft: #f7b04a; --tan: #e9d7ba; /* fondo del micro, beige cálido */ --tan-light: #f0e4cd; --marron-medio: #7a5434; /* montaña media */ --marron-oscuro: #532f1a; /* montaña oscura, tipografía principal */ --marron-tipografia: #532f1a; --ink: #2a1f18; /* texto crítico, footer */ --cream: #f5efe3; /* fondo página (derivado del tan) */ --cream-2: #ece4d2; --paper: #fbf6ec; /* Tipografía */ --display: "TT Hoves Pro", "Inter", system-ui, sans-serif; --body: "PT Sans", "Segoe UI", system-ui, sans-serif; /* Sistema */ --radius: 14px; --radius-sm: 8px; --radius-lg: 22px; --shadow-soft: 0 6px 24px -10px rgba(83, 47, 26, 0.18); --shadow-card: 0 14px 40px -18px rgba(83, 47, 26, 0.28); --shadow-glow: 0 10px 32px -10px rgba(242, 145, 0, 0.45); --shadow-hover: 0 20px 50px -16px rgba(156, 64, 65, 0.35); --wrap: 1240px; --gutter: 28px; } /* ─── RESET ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--body); background: var(--cream); color: var(--marron-tipografia); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 16px; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } ul { list-style: none; } ::selection { background: var(--terracota); color: var(--cream); } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } /* ════════════════════════════════════════════════════════════ TIPOGRAFÍA ════════════════════════════════════════════════════════════ */ .kicker { font-family: var(--body); font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracota); display: inline-flex; align-items: center; gap: 10px; } .kicker::before { content: ""; width: 28px; height: 1.5px; background: var(--terracota); } .section-title { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 5.2vw, 64px); line-height: 0.98; color: var(--marron-tipografia); letter-spacing: -0.005em; text-transform: uppercase; } .section-title em { font-style: normal; color: var(--terracota); display: block; } .section-desc { font-size: 16.5px; line-height: 1.7; color: var(--marron-medio); max-width: 56ch; } /* ════════════════════════════════════════════════════════════ NAV ════════════════════════════════════════════════════════════ */ .nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgba(156, 63, 53, 0.18); } /* El fondo esmerilado va acá y NO en `.nav` por una razón concreta: un `backdrop-filter` distinto de `none` convierte al elemento en bloque contenedor de sus descendientes `position: fixed`. El overlay del menú móvil de WordPress es exactamente `fixed; inset: 0`, así que colgado de `.nav` se recortaba al alto de la barra: medía 390×52 en vez de 390×844. La lista de links (176px) no entraba y, como el overlay lleva `overflow: auto`, el menú quedaba como una tira scrolleable de una línea. En un pseudo-elemento el efecto es idéntico y el overlay vuelve a medir contra el viewport. */ .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgba(245, 239, 227, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; /* solo vertical: el horizontal viene de .wrap (padding: 0 var(--gutter)); un shorthand `12px 0` acá lo pisaba y los links tocaban el borde */ padding-top: 12px; padding-bottom: 12px; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marron-tipografia); } .nav-brand img { width: 28px; height: 28px; object-fit: contain; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links a { font-family: var(--body); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--marron-tipografia); padding: 6px 0; position: relative; transition: color 0.2s; } .nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background: var(--terracota); transform: translateX(-50%); transition: width 0.25s ease; } .nav-links a:hover { color: var(--terracota); } .nav-links a:hover::after { width: 100%; } /* ---- Menú desplegado en celular ---- El overlay solo existe bajo 600px (`overlayMenu: "mobile"`), así que no hace falta media query. Sin estas reglas sale con los defaults de core —fondo blanco, texto negro de 16px, pegado al borde— que no se parece en nada al resto del sitio. */ .nav-links .wp-block-navigation__responsive-container.is-menu-open { background: var(--cream); padding: 22px var(--gutter) 40px; } .nav-links .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 58px; } .nav-links .is-menu-open .wp-block-navigation__container { gap: 0; width: 100%; } .nav-links .is-menu-open .wp-block-navigation-item { width: 100%; border-bottom: 1px solid rgba(156, 63, 53, 0.14); } .nav-links .is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; } .nav-links .is-menu-open .wp-block-navigation-item a { display: block; width: 100%; font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: 0.01em; color: var(--marron-tipografia); /* 17px arriba y abajo dejan el área de toque por encima de los 44px */ padding: 17px 0; } .nav-links .is-menu-open .wp-block-navigation-item a::after { /* el subrayado animado está pensado para la nav horizontal */ content: none; } .nav-links .wp-block-navigation__responsive-container-close { color: var(--terracota); } /* ════════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════════ */ .hero { position: relative; padding: 80px 0 100px; background: radial-gradient( ellipse at top right, rgba(232, 153, 64, 0.1), transparent 50% ), radial-gradient( ellipse at bottom left, rgba(123, 133, 64, 0.1), transparent 55% ), var(--cream); overflow: hidden; } /* El divisor de montañas se sacó de la portada: ensuciaba el borde inferior de la foto principal. Sigue en uso en .contacto y en el bloque del podcast. */ .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 1; } .hero-mark { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 1 / 1; } .hero-mark img { width: 100%; height: auto; /* Recorta sólo el wordmark «CASA DE OFICIOS» del PNG institucional. Medido sobre el archivo (881 px de alto): el isotipo va de y=119 a y=661 (75,1%) y el wordmark arranca en y=682 (77,4%). El corte al 77% cae en ese hueco. Con el 32% anterior caía dentro de la greca y el logo se veía mochado. */ clip-path: inset(0 0 23% 0); filter: drop-shadow(0 20px 40px rgba(94, 53, 37, 0.22)); animation: float 8s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .hero-mark::after { content: ""; position: absolute; inset: 60% 12% 0 12%; background: radial-gradient(ellipse, rgba(156, 63, 53, 0.2), transparent 70%); filter: blur(20px); z-index: -1; } .hero-text { position: relative; } .hero-pretitle { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; } /* wrappers de wp:button — solo layout, sin estilos visuales */ .btn-primary.wp-block-button, .btn-ghost.wp-block-button { margin: 0; } /* base compartida — aplicada al enlace real, no al wrapper */ .btn-primary .wp-block-button__link, .btn-ghost .wp-block-button__link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 24px; border: none; border-radius: 100px; transition: all 0.22s ease; cursor: pointer; } .btn-primary .wp-block-button__link { background: var(--terracota); color: var(--cream); box-shadow: 0 6px 18px -6px rgba(156, 63, 53, 0.5); } .btn-primary .wp-block-button__link:hover { background: var(--terracota-deep); transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(156, 63, 53, 0.65), 0 0 0 4px rgba(232, 153, 64, 0.18); } .btn-ghost .wp-block-button__link { background: transparent; color: var(--marron-tipografia); border: 1.5px solid var(--marron-tipografia); } .btn-ghost .wp-block-button__link:hover { background: var(--marron-tipografia); color: var(--cream); transform: translateY(-2px); } /* Los