/* ==========================================================================
RADIOFRANCO — Layout moderno (home + pagine interne)
HTML5 semantico + CSS moderno. Riusa i token e la dark mode di
radiofranco.css. Nessuna dipendenza da Bootstrap/Mobirise.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
main { display: block; }
img { max-width: 100%; height: auto; }
.rf-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.rf-center { text-align: center; }
/* --------------------------------- Icone --------------------------------- */
/* Icone del set SVG (sprite iniettato da radiofranco.js). Prendono colore e
dimensione dal testo accanto, così restano coerenti ovunque. */
.rf-ico {
width: 1.15em; height: 1.15em;
flex-shrink: 0; vertical-align: -.18em;
fill: none; stroke: currentColor;
}
.rf-ico--lg { width: 1.5em; height: 1.5em; }
/* --------------------------------- Bottoni ------------------------------- */
.rf-btn {
display: inline-flex; align-items: center; gap: .5em;
padding: .85rem 1.6rem; border-radius: 999px;
font-weight: 700; font-size: .95rem; letter-spacing: .01em;
border: 2px solid transparent; cursor: pointer; text-decoration: none;
white-space: nowrap; line-height: 1;
transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.rf-btn:hover { transform: translateY(-2px); }
.rf-btn:active { transform: translateY(0); }
.rf-btn--sm { padding: .6rem 1.1rem; font-size: .85rem; }
.rf-btn--primary { background: var(--rf-grad); color: #fff; box-shadow: 0 8px 20px rgba(47,75,239,.28); }
.rf-btn--primary:hover { box-shadow: 0 14px 30px rgba(47,75,239,.42); }
.rf-btn--wa { background: linear-gradient(135deg,#25d366,#1ebd5a); color: #fff; box-shadow: 0 8px 20px rgba(37,211,102,.3); }
.rf-btn--wa:hover { box-shadow: 0 14px 30px rgba(37,211,102,.45); }
.rf-btn--ghost { background: transparent; border-color: var(--rf-primary); color: var(--rf-primary); }
.rf-btn--ghost:hover { background: var(--rf-primary); color: #fff; }
.rf-btn--dark { background: var(--rf-primary-darker); color: #fff; }
.rf-btn--dark:hover { box-shadow: var(--rf-shadow-lg); }
.rf-btn--light { background: #fff; color: var(--rf-primary-dark); }
.rf-btn--light:hover { box-shadow: 0 14px 30px rgba(0,0,0,.22); }
body.dark .rf-btn--ghost { border-color: #5f7bff; color: #9db8ff; }
body.dark .rf-btn--ghost:hover { background: #5f7bff; color: #05060f; }
body.dark .rf-btn--dark { background: #1b2138; border-color: rgba(255,255,255,.14); }
/* --------------------------------- Navbar -------------------------------- */
.rf-nav {
position: sticky; top: 0; z-index: 1000;
display: flex; align-items: center; gap: 1rem;
padding: .5rem 1.4rem;
background: var(--rf-navbar-bg);
border-bottom: 1px solid var(--rf-line);
box-shadow: 0 2px 14px rgba(20,26,51,.08);
transition: background .4s ease, border-color .4s ease;
}
body.dark .rf-nav { backdrop-filter: blur(10px); box-shadow: 0 2px 20px rgba(0,0,0,.5); }
.rf-nav__brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex-shrink: 0; }
.rf-nav__logo { height: 46px; width: auto; }
.rf-nav__menu { display: flex; align-items: center; flex: 1; justify-content: flex-end; }
.rf-nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.rf-nav__link {
display: inline-flex; align-items: center; gap: .3rem;
padding: .5rem .7rem; border-radius: 9px;
font-weight: 600; font-size: .92rem; color: var(--rf-ink);
text-decoration: none; background: none; border: none; cursor: pointer;
font-family: inherit; white-space: nowrap;
transition: color .2s ease, background .2s ease;
}
.rf-nav__link:hover, .rf-nav__link.is-active { color: var(--rf-primary); }
body.dark .rf-nav__link { color: #c9d4ee; }
body.dark .rf-nav__link:hover, body.dark .rf-nav__link.is-active { color: #9db8ff; }
.rf-caret { font-size: .7em; opacity: .7; transition: transform .2s ease; }
.rf-nav__has-sub { position: relative; }
.rf-nav__sub {
position: absolute; top: calc(100% + 6px); left: 0; min-width: 214px;
list-style: none; margin: 0; padding: .4rem;
background: var(--rf-surface); border: 1px solid var(--rf-line);
border-radius: 12px; box-shadow: var(--rf-shadow);
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 20;
}
.rf-nav__has-sub:hover .rf-nav__sub,
.rf-nav__has-sub.open .rf-nav__sub { opacity: 1; visibility: visible; transform: none; }
.rf-nav__has-sub:hover .rf-caret, .rf-nav__has-sub.open .rf-caret { transform: rotate(180deg); }
.rf-nav__sub a {
display: block; padding: .55rem .8rem; border-radius: 8px;
color: var(--rf-ink); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.rf-nav__sub a:hover { background: var(--rf-surface-2); color: var(--rf-primary); }
body.dark .rf-nav__sub a { color: #c9d4ee; }
body.dark .rf-nav__sub a:hover { background: rgba(255,255,255,.06); color: #9db8ff; }
.rf-nav__cta { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.rf-nav__burger {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 42px; height: 42px; border: none; border-radius: 10px;
background: transparent; cursor: pointer; flex-shrink: 0;
}
.rf-nav__burger span { display: block; height: 2px; width: 22px; margin: 0 auto; background: var(--rf-ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
body.dark .rf-nav__burger span { background: #eaf2ff; }
.rf-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rf-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rf-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --------------------------- Sezioni generiche --------------------------- */
.rf-section { padding: clamp(52px, 7vw, 90px) 0; background: var(--rf-page-bg); transition: background .4s ease; }
.rf-section--alt { background: var(--rf-page-bg-alt); }
.rf-head { max-width: 720px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.rf-kicker {
display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .18em;
text-transform: uppercase; color: var(--rf-primary); margin-bottom: 12px;
}
body.dark .rf-kicker { color: #9db8ff; }
.rf-kicker--light { color: rgba(255,255,255,.85); }
body.dark .rf-kicker--light { color: rgba(255,255,255,.85); }
.rf-head h2, .rf-split__text h2, .rf-cta-band h2 {
font-size: clamp(1.8rem, 4vw, 2.9rem); font-weight: 900; line-height: 1.08;
letter-spacing: -.02em; color: var(--rf-ink); margin: 0 0 14px;
}
body.dark .rf-head h2, body.dark .rf-split__text h2 { color: #eaf2ff; }
.rf-head p { color: var(--rf-muted); font-size: 1.05rem; margin: 0; }
/* --------------------------------- Stats --------------------------------- */
.rf-stats { padding: 54px 20px; background: var(--rf-page-bg); transition: background .4s ease; }
.rf-stats-grid { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.rf-stat {
text-align: center; padding: 26px 16px; border: 1px solid var(--rf-line);
border-radius: 18px; background: var(--rf-surface); box-shadow: var(--rf-shadow);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .4s ease;
}
.rf-stat:hover { transform: translateY(-6px); box-shadow: var(--rf-shadow-lg); border-color: rgba(47,75,239,.35); }
body.dark .rf-stat:hover { border-color: rgba(37,195,230,.5); }
.rf-stat-num {
display: block; font-size: clamp(2rem,4.6vw,3rem); font-weight: 900; line-height: 1; letter-spacing: -.02em;
background: var(--rf-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.rf-stat-num { font-variant-numeric: tabular-nums; } /* niente sfarfallio mentre il contatore sale */
.rf-stat-num small { font-size: .5em; font-weight: 800; vertical-align: super; }
.rf-stat-lbl { display: block; margin-top: 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--rf-muted); }
/* --------------------------------- Cards --------------------------------- */
.rf-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.rf-card {
display: flex; flex-direction: column; align-items: flex-start;
padding: 30px 28px; border-radius: 20px;
background: var(--rf-surface); border: 1px solid var(--rf-line); box-shadow: var(--rf-shadow);
text-decoration: none; color: inherit;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .4s ease;
}
.rf-card:hover { transform: translateY(-8px); box-shadow: var(--rf-shadow-lg); border-color: rgba(47,75,239,.35); }
body.dark .rf-card:hover { border-color: rgba(37,195,230,.5); box-shadow: 0 22px 48px rgba(0,0,0,.6); }
.rf-card__ico {
width: 56px; height: 56px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
font-size: 26px; margin-bottom: 20px;
background: linear-gradient(135deg, rgba(47,75,239,.14), rgba(23,195,230,.12));
border: 1px solid rgba(47,75,239,.2);
}
body.dark .rf-card__ico { background: linear-gradient(135deg, rgba(95,123,255,.2), rgba(37,195,230,.14)); border-color: rgba(95,123,255,.3); }
.rf-card h3 { font-size: 1.25rem; font-weight: 800; margin: 0 0 10px; color: var(--rf-ink); letter-spacing: -.01em; }
body.dark .rf-card h3 { color: #eaf2ff; }
.rf-card p { margin: 0; color: var(--rf-muted); font-size: .97rem; line-height: 1.6; }
.rf-card__more { margin-top: 18px; font-weight: 700; font-size: .9rem; color: var(--rf-primary); letter-spacing: .02em; transition: gap .2s; }
body.dark .rf-card__more { color: #9db8ff; }
/* ----------------------- Card con foto (home/servizi) --------------------- */
/* La foto apre la card e l'icona resta: il pittogramma scende a cavallo del
bordo inferiore dell'immagine, cosi' i due linguaggi si legano invece di
competere. Il velo in basso garantisce lo stacco su qualunque scatto. */
.rf-card--photo { padding: 0; overflow: hidden; }
.rf-card__media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: var(--rf-surface-2); }
.rf-card__media img {
display: block; width: 100%; height: 100%; object-fit: cover;
border-radius: 0; /* batte il border-radius globale sulle img */
transition: transform .5s ease;
}
.rf-card--photo:hover .rf-card__media img { transform: scale(1.06); }
.rf-card__media::after {
content: ""; position: absolute; inset: auto 0 0 0; height: 42%;
background: linear-gradient(to top, rgba(13,19,48,.30), rgba(13,19,48,0));
}
.rf-card__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 0 26px 26px; }
/* i "Scopri di piu'" si allineano in fondo anche con testi di lunghezza diversa */
.rf-card--photo .rf-card__more { margin-top: auto; padding-top: 18px; }
/* margine negativo: mezza icona sulla foto, mezza sulla card */
.rf-card--photo .rf-card__ico {
position: relative; z-index: 2; margin: -30px 0 16px;
width: 54px; height: 54px;
background: var(--rf-surface) linear-gradient(135deg, rgba(47,75,239,.14), rgba(23,195,230,.12));
box-shadow: 0 10px 22px rgba(20,26,51,.22);
color: var(--rf-primary);
}
body.dark .rf-card--photo .rf-card__ico {
background: #131a2e linear-gradient(135deg, rgba(95,123,255,.22), rgba(37,195,230,.16));
border-color: rgba(95,123,255,.34); color: #9db8ff; box-shadow: 0 10px 22px rgba(0,0,0,.5);
}
/* --------------------------- Split (chi siamo) --------------------------- */
.rf-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
/* height:auto qui e' ridondante (c'e' gia' la regola globale img in cima al
file) ma resta esplicito: e' cio' che impedisce all'attributo height di
diventare un'altezza fissa e schiacciare la foto. Con width+height in HTML
il browser conosce le proporzioni PRIMA di scaricare il file e riserva lo
spazio: niente buco vuoto e niente salto del testo all'arrivo. */
.rf-split__media img { width: 100%; height: auto; border-radius: 20px; box-shadow: var(--rf-shadow-lg); }
.rf-split__text p { color: var(--rf-muted); line-height: 1.7; margin: 0 0 16px; font-size: 1.02rem; }
.rf-split__text b { color: var(--rf-ink); }
body.dark .rf-split__text b { color: #eaf2ff; }
.rf-split__text .rf-btn { margin-top: 8px; }
/* --------------------------------- Marchi -------------------------------- */
/* Targhette di solo testo: i nomi arrivano da marchi.txt, quindi la sezione
regge un elenco che cambia di continuo senza chiedere un logo per ogni voce.
Griglia fluida centrata: righe piene anche con 30 marchi o con 90. */
.rf-brands {
list-style: none; margin: 0 0 22px; padding: 0;
display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.rf-brands li {
padding: .55rem 1.05rem; border-radius: 999px;
background: var(--rf-surface); border: 1px solid var(--rf-line);
color: var(--rf-ink-soft); font-size: .88rem; font-weight: 700;
letter-spacing: .04em; white-space: nowrap;
transition: transform .2s ease, border-color .2s ease, color .2s ease, background .4s ease;
}
.rf-brands li:hover { transform: translateY(-2px); border-color: rgba(47,75,239,.4); color: var(--rf-primary); }
body.dark .rf-brands li { background: #131a2e; border-color: rgba(255,255,255,.1); color: #c9d4ee; }
body.dark .rf-brands li:hover { border-color: rgba(95,123,255,.5); color: #9db8ff; }
.rf-brands__count {
margin: 0 0 26px; text-align: center; color: var(--rf-muted);
font-size: .85rem; letter-spacing: .06em; text-transform: uppercase;
}
/* Categoria di prodotto: c'e' solo dove l'Excel la indica, quindi deve essere
un dettaglio della targhetta e non una seconda colonna che manca a meta'. */
.rf-brands__cat {
display: block; margin-top: 2px;
font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: none;
color: var(--rf-primary); opacity: .8;
}
body.dark .rf-brands__cat { color: #9db8ff; }
/* ------------------------- Nastro dei marchi (home) ----------------------
In home i marchi sono troppi per una griglia: occupavano mezza pagina per
dire una cosa sola ("ne gestiamo tanti"). Qui scorrono su UN rigo.
Due cose da sapere prima di toccarlo:
* la classe is-nastro la mette home.js DOPO aver duplicato la lista. Senza
JavaScript il nastro non si attiva e resta la griglia a capo: e' voluto,
perche' un overflow:hidden su una lista non duplicata taglierebbe via i
tre quarti dei marchi invece di farli scorrere;
* lo spostamento e' --rf-nastro-w, la larghezza di UNA copia piu' il suo
distacco, misurata dal DOM da home.js. Non e' -50%: meta' del totale
sbaglia di mezzo distacco e a ogni giro si vede uno scatto. Anche la
durata la calcola il JS, per tenere la velocita' costante comunque cambi
il numero di marchi. */
.rf-brands-nastro.is-nastro {
overflow: hidden;
margin-bottom: 22px;
-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.rf-brands-nastro.is-nastro .rf-brands {
flex-wrap: nowrap; justify-content: flex-start; width: max-content; margin-bottom: 0;
animation: rfNastro var(--rf-nastro-t, 60s) linear infinite;
}
/* Si ferma sotto il puntatore e mentre si naviga da tastiera: un elenco che
scorre e non si lascia leggere e' peggio di nessun elenco. */
.rf-brands-nastro.is-nastro:hover .rf-brands,
.rf-brands-nastro.is-nastro:focus-within .rf-brands { animation-play-state: paused; }
/* Il sollevamento al passaggio farebbe ballare la riga: qui basta il colore. */
.rf-brands-nastro.is-nastro li:hover { transform: none; }
@keyframes rfNastro {
from { transform: translateX(0); }
to { transform: translateX(calc(-1 * var(--rf-nastro-w, 50%))); }
}
/* ---------------------- Pagina marchi: A-Z e ricerca --------------------- */
.rf-marchi__bar {
display: flex; align-items: center; justify-content: space-between;
gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.rf-marchi__search { position: relative; flex: 1 1 320px; display: flex; align-items: center; }
.rf-marchi__search .rf-ico {
position: absolute; left: 18px; color: var(--rf-muted); pointer-events: none;
width: 1.1rem; height: 1.1rem;
}
.rf-marchi__search input {
width: 100%; padding: .8rem 1.2rem .8rem 3rem; border-radius: 999px;
border: 2px solid var(--rf-line); background: var(--rf-surface); color: var(--rf-ink);
font: inherit; font-size: 1rem;
transition: border-color .2s ease, box-shadow .2s ease, background .4s ease;
}
.rf-marchi__search input:focus { outline: none; border-color: var(--rf-primary); box-shadow: 0 0 0 4px rgba(47,75,239,.18); }
.rf-marchi__search input:disabled { opacity: .6; }
body.dark .rf-marchi__search input { background: #131a2e; border-color: rgba(255,255,255,.12); color: #eaf2ff; }
body.dark .rf-marchi__search input:focus { border-color: #5f7bff; box-shadow: 0 0 0 4px rgba(95,123,255,.28); }
.rf-marchi__meta {
margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
color: var(--rf-muted); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
}
.rf-marchi__az { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 30px; }
.rf-marchi__az a {
min-width: 34px; padding: .32rem .5rem; border-radius: 9px; text-align: center;
font-weight: 800; font-size: .86rem; text-decoration: none;
color: var(--rf-muted); border: 1px solid var(--rf-line); background: var(--rf-surface);
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.rf-marchi__az a:hover { color: var(--rf-primary); border-color: rgba(47,75,239,.4); }
body.dark .rf-marchi__az a { background: #131a2e; border-color: rgba(255,255,255,.1); color: #c9d4ee; }
body.dark .rf-marchi__az a:hover { color: #9db8ff; border-color: rgba(95,123,255,.5); }
.rf-marchi__gruppo { margin-bottom: 26px; scroll-margin-top: 90px; }
.rf-marchi__gruppo .rf-brands { justify-content: flex-start; margin-bottom: 0; }
.rf-marchi__lettera {
margin: 0 0 12px; font-size: .9rem; font-weight: 900; letter-spacing: .18em;
color: var(--rf-primary); border-bottom: 1px solid var(--rf-line); padding-bottom: 8px;
}
body.dark .rf-marchi__lettera { color: #9db8ff; border-bottom-color: rgba(255,255,255,.1); }
.rf-marchi__vuoto { margin: 30px 0 0; text-align: center; color: var(--rf-muted); }
.rf-marchi__vuoto a { color: var(--rf-primary); }
body.dark .rf-marchi__vuoto a { color: #9db8ff; }
@media (max-width: 620px) {
.rf-marchi__meta { align-items: flex-start; }
}
/* --------------------------- CTA band (montascale) ----------------------- */
.rf-cta-band { padding: clamp(44px,6vw,72px) 0; background: var(--rf-grad-dark); position: relative; overflow: hidden; }
.rf-cta-band::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 120% at 85% 20%, rgba(23,195,230,.28), transparent 60%); pointer-events: none; }
.rf-cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.rf-cta-band h2 { color: #fff; max-width: 720px; }
.rf-cta-band .rf-kicker--light { color: #bfe6f2; }
/* -------------------------- Contatti / Dove siamo ------------------------ */
.rf-contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,56px); align-items: start; }
.rf-info-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 16px; }
.rf-info-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; color: var(--rf-muted); line-height: 1.5; }
.rf-info-list li > span { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.rf-info-list strong { color: var(--rf-ink); font-weight: 700; }
body.dark .rf-info-list strong { color: #eaf2ff; }
.rf-info-list a { color: var(--rf-primary); text-decoration: none; }
body.dark .rf-info-list a { color: #9db8ff; }
.rf-zones { color: var(--rf-muted); font-size: .95rem; margin: 0 0 22px; }
.rf-zones strong { color: var(--rf-ink); }
body.dark .rf-zones strong { color: #eaf2ff; }
.rf-hero-actions--left { justify-content: flex-start; margin-top: 0; }
.rf-contact__media { display: grid; gap: 16px; }
.rf-contact__media img { width: 100%; border-radius: 16px; box-shadow: var(--rf-shadow); }
/* --------------------------------- Footer -------------------------------- */
.rf-footer { background: var(--rf-grad-dark); color: rgba(255,255,255,.82); padding: 56px 0 34px; }
.rf-footer__grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 30px; align-items: start; }
.rf-footer__brand img { border-radius: 50%; }
.rf-footer h5 { color: #fff; font-size: 1rem; font-weight: 800; letter-spacing: .04em; margin: 0 0 12px; }
.rf-footer p { margin: 0; line-height: 1.7; font-size: .95rem; }
.rf-footer a { color: var(--rf-cyan); text-decoration: none; }
.rf-footer a:hover { text-decoration: underline; }
.rf-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.rf-footer__bottom .copyright { font-size: .82rem; color: rgba(255,255,255,.7); max-width: 760px; }
.rf-footer__bottom .copyright a { color: var(--rf-cyan); }
.rf-social { display: flex; gap: 10px; }
.rf-social a {
width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,.1); color: #fff; font-weight: 700; text-decoration: none;
transition: background .2s ease, transform .2s ease;
}
.rf-social a:hover { background: rgba(255,255,255,.22); transform: translateY(-3px); text-decoration: none; }
/* ================================ HERO =================================== */
.rf-hero-modern {
position: relative; overflow: hidden; min-height: clamp(560px,88vh,940px);
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
padding: 34px 20px 40px;
/* Foglio di carta tecnica su cui e' stampato lo schema. NON bianco pieno:
il #fff su schermo abbaglia e appiattisce, e lo schema ci galleggerebbe
sopra senza appoggiarsi a niente. Qui c'e' un avorio freddo con tre strati
— grana fine, fibre orizzontali, macchie ampie — piu' una vignettatura che
scurisce appena i bordi: e' quella che da' l'idea del foglio.
Il colore sta qui e non sul canvas: cosi' non c'e' lampo bianco prima del JS. */
background-color: #f8f7f3;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
radial-gradient(58% 42% at 16% 10%, rgba(255,255,255,.95), rgba(255,255,255,0) 72%),
radial-gradient(66% 52% at 86% 82%, rgba(198,194,214,.34), rgba(198,194,214,0) 72%),
radial-gradient(130% 100% at 50% 42%, rgba(255,255,255,0) 48%, rgba(58,54,96,.12) 100%);
background-size: 180px 180px, 700px 700px, auto, auto, auto;
background-blend-mode: multiply, multiply, normal, normal, normal;
}
/* background-blend-mode NON viene azzerato dalla scorciatoia background:
senza questo reset il fondo notte erediterebbe i multiply della carta. */
body.dark .rf-hero-modern {
background: radial-gradient(120% 90% at 50% 0%, #0a0e1c 0%, #05060f 72%);
background-blend-mode: normal;
}
/* Sfocatura appena accennata: lo schema ora ha simboli con dettaglio fine
(zigzag, spire, sigle) e un blur marcato li impasterebbe. Serve solo a
togliere la durezza dell'antialiasing. */
#rf-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; filter: blur(.45px); opacity: 1; pointer-events: none; }
body.dark #rf-fx { opacity: .92; }
#rf-spark { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.rf-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 940px; display: flex; flex-direction: column; align-items: center; }
.rf-hero-eyebrow {
font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 700;
color: var(--rf-primary-dark); margin-bottom: 22px; opacity: 0; transform: translateY(16px); animation: rfRise .9s .2s forwards;
}
body.dark .rf-hero-eyebrow { color: #8fb2ff; }
.rf-hero-eyebrow strong { color: var(--rf-primary); }
body.dark .rf-hero-eyebrow strong { color: #25e6ff; }
.rf-hero-logo { position: relative; display: flex; flex-direction: column; align-items: center; }
.rf-hero-logo::after {
content: ""; position: absolute; left: 50%; bottom: -6px; z-index: -1; width: min(440px,58vw); height: 22px;
border-radius: 50%; background: radial-gradient(ellipse at center, rgba(30,18,70,.26), rgba(30,18,70,0) 70%);
transform: translateX(-50%); animation: rfGround 5.5s ease-in-out infinite;
}
body.dark .rf-hero-logo::after { background: radial-gradient(ellipse at center, rgba(200,192,255,.16), transparent 70%); }
.rf-logo-lift { animation: rfFloat 5.5s ease-in-out infinite; }
.rf-hero-svg { width: min(540px,78vw); height: auto; overflow: visible; filter: drop-shadow(0 14px 20px rgba(35,20,75,.28)); }
.rf-hero-svg .rf-body { fill: url(#rfg2); }
.rf-hero-svg .rf-trace { fill: #d7ccff; }
body.dark .rf-hero-svg { filter: drop-shadow(0 0 30px rgba(200,192,255,.5)) drop-shadow(0 16px 34px rgba(90,72,205,.5)); }
.rf-wordmark {
position: relative; z-index: 2; margin: 16px 0 0; line-height: 1;
display: flex; align-items: center; justify-content: center; white-space: nowrap;
width: min(620px,86vw); box-sizing: border-box;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-weight: 700;
letter-spacing: .12em; color: #fefefe; background: var(--rf-brand-purple);
padding: .2em .4em .24em; border-radius: 10px; box-shadow: 0 10px 24px rgba(35,20,75,.3);
font-size: clamp(1.5rem,6.2vw,3.4rem);
}
body.dark .rf-wordmark { box-shadow: 0 0 0 1px rgba(205,196,255,.28), 0 0 34px rgba(170,158,255,.4), 0 14px 32px rgba(0,0,0,.55); }
/* Non usa --rf-muted: sul campo lavanda serve un grigio piu' scuro per restare
sopra 4.5:1 anche nel punto piu' saturo del gradiente (4,8:1 su #ada9e6). */
.rf-hero-tagline { margin-top: 22px; font-size: clamp(1rem,2.2vw,1.22rem); color: #363d52; max-width: 600px; opacity: 0; transform: translateY(16px); animation: rfRise 1s 1.1s forwards; }
.rf-hero-tagline b { color: var(--rf-ink); font-weight: 700; }
body.dark .rf-hero-tagline { color: #9fb0cf; }
body.dark .rf-hero-tagline b { color: #eaf2ff; }
.rf-hero-actions { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; opacity: 0; transform: translateY(16px); animation: rfRise 1s 1.3s forwards; }
/* Da qui in giu' e' tutto agganciato a .rf-hero-modern: la stessa classe
.rf-hero-actions sta nelle hero di ogni pagina interna, dove non c'e' nessuna
scheda a cui saldare i tasti. */
.rf-hero-modern .rf-hero-actions { margin-top: 26px; }
/* Entrata in sola dissolvenza, senza translateY: qui i tasti vengono MISURATI
dal canvas per disegnarci piste e serigrafia, e getBoundingClientRect()
include il transform. Con la salita, al primo build i piedini finivano 16px
piu' in basso della loro posizione definitiva e si riallineavano solo al
primo resize. Le hero delle altre pagine tengono la salita. */
.rf-hero-modern .rf-hero-actions,
.rf-hero-modern .rf-hero-badge { transform: none; animation-name: rfFadeIn; }
@keyframes rfFadeIn { to { opacity: 1; } }
/* I CTA della home sono tasti saldati sulla scheda: questi sono i due piedini,
e le piste che ne escono le disegna il canvas (wireButtons in radiofranco.js)
leggendo la posizione reale di ogni pulsante. Il 20%/80% qui e nel JS devono
restare uguali, altrimenti pista e piedino non si toccano. */
.rf-hero-modern .rf-hero-actions .rf-btn { position: relative; }
.rf-hero-modern .rf-hero-actions .rf-btn::before,
.rf-hero-modern .rf-hero-actions .rf-btn::after {
content: ""; position: absolute; top: 100%; width: 4px; height: 7px;
border-radius: 0 0 2px 2px; background: linear-gradient(180deg, #d8b45c, #8a6c24);
box-shadow: 0 0 5px rgba(216,180,92,.45); pointer-events: none;
}
.rf-hero-modern .rf-hero-actions .rf-btn::before { left: calc(20% - 2px); }
.rf-hero-modern .rf-hero-actions .rf-btn::after { left: calc(80% - 2px); }
/* "Chiamaci" era l'unico dei tre a essere solo un contorno: sul campo lavanda
spariva accanto al verde pieno e al navy pieno. Qui prende un corpo opaco,
cosi' e' un tasto vero come gli altri due — ma resta bianco/superficie
invece che colorato pieno, per non rubare la scena a WhatsApp. */
.rf-hero-modern .rf-hero-actions .rf-btn--ghost {
background: #fff; color: var(--rf-primary); border-color: var(--rf-primary);
box-shadow: 0 8px 20px rgba(47,75,239,.22);
}
.rf-hero-modern .rf-hero-actions .rf-btn--ghost:hover {
background: var(--rf-primary); color: #fff; box-shadow: 0 14px 30px rgba(47,75,239,.4);
}
body.dark .rf-hero-modern .rf-hero-actions .rf-btn--ghost {
background: #141c3c; color: #c6d7ff; border-color: #5f7bff;
box-shadow: 0 0 18px rgba(95,123,255,.26), 0 10px 24px rgba(0,0,0,.5);
}
body.dark .rf-hero-modern .rf-hero-actions .rf-btn--ghost:hover {
background: #5f7bff; color: #05060f; box-shadow: 0 0 26px rgba(95,123,255,.5);
}
/* classe messa dal JS sui tasti che vanno a capo: niente piedini senza pista */
.rf-hero-modern .rf-hero-actions .rf-btn.rf-noleg::before,
.rf-hero-modern .rf-hero-actions .rf-btn.rf-noleg::after { display: none; }
/* Il badge scende sotto il rail di massa: se restasse a ridosso dei tasti
coprirebbe proprio le piste che ne escono. */
.rf-hero-badge { margin-top: 56px; display: inline-block; opacity: 0; animation: rfRise 1s 1.5s forwards; transition: transform .2s ease; }
.rf-hero-badge img { border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.rf-hero-badge:hover { transform: translateY(-3px); }
@keyframes rfRise { to { opacity: 1; transform: none; } }
@keyframes rfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes rfGround { 0%,100% { transform: translateX(-50%) scaleX(1); opacity: .9; } 50% { transform: translateX(-50%) scaleX(.82); opacity: .55; } }
/* ======================= MONITOR CRT DELLA HERO ==========================
L'intestazione e' l'immagine su un monitor saldato alla scheda: scocca,
vetro bombato, maschera dei pixel, riflesso ambientale, grana e connettore
che il canvas del circuito aggancia davvero (vedi #rfCrtPort in radiofranco.js).
Lo schermo resta scuro anche in tema chiaro: un monitor acceso e' sempre
piu' scuro della stanza, ed e' cio' che lo fa leggere come vetro.
======================================================================== */
.rf-crt { position: relative; z-index: 2; width: min(760px, 94%); display: flex; flex-direction: column; align-items: center; }
/* --- scocca ------------------------------------------------------------- */
.rf-crt__body {
position: relative; width: 100%; box-sizing: border-box;
padding: clamp(12px, 1.9vw, 20px) clamp(12px, 1.9vw, 20px) 0;
border-radius: clamp(16px, 2.2vw, 26px) clamp(16px, 2.2vw, 26px) clamp(10px, 1.4vw, 16px) clamp(10px, 1.4vw, 16px);
background: linear-gradient(180deg, #2a2e46 0%, #1b1e30 42%, #101223 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.6),
0 2px 0 rgba(0,0,0,.35), 0 34px 60px -24px rgba(24,14,58,.72), 0 0 0 1px rgba(0,0,0,.4);
}
body.dark .rf-crt__body { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(150,170,255,.14), 0 30px 70px -26px rgba(0,0,0,.9); }
/* --- vetro -------------------------------------------------------------- */
.rf-crt__screen {
position: relative; overflow: hidden; isolation: isolate;
border-radius: 4% / 8%; /* bombatura del tubo */
padding: clamp(14px, 2vw, 24px) clamp(16px, 2.4vw, 30px) clamp(10px, 1.6vw, 18px);
background:
radial-gradient(130% 120% at 50% 8%, #16203f 0%, #0b1026 52%, #05060f 100%);
box-shadow: inset 0 0 0 1px rgba(140,180,255,.16), inset 0 0 clamp(30px,5vw,64px) rgba(0,0,0,.75);
}
.rf-crt__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
/* Il contenuto emette luce: e' un fosforo, non inchiostro. Ed e' rimpicciolito
rispetto alla hero libera: dentro una cornice deve restarci anche il vetro. */
.rf-crt .rf-hero-eyebrow { color: #8fb2ff; text-shadow: 0 0 14px rgba(80,150,255,.45); font-size: clamp(9px,1.05vw,11.5px); margin-bottom: 10px; }
.rf-crt .rf-hero-eyebrow strong { color: #25e6ff; }
.rf-crt .rf-hero-tagline { color: #a7bad9; margin-top: 14px; font-size: clamp(.9rem,1.5vw,1.04rem); }
.rf-crt .rf-hero-tagline b { color: #eaf2ff; }
.rf-crt .rf-hero-svg { width: min(296px, 40vw); filter: drop-shadow(0 0 26px rgba(190,182,255,.45)) drop-shadow(0 10px 26px rgba(70,56,170,.5)); }
/* Sul monitor il marchio e' spaziato lettera per lettera, ma lo fa la
spaziatura CSS e NON degli spazi nel testo: nell'HTML resta la parola intera
"RADIOFRANCO", quindi si copia, si cerca e i lettori di schermo la leggono
come una parola sola invece di sillabarla.
text-indent compensa lo spazio che la spaziatura aggiunge anche DOPO
l'ultima lettera: senza, la scritta risulta spostata a sinistra nel riquadro. */
.rf-crt .rf-wordmark {
/* larghezza a contenuto (non fissa): con una spaziatura cosi' ampia una
larghezza fissa la farebbe traboccare dalla targa al primo ritocco */
width: auto; max-width: 92%; font-size: clamp(.88rem, 3vw, 1.72rem); margin-top: 8px;
letter-spacing: .62em; text-indent: .62em;
box-shadow: 0 0 0 1px rgba(205,196,255,.3), 0 0 36px rgba(170,158,255,.42), 0 12px 30px rgba(0,0,0,.6);
}
/* Dentro un monitor l'immagine non gravita: niente galleggiamento ne' ombra a terra. */
.rf-crt .rf-logo-lift { animation: none; }
.rf-crt .rf-hero-logo::after { display: none; }
/* --- terminale: scrittura a codice + cursore ----------------------------- */
.rf-crt__term {
width: 100%; max-width: 460px; margin-top: clamp(12px, 1.8vw, 18px); text-align: left;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: clamp(8.5px, 1.05vw, 11px); line-height: 1.62;
/* VERDE FOSFORO, quello dei terminali: prima era un verde-menta virato al
ciano (#74f5c0), che e' il colore di una console moderna, non di un tubo.
Il fosforo P1 e' verde puro e leggermente giallo. */
color: #57ff7a; text-shadow: 0 0 9px rgba(60,255,110,.55);
opacity: 0; animation: rfRise 1s 1.6s forwards;
/* Finestra ad ALTEZZA FISSA di due righe, non min-height: il log scorre
dentro un ritaglio. Con un'altezza elastica ogni riga scritta allargava
la casella, e con lei lo schermo e tutta la scocca — sembrava un difetto.
nowrap perche' nemmeno una riga lunga possa mandare a capo e ricrescere. */
height: 3.3em; overflow: hidden; white-space: nowrap;
}
.rf-crt__log { display: block; opacity: .42; overflow: hidden; }
.rf-crt__caret { display: inline-block; width: .58em; height: 1.05em; background: currentColor; vertical-align: -.16em; margin-left: 3px; animation: rfCaret 1.05s steps(1) infinite; }
/* --- maschera dei pixel + scanlines -------------------------------------- */
.rf-crt__mask {
position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
background:
repeating-linear-gradient(to bottom, rgba(0,0,0,.34) 0 1px, rgba(0,0,0,0) 1px 3px),
repeating-linear-gradient(to right, rgba(255,40,90,.055) 0 1px, rgba(60,255,140,.055) 1px 2px, rgba(60,130,255,.055) 2px 3px);
}
/* barra di refresh che scorre: e' la frequenza di aggiornamento */
.rf-crt__mask::after {
content: ""; position: absolute; left: 0; right: 0; height: 26%;
background: linear-gradient(to bottom, rgba(180,220,255,0), rgba(180,220,255,.055) 50%, rgba(180,220,255,0));
animation: rfScan 7.5s linear infinite;
}
/* --- vetro: solo vignettatura --------------------------------------------
Il riflesso ambientale (striscia diagonale a 108deg + bagliore radiale in
alto a sinistra) e' stato TOLTO: due veli bianchi sopra il contenuto
costavano piu' contrasto di quanto rendessero in verosimiglianza, e su un
terminale il testo deve leggersi. La vignettatura del ::after resta, perche'
non e' un riflesso: e' il bordo del tubo, ed e' quella a dare la forma
bombata allo schermo. Il CRT lo raccontano ancora maschera, scanline,
barra di refresh e grana. */
.rf-crt__glass {
position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
}
/* VIGNETTATURA: c'e', e ci resta. Tolta per un'ora il 2026-08-05 e RIMESSA
subito: era stata tolta insieme ad altri due effetti per inseguire l'ombra
pulsante, che invece era una terza cosa (il lampo di `is-pulse`, piu' sotto).
Errore di metodo, non di codice: si toglie quello che e' stato chiesto, e
per il resto si domanda. In chiaro pero' non vale — la riga
body:not(.dark) qui sotto la spegne, perche' li' il vetro e' chiaro e
qualunque bordo scuro torna a leggersi come l'alone che il proprietario ha
chiesto di togliere. */
.rf-crt__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 clamp(40px,6vw,80px) clamp(10px,2vw,26px) rgba(0,0,0,.6); }
body:not(.dark) .rf-crt__glass::after { box-shadow: none; }
/* ==========================================================================
IL CRT IN MODALITA' CHIARA (2026-08-05)
Tutto quello che sta sopra descrive un tubo ACCESO: scocca scura, vetro
quasi nero, fosforo che emette luce. In modalita' scura e' esattamente
giusto. In chiaro era un blocco nero in mezzo a una pagina bianca — l'ha
detto il proprietario, che ha scelto di ALLEGGERIRE ANCHE IL VETRO e non
solo la scocca.
E' una scelta con un prezzo, ed e' giusto saperlo: il vetro chiaro non e'
piu' un tubo acceso, e' un foglio dentro una cornice. Quindi qui non si
schiariscono dei colori — si rovescia il verso della luce. Tutto quello
che era luminoso su fondo scuro (verde del terminale, aloni del logo,
scanline nere, vignettatura) diventa scuro su fondo chiaro, e chi tocca
una di queste righe deve ricordarsi che ha una gemella qui sopra.
LA SCOCCA E' SILVER. La prima versione era avorio, con la giustificazione
che un televisore del 1976 era di plastica chiara — e il proprietario l'ha
bocciata con una frase che vale la pena tenere: «la cornice degli LCD e' di
solito o silver o bianca o nera». Aveva ragione, e l'errore era di
riferimento, non di colore: col vetro chiaro quell'oggetto non si legge piu'
come un tubo del 1976, si legge come un monitor — e allora deve avere i
colori di un monitor. Bianca sparirebbe sulla pagina chiara, nera e' quello
che stiamo togliendo: resta silver. (Cambiare idea costa una riga: il
gradiente qui sotto.)
NIENTE E' CAMBIATO PER IL TEMA SCURO: sono tutte regole body:not(.dark).
========================================================================== */
body:not(.dark) .rf-crt__body {
background: linear-gradient(180deg, #f2f3f5 0%, #dfe2e7 46%, #c9ced6 100%);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(120,128,140,.34),
0 2px 0 rgba(120,128,140,.24), 0 26px 52px -24px rgba(60,50,90,.34), 0 0 0 1px rgba(120,128,140,.3);
}
/* VETRO PIATTO (scelta del proprietario, 2026-08-05): niente gradiente radiale
e niente alone interno. Erano l'ombra FISSA attorno ai bordi — quella che non
pulsava e che restava anche dopo aver tolto il lampo. Un colore solo, e il
bordo lo fa la riga da un pixel. */
body:not(.dark) .rf-crt__screen {
background: #f6f7fb;
box-shadow: inset 0 0 0 1px rgba(51,33,122,.16);
}
/* Il contenuto: da fosforo a inchiostro. Niente text-shadow, che su fondo
chiaro non e' luce ma sporco. */
body:not(.dark) .rf-crt .rf-hero-eyebrow { color: #4c5c92; text-shadow: none; }
body:not(.dark) .rf-crt .rf-hero-eyebrow strong { color: #0e7d9e; }
body:not(.dark) .rf-crt .rf-hero-tagline { color: #4a5165; }
body:not(.dark) .rf-crt .rf-hero-tagline b { color: var(--rf-ink); }
/* Il logo e' quello VIOLA su trasparente: sul vetro chiaro e' il suo fondo
naturale (2.1), quindi non serve nessun alone — basta un'ombra corta che
lo stacchi dal vetro. */
body:not(.dark) .rf-crt .rf-hero-svg { filter: drop-shadow(0 6px 14px rgba(51,33,122,.22)); }
body:not(.dark) .rf-crt .rf-wordmark { box-shadow: 0 10px 24px rgba(35,20,75,.26); }
/* Il verde fosforo su bianco sarebbe illeggibile: stesso verde, portato al
valore che serve per leggersi sul chiaro. Resta un terminale, non diventa
testo qualunque. */
/* Lo stesso verde fosforo, portato al valore che serve per leggersi sul vetro
chiaro. Il fosforo puro (#57ff7a) su un fondo quasi bianco ha un contrasto
di 1,4:1 — non e' poco leggibile, e' invisibile. Qui la TINTA resta quella,
scende la luminosita': si legge ancora come "verde da terminale" e non come
un testo qualunque. Se lo vuoi fosforo VERO anche in chiaro, la strada e'
dare al terminale una sua striscia scura dentro il vetro. */
body:not(.dark) .rf-crt__term { color: #0c7350; text-shadow: none; }
body:not(.dark) .rf-crt__log { opacity: .5; }
/* Scanline e barra di refresh: erano nere su scuro, restano scure ma molto
piu' tenui, se no su bianco diventano una tapparella. */
/* INTENSITA': in chiaro gli effetti giravano a un terzo di quelli scuri
(scanline .09 contro .34, grana .06 contro .16, barra .05) e il proprietario
l'ha detto guardando lo schermo: «le lettere sono molto definite, non vedo
effetti». Avevo abbassato tutto temendo che su fondo chiaro si vedesse il
doppio — e' vero il contrario: il rumore scuro sul chiaro rende MENO, non
di piu', perche' non ha il nero sotto che lo fa risaltare. */
body:not(.dark) .rf-crt__mask {
background:
repeating-linear-gradient(to bottom, rgba(51,33,122,.19) 0 1px, rgba(0,0,0,0) 1px 3px),
repeating-linear-gradient(to right, rgba(255,40,90,.05) 0 1px, rgba(60,255,140,.05) 1px 2px, rgba(60,130,255,.05) 2px 3px);
}
body:not(.dark) .rf-crt__mask::after {
background: linear-gradient(to bottom, rgba(51,33,122,0), rgba(51,33,122,.09) 50%, rgba(51,33,122,0));
}
/* QUI c'era una seconda vignettatura per il chiaro (viola al 14%, 80px di
sfumatura e 26px di allargamento): e' LEI il "contorno spesso fra cornice e
LCD" segnalato tre volte, ed e' sopravvissuta a tre correzioni perche' piu'
su nel file avevo scritto `box-shadow: none` per lo stesso selettore — e in
CSS vince l'ultima, non la piu' esplicita. Tolta.
Il modo per trovarla non e' stato leggere il CSS ma chiedere al browser i
valori CALCOLATI dei sette strati del monitor uno per uno: la regola c'era,
ma nessuno si aspetta di trovare due volte lo stesso selettore in due punti
diversi dello stesso file. */
body:not(.dark) .rf-crt__grain { opacity: .12; }
/* La targa sta sulla scocca, che adesso e' chiara: il grigio-azzurro chiaro
ci sparirebbe sopra. */
body:not(.dark) .rf-crt__brand { color: rgba(70,62,52,.5); }
body:not(.dark) .rf-crt__led { background: #17a06a; box-shadow: 0 0 8px rgba(23,160,106,.45); }
body:not(.dark) .rf-crt.is-pulse .rf-crt__led { background: #12b877; box-shadow: 0 0 12px rgba(18,184,119,.8), 0 0 26px rgba(18,184,119,.4); }
/* L'OMBRA PULSANTE ERA QUESTA, non la vignettatura. `home.js` accende
`is-pulse` a intervalli, e la regola dell'impianto scuro rimette un'ombra
interna NERA al 62% su tutto il perimetro del vetro: tolta la vignettatura
fissa, restava lei ad accendersi e spegnersi: da fuori si vede lo stesso
bordo che respira, e infatti il proprietario l'ha segnalata una seconda
volta. Sul vetro chiaro il battito lo da' il bordo che si accende, non
un'ombra che si chiude.
MORALE, e vale oltre il CRT: quando si toglie un effetto, si cerca chi
ALTRO lo disegna. Qui lo stesso nero stava scritto in due regole, una
fissa e una a intermittenza, e togliere la prima lasciava intatta la
seconda — che e' pure quella che si nota di piu', perche' si muove. */
/* IL LAMPO IN CHIARO E' SOLO LA RIGA DEL BORDO CHE SI ACCENDE. Niente ombre
sfumate, ne' dentro ne' fuori, e le due esclusioni sono state pagate una
per volta:
- un `inset` sfumato, anche al 10%, disegna un contorno spesso fra cornice
e vetro;
- un'ombra ESTERNA sfumata (0 0 30px) e' peggio, perche' il vetro sta
incassato nella scocca e quindi quella sfumatura finisce SOPRA LA
CORNICE: da fuori si vede una macchia violacea che appare ogni tre
secondi sul silver, che e' il posto dove meno te l'aspetti.
Su fondo chiaro un battito si legge benissimo con un cambio di valore
secco su una riga da un pixel: non serve luce, serve un contrasto che
cambia. */
body:not(.dark) .rf-crt.is-pulse .rf-crt__screen {
box-shadow: inset 0 0 0 1px rgba(51,33,122,.42);
}
/* Il pettine dei connettori sotto la scocca restava l'ultima cosa nera della
hero chiara — e da solo si leggeva come una macchia, non come una presa.
Grigio scuro invece che nero: e' comunque piu' scuro dell'avorio, quindi
continua a sembrare metallo, e i pin dorati si vedono meglio di prima. */
body:not(.dark) .rf-crt__port { background: linear-gradient(180deg, #7c7668, #5d584c); box-shadow: 0 1px 0 rgba(90,84,72,.5), 0 6px 14px -6px rgba(60,50,40,.5); }
/* --- grana video ---------------------------------------------------------
Spenta per un'ora il 2026-08-05 e RIACCESA: come la vignettatura, era stata
tolta inseguendo l'ombra pulsante, che era un'altra cosa. In chiaro resta
piu' tenue (regola body:not(.dark) qui sopra), perche' su fondo chiaro lo
stesso rumore si vede il doppio. */
.rf-crt__grain {
position: absolute; inset: -60%; z-index: 5; pointer-events: none; opacity: .16;
background-image: url("data:image/svg+xml;utf8,");
animation: rfGrain .6s steps(3) infinite;
}
/* --- strappo del glitch --------------------------------------------------- */
.rf-crt__tear {
position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 6; pointer-events: none;
background: linear-gradient(90deg, rgba(255,40,120,.16), rgba(90,230,255,.16));
box-shadow: 0 0 22px rgba(120,220,255,.35); opacity: 0;
}
.rf-crt.is-glitch .rf-crt__tear { height: clamp(8px, 1.6vw, 16px); animation: rfTear .34s linear 1; }
.rf-crt.is-glitch .rf-crt__content { animation: rfAberr .34s steps(2) 1; }
.rf-crt.is-glitch .rf-crt__screen { animation: rfJolt .34s steps(3) 1; }
/* --- impulso quando la corrente arriva dal circuito ------------------------ */
/* IL LAMPO DEL CONNETTORE. Lo accende radiofranco.js (`hitPort`) per 240 ms
ogni volta che l'impulso che corre sul circuito della hero arriva ai pin:
non e' casuale, va a tempo con quello. L'ombra interna era **nera al 62%**
ed e' stata portata al **15%** il 2026-08-05, su richiesta del proprietario
che l'aveva segnalata due volte: a quel valore si legge come un battito e
non come un'ombra che si chiude sui bordi. E' anche la cosa che per due giri
ho cercato nel posto sbagliato — la vignettatura fissa — perche' questa qui
si accende e si spegne, e quindi non c'e' quando la vai a cercare. */
.rf-crt.is-pulse .rf-crt__screen { box-shadow: inset 0 0 0 1px rgba(160,210,255,.34), inset 0 0 clamp(30px,5vw,64px) rgba(0,0,0,.15); }
.rf-crt.is-pulse .rf-crt__content { filter: brightness(1.1); }
.rf-crt.is-pulse .rf-crt__led { background: #7dffbe; box-shadow: 0 0 12px #4dffa8, 0 0 26px rgba(77,255,168,.6); }
/* --- mento della scocca: marchio + led ------------------------------------ */
.rf-crt__chin { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: clamp(7px,1.1vw,11px) clamp(4px,.8vw,10px) clamp(6px,1vw,10px); }
.rf-crt__brand { font-size: clamp(7.5px,.86vw,10px); letter-spacing: .3em; font-weight: 700; color: rgba(206,214,255,.42); text-transform: uppercase; }
.rf-crt__led { width: 7px; height: 7px; border-radius: 50%; background: #3fd694; box-shadow: 0 0 8px rgba(63,214,148,.75); animation: rfLed 3.4s ease-in-out infinite; }
/* --- connettore: e' qui che il circuito entra nel monitor ------------------ */
.rf-crt__port {
position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(5px,.8vw,9px);
width: clamp(120px, 20%, 190px); padding: 0 clamp(8px,1.2vw,12px);
background: linear-gradient(180deg, #191c2e, #0e1020); border-radius: 0 0 5px 5px;
box-shadow: 0 1px 0 rgba(0,0,0,.5), 0 6px 14px -6px rgba(0,0,0,.7);
}
.rf-crt__port i {
width: clamp(2.5px,.42vw,4px); height: clamp(9px,1.3vw,14px); border-radius: 0 0 2px 2px;
background: linear-gradient(180deg, #d8b45c, #8a6c24); transition: box-shadow .18s ease, background .18s ease;
}
.rf-crt__port.is-hit i { background: linear-gradient(180deg, #fff3c9, #e8c26a); box-shadow: 0 0 10px rgba(255,214,120,.9); }
@keyframes rfCaret { 0%,45% { opacity: 1; } 46%,100% { opacity: 0; } }
@keyframes rfScan { 0% { transform: translateY(-30%); } 100% { transform: translateY(400%); } }
@keyframes rfGrain {
0% { transform: translate3d(0,0,0); } 33% { transform: translate3d(-6%,4%,0); }
66% { transform: translate3d(5%,-5%,0); } 100% { transform: translate3d(-3%,-2%,0); }
}
@keyframes rfLed { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes rfTear { 0% { opacity: .9; top: 12%; } 55% { opacity: .8; top: 58%; } 100% { opacity: 0; top: 84%; } }
@keyframes rfAberr {
0%,100% { text-shadow: none; transform: none; }
35% { text-shadow: -3px 0 rgba(255,30,90,.75), 3px 0 rgba(40,230,255,.75); transform: translateX(-3px); }
70% { text-shadow: 2px 0 rgba(255,30,90,.6), -2px 0 rgba(40,230,255,.6); transform: translateX(2px); }
}
@keyframes rfJolt { 0%,100% { transform: none; } 40% { transform: translateX(-2px) skewX(.5deg); } 75% { transform: translateX(2px); } }
/* ------------------------------ Responsive ------------------------------- */
/* ------------- Barra: compattazione nella fascia intermedia ---------------
A dimensione piena la barra con nove voci chiede 1465px: sopra i 1560 c'e'
margine e resta com'e', sotto si stringe invece di traboccare. Il limite
alto NON e' arrotondato per bellezza — a 1404px la fascia finiva e il menu
tornava grande in una finestra che non lo conteneva.
Prima di questa regola la barra a otto voci ne chiedeva 1396 e il panino
scattava solo a 991: sotto i ~1395px la pagina scorreva di lato con
"Dove Siamo", il tema e il tasto CHAT fuori schermo.
(La scritta "RADIO FRANCO" accanto al logo non c'e' piu' in nessuna
larghezza: il marchio e' gia' dentro l'immagine del logo.) */
@media (min-width: 1150px) and (max-width: 1560px) {
.rf-nav { padding: .5rem .9rem; gap: .5rem; }
.rf-nav__logo { height: 40px; }
.rf-nav__list { gap: 0; }
.rf-nav__link { padding: .5rem .38rem; font-size: .845rem; }
.rf-nav__cta .rf-btn--sm { padding: .55rem .85rem; font-size: .8rem; }
}
@media (max-width: 1149px) {
.rf-nav__burger { display: flex; order: 3; }
/* Con il menu esteso fuori dal flusso (position:absolute qui sotto) niente
spinge piu' a destra: senza questo margine automatico interruttore, CHAT
e panino restano appiccicati al logo con mezza barra vuota accanto. */
.rf-nav__cta { order: 2; margin-left: auto; }
.rf-nav__menu {
order: 4; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
background: var(--rf-navbar-bg); border-bottom: 1px solid var(--rf-line); box-shadow: 0 12px 24px rgba(0,0,0,.12);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
padding: .6rem 1rem 1rem; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s ease, visibility .3s ease;
}
.rf-nav__menu.open { max-height: 82vh; overflow: auto; visibility: visible; }
.rf-nav__list { flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; }
.rf-nav__link { width: 100%; justify-content: space-between; padding: .8rem .6rem; font-size: 1rem; }
.rf-nav__has-sub .rf-nav__sub {
position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none;
background: transparent; min-width: 0; padding: 0 0 .3rem .8rem; max-height: 0; overflow: hidden; transition: max-height .25s ease;
}
.rf-nav__has-sub.open .rf-nav__sub { max-height: 320px; }
}
@media (max-width: 900px) {
.rf-cards { grid-template-columns: repeat(2,1fr); }
.rf-split, .rf-contact { grid-template-columns: 1fr; }
.rf-split__media { order: -1; }
}
@media (max-width: 720px) {
.rf-stats-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
.rf-cards { grid-template-columns: 1fr; }
.rf-cta-band__inner { flex-direction: column; align-items: flex-start; }
.rf-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.rf-logo-lift, .rf-hero-logo::after { animation: none !important; }
.rf-hero-eyebrow, .rf-hero-tagline, .rf-hero-actions, .rf-hero-badge { opacity: 1 !important; transform: none !important; animation: none !important; }
/* Il monitor resta (scanlines e vignetta): a sparire e' solo cio' che si
muove — grana, barra di refresh, glitch, led e cursore. */
.rf-crt__grain, .rf-crt__mask::after, .rf-crt__led, .rf-crt__caret { animation: none !important; }
.rf-crt__grain { opacity: .1; }
.rf-crt__term { opacity: 1 !important; animation: none !important; }
.rf-crt.is-glitch .rf-crt__tear, .rf-crt.is-glitch .rf-crt__content, .rf-crt.is-glitch .rf-crt__screen { animation: none !important; }
/* Nastro dei marchi: chi non vuole movimento si riprende la griglia a capo.
Fermarlo e basta non bastava — con overflow:hidden resterebbe visibile un
rigo solo e tutti gli altri marchi sparirebbero. Le copie servono al ciclo
continuo e qui vanno tolte, se no ogni marchio comparirebbe due volte. */
.rf-brands-nastro.is-nastro { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.rf-brands-nastro.is-nastro .rf-brands {
flex-wrap: wrap; justify-content: center; width: auto; animation: none !important;
}
.rf-brands-nastro.is-nastro .rf-brands__clone { display: none; }
}
/* ==========================================================================
COMPONENTI DELLE PAGINE INTERNE
(hero compatta, card con immagine, testo lungo, gallery, banner cookie)
========================================================================== */
/* ----------------------------- Hero di pagina ---------------------------- */
.rf-hero-page {
position: relative; overflow: hidden;
padding: clamp(64px, 9vw, 116px) 0 clamp(52px, 7vw, 90px);
background: var(--rf-grad-dark); color: #fff;
}
.rf-hero-page::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(60% 100% at 88% 12%, rgba(23,195,230,.30), transparent 62%),
radial-gradient(50% 90% at 8% 92%, rgba(95,123,255,.28), transparent 65%);
}
/* Longhand, non shorthand: la shorthand azzererebbe background-size/position
della variante --photo (che ha specificità più bassa) lasciando la foto
non ritagliata e ancorata in alto a sinistra in dark mode. */
body.dark .rf-hero-page {
background-image: linear-gradient(135deg, #05060f 0%, #0d1330 55%, #16205a 130%);
background-color: #05060f;
}
/* Variante con foto di sfondo: l'immagine si passa inline (background-image) */
.rf-hero-page--photo { background-color: #0d1330; background-size: cover; background-position: center; }
.rf-hero-page--photo::before {
content: ""; position: absolute; inset: 0;
background: linear-gradient(115deg, rgba(13,19,48,.94) 0%, rgba(27,42,143,.82) 52%, rgba(47,75,239,.55) 100%);
}
body.dark .rf-hero-page--photo::before { background: linear-gradient(115deg, rgba(3,4,10,.95) 0%, rgba(10,14,40,.9) 55%, rgba(22,32,90,.72) 100%); }
/* Variante "soft": velo piu' leggero, la fotografia si vede davvero.
Per ora solo sulla pagina Montascale; da propagare alle altre hero
fotografiche (backupdati, livesurgery, services, storianomeazienda). */
.rf-hero-page--soft { background-position: 68% center; }
.rf-hero-page--soft::before {
background:
radial-gradient(58% 66% at 50% 52%, rgba(6,10,30,.62) 0%, rgba(6,10,30,.28) 55%, transparent 78%),
linear-gradient(180deg, rgba(8,12,34,.40) 0%, rgba(8,12,34,.16) 45%, rgba(8,12,34,.5) 100%),
linear-gradient(100deg, rgba(11,17,44,.78) 0%, rgba(17,28,96,.52) 46%, rgba(30,50,170,.18) 100%);
}
body.dark .rf-hero-page--soft::before {
background:
linear-gradient(180deg, rgba(2,3,9,.5) 0%, rgba(2,3,9,.24) 45%, rgba(2,3,9,.6) 100%),
linear-gradient(100deg, rgba(3,5,14,.86) 0%, rgba(8,13,44,.64) 46%, rgba(16,26,80,.3) 100%);
}
.rf-hero-page--soft h1 { text-shadow: 0 2px 18px rgba(4,7,22,.6); }
.rf-hero-page--soft .rf-hero-page__lead,
.rf-hero-page--soft .rf-crumbs { text-shadow: 0 1px 10px rgba(4,7,22,.65); }
.rf-hero-page__inner { position: relative; z-index: 2; }
.rf-hero-page--split .rf-hero-page__inner {
display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 60px); align-items: center;
}
/* ---------------------- Hero impilata e centrata -------------------------
Titolo e descrizione a tutta larghezza, animazione al centro, tasti sotto.
In due colonne il titolo stava in 443px e si spezzava in "parole
accroccate": a tutta larghezza respira e l'animazione diventa la fascia
centrale della hero invece di una figurina di corredo.
Il prezzo e' l'altezza, e si paga in due modi: le scene sono passate al
formato panoramico 2,2:1 (a 3:2, larghe 1132px, sarebbero alte 755 e la
hero supererebbe i 1300px) e qui sotto i margini verticali sono piu'
stretti che nella hero a due colonne. */
.rf-hero-page--stack { padding: clamp(38px, 4.6vw, 62px) 0 clamp(30px, 3.8vw, 52px); }
.rf-hero-page--stack .rf-hero-page__inner {
display: flex; flex-direction: column; align-items: center; text-align: center;
}
/* Il blocco di testo si dissolve nel contenitore: con `display: contents` la
sua scatola sparisce e briciole, occhiello, titolo, descrizione e tasti
diventano figli diretti della colonna. Da li' `order` porta i tasti sotto
l'animazione.
Serve a una cosa sola ma decisiva: il layout si ottiene con la SOLA classe
sulla sezione, senza spostare i tasti a mano nell'HTML. Prima riscrivevo la
struttura pagina per pagina — ed e' esattamente il motivo per cui non si
applicava da sola alle altre sezioni.
Il selettore individua il blocco di testo da UNA cosa sola: e' quello che
contiene il titolo. Con `:not(.rf-hero-actions)` avrei dissolto qualunque
altro div — su streaming.html si e' portato via la scatola del riquadro
video, e l'ho visto solo provando il layout su una pagina mai toccata. */
.rf-hero-page--stack .rf-hero-page__inner > div:has(h1) { display: contents; }
.rf-hero-page--stack .rf-crumbs { text-align: center; }
.rf-hero-page--stack .rf-hero-actions {
order: 1; justify-content: center; margin-top: clamp(18px, 2.4vw, 28px);
}
.rf-hero-page--stack .rf-hero-page__figure { width: 100%; margin: clamp(16px, 2.2vw, 28px) 0 0; }
/* Un video non e' un'animazione: la fascia panoramica e' larga e bassa, un
riquadro 16:9 a tutta larghezza sarebbe alto 637px e farebbe esplodere la
hero di streaming. Gli si da' una misura da protagonista ma non da schermo
intero. */
.rf-hero-page--stack .rf-embed {
width: 100%; max-width: 780px; margin: clamp(16px, 2.2vw, 28px) auto 0;
}
/* 2,4rem e non di piu', e il numero e' misurato: il titolo piu' lungo delle tre
sezioni (l'audio, 56 caratteri) chiede 1231px a 44px e 1074 a 38,4 — e la
fascia ne offre 1132. Sopra questo corpo l'audio andrebbe su due righe mentre
le altre due ne farebbero una, con hero alte diverse; sotto, si perderebbe
presenza per niente. Cosi' tutte e tre stanno su una riga sola.
Selettore doppio (.rf-hero-page.rf-hero-page--stack) perche' le regole della
hero base stanno piu' avanti nel file: a parita' di specificita' vincerebbero
loro. */
.rf-hero-page.rf-hero-page--stack h1 {
font-size: clamp(1.85rem, 3.7vw, 2.4rem); margin-inline: auto;
}
.rf-hero-page.rf-hero-page--stack .rf-hero-page__lead {
/* Nessun tetto e NIENTE `balance`. Bilanciare due righe vuol dire
accorciarle entrambe per farle uguali: la descrizione dell'audio finiva
larga 610px con 1132 disponibili, e si vedeva benissimo che lo spazio
c'era e non veniva usato. Senza balance la prima riga arriva in fondo e
va a capo solo quando finisce davvero.
`pretty` resta per evitare l'ultima riga con una parola sola.
Il limite non e' il bordo dello schermo ma quello del contenitore, che
e' gia' rientrato di 24px per lato dentro una hero larga al massimo
1180: il testo non tocca mai i bordi estremi. */
max-width: none; margin-inline: auto; text-wrap: pretty;
}
/* SUL TELEFONO IL RIQUADRO CAMBIA FORMA, non solo misura. In panoramico la
scena era 536x244: scala 0,33, e le didascalie finivano a 7px — illeggibili.
Il problema non era la larghezza ma la FORMA: tre blocchi in fila su uno
schermo verticale. Qui il riquadro diventa alto 9:10, la scena impila i
blocchi (lo decide da sola leggendo la forma) e la scala sale a 0,52: le
scritte tornano sopra gli 11px e l'apparecchio quasi raddoppia.
Il riquadro prende anche i margini del contenitore, da bordo a bordo. */
@media (max-width: 720px) {
.rf-hero-page--stack .rf-hero-page__figure {
width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.rf-hero-page--stack .rf-scene { aspect-ratio: 9 / 10; }
}
.rf-hero-page .rf-kicker { color: #9fe4f5; }
/* NIENTE tetto in `ch` sul titolo, in NESSUNA hero: il limite di 20ch (e i
22ch della variante centrata) mandava a capo a 760px anche dove ce n'erano
1132, e si vedeva. Ora il titolo usa la larghezza che ha e va a capo solo
quando la riga finisce davvero; `balance` fa in modo che, quando succede, le
righe risultino di lunghezza simile invece di una piena e un mozzicone.
La regola sta QUI e non dentro la variante impilata apposta: cosi' vale per
tutte e quindici le pagine senza doverne toccare nemmeno una. */
.rf-hero-page h1 {
font-size: clamp(1.9rem, 4.4vw, 3.15rem); font-weight: 900; line-height: 1.1;
letter-spacing: -.025em; color: #fff; margin: 0 0 18px;
max-width: none; text-wrap: balance;
}
.rf-hero-page--center { text-align: center; }
.rf-hero-page--center h1 { margin-inline: auto; } /* il tetto in ch e' saltato anche qui */
.rf-hero-page--center .rf-hero-page__lead { margin-inline: auto; }
.rf-hero-page--center .rf-hero-actions { justify-content: center; }
.rf-hero-page__lead { font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.65; color: rgba(255,255,255,.85); margin: 0; max-width: 58ch; }
.rf-hero-page__lead b, .rf-hero-page__lead strong { color: #fff; }
.rf-hero-page .rf-hero-actions { margin-top: 30px; opacity: 1; transform: none; animation: none; }
/* Su fondo scuro il bottone "ghost" diventa a contorno bianco */
.rf-hero-page .rf-btn--ghost, .rf-cta-band .rf-btn--ghost,
body.dark .rf-hero-page .rf-btn--ghost, body.dark .rf-cta-band .rf-btn--ghost {
border-color: rgba(255,255,255,.55); color: #fff; background: transparent;
}
.rf-hero-page .rf-btn--ghost:hover, .rf-cta-band .rf-btn--ghost:hover,
body.dark .rf-hero-page .rf-btn--ghost:hover, body.dark .rf-cta-band .rf-btn--ghost:hover {
background: #fff; color: var(--rf-primary-dark);
}
.rf-hero-page__figure { margin: 0; }
.rf-hero-page__figure img {
width: 100%; border-radius: 20px; box-shadow: 0 26px 60px rgba(0,0,0,.42);
border: 1px solid rgba(255,255,255,.14);
}
.rf-hero-page__figure--plain img { border: none; box-shadow: none; border-radius: 0; }
/* Briciole di pane */
.rf-crumbs { position: relative; z-index: 2; font-size: .84rem; margin: 0 0 18px; color: rgba(255,255,255,.62); }
.rf-crumbs a { color: rgba(255,255,255,.82); text-decoration: none; }
.rf-crumbs a:hover { color: #fff; text-decoration: underline; }
.rf-crumbs span { margin: 0 .45em; opacity: .55; }
/* --------------------- Card con immagine (servizi/dettaglio) ------------- */
.rf-cards--4 { grid-template-columns: repeat(4, 1fr); }
.rf-cards--2 { grid-template-columns: repeat(2, 1fr); }
/* Una card sola (montascale in servizi.html, 2026-08-05). Senza questo la
griglia resta a tre colonne e la card sta larga un terzo, appiccicata a
sinistra come se ne mancassero due. Il tetto di larghezza serve perche'
una card a tutta fascia non e' piu' una card: e' un banner, e la sezione
tornerebbe quello che era prima. */
.rf-cards--1 { grid-template-columns: minmax(0, 460px); justify-content: center; }
.rf-card-img {
display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
background: var(--rf-surface); border: 1px solid var(--rf-line); box-shadow: var(--rf-shadow);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .4s ease;
}
.rf-card-img:hover { transform: translateY(-8px); box-shadow: var(--rf-shadow-lg); border-color: rgba(47,75,239,.35); }
body.dark .rf-card-img:hover { border-color: rgba(37,195,230,.5); box-shadow: 0 22px 48px rgba(0,0,0,.6); }
.rf-card-img__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--rf-surface-2); }
.rf-card-img__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .45s ease; }
.rf-card-img:hover .rf-card-img__media img { transform: scale(1.05); }
.rf-card-img__body { padding: 24px 24px 10px; flex: 1; }
.rf-card-img__body h3 { font-size: 1.12rem; font-weight: 800; margin: 0 0 10px; color: var(--rf-ink); letter-spacing: -.01em; line-height: 1.3; }
body.dark .rf-card-img__body h3 { color: #eaf2ff; }
.rf-card-img__body p { margin: 0 0 10px; color: var(--rf-muted); font-size: .95rem; line-height: 1.62; }
.rf-card-img__body ul { margin: 0; padding-left: 1.15em; color: var(--rf-muted); font-size: .95rem; line-height: 1.6; }
.rf-card-img__body li { margin-bottom: 6px; }
.rf-card-img__body li::marker { color: var(--rf-primary); }
body.dark .rf-card-img__body li::marker { color: #9db8ff; }
.rf-card-img__foot { padding: 8px 24px 24px; }
.rf-card-img__foot .rf-btn { width: 100%; justify-content: center; }
/* ------------------------------ Testo lungo ------------------------------ */
.rf-prose { max-width: 78ch; margin: 0 auto; color: var(--rf-muted); font-size: 1.03rem; line-height: 1.75; }
.rf-prose--wide { max-width: 100%; }
.rf-prose h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; color: var(--rf-ink); letter-spacing: -.02em; margin: 44px 0 14px; }
.rf-prose h3 { font-size: 1.22rem; font-weight: 800; color: var(--rf-ink); margin: 32px 0 10px; }
body.dark .rf-prose h2, body.dark .rf-prose h3 { color: #eaf2ff; }
.rf-prose > :first-child { margin-top: 0; }
.rf-prose p { margin: 0 0 16px; }
.rf-prose b, .rf-prose strong { color: var(--rf-ink); }
body.dark .rf-prose b, body.dark .rf-prose strong { color: #eaf2ff; }
.rf-prose a { color: var(--rf-primary); }
body.dark .rf-prose a { color: #9db8ff; }
.rf-prose ul, .rf-prose ol { margin: 0 0 18px; padding-left: 1.3em; }
.rf-prose li { margin-bottom: 8px; }
.rf-prose img { border-radius: 16px; box-shadow: var(--rf-shadow); margin: 10px 0 22px; }
.rf-prose figure { margin: 0 0 24px; }
.rf-prose figcaption { font-size: .87rem; color: var(--rf-muted); margin-top: 8px; text-align: center; }
/* Elenco con spunta */
.rf-checklist { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.rf-checklist li { position: relative; padding-left: 34px; color: var(--rf-muted); line-height: 1.6; }
.rf-checklist li::before {
content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900;
color: #fff; background: var(--rf-grad);
}
.rf-checklist strong { color: var(--rf-ink); }
body.dark .rf-checklist strong { color: #eaf2ff; }
/* ------------------------------- Gallery --------------------------------- */
.rf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.rf-gallery a, .rf-gallery figure { margin: 0; display: block; overflow: hidden; border-radius: 16px; box-shadow: var(--rf-shadow); }
.rf-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; display: block; transition: transform .45s ease; }
.rf-gallery a:hover img { transform: scale(1.06); }
/* ------------------------- Lightbox (vanilla) ---------------------------- */
.rf-lb {
position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center;
background: rgba(5, 7, 16, .92); padding: 40px 16px;
opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.rf-lb.is-open { opacity: 1; visibility: visible; }
.rf-lb img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: 0 30px 70px rgba(0,0,0,.6); }
.rf-lb button {
position: absolute; border: none; cursor: pointer; color: #fff;
background: rgba(255,255,255,.12); border-radius: 50%;
width: 48px; height: 48px; font-size: 1.5rem; line-height: 1;
display: flex; align-items: center; justify-content: center;
transition: background .2s ease;
}
.rf-lb button:hover { background: rgba(255,255,255,.26); }
.rf-lb__close { top: 18px; right: 18px; }
.rf-lb__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.rf-lb__next { right: 18px; top: 50%; transform: translateY(-50%); }
.rf-lb__count { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.7); font-size: .85rem; }
body.rf-lb-open { overflow: hidden; }
/* -------------------------- Embed responsive ----------------------------- */
.rf-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; box-shadow: var(--rf-shadow-lg); background: var(--rf-surface-2); }
.rf-embed--map { aspect-ratio: 16 / 10; }
.rf-embed iframe, .rf-embed video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ------------------------------ Condivisione -----------------------------
UN TASTO SOLO, e prima erano tre pastiglie colorate (Facebook, WhatsApp,
mail) su una fascia a tutta larghezza. Cosa non andava, in ordine di peso:
* il DOPPIONE: ogni pagina ha gia' i tasti verdi "Scrivici su WhatsApp" per
CONTATTARE, e accanto compariva un'icona WhatsApp identica che invece
CONDIVIDEVA. Due icone uguali con due significati diversi nella stessa
schermata;
* TRENTATRE URL SCRITTI A MANO: ogni link portava dentro l'indirizzo
assoluto della pagina, tre volte per pagina per undici pagine. Nessuno li
avrebbe aggiornati, e a pagina rinominata il tasto avrebbe condiviso un
404 senza dirlo. E' il difetto dei numeri scritti in mezzo alle frasi,
in versione URL;
* la scelta al posto dell'utente: tre destinazioni decise da noi, quando il
pannello di sistema le ha tutte quelle che la persona usa davvero.
Adesso e' un tasto che chiama navigator.share() e ripiega su "copia link"
dove l'API non c'e' (vedi home.js). L'indirizzo lo prende da location.href,
quindi e' giusto per costruzione e non c'e' piu' niente da tenere allineato.
Discreto di proposito: condividere e' un'azione secondaria e non deve
competere con i tasti di contatto, che sono il mestiere della pagina. */
.rf-share { display: flex; align-items: center; justify-content: center; }
/* La sezione che contiene solo il tasto non ha bisogno dell'imbottitura di una
fascia intera: `.rf-section` mette fino a 90px sopra e sotto, che attorno a
tre pastiglie colorate ci stavano e attorno a un tasto solo lasciano una
striscia vuota alta mezzo schermo. Se `:has()` non c'e', la sezione tiene la
sua imbottitura normale — piu' aria del necessario, niente di rotto. */
.rf-section:has(> .rf-share) { padding: clamp(26px, 3vw, 40px) 0; }
.rf-share__btn {
display: inline-flex; align-items: center; gap: 10px;
padding: .62rem 1.15rem; border-radius: 999px;
background: transparent; border: 1px solid var(--rf-line);
color: var(--rf-muted); font: inherit; font-size: .92rem; font-weight: 700;
cursor: pointer;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.rf-share__btn .rf-ico { width: 18px; height: 18px; }
.rf-share__btn:hover, .rf-share__btn:focus-visible {
color: var(--rf-primary); border-color: var(--rf-primary);
background: rgba(47,75,239,.06);
}
body.dark .rf-share__btn:hover, body.dark .rf-share__btn:focus-visible {
color: #9db8ff; border-color: #9db8ff; background: rgba(157,184,255,.09);
}
/* la conferma dopo "copia link": stessa riga, nessuno spostamento di layout */
.rf-share__btn.is-done { color: #16a34a; border-color: #16a34a; background: rgba(22,163,74,.08); }
body.dark .rf-share__btn.is-done { color: #4ade80; border-color: #4ade80; }
/* ----------------------- Banner cookie (iniettato) ----------------------- */
.rf-cookie {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 3000;
max-width: 720px; margin: 0 auto;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 16px 20px; border-radius: 16px;
background: var(--rf-surface); border: 1px solid var(--rf-line);
box-shadow: var(--rf-shadow-lg); color: var(--rf-muted); font-size: .92rem; line-height: 1.5;
transform: translateY(140%); transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.rf-cookie.is-in { transform: none; }
.rf-cookie p { margin: 0; flex: 1 1 260px; }
.rf-cookie a { color: var(--rf-primary); }
body.dark .rf-cookie a { color: #9db8ff; }
.rf-cookie .rf-btn { flex-shrink: 0; }
/* ----------------------------- Responsive -------------------------------- */
@media (max-width: 1100px) { .rf-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
.rf-hero-page--split .rf-hero-page__inner { grid-template-columns: 1fr; }
.rf-hero-page--split .rf-hero-page__figure { order: -1; }
.rf-cards--2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.rf-cards--4 { grid-template-columns: 1fr; }
.rf-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
.rf-card-img__media img, .rf-gallery img, .rf-cookie { transition: none !important; }
}
/* ==========================================================================
MONTASCALE — sezione dedicata + demo interattiva
La scena SVG e il telecomando sono generati da home.js dentro
[data-rf-stairlift]; qui stanno solo colori, layout e micro-animazioni.
Tutti i colori passano da variabili locali, rimappate in dark mode.
========================================================================== */
.rf-ms { position: relative; overflow: hidden; color: #fff; background: var(--rf-grad-dark) !important; }
.rf-ms::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(58% 100% at 92% 8%, rgba(23,195,230,.30), transparent 62%),
radial-gradient(46% 80% at 4% 96%, rgba(47,75,239,.35), transparent 66%);
}
.rf-ms__grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
gap: clamp(28px, 4vw, 58px); align-items: center;
}
.rf-ms__text h2 { color: #fff; margin: 12px 0 14px; font-size: clamp(1.65rem, 3vw, 2.35rem); line-height: 1.15; }
.rf-ms__text > p { color: rgba(255,255,255,.78); line-height: 1.7; margin: 0 0 22px; font-size: 1.02rem; }
.rf-ms__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 13px; }
.rf-ms__list li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.92); font-size: .97rem; line-height: 1.5; }
.rf-ms__list .rf-ico { flex: none; margin-top: 1px; color: var(--rf-cyan); }
.rf-ms__cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* ------------------------------- La demo --------------------------------- */
.rf-ms__demo {
--ms-scene: #eaeefb; /* aria della stanza */
--ms-wall: #dbe1f4; /* muro sotto il pianerottolo */
--ms-step: #ffffff; /* facce dei gradini */
--ms-edge: #b9c4e2; /* spigoli e linee di costruzione */
--ms-floor: #cdd6ee; /* pavimento del piano terra */
--ms-metal: #9aa6be; /* ringhiera del pianerottolo */
--ms-metal-hi: rgba(255,255,255,.85);
/* colori dell'impianto vero: scocca avorio, imbottitura bordeaux */
--ms-shell: #f2eee4;
--ms-shell-dk: #d9d2c2;
--ms-shell-sh: rgba(90,80,60,.22);
--ms-uphol: #a01f38;
--ms-uphol-hi: #b32742;
--ms-accent: var(--rf-cyan);
--ms-badge-on: #e2f8fd; /* fondo dell'etichetta del piano quando e' accesa */
position: relative;
background: var(--rf-surface); border: 1px solid var(--rf-line);
border-radius: 24px; padding: 14px 14px 6px; box-shadow: var(--rf-shadow-lg);
}
body.dark .rf-ms__demo {
--ms-scene: #0f1526;
--ms-wall: #161d36;
--ms-step: #1d2542;
--ms-edge: #38446b;
--ms-floor: #131a30;
--ms-metal: #78849f;
--ms-metal-hi: rgba(255,255,255,.4);
--ms-shell: #e8e2d4;
--ms-shell-dk: #c3bba8;
--ms-shell-sh: rgba(0,0,0,.45);
--ms-badge-on: #10333f;
}
.rf-ms__stage { border-radius: 18px; overflow: hidden; }
.rf-ms-svg { display: block; width: 100%; height: auto; }
/* Scena */
.rf-ms-bg { fill: var(--ms-scene); }
.rf-ms-wall { fill: var(--ms-wall); }
.rf-ms-slab { fill: var(--ms-edge); }
.rf-ms-floor { fill: var(--ms-floor); }
.rf-ms-skirt { stroke: var(--ms-edge); stroke-width: 2; }
.rf-ms-stairs { fill: var(--ms-step); stroke: var(--ms-edge); stroke-width: 2.2; stroke-linejoin: round; }
.rf-ms-tread { stroke: var(--ms-edge); stroke-width: 1.6; opacity: .8; }
.rf-ms-hand, .rf-ms-post-rail { stroke: var(--ms-metal); stroke-linecap: round; opacity: .55; }
.rf-ms-hand { stroke-width: 5; }
.rf-ms-post-rail { stroke-width: 3; }
.rf-ms-bracket { stroke: var(--ms-shell-dk); stroke-width: 5; stroke-linecap: round; }
.rf-ms-bracket-foot { fill: var(--ms-shell-dk); }
.rf-ms-rail, .rf-ms-rail-hi, .rf-ms-rail-sh { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.rf-ms-rail-sh { stroke: var(--ms-shell-sh); stroke-width: 12; }
.rf-ms-rail { stroke: var(--ms-shell); stroke-width: 10.5; }
.rf-ms-rail-hi { stroke: #fff; stroke-width: 2.4; opacity: .75; transform: translateY(-1.6px); }
/* Etichette dei due piani.
Da spente sono grigie e in secondo piano; quella del piano dove si trova la
poltroncina si accende. Prima cambiava solo la tinta del pallino, a parita'
di luminosita', e non si notava: ora cambiano insieme fondo, bordo, testo e
pallino, e un alone pulsa attorno al LED. */
.rf-ms-badge rect { fill: var(--rf-surface); stroke: var(--ms-edge); stroke-width: 1.5; transition: fill .35s ease, stroke .35s ease; }
.rf-ms-badge text { fill: var(--rf-muted); font-size: 14px; font-weight: 700; letter-spacing: .01em; transition: fill .35s ease; }
.rf-ms-dot { fill: var(--ms-edge); transition: fill .35s ease, filter .35s ease; }
.rf-ms-halo { fill: var(--ms-accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.rf-ms-badge.is-on rect { fill: var(--ms-badge-on); stroke: var(--ms-accent); stroke-width: 2.2; }
.rf-ms-badge.is-on text { fill: var(--rf-ink); }
body.dark .rf-ms-badge.is-on text { fill: #eaf2ff; }
.rf-ms-badge.is-on .rf-ms-dot { fill: var(--ms-accent); filter: drop-shadow(0 0 4px var(--ms-accent)); }
.rf-ms-badge.is-on .rf-ms-halo { animation: rfMsHalo 1.9s ease-out infinite; }
@keyframes rfMsHalo {
0% { opacity: .5; transform: scale(1); }
70%, 100% { opacity: 0; transform: scale(2.7); }
}
/* Poltroncina: scocca avorio, imbottiture bordeaux */
.rf-ms-carrier-body { fill: var(--ms-shell-dk); }
.rf-ms-tyre { fill: #6f7789; }
.rf-ms-spokes { stroke: rgba(255,255,255,.7); stroke-width: 1.8; stroke-linecap: round; }
.rf-ms-case, .rf-ms-seat-shell, .rf-ms-arm, .rf-ms-arm-post,
.rf-ms-back, .rf-ms-legrest path { fill: var(--ms-shell); }
.rf-ms-legrest path { stroke: rgba(70,58,40,.22); stroke-width: 1; }
.rf-ms-case-line { fill: var(--ms-shell-dk); }
.rf-ms-cushion { fill: var(--ms-uphol); }
.rf-ms-back-pad { fill: var(--ms-uphol-hi); }
.rf-ms-stick { fill: var(--ms-accent); }
/* contorno tenue: stacca la poltroncina avorio dallo sfondo chiaro */
.rf-ms-case, .rf-ms-seat > *, .rf-ms-seat > g > * { stroke: rgba(70,58,40,.22); stroke-width: 1; }
.rf-ms-lift { filter: drop-shadow(0 8px 12px var(--ms-shell-sh)); }
/* --------------------------- Telecomando --------------------------------- */
.rf-ms__panel { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 6px 12px; }
.rf-ms__remote {
position: relative; display: flex; align-items: center; gap: 14px;
padding: 10px 18px 10px 16px; border-radius: 999px;
background: linear-gradient(165deg, #222c4e 0%, #0d1330 100%);
box-shadow: 0 12px 26px rgba(13,19,48,.38), inset 0 1px 0 rgba(255,255,255,.14);
}
.rf-ms__led {
position: relative; z-index: 1; width: 9px; height: 9px; border-radius: 50%;
background: rgba(255,255,255,.22); transition: background .25s ease, box-shadow .25s ease;
}
.is-moving .rf-ms__led { background: #3ce07f; box-shadow: 0 0 12px rgba(60,224,127,.9); animation: rfMsBlink 1.1s linear infinite; }
@keyframes rfMsBlink { 50% { opacity: .35; } }
.rf-ms__keys { display: flex; gap: 10px; }
.rf-ms__key {
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 9px 12px 7px; border: 0; border-radius: 15px; cursor: pointer;
background: rgba(255,255,255,.11); color: #fff; font: inherit;
font-size: .64rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
transition: background .2s ease, transform .12s ease, box-shadow .2s ease;
}
.rf-ms__key:hover { background: rgba(255,255,255,.22); }
.rf-ms__key:active { transform: translateY(2px); box-shadow: inset 0 3px 8px rgba(0,0,0,.4); }
.rf-ms__key:focus-visible { outline: 2px solid var(--rf-cyan); outline-offset: 3px; }
.rf-ms-arrow { width: 21px; height: 21px; fill: currentColor; }
/* Onde radio: partono dal LED quando si preme un tasto */
.rf-ms__waves { position: absolute; left: 20px; top: 50%; width: 9px; height: 9px; transform: translateY(-50%); pointer-events: none; }
.rf-ms__waves i {
position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--rf-cyan); opacity: 0;
}
.is-signal .rf-ms__waves i { animation: rfMsPing 1.1s ease-out; }
.is-signal .rf-ms__waves i:nth-child(2) { animation-delay: .16s; }
.is-signal .rf-ms__waves i:nth-child(3) { animation-delay: .32s; }
@keyframes rfMsPing {
0% { opacity: .85; transform: scale(.5); }
100% { opacity: 0; transform: scale(3.6); }
}
/* ------------------------- Schermo intero -------------------------------- */
/* In alto a SINISTRA: a destra, alla quota del pianerottolo, ci parcheggia la
poltroncina e il bottone le finiva addosso. Quell'angolo e' aria libera. */
.rf-ms__full {
position: absolute; z-index: 3; top: 22px; left: 22px;
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 12px; border: 1px solid var(--rf-line); border-radius: 999px;
background: var(--rf-surface); color: var(--rf-muted); cursor: pointer;
font: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
box-shadow: 0 6px 16px rgba(20,26,51,.14);
transition: color .2s ease, border-color .2s ease, transform .12s ease;
}
.rf-ms__full:hover { color: var(--rf-primary); border-color: var(--rf-primary); }
.rf-ms__full:active { transform: translateY(1px); }
.rf-ms__full:focus-visible { outline: 2px solid var(--rf-primary); outline-offset: 3px; }
.rf-ms-ico-line { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rf-ms-ico--exit, .rf-ms__demo.is-full .rf-ms-ico--open { display: none; }
.rf-ms__demo.is-full .rf-ms-ico--exit { display: block; }
/* con l'overlay (browser senza fullscreen sugli elementi) i flottanti darebbero
fastidio sopra la scena: si nascondono finche' la demo e' ingrandita */
body.rf-ms-locked { overflow: hidden; }
body.rf-ms-locked .rf-whatsapp-float,
body.rf-ms-locked .rf-cookie,
body.rf-ms-locked .carousel-control,
body.rf-ms-locked .scrollToTop { display: none; }
body.rf-ms-locked .rf-nav { visibility: hidden; } /* sticky: si tiene il posto */
.rf-ms__demo.is-full {
position: fixed; inset: 0; z-index: 99999; margin: 0; /* sopra anche ai blocchi Mobirise */
width: auto; max-width: none; border: 0; border-radius: 0;
padding: 20px clamp(16px, 4vw, 48px) 16px;
display: flex; flex-direction: column; gap: 6px;
background: var(--rf-page-bg); box-shadow: none;
}
.rf-ms__demo.is-full .rf-ms__stage {
flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
}
.rf-ms__demo.is-full .rf-ms-svg { width: auto; height: 100%; max-width: 100%; max-height: 100%; }
/* finestra piu' stretta del disegno (telefono in verticale): a comandare e'
la larghezza, altrimenti l'SVG resterebbe una striscia in mezzo al vuoto */
@media (max-aspect-ratio: 5/3) {
.rf-ms__demo.is-full .rf-ms-svg { width: 100%; height: auto; }
}
.rf-ms__demo.is-full .rf-ms__panel { flex: none; justify-content: center; padding-bottom: 4px; }
.rf-ms__demo.is-full .rf-ms__read { flex: 0 1 460px; }
.rf-ms__read { flex: 1 1 210px; min-width: 190px; }
.rf-ms__status { margin: 0 0 3px; font-size: .93rem; font-weight: 800; color: var(--rf-ink); }
.rf-ms__hint { margin: 0; font-size: .81rem; line-height: 1.45; color: var(--rf-muted); }
/* La stessa demo su fondo chiaro (pagina Montascale) */
.rf-ms--plain { background: var(--rf-page-bg-alt) !important; color: inherit; }
.rf-ms--plain::after { display: none; }
.rf-ms--plain .rf-ms__text h2 { color: var(--rf-ink); }
.rf-ms--plain .rf-ms__text > p { color: var(--rf-muted); }
.rf-ms--plain .rf-ms__list li { color: var(--rf-ink); }
.rf-ms--plain .rf-kicker { color: var(--rf-primary); }
.rf-ms--plain .rf-ms__list .rf-ico { color: var(--rf-primary); }
.rf-ms--plain .rf-ms__demo { background: var(--rf-surface); }
@media (max-width: 900px) {
.rf-ms__grid { grid-template-columns: 1fr; }
}
/* su schermi stretti l'SVG si rimpicciolisce e le etichette dentro la scena
diventerebbero illeggibili: la stessa informazione resta in .rf-ms__status */
@media (max-width: 700px) {
.rf-ms-badge { display: none; }
}
@media (max-width: 560px) {
.rf-ms__panel { gap: 12px; padding-bottom: 8px; }
.rf-ms__remote { width: 100%; justify-content: center; }
.rf-ms__read { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.is-moving .rf-ms__led { animation: none; }
.is-signal .rf-ms__waves i { animation: none; }
}
/* ==========================================================================
PAGINA MONTASCALE — marchio Otolift e banda di chiusura
La pagina non ha piu' blocchi Mobirise: il ritmo verticale lo danno le
.rf-section, quindi qui restano solo i due pezzi che le sono propri.
========================================================================== */
.rf-otolift { padding: clamp(30px, 4vw, 52px) 0; background: var(--rf-page-bg); }
.rf-otolift__inner {
display: flex; align-items: center; justify-content: center;
gap: clamp(20px, 4vw, 46px); text-align: left;
}
.rf-otolift__logo { flex: none; width: min(180px, 42vw); height: auto; border-radius: 0; }
@media (max-width: 620px) {
.rf-otolift__inner { flex-direction: column; text-align: center; gap: 16px; }
}
body.dark .rf-otolift__logo { filter: brightness(1.12); }
.rf-otolift p { margin: 0; max-width: 54ch; color: var(--rf-muted); font-size: .98rem; line-height: 1.6; }
.rf-otolift b { color: var(--rf-ink); }
/* Immagine verticale nei blocchi affiancati (la donna sulla poltroncina):
a piena colonna sarebbe alta il doppio del testo che le sta accanto. */
.rf-split__media--tall img { max-width: 300px; margin: 0 auto; display: block; }
/* Banda "ULTERIORI INFORMAZIONI": chiude la pagina, sopra il footer.
Il velo scuro sta nello stesso background dell'immagine, cosi' non serve
un pseudo-elemento sovrapposto e il testo bianco e' sempre leggibile. */
.rf-ms-info {
color: #fff;
padding: clamp(52px, 7vw, 88px) 0;
background:
linear-gradient(rgba(9,14,38,.74), rgba(9,14,38,.74)),
url("../images/slider-home-otolift-3-1823x651.jpg") center / cover no-repeat;
}
.rf-ms-info h2 {
color: #fff; margin: 0 0 10px;
font-size: clamp(1.8rem, 4vw, 2.7rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.1;
text-shadow: 0 2px 16px rgba(4,7,22,.5);
}
.rf-ms-info__lead { margin: 0 0 18px; color: rgba(255,255,255,.88); font-size: 1.1rem; }
body.dark .rf-ms-info h2 { color: #fff; }
.rf-tel-cta {
display: inline-block; margin-top: 10px; padding: .55rem 1.5rem;
border: 2px solid rgba(255,255,255,.85); border-radius: 999px;
color: #fff !important; text-decoration: none; letter-spacing: .02em;
transition: background .2s ease, color .2s ease;
}
.rf-tel-cta:hover { background: #fff; color: var(--rf-primary-dark) !important; }
.rf-tel-cta strong { font-weight: 800; }
/* ==========================================================================
PAGINA CONTROLLA LAVORAZIONE — ricerca e schede
Le schede le genera lo script della pagina leggendo output.xml: qui ci
sono solo i vestiti. Tutto su token, quindi segue il tema chiaro/scuro
(la vecchia scheda era blu fisso con testo bianco e in dark restava tale).
========================================================================== */
/* La barra di ricerca sta DA SOLA e centrata (2026-08-03). Prima aveva
l'esempio della ricevuta affiancato in una griglia a due colonne: la
risposta a "dove sta il codice?" restava accanto al campo, ma si portava via
meta' della fascia e il campo non era piu' il centro di niente. Adesso
l'esempio sta sotto (.rf-stato__aiuto) e quel lavoro lo fa soprattutto
l'animazione della hero, che il codice lo mostra sulla ricevuta prima
ancora che si scorra. */
.rf-stato__cerca {
max-width: 620px; margin: 0 auto;
}
.rf-stato__form { min-width: 0; }
.rf-stato__label {
display: block; margin-bottom: 10px;
font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
color: var(--rf-muted);
}
.rf-stato__row { display: flex; gap: 12px; flex-wrap: wrap; }
/* L'esempio della ricevuta: e' carta, quindi resta bianca anche in dark, con
una cornice che la stacca dal fondo. */
.rf-stato__aiuto { max-width: 620px; margin: clamp(30px, 4vw, 48px) auto 0; min-width: 0; }
.rf-stato__aiuto img {
display: block; width: 100%; height: auto;
border-radius: 14px; border: 1px solid var(--rf-line);
background: #fff; box-shadow: var(--rf-shadow);
}
body.dark .rf-stato__aiuto img { border-color: rgba(255,255,255,.16); }
/* La spiegazione era una figcaption sotto la fotografia; dal 2026-08-05 la
fotografia sta dietro un "Vedi esempio" e la spiegazione viene prima, quindi
e' un
. Le due regole restano insieme: se un giorno la figcaption torna,
si veste da sola. */
.rf-stato__aiuto figcaption,
.rf-stato__aiuto-testo { margin: 14px 0 0; color: var(--rf-muted); font-size: .93rem; line-height: 1.6; text-align: center; }
.rf-stato__aiuto-testo { margin-top: 0; }
.rf-stato__aiuto b { color: var(--rf-ink); }
body.dark .rf-stato__aiuto b { color: #eaf2ff; }
/* "Vedi esempio": e' un