:root { --bg-color: #020617; --accent-neon: #00F0FF; --surface-color: #1E293B; --text-main: #f1f5f9; --text-muted: #94a3b8; --font-condensed: "Arial Narrow", "Helvetica Neue Condensed", ui-sans-serif, system-ui, sans-serif; --radius-soft: 8px; } body { margin: 0; background-color: var(--bg-color); color: var(--text-main); font-family: var(--font-condensed); font-stretch: condensed; -webkit-font-smoothing: antialiased; } .glass-ui { background: rgba(30, 41, 59, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 240, 255, 0.15); } .site-header { position: sticky; top: 0; z-index: 999; border-bottom-left-radius: var(--radius-soft); border-bottom-right-radius: var(--radius-soft); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } .header-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1400px; margin: 0 auto; } .brand-link { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--text-main); } .logo-wrapper svg { width: 2rem; height: 2rem; stroke: var(--accent-neon); filter: drop-shadow(0 0 5px var(--accent-neon)); } .brand-name { font-size: 1.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin: 0; text-shadow: 0 0 8px rgba(0, 240, 255, 0.3); } .desktop-nav .nav-list { display: flex; gap: 2rem; list-style: none; margin: 0; padding: 0; } .nav-link { color: var(--text-main); text-decoration: none; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s, text-shadow 0.3s; } .nav-link:hover { color: var(--accent-neon); text-shadow: 0 0 8px var(--accent-neon); } .btn-neon { display: inline-block; background: rgba(0, 240, 255, 0.05); color: var(--accent-neon); border: 1px solid var(--accent-neon); padding: 0.6rem 1.2rem; border-radius: var(--radius-soft); text-transform: uppercase; font-weight: bold; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 0 10px rgba(0, 240, 255, 0.2), inset 0 0 5px rgba(0, 240, 255, 0.1); } .btn-neon:hover { background: var(--accent-neon); color: var(--bg-color); box-shadow: 0 0 20px rgba(0, 240, 255, 0.6), inset 0 0 10px rgba(0, 240, 255, 0.4); } .burger-menu { display: none; background: transparent; border: 1px solid var(--accent-neon); padding: 0.5rem; border-radius: var(--radius-soft); cursor: pointer; box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); transition: all 0.3s ease; } .burger-menu:hover { box-shadow: 0 0 15px rgba(0, 240, 255, 0.5); } .burger-line { display: block; width: 24px; height: 2px; background-color: var(--accent-neon); margin: 5px 0; box-shadow: 0 0 5px var(--accent-neon); transition: all 0.3s ease; } .tablet-dropdown { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 1rem 0; border-top: none; } .tablet-dropdown.is-active { display: block; } .tablet-dropdown .dropdown-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 1rem; } .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; border-top-left-radius: var(--radius-soft); border-top-right-radius: var(--radius-soft); border-bottom: none; padding: 0.75rem 0; box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5); } .bottom-nav-list { display: flex; justify-content: space-around; list-style: none; margin: 0; padding: 0; } .bottom-nav-link { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; color: var(--text-muted); text-decoration: none; font-size: 0.75rem; text-transform: uppercase; font-weight: 600; transition: all 0.3s ease; } .bottom-nav-link svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; } .bottom-nav-link:hover { color: var(--accent-neon); text-shadow: 0 0 8px var(--accent-neon); } .bottom-nav-link:hover svg { filter: drop-shadow(0 0 5px var(--accent-neon)); } .site-footer { background: var(--surface-color); border-top: 1px solid rgba(0, 240, 255, 0.2); padding: 4rem 2rem 2rem; margin-top: 4rem; position: relative; } .footer-glow-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent-neon); box-shadow: 0 0 15px var(--accent-neon); } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; max-width: 1200px; margin: 0 auto; } .footer-heading { color: var(--text-main); font-size: 1.25rem; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 1.5rem 0; } .tagline { color: var(--accent-neon); font-style: italic; margin: 0.5rem 0 1rem; font-weight: 600; } .footer-summary { color: var(--text-muted); line-height: 1.6; margin: 0; } .neon-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent-neon); text-decoration: none; font-weight: 600; transition: text-shadow 0.3s; } .neon-link:hover { text-shadow: 0 0 8px var(--accent-neon); } .icon-inline { width: 1.25rem; height: 1.25rem; } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.75rem; } .footer-links a { color: var(--text-muted); text-decoration: none; transition: color 0.3s; } .footer-links a:hover { color: var(--accent-neon); } .footer-bottom { max-width: 1200px; margin: 3rem auto 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); text-align: center; color: var(--text-muted); font-size: 0.875rem; } /* Global Hero Base (Req 4 support) */ .hero-section { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } @media (max-width: 900px) { .desktop-nav { display: none; } .burger-menu { display: block; } } @media (max-width: 768px) { .header-actions, .burger-menu { display: none; } .header-container { justify-content: center; padding: 1rem; } .site-header { background: transparent; border: none; box-shadow: none; backdrop-filter: none; } .brand-name { font-size: 1.25rem; } .tablet-dropdown { display: none !important; } .mobile-bottom-nav { display: block; } body { padding-bottom: 80px; } .site-footer { padding-bottom: 100px; } }
/* footer extras */
.footer__extras{margin-top:16px;}
.footer__extrasInner{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;}
.footer__social{display:flex;gap:10px;align-items:center;}
.footer-social{display:inline-flex;gap:8px;align-items:center;text-decoration:none;}
.footer-social__icon{display:block;}
.footer__poemWrap{max-width:520px;}
.footer-poem{opacity:0.9;font-size:0.95em;line-height:1.35;}
/* --- injected by logo step --- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:28px;height:28px;display:inline-block;flex:0 0 auto}
.brand-logo *{vector-effect:non-scaling-stroke}
/* --- /injected by logo step --- */