/* ======================================================================== beHired — design system ======================================================================== */ :root { /* Fonts (overridable via Tweaks) */ --font-display: "Space Grotesk", "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Accents (overridable via Tweaks theme) */ --accent: oklch(0.599 0.234 27.4); /* brand red — matches the logo (#eb1b21) */ --accent-press: oklch(0.529 0.208 27.4); --accent-soft: oklch(0.599 0.234 27.4 / 0.12); --grow: oklch(0.585 0.10 162); /* evergreen growth */ --grow-soft: oklch(0.585 0.10 162 / 0.14); /* Neutrals — warm */ --ink: oklch(0.22 0.012 250); --ink-2: oklch(0.40 0.012 250); --ink-3: oklch(0.55 0.010 250); --line: oklch(0.90 0.006 250); --line-2: oklch(0.94 0.005 250); --surface: oklch(1 0 0); --surface-2: oklch(0.985 0.004 80); --canvas: oklch(0.975 0.006 80); --halo: oklch(0.96 0.008 80); /* Dark-section ink panel */ --night: oklch(0.205 0.018 264); --night-2: oklch(0.262 0.020 264); --night-line: oklch(0.34 0.020 264); --night-ink: oklch(0.97 0.006 80); --night-ink-2: oklch(0.74 0.010 264); --radius: 16px; --radius-sm: 10px; --radius-lg: 26px; --shadow-sm: 0 1px 2px oklch(0.2 0.02 264 / 0.06), 0 1px 1px oklch(0.2 0.02 264 / 0.04); --shadow: 0 4px 24px -8px oklch(0.2 0.02 264 / 0.14), 0 2px 6px -3px oklch(0.2 0.02 264 / 0.10); --shadow-lg: 0 24px 60px -20px oklch(0.2 0.02 264 / 0.26), 0 8px 24px -12px oklch(0.2 0.02 264 / 0.14); --maxw: 1200px; --gut: clamp(20px, 5vw, 56px); } /* Theme variants applied on */ [data-theme="pine"] { --accent: oklch(0.55 0.11 162); --accent-press: oklch(0.47 0.10 162); --accent-soft: oklch(0.55 0.11 162 / 0.13); --grow: oklch(0.60 0.13 52); --grow-soft: oklch(0.60 0.13 52 / 0.15); } [data-theme="indigo"] { --accent: oklch(0.55 0.16 274); --accent-press: oklch(0.47 0.15 274); --accent-soft: oklch(0.55 0.16 274 / 0.13); --grow: oklch(0.62 0.13 192); --grow-soft: oklch(0.62 0.13 192 / 0.15); } /* Dark mode */ [data-mode="dark"] { --ink: oklch(0.96 0.006 80); --ink-2: oklch(0.78 0.010 264); --ink-3: oklch(0.64 0.012 264); --line: oklch(0.34 0.018 264); --line-2: oklch(0.30 0.018 264); --surface: oklch(0.245 0.018 264); --surface-2: oklch(0.225 0.018 264); --canvas: oklch(0.19 0.018 264); --halo: oklch(0.235 0.018 264); --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.4); --shadow: 0 8px 30px -10px oklch(0 0 0 / 0.55); --shadow-lg: 0 30px 70px -24px oklch(0 0 0 / 0.7); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.5; overflow-x: hidden; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); } .mono { font-family: var(--font-mono); } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 600; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gut); } .section { padding-block: clamp(64px, 9vw, 128px); } /* Buttons */ .btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; border: none; border-radius: 999px; padding: 13px 22px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; transition: transform .14s ease, background .18s ease, box-shadow .2s ease, color .18s ease, border-color .18s ease; white-space: nowrap; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: var(--accent); color: oklch(0.99 0 0); box-shadow: 0 6px 18px -6px var(--accent); } .btn-primary:hover { background: var(--accent-press); box-shadow: 0 10px 26px -8px var(--accent); } .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); } .btn-ghost:hover { border-color: var(--ink-3); background: var(--halo); } .btn-dark { background: var(--ink); color: var(--canvas); } .btn-dark:hover { background: var(--ink-2); } .pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grow); box-shadow: 0 0 0 4px var(--grow-soft); } /* Reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } } ::selection { background: var(--accent-soft); } /* Focus */ :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 6px; } #root { min-height: 100vh; }