/* ── SYNC marketing shared stylesheet ── Base tokens, fonts, top bar + left dropdown, footer. Used by /about and /careers/home (the landing page carries its own inline copy). */ @font-face { font-family: 'Mona Sans'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/mona-sans:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 200 900; font-display: swap; font-style: normal; } :root { --bg: #1a1a1a; --card: #212121; --line: #333333; --ink: #ffffff; --muted: #a3a3a3; --red: #FF4121; --green: #01F081; --lime: #AFF152; --orange: #FF9700; --cream: #FBF4E9; } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: 'Mona Sans', 'Noto Sans Arabic', -apple-system, 'Segoe UI', sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, .ar { font-family: 'Noto Sans Arabic', 'Mona Sans', sans-serif; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; } bdi, .ltr { unicode-bidi: isolate; } .ltr { direction: ltr; } .mono { font-family: 'Archivo Narrow', 'Mona Sans', monospace; text-transform: uppercase; letter-spacing: .22em; font-size: 12px; font-weight: 600; unicode-bidi: isolate; } .cut { border-top-left-radius: 16px; } .hl { background: var(--red); color: #000; padding: 0 .14em .04em; display: inline-block; line-height: 1; } .hl.green { background: var(--green); } .story { position: relative; } .story::after { content: ''; position: absolute; right: 0; bottom: -3px; height: 2px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .35s cubic-bezier(.22,1,.36,1); } .story:hover::after { transform: scaleX(1); } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: #fff; font-weight: 700; font-size: 15px; padding: 13px 24px; border: 0; cursor: pointer; font-family: 'Noto Sans Arabic', 'Mona Sans', sans-serif; transition: transform .12s, box-shadow .2s; } .btn:hover { box-shadow: 0 12px 30px rgba(255,65,33,.35); } .btn:active { transform: scale(.98); } .btn-green { background: var(--green); color: #000; } .btn-green:hover { box-shadow: 0 12px 30px rgba(1,240,129,.30); } .btn-ghost { background: transparent; border: 1px solid rgba(255,255,255,.28); color: var(--ink); } .btn-ghost:hover { border-color: var(--ink); box-shadow: none; } /* ── Red top bar ── */ header { position: sticky; top: 0; z-index: 60; background: var(--red); } .nav { display: flex; align-items: center; justify-content: flex-end; height: 64px; } header .brand { position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; z-index: 2; } .nav-logo { height: 100%; width: auto; display: block; } .nav-links { display: flex; align-items: center; gap: 20px; } .nav-flip { position: absolute; left: 50%; top: 0; transform: translateX(-50%); height: 64px; display: flex; align-items: center; overflow: hidden; pointer-events: none; z-index: 1; } .nav-flip span { font-family: 'Noto Sans Arabic', sans-serif; font-weight: 800; font-size: clamp(17.6px, 3.96vw, 21.45px); color: #fff; white-space: nowrap; letter-spacing: -.01em; } /* ── Left dropdown menu ── */ .menu-btn { position: absolute; left: 16px; top: 0; height: 64px; z-index: 3; display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; color: #fff; font-family: 'Noto Sans Arabic', sans-serif; font-weight: 700; font-size: 15px; } .menu-btn .bars { display: inline-flex; flex-direction: column; gap: 4px; width: 22px; } .menu-btn .bars i { display: block; height: 2.5px; background: #fff; transition: transform .25s, opacity .2s; } .menu-btn[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-btn[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; } .menu-btn[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .menu-backdrop { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .menu-backdrop.open { opacity: 1; visibility: visible; } .menu-panel { position: fixed; top: 64px; left: 0; z-index: 56; width: min(360px, 88vw); max-height: calc(100vh - 64px); overflow-y: auto; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: translateX(-100%); transition: transform .3s cubic-bezier(.22,1,.36,1); padding: 6px 0 20px; } .menu-panel.open { transform: none; } .menu-panel .mi { display: block; padding: 15px 24px; color: var(--ink); font-family: 'Noto Sans Arabic', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.01em; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .15s, color .15s; } .menu-panel .mi:hover { background: rgba(255,255,255,.05); color: var(--red); } .menu-panel .mi .mi-sub { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 3px; } /* Account entry point highlighted in SYNC green. */ .menu-panel .mi.account { color: var(--green); border-right: 3px solid var(--green); } .menu-panel .mi.account:hover { background: rgba(1,240,129,.08); color: var(--green); } .menu-panel .mi.account .mi-sub { color: rgba(1,240,129,.72); } /* Logout (only rendered when signed in) — quiet red, resets the