/* ============================================================ HireSide — single global stylesheet (sectioned by component) ============================================================ */ /* --- tokens & reset --- */ :root { /* Brand palette sampled from static/images/logo.png: emblem blue #146fb6 · "Hire" charcoal #373737 · "Side" blue #2c539a */ --navy-900: #0f1c34; --navy-800: #2c539a; --navy-700: #1262a0; --ink: #373737; --muted: #5b6472; --line: #e3e7ee; --bg: #f7f9fc; --card: #ffffff; --accent: #146fb6; --accent-dark: #105992; --accent-on-dark: #50a8ec; /* brand blue lightened for navy backgrounds */ --danger: #c0392b; --warn-bg: #fdf6e3; --radius: 10px; --shadow: 0 1px 3px rgba(16, 32, 54, .08), 0 8px 24px rgba(16, 32, 54, .06); } * { margin: 0; padding: 0; box-sizing: border-box; } [hidden] { display: none !important; } /* the HTML hidden attribute must beat component display rules */ body { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.6; } a { color: var(--navy-800); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .container { max-width: 1080px; margin: 0 auto; padding: 0 20px; } /* ============================================================ APP SHELL — Stripe-style left sidebar (authenticated app only) ============================================================ */ body.app { background: var(--bg); } .app-sidebar { position: fixed; top: 0; inset-inline-start: 0; bottom: 0; width: 248px; z-index: 50; background: #fff; border-inline-end: 1px solid var(--line); color: var(--ink); display: flex; flex-direction: column; padding: 18px 14px; } .side-logo { display: flex; align-items: center; padding: 4px 8px 20px; } .side-logo:hover { text-decoration: none; } .side-logo img { height: 60px; width: auto; display: block; } .side-nav { display: flex; flex-direction: column; gap: 3px; } .side-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: .95rem; font-weight: 500; } .side-item i { width: 18px; text-align: center; font-size: .95rem; color: var(--muted); } .side-item:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; } .side-item:hover i { color: var(--navy-800); } .side-item.active { background: #e9f1fb; color: var(--accent-dark); } .side-item.active i { color: var(--accent); } /* A short window (zoomed in, a laptop screen): the nav list scrolls and the storage card + profile stay pinned at the bottom, never pushed off-screen. */ .side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; margin-inline: -4px; padding-inline: 4px; } .side-bottom { flex: none; margin-top: auto; padding-top: 8px; } @media (min-width: 821px) and (max-height: 760px) { .app-sidebar { padding-top: 12px; padding-bottom: 10px; } .side-logo { padding-bottom: 12px; } .side-logo img { height: 46px; } .side-item { padding-top: 6px; padding-bottom: 6px; } .side-quota { padding-top: 7px; padding-bottom: 7px; } .side-quota-meta { display: none; } } .side-user { position: relative; padding-top: 10px; border-top: 1px solid var(--line); } .user-pill { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: none; background: transparent; color: var(--ink); cursor: pointer; text-align: start; font-family: inherit; } .user-pill:hover, .user-pill.open { background: var(--bg); } .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; flex-shrink: 0; } .user-pill-meta { display: flex; flex-direction: column; overflow: hidden; flex: 1; min-width: 0; } .user-pill-name { font-size: .85rem; font-weight: 600; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-pill-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-pill > i { color: var(--muted); font-size: .72rem; } .user-menu { position: absolute; z-index: 60; bottom: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(11, 32, 54, .22); padding: 6px; } .user-menu-head { padding: 9px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .user-menu-name { font-weight: 700; color: var(--navy-900); font-size: .9rem; } .user-menu-mail { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; } .user-menu a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; } .user-menu a:hover { background: var(--bg); text-decoration: none; } .user-menu a i { width: 16px; text-align: center; color: var(--muted); } .user-menu a.danger { color: var(--danger); } .user-menu a.danger i { color: var(--danger); } .app-main { margin-inline-start: 248px; min-height: 100vh; } body.app .container { max-width: none; width: 100%; margin: 0; padding: 30px 44px; } body.app .page-head { margin-top: 4px; } .user-avatar { overflow: hidden; } .user-avatar img { width: 100%; height: 100%; object-fit: cover; } .user-menu .menu-btn { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 7px; color: var(--ink); font-size: .9rem; width: 100%; border: none; background: none; cursor: pointer; text-align: start; font-family: inherit; } .user-menu .menu-btn:hover { background: var(--bg); } .user-menu .menu-btn i { width: 16px; text-align: center; color: var(--muted); } .user-menu .menu-form { margin: 0; } .user-menu .menu-btn.danger, .user-menu .menu-btn.danger i { color: var(--danger); } /* --- settings modal (Stripe/Slack-style, section nav) --- */ .modal-overlay { position: fixed; inset: 0; background: rgba(11, 32, 54, .5); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; } .modal-card { background: #fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(11, 32, 54, .35); position: relative; } .modal-close { position: absolute; top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; border: none; background: #eef1f6; border-radius: 50%; color: var(--muted); cursor: pointer; z-index: 2; } .modal-close:hover { background: #e2e6ee; color: var(--navy-900); } .settings-modal { display: grid; grid-template-columns: 196px 1fr; width: min(760px, 100%); height: 62vh; min-height: 460px; max-height: 92vh; overflow: hidden; } .settings-nav { background: var(--bg); border-inline-end: 1px solid var(--line); padding: 18px 12px; } .settings-nav-title { font-weight: 700; color: var(--navy-900); padding: 4px 10px 12px; font-size: 1.05rem; } .set-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: none; border-radius: 8px; color: var(--ink); font-size: .92rem; cursor: pointer; text-align: start; font-family: inherit; } .set-tab i { width: 16px; text-align: center; color: var(--muted); } .set-tab:hover { background: #fff; } .set-tab.active { background: #e9f1fb; color: var(--accent-dark); font-weight: 600; } .set-tab.active i { color: var(--accent); } .settings-panels { padding: 30px 28px 26px; overflow-y: auto; } .set-panel h3 { color: var(--navy-900); margin-bottom: 16px; } .photo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; } .photo-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; overflow: hidden; flex-shrink: 0; } .photo-avatar img { width: 100%; height: 100%; object-fit: cover; } .set-msg { margin-inline-start: 12px; font-size: .85rem; font-weight: 600; } .set-msg:empty { display: none; } .set-msg.ok { color: #0d7a56; } .set-msg.err { color: var(--danger); } @media (max-width: 620px) { .settings-modal { grid-template-columns: 1fr; } .settings-nav { border-inline-end: none; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; } .settings-nav-title { width: 100%; } .set-tab { width: auto; } } @media (max-width: 820px) { .app-sidebar { position: sticky; top: 0; width: auto; flex-direction: row; align-items: center; padding: 10px 14px; border-inline-end: none; border-bottom: 1px solid var(--line); } .side-logo { padding: 0; padding-inline-end: 8px; } .side-logo img { height: 36px; } .side-nav { flex-direction: row; gap: 2px; margin-inline-start: 6px; flex: none; overflow: visible; } .side-item span { display: none; } .side-user { margin-top: 0; margin-inline-start: auto; padding-top: 0; border-top: none; } .user-pill-meta, .user-pill > i { display: none; } .user-pill { padding: 4px; background: transparent; } .user-menu { inset-inline-start: auto; inset-inline-end: 0; bottom: auto; top: calc(100% + 8px); width: 240px; } .app-main { margin-inline-start: 0; } body.app .container { padding: 20px; } } /* --- top navigation --- */ .nav { background: var(--navy-900); color: #fff; position: sticky; top: 0; z-index: 50; } .nav-inner { display: flex; align-items: center; gap: 24px; height: 62px; } .nav-logo { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -.02em; } .nav-logo:hover { text-decoration: none; } .nav-logo img { height: 26px; width: auto; display: block; } /* Full HireSide logo (folder + wordmark) rendered white for the dark nav/footer. */ .nav-logo-full { height: 56px !important; width: auto; display: block; filter: brightness(0) invert(1); } .footer-brand .nav-logo-full { height: 56px !important; } @media (max-width: 600px) { .nav-logo-full { height: 40px !important; } .footer-brand .nav-logo-full { height: 46px !important; } } .nav-logo em { color: var(--accent-on-dark); font-style: normal; } .nav-links { display: flex; gap: 18px; align-items: center; margin-inline-start: auto; } .nav-links a { color: #d6deea; font-size: .95rem; } .nav-links a:hover { color: #fff; text-decoration: none; } .nav-links a.active { color: #fff; font-weight: 600; } /* --- app store badges in the top nav --- */ .store-btns { display: flex; align-items: center; gap: 8px; } .store-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 0; background: none; padding: 0; transition: opacity .15s; } .store-btn img { height: 34px; width: auto; display: block; border-radius: 6px; } /* The Font Awesome kit rewrites to , so both need hiding. */ .store-btn i, .store-btn svg { display: none; font-size: 1.05rem; } .store-btn:hover { opacity: .85; text-decoration: none; } /* Narrow screens: the two full badges are ~230px of nav, so collapse to icons. */ @media (max-width: 900px) { .store-btns { gap: 6px; } .store-btn img { display: none; } .store-btn i, .store-btn svg { display: block; width: 1em; height: 1em; } .store-btn { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .28); color: #d6deea; } .store-btn:hover { opacity: 1; color: #fff; border-color: rgba(255, 255, 255, .55); } } /* --- buttons --- */ .btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius); border: none; font-size: .95rem; font-weight: 600; cursor: pointer; text-align: center; } .btn:hover { text-decoration: none; filter: brightness(1.05); } .btn-primary { background: var(--accent); color: #fff; } .btn-navy { background: var(--navy-800); color: #fff; } .btn-outline { background: transparent; color: var(--navy-800); border: 1.5px solid var(--navy-800); } .btn-danger { background: var(--danger); color: #fff; } .btn-sm { padding: 6px 14px; font-size: .85rem; } .btn[disabled] { opacity: .55; cursor: not-allowed; } /* --- hero (marketing) --- */ .hero { background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-800) 70%, var(--navy-700) 100%); color: #fff; padding: 84px 0 72px; } .hero h1 { font-size: 2.7rem; line-height: 1.15; letter-spacing: -.02em; max-width: 640px; } .hero h1 em { color: var(--accent-on-dark); font-style: normal; } .hero p.lead { margin: 18px 0 30px; font-size: 1.15rem; color: #c8d3e2; max-width: 560px; } .hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; } .country-chips { margin-top: 34px; display: flex; gap: 10px; flex-wrap: wrap; } .chip { background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; padding: 6px 16px; font-size: .9rem; color: #e5ecf5; } /* --- sections --- */ .section { padding: 64px 0; } .section.alt { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .section h2 { font-size: 1.9rem; letter-spacing: -.02em; color: var(--navy-900); } .section .sub { color: var(--muted); margin: 8px 0 34px; max-width: 620px; } /* --- cards & grids --- */ .grid { display: grid; gap: 20px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .card h3 { font-size: 1.08rem; color: var(--navy-900); margin-bottom: 8px; } .card p { font-size: .93rem; color: var(--muted); } .card .meta { font-size: .8rem; color: var(--muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; } .badge { display: inline-block; border-radius: 6px; padding: 2px 10px; font-size: .75rem; font-weight: 600; } /* --- steps (how it works) --- */ .steps { counter-reset: step; } .step { position: relative; padding-inline-start: 0; } .step .num { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--accent); color: #fff; border-radius: 50%; font-weight: 700; margin-bottom: 12px; } /* --- pricing --- */ .price-card { text-align: start; position: relative; } .price-card.featured { border-color: var(--accent); border-width: 2px; } .price-card .plan { font-weight: 700; color: var(--navy-900); } .price-card .price { font-size: 2rem; font-weight: 700; margin: 10px 0; color: var(--navy-900); } .price-card .price small { font-size: .9rem; color: var(--muted); font-weight: 400; } .price-card .price .per { font-size: .95rem; font-weight: 600; color: var(--muted); } .grid-4 .price-card .price { font-size: 1.75rem; } /* the premium (2 TB) tier */ .price-card.price-premium { border-color: var(--accent); } .plan-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } .price-card ul { list-style: none; margin: 16px 0 22px; } .price-card li { padding: 5px 0; padding-inline-start: 24px; position: relative; font-size: .92rem; color: var(--ink); } .price-card li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 700; } /* --- forms (inputs) --- */ .form-card { max-width: 460px; margin: 56px auto; } .field { margin-bottom: 16px; } .field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--navy-900); } .field .help { font-size: .8rem; color: var(--muted); margin-top: 3px; } .field input, .field select, .field textarea { width: 100%; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .95rem; font-family: inherit; background: #fff; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); } .field.invalid input, .field.invalid select { border-color: var(--danger); } .field .field-error { font-size: .8rem; color: var(--danger); margin-top: 3px; } .field-check { display: flex; align-items: center; gap: 8px; } .field-check input { width: auto; } /* --- alerts --- */ .alert { border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; font-size: .92rem; } .alert-error { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c0; } .alert-success { background: #e2f5ec; color: #0d7a56; border: 1px solid #bfe8d9; } .alert-info { background: #e8f0fb; color: var(--navy-800); border: 1px solid #cdddf3; } /* Standing state that isn't an error. Amber so it reads as "needs you", not "went wrong". */ .alert-warn { background: #fdf6e7; color: #8a5a12; border: 1px solid #f0e0bd; } /* --- tables --- */ .table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .table th { text-align: start; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfe; } .table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: .93rem; } .table tr:last-child td { border-bottom: none; } .table tr:hover td { background: #fafbfd; } /* --- app layout --- */ .page-head { display: flex; align-items: center; justify-content: space-between; margin: 40px 0 24px; gap: 16px; flex-wrap: wrap; } .page-head h1 { font-size: 1.6rem; color: var(--navy-900); letter-spacing: -.02em; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 30px; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; } .stat .n { font-size: 1.9rem; font-weight: 700; color: var(--navy-900); } .stat .l { font-size: .85rem; color: var(--muted); } #savebar { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 14px 0; margin-top: 10px; } #savebar .container { display: flex; gap: 10px; align-items: center; } #savestatus { font-size: .85rem; color: var(--muted); margin-inline-start: auto; } /* --- app helpers --- */ .muted { color: var(--muted); font-size: .88rem; } .crumbs { font-size: .88rem; color: var(--muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .crumbs strong { color: var(--navy-900); } .fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; } .linklike { background: none; border: none; color: var(--navy-800); cursor: pointer; font-size: .85rem; text-decoration: underline; padding: 0; font-family: inherit; } /* --- footer --- */ .footer { background: var(--navy-900); color: #9fb0c6; margin-top: 72px; padding: 44px 0 30px; font-size: .9rem; } .footer-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 26px; } .footer h4 { color: #fff; font-size: .95rem; margin-bottom: 10px; } .footer-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .footer-brand img { height: 22px; width: auto; } .footer-brand .wordmark { color: #fff; font-weight: 700; font-size: 1.05rem; } .footer-brand .wordmark em { color: var(--accent-on-dark); font-style: normal; } .footer a { color: #9fb0c6; display: block; padding: 2px 0; } .footer a:hover { color: #fff; text-decoration: none; } .footer .fine { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; font-size: .8rem; } /* --- cookie consent (ADR-0096) --- A card pinned to the foot of the public pages, never a full-screen wall: the page stays readable behind it. Above the page, below any modal (200). */ .cookie-consent { position: fixed; inset-inline: 16px; bottom: 16px; z-index: 150; max-width: 880px; margin-inline: auto; display: flex; align-items: center; gap: 22px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 6px rgba(16, 32, 54, .10), 0 18px 48px rgba(16, 32, 54, .22); padding: 18px 22px; animation: cookie-consent-in .28s ease-out; } .cookie-consent-text { flex: 1; min-width: 0; } .cookie-consent h2 { font-size: 1rem; color: var(--navy-900); margin-bottom: 3px; } .cookie-consent p { font-size: .88rem; line-height: 1.5; color: var(--muted); } .cookie-consent p a { color: var(--accent); font-weight: 600; white-space: nowrap; } .cookie-consent-actions { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; flex-shrink: 0; } /* Same box for both choices — refusing is not the smaller button. */ .cookie-consent-actions .btn { min-width: 138px; border: 1.5px solid transparent; } .cookie-consent-actions .btn-outline { border-color: var(--navy-800); } .cookie-consent-actions .btn:focus-visible { outline: 3px solid rgba(20, 111, 182, .35); outline-offset: 2px; } @keyframes cookie-consent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .cookie-consent { animation: none; } } @media (max-width: 720px) { .cookie-consent { flex-direction: column; align-items: stretch; gap: 14px; inset-inline: 10px; bottom: 10px; padding: 16px; } .cookie-consent-actions .btn { min-width: 0; } } @media print { .cookie-consent { display: none; } } /* --- responsive --- */ @media (max-width: 860px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } .footer-cols { grid-template-columns: 1fr 1fr; } .hero h1 { font-size: 2.1rem; } .stats { grid-template-columns: 1fr; } .fields-2 { grid-template-columns: 1fr; } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .nav-links { gap: 12px; } .nav-links a.nav-secondary { display: none; } } /* premium features (ADR-0035) — kebab count chip + the grant checklist modal */ .feat-count { display: inline-block; min-width: 17px; padding: 0 5px; margin-inline-start: 2px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center; } .feat-list { display: flex; flex-direction: column; gap: 2px; text-align: start; } .feat-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: border-color .15s, background .15s; } .feat-row:hover { border-color: var(--accent); background: var(--accent-tint, #f3f8fd); } .feat-row input { width: auto; margin-top: 2px; flex: none; } .feat-name { display: block; font-weight: 600; font-size: .92rem; color: var(--navy-900); } .feat-desc { display: block; font-size: .8rem; color: var(--muted); margin-top: 2px; line-height: 1.45; } /* impersonation banner */ .imp-banner { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #3a2a00; color: #ffe9b0; border: 1px solid #6b5100; padding: 10px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .92rem; } .imp-banner a { color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; } .imp-banner a:hover { text-decoration: underline; } .imp-stop { margin: 0; } .imp-stop button { font: inherit; color: #fff; font-weight: 600; white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; } .imp-stop button:hover { text-decoration: underline; } /* admin panel */ .admin-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; } .admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; flex-wrap: wrap; } .atab { padding: 9px 16px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .atab:hover { color: var(--ink); } .atab.on { color: var(--accent); border-bottom-color: var(--accent); } /* admin left sub-nav */ .admin-layout { display: grid; grid-template-columns: 210px 1fr; gap: 26px; align-items: start; margin-top: 18px; } .admin-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; } .anav { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 9px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; border: 1px solid transparent; transition: background .12s, color .12s; } .anav i { width: 18px; text-align: center; color: var(--muted); font-size: 1rem; } .anav:hover { background: var(--hover, #f1f4f9); color: var(--ink); } .anav:hover i { color: var(--accent); } .anav.on { background: var(--accent-soft, #e8f1fb); color: var(--accent); border-color: var(--accent-line, #cfe2f6); } .anav.on i { color: var(--accent); } .admin-content { min-width: 0; } @media (max-width: 760px) { .admin-layout { grid-template-columns: 1fr; gap: 14px; } .admin-nav { flex-direction: row; flex-wrap: wrap; position: static; } .anav span { display: none; } .anav { padding: 9px 12px; } } .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .kpi { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; position: relative; } .kpi-ic { color: var(--accent); font-size: 1.1rem; margin-bottom: 6px; } .kpi-val { font-size: 1.9rem; font-weight: 700; color: var(--ink); line-height: 1.1; } .kpi-lbl { color: var(--muted); font-size: .82rem; margin-top: 4px; } .kpi-warn .kpi-val { color: #b0620a; } .kpi-warn .kpi-ic { color: #b0620a; } .admin-table td, .admin-table th { vertical-align: middle; } .admin-table .admin-actions { text-align: end; white-space: nowrap; } /* Let row kebab menus escape the table box (the base .table clips with overflow:hidden for its rounded corners; re-round the corner cells here). */ .admin-table { overflow: visible; } .admin-table tr:first-child th:first-child { border-start-start-radius: var(--radius); } .admin-table tr:first-child th:last-child { border-start-end-radius: var(--radius); } .admin-table tr:last-child td:first-child { border-end-start-radius: var(--radius); } .admin-table tr:last-child td:last-child { border-end-end-radius: var(--radius); } /* status / role pills (data-driven, Fasana convention) */ .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; } .pill.admin { background: rgba(143,106,0,.14); color: #8a6a00; } .pill.subscriber { background: rgba(20, 111, 182,.12); color: var(--accent); } .pill.subuser { background: #eef1f6; color: var(--muted); } .pill.active { background: rgba(13,122,86,.14); color: #0d7a56; } .pill.pending { background: rgba(176,98,10,.14); color: #b0620a; } .pill.disabled { background: rgba(204,47,66,.12); color: #c22f42; } .pill.access-full { background: rgba(13,122,86,.12); color: #0d7a56; } .pill.access-view { background: #eef1f6; color: var(--muted); } /* kebab row menu (native
) */ .kebab { position: relative; display: inline-block; } .kebab > summary { list-style: none; cursor: pointer; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.15rem; user-select: none; } .kebab > summary::-webkit-details-marker { display: none; } .kebab > summary:hover { background: #eef1f6; color: var(--ink); } .kebab-menu { position: absolute; inset-inline-end: 0; top: 34px; z-index: 40; min-width: 184px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(16,32,54,.16); padding: 6px; text-align: start; } .kebab-menu form { margin: 0; } .kebab-menu button { width: 100%; text-align: start; background: none; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 7px; font-size: .88rem; color: var(--ink); display: flex; align-items: center; gap: 9px; } .kebab-menu button:hover { background: #f2f5fa; } .kebab-menu button.danger { color: #c22f42; } .kebab-menu button i { width: 15px; text-align: center; } /* ---------- Job-post quota: sidebar meter (ADR-0107) ---------- */ .side-quota { display: block; width: 100%; text-align: start; padding: 10px 12px; border-radius: 10px; background: rgba(20, 111, 182,.07); border: 1px solid rgba(20, 111, 182,.14); cursor: pointer; margin-bottom: 10px; } .side-quota:hover { background: rgba(20, 111, 182,.12); border-color: rgba(20, 111, 182,.28); } .side-quota-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .side-quota-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .side-quota-label i { margin-inline-end: 5px; } .side-quota-pct { font-size: 11px; font-weight: 700; color: var(--accent); } .side-quota-bar { height: 6px; background: rgba(20, 111, 182,.13); border-radius: 999px; overflow: hidden; } .side-quota-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #50a8ec); border-radius: 999px; min-width: 2px; transition: width .2s; } .side-quota-meta { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--muted); } .side-quota.is-warn .side-quota-fill { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .side-quota.is-warn .side-quota-pct { color: #d97706; } .side-quota.is-danger .side-quota-fill { background: linear-gradient(90deg, #f87171, #fca5a5); } .side-quota.is-danger .side-quota-pct { color: #ef4444; } /* ---------- Context menu ---------- */ .ctx { position: fixed; z-index: 300; min-width: 194px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 4px 10px rgba(11,32,54,.14), 0 12px 34px rgba(11,32,54,.16); padding: 6px; } .ctx[hidden] { display: none; } .ctx-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: start; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); padding: 9px 11px; border-radius: 8px; cursor: pointer; } .ctx-item i { width: 16px; text-align: center; color: var(--muted); } .ctx-item:hover { background: #eaf2fb; } .ctx-item:hover i { color: var(--accent); } .ctx-item.danger { color: var(--danger); } .ctx-item.danger i { color: var(--danger); } .ctx-item.danger:hover { background: #fdecea; } .ctx-sep { height: 1px; background: var(--line); margin: 5px 6px; } tr.dragging { opacity: .4; } .row-end { width: 44px; text-align: end; } .ctx-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 320; background: var(--navy-900); color: #fff; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 8px; box-shadow: 0 8px 24px rgba(11,32,54,.3); } .ctx-toast[hidden] { display: none; } /* ---------- App toast (HireSide.Toast) ---------- Success/error feedback for actions that happen inside a modal — notably the settings panels, where a save often re-renders the panel and would wipe an inline message. z-index sits above every overlay (modals are 200-320). */ .app-toast-wrap { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } .app-toast { display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); background: #0d7a56; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.35; padding: 12px 18px; border-radius: 10px; box-shadow: 0 10px 30px rgba(11,32,54,.34); animation: app-toast-in .18s ease-out; } .app-toast.is-err { background: #c0392b; } .app-toast.is-out { animation: app-toast-out .22s ease-in forwards; } .app-toast i { font-size: 1rem; flex: none; } @keyframes app-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes app-toast-out { to { opacity: 0; transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .app-toast, .app-toast.is-out { animation: none; } } .field .help.is-err { color: var(--danger); font-weight: 600; } .field input.has-err { border-color: var(--danger); } /* ---------- Confirm / alert / prompt dialogs (static/js/ui.js) ---------- The app's replacement for native confirm()/alert()/prompt(). Built on .modal-overlay/.modal-card so it inherits the card, shadow and dark theme the Share-link and Email-file modals already use. */ .dlg-overlay { z-index: 500; } /* above every modal — a modal may raise one */ .dlg-card { width: min(440px, 100%); padding: 26px 24px 22px; } .dlg-head { display: flex; gap: 14px; align-items: flex-start; padding-inline-end: 26px; } .dlg-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .dlg-icon.tone-warn { background: #fdf3e0; color: #b57b12; } .dlg-icon.tone-danger { background: #fdecea; color: var(--danger); } .dlg-icon.tone-info { background: #eaf2fb; color: var(--accent); } .dlg-icon.tone-ok { background: #e7f5ec; color: #1d8a4c; } .dlg-copy { min-width: 0; flex: 1; padding-top: 2px; } .dlg-card h3 { margin: 0; font-size: 1.12rem; color: var(--navy-900); line-height: 1.35; } /* Messages quote user-typed names — wrap them instead of overflowing the card. */ .dlg-text { margin: 7px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; } .dlg-text[hidden] { display: none; } .dlg-field { margin: 18px 0 0; } .dlg-field.is-err input { border-color: var(--danger); } .dlg-field.is-err .help { color: var(--danger); font-weight: 600; } .dlg-field label[hidden] { display: none; } .dlg-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .dlg-actions .btn[hidden] { display: none; } @media (max-width: 460px) { .dlg-actions { flex-direction: column-reverse; } .dlg-actions .btn { width: 100%; } } /* ---------- Form modals ---------- */ /* A plain padded form card (settings modal gets its own spacing from the grid; this variant restores padding + width for the form). */ .modal-form { width: min(440px, 100%); max-height: 88vh; overflow-y: auto; padding: 26px 24px; } .modal-form h3 { margin: 0 0 18px; padding-inline-end: 28px; font-size: 1.2rem; color: var(--navy-900); } .modal-form .btn-primary { margin-top: 4px; } /* Optional extra fields inside a form modal — two-up grid tucked behind a disclosure so the common case stays a two-field form. */ .modal-form .field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; } .modal-form .field-grid .field.wide { grid-column: 1 / -1; } .modal-form textarea { min-height: 78px; resize: vertical; } .pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 4px; } .pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; } .kebab-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: .88rem; color: var(--ink); text-decoration: none; } .kebab-menu a:hover { background: #f2f5fa; } .kebab-menu a i, .kebab-menu button i { width: 15px; text-align: center; } .kebab-menu button[disabled] { opacity: .45; cursor: not-allowed; } /* team management (settings modal) */ .team-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; } .team-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; } .team-who { display: flex; flex-direction: column; margin-inline-end: auto; min-width: 0; } .team-name { font-weight: 600; color: var(--ink); } .team-mail { font-size: .8rem; color: var(--muted); } .team-acts { display: flex; gap: 12px; flex-shrink: 0; } .team-acts .linklike { font-size: .82rem; } .team-count { font-size: .82rem; } .team-list { display: flex; flex-direction: column; gap: 8px; } .team-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .team-add { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 14px; } .team-kebab { flex-shrink: 0; } .linklike.danger { color: #c22f42; } /* ---------- Duotone icons in HireSide blue (fa-duotone fa-light) ---------- */ .fa-duotone { --fa-primary-color: var(--accent); --fa-secondary-color: var(--accent); --fa-secondary-opacity: 0.32; } /* Keep icons legible where they sit on a filled/colored surface, or must match the element's own colour (white on buttons, red on danger items). */ .btn-primary .fa-duotone, .btn-navy .fa-duotone, .btn-danger .fa-duotone, .fab .fa-duotone, .danger .fa-duotone, .ctx-item.danger .fa-duotone, .kebab-menu .danger .fa-duotone, .imp-banner .fa-duotone, .side-logo .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; } /* ---------- Dashboard charts (Home) ---------- */ .dash-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin: 22px 0; } .chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; } .chart-title { font-weight: 700; color: var(--navy-900); font-size: .92rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .chart-title i { color: var(--accent); } .chart-wrap { position: relative; height: 210px; } .chart-foot { text-align: center; font-size: .8rem; color: var(--muted); margin-top: 10px; } /* ---- social sign-in (Google / Apple) on login + signup ---- */ .social-auth { margin-top: 18px; } .social-divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .82rem; margin: 4px 0 16px; } .social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .gsi-wrap { display: flex; justify-content: center; } /* Apple sign-in button — sized to match the 300px Google button below it */ .apple-signin-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 300px; margin: 10px auto 0; padding: 0; height: 40px; border-radius: 4px; background: #000; color: #fff; border: 1px solid #000; cursor: pointer; font-size: 15px; font-weight: 500; font-family: inherit; } .apple-signin-btn:hover { background: #1a1a1a; } [data-theme="dark"] .apple-signin-btn { background: #fff; color: #000; border-color: #fff; } [data-theme="dark"] .apple-signin-btn:hover { background: #e8e8e8; } /* ---- account pages: story on one side, form on the other (auth_base.html, ADR-0094) ---- */ body.auth-page .footer { display: none; } .auth-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: calc(100vh - 62px); } .auth-art { position: relative; overflow: hidden; color: #fff; background: radial-gradient(1200px 600px at 10% 0%, #1262a0 0%, transparent 60%), radial-gradient(900px 500px at 100% 100%, #0e6f8f 0%, transparent 55%), linear-gradient(160deg, #0f1c34 0%, #0f2d4c 55%, #12314f 100%); } .auth-art-glow { position: absolute; width: 520px; height: 520px; inset-inline-end: -160px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(94,167,224,.35), transparent 65%); filter: blur(10px); } .auth-art-inner { position: relative; max-width: 560px; margin: 0 auto; padding: 64px 48px; display: flex; flex-direction: column; gap: 22px; height: 100%; justify-content: center; } .auth-art-eyebrow { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: .8rem; font-weight: 600; letter-spacing: .02em; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #d6e8f8; } .auth-art-title { font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.14; letter-spacing: -.02em; font-weight: 800; color: #fff; text-wrap: balance; } .auth-art-title span { background: linear-gradient(90deg, #7ac7ff, #8fe3cf); -webkit-background-clip: text; background-clip: text; color: transparent; } .auth-art-lede { color: #c7d6e6; font-size: 1.02rem; line-height: 1.6; } .auth-art-points { list-style: none; display: grid; gap: 10px; margin-top: 4px; } .auth-art-points li { display: flex; align-items: center; gap: 12px; color: #e3ecf6; font-size: .95rem; } .auth-art-points i, .auth-art-points svg { color: #7ac7ff; width: 18px; flex-shrink: 0; } /* The art sits on navy whatever the theme, so its duotone icons take the light blue rather than --accent. */ .auth-art .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; } /* the product illustration (templates/_shortlist_mock.html): a ranked shortlist with match scores and one quoted reason. Used on the auth panel and the home hero. */ .mock-panel { background: rgba(255,255,255,.97); color: #1d2a3a; border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 30px 70px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 8px; font-size: .88rem; text-shadow: none; text-align: start; } .mock-bar { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #edf0f5; margin-bottom: 2px; } .mock-bar span { width: 9px; height: 9px; border-radius: 50%; background: #e4e8ef; } .mock-bar em { margin-inline-start: 8px; font-style: normal; font-size: .76rem; color: #6b7686; font-weight: 600; } .mock-head { padding: 2px 2px 4px; } .mock-head-title { font-weight: 700; color: #373737; font-size: .98rem; } .mock-head-sub { color: #6b7686; font-size: .76rem; margin-top: 2px; } .mock-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: #f4f7fb; } .mock-avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #2c539a; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .02em; } .mock-row-main { flex: 1; min-width: 0; } .mock-row-name { font-weight: 600; color: #373737; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mock-row-sub { color: #6b7686; font-size: .74rem; } .mock-score { flex-shrink: 0; min-width: 42px; text-align: center; font-size: .82rem; font-weight: 800; padding: 4px 8px; border-radius: 999px; } .mock-score.ok { background: #e2f5ec; color: #0d7a56; } .mock-score.mid { background: #fdf1d8; color: #8a5a12; } .mock-quote { margin: -2px 0 2px; padding: 7px 12px; border-inline-start: 3px solid #146fb6; background: #eef5fc; border-radius: 0 8px 8px 0; color: #2c539a; font-size: .76rem; font-style: italic; } [dir="rtl"] .mock-quote { border-radius: 8px 0 0 8px; } .mock-quote i { color: #146fb6; margin-inline-end: 4px; font-style: normal; } .mock-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 12px; border-radius: 10px; background: #146fb6; color: #fff; font-size: .8rem; font-weight: 600; } .mock-foot .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; } /* "Coming soon" marker on features that are not live yet (homepage). */ .soon-badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: #eaf2fb; color: #2c539a; margin-bottom: 10px; } .soon-badge.on-dark { background: rgba(255,255,255,.14); color: #d6e8f8; margin: 0 6px 0 0; vertical-align: 1px; } .soon-note { font-size: .95rem; margin-top: 16px; } .auth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--card); } .auth-box { width: min(440px, 100%); } .auth-title { font-size: 1.7rem; line-height: 1.25; margin-bottom: 6px; color: var(--navy-900); letter-spacing: -.01em; } .auth-sub { color: var(--muted); margin-bottom: 22px; line-height: 1.5; } .auth-title + .alert, .auth-title + form { margin-top: 18px; } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); margin-bottom: 30px; } .auth-tab { text-align: center; padding: 10px; border-radius: 9px; font-weight: 600; font-size: .92rem; color: var(--muted); } .auth-tab:hover { color: var(--navy-900); text-decoration: none; } .auth-tab.on { background: var(--card); color: var(--navy-900); box-shadow: 0 1px 3px rgba(11,32,54,.12), 0 1px 1px rgba(11,32,54,.06); } .auth-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .auth-label-row a { font-size: .82rem; } .auth-submit { display: block; width: 100%; margin-top: 22px; padding-top: 12px; padding-bottom: 12px; } .auth-submit i, .auth-submit svg { margin-inline-start: 6px; } .auth-switch { margin-top: 20px; font-size: .9rem; color: var(--muted); text-align: center; } .auth-inline { margin: -6px 0 16px; } .auth-box .social-auth { margin-top: 22px; } @media (max-width: 900px) { .auth-split { grid-template-columns: 1fr; min-height: 0; } .auth-art-inner { padding: 36px 24px; gap: 14px; } .auth-art .mock-panel, .auth-art-points { display: none; } .auth-panel { padding: 36px 20px 56px; align-items: flex-start; } } @media (max-width: 560px) { .auth-art-lede { display: none; } /* The tabs already offer both, and the phone nav has no room for them. */ body.auth-page .nav-links > a[href$="/login"], body.auth-page .nav-links > a[href$="/signup"] { display: none; } .auth-art-inner { padding: 26px 20px; } } /* ============================================================ MARKETING SITE v2 — hero video landing (NativeSync-style, HireSide blue) ============================================================ */ .home-hero-dark .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; border-bottom: none; } .home-hero-dark .nav .nav-logo span, .home-hero-dark .nav .nav-links a { color: #fff; } .home-hero-dark .nav .nav-links a.btn-primary { color: #fff; } .home-hero-dark .nav .nav-links a:not(.btn):hover { color: #cfe1f4; } .m-container { max-width: 1120px; margin: 0 auto; padding: 0 32px; } /* ---- hero ---- */ .hero-v2 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--navy-900); color: #fff; overflow: hidden; isolation: isolate; } .hero-v2-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 120% at 80% 0%, #16324e 0%, #0f1c34 55%); } .hero-bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* No video: a quiet brand-blue glow and dot grid, drawn in CSS. */ .hero-v2-bg-plain { background: radial-gradient(800px 520px at 85% 20%, rgba(20,111,182,.45) 0%, transparent 65%), radial-gradient(700px 480px at 0% 100%, rgba(44,83,154,.40) 0%, transparent 60%), radial-gradient(120% 120% at 80% 0%, #16324e 0%, #0f1c34 55%); } .hero-v2-bg-plain::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%); mask-image: linear-gradient(180deg, #000 0%, transparent 85%); } .hero-v2-inner.has-mock { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; } .hero-v2-mock { max-width: 400px; width: 100%; justify-self: end; } @media (max-width: 960px) { .hero-v2-inner.has-mock { grid-template-columns: minmax(0, 1fr); } .hero-v2-mock { display: none; } } .hero-v2-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,32,54,.86) 0%, rgba(11,32,54,.66) 42%, rgba(11,32,54,.30) 78%, rgba(11,32,54,.12) 100%), linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,0) 26%, rgba(11,32,54,0) 68%, rgba(11,32,54,.45) 100%); } .hero-v2-inner { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 150px 32px 110px; } /* No overlay filter over the video — keep text legible with a shadow on the text only. */ .hero-v2-copy { max-width: 660px; text-shadow: 0 2px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); } .hero-v2-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: #cfe1f4; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 7px 14px; border-radius: 999px; } .hero-v2-pulse { width: 8px; height: 8px; border-radius: 50%; background: #50a8ec; box-shadow: 0 0 0 0 rgba(94,167,224,.6); animation: heroPulse 2s infinite; } @keyframes heroPulse { 0% { box-shadow: 0 0 0 0 rgba(94,167,224,.55); } 70% { box-shadow: 0 0 0 9px rgba(94,167,224,0); } 100% { box-shadow: 0 0 0 0 rgba(94,167,224,0); } } .hero-v2-title { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 800; margin: 20px 0 0; letter-spacing: -.02em; } .hero-v2-title .grad { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #eef3f9; /* bright, so it always reads on the dark video */ animation: gradGlow 3.2s ease-in-out infinite; } @keyframes gradGlow { 0%, 100% { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 14px rgba(94,167,224,.45); } 50% { text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 30px rgba(122,199,255,.9), 0 0 60px rgba(94,167,224,.5); } } @media (prefers-reduced-motion: reduce) { .hero-v2-title .grad { animation: none; text-shadow: 0 2px 12px rgba(0,0,0,.6), 0 0 20px rgba(122,199,255,.7); } } .hero-v2-lede { font-size: 1.12rem; line-height: 1.62; color: #d6e2ee; margin: 20px 0 0; max-width: 600px; } .hero-v2-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-v2-proof { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 26px 0 0; padding: 0; } .hero-v2-proof li { font-size: .92rem; color: #cfe1f4; display: flex; align-items: center; gap: 8px; } .hero-v2-proof i { color: #50a8ec; } /* ---- buttons ---- */ .btn-v2 { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 11px; font-weight: 600; font-size: .96rem; text-decoration: none; transition: transform .12s, box-shadow .12s, background .12s; border: 1px solid transparent; } .btn-v2:hover { text-decoration: none; transform: translateY(-1px); } .btn-v2-primary { background: #fff; color: var(--navy-900); box-shadow: 0 8px 24px rgba(0,0,0,.22); } .btn-v2-primary:hover { background: #eaf2fb; color: var(--navy-900); } .btn-v2-ghost { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.22); } .btn-v2-ghost:hover { background: rgba(255,255,255,.18); color: #fff; } .btn-v2-ghost-dark { background: transparent; color: var(--accent); border-color: var(--line); } .btn-v2-ghost-dark:hover { background: var(--bg); color: var(--accent-dark); } /* ---- section rhythm ---- */ .section-v2 { padding: 92px 0; } .section-v2-alt { background: #fafbfd; } .section-v2-head { max-width: 720px; margin: 0 auto 52px; text-align: center; } .eyebrow-v2 { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); margin-bottom: 12px; } .eyebrow-v2.on-dark { color: #7fb6e6; } .title-v2 { font-size: clamp(1.7rem, 3.3vw, 2.4rem); line-height: 1.16; font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; } .title-v2.on-dark { color: #fff; } .lede-v2 { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin-top: 14px; } .lede-v2.on-dark { color: #cbd8e6; } /* ---- trust strip ---- */ .strip-v2 { background: #f6f8fb; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 20px 0; } .strip-v2 .m-container { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .strip-v2-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .strip-v2-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; } .strip-v2-langs li { font-size: .92rem; font-weight: 600; color: var(--navy-800); display: flex; align-items: center; gap: 8px; } .strip-v2-langs i { color: var(--accent); } /* ---- how it works ---- */ .how-v2 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .how-v2-step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; } .how-v2-step:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .how-v2-num { font-size: 1.6rem; font-weight: 800; color: var(--accent); opacity: .35; } .how-v2-body h3 { color: var(--navy-900); font-size: 1.12rem; margin: 8px 0 8px; display: flex; align-items: center; gap: 9px; } .how-v2-body h3 i { color: var(--accent); } .how-v2-body p { color: var(--muted); font-size: .95rem; line-height: 1.55; } /* ---- quote band ---- */ .quote-band { background: var(--navy-900); color: #fff; padding: 60px 0; } .quote-big { text-align: center; font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; color: #eaf2fb; max-width: 900px; margin: 0 auto; } /* ---- bento ---- */ .bento-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .bento-v2-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px; transition: transform .15s, box-shadow .15s; } .bento-v2-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .bento-v2-card-lg { grid-column: span 2; background: linear-gradient(135deg, #146fb6, #16324e); color: #fff; border-color: transparent; } .bento-v2-icon { width: 46px; height: 46px; border-radius: 12px; background: #eaf2fb; color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; } .bento-v2-card-lg .bento-v2-icon { background: rgba(255,255,255,.16); color: #fff; } .bento-v2-card h3 { color: var(--navy-900); font-size: 1.15rem; margin-bottom: 8px; } .bento-v2-card-lg h3 { color: #fff; font-size: 1.4rem; } .bento-v2-card p { color: var(--muted); font-size: .95rem; line-height: 1.55; } .bento-v2-card-lg p { color: #d6e2ee; } /* ---- who ---- */ .who-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .who-card { text-align: center; padding: 28px 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .who-card i { font-size: 1.9rem; color: var(--accent); } .who-card h3 { color: var(--navy-900); font-size: 1.1rem; margin: 14px 0 8px; } .who-card p { color: var(--muted); font-size: .9rem; line-height: 1.5; } /* ---- security band ---- */ .security-band { background: var(--navy-900); color: #fff; padding: 84px 0; } .security-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; } .security-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .security-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #eaf2fb; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 14px 16px; font-size: .92rem; } .security-list i { color: #50a8ec; font-size: 1.05rem; } /* ---- stats ---- */ .stat-v2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; } .stat-v2-n { font-size: 1.9rem; font-weight: 800; color: var(--accent); letter-spacing: -.01em; } .stat-v2-l { color: var(--muted); font-size: .9rem; margin-top: 6px; } /* ---- FAQ ---- */ .faq-v2 { display: flex; flex-direction: column; gap: 10px; } .faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; } .faq-item summary { cursor: pointer; font-weight: 600; color: var(--navy-900); padding: 14px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; font-weight: 400; } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { color: var(--muted); font-size: .95rem; line-height: 1.6; padding: 0 0 16px; margin: 0; } /* ---- CTA band ---- */ .cta-v2 { padding: 90px 0; text-align: center; background: radial-gradient(120% 120% at 50% 0%, #eaf2fb 0%, #fff 60%); } .cta-v2-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; color: var(--navy-900); letter-spacing: -.02em; } .cta-v2-lede { color: var(--muted); font-size: 1.08rem; margin: 14px auto 30px; max-width: 560px; } @media (max-width: 900px) { .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr 1fr; } .bento-v2-card-lg { grid-column: span 2; } .security-inner { grid-template-columns: 1fr; } } @media (max-width: 600px) { .how-v2, .bento-v2, .who-grid, .stat-v2-grid { grid-template-columns: 1fr; } .bento-v2-card-lg { grid-column: span 1; } .security-list { grid-template-columns: 1fr; } .hero-v2-inner { padding: 120px 22px 80px; } .hero-v2-scrim { background: linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,.75) 60%, rgba(11,32,54,.9) 100%); } } /* Match SweetAlert2 inputs/selects to the app's field styling (Create Folder dialog, etc.) The side inset matters: `margin: 6px 0` with `width: 100%` made the field span the popup edge to edge while the title and text above it stayed inset, so it looked wedged into the corners. 1.6em is SweetAlert2's own content inset. */ .swal2-popup .swal2-input, .swal2-popup .swal2-select { width: calc(100% - 3.2em); box-sizing: border-box; height: auto; margin: 6px 1.6em 0; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; font-size: .95rem; font-family: inherit; color: var(--ink); background: #fff; box-shadow: none; } .swal2-popup .swal2-input:focus, .swal2-popup .swal2-select:focus { outline: none; border-color: var(--navy-700); box-shadow: none; } .btn-icon { padding-inline-start: 12px; padding-inline-end: 12px; } .btn-icon i { margin: 0; } #starFilterBtn.on { background: #fff7e0; border-color: #e8b93c; color: #96700e; } #starFilterBtn.on i { color: #e8b93c; } /* format-aware date field (replaces native type=date) */ .df-wrap { position: relative; display: flex; align-items: stretch; } .df-text { flex: 1; padding-inline-end: 38px; } .df-btn { position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; width: 36px; border: 0; background: transparent; color: var(--muted); cursor: pointer; border-radius: 0; border-start-end-radius: 8px; border-end-end-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .95rem; } .df-btn:hover { color: var(--accent); background: #f2f5fa; } .df-cal { display: none; position: absolute; top: calc(100% + 6px); inset-inline-start: 0; z-index: 90; width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(16,32,54,.18); padding: 10px; } .df-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .df-cal-title { display: flex; gap: 5px; } .df-sel { border: 1px solid var(--line); background: #fff; color: var(--navy-900); border-radius: 7px; padding: 3px 5px; font-size: .84rem; font-weight: 700; cursor: pointer; } .df-sel:hover { border-color: var(--accent); } .df-nav { border: 0; background: #f2f5fa; width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 1.05rem; color: var(--ink); line-height: 1; } .df-nav:hover { background: var(--accent); color: #fff; } .df-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .df-dowc { text-align: center; font-size: .68rem; color: var(--muted); text-transform: uppercase; padding: 2px 0; } .df-day { border: 0; background: transparent; height: 30px; border-radius: 7px; cursor: pointer; font-size: .84rem; color: var(--ink); } .df-day:hover { background: #eef1f6; } .df-day.df-today { box-shadow: inset 0 0 0 1.5px var(--accent-line, #cfe2f6); } .df-day.df-sel { background: var(--accent); color: #fff; font-weight: 700; } .df-cal-foot { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); } .df-link { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: .82rem; font-weight: 600; } .df-link:hover { text-decoration: underline; } /* ============================================================ DARK MODE — applied only when . Only the authenticated app shell (app_base.html) sets the attribute, so the public marketing site stays light. ============================================================ */ :root[data-theme="dark"] { --navy-900: #eaf1f8; /* these read as strong TEXT in the app → flip light */ --navy-800: #cbd8e8; --navy-700: #a3c0df; --ink: #dce4ed; --muted: #93a1b3; --line: #2b3644; --bg: #0e1621; --card: #161f2b; --accent: #4f99e6; --accent-dark: #7cb6ee; --danger: #ef7b70; --warn-bg: #2b2617; --shadow: 0 1px 3px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45); } /* App-chrome surfaces that hardcode white in light mode. */ [data-theme="dark"] .app-sidebar { background: var(--card); } /* Elevated popovers/menus/modals — one step lighter than the page. */ [data-theme="dark"] .user-menu, [data-theme="dark"] .modal-card, [data-theme="dark"] .ctx, [data-theme="dark"] .kebab-menu, [data-theme="dark"] .df-cal, [data-theme="dark"] .set-tab:hover { background: #1c2735; } /* Form fields. */ [data-theme="dark"] .field input, [data-theme="dark"] .field select, [data-theme="dark"] .field textarea, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="number"], [data-theme="dark"] select, [data-theme="dark"] textarea { background: #1c2836; color: var(--ink); border-color: var(--line); } [data-theme="dark"] ::placeholder { color: var(--muted); opacity: .85; } [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8); } /* SweetAlert dialogs. */ [data-theme="dark"] .swal2-popup { background: #1c2735; color: var(--ink); } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container { color: var(--ink); } [data-theme="dark"] .swal2-input, [data-theme="dark"] .swal2-select, [data-theme="dark"] .swal2-textarea { background: #1c2836; color: var(--ink); border-color: var(--line); } /* HireSide dialogs — the card itself is covered by the .modal-card rule above; only the icon badge needs its own (tinted, not washed-out) dark values. */ [data-theme="dark"] .dlg-icon.tone-warn { background: rgba(255,193,7,.14); color: #e8c07a; } [data-theme="dark"] .dlg-icon.tone-danger { background: rgba(192,57,43,.18); color: #ef8a7d; } [data-theme="dark"] .dlg-icon.tone-info { background: rgba(20, 111, 182,.20); color: #7db4e8; } [data-theme="dark"] .dlg-icon.tone-ok { background: rgba(29,138,76,.18); color: #6fc793; } /* Navy-filled button: --navy-800 flips to a light TEXT color in dark, so give it its own fill. */ [data-theme="dark"] .btn-navy { background: #24405c; color: #fff; } [data-theme="dark"] .btn-outline { border-color: var(--line); } /* Sidebar + row states (light tints → subtle dark-accent). */ [data-theme="dark"] .side-item.active { background: rgba(79,153,230,.16); color: var(--accent-dark); } [data-theme="dark"] .side-item:hover { background: rgba(255,255,255,.05); } [data-theme="dark"] .side-item.active i { color: var(--accent-dark); } [data-theme="dark"] .table tr:hover td { background: rgba(255,255,255,.03); } /* The dark-mode toggle button in the user menu. */ .menu-btn .fa-moon, .menu-btn .fa-sun-bright { width: 16px; } /* ---- Dark-mode polish: tinted chips, badges, alerts, hovers, panels ---- */ /* Neutral gray chips / hovers → subtle raised surface. */ [data-theme="dark"] .modal-close, [data-theme="dark"] .pill.subuser, [data-theme="dark"] .pill.access-view, [data-theme="dark"] .table th { background: rgba(255,255,255,.06); color: var(--muted); } [data-theme="dark"] .modal-close:hover, [data-theme="dark"] .kebab > summary:hover, [data-theme="dark"] .kebab-menu button:hover, [data-theme="dark"] .kebab-menu a:hover, [data-theme="dark"] .df-day:hover, [data-theme="dark"] .df-btn:hover, [data-theme="dark"] .df-nav, [data-theme="dark"] .table tr:hover td { background: rgba(255,255,255,.08); } /* Accent tints. */ [data-theme="dark"] .set-tab.active, [data-theme="dark"] .ctx-item:hover { background: rgba(79,153,230,.16); color: var(--accent-dark); } [data-theme="dark"] .alert-info { background: rgba(79,153,230,.14); color: #a9cdf3; border: 1px solid rgba(79,153,230,.3); } [data-theme="dark"] .alert-success { background: rgba(63,174,134,.14); color: #6fd0a6; border: 1px solid rgba(63,174,134,.3); } [data-theme="dark"] .alert-warn { background: rgba(214,158,46,.14); color: #e0b45f; border: 1px solid rgba(214,158,46,.3); } /* Danger / red. */ [data-theme="dark"] .ctx-item.danger:hover { background: rgba(239,123,112,.16); color: #f19d95; } [data-theme="dark"] .alert-error { background: rgba(239,123,112,.14); color: #f19d95; border: 1px solid rgba(239,123,112,.3); } /* Toasts keep a solid fill in both themes (white text needs the contrast); dark mode just lifts them off the darker page. */ [data-theme="dark"] .app-toast { background: #12946a; box-shadow: 0 10px 30px rgba(0,0,0,.55); } [data-theme="dark"] .app-toast.is-err { background: #d1483a; } [data-theme="dark"] .set-msg.ok { color: #4fc79b; } /* Warn / amber. */ [data-theme="dark"] #starFilterBtn.on { background: rgba(224,137,74,.18); color: #e6b06a; } /* White HireSide logo on the dark sidebar. */ [data-theme="dark"] .side-logo img { filter: brightness(0) invert(1); } /* ===================== Admin Users — job-post quota (ADR-0107) ===================== */ .jp-cell { font-size: .8rem; color: var(--muted); white-space: nowrap; } .jp-cell strong { color: var(--ink); } .jp-cell.jp-full strong { color: var(--danger); } /* ===================== Admin Users — search / filters / pagination ===================== */ .admin-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; } .admin-search { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; max-width: 380px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; } .admin-search i { color: var(--muted); font-size: .9rem; } .admin-search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; color: var(--ink); font-size: .88rem; } .admin-filter { border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); padding: 9px 12px; font-size: .84rem; cursor: pointer; } .admin-count { margin-inline-start: auto; font-size: .8rem; color: var(--muted); white-space: nowrap; } .admin-empty { text-align: center; color: var(--muted); padding: 26px 10px; font-size: .9rem; } .admin-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 4px; } .admin-pageinfo { font-size: .82rem; color: var(--muted); } .admin-pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; } [data-theme="dark"] .admin-search, [data-theme="dark"] .admin-filter { background: var(--card); } /* Links inside kebab menus behave like the buttons */ .kebab-menu a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px; font-size: .88rem; color: var(--ink); text-decoration: none; } .kebab-menu a:hover { background: #f2f5fa; } .kebab-menu a i { width: 15px; text-align: center; } /* Settings: Account tab (delete account) */ .set-tab-danger { color: #c22f42 !important; margin-top: auto; } .danger-zone { border: 1px solid rgba(204,47,66,.35); background: rgba(204,47,66,.05); border-radius: 12px; padding: 16px 18px; font-size: .92rem; color: var(--ink); } /* ============================================================ Language switcher (ADR-0070) — public nav, globe pill + dropdown menu ============================================================ */ .lang-switch { position: relative; } .lang-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; color: #e8eef7; font-size: .85rem; font-weight: 600; line-height: 1.3; white-space: nowrap; cursor: pointer; user-select: none; transition: background .15s, border-color .15s; } .lang-switch summary::-webkit-details-marker { display: none; } .lang-switch summary:hover, .lang-switch[open] summary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; } .lang-switch summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .lang-switch summary .fa-globe { font-size: .95rem; } .lang-switch .lang-caret { font-size: .62rem; opacity: .8; transition: transform .2s; } .lang-switch[open] .lang-caret { transform: rotate(180deg); } /* Same card look as the app's .user-menu. */ .lang-menu { position: absolute; z-index: 60; top: calc(100% + 8px); inset-inline-end: 0; min-width: 190px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: 0 10px 34px rgba(11, 32, 54, .22); animation: lang-menu-in .14s ease-out; } @keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* Scoped under .nav .nav-links (and the dark home hero) so it beats the nav's white link colour rules. */ .nav .nav-links .lang-menu a, .home-hero-dark .nav .nav-links .lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 7px; color: var(--ink); font-size: .9rem; font-weight: 500; } .nav .nav-links .lang-menu a:hover, .home-hero-dark .nav .nav-links .lang-menu a:hover { background: var(--bg); color: var(--navy-900); text-decoration: none; } .nav .nav-links .lang-menu a.active, .home-hero-dark .nav .nav-links .lang-menu a.active { color: var(--navy-800); font-weight: 700; } .lang-menu a i { font-size: .8rem; color: var(--navy-700); } .lang-names { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; } .lang-english { font-size: .74rem; font-weight: 400; color: var(--muted); } /* ===== Right-to-left (ADR-0087) ===== Most direction handling above uses logical properties (margin-inline-*, inset-inline-*, text-align:start/end ...), which render identically in LTR and mirror automatically under . This section covers what logical properties cannot express: transforms, gradients angled along the x-axis, icon mirroring, LTR islands (emails, codes), and Arabic / Urdu typography. Everything here is scoped to [dir="rtl"] / [lang="ar|ur|ms|zh|es"], so it never affects English. */ /* Directional icons (chevrons, arrows) marked up with class "rtl-flip". */ [dir="rtl"] .rtl-flip { transform: scaleX(-1); } /* Progress / usage bars fill from the inline start, so their gradients run the other way. Specificity mirrors the LTR rules it overrides. */ [dir="rtl"] .side-quota-fill { background: linear-gradient(270deg, var(--accent), #50a8ec); } [dir="rtl"] .side-quota.is-warn .side-quota-fill { background: linear-gradient(270deg, #f59e0b, #fbbf24); } [dir="rtl"] .side-quota.is-danger .side-quota-fill { background: linear-gradient(270deg, #f87171, #fca5a5); } /* Marketing hero: the scrim is darkest behind the copy, which sits on the right in RTL. */ [dir="rtl"] .hero-v2-scrim { background: linear-gradient(270deg, rgba(11,32,54,.86) 0%, rgba(11,32,54,.66) 42%, rgba(11,32,54,.30) 78%, rgba(11,32,54,.12) 100%), linear-gradient(180deg, rgba(11,32,54,.5) 0%, rgba(11,32,54,0) 26%, rgba(11,32,54,0) 68%, rgba(11,32,54,.45) 100%); } /* LTR islands: emails, passwords, phone numbers, URLs and code stay left-to-right (so "@", "." and digits don't reorder) but hug the RTL inline end like the surrounding fields. */ [dir="rtl"] input[type="email"], [dir="rtl"] input[type="password"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="url"], [dir="rtl"] .user-menu-mail, [dir="rtl"] .user-pill-sub, [dir="rtl"] .team-mail { direction: ltr; text-align: end; } [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; } /* Arabic typography — Noto Sans Arabic is loaded in
when Lang is 'ar'. */ html[lang="ar"] body, html[lang="ar"] input, html[lang="ar"] select, html[lang="ar"] textarea, html[lang="ar"] button { font-family: "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif; } /* Arabic is a joined script: any letter-spacing breaks the joins, and it has no letter case. Neutralise the selectors that set either. */ html[lang="ar"] .nav-logo, html[lang="ar"] .hero h1, html[lang="ar"] .section h2, html[lang="ar"] .card .meta, html[lang="ar"] .plan-tag, html[lang="ar"] .table th, html[lang="ar"] .page-head h1, html[lang="ar"] .side-quota-label, html[lang="ar"] .hero-v2-eyebrow, html[lang="ar"] .hero-v2-title, html[lang="ar"] .eyebrow-v2, html[lang="ar"] .title-v2, html[lang="ar"] .strip-v2-label, html[lang="ar"] .quote-big, html[lang="ar"] .stat-v2-n, html[lang="ar"] .cta-v2-title, html[lang="ar"] .df-dowc { letter-spacing: normal; text-transform: none; } /* Urdu typography (ADR-0124). Noto Nastaliq Urdu - the Nastaliq style Pakistani readers expect (Naskh reads as Arabic to them) - self-hosted and subset to the Arabic-script ranges (static/fonts, SIL OFL 1.1, ~200 KB variable 400-700). unicode-range means Latin text (names, emails, English terms) keeps the UI font and the file is only fetched where Urdu text is on screen. :lang(ur) also covers Urdu islands on other pages (a job ad or an interview in Urdu). Nastaliq is tall and slanted, so it needs a generous line height (~2) and never takes letter-spacing, capitals or italics. */ @font-face { font-family: "Noto Nastaliq Urdu"; src: url("/static/fonts/NotoNastaliqUrdu-urdu.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+25CC; } :lang(ur), html[lang="ur"] body, html[lang="ur"] input, html[lang="ur"] select, html[lang="ur"] textarea, html[lang="ur"] button { font-family: "Noto Nastaliq Urdu", "Segoe UI", system-ui, -apple-system, sans-serif; } :lang(ur) { line-height: 2; font-style: normal; letter-spacing: normal; } html[lang="ur"] body { line-height: 2; } html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3, html[lang="ur"] .hero-v2-title, html[lang="ur"] .title-v2, html[lang="ur"] .cta-v2-title, html[lang="ur"] .page-head h1 { line-height: 1.75; } /* Controls: room for Nastaliq's ascenders / descenders without clipping. */ html[lang="ur"] .btn, html[lang="ur"] .btn-v2, html[lang="ur"] input, html[lang="ur"] select, html[lang="ur"] textarea, html[lang="ur"] .badge, html[lang="ur"] .chip, html[lang="ur"] .tab, html[lang="ur"] .set-tab, html[lang="ur"] .side-item { line-height: 1.9; } /* A