/* ============================================================ snap2-base.css — Snap2 Shared Design System Shared across: snap2.is, snap2sell.is, snap2quote.is, snap2serve.is ============================================================ */ /* ========== FONTS (loaded via in each page's ) ========== */ :root { --mono: 'JetBrains Mono', 'Fira Code', monospace; --sans: 'Inter', -apple-system, sans-serif; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Product accent colors */ --sell: #6b8f63; --sell-bright: #7dab73; --sell-dim: #3d5638; --sell-glow: rgba(107,143,99,0.2); --sell-soft: rgba(107,143,99,0.08); --quote: #c9a84c; --quote-bright: #d9bc6a; --quote-dim: #7a6520; --quote-glow: rgba(201,168,76,0.2); --quote-soft: rgba(201,168,76,0.08); --serve: #9478b8; --serve-bright: #a88fcc; --serve-dim: #5e4a7a; --serve-glow: rgba(148,120,184,0.2); --serve-soft: rgba(148,120,184,0.08); } /* ========== DARK THEME ========== */ [data-theme="dark"] { --bg: #0f1117; --surface: #1a1d27; --surface2: #222633; --bg-card: rgba(26, 29, 39, 0.7); --border: #2e3345; --border-light: #3d4358; --border-hover: #4a5068; --text: #e8e0d0; --text-bright: #f2ece0; --text-dim: #8a8478; --text-faint: #5a5650; --nav-bg: rgba(15,17,23,0.88); --mobile-menu-bg: rgba(15,17,23,0.95); --grid-dot: rgba(255,255,255,0.018); --grain-opacity: 0.025; } /* ========== LIGHT THEME ========== */ [data-theme="light"] { --bg: #f4f1ec; --surface: #ffffff; --surface2: #f0ede7; --bg-card: rgba(255, 255, 255, 0.75); --border: #d4cfc5; --border-light: #c8c2b6; --border-hover: #b0a898; --text: #2c2a26; --text-bright: #1a1816; --text-dim: #7a756c; --text-faint: #a09a90; --nav-bg: rgba(244,241,236,0.9); --mobile-menu-bg: rgba(244,241,236,0.95); --grid-dot: rgba(0,0,0,0.025); --grain-opacity: 0.015; /* Product colors — adjusted for light bg */ --sell: #4a7842; --sell-bright: #3a6832; --sell-dim: #a0c898; --sell-glow: rgba(74,120,66,0.15); --sell-soft: rgba(74,120,66,0.06); --quote: #a68a2e; --quote-bright: #8a7226; --quote-dim: #c4a84c; --quote-glow: rgba(166,138,46,0.15); --quote-soft: rgba(166,138,46,0.06); --serve: #7055a0; --serve-bright: #5e4590; --serve-dim: #b8a0d8; --serve-glow: rgba(112,85,160,0.15); --serve-soft: rgba(112,85,160,0.06); } /* ========== RESET ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.4s ease, color 0.4s ease; } a { color: inherit; text-decoration: none; } /* ========== NAV ========== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; height: 52px; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); transition: background 0.4s ease; } .nav-brand { font-family: var(--mono); font-size: 0.82rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0.06em; display: flex; align-items: center; gap: 6px; } .nav-brand .mark { font-weight: 700; } .nav-brand .sep { color: var(--border-light); } /* Nav links — works as .nav-links (product pages) or .nav-center (hub) */ .nav-links, .nav-center { display: flex; align-items: center; gap: 20px; list-style: none; } .nav-center { gap: 28px; } .nav-links a, .nav-center a { font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint); letter-spacing: 0.04em; transition: color 0.2s; padding: 4px 0; } .nav-links a:hover, .nav-center a:hover { color: var(--text-bright); } /* Product-specific hover and active colors */ .nav-links a.sell:hover, .nav-center a.sell:hover { color: var(--sell); } .nav-links a.quote:hover, .nav-center a.quote:hover { color: var(--quote); } .nav-links a.serve:hover, .nav-center a.serve:hover { color: var(--serve); } /* Active link uses product color (set per-page via --accent or explicit class) */ .nav-links a.active { color: var(--accent, var(--text-bright)); } .nav-center a.active { color: var(--accent, var(--text-bright)); } /* Nav right section */ .nav-right { display: flex; align-items: center; gap: 10px; } /* ========== THEME TOGGLE ========== */ .theme-toggle { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: color 0.2s, border-color 0.2s, background 0.4s; flex-shrink: 0; } .theme-toggle:hover { color: var(--accent, var(--quote)); border-color: var(--accent, var(--quote)); } [data-theme="dark"] .theme-icon-light { display: inline; } [data-theme="dark"] .theme-icon-dark { display: none; } [data-theme="light"] .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-dark { display: inline; } /* ========== NAV CTA BUTTON (optional) ========== */ .nav-cta-btn { font-family: var(--mono); font-size: 0.72rem; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius); transition: all 0.2s; letter-spacing: 0.04em; } .nav-cta-btn:hover { border-color: var(--border-light); background: var(--surface2, var(--surface)); } /* ========== MOBILE NAV ========== */ .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text-dim); margin: 4px 0; transition: all 0.3s; border-radius: 2px; } @media (max-width: 640px) { .nav-links, .nav-center { display: none; } .nav-center.open { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--mobile-menu-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 20px; gap: 16px; border-bottom: 1px solid var(--border); } .nav-toggle { display: block; } } /* ========== COMMON FOOTER ========== */ .footer { padding: 24px 20px; text-align: center; border-top: 1px solid var(--border); } .footer-text { font-family: var(--mono); font-size: 0.62rem; color: var(--text-faint); letter-spacing: 0.04em; } .footer-text a { transition: color 0.2s; } .footer-text a:hover { color: var(--text-dim); } /* ========== HERO (shared base) ========== */ .hero { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px 20px 40px; position: relative; } .hero::before { content: ''; position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 700px; height: 700px; background: radial-gradient(circle, var(--accent-glow, var(--sell-glow)) 0%, transparent 60%); pointer-events: none; } .hero-content { position: relative; z-index: 1; max-width: 560px; } .hero-tag { font-family: var(--mono); font-size: 0.68rem; color: var(--accent, var(--sell)); text-transform: uppercase; letter-spacing: 0.25em; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; } .hero-tag::before, .hero-tag::after { content: ''; width: 20px; height: 1px; background: var(--accent-dim, var(--sell-dim)); } .hero h1 { font-family: var(--mono); font-weight: 300; font-size: clamp(1.8rem, 5.5vw, 2.8rem); letter-spacing: 0.04em; color: var(--text-bright); margin-bottom: 8px; line-height: 1.15; white-space: nowrap; } .hero h1 .dot { color: var(--accent, var(--sell)); } .hero .subtitle { font-size: clamp(0.88rem, 2vw, 1rem); color: var(--text-dim); font-weight: 300; max-width: 440px; margin: 0 auto 40px; line-height: 1.7; } /* ========== HERO ICON (product pages) ========== */ .icon-hero { width: 72px; height: 72px; margin: 0 auto 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-soft, var(--sell-soft)); border: 1px solid var(--accent-dim, var(--sell-dim)); animation: hero-pulse 3s ease-in-out infinite; } .icon-hero svg { width: 32px; height: 32px; color: var(--accent, var(--sell)); } @keyframes hero-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--accent-glow, var(--sell-glow)); } 50% { transform: scale(1.04); box-shadow: 0 0 30px 8px var(--accent-glow, var(--sell-glow)); } } /* ========== COMING BADGE ========== */ .coming-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--accent, var(--sell)); padding: 10px 22px; border: 1px solid var(--accent-dim, var(--sell-dim)); border-radius: var(--radius); margin-bottom: 24px; } .coming-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent, var(--sell)); animation: pulse 2s ease infinite; } /* ========== HERO LINK (back to snap2.is) ========== */ .hero-link { font-family: var(--mono); font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.04em; transition: color 0.2s; } .hero-link:hover { color: var(--text-bright); } .hero-link svg { width: 12px; height: 12px; display: inline; vertical-align: middle; margin-left: 4px; } /* ========== FEATURES GRID (product pages) ========== */ .features { padding: 0 20px 80px; } .features-grid { max-width: 800px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; } .feature { background: var(--surface); padding: 32px 20px; text-align: center; transition: background 0.4s; } .feature-icon { font-size: 1.6rem; margin-bottom: 12px; } .feature h3 { font-family: var(--mono); font-size: 0.78rem; font-weight: 500; margin-bottom: 6px; color: var(--text-bright); } .feature p { font-size: 0.78rem; color: var(--text-dim); line-height: 1.5; } @media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } } /* ========== COMMON ANIMATIONS ========== */ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ========== SCROLL REVEAL (opt-in) ========== */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; }