/* ============================================================ MSS Theme — global, header, footer, logo Palette: magenta #b10055 · teal #0087a8 · plum #2a0a1c · navy Font: Barlow ============================================================ */ :root { --mss-magenta: #b10055; --mss-magenta-deep: #7a003a; --mss-plum: #2a0a1c; --mss-teal: #0087a8; --mss-teal-dark: #006b86; --mss-navy: #0a1a4a; --mss-navy-deep: #05102e; --mss-pad: clamp(1.25rem, 6vw, 168px); --mss-content: 1200px; --mss-header-h: 172px; --mss-header-h-shrunk: 84px; --mss-badge-size: clamp(320px, 32vw, 480px); /* diametro del cerchio */ --mss-badge-aspect: 1; /* 1 = cerchio; >1 = ovale più largo che alto */ --mss-badge-exit-top: 0.45; /* quota di cerchio che esce sopra */ --mss-badge-exit-right: 0.35; /* quota di cerchio che esce a destra */ --mss-badge-logo: 50%; /* dimensione logo dentro il cerchio */ --mss-badge-logo-shift-x: 30%; /* traslazione logo verso sinistra */ --mss-badge-logo-shift-y: 62%; /* traslazione logo verso il basso */ --mss-pagebg-height: clamp(560px, 92vh, 1040px); /* altezza sfondo pagina + fade */ } html { scroll-behavior: smooth; /* Anchor targets clear the fixed (shrunk) header */ scroll-padding-top: calc(var(--mss-header-h-shrunk, 84px) + 1rem); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html { overflow-x: clip; } /* clip horizontal overflow on , NOT , so never becomes the containing block for fixed elements (which would break right/left positioning). */ body { background: var(--mss-magenta); color: #fff; font-family: "Barlow", -apple-system, system-ui, sans-serif; margin: 0; position: relative; } /* Page background: featured image at the top fading into magenta. Height is controlled here (--mss-pagebg-height), NOT by the first block. */ body.has-mss-pagebg::before { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--mss-pagebg-height, clamp(560px, 92vh, 1040px)); z-index: -1; pointer-events: none; background-image: linear-gradient(180deg, rgba(177,0,85,0) 45%, var(--mss-magenta) 88%), var(--mss-pagebg-img, none); background-size: cover; background-position: center top; background-repeat: no-repeat; transform: translate3d(0, var(--mss-parallax, 0px), 0); will-change: transform; } @media (prefers-reduced-motion: reduce) { body.has-mss-pagebg::before { transform: none; } } /* Fixed dark-plum veil at the very top of the viewport (not sticky: it never moves). Same z-index:-1 as the page background ::before, but ::after paints later in tree order → above the background image, still below ALL content. */ body.has-mss-pagebg::after { content: ""; position: fixed; inset: 0 0 auto 0; height: var(--mss-header-h, 172px); z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(42, 10, 28, .85) 0%, rgba(42, 10, 28, 0) 100%); } .mss-main { display: block; } /* Constrained content helper used by blocks */ .mss-container { max-width: var(--mss-content); margin-inline: auto; padding-inline: var(--mss-pad); box-sizing: border-box; } a { color: #fff; } /* ---------- Header ---------- */ .mss-header { position: fixed; inset: 0 0 auto 0; z-index: 100; padding: 2.5rem var(--mss-pad) 0; transition: padding .3s ease, background .3s ease; pointer-events: none; } .mss-header.is-shrunk { padding-top: .85rem; padding-bottom: .85rem; } /* White band lives on a pseudo-element: backdrop-filter/filter on .mss-header itself would turn the header into the containing block of its fixed descendants (off-canvas .mss-nav, ::before backdrop), confining them to the band. A pseudo has no descendants, so it is side-effect free. */ .mss-header::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 4px 22px rgba(0, 0, 0, .10); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .mss-header.is-shrunk::after { opacity: 1; } /* On the white veil the nav flips to dark for contrast */ .mss-header.is-shrunk .mss-nav a { color: var(--mss-plum); } .mss-header.is-shrunk .mss-nav__lang { color: var(--mss-teal-dark); opacity: 1; } .mss-header.is-shrunk .mss-logo__svg { filter: none; } /* Center menu + logo vertically inside the compact band */ .mss-header.is-shrunk .mss-header__inner { align-items: center; } .mss-header.is-shrunk .mss-nav { padding-top: 0; } .mss-header__inner { /* Align with the content cage: .mss-container is content-width 1200 minus its own side padding; the header already adds --mss-pad around this. */ max-width: calc(var(--mss-content, 1200px) - 2 * var(--mss-pad)); margin-inline: auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; pointer-events: auto; } .mss-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; padding-top: .5rem; } .mss-nav a { position: relative; font-weight: 600; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; opacity: .95; transition: opacity .2s ease, color .3s ease; } .mss-nav a:hover { opacity: 1; } .mss-nav__lang { opacity: .7; } /* Underline in primary colour on the current page / on-screen anchor. */ .mss-nav a.is-current, .mss-nav a.is-active { opacity: 1; } .mss-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 3px; border-radius: 2px; background: var(--mss-teal); transform: scaleX(0); transform-origin: left center; transition: transform .25s ease; } .mss-nav a:hover::after, .mss-nav a.is-current::after, .mss-nav a.is-active::after { transform: scaleX(1); } /* The language switch is not a page — no active underline, only hover. */ .mss-nav__lang.is-current::after, .mss-nav__lang.is-active::after { transform: scaleX(0); } /* Hamburger (hidden on desktop) */ .mss-nav-toggle { display: none; position: relative; z-index: 120; width: 46px; height: 46px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; pointer-events: auto; } /* All three bars share the exact button center; closed state offsets the outer ones by ±8px, open state only rotates → the X crosses dead center. */ .mss-nav-toggle span { position: absolute; left: 26%; right: 26%; top: calc(50% - 1.5px); height: 3px; border-radius: 2px; background: var(--mss-plum); transition: transform .3s ease, opacity .2s ease, background .3s ease; } .mss-nav-toggle span:nth-child(1) { transform: translateY(-8px); } .mss-nav-toggle span:nth-child(3) { transform: translateY(8px); } /* ---------- Band logo (shown only when the header is shrunk) ---------- */ .mss-logo { display: inline-flex; align-items: center; text-decoration: none; color: #fff; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .mss-logo__svg { display: block; width: 150px; height: auto; } .mss-header.is-shrunk .mss-logo { opacity: 1; visibility: visible; } /* ---------- Badge: white circle + centred logo + teal swoosh ---------- */ /* The art SVG's viewBox is the circle's bounding box, so the element box IS the circle and its centre IS the circle's centre — the logo, centred in the box, lands centred in the circle. No positional magic numbers. */ .mss-badge { position: fixed; height: var(--mss-badge-size); width: calc(var(--mss-badge-size) * var(--mss-badge-aspect)); /* Exit the corner: a share of the oval leaves above and to the right. */ top: calc(var(--mss-badge-size) * -1 * var(--mss-badge-exit-top)); right: calc(var(--mss-badge-size) * var(--mss-badge-aspect) * -1 * var(--mss-badge-exit-right)); z-index: 110; pointer-events: auto; transition: opacity .3s ease, transform .3s ease, visibility .3s ease; } .mss-badge__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; /* let the swoosh spill past the circle's bbox */ display: block; } .mss-badge__logo { position: absolute; inset: 0; display: grid; place-items: center; /* centre the logo on the circle */ } .mss-badge__logo-svg { display: block; width: var(--mss-badge-logo); height: auto; transform: translate(calc(-1 * var(--mss-badge-logo-shift-x)), var(--mss-badge-logo-shift-y)); } /* On scroll the badge gives way to the white band + small band logo */ .mss-header.is-shrunk .mss-badge { opacity: 0; visibility: hidden; transform: scale(.9); pointer-events: none; } /* ---------- Footer ---------- */ .mss-footer { background: var(--mss-teal); color: #fff; padding: 3.5rem var(--mss-pad) 1.5rem; } .mss-footer a { color: #fff; text-decoration: none; } .mss-footer a:hover { text-decoration: underline; } .mss-footer__inner { max-width: 1440px; margin-inline: auto; display: grid; grid-template-columns: clamp(170px, 18vw, 250px) 1fr auto; gap: 2rem clamp(2rem, 6vw, 6rem); align-items: center; } .mss-footer__logo { display: block; } .mss-footer__logo .mss-logo__svg { width: 100%; height: auto; } .mss-footer__name { margin: 0 0 1.5rem; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.5rem); } .mss-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; max-width: 820px; } .mss-footer__cols h3 { margin: 0 0 .1rem; font-size: 1.05rem; font-weight: 700; } .mss-footer__cols p { margin: 0; font-size: 1rem; line-height: 1.55; } .mss-footer__contact { font-weight: 700; } .mss-footer__legal { margin: 2rem 0 0; font-size: .98rem; line-height: 1.65; } .mss-footer__socials { display: flex; flex-direction: column; gap: .8rem; align-self: center; } .mss-footer__social { display: block; width: 34px; height: 34px; } .mss-footer__social svg { width: 100%; height: 100%; display: block; } .mss-footer__social-letter { display: grid; place-items: center; width: 100%; height: 100%; border: 2px solid #fff; border-radius: 6px; font-weight: 700; font-size: .95rem; } .mss-footer__bottom { max-width: 1440px; margin: 3.5rem auto 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .88rem; } .mss-footer__menu ul { list-style: none; display: flex; gap: 2.75rem; margin: 0; padding: 0; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { /* Veil height follows the (much shorter) mobile header */ body.has-mss-pagebg::after { height: 120px; } /* Header: flat logo left, hamburger right, off-canvas nav from the right. */ .mss-header { padding: 1rem var(--mss-pad); } .mss-header.is-shrunk { padding: .75rem var(--mss-pad); } .mss-header__inner { align-items: center; gap: 1rem; } .mss-badge { display: none; } /* Band logo (flat, no circles) always visible, left */ .mss-logo { opacity: 1; visibility: visible; order: -1; margin-right: auto; } .mss-logo__svg { width: clamp(150px, 44vw, 210px); } /* Hide the ring around "mss" → flat logo "senza cerchi" on mobile */ .mss-logo--band [id="Vector_3"] { display: none; } /* Over the hero (transparent header) the flat logo is all white; original plum/teal fills come back on the white shrunk band. */ .mss-logo__svg path { transition: fill .3s ease; } .mss-header:not(.is-shrunk) .mss-logo__svg path { fill: #fff; } /* In-flow flex item inside .mss-header__inner: rides the (already fixed) header, auto-centers with the logo, no containing-block issues, no JS. */ .mss-nav-toggle { display: flex; margin-left: auto; z-index: 130; } /* Over the hero (transparent header): white bars. On the white band: plum. */ .mss-nav-toggle span { background: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); } .mss-header.is-shrunk .mss-nav-toggle span { background: var(--mss-plum); filter: none; } .mss-header.nav-open .mss-nav-toggle span { background: #fff; filter: none; } .mss-header.nav-open .mss-nav-toggle span:nth-child(1) { transform: rotate(45deg); } .mss-header.nav-open .mss-nav-toggle span:nth-child(2) { opacity: 0; } .mss-header.nav-open .mss-nav-toggle span:nth-child(3) { transform: rotate(-45deg); } /* Off-canvas panel */ .mss-nav { position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: 1.6rem; padding: 6rem var(--mss-pad) 2rem; background: var(--mss-teal); box-shadow: -12px 0 44px rgba(0,0,0,.35); transform: translateX(100%); /* Hidden for real when closed: otherwise its box-shadow bleeds back into the viewport next to the hamburger. */ visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s; z-index: 110; overflow-y: auto; } .mss-header.nav-open .mss-nav { transform: translateX(0); visibility: visible; transition: transform .35s ease; } .mss-nav a { color: #fff; font-size: 1.15rem; opacity: 1; } .mss-nav__lang { opacity: .8; } /* The desktop "dark links on the white band" rules (.is-shrunk .mss-nav a { color: plum }, padding-top: 0) would make the links invisible on the plum off-canvas panel and glue them to the top. Re-assert panel colors. */ .mss-header.is-shrunk .mss-nav { padding-top: 6rem; } .mss-header.is-shrunk .mss-nav a { color: #fff; } .mss-header.is-shrunk .mss-nav__lang { color: #fff; opacity: .8; } /* Backdrop + lock scroll */ body.mss-nav-open { overflow: hidden; } .mss-header.nav-open::before { content: ""; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 105; pointer-events: auto; } /* Hero background gradient: taller + stronger fade on tall portrait screens */ body.has-mss-pagebg::before { height: var(--mss-pagebg-height-mobile, 78vh); background-image: linear-gradient(180deg, rgba(42,10,28,.15) 0%, rgba(177,0,85,0) 35%, var(--mss-magenta) 92%), var(--mss-pagebg-img, none); background-position: 30% top; } .mss-footer__inner { grid-template-columns: 1fr; } .mss-footer__logo { max-width: 210px; } .mss-footer__socials { flex-direction: row; } .mss-footer__bottom { margin-top: 2rem; flex-direction: column; align-items: flex-start; gap: .75rem; } .mss-footer__menu ul { gap: 1.75rem; } } @media (max-width: 600px) { .mss-nav-toggle { width: 40px; height: 40px; } .mss-footer__cols { grid-template-columns: 1fr; } }