@font-face { font-family: 'SetupGrotesk'; src: url('/static/fonts/SetupGrotesk-Light.woff2') format('woff2'), url('/static/fonts/SetupGrotesk-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'SetupGrotesk'; src: url('/static/fonts/SetupGrotesk-Bold.woff2') format('woff2'), url('/static/fonts/SetupGrotesk-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Brand */ --white: #fff; --black: #000; --light-green: #01f9c4; --light-green-darker: #00cba7; --dark-green: #002a24; --dark-green-hover: #001a16; --dark-green-mid: #003d35; --dark-green-lighter: #026a54; --action-orange: #f6511d; --action-orange-hover: #e04615; --action-orange-light: #ff7a45; /* Azure blue that sits between light-green and action-orange. */ --action-blue: #2f7bf0; --action-blue-hover: #2568d4; /* Grays */ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-900: #111827; /* Semantic */ --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --success: #16a34a; --success-strong: #15803d; --warning: #ca8a04; --orange-600: #e37014; --orange-700: #c45c0a; --purple-600: #7c3aed; --purple-700: #6d28d9; /* Soft tints */ --dark-green-tint: rgba(0, 42, 36, 0.06); --dark-green-ring: rgba(0, 42, 36, 0.1); --action-orange-tint: rgba(246, 81, 29, 0.06); --action-orange-ring: rgba(246, 81, 29, 0.15); --action-blue-tint: rgba(47, 123, 240, 0.08); --action-blue-ring: rgba(47, 123, 240, 0.18); --red-tint: rgba(220, 38, 38, 0.05); --red-ring: rgba(220, 38, 38, 0.28); --warning-tint: rgba(234, 179, 8, 0.06); --warning-ring: rgba(234, 179, 8, 0.28); --light-green-tint: rgba(1, 249, 196, 0.06); --light-green-selected: rgba(1, 249, 196, 0.12); --light-green-highlight: rgba(1, 249, 196, 0.45); --light-green-darker-ring: rgba(0, 203, 167, 0.12); --light-green-darker-border: rgba(0, 203, 167, 0.35); --light-green-darker-border-soft: rgba(0, 203, 167, 0.2); --success-tint: rgba(22, 163, 74, 0.1); --orange-tint: rgba(227, 112, 20, 0.16); --purple-tint: rgba(124, 58, 237, 0.12); /* Surfaces and effects */ --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1); --shadow-primary: 0 2px 6px rgba(0, 42, 36, 0.2); --shadow-profile-glow: 0 1px 2px rgba(0, 42, 36, 0.04), 0 10px 28px -12px rgba(0, 42, 36, 0.16), 0 0 0 1px rgba(2, 106, 84, 0.08), 0 0 36px -8px rgba(1, 249, 196, 0.22); --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 100px; /* Layout */ --topbar-height: 56px; --topbar-padding-x: 2rem; --sidebar-w: 260px; --sidebar-w-collapsed: 64px; /* Breakpoints (informational; CSS @media can't read custom props) */ --bp-sm: 640px; --bp-md: 900px; --bp-lg: 1280px; --font-sans: 'SetupGrotesk', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'; --font-sans-cockpit: Arial, Helvetica, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } /* Reserve the scrollbar gutter on every page so navigating between a non-scrolling page (e.g. the landing hero) and a scrolling one doesn't shift fixed left-aligned content like the navbar logo. */ html { scrollbar-gutter: stable; } /* Form elements don't inherit font-family from by default. */ input, textarea, select, button { font-family: inherit; } body { font-family: var(--font-sans); font-weight: 300; color: var(--gray-900); background: linear-gradient(135deg, var(--dark-green) 0%, var(--dark-green-mid) 50%, var(--dark-green-lighter) 100%); background-attachment: fixed; line-height: 1.6; font-size: 16px; min-height: 100vh; } img.emoji { height: 1em; width: 1em; margin: 0 0.05em 0 0.1em; vertical-align: -0.1em; display: inline; } h1, h2, h3, h4, h5, h6 { font-weight: 700; } strong, b { font-weight: lighter; } body.cockpit-app { font-family: var(--font-sans-cockpit); } /* Utility classes */ .form-reset { margin: 0 !important; } .hidden { display: none !important; }