/* ================================================================= body to be. — Public Design System Orange on near-black, aligned with the mobile app (SC palette). Shared tokens + atoms used across landing, auth and legal pages. ================================================================= */ :root { /* Surfaces */ --bg: #020817; /* app background (near-black) */ --bg-elev: #0B1120; /* headers / raised surfaces */ --card: #0F172A; /* standard card */ --card-2: #131D33; /* nested / alt card */ --input: #0B1120; /* input fields */ /* Borders */ --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.13); /* Brand orange */ --primary: #F97316; --primary-dark: #EA580C; --primary-light: #FB923C; --primary-soft: rgba(249,115,22, 0.14); --primary-softer: rgba(249,115,22, 0.07); --primary-glow: rgba(249,115,22, 0.45); /* Text */ --text: #FFFFFF; --text-muted: #94A3B8; --text-dim: #64748B; /* Status */ --success: #22C55E; --warning: #F5A623; --danger: #EF4444; --info: #38BDF8; /* Radius */ --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* Shadow */ --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-md: 0 16px 40px rgba(0, 0, 0, 0.45); --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.55); --shadow-primary: 0 14px 38px rgba(249,115,22, 0.35); /* Type */ --font-display: 'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif; --font-body: 'Instrument Sans', system-ui, -apple-system, sans-serif; } /* ---------------- Reset & base ---------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); background-color: var(--bg); color: var(--text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } ul { list-style: none; } ::selection { background: var(--primary); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: #232a36; border-radius: 999px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #2e3744; } /* Ambient background glow — drop on or a wrapper */ .b2b-ambient { position: relative; } .b2b-ambient::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(620px circle at 12% -5%, rgba(249,115,22, 0.16), transparent 55%), radial-gradient(720px circle at 95% 8%, rgba(249,115,22, 0.08), transparent 50%), radial-gradient(900px circle at 50% 110%, rgba(249,115,22, 0.10), transparent 55%); } /* ---------------- Typography helpers ---------------- */ .b2b-display { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } .b2b-accent { color: var(--primary); } .b2b-accent-italic { font-style: italic; color: var(--primary); font-family: var(--font-display); } /* Eyebrow / kicker */ .b2b-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary-light); } /* Pill badge */ .b2b-badge { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: var(--r-pill); background: var(--primary-soft); border: 1px solid rgba(249,115,22, 0.25); color: var(--primary-light); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* ---------------- Buttons ---------------- */ .b2b-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border: 1px solid transparent; border-radius: var(--r-pill); font-family: var(--font-body); font-size: 0.97rem; font-weight: 700; line-height: 1; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.25s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; -webkit-tap-highlight-color: transparent; } .b2b-btn:active { transform: translateY(1px) scale(0.99); } .b2b-btn-primary { background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); color: #fff; box-shadow: var(--shadow-primary); } .b2b-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 20px 48px rgba(249,115,22, 0.45); } .b2b-btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); } .b2b-btn-outline:hover { border-color: var(--primary); color: var(--primary-light); background: var(--primary-softer); } .b2b-btn-ghost { background: var(--card); border-color: var(--border); color: var(--text); } .b2b-btn-ghost:hover { border-color: var(--border-strong); background: var(--card-2); } .b2b-btn-light { background: #fff; color: #11151d; } .b2b-btn-light:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .b2b-btn-lg { padding: 16px 32px; font-size: 1.04rem; } .b2b-btn-block { width: 100%; } /* ---------------- Form controls ---------------- */ .b2b-field { margin-bottom: 1.15rem; } .b2b-label { display: block; margin-bottom: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .b2b-label.required::after { content: ' *'; color: var(--primary); } .b2b-input-wrap { position: relative; } .b2b-input { width: 100%; padding: 14px 16px; background: var(--input); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-family: var(--font-body); font-size: 0.98rem; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .b2b-input::placeholder { color: var(--text-dim); } .b2b-input:focus { outline: none; border-color: var(--primary); background: #0B1120; box-shadow: 0 0 0 4px var(--primary-soft); } .b2b-input.has-icon { padding-left: 46px; } .b2b-input.error, .b2b-input.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.14); } .b2b-input-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-dim); font-size: 1.05rem; pointer-events: none; } .b2b-input:focus ~ .b2b-input-icon { color: var(--primary); } .b2b-pass-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); padding: 8px; font-size: 1.05rem; } .b2b-pass-toggle:hover { color: var(--text); } .b2b-invalid-feedback { display: block; margin-top: 0.4rem; font-size: 0.8rem; color: var(--danger); } /* ---------------- Surfaces ---------------- */ .b2b-surface { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); } .b2b-surface-2 { background: var(--card-2); border: 1px solid var(--border); border-radius: var(--r-md); } /* ---------------- Alerts ---------------- */ .b2b-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border); font-size: 0.92rem; margin-bottom: 1.25rem; } .b2b-alert i { font-size: 1.2rem; flex-shrink: 0; } .b2b-alert ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; } .b2b-alert-danger { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } .b2b-alert-success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.3); color: #86efac; } .b2b-alert-info { background: rgba(56, 189, 248, 0.09); border-color: rgba(56, 189, 248, 0.28); color: #7dd3fc; } .b2b-alert-warning { background: rgba(245, 166, 35, 0.10); border-color: rgba(245, 166, 35, 0.3); color: #fcd34d; } /* ---------------- Section header ---------------- */ .b2b-section-head { text-align: center; max-width: 680px; margin: 0 auto 3.5rem; } .b2b-section-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 4vw, 2.9rem); letter-spacing: -0.02em; line-height: 1.12; margin: 1rem 0 0.9rem; } .b2b-section-sub { color: var(--text-muted); font-size: 1.05rem; line-height: 1.65; } /* ---------------- Reveal animation ---------------- */ @keyframes b2bFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes b2bSpin { to { transform: rotate(360deg); } } .b2b-spin { display: inline-block; animation: b2bSpin 0.8s linear infinite; } .b2b-spinner { width: 18px; height: 18px; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; animation: b2bSpin 0.7s linear infinite; display: inline-block; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.05ms !important; scroll-behavior: auto !important; } }