/* ============================================================ XC_Company_v1.css — Home/About and Agent/Index, Agent/EmailSentSuccessful Additive, in the manner of XC_Auth_v1.css and XC_Tracker_v1.css: it redefines no token and no .btn. It sits on top of XC_Home_v4.css tokens, .btn, .section, .reach, masthead, footer XC_Auth_v1.css the field system -- .afield, .arow, .ahint, .btn.is-busy, and the styled validation contract (loaded by Agent/Index only, which has the form) and adds only what the two company surfaces need. THESIS. These are the two pages where Xc Exchange speaks about itself rather than quoting a rate, so neither of them gets a figure to hide behind. Both legacy pages solved that with centred text and a grid of same-size icon tiles -- the two defaults this system already refuses. What replaces them is the plainest editorial furniture the house owns: an asymmetric masthead where the name sits opposite the claim, and a ruled ledger where every promise is one row, numbered by nothing, separated by a hairline, and readable at a glance. No cards as a structural device. COLOUR LOGIC. Blue is structure. Amber marks the single line on each page that carries the commitment -- the rule under the name on About, the tear rule under each promise on Agent -- and appears nowhere else. Navy is a change of ground, used once per page, and used where the page turns from describing itself to promising something. MODE. About is Read: a visitor is deciding whether to trust us. Agent is Persuade: a visitor is deciding whether to sign up, and the whole page is a run-up to one form. ============================================================ */ /* ============================================================ 0. JUSTIFICATION (About and Agent) Both edges of every run of prose on these two surfaces are straight. Set as a list of the blocks that actually hold prose, never on a container: justification inherits, and a container rule would reach the channel ledger's labels, the four proposition titles and the buttons, none of which are paragraphs. hyphens: auto travels with it and is not optional. Justification opens the word spaces of a line until it fills the measure, and without a second place to break those spaces line up vertically across several lines and read as a river down the paragraph. It hyphenates against the language the shell declares -- in _LayoutHome.cshtml. The career surface is deliberately not in this list: it is ragged right, and its paragraphs are three short sentences in three narrow columns, where justification has nothing to even out. ============================================================ */ .co-lede, .co-close, .ag-plate-p, .ag-row-d, .ag-sheet-p, .ag-fine { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* ============================================================ 1. THE COMPANY MASTHEAD (About) Asymmetric on purpose. The name and its claim hold the left third at display size; the argument runs down the right at a reading measure. Centred text over a 1240px grid -- what the legacy page did -- gives a 150-character line and no entry point. ============================================================ */ .co-head { padding: clamp(3.25rem, 6vw, 5.75rem) 0 clamp(2.75rem, 5vw, 4.5rem); } .co-head-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; } /* the name holds the top of the column and the claim is pushed to its foot, so the two columns end level and the left one does not stop a third of the way down leaving a hole under it */ .co-mast { display: flex; flex-direction: column; } .co-title { font-size: clamp(2.35rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.036em; } /* the one authored moment on this page: the amber rule draws itself out from under the name. It runs on load rather than off the IntersectionObserver -- the head is the first viewport, and gating the page title block on a script is how a blocked script turns a page blank. The reduce block cancels the animation, which leaves the untransformed resting state, so nothing is stranded. 1.35rem under it, not 1.05: it puts the rule's bottom exactly on the hairline over the closing sentence opposite, which shares the same 1.35rem of padding. */ .co-rule { display: block; height: 3px; width: min(210px, 60%); margin: auto 0 1.35rem; background: var(--accent-fill); transform-origin: left center; animation: coRule 1.05s cubic-bezier(.16, 1, .3, 1) .15s both; } @keyframes coRule { from { transform: scaleX(0); } to { transform: scaleX(1); } } .co-tag { font-size: clamp(1rem, 1.6vw, 1.2rem); font-weight: 600; line-height: 1.35; letter-spacing: -.008em; color: var(--body); max-width: 26ch; } /* the argument. 64ch, 17px -- long-form measure, not the 40ch a marketing lede gets, because this is seven sentences of reading. */ .co-lede { font-size: 17px; line-height: 1.68; color: var(--body); max-width: 64ch; } .co-lede br { display: none; } /* the closing sentence is the paragraph's one instruction, so it is ruled off and set in the ink weight rather than left to trail. */ .co-close { margin-top: 1.6rem; padding-top: 1.35rem; border-top: 1px solid var(--line); max-width: 58ch; font-size: 16px; font-weight: 600; line-height: 1.55; color: var(--ink); } /* ============================================================ 2. THE CHANNEL LEDGER (About) Four ways to reach us, ruled rather than tiled. The telephone is the page's one action and leads the ledger; the other three are rows -- icon, name, and an arrow that steps right on hover. A row is a hairline and a hover, not a box. ============================================================ */ .co-channels { margin: clamp(1.6rem, 2.6vw, 2.1rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); max-width: 34rem; } /* HOVER. Four signals, one gesture, and every one of them fires on :focus-visible as well, so the keyboard gets the row the pointer gets. Only colour and transform move -- no layout property is transitioned anywhere in this system, which is what rules out the indent this row wanted. the ground tints the row hairline is overrun by a brand rule, wiping left to right the mark fills solid amber, the move .promise already makes on the home page, so the two pages hover the same way the label turns brand and the arrow steps toward it The wipe is the slowest of the four (.34s against .18s) so the row reads as one gesture arriving rather than four states flipping. */ .co-ch { position: relative; display: flex; align-items: center; gap: .95rem; padding: .95rem .25rem; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .18s ease; } .co-ch:hover, .co-ch:focus-visible { background: var(--surface-2); } .co-ch:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 2px; } /* the rule sits over the row own hairline rather than beside it, so the row does not grow by a pixel when it arrives */ .co-ch::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left center; transition: transform .34s cubic-bezier(.16, 1, .3, 1); } .co-ch:hover::after, .co-ch:focus-visible::after { transform: scaleX(1); } .co-ch-ic { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--brand); transition: border-color .18s ease, background-color .18s ease, color .18s ease; } .co-ch:hover .co-ch-ic, .co-ch:focus-visible .co-ch-ic { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--accent-ink); } .co-ch-ic svg { display: block; width: 17px; height: 17px; } .co-ch-txt { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -.004em; word-break: break-word; transition: color .18s ease; } .co-ch:hover .co-ch-txt, .co-ch:focus-visible .co-ch-txt { color: var(--brand); } .co-ch-arw { margin-left: auto; flex: 0 0 auto; color: var(--line-strong); transition: transform .22s cubic-bezier(.3, .7, .2, 1), color .18s ease; } .co-ch:hover .co-ch-arw, .co-ch:focus-visible .co-ch-arw { transform: translateX(5px); color: var(--brand); } .co-ch-arw svg { display: block; width: 15px; height: 15px; } /* the telephone is the fastest of the four and the only one that reaches a person now, so it leads: taller row, the number at display size, tabular figures. It is the same row, not a card. */ .co-ch-lead { padding: 1.35rem .25rem; } .co-ch-lead .co-ch-ic { width: 44px; height: 44px; border-color: var(--accent-fill); background: var(--accent-wash); color: var(--accent); } .co-ch-lead .co-ch-ic svg { width: 21px; height: 21px; } .co-ch-lead .co-ch-txt { font-size: clamp(1.35rem, 3.4vw, 1.9rem); font-weight: 600; line-height: 1.05; letter-spacing: -.032em; font-variant-numeric: tabular-nums; } /* ============================================================ 3. THE AGENT PLATE One photograph, and it is a high-key studio frame whose left fifth is already blown to paper white. So the copy is not laid over the picture behind a scrim -- it is laid on a white field that continues the picture's own white, with the seam falling where the frame stops being white anyway. Nothing is dimmed to make room for type. ============================================================ */ .ag-plate { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); overflow: hidden; } .ag-plate-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1.75rem, 4vw, 3.5rem); padding: clamp(2.75rem, 5.5vw, 5rem) 0; } .ag-plate-h { /* 3.4vw, not 4.2: the middle term only governs below ~1200px, and at 4.2 the heading reached 39px inside a 390px column -- ten characters to the line. The desktop size is unchanged, still capped at 3.15rem. */ font-size: clamp(1.95rem, 3.4vw, 3.15rem); line-height: 1.06; letter-spacing: -.032em; max-width: 17ch; } .ag-plate-p { margin-top: 1.25rem; max-width: 52ch; font-size: 16.5px; line-height: 1.65; color: var(--body); } .ag-plate-act { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.6rem, 2.6vw, 2.1rem); } /* the photograph, framed. object-position holds the two hands: the handshake sits right of centre in the source frame and a narrow crop taken from the middle would cut it. */ .ag-plate-media { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); box-shadow: 0 34px 64px -40px rgba(0, 10, 77, .5), 0 2px 6px rgba(0, 10, 77, .07); } .ag-plate-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; } /* the page's authored moment, and it is the same settle the home page's closing photograph uses -- one movement, one easing */ .ag-plate.in .ag-plate-media img { animation: reachSettle 1.5s cubic-bezier(.16, 1, .3, 1) both; } /* ============================================================ 4. THE FOUR PROPOSITIONS The legacy page drew four equal icon tiles, which is the exact scaffold this system refuses. These are four columns of one ruled sheet: a hairline between them, a drawn icon at the head of each, and no box around any. Below 760px the vertical rules become horizontal ones and the sheet reads as a list. ============================================================ */ .ag-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; } .ag-why > li { position: relative; padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.1rem, 1.8vw, 1.5rem) clamp(1.75rem, 2.8vw, 2.4rem); border-left: 1px solid var(--line); transition: background-color .22s ease; } .ag-why > li:first-child { border-left: 0; } .ag-why > li:hover { background: var(--surface-2); } .ag-why-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 3px; background: var(--accent-wash); color: var(--accent); transition: background-color .22s ease, color .22s ease; } .ag-why > li:hover .ag-why-ic { background: var(--accent-fill); color: var(--accent-ink); } .ag-why-ic svg { display: block; width: 22px; height: 22px; } /* two stacked .section paddings would bank 9rem of empty ground between this sheet and the ledger below it */ .ag-why-sec { padding-bottom: clamp(1.5rem, 2.4vw, 2rem); } .ag-why-t { display: block; margin-top: 1.05rem; font-size: 14.5px; font-weight: 600; line-height: 1.42; letter-spacing: -.006em; color: var(--ink); text-wrap: balance; } /* ============================================================ 5. THE RULED LEDGER (Our Benefits / Our Promises) Both blocks are the same object: a term on the left, its explanation on the right, one hairline between rows. Two columns rather than a centred stack, so the eye can scan the terms alone and stop where it wants to read. ============================================================ */ .ag-ledger { margin: 0; border-top: 1px solid var(--line); } .ag-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(.6rem, 3vw, 3rem); padding: clamp(1.3rem, 2.4vw, 1.9rem) 0; border-bottom: 1px solid var(--line); } .ag-row-t { font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 600; line-height: 1.3; letter-spacing: -.016em; color: var(--ink); } .ag-row-d { font-size: 15.5px; line-height: 1.68; color: var(--body); max-width: 62ch; } /* ============================================================ 6. THE PROMISE BAND Navy, once per page, at the point where the page stops describing what an agent gets and starts committing to it. The change of ground is the argument; there is no card on it. ============================================================ */ .ag-band { background: var(--navy); color: var(--on-navy); padding: clamp(3.25rem, 5.5vw, 5rem) 0; } .ag-band h2 { color: var(--on-navy); } .ag-band .section-head { border-bottom-color: var(--navy-line); } .ag-band .ag-ledger { border-top-color: var(--navy-line); } .ag-band .ag-row { border-bottom-color: var(--navy-line); } .ag-band .ag-row-t { color: var(--on-navy); } /* the amber marks the commitment, and only here */ .ag-band .ag-row-t::after { content: ""; display: block; width: 26px; height: 2px; margin-top: .7rem; background: var(--accent-fill); } .ag-band .ag-row-d { color: var(--on-navy-dim); } /* ============================================================ 7. THE REGISTRATION SHEET The page's one ask, and the only place on either surface that takes the auth surface's field system. One sheet on the page ground -- one panel for the page's one ask, which is the tracker surface's reasoning, not a card per field. ============================================================ */ .ag-signup { background: var(--ground); border-top: 1px solid var(--line); } .ag-sheet { max-width: 47rem; margin-inline: auto; padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 3.5vw, 3rem) clamp(2rem, 3.5vw, 3rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 28px 56px -34px rgba(0, 10, 77, .28), 0 2px 6px rgba(0, 10, 77, .05); } .ag-sheet-h { font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1.1; letter-spacing: -.026em; } .ag-sheet-p { margin-top: .85rem; max-width: 52ch; font-size: 16px; line-height: 1.6; color: var(--body); } .ag-form { display: grid; gap: 1.15rem; margin-top: clamp(1.75rem, 3vw, 2.4rem); } .ag-form textarea { width: 100%; min-width: 0; min-height: 8.5rem; padding: .82rem .95rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: inset 0 1px 2px rgba(0, 10, 77, .045); font-family: var(--f-ui); font-size: 15px; font-weight: 500; line-height: 1.55; caret-color: var(--brand); resize: vertical; transition: border-color .16s ease, box-shadow .18s ease; } .ag-form textarea::placeholder { color: var(--muted); opacity: 1; } .ag-form textarea:hover:not(:focus) { border-color: var(--muted); } .ag-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent), 0 2px 8px -3px color-mix(in srgb, var(--brand) 32%, transparent), inset 0 1px 0 rgba(255, 255, 255, .6); } .ag-form textarea.input-validation-error { border-color: var(--down); background: var(--down-wash); } /* the primary action is an object: top-lit face, contact shadow, and a cast in its own colour -- amber, since .btn-accent carries the face. A blue cast under an amber button reads as a second object showing through from behind it. Up 1px on hover, down 1px on press, the same behaviour the auth surface's submit has. */ .ag-submit { justify-self: start; min-width: 13rem; min-height: 52px; margin-top: .4rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 4px rgba(0, 10, 77, .16), 0 16px 32px -16px rgba(138, 102, 0, .55); transition: background-color .18s ease, transform .2s cubic-bezier(.3, .7, .2, 1), box-shadow .2s ease; } .ag-submit:hover { transform: translateY(-1px); } .ag-submit:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(0, 10, 77, .2); } .ag-fine { margin-top: 1.1rem; font-size: 13px; line-height: 1.65; color: var(--body); } /* ============================================================ 8. THE RECEIPT (Agent/EmailSentSuccessful) The old confirmation was an orange clip-art tick on an empty page. This is the auth surface's issued stamp, at the one moment on this surface where something has actually been issued. ============================================================ */ .ag-done { display: grid; justify-items: center; text-align: center; gap: 1.35rem; padding: clamp(4rem, 9vw, 7.5rem) 0; max-width: 34rem; margin-inline: auto; } .ag-done-mark { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--accent-fill); background: var(--accent-wash); color: var(--accent); transform: rotate(-7deg); } .ag-done-mark svg { display: block; width: 34px; height: 34px; } .ag-done-mark svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: agInk .55s cubic-bezier(.3, .7, .2, 1) .32s forwards; } @keyframes agInk { to { stroke-dashoffset: 0; } } .ag-done h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); line-height: 1.15; letter-spacing: -.026em; } .ag-done p { font-size: 16px; line-height: 1.65; color: var(--body); } /* ============================================================ 9. THE CAREER SURFACE (Career/Index, Career/EmailSentSuccessful) The third company page, and it belongs to this stylesheet rather than a fourth one: it is the same object as the agent page -- a photograph, a claim, some ruled evidence, one change of ground, and a form at the foot -- so it takes .ag-plate, .ag-ledger, .ag-sheet, .ag-form and .ag-submit as they stand and adds only the three things the agent page has no equivalent of. WHAT THE LEGACY PAGE DID, AND WHY IT IS NOT KEPT: 1. Our Culture was three Bootstrap tabs, so two of the three sentences were behind a click. Three sentences of eleven words do not earn a disclosure -- they earn three columns. Every word is still on the page; only the tab strip is gone, and with it the jQuery this shell does not load. 2. Our Teams was seven tags pointing at seven flat-colour SVGs from three different icon sets, at three different stroke weights, in a colour that belongs to no palette here. They are redrawn inline in the house stroke, as DESIGN.md requires, and the label under each carries the meaning so the mark never has to. 3. Job Opportunities was "No vacancy at the moment" centred in a grey strip, which reads as a page that failed to load. It is the single most consequential fact on the surface, so it gets the page's one change of ground and says so plainly. ============================================================ */ /* --- the career banner ------------------------------------ */ /* The page's photograph is 1919x600 and it was shot as a banner: the left fifty-five per cent is already blown to paper white under a faint diamond pattern, and the handshake sits hard right. The agent page put its near-identical frame in a two-column plate; doing that again here would produce the same drawing twice on two adjacent pages, and would crop a 3.2:1 banner to 16:10 to do it. So this one runs full-bleed at the width it was shot for, and the claim is set on the frame's own white rather than on a panel beside it. object-position pins the handshake to the right edge, so every pixel a narrow viewport takes off comes off the empty white end. */ .cr-hero { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); overflow: clip; } .cr-hero-media { position: absolute; inset: 0; margin: 0; } .cr-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; } /* the frame's white runs out somewhere around 58% on a wide viewport and nowhere at all on a narrow one, so the ground under the type is guaranteed rather than assumed. It is a ramp to transparent, not a scrim over the subject: nothing in the picture is dimmed to make room for a heading. */ .cr-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, .94) 30%, rgba(255, 255, 255, .55) 46%, rgba(255, 255, 255, 0) 60%); } .cr-hero-in { position: relative; display: grid; align-content: center; min-height: clamp(18rem, 29vw, 26rem); padding: clamp(2.5rem, 5vw, 4.25rem) 0; } .cr-hero-copy { max-width: 32rem; } .cr-hero-h { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.034em; max-width: 16ch; } .cr-hero-h::after { content: ""; display: block; width: min(200px, 55%); height: 3px; margin-top: clamp(1.15rem, 2vw, 1.5rem); background: var(--accent-fill); transform-origin: left center; animation: coRule 1.05s cubic-bezier(.16, 1, .3, 1) .15s both; } .cr-hero-act { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: clamp(1.6rem, 2.6vw, 2.1rem); } /* --- our culture: three columns of one ruled sheet -------- */ .cr-cult { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; } .cr-cult > li { padding: clamp(1.5rem, 2.4vw, 2.1rem) clamp(1.15rem, 1.9vw, 1.6rem) clamp(1.6rem, 2.6vw, 2.2rem); border-left: 1px solid var(--line); transition: background-color .22s ease; } .cr-cult > li:first-child { border-left: 0; } .cr-cult > li:hover { background: var(--surface-2); } /* the term is marked by a short amber rule above it rather than by a box around it -- the same mark the promise band uses, and the only amber on the page besides the plate's one button */ .cr-cult-t { font-size: clamp(1.05rem, 1.7vw, 1.28rem); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; color: var(--ink); } .cr-cult-t::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: .95rem; background: var(--accent-fill); } .cr-cult-d { margin-top: .8rem; font-size: 15.5px; line-height: 1.65; color: var(--body); } /* two stacked .section paddings bank 144px of empty ground between this sheet and the team strip, and the two blocks are one region: what the culture is, and who lives in it. Same correction .ag-why-sec makes on the agent page. */ .cr-cult-sec { padding-bottom: clamp(1.5rem, 2.4vw, 2rem); } /* --- our teams: one ruled strip, seven cells -------------- */ /* Seven cells is a hostile number: it divides into nothing, so the column count has to be auto-fit and is therefore not knowable from the markup. That rules out both ways of ruling a grid that need to know it -- :nth-child seams, and a coloured gap behind the cells (which paints the empty slots of the last row as solid blocks, the fault DESIGN.md records against .vell-benefits-grid). So every cell carries a top and left rule, the grid is pulled up and left by exactly one pixel, and the frame clips the overhang. One rule per seam at every column count, and no empty slot is ever painted. */ .cr-teams { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; } .cr-teams-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); margin: -1px 0 0 -1px; padding: 0; list-style: none; } .cr-team { display: grid; justify-items: center; gap: .85rem; padding: clamp(1.3rem, 2vw, 1.75rem) .75rem; text-align: center; border-left: 1px solid var(--line); border-top: 1px solid var(--line); transition: background-color .22s ease; } .cr-team:hover { background: var(--surface-2); } .cr-team-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: var(--surface-2); color: var(--brand); transition: background-color .22s ease, color .22s ease; } .cr-team:hover .cr-team-ic { background: var(--accent-fill); color: var(--accent-ink); } .cr-team-ic svg { display: block; width: 22px; height: 22px; } .cr-team-t { font-size: 13.5px; font-weight: 600; line-height: 1.35; letter-spacing: -.004em; color: var(--ink); text-wrap: balance; } /* --- job opportunities: the page's one change of ground --- */ .cr-vac { background: var(--navy); color: var(--on-navy); padding: clamp(3rem, 5.5vw, 4.75rem) 0; } .cr-vac-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.25rem, 4vw, 3.5rem); align-items: baseline; } .cr-vac h2 { color: var(--on-navy); font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.1; letter-spacing: -.026em; } /* the statement, and it is the answer to the heading beside it, so it is set at reading size in the bright ink rather than dimmed into a caption. The amber rule above it is the mark this system puts on a commitment; a vacancy count is a commitment too. */ .cr-vac-state { font-size: clamp(1.05rem, 1.9vw, 1.35rem); font-weight: 500; line-height: 1.45; letter-spacing: -.014em; color: var(--on-navy); } .cr-vac-state::before { content: ""; display: block; width: 26px; height: 2px; margin-bottom: 1rem; background: var(--accent-fill); } /* --- the resume field ------------------------------------- */ /* A file input is the one control in the field system with no styled equivalent in XC_Auth_v1.css, because no auth screen uploads anything. It gets the same recess every other control has, and its button is themed rather than left as the browser's -- an unstyled "Choose File" is the loudest thing on the sheet. */ .cr-file input[type="file"] { width: 100%; min-width: 0; padding: .62rem .7rem; background: var(--surface); color: var(--body); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: inset 0 1px 2px rgba(0, 10, 77, .045); font-size: 14px; line-height: 1.4; cursor: pointer; transition: border-color .16s ease, box-shadow .18s ease; } .cr-file input[type="file"]:hover:not(:focus) { border-color: var(--muted); } .cr-file input[type="file"]:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--brand) 15%, transparent), inset 0 1px 0 rgba(255, 255, 255, .6); } .cr-file input[type="file"]::file-selector-button { margin-right: .8rem; padding: .42rem .8rem; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r); font-family: var(--f-ui); font-size: 13px; font-weight: 600; cursor: pointer; transition: background-color .16s ease, border-color .16s ease; } .cr-file input[type="file"]:hover::file-selector-button { background: var(--surface-3); border-color: var(--muted); } /* ============================================================ 10. RESPONSIVE ============================================================ */ @media (max-width: 1000px) { .ag-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ag-why > li:nth-child(odd) { border-left: 0; } .ag-why > li:nth-child(n + 3) { border-top: 1px solid var(--line); } /* the plate unstacks here rather than at 900: between the two the copy column is under 400px and the heading has nowhere to go. The photograph follows the ask on one column. */ .ag-plate-in { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .ag-plate-media { order: 2; aspect-ratio: 21 / 9; } .ag-plate-copy { order: 1; } .ag-plate-h { max-width: none; } } @media (max-width: 900px) { .co-head-in { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } .co-tag { max-width: 30ch; } .co-rule { width: 150px; } .ag-row { grid-template-columns: minmax(0, 1fr); gap: .45rem; } /* three culture columns under 300px each is three words to the line; the sheet reads down instead */ .cr-cult { grid-template-columns: minmax(0, 1fr); } .cr-cult > li { border-left: 0; } .cr-cult > li + li { border-top: 1px solid var(--line); } .cr-vac-in { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } /* the banner stops being a ground and becomes a picture: below 900px there is no white left of the handshake wide enough to seat a 3.4rem heading, and a ramp over the whole frame would wash the only subject in it. So the photograph takes its own band above the claim, cropped to 21/9, and the claim sits on the plain white under it. */ .cr-hero-media { position: relative; aspect-ratio: 21 / 9; } .cr-hero-media::after { display: none; } .cr-hero-in { min-height: 0; padding-top: clamp(1.75rem, 4vw, 2.5rem); } .cr-hero-copy { max-width: none; } .cr-hero-h { max-width: 22ch; } } /* the sheet is a centred document, not the auth surface 40% panel, so it keeps two columns through the tablet range that XC_Auth_v1.css collapses. Below 620 it stacks with everything else. */ @media (min-width: 620px) and (max-width: 960px) { .ag-form .arow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .ag-why { grid-template-columns: minmax(0, 1fr); } .ag-why > li { border-left: 0; } .ag-why > li + li { border-top: 1px solid var(--line); } .ag-why-ic { width: 36px; height: 36px; } .ag-plate-act .btn { flex: 1 1 100%; } .ag-submit { justify-self: stretch; width: 100%; } .co-ch { gap: .75rem; } /* two team cells to the row rather than one: the label is two words and the mark is 42px, so a full-width row would be nine tenths empty ground */ .cr-teams-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cr-team-ic { width: 36px; height: 36px; } .cr-team-ic svg { width: 19px; height: 19px; } } /* ============================================================ 11. REDUCED MOTION ============================================================ */ /* the global reduce block in XC_Home_v4.css cancels every animation and collapses every transition. Two states here start from an invisible or displaced default and would be stranded by that, so they are landed explicitly. */ @media (prefers-reduced-motion: reduce) { .co-rule, .cr-hero-h::after { transform: none; } .ag-done-mark svg path { stroke-dasharray: none; stroke-dashoffset: 0; } }