/* Global layout alignment and header styles migrated from Base.astro */ :root{ --container-max: 1200px; --gutter: 20px; } /* Ensure all .container blocks align to the same column system */ .container{ max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); box-sizing: border-box; } /* Header alignment: brand at left, links at right, vertically centered */ .nav .inner.container{ display: flex; align-items: center; /* vertical center */ justify-content: space-between; min-height: 56px; } .nav .inner.container > div{ display: flex; gap: 1.5rem; /* keep consistent horizontal spacing */ align-items: center; /* ensure links baseline consistency */ } /* Optional: visual guide lines to verify vertical alignment Toggle by setting */ html[data-guides] .container{ position: relative; } html[data-guides] .container::before, html[data-guides] .container::after{ content: ""; position: absolute; top: 0; bottom: 0; width: 0; pointer-events: none; } /* left and right container edges */ html[data-guides] .container::before{ left: var(--gutter); box-shadow: 0 0 0 1px rgba(6,214,160,0.35), /* left edge */ calc(var(--container-max) - 2*var(--gutter)) 0 0 0 rgba(6,214,160,0.35); /* right edge via spread */ } /* center guide for quick eyeballing */ html[data-guides] .container::after{ left: 50%; transform: translateX(0); border-left: 1px dashed rgba(255,255,255,0.18); } /* Cards and common blocks already use .container with same padding/max-width, so header links will align vertically with card columns' left/right edges. */ @media (max-width: 640px){ .nav .inner.container{ min-height: 48px; } .nav .inner.container > div{ gap: 1rem; } } /* === Classes migrated to satisfy strict CSP (no inline styles) === */ .brand{ font-weight:600; font-size:1.1rem; } .nav-links{ display:flex; gap:1.5rem; font-size:0.95rem; } .footer{ padding:3rem 0; color:var(--text-sec); border-top:1px solid var(--border); margin-top:3rem; } .mb-1{ margin-bottom:1rem; } .footer-note{ font-size:0.85rem; color:var(--text-muted); margin-bottom:0.5rem; } .footer-links{ display:flex; gap:1rem; font-size:0.9rem; margin-top:1rem; } .footer-link{ color:var(--text-sec); } /* Early-loaded structural helpers to avoid first-paint mismatch */ .section-pad{padding:3rem 0} .bg-dark{background:var(--dark-bg)} .bg-dark-secondary{background:var(--dark-bg-secondary)} .m-0{margin:0} .mb-8{margin-bottom:2rem} .mt-8{margin-top:2rem} .text-center{text-align:center} .hero-container{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:0 20px} .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:3rem} .stat-item{background:var(--dark-bg-secondary);border:1px solid var(--border);border-radius:16px;padding:1.5rem;text-align:center} .stat-value-lg{font-size:2.5rem;font-weight:800;margin-bottom:.5rem} .text-token-primary{color:var(--primary)} .text-token-accent{color:var(--accent-color)} .text-token-secondary{color:var(--secondary-color)} .text-token-info{color:var(--info-color)} .muted-sm{color:var(--text-secondary);font-size:.9rem} .row-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem} .featured-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem} .link-primary{color:var(--primary);font-weight:600;text-decoration:none;font-size:1.1rem} .btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap} .mb-12{margin-bottom:3rem} .mb-5{margin-bottom:1.25rem} .redeem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem} .redeem-card{background:var(--dark-bg-secondary);border:1px solid var(--border);border-radius:16px;padding:1.5rem;position:relative} .faq-item{background:var(--dark-bg-secondary);border:1px solid var(--border);border-radius:16px;padding:1.25rem} .faq-title{display:block;font-size:1.1rem;margin-bottom:.5rem} .faq-text{color:var(--text-secondary);line-height:1.8;margin:0} .desc-grid{max-width:900px;margin:0 auto;color:var(--text-secondary);line-height:1.75;font-size:1.05rem;display:grid;gap:1rem} .lead-desc{font-size:1.25rem;color:var(--text-secondary);max-width:600px;margin:0 auto 2rem} .featured-grid-280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem} .h4-sm{font-size:1.15rem;font-weight:700;margin-bottom:0.5rem} .para-relaxed{color:var(--text-secondary);line-height:1.65} .feature-card{background:var(--dark-bg);border:1px solid var(--border);border-radius:16px;padding:2rem} .feature-icon{font-size:2.5rem;margin-bottom:1rem} .feature-title{font-size:1.25rem;font-weight:600;margin-bottom:0.75rem} .feature-text{color:var(--text-secondary);line-height:1.6} .hero-new{background:linear-gradient(135deg, var(--dark-bg) 0%, var(--dark-bg-secondary) 100%);padding:4rem 0 3rem;position:relative;overflow:hidden} .hero-pattern{position:absolute;inset:0;opacity:0.1;background-image:radial-gradient(circle at 20px 20px, var(--primary) 1px, transparent 0);background-size:40px 40px;display:none} .gradient-text{background:linear-gradient(135deg, var(--primary), var(--accent-color));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} body.fx-particles .hero-pattern{display:block}