@font-face {
font-family: "Inter";
src: url(//www.sloganstudio.it/wp-content/themes/grative-child/assets/fonts/Inter.woff2) format("woff2-variations"),
url(//www.sloganstudio.it/wp-content/themes/grative-child/assets/fonts/Inter.woff2) format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Inter Tight";
src: url(//www.sloganstudio.it/wp-content/themes/grative-child/assets/fonts/InterTight.woff2) format("woff2-variations"),
url(//www.sloganstudio.it/wp-content/themes/grative-child/assets/fonts/InterTight.woff2) format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Display";
src: url(//www.sloganstudio.it/wp-content/themes/grative/assets/fonts/clashdisplay/ClashDisplay-Semibold.woff2) format("woff2"),
url(//www.sloganstudio.it/wp-content/themes/grative/assets/fonts/clashdisplay/ClashDisplay-Semibold.woff) format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Display";
src: url(//www.sloganstudio.it/wp-content/themes/grative/assets/fonts/clashdisplay/ClashDisplay-Bold.woff2) format("woff2"),
url(//www.sloganstudio.it/wp-content/themes/grative/assets/fonts/clashdisplay/ClashDisplay-Bold.woff) format("woff");
font-weight: 700 900;
font-style: normal;
font-display: swap;
} html:root {
--slg-ink: #080808;
--slg-ink-soft: #111111;
--slg-ink-lift: #16161a;
--slg-paper: #ece9e1;
--slg-paper-bright: #ffffff;
--slg-silver: #c9c9c7;
--slg-silver-dark: #6c6d70;
--slg-line-dark: rgba(255, 255, 255, .18);
--slg-line-soft: rgba(255, 255, 255, .10);
--slg-line-light: rgba(8, 8, 8, .18);
--slg-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--slg-font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
--slg-font-serif: Georgia, "Times New Roman", serif;
--slg-ease: cubic-bezier(.22, .72, .2, 1); --primary-color: #ece9e1;
--primary-color-rgb: 236, 233, 225;
--four-color: #ffffff;
--four-color-rgb: 255, 255, 255;
--body_bg-color: #080808;
--body_bg-color-rgb: 8, 8, 8;
--link-color: #ece9e1;
--link-color-hover: #ffffff;
--link-color-active: #ffffff;
--gradient-color-from: #ece9e1;
--gradient-color-to: #ffffff;
--gradient-two-color-from_two: #111111;
--gradient-two-color-to_two: #080808;
} body {
color: var(--slg-paper);
background-color: var(--slg-ink);
font-family: var(--slg-font-sans);
font-size: 17px;
line-height: 1.62;
letter-spacing: .002em;
} body,
p,
li,
td,
th,
dd,
dt,
figcaption,
blockquote,
label,
input,
select,
textarea,
.pxl-item--desc,
.pxl-item--text,
.pxl-item--subtext,
.pxl-text-editor,
.elementor-widget-text-editor,
.widget-content {
font-family: var(--slg-font-sans);
} h1:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h2:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h3:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h4:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h5:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
h6:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *),
.h1, .h2, .h3, .h4, .h5, .h6,
.pxl-item--title,
.pxl-heading .pxl-item--title,
.pxl-post--title,
.pxl-widget-title,
.pxl-counter--number,
.pxl-counter--value {
color: var(--slg-paper) !important;
font-family: var(--slg-font-display) !important; font-weight: 500 !important; text-transform: uppercase !important;
} h1, .h1 {
font-size: clamp(2.6rem, 5.9vw, 4.1rem);
line-height: 1.04;
letter-spacing: -.012em;
}
h2, .h2 {
font-size: clamp(2.05rem, 4.4vw, 3.15rem);
line-height: 1.08;
letter-spacing: -.008em;
}
h3, .h3 {
font-size: clamp(1.6rem, 3.1vw, 2.5rem);
line-height: 1.14;
letter-spacing: 0;
}
h4, .h4 {
font-size: clamp(1.18rem, 1.8vw, 1.42rem);
line-height: 1.3;
letter-spacing: .01em;
}
h5, .h5 {
font-size: 1.14rem;
line-height: 1.4;
letter-spacing: .018em;
}
h6, .h6 {
font-size: .98rem;
line-height: 1.4;
letter-spacing: .026em;
}  .slg-serif,
.slg-accent,
h1 .slg-serif, h2 .slg-serif, h3 .slg-serif,
h1:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *) em,
h2:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *) em,
h3:not(.slgn-cs *):not(.slgn-ws *):not(.slgn-hdr *):not(.slgn-ftr *) em,
.pxl-item--title em {
color: var(--slg-paper-bright) !important;
font-family: var(--slg-font-serif) !important;
font-style: italic;
font-weight: 400;
letter-spacing: -.01em;
text-transform: none;
}
::selection {
color: var(--slg-ink);
background: var(--slg-paper-bright);
}
strong, b { font-weight: 600; }  .pxl-showcase-grid1.default .pxl-grid-item .pxl-item--title,
.widget .widget-title,
.pxl-widget-title,
.wp-block-search__label,
.pxl-sidebar-sticky .widget .wp-block-heading,
.rss-widget-title,
.widget_block .wp-block-search__label,
.widget_pxl_recent_posts .pxl-item--title,
.pxl-blog-grid-layout1 .pxl-grid-item .pxl-post--title,
.pxl-image-carousel2 .pxl-item--title,
.pxl-icon-box4 .pxl-item--inner .pxl-item--title,
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--holder .pxl-item--title,
.pxl-accordion1.style1 .pxl-accordion--title,
.pxl-team-grid1 .pxl-item--inner .pxl-item--title {
color: var(--slg-paper);
} .pxl-icon-box4 .pxl-item--inner .pxl-item--desc,
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--desc,
.pxl-accordion1.style1 .pxl-accordion--content,
.pxl-accordion1.style4 .pxl-accordion--content {
color: rgba(236, 233, 225, .72);
} .pxl-icon-box4 .pxl-item--inner .pxl-item--icon,
.pxl-text-carousel2 .pxl-swiper-slide.swiper-slide-active .pxl-item--inner::after,
.pxl-text-carousel2 .pxl-swiper-slide.swiper-slide-next .pxl-item--inner::after {
background-color: var(--slg-paper);
} .pxl-showcase-grid1 .pxl-grid-item .pxl-item--title::after,
.pxl-showcase-grid1 .pxl-grid-item .pxl-item--categories::before,
.pxl-showcase-grid1 .pxl-grid-item .pxl-item--categories::after {
background-color: var(--slg-paper);
} .pxl-showcase-grid1.style-2 .pxl-grid-filter .filter-item.active,
.pxl-showcase-grid1.style-2 .pxl-grid-filter .filter-item:hover {
color: var(--slg-ink);
background-color: var(--slg-paper);
border-color: var(--slg-paper);
} .pxl-navigation-carousel.style-4 .pxl-navigation-arrow svg path {
fill: var(--slg-paper);
}
.pxl-tabs-slip1.show-shape .pxl-shape-container {
background-color: var(--slg-paper);
} .pxl-swiper-arrow-wrap.style-2 .pxl-swiper-arrow:hover,
.pxl-swiper-arrow-wrap.style-5 .pxl-swiper-arrow:hover,
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow:hover {
color: var(--slg-ink);
background-color: var(--slg-paper);
} .pxl-button .btn:not(.btn-stroke),
.pxl-button a.btn:not(.btn-stroke),
.btn:not(.btn-stroke) {
color: var(--slg-ink) !important;
background-color: var(--slg-paper) !important;
border-color: var(--slg-paper) !important;
font-family: var(--slg-font-display) !important;
font-weight: 600;
letter-spacing: .01em;
border-radius: 0;
transition: transform .35s var(--slg-ease),
background-color .35s var(--slg-ease),
color .35s var(--slg-ease);
}
.pxl-button .btn:not(.btn-stroke) i,
.btn:not(.btn-stroke) i {
color: var(--slg-ink) !important;
}
.pxl-button .btn:not(.btn-stroke) svg path,
.btn:not(.btn-stroke) svg path {
fill: var(--slg-ink) !important;
}
.pxl-button .btn:not(.btn-stroke):hover,
.btn:not(.btn-stroke):hover {
color: var(--slg-ink) !important;
background-color: var(--slg-paper-bright) !important;
border-color: var(--slg-paper-bright) !important;
transform: translateY(-2px);
} .pxl-button .btn-hide-icon .pxl--btn-text::before,
.btn .pxl--btn-text::before {
background-color: var(--slg-ink) !important;
} .pxl-button .btn.btn-stroke,
.btn.btn-stroke {
color: var(--slg-paper) !important;
background-color: transparent !important;
border: 1px solid var(--slg-line-dark) !important;
font-family: var(--slg-font-display) !important;
font-weight: 600;
border-radius: 0;
transition: transform .35s var(--slg-ease),
border-color .35s var(--slg-ease),
color .35s var(--slg-ease);
}
.pxl-button .btn.btn-stroke:hover,
.btn.btn-stroke:hover {
color: var(--slg-paper-bright) !important;
border-color: var(--slg-paper) !important;
transform: translateY(-2px);
} #pxl-header-elementor .pxl-button .btn,
#pxl-header-default .pxl-button .btn,
.pxl-header-wrap .pxl-button .btn {
color: var(--slg-ink) !important;
background-color: var(--slg-paper) !important;
border-color: var(--slg-paper) !important;
}
#pxl-header-elementor .pxl-button .btn:hover,
#pxl-header-default .pxl-button .btn:hover,
.pxl-header-wrap .pxl-button .btn:hover {
background-color: var(--slg-paper-bright) !important;
border-color: var(--slg-paper-bright) !important;
} a {
color: var(--slg-paper);
transition: color .3s var(--slg-ease);
}
a:hover,
a:focus {
color: var(--slg-paper-bright);
} .pxl-text-editor a:not(.btn),
.elementor-widget-text-editor a:not(.btn),
.entry-content a:not(.btn) {
background-image: linear-gradient(var(--slg-paper), var(--slg-paper));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
text-decoration: none;
transition: background-size .4s var(--slg-ease), color .3s var(--slg-ease);
}
.pxl-text-editor a:not(.btn):hover,
.elementor-widget-text-editor a:not(.btn):hover,
.entry-content a:not(.btn):hover {
background-size: 100% 1px;
} a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--slg-paper);
outline-offset: 3px;
} .pxl-icon-box1 .pxl-item--inner,
.pxl-icon-box2 .pxl-item--inner,
.pxl-icon-box4 .pxl-item--inner,
.pxl-icon-box6 .pxl-item--inner,
.pxl-icon-box8 .pxl-item--inner,
.pxl-accordion1 .pxl-accordion--item,
.pxl-testimonial-carousel2 .pxl-swiper-slide .pxl-item--inner,
.pxl-blog-grid-layout1 .pxl-grid-item .pxl-post--inner,
.pxl-team-grid1 .pxl-item--inner {
border-radius: 0;
box-shadow: none;
}  .pxl-item--subtitle,
.pxl-heading .pxl-item--subtitle,
.pxl-heading .pxl-item--subtitle.px-sub-title-default,
.pxl-item--sub-title,
.pxl-subtitle,
.slg-eyebrow {
color: var(--slg-silver);
font-family: var(--slg-font-display) !important;
font-size: .74rem !important;
font-weight: 600 !important;
line-height: 1.6;
letter-spacing: .18em;
text-transform: uppercase !important;
} .pxl-counter--number,
.pxl-counter--value,
.pxl-counter--prefix,
.pxl-counter--suffix {
color: var(--slg-paper);
font-family: var(--slg-font-display);
font-weight: 600;
letter-spacing: -.04em;
}
.pxl-counter--title {
color: var(--slg-silver);
font-family: var(--slg-font-sans);
font-size: .82rem;
letter-spacing: .12em;
text-transform: uppercase;
} input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="password"],
select,
textarea,
.wpcf7 input:not([type="submit"]),
.wpcf7 textarea,
.wpcf7 select {
color: var(--slg-paper);
background-color: transparent;
border: 0;
border-bottom: 1px solid var(--slg-line-dark);
border-radius: 0;
padding: .9rem 0;
font-family: var(--slg-font-sans);
transition: border-color .3s var(--slg-ease);
}
input::placeholder,
textarea::placeholder {
color: var(--slg-silver-dark);
opacity: 1;
}
input:focus,
select:focus,
textarea:focus,
.wpcf7 input:not([type="submit"]):focus,
.wpcf7 textarea:focus {
border-bottom-color: var(--slg-paper);
outline: none;
box-shadow: none;
} select option {
color: var(--slg-ink);
background-color: var(--slg-paper);
}
.wpcf7 input[type="submit"],
input[type="submit"],
button[type="submit"] {
color: var(--slg-ink);
background-color: var(--slg-paper);
border: 0;
border-radius: 0;
padding: 1rem 2.4rem;
font-family: var(--slg-font-display);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
transition: background-color .3s var(--slg-ease), transform .3s var(--slg-ease);
}
.wpcf7 input[type="submit"]:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
background-color: var(--slg-paper-bright);
transform: translateY(-2px);
} #pxl-header-elementor .pxl-header-menu .pxl-menu-primary > li > a,
#pxl-header-default .pxl-header-menu .pxl-menu-primary > li > a,
.pxl-menu-primary > li > a {
color: var(--slg-paper);
font-family: var(--slg-font-display);
font-weight: 600;
font-size: .95rem;
letter-spacing: -.01em;
}
.pxl-menu-primary > li > a:hover,
.pxl-menu-primary > li.current-menu-item > a,
.pxl-menu-primary > li.current_page_item > a {
color: var(--slg-paper-bright);
} .pxl-header-fixed,
#pxl-header-elementor.pxl-header-fixed,
#pxl-header-elementor .pxl-header-fixed {
background-color: rgba(8, 8, 8, .92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--slg-line-soft);
} .pxl-menu-primary .sub-menu {
background-color: var(--slg-ink-soft);
border: 1px solid var(--slg-line-soft);
border-radius: 0;
}
.pxl-menu-primary .sub-menu li a {
color: var(--slg-paper);
font-family: var(--slg-font-sans);
}
.pxl-menu-primary .sub-menu li a:hover {
color: var(--slg-paper-bright);
} @media screen and (max-width: 1200px) {
.pxl-header-menu,
#pxl-header-elementor .pxl-header-menu {
background-color: var(--slg-ink);
}
.pxl-header-menu .pxl-menu-primary > li > a {
color: var(--slg-paper);
}
} #pxl-footer-elementor,
#pxl-footer-default,
.pxl-footer-wrap {
background-color: var(--slg-ink);
border-top: 1px solid var(--slg-line-soft);
} #pxl-footer-elementor > .footer-elementor-inner > .elementor > .e-con,
#pxl-footer-elementor > .footer-elementor-inner > .elementor > .elementor-section {
background-color: var(--slg-ink) !important;
}
#pxl-footer-elementor a,
#pxl-footer-default a {
color: var(--slg-silver);
}
#pxl-footer-elementor a:hover,
#pxl-footer-default a:hover {
color: var(--slg-paper-bright);
} .pxl-loader,
.pxl-loader-curve,
.pxl-loading,
#pxl-preloader {
background-color: var(--slg-ink);
}
.pxl-loader .loader-line-mask .loader-line,
.pxl-loader .loader-circle {
border-color: var(--slg-paper);
} .wow {
animation-duration: 1s;
animation-timing-function: var(--slg-ease);
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
} body { overflow-x: clip; } :where(
.pxl-button .btn,
.pxl-swiper-arrow,
.pxl-grid-filter .filter-item,
.pxl-header-wrap a,
.pxl-item--social a,
.pxl-post--holder a,
.widget a
) {
transition:
color .3s var(--slg-ease),
background-color .3s var(--slg-ease),
border-color .3s var(--slg-ease),
opacity .3s var(--slg-ease),
transform .45s var(--slg-ease);
} #pxl-header-elementor .pxl-button .btn,
#pxl-header-default .pxl-button .btn,
.pxl-header-wrap .pxl-button .btn {
transition:
color .3s var(--slg-ease),
background-color .3s var(--slg-ease),
border-color .3s var(--slg-ease),
transform .45s var(--slg-ease);
} @media (prefers-reduced-motion: reduce) {
.pxl-button .btn,
.pxl-swiper-arrow,
.pxl-grid-filter .filter-item {
transition: none;
}
} :where(
.pxl-header-wrap a *,
.pxl-item--social a *,
.pxl-button .btn *,
.pxl-swiper-arrow *
) {
transition:
color .3s var(--slg-ease),
fill .3s var(--slg-ease),
stroke .3s var(--slg-ease),
opacity .3s var(--slg-ease),
transform .45s var(--slg-ease);
}.slgn-hdr,
.slgn-ftr {
--ws-ink: #080808;
--ws-ink-soft: #101010;
--ws-ink-lift: #161616;
--ws-paper: #ece9e1;
--ws-white: #ffffff;
--ws-silver: #c9c9c7;
--ws-mute: #6c6d70;
--ws-line: rgba(255, 255, 255, .16);
--ws-line-soft: rgba(255, 255, 255, .08);
--ws-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--ws-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ws-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
--ws-pad: clamp(1.25rem, 4vw, 4.75rem);
--ws-ease: cubic-bezier(.22, .72, .2, 1);
--ws-hover: .3s var(--ws-ease);
--ws-move: .45s var(--ws-ease);
--hdr-h: 4.5rem;
box-sizing: border-box;
font-family: var(--ws-sans);
color: var(--ws-paper);
}
.slgn-hdr *,
.slgn-ftr *,
.slgn-hdr *::before,
.slgn-ftr *::before,
.slgn-hdr *::after,
.slgn-ftr *::after { box-sizing: inherit; }  .slgn-hdr .slgn-wrap,
.slgn-ftr .slgn-wrap {
width: min(84rem, 100%);
margin-inline: auto;
}
.slgn-hdr .slgn-label,
.slgn-ftr .slgn-label {
margin: 0 0 1rem;
color: var(--ws-mute);
font-size: .68rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
}  .slgn-ftr .slgn-h2 {
margin: 0;
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: clamp(1.9rem, 4.2vw, 3.2rem);
font-weight: 500;
line-height: 1;
letter-spacing: -0.014em;
text-transform: uppercase;
} .slgn-ftr .slgn-word,
.slgn-ftr .slgn-em { display: inline-block; }
.slgn-ftr .slgn-word--em,
.slgn-ftr .slgn-em {
font-family: inherit;
font-style: normal;
font-weight: 300;
letter-spacing: inherit;
text-transform: inherit;
}
.slgn-ftr__cta--carta .slgn-word--em { color: #0d0d0d; }
.slgn-ftr .slgn-word,
.slgn-ftr .slgn-h2 .slgn-word { color: inherit; }
.slgn-ftr .slgn-body {
margin: 0;
color: var(--ws-silver);
font-size: 1rem;
font-weight: 380;
line-height: 1.62;
}
.slgn-hdr .slgn-btn,
.slgn-ftr .slgn-btn {
display: inline-flex;
align-items: center;
gap: .55rem;
padding: .95rem 1.5rem;
border: 1px solid var(--ws-paper);
background: var(--ws-paper);
color: var(--ws-ink);
font-family: inherit;
font-size: .78rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
transition: background var(--ws-hover), color var(--ws-hover), border-color var(--ws-hover);
}
.slgn-hdr .slgn-btn i,
.slgn-ftr .slgn-btn i {
font-style: normal;
transition: transform var(--ws-hover);
}
.slgn-hdr .slgn-btn:hover,
.slgn-ftr .slgn-btn:hover,
.slgn-hdr .slgn-btn:focus-visible,
.slgn-ftr .slgn-btn:focus-visible {
background: transparent;
color: var(--ws-paper);
}
.slgn-hdr .slgn-btn:hover i,
.slgn-ftr .slgn-btn:hover i { transform: translateX(.25rem); }
.slgn-hdr .slgn-btn--mini {
padding: .6rem 1.05rem;
font-size: .68rem;
letter-spacing: .12em;
}
.slgn-hdr .slgn-sr-only,
.slgn-ftr .slgn-sr-only,
.slgn-skip {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
} .slgn-skip:focus {
z-index: 200;
top: .75rem;
left: .75rem;
width: auto;
height: auto;
margin: 0;
padding: .8rem 1.2rem;
overflow: visible;
clip: auto;
clip-path: none;
background: #ece9e1;
color: #080808;
font: 600 .8rem/1 "Inter", system-ui, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
} .slgn-hdr {
position: sticky;
top: 0;
z-index: 100;
} body.admin-bar .slgn-hdr { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .slgn-hdr { top: 46px; }
} .slgn-avviso {
position: relative;
display: flex;
align-items: center;
gap: 1rem;
padding: .55rem var(--ws-pad);
font-size: .78rem;
line-height: 1.4;
}
.slgn-avviso--carta {
background: var(--ws-paper);
color: var(--ws-ink);
}
.slgn-avviso--nero {
border-bottom: 1px solid var(--ws-line-soft);
background: var(--ws-ink);
color: var(--ws-silver);
}
.slgn-avviso__in {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .4rem 1rem;
margin-inline: auto;
text-align: center;
}
.slgn-avviso__testo { margin: 0; }
.slgn-avviso__go {
color: inherit;
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid currentColor;
transition: opacity var(--ws-hover);
}
.slgn-avviso__go i { font-style: normal; }
.slgn-avviso__go:hover { opacity: .65; }
.slgn-avviso__x {
position: absolute;
right: calc(var(--ws-pad) - .5rem);
top: 50%;
translate: 0 -50%;
padding: .2rem .5rem;
border: 0;
background: none;
color: inherit;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
opacity: .55;
transition: opacity var(--ws-hover);
}
.slgn-avviso__x:hover { opacity: 1; } .slgn-hdr__bar {
position: relative;
z-index: 2;
border-bottom: 1px solid transparent;
transition:
background var(--ws-hover),
border-color var(--ws-hover),
box-shadow var(--ws-hover),
translate var(--ws-move);
} .slgn-hdr__bar::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(
90deg,
rgba(236, 233, 225, .5) 0%,
rgba(236, 233, 225, .22) 34%,
rgba(236, 233, 225, .05) 62%,
transparent 100%
);
opacity: 0;
transition: opacity var(--ws-hover);
}
.slgn-hdr.is-scrolled .slgn-hdr__bar::before,
.slgn-hdr__bar--pieno::before { opacity: 1; } .slgn-hdr__bar::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 3px;
pointer-events: none; background:
linear-gradient(var(--ws-paper), var(--ws-paper))
0 0 / calc(var(--scroll-progress, 0) * 100%) 100% no-repeat,
rgba(236, 233, 225, .14);
opacity: 0;
transition: opacity var(--ws-hover);
}
.slgn-hdr.is-scrolled .slgn-hdr__bar::after,
.slgn-hdr__bar--pieno::after { opacity: 1; } .slgn-hdr__bar--pieno,
.slgn-hdr.is-solid .slgn-hdr__bar {
border-bottom-color: var(--ws-line-soft);
background: rgba(8, 8, 8, .82);
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
}  .slgn-hdr.is-scrolled .slgn-hdr__bar {
background: rgba(8, 8, 8, .94);
box-shadow:
0 1px 0 rgba(255, 255, 255, .05) inset,
0 18px 40px -20px rgba(0, 0, 0, .95),
0 4px 14px -10px rgba(0, 0, 0, .8);
}
.slgn-hdr.is-scrolled { --hdr-h: 3.8rem; }
.slgn-hdr__logo,
.slgn-hdr__nome {
transition: height var(--ws-move), font-size var(--ws-move);
}
.slgn-hdr.is-scrolled .slgn-hdr__nome { font-size: 1.02rem; } .slgn-hdr__nota {
max-height: 1.2em;
overflow: hidden;
transition: max-height var(--ws-move), opacity var(--ws-hover);
}
.slgn-hdr.is-scrolled .slgn-hdr__nota {
max-height: 0;
opacity: 0;
} .slgn-hdr.is-hidden { translate: 0 -100%; }
.slgn-hdr {
transition: translate var(--ws-move);
}
.slgn-hdr__bar { padding-inline: var(--ws-pad); }
.slgn-hdr__in {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1rem, 3vw, 2.5rem);
width: min(84rem, 100%);
margin-inline: auto;
min-height: var(--hdr-h);
} .slgn-hdr__mark {
display: flex;
align-items: center;
gap: .7rem;
color: inherit;
text-decoration: none;
}
.slgn-hdr__testo {
display: grid;
gap: .15rem;
}
.slgn-hdr__nome {
font-family: var(--ws-display);
font-size: 1.15rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.slgn-hdr__logo {
display: block;
height: 2.2rem;
width: auto;
}
.slgn-hdr.is-scrolled .slgn-hdr__logo { height: 1.9rem; }
.slgn-hdr__nota {
color: var(--ws-mute);
font-family: var(--ws-mono);
font-size: .58rem;
letter-spacing: .14em;
text-transform: uppercase;
transition: color var(--ws-hover);
}
.slgn-hdr__mark:hover .slgn-hdr__nota { color: var(--ws-silver); }  .slgn-hdr__nav {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: clamp(1rem, 2.6vw, 2.4rem);
width: 100%;
max-width: 46rem;
margin-inline: auto;
}
.slgn-hdr__bar--destra .slgn-hdr__nav {
justify-content: flex-end;
width: auto;
max-width: none;
margin-inline: 0 0;
} .slgn-hdr__vn {
margin-right: .4rem;
color: var(--ws-mute);
font-family: var(--ws-mono);
font-size: .58rem;
letter-spacing: .08em;
vertical-align: .15em;
transition: color var(--ws-hover);
}
.slgn-hdr__voce:hover .slgn-hdr__vn,
.slgn-hdr__voce.is-qui .slgn-hdr__vn { color: var(--ws-silver); }
.slgn-hdr__voce {
position: relative;
padding: .3rem 0;
color: var(--ws-silver);
font-size: .78rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: color var(--ws-hover);
} .slgn-hdr__voce::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: currentColor;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform var(--ws-move);
}
.slgn-hdr__voce:hover,
.slgn-hdr__voce:focus-visible { color: var(--ws-paper); }
.slgn-hdr__voce:hover::after,
.slgn-hdr__voce:focus-visible::after { transform: scaleX(1); } .slgn-hdr__voce.is-qui { color: var(--ws-paper); }
.slgn-hdr__voce.is-qui::after {
transform: scaleX(1);
background: var(--ws-mute);
}
.slgn-hdr__coda {
position: relative;
display: flex;
align-items: center;
gap: .75rem;
justify-self: end;
padding-left: 1.4rem;
} .slgn-hdr__coda::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 1px;
height: 1.25rem;
margin-top: -.625rem;
background: var(--ws-line);
}
@media (max-width: 899px) {
.slgn-hdr__coda { padding-left: 0; }
.slgn-hdr__coda::before { display: none; }
} .slgn-hdr__tasto {
position: relative;
display: none;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid var(--ws-line);
background: none;
color: var(--ws-paper);
cursor: pointer;
transition: border-color var(--ws-hover);
}
.slgn-hdr__tasto:hover { border-color: var(--ws-paper); }
.slgn-hdr__tasto-l,
.slgn-hdr__tasto-l::after {
position: absolute;
left: 50%;
width: 1.1rem;
height: 1px;
background: currentColor;
translate: -50% 0;
transition: translate var(--ws-move), rotate var(--ws-move);
}
.slgn-hdr__tasto-l {
top: calc(50% - 4px);
}
.slgn-hdr__tasto-l::after {
content: "";
top: 8px;
left: 0;
translate: 0 0;
}
.slgn-hdr__tasto[aria-expanded="true"] .slgn-hdr__tasto-l {
translate: -50% 4px;
rotate: 45deg;
}
.slgn-hdr__tasto[aria-expanded="true"] .slgn-hdr__tasto-l::after {
translate: 0 -8px;
rotate: -90deg;
} .slgn-hdr__panel {
position: fixed;
inset: 0;
z-index: 1;
display: grid;
align-content: center;
padding: calc(var(--hdr-h) + 2rem) var(--ws-pad) 2rem;
background: var(--ws-ink);
opacity: 0;
visibility: hidden;
transition: opacity var(--ws-move), visibility var(--ws-move);
}
.slgn-hdr__panel[hidden] { display: grid; }
.slgn-hdr.is-open .slgn-hdr__panel {
opacity: 1;
visibility: visible;
}
.slgn-hdr__panel-in {
width: min(88rem, 100%);
margin: 0 auto;
}
.slgn-hdr__lista {
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--ws-line-soft);
}
.slgn-hdr__lista li {
border-bottom: 1px solid var(--ws-line-soft);
opacity: 0;
translate: 0 12px;
transition: opacity var(--ws-move), translate var(--ws-move);
transition-delay: calc(var(--i, 0) * .05s);
}
.slgn-hdr.is-open .slgn-hdr__lista li {
opacity: 1;
translate: 0 0;
}
.slgn-hdr__lista a {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 1.05rem 0;
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: clamp(1.9rem, 9vw, 2.8rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
text-decoration: none;
}
.slgn-hdr__n {
color: var(--ws-mute);
font-family: var(--ws-mono);
font-size: .7rem;
letter-spacing: .1em;
}
.slgn-hdr__panel-cta { margin: 2rem 0 0; } @media (max-width: 899px) {
.slgn-hdr__nav { display: none; }
.slgn-hdr__tasto { display: block; }
.slgn-hdr__in { grid-template-columns: auto minmax(0, 1fr); }
.slgn-hdr__coda .slgn-btn--mini { display: none; }
.slgn-hdr { --hdr-h: 3.9rem; }
} .slgn-hdr__in--nudo { grid-template-columns: minmax(0, 1fr) auto; } body.slgn-menu-aperto { overflow: hidden; } .slgn-ftr {
background: var(--ws-ink);
} .slgn-ftr__cta {
padding: clamp(3.5rem, 8vw, 7rem) var(--ws-pad);
border-top: 1px solid var(--ws-line-soft);
} .slgn-ftr__cta--carta {
--ws-paper: #0d0d0d;
--ws-ink: #ece9e1;
--ws-silver: #3a3a38;
--ws-mute: #6c6d70;
--ws-line: rgba(0, 0, 0, .22);
--ws-line-soft: rgba(0, 0, 0, .1);
border-top: 0;
background: #ece9e1;
color: #0d0d0d;
}
.slgn-ftr__cta-grid {
display: grid;
gap: clamp(1.8rem, 4vw, 3.5rem);
}
@media (min-width: 900px) {
.slgn-ftr__cta-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
align-items: end;
}
}
.slgn-ftr__cta-lato {
display: grid;
gap: 1.6rem;
align-content: end;
}
.slgn-ftr__cta-azioni {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem 1.6rem;
margin: 0;
}
.slgn-ftr__oltre {
color: inherit;
font-size: .82rem;
font-weight: 500;
letter-spacing: .06em;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: .15rem;
transition: opacity var(--ws-hover);
}
.slgn-ftr__oltre:hover { opacity: .6; } .slgn-ftr__corpo,
.slgn-ftr__recapiti {
padding: 0;
border-top: 0;
}
.slgn-ftr__corpo,
.slgn-ftr__recapiti,
.slgn-ftr__coda { padding-inline: var(--ws-pad); }
.slgn-ftr__corpo { padding-top: clamp(3rem, 6vw, 4.5rem); }
.slgn-ftr__recapiti { padding-top: clamp(2rem, 4vw, 3rem); }
.slgn-ftr__griglia,
.slgn-ftr__recapiti-grid {
display: grid;
gap: clamp(1.8rem, 4vw, 3rem);
}
@media (min-width: 760px) {
.slgn-ftr__griglia {
grid-template-columns: minmax(0, 1.6fr) repeat(var(--slgn-cols, 2), minmax(0, 1fr));
align-items: start;
}
.slgn-ftr__recapiti-grid {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr);
align-items: start;
}
} .slgn-ftr__chi,
.slgn-ftr__col,
.slgn-ftr__rlato,
.slgn-ftr__dl {
padding-top: clamp(1rem, 2vw, 1.4rem);
border-top: 1px solid var(--ws-line-soft);
}
.slgn-ftr__nome {
margin: 0 0 .7rem;
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: clamp(1.15rem, 1.8vw, 1.45rem);
font-weight: 600;
letter-spacing: -0.02em;
text-transform: uppercase;
}
.slgn-ftr__testo {
margin: 0;
max-width: 34ch;
color: var(--ws-mute);
font-size: .92rem;
font-weight: 380;
line-height: 1.6;
}
.slgn-ftr__col ul {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: .5rem;
}
.slgn-ftr__col a {
position: relative;
display: inline-block;
color: var(--ws-silver);
font-size: .92rem;
text-decoration: none;
transition: color var(--ws-hover), padding-left var(--ws-move);
}
.slgn-ftr__col a:hover,
.slgn-ftr__col a:focus-visible {
padding-left: .55rem;
color: var(--ws-paper);
} .slgn-ftr__col a::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: .3rem;
height: 1px;
background: currentColor;
opacity: 0;
transition: opacity var(--ws-hover);
}
.slgn-ftr__col a:hover::before,
.slgn-ftr__col a:focus-visible::before { opacity: 1; } .slgn-ftr__dl {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: 1.2rem 2rem;
margin: 0;
}
.slgn-ftr__dl > div {
display: grid;
gap: .25rem;
align-content: start;
}
.slgn-ftr__dl dt {
color: var(--ws-mute);
font-family: var(--ws-mono);
font-size: .58rem;
letter-spacing: .16em;
text-transform: uppercase;
}
.slgn-ftr__dl dd {
margin: 0;
color: var(--ws-paper);
font-size: .98rem;
font-weight: 500;
}
.slgn-ftr__dl a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--ws-line);
transition: border-color var(--ws-hover);
}
.slgn-ftr__dl a:hover { border-bottom-color: var(--ws-paper); }
.slgn-ftr__social {
display: flex;
flex-wrap: wrap;
gap: .45rem;
margin: 1.1rem 0 0;
padding: 0;
list-style: none;
}
.slgn-ftr__social a {
display: inline-flex;
align-items: center;
gap: .4rem;
padding: .5rem .9rem;
border: 1px solid var(--ws-line-soft);
color: var(--ws-silver);
font-size: .68rem;
letter-spacing: .12em;
text-transform: uppercase;
text-decoration: none;
transition: border-color var(--ws-hover), color var(--ws-hover), background var(--ws-hover);
}
.slgn-ftr__social a i {
font-style: normal;
font-size: .8em;
transition: transform var(--ws-hover);
}
.slgn-ftr__social a:hover {
border-color: var(--ws-line);
background: var(--ws-ink-lift);
color: var(--ws-paper);
}
.slgn-ftr__social a:hover i { transform: translate(2px, -2px); } .slgn-ftr__coda {
padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 2.5rem);
} .slgn-ftr__marchio {
margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
color: transparent;
font-family: var(--ws-display);
font-size: clamp(4rem, 21vw, 20rem);
font-weight: 600;
line-height: .82;
letter-spacing: -0.045em;
text-transform: uppercase;
-webkit-text-stroke: 1px rgba(236, 233, 225, .28);
user-select: none;
}
.slgn-ftr__marchio--pieno {
color: rgba(236, 233, 225, .07);
-webkit-text-stroke: 0;
} .slgn-outline-logo {
display: inline-flex;
align-items: center;
gap: .16em;
vertical-align: middle;
line-height: 1;
-webkit-text-stroke: 0;
}
.slgn-outline-logo img {
display: block;
flex: none;
width: auto;
height: .72em;
max-width: none;
object-fit: contain;
filter: invert(1);
}
.slgn-about--chiara .slgn-outline-logo img { filter: none; }
.slgn-ftr__marchio .slgn-outline-logo { font-size: clamp(32px, 12vw, 220px); }
.slgn-ftr__riga {
display: grid;
gap: .8rem 2rem;
padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
border-top: 1px solid var(--ws-line-soft);
color: var(--ws-mute);
font-family: var(--ws-mono);
font-size: .66rem;
letter-spacing: .08em;
}
@media (min-width: 760px) {
.slgn-ftr__riga {
grid-template-columns: minmax(0, 1.6fr) minmax(0, 2fr) auto;
align-items: baseline;
}
}
.slgn-ftr__cop,
.slgn-ftr__credito { margin: 0; }
.slgn-ftr__legali {
display: flex;
flex-wrap: wrap;
gap: .4rem 1.4rem;
margin: 0;
padding: 0;
list-style: none;
}
.slgn-ftr__legali a {
color: inherit;
text-decoration: none;
transition: color var(--ws-hover);
}
.slgn-ftr__legali a:hover { color: var(--ws-paper); } @media (hover: none) { .slgn-ftr__legali { gap: 2.1rem 1.4rem; }
.slgn-ftr__legali a {
display: inline-block;
padding-block: 16px;
margin-block: -16px;
} .slgn-hdr__mark {
padding-block: 7px;
margin-block: -7px;
}
} @media (prefers-reduced-motion: reduce) {
.slgn-hdr,
.slgn-hdr__bar,
.slgn-hdr__panel,
.slgn-hdr__lista li,
.slgn-hdr__voce::after,
.slgn-hdr__tasto-l,
.slgn-hdr__tasto-l::after {
transition: none !important;
}
.slgn-hdr.is-hidden { translate: none; }
.slgn-hdr__lista li { translate: none; }
}  .slgn-switch {
position: fixed;
bottom: calc(44px + env(safe-area-inset-bottom, 0px));
right: 14px;
z-index: 90;
}  .slgn-switch__tasto {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .28);
border-radius: 999px;
background: none;
color: rgba(255, 255, 255, .72);
cursor: pointer;
list-style: none;
transition: border-color .25s ease, color .25s ease;
}
.slgn-switch__tasto::-webkit-details-marker { display: none; }
.slgn-switch__tasto:hover,
.slgn-switch__tasto:focus-visible {
border-color: #fff;
color: #fff;
} .slgn-switch[open] .slgn-switch__tasto {
border-color: #fff;
color: #fff;
} .slgn-switch__voci {
position: absolute;
top: auto;
bottom: 48px;
right: 0;
display: flex;
flex-direction: column;
padding: 4px;
background: rgba(10, 10, 10, .92);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 12px;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .85);
}
.slgn-switch__voce {
display: block;
padding: 12px 18px;
color: rgba(255, 255, 255, .6);
font-family: var(--ws-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
text-decoration: none;
line-height: 1;
border-radius: 8px; transition: color .25s ease;
} @media (hover: none) {
.slgn-switch__voce {
padding-block: 18px;
}
} .slgn-switch__voce--qui {
color: #fff;
}
.slgn-switch__voce:not(.slgn-switch__voce--qui):hover {
color: #fff;
background: rgba(255, 255, 255, .08);
} @media (max-width: 900px) {
.slgn-switch {
bottom: calc(38px + env(safe-area-inset-bottom, 0px));
right: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.slgn-switch__tasto,
.slgn-switch__voce {
transition: none !important;
}
} .slgn-hdr .slgn-hdr__tasto.slgn-hdr__tasto--zampa {
width: 58px;
min-width: 58px;
height: 58px;
padding: 4px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--ws-paper, #eeedea);
text-align: center;
}
.slgn-hdr__tasto--zampa .slgn-hdr__zampa { display: block; margin: 0 auto 3px; }
.slgn-hdr__tasto--zampa .slgn-hdr__menu-label { display: block; font: 700 10px/1.2 Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.slgn-hdr .slgn-hdr__tasto.slgn-hdr__tasto--zampa[aria-expanded="false"],
.slgn-hdr .slgn-hdr__tasto.slgn-hdr__tasto--zampa[aria-expanded="true"] {
color: var(--ws-paper, #eeedea);
background: transparent;
border-radius: 0;
}
.slgn-hdr .slgn-hdr__tasto--zampa:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 0; }
.slgn-footer-social { padding: 20px 0; color: var(--ws-paper, #eeedea); }
.slgn-footer-social > .slgn-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.slgn-footer-social p { margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.slgn-footer-social nav { display:flex; flex-wrap:wrap; gap:10px; }
.slgn-footer-social a { display:grid; place-items:center; width:44px; height:44px; border:1px solid #555; border-radius:50%; color:inherit; }
.slgn-footer-social a:hover { color:#050505; background:#eeedea; border-color:#eeedea; }
.slgn-footer-social a:focus-visible { outline:2px solid currentColor; outline-offset:4px; }.slgn-site {
--ws-ink: #080808;
--ws-ink-soft: #101010;
--ws-ink-lift: #161616;
--ws-paper: #ece9e1;
--ws-white: #ffffff;
--ws-silver: #c9c9c7;
--ws-mute: #6c6d70;
--ws-line: rgba(255, 255, 255, .16);
--ws-line-soft: rgba(255, 255, 255, .08);
--ws-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
--ws-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
--ws-serif: Georgia, "Times New Roman", serif;
--ws-pad: clamp(1.25rem, 4vw, 4.75rem);
--ws-gap: clamp(3.5rem, 9vw, 9rem);
--ws-ease: cubic-bezier(.22, .72, .2, 1); --ws-hover: .3s var(--ws-ease);
--ws-move: .45s var(--ws-ease);
background: var(--ws-ink);
color: var(--ws-paper);
} .slgn-site #pxl-main,
.slgn-site #pxl-wapper #pxl-main {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slgn-site #pxl-page-title-default,
.slgn-site #pxl-page-title-elementor {
display: none !important;
}
body.slgn-site .pxl-loader,
body.slgn-site .pxl-loader-curve,
body.slgn-site .pxl-loading,
body.slgn-site #pxl-preloader {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.slgn-ws * { box-sizing: border-box; }
.slgn-ws { overflow-x: clip;
font-family: var(--ws-sans);
font-size: 17px;
line-height: 1.62;
}
.slgn-ws img { display: block; max-width: 100%; } .slgn-sec {
position: relative;
padding: var(--ws-gap) var(--ws-pad);
border-top: 1px solid var(--ws-line-soft);
}
.slgn-sec--flush { border-top: 0; }
.slgn-sec--tight { padding-top: clamp(2.5rem, 5vw, 4.5rem); }
.slgn-sec--lift { background: var(--ws-ink-soft); }
.slgn-sec--contrast {
overflow: hidden;
background:
linear-gradient(90deg, rgba(0,0,0,.92), rgba(0,0,0,.56)),
var(--slgn-section-bg, none) center / cover no-repeat,
var(--ws-ink);
}
.slgn-wrap {
width: min(84rem, 100%);
margin-inline: auto;
}
.slgn-wrap--narrow { width: min(56rem, 100%); }
.slgn-grid {
display: grid;
gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 760px) {
.slgn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slgn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slgn-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.slgn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}  .slgn-ws h1,
.slgn-ws h2,
.slgn-ws h3,
.slgn-ws h4 {
margin: 0;
color: var(--ws-paper);
font-family: var(--ws-display);
font-weight: 500;
line-height: 1;
letter-spacing: -0.005em;
text-transform: uppercase;
}
.slgn-display {
font-size: clamp(2.6rem, 9.4vw, 7.4rem);
line-height: .92;
letter-spacing: -0.022em;
text-transform: uppercase;
}
.slgn-h2 { font-size: clamp(1.95rem, 4.9vw, 3.9rem); line-height: .98; letter-spacing: -0.014em; }
.slgn-h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.06; letter-spacing: -0.004em; } .slgn-em,
.slgn-word--em {
font-family: inherit;
font-style: normal;
letter-spacing: inherit;
text-transform: inherit;
} .slgn-em,
.slgn-word--em {
color: var(--ws-white);
font-weight: 300;
} .slgn-lead {
max-width: 44rem;
margin: 0;
color: var(--ws-silver);
font-size: clamp(1.05rem, 1.5vw, 1.28rem);
font-weight: 340;
line-height: 1.6;
letter-spacing: .002em;
}
.slgn-body {
margin: 0 0 1.1rem;
color: var(--ws-silver);
font-weight: 380;
}
.slgn-body:last-child { margin-bottom: 0; }
.slgn-label {
display: inline-block;
margin: 0 0 1.4rem;
color: var(--ws-mute);
font-family: var(--ws-display);
font-size: .74rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
}
.slgn-num {
color: var(--ws-mute);
font-family: var(--ws-display);
font-size: .8rem;
font-weight: 600;
letter-spacing: .12em;
font-variant-numeric: tabular-nums;
} .slgn-btn {
display: inline-flex;
align-items: center;
gap: .7rem;
padding: 1.05rem 2.1rem;
border: 1px solid var(--ws-paper);
background: var(--ws-paper);
color: var(--ws-ink);
font-family: var(--ws-display);
font-size: .92rem;
font-weight: 600;
letter-spacing: .02em;
text-decoration: none;
transition: background .35s var(--ws-ease), color .35s var(--ws-ease),
transform .35s var(--ws-ease), border-color .35s var(--ws-ease);
}
.slgn-btn:hover,
.slgn-btn:focus-visible {
background: var(--ws-white);
border-color: var(--ws-white);
color: var(--ws-ink);
transform: translateY(-2px);
}
.slgn-btn--ghost {
background: transparent;
border-color: var(--ws-line);
color: var(--ws-paper);
}
.slgn-btn--ghost:hover,
.slgn-btn--ghost:focus-visible {
background: transparent;
border-color: var(--ws-white);
color: var(--ws-white);
}
.slgn-btn i {
font-style: normal;
transition: transform .35s var(--ws-ease);
}
.slgn-btn:hover i { transform: translateX(4px); }
.slgn-ws :focus-visible {
outline: 2px solid var(--ws-white);
outline-offset: 3px;
}  .slgn-js .slgn-ws .slgn-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .6s var(--ws-ease), transform .6s var(--ws-ease);
transition-delay: min(calc(var(--i, 0) * 55ms), 260ms);
}
.slgn-js .slgn-ws .slgn-reveal.is-in {
opacity: 1;
transform: none;
} .slgn-js .slgn-ws .slgn-workrow.is-in,
.slgn-js .slgn-ws .slgn-feature.is-in {
transition: padding-left var(--ws-move), color var(--ws-hover);
transition-delay: 0s;
} .slgn-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
} .slgn-words {
display: inline;
}
.slgn-word {
display: inline-block;
transform: translateY(0);
}
.slgn-js .slgn-ws .slgn-reveal .slgn-word {
opacity: 0;
transform: translateY(.5em) rotate(1.2deg);
transition: opacity .5s var(--ws-ease), transform .5s var(--ws-ease); transition-delay: min(calc(var(--i, 0) * 34ms), 300ms);
}
.slgn-js .slgn-ws .slgn-reveal.is-in .slgn-word {
opacity: 1;
transform: none;
} .slgn-rule {
height: 1px;
border: 0;
margin: 0;
background: var(--ws-line);
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 1.1s var(--ws-ease);
}
.slgn-ws .slgn-reveal.is-in .slgn-rule,
.slgn-ws .slgn-rule.is-in { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) {
.slgn-ws .slgn-reveal,
.slgn-ws .slgn-reveal .slgn-word,
.slgn-ws .slgn-rule {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.slgn-marquee__track { animation: none !important; }
} .slgn-hero {
position: relative;
display: grid;
min-height: min(66vh, 40rem);
padding: calc(var(--ws-pad) + 2.7rem) var(--ws-pad) calc(var(--ws-pad) + 2rem);
align-content: center;
overflow: hidden;
}
.slgn-hero__media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
background: #030303;
}
.slgn-hero__media iframe {
position: absolute;
left: 50%;
top: 50%;
width: max(100vw, 177.78vh);
height: max(56.25vw, 100vh);
border: 0;
transform: translate(-50%, -50%);
}
.slgn-hero__media video,
.slgn-hero__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slgn-hero__media iframe,
.slgn-hero__media video,
.slgn-hero__media img {
opacity: .26;
filter: grayscale(1) contrast(1.25) brightness(.62);
}
.slgn-hero__media::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background:
radial-gradient(circle at 76% 30%, rgba(255,255,255,.12), transparent 34%),
linear-gradient(90deg, rgba(0,0,0,.94), rgba(0,0,0,.42) 52%, rgba(0,0,0,.9));
pointer-events: none;
}
.slgn-three {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: .74;
mix-blend-mode: screen;
}
.slgn-hero__scan {
position: absolute;
inset: 0;
z-index: 4;
opacity: .11;
background: repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.13) 10px);
mix-blend-mode: screen;
animation: slgn-scan 9s linear infinite;
}
.slgn-kinetic {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .36;
}
.slgn-kinetic span {
position: absolute;
width: 1px;
height: 42vh;
background: linear-gradient(transparent, rgba(255,255,255,.78), transparent);
transform: rotate(24deg);
animation: slgn-lineFall 8s linear infinite;
}
.slgn-kinetic span:nth-child(1) { left: 18%; top: -18%; animation-delay: 0s; }
.slgn-kinetic span:nth-child(2) { left: 46%; top: -30%; animation-delay: 1.7s; }
.slgn-kinetic span:nth-child(3) { left: 72%; top: -24%; animation-delay: 3.2s; }
.slgn-kinetic span:nth-child(4) { left: 88%; top: -36%; animation-delay: 5s; }
@keyframes slgn-scan {
from { transform: translateY(-2rem); }
to { transform: translateY(2rem); }
}
@keyframes slgn-lineFall {
from { transform: translate3d(-18vw, -40vh, 0) rotate(24deg); opacity: 0; }
18% { opacity: 1; }
70% { opacity: .7; }
to { transform: translate3d(20vw, 120vh, 0) rotate(24deg); opacity: 0; }
} .slgn-hero::before,
.slgn-hero::after {
content: "";
position: absolute;
z-index: 0;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
}
.slgn-hero::before {
width: 46vw;
height: 46vw;
top: -14vw;
right: -10vw;
background: rgba(255, 255, 255, .07);
animation: slgn-drift 22s var(--ws-ease) infinite alternate;
}
.slgn-hero::after {
width: 34vw;
height: 34vw;
bottom: -12vw;
left: -8vw;
background: rgba(255, 255, 255, .045);
animation: slgn-drift 28s var(--ws-ease) infinite alternate-reverse;
}
@keyframes slgn-drift {
from { transform: translate3d(0, 0, 0) scale(1); }
to   { transform: translate3d(3vw, 4vw, 0) scale(1.14); }
}
.slgn-hero__inner {
position: relative;
z-index: 2;
width: min(88rem, 100%);
margin-inline: auto;
} .slgn-hero:has(.slgn-hero__film)::before,
.slgn-hero:has(.slgn-hero__film)::after { content: none; } .slgn-hero__velo {
position: absolute;
inset: 0;
z-index: 1;
display: block;
pointer-events: none;
}
.slgn-hero__velo--uniforme {
background: rgba(var(--velo-tinta), var(--velo-forza));
}
.slgn-hero__velo--basso {
background: linear-gradient(
to top,
rgba(var(--velo-tinta), var(--velo-forza)) 0%,
rgba(var(--velo-tinta), calc(var(--velo-forza) * .74)) 32%,
rgba(var(--velo-tinta), calc(var(--velo-forza) * .28)) 64%,
rgba(var(--velo-tinta), 0) 92%
);
}
.slgn-hero__velo--alto {
background: linear-gradient(
to bottom,
rgba(var(--velo-tinta), var(--velo-forza)) 0%,
rgba(var(--velo-tinta), calc(var(--velo-forza) * .74)) 32%,
rgba(var(--velo-tinta), calc(var(--velo-forza) * .28)) 64%,
rgba(var(--velo-tinta), 0) 92%
);
} .slgn-hero__velo--bordi {
background: radial-gradient(
118% 88% at 50% 46%,
rgba(var(--velo-tinta), 0) 34%,
rgba(var(--velo-tinta), calc(var(--velo-forza) * .5)) 72%,
rgba(var(--velo-tinta), var(--velo-forza)) 100%
);
}
.slgn-hero__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(14rem, 19.5rem);
gap: clamp(1.5rem, 5vw, 4.5rem);
align-items: end;
}
.slgn-hero__copy {
max-width: 62rem;
}
.slgn-hero__title { max-width: 14ch;
margin: 0 0 .85rem;
font-size: clamp(2.35rem, 4.55vw, 4.35rem);
line-height: .9;
letter-spacing: -0.0117em;
}
.slgn-hero__title .slgn-word {
margin-right: .08em;
}
.slgn-hero__lead {
max-width: 42rem;
font-size: clamp(.98rem, 1.28vw, 1.16rem);
}
.slgn-hero__showcase {
align-self: end;
display: grid;
gap: .65rem;
}
.slgn-hero__caption {
color: var(--ws-silver);
font-size: .92rem;
line-height: 1.55;
}
.slgn-hero-story {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 14;
min-height: 18.8rem;
border: 1px solid var(--ws-line);
background: rgba(0, 0, 0, .52);
box-shadow: 0 2.5rem 5rem rgba(0,0,0,.38);
}
.slgn-hero-story__top {
position: relative;
z-index: 3;
height: 2.45rem;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 .8rem;
border-bottom: 1px solid var(--ws-line-soft);
background: rgba(0, 0, 0, .62);
color: var(--ws-silver);
font-size: .56rem;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
}
.slgn-hero-story__top i {
width: .2rem;
height: .2rem;
border-radius: 50%;
background: var(--ws-paper);
box-shadow: .38rem 0 0 rgba(255,255,255,.5), .76rem 0 0 rgba(255,255,255,.25);
}
.slgn-hero-story__media {
position: absolute;
inset: 2.45rem 0 0;
}
.slgn-hero-story__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transform: scale(1.06);
filter: saturate(1.12) contrast(1.05) brightness(.92);
transition: opacity .8s ease, transform 4.6s linear;
}
.slgn-hero-story__media img.slgn-is-active {
opacity: 1;
transform: scale(1);
}
.slgn-hero-story__media::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.04), transparent 42%, rgba(0,0,0,.66)),
linear-gradient(90deg, rgba(0,0,0,.22), transparent);
}
.slgn-hero-story__progress {
position: absolute;
z-index: 3;
top: 3rem;
left: .75rem;
right: .75rem;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: .25rem;
}
.slgn-hero-story__progress span {
height: 2px;
overflow: hidden;
background: rgba(255,255,255,.32);
}
.slgn-hero-story__progress span::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: var(--ws-paper);
transform: scaleX(0);
transform-origin: left;
}
.slgn-hero-story__progress span.slgn-is-active::before {
animation: slgn-storyProgress 4.2s linear forwards;
}
@keyframes slgn-storyProgress { to { transform: scaleX(1); } }
.slgn-hero-story__copy {
position: absolute;
z-index: 3;
left: 1rem;
right: 1rem;
bottom: 1.1rem;
}
.slgn-hero-story__copy p {
margin: 0 0 .55rem;
color: var(--ws-silver);
font-size: .58rem;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.slgn-hero-story__copy h2 {
margin: 0;
font-size: clamp(1.35rem, 1.8vw, 2.1rem);
line-height: .92;
letter-spacing: -0.0117em;
text-transform: uppercase;
}
.slgn-hero-story__copy span {
display: block;
margin-top: .85rem;
color: var(--ws-silver);
font-size: .58rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.slgn-hero-signals {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid var(--ws-line);
background: rgba(0, 0, 0, .44);
backdrop-filter: blur(14px);
}
.slgn-hero-signals span {
min-height: 2.55rem;
display: flex;
align-items: center;
justify-content: center;
padding: .45rem .35rem;
border-right: 1px solid var(--ws-line-soft);
color: var(--ws-silver);
font-size: .58rem;
font-weight: 800;
letter-spacing: .12em;
text-align: center;
text-transform: uppercase;
}
.slgn-hero-signals span:last-child { border-right: 0; }
.slgn-hero__foot {
display: none;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 1.2rem;
margin-top: clamp(1.2rem, 3vw, 2.3rem);
}
.slgn-hero__actions {
display: flex;
flex-wrap: wrap;
gap: .9rem;
margin-top: clamp(1rem, 2vw, 1.55rem);
}
.slgn-hero__caption {
max-width: 28rem;
margin: 0;
}
.slgn-clients {
position: absolute;
z-index: 4;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid var(--ws-line-soft);
border-bottom: 1px solid var(--ws-line-soft);
background: rgba(0, 0, 0, .72);
backdrop-filter: blur(14px);
overflow: hidden;
}
.slgn-clients__inner {
display: flex;
width: max-content;
animation: slgn-clientRun 28s linear infinite;
}
.slgn-clients__track {
display: flex;
align-items: center;
}
.slgn-clients span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.85rem;
padding-inline: clamp(.9rem, 2.4vw, 1.8rem);
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: clamp(.88rem, 1.8vw, 1.35rem);
font-weight: 600;
letter-spacing: 0;
white-space: nowrap;
text-transform: uppercase;
}
.slgn-clients b {
display: grid;
place-items: center;
width: clamp(2.9rem, 5vw, 4.3rem);
aspect-ratio: 2.4 / 1;
border: 1px solid var(--ws-line);
font: inherit;
}
.slgn-clients span::after {
content: "";
width: .35rem;
height: .35rem;
margin-left: clamp(1.4rem, 4vw, 3.5rem);
border-radius: 50%;
background: var(--ws-mute);
}
@keyframes slgn-clientRun {
to { transform: translateX(-50%); }
} .slgn-scroll {
display: flex;
align-items: center;
gap: .8rem;
color: var(--ws-mute);
font-family: var(--ws-display);
font-size: .7rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
}
.slgn-scroll::after {
content: "";
width: 1px;
height: 3.2rem;
background: linear-gradient(var(--ws-paper), transparent);
animation: slgn-drop 2.4s var(--ws-ease) infinite;
transform-origin: 0 0;
}
@keyframes slgn-drop {
0%   { transform: scaleY(0); opacity: 0; }
35%  { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(1) translateY(3.2rem); opacity: 0; }
} .slgn-sec--visual {
overflow: hidden;
background:
linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.58)),
var(--slgn-section-bg, none) center / cover no-repeat,
linear-gradient(135deg, rgba(255,255,255,.035), transparent 34%),
var(--ws-ink);
}
.slgn-visual-grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .7fr);
gap: clamp(1rem, 2vw, 1.6rem);
align-items: stretch;
}
.slgn-visual-copy {
display: grid;
align-content: end;
min-height: 18rem;
padding: clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--ws-line-soft);
background: rgba(255, 255, 255, .035);
}
.slgn-visual-copy .slgn-h3,
.slgn-card__title,
.slgn-step__title {
line-height: 1.04;
letter-spacing: -0.0083em;
word-spacing: .08em;
}
.slgn-shot {
position: relative;
min-height: clamp(18rem, 44vw, 38rem);
margin: 0;
overflow: hidden;
border: 1px solid var(--ws-line-soft);
background: var(--ws-ink-lift);
}
.slgn-shot--wide { grid-row: span 2; }
.slgn-shot--tall { min-height: 22rem; }
.slgn-shot img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.04) contrast(1.08) brightness(.82);
transform: scale(1.045);
transition: transform 1.6s var(--ws-ease), filter .7s ease;
}
.slgn-shot::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(180deg, transparent 58%, rgba(0,0,0,.78)),
repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,.05) 39px);
mix-blend-mode: screen;
opacity: .42;
pointer-events: none;
}
.slgn-shot:hover img {
transform: scale(1);
filter: saturate(1.12) contrast(1.12) brightness(.9);
}
.slgn-shot figcaption {
position: absolute;
z-index: 2;
left: 1rem;
right: 1rem;
bottom: 1rem;
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: .72rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.slgn-editorial {
display: grid;
grid-template-columns: minmax(18rem, .85fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 4.5rem);
align-items: center;
}
.slgn-editorial__body {
max-width: 48rem;
}
.slgn-editorial__body .slgn-lead {
margin-top: 1.4rem;
}
.slgn-sec--lab {
overflow: hidden;
background:
linear-gradient(180deg, rgba(255,255,255,.04), transparent 22%),
radial-gradient(circle at 80% 10%, rgba(255,255,255,.08), transparent 30%),
var(--ws-ink);
}
.slgn-lab {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.slgn-lab__copy .slgn-lead { margin-top: 1.4rem; }
.slgn-lab__stage {
position: relative;
min-height: clamp(30rem, 52vw, 44rem);
border: 1px solid var(--ws-line-soft);
background:
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
rgba(255,255,255,.025);
background-size: 4rem 4rem;
overflow: hidden;
}
.slgn-lab__stage::after {
content: "";
position: absolute;
inset: -30%;
background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.2), transparent 34%);
animation: slgn-orbit 16s linear infinite;
opacity: .22;
}
.slgn-floating-card {
position: absolute;
z-index: 2;
margin: 0;
overflow: hidden;
border: 1px solid var(--ws-line);
background: var(--ws-ink-lift);
box-shadow: 0 2rem 5rem rgba(0,0,0,.38);
animation: slgn-float 7s var(--ws-ease) infinite alternate;
}
.slgn-floating-card img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.08) contrast(1.08) brightness(.84);
}
.slgn-floating-card--a {
width: min(62%, 30rem);
aspect-ratio: 16 / 10;
left: 8%;
top: 12%;
}
.slgn-floating-card--b {
width: min(42%, 18rem);
aspect-ratio: 4 / 5;
right: 8%;
top: 28%;
animation-delay: -2s;
}
.slgn-floating-card--c {
width: min(48%, 22rem);
aspect-ratio: 5 / 3.4;
left: 22%;
bottom: 10%;
animation-delay: -4s;
}
.slgn-lab__panel {
position: absolute;
z-index: 3;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid var(--ws-line-soft);
background: rgba(0,0,0,.68);
backdrop-filter: blur(12px);
}
.slgn-lab__panel span {
padding: .8rem;
border-right: 1px solid var(--ws-line-soft);
color: var(--ws-silver);
font-family: var(--ws-display);
font-size: .7rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
.slgn-lab__panel span:last-child { border-right: 0; }
@keyframes slgn-float {
from { transform: translate3d(0, 0, 0) rotate(-1deg); }
to { transform: translate3d(1.2rem, -1rem, 0) rotate(1deg); }
}
@keyframes slgn-orbit {
to { transform: rotate(360deg); }
}
.slgn-deliverables {
display: grid;
border-top: 1px solid var(--ws-line-soft);
}
.slgn-deliverable {
display: grid;
grid-template-columns: 5rem minmax(10rem, .7fr) minmax(0, 1fr);
gap: 1.5rem;
align-items: baseline;
padding: clamp(1.4rem, 3vw, 2.4rem) 0;
border-bottom: 1px solid var(--ws-line-soft);
}
.slgn-deliverable span {
color: var(--ws-mute);
font-family: var(--ws-display);
font-size: .82rem;
font-weight: 600;
letter-spacing: .12em;
}
.slgn-deliverable h3 {
font-size: clamp(1.5rem, 2.8vw, 2.5rem);
}
.slgn-deliverable p {
margin: 0;
color: var(--ws-silver);
}
.slgn-sec--guide {
overflow: hidden;
background:
linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.44)),
var(--slgn-section-bg, none) center / cover no-repeat,
linear-gradient(180deg, transparent, rgba(255,255,255,.035)),
var(--ws-ink);
}
.slgn-guide {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: clamp(2rem, 5vw, 5rem);
align-items: center;
}
.slgn-guide__media {
position: relative;
min-height: clamp(28rem, 54vw, 42rem);
}
.slgn-device {
position: absolute;
overflow: hidden;
border: 1px solid var(--ws-line);
background: var(--ws-ink-lift);
box-shadow: 0 2.5rem 5rem rgba(0,0,0,.42);
}
.slgn-device img {
width: 100%;
height: 100%;
object-fit: cover;
filter: saturate(1.06) contrast(1.08) brightness(.86);
}
.slgn-device--desktop {
left: 0;
top: 6%;
width: 82%;
aspect-ratio: 16 / 10;
animation: slgn-devicePan 10s var(--ws-ease) infinite alternate;
}
.slgn-device--phone {
right: 0;
bottom: 4%;
width: 34%;
aspect-ratio: 9 / 16;
animation: slgn-devicePan 8s var(--ws-ease) infinite alternate-reverse;
}
.slgn-guide__ruler {
position: absolute;
inset: 12% auto auto 8%;
width: 72%;
height: 72%;
border: 1px solid rgba(255,255,255,.16);
transform: rotate(-7deg);
pointer-events: none;
}
.slgn-guide__ruler::before,
.slgn-guide__ruler::after {
content: "";
position: absolute;
background: rgba(255,255,255,.28);
}
.slgn-guide__ruler::before { left: 50%; top: -20%; width: 1px; height: 140%; }
.slgn-guide__ruler::after { left: -12%; top: 50%; width: 124%; height: 1px; }
@keyframes slgn-devicePan {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(.8rem, -1rem, 0); }
}
.slgn-guide__copy .slgn-lead { margin-top: 1.4rem; }
.slgn-checks {
display: grid;
gap: 0;
margin: 2rem 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--ws-line-soft);
}
.slgn-checks li {
position: relative;
padding: 1rem 0 1rem 2rem;
border-bottom: 1px solid var(--ws-line-soft);
color: var(--ws-silver);
}
.slgn-checks li::before {
content: "";
position: absolute;
left: 0;
top: 1.55rem;
width: .55rem;
height: .55rem;
background: var(--ws-paper);
} .slgn-head {
display: grid;
gap: 1.6rem;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 900px) {
.slgn-head {
grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
align-items: end;
gap: 3rem;
}
}
.slgn-head__title { margin: 0; } .slgn-rows {
border-top: 1px solid var(--ws-line-soft);
}
.slgn-row {
position: relative;
display: grid;
gap: .6rem 2rem;
padding: clamp(1.8rem, 3.6vw, 3rem) 0;
border-bottom: 1px solid var(--ws-line-soft);
transition: padding-left .45s var(--ws-ease);
}
@media (min-width: 900px) {
.slgn-row {
grid-template-columns: 5rem minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
align-items: baseline;
}
} .slgn-row::before {
content: "";
position: absolute;
inset: 0 -1.5rem;
z-index: -1;
background: var(--ws-ink-lift);
opacity: 0;
transition: opacity .45s var(--ws-ease);
}
.slgn-row:hover::before { opacity: 1; }
.slgn-row:hover { padding-left: 1.5rem; }
.slgn-row__title {
font-family: var(--ws-display);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.0133em;
}
.slgn-row__desc { color: var(--ws-silver); margin: 0; }
.slgn-row__tags {
display: flex;
flex-wrap: wrap;
gap: .4rem;
margin: .6rem 0 0;
padding: 0;
list-style: none;
}
.slgn-row__tags li {
padding: .3rem .7rem;
border: 1px solid var(--ws-line-soft);
color: var(--ws-mute);
font-size: .74rem;
letter-spacing: .06em;
text-transform: uppercase;
} .slgn-marquee {
overflow: hidden;
padding: clamp(.85rem, 1.5vw, 1.25rem) 0;
border-block: 1px solid var(--ws-line-soft);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.slgn-marquee__track {
display: flex;
width: max-content;
animation: slgn-slide 34s linear infinite;
}
.slgn-marquee:hover .slgn-marquee__track { animation-play-state: paused; }
.slgn-marquee__group {
display: flex;
align-items: center;
gap: clamp(1.6rem, 4vw, 3.4rem);
padding-right: clamp(1.6rem, 4vw, 3.4rem);
}
.slgn-marquee__group span {
font-family: var(--ws-display);
font-size: clamp(.98rem, 1.65vw, 1.55rem);
font-weight: 600;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
}
.slgn-marquee__group i {
flex: none;
width: .42rem;
height: .42rem;
border-radius: 50%;
background: var(--ws-mute);
}
@keyframes slgn-slide {
from { transform: translate3d(0, 0, 0); }
to   { transform: translate3d(-50%, 0, 0); }
} .slgn-stat { border-top: 1px solid var(--ws-line-soft); padding-top: 1.4rem; }
.slgn-stat__value {
display: block;
font-family: var(--ws-display);
font-size: clamp(2.8rem, 6vw, 4.6rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.0167em;
font-variant-numeric: tabular-nums;
}
.slgn-stat__label {
display: block;
margin-top: .7rem;
color: var(--ws-mute);
font-size: .82rem;
letter-spacing: .1em;
text-transform: uppercase;
} .slgn-steps { display: grid; gap: 1px; background: var(--ws-line-soft); }
.slgn-step {
display: grid;
gap: .8rem 2.5rem;
padding: clamp(1.8rem, 4vw, 3rem);
background: var(--ws-ink);
}
@media (min-width: 900px) {
.slgn-step {
grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1.5fr);
align-items: start;
position: sticky;
top: 5.5rem;
}
}
.slgn-step__title {
font-family: var(--ws-display);
font-size: clamp(1.4rem, 2.4vw, 2rem);
font-weight: 600;
letter-spacing: -0.0117em;
}
.slgn-step p { margin: 0; color: var(--ws-silver); } .slgn-card {
display: flex;
flex-direction: column;
gap: .8rem;
padding: clamp(1.5rem, 2.6vw, 2.2rem);
border: 1px solid var(--ws-line-soft);
background: var(--ws-ink);
transition: border-color .45s var(--ws-ease), transform .45s var(--ws-ease),
background .45s var(--ws-ease);
}
.slgn-card:hover {
border-color: var(--ws-line);
background: var(--ws-ink-lift);
transform: translateY(-4px);
}
.slgn-card__title {
font-family: var(--ws-display);
font-size: 1.25rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.slgn-card p { margin: 0; color: var(--ws-silver); font-size: .96rem; }  .slgn-ws blockquote.slgn-quote {
position: relative;
display: grid;
gap: .55rem 0;
max-width: none;
margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
padding: clamp(2.2rem, 3.6vw, 3rem) 0 clamp(1.5rem, 2.6vw, 2.1rem);
border: 0;
border-top: 1px solid var(--ws-line-soft);
background: none;
} .slgn-ws blockquote.slgn-quote::before,
.slgn-ws blockquote.slgn-quote::after {
position: absolute;
color: transparent; font-family: var(--ws-serif);
font-size: clamp(3.2rem, 6vw, 5.4rem);
font-weight: 400;
line-height: .72;
-webkit-text-stroke: 1px var(--ws-line);
pointer-events: none;
user-select: none;
}
.slgn-ws blockquote.slgn-quote::before {
content: "\201C";
top: clamp(.4rem, 1vw, .8rem);
right: 0;
left: auto;
}
.slgn-ws blockquote.slgn-quote::after {
content: "\201D";
left: 0;
right: auto;
bottom: 0;
}
.slgn-ws blockquote.slgn-quote p {
margin: 0;
padding-right: clamp(3rem, 6vw, 5.5rem);
font-family: var(--ws-serif);
font-size: clamp(1.05rem, 1.8vw, 1.4rem);
font-style: italic;
line-height: 1.36;
color: var(--ws-paper);
}
.slgn-ws blockquote.slgn-quote footer {
margin: 0;
padding-left: clamp(2.6rem, 5vw, 4rem);
color: var(--ws-mute);
font-size: .72rem;
letter-spacing: .16em;
text-transform: uppercase;
}
.slgn-ws blockquote.slgn-quote footer::before { content: "\2014\00a0"; } .slgn-contact {
display: grid;
gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 900px) {
.slgn-contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
.slgn-detail {
display: block;
padding: 1.2rem 0;
border-bottom: 1px solid var(--ws-line-soft);
color: var(--ws-paper);
text-decoration: none;
transition: color .3s var(--ws-ease), padding-left .3s var(--ws-ease);
}
a.slgn-detail:hover { color: var(--ws-white); padding-left: .5rem; }
.slgn-detail__label {
display: block;
margin-bottom: .25rem;
color: var(--ws-mute);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
}
.slgn-detail__value {
font-family: var(--ws-display);
font-size: clamp(1.05rem, 1.8vw, 1.4rem);
font-weight: 600;
letter-spacing: -0.02em;
} .slgn-form { display: grid; gap: 1.6rem; }
.slgn-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.2rem;
}
.slgn-field { display: grid; gap: .4rem; }
.slgn-field--wide,
.slgn-form__submit {
grid-column: 1 / -1;
}
.slgn-field > span,
.slgn-field label {
color: var(--ws-mute);
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
}
.slgn-form__submit {
margin: 0;
}
.slgn-ws .slgn-field input,
.slgn-ws .slgn-field select,
.slgn-ws .slgn-field textarea {
width: 100%;
padding: .85rem 0;
border: 0;
border-bottom: 1px solid var(--ws-line);
border-radius: 0;
background: transparent;
color: var(--ws-paper);
font-family: var(--ws-sans);
font-size: 1rem;
transition: border-color .3s var(--ws-ease);
}
.slgn-ws .slgn-field input:focus,
.slgn-ws .slgn-field select:focus,
.slgn-ws .slgn-field textarea:focus {
border-bottom-color: var(--ws-white);
outline: none;
} .slgn-ws .slgn-field select option { color: #111; background: #fff; }
.slgn-ws .slgn-field textarea { min-height: 8rem; resize: vertical; }
.slgn-ws .wpcf7-form {
display: grid;
gap: 1.1rem;
}
.slgn-ws .wpcf7-form .row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.1rem;
}
.slgn-ws .wpcf7-form .col-xl-12,
.slgn-ws .wpcf7-form .col-lg-12,
.slgn-ws .wpcf7-form .col-md-12 {
grid-column: 1 / -1;
}
.slgn-ws .wpcf7-form p {
margin: 0;
}
.slgn-ws .wpcf7-form br {
display: none;
}
.slgn-ws .wpcf7-form-control-wrap {
display: block;
}
.slgn-ws .wpcf7 input:not([type="submit"]),
.slgn-ws .wpcf7 select,
.slgn-ws .wpcf7 textarea {
width: 100%;
min-height: 3.4rem;
padding: .9rem 0;
border: 0;
border-bottom: 1px solid var(--ws-line);
border-radius: 0;
background: transparent;
color: var(--ws-paper);
font-family: var(--ws-sans);
font-size: 1rem;
line-height: 1.4;
box-shadow: none;
}
.slgn-ws .wpcf7 textarea {
min-height: 9rem;
resize: vertical;
}
.slgn-ws .wpcf7 input::placeholder,
.slgn-ws .wpcf7 textarea::placeholder {
color: var(--ws-mute);
opacity: 1;
}
.slgn-ws .wpcf7 select {
padding-inline: 1rem;
background-color: var(--ws-ink-lift) !important;
color: var(--ws-silver) !important;
}
.slgn-ws .wpcf7 select option {
color: #111;
background: #fff;
}
.slgn-ws .wpcf7 input:focus,
.slgn-ws .wpcf7 select:focus,
.slgn-ws .wpcf7 textarea:focus {
border-bottom-color: var(--ws-white);
outline: none;
}
.slgn-ws .wpcf7 button[type="submit"],
.slgn-ws .wpcf7 input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .7rem;
min-height: 3.4rem;
padding: 1rem 1.6rem;
border: 1px solid var(--ws-paper);
border-radius: 0;
background: var(--ws-paper);
color: var(--ws-ink);
font-family: var(--ws-display);
font-size: .9rem;
font-weight: 600;
text-transform: none;
letter-spacing: .02em;
cursor: pointer;
}
.slgn-ws .wpcf7 button[type="submit"] svg path {
stroke: currentColor;
}
.slgn-ws .wpcf7-not-valid-tip,
.slgn-ws .wpcf7-response-output {
color: var(--ws-paper);
font-size: .85rem;
}
.slgn-ws .wpcf7-response-output {
margin: 1rem 0 0;
padding: .9rem 1rem;
border-color: var(--ws-line) !important;
} .slgn-cta {
padding: clamp(4rem, 10vw, 9rem) var(--ws-pad);
border-top: 1px solid var(--ws-line-soft);
text-align: center;
} .slgn-ws .slgn-cta__title {
margin: 0 auto 2.2rem;
max-width: 27ch;
} @media (max-width: 899px) {
.slgn-row { grid-template-columns: minmax(0, 1fr); }
.slgn-row:hover { padding-left: .8rem; }
.slgn-hero { min-height: auto; padding-top: calc(var(--ws-pad) + 2.65rem); padding-bottom: calc(var(--ws-pad) + 2.1rem); }
.slgn-hero__layout { grid-template-columns: minmax(0, 1fr); align-items: start; }
.slgn-hero__title { max-width: 13ch; font-size: clamp(2.15rem, 8.3vw, 3.15rem); }
.slgn-hero__showcase { width: min(100%, 22rem); }
.slgn-hero-story { width: min(100%, 22rem); min-height: 15.5rem; aspect-ratio: 16 / 10; }
.slgn-hero__foot { flex-direction: column; align-items: flex-start; }
.slgn-visual-grid,
.slgn-editorial,
.slgn-lab,
.slgn-guide { grid-template-columns: minmax(0, 1fr); }
.slgn-shot,
.slgn-shot--tall { min-height: 20rem; }
.slgn-lab__stage,
.slgn-guide__media { min-height: 28rem; }
.slgn-deliverable { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
}
@media (max-width: 599px) {
.slgn-ws { font-size: 16px; }
.slgn-btn { width: 100%; justify-content: center; }
.slgn-hero__actions { width: 100%; }
.slgn-hero-story { min-height: 13.5rem; }
.slgn-hero-story__copy { bottom: .8rem; }
.slgn-hero-story__copy h2 { font-size: 1.25rem; }
.slgn-hero-story__copy span { display: none; }
.slgn-hero-signals span { min-height: 2.25rem; font-size: .52rem; letter-spacing: .08em; }
.slgn-three { opacity: .52; }
.slgn-clients span { min-height: 2.9rem; }
.slgn-clients b { width: 3.25rem; }
.slgn-lab__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slgn-lab__panel span:nth-child(2) { border-right: 0; }
.slgn-lab__panel span:nth-child(-n+2) { border-bottom: 1px solid var(--ws-line-soft); }
.slgn-floating-card--a { width: 78%; left: 5%; }
.slgn-floating-card--b { width: 48%; right: 5%; }
.slgn-floating-card--c { width: 62%; left: 12%; }
.slgn-device--desktop { width: 88%; }
.slgn-device--phone { width: 42%; }
.slgn-form__grid { grid-template-columns: minmax(0, 1fr); }
.slgn-ws .wpcf7-form .row { grid-template-columns: minmax(0, 1fr); }
.slgn-ws .wpcf7 button[type="submit"],
.slgn-ws .wpcf7 input[type="submit"] { width: 100%; }
}  .slgn-hero--home {
display: grid; min-height: calc(100svh - 7.5rem);
grid-template-rows: 1fr auto;
align-content: stretch;
padding: 0;
}
.slgn-hero--home .slgn-hero__inner {
display: grid;
align-content: center;
width: min(84rem, 100%);
margin-inline: auto;
padding: clamp(2rem, 5vh, 3.5rem) var(--ws-pad) var(--ws-pad);
padding-left: 0;
padding-right: 0;
} .slgn-hero__copy {
position: relative;
z-index: 3;
max-width: min(34rem, 100%);
}
.slgn-hero--home .slgn-hero__title {
margin: .2rem 0 1.6rem;
font-size: clamp(2.8rem, 6.2vw, 5.4rem);
line-height: .92;
letter-spacing: -0.0167em;
}
.slgn-hero--home .slgn-lead { max-width: 34rem; }
.slgn-hero--home .slgn-hero__actions {
display: flex;
flex-wrap: wrap;
gap: .9rem;
margin-top: 2.2rem;
} .slgn-mg--home .slgn-mg__stack {
right: max(var(--ws-pad), calc(50% - 40rem));
width: min(22rem, 34vw);
}
.slgn-mg--home .slgn-mg__orbit { top: 42%;
left: 62%;
width: min(64vh, 40rem);
}
.slgn-mg--home .slgn-mg__mesh { opacity: .3; } .slgn-hero--home::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, var(--ws-ink, #080808) 8%, rgba(8,8,8,.72) 42%, transparent 78%);
pointer-events: none;
} .slgn-hero__strip {
position: relative;
z-index: 3;
display: grid;
gap: 1px;
width: 100%;
background: var(--ws-line-soft, rgba(255,255,255,.08));
border-top: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
}
@media (min-width: 760px) {
.slgn-hero__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.slgn-signal {
display: flex;
align-items: flex-start;
gap: .9rem;
padding: 1.5rem var(--ws-pad);
background: var(--ws-ink, #080808);
}
.slgn-signal__n {
color: var(--ws-mute, #6c6d70);
font-family: var(--ws-display, sans-serif);
font-size: .7rem;
font-weight: 600;
letter-spacing: .12em;
padding-top: .2rem;
}
.slgn-signal strong {
display: block;
color: var(--ws-paper, #ece9e1);
font-family: var(--ws-display, sans-serif);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.02em;
}
.slgn-signal span {
display: block;
margin-top: .2rem;
color: var(--ws-mute, #6c6d70);
font-size: .88rem;
line-height: 1.45;
} .slgn-area {
display: grid;
gap: clamp(1.8rem, 4vw, 4rem);
align-items: center;
width: min(84rem, 100%);
margin-inline: auto;
padding: clamp(3rem, 7vw, 6rem) var(--ws-pad);
border-top: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
}
@media (min-width: 900px) {
.slgn-area { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .slgn-area--flip .slgn-area__visual { order: 2; }
}
.slgn-area__body { max-width: 34rem; }
.slgn-area__title {
margin: .5rem 0 .3rem;
font-family: var(--ws-display, sans-serif);
font-size: clamp(1.9rem, 3.4vw, 2.9rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.015em;
}
.slgn-area__claim {
margin: 0 0 1rem;
color: var(--ws-white, #fff);
font-family: var(--ws-serif, Georgia, serif);
font-size: clamp(1.1rem, 1.7vw, 1.35rem);
font-style: italic;
line-height: 1.3;
}
.slgn-area__list {
display: grid;
gap: 0;
margin: 1.6rem 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
}
@media (min-width: 560px) {
.slgn-area__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.slgn-area__list li {
padding: .7rem 0;
border-bottom: 1px solid var(--ws-line-soft, rgba(255,255,255,.08));
color: var(--ws-silver, #c9c9c7);
font-size: .92rem;
}
@media (min-width: 560px) {
.slgn-area__list li:nth-child(odd) { padding-right: 1rem; }
} @media (max-width: 899px) {
.slgn-hero--home { min-height: auto; }
.slgn-hero--home .slgn-hero__inner {
padding-top: calc(var(--ws-pad) + 5rem);
padding-bottom: 3rem;
} .slgn-mg--home .slgn-mg__stack { display: none; }
.slgn-mg--home .slgn-mg__orbit { top: 34%; left: 72%; width: 30rem; }
.slgn-hero--home::before {
background: linear-gradient(180deg, rgba(8,8,8,.55) 0%, var(--ws-ink, #080808) 62%);
}
} @media (min-width: 1000px) {
.slgn-hero--home .slgn-hero__inner {
grid-template-columns: minmax(0, 1fr) 22rem;
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
}
}
.slgn-hero--home .slgn-hero__showcase {
position: relative;
z-index: 3;
align-self: center;
} @media (max-width: 999px) {
.slgn-hero--home .slgn-hero__showcase {
width: min(100%, 22rem);
margin-top: 2.5rem;
}
} .slgn-hero-story__slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.04);
transition: opacity .8s ease, transform 4.6s linear;
}
.slgn-hero-story__slide.slgn-is-active {
opacity: 1;
transform: scale(1);
} .slgn-hero-story__slide .slgn-mg {
position: absolute;
inset: 0;
aspect-ratio: auto;
min-height: 0;
border: 0;
background: linear-gradient(165deg, #121212, #080808 70%);
} .slgn-hero-story__slide .slgn-hero-story__copy {
position: absolute;
z-index: 4;
left: 1rem;
right: 1rem;
bottom: 1rem;
} .slgn-hero-story__slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: linear-gradient(180deg, transparent 38%, rgba(8,8,8,.92) 88%);
pointer-events: none;
} .slgn-hero-story__slide .slgn-mg__pills { display: none; } .slgn-hero-story__slide .slgn-mg__body {
align-content: start;
gap: .55rem;
}  .slgn-svc {
display: grid;
gap: 1px;
background: var(--ws-line-soft);
border: 1px solid var(--ws-line-soft);
}
@media (min-width: 800px) {
.slgn-svc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.slgn-svc__item {
display: flex;
flex-direction: column;
gap: .5rem;
padding: clamp(1.5rem, 3vw, 2.4rem);
background: var(--ws-ink);
transition: background .4s var(--ws-ease);
}
.slgn-svc__item:hover { background: var(--ws-ink-lift); }
.slgn-svc__title {
margin: .2rem 0 0;
font-family: var(--ws-display);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.0133em;
}
.slgn-svc__claim {
margin: 0;
color: var(--ws-white);
font-family: var(--ws-serif);
font-size: 1.05rem;
font-style: italic;
line-height: 1.3;
}
.slgn-svc__desc {
margin: .3rem 0 0;
color: var(--ws-silver);
font-size: .95rem;
}
.slgn-svc__tags {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin: .9rem 0 0;
padding: 0;
list-style: none;
}
.slgn-svc__tags li {
padding: .25rem .6rem;
border: 1px solid var(--ws-line-soft);
color: var(--ws-mute);
font-size: .72rem;
letter-spacing: .08em;
text-transform: uppercase;
} .slgn-band {
position: relative;
display: grid;
align-items: center;
min-height: clamp(24rem, 62vh, 40rem);
overflow: hidden;
border-block: 1px solid var(--ws-line-soft);
}
.slgn-band--short { min-height: clamp(16rem, 40vh, 26rem); }
.slgn-band__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; filter: grayscale(.55) contrast(1.12) brightness(.72);
}
.slgn-band::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(8,8,8,.94) 6%, rgba(8,8,8,.62) 48%, rgba(8,8,8,.28));
pointer-events: none;
}
.slgn-band__inner {
position: relative;
z-index: 2;
width: 100%;
padding: clamp(2.5rem, 6vw, 5rem) var(--ws-pad);
}
.slgn-band__title { max-width: 25ch; margin: .4rem 0 1.2rem; }
.slgn-band--short .slgn-band__title { margin-bottom: 0; }
.slgn-band .slgn-lead { max-width: 38rem; } .slgn-band__cta { margin: clamp(1.3rem, 2.6vw, 2rem) 0 0; } .slgn-band--short .slgn-band__cta { margin-top: clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 760px) {
.slgn-band::after {
background: linear-gradient(180deg, rgba(8,8,8,.6), rgba(8,8,8,.92));
}
}   .slgn-hero-story__media img.slgn-hero-story__shot {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1;
transform: none;
filter: grayscale(.45) contrast(1.08) brightness(1.12);
} .slgn-hero-story__slide .slgn-hero-story__video {
position: absolute;
z-index: 1;
inset: 0;
}
.slgn-hero-story__slide .slgn-hero-story__video .slgn-vd__el { width: 100%; height: 100%; } .slgn-hero-story__slide .slgn-mg {
position: absolute;
inset: auto .7rem auto .7rem;
top: .7rem;
height: 42%;
min-height: 0;
aspect-ratio: auto;
border: 1px solid rgba(255,255,255,.18);
background: rgba(8, 8, 8, .62);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}  .slgn-mg--strip {
height: auto;
margin-bottom: 1.2rem;
border: 1px solid var(--ws-line-soft);
background: linear-gradient(158deg, #121212, #0a0a0a 70%); opacity: 1;
}  .slgn-feature {
position: relative;
display: grid;
gap: 0;
border: 1px solid var(--ws-line-soft);
background: var(--ws-ink-soft);
color: inherit;
text-decoration: none;
overflow: hidden;
transition: border-color .45s var(--ws-ease), background .45s var(--ws-ease);
}
@media (min-width: 900px) {
.slgn-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}
.slgn-feature:hover {
border-color: var(--ws-line);
background: var(--ws-ink-lift);
} .slgn-feature__media {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
min-height: clamp(13rem, 26vw, 20rem);
background: #0b0b0b;
}
@media (min-width: 900px) {
.slgn-feature__media { aspect-ratio: 16 / 11; }
}
.slgn-feature__img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(.35) contrast(1.06);
transform: scale(1.01);
transition: transform 1.1s var(--ws-ease), filter .6s var(--ws-ease);
}
.slgn-feature:hover .slgn-feature__img {
transform: scale(1.05);
filter: grayscale(0) contrast(1.1);
}
.slgn-feature__badge {
position: absolute;
z-index: 2;
left: 1rem;
top: 1rem;
padding: .3rem .7rem;
background: var(--ws-paper);
color: var(--ws-ink);
font-family: var(--ws-display);
font-size: .66rem;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
}
.slgn-feature__body {
display: flex;
flex-direction: column;
gap: .5rem;
padding: clamp(1.6rem, 3.4vw, 3rem);
justify-content: center;
}
.slgn-feature__title {
margin: 0;
font-family: var(--ws-display);
font-size: clamp(2rem, 3.6vw, 3.2rem);
font-weight: 600;
line-height: .98;
letter-spacing: -0.015em;
}
.slgn-feature__claim {
margin: .3rem 0 0;
color: var(--ws-white);
font-family: var(--ws-serif);
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
font-style: italic;
line-height: 1.34;
}
.slgn-feature__go {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.2rem;
color: var(--ws-silver);
font-family: var(--ws-display);
font-size: .9rem;
font-weight: 600;
}
.slgn-feature__go i { font-style: normal; transition: transform .4s var(--ws-ease); }
.slgn-feature:hover .slgn-feature__go { color: var(--ws-white); }
.slgn-feature:hover .slgn-feature__go i { transform: translateX(5px); } .slgn-worklist {
margin-top: 1px;
border-top: 1px solid var(--ws-line-soft);
}
.slgn-workrow {
position: relative;
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) auto 2rem;
align-items: baseline;
gap: 1rem;
padding: 1.3rem 0;
border-bottom: 1px solid var(--ws-line-soft);
color: inherit;
text-decoration: none;
transition: padding-left var(--ws-move), color var(--ws-hover);
} .slgn-workrow::before {
content: "";
position: absolute;
inset: 0 -1.5rem;
z-index: -1;
background: var(--ws-ink-lift);
opacity: 0;
transition: opacity var(--ws-move);
}
.slgn-workrow:hover::before,
.slgn-workrow:focus-visible::before { opacity: 1; }
.slgn-workrow:hover,
.slgn-workrow:focus-visible { padding-left: 1.5rem; color: var(--ws-white); } .slgn-workrow .slgn-num,
.slgn-workrow__scope { transition: color var(--ws-hover); }
.slgn-workrow:hover .slgn-num,
.slgn-workrow:hover .slgn-workrow__scope { color: var(--ws-silver); } .slgn-workrow__title {
font-family: var(--ws-display);
font-size: clamp(1.2rem, 2vw, 1.7rem);
font-weight: 600;
letter-spacing: -0.002em;
text-transform: uppercase;
}
.slgn-workrow__scope {
color: var(--ws-mute);
font-size: .8rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.slgn-workrow__go { justify-self: end; transition: transform var(--ws-move); }
.slgn-workrow:hover .slgn-workrow__go { transform: translateX(6px); }
@media (max-width: 700px) {
.slgn-workrow { grid-template-columns: 2.4rem minmax(0, 1fr) 1.5rem; }
.slgn-workrow__scope { display: none; }
}  .slgn-proof__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 800px) {
.slgn-proof__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
} .slgn-proof__list {
margin: clamp(.9rem, 1.6vw, 1.3rem) 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--ws-line-soft);
}
.slgn-proof__list li {
position: relative;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: clamp(.72rem, 1.25vw, 1.05rem) 0;
border-bottom: 1px solid var(--ws-line-soft);
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: clamp(1.1rem, 1.7vw, 1.5rem);
font-weight: 600;
letter-spacing: -0.02em;
transition: padding-left .45s var(--ws-ease), color .45s var(--ws-ease);
} .slgn-proof__list li::before {
content: "";
position: absolute;
inset: 0 -1.2rem;
z-index: -1;
background: var(--ws-ink-lift);
opacity: 0;
transition: opacity .45s var(--ws-ease);
}
.slgn-proof__list li:hover::before { opacity: 1; }
.slgn-proof__list li:hover { padding-left: 1.2rem; } .slgn-proof__list--alt li {
color: var(--ws-silver);
font-family: var(--ws-sans);
font-size: clamp(.72rem, 1vw, .82rem);
font-weight: 400;
letter-spacing: .14em;
text-transform: uppercase;
} .slgn-carousel {
position: relative;
margin-top: clamp(2rem, 4vw, 3.5rem); padding-inline: var(--ws-pad);
} .slgn-carousel__stage {
position: relative;
perspective: 1600px;
perspective-origin: 50% 42%;
}
.slgn-carousel__track {
position: relative; height: var(--slgn-pista, clamp(30rem, 50vw, 39rem));
transform-style: preserve-3d;
} .slgn-carousel:not(.is-ready) .slgn-carousel__track {
height: auto;
display: grid;
gap: 1.5rem;
}
.slgn-carousel:not(.is-ready) .slgn-carousel__bar { display: none; } .slgn-carousel.is-ready .slgn-card3d {
position: absolute;
inset: 0;
margin: auto; width: min(50rem, 80%);
height: fit-content; transform:
translateX(calc(var(--d, 0) * 46%))
translateZ(calc(var(--a, 0) * -22rem))
rotateY(calc(var(--d, 0) * -34deg))
scale(calc(1 - var(--a, 0) * 0.04));
opacity: calc(1 - var(--a, 0) * 0.42);
transition:
transform .95s var(--ws-ease),
opacity .95s var(--ws-ease);
backface-visibility: hidden;
will-change: transform;
} .slgn-carousel.is-ready .slgn-card3d[data-slgn-far] {
opacity: 0;
pointer-events: none;
}
.slgn-card3d__inner {
display: grid; grid-template-columns: minmax(0, 1fr);
gap: 1rem;
padding: clamp(1.4rem, 2.6vw, 2.2rem);
border: 1px solid var(--ws-line-soft);
background: linear-gradient(158deg, #141414, #0a0a0a 68%); box-shadow:
0 .1rem 0 rgba(255, 255, 255, .05) inset,
0 2.4rem 5rem rgba(0, 0, 0, .72);
} .slgn-carousel.is-ready .slgn-card3d.is-active .slgn-card3d__inner {
border-color: rgba(255, 255, 255, .22);
box-shadow:
0 .1rem 0 rgba(255, 255, 255, .08) inset,
0 3rem 6rem rgba(0, 0, 0, .8),
0 0 6rem rgba(255, 255, 255, .05);
}
.slgn-carousel.is-ready .slgn-card3d:not(.is-active) { cursor: pointer; }
.slgn-card3d__head {
display: flex;
align-items: baseline;
gap: 1rem;
padding-bottom: .8rem;
border-bottom: 1px solid var(--ws-line-soft);
}
.slgn-card3d__title {
margin: 0;
font-family: var(--ws-display);
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 600;
letter-spacing: -0.0133em;
} .slgn-card3d__scene .slgn-mg { height: auto; }
@media (min-width: 761px) {
.slgn-card3d__scene .slgn-mg { aspect-ratio: 21 / 6; }
}
@media (max-width: 760px) {
.slgn-card3d__scene .slgn-mg { aspect-ratio: 16 / 9; }
}
.slgn-card3d__text { margin: 0; color: var(--ws-silver); }
.slgn-card3d__out {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .6rem;
margin: 0;
padding-top: .8rem;
border-top: 1px solid var(--ws-line-soft);
}
.slgn-card3d__out span {
color: var(--ws-mute);
font-size: .7rem;
letter-spacing: .18em;
text-transform: uppercase;
}
.slgn-card3d__out strong {
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: 1rem;
font-weight: 600;
letter-spacing: -0.02em;
} .slgn-carousel__bar {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(.5rem, 2vw, 1.5rem);
width: min(84rem, 100%);
margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
}
.slgn-carousel__arrow {
flex: none;
width: 2.8rem;
height: 2.8rem;
display: grid;
place-items: center;
border: 1px solid var(--ws-line);
background: transparent;
color: var(--ws-paper);
font-size: 1rem;
cursor: pointer;
transition: background .3s var(--ws-ease), color .3s var(--ws-ease),
border-color .3s var(--ws-ease);
}
.slgn-carousel__arrow:hover {
background: var(--ws-paper);
border-color: var(--ws-paper);
color: var(--ws-ink);
}
.slgn-carousel__dots {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .3rem;
margin: 0;
padding: 0;
list-style: none;
}
.slgn-carousel__dots button {
display: flex;
align-items: baseline;
gap: .55rem;
padding: .6rem 1rem;
border: 1px solid transparent;
background: transparent;
color: var(--ws-mute);
cursor: pointer;
transition: color .3s var(--ws-ease), border-color .3s var(--ws-ease);
}
.slgn-carousel__dots button:hover { color: var(--ws-silver); }
.slgn-carousel__dots li.is-current button {
border-color: var(--ws-line);
color: var(--ws-white);
}
.slgn-carousel__n {
font-family: var(--ws-display);
font-size: .7rem;
font-weight: 600;
letter-spacing: .12em;
}
.slgn-carousel__name {
font-family: var(--ws-display);
font-size: .95rem;
font-weight: 600;
letter-spacing: -0.02em;
} @media (max-width: 760px) {
.slgn-carousel__name { display: none; } .slgn-carousel { padding-inline: 0; }
.slgn-carousel.is-ready .slgn-card3d {
width: 90%;
transform:
translateX(calc(var(--d, 0) * 9%))
translateZ(calc(var(--a, 0) * -7rem))
scale(calc(1 - var(--a, 0) * 0.05));
opacity: calc(1 - var(--a, 0) * 0.62);
}
.slgn-carousel__stage { perspective: 1100px; } .slgn-carousel__track { height: var(--slgn-pista, clamp(30rem, 148vw, 42rem)); }
} @media (prefers-reduced-motion: reduce) {
.slgn-carousel.is-ready .slgn-carousel__track {
height: auto;
display: grid;
gap: 1.5rem;
transform-style: flat;
}
.slgn-carousel.is-ready .slgn-card3d {
position: relative;
inset: auto;
width: 100%;
transform: none;
opacity: 1;
transition: none;
}
.slgn-carousel.is-ready .slgn-card3d[data-slgn-far] { opacity: 1; }
.slgn-carousel__bar { display: none; }
}  .slgn-hero-story__slide::after {
background: linear-gradient(180deg, transparent 52%, rgba(6, 6, 6, .78) 92%);
} .slgn-hero-story__slide .slgn-hero-story__copy::before {
content: "";
position: absolute;
z-index: -1;
left: -1.4rem;
right: -1.4rem;
top: -2.6rem;
bottom: -1.6rem;
background: linear-gradient(180deg, rgba(6, 6, 6, 0), rgba(6, 6, 6, .82) 46%, rgba(6, 6, 6, .94));
pointer-events: none;
} .slgn-hero-story__slide .slgn-hero-story__copy h2,
.slgn-hero-story__copy h2 {
color: var(--ws-white);
font-family: var(--ws-display);
font-weight: 600;
text-shadow: 0 .08em .5em rgba(0, 0, 0, .55);
} .slgn-hero-story__slide .slgn-hero-story__copy p,
.slgn-hero-story__slide .slgn-hero-story__copy span {
color: var(--ws-paper);
text-shadow: 0 .1em .45em rgba(0, 0, 0, .6);
} .slgn-hero-story__slide .slgn-hero-story__copy span {
opacity: .88;
font-weight: 700;
}  .slgn-ws .slgn-sec,
.slgn-ws .slgn-cta {
isolation: isolate;
}
.slgn-ws .slgn-sec > *,
.slgn-ws .slgn-cta > * {
position: relative;
z-index: 1;
} .slgn-ws .slgn-sec:not(.slgn-sec--contrast)::before,
.slgn-ws .slgn-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 88px),
repeating-linear-gradient(0deg,  rgba(255, 255, 255, .06) 0 1px, transparent 1px 88px); -webkit-mask-image: radial-gradient(115% 88% at 50% 42%, #000 12%, transparent 76%);
mask-image: radial-gradient(115% 88% at 50% 42%, #000 12%, transparent 76%);
opacity: .55;
animation: slgn-secGrid 42s linear infinite;
}
@keyframes slgn-secGrid {
to { background-position: 88px 88px, 88px 88px; }
} .slgn-ws .slgn-sec:not(.slgn-sec--contrast)::after,
.slgn-ws .slgn-cta::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent 72%);
background-repeat: no-repeat;
background-size: 150% 150%;
animation: slgn-secAura 26s var(--ws-ease) infinite alternate;
}
@keyframes slgn-secAura {
from { background-position: -18% -30%; opacity: .7; }
to   { background-position: 118% 128%; opacity: 1; }
} .slgn-ws .slgn-sec:nth-of-type(even)::after {
animation-direction: alternate-reverse;
animation-duration: 31s;
} .slgn-ws .slgn-sec--lift::after {
background-image: radial-gradient(closest-side, rgba(255, 255, 255, .095), transparent 70%);
} .slgn-ws .slgn-sec--lift { background-color: var(--ws-ink-soft);
background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .3), transparent);
background-repeat: no-repeat;
background-size: 32% 1px;
animation: slgn-secEdge 13s var(--ws-ease) infinite;
}
@keyframes slgn-secEdge {
0%   { background-position: -40% 0; }
60%  { background-position: 140% 0; }
100% { background-position: 140% 0; }
} .slgn-ws .slgn-cta {
position: relative;
overflow: hidden;
} .slgn-ws .slgn-cta::before {
background-image:
radial-gradient(circle at 50% 50%,
transparent 0 31%,
rgba(255, 255, 255, .12) 31% calc(31% + 1px),
transparent calc(31% + 1px) 44%,
rgba(255, 255, 255, .07) 44% calc(44% + 1px),
transparent calc(44% + 1px)),
repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 88px),
repeating-linear-gradient(0deg,  rgba(255, 255, 255, .05) 0 1px, transparent 1px 88px);
background-size: 130% 320%, 88px 88px, 88px 88px;
background-position: 50% 50%, 0 0, 0 0;
background-repeat: no-repeat, repeat, repeat;
animation: slgn-ctaRing 60s linear infinite;
}
@keyframes slgn-ctaRing {
to { background-position: 50% 50%, 88px 88px, 88px 88px; }
} .slgn-band__img {
animation: slgn-bandDrift 34s var(--ws-ease) infinite alternate;
}
@keyframes slgn-bandDrift {
from { transform: scale(1.02) translate3d(0, 0, 0); }
to   { transform: scale(1.11) translate3d(-1.4%, -1.8%, 0); }
} @media (prefers-reduced-motion: reduce) {
.slgn-ws .slgn-sec::before,
.slgn-ws .slgn-sec::after,
.slgn-ws .slgn-sec--lift,
.slgn-ws .slgn-cta::before,
.slgn-ws .slgn-cta::after,
.slgn-band__img {
animation: none !important;
}
}  .slgn-hero-story__media::after {
display: none;
} .slgn-hero-story__slide::after {
content: "";
position: absolute;
inset: 0;
z-index: 2; background:
linear-gradient(180deg, rgba(6, 6, 6, .68), rgba(6, 6, 6, .26) 9%, transparent 19%),
linear-gradient(
180deg,
transparent 38%,
rgba(6, 6, 6, .62) 62%,
rgba(6, 6, 6, .9) 82%,
rgba(6, 6, 6, .96)
);
pointer-events: none;
} .slgn-hero-story__slide .slgn-hero-story__copy {
position: absolute;
z-index: 6;
left: 1rem;
right: 1rem;
bottom: 1rem;
} .slgn-hero-story__slide .slgn-hero-story__copy::before {
display: none;
} .slgn-hero-story__slide.slgn-hero-story__slide--senza-testo::after {
background: linear-gradient(180deg, rgba(6, 6, 6, .68), rgba(6, 6, 6, .26) 9%, transparent 19%);
} .slgn-hero-story__slide .slgn-hero-story__copy h2 {
color: var(--ws-white);
font-family: var(--ws-display);
font-weight: 500;
text-transform: uppercase;
text-shadow: 0 .08em .45em rgba(0, 0, 0, .5);
}
.slgn-hero-story__slide .slgn-hero-story__copy p,
.slgn-hero-story__slide .slgn-hero-story__copy span {
color: var(--ws-paper);
text-shadow: 0 .1em .4em rgba(0, 0, 0, .55);
} .slgn-hero-story__progress {
z-index: 7;
} .slgn-hero-story__progress span {
background: rgba(255, 255, 255, .38);
box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
} .slgn-about {
position: relative;
overflow: hidden;
border-block: 1px solid var(--ws-line-soft);
}  .slgn-ws .slgn-about .slgn-about__mark {
position: absolute;
right: -.04em; bottom: -.3em; z-index: 2;
display: grid; justify-items: end;
color: rgba(13, 13, 13, .07);
font-family: var(--ws-display);
font-size: clamp(6rem, 18vw, 16rem);
font-weight: 600;
line-height: .82;
letter-spacing: -.03em;
text-transform: uppercase; pointer-events: none;
user-select: none;
}
.slgn-about__markline {
display: block;
}
.slgn-ws .slgn-about--scura .slgn-about__mark {
color: rgba(255, 255, 255, .045);
} .slgn-about__grid {
position: relative;
z-index: 1;
display: grid;
gap: clamp(2.5rem, 5vw, 5rem);
align-items: start;
}
@media (min-width: 1000px) {
.slgn-about__grid { grid-template-columns: minmax(0, 1fr) 20rem;
}
}
.slgn-about__copy > .slgn-h2 {
max-width: 22ch;
margin-bottom: 1.8rem;
}
.slgn-about__text {
max-width: 46rem;
}
.slgn-about__text .slgn-body {
color: var(--ws-silver);
}
.slgn-about__cta {
margin: 2.2rem 0 0;
} .slgn-about__facts {
display: grid;
margin: 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--ws-line);
}
.slgn-fact {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1.2rem;
padding: 1.15rem 0;
border-bottom: 1px solid var(--ws-line-soft);
}
.slgn-fact__v {
font-family: var(--ws-display);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 500;
line-height: 1;
letter-spacing: -.01em;
text-transform: uppercase;
}
.slgn-fact__l {
flex: 0 1 auto;
color: var(--ws-mute);
font-size: .72rem;
font-weight: 600;
letter-spacing: .16em;
text-align: right;
text-transform: uppercase;
} .slgn-about--chiara .slgn-btn:hover,
.slgn-about--chiara .slgn-btn:focus-visible {
background: #2a2a2a;
border-color: #2a2a2a;
color: #ece9e1;
} @media (max-width: 999px) {
.slgn-ws .slgn-about .slgn-about__mark {
font-size: clamp(4rem, 26vw, 8rem);
bottom: -.26em;
}
.slgn-about__copy > .slgn-h2 {
max-width: none;
}
} @supports (-webkit-text-stroke: 1px currentColor) { @media (min-width: 760px) {
.slgn-ws .slgn-display .slgn-word--em {
color: transparent;
-webkit-text-stroke: 1.4px var(--ws-paper); font-weight: 500;
text-shadow: 0 0 3rem rgba(255, 255, 255, .13);
}
}
@media (min-width: 1000px) {
.slgn-ws .slgn-cta__title .slgn-word--em {
color: transparent;
-webkit-text-stroke: 1.3px var(--ws-paper);
font-weight: 500;
text-shadow: 0 0 3rem rgba(255, 255, 255, .13);
}
} .slgn-marquee__group span:nth-of-type(even) {
color: transparent;
-webkit-text-stroke: 1.5px var(--ws-paper);
} .slgn-ws .slgn-about .slgn-about__mark {
color: transparent;
-webkit-text-stroke: 1.6px rgba(13, 13, 13, .18);
}
.slgn-ws .slgn-about--scura .slgn-about__mark {
color: transparent;
-webkit-text-stroke: 1.5px rgba(255, 255, 255, .1);
}
} @media (prefers-contrast: more) {
.slgn-ws .slgn-word--em,
.slgn-marquee__group span:nth-of-type(even) {
color: var(--ws-white) !important;
-webkit-text-stroke: 0 !important;
}
}  .slgn-ws .slgn-sec--carta {
--ws-ink: #f4f2ec;
--ws-ink-soft: #ebe8e0; --ws-ink-lift: #e2ded4;
--ws-paper: #0d0d0d;
--ws-white: #000000;
--ws-silver: #3c3c3e;
--ws-mute: #74747a;
--ws-line: rgba(0, 0, 0, .2);
--ws-line-soft: rgba(0, 0, 0, .1);
position: relative;
overflow: hidden; background-color: #f4f2ec;
color: #0d0d0d; border-block: 1px solid rgba(0, 0, 0, .12);
} .slgn-ws .slgn-sec.slgn-sec--carta::before,
.slgn-ws .slgn-cta.slgn-sec--carta::before {
background-image:
repeating-linear-gradient(90deg, rgba(0, 0, 0, .055) 0 1px, transparent 1px 88px),
repeating-linear-gradient(0deg,  rgba(0, 0, 0, .055) 0 1px, transparent 1px 88px);
opacity: .7;
}
.slgn-ws .slgn-sec.slgn-sec--carta::after,
.slgn-ws .slgn-cta.slgn-sec--carta::after {
background-image: radial-gradient(closest-side, rgba(0, 0, 0, .05), transparent 72%);
} .slgn-ws .slgn-sec.slgn-sec--carta.slgn-sec--lift {
background-color: #e2ded4;
background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .22), transparent);
}
.slgn-ws .slgn-sec.slgn-sec--carta.slgn-sec--lift::after {
background-image: radial-gradient(closest-side, rgba(0, 0, 0, .07), transparent 70%);
} .slgn-ws .slgn-sec--carta .slgn-lead,
.slgn-ws .slgn-about--chiara .slgn-lead {
font-weight: 400;
letter-spacing: 0;
}
.slgn-ws .slgn-sec--carta .slgn-body,
.slgn-ws .slgn-about--chiara .slgn-body {
font-weight: 400;
} .slgn-ws .slgn-sec--carta .slgn-btn:hover,
.slgn-ws .slgn-sec--carta .slgn-btn:focus-visible {
background: #2a2a2a;
border-color: #2a2a2a;
color: #ece9e1;
}  .slgn-ws .slgn-sec--carta .slgn-card3d__inner {
background: linear-gradient(158deg, #fbfaf6, #eeeae1 68%);
box-shadow:
0 .1rem 0 rgba(0, 0, 0, .05) inset,
0 1.6rem 3.4rem rgba(0, 0, 0, .14);
}
.slgn-ws .slgn-sec--carta .slgn-carousel.is-ready .slgn-card3d.is-active .slgn-card3d__inner {
border-color: rgba(0, 0, 0, .24);
box-shadow:
0 .1rem 0 rgba(0, 0, 0, .07) inset,
0 2rem 4.4rem rgba(0, 0, 0, .2);
}  .slgn-ws .slgn-sec--carta .slgn-mg {
--ws-paper: #ece9e1;
--ws-white: #ffffff;
--ws-silver: #c9c9c7;
--ws-mute: #6c6d70;
--mg-line: rgba(255, 255, 255, .12);
--mg-line-strong: rgba(255, 255, 255, .26);
--mg-fill: rgba(255, 255, 255, .07);
border-color: rgba(255, 255, 255, .14);
background: linear-gradient(155deg, #121212, #080808 62%);
color: var(--ws-paper); box-shadow: 0 1.4rem 3rem -1.6rem rgba(0, 0, 0, .55);
} .slgn-ws .slgn-sec--carta .slgn-proof__logo,
.slgn-ws .slgn-sec--carta .slgn-marquee__group span {
color: var(--ws-silver);
} .slgn-ws blockquote:not(.slgn-quote)::before,
.slgn-ws blockquote:not(.slgn-quote)::after {
content: none;
} .slgn-index__list {
margin: clamp(2.5rem, 5vw, 4rem) 0 0;
padding: 0;
list-style: none;
border-top: 1px solid var(--ws-line);
}
.slgn-index__item {
border-bottom: 1px solid var(--ws-line-soft);
}
.slgn-index__link {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: baseline;
gap: clamp(1rem, 3vw, 2.4rem);
padding: clamp(1.1rem, 2.4vw, 1.7rem) 0;
color: inherit;
text-decoration: none; transition: padding-left .45s var(--ws-ease), color .3s var(--ws-ease);
}
.slgn-index__link:hover,
.slgn-index__link:focus-visible {
padding-left: clamp(.5rem, 1.4vw, 1.1rem);
color: var(--ws-paper);
}
.slgn-index__n {
color: var(--ws-mute);
font-family: var(--ws-display);
font-size: .82rem;
font-weight: 600;
letter-spacing: .14em;
}
.slgn-index__nome {
display: block;
font-family: var(--ws-display);
font-size: clamp(1.35rem, 3.1vw, 2.15rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -.01em;
text-transform: uppercase;
}
.slgn-index__nota {
display: block;
margin-top: .5rem;
max-width: 52ch;
color: var(--ws-silver);
font-size: .95rem;
line-height: 1.5;
}
.slgn-index__freccia {
color: var(--ws-mute);
font-size: 1.1rem;
transition: transform .45s var(--ws-ease), color .3s var(--ws-ease);
}
.slgn-index__link:hover .slgn-index__freccia,
.slgn-index__link:focus-visible .slgn-index__freccia {
transform: translateY(.28rem);
color: var(--ws-paper);
}
@media (max-width: 599px) {
.slgn-index__list:not(.slgn-index__list--griglia) .slgn-index__link {
grid-template-columns: auto minmax(0, 1fr);
} .slgn-index__list:not(.slgn-index__list--griglia) .slgn-index__freccia {
grid-row: 1;
grid-column: 1;
justify-self: center;
}
} @media (prefers-reduced-motion: no-preference) {
html:has(.slgn-ws) {
scroll-behavior: smooth;
}
}
.slgn-ws .slgn-sec,
.slgn-ws .slgn-cta,
.slgn-ws .slgn-band,
.slgn-ws .slgn-hero {
scroll-margin-top: clamp(5rem, 9vw, 8.5rem);
} .slgn-index__list--griglia {
display: grid;
gap: clamp(1rem, 2.2vw, 1.6rem);
border-top: 0;
}
@media (min-width: 760px) {
.slgn-index__list--griglia {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.slgn-index__list--griglia .slgn-index__item {
border: 1px solid var(--ws-line);
border-bottom: 1px solid var(--ws-line);
} .slgn-index__list--griglia .slgn-index__link {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr auto;
align-items: start;
gap: clamp(.8rem, 1.8vw, 1.2rem);
height: 100%;
padding: clamp(1.4rem, 3vw, 2.2rem); transition: background-color .35s var(--ws-ease), color .3s var(--ws-ease);
}
.slgn-index__list--griglia .slgn-index__link:hover,
.slgn-index__list--griglia .slgn-index__link:focus-visible {
padding-left: clamp(1.4rem, 3vw, 2.2rem);
background-color: var(--ws-line-soft);
}
.slgn-index__list--griglia .slgn-index__nota {
margin-top: 0;
}
.slgn-index__list--griglia .slgn-index__freccia {
justify-self: end;
} :where(
.slgn-ws a,
.slgn-ws button,
.slgn-ws summary,
.slgn-ws input,
.slgn-ws select,
.slgn-ws textarea,
.slgn-ws .slgn-card,
.slgn-ws .slgn-feature,
.slgn-ws .slgn-feature__go,
.slgn-ws .slgn-fact,
.slgn-ws .slgn-shot,
.slgn-ws .slgn-quote,
.slgn-ws .slgn-index__item,
.slgn-ws .slgn-proof__logo,
.slgn-ws [data-slgn-slide],
.slgn-ws [data-slgn-go]
) {
transition:
color var(--ws-hover),
background-color var(--ws-hover),
border-color var(--ws-hover),
box-shadow var(--ws-hover),
opacity var(--ws-hover),
transform var(--ws-move),
padding var(--ws-move);
}  .slgn-feature__go {
transition: color var(--ws-hover), transform var(--ws-move);
} a.slgn-detail {
transition: color var(--ws-hover), padding-left var(--ws-move);
}  :where(.slgn-ws a *, .slgn-ws button *, .slgn-ws summary *) {
transition:
color var(--ws-hover),
fill var(--ws-hover),
stroke var(--ws-hover),
opacity var(--ws-hover),
transform var(--ws-move);
} .slgn-ws .slgn-pf {
--slgn-pf-fg: var(--ws-paper);
--slgn-pf-muted: var(--ws-mute);
--slgn-pf-accent: var(--ws-silver);
--slgn-pf-line: var(--ws-line);
--slgn-pf-gap: clamp(1.4rem, 2.6vw, 2.2rem);
--slgn-pf-ease: var(--ws-ease);
font-family: var(--ws-sans);
} .slgn-ws .slgn-pf__title,
.slgn-ws .slgn-pf__placeholder {
font-family: var(--ws-display);
font-weight: 500;
letter-spacing: -0.005em;
}
.slgn-ws .slgn-pf__excerpt { font-weight: 380; } .slgn-ws .slgn-pf__filter {
font-family: var(--ws-display);
transition: color var(--ws-hover), background-color var(--ws-hover),
border-color var(--ws-hover), opacity var(--ws-hover);
} .slgn-ws .slgn-sec--carta .slgn-pf__excerpt { font-weight: 400; } .slgn-svc-shot {
margin: 0 0 clamp(2rem, 4vw, 3rem);
overflow: hidden;
border: 1px solid var(--ws-line-soft);
background: var(--ws-ink-soft);
}
.slgn-svc-shot img {
width: 100%;
height: 100%; aspect-ratio: 4 / 3;
object-fit: cover;
filter: grayscale(.5) contrast(1.08);
transform: scale(1.001);
transition: transform 1.2s var(--ws-ease), filter var(--ws-move);
}
@media (min-width: 760px) {
.slgn-svc-shot img { aspect-ratio: 16 / 5; }
} .slgn-svc-shot:hover img {
filter: grayscale(.12) contrast(1.04);
transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
.slgn-svc-shot img,
.slgn-svc-shot:hover img { transform: none; transition: filter var(--ws-move); }
} .slgn-ws .slgn-sec--carta .slgn-svc-shot {
border-color: var(--ws-line-soft);
background: rgba(0, 0, 0, .05);
} .slgn-hero-reel { display: none; }
@media (min-width: 1360px) {
.slgn-hero--home .slgn-hero__showcase { perspective: 1400px;
perspective-origin: 30% 70%;
}
.slgn-hero--home .slgn-hero-story,
.slgn-hero--home .slgn-hero-signals {
position: relative;
z-index: 2;
}
.slgn-hero-reel {
position: absolute;
z-index: 1; left: -12rem;
bottom: 0;
display: block;
width: 11rem;
transform:
rotateY(calc(var(--px, 0) * 3deg))
translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 6px), 0);
transition: transform .6s var(--ws-ease);
} .slgn-js .slgn-hero-reel {
opacity: 0;
transform:
translate3d(-1.4rem, 2rem, 0)
rotateY(calc(var(--px, 0) * 3deg))
translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 6px), 0);
transition: opacity .55s var(--ws-ease), transform .8s var(--ws-ease);
}
.slgn-js .slgn-hero-reel.is-in {
opacity: 1;
transform:
rotateY(calc(var(--px, 0) * 3deg))
translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 6px), 0);
}
}
@media (min-width: 1500px) {
.slgn-hero-reel {
left: -14rem;
width: 12.5rem;
}
} .slgn-hero-reel__screen {
position: relative;
overflow: hidden;
aspect-ratio: 9 / 16;
border: 1px solid var(--ws-line);
background: #0b0b0b;
box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .55);
}
.slgn-hero-reel__shot,
.slgn-hero-reel__screen .slgn-hero-reel__locale,
.slgn-hero-reel__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slgn-hero-reel__shot {
filter: grayscale(.3) contrast(1.06) brightness(.9);
} .slgn-hero-reel:not(.slgn-hero-reel--vivo) .slgn-hero-reel__shot {
animation: slgn-reel-drift 18s var(--ws-ease) infinite alternate;
} .slgn-hero-reel__frame {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
border: 0;
transform: translate(-50%, -50%);
pointer-events: none;
}
.slgn-hero-reel--largo .slgn-hero-reel__frame {
width: calc(100% * var(--vid, 1.7778) / 0.5625); height: calc(100% + 2px);
} .slgn-hero-reel__glass {
position: absolute;
z-index: 2;
inset: auto 0 0;
height: 45%;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
pointer-events: none;
} .slgn-hero-reel__top {
position: absolute;
z-index: 3;
inset: 0 0 auto;
display: flex;
align-items: center;
gap: .5rem;
margin: 0;
padding: .55rem .6rem 1.6rem;
background: linear-gradient(180deg, rgba(0, 0, 0, .62), transparent);
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: .54rem;
font-weight: 500;
letter-spacing: .1em;
text-transform: uppercase;
pointer-events: none;
}
.slgn-hero-reel__top b { font-weight: 500; }
.slgn-hero-reel__top span:last-child { opacity: .5; } .slgn-hero-reel__plus {
position: relative;
flex: none;
width: .6rem;
height: .6rem;
margin-right: .1rem;
}
.slgn-hero-reel__plus::before,
.slgn-hero-reel__plus::after {
content: "";
position: absolute;
inset: 50% 0 auto;
height: 1px;
background: var(--ws-paper);
}
.slgn-hero-reel__plus::after { transform: rotate(90deg); } .slgn-hero-reel__acts {
position: absolute;
z-index: 3;
right: .45rem;
bottom: 2.9rem;
display: grid;
justify-items: center;
gap: .62rem;
color: var(--ws-paper); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .8));
}
.slgn-hero-reel__acts svg {
display: block;
width: 1rem;
height: 1rem;
} .slgn-hero-reel__who {
position: absolute;
z-index: 3;
left: .55rem;
right: 2.3rem;
bottom: .8rem;
display: flex;
align-items: center;
gap: .38rem;
margin: 0;
color: var(--ws-paper);
font-family: var(--ws-display);
font-size: .5rem;
font-weight: 500;
letter-spacing: .12em;
text-transform: uppercase;
} .slgn-hero-reel__logo,
.slgn-hero-reel__who i {
flex: none;
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, .55);
background: #000;
object-fit: cover;
}
.slgn-hero-reel__nome {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .slgn-hero-reel__segui {
flex: none;
padding: .16rem .36rem;
border: 1px solid rgba(255, 255, 255, .7);
font-size: .46rem;
letter-spacing: .1em;
} .slgn-hero-reel__line {
position: absolute;
inset: auto 0 0;
height: 2px;
background: rgba(255, 255, 255, .18);
}
.slgn-hero-reel__line i {
position: absolute;
inset: 0 auto 0 0;
display: block;
width: 100%;
background: var(--ws-paper);
transform-origin: left center;
animation: slgn-reel-run var(--dur, 9s) linear infinite;
}
@keyframes slgn-reel-drift {
from { transform: scale(1.04) translate3d(0, 0, 0); }
to   { transform: scale(1.12) translate3d(-1.6%, -1.2%, 0); }
}
@keyframes slgn-reel-run {
from { transform: scaleX(0); }
to   { transform: scaleX(1); }
} @media (prefers-reduced-motion: reduce) {
.slgn-hero-reel {
transform: none !important;
transition: none !important;
}
.slgn-hero-reel__shot,
.slgn-hero-reel__line i {
animation: none !important;
} } .slgn-svc-aside {
display: grid;
gap: clamp(1.1rem, 2vw, 1.5rem);
align-content: start;
} .slgn-mg--svc { padding: clamp(.75rem, 1.7vw, 1.1rem); } @media (max-width: 900px) {
.slgn-hero__showcase .slgn-hero-media--no-mobile { display: none !important; }
.slgn-hero__showcase .slgn-hero-reel--mobile {
display: block;
position: relative;
left: auto;
bottom: auto;
width: min(100%, 360px);
margin: 0 auto;
opacity: 1;
transform: none;
}
.slgn-hero-story:not(.slgn-hero-media--no-mobile) + .slgn-hero-reel--mobile { margin-top: 24px; }
}
.slgn-hero-reel__who .slgn-hero-reel__social { pointer-events: auto; position: relative; z-index: 3; color: inherit; text-decoration: none; min-height: 0; height: auto; line-height: 1.2; align-self: center; display: inline-flex; align-items: center; justify-content: center; } .slgn-hero-reel > .slgn-hero-reel__link { position: absolute; inset: 0; z-index: 10; display: block; pointer-events: auto; border-radius: inherit; cursor: pointer; }
.slgn-hero-reel__link:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.slgn-hero-reel:has(> .slgn-hero-reel__link:hover) .slgn-hero-reel__social { background: #fff; color: #111; }.slgn-wire {
--slgn-wire-rgb: 236, 233, 225;
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.slgn-wire__canvas {
display: block;
width: 100%;
height: 100%;
} .slgn-wire::before {
content: "";
position: absolute;
inset: -10%;
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 62px),
repeating-linear-gradient(0deg,  rgba(255,255,255,.07) 0 1px, transparent 1px 62px);
transform: perspective(60rem) rotateX(58deg) scale(1.5);
transform-origin: 50% 100%;
opacity: .8;
transition: opacity .6s ease;
}
.slgn-wire.is-live::before { opacity: 0; } .slgn-mg {
--mg-line: rgba(255, 255, 255, .12);
--mg-line-strong: rgba(255, 255, 255, .26);
--mg-fill: rgba(255, 255, 255, .07);
--mg-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
position: relative;
overflow: hidden;
isolation: isolate;
container-type: size;
aspect-ratio: 16 / 7;
padding: clamp(.9rem, 2.2vw, 1.4rem);
border: 1px solid var(--mg-line);
background: linear-gradient(155deg, #101010, #080808 62%);
color: var(--ws-paper, #ece9e1);
} .slgn-mg--wide,
.slgn-mg--flat { aspect-ratio: 16 / 7; } .slgn-mg__bar {
position: relative;
z-index: 3;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding-bottom: .7rem;
border-bottom: 1px solid var(--mg-line);
font-family: var(--mg-mono);
font-size: clamp(.52rem, 1.5cqw, .66rem);
letter-spacing: .14em;
text-transform: uppercase;
}
.slgn-mg__bar b {
font-weight: 500;
color: var(--ws-paper, #ece9e1);
}
.slgn-mg__bar span { color: var(--ws-mute, #6c6d70); } .slgn-mg__body {
position: relative;
z-index: 3;
display: grid;
gap: clamp(.45rem, 1.4cqh, .8rem);
padding-top: .8rem; align-content: space-between;
} .slgn-mg__pills {
position: relative;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin-top: auto;
padding-top: .8rem;
}
.slgn-mg__pills span {
padding: .22rem .55rem;
border: 1px solid var(--mg-line);
color: var(--ws-mute, #6c6d70);
font-family: var(--mg-mono);
font-size: clamp(.48rem, 1.3cqw, .6rem);
letter-spacing: .1em;
text-transform: uppercase; opacity: 0;
animation: slgn-mg-pill 1.1s var(--ws-ease, ease) both;
}
.slgn-mg__pills span:nth-child(1) { animation-delay: .45s; }
.slgn-mg__pills span:nth-child(2) { animation-delay: .6s; }
.slgn-mg__pills span:nth-child(3) { animation-delay: .75s; }
.slgn-mg__pills span:nth-child(4) { animation-delay: .9s; }
@keyframes slgn-mg-pill {
from { opacity: 0; transform: translateY(4px); }
to   { opacity: 1; transform: none; }
} .slgn-mg--panel {
display: flex;
flex-direction: column;
}
.slgn-mg--panel .slgn-mg__body { flex: 1; } .slgn-mg__dot {
width: .3rem;
height: .3rem;
border-radius: 50%;
background: var(--ws-white, #fff);
animation: slgn-mg-dot 2.4s steps(1, end) infinite;
}
@keyframes slgn-mg-dot {
0%, 60%  { opacity: 1; }
61%, 100% { opacity: .22; }
} .slgn-mg__mesh {
position: absolute;
inset: -20%;
z-index: 0;
background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1px);
background-size: 24px 24px;
opacity: .4;
animation: slgn-mg-mesh 20s linear infinite;
}
@keyframes slgn-mg-mesh {
from { transform: translate3d(0, 0, 0); }
to   { transform: translate3d(24px, 24px, 0); }
}
.slgn-mg__rules {
position: absolute;
inset: 0;
z-index: 0;
background-image: repeating-linear-gradient(
90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 3.4rem
);
} .slgn-mg__lockup {
position: relative;
display: grid;
place-items: center;
aspect-ratio: 2.6 / 1;
border: 1px solid var(--mg-line);
background: var(--mg-fill);
} .slgn-mg__lockup i {
position: absolute;
width: 22%;
aspect-ratio: 1;
border: 1px solid var(--mg-line-strong);
animation: slgn-mg-assemble 7s var(--ws-ease, ease) infinite;
}
.slgn-mg__lockup i:nth-child(1) { border-radius: 50%; animation-delay: 0s; }
.slgn-mg__lockup i:nth-child(2) { animation-delay: .25s; }
.slgn-mg__lockup i:nth-child(3) {
width: 9%;
border: 0;
background: var(--ws-white, #fff);
animation-delay: .5s;
}
@keyframes slgn-mg-assemble {
0%       { transform: translateX(-160%) rotate(-40deg); opacity: 0; }
22%      { transform: none; opacity: 1; }
74%      { transform: none; opacity: 1; }
100%     { transform: translateX(160%) rotate(40deg); opacity: 0; }
} .slgn-mg__swatches { display: flex; gap: .3rem; }
.slgn-mg__swatches span {
flex: 1;
height: clamp(1rem, 4cqh, 1.7rem);
border: 1px solid var(--mg-line);
transform-origin: 50% 100%;
animation: slgn-mg-swatch 7s var(--ws-ease, ease) infinite;
}
.slgn-mg__swatches span:nth-child(1) { background: #ffffff; animation-delay: .6s; }
.slgn-mg__swatches span:nth-child(2) { background: #c9c9c7; animation-delay: .72s; }
.slgn-mg__swatches span:nth-child(3) { background: #6c6d70; animation-delay: .84s; }
.slgn-mg__swatches span:nth-child(4) { background: #2a2a2a; animation-delay: .96s; }
.slgn-mg__swatches span:nth-child(5) { background: #0e0e0e; animation-delay: 1.08s; }
@keyframes slgn-mg-swatch {
0%       { transform: scaleY(0); opacity: 0; }
16%, 82% { transform: scaleY(1); opacity: 1; }
100%     { transform: scaleY(0); opacity: 0; }
} .slgn-mg__specimen { display: grid; gap: .32rem; }
.slgn-mg__specimen i {
height: 5px;
background: var(--mg-line-strong);
transform-origin: 0 50%;
animation: slgn-mg-write 7s var(--ws-ease, ease) infinite;
}
.slgn-mg__specimen i:nth-child(1) { width: 92%; animation-delay: 1.2s; }
.slgn-mg__specimen i:nth-child(2) { width: 68%; animation-delay: 1.35s; height: 4px; }
.slgn-mg__specimen i:nth-child(3) { width: 44%; animation-delay: 1.5s; height: 3px; }
@keyframes slgn-mg-write {
0%       { transform: scaleX(0); }
14%, 84% { transform: scaleX(1); }
100%     { transform: scaleX(0); }
} .slgn-mg__cal {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 3px;
}
.slgn-mg__cal i {
aspect-ratio: 1;
border: 1px solid var(--mg-line);
animation: slgn-mg-slot 10s steps(1, end) infinite;
} .slgn-mg__cal i:nth-child(1)  { animation-delay: .10s; }
.slgn-mg__cal i:nth-child(2)  { animation-delay: .22s; }
.slgn-mg__cal i:nth-child(3)  { animation-delay: .34s; }
.slgn-mg__cal i:nth-child(4)  { animation-delay: .46s; }
.slgn-mg__cal i:nth-child(5)  { animation-delay: .58s; }
.slgn-mg__cal i:nth-child(6)  { animation-delay: .70s; }
.slgn-mg__cal i:nth-child(7)  { animation-delay: .82s; }
.slgn-mg__cal i:nth-child(8)  { animation-delay: .94s; }
.slgn-mg__cal i:nth-child(9)  { animation-delay: 1.06s; }
.slgn-mg__cal i:nth-child(10) { animation-delay: 1.18s; }
.slgn-mg__cal i:nth-child(11) { animation-delay: 1.30s; }
.slgn-mg__cal i:nth-child(12) { animation-delay: 1.42s; }
.slgn-mg__cal i:nth-child(13) { animation-delay: 1.54s; }
.slgn-mg__cal i:nth-child(14) { animation-delay: 1.66s; }
.slgn-mg__cal i:nth-child(15) { animation-delay: 1.78s; }
.slgn-mg__cal i:nth-child(16) { animation-delay: 1.90s; }
.slgn-mg__cal i:nth-child(17) { animation-delay: 2.02s; }
.slgn-mg__cal i:nth-child(18) { animation-delay: 2.14s; }
.slgn-mg__cal i:nth-child(19) { animation-delay: 2.26s; }
.slgn-mg__cal i:nth-child(20) { animation-delay: 2.38s; }
.slgn-mg__cal i:nth-child(21) { animation-delay: 2.50s; } .slgn-mg__cal i:nth-child(3n) { animation-name: slgn-mg-slot-full; }
@keyframes slgn-mg-slot {
0%, 4%    { background: transparent; }
6%, 88%   { background: var(--mg-fill); }
100%      { background: transparent; }
}
@keyframes slgn-mg-slot-full {
0%, 4%    { background: transparent; }
6%, 88%   { background: var(--ws-paper, #ece9e1); }
100%      { background: transparent; }
} .slgn-mg__queue { display: grid; gap: .4rem; }
.slgn-mg__item {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: .5rem;
padding-bottom: .4rem;
border-bottom: 1px solid var(--mg-line);
opacity: 0;
animation: slgn-mg-enter 10s var(--ws-ease, ease) infinite;
}
.slgn-mg__item:nth-child(1) { animation-delay: 2.7s; }
.slgn-mg__item:nth-child(2) { animation-delay: 3.0s; }
.slgn-mg__item:nth-child(3) { animation-delay: 3.3s; }
.slgn-mg__item b {
width: clamp(1.4rem, 5cqw, 2rem);
aspect-ratio: 1;
background: var(--mg-fill);
border: 1px solid var(--mg-line);
}
.slgn-mg__item u {
display: block;
height: 4px;
background: var(--mg-line-strong);
text-decoration: none;
}
.slgn-mg__item u + u { width: 58%; margin-top: .25rem; opacity: .6; }
@keyframes slgn-mg-enter {
0%       { opacity: 0; transform: translateX(-8px); }
8%, 86%  { opacity: 1; transform: none; }
100%     { opacity: 0; transform: translateX(-8px); }
} .slgn-mg__tracks {
position: relative;
display: grid;
gap: .35rem;
}
.slgn-mg__track {
display: flex;
gap: 3px;
height: clamp(1.5rem, 6.5cqh, 2.5rem);
}
.slgn-mg__track b {
background: var(--mg-fill);
border: 1px solid var(--mg-line);
transform-origin: 0 50%;
animation: slgn-mg-clip 8s var(--ws-ease, ease) infinite;
} .slgn-mg__track:nth-child(1) b:nth-child(1) { flex: 3; animation-delay: .1s; }
.slgn-mg__track:nth-child(1) b:nth-child(2) { flex: 5; animation-delay: .3s; }
.slgn-mg__track:nth-child(1) b:nth-child(3) { flex: 2; animation-delay: .5s; }
.slgn-mg__track:nth-child(2) b:nth-child(1) { flex: 6; animation-delay: .25s; }
.slgn-mg__track:nth-child(2) b:nth-child(2) { flex: 3; animation-delay: .45s; }
.slgn-mg__track:nth-child(3) b:nth-child(1) { flex: 2; animation-delay: .4s; }
.slgn-mg__track:nth-child(3) b:nth-child(2) { flex: 4; animation-delay: .6s; }
.slgn-mg__track:nth-child(3) b:nth-child(3) { flex: 4; animation-delay: .8s; } .slgn-mg__track--audio b { background: rgba(255,255,255,.2); }
@keyframes slgn-mg-clip {
0%       { transform: scaleX(0); opacity: 0; }
12%, 86% { transform: scaleX(1); opacity: 1; }
100%     { transform: scaleX(0); opacity: 0; }
} .slgn-mg__playhead {
position: absolute;
top: -.3rem;
bottom: -.3rem;
left: 0;
width: 1px;
background: var(--ws-white, #fff);
animation: slgn-mg-playhead 8s linear infinite;
}
.slgn-mg__playhead::before {
content: "";
position: absolute;
top: -2px;
left: -3px;
width: 7px;
height: 5px;
background: var(--ws-white, #fff);
}
@keyframes slgn-mg-playhead {
0%, 12%  { transform: translateX(0); opacity: 0; }
14%      { opacity: 1; }
92%      { transform: translateX(calc(100cqw - 3rem)); opacity: 1; }
100%     { transform: translateX(calc(100cqw - 3rem)); opacity: 0; }
} .slgn-mg__wave {
display: flex;
align-items: flex-end;
gap: 2px;
height: clamp(1.6rem, 7cqh, 2.6rem);
}
.slgn-mg__wave i {
flex: 1; height: 100%;
background: var(--mg-line-strong);
transform-origin: 50% 100%;
animation: slgn-mg-bar 1.3s var(--ws-ease, ease) infinite alternate;
} .slgn-mg__wave i:nth-child(6n+1) { animation-delay: -.10s; animation-duration: 1.0s; }
.slgn-mg__wave i:nth-child(6n+2) { animation-delay: -.45s; animation-duration: 1.5s; }
.slgn-mg__wave i:nth-child(6n+3) { animation-delay: -.80s; animation-duration: 1.2s; }
.slgn-mg__wave i:nth-child(6n+4) { animation-delay: -.25s; animation-duration: 1.7s; }
.slgn-mg__wave i:nth-child(6n+5) { animation-delay: -.65s; animation-duration: 1.1s; }
.slgn-mg__wave i:nth-child(6n)   { animation-delay: -1.0s; animation-duration: 1.4s; }
@keyframes slgn-mg-bar {
from { transform: scaleY(.14); }
to   { transform: scaleY(1); }
} .slgn-mg__metrics { display: grid; gap: .55rem; }
.slgn-mg__metric {
display: grid;
grid-template-columns: 1fr;
gap: .3rem;
} .slgn-mg__metric > span:not(.slgn-mg__gauge) {
display: flex;
justify-content: space-between;
gap: .5rem;
color: var(--ws-mute, #6c6d70);
font-family: var(--mg-mono);
font-size: clamp(.48rem, 1.3cqw, .6rem);
letter-spacing: .1em;
text-transform: uppercase;
}
.slgn-mg__gauge {
height: 7px;
background: rgba(255, 255, 255, .09);
overflow: hidden;
}
.slgn-mg__gauge i {
display: block;
width: 100%;
height: 100%;
background: var(--ws-paper, #ece9e1);
transform-origin: 0 50%;
animation: slgn-mg-fill 6.5s var(--ws-ease, ease) infinite;
} .slgn-mg__metric:nth-child(1) .slgn-mg__gauge i { --to: .72; animation-delay: .2s; }
.slgn-mg__metric:nth-child(2) .slgn-mg__gauge i { --to: .48; animation-delay: .45s; }
.slgn-mg__metric:nth-child(3) .slgn-mg__gauge i { --to: .86; animation-delay: .70s; }
@keyframes slgn-mg-fill {
0%       { transform: scaleX(0); }
22%, 92% { transform: scaleX(var(--to, 1)); }
100%     { transform: scaleX(0); }
} .slgn-mg__budget {
margin-top: .3rem;
padding-top: .6rem;
border-top: 1px solid var(--mg-line);
}
.slgn-mg__budget .slgn-mg__gauge { height: 9px; }
.slgn-mg__budget .slgn-mg__gauge i {
background: repeating-linear-gradient(
-55deg,
rgba(255,255,255,.85) 0 4px,
rgba(255,255,255,.35) 4px 8px
);
animation-name: slgn-mg-spend;
animation-duration: 6.5s;
animation-delay: .9s;
}
@keyframes slgn-mg-spend {
0%       { transform: scaleX(0); }
34%      { transform: scaleX(.94); }
84%      { transform: scaleX(.62); }
100%     { transform: scaleX(0); }
} .slgn-mg__cursor {
position: absolute;
z-index: 4;
right: 16%;
bottom: 26%;
width: .8rem;
height: .8rem;
border: 1px solid var(--ws-white, #fff);
border-radius: 50%;
animation: slgn-mg-click 6.5s var(--ws-ease, ease) infinite;
}
@keyframes slgn-mg-click {
0%, 24%  { transform: translate(-30%, 50%); opacity: 0; }
38%      { transform: none; opacity: 1; }
46%      { transform: scale(.55); opacity: 1; }
58%      { transform: scale(1.6); opacity: 0; }
100%     { transform: scale(1.6); opacity: 0; }
}  .slgn-mg--bleed {
min-height: 0;
position: absolute;
inset: 0;
z-index: 0;
aspect-ratio: auto;
border: 0;
padding: 0;
background: none;
pointer-events: none;
}
.slgn-mg--hero-bg { opacity: .5; }
.slgn-mg--hero-bg .slgn-mg__bar,
.slgn-mg--hero-bg .slgn-mg__pills { display: none; } .slgn-hero > .slgn-mg--hero-bg::after,
.slgn-hero > .slgn-wire::after {
content: "";
position: absolute;
inset: 0;
transform: none;
animation: none;
background: linear-gradient(90deg, var(--ws-ink, #080808) 0%, rgba(8,8,8,.82) 26%, rgba(8,8,8,.28) 56%, transparent 78%);
}
@media (max-width: 899px) {
.slgn-hero > .slgn-mg--hero-bg::after,
.slgn-hero > .slgn-wire::after {
background: linear-gradient(180deg, rgba(8,8,8,.45), var(--ws-ink, #080808) 68%);
}
}  @media (min-width: 900px) {
.slgn-hero > .slgn-mg--hero-bg {
inset: 0 0 0 auto;
width: min(58rem, 62%);
}
} .slgn-mg--hero-bg .slgn-mg__track:nth-child(1) b { animation-duration: 9s; }
.slgn-mg--hero-bg .slgn-mg__track:nth-child(2) b { animation-duration: 11.5s; }
.slgn-mg--hero-bg .slgn-mg__track:nth-child(3) b { animation-duration: 13.5s; } .slgn-mg--hero-bg .slgn-mg__tracks {
animation: slgn-hero-deriva 34s var(--ws-ease, ease) infinite alternate;
}
@keyframes slgn-hero-deriva {
from { transform: translateX(0); }
to   { transform: translateX(-4%); }
}  .slgn-mg { min-width: 0; } @media (max-width: 999px) {
.slgn-mg { aspect-ratio: 16 / 8.5; }
}
@media (max-width: 760px) {
.slgn-mg { aspect-ratio: 5 / 4; }
} @media (prefers-reduced-motion: reduce) {
.slgn-mg *,
.slgn-mg *::before,
.slgn-mg *::after,
.slgn-wire::before {
animation: none !important;
transition: none !important;
} .slgn-mg__pills span      { opacity: 1; }
.slgn-mg__swatches span   { transform: scaleY(1); opacity: 1; }
.slgn-mg__specimen i      { transform: scaleX(1); }
.slgn-mg__lockup i        { transform: none; opacity: 1; }
.slgn-mg__cal i           { background: var(--mg-fill); }
.slgn-mg__cal i:nth-child(3n) { background: var(--ws-paper, #ece9e1); }
.slgn-mg__item            { opacity: 1; transform: none; }
.slgn-mg__track b         { transform: scaleX(1); opacity: 1; }
.slgn-mg__wave i          { transform: scaleY(.5); }
.slgn-mg__gauge i         { transform: scaleX(var(--to, .7)); }
.slgn-mg__playhead        { opacity: 1; transform: translateX(38%); }
.slgn-mg__cursor          { opacity: 1; transform: none; }
} .slgn-mg__form { display: grid; gap: .7rem; }
.slgn-mg__field {
display: grid;
grid-template-columns: auto minmax(0, 8rem) minmax(0, 1fr);
align-items: center;
gap: .6rem;
}
.slgn-mg__check {
position: relative;
width: .8rem;
height: .8rem;
border: 1px solid var(--mg-line-strong);
} .slgn-mg__check::after {
content: "";
position: absolute;
left: 22%;
top: 6%;
width: 34%;
height: 62%;
border: solid var(--ws-white, #fff);
border-width: 0 1.5px 1.5px 0;
transform: rotate(42deg) scale(0);
transform-origin: 50% 50%;
animation: slgn-mg-tick 9s var(--ws-ease, ease) infinite;
}
.slgn-mg__field:nth-child(1) .slgn-mg__check::after { animation-delay: .4s; }
.slgn-mg__field:nth-child(2) .slgn-mg__check::after { animation-delay: 1.2s; }
.slgn-mg__field:nth-child(3) .slgn-mg__check::after { animation-delay: 2.0s; }
.slgn-mg__field:nth-child(4) .slgn-mg__check::after { animation-delay: 2.8s; }
@keyframes slgn-mg-tick {
0%, 4%   { transform: rotate(42deg) scale(0); }
10%, 88% { transform: rotate(42deg) scale(1); }
100%     { transform: rotate(42deg) scale(0); }
}
.slgn-mg__label {
color: var(--ws-mute, #6c6d70);
font-family: var(--mg-mono);
font-size: clamp(.48rem, 1.3cqw, .6rem);
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.slgn-mg__line {
height: 4px;
background: var(--mg-line-strong);
transform: scaleX(0);
transform-origin: 0 50%;
animation: slgn-mg-writeline 9s var(--ws-ease, ease) infinite;
}
.slgn-mg__field:nth-child(1) .slgn-mg__line { animation-delay: .5s; }
.slgn-mg__field:nth-child(2) .slgn-mg__line { animation-delay: 1.3s; }
.slgn-mg__field:nth-child(3) .slgn-mg__line { animation-delay: 2.1s; }
.slgn-mg__field:nth-child(4) .slgn-mg__line { animation-delay: 2.9s; }
@keyframes slgn-mg-writeline {
0%, 4%   { transform: scaleX(0); }
14%, 88% { transform: scaleX(1); }
100%     { transform: scaleX(0); }
} .slgn-mg__mood {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .4rem;
} .slgn-mg__tile { aspect-ratio: 4 / 3; }
.slgn-mg__tile {
border: 1px solid var(--mg-line);
opacity: 0;
transform: translateY(10px) scale(.96);
animation: slgn-mg-place 9s var(--ws-ease, ease) infinite;
} .slgn-mg__tile:nth-child(1) { background: rgba(255,255,255,.30); animation-delay: .3s; }
.slgn-mg__tile:nth-child(2) { background: rgba(255,255,255,.09); animation-delay: .5s; }
.slgn-mg__tile:nth-child(3) { background: rgba(255,255,255,.18); animation-delay: .7s; }
.slgn-mg__tile:nth-child(4) { background: rgba(255,255,255,.06); animation-delay: .9s; }
.slgn-mg__tile:nth-child(5) { background: rgba(255,255,255,.42); animation-delay: 1.1s; }
.slgn-mg__tile:nth-child(6) { background: rgba(255,255,255,.13); animation-delay: 1.3s; }
@keyframes slgn-mg-place {
0%, 3%   { opacity: 0; transform: translateY(10px) scale(.96); }
12%, 88% { opacity: 1; transform: none; }
100%     { opacity: 0; transform: translateY(10px) scale(.96); }
} @media (prefers-reduced-motion: reduce) {
.slgn-mg__check::after { transform: rotate(42deg) scale(1); }
.slgn-mg__line { transform: scaleX(1); }
.slgn-mg__tile { opacity: 1; transform: none; }
}  .slgn-mg::after {
content: "";
position: absolute;
inset: -40% -60%;
z-index: 4;
pointer-events: none;
background: linear-gradient(
104deg,
transparent 38%,
rgba(255, 255, 255, .055) 47%,
rgba(255, 255, 255, .1) 50%,
rgba(255, 255, 255, .055) 53%,
transparent 62%
);
transform: translate3d(-62%, 0, 0);
animation: slgn-mg-sheen 5.6s var(--ws-ease, ease) infinite;
}
@keyframes slgn-mg-sheen {
0%   { transform: translate3d(-62%, 0, 0); } 46%  { transform: translate3d(62%, 0, 0); }
100% { transform: translate3d(62%, 0, 0); }
} .slgn-mg::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 38%;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .05) 62%, transparent);
animation: slgn-mg-scan 11s linear infinite;
}
@keyframes slgn-mg-scan {
0%   { transform: translate3d(0, -110%, 0); opacity: 0; }
12%  { opacity: 1; }
84%  { opacity: 1; }
100% { transform: translate3d(0, 300%, 0); opacity: 0; }
} .slgn-hero-story__slide .slgn-mg::before,
.slgn-hero-story__slide .slgn-mg::after {
display: none;
} .slgn-mg__body {
animation: slgn-mg-breath 10s ease-in-out infinite alternate;
}
@keyframes slgn-mg-breath {
from { transform: translate3d(0, 1.5px, 0); }
to   { transform: translate3d(0, -1.5px, 0); }
}
.slgn-mg--panel:has(.slgn-mg__cal) .slgn-mg__body      { animation-delay: -2.5s; }
.slgn-mg--panel:has(.slgn-mg__tracks) .slgn-mg__body   { animation-delay: -5s; }
.slgn-mg--panel:has(.slgn-mg__metrics) .slgn-mg__body  { animation-delay: -7.5s; }
.slgn-mg--panel:has(.slgn-mg__mood) .slgn-mg__body     { animation-delay: -3.7s; }
.slgn-mg--panel:has(.slgn-mg__form) .slgn-mg__body     { animation-delay: -6.2s; } .slgn-mg__item      { animation-duration: 6.5s; }
.slgn-mg__queue     { animation-duration: 6.5s; }
.slgn-mg__cal i     { animation-duration: 6.5s; }
.slgn-mg__field     { animation-duration: 6s; }
.slgn-mg__label     { animation-duration: 6s; }
.slgn-mg__check     { animation-duration: 6s; }
.slgn-mg__line      { animation-duration: 6s; }
.slgn-mg__tile      { animation-duration: 6s; }
.slgn-mg__pills span { animation-duration: 7s; } .slgn-mg__dot { animation-duration: 1.7s; } @media (prefers-reduced-motion: reduce) {
.slgn-mg::before,
.slgn-mg::after,
.slgn-mg__body {
animation: none !important;
transform: none !important;
} .slgn-mg::after { opacity: 0; }
} .slgn-mg--hero-bg .slgn-mg__body {
align-content: center;
gap: 2rem;
} @media (min-width: 900px) {
.slgn-hero > .slgn-mg--hero-bg {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
mask-image: linear-gradient(90deg, transparent 0%, #000 22%);
}
}  .slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__body {
align-content: stretch;
min-height: 0;
} @container (max-height: 17rem) {
.slgn-mg__bar        { padding-bottom: .45rem; }
.slgn-mg__body       { padding-top: .5rem; gap: clamp(.3rem, 1.4cqh, .6rem); }
.slgn-mg__pills      { padding-top: .5rem; gap: .25rem; }
.slgn-mg__pills span { padding: .12rem .4rem; }
} @container (max-height: 9rem) {
.slgn-mg__pills,
.slgn-mg__bar span { display: none; }
} .slgn-mg--panel:has(.slgn-mg__lockup) .slgn-mg__body {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
column-gap: clamp(.7rem, 2.4cqw, 1.4rem);
}
.slgn-mg__lockup {
grid-column: 1;
grid-row: 1;
min-height: 0;
height: 100%;
aspect-ratio: auto;
} .slgn-mg__lockup i { width: auto; height: 46%; aspect-ratio: 1; }
.slgn-mg__lockup i:nth-child(3) { width: auto; height: 18%; }
.slgn-mg__swatches {
grid-column: 2;
grid-row: 1;
align-items: stretch;
height: 100%;
gap: min(.32rem, 1.6cqw);
} .slgn-mg__swatches span { height: 100%; }
.slgn-mg__specimen {
grid-column: 3;
grid-row: 1;
height: 100%;
align-content: center;
gap: min(.5rem, 5cqh);
} .slgn-mg__specimen i:nth-child(1) { width: 96%; height: min(9px, 5.5cqh); animation-delay: 1.20s; }
.slgn-mg__specimen i:nth-child(2) { width: 72%; height: min(7px, 4.4cqh); animation-delay: 1.32s; }
.slgn-mg__specimen i:nth-child(3) { width: 88%; height: min(5px, 3.2cqh); animation-delay: 1.44s; }
.slgn-mg__specimen i:nth-child(4) { width: 80%; height: min(5px, 3.2cqh); animation-delay: 1.56s; }
.slgn-mg__specimen i:nth-child(5) { width: 46%; height: min(5px, 3.2cqh); animation-delay: 1.68s; } .slgn-mg--panel:has(.slgn-mg__cal) .slgn-mg__body {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
column-gap: clamp(.7rem, 2.6cqw, 1.4rem);
}
.slgn-mg__cal {
height: 100%;
min-height: 0;
grid-template-rows: repeat(3, minmax(0, 1fr));
align-content: stretch;
} .slgn-mg__cal i { width: 100%; height: 100%; aspect-ratio: auto; }
.slgn-mg__queue {
height: 100%;
min-height: 0;
grid-template-rows: repeat(3, minmax(0, 1fr));
align-content: stretch;
gap: min(.4rem, 4cqh);
}
.slgn-mg__item { min-height: 0; padding-bottom: min(.4rem, 3.5cqh); }
.slgn-mg__item b { align-self: center; width: auto; height: min(2rem, 13cqh); aspect-ratio: 1; }
.slgn-mg__item u { height: min(4px, 1.8cqh); } .slgn-mg--panel:not(.slgn-mg--hero-bg):has(.slgn-mg__tracks) .slgn-mg__body {
grid-template-rows: minmax(0, 1.85fr) minmax(0, 1fr);
}
.slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__tracks {
height: 100%;
min-height: 0;
grid-template-rows: repeat(3, minmax(0, 1fr));
align-content: stretch;
gap: min(.35rem, 3.5cqh);
}
.slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__track { height: auto; min-height: 0; }
.slgn-mg--panel:not(.slgn-mg--hero-bg) .slgn-mg__wave  { height: 100%; min-height: 0; } .slgn-mg--panel:has(.slgn-mg__metrics) .slgn-mg__body {
grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
column-gap: clamp(.9rem, 3cqw, 1.6rem);
}
.slgn-mg__metrics {
height: 100%;
min-height: 0;
grid-template-rows: repeat(3, minmax(0, 1fr));
align-content: stretch;
gap: min(.55rem, 5cqh);
}
.slgn-mg__metric { min-height: 0; align-content: center; gap: min(.3rem, 2.6cqh); } .slgn-mg__gauge {
display: block;
height: min(8px, 3.6cqh);
} .slgn-mg__budget {
align-self: center;
margin-top: 0;
padding-top: 0;
padding-left: clamp(.9rem, 3cqw, 1.6rem);
border-top: 0;
border-left: 1px solid var(--mg-line);
}
.slgn-mg__budget .slgn-mg__gauge { height: min(10px, 4.4cqh); } .slgn-mg--panel:has(.slgn-mg__form) .slgn-mg__body {
grid-template-rows: minmax(0, 1fr);
}
.slgn-mg__form {
height: 100%;
min-height: 0;
grid-template-rows: repeat(4, minmax(0, 1fr));
align-content: stretch;
gap: min(.7rem, 6cqh);
}
.slgn-mg__field { min-height: 0; grid-template-columns: auto minmax(0, 7.5rem) minmax(0, 1fr); }
.slgn-mg__check { width: auto; height: min(.9rem, 9cqh); aspect-ratio: 1; }
.slgn-mg__label { font-size: clamp(.42rem, 1.3cqw, .6rem); }
.slgn-mg__line  { height: min(5px, 2.2cqh); } .slgn-mg--panel:has(.slgn-mg__mood) .slgn-mg__body {
grid-template-rows: minmax(0, 1fr);
}
.slgn-mg__mood {
height: 100%;
min-height: 0;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: min(.4rem, 4cqh);
} .slgn-mg__tile { width: 100%; height: 100%; aspect-ratio: auto; }
.slgn-mg__tile:nth-child(7)  { background: rgba(255,255,255,.22); animation-delay: 1.5s; }
.slgn-mg__tile:nth-child(8)  { background: rgba(255,255,255,.08); animation-delay: 1.7s; }
.slgn-mg__tile:nth-child(9)  { background: rgba(255,255,255,.35); animation-delay: 1.9s; }
.slgn-mg__tile:nth-child(10) { background: rgba(255,255,255,.11); animation-delay: 2.1s; } .slgn-mg--hero-bg .slgn-mg__body { grid-template-rows: none; align-content: center; }
.slgn-mg--hero-bg .slgn-mg__tracks,
.slgn-mg--hero-bg .slgn-mg__wave { height: auto; } .slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__body {
grid-template-rows: minmax(0, 1fr);
}
.slgn-mg__scena {
position: relative;
min-height: 0;
height: 100%;
}
.slgn-mg__atto {
position: absolute;
inset: 0;
display: grid;
grid-template-rows: 100%;
opacity: 0;
animation: slgn-mg-atto 15s var(--ws-ease, cubic-bezier(.22,.72,.2,1)) infinite;
} .slgn-mg__atto--profilo { animation-delay: -10s; }
.slgn-mg__atto--reel    { animation-delay: -5s; }
@keyframes slgn-mg-atto {
0%, 3%    { opacity: 0; transform: translate3d(0, 5px, 0); }
7%, 29%   { opacity: 1; transform: none; }
33%, 100% { opacity: 0; transform: translate3d(0, -5px, 0); }
} .slgn-mg__atto--carico {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(.6rem, 2.4cqw, 1.1rem);
} .slgn-mg__clip {
position: relative;
overflow: hidden;
height: min(100%, 11rem);
width: auto;
aspect-ratio: 9 / 16;
border: 1px solid var(--mg-line-strong);
background: var(--mg-fill);
}
.slgn-mg__clip i {
position: absolute;
inset: auto 0 0;
display: block;
height: 100%;
background: linear-gradient(0deg, rgba(255, 255, 255, .16), transparent);
transform-origin: bottom center;
animation: slgn-mg-clipfill 15s var(--ws-ease, ease) infinite;
}
@keyframes slgn-mg-clipfill {
0%, 7%    { transform: scaleY(0); }
26%, 100% { transform: scaleY(1); }
} .slgn-mg__play {
position: absolute;
left: 50%;
top: 50%;
width: 0;
height: 0;
border: solid transparent;
border-width: .32rem 0 .32rem .52rem;
border-left-color: var(--ws-paper, #ece9e1);
translate: -40% -50%;
opacity: 0;
animation: slgn-mg-play 15s var(--ws-ease, ease) infinite;
}
@keyframes slgn-mg-play {
0%, 22%   { opacity: 0; scale: .5; }
27%, 29%  { opacity: 1; scale: 1; }
33%, 100% { opacity: 0; scale: 1; }
}
.slgn-mg__up {
display: grid;
gap: min(.42rem, 4cqh);
align-content: center;
min-width: 0;
}
.slgn-mg__uprow {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .6rem;
color: var(--ws-mute, #6c6d70);
font-family: var(--mg-mono);
font-size: clamp(.46rem, 3.6cqh, .62rem);
letter-spacing: .04em;
}
.slgn-mg__uprow b { color: var(--ws-silver, #c9c9c7); font-weight: 400; }
.slgn-mg__uprow em { font-style: normal; } .slgn-mg__atto--carico .slgn-mg__gauge i {
animation: slgn-mg-carico 15s var(--ws-ease, ease) infinite;
}
@keyframes slgn-mg-carico {
0%, 7%    { transform: scaleX(0); }
26%, 100% { transform: scaleX(1); }
} .slgn-mg__cap { display: grid; gap: min(.28rem, 2.6cqh); }
.slgn-mg__cap u {
display: block;
height: min(3px, 1.4cqh);
background: var(--mg-line);
text-decoration: none;
transform: scaleX(0);
transform-origin: 0 50%;
animation: slgn-mg-scrive 15s var(--ws-ease, ease) infinite;
animation-delay: calc(var(--i, 0) * .5s);
}
.slgn-mg__cap u:nth-child(1) { width: 88%; }
.slgn-mg__cap u:nth-child(2) { width: 52%; }
@keyframes slgn-mg-scrive {
0%, 12%   { transform: scaleX(0); }
22%, 29%  { transform: scaleX(1); }
33%, 100% { transform: scaleX(0); }
} .slgn-mg__tags { display: flex; gap: .3rem; }
.slgn-mg__tags i {
width: min(2.4rem, 14cqw);
height: min(.72rem, 6cqh);
border: 1px solid var(--mg-line);
opacity: 0;
animation: slgn-mg-tag 15s var(--ws-ease, ease) infinite;
animation-delay: calc(var(--i, 0) * .28s);
}
.slgn-mg__tags i:nth-child(2) { width: min(1.7rem, 10cqw); }
.slgn-mg__tags i:nth-child(3) { width: min(2.1rem, 12cqw); }
@keyframes slgn-mg-tag {
0%, 15%   { opacity: 0; transform: translate3d(0, 3px, 0); }
21%, 29%  { opacity: 1; transform: none; }
33%, 100% { opacity: 0; }
} .slgn-mg__coda {
align-self: stretch;
height: 100%;
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
gap: min(.3rem, 2.6cqh);
}
.slgn-mg__coda i {
height: min(100%, 2.8rem);
width: auto;
aspect-ratio: 9 / 16;
justify-self: center;
border: 1px solid var(--mg-line);
background: rgba(255, 255, 255, .04);
opacity: 0;
animation: slgn-mg-coda 15s var(--ws-ease, ease) infinite;
animation-delay: calc(var(--i, 0) * .22s);
}
@keyframes slgn-mg-coda {
0%, 9%    { opacity: 0; transform: translate3d(0, 4px, 0); }
16%, 29%  { opacity: 1; transform: none; }
33%, 100% { opacity: 0; }
} .slgn-mg__atto--profilo {
grid-template-rows: auto auto minmax(0, 1fr);
gap: min(.5rem, 4.5cqh);
align-content: stretch;
}
.slgn-mg__prof {
display: flex;
align-items: center;
gap: min(.6rem, 3cqw);
}
.slgn-mg__prof > i {
flex: none;
width: auto;
height: min(2.2rem, 15cqh);
aspect-ratio: 1;
border: 1px solid var(--mg-line-strong);
border-radius: 50%;
}
.slgn-mg__chi { display: grid; gap: min(4px, 1.8cqh); flex: 1; min-width: 0; }
.slgn-mg__chi b { display: block; width: 42%; height: min(4px, 1.8cqh); background: var(--mg-line-strong); }
.slgn-mg__chi s { display: block; width: 24%; height: min(3px, 1.4cqh); background: var(--mg-line); } .slgn-mg__stats { display: flex; flex: none; gap: min(1.1rem, 5cqw); }
.slgn-mg__stats span {
display: grid;
gap: min(3px, 1.4cqh);
justify-items: center;
opacity: 0;
animation: slgn-mg-tag 15s var(--ws-ease, ease) infinite;
animation-delay: calc(-10s + var(--i, 0) * .2s);
}
.slgn-mg__stats u { display: block; width: 1.6rem; height: min(4px, 1.8cqh); background: var(--mg-line-strong); text-decoration: none; }
.slgn-mg__stats em { display: block; width: 1rem; height: min(3px, 1.4cqh); background: var(--mg-line); } .slgn-mg__tabs { display: flex; gap: .3rem; }
.slgn-mg__tabs i { flex: 1; height: 2px; background: var(--mg-line); }
.slgn-mg__tabs i:first-child { background: var(--ws-paper, #ece9e1); }
.slgn-mg__griglia {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 2px;
height: 100%;
min-height: 0;
} .slgn-mg__griglia i {
width: 100%;
height: 100%;
border: 1px solid var(--mg-line);
background: var(--mg-fill);
opacity: 0;
animation: slgn-mg-tessera 15s var(--ws-ease, ease) infinite; animation-delay: calc(-10s + var(--i, 0) * .08s);
}
@keyframes slgn-mg-tessera {
0%, 5%    { opacity: 0; transform: scale(.9); }
10%, 29%  { opacity: 1; transform: none; }
33%, 100% { opacity: 0; transform: none; }
} .slgn-mg__griglia i.slgn-mg__nuova {
border-color: var(--ws-paper, #ece9e1);
background: rgba(255, 255, 255, .14);
animation-name: slgn-mg-nuova;
}
@keyframes slgn-mg-nuova {
0%, 12%   { opacity: 0; transform: scale(.86); }
18%, 29%  { opacity: 1; transform: none; }
33%, 100% { opacity: 0; }
} .slgn-mg__atto--reel {
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(.7rem, 2.6cqw, 1.3rem);
}
.slgn-mg__vplay {
position: relative;
overflow: hidden;
height: min(100%, 11rem);
width: auto;
aspect-ratio: 9 / 16;
border: 1px solid var(--mg-line-strong);
background: var(--mg-fill);
} .slgn-mg__vsteps { position: absolute; inset: .28rem .28rem auto; display: flex; gap: 2px; }
.slgn-mg__vsteps i {
flex: 1;
height: 2px;
background: var(--mg-line);
overflow: hidden;
}
.slgn-mg__vsteps i::after {
content: "";
display: block;
height: 100%;
background: var(--ws-paper, #ece9e1);
transform: scaleX(0);
transform-origin: 0 50%;
animation: slgn-mg-step 15s linear infinite;
}
.slgn-mg__vsteps i:nth-child(1)::after { animation-delay: -5s; }
.slgn-mg__vsteps i:nth-child(2)::after { animation-delay: -5.1s; }
.slgn-mg__vsteps i:nth-child(3)::after { animation-delay: -5.2s; }
@keyframes slgn-mg-step {
0%, 73%   { transform: scaleX(0); }
80%, 100% { transform: scaleX(1); }
} .slgn-mg__vbar {
position: absolute;
inset: auto .3rem .3rem;
height: 1px;
background: var(--mg-line);
}
.slgn-mg__vbar i {
position: absolute;
inset: 0 auto 0 0;
display: block;
width: 100%;
background: var(--ws-paper, #ece9e1);
transform-origin: left center;
animation: slgn-mg-vbar 15s linear infinite;
}
@keyframes slgn-mg-vbar {
0%, 73%   { transform: scaleX(0); }
96%, 100% { transform: scaleX(1); }
} .slgn-mg__cuori {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
}
.slgn-mg__cuori i {
position: absolute;
bottom: 12%;
left: calc(20% + var(--i, 0) * 17%);
width: .34rem;
height: .34rem;
border-radius: 50% 50% 50% 0;
background: var(--ws-paper, #ece9e1);
opacity: 0;
transform: rotate(-45deg);
animation: slgn-mg-cuore 15s var(--ws-ease, ease) infinite;
animation-delay: calc(var(--i, 0) * .55s);
}
@keyframes slgn-mg-cuore {
0%, 76%   { opacity: 0; transform: rotate(-45deg) translate3d(0, 0, 0) scale(.6); }
80%       { opacity: .95; }
92%, 100% { opacity: 0; transform: rotate(-45deg) translate3d(0, -260%, 0) scale(1); }
} .slgn-mg__chat {
align-self: stretch;
display: grid;
grid-template-rows: repeat(5, minmax(0, 1fr));
align-content: stretch;
align-items: center;
gap: min(.42rem, 3.6cqh);
min-width: 0;
min-height: 0;
}
.slgn-mg__chat > span {
display: flex;
align-items: center;
gap: .4rem;
opacity: 0;
animation: slgn-mg-chat 15s var(--ws-ease, ease) infinite;
animation-delay: calc(var(--i, 0) * .55s);
}
.slgn-mg__chat b {
flex: none;
width: auto;
height: min(.9rem, 7.5cqh);
aspect-ratio: 1;
border: 1px solid var(--mg-line-strong);
border-radius: 50%;
}
.slgn-mg__chat u {
height: min(3px, 1.4cqh);
background: var(--mg-line-strong);
text-decoration: none;
}
.slgn-mg__chat > span:nth-child(1) u { width: 72%; }
.slgn-mg__chat > span:nth-child(2) u { width: 54%; }
.slgn-mg__chat > span:nth-child(3) u { width: 64%; }
.slgn-mg__chat > span:nth-child(4) u { width: 46%; }
@keyframes slgn-mg-chat {
0%, 75%   { opacity: 0; transform: translate3d(10px, 0, 0); }
81%, 95%  { opacity: 1; transform: none; }
99%, 100% { opacity: 0; }
} .slgn-mg__scrivi i {
display: block;
width: 84%;
height: min(1.05rem, 9cqh);
border: 1px solid var(--mg-line);
border-radius: 999px;
} .slgn-mg__rail {
display: grid;
gap: min(.55rem, 4.5cqh);
justify-items: center;
align-content: center;
}
.slgn-mg__ic {
width: auto;
height: min(.85rem, 7cqh);
aspect-ratio: 1;
opacity: 0;
animation: slgn-mg-ic 15s var(--ws-ease, ease) infinite;
animation-delay: calc(var(--i, 0) * .38s);
}
.slgn-mg__ic--cuore {
border-radius: 50% 50% 50% 0;
background: var(--ws-paper, #ece9e1);
rotate: -45deg;
}
.slgn-mg__ic--chat {
border: 1px solid var(--mg-line-strong);
border-radius: 50% 50% 50% 3px;
}
.slgn-mg__ic--invia {
background: var(--mg-line-strong);
clip-path: polygon(0 0, 100% 50%, 0 100%, 24% 50%);
}
.slgn-mg__ic--salva {
background: var(--mg-line-strong);
clip-path: polygon(14% 0, 86% 0, 86% 100%, 50% 70%, 14% 100%);
}
@keyframes slgn-mg-ic {
0%, 74%   { opacity: 0; transform: scale(.5); }
79%, 95%  { opacity: 1; transform: none; }
99%, 100% { opacity: 0; }
}  .slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span {
opacity: 1;
animation: slgn-mg-pill-atto 15s steps(1, end) infinite;
}
.slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span:nth-child(2) { animation-delay: -10s; }
.slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span:nth-child(3) { animation-delay: -5s; }
@keyframes slgn-mg-pill-atto {
0%, 32% {
color: var(--ws-paper, #ece9e1);
border-color: var(--mg-line-strong);
}
33%, 100% {
color: var(--ws-mute, #6c6d70);
border-color: var(--mg-line);
}
} @container (max-height: 10rem), (max-width: 24rem) {
.slgn-mg__coda,
.slgn-mg__cap,
.slgn-mg__tags,
.slgn-mg__stats,
.slgn-mg__rail,
.slgn-mg__scrivi,
.slgn-mg__chat > span:nth-child(4),
.slgn-mg__griglia i:nth-child(n+11) { display: none; }
.slgn-mg__griglia { grid-template-rows: minmax(0, 1fr); } .slgn-mg__chat { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.slgn-mg__atto--carico { grid-template-columns: auto minmax(0, 1fr); }
.slgn-mg__atto--reel { grid-template-columns: auto minmax(0, 1fr); }
} @container (max-width: 24rem) {
.slgn-mg--panel:has(.slgn-mg__metrics) .slgn-mg__body {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
}
.slgn-mg__budget {
align-self: auto;
padding-left: 0;
padding-top: min(.5rem, 4cqh);
border-left: 0;
border-top: 1px solid var(--mg-line);
}
} @media (prefers-reduced-motion: reduce) {
.slgn-mg__atto,
.slgn-mg__clip i,
.slgn-mg__play,
.slgn-mg__cap u,
.slgn-mg__tags i,
.slgn-mg__coda i,
.slgn-mg__stats span,
.slgn-mg__griglia i,
.slgn-mg__cuori i,
.slgn-mg__chat > span,
.slgn-mg__vbar i,
.slgn-mg__vsteps i::after,
.slgn-mg__ic,
.slgn-mg__pills span,
.slgn-mg--panel:has(.slgn-mg__scena) .slgn-mg__pills span,
.slgn-mg__atto--carico .slgn-mg__gauge i {
animation: none !important;
opacity: 1;
transform: none;
}
.slgn-mg__atto--carico,
.slgn-mg__atto--profilo { opacity: 0; }
}.slgn-v2 {
--v2-nero: #050505;
--v2-carta: #eeedea;
--v2-carta-chiara: #ebeae7;
--v2-grafite: #2e2d2b;
--v2-inchiostro: #090909;
--v2-riga: rgba(255, 255, 255, .32);
--v2-riga-carta: rgba(127, 127, 127, .18);
--v2-margine: 4.65vw;
--v2-ease: cubic-bezier(.2, .72, .16, 1); --v2-interlinea-alta: .98;
background: var(--v2-nero);
} html:has(body.slgn-v2) { background: #050505; } @media (max-width: 900px) {
.slgn-v2 { --v2-margine: 20px; }
}  .slgn-v2 .slgn-hero--story {
position: relative;
isolation: isolate;
display: block;
min-height: 720px;
height: 100vh;
height: 100svh;
padding: 0;
background: #030303;
overflow: hidden;
} .slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) {
height: 78vh;
height: 78svh;
min-height: 580px;
}
.slgn-v2 .slgn-hero--story .slgn-hero__inner {
position: absolute;
z-index: 2;
top: 21%;
left: var(--v2-margine);
width: min(1080px, 72vw);
max-width: none;
margin: 0;
padding: 0;
} .slgn-v2 .slgn-hero--story .slgn-hero__copy {
max-width: none;
container-type: inline-size;
} .slgn-v2 .slgn-hero--story .slgn-hero__title {
margin: 0;
color: #f7f7f4; font-size: min(
clamp(92px, 12.4vw, 238px),
calc(100cqw / (var(--lettere, 8) * 0.62)),
17vh
);
font-weight: 900; line-height: .96; letter-spacing: -.05em; text-transform: none;
} .slgn-v2 .slgn-hero--story .slgn-hero__title .slgn-word--em {
color: #f7f7f4;
-webkit-text-stroke: 0;
text-shadow: none;
font-family: var(--ws-serif, Georgia, "Times New Roman", serif);
font-style: italic;
font-weight: 400; font-size: 1.12em;
line-height: .857;
} .slgn-v2 .slgn-hero--story .slgn-hero__title .slgn-word {
display: inline-block;
} .slgn-v2 .slgn-hero--story .slgn-hero__title .slgn-word:not(.slgn-word--em) {
letter-spacing: 0em;
}
.slgn-v2 .slgn-hero--story .slgn-hero__lead,
.slgn-v2 .slgn-hero--story .slgn-lead {
width: min(47ch, 48vw);
max-width: none;
margin: clamp(34px, 5vh, 58px) 0 0;
color: rgba(255, 255, 255, .9);
font-size: clamp(15px, 1.06vw, 20px);
font-weight: 400;
line-height: 1.12;
letter-spacing: -.06em;
} .slgn-v2 .slgn-hero--doppia .slgn-hero__inner {
top: 11%;
right: var(--v2-margine);
width: auto;
display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 30vw, 24rem);
gap: clamp(30px, 4vw, 76px); align-items: stretch;
} .slgn-v2 .slgn-hero--doppia .slgn-hero__copy {
display: flex;
flex-direction: column;
justify-content: center;
gap: clamp(28px, 4vh, 54px);
} .slgn-v2 .slgn-hero--doppia .slgn-hero__title {
font-size: min(
clamp(78px, 11.4vw, 214px),
calc(100cqw / (var(--lettere, 8) * 0.62)),
17vh
);
} .slgn-v2 .slgn-hero--doppia .slgn-hero__lead,
.slgn-v2 .slgn-hero--doppia .slgn-lead {
margin-top: 0;
}
.slgn-v2 .slgn-hero--doppia .slgn-hero__lead,
.slgn-v2 .slgn-hero--doppia .slgn-lead {
width: auto;
max-width: 44ch;
}
.slgn-v2 .slgn-hero--doppia .slgn-hero__showcase { position: relative;
justify-self: end; width: min(100%, 24rem, 47vh);
display: flex;
flex-direction: column;
gap: clamp(14px, 1.6vw, 26px);
min-width: 0;
} .slgn-v2 .slgn-hero__riga {
position: absolute;
z-index: 3;
bottom: 28px;
left: var(--v2-margine);
right: var(--v2-margine);
display: flex;
align-items: center;
gap: 14px;
color: rgba(255, 255, 255, .62);
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
}
.slgn-v2 .slgn-hero__riga i {
flex: 1;
height: 1px;
background: currentColor;
transform: scaleX(.08);
transform-origin: 0;
animation: slgn-v2-riga 1.2s var(--v2-ease) 1.2s forwards;
}
@keyframes slgn-v2-riga { to { transform: scaleX(1); } }
@media (max-width: 900px) {
.slgn-v2 .slgn-hero--story { min-height: 760px; } .slgn-v2 .slgn-hero--doppia {
height: auto;
min-height: 100svh;
padding-bottom: 96px;
}
.slgn-v2 .slgn-hero--doppia .slgn-hero__inner {
position: relative;
top: auto;
left: auto;
right: auto;
grid-template-columns: 1fr;
gap: 30px;
width: auto;
padding: clamp(112px, 14svh, 144px) var(--v2-margine) 0;
}
.slgn-v2 .slgn-hero--doppia .slgn-hero__title {
font-size: clamp(64px, 17vw, 120px);
}
.slgn-v2 .slgn-hero--story .slgn-hero__inner {
top: 22%;
width: calc(100vw - 40px);
} .slgn-v2 .slgn-hero--doppia .slgn-hero__inner {
width: 100%;
}
.slgn-v2 .slgn-hero--doppia .slgn-hero__showcase {
width: 100%;
max-width: none;
justify-self: stretch;
}
.slgn-v2 .slgn-hero--doppia .slgn-hero-story {
width: 100%;
max-width: none;
min-height: 0;
aspect-ratio: 4 / 5;
} .slgn-v2 .slgn-hero--story .slgn-hero__title {
font-size: min(
clamp(44px, 21.5vw, 142px),
calc((100vw - 40px) / (max(var(--lettere, 8), 10) * 0.65))
);
} .slgn-v2 .slgn-hero--sito .slgn-hero__title {
font-size: min(
clamp(44px, 21.5vw, 142px),
calc((100vw - 40px) / (var(--lettere, 8) * 0.65))
);
}
.slgn-v2 .slgn-hero--story .slgn-hero__lead,
.slgn-v2 .slgn-hero--story .slgn-lead {
width: min(37ch, 88vw);
font-size: 15px;
}
} .slgn-v2 .slgn-dati {
display: grid;
position: relative; min-height: min(68svh, 720px);
padding: 0;
background: #fff;
color: var(--v2-inchiostro); border-top: 0;
overflow: hidden;
isolation: isolate;
} .slgn-v2 .slgn-ws .slgn-sec.slgn-dati::before,
.slgn-v2 .slgn-ws .slgn-sec.slgn-dati::after {
content: none;
} .slgn-v2 .slgn-dati__testa {
position: relative;
z-index: 1;
padding: clamp(48px, 6vh, 84px) var(--v2-margine) 0; text-align: center;
}
.slgn-v2 .slgn-dati__testa h2 {
margin: 0; color: inherit; font-size: clamp(48px, 6.4vw, 124px);
font-weight: 700;
line-height: var(--v2-interlinea-alta);
letter-spacing: -.02em;
text-transform: uppercase;
word-spacing: .08em;
} .slgn-v2 .slgn-dati__testa + .slgn-dati__griglia {
padding-top: clamp(26px, 3.2vh, 46px);
} .slgn-v2 .slgn-dati__griglia {
--griglia-gap: clamp(20px, 2.4vw, 40px);
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--griglia-gap) var(--griglia-gap); padding: clamp(30px, 3.6vh, 52px) var(--v2-margine);
} .slgn-v2 .slgn-dati .slgn-dato {
display: grid;
grid-template-columns: 1fr;
align-content: start;
gap: clamp(10px, 1vw, 18px);
min-height: 0;
padding: 0;
border: 0;
}
.slgn-v2 .slgn-dati .slgn-dato--dx {
justify-items: end;
text-align: right;
} .slgn-v2 .slgn-dati .slgn-dato:nth-child(n+3) { align-content: end; } .slgn-v2 .slgn-dato .slgn-dato__val {
display: inline-block;
font-variant-numeric: tabular-nums;
font-size: clamp(52px, 9.4vw, 150px);
font-weight: 500;
line-height: .9;
letter-spacing: -.035em;
text-transform: uppercase;
}
.slgn-v2 .slgn-dato .slgn-dato__numero {
display: inline-flex;
align-items: flex-end;
gap: .1em;
}
.slgn-v2 .slgn-dato .slgn-dato__extra {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .08em;
padding-bottom: .08em;
font-size: clamp(52px, 9.4vw, 150px);
}
.slgn-v2 .slgn-dato--dx .slgn-dato__extra { align-items: flex-end; }
.slgn-v2 .slgn-dato .slgn-dato__simbolo,
.slgn-v2 .slgn-dato .slgn-dato__suffisso {
display: block;
font: inherit;
font-weight: 600;
letter-spacing: -.01em;
line-height: 1;
text-transform: none;
}
.slgn-v2 .slgn-dato .slgn-dato__simbolo {
font-size: .58em;
font-style: normal;
}
.slgn-v2 .slgn-dato .slgn-dato__suffisso { font-size: .21em; } .slgn-js .slgn-v2 .slgn-dato .slgn-dato__coda,
.slgn-js .slgn-v2 .slgn-dato .slgn-dato__extra {
opacity: 0;
transform: translateY(.18em);
transition: opacity .42s var(--v2-ease), transform .42s var(--v2-ease);
transition-delay: .32s;
}
.slgn-js .slgn-v2 .slgn-dato.slgn-reveal.is-in .slgn-dato__coda,
.slgn-js .slgn-v2 .slgn-dato.slgn-reveal.is-in .slgn-dato__extra {
opacity: 1;
transform: none;
}
.slgn-v2 .slgn-dato .slgn-dato__lab {
margin-top: 6px;
font-size: clamp(12px, .88vw, 16px);
font-weight: 600;
line-height: 1.1;
letter-spacing: .12em;
text-transform: uppercase;
} .slgn-v2 .slgn-sec .slgn-dati__marchio {
position: absolute;
z-index: 3;
} .slgn-dati__marchio {
--par-x: 0px;
--par-y: 0px;
--par-rx: 0deg;
--par-ry: 0deg;
position: absolute;
z-index: 3;
inset: 0;
display: grid;
place-items: center; padding-top: 0; padding-bottom: clamp(24px, 3vh, 44px);
min-height: 0;
perspective: 900px;
transform: translate3d(var(--par-x), var(--par-y), 0) rotateX(var(--par-rx)) rotateY(var(--par-ry));
transform-style: preserve-3d;
will-change: transform;
pointer-events: none;
}  .slgn-v2 .slgn-dati:has(.slgn-dati__testa) .slgn-dati__marchio {
padding-top: calc(clamp(48px, 6vh, 84px) + clamp(48px, 6.4vw, 124px) * 1.22);
}
.slgn-dati__float {
display: grid;
place-items: center;
width: min(21vw, 330px);
height: min(21vw, 330px);
animation: slgn-v2-galleggia 7.5s ease-in-out infinite;
}
.slgn-dati__float img {
display: block;
width: 100%;
height: 100%; object-fit: contain;
max-width: none;
} .slgn-v2 .slgn-dati__float img {
filter: drop-shadow(0 18px 27px rgba(0, 0, 0, .16));
}
@keyframes slgn-v2-galleggia {
0%, 100% { transform: translateY(-8px) rotate(-.7deg); }
50%      { transform: translate3d(0, 13px, 16px) rotate(.8deg); }
}
@media (max-width: 900px) { .slgn-v2 .slgn-dati {
--griglia-gap: clamp(18px, 5vw, 24px);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--griglia-gap) var(--griglia-gap);
padding: 15vh 20px;
min-height: auto;
}
.slgn-v2 .slgn-dati__griglia { display: contents; } .slgn-v2 .slgn-dati__testa {
grid-column: 1 / -1;
padding: 0;
} .slgn-v2 .slgn-dati__testa h2 { font-size: clamp(30px, 8.5vw, 54px); } .slgn-v2 .slgn-dati__testa,
.slgn-v2 .slgn-dati .slgn-dato { min-width: 0; }
.slgn-v2 .slgn-dati .slgn-dato {
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
.slgn-v2 .slgn-dato .slgn-dato__val {
font-size: clamp(40px, 14vw, 96px);
overflow-wrap: anywhere;
}
.slgn-v2 .slgn-dato .slgn-dato__extra { font-size: clamp(40px, 14vw, 96px); }
.slgn-v2 .slgn-dato .slgn-dato__lab {
max-width: 42vw;
font-size: 10px;
letter-spacing: .1em;
} .slgn-v2 .slgn-sec .slgn-dati__marchio {
position: static;
order: 1;
grid-column: 1 / -1; padding: 0;
}
.slgn-v2 .slgn-dati .slgn-dato:nth-child(n+3) { order: 2; }
.slgn-dati__float { width: 45vw; height: 45vw; }
} .slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
font-size: min(clamp(92px, 12.4vw, 238px), calc(100cqw / 3.72), 17vh);
overflow-wrap: anywhere;
}
@media (max-width: 900px) {
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
font-size: min(clamp(44px, 21.5vw, 142px), calc((100vw - 40px) / 6.5));
}
} .slgn-v2 .slgn-coppie {
position: relative;
padding: 0;
background: var(--v2-carta);
color: var(--v2-inchiostro);
}
.slgn-coppie__occhiello {
position: absolute;
z-index: 2;
top: clamp(20px, 2.4vw, 40px);
left: var(--v2-margine);
margin: 0;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.slgn-coppie__riga {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
} .slgn-carta {
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
height: min(44vw, 520px);
min-height: 400px;
padding: clamp(26px, 3.3vw, 64px);
border-right: 1px solid var(--v2-riga-carta);
border-bottom: 1px solid var(--v2-riga-carta);
color: var(--v2-inchiostro);
overflow: hidden;
text-decoration: none;
}
.slgn-carta--scuro  { background: var(--v2-grafite); }
.slgn-carta--chiaro { background: var(--v2-carta-chiara); } .slgn-carta--scuro { color: var(--v2-inchiostro); }
.slgn-carta::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(145deg, rgba(255, 255, 255, .06), transparent 45%, rgba(0, 0, 0, .06));
opacity: 0;
transition: opacity .5s var(--v2-ease);
}
.slgn-carta:hover::before { opacity: 1; }
.slgn-carta__n {
position: relative;
z-index: 1;
align-self: flex-end;
font-size: 11px;
font-weight: 700;
letter-spacing: -.06em;
}
.slgn-carta__testo {
position: relative;
z-index: 1;
max-width: 620px;
} .slgn-carta__testo h3,
.slgn-carta__testo p,
.slgn-v2 .slgn-cta__title,
.slgn-v2 .slgn-cta__occhiello { color: inherit; }
.slgn-carta__testo h3 {
margin: 0 0 10px;
font-size: clamp(38px, 4.3vw, 82px);
font-weight: 900;
line-height: .88;
letter-spacing: -.06em;
text-transform: uppercase;
} .slgn-carta--scuro .slgn-carta__testo p { color: #a9a7a2; } .slgn-carta__testo p {
max-width: 52ch;
margin: 0;
font-size: clamp(13px, .92vw, 18px);
font-weight: 400;
line-height: 1.3;
letter-spacing: -.06em;
} .slgn-js .slgn-v2 [data-slgn-coppia] .slgn-carta {
opacity: 0;
filter: blur(18px);
transform: translateY(64px) scale(.985);
transition:
opacity .9s var(--v2-ease),
filter 1.1s var(--v2-ease),
transform 1.1s var(--v2-ease);
}
.slgn-js .slgn-v2 [data-slgn-coppia].is-in .slgn-carta {
opacity: 1;
filter: blur(0);
transform: none;
}
.slgn-js .slgn-v2 [data-slgn-coppia].is-in .slgn-carta:nth-child(2) {
transition-delay: .13s;
}
@media (max-width: 900px) {
.slgn-coppie__riga { grid-template-columns: 1fr; } .slgn-carta { height: 48svh; min-height: 340px; padding: 28px 20px; }
.slgn-carta__testo h3 { font-size: clamp(46px, 12vw, 76px); }
} .slgn-v2 .slgn-vetrina {
position: relative;
min-height: 100vh;
min-height: 100svh;
padding: 0;
background: var(--v2-nero);
color: #f6f5f2;
} .slgn-vetrina__fisso {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
position: sticky;
top: 0;
height: 100vh;
height: 100svh; min-height: 640px; padding: clamp(88px, 8.5vh, 116px) 0 clamp(46px, 5.5vh, 68px);
overflow: hidden;
} .slgn-vetrina__testa {
flex: none;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
z-index: 3;
width: max-content;
max-width: min(76vw, 1180px);
margin: 0;
}
.slgn-vetrina__testa p {
margin: 0 0 22px;
color: rgba(255, 255, 255, .55);
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
} .slgn-v2 .slgn-vetrina__testa h2,
.slgn-v2 .slgn-cta__title,
.slgn-carta__testo h3,
.slgn-prog__meta h3 { word-spacing: .16em; } .slgn-vetrina__testa h2 {
margin: 0;
font-size: clamp(56px, min(9.4vw, 22vh), 190px);
font-weight: 900;
line-height: var(--v2-interlinea-alta);
letter-spacing: -.06em;
text-transform: uppercase;
} .slgn-vetrina__azione {
align-self: start;
position: relative;
z-index: 3;
margin: clamp(26px, 3.4vh, 52px) 0 0;
}
.slgn-vetrina__binario {
display: flex;
grid-area: 1 / 1 / -1 / -1; align-items: center; gap: 0;
position: relative;
height: 100%;
width: max-content; padding: 0 8vw 0 39vw;
will-change: transform;
} .slgn-vetrina__testa { margin-right: 3.2vw; } .slgn-v2 .slgn-vetrina__binario .slgn-prog__quadro,
.slgn-v2 .slgn-vetrina__binario .slgn-prog__video {
border: 0;
box-shadow: none;
}
@media (max-width: 900px) {
.slgn-vetrina__testa { margin-right: 16px; }
} .slgn-v2 .slgn-prog + .slgn-prog { margin-left: -1px; }  .slgn-vetrina__binario .slgn-prog { position: relative; }
.slgn-vetrina__binario .slgn-prog__meta {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding-left: 20px;
padding-right: 20px;
} @media (hover: hover) and (pointer: fine) {
.slgn-vetrina__binario { padding: 0 var(--v2-margine) 0 var(--v2-margine); }
} .slgn-prog {
display: flex;
flex: none;
flex-direction: column;
justify-content: center;
width: min(58vw, 980px, calc(66vh * 5 / 4));
color: inherit;
text-decoration: none;
}
.slgn-prog__quadro { --riquadro-l: 80%;
--riquadro-h: 60%;
display: flex;
justify-content: space-between;
align-items: flex-end;
position: relative; height: auto;
aspect-ratio: 5 / 4; min-height: 0;
padding: 26px;
border: 1px solid rgba(255, 255, 255, .18);
overflow: hidden;
}
.slgn-prog__quadro img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover; transition: transform 1.1s var(--v2-ease), filter .3s var(--v2-ease);
}
.slgn-prog:hover .slgn-prog__quadro img { transform: scale(1.04); } .slgn-prog__video {
position: absolute;
inset: 0;
margin: auto;
width: var(--riquadro-l);
height: var(--riquadro-h);
object-fit: cover;
opacity: 0;
pointer-events: none;
z-index: 0; filter: blur(13px) saturate(.86);
transform: scale(1.02);
transition:
opacity .3s var(--v2-ease),
filter .62s var(--v2-ease),
transform .62s var(--v2-ease),
z-index 0s .3s;
} .slgn-prog__quadro::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: var(--riquadro-l);
height: var(--riquadro-h);
z-index: 3;
opacity: 0;
pointer-events: none;
mix-blend-mode: soft-light;
filter: contrast(1.3);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E");
background-size: 170px 170px;
transition: opacity .42s var(--v2-ease);
}
@keyframes slgn-grana {
0%   { background-position:   0px    0px; }
25%  { background-position: -38px   22px; }
50%  { background-position:  27px  -31px; }
75%  { background-position: -19px  -14px; }
100% { background-position:   0px    0px; }
} .slgn-prog__quadro:has(.slgn-prog__video.is-accesa) img { filter: brightness(.42); }
@media (hover: hover) and (pointer: fine) {
.slgn-v2 .slgn-prog:hover .slgn-prog__quadro img { filter: brightness(.42); }
} .slgn-prog__video.is-accesa {
opacity: 1;
filter: blur(0) saturate(1);
transform: scale(1);
z-index: 2;
transition:
opacity .3s var(--v2-ease),
filter .62s var(--v2-ease),
transform .62s var(--v2-ease),
z-index 0s;
}
.slgn-prog__quadro:has(.slgn-prog__video.is-accesa)::after {
opacity: .55;
animation: slgn-grana .9s steps(4) infinite;
}
@media (hover: hover) and (pointer: fine) {
.slgn-v2 .slgn-prog:hover .slgn-prog__video {
opacity: 1;
filter: blur(0) saturate(1);
transform: scale(1);
z-index: 2;
transition:
opacity .3s var(--v2-ease),
filter .62s var(--v2-ease),
transform .62s var(--v2-ease),
z-index 0s;
}
.slgn-v2 .slgn-prog:hover .slgn-prog__quadro::after {
opacity: .55;
animation: slgn-grana .9s steps(4) infinite;
}
} .slgn-prog__quadro > span {
position: relative;
z-index: 1;
font-size: clamp(64px, 7vw, 132px);
font-weight: 900;
line-height: .7;
letter-spacing: -.08em;
}
.slgn-prog__quadro small {
position: relative;
z-index: 1;
font-size: 10px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.slgn-prog--argento .slgn-prog__quadro { background: #c9c9c6; color: #171717; }
.slgn-prog--grafite .slgn-prog__quadro { background: #282826; color: #efefec; }
.slgn-prog--carta   .slgn-prog__quadro { background: #e8e7e2; color: #111; }
.slgn-prog--cromo   .slgn-prog__quadro {
background: linear-gradient(135deg, #111 0%, #747474 48%, #1a1a1a 100%);
color: #f5f5f2;
}
.slgn-prog__meta {
display: flex;
flex: none;
justify-content: space-between;
align-items: baseline;
gap: 30px;
padding: 18px 0 0;
}
.slgn-prog__meta h3 {
margin: 0;
font-size: clamp(26px, 2.5vw, 48px);
font-weight: 900;
line-height: .9;
letter-spacing: -.06em;
text-transform: uppercase;
}
.slgn-prog__meta p {
margin: 0;
color: rgba(255, 255, 255, .58);
font-size: 11px;
font-weight: 400;
letter-spacing: -.06em;
text-transform: uppercase;
}
.slgn-vetrina__barra {
position: absolute;
bottom: 30px;
left: var(--v2-margine);
right: var(--v2-margine);
height: 1px;
background: rgba(255, 255, 255, .18);
}
.slgn-vetrina__barra i {
display: block;
width: 100%;
height: 1px;
background: #fff;
transform: scaleX(var(--avanzamento, 0));
transform-origin: 0;
} @media (max-width: 900px) { .slgn-v2 .slgn-vetrina { min-height: 0; }
.slgn-vetrina__fisso {
--vetrina-spazio: max(80px, calc(var(--vetrina-meta, 60px) + 40px));
--vetrina-altezza: min(100svh, calc(min(76.8vw, 480px, 58svh) + var(--vetrina-spazio) * 2));
top: calc((100svh - var(--vetrina-altezza)) / 2);
height: var(--vetrina-altezza);
min-height: 0;
padding: var(--vetrina-spazio) 0;
}
.slgn-vetrina__barra {
bottom: 12px;
pointer-events: none;
}
.slgn-vetrina__binario {
top: 0;
} .slgn-vetrina__testa { max-width: 76vw; } .slgn-vetrina__testa h2 { font-size: clamp(38px, 13vw, 92px); }
.slgn-vetrina__testa p { margin-bottom: 14px; }
.slgn-vetrina__azione { margin-top: 24px; } .slgn-vetrina__binario {
gap: 0; padding: 0 18vw 0 var(--v2-margine);
} .slgn-prog { width: min(96vw, 600px, calc(58svh * 5 / 4)); }
.slgn-prog__quadro {
min-height: 0;
padding: 16px;
}
.slgn-prog__quadro > span { font-size: clamp(42px, 13vw, 76px); }
.slgn-prog__meta { display: block; padding-top: 14px; }
.slgn-prog__meta p { margin-top: 6px; }
} @media (min-width: 901px) and (max-height: 820px) {
.slgn-vetrina__fisso { padding-top: clamp(84px, 11vh, 104px); }
.slgn-vetrina__testa h2 { font-size: clamp(40px, 4vw, 64px); }
.slgn-prog__quadro > span { font-size: clamp(56px, 8vw, 124px); }
}  .slgn-v2 .slgn-gioco {
display: grid;
place-items: center;
position: relative;
isolation: isolate;
min-height: 78vh;
min-height: 78svh;
padding: clamp(70px, 9vh, 120px) var(--v2-margine);
background: var(--v2-nero);
color: #f7f7f4;
overflow: hidden;
}
.slgn-gioco__dentro {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 2;
width: min(1380px, 91vw);
text-align: center;
}
.slgn-gioco__dentro h2 {
margin: 0;
font-size: clamp(46px, 4.2vw, 80px);
font-weight: 400;
line-height: 1;
letter-spacing: -.06em; text-transform: none;
} .slgn-gioco__cta {
position: relative;
z-index: 3;
margin-top: clamp(38px, 5vh, 64px);
padding: 21px 30px 19px;
border: 1px solid rgba(255, 255, 255, .92);
color: inherit;
font-size: clamp(15px, 1.2vw, 21px);
font-weight: 700;
line-height: 1;
letter-spacing: -.06em;
text-decoration: none;
text-transform: uppercase;
transition: background-color .28s var(--v2-ease), color .28s var(--v2-ease);
}
.slgn-gioco__cta:hover,
.slgn-gioco__cta:focus-visible {
background: #f7f7f4;
color: var(--v2-nero);
} .slgn-v2 .slgn-gioco .slgn-gioco__scia {
position: absolute;
inset: 0;
z-index: 4;
pointer-events: none;
}
.slgn-gioco__scia img {
position: absolute;
top: 0;
left: 0; width: var(--scia-largh, 220px);
height: var(--scia-alt, 300px); max-width: none;
border-radius: 0;
object-fit: cover;
object-position: center;
opacity: 0;
transform: scale(.6);
transform-origin: 50%;
will-change: transform, opacity;
}
@media (max-width: 900px) {
.slgn-v2 .slgn-gioco { min-height: 82svh; padding: 110px 20px; }
.slgn-gioco__dentro { width: 100%; }
.slgn-gioco__dentro h2 { font-size: clamp(38px, 11.6vw, 68px); line-height: 1; }
.slgn-gioco__cta { margin-top: 64px; padding: 18px 24px 16px; font-size: 15px; }
.slgn-gioco__scia { display: none; }
}   .slgn-v2 .slgn-cta {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-height: 82vh;
min-height: 82svh;
padding: clamp(64px, 7.5vh, 112px) var(--v2-margine);
background: var(--v2-carta);
color: var(--v2-inchiostro);
text-align: left;
}
.slgn-v2 .slgn-cta__occhiello {
margin: 0 0 40px;
color: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.slgn-v2 .slgn-cta__title {
max-width: 13ch;
margin: 0;
font-size: clamp(66px, 8.8vw, 168px);
font-weight: 900;
line-height: var(--v2-interlinea-alta);
letter-spacing: -.06em;
text-transform: uppercase;
} .slgn-v2 .slgn-cta__title .slgn-word--em {
color: var(--v2-inchiostro);
-webkit-text-stroke: 0;
text-shadow: none;
font-family: var(--ws-serif, Georgia, "Times New Roman", serif);
font-style: italic;
font-weight: 400;
text-transform: none;
font-size: 1.12em;
line-height: .875;
} @media (prefers-contrast: more) {
.slgn-v2 .slgn-cta__title .slgn-word--em { color: var(--v2-inchiostro) !important; }
} .slgn-v2 .slgn-cta .slgn-btn {
display: flex;
justify-content: space-between;
align-items: center;
width: min(230px, 44vw);
margin-top: clamp(54px, 8vh, 92px);
padding: 17px 0;
border: 0;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
border-radius: 0;
background: none;
color: inherit;
font-size: 13px;
font-weight: 700;
letter-spacing: -.06em;
text-transform: uppercase;
}
.slgn-v2 .slgn-cta .slgn-btn i { transition: transform .3s var(--v2-ease); }
.slgn-v2 .slgn-cta .slgn-btn:hover i { transform: translate(4px, -4px); }
@media (max-width: 900px) { .slgn-v2 .slgn-cta__title { font-size: clamp(42px, 12vw, 108px); }
} .slgn-hdr--v2 {
position: absolute;
top: 0;
left: 0;
right: 0;
background: none;
border: 0;
box-shadow: none;
color: rgba(255, 255, 255, .92);
}
.slgn-hdr--v2::before,
.slgn-hdr--v2::after { display: none; } .slgn-fondo-chiaro .slgn-hdr--v2:not(.is-scrolled) .slgn-hdr__mark,
.slgn-fondo-chiaro .slgn-hdr--v2:not(.is-scrolled) .slgn-hdr__nav,
.slgn-fondo-chiaro .slgn-hdr--v2:not(.is-scrolled) .slgn-hdr__tasto--zampa[aria-expanded="false"] { filter: invert(1); } .slgn-hdr--v2 .slgn-hdr__bar { padding-inline: 0; }
.slgn-hdr--v2 .slgn-hdr__in {
width: 100%;
max-width: none;
height: 74px;
padding: 0 var(--v2-margine, 4.65vw);
}
.slgn-hdr--v2 .slgn-hdr__nav { gap: clamp(38px, 5.35vw, 104px); } @media (max-width: 1180px) {
.slgn-hdr--v2 .slgn-hdr__nav { gap: clamp(12px, 2vw, 30px); }
.slgn-hdr--v2 .slgn-hdr__nav .slgn-hdr__vn { display: none; }
}
.slgn-hdr--v2 .slgn-hdr__lista a,
.slgn-hdr--v2 .slgn-hdr__nav a {
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.slgn-hdr--v2 .slgn-hdr__n,
.slgn-hdr--v2 .slgn-hdr__vn { font-size: 7px; letter-spacing: .04em; } .slgn-hdr--v2 .slgn-hdr__tasto {
min-width: 0;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 0;
border-radius: 0;
background: rgba(245, 245, 242, .94);
color: #111;
}
.slgn-hdr--v2 .slgn-hdr__tasto:hover { background: #fff; } @media (max-width: 900px) {
.slgn-hdr--v2 {
position: sticky;
top: 0; margin-bottom: -74px;
left: auto;
right: auto;
} }  .slgn-v2 { --piede-alto: clamp(420px, 62svh, 680px); }
body.slgn-v2:not(.slgn-preview) .slgn-ws {
position: relative;
z-index: 1;
background: var(--v2-nero);
margin-bottom: 0;
}
body.slgn-v2:not(.slgn-preview) .slgn-ftr--v2 {
position: sticky;
z-index: 0;
left: 0;
right: 0;
bottom: 0;
height: auto;
min-height: var(--piede-alto);
} body.slgn-v2:not(.slgn-preview) #slgn-contenuto:has(.sp-policy) + .slgn-ftr--v2 {
position: relative;
bottom: auto;
}
.slgn-ftr--v2 {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 32px;
min-height: 54vh;
min-height: 54svh;
padding: 4vh 0 28px;
background: var(--v2-nero);
color: #fff;
overflow: hidden;
}
.slgn-insegna { overflow: hidden; }
.slgn-ftr--v2 > * { flex-shrink: 0; }
.slgn-insegna__nastro {
display: flex;
width: max-content;
animation: slgn-v2-insegna var(--durata, 22s) linear infinite;
}
.slgn-insegna__nastro > span {
padding-right: .24em;
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .75);
font-size: clamp(120px, 18vw, 345px);
font-weight: 900;
line-height: .92;
letter-spacing: -.075em;
text-transform: uppercase;
white-space: nowrap;
}
@keyframes slgn-v2-insegna { to { transform: translateX(-50%); } } .slgn-ftr--v2 .slgn-ftr__marchio { display: none; } .slgn-ftr--v2 .slgn-ftr__coda {
padding: 0;
border: 0;
}
.slgn-ftr--v2 .slgn-wrap {
width: 100%;
max-width: none;
padding: 0 var(--v2-margine, 4.65vw);
} .slgn-ftr--v2 .slgn-ftr__indice {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: clamp(14px, 1.6vw, 26px) clamp(20px, 2.4vw, 44px);
margin: clamp(26px, 4vh, 54px) 0 clamp(22px, 3vh, 40px);
padding-bottom: clamp(22px, 3vh, 40px);
border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.slgn-ftr--v2 .slgn-ftr__voce {
display: flex;
align-items: baseline;
gap: 10px;
color: rgba(255, 255, 255, .82);
font-size: clamp(15px, 1.15vw, 19px);
font-weight: 600;
letter-spacing: -.01em;
text-decoration: none;
transition: color .3s var(--v2-ease);
}
.slgn-ftr--v2 .slgn-ftr__n {
color: rgba(255, 255, 255, .38);
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
}
@media (hover: hover) and (pointer: fine) {
.slgn-ftr--v2 .slgn-ftr__voce:hover { color: #fff; }
}
.slgn-ftr--v2 .slgn-ftr__riga {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
padding: 0;
border: 0;
color: rgba(255, 255, 255, .55);
font-size: 10px;
font-weight: 400;
letter-spacing: .05em;
text-transform: uppercase;
}
.slgn-ftr--v2 .slgn-ftr__riga p,
.slgn-ftr--v2 .slgn-ftr__riga ul { margin: 0; }
.slgn-ftr--v2 .slgn-ftr__legali {
display: flex;
gap: 18px;
list-style: none;
padding: 0;
} @media (hover: none) {
.slgn-ftr--v2 .slgn-ftr__legali { row-gap: 2.1rem; }
}
@media (max-width: 760px) {
.slgn-ftr--v2 .slgn-ftr__riga {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
} @media (prefers-reduced-motion: reduce) {
.slgn-v2 .slgn-hero__riga i,
.slgn-dati__float,
.slgn-insegna__nastro { animation: none; }
.slgn-v2 .slgn-hero__riga i { transform: scaleX(1); }
.slgn-js .slgn-v2 [data-slgn-coppia] .slgn-carta {
opacity: 1;
filter: none;
transform: none;
transition: none;
} .slgn-v2 .slgn-vetrina {
height: auto !important;
min-height: 0;
padding: 88px 0 80px;
}
.slgn-vetrina__fisso {
display: block;
position: relative;
height: auto;
min-height: 0; padding: 0;
overflow: visible;
} .slgn-vetrina__testa {
position: relative;
top: auto;
left: auto;
width: max-content;
max-width: 78vw;
margin: 0;
}
.slgn-vetrina__binario {
position: relative;
top: auto;
left: auto;
width: 100%;
height: auto;
gap: 0;
padding: 0 14vw 18px var(--v2-margine);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
transform: none !important;
}
.slgn-vetrina__binario::-webkit-scrollbar { display: none; }
.slgn-vetrina__binario.is-preso { cursor: grabbing; } .slgn-vetrina__binario { align-items: flex-start; }
.slgn-vetrina__binario .slgn-prog__meta { position: static; }
.slgn-prog { scroll-snap-align: start; }
.slgn-vetrina__azione {
position: relative;
bottom: auto;
left: auto;
margin: 28px 0 0;
}
.slgn-vetrina__barra {
position: relative;
left: auto;
right: auto;
bottom: auto;
margin: 20px var(--v2-margine) 0;
}
.slgn-gioco__scia { display: none; }
}  .slgn-v2 .slgn-racconto {
--salita: 100vh;
--avanti: 0;
--vetro: 0;
--sfoca: 0px;
--luce: 1;
position: relative;
min-height: 100vh;
min-height: 100lvh;
padding: 0;
background: var(--v2-nero);
} .slgn-racconto__scena {
position: sticky;
top: 0;
height: 100vh;
height: 100lvh;
min-height: 640px;
isolation: isolate;
overflow: hidden;
background: #f5f5f3;
} .slgn-racconto__media {
position: absolute;
inset: 0;
z-index: -3;
overflow: hidden;
background: #f5f5f3;
}
.slgn-racconto__video {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
transform: scale(1.006);
transform-origin: 50% 48%;
filter: blur(var(--sfoca)) brightness(var(--luce)) saturate(.88) contrast(.99);
will-change: filter;
} .slgn-racconto__vetro {
position: absolute;
inset: 0;
z-index: 3;
opacity: var(--vetro);
pointer-events: none;
-webkit-backdrop-filter: blur(calc(1px + var(--vetro) * 15px)) brightness(calc(1 - var(--vetro) * .34)) saturate(.9) contrast(.82);
backdrop-filter: blur(calc(1px + var(--vetro) * 15px)) brightness(calc(1 - var(--vetro) * .34)) saturate(.9) contrast(.82);
background:
radial-gradient(at 50% 42%, rgba(80, 82, 82, .18), transparent 49%),
linear-gradient(165deg, rgba(20, 21, 21, .52), rgba(0, 0, 0, .80)),
rgba(4, 5, 5, .58);
will-change: opacity, backdrop-filter;
} .slgn-racconto__grana {
position: absolute;
inset: 0;
opacity: calc(var(--vetro) * .16);
pointer-events: none;
mix-blend-mode: soft-light;
filter: contrast(1.28);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.82'/%3E%3C/svg%3E");
background-size: 180px 180px;
} .slgn-racconto__copia {
position: absolute;
z-index: 5;
top: 6svh;
left: max(8.4vw, 80px);
width: min(1140px, 78vw);
color: #fff;
transform: translate3d(0, var(--salita), 0);
will-change: transform;
}
.slgn-racconto__occhiello {
margin: 0 0 8vh;
padding-top: 2px;
color: rgba(255, 255, 255, .68);
font-size: 10px;
font-weight: 600;
letter-spacing: .13em;
text-transform: uppercase;
} .slgn-racconto__par {
max-width: 19ch;
margin: 0 0 13vh;
font-size: clamp(40px, 4.55vw, 88px);
font-weight: 400;
line-height: 1.04;
letter-spacing: -.06em;
} .slgn-racconto__par--in { margin-left: clamp(40px, 8vw, 160px); } .slgn-racconto__congedo {
margin: 20vh 0 16vh;
color: rgba(255, 255, 255, .98);
font-size: clamp(52px, 8.5vw, 164px);
font-weight: 400;
line-height: .86;
letter-spacing: -.075em;
} .slgn-parola {
display: inline-block;
opacity: 0;
text-shadow: 0 0 18px rgba(255, 255, 255, .04);
transition: opacity .09s linear;
will-change: opacity;
}
.slgn-parola.is-letta { opacity: 1; } .slgn-racconto:not(.is-viva) .slgn-parola { opacity: 1; }  .slgn-racconto__riga {
position: absolute;
z-index: 6;
bottom: calc(28px + (100lvh - 100svh));
left: max(8.4vw, 80px);
right: max(8.4vw, 80px);
display: flex;
align-items: center;
gap: 14px;
color: #fff;
mix-blend-mode: difference;
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
line-height: 1;
text-transform: uppercase;
pointer-events: none;
}
.slgn-racconto__riga i {
flex: 1;
height: 1px;
background: currentColor;
transform: scaleX(calc(.08 + var(--avanti) * .92));
transform-origin: 0;
}
@media (max-width: 900px) {
.slgn-racconto__scena { min-height: 560px; } .slgn-racconto__riga { bottom: calc(14px + (100lvh - 100svh)); } .slgn-racconto__copia {
left: 20px;
width: calc(100vw - 40px);
}
.slgn-racconto__occhiello { margin-bottom: 8vh; }
.slgn-racconto__par {
max-width: none;
margin-bottom: 11vh;
font-size: clamp(31px, 9.2vw, 48px);
line-height: 1.01;
}
.slgn-racconto__par--in { margin-left: 0; }
.slgn-racconto__congedo { font-size: clamp(40px, 13vw, 72px); }
.slgn-racconto__riga { left: 20px; right: 20px; }
} @media (prefers-reduced-motion: reduce) {
.slgn-v2 .slgn-racconto { height: auto !important; }
.slgn-racconto__scena { position: relative; height: auto; padding: 14vh 0; }
.slgn-racconto__copia { position: relative; top: auto; transform: none; }
.slgn-parola { opacity: 1 !important; transition: none; }
.slgn-racconto__vetro { opacity: .92; }
.slgn-racconto__video { display: none; }
}  .slgn-js .slgn-v2 .slgn-reveal .slgn-word {
opacity: 0;
filter: blur(14px);
transform: translateY(.62em);
transition:
opacity .55s var(--v2-ease),
filter .85s var(--v2-ease),
transform .85s var(--v2-ease);
transition-delay: min(calc(var(--i, 0) * 78ms), 900ms);
}
.slgn-js .slgn-v2 .slgn-reveal.is-in .slgn-word {
opacity: 1;
filter: blur(0);
transform: none;
} @media (hover: hover) and (pointer: fine) {
.slgn-v2 .slgn-coppie--apre .slgn-carta__apre {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .7s var(--v2-ease);
}
.slgn-v2 .slgn-coppie--apre .slgn-carta__apre > p {
overflow: hidden;
opacity: 0;
transform: translateY(12px);
transition:
opacity .4s var(--v2-ease),
transform .55s var(--v2-ease);
}
.slgn-v2 .slgn-coppie--apre .slgn-carta:hover .slgn-carta__apre,
.slgn-v2 .slgn-coppie--apre .slgn-carta:focus-visible .slgn-carta__apre {
grid-template-rows: 1fr;
} .slgn-v2 .slgn-coppie--apre .slgn-carta:hover .slgn-carta__apre > p,
.slgn-v2 .slgn-coppie--apre .slgn-carta:focus-visible .slgn-carta__apre > p {
opacity: 1;
transform: none;
transition-delay: .11s;
}
.slgn-v2 .slgn-coppie--apre .slgn-carta__segno {
display: block;
width: 30px;
height: 2px;
margin: 16px 0 0;
background: currentColor;
opacity: .45;
transform-origin: 0 50%;
transition:
transform .6s var(--v2-ease),
opacity .4s var(--v2-ease);
}
.slgn-v2 .slgn-coppie--apre .slgn-carta:hover .slgn-carta__segno,
.slgn-v2 .slgn-coppie--apre .slgn-carta:focus-visible .slgn-carta__segno {
transform: scaleX(3.2);
opacity: 1;
}
} .slgn-carta__segno { display: none; } .slgn-v2 .slgn-prog { --fuoco: 1; }
.slgn-js .slgn-v2 .slgn-prog__meta {
opacity: calc(.34 + .66 * var(--fuoco));
transform: translateY(calc((1 - var(--fuoco)) * 9px));
} .slgn-v2 .slgn-prog__video {
transition: opacity .3s var(--v2-ease);
}
.slgn-v2 .slgn-prog__video.is-accesa { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
.slgn-v2 .slgn-prog:hover .slgn-prog__video {
opacity: 1;
}
} .slgn-v2 .slgn-elenco {
position: relative;
padding: clamp(44px, 7vw, 120px) 0;
background: var(--v2-nero);
color: var(--v2-carta); --elenco-larghezza: clamp(210px, 20vw, 380px);
} .slgn-v2 .slgn-dati + .slgn-elenco {
position: relative;
}
.slgn-v2 .slgn-dati + .slgn-elenco::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: clamp(40px, 6vw, 96px);
background: linear-gradient(to bottom, var(--v2-riga), transparent);
pointer-events: none;
}
.slgn-elenco__occhiello {
margin: 0 var(--v2-margine) clamp(30px, 4.5vw, 72px);
color: var(--v2-carta);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
opacity: .66;
text-transform: uppercase;
} .slgn-elenco__righe { border-bottom: 1px solid var(--v2-riga); }
.slgn-elenco__riga {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(120px, 16vh, 190px);
padding: 18px 0;
border-top: 1px solid var(--v2-riga);
color: inherit;
text-decoration: none;
} .slgn-elenco__titolo {
max-width: 74%;
margin: 0;
color: var(--v2-carta);
font-size: clamp(32px, 6.2vw, 116px);
font-weight: 900;
letter-spacing: -.055em;
line-height: var(--v2-interlinea-alta);
text-align: center;
text-transform: uppercase;
} .slgn-elenco__etichette {
position: absolute;
top: 50%;
left: var(--v2-margine);
right: var(--v2-margine);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
transform: translateY(-50%);
}
.slgn-elenco__etichetta {
color: var(--v2-carta);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
} .slgn-v2 .slgn-elenco__scena {
position: absolute;
inset: 0;
z-index: 5;
pointer-events: none;
overflow: hidden;
} .slgn-elenco__cornice {
position: absolute;
top: 0;
left: 0; width: var(--elenco-larghezza, 320px);
aspect-ratio: 4 / 5;
opacity: 0;
transform: translate(calc(var(--elenco-x, 0px) - 50%), calc(var(--elenco-y, 0px) - 50%));
transition: opacity .3s var(--v2-ease);
will-change: transform;
}
.slgn-elenco__cornice.is-accesa { opacity: 1; } .slgn-elenco__quadro {
position: absolute;
inset: 0;
overflow: hidden;
transition: z-index .11s .17s;
}
.slgn-elenco__quadro.is-accesa { z-index: 2; } .slgn-elenco__anta {
position: absolute;
inset: 0;
overflow: hidden;
transform: translateX(-100%);
}
.slgn-elenco__anta img {
display: block;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transform: translateX(100%) scale(1.4);
} .slgn-elenco__quadro.is-accesa .slgn-elenco__anta { animation: slgn-anta-entra .55s ease-in-out both; }
.slgn-elenco__quadro.is-accesa .slgn-elenco__anta img { animation: slgn-foto-entra .55s ease-in-out both; }
.slgn-elenco__quadro.is-spenta .slgn-elenco__anta { animation: slgn-anta-esce .55s ease-in-out both; }
.slgn-elenco__quadro.is-spenta .slgn-elenco__anta img { animation: slgn-foto-esce .55s ease-in-out both; }
@keyframes slgn-anta-entra {
from { transform: translateX(100%); }
to   { transform: translateX(0); }
}
@keyframes slgn-anta-esce {
from { transform: translateX(0); }
to   { transform: translateX(-100%); }
}
@keyframes slgn-foto-entra {
from { transform: translateX(-100%) scale(1.15); }
to   { transform: translateX(0) scale(1); }
}
@keyframes slgn-foto-esce {
from { transform: translateX(0) scale(1); }
to   { transform: translateX(100%) scale(1.15); }
} .slgn-pagine {
display: flex;
align-items: center;
gap: clamp(14px, 1.6vw, 26px);
margin: clamp(34px, 5vw, 72px) var(--v2-margine) 0;
color: var(--v2-carta);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.slgn-pagine__voce {
color: inherit;
opacity: .42;
text-decoration: none;
transition: opacity .35s var(--v2-ease);
}
.slgn-pagine__voce--qui {
opacity: 1;
text-decoration: underline;
text-underline-offset: 6px;
}
.slgn-pagine__oltre {
display: inline-flex;
align-items: center;
gap: 10px; margin-left: auto;
color: inherit;
text-decoration: none;
}
.slgn-pagine__oltre i {
font-style: normal;
transition: transform .3s var(--v2-ease);
}
@media (hover: hover) and (pointer: fine) {
.slgn-pagine__voce:hover { opacity: 1; }
.slgn-pagine__oltre:hover i { transform: translateX(4px); }
}
.slgn-pagine__voce:focus-visible,
.slgn-pagine__oltre:focus-visible { opacity: 1; } @media (hover: hover) and (pointer: fine) { .slgn-v2 .slgn-elenco__titolo {
color: rgba(238, 237, 234, .3);
transition: color .45s var(--v2-ease);
}
.slgn-elenco__etichetta {
opacity: .5;
transition: opacity .45s var(--v2-ease);
}
.slgn-elenco__riga.is-accesa .slgn-elenco__titolo { color: var(--v2-carta); }
.slgn-elenco__riga.is-accesa .slgn-elenco__etichetta { opacity: 1; }
} @media (max-width: 900px) {
.slgn-v2 .slgn-elenco { padding: 60px 0 72px; } .slgn-elenco__riga {
min-height: 0;
padding: 30px var(--v2-margine);
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 14px;
}
.slgn-elenco__titolo {
max-width: 100%;
font-size: clamp(34px, 11vw, 60px);
text-align: left;
}
.slgn-elenco__etichette {
position: static;
top: auto;
left: auto;
right: auto;
width: 100%;
transform: none;
}
} @media (prefers-reduced-motion: reduce) {
.slgn-js .slgn-v2 .slgn-reveal .slgn-word,
.slgn-js .slgn-v2 .slgn-reveal.is-in .slgn-word {
filter: none !important;
}
.slgn-v2 .slgn-coppie--apre .slgn-carta__apre {
display: block !important;
}
.slgn-v2 .slgn-coppie--apre .slgn-carta__apre > p {
opacity: 1 !important;
transform: none !important;
}
.slgn-v2 .slgn-coppie--apre .slgn-carta__segno { display: none; }
.slgn-js .slgn-v2 .slgn-prog__quadro,
.slgn-js .slgn-v2 .slgn-prog__meta {
opacity: 1;
transform: none;
} .slgn-v2 .slgn-prog__video { display: none; }
.slgn-v2 .slgn-prog__video { opacity: 0 !important; transition: none !important; } .slgn-v2 .slgn-prog__quadro::after {
opacity: 0 !important;
animation: none !important;
} .slgn-v2 .slgn-elenco__titolo { color: var(--v2-carta); }
.slgn-v2 .slgn-elenco__titolo,
.slgn-v2 .slgn-elenco__etichetta { opacity: 1; transition: none; }
.slgn-v2 .slgn-elenco__scena { display: none; }
} .slgn-archivio {
display: grid;
grid-template-columns: repeat(var(--archivio-colonne, 3), minmax(0, 1fr));
gap: clamp(30px, 4vw, 68px) clamp(16px, 2.2vw, 38px);
margin-top: clamp(26px, 3.6vw, 58px);
} .slgn-archivio .slgn-prog {
width: auto;
flex: initial;
} .slgn-archivio .slgn-prog__quadro {
height: auto;
aspect-ratio: 4 / 5;
padding: 20px;
}
.slgn-archivio .slgn-prog__meta {
gap: 16px;
padding-top: 14px;
} .slgn-archivio .slgn-prog__quadro > span {
font-size: clamp(52px, 5.6vw, 128px);
}
.slgn-archivio .slgn-prog__quadro small {
font-size: 9.5px;
}
.slgn-archivio .slgn-prog__meta h3 {
font-size: clamp(20px, 1.7vw, 30px);
}
.slgn-archivio .slgn-prog__meta p {
flex: none;
color: var(--ws-silver, rgba(255, 255, 255, .58));
text-align: right;
} .slgn-archivio--sfalsato .slgn-archivio__carta:nth-child(2n) {
margin-top: clamp(22px, 4.5vw, 88px);
} .slgn-archivio__filtri {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: clamp(22px, 3vw, 44px);
}
.slgn-archivio__filtro {
padding: 9px 17px;
border: 1px solid var(--ws-line, rgba(255, 255, 255, .18));
border-radius: 999px;
background: transparent;
color: var(--ws-mute, rgba(255, 255, 255, .6));
font: inherit;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
transition: color .25s var(--v2-ease), border-color .25s var(--v2-ease), background .25s var(--v2-ease);
}
.slgn-archivio__filtro:hover {
color: var(--ws-paper, #ece9e1);
border-color: var(--ws-paper, #ece9e1);
}
.slgn-archivio__filtro.is-attivo {
background: var(--ws-paper, #ece9e1);
border-color: var(--ws-paper, #ece9e1);
color: var(--ws-ink, #080808);
} .slgn-archivio__carta {
transition: opacity .3s var(--v2-ease), transform .3s var(--v2-ease);
}
.slgn-archivio__carta.is-fuori {
opacity: 0;
transform: translateY(10px);
pointer-events: none;
} .slgn-archivio__carta[hidden] {
display: none;
}
@media (max-width: 1080px) {
.slgn-archivio {
grid-template-columns: repeat(min(var(--archivio-colonne, 3), 2), minmax(0, 1fr));
}
}
@media (max-width: 720px) { .slgn-archivio {
grid-template-columns: minmax(0, 1fr);
gap: 34px;
}
.slgn-archivio--sfalsato .slgn-archivio__carta:nth-child(2n) {
margin-top: 0;
}
.slgn-archivio .slgn-prog__quadro {
aspect-ratio: 3 / 4;
}
}
@media (prefers-reduced-motion: reduce) { .slgn-archivio .slgn-prog__video { display: none; }
.slgn-archivio .slgn-prog__quadro::after {
opacity: 0 !important;
animation: none !important;
}
.slgn-archivio__carta { transition: none; }
} .slgn-elenco--schede .slgn-archivio {
margin-inline: var(--v2-margine);
} .slgn-v2 .slgn-carta > .slgn-carta__sfondo {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.35);
pointer-events: none;
}
.slgn-v2 .slgn-carta:has(.slgn-carta__sfondo) { color: #fff; }
.slgn-v2 .slgn-carta:has(.slgn-carta__sfondo) .slgn-carta__testo p { color: #fff; }
.slgn-carta:has(.slgn-carta__sfondo) .slgn-carta__n,
.slgn-carta:has(.slgn-carta__sfondo) .slgn-carta__testo { position: relative; z-index: 1; }
.slgn-elenco__sfondo-mobile { display: none; }
@media (max-width: 760px), (hover: none), (pointer: coarse) {
.slgn-v2 .slgn-elenco__riga { isolation: isolate; }
.slgn-v2 .slgn-elenco__sfondo-mobile {
display: block;
position: absolute;
inset: 0;
z-index: -1;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
.slgn-elenco__sfondo-mobile img { width: 100%; height: 100%; object-fit: cover; }
.slgn-elenco__sfondo-mobile::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .68); }
.slgn-v2 .slgn-elenco__riga.is-foto-mobile { background: #111; color: #fff; }
.slgn-v2 .is-foto-mobile .slgn-elenco__sfondo-mobile { opacity: 1; }
.slgn-v2 .is-foto-mobile .slgn-elenco__titolo,
.slgn-v2 .is-foto-mobile .slgn-elenco__etichetta { color: #fff; opacity: 1; }
}  .slgn-v2 .slgn-contact { gap: clamp(36px, 6vw, 100px); align-items: start; }
.slgn-v2 .slgn-contact > * { min-width: 0; }
.slgn-v2 .slgn-form { gap: 28px; }
.slgn-v2 .slgn-form__grid { gap: 26px 24px; }
.slgn-v2 .slgn-form__grid > p { display: contents; }
.slgn-v2 .slgn-field { min-width: 0; gap: 10px; margin: 0; }
.slgn-v2 .slgn-field > span:first-child {
color: #d7d7d2;
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
}
.slgn-v2 .slgn-contact .wpcf7 :is(input[type="text"], input[type="email"], select, textarea) {
min-height: 56px;
padding: 15px 16px;
border: 1px solid #454545;
background: #151515 !important;
color: #f7f7f4 !important;
font-size: 16px;
letter-spacing: normal;
text-transform: none;
}
.slgn-v2 .slgn-contact .wpcf7 textarea { height: 180px; min-height: 160px; }
.slgn-v2 .slgn-contact .wpcf7 :is(input, select, textarea):focus-visible {
outline: 2px solid #f7f7f4;
outline-offset: 3px;
} .slgn-v2 .slgn-contact .pxl-select select {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
width: 100% !important;
height: auto !important;
pointer-events: auto;
appearance: auto;
}
.slgn-v2 .slgn-contact :is(.pxl-select-higthlight, .pxl-select-options) { display: none !important; }
.slgn-v2 .slgn-form__submit { display: flex; align-items: center; gap: 16px; }
.slgn-v2 .slgn-contact .wpcf7 input[type="submit"] {
min-height: 56px;
padding: 16px 30px;
font-size: 16px;
font-weight: 700;
transition: background-color .2s, color .2s;
}
.slgn-v2 .slgn-contact .wpcf7 input[type="submit"]:hover { background: #ccc; }
.slgn-v2 .slgn-contact .wpcf7-not-valid-tip { margin-top: 8px; font-size: 13px; letter-spacing: normal; text-transform: none; }
.slgn-v2 .slgn-contact .wpcf7-response-output { margin: 24px 0 0; padding: 16px; }
.slgn-v2 .slgn-company { padding-block: clamp(36px, 4vw, 64px); }
.slgn-v2 .slgn-company__title {
max-width: 900px;
margin: 10px 0 24px;
color: #f7f7f4;
font-family: var(--ws-display);
font-size: clamp(25px, 2.8vw, 40px);
font-weight: 600;
letter-spacing: -.055em;
line-height: .95;
}
.slgn-v2 .slgn-company__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid #4a4a48; }
.slgn-v2 .slgn-company__item { display: grid; gap: 6px; min-height: 78px; padding: 14px 0; border-bottom: 1px solid #4a4a48; }
.slgn-v2 .slgn-company__item:nth-child(odd) { padding-right: clamp(20px, 4vw, 64px); }
.slgn-v2 .slgn-company__item:nth-child(even) { padding-left: clamp(20px, 4vw, 64px); border-left: 1px solid #4a4a48; }
.slgn-v2 .slgn-company__item dt { color: #a7a7a2; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.slgn-v2 .slgn-company__item dd { margin: 0; color: #f7f7f4; font-size: clamp(14px, 1.1vw, 16px); line-height: 1.4; }
.slgn-v2 .slgn-company__item a { color: inherit; text-decoration-color: rgba(247,247,244,.42); text-underline-offset: .18em; }
.slgn-v2 .slgn-company__item a:hover { text-decoration-color: currentColor; }
@media (max-width: 600px) {
.slgn-v2 .slgn-form__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.slgn-v2 .slgn-form__submit { position: relative; }
.slgn-v2 .slgn-form__submit .wpcf7-spinner { position: absolute; right: 12px; margin: 0; }
.slgn-v2 .slgn-contact .wpcf7 input[type="submit"] { width: 100%; }
.slgn-v2 .slgn-company { padding-block: 32px; }
.slgn-v2 .slgn-company__list { grid-template-columns: minmax(0, 1fr); }
.slgn-v2 .slgn-company__item { min-height: 0; padding: 12px 0; }
.slgn-v2 .slgn-company__item:nth-child(odd),
.slgn-v2 .slgn-company__item:nth-child(even) { padding-inline: 0; border-left: 0; }
.slgn-v2 .slgn-company__item dd { font-size: 14px; }
} .slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) {
height: 100vh;
min-height: 100vh;
max-height: 100vh;
}
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__inner {
position: absolute;
top: 20%;
padding-top: 0;
padding-bottom: 0;
}
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
font-size: min(clamp(92px, 12.4vw, 238px), calc(100cqw / 3.72), 10vh);
}
@media (max-width: 900px) {
.slgn-v2 .slgn-hero--story:not(.slgn-hero--sito) .slgn-hero__title {
font-size: min(clamp(44px, 21.5vw, 142px), calc((100vw - 40px) / 6.5), 7.4vh);
}
}.slgn-cur {
--cur-anello: 32px;
--cur-punto: 6px;
--cur-tinta: #ece9e1;
--cur-ease: cubic-bezier(.22, .72, .2, 1);
position: fixed;
top: 0;
left: 0;
z-index: 2147483000;
pointer-events: none; opacity: 0;
transition: opacity .2s var(--cur-ease);
}
.slgn-cur.is-dentro { opacity: 1; }
.slgn-cur__punto,
.slgn-cur__anello {
position: absolute;
top: 0;
left: 0;
border-radius: 999px; will-change: transform;
}
.slgn-cur__punto {
width: var(--cur-punto);
height: var(--cur-punto);
margin: calc(var(--cur-punto) / -2) 0 0 calc(var(--cur-punto) / -2);
background: var(--cur-tinta);
transition: opacity .18s var(--cur-ease), transform .18s var(--cur-ease);
}
.slgn-cur__anello {
display: grid;
place-items: center;
width: var(--cur-anello);
height: var(--cur-anello);
margin: calc(var(--cur-anello) / -2) 0 0 calc(var(--cur-anello) / -2);
border: 1px solid var(--cur-tinta);
transition:
width .34s var(--cur-ease),
height .34s var(--cur-ease),
margin .34s var(--cur-ease),
border-radius .34s var(--cur-ease),
background-color .24s var(--cur-ease),
opacity .2s var(--cur-ease);
}
.slgn-cur__testo {
color: var(--cur-tinta);
font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
white-space: nowrap;
opacity: 0;
transform: scale(.9);
transition: opacity .2s var(--cur-ease), transform .2s var(--cur-ease);
} .slgn-cur--differenza { mix-blend-mode: difference; } .slgn-cur--fisso .slgn-cur__punto,
.slgn-cur--fisso .slgn-cur__anello {
box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}  .slgn-cur[data-stato="link"] .slgn-cur__anello {
width: calc(var(--cur-anello) * 1.5);
height: calc(var(--cur-anello) * 1.5);
margin: calc(var(--cur-anello) * -0.75) 0 0 calc(var(--cur-anello) * -0.75);
}
.slgn-cur[data-stato="link"] .slgn-cur__punto { transform: scale(.6); } .slgn-cur[data-stato="azione"] .slgn-cur__anello {
width: calc(var(--cur-anello) * 1.35);
height: calc(var(--cur-anello) * 1.35);
margin: calc(var(--cur-anello) * -0.675) 0 0 calc(var(--cur-anello) * -0.675);
background: var(--cur-tinta);
}
.slgn-cur[data-stato="azione"] .slgn-cur__punto { opacity: 0; } .slgn-cur[data-stato="apri"] .slgn-cur__anello {
width: 5.6rem;
height: 5.6rem;
margin: -2.8rem 0 0 -2.8rem;
background: var(--cur-tinta);
}
.slgn-cur[data-stato="apri"] .slgn-cur__punto { opacity: 0; }
.slgn-cur[data-stato="apri"] .slgn-cur__testo,
.slgn-cur[data-stato="trascina"] .slgn-cur__testo {
opacity: 1;
transform: none;
} .slgn-cur[data-stato="apri"] .slgn-cur__testo { color: #0d0d0d; } .slgn-cur[data-stato="trascina"] .slgn-cur__anello {
width: 5.2rem;
height: 5.2rem;
margin: -2.6rem 0 0 -2.6rem;
}
.slgn-cur[data-stato="trascina"] .slgn-cur__punto { opacity: 0; }
.slgn-cur[data-stato="trascina"] .slgn-cur__anello::before,
.slgn-cur[data-stato="trascina"] .slgn-cur__anello::after {
content: "";
position: absolute;
top: 50%;
width: 7px;
height: 7px;
margin-top: -4px;
border: solid var(--cur-tinta);
border-width: 1px 1px 0 0;
}
.slgn-cur[data-stato="trascina"] .slgn-cur__anello::before {
left: 10px;
transform: rotate(-135deg);
}
.slgn-cur[data-stato="trascina"] .slgn-cur__anello::after {
right: 10px;
transform: rotate(45deg);
} .slgn-cur[data-stato="testo"] .slgn-cur__anello {
width: 1px;
height: 1.5rem;
margin: -0.75rem 0 0 -0.5px;
border-radius: 0;
border-width: 0;
background: var(--cur-tinta);
}
.slgn-cur[data-stato="testo"] .slgn-cur__punto { opacity: 0; } .slgn-cur.is-premuto .slgn-cur__anello { transform: scale(.82); }
.slgn-cur.is-premuto .slgn-cur__punto { transform: scale(1.6); } .slgn-cur.is-fuori { opacity: 0; } html.slgn-cur-on,
html.slgn-cur-on * { cursor: none; } html.slgn-cur-on iframe,
html.slgn-cur-on embed,
html.slgn-cur-on object,
html.slgn-cur-on video[controls],
html.slgn-cur-on #wpadminbar,
html.slgn-cur-on #wpadminbar *,
html.slgn-cur-on [data-slgn-cursore="nativo"],
html.slgn-cur-on [data-slgn-cursore="nativo"] * { cursor: auto; }
html.slgn-cur-on input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
html.slgn-cur-on textarea,
html.slgn-cur-on [contenteditable="true"] { cursor: text; } html.slgn-cur-on a[href],
html.slgn-cur-on button,
html.slgn-cur-on [role="button"] { cursor: pointer; }  @media (hover: none), (pointer: coarse) {
.slgn-cur { display: none; }
html.slgn-cur-on, html.slgn-cur-on * { cursor: auto; }
} @media (prefers-reduced-motion: reduce) {
.slgn-cur__punto,
.slgn-cur__anello,
.slgn-cur__testo { transition: none !important; }
}
@media print {
.slgn-cur { display: none; }
}.slgn-vd {
position: relative;
display: block;
overflow: hidden;
background-color: #0b0b0c;
} .slgn-vd--fondo {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.slgn-vd__el {
display: block;
width: 100%;
height: 100%;
object-fit: cover; object-position: var(--slgn-vd-fuoco, 50% 50%);
}
@media (max-width: 780px) {
.slgn-vd__el {
object-position: var(--slgn-vd-fuoco-mobile, var(--slgn-vd-fuoco, 50% 50%));
}
}  .slgn-vd-girello {
position: absolute;
z-index: 6;
top: 50%;
left: 50%;
width: 34px;
height: 34px;
margin: -17px 0 0 -17px;
border: 2px solid rgba(255, 255, 255, .3);
border-top-color: rgba(255, 255, 255, .92);
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(0, 0, 0, .18);
pointer-events: none;
animation: slgn-vd-gira .82s linear infinite;
}
@keyframes slgn-vd-gira {
to { transform: rotate(360deg); }
} @media (prefers-reduced-motion: reduce) {
.slgn-vd-girello {
animation: none;
border-color: rgba(255, 255, 255, .45);
border-top-color: rgba(255, 255, 255, .45);
}
}