@font-face {
font-family: 'Bricolage Grotesque';
src: url('fonts/bricolage-latin.woff2') format('woff2-variations'), url('fonts/bricolage-latin.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-display: swap;
}
:root {
--bg: #FBF6EE;
--surface: #FFFFFF;
--surface-sunken: #F3ECE1;
--surface-hover: #F7F0E6;
--ink: #141210;
--ink-muted: #57514A;
--ink-faint: #6E665D;
--line: #E7DED1;
--line-strong: #D5C8B6;
--accent: #6A3CF0;
--accent-pressed: #5A2EDB;
--accent-ink: #FFFFFF;
--accent-wash: #ECE5FF;
--success: #1F8A55;
--success-wash: #D9F2E3;
--warning: #A35A06;
--warning-wash: #FBEBD5;
--danger: #C62F25;
--danger-wash: #FCE2DE;
--info: #2C63D8;
--info-wash: #E0EAFD;
--shadow-1: 0 1px 2px rgba(20, 18, 16, 0.06);
--shadow-2: 0 4px 14px rgba(20, 18, 16, 0.08);
--shadow-3: 0 18px 48px rgba(20, 18, 16, 0.16);
--scrim: rgba(20, 18, 16, 0.36);
--wh-paper: #FFFFFF;
--wh-edge: #141210;
--wh-hard: #141210;
--wh-orange: #FF5A1F;
--wh-orange-soft: #FFE3D4;
--wh-violet: #6A3CF0;
--wh-violet-soft: #ECE5FF;
--wh-ok: #1F8A55;
--wh-ok-soft: #D9F2E3;
--wh-sched: #2C63D8;
--wh-sched-soft: #E0EAFD;
--wh-sunset: linear-gradient(170deg, #5B34E6 0%, #9C45DE 38%, #F25C8C 70%, #FF8A4C 100%);
--wh-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
--wh-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='13' cy='19' r='7.4' fill='%23141210'/%3E%3Cg fill='none' stroke='%23141210' stroke-width='3.3' stroke-linecap='round'%3E%3Cpath d='M13 8.3V4.8'/%3E%3Cpath d='M20.5 11.5 23 9'/%3E%3Cpath d='M23.7 19h3.5'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--bg: #141210;
--surface: #1F1B18;
--surface-sunken: #191613;
--surface-hover: #26211D;
--ink: #FBF6EE;
--ink-muted: #C2B8AC;
--ink-faint: #A39889;
--line: #352F29;
--line-strong: #4A4239;
--accent: #9B7BFF;
--accent-pressed: #B39BFF;
--accent-ink: #141210;
--accent-wash: #2A2247;
--success: #7DD6A3;
--success-wash: #173424;
--warning: #E0A863;
--warning-wash: #2E2418;
--danger: #F59B90;
--danger-wash: #3E1D19;
--info: #8FB2F7;
--info-wash: #1B2642;
--scrim: rgba(8, 6, 4, 0.62);
--wh-paper: #1F1B18;
--wh-edge: #FBF6EE;
--wh-hard: #6A3CF0;
--wh-orange-soft: #44251A;
--wh-violet: #9B7BFF;
--wh-violet-soft: #2A2247;
--wh-ok: #7DD6A3;
--wh-ok-soft: #173424;
--wh-sched: #8FB2F7;
--wh-sched-soft: #1B2642;
}
}
:root[data-theme='dark'] {
--bg: #141210;
--surface: #1F1B18;
--surface-sunken: #191613;
--surface-hover: #26211D;
--ink: #FBF6EE;
--ink-muted: #C2B8AC;
--ink-faint: #A39889;
--line: #352F29;
--line-strong: #4A4239;
--accent: #9B7BFF;
--accent-pressed: #B39BFF;
--accent-ink: #141210;
--accent-wash: #2A2247;
--success: #7DD6A3;
--success-wash: #173424;
--warning: #E0A863;
--warning-wash: #2E2418;
--danger: #F59B90;
--danger-wash: #3E1D19;
--info: #8FB2F7;
--info-wash: #1B2642;
--scrim: rgba(8, 6, 4, 0.62);
--wh-paper: #1F1B18;
--wh-edge: #FBF6EE;
--wh-hard: #6A3CF0;
--wh-orange-soft: #44251A;
--wh-violet: #9B7BFF;
--wh-violet-soft: #2A2247;
--wh-ok: #7DD6A3;
--wh-ok-soft: #173424;
--wh-sched: #8FB2F7;
--wh-sched-soft: #1B2642;
}
.sh-mark {
display: inline-block;
flex: none;
width: 34px;
height: 34px;
border: 2px solid var(--wh-edge);
border-radius: 10px;
background: url(img/wooophub-marchio.svg) center / cover no-repeat, var(--wh-orange);
box-shadow: 3px 3px 0 var(--wh-hard);
}
.sh-hub {
color: var(--wh-orange);
}
.sh-btn--primary {
border-color: var(--wh-edge);
background: var(--wh-orange);
color: #141210;
}
.sh-btn--primary:hover {
background: #FF6D38;
}
.sh-body--land {
background: var(--bg);
color: var(--ink);
font-size: 16px;
line-height: 1.6;
}
.sh-body--land h1,
.sh-body--land h2,
.sh-body--land h3 {
font-family: var(--wh-display);
text-wrap: balance;
}
.sh-body--land [data-l='en'],
html[data-lang='en'] .sh-body--land [data-l='it'] {
display: none;
}
html[data-lang='en'] .sh-body--land [data-l='en'] {
display: revert;
}
.sh-body--land a:focus-visible,
.sh-body--land button:focus-visible,
.sh-body--land input:focus-visible {
outline: 3px solid var(--wh-violet);
outline-offset: 2px;
}
.sh-land__bar {
position: sticky;
top: 0;
z-index: 20;
max-width: none;
padding: 14px max(16px, calc((100vw - 1160px) / 2));
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: saturate(1.4) blur(10px);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid transparent;
transition: border-color 200ms var(--ease);
}
.wh-scrolled .sh-land__bar {
border-bottom-color: var(--line);
}
.sh-land__brand {
gap: 10px;
font: 800 25px/1 var(--wh-display);
letter-spacing: -0.04em;
color: var(--ink);
text-decoration: none;
}
.wh-nav {
display: flex;
align-items: center;
gap: 18px;
font-weight: 500;
font-size: 15px;
}
.wh-nav > a:not(.sh-btn) {
color: var(--ink);
text-decoration: none;
}
.wh-nav > a:not(.sh-btn):hover {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
.wh-seg {
display: inline-flex;
padding: 3px;
border: 1.5px solid var(--wh-edge);
border-radius: 11px;
background: var(--wh-paper);
}
.wh-seg button {
padding: 6px 9px;
border: 0;
border-radius: 8px;
background: none;
color: var(--ink);
font: 700 12.5px/1 var(--sans);
cursor: pointer;
}
.wh-seg button[aria-pressed='true'] {
background: var(--ink);
color: var(--bg);
}
.sh-body--land .sh-btn {
min-height: 50px;
padding: 0 22px;
border: 2px solid var(--wh-edge);
border-radius: 12px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.sh-body--land .sh-btn--primary {
background: var(--wh-orange);
color: #141210;
box-shadow: 4px 4px 0 var(--wh-hard);
}
.sh-body--land .sh-btn--primary:hover {
background: var(--wh-orange);
transform: translate(-1px, -1px);
box-shadow: 5px 5px 0 var(--wh-hard);
}
.sh-body--land .sh-btn--primary:active {
transform: translate(3px, 3px);
box-shadow: 1px 1px 0 var(--wh-hard);
}
.sh-body--land .sh-btn--outline,
.sh-body--land .sh-entra__google {
background: var(--wh-paper);
color: var(--ink);
}
.sh-body--land .sh-btn--outline:hover,
.sh-body--land .sh-entra__google:hover {
background: var(--wh-paper);
box-shadow: 3px 3px 0 var(--wh-hard);
transform: translate(-1px, -1px);
}
.sh-body--land .sh-btn--quiet {
border-color: transparent;
color: var(--ink);
}
.sh-land__bar .sh-btn {
min-height: 42px;
padding: 0 16px;
font-size: 14.5px;
border-color: var(--wh-edge);
background: var(--ink);
color: var(--bg);
}
.sh-land__bar .sh-btn:hover {
background: var(--ink);
color: var(--bg);
box-shadow: 3px 3px 0 var(--wh-orange);
transform: translate(-1px, -1px);
}
.wh-arrow {
width: 18px;
height: 18px;
}
.sh-land {
max-width: 1160px;
padding: 0 16px 96px;
}
.sh-land__hero {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
gap: clamp(28px, 4vw, 56px);
align-items: center;
max-width: none;
padding: clamp(24px, 5vw, 64px) 0;
}
.wh-hero__copy {
display: grid;
gap: 22px;
justify-items: start;
}
.sh-land__h1 {
font-size: clamp(42px, 5.8vw, 80px);
font-weight: 800;
line-height: 0.94;
letter-spacing: -0.045em;
}
.wh-hl {
position: relative;
z-index: 0;
white-space: nowrap;
}
.wh-hl::after {
content: '';
position: absolute;
z-index: -1;
left: -0.06em;
right: -0.06em;
bottom: 0.06em;
height: 0.34em;
border-radius: 0.08em;
background: var(--wh-orange);
transform: rotate(-1.2deg) scaleX(var(--wh-hl, 1));
transform-origin: left center;
}
.sh-land__sub {
margin: 0;
max-width: 42ch;
font-size: clamp(17px, 1.6vw, 20px);
color: var(--ink-muted);
}
.wh-cta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.sh-land__go {
margin: 0;
}
.wh-fine {
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
font-size: 14.5px;
color: var(--ink-muted);
}
.wh-fine span {
display: inline-flex;
gap: 7px;
align-items: center;
}
.wh-fine svg {
width: 16px;
height: 16px;
color: var(--wh-ok);
}
.wh-collage {
position: relative;
min-height: 470px;
}
.wh-photo {
position: absolute;
inset: 0 0 0 8%;
overflow: hidden;
border: 2px solid var(--wh-edge);
border-radius: 28px;
background:
radial-gradient(60% 55% at 70% 30%, rgba(255, 214, 170, 0.9), rgba(255, 214, 170, 0) 70%),
radial-gradient(70% 60% at 25% 85%, rgba(106, 60, 240, 0.55), rgba(106, 60, 240, 0) 70%),
linear-gradient(160deg, #FFB27A, #F25C8C 60%, #9C45DE);
box-shadow: 6px 6px 0 var(--wh-hard);
}
.wh-photo__big {
position: absolute;
right: 12%;
top: 20%;
font-size: clamp(110px, 14vw, 170px);
line-height: 1;
filter: drop-shadow(0 18px 24px rgba(40, 10, 40, 0.25));
transform: translateY(calc(var(--wh-y, 0) * -40px)) rotate(calc(var(--wh-y, 0) * 8deg));
}
.wh-float {
position: absolute;
display: flex;
gap: 11px;
align-items: center;
padding: 12px 14px;
border: 2px solid var(--wh-edge);
border-radius: 16px;
background: var(--wh-paper);
color: var(--ink);
box-shadow: 4px 4px 0 var(--wh-hard);
font-size: 14px;
line-height: 1.3;
}
.wh-float b {
display: block;
font-size: 14.5px;
}
.wh-float small {
color: var(--ink-muted);
font-size: 12.5px;
}
.wh-f1 { left: 0; top: 9%; }
.wh-f2 { right: -2%; top: 52%; }
.wh-f3 { left: 3%; bottom: 7%; }
.wh-av {
display: grid;
flex: none;
place-items: center;
width: 36px;
height: 36px;
border: 2px solid var(--wh-edge);
border-radius: 50%;
font-size: 18px;
}
.wh-tick {
display: grid;
flex: none;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: #1F8A55;
color: #FFFFFF;
}
.wh-tick svg {
width: 14px;
height: 14px;
}
.wh-num {
display: block;
font: 800 26px/1 var(--wh-display);
letter-spacing: -0.03em;
}
@media (prefers-reduced-motion: no-preference) {
.wh-f1 { animation: wh-bob 5.5s var(--ease) infinite; }
.wh-f2 { animation: wh-bob 6.5s var(--ease) -2s infinite; }
.wh-f3 { animation: wh-bob 6s var(--ease) -4s infinite; }
.wh-in {
animation: wh-rise 700ms var(--ease) both;
}
@keyframes wh-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes wh-rise {
from { opacity: 0; transform: translateY(18px); }
}
}
.wh-story {
position: relative;
height: 330vh;
margin: clamp(24px, 6vw, 72px) 0 0;
}
.wh-story__pin {
position: sticky;
top: 72px;
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(28px, 5vw, 72px);
align-items: center;
height: calc(100vh - 72px);
min-height: 560px;
}
.wh-story__texts {
display: grid;
gap: 18px;
}
.wh-eyebrow {
margin: 0;
font-weight: 700;
color: var(--wh-violet);
}
.wh-chaps {
display: grid;
}
.wh-chap {
grid-area: 1 / 1;
opacity: 0;
transform: translateY(22px);
transition: opacity 420ms var(--ease), transform 520ms var(--ease);
pointer-events: none;
}
.wh-chap.is-on {
opacity: 1;
transform: none;
pointer-events: auto;
}
.wh-chap h2 {
margin: 0 0 14px;
font-size: clamp(34px, 4.4vw, 58px);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.04em;
}
.wh-chap p {
margin: 0;
max-width: 40ch;
font-size: 18px;
color: var(--ink-muted);
}
.wh-steps {
display: flex;
gap: 8px;
margin: 8px 0 0;
padding: 0;
list-style: none;
}
.wh-steps li {
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 2px solid var(--wh-edge);
border-radius: 50%;
background: var(--wh-paper);
font: 800 16px/1 var(--wh-display);
transition: background-color 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease);
}
.wh-steps li.is-on {
background: var(--wh-orange);
color: #141210;
transform: scale(1.08);
}
.wh-stage {
position: relative;
display: grid;
height: min(560px, calc(100vh - 140px));
}
.wh-scene {
grid-area: 1 / 1;
position: relative;
display: grid;
align-content: center;
justify-items: center;
gap: 16px;
min-height: 0;
padding: clamp(18px, 3vw, 34px);
overflow: hidden;
border: 2px solid var(--wh-edge);
border-radius: 28px;
background: var(--surface-sunken);
box-shadow: 6px 6px 0 var(--wh-hard);
opacity: 0;
transform: translateY(26px) scale(0.97);
transition: opacity 460ms var(--ease), transform 560ms var(--ease);
}
.wh-scene.is-on {
opacity: 1;
transform: none;
}
.wh-scene--live {
background: var(--wh-sunset);
}
.wh-week {
width: 100%;
max-width: 520px;
padding: 18px;
border: 2px solid var(--wh-edge);
border-radius: 20px;
background: var(--wh-paper);
}
.wh-week__head {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 14px;
font-weight: 700;
}
.wh-week__head small {
margin-left: auto;
font-weight: 500;
color: var(--ink-muted);
}
.wh-week__grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 6px;
}
.wh-day {
display: grid;
align-content: start;
gap: 6px;
min-height: 190px;
padding: 6px 4px;
border-radius: 10px;
background: var(--surface-sunken);
font-size: 12px;
text-align: center;
color: var(--ink-muted);
}
.wh-slot {
display: grid;
gap: 2px;
padding: 7px 3px;
border: 1.5px solid var(--wh-edge);
border-radius: 9px;
background: var(--wh-orange-soft);
color: var(--ink);
font-size: 11.5px;
font-weight: 700;
line-height: 1.15;
opacity: 0;
transform: translateY(10px) scale(0.9);
transition: opacity 300ms var(--ease), transform 380ms cubic-bezier(0.3, 1.5, 0.5, 1);
transition-delay: calc(var(--d, 0) * 120ms + 200ms);
}
.wh-slot span {
font-size: 17px;
}
.wh-slot--v { background: var(--wh-violet-soft); }
.wh-slot--g { background: var(--wh-ok-soft); }
.is-on .wh-slot {
opacity: 1;
transform: none;
}
.wh-phone {
width: min(290px, 100%);
padding: 14px;
border: 2px solid var(--wh-edge);
border-radius: 34px;
background: var(--wh-paper);
box-shadow: 4px 4px 0 var(--wh-hard);
}
.wh-phone__img {
display: grid;
place-items: center;
height: 170px;
border-radius: 20px;
background: linear-gradient(150deg, #FFD3A8, #FF8A4C 55%, #F25C8C);
font-size: 76px;
}
.wh-phone__cap {
margin: 12px 4px;
font-size: 14px;
line-height: 1.4;
}
.wh-phone__acts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.wh-pb {
display: grid;
place-items: center;
min-height: 42px;
border: 2px solid var(--wh-edge);
border-radius: 12px;
font-size: 14px;
font-weight: 700;
}
.wh-pb--ok {
background: var(--wh-orange);
color: #141210;
box-shadow: 3px 3px 0 var(--wh-hard);
}
.is-on .wh-pb--ok {
animation: wh-press 2.4s var(--ease) 700ms both;
}
.wh-badge {
position: absolute;
top: 14%;
right: 8%;
display: flex;
gap: 8px;
align-items: center;
padding: 10px 14px;
border: 2px solid var(--wh-edge);
border-radius: 14px;
background: var(--wh-paper);
box-shadow: 4px 4px 0 var(--wh-hard);
font-weight: 700;
font-size: 14px;
opacity: 0;
transform: scale(0.6) rotate(-6deg);
transition: opacity 260ms var(--ease) 1.2s, transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1) 1.2s;
}
.is-on .wh-badge {
opacity: 1;
transform: rotate(3deg);
}
@keyframes wh-press {
0%, 30% { transform: none; box-shadow: 3px 3px 0 var(--wh-hard); }
40% { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--wh-hard); }
55%, 100% { transform: none; box-shadow: 3px 3px 0 var(--wh-hard); background: var(--wh-ok-soft); color: var(--ink); }
}
.wh-post {
width: min(320px, 100%);
overflow: hidden;
border: 2px solid #141210;
border-radius: 22px;
background: #FFFFFF;
color: #141210;
box-shadow: 6px 6px 0 #141210;
transform: rotate(-2deg);
}
.wh-post__top {
display: flex;
gap: 10px;
align-items: center;
padding: 12px 14px;
font-size: 14px;
font-weight: 700;
}
.wh-post__top .wh-av {
width: 30px;
height: 30px;
border-color: #141210;
font-size: 15px;
}
.wh-post__img {
display: grid;
place-items: center;
height: 190px;
background: linear-gradient(160deg, #FFE7C2, #FFB27A);
font-size: 84px;
}
.wh-post__foot {
display: flex;
gap: 8px;
align-items: center;
padding: 12px 14px;
font-size: 14px;
font-weight: 700;
}
.wh-heart {
color: #E0245E;
font-size: 20px;
}
.is-on .wh-heart {
animation: wh-beat 900ms var(--ease) 600ms 2;
}
.wh-live {
position: absolute;
left: 7%;
bottom: 9%;
display: flex;
gap: 8px;
align-items: center;
padding: 10px 14px;
border: 2px solid #141210;
border-radius: 14px;
background: #FFFFFF;
color: #141210;
box-shadow: 4px 4px 0 #141210;
font-size: 14px;
font-weight: 700;
opacity: 0;
transform: translateY(14px);
transition: opacity 300ms var(--ease) 900ms, transform 420ms var(--ease) 900ms;
}
.is-on .wh-live {
opacity: 1;
transform: none;
}
@keyframes wh-beat {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.45); }
}
.wh-band {
margin: clamp(40px, 8vw, 96px) calc(50% - 50vw) 0;
padding: clamp(56px, 8vw, 104px) max(16px, calc((100vw - 1160px) / 2));
background: var(--wh-sunset);
color: #FFFFFF;
}
.wh-band h2 {
margin: 0 0 12px;
max-width: 16ch;
font-size: clamp(36px, 5.4vw, 68px);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.045em;
}
.wh-band > p {
margin: 0 0 36px;
max-width: 52ch;
font-size: 18px;
color: rgba(255, 255, 255, 0.9);
}
.wh-fixes {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.wh-fix {
display: grid;
align-content: start;
gap: 10px;
padding: 22px;
border: 2px solid #141210;
border-radius: 22px;
background: #FBF6EE;
color: #141210;
box-shadow: 5px 5px 0 #141210;
}
.wh-fix__was {
margin: 0;
font-size: 14px;
color: #6E665D;
text-decoration: line-through;
text-decoration-color: #FF5A1F;
text-decoration-thickness: 2px;
}
.wh-fix h3 {
margin: 0;
font-size: 22px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -0.03em;
}
.wh-fix p:last-child {
margin: 0;
font-size: 15px;
line-height: 1.5;
color: #57514A;
}
.wh-fix__ico {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 2px solid #141210;
border-radius: 14px;
background: #FFE3D4;
font-size: 22px;
}
.wh-pricehead {
display: grid;
gap: 10px;
justify-items: center;
margin: clamp(56px, 9vw, 110px) 0 36px;
text-align: center;
}
.wh-pricehead h2 {
margin: 0;
font-size: clamp(36px, 5.4vw, 64px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.045em;
}
.wh-pricehead p {
margin: 0;
max-width: 48ch;
font-size: 18px;
color: var(--ink-muted);
}
.sh-body--land .sh-land__plans {
gap: 18px;
align-items: stretch;
}
.sh-body--land .sh-plan {
gap: 10px;
padding: 26px 22px;
border: 2px solid var(--wh-edge);
border-radius: 22px;
background: var(--wh-paper);
box-shadow: 5px 5px 0 var(--wh-hard);
transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.sh-body--land .sh-plan:hover {
transform: translate(-2px, -2px);
box-shadow: 7px 7px 0 var(--wh-hard);
}
.sh-body--land .sh-plan--pick {
background: var(--wh-orange-soft);
}
.sh-body--land .sh-plan--on {
outline: 3px solid var(--wh-violet);
outline-offset: 4px;
}
.sh-body--land .sh-plan__flag {
padding: 6px 12px;
border: 2px solid var(--wh-edge);
border-radius: 999px;
background: var(--wh-violet);
color: #FFFFFF;
font-size: 13px;
font-weight: 700;
transform: rotate(-2deg);
}
.sh-body--land .sh-plan__kicker {
font-size: 14px;
color: var(--ink-muted);
}
.sh-body--land .sh-plan__name {
font: 800 26px/1.05 var(--wh-display);
letter-spacing: -0.03em;
}
.sh-body--land .sh-plan__amount {
font: 800 56px/1 var(--wh-display);
letter-spacing: -0.05em;
}
.sh-body--land .sh-plan__amount::before {
content: '€';
margin-right: 2px;
font-size: 0.5em;
vertical-align: 0.7em;
}
.sh-body--land .sh-plan__custom {
font: 800 30px/1.1 var(--wh-display);
letter-spacing: -0.03em;
}
.sh-body--land .sh-plan__unit,
.sh-body--land .sh-plan__blurb {
font-size: 15px;
color: var(--ink-muted);
}
.sh-body--land .sh-plan__list {
gap: 10px;
font-size: 15px;
color: var(--ink);
}
.sh-body--land .sh-plan__list li {
padding-left: 28px;
}
.sh-body--land .sh-plan__list li::before {
left: 0;
top: 0.1em;
width: 20px;
height: 20px;
border: 0;
border-radius: 50%;
background: var(--wh-ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231F8A55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
transform: none;
}
.sh-body--land .sh-land__open {
gap: clamp(28px, 5vw, 72px);
margin-top: clamp(56px, 9vw, 110px);
padding-top: 0;
border-top: 0;
}
.sh-body--land .sh-land__h2 {
font-size: clamp(38px, 5vw, 64px);
font-weight: 800;
line-height: 0.98;
letter-spacing: -0.045em;
}
.sh-body--land .sh-land__lede {
margin-top: 14px;
font-size: 18px;
}
.wh-promise {
display: grid;
gap: 12px;
margin: 28px 0 0;
padding: 0;
list-style: none;
font-size: 16px;
}
.wh-promise li {
display: flex;
gap: 12px;
align-items: center;
}
.wh-promise b {
display: grid;
flex: none;
place-items: center;
width: 34px;
height: 34px;
border: 2px solid var(--wh-edge);
border-radius: 10px;
background: var(--wh-paper);
font-size: 17px;
}
.sh-body--land .sh-signup,
.sh-body--land .sh-entra__card {
gap: 16px;
padding: clamp(22px, 3vw, 34px);
border: 2px solid var(--wh-edge);
border-radius: 26px;
background: var(--wh-paper);
box-shadow: 8px 8px 0 var(--wh-hard);
}
.sh-body--land .sh-label {
color: var(--ink);
font-size: 14.5px;
font-weight: 700;
}
.sh-body--land .sh-input {
min-height: 50px;
padding: 12px 14px;
border: 2px solid var(--line-strong);
border-radius: 12px;
background: var(--bg);
font-size: 16px;
}
.sh-body--land .sh-input:hover {
border-color: var(--ink-faint);
}
.sh-body--land .sh-input:focus {
border-color: var(--wh-violet);
box-shadow: 0 0 0 4px var(--wh-violet-soft);
outline: none;
}
.sh-body--land .sh-count {
font-size: 13.5px;
color: var(--ink-muted);
}
.sh-body--land .sh-signup__plan {
padding: 12px 14px;
border: 2px dashed var(--line-strong);
border-radius: 12px;
background: var(--wh-orange-soft);
font-weight: 700;
}
.sh-body--land .sh-signup__go {
min-height: 56px;
font-size: 17px;
}
.sh-body--land .sh-signup__err {
border: 2px solid var(--danger);
border-radius: 12px;
font-weight: 500;
}
.sh-body--land .sh-signup__foot {
font-size: 15px;
color: var(--ink-muted);
}
.sh-body--land .sh-signup__foot a {
color: var(--ink);
font-weight: 700;
text-decoration-color: var(--wh-orange);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
.sh-body--land .sh-entra__google,
.sh-body--land .sh-entra__pw {
min-height: 52px;
}
.sh-body--land .sh-entra__or {
font-size: 14px;
color: var(--ink-muted);
}
.sh-body--land .sh-entra {
grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
gap: clamp(28px, 5vw, 64px);
align-items: center;
max-width: 1160px;
margin: 0 auto;
padding: clamp(24px, 5vw, 64px) 16px 96px;
}
.sh-body--land .sh-entra:not(:has(.wh-art)) {
grid-template-columns: minmax(0, 480px);
justify-content: center;
}
.sh-body--land .sh-entra__card {
max-width: none;
}
.sh-body--land .sh-entra__card--wide {
grid-column: 1 / -1;
max-width: 720px;
justify-self: center;
}
.sh-body--land .sh-entra__h1 {
font: 800 clamp(32px, 4vw, 44px)/1 var(--wh-display);
letter-spacing: -0.04em;
}
.sh-body--land .sh-entra__lede {
font-size: 16px;
}
.wh-art {
position: relative;
display: grid;
align-content: end;
min-height: 560px;
padding: clamp(24px, 4vw, 44px);
overflow: hidden;
border: 2px solid var(--wh-edge);
border-radius: 30px;
background: var(--wh-sunset);
box-shadow: 8px 8px 0 var(--wh-hard);
color: #FFFFFF;
}
.wh-art h2 {
margin: 0;
max-width: 12ch;
font-size: clamp(40px, 5vw, 68px);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.045em;
}
.wh-art p {
margin: 14px 0 0;
max-width: 34ch;
font-size: 17px;
color: rgba(255, 255, 255, 0.92);
}
.wh-art .wh-float {
border-color: #141210;
background: #FFFFFF;
color: #141210;
box-shadow: 4px 4px 0 #141210;
}
.wh-art .wh-float small {
color: #57514A;
}
.wh-art .wh-av {
border-color: #141210;
}
.wh-art .wh-f1 { left: auto; right: 8%; top: 9%; }
.wh-art .wh-f2 { right: auto; left: 7%; top: 30%; }
.sh-body--land .sh-land__foot {
display: flex;
flex-wrap: wrap;
gap: 12px 24px;
align-items: center;
justify-content: space-between;
max-width: 1160px;
padding: 28px 16px 40px;
border-top: 2px solid var(--wh-edge);
font-size: 15px;
color: var(--ink-muted);
}
.wh-foot__brand {
display: inline-flex;
gap: 10px;
align-items: center;
font: 800 20px/1 var(--wh-display);
letter-spacing: -0.04em;
color: var(--ink);
}
.wh-foot__brand .sh-mark {
width: 28px;
height: 28px;
border-radius: 8px;
box-shadow: 2px 2px 0 var(--wh-hard);
}
.wh-foot__links {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
}
.wh-foot__links a {
color: var(--ink);
text-decoration: none;
}
.wh-foot__links a:hover {
text-decoration: underline;
text-decoration-color: var(--wh-orange);
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
@media (max-width: 900px) {
.wh-nav > a:not(.sh-btn) {
display: none;
}
.sh-land__hero {
grid-template-columns: minmax(0, 1fr);
}
.wh-collage {
min-height: 400px;
}
.wh-story {
height: auto;
}
.wh-story__pin {
position: static;
display: flex;
flex-direction: column;
gap: 22px;
height: auto;
min-height: 0;
}
.wh-story__texts,
.wh-chaps,
.wh-stage {
display: contents;
}
.wh-eyebrow { order: 0; }
.wh-steps { display: none; }
.wh-chap,
.wh-scene {
grid-area: auto;
opacity: 1;
transform: none;
pointer-events: auto;
}
.wh-chap[data-i='0'] { order: 1; }
.wh-scene[data-i='0'] { order: 2; }
.wh-chap[data-i='1'] { order: 3; margin-top: 26px; }
.wh-scene[data-i='1'] { order: 4; }
.wh-chap[data-i='2'] { order: 5; margin-top: 26px; }
.wh-scene[data-i='2'] { order: 6; }
.wh-scene {
min-height: 430px;
}
.wh-fixes {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.sh-body--land .sh-entra {
grid-template-columns: minmax(0, 1fr);
}
.wh-art {
display: none;
}
}
@media (max-width: 560px) {
.sh-land__bar .wh-seg {
display: none;
}
.wh-foot .wh-seg {
display: inline-flex;
}
.wh-collage {
min-height: 340px;
}
.wh-f2 { right: 0; }
.wh-float {
padding: 9px 11px;
font-size: 13px;
}
.wh-day {
min-height: 150px;
}
.wh-slot {
font-size: 10px;
}
.wh-slot span {
font-size: 14px;
}
.wh-fixes {
grid-template-columns: minmax(0, 1fr);
}
}
@media (prefers-reduced-motion: reduce) {
.wh-chap,
.wh-scene,
.wh-slot,
.wh-badge,
.wh-live,
.sh-body--land .sh-plan,
.sh-body--land .sh-btn {
transition: none;
}
.is-on .wh-pb--ok,
.is-on .wh-heart {
animation: none;
}
.wh-photo__big {
transform: none;
}
}
.sh-body--land {
overflow-x: clip;
}
.sh-body--land .sh-plan {
position: relative;
}
.sh-body--land .sh-plan__flag {
position: absolute;
top: -16px;
left: 20px;
}
.sh-body--land .sh-signup .sh-field {
gap: 8px;
margin: 0;
}
.sh-body--land .sh-signup .sh-count {
margin-top: -2px;
}
@media (min-width: 901px) {
.sh-body--land .sh-land__openhead {
position: sticky;
top: 104px;
}
}

/* Stile Notion sulle pagine pubbliche: linee sottili, niente ombre nette, titoli in carattere di sistema.
   Tutto sotto .sh-body--land, cosi' vale anche per wooop-home.css senza toccarlo. */
.sh-body--land {
  --wh-edge: var(--line);
  --wh-hard: transparent;
  --wh-display: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, system-ui, sans-serif;
}
.sh-body--land .sh-land__h1, .sh-body--land .sh-land__h2, .sh-body--land .sh-entra__h1,
.sh-body--land .wh-chap h2, .sh-body--land .wh-band h2, .sh-body--land .wh-pricehead h2, .sh-body--land .wh-art h2,
.sh-body--land .wh-sec > h2, .sh-body--land .sh-plan__amount, .sh-body--land .sh-plan__custom {
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
}
.sh-body--land h3, .sh-body--land .wh-fix h3, .sh-body--land .wh-feat h3, .sh-body--land .wh-heard h3,
.sh-body--land .sh-plan__name, .sh-body--land .wh-num, .sh-body--land .wh-vp b, .sh-body--land .wh-vs th,
.sh-body--land .wh-faq__q summary, .sh-body--land .wh-steps li {
  font-weight: 600;
  letter-spacing: -0.015em;
}
.sh-body--land .wh-quotes blockquote { font-weight: 500; }
.sh-body--land .wh-kick, .sh-body--land .wh-feat__tag { font-weight: 600; }
.sh-body--land .sh-btn, .sh-body--land .wh-seg, .sh-body--land .wh-photo, .sh-body--land .wh-float, .sh-body--land .wh-av,
.sh-body--land .wh-steps li, .sh-body--land .wh-scene, .sh-body--land .wh-week, .sh-body--land .wh-slot, .sh-body--land .wh-phone,
.sh-body--land .wh-pb, .sh-body--land .wh-badge, .sh-body--land .wh-post, .sh-body--land .wh-live, .sh-body--land .wh-fix,
.sh-body--land .wh-fix__ico, .sh-body--land .sh-plan, .sh-body--land .sh-plan__flag, .sh-body--land .wh-promise b,
.sh-body--land .sh-entra__card, .sh-body--land .sh-input, .sh-body--land .sh-signup__plan, .sh-body--land .sh-signup__err,
.sh-body--land .wh-art, .sh-body--land .wh-kick, .sh-body--land .wh-feat, .sh-body--land .wh-feat__ico,
.sh-body--land .wh-feat__tag, .sh-body--land .wh-vp > div, .sh-body--land .wh-vs, .sh-body--land .wh-vs td + td::before,
.sh-body--land .wh-who > span, .sh-body--land .wh-chip, .sh-body--land .wh-heard, .sh-body--land .wh-quotes blockquote,
.sh-body--land .wh-fair li, .sh-body--land .wh-faq__q, .sh-body--land .wh-faq__q summary::after {
  border-width: 1px;
  box-shadow: none;
}
.sh-body--land .sh-land__foot { border-top-width: 1px; }
.sh-body--land .wh-scene, .sh-body--land .wh-photo, .sh-body--land .wh-art { border-radius: 20px; }
.sh-body--land .sh-entra__card, .sh-body--land .sh-plan, .sh-body--land .wh-feat, .sh-body--land .wh-vp > div,
.sh-body--land .wh-vs, .sh-body--land .wh-heard, .sh-body--land .wh-fix { border-radius: 16px; }
.sh-body--land .wh-faq__q, .sh-body--land .wh-quotes blockquote, .sh-body--land .wh-fair li { border-radius: 12px; }
.sh-body--land .sh-plan__flag { transform: none; }
/* Le schede che galleggiano sulle foto tengono un'ombra morbida, non netta. */
.sh-body--land .wh-float, .sh-body--land .wh-art .wh-float, .sh-body--land .wh-badge, .sh-body--land .wh-live, .sh-body--land .wh-post {
  border-color: rgba(20, 18, 16, 0.1);
  box-shadow: var(--shadow-2);
}
.sh-body--land .wh-fix, .sh-body--land .wh-fix__ico { border-color: rgba(20, 18, 16, 0.12); }
.sh-body--land .wh-post { transform: none; }
.sh-body--land .sh-mark, .sh-body--land .wh-foot__brand .sh-mark { border: 0; box-shadow: none; }
.sh-body--land .sh-btn { border-radius: 10px; font-weight: 600; }
.sh-body--land .sh-btn--primary, .sh-body--land .sh-btn--primary:hover, .sh-body--land .sh-btn--primary:active,
.sh-body--land .sh-land__bar .sh-btn, .sh-body--land .sh-land__bar .sh-btn:hover {
  border: 0;
  box-shadow: none;
  transform: none;
}
.sh-body--land .sh-btn--primary:hover, .sh-body--land .sh-land__bar .sh-btn:hover { filter: brightness(0.95); }
.sh-body--land .sh-entra__google:hover { background: var(--surface-hover); box-shadow: none; transform: none; }
.sh-body--land .sh-plan:hover, .sh-body--land .wh-feat:hover, .sh-body--land .wh-feat.wh-rise.wh-in:hover {
  border-color: var(--line-strong);
  box-shadow: none;
  transform: none;
}
.sh-body--land .sh-input { border-color: var(--line-strong); border-radius: 10px; background: var(--surface); }
.sh-body--land .sh-input:focus { border-color: var(--wh-violet); box-shadow: 0 0 0 3px var(--wh-violet-soft); }
.sh-body--land .wh-vs th { background: var(--surface-sunken); color: var(--ink); }
.sh-body--land .wh-vs th + th { background: var(--wh-orange-soft); color: var(--ink); }
.sh-body--land .wh-vs td, .sh-body--land .wh-vs tr { border-top-width: 1px; }