/*! Theme Name: silomasters Theme URI: https://silomasters.eu/ Description: Esto es un theme a medida para SILOMASTERS Version: 0.1.0 Author: seo13 Author URI: https://seo13.es Text Domain: silomasters Requires at least: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: LICENSE This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. silomasters is based on _tw https://underscoretw.com/, (C) 2021-2026 Greg Sullivan _tw is distributed under the terms of the GNU GPL v2 or later. _tw is based on Underscores https://underscores.me/ and Varia https://github.com/Automattic/themes/tree/master/varia, (C) 2012-2026 Automattic, Inc. Underscores and Varia are distributed under the terms of the GNU GPL v2 or later. */ /* * Orden de capas de Tailwind v4. Se declara aquí para que @layer base de este * archivo no altere el orden con el que Tailwind declara sus capas. */ @layer theme, base, components, utilities; /* ===================================================== TOKENS SILOMASTERS — DESIGN TOKENS Black / White / Orange EC6529 — Big Shoulders Display + Barlow ===================================================== */ :root{ --black:#000000; --white:#FFFFFF; --orange:#EC6529; --orange-dark:#C6511E; --graphite:#111111; /* large dark surfaces (hero, footer) */ --steel:#3A3A3C; /* secondary text on black */ --text:#161616; --text-secondary:#5B5D61; --bg:#FFFFFF; --bg-tint:#F3F1EE; /* warm concrete/steel gray */ --bg-tint-2:#EAE7E2; --border:#DEDBD5; --border-dark:rgba(255,255,255,.14); --r-sm:3px; --r-md:4px; --r-lg:6px; --display:'Big Shoulders Display', 'Arial Narrow', sans-serif; --sans:'Barlow', 'Segoe UI', Arial, sans-serif; --label:'Barlow Condensed', 'Segoe UI', Arial, sans-serif; } /* ===================================================== BASE (dentro de @layer base para no anular utilidades) El reset de *, img, a y ul lo hace el preflight de Tailwind. ===================================================== */ @layer base { html{scroll-behavior:smooth;} /* Las anclas no quedan tapadas por el header fijo (121px / 88px). */ html{scroll-padding-top:120px;} @media(max-width:1199.98px){ html{scroll-padding-top:88px;} } body{ font-family:var(--sans); background:var(--bg); color:var(--text); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } /* El preflight de Tailwind v4 deja el cursor por defecto en los botones. */ button{cursor:pointer;} /* * Tipografía global del mockup (h4 no tiene tamaño propio: hereda 16px). * El prefijo `html` es necesario: el preflight de Tailwind * (h1…h6{font-size:inherit; font-weight:inherit}) está en esta misma capa y * se inyecta después; con igual especificidad ganaría él. Las utilidades * siguen mandando porque están en una capa superior. */ html :is(h1,h2,h3,h4){font-family:var(--display); font-weight:800; color:var(--text); letter-spacing:-0.01em; line-height:1.05; text-transform:uppercase;} html h1{font-size:46px;} html h2{font-size:32px;} html h3{font-size:19px;} p{color:var(--text-secondary);} @media(max-width:720px){ html h1{font-size:32px;} html h2{font-size:25px;} } } /* ===================================================== COMPONENTES GLOBALES ===================================================== */ .material-symbols-outlined{ font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-size:22px; line-height:1; display:inline-block; } .icon-16{font-size:16px;} /* ---- layout ---- */ .wrap{max-width:1200px; margin:0 auto; padding:0 28px;} @media(max-width:720px){ .wrap{padding:0 20px;} } /* ---- buttons ---- */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border-radius:var(--r-sm); font-weight:700; font-size:14.5px; border:1.5px solid transparent; text-transform:uppercase; letter-spacing:.02em; text-decoration:none; transition:background .15s ease, color .15s ease, border-color .15s ease, transform .2s ease, box-shadow .2s ease; white-space:nowrap; } @media(max-width:480px){ .btn{white-space:normal;} } .btn:hover{transform:translateY(-2px);} .btn:active{transform:translateY(0);} .btn:focus-visible{outline:2px solid var(--orange); outline-offset:3px;} .btn-primary{background:var(--orange); color:var(--white);} .btn-primary:hover{background:var(--orange-dark); box-shadow:0 14px 24px -12px rgba(236,101,41,.55);} .btn-dark{background:var(--black); color:var(--white);} .btn-dark:hover{background:#262626; box-shadow:0 14px 24px -12px rgba(0,0,0,.35);} .btn-outline{background:transparent; color:var(--black); border-color:var(--black);} .btn-outline:hover{background:var(--black); color:var(--white);} .btn-ghost-white{background:transparent; color:var(--white); border-color:rgba(255,255,255,.4);} .btn-ghost-white:hover{background:rgba(255,255,255,.12);} .btn-block{width:100%; justify-content:center;} .btn-sm{padding:10px 16px; font-size:13px;} /* ===================================================== HEADER Origen: bloques HEADER, "nav dropdown" y "topbar" de home-final.html / engineering.html, adaptados a ul > li de wp_nav_menu. Estado activo = clases nativas de WP. ===================================================== */ header.site{ position:fixed; top:0; left:0; right:0; z-index:200; background:transparent; border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; } header.site.scrolled{ background:var(--white); border-bottom:1px solid var(--border); box-shadow:0 12px 24px -18px rgba(0,0,0,.18); } /* Barra de administración de WordPress (solo usuarios con sesión). */ body.admin-bar header.site{top:var(--wp-admin--admin-bar--height, 32px);} .logo-img-color{display:none;} header.site.scrolled .logo-img-white{display:none;} header.site.scrolled .logo-img-color{display:block;} /* ---- navegación principal ---- */ nav.main-nav{display:flex; align-items:center; gap:30px;} nav.main-nav .nav-menu{display:flex; align-items:center; gap:30px;} nav.main-nav a.nav-link{ background:none; border:none; font-family:var(--sans); font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; display:inline-block; text-decoration:none; color:var(--white); padding:8px 0; border-bottom:2px solid transparent; transition:color .3s ease, border-color .3s ease; } nav.main-nav a.nav-link:hover{color:#fff; border-bottom-color:var(--orange);} header.site.scrolled nav.main-nav a.nav-link{color:var(--black);} header.site.scrolled nav.main-nav a.nav-link:hover{color:var(--orange);} /* activo (equivale a .nav-link.active del mockup) */ nav.main-nav .current-menu-item > .nav-link, nav.main-nav .current-menu-parent > .nav-link, nav.main-nav .current-menu-ancestor > .nav-link, nav.main-nav .current-page-ancestor > .nav-link{border-bottom-color:var(--orange);} header.site.scrolled nav.main-nav .current-menu-item > .nav-link, header.site.scrolled nav.main-nav .current-menu-parent > .nav-link, header.site.scrolled nav.main-nav .current-menu-ancestor > .nav-link, header.site.scrolled nav.main-nav .current-page-ancestor > .nav-link{color:var(--black); border-bottom-color:var(--orange);} /* enlaces y CTA del menú superior repetidos en el panel: solo móvil */ .nav-panel-extra{display:none;} /* ---- desplegable ---- */ .nav-dropdown{position:relative;} .nav-dropdown-caret{font-size:16px !important; vertical-align:-3px; margin-left:2px;} .nav-dropdown-menu{ position:absolute; top:100%; left:0; min-width:200px; z-index:50; background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:0 20px 40px -16px rgba(22,22,22,.25); padding:8px; margin-top:8px; opacity:0; pointer-events:none; transform:translateY(6px); transition:opacity .2s ease, transform .2s ease; display:flex; flex-direction:column; gap:2px; } .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu{opacity:1; pointer-events:auto; transform:translateY(0);} /* puente de hover: cubre el hueco de margin-top para que el submenú no se cierre */ .nav-dropdown-menu::before{ content:''; position:absolute; left:0; right:0; top:-9px; height:9px; } .nav-dropdown-menu a{ display:block; padding:10px 12px; border-radius:var(--r-sm); font-family:var(--sans); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--text); text-decoration:none; border-bottom:none !important; } .nav-dropdown-menu a:hover{background:var(--bg-tint); color:var(--orange);} .nav-dropdown-menu .current-menu-item > a{color:var(--orange);} /* ---- acciones ---- */ .burger{display:none; background:none; border:none; padding:8px; color:#fff; transition:color .3s ease;} header.site.scrolled .burger{color:var(--black);} /* ---- topbar: franja naranja sobre la navegación ---- */ .topbar{background:var(--orange); height:32px; display:flex; align-items:center; position:relative; z-index:5; overflow:hidden; transition:height .3s ease, opacity .3s ease;} .topbar.topbar-hidden{height:0; opacity:0;} .topbar-link{font-family:var(--label); font-size:13px; font-weight:600; letter-spacing:.03em; color:var(--white); text-transform:uppercase; text-decoration:none; opacity:.95; transition:opacity .2s ease;} .topbar-link:hover{opacity:1; text-decoration:underline;} /* ---- foco visible ---- */ header.site .logo-link:focus-visible, nav.main-nav a:focus-visible, .burger:focus-visible{outline:2px solid var(--orange); outline-offset:2px;} /* sobre el fondo naranja del topbar el naranja no se vería */ .topbar-link:focus-visible{outline:2px solid var(--white); outline-offset:2px;} /* ---- scroll bloqueado con el menú móvil abierto ---- */ html.menu-open, html.menu-open body{overflow:hidden;} /* ---- móvil / tablet (< 1200px): panel lateral ---- El mockup cortaba en 1040px; las etiquetas en español necesitan 1200px. Mantener sincronizado con MOBILE_NAV_QUERY en js/header.js. */ @media(max-width:1199.98px){ .topbar{display:none;} nav.main-nav{ position:fixed; top:88px; left:0; right:0; bottom:0; background:var(--white); flex-direction:column; align-items:flex-start; padding:24px 28px; gap:2px; transform:translateX(100%); overflow-y:auto; /* visibility retrasada: el panel cerrado no recibe foco y se conserva la animación */ visibility:hidden; transition:transform .2s ease, visibility 0s linear .2s; } nav.main-nav.open{transform:translateX(0); visibility:visible; transition:transform .2s ease, visibility 0s;} body.admin-bar nav.main-nav{top:calc(88px + var(--wp-admin--admin-bar--height, 32px));} nav.main-nav .nav-menu{flex-direction:column; align-items:stretch; gap:2px; width:100%;} nav.main-nav a.nav-link{width:100%; padding:16px 2px; border-bottom:1px solid var(--border); font-size:18px; font-weight:700; color:var(--text-secondary) !important;} .nav-dropdown-menu{ position:static; opacity:1; pointer-events:auto; transform:none; box-shadow:none; border:none; padding:0 0 0 16px; margin-top:4px; display:flex; flex-direction:column; gap:0; } .nav-dropdown-menu a{font-size:15px; padding:10px 2px; border-bottom:1px solid var(--border); border-radius:0;} .nav-dropdown-menu::before{display:none;} .nav-panel-extra{display:block;} .nav-actions .btn{display:none;} .burger{display:inline-flex;} } /* ---- movimiento reducido ---- */ @media(prefers-reduced-motion: reduce){ header.site, header.site *{transition:none !important;} } /* ===================================================== HERO INTERIOR (Hero C) Origen: engineering.html, contact.html, silo-calculator.html. La imagen es un definido en cada plantilla (.hero-plain-media + utilidades absolute inset-0 w-full h-full object-cover). ===================================================== */ .hero-plain{position:relative; overflow:hidden; color:var(--white); min-height:clamp(280px, 34vw, 380px); display:flex; align-items:center; padding:144px 0 40px;} @media(max-width:1199.98px){ .hero-plain{padding-top:112px;} } .hero-plain-media{z-index:0; background:var(--graphite);} .hero-plain-overlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.6) 100%); } .hero-single{position:relative; z-index:2; width:100%; text-align:left;} /* migas de pan (Yoast) */ .hero-breadcrumb{font-family:var(--label); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:16px;} .hero-breadcrumb a{color:inherit; text-decoration:none; transition:color .2s ease;} .hero-breadcrumb a:hover{color:var(--white);} .hero-breadcrumb a:focus-visible{outline:2px solid var(--orange); outline-offset:2px;} .hero-plain-title{ font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(32px,5vw,54px); line-height:1.05; color:var(--white); } .hero-word-blink{display:inline-block; color:var(--white); animation:heroWordBlink 2.6s ease-in-out infinite;} @keyframes heroWordBlink{ 0%{color:var(--white);} 20%,75%{color:var(--orange);} 100%{color:var(--white);} } .hero-plain-lede{margin-top:14px; font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.85); max-width:440px;} @media(max-width:720px){ .hero-plain{padding:130px 0 32px; min-height:auto;} } /* variante estrecha (Calculadora) */ .hero-plain.hero-narrow{min-height:0; padding:150px 0 48px;} @media(max-width:1199.98px){ .hero-plain.hero-narrow{padding:118px 0 40px;} } /* fila de botones (Contacto) */ .hero-cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:28px;} /* icono de 18px en los botones de los Hero (inline en el mockup) */ .icon-18{font-size:18px;} @media(prefers-reduced-motion: reduce){ .hero-word-blink{animation:none; color:var(--white);} } /* ===================================================== FOOTER Origen: footer de home-final.html (idéntico en todas las páginas), adaptado a