/* ====================================== LAYOUT VARIATIONS Applied via classes on : layout-header-{classic|minimal|modern|centered} layout-footer-{full|minimal|compact} layout-hero-{centered|split|minimal} ====================================== */ /* ── HEADER: Minimal ── */ .layout-header-minimal header .container { grid-template-columns: auto 1fr auto !important; } .layout-header-minimal header nav ul { justify-content: center !important; } .layout-header-minimal header nav ul li:not(:first-child) { display: none; } /* ── HEADER: Modern ── */ .layout-header-modern header { position: sticky !important; top: 0; width: 100%; z-index: 1000; background: var(--background, #fff); box-shadow: 0 2px 20px rgba(0,0,0,0.08); } .layout-header-modern header .container { padding: 0.75rem 2rem !important; } .layout-header-modern header .logo { font-size: 1.4rem; } /* ── HEADER: Centered ── */ .layout-header-centered header .container { grid-template-columns: 1fr !important; justify-items: center !important; text-align: center !important; } .layout-header-centered header .logo { justify-content: center !important; margin-bottom: 0; } .layout-header-centered header nav { grid-row: 2; width: 100%; } .layout-header-centered header nav ul { justify-content: center !important; } .layout-header-centered header > .container > div:last-child { position: absolute; right: 2rem; top: 50%; transform: translateY(-50%); } /* ── FOOTER: Minimal ── */ .layout-footer-minimal footer > .container > div:first-child { grid-template-columns: 1fr !important; text-align: center !important; padding-bottom: 1.5rem !important; } .layout-footer-minimal footer > .container > div:first-child > div:last-child { display: none; } .layout-footer-minimal footer .logo { justify-content: center !important; } /* ── FOOTER: Compact ── */ .layout-footer-compact footer > .container > div:first-child { grid-template-columns: 1fr 1fr !important; gap: 2rem !important; padding-bottom: 1.5rem !important; } .layout-footer-compact footer > .container > div:first-child > div:last-child { display: none; } /* ── HERO: Split ── */ .layout-hero-split .hero { padding: 2.5rem 0 !important; } .layout-hero-split .hero .container { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; align-items: center !important; } .layout-hero-split .hero .hero-bg { position: relative !important; inset: auto !important; height: 320px !important; border-radius: 1rem !important; order: 2; } .layout-hero-split .hero .hero-title { text-align: left !important; font-size: 2rem !important; } .layout-hero-split .hero .hero-subtitle { text-align: left !important; } .layout-hero-split .hero .hero-buttons { justify-content: flex-start !important; } /* ── HERO: Minimal ── */ .layout-hero-minimal .hero { padding: 1.5rem 0 !important; min-height: auto !important; } .layout-hero-minimal .hero .container { text-align: center !important; } .layout-hero-minimal .hero .hero-bg { display: none !important; } .layout-hero-minimal .hero .hero-title { font-size: 1.5rem !important; } .layout-hero-minimal .hero .hero-subtitle { font-size: 0.9rem !important; max-width: 480px !important; margin: 0 auto !important; } .layout-hero-minimal .hero .hero-buttons { margin-top: 1rem !important; } .layout-hero-minimal .hero .badge { display: none !important; }