/* * Hero (home-page.php - #hero-header). * Aquestes regles fan servir el mateix prefix ".page-template-home-page #hero-header" * que Legacy_new-child-theme.css (el bundle realment encolat per theme_enqueue_styles(), * veure functions.php) perquè, amb la mateixa especificitat, guanyen per ordre de sortida * (aquest full es carrega després, veure matteria_custom_components_assets()), i així no * cal tocar el bundle legacy per anul·lar el vell hero fixed/100vh * (".page-template-home-page #hero-header { position: fixed; height: 100vh; ... }"). */ /* Contenedor Principal con textura de grano fija. El disseny (.claude/context/Matteria Home Standalone.html) exporta el fons com una imatge estàtica (img/hero-bg.jpg encara disponible a /img si mai cal retornar-hi), però aquí es prioritza el "pointer-aura" interactiu (.pointer-aura + js/components/hero.js) que Andrea ja havia ajustat i confirmat abans d'aquesta sessió (veure git log) - la imatge de fons quedava per sobre i l'aura interactiva es perdia contra el seu propi glow ja il·luminat. Es torna al degradat CSS pla perquè l'aura hi torni a destacar igual que abans. */ .page-template-home-page #hero-header { position: relative; overflow: hidden; background: var(--color-bg-gradient); padding-top: 160px; padding-bottom: 64px; } /* TEXTURA DE GRANO: Se aplica sobre todo el fondo del Hero */ .page-template-home-page #hero-header::after { content: ""; position: absolute; inset: 0; /* SVG inyectado que genera el ruido fractal nítido */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); /* Opacidad sutil para el fondo (0.05 a 0.08 suele ser perfecto) */ opacity: 0.04; /* 'overlay' hace que el grano reaccione tanto al fondo oscuro como al gradiente amarillo que pasa por detrás */ mix-blend-mode: overlay; /* Asegura que el grano se quede justo encima de la luz pero detrás del texto */ z-index: 1; pointer-events: none; } @media screen and (min-width: 992px) { .page-template-home-page #hero-header { padding-top: 220px; padding-bottom: 120px; /* Legacy_new-child-theme.css fixa ".page-template-home-page #hero-header" a "height: 100vh" (sense media query, sense !important) pensant en el vell hero fixed. Un "height" explícit sempre guanya sobre "min-height" quan és igual o més gran, així que cal neutralitzar-lo aquí (igual que ja es fa amb "position") perquè el min-height de sota tingui algun efecte real. */ height: auto; /* Es descompta l'alçada del "peek" de la cinta de clients (veure --customers-ribbon-peek a _variables.css) perquè, sense fer scroll, es vegi aproximadament la meitat de #customers just per sota del hero, tal com mostra el mock. Només afecta ≥992px: al mòbil/tablet el contingut del hero ja supera l'alçada del viewport (layout apilat amb la side card sota el contingut). */ min-height: calc(100vh - var(--customers-ribbon-peek)); } } /* Degradat estàtic (abans "pointer aura": un halo que seguia el ratolí via JS, veure git history / js/components/hero.js - eliminat a petició del client perquè volien un fons normal i estàtic, igual a desktop i mòbil). Es manté el mateix to i posició per defecte que tenia l'efecte dinàmic (65%/30%, groc Jonquil) perquè el fons no canviï visualment, però ara és fix: no hi ha JS ni "--x"/"--y" custom properties implicades. */ /* DISEÑO BASE (OCULTO PARA MÓVILES Y TABLETS) */ .page-template-home-page #hero-header .pointer-aura { display: none; /* <--- Esto lo oculta por completo en móviles */ position: absolute; inset: -100px; pointer-events: none; z-index: 0; filter: blur(60px); mix-blend-mode: screen; } /* OVERRIDE DINÁMICO (SOLO PARA ORDENADORES CON RATÓN) */ @media (hover: hover) and (pointer: fine) { .page-template-home-page #hero-header .pointer-aura { display: block; /* <--- Lo volvemos a encender en desktop */ background: radial-gradient( circle at var(--x, 65%) var(--y, 30%), rgba(222, 245, 97, 0.5) 0%, rgba(222, 245, 97, 0.3) 20%, transparent 65% ); } } .page-template-home-page #hero-header .container { position: relative; z-index: 1; /* Bootstrap's stock .container caps out at 1320px (>=1400px), leaving a large empty margin on wide screens. Edge padding itself is handled by the shared ".container-edge" class (css/components/_layout.css, applied directly on this element's markup) - this just removes Bootstrap's max-width cap so that padding is the only thing bounding the width. */ max-width: 100%; } /* Tipografia H1: Raleway 600 (SemiBold), ~59px (brandbook: 44pt, 1pt = 1.333px). L'escala responsive intermèdia és una progressió pròpia del component fins arribar al valor de marca (var(--font-size-h1)) al breakpoint xl. */ .page-template-home-page #hero-header .hero-content h1, .page-template-home-page #hero-header .hero-content .h1 { font-size: 42px; /* Increased from 33px */ font-family: var(--font-heading); color: #ffffff; font-weight: var(--font-weight-h1); line-height: var(--line-height-h1); } @media screen and (min-width: 576px) { .page-template-home-page #hero-header .hero-content h1, .page-template-home-page #hero-header .hero-content .h1 { font-size: 56px; /* Increased from 43px */ } } @media screen and (min-width: 992px) { .page-template-home-page #hero-header .hero-content h1, .page-template-home-page #hero-header .hero-content .h1 { font-size: 68px; /* Increased from 53px */ } } @media screen and (min-width: 1200px) { .page-template-home-page #hero-header .hero-content h1, .page-template-home-page #hero-header .hero-content .h1 { /* Multiplies your theme's base H1 variable by 1.25 (25% larger) */ font-size: calc(var(--font-size-h1) * 1.25); /* NOTE: If you prefer a fixed number instead of calc(), delete the line above and use something like: font-size: 78px; */ } } .page-template-home-page #hero-header .hero-subtitle { color: var(--color-cream); font-size: 22px; /* Increased from 18px */ line-height: 160%; margin-top: 24px; max-width: 90% /* Increased from 480px so the larger text doesn't wrap too early */ } @media screen and (min-width: 992px) { .page-template-home-page #hero-header .hero-subtitle { font-size: 26px; /* Increased from 20px */ } } .page-template-home-page #hero-header .hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 40px; } /* Mòbil: els dos pills CTA ocupen tota l'amplada disponible en comptes de quedar-se a la mida del seu text (mock: un a sota de l'altre, cadascun fent d'amplada completa). Es defineix aquí (no min-width) perquè "flex: 1 1 100%" força el "wrap" fins i tot si el text dels dos botons hi cabria en una sola línia. */ @media screen and (max-width: 767.98px) { .page-template-home-page #hero-header .hero-cta .btn { display: block; flex: 1 1 100%; width: 100%; text-align: center; } } .page-template-home-page #hero-header .btn-outline-hero { font-size: 16px; font-weight: 700; padding: 16px 24px; border-radius: 100px; background-color: transparent; /* 2px al mock (box-shadow: inset 0 0 0 2px), no l'1px per defecte de Bootstrap */ border: 2px solid var(--color-primary); color: var(--color-primary); transition: background-color 0.2s ease, color 0.2s ease; } .page-template-home-page #hero-header .btn-outline-hero:hover { background-color: var(--color-primary); color: var(--color-dark); } .page-template-home-page #hero-header .hero-side { margin-top: 64px; } @media screen and (min-width: 992px) { .page-template-home-page #hero-header .hero-side { margin-top: 0; } } .page-template-home-page #hero-header .hero-side-label { display: block; color: var(--color-primary); font-weight: 700; font-size: 18px; margin-bottom: 16px; } .page-template-home-page #hero-header .hero-side-card { /* background-color: var(--color-dark); */ overflow: hidden; max-width: 340px; } /* --- IMAGE ZOOM EFFECT --- */ .page-template-home-page #hero-header .hero-side-image { display: block; /* Mock: 335.853 x 206.292px (~1.628), no 4/3 (1.333) - la caixa és més panoràmica del que semblava a ull. */ aspect-ratio: 335.853 / 206.292; overflow: hidden; /* Keeps the zoomed image inside the container */ border-radius: 8px; /* Mock: 8px, no 12px */ } .page-template-home-page #hero-header .hero-side-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; /* Smooth transition */ transform: scale(1); /* Default state */ } .page-template-home-page #hero-header .hero-side-image:hover img { transform: scale(1.08); /* Zooms in by 8% on hover */ } /* --- LINK ARROW DISPLACE EFFECT --- */ .page-template-home-page #hero-header .hero-side-link { display: block; color: #ffffff; font-weight: 500; font-size: 15px; padding: 20px 20px 20px; text-decoration: underline; } .arrow-icon { margin-left: 8px; display: inline-block; font-size: 1.6em; transition: transform 0.3s ease; /* Movimiento suave */ } /* El hover se activa al pasar el ratón por el enlace, y mueve el icono interno */ .hero-side-link:hover .arrow-icon { transform: translateX(4px); } .page-template-home-page #hero-header .hero-side-title { display: block; color: #ffffff; font-weight: 700; font-size: 18px; line-height: 140%; padding: 20px 20px 8px; text-decoration: none; } /* La vella regla ".page-template-home-page #presentation" al bundle legacy fa "margin-top: 100vh" pensant en el hero fixed que ja no existeix; aquí es neutralitza amb la mateixa especificitat perquè torni a l'espaiat normal. */ .page-template-home-page #presentation { margin-top: 0; } .page-template-home-page #presentation .card { margin-top: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }