with --color-text-secondary and the list markers would otherwise inherit nothing. */ .page-careers__prose p, .page-careers__prose li { font-size: var(--text-base); line-height: 1.85; color: var(--color-text-secondary); } .page-careers__prose p { margin-bottom: var(--space-5); } .page-careers__prose h2, .page-careers__prose h3 { font-family: var(--font-accent); font-weight: 300; line-height: 1.2; color: var(--color-text-primary); margin: var(--space-8) 0 var(--space-4); } .page-careers__prose h2 { font-size: 1.75rem; } .page-careers__prose h3 { font-size: 1.375rem; } .page-careers__prose ul, .page-careers__prose ol { margin: 0 0 var(--space-5) var(--space-5); } .page-careers__prose li { margin-bottom: var(--space-2); } .page-careers__prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; } .page-careers__prose strong { font-weight: 600; color: var(--color-text-primary); } /* ── Closed notice ─────────────────────────── */ /* Full border, not a left bar: the standing rule forbids a coloured or thick single-edge border as an accent. */ .page-careers__closed { padding: var(--space-6); border: 1px solid var(--color-accent-dim); background: var(--color-surface); } .page-careers__closed-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 500; color: var(--color-text-primary); margin-bottom: var(--space-2); } .page-careers__closed-body { font-size: var(--text-sm); line-height: 1.7; color: var(--color-text-secondary); max-width: 56ch; margin-bottom: var(--space-5); } /* ── Application form ──────────────────────── */ .page-careers__form-wrap { max-width: 720px; margin-top: var(--space-8); } .page-careers__form { display: flex; flex-direction: column; gap: var(--form-gap); } .page-careers__form-role { font-size: var(--text-sm); color: var(--color-text-secondary); } .page-careers__form-role strong { color: var(--color-text-primary); font-weight: 600; } .page-careers__form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: var(--form-gap); } .page-careers__field { display: flex; flex-direction: column; gap: var(--field-gap); min-width: 0; } .page-careers__field-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; /* --color-text-secondary, NOT --color-text-muted. Measured in the after-hours theme, muted (0.38 alpha) gives 3.14:1 on the page background, below the 4.5:1 AA threshold for 12px text. A form label is an instruction someone has to read to fill the field in, not decoration, so it takes the readable token in every theme. */ color: var(--color-text-secondary); } .page-careers__field-hint { font-size: var(--text-xs); /* Same reasoning as the label: "PDF or Word document, up to 5MB" is the rule the upload enforces. Measured 3.14:1 as muted. */ color: var(--color-text-secondary); } /* Height from --control-h, never from padding — see the header note. */ .page-careers__input { height: var(--control-h); padding: var(--control-pad-y) var(--control-pad-x); border: 1px solid var(--color-border-strong); border-radius: var(--control-radius); background: var(--color-surface); font-family: var(--font-body); font-size: var(--control-font); color: var(--color-text-primary); width: 100%; } .page-careers__textarea { padding: var(--control-pad-y) var(--control-pad-x); border: 1px solid var(--color-border-strong); border-radius: var(--control-radius); background: var(--color-surface); font-family: var(--font-body); font-size: var(--control-font); line-height: 1.7; color: var(--color-text-primary); width: 100%; resize: vertical; } .page-careers__input:focus-visible, .page-careers__textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: var(--color-accent); } /* File field. The real is visually hidden but still focusable and still in the accessibility tree — it is not replaced by a div with a click handler, so keyboard and screen-reader behaviour is native. */ .page-careers__file { display: flex; align-items: center; gap: var(--space-4); min-height: var(--control-h); min-width: 0; cursor: pointer; } .page-careers__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; } .page-careers__file-button { display: inline-flex; align-items: center; height: var(--control-h); padding: 0 var(--space-5); border: 1px solid var(--color-text-primary); font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-primary); white-space: nowrap; flex-shrink: 0; } .page-careers__file:hover .page-careers__file-button { background: var(--color-text-primary); color: var(--color-bg); } /* Keyboard focus lands on the hidden input, so the visible ring has to be drawn on its sibling or the control appears to have no focus state. */ .page-careers__file-input:focus-visible + .page-careers__file-button { outline: 2px solid var(--color-accent); outline-offset: 2px; } .page-careers__file-name { font-size: var(--text-sm); color: var(--color-text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Honeypot: removed from layout and from the accessibility tree. Not display:none, which some bots detect and skip. */ .page-careers__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .page-careers__turnstile { min-height: 65px; } .page-careers__submit { align-self: flex-start; height: var(--control-h); padding: 0 var(--space-8); border: 1px solid var(--color-accent); background: var(--color-accent); color: #fff; font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: opacity 180ms ease; } .page-careers__submit:hover:not(:disabled) { opacity: 0.85; } .page-careers__submit:disabled { opacity: 0.5; cursor: not-allowed; } .page-careers__form-error { padding: var(--space-4); border: 1px solid var(--color-accent); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-accent); } .page-careers__form-privacy { font-size: var(--text-xs); line-height: 1.6; /* What we do with an applicant's personal data. Measured 3.14:1 as muted. */ color: var(--color-text-secondary); max-width: 60ch; } .page-careers__form-sent { padding: var(--space-8); border: 1px solid var(--color-border-strong); background: var(--color-surface); } .page-careers__form-sent-title { font-family: var(--font-accent); font-size: 1.75rem; font-weight: 300; color: var(--color-text-primary); margin-bottom: var(--space-2); } .page-careers__form-sent-body { font-size: var(--text-sm); line-height: 1.75; color: var(--color-text-secondary); max-width: 52ch; } /* ── Utility ───────────────────────────────── */ .page-careers__visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ── Phone ─────────────────────────────────── */ @media (max-width: 640px) { .page-careers__detail-meta { gap: var(--space-5); } .page-careers__card-link { padding: var(--space-5); } .page-careers__submit { align-self: stretch; text-align: center; justify-content: center; } /* The button and the filename must not fight over a 360px row. */ .page-careers__file { flex-wrap: wrap; } /* 44px is the minimum comfortable touch target, the same threshold --control-h steps up to on this breakpoint. The chips are 36px on desktop, which is fine for a cursor and too small for a thumb; measured at 390px before this rule they came out at 36. Font stays at --text-xs: the 16px rule exists to stop iOS zooming when an INPUT is focused, and a link does not trigger that. */ .page-careers__filter-chip { min-height: 44px; } } /* ── After Hours: accent-as-TEXT ───────────────────────────────────────── In the after-hours theme --color-accent becomes #7000FF, a saturated violet. As a BACKGROUND with white on top that is fine (the active filter chip and the submit button both measure 6.70:1). As TEXT on the near-black page it is not: measured 2.89:1 for the card outlet and the card CTA and 3.04:1 for the value index, against a 4.5:1 AA requirement at these sizes. The site already solves this for its own accent text — time-theme.css repaints [class*="__eyebrow"] to the electric yellow #F5E000, which measures 15.18:1 — but it targets class-name substrings, and none of these elements matches one. Rather than rename them into a substring match (which would make the fix invisible and accidental), they are repainted here with the same token the theme already defines for exactly this purpose. Only text is retargeted. Borders keep the violet: a 1px border carries no information and is not held to a text contrast ratio. */ html[data-tempo-time="after-hours"] .page-careers__card-outlet, html[data-tempo-time="after-hours"] .page-careers__card-cta, html[data-tempo-time="after-hours"] .page-careers__card-tag--evergreen, html[data-tempo-time="after-hours"] .page-careers__detail-meta-value--link, html[data-tempo-time="after-hours"] .page-careers__back:hover, html[data-tempo-time="after-hours"] .page-careers__prose a, html[data-tempo-time="after-hours"] .page-careers__form-error { color: var(--color-accent-electric, #F5E000); } /* The closed-role panel and the error panel both take a full border in the accent colour. Kept as a border (not a background) so the standing no-single-edge-accent rule still holds, and the border colour is allowed to stay violet since no text sits on it. */ html[data-tempo-time="after-hours"] .page-careers__form-error, html[data-tempo-time="after-hours"] .page-careers__closed { border-color: var(--color-accent-dim); } /* ── Alternate apply channels ──────────────────────────────────────────── Sits under the form. Hourly hospitality hiring in Ho Chi Minh City runs on Zalo and Messenger; a commis or a part-time barista often has no CV file to upload, and requiring one filters people out for reasons unrelated to the job. The form stays primary, so this is deliberately quieter than it. */ .page-careers__channels { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--color-border); } .page-careers__channels-lead { font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-4); } .page-careers__channels-list { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; } .page-careers__channel { display: inline-flex; align-items: baseline; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border-strong); text-decoration: none; transition: border-color 180ms ease; } .page-careers__channel:hover { border-color: var(--color-text-primary); } .page-careers__channel-label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-primary); } .page-careers__channel-value { font-size: var(--text-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; } /* ── Afternoon: accent needs to be one step darker ─────────────────────── The afternoon theme sets --color-accent to #C85A28, a bright terracotta on a warm cream background. Measured, that is 3.43:1 as text on --color-bg and 3.12:1 on --color-bg-alt, and white on it as a button background is 4.24:1. All three are below the 4.5:1 AA threshold at these sizes. --color-accent-hover (#A04220) is the same hue one step darker, it is ALREADY defined by the afternoon theme and already used by it for other elements, and it measures 5.15:1, 4.68:1 and 6.37:1 respectively. So this reaches for the token the theme itself provides rather than inventing a colour, and the page keeps its palette. Day needs none of this (its accent is #7c3b3b, dark on cream) and after-hours has its own block above. */ html[data-tempo-time="afternoon"] .page-careers__card-outlet, html[data-tempo-time="afternoon"] .page-careers__card-cta, html[data-tempo-time="afternoon"] .page-careers__card-tag--evergreen, html[data-tempo-time="afternoon"] .page-careers__detail-meta-value--link, html[data-tempo-time="afternoon"] .page-careers__back:hover, html[data-tempo-time="afternoon"] .page-careers__prose a, html[data-tempo-time="afternoon"] .page-careers__form-error { color: var(--color-accent-hover); } /* Accent as a BACKGROUND with white on top: same problem, same token. */ html[data-tempo-time="afternoon"] .page-careers__submit, html[data-tempo-time="afternoon"] .page-careers__filter-chip--active { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } /* Count of open roles, under the section heading. */ .page-careers__role-count { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); margin: calc(var(--space-6) * -1) 0 var(--space-8); } /* The success panel takes focus after submitting; it is a container rather than a control, so it gets no default ring and needs one of its own. */ .page-careers__form-sent:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; } /* ═══════════════════════════════════════════════ The wall — open roles as drifting framed artwork Mimics the home page's moods frames (moods.css): coloured frame border > cream mat > tinted artwork. ═══════════════════════════════════════════════ */ .page-careers__wall { position: relative; /* Full-bleed out of the page container: a wall that stops at the text column reads as a widget, not a wall. Uses the viewport width rather than a negative margin pair so it cannot drift out of alignment. */ width: 100vw; margin-left: 50%; transform: translateX(-50%); padding: var(--space-6) 0 var(--space-4); /* clip, not hidden: `hidden` on an x-axis makes the y-axis a scroll container too, which steals the page's scroll anchoring. */ overflow-x: clip; /* ONE control for how big a frame is. Orientation below derives width from this height, so the two rows always hang on a common line. At 390px this resolves to 150px, giving ~2 frames per row and therefore 4 on screen across the two rows — the stated minimum. At 1440px it caps at 230px, which shows roughly five per row. */ --art-h: clamp(150px, 20vw, 230px); --frame-border: clamp(7px, 0.7vw, 12px); --mat-pad: clamp(8px, 1vw, 16px); --wall-gap: clamp(12px, 1.6vw, 26px); } .page-careers__wall-row { /* The pager. Each row scrolls by exactly its own width, and both rows are driven together from one set of controls. scroll-snap keeps a drag or a trackpad flick landing on a frame edge rather than mid-picture. */ overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: calc(var(--space-2) + 4px) 0; } .page-careers__wall-row::-webkit-scrollbar { display: none; } .page-careers__wall-track { display: flex; align-items: flex-start; gap: var(--wall-gap); width: max-content; padding-inline: var(--gutter); } /* ── A frame ────────────────────────────────────── */ .page-careers__frame { flex: 0 0 auto; position: relative; isolation: isolate; scroll-snap-align: start; } /* ── Palettes ──────────────────────────────────────────────────────────── Each frame declares a background AND a foreground, because the tokens below are THEMED. In after-hours, --tempo-cream-dark and --tempo-sand are both #0A061A and --tempo-ink is #05030A — so the two nominally light palettes go near-black at night, and a foreground chosen once in JS (ink on "light", cream on "dark") left the role titles black on black. The foreground is flipped per theme here instead, next to the background it has to contrast with, which is the only place the pairing can be checked. */ .page-careers__frame[data-palette="0"] { --frame-clr: var(--tempo-terracotta); --artwork-bg: var(--tempo-cream-dark); --art-fg: var(--tempo-ink); } .page-careers__frame[data-palette="1"] { --frame-clr: #2D2420; --artwork-bg: var(--tempo-ink); --art-fg: var(--tempo-cream); } .page-careers__frame[data-palette="2"] { --frame-clr: var(--tempo-sage); --artwork-bg: var(--tempo-sand); --art-fg: var(--tempo-ink); } .page-careers__frame[data-palette="3"] { --frame-clr: #4A1F1F; --artwork-bg: #1E1610; --art-fg: var(--tempo-cream); } /* At night both "light" panels are near-black, so their type goes cream. */ html[data-tempo-time="after-hours"] .page-careers__frame[data-palette="0"], html[data-tempo-time="after-hours"] .page-careers__frame[data-palette="2"] { --art-fg: var(--tempo-cream); } /* Orientation is a WIDTH decision against the shared artwork height. */ .page-careers__frame[data-orientation="portrait"] { --art-w: calc(var(--art-h) * 0.76); } .page-careers__frame[data-orientation="square"] { --art-w: var(--art-h); } .page-careers__frame[data-orientation="landscape"] { --art-w: calc(var(--art-h) * 1.42); } .page-careers__frame-art { /* A picture frame: a full border on all four sides. Not a single-edge accent rule, which the house style bans. */ border: var(--frame-border) solid var(--frame-clr, var(--tempo-terracotta)); background: var(--frame-clr, var(--tempo-terracotta)); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); transition: box-shadow 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo); } .page-careers__frame-mat { background: var(--tempo-cream); padding: var(--mat-pad); } .page-careers__frame-artwork { position: relative; width: var(--art-w); height: var(--art-h); background: var(--artwork-bg, var(--tempo-cream-dark)); overflow: hidden; display: flex; align-items: flex-end; /* Set once here so the caption inherits it and no text inside the frame needs a colour of its own. */ color: var(--art-fg, var(--tempo-ink)); } .page-careers__frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.55; z-index: 0; transition: opacity 0.5s var(--ease-out-expo), transform 0.7s var(--ease-out-expo); } /* The caption IS the artwork: the role set large, the details under it. No banner, no scrim — the panel is a flat colour, so the type sits directly on it the way a printed label does. */ .page-careers__frame-caption { position: relative; z-index: 2; width: 100%; padding: clamp(10px, 1.1vw, 16px); } .page-careers__frame-title { margin: 0; font-family: var(--font-display); /* Scaled off the shared artwork height so every frame in a row sets its role at the same size, whatever its width. */ font-size: clamp(14px, calc(var(--art-h) * 0.105), 23px); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; color: inherit; text-wrap: balance; } .page-careers__frame-link { color: inherit; text-decoration: none; } /* The heading's link is the accessible target; this stretches its hit area over the whole frame so the picture is clickable. */ .page-careers__frame-link::after { content: ""; position: absolute; inset: 0; z-index: 3; } .page-careers__frame-meta { margin: 6px 0 0; font-size: clamp(9.5px, calc(var(--art-h) * 0.048), 11.5px); line-height: 1.35; letter-spacing: 0.01em; /* COLOUR EXPLICITLY, do not rely on inheriting from the artwork. globals.css colours every bare
with --color-text-secondary, which is an ink at 72% alpha — so on the two dark palettes this line rendered ink on near-black and simply was not there. The title, being an