/* Shared palette + dark-mode hook (uses html:is([data-bwc-theme="dark"], [data-icon-theme="dark"])) */
.bwc-faq, .bwc-console, .bwc-steps, .bwc-qe, .bwc-news{
--p:#0169B4; --s:#E94E24; --t:#7A7A7A; --h:#2C3F48; --w:#FFFFFF; --b:#1C1C1C;
--bwc-accent: var(--p);
--accent: var(--bwc-accent);
--fg: var(--b);
--muted: color-mix(in srgb, var(--b) 55%, var(--t));
--border: color-mix(in srgb, var(--b) 18%, transparent);
--card: rgba(255,255,255,.62);
--glass: rgba(255,255,255,.46);
--shadow: rgba(0,0,0,.14);
color: var(--fg);
}
/* -------------------------------------------------------------------------- */
/* Mobile: disable fixed-footer reveal spacing */
/* -------------------------------------------------------------------------- */
/*
On some mobile layouts the footer is set to position:fixed and the page adds
a large margin-bottom on equal to the footer height. If the footer
template becomes very tall (e.g. Elementor containers), this produces a huge
empty gap before the footer.
We keep the effect on desktop, but on mobile/tablet we normalize the footer
back into the document flow.
*/
@media (max-width: 1024px){
body.bwc-mobile-footer-normal main.ms-main{
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body.bwc-mobile-footer-normal footer.ms-footer{
position: relative !important;
inset: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
transform: none !important;
will-change: auto !important;
}
}
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-faq,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-console,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-steps,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-qe,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-news{
--fg: var(--w);
--muted: color-mix(in srgb, var(--w) 72%, var(--t));
--border: rgba(255,255,255,.16);
--card: rgba(28,28,28,.62);
--glass: rgba(255,255,255,.06);
--shadow: rgba(0,0,0,.50);
}
/* ============ Quote Estimator (Preventivo Sito) ============ */
.bwc-qe{ padding: 10px 0; }
.bwc-qe *{ box-sizing:border-box; }
.bwc-qe{
max-width: 980px;
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 26px 90px var(--shadow);
overflow:hidden;
}
.bwc-qe__top{ padding: 18px 18px 12px; border-bottom: 1px solid var(--border); }
.bwc-qe__kicker{
font-size: 11px;
letter-spacing: .12em;
text-transform: uppercase;
opacity: .85;
margin-bottom: 8px;
}
.bwc-qe__titleRow{ display:flex; align-items:flex-end; justify-content:space-between; gap: 12px; flex-wrap:wrap; }
.bwc-qe__title{ margin:0; font-size: clamp(18px, 2.0vw, 26px); font-weight: 950; line-height: 1.12; }
.bwc-qe__range{
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
border-radius: 16px;
padding: 10px 12px;
font-weight: 850;
display:flex;
gap: 8px;
align-items:baseline;
}
.bwc-qe__range strong{ font-weight: 950; }
.bwc-qe__range span{ font-weight: 950; }
.bwc-qe__range span.is-updating{ opacity:.6; transform: translateY(1px); }
.bwc-qe__intro{ margin-top: 10px; color: var(--muted); line-height: 1.6; max-width: 86ch; }
.bwc-qe__grid{
padding: 14px 18px 6px;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 12px;
}
.bwc-qe__field{ display:flex; flex-direction:column; gap: 6px; }
.bwc-qe__lbl{ font-size: 12px; font-weight: 900; opacity: .9; }
.bwc-qe__sel{
width:100%;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
color: var(--fg);
border-radius: 16px;
padding: 12px 12px;
font-size: 14px;
outline: none;
}
.bwc-qe__sel:focus{ border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
/* Fix: native dropdown options should remain readable (white background in most browsers) */
.bwc-qe__sel option{
color: #111;
background: #fff;
}
/* Integrazioni: checkbox multiselect */
.bwc-qe__field--checks{ grid-column: 1 / -1; }
.bwc-qe__checks{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
padding: 10px;
border:1px solid var(--border);
border-radius: 16px;
background: color-mix(in srgb, var(--glass) 60%, transparent);
}
.bwc-qe__chk{
display:flex;
align-items:center;
gap: 10px;
font-size: 13px;
line-height: 1.2;
padding: 10px 10px;
border-radius: 14px;
border:1px solid color-mix(in srgb, var(--border) 85%, transparent);
background: color-mix(in srgb, var(--card) 70%, transparent);
cursor:pointer;
user-select:none;
}
.bwc-qe__chk input{
width: 18px;
height: 18px;
accent-color: var(--accent);
flex: 0 0 auto;
}
.bwc-qe__chk:hover{
border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.bwc-qe__chk:has(input:checked){
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bwc-qe__foot{
padding: 10px 18px 16px;
display:flex;
gap: 12px;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}
.bwc-qe__note{ font-size: 12px; color: var(--muted); line-height: 1.5; }
.bwc-qe__cta{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 10px 14px;
border-radius: 14px;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit;
text-decoration:none;
font-weight: 950;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-qe__cta:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--s) 70%, var(--border)); background: color-mix(in srgb, var(--s) 14%, transparent); }
.bwc-qe__fallback{
border-top: 1px solid var(--border);
background: color-mix(in srgb, var(--glass) 55%, transparent);
padding: 14px 18px 16px;
}
.bwc-qe__fbTitle{ margin:0 0 8px; font-size: 15px; font-weight: 950; }
.bwc-qe__fbText{ margin:0; color: var(--muted); line-height: 1.65; max-width: 92ch; }
.bwc-qe__noscript{ margin-top: 10px; font-size: 12px; opacity:.75; }
@media (max-width: 720px){
.bwc-qe__top{ padding: 16px 14px 12px; }
.bwc-qe__grid{ grid-template-columns: 1fr; padding: 12px 14px 6px; }
.bwc-qe__checks{ grid-template-columns: 1fr; }
.bwc-qe__foot{ padding: 10px 14px 14px; }
.bwc-qe__fallback{ padding: 12px 14px 14px; }
}
/* ============ FAQ Console (same as before) ============ */
.bwc-faq{ padding: 24px 0; }
.bwc-faq *{ box-sizing: border-box; }
.bwc-faq__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.bwc-faq__top{ display:flex; gap:16px; align-items:flex-end; justify-content:space-between; margin-bottom:12px; }
.bwc-faq__h{ margin:0 0 8px; font-size: clamp(22px, 2.2vw, 34px); line-height:1.12; font-weight: 950; }
.bwc-faq__p{ margin:0; color: var(--muted); max-width: 76ch; line-height:1.6; }
.bwc-faq__search{
flex: 0 0 min(420px, 100%);
display:flex; align-items:center; gap:10px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--card) 88%, transparent);
border-radius: 18px;
padding: 10px 12px;
box-shadow: 0 18px 54px var(--shadow);
}
.bwc-faq__ico{ width: 18px; height: 18px; color: color-mix(in srgb, var(--fg) 70%, transparent); }
.bwc-faq__input{ width:100%; border:0; outline:none; background: transparent; color: var(--fg); font-size: 14px; }
.bwc-faq__input::placeholder{ color: color-mix(in srgb, var(--fg) 55%, transparent); }
.bwc-faq__filters{ display:flex; flex-wrap:wrap; gap:8px; margin: 12px 0 14px; }
.bwc-faq__chip{
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
color: inherit;
border-radius: 999px;
padding: 8px 12px;
cursor:pointer;
font-weight: 850;
font-size: 12px;
letter-spacing: .02em;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.bwc-faq__chip:hover{ transform: translateY(-1px); }
.bwc-faq__chip.is-on{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bwc-faq__list{
border:1px solid var(--border);
background: color-mix(in srgb, var(--card) 88%, transparent);
border-radius: 28px;
overflow:hidden;
box-shadow: 0 26px 90px var(--shadow);
}
.bwc-faq__item{ border-top: 1px solid var(--border); }
.bwc-faq__item:first-child{ border-top: 0; }
.bwc-faq__q{
width:100%;
border:0;
background: transparent;
color: inherit;
text-align:left;
padding: 16px 18px;
font-weight: 950;
display:flex;
align-items:center;
justify-content:space-between;
gap: 12px;
cursor:pointer;
}
.bwc-faq__q:hover{ background: color-mix(in srgb, var(--glass) 70%, transparent); }
.bwc-faq__plus{
width: 18px; height: 18px;
border-radius: 6px;
position: relative;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
flex: 0 0 auto;
}
.bwc-faq__plus::before, .bwc-faq__plus::after{
content:"";
position:absolute;
left:50%; top:50%;
width: 10px; height: 2px;
background: color-mix(in srgb, var(--fg) 70%, transparent);
transform: translate(-50%,-50%);
border-radius: 99px;
transition: transform 160ms ease;
}
.bwc-faq__plus::after{ transform: translate(-50%,-50%) rotate(90deg); }
.bwc-faq__a{ padding: 0 18px 16px; color: var(--muted); line-height: 1.65; }
.bwc-faq__item.is-open .bwc-faq__q{ background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bwc-faq__item.is-open .bwc-faq__plus{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.bwc-faq__item.is-open .bwc-faq__plus::after{ transform: translate(-50%,-50%) rotate(0deg); }
.bwc-faq__empty{ padding: 16px 18px; color: var(--muted); }
.bwc-faq__ctaRow{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; margin-top: 14px; }
.bwc-faq__cta{
display:inline-flex; align-items:center; justify-content:center;
padding: 10px 14px; border-radius: 14px;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit; text-decoration:none; font-weight: 950;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-faq__cta:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--s) 70%, var(--border));
background: color-mix(in srgb, var(--s) 14%, transparent);
}
.bwc-faq__micro{ font-size: 12px; opacity:.75; }
@media (max-width: 960px){
.bwc-faq__top{ flex-direction: column; align-items: stretch; }
.bwc-faq__search{ flex-basis: auto; width: 100%; }
}
/* ============ Results Console (same as before) ============ */
.bwc-console{ padding: 24px 0; }
.bwc-console *{ box-sizing:border-box; }
.bwc-console__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.bwc-console__shell{
display:grid;
grid-template-columns: 360px 1fr;
gap: 14px;
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 26px 90px var(--shadow);
overflow:hidden;
}
.bwc-console__nav{
padding: 14px;
border-right: 1px solid var(--border);
background: color-mix(in srgb, var(--glass) 55%, transparent);
}
.bwc-console__tab{
width:100%;
text-align:left;
border:1px solid transparent;
background: transparent;
color: inherit;
border-radius: 18px;
padding: 14px 14px 12px;
display:grid;
grid-template-columns: 16px 1fr;
column-gap: 10px;
row-gap: 4px;
cursor:pointer;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.bwc-console__tab:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--glass) 70%, transparent); }
.bwc-console__dot{ width: 10px; height: 10px; border-radius: 99px; border:1px solid var(--border); margin-top: 4px; background: transparent; }
.bwc-console__tabT{ font-weight: 950; line-height:1.15; }
.bwc-console__tabS{ color: var(--muted); font-size: 13px; }
.bwc-console__tab.is-active{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bwc-console__tab.is-active .bwc-console__dot{
background: color-mix(in srgb, var(--accent) 70%, transparent);
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
}
.bwc-console__navHint{ margin-top: 10px; font-size: 12px; opacity: .75; }
.bwc-console__panel{ padding: 18px 18px 16px; position: relative; overflow:hidden; transition: opacity 180ms ease, transform 180ms ease; }
.bwc-console__panel::before{
content:"";
position:absolute; inset:-1px;
background:
radial-gradient(620px 360px at 18% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
radial-gradient(520px 320px at 82% 30%, color-mix(in srgb, var(--h) 12%, transparent), transparent 64%);
opacity:.9; pointer-events:none;
}
.bwc-console__panel > *{ position:relative; z-index:1; }
.bwc-console__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 10px; }
.bwc-console__kicker{
font-size: 11px; letter-spacing:.12em;
padding: 6px 10px; border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 60%, transparent);
}
.bwc-console__chip{
font-size: 12px; padding: 8px 10px; border-radius: 14px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 60%, transparent);
display:flex; align-items:center; gap:8px; opacity:.9;
}
.bwc-console__pulse{
width:8px; height:8px; border-radius: 99px;
background: color-mix(in srgb, var(--accent) 70%, transparent);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 36%, transparent);
animation: bwcPulse 1.6s infinite;
}
@keyframes bwcPulse{
0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 36%, transparent); }
70%{ box-shadow: 0 0 0 10px transparent; }
100%{ box-shadow: 0 0 0 0 transparent; }
}
.bwc-console__h{ margin: 0 0 8px; font-size: clamp(20px, 2.1vw, 30px); line-height:1.12; font-weight: 950; }
.bwc-console__p{ margin:0 0 14px; color: var(--muted); line-height:1.6; max-width: 80ch; }
.bwc-console__kpis{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }
.bwc-console__kpi{
border:1px solid var(--border);
border-radius: 18px;
padding: 12px 12px 10px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
}
.bwc-console__kpiL{ font-size: 12px; opacity: .78; margin-bottom: 6px; }
.bwc-console__kpiV{ font-size: 22px; font-weight: 950; letter-spacing:.01em; display:flex; align-items:baseline; gap:6px; }
.bwc-console__kpiV small{ font-size: 12px; opacity:.75; font-weight: 800; }
.bwc-console__chart{
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--glass) 55%, transparent);
padding: 12px 12px 10px;
overflow:hidden;
margin-bottom: 14px;
position: relative;
}
.bwc-console__chartGrid{
position:absolute; inset:0;
background:
linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 72%, color-mix(in srgb, var(--border) 60%, transparent) 73%, rgba(0,0,0,0) 74%),
linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) 84%, color-mix(in srgb, var(--border) 60%, transparent) 85%, rgba(0,0,0,0) 86%);
opacity:.6; pointer-events:none;
}
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-console__chartGrid{
background:
linear-gradient(to bottom, transparent 0 72%, rgba(255,255,255,.16) 73% 73.5%, transparent 74%),
linear-gradient(to right, transparent 0 84%, rgba(255,255,255,.14) 85% 85.5%, transparent 86%);
}
.bwc-console__bars{
display:grid;
grid-template-columns: repeat(6, minmax(0,1fr));
gap: 10px;
height: 140px;
align-items:end;
position:relative;
z-index:1;
}
.bwc-console__bar{ display:grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items:end; height:100%; }
.bwc-console__bar i{
display:block;
border-radius: 10px;
height: 10px;
transition: height 520ms cubic-bezier(.2,.9,.2,1);
}
.bwc-console__bar i.b{ background: color-mix(in srgb, var(--h) 35%, transparent); border:1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.bwc-console__bar i.a{ background: color-mix(in srgb, var(--accent) 45%, transparent); border:1px solid color-mix(in srgb, var(--accent) 60%, var(--border)); }
.bwc-console__legend{ display:flex; gap: 12px; justify-content:flex-end; margin-top: 10px; opacity:.9; }
.bwc-console__lg{ display:flex; align-items:center; gap: 8px; font-size: 12px; }
.bwc-console__lg i{ width: 14px; height: 10px; border-radius: 99px; display:inline-block; border:1px solid var(--border); }
.bwc-console__lg:first-child i{ background: color-mix(in srgb, var(--h) 35%, transparent); }
.bwc-console__lg:last-child i{ background: color-mix(in srgb, var(--accent) 45%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.bwc-console__list{ margin: 0 0 14px; padding-left: 18px; line-height:1.6; color: color-mix(in srgb, var(--fg) 80%, transparent); }
.bwc-console__ctaRow{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.bwc-console__cta{
display:inline-flex; align-items:center; justify-content:center;
padding: 10px 14px; border-radius: 14px;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit; text-decoration:none; font-weight: 950;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-console__cta:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--s) 70%, var(--border));
background: color-mix(in srgb, var(--s) 14%, transparent);
}
.bwc-console__micro{ font-size: 12px; opacity:.75; }
@media (max-width: 1024px){
.bwc-console__shell{ grid-template-columns: 1fr; }
.bwc-console__nav{ border-right:0; border-bottom:1px solid var(--border); }
.bwc-console__kpis{ grid-template-columns: 1fr; }
.bwc-console__bars{ height: 120px; }
}
/* ============ Steps Metodo (NEW) ============ */
.bwc-steps{ padding: 24px 0; }
.bwc-steps *{ box-sizing:border-box; }
.bwc-steps__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.bwc-steps__h{ margin:0 0 10px; font-size: clamp(22px, 2.2vw, 34px); line-height:1.12; font-weight: 950; }
.bwc-steps__p{ margin:0 0 14px; color: var(--muted); max-width: 76ch; line-height:1.6; }
.bwc-steps__shell{
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 26px 90px var(--shadow);
overflow:hidden;
display:grid;
grid-template-columns: 420px 1fr;
}
.bwc-steps--stack .bwc-steps__shell{ grid-template-columns: 1fr; }
.bwc-steps__rail{
position:relative;
padding: 14px;
border-right: 1px solid var(--border);
background: color-mix(in srgb, var(--glass) 55%, transparent);
}
.bwc-steps--stack .bwc-steps__rail{ border-right:0; border-bottom:1px solid var(--border); }
.bwc-steps__tab{
width:100%;
text-align:left;
border:1px solid transparent;
background: transparent;
color: inherit;
border-radius: 18px;
padding: 12px 12px;
display:grid;
grid-template-columns: 44px 1fr 34px;
gap: 10px;
align-items:center;
cursor:pointer;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
position: relative;
}
.bwc-steps__tab:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--glass) 70%, transparent); }
.bwc-steps__n{
width: 44px; height: 44px; border-radius: 16px;
display:flex; align-items:center; justify-content:center;
font-weight: 950;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
}
.bwc-steps__t{ font-weight: 950; line-height: 1.1; }
.bwc-steps__s{ color: var(--muted); font-size: 13px; }
.bwc-steps__ico{
width: 34px; height: 34px; border-radius: 14px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
display:flex; align-items:center; justify-content:center;
}
.bwc-steps__ico svg{ width: 18px; height: 18px; display:block; }
.bwc-steps__tab.is-active{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bwc-steps__tab.is-active .bwc-steps__n{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bwc-steps__tab.is-active .bwc-steps__ico{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bwc-steps__progress{
margin-top: 14px;
height: 8px;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
overflow:hidden;
}
.bwc-steps__progress span{
display:block;
height:100%;
width: 10%;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), color-mix(in srgb, var(--s) 40%, transparent));
border-radius: 999px;
transition: width 520ms cubic-bezier(.2,.9,.2,1);
}
.bwc-steps__panelWrap{
padding: 18px;
position: relative;
overflow:hidden;
}
.bwc-steps__panelWrap::before{
content:"";
position:absolute; inset:-1px;
background:
radial-gradient(620px 360px at 18% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
radial-gradient(520px 320px at 82% 30%, color-mix(in srgb, var(--h) 12%, transparent), transparent 64%);
opacity:.9;
pointer-events:none;
}
.bwc-steps__panelWrap > *{ position:relative; z-index:1; }
.bwc-steps__panel{ transition: opacity 180ms ease, transform 180ms ease; }
.bwc-steps__panel.is-active{ opacity: 1; transform: translateY(0); }
.bwc-steps__panel:not(.is-active){ opacity: 0; transform: translateY(6px); }
.bwc-steps__card{
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--glass) 55%, transparent);
padding: 14px 14px 12px;
}
.bwc-steps__cardTop{ display:flex; align-items:baseline; justify-content:space-between; gap: 12px; margin-bottom: 10px; }
.bwc-steps__badge{
font-size: 11px;
letter-spacing:.12em;
padding: 6px 10px;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 60%, transparent);
white-space: nowrap;
}
.bwc-steps__cardTitle{ font-size: clamp(18px, 1.6vw, 24px); font-weight: 950; line-height: 1.15; }
.bwc-steps__cardText{ color: var(--muted); line-height: 1.65; margin-bottom: 10px; }
.bwc-steps__bullets{ margin: 0; padding-left: 18px; line-height:1.65; }
.bwc-steps__bullets li{ margin: 0 0 6px; }
.bwc-steps__navBtns{
margin-top: 12px;
display:flex;
gap: 10px;
justify-content:flex-end;
}
.bwc-steps__btn{
width: 42px; height: 38px;
border-radius: 14px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
color: inherit;
cursor:pointer;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
font-weight: 950;
}
.bwc-steps__btn:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bwc-steps__ctaRow{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; margin-top: 14px; }
.bwc-steps__cta{
display:inline-flex; align-items:center; justify-content:center;
padding: 10px 14px; border-radius: 14px;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit; text-decoration:none; font-weight: 950;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-steps__cta:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--s) 70%, var(--border));
background: color-mix(in srgb, var(--s) 14%, transparent);
}
.bwc-steps__micro{ font-size: 12px; opacity:.75; }
@media (max-width: 1024px){
.bwc-steps__shell{ grid-template-columns: 1fr; }
.bwc-steps__rail{ border-right:0; border-bottom:1px solid var(--border); }
}
/* ============ Steps Timeline (NEW) ============ */
.bwc-tl{ padding: 24px 0; }
.bwc-tl *{ box-sizing:border-box; }
.bwc-tl__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.bwc-tl__h{ margin:0 0 10px; font-size: clamp(22px, 2.2vw, 34px); line-height:1.12; font-weight: 950; }
.bwc-tl__p{ margin:0 0 14px; color: var(--muted); max-width: 80ch; line-height:1.6; }
.bwc-tl__list{ margin:0; padding:0; list-style:none; position:relative; }
.bwc-tl__list::before{
content:"";
position:absolute;
left: 18px;
top: 8px;
bottom: 8px;
width: 2px;
background: color-mix(in srgb, var(--border) 70%, transparent);
}
.bwc-tl__item{
display:grid;
grid-template-columns: 44px 1fr;
gap: 14px;
align-items:flex-start;
position:relative;
padding: 10px 0;
}
.bwc-tl__dot{
width: 44px; height: 44px;
border-radius: 16px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
display:flex; align-items:center; justify-content:center;
position:relative;
z-index: 2;
}
.bwc-tl__n{ font-weight: 950; }
.bwc-tl__content{ min-width:0; }
.bwc-tl__card{
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 22px 70px var(--shadow);
padding: 14px 14px 12px;
position: relative;
overflow:hidden;
}
.bwc-tl__card::before{
content:"";
position:absolute;
inset:-1px;
border-radius: 22px;
background: radial-gradient(520px 220px at 20% 30%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
opacity: 0;
transition: opacity 180ms ease;
pointer-events:none;
}
.bwc-tl__card > *{ position:relative; z-index:1; }
.bwc-tl__head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 8px; }
.bwc-tl__t{ font-weight: 950; font-size: 18px; line-height:1.2; }
.bwc-tl__body{ margin:0; color: var(--muted); line-height:1.65; }
.bwc-tl__ico{ width: 34px; height: 34px; border-radius: 14px; border:1px solid var(--border); background: color-mix(in srgb, var(--glass) 70%, transparent); display:flex; align-items:center; justify-content:center; }
.bwc-tl__ico svg{ width: 18px; height: 18px; display:block; }
.bwc-tl__item.is-active .bwc-tl__dot{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bwc-tl__item.is-active .bwc-tl__card{
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
.bwc-tl__item.is-active .bwc-tl__card::before{ opacity: 1; }
/* Accordion variant */
.bwc-tl--accordion .bwc-tl__card{ box-shadow: none; background: transparent; border:0; padding:0; }
.bwc-tl--accordion .bwc-tl__btn{
width:100%;
text-align:left;
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 22px 70px var(--shadow);
padding: 14px 14px 12px;
display:flex; align-items:center; justify-content:space-between;
gap: 12px;
cursor:pointer;
}
.bwc-tl--accordion .bwc-tl__chev{ opacity:.75; transition: transform 180ms ease; }
.bwc-tl--accordion .bwc-tl__btn[aria-expanded="true"] .bwc-tl__chev{ transform: rotate(180deg); }
.bwc-tl--accordion .bwc-tl__panel{ margin-top: 10px; }
.bwc-tl--accordion .bwc-tl__panel .bwc-tl__card{
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--glass) 55%, transparent);
padding: 14px 14px 12px;
}
/* Compact variant */
.bwc-tl--compact .bwc-tl__list::before{ left: 14px; }
.bwc-tl--compact .bwc-tl__dot{ width: 34px; height: 34px; border-radius: 14px; }
.bwc-tl--compact .bwc-tl__item{ grid-template-columns: 34px 1fr; }
.bwc-tl--compact .bwc-tl__t{ font-size: 16px; }
@media (max-width: 640px){
.bwc-tl__list::before{ left: 16px; }
.bwc-tl__item{ grid-template-columns: 40px 1fr; gap: 12px; }
.bwc-tl__dot{ width: 40px; height: 40px; border-radius: 16px; }
.bwc-tl__t{ font-size: 17px; }
}
/* ============ Steps Snap (NEW) ============ */
.bwc-snap{ padding: 24px 0; }
.bwc-snap *{ box-sizing:border-box; }
.bwc-snap__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.bwc-snap__h{ margin:0 0 10px; font-size: clamp(22px, 2.2vw, 34px); line-height:1.12; font-weight: 950; }
.bwc-snap__p{ margin:0 0 14px; color: var(--muted); max-width: 80ch; line-height:1.6; }
.bwc-snap__shell{ display:grid; grid-template-columns: 44px 1fr 44px; gap: 10px; align-items:center; }
.bwc-snap__nav{
width: 44px; height: 44px;
border-radius: 16px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
color: inherit;
cursor:pointer;
font-weight: 950;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.bwc-snap__nav:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bwc-snap__track{
overflow-x:auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 26px 90px var(--shadow);
}
.bwc-snap__track::-webkit-scrollbar{ display:none; }
.bwc-snap__inner{ display:flex; gap: 12px; padding: 14px; }
.bwc-snap__card{
scroll-snap-align: center;
min-width: min(520px, 92%);
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--glass) 55%, transparent);
padding: 14px 14px 12px;
position:relative;
overflow:hidden;
}
.bwc-snap__card::before{
content:"";
position:absolute;
inset:-1px;
border-radius: 22px;
background: radial-gradient(540px 260px at 18% 20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
opacity:0;
transition: opacity 180ms ease;
pointer-events:none;
}
.bwc-snap__card > *{ position:relative; z-index:1; }
.bwc-snap__card.is-active{ border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.bwc-snap__card.is-active::before{ opacity:1; }
.bwc-snap__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.bwc-snap__badge{ font-size: 11px; letter-spacing:.12em; padding: 6px 10px; border-radius: 999px; border:1px solid var(--border); background: color-mix(in srgb, var(--glass) 60%, transparent); white-space: nowrap; }
.bwc-snap__ico{ width: 34px; height: 34px; border-radius: 14px; border:1px solid var(--border); background: color-mix(in srgb, var(--glass) 70%, transparent); display:flex; align-items:center; justify-content:center; }
.bwc-snap__ico svg{ width: 18px; height: 18px; display:block; }
.bwc-snap__t{ margin:0 0 8px; font-size: clamp(18px, 1.8vw, 26px); line-height:1.12; font-weight: 980; }
.bwc-snap__b{ margin:0; color: var(--muted); line-height:1.65; max-width: 80ch; }
.bwc-snap__dots{ display:flex; justify-content:center; gap: 8px; margin-top: 12px; }
.bwc-snap__dot{ width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--border) 70%, transparent); opacity:.9; }
.bwc-snap__dot.is-active{ width: 20px; background: color-mix(in srgb, var(--accent) 70%, transparent); }
.bwc-snap__sr{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width: 640px){
.bwc-snap__shell{ grid-template-columns: 1fr; }
.bwc-snap__nav{ display:none; }
.bwc-snap__card{ min-width: 92%; }
}
/* ============ Cosa Facciamo (Services Grid) ============ */
.bwc-svc{ padding: 24px 0; }
.bwc-svc *{ box-sizing:border-box; }
.bwc-svc__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.bwc-svc__h{ margin:0 0 10px; font-size: clamp(22px, 2.2vw, 34px); line-height:1.12; font-weight: 950; }
.bwc-svc__p{ margin:0 0 14px; color: var(--muted); max-width: 76ch; line-height:1.6; }
.bwc-svc__grid{
display:grid;
grid-template-columns: repeat(var(--bwc-cols, 3), minmax(0, 1fr));
gap: 14px;
}
@media (max-width: 1024px){
.bwc-svc__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
.bwc-svc__grid{ grid-template-columns: 1fr; }
}
.bwc-svc__card{
position: relative;
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 22px 70px var(--shadow);
padding: 14px 14px 12px;
overflow:hidden;
transform: translateZ(0);
transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
outline: none;
}
.bwc-svc__card:hover,
.bwc-svc__card:focus-visible{
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
}
.bwc-svc__head{
display:grid;
grid-template-columns: 44px 1fr 18px;
gap: 10px;
align-items:center;
margin-bottom: 10px;
}
.bwc-svc__ico{
width: 44px; height: 44px; border-radius: 16px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
display:flex; align-items:center; justify-content:center;
color: var(--fg);
}
.bwc-svc__ico svg{ width: 18px; height: 18px; display:block; }
/* Force svg paths to currentColor (keeps fill="none") */
.bwc-svc__ico svg [fill]:not([fill="none"]) { fill: currentColor !important; }
.bwc-svc__ico svg [stroke]:not([stroke="none"]) { stroke: currentColor !important; }
.bwc-svc__t{ margin:0; font-size: 16px; line-height: 1.2; font-weight: 950; }
.bwc-svc__tag{
display:inline-flex;
margin-top: 6px;
padding: 6px 10px;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
font-size: 12px;
font-weight: 850;
color: color-mix(in srgb, var(--fg) 86%, transparent);
width: fit-content;
}
.bwc-svc__arrow{
opacity: .55;
transform: translateY(-1px);
transition: opacity 180ms ease, transform 180ms ease;
}
.bwc-svc__card:hover .bwc-svc__arrow{ opacity: .9; transform: translateY(-3px) translateX(2px); }
.bwc-svc__tx{
margin:0;
color: var(--muted);
line-height: 1.65;
max-width: 72ch;
}
/* Shine layer + spotlight */
.bwc-svc__shine{
position:absolute;
inset:-1px;
background:
radial-gradient(600px 360px at var(--mx, 20%) var(--my, 20%), color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
radial-gradient(520px 340px at 85% 20%, color-mix(in srgb, var(--h) 10%, transparent), transparent 64%);
opacity: .0;
transition: opacity 180ms ease;
pointer-events:none;
}
.bwc-svc__card:hover .bwc-svc__shine,
.bwc-svc__card:focus-visible .bwc-svc__shine{ opacity: .95; }
/* CTA row */
.bwc-svc__ctaRow{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; margin-top: 14px; }
.bwc-svc__cta{
display:inline-flex; align-items:center; justify-content:center;
padding: 10px 14px; border-radius: 14px;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit; text-decoration:none; font-weight: 950;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-svc__cta:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--s) 70%, var(--border));
background: color-mix(in srgb, var(--s) 14%, transparent);
}
.bwc-svc__micro{ font-size: 12px; opacity:.75; }
/* ============ Chi aiutiamo (Audience Selector) ============ */
.bwc-aud{ padding: 24px 0; }
.bwc-aud *{ box-sizing:border-box; }
.bwc-aud__wrap{ max-width:1200px; margin:0 auto; padding:0 16px; }
.bwc-aud__h{ margin:0 0 10px; font-size: clamp(22px, 2.2vw, 34px); line-height:1.12; font-weight: 950; }
.bwc-aud__p{ margin:0 0 14px; color: var(--muted); max-width: 76ch; line-height:1.6; }
.bwc-aud__shell{
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 26px 90px var(--shadow);
overflow:hidden;
display:grid;
grid-template-columns: 380px 1fr;
min-height: 420px;
}
@media (max-width: 1024px){
.bwc-aud__shell{ grid-template-columns: 1fr; }
}
.bwc-aud__rail{
padding: 14px;
border-right: 1px solid var(--border);
background: color-mix(in srgb, var(--glass) 55%, transparent);
}
@media (max-width: 1024px){
.bwc-aud__rail{ border-right:0; border-bottom:1px solid var(--border); }
}
.bwc-aud__tab{
width:100%;
text-align:left;
border:1px solid transparent;
background: transparent;
color: inherit;
border-radius: 20px;
padding: 12px 12px;
display:grid;
grid-template-columns: 44px 1fr;
gap: 12px;
align-items:center;
cursor:pointer;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
position: relative;
overflow:hidden;
}
.bwc-aud__tab:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--glass) 70%, transparent); }
.bwc-aud__tabIco{
width: 44px; height: 44px; border-radius: 16px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
display:flex; align-items:center; justify-content:center;
color: var(--fg);
}
.bwc-aud__tabIco svg{ width:18px; height:18px; display:block; }
.bwc-aud__tabIco svg [fill]:not([fill="none"]){ fill: currentColor !important; }
.bwc-aud__tabIco svg [stroke]:not([stroke="none"]){ stroke: currentColor !important; }
.bwc-aud__tabT{ font-weight: 950; line-height:1.1; }
.bwc-aud__tabS{ color: var(--muted); font-size: 13px; }
.bwc-aud__spark{
position:absolute;
inset:-1px;
background:
radial-gradient(520px 220px at 20% 40%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
radial-gradient(340px 220px at 80% 30%, color-mix(in srgb, var(--s) 14%, transparent), transparent 64%);
opacity: 0;
pointer-events:none;
transition: opacity 180ms ease;
}
.bwc-aud__tab:hover .bwc-aud__spark{ opacity: .9; }
.bwc-aud__tab.is-active{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bwc-aud__tab.is-active .bwc-aud__tabIco{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.bwc-aud__tab.is-active .bwc-aud__spark{ opacity: 1; }
.bwc-aud__meter{
margin-top: 14px;
height: 8px;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
overflow:hidden;
}
.bwc-aud__meter span{
display:block;
height:100%;
width: 10%;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 62%, transparent), color-mix(in srgb, var(--s) 42%, transparent));
border-radius: 999px;
transition: width 520ms cubic-bezier(.2,.9,.2,1);
}
.bwc-aud__hint{ margin-top: 10px; font-size: 12px; opacity:.75; }
.bwc-aud__stage{
padding: 18px;
position: relative;
overflow:hidden;
--mx: 50%;
--my: 30%;
}
.bwc-aud__bg{
position:absolute; inset:-1px;
background:
radial-gradient(640px 420px at var(--mx) var(--my), color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
radial-gradient(520px 360px at 85% 25%, color-mix(in srgb, var(--h) 12%, transparent), transparent 64%);
opacity:.95;
pointer-events:none;
filter: saturate(1.05);
transform: translateZ(0);
}
.bwc-aud__stage > *{ position: relative; z-index:1; }
.bwc-aud__stage.is-swap .bwc-aud__card{
animation: bwcSwap 220ms ease;
}
@keyframes bwcSwap{
from{ opacity: 0; transform: translateY(6px); }
to{ opacity: 1; transform: translateY(0); }
}
.bwc-aud__panel{ transition: opacity 180ms ease, transform 180ms ease; }
.bwc-aud__panel.is-active{ opacity: 1; transform: translateY(0); }
.bwc-aud__panel:not(.is-active){ opacity: 0; transform: translateY(6px); }
.bwc-aud__card{
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--glass) 55%, transparent);
padding: 14px 14px 12px;
box-shadow: 0 18px 60px var(--shadow);
}
.bwc-aud__top{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin-bottom: 10px; }
.bwc-aud__badge{
display:flex; align-items:baseline; gap: 10px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 60%, transparent);
border-radius: 999px;
padding: 8px 10px;
}
.bwc-aud__badgeL{ font-size: 11px; letter-spacing:.12em; opacity:.85; }
.bwc-aud__badgeV{ font-size: 12px; font-weight: 950; }
.bwc-aud__live{
font-size: 12px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 60%, transparent);
border-radius: 14px;
padding: 8px 10px;
display:flex; align-items:center; gap: 8px;
opacity:.9;
}
.bwc-aud__live span{
width:8px; height:8px; border-radius: 99px;
background: color-mix(in srgb, var(--accent) 70%, transparent);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 36%, transparent);
animation: bwcPulse 1.6s infinite;
}
.bwc-aud__hh{ margin: 0 0 8px; font-size: clamp(18px, 1.9vw, 28px); line-height:1.12; font-weight: 950; }
.bwc-aud__tx{ margin:0 0 12px; color: var(--muted); line-height:1.65; max-width: 80ch; }
.bwc-aud__list{ margin:0; padding-left: 18px; line-height:1.65; }
.bwc-aud__list li{ margin: 0 0 6px; }
.bwc-aud__navBtns{
margin-top: 12px;
display:flex;
gap: 10px;
justify-content:flex-end;
}
.bwc-aud__btn{
width: 42px; height: 38px;
border-radius: 14px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
color: inherit;
cursor:pointer;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
font-weight: 950;
}
.bwc-aud__btn:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bwc-aud__ctaRow{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; margin-top: 14px; }
.bwc-aud__cta{
display:inline-flex; align-items:center; justify-content:center;
padding: 10px 14px; border-radius: 14px;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit; text-decoration:none; font-weight: 950;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-aud__cta:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--s) 70%, var(--border));
background: color-mix(in srgb, var(--s) 14%, transparent);
}
.bwc-aud__micro{ font-size: 12px; opacity:.75; }
/* ============ Hero Scroll (Pinterest-style inspired) ============ */
.bwc-hero{ padding: 18px 0; }
.bwc-hero *{ box-sizing:border-box; }
.bwc-hero__wrap{
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
display:grid;
grid-template-columns: 420px 1fr;
gap: 16px;
align-items:start;
}
@media (max-width: 1024px){
.bwc-hero__wrap{ grid-template-columns: 1fr; }
}
.bwc-hero__left{
position: sticky;
top: 16px;
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 24px 84px var(--shadow);
padding: 16px;
}
@media (max-width: 1024px){
.bwc-hero__left{ position: relative; top:auto; }
}
.bwc-hero__ey{
display:inline-flex;
padding: 8px 10px;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 65%, transparent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .95;
}
.bwc-hero__h{
margin: 12px 0 8px;
font-size: clamp(26px, 2.6vw, 44px);
line-height: 1.05;
font-weight: 980;
}
.bwc-hero__p{
margin: 0 0 12px;
color: var(--muted);
line-height: 1.65;
max-width: 50ch;
}
.bwc-hero__ctas{ display:flex; gap: 10px; flex-wrap:wrap; margin: 10px 0 14px; }
.bwc-hero__btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 10px 14px;
border-radius: 16px;
text-decoration:none;
font-weight: 950;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
color: inherit;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-hero__btn:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.bwc-hero__btn.is-primary{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.bwc-hero__btn.is-ghost{
border-color: color-mix(in srgb, var(--s) 60%, var(--border));
background: color-mix(in srgb, var(--s) 12%, transparent);
}
.bwc-hero__nav{ display:flex; flex-direction:column; gap: 10px; }
.bwc-hero__pill{
width:100%;
text-align:left;
border:1px solid transparent;
background: transparent;
color: inherit;
border-radius: 999px;
padding: 10px 12px;
cursor:pointer;
font-weight: 950;
letter-spacing: .02em;
position:relative;
overflow:hidden;
transition: transform 160ms ease, border-color 180ms ease, background 180ms ease;
}
.bwc-hero__pill:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--glass) 70%, transparent); }
.bwc-hero__pill.is-active{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bwc-hero__pill::after{
content:"";
position:absolute;
inset:-1px;
background: radial-gradient(520px 180px at 20% 50%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
opacity:0;
transition: opacity 180ms ease;
pointer-events:none;
}
.bwc-hero__pill:hover::after,
.bwc-hero__pill.is-active::after{ opacity: 1; }
.bwc-hero__meter{
margin-top: 2px;
height: 8px;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
overflow:hidden;
}
.bwc-hero__meter span{
display:block;
height:100%;
width: 10%;
border-radius: 999px;
background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 64%, transparent), color-mix(in srgb, var(--s) 40%, transparent));
transition: width 520ms cubic-bezier(.2,.9,.2,1);
}
.bwc-hero__kbd{ margin-top: 8px; font-size: 12px; opacity: .75; }
.bwc-hero__right{
position: relative;
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 26px 92px var(--shadow);
overflow:hidden;
padding: 12px;
--mx: 50%;
--my: 30%;
}
.bwc-hero__bg{
position:absolute; inset:-1px;
background:
radial-gradient(680px 420px at var(--mx) var(--my), color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
radial-gradient(520px 360px at 85% 25%, color-mix(in srgb, var(--h) 12%, transparent), transparent 64%);
opacity: .95;
pointer-events:none;
transform: translateZ(0);
}
.bwc-hero__right > *{ position:relative; z-index:1; }
.bwc-hero__stack{ display:flex; flex-direction:column; gap: 12px; }
.bwc-hero__panel{
border-radius: 22px;
transform: translateZ(0);
/* scroll micro-state */
opacity: calc(.55 + (var(--t, .0) * .45));
transform: translateY(calc((1 - var(--t, .0)) * 10px));
transition: opacity 120ms ease, transform 120ms ease;
}
.bwc-hero__panel.is-active .bwc-hero__card{ border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.bwc-hero__card{
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
padding: 14px 14px 12px;
overflow:hidden;
position:relative;
}
.bwc-hero__top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; margin-bottom: 10px; }
.bwc-hero__chip{
display:inline-flex;
padding: 8px 10px;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
font-size: 12px;
font-weight: 950;
}
.bwc-hero__live{
font-size: 12px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 60%, transparent);
border-radius: 14px;
padding: 8px 10px;
display:flex; align-items:center; gap: 8px;
opacity:.9;
}
.bwc-hero__live span{
width:8px; height:8px; border-radius: 99px;
background: color-mix(in srgb, var(--accent) 70%, transparent);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 36%, transparent);
animation: bwcHeroPulse 1.6s infinite;
}
@keyframes bwcHeroPulse{
0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 34%, transparent); }
70%{ box-shadow: 0 0 0 14px transparent; }
100%{ box-shadow: 0 0 0 0 transparent; }
}
.bwc-hero__hh{ margin: 0 0 8px; font-size: clamp(18px, 1.8vw, 26px); line-height:1.12; font-weight: 980; }
.bwc-hero__tx{ margin:0 0 10px; color: var(--muted); line-height:1.65; max-width: 80ch; }
.bwc-hero__list{ margin:0; padding-left: 18px; line-height:1.65; }
.bwc-hero__list li{ margin: 0 0 6px; }
.bwc-hero__media{
margin-top: 10px;
border-radius: 18px;
overflow:hidden;
border:1px solid var(--border);
background: color-mix(in srgb, var(--card) 80%, transparent);
}
.bwc-hero__media img{ width:100%; height:auto; display:block; }
.bwc-hero__fake{
margin-top: 10px;
height: 120px;
border-radius: 18px;
border:1px solid var(--border);
background:
linear-gradient(90deg, color-mix(in srgb, var(--glass) 60%, transparent), color-mix(in srgb, var(--card) 70%, transparent)),
radial-gradient(520px 220px at 20% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 64%);
}
.bwc-hero__arrows{
margin-top: 12px;
display:flex;
gap: 10px;
justify-content:flex-end;
}
.bwc-hero__arr{
width: 42px; height: 38px;
border-radius: 14px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 70%, transparent);
color: inherit;
cursor:pointer;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
font-weight: 950;
}
.bwc-hero__arr:hover{
transform: translateY(-2px);
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
/* Optional theming override */
.bwc-hero[data-theme="dark"]{ --bwc-theme: dark; }
.bwc-hero[data-theme="light"]{ --bwc-theme: light; }
/* --- Hero Scroll: Fullpage mode (snap 100vh) --- */
.bwc-hero[data-mode="fullpage"] .bwc-hero__right{
height: 100vh;
overflow-y: auto;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
padding: 0;
}
.bwc-hero[data-mode="fullpage"] .bwc-hero__stack{
gap: 0;
}
.bwc-hero[data-mode="fullpage"] .bwc-hero__panel{
scroll-snap-align: start;
min-height: 100vh;
padding: 12px;
display:flex;
align-items: center;
}
.bwc-hero[data-mode="fullpage"] .bwc-hero__card{
width: 100%;
max-width: 820px;
margin: 0 auto;
}
/* nicer scrollbars (optional) */
.bwc-hero[data-mode="fullpage"] .bwc-hero__right{
scrollbar-width: thin;
scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
.bwc-hero[data-mode="fullpage"] .bwc-hero__right::-webkit-scrollbar{ width: 10px; }
.bwc-hero[data-mode="fullpage"] .bwc-hero__right::-webkit-scrollbar-thumb{
background: color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: 999px;
border: 3px solid transparent;
background-clip: content-box;
}
/* ============ Marketing Tools (Calculator + Benchmark + Gate) ============ */
.bwc-tools{ padding: 24px 0; }
.bwc-tools *{ box-sizing: border-box; }
.bwc-tools__wrap{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.bwc-tools__head{ display:flex; justify-content:space-between; gap: 12px; align-items:flex-end; margin-bottom: 12px; }
.bwc-tools__title{ font-weight: 980; font-size: 18px; }
.bwc-tools__note{ color: var(--muted); font-size: 13px; max-width: 58ch; }
.bwc-tools__tabs{ display:flex; gap: 10px; flex-wrap:wrap; margin-bottom: 12px; }
.bwc-tools__tabs[data-tabs="0"]{ display:none; }
.bwc-tools__tab{
border:1px solid var(--border);
background: color-mix(in srgb, var(--glass) 65%, transparent);
color: inherit;
border-radius: 999px;
padding: 10px 12px;
cursor:pointer;
font-weight: 950;
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.bwc-tools__tab:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.bwc-tools__tab.is-active{
border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bwc-tools__shell{
border:1px solid var(--border);
border-radius: 28px;
background: color-mix(in srgb, var(--card) 88%, transparent);
box-shadow: 0 26px 90px var(--shadow);
overflow:hidden;
display:grid;
grid-template-columns: 1.05fr .95fr;
}
@media (max-width: 1024px){
.bwc-tools__shell{ grid-template-columns: 1fr; }
}
.bwc-tools__left{ padding: 14px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--glass) 55%, transparent); }
@media (max-width: 1024px){ .bwc-tools__left{ border-right:0; border-bottom: 1px solid var(--border); } }
.bwc-tools__right{ padding: 14px; }
.bwc-tools__toolT{ font-weight: 980; font-size: 18px; margin-bottom: 4px; }
.bwc-tools__toolS{ color: var(--muted); margin-bottom: 12px; }
.bwc-tools__box{
border:1px solid var(--border);
border-radius: 22px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
padding: 12px;
margin-bottom: 12px;
}
.bwc-tools__boxT{ font-weight: 950; margin-bottom: 10px; }
.bwc-tools__grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 640px){ .bwc-tools__grid{ grid-template-columns: 1fr; } }
.bwc-tools__row{ display:flex; flex-direction:column; gap: 6px; }
.bwc-tools__label{ font-size: 12px; opacity: .9; font-weight: 850; }
.bwc-tools__input{
width:100%;
border-radius: 14px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--card) 86%, transparent);
color: inherit;
padding: 10px 12px;
outline:none;
}
.bwc-tools__input.is-error{ border-color: color-mix(in srgb, var(--h) 45%, var(--border)); }
.bwc-tools__actions{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.bwc-tools__btn{
display:inline-flex; align-items:center; justify-content:center;
padding: 10px 14px;
border-radius: 16px;
text-decoration:none;
font-weight: 980;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit;
cursor:pointer;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-tools__btn:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--s) 70%, var(--border)); background: color-mix(in srgb, var(--s) 14%, transparent); }
.bwc-tools__micro{ font-size: 12px; opacity:.75; }
.bwc-tools__warn{
border:1px solid var(--border);
border-radius: 18px;
padding: 12px;
background: color-mix(in srgb, var(--h) 10%, transparent);
}
.bwc-tools__kpis{
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
margin-bottom: 12px;
}
@media (max-width: 640px){ .bwc-tools__kpis{ grid-template-columns: 1fr; } }
.bwc-tools__kpi{
border:1px solid var(--border);
border-radius: 22px;
padding: 12px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
}
.bwc-tools__kpiT{ font-size: 12px; opacity:.85; font-weight: 850; }
.bwc-tools__kpiV{ font-weight: 980; font-size: 22px; margin: 6px 0; }
.bwc-tools__kpiH{ color: var(--muted); font-size: 12px; line-height:1.55; }
.bwc-tools__bench{
border:1px solid var(--border);
border-radius: 22px;
padding: 12px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
margin-bottom: 12px;
}
.bwc-tools__benchT{ font-weight: 980; margin-bottom: 4px; }
.bwc-tools__benchMeta{ font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.bwc-tools__benchRows{ display:flex; flex-direction:column; gap: 8px; }
.bwc-tools__benchRow{ display:flex; justify-content:space-between; gap: 10px; }
.bwc-tools__benchK{ font-size: 11px; opacity:.8; font-weight: 900; letter-spacing: .06em; }
.bwc-tools__benchV{ font-size: 12px; opacity:.9; text-align:right; }
.bwc-tools__ins{
border:1px solid var(--border);
border-radius: 22px;
padding: 12px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
margin-bottom: 12px;
}
.bwc-tools__insT{ font-weight: 980; margin-bottom: 10px; }
.bwc-tools__insRows{ display:flex; flex-direction:column; gap: 10px; }
.bwc-tools__insRow{ padding: 10px; border-radius: 18px; border:1px solid var(--border); background: color-mix(in srgb, var(--card) 86%, transparent); }
.bwc-tools__insL{ font-weight: 950; margin-bottom: 6px; }
.bwc-tools__insTx{ color: var(--muted); line-height:1.6; }
.bwc-tools__gate{
border:1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
border-radius: 22px;
padding: 12px;
background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.bwc-tools__gateT{ font-weight: 980; margin-bottom: 4px; }
.bwc-tools__gateP{ color: var(--muted); margin-bottom: 10px; }
.bwc-tools__gateForm{ display:grid; grid-template-columns: 1fr; gap: 10px; }
.bwc-tools__cons{ display:flex; gap: 10px; align-items:flex-start; font-size: 12px; color: var(--muted); }
.bwc-tools__cons a{ color: inherit; text-decoration: underline; }
.bwc-tools__gateMsg{ font-size: 12px; opacity: .85; }
.bwc-tools__gateMsg.is-err{ opacity: 1; color: color-mix(in srgb, var(--h) 85%, black); }
@media (max-width: 900px){ .bwc-tools__grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
/* --- Marketing Tools: Advanced report unlock --- */
.bwc-tools__adv{
border:1px solid color-mix(in srgb, var(--accent) 60%, var(--border));
border-radius: 22px;
padding: 12px;
background: color-mix(in srgb, var(--accent) 8%, transparent);
margin-top: 12px;
}
.bwc-tools__advT{ font-weight: 980; margin-bottom: 4px; }
.bwc-tools__advMeta{ color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.bwc-tools__badges{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.bwc-tools__badge{
border:1px solid var(--border);
border-radius: 999px;
padding: 8px 10px;
background: color-mix(in srgb, var(--glass) 60%, transparent);
display:flex; gap: 8px; align-items:center;
}
.bwc-tools__badgeK{ font-size: 11px; opacity: .8; font-weight: 900; letter-spacing: .06em; }
.bwc-tools__badgeV{ font-size: 12px; font-weight: 980; }
.bwc-tools__badge[data-state="ottimo"]{ border-color: color-mix(in srgb, var(--s) 55%, var(--border)); }
.bwc-tools__badge[data-state="da migliorare"]{ border-color: color-mix(in srgb, var(--h) 55%, var(--border)); }
.bwc-tools__plan{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
@media (max-width: 900px){ .bwc-tools__plan{ grid-template-columns: 1fr; } }
.bwc-tools__planCol{
border:1px solid var(--border);
border-radius: 22px;
padding: 12px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
}
.bwc-tools__planT{ font-weight: 980; margin-bottom: 8px; }
.bwc-tools__planUl{ margin:0; padding-left: 18px; line-height: 1.65; }
.bwc-tools__planUl li{ margin: 0 0 6px; }
.bwc-tools__cta{
display:inline-flex;
align-items:center;
justify-content:center;
padding: 10px 14px;
border-radius: 16px;
text-decoration:none;
font-weight: 980;
border:1px solid color-mix(in srgb, var(--accent) 70%, var(--border));
background: color-mix(in srgb, var(--accent) 14%, transparent);
color: inherit;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.bwc-tools__cta:hover{ transform: translateY(-2px); border-color: color-mix(in srgb, var(--s) 70%, var(--border)); background: color-mix(in srgb, var(--s) 14%, transparent); }
/* ============ Marketing Tools – Skin “Console / Dynamic” (override) ============ */
.bwc-tools{
--bwc-primary:#0169B4; /* global primary */
--bwc-secondary:#E94E24;
--bwc-ink:#1c1c1c;
--bwc-muted:#7A7A7A;
--bwc-highlight:#2C3E48;
--accent: var(--bwc-accent, var(--bwc-primary));
--s: var(--bwc-secondary);
--h: var(--bwc-secondary);
--muted: var(--bwc-muted);
--border: color-mix(in srgb, var(--bwc-highlight) 25%, transparent);
--card: color-mix(in srgb, #fff 94%, transparent);
--glass: color-mix(in srgb, #fff 70%, transparent);
--shadow: color-mix(in srgb, #000 18%, transparent);
position: relative;
padding: 34px 0 42px;
}
html[data-bwc-theme="dark"] .bwc-tools,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-tools,
body.dark-mode .bwc-tools,
html[data-theme="dark"] .bwc-tools,
body.dark .bwc-tools{
--border: color-mix(in srgb, #fff 16%, transparent);
--card: color-mix(in srgb, #0f0f0f 86%, transparent);
--glass: color-mix(in srgb, #0f0f0f 60%, transparent);
--shadow: color-mix(in srgb, #000 60%, transparent);
}
.bwc-tools::before{
content:"";
position:absolute;
inset:-2px;
pointer-events:none;
/* site-aligned “soft glow” (matches BW‑C background mood) */
--g-blue: rgba(1,105,180,.12); /* #0169B4 */
--g-orange: rgba(233,78,36,.10); /* #E94E24 */
--g-slate: rgba(44,62,72,.10); /* #2C3E48 */
--g-op: .42;
background:
radial-gradient(980px 560px at 12% 18%, var(--g-blue), transparent 62%),
radial-gradient(920px 560px at 88% 22%, var(--g-orange), transparent 64%),
radial-gradient(760px 520px at 54% 92%, var(--g-slate), transparent 66%);
opacity: var(--g-op);
filter: none;
}
.bwc-tools__wrap{ position:relative; }
.bwc-tools__head{
align-items:flex-start;
gap: 16px;
margin-bottom: 16px;
}
.bwc-tools__title{
font-weight: 1000;
letter-spacing: -0.02em;
font-size: 20px;
}
.bwc-tools__note{
font-size: 13px;
opacity: .9;
border-left: 3px solid color-mix(in srgb, var(--accent) 60%, transparent);
padding-left: 10px;
}
/* Tabs as “pills” with animated glider */
.bwc-tools__tabs{
position: relative;
border:1px solid var(--border);
border-radius: 999px;
padding: 6px;
background: color-mix(in srgb, var(--glass) 58%, transparent);
overflow:hidden;
}
.bwc-tools__tab{
position: relative;
z-index: 2;
border:0;
background: transparent;
padding: 12px 14px;
border-radius: 999px;
font-weight: 950;
opacity: .85;
}
.bwc-tools__tab.is-active{ opacity: 1; }
.bwc-tools__glider{
position:absolute;
top:6px; left:6px;
height: calc(100% - 12px);
border-radius: 999px;
background: linear-gradient(120deg,
color-mix(in srgb, var(--accent) 18%, transparent),
color-mix(in srgb, var(--s) 14%, transparent)
);
border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 18%, transparent);
transition: transform 260ms cubic-bezier(.2,.8,.2,1), width 260ms cubic-bezier(.2,.8,.2,1);
z-index: 1;
}
/* Console shell */
.bwc-tools__shell{
border-radius: 30px;
overflow: hidden;
transform: translateZ(0);
backdrop-filter: blur(10px);
}
.bwc-tools__shell::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%),
linear-gradient(90deg, color-mix(in srgb, var(--s) 7%, transparent), transparent 55%);
opacity:.85;
}
.bwc-tools__left, .bwc-tools__right{ position:relative; }
.bwc-tools__left{
padding: 18px;
}
.bwc-tools__right{
padding: 18px;
}
/* Details (collapsible sections) */
.bwc-tools__details{
transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
.bwc-tools__details:hover{
transform: translateY(-1px);
border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.bwc-tools__summary{
list-style:none;
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
cursor:pointer;
user-select:none;
}
.bwc-tools__summary::-webkit-details-marker{ display:none; }
.bwc-tools__sumT{ font-weight: 1000; }
.bwc-tools__sumI{
width: 34px; height: 34px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--card) 88%, transparent);
transition: transform 200ms ease;
}
details[open] .bwc-tools__sumI{ transform: rotate(180deg); }
/* Inputs – more “alive” */
.bwc-tools__input{
border-radius: 16px;
padding: 12px 12px;
transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
}
.bwc-tools__input:focus{
border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}
.bwc-tools__input:hover{
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
/* Progress bar */
.bwc-tools__progress{
margin: 10px 0 10px;
display:flex;
align-items:center;
gap: 10px;
}
.bwc-tools__progressBar{
height: 10px;
flex: 1 1 auto;
border-radius: 999px;
border:1px solid var(--border);
background: color-mix(in srgb, var(--card) 90%, transparent);
position: relative;
overflow:hidden;
}
.bwc-tools__progressBar::before{
content:"";
position:absolute;
inset:0;
width: var(--w, 0%);
background: linear-gradient(90deg,
color-mix(in srgb, var(--accent) 55%, transparent),
color-mix(in srgb, var(--s) 55%, transparent)
);
}
.bwc-tools__progressTxt{
min-width: 44px;
font-weight: 950;
font-size: 12px;
opacity: .85;
}
.bwc-tools__progress .bwc-tools__progressBar{ }
.bwc-tools__progress .bwc-tools__progressBar{ }
.bwc-tools__progress .bwc-tools__progressBar{ }
.bwc-tools__progress .bwc-tools__progressBar{ }
.bwc-tools__progress .bwc-tools__progressBar{ }
.bwc-tools__progressBar{ --w:0%; }
.bwc-tools__progressBar{ }
.bwc-tools__progressBar{ }
.bwc-tools__progressBar{ }
.bwc-tools__progressBar{ }
.bwc-tools__hint{
margin-top: 6px;
font-size: 12px;
color: var(--muted);
}
/* Button “ready” pulse */
.bwc-tools__btn.is-ready{
box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 18%, transparent);
animation: bwcPulse 1.6s ease-in-out infinite;
}
@keyframes bwcPulse{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-2px); }
}
/* Results cards: more contrast and motion */
.bwc-tools__kpi, .bwc-tools__bench, .bwc-tools__ins, .bwc-tools__gate{
position:relative;
overflow:hidden;
}
.bwc-tools__kpi::before,
.bwc-tools__bench::before,
.bwc-tools__ins::before,
.bwc-tools__gate::before{
content:"";
position:absolute;
inset:-1px;
background:
radial-gradient(420px 220px at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
radial-gradient(420px 220px at 90% 70%, color-mix(in srgb, var(--s) 8%, transparent), transparent 60%);
opacity:.9;
pointer-events:none;
}
.bwc-tools__kpiV{
letter-spacing:-0.02em;
}
.bwc-tools__gate{
border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}
html[data-bwc-theme="light"] .bwc-tools,
html[data-icon-theme="light"] .bwc-tools,
html[data-theme="light"] .bwc-tools{
--border: color-mix(in srgb, var(--bwc-highlight) 25%, transparent);
--card: color-mix(in srgb, #fff 94%, transparent);
--glass: color-mix(in srgb, #fff 70%, transparent);
--shadow: color-mix(in srgb, #000 18%, transparent);
}
/* --- BWC Tools palette alignment (site-friendly) --- */
.bwc-tools{
--bwc-primary:#0169B4;
--bwc-secondary:#E94E24;
--bwc-ink:#1c1c1c;
--bwc-muted:#7A7A7A;
--bwc-highlight:#2C3E48;
--accent: var(--bwc-primary);
--s: var(--bwc-secondary);
--muted: var(--bwc-muted);
/* light defaults */
--border: color-mix(in srgb, var(--bwc-highlight) 22%, transparent);
--card: rgba(255,255,255,.86);
--glass: rgba(255,255,255,.72);
--shadow: rgba(0,0,0,.10);
color: var(--bwc-ink);
}
html[data-bwc-theme="dark"] .bwc-tools,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-tools,
body.dark-mode .bwc-tools,
html[data-theme="dark"] .bwc-tools,
body.dark .bwc-tools{
--border: color-mix(in srgb, #fff 16%, transparent);
--card: rgba(28,28,28,.86); /* #1c1c1c */
--glass: rgba(28,28,28,.72);
--shadow: rgba(0,0,0,.55);
color: #fff;
}
.bwc-tools::before{ opacity: .55; filter: saturate(1.0); }
html[data-bwc-theme="dark"] .bwc-tools::before,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-tools::before,
body.dark-mode .bwc-tools::before,
html[data-theme="dark"] .bwc-tools::before,
body.dark .bwc-tools::before{
opacity: .38;
}
/* Tabs + shell: keep them coherent in both themes */
.bwc-tools__tabs{
background: var(--glass);
border-color: var(--border);
}
.bwc-tools__glider{
background: linear-gradient(120deg,
color-mix(in srgb, var(--accent) 14%, transparent),
color-mix(in srgb, var(--s) 12%, transparent)
);
border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
box-shadow: 0 10px 26px rgba(1,105,180,.12);
}
html[data-bwc-theme="dark"] .bwc-tools__glider,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-tools__glider,
body.dark-mode .bwc-tools__glider{
box-shadow: 0 10px 26px rgba(0,0,0,.35);
}
/* Inputs: ensure readable text in both modes */
.bwc-tools__input{
background: color-mix(in srgb, var(--card) 92%, transparent);
color: inherit;
}
.bwc-tools__label{ color: color-mix(in srgb, currentColor 70%, var(--muted)); }
/* Reduce “too dark” blocks: right panel stays glassy instead of solid */
.bwc-tools__shell{
background: color-mix(in srgb, var(--card) 92%, transparent);
border-color: var(--border);
box-shadow: 0 22px 60px var(--shadow);
}
.bwc-tools__left, .bwc-tools__right{ background: transparent; }
/* --- Glow tuning (easy overrides) ---
You can override per page/section with:
.bwc-tools{ --g-blue: rgba(...); --g-orange: rgba(...); --g-slate: rgba(...); --g-op: .35; }
*/
html[data-bwc-theme="dark"] .bwc-tools::before,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-tools::before,
body.dark-mode .bwc-tools::before,
html[data-theme="dark"] .bwc-tools::before,
body.dark .bwc-tools::before{
--g-blue: rgba(1,105,180,.10);
--g-orange: rgba(233,78,36,.07);
--g-slate: rgba(44,62,72,.14);
--g-op: .28;
}
/* ============ BWC – Hero Product (lightweight cinematic) ============ */
.bwc-hp{
--accent: var(--bwc-accent, #0169B4);
--accent2: var(--bwc-accent2, #E94E24);
--ink: #1c1c1c;
--slate: #2C3E48;
--muted: #7A7A7A;
position: relative;
padding: 86px 0;
overflow: hidden;
}
.bwc-hp.is-full{ min-height: 100vh; display:flex; align-items:center; }
.bwc-hp::before{
content:"";
position:absolute; inset:-2px;
pointer-events:none;
background:
radial-gradient(1100px 620px at 12% 18%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
radial-gradient(980px 620px at 88% 20%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 64%),
radial-gradient(820px 560px at 52% 92%, color-mix(in srgb, var(--slate) 10%, transparent), transparent 66%);
opacity:.22;
}
html[data-bwc-theme="dark"] .bwc-hp,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-hp,
body.dark-mode .bwc-hp,
html[data-theme="dark"] .bwc-hp{
color:#fff;
}
html[data-bwc-theme="dark"] .bwc-hp::before,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-hp::before,
body.dark-mode .bwc-hp::before,
html[data-theme="dark"] .bwc-hp::before{
opacity:.18;
}
.bwc-hp__wrap{
width:min(1200px, calc(100% - 32px));
margin:0 auto;
display:grid;
grid-template-columns: 1.05fr .95fr;
gap: 28px;
align-items:center;
position:relative;
}
@media (max-width: 980px){
.bwc-hp__wrap{ grid-template-columns:1fr; gap: 18px; }
.bwc-hp{ padding: 64px 0; }
}
.bwc-hp__kicker{
display:inline-flex;
align-items:center;
gap:10px;
font-weight:900;
letter-spacing:.02em;
text-transform:uppercase;
font-size:12px;
opacity:.85;
margin-bottom: 12px;
}
.bwc-hp__title{
margin: 0 0 10px;
font-weight:1000;
letter-spacing:-.03em;
font-size: clamp(34px, 4.2vw, 54px);
line-height:1.02;
}
.bwc-hp__sub{
margin: 0 0 18px;
color: color-mix(in srgb, currentColor 72%, var(--muted));
max-width: 62ch;
}
.bwc-hp__cta{ display:flex; gap: 12px; flex-wrap:wrap; margin-bottom: 16px; }
.bwc-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding: 12px 16px;
border-radius: 999px;
font-weight: 950;
text-decoration:none;
border:1px solid color-mix(in srgb, currentColor 18%, transparent);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
will-change: transform;
}
.bwc-btn:hover{ transform: translateY(-1px); }
.bwc-btn--primary{
background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 88%, #fff 12%), color-mix(in srgb, var(--accent2) 22%, var(--accent) 78%));
color:#fff;
border-color: transparent;
box-shadow: 0 18px 50px color-mix(in srgb, var(--accent) 18%, transparent);
}
.bwc-btn--ghost{
background: color-mix(in srgb, #fff 40%, transparent);
}
html[data-bwc-theme="dark"] .bwc-btn--ghost,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-btn--ghost,
body.dark-mode .bwc-btn--ghost,
html[data-theme="dark"] .bwc-btn--ghost{
background: color-mix(in srgb, #000 22%, transparent);
}
.bwc-hp__meta{
display:flex; gap:10px; flex-wrap:wrap;
font-size: 12px; color: color-mix(in srgb, currentColor 70%, var(--muted));
}
.bwc-hp__meta span{
padding: 8px 10px;
border-radius: 999px;
background: color-mix(in srgb, #fff 46%, transparent);
border:1px solid color-mix(in srgb, currentColor 12%, transparent);
}
html[data-bwc-theme="dark"] .bwc-hp__meta span,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-hp__meta span,
body.dark-mode .bwc-hp__meta span,
html[data-theme="dark"] .bwc-hp__meta span{
background: color-mix(in srgb, #000 22%, transparent);
}
.bwc-hp__stage{ display:flex; justify-content:center; }
.bwc-hp__frame{
width:min(520px, 100%);
aspect-ratio: 16/11;
border-radius: 26px;
border:1px solid color-mix(in srgb, currentColor 14%, transparent);
background: color-mix(in srgb, #fff 72%, transparent);
box-shadow: 0 28px 70px rgba(0,0,0,.14);
position:relative;
overflow:hidden;
transform: perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--mx,0px), var(--my,0px), 0);
transition: transform 260ms cubic-bezier(.2,.8,.2,1);
}
html[data-bwc-theme="dark"] .bwc-hp__frame,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-hp__frame,
body.dark-mode .bwc-hp__frame,
html[data-theme="dark"] .bwc-hp__frame{
background: color-mix(in srgb, #1c1c1c 76%, transparent);
box-shadow: 0 28px 70px rgba(0,0,0,.45);
}
.bwc-hp__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bwc-hp__img--float{
inset:auto;
width: 42%;
height:auto;
right: 10%;
top: 8%;
filter: drop-shadow(0 24px 40px rgba(0,0,0,.25));
transform: translate3d(0, calc(var(--sp,0) * -14px), 0);
transition: transform .28s ease;
}
.bwc-hp__badge{
position:absolute;
left: 16px; bottom: 16px;
padding: 10px 12px;
border-radius: 999px;
font-weight: 950;
font-size: 12px;
background: color-mix(in srgb, var(--accent) 14%, #fff 86%);
border:1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
html[data-bwc-theme="dark"] .bwc-hp__badge,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-hp__badge,
body.dark-mode .bwc-hp__badge,
html[data-theme="dark"] .bwc-hp__badge{
background: color-mix(in srgb, var(--accent) 16%, #000 84%);
}
.bwc-hp__placeholder{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
font-weight:900; opacity:.65;
}
/* in-view animation */
.bwc-hp .bwc-hp__copy, .bwc-hp .bwc-hp__frame{ opacity:1; transform:none; }
.bwc-hp.is-ready .bwc-hp__copy{ opacity:1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }
.bwc-hp.is-ready .bwc-hp__frame{ opacity:1; transform: perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(var(--mx,0px), var(--my,0px), 0); transition: opacity .6s ease .08s, transform .6s ease .08s; }
/* ============ BWC – Showcase Slides (deliverables style) ============ */
.bwc-sc{
--accent: var(--bwc-accent, #0169B4);
--accent2: var(--bwc-accent2, #E94E24);
--slate: #2C3E48;
--muted: #7A7A7A;
width:min(1200px, calc(100% - 32px));
margin: 0 auto;
padding: 54px 0;
}
.bwc-sc__head{ margin-bottom: 18px; }
.bwc-sc__title{ margin:0 0 8px; font-weight:1000; letter-spacing:-.02em; font-size: clamp(26px, 2.6vw, 34px); }
.bwc-sc__sub{ margin:0; color: color-mix(in srgb, currentColor 68%, var(--muted)); max-width: 70ch; }
.bwc-sc__wrap{
display:grid;
grid-template-columns: 0.42fr 0.58fr;
gap: 18px;
align-items: stretch;
}
@media (max-width: 980px){
.bwc-sc__wrap{ grid-template-columns:1fr; }
}
.bwc-sc__tabs{
border:1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: 22px;
padding: 10px;
background: color-mix(in srgb, #fff 78%, transparent);
}
html[data-bwc-theme="dark"] .bwc-sc__tabs,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-sc__tabs,
body.dark-mode .bwc-sc__tabs,
html[data-theme="dark"] .bwc-sc__tabs{
background: color-mix(in srgb, #1c1c1c 78%, transparent);
}
.bwc-sc__tab{
width:100%;
text-align:left;
border:0;
background: transparent;
padding: 12px 12px;
border-radius: 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap: 10px;
font-weight: 950;
opacity:.85;
transition: background .18s ease, transform .18s ease, opacity .18s ease;
cursor:pointer;
}
.bwc-sc__tab:hover{ transform: translateY(-1px); opacity:1; }
.bwc-sc__tab.is-active{
background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), color-mix(in srgb, var(--accent2) 10%, transparent));
border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);
opacity:1;
}
.bwc-sc__tabN{ font-size: 13px; }
.bwc-sc__tabI{ opacity:.6; }
.bwc-sc__stage{
position:relative;
border-radius: 26px;
border:1px solid color-mix(in srgb, currentColor 12%, transparent);
background: color-mix(in srgb, #fff 78%, transparent);
overflow:hidden;
min-height: 380px;
}
html[data-bwc-theme="dark"] .bwc-sc__stage,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-sc__stage,
body.dark-mode .bwc-sc__stage,
html[data-theme="dark"] .bwc-sc__stage{
background: color-mix(in srgb, #1c1c1c 78%, transparent);
}
.bwc-sc__panel{
position:absolute; inset:0;
display:grid;
grid-template-columns: 1fr 1fr;
gap: 0;
align-items: stretch;
opacity:0;
transform: translateY(10px);
pointer-events:none;
}
@media (max-width: 980px){
.bwc-sc__panel{ grid-template-columns:1fr; }
.bwc-sc__panelMedia{ min-height: 220px; }
}
.bwc-sc__panel.is-active{
opacity:1;
transform: translateY(0);
pointer-events:auto;
transition: opacity .34s ease, transform .34s ease;
}
.bwc-sc__panelCopy{
padding: 18px 18px 18px;
}
.bwc-sc__big{
font-size: 56px;
font-weight: 1000;
letter-spacing:-.06em;
opacity: .12;
line-height: .9;
}
.bwc-sc__h{ margin: 6px 0 8px; font-weight: 1000; letter-spacing:-.02em; }
.bwc-sc__p{ margin: 0 0 14px; color: color-mix(in srgb, currentColor 70%, var(--muted)); }
.bwc-sc__panelMedia{
padding: 16px;
display:flex;
align-items:center;
justify-content:center;
}
.bwc-sc__frame{
width: min(420px, 100%);
aspect-ratio: 16/11;
border-radius: 22px;
border:1px solid color-mix(in srgb, currentColor 12%, transparent);
background: color-mix(in srgb, #fff 70%, transparent);
overflow:hidden;
box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
html[data-bwc-theme="dark"] .bwc-sc__frame,
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-sc__frame,
body.dark-mode .bwc-sc__frame,
html[data-theme="dark"] .bwc-sc__frame{
background: color-mix(in srgb, #000 18%, transparent);
box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.bwc-sc__frame img{ width:100%; height:100%; object-fit:cover; display:block; }
.bwc-sc__placeholder{
width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
font-weight:900; opacity:.6;
}
/* reveal */
.bwc-sc{ opacity:0; transform: translateY(10px); }
.bwc-sc.is-in{ opacity:1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }
/* reduced motion */
@media (prefers-reduced-motion: reduce){
.bwc-hp * , .bwc-sc * { transition: none !important; animation: none !important; }
}
/* Elementor editor safeguard */
.elementor-editor-active .bwc-hp .bwc-hp__copy,
.elementor-editor-active .bwc-hp .bwc-hp__frame{opacity:1 !important; transform:none !important;}
/* ============ BWC – Audit Builder (Modal) ============ */
.bwc-ab{ position: relative; }
.bwc-ab__open{
display:inline-flex; align-items:center; justify-content:center;
gap:10px; padding: 12px 16px; border-radius: 999px;
font-weight: 950; border:0; cursor:pointer;
background: linear-gradient(120deg, #0169B4, color-mix(in srgb, #0169B4 70%, #E94E24 30%));
color:#fff;
box-shadow: 0 18px 50px rgba(1,105,180,.20);
}
/* Se il tema/Elementor forza display sull’overlay, questa regola mantiene il comportamento corretto */
.bwc-ab__overlay[hidden],
.bwc-ab__modal[hidden]{
display: none !important;
}
/* Overlay (viewport fisso) */
.bwc-ab__overlay{
position: fixed;
inset: 0;
background: rgba(0,0,0,.74);
z-index: 99999;
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
overflow: hidden;
}
/* Box modale
Nota: overlay e box sono sibling nel markup, quindi il box deve stare sopra l’overlay.
*/
.bwc-ab__modal{
position: fixed;
left: 50%;
top: 16px;
transform: translateX(-50%);
z-index: 100000;
width: min(960px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
max-height: calc(100dvh - 32px);
border-radius: 22px;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Su mobile: box pieno (con padding) e scroll interno stabile */
@media (max-width: 860px){
.bwc-ab__overlay{
align-items: flex-start;
padding: 12px;
}
.bwc-ab__modal{
left: 12px;
right: 12px;
top: 12px;
bottom: 12px;
transform: none;
width: auto;
max-height: none;
}
}
html[data-icon-theme="light"] .bwc-ab__modal{
background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.92));
color:#1c1c1c;
border-color: rgba(0,0,0,.10);
}
.bwc-ab__top{
position: sticky;
top: 0;
z-index: 2;
display:flex; align-items:flex-start; justify-content:space-between;
gap: 14px;
padding: 16px 16px 12px;
border-bottom: 1px solid rgba(255,255,255,.10);
}
html[data-icon-theme="light"] .bwc-ab__top{ border-bottom-color: rgba(0,0,0,.08); }
.bwc-ab__title{ font-weight: 1000; letter-spacing:-.02em; font-size: 18px; }
.bwc-ab__sub{ opacity:.80; font-size: 13px; margin-top: 4px; max-width: 72ch; }
.bwc-ab__x{
width: 38px; height: 38px;
display:inline-flex; align-items:center; justify-content:center;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: inherit;
cursor:pointer;
}
html[data-icon-theme="light"] .bwc-ab__x{
border-color: rgba(0,0,0,.10);
background: rgba(0,0,0,.04);
}
.bwc-ab__grid{
flex: 1 1 auto;
min-height: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
touch-action: pan-y;
display:grid;
grid-template-columns: 1.05fr .95fr;
gap: 14px;
padding: 14px 14px 16px;
}
@media (max-width: 860px){
.bwc-ab__grid{ grid-template-columns:1fr; }
}
.bwc-ab__col{
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
padding: 14px;
background: rgba(255,255,255,.04);
}
html[data-icon-theme="light"] .bwc-ab__col{
border-color: rgba(0,0,0,.10);
background: rgba(0,0,0,.03);
}
.bwc-ab__lbl{ display:block; font-weight: 900; font-size: 12px; opacity: .9; margin: 10px 0 6px; }
.bwc-ab__sel, .bwc-ab__in, .bwc-ab__ta{
width: 100%;
border-radius: 14px;
padding: 10px 12px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(0,0,0,.20);
color: inherit;
}
html[data-icon-theme="light"] .bwc-ab__sel,
html[data-icon-theme="light"] .bwc-ab__in,
html[data-icon-theme="light"] .bwc-ab__ta{
border-color: rgba(0,0,0,.12);
background: rgba(255,255,255,.78);
color:#1c1c1c;
}
.bwc-ab__addons{ margin-top: 10px; display:grid; gap: 8px; }
.bwc-ab__add{ display:flex; gap: 10px; align-items:flex-start; font-size: 13px; opacity:.9; }
.bwc-ab__add input{ margin-top: 3px; }
.bwc-ab__col--sum{ display:flex; flex-direction:column; }
.bwc-ab__priceBox{
border-radius: 18px;
padding: 12px;
border: 1px solid rgba(1,105,180,.35);
background:
radial-gradient(700px 420px at 12% 18%, rgba(1,105,180,.18), transparent 62%),
radial-gradient(700px 420px at 88% 22%, rgba(233,78,36,.10), transparent 66%),
rgba(255,255,255,.04);
}
html[data-icon-theme="light"] .bwc-ab__priceBox{
background: rgba(1,105,180,.06);
border-color: rgba(1,105,180,.22);
}
.bwc-ab__priceLbl{ font-size: 12px; font-weight: 950; opacity:.85; }
.bwc-ab__price{ font-size: 34px; font-weight: 1000; letter-spacing:-.03em; margin-top: 6px; }
.bwc-ab__priceNote{ font-size: 12px; opacity:.75; margin-top: 6px; }
.bwc-ab__send{
margin-top: 12px;
border-radius: 999px;
padding: 12px 14px;
font-weight: 950;
border: 0;
background: #0169B4;
color:#fff;
cursor:pointer;
}
.bwc-ab__send:disabled{ opacity:.6; cursor:not-allowed; }
.bwc-ab__msg{ margin-top: 10px; font-size: 13px; min-height: 20px; opacity:.9; }
.bwc-ab__msg.is-ok{ color: color-mix(in srgb, #fff 85%, #0169B4); }
html[data-icon-theme="light"] .bwc-ab__msg.is-ok{ color: #0169B4; }
.bwc-ab__msg.is-err{ color: color-mix(in srgb, #fff 70%, #E94E24); }
html[data-icon-theme="light"] .bwc-ab__msg.is-err{ color: #E94E24; }
.bwc-ab__privacy{ margin-top: 10px; font-size: 12px; opacity:.7; }
/* Lock scroll pagina sotto (soprattutto iOS) */
body.bwc-ab--lock{
overflow: hidden !important;
position: fixed !important;
left: 0;
right: 0;
width: 100% !important;
}
/* ===== BWC global tokens (so widgets work anywhere, not only inside .bwc-* wrappers) ===== */
:root{
--bwc-accent:#0169B4;
--bwc-accent2:#E94E24;
--bwc-text:#7A7A7A;
--bwc-highlight:#2C3E48;
--bwc-dark:#1C1C1C;
--bwc-white:#FFFFFF;
--accent: var(--bwc-accent);
--accent2: var(--bwc-accent2);
--fg: var(--bwc-dark);
}
/* keep in sync with your switcher (data-icon-theme) */
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]){
--fg: var(--bwc-white);
}
/* ===== Fix/override bwc buttons (previous rule could be invalid if vars missing) ===== */
.bwc-btn--primary{
background: var(--accent);
background: linear-gradient(120deg,
color-mix(in srgb, var(--accent) 78%, transparent),
color-mix(in srgb, var(--accent2) 32%, var(--accent) 68%)
);
color:#fff;
border-color: transparent;
}
html[data-icon-theme="light"] .bwc-btn--ghost{
background: color-mix(in srgb, #000 6%, #fff);
color: var(--bwc-dark);
border-color: rgba(0,0,0,.12);
}
html:is([data-bwc-theme="dark"], [data-icon-theme="dark"]) .bwc-btn--ghost{
background: color-mix(in srgb, #fff 10%, transparent);
color: #fff;
border-color: rgba(255,255,255,.14);
}
/* ===== Audit Trigger placement + plain style ===== */
.bwc-audit-trigger{ display:inline-block; }
.bwc-audit-trigger--float-left,
.bwc-audit-trigger--float-right{
position: fixed; bottom: 24px; z-index: 9999;
}
.bwc-audit-trigger--float-left{ left: 24px; }
.bwc-audit-trigger--float-right{ right: 24px; }
.bwc-ab__plain{ background: transparent; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: inherit; font: inherit; }
/* Hero Product: simple link style */
.bwc-hp__link{display:inline-block;padding:12px 0;font-weight:600;text-decoration:underline;opacity:.9}
.bwc-hp__link:hover{opacity:1}
/* Showcase Slides: simple CTA */
.bwc-sc__cta--simple{display:inline-flex;align-items:center;gap:10px;padding:12px 0;font-weight:700;text-decoration:underline;opacity:.9}
.bwc-sc__cta--simple:hover{opacity:1}
/* ============================================================
BWC – Hero Timeline Lamp (pinned scroll timeline)
============================================================ */
.bwc-htl{
/* Scroll “consumed” inside the hero: steps * 100vh + extra */
min-height: calc((var(--steps, 4) * 100vh) + var(--bwc-htl-extra, 20vh));
position: relative;
padding: 18px 0;
overflow: visible;
}
/* The “pinned” surface. We use fixed positioning while the section is active,
to avoid sticky breaking when Elementor parents have overflow/transform. */
.bwc-htl__pin{ position: relative; }
.bwc-htl--pinned .bwc-htl__pin{
position: fixed;
top: var(--bwc-htl-sticky-top, 14px);
left: var(--bwc-htl-pin-left, 0px);
width: var(--bwc-htl-pin-width, 100%);
height: calc(100vh - var(--bwc-htl-sticky-top, 14px));
z-index: 3;
}
/* After the scroll-driven animation completes, anchor the surface at the bottom
of the section (sticky end-state) to prevent a large empty gap before the
next content (e.g., the footer) on mobile. */
.bwc-htl--ended .bwc-htl__pin{
/* Keep FIXED coordinates and release via translateY to avoid horizontal jump on the last scroll. */
position: fixed;
top: var(--bwc-htl-sticky-top, 14px);
left: var(--bwc-htl-pin-left, 0px);
width: var(--bwc-htl-pin-width, 100%);
bottom: auto;
height: calc(100vh - var(--bwc-htl-sticky-top, 14px));
z-index: 3;
transform: translateY(calc(-1 * var(--bwc-htl-release, 0px)));
will-change: transform;
}
.bwc-htl__inner{
display:grid;
gap:18px;
height: calc(100vh - var(--bwc-htl-sticky-top, 14px));
}
@media (min-width: 980px){
/* IMPORTANT: keep grid items stretched so the left column has full viewport height.
If align-items:start is used, the left column collapses to content height and
the lamp (absolute % positioning) stays near the top. */
.bwc-htl__inner{ grid-template-columns: .9fr 1.1fr; gap:34px; align-items:stretch; }
}
.bwc-htl__left{ position: relative; }
/* Desktop: lamp is centered in the left column and stays still (pinned). */
@media (min-width: 980px){
.bwc-htl__lampWrap{
position: absolute;
left: 50%;
top: var(--bwc-htl-lamp-top, 60%);
transform: translate(-50%, -50%);
display: grid;
justify-items: center;
gap: 12px;
}
}
/* Mobile: lamp above content */
@media (max-width: 979px){
.bwc-htl__lampWrap{
position: relative;
left: auto;
top: auto;
transform: none;
display: grid;
justify-items: start;
gap: 10px;
padding: 10px 0;
}
}
.bwc-htl__halo{
position: absolute;
left: 50%;
top: 44%;
transform: translate(-50%, -50%);
width: calc(var(--bwc-htl-lamp, 220px) * 1.7);
height: calc(var(--bwc-htl-lamp, 220px) * 1.7);
border-radius: 999px;
background: radial-gradient(circle at 50% 50%, rgba(255,214,102,.55), rgba(255,214,102,0) 68%);
filter: blur(14px);
opacity: var(--lamp, 0);
pointer-events: none;
z-index: 0;
}
.bwc-htl__lamp{ width: min(var(--bwc-htl-lamp, 220px), 22vw); height:auto; display:block; overflow: visible; position: relative; z-index: 1; }
/* More visible glow on dark themes (also avoids being clipped by SVG viewport) */
.bwc-htl__glowOuter{ fill: rgba(255,214,102,1); opacity: var(--lamp, 0); filter: blur(18px) drop-shadow(0 0 28px rgba(255,214,102,.75)); mix-blend-mode: screen; }
.bwc-htl__glowInner{ fill: rgba(255,214,102,1); opacity: var(--lamp, 0); filter: blur(8px) drop-shadow(0 0 16px rgba(255,214,102,.65)); mix-blend-mode: screen; }
.bwc-htl__bulb{ fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.35); stroke-width:2; }
.bwc-htl__base{ fill: rgba(255,255,255,.18); }
.bwc-htl__base2{ fill: rgba(255,255,255,.12); }
.bwc-htl__disclaimer{
margin:0;
max-width:34ch;
text-align:center;
line-height:1.35;
opacity: var(--disc, 0);
transform: translateY(calc((1 - var(--disc, 0)) * 8px));
transition: opacity .2s ease, transform .2s ease;
}
.bwc-htl__right{ position: relative; align-self:start; }
.bwc-htl__kicker{ margin:0 0 8px; opacity:.85; }
.bwc-htl__title{ margin:0 0 10px; font-size: clamp(28px, 4.2vw, 48px); line-height:1.05; }
.bwc-htl__sub{ margin:0 0 18px; line-height:1.55; max-width:60ch; opacity:.92; }
.bwc-htl__cards{ position: relative; min-height: 180px; }
.bwc-htl__card{
position:absolute; inset:0;
padding:14px;
border:1px solid rgba(255,255,255,.14);
border-radius:16px;
background: rgba(255,255,255,.04);
box-shadow: 0 10px 30px rgba(0,0,0,.12);
opacity:0; transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
pointer-events:none;
}
.bwc-htl__card.is-active{ opacity:1; transform:translateY(0); pointer-events:auto; }
.bwc-htl__cardT{ margin:0 0 6px; font-size:1.1rem; }
.bwc-htl__cardP{ margin:0; line-height:1.45; opacity:.92; }
.bwc-htl__progress{ display:flex; gap:8px; margin-top:12px; }
.bwc-htl__dot{ width:8px; height:8px; border-radius:999px; background: rgba(255,255,255,.25); }
.bwc-htl__dot.is-on{ background: rgba(255,255,255,.85); }
@media (max-width: 979px){
.bwc-htl__disclaimer{ text-align:left; }
}
@media (prefers-reduced-motion: reduce){
.bwc-htl__card, .bwc-htl__disclaimer{ transition:none; }
}
/* Mobile fixes (restore pinned effects + center lamp/message) */
@supports (height: 100svh){
.bwc-htl{
min-height: calc((var(--steps, 4) * 100svh) + var(--bwc-htl-extra, 20svh));
}
.bwc-htl--pinned .bwc-htl__pin{
height: calc(100svh - var(--bwc-htl-sticky-top, 14px));
}
.bwc-htl--ended .bwc-htl__pin{
height: calc(100svh - var(--bwc-htl-sticky-top, 14px));
}
}
@media (max-width: 767px){
.bwc-htl{
overflow-x: hidden;
}
/*
The pinned layer's left/width are locked by JS when the pin engages.
This preserves the original side margins and avoids tiny reflows caused by
mobile browser UI (URL bar) changes while scrolling.
*/
.bwc-htl--pinned .bwc-htl__pin{
max-width: 100% !important;
transform: translate3d(0,0,0);
}
.bwc-htl--ended .bwc-htl__pin{
max-width: 100% !important;
transform: translate3d(0,0,0);
}
/* Bigger lamp on mobile (22vw was too small on modern phones) */
.bwc-htl__lamp{
width: min(var(--bwc-htl-lamp, 260px), 50vw);
height: min(var(--bwc-htl-lamp, 260px), 50vw);
}
.bwc-htl__lampWrap{
justify-items: center;
width: 100%;
text-align: center;
}
.bwc-htl__left{
align-items: center;
text-align: center;
}
.bwc-htl__disclaimer{
align-self: center;
text-align: center;
margin-left: auto;
margin-right: auto;
}
}
/* --- Hero Timeline Lamp backdrop (prevents page bleed at unusual zoom while pinned) --- */
html.bwc-htl-backdrop,
html.bwc-htl-backdrop body {
background-color: var(--bwc-htl-backdrop, #050505) !important;
}
/* ============ Newsroom Blog (magazine) ============ */
.bwc-news{ padding: 24px 0; }
.bwc-news *{ box-sizing:border-box; }
.bwc-news__wrap{ max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.bwc-news__head{ display:grid; gap: 12px; margin-bottom: 14px; }
.bwc-news__titles{ display:grid; gap: 6px; }
.bwc-news__h{ margin: 0; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.12; font-weight: 950; }
.bwc-news__p{ margin: 0; color: var(--muted); max-width: 78ch; line-height: 1.6; }
.bwc-news__controls{ display:flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.bwc-news__search{ flex: 1 1 280px; min-width: 220px; display:flex; gap: 8px; align-items: center; padding: 10px 12px; border:1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--card) 92%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--shadow) 52%, transparent); }
.bwc-news__search input{ width: 100%; border: 0; outline: 0; background: transparent; color: var(--fg); font-size: 14px; }
.bwc-news__search svg{ width: 18px; height: 18px; opacity: .7; }
/* Search state (makes results obvious) */
.bwc-news__searchState{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 10px 12px; border:1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: 0 18px 50px color-mix(in srgb, var(--shadow) 40%, transparent); }
.bwc-news__searchStateL{ display:flex; flex-wrap: wrap; gap: 8px; align-items: baseline; min-width: 0; }
.bwc-news__searchStateLabel{ color: var(--muted); font-size: 13px; font-weight: 700; }
.bwc-news__searchStateQuery{ font-size: 14px; font-weight: 950; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.bwc-news__searchStateCount{ color: var(--muted); font-size: 13px; font-weight: 700; }
.bwc-news__searchStateClear{ border:1px solid var(--border); background: color-mix(in srgb, var(--glass) 70%, transparent); color: var(--fg); padding: 8px 12px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: transform .15s ease, background .15s ease; flex: 0 0 auto; }
.bwc-news__searchStateClear:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.bwc-news__tabs{ display:flex; gap: 8px; align-items:center; }
.bwc-news__tab{ border:1px solid var(--border); background: color-mix(in srgb, var(--card) 86%, transparent); color: var(--fg); padding: 9px 12px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.bwc-news__tab:hover{ transform: translateY(-1px); }
.bwc-news__tab.is-active{ border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.bwc-news__chips{ display:flex; flex-wrap: wrap; gap: 8px; }
.bwc-news__chip{ border:1px solid var(--border); background: color-mix(in srgb, var(--card) 82%, transparent); color: var(--fg); padding: 8px 11px; border-radius: 999px; font-size: 12px; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.bwc-news__chip:hover{ transform: translateY(-1px); }
.bwc-news__chip.is-active{ border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: color-mix(in srgb, var(--accent) 14%, var(--card)); }
.bwc-news__layout{ display:grid; grid-template-columns: 1.4fr .6fr; gap: 16px; align-items: start; }
@media (max-width: 980px){ .bwc-news__layout{ grid-template-columns: 1fr; } }
.bwc-news__main{ display:grid; gap: 14px; }
.bwc-news__panel{ display:none; }
.bwc-news__panel.is-active{ display:block; }
/* Featured */
.bwc-news__featured{ border:1px solid var(--border); border-radius: 22px; overflow:hidden; background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: 0 26px 90px var(--shadow); }
.bwc-news__featLink{ display:grid; grid-template-columns: 1fr; text-decoration:none; color: inherit; }
.bwc-news__featMedia{ position: relative; min-height: 240px; background: radial-gradient(800px 300px at 20% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%); }
.bwc-news__featMedia img{ width:100%; height: 320px; object-fit: cover; display:block; }
.bwc-news__featBody{ padding: 14px 14px 16px; display:grid; gap: 8px; }
.bwc-news__meta{ display:flex; flex-wrap:wrap; gap: 8px; align-items:center; color: var(--muted); font-size: 12px; }
.bwc-news__pill{ padding: 5px 9px; border-radius: 999px; border:1px solid var(--border); background: color-mix(in srgb, var(--glass) 75%, transparent); color: color-mix(in srgb, var(--accent) 55%, var(--fg)); font-weight: 800; letter-spacing: .02em; }
.bwc-news__featT{ margin:0; font-size: clamp(18px, 1.7vw, 26px); line-height:1.12; font-weight: 950; }
.bwc-news__featEx{ margin:0; color: var(--muted); line-height:1.6; }
/* Rail */
.bwc-news__rail{ border:1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: 0 18px 70px color-mix(in srgb, var(--shadow) 55%, transparent); overflow:hidden; }
.bwc-news__railHead{ display:flex; justify-content: space-between; align-items: center; padding: 12px 12px; border-bottom:1px solid var(--border); }
.bwc-news__railT{ margin:0; font-size: 14px; letter-spacing:.06em; text-transform: uppercase; font-weight: 950; }
.bwc-news__railAll{ font-size: 12px; color: color-mix(in srgb, var(--accent) 70%, var(--fg)); text-decoration:none; font-weight: 800; }
.bwc-news__railList{ list-style:none; margin:0; padding: 8px 8px 10px; display:grid; gap: 6px; }
.bwc-news__item{ border-radius: 14px; }
.bwc-news__link{ display:grid; gap: 4px; padding: 10px 10px; border-radius: 14px; text-decoration:none; color: inherit; transition: background .15s ease, transform .15s ease; }
.bwc-news__link:hover{ background: color-mix(in srgb, var(--accent) 10%, var(--glass)); transform: translateY(-1px); }
.bwc-news__k{ display:flex; flex-wrap:wrap; gap: 8px; align-items:center; color: var(--muted); font-size: 12px; }
.bwc-news__t{ margin:0; font-size: 15px; line-height:1.25; font-weight: 900; }
.bwc-news__empty{ margin: 0; padding: 12px 12px; color: var(--muted); font-size: 13px; }
/* Cards */
.bwc-news__cards{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px){ .bwc-news__cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px){ .bwc-news__cards{ grid-template-columns: 1fr; } }
.bwc-news__card{ border:1px solid var(--border); border-radius: 18px; overflow:hidden; background: color-mix(in srgb, var(--card) 84%, transparent); box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow) 50%, transparent); transition: transform .15s ease; }
.bwc-news__card:hover{ transform: translateY(-2px); }
.bwc-news__card a{ display:block; text-decoration:none; color: inherit; }
.bwc-news__cardMedia{ height: 150px; background: radial-gradient(520px 220px at 20% 10%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%); }
.bwc-news__cardMedia img{ width:100%; height: 150px; object-fit: cover; display:block; }
.bwc-news__cardBody{ padding: 12px 12px 14px; display:grid; gap: 6px; }
.bwc-news__cardT{ margin:0; font-size: 15px; line-height:1.2; font-weight: 950; }
.bwc-news__cardEx{ margin:0; color: var(--muted); line-height:1.55; font-size: 13px; }
/* Channels */
.bwc-news__channels{ display:grid; gap: 14px; }
.bwc-news__channel{ border:1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--card) 84%, transparent); box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow) 50%, transparent); overflow:hidden; }
.bwc-news__channelHead{ display:flex; justify-content: space-between; align-items:center; padding: 12px 12px; border-bottom:1px solid var(--border); }
.bwc-news__channelT{ margin:0; font-size: 14px; font-weight: 950; letter-spacing:.04em; text-transform: uppercase; }
.bwc-news__channelAll{ font-size: 12px; color: color-mix(in srgb, var(--accent) 70%, var(--fg)); text-decoration:none; font-weight: 800; }
.bwc-news__channelList{ padding: 10px 12px 12px; display:grid; gap: 8px; }
.bwc-news__mini{ display:block; }
.bwc-news__miniLink{ display:grid; gap: 4px; text-decoration:none; color: inherit; padding: 10px 10px; border-radius: 14px; transition: background .15s ease, transform .15s ease; }
.bwc-news__miniLink:hover{ background: color-mix(in srgb, var(--accent) 10%, var(--glass)); transform: translateY(-1px); }
.bwc-news__miniT{ font-weight: 900; font-size: 14px; line-height: 1.25; }
.bwc-news__railMeta{ color: var(--muted); font-size: 12px; }
/* Sidebar */
.bwc-news__side{ display:grid; gap: 12px; position: sticky; top: 18px; }
@media (max-width: 980px){ .bwc-news__side{ position: relative; top: auto; } }
.bwc-news__box{ border:1px solid var(--border); border-radius: 18px; background: color-mix(in srgb, var(--card) 84%, transparent); box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow) 50%, transparent); overflow:hidden; }
.bwc-news__boxHead{ display:flex; justify-content: space-between; align-items:center; padding: 12px 12px; border-bottom:1px solid var(--border); }
.bwc-news__boxT{ margin:0; font-size: 14px; font-weight: 950; letter-spacing:.04em; text-transform: uppercase; }
.bwc-news__boxHint{ font-size: 12px; color: var(--muted); }
.bwc-news__sideList{ list-style:none; margin:0; padding: 10px 12px 12px; display:grid; gap: 8px; }
.bwc-news__sideItem a{ color: inherit; text-decoration:none; font-weight: 850; line-height: 1.25; }
.bwc-news__sideItem a:hover{ color: color-mix(in srgb, var(--accent) 70%, var(--fg)); }
.bwc-news__tags{ display:flex; flex-wrap:wrap; gap: 8px; padding: 12px; }
.bwc-news__tag{ border:1px solid var(--border); background: color-mix(in srgb, var(--glass) 78%, transparent); padding: 7px 10px; border-radius: 999px; font-size: 12px; text-decoration:none; color: inherit; }
.bwc-news__tag:hover{ border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.bwc-news__cta{ border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: 18px; padding: 14px 14px; background: radial-gradient(900px 260px at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 62%), color-mix(in srgb, var(--card) 86%, transparent); box-shadow: 0 24px 90px var(--shadow); display:grid; gap: 8px; }
.bwc-news__ctaT{ margin:0; font-size: 16px; font-weight: 950; }
.bwc-news__ctaP{ margin:0; color: var(--muted); line-height: 1.6; }
.bwc-news__ctaBtn{ display:inline-flex; justify-content:center; align-items:center; width: fit-content; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 70%, black); color: white; text-decoration:none; font-weight: 900; }
.bwc-news__ctaBtn:hover{ filter: brightness(1.05); }
/* --- Magazine preset additions (mosaic + breaking ticker) --- */
.bwc-news--magazine .bwc-news__head{ margin-bottom: 10px; }
.bwc-news__breaking{ display:flex; gap: 10px; align-items:center; padding: 10px 12px; border:1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--card) 86%, transparent); box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow) 50%, transparent); overflow:hidden; margin-bottom: 12px; }
.bwc-news__breakingLabel{ font-size: 12px; font-weight: 950; letter-spacing:.08em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: var(--card); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); position: relative; z-index: 2; }
.bwc-news__breakingViewport{ flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.bwc-news__breakingTrack{ display:inline-flex; gap: 18px; align-items:center; white-space: nowrap; width: max-content; animation: bwc_breaking_scroll 26s linear infinite; will-change: transform; }
.bwc-news__breakingItem{ font-size: 13px; font-weight: 850; color: inherit; text-decoration:none; opacity: .92; position: relative; }
.bwc-news__breakingItem:hover{ color: color-mix(in srgb, var(--accent) 70%, var(--fg)); }
.bwc-news__breakingItem--dup{ opacity: .72; }
.bwc-news__breaking:hover .bwc-news__breakingTrack{ animation-play-state: paused; }
@keyframes bwc_breaking_scroll{ 0%{ transform: translateX(0); } 100%{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .bwc-news__breakingTrack{ animation: none; transform: none; } }
.bwc-news__mosaic{ display:grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.bwc-news__tile{ border:1px solid var(--border); border-radius: 20px; overflow:hidden; background: color-mix(in srgb, var(--card) 84%, transparent); box-shadow: 0 22px 80px color-mix(in srgb, var(--shadow) 55%, transparent); }
.bwc-news__tileLink{ display:block; text-decoration:none; color: inherit; height: 100%; position: relative; }
.bwc-news__tileMedia{ position:absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.02); }
.bwc-news__tileMedia::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.74)); }
.bwc-news__tileBody{ position: relative; z-index: 1; padding: 14px 14px 14px; display:grid; gap: 8px; min-height: 140px; align-content: end; }
.bwc-news__tileT{ margin:0; font-weight: 950; line-height: 1.08; }
.bwc-news__tile--big .bwc-news__tileBody{ min-height: 340px; }
.bwc-news__tile--big .bwc-news__tileT{ font-size: clamp(18px, 1.9vw, 30px); }
.bwc-news__tile--mid .bwc-news__tileBody{ min-height: 164px; }
.bwc-news__tile--mid .bwc-news__tileT{ font-size: 16px; }
.bwc-news__tile--sm .bwc-news__tileBody{ min-height: 140px; }
.bwc-news__tile--sm .bwc-news__tileT{ font-size: 15px; }
/* Mosaic placement */
.bwc-news__tile--big{ grid-row: span 2; }
.bwc-news__mosaic .bwc-news__tile:nth-child(4),
.bwc-news__mosaic .bwc-news__tile:nth-child(5){ grid-column: 2; }
@media (max-width: 980px){
.bwc-news__mosaic{ grid-template-columns: 1fr; }
.bwc-news__tile--big{ grid-row: auto; }
.bwc-news__mosaic .bwc-news__tile:nth-child(4),
.bwc-news__mosaic .bwc-news__tile:nth-child(5){ grid-column: auto; }
}
/* --- Spacious editorial UX polish (NYT-like, BW-C dark) --- */
.bwc-news--spacious{ padding: 34px 0; }
.bwc-news--spacious .bwc-news__wrap{ max-width: 1280px; padding: 0 18px; }
.bwc-news--spacious .bwc-news__head{ gap: 16px; margin-bottom: 22px; }
.bwc-news--spacious .bwc-news__controls{
gap: 14px;
padding: 12px;
border: 1px solid var(--border);
border-radius: 18px;
background: color-mix(in srgb, var(--glass) 75%, transparent);
backdrop-filter: blur(14px);
box-shadow: 0 18px 60px color-mix(in srgb, var(--shadow) 55%, transparent);
}
@supports (position: sticky){
.bwc-news--spacious .bwc-news__controls{
position: sticky;
top: var(--bwc-news-sticky-top, 78px);
z-index: 12;
}
}
.bwc-news--spacious .bwc-news__search input{
height: 44px;
font-size: 14px;
}
.bwc-news--spacious .bwc-news__tabs{ gap: 8px; }
.bwc-news--spacious .bwc-news__tab{ padding: 9px 12px; }
.bwc-news--spacious .bwc-news__chips{ gap: 8px; }
@media (max-width: 768px){
.bwc-news--spacious .bwc-news__chips{
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.bwc-news--spacious .bwc-news__chips::-webkit-scrollbar{ display:none; }
.bwc-news--spacious .bwc-news__chip{ white-space: nowrap; }
}
.bwc-news--spacious .bwc-news__layout{ gap: 28px; }
.bwc-news--spacious .bwc-news__main{ gap: 22px; }
.bwc-news--spacious .bwc-news__featured,
.bwc-news--spacious .bwc-news__mosaic,
.bwc-news--spacious .bwc-news__rail,
.bwc-news--spacious .bwc-news__box,
.bwc-news--spacious .bwc-news__cards,
.bwc-news--spacious .bwc-news__cta{
box-shadow: 0 26px 90px color-mix(in srgb, var(--shadow) 62%, transparent);
}
.bwc-news--spacious .bwc-news__featBody{ padding: 18px 18px 20px; gap: 10px; }
.bwc-news--spacious .bwc-news__featT{ font-size: clamp(24px, 2.2vw, 36px); line-height: 1.08; letter-spacing: -0.01em; }
.bwc-news--spacious .bwc-news__featEx{ font-size: 14px; line-height: 1.6; }
.bwc-news--spacious .bwc-news__railHead,
.bwc-news--spacious .bwc-news__boxHead{
padding: 14px 14px;
}
.bwc-news--spacious .bwc-news__railList{ padding: 10px 10px 12px; gap: 8px; }
.bwc-news--spacious .bwc-news__link{
padding: 12px 12px;
border-radius: 14px;
}
.bwc-news--spacious .bwc-news__t{ font-size: 16px; line-height: 1.22; }
.bwc-news--spacious .bwc-news__card{
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.bwc-news--spacious .bwc-news__card:hover{
transform: translateY(-4px);
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.bwc-news--spacious .bwc-news__cardBody{ padding: 14px 14px 16px; gap: 8px; }
.bwc-news--spacious .bwc-news__cardT{ line-height: 1.16; letter-spacing: -0.01em; }
.bwc-news--spacious .bwc-news__cardEx{ line-height: 1.6; }
.bwc-news--spacious .bwc-news__mosaic{ gap: 14px; }
.bwc-news--spacious .bwc-news__mosaicTile{ border-radius: 20px; }
.bwc-news--spacious .bwc-news__mosaicOverlay{ padding: 16px 16px 18px; }
@media (prefers-reduced-motion: no-preference){
.bwc-news--spacious a,
.bwc-news--spacious button{
transition: filter .15s ease, transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.bwc-news--spacious .bwc-news__chip:hover{ transform: translateY(-1px); }
.bwc-news--spacious .bwc-news__link:hover{ transform: translateY(-2px); }
}
/* Better focus for keyboard navigation */
.bwc-news--spacious a:focus-visible,
.bwc-news--spacious button:focus-visible,
.bwc-news--spacious input:focus-visible{
outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
outline-offset: 2px;
}