/* ========================================================================== masitto.net — design system (Fase 2) Stile "moderno con colore": base chiara, un accento vivace per pagina. L'accento si imposta con --accent (override per-membro nel ). ========================================================================== */ :root { --accent: #2563eb; --accent-ink: #ffffff; --bg: #ffffff; --bg-soft: #f6f6f7; --bg-tint: color-mix(in srgb, var(--accent) 8%, #ffffff); --fg: #17181c; --fg-soft: #5b5f68; --border: #e5e6e9; --border-tint: color-mix(in srgb, var(--accent) 22%, #e5e6e9); --ok: #15803d; --ko: #b91c1c; --warn: #b45309; --maxw: 66rem; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(16,18,24,.06), 0 8px 24px -12px rgba(16,18,24,.18); --space: clamp(1rem, .6rem + 2vw, 2rem); --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --accent-ink: #0b0c0f; --bg: #101216; --bg-soft: #171a1f; --bg-tint: color-mix(in srgb, var(--accent) 16%, #101216); --fg: #eef0f3; --fg-soft: #a2a7b0; --border: #2b2f37; --border-tint: color-mix(in srgb, var(--accent) 34%, #2b2f37); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.6); } } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); font-size: 1rem; line-height: 1.65; color: var(--fg); background: var(--bg); display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; } h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; letter-spacing: -.01em; } h1 { font-size: clamp(1.9rem, 1.3rem + 3vw, 3rem); } h2 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); } h3 { font-size: 1.15rem; } p { margin: 0 0 1rem; } a { color: var(--accent); text-underline-offset: 2px; } a:hover { text-decoration: none; } img { display: block; max-width: 100%; height: auto; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space); } .section { padding-block: clamp(2rem, 1.2rem + 4vw, 4rem); } .section--tint { background: var(--bg-tint); } .section__head { max-width: 42rem; margin-bottom: 1.75rem; } .section__head p { color: var(--fg-soft); margin: 0; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .4rem; } /* Accessibilità */ .skip-link { position: absolute; left: -999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--bg); color: var(--fg); padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); } :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; } /* ------------------------------ header ---------------------------------- */ .site-header { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; } .brand { font-weight: 800; font-size: 1.1rem; color: var(--fg); text-decoration: none; } .brand span { color: var(--fg-soft); font-weight: 500; } .nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .nav a { padding: .35rem .6rem; border-radius: 999px; font-size: .9rem; color: var(--fg-soft); text-decoration: none; } .nav a:hover { background: var(--bg-soft); color: var(--fg); } .nav a[aria-current="page"] { background: var(--bg-soft); color: var(--fg); font-weight: 600; } .lang-switch { display: flex; gap: .15rem; margin-left: .35rem; padding-left: .55rem; border-left: 1px solid var(--border); } .lang-switch a { padding: .3rem .5rem; border-radius: 8px; font-size: .82rem; font-weight: 600; color: var(--fg-soft); text-decoration: none; } .lang-switch a[aria-current="true"] { background: var(--accent); color: var(--accent-ink); } /* ------------------------------ buttons -------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 999px; font: inherit; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--fg); transition: transform .05s ease, background .15s ease, border-color .15s ease; } .btn:hover { border-color: var(--border-tint); background: var(--bg-soft); } .btn:active { transform: translateY(1px); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn--accent:hover { background: color-mix(in srgb, var(--accent) 88%, #000); } .btn--block { width: 100%; justify-content: center; } /* ------------------------------ hero ---------------------------------- */ .hero { padding-block: clamp(2.5rem, 1.5rem + 6vw, 5.5rem); } .hero .lead { font-size: 1.2rem; color: var(--fg-soft); max-width: 44rem; } /* --------------------------- member grid ----------------------------- */ .member-grid { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .member-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .member-grid { grid-template-columns: 1fr; } } .member-card { --card: var(--accent); display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid color-mix(in srgb, var(--card) 25%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--card) 8%, var(--bg)); text-decoration: none; color: var(--fg); box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; } .member-card:hover { transform: translateY(-3px); } .member-card__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: color-mix(in srgb, var(--card) 22%, var(--bg)); display: grid; place-items: center; font-weight: 800; color: color-mix(in srgb, var(--card) 75%, var(--fg)); } .member-card__name { font-weight: 700; font-size: 1.1rem; } .member-card__role { color: var(--fg-soft); font-size: .9rem; } .member-card__more { margin-top: auto; font-weight: 600; font-size: .9rem; color: color-mix(in srgb, var(--card) 70%, var(--fg)); } /* --------------------------- member page ---------------------------- */ .member-head { padding-block: clamp(2rem, 1.2rem + 4vw, 3.5rem); background: var(--bg-tint); } .member-head__inner { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .member-head__avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; background: color-mix(in srgb, var(--accent) 20%, var(--bg)); display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; color: color-mix(in srgb, var(--accent) 75%, var(--fg)); } .member-head__role { color: var(--fg-soft); margin: 0; } .member-head h1 { margin-bottom: .15rem; } .socials { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; } .socials a { font-size: .85rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--border); color: var(--fg-soft); text-decoration: none; } .socials a:hover { border-color: var(--border-tint); color: var(--fg); } /* --------------------------- cards lists --------------------------- */ .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } .card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.15rem; background: var(--bg); } .card h3 { display: flex; align-items: center; gap: .5rem; } .card__icon { font-size: 1.15rem; } .card p { color: var(--fg-soft); margin: .35rem 0 0; } .card__link { display: inline-block; margin-top: .7rem; font-weight: 600; font-size: .9rem; } .badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 999px; border: 1px solid var(--border-tint); color: var(--fg-soft); } .badge--in_corso { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); } .badge--concluso { color: var(--fg-soft); } .badge--attivo { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); } .empty { color: var(--fg-soft); font-style: italic; } /* ------------------------------ forms ----------------------------- */ .form { display: grid; gap: 1rem; max-width: 38rem; } .form__row { display: grid; gap: 1rem; } @media (min-width: 32rem) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: .35rem; } .field > label { font-weight: 600; font-size: .92rem; } .field .hint { color: var(--fg-soft); font-size: .82rem; } .field input, .field textarea { font: inherit; color: var(--fg); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .65rem .75rem; width: 100%; } .field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; } .field textarea { min-height: 8rem; resize: vertical; } .field--error input, .field--error textarea { border-color: var(--ko); } .field__err { color: var(--ko); font-size: .82rem; } .check { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; } .check input { margin-top: .2rem; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .alert { padding: .85rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-soft); font-size: .92rem; } .alert--ok { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); color: var(--ok); } .alert--ko { border-color: color-mix(in srgb, var(--ko) 45%, var(--border)); color: var(--ko); } /* ------------------------------ footer ---------------------------- */ .site-footer { margin-top: auto; border-top: 1px solid var(--border); color: var(--fg-soft); font-size: .88rem; padding-block: 1.6rem; } .site-footer__inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .site-footer a { color: var(--fg-soft); } /* ------------------------------ prose ---------------------------- */ .prose { max-width: 42rem; } .prose h2 { margin-top: 2rem; } .stack > * + * { margin-top: 2.5rem; } /* Pillole della sezione Contatti: stesso colore delle schede membro */ .contact-chips { display: flex; flex-wrap: wrap; gap: .6rem; } .contact-chip { --card: var(--accent); font-weight: 600; border-color: color-mix(in srgb, var(--card) 30%, var(--border)); background: color-mix(in srgb, var(--card) 10%, var(--bg)); color: color-mix(in srgb, var(--card) 72%, var(--fg)); } .contact-chip:hover { background: color-mix(in srgb, var(--card) 18%, var(--bg)); border-color: color-mix(in srgb, var(--card) 48%, var(--border)); color: color-mix(in srgb, var(--card) 82%, var(--fg)); } /* Titolo di sezione: mantiene il peso visivo anche come

/ .sectionhead h1 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); } / Pagina membro: sezioni Servizi / Progetti / Contatti a tab / .member-bio { max-width: 42rem; margin-bottom: 2.25rem; } .mtabsnav { display: flex; gap: .1rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1.75rem; } .mtabsnav a { padding: .7rem 1.05rem; font-weight: 600; text-decoration: none; color: var(--fg-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; } .mtabsnav a:hover { color: var(--fg); } .mtabsnav a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); } .mtabspanel[hidden] { display: none !important; } .mtabstitle { margin-top: 0; } / Form di contatto: più compatto + fix casella privacy (non deve allargarsi) / .form { max-width: 33rem; gap: .85rem; } .formrow { gap: .85rem; } .form .field { gap: .3rem; } .form .field > label { font-size: .85rem; } .form .field input, .form .field textarea { padding: .5rem .65rem; font-size: .92rem; border-radius: 8px; } .form .field textarea { min-height: 6rem; } .form .check { align-items: flex-start; gap: .5rem; font-size: .88rem; } .form .check input[type="checkbox"] { width: 1rem; min-width: 1rem; height: 1rem; flex: none; margin-top: .12rem; padding: 0; } .form .check span { flex: 1; } .form button[type="submit"] { padding: .55rem 1.05rem; } / Pagina membro: meno spazio tra la fascia intestazione e le sezioni a tab / .section--tight-top { padding-top: clamp(1rem, .6rem + 1.5vw, 1.75rem); } .member-bio { margin-bottom: 1.5rem; } / Scheda membro: avatar a sinistra, nome + parentela a destra, poi professione e link / .member-cardtop { display: flex; align-items: center; gap: .8rem; } .member-cardavatar { flex: none; } .member-cardid { display: flex; flex-direction: column; min-width: 0; } .member-cardid .member-cardname { font-size: 1.05rem; line-height: 1.25; } .member-cardprof { margin-top: .15rem; } / Homepage: intestazione "Affari di famiglia" su più livelli / .home-head { max-width: 46rem; } .home-head > + * { margin-top: .5rem; } .home-headlead { font-size: 1.2rem; color: var(--fg); font-weight: 500; } .home-headsub { color: var(--fg-soft); } .home-head__motto { color: var(--fg-soft); font-style: italic; }