/* Giuseppe Messina Web Site — struttura e componenti. * * Questo file NON contiene colori, font o misure letterali: usa solo le * variabili definite dal tema caricato prima (assets/css/themes/*.css). * Cambiare tema = cambiare un file, senza toccare questo. * * Registri visivi, applicati con una classe sul : * .tone-formale → CV e pagine istituzionali: titoli con grazie, bordi netti, * poche ombre, ritmo compatto. * .tone-leggero → blog e applicazioni: sans, angoli morbidi, ombre diffuse, * accento secondario. * .tone-neutro → home e pagine di servizio: via di mezzo. * * Indice * 1. Reset e base * 2. Registri (tone) * 3. Impaginazione * 4. Testata e navigazione * 5. Tipografia * 6. Bottoni, pill, badge * 7. Hero * 8. Card e griglie * 9. Blog * 10. Articolo e prosa * 11. CV * 12. Applicazioni e release * 13. Piè di pagina * 14. Accessibilità e stampa */ /* ---------- 1. Reset e base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--c-bg); color: var(--c-text); font-family: var(--font-body, var(--font-sans)); font-size: var(--fs-base); line-height: var(--lh-base); text-rendering: optimizeLegibility; display: flex; flex-direction: column; min-height: 100vh; } img { max-width: 100%; height: auto; display: block; } a { color: var(--c-link, var(--c-accent)); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: .18em; } hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--space-6) 0; } /* ---------- 2. Registri ---------- */ body { --font-heading: var(--font-sans); --font-body: var(--font-sans); --c-link: var(--c-accent); --c-tone: var(--c-accent); --c-tone-soft: var(--c-accent-soft); --radius-card: var(--radius-md); --shadow-card: var(--shadow-sm); --card-border: 1px solid var(--c-border); } body.tone-formale { --font-heading: var(--font-serif); --radius-card: var(--radius-sm); --shadow-card: none; --card-border: 1px solid var(--c-border); } body.tone-leggero { --c-tone: var(--c-accent2); --c-tone-soft: var(--c-accent2-soft); --radius-card: var(--radius-lg); --shadow-card: var(--shadow-md); --card-border: 1px solid var(--c-border-soft); } /* ---------- 3. Impaginazione ---------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--space-5); } main.wrap { flex: 1; padding-block: var(--space-7) var(--space-8); } section + section { margin-top: var(--space-7); } /* ---------- 4. Testata e navigazione ---------- */ .site-head { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--c-surface) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--c-border-soft); } .head-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); } .brand { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: var(--tracking-tight); color: var(--c-text); } .brand:hover { color: var(--c-tone); text-decoration: none; } .site-head nav { display: flex; flex-wrap: wrap; gap: var(--space-1); } .site-head nav a { position: relative; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--c-text-muted); font-size: .94rem; font-weight: 500; } .site-head nav a:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; } .site-head nav a.on { color: var(--c-tone); background: var(--c-tone-soft); font-weight: 600; } /* ---------- 5. Tipografia ---------- */ h1, h2, h3, h4 { font-family: var(--font-heading); letter-spacing: var(--tracking-tight); line-height: 1.25; color: var(--c-text); margin: 0 0 var(--space-3); text-wrap: balance; } h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); } h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.6rem); } h3 { font-size: 1.1rem; } .page-head { margin-bottom: var(--space-6); } .page-head .lead { margin-bottom: 0; } .lead { max-width: var(--measure); margin: 0 0 var(--space-5); color: var(--c-text-soft); font-size: 1.08rem; } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--c-text-muted); font-size: .87rem; } .sec-title { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); font-family: var(--font-sans); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--c-text-muted); } .sec-title::after { content: ""; flex: 1; height: 1px; background: var(--c-border); } .empty { padding: var(--space-6); border: 1px dashed var(--c-border); border-radius: var(--radius-md); color: var(--c-text-muted); text-align: center; } /* ---------- 6. Bottoni, pill, badge ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: .68rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--c-tone); color: var(--c-on-accent); font-size: .95rem; font-weight: 600; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; } .btn:hover { background: var(--c-accent-deep); text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn:active { transform: none; } .btn.ghost { background: transparent; border-color: var(--c-border); color: var(--c-text); } .btn.ghost:hover { background: var(--c-surface-2); border-color: var(--c-text-muted); } .btn.small { padding: .42rem .9rem; font-size: .87rem; } .pill { display: inline-block; padding: .16rem .6rem; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text-muted); font-size: .76rem; font-weight: 600; letter-spacing: .01em; } .pill.ok { background: var(--c-ok-soft); color: var(--c-ok); } .pill.tone { background: var(--c-tone-soft); color: var(--c-tone); } a.pill:hover { background: var(--c-tone-soft); color: var(--c-tone); text-decoration: none; } .more { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--c-tone); } .more:hover { gap: var(--space-3); text-decoration: none; } /* ---------- 7. Hero ---------- */ .hero { position: relative; overflow: hidden; padding: var(--space-8) var(--space-6); border: var(--card-border); border-radius: var(--radius-lg); background: radial-gradient(120% 120% at 12% -20%, var(--c-accent-soft) 0%, transparent 55%), radial-gradient(90% 90% at 100% 0%, var(--c-accent2-soft) 0%, transparent 50%), var(--c-surface); box-shadow: var(--shadow-md); } /* Testo a sinistra, illustrazione a destra; sotto gli 860px una colonna sola. */ .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: var(--space-6); align-items: center; } .hero-text { min-width: 0; } .hero-figure { margin: 0; min-width: 0; } .hero-figure svg, .hero-figure img { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; } .hero-figure img { border-radius: var(--radius-lg); } .hero h1 { margin-bottom: var(--space-4); } .hero .lead { font-size: 1.15rem; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; } .hero-eyebrow { display: inline-block; margin-bottom: var(--space-4); padding: .22rem .8rem; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text-muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; } /* ---------- 8. Card e griglie ---------- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-5); } .card { display: flex; flex-direction: column; overflow: hidden; background: var(--c-surface); border: var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--c-tone) 35%, var(--c-border)); } .card-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; } .card-body > :last-child { margin-bottom: 0; } .card h3 { margin: 0; } .card h3 a { color: var(--c-text); } .card h3 a:hover { color: var(--c-tone); text-decoration: none; } .card p { margin: 0; color: var(--c-text-soft); font-size: .95rem; } .cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .cover.wide { aspect-ratio: 21 / 9; border-radius: var(--radius-md); margin: var(--space-5) 0; } /* ---------- 9. Blog ---------- */ .filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); } .filters a { padding: .34rem .95rem; border: 1px solid var(--c-border); border-radius: 999px; background: var(--c-surface); color: var(--c-text-muted); font-size: .88rem; font-weight: 500; } .filters a:hover { border-color: var(--c-tone); color: var(--c-tone); text-decoration: none; } .filters a.on { background: var(--c-tone); border-color: var(--c-tone); color: var(--c-on-accent); } .post-list { display: flex; flex-direction: column; gap: var(--space-6); } .post-item { display: grid; grid-template-columns: 230px 1fr; gap: var(--space-5); align-items: start; padding-bottom: var(--space-6); border-bottom: 1px solid var(--c-border-soft); } .post-item:last-child { border-bottom: 0; padding-bottom: 0; } .post-item h2 { font-size: 1.3rem; margin-bottom: var(--space-2); } .post-item h2 a { color: var(--c-text); } .post-item h2 a:hover { color: var(--c-tone); text-decoration: none; } .post-item p { margin: 0; color: var(--c-text-soft); } .thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .pager { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-7); } .pager a { min-width: 2.4rem; padding: .35rem .7rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text-muted); text-align: center; font-variant-numeric: tabular-nums; } .pager a:hover { border-color: var(--c-tone); color: var(--c-tone); text-decoration: none; } .pager a.on { background: var(--c-tone); border-color: var(--c-tone); color: var(--c-on-accent); } /* ---------- 10. Articolo e prosa ---------- */ .article { padding: var(--space-7); background: var(--c-surface); border: var(--card-border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } .prose { max-width: var(--measure); font-size: 1.04rem; color: var(--c-text-soft); } .prose > :first-child { margin-top: 0; } .prose h2 { margin: var(--space-6) 0 var(--space-3); color: var(--c-text); } .prose h3 { margin: var(--space-5) 0 var(--space-2); color: var(--c-text); } .prose p { margin: 0 0 var(--space-4); } .prose ul { margin: 0 0 var(--space-4); padding-left: 1.3rem; } .prose li { margin-bottom: var(--space-2); } .prose li::marker { color: var(--c-tone); } .prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-5); border-left: 3px solid var(--c-tone); background: var(--c-tone-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--c-text-soft); } .prose blockquote p:last-child { margin-bottom: 0; } .prose code { padding: .12rem .4rem; border-radius: 5px; background: var(--c-surface-2); font-family: var(--font-mono); font-size: .88em; color: var(--c-text); } .prose pre { margin: 0 0 var(--space-4); padding: var(--space-5); overflow-x: auto; background: var(--c-code-bg); color: var(--c-code-text); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: .87rem; line-height: 1.6; } .prose pre code { background: none; padding: 0; color: inherit; } .prose.small { font-size: .95rem; } /* ---------- 11. CV ---------- */ .cv-head { padding: var(--space-6) var(--space-7); margin-bottom: var(--space-7); background: var(--c-surface); border: 1px solid var(--c-border); border-top: 3px solid var(--c-accent); border-radius: var(--radius-sm); } .timeline { display: flex; flex-direction: column; gap: var(--space-6); } .tl-item { display: grid; grid-template-columns: 170px 1fr; gap: var(--space-5); align-items: start; } .tl-when { padding-top: .2rem; color: var(--c-text-muted); font-size: .87rem; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .tl-body { position: relative; padding-left: var(--space-5); border-left: 2px solid var(--c-border); } .tl-body::before { content: ""; position: absolute; left: -5px; top: .5rem; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); } .tl-body h3 { margin-bottom: var(--space-1); } .tl-body .meta { margin-bottom: var(--space-2); } .tl-body .prose { font-size: .98rem; } /* ---------- 12. Applicazioni e release ---------- */ .app-icon { width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover; border: 1px solid var(--c-border-soft); } .app-icon.big { width: 88px; height: 88px; border-radius: var(--radius-lg); } .releases { display: flex; flex-direction: column; gap: var(--space-4); } .release { padding: var(--space-5); border: 1px solid var(--c-border); border-radius: var(--radius-card); background: var(--c-surface-2); } .release:first-child { background: var(--c-surface); border-color: color-mix(in srgb, var(--c-tone) 30%, var(--c-border)); } .rel-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .rel-head strong { font-family: var(--font-mono); font-size: 1rem; } /* ---------- 12b. Pagina "lavori in corso" ---------- */ body.wip-page { align-items: center; justify-content: center; padding: var(--space-6) var(--space-5); background: radial-gradient(120% 100% at 50% -10%, var(--c-accent-soft) 0%, transparent 60%), var(--c-bg); } .wip { width: 100%; max-width: 620px; padding: var(--space-8) var(--space-6); text-align: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .wip .art { width: 100%; max-width: 280px; margin: 0 auto var(--space-6); } .wip p { max-width: 44ch; margin-inline: auto; color: var(--c-text-soft); } .wip footer { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--c-border-soft); color: var(--c-text-muted); font-size: .85rem; } .gear-a { transform-origin: 152px 96px; } .gear-b { transform-origin: 212px 132px; } @media (prefers-reduced-motion: no-preference) { .gear-a { animation: gear-spin 9s linear infinite; } .gear-b { animation: gear-spin 6s linear infinite reverse; } @keyframes gear-spin { to { transform: rotate(360deg); } } } /* ---------- 13. Piè di pagina ---------- */ .site-foot { margin-top: auto; padding-block: var(--space-6); background: var(--c-surface); border-top: 1px solid var(--c-border-soft); color: var(--c-text-muted); font-size: .88rem; } .site-foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; } .site-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-4); } .site-foot a { color: var(--c-text-muted); } .site-foot a:hover { color: var(--c-tone); } /* accesso all'area riservata: presente ma defilato */ .site-foot .admin-link { opacity: .6; } .site-foot .admin-link:hover { opacity: 1; } /* ---------- 14. Accessibilità e stampa ---------- */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 3px; } .skip { position: absolute; left: -9999px; top: 0; padding: var(--space-3) var(--space-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm); z-index: 50; } .skip:focus { left: var(--space-4); top: var(--space-4); } /* ---------- contatori di visita ---------- Mostrati solo se l'opzione è attiva (Amministrazione → Contatori). */ .counter { display: inline-block; padding: .05rem .5rem; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text-muted); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .site-foot .counter { background: transparent; padding: 0; } /* ---------- barra di anteprima ---------- Visibile solo all'amministratore con l'anteprima attiva (sys/inc/preview.php). Ricorda che quello che si vede non è quello che vedono i visitatori. */ .preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: .45rem var(--space-5); background: var(--c-warn-soft); border-bottom: 1px solid var(--c-warn); color: var(--c-warn); font-size: .82rem; line-height: 1.4; } .preview-bar__label { padding: .1rem .5rem; border-radius: 999px; background: var(--c-warn); color: var(--c-on-accent); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .preview-bar__text { flex: 1 1 16rem; } .preview-bar a { color: inherit; text-decoration: underline; font-weight: 600; } .preview-bar form { display: inline; margin: 0; } .preview-bar button { padding: .15rem .6rem; border: 1px solid currentColor; border-radius: var(--radius-sm); background: transparent; color: inherit; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; } .preview-bar button:hover { background: var(--c-warn); color: var(--c-on-accent); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: var(--space-5); } .hero-figure svg, .hero-figure img { max-width: 480px; } } @media (max-width: 760px) { .post-item, .tl-item { grid-template-columns: 1fr; } .tl-when { color: var(--c-tone); font-weight: 600; } .article { padding: var(--space-5); } .hero { padding: var(--space-6) var(--space-5); } main.wrap { padding-block: var(--space-6) var(--space-7); } } @media print { .site-head, .site-foot, .hero-actions, .filters, .pager, .preview-bar { display: none; } body { background: #fff; } .article, .cv-head, .card { box-shadow: none; border-color: #ccc; } a { color: inherit; text-decoration: underline; } }