/* * NextShift landing page styles. * * Layout uses CSS logical properties (inline/block, inset-inline, margin-inline) * so the whole page mirrors automatically when is set for Hebrew. */ :root { --brand: #2563eb; --brand-dark: #1d4ed8; --brand-deep: #0f2a6b; --teal: #14b8a6; --green: #22c55e; /* Green at reading weight, for text and marks on pale grounds — the value was already hard-coded in the worker tag before it had a name. */ --green-dark: #15803d; /* The two sides as surface tints. Kept as translucent brand rather than baked hexes so they sit correctly on white and on --bg-muted alike. */ --brand-tint: rgba(37, 99, 235, .08); --green-tint: rgba(34, 197, 94, .10); --ink: #0f172a; --ink-soft: #334155; /* One step darker than slate-500: at #64748b this text cleared 4.5:1 on white but dropped to 4.34:1 on --bg-muted and 4.48:1 on --bg-soft, and the site publishes a WCAG 2.0 AA commitment. This clears AA on all three grounds. */ --muted: #5b6a80; --line: #e5e9f2; --bg: #ffffff; --bg-soft: #f5f8ff; --bg-muted: #f1f5f9; --radius: 16px; --radius-lg: 24px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .05); --shadow-md: 0 12px 32px rgba(15, 23, 42, .12); --shadow-lg: 0 30px 60px rgba(15, 42, 107, .25); --grad: linear-gradient(135deg, var(--green) 0%, var(--brand) 60%); --maxw: 1140px; --font: "Inter", "Heebo", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; /* Native ratio of the app screenshots, so nothing gets cropped to fit. */ --screen-ratio: 740 / 1612; /* Sticky header height — anchored sections offset by this so their heading doesn't land underneath it. */ --header-h: 68px; } :lang(he) { --font: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; white-space: nowrap; } .btn:hover { transform: translateY(-1px); } .btn--sm { padding: 9px 16px; font-size: 14px; } .btn--lg { padding: 15px 28px; font-size: 16px; } .btn--primary { background: var(--grad); color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, .28); } .btn--primary:hover { box-shadow: 0 12px 26px rgba(37, 99, 235, .36); } .btn--ghost { background: #fff; color: var(--brand-dark); border-color: var(--line); box-shadow: var(--shadow-sm); } .btn--ghost:hover { border-color: var(--brand); } .btn--light { background: #fff; color: var(--brand-dark); } .btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); } .btn--outline-light:hover { background: rgba(255, 255, 255, .12); } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(12px); border-block-end: 1px solid var(--line); } .site-header__inner { display: flex; align-items: center; gap: 24px; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; } .brand__mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); color: #fff; } .brand__logo { display: block; height: 32px; width: auto; } .brand__text { font-size: 21px; letter-spacing: -.03em; } .brand__next { color: var(--brand); } .brand__shift { color: var(--ink); } .site-nav { display: flex; gap: 28px; margin-inline: auto; font-weight: 500; color: var(--ink-soft); } .site-nav a:hover { color: var(--brand); } .site-header__actions { display: flex; align-items: center; gap: 14px; } .lang-switch { font-weight: 600; font-size: 14px; color: var(--ink-soft); padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); } .lang-switch:hover { border-color: var(--brand); color: var(--brand); } /* On desktop the wrapper is transparent to layout so the nav and actions stay direct flex children of the header row (this also overrides the `hidden` attribute that keeps the drawer collapsed on mobile). */ .site-header__menu { display: contents; } /* Hamburger — only shown on mobile (see responsive section). */ .nav-toggle { display: none; place-items: center; width: 44px; height: 44px; margin-inline-start: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; } .nav-toggle:hover { border-color: var(--brand); } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before { position: absolute; inset-block-start: -6px; inset-inline-start: 0; } .nav-toggle__bars::after { position: absolute; inset-block-start: 6px; inset-inline-start: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); } /* ---------- Hero ---------- */ /* The ground states the thesis: the worker side's green sits at the inline start, the hiring side's blue at the inline end, and the page opens on the space between them. Both fields are pseudo-elements anchored with logical insets rather than background-position percentages, because a percentage is frozen to LTR — the old `at 85%` put the blue behind the copy in Hebrew and behind the devices in English. These mirror with the layout. Note this is deliberately NOT the signature gradient: per the Meeting Rule the green→blue blend stays on the accent phrase and the primary button. Here the two colours share a ground without ever touching. */ .hero { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-soft) 74%, var(--bg) 100%); overflow: hidden; } .hero::before, .hero::after { content: ""; position: absolute; z-index: -1; inset-block-start: -16rem; width: 48rem; height: 48rem; border-radius: 50%; pointer-events: none; } /* Blue opens the page behind the copy — the hiring side is who this page is for — and green sits at the inline end, behind the devices showing the work on offer. Green stays at the inline end in the closing CTA band too, so the same colour does not swap sides between the top and bottom of the page. */ .hero::before { inset-inline-start: -14rem; background: radial-gradient(circle closest-side, rgba(37, 99, 235, .26), transparent 100%); } .hero::after { inset-inline-end: -16rem; background: radial-gradient(circle closest-side, rgba(34, 197, 94, .22), transparent 100%); } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-block: 76px 88px; } .hero__title { text-wrap: balance; } .badge { display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand-dark); background: rgba(37, 99, 235, .1); padding: 7px 14px; border-radius: 999px; margin-block-end: 22px; } /* Pushed up from a 3.6rem ceiling. The hero pairs a ~570px-tall device against a text column that lost its stats block, and the answer to that imbalance is weight in the type rather than filler under the buttons. */ .hero__title { font-size: clamp(2.5rem, 5.4vw, 4rem); font-weight: 800; } .hero__title-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; /* Without this the gradient is measured across the union of both line boxes, so a wrapped accent starts mid-gradient and the second line loses the green end entirely. `clone` gives each line the full green→blue run. */ -webkit-box-decoration-break: clone; box-decoration-break: clone; } .hero__subtitle { font-size: 19px; color: var(--ink-soft); margin-block: 24px 34px; max-width: 48ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; } .hero__stats { display: flex; gap: 36px; margin: 44px 0 0; flex-wrap: wrap; } .stat { margin: 0; } .stat__value { font-size: 28px; font-weight: 800; color: var(--brand-deep); } .stat__label { margin: 2px 0 0; font-size: 14px; color: var(--muted); } /* Hero phones */ /* No min-height: the front device's locked aspect ratio already sets the column's height, and the old 520px floor only ever fought it. */ .hero__visual { position: relative; display: grid; place-items: center; } /* Soft brand glow halo behind the devices */ .hero__visual::before { content: ""; position: absolute; z-index: 0; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(37, 99, 235, .22), rgba(34, 197, 94, .14) 45%, transparent 70%); filter: blur(36px); animation: heroGlow 9s ease-in-out infinite; } /* The device shell. Sized through custom properties so the hero and the showcase render the same object at two scales instead of the showcase falling back to a flat border — one product, one level of finish. */ .phone { --phone-w: 256px; --phone-r: 48px; --phone-screen-r: 42px; --phone-lift: 40px; position: relative; width: var(--phone-w); border-radius: var(--phone-r); /* Brushed-silver bezel */ background: linear-gradient(135deg, #ffffff 0%, #d8dde6 22%, #aeb6c4 50%, #d8dde6 78%, #ffffff 100%); padding: 7px; box-shadow: 0 0 0 1px rgba(148, 163, 184, .55), 0 2px 3px rgba(255, 255, 255, .9) inset, 0 -2px 3px rgba(100, 116, 139, .35) inset, 0 var(--phone-lift) calc(var(--phone-lift) * 1.8) rgba(15, 42, 107, .30), 0 calc(var(--phone-lift) * .4) calc(var(--phone-lift) * .75) rgba(15, 23, 42, .20); } /* Inner black screen edge */ .phone__screen { position: relative; border-radius: var(--phone-screen-r); overflow: hidden; background: #05070d; box-shadow: 0 0 0 2px #05070d; } /* Screen image — the screenshots' own ratio, so the app UI is never cropped. No CSS notch: these captures carry the real status bar and dynamic island, and drawing a second notch over a real one reads as a mistake. */ .phone img { display: block; width: 100%; height: auto; aspect-ratio: var(--screen-ratio); object-fit: cover; object-position: top center; border-radius: var(--phone-screen-r); } /* Light reflection sweeping across the screen */ .phone__screen::after { content: ""; position: absolute; z-index: 4; inset: 0; border-radius: var(--phone-screen-r); pointer-events: none; background: linear-gradient(125deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 100%); } .phone--front { z-index: 2; transform: rotate(-4deg) translateY(0); animation: phoneFloat 7s ease-in-out infinite; } .phone--back { position: absolute; z-index: 1; inset-inline-end: 0; inset-block-start: 4%; transform: rotate(7deg) scale(.86); opacity: .98; filter: saturate(.96); animation: phoneFloatBack 7s ease-in-out infinite; } @keyframes phoneFloat { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-14px); } } @keyframes phoneFloatBack { 0%, 100% { transform: rotate(7deg) scale(.86) translateY(0); } 50% { transform: rotate(7deg) scale(.86) translateY(-10px); } } @keyframes heroGlow { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } } @media (prefers-reduced-motion: reduce) { .phone--front, .phone--back, .hero__visual::before { animation: none; } } /* ---------- Generic section ---------- */ .section { padding-block: 84px; } /* In-page anchors clear the sticky header instead of scrolling their heading underneath it. */ .section[id], .cta-band[id] { scroll-margin-block-start: calc(var(--header-h) + 20px); } .section--muted { background: var(--bg-muted); } .section__head { text-align: center; max-width: 640px; margin-inline: auto; margin-block-end: 52px; } .section__title { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; } .section__subtitle { font-size: 18px; color: var(--muted); margin-block-start: 14px; } /* ---------- Audiences ---------- */ /* The hiring side leads: it is the marketplace's bottleneck and the side this page is measured on, so it takes the wider column. */ .audience-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: 28px; } .audience-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; /* The band runs edge to edge, so the padding moves inward to __inner. */ overflow: hidden; } .audience-card--worker { border-color: rgba(34, 197, 94, .35); } /* Side identity as structure, not as a floating pill: a tinted header band that claims the whole top of the card. Blue card = hiring side, green card = worker side, legible before any copy is read. */ .audience-card__band { padding: 15px 36px; background: var(--brand-tint); border-block-end: 1px solid var(--line); } .audience-card--worker .audience-card__band { background: var(--green-tint); border-block-end-color: rgba(34, 197, 94, .28); } .audience-card__tag { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-dark); } .audience-card--worker .audience-card__tag { color: var(--green-dark); } .audience-card__inner { flex: 1; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 36px 36px; } .audience-card__title { font-size: 24px; margin-block-end: 12px; } .audience-card__body { color: var(--ink-soft); margin: 0 0 20px; } .check-list { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; } .check-list li { position: relative; padding-inline-start: 30px; color: var(--ink-soft); } .check-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; /* Optically centred on the first line (1.6 leading vs the 20px mark). */ inset-block-start: 3px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; /* The mark takes the colour of the side it belongs to — blue on the hiring card, green on the worker card. Both were green before, which quietly contradicted the Side Rule the section exists to demonstrate. */ background: var(--brand); border-radius: 50%; } .audience-card--worker .check-list li::before { background: var(--green); } .audience-card .btn { margin-block-start: auto; } /* ---------- Steps ---------- */ /* Three steps are a sequence, so they are drawn as one — a rule threading the numbers instead of three cards sitting near each other. Dropping the card chrome also breaks the page's run of near-identical bordered grids and lets this section read at a different density from its neighbours. */ .steps { --step-gap: 28px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--step-gap); } /* The spine, ending exactly on the centres of the outer numerals: half a column in from each edge, which is (100% − both gaps) ÷ 3 ÷ 2. Derived rather than a tuned percentage so it stays aligned at every container width. The fade is symmetric so it reads identically LTR and RTL — a directional gradient would run backwards in Hebrew. */ .steps::before { content: ""; position: absolute; inset-block-start: 27px; inset-inline: calc((100% - 2 * var(--step-gap)) / 6); height: 2px; background: linear-gradient(90deg, transparent, var(--line) 10%, var(--line) 90%, transparent); } .step { position: relative; text-align: center; padding-inline: 12px; } .step__num { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-inline: auto; margin-block-end: 20px; font-size: 22px; font-weight: 800; color: #fff; background: var(--grad); border-radius: 50%; /* Knockout ring in the band colour, so the spine passes behind the numeral rather than touching it. A mask, not elevation. */ box-shadow: 0 0 0 10px var(--bg-muted); } .step__title { font-size: 19px; margin-block-end: 8px; } .step__body { color: var(--ink-soft); margin: 0; max-width: 34ch; margin-inline: auto; } /* ---------- Features ---------- */ /* Four tiles across at 264px each made these read as filler between the sections that mattered. Rebuilt as a 2×2 list ruled by hairlines: no card chrome, twice the room, and the icon set beside its text rather than stacked above it, which reads as a specification rather than as four more boxes. */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .feature { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 32px 40px 34px; border-block-start: 1px solid var(--line); } /* The rule between the two columns, on the inline-start item of each row. */ .feature:nth-child(odd) { border-inline-end: 1px solid var(--line); } .feature:nth-child(odd) { padding-inline-start: 0; } .feature:nth-child(even) { padding-inline-end: 0; } .feature__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--brand-tint); color: var(--brand); } .icon { display: block; width: 22px; height: 22px; } .feature__icon .icon { width: 26px; height: 26px; } .feature__title { font-size: 20px; margin-block-end: 10px; } .feature__body { color: var(--ink-soft); margin: 0; max-width: 42ch; } /* ---------- Showcase ---------- */ .showcase__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .showcase__text .section__subtitle { margin-inline: 0; } .showcase__shots { display: flex; gap: 28px; justify-content: center; align-items: start; } .shot { margin: 0; text-align: center; } /* Both shots share one ratio so the pair reads as a matched set rather than two screenshots that happened to be different heights. Sizing and shadow now come from the shared .phone shell — see .phone--shot. */ .phone--shot { --phone-w: 232px; --phone-r: 44px; --phone-screen-r: 38px; --phone-lift: 22px; margin-inline: auto; } .shot figcaption { margin-block-start: 18px; font-size: 14px; font-weight: 600; color: var(--muted); } .shot:nth-child(1) { transform: translateY(14px) rotate(-2deg); } .shot:nth-child(2) { transform: translateY(-14px) rotate(2deg); } /* ---------- Testimonials ---------- */ /* The published count is whatever the back office has approved, so the section has to look composed at any number. Three or more flow into a column wall, which packs unequal-length quotes tightly and never leaves the stranded, half-empty centred last row that wrapping produced at five. */ .testimonial-grid--wall { columns: 3; column-gap: 24px; } /* One or two quotes would look marooned in a three-column wall, so they stay a centred row at their natural width. */ .testimonial-grid--few { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; } .testimonial-grid--few .testimonial { flex: 0 1 348px; } .testimonial { break-inside: avoid; display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 28px 26px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .testimonial-grid--wall .testimonial { margin-block-end: 24px; } .testimonial__quote { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); } /* Logical quotes, so the mark that opens the quote is the one that renders at the start of the line in either direction. Hebrew takes straight marks — the English curly pair points the wrong way in an RTL line. */ .testimonial__quote { quotes: "\201C" "\201D"; } :lang(he) .testimonial__quote { quotes: "\0022" "\0022"; } .testimonial__quote::before { content: open-quote; color: var(--brand); font-weight: 800; } .testimonial__quote::after { content: close-quote; color: var(--brand); font-weight: 800; } .testimonial__person { display: flex; align-items: center; gap: 14px; margin-block-start: auto; } .testimonial__avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; } .testimonial__avatar--initials { display: grid; place-items: center; background: var(--grad); color: #fff; font-weight: 700; font-size: 18px; } .testimonial__meta { display: flex; flex-direction: column; } .testimonial__name { font-weight: 700; color: var(--ink); } .testimonial__role { font-size: 14px; color: var(--muted); } /* ---------- CTA band ---------- */ /* The page's terminal statement, and the one legitimate large field of navy. The green field is anchored with a logical inset for the same reason as the hero: a background-position percentage does not mirror, so in Hebrew the green used to sit on the opposite side from where the hero put it. */ .cta-band { position: relative; isolation: isolate; background: linear-gradient(120deg, var(--brand-deep), var(--brand-dark)); color: #fff; overflow: hidden; } /* Pulled up so the glow crowns the band instead of passing behind the centred copy: green over the blue end of the gradient lifts the ground enough to drag secondary text under 4.5:1, and this band carries the page's closing message. */ .cta-band::before { content: ""; position: absolute; z-index: -1; inset-block-start: -78%; inset-inline-end: -9rem; width: 44rem; height: 44rem; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(34, 197, 94, .38), transparent 100%); pointer-events: none; } .cta-band__inner { text-align: center; padding-block: 92px; } .cta-band__title { font-size: clamp(2rem, 3.8vw, 2.9rem); font-weight: 800; text-wrap: balance; } .cta-band__subtitle { font-size: 19px; /* Tinted from the band's own ground rather than dropped to a flat opacity, so the secondary line holds above 4.5:1 across the whole gradient — including where the green field lightens it. */ color: #e4edff; margin-block: 18px 34px; max-width: 46ch; margin-inline: auto; } .cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- Store badges ---------- */ .store-badges { display: flex; gap: 14px; flex-wrap: wrap; } .store-badges--center { justify-content: center; margin-block-start: 30px; } .store-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; min-width: 168px; border-radius: 12px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, .25); text-decoration: none; transition: transform .15s ease, background .15s ease; } .store-badge:hover { transform: translateY(-2px); background: #1a1a1a; } .store-badge__icon { width: 26px; height: 26px; flex-shrink: 0; } .store-badge__text { display: flex; flex-direction: column; line-height: 1.15; text-align: start; } .store-badge__text small { font-size: 11px; opacity: .85; } .store-badge__text strong { font-size: 17px; font-weight: 600; } /* ---------- Footer ---------- */ .site-footer { background: #0b1220; color: #cbd5e1; padding-block: 52px 28px; } .site-footer__inner { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-block-end: 28px; border-block-end: 1px solid rgba(255, 255, 255, .1); } .brand__badge { display: inline-flex; align-items: center; padding: 10px 16px; background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); } .brand--footer .brand__logo { height: 30px; } .site-footer__tagline { margin: 10px 0 0; color: #94a3b8; } .site-footer__links { display: flex; gap: 24px; flex-wrap: wrap; align-items: center; } .site-footer__links a:hover { color: #fff; } .site-footer__social { display: inline-flex; align-items: center; } .site-footer__social svg { display: block; } /* Shares the tagline's grey: #64748b only reached 3.97:1 on the Midnight ground. Size and the divider above already separate this from the tagline, so it doesn't need a fourth grey of its own. */ .site-footer__legal { margin-block-start: 22px; font-size: 14px; color: #94a3b8; } /* ---------- Auth (sign in) ---------- */ .auth { min-height: 100vh; display: grid; place-items: center; padding: 40px 24px; background: radial-gradient(1100px 480px at 85% -10%, rgba(37, 99, 235, .12), transparent 60%), radial-gradient(800px 400px at 0% 0%, rgba(34, 197, 94, .10), transparent 55%), var(--bg-soft); } .auth__card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 40px; } .auth__brand { font-size: 0; margin-block-end: 24px; } .auth__title { font-size: 26px; font-weight: 800; } .auth__subtitle { color: var(--muted); margin-block: 8px 26px; } .auth__flash { border-radius: 12px; padding: 12px 16px; font-size: 14px; font-weight: 500; margin-block-end: 18px; } .auth__flash--alert { color: #b91c1c; background: rgba(239, 68, 68, .1); } .auth__flash--notice { color: #15803d; background: rgba(34, 197, 94, .12); } .auth__form { display: grid; gap: 18px; } .field { display: grid; gap: 7px; } .field__label { font-size: 14px; font-weight: 600; color: var(--ink-soft); } .field__input { width: 100%; font: inherit; color: var(--ink); padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--bg-soft); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; } .field__input::placeholder { color: var(--muted); } .field__input:focus { outline: none; background: #fff; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .auth__submit { width: 100%; margin-block-start: 6px; } /* ---------- Contact form ---------- */ .contact-form { display: grid; gap: 18px; margin-block-start: 28px; } .contact-form textarea.field__input { resize: vertical; min-height: 130px; } .contact-form .btn { justify-self: start; } .contact-form__errors { margin: 0; padding: 14px 18px; padding-inline-start: 34px; border-radius: 12px; background: rgba(239, 68, 68, .1); color: #b91c1c; font-size: 14px; font-weight: 500; display: grid; gap: 4px; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 68px; } /* No auto margin here: the hero text is start-aligned, so centring the subtitle's box pulls it out of line with the heading above it. */ .audience-grid, .steps, .showcase__inner { grid-template-columns: 1fr; } .showcase__inner { gap: 40px; } /* Stacked, the sequence becomes a timeline: the numerals move to a column at the inline start and the spine runs down through them. Keeping the centred desktop arrangement would have dragged the rule straight through the middle of every line of copy. */ .steps { gap: 0; } .steps::before { inset-block: 28px 28px; /* Centre of the 56px numeral column. */ inset-inline-start: 27px; inset-inline-end: auto; width: 2px; height: auto; background: linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent); } .step { display: grid; grid-template-columns: 56px 1fr; column-gap: 20px; text-align: start; padding-inline: 0; padding-block-end: 32px; } .step__num { grid-row: 1 / span 2; margin-inline: 0; margin-block-end: 0; } .step__title { align-self: center; margin-block-end: 6px; } .step__body { grid-column: 2; margin-inline: 0; max-width: none; } .step:last-child { padding-block-end: 0; } .testimonial-grid--wall { columns: 2; } } @media (max-width: 640px) { /* ---- Mobile nav drawer ---- */ .nav-toggle { display: inline-grid; } .site-header__menu { display: flex; flex-direction: column; align-items: stretch; gap: 18px; position: absolute; inset-inline: 0; inset-block-start: 100%; background: #fff; border-block-end: 1px solid var(--line); box-shadow: var(--shadow-md); padding: 20px 24px 26px; } .site-header__menu[hidden] { display: none; } .site-header { position: sticky; } .site-nav { flex-direction: column; gap: 4px; margin-inline: 0; font-size: 17px; } .site-nav a { padding-block: 10px; border-block-end: 1px solid var(--line); } .site-header__actions { flex-direction: column; align-items: stretch; gap: 12px; } .site-header__actions .lang-switch { text-align: center; } .site-header__actions .btn { width: 100%; } /* Single column: the vertical rule between the pairs has nothing to divide, and every row keeps only its own top hairline. */ .feature-grid { grid-template-columns: 1fr; } .feature { padding: 26px 0 28px; gap: 16px; } .feature:nth-child(odd) { border-inline-end: 0; } .feature__body { max-width: none; } /* Two full-width pills read as a deliberate stack; left to wrap they step raggedly against the start edge at different widths. */ .hero__cta { flex-direction: column; align-items: stretch; } .hero__stats { gap: 24px; } .section { padding-block: 60px; } .cta-band__inner { padding-block: 68px; } .audience-card__band { padding-inline: 26px; } .audience-card__inner { padding: 28px 26px 30px; } .phone--shot { --phone-w: 158px; --phone-r: 30px; --phone-screen-r: 26px; --phone-lift: 14px; } .showcase__shots { gap: 16px; } .testimonial-grid--wall { columns: 1; } } /* ===================================================================== Accessibility (IS 5568 / WCAG 2.0 AA) ===================================================================== */ /* Visible keyboard focus for every interactive element. */ :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Skip-to-content link — hidden until focused via keyboard. */ .skip-link { position: fixed; inset-block-start: 12px; inset-inline-start: 12px; z-index: 1000; padding: 10px 18px; background: var(--brand-dark); color: #fff; font-weight: 600; border-radius: 10px; box-shadow: var(--shadow-md); transform: translateY(-160%); transition: transform .18s ease; } .skip-link:focus { transform: translateY(0); } /* ---------- Toolbar widget ---------- */ .a11y { position: fixed; inset-block-end: 18px; inset-inline-start: 18px; z-index: 900; } .a11y__toggle { display: grid; place-items: center; width: 54px; height: 54px; border: 2px solid #fff; border-radius: 50%; background: var(--brand-dark); color: #fff; cursor: pointer; box-shadow: var(--shadow-md); transition: transform .15s ease, background .15s ease; } .a11y__toggle:hover { transform: scale(1.06); background: var(--brand); } .a11y__panel { position: absolute; inset-block-end: calc(100% + 12px); inset-inline-start: 0; width: 280px; max-width: calc(100vw - 36px); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 18px; } .a11y__panel[hidden] { display: none; } .a11y__head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 14px; } .a11y__title { font-size: 17px; font-weight: 800; } .a11y__close { width: 32px; height: 32px; font-size: 22px; line-height: 1; border: none; background: var(--bg-muted); color: var(--ink-soft); border-radius: 8px; cursor: pointer; } .a11y__close:hover { background: var(--line); } .a11y__fontrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-block-end: 14px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; } .a11y__fontlabel { font-size: 14px; font-weight: 600; color: var(--ink-soft); } .a11y__fontbtn { min-width: 40px; height: 36px; font-size: 16px; font-weight: 800; border: 1px solid var(--line); background: #fff; color: var(--brand-dark); border-radius: 8px; cursor: pointer; } .a11y__fontbtn:hover { border-color: var(--brand); } .a11y__options { display: grid; gap: 8px; } .a11y__option { width: 100%; text-align: start; font: inherit; font-size: 14px; font-weight: 600; padding: 11px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); border-radius: 10px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .a11y__option:hover { border-color: var(--brand); } .a11y__option[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); } .a11y__reset { width: 100%; margin-block-start: 12px; font: inherit; font-size: 14px; font-weight: 700; padding: 11px 14px; border: 1px solid var(--line); background: var(--bg-muted); color: var(--ink); border-radius: 10px; cursor: pointer; } .a11y__reset:hover { background: var(--line); } .a11y__statement-link { display: block; text-align: center; margin-block-start: 12px; font-size: 13px; font-weight: 600; color: var(--brand-dark); text-decoration: underline; } /* ---------- Text-size zoom ---------- */ html.a11y-zoomed .site-header, html.a11y-zoomed main, html.a11y-zoomed .site-footer { zoom: var(--a11y-zoom, 1); } /* ---------- High contrast ---------- */ html.a11y-contrast, html.a11y-contrast body { background: #000 !important; } html.a11y-contrast *:not(.a11y__toggle svg *) { background-color: transparent !important; background-image: none !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: #fff !important; } html.a11y-contrast a, html.a11y-contrast a * { color: #ff0 !important; -webkit-text-fill-color: #ff0 !important; } html.a11y-contrast .btn, html.a11y-contrast .a11y__toggle { border: 2px solid #fff !important; } /* ---------- Grayscale ---------- */ html.a11y-grayscale { filter: grayscale(100%); } /* ---------- Highlight links ---------- */ html.a11y-highlight-links a { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px dashed currentColor; outline-offset: 2px; } /* ---------- Readable font ---------- */ html.a11y-readable-font, html.a11y-readable-font * { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; letter-spacing: normal !important; } /* ---------- Reduced motion ---------- */ html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---------- Large cursor ---------- */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' stroke='%23fff' stroke-width='1' d='M5 2l14 11-6 .9 3.4 6.6-2.7 1.4L10.3 15 5 19z'/%3E%3C/svg%3E") 4 2, auto !important; } /* ---------- Legal / statement page ---------- */ .legal { padding-block: 56px 72px; background: var(--bg-soft); } .legal__inner { max-width: 760px; } .legal__title { font-size: clamp(1.8rem, 3.4vw, 2.4rem); font-weight: 800; } .legal__updated { color: var(--muted); font-size: 14px; margin-block: 8px 0; } .legal__section { margin-block-start: 32px; } .legal__section p { color: var(--ink-soft); margin-block: 0 14px; } .legal__heading { font-size: 21px; font-weight: 800; margin-block-end: 12px; } .legal__list { margin: 0 0 14px; padding-inline-start: 22px; display: grid; gap: 8px; color: var(--ink-soft); } .legal__contact { margin: 0 0 14px; display: grid; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .legal__contact div { display: flex; gap: 8px; flex-wrap: wrap; } .legal__contact dt { font-weight: 700; color: var(--ink); margin: 0; } .legal__contact dd { margin: 0; color: var(--ink-soft); } .legal__contact a { color: var(--brand-dark); text-decoration: underline; } /* ---------- 404 page ---------- */ .error-page { padding-block: 64px 88px; background: var(--bg-soft); text-align: center; } .error-page__inner { max-width: 620px; display: grid; justify-items: center; } .error-page__code { margin: 0; font-size: clamp(6rem, 18vw, 10rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .error-page__heading { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 800; margin-block-start: 8px; } .error-page__body { color: var(--ink-soft); margin-block: 14px 0; max-width: 52ch; } .error-schedule { width: 100%; max-width: 420px; margin-block-start: 28px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; text-align: start; } .error-schedule__heading { margin: 0; padding: 12px 18px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--bg-muted); border-block-end: 1px solid var(--line); } .error-schedule__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; font-weight: 600; } .error-schedule__row + .error-schedule__row { border-block-start: 1px solid var(--line); } a.error-schedule__row:hover { background: var(--bg-soft); } .error-schedule__row--missing { background: #fff7f7; } .error-schedule__status { font-size: 13px; font-weight: 700; white-space: nowrap; } .error-schedule__status--in { color: var(--green); } .error-schedule__status--out { color: #dc2626; } .error-page__cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-block-start: 28px; } /* ===================================================================== Audience landing pages (/for-businesses, /for-workers) ===================================================================== Two pages, one sheet. The Side Rule is carried by a single token swap on the page wrapper: `--side` is the side the page is speaking to, `--other` is the side it is speaking about. Everything below reads those, so the worker page is the hiring page with the two colours exchanged and nothing else re-authored. The signature gradient does not appear in either hero. On the home page it is right — that page is about both sides at once — but a page arguing one side ends its headline in that side's own colour, which leaves the gradient free to mean exactly one thing here: the seam in "the meeting", the single place on the page where the two sides touch. ===================================================================== */ .side-page { --side: var(--brand); --side-dark: var(--brand-dark); --side-tint: var(--brand-tint); --side-wash: rgba(37, 99, 235, .26); --other: var(--green); --other-dark: var(--green-dark); --other-tint: var(--green-tint); } .side-page--worker { --side: var(--green); --side-dark: var(--green-dark); --side-tint: var(--green-tint); --side-wash: rgba(34, 197, 94, .24); --other: var(--brand); --other-dark: var(--brand-dark); --other-tint: var(--brand-tint); } /* ---------- Hero ---------- */ /* One colour field, not two. The home hero puts blue at the inline start and green at the inline end because it introduces a marketplace; these pages are addressed to one side, so the ground carries only that side's wash. */ .side-hero { position: relative; isolation: isolate; background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg-soft) 76%, var(--bg) 100%); overflow: hidden; } .side-hero::before { content: ""; position: absolute; z-index: -1; inset-block-start: -17rem; inset-inline-start: -13rem; width: 46rem; height: 46rem; border-radius: 50%; background: radial-gradient(circle closest-side, var(--side-wash), transparent 100%); pointer-events: none; } .side-hero__inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; padding-block: 76px 88px; } .side-hero__title { font-size: clamp(2.25rem, 4.9vw, 3.45rem); font-weight: 800; text-wrap: balance; } /* Flat side colour where the home page uses the gradient — see the note above. */ .side-hero__title-accent { color: var(--side-dark); } .side-hero__subtitle { font-size: 19px; color: var(--ink-soft); margin-block: 24px 34px; max-width: 46ch; } /* ---------- The proximity field ---------- */ /* You at the centre, the other side around you, ordered by distance. The rings and the pulse are your own reach, so they take `--side`; every chip in the field is someone from the other side, so they take `--other`. */ .field { margin: 0; display: grid; justify-items: center; gap: 20px; } .field__plot { position: relative; width: 100%; max-width: 460px; aspect-ratio: 1; display: grid; place-items: center; } .field__rings { position: absolute; inset: 0; width: 100%; height: 100%; } .field__rings circle { fill: none; stroke: var(--side); stroke-width: .45; opacity: .42; } /* The innermost ring sits directly behind the marker and its label, so it steps back rather than competing with them. */ .field__rings circle:last-child { opacity: .22; } /* The page's one authored motion moment: a shift going out to everyone in range. It starts and ends invisible, so with animation suppressed — by the OS preference or by the site's own accessibility widget, which zeroes every duration — the element simply never appears. */ .field__ping { grid-area: 1 / 1; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--side); opacity: 0; pointer-events: none; animation: fieldPing 4.8s cubic-bezier(.16, .7, .3, 1) infinite; } @keyframes fieldPing { 0% { transform: scale(.3); opacity: 0; } 14% { opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .field__ping { animation: none; } } /* Grid-centred rather than translated: a percentage transform would have to be negated by hand in RTL, and `place-items` needs no direction at all. */ .field__you { grid-area: 1 / 1; z-index: 3; margin: 0; display: grid; justify-items: center; gap: 10px; text-align: center; } .field__you-dot { width: 18px; height: 18px; border-radius: 50%; background: var(--side); /* Same colour as the fill, so it is invisible here — but the accessibility widget's high-contrast mode strips background-color from real elements (it cannot reach pseudo-elements, which is why the chips' pin heads survive it). Without a border the marker the whole field is centred on simply disappeared; with one it becomes a white ring instead. */ border: 2px solid var(--side); /* Knockout ring in the hero's own ground, so the pulse passes behind the marker rather than touching it. */ box-shadow: 0 0 0 6px rgba(255, 255, 255, .92), 0 0 0 7px var(--side-tint), 0 6px 16px rgba(15, 42, 107, .22); } .field__you-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--side-dark); } .field__pins { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; list-style: none; } /* Bounded on BOTH inline edges rather than anchored on one. A single inset only fixes the corner the chip starts from and lets it grow toward the centre, which is exactly what put the nearest chip on top of the "you" marker — in Hebrew first, where the growth direction reverses, and then everywhere once the worker chips grew a third line. Two logical insets make the box a reserved lane that cannot reach the middle whatever the copy does, and the grid inside lets the chip still size to its own content within that lane. The three lanes are ordered by their distance from the centre, so the chip labelled nearest really is the nearest one on screen. */ .field__pin { position: absolute; display: grid; justify-items: start; } .field__pin--a { inset-block-start: 18%; inset-inline-start: 58%; inset-inline-end: -3%; } .field__pin--b { inset-block-start: 70%; inset-inline-start: -3%; inset-inline-end: 57%; } .field__pin--c { inset-block-start: 2%; inset-inline-start: 1%; inset-inline-end: 56%; } .field__chip { position: relative; display: grid; gap: 4px; padding: 11px 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm); } /* The pin head itself, sitting on the chip's leading corner. */ .field__chip::before { content: ""; position: absolute; inset-block-start: -5px; inset-inline-start: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--other); box-shadow: 0 0 0 3px var(--bg); } .field__pin--a .field__chip { border-color: var(--other); box-shadow: var(--shadow-md); } .field__role { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--ink); } .field__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; } .field__pay { font-weight: 700; color: var(--other-dark); } .field__dist { color: var(--muted); font-variant-numeric: tabular-nums; } .field__near { justify-self: start; margin-block-start: 3px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--other-dark); background: var(--other-tint); } .field__caption { max-width: 44ch; text-align: center; font-size: 13px; line-height: 1.6; color: var(--muted); } /* ---------- One card, up close ---------- */ .side-card__inner { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; } /* The worker page leads with the screen and explains after it; the hiring page has to explain first, because a hirer is looking at somebody else's phone. */ .side-card--shot-first .side-card__inner { grid-template-columns: .96fr 1.04fr; } .side-card__text .section__subtitle { max-width: 46ch; } .side-card__shot { margin: 0; } .side-card__shot figcaption { max-width: 34ch; margin: 18px auto 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); } /* The same device shell as the hero and the showcase, one size up and still. The field is already moving; a second animation would only compete. */ .phone--still { --phone-w: 268px; --phone-r: 50px; --phone-screen-r: 44px; --phone-lift: 34px; margin-inline: auto; } /* What is printed on the card — a specification, ruled like one, so it does not read as another checklist of benefits. */ .spec-list { list-style: none; margin: 30px 0 0; padding: 0; display: grid; } .spec-list li { position: relative; padding-block: 14px; padding-inline-start: 34px; color: var(--ink-soft); border-block-start: 1px solid var(--line); } .spec-list li:last-child { border-block-end: 1px solid var(--line); } .spec-list li::before { content: ""; position: absolute; inset-inline-start: 0; /* Optically on the first line: 14px padding + half of a 1.6-leading line. */ inset-block-start: 26px; width: 18px; height: 2px; border-radius: 999px; background: var(--side); } /* The shared feature row hard-codes its icon to brand blue, which would have quietly broken the Side Rule on the worker page. */ .side-page .feature__icon { background: var(--side-tint); color: var(--side-dark); } /* ---------- The meeting ---------- */ /* The one place on the page where the two sides touch, and therefore the only place the signature gradient is allowed to appear — as the seam itself. */ .meeting__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; /* Narrower than the container on purpose: at full width the two lists sit at opposite edges and the seam between them stops reading as a meeting. */ max-width: 900px; margin-inline: auto; } .meeting__col { padding: 34px 40px 38px; } .meeting__seam { width: 3px; background: var(--grad); } .meeting__who { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-block-end: 20px; } .meeting__col--mine .meeting__who { color: var(--side-dark); } .meeting__col--theirs .meeting__who { color: var(--other-dark); } .meeting__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: meet; } /* Numbered because the order is the point — you post before you choose, and you choose before you pay — not as decoration on a set of peers. */ .meeting__steps li { position: relative; padding-inline-start: 34px; color: var(--ink-soft); counter-increment: meet; } .meeting__steps li::before { content: counter(meet); position: absolute; inset-inline-start: 0; inset-block-start: 2px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 800; color: #fff; } /* The reading-weight variants, not the bright ones: white on --green is far under 4.5:1, and these numerals are text. */ .meeting__col--mine .meeting__steps li::before { background: var(--side-dark); } .meeting__col--theirs .meeting__steps li::before { background: var(--other-dark); } .meeting__note { max-width: 70ch; margin: 30px auto 0; text-align: center; font-size: 14px; line-height: 1.75; color: var(--muted); } /* ---------- Crossover to the other side ---------- */ /* Deliberately in the other side's colour: it is a door out of this page, and it should look like it belongs to where it leads. */ .crossover { background: var(--bg); border-block-start: 1px solid var(--line); } .crossover__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px 16px; padding-block: 36px; } .crossover__text { margin: 0; font-size: 16px; color: var(--ink-soft); } .crossover__link { font-size: 16px; font-weight: 700; color: var(--other-dark); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; text-decoration-color: var(--other-tint); transition: text-decoration-color .15s ease; } .crossover__link:hover { text-decoration-color: var(--other); } /* ---------- Active nav item ---------- */ /* Kept achromatic on purpose: the header sits outside the page wrapper and has no side of its own, and colouring it would put one side's colour on a piece of chrome shared by both pages. `aria-current` carries the same state for a screen reader. */ .site-nav a[aria-current="page"] { position: relative; color: var(--ink); font-weight: 700; } .site-nav a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -7px; height: 2px; border-radius: 999px; background: currentColor; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .side-hero__inner, .side-card__inner, .side-card--shot-first .side-card__inner { grid-template-columns: 1fr; } .side-hero__inner { gap: 44px; padding-block: 56px 68px; } .side-card__inner { gap: 40px; } /* Stacked, the heading has to come first whichever page this is, or the section opens on an unexplained screenshot. */ .side-card--shot-first .side-card__text { order: 1; } .side-card--shot-first .side-card__shot { order: 2; } .meeting__pair { grid-template-columns: 1fr; } .meeting__seam { width: auto; height: 3px; } } @media (max-width: 640px) { .field__plot { max-width: 330px; } /* Every lane is bounded inside the plot at this width: the old -6% lanes hung past the container gutter, where the hero's own overflow:hidden sheared the chip's border off. The lowest chip also moves to the inline-END half, so it does not sit under the accessibility button fixed to the opposite corner. Lane order still runs nearest-to-centre: a 29, b 39, c 49. */ .field__pin--a { inset-block-start: 15%; inset-inline-start: 52%; inset-inline-end: 0; } .field__pin--b { inset-block-start: 74%; inset-inline-start: 44%; inset-inline-end: 0; } .field__pin--c { inset-block-start: 0; inset-inline-start: 0; inset-inline-end: 48%; } .field__chip { padding: 9px 11px; border-radius: 12px; gap: 3px; } .field__role { font-size: 14px; } .field__meta { font-size: 12px; } .field__near { font-size: 11px; padding: 2px 7px; letter-spacing: .05em; } .meeting__col { padding: 26px 24px 28px; } .phone--still { --phone-w: 208px; --phone-r: 40px; --phone-screen-r: 34px; --phone-lift: 20px; } /* The badges are the page's only action; at this width they get the full measure instead of wrapping into a ragged two-row block. */ .side-hero .store-badges { display: grid; gap: 12px; } .side-hero .store-badge { min-width: 0; justify-content: center; } .crossover__inner { flex-direction: column; text-align: center; gap: 10px; padding-block: 30px; } /* The drawer already rules every row with a border; a second underline underneath the active one would sit on top of it. */ .site-nav a[aria-current="page"]::after { display: none; } } /* ---------- Trust: one lead, three supports ---------- */ /* Four equal tiles were the shape the pages set out to refuse. Instead the one mechanism each side asks about first takes the full measure, and the other three follow in a denser row — so the two pages differ in what they lead with as well as in what they say. The bare `.feature:nth-child()` rules from the home page's two-column grid are unscoped, so they are cancelled here. */ .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 40px; } .trust-grid .feature { padding: 30px 0 32px; border-inline-end: 0; } .trust-grid .feature:first-child { grid-column: 1 / -1; gap: 26px; align-items: center; padding-block: 34px 36px; } .trust-grid .feature:first-child .feature__icon { width: 60px; height: 60px; border-radius: 18px; } .trust-grid .feature:first-child .feature__icon .icon { width: 30px; height: 30px; } .trust-grid .feature:first-child .feature__title { font-size: 24px; } .trust-grid .feature:first-child .feature__body { font-size: 19px; max-width: 62ch; } /* The supports stack their icon above the text, which is what makes the row read as denser rather than as three more of the same tile. */ .trust-grid .feature:not(:first-child) { grid-template-columns: 1fr; justify-items: start; gap: 14px; } .trust-grid .feature:not(:first-child) .feature__icon { width: 40px; height: 40px; border-radius: 12px; } .trust-grid .feature:not(:first-child) .feature__icon .icon { width: 21px; height: 21px; } .trust-grid .feature:not(:first-child) .feature__title { font-size: 16px; } .trust-grid .feature:not(:first-child) .feature__body { font-size: 14px; max-width: none; } /* ---------- Stance (hiring page only) ---------- */ /* The hiring side's real alternative is an agency, so this band says what NextShift is not taking. It exists on no other page. Open and centred on the page's own pale side tint — after the dense trust row the page needs a quiet one, and the tint marks the statement as this side's own. */ .stance { background: var(--side-tint); } .stance__inner { max-width: 880px; } .stance__title { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; text-align: center; text-wrap: balance; } .stance__lead { max-width: 62ch; margin: 18px auto 0; text-align: center; font-size: 19px; line-height: 1.65; color: var(--ink-soft); } .stance__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-block-start: 48px; } /* Ruled above, not down one side: a coloured inline border is the callout cliché this system doesn't use. */ .stance__point { padding-block-start: 20px; border-block-start: 2px solid var(--side); } .stance__point-title { font-size: 16px; font-weight: 800; margin-block-end: 8px; } .stance__point-body { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); } /* ---------- Choices (worker page only) ---------- */ /* The worker page's unshared section, and deliberately not the hiring page's shape: a contained panel with a tinted head and ruled rows, where the stance band is open, centred and columnar. It also sits earlier in the page, because what a worker is deciding is whether the work fits their week. */ .choices__panel { display: grid; grid-template-columns: .92fr 1.08fr; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; } /* Centred in its column: the head is shorter than the three rows beside it, and left to sit at the top it reads as a panel that failed to fill. */ .choices__head { display: grid; align-content: center; padding: 40px; background: var(--side-tint); } .choices__title { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; text-wrap: balance; } .choices__lead { margin: 16px 0 0; color: var(--ink-soft); } .choices__list { list-style: none; margin: 0; padding: 0; } .choices__list li { padding: 26px 40px; } .choices__list li + li { border-block-start: 1px solid var(--line); } .choices__item-title { font-size: 16px; font-weight: 800; margin-block-end: 6px; } .choices__item-body { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-soft); } @media (max-width: 960px) { .trust-grid { grid-template-columns: 1fr; } .trust-grid .feature:first-child { grid-column: auto; } .trust-grid .feature:not(:first-child) { grid-template-columns: auto 1fr; gap: 20px; justify-items: stretch; } .stance__points { grid-template-columns: 1fr; gap: 26px; } .choices__panel { grid-template-columns: 1fr; } } @media (max-width: 640px) { .trust-grid .feature:first-child .feature__title { font-size: 20px; } .trust-grid .feature:first-child .feature__body { font-size: 16px; } .trust-grid .feature:first-child .feature__icon { width: 48px; height: 48px; border-radius: 14px; } .choices__head { padding: 30px 26px; } .choices__list li { padding: 22px 26px; } }