/* === Longtail AI Foundation — Brand Tokens ================================ */ /* Google Fonts loaded via in HTML — not @import (avoids waterfall) */ :root { /* Colors */ --brand-primary: #9245e3; --brand-primary-dark: #7a2bc7; --brand-primary-light: #f3e5f5; --brand-secondary: #03b5a9; --brand-gradient: linear-gradient(to right, #9245E3, #CF95E2, #F4A8F3); /* Text */ --text-body: #57647c; --text-heading: #1a1a1a; /* Font */ --font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Radii */ --btn-radius: 9999px; --btn-radius-small: 24px; } /* === Shared Site Header =================================================== */ .site-header { background: white; padding: 10px 24px; display: flex; align-items: center; gap: 16px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0,0,0,0.10); flex-shrink: 0; } .site-header .brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text-heading); flex-shrink: 0; } .site-header .brand-link img { height: 28px; width: auto; } .site-header .brand-link span { font-family: var(--font-family); font-size: 1.15rem; font-weight: 700; } .site-header nav { display: flex; gap: 6px; margin-left: 8px; } .site-header nav a { padding: 5px 16px; border-radius: 9999px; font-family: var(--font-family); font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--text-body); transition: background 0.15s, color 0.15s; } .site-header nav a:hover { background: var(--brand-primary-light); color: var(--brand-primary); } .site-header nav a.active { background: var(--brand-primary); color: white; } .site-header .header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; } .avatar-btn { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: #e8e8e8; color: #888; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 700; padding: 0; position: relative; transition: background 0.15s, border-color 0.15s; font-family: var(--font-family); } .avatar-btn:hover { border-color: var(--brand-primary); } .avatar-btn.has-email { background: var(--brand-primary-light); color: var(--brand-primary); } /* === Shared Site Footer =================================================== */ .site-footer { background: #1a1a2e; color: #ccc; padding: 10px 24px; font-family: var(--font-family); flex-shrink: 0; flex-grow: 0; } .site-footer .footer-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-footer .footer-inner img { height: 28px; width: auto; filter: brightness(1.3); } .site-footer .footer-tagline { font-size: 0.85rem; color: #bbb; font-style: italic; } .site-footer .footer-links a { font-size: 0.8rem; color: #bbb; text-decoration: none; transition: color 0.15s; margin-left: 8px; } .site-footer .footer-links a:hover { color: white; } .site-footer .footer-copy { margin-left: auto; font-size: 0.7rem; color: #9a9a9a; white-space: nowrap; }