*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,Arial,sans-serif;color:#fff7df;background:#020604;overflow-x:hidden}a{color:inherit;text-decoration:none}#luxury-bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-4;background:radial-gradient(circle at 50% 30%,#073d2d 0%,#020604 58%,#000 100%)}.animated-glow{position:fixed;inset:-20%;z-index:-3;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,35%),rgba(0,255,169,.2),transparent 22%),radial-gradient(circle at 20% 20%,rgba(255,205,86,.18),transparent 28%),radial-gradient(circle at 88% 75%,rgba(0,161,102,.2),transparent 30%);filter:blur(18px);animation:aurora 9s ease-in-out infinite alternate}.animated-glow:before,.animated-glow:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 10%,rgba(0,255,170,.18) 26%,rgba(255,211,90,.20) 34%,transparent 46%),linear-gradient(245deg,transparent 42%,rgba(0,190,120,.16) 55%,rgba(255,198,55,.18) 63%,transparent 76%);mask-image:linear-gradient(90deg,transparent,black 12%,black 88%,transparent);animation:waveDrift 16s ease-in-out infinite alternate}.animated-glow:after{transform:scaleY(-1);opacity:.75;animation-duration:22s}.site-header,.page,.site-footer,.whatsapp-button{position:relative;z-index:2}.glass-panel{background:linear-gradient(145deg,rgba(1,18,13,.70),rgba(3,9,7,.58));border:1px solid rgba(255,206,77,.34);box-shadow:0 28px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);backdrop-filter:blur(14px) saturate(1.25)}.site-header{width:min(1420px,calc(100% - 38px));margin:22px auto 0;padding:16px 20px;border-radius:30px;display:flex;align-items:center;justify-content:space-between;gap:22px;position:sticky;top:16px;z-index:50}.brand{display:flex;align-items:center;gap:16px}.brand-logo-img{width:92px;height:66px;object-fit:contain;border-radius:18px;padding:4px;background:rgba(255,255,255,.96);border:1px solid rgba(255,215,106,.55);box-shadow:0 0 35px rgba(0,255,160,.24);animation:logoPulse 3.6s ease-in-out infinite;image-rendering:auto}.brand h1{margin:0;font-family:Georgia,serif;font-size:34px;color:#f8d06b}.brand p{margin:5px 0 0;color:#f5e6bd}.nav-links{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.nav-links a{padding:14px 18px;border-radius:16px;font-weight:700;background:rgba(255,255,255,.045);transition:.25s ease}.nav-links a:hover,.nav-links .active{color:#ffe38a;box-shadow:0 0 28px rgba(255,211,90,.23);transform:translateY(-2px)}.social-nav{display:inline-flex!important;gap:9px;align-items:center;border:1px solid}.social-nav.instagram,.instagram-button{background:linear-gradient(135deg,#c62279,#fb7b3b,#ffd15c)}.social-nav.facebook,.facebook-button{background:linear-gradient(135deg,#073d92,#1078d7)}.icon,.whatsapp-icon{display:inline-block;width:24px;height:24px;background:#fff;mask:center/contain no-repeat;-webkit-mask:center/contain no-repeat}.instagram-icon{mask-image:url('data:image/svg+xml;utf8,')}.facebook-icon{mask-image:url('data:image/svg+xml;utf8,')}.whatsapp-icon{width:44px;height:44px;mask-image:url('data:image/svg+xml;utf8,')}.page{width:min(1320px,calc(100% - 38px));margin:28px auto 32px;display:grid;gap:28px}.social-card{text-align:center;padding:48px 30px;border-radius:34px;overflow:hidden;position:relative}.social-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 45%,rgba(0,255,169,.11),transparent 35%);opacity:.9}.crown,.label,h2,p,.social-buttons,.hero-buttons,.steps{position:relative}.crown{color:#f8d06b;font-size:26px}.label{display:inline-block;color:#f8d06b;letter-spacing:2px;text-transform:uppercase;font-weight:900;font-size:14px}.social-card h2,.hero-card h2,.location-info h2{font-family:Georgia,serif;margin:12px auto;font-size:clamp(38px,5vw,64px);line-height:1}.social-card h2 span,.hero-card h2 span{color:#ffe38a}.social-card p,.hero-card p,.valuation-card p,.feature-card p,.location-info p{color:#f1e7cc;line-height:1.65;font-size:18px}.social-card p{max-width:760px;margin:auto}.social-buttons,.hero-buttons{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:28px}.instagram-button,.facebook-button,.primary-link,.secondary-link,.maps-button{display:inline-flex;align-items:center;gap:10px;border-radius:16px;padding:15px 25px;font-weight:900;border:1px solid rgba(255,255,255,.35);transition:.25s ease;color:white;box-shadow:0 12px 35px rgba(0,0,0,.28)}.instagram-button:hover,.facebook-button:hover,.primary-link:hover,.secondary-link:hover,.maps-button:hover{transform:translateY(-4px);box-shadow:0 18px 45px rgba(0,0,0,.45),0 0 34px rgba(255,211,90,.25)}.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.hero-card,.gold-widget,.valuation-card,.feature-card,.location-card{border-radius:30px;padding:34px}.hero-card{min-height:330px;background-image:linear-gradient(90deg,rgba(2,9,7,.82),rgba(2,9,7,.55)),radial-gradient(circle at 90% 50%,rgba(255,208,80,.22),transparent 36%)}.hero-card h2{margin:12px 0;font-size:clamp(42px,5vw,68px);max-width:780px}.hero-card p{max-width:740px}.primary-link,.maps-button{background:linear-gradient(135deg,#ffd45f,#9a731d);color:#130d03}.secondary-link{background:rgba(0,0,0,.25);border-color:rgba(255,211,90,.55)}.gold-widget{position:relative;overflow:hidden}.gold-widget:after{content:"";position:absolute;right:-40px;bottom:-50px;width:260px;height:260px;background:radial-gradient(circle,rgba(255,198,55,.32),transparent 64%);filter:blur(8px);animation:orb 5s ease-in-out infinite}.gold-header{display:flex;justify-content:space-between;gap:16px}.gold-header h2{font-family:Georgia,serif;color:#f8d06b;font-size:32px;margin:8px 0}.live-badge{height:max-content;display:flex;align-items:center;gap:8px;background:rgba(0,255,114,.12);border:1px solid rgba(103,255,157,.38);padding:9px 13px;border-radius:12px}.pulse{width:11px;height:11px;border-radius:50%;background:#1cff68;box-shadow:0 0 12px #1cff68;animation:pulse 1.4s infinite}.gold-price{font-family:Georgia,serif;font-size:70px;font-weight:800;color:#ffe38a;margin:18px 0;text-shadow:0 0 28px rgba(255,211,90,.3)}.gold-price small{font-size:28px;color:#fff7df}.gold-footer{display:flex;justify-content:space-between;gap:10px;color:#f1e7cc;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}.mini-chart{height:120px;margin-top:12px}.valuation-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:18px}.valuation-card{grid-row:span 2}.valuation-card h2{font-family:Georgia,serif;font-size:44px;margin:12px 0}.steps{display:grid;gap:12px;margin:22px 0}.steps div{padding:14px;border-radius:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.steps span{color:#ffe38a;font-weight:900}.steps strong{display:block;margin:4px 0}.steps p{margin:0;font-size:14px}.feature-card{display:grid;align-content:center;min-height:180px;transition:.25s ease}.feature-card:hover{transform:translateY(-6px)}.service-icon,.address-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#0bb978,#063b2c);color:#ffe38a;font-size:28px;box-shadow:0 0 28px rgba(0,255,160,.2)}.feature-card h3{color:#f8d06b;font-size:24px;margin:14px 0 8px}.location-card{display:grid;grid-template-columns:1fr 1fr;gap:24px}.address-box{display:flex;gap:16px;margin:20px 0;padding:18px;border-radius:22px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}.address-box p{margin:4px 0 0}.map-container{border-radius:26px;overflow:hidden;min-height:370px;border:1px solid rgba(255,211,90,.28)}.map-container iframe{width:100%;height:100%;min-height:370px;border:0;filter:saturate(1.1) contrast(1.05)}.whatsapp-button{position:fixed;right:28px;bottom:24px;display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:24px;background:linear-gradient(135deg,#05c866,#039b51);font-weight:900;box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 38px rgba(0,255,126,.45);animation:whatsappFloat 2.6s ease-in-out infinite}.whatsapp-button strong{font-size:18px}.site-footer{text-align:center;color:#dccb96;margin:18px auto 34px}.site-footer a{color:#ffe38a}.reveal{opacity:0;transform:translateY(24px);animation:reveal .8s ease forwards}.reveal:nth-child(2){animation-delay:.12s}.reveal:nth-child(3){animation-delay:.2s}.reveal:nth-child(4){animation-delay:.28s}@keyframes reveal{to{opacity:1;transform:none}}@keyframes aurora{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(2%,2%,0) scale(1.05)}}@keyframes waveDrift{0%{transform:translateX(-14%) skewY(-5deg)}100%{transform:translateX(14%) skewY(5deg)}}@keyframes logoPulse{50%{box-shadow:0 0 45px rgba(255,211,90,.35)}}@keyframes pulse{70%{box-shadow:0 0 0 13px rgba(28,255,104,0)}}@keyframes orb{50%{transform:translate(-25px,-15px) scale(1.1)}}@keyframes whatsappFloat{50%{transform:translateY(-7px)}}
/* WhatsApp stabile e pulito: icona SVG reale, niente maschere buggate */
.whatsapp-circle{
flex:0 0 auto;
width:52px;
height:52px;
display:grid;
place-items:center;
border-radius:50%;
background:#ffffff;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 0 24px rgba(0,255,126,.36);
}
.whatsapp-circle svg{
width:34px;
height:34px;
fill:#08b95f;
display:block;
}
.whatsapp-button{
transform:translateZ(0);
will-change:transform;
}
.whatsapp-button:hover{
transform:translateY(-5px) scale(1.02);
}
/* Evita lampi laterali durante il reset delle onde decorative */
.animated-glow:before,.animated-glow:after{
will-change:transform,opacity;
}
@media(max-width:1050px){.site-header{display:grid}.hero-grid,.valuation-grid,.location-card{grid-template-columns:1fr}.valuation-card{grid-row:auto}.brand h1{font-size:26px}.nav-links a{padding:11px 13px}.gold-price{font-size:56px}.whatsapp-button{left:18px;right:18px;justify-content:center}}@media(max-width:640px){.site-header,.page{width:calc(100% - 24px)}.brand-logo-img{width:78px;height:56px}.social-card,.hero-card,.gold-widget,.valuation-card,.feature-card,.location-card{padding:24px}.social-card h2,.hero-card h2{font-size:38px}.nav-links{gap:8px}.whatsapp-button{border-radius:18px}}
/* === V8: ritorno alla V6 + solo caricamento iniziale e bordo oro hover === */
.intro-loader{
position:fixed;
inset:0;
z-index:9999;
display:grid;
place-items:center;
gap:18px;
background:
radial-gradient(circle at 50% 35%, rgba(0,255,170,.18), transparent 28%),
radial-gradient(circle at 50% 60%, rgba(255,215,106,.16), transparent 32%),
#020604;
pointer-events:none;
animation:loaderOut .9s ease 1.45s forwards;
}
.intro-loader span{
font-family:Georgia,serif;
color:#ffe38a;
font-size:clamp(28px,4vw,48px);
letter-spacing:1px;
text-shadow:0 0 28px rgba(255,215,106,.42);
}
.loader-gem{
width:82px;
height:82px;
border-radius:28px;
position:relative;
border:1px solid rgba(255,215,106,.75);
background:linear-gradient(135deg,rgba(0,255,170,.32),rgba(255,215,106,.16));
box-shadow:
0 0 50px rgba(255,215,106,.45),
inset 0 0 32px rgba(0,255,170,.32);
animation:gemPulse 1.2s ease-in-out infinite alternate;
}
.loader-gem::after{
content:"";
position:absolute;
inset:18px;
border-radius:18px;
background:radial-gradient(circle,#00ffad,transparent 70%);
filter:blur(4px);
opacity:.7;
}
@keyframes loaderOut{
to{opacity:0;visibility:hidden;transform:scale(1.02)}
}
@keyframes gemPulse{
from{transform:rotate(-4deg) scale(.96)}
to{transform:rotate(4deg) scale(1.04)}
}
/* Solo doratura al passaggio mouse: niente resize, niente 3D, niente layout alterato */
.glass-panel,
.nav-links a,
.instagram-button,
.facebook-button,
.primary-link,
.secondary-link,
.maps-button,
.whatsapp-button{
will-change:border-color, box-shadow;
}
.glass-panel:hover{
border-color:rgba(255,215,106,.82);
box-shadow:
0 28px 80px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.10),
0 0 34px rgba(255,215,106,.18);
}
.nav-links a:hover,
.instagram-button:hover,
.facebook-button:hover,
.primary-link:hover,
.secondary-link:hover,
.maps-button:hover,
.whatsapp-button:hover{
border-color:rgba(255,215,106,.82);
}
/* ===== V10 PREMIUM CARD HOVER - SAFE ===== */
/*
Effetto hover morbido stile V9 applicato SOLO ai blocchi principali.
Non tocca navbar/header e non tocca il pulsante WhatsApp, così restano come nella V8.
*/
.hero-card,
.gold-widget,
.chart-card,
.info-card,
.location-card,
.valuation-card,
.small-service-card,
.social-card {
position: relative;
overflow: hidden;
isolation: isolate;
transition:
transform 0.58s cubic-bezier(.19,1,.22,1),
border-color 0.58s ease,
box-shadow 0.78s ease,
background 0.78s ease,
filter 0.58s ease;
}
.hero-card::after,
.gold-widget::after,
.chart-card::after,
.info-card::after,
.location-card::after,
.valuation-card::after,
.small-service-card::after,
.social-card::after {
content: "";
position: absolute;
inset: -150%;
pointer-events: none;
z-index: 1;
opacity: 0;
background:
linear-gradient(
120deg,
transparent 22%,
rgba(255, 215, 106, 0.04) 38%,
rgba(255, 255, 255, 0.12) 48%,
rgba(255, 215, 106, 0.08) 56%,
transparent 74%
);
transform: translateX(-130%) rotate(10deg);
transition:
transform 1.15s cubic-bezier(.19,1,.22,1),
opacity 0.55s ease;
}
.hero-card > *,
.gold-widget > *,
.chart-card > *,
.info-card > *,
.location-card > *,
.valuation-card > *,
.small-service-card > *,
.social-card > * {
position: relative;
z-index: 2;
}
.hero-card:hover,
.gold-widget:hover,
.chart-card:hover,
.info-card:hover,
.location-card:hover,
.valuation-card:hover,
.small-service-card:hover,
.social-card:hover {
transform: translateY(-5px);
border-color: rgba(255, 215, 106, 0.68) !important;
box-shadow:
0 24px 64px rgba(0, 0, 0, 0.52),
0 0 0 1px rgba(255, 215, 106, 0.14),
0 0 42px rgba(255, 215, 106, 0.16),
inset 0 0 30px rgba(255, 215, 106, 0.035);
filter: brightness(1.025);
}
.hero-card:hover::after,
.gold-widget:hover::after,
.chart-card:hover::after,
.info-card:hover::after,
.location-card:hover::after,
.valuation-card:hover::after,
.small-service-card:hover::after,
.social-card:hover::after {
opacity: 1;
transform: translateX(210%) rotate(10deg);
}
/* Micro-effetto interno su icone dentro le card, senza modificare dimensioni dei bottoni globali */
.small-service-card:hover .service-icon,
.location-card:hover .address-icon {
box-shadow:
0 0 24px rgba(0, 255, 160, 0.20),
0 0 26px rgba(255, 215, 106, 0.16);
transition: box-shadow 0.6s ease, transform 0.6s cubic-bezier(.19,1,.22,1);
transform: translateY(-2px);
}
/* Su mobile mantengo l'effetto più leggero */
@media (max-width: 700px) {
.hero-card:hover,
.gold-widget:hover,
.chart-card:hover,
.info-card:hover,
.location-card:hover,
.valuation-card:hover,
.small-service-card:hover,
.social-card:hover {
transform: translateY(-2px);
}
}
/* Accessibilità: riduce gli effetti se richiesto dal sistema */
@media (prefers-reduced-motion: reduce) {
.hero-card,
.gold-widget,
.chart-card,
.info-card,
.location-card,
.valuation-card,
.small-service-card,
.social-card,
.hero-card::after,
.gold-widget::after,
.chart-card::after,
.info-card::after,
.location-card::after,
.valuation-card::after,
.small-service-card::after,
.social-card::after {
transition: none !important;
animation: none !important;
}
}
/* Convertitore grammi/euro al posto del mini grafico */
.gold-converter{
position:relative;
z-index:2;
margin-top:22px;
padding:18px;
border-radius:22px;
background:linear-gradient(145deg,rgba(255,211,90,.10),rgba(0,0,0,.18));
border:1px solid rgba(255,211,90,.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 35px rgba(0,0,0,.22);
}
.gold-converter label{
display:block;
color:#f8d06b;
font-weight:900;
letter-spacing:1.4px;
text-transform:uppercase;
font-size:13px;
margin-bottom:10px;
}
.converter-row{
display:flex;
align-items:center;
gap:10px;
}
#gold-grams{
width:100%;
min-width:0;
height:54px;
border-radius:16px;
border:1px solid rgba(255,211,90,.42);
background:rgba(1,18,13,.78);
color:#fff7df;
font-size:24px;
font-weight:900;
padding:0 16px;
outline:none;
box-shadow:inset 0 0 18px rgba(0,0,0,.28);
}
#gold-grams:focus{
border-color:#ffe38a;
box-shadow:0 0 0 4px rgba(255,211,90,.12), inset 0 0 18px rgba(0,0,0,.28);
}
.unit-pill{
height:54px;
min-width:54px;
display:grid;
place-items:center;
border-radius:16px;
background:linear-gradient(135deg,#ffd45f,#9a731d);
color:#130d03;
font-weight:900;
font-size:22px;
}
.converter-result{
margin-top:16px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,.12);
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:14px;
}
.converter-result span{
color:#f1e7cc;
font-size:15px;
}
.converter-result strong{
color:#ffe38a;
font-family:Georgia,serif;
font-size:clamp(32px,4vw,48px);
line-height:1;
white-space:nowrap;
text-shadow:0 0 22px rgba(255,211,90,.22);
}
.converter-note{
margin:12px 0 0;
color:#dccb96!important;
font-size:13px!important;
line-height:1.4!important;
}
@media(max-width:640px){
.converter-result{align-items:flex-start;flex-direction:column}
.converter-result strong{white-space:normal}
}
/* V12 - Sezione valutazione ristrutturata: tre step grandi, senza spazio vuoto */
.valuation-section{
position:relative;
overflow:hidden;
border-radius:34px;
padding:36px;
display:grid;
gap:26px;
background:
radial-gradient(circle at 12% 20%, rgba(255,211,90,.14), transparent 30%),
radial-gradient(circle at 84% 74%, rgba(0,255,169,.12), transparent 32%),
linear-gradient(145deg,rgba(1,18,13,.78),rgba(3,9,7,.62));
}
.valuation-section::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:linear-gradient(115deg,transparent 12%,rgba(255,215,106,.10) 34%,transparent 55%);
opacity:.55;
}
.valuation-section > *{position:relative;z-index:1}
.valuation-intro{
display:grid;
grid-template-columns:minmax(280px,.85fr) 1fr;
gap:28px;
align-items:end;
}
.valuation-intro h2{
font-family:Georgia,serif;
font-size:clamp(38px,5vw,64px);
line-height:1;
margin:10px 0 0;
max-width:620px;
}
.valuation-intro p{
margin:0;
color:#f1e7cc;
font-size:18px;
line-height:1.65;
max-width:650px;
}
.valuation-steps-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.valuation-step-card{
position:relative;
min-height:260px;
overflow:hidden;
padding:30px;
border-radius:28px;
background:linear-gradient(145deg,rgba(1,18,13,.76),rgba(1,45,31,.42));
border:1px solid rgba(255,211,90,.34);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.30);
transition:transform .55s cubic-bezier(.19,1,.22,1), border-color .55s ease, box-shadow .55s ease, background .55s ease;
}
.valuation-step-card::before{
content:attr(data-glow);
position:absolute;
inset:auto -30px -50px auto;
width:190px;
height:190px;
border-radius:50%;
background:radial-gradient(circle,rgba(255,211,90,.22),transparent 66%);
filter:blur(6px);
opacity:.7;
}
.valuation-step-card::after{
content:"";
position:absolute;
top:-40%;
left:-70%;
width:54%;
height:180%;
pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
transform:rotate(12deg);
opacity:0;
transition:opacity .55s ease, transform .9s cubic-bezier(.19,1,.22,1);
}
.valuation-step-card:hover{
transform:translateY(-8px);
border-color:rgba(255,225,126,.72);
background:linear-gradient(145deg,rgba(4,34,24,.88),rgba(5,62,42,.58));
box-shadow:0 28px 75px rgba(0,0,0,.42),0 0 42px rgba(255,211,90,.16),inset 0 1px 0 rgba(255,255,255,.10);
}
.valuation-step-card:hover::after{
opacity:1;
transform:translateX(285%) rotate(12deg);
}
.valuation-step-card .step-number{
position:absolute;
right:20px;
top:10px;
font-family:Georgia,serif;
font-size:92px;
line-height:1;
font-weight:900;
color:rgba(255,211,90,.12);
pointer-events:none;
}
.valuation-step-card .service-icon{
position:relative;
z-index:1;
margin-bottom:28px;
}
.valuation-step-card h3{
position:relative;
z-index:1;
color:#ffe38a;
font-size:clamp(25px,2.3vw,34px);
line-height:1.05;
margin:0 0 14px;
}
.valuation-step-card p{
position:relative;
z-index:1;
color:#f1e7cc;
font-size:17px;
line-height:1.65;
margin:0;
}
.valuation-cta{
display:flex;
justify-content:center;
padding-top:2px;
}
@media(max-width:1050px){
.valuation-intro{grid-template-columns:1fr;align-items:start}
.valuation-steps-grid{grid-template-columns:1fr}
.valuation-step-card{min-height:auto}
}
@media(max-width:640px){
.valuation-section{padding:24px;border-radius:28px}
.valuation-step-card{padding:24px}
.valuation-step-card .step-number{font-size:70px}
}
/* V15 - sezione valutazione come mockup */
.valuation-section{
border-radius:34px;
padding:0;
overflow:hidden;
position:relative;
}
.valuation-section::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 30% 35%, rgba(255,211,90,.11), transparent 26%),
radial-gradient(circle at 78% 38%, rgba(0,255,170,.09), transparent 34%);
z-index:0;
}
.valuation-layout{
position:relative;
z-index:1;
display:grid;
grid-template-columns:390px 1fr;
grid-template-areas:
"left title"
"steps steps"
"cta cta";
column-gap:70px;
row-gap:34px;
padding:38px 42px 34px;
}
.valuation-left{
grid-area:left;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:34px;
}
.valuation-section-logo{
width:150px;
height:auto;
border-radius:24px;
padding:7px;
background:rgba(255,255,255,.92);
border:1px solid rgba(255,215,106,.55);
box-shadow:0 0 34px rgba(0,255,160,.18),0 18px 45px rgba(0,0,0,.32);
}
.valuation-copy{
width:100%;
max-width:360px;
}
.valuation-copy .label{
display:block;
color:#ffdc74;
letter-spacing:2.6px;
font-size:15px;
margin-bottom:12px;
}
.mini-divider{
display:flex;
align-items:center;
gap:12px;
width:260px;
margin:0 0 24px;
color:#ffdc74;
}
.mini-divider::before,
.mini-divider::after{
content:"";
height:1px;
flex:1;
background:rgba(255,215,106,.45);
}
.valuation-copy p{
margin:0;
color:#fff5d6;
font-size:20px;
line-height:1.62;
text-shadow:0 2px 12px rgba(0,0,0,.25);
}
.valuation-title{
grid-area:title;
align-self:center;
justify-self:center;
width:100%;
max-width:700px;
text-align:center;
padding-top:20px;
}
.valuation-title h2{
margin:0;
font-family:Georgia,serif;
font-size:clamp(58px,6.2vw,88px);
line-height:.96;
color:#fff7df;
text-shadow:0 10px 26px rgba(0,0,0,.36);
}
.title-divider{
display:flex;
align-items:center;
gap:16px;
width:min(430px,70%);
margin:34px auto 0;
color:#ffdc74;
}
.title-divider::before,
.title-divider::after{
content:"";
height:1px;
flex:1;
background:rgba(255,215,106,.42);
}
.valuation-steps-grid{
grid-area:steps;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
}
.valuation-step-card{
position:relative;
min-height:265px;
padding:38px 34px 30px;
border-radius:26px;
border:1px solid rgba(255,211,90,.46);
background:
radial-gradient(circle at 72% 84%, rgba(255,211,90,.10), transparent 38%),
linear-gradient(145deg, rgba(1,25,17,.88), rgba(0,9,7,.72));
box-shadow:0 22px 60px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
overflow:hidden;
}
.valuation-step-card .service-icon{
width:62px;
height:62px;
border-radius:19px;
margin-bottom:28px;
}
.valuation-step-card .step-number{
position:absolute;
top:20px;
right:26px;
font-family:Georgia,serif;
font-size:78px;
line-height:1;
font-weight:900;
color:rgba(255,215,106,.12);
}
.valuation-step-card h3{
margin:0 0 16px;
color:#ffe486;
font-size:34px;
line-height:1.08;
}
.valuation-step-card p{
margin:0;
color:#fff6dc;
font-size:18px;
line-height:1.64;
}
.valuation-cta{
grid-area:cta;
display:flex;
justify-content:center;
margin-top:0;
}
.valuation-cta .primary-link{
min-width:340px;
justify-content:center;
font-size:18px;
}
@media(max-width:1050px){
.valuation-layout{
grid-template-columns:1fr;
grid-template-areas:
"left"
"title"
"steps"
"cta";
padding:30px 22px;
row-gap:26px;
}
.valuation-left{
gap:22px;
}
.valuation-copy,
.valuation-copy p{
max-width:100%;
}
.valuation-title{
text-align:left;
justify-self:start;
padding-top:0;
}
.title-divider{
margin-left:0;
}
.valuation-steps-grid{
grid-template-columns:1fr;
}
.valuation-cta .primary-link{
min-width:0;
width:100%;
}
}
@media(max-width:640px){
.valuation-title h2{
font-size:42px;
}
.valuation-copy p,
.valuation-step-card p{
font-size:16px;
}
.valuation-step-card h3{
font-size:28px;
}
}
/* V20 - switch 18K/24K dentro la homepage, senza pagina grafico */
.karat-switch{
position:relative;
z-index:2;
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:18px;
}
.karat-option{
flex:1;
min-width:140px;
border:1px solid rgba(255,211,90,.38);
border-radius:999px;
padding:12px 14px;
background:rgba(0,0,0,.22);
color:#fff7df;
font-weight:900;
cursor:pointer;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 22px rgba(0,0,0,.24);
transition:.22s ease;
}
.karat-option:hover{
border-color:#ffe38a;
box-shadow:0 0 0 4px rgba(255,211,90,.10),0 12px 30px rgba(0,0,0,.28);
}
.karat-option.active{
background:linear-gradient(135deg,#ffd45f,#9a731d);
color:#130d03;
border-color:transparent;
}
body.lite-mode #luxury-bg,
body.lite-mode .animated-glow,
body.lite-mode .intro-loader{
display:none!important;
}
body.lite-mode{
background:
radial-gradient(circle at top,rgba(245,197,66,.12),transparent 35%),
linear-gradient(135deg,#02120d,#031b14 45%,#000);
}
body.lite-mode .glass-panel{
backdrop-filter:none;
}
/* === V25: fix logo, hero spacing e testo più elegante === */
.crown{display:none!important;}
.brand-logo-img{
width:110px!important;
height:auto!important;
max-height:72px!important;
object-fit:contain!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
animation:none!important;
}
.site-header .brand{
gap:18px!important;
min-width:0;
}
.site-header{
align-items:center!important;
}
.hero-card{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
min-height:520px!important;
padding:54px 54px!important;
}
.hero-card .label{
margin-bottom:10px!important;
}
.hero-card h2{
max-width:920px!important;
margin:0 0 24px!important;
font-size:clamp(44px,4.5vw,76px)!important;
line-height:1.04!important;
letter-spacing:-.025em!important;
}
.hero-card p{
max-width:880px!important;
margin:0 0 28px!important;
font-size:20px!important;
line-height:1.58!important;
}
.hero-buttons{
justify-content:flex-start!important;
margin-top:4px!important;
}
.valuation-section-logo{
width:170px!important;
height:auto!important;
object-fit:contain!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
.valuation-title{
align-self:center!important;
padding-top:0!important;
}
.valuation-title h2{
font-size:clamp(52px,5.4vw,82px)!important;
line-height:1.02!important;
}
@media(max-width:1050px){
.hero-card{
min-height:auto!important;
padding:38px 30px!important;
}
.hero-card h2{
font-size:clamp(40px,8vw,64px)!important;
}
.brand-logo-img{
width:94px!important;
max-height:62px!important;
}
}
@media(max-width:640px){
.hero-card{
padding:30px 24px!important;
}
.hero-card h2{
font-size:36px!important;
line-height:1.08!important;
}
.hero-card p{
font-size:16px!important;
}
.brand-logo-img{
width:82px!important;
max-height:54px!important;
}
.valuation-section-logo{
width:130px!important;
}
}
/* === V26 final: logo non schiacciato + titolo valutazione equilibrato === */
.brand-logo-img{
width: 104px !important;
height: 68px !important;
object-fit: contain !important;
object-position: center !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
animation: none !important;
}
.valuation-section-logo{
width: 190px !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.valuation-layout{
min-height: 760px !important;
align-items: center !important;
row-gap: 22px !important;
}
.valuation-left{
justify-content: center !important;
gap: 26px !important;
}
.valuation-title{
align-self: center !important;
padding-top: 0 !important;
transform: translateY(26px);
}
.valuation-title h2{
font-size: clamp(54px, 5.3vw, 76px) !important;
line-height: .98 !important;
max-width: 680px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.title-divider{
margin-top: 28px !important;
}
.valuation-steps-grid{
margin-top: 8px !important;
}
.valuation-step-card h3{
font-size: clamp(25px, 2.2vw, 32px) !important;
}
.crown{
display: none !important;
}
@media(max-width:1050px){
.brand-logo-img{
width: 92px !important;
height: 60px !important;
}
.valuation-layout{
min-height: auto !important;
}
.valuation-title{
transform: none !important;
}
.valuation-title h2{
font-size: clamp(42px, 9vw, 58px) !important;
text-align: left !important;
}
.valuation-section-logo{
width: 160px !important;
}
}
@media(max-width:640px){
.brand-logo-img{
width: 78px !important;
height: 52px !important;
}
.valuation-title h2{
font-size: 40px !important;
}
.valuation-section-logo{
width: 138px !important;
}
}
/* V28 - Logo navbar vecchio, logo sezione sotto invariato */
.brand-logo-img{
width: 96px !important;
height: 76px !important;
object-fit: cover !important;
object-position: center !important;
padding: 5px !important;
background: rgba(255,255,255,.96) !important;
border: 1px solid rgba(255,215,106,.55) !important;
border-radius: 22px !important;
box-shadow: 0 0 35px rgba(0,255,160,.24) !important;
}
/* La sezione valutazione usa ancora il logo grande PNG già corretto */
.valuation-section-logo{
object-fit: contain !important;
}
/* V29 - logo navbar più grande */
.brand-logo-img{
width:140px !important;
height:auto !important;
max-height:100px !important;
object-fit:contain !important;
}
/* V30 - Navbar con lo stesso logo PNG della sezione sotto */
.brand{
gap: 24px !important;
}
.brand-logo-img{
width: 190px !important;
height: auto !important;
max-height: 116px !important;
object-fit: contain !important;
object-position: center !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
animation: none !important;
}
.site-header{
min-height: 128px !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
@media(max-width:1050px){
.brand-logo-img{
width: 160px !important;
max-height: 98px !important;
}
}
@media(max-width:640px){
.brand-logo-img{
width: 120px !important;
max-height: 76px !important;
}
.brand{
gap: 14px !important;
}
}
/* V32 - offerta minimo 30 grammi stile card live */
.minimum-offer{
position:relative;
z-index:2;
width:100%;
max-width:360px;
margin: -6px 0 18px;
padding:13px 16px;
border-radius:18px;
border:1px solid rgba(255,211,90,.32);
background:rgba(255,211,90,.08);
color:#f1e7cc;
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.minimum-offer strong{
display:block;
color:#ffe38a;
font-size:15px;
font-weight:900;
margin-bottom:4px;
}
.minimum-offer span{
display:block;
font-size:13px;
line-height:1.35;
color:#dccb96;
}
@media(max-width:640px){
.minimum-offer{
max-width:none;
}
}
/* V36 - Quarto passaggio pagamento e allineamento logo valutazione */
.valuation-brand-block{
width:100%;
max-width:360px;
display:flex;
flex-direction:column;
align-items:center;
}
.valuation-section-logo{
width:178px;
margin:0 auto 28px;
}
.valuation-brand-block .label{
display:block;
width:100%;
margin:0 0 12px;
text-align:center;
color:#ffdc74;
letter-spacing:2.6px;
font-size:15px;
}
.valuation-brand-block .mini-divider{
width:260px;
margin:0;
}
.valuation-copy{
max-width:360px;
}
.valuation-steps-grid{
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
}
.valuation-step-card{
padding:34px 28px 28px;
}
.valuation-step-card h3{
font-size:clamp(25px,2vw,31px);
}
.valuation-step-card p{
font-size:17px;
}
@media(max-width:1150px){
.valuation-steps-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:640px){
.valuation-section-logo{
width:162px;
margin-bottom:24px;
}
.valuation-steps-grid{
grid-template-columns:1fr;
}
}
/* V37 - Blocco logo valutazione più grande e allineato a sinistra */
.valuation-brand-block{
width:300px !important;
max-width:100% !important;
margin:0 !important;
align-self:flex-start !important;
align-items:center !important;
}
.valuation-section-logo{
width:220px !important;
max-width:100% !important;
margin:0 auto 28px !important;
}
.valuation-brand-block .label{
width:100% !important;
text-align:center !important;
}
.valuation-brand-block .mini-divider{
width:260px !important;
max-width:100% !important;
margin:0 auto !important;
}
@media(max-width:640px){
.valuation-brand-block{
width:292px !important;
}
.valuation-section-logo{
width:215px !important;
margin-bottom:28px !important;
}
}
/* V38 - Navbar alleggerita e logo visivamente più grande senza aumentare l'header */
.brand-logo-img{
width:190px !important;
height:116px !important;
max-height:116px !important;
object-fit:contain !important;
}
@media(max-width:1050px){
.brand-logo-img{
width:160px !important;
height:98px !important;
max-height:98px !important;
}
}
@media(max-width:640px){
.brand-logo-img{
width:120px !important;
height:76px !important;
max-height:76px !important;
}
}
/* V39 - Menu principale più largo e centrato nello spazio della navbar */
@media (min-width:1051px){
.site-header .brand{
flex:0 0 auto !important;
}
.site-header .nav-links{
flex:1 1 auto !important;
justify-content:center !important;
gap:18px !important;
margin-left:34px !important;
}
.site-header .nav-links a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-width:150px !important;
padding:15px 28px !important;
text-align:center !important;
}
}
@media (max-width:1050px){
.site-header .nav-links{
width:100% !important;
justify-content:center !important;
}
}
/* V41 - Dashboard prezzi a tutta larghezza: Oro 18K, Oro 24K e Argento 800 */
.metals-dashboard{
border-radius:34px;
padding:38px;
overflow:hidden;
position:relative;
}
.metals-dashboard::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 12% 10%,rgba(255,211,90,.10),transparent 30%),
radial-gradient(circle at 88% 20%,rgba(0,255,170,.10),transparent 32%);
}
.metals-dashboard > *{
position:relative;
z-index:1;
}
.metals-dashboard-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:28px;
margin-bottom:28px;
}
.metals-dashboard-header h2{
margin:8px 0 8px;
font-family:Georgia,serif;
color:#fff7df;
font-size:clamp(38px,4vw,60px);
line-height:1;
}
.metals-dashboard-header p{
max-width:800px;
margin:0;
color:#e9dfc3;
font-size:17px;
line-height:1.55;
}
.live-badge.cached{
color:#ffe38a;
border-color:rgba(255,211,90,.42);
background:rgba(255,211,90,.10);
}
.live-badge.cached .pulse{
background:#ffd45f;
box-shadow:0 0 12px #ffd45f;
}
.metals-price-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.metal-price-card{
min-width:0;
min-height:285px;
padding:26px;
border-radius:26px;
border:1px solid rgba(255,211,90,.28);
background:linear-gradient(145deg,rgba(0,24,17,.88),rgba(0,8,6,.76));
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 18px 42px rgba(0,0,0,.26);
cursor:pointer;
transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
outline:none;
}
.metal-price-card:hover,
.metal-price-card:focus-visible{
transform:translateY(-4px);
border-color:rgba(255,227,138,.68);
box-shadow:0 20px 48px rgba(0,0,0,.36),0 0 30px rgba(255,211,90,.10);
}
.metal-price-card.active{
border-color:#e6b83f;
box-shadow:inset 0 0 0 1px rgba(255,227,138,.18),0 20px 50px rgba(0,0,0,.34),0 0 34px rgba(255,211,90,.13);
}
.metal-card-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
}
.metal-eyebrow{
display:block;
color:#f8d06b;
text-transform:uppercase;
letter-spacing:1.7px;
font-size:12px;
font-weight:900;
}
.metal-card-top h3{
margin:8px 0 0;
font-family:Georgia,serif;
color:#fff2c9;
font-size:32px;
}
.metal-symbol{
flex:0 0 auto;
display:grid;
place-items:center;
min-width:55px;
height:55px;
padding:0 10px;
border-radius:18px;
color:#2a1900;
background:linear-gradient(145deg,#ffe38a,#b78318);
font-weight:1000;
box-shadow:0 0 25px rgba(255,211,90,.20);
}
.silver-symbol{
color:#10201d;
background:linear-gradient(145deg,#f2f7f5,#9da9a6);
box-shadow:0 0 25px rgba(220,235,231,.18);
}
.metal-card-price{
margin:24px 0 18px;
color:#ffe38a;
font-family:Georgia,serif;
font-size:clamp(46px,4.2vw,68px);
font-weight:800;
line-height:.95;
white-space:nowrap;
text-shadow:0 0 28px rgba(255,211,90,.22);
}
.metal-card-price small{
color:#fff7df;
font-size:24px;
}
.silver-price{
color:#edf5f2;
text-shadow:0 0 24px rgba(224,240,235,.16);
}
.metal-card-offer,
.metal-card-note{
margin:0;
padding:13px 15px;
border-radius:17px;
border:1px solid rgba(255,211,90,.24);
background:rgba(255,211,90,.07);
color:#daca9e;
font-size:13px;
line-height:1.45;
}
.metal-card-offer strong,
.metal-card-offer span{
display:block;
}
.metal-card-offer strong{
margin-bottom:4px;
color:#ffe38a;
font-size:14px;
}
.metals-update-row{
display:flex;
justify-content:space-between;
gap:20px;
margin:22px 0;
padding:15px 2px;
border-top:1px solid rgba(255,255,255,.10);
border-bottom:1px solid rgba(255,255,255,.10);
color:#e9dfc3;
}
.metals-update-row strong{
color:#ffe38a;
}
.metals-converter{
padding:26px;
border-radius:28px;
border:1px solid rgba(255,211,90,.28);
background:linear-gradient(145deg,rgba(4,31,22,.82),rgba(0,12,9,.72));
}
.converter-heading{
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:24px;
margin-bottom:22px;
}
.converter-heading h3{
margin:6px 0 0;
color:#fff7df;
font-family:Georgia,serif;
font-size:34px;
}
.asset-switch{
display:flex;
gap:10px;
flex-wrap:wrap;
justify-content:flex-end;
}
.asset-option{
min-width:130px;
border:1px solid rgba(255,211,90,.35);
border-radius:999px;
padding:12px 18px;
background:rgba(0,0,0,.22);
color:#fff7df;
font-weight:900;
cursor:pointer;
transition:.22s ease;
}
.asset-option:hover{
border-color:#ffe38a;
}
.asset-option.active{
border-color:transparent;
color:#160f03;
background:linear-gradient(135deg,#ffd45f,#9a731d);
box-shadow:0 10px 28px rgba(0,0,0,.24);
}
.converter-body{
display:grid;
grid-template-columns:minmax(260px,.75fr) minmax(360px,1.25fr);
gap:28px;
align-items:end;
}
.converter-input-block label{
display:block;
margin-bottom:10px;
color:#f8d06b;
text-transform:uppercase;
letter-spacing:1.6px;
font-weight:900;
font-size:13px;
}
.metals-converter .converter-row{
display:grid;
grid-template-columns:1fr 64px;
gap:12px;
}
.metals-converter input{
width:100%;
min-width:0;
border:1px solid rgba(255,211,90,.40);
border-radius:18px;
padding:17px 18px;
background:rgba(0,9,7,.74);
color:#fff7df;
font-size:25px;
font-weight:900;
outline:none;
}
.metals-converter input:focus{
border-color:#ffe38a;
box-shadow:0 0 0 4px rgba(255,211,90,.10);
}
.metals-converter .unit-pill{
display:grid;
place-items:center;
border-radius:18px;
color:#1b1101;
background:linear-gradient(145deg,#ffd45f,#a97918);
font-size:22px;
font-weight:1000;
}
.converter-result-block{
text-align:right;
}
.converter-result-block > span{
color:#e9dfc3;
}
.converter-result-block strong{
display:block;
margin:3px 0 4px;
color:#ffe38a;
font-family:Georgia,serif;
font-size:clamp(44px,5vw,70px);
line-height:1;
}
.converter-result-block p{
margin:0 0 2px auto;
max-width:720px;
color:#daca9e;
font-size:14px;
line-height:1.45;
}
@media(max-width:1050px){
.metals-price-grid{
grid-template-columns:1fr;
}
.metal-price-card{
min-height:0;
}
.converter-heading{
align-items:flex-start;
flex-direction:column;
}
.asset-switch{
width:100%;
justify-content:flex-start;
}
.asset-option{
flex:1;
}
}
@media(max-width:700px){
.metals-dashboard{
padding:24px;
}
.metals-dashboard-header,
.metals-update-row{
flex-direction:column;
}
.metals-dashboard-header{
align-items:flex-start;
}
.metals-update-row{
gap:6px;
}
.converter-body{
grid-template-columns:1fr;
}
.converter-result-block{
text-align:left;
}
.converter-result-block p{
margin-left:0;
}
.asset-switch{
display:grid;
grid-template-columns:1fr;
}
.asset-option{
width:100%;
}
.metal-card-price{
font-size:54px;
}
}
/* ===== V45: evidenziazione dorata senza interferire con .reveal ===== */
.nav-target-highlight{
position:relative;
z-index:4;
}
/* ===== V46: menu con Quotazione e cinque pulsanti equilibrati ===== */
@media (min-width:1051px){
.site-header .nav-links{
gap:14px !important;
margin-left:24px !important;
}
.site-header .nav-links a{
min-width:136px !important;
padding:15px 20px !important;
}
}
/* ===== V47: navbar stabile durante gli scorrimenti lunghi =====
Chrome può perdere per un istante il layer di una navbar sticky con
backdrop-filter durante uno smooth-scroll lungo. Manteniamo la navbar
su un layer dedicato e, solo durante lo scorrimento da menu, sospendiamo
il blur usando uno sfondo visivamente equivalente ma più stabile. */
.site-header{
transform:translateZ(0);
-webkit-transform:translateZ(0);
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
will-change:transform;
isolation:isolate;
}
body.nav-programmatic-scroll .site-header{
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
background:linear-gradient(145deg,rgba(1,24,17,.96),rgba(2,13,9,.96)) !important;
box-shadow:
0 20px 60px rgba(0,0,0,.52),
inset 0 1px 0 rgba(255,255,255,.07) !important;
}
/* ===== V48: fix definitivo navbar che lampeggiava/spariva =====
La barra non è più sticky: resta su un layer fixed indipendente dal contenuto.
Il body riceve automaticamente lo spazio esatto calcolato da JavaScript,
così nessun blocco viene coperto e la grafica non cambia durante lo scroll. */
html{
scroll-padding-top:calc(var(--site-header-height,118px) + 52px);
}
body{
padding-top:calc(var(--site-header-height,118px) + 10px) !important;
}
.site-header{
position:fixed !important;
top:16px !important;
left:50% !important;
right:auto !important;
margin:0 !important;
transform:translateX(-50%) translateZ(0) !important;
-webkit-transform:translateX(-50%) translateZ(0) !important;
z-index:1000 !important;
opacity:1 !important;
visibility:visible !important;
contain:layout paint style;
isolation:isolate;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
will-change:auto;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
background:linear-gradient(145deg,rgba(1,24,17,.985),rgba(2,13,9,.985)) !important;
box-shadow:
0 20px 60px rgba(0,0,0,.52),
inset 0 1px 0 rgba(255,255,255,.07) !important;
}
/* Nessuna variazione grafica quando parte o termina uno scroll da menu. */
body.nav-programmatic-scroll .site-header{
opacity:1 !important;
visibility:visible !important;
transform:translateX(-50%) translateZ(0) !important;
-webkit-transform:translateX(-50%) translateZ(0) !important;
background:linear-gradient(145deg,rgba(1,24,17,.985),rgba(2,13,9,.985)) !important;
}
/* ===== V49: ripristino estetica originale della navbar =====
Mantiene il posizionamento fixed della V48, ma ripristina il vetro
traslucido, il bordo oro e l'ombra morbida precedenti. */
.site-header,
body.nav-programmatic-scroll .site-header{
background:linear-gradient(145deg,rgba(1,18,13,.70),rgba(3,9,7,.58)) !important;
border:1px solid rgba(255,206,77,.34) !important;
box-shadow:
0 28px 80px rgba(0,0,0,.55),
inset 0 1px 0 rgba(255,255,255,.08) !important;
backdrop-filter:blur(14px) saturate(1.25) !important;
-webkit-backdrop-filter:blur(14px) saturate(1.25) !important;
}
/* ===== V50: adattamento automatico del blocco aperto dal menu =====
JavaScript calcola lo zoom tra 90% e 68% in base all'altezza disponibile.
Lo zoom riguarda solo la sezione selezionata, non la navbar o l'intera pagina. */
.nav-auto-fit-target{
transform-origin:top center;
margin-left:auto;
margin-right:auto;
}
@media (max-width:899px){
.nav-auto-fit-target{
zoom:1 !important;
}
}
/* ===== V51: sezioni intere e leggibili senza rimpicciolimento =====
Nessuno zoom: i blocchi mantengono testi e controlli al 100%.
Su desktop il contenuto viene disposto in modo più compatto e il menu
centra il blocco nello spazio libero sotto la navbar. */
.nav-auto-fit-target{
zoom:1 !important;
transform:none !important;
margin-left:0;
margin-right:0;
}
#social,
#quotazione,
#valutazione,
#dove-siamo{
scroll-margin-top:calc(var(--site-header-height,118px) + 34px);
}
@media (min-width:1051px){
.page{
gap:30px;
}
/* Social: blocco centrato e completo nello spazio visibile */
.social-card{
min-height:min(500px,calc(100svh - var(--site-header-height,118px) - 72px));
display:grid;
place-content:center;
padding:34px 30px;
}
.social-card h2{
font-size:clamp(38px,4vw,54px);
margin:10px auto;
}
.social-card p{
font-size:17px;
line-height:1.5;
}
.social-buttons{
margin-top:22px;
}
/* Quotazioni: stessa leggibilità, ma senza spazi verticali inutili */
.metals-dashboard{
padding:24px 28px;
}
.metals-dashboard-header{
align-items:center;
margin-bottom:16px;
}
.metals-dashboard-header h2{
margin:6px 0 5px;
font-size:clamp(38px,3.25vw,50px);
}
.metals-dashboard-header p{
font-size:15px;
line-height:1.4;
}
.metals-price-grid{
gap:14px;
}
.metal-price-card{
min-height:216px;
padding:19px 20px;
border-radius:22px;
}
.metal-card-top h3{
margin-top:6px;
font-size:28px;
}
.metal-symbol{
min-width:48px;
height:48px;
border-radius:15px;
}
.metal-card-price{
margin:14px 0 11px;
font-size:clamp(44px,3.35vw,57px);
}
.metal-card-price small{
font-size:21px;
}
.metal-card-offer,
.metal-card-note{
padding:10px 12px;
font-size:12.5px;
line-height:1.35;
}
.metal-card-offer strong{
margin-bottom:3px;
font-size:13.5px;
}
.metals-update-row{
margin:14px 0;
padding:10px 2px;
font-size:14px;
}
.metals-converter{
padding:17px 20px;
border-radius:23px;
}
.converter-heading{
align-items:center;
margin-bottom:11px;
}
.converter-heading h3{
margin-top:3px;
font-size:28px;
}
.asset-switch{
gap:8px;
}
.asset-option{
min-width:108px;
padding:9px 14px;
}
.converter-body{
grid-template-columns:minmax(250px,.78fr) minmax(340px,1.22fr);
gap:20px;
}
.converter-input-block label{
margin-bottom:7px;
}
.metals-converter .converter-row{
grid-template-columns:1fr 56px;
gap:9px;
}
.metals-converter input{
padding:12px 15px;
font-size:22px;
border-radius:15px;
}
.metals-converter .unit-pill{
border-radius:15px;
font-size:20px;
}
.converter-result-block strong{
margin:1px 0 2px;
font-size:clamp(40px,4vw,55px);
}
.converter-result-block p{
font-size:12.5px;
line-height:1.35;
}
/* Valutazione: quattro passaggi visibili insieme senza zoom */
.valuation-layout{
min-height:0 !important;
grid-template-columns:320px 1fr;
column-gap:42px;
row-gap:18px !important;
padding:25px 30px 24px;
align-items:center !important;
}
.valuation-left{
gap:15px !important;
}
.valuation-brand-block{
width:270px !important;
}
.valuation-section-logo{
width:175px !important;
margin-bottom:14px !important;
}
.valuation-brand-block .label{
margin-bottom:8px;
font-size:13px;
}
.valuation-brand-block .mini-divider{
width:225px !important;
}
.valuation-copy{
max-width:310px;
}
.valuation-copy p{
font-size:16px;
line-height:1.48;
}
.valuation-title{
transform:none !important;
}
.valuation-title h2{
font-size:clamp(48px,4.4vw,64px) !important;
line-height:.98 !important;
}
.title-divider{
margin-top:18px !important;
}
.valuation-steps-grid{
gap:13px;
margin-top:0 !important;
}
.valuation-step-card{
min-height:190px;
padding:20px 18px 18px;
border-radius:22px;
}
.valuation-step-card .service-icon{
width:48px;
height:48px;
margin-bottom:14px;
border-radius:15px;
font-size:23px;
}
.valuation-step-card .step-number{
top:11px;
right:15px;
font-size:58px;
}
.valuation-step-card h3{
margin-bottom:9px;
font-size:clamp(21px,1.65vw,25px) !important;
}
.valuation-step-card p{
font-size:14.5px;
line-height:1.43;
}
.valuation-cta .primary-link{
min-width:300px;
padding:12px 22px;
font-size:16px;
}
/* Dove siamo: testo e mappa completi in una schermata */
.location-card{
padding:27px;
gap:22px;
align-items:stretch;
}
.location-info h2{
font-size:clamp(38px,3.7vw,54px);
margin:9px 0;
}
.location-info > p{
font-size:16px;
line-height:1.5;
}
.address-box{
margin:15px 0;
padding:14px;
}
.address-icon{
width:52px;
height:52px;
border-radius:16px;
}
.map-container,
.map-container iframe{
min-height:315px;
}
}
/* Su monitor desktop poco alti si riducono solo spazi e decorazioni,
non la scala del blocco né lo zoom dei testi. */
@media (min-width:1051px) and (max-height:820px){
.metals-dashboard{
padding:19px 24px;
}
.metals-dashboard-header{
margin-bottom:12px;
}
.metal-price-card{
min-height:196px;
padding:16px 18px;
}
.metal-card-price{
margin:10px 0 9px;
}
.metals-update-row{
margin:10px 0;
padding:8px 2px;
}
.metals-converter{
padding:14px 18px;
}
.valuation-layout{
padding:20px 26px;
row-gap:13px !important;
}
.valuation-section-logo{
width:155px !important;
margin-bottom:9px !important;
}
.valuation-step-card{
min-height:174px;
padding:17px 16px 15px;
}
.valuation-step-card .service-icon{
margin-bottom:10px;
}
.location-card{
padding:22px 25px;
}
.map-container,
.map-container iframe{
min-height:280px;
}
}
/* ===== V52: ordine sezioni e ripristino dimensioni Social =====
Ordine pagina/menu: Home, Quotazione, Valutazione, Social, Dove siamo.
Il blocco Social torna alle dimensioni originali, senza altezza forzata. */
@media (min-width:1051px){
.social-card{
min-height:0 !important;
display:block !important;
padding:48px 30px !important;
}
.social-card h2{
font-size:clamp(38px,5vw,64px) !important;
margin:12px auto !important;
line-height:1 !important;
}
.social-card p{
max-width:760px !important;
margin:auto !important;
font-size:18px !important;
line-height:1.65 !important;
}
.social-buttons{
margin-top:28px !important;
}
}
/* ===== V53: icone tematiche per i passaggi della valutazione ===== */
.valuation-step-card .service-icon{
color:#ffe38a;
}
.valuation-step-card .service-svg{
width:30px;
height:30px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
filter:drop-shadow(0 0 5px rgba(255,227,138,.22));
}
.valuation-step-card .service-svg-accent{
stroke:#fff2b8;
stroke-width:2.1;
}
.valuation-step-card:hover .service-svg{
filter:drop-shadow(0 0 9px rgba(255,227,138,.48));
transform:scale(1.06);
transition:transform .28s ease, filter .28s ease;
}
@media (max-width:640px){
.valuation-step-card .service-svg{width:27px;height:27px}
}
/* ===== V54: euro nel pagamento e icona calendario per la prenotazione ===== */
.valuation-step-card .payment-icon{
color:#ffe38a;
}
.valuation-step-card .payment-euro{
display:block;
font-family:Georgia,serif;
font-size:34px;
line-height:1;
font-weight:900;
color:#ffe38a;
text-shadow:0 0 10px rgba(255,227,138,.35);
transform:translateY(-1px);
transition:transform .28s ease, text-shadow .28s ease;
}
.valuation-step-card:hover .payment-euro{
transform:translateY(-1px) scale(1.08);
text-shadow:0 0 14px rgba(255,227,138,.62);
}
.valuation-booking-link{
gap:11px !important;
}
.valuation-booking-link .booking-icon{
width:23px;
height:23px;
flex:0 0 23px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
filter:drop-shadow(0 1px 0 rgba(255,255,255,.20));
transition:transform .25s ease;
}
.valuation-booking-link .booking-icon-check{
stroke-width:2.35;
}
.valuation-booking-link:hover .booking-icon{
transform:scale(1.08) rotate(-3deg);
}
@media(max-width:640px){
.valuation-step-card .payment-euro{font-size:30px}
.valuation-booking-link .booking-icon{width:21px;height:21px;flex-basis:21px}
}
/* v55 - Logo Emerald nel riquadro Dove siamo */
.address-logo-wrap{
flex:0 0 102px;
width:102px;
height:78px;
display:grid;
place-items:center;
align-self:center;
}
.address-logo{
display:block;
width:100%;
height:100%;
object-fit:contain;
filter:drop-shadow(0 0 14px rgba(0,255,160,.22)) drop-shadow(0 0 9px rgba(255,211,90,.15));
}
@media(max-width:640px){
.address-logo-wrap{
flex-basis:84px;
width:84px;
height:66px;
}
}
/* ===== V57: quotazioni semplificate, oro a sinistra e argento a destra ===== */
.simple-metals-grid{
display:grid;
grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr);
gap:18px;
align-items:stretch;
}
.simple-metal-panel{
min-width:0;
padding:24px 26px;
border-radius:25px;
border:1px solid rgba(255,211,90,.30);
background:linear-gradient(145deg,rgba(0,24,17,.90),rgba(0,8,6,.78));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 18px 42px rgba(0,0,0,.25);
transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.simple-metal-panel.active{
border-color:#e6b83f;
box-shadow:inset 0 0 0 1px rgba(255,227,138,.14),0 20px 48px rgba(0,0,0,.32),0 0 28px rgba(255,211,90,.10);
}
.silver-simple-panel{
cursor:pointer;
outline:none;
}
.silver-simple-panel:hover,
.silver-simple-panel:focus-visible{
transform:translateY(-3px);
border-color:rgba(228,239,236,.65);
box-shadow:0 20px 46px rgba(0,0,0,.32),0 0 28px rgba(224,240,235,.10);
}
.simple-panel-heading{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:20px;
}
.simple-panel-heading h3{
margin:6px 0 0;
color:#fff2c9;
font-family:Georgia,serif;
font-size:clamp(30px,3vw,42px);
line-height:1;
}
.silver-eyebrow{color:#dce8e4}
.gold-karat-switch{
display:inline-flex;
gap:6px;
padding:5px;
border-radius:999px;
border:1px solid rgba(255,211,90,.30);
background:rgba(0,0,0,.24);
}
.gold-karat-option{
min-width:76px;
padding:11px 18px;
border:0;
border-radius:999px;
background:transparent;
color:#fff7df;
font-weight:1000;
cursor:pointer;
transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.gold-karat-option:hover{background:rgba(255,211,90,.10)}
.gold-karat-option.active{
color:#1b1101;
background:linear-gradient(135deg,#ffd45f,#a97918);
box-shadow:0 8px 22px rgba(0,0,0,.25);
}
.gold-view[hidden]{display:none !important}
.gold-view.active{display:block}
.simple-price-label{
display:block;
color:#e9dfc3;
font-size:14px;
font-weight:800;
letter-spacing:.3px;
}
.simple-main-price{
margin:10px 0 16px;
color:#ffe38a;
font-family:Georgia,serif;
font-size:clamp(56px,5vw,78px);
font-weight:800;
line-height:.95;
white-space:nowrap;
text-shadow:0 0 28px rgba(255,211,90,.20);
}
.simple-main-price small{
color:#fff7df;
font-size:24px;
}
.simple-main-price.silver-price{
color:#edf5f2;
text-shadow:0 0 24px rgba(224,240,235,.15);
}
.simple-offer-box,
.simple-note-box{
min-height:74px;
display:flex;
flex-direction:column;
justify-content:center;
}
.calculator-toggle-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin-top:18px;
}
.calculator-toggle-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
min-width:220px;
padding:13px 22px;
border:1px solid rgba(255,227,138,.55);
border-radius:16px;
color:#160f03;
background:linear-gradient(135deg,#ffd45f,#a97918);
font-weight:1000;
cursor:pointer;
box-shadow:0 10px 28px rgba(0,0,0,.24);
transition:transform .2s ease,box-shadow .2s ease;
}
.calculator-toggle-button:hover{
transform:translateY(-2px);
box-shadow:0 14px 34px rgba(0,0,0,.30),0 0 22px rgba(255,211,90,.12);
}
.calculator-current{
color:#e9dfc3;
font-size:14px;
}
.calculator-current strong{color:#ffe38a}
.metals-converter.is-collapsed{display:none}
.metals-converter:not(.is-collapsed){margin-top:16px}
.simple-converter-heading{margin-bottom:12px}
@media (min-width:1051px){
.metals-dashboard{padding:24px 28px}
.metals-dashboard-header{margin-bottom:16px}
.simple-metal-panel{min-height:270px}
.metals-update-row{margin:14px 0 0}
}
@media (max-width:1050px){
.simple-metals-grid{grid-template-columns:1fr}
.simple-metal-panel{min-height:0}
}
@media (max-width:700px){
.simple-metal-panel{padding:20px}
.simple-panel-heading{align-items:flex-start;flex-direction:column}
.gold-karat-switch{width:100%}
.gold-karat-option{flex:1}
.simple-main-price{font-size:56px}
.calculator-toggle-row{align-items:flex-start;flex-direction:column}
.calculator-toggle-button{width:100%}
.calculator-current{width:100%}
}
/* ===== V58: blocco quotazioni compatto + bordi oro/argento distinti ===== */
.gold-simple-panel{
border:1.5px solid rgba(231,181,48,.88);
box-shadow:
inset 0 1px 0 rgba(255,245,196,.08),
0 18px 42px rgba(0,0,0,.25),
0 0 24px rgba(226,169,34,.08);
}
.gold-simple-panel.active{
border-color:#ffd45f;
box-shadow:
inset 0 0 0 1px rgba(255,232,151,.14),
0 20px 48px rgba(0,0,0,.30),
0 0 30px rgba(255,202,61,.18);
}
.silver-simple-panel{
border:1.5px solid rgba(218,230,233,.82);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 18px 42px rgba(0,0,0,.25),
0 0 24px rgba(210,226,230,.08);
}
.silver-simple-panel:hover,
.silver-simple-panel:focus-visible,
.silver-simple-panel.active{
border-color:#edf5f6;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.14),
0 20px 48px rgba(0,0,0,.30),
0 0 32px rgba(218,235,238,.20);
}
@media (min-width:1051px){
/* Il riquadro principale torna a stare nello schermo senza zoomare i testi. */
#quotazione.metals-dashboard{
padding:17px 22px 18px;
}
#quotazione .metals-dashboard-header{
margin-bottom:10px;
gap:16px;
}
#quotazione .metals-dashboard-header h2{
margin:4px 0 3px;
font-size:clamp(36px,3vw,46px);
line-height:1;
}
#quotazione .metals-dashboard-header p{
margin:0;
font-size:14px;
line-height:1.35;
}
#quotazione .simple-metals-grid{
gap:14px;
}
#quotazione .simple-metal-panel{
min-height:220px;
padding:17px 19px;
border-radius:23px;
}
#quotazione .simple-panel-heading{
margin-bottom:10px;
}
#quotazione .simple-panel-heading h3{
margin-top:4px;
font-size:clamp(29px,2.5vw,36px);
}
#quotazione .gold-karat-switch{
padding:4px;
}
#quotazione .gold-karat-option{
min-width:66px;
padding:9px 15px;
}
#quotazione .simple-main-price{
margin:7px 0 10px;
font-size:clamp(52px,4.2vw,66px);
}
#quotazione .simple-main-price small{
font-size:21px;
}
#quotazione .simple-offer-box,
#quotazione .simple-note-box{
min-height:56px;
padding:9px 12px;
font-size:12.5px;
line-height:1.35;
}
#quotazione .metals-update-row{
margin:10px 0 0;
padding:8px 1px;
font-size:13px;
}
#quotazione .calculator-toggle-row{
margin-top:9px;
}
#quotazione .calculator-toggle-button{
min-width:205px;
padding:10px 18px;
}
#quotazione .metals-converter:not(.is-collapsed){
margin-top:9px;
padding:12px 16px;
border-radius:20px;
}
#quotazione .simple-converter-heading{
margin-bottom:7px;
}
#quotazione .converter-heading h3{
margin-top:2px;
font-size:24px;
}
#quotazione .converter-body{
grid-template-columns:minmax(250px,.8fr) minmax(320px,1.2fr);
gap:16px;
}
#quotazione .converter-input-block label{
margin-bottom:5px;
}
#quotazione .metals-converter .converter-row{
grid-template-columns:1fr 52px;
gap:8px;
}
#quotazione .metals-converter input{
padding:9px 13px;
font-size:20px;
border-radius:14px;
}
#quotazione .metals-converter .unit-pill{
border-radius:14px;
font-size:18px;
}
#quotazione .converter-result-block strong{
font-size:clamp(36px,3.5vw,48px);
margin:0;
}
#quotazione .converter-result-block p{
margin:1px 0 0;
font-size:12px;
line-height:1.25;
}
}
/* ===== V59: calcolatore solo 18K/argento + icona calcolatrice ===== */
.calculator-toggle-icon{
width:22px;
height:22px;
flex:0 0 22px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.calculator-toggle-icon path{
stroke-width:3.2;
}
@media (min-width:1051px){
#quotazione .gold-view[data-gold-view="gold24"],
#quotazione .silver-simple-panel{
display:flex;
flex-direction:column;
}
#quotazione .gold-view[data-gold-view="gold24"] .simple-main-price,
#quotazione .silver-simple-panel .simple-main-price{
margin-bottom:0;
}
}
/* ===== V60: selezione Oro/Argento direttamente nel calcolatore ===== */
.calculator-toggle-row{
justify-content:flex-start;
}
.calculator-asset-switch{
margin-left:auto;
}
.calculator-asset-option{
min-width:140px;
}
.calculator-asset-option.silver-calculator-option.active{
color:#12201d;
border-color:rgba(235,245,242,.9);
background:linear-gradient(135deg,#f2f7f5,#9eafab);
box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 20px rgba(225,240,236,.14);
}
.silver-simple-panel{
cursor:default;
}
.silver-simple-panel:hover,
.silver-simple-panel:focus-visible{
transform:none;
}
@media(max-width:1050px){
.calculator-asset-switch{
margin-left:0;
}
}
@media(max-width:700px){
.calculator-asset-switch{
display:grid;
grid-template-columns:1fr 1fr;
}
.calculator-asset-option{
min-width:0;
}
}
/* ===== V61: calcolatore più raccolto + apertura/chiusura morbida ===== */
/* Il pannello resta nel flusso durante la transizione: niente più apertura a scatto. */
.metals-converter{
display:block;
overflow:hidden;
max-height:620px;
opacity:1;
transform:translateY(0) scale(1);
transform-origin:top center;
transition:
max-height .42s cubic-bezier(.22,1,.36,1),
opacity .24s ease,
transform .34s cubic-bezier(.22,1,.36,1),
margin-top .34s ease,
padding-top .34s ease,
padding-bottom .34s ease,
border-color .25s ease,
box-shadow .34s ease;
will-change:max-height,opacity,transform;
}
.metals-converter.is-collapsed{
display:block !important;
max-height:0;
opacity:0;
transform:translateY(-9px) scale(.995);
margin-top:0 !important;
padding-top:0 !important;
padding-bottom:0 !important;
border-color:transparent !important;
box-shadow:none !important;
pointer-events:none;
}
.metals-converter:not(.is-collapsed){
max-height:620px;
}
@media (min-width:1051px){
/* Contenuti raccolti al centro: grammi e risultato restano visivamente vicini. */
#quotazione .simple-converter-heading,
#quotazione .converter-body{
width:min(100%,920px);
margin-left:auto;
margin-right:auto;
}
#quotazione .simple-converter-heading{
align-items:center;
}
#quotazione .converter-body{
grid-template-columns:minmax(330px,1.05fr) minmax(300px,.95fr);
gap:20px;
align-items:stretch;
}
#quotazione .converter-input-block{
align-self:end;
}
#quotazione .converter-result-block{
display:flex;
flex-direction:column;
justify-content:flex-end;
text-align:left;
padding-left:22px;
border-left:1px solid rgba(255,211,90,.22);
}
#quotazione .converter-result-block p{
margin-left:0;
max-width:100%;
}
}
@media (max-width:1050px){
.metals-converter:not(.is-collapsed){
max-height:900px;
}
}
@media (prefers-reduced-motion:reduce){
.metals-converter{
transition:none;
}
}
/* ===== V62: calcolatore allineato a sinistra + selezione materiale più evidente ===== */
@media (min-width:1051px){
/* Il contenuto del calcolatore parte più vicino al bordo sinistro del pannello. */
#quotazione .simple-converter-heading,
#quotazione .converter-body{
width:min(100%,980px);
margin-left:0;
margin-right:auto;
}
/* Il titolo resta a sinistra, mentre i pulsanti Oro/Argento sono centrati nel pannello. */
#quotazione .simple-converter-heading{
position:relative;
display:grid;
grid-template-columns:minmax(250px,1fr) auto minmax(250px,1fr);
align-items:center;
gap:18px;
}
#quotazione .simple-converter-heading > div:first-child{
grid-column:1;
}
#quotazione .calculator-asset-switch{
grid-column:2;
justify-self:center;
margin-left:0;
}
}
/* Il riquadro selezionato rimane chiaramente riconoscibile. */
.gold-simple-panel.active{
border-color:#ffe38a;
box-shadow:
inset 0 0 0 1px rgba(255,246,203,.24),
inset 0 0 34px rgba(255,199,49,.08),
0 20px 48px rgba(0,0,0,.30),
0 0 18px rgba(255,213,85,.48),
0 0 48px rgba(255,186,31,.24);
}
.silver-simple-panel.active{
border-color:#f5fbfa;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.28),
inset 0 0 34px rgba(225,240,238,.08),
0 20px 48px rgba(0,0,0,.30),
0 0 18px rgba(229,244,242,.50),
0 0 48px rgba(189,217,214,.24);
}
/* Un breve impulso luminoso conferma il click senza appesantire l'interfaccia. */
.gold-simple-panel.selection-flash{
animation:goldMetalSelectionFlash .72s cubic-bezier(.22,1,.36,1);
}
.silver-simple-panel.selection-flash{
animation:silverMetalSelectionFlash .72s cubic-bezier(.22,1,.36,1);
}
@keyframes goldMetalSelectionFlash{
0%{box-shadow:0 18px 42px rgba(0,0,0,.25),0 0 0 rgba(255,211,90,0)}
45%{box-shadow:inset 0 0 0 1px rgba(255,250,218,.34),0 20px 50px rgba(0,0,0,.30),0 0 30px rgba(255,222,115,.72),0 0 72px rgba(255,181,24,.35)}
100%{box-shadow:inset 0 0 0 1px rgba(255,246,203,.24),inset 0 0 34px rgba(255,199,49,.08),0 20px 48px rgba(0,0,0,.30),0 0 18px rgba(255,213,85,.48),0 0 48px rgba(255,186,31,.24)}
}
@keyframes silverMetalSelectionFlash{
0%{box-shadow:0 18px 42px rgba(0,0,0,.25),0 0 0 rgba(230,244,242,0)}
45%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),0 20px 50px rgba(0,0,0,.30),0 0 30px rgba(240,251,249,.75),0 0 72px rgba(180,215,211,.35)}
100%{box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 0 34px rgba(225,240,238,.08),0 20px 48px rgba(0,0,0,.30),0 0 18px rgba(229,244,242,.50),0 0 48px rgba(189,217,214,.24)}
}
@media (max-width:1050px){
#quotazione .calculator-asset-switch{
justify-self:center;
margin-left:auto;
margin-right:auto;
}
}
@media (prefers-reduced-motion:reduce){
.gold-simple-panel.selection-flash,
.silver-simple-panel.selection-flash{
animation:none;
}
}
/* ===== V63: selezione metallo più morbida e spazio destro valorizzato ===== */
/* Il bagliore sale gradualmente e termina nello stesso stato luminoso persistente. */
.gold-simple-panel.active{
border-color:#ffe9a0;
box-shadow:
inset 0 0 0 1px rgba(255,247,211,.28),
inset 0 0 38px rgba(255,199,49,.10),
0 20px 48px rgba(0,0,0,.30),
0 0 22px rgba(255,217,100,.55),
0 0 58px rgba(255,184,25,.28);
transition:border-color .55s ease,box-shadow .75s ease,transform .45s ease;
}
.silver-simple-panel.active{
border-color:#f7fffd;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.31),
inset 0 0 38px rgba(225,240,238,.11),
0 20px 48px rgba(0,0,0,.30),
0 0 22px rgba(235,249,247,.57),
0 0 58px rgba(183,216,212,.29);
transition:border-color .55s ease,box-shadow .75s ease,transform .45s ease;
}
.gold-simple-panel.selection-flash{
animation:goldMetalSelectionSoft 1.6s cubic-bezier(.16,1,.3,1);
}
.silver-simple-panel.selection-flash{
animation:silverMetalSelectionSoft 1.6s cubic-bezier(.16,1,.3,1);
}
@keyframes goldMetalSelectionSoft{
0%{
border-color:rgba(231,181,48,.88);
box-shadow:0 18px 42px rgba(0,0,0,.25),0 0 0 rgba(255,211,90,0);
}
42%{
border-color:#fff2bb;
box-shadow:inset 0 0 0 1px rgba(255,250,218,.38),0 20px 50px rgba(0,0,0,.30),0 0 34px rgba(255,226,128,.75),0 0 78px rgba(255,181,24,.38);
}
100%{
border-color:#ffe9a0;
box-shadow:inset 0 0 0 1px rgba(255,247,211,.28),inset 0 0 38px rgba(255,199,49,.10),0 20px 48px rgba(0,0,0,.30),0 0 22px rgba(255,217,100,.55),0 0 58px rgba(255,184,25,.28);
}
}
@keyframes silverMetalSelectionSoft{
0%{
border-color:rgba(218,230,233,.82);
box-shadow:0 18px 42px rgba(0,0,0,.25),0 0 0 rgba(230,244,242,0);
}
42%{
border-color:#ffffff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),0 20px 50px rgba(0,0,0,.30),0 0 34px rgba(244,255,253,.78),0 0 78px rgba(178,216,212,.38);
}
100%{
border-color:#f7fffd;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.31),inset 0 0 38px rgba(225,240,238,.11),0 20px 48px rgba(0,0,0,.30),0 0 22px rgba(235,249,247,.57),0 0 58px rgba(183,216,212,.29);
}
}
.converter-layout{
display:grid;
gap:18px;
align-items:stretch;
}
.converter-help-card{
min-width:0;
display:flex;
flex-direction:column;
justify-content:center;
gap:10px;
padding:17px 18px;
border:1px solid rgba(255,211,90,.28);
border-radius:18px;
background:
radial-gradient(circle at 86% 14%,rgba(255,211,90,.11),transparent 38%),
linear-gradient(145deg,rgba(7,48,34,.72),rgba(0,17,12,.82));
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 12px 30px rgba(0,0,0,.20);
}
.converter-help-icon{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:13px;
color:#ffe38a;
background:linear-gradient(145deg,rgba(0,181,120,.85),rgba(0,100,72,.78));
box-shadow:0 8px 20px rgba(0,0,0,.22),0 0 18px rgba(0,217,145,.12);
}
.converter-help-icon svg{
width:25px;
height:25px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.converter-help-copy span{
display:block;
color:#ffd45f;
font-size:11px;
font-weight:900;
letter-spacing:1.2px;
text-transform:uppercase;
}
.converter-help-copy strong{
display:block;
margin-top:3px;
color:#fff3cf;
font-family:Georgia,serif;
font-size:20px;
line-height:1.08;
}
.converter-help-copy p{
margin:6px 0 0;
color:#e9dfc3;
font-size:12.5px;
line-height:1.4;
}
.converter-help-link{
align-self:flex-start;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:9px 15px;
border:1px solid rgba(255,235,167,.60);
border-radius:12px;
color:#171004;
background:linear-gradient(135deg,#ffd45f,#af7d1c);
font-size:12px;
font-weight:1000;
text-decoration:none;
box-shadow:0 8px 20px rgba(0,0,0,.22);
transition:transform .22s ease,box-shadow .22s ease;
}
.converter-help-link:hover{
transform:translateY(-2px);
box-shadow:0 12px 25px rgba(0,0,0,.26),0 0 20px rgba(255,211,90,.12);
}
@media (min-width:1051px){
#quotazione .converter-layout{
grid-template-columns:minmax(0,980px) minmax(230px,1fr);
}
#quotazione .converter-layout .converter-body{
width:100%;
margin:0;
}
}
@media (max-width:1050px){
.converter-layout{grid-template-columns:1fr}
.converter-help-card{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
}
}
@media (max-width:700px){
.converter-help-card{
display:flex;
align-items:flex-start;
}
.converter-help-link{width:100%}
}
@media (prefers-reduced-motion:reduce){
.gold-simple-panel.selection-flash,
.silver-simple-panel.selection-flash{
animation:none;
}
}
/* ===== V64: logo nel calcolatore + glow metalli più elegante ===== */
@media (min-width:1051px){
#quotazione .converter-layout{
grid-template-columns:minmax(0,1fr) 220px;
gap:22px;
align-items:center;
}
#quotazione .converter-layout .converter-body{
width:100%;
margin:0;
}
}
.converter-logo-card{
min-width:0;
min-height:100%;
display:flex;
align-items:center;
justify-content:center;
padding:16px 10px;
border:1px solid rgba(255,211,90,.22);
border-radius:22px;
background:
radial-gradient(circle at 50% 38%, rgba(255,211,90,.14), transparent 40%),
radial-gradient(circle at 50% 78%, rgba(0,180,120,.10), transparent 45%),
linear-gradient(145deg, rgba(6,34,25,.76), rgba(0,14,10,.84));
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.22);
}
.converter-side-logo{
display:block;
width:min(100%, 170px);
height:auto;
object-fit:contain;
filter:drop-shadow(0 0 18px rgba(255,211,90,.14));
}
@media (max-width:1050px){
.converter-logo-card{
min-height:auto;
padding:14px;
}
.converter-side-logo{
width:min(100%, 140px);
}
}
.gold-simple-panel.active{
border-color:#ffefaf;
box-shadow:
inset 0 0 0 1px rgba(255,249,222,.30),
inset 0 0 42px rgba(255,203,62,.12),
0 22px 54px rgba(0,0,0,.30),
0 0 28px rgba(255,221,118,.62),
0 0 68px rgba(255,188,32,.34);
transition:border-color .65s ease, box-shadow .95s ease, transform .45s ease;
}
.silver-simple-panel.active{
border-color:#fbffff;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.34),
inset 0 0 42px rgba(231,243,241,.12),
0 22px 54px rgba(0,0,0,.30),
0 0 28px rgba(238,250,248,.64),
0 0 68px rgba(189,221,217,.33);
transition:border-color .65s ease, box-shadow .95s ease, transform .45s ease;
}
.gold-simple-panel.selection-flash{
animation:goldMetalSelectionDeluxe 2.35s cubic-bezier(.16,1,.3,1);
}
.silver-simple-panel.selection-flash{
animation:silverMetalSelectionDeluxe 2.35s cubic-bezier(.16,1,.3,1);
}
@keyframes goldMetalSelectionDeluxe{
0%{
border-color:rgba(232,181,49,.86);
box-shadow:0 18px 42px rgba(0,0,0,.25), 0 0 0 rgba(255,211,90,0);
}
28%{
border-color:#fff0b2;
box-shadow:inset 0 0 0 1px rgba(255,251,228,.40), 0 20px 50px rgba(0,0,0,.30), 0 0 24px rgba(255,226,128,.62), 0 0 56px rgba(255,181,24,.24);
}
62%{
border-color:#fff5c9;
box-shadow:inset 0 0 0 1px rgba(255,252,232,.46), inset 0 0 48px rgba(255,208,78,.16), 0 22px 54px rgba(0,0,0,.30), 0 0 36px rgba(255,232,146,.88), 0 0 88px rgba(255,190,35,.42);
}
100%{
border-color:#ffefaf;
box-shadow:inset 0 0 0 1px rgba(255,249,222,.30), inset 0 0 42px rgba(255,203,62,.12), 0 22px 54px rgba(0,0,0,.30), 0 0 28px rgba(255,221,118,.62), 0 0 68px rgba(255,188,32,.34);
}
}
@keyframes silverMetalSelectionDeluxe{
0%{
border-color:rgba(214,228,230,.84);
box-shadow:0 18px 42px rgba(0,0,0,.25), 0 0 0 rgba(230,244,242,0);
}
28%{
border-color:#f8fffe;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.44), 0 20px 50px rgba(0,0,0,.30), 0 0 24px rgba(242,253,251,.66), 0 0 56px rgba(185,219,215,.25);
}
62%{
border-color:#ffffff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.48), inset 0 0 48px rgba(234,244,242,.16), 0 22px 54px rgba(0,0,0,.30), 0 0 36px rgba(246,255,254,.90), 0 0 88px rgba(187,220,216,.42);
}
100%{
border-color:#fbffff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), inset 0 0 42px rgba(231,243,241,.12), 0 22px 54px rgba(0,0,0,.30), 0 0 28px rgba(238,250,248,.64), 0 0 68px rgba(189,221,217,.33);
}
}
@media (prefers-reduced-motion:reduce){
.gold-simple-panel.selection-flash,
.silver-simple-panel.selection-flash{
animation:none;
}
}
/* ===== V64.1: dissolvenza morbida tra oro e argento ===== */
.gold-simple-panel.selection-fade{
animation:goldMetalFadeOut 1.15s ease-out;
}
.silver-simple-panel.selection-fade{
animation:silverMetalFadeOut 1.15s ease-out;
}
@keyframes goldMetalFadeOut{
0%{
border-color:#ffefaf;
box-shadow:inset 0 0 0 1px rgba(255,249,222,.30), inset 0 0 42px rgba(255,203,62,.12), 0 22px 54px rgba(0,0,0,.30), 0 0 28px rgba(255,221,118,.62), 0 0 68px rgba(255,188,32,.34);
}
100%{
border-color:rgba(255,206,77,.34);
box-shadow:0 20px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
}
@keyframes silverMetalFadeOut{
0%{
border-color:#fbffff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.34), inset 0 0 42px rgba(231,243,241,.12), 0 22px 54px rgba(0,0,0,.30), 0 0 28px rgba(238,250,248,.64), 0 0 68px rgba(189,221,217,.33);
}
100%{
border-color:rgba(255,255,255,.22);
box-shadow:0 20px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
}
@media (prefers-reduced-motion:reduce){
.gold-simple-panel.selection-fade,
.silver-simple-panel.selection-fade{
animation:none;
}
}
/* ===== V64: logo nel calcolatore + bagliore persistente e morbido ===== */
/* Il materiale selezionato non lampeggia: resta riconoscibile con un respiro luminoso lento. */
.gold-simple-panel.active{
border-color:#ffe791;
animation:goldSelectedBreath 3.8s ease-in-out infinite alternate;
}
.silver-simple-panel.active{
border-color:#f4fbfa;
animation:silverSelectedBreath 3.8s ease-in-out infinite alternate;
}
.gold-simple-panel.selection-flash,
.silver-simple-panel.selection-flash{
animation:none !important;
}
@keyframes goldSelectedBreath{
from{
box-shadow:
inset 0 0 0 1px rgba(255,247,211,.22),
inset 0 0 30px rgba(255,199,49,.07),
0 18px 44px rgba(0,0,0,.28),
0 0 16px rgba(255,217,100,.40),
0 0 40px rgba(255,184,25,.18);
}
to{
box-shadow:
inset 0 0 0 1px rgba(255,250,222,.34),
inset 0 0 42px rgba(255,199,49,.12),
0 20px 50px rgba(0,0,0,.30),
0 0 27px rgba(255,224,130,.64),
0 0 66px rgba(255,184,25,.31);
}
}
@keyframes silverSelectedBreath{
from{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.22),
inset 0 0 30px rgba(225,240,238,.07),
0 18px 44px rgba(0,0,0,.28),
0 0 16px rgba(235,249,247,.42),
0 0 40px rgba(183,216,212,.18);
}
to{
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.36),
inset 0 0 42px rgba(225,240,238,.13),
0 20px 50px rgba(0,0,0,.30),
0 0 27px rgba(244,255,253,.66),
0 0 66px rgba(183,216,212,.31);
}
}
/* Anche il pulsante selezionato resta acceso in modo stabile. */
.calculator-asset-option.active{
transition:background .55s ease,border-color .55s ease,box-shadow .75s ease,transform .35s ease;
box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 24px rgba(255,211,90,.30);
}
.calculator-asset-option.silver-calculator-option.active{
box-shadow:0 10px 28px rgba(0,0,0,.24),0 0 24px rgba(225,240,236,.30);
}
/* Il vecchio riquadro promozionale lascia posto al marchio. */
.converter-logo-card{
min-width:0;
min-height:155px;
display:flex;
align-items:center;
justify-content:center;
padding:10px 14px;
border:0;
border-radius:22px;
background:radial-gradient(circle at 50% 50%,rgba(0,179,119,.09),transparent 64%);
}
.converter-side-logo{
display:block;
width:min(100%,255px);
max-height:185px;
object-fit:contain;
filter:drop-shadow(0 15px 26px rgba(0,0,0,.34)) drop-shadow(0 0 22px rgba(0,207,137,.16));
opacity:.98;
}
@media (min-width:1051px){
#quotazione .converter-layout{
grid-template-columns:minmax(0,1fr) 285px;
gap:22px;
align-items:center;
}
#quotazione .converter-layout .converter-body{
width:100%;
max-width:none;
margin:0;
grid-template-columns:minmax(300px,.95fr) minmax(275px,.75fr);
gap:18px;
}
}
@media (max-width:1050px){
.converter-logo-card{
min-height:120px;
}
.converter-side-logo{
width:min(100%,210px);
max-height:145px;
}
}
@media (max-width:700px){
.converter-logo-card{
display:none;
}
}
@media (prefers-reduced-motion:reduce){
.gold-simple-panel.active,
.silver-simple-panel.active{
animation:none;
}
}
/* ===== V65: calcolatore più compatto, senza blocco laterale ===== */
.converter-logo-card{display:none !important;}
@media (min-width:1051px){
#quotazione .converter-layout{
display:block;
}
#quotazione .simple-converter-heading,
#quotazione .converter-layout .converter-body{
width:min(100%, 980px);
margin-left:auto;
margin-right:auto;
}
#quotazione .simple-converter-heading{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
align-items:end;
column-gap:28px;
}
#quotazione .simple-converter-heading > div:first-child{
grid-column:1;
}
#quotazione .calculator-asset-switch{
grid-column:2;
justify-self:center;
align-self:center;
margin-left:0;
}
#quotazione .converter-layout .converter-body{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:28px;
align-items:end;
}
#quotazione .converter-input-block{
width:100%;
}
#quotazione .converter-result-block{
min-width:0;
padding-left:24px;
border-left:1px solid rgba(255,211,90,.28);
display:flex;
flex-direction:column;
justify-content:flex-end;
align-self:end;
text-align:left;
}
}
@media (max-width:1050px){
#quotazione .calculator-asset-switch{
margin-left:auto;
margin-right:auto;
}
}
/* Dissolvenza più gradevole del riquadro non più selezionato */
.gold-simple-panel.selection-fade{
animation:goldMetalFadeOut 1.4s ease-out;
}
.silver-simple-panel.selection-fade{
animation:silverMetalFadeOut 1.4s ease-out;
}
/* ===== V66: rimozione definitiva del riquadro promozionale dal calcolatore ===== */
.converter-help-card,
.converter-logo-card{display:none !important;}
@media (min-width:1051px){
#quotazione .converter-layout{display:block !important;}
#quotazione .converter-layout .converter-body{
width:min(100%,980px);
margin-left:auto;
margin-right:auto;
}
}
/* ===== V67: testo quotazioni semplificato + selettore calcolatore più centrato ===== */
@media (min-width:1051px){
/* Sposto leggermente a sinistra il selettore Oro/Argento per allinearlo meglio alla linea del risultato. */
#quotazione .calculator-asset-switch{
justify-self:start;
margin-left:-54px;
}
}
@media (max-width:1050px){
#quotazione .calculator-asset-switch{
margin-left:auto;
margin-right:auto;
}
}
/* ===== V68: ottimizzazione mobile completa ===== */
.mobile-menu-toggle{
display:none;
}
@media (max-width:700px){
html{
scroll-padding-top:calc(var(--site-header-height,64px) + 24px);
}
body{
padding-top:calc(var(--site-header-height,64px) + 18px) !important;
padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));
}
.site-header,
body.nav-programmatic-scroll .site-header{
top:max(8px,env(safe-area-inset-top,0px)) !important;
width:calc(100% - 20px) !important;
min-height:62px !important;
padding:8px 10px !important;
border-radius:20px !important;
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
contain:none !important;
overflow:visible !important;
}
.site-header .brand{
min-width:0;
flex:1 1 auto !important;
gap:9px !important;
}
.site-header .brand-logo-img{
width:58px !important;
height:44px !important;
max-height:44px !important;
flex:0 0 58px;
padding:2px !important;
border-radius:12px !important;
}
.site-header .brand > div{
min-width:0;
}
.site-header .brand h1{
overflow:hidden;
margin:0 !important;
font-size:19px !important;
line-height:1.05;
white-space:nowrap;
text-overflow:ellipsis;
}
.site-header .brand p{
display:none !important;
}
.mobile-menu-toggle{
position:relative;
z-index:2;
flex:0 0 46px;
width:46px;
height:46px;
display:grid;
place-content:center;
gap:5px;
padding:0;
border:1px solid rgba(255,211,90,.42);
border-radius:14px;
color:#ffe38a;
background:rgba(255,255,255,.055);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.mobile-menu-toggle span{
display:block;
width:21px;
height:2px;
border-radius:999px;
background:currentColor;
transform-origin:center;
transition:transform .22s ease,opacity .18s ease;
}
.site-header.menu-open .mobile-menu-toggle span:nth-child(1){
transform:translateY(7px) rotate(45deg);
}
.site-header.menu-open .mobile-menu-toggle span:nth-child(2){
opacity:0;
}
.site-header.menu-open .mobile-menu-toggle span:nth-child(3){
transform:translateY(-7px) rotate(-45deg);
}
.site-header .nav-links{
position:absolute !important;
top:calc(100% + 8px);
left:0;
right:0;
z-index:1;
width:100% !important;
display:none !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px !important;
padding:10px;
border:1px solid rgba(255,206,77,.34);
border-radius:18px;
background:linear-gradient(145deg,rgba(1,24,17,.985),rgba(2,13,9,.985));
box-shadow:0 22px 50px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.07);
backdrop-filter:blur(16px) saturate(1.2);
-webkit-backdrop-filter:blur(16px) saturate(1.2);
}
.site-header.menu-open .nav-links{
display:grid !important;
}
.site-header .nav-links a{
min-width:0 !important;
min-height:44px;
display:flex !important;
align-items:center;
justify-content:center;
padding:10px 8px !important;
border:1px solid rgba(255,255,255,.055);
border-radius:12px !important;
text-align:center;
font-size:14px;
line-height:1.15;
background:rgba(255,255,255,.04);
transform:none !important;
}
.site-header .nav-links a:last-child{
grid-column:1 / -1;
}
.site-header .nav-links a.active{
color:#1a1102;
border-color:rgba(255,225,126,.72);
background:linear-gradient(135deg,#ffd45f,#a97918);
box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.page{
width:calc(100% - 20px) !important;
margin:12px auto 22px !important;
gap:18px !important;
}
#quotazione,
#valutazione,
#social,
#dove-siamo{
scroll-margin-top:calc(var(--site-header-height,64px) + 24px) !important;
}
#quotazione.metals-dashboard{
padding:20px 16px 18px !important;
border-radius:24px !important;
}
#quotazione .metals-dashboard-header{
gap:12px !important;
margin-bottom:18px !important;
}
#quotazione .metals-dashboard-header h2{
margin:5px 0 7px;
font-size:clamp(31px,9vw,38px);
line-height:1.02;
}
#quotazione .metals-dashboard-header p{
font-size:14px;
line-height:1.45;
}
#quotazione .live-badge{
padding:7px 10px;
font-size:12px;
}
#quotazione .simple-metals-grid{
gap:12px;
}
#quotazione .simple-metal-panel{
padding:18px 16px;
border-radius:20px;
}
#quotazione .simple-panel-heading{
gap:12px;
margin-bottom:14px;
}
#quotazione .simple-panel-heading h3{
font-size:30px;
}
#quotazione .gold-karat-switch{
max-width:100%;
}
#quotazione .gold-karat-option{
min-height:42px;
padding:9px 12px;
}
#quotazione .simple-main-price{
max-width:100%;
margin:8px 0 14px;
font-size:clamp(43px,14vw,56px);
}
#quotazione .simple-main-price small{
font-size:20px;
}
#quotazione .simple-offer-box,
#quotazione .simple-note-box{
min-height:0;
padding:11px 12px;
}
#quotazione .metals-update-row{
margin:14px 0 0;
padding:12px 1px;
gap:5px;
font-size:12px;
line-height:1.4;
}
#quotazione .calculator-toggle-row{
margin-top:12px;
}
#quotazione .calculator-toggle-button{
min-height:46px;
border-radius:13px;
}
.valuation-layout{
padding:24px 16px 20px !important;
row-gap:20px !important;
}
.valuation-left{
gap:14px !important;
}
.valuation-section-logo{
width:min(74vw,210px) !important;
margin-bottom:18px !important;
}
.valuation-title h2{
font-size:clamp(34px,10vw,42px) !important;
}
.valuation-steps-grid{
gap:12px !important;
}
.valuation-step-card{
padding:20px 18px !important;
border-radius:20px !important;
}
.valuation-step-card .service-icon{
width:52px;
height:52px;
margin-bottom:18px;
border-radius:16px;
}
.valuation-step-card h3{
font-size:clamp(22px,6.1vw,25px) !important;
line-height:1.08;
}
.valuation-step-card:last-child h3{
white-space:nowrap;
}
.valuation-step-card p,
.valuation-copy p{
font-size:15px !important;
line-height:1.5 !important;
}
.valuation-step-card .step-number{
top:10px;
right:14px;
font-size:64px !important;
}
.valuation-cta .primary-link{
min-height:48px;
padding:12px 14px;
border-radius:13px;
font-size:14px;
}
.social-card,
.location-card{
padding:24px 16px !important;
border-radius:24px !important;
}
.social-card h2,
.location-info h2{
font-size:clamp(32px,9vw,40px) !important;
line-height:1.02;
}
.social-card p,
.location-info p{
font-size:15px;
line-height:1.5;
}
.social-buttons{
gap:10px;
margin-top:20px;
}
.instagram-button,
.facebook-button,
.maps-button{
width:100%;
min-height:46px;
justify-content:center;
padding:12px 14px;
border-radius:13px;
}
.location-card{
gap:18px;
}
.address-box{
align-items:center;
gap:12px;
margin:16px 0;
padding:13px;
border-radius:17px;
}
.address-logo-wrap{
flex-basis:72px;
width:72px;
height:56px;
}
.address-box p{
font-size:13px;
line-height:1.35;
}
.map-container,
.map-container iframe{
min-height:250px !important;
height:250px !important;
border-radius:18px;
}
.whatsapp-button{
left:auto !important;
right:max(12px,env(safe-area-inset-right,0px)) !important;
bottom:max(12px,env(safe-area-inset-bottom,0px)) !important;
width:56px;
height:56px;
min-width:56px;
padding:0 !important;
justify-content:center !important;
gap:0 !important;
border-radius:50% !important;
animation:none !important;
box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 24px rgba(0,255,126,.34) !important;
}
.whatsapp-button > span:last-child{
display:none !important;
}
.whatsapp-circle{
width:42px;
height:42px;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.88),0 0 16px rgba(0,255,126,.28);
}
.whatsapp-circle svg{
width:28px;
height:28px;
}
.site-footer{
width:calc(100% - 90px);
margin:14px auto 0;
font-size:12px;
line-height:1.4;
}
}
@media (max-width:360px){
.site-header .brand h1{
font-size:17px !important;
}
.site-header .brand-logo-img{
width:52px !important;
height:40px !important;
max-height:40px !important;
flex-basis:52px;
}
.mobile-menu-toggle{
width:42px;
height:42px;
flex-basis:42px;
}
.valuation-step-card:last-child h3{
font-size:20px !important;
}
}
/* ===== V69: calcolatore ridisegnato, logo laterale e temi oro/argento ===== */
#quotazione .metals-converter{
--metal-rgb:255,211,90;
--metal-light:#ffe38a;
--metal-mid:#d7a92d;
--metal-deep:#8e6817;
position:relative;
isolation:isolate;
padding:18px 22px;
border-color:rgba(var(--metal-rgb),.48);
background:
radial-gradient(circle at 74% 12%,rgba(var(--metal-rgb),.085),transparent 31%),
linear-gradient(145deg,rgba(4,31,22,.88),rgba(0,12,9,.78));
box-shadow:
inset 0 1px 0 rgba(255,255,255,.05),
inset 0 0 42px rgba(var(--metal-rgb),.025),
0 16px 40px rgba(0,0,0,.20),
0 0 0 1px rgba(var(--metal-rgb),.025);
transition:
border-color .65s cubic-bezier(.22,1,.36,1),
background .65s cubic-bezier(.22,1,.36,1),
box-shadow .65s cubic-bezier(.22,1,.36,1);
}
#quotazione .metals-converter.theme-silver{
--metal-rgb:224,239,237;
--metal-light:#f5fbfa;
--metal-mid:#bccdca;
--metal-deep:#819692;
}
#quotazione .metals-converter::after{
content:"";
position:absolute;
z-index:5;
inset:-35% -20%;
pointer-events:none;
opacity:0;
transform:translateX(-75%) rotate(8deg);
background:linear-gradient(100deg,transparent 37%,rgba(var(--metal-rgb),.17) 49%,transparent 61%);
}
#quotazione .metals-converter.theme-switching::after{
animation:calculatorMetalSweep .72s cubic-bezier(.22,1,.36,1);
}
@keyframes calculatorMetalSweep{
0%{opacity:0;transform:translateX(-75%) rotate(8deg)}
28%{opacity:1}
100%{opacity:0;transform:translateX(75%) rotate(8deg)}
}
#quotazione .converter-shell{
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(0,1fr) 220px;
gap:28px;
align-items:center;
}
#quotazione .converter-main{
min-width:0;
}
#quotazione .converter-layout{
display:block !important;
}
#quotazione .simple-converter-heading,
#quotazione .converter-layout .converter-body{
width:100% !important;
max-width:none !important;
margin-left:0 !important;
margin-right:0 !important;
}
#quotazione .simple-converter-heading{
position:relative;
display:grid !important;
grid-template-columns:minmax(360px,1fr) 300px !important;
align-items:center !important;
gap:0 !important;
margin:0 0 9px !important;
}
#quotazione .converter-heading-copy{
grid-column:1;
min-width:0;
}
#quotazione .converter-heading h3{
margin-top:3px;
font-size:26px;
line-height:1;
transition:color .55s ease,text-shadow .55s ease;
}
#quotazione .converter-heading .label,
#quotazione .converter-input-block label{
color:var(--metal-light);
transition:color .55s ease,text-shadow .55s ease;
}
#quotazione .calculator-asset-switch{
grid-column:2;
justify-self:start !important;
align-self:center !important;
width:292px;
margin:0 !important;
transform:translateX(-50%);
flex-wrap:nowrap;
gap:8px;
}
#quotazione .calculator-asset-option{
flex:1 1 0;
min-width:0;
padding:10px 17px;
border-color:rgba(var(--metal-rgb),.34);
transition:
color .55s ease,
border-color .55s ease,
background .55s ease,
box-shadow .55s ease,
transform .25s ease;
}
#quotazione .calculator-asset-option:hover{
border-color:var(--metal-light);
transform:translateY(-1px);
}
#quotazione .calculator-asset-option.active{
color:#171004;
border-color:rgba(var(--metal-rgb),.92);
background:linear-gradient(135deg,var(--metal-light),var(--metal-deep));
box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 21px rgba(var(--metal-rgb),.22);
}
#quotazione .theme-silver .calculator-asset-option.active{
color:#10201d;
}
#quotazione .converter-layout .converter-body{
display:grid !important;
grid-template-columns:minmax(360px,1fr) 300px !important;
gap:0 !important;
align-items:end !important;
}
#quotazione .converter-input-block{
width:100%;
min-width:0;
padding-right:24px;
}
#quotazione .metals-converter .converter-row{
grid-template-columns:minmax(0,1fr) 56px;
gap:8px;
}
#quotazione .metals-converter input{
min-height:48px;
padding:12px 14px;
border-radius:15px;
border-color:rgba(var(--metal-rgb),.44);
box-shadow:inset 0 0 0 1px rgba(var(--metal-rgb),.015);
transition:border-color .55s ease,box-shadow .55s ease,background .55s ease;
}
#quotazione .metals-converter input:focus{
border-color:var(--metal-light);
box-shadow:0 0 0 4px rgba(var(--metal-rgb),.11),0 0 22px rgba(var(--metal-rgb),.08);
}
#quotazione .metals-converter .unit-pill{
border:1px solid rgba(var(--metal-rgb),.72);
border-radius:15px;
background:linear-gradient(145deg,var(--metal-light),var(--metal-deep));
box-shadow:0 8px 18px rgba(0,0,0,.20),0 0 16px rgba(var(--metal-rgb),.10);
transition:border-color .55s ease,background .55s ease,box-shadow .55s ease,color .55s ease;
}
#quotazione .theme-silver .unit-pill{
color:#10201d;
}
#quotazione .converter-result-block{
min-width:0;
min-height:98px;
padding-left:23px;
border-left:1px solid rgba(var(--metal-rgb),.46) !important;
display:flex !important;
flex-direction:column;
justify-content:flex-end;
text-align:left !important;
transition:border-color .55s ease;
}
#quotazione .converter-result-block > span{
color:#e9dfc3;
}
#quotazione .converter-result-block strong{
margin:1px 0 1px;
color:var(--metal-light);
font-size:clamp(42px,4.5vw,62px);
text-shadow:0 0 20px rgba(var(--metal-rgb),.11);
transition:color .55s ease,text-shadow .55s ease;
}
#quotazione .converter-result-block p{
margin:0 !important;
max-width:100%;
font-size:12px;
line-height:1.25;
}
#quotazione .converter-logo-card{
display:flex !important;
min-width:0;
min-height:130px;
align-items:center;
justify-content:center;
padding:7px 2px;
border:0;
border-radius:26px;
background:radial-gradient(circle at 50% 50%,rgba(var(--metal-rgb),.10),transparent 67%);
box-shadow:none;
transition:background .65s ease,filter .65s ease;
}
#quotazione .converter-side-logo{
display:block;
width:min(100%,205px);
max-height:138px;
object-fit:contain;
opacity:.94;
filter:drop-shadow(0 13px 22px rgba(0,0,0,.35)) drop-shadow(0 0 20px rgba(var(--metal-rgb),.14));
transition:filter .65s ease,transform .65s cubic-bezier(.22,1,.36,1);
}
#quotazione .metals-converter.theme-switching .converter-side-logo{
transform:scale(1.025);
}
@media (max-width:1180px) and (min-width:1051px){
#quotazione .converter-shell{
grid-template-columns:minmax(0,1fr) 170px;
gap:18px;
}
#quotazione .simple-converter-heading,
#quotazione .converter-layout .converter-body{
grid-template-columns:minmax(330px,1fr) 280px !important;
}
#quotazione .calculator-asset-switch{width:272px}
#quotazione .converter-side-logo{width:min(100%,165px)}
}
@media (max-width:1050px){
#quotazione .converter-shell{
display:block;
}
#quotazione .converter-logo-card{
display:none !important;
}
#quotazione .simple-converter-heading{
display:flex !important;
flex-direction:column;
align-items:flex-start !important;
gap:14px !important;
margin-bottom:16px !important;
}
#quotazione .calculator-asset-switch{
width:min(100%,360px);
transform:none;
align-self:center !important;
margin-left:auto !important;
margin-right:auto !important;
}
#quotazione .converter-layout .converter-body{
grid-template-columns:minmax(0,1fr) minmax(260px,.72fr) !important;
gap:18px !important;
}
#quotazione .converter-input-block{padding-right:0}
}
@media (max-width:700px){
#quotazione .metals-converter{
padding:18px 14px;
}
#quotazione .calculator-asset-switch{
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
}
#quotazione .converter-layout .converter-body{
display:block !important;
}
#quotazione .converter-result-block{
min-height:0;
margin-top:17px;
padding:16px 0 0;
border-left:0 !important;
border-top:1px solid rgba(var(--metal-rgb),.46);
transition:border-color .55s ease;
}
}
@media (prefers-reduced-motion:reduce){
#quotazione .metals-converter,
#quotazione .metals-converter *{
transition:none !important;
}
#quotazione .metals-converter.theme-switching::after{
animation:none;
}
}
#quotazione .simple-metals-grid-stage{
min-height:0;
}
#quotazione .calculator-stage{
display:flow-root;
min-height:0;
}
/* ===== V70: ridimensionamenti morbidi per quotazioni e calcolatore ===== */
#quotazione .simple-metals-grid-stage.smooth-height-transition{
overflow:hidden;
will-change:height;
transition:height .46s cubic-bezier(.22,1,.36,1);
}
#quotazione .calculator-stage.smooth-height-transition{
overflow:hidden;
will-change:height;
transition:
height .46s cubic-bezier(.22,1,.36,1),
border-color .65s cubic-bezier(.22,1,.36,1),
background .65s cubic-bezier(.22,1,.36,1),
box-shadow .65s cubic-bezier(.22,1,.36,1);
}
#quotazione .calculator-stage.panel-height-animating{
display:block !important;
transition:
height .48s cubic-bezier(.22,1,.36,1),
margin-top .48s cubic-bezier(.22,1,.36,1),
opacity .30s ease,
transform .48s cubic-bezier(.22,1,.36,1),
border-color .65s cubic-bezier(.22,1,.36,1),
background .65s cubic-bezier(.22,1,.36,1),
box-shadow .65s cubic-bezier(.22,1,.36,1);
}
@keyframes quoteContentSoftIn{
from{opacity:.30;transform:translateY(7px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes calculatorContentSoftIn{
from{opacity:.38;transform:translateY(5px)}
to{opacity:1;transform:translateY(0)}
}
#quotazione .simple-metals-grid-stage.quote-resizing .gold-view.active{
animation:quoteContentSoftIn .43s cubic-bezier(.22,1,.36,1) both;
}
#quotazione .calculator-stage.calculator-resizing .converter-heading-copy,
#quotazione .calculator-stage.calculator-resizing .converter-result-block{
animation:calculatorContentSoftIn .42s cubic-bezier(.22,1,.36,1) both;
}
/* Evita micro-variazioni di altezza tra la nota oro e quella argento. */
#quotazione .converter-result-block p{
min-height:2.5em;
}
@media (max-width:700px){
#quotazione .converter-result-block p{
min-height:3.75em;
}
}
@media (prefers-reduced-motion:reduce){
#quotazione .simple-metals-grid.smooth-height-transition,
#quotazione .metals-converter.smooth-height-transition,
#quotazione .calculator-stage.panel-height-animating{
transition:none !important;
}
#quotazione .simple-metals-grid-stage.quote-resizing .gold-view.active,
#quotazione .calculator-stage.calculator-resizing .converter-heading-copy,
#quotazione .calculator-stage.calculator-resizing .converter-result-block{
animation:none !important;
}
}
/* Il vecchio max-height del pannello viene disattivato: l'apertura è ora gestita dal contenitore esterno. */
#quotazione .calculator-stage > .metals-converter{
display:block;
max-height:none !important;
opacity:1;
transform:none;
will-change:auto;
transition:
border-color .65s cubic-bezier(.22,1,.36,1),
background .65s cubic-bezier(.22,1,.36,1),
box-shadow .65s cubic-bezier(.22,1,.36,1);
}
#quotazione .calculator-stage > .metals-converter.is-collapsed{
display:none !important;
}
/* ===== V71: calcolatore aperto di default + input più corto e valore più ampio ===== */
#quotazione .converter-shell{grid-template-columns:minmax(0,1fr) 190px;gap:24px;}
#quotazione .simple-converter-heading{grid-template-columns:minmax(250px,.72fr) minmax(350px,1.28fr) !important;}
#quotazione .converter-layout .converter-body{grid-template-columns:minmax(250px,.72fr) minmax(350px,1.28fr) !important;gap:0 !important;}
#quotazione .converter-input-block{max-width:430px;padding-right:12px;}
#quotazione .metals-converter .converter-row{grid-template-columns:minmax(0,1fr) 52px;gap:8px;}
#quotazione .converter-result-block{padding-left:26px;min-height:112px;}
#quotazione .converter-result-block strong{font-size:clamp(52px,5.8vw,78px);line-height:.94;}
#quotazione .converter-result-block p{max-width:520px;font-size:16px;line-height:1.28;}
#quotazione .converter-side-logo{width:min(100%,180px);max-height:155px;}
#quotazione .converter-logo-card{justify-content:flex-end;}
@media (max-width:1050px){
#quotazione .converter-shell{grid-template-columns:1fr;}
#quotazione .simple-converter-heading{grid-template-columns:minmax(0,1fr) 300px !important;}
#quotazione .converter-layout .converter-body{grid-template-columns:minmax(0,1fr) minmax(280px,.95fr) !important;}
#quotazione .converter-input-block{max-width:none;padding-right:18px;}
}
@media (max-width:700px){
#quotazione .simple-converter-heading,
#quotazione .converter-layout .converter-body{grid-template-columns:1fr !important;}
#quotazione .converter-input-block{max-width:none;padding-right:0;}
#quotazione .converter-result-block{padding-left:0;min-height:auto;}
#quotazione .converter-result-block strong{font-size:clamp(42px,12vw,64px);}
#quotazione .converter-result-block p{max-width:none;font-size:14px;}
}
/* ===== V72: valore più elegante, nota distanziata e riapertura morbida ===== */
#quotazione .converter-result-block > span{
margin-bottom:5px;
font-size:17px;
line-height:1;
font-weight:650;
letter-spacing:.01em;
}
#quotazione .converter-result-block strong{
margin:0 !important;
font-family:"Bodoni 72","Bodoni MT",Didot,"Times New Roman",serif;
font-weight:700;
font-variant-numeric:lining-nums tabular-nums;
letter-spacing:.005em;
line-height:.94;
}
#quotazione .converter-result-block p{
margin-top:13px !important;
padding-top:0;
line-height:1.34;
}
#quotazione .calculator-toggle-label-changing{
animation:calculatorToggleLabelIn .34s cubic-bezier(.22,1,.36,1) both;
}
#quotazione .calculator-toggle-button.state-changing{
animation:calculatorToggleSoftPulse .48s cubic-bezier(.22,1,.36,1) both;
}
@keyframes calculatorToggleLabelIn{
0%{opacity:.25;transform:translateY(4px)}
100%{opacity:1;transform:translateY(0)}
}
@keyframes calculatorToggleSoftPulse{
0%{transform:translateY(0) scale(1)}
45%{transform:translateY(-1px) scale(1.018);box-shadow:0 12px 28px rgba(0,0,0,.26),0 0 24px rgba(255,211,90,.25)}
100%{transform:translateY(0) scale(1)}
}
@media (max-width:700px){
#quotazione .converter-result-block > span{font-size:16px;}
#quotazione .converter-result-block p{margin-top:10px !important;}
}
@media (prefers-reduced-motion:reduce){
#quotazione .calculator-toggle-label-changing,
#quotazione .calculator-toggle-button.state-changing{
animation:none !important;
}
}