/* ============================================================ HUBNEX AI — SHARED STYLESHEET Mirrors the Flutter app's dark theme tokens exactly. ============================================================ */ /* ── GOOGLE FONTS ── */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=Urbanist:wght@400;500;600&display=swap"); /* ── CSS TOKENS (from AppColors) ── */ /* DARK THEME — default */ :root { /* Brand */ --color-primary: #253fc0; --color-accent: #944cff; /* BG & Surfaces */ --bg-primary: #050814; --bg-card: #08091a; --surface-high: #111828; --secondary: #22d3ee; /* Gradient */ --gradient-start: #150f39; /* Text */ --text-primary: #ffffff; --text-secondary: #9ca3af; /* Borders */ --border-soft: #1f2937; --border-strong: #374151; /* AI bubble */ --ai-bubble: #0d1220; /* Radius */ --radius-card: 18px; --radius-input: 14px; /* Typography */ --font-display: "Space Grotesk", sans-serif; --font-body: "Urbanist", sans-serif; } /* LIGHT THEME — applied via [data-theme="light"] on */ [data-theme="light"] { --bg-primary: #f8fafc; --bg-card: #ffffff; --surface-high: #f1f5f9; --secondary: #0ea5b7; --gradient-start: #e0e7ff; --text-primary: #000000; --text-secondary: #475569; --border-soft: #e2e8f0; --border-strong: #cbd5e1; --ai-bubble: #eff6ff; } [data-theme="light"] .badge { border-color: var(--border-strong); } /* SYSTEM: if OS is light and no param override, use light theme */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-primary: #f8fafc; --bg-card: #ffffff; --surface-high: #f1f5f9; --secondary: #0ea5b7; --gradient-start: #e0e7ff; --text-primary: #000000; --text-secondary: #475569; --border-soft: #e2e8f0; --border-strong: #cbd5e1; --ai-bubble: #eff6ff; } } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .badge { border-color: var(--border-strong); } } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── BASE ── */ html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: var(--text-primary); background-color: var(--bg-primary); /* Full-screen gradient — mirrors bgDecoration() */ background-image: linear-gradient( 135deg, var(--gradient-start) 0%, var(--bg-primary) 55%, var(--bg-primary) 100% ); background-attachment: fixed; min-height: 100vh; } /* ── LAYOUT WRAPPER ── */ .page-wrapper { max-width: 800px; margin: 0 auto; padding: 48px 24px 80px; } /* ── HEADER / LOGO BAR ── */ .site-header { display: flex; align-items: center; gap: 12px; margin-bottom: 48px; padding-bottom: 20px; border-bottom: 1px solid var(--border-soft); } .logo-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient( 135deg, var(--color-primary), var(--color-accent) ); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; color: #fff; letter-spacing: -0.5px; flex-shrink: 0; } .site-header nav { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } .site-header nav a { font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); text-decoration: none; padding: 6px 14px; border: 1px solid var(--border-soft); border-radius: 999px; transition: color 0.2s, border-color 0.2s, background 0.2s; } .site-header nav a:hover, .site-header nav a.active { color: var(--text-primary); border-color: var(--color-primary); background: rgba(37, 63, 192, 0.12); } /* ── TYPOGRAPHY ── */ h1 { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; line-height: 1.2; letter-spacing: -0.5px; } /* Gradient accent on H1 */ h1 span.accent { background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--text-primary); margin-top: 36px; margin-bottom: 14px; letter-spacing: -0.2px; /* Thin accent bar left */ padding-left: 14px; border-left: 3px solid var(--color-primary); } /* ── META LINE (effective date etc.) ── */ .page-meta { font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 32px; display: flex; align-items: center; gap: 8px; } .page-meta::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); flex-shrink: 0; } /* ── INTRO PARAGRAPH ── */ .intro { font-size: 1.05rem; color: var(--text-secondary); margin-bottom: 32px; padding: 20px 24px; background: var(--surface-high); border: 1px solid var(--border-soft); border-radius: var(--radius-card); } /* ── SECTIONS ── */ section { margin-bottom: 8px; } p { margin-bottom: 14px; color: var(--text-secondary); font-size: 0.97rem; } strong { font-weight: 600; color: var(--text-primary); } /* ── LISTS ── */ ul, ol { padding-left: 0; list-style: none; margin-bottom: 14px; } ul li, ol li { position: relative; padding: 8px 12px 8px 36px; margin-bottom: 6px; color: var(--text-secondary); font-size: 0.95rem; background: var(--ai-bubble); border: 1px solid var(--border-soft); border-radius: 10px; line-height: 1.5; } /* Bullet */ ul li::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); } /* Number */ ol { counter-reset: steps; } ol li { counter-increment: steps; } ol li::before { content: counter(steps); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 6px; background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 700; font-family: var(--font-display); display: flex; align-items: center; justify-content: center; line-height: 1; text-align: center; } /* Nested lists */ ul ul, ol ul { margin-top: 8px; margin-bottom: 0; } ul ul li, ol ul li { background: transparent; border-color: transparent; padding-left: 28px; margin-bottom: 2px; } ul ul li::before { width: 4px; height: 4px; background: var(--color-primary); left: 12px; } /* ── LINKS ── */ a { color: var(--color-accent); text-decoration: none; transition: opacity 0.2s; } a:hover { opacity: 0.8; text-decoration: underline; } /* ── CARDS (used on index.html) ── */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 24px; } .card { display: block; padding: 20px 22px; background: var(--surface-high); border: 1px solid var(--border-soft); border-radius: var(--radius-card); color: var(--text-primary); text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.18s; } .card:hover { border-color: var(--color-primary); background: var(--bg-card); transform: translateY(-2px); text-decoration: none; opacity: 1; } .card-icon { font-size: 1.5rem; margin-bottom: 12px; display: block; } .card h3 { font-family: var(--font-display); font-size: 0.97rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .card p { font-size: 0.82rem; color: var(--text-secondary); margin: 0; } /* ── HERO (index only) ── */ .hero { text-align: center; padding: 48px 0 40px; } .hero h1 { font-size: 2.8rem; margin-bottom: 16px; } .hero .tagline { font-size: 1.05rem; color: var(--text-secondary); max-width: 520px; margin: 0 auto 32px; } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border: 1px solid var(--border-soft); border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.4px; margin-bottom: 20px; font-family: var(--font-display); } .badge span { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary); display: inline-block; } /* Glowing orb behind hero */ .hero-glow { position: relative; z-index: 0; } .hero-glow::before { content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 340px; height: 340px; border-radius: 50%; background: radial-gradient( circle, rgba(37, 63, 192, 0.18) 0%, transparent 70% ); pointer-events: none; z-index: -1; } /* ── MODEL PILLS (index) ── */ .model-pills { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 40px; } .pill { padding: 6px 16px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; font-family: var(--font-display); border: 1px solid var(--border-soft); background: var(--surface-high); color: var(--text-secondary); } /* ── FOOTER ── */ .site-footer { margin-top: 60px; padding-top: 24px; border-top: 1px solid var(--border-soft); text-align: center; font-size: 0.8rem; color: var(--text-secondary); } .site-footer a { color: var(--text-secondary); } /* ── RESPONSIVE ── */ @media (max-width: 600px) { h1 { font-size: 1.75rem; } .hero h1 { font-size: 2rem; } .page-wrapper { padding: 32px 16px 60px; } .site-header nav { display: none; } } .cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: var(--color-primary); color: #ffffff; font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; border-radius: 999px; text-decoration: none; transition: opacity 0.2s, transform 0.18s; margin-top: 8px; } .cta-btn:hover { opacity: 0.9; transform: translateY(-2px); text-decoration: none; color: #ffffff; } .mobile-logo { display: none; } @media (max-width: 600px) { .desktop-logo { display: none; } .mobile-logo { display: block; } .site-header nav { display: flex; gap: 4px; } .site-header nav a { font-size: 0.72rem; padding: 5px 8px; } }