/* ============================================================= ZARAS — Role detail (plain, dark, uses site tokens) Matches careers.html: same type system, same signal teal. Body content is intentionally plain — ABOUT / ROLE / RESPONSIBILITIES / QUALIFICATIONS — followed by a real inline application form. v6 (2026-05-13): - Removed dead .cx-nav / .cx-nav-row / .cx-logo / .cx-links / .cx-cta rules (plus matching .cx-nav-row / .cx-links overrides in the @media (max-width: 720px) block). Selectors orphaned by the site-nav module migration — no DOM elements match, so visual output is unchanged. Mirrors the careers.html inline-CSS cleanup in commit 89f0c83. v4 (2026-05-11): LOAD-BEARING changes (the reason the bump exists): - `.site-nav { --gutter: 32px; }` scoped override. - `.site-footer { --gutter: 32px; }` scoped override. Both shared modules consume `var(--gutter, 24px)` for shell padding (implicit host-page contract — see TECH-DEBT for the leak entry). The 8 standard pages declare `--gutter: 32px`; careers uses 40px at :root for content breathing room. Without these scoped overrides the careers nav and footer were padded 8px wider than every other page, shifting the centered logo and footer brand right. RIDE-ALONG cleanup (free because the bump is already happening): - Removed the bespoke .foot / .foot .sig / .foot .right / .foot media-query rules — careers-role.html now uses the shared site-footer module instead of its old custom .foot div. TRIED-AND-REVERTED (kept here for the next person who wonders): - body overflow-x: hidden → clip was attempted as the initial fix for the logo drift. Hypothesis was that `hidden` makes a scroll container, shrinking layout by the scrollbar gutter. A/B measurement disproved it: toggling overflow-x between hidden and clip with --gutter scope in place produced 0px delta in logo-left. The full 8px drift was --gutter inheritance alone. The original `hidden` rule is back. ============================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #0b0a09; --bg-sub: #0e0d0b; --bg-raise: #13110f; --ink: #efece6; --ink-sub: #b2aea4; --ink-mute: #a8a39a; --ink-faint: #3a3935; --rule: rgba(255,250,240,0.08); --rule-hi: rgba(255,250,240,0.16); --signal: #76c7b2; --signal-ink: #cde9e0; --signal-weak: rgba(118,199,178,0.14); --signal-rule: rgba(118,199,178,0.36); --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; --serif: 'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif; --gutter: 40px; /* host-page contract: site-nav.v6.css consumes --ink-label for the drawer legal-row separator (see TECH-DEBT.md). matches the value defined on the 8 standard pages. */ --ink-label: #a8a39a; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-feature-settings: "ss01", "cv11"; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; line-height: 1.65; min-height: 100vh; overflow-x: hidden; } /* Scope --gutter overrides for the shared site-nav + site-footer modules (see header changelog for full rationale). */ .site-nav { --gutter: 32px; } .site-footer { --gutter: 32px; } ::selection { background: var(--signal); color: #001714; } a { color: var(--signal-ink); text-decoration: none; border-bottom: 1px solid var(--signal-rule); transition: color .18s ease, border-color .18s ease; } a:hover { color: var(--signal); border-bottom-color: var(--signal); } a:focus-visible { outline: 1px solid var(--signal); outline-offset: 3px; border-bottom-color: transparent; } /* ---------- Page shell ---------- */ .page { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 48px var(--gutter) 96px; } .back { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); border-bottom: none; margin-bottom: 32px; } .back:hover { color: var(--ink); border-bottom: none; } .back .a { transition: transform .18s ease; display: inline-block; } .back:hover .a { transform: translateX(-3px); } h1 { font-family: var(--sans); font-weight: 500; font-size: clamp(34px, 4.4vw, 48px); letter-spacing: -0.022em; line-height: 1.06; color: var(--ink); text-wrap: balance; max-width: 22ch; } .loc { margin-top: 14px; font-family: var(--mono); font-size: 0.84rem; letter-spacing: 0.04em; color: var(--ink-mute); display: inline-flex; align-items: center; gap: 10px; } .loc .pin { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px var(--signal); } /* section headers — small mono ALL-CAPS, matches careers.html section nums */ h2 { font-family: var(--mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-top: 48px; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } p { margin-top: 14px; color: var(--ink-sub); font-size: 0.98rem; line-height: 1.7; max-width: 64ch; } p:first-of-type { margin-top: 0; } p strong { color: var(--ink); font-weight: 500; } ul.plain { margin-top: 14px; list-style: none; padding: 0; } ul.plain li { position: relative; padding-left: 22px; color: var(--ink-sub); font-size: 0.98rem; line-height: 1.7; margin-bottom: 10px; max-width: 64ch; } ul.plain li::before { content: ""; position: absolute; left: 4px; top: 0.8em; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); } ul.plain li strong { color: var(--ink); font-weight: 500; } .eo-note { margin-top: 36px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink-mute); line-height: 1.65; } .eo-note a { color: var(--ink-sub); border-bottom-color: var(--rule-hi); } .eo-note a:hover { color: var(--ink); border-bottom-color: var(--ink-mute); } /* ---------- Alert + apply CTA block ---------- */ .alert { margin-top: 56px; padding: 28px 0 32px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .alert h3 { font-family: var(--sans); font-weight: 500; font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 6px; } .alert p { margin-top: 4px; color: var(--ink-sub); font-size: 0.94rem; max-width: 56ch; } .btn-line { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 20px; border-radius: 4px; border: 1px solid var(--signal-rule); color: #001714; background: var(--signal); cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; text-decoration: none; } .btn:hover { background: #8ed4c0; color: #001714; border-color: #8ed4c0; } .btn.ghost { background: transparent; color: var(--ink-sub); border-color: var(--rule-hi); } .btn.ghost:hover { color: var(--ink); border-color: var(--ink-sub); background: transparent; } .btn .arr { transition: transform .18s ease; } .btn:hover .arr { transform: translateX(3px); } /* ---------- Apply form ---------- */ .apply { margin-top: 56px; } .apply .form-title { font-family: var(--sans); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 6px; } .apply .form-note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--ink-mute); margin-bottom: 24px; } .apply .form-note .req { color: var(--signal); } fieldset { border: 0; } .fset { margin-top: 28px; } .fset legend { font-family: var(--mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); width: 100%; } .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; margin-top: 16px; } .grid:first-child { margin-top: 0; } .grid .row { margin-top: 0; } .row { display: block; margin-top: 16px; } .row:first-child { margin-top: 0; } .row label { display: block; font-family: var(--sans); font-size: 0.84rem; color: var(--ink); margin-bottom: 8px; letter-spacing: -0.002em; } .row label .req { color: var(--signal); } .row .hint { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 6px; display: block; } .row input[type="text"], .row input[type="email"], .row input[type="tel"], .row input[type="url"], .row select, .row textarea { width: 100%; font-family: var(--sans); font-size: 0.94rem; padding: 11px 13px; background: var(--bg-sub); color: var(--ink); border: 1px solid var(--rule-hi); border-radius: 4px; outline: none; transition: border-color .15s ease, background .15s ease; } .row input::placeholder, .row textarea::placeholder { color: var(--ink-faint); } .row input:focus, .row select:focus, .row textarea:focus { border-color: var(--signal-rule); background: var(--bg-raise); } .row textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .row select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; color: var(--ink); } .row select option { background: var(--bg-sub); color: var(--ink); } /* file upload */ .file { border: 1px solid var(--rule-hi); border-radius: 4px; padding: 12px 14px; background: var(--bg-sub); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .file .attach { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px 14px; border: 1px solid var(--rule-hi); background: var(--bg-raise); color: var(--ink); cursor: pointer; border-radius: 4px; transition: border-color .15s ease, background .15s ease; } .file .attach:hover { border-color: var(--signal-rule); background: var(--bg-sub); } .file .filename { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mute); } .file .or { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); } .file a { font-family: var(--mono); font-size: 0.78rem; color: var(--signal-ink); } .file .types { flex-basis: 100%; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 4px; } /* education repeat group */ .edu-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; } .edu-row + .edu-row { margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--rule); } .edu-cell { margin-top: 0; text-align: center; } .edu-cell label { text-align: center; } .edu-cell input { text-align: center; } .edu-cell .other-input { margin-top: 10px; text-align: left; } /* ---------- Custom dropdown ---------- */ .dd { position: relative; width: 100%; font-family: var(--sans); } .dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: inherit; font-size: 0.94rem; padding: 11px 13px; background: var(--bg-sub); color: var(--ink); border: 1px solid var(--rule-hi); border-radius: 4px; outline: none; cursor: pointer; text-align: left; transition: border-color .15s ease, background .15s ease; } .dd-btn:hover { border-color: var(--ink-mute); } .dd-btn[aria-expanded="true"] { border-color: var(--signal-rule); background: var(--bg-raise); } .dd-btn.is-placeholder .dd-value { color: var(--ink-faint); } .dd-value { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dd-caret { flex: 0 0 auto; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute); transform: translateY(-2px) rotate(45deg); transition: transform .18s ease, border-color .18s ease; } .dd-btn[aria-expanded="true"] .dd-caret { transform: translateY(2px) rotate(225deg); border-color: var(--signal); } .dd-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--bg-raise); border: 1px solid var(--rule-hi); border-radius: 6px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); max-height: 280px; display: none; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .14s ease, transform .14s ease; } .dd.is-open .dd-panel { display: flex; opacity: 1; transform: translateY(0); } .dd-search { padding: 8px; border-bottom: 1px solid var(--rule); background: var(--bg-sub); } .dd-search input { width: 100%; font: inherit; font-size: 0.88rem; padding: 8px 10px; background: var(--bg); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; outline: none; text-align: left; } .dd-search input:focus { border-color: var(--signal-rule); } .dd-list { list-style: none; margin: 0; padding: 4px 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--rule-hi) transparent; } .dd-list::-webkit-scrollbar { width: 8px; } .dd-list::-webkit-scrollbar-thumb { background: var(--rule-hi); border-radius: 4px; } .dd-opt { padding: 9px 14px; font-size: 0.9rem; color: var(--ink-sub); cursor: pointer; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dd-opt:hover, .dd-opt.is-active { background: rgba(118,199,178,0.08); color: var(--ink); } .dd-opt.is-selected { color: var(--signal); background: var(--signal-weak); } .dd-opt.is-empty { color: var(--ink-mute); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; cursor: default; text-align: center; padding: 14px; } .dd-opt.is-empty:hover { background: transparent; color: var(--ink-mute); } .add-another { margin-top: 14px; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--signal-ink); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px solid var(--signal-rule); } .add-another:hover { color: var(--signal); border-bottom-color: var(--signal); } .submit-row { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .submit-row .meta { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-mute); } @media (max-width: 720px) { .page { padding: 32px 22px 80px; } .grid { grid-template-columns: 1fr; } .edu-row { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ============================================================= v2 additions — submit pipeline state ============================================================= */ /* Real elements are visually hidden but still in the DOM so the Attach button can .click() them and so required-validation works. Don't display:none — that blocks programmatic focus on some browsers. */ .file .file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .file .filename.is-chosen { color: var(--ink); } /* Error banner above the form. Hidden by default; .hidden attr handles the visual; the live region announces on toggle. */ .apply-error { margin-top: 16px; padding: 12px 14px; border: 1px solid rgba(255, 110, 110, 0.35); background: rgba(255, 110, 110, 0.08); color: #ffb3b3; font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.02em; border-radius: 4px; } /* Honeypot — true visual hide. Bots fill all fields they see; real users never see this. Don't use display:none — some bots specifically skip those. */ .apply-honeypot { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /* Turnstile mount */ .apply-turnstile { margin-top: 28px; min-height: 0; transition: min-height .15s ease; } .apply-turnstile.is-loaded { min-height: 70px; } /* Submit loading state */ .btn[disabled], .btn.is-loading { opacity: 0.55; cursor: not-allowed; } .btn.is-loading .arr { opacity: 0; } /* Success / confirmation panel */ .apply-confirm { margin-top: 32px; padding: 32px 28px; border: 1px solid var(--signal-rule); background: var(--signal-weak); border-radius: 6px; } .apply-confirm-title { font-family: var(--sans); font-weight: 500; font-size: 1.4rem; letter-spacing: -0.015em; color: var(--ink); margin-bottom: 10px; } .apply-confirm p { color: var(--ink-sub); font-size: 0.96rem; line-height: 1.7; max-width: 56ch; margin-top: 8px; } .apply-confirm-id { margin-top: 18px !important; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-mute); } .apply-confirm-id span { color: var(--signal-ink); border-bottom: 1px solid var(--signal-rule); padding-bottom: 1px; } /* ============================================================= v3 additions — hero CTA block, matches index.html primary pattern ============================================================= */ .hero-actions { margin-top: 28px; display: flex; align-items: center; gap: 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } .btn-primary { display: inline-flex; align-items: center; gap: 14px; padding: 13px 18px 13px 22px; border-radius: 6px; background: var(--ink); color: #0a0a0a; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 180ms ease; border: 1px solid var(--ink); } .btn-primary .arr { border-left: 1px solid rgba(0,0,0,0.18); padding-left: 12px; font-family: var(--mono); transition: transform 220ms cubic-bezier(.2,.7,.2,1); } .btn-primary:hover { background: #fff; } .btn-primary:hover .arr { transform: translateX(3px); }