/* ========================================================================== Biosintesi Craniosacrale Brand: deep petrol blue #0C3C51 · gold #D4AF37 · Palanquin Dark + Oxygen ========================================================================== */ /* ---------- Tokens ---------- */ :root { --petrol-900: #072532; --petrol-800: #0a3142; --petrol-700: #0c3c51; /* brand */ --petrol-600: #104e69; --petrol-050: #eef4f6; --gold: #d4af37; /* 5.61:1 su --petrol-700, 7.57:1 su --petrol-900 */ --gold-soft: #dec163; /* schiarito, per gli stati :hover */ --gold-deep: #826a1c; /* per i fondi chiari: 5.21:1 sul bianco, 4.69:1 su --petrol-050 */ --cream: #fafbfc; --ink: #0f222b; --muted: #5a686e; --line: rgba(12, 60, 81, 0.12); --line-dark: rgba(255, 255, 255, 0.14); --ff-head: "Palanquin Dark", "Trebuchet MS", sans-serif; --ff-body: Oxygen, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wrap: 1140px; --gap: clamp(1.25rem, 3vw, 2rem); --radius: 14px; --shadow: 0 18px 40px -24px rgba(7, 37, 50, 0.55); /* Lighter than --shadow, for the lift on hover. The resting shadows on panels and figures keep the full weight: only the transient state was heavy enough to make a card jump off the page. */ --shadow-hover: 0 10px 22px -18px rgba(7, 37, 50, 0.38); --shadow-lg: 0 32px 70px -32px rgba(7, 37, 50, 0.6); --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--ff-body); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--ff-head); font-weight: 600; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; } p { margin: 0 0 1.1em; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Utilities ---------- */ .wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; } .skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--gold); color: var(--petrol-900); padding: 0.75rem 1.25rem; font-weight: 700; border-radius: 0 0 8px 0; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } .eyebrow { font-size: 0.86rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); margin: 0 0 0.9rem; } /* --gold-deep is the bronze meant for light backgrounds; on the dark surfaces the eyebrow needs the bright gold. .hero, .page-hero and .cta are dark too but were not in this list, so their labels came out muddy — and .cta p was overriding the colour outright on specificity. */ .on-dark .eyebrow, .sec--dark .eyebrow, .hero .eyebrow, .page-hero .eyebrow, .cta .eyebrow { color: var(--gold); } .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--muted); max-width: 62ch; } .sec--dark .lead { color: rgba(255, 255, 255, 0.74); } .rule { width: 56px; height: 3px; background: var(--gold); border: 0; margin: 0 0 1.5rem; border-radius: 3px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--ff-body); font-weight: 700; font-size: 0.95rem; padding: 0.85rem 1.6rem; border-radius: 12px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); } .btn:hover { transform: translateY(-2px); } .btn--gold { background: var(--gold); color: var(--petrol-900); } .btn--gold:hover { background: var(--gold-soft); } .btn--ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .btn--ghost:hover { border-color: var(--gold); color: var(--gold); } .btn--dark { background: var(--petrol-700); color: #fff; } .btn--dark:hover { background: var(--petrol-600); } .btn--outline { border-color: var(--petrol-700); color: var(--petrol-700); } .btn--outline:hover { background: var(--petrol-700); color: #fff; } /* The forward motion used to come from a → sliding right on hover. That glyph is missing from Oxygen, so every platform substituted its own and it never matched the label. The rule now lives in the gold underline, which extends past the text instead: same cue, drawn by the page rather than by whatever font the system happened to pick. A border cannot animate its length, hence the pseudo element. */ .link-more { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.9rem; text-decoration: none; color: var(--petrol-700); padding-bottom: 4px; transition: color 0.2s var(--ease); } .link-more::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--gold); transition: width 0.25s var(--ease), background-color 0.2s var(--ease); } .link-more:hover::after { width: calc(100% + 0.8rem); } @media (prefers-reduced-motion: reduce) { .link-more::after { transition: background-color 0.2s var(--ease); } .link-more:hover::after { width: 100%; } } .link-more:hover { color: var(--petrol-600); } /* On dark surfaces the petrol blue is invisible: the link needs the gold. */ .sec--dark .link-more, .card--dark .link-more { color: var(--gold); } .sec--dark .link-more:hover, .card--dark .link-more:hover { color: var(--gold-soft); } .sec--dark .link-more:hover::after, .card--dark .link-more:hover::after { background: var(--gold-soft); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--petrol-700); } /* The divider runs the full width of the window, so a hard 1px border cut sharply against both edges. A gradient lets it fade out at the ends. */ .site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, var(--line-dark) 14%, var(--line-dark) 86%, rgba(255, 255, 255, 0) 100%); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; } .brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: #fff; } /* The mark is the cell itself, with no tile behind it: the original artwork is a bare oval. It carries the gold because the bar it sits on is petrol, and the petrol of the original would disappear into it. */ /* Riquadro quadrato. Inclinato di 30.3 gradi l'ovale occupa 91.2 x 97.1 del viewBox da 100, quindi il segno tocca il bordo in altezza e lascia un po' d'aria ai lati: e' l'ovale a decidere, non il riquadro. */ .brand__mark { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; transition: transform 0.25s var(--ease); } /* Il colore sta nell'SVG: un solo tracciato oro, col nucleo forato. Il foro lascia passare il fondo, quindi qui si vede il petrolio dell'intestazione. */ .brand__mark svg { width: 100%; height: 100%; display: block; } /* Hover only scales the tile; the glyph itself carries no transform. */ .brand:hover .brand__mark { transform: scale(1.06); } /* 1.5rem contro i 36px del segno. Il punto stretto e' la fascia fra i 901 e i ~1000px: li' restano 16px fra marchio e menu, ma erano 16 anche prima, con la parola piu' piccola — il menu va gia' su due righe per conto suo e si comprime, quindi ingrandire la parola non gli toglie niente. */ .brand__name { font-family: var(--ff-head); font-size: 1.5rem; line-height: 1.1; letter-spacing: 0.005em; } .nav-toggle { display: none; background: none; border: 0; padding: 0.5rem; cursor: pointer; color: #fff; width: 44px; height: 44px; } .nav-toggle span { display: block; height: 2px; background: currentColor; margin: 5px 0; transition: transform 0.25s var(--ease), opacity 0.2s; } .site-header.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header.is-open .nav-toggle span:nth-child(2) { opacity: 0; } .site-header.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav { display: flex; align-items: center; gap: 1.9rem; } .nav a { text-decoration: none; color: rgba(255, 255, 255, 0.82); font-size: 0.94rem; font-weight: 400; padding: 0.35rem 0; position: relative; transition: color 0.2s var(--ease); } .nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold); transition: right 0.25s var(--ease); } .nav a:hover { color: #fff; } .nav a:hover::after, .nav a[aria-current="page"]::after { right: 0; } .nav a[aria-current="page"] { color: #fff; } .nav .btn { color: var(--petrol-900); } .nav .btn::after { display: none; } @media (max-width: 900px) { .nav-toggle { display: block; } .nav { position: absolute; inset: 76px 0 auto; flex-direction: column; align-items: stretch; gap: 0; background: var(--petrol-800); padding: 0.5rem 1.25rem 1.5rem; border-bottom: 1px solid var(--line-dark); display: none; } .site-header.is-open .nav { display: flex; } .nav a { padding: 0.9rem 0; border-bottom: 1px solid var(--line-dark); font-size: 1.02rem; } .nav a::after { display: none; } .nav .btn { margin-top: 1rem; justify-content: center; border-bottom: 0; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; background: var(--petrol-700); color: #fff; padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3.5rem, 8vw, 6rem); } /* Only the cool glow at the bottom left remains: the gold blur that used to sit in the top right corner is gone. */ .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; width: 520px; height: 520px; left: -220px; bottom: -280px; background: radial-gradient(circle, rgba(16, 78, 105, 0.75) 0%, rgba(16, 78, 105, 0) 70%); } .hero .wrap { position: relative; z-index: 1; } .hero h1 { font-size: clamp(2rem, 5vw, 3.9rem); color: rgba(255, 255, 255, 0.92); } /* One line from tablet up. The size is driven by vw so the headline scales with the viewport instead of overflowing once nowrap forbids the break, and it is capped about 10% short of the column: the declared fallback face measures 1% wider than Palanquin Dark, and .hero clips rather than scrolls. The binding case is the English headline, the longer of the two: at the cap it measures 90% of the column, the Italian 84%. Lengthening either title means lowering these two numbers again, or the headline is cut off rather than wrapped. */ @media (min-width: 700px) { .hero h1 { white-space: nowrap; } } /* Below that it breaks in exactly one place, before the emphasised word, rather than wherever the box happens to run out. */ @media (max-width: 699px) { .hero h1 em { display: block; } /* A title built around a colon breaks there instead: breaking before the emphasised word would leave "che" alone at the end of a line. */ .hero h1.h1--colon em { display: inline; } .hero h1.h1--colon span { display: block; } } .hero h1 em { font-style: normal; color: var(--gold); } .hero__tag { font-size: clamp(1rem, 2vw, 1.35rem); color: var(--gold); letter-spacing: 0.01em; margin-bottom: 1.4rem; } .hero__text { color: rgba(255, 255, 255, 0.76); max-width: 56ch; font-size: 1.08rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; } .hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: 2.2rem; border-top: 1px solid var(--line-dark); } .stat b { display: block; font-family: var(--ff-head); font-size: clamp(1.7rem, 3.2vw, 2.3rem); color: var(--gold); line-height: 1; } .stat span { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); } /* ---------- Page hero (inner pages) ---------- */ .page-hero { background: var(--petrol-700); color: #fff; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; } .page-hero .wrap { position: relative; z-index: 1; } .page-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); color: rgba(255, 255, 255, 0.94); max-width: 18ch; } .page-hero p { color: rgba(255, 255, 255, 0.74); max-width: 60ch; margin-bottom: 0; } .crumbs { font-size: 0.84rem; letter-spacing: 0.11em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 1.1rem; } .crumbs a { text-decoration: none; color: var(--gold); } .crumbs a:hover { text-decoration: underline; } /* ---------- Sections ---------- */ .sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; } .sec--tint { background: var(--petrol-050); } .sec--dark { background: var(--petrol-800); color: #fff; } .sec--dark h2, .sec--dark h3 { color: rgba(255, 255, 255, 0.94); } .sec__head { max-width: 64ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .sec__head h2 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); } .sec__head--center { margin-inline: auto; text-align: center; } .sec__head--center .rule { margin-inline: auto; } .sec__head--center .lead { margin-inline: auto; } /* ---------- Grids & cards ---------- */ .grid { display: grid; gap: var(--gap); } /* 300px let a third column squeeze in at full width, so four cards landed 3 + 1. min(100%, 420px) keeps it honestly two-up, one-up on mobile. */ .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); } .grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 2.5vw, 2rem); display: flex; flex-direction: column; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: rgba(12, 60, 81, 0.25); } .card h3 { font-size: 1.3rem; margin-bottom: 0.4rem; } .card p { color: var(--muted); font-size: 0.98rem; margin-bottom: 1.2rem; } .card .link-more { margin-top: auto; align-self: flex-start; } .card__icon { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; background: var(--petrol-050); color: var(--petrol-700); margin-bottom: 1.1rem; border: 1px solid var(--line); } .card__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .card:hover .card__icon { background: var(--gold); color: var(--petrol-900); border-color: var(--gold); } .card--dark { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); } .card--dark p { color: rgba(255, 255, 255, 0.7); } .card--dark:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(212, 175, 55, 0.45); } /* ---------- Service detail blocks ---------- */ .service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding: clamp(2.5rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--line); } .service:last-child { border-bottom: 0; } @media (max-width: 820px) { .service { grid-template-columns: 1fr; } } .service__num { font-family: var(--ff-head); font-size: 0.9rem; letter-spacing: 0.2em; color: var(--gold-deep); margin-bottom: 0.6rem; } .service h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); } .service ul { display: grid; gap: 0.65rem; margin-top: 1.4rem; } .service li { position: relative; padding-left: 1.9rem; color: var(--muted); font-size: 0.98rem; } .service li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 9px; height: 9px; border-radius: 3px; background: var(--gold); } .service__panel { background: var(--petrol-700); color: #fff; border-radius: var(--radius); padding: clamp(1.8rem, 3.5vw, 2.6rem); box-shadow: var(--shadow); position: relative; overflow: hidden; } .service__panel::after { content: ""; position: absolute; width: 300px; height: 300px; right: -120px; bottom: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, rgba(212, 175, 55, 0) 70%); } .service__panel h3 { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.05em; text-transform: uppercase; } .service__panel dl { margin: 0; display: grid; gap: 1.1rem; position: relative; z-index: 1; } .service__panel dt { font-weight: 700; font-size: 0.95rem; color: #fff; } .service__panel dd { margin: 0.15rem 0 0; color: rgba(255, 255, 255, 0.72); font-size: 0.93rem; } /* ---------- Process ---------- */ .steps { counter-reset: step; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .step { position: relative; padding-top: 2.6rem; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--ff-head); font-size: 1.6rem; color: var(--gold); } .step::after { content: ""; position: absolute; top: 1.1rem; left: 3rem; right: 0; height: 1px; background: var(--line-dark); } .sec:not(.sec--dark) .step::after { background: var(--line); } .step h3 { font-size: 1.15rem; margin-bottom: 0.3rem; } .step p { font-size: 0.95rem; color: var(--muted); margin: 0; } .sec--dark .step p { color: rgba(255, 255, 255, 0.7); } /* ---------- Split (about) ---------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 820px) { .split { grid-template-columns: 1fr; } } .facts { display: grid; gap: 0; border-top: 1px solid var(--line); } .facts div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); } .facts dt { color: var(--muted); font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; } .facts dd { margin: 0; font-weight: 700; text-align: right; } .values { display: grid; gap: 1.4rem; } .value { padding-left: 1.5rem; border-left: 3px solid var(--gold); } .value h3 { font-size: 1.1rem; margin-bottom: 0.25rem; } .value p { margin: 0; color: var(--muted); font-size: 0.97rem; } .sec--dark .value p { color: rgba(255, 255, 255, 0.7); } /* ---------- CTA band ---------- */ .cta { background: linear-gradient(135deg, var(--petrol-700) 0%, var(--petrol-900) 100%); color: #fff; text-align: center; padding: clamp(3rem, 7vw, 5rem) 0; } .cta h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); color: rgba(255, 255, 255, 0.95); max-width: 22ch; margin-inline: auto; } .cta p { color: rgba(255, 255, 255, 0.74); max-width: 52ch; margin-inline: auto; } .cta .hero__actions { justify-content: center; } /* ---------- Contact ---------- */ .contact-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } } .form { display: grid; gap: 1.15rem; } .field { display: grid; gap: 0.4rem; } .field label { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--petrol-700); } .field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; width: 100%; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .field textarea { min-height: 150px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--petrol-700); box-shadow: 0 0 0 3px rgba(12, 60, 81, 0.12); } .field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; } @media (max-width: 620px) { .field--row { grid-template-columns: 1fr; } } .form__note { font-size: 0.85rem; color: var(--muted); margin: 0; } .form__status { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--petrol-700); } .form__status[hidden] { display: none !important; } .info-card { background: var(--petrol-700); color: #fff; border-radius: var(--radius); padding: clamp(1.7rem, 3vw, 2.3rem); box-shadow: var(--shadow); } .info-card h2 { color: var(--gold); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; } .info-card dl { margin: 1.5rem 0 0; display: grid; gap: 1.3rem; } .info-card dt { font-size: 0.8rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.2rem; } .info-card dd { margin: 0; } .info-card a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--gold); } .info-card a:hover { color: var(--gold); } .info-card address { font-style: normal; color: rgba(255, 255, 255, 0.85); } /* ---------- FAQ ---------- */ .faq { display: grid; gap: 0.75rem; max-width: 820px; } .faq details { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.3rem; } .faq summary { cursor: pointer; font-family: var(--ff-head); font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--gold-deep); font-size: 1.5rem; line-height: 1; } .faq details[open] summary::after { content: "\2013"; } .faq p { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.97rem; } /* ---------- Footer ---------- */ .site-footer { background: var(--petrol-900); color: rgba(255, 255, 255, 0.72); padding: clamp(3rem, 6vw, 4.5rem) 0 0; } .site-footer .brand { margin-bottom: 1rem; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; } @media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } } .site-footer h2 { font-size: 0.85rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .site-footer p { font-size: 0.93rem; } .site-footer li { margin-bottom: 0.6rem; } .site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 0.93rem; } .site-footer a:hover { color: var(--gold); } .site-footer address { font-style: normal; font-size: 0.93rem; line-height: 1.7; } .footer-bottom { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: 1.4rem 0; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; font-size: 0.82rem; color: rgba(255, 255, 255, 0.57); } /* ---------- Reveal on scroll ---------- Guarded by .js on : with JavaScript disabled or broken, every block stays visible instead of vanishing. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } } /* ---------- Project cards (Work) ---------- */ .card__tag { font-size: 0.78rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 700; color: var(--gold-deep); margin: 0 0 0.55rem; } .card--dark .card__tag { color: var(--gold); } .card__host { font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; word-break: break-word; } .card--dark .card__host { color: rgba(255, 255, 255, 0.55); } .card__quote { font-style: italic; color: var(--petrol-700); font-size: 0.95rem; border-left: 3px solid var(--gold); padding-left: 0.9rem; margin: 0 0 1rem; } .card--dark .card__quote { color: rgba(255, 255, 255, 0.85); } /* Compact list of properties on the home page */ .roster { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .roster a { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; text-decoration: none; padding: 0.85rem 1rem; border: 1px solid var(--line-dark); border-radius: 10px; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), transform 0.2s var(--ease); } .roster a:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.05); transform: translateY(-2px); } .roster b { font-family: var(--ff-head); font-weight: 600; font-size: 1rem; color: #fff; } .roster span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.6); } /* Aside note / callout */ .note { border: 1px dashed var(--line); border-radius: var(--radius); padding: clamp(1.3rem, 2.5vw, 1.8rem); background: #fff; } .note p:last-child { margin-bottom: 0; } /* ---------- Masked email ---------- */ .mail-block { text-align: center; padding: clamp(2rem, 5vw, 3.5rem) 0; } .mail-block .eyebrow { margin-bottom: 0.6rem; } .mail { display: inline-block; font-family: var(--ff-head); font-weight: 600; font-size: clamp(1.4rem, 4.5vw, 2.6rem); color: var(--petrol-700); text-decoration: none; border-bottom: 3px solid var(--gold); padding-bottom: 0.15em; word-break: break-word; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .mail:hover { color: var(--petrol-600); border-color: var(--gold-deep); } .sec--dark .mail, .info-card .mail { color: var(--gold); } .sec--dark .mail:hover, .info-card .mail:hover { color: var(--gold-soft); } .mail-block p.lead { margin: 1.4rem auto 0; } .mail-fallback { font-family: var(--ff-body); font-size: 1rem; color: var(--muted); } /* ---------- Product page (Pixel Radar) ---------- */ .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0; } .badge { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.24); color: rgba(255, 255, 255, 0.82); } .badge--gold { border-color: var(--gold); color: var(--gold); } .platforms { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .platform-group h3 { font-size: 0.86rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); } .platform-group ul { display: grid; gap: 0.45rem; } .platform-group li { font-size: 0.97rem; color: var(--ink); display: flex; gap: 0.6rem; align-items: baseline; } .platform-group li::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 2px; background: var(--gold); } .platform-group small { display: block; color: var(--muted); font-size: 0.85rem; } .specs { display: grid; gap: 0; border-top: 1px solid var(--line-dark); max-width: 720px; } .specs > div { display: flex; justify-content: space-between; gap: 1.5rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line-dark); } .specs dt { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; } .specs dd { margin: 0; text-align: right; color: #fff; font-weight: 700; font-size: 0.93rem; } .specs code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.86rem; font-weight: 400; } .callout { border-left: 4px solid var(--gold); background: rgba(255, 255, 255, 0.05); padding: clamp(1.3rem, 3vw, 2rem); border-radius: 0 var(--radius) var(--radius) 0; } .callout p { color: rgba(255, 255, 255, 0.82); } .callout p:last-child { margin-bottom: 0; } .sec:not(.sec--dark) .callout { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); } .sec:not(.sec--dark) .callout p { color: var(--ink); } /* ---------- Long-form prose (privacy page) ---------- */ .prose { max-width: 74ch; } .prose h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin-top: 2.6rem; margin-bottom: 0.7rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .prose h2:first-of-type { margin-top: 1rem; padding-top: 0; border-top: 0; } .prose h3 { font-size: 1.05rem; margin-top: 1.7rem; margin-bottom: 0.35rem; } .prose p, .prose li { color: var(--ink); } .prose ul { display: grid; gap: 0.6rem; margin: 0 0 1.1em; } .prose ul li { position: relative; padding-left: 1.5rem; } .prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 2px; background: var(--gold); } .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--petrol-050); padding: 0.12em 0.4em; border-radius: 4px; border: 1px solid var(--line); word-break: break-word; } .prose .updated { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 700; } .prose address { font-style: normal; } /* ---------- Small utilities ---------- These exist so no style="" attribute survives in the markup: that lets the Content-Security-Policy in _headers drop 'unsafe-inline' for styles. */ .mt-block { margin-top: 2rem; } .footnote { font-size: 0.93rem; } /* ========================================================================== Biosintesi additions The pages below need a few components the base system did not carry: a dropdown menu (the original site nests three menus), dated course listings, a historical timeline and an explicitly negative bullet list. ========================================================================== */ /* ---------- Dropdown navigation ---------- */ /* The panel hangs from top:100% of this wrapper. Left at its natural height it ended a few pixels above the bar's lower edge, and the header's own divider ran straight across the open panel. Stretched to the full bar height the panel starts exactly where that line ends, so the line reads as its top edge — which is why .subnav carries no border-top. */ .nav { align-self: stretch; } .nav .has-sub { position: relative; align-self: stretch; display: flex; align-items: center; } .nav .has-sub > button { display: inline-flex; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0.35rem 0; cursor: pointer; font: inherit; font-size: 0.94rem; color: rgba(255, 255, 255, 0.82); transition: color 0.2s var(--ease); position: relative; } .nav .has-sub > button::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold); transition: right 0.25s var(--ease); } .nav .has-sub:hover > button, .nav .has-sub.is-open > button { color: #fff; } .nav .has-sub:hover > button::after, .nav .has-sub.is-open > button::after, .nav .has-sub.is-current > button::after { right: 0; } .nav .has-sub.is-current > button { color: #fff; } /* While the panel is showing, the trigger takes the panel's own background so the two read as one surface rather than a label floating on the bar. It uses the same -1.15rem side inset as .subnav, so the two left edges line up, and z-index lifts it over the header's divider — which therefore breaks exactly where the menu hangs open. */ .nav .has-sub::before { content: ""; position: absolute; z-index: 2; /* Reaches --radius below the bar so it covers the panel's rounded top corners on the flush side: cap and panel then read as one shape with no notch. pointer-events:none because the strip hangs over the page even when the menu is closed, and would otherwise open it on a stray hover. */ inset: 0 -1.15rem -14px; border-radius: var(--radius) var(--radius) 0 0; pointer-events: none; } .nav .has-sub.is-open::before { background: var(--petrol-800); } @media (hover: hover) { .nav .has-sub:hover::before { background: var(--petrol-800); } } .nav .has-sub > button { z-index: 3; } /* label and caret stay above the cap */ .nav .caret { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform 0.2s var(--ease); } .nav .has-sub.is-open .caret { transform: rotate(180deg); } .subnav { position: absolute; top: 100%; left: -1.15rem; /* max-content sizes the panel to its longest label: at a fixed 280px the longer entries wrapped onto a second line and the list lost its rhythm. The cap catches the pathological case on a narrow window. */ width: max-content; max-width: min(26rem, calc(100vw - 2rem)); background: var(--petrol-800); /* No border: the colour and the shadow separate it well enough on a dark page, and a border left a visible seam where the cap overlaps the top. */ border: 0; border-radius: var(--radius); padding: 0.45rem; display: none; z-index: 1; /* --shadow-lg is tinted petrol for light surfaces; over a dark header only a neutral shadow actually separates the panel from the page. */ box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.7); } .nav .has-sub.is-open .subnav { display: block; } @media (hover: hover) { .nav .has-sub:hover .subnav { display: block; } } /* The rightmost menu would push its panel past the window edge, so it hangs from its right edge instead. */ .nav .has-sub:last-of-type .subnav { left: auto; right: -1.15rem; } .subnav a { display: block; padding: 0.55rem 1.1rem 0.55rem 0.7rem; border-radius: 8px; font-size: 0.92rem; line-height: 1.4; /* body line-height left the items floating */ color: rgba(255, 255, 255, 0.78); } .subnav a::after { display: none; } .subnav a:hover, .subnav a:focus-visible { background: rgba(255, 255, 255, 0.07); color: var(--gold); } .subnav a[aria-current="page"] { color: var(--gold); background: rgba(212, 175, 55, 0.08); } @media (max-width: 900px) { .nav .has-sub { position: static; display: block; } .nav .has-sub::before { display: none; } .nav .has-sub > button { width: 100%; justify-content: space-between; padding: 0.9rem 0; border-bottom: 1px solid var(--line-dark); font-size: 1.02rem; } .nav .has-sub > button::after { display: none; } .subnav { position: static; width: auto; max-width: none; border: 0; border-radius: 0; background: rgba(0, 0, 0, 0.18); box-shadow: none; padding: 0.25rem 0 0.6rem 0.9rem; } /* Hovering a touch target would open every menu at once on tap, so on small screens the panels stay strictly click-driven. */ .nav .has-sub:hover .subnav { display: none; } .nav .has-sub.is-open .subnav { display: block; } .nav .has-sub:last-of-type .subnav { right: auto; } .subnav a { border-bottom: 0; padding: 0.55rem 0.5rem; white-space: normal; } } /* ---------- Brand mark for Biosintesi ---------- */ /* ---------- Dated course list (calendar) ---------- */ .dates { display: grid; gap: 0.75rem; } .date-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem 1.5rem; align-items: center; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.4rem; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .date-row:hover { transform: translateX(3px); box-shadow: var(--shadow-hover); } .sec--dark .date-row { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); border-left-color: var(--gold); } /* Fluid: the short course codes (TCS1/2/3) want presence on a wide screen, but the long seminar titles share this class and a flat bump cost one of them an extra line on a phone. The floor keeps small screens as they were. */ .date-row__name { font-family: var(--ff-head); font-size: clamp(1.1rem, 1.7vw, 1.4rem); font-weight: 600; } .sec--dark .date-row__name { color: #fff; } .date-row__place { font-size: 0.82rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.25rem; } .sec--dark .date-row__place { color: rgba(255, 255, 255, 0.55); } /* A confirmed date is a solid gold pill, the same treatment as the buttons, on light and dark sections alike: the component should look the same wherever it lands. Dark text on the gold reads at 7.57:1. A date still to be fixed stays muted, which is what tells the two apart at a glance. */ .date-row__when { font-weight: 700; font-size: 0.95rem; color: var(--petrol-900); background: var(--gold); border-radius: 12px; padding: 0.4rem 1rem; white-space: nowrap; /* same radius as the buttons */ } .date-row__when--tbd { color: var(--muted); background: rgba(12, 60, 81, 0.06); } .sec--dark .date-row__when--tbd { color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.07); } @media (max-width: 560px) { .date-row { grid-template-columns: 1fr; } .date-row__when { justify-self: start; } } /* ---------- Timeline (history page) ---------- */ .timeline { display: grid; gap: 0; max-width: 78ch; margin: 0; padding-left: 1.9rem; border-left: 2px solid var(--line); } .timeline > div { position: relative; padding: 0 0 2.2rem 0; } .timeline > div:last-child { padding-bottom: 0; } .timeline > div::before { content: ""; position: absolute; left: calc(-1.9rem - 7px); top: 0.45em; width: 12px; height: 12px; border-radius: 4px; background: var(--gold); border: 2px solid var(--cream); } .timeline dt { font-family: var(--ff-head); font-weight: 600; font-size: 1.05rem; color: var(--petrol-700); margin-bottom: 0.35rem; } .timeline dd { margin: 0; color: var(--ink); } .timeline dd p:last-child { margin-bottom: 0; } /* ---------- Negative list (Tecnica ZERO) ---------- */ .no-list { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 1.5rem 0 0; } .no-list li { position: relative; padding-left: 2rem; color: var(--ink); font-size: 0.97rem; } .no-list li::before { content: "\00d7"; position: absolute; left: 0.35rem; top: -0.1em; color: var(--gold-deep); font-size: 1.2rem; font-weight: 700; line-height: 1.5; } .sec--dark .no-list li { color: rgba(255, 255, 255, 0.8); } .sec--dark .no-list li::before { color: var(--gold); } /* ---------- Link directory ---------- */ .links { display: grid; gap: 0.9rem; } /* Due colonne esatte da tablet in su, una sola sul telefono. Due e non "quante ce ne stanno": con auto-fit la stessa regola ne produceva tre sul desktop. */ @media (min-width: 700px) { .links { grid-template-columns: 1fr 1fr; } } /* Le voci con una descrizione restano incolonnate: un paragrafo in mezza colonna diventa una striscia stretta e alta. */ .links.links--prose { grid-template-columns: 1fr; } .links > li { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem 1.4rem; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .links > li:hover { border-color: rgba(12, 60, 81, 0.28); transform: translateY(-2px); box-shadow: var(--shadow-hover); } .links b { font-family: var(--ff-head); font-weight: 600; font-size: 1.08rem; display: block; } .links a.site { display: inline-block; margin-top: 0.15rem; font-size: 0.9rem; font-weight: 700; color: var(--petrol-700); text-decoration: none; border-bottom: 2px solid var(--gold); word-break: break-word; } .links a.site:hover { color: var(--petrol-600); } .links p { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.95rem; } /* ---------- Figures ---------- */ /* No caption any more, so no white plate showing under the image: the card is just the photo, clipped and shadowed. */ .figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .figure img { width: 100%; height: auto; display: block; } .portrait { width: min(100%, 200px); border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lg); margin: 0 0 1.8rem; } .portrait img { width: 100%; height: auto; } /* ---------- Newsletter form in the footer ---------- */ .newsletter { display: grid; gap: 0.7rem; margin-top: 0.4rem; } .newsletter input[type="email"], .newsletter input[type="text"] { font: inherit; font-size: 0.95rem; width: 100%; padding: 0.7rem 0.9rem; border-radius: 10px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.06); color: #fff; } .newsletter input::placeholder { color: rgba(255, 255, 255, 0.45); } .newsletter input:focus { outline: 0; border-color: var(--gold); background: rgba(255, 255, 255, 0.1); } .newsletter .consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); } .newsletter .consent input { margin-top: 0.25rem; accent-color: var(--gold); flex: 0 0 auto; } .newsletter button { justify-content: center; } /* ---------- Alert / status panel ---------- */ .alert { border-left: 4px solid var(--gold); background: var(--petrol-050); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.1rem 1.4rem; margin: 0 0 1.6rem; } .alert p:last-child { margin-bottom: 0; } /* ---------- Big confirmation mark (thank-you page) ---------- */ .tick { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--petrol-900); margin: 0 auto 1.6rem; } .tick svg { width: 42px; height: 42px; stroke: currentColor; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } /* Centred heads sometimes carry a button row underneath. */ .sec__head--center .hero__actions { justify-content: center; margin-top: 2rem; } /* Bulleted list, gold square markers. Same look as the list inside .service, but usable on its own: .service itself is the two-column block layout and putting it on a