:root { --color-dark-blue: #0f172a; --color-emerald: #10b981; --color-white: #ffffff; --color-silver: #94a3b8; --spacing-base: 8px; --radius-pill: 9999px; --font-main: system-ui, -apple-system, sans-serif; } body { margin: 0; font-family: var(--font-main); background: var(--color-dark-blue); color: var(--color-white); -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } .condensed-heading { font-stretch: condensed; letter-spacing: -0.05em; font-weight: 700; } .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 4); max-width: 1440px; margin: 0 auto; } .main-nav { order: 1; display: flex; align-items: center; flex: 1; } .nav-list { display: flex; gap: calc(var(--spacing-base) * 3); list-style: none; margin: 0; padding: 0; } .nav-list a { font-weight: 500; transition: color 0.3s ease; } .nav-list a:hover { color: var(--color-emerald); } .header-actions { order: 2; display: flex; align-items: center; gap: calc(var(--spacing-base) * 2); margin: 0 calc(var(--spacing-base) * 4) 0 auto; } .brand-logo { order: 3; display: flex; align-items: center; gap: var(--spacing-base); font-size: 1.25rem; font-weight: 700; font-stretch: condensed; color: var(--color-white); } .btn-cta { background: var(--color-emerald); color: var(--color-white); padding: var(--spacing-base) calc(var(--spacing-base) * 3); border-radius: var(--radius-pill); font-weight: 600; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.3s ease; } .btn-cta:hover { filter: brightness(1.1); transform: translateY(-1px); } .burger-menu { display: none; background: none; border: none; color: var(--color-white); cursor: pointer; padding: var(--spacing-base); } .burger-menu svg { width: 24px; height: 24px; } .site-footer { padding: calc(var(--spacing-base) * 8) calc(var(--spacing-base) * 4); background: var(--color-dark-blue); } .glass-panel { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); } .water-reflection { position: relative; overflow: hidden; } .water-reflection::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.02) 60%, rgba(255,255,255,0) 100%); transform: rotate(30deg); animation: reflection 12s infinite linear; pointer-events: none; } @keyframes reflection { 0% { transform: translateY(-50%) rotate(30deg); } 100% { transform: translateY(50%) rotate(30deg); } } .footer-inner { max-width: 1440px; margin: 0 auto; padding: calc(var(--spacing-base) * 6); } .footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: calc(var(--spacing-base) * 6); margin-bottom: calc(var(--spacing-base) * 6); } .footer-tagline { display: block; font-size: 1.5rem; font-weight: 700; font-stretch: condensed; color: var(--color-emerald); margin-bottom: calc(var(--spacing-base) * 2); } .footer-summary { color: var(--color-silver); line-height: 1.6; max-width: 400px; } .footer-contact-col address { display: flex; flex-direction: column; gap: calc(var(--spacing-base) * 2); font-style: normal; color: var(--color-silver); } .footer-contact-col address a { display: inline-flex; align-items: flex-start; gap: var(--spacing-base); transition: color 0.3s ease; } .footer-contact-col address a:hover { color: var(--color-white); } .footer-contact-col address svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--color-emerald); } .footer-legal-col .legal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(var(--spacing-base) * 2); color: var(--color-silver); } .footer-legal-col a:hover { color: var(--color-white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: calc(var(--spacing-base) * 3); text-align: center; color: var(--color-silver); font-size: 0.875rem; } /* Feature classes for user content */ .hero-split { display: flex; align-items: stretch; min-height: 80vh; } .hero-split-content { flex: 1; padding: calc(var(--spacing-base) * 8); display: flex; flex-direction: column; justify-content: center; } .hero-split-image { flex: 1; background-size: cover; background-position: center; border-radius: 24px; margin: calc(var(--spacing-base) * 2); } .zigzag-container .feature-row:nth-child(even) { flex-direction: row-reverse; } @media (max-width: 992px) { .footer-top { grid-template-columns: 1fr; } .hero-split { flex-direction: column; } } @media (max-width: 768px) { .header-inner { flex-wrap: wrap; } .main-nav { order: 3; width: 100%; display: none; } .nav-list { flex-direction: column; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(16px); padding: calc(var(--spacing-base) * 3); margin-top: calc(var(--spacing-base) * 2); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); width: 100%; } .main-nav.is-active { display: block; } .burger-menu { display: block; } .header-actions { order: 1; margin: 0; flex: 1; } .brand-logo { order: 2; } }
/* 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;}