/* ========================================================================== DEXS Recruit — Components ========================================================================== */ /* Button ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; gap: 0.625rem; height: 56px; padding: 0 2rem; border-radius: 0; font-family: var(--text-display); font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.04em; text-transform: uppercase; transition: transform var(--dur-fast) var(--ease-out-expo), background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), filter var(--dur-fast); white-space: nowrap; border: 1px solid transparent; cursor: pointer; } .btn--primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); } .btn--primary:hover { filter: brightness(1.08); transform: translateY(-2px); } .btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-line); } .btn--secondary:hover { border-color: var(--color-accent); color: var(--color-accent); } .btn--ghost { height: 40px; padding: 0 1rem; color: var(--color-muted); background: transparent; } .btn--ghost:hover { color: var(--color-text); } .btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } .btn .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out-expo); } .btn:hover .arrow { transform: translateX(3px); } /* KPI card (hero) --------------------------------------------------------- */ .kpi { display: grid; grid-template-columns: 1fr auto; align-items: baseline; padding: clamp(1.25rem, 2vw, 1.75rem) 0; gap: 1rem; } .kpi + .kpi { border-top: 1px solid var(--color-line); } .kpi__label { font-family: var(--text-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); } .kpi__label::before { content: "["; color: var(--color-line); margin-right: 0.4em; } .kpi__label::after { content: "]"; color: var(--color-line); margin-left: 0.4em; } .kpi__value { font-family: var(--text-display); font-weight: 600; font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-text); letter-spacing: -0.02em; } .kpi__value .suffix { font-size: 0.55em; color: var(--color-muted); margin-left: 0.25rem; font-weight: 400; } /* Reveal animation utility ------------------------------------------------ Default: visible. Only when has the .js-reveal class (set by JS on load, before paint) do elements start hidden and animate in. This guarantees graceful degradation if JS fails or IO never fires. */ .reveal, .reveal-stagger > * { opacity: 1; transform: none; } .js-reveal .reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); will-change: opacity, transform; } .js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger children */ .js-reveal .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); transition-delay: calc(var(--i, 0) * 80ms); } .js-reveal .reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); } /* prefers-reduced-motion: never hide */ @media (prefers-reduced-motion: reduce) { .js-reveal .reveal, .js-reveal .reveal-stagger > * { opacity: 1 !important; transform: none !important; } }