/* site.css — the public marketing site (landing / about / careers). Themeable dark (Void, default) + light (Chart) via [data-theme] on , sharing the app's `atlas_theme` localStorage key so the choice carries into the map. Palette mirrors theme.js. Self-contained (no app modules). */ :root { --c-bg:#0b0d0e; --c-panel:#14181a; --c-line:#23292c; --c-border:#2c3236; --c-textHi:#e6eaeb; --c-text:#8fa3ab; --c-textLo:#6e8a94; --c-amber:#f5a623; --c-signal:#9adbe8; --c-confirm:#48F0C0; --c-alert:#f04800; --dot-hi:#4ACFF3; --dot-mid:#71E754; --dot-low:#DC6C08; } html[data-theme="light"] { --c-bg:#efe9da; --c-panel:#f7f2e6; --c-line:#ded3b6; --c-border:#cbbf9f; --c-textHi:#2a2c1f; --c-text:#5b5f4e; --c-textLo:#8a8b76; --c-amber:#b8761a; --c-signal:#1f6f86; --c-confirm:#1d9e75; --c-alert:#c0392b; --dot-hi:#2f86b0; --dot-mid:#4f9e2f; --dot-low:#b8461a; } @font-face{font-family:'Rajdhani';font-weight:400;font-display:swap;src:url('/static/fonts/rajdhani-400.woff2') format('woff2');} @font-face{font-family:'Rajdhani';font-weight:500;font-display:swap;src:url('/static/fonts/rajdhani-500.woff2') format('woff2');} @font-face{font-family:'Rajdhani';font-weight:600;font-display:swap;src:url('/static/fonts/rajdhani-500.woff2') format('woff2');} @font-face{font-family:'Share Tech Mono';font-weight:400;font-display:swap;src:url('/static/fonts/sharetechmono-400.woff2') format('woff2');} *{box-sizing:border-box} html,body{margin:0} body{background:var(--c-bg);color:var(--c-textHi);font-family:'Rajdhani',system-ui,sans-serif; -webkit-tap-highlight-color:transparent;line-height:1.5;} .mono{font-family:'Share Tech Mono',monospace} .ml{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-textLo)} a{color:inherit;text-decoration:none} .wrap{max-width:1080px;margin:0 auto;padding:0 22px} /* nav — sticky translucent bar: brand left, links + actions right */ .site-head{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--c-line); background:color-mix(in srgb, var(--c-bg) 85%, transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);} .nav{display:flex;align-items:center;gap:18px;padding-block:13px;} .brand{display:flex;align-items:center;gap:9px;font-size:18px;letter-spacing:.12em;font-weight:600;flex:none;} .brand .mark{color:var(--c-signal);display:block;flex:none} .brand .brand-txt{white-space:nowrap} .brand .a{color:var(--c-textHi)} .brand .b{color:var(--c-signal)} .nav-links{margin-left:auto;display:flex;align-items:center;gap:24px;} .nav-links a{position:relative;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:var(--c-text);padding:4px 1px;white-space:nowrap;transition:color .15s ease;} .nav-links a:hover{color:var(--c-textHi)} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--c-signal);transform:scaleX(0);transform-origin:left;transition:transform .2s ease;} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)} .nav-links a[aria-current="page"]{color:var(--c-textHi)} .nav-actions{display:flex;align-items:center;gap:12px;flex:none;} .nav-actions .btn{padding:9px 15px;font-size:12px;} .nav-actions .btn .t-short{display:none} .iconbtn{width:34px;height:34px;border:1px solid var(--c-border);border-radius:3px;display:flex;flex:none; align-items:center;justify-content:center;color:var(--c-textLo);cursor:pointer;background:transparent; transition:border-color .15s ease,color .15s ease;} .iconbtn:hover{border-color:var(--c-signal);color:var(--c-signal)} .btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-size:13px;letter-spacing:.12em; text-transform:uppercase;font-weight:500;padding:11px 18px;border-radius:3px;cursor:pointer;transition:transform .12s ease;} .btn:active{transform:scale(.97)} .btn-pri{background:var(--c-signal);color:var(--c-bg);border:1px solid var(--c-signal)} .btn-ghost{background:transparent;color:var(--c-signal);border:1px solid var(--c-border)} .btn-ghost:hover{border-color:var(--c-signal)} /* hero — text column + the live map preview (the preview is the larger column) */ .hero{display:flex;gap:30px;padding:48px 0 40px;flex-wrap:wrap;align-items:center;} .hero .col{flex:1 1 340px;min-width:300px} h1{font-size:40px;line-height:1.08;font-weight:600;margin:0} h2{font-size:20px;font-weight:500;margin:0} .lead{color:var(--c-text);font-size:16px;line-height:1.6;margin:16px 0 22px;max-width:460px} .note{color:var(--c-textLo);font-size:12px;margin-top:12px} /* live map preview — boots the real engine (preview.js); SVG is the fallback */ .preview{flex:1.4 1 440px;min-width:340px;max-width:100%;aspect-ratio:3/2;position:relative; background:var(--c-panel);border:1px solid var(--c-border);border-radius:3px;overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.28);} .pv-stage{position:absolute;inset:0} .pv-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .pv-fallback{position:absolute;inset:0;width:100%;height:100%} @keyframes march{to{stroke-dashoffset:-28}} .routeline{stroke-dasharray:6 6;animation:march 1.1s linear infinite} /* overlay HUD chips — mirror the app's scan box + route card */ .pv-search{position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:7px; background:color-mix(in srgb, var(--c-bg) 78%, transparent);backdrop-filter:blur(4px); border:1px solid var(--c-border);border-radius:3px;padding:7px 11px;font-size:11px; letter-spacing:.03em;color:var(--c-textLo);} .pv-search svg{color:var(--c-signal);flex:none} .pv-card{position:absolute;left:12px;right:12px;bottom:12px;display:flex;flex-direction:column;gap:8px; background:color-mix(in srgb, var(--c-bg) 86%, transparent);backdrop-filter:blur(6px); border:1px solid var(--c-border);border-radius:3px;padding:10px 12px;} .pv-next{display:flex;align-items:center;gap:9px} .pv-ml{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--c-textLo)} .pv-next-name{font-size:15px;font-weight:600;color:var(--c-textHi);letter-spacing:.02em} .pv-next-sec{font-size:12px} .pv-bar{height:3px;border-radius:2px;background:var(--c-line)} .pv-warn{display:none;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em; text-transform:uppercase;color:var(--c-alert)} .pv-warn svg{flex:none;animation:campblink 1s steps(1) infinite} .pv-warn b{font-weight:600} .pv-dest{display:flex;align-items:center;gap:8px} .pv-dest-name{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-amber)} .pv-eta{margin-left:auto;font-size:12px;color:var(--c-textHi)} @keyframes campblink{50%{opacity:.4}} /* sections */ .sec{padding:30px 0;scroll-margin-top:72px} .sec-h{margin-bottom:16px} .grid{display:grid;gap:14px} .g3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .card{background:var(--c-panel);border:1px solid var(--c-border);border-radius:3px;padding:18px} .card p{color:var(--c-text);font-size:14px;line-height:1.55;margin:8px 0 0} .card .ic{display:block;margin-bottom:10px} .step .n{font-family:'Share Tech Mono',monospace;color:var(--c-signal);font-size:20px} .step .t{font-size:15px;margin-top:4px} .step .d{color:var(--c-textLo);font-size:13px} /* pricing */ .plan{background:var(--c-panel);border:2px solid var(--c-signal);border-radius:3px;max-width:400px;margin:0 auto; text-align:center;padding:26px} .plan .free{font-family:'Share Tech Mono',monospace;font-size:30px;color:var(--c-confirm)} .plan .price{color:var(--c-text);font-size:15px;margin-top:4px} .plan ul{list-style:none;padding:0;margin:20px 0 6px;text-align:left;display:inline-block;font-size:14px;line-height:2.1} .plan li::before{content:"✓";color:var(--c-confirm);margin-right:9px} .fineprint{color:var(--c-textLo);font-size:12px;line-height:1.6;text-align:center;max-width:520px;margin:14px auto 0} /* careers / about prose */ .prose{max-width:720px} .prose p{color:var(--c-text);font-size:15px;line-height:1.7} .prose h2{margin:26px 0 10px} .role{background:var(--c-panel);border:1px solid var(--c-border);border-radius:3px;padding:16px 18px;margin-bottom:12px} .role .tag{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-amber);border:1px solid var(--c-border);padding:2px 8px;border-radius:3px} /* display + signature faces (loaded per-page via Google Fonts) */ .letter-title{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:40px;line-height:1.08; letter-spacing:.004em;margin:0} /* about — the founder's letter */ .letter{max-width:680px;margin:0 auto;padding:48px 0 12px} .letter-eyebrow{color:var(--c-signal);margin-bottom:14px} .letter-body{font-family:'Fraunces',Georgia,serif;color:var(--c-textHi);font-size:18px;line-height:1.8;margin-top:22px} .letter-body p{margin:0 0 20px} .letter-body > p:first-of-type::first-letter{font-family:'Fraunces',Georgia,serif;font-weight:600; font-size:3.4em;line-height:.72;float:left;margin:6px 12px 0 0;color:var(--c-signal)} .letter-signoff{font-style:italic;color:var(--c-text)} /* signature block (about + careers + apply) */ .sig{margin-top:10px} .sig-name{font-family:'Caveat',cursive;font-size:40px;line-height:1;color:var(--c-signal)} .sig-title{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--c-textLo);margin-top:8px} .letter-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;padding-top:26px;border-top:1px solid var(--c-line)} /* careers — value cards + closer */ .careers-lead{max-width:600px} .card h2{font-size:17px;font-weight:600;letter-spacing:.01em;line-height:1.25} .closer{max-width:680px} .closer p{font-family:'Fraunces',Georgia,serif;font-size:20px;line-height:1.6;color:var(--c-textHi);margin:0} .closer strong{color:var(--c-signal);font-weight:600} /* apply — interview form */ .appform{max-width:680px;margin-top:24px} .af-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field{display:flex;flex-direction:column;gap:6px} .field.span2{grid-column:1 / -1} .flbl{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--c-textLo)} .flbl i{color:var(--c-amber);font-style:normal} .field input,.field select,.field textarea{font-family:inherit;font-size:14px;color:var(--c-textHi); background:var(--c-panel);border:1px solid var(--c-border);border-radius:3px;padding:10px 12px;outline:none; width:100%;resize:vertical;transition:border-color .15s ease} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--c-signal)} .field input::placeholder,.field textarea::placeholder{color:var(--c-textLo)} .field select{appearance:none;-webkit-appearance:none;cursor:pointer} .af-consent{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--c-text)} .af-consent input{width:16px;height:16px;accent-color:var(--c-signal);flex:none} .af-consent a{color:var(--c-signal)} .af-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px} .af-note{color:var(--c-textLo);font-size:12px;line-height:1.6;margin:14px 0 0} .apply-done{max-width:560px;margin-top:24px;background:var(--c-panel);border:1px solid var(--c-border); border-radius:3px;padding:28px;text-align:center} .apply-done[hidden]{display:none} .apply-done svg{display:block;margin:0 auto} .apply-done h2{font-family:'Fraunces',Georgia,serif;font-size:24px;margin:12px 0 8px} .apply-done p{color:var(--c-text);font-size:14px;line-height:1.6;margin:0 auto;max-width:430px} .apply-done .af-actions{justify-content:center} /* FAQ (native disclosure) */ .faq{max-width:760px;border-top:1px solid var(--c-line)} .faq-item{border-bottom:1px solid var(--c-line)} .faq-item summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px; padding:16px 2px;font-size:16px;color:var(--c-textHi)} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";margin-left:auto;color:var(--c-signal);font-size:20px;line-height:1} .faq-item[open] summary::after{content:"\2013"} .faq-item summary:hover{color:var(--c-signal)} .faq-item p{color:var(--c-text);font-size:14px;line-height:1.7;margin:0 2px 18px;max-width:700px} /* careers — open roles + discord callout */ .role-title{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:17px;font-weight:600;margin:10px 0 6px} .role-title .lvl{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--c-signal); border:1px solid var(--c-border);border-radius:3px;padding:2px 7px;font-weight:500} .role p{color:var(--c-text);font-size:14px;line-height:1.55;margin:0} .discord-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; background:var(--c-panel);border:1px solid var(--c-border);border-radius:3px;padding:22px 24px} .discord-cta h2{font-size:20px} /* terms */ .terms-updated{color:var(--c-textLo);font-size:12px;letter-spacing:.04em;margin:6px 0 0} .terms h2{font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:600;color:var(--c-textHi);margin:28px 0 8px} .terms p,.terms li{color:var(--c-text);font-size:15px;line-height:1.75} .terms ul{padding-left:20px;margin:8px 0} .terms li{margin:4px 0} .terms a{color:var(--c-signal)} .terms-foot{margin-top:26px;padding-top:18px;border-top:1px solid var(--c-line);color:var(--c-textLo);font-style:italic} /* hero preview height cap so the first screen stays tidy */ .preview{max-height:440px} /* footer */ .foot{border-top:1px solid var(--c-line);padding:22px 0 30px;margin-top:30px;display:flex;flex-direction:column;gap:12px;} .foot-top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .foot-links{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto;} .foot-links a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--c-text);transition:color .15s ease;} .foot-links a:hover{color:var(--c-signal)} .foot .legal{color:var(--c-textLo);font-size:11px;max-width:none;line-height:1.6;margin:0;} .foot .legal a{color:var(--c-text);text-decoration:underline;text-underline-offset:2px;} .foot .legal a:hover{color:var(--c-signal)} @media (max-width:640px){ h1{font-size:30px} .letter-title{font-size:30px} .letter-body{font-size:17px} .letter{padding-top:34px} .hero{gap:24px} .hero .col,.preview{flex-basis:100%;min-width:0} .preview{aspect-ratio:4/3} .nav{flex-wrap:wrap;gap:11px 14px;} .nav-actions{margin-left:auto;gap:10px;} .nav-actions .btn{padding:8px 13px;font-size:11px;} .nav-actions .btn .t-full{display:none} .nav-actions .btn .t-short{display:inline} .nav-links{order:3;flex-basis:100%;margin-left:0;justify-content:center;gap:20px; padding-top:11px;border-top:1px solid var(--c-line);} .af-grid{grid-template-columns:1fr} .discord-cta{flex-direction:column;align-items:flex-start} .foot-links{margin-left:0} }