/* Theme Name: AOS Portfolio Theme URI: Author: Agustín Oyarzún Description: Portafolio brutalista editorial — "Convierto data en audiencia." Version: 1.1.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: aos-portfolio Tags: portfolio, brutalist, one-page */ /* ============================================================ FUENTES AUTOALOJADAS Descarga los archivos desde Google Fonts y colócalos en: /wp-content/themes/aos-portfolio/fonts/ Archivos necesarios: - Anton-Regular.woff2 - CourierPrime-Regular.woff2 - CourierPrime-Bold.woff2 ============================================================ */ @font-face { font-family: 'Anton'; src: url('fonts/anton-v27-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Courier Prime'; src: url('fonts/courier-prime-v11-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Courier Prime'; src: url('fonts/courier-prime-v11-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================================ DESIGN TOKENS ============================================================ */ :root { /* Paleta */ --clr-bg: #0f0f0f; /* negro — fondo */ --clr-text: #e8e4df; /* beige — texto */ --clr-red: #d62839; /* rojo — acento (más claro para fondo oscuro) */ /* Tipografías */ --ff-title: 'Anton', 'Impact', sans-serif; --ff-body: 'Courier Prime', 'Courier New', monospace; /* Espaciado */ --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1.5rem; --space-lg: 3rem; --space-xl: 5rem; /* Borde brutalista — sin radio */ --border: 1px solid var(--clr-text); /* Transiciones */ --ease: 200ms ease; } /* ============================================================ RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; /* scroll-behavior: smooth desactivado — Lenis lo gestiona */ } body { font-family: var(--ff-body); background-color: var(--clr-bg); color: var(--clr-text); line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ CURSOR PERSONALIZADO (global) main.js añade .aos-cursor a sólo en punteros finos. ============================================================ */ .aos-cursor, .aos-cursor a, .aos-cursor button, .aos-cursor [data-glitch], .aos-cursor input, .aos-cursor textarea { cursor: none; } .aos-cursor-dot, .aos-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; transform: translate(-50%, -50%); z-index: 9999; will-change: transform, left, top; } .aos-cursor-dot { width: 10px; height: 10px; background: var(--clr-red); } .aos-cursor-ring { width: 40px; height: 40px; border: 1.5px solid rgba(232, 228, 223, 0.4); z-index: 9998; } @media (pointer: coarse) { .aos-cursor-dot, .aos-cursor-ring { display: none !important; } } img, svg, canvas, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; } /* ============================================================ HEADER / NAVEGACIÓN — mobile-first ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: var(--space-sm) var(--space-md); border-bottom: var(--border); background-color: var(--clr-bg); } /* — Logotipo — */ .site-logo { font-family: var(--ff-title); font-size: clamp(1.5rem, 3.5vw, 2.25rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; } .site-logo__dot { color: var(--clr-red); } /* — Navegación desktop (oculta en mobile) — */ .site-nav { display: none; } .site-nav__list { display: flex; align-items: center; gap: var(--space-lg); } /* WordPress genera .menu-item > a */ .site-nav__list .menu-item a, .site-nav__list a { font-family: var(--ff-body); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; padding-bottom: 2px; border-bottom: 1px solid transparent; transition: border-color var(--ease); } .site-nav__list .menu-item a:hover, .site-nav__list .menu-item a:focus-visible, .site-nav__list a:hover, .site-nav__list a:focus-visible { border-bottom-color: var(--clr-text); outline: none; } .site-nav__list .menu-item a.is-active, .site-nav__list a.is-active { color: var(--clr-red); border-bottom-color: var(--clr-red); } /* — Dropdown de proyectos — */ .has-dropdown { position: relative; } .has-dropdown > a::after { content: ' ▾'; font-size: 0.55rem; opacity: 0.55; vertical-align: middle; } .nav-dropdown { position: absolute; top: 100%; left: -20px; min-width: 230px; padding-top: 12px; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 0.22s ease, transform 0.22s ease; z-index: 200; } .nav-dropdown::before { content: ''; display: block; position: absolute; top: 12px; left: 0; right: 0; bottom: 0; background: var(--clr-bg); border: var(--border); z-index: -1; } .has-dropdown:hover .nav-dropdown, .has-dropdown:focus-within .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav-dropdown li a { display: flex; align-items: baseline; gap: 10px; font-family: var(--ff-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 9px 20px; border-bottom: none; transition: color var(--ease), background-color var(--ease); } .nav-dropdown li a:hover { color: var(--clr-red); background-color: rgba(128, 128, 128, 0.07); border-bottom: none; } .nav-dropdown__num { opacity: 0.4; font-size: 0.6rem; flex-shrink: 0; } /* Dropdown en mobile nav — siempre expandido */ .site-nav-mobile .nav-dropdown { position: static; opacity: 1; pointer-events: auto; transform: none; border: none; border-left: 2px solid var(--clr-red); margin: 4px 0 12px 16px; padding: 0; background: transparent; min-width: 0; } .site-nav-mobile .nav-dropdown li a { font-size: 0.9rem; padding: 7px 16px; opacity: 0.75; transition: opacity var(--ease), color var(--ease); } .site-nav-mobile .nav-dropdown li a:hover { opacity: 1; background-color: transparent; } /* — Botón hamburguesa (mobile) — */ .nav-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 24px; height: 16px; padding: 0; } .nav-toggle__bar { display: block; width: 100%; height: 1px; background-color: var(--clr-text); transition: transform var(--ease), opacity var(--ease); } /* Estado abierto del menú */ .nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* — Overlay mobile — */ .site-nav-mobile { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 90; background-color: var(--clr-bg); padding-top: 5rem; padding-left: var(--space-md); padding-right: var(--space-md); flex-direction: column; gap: 0; } .site-nav-mobile.is-open { display: flex; } .site-nav-mobile .menu-item a, .site-nav-mobile a { display: block; font-family: var(--ff-body); font-size: 1.5rem; letter-spacing: 0.08em; text-transform: uppercase; padding: var(--space-sm) 0; border-bottom: var(--border); transition: color var(--ease); } .site-nav-mobile .menu-item a:hover, .site-nav-mobile a:hover { color: var(--clr-red); } /* ============================================================ HERO — mobile-first ============================================================ */ .hero { position: relative; width: 100%; min-height: 100dvh; display: flex; align-items: flex-end; /* contenido al pie en mobile */ padding-top: 6rem; /* espacio bajo el header fijo */ padding-bottom: 4.5rem; padding-left: var(--space-md); padding-right: var(--space-md); overflow: hidden; background-color: var(--clr-bg); } /* Canvas Three.js — capa de fondo absoluta */ #hero-canvas { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 0; pointer-events: none; } /* Canvas 2D de las word-tags orbitando (sobre el wireframe) */ #hero-orbit { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; z-index: 1; pointer-events: none; } /* Barra inferior del hero (Santiago · Scroll · ©) */ .hero__bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 0.9rem var(--space-md); border-top: var(--border); font-family: var(--ff-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .hero__bottom .is-dim { opacity: 0.55; } /* Compensar el header fijo en los anclajes internos */ #inicio, #trabajos, #sobre-mi, #servicios, #contacto { scroll-margin-top: 64px; } /* Contenido sobre el canvas */ .hero__content { position: relative; z-index: 2; width: 100%; margin-bottom: 3.5rem; /* sube el texto en mobile */ } /* — CTA "Ver trabajos" — */ .hero__cta { display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.75rem; font-family: var(--ff-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; transition: color var(--ease); } @media (hover: hover) { .hero__cta:hover { color: var(--clr-red); } } /* — Label "ESTRATEGA DIGITAL" — */ .hero__label { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--ff-body); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: var(--space-md); opacity: 0; /* estado inicial — GSAP lo anima */ transform: translateY(8px); } /* Punto pulsante rojo */ .hero__dot { display: inline-block; flex-shrink: 0; width: 7px; height: 7px; background-color: var(--clr-red); border-radius: 50%; animation: dot-pulse 1.8s ease-in-out infinite; } @keyframes dot-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.25; transform: scale(0.6); } } /* — Titular — */ .hero__title { font-family: var(--ff-title); font-size: clamp(2.75rem, 12vw, 10rem); line-height: 0.92; letter-spacing: calc(-0.02em + 1px); text-transform: uppercase; color: var(--clr-text); } /* Clip por palabra: permite la animación "slide-up" */ .word-clip { display: inline-block; overflow: hidden; vertical-align: top; margin-right: 0.1em; /* espacio entre palabras */ } .word { display: inline-block; transform: translateY(110%); /* posición de partida — GSAP lleva a 0% */ } .word--accent { color: var(--clr-red); } /* ============================================================ BARRA DE PROGRESO DE SCROLL ============================================================ */ .scroll-progress { position: fixed; right: 0; top: 0; width: 3px; height: 100%; z-index: 50; pointer-events: none; } .scroll-progress__fill { width: 100%; height: 100%; background-color: var(--clr-red); transform: scaleY(0); transform-origin: top center; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ============================================================ PAGE TRANSITION ============================================================ */ #page-transition { position: fixed; inset: 0; z-index: 8500; background: var(--clr-bg); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .38s ease, visibility .38s ease; } #page-transition.is-active { opacity: 1; visibility: visible; pointer-events: auto; } /* ============================================================ FOOTER ============================================================ */ .site-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-top: var(--border); font-family: var(--ff-body); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .site-footer__logo { font-family: var(--ff-title); font-size: 1.25rem; letter-spacing: -0.02em; } .site-footer__social { display: flex; gap: 1.5rem; } .site-footer__social a { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: color var(--ease); } @media (hover: hover) { .site-footer__social a:hover { color: var(--clr-red); } } /* ============================================================ UTILIDADES ACCESIBLES ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ BREAKPOINTS ============================================================ */ /* — Tablet 768px+ — */ @media (min-width: 768px) { .site-header { padding-inline: var(--space-lg); } /* Mostrar nav desktop, ocultar hamburguesa */ .site-nav { display: block; } .nav-toggle { display: none; } .hero { align-items: center; /* contenido centrado en desktop */ padding-top: 0; padding-bottom: 5rem; padding-inline: var(--space-lg); } .hero__content { max-width: 65%; margin-bottom: 0; } /* Canvas a la mitad derecha; orbit visible */ #hero-canvas, #hero-orbit { left: auto; right: 0; width: 50% !important; } #hero-orbit { display: block; } .hero__bottom { padding-inline: var(--space-lg); } } /* — Desktop 1200px+ — */ @media (min-width: 1200px) { .site-header { padding-inline: var(--space-xl); } .hero { padding-inline: var(--space-xl); } .hero__content { max-width: 58%; } .hero__title { font-size: clamp(6rem, 9vw, 10rem); } }