/* * 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; --ink: #0f172a; --ink-soft: #334155; --muted: #64748b; --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; } :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__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 ---------- */ .hero { position: relative; 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); overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-block: 72px 84px; } .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; } .hero__title { font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; } .hero__title-accent { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__subtitle { font-size: 19px; color: var(--ink-soft); margin-block: 20px 30px; max-width: 30em; } .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 */ .hero__visual { position: relative; min-height: 520px; display: grid; place-items: center; } .phone { border-radius: 34px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); border: 6px solid #0f172a; } .phone img { width: 248px; height: auto; } .phone--front { position: relative; z-index: 2; transform: rotate(-3deg); } .phone--back { position: absolute; z-index: 1; inset-inline-end: 4%; inset-block-start: 8%; transform: rotate(6deg) scale(.92); opacity: .96; } /* ---------- Generic section ---------- */ .section { padding-block: 84px; } .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 ---------- */ .audience-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; } .audience-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; align-items: flex-start; } .audience-card--worker { border-color: rgba(34, 197, 94, .35); } .audience-card__tag { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: rgba(37, 99, 235, .1); padding: 6px 12px; border-radius: 999px; } .audience-card--worker .audience-card__tag { color: #15803d; background: rgba(34, 197, 94, .12); } .audience-card__title { font-size: 24px; margin-block: 18px 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; inset-block-start: 0; width: 20px; height: 20px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--green); border-radius: 50%; } .audience-card .btn { margin-block-start: auto; } /* ---------- Steps ---------- */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: none; } .step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; text-align: center; } .step__num { display: grid; place-items: center; width: 48px; height: 48px; margin-inline: auto; margin-block-end: 18px; font-size: 20px; font-weight: 800; color: #fff; background: var(--grad); border-radius: 14px; } .step__title { font-size: 19px; margin-block-end: 8px; } .step__body { color: var(--muted); margin: 0; } /* ---------- Features ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .feature { padding: 28px 24px; border-radius: var(--radius); background: var(--bg-soft); border: 1px solid var(--line); } .feature__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-sm); font-size: 22px; font-weight: 800; color: var(--brand); margin-block-end: 16px; } .feature__title { font-size: 18px; margin-block-end: 8px; } .feature__body { color: var(--muted); margin: 0; font-size: 15px; } /* ---------- 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: 24px; justify-content: center; } .shot { margin: 0; text-align: center; } .shot img { width: 220px; border-radius: 28px; border: 6px solid #0f172a; box-shadow: var(--shadow-md); } .shot figcaption { margin-block-start: 14px; 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); } /* ---------- CTA band ---------- */ .cta-band { background: radial-gradient(700px 300px at 80% 0%, rgba(34, 197, 94, .35), transparent 60%), linear-gradient(120deg, var(--brand-deep), var(--brand-dark)); color: #fff; } .cta-band__inner { text-align: center; padding-block: 80px; } .cta-band__title { font-size: clamp(1.9rem, 3.6vw, 2.6rem); font-weight: 800; } .cta-band__subtitle { font-size: 19px; opacity: .9; margin-block: 16px 30px; } .cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } /* ---------- 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--footer .brand__shift { color: #fff; } .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__legal { margin-block-start: 22px; font-size: 14px; color: #64748b; } /* ---------- 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: 36px; padding-block: 52px 64px; } .hero__subtitle { margin-inline: auto; } .hero__visual { min-height: 460px; } .audience-grid, .steps, .showcase__inner { grid-template-columns: 1fr; } .feature-grid { grid-template-columns: repeat(2, 1fr); } .showcase__inner { gap: 40px; } } @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%; } .feature-grid { grid-template-columns: 1fr; } .hero__stats { gap: 24px; } .section { padding-block: 60px; } .shot img { width: 170px; } } /* ===================================================================== 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; }