/* * gwm-base — decoracions. * Nomes s'apliquen via classes CSS natives del bloc ("Classes CSS addicionals") * o via register_block_style. Cap d'aquestes regles depen de contingut inline * del post: son totes efectes visuals sobre classes reutilitzables. Tots els * colors venen dels tokens del theme.json (var(--wp--preset--color--X)); cap * hexadecimal de marca aqui tampoc, per la mateixa raó que als patrons. */ /* 1) Trac dibuixat al voltant d'una paraula (ex. "clients."), estil retolador, * gruixut i irregular, per damunt de les lletres. Format registrat * (gwm/circled) — reaplicable des de la barra de l'editor. -------------------*/ .gwm-circled { position: relative; display: inline-block; z-index: 0; } .gwm-circled::after { content: ""; position: absolute; left: -7%; right: -9%; top: -20%; bottom: -16%; border: 7px solid var(--wp--preset--color--primary); border-radius: 48% 52% 46% 54% / 58% 48% 52% 42%; transform: rotate(-2.2deg); pointer-events: none; mix-blend-mode: multiply; z-index: 1; } /* 1b) Accent (mark) — format registrat (gwm/accent), reaplicable des de * l'editor. Variant per defecte per a fons clars; --ink per a fons de color. */ .gwm-accent-mark { font-style: italic; font-weight: 600; color: var(--wp--preset--color--primary-dark); background-color: transparent; } .gwm-accent-mark--ink { color: var(--wp--preset--color--ink); } .gwm-accent-mark--on-dark { color: var(--wp--preset--color--primary); } /* 2) Marquesina de serveis: estil de bloc registrat "Marquesina" * (is-style-gwm-marquee), sobre core/group. El contingut nomes te UNA * llista; el JS del tema la clona per fer el desplaçament continu. --------- */ .is-style-gwm-marquee { overflow: hidden; background: var(--wp--preset--color--primary-dark); border-top: 1.5px solid var(--wp--preset--color--ink); border-bottom: 1.5px solid var(--wp--preset--color--ink); white-space: nowrap; } .is-style-gwm-marquee .gwm-marquee__track { display: inline-flex; align-items: center; gap: 2.5rem; animation: gwm-marquee-scroll 32s linear infinite; padding: 0.9rem 2rem; } .is-style-gwm-marquee .gwm-marquee__list { display: inline-flex; align-items: center; gap: 2.5rem; list-style: none; margin: 0; padding: 0; } .is-style-gwm-marquee .gwm-marquee__list li { font-family: var(--wp--preset--font-family--fraunces); font-style: italic; font-weight: 600; color: var(--wp--preset--color--white); font-size: 1.1rem; display: inline-flex; align-items: center; gap: 0.6rem; white-space: nowrap; } .is-style-gwm-marquee .gwm-marquee__list li::after { content: "\25BE"; font-style: normal; opacity: 0.8; } @keyframes gwm-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .is-style-gwm-marquee .gwm-marquee__track { animation: none; } } /* 3) Aparicions en fer scroll (progressive enhancement: nomes s'amaga * si el JS ha arrencat i hi ha afegit .gwm-js a ; sense JS, es veu * sempre) ---------------------------------------------------------------- */ .gwm-js .gwm-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; } .gwm-reveal.is-visible { opacity: 1; transform: translateY(0); } /* 4) Efectes de hover a targetes ----------------------------------------- */ .gwm-card-hover { transition: transform 0.18s ease, box-shadow 0.18s ease; } .gwm-card-hover:hover { transform: translate(-4px, -4px); box-shadow: 7px 7px 0px 0px var(--wp--preset--color--primary); } /* 5) Llista "En resum": cos de text, icona d'embut petita davant ---------- */ .gwm-check-list { list-style: none; margin: 0; padding: 0; font-size: 0.95rem; line-height: 1.5; } .gwm-check-list li { position: relative; padding-left: 1.5rem; margin-bottom: 1rem; } .gwm-check-list li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 12px; height: 12px; background-color: var(--wp--preset--color--primary); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1h10l-3.5 5v4l-3-1.2V6z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 1h10l-3.5 5v4l-3-1.2V6z'/%3E%3C/svg%3E"); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* 6) Enllaços destacats (Veure servei, Tambe fem...): primari fosc, negreta, * subratllat gruixut -------------------------------------------------------- */ .gwm-link-underline, .gwm-check-list a { color: var(--wp--preset--color--primary-dark); font-weight: 700; text-decoration: underline; text-decoration-color: var(--wp--preset--color--primary); text-decoration-thickness: 2px; text-underline-offset: 2px; } /* 6b) Text blanc sobre fons de color (footer, CTA), sense hex inline ------ */ .gwm-text-white { color: var(--wp--preset--color--white); } /* 7) core/details com a acordio FAQ (nomes aspecte, el comportament es natiu) */ .gwm-faq .wp-block-details { box-shadow: none; } .gwm-faq .wp-block-details[open] { box-shadow: 5px 5px 0px 0px var(--wp--preset--color--primary); } .gwm-faq summary { cursor: pointer; list-style: none; position: relative; padding-right: 2rem; font-weight: 700; font-family: var(--wp--preset--font-family--fraunces); } .gwm-faq summary::-webkit-details-marker { display: none; } .gwm-faq summary::marker { content: ""; } .gwm-faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--wp--preset--color--primary-dark); font-size: 1.3rem; font-weight: 700; line-height: 1; } .gwm-faq details[open] summary::after { content: "\00d7"; } /* 8) Capcalera: el core/navigation ja porta el seu propi menu d'overlay * mobil natiu (overlayMenu:"mobile"); nomes retoquem l'aspecte del boto. */ .wp-block-navigation__responsive-container-open { border: 1.5px solid var(--wp--preset--color--ink); border-radius: 6px; } /* 9) Capcalera: el boto secundari de CTA no ha de trencar linia (abans anava * inline al bloc) i s'amaga per no esclafar la capcalera en mobil. */ .gwm-header-cta .wp-block-button__link { white-space: nowrap; } @media (max-width: 600px) { .wp-block-buttons.gwm-header-cta { display: none !important; } } /* 10) Logo de capcalera i peu: linia 1 tenue, linia 2 primaria negreta, * compactes una sobre l'altra (sense espai extra entre elles). ------------ */ .gwm-logo-word-1, .gwm-logo-word-2 { display: block; line-height: 1.05; } .gwm-logo-word-1 { color: var(--wp--preset--color--ink-faint); font-weight: 500; } .gwm-logo-word-2 { color: var(--wp--preset--color--primary); font-weight: 700; } /* 11) Numeros del proces (bloc "proces"): cercle real, no el·lipse. */ .gwm-step-number { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0 !important; text-align: center; margin-top: -1.9rem !important; background: var(--wp--preset--color--surface); position: relative; z-index: 1; } /* Mobil: com que les columnes es stackejen i la linia horitzontal nomes * queda a dalt de tot, hi afegim una linia vertical que connecta els 4 * cercles perque no quedin com a punts solts. */ @media (max-width: 599px) { .gwm-process-steps { position: relative; } .gwm-process-steps::before { content: ""; position: absolute; top: 1.25rem; bottom: 1.25rem; left: 1.25rem; width: 1.5px; background: var(--wp--preset--color--ink); } .gwm-step-number { margin-top: 0 !important; position: relative; z-index: 1; } } /* 12) Franja de xifres del hero (+15 anys...): numero gran en Fraunces, * etiqueta petita en gris, mes separacio entre grups ----------------------- */ .gwm-stat { display: inline-flex; align-items: baseline; gap: 0.35rem; } .gwm-stat-num { font-family: var(--wp--preset--font-family--fraunces); font-weight: 700; font-size: 1.3rem; color: var(--wp--preset--color--ink); } .gwm-stat-label { font-size: 0.85rem; color: var(--wp--preset--color--ink-faint); } /* 13) Etiquetes en rectangle de cantonades lleugerament arrodonides * (ajustades al text, no a tota l'amplada): "AGENCIA DE MARQUETING..." i * "EN RESUM". Radi baixat de pindola completa a ~4px, com al disseny. ----- */ .gwm-pill-row { display: inline-flex; } /* 14) Etiqueta "EN RESUM" muntada mig a fora sobre la vora superior de la * targeta -------------------------------------------------------------------*/ .gwm-tag-overlap { position: relative; top: -2.9rem; margin-bottom: -1.9rem !important; } /* 15) Marca d'aigua d'embut (tres pindoles apagades) a la cantonada * superior dreta de la seccio fosca "Per que nosaltres" -------------------- */ .gwm-watermark { position: relative; } .gwm-watermark::before { content: ""; position: absolute; top: 0; right: 0; width: 220px; height: 120px; max-width: 40%; background-image: url("../img/funnel-watermark.svg"); background-repeat: no-repeat; background-position: top right; background-size: contain; opacity: 0.9; pointer-events: none; } /* 16) Files del bloc fosc "Per que nosaltres": titol en Fraunces negreta -- */ .gwm-why-title { font-family: var(--wp--preset--font-family--fraunces); font-weight: 700; font-size: 1.25rem; } /* 17) Icona d'embut petita a la cantonada superior dreta del CTA final ---- */ .gwm-cta-box { position: relative; } .gwm-cta-box::after { content: ""; position: absolute; top: 28px; right: 28px; width: 22px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Crect y='0' width='22' height='3' rx='1.5' fill='%23ffffff' opacity='0.55'/%3E%3Crect x='3' y='6.5' width='16' height='3' rx='1.5' fill='%23ffffff' opacity='0.55'/%3E%3Crect x='7' y='13' width='8' height='3' rx='1.5' fill='%23ffffff' opacity='0.55'/%3E%3C/svg%3E"); background-repeat: no-repeat; pointer-events: none; }