/* ============================================================ anxosanchez — page-home.css Estilos específicos da páxina de inicio (front page). Cárgase só aí (enqueue condicional en functions.php). ============================================================ */ /* ============================================================ HERO — decoración (cuadrícula técnica + celas que se acenden + cross-marks nas esquinas). Todo decorativo, z-index:-1, non interfire cos clics nin co contido. Markup a poñer dentro do container do hero (que leva a clase `anxo-hero`), nun widget HTML:
(poden ir os tres no mesmo widget HTML, un detrás do outro) ============================================================ */ /* (.anxo-hero — wrapper xenérico — vive en base.css) */ /* --- Cuadrícula 40px que se esvaece dende o bordo superior --- */ .anxo-hero-grid { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: radial-gradient(130% 110% at 50% 0%, transparent 0%, #000 30%, transparent 82%); mask-image: radial-gradient(130% 110% at 50% 0%, transparent 0%, #000 30%, transparent 82%); } /* --- Celas que se acenden e apagan, espalladas por todo o grid -- Cada cela é unha cela de 40px da cuadrícula (top/left en múltiplos de 40px). Anímase só opacity (propiedade composta → barato). Cada unha co seu ritmo, desfase e pico de brillo (--peak) → parece ao chou aínda que é determinista. Engadir/quitar + a súa regra. --- */ .anxo-hero-cells { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .anxo-hero-cells span { position: absolute; width: 40px; height: 40px; opacity: 0; background: var(--e-global-color-accent); box-shadow: inset 0 0 0 1px var(--e-global-color-accent); animation-name: anxo-hero-cell; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } /* posicións espalladas por un hero de ~1920×1080 (en pantallas máis estreitas, as de left grande simplemente non se ven; non pasa nada) */ .anxo-hero-cells span:nth-child(1) { top: 80px; left: 120px; animation-duration: 3.0s; animation-delay: 0s; --peak: .26; } .anxo-hero-cells span:nth-child(2) { top: 320px; left: 320px; animation-duration: 4.6s; animation-delay: 1.6s; --peak: .18; } .anxo-hero-cells span:nth-child(3) { top: 160px; left: 560px; animation-duration: 3.6s; animation-delay: 2.7s; --peak: .23; } .anxo-hero-cells span:nth-child(4) { top: 480px; left: 200px; animation-duration: 4.3s; animation-delay: 0.8s; --peak: .17; } .anxo-hero-cells span:nth-child(5) { top: 240px; left: 760px; animation-duration: 3.3s; animation-delay: 2.2s; --peak: .24; } .anxo-hero-cells span:nth-child(6) { top: 600px; left: 40px; animation-duration: 4.0s; animation-delay: 3.7s; --peak: .15; } .anxo-hero-cells span:nth-child(7) { top: 400px; left: 480px; animation-duration: 3.2s; animation-delay: 0.4s; --peak: .21; } .anxo-hero-cells span:nth-child(8) { top: 120px; left: 920px; animation-duration: 4.9s; animation-delay: 1.9s; --peak: .23; } .anxo-hero-cells span:nth-child(9) { top: 720px; left: 280px; animation-duration: 3.4s; animation-delay: 4.2s; --peak: .17; } .anxo-hero-cells span:nth-child(10) { top: 80px; left: 1200px; animation-duration: 4.5s; animation-delay: 1.2s; --peak: .18; } .anxo-hero-cells span:nth-child(11) { top: 560px; left: 680px; animation-duration: 3.8s; animation-delay: 3.1s; --peak: .16; } .anxo-hero-cells span:nth-child(12) { top: 360px; left: 1080px; animation-duration: 3.1s; animation-delay: 2.0s; --peak: .24; } .anxo-hero-cells span:nth-child(13) { top: 200px; left: 1480px; animation-duration: 4.7s; animation-delay: 0.6s; --peak: .17; } .anxo-hero-cells span:nth-child(14) { top: 840px; left: 520px; animation-duration: 4.1s; animation-delay: 3.5s; --peak: .20; } .anxo-hero-cells span:nth-child(15) { top: 280px; left: 40px; animation-duration: 3.6s; animation-delay: 4.7s; --peak: .21; } .anxo-hero-cells span:nth-child(16) { top: 640px; left: 880px; animation-duration: 4.2s; animation-delay: 1.3s; --peak: .17; } .anxo-hero-cells span:nth-child(17) { top: 480px; left: 1320px; animation-duration: 3.4s; animation-delay: 5.5s; --peak: .23; } .anxo-hero-cells span:nth-child(18) { top: 920px; left: 200px; animation-duration: 4.4s; animation-delay: 2.5s; --peak: .16; } .anxo-hero-cells span:nth-child(19) { top: 720px; left: 1160px; animation-duration: 3.3s; animation-delay: 1.0s; --peak: .20; } .anxo-hero-cells span:nth-child(20) { top: 120px; left: 1720px; animation-duration: 4.9s; animation-delay: 4.0s; --peak: .17; } .anxo-hero-cells span:nth-child(21) { top: 880px; left: 720px; animation-duration: 3.7s; animation-delay: 2.9s; --peak: .18; } .anxo-hero-cells span:nth-child(22) { top: 600px; left: 1560px; animation-duration: 4.1s; animation-delay: 0.2s; --peak: .21; } .anxo-hero-cells span:nth-child(23) { top: 360px; left: 1640px; animation-duration: 3.5s; animation-delay: 5.1s; --peak: .17; } .anxo-hero-cells span:nth-child(24) { top: 960px; left: 1040px; animation-duration: 4.4s; animation-delay: 1.8s; --peak: .20; } /* --- Cross-marks "+" nas catro esquinas (aire de plano técnico) --- */ .anxo-hero-marks { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: rgba(255, 255, 255, .22); } .anxo-hero-marks span { position: absolute; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; } .anxo-hero-marks span:nth-child(1) { top: 24px; left: 24px; } .anxo-hero-marks span:nth-child(2) { top: 24px; right: 24px; } .anxo-hero-marks span:nth-child(3) { bottom: 24px; left: 24px; } .anxo-hero-marks span:nth-child(4) { bottom: 24px; right: 24px; } /* ============================================================ SCROLL INDICATOR — indicación de "baixa" no pé do hero Markup (widget HTML dentro do hero):
Navega
============================================================ */ .anxo-scroll-indicator { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .anxo-scroll-indicator__label { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .3); } .anxo-scroll-indicator__line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--e-global-color-accent), transparent); animation: anxo-scroll-line 2s ease-in-out infinite; } /* ============================================================ MARQUEE — faixa de palabras en rotación infinita. Markup: widget HTML co `.anxo-marquee` > `.anxo-marquee__track`, e dentro a lista de palabras escrita CATRO veces (número par, e que sumen máis ancho que a pantalla → bucle sen ocos): No container de Elementor que o aloxa: fondo navy, cor branca, padding vertical, e Avanzado → Overflow: Hidden. ============================================================ */ .anxo-marquee { overflow: hidden; white-space: nowrap; padding: 18px 0; background: var(--e-global-color-as_accent_dark); /* vermello escuro #7A0505 */ color: #fff; } .anxo-marquee__track { display: inline-flex; animation: anxo-marquee 32s linear infinite; } .anxo-marquee__track > span { flex-shrink: 0; padding: 0 .5rem; font-family: "Bricolage Grotesque", system-ui, sans-serif; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; font-variation-settings: "wdth" 92; } .anxo-marquee__track i { /* separador */ margin: 0 .9rem; font-style: normal; font-weight: 400; opacity: .35; } /* ---- Responsive ---- */ @media (max-width: 767px) { .anxo-hero-marks span:nth-child(1) { top: 14px; left: 14px; } .anxo-hero-marks span:nth-child(2) { top: 14px; right: 14px; } .anxo-hero-marks span:nth-child(3) { bottom: 14px; left: 14px; } .anxo-hero-marks span:nth-child(4) { bottom: 14px; right: 14px; } .anxo-scroll-indicator { bottom: 4px; gap: 4px; } .anxo-scroll-indicator__line { height: 32px; } .anxo-marquee { padding: 12px 0; } .anxo-marquee__track > span { font-size: 0.9375rem; } } /* ---- Animacións ---- */ @keyframes anxo-scroll-line { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .3; } } @keyframes anxo-hero-cell { 0%, 100% { opacity: 0; } 40%, 60% { opacity: var(--peak, .18); } } @keyframes anxo-marquee { to { transform: translateX(-50%); } } /* ============================================================ SERVIZOS (numbered list da home) — hover do row + frecha En Elementor: - Cada item é un Container horizontal con clase `anxo-service-row` (3 columnas: número, título+excerpt, frecha). - O Icon widget da frecha leva clase `anxo-service-arrow` (icona arrow-right de FA, redondo, fondo branco, borde, cor navy — todo configurado en Elementor no estado idle). O que NON pode facer Elementor e vai aquí: a) hover do row dispara cambios na frecha (cor/rotación) b) padding-left transition para o efecto "slide right" ============================================================ */ .anxo-service-row { transition: padding-left .22s cubic-bezier(.4, 0, .2, 1), background-color .22s cubic-bezier(.4, 0, .2, 1); } .anxo-service-row:hover { padding-left: 1rem; background-color: var(--e-global-color-as_off_white); } .anxo-service-arrow.elementor-widget-icon .elementor-icon, .anxo-service-arrow.elementor-widget-icon .elementor-icon svg { transition: background-color .22s cubic-bezier(.4, 0, .2, 1), border-color .22s cubic-bezier(.4, 0, .2, 1), color .22s cubic-bezier(.4, 0, .2, 1), fill .22s cubic-bezier(.4, 0, .2, 1), stroke .22s cubic-bezier(.4, 0, .2, 1), transform .22s cubic-bezier(.4, 0, .2, 1); } .anxo-service-row:hover .anxo-service-arrow.elementor-widget-icon .elementor-icon { background-color: var(--e-global-color-accent); border-color: var(--e-global-color-accent); color: #fff; transform: rotate(-45deg); } .anxo-service-row:hover .anxo-service-arrow.elementor-widget-icon .elementor-icon svg { color: #fff; stroke: #fff; fill: none; } /* (.anxo-newsletter — promovido a base.css 2026-06-12: úsase na home e no single do blog) */ /* (.anxo-final-cta — wrapper xenérico — vive en base.css) */ @media (prefers-reduced-motion: reduce) { .anxo-scroll-indicator__line, .anxo-hero-cells span, .anxo-marquee__track { animation: none; } .anxo-service-row, .anxo-service-arrow .elementor-icon { transition: none; } }