/* ====== Base: variables, reset, typography ====== */ /* ============================================================ NexaHost — Custom Styles Palette: white background + brand green #176F46 Fonts: Space Grotesk (display), Inter (body), Space Mono (data) ============================================================ */ :root { --brand: #176F46; /* primary brand green */ --brand-dark: #0F4D30; /* deeper green */ --brand-700: #135C3A; --brand-soft: #E8F3EE; /* light green tint */ --brand-tint: #F1F8F4; /* section tint background */ --brand-border: #D5E8DD; --ink: #0E2A1C; /* headings / dark text */ --body: #2E4338; /* body text */ --muted: #6B7A72; /* muted text */ --line: #E6ECE9; /* hairlines */ --white: #ffffff; --dark-bg: #0E2A1C; /* dark section background */ --radius: 16px; --radius-sm: 12px; --shadow-sm: 0 4px 14px rgba(14, 42, 28, .06); --shadow-md: 0 14px 40px rgba(14, 42, 28, .10); --shadow-brand: 0 18px 44px rgba(23, 111, 70, .28); --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'Space Mono', ui-monospace, monospace; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; } body { font-family: var(--font-body); color: var(--body); background: var(--white); -webkit-font-smoothing: antialiased; overflow-x: clip; width: 100%; } h1, h2, h3, h4, h5 { font-family: var(--font-display); color: var(--ink); } a { text-decoration: none; } .container { max-width: 1180px; } ::selection { background: var(--brand); color: #fff; } /* ---------------- Buttons ---------------- */ .btn { font-weight: 600; border-radius: 999px; padding: .65rem 1.4rem; transition: .2s ease; } .btn-brand { background: var(--brand); border: 1px solid var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(23,111,70,.22); } .btn-brand:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-brand); } .btn-outline-brand { background: transparent; border: 1.5px solid var(--brand-border); color: var(--brand); } .btn-outline-brand:hover { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-ghost { background: var(--brand-soft); border: 1px solid transparent; color: var(--brand-dark); } .btn-ghost:hover { background: var(--brand-border); color: var(--brand-dark); } .btn-lg { padding: .85rem 1.8rem; font-size: 1rem; } /* ---------------- Eyebrow / labels ---------------- */ .eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--brand); font-weight: 700; margin-bottom: 1rem; } .eyebrow--center { justify-content: center; } .eyebrow--light { color: #9FE3C2; } .eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(23,111,70,.4); } 70% { box-shadow: 0 0 0 8px rgba(23,111,70,0); } 100% { box-shadow: 0 0 0 0 rgba(23,111,70,0); } } /* ---------------- Reveal on scroll ---------------- */ /* Hidden state only applies when JS adds .js-reveal to , so content is always visible if JS is disabled or fails. */ .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-in { opacity: 1; transform: none; }