.
`bmp-dentro` e' la colonna leggibile: tiene il testo dentro i 1120 px e
mette i margini sui telefoni. Non serve annidarne due.
I nomi delle classi sono in italiano perche' li leggiamo noi; il testo che
vede il cliente e' tutto in inglese.
========================================================================== */
:root {
--bmp-fondo: #080c10;
--bmp-fondo2: #0d1117;
--bmp-fondo3: #121820;
--bmp-bordo: rgba(255,255,255,.07);
--bmp-bordo2: rgba(255,255,255,.14);
--bmp-testo: #e8edf2;
--bmp-tenue: #8b98a5;
--bmp-teal: #00d4a0;
--bmp-ambra: #e3b341;
--bmp-rosso: #ff5f56;
--bmp-font: 'DM Sans', system-ui, -apple-system, sans-serif;
--bmp-titoli: 'Syne', var(--bmp-font);
--bmp-mono: 'DM Mono', ui-monospace, Menlo, Consolas, monospace;
--bmp-colonna: 1120px;
}
/* --------------------------------------------------------------- di base --- */
.bmp-pagina * { box-sizing: border-box; }
.bmp-pagina {
margin: 0;
background: var(--bmp-fondo);
color: var(--bmp-testo);
font-family: var(--bmp-font);
font-size: 17px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
.bmp-pagina h1, .bmp-pagina h2, .bmp-pagina h3, .bmp-pagina h4 {
font-family: var(--bmp-titoli);
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.1;
margin: 0 0 18px;
color: var(--bmp-testo);
}
.bmp-pagina h1 { font-size: clamp(38px, 6.4vw, 76px); }
.bmp-pagina h2 { font-size: clamp(28px, 4vw, 44px); }
.bmp-pagina h3 { font-size: clamp(20px, 2.2vw, 25px); font-weight: 700; }
.bmp-pagina h4 { font-size: 16px; font-weight: 700; }
.bmp-pagina p { margin: 0 0 18px; max-width: 68ch; }
/* I LINK, e un errore che vale la pena spiegare.
*
* Qui c'era `.bmp-pagina a { color: teal }`, che sembra innocuo e invece
* coloriva di verde ANCHE il testo dei pulsanti verdi: scritta verde su fondo
* verde, cioe' invisibile. Il motivo e' la specificita': `.bmp-pagina a` vale
* piu' di `.bmp-tasto` da solo, quindi vinceva lui.
*
* La regola giusta non e' alzare il peso dei pulsanti a forza di !important, e'
* smettere di colorare TUTTI i link: verde vuol dire "questo e' un link dentro
* al testo". Un pulsante non ha bisogno di essere verde, lo e' gia' tutto lui. */
.bmp-pagina a { color: inherit; text-decoration: none; }
.bmp-pagina p a,
.bmp-pagina li a,
.bmp-pagina .risposta a,
.bmp-pagina .bmp-nota a { color: var(--bmp-teal); }
.bmp-pagina p a:hover,
.bmp-pagina li a:hover,
.bmp-pagina .risposta a:hover,
.bmp-pagina .bmp-nota a:hover { text-decoration: underline; }
.bmp-pagina img { max-width: 100%; height: auto; }
.bmp-guida { font-size: clamp(18px, 2.2vw, 22px); color: #c2ccd6; max-width: 62ch; }
.bmp-tenue { color: var(--bmp-tenue); }
.bmp-piccolo { font-size: 14px; }
.bmp-mono { font-family: var(--bmp-mono); }
.bmp-teal { color: var(--bmp-teal); }
.bmp-centro { text-align: center; margin-left: auto; margin-right: auto; }
/* L'occhiello: la riga piccola sopra un titolo. Serve a dire di cosa si parla
prima di dirlo, e a dare respiro a un titolo grande. */
.bmp-occhiello {
font-family: var(--bmp-mono);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--bmp-teal);
margin: 0 0 14px;
}
/* --------------------------------------------------- impianto delle pagine --- */
.bmp-corpo { position: relative; z-index: 1; }
.bmp-sezione { padding: clamp(64px, 9vw, 130px) 0; position: relative; }
.bmp-sezione.stretta { padding: clamp(40px, 5vw, 70px) 0; }
.bmp-dentro {
width: 100%;
max-width: var(--bmp-colonna);
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 40px);
position: relative;
z-index: 1;
}
.bmp-riga-bordo { border-top: 1px solid var(--bmp-bordo); }
/* La scena: una sezione con il suo sfondo disegnato.
La tela e' `sticky` e alta uno schermo, quindi resta ferma mentre il
contenuto le scorre davanti - ed e' proprio quello che lega il disegno allo
scorrimento. `pointer-events:none` perche' uno sfondo non si clicca. */
.bmp-scena { position: relative; }
/* Un disegno legato allo scorrimento ha bisogno di scorrimento per esistere: se
la sezione e' alta uno schermo, l'animazione finisce prima di cominciare.
`media` e `lunga` danno alla scena la corsa che le serve. Lo spazio in fondo
non e' vuoto: e' il tempo in cui il disegno si completa. */
.bmp-scena.media { min-height: 185vh; }
.bmp-scena.lunga { min-height: 250vh; }
@media (max-width: 620px) {
/* Sul telefono si scorre piu' in fretta e la pagina e' piu' lunga da sola:
una corsa cosi' ampia diventerebbe un deserto da attraversare. */
.bmp-scena.media { min-height: 150vh; }
.bmp-scena.lunga { min-height: 190vh; }
}
.bmp-tela {
position: sticky;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100svh;
display: block;
margin-bottom: -100vh;
pointer-events: none;
z-index: 0;
}
/* ------------------------------------------------------------ navigazione --- */
.bmp-nav {
position: sticky;
top: 0;
z-index: 50;
background: rgba(8,12,16,.82);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--bmp-bordo);
}
.bmp-nav-dentro {
max-width: var(--bmp-colonna);
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 40px);
height: 66px;
display: flex;
align-items: center;
gap: 28px;
}
.bmp-logo {
font-family: var(--bmp-titoli);
font-weight: 800;
font-size: 15px;
letter-spacing: .01em;
color: var(--bmp-testo);
white-space: nowrap;
}
.bmp-logo em { color: var(--bmp-teal); font-style: normal; }
.bmp-pagina a.bmp-logo { color: var(--bmp-testo); }
.bmp-logo:hover { text-decoration: none; }
.bmp-nav-voci { display: flex; gap: 26px; margin-left: auto; }
.bmp-nav-voce {
color: var(--bmp-tenue);
font-size: 15px;
padding: 4px 0;
border-bottom: 1px solid transparent;
}
.bmp-pagina a.bmp-nav-voce { color: var(--bmp-tenue); }
.bmp-pagina a.bmp-nav-voce.attiva { color: var(--bmp-testo); }
.bmp-nav-voce:hover, .bmp-pagina a.bmp-nav-voce:hover { color: var(--bmp-testo); text-decoration: none; }
.bmp-nav-voce.attiva { color: var(--bmp-testo); border-bottom-color: var(--bmp-teal); }
.bmp-nav-conto {
font-size: 14px;
font-weight: 500;
color: var(--bmp-fondo);
background: var(--bmp-teal);
padding: 9px 18px;
border-radius: 7px;
white-space: nowrap;
}
.bmp-pagina a.bmp-nav-conto { color: var(--bmp-fondo); }
.bmp-nav-conto:hover { text-decoration: none; filter: brightness(1.08); }
/* Il tasto del menu compare solo sui telefoni. */
.bmp-nav-tasto {
display: none;
background: none;
border: 0;
padding: 10px 4px;
cursor: pointer;
}
.bmp-nav-tasto span {
display: block;
width: 22px;
height: 2px;
background: var(--bmp-testo);
margin: 4px 0;
transition: transform .2s, opacity .2s;
}
.bmp-nav-tasto[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
.bmp-nav-tasto[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 860px) {
.bmp-nav-tasto { display: block; margin-left: auto; order: 3; }
.bmp-nav-conto { order: 2; margin-left: auto; }
.bmp-nav-voci {
order: 4;
display: none;
width: 100%;
flex-direction: column;
gap: 0;
margin: 0;
padding: 6px 0 14px;
border-top: 1px solid var(--bmp-bordo);
}
.bmp-nav-dentro { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 0; }
.bmp-nav.aperta .bmp-nav-voci { display: flex; }
.bmp-nav-voce { padding: 12px 0; border-bottom: 1px solid var(--bmp-bordo); }
.bmp-nav-voce.attiva { border-bottom-color: var(--bmp-teal); }
}
.bmp-avanzamento {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0;
background: var(--bmp-teal);
z-index: 60;
}
/* ----------------------------------------------------------------- tasti --- */
.bmp-tasti { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.bmp-pagina a.bmp-tasto,
.bmp-tasto {
display: inline-block;
font-family: var(--bmp-font);
font-size: 15px;
font-weight: 500;
padding: 13px 26px;
border-radius: 8px;
border: 1px solid var(--bmp-teal);
background: var(--bmp-teal);
color: var(--bmp-fondo);
cursor: pointer;
transition: filter .15s, background .15s;
}
.bmp-pagina a.bmp-tasto:hover,
.bmp-tasto:hover { text-decoration: none; filter: brightness(1.08); }
/* Il pulsante "vuoto" e' il secondo per importanza: contorno e basta, cosi'
quello pieno resta l'unica cosa che chiama davvero. */
.bmp-pagina a.bmp-tasto.vuoto,
.bmp-tasto.vuoto { background: transparent; color: var(--bmp-testo); border-color: var(--bmp-bordo2); }
.bmp-pagina a.bmp-tasto.vuoto:hover,
.bmp-tasto.vuoto:hover { background: rgba(255,255,255,.05); filter: none; border-color: var(--bmp-teal); }
/* ---------------------------------------------------------------- schede --- */
.bmp-griglia { display: grid; gap: 18px; }
.bmp-griglia.due { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.bmp-griglia.tre { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.bmp-griglia.quattro { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
.bmp-scheda {
background: var(--bmp-fondo2);
border: 1px solid var(--bmp-bordo);
border-radius: 12px;
padding: 26px;
}
.bmp-scheda h3 { margin-bottom: 10px; }
.bmp-scheda p:last-child { margin-bottom: 0; }
.bmp-scheda.rilievo { border-color: rgba(0,212,160,.35); background: linear-gradient(180deg, rgba(0,212,160,.05), var(--bmp-fondo2) 60%); }
/* Il numero grande di una scheda: un fatto, non una promessa.
Sta in mono perche' i numeri in mono si leggono come misure, non come slogan. */
.bmp-cifra {
font-family: var(--bmp-mono);
font-size: clamp(30px, 4vw, 42px);
font-weight: 500;
color: var(--bmp-teal);
line-height: 1;
display: block;
margin-bottom: 8px;
}
.bmp-cifra.grigia { color: var(--bmp-testo); }
/* ---------------------------------------------------------------- listino --- */
.bmp-prezzi { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.bmp-prezzo {
background: var(--bmp-fondo2);
border: 1px solid var(--bmp-bordo);
border-radius: 14px;
padding: 28px 26px;
display: flex;
flex-direction: column;
}
.bmp-prezzo.scelto {
border-color: rgba(0,212,160,.45);
box-shadow: 0 0 0 1px rgba(0,212,160,.14), 0 24px 60px -30px rgba(0,212,160,.35);
}
.bmp-prezzo-nome { font-family: var(--bmp-titoli); font-weight: 700; font-size: 18px; }
.bmp-prezzo-etichetta {
font-family: var(--bmp-mono); font-size: 11px; letter-spacing: .12em;
text-transform: uppercase; color: var(--bmp-teal); margin-bottom: 10px;
}
.bmp-prezzo-cifra {
font-family: var(--bmp-titoli); font-weight: 800;
font-size: 40px; line-height: 1.1; margin: 14px 0 2px;
}
.bmp-prezzo-cifra small { font-family: var(--bmp-font); font-size: 15px; font-weight: 400; color: var(--bmp-tenue); }
.bmp-prezzo-quanto { font-size: 14px; color: var(--bmp-tenue); margin-bottom: 18px; }
.bmp-prezzo ul { list-style: none; padding: 0; margin: 0 0 24px; }
.bmp-prezzo li {
padding: 8px 0 8px 26px;
position: relative;
font-size: 15px;
border-top: 1px solid var(--bmp-bordo);
}
.bmp-prezzo li:first-child { border-top: 0; }
.bmp-prezzo li::before {
content: '';
position: absolute;
left: 4px; top: 17px;
width: 9px; height: 9px;
border-radius: 50%;
background: rgba(0,212,160,.22);
border: 1px solid var(--bmp-teal);
}
.bmp-prezzo li.assente { color: var(--bmp-tenue); }
.bmp-prezzo li.assente::before { background: none; border-color: var(--bmp-bordo2); }
.bmp-prezzo .bmp-tasto { margin-top: auto; text-align: center; }
/* ---------------------------------------------------------------- tabella --- */
.bmp-tabella-scorre { overflow-x: auto; margin: 26px 0; }
.bmp-tabella {
width: 100%;
border-collapse: collapse;
font-size: 15px;
min-width: 560px;
}
.bmp-tabella th, .bmp-tabella td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--bmp-bordo);
}
.bmp-tabella th {
font-family: var(--bmp-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bmp-tenue);
font-weight: 400;
white-space: nowrap;
}
.bmp-tabella td.num { font-family: var(--bmp-mono); white-space: nowrap; }
.bmp-tabella tr.vince td { background: rgba(0,212,160,.045); }
.bmp-tabella tr:hover td { background: rgba(255,255,255,.02); }
/* La pastiglia: verificato, o non misurabile. Mai un colore solo per fare
colore - verde vuol dire "misurato e ha retto", grigio "non lo sappiamo". */
.bmp-pastiglia {
display: inline-block;
font-family: var(--bmp-mono);
font-size: 11px;
letter-spacing: .06em;
padding: 3px 9px;
border-radius: 4px;
white-space: nowrap;
border: 1px solid var(--bmp-bordo2);
color: var(--bmp-tenue);
}
.bmp-pastiglia.si { border-color: rgba(0,212,160,.45); color: var(--bmp-teal); background: rgba(0,212,160,.08); }
.bmp-pastiglia.no { border-color: rgba(255,255,255,.12); }
/* ------------------------------------------------------- nota e citazione --- */
.bmp-nota {
border-left: 2px solid var(--bmp-teal);
background: rgba(0,212,160,.045);
padding: 18px 22px;
border-radius: 0 8px 8px 0;
margin: 26px 0;
}
.bmp-nota p:last-child { margin-bottom: 0; }
.bmp-nota.attenzione { border-left-color: var(--bmp-ambra); background: rgba(227,179,65,.05); }
/* ------------------------------------------------------------------ passi --- */
.bmp-passi { list-style: none; counter-reset: passo; padding: 0; margin: 30px 0 0; }
.bmp-passi > li {
counter-increment: passo;
position: relative;
padding: 0 0 26px 54px;
border-left: 1px solid var(--bmp-bordo);
margin-left: 15px;
}
.bmp-passi > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.bmp-passi > li::before {
content: counter(passo);
position: absolute;
left: -16px; top: -2px;
width: 31px; height: 31px;
border-radius: 50%;
background: var(--bmp-fondo);
border: 1px solid rgba(0,212,160,.45);
color: var(--bmp-teal);
font-family: var(--bmp-mono);
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.bmp-passi h3 { margin-bottom: 6px; }
/* ----------------------------------------------------------------- avviso --- */
/* Il riquadro che mostra com'e' fatto un avviso vero. Non e' decorazione: e' la
cosa che il cliente compra, e vederla prima di pagare evita un rimborso. */
.bmp-avviso {
background: var(--bmp-fondo3);
border: 1px solid var(--bmp-bordo);
border-radius: 10px;
padding: 18px 20px;
font-family: var(--bmp-mono);
font-size: 14px;
line-height: 1.65;
}
.bmp-avviso-capo {
display: flex;
justify-content: space-between;
gap: 12px;
color: var(--bmp-tenue);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
border-bottom: 1px solid var(--bmp-bordo);
padding-bottom: 10px;
margin-bottom: 12px;
}
.bmp-avviso b { color: var(--bmp-teal); font-weight: 500; }
.bmp-avviso .riga-tenue { color: var(--bmp-tenue); }
/* -------------------------------------------------------------- domande --- */
.bmp-domanda {
border-bottom: 1px solid var(--bmp-bordo);
padding: 4px 0;
}
.bmp-domanda summary {
cursor: pointer;
padding: 16px 30px 16px 0;
font-weight: 500;
position: relative;
list-style: none;
}
.bmp-domanda summary::-webkit-details-marker { display: none; }
.bmp-domanda summary::after {
content: '+';
position: absolute;
right: 4px; top: 14px;
color: var(--bmp-teal);
font-family: var(--bmp-mono);
font-size: 20px;
}
.bmp-domanda[open] summary::after { content: '\2013'; }
.bmp-domanda .risposta { padding: 0 0 18px; color: #c2ccd6; }
.bmp-domanda .risposta p:last-child { margin-bottom: 0; }
/* ------------------------------------------------------- testo legale --- */
/* Un documento legale non si legge come una pagina di vendita: colonna piu'
stretta, righe piu' alte, titoli numerati e nessuna animazione. */
.bmp-legale { max-width: 780px; }
.bmp-legale h2 {
font-size: clamp(20px, 2.4vw, 26px);
margin: 44px 0 14px;
padding-top: 20px;
border-top: 1px solid var(--bmp-bordo);
}
.bmp-legale h3 { font-size: 18px; margin: 26px 0 10px; }
.bmp-legale p, .bmp-legale li { color: #c2ccd6; font-size: 16px; }
.bmp-legale ul, .bmp-legale ol { padding-left: 22px; margin: 0 0 18px; }
.bmp-legale li { margin-bottom: 8px; }
.bmp-legale .aggiornato {
font-family: var(--bmp-mono);
font-size: 13px;
color: var(--bmp-tenue);
}
.bmp-legale .indice {
background: var(--bmp-fondo2);
border: 1px solid var(--bmp-bordo);
border-radius: 10px;
padding: 20px 24px;
margin: 26px 0 40px;
}
.bmp-legale .indice ol { columns: 2; column-gap: 32px; margin: 0; }
@media (max-width: 620px) { .bmp-legale .indice ol { columns: 1; } }
/* ------------------------------------------------------------------ piede --- */
.bmp-piede {
background: var(--bmp-fondo2);
border-top: 1px solid var(--bmp-bordo);
padding: 64px 0 28px;
position: relative;
z-index: 2;
}
.bmp-piede-alto, .bmp-piede-basso {
max-width: var(--bmp-colonna);
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 40px);
}
.bmp-piede-alto {
display: grid;
gap: 36px;
grid-template-columns: 2fr 1fr 1fr 1fr;
}
@media (max-width: 860px) { .bmp-piede-alto { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bmp-piede-alto { grid-template-columns: 1fr; } }
.bmp-piede-marchio p { color: var(--bmp-tenue); font-size: 14px; margin-top: 12px; max-width: 34ch; }
.bmp-piede-colonna h4 { color: var(--bmp-testo); margin-bottom: 14px; font-family: var(--bmp-titoli); }
.bmp-piede-colonna ul { list-style: none; padding: 0; margin: 0; }
.bmp-piede-colonna li { margin-bottom: 9px; }
.bmp-piede-colonna a { color: var(--bmp-tenue); font-size: 14px; }
.bmp-piede-colonna a:hover { color: var(--bmp-testo); text-decoration: none; }
.bmp-piede-basso {
margin-top: 48px;
padding-top: 24px;
border-top: 1px solid var(--bmp-bordo);
}
.bmp-piede-avviso { color: var(--bmp-tenue); font-size: 12.5px; line-height: 1.7; max-width: 92ch; }
.bmp-piede-firma { color: var(--bmp-tenue); font-size: 12.5px; margin: 0; }
/* ------------------------------------------------- comparsa allo scorrere --- */
/* Niente librerie esterne per questo: sono sei righe di CSS e un osservatore.
AOS pesava 30 KB presi da un server di terzi a ogni visita. */
.bmp-appare {
opacity: 0;
transform: translateY(16px);
transition: opacity .6s ease-out, transform .6s ease-out;
}
.bmp-appare.visto { opacity: 1; transform: none; }
/* Chi ha chiesto al sistema meno animazioni non deve subirle comunque: per
alcune persone il movimento non e' un vezzo, e' un fastidio fisico. */
@media (prefers-reduced-motion: reduce) {
.bmp-appare { opacity: 1; transform: none; transition: none; }
.bmp-pagina * { scroll-behavior: auto !important; }
}
/* ----------------------------------------------------------- stampa --- */
/* I termini e la privacy vengono stampati o salvati in PDF piu' spesso di
quanto sembri, e su carta il tema scuro e' illeggibile e spreca inchiostro. */
@media print {
.bmp-nav, .bmp-piede, .bmp-tela, .bmp-avanzamento, .bmp-tasti { display: none !important; }
.bmp-pagina { background: #fff !important; color: #000 !important; font-size: 11pt; }
.bmp-pagina h1, .bmp-pagina h2, .bmp-pagina h3 { color: #000 !important; }
.bmp-legale p, .bmp-legale li { color: #000 !important; }
.bmp-sezione { padding: 0 !important; }
a { color: #000 !important; text-decoration: underline; }
}
/* ------------------------------------------------ righe dei prodotti --- */
/* Quattro prodotti spiegati in modo che si capiscano in cinque secondi.
*
* Prima erano quattro riquadri affiancati, belli e poco pratici: per capire
* cosa facesse ognuno bisognava leggere un paragrafo, e nessuno legge quattro
* paragrafi. Qui ogni prodotto e' una riga sola con tre informazioni sempre
* negli stessi posti - cosa guarda, cosa ti dice, quanto costa - cosi' si
* confrontano con gli occhi invece che con la memoria.
*
* Tutta la riga e' cliccabile, non solo il nome: e' il bersaglio piu' grande
* possibile, e su un telefono fa la differenza fra funzionare e no. */
.bmp-prodotti { border-top: 1px solid var(--bmp-bordo); margin-top: 36px; }
.bmp-prodotto {
display: grid;
grid-template-columns: 200px 1fr 170px;
gap: 8px 28px;
align-items: start;
padding: 26px 4px;
border-bottom: 1px solid var(--bmp-bordo);
transition: background .15s;
}
.bmp-pagina a.bmp-prodotto { color: inherit; }
.bmp-prodotto:hover { background: rgba(255,255,255,.02); text-decoration: none; }
.bmp-prodotto-nome {
font-family: var(--bmp-titoli);
font-size: 21px;
font-weight: 800;
letter-spacing: -.02em;
margin: 0;
}
.bmp-prodotto-dove {
font-family: var(--bmp-mono);
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--bmp-tenue);
margin-top: 4px;
display: block;
}
/* Le due righe "guarda / ti dice": la parola in mono a sinistra e'
un'etichetta, non un titolo, e si ripete identica in tutti i prodotti.
E' la ripetizione che rende la colonna leggibile in verticale. */
.bmp-prodotto-cosa { margin: 0; }
.bmp-prodotto-cosa b {
font-family: var(--bmp-mono);
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--bmp-teal);
font-weight: 400;
display: block;
margin-bottom: 2px;
}
.bmp-prodotto-cosa span { display: block; font-size: 15.5px; color: #c2ccd6; }
.bmp-prodotto-cosa + .bmp-prodotto-cosa { margin-top: 12px; }
.bmp-prodotto-prezzo { text-align: right; }
.bmp-prodotto-prezzo b {
display: block;
font-family: var(--bmp-titoli);
font-size: 20px;
font-weight: 700;
}
.bmp-prodotto-prezzo span { font-size: 13px; color: var(--bmp-tenue); }
.bmp-prodotto-prezzo em {
display: block;
margin-top: 8px;
font-style: normal;
font-size: 14px;
color: var(--bmp-teal);
}
@media (max-width: 760px) {
/* Su un telefono le tre colonne diventano una: il prezzo scende in fondo,
dove sta bene, perche' prima vuoi sapere cos'e' e poi quanto costa. */
.bmp-prodotto { grid-template-columns: 1fr; gap: 14px; padding: 22px 4px; }
.bmp-prodotto-prezzo { text-align: left; }
.bmp-prodotto-prezzo em { display: inline; margin-left: 12px; }
}
/* Il motto, sotto il logo nel piede. Verde e un filo piu' grande del testo
intorno: e' l'unica frase del sito che vale la pena rileggere. */
.bmp-motto {
color: var(--bmp-teal);
font-family: var(--bmp-titoli);
font-weight: 600;
font-size: 15px;
line-height: 1.45;
margin: 12px 0 0 !important;
}
/* ---------------------------------------------- pagine di lavoro --- */
/* Chi ha gia' comprato non deve riattraversare il negozio per usare la cosa
che ha comprato. Stessa grafica, meno arredamento. */
.bmp-nav-strumento .bmp-nav-voci { margin-left: 0; }
.bmp-nav-strumento .bmp-nav-voce {
font-family: var(--bmp-mono);
font-size: 13px;
letter-spacing: .04em;
}
.bmp-nav-strumento .bmp-nav-conto { margin-left: auto; }
.bmp-piede-strumento { padding: 26px 0 22px; background: transparent; }
.bmp-piede-strumento .bmp-piede-basso { margin-top: 0; padding-top: 0; border-top: 0; }
.bmp-piede-strumento a { color: var(--bmp-tenue); }
.bmp-piede-strumento a:hover { color: var(--bmp-testo); }
/* Sulle pagine di lavoro la prima sezione non deve cominciare a meta' schermo. */
.bmp-pagina-tools .bmp-sezione,
.bmp-pagina-ai-analyst-app .bmp-sezione,
.bmp-pagina-portfolio-tracker .bmp-sezione { padding-top: clamp(32px, 4vw, 56px); }