/* ============================================================================ Opus Futura Workplace — Design Tokens Source of truth for the redesign. Drop this file into wwwroot/css/ and import it BEFORE every other stylesheet (including site.css / Bootstrap). Tokens are CSS custom properties on :root — overrideable per-section if you ever need a themed area. Values were derived from the "60-second hire" motion piece and existing main.css. When the two disagreed, the video wins (cleaner ink, softer shadow, brand-tinted chips). ============================================================================ */ /* ── Type ────────────────────────────────────────────────────────────────── */ /* Self-host Poppins from /wwwroot/fonts/poppins/. Do not load Google Fonts at runtime — air-gapped customers and CSP rules forbid it. */ @font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; src: url("../fonts/poppins/Poppins-Light.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; src: url("../fonts/poppins/Poppins-Italic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; src: url("../fonts/poppins/Poppins-Medium.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; src: url("../fonts/poppins/Poppins-ExtraBold.ttf") format("truetype"); font-display: swap; } :root { /* ── Brand ──────────────────────────────────────────────────────────── */ --of-brand: #5231ff; /* Workplace primary — buttons, focus, links */ --of-brand-hover: #6346ff; --of-brand-tint: #f5f3fd; /* tinted backgrounds, avatar wells, btn-secondary */ --of-brand-ring: rgba(82, 49, 255, 0.20); /* focus ring */ --of-brand-shadow: rgba(82, 49, 255, 0.23); /* button drop */ --of-talent: #9a69fa; /* Talent app primary — DO NOT use in Workplace */ --of-talent-hover: #a77cfc; --of-yellow: #ffd101; /* footer / brand signature */ --of-ink: #2a2620; /* nearly black, warm — caption boxes, big nums */ --of-ink-soft: #6b655a; /* ── Surfaces ───────────────────────────────────────────────────────── */ --of-surface-page: #f9f9f9; /* default app background */ --of-surface-alt: #fdfcff; /* lavender-white, alternating section */ --of-surface-card: #ffffff; --of-surface-card-hi: #f0f0f0; --of-surface-nav: #ffffff; --of-surface-rail: #f3f3f3; /* sidebar / chip wells */ /* ── Borders ────────────────────────────────────────────────────────── */ --of-border: rgba(0, 0, 0, 0.08); --of-border-strong: rgba(0, 0, 0, 0.16); --of-border-brand: rgba(82, 49, 255, 0.40); /* ── Text ───────────────────────────────────────────────────────────── */ --of-text: #444444; /* body */ --of-text-strong: #333333; /* headings */ --of-text-muted: #777777; /* helper, placeholder */ --of-text-faint: #999999; /* disabled, decorative */ --of-text-on-brand: #ffffff; --of-text-link: var(--of-brand); /* ── Status (panels, banners, dots) ─────────────────────────────────── */ --of-status-draft: #999999; --of-status-processing: #309df0; --of-status-active: #52b963; --of-status-completed: #f8be38; --of-status-canceled: #dc3545; --of-success: #52b963; --of-info: #309df0; --of-warning: #f8be38; --of-danger: #dc3545; /* Soft tints for status pill backgrounds (always pair with same-hue fg). */ --of-success-tint: #e7f7ea; --of-success-fg: #2c7a3e; --of-info-tint: #eaf2ff; --of-info-fg: #2e5fd4; --of-warning-tint: #fff6e1; --of-warning-fg: #b77d01; --of-danger-tint: #fdecee; --of-danger-fg: #b32232; /* ── Match-board column palette ─────────────────────────────────────── */ /* Five-column pipeline. The hue identifies the column at a glance. */ --of-col-reviewing-bg: var(--of-brand-tint); --of-col-reviewing-fg: var(--of-brand); --of-col-interviewing-bg: #fff9e1; --of-col-interviewing-fg: #d6af01; --of-col-hiring-bg: #f0fefc; --of-col-hiring-fg: #48d3bb; --of-col-other-bg: #f0f0f0; --of-col-other-fg: #444444; /* ── Skill / importance ladder ──────────────────────────────────────── */ --of-skill-expert: #52b963; --of-skill-strong: #309df0; --of-skill-medium: #9a61c8; --of-skill-basic: #f8be38; --of-importance-0: #999999; /* not set */ --of-importance-1: #309df0; /* nice to have */ --of-importance-2: #9a61c8; /* important */ --of-importance-3: #f8be38; /* very important */ --of-importance-4: #f88800; /* critical */ --of-importance-5: #52b963; /* must-have */ --of-star: #ffc107; /* ── Radii ──────────────────────────────────────────────────────────── */ --of-radius-xs: 4px; --of-radius-sm: 6px; --of-radius-md: 8px; /* buttons, inputs */ --of-radius-lg: 10px; /* cards */ --of-radius-xl: 14px; /* app shell, modals */ --of-radius-pill: 999px; /* ── Elevation ──────────────────────────────────────────────────────── */ /* Three steps. Don't invent more — match an existing one. */ --of-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --of-shadow-md: 0 2px 15px rgba(0, 0, 0, 0.08); --of-shadow-lg: 0 8px 24px -10px rgba(20, 20, 40, 0.18), 0 40px 80px -30px rgba(20, 20, 40, 0.35); /* Hard-offset accent shadow used for caption-style callouts and the yellow CTA cards on the marketing surface. Charcoal, no blur. */ --of-shadow-stamp: 8px 8px 0 rgba(0, 0, 0, 0.18); /* ── Spacing scale ──────────────────────────────────────────────────── */ /* 4-pt base. Use the variable, not the literal — keeps rhythm consistent. */ --of-space-1: 4px; --of-space-2: 8px; --of-space-3: 12px; --of-space-4: 16px; --of-space-5: 20px; --of-space-6: 24px; --of-space-8: 32px; --of-space-10: 40px; --of-space-12: 48px; --of-space-16: 64px; /* ── Type scale ─────────────────────────────────────────────────────── */ --of-font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; --of-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --of-fs-eyebrow: 12px; /* uppercase, tracked */ --of-fs-caption: 12px; --of-fs-body-sm: 13px; --of-fs-body: 14px; /* default */ --of-fs-body-lg: 16px; --of-fs-h6: 15px; --of-fs-h5: 16px; --of-fs-h4: 18px; --of-fs-h3: 20px; --of-fs-h2: 28px; --of-fs-h1: 32px; --of-fs-display: 44px; /* dashboard hero numbers */ --of-lh-tight: 1.2; --of-lh-snug: 1.35; --of-lh-normal: 1.5; /* ── Motion ─────────────────────────────────────────────────────────── */ --of-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --of-dur-fast: 120ms; --of-dur-base: 200ms; --of-dur-slow: 320ms; /* ── Layout ─────────────────────────────────────────────────────────── */ --of-app-nav-h: 56px; --of-app-max-w: 1280px; --of-content-pad-x: 28px; --of-content-pad-y: 24px; /* ── Focus ──────────────────────────────────────────────────────────── */ --of-focus-ring: 0 0 0 3px var(--of-brand-ring); } /* ── Reset / base ────────────────────────────────────────────────────────── */ html { font-size: 16px; } body { font-family: var(--of-font-sans); font-size: var(--of-fs-body); color: var(--of-text); background: var(--of-surface-page); line-height: var(--of-lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--of-font-sans); color: var(--of-text-strong); margin: 0 0 var(--of-space-3); text-wrap: balance; } h1 { font-size: var(--of-fs-h1); font-weight: 600; line-height: var(--of-lh-tight); letter-spacing: -0.01em; } h2 { font-size: var(--of-fs-h2); font-weight: 600; line-height: var(--of-lh-snug); letter-spacing: -0.005em; } h3 { font-size: var(--of-fs-h3); font-weight: 700; line-height: var(--of-lh-snug); } h4 { font-size: var(--of-fs-h4); font-weight: 600; } h5 { font-size: var(--of-fs-h5); font-weight: 600; } h6 { font-size: var(--of-fs-h6); font-weight: 500; color: var(--of-text-muted); } p { margin: 0 0 var(--of-space-3); text-wrap: pretty; } a { color: var(--of-text-link); text-decoration: none; transition: color var(--of-dur-fast) var(--of-ease); } a:hover { color: var(--of-brand-hover); text-decoration: underline; } :where(button, [role="button"]):focus-visible, :where(input, select, textarea, a):focus-visible { outline: none; box-shadow: var(--of-focus-ring); border-radius: var(--of-radius-sm); } /* Eyebrow — used above hero/section titles. Sparingly. */ .of-eyebrow { font-size: var(--of-fs-eyebrow); font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--of-brand); }