/* = Masciake base styles (Eleventy) ======================================= */ /* Libre Baskerville — self-host (metti i file qui: /assets/fonts/libre-baskerville/) */ @font-face{ font-family:"Libre Baskerville"; src:url("/assets/fonts/libre-baskerville/LibreBaskerville-Regular.woff2") format("woff2"); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:"Libre Baskerville"; src:url("/assets/fonts/libre-baskerville/LibreBaskerville-Italic.woff2") format("woff2"); font-weight:400;font-style:italic;font-display:swap; } @font-face{ font-family:"Libre Baskerville"; src:url("/assets/fonts/libre-baskerville/LibreBaskerville-Bold.woff2") format("woff2"); font-weight:700;font-style:normal;font-display:swap; } *{box-sizing:border-box} html,body{height:100%} /* Tipografia & colori base */ :root{ --font-serif: "Libre Baskerville", Baskerville, "Baskerville Old Face", Georgia, "Times New Roman", serif; --base-size: 18px; --lh: 1.7; --measure: 68ch; --muted:#666; --line:#e9e9e9; /* Colore brand di default (BORGOGNA) e sistema link */ --accent:#800020; /* colore principale */ --link: inherit; /* colore base dei link: eredita dal testo */ --link-hover: var(--accent); /* colore hover link di default */ --radius:14px; /* Palette borgogna */ --burgundy:#800020; --burgundy-dark:#6a001b; /* Bottoni global (se servono fuori dallo shop) */ --btn-bg:#9a2b3f; --btn-bg-hover:#7f1b31; --btn-border:#7f1b31; /* Logo */ --logo-h: clamp(64px, 7vw, 120px); } body{ margin:0; font-family:var(--font-serif); line-height:var(--lh); color:#171717; background:#fff; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; font-kerning:normal; } /* Measure & page */ .page{width:calc(100% - 2rem);margin:0 auto} @media (min-width:1024px){.page{width:80vw}} .measure{max-width:var(--measure);width:100%;margin-inline:auto} .measure > *{margin:0} .measure > * + *{margin-top:1.5rem} /* === Sistema link globale via variabili ================================ */ /* Escludo i bottoni .btn/.button così il testo non cambia colore in hover */ a:not(.btn):not(.button){ color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease, background-color .15s ease; } a:not(.btn):not(.button):hover, a:not(.btn):not(.button):focus-visible{ color: var(--link-hover); border-bottom-color: var(--link-hover); outline: none; } /* Temi per-pagina (assegnare al la classe corrispondente) */ body.theme-brand{ --link-hover: var(--accent); } body.theme-burgundy{ --accent: var(--burgundy); --link-hover: var(--burgundy); } /* Header / Logo */ .site-header{background:#fff;color:#171717;border-bottom:1px solid var(--line)} .logo img{display:block;width:100%;height:auto;padding:1rem 0} /* Nav */ .site-nav{position:sticky;top:0;z-index:1000;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 0} .menu{list-style:none;display:flex;gap:.25rem;margin:0;padding:0} .menu a{display:inline-block;padding:.5rem .8rem;border-radius:10px;text-decoration:none;color:#171717} .menu a:hover,.menu a:focus-visible{background:#f4f4f4;outline:none;color:var(--link-hover)} .nav-toggle{display:none;border:0;background:transparent;cursor:pointer;width:44px;height:44px;border-radius:10px;color:var(--burgundy)} /* burger borgogna */ .nav-toggle .burger,.nav-toggle .burger::before,.nav-toggle .burger::after{content:"";display:block;width:22px;height:2px;margin:0 auto;background:currentColor;transition:transform .25s ease,opacity .25s ease} .nav-toggle .burger::before{transform:translateY(-6px)} .nav-toggle .burger::after{transform:translateY(4px)} @media (max-width:768px){ .nav-toggle{display:inline-flex;align-items:center;justify-content:center} .menu{position:absolute;left:1rem;right:1rem;top:calc(100% + .5rem);display:none;flex-direction:column;gap:.25rem;padding:.5rem;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 26px rgba(0,0,0,.08)} .menu.open{display:flex} .nav-toggle[aria-expanded="true"] .burger{transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] .burger::before{transform:rotate(90deg)} .nav-toggle[aria-expanded="true"] .burger::after{opacity:0} } /* Content */ .content{padding:2rem 0 3rem} .intro h1{margin:0 0 .5rem} .intro p{color:var(--muted)} /* ===================== LISTA ARTICOLI (HOME + /articoli) ================= */ .posts h2,.posts h1{margin:0 0 1rem} /* Card: SOLO quando NON è il post singolo */ .posts .post:not(.post--single){ display:grid; grid-template-columns:1fr; border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; margin-bottom:1rem; } .posts .post:not(.post--single) .post-media{position:relative;display:block} .posts .post:not(.post--single) .post-media img{ width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; transition:transform .35s ease } .posts .post:not(.post--single):hover .post-media img{transform:scale(1.02)} .posts .post:not(.post--single) .badge{ position:absolute;left:.6rem;top:.6rem;font-size:.75rem;line-height:1; padding:.35rem .5rem;background:#000;color:#fff;border-radius:999px } .posts .post:not(.post--single) .post-body{ padding:1rem 1rem 1.1rem;display:grid;align-content:start;gap:.5rem } .post-title{margin:0;font-size:1.05rem;line-height:1.35} .post-title a{text-decoration:none;color:#171717} .post-title a:focus-visible{outline:2px solid var(--accent);border-radius:6px} .posts .post:not(.post--single) .post-excerpt{margin:0;color:var(--muted)} .posts .post:not(.post--single) .post-meta{font-size:.9rem;color:var(--muted);display:flex;align-items:center;gap:.35rem} /* Layout a due colonne delle card solo su desktop */ @media (min-width:768px){ .posts .post:not(.post--single){ grid-template-columns:minmax(220px,36%) 1fr;align-items:stretch } .posts .post:not(.post--single) .post-media img{ height:100%;aspect-ratio:auto;object-fit:cover } } /* ========================= SINGOLO ARTICOLO ============================== */ /* Evita qualsiasi “anteprima” dentro il singolo */ .post.post--single .post-excerpt{ display:none !important; } /* (il resto del look del singolo — hero, ecc. — è gestito nel layout post.njk * oppure puoi aggiungere qui regole aggiuntive se vuoi centralizzarle) */ .post--single { grid-template-columns: 1fr; } @media (min-width:768px){ .post--single { grid-template-columns: 1fr; } } .post--single .post-body img{ display:block; margin:1rem auto; height:auto; max-width:100%; } /* Footer */ @media (max-width:640px){ .footer-right .sep{ display:none; } .footer-right a{ display:block; padding:.125rem 0; } } .site-footer{border-top:1px solid var(--line);background:#fafafa;padding:2rem 0;color:var(--muted)} .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem} .footer-links{list-style:none;display:flex;gap:.75rem;margin:0;padding:0} .footer-links a{color:var(--muted);text-decoration:none;padding:.25rem .5rem;border-radius:8px} .footer-links a:hover,.footer-links a:focus-visible{background:#efefef} /* Vertical rhythm */ .measure{line-height:1.7;hyphens:auto} .measure :where(h1,h2,h3,h4,h5,h6){line-height:1.2} .measure > :where(h1,h2,h3)+:where(p,ul,ol,blockquote){margin-top:.75rem} .measure :where(ul,ol){padding-left:1.25rem} .measure blockquote{padding-left:1rem;border-left:3px solid #e9e9e9;color:#555} .measure figure{margin:2rem 0} .measure figure img{display:block;width:100%;height:auto} .measure figcaption{margin-top:.5rem;font-size:.9em;color:#666;text-align:center} /* Buttons “.button” (stile scuro generico) */ .button{ display:inline-block; padding:.6rem 1rem; border-radius:12px; background:#171717; color:#fff; text-decoration:none; font-weight:600; transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease; } .button:hover,.button:focus-visible{opacity:.92; box-shadow:0 8px 20px rgba(0,0,0,.12); outline:none} .button:active{transform:translateY(1px)} /* Bottoni “.btn” (global) */ .btn, a.btn{ background: var(--btn-bg) !important; border: 1px solid var(--btn-border) !important; color:#fff !important; border-bottom:none !important; display:inline-block; padding:.65rem 1rem; border-radius:12px; font-weight:600; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .2s ease; } .btn:hover, a.btn:hover, .btn:focus-visible, a.btn:focus-visible{ background: var(--btn-bg-hover) !important; border-color: var(--btn-bg-hover) !important; color:#fff !important; outline:none; } .btn:active, a.btn:active{ transform:translateY(1px); } /* Variante ghost/secondary */ .btn.secondary, a.btn.secondary{ background: transparent !important; color: var(--burgundy) !important; border: 1px solid var(--burgundy) !important; } .btn.secondary:hover, a.btn.secondary:hover{ color: var(--burgundy-dark) !important; border-color: var(--burgundy-dark) !important; background: rgba(128,0,32,.06) !important; } /* ===== SHOP: comportamento identico al tasto “Contatta” ================== */ .shop a:not(.btn):not(.button):hover{ color: var(--burgundy-dark) !important; border-bottom-color: var(--burgundy-dark) !important; } .shop .btn, .shop a.btn{ background:#800020 !important; border:1px solid #800020 !important; color:#fff !important; } .shop .btn:hover, .shop a.btn:hover, .shop .btn:focus-visible, .shop a.btn:focus-visible{ background:#6A001B !important; border-color:#6A001B !important; color:#fff !important; } .shop .btn.secondary, .shop a.btn.secondary{ background: transparent !important; color: #800020 !important; border: 1px solid #800020 !important; } .shop .btn.secondary:hover, .shop a.btn.secondary:hover{ color: #6A001B !important; border-color: #6A001B !important; background: rgba(128,0,32,.06) !important; } /* Variabili SOLO per l'area Shop (non sovrascrivere globalmente!) */ .shop{ --burgundy:#800020; --line:#e5e7eb; --muted:#64748b; --radius:12px; } /* Logo (dimensioni coerenti, patch universale) */ header.site .brand #site-logo, header.site .brand .site-logo { height: var(--logo-h) !important; max-height: none !important; width: auto !important; display: block; vertical-align: middle; } img[src*="logo-masciake.svg"], img[src*="logo-masciake.png"] { height: clamp(72px, 7vw, 120px) !important; width: auto !important; max-height: none !important; display: inline-block !important; vertical-align: middle !important; } header .wrap, header.site .wrap { min-height: calc(clamp(72px, 7vw, 120px) + 16px) !important; }