/* nipapado.it — SEO pages shared stylesheet */ /* Incolla questo nel di ogni pagina SEO */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --color-text: #1a1a1a; --color-muted: #555; --color-accent: #2c5f8a; --color-accent-light: #e8f1f8; --color-border: #e0e0e0; --color-bg: #fff; --color-bg-alt: #f8f7f5; --font-body: 'Georgia', 'Times New Roman', serif; --font-ui: system-ui, -apple-system, sans-serif; --max-width: 780px; } body { font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--color-text); background: var(--color-bg); } /* ── NAV ── */ nav { background: #fff; border-bottom: 1px solid var(--color-border); padding: 0 1.5rem; position: sticky; top: 0; z-index: 100; } .nav-inner { max-width: var(--max-width); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 58px; } .nav-brand { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; letter-spacing: 0.01em; } .nav-links { display: flex; gap: 1.5rem; list-style: none; } .nav-links a { font-family: var(--font-ui); font-size: 13px; color: var(--color-muted); text-decoration: none; transition: color 0.15s; } .nav-links a:hover { color: var(--color-accent); } .nav-cta { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--color-accent) !important; border: 1.5px solid var(--color-accent); padding: 6px 14px; border-radius: 4px; text-decoration: none; transition: background 0.15s, color 0.15s; } .nav-cta:hover { background: var(--color-accent); color: #fff !important; } /* ── HERO ── */ .page-hero { background: var(--color-bg-alt); border-bottom: 1px solid var(--color-border); padding: 3.5rem 1.5rem 3rem; } .page-hero-inner { max-width: var(--max-width); margin: 0 auto; } .breadcrumb { font-family: var(--font-ui); font-size: 12px; color: var(--color-muted); margin-bottom: 1rem; } .breadcrumb a { color: var(--color-accent); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .page-hero h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: normal; line-height: 1.25; color: var(--color-text); margin-bottom: 0.75rem; } .page-hero p { font-size: 1.05rem; color: var(--color-muted); max-width: 600px; } /* ── MAIN CONTENT ── */ .page-content { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem 4rem; } .page-content h2 { font-size: 1.35rem; font-weight: normal; color: var(--color-text); margin-top: 2.5rem; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--color-border); } .page-content h2:first-child { margin-top: 0; } .page-content p { margin-bottom: 1rem; } .page-content ul { padding-left: 1.4rem; margin-bottom: 1rem; } .page-content li { margin-bottom: 0.4rem; } .page-content strong { font-weight: bold; } /* ── INFO BOX ── */ .info-box { background: var(--color-accent-light); border-left: 3px solid var(--color-accent); padding: 1.1rem 1.25rem; border-radius: 0 6px 6px 0; margin: 2rem 0; } .info-box p { margin: 0; font-size: 0.95rem; color: #1d3f5a; } .info-box strong { color: var(--color-accent); } /* ── CTA BLOCK ── */ .cta-block { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 8px; padding: 2rem 1.5rem; margin: 3rem 0 0; text-align: center; } .cta-block p { font-family: var(--font-ui); font-size: 15px; color: var(--color-muted); margin-bottom: 1.25rem; } .btn-primary { display: inline-block; background: var(--color-accent); color: #fff; font-family: var(--font-ui); font-size: 15px; font-weight: 600; padding: 12px 28px; border-radius: 5px; text-decoration: none; transition: background 0.15s; } .btn-primary:hover { background: #1e4a6e; } /* ── RELATED PAGES ── */ .related-pages { border-top: 1px solid var(--color-border); padding-top: 2rem; margin-top: 3rem; } .related-pages h3 { font-family: var(--font-ui); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-muted); margin-bottom: 1rem; } .related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.75rem; } .related-link { display: block; font-family: var(--font-ui); font-size: 14px; color: var(--color-accent); text-decoration: none; padding: 0.6rem 0.9rem; border: 1px solid var(--color-border); border-radius: 5px; transition: border-color 0.15s, background 0.15s; } .related-link:hover { background: var(--color-accent-light); border-color: var(--color-accent); } .related-link span { display: block; font-size: 12px; color: var(--color-muted); margin-top: 2px; } /* ── FOOTER ── */ footer { background: var(--color-bg-alt); border-top: 1px solid var(--color-border); padding: 2rem 1.5rem; text-align: center; font-family: var(--font-ui); font-size: 13px; color: var(--color-muted); } footer a { color: var(--color-accent); text-decoration: none; } footer a:hover { text-decoration: underline; } @media (max-width: 600px) { .nav-links { display: none; } .page-hero { padding: 2.5rem 1rem 2rem; } .page-content { padding: 2rem 1rem 3rem; } }