Color accent (--passa-accent) ve de variables.css per línia activa.
===================================================================== */
/* ---- Ocultar page title automàtic de Kadence en pàgines de línia ---- */
body.passa-line-seguretat .entry-hero,
body.passa-line-seguretat .entry-hero-container-inner,
body.passa-line-educacio .entry-hero,
body.passa-line-educacio .entry-hero-container-inner,
body.passa-line-sanitat .entry-hero,
body.passa-line-sanitat .entry-hero-container-inner {
display: none !important;
}
/* També amaguem qualsevol entry-title que Kadence inyecti dins del contingut */
body.passa-line-seguretat .entry-content > .entry-header,
body.passa-line-seguretat .entry-content > .entry-title,
body.passa-line-educacio .entry-content > .entry-header,
body.passa-line-educacio .entry-content > .entry-title,
body.passa-line-sanitat .entry-content > .entry-header,
body.passa-line-sanitat .entry-content > .entry-title {
display: none !important;
}
/* ---- Reset wrappers Kadence (tarjeta blanca + padding gris) en pàgines línia ----
Volem que el hero ocupi ample complet, sense la "card" content-bg de Kadence
que afegeix bg blanc + padding lateral + shadow, i pegat al header sense
marge superior. */
body.passa-line-seguretat #wrapper,
body.passa-line-educacio #wrapper,
body.passa-line-sanitat #wrapper,
body.passa-line-seguretat main#inner-wrap,
body.passa-line-educacio main#inner-wrap,
body.passa-line-sanitat main#inner-wrap,
body.passa-line-seguretat #primary,
body.passa-line-educacio #primary,
body.passa-line-sanitat #primary,
body.passa-line-seguretat .content-container.site-container,
body.passa-line-educacio .content-container.site-container,
body.passa-line-sanitat .content-container.site-container,
body.passa-line-seguretat #main.site-main,
body.passa-line-educacio #main.site-main,
body.passa-line-sanitat #main.site-main,
body.passa-line-seguretat .content-wrap,
body.passa-line-educacio .content-wrap,
body.passa-line-sanitat .content-wrap {
max-width: 100% !important;
width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0 !important;
background: transparent !important;
}
body.passa-line-seguretat .entry.content-bg,
body.passa-line-educacio .entry.content-bg,
body.passa-line-sanitat .entry.content-bg {
background: transparent !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;
margin: 0 !important;
}
body.passa-line-seguretat .entry-content-wrap,
body.passa-line-educacio .entry-content-wrap,
body.passa-line-sanitat .entry-content-wrap,
body.passa-line-seguretat .entry-content.single-content,
body.passa-line-educacio .entry-content.single-content,
body.passa-line-sanitat .entry-content.single-content {
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hero outer: ample complet, fons blanc.
margin: 0 !important per neutralitzar el margin-bottom que Kadence
afegeix a `.single-content .wp-block-group` (var(--global-md-spacing))
que creava un gap blanc entre Hero i Stats. */
.passa-hero {
width: 100%;
background: #fff;
padding: 0;
margin: 0 !important;
position: relative;
overflow: visible; /* per als floats que sobresurten */
}
/* Inner container que centra el contingut a max-width */
.passa-hero > .wp-block-group__inner-container {
max-width: var(--passa-container);
margin: 0 auto;
padding: 80px 30px 80px;
}
/* Layout de columnes — wp-block-columns nativ */
.passa-hero .wp-block-columns {
align-items: center;
gap: 60px;
margin-bottom: 0;
}
/* 66/34: la columna de text necessita aquesta amplada perquè la paraula
rotativa més llarga hi càpiga en una sola línia a la mida del titular.
Cada punt que se li treu a la foto permet pujar el titular ~0,9 px. */
.passa-hero .wp-block-columns .wp-block-column:first-child { flex-basis: 66% !important; }
.passa-hero .wp-block-columns .wp-block-column:last-child { flex-basis: 34% !important; }
/* ---- Badge superior ---- */
.passa-hero .badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 7px 14px;
background: var(--passa-purple-soft);
color: #fff;
border-radius: var(--passa-radius);
font-size: 11.5px;
font-weight: 600;
margin-bottom: 28px;
letter-spacing: .12em;
text-transform: uppercase;
}
.passa-hero .badge .dot {
display: inline-block;
width: 8px; height: 8px;
background: var(--passa-accent); /* yellow-deep en Seguretat, etc. */
border-radius: 0; /* marcador decoratiu de 8px: fora del radi global */
flex: 0 0 auto;
}
/* ---- H1 ---- */
.passa-hero h1 {
font-family: var(--passa-font-heading);
font-size: clamp(44px, 4.6vw, 56px);
line-height: 1;
font-weight: 600;
letter-spacing: -.03em;
margin: 0 0 24px;
color: var(--passa-text);
}
.passa-hero h1 em {
font-style: normal;
color: var(--passa-purple);
border-bottom: 6px solid var(--passa-accent);
padding-bottom: 2px;
display: inline-block;
transition: opacity .35s ease, transform .35s ease;
}
.passa-hero h1 em.fade {
opacity: 0;
transform: translateY(-12px);
}
/* ---- Paraula rotativa: sempre a la seva pròpia línia ----
Abans anava dins d'un amb white-space:nowrap perquè el punt final no
quedés orfe. Això tenia dos efectes dolents:
1. "Vigilant de Seguretat Privada" no hi cabia i, en no poder partir-se,
SORTIA de la columna i trepitjava la foto de la dreta.
2. Les paraules curtes cabien a la línia de "per ser" i les llargues no,
així que el titular saltava de 2 a 3 línies cada pocs segons i tot el
que hi ha a sota pujava i baixava sense parar.
Ara la paraula va a la seva pròpia línia i MÉS PETITA que la resta del
titular, prou perquè fins i tot la més llarga càpiga en UNA sola línia.
Amb això desapareixen els tres problemes: no sobreïx, no salta d'alçada, i
el subratllat groc va sempre sencer sota una única línia.
hero.js mesura totes les paraules i, si la més llarga no hi cabés, abaixa
la mida fins que hi capiga — la MATEIXA per a totes, perquè tampoc canviï
de mida en rotar. Si l'Andrea n'afegeix una de més llarga, s'ajusta sol.
---- */
.passa-hero h1 .passa-em-wrap {
display: block;
line-height: 1.1;
margin-top: .12em;
white-space: nowrap; /* el punt final no pot caure a la línia de sota */
}
.passa-hero h1 em {
display: inline-block;
white-space: nowrap; /* mai parteix: la mida ja garanteix que hi cap */
font-size: var(--passa-em-size, 1em);
}
/* El punt final acompanya la paraula i fa la seva mateixa mida. */
.passa-hero h1 .passa-em-dot {
font-size: var(--passa-em-size, 1em);
color: var(--passa-purple);
}
/* ---- El mateix motor, fora del hero (.passa-cycle) ----
L'usa el titular «T'ajudem a …» de L'Acadèmia. Les regles van repetides i
NO compartides amb `:is()` a posta: `:is(.passa-hero h1, .passa-cycle) em`
pujaria el pes de (0,1,1) a (0,1,2) i el hero, que avui va just, podria
començar a guanyar-li a regles que abans el corregien. Són quatre línies;
no val la pena arriscar la portada per estalviar-les.
Diferències respecte del hero: el subratllat és de 4px (el titular és més
petit, 6px hi quedaria bast) i la paraula NO salta de línia — aquí hi cap.
---- */
.passa-cycle em {
font-style: normal;
color: var(--passa-purple);
border-bottom: 4px solid var(--passa-accent);
padding-bottom: 2px;
display: inline-block;
white-space: nowrap;
font-size: var(--passa-em-size, 1em);
transition: opacity .35s ease, transform .35s ease;
}
.passa-cycle em.fade {
opacity: 0;
transform: translateY(-12px);
}
.passa-cycle .passa-em-wrap {
display: block;
line-height: 1.15;
margin-top: .1em;
white-space: nowrap;
}
.passa-cycle .passa-em-dot {
font-size: var(--passa-em-size, 1em);
color: var(--passa-purple);
}
/* ---- Lede ---- */
.passa-hero .lede {
font-size: 19px;
max-width: 520px;
color: var(--passa-text);
margin-bottom: 36px;
line-height: 1.55;
}
/* ---- CTAs ---- */
.passa-hero .ctas {
display: flex;
gap: 12px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.passa-hero .ctas a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 24px;
font-family: var(--passa-font-body);
font-size: 14.5px;
font-weight: 600;
border-radius: var(--passa-radius);
text-decoration: none;
cursor: pointer;
transition: .15s;
border: 1px solid transparent;
line-height: 1;
}
.passa-hero .ctas a.btn-primary {
background: var(--passa-purple);
color: #fff;
}
.passa-hero .ctas a.btn-primary:hover {
background: var(--passa-purple-dark);
transform: translateY(-2px);
}
.passa-hero .ctas a.btn-outline {
background: #fff;
color: var(--passa-text);
border-color: var(--passa-line);
}
.passa-hero .ctas .btn-outline:hover {
border-color: var(--passa-purple);
color: var(--passa-purple);
}
/* ---- Checks (3 columnes, separador superior amb border-top) ---- */
.passa-hero .checks {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px 20px;
padding: 30px 0 0;
margin: 30px 0 0;
border-top: 1px solid var(--passa-line);
}
.passa-hero .checks li {
display: flex;
align-items: flex-start; /* tick alineat amb 1a línia, no centrat */
gap: 10px;
font-size: 13.5px;
line-height: 1.4;
color: var(--passa-text);
margin: 0;
}
.passa-hero .checks li::before {
/* Check mark via SVG inline (data URI) — així no depèn de cap font
i sempre es veu el mateix glifo a tots els navegadors. Abans
`content: "✓"` mostrava un tofu/mojibake amb Inter. */
content: "";
width: 18px;
height: 18px;
background-color: var(--passa-purple-soft);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: 12px 12px;
border-radius: var(--passa-radius);
flex: 0 0 auto;
margin-top: 1px; /* aliniar visualment amb la 1a línia */
}
/* ---- Photo (columna dreta) + floats ---- */
.passa-hero .photo {
aspect-ratio: 1 / 1;
position: relative;
background: #EFE8F3; /* purple-bg de la maqueta */
border: 1px solid var(--passa-line);
overflow: visible; /* floats poden sobresortir */
border-radius: var(--passa-radius);
}
.passa-hero .photo > svg {
width: 100%;
height: 100%;
display: block;
animation: passaSlowZoom 18s ease-in-out infinite;
transform-origin: center;
/* El marc té overflow:visible (els floats han de sobresortir), així que
el radi s'ha d'aplicar també aquí o les cantonades del SVG sobresurten. */
border-radius: var(--passa-radius);
}
@keyframes passaSlowZoom {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
/* Floats que sobresurten del marc del SVG */
.passa-hero .float {
position: absolute;
padding: 14px 18px;
background: #fff;
box-shadow: 0 12px 30px rgba(76, 27, 105, .15);
display: flex;
align-items: center;
gap: 12px;
border-radius: var(--passa-radius);
animation: passaFloatY 7s ease-in-out infinite;
}
.passa-hero .float-1 { top: 30px; left: -30px; }
.passa-hero .float-2 { bottom: 50px; right: -30px; animation-delay: -3.5s; }
@keyframes passaFloatY {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.passa-hero .float .ic {
width: 36px; height: 36px;
display: grid;
place-items: center;
font-weight: 700;
flex: 0 0 auto;
font-size: 16px;
border-radius: var(--passa-radius);
}
.passa-hero .float-1 .ic { background: var(--passa-accent); color: #2D1746; }
.passa-hero .float-2 .ic { background: var(--passa-purple-soft); color: #fff; }
.passa-hero .float strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--passa-text);
}
.passa-hero .float span {
display: block;
font-size: 12px;
color: var(--passa-text-2);
}
/* ====================================================================== */
/* Responsive · Tablet (≤ 1023px) */
/* ====================================================================== */
@media (max-width: 1023px) {
.passa-hero > .wp-block-group__inner-container { padding: 60px 30px 60px; }
.passa-hero .wp-block-columns { gap: 40px; }
.passa-hero h1 { font-size: clamp(38px, 4.8vw, 48px); }
.passa-hero .lede { font-size: 17px; }
.passa-hero .checks { gap: 12px 16px; }
/* Floats més petits perquè càpiguen */
.passa-hero .float { padding: 12px 14px; }
.passa-hero .float-1 { top: 20px; left: -20px; }
.passa-hero .float-2 { bottom: 30px; right: -20px; }
.passa-hero .float strong { font-size: 13px; }
.passa-hero .float span { font-size: 11px; }
.passa-hero .float .ic { width: 30px; height: 30px; font-size: 14px; }
}
/* ====================================================================== */
/* Responsive · Mòbil (≤ 768px) */
/* ====================================================================== */
@media (max-width: 768px) {
.passa-hero > .wp-block-group__inner-container { padding: 50px 24px 50px; }
/* Columnes apilades verticalment */
.passa-hero .wp-block-columns {
gap: 36px;
flex-direction: column;
}
.passa-hero .wp-block-columns .wp-block-column { flex-basis: 100% !important; }
/* H1 més petit i lede més estret */
/* ⚠️ Abans: clamp(34px, 8vw, 48px). El 8vw arribava al sostre de 48px a
partir de 600px, així que entre 600 i 768 el títol era MÉS GRAN que a
820px (39px) i el hero creixia de 574 a 991px en fer la pantalla petita.
L'escala ha de baixar sempre. */
.passa-hero h1 { font-size: clamp(30px, 4.6vw, 40px); }
.passa-hero .lede { font-size: 16px; max-width: 100%; }
/* Photo centrada i floats ocults (no caben) */
.passa-hero .photo { max-width: 340px; margin: 0 auto; }
.passa-hero .float-1, .passa-hero .float-2 { display: none; }
/* Checks: en columna única */
.passa-hero .checks { grid-template-columns: 1fr; }
/* CTAs ocupen 100% per click area còmode */
.passa-hero .ctas { flex-direction: column; gap: 10px; }
.passa-hero .ctas a { justify-content: center; width: 100%; }
}
/* ====================================================================== */
/* Responsive · Mòbil petit (≤ 480px) */
/* ====================================================================== */
@media (max-width: 480px) {
.passa-hero > .wp-block-group__inner-container { padding: 40px 20px 40px; }
/* Mateix motiu: el 9vw feia que a 430px (38,7px) fos més gran que a 600px. */
.passa-hero h1 { font-size: clamp(25px, 6vw, 30px); }
.passa-hero .badge { font-size: 10.5px; padding: 6px 11px; }
.passa-hero .photo { max-width: 280px; }
}
/* ----------------------------------------------------------------------
Badge i CTAs com a blocs editables (20/8/2026)
Abans eren blocs d'HTML cru: l'Andrea no els podia tocar sense saber
HTML. Ara són un paràgraf i un grup de botons de Gutenberg. El punt del
badge passa a ser un ::before (decoratiu, no cal que sigui contingut).
---------------------------------------------------------------------- */
.passa-hero p.badge { margin: 0 0 18px; }
.passa-hero p.badge::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
margin-right: 10px;
background: var(--passa-accent);
vertical-align: middle;
}
/* Botons del hero fets amb el bloc natiu de WordPress */
.passa-hero .wp-block-buttons { gap: 12px; margin-bottom: 30px; }
@media (prefers-reduced-motion: reduce) {
.passa-hero .wp-block-button__link:hover { transform: none; }
}
/* El
embolcall del bloc de botons NO pinta res: tot va a l'enllaç */
.passa-hero .wp-block-button {
background: none;
border: 0;
padding: 0;
}
/* 30/9: foto al hero (inc/svg-hero.php). Mateix marc i mateix zoom lent que el dibuix;
el retall va en un embolcall propi perquè el marc té overflow:visible pels floats. */
.passa-hero .photo > .photo__img {
position: absolute;
inset: 0;
overflow: hidden;
border-radius: var(--passa-radius);
}
.passa-hero .photo > .photo__img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
animation: passaSlowZoom 18s ease-in-out infinite;
transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
.passa-hero .photo > .photo__img img { animation: none; }
}
/* ======================================================================
13/10 · Mòbil: la foto, ampla i entre els botons i les caselles (Andrea:
«es veu molt apartada»; opció triada per l'Eric). Abans quedava al final,
quadrada i petita, fora de la pantalla.
La columna del text es «dissol» (display:contents) perquè els seus fills
i la foto es puguin ordenar junts. Les columnes es reconeixen pel contingut
(:has(.photo)), no per la posició.
====================================================================== */
@media (max-width: 768px) {
.passa-hero .wp-block-columns { gap: 0; align-items: stretch; }
.passa-hero .wp-block-columns > .wp-block-column:not(:has(.photo)) { display: contents; }
.passa-hero .wp-block-columns > .wp-block-column:not(:has(.photo)) > * { order: 1; }
.passa-hero .wp-block-columns > .wp-block-column:not(:has(.photo)) > .checks { order: 3; }
.passa-hero .wp-block-columns > .wp-block-column:has(.photo) {
order: 2;
margin: 0 -24px !important; /* de vora a vora: surt del padding del contenidor */
width: auto;
align-self: stretch !important; /* la columna du «is-vertically-aligned-center», que l'encongeix */
flex: 0 0 auto !important; /* el flex-basis:100% de més amunt, en columna, la deixava a 2 px */
}
.passa-hero .photo {
max-width: none;
margin: 0;
/* Alt fix i no aspect-ratio: dins de la columna flex l'amplada encara no és coneguda
quan es reparteix l'alçada i la foto quedava a 0. Ocupa tota la pantalla: 16:10 = 62,5vw. */
aspect-ratio: auto;
height: min(62.5vw, 340px);
width: auto;
border-radius: 0;
border-left: 0;
border-right: 0;
}
.passa-hero .photo > .photo__img { border-radius: 0; }
.passa-hero .photo > .photo__img img { object-position: 50% 22%; } /* apaïsada: que no talli el cap */
/* «Matrícula oberta» torna, a sota a l'esquerra de la foto. L'altra no hi cap. */
.passa-hero .float-2 {
display: flex;
bottom: 14px;
left: 14px;
right: auto;
padding: 10px 12px;
max-width: calc(100% - 28px);
animation: none;
}
}
@media (max-width: 480px) {
.passa-hero .wp-block-columns > .wp-block-column:has(.photo) { margin: 0 -20px !important; }
.passa-hero .photo { max-width: none; }
}
/* 21/10 · Ordinador (≥1024): foto a sang a la dreta (Andrea: «molt apartat», més integrada i més gran;
opció A d'Eric). La columna de la foto s'estira fins a dalt, a baix i a la vora dreta de la pantalla.
100cqw = amplada del hero sense la barra de desplaçament (100vw la inclou i faria scroll lateral).
Receta: /opt/pasarela-dev/eines/portada-escriptori/hero-escriptori.css */
@media (min-width: 1024px) {
.passa-hero { container-type: inline-size; }
.passa-hero .wp-block-columns { align-items: stretch; }
/* 21/10 · Eric: menys distància entre text i foto. Text 58 % i espai 40 px (era 66 % i 60 px). */
.passa-hero .wp-block-columns { gap: 40px; }
.passa-hero .wp-block-columns .wp-block-column:first-child { flex-basis: 58% !important; }
.passa-hero .wp-block-columns > .wp-block-column:not(:has(.photo)) { align-self: center; }
.passa-hero .wp-block-columns > .wp-block-column:has(.photo) {
align-self: stretch;
flex-grow: 1 !important; /* sense això el marge negatiu no l'eixampla: només deixa espai buit */
margin: -80px calc((min(100cqw, var(--passa-container)) - 100cqw) / 2 - 30px) -80px 0 !important;
}
.passa-hero .photo {
aspect-ratio: auto;
height: 100%;
min-height: 520px;
border: 0;
border-radius: 0;
}
.passa-hero .photo > .photo__img,
.passa-hero .photo > svg { border-radius: 0; }
.passa-hero .photo > .photo__img img { object-position: 50% 25%; }
.passa-hero .float-1 { top: 70px; left: -40px; }
.passa-hero .float-2 { bottom: 70px; right: 40px; left: auto; } /* Andrea 21/10: «Matrícula» a la dreta */
}