/* ==========================================================================
Il bottone
==========================================================================
Uno solo per tutto il sito: i link .htmb-cta del tema e della hero, il
pulsante dei blocchi di /chi-sono/, l'invio di WPForms e dei commenti.
Il disegno viene dal riferimento cta-6 scelto da Daniele (spec
2026-09-27-larghezze-e-componenti, §4.2): una pillola con la freccia in un
cerchio a destra.
- Pieno: fondo firma, testo bianco. Al passaggio il fondo si RITIRA nel
cerchio della freccia e il bottone resta chiaro, testo e bordo firma.
- Fantasma: l'inverso. A riposo e' pieno solo il cerchio, al passaggio si
allarga a tutto il bottone.
Tutto con due pseudo-elementi, senza markup in piu': cosi' vale anche dove
il markup non e' nostro (hero del plugin, blocchi, WPForms).
::before lo strato pieno, un cerchio ritagliato con clip-path
::after il cerchio con la freccia
Un
(comments.php).
WPForms: il suo foglio colpisce il bottone con
div.wpforms-container-full .wpforms-form button[type="submit"] (0,2,2),
grigio e testo #333 — il bottone INVIA col testo scuro. I nostri selettori
aggiungono lo stesso contenitore e pesano (0,3,2).
Il colore arriva dalle variabili del Customizer (palette.css).
========================================================================== */
.htmb-cta,
.htmb-chi-sono .wp-block-button__link,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit {
/* Raggio del cerchio della freccia e margine interno: il centro del
cerchio sta a destra, alla stessa distanza dal bordo in alto e a lato. */
--htmb-cta-r: 1.05rem;
--htmb-cta-bordo: 0.35rem;
--htmb-cta-cx: calc(100% - var(--htmb-cta-bordo) - var(--htmb-cta-r));
--htmb-cta-fondo: var(--htmb-cta-color-primary);
--htmb-cta-freccia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: calc(2 * (var(--htmb-cta-r) + var(--htmb-cta-bordo)));
padding: var(--htmb-cta-bordo) calc(2 * var(--htmb-cta-r) + var(--htmb-cta-bordo) + 0.8rem) var(--htmb-cta-bordo) 1.35rem;
border: 1px solid var(--htmb-cta-fondo);
border-radius: 999px;
background: var(--htmb-superficie);
color: #fff;
font-family: var(--htmb-font-ui);
font-size: 0.92rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-transform: none;
cursor: pointer;
overflow: hidden;
box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--htmb-cta-fondo) 45%, transparent);
transition: color 380ms cubic-bezier(.65, 0, .35, 1),
box-shadow 380ms ease,
transform 380ms cubic-bezier(.65, 0, .35, 1);
}
.htmb-cta::before,
.htmb-chi-sono .wp-block-button__link::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--htmb-cta-fondo);
clip-path: circle(150% at var(--htmb-cta-cx) 50%);
transition: clip-path 420ms cubic-bezier(.65, 0, .35, 1);
}
.htmb-cta::after,
.htmb-chi-sono .wp-block-button__link::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit::after {
content: "";
position: absolute;
top: 50%;
right: var(--htmb-cta-bordo);
width: calc(2 * var(--htmb-cta-r));
height: calc(2 * var(--htmb-cta-r));
margin-top: calc(-1 * var(--htmb-cta-r));
border-radius: 50%;
background: var(--htmb-cta-freccia) center / 1rem no-repeat,
color-mix(in srgb, #fff 18%, transparent);
transition: transform 380ms cubic-bezier(.65, 0, .35, 1), background-color 380ms ease;
}
/* --- Al passaggio: il pieno si ritira nel cerchio ------------------------ */
.htmb-cta:hover,
.htmb-cta:focus-visible,
.htmb-chi-sono .wp-block-button__link:hover,
.htmb-chi-sono .wp-block-button__link:focus-visible,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]:focus-visible,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:focus-visible {
background: var(--htmb-superficie);
color: var(--htmb-cta-fondo);
box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--htmb-cta-fondo) 40%, transparent);
}
.htmb-cta:hover::before,
.htmb-cta:focus-visible::before,
.htmb-chi-sono .wp-block-button__link:hover::before,
.htmb-chi-sono .wp-block-button__link:focus-visible::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]:hover::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]:focus-visible::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:hover::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:focus-visible::before {
clip-path: circle(var(--htmb-cta-r) at var(--htmb-cta-cx) 50%);
}
.htmb-cta:hover::after,
.htmb-cta:focus-visible::after,
.htmb-chi-sono .wp-block-button__link:hover::after,
.htmb-chi-sono .wp-block-button__link:focus-visible::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]:hover::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]:focus-visible::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:hover::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:focus-visible::after {
background-color: transparent;
transform: translateX(2px);
}
.htmb-cta:focus-visible,
.htmb-chi-sono .wp-block-button__link:focus-visible,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]:focus-visible,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit:focus-visible {
outline: 3px solid var(--htmb-cta-fondo);
outline-offset: 3px;
}
/* Al clic col mouse il contorno non serve: resta per la tastiera. */
.htmb-cta:focus:not(:focus-visible) {
outline: none;
}
/* --- Fantasma: a riposo e' pieno solo il cerchio ------------------------- */
.htmb-cta--fantasma {
color: var(--htmb-cta-fondo);
box-shadow: none;
}
.htmb-cta--fantasma::before {
clip-path: circle(var(--htmb-cta-r) at var(--htmb-cta-cx) 50%);
}
.htmb-cta--fantasma::after {
background-color: transparent;
}
.htmb-cta.htmb-cta--fantasma:hover,
.htmb-cta.htmb-cta--fantasma:focus-visible {
color: #fff;
}
.htmb-cta.htmb-cta--fantasma:hover::before,
.htmb-cta.htmb-cta--fantasma:focus-visible::before {
clip-path: circle(150% at var(--htmb-cta-cx) 50%);
}
/* --- Il colore del testo in ogni stato del link --------------------------
Un link visitato o col focus prende il colore di a:visited / a:focus, che
pesa (0,1,1) contro (0,1,0) di .htmb-cta. Qui il testo resta quello del
bottone in ogni stato; le due classi del fantasma (0,3,0 con lo stato)
vincono sugli stati del link che vengono prima. */
.htmb-cta:link,
.htmb-cta:visited,
.htmb-cta:active {
color: #fff;
}
.htmb-cta.htmb-cta--fantasma:link,
.htmb-cta.htmb-cta--fantasma:visited,
.htmb-cta.htmb-cta--fantasma:active {
color: var(--htmb-cta-fondo);
}
.htmb-cta.htmb-cta:hover,
.htmb-cta.htmb-cta:focus-visible {
color: var(--htmb-cta-fondo);
}
.htmb-cta.htmb-cta--fantasma.htmb-cta--fantasma:hover,
.htmb-cta.htmb-cta--fantasma.htmb-cta--fantasma:focus-visible {
color: #fff;
}
/* --- Sul fondo scuro della hero ------------------------------------------
Il bottone chiaro al passaggio si stacca dal fondo scuro da solo; il
fantasma, trasparente, prende un bordo bianco per non sparire. */
.htmb-header .htmb-cta--fantasma {
border-color: rgba(255, 255, 255, 0.75);
background: transparent;
}
.htmb-header .htmb-cta.htmb-cta--fantasma:link,
.htmb-header .htmb-cta.htmb-cta--fantasma:visited {
color: #fff;
}
/* Il controllo del Customizer riguarda la CTA della hero, non tutte le altre
chiamate all'azione presenti nel sito. */
.htmb-cta-hidden .htmb-hero-cta .htmb-cta {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.htmb-cta,
.htmb-cta::before,
.htmb-cta::after,
.htmb-chi-sono .wp-block-button__link,
.htmb-chi-sono .wp-block-button__link::before,
.htmb-chi-sono .wp-block-button__link::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container button[type="submit"]::after,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit::before,
div.wpforms-container-full .wpforms-form .wpforms-submit-container .wpforms-submit::after {
transition: none;
}
}