/* =========================================================================
CIS LABOR MARKETPLACE — Global Stylesheet
Structure: Tokens -> Reset -> Base -> Layout utilities -> Components ->
Sections -> Responsive
========================================================================= */
/* Global [hidden] enforcement — added 2026-09-02 (Phase J nav fix).
Several component rules below (.btn, .nav-link, etc.) set their own
`display` value with equal or higher specificity than the browser's
default `[hidden] { display: none }` UA rule, which silently defeats
`element.hidden = true` for any hidden element that also carries one
of those classes. This is exactly the mechanism js/app-shell.js's
data-auth-state/data-role toggling relies on (see that file), so
without this rule, logged-out/wrong-role nav buttons were rendering
visible even though the `hidden` attribute was correctly set by JS.
!important is intentional and safe here: no element on this site is
ever meant to be visible while it carries the `hidden` attribute. */
[hidden] { display: none !important; }
/* ---------- Design Tokens ---------- */
:root {
/* Colors — sampled from approved comp */
--navy-900: #04101c; /* deepest background */
--navy-800: #0a1e30; /* panels, cards on dark */
--navy-700: #14304a; /* borders/accents on dark */
--orange-500: #ea8321; /* primary accent / CTA */
--orange-600: #cf6f14; /* hover / pressed */
--orange-100: #fbe3c6;
--cream-100: #f3efe9; /* light panel background */
--cream-200: #e8e3db;
--white: #ffffff;
--gray-300: #a9b6c4; /* Spanish subtext on dark */
--gray-600: #66707c; /* Spanish subtext on light */
--gray-700: #46505c; /* body text on light */
/* Type */
--font-display: 'Montserrat', 'Arial Black', sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Layout */
--container-w: 1240px;
--container-pad: 24px;
--radius-sm: 6px;
--radius-md: 10px;
--shadow-md: 0 12px 30px rgba(4, 16, 28, 0.35);
--shadow-sm: 0 4px 14px rgba(4, 16, 28, 0.25);
/* Spacing scale (multiples of 8) */
--sp-1: 8px;
--sp-2: 16px;
--sp-3: 24px;
--sp-4: 32px;
--sp-5: 48px;
--sp-6: 64px;
--sp-7: 96px;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, blockquote, figure { margin: 0; }
ul { list-style: none; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; }
svg.icon { flex-shrink: 0; }
/* ---------- Base ---------- */
body {
font-family: var(--font-body);
color: var(--navy-900);
background: var(--white);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
max-width: var(--container-w);
margin-inline: auto;
padding-inline: var(--container-pad);
position: relative;
}
/* Multi-language pair default behavior: only the active language renders.
data-lang is set on (default "en") by an inline head script that
reads localStorage before first paint, so there is no flash of the
wrong language; js/i18n.js keeps it in sync when the toggle is used.
Base stays cascade-friendly (plain `display: block`, no !important) so
any component rule can still restyle a visible span's display (inline,
flex, etc.) exactly as before. Each language gets one hide rule that
force-hides its spans whenever data-lang is set to anything else,
using :not() instead of enumerating every other language by name —
that's what keeps this a one-new-line addition per language (see the
.pt line below) instead of a combinatorial rewrite. Only .en/.es ship
with content this milestone; .pt has no markup anywhere yet (see
CIS_LOCALIZATION_ROADMAP.md) — it's wired up ahead of any Portuguese
copy existing, so turning it on later is a content task, not a
refactor. */
.en, .es, .pt { display: block; }
html[data-lang]:not([data-lang="en"]) .en,
html[data-lang]:not([data-lang="es"]) .es,
html[data-lang]:not([data-lang="pt"]) .pt { display: none !important; }
.eyebrow {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding-bottom: var(--sp-2);
margin-bottom: var(--sp-4);
position: relative;
}
.eyebrow::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 48px; height: 3px;
background: var(--orange-500);
}
.eyebrow-light { color: var(--white); }
.eyebrow-dark { color: var(--navy-900); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
border-radius: var(--radius-sm);
padding: 14px 22px;
transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
white-space: nowrap;
}
.btn span { text-align: left; line-height: 1.25; }
.btn .en, .btn .es { font-size: 14px; letter-spacing: 0.03em; text-transform: uppercase; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
background: var(--orange-500);
color: var(--navy-900);
}
.btn-primary:hover { background: var(--orange-600); }
.btn-outline-light {
background: transparent;
color: var(--white);
border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-outline-light:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.btn-sm { padding: 10px 18px; }
.btn-sm .en, .btn-sm .es { font-size: 12px; }
.btn-lg { padding: 16px 26px; }
/* =========================================================================
HEADER
========================================================================= */
.site-header {
position: absolute;
top: 0; left: 0; right: 0;
z-index: 50;
padding-block: var(--sp-2);
transition: background-color 0.25s ease, box-shadow 0.25s ease, position 0s;
}
.site-header.is-scrolled {
position: fixed;
background: var(--navy-900);
box-shadow: var(--shadow-sm);
}
.header-inner {
display: flex;
/* top-aligned, not centered: the logo is allowed to run taller than the
nav row and hang below it, while the nav links/actions stay pinned to
a compact top line (see their padding-top below). This is what lets
the logo grow without stretching the whole header bar. */
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-3);
}
.brand {
display: block;
/* small negative margin so the enlarged logo's own vertical whitespace
doesn't push the compact nav row down with it */
margin-top: -6px;
}
/* No border-radius here: cis-logo.png is a transparent PNG whose own
badge artwork is already inset well clear of the image's bounding-box
corners (~40px of fully transparent margin at the source resolution),
so a CSS corner radius on the rather than one
button per language (see js/i18n.js). A native select scales to any
number of enabled languages with zero markup/CSS changes per addition
(unlike the old two-button-plus-separator layout, which needed a new
button+separator hand-added on every one of the 17 pages each time a
language turned on) — enabling Portuguese later is purely a LANGUAGES
registry + DICT.pt change, this control needs nothing extra. Chevron is
a plain CSS background-image (not the site's usual icon
sprite) specifically so this control doesn't depend on the
icon-chevron-down existing in a given page's inline sprite —
several pages (about.html, login.html, worker-profile.html, etc.) don't
currently define it, and this is the one component shared by literally
every page, so it can't assume any per-page symbol availability. */
.lang-switch { display: flex; align-items: center; }
.lang-switch-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23a9b6c4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right center / 13px 13px;
border: none;
margin: 0;
color: var(--gray-300);
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.03em;
padding: 4px 18px 4px 2px;
cursor: pointer;
}
.lang-switch-select:hover { color: var(--white); }
.lang-switch-select:focus { color: var(--white); outline: 2px solid var(--orange-500); outline-offset: 2px; }
/* Native dropdown list rendering is outside the page's own dark styling in
most browsers, so give its options readable dark-on-light text rather
than leaving them at the browser default (some browsers render a
`color` set on against their own popup background just fine;
this keeps EN/ES legible if the popup background stays light). */
.lang-switch-select option { color: #0f1a2b; }
.nav-toggle {
display: none;
color: var(--white);
padding: 6px;
}
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
/* =========================================================================
HERO
========================================================================= */
.hero {
position: relative;
min-height: 760px;
background: var(--navy-900);
overflow: hidden;
display: flex;
align-items: stretch;
}
.hero-media {
position: absolute;
inset: 0;
z-index: 1;
}
.hero-media-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 74% center; /* wider background crop now includes skyline/cranes/crew;
74% keeps the worker prominent while letting more of the
scene breathe at wide viewports */
}
/* Hero background video: layers directly on top of .hero-media-img (same
crop/position) so the static image keeps serving as the immediate paint
and the poster/no-JS/no-autoplay fallback. Muted/looped/no controls per
spec; prefers-reduced-motion below hides it so the image shows through. */
.hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 74% center;
}
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
}
.hero-gradient {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, var(--navy-900) 0%, rgba(4,16,28,0.92) 22%, rgba(4,16,28,0.35) 46%, rgba(4,16,28,0.05) 62%),
linear-gradient(180deg, rgba(4,16,28,0.55) 0%, rgba(4,16,28,0) 22%, rgba(4,16,28,0) 70%, rgba(4,16,28,0.5) 100%);
}
.hero-caption {
position: absolute;
right: var(--container-pad);
bottom: 56px;
z-index: 3;
background: rgba(4,16,28,0.68);
border: 1px solid rgba(255,255,255,0.25);
border-radius: var(--radius-sm);
padding: 12px 18px;
display: flex;
align-items: center;
gap: 22px;
color: var(--white);
max-width: 420px;
}
.hero-caption p { font-size: 13px; }
.hero-inner {
position: relative;
z-index: 4;
width: 100%;
display: flex;
align-items: center;
padding-top: 208px; /* keeps clear air below the larger (144px) logo */
padding-bottom: 120px;
pointer-events: none; /* let clicks pass through to the play button beneath;
re-enabled on hero-content, which holds the real links */
}
.hero-content { pointer-events: auto; }
.hero-content { max-width: 640px; position: relative; }
/* Crop-mark accents: two thin L-brackets that frame the left edge of the
hero text column (top-left of the headline, bottom-left of the CTA row)
— echoes the crop-mark motif from the approved comp without touching
the text itself. Shared class + top/bottom modifier so the treatment
stays one definition. */
.crop-mark {
position: absolute;
left: -20px;
width: 22px;
height: 22px;
border-left: 1.5px solid rgba(255, 255, 255, 0.5);
pointer-events: none;
}
.crop-mark-top {
top: -26px;
border-top: 1.5px solid rgba(255, 255, 255, 0.5);
}
.crop-mark-bottom {
bottom: -26px;
border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
}
.hero-title {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(40px, 5.4vw, 68px);
line-height: 0.98;
letter-spacing: -0.01em;
text-transform: uppercase;
margin-bottom: var(--sp-3);
}
.hero-title .line { display: block; }
.line-white { color: var(--white); }
.line-orange { color: var(--orange-500); }
.hero-subtitle { max-width: 460px; margin-bottom: var(--sp-4); }
.hero-subtitle .en, .hero-subtitle .es { font-size: 18px; color: var(--white); font-weight: 500; }
.hero-ctas { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* Interior-page hero variant (e.g. Find Workers): shorter, and its content
column runs much wider than the homepage's 640px text block so a filter
bar can sit comfortably inside it. Added alongside .hero / .hero-content,
never replacing them, so the homepage hero is untouched. */
.hero--compact { min-height: 600px; }
.hero-content--wide { max-width: 900px; }
/* =========================================================================
SEARCH / FILTER BAR (Find Workers hero)
Reusable across any page that needs a worker/job search panel.
========================================================================= */
.worker-filters {
background: rgba(4, 16, 28, 0.72);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
padding: var(--sp-3) var(--sp-4);
backdrop-filter: blur(3px);
box-shadow: var(--shadow-md);
}
.filter-grid {
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
gap: var(--sp-3);
align-items: end;
}
.filter-field { display: flex; flex-direction: column; min-width: 0; }
.filter-field label {
font-family: var(--font-display);
font-size: 12px;
font-weight: 700;
color: var(--white);
margin-bottom: 6px;
}
.filter-control { position: relative; }
.filter-control select,
.filter-control input {
width: 100%;
appearance: none;
-webkit-appearance: none;
background: var(--navy-800);
border: 1px solid var(--navy-700);
color: var(--white);
border-radius: var(--radius-sm);
padding: 11px 36px 11px 12px;
font-family: var(--font-body);
font-size: 13.5px;
}
.filter-control select:focus,
.filter-control input:focus { outline: 2px solid var(--orange-500); outline-offset: 1px; }
.filter-control input::placeholder { color: var(--gray-300); opacity: 0.8; }
.filter-control .icon {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-300);
pointer-events: none;
}
.filter-submit { white-space: nowrap; }
.filter-note {
display: flex;
align-items: center;
gap: 10px;
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: var(--white);
font-size: 13px;
font-weight: 600;
}
.filter-note .icon { color: var(--orange-500); flex-shrink: 0; }
/* =========================================================================
BROWSE BY TRADE (category cards)
Plain, non-angled cards — distinct component from the homepage's angled
.trade-card, reusable on any future listing/category page.
========================================================================= */
.browse-trades { background: var(--cream-100); padding-block: var(--sp-6); }
.browse-trades-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.browse-trades-head .eyebrow { margin-bottom: var(--sp-2); }
.browse-trades-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); color: var(--navy-900); }
.browse-trades-sub { color: var(--gray-700); margin-top: 4px; }
.btn-outline-dark {
background: transparent;
color: var(--navy-900);
border: 1.5px solid var(--navy-900);
}
.btn-outline-dark:hover { background: var(--navy-900); color: var(--white); }
.category-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--sp-3);
}
.category-card {
background: var(--white);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
}
.category-card-photo { aspect-ratio: 4 / 3; overflow: hidden; position: relative; }
.category-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.category-card-icon {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--orange-500);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
margin: -26px auto 0;
position: relative;
z-index: 2;
border: 3px solid var(--white);
box-shadow: var(--shadow-sm);
}
.category-card-body { padding: 14px var(--sp-2) var(--sp-2); text-align: center; }
.category-card-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--navy-900); }
.category-card-count {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid var(--cream-200);
font-size: 12.5px;
font-weight: 600;
color: var(--gray-700);
}
.category-card-count .icon { color: var(--navy-900); }
/* =========================================================================
VALUE PROPS (Why CIS Labor Marketplace)
========================================================================= */
.value-props { background: var(--navy-900); padding-block: var(--sp-6); border-top: 1px solid var(--navy-700); }
.value-props-inner { display: flex; gap: var(--sp-5); align-items: flex-start; flex-wrap: wrap; }
.value-props-intro { flex: 0 0 300px; }
.value-props-intro .eyebrow { margin-bottom: var(--sp-2); }
.value-props-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(24px, 2.8vw, 32px); text-transform: uppercase; line-height: 1.1; }
.value-props-title .line-white { display: block; color: var(--white); }
.value-props-title .line-orange { display: block; color: var(--orange-500); }
.value-props-sub { margin-top: 10px; color: var(--gray-300); font-size: 13.5px; }
.value-props-grid {
flex: 1 1 480px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
.value-props-grid.is-three { grid-template-columns: repeat(3, 1fr); }
.value-prop-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px; height: 46px;
border-radius: 50%;
border: 1.5px solid var(--orange-500);
color: var(--orange-500);
margin-bottom: var(--sp-2);
}
.value-prop-title { font-family: var(--font-display); font-size: 15px; color: var(--white); margin-bottom: 6px; }
.value-prop-desc .en, .value-prop-desc .es { font-size: 13px; color: var(--gray-300); }
/* =========================================================================
TRUST STATS + FEATURED TRADES (angled split)
========================================================================= */
.trust-trades {
background: var(--navy-900);
padding-block: var(--sp-6);
}
.trust-trades-inner {
display: grid;
grid-template-columns: minmax(280px, 380px) 1fr;
align-items: stretch;
gap: 0;
}
.trust-panel {
padding: var(--sp-5) var(--sp-4) var(--sp-5) 0;
color: var(--white);
}
.stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4) var(--sp-3);
padding-bottom: var(--sp-4);
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--navy-700);
}
.stat { border-left: 2px solid var(--orange-500); padding-left: 14px; }
.stat-number {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 34px;
color: var(--white);
}
.stat-label { display: block; margin-top: 2px; }
.stat-label .en, .stat-label .es { font-size: 13px; color: var(--gray-300); }
.trust-tagline {
display: flex;
align-items: center;
gap: 10px;
color: var(--orange-500);
font-weight: 700;
font-size: 14px;
}
.trades-panel {
position: relative;
color: var(--navy-900);
/* extra left padding clears the diagonal cut on ::before at its widest
point (top edge) so no text ever sits over the dark background */
padding: var(--sp-5) var(--sp-4) var(--sp-5) 168px;
margin-left: -48px;
z-index: 1;
}
/* Angled background shape lives on its own layer behind the content, so the
diagonal clip never cuts into text/labels regardless of where they sit.
A steeper cut (130px vs. the original subtle 48px) reads as one deliberate
diagonal composition, closer to the approved comp. */
.trades-panel::before {
content: "";
position: absolute;
inset: 0;
background: var(--cream-100);
border-radius: var(--radius-md) 0 0 var(--radius-md);
clip-path: polygon(130px 0, 100% 0, 100% 100%, 0 100%);
-webkit-clip-path: polygon(130px 0, 100% 0, 100% 100%, 0 100%);
box-shadow: var(--shadow-md);
z-index: -1;
}
.trade-cards {
display: flex;
gap: 14px;
margin-bottom: var(--sp-3);
}
.trade-card {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
}
/* Angled trade-card image treatment: the wrapper owns the parallelogram
geometry (overflow + clip-path together, so the clip holds even in
browsers/engines that only honor one of the two), and the image inside
it stays a plain, unskewed cover-fit — the angle is entirely a property
of the container shape, never the pixels. Reusable as-is for any future
card that needs the same angled-photo treatment. */
.trade-card-photo {
--trade-card-clip: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
clip-path: var(--trade-card-clip);
-webkit-clip-path: var(--trade-card-clip); /* Safari requires the prefix or it silently no-ops the clip */
position: relative;
background: var(--navy-800);
isolation: isolate; /* keeps the clip on its own compositing layer */
}
.trade-card-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Subtle bottom scrim so the icon badge always reads clearly against the
photo, matching the comp's photo-to-label transition. Same clip as the
wrapper so it never bleeds past the angled edges. */
.trade-card-photo::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(4,16,28,0) 62%, rgba(4,16,28,0.55) 100%);
clip-path: var(--trade-card-clip);
-webkit-clip-path: var(--trade-card-clip);
pointer-events: none;
}
.trade-card-icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--navy-900);
color: var(--orange-500);
border: 2px solid var(--orange-500);
display: flex;
align-items: center;
justify-content: center;
margin-top: -20px;
z-index: 2;
box-shadow: var(--shadow-sm);
}
.trade-card-label {
text-align: center;
margin-top: 10px;
}
.trade-card-label .en, .trade-card-label .es { font-size: 13px; font-weight: 700; }
.view-all-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
color: var(--navy-900);
float: right;
}
.view-all-link .icon { color: var(--orange-500); }
.view-all-link:hover { color: var(--orange-600); }
/* =========================================================================
HOW IT WORKS
========================================================================= */
.how-it-works {
background: var(--navy-900);
padding-block: var(--sp-6);
border-top: 1px solid var(--navy-700);
}
.steps-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-5);
}
.step { position: relative; padding-top: 8px; color: var(--white); }
.step-number {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 44px;
color: var(--navy-700);
-webkit-text-stroke: 1px var(--gray-300);
margin-bottom: var(--sp-2);
}
.step-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
border: 1.5px solid var(--orange-500);
color: var(--orange-500);
margin-bottom: var(--sp-3);
}
.step-title { font-family: var(--font-display); font-size: 19px; margin-bottom: 6px; }
.step-desc .en, .step-desc .es { font-size: 14px; color: var(--gray-300); }
/* =========================================================================
TESTIMONIAL
========================================================================= */
.testimonial { background: var(--cream-100); padding-block: var(--sp-6); }
.testimonial-inner {
display: grid;
grid-template-columns: 200px 1fr auto;
gap: var(--sp-4);
align-items: center;
}
.testimonial-photo {
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 4/5;
box-shadow: var(--shadow-sm);
}
.testimonial-photo img { width: 100%; height: 100%; object-fit: cover; }
.quote-icon { color: var(--orange-500); margin-bottom: var(--sp-2); }
.testimonial-body blockquote p.en, .testimonial-body blockquote p.es { font-size: 21px; font-weight: 700; color: var(--navy-900); line-height: 1.35; }
.testimonial-attribution { margin-top: var(--sp-3); display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 14px; color: var(--gray-700); }
.testimonial-attribution strong { color: var(--navy-900); }
.testimonial-attribution span .en, .testimonial-attribution span .es { display: inline; }
.testimonial-rating { text-align: center; padding-left: var(--sp-4); border-left: 1px solid var(--cream-200); min-width: 190px; }
.stars { display: flex; gap: 4px; color: var(--orange-500); justify-content: center; margin-bottom: 6px; }
.rating-number { font-family: var(--font-display); font-weight: 800; font-size: 22px; display: block; margin-bottom: 6px; }
.rating-caption .en, .rating-caption .es { font-size: 12px; color: var(--gray-700); }
/* =========================================================================
CTA BAND
========================================================================= */
.cta-band {
background: linear-gradient(90deg, var(--navy-900) 55%, var(--navy-800) 100%);
padding-block: var(--sp-6);
}
.cta-band-inner {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sp-4);
}
.cta-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(28px, 3.4vw, 40px); text-transform: uppercase; line-height: 1.1; }
.cta-title .line-white { display: block; color: var(--white); }
.cta-title .line-orange { display: block; color: var(--orange-500); }
.cta-subtitle { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; font-size: 14px; color: var(--gray-300); margin-top: 8px; }
.cta-band-actions { align-items: center; }
.cta-divider { width: 6px; height: 6px; border-radius: 50%; background: var(--orange-500); }
/* =========================================================================
FOOTER
========================================================================= */
.site-footer { background: var(--navy-900); color: var(--gray-300); }
.footer-top {
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
gap: var(--sp-4);
padding-block: var(--sp-6) var(--sp-5);
border-bottom: 1px solid var(--navy-700);
}
.footer-logo { height: 48px; width: auto; border-radius: 6px; margin-bottom: var(--sp-2); }
.footer-brand p { font-size: 13px; max-width: 260px; }
.footer-col h4 { font-family: var(--font-display); color: var(--white); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--sp-2); }
.footer-col a { display: block; margin-bottom: 10px; font-size: 13px; }
.footer-col a:hover { color: var(--orange-500); }
.social-icons { display: flex; gap: 12px; }
.social-icons a {
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--navy-700);
display: flex; align-items: center; justify-content: center;
}
.social-icons a:hover { border-color: var(--orange-500); }
.footer-bottom { padding-block: var(--sp-3); }
.footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--gray-300); opacity: 0.75; }
.footer-legal { display: flex; gap: var(--sp-3); }
.footer-legal-pending { cursor: default; opacity: 0.7; }
/* =========================================================================
FIND WORKERS RESULTS
Sidebar filters + results grid + pagination + lower CTA strip. The hero
and top search bar reuse .hero/.hero--compact/.worker-filters as-is from
the Find Workers landing page — only a shorter hero modifier is added.
========================================================================= */
/* Shorter hero variant for the results page: same dark hero/search-bar
system as the landing page, just less vertical padding since there's no
trailing "pre-screened" note line under the search bar here. */
.hero--results { min-height: 480px; }
.hero--results .hero-inner { padding-bottom: 56px; }
/* This page's comp uses title case for the headline, not the all-caps
treatment on the homepage/landing hero — matching it here also fixes
the longer heading clipping against the photo at wide viewports. */
.hero--results .hero-title { text-transform: none; }
/* Light form-control variant for use in the sidebar (white/cream context)
vs. the dark .filter-control used inside the navy hero panel. Same
markup pattern (.filter-control wrapper + trailing icon), different skin. */
.filter-control--light select,
.filter-control--light input {
background: var(--white);
border: 1px solid var(--cream-200);
color: var(--navy-900);
}
.filter-control--light .icon { color: var(--gray-600); }
.filter-control--light select:focus,
.filter-control--light input:focus { outline: 2px solid var(--orange-500); outline-offset: 1px; }
.results-section { background: var(--cream-100); }
.results-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--sp-4);
align-items: start;
padding-block: var(--sp-5);
}
/* ---------- Sidebar filters ---------- */
.sidebar-filters {
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: var(--sp-3);
}
.sidebar-filters-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--sp-2);
}
.sidebar-filters-head .eyebrow { margin-bottom: 0; padding-bottom: 10px; }
.filter-clear-link {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
color: var(--orange-500);
}
.filter-clear-link:hover { color: var(--orange-600); text-decoration: underline; }
.filter-group { padding-block: var(--sp-3); border-top: 1px solid var(--cream-200); }
.filter-group:first-of-type { padding-top: 0; border-top: 0; }
.filter-group-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
color: var(--navy-900);
margin-bottom: 10px;
}
.check-list { display: flex; flex-direction: column; gap: 10px; }
.check-option { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-700); cursor: pointer; }
.check-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--orange-500); cursor: pointer; flex-shrink: 0; }
/* ---------- Results toolbar ---------- */
.results-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
flex-wrap: wrap;
margin-bottom: var(--sp-3);
}
.results-count .en, .results-count .es { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--navy-900); }
.results-controls { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.sort-field { display: flex; align-items: center; gap: 8px; }
.sort-field label {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
color: var(--gray-700);
white-space: nowrap;
line-height: 1.2;
}
.sort-field .filter-control { min-width: 150px; }
.sort-field .filter-control select { padding: 9px 30px 9px 12px; font-size: 13px; }
.view-toggle { display: flex; gap: 6px; }
.view-toggle-btn {
width: 38px; height: 38px;
border-radius: var(--radius-sm);
border: 1px solid var(--cream-200);
background: var(--white);
color: var(--gray-600);
display: flex;
align-items: center;
justify-content: center;
}
.view-toggle-btn.is-active { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-900); }
/* ---------- Worker result cards ---------- */
.worker-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
/* List-mode is a lightweight reflow (single column, cards keep their grid
internals) rather than a redesigned horizontal card — a full list-row
layout is flagged as a future enhancement; see PROJECT-NOTES.md. */
.worker-grid.is-list { grid-template-columns: 1fr; }
.worker-grid.is-list .worker-card { flex-direction: row; }
.worker-grid.is-list .worker-card-photo { width: 180px; aspect-ratio: 1; flex-shrink: 0; }
.worker-grid.is-list .worker-card-body { flex: 1; }
.worker-card {
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.worker-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.worker-card[hidden] { display: none; }
.worker-card-photo { aspect-ratio: 4 / 3.6; overflow: hidden; }
.worker-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.worker-card-body {
padding: var(--sp-2) var(--sp-3) var(--sp-3);
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.worker-card-name { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-900); }
.worker-card-name .icon { color: #2f8fd6; }
.worker-card-trade { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--orange-500); text-transform: uppercase; letter-spacing: 0.02em; }
.worker-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-600); flex-wrap: wrap; }
.worker-card-meta .icon { color: var(--gray-600); }
.worker-card-meta .dot { opacity: 0.6; }
.worker-card-rating { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--navy-900); }
.worker-card-rating .icon { color: var(--orange-500); }
.worker-card-rating .count { font-weight: 500; color: var(--gray-600); }
.worker-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.badge-neutral { background: var(--cream-100); color: var(--gray-700); }
.badge-available { background: #e3f6e9; color: #1f8a4c; }
.worker-card-cta {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 1.5px solid var(--navy-900);
border-radius: var(--radius-sm);
padding: 11px 16px;
font-family: var(--font-display);
font-weight: 700;
color: var(--navy-900);
transition: background-color 0.15s ease, color 0.15s ease;
}
.worker-card-cta:hover { background: var(--navy-900); color: var(--white); }
/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.page-btn {
min-width: 36px; height: 36px;
padding: 0 10px;
border-radius: var(--radius-sm);
border: 1px solid var(--cream-200);
background: var(--white);
color: var(--navy-900);
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.page-btn:hover { border-color: var(--orange-500); }
.page-btn.is-active { background: var(--orange-500); border-color: var(--orange-500); color: var(--navy-900); }
.page-btn:disabled { opacity: 0.4; cursor: default; }
.page-btn:disabled:hover { border-color: var(--cream-200); }
.page-ellipsis { color: var(--gray-600); padding: 0 4px; font-size: 13px; }
/* ---------- Lower CTA strip ---------- */
.results-cta { background: var(--navy-900); padding-block: var(--sp-4); border-top: 3px solid var(--orange-500); }
.results-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.results-cta-intro { display: flex; align-items: center; gap: var(--sp-3); flex: 1 1 320px; }
.results-cta-icon {
width: 52px; height: 52px;
border-radius: 50%;
border: 1.5px solid var(--orange-500);
color: var(--orange-500);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.results-cta-text .en, .results-cta-text .es { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: var(--white); }
.results-cta-trust { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.cta-trust-item { display: flex; align-items: center; gap: 10px; max-width: 190px; }
.cta-trust-item .icon { color: var(--orange-500); flex-shrink: 0; }
.cta-trust-item .en, .cta-trust-item .es { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--white); }
/* =========================================================================
FIND WORK
Hero badges + job cards + trade tiles + light CTA variant. Reuses the
hero/search bar, sidebar-filters, results-toolbar, and pagination
systems from the Find Workers Results page as-is — only job-specific
pieces (job cards, pay-range fields, trade tiles) are new.
========================================================================= */
.hero--jobs { min-height: 560px; }
.hero--jobs .hero-inner { padding-bottom: 56px; }
.hero--jobs .hero-title { text-transform: none; }
.hero--jobs .hero-subtitle { margin-bottom: var(--sp-3); }
.hero-badges {
display: flex;
gap: var(--sp-4);
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0 0 var(--sp-3);
}
.hero-badge { display: flex; align-items: center; gap: 10px; }
.hero-badge .icon { color: var(--orange-500); flex-shrink: 0; }
.hero-badge .en, .hero-badge .es { display: block; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--white); }
/* ---------- Pay range fields (sidebar) ---------- */
.pay-range-fields { display: flex; align-items: center; gap: 8px; }
.pay-range-fields .filter-control { flex: 1; min-width: 0; }
.pay-range-sep { font-size: 12px; color: var(--gray-600); flex-shrink: 0; }
/* ---------- Job result cards ---------- */
.job-grid {
display: flex;
flex-direction: column;
gap: var(--sp-3);
margin-bottom: var(--sp-4);
}
.job-card {
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex;
gap: var(--sp-3);
padding: var(--sp-3);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.job-card[hidden] { display: none; }
.job-card-photo { width: 148px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3.2; }
.job-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.job-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.job-card-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy-900); }
.verified-pill { background: #2f8fd6; color: var(--white); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.job-card-company { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--orange-500); }
.job-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-600); flex-wrap: wrap; }
.job-card-meta .icon { color: var(--gray-600); }
.job-card-meta .dot { opacity: 0.6; }
.job-card-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.badge-pay { background: #e3f6e9; color: #1f8a4c; }
.job-card-desc { font-size: 13px; color: var(--gray-700); line-height: 1.5; margin-top: 4px; }
.job-card-side {
flex: 0 0 190px;
display: flex;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 8px;
position: relative;
}
.job-card-bookmark {
position: absolute;
top: 0; right: 0;
color: var(--gray-600);
transition: color 0.15s ease;
}
.job-card-bookmark:hover, .job-card-bookmark.is-saved { color: var(--orange-500); }
.job-card-sub { font-size: 12px; color: var(--gray-600); line-height: 1.5; margin-top: var(--sp-2); }
.job-card-apply { width: 100%; justify-content: center; margin-top: 4px; }
.job-card-details-link { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--navy-900); }
.job-card-details-link:hover { color: var(--orange-500); }
/* List-mode: single-column reflow, same lightweight pattern used on the
Find Workers Results page — a full list-row redesign is a future
enhancement (see PROJECT-NOTES.md). */
.job-grid.is-list .job-card { flex-direction: row; }
/* ---------- Browse by Trade (compact tiles) ---------- */
.trade-tiles-section { background: var(--white); padding-block: var(--sp-5); border-top: 1px solid var(--cream-200); }
.trade-tiles-section .eyebrow { margin-bottom: var(--sp-3); }
.trade-tiles {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: var(--sp-2);
}
.trade-tile {
background: var(--cream-100);
border-radius: var(--radius-md);
padding: var(--sp-2) var(--sp-1);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.trade-tile:hover { background: var(--orange-100); transform: translateY(-2px); }
.trade-tile .icon { color: var(--orange-500); }
.trade-tile-label { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--navy-900); }
.trade-tile-count { font-size: 10.5px; color: var(--gray-600); }
.trade-tile--all { background: var(--navy-900); }
.trade-tile--all .icon { color: var(--white); }
.trade-tile--all .trade-tile-label { color: var(--white); }
.trade-tile--all .trade-tile-count { color: var(--gray-300); }
.trade-tile--all:hover { background: var(--navy-800); }
/* ---------- Light CTA variant (cream background, two-button layout) ---------- */
.results-cta--light { background: var(--cream-100); border-top: 3px solid var(--orange-500); }
.results-cta--light .results-cta-icon { border-color: var(--orange-500); color: var(--orange-500); }
.results-cta--light .results-cta-text .en, .results-cta--light .results-cta-text .es { color: var(--navy-900); }
.results-cta-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* =========================================================================
JOB DETAIL
Two-column job page (overview/description/responsibilities/requirements +
employer/summary sidebar) plus a compact Similar Jobs strip. Reuses
.hero/.hero--compact, .btn variants, .badge system, and the
.results-cta--light bottom CTA as-is — only job-detail-specific pieces
are new below.
========================================================================= */
/* ---------- Hero (breadcrumb + title/meta/CTA left, photo right) ---------- */
.hero--job-detail { min-height: 0; }
.hero--job-detail .hero-inner { padding-bottom: var(--sp-4); }
.hero--job-detail .hero-title { text-transform: none; font-size: clamp(30px, 4vw, 46px); margin-bottom: 6px; }
.job-detail-hero-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: var(--sp-5);
align-items: center;
width: 100%;
}
.job-detail-hero-media {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-md);
aspect-ratio: 4 / 3.3;
}
.job-detail-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gray-300); margin-bottom: var(--sp-2); flex-wrap: wrap; }
.breadcrumb a:hover { color: var(--white); }
.breadcrumb .crumb-current { color: var(--white); font-weight: 600; }
.breadcrumb .crumb-sep { opacity: 0.5; }
.verified-employer-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(31, 138, 76, 0.16);
border: 1px solid rgba(62, 203, 122, 0.45);
color: #3ecb7a;
padding: 5px 12px;
border-radius: 999px;
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
.job-detail-company { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--orange-500); margin-bottom: 12px; }
.job-detail-meta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13.5px; color: var(--gray-300); }
.job-detail-rating { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--white); }
.job-detail-rating .icon { color: var(--orange-500); }
.job-detail-rating .count { font-weight: 500; color: var(--gray-300); }
.job-detail-location { display: flex; align-items: center; gap: 6px; }
.job-detail-location .icon { color: var(--gray-300); }
.job-detail-meta-row .meta-dot { opacity: 0.5; }
.job-detail-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.badge-hero { background: var(--navy-700); color: var(--white); border: 1px solid rgba(255,255,255,0.12); }
.job-detail-cta-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
/* ---------- Main layout (job content card + sidebar) ---------- */
.job-detail-section { background: var(--cream-100); }
.job-detail-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--sp-4);
align-items: start;
padding-block: var(--sp-5);
}
.job-detail-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-4); }
.job-detail-card h2 { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--navy-900); margin-top: var(--sp-4); margin-bottom: 10px; }
.job-detail-card h2:first-child { margin-top: 0; }
.job-detail-card p { font-size: 14px; color: var(--gray-700); line-height: 1.65; }
.overview-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-3) var(--sp-2);
margin-top: var(--sp-3);
padding-bottom: var(--sp-3);
border-bottom: 1px solid var(--cream-200);
}
.overview-item { display: flex; align-items: flex-start; gap: 8px; }
.overview-item .icon { color: var(--orange-500); flex-shrink: 0; margin-top: 2px; }
.overview-item-label { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gray-600); }
.overview-item-value { display: block; font-size: 13.5px; font-weight: 600; color: var(--navy-900); margin-top: 2px; }
.dot-list { display: flex; flex-direction: column; gap: 8px; }
.dot-list li { position: relative; padding-left: 18px; font-size: 14px; color: var(--gray-700); line-height: 1.5; }
.dot-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--orange-500); }
/* ---------- Sidebar: employer card + job summary card ---------- */
.job-detail-sidebar { display: flex; flex-direction: column; gap: var(--sp-3); }
.employer-card, .job-summary-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-3); }
.employer-card h3, .job-summary-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy-900); margin-bottom: var(--sp-2); }
.employer-logo { max-width: 148px; margin-bottom: var(--sp-2); }
.employer-name-row { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy-900); margin-bottom: 4px; }
.employer-name-row .icon { color: #2f8fd6; }
.employer-rating { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; color: var(--navy-900); margin-bottom: 10px; }
.employer-rating .icon { color: var(--orange-500); }
.employer-rating .count { font-weight: 500; color: var(--gray-600); }
.employer-desc { font-size: 13px; color: var(--gray-700); line-height: 1.6; margin-bottom: var(--sp-3); }
.employer-facts { display: flex; flex-direction: column; gap: 10px; padding-top: var(--sp-2); border-top: 1px solid var(--cream-200); margin-bottom: var(--sp-3); }
.employer-fact { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-700); }
.employer-fact .icon { color: var(--gray-600); flex-shrink: 0; }
.employer-fact-sub { display: block; font-size: 11px; color: var(--gray-600); }
.employer-card .btn { width: 100%; justify-content: space-between; }
.summary-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding-block: 9px; border-top: 1px solid var(--cream-200); font-size: 13px; }
.summary-row:first-of-type { border-top: 0; }
.summary-label { color: var(--gray-600); font-weight: 600; }
.summary-value { color: var(--navy-900); font-weight: 700; text-align: right; }
/* ---------- Similar Jobs ---------- */
.similar-jobs-section { background: var(--cream-100); padding-bottom: var(--sp-5); }
.similar-jobs-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--navy-900); margin-bottom: var(--sp-3); }
.similar-jobs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.similar-job-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.2s ease, transform 0.2s ease; }
.similar-job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.similar-job-photo { aspect-ratio: 4 / 3; overflow: hidden; }
.similar-job-photo img { width: 100%; height: 100%; object-fit: cover; }
.similar-job-body { padding: var(--sp-2); display: flex; flex-direction: column; gap: 4px; position: relative; }
.similar-job-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy-900); padding-right: 20px; }
.similar-job-company { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--orange-500); }
.similar-job-meta { font-size: 11.5px; color: var(--gray-600); display: flex; align-items: center; gap: 4px; }
.similar-job-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.similar-job-badges .badge { font-size: 10px; padding: 3px 8px; }
.similar-job-arrow { position: absolute; right: var(--sp-2); bottom: var(--sp-2); color: var(--gray-600); transition: color 0.15s ease; }
.similar-job-card:hover .similar-job-arrow { color: var(--orange-500); }
/* =========================================================================
LOGIN / AUTH
Shared header/footer/hero components reused as-is. Only the auth card,
its form fields, and the light trust strip below are new here — built
so Register/Sign Up (next milestone) can reuse the same .auth-* classes.
========================================================================= */
.hero--auth { min-height: 480px; }
.hero--auth .hero-inner { padding-bottom: 100px; }
.hero--auth .hero-title { text-transform: none; }
.hero--auth .hero-subtitle { max-width: 520px; margin-bottom: 0; }
.auth-section { background: var(--cream-100); padding-bottom: var(--sp-6); margin-top: -70px; position: relative; z-index: 2; }
/* Login page only: small breathing-room gap between the hero and the card
(the shared .auth-section overlap is otherwise flush with zero gap). */
.auth-section--login { padding-top: 40px; }
.auth-card {
max-width: 460px;
margin: 0 auto;
background: var(--white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: var(--sp-4) var(--sp-4) var(--sp-3);
}
.auth-card-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 26px); color: var(--navy-900); text-align: center; }
.auth-card-sub { text-align: center; font-size: 13.5px; color: var(--gray-700); margin-top: 8px; margin-bottom: var(--sp-3); }
.auth-field { margin-bottom: var(--sp-2); }
.auth-field label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--navy-900); margin-bottom: 6px; }
/* Phase 1 (2026-09-01): a
wrapping a .check-list (e.g. worker Work Type/Availability) — reset the
browser's default fieldset border/padding and style the legend to match
.auth-field label exactly, so it reads as just another form field. */
.auth-field-fieldset { border: 0; padding: 0; }
.auth-field-fieldset legend { padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--navy-900); margin-bottom: 8px; }
/* .auth-field label { display:block } above is meant for the single
caption label above an input/select — it also matches .check-option
(itself a ) once checkboxes live inside a .auth-field/fieldset,
which broke the checkbox+text flex row (found via local QA screenshot,
not visible in the DOM/JS state alone). Restore the row layout with a
selector specific enough to win. */
.auth-field-fieldset .check-option { display: flex; margin-bottom: 0; font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--gray-700); }
.auth-input-wrap { position: relative; }
.auth-input-wrap .icon-leading { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--gray-600); pointer-events: none; }
.auth-input-wrap input {
width: 100%;
padding: 12px 42px 12px 40px;
border: 1px solid var(--cream-200);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 14px;
color: var(--navy-900);
background: var(--white);
}
.auth-input-wrap input::placeholder { color: var(--gray-600); opacity: 0.7; }
.auth-input-wrap input:focus { outline: 2px solid var(--orange-500); outline-offset: 1px; }
.auth-input-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-600); padding: 4px; display: flex; }
.auth-input-toggle:hover { color: var(--navy-900); }
.auth-input-toggle[aria-pressed="true"] .icon-eye { display: none; }
.auth-input-toggle[aria-pressed="true"] .icon-eye-off { display: block !important; }
.auth-row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: var(--sp-1) 0 var(--sp-3); }
.auth-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gray-700); cursor: pointer; }
.auth-remember input { width: 16px; height: 16px; accent-color: var(--orange-500); cursor: pointer; }
.auth-forgot { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--orange-500); }
.auth-forgot:hover { color: var(--orange-600); text-decoration: underline; }
.auth-submit { width: 100%; justify-content: center; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: var(--sp-3) 0; color: var(--gray-600); font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.04em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--cream-200); }
.btn-social { width: 100%; justify-content: center; margin-bottom: 10px; background: var(--white); }
.btn-social:last-of-type { margin-bottom: 0; }
.auth-switch { text-align: center; margin-top: var(--sp-3); font-size: 13.5px; color: var(--gray-700); }
.auth-switch a { color: var(--orange-500); font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }
/* ---------- Light trust strip ---------- */
.auth-trust { background: var(--cream-100); padding-bottom: var(--sp-6); }
.auth-trust-inner { display: flex; justify-content: center; gap: var(--sp-5); flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--cream-200); }
.auth-trust-item { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 230px; gap: 10px; }
.auth-trust-icon {
width: 50px; height: 50px;
border-radius: 50%;
border: 1.5px solid var(--navy-700);
color: var(--orange-500);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.auth-trust-item > .en, .auth-trust-item > .es { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--navy-900); }
.auth-trust-item .es-desc { display: block; margin-top: 2px; }
.auth-trust-item .es-desc .en, .auth-trust-item .es-desc .es { display: block; font-family: var(--font-body); font-weight: 400; font-size: 12.5px; color: var(--gray-700); }
/* =========================================================================
REGISTER / SIGN UP
Builds on the .auth-* classes from Login above (same card, field, and
submit styling). New here: the wide two-role-card chooser and the
register-form-grid used for paired fields.
========================================================================= */
.auth-card--wide { max-width: 720px; }
.register-progress {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: var(--sp-4);
font-family: var(--font-display);
font-weight: 700;
font-size: 11.5px;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--gray-600);
}
.register-progress-step { opacity: 0.55; }
.register-progress-step.is-active { color: var(--orange-500); opacity: 1; }
.register-progress-arrow { opacity: 0.4; }
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.role-cards[hidden] { display: none; } /* .role-cards' own `display:grid` would otherwise
out-specificity the UA [hidden] rule and keep the cards visible after JS hides them */
.role-card {
position: relative;
text-align: left;
background: var(--cream-100);
border: 2px solid var(--cream-200);
border-radius: var(--radius-md);
padding: var(--sp-3);
display: flex;
flex-direction: column;
gap: 8px;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.role-card:hover { transform: translateY(-2px); border-color: var(--orange-500); }
.role-card-icon {
width: 52px; height: 52px;
border-radius: 50%;
background: var(--navy-900);
color: var(--orange-500);
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
}
.role-card-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy-900); }
.role-card-desc .en, .role-card-desc .es { font-size: 13px; color: var(--gray-700); }
.role-card-check {
position: absolute;
top: 14px; right: 14px;
width: 22px; height: 22px;
color: var(--orange-500);
opacity: 0;
transform: scale(0.6);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.role-card.is-selected { border-color: var(--orange-500); background: var(--navy-900); }
.role-card.is-selected .role-card-title,
.role-card.is-selected .role-card-desc .en,
.role-card.is-selected .role-card-desc .es { color: var(--white); }
.role-card.is-selected .role-card-icon { background: var(--orange-500); color: var(--navy-900); }
.role-card.is-selected .role-card-check { opacity: 1; transform: scale(1); }
.register-change-role {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-display);
font-weight: 700;
font-size: 12.5px;
color: var(--orange-500);
margin-bottom: var(--sp-3);
}
.register-change-role:hover { color: var(--orange-600); text-decoration: underline; }
.auth-card-title--form { text-align: left; font-size: 20px; margin-bottom: var(--sp-3); }
.register-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.register-form-grid .auth-field { margin-bottom: 0; }
/* Phase 1 (2026-09-01): inline checkbox paired with a select in the same
register-form-grid row (e.g. contractor "Primary Trade" + "seeking
subcontractors") — bottom-align it with the select's own height instead
of top-aligning against empty label space above it. */
.auth-field--checkbox-inline { display: flex; align-items: flex-end; padding-bottom: 2px; }
.auth-field--checkbox-inline .check-option { align-items: flex-start; line-height: 1.35; }
.auth-field--checkbox-inline .check-option input[type="checkbox"] { margin-top: 3px; }
.auth-input-wrap--plain input,
.auth-input-wrap--plain select { padding-left: 14px; }
.auth-input-wrap select {
width: 100%;
appearance: none;
-webkit-appearance: none;
background: var(--white);
border: 1px solid var(--cream-200);
border-radius: var(--radius-sm);
padding: 12px 36px 12px 40px;
font-family: var(--font-body);
font-size: 14px;
color: var(--navy-900);
}
.auth-input-wrap select:focus { outline: 2px solid var(--orange-500); outline-offset: 1px; }
.auth-input-wrap .icon-chevron { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); color: var(--gray-600); pointer-events: none; }
.lang-pref { border: 0; padding: 0; margin: 0 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.lang-pref legend { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--navy-900); padding: 0; margin-bottom: 6px; width: 100%; }
.lang-pref label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--gray-700); cursor: pointer; }
.lang-pref input { accent-color: var(--orange-500); cursor: pointer; }
.auth-terms { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--gray-700); margin: var(--sp-1) 0 var(--sp-3); cursor: pointer; }
.auth-terms input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--orange-500); flex-shrink: 0; cursor: pointer; }
.auth-terms a { color: var(--orange-500); font-weight: 600; }
.auth-terms a:hover { text-decoration: underline; }
.field-error { display: none; color: #c23a3a; font-size: 12px; margin-top: 6px; }
.auth-field.has-error .field-error { display: block; }
.auth-field.has-error input { border-color: #c23a3a; }
.register-success {
display: none;
background: rgba(62, 203, 122, 0.12);
border: 1px solid rgba(62, 203, 122, 0.4);
color: #1f7a44;
border-radius: var(--radius-sm);
padding: var(--sp-2) var(--sp-3);
font-size: 13px;
line-height: 1.5;
margin-top: var(--sp-2);
text-align: center;
}
.register-success.is-visible { display: block; }
.auth-server-error {
display: none;
background: rgba(194, 58, 58, 0.08);
border: 1px solid rgba(194, 58, 58, 0.35);
color: #c23a3a;
border-radius: var(--radius-sm);
padding: var(--sp-2) var(--sp-3);
font-size: 13px;
line-height: 1.5;
margin-top: var(--sp-2);
text-align: center;
}
.auth-server-error.is-visible { display: block; }
/* =========================================================================
CONTACT
Reuses .auth-field / .auth-input-wrap / .register-form-grid / the
.register-success banner from Login/Register. New here: the shorter
hero variant, the two-column contact grid, info cards, and the support
card row.
========================================================================= */
.hero--contact { min-height: 380px; }
.hero--contact .hero-inner { padding-bottom: var(--sp-5); }
.hero--contact .hero-title { text-transform: none; }
.hero--contact .hero-subtitle { max-width: 560px; margin-bottom: 0; }
.auth-input-wrap textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--cream-200);
border-radius: var(--radius-sm);
font-family: var(--font-body);
font-size: 14px;
color: var(--navy-900);
background: var(--white);
resize: vertical;
min-height: 120px;
}
.auth-input-wrap textarea::placeholder { color: var(--gray-600); opacity: 0.7; }
.auth-input-wrap textarea:focus { outline: 2px solid var(--orange-500); outline-offset: 1px; }
.contact-section { background: var(--cream-100); padding-block: var(--sp-6); }
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-4); align-items: start; }
.contact-form-panel { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-4); }
.contact-info-panel { display: flex; flex-direction: column; gap: var(--sp-3); }
.info-card { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--sp-3); }
.info-card-title { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--navy-900); margin-bottom: var(--sp-2); }
.quick-link-list { display: flex; flex-direction: column; gap: 4px; }
.quick-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 4px;
border-top: 1px solid var(--cream-200);
font-family: var(--font-display);
font-weight: 700;
font-size: 14px;
color: var(--navy-900);
}
.quick-link:first-child { border-top: 0; }
.quick-link .icon { color: var(--orange-500); flex-shrink: 0; transition: transform 0.15s ease; }
.quick-link:hover .icon { transform: translateX(3px); }
.quick-link:hover { color: var(--orange-500); }
.info-card--muted { background: var(--cream-200); box-shadow: none; }
.info-card--muted p { font-size: 13px; color: var(--gray-700); }
.support-section { background: var(--white); padding-bottom: var(--sp-6); }
.support-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.support-card { background: var(--cream-100); border-radius: var(--radius-md); padding: var(--sp-3); text-align: center; }
.support-card-icon {
width: 48px; height: 48px;
margin: 0 auto 12px;
border-radius: 50%;
background: var(--navy-900);
color: var(--orange-500);
display: flex;
align-items: center;
justify-content: center;
}
.support-card-title { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--navy-900); margin-bottom: 4px; }
.support-card-desc .en, .support-card-desc .es { font-size: 13px; color: var(--gray-700); }
/* =========================================================================
PROSE SECTION (About / Safety & Compliance — simple centered text block)
========================================================================= */
.prose-section { padding-block: var(--sp-6); background: var(--white); }
.prose-section-head { max-width: 760px; margin: 0 auto var(--sp-4); text-align: center; }
.prose-section-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 28px); color: var(--navy-900); margin-top: 8px; }
.prose-block { max-width: 760px; margin: 0 auto; color: var(--gray-700); font-size: 15.5px; line-height: 1.7; }
.prose-block p { margin-bottom: var(--sp-2); }
.prose-block p:last-child { margin-bottom: 0; }
/* =========================================================================
FAQ ACCORDION (Help Center)
========================================================================= */
.faq-section { padding-block: var(--sp-6); background: var(--cream-100); }
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
background: var(--white);
border: 1px solid var(--cream-200);
border-radius: var(--radius-md);
padding: 4px var(--sp-3);
}
.faq-item[open] { border-color: var(--orange-500); }
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding-block: 16px;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-weight: 700;
font-size: 15px;
color: var(--navy-900);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question .icon-chevron { color: var(--orange-500); flex-shrink: 0; transition: transform 0.2s ease; }
.faq-item[open] .faq-question .icon-chevron { transform: rotate(180deg); }
.faq-answer { padding-bottom: 16px; color: var(--gray-700); font-size: 14px; line-height: 1.65; }
/* =========================================================================
RESPONSIVE
========================================================================= */
/* Laptop */
@media (max-width: 1180px) {
.footer-top { grid-template-columns: 1.4fr 1fr 1fr; row-gap: var(--sp-4); }
}
/* Tablet */
@media (max-width: 960px) {
.main-nav { display: none; }
.nav-toggle { display: block; }
.main-nav.is-open {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--sp-2);
position: fixed;
top: 88px; left: 0; right: 0;
background: var(--navy-900);
padding: var(--sp-3) var(--container-pad) var(--sp-4);
box-shadow: var(--shadow-md);
z-index: 49;
}
.main-nav.is-open .nav-link { text-align: left; }
.brand-logo { height: 104px; }
.main-nav { padding-top: 14px; }
.header-actions { padding-top: 14px; }
.hero-inner { padding-top: 172px; }
.crop-mark-bottom { display: none; } /* one mark reads cleaner once the text column tightens up */
.hero { min-height: 660px; }
.hero-play { display: none; } /* text column dominates this width; avoid overlapping the headline */
.hero-caption { max-width: 320px; bottom: 40px; }
.trust-trades-inner { grid-template-columns: 1fr; }
.trust-panel { padding: 0 0 var(--sp-4); }
.trades-panel { margin-left: 0; padding-left: var(--sp-4); }
.trades-panel::before { clip-path: none; -webkit-clip-path: none; border-radius: var(--radius-md); }
.stat-grid { grid-template-columns: 1fr 1fr; }
.steps-grid { grid-template-columns: 1fr; gap: var(--sp-4); }
.testimonial-inner { grid-template-columns: 140px 1fr; }
.testimonial-rating { grid-column: span 2; border-left: 0; border-top: 1px solid var(--cream-200); padding: var(--sp-3) 0 0; text-align: left; }
.stars { justify-content: flex-start; }
.footer-top { grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: span 2; }
/* Find Workers page components */
.hero--compact { min-height: 0; padding-bottom: var(--sp-4); }
.filter-grid { grid-template-columns: 1fr 1fr; }
.filter-submit { grid-column: span 2; width: 100%; justify-content: center; }
.category-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.browse-trades-head { align-items: flex-start; }
.value-props-inner { flex-direction: column; }
.value-props-intro { flex-basis: auto; }
.value-props-grid { grid-template-columns: 1fr 1fr; flex-basis: auto; width: 100%; }
.value-props-grid.is-three { grid-template-columns: 1fr 1fr; }
/* Find Workers Results page */
.hero--results { min-height: 0; }
.hero--results .hero-inner { padding-bottom: var(--sp-4); }
.results-layout { grid-template-columns: 1fr; }
.sidebar-filters { margin-bottom: var(--sp-3); }
.worker-grid, .worker-grid.is-list { grid-template-columns: repeat(2, 1fr); }
.worker-grid.is-list .worker-card { flex-direction: column; }
.worker-grid.is-list .worker-card-photo { width: 100%; aspect-ratio: 4 / 3.6; }
.results-cta-inner { justify-content: center; text-align: center; }
.results-cta-intro { justify-content: center; text-align: left; }
.results-cta-trust { justify-content: center; }
/* Find Work page */
.hero--jobs { min-height: 0; }
.hero--jobs .hero-inner { padding-bottom: var(--sp-4); }
.hero-badges { gap: var(--sp-3); }
.job-card { flex-wrap: wrap; }
.job-card-photo { width: 120px; }
.job-card-side { flex: 1 1 100%; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; padding-top: var(--sp-2); border-top: 1px solid var(--cream-200); position: static; }
.job-card-bookmark { position: static; order: 3; }
.job-card-sub { margin-top: 0; }
.job-card-apply { width: auto; margin-top: 0; }
.trade-tiles { grid-template-columns: repeat(4, 1fr); }
.results-cta-actions { width: 100%; }
.results-cta-actions .btn { flex: 1; justify-content: center; }
/* Job Detail page */
.job-detail-hero-grid { grid-template-columns: 1fr; }
.job-detail-hero-media { order: -1; aspect-ratio: 16 / 9; }
.job-detail-layout { grid-template-columns: 1fr; }
.job-detail-sidebar { flex-direction: row; flex-wrap: wrap; }
.employer-card, .job-summary-card { flex: 1 1 280px; }
.overview-grid { grid-template-columns: repeat(2, 1fr); }
.similar-jobs-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile landscape (phones only, not tablets). Without this, a phone
rotated sideways (e.g. 844x390, 667x375) falls into the ≤960px tablet
block above and gets the 104px logo sized for an actual tablet — too
small and inconsistent with the larger portrait treatment on what is
still a phone. Scoped by max-height so real tablets in landscape
(height > 500px, e.g. iPad ~1024x768) are unaffected — only short
landscape viewports get this. Plenty of header width is available at
these widths, so no flex-shrink squish risk here (unlike portrait
below); flex-shrink:0 is included purely for consistency/future-proofing. */
@media (max-width: 960px) and (max-height: 500px) {
.header-inner { gap: 14px; }
.header-actions { gap: 8px; }
.header-actions .btn { padding: 8px 14px; }
.brand { flex-shrink: 0; }
.brand-logo { height: 124px; transform: translateX(-16px); }
}
/* Mobile */
@media (max-width: 640px) {
:root { --container-pad: 18px; }
/* Mobile header: previously gave the whole .site-header a translucent
gradient fill once .is-scrolled kicked in (the short viewport means
visitors cross the 40px scroll threshold almost immediately). That
gradient sits behind the entire header — including .brand/.brand-logo
— so once cis-logo.png gained real alpha transparency (2026-08-26 logo
fix), this gradient became visible as a dark box directly behind/around
the logo. The logo and header markup were never at fault; this rule was
painting a background the logo had no way to hide once it was no longer
opaque itself.
Fix: the header itself stays fully transparent on mobile in every state
(default AND scrolled) so the hero/background always shows through the
logo continuously, matching desktop's default (non-scrolled) look. The
only element on the collapsed mobile header that actually needs a dark
backdrop for legibility once scrolled past the hero is the white
hamburger icon (.nav-toggle) — the Sign Up button already has its own
solid button background, and the nav links/lang switch are hidden at
this width until the menu is opened (.main-nav.is-open already has its
own solid navy panel background, untouched below). So the backdrop
moves from the whole header onto just that one icon's small footprint,
well clear of the logo.
Desktop/tablet .site-header.is-scrolled (solid navy, full header) is
untouched — this block only ever applied at this breakpoint. */
.site-header.is-scrolled {
background: none;
box-shadow: none;
}
.site-header.is-scrolled .nav-toggle {
background: rgba(4, 16, 28, 0.55);
border-radius: 8px;
}
/* Logo size on mobile portrait: previously matched desktop's 144px
literally, but that ran into a real layout bug — .brand is a flex
child of .header-inner with the default flex-shrink:1, and at this
width .brand + .header-actions (Sign Up button + hamburger) together
don't fit the available inner width, so the browser was compressing
the logo horizontally while its height stayed pinned at 144px,
warping/squishing the artwork (measured: rendered ~190px wide against
a true, undistorted ~234px for that height). Separately, cis-logo.png
itself has asymmetric transparent padding baked into the file (kept
exactly as-is, per instruction — no crop/regenerate): at native
resolution the visible mark sits ~99px in from the image's left edge
but only ~50px from its right edge. That imbalance is invisible at
desktop's scale/spacing but reads as "logo sits too far right" once
the box is this small.
Fix: lock flex-shrink to 0 so the logo always renders at its true,
undistorted aspect ratio; free the width it needs by tightening (not
removing) the header's own spacing — the gap between logo and
header-actions, the gap inside header-actions, and the Sign Up
button's horizontal padding — then nudge the whole image left via
transform (visual-only; doesn't change flex sizing or hit-testing)
to compensate for the file's own left-heavy padding. Sign Up and the
hamburger stay fully visible and otherwise untouched. 136px is the
largest height that fits with zero forced distortion while keeping
Sign Up in the header at this width — see PROJECT-NOTES.md for the
size math and the tradeoff if more size is wanted later (would mean
giving up the header-level Sign Up button at this breakpoint). */
.header-inner { gap: 10px; }
.header-actions { gap: 8px; padding-top: 18px; }
.header-actions .btn { padding: 10px 12px; }
.brand { flex-shrink: 0; margin-top: -4px; }
.brand-logo { height: 136px; transform: translateX(-22px); }
.hero-inner { padding-top: 208px; padding-bottom: 80px; }
.hero { min-height: 100vh; }
.hero-media-img { object-position: 80% center; }
.hero-gradient { background: linear-gradient(180deg, rgba(4,16,28,0.35) 0%, rgba(4,16,28,0.55) 38%, var(--navy-900) 78%); }
.hero-play { display: none; }
.hero-caption { position: static; margin-top: var(--sp-3); max-width: 100%; }
.crop-mark { display: none; } /* framing accents get cramped at this width; drop them entirely */
.hero-title { font-size: 36px; }
.hero-ctas { flex-direction: column; align-items: stretch; }
.hero-ctas .btn { width: 100%; }
.trade-cards { flex-wrap: wrap; }
.trade-card { flex: 1 1 calc(33.333% - 10px); }
.trades-panel { padding: var(--sp-4) var(--sp-2); }
.testimonial-inner { grid-template-columns: 90px 1fr; gap: var(--sp-2); }
.testimonial-body blockquote p.en, .testimonial-body blockquote p.es { font-size: 17px; }
.cta-band-inner { text-align: center; justify-content: center; }
.cta-title .line-white, .cta-title .line-orange, .cta-subtitle { text-align: center; }
.cta-band-actions { flex-direction: column; width: 100%; }
.cta-band-actions .btn { width: 100%; }
.cta-divider { display: none; }
.footer-top { grid-template-columns: 1fr 1fr; gap: var(--sp-3); padding-block: var(--sp-5) var(--sp-4); }
.footer-brand { grid-column: span 2; }
.footer-bottom-inner { flex-direction: column; align-items: flex-start; }
/* Find Workers page components */
.worker-filters { padding: var(--sp-3); }
.filter-grid { grid-template-columns: 1fr; gap: var(--sp-2); }
.filter-submit { grid-column: span 1; }
.browse-trades-head { flex-direction: column; align-items: flex-start; }
.browse-trades-head .btn { width: 100%; justify-content: center; }
.category-grid { grid-template-columns: 1fr 1fr; }
.value-props-grid { grid-template-columns: 1fr; }
.value-props-grid.is-three { grid-template-columns: 1fr; }
/* Find Workers Results page */
.worker-grid, .worker-grid.is-list { grid-template-columns: 1fr; }
.worker-grid.is-list .worker-card { flex-direction: column; }
.worker-grid.is-list .worker-card-photo { width: 100%; aspect-ratio: 4 / 3.6; }
.results-toolbar { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.results-controls { width: 100%; justify-content: space-between; }
.results-cta-inner { flex-direction: column; align-items: stretch; }
.results-cta-intro { flex-direction: column; text-align: center; }
.results-cta-trust { flex-direction: column; align-items: center; }
.cta-trust-item { flex-direction: column; text-align: center; max-width: 100%; }
/* Find Work page */
.hero-badges { flex-direction: column; gap: 10px; }
.job-card { flex-direction: column; }
.job-card-photo { width: 100%; aspect-ratio: 16 / 9; }
.job-card-side { flex-direction: column; align-items: stretch; text-align: left; }
.job-card-bookmark { align-self: flex-end; order: 0; }
.job-card-apply { width: 100%; }
.trade-tiles { grid-template-columns: repeat(3, 1fr); }
.results-cta-actions { flex-direction: column; width: 100%; }
.results-cta-actions .btn { width: 100%; }
/* Job Detail page */
.job-detail-meta-row { gap: 8px; }
.job-detail-cta-row { flex-direction: column; align-items: stretch; }
.job-detail-cta-row .btn { width: 100%; }
.job-detail-card { padding: var(--sp-3); }
.overview-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.job-detail-sidebar { flex-direction: column; }
.employer-card, .job-summary-card { flex: 1 1 auto; }
.similar-jobs-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
/* Login / Auth page */
.hero--auth .hero-inner { padding-bottom: 140px; }
.auth-section { margin-top: -110px; }
.auth-section--login { padding-top: 24px; }
.auth-card { padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.auth-trust-inner { flex-direction: column; align-items: center; gap: var(--sp-3); }
/* Register page */
.role-cards { grid-template-columns: 1fr; }
.register-form-grid { grid-template-columns: 1fr; }
/* Contact page */
.contact-grid { grid-template-columns: 1fr; }
.support-cards { grid-template-columns: 1fr; }
}
/* ---- Auth-state nav fix: [hidden] must always win over .btn's display:flex ---- */
[hidden] {
display: none !important;
}