@font-face {
font-family: "Inter Tight Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("../fonts/inter-tight-latin-wght-normal.woff2") format("woff2-variations");
unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304,
U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter Tight Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url("../fonts/inter-tight-latin-ext-wght-normal.woff2") format("woff2-variations");
unicode-range: U+100-2AF, U+304, U+308, U+329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--max: 1600px;
--veil-scale: 1;
--peso-titoli: 600;
--corpo-titoli: 48px;
--black: #000000;
--white: #ffffff;
--orange: #ff6b45;
--grey: #4a4a4a;
--blue: #5ad9e9;
--gutter: 20px;
--stacco: 40px;
--row-h: 56px;
--row-gap: 16px;
}
*,
*::before,
*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.nav,
.showreel,
.tools,
.flora,
.engagement,
.operations,
.contact,
.hero__body,
.hero__label {
--side: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
padding-left: var(--side);
padding-right: var(--side);
}
body {
margin: 0;
background: var(--black);
color: var(--white);
font-family: "Inter Tight Variable", "Inter Tight", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
-webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
.nav {
position: absolute;
inset: var(--gutter) 0 auto 0;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 3;
}
.nav__mark {
display: block;
width: 71px;
height: 38px;
color: var(--white);
}
.nav__links {
display: flex;
gap: 32px;
font-size: 16px;
line-height: 16px;
}
.nav__links a {
color: var(--white);
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
}
.nav__links a[aria-current="page"],
.nav__links a:hover { border-bottom-color: var(--white); }
.section__title {
margin: 0;
padding-top: 114px;
font-size: var(--corpo-titoli);
line-height: var(--corpo-titoli);
font-weight: var(--peso-titoli);
letter-spacing: -0.015em;
max-width: 100%;
}
.section__title span {
display: inline;
color: var(--orange);
}
.hero {
position: relative;
height: 100vh;
min-height: 560px;
overflow: hidden;
color: var(--white);
}
.hero__media,
.hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.hero__media {
background: var(--black) url("../img/media/sowhat-hero-16x9.jpg") center / cover no-repeat;
}
.hero__video {
object-fit: cover;
pointer-events: none;
}
@media (max-width: 860px) {
.hero__media { background-image: url("../img/media/sowhat-hero-9x16.jpg"); }
}
.hero__body {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
}
.hero__name { color: var(--orange); }
.hero__claim {
margin: 0;
font-size: var(--corpo-titoli);
line-height: var(--corpo-titoli);
font-weight: var(--peso-titoli);
letter-spacing: -0.015em;
}
.hero__label {
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
line-height: 20px;
color: var(--white);
text-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
}
.hero__label-icon {
flex: none;
width: 20px;
height: 20px;
}
.showreel {
background: var(--black);
padding-bottom: 20px;
}
.showreel .section__lead { margin-bottom: var(--stacco); }
.player {
position: relative;
aspect-ratio: 16 / 9;
background: #111;
overflow: hidden;
}
.player__poster {
width: 100%;
height: 100%;
object-fit: cover;
}
.player iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.player__play {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 122px;
height: 72px;
display: grid;
place-items: center;
border: 0;
border-radius: 6px;
background: var(--orange);
color: var(--white);
cursor: pointer;
transition: transform 200ms ease;
}
.player__play svg { width: 20px; height: 22px; }
.player__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.clip .player__play { width: 52px; height: 32px; }
.clip .player__play svg { width: 12px; height: 14px; }
.tools {
background: var(--black);
padding-bottom: 18px;
}
.clips .clip:last-child { padding-bottom: 0; }
.tools__body,
.section__lead {
max-width: 55.5%;
margin: calc(var(--stacco) / 2) 0 0;
font-size: 16px;
line-height: 25px;
}
.tools__body--segue { margin-top: 25px; }
.tools__body--after { margin-top: var(--stacco); }
.clips {
list-style: none;
margin: var(--stacco) 0 0;
padding: 0;
}
.clip {
display: grid;
grid-template-columns: 33.72% 33.72% 32.56%;
gap: 0;
align-items: start;
padding: 25px 0;
border-top: 1px solid var(--grey);
min-height: 275px;
}
.clip__title {
margin: 0;
font-size: 40px;
line-height: 40px;
font-weight: 400;
letter-spacing: -0.01em;
}
.clip__text {
margin: 4px 0 0;
max-width: 72%;
font-size: 16px;
line-height: 20px;
}
.clip .player { width: 100%; justify-self: end; }
.clip__text { padding-right: 20px; }
.flora,
.engagement,
.operations {
background: var(--black);
padding-bottom: 18px;
}
.cells {
list-style: none;
margin: var(--stacco) 0 0;
padding: 0;
display: grid;
grid-template-columns: 33.72% 33.72% 32.56%;
margin-bottom: -25px;
}
.cells--2 { grid-template-columns: 50% 50%; }
.cell {
padding: 25px 20px 25px 0;
border-top: 1px solid var(--grey);
}
.cell__label {
margin: 0 0 12px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--orange);
}
.cell__title {
margin: 0;
font-weight: 400;
}
.cell__text {
margin: 4px 0 0;
font-size: 16px;
line-height: 20px;
}
.cell__title {
font-size: 24px;
line-height: 28px;
}
.rows {
list-style: none;
margin: var(--stacco) 0 0;
padding: 0;
border-bottom: 1px solid var(--grey);
}
.rows__row {
display: grid;
grid-template-columns: 47.43% 2% 1fr 1.5% 12%;
align-items: start;
min-height: var(--row-h);
padding-bottom: 16px;
border-top: 1px solid var(--grey);
}
.rows__row .row__title { grid-column: 1; }
.rows__row > .dot { grid-column: 2; }
.row__say { display: contents; }
.row__text { grid-column: 3; }
.row__say .dot { grid-column: 4; }
.row__label { grid-column: 5; }
.row__title {
margin-top: 16px;
font-size: 40px;
line-height: 40px;
font-weight: 400;
}
.row__title { white-space: nowrap; }
.row__text {
margin-top: 24px;
padding-right: 24px;
font-size: 16px;
line-height: 20px;
}
.row__label {
margin-top: 28px;
font-size: 12px;
line-height: 16px;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: right;
color: var(--orange);
}
.rows__row .dot {
margin-top: 36px;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--orange);
}
@media (min-width: 861px) and (max-width: 1300px) {
.row__title { white-space: normal; padding-right: 16px; }
}
@media (max-width: 860px) {
.rows { margin-top: 32px; }
.rows__row {
display: flex;
flex-direction: column;
padding: 20px 0;
min-height: 0;
}
.rows__row > .dot,
.row__say .dot { display: none; }
.row__title {
order: 1;
margin-top: 0;
padding-right: 16px;
white-space: normal;
font-size: 24px;
line-height: 28px;
}
.row__say { display: contents; }
.row__label {
order: 0;
margin: 0 0 8px;
text-align: left;
}
.row__text {
order: 2;
margin: 4px 0 0;
padding: 0;
font-size: 16px;
line-height: 25px;
}
}
.operations .section__title span { color: var(--blue); }
.ops {
margin-top: var(--stacco);
padding-top: 20px;
border-top: 1px solid var(--blue);
}
.ops + .ops { margin-top: 64px; }
.ops__name {
margin: 0;
font-size: 40px;
line-height: 40px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--blue);
}
.ops__line {
margin: 12px 0 0;
max-width: 55.5%;
font-size: 16px;
line-height: 25px;
}
.ops__services {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0 20px;
margin-top: 32px;
}
.ops__label {
margin: 0 0 6px;
font-size: 12px;
line-height: 16px;
font-weight: 400;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--blue);
}
.ops__text {
margin: 0;
padding-right: 12px;
font-size: 16px;
line-height: 20px;
}
@media (max-width: 860px) {
.ops__name { font-size: 24px; line-height: 28px; }
.ops__line { max-width: 100%; }
.ops + .ops { margin-top: 48px; }
.ops__services {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 24px;
}
.ops__text { padding-right: 0; }
}
.cta {
margin: 25px 0 0;
font-size: 16px;
line-height: 25px;
}
.cta a {
color: var(--orange);
text-decoration: underline;
}
@media (max-width: 860px) {
.flora,
.engagement,
.operations { padding-bottom: 0; }
.cells,
.cells--2 { grid-template-columns: 1fr; margin-bottom: -24px; }
.cell { padding: 24px 0; }
}
.contact {
position: relative;
background: var(--black);
padding-bottom: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.contact__body {
margin: calc(var(--stacco) / 2) 0 0;
max-width: 41%;
font-size: 16px;
line-height: 25px;
}
.contact__links {
display: flex;
align-items: baseline;
gap: 16px;
margin: var(--stacco) 0 0;
font-size: 16px;
line-height: 25px;
}
.contact__links i { font-style: normal; color: var(--grey); }
.contact__links a { color: var(--white); text-decoration: underline; }
.contact__links .contact__mail { color: var(--orange); text-decoration: underline; }
.contact__mail {
color: var(--orange);
text-decoration: underline;
}
.footer {
position: relative;
margin-top: auto;
padding-top: 200px;
padding-bottom: 7px;
}
.footer__policies { position: relative; z-index: 1; }
.footer__bottom {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: flex-start;
gap: 32px;
margin-top: 96px;
}
.footer__legal {
margin: 0;
font-size: 16px;
line-height: 16px;
}
.footer__policies {
display: flex;
gap: 32px;
margin: 0;
font-size: 16px;
line-height: 16px;
}
.footer__policies a { color: var(--white); text-decoration: none; }
.footer__policies a:hover { text-decoration: underline; }
.nav {
position: fixed;
z-index: 20;
opacity: 0;
pointer-events: none;
transition: opacity 260ms ease, transform 380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav[data-scroll="via"] { transform: translateY(calc(-100% - var(--gutter) - 12px)); }
.nav[data-visible="true"] { opacity: 1; pointer-events: auto; }
.nav { opacity: 1; pointer-events: auto; }
@media (max-width: 860px) {
:root { --gutter: 16px; }
.hero__claim { font-size: 40px; line-height: 44px; margin-top: 24px; }
.hero__label { font-size: 12px; line-height: 16px; gap: 6px; }
.hero__label-icon { width: 16px; height: 16px; }
.section__title {
padding-top: 101px;
font-size: 40px;
line-height: 44px;
}
.showreel { padding-bottom: 0; }
.showreel .section__lead { margin-bottom: var(--stacco); }
.player__play { width: 58px; height: 34px; }
.tools { padding-bottom: 0; }
.tools__body,
.section__lead,
.contact__body,
.clip__text {
max-width: 100%;
}
.clips { margin-top: var(--stacco); }
.clip {
grid-template-columns: 1fr;
min-height: 0;
gap: 12px;
padding: 24px 0;
}
.clip__title { font-size: 24px; line-height: 28px; }
.clip .player { width: 100%; justify-self: stretch; margin-top: 6px; }
.footer { padding-top: 120px; }
.footer__policies { position: relative; z-index: 1; }
.footer__bottom {
flex-wrap: wrap;
justify-content: space-between;
gap: 12px 16px;
margin-top: 64px;
}
.footer__policies { gap: 20px; }
.footer__legal,
.footer__policies { font-size: 12px; line-height: 16px; }
.footer__policies a,
.footer__legal { white-space: nowrap; }
.footer { padding-bottom: 0; }
}
@media (max-width: 860px) {
.nav {
padding: 12px var(--gutter);
inset: 0 0 auto 0;
}
.hero__body,
.hero__label { --side: var(--gutter); }
.nav__links { display: none; }
.nav__mark { width: 56px; height: 30px; }
.nav[data-scroll="via"] { transform: none; }
}
.glass {
position: fixed;
left: 0;
right: 0;
height: var(--h, 10vh);
z-index: 15;
pointer-events: none;
backdrop-filter: blur(var(--blur, 2px));
-webkit-backdrop-filter: blur(var(--blur, 2px));
mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%);
}
.glass::after {
content: "";
position: absolute;
inset: 0;
opacity: calc(var(--veil, 0.35) * var(--veil-scale, 1));
background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}
.glass--top { top: 0; }
.glass--bottom {
bottom: 0;
mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%);
-webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.85) 40%, transparent 100%);
}
.glass--bottom::after {
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
.glass { display: none; }
}
.reveal { overflow: hidden; }
[data-fade="atteso"] { opacity: 0; }
[data-fade="visto"] { opacity: 1; }
.reveal--cella {
overflow: hidden;
padding-bottom: 0.22em;
margin-bottom: -0.22em;
}
.reveal { display: block; }
.reveal__in { will-change: transform, opacity; }
[data-reveal="atteso"] > .reveal__in {
opacity: 0;
transform: translateY(100%);
}
:root[data-reveal-on="giu"] [data-reveal="atteso"] > .reveal__in {
transform: translateY(-100%);
}
[data-reveal="visto"] > .reveal__in {
opacity: 1;
transform: translateY(0);
}
.reveal--cella > .reveal__in { display: block; font-style: normal; }