/* ========================================================================== STACK IT - theme-layer utilities -------------------------------------------------------------------------- Theme scaffolding only. NOT part of the design-system cascade - the foundations/components/organisms/patterns files stay hash-identical to canonical and are never edited locally. Anything here is WordPress-theme plumbing (skip-link focus behaviour, basic prose width) that consumes design-system tokens but doesn't belong in the system files. ========================================================================== */ /* Skip link - visually hidden until focused (WCAG 2.1 AA, build-plan requirement). Pairs with .stk-sr-only from components.css: hidden by default, revealed on focus. */ .stk-skip-link:focus { position: fixed; top: 12px; left: 12px; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; clip-path: none; overflow: visible; white-space: normal; z-index: 1000; background: var(--stk-blue); color: var(--stk-white); font-family: var(--stk-display); font-weight: 700; border-radius: var(--stk-r-btn); box-shadow: 0 8px 28px -12px rgba(37, 99, 235, .5); outline: 2px solid var(--stk-white); outline-offset: 2px; } /* Basic readable prose width for default/fallback content (index.php). */ .stk-prose { max-width: var(--stk-container-narrow); } .stk-prose p { margin: 0 0 1.25em; } /* Legal / policy pages: "last updated" meta + long-form prose body. */ .stk-legal-updated { font-size: 13px; color: var(--stk-ink-3); margin: 18px 0 0; } .stk-legal { max-width: var(--stk-container-narrow); margin: 0 auto; } .stk-legal > :first-child { margin-top: 0; } .stk-legal p { margin: 0 0 1.25em; font-size: 15.5px; line-height: 1.7; color: var(--stk-ink-2); } .stk-legal h2 { font-family: var(--stk-display); font-weight: 700; font-size: 22px; line-height: 1.3; color: var(--stk-navy-900); margin: 2em 0 .55em; } .stk-legal h3 { font-family: var(--stk-display); font-weight: 700; font-size: 17px; line-height: 1.35; color: var(--stk-navy-900); margin: 1.6em 0 .5em; } .stk-legal ul, .stk-legal ol { margin: 0 0 1.25em; padding-left: 1.35em; font-size: 15.5px; line-height: 1.7; color: var(--stk-ink-2); } .stk-legal li { margin: 0 0 .5em; } .stk-legal li::marker { color: var(--stk-blue); } .stk-legal a { color: var(--stk-blue); text-decoration: underline; text-underline-offset: 2px; } .stk-legal a:hover { text-decoration: none; } .stk-legal strong { color: var(--stk-navy-900); font-weight: 700; } .stk-legal hr { border: 0; border-top: 1px solid #e6edf6; margin: 2.5em 0; } /* Legal hero: extend the grid mask so the pattern fills the shorter hero. Same 48px grid and .045 line weight as every other hero, just masked to cover more of the (shorter) panel instead of fading out near the title. */ .stk-sghero--legal .stk-sghero__grid { -webkit-mask-image: radial-gradient(ellipse 120% 105% at 50% 0%, #000 0%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 120% 105% at 50% 0%, #000 0%, #000 62%, transparent 100%); } /* ========================================================================== Role-page composite blocks (theme layer) Built from design-system tokens; not part of the canonical CSS. Used by single-stk_role.php for sections the design system didn't pre-build. ========================================================================== */ /* Hero trait chips */ .stk-role-traits { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; } .stk-role-trait { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; background: rgba(96, 165, 250, .12); border: 1px solid rgba(96, 165, 250, .25); color: var(--stk-blue-200, #bfdbfe); font-family: var(--stk-display); font-size: 13px; font-weight: 600; } /* Specialization meta (skills / use cases) */ .stk-spec-meta { margin-top: 14px; display: grid; gap: 8px; } .stk-spec-meta__row { font-size: 13px; line-height: 1.5; color: var(--stk-ink-3); } .stk-spec-meta__label { display: inline-block; font-family: var(--stk-display); font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--stk-blue); margin-right: 6px; } /* Cost-of-delay callout */ .stk-role-cost { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 40px; padding: 28px 32px; border-radius: var(--stk-r-lg, 16px); background: radial-gradient(ellipse at top right, rgba(37,99,235,.12) 0%, transparent 60%), linear-gradient(135deg, var(--stk-navy-900) 0%, var(--stk-navy-800) 100%); border: 1px solid rgba(96,165,250,.2); } .stk-role-cost__text { color: var(--stk-muted-3); font-size: 15px; line-height: 1.6; max-width: 60ch; } .stk-role-cost__figure { color: var(--stk-blue-400); font-family: var(--stk-display); font-weight: 800; } /* Where-hires-break-down signal list */ .stk-role-signals { display: grid; gap: 12px; max-width: var(--stk-container-narrow); } .stk-role-signal { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--stk-r-md, 12px); background: var(--stk-danger-bg, #fef2f2); border: 1px solid var(--stk-danger-bd, #fecaca); font-size: 14px; line-height: 1.55; color: var(--stk-ink-2); } .stk-role-signal svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--stk-danger, #dc2626); margin-top: 1px; } /* Real-world wins */ .stk-role-wins { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 8px; } .stk-role-win { padding: 24px; border-radius: var(--stk-r-lg, 16px); background: var(--stk-white); border: 1px solid var(--stk-border); box-shadow: var(--stk-shadow-sm, 0 1px 3px rgba(0,0,0,.06)); font-size: 14.5px; line-height: 1.6; color: var(--stk-ink-2); } .stk-role-win::before { content: ""; display: block; width: 36px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #60a5fa, #93c5fd); margin-bottom: 14px; } /* Role-specific screening focus grid */ .stk-role-screening { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 40px; } .stk-role-screen-area { padding: 20px; border-radius: var(--stk-r-md, 12px); background: var(--stk-surface-1); border: 1px solid var(--stk-border); } .stk-role-screen-area__title { font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: var(--stk-ink); margin: 0 0 6px; } .stk-role-screen-area__desc { font-size: 13.5px; line-height: 1.55; color: var(--stk-ink-3); margin: 0; } /* ========================================================================== Trust section v2 (theme layer) - template-parts/trust.php Production reviews block: atmosphere, rating strip, Google Business chips, review cards, benefits strip. Built from --stk- tokens. ========================================================================== */ .stk-trust2 { position: relative; overflow: hidden; padding: var(--stk-section-y-lg) 24px; background: linear-gradient(145deg, #071224 0%, var(--stk-navy-900) 40%, #0d2554 70%, var(--stk-navy-900) 100%); } .stk-trust2__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(37,99,235,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(37,99,235,.07) 1px, transparent 1px); background-size: 52px 52px; } .stk-trust2__blob { position: absolute; pointer-events: none; } .stk-trust2__blob--1 { top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 420px; background: radial-gradient(ellipse, rgba(37,99,235,.18) 0%, transparent 65%); } .stk-trust2__blob--2 { bottom: -100px; right: -120px; width: 520px; height: 520px; background: radial-gradient(ellipse, rgba(96,165,250,.08) 0%, transparent 65%); } .stk-trust2__inner { position: relative; z-index: 1; max-width: var(--stk-container-wide, 1280px); margin: 0 auto; } /* Rating strip */ .stk-trust2__strip { max-width: 720px; margin: 0 auto 48px; padding: 28px 32px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .stk-trust2__strip-row { display: flex; align-items: center; gap: 18px; } .stk-trust2__num { font-family: var(--stk-display); font-size: 52px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -.02em; } .stk-trust2__rate { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .stk-trust2__stars { display: flex; gap: 2px; color: #f4b400; } .stk-trust2__stars svg { width: 18px; height: 18px; } .stk-trust2__verified { font-family: var(--stk-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--stk-blue-400); } .stk-trust2__line { font-size: 14px; color: #cbd5e1; line-height: 1.5; } .stk-trust2__line strong { color: #fff; font-weight: 600; } .stk-trust2__chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .stk-trust2__chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-family: var(--stk-display); font-size: 12.5px; font-weight: 600; color: #fff !important; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, transform .15s ease; } .stk-trust2__chip:hover { background: rgba(96,165,250,.15); border-color: rgba(96,165,250,.4); transform: translateY(-1px); } .stk-trust2__chip-g { width: 13px; height: 13px; flex-shrink: 0; } .stk-trust2__chip-arrow { width: 10px; height: 10px; color: var(--stk-blue-400); transition: transform .18s ease; } .stk-trust2__chip:hover .stk-trust2__chip-arrow { transform: translate(2px, -2px); } @media (max-width: 540px) { .stk-trust2__strip { padding: 24px 22px; } .stk-trust2__num { font-size: 42px; } .stk-trust2__strip-row { gap: 14px; } } /* Review cards */ .stk-trust2__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 48px; } @media (max-width: 900px) { .stk-trust2__cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .stk-trust2__cards { grid-template-columns: 1fr; } } .stk-trust-card { background: #fff; border-radius: 16px; padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: transform .22s ease, box-shadow .22s ease; } .stk-trust-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.18); } .stk-trust-card__pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--stk-blue-50, #eff6ff); border: 1px solid var(--stk-blue-200, #bfdbfe); color: #1d4ed8; font-family: var(--stk-display); font-size: 11.5px; font-weight: 600; padding: 4px 11px 4px 9px; border-radius: 999px; } .stk-trust-card__pill-g { width: 12px; height: 12px; flex-shrink: 0; } .stk-trust-card__stars { display: flex; gap: 1px; color: #f4b400; } .stk-trust-card__stars svg { width: 14px; height: 14px; } .stk-trust-card__body { position: relative; flex: 1; margin: 0; padding-left: 22px; font-size: 14px; line-height: 1.65; color: var(--stk-ink-2); } .stk-trust-card__body::before { content: "\201C"; position: absolute; left: -2px; top: -10px; font-family: var(--stk-display); font-size: 38px; line-height: 1; color: var(--stk-blue-300, #93c5fd); } .stk-trust-card__foot { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--stk-border); } .stk-trust-card__avatar { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--stk-display); font-weight: 700; font-size: 13.5px; color: #fff; flex-shrink: 0; } .stk-trust-card__avatar--1 { background: linear-gradient(135deg, #2563eb, #1e3a8a); } .stk-trust-card__avatar--2 { background: linear-gradient(135deg, #c2410c, #7c2d12); } .stk-trust-card__avatar--3 { background: linear-gradient(135deg, #0f766e, #134e4a); } .stk-trust-card__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .stk-trust-card__name { font-family: var(--stk-display); font-size: 14px; font-weight: 700; color: var(--stk-navy-900); line-height: 1.3; } .stk-trust-card__place { font-size: 12.5px; color: var(--stk-ink-3); } .stk-trust-card__g { width: 32px; height: 32px; border-radius: 8px; background: var(--stk-blue-50, #eff6ff); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stk-trust-card__g svg { width: 16px; height: 16px; } /* Reviews CTA */ .stk-trust2__cta-wrap { display: flex; justify-content: center; margin-bottom: 56px; } .stk-trust2__cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--stk-display); font-size: 14px; font-weight: 700; padding: 14px 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; color: #fff !important; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, gap .22s ease, transform .15s ease; } .stk-trust2__cta:hover { background: rgba(96,165,250,.14); border-color: rgba(96,165,250,.4); gap: 14px; transform: translateY(-1px); } .stk-trust2__cta-arrow { width: 14px; height: 14px; color: var(--stk-blue-400); transition: transform .22s ease; } .stk-trust2__cta:hover .stk-trust2__cta-arrow { transform: translateX(2px); } /* Benefits strip */ .stk-trust2__benefits { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; overflow: hidden; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (max-width: 760px) { .stk-trust2__benefits { grid-template-columns: 1fr; } .stk-trust2__benefit { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); } .stk-trust2__benefit:last-child { border-bottom: none; } } .stk-trust2__benefit { display: flex; align-items: flex-start; gap: 14px; padding: 22px 24px; border-right: 1px solid rgba(255,255,255,.08); } .stk-trust2__benefit:last-child { border-right: none; } .stk-trust2__benefit-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .stk-trust2__benefit-icon svg { width: 20px; height: 20px; color: var(--stk-blue-400); } .stk-trust2__benefit-title { font-family: var(--stk-display); font-size: 14px; font-weight: 700; color: #fff; line-height: 1.3; margin: 0 0 4px; } .stk-trust2__benefit-desc { font-size: 13px; color: #94a3b8; line-height: 1.5; margin: 0; } /* ========================================================================== Partner logos marquee (theme layer) - stackit_partner_marquee() Reusable, filterable. White logos on navy; infinite scroll; hover-pause. ========================================================================== */ .stk-marquee { background: var(--stk-navy-900); padding: 40px 0; position: relative; overflow: hidden; } .stk-marquee__label { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7d92b2; margin: 0 0 24px; } .stk-marquee::before, .stk-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2; pointer-events: none; } .stk-marquee::before { left: 0; background: linear-gradient(to right, var(--stk-navy-900) 0%, transparent 100%); } .stk-marquee::after { right: 0; background: linear-gradient(to left, var(--stk-navy-900) 0%, transparent 100%); } .stk-marquee__track { display: flex; width: max-content; animation: stk-marquee-scroll 55s linear infinite; } .stk-marquee__track:hover { animation-play-state: paused; } @keyframes stk-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .stk-marquee__set { display: flex; align-items: center; gap: 64px; padding: 0 32px; } .stk-marquee__logo { height: 84px; width: auto; max-width: 220px; object-fit: contain; opacity: .55; filter: brightness(0) invert(1); transition: opacity .25s ease; flex-shrink: 0; display: block; } .stk-marquee__logo:hover { opacity: 1; } @media (prefers-reduced-motion: reduce) { .stk-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; } } /* Static mode (stk-marquee--static): too few logos to fill a scroll, so centre them on a single line (no animation, no duplicate set, no edge fades). */ .stk-marquee--static::before, .stk-marquee--static::after { display: none; } .stk-marquee--static .stk-marquee__track { width: 100%; animation: none; flex-wrap: wrap; justify-content: center; } .stk-marquee--static .stk-marquee__set { flex-wrap: wrap; justify-content: center; } .stk-marquee--static .stk-marquee__set[aria-hidden="true"] { display: none; } /* Industry "what we understand" - centered domain-fluency grid. */ .stk-cred { list-style: none; margin: 0 auto; padding: 0; max-width: 920px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 40px 28px; } @media (max-width: 820px) { .stk-cred { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px 24px; } } @media (max-width: 520px) { .stk-cred { grid-template-columns: 1fr; } } .stk-cred__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .stk-cred__ico { width: 52px; height: 52px; border-radius: var(--stk-r-btn); background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); display: grid; place-items: center; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .stk-cred__ico svg { width: 24px; height: 24px; color: var(--stk-blue); transition: color .25s ease; } .stk-cred__item:hover .stk-cred__ico { background: var(--stk-blue); border-color: var(--stk-blue); box-shadow: 0 8px 20px rgba(37,99,235,.25); } .stk-cred__item:hover .stk-cred__ico svg { color: #fff; } .stk-cred__label { font-family: var(--stk-display); font-weight: 700; font-size: 16.5px; color: var(--stk-ink); line-height: 1.3; } .stk-cred__desc { margin: 0; font-size: 14px; line-height: 1.55; color: var(--stk-ink-3); } /* Proof / data band: faithful port of the pillar "market snapshot" (live pillar.css 0.56.6) so industry pages match the approved category-page band - flush columns with dividers, real hover (number lift + accent underline that sweeps in). Scoped under .stk-statband to avoid colliding with the global .stk-stat component in components.css. */ .stk-statband { background: var(--stk-ink, #0f172a); } .stk-statband__grid { display: flex; flex-wrap: wrap; justify-content: center; } .stk-statband .stk-stat { flex: 1 1 200px; max-width: 300px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 34px; text-align: center; border-left: 1px solid rgba(255,255,255,.13); } .stk-statband .stk-stat:first-child { border-left: 0; } .stk-statband .stk-stat__num { font-family: var(--stk-display, sans-serif); font-weight: 800; font-size: clamp(30px, 3.6vw, 42px); line-height: 1; letter-spacing: -.02em; color: #fff; position: relative; transition: transform .25s ease; } .stk-statband .stk-stat__num::after { content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px; background: var(--stk-blue, #2563eb); transform: scaleX(0); transform-origin: center; transition: transform .28s cubic-bezier(.22,.61,.36,1); } .stk-statband .stk-stat:hover .stk-stat__num { transform: translateY(-2px); } .stk-statband .stk-stat:hover .stk-stat__num::after { transform: scaleX(1); } .stk-statband .stk-stat__label { font-family: var(--stk-body, sans-serif); font-size: 13.5px; line-height: 1.45; color: var(--stk-blue-200, #bfdbfe); max-width: 22ch; } .stk-statband .stk-stat__src { font-family: var(--stk-mono, monospace); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); } @media (max-width: 700px) { .stk-statband__grid { gap: 0; } .stk-statband .stk-stat { flex-basis: 100%; max-width: none; border-left: 0; border-top: 1px solid rgba(255,255,255,.13); padding: 22px 0; } .stk-statband .stk-stat:first-child { border-top: 0; } } @media (prefers-reduced-motion: reduce) { .stk-statband .stk-stat__num { transition: none; } .stk-statband .stk-stat:hover .stk-stat__num { transform: none; } .stk-statband .stk-stat__num::after { display: none; } } /* ========================================================================== How-we-vet tabs (theme layer) - page-find-it-talent.php Light section. Tabs use the generic [data-stk-tabs] controller; meters use the [data-stk-meters] animator. Brand-forward (blue), dark text on light. ========================================================================== */ .stk-vet { margin-top: 8px; } .stk-vet__tabswrap { display: flex; justify-content: center; margin-bottom: 28px; } .stk-vet__tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; background: var(--stk-surface-2); border: 1px solid var(--stk-border); border-radius: var(--stk-r-pill); padding: 5px; max-width: 100%; } .stk-vet__tab { background: transparent; border: none; color: var(--stk-ink-3); border-radius: var(--stk-r-pill); padding: 9px 18px; font-family: var(--stk-display); font-weight: 600; font-size: 14px; cursor: pointer; transition: background-color .15s ease, color .15s ease; white-space: nowrap; } .stk-vet__tab:hover { color: var(--stk-ink); } .stk-vet__tab[aria-selected="true"] { background: var(--stk-blue); color: #fff; box-shadow: 0 1px 3px rgba(37,99,235,.3); } .stk-vet__tab:focus-visible { outline: 2px solid var(--stk-blue); outline-offset: 2px; } .stk-vet__catdesc { background: var(--stk-surface-1, #f7faff); border: 1px solid var(--stk-border); border-radius: 10px; padding: 14px 16px; color: var(--stk-ink-2); font-size: 14.5px; line-height: 1.6; margin-bottom: 16px; } .stk-vet__cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; } @media (max-width: 900px) { .stk-vet__cards { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 600px) { .stk-vet__cards { grid-template-columns: 1fr; } } .stk-vet-card { background: #fff; border: 1px solid var(--stk-border); border-radius: 12px; padding: 18px; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .stk-vet-card:hover { box-shadow: 0 6px 20px rgba(37,99,235,.08); border-color: var(--stk-blue-200); transform: translateY(-2px); } .stk-vet-card__title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: var(--stk-navy-900); line-height: 1.3; margin-bottom: 8px; } .stk-vet-card__desc { font-size: 13.5px; color: var(--stk-ink-2); line-height: 1.5; margin: 0; } /* Priority chip (blue-forward) */ .stk-chip { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); color: var(--stk-navy-900); font-family: var(--stk-display); font-size: 11px; font-weight: 700; border-radius: 999px; padding: 4px 9px; white-space: nowrap; } .stk-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stk-blue); } .stk-chip[data-level="High"] { background: #eaf2ff; } .stk-chip[data-level="High"] .stk-chip__dot { background: var(--stk-blue-400); } .stk-chip[data-level="Medium"] { background: var(--stk-surface-2); border-color: var(--stk-border); color: var(--stk-ink-2); } .stk-chip[data-level="Medium"] .stk-chip__dot { background: #94a3b8; } /* Readiness meter */ .stk-meter { margin-top: 12px; } .stk-meter__row { display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: var(--stk-ink-3); margin-bottom: 6px; } .stk-meter__bar { position: relative; height: 8px; background: var(--stk-surface-2); border: 1px solid var(--stk-border); border-radius: 999px; overflow: hidden; } .stk-meter__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--stk-blue), var(--stk-blue-400)); border-radius: 999px; transition: width .7s cubic-bezier(.4,0,.2,1); } @media (prefers-reduced-motion: reduce) { .stk-meter__fill { transition: none; } } /* ========================================================================== Bill 190 compliance section (theme layer) - page-find-it-talent.php Light section + full-bleed dark notice bar (light text - contrast checked). ========================================================================== */ .stk-bill190 { padding-bottom: 0; } .stk-bill190__close { text-align: center; margin: 36px auto 0; max-width: 640px; font-size: 15px; color: var(--stk-ink-2); line-height: 1.6; } .stk-bill190__close a { color: var(--stk-blue); font-weight: 600; text-decoration: none; white-space: nowrap; } .stk-bill190__close a:hover { text-decoration: underline; } .stk-bill190__notice { margin: 56px calc(-1 * var(--stk-section-x)) 0; padding: 28px var(--stk-section-x); background: linear-gradient(135deg, var(--stk-navy-900) 0%, var(--stk-navy-800) 100%); } .stk-bill190__notice p { max-width: var(--stk-container-default, 1080px); margin: 0 auto; text-align: center; color: var(--stk-muted-2); font-size: 14px; line-height: 1.65; } /* ========================================================================== Service pages (theme layer) - Contract & Permanent Steps, cost calculator, comparison table, lighter vetting, dark editorial. ========================================================================== */ /* --- How it works: numbered steps (light section, dark text) --- */ .stk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; } @media (max-width: 760px) { .stk-steps { grid-template-columns: 1fr; gap: 24px; } } .stk-step { padding-top: 18px; border-top: 2px solid var(--stk-blue-200); } .stk-step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--stk-navy-900); color: #fff; font-family: var(--stk-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; margin-bottom: 14px; } .stk-step__title { font-family: var(--stk-display); font-weight: 700; font-size: 17px; color: var(--stk-navy-900); line-height: 1.3; margin: 0 0 8px; } .stk-step__desc { font-size: 14.5px; color: var(--stk-ink-2); line-height: 1.6; margin: 0; } /* --- Cost of Delay calculator (light/surface section, dark text) --- */ .stk-calc { background: #fff; border: 1px solid var(--stk-border); border-radius: 16px; padding: 30px; box-shadow: 0 4px 24px rgba(7,18,36,.06); margin-top: 8px; } .stk-calc__fields { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; } @media (max-width: 560px) { .stk-calc__fields { grid-template-columns: 1fr; gap: 22px; } } .stk-calc__field label { display: block; font-family: var(--stk-display); font-weight: 600; font-size: 13.5px; color: var(--stk-navy-900); margin-bottom: 8px; } .stk-calc__field label span { color: var(--stk-blue); font-variant-numeric: tabular-nums; } .stk-calc__input { width: 100%; padding: 12px 14px; font-size: 15px; font-family: var(--stk-body); color: var(--stk-ink); background: #fff; border: 1px solid var(--stk-border); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; } .stk-calc__input:focus { outline: none; border-color: var(--stk-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .stk-combo { position: relative; } .stk-combo__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; font-size: 15px; font-family: var(--stk-body); color: var(--stk-ink); background: #fff; border: 1px solid var(--stk-border); border-radius: 10px; cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease; } .stk-combo__trigger:hover { border-color: var(--stk-blue-300); } .stk-combo__trigger:focus-visible { outline: none; border-color: var(--stk-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .stk-combo.is-open .stk-combo__trigger { border-color: var(--stk-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .stk-combo__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stk-combo__value.is-placeholder { color: var(--stk-ink-3); } .stk-combo__chev { flex: none; width: 18px; height: 18px; color: var(--stk-ink-3); transition: transform .25s var(--stk-acc-ease), color .25s; } .stk-combo.is-open .stk-combo__chev { transform: rotate(180deg); color: var(--stk-blue); } .stk-combo__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--stk-border); border-radius: 12px; box-shadow: 0 16px 44px -12px rgba(7,18,36,.24); max-height: 288px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; transition: opacity .2s var(--stk-acc-ease), transform .2s var(--stk-acc-ease), visibility .2s; } .stk-combo.is-open .stk-combo__list { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .stk-combo__list:focus { outline: none; } .stk-combo__opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 8px; font-size: 14.5px; line-height: 1.3; color: var(--stk-ink); cursor: pointer; transition: background .12s ease, color .12s ease; } .stk-combo__opt.is-active { background: var(--stk-surface-1); } .stk-combo__opt[aria-selected="true"] { background: var(--stk-blue-50); color: var(--stk-blue); font-weight: 600; } .stk-combo__opt[aria-selected="true"].is-active { background: var(--stk-blue-50); } .stk-combo__opt-check { flex: none; width: 16px; height: 16px; opacity: 0; color: var(--stk-blue); } .stk-combo__opt[aria-selected="true"] .stk-combo__opt-check { opacity: 1; } @media (prefers-reduced-motion: reduce) { .stk-combo__list { transition: opacity .12s linear, visibility .12s; transform: none; } .stk-combo__chev { transition: color .12s; } } .stk-calc__range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: var(--stk-blue-50); outline: none; cursor: pointer; margin: 16px 0 0; } .stk-calc__range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; } .stk-calc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 19px; height: 19px; margin-top: -6.5px; border-radius: 50%; background: var(--stk-blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(37,99,235,.28); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; } .stk-calc__range::-webkit-slider-thumb:hover { transform: scale(1.12); box-shadow: 0 2px 9px rgba(37,99,235,.4); } .stk-calc__range::-moz-range-track { height: 6px; border-radius: 999px; background: var(--stk-blue-50); } .stk-calc__range::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--stk-blue); } .stk-calc__range::-moz-range-thumb { width: 19px; height: 19px; border: 3px solid #fff; border-radius: 50%; background: var(--stk-blue); box-shadow: 0 1px 4px rgba(37,99,235,.28); cursor: pointer; } .stk-calc__range:focus-visible { outline: 2px solid var(--stk-blue); outline-offset: 4px; border-radius: 999px; } .stk-ticker { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; margin: 0 2px; padding: 3px 7px; background: #fff; border: 1px solid var(--stk-border); border-radius: 6px; box-shadow: 0 1px 2px rgba(7,18,36,.07); color: var(--stk-blue); font-variant-numeric: tabular-nums; line-height: 1; } .stk-ticker__window { display: block; width: 2ch; height: 1em; line-height: 1; overflow: hidden; } .stk-ticker__strip { display: flex; flex-direction: column; transition: transform .26s cubic-bezier(.22,.61,.36,1); } .stk-ticker__strip > span { display: flex; align-items: center; justify-content: center; width: 2ch; height: 1em; line-height: 1; } @media (prefers-reduced-motion: reduce) { .stk-ticker__strip { transition: none; } .stk-calc__range::-webkit-slider-thumb { transition: none; } } .stk-calc__scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--stk-muted-2); font-variant-numeric: tabular-nums; } .stk-calc__result { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--stk-border); } .stk-calc__hint { margin: 0; font-size: 14.5px; color: var(--stk-ink-2); line-height: 1.5; } .stk-calc__figures { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .stk-calc__figures[hidden] { display: none; } @media (max-width: 480px) { .stk-calc__figures { grid-template-columns: 1fr; } } .stk-calc__figure { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; background: var(--stk-surface-1); border: 1px solid var(--stk-border); border-radius: 12px; } .stk-calc__figure--accent { background: var(--stk-blue-50); border-color: var(--stk-blue-200); } .stk-calc__fig-num { font-family: var(--stk-display); font-weight: 800; font-size: 32px; line-height: 1; color: var(--stk-navy-900); font-variant-numeric: tabular-nums; } .stk-calc__figure--accent .stk-calc__fig-num { color: var(--stk-blue); } .stk-calc__fig-label { font-size: 12.5px; color: var(--stk-ink-3); } .stk-calc__pitch { margin: 16px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--stk-ink-2); } .stk-calc__note { margin: 18px 0 0; font-size: 12px; color: var(--stk-ink-3); line-height: 1.5; } /* --- Contract vs Permanent comparison (light section, dark text) --- */ .stk-compare__scroll { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; } .stk-compare { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; } .stk-compare th, .stk-compare td { padding: 16px 20px; text-align: left; font-size: 14.5px; border-bottom: 1px solid var(--stk-border); vertical-align: top; } .stk-compare thead th { font-family: var(--stk-display); font-weight: 700; font-size: 16px; color: var(--stk-navy-900); border-bottom: 2px solid var(--stk-border); } .stk-compare__rowhead { font-family: var(--stk-display); font-weight: 600; color: var(--stk-navy-900); width: 28%; } .stk-compare td { color: var(--stk-ink-2); } .stk-compare thead th.stk-compare__col--current { background: var(--stk-blue); color: #fff; border-bottom-color: var(--stk-blue); border-top-left-radius: 10px; border-top-right-radius: 10px; } .stk-compare td.stk-compare__col--current { background: var(--stk-blue-50); color: var(--stk-navy-900); font-weight: 500; } .stk-compare__cross { text-align: center; margin-top: 28px; font-size: 15px; color: var(--stk-ink-2); } .stk-compare__cross a { color: var(--stk-blue); font-family: var(--stk-display); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .stk-compare__cross a:hover { text-decoration: underline; } /* --- Lighter vetting (light/surface section, dark text) --- */ .stk-vetlite { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 8px; } @media (max-width: 860px) { .stk-vetlite { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stk-vetlite { grid-template-columns: 1fr; } } .stk-vetlite__item { display: flex; gap: 14px; align-items: flex-start; } .stk-vetlite__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); } .stk-vetlite__icon svg { width: 20px; height: 20px; color: var(--stk-blue); } .stk-vetlite__title { font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: var(--stk-navy-900); margin: 0 0 4px; } .stk-vetlite__desc { font-size: 13.5px; color: var(--stk-ink-2); line-height: 1.55; margin: 0; } /* --- Editorial (DARK section - explicit light text on custom classes) --- */ .stk-editorial__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px; align-items: center; } @media (max-width: 860px) { .stk-editorial__grid { grid-template-columns: 1fr; gap: 32px; } } .stk-editorial__title { font-family: var(--stk-display); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; color: #fff; margin: 12px 0 18px; } .stk-editorial__body { font-size: 16px; line-height: 1.7; color: var(--stk-muted-2); margin: 0; } .stk-editorial__story { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; padding: 28px; } .stk-editorial__story-label { display: inline-block; font-family: var(--stk-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--stk-blue-400); margin-bottom: 14px; } .stk-editorial__story-quote { font-size: 16px; line-height: 1.6; color: #fff; margin: 0 0 14px; } .stk-editorial__story-resolve { font-size: 14.5px; line-height: 1.6; color: var(--stk-muted-3); margin: 0; } .stk-editorial__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .stk-editorial__list li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.55; color: var(--stk-muted-2); } .stk-editorial__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--stk-blue-400); } /* ========================================================================== Contact page (theme layer) - page-contact.php Form + direct channels (2-col), office NAP, map, built-by-Canadians. All light sections - dark text on light. ========================================================================== */ .stk-contact { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; } @media (max-width: 860px) { .stk-contact { grid-template-columns: 1fr; gap: 36px; } } .stk-section-head--left { text-align: left; margin-left: 0; } /* Form */ .stk-form { margin-top: 4px; } .stk-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 520px) { .stk-form__row { grid-template-columns: 1fr; } } .stk-field { margin-bottom: 16px; } .stk-field label { display: block; font-family: var(--stk-display); font-weight: 600; font-size: 13.5px; color: var(--stk-navy-900); margin-bottom: 8px; } .stk-field__opt { font-weight: 400; color: var(--stk-ink-3); } .stk-input { width: 100%; padding: 12px 14px; font-size: 15px; font-family: var(--stk-body); color: var(--stk-ink); background: #fff; border: 1px solid var(--stk-border); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; } .stk-input:focus { outline: none; border-color: var(--stk-blue); box-shadow: 0 0 0 3px rgba(37,99,235,.15); } .stk-textarea { resize: vertical; min-height: 110px; } .stk-form__submit { width: 100%; justify-content: center; margin-top: 6px; } .stk-form__note { font-size: 12.5px; color: var(--stk-ink-3); line-height: 1.5; margin: 14px 0 0; text-align: center; } /* Direct channels */ .stk-contact__direct { background: var(--stk-surface-1); border: 1px solid var(--stk-border); border-radius: 16px; padding: 28px; } .stk-contact__direct-title { font-family: var(--stk-display); font-weight: 700; font-size: 18px; color: var(--stk-navy-900); margin: 0 0 18px; } .stk-contact__channel { display: flex; align-items: center; gap: 14px; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--stk-border); } .stk-contact__channel:last-of-type { border-bottom: none; } .stk-contact__channel-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); } .stk-contact__channel-icon svg { width: 18px; height: 18px; color: var(--stk-blue); } .stk-contact__channel-label { display: block; font-size: 12px; color: var(--stk-ink-3); } .stk-contact__channel-value { display: block; font-family: var(--stk-display); font-weight: 600; font-size: 15px; color: var(--stk-navy-900); } .stk-contact__channel:hover .stk-contact__channel-value { color: var(--stk-blue); } .stk-contact__promise { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--stk-border); } .stk-contact__promise-icon svg { width: 20px; height: 20px; color: var(--stk-blue); margin-top: 2px; } .stk-contact__promise p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--stk-ink-2); } .stk-contact__promise strong { color: var(--stk-navy-900); } /* Office NAP cards */ .stk-offices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; } @media (max-width: 760px) { .stk-offices { grid-template-columns: 1fr; } } .stk-office { background: #fff; border: 1px solid var(--stk-border); border-radius: 14px; padding: 24px; } .stk-office__name { display: flex; align-items: center; gap: 8px; font-family: var(--stk-display); font-weight: 700; font-size: 16px; color: var(--stk-navy-900); margin: 0 0 12px; } .stk-office__pin { width: 18px; height: 18px; color: var(--stk-blue); flex: 0 0 auto; } .stk-office__addr { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--stk-ink-2); margin-bottom: 12px; } .stk-office__phone { display: inline-block; font-family: var(--stk-display); font-weight: 600; font-size: 14.5px; color: var(--stk-navy-900); text-decoration: none; margin-bottom: 14px; } .stk-office__phone:hover { color: var(--stk-blue); } .stk-office__dir { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--stk-blue); text-decoration: none; } .stk-office__dir svg { width: 12px; height: 12px; } .stk-office__dir:hover { text-decoration: underline; } /* Map + built-by-Canadians */ .stk-contact__map { margin-top: 28px; border-radius: 16px; overflow: hidden; border: 1px solid var(--stk-border); line-height: 0; } .stk-contact__map iframe { display: block; } .stk-madein { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 32px 0 0; font-family: var(--stk-display); font-weight: 600; font-size: 14px; color: var(--stk-ink-2); } .stk-madein svg { width: 16px; height: 16px; color: var(--stk-blue); } /* ========================================================================== Find IT Jobs (jobseeker hub) - page-find-it-jobs.php Workable openings list, recently-filled cards, 4-up steps modifier. ========================================================================== */ .stk-steps--4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .stk-steps--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stk-steps--4 { grid-template-columns: 1fr; } } /* --- Workable openings (light/surface section, dark text) --- */ .stk-jobs { margin-top: 8px; } .stk-jobs__status { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 0; font-size: 14px; color: var(--stk-ink-3); } .stk-jobs__status--done { display: flex; align-items: center; width: -moz-fit-content; width: fit-content; margin: 0 auto 18px; gap: 7px; padding: 5px 15px 5px 13px; font-family: var(--stk-display); font-size: 12.5px; font-weight: 600; color: var(--stk-blue); background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); border-radius: var(--stk-r-pill); } .stk-jobs__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stk-blue); flex: 0 0 auto; animation: stk-jobs-pulse 2s infinite; } @keyframes stk-jobs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } .stk-jobs__status--error { color: #b91c1c; } .stk-jobs__status--error a { color: var(--stk-blue); } .stk-jobs__spinner { width: 18px; height: 18px; border: 2px solid var(--stk-border); border-top-color: var(--stk-blue); border-radius: 50%; animation: stk-spin .7s linear infinite; flex: 0 0 auto; } @keyframes stk-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .stk-jobs__spinner { animation: none; } } .stk-jobs__list { display: flex; flex-direction: column; gap: 10px; } .stk-jobs__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; background: #fff; border: 1px solid var(--stk-border); border-radius: 14px; text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .15s ease; } .stk-jobs__row:hover { border-color: var(--stk-blue-300, #93c5fd); box-shadow: 0 4px 20px rgba(37,99,235,.08); transform: translateY(-1px); } .stk-jobs__row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .stk-jobs__title { font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: var(--stk-navy-900); line-height: 1.3; } .stk-jobs__loc { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--stk-ink-3); } .stk-jobs__loc svg { width: 12px; height: 12px; color: #94a3b8; } .stk-jobs__row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .stk-jobs__badge { font-family: var(--stk-display); font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; } .stk-jobs__badge--hybrid { background: var(--stk-blue-50); color: #1d4ed8; border-color: var(--stk-blue-200); } .stk-jobs__badge--remote { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .stk-jobs__badge--onsite { background: #fff7ed; color: #c2410c; border-color: #fed7aa; } .stk-jobs__badge--fulltime { background: var(--stk-surface-2); color: var(--stk-ink-2); border-color: var(--stk-border); } .stk-jobs__badge--contract { background: #faf5ff; color: #7e22ce; border-color: #e9d5ff; } .stk-jobs__badge--neutral { background: var(--stk-surface-2); color: var(--stk-ink-2); border-color: var(--stk-border); } .stk-jobs__go { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--stk-blue-50); flex-shrink: 0; } .stk-jobs__go svg { width: 14px; height: 14px; color: var(--stk-blue); } @media (max-width: 600px) { .stk-jobs__row { flex-direction: column; align-items: flex-start; } .stk-jobs__go { display: none; } } /* --- Recently filled cards (light section, dark text) --- */ .stk-filled { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 900px) { .stk-filled { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 580px) { .stk-filled { grid-template-columns: 1fr; } } .stk-filled-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; background: #fff; border: 1px solid var(--stk-border); border-radius: 14px; transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease; } .stk-filled-card--link { text-decoration: none; cursor: pointer; } .stk-filled-card--link:hover { border-color: var(--stk-blue); box-shadow: 0 6px 24px rgba(37,99,235,.10); transform: translateY(-2px); } .stk-filled-card__arrow { position: absolute; top: 18px; right: 18px; width: 16px; height: 16px; color: var(--stk-blue); opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s ease, transform .2s ease; } .stk-filled-card--link:hover .stk-filled-card__arrow { opacity: 1; transform: translate(0,0); } .stk-filled-card__title { font-family: var(--stk-display); font-weight: 700; font-size: 15.5px; color: var(--stk-navy-900); line-height: 1.3; margin: 0; padding-right: 24px; } .stk-filled-card__desc { font-size: 13.5px; color: var(--stk-ink-2); line-height: 1.55; margin: 0; flex: 1; } .stk-filled-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 2px; } .stk-filled-card__tag { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: var(--stk-blue-50); color: #1d4ed8; border: 1px solid var(--stk-blue-200); } .stk-filled-card__tag[data-ind="healthcare"] { background: #fff7ed; color: #c2410c; border-color: #fed7aa; } .stk-filled-card__tag[data-ind="financial"] { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; } .stk-filled-card__tag[data-ind="fintech"] { background: #f0fdfa; color: #0f766e; border-color: #99f6e4; } .stk-filled-card__tag[data-ind="enterprise"] { background: var(--stk-surface-2); color: var(--stk-ink-2); border-color: var(--stk-border); } .stk-filled-card__type, .stk-filled-card__loc { font-size: 12px; color: var(--stk-ink-3); font-weight: 500; } .stk-filled-card__badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 999px; padding: 3px 10px; } .stk-filled-card__badge svg { width: 11px; height: 11px; } /* ========================================================================== Resource landing pages - shared section styles (stat strip, methodology, powered-by badge, dual-CTA, hire form) ========================================================================== */ /* Trust stat strip (light section, dark text) */ .stk-rstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 900px) { .stk-rstats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stk-rstats { grid-template-columns: 1fr; } } .stk-rstat { display: flex; flex-direction: column; gap: 6px; padding: 24px; background: #fff; border: 1px solid var(--stk-border); border-radius: 16px; } .stk-rstat__num { font-family: var(--stk-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--stk-blue); letter-spacing: -.02em; } .stk-rstat__label { font-family: var(--stk-display); font-weight: 700; font-size: 14px; color: var(--stk-navy-900); } .stk-rstat__desc { font-size: 13px; color: var(--stk-ink-2); line-height: 1.5; } .stk-rstats__foot { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 26px; font-size: 14.5px; color: var(--stk-ink-2); } .stk-rstats__foot svg { width: 18px; height: 18px; color: var(--stk-blue); flex: 0 0 auto; } .stk-rstats__foot strong { color: var(--stk-navy-900); } /* Methodology list + powered-by badge */ .stk-method { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .stk-method li { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--stk-ink); line-height: 1.5; } .stk-method svg { width: 18px; height: 18px; color: var(--stk-blue); flex: 0 0 auto; margin-top: 2px; } .stk-pwr { display: inline-flex; align-items: center; gap: 8px; font-family: var(--stk-display); font-weight: 600; font-size: 13px; color: var(--stk-blue); background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); border-radius: 999px; padding: 8px 16px; } .stk-pwr svg { width: 15px; height: 15px; } /* Dual-CTA "That's our STACK." line (sits on a DARK section → light text) */ .stk-rcta__stack { font-family: var(--stk-display); font-weight: 600; font-size: 15px; color: var(--stk-blue-300, #93c5fd); margin: -6px 0 22px; } .stk-rcta__stack strong { color: #fff; } /* Hire form wrapper (centred, single column on the surface section) */ .stk-hireform { max-width: 720px; margin: 8px auto 0; background: #fff; border: 1px solid var(--stk-border); border-radius: 18px; padding: 30px; box-shadow: 0 10px 40px rgba(7,18,36,.05); } @media (max-width: 560px) { .stk-hireform { padding: 22px; } } .stk-field__check { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 18px; font-size: 13.5px; color: var(--stk-ink-2); line-height: 1.45; cursor: pointer; } .stk-field__check input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--stk-blue); } /* ========================================================================== Salary Guide page - salary lookup tool + gated download ========================================================================== */ /* --- Salary guide hero --- */ .stk-sghero { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 132px) 24px clamp(56px, 7vw, 84px); text-align: center; background: var(--stk-white); } .stk-sghero__glow { position: absolute; left: 50%; top: -12%; width: 920px; max-width: 130%; height: 620px; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 42%, rgba(37,99,235,.16), rgba(37,99,235,0) 70%); pointer-events: none; } .stk-sghero__grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 96% 82% at 50% 16%, #000 0%, #000 44%, transparent 88%); mask-image: radial-gradient(ellipse 96% 82% at 50% 16%, #000 0%, #000 44%, transparent 88%); } .stk-sghero__inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; } .stk-sghero__eyebrow { font-family: var(--stk-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--stk-blue); margin: 0 0 18px; } .stk-sghero__title { font-family: var(--stk-display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1.04; letter-spacing: -.025em; color: var(--stk-navy-900); margin: 0; } .stk-sghero__accent { color: var(--stk-blue); } .stk-sghero__lead { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--stk-ink-2); max-width: 600px; margin: 20px auto 0; } .stk-sghero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; } .stk-sghero__nudge { display: inline-flex; transform-origin: center; } .stk-sghero__nudge:hover { animation: none; } @media (prefers-reduced-motion: no-preference) { .stk-sghero__nudge { animation: stk-sghero-nudge 6s ease-in-out infinite; } } @keyframes stk-sghero-nudge { 0%, 80%, 100% { transform: rotate(0); } 83% { transform: rotate(-3deg); } 86% { transform: rotate(2.4deg); } 89% { transform: rotate(-1.8deg); } 92% { transform: rotate(1.2deg); } 95% { transform: rotate(-.5deg); } } .stk-sghero__stats { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 680px; margin: 50px auto 0; border: 1px solid var(--stk-border); border-radius: var(--stk-r-card); background: var(--stk-surface-1); overflow: hidden; } .stk-sghero__stat { padding: 22px 16px; border-right: 1px solid var(--stk-border); } .stk-sghero__stat:last-child { border-right: 0; } .stk-sghero__statnum { display: block; font-family: var(--stk-display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); line-height: 1; letter-spacing: -.02em; color: var(--stk-navy-900); font-variant-numeric: tabular-nums; } .stk-sghero__statlabel { display: block; font-size: 12.5px; color: var(--stk-ink-3); margin-top: 9px; } @media (max-width: 620px) { .stk-sghero__stats { grid-template-columns: repeat(2, 1fr); } .stk-sghero__stat:nth-child(2) { border-right: 0; } .stk-sghero__stat:nth-child(1), .stk-sghero__stat:nth-child(2) { border-bottom: 1px solid var(--stk-border); } } /* --- Numbers, with the why --- */ .stk-sgwhy { margin-top: 8px; } .stk-sgwhy__toggle-wrap { text-align: center; margin-bottom: 42px; } .stk-sgwhy__toggle { position: relative; display: inline-flex; padding: 4px; background: var(--stk-surface-2); border: 1px solid var(--stk-border); border-radius: 999px; } .stk-sgwhy__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--stk-white); box-shadow: 0 2px 8px -2px rgba(15,23,42,.18); z-index: 0; } @media (prefers-reduced-motion: no-preference) { .stk-sgwhy__thumb { transition: transform .5s cubic-bezier(.4,0,.2,1), width .5s cubic-bezier(.4,0,.2,1); } } .stk-sgwhy__tab { position: relative; z-index: 1; font-family: var(--stk-display); font-weight: 600; font-size: 14px; color: var(--stk-navy-900); opacity: .38; padding: 9px 22px; border: 0; background: transparent; border-radius: 999px; cursor: pointer; transition: opacity .25s; } .stk-sgwhy__tab:hover:not(.is-active) { opacity: .68; } .stk-sgwhy__tab.is-active { opacity: 1; } .stk-sgwhy__tab:focus-visible { outline: 2px solid var(--stk-blue); outline-offset: 2px; } .stk-sgwhy__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 1000px; margin: 0 auto; } .stk-sgwhy__card { background: var(--stk-surface-1); border: 1px solid var(--stk-border); border-radius: 20px; padding: 30px 32px 28px; transition: border-color .2s, box-shadow .2s, transform .2s; } .stk-sgwhy__card:hover { border-color: var(--stk-blue); box-shadow: 0 10px 30px rgba(37,99,235,.10); transform: translateY(-2px); } .stk-sgwhy__cat { font-family: var(--stk-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--stk-blue); margin: 0; } .stk-sgwhy__num { font-family: var(--stk-display); font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: -.03em; color: var(--stk-navy-900); margin: 14px 0 0; font-variant-numeric: tabular-nums; } .stk-sgwhy__k { color: var(--stk-blue); } .stk-sgwhy__band { font-size: 13px; color: var(--stk-ink-3); margin: 9px 0 0; font-variant-numeric: tabular-nums; } .stk-sgwhy__role { font-size: 13.5px; font-weight: 600; color: var(--stk-ink-2); margin: 3px 0 0; } .stk-sgwhy__insight { font-size: 15px; line-height: 1.6; color: var(--stk-ink-2); margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--stk-border); } @media (max-width: 680px) { .stk-sgwhy__grid { grid-template-columns: 1fr; } .stk-sgwhy__num { font-size: 46px; } } /* --- What's inside the guide (dark contents preview) --- */ .stk-guidetoc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1040px; margin: 46px auto 0; } .stk-guidetoc__group { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 28px 26px; } .stk-guidetoc__part { display: flex; align-items: center; gap: 11px; font-family: var(--stk-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--stk-blue-300, #93c5fd); margin: 0; } .stk-guidetoc__num { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; background: rgba(37,99,235,.2); color: var(--stk-blue-200, #bfdbfe); font-size: 12px; font-weight: 600; flex: 0 0 auto; } .stk-guidetoc__sub { font-family: var(--stk-display); font-weight: 600; font-size: 17px; color: var(--stk-white); margin: 15px 0 17px; letter-spacing: -.01em; } .stk-guidetoc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .stk-guidetoc__list li { position: relative; padding-left: 19px; font-size: 14px; line-height: 1.4; color: var(--stk-muted-3, #cbd5e1); transition: color .2s; } .stk-guidetoc__list li:hover { color: var(--stk-white); } .stk-guidetoc__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 999px; background: var(--stk-blue); transform-origin: center; } @media (prefers-reduced-motion: no-preference) { .stk-guidetoc__list li:hover::before { animation: stk-toc-pulse 1.1s ease-in-out infinite; } } @keyframes stk-toc-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.7); opacity: .5; } } @media (max-width: 860px) { .stk-guidetoc { grid-template-columns: 1fr; max-width: 460px; } } /* --- How we built this (methodology) --- */ .stk-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1000px; margin: 46px auto 0; } .stk-method__card { background: var(--stk-surface-1); border: 1px solid var(--stk-border); border-radius: 18px; padding: 30px 28px; transition: border-color .2s, box-shadow .2s, transform .2s; } .stk-method__card:hover { border-color: var(--stk-blue); box-shadow: 0 10px 30px rgba(37,99,235,.10); transform: translateY(-2px); } .stk-method__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .stk-method__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: var(--stk-blue-50); color: var(--stk-blue); font-family: var(--stk-display); font-weight: 700; font-size: 15px; flex: 0 0 auto; } .stk-method__chip { font-family: var(--stk-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--stk-blue); background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); border-radius: 999px; padding: 5px 12px; transition: background .2s, color .2s, border-color .2s; } .stk-method__card:hover .stk-method__chip { background: var(--stk-blue); color: var(--stk-white); border-color: var(--stk-blue); } .stk-method__title { font-family: var(--stk-display); font-weight: 700; font-size: 18px; color: var(--stk-navy-900); margin: 18px 0 0; letter-spacing: -.01em; } .stk-method__desc { font-size: 14.5px; line-height: 1.6; color: var(--stk-ink-2); margin: 9px 0 0; } @media (max-width: 760px) { .stk-method { grid-template-columns: 1fr; max-width: 440px; } } /* --- Download / capture (unified split card) --- */ .stk-dlc { display: grid; grid-template-columns: 1.02fr 0.98fr; max-width: 980px; margin: 0 auto; background: var(--stk-white); border-radius: 24px; overflow: hidden; border: 1px solid var(--stk-border); box-shadow: 0 34px 80px -34px rgba(20,40,80,.28); } .stk-dlc__visual { position: relative; display: flex; flex-direction: column; padding: 26px 32px 34px; background: radial-gradient(ellipse 92% 66% at 72% 6%, rgba(37,99,235,.34) 0%, transparent 60%), linear-gradient(165deg, #16315f 0%, var(--stk-navy-900) 78%); overflow: hidden; } .stk-dlc__badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; font-family: var(--stk-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--stk-white); background: rgba(37,99,235,.92); border-radius: 999px; padding: 7px 14px; box-shadow: 0 8px 20px -4px rgba(37,99,235,.55); } .stk-dlc__bolt { width: 13px; height: 13px; } .stk-dlc__coverwrap { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: flex-start; gap: 20px; padding: 22px 0 30px; } .stk-dlc__cover { width: 186px; height: auto; border-radius: 9px; box-shadow: 0 26px 50px -18px rgba(0,0,0,.7); transform: rotate(-2deg); transform-origin: top left; flex: 0 0 auto; } .stk-dlc__reviews { flex: 1 1 0; min-width: 0; align-self: flex-start; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; } .stk-dlc__review { margin: 0; display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: 0 10px 26px -12px rgba(0,0,0,.5); } .stk-dlc__ravatar { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; flex: 0 0 auto; overflow: hidden; background: var(--stk-navy-800); } .stk-dlc__ravatar img { width: 100%; height: 100%; object-fit: cover; } .stk-dlc__rico { width: 19px; height: 19px; } .stk-dlc__rdot { position: absolute; right: 2px; bottom: 2px; width: 9px; height: 9px; border-radius: 999px; background: #34d399; } .stk-dlc__rbody { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; } .stk-dlc__rhead { display: flex; align-items: baseline; gap: 6px; } .stk-dlc__rname { font-family: var(--stk-display); font-weight: 700; font-size: 13px; color: var(--stk-white); } .stk-dlc__rrole { font-size: 11px; color: var(--stk-blue-200, #bfdbfe); } .stk-dlc__rtime { margin-left: auto; font-size: 10.5px; color: var(--stk-muted-4, #94a3b8); flex: 0 0 auto; } .stk-dlc__rtext { font-size: 12.5px; line-height: 1.35; color: var(--stk-muted-3, #cbd5e1); } @media (prefers-reduced-motion: no-preference) { .stk-dlc__review { opacity: 0; } .stk-dlc__reviews.is-in .stk-dlc__review { animation: stk-notify-in .5s cubic-bezier(.22,1.3,.4,1) both; } .stk-dlc__reviews.is-in .stk-dlc__review:nth-child(1) { animation-delay: .15s; } .stk-dlc__reviews.is-in .stk-dlc__review:nth-child(2) { animation-delay: .7s; } .stk-dlc__reviews.is-in .stk-dlc__review:nth-child(3) { animation-delay: 1.25s; } .stk-dlc__rdot { animation: stk-notify-pulse 2.2s ease-in-out infinite; } } @keyframes stk-notify-in { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes stk-notify-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } } .stk-dlc__visualfoot { margin-top: auto; } .stk-dlc__vtitle { font-family: var(--stk-display); font-weight: 800; font-size: 25px; line-height: 1.12; letter-spacing: -.02em; color: var(--stk-white); margin: 0 0 16px; max-width: 340px; } .stk-dlc__taglist { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .stk-dlc__tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--stk-white); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 13px 7px 9px; } .stk-dlc__tagcheck { position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 999px; background: var(--stk-blue); flex: 0 0 auto; } .stk-dlc__tagcheck::after { content: ""; position: absolute; left: 5px; top: 3px; width: 3.5px; height: 6.5px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); } .stk-dlc__form { padding: 42px 42px 36px; display: flex; flex-direction: column; } .stk-dlc__formtitle { font-family: var(--stk-display); font-weight: 800; font-size: 28px; line-height: 1.08; letter-spacing: -.02em; color: var(--stk-navy-900); margin: 0; } .stk-dlc__formaccent { color: var(--stk-blue); } .stk-dlc__formsub { font-size: 14.5px; line-height: 1.55; color: var(--stk-ink); margin: 11px 0 26px; } .stk-dlc__field { margin-bottom: 16px; } .stk-dlc__field label { display: block; font-family: var(--stk-display); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stk-ink); margin-bottom: 7px; } .stk-dlc__inputwrap { position: relative; display: flex; align-items: center; } .stk-dlc__ico { position: absolute; left: 14px; width: 17px; height: 17px; color: var(--stk-muted-2, #94a3b8); pointer-events: none; } .stk-dlc__inputwrap input, .stk-dlc__inputwrap select { width: 100%; padding: 12px 14px 12px 42px; border: 1px solid var(--stk-border); border-radius: 11px; font-family: var(--stk-body); font-size: 15px; color: var(--stk-navy-900); background: var(--stk-surface-1); -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s, background .15s; } .stk-dlc__inputwrap--select select { padding-right: 40px; cursor: pointer; } .stk-dlc__inputwrap input::placeholder { color: var(--stk-muted-2, #94a3b8); } .stk-dlc__inputwrap input:focus, .stk-dlc__inputwrap select:focus { outline: none; border-color: var(--stk-blue); background: var(--stk-white); box-shadow: 0 0 0 3px var(--stk-blue-50); } .stk-dlc__chev { position: absolute; right: 14px; width: 18px; height: 18px; color: var(--stk-muted-2, #94a3b8); pointer-events: none; } .stk-dlc__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 6px; padding: 15px 24px; border: 0; border-radius: 12px; font-family: var(--stk-display); font-weight: 700; font-size: 15px; letter-spacing: .01em; color: #fff; background: linear-gradient(135deg, #3b82f6 0%, var(--stk-blue) 52%, var(--stk-blue-hover) 100%); cursor: pointer; box-shadow: 0 16px 32px -12px rgba(37,99,235,.65); transition: transform .15s, box-shadow .15s, filter .15s; } .stk-dlc__cta:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -12px rgba(37,99,235,.75); filter: brightness(1.06); } .stk-dlc__arr { width: 18px; height: 18px; transition: transform .15s; } .stk-dlc__cta:hover .stk-dlc__arr { transform: translateX(3px); } .stk-dlc__trust { font-size: 12.5px; color: var(--stk-ink-3); text-align: center; margin: 16px 0 0; } @media (max-width: 820px) { .stk-dlc { grid-template-columns: 1fr; max-width: 440px; } .stk-dlc__visual { padding: 24px 26px 28px; } .stk-dlc__coverwrap { padding: 22px 0 26px; } .stk-dlc__form { padding: 32px 28px 30px; } } /* --- Salary benchmark dashboard (2026 guide) --- */ .stk-saldash { position: relative; margin-top: 38px; border: 1px solid var(--stk-border); border-radius: 22px; overflow: hidden; background: var(--stk-white); box-shadow: 0 30px 70px -42px rgba(37,99,235,.28); --stk-tier-jr: #7dd3fc; --stk-tier-int: #2563eb; --stk-tier-sr: #1e3a8a; } /* Header bar */ .stk-saldash__header { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 18px 28px; border-bottom: 1px solid var(--stk-border); background: var(--stk-white); } .stk-saldash__heading { display: flex; align-items: center; gap: 11px; } .stk-saldash__dot { width: 9px; height: 9px; border-radius: 999px; background: var(--stk-blue); box-shadow: 0 0 0 4px var(--stk-blue-50); flex: 0 0 auto; } .stk-saldash__title { font-family: var(--stk-display); font-weight: 700; font-size: 21px; letter-spacing: -.01em; color: var(--stk-navy-900); margin: 0; } .stk-saldash__headright { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .stk-saldash__legend { display: flex; align-items: center; gap: 15px; } .stk-saldash__lg { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--stk-ink-2); } .stk-saldash__lg::before { content: ""; width: 11px; height: 11px; border-radius: 3px; } .stk-saldash__lg--jr::before { background: var(--stk-tier-jr); } .stk-saldash__lg--int::before { background: var(--stk-tier-int); } .stk-saldash__lg--sr::before { background: var(--stk-tier-sr); } .stk-saldash__meta { font-size: 13px; color: var(--stk-ink-3); margin: 0; font-variant-numeric: tabular-nums; } /* Body: rail + data */ .stk-saldash__body { display: grid; grid-template-columns: 240px 1fr; } .stk-saldash__rail { position: relative; background: var(--stk-surface-1); border-right: 1px solid var(--stk-border); padding: 16px 14px; } .stk-saldash__railthumb { position: absolute; left: 14px; right: 14px; top: 0; height: 0; border-radius: 10px; background: var(--stk-blue-50); z-index: 0; } @media (prefers-reduced-motion: no-preference) { .stk-saldash__railthumb { transition: transform .5s cubic-bezier(.4,0,.2,1), height .5s cubic-bezier(.4,0,.2,1); } } .stk-saldash__raillbl { display: block; font-family: var(--stk-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stk-ink-3); padding: 4px 12px 12px; } .stk-saldash__cat { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: transparent; font-family: var(--stk-body); font-size: 13.5px; font-weight: 400; color: var(--stk-navy-900); opacity: .55; padding: 10px 12px; border-radius: 10px; cursor: pointer; transition: opacity .16s, font-weight .16s, background .16s; } .stk-saldash__cat + .stk-saldash__cat { margin-top: 2px; } .stk-saldash__cat:hover { opacity: 1; } .stk-saldash__cat:hover:not(.is-active) { font-weight: 500; background: var(--stk-surface-2); } .stk-saldash__cat.is-active { opacity: 1; font-weight: 600; } .stk-saldash__cat:focus-visible { outline: 2px solid var(--stk-blue); outline-offset: 1px; } .stk-saldash__catname { line-height: 1.3; } .stk-saldash__ct { flex: 0 0 auto; min-width: 22px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--stk-ink-3); background: var(--stk-surface-2); border-radius: 999px; padding: 2px 7px; font-variant-numeric: tabular-nums; } .stk-saldash__cat:hover .stk-saldash__ct { background: var(--stk-white); } .stk-saldash__cat.is-active .stk-saldash__ct { color: var(--stk-navy-900); background: var(--stk-white); } /* Data panel */ .stk-saldash__panel { padding: 22px 30px 28px; } .stk-saldash__axis { display: flex; justify-content: space-between; margin: 2px 0; padding: 0 72px 0 192px; } .stk-saldash__axis span { font-size: 11px; color: var(--stk-ink-3); font-variant-numeric: tabular-nums; } .stk-saldash__viewport { height: 580px; overflow: hidden; } .stk-saldash__track { display: flex; align-items: flex-start; transition: transform .35s cubic-bezier(.4,0,.2,1); } .stk-saldash__page { flex: 0 0 100%; min-width: 0; min-height: 580px; } .stk-saldash__row { display: grid; grid-template-columns: 178px 1fr 58px; align-items: center; gap: 14px; min-height: 58px; padding: 7px 0; border-top: 1px solid var(--stk-border); } .stk-saldash__row:first-child { border-top: 0; } .stk-saldash__name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--stk-ink); } .stk-saldash__track-bar { position: relative; height: 11px; background: var(--stk-surface-2); border-radius: 999px; } .stk-saldash__bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, var(--stk-tier-jr), var(--stk-tier-int) 52%, var(--stk-tier-sr)); transition: filter .18s; } .stk-saldash__entry { position: absolute; top: 16px; transform: translateX(-2px); font-size: 10.5px; font-weight: 500; color: var(--stk-ink-2); background: var(--stk-surface-1); border: 1px solid var(--stk-border); border-radius: 6px; padding: 1px 6px; white-space: nowrap; font-variant-numeric: tabular-nums; } .stk-saldash__ceiling { font-family: var(--stk-display); font-weight: 700; font-size: 15.5px; color: var(--stk-navy-900); text-align: right; font-variant-numeric: tabular-nums; } .stk-saldash__row:hover .stk-saldash__bar { filter: saturate(1.12) brightness(1.03); } /* Pager */ .stk-saldash__pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--stk-border); } .stk-saldash__pageidx { font-family: var(--stk-mono); font-size: 12px; color: var(--stk-ink-3); font-variant-numeric: tabular-nums; } .stk-saldash__pagenav { display: flex; align-items: center; gap: 12px; } .stk-saldash__arrow { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--stk-border); background: var(--stk-white); border-radius: 9px; font-size: 19px; line-height: 1; color: var(--stk-navy-900); cursor: pointer; transition: border-color .15s, color .15s; } .stk-saldash__arrow:hover:not(:disabled) { border-color: var(--stk-blue); color: var(--stk-blue); } .stk-saldash__arrow:disabled { opacity: .32; cursor: default; } .stk-saldash__dots { display: flex; align-items: center; gap: 7px; } .stk-saldash__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--stk-border); cursor: pointer; transition: background .15s, transform .15s; } .stk-saldash__dot.is-on { background: var(--stk-blue); transform: scale(1.18); } .stk-saldash__pager.is-single .stk-saldash__dot { cursor: default; } /* Grow-in animation (motion-safe): bars expand from centre out */ @keyframes stk-saldash-grow { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: no-preference) { .stk-saldash.is-anim .stk-saldash__bar { clip-path: inset(0 50% 0 50%); } .stk-saldash.is-anim .stk-saldash__page.is-live .stk-saldash__bar { animation: stk-saldash-grow .9s cubic-bezier(.22,1,.36,1) both; animation-delay: calc(var(--i, 0) * 55ms); } } /* No-JS fallback */ .no-js .stk-saldash__rail { display: none; } .no-js .stk-saldash__track { flex-direction: column; } .no-js .stk-saldash__viewport { height: auto !important; overflow: visible; } .no-js .stk-saldash__pager { display: none; } @media (max-width: 760px) { .stk-saldash__body { grid-template-columns: 1fr; } .stk-saldash__rail { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--stk-border); padding: 12px; } .stk-saldash__raillbl { display: none; } .stk-saldash__cat { width: auto; flex: 0 0 auto; white-space: nowrap; } .stk-saldash__cat + .stk-saldash__cat { margin-top: 0; } .stk-saldash__railthumb { display: none; } .stk-saldash__cat.is-active { background: var(--stk-blue-50); } .stk-saldash__axis { padding: 0 52px 0 132px; } .stk-saldash__row { grid-template-columns: 120px 1fr 50px; gap: 10px; } .stk-saldash__name { font-size: 12.5px; } } @media (max-width: 520px) { .stk-saldash__header { padding: 16px 18px; } .stk-saldash__panel { padding: 18px 16px 22px; } .stk-saldash__axis { display: none; } .stk-saldash__entry { display: none; } .stk-saldash__row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; } .stk-saldash__name { grid-column: 1 / -1; } .stk-saldash__track-bar { grid-column: 1; align-self: center; } .stk-saldash__ceiling { grid-column: 2; align-self: center; } } /* --- Gated download (DARK section → light text; white form card) --- */ .stk-dl { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; } @media (max-width: 860px) { .stk-dl { grid-template-columns: 1fr; gap: 28px; } } .stk-dl__points { list-style: none; margin: 18px 0; padding: 0; display: flex; flex-direction: column; gap: 11px; } .stk-dl__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: rgba(255,255,255,.82); line-height: 1.55; } .stk-dl__points svg { width: 17px; height: 17px; color: #60a5fa; flex: 0 0 auto; margin-top: 2px; } .stk-dl__caution { font-size: 13.5px; color: rgba(255,255,255,.66); line-height: 1.6; border-left: 2px solid rgba(96,165,250,.5); padding-left: 14px; margin: 0 0 20px; } .stk-dl__caution strong { color: #fff; } .stk-pwr--light { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.35); color: #93c5fd; } .stk-dl__formwrap { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 20px 50px rgba(0,0,0,.25); } .stk-dl__cover { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; margin-bottom: 18px; } .stk-dl__cover--ph { display: flex; align-items: center; justify-content: center; background: linear-gradient(145deg, var(--stk-blue-50), #e0ecff); } .stk-dl__cover--ph svg { width: 44px; height: 44px; color: var(--stk-blue); } .stk-dl__form .stk-field { margin-bottom: 14px; } .stk-dl__form .stk-form__submit { width: 100%; justify-content: center; } /* ========================================================================== Bill 190 page - audience list, readiness visual, covers steps, related cards ========================================================================== */ /* Who this is for */ .stk-audience { max-width: 760px; margin: 8px auto 0; text-align: center; } .stk-audience__label { font-family: var(--stk-display); font-weight: 700; font-size: 14px; color: var(--stk-blue); margin: 0 0 16px; } .stk-audience__list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; text-align: left; max-width: 620px; } @media (max-width: 560px) { .stk-audience__list { grid-template-columns: 1fr; } } .stk-audience__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--stk-ink); } .stk-audience__list svg { width: 17px; height: 17px; color: var(--stk-blue); flex: 0 0 auto; margin-top: 2px; } .stk-audience__foot { margin: 22px 0 0; font-size: 14.5px; color: var(--stk-ink-2); } /* Bill 190 readiness visual (dark card on light section) */ .stk-ready { max-width: 560px; margin: 8px auto 0; background: linear-gradient(155deg, var(--stk-navy-900), #0b1c36); border: 1px solid rgba(96,165,250,.18); border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(7,18,36,.18); } .stk-ready__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid rgba(255,255,255,.08); } .stk-ready__title { font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: #fff; } .stk-ready__brand { font-family: var(--stk-display); font-weight: 700; font-size: 12px; letter-spacing: .06em; color: #60a5fa; } .stk-ready__list { list-style: none; margin: 0; padding: 8px 0; } .stk-ready__list li { display: flex; align-items: center; justify-content: space-between; padding: 13px 24px; } .stk-ready__list li + li { border-top: 1px solid rgba(255,255,255,.06); } .stk-ready__label { font-size: 14.5px; color: rgba(255,255,255,.85); } .stk-ready__status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--stk-display); font-weight: 600; font-size: 12.5px; color: #4ade80; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.3); border-radius: 999px; padding: 4px 12px; } .stk-ready__status svg { width: 13px; height: 13px; } /* What the checklist covers (numbered steps) */ .stk-covers { list-style: none; counter-reset: none; margin: 8px 0 0; padding: 0; max-width: 760px; margin-left: auto; margin-right: auto; display: flex; flex-direction: column; gap: 14px; } .stk-cover { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--stk-border); border-radius: 14px; padding: 20px 22px; } .stk-cover__num { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--stk-blue); color: #fff; font-family: var(--stk-display); font-weight: 700; font-size: 15px; } .stk-cover__title { font-family: var(--stk-display); font-weight: 700; font-size: 16px; color: var(--stk-navy-900); margin: 4px 0 5px; } .stk-cover__desc { font-size: 14px; color: var(--stk-ink-2); line-height: 1.55; margin: 0; } /* Related articles grid */ .stk-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 860px) { .stk-related { grid-template-columns: 1fr; } } .stk-related__card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #fff; border: 1px solid var(--stk-border); border-radius: 16px; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .stk-related__card:hover { border-color: var(--stk-blue); box-shadow: 0 10px 30px rgba(37,99,235,.10); transform: translateY(-2px); } .stk-related__tag { align-self: flex-start; font-family: var(--stk-display); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stk-blue); background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); border-radius: 999px; padding: 3px 11px; } .stk-related__title { font-family: var(--stk-display); font-weight: 700; font-size: 16px; line-height: 1.35; color: var(--stk-navy-900); margin: 0; flex: 1; } .stk-related__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--stk-ink-3); } .stk-related__arrow { width: 16px; height: 16px; color: var(--stk-blue); flex: 0 0 auto; } /* ========================================================================== AI Playbook page - risks, strategic roadmap, compliance bills ========================================================================== */ /* The new risks (3 cards, subtle warning accent) */ .stk-risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 760px) { .stk-risks { grid-template-columns: 1fr; } } .stk-risk { padding: 22px 24px; background: #fff; border: 1px solid var(--stk-border); border-left: 3px solid #f59e0b; border-radius: 14px; } .stk-risk__title { font-family: var(--stk-display); font-weight: 700; font-size: 16px; color: var(--stk-navy-900); margin: 0 0 7px; } .stk-risk__desc { font-size: 14px; color: var(--stk-ink-2); line-height: 1.55; margin: 0; } /* Strategic roadmap (6 icon cards) */ .stk-roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; } @media (max-width: 860px) { .stk-roadmap { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .stk-roadmap { grid-template-columns: 1fr; } } .stk-rmcard { display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; background: #fff; border: 1px solid var(--stk-border); border-radius: 16px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .stk-rmcard:hover { border-color: var(--stk-blue-300, #93c5fd); box-shadow: 0 10px 30px rgba(37,99,235,.08); transform: translateY(-2px); } .stk-rmcard__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); } .stk-rmcard__icon svg { width: 22px; height: 22px; color: var(--stk-blue); } .stk-rmcard__title { font-family: var(--stk-display); font-weight: 700; font-size: 16.5px; color: var(--stk-navy-900); margin: 0; } .stk-rmcard__desc { font-size: 14px; color: var(--stk-ink-2); line-height: 1.55; margin: 0; } /* Staying compliant (2 bill cards) */ .stk-bills { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; } @media (max-width: 640px) { .stk-bills { grid-template-columns: 1fr; } } .stk-bill { padding: 26px 26px 28px; background: #fff; border: 1px solid var(--stk-border); border-radius: 16px; } .stk-bill__tag { display: inline-block; font-family: var(--stk-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--stk-blue); background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); border-radius: 999px; padding: 4px 13px; margin-bottom: 12px; } .stk-bill__title { font-family: var(--stk-display); font-weight: 700; font-size: 17px; color: var(--stk-navy-900); margin: 0 0 8px; } .stk-bill__desc { font-size: 14px; color: var(--stk-ink-2); line-height: 1.6; margin: 0; } /* ========================================================================== Blog article (single.php) - overrides on the canonical .stk-article layout. 1) Align hero image + CTA to the 720px reading column (header/body width). 2) Convert the TOC rail from a pinned top-left block into a true sticky left sidebar that scrolls with the reader (Moz-style), with internal scroll for long contents so it never bleeds down the page. ========================================================================== */ /* (1) Width alignment - at every breakpoint */ .stk-article__featured { max-width: 720px; } .stk-article__cta-card { max-width: 720px; margin-left: auto; margin-right: auto; } /* (2) Sticky rail + aligned reading column (desktop) */ @media (min-width: 1080px) { .stk-article__shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 72px; max-width: var(--stk-container-wide); /* 1280 - aligns with nav + footer */ } /* All content blocks sit in the right column at a single, shared width */ .stk-article__shell > :not(.stk-article__toc-rail) { grid-column: 2; max-width: none; margin-left: 0; margin-right: 0; } /* The TOC rail: left column, spans the full height, sticks while scrolling */ .stk-article__toc-rail { display: block; grid-column: 1; /* Span ALL content rows. `-1` only references explicit row lines, and this grid defines none, so `1 / -1` trapped the rail in row 1 and inflated that row to the TOC's height - the band→body gap that scaled with TOC length. A large span covers every content block (posthead, body, CTA, footer, bio, related) so no single row is sized by the rail. */ grid-row: 1 / span 99; align-self: start; position: sticky; top: 120px; /* clears the sticky header so the whole TOC (incl. title) shows */ left: auto; width: auto; margin-top: 0; max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; } /* Thin, unobtrusive scrollbar for very long TOCs */ .stk-article__toc-rail::-webkit-scrollbar { width: 6px; } .stk-article__toc-rail::-webkit-scrollbar-thumb { background: var(--stk-border); border-radius: 3px; } /* Desktop uses the rail, so hide the collapsible mobile TOC */ .stk-article__toc-mobile { display: none; } } /* Blog article - EEAT author elements + anchor offset */ /* Linked byline + author-bio name inherit colour, hint on hover */ .stk-article__byline-name a, .stk-article__author-bio-name a { color: inherit; text-decoration: none; } .stk-article__byline-name a:hover, .stk-article__author-bio-name a:hover { color: var(--stk-blue); } /* ACF headshot fills the avatar slot like the gravatar does */ .stk-article__author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } /* Role line + LinkedIn link in the about-the-author block */ .stk-article__author-bio-role { font-family: var(--stk-display); font-weight: 600; font-size: 13px; color: var(--stk-blue); margin: 2px 0 8px; } .stk-article__author-bio-link { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-family: var(--stk-display); font-weight: 600; font-size: 13px; color: var(--stk-blue); text-decoration: none; } .stk-article__author-bio-link:hover { text-decoration: underline; } .stk-article__author-bio-link svg { width: 13px; height: 13px; } /* TOC anchor jumps shouldn't tuck headings under the sticky header */ .stk-article__body h2, .stk-article__body h3 { scroll-margin-top: 120px; } /* About-the-author - eyebrow + compact "more from author" list */ .stk-article__author-bio-eyebrow { font-family: var(--stk-display); font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stk-muted); margin-bottom: 6px; } .stk-article__author-more { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stk-border); } .stk-article__author-more-label { display: block; font-family: var(--stk-display); font-weight: 600; font-size: 12px; color: var(--stk-ink-3); margin-bottom: 6px; } .stk-article__author-more-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .stk-article__author-more-list a { font-size: 14px; color: var(--stk-ink-2); text-decoration: none; line-height: 1.4; } .stk-article__author-more-list a:hover { color: var(--stk-blue); text-decoration: underline; } /* ========================================================================= * BLOG HERO/CARD SYSTEM (v0.28.0) - branded, no per-post imagery. * Post header (.stk-posthead) + listing card (.stk-blogcard) share one * navy atmosphere language; the pillar glyph + monogram + title-in-tile do * the work the old featured images did. Ported from the validated mocks. * ====================================================================== */ /* ---- Branded post header ------------------------------------------------ */ .stk-posthead { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; margin-bottom: 40px; border: 1px solid rgba(96,165,250,.14); box-shadow: 0 24px 60px -28px rgba(7,18,36,.6); background: radial-gradient(900px 420px at 84% -10%, rgba(37,99,235,.38), transparent 60%), radial-gradient(640px 360px at 8% 120%, rgba(96,165,250,.20), transparent 60%), linear-gradient(150deg, var(--stk-navy-900), var(--stk-navy-800) 52%, var(--stk-navy-700)); } .stk-posthead::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5; background-image: linear-gradient(rgba(147,197,253,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(147,197,253,.06) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: linear-gradient(120deg, #000 30%, transparent 88%); mask-image: linear-gradient(120deg, #000 30%, transparent 88%); } .stk-posthead__glyph { position: absolute; right: -40px; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; color: var(--stk-blue-400); opacity: .09; z-index: 1; pointer-events: none; } .stk-posthead__glyph svg { width: 100%; height: 100%; display: block; } .stk-posthead__mono { position: absolute; top: 26px; right: 30px; z-index: 3; height: 26px; opacity: .92; } .stk-posthead__mono svg { height: 100%; width: auto; display: block; } .stk-posthead__content { position: relative; z-index: 2; padding: 52px 56px 46px 75px; } .stk-posthead__content::before { content: ""; position: absolute; left: 56px; top: 56px; bottom: 50px; width: 3px; border-radius: 3px; background: linear-gradient(var(--stk-blue), var(--stk-blue-400)); } .stk-posthead__eyebrow { display: inline-block; font-family: var(--stk-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--stk-blue-300); text-decoration: none; } .stk-posthead__eyebrow:hover { color: var(--stk-blue-200); } .stk-posthead__title { font-family: var(--stk-display); font-weight: 700; color: #fff; letter-spacing: -.025em; line-height: 1.08; font-size: clamp(28px, 3.4vw, 42px); margin: 14px 0 22px; text-wrap: balance; } .stk-posthead__byline { display: flex; align-items: center; gap: 12px; } .stk-posthead__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; border: 2px solid rgba(255,255,255,.18); } .stk-posthead__byline-name { font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: #fff; line-height: 1.1; } .stk-posthead__byline-name a { color: #fff; text-decoration: none; } .stk-posthead__byline-name a:hover { color: var(--stk-blue-300); } .stk-posthead__byline-meta { display: flex; align-items: center; gap: 9px; margin-top: 3px; font-size: 13.5px; color: var(--stk-muted-3); } .stk-posthead__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--stk-blue-400); } @media (max-width: 700px) { .stk-posthead__content { padding: 38px 24px 32px 40px; } .stk-posthead__content::before { left: 22px; top: 40px; bottom: 34px; } .stk-posthead__glyph { right: -90px; width: 230px; height: 230px; } .stk-posthead__mono { top: 18px; right: 20px; height: 22px; } } /* ---- Listing card ------------------------------------------------------- */ .stk-blogcard { position: relative; display: flex; flex-direction: column; background: #fff; text-decoration: none; border: 1px solid var(--stk-border); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 40px -30px rgba(7,18,36,.5); transition: transform .25s ease, box-shadow .25s ease; } .stk-blogcard:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(7,18,36,.55); } .stk-blogcard__tile { position: relative; min-height: 200px; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 24px 24px; background: radial-gradient(620px 300px at 88% -25%, rgba(37,99,235,.42), transparent 60%), radial-gradient(420px 260px at 4% 130%, rgba(96,165,250,.16), transparent 60%), linear-gradient(150deg, var(--stk-navy-900), var(--stk-navy-800) 55%, var(--stk-navy-700)); } .stk-blogcard__tile::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .45; background-image: linear-gradient(rgba(147,197,253,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(147,197,253,.05) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(125deg, #000 25%, transparent 92%); mask-image: linear-gradient(125deg, #000 25%, transparent 92%); } .stk-blogcard__glyph { position: absolute; right: -26px; top: -22px; width: 160px; height: 160px; color: var(--stk-blue-400); opacity: .1; z-index: 1; pointer-events: none; } .stk-blogcard__glyph svg { width: 100%; height: 100%; display: block; } .stk-blogcard__mono { position: absolute; top: 18px; left: 24px; z-index: 2; height: 18px; opacity: .92; } .stk-blogcard__mono svg { height: 100%; width: auto; display: block; } .stk-blogcard__title { position: relative; z-index: 2; margin: 0; color: #fff; font-family: var(--stk-display); font-weight: 700; font-size: 22px; line-height: 1.16; letter-spacing: -.02em; text-wrap: balance; border-left: 3px solid var(--pc, var(--stk-blue)); padding-left: 15px; } .stk-blogcard__body { padding: 20px 22px 22px; } .stk-blogcard__author { display: flex; align-items: center; gap: 11px; } .stk-blogcard__avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; background: var(--stk-surface-2); flex: none; } .stk-blogcard__author-name { font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: var(--stk-ink); line-height: 1.1; } .stk-blogcard__author-meta { font-size: 13px; color: var(--stk-muted-2); margin-top: 2px; } .stk-blogcard__excerpt { margin: 14px 0 0; color: var(--stk-ink-3); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .stk-blogcard__cat { position: relative; z-index: 2; align-self: flex-start; display: inline-flex; align-items: center; line-height: 1; margin-top: 14px; font-family: var(--stk-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; color: var(--pc, var(--stk-blue)); background: var(--stk-blue-50); background: color-mix(in srgb, var(--pc, var(--stk-blue)) 11%, #fff); border: 1px solid transparent; padding: 7px 12px 6px; border-radius: 999px; transition: background .18s ease, color .18s ease, border-color .18s ease; } .stk-blogcard__cat:hover, .stk-blogcard__cat:focus-visible { color: #fff; background: var(--pc, var(--stk-blue)); border-color: var(--pc, var(--stk-blue)); } /* ---- Clickable card: stretched overlay link + per-pillar accents -------- */ .stk-blogcard__link { position: absolute; inset: 0; z-index: 1; border-radius: 18px; -webkit-tap-highlight-color: transparent; } .stk-blogcard__link:focus-visible { outline: 3px solid var(--stk-blue-300); outline-offset: 2px; } .stk-blogcard[data-pillar="ai-hiring-fraud"] { --pc: #6366f1; } .stk-blogcard[data-pillar="hiring-compliance"] { --pc: #0d9488; } .stk-blogcard[data-pillar="hiring-strategy"] { --pc: #2563eb; } .stk-blogcard[data-pillar="salary-market"] { --pc: #059669; } .stk-blogcard[data-pillar="canadian-advantage"] { --pc: #dc2626; } .stk-blogcard[data-pillar="local"] { --pc: #d97706; } .stk-blogcard[data-pillar="careers-jobseekers"] { --pc: #7c3aed; } /* ---- Resource filter bar (resources index + category archives) ---------- */ .stk-resfilter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 auto 38px; max-width: 980px; } .stk-resfilter__pill { display: inline-flex; align-items: center; line-height: 1; font-family: var(--stk-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--stk-ink-2); background: #fff; border: 1px solid var(--stk-border); padding: 11px 16px 10px; border-radius: 999px; text-decoration: none; white-space: nowrap; transition: color .18s ease, background .18s ease, border-color .18s ease; } .stk-resfilter__pill:hover { color: var(--pc, var(--stk-blue)); border-color: var(--pc, var(--stk-blue)); } .stk-resfilter__pill.is-active { color: #fff; background: var(--pc, var(--stk-blue)); border-color: var(--pc, var(--stk-blue)); } .stk-resfilter__pill[data-pillar="ai-hiring-fraud"] { --pc: #6366f1; } .stk-resfilter__pill[data-pillar="hiring-compliance"] { --pc: #0d9488; } .stk-resfilter__pill[data-pillar="hiring-strategy"] { --pc: #2563eb; } .stk-resfilter__pill[data-pillar="salary-market"] { --pc: #059669; } .stk-resfilter__pill[data-pillar="canadian-advantage"] { --pc: #dc2626; } .stk-resfilter__pill[data-pillar="local"] { --pc: #d97706; } .stk-resfilter__pill[data-pillar="careers-jobseekers"] { --pc: #7c3aed; } .stk-resfilter__pill.is-active:not([data-pillar]) { --pc: var(--stk-blue); } /* result context on filtered archives */ .stk-rescontext { text-align: center; margin: -16px 0 30px; font-size: 14.5px; color: var(--stk-ink-2); } .stk-rescontext strong { color: var(--stk-ink); font-weight: 700; } .stk-rescontext a { color: var(--stk-blue); text-decoration: none; margin-left: 6px; } .stk-rescontext a:hover { text-decoration: underline; } @media (max-width: 720px) { .stk-resfilter { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; margin-bottom: 28px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .stk-resfilter::-webkit-scrollbar { display: none; } .stk-resfilter__pill { flex: none; } } /* filled glyph (maple leaf) reads heavier than the outlined ones at equal opacity */ .stk-blogcard[data-pillar="canadian-advantage"] .stk-blogcard__glyph { opacity: .06; } .stk-articles-grid.is-swapping { opacity: .4; pointer-events: none; transition: opacity .15s ease; } /* ---- Light-hero atmosphere: the grid + glow the inline heroes were missing --- */ .stk-hero__atmos-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(15,23,42,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.045) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 94% 86% at 50% 12%, #000 0%, #000 46%, transparent 90%); mask-image: radial-gradient(ellipse 94% 86% at 50% 12%, #000 0%, #000 46%, transparent 90%); } .stk-hero__atmos-blob { position: absolute; z-index: 0; pointer-events: none; top: -180px; left: 50%; transform: translateX(-50%); width: 820px; height: 560px; background: radial-gradient(ellipse at center, rgba(37,99,235,.10), transparent 62%); filter: blur(24px); } /* Hero band sizes to its content, not the TOC rail's height (v0.30.0 fix) */ .stk-posthead { align-self: start; } /* ========================================================================== HERO RELIGHT (append to the END of assets/css/theme.css) -------------------------------------------------------------------------- Flips the shared .stk-hero from dark navy to light, across every role page and every location page (standard + the 3 offices). One component, all variants. The office / served / salary differences are content, not style, so they ride along unchanged. Engineering note: theme.css loads BEFORE shared.css/role.css, so each rule below is written one notch more specific than the original it relights (e.g. `.stk-hero .stk-hero__proof` 0-2-0 beats shared's `.stk-hero__proof` 0-1-0) to win regardless of cascade order. No canonical files touched. Intentionally unchanged: primary button (blue, reads on light), the gold meta star, and the unused .stk-hero__card / __visual block. ========================================================================== */ /* --- shell + ambient ----------------------------------------------------- */ .stk-hero.stk-hero { background: radial-gradient(ellipse 80% 60% at 72% -10%, rgba(37,99,235,.07) 0%, transparent 60%), radial-gradient(ellipse 70% 60% at 8% 112%, rgba(96,165,250,.06) 0%, transparent 60%), linear-gradient(180deg, var(--stk-white) 0%, var(--stk-surface-1) 100%); color: var(--stk-ink-3); } .stk-hero .stk-hero__glow { background: radial-gradient(circle, rgba(37,99,235,.12), transparent 60%); filter: blur(40px); } .stk-hero .stk-hero__atmos { background-image: linear-gradient(rgba(15,23,42,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.04) 1px, transparent 1px); } /* --- headline column ----------------------------------------------------- */ .stk-hero .stk-hero__eyebrow { color: var(--stk-blue); } .stk-hero .stk-hero__title { color: var(--stk-ink); } .stk-hero .stk-hero__title-accent { background: linear-gradient(135deg, var(--stk-blue) 0%, var(--stk-blue-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .stk-hero .stk-hero__content .stk-hero__lead { color: var(--stk-ink-3); } /* secondary CTA: translucent-on-dark -> light ghost */ .stk-hero .stk-hero__actions .stk-btn--secondary { background: var(--stk-white); color: var(--stk-ink); border-color: var(--stk-border); } .stk-hero .stk-hero__actions .stk-btn--secondary:hover { background: var(--stk-surface-1); color: var(--stk-blue); border-color: var(--stk-blue); } .stk-hero .stk-hero__meta { color: var(--stk-ink-3); border-top-color: var(--stk-border); } .stk-hero .stk-hero__stat-icon { color: var(--stk-blue); } /* --- proof panel (the card: rating + middle block + guarantee) ----------- */ .stk-hero .stk-hero__proof { background: var(--stk-white); border: 1px solid var(--stk-border); box-shadow: 0 18px 48px rgba(15,23,42,.10); } .stk-hero .stk-hero__proof-num { color: var(--stk-ink); } .stk-hero .stk-hero__proof-stars svg { color: var(--stk-blue); } .stk-hero .stk-hero__proof-verified { color: var(--stk-blue); } .stk-hero .stk-hero__proof-count { color: var(--stk-ink-3); } .stk-hero .stk-hero__proof-div { background: var(--stk-border); } .stk-hero .stk-hero__proof-label { color: var(--stk-ink-2); } .stk-hero .stk-hero__proof-sub { color: var(--stk-ink-3); } .stk-hero .stk-hero__proof-link { color: var(--stk-blue); } .stk-hero .stk-hero__proof-link:hover { color: var(--stk-blue-hover); } .stk-hero .stk-hero__proof-guar { color: var(--stk-ink); } .stk-hero .stk-hero__proof-guar svg { color: var(--stk-blue); } /* role hero only: salary band value */ .stk-hero .stk-hero__proof-comp { color: var(--stk-ink); } /* ========================================================================== ROLE PAGE v0.55.0 : "How we screen" rubric + "Cost of waiting" relight Cost-of-waiting selectors are one notch more specific than shared.css/role.css so they win regardless of cascade order. Rubric uses new .stk-rubric2 classes. ========================================================================== */ /* ---- Cost of waiting: navy panel -> light surface ---- */ .stk-page__section.cov{ background:linear-gradient(180deg,var(--stk-white) 0%,var(--stk-surface-1) 30%,var(--stk-surface-1) 70%,var(--stk-white) 100%); color:var(--stk-ink-2); } .stk-page__section.cov .acc{ background:linear-gradient(135deg,var(--stk-blue),var(--stk-blue-deep)); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; } .cov .cov__glow{ display:none; } .cov .cov__glow2{ display:none; } .cov .cov__eyebrow{ color:var(--stk-blue); } .cov .cov__title{ color:var(--stk-ink); } .cov .cov__lead{ color:var(--stk-ink-2); } .cov .cov__intro{ color:var(--stk-ink); } .cov .cov__panel{ background:var(--stk-white); border-color:var(--stk-border); box-shadow:0 18px 48px rgba(15,23,42,.08); } .cov .cov__panel-label{ color:var(--stk-ink-3); } .cov .cov__panel-label svg{ color:var(--stk-blue); } .cov .cov__bar-name{ color:var(--stk-ink-2); } .cov .cov__bar-name span{ color:var(--stk-ink-3); } .cov .cov__bar-track{ background:var(--stk-surface-2); } .cov .cov__bar--ind .cov__bar-fill{ background:#94a3b8; } .cov .cov__bar-val{ color:var(--stk-ink); } .cov .cov__bar--stk .cov__bar-val{ color:var(--stk-blue); } .cov .cov__speed{ border-top-color:var(--stk-border); } .cov .cov__sp-n{ color:var(--stk-ink); } .cov .cov__sp-l{ color:var(--stk-ink-3); } /* left column: numbered list, detail on hover/focus (text stays in DOM) */ .cov .cov__points{ display:flex; flex-direction:column; margin:0 0 24px; padding:0; list-style:none; border-top:1px solid var(--stk-border); } .cov .cov__pt{ position:relative; display:flex; align-items:center; gap:15px; border-bottom:1px solid var(--stk-border); padding:15px 6px; cursor:help; transition:background .18s ease; } .cov .cov__pt::before{ display:none; } .cov .cov__pt:hover, .cov .cov__pt:focus-within{ background:rgba(37,99,235,.035); } .cov__pt-idx{ font-family:var(--stk-mono); font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--stk-blue); flex:none; width:22px; } .cov__pt-term{ flex:1; appearance:none; -webkit-appearance:none; background:none; border:0; margin:0; padding:0; font-family:var(--stk-display); font-weight:600; font-size:15.5px; line-height:1.3; color:var(--stk-ink); text-align:left; cursor:help; } .cov__pt-more{ flex:none; color:var(--stk-ink-3); display:flex; transition:transform .18s ease, color .18s ease; } .cov__pt-more svg{ width:15px; height:15px; } .cov .cov__pt:hover .cov__pt-more, .cov .cov__pt:focus-within .cov__pt-more{ color:var(--stk-blue); transform:translateX(2px); } .cov__tip{ position:absolute; left:37px; top:calc(100% - 4px); z-index:6; width:min(300px,80vw); background:var(--stk-ink); color:#fff; font-size:13px; line-height:1.5; padding:11px 13px; border-radius:10px; box-shadow:0 14px 34px rgba(15,23,42,.2); opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .16s, transform .16s, visibility .16s; } .cov__tip::before{ content:""; position:absolute; left:16px; top:-5px; width:10px; height:10px; background:var(--stk-ink); transform:rotate(45deg); } .cov .cov__pt:hover .cov__tip, .cov .cov__pt:focus-within .cov__tip{ opacity:1; visibility:visible; transform:none; } .cov .cov__close{ display:flex; align-items:flex-start; gap:11px; margin:0; padding:15px 17px; font-style:normal; font-size:14.5px; line-height:1.5; font-weight:500; color:var(--stk-ink-2); background:var(--stk-blue-50); border-left:3px solid var(--stk-blue); border-radius:0 10px 10px 0; } .cov .cov__close svg{ flex:none; width:17px; height:17px; color:var(--stk-blue); margin-top:1px; } @media(max-width:680px){ .cov__tip{ position:static; opacity:1; visibility:visible; transform:none; width:auto; background:none; color:var(--stk-ink-3); box-shadow:none; padding:6px 0 0 37px; } .cov__tip::before{ display:none; } .cov .cov__pt{ flex-wrap:wrap; } .cov__pt-more{ display:none; } } /* ---- How we screen: expandable rubric (.stk-rubric2). Timing per JT: 900ms gentle ---- */ .stk-rubric2{ --rg-dur:var(--stk-acc-dur); --rg-ease:var(--stk-acc-ease); max-width:var(--stk-container-default); margin:0 auto; border:1px solid var(--stk-border); border-radius:var(--stk-r-panel); background:var(--stk-white); overflow:hidden; box-shadow:0 18px 48px rgba(15,23,42,.05); } .stk-rubric2__hint{ display:flex; align-items:center; gap:9px; padding:14px 28px; border-bottom:1px solid var(--stk-border); background:var(--stk-surface-2); font-family:var(--stk-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--stk-ink-3); } .stk-rubric2__hint svg{ width:14px; height:14px; flex:none; } .stk-rubric2__row{ border-top:1px solid var(--stk-border); } .stk-rubric2__row:first-of-type{ border-top:0; } .stk-rubric2.js .stk-rubric2__row.is-open{ background:var(--stk-surface-1); } .stk-rubric2__sum{ width:100%; display:grid; grid-template-columns:36px 1fr 22px; align-items:center; gap:18px; padding:20px 28px; background:none; border:0; margin:0; font:inherit; text-align:left; color:inherit; cursor:pointer; transition:background .18s ease; } .stk-rubric2.js .stk-rubric2__row:not(.is-open) .stk-rubric2__sum:hover{ background:var(--stk-surface-1); } .stk-rubric2__idx{ font-family:var(--stk-mono); font-size:12px; font-weight:600; color:var(--stk-blue); } .stk-rubric2__h2{ display:flex; align-items:baseline; justify-content:space-between; gap:18px; min-width:0; } .stk-rubric2__name{ font-family:var(--stk-display); font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--stk-ink); } .stk-rubric2__desc{ font-size:13.5px; color:var(--stk-ink-3); text-align:right; flex:none; } .stk-rubric2__chev{ width:18px; height:18px; color:var(--stk-ink-3); justify-self:end; transition:transform var(--rg-dur) var(--rg-ease), color var(--rg-dur) ease; } .stk-rubric2.js .stk-rubric2__row.is-open .stk-rubric2__chev{ transform:rotate(90deg); color:var(--stk-blue); } .stk-rubric2__reveal{ display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--rg-dur) var(--rg-ease); } .stk-rubric2.js .stk-rubric2__reveal{ grid-template-rows:0fr; } .stk-rubric2.js .stk-rubric2__row.is-open .stk-rubric2__reveal{ grid-template-rows:1fr; } .stk-rubric2.preload .stk-rubric2__reveal{ transition:none; } .stk-rubric2__body{ overflow:hidden; min-height:0; } .stk-rubric2__grid{ display:grid; grid-template-columns:1fr 1fr; padding:8px 28px 30px 90px; } .stk-rubric2__grid--single{ grid-template-columns:1fr; } .stk-rubric2__cell--strong{ padding-right:40px; border-right:1px solid var(--stk-border); } .stk-rubric2__cell--weak{ padding-left:40px; } .stk-rubric2__clabel{ display:flex; align-items:center; gap:8px; font-family:var(--stk-mono); font-size:10.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; margin:0 0 11px; } .stk-rubric2__clabel svg{ width:15px; height:15px; flex:none; } .stk-rubric2__cell--strong .stk-rubric2__clabel{ color:var(--stk-blue); } .stk-rubric2__cell--weak .stk-rubric2__clabel{ color:#64748b; } .stk-rubric2__cell p{ margin:0; font-size:14.5px; line-height:1.62; color:var(--stk-ink-3); } .stk-rubric2__foot{ display:flex; align-items:center; gap:11px; padding:18px 28px; border-top:1px solid var(--stk-border); background:var(--stk-blue-50); font-size:14.5px; color:var(--stk-ink-3); } .stk-rubric2__foot strong{ color:var(--stk-ink); font-weight:600; } .stk-rubric2__foot::before{ content:""; flex:none; width:8px; height:8px; border-radius:99px; background:var(--stk-blue); box-shadow:0 0 0 4px rgba(37,99,235,.15); } @media(prefers-reduced-motion:reduce){ .stk-rubric2__reveal, .stk-rubric2__chev{ transition:none; } } @media(max-width:720px){ .stk-rubric2__h2{ flex-direction:column; align-items:flex-start; gap:2px; } .stk-rubric2__desc{ text-align:left; } .stk-rubric2__grid{ grid-template-columns:1fr; gap:22px; padding:8px 24px 26px 24px; } .stk-rubric2__cell--strong{ padding-right:0; border-right:0; padding-bottom:22px; border-bottom:1px solid var(--stk-border); } .stk-rubric2__cell--weak{ padding-left:0; } } /* ========================================================================== About page - beliefs grid + team grid (reuse the consistent card hover) ========================================================================== */ .stk-textlink { color: var(--stk-blue); text-decoration: none; font-weight: 600; } .stk-textlink:hover { text-decoration: underline; } /* What we believe: brand beliefs as editorial panels; hover = highlight (not lift, they are not links) */ .stk-beliefs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .stk-belief { position: relative; padding: 28px 30px 30px; background: var(--stk-white); border: 1px solid var(--stk-border); border-radius: var(--stk-r-card, 16px); overflow: hidden; transition: background .3s var(--stk-acc-ease, ease), border-color .3s ease; } .stk-belief::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--stk-blue); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--stk-acc-ease, ease); } .stk-belief:hover { background: var(--stk-blue-50); border-color: var(--stk-blue-200); } .stk-belief:hover::before { transform: scaleY(1); } .stk-belief__num { display: block; font-family: var(--stk-mono); font-size: 12px; letter-spacing: .14em; color: var(--stk-blue); margin-bottom: 16px; } .stk-belief__neg { margin: 0 0 4px; font-family: var(--stk-display); font-weight: 400; font-size: 18px; line-height: 1.35; color: var(--stk-ink-3); } .stk-belief__pos { margin: 0; font-family: var(--stk-display); font-weight: 700; font-size: 25px; line-height: 1.2; color: var(--stk-blue); letter-spacing: -.01em; } @media (max-width: 760px) { .stk-beliefs { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .stk-belief, .stk-belief::before { transition: none; } } .stk-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .stk-team { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .stk-team { grid-template-columns: 1fr; } } .stk-team__card { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid var(--stk-border); border-radius: var(--stk-r-card, 16px); padding: 24px; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .18s ease, box-shadow .18s ease; } .stk-team__card:hover { border-color: var(--stk-blue); box-shadow: 0 16px 40px -16px rgba(37,99,235,.25); } .stk-team__photo { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; margin-bottom: 16px; background: var(--stk-surface-2); } .stk-team__name { margin: 0; font-family: var(--stk-display); font-size: 17px; font-weight: 700; color: var(--stk-navy-900); } .stk-team__role { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--stk-blue); } .stk-team__bio { margin: 12px 0 0; font-size: 14px; line-height: 1.55; color: var(--stk-ink-2); } .stk-team__link { margin-top: 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--stk-blue); text-decoration: none; } .stk-team__link svg { width: 14px; height: 14px; } .stk-team__link:hover { text-decoration: underline; } /* ========================================================================== About - team spotlight (light blue duotone; one featured pops, auto-rotate) ========================================================================== */ .stk-spotlight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; padding: 18px 0; } @media (max-width: 820px) { .stk-spotlight { grid-template-columns: repeat(2, 1fr); gap: 24px 18px; } } @media (max-width: 460px) { .stk-spotlight { grid-template-columns: 1fr; } } .stk-spotlight__card { position: relative; cursor: pointer; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: 0 6px 16px -8px rgba(15,23,42,.22); display: flex; flex-direction: column; transition: transform .55s var(--stk-acc-ease, ease), box-shadow .55s ease, opacity .55s ease; transform-origin: center; } .stk-spotlight:has(.stk-spotlight__card.is-active) .stk-spotlight__card:not(.is-active) { opacity: .82; transform: scale(.975); } .stk-spotlight__card.is-active { opacity: 1; transform: translateY(-6px) scale(1.02); z-index: 3; box-shadow: 0 18px 40px -16px rgba(37,99,235,.32); } .stk-spotlight__card:focus-visible { outline: 2px solid var(--stk-blue); outline-offset: 3px; } .stk-spotlight__photo { position: relative; aspect-ratio: 3 / 4; background: var(--stk-blue-50); overflow: hidden; } .stk-spotlight__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; filter: grayscale(1) url(#stk-duotone); transition: filter .6s ease; } .stk-spotlight__card.is-active .stk-spotlight__photo img, .stk-spotlight__card:hover .stk-spotlight__photo img { filter: none; } /* Bottom-anchored info panel. Rest: name/role only (white pill, unchanged). Hover: the panel grows upward over the lower photo, name/role lift, and the bio + LinkedIn reveal beneath them on a navy gradient. Name, role, bio and link share one left edge; nothing shifts or overlaps the row below. */ .stk-spotlight__panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; padding-bottom: 10px; } .stk-spotlight__panel::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; top: -30px; z-index: -1; background: linear-gradient(to top, rgba(8,17,38,.97) 0%, rgba(8,17,38,.92) 46%, rgba(8,17,38,.55) 80%, rgba(8,17,38,0) 100%); opacity: 0; transition: opacity .42s ease; } .stk-spotlight__card.is-active .stk-spotlight__panel::before { opacity: 1; } .stk-spotlight__head { display: flex; flex-direction: column; margin: 0 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255,255,255,.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 6px 16px -8px rgba(15,23,42,.28); transition: background .35s ease, box-shadow .35s ease; } .stk-spotlight__card.is-active .stk-spotlight__head { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .stk-spotlight__name { font-family: var(--stk-display); font-weight: 700; font-size: 14.5px; line-height: 1.2; color: var(--stk-navy-900); transition: color .35s ease; } .stk-spotlight__role { font-size: 12px; color: var(--stk-blue); font-weight: 600; margin-top: 2px; transition: color .35s ease; } .stk-spotlight__card.is-active .stk-spotlight__name { color: #fff; } .stk-spotlight__card.is-active .stk-spotlight__role { color: #bcd3ff; } .stk-spotlight__more { display: flex; flex-direction: column; margin: 0 22px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--stk-acc-ease, ease), opacity .4s ease .05s, padding-top .5s ease; } .stk-spotlight__card.is-active .stk-spotlight__more { max-height: 14em; opacity: 1; padding-top: 9px; } .stk-spotlight__bio { font-size: 12.5px; line-height: 1.55; color: rgba(255,255,255,.92); } .stk-spotlight__link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #fff; text-decoration: none; margin-top: 12px; } .stk-spotlight__link:hover { text-decoration: underline; } .stk-spotlight__link svg { width: 13px; height: 13px; } @media (prefers-reduced-motion: reduce) { .stk-spotlight__card, .stk-spotlight__more, .stk-spotlight__head, .stk-spotlight__panel::before, .stk-spotlight__photo img { transition: none; } } /* team callout: senior-access + second-review differentiator */ .stk-teamcallout { display: flex; align-items: flex-start; gap: 12px; max-width: 600px; margin: 20px auto 0; padding: 13px 18px; border-radius: 14px; background: var(--stk-blue-50); border: 1px solid #dbe7fb; text-align: left; } .stk-teamcallout svg { width: 22px; height: 22px; color: var(--stk-blue); flex: none; margin-top: 1px; } .stk-teamcallout strong { display: block; font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: var(--stk-ink); margin-bottom: 3px; } .stk-teamcallout span { display: block; font-size: 13px; line-height: 1.5; color: var(--stk-ink-3); } /* Team + contact read as one surface block: continuous surface across the seam, tightened gap. */ .stk-page__section--surface.stk-page__section--mergedown { background: linear-gradient(180deg, var(--stk-white) 0%, var(--stk-surface-1) 28%, var(--stk-surface-1) 100%); } .stk-page__section--mergedown { padding-bottom: 0; } .stk-page__section--surface.stk-page__section--mergeup { background: linear-gradient(180deg, var(--stk-surface-1) 0%, var(--stk-surface-1) 72%, var(--stk-white) 100%); } .stk-page__section--mergeup { padding-top: 32px; } /* no-JS: show all bios inline, no dim */ html.no-js .stk-spotlight__card { opacity: 1; transform: none; } html.no-js .stk-spotlight__panel::before { opacity: 1; } html.no-js .stk-spotlight__head { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.no-js .stk-spotlight__name { color: #fff; } html.no-js .stk-spotlight__role { color: #bcd3ff; } html.no-js .stk-spotlight__more { max-height: none; opacity: 1; padding-top: 9px; } /* ========================================================================== About - contact the team (non-form conversion block) ========================================================================== */ .stk-teamcontact { display: grid; grid-template-columns: 4fr 7fr; gap: 80px; align-items: stretch; } @media (min-width: 821px) { .stk-teamcontact__col { display: flex; flex-direction: column; } .stk-teamcontact__col .stk-tc-group + .stk-tc-group { margin-top: auto; } } @media (max-width: 820px) { .stk-teamcontact { grid-template-columns: 1fr; gap: 28px; } } .stk-teamcontact__stack { display: flex; margin-bottom: 20px; } .stk-teamcontact__avatar { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; margin-left: -14px; filter: grayscale(1); background: var(--stk-blue-50); box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: transform .25s var(--stk-acc-ease, ease), filter .35s ease, box-shadow .25s ease; } .stk-teamcontact__avatar:first-child { margin-left: 0; } .stk-teamcontact__avatar:hover { position: relative; z-index: 2; transform: translateY(-6px) scale(1.14); filter: none; box-shadow: 0 12px 24px -8px rgba(37,99,235,.42); } .stk-teamcontact__title { margin: 0; font-family: var(--stk-display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.15; color: var(--stk-navy-900); } .stk-teamcontact__lead { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--stk-ink-2); } .stk-teamcontact__methods { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 460px) { .stk-teamcontact__methods { grid-template-columns: 1fr; } } .stk-teamcontact__method { display: flex; flex-direction: column; padding: 18px 20px; border: 1px solid var(--stk-border); border-radius: var(--stk-r-card, 16px); background: #fff; text-decoration: none; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .stk-teamcontact__method:hover { border-color: var(--stk-blue); box-shadow: 0 16px 40px -16px rgba(37,99,235,.25); transform: translateY(-2px); } .stk-teamcontact__icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--stk-blue-50); color: var(--stk-blue); margin-bottom: 12px; } .stk-teamcontact__icon svg { width: 18px; height: 18px; } .stk-teamcontact__mlabel { font-family: var(--stk-display); font-weight: 700; font-size: 15px; color: var(--stk-navy-900); } .stk-teamcontact__mdesc { margin-top: 4px; font-size: 13px; color: var(--stk-ink-2); line-height: 1.5; } /* About - live chat callout (HubSpot) with online/offline status */ .stk-teamcontact__method--chat { grid-column: 1 / -1; flex-direction: row; align-items: flex-start; gap: 14px; } .stk-teamcontact__method--chat .stk-teamcontact__icon { margin-bottom: 0; flex: none; } .stk-teamcontact__chatbody { display: flex; flex-direction: column; } .stk-teamcontact__chathead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .stk-teamcontact__chatcta { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--stk-blue); } .stk-teamcontact__chatcta svg { width: 14px; height: 14px; } .stk-teamcontact__status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; } .stk-teamcontact__status:empty { display: none; } .stk-teamcontact__status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .stk-teamcontact__status.is-online { color: #16a34a; } .stk-teamcontact__status.is-online::before { box-shadow: 0 0 0 3px rgba(22,163,74,.18); } .stk-teamcontact__status.is-offline { color: var(--stk-ink-4); } .stk-teamcontact__status.is-offline::before { box-shadow: 0 0 0 3px rgba(100,116,139,.16); } /* About - dark logo band so the white-knockout partner logos read */ .stk-logoband--dark { background: var(--stk-navy-900); } .stk-logoband--dark .stk-logos__intro { color: rgba(255,255,255,.6); } .stk-logoband--dark .stk-logos__item img { opacity: .7; } .stk-logoband--dark .stk-logos__item:hover img { opacity: 1; } /* About - founder quote ringed by a faded partner-logo field (slow hover reveal) */ .stk-quotefield { position: relative; overflow: hidden; } .stk-quotefield__field { position: absolute; inset: 0; z-index: 0; max-width: 1100px; margin-inline: auto; will-change: transform; transition: transform .3s ease-out; -webkit-mask: radial-gradient(96% 104% at 50% 50%, transparent 0%, rgba(0,0,0,.35) 14%, #000 30%, #000 72%, rgba(0,0,0,.45) 88%, transparent 100%); mask: radial-gradient(96% 104% at 50% 50%, transparent 0%, rgba(0,0,0,.35) 14%, #000 30%, #000 72%, rgba(0,0,0,.45) 88%, transparent 100%); } .stk-quotefield__logo { position: absolute; transform: translate(-50%, -50%); width: 98px; max-width: 98px; aspect-ratio: 5 / 3; background: var(--stk-blue); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; opacity: .4; transition: opacity .7s ease; } .stk-quotefield__logo:hover { opacity: 1; transition: opacity 1.3s ease-in; } .stk-quotefield__inner { position: relative; z-index: 2; min-height: 600px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .stk-quotefield__inner > * { pointer-events: auto; } .stk-quotefield__logo { pointer-events: auto; } @media (max-width: 900px) { .stk-quotefield__field { display: none; } } @media (prefers-reduced-motion: reduce) { .stk-quotefield__field { transition: none; } .stk-quotefield__logo, .stk-quotefield__logo:hover { transition: opacity .2s ease; } } /* Quotefield head sits above the ambient field; field+quote live in a stage */ .stk-quotefield .stk-section-head { position: relative; z-index: 3; margin-bottom: 4px; } .stk-quotefield__stage { position: relative; } /* Proof cluster: blog + quotefield + client stories share one ambient, dithered data field (built by landing.js, static) */ .stk-proof { position: relative; } .stk-proof__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .stk-proof__field span { position: absolute; width: 9px; height: 9px; border-radius: 2.5px; background: var(--stk-blue-300); } .js .stk-proof.is-wired > section { background: transparent; position: relative; z-index: 1; } @media (max-width: 900px) { .stk-proof__field { display: none; } } /* === About: contact reorg (chat on the left, grouped methods + offices) === */ .stk-tc-chat { margin-top: 22px; } .stk-tc-group + .stk-tc-group { margin-top: 22px; } .stk-tc-grouplabel { font-family: var(--stk-display); font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--stk-muted); margin: 0 0 14px; } .stk-teamcontact__methods.stk-tc-ways { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); } .stk-tc-ways .stk-teamcontact__mdesc { overflow-wrap: anywhere; } .stk-tc-offices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .stk-tc-office { position: relative; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--stk-border); border-radius: var(--stk-r-card, 16px); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .stk-tc-office:hover { border-color: var(--stk-blue); box-shadow: 0 16px 40px -16px rgba(37,99,235,.25); transform: translateY(-2px); } .stk-tc-office__pin { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--stk-blue-50); color: var(--stk-blue); margin-bottom: 11px; } .stk-tc-office__pin svg { width: 16px; height: 16px; } .stk-tc-office__name { font-family: var(--stk-display); font-weight: 700; font-size: 14px; color: var(--stk-navy-900); } .stk-tc-office__name .hq { color: var(--stk-blue); font-size: 11px; } .stk-tc-office__addr { margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--stk-ink-2); } .stk-tc-office__link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .stk-tc-office__link:focus-visible { outline: 2px solid var(--stk-blue); outline-offset: 2px; } .stk-tc-office:hover .stk-tc-office__name { color: var(--stk-blue); } .stk-tc-office__phone { position: relative; z-index: 2; margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--stk-blue); text-decoration: none; } .stk-tc-office__phone svg { width: 13px; height: 13px; } @media (max-width: 560px) { .stk-teamcontact__methods.stk-tc-ways, .stk-tc-offices { grid-template-columns: 1fr; } } /* === About: Mission & vision kinetic manifesto === */ .stk-manifesto-sec { position: relative; overflow: hidden; } .stk-manifesto__body { position: relative; z-index: 1; } .stk-manifesto-wm { position: absolute; right: -3%; top: 50%; transform: translateY(-50%); width: min(620px, 50%); opacity: .07; color: var(--stk-navy-900); pointer-events: none; z-index: 0; } @media (max-width: 700px) { .stk-manifesto-wm { display: none; } } .stk-manifesto-wm svg { width: 100%; height: auto; display: block; } .stk-manifesto { position: relative; } .stk-manifesto__eyebrow { font-family: var(--stk-display); font-weight: 700; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--stk-blue); margin: 0 0 22px; } .stk-manifesto__lines { margin: 0; font-family: var(--stk-display); font-weight: 800; font-size: clamp(28px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -.02em; color: var(--stk-navy-900); } .stk-manifesto__lines .line { display: block; } .stk-manifesto__lines .accent { color: var(--stk-blue); } .stk-manifesto__mv { margin-top: 52px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 760px; } .stk-manifesto__mv h3 { margin: 0 0 8px; font-family: var(--stk-display); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--stk-navy-900); } .stk-manifesto__mv h3::after { content: ""; display: block; width: 26px; height: 3px; border-radius: 2px; background: var(--stk-blue); margin-top: 9px; } .stk-manifesto__mv p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--stk-ink-2); } @media (max-width: 700px) { .stk-manifesto__mv { grid-template-columns: 1fr; gap: 22px; } } /* kinetic reveal: eyebrow, then three lines rise slowly, a beat, then the blue accent wipes in left-to-right */ [data-rg].is-in .stk-manifesto__eyebrow { transition-delay: 0s; } [data-rg] .stk-manifesto__lines .line.rev { transform: translateY(28px); transition: opacity .85s ease, transform .85s cubic-bezier(.16, .84, .34, 1); } [data-rg].is-in .stk-manifesto__lines .line.rev { transform: none; } [data-rg].is-in .stk-manifesto__lines .line:nth-child(1) { transition-delay: .12s; } [data-rg].is-in .stk-manifesto__lines .line:nth-child(2) { transition-delay: .42s; } [data-rg].is-in .stk-manifesto__lines .line:nth-child(3) { transition-delay: .72s; } .stk-manifesto__resume { display: inline-block; } [data-rg] .stk-manifesto__resume { transform: translateY(28px); transition: opacity .85s ease, transform .85s cubic-bezier(.16, .84, .34, 1); } [data-rg].is-in .stk-manifesto__resume { transform: none; transition-delay: .9s; } [data-rg].is-in .stk-manifesto__mv { transition-delay: 1.7s; } /* "roulette" slot-reel: each letter churns through glyphs and lands left-to-right (landing.js). Hidden until the churn runs; degrades to the plain blue word for reduced-motion / no-JS. */ .stk-reel { display: inline-block; } .js .stk-reel { opacity: 0; } .js .stk-reel.is-running { opacity: 1; } .stk-reel__word { display: inline-block; } .stk-reel__word.is-flip { animation: stk-reel-flip .24s cubic-bezier(.22, .7, .3, 1); } @keyframes stk-reel-flip { 0% { transform: translateY(-.46em); opacity: 0; } 100% { transform: none; opacity: 1; } } .stk-reel.is-landed .stk-reel__word { animation: stk-reel-pop .36s cubic-bezier(.16, .84, .34, 1); } @keyframes stk-reel-pop { 0% { transform: translateY(-3px) scale(.96); } 55% { transform: translateY(0) scale(1.07); } 100% { transform: none; } } @media (prefers-reduced-motion: reduce) { .js .stk-reel { opacity: 1; } .stk-reel__word { animation: none !important; } } /* Candidate experience: copy + "person, not data" data-grid portrait */ .stk-candidate__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: stretch; } @media (max-width: 860px) { .stk-candidate__grid { grid-template-columns: 1fr; gap: 40px; } } .stk-candidate__copy { display: flex; flex-direction: column; } .stk-candidate__copy .stk-section-head { margin-bottom: 16px; } .stk-candidate__lead { font-size: 16px; line-height: 1.55; color: var(--stk-ink-2); margin: 0 0 22px; max-width: 44ch; } .stk-candidate__commits { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 3px; } .stk-commit { display: flex; gap: 13px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; } .stk-commit:hover { background: #fff; border-color: var(--stk-border); box-shadow: 0 12px 30px -18px rgba(15, 23, 42, .28); } .stk-commit__mark { flex: none; width: 14px; height: 14px; margin-top: 4px; border-radius: 3px; background: #fff; border: 1.5px solid #c2d6f7; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .stk-commit:hover .stk-commit__mark { background: var(--stk-blue); border-color: var(--stk-blue); transform: scale(1.12); } .stk-commit__body { display: flex; flex-direction: column; gap: 2px; } .stk-commit__label { font-family: var(--stk-display); font-weight: 600; font-size: 15.5px; color: var(--stk-navy-900); line-height: 1.3; transition: color .2s ease; } .stk-commit:hover .stk-commit__label { color: var(--stk-blue); } .stk-commit__desc { font-size: 13.5px; line-height: 1.45; color: var(--stk-ink-3); } @keyframes stk-commit-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } [data-rg] .stk-commit { opacity: 0; } [data-rg].is-in .stk-commit { animation: stk-commit-in .55s cubic-bezier(.16, .84, .34, 1) forwards; } [data-rg].is-in .stk-commit:nth-child(1) { animation-delay: .05s; } [data-rg].is-in .stk-commit:nth-child(2) { animation-delay: .14s; } [data-rg].is-in .stk-commit:nth-child(3) { animation-delay: .23s; } [data-rg].is-in .stk-commit:nth-child(4) { animation-delay: .32s; } html.no-js [data-rg] .stk-commit { opacity: 1; animation: none; } @media (prefers-reduced-motion: reduce) { [data-rg] .stk-commit { opacity: 1; } [data-rg].is-in .stk-commit { animation: none; } } .stk-candidate__outcome { margin-top: auto; border-radius: 14px; background: var(--stk-blue-50); padding: 15px 18px; border-left: 3px solid var(--stk-blue); } [data-rg].is-in .stk-candidate__outcome { transition-delay: .4s; } .stk-candidate__outcome-eyebrow { font-family: var(--stk-display); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--stk-blue); margin: 0 0 5px; } .stk-candidate__outcome-text { font-size: 14.5px; line-height: 1.5; color: var(--stk-navy-900); margin: 0; } .stk-candidate__visual { display: flex; justify-content: center; } .stk-humangrid { display: grid; grid-template-columns: repeat(var(--cols, 14), 1fr); gap: clamp(4px, 0.7vw, 7px); width: 100%; max-width: 480px; } .stk-humangrid__cell { aspect-ratio: 1; border-radius: 3px; background: var(--stk-blue-50); } .stk-humangrid.is-in .stk-humangrid__cell.is-on { animation: stk-cell-land .75s cubic-bezier(.22, .7, .3, 1) both; animation-delay: var(--d, 0s); } @keyframes stk-cell-land { 0% { background: var(--stk-blue-50); transform: scale(1); } 38% { background: var(--stk-blue-300); transform: scale(1.2); } 100% { background: var(--stk-blue); transform: scale(1.07); } } html.no-js .stk-humangrid__cell.is-on { background: var(--stk-blue); transform: scale(1.07); } @media (prefers-reduced-motion: reduce) { .stk-humangrid.is-in .stk-humangrid__cell.is-on { animation: none; background: var(--stk-blue); transform: scale(1.07); } } @media (min-width: 861px) { .stk-candidate__visual { align-items: stretch; } .stk-humangrid { height: 100%; width: auto; max-width: none; aspect-ratio: 14 / 16; grid-template-rows: repeat(16, 1fr); } .stk-humangrid__cell { aspect-ratio: auto; } } /* Salary page - anchor offset so hero CTAs land below the sticky header */ #benchmarks, #get-guide { scroll-margin-top: 100px; } /* ============================ AI HIRING FRAUD PLAYBOOK ============================ */ /* Hero feature pills (dark hero) */ .stk-sghero__features { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; } .stk-sghero__feature { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--stk-ink-2); background: var(--stk-white); border: 1px solid var(--stk-border); border-radius: 999px; padding: 8px 15px 8px 13px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .stk-sghero__feature::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--stk-blue); flex: 0 0 auto; } /* Problem - forensic HUD threat tiles */ .stk-aip-risks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; } .stk-aip-risk { position: relative; overflow: hidden; background: #070f20; border: 1px solid rgba(96,165,250,.22); border-radius: 16px; padding: 30px 24px 26px; color: #fff; } .stk-aip-risk::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(96,165,250,.05) 0 1px, transparent 1px 4px); pointer-events: none; } .stk-aip-risks .stk-aip-risk.rev { transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1), border-color .25s ease, box-shadow .25s ease; } .stk-aip-risk__c { position: absolute; width: 13px; height: 13px; border: 2px solid var(--stk-blue-400, #60a5fa); transition: border-color .25s ease; z-index: 2; } .stk-aip-risk__c--tl { top: 11px; left: 11px; border-right: 0; border-bottom: 0; } .stk-aip-risk__c--tr { top: 11px; right: 11px; border-left: 0; border-bottom: 0; } .stk-aip-risk__c--bl { bottom: 11px; left: 11px; border-right: 0; border-top: 0; } .stk-aip-risk__c--br { bottom: 11px; right: 11px; border-left: 0; border-top: 0; } .stk-aip-risk__tag { font-family: var(--stk-mono); font-size: 11px; letter-spacing: .12em; color: var(--stk-blue-300, #93c5fd); margin: 6px 0 16px; position: relative; z-index: 2; } .stk-aip-risk__tag::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #ff4d6d; margin-right: 9px; vertical-align: middle; box-shadow: 0 0 8px #ff4d6d; animation: stk-aip-blink 1.4s steps(2, end) infinite; } @keyframes stk-aip-blink { 50% { opacity: .2; } } .stk-aip-risk__title { font-family: var(--stk-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; color: #fff; margin: 0 0 9px; position: relative; z-index: 2; } .stk-aip-risk__desc { font-size: 13.5px; line-height: 1.55; color: #aebfd6; margin: 0; position: relative; z-index: 2; } .stk-aip-risk__scan { position: absolute; left: 0; right: 0; height: 48px; top: -48px; background: linear-gradient(to bottom, transparent, rgba(96,165,250,.22), transparent); opacity: 0; pointer-events: none; z-index: 1; } .stk-aip-risk:hover { border-color: var(--stk-blue-300, #93c5fd); box-shadow: 0 0 0 1px rgba(96,165,250,.28), 0 22px 46px -22px rgba(37,99,235,.55); } .stk-aip-risk:hover .stk-aip-risk__c { border-color: var(--stk-cyan, #22d3ee); } .stk-aip-risk:hover .stk-aip-risk__scan { animation: stk-aip-sweep 1.3s ease-in-out; } @keyframes stk-aip-sweep { 0% { top: -48px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .stk-aip-risk__tag::before, .stk-aip-risk__scan { animation: none !important; } .stk-aip-risk:hover .stk-aip-risk__scan { animation: none !important; } } /* Tests - block heads */ .stk-aip-block { margin-top: 52px; } .stk-aip-block__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 22px; } .stk-aip-block__tag { display: inline-flex; align-items: center; font-family: var(--stk-mono); font-weight: 500; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--stk-blue); background: var(--stk-blue-50, #eff6ff); border: 1px solid var(--stk-blue-200, #bfdbfe); border-radius: 999px; padding: 7px 14px; } .stk-aip-block__note { font-size: 14px; color: var(--stk-ink-2); margin: 0; } /* Tests - 4 step cards */ .stk-aip-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .stk-aip-steps--five { grid-template-columns: repeat(5, 1fr); } .stk-aip-step { display: flex; flex-direction: column; background: var(--stk-white); border: 1px solid var(--stk-border); border-radius: 16px; padding: 22px 20px 0; } .stk-aip-step__num { font-family: var(--stk-mono); font-weight: 500; font-size: 13px; color: var(--stk-blue); letter-spacing: .04em; } .stk-aip-step__title { font-family: var(--stk-display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; color: var(--stk-ink); margin: 8px 0; } .stk-aip-step__do { font-size: 13.5px; line-height: 1.5; color: var(--stk-ink-2); margin: 0 0 16px; flex: 1 1 auto; } .stk-aip-step__tell { font-size: 12.5px; line-height: 1.45; color: var(--stk-ink-2); margin: 0; padding: 13px 0 16px; border-top: 1px solid var(--stk-surface-2); } .stk-aip-step__telllabel { display: block; font-family: var(--stk-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--stk-blue); margin-bottom: 3px; } /* Tests - 2 AI-assistant check cards */ .stk-aip-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .stk-aip-check { background: var(--stk-white); border: 1px solid var(--stk-border); border-radius: 18px; padding: 28px 26px; } .stk-aip-check__title { font-family: var(--stk-display); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--stk-ink); margin: 0 0 10px; } .stk-aip-check__desc { font-size: 14.5px; line-height: 1.55; color: var(--stk-ink-2); margin: 0 0 16px; } .stk-aip-check__tell { font-size: 13px; line-height: 1.5; color: var(--stk-ink-2); margin: 0; padding-top: 15px; border-top: 1px solid var(--stk-surface-2); } .stk-aip-check__telllabel { display: block; font-family: var(--stk-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--stk-blue); margin-bottom: 4px; } @media (max-width: 980px) { .stk-aip-risks { grid-template-columns: 1fr; } .stk-aip-steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .stk-aip-steps, .stk-aip-checks { grid-template-columns: 1fr; } } /* AI capture - landscape deck cover variant */ .stk-dlc__visual--deck .stk-dlc__reviews { flex: 0 0 auto; align-self: stretch; } .stk-dlc__visual--deck .stk-dlc__visualfoot { margin-top: 22px; } .stk-dlc__deck { position: relative; align-self: flex-start; width: 100%; max-width: 366px; margin: 30px 0 18px; -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 99%); mask-image: linear-gradient(to bottom, #000 66%, transparent 99%); } .stk-dlc__deck::before, .stk-dlc__deck::after { content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); } .stk-dlc__deck::before { transform: translate(8px, -8px) rotate(2.2deg); z-index: 1; } .stk-dlc__deck::after { transform: translate(16px, -15px) rotate(4.4deg); z-index: 0; } .stk-dlc__deckimg { position: relative; z-index: 2; display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 24px 50px -18px rgba(0,0,0,.6); } /* AI tests - hover polish (transform .25s so reveal slide + hover lift coexist) */ .stk-aip-tests .stk-aip-steps .stk-aip-step, .stk-aip-tests .stk-aip-checks .stk-aip-check { transition: opacity .5s cubic-bezier(.22,.61,.36,1), transform .25s cubic-bezier(.22,.61,.36,1), border-color .2s ease, box-shadow .2s ease; } .stk-aip-tests .stk-aip-steps .stk-aip-step:hover, .stk-aip-tests .stk-aip-checks .stk-aip-check:hover { border-color: var(--stk-blue); box-shadow: 0 16px 38px -18px rgba(37,99,235,.30); transform: translateY(-3px); } .stk-aip-tests .stk-aip-step:hover .stk-aip-step__tell { border-top-color: var(--stk-blue-200, #bfdbfe); } .stk-aip-tests .stk-aip-check:hover .stk-aip-check__tell { border-top-color: var(--stk-blue-200, #bfdbfe); } @media (prefers-reduced-motion: reduce) { .stk-aip-tests .stk-aip-steps .stk-aip-step:hover, .stk-aip-tests .stk-aip-checks .stk-aip-check:hover { transform: none; } } /* =================================================================== FOOTER REBUILD (.stk-foot) - hybrid CTA band + body. Self-contained namespace; supersedes the legacy .stk-footer organism. =================================================================== */ .stk-foot { background: var(--stk-navy-900); color: var(--stk-muted-3); } .stk-foot__wrap { max-width: 1200px; margin: 0 auto; } /* --- CTA band (message left, actions right) --- */ .stk-foot__cta { position: relative; overflow: hidden; background: linear-gradient(120deg, #0b1a35, #0d2554 70%, #0b1a35); padding: 52px clamp(20px,4vw,40px); border-bottom: 1px solid rgba(255,255,255,.06); } .stk-foot__cta-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(96,165,250,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(96,165,250,.06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 90% 130% at 30% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 90% 130% at 30% 0%, #000, transparent 75%); } .stk-foot__cta-glow { position: absolute; left: 8%; top: -60%; width: 680px; height: 520px; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(37,99,235,.28), transparent 70%); } .stk-foot__cta-in { position: relative; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 48px; flex-wrap: wrap; } .stk-foot__cta-l { max-width: 540px; } .stk-foot__cta-eye { font-family: var(--stk-mono); font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--stk-blue-400); margin: 0 0 12px; } .stk-foot__cta-h { font-family: var(--stk-display); font-weight: 800; font-size: clamp(26px,3.2vw,38px); line-height: 1.05; color: #fff; letter-spacing: -.025em; margin: 0; } .stk-foot__ac { color: var(--stk-blue-400); } .stk-foot__cta-sub { font-size: 15px; color: var(--stk-muted-2); margin: 12px 0 0; line-height: 1.55; } .stk-foot__cta-r { display: flex; flex-direction: column; gap: 16px; align-items: flex-end; } .stk-foot__cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } /* --- buttons (equal width, centered labels) --- */ .stk-foot__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 210px; font-family: var(--stk-display); font-weight: 600; font-size: 15.5px; padding: 15px 24px; border-radius: var(--stk-r-btn); text-decoration: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .stk-foot__btn--p { background: var(--stk-blue); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.25); } .stk-foot__btn--p:hover { background: var(--stk-blue-hover); color: #fff; box-shadow: 0 8px 22px rgba(37,99,235,.35); transform: translateY(-1px); } .stk-foot__btn--g { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.18); } .stk-foot__btn--g:hover { background: rgba(96,165,250,.14); color: #fff; border-color: rgba(96,165,250,.4); transform: translateY(-1px); } .stk-foot__btn svg { width: 16px; height: 16px; } /* --- trust line --- */ .stk-foot__trust { display: flex; gap: 12px; align-items: center; justify-content: flex-end; font-size: 12.5px; color: var(--stk-muted-2); flex-wrap: wrap; } .stk-foot__trust strong { color: #fff; font-weight: 600; } .stk-foot__star { color: #fbbf24; } .stk-foot__dot { opacity: .4; } /* --- main body --- */ .stk-foot__main { padding: 60px clamp(20px,4vw,40px) 0; } .stk-foot__main-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 46px; } .stk-foot__brand-logo { display: inline-block; } .stk-foot__brand-logo img { height: 30px; width: auto; display: block; } .stk-foot__tagline { font-family: var(--stk-display); font-size: 15px; color: #e2e8f0; margin: 22px 0 0; line-height: 1.5; font-weight: 500; } .stk-foot__about { font-size: 13.5px; line-height: 1.7; color: var(--stk-muted); margin: 14px 0 18px; max-width: 330px; } .stk-foot__email { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--stk-muted-3); text-decoration: none; margin: 0 0 20px; transition: color .15s ease; } .stk-foot__email:hover { color: #fff; } .stk-foot__email svg { width: 15px; height: 15px; color: var(--stk-blue-400); } .stk-foot__social { display: flex; gap: 10px; } .stk-foot__social a { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); color: var(--stk-muted-3); transition: .15s ease; } .stk-foot__social a:hover { background: var(--stk-blue); color: #fff; border-color: var(--stk-blue); } .stk-foot__social svg { width: 17px; height: 17px; } .stk-foot__col-h { font-family: var(--stk-mono); font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--stk-blue-400); margin: 0 0 18px; } .stk-foot__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .stk-foot__col a { color: var(--stk-muted-3); text-decoration: none; font-size: 14.5px; transition: .15s ease; } .stk-foot__col a:hover { color: #fff; } /* --- offices --- */ .stk-foot__offices { max-width: 1200px; margin: 50px auto 0; padding: 40px 0 0; border-top: 1px solid rgba(255,255,255,.07); display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; } .stk-foot__office-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--stk-display); font-weight: 600; font-size: 15px; color: #fff; margin-bottom: 9px; text-decoration: none; } .stk-foot__office-name:hover { color: var(--stk-blue-400); } .stk-foot__office-name svg { width: 15px; height: 15px; color: var(--stk-blue-400); flex: none; } .stk-foot__office-hq { font-family: var(--stk-mono); font-size: 11px; color: var(--stk-blue-400); letter-spacing: .04em; } .stk-foot__office-addr { display: block; font-size: 13px; line-height: 1.6; color: var(--stk-muted); font-style: normal; } .stk-foot__office-links { display: flex; gap: 18px; margin-top: 11px; flex-wrap: wrap; } .stk-foot__office-links a { font-size: 13px; color: var(--stk-blue-400); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .stk-foot__office-links svg { width: 12px; height: 12px; flex: none; } .stk-foot__office-links a:hover { color: #fff; } /* --- signals + bottom --- */ .stk-foot__signals { max-width: 1200px; margin: 40px auto 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; } .stk-foot__chip { font-family: var(--stk-mono); font-size: 11px; letter-spacing: .03em; color: var(--stk-muted-2); padding: 6px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; } .stk-foot__bottom { max-width: 1200px; margin: 26px auto 0; padding: 22px 0 30px; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .stk-foot__copy { font-size: 13px; color: var(--stk-muted); } .stk-foot__legal { display: flex; gap: 22px; flex-wrap: wrap; } .stk-foot__legal a { font-size: 13px; color: var(--stk-muted-2); text-decoration: none; } .stk-foot__legal a:hover { color: #fff; } /* --- responsive --- */ @media (max-width: 980px) { .stk-foot__main-in { grid-template-columns: 1fr 1fr; gap: 38px 32px; } .stk-foot__brand { grid-column: 1 / -1; } } @media (max-width: 860px) { .stk-foot__cta-in { flex-direction: column; align-items: flex-start; } .stk-foot__cta-r { align-items: flex-start; width: 100%; } .stk-foot__trust { justify-content: flex-start; } } @media (max-width: 620px) { .stk-foot__main-in { grid-template-columns: 1fr; gap: 32px; } .stk-foot__offices { grid-template-columns: 1fr; gap: 24px; } .stk-foot__bottom { flex-direction: column; align-items: flex-start; gap: 14px; } } @media (max-width: 480px) { .stk-foot__cta-btns { flex-direction: column; width: 100%; } .stk-foot__btn { width: 100%; min-width: 0; } } /* --- footer newsletter (mid-body band) --- */ .stk-foot__news { max-width: 1200px; margin: 50px auto 0; padding: 40px 0 0; border-top: 1px solid rgba(255,255,255,.07); display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; } .stk-foot__news-text { max-width: 460px; } .stk-foot__news-h { font-family: var(--stk-display); font-weight: 700; font-size: 20px; color: #fff; margin: 0; line-height: 1.2; } .stk-foot__news-p { font-size: 13.5px; color: var(--stk-muted-2); margin: 8px 0 0; line-height: 1.55; } .stk-foot__news-form { display: flex; flex-direction: column; gap: 9px; flex: none; } .stk-foot__news-row { display: flex; gap: 10px; } .stk-foot__news-input { width: 280px; max-width: 100%; background: rgba(7,18,36,.55); border: 1px solid rgba(255,255,255,.14); border-radius: var(--stk-r-btn); padding: 13px 15px; color: #fff; font-family: var(--stk-body); font-size: 14px; } .stk-foot__news-input::placeholder { color: var(--stk-muted); } .stk-foot__news-input:focus { outline: none; border-color: var(--stk-blue-400); box-shadow: 0 0 0 3px rgba(37,99,235,.22); } .stk-foot__news-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--stk-blue); color: #fff; border: none; border-radius: var(--stk-r-btn); padding: 13px 22px; font-family: var(--stk-display); font-weight: 600; font-size: 14.5px; cursor: pointer; white-space: nowrap; transition: background .15s ease; } .stk-foot__news-btn:hover { background: var(--stk-blue-hover); } .stk-foot__news-btn svg { width: 15px; height: 15px; } .stk-foot__news-fine { font-family: var(--stk-mono); font-size: 10.5px; color: var(--stk-muted); letter-spacing: .02em; margin: 0; } @media (max-width: 760px) { .stk-foot__news { flex-direction: column; align-items: flex-start; gap: 18px; } .stk-foot__news-form { width: 100%; } .stk-foot__news-row { width: 100%; } .stk-foot__news-input { flex: 1; width: auto; } } @media (max-width: 420px) { .stk-foot__news-row { flex-direction: column; } .stk-foot__news-btn { width: 100%; } } /* =================================================================== PROCESS PIPELINE (.stk-procflow) - stepped-cards process section. Used on find-it-talent (and our-process). Distinct from the shared .stk-process (front-page/ontario) so those stay untouched. =================================================================== */ .stk-procflow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; margin-top: 8px; } .stk-procflow::before { content: ""; position: absolute; top: 48px; left: 12.5%; right: 12.5%; height: 2px; background: repeating-linear-gradient(90deg, var(--stk-blue-200) 0 8px, transparent 8px 14px); z-index: 0; } .stk-procflow__step { position: relative; z-index: 1; background: var(--stk-white); border: 1px solid var(--stk-border); border-radius: var(--stk-r-card); padding: 24px 22px 26px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .stk-procflow__label { position: absolute; top: -9px; left: 22px; font-family: var(--stk-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--stk-muted-2); background: var(--stk-surface-1); padding: 0 6px; } .stk-procflow__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .stk-procflow__num { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-family: var(--stk-display); font-weight: 700; font-size: 19px; color: #fff; background: linear-gradient(145deg, var(--stk-blue), var(--stk-blue-hover)); box-shadow: 0 4px 12px rgba(37,99,235,.28); } .stk-procflow__badge { font-family: var(--stk-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--stk-blue); background: var(--stk-blue-50); border: 1px solid var(--stk-blue-200); border-radius: var(--stk-r-pill); padding: 4px 9px; white-space: nowrap; } .stk-procflow__title { font-family: var(--stk-display); font-weight: 700; font-size: 17px; color: var(--stk-ink); margin: 0 0 9px; letter-spacing: -.01em; } .stk-procflow__desc { font-size: 13.5px; color: var(--stk-ink-3); line-height: 1.6; margin: 0; } @media (max-width: 900px) { .stk-procflow { grid-template-columns: 1fr 1fr; } .stk-procflow::before { display: none; } } @media (max-width: 560px) { .stk-procflow { grid-template-columns: 1fr; } } /* ============================================================ Find IT Jobs - candidate Google reviews (.stk-greview) Light, equal-height review cards from real GMB excerpts. Display only; no self-serving AggregateRating markup. ============================================================ */ .stk-greview__rating { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; margin: 0 auto 2.5rem; } .stk-greview__score { font-family: var(--stk-display); font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--stk-ink); } .stk-greview__rating-meta { display: inline-flex; flex-direction: column; gap: .25rem; align-items: flex-start; } .stk-greview__stars, .stk-greview__cstars { display: inline-flex; gap: 2px; color: var(--stk-gold); } .stk-greview__stars svg { width: 16px; height: 16px; fill: currentColor; } .stk-greview__verified { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 500; color: var(--stk-muted); } .stk-greview__verified svg { width: 14px; height: 14px; fill: currentColor; } .stk-greview__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 960px; margin: 0 auto; } .stk-greview__card { display: flex; flex-direction: column; gap: 1rem; background: var(--stk-white); border: 1px solid var(--stk-border); border-radius: var(--stk-r-card); padding: 1.5rem; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } .stk-greview__cstars { flex: 0 0 auto; } .stk-greview__cstars svg { width: 15px; height: 15px; fill: currentColor; } .stk-greview__quote { flex: 1 1 auto; margin: 0; color: var(--stk-ink-2); font-size: .95rem; line-height: 1.6; } .stk-greview__by { display: flex; align-items: center; gap: .65rem; margin-top: auto; } .stk-greview__avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--stk-blue-50); color: var(--stk-blue); font-family: var(--stk-display); font-weight: 700; font-size: 1rem; } .stk-greview__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; } .stk-greview__name { font-weight: 600; font-size: .9rem; color: var(--stk-ink); } .stk-greview__tag { font-size: .75rem; color: var(--stk-muted); } .stk-greview__g { flex: 0 0 auto; width: 18px; height: 18px; color: var(--stk-muted-2); fill: currentColor; } .stk-tnet__fine { margin: 1.25rem auto 0; max-width: 52ch; font-size: .85rem; line-height: 1.6; color: var(--stk-muted-3); } @media (max-width: 600px) { .stk-greview__grid { grid-template-columns: 1fr; } } /* ============================================================ Homepage (front-page.php) refinements ============================================================ */ /* Recently-placed: stack stat number over label; space the location line */ .stk-card--role-filled .stk-card__stat { display: flex; flex-direction: column; } .stk-card--role-filled .stk-card__location { margin: 4px 0 2px; } /* Recently-placed: industry pill is now an internal link (preserve its tint on hover) */ .stk-card--role-filled a.stk-pill { text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .stk-card--role-filled a.stk-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(15, 23, 42, .12); } .stk-card--role-filled a.stk-pill--saas:hover { color: #1d4ed8; } .stk-card--role-filled a.stk-pill--financial:hover { color: #15803d; } .stk-card--role-filled a.stk-pill--healthcare:hover { color: #c2410c; } /* Featured resources: centered glyph fills the media area */ .stk-card--resource__glyph { width: 72px; height: 72px; color: var(--stk-blue); opacity: .45; } /* ============================================================ Homepage: dark "How we work" pipeline + green guarantee band + Google review card hover (v0.99.33) ============================================================ */ /* How we work — dark interactive pipeline */ .stk-howflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; } .stk-howflow__step { position: relative; z-index: 1; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.10); border-radius: var(--stk-r-card); padding: 28px 22px 24px; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; } .stk-howflow__step:hover { transform: translateY(-4px); border-color: rgba(96,165,250,.45); background: rgba(37,99,235,.08); box-shadow: 0 16px 40px rgba(2,6,23,.45); } .stk-howflow__node { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(37,99,235,.16); color: var(--stk-blue-300); font-family: var(--stk-display); font-weight: 800; font-size: 16px; margin-bottom: 16px; transition: background .18s ease, color .18s ease, transform .18s ease; } .stk-howflow__step:hover .stk-howflow__node { background: linear-gradient(135deg, var(--stk-blue) 0%, var(--stk-blue-deep) 100%); color: #fff; transform: scale(1.06); } .stk-howflow__title { font-family: var(--stk-display); font-size: 17px; font-weight: 700; color: var(--stk-white); margin: 0 0 8px; } .stk-howflow__desc { font-size: 14px; line-height: 1.6; color: var(--stk-muted-3); margin: 0; } .stk-howflow__cta { text-align: center; margin: 38px 0 0; } @media (min-width: 880px) { .stk-howflow__step::after { content: ""; position: absolute; top: 51px; right: -20px; width: 20px; height: 2px; background: rgba(96,165,250,.30); } .stk-howflow__step:last-child::after { display: none; } } @media (max-width: 880px) { .stk-howflow { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .stk-howflow { grid-template-columns: 1fr; } } /* 90-day guarantee band — green accent */ .stk-guarantee { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); } .stk-guarantee__inner { display: flex; align-items: center; gap: 24px; } .stk-guarantee__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,.16); color: #fff; } .stk-guarantee__icon svg { width: 28px; height: 28px; } .stk-guarantee__copy { flex: 1 1 auto; } .stk-guarantee__title { font-family: var(--stk-display); font-size: clamp(18px, 2vw, 22px); font-weight: 800; color: #fff; margin: 0 0 4px; line-height: 1.3; } .stk-guarantee__sub { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.88); margin: 0; } .stk-guarantee__cta { flex: 0 0 auto; background: #fff; color: #15803d; border-color: #fff; } .stk-guarantee__cta:hover { background: rgba(255,255,255,.92); color: #15803d; border-color: #fff; transform: translateY(-1px); } @media (max-width: 760px) { .stk-guarantee__inner { flex-direction: column; align-items: flex-start; gap: 18px; } .stk-guarantee__cta { align-self: stretch; justify-content: center; } } /* Google reviews — card hover */ .stk-greview__card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .stk-greview__card:hover { transform: translateY(-3px); border-color: var(--stk-blue); box-shadow: 0 10px 30px rgba(37,99,235,.10); } .stk-greview__card:hover .stk-greview__g { color: #4285F4; } /* Marquee text wordmark — for partners without a clean logo asset (matches the 84px logo slot) */ .stk-marquee__wordmark { height: 84px; display: inline-flex; align-items: center; justify-content: center; width: auto; max-width: none; font-family: var(--stk-display); font-weight: 700; font-size: 32px; letter-spacing: -.01em; line-height: 1; color: #fff; filter: none; white-space: nowrap; } /* ============================================================ HubSpot native forms - styled to match the .stk-dlc form look. Applied via the .stk-hsform wrapper (inc/hubspot.php helper). Covers magnet, contact, hiring, and newsletter embeds. ============================================================ */ .stk-hsform { width: 100%; } .stk-hsform .hs-form { display: flex; flex-direction: column; } .stk-hsform fieldset { max-width: none !important; } .stk-hsform .hs-form-field { margin-bottom: 16px; } .stk-hsform .hs-form-field > label { display: block; font-family: var(--stk-display); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--stk-ink); margin-bottom: 7px; } .stk-hsform .hs-form-required { color: var(--stk-blue); margin-left: 2px; } .stk-hsform .hs-field-desc { font-family: var(--stk-body); font-size: 12.5px; color: var(--stk-ink-3); margin: 0 0 7px; } .stk-hsform .hs-input:not([type="checkbox"]):not([type="radio"]) { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--stk-border); border-radius: 11px; font-family: var(--stk-body); font-size: 15px; color: var(--stk-navy-900); background: var(--stk-surface-1); -webkit-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s, background .15s; } .stk-hsform textarea.hs-input { min-height: 110px; resize: vertical; line-height: 1.5; } .stk-hsform .hs-input::placeholder { color: var(--stk-muted-2, #94a3b8); } .stk-hsform .hs-input:focus { outline: none; border-color: var(--stk-blue); background: var(--stk-white); box-shadow: 0 0 0 3px var(--stk-blue-50); } .stk-hsform select.hs-input { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; } .stk-hsform .inputs-list { list-style: none; margin: 0; padding: 0; } .stk-hsform .inputs-list > li { margin-bottom: 8px; } .stk-hsform .hs-form-booleancheckbox-display, .stk-hsform .hs-form-checkbox-display, .stk-hsform .hs-form-radio-display { display: flex; align-items: flex-start; gap: 9px; font-family: var(--stk-body); font-size: 13.5px; line-height: 1.5; color: var(--stk-ink); cursor: pointer; } .stk-hsform input[type="checkbox"].hs-input, .stk-hsform input[type="radio"].hs-input { margin-top: 3px; accent-color: var(--stk-blue); width: 16px; height: 16px; flex: 0 0 auto; } .stk-hsform .hs-fieldtype-file .hs-input { padding: 9px 12px; background: var(--stk-surface-1); } .stk-hsform .hs-error-msgs { list-style: none; margin: 6px 0 0; padding: 0; } .stk-hsform .hs-error-msg, .stk-hsform .hs-error-msgs label { font-family: var(--stk-body); font-size: 12.5px; color: #dc2626; } .stk-hsform .hs-input.invalid { border-color: #dc2626; } .stk-hsform .legal-consent-container, .stk-hsform .hs-richtext { font-family: var(--stk-body); font-size: 12.5px; line-height: 1.55; color: var(--stk-ink-3); margin-top: 4px; } .stk-hsform .legal-consent-container a, .stk-hsform .hs-richtext a { color: var(--stk-blue); } .stk-hsform .hs-submit { margin-top: 6px; } .stk-hsform .hs-button.primary, .stk-hsform input[type="submit"].hs-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 15px 24px; border: 0; border-radius: 12px; font-family: var(--stk-display); font-weight: 700; font-size: 15px; letter-spacing: .01em; color: #fff; background: linear-gradient(135deg, #3b82f6 0%, var(--stk-blue) 52%, var(--stk-blue-hover) 100%); cursor: pointer; box-shadow: 0 16px 32px -12px rgba(37,99,235,.65); transition: transform .15s, box-shadow .15s, filter .15s; -webkit-appearance: none; appearance: none; } .stk-hsform .hs-button.primary:hover, .stk-hsform input[type="submit"].hs-button:hover { transform: translateY(-2px); box-shadow: 0 22px 42px -12px rgba(37,99,235,.75); filter: brightness(1.06); } .stk-hsform .submitted-message, .stk-hsform .hs-form-loading { font-family: var(--stk-body); font-size: 15px; color: var(--stk-ink); padding: 14px 0; } /* ============================================================ HubSpot cookie consent banner - slim floating slide-up bar. Selectors out-specify HubSpot's runtime inline