/* Quantum Connect Limited — shared styles Fonts are loaded via tags in each page's (Manrope, Public Sans, IBM Plex Mono). */ :root{ --ink:#101828; --charcoal:#0a1d37; --charcoal-2:#0f2b4c; --paper:#ffffff; --paper-2:#f4f6f9; --line:#e1e5eb; --line-dark:#24314a; --blue-deep:#17408f; --blue:#2158c7; --blue-light:#6fa8ff; --muted:#5b6472; --muted-dark:#a9b4c4; --paper-rgb:255,255,255; --bg:var(--paper); --bg-raised:#ffffff; --text:var(--ink); --text-muted:var(--muted); --border:var(--line); --accent:var(--blue); --accent-deep:var(--blue-deep); --header-bg:rgba(255,255,255,.96); } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0d1420; --bg-raised:#141d2c; --text:#eef1f6; --text-muted:var(--muted-dark); --border:var(--line-dark); --accent:var(--blue-light); --accent-deep:var(--blue-light); --header-bg:rgba(13,20,32,.94); } } :root[data-theme="dark"]{ --bg:#0d1420; --bg-raised:#141d2c; --text:#eef1f6; --text-muted:var(--muted-dark); --border:var(--line-dark); --accent:var(--blue-light); --accent-deep:var(--blue-light); --header-bg:rgba(13,20,32,.94); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html,body{overflow-x:hidden;max-width:100%} body{ margin:0; background:var(--bg); color:var(--text); font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{ font-family:'Manrope','Public Sans',-apple-system,sans-serif; font-weight:700; line-height:1.15; letter-spacing:-.01em; text-wrap:balance; margin:0; color:var(--text); } h3,h4{font-weight:600} p{margin:0} .mono{font-family:'IBM Plex Mono',ui-monospace,monospace} .wrap{max-width:1180px;margin:0 auto;padding-inline:24px} @media (max-width:640px){.wrap{padding-inline:18px}} .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); display:flex; align-items:center; gap:10px; } .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-deep)} /* ---------- header ---------- */ header.site-header{ position:sticky;top:env(safe-area-inset-top,0px);z-index:50; background:var(--header-bg); border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(16,24,40,.02),0 2px 12px rgba(16,24,40,.04); } .header-inner{ display:flex;align-items:center;justify-content:space-between; gap:20px;padding-block:16px; } .brand{display:flex;align-items:center;gap:12px;text-decoration:none} .brand svg{width:36px;height:36px;flex:none} .brand-text{display:flex;flex-direction:column;line-height:1.1} .brand-name{font-family:'Manrope',sans-serif;font-weight:800;font-size:18.5px;letter-spacing:-.01em;color:var(--text)} .brand-sub{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)} nav.main-nav{display:flex;align-items:center;gap:32px} nav.main-nav a{ text-decoration:none;font-size:14.5px;font-weight:600;color:var(--text-muted); padding-block:4px;border-bottom:2px solid transparent; } nav.main-nav a:hover{color:var(--text)} nav.main-nav a[aria-current="page"]{color:var(--accent-deep);border-bottom-color:var(--accent)} .header-cta{display:flex;align-items:center;gap:18px} .nav-toggle{display:none;background:none;border:1px solid var(--border);border-radius:6px;width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer;color:var(--text)} .nav-toggle svg{width:20px;height:20px} @media (max-width:900px){ nav.main-nav{ position:fixed;inset:0 0 0 auto;top:0;height:100vh;width:min(320px,84vw); background:var(--bg-raised);border-left:1px solid var(--border); flex-direction:column;align-items:flex-start;justify-content:flex-start; padding:88px 28px 28px;gap:22px; transform:translateX(100%);transition:transform .28s ease; } nav.main-nav.open{transform:translateX(0)} nav.main-nav a{font-size:17px} .nav-toggle{display:inline-flex} .header-cta .btn{display:none} } /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; font-family:'Public Sans',sans-serif;font-weight:700;font-size:14.5px; padding:13px 24px;border-radius:7px;text-decoration:none; border:1.5px solid transparent;cursor:pointer;white-space:nowrap; transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease; } .btn-primary{background:var(--blue);color:#ffffff;box-shadow:0 1px 2px rgba(16,24,40,.05)} .btn-primary:hover{background:var(--blue-deep)} :root[data-theme="dark"] .btn-primary{background:var(--accent);color:#0a1220} :root[data-theme="dark"] .btn-primary:hover{background:#8fbcff} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .btn-primary{background:var(--accent);color:#0a1220} :root:not([data-theme="light"]) .btn-primary:hover{background:#8fbcff} } .btn-ghost{border-color:var(--border);color:var(--text);background:transparent} .btn-ghost:hover{border-color:var(--blue);color:var(--blue-deep)} :root[data-theme="dark"] .btn-ghost:hover{color:var(--blue-light)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn-ghost:hover{color:var(--blue-light)}} .btn-arrow{transition:transform .15s ease} .btn:hover .btn-arrow{transform:translateX(3px)} /* ---------- sections / bands ---------- */ section{padding-block:88px} section.tight{padding-block:64px} @media (max-width:640px){section{padding-block:56px} section.tight{padding-block:44px}} .band-dark{background:var(--charcoal);color:#fff} .band-dark h1,.band-dark h2,.band-dark h3{color:#fff} .band-dark .eyebrow{color:var(--blue-light)} .band-dark .eyebrow::before{background:var(--blue-light)} .band-dark p{color:#c3ccdb} .hero{ position:relative;overflow:hidden; padding-block:76px 84px; background:var(--charcoal);color:#fff; } .hero::before{ content:"";position:absolute;top:-18%;right:-10%;width:640px;height:640px; background: radial-gradient(circle at center, transparent 0 118px, rgba(111,168,255,.16) 119px 121px, transparent 122px), radial-gradient(circle at center, transparent 0 168px, rgba(111,168,255,.10) 169px 171px, transparent 172px), radial-gradient(circle at center, transparent 0 218px, rgba(255,255,255,.06) 219px 221px, transparent 222px); border-radius:50%;pointer-events:none; } .hero .wrap{position:relative} .hero .eyebrow{color:var(--blue-light)} .hero .eyebrow::before{background:var(--blue-light)} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:end} @media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px}} .hero h1{font-size:clamp(34px,4.6vw,54px);max-width:15ch;margin-top:16px;color:#fff} .hero .lede{font-size:18px;color:#c3ccdb;max-width:46ch;margin-top:20px} .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .hero-facts{display:grid;gap:16px;border-top:1px solid rgba(255,255,255,.16);padding-top:22px} .hero-facts div{display:flex;justify-content:space-between;gap:16px;font-size:14px} .hero-facts span:first-child{color:#9aa7bc} .hero-facts span:last-child{font-family:'IBM Plex Mono',monospace;color:#fff} .hero .btn-ghost{border-color:rgba(255,255,255,.38);color:#fff} .hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)} .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:44px} .section-head h2{font-size:clamp(26px,3.2vw,36px);margin-top:14px;max-width:20ch} .section-head .lede{max-width:38ch;color:var(--text-muted);font-size:15.5px} @media (max-width:700px){.section-head{flex-direction:column;align-items:flex-start}} /* pillars / services grid */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)} @media (max-width:900px){.pillars{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.pillars{grid-template-columns:1fr}} .pillar{background:var(--bg-raised);padding:30px 26px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transition:background .15s ease} .pillar:hover{background:var(--paper-2)} .pillar-icon{width:52px;height:52px;border-radius:10px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;color:var(--blue-deep)} .pillar-icon svg{width:26px;height:26px} :root[data-theme="dark"] .pillar-icon{background:rgba(111,168,255,.12);color:var(--blue-light)} @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pillar-icon{background:rgba(111,168,255,.12);color:var(--blue-light)}} .pillar-num{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--accent-deep)} .pillar h3{font-size:18.5px;font-weight:700} .pillar p{font-size:14.5px;color:var(--text-muted)} .pillar .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px} .pillar .tags span{font-size:11.5px;font-family:'IBM Plex Mono',monospace;border:1px solid var(--border);border-radius:20px;padding:3px 9px;color:var(--text-muted)} /* stat band */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:40px} @media (max-width:800px){.stats{grid-template-columns:repeat(2,1fr);gap:32px}} .stat b{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(30px,4vw,42px);font-variant-numeric:tabular-nums;display:block;color:var(--blue-light)} .stat span{font-size:13px;color:#c3ccdb} /* cards */ .card{border:1px solid var(--border);padding:28px;background:var(--bg-raised)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:26px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} @media (max-width:800px){.grid-2,.grid-3{grid-template-columns:1fr}} .checklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .checklist li{display:flex;gap:12px;font-size:15px;align-items:flex-start} .checklist li svg{flex:none;width:16px;height:16px;margin-top:4px;color:var(--accent-deep)} /* CTA banner */ .cta-banner{border:1px solid var(--border);padding:52px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap} .cta-banner h2{font-size:clamp(22px,3vw,30px);max-width:20ch} /* footer */ footer{background:var(--charcoal);color:#c3ccdb;padding-block:64px 30px} footer a{text-decoration:none;color:#c3ccdb} footer a:hover{color:#fff} .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px} @media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr;row-gap:34px}} @media (max-width:480px){.footer-grid{grid-template-columns:1fr}} .footer-col h4{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#7c8aa3;margin-bottom:16px;font-weight:500} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14.5px} .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px} .footer-brand svg{width:28px;height:28px} .footer-brand span{font-family:'Manrope',sans-serif;font-weight:800;font-size:17px;color:#fff} .footer-bottom{border-top:1px solid var(--line-dark);margin-top:50px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;color:#7c8aa3} /* page hero (interior pages) */ .page-hero{ position:relative;overflow:hidden; padding-block:52px 58px; background:var(--charcoal);color:#fff; } .page-hero::before{ content:"";position:absolute;top:-40%;right:-6%;width:420px;height:420px; background: radial-gradient(circle at center, transparent 0 78px, rgba(111,168,255,.16) 79px 81px, transparent 82px), radial-gradient(circle at center, transparent 0 118px, rgba(255,255,255,.06) 119px 121px, transparent 122px); border-radius:50%;pointer-events:none; } .page-hero .wrap{position:relative} .page-hero h1{font-size:clamp(30px,4vw,46px);margin-top:16px;max-width:20ch;color:#fff} .page-hero .lede{font-size:17px;color:#c3ccdb;max-width:52ch;margin-top:18px} .page-hero .eyebrow{color:var(--blue-light)} .page-hero .eyebrow::before{background:var(--blue-light)} .breadcrumb{font-family:'IBM Plex Mono',monospace;font-size:12px;color:#9aa7bc;text-transform:uppercase;letter-spacing:.08em} .breadcrumb a{text-decoration:none;color:#9aa7bc} .breadcrumb a:hover{color:var(--blue-light)} .page-hero .btn-ghost{border-color:rgba(255,255,255,.38);color:#fff} .page-hero .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)} /* forms */ .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px} .field label{font-size:13px;font-weight:600;color:var(--text-muted)} .field input,.field textarea,.field select{ font-family:'Public Sans',sans-serif;font-size:15px;padding:13px 14px; border:1px solid var(--border);border-radius:3px;background:var(--bg-raised);color:var(--text); } .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px} .field textarea{resize:vertical;min-height:130px} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:640px){.form-row{grid-template-columns:1fr}} /* job listings */ .job{border:1px solid var(--border);padding:30px} .job + .job{margin-top:18px} .job-head{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start} .job-head h3{font-size:20px;font-weight:700} .job-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px} .job-meta span{font-family:'IBM Plex Mono',monospace;font-size:11.5px;border:1px solid var(--border);border-radius:20px;padding:4px 10px;color:var(--text-muted)} .job-body{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:26px} @media (max-width:700px){.job-body{grid-template-columns:1fr}} .job-body h4{font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:10px;font-weight:500} .job-body ul{margin:0;padding-left:18px;font-size:14.5px;display:flex;flex-direction:column;gap:7px} .job-foot{margin-top:22px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px} [hidden]{display:none!important}