/* ============================================================ LynkedUp Pro · fusion build Dark dusk canvas · sky-cyan = brand/interactive · amber = data/money ============================================================ */ :root{ --canvas:#0B0D10; --surface:#12151A; --surface-2:#171B21; --border:#20242B; --border-strong:#2F3540; --sky:#45AFC9; --sky-bright:#7CCFE2; --sky-dim:#1D586B; --amber:#F2A83B; --amber-dim:#7D5A1A; --red:#F26D6D; --green:#4CC38A; --green-dim:#1F5A3D; --text:#EDEFF2; --dim:#98A0AA; --faint:#68727D; --mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,"Courier New",monospace; --sans:"Inter Variable",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:clip} body{ background:var(--canvas); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:clip; } ::selection{background:rgba(69,175,201,.3);color:var(--text)} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px} img,svg{max-width:100%;height:auto;display:block} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} /* ---------- scrollbar: minimal amber, materialises only while scrolling ---------- */ ::-webkit-scrollbar{width:9px;height:9px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-corner{background:transparent} ::-webkit-scrollbar-thumb{ background:transparent;border-radius:8px; border:2.5px solid transparent;background-clip:padding-box; } html.scrolling ::-webkit-scrollbar-thumb{background-color:rgba(242,168,59,.45);background-clip:padding-box} ::-webkit-scrollbar-thumb:hover{background-color:rgba(242,168,59,.75)!important;background-clip:padding-box} html{scrollbar-width:thin;scrollbar-color:transparent transparent} html.scrolling{scrollbar-color:rgba(242,168,59,.5) transparent} body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:120;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } /* ---------- equipment-label utilities ---------- */ .tag{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); } .tag b{color:var(--dim);font-weight:600} .tag.ok{color:var(--sky)} .num{font-family:var(--mono);font-variant-numeric:tabular-nums} /* permit stamps (from the Plano register) */ .stamp-tag{ display:inline-flex;align-items:center;gap:6px;width:max-content; border:1.5px solid currentColor;padding:3px 10px;border-radius:3px; font-family:var(--mono);font-size:9px;font-weight:700; letter-spacing:.18em;text-transform:uppercase; transform:rotate(-2deg);opacity:.75; } .stamp-tag.ok{color:#4CC38A} .stamp-tag.sky{color:var(--sky)} .stamp-tag.danger{color:var(--red)} .stamp-tag.caution{color:var(--amber)} /* ---------- header ---------- */ header{ position:sticky;top:0;z-index:90; background:rgba(11,13,16,.66); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid rgba(255,255,255,.06); } .nav{display:flex;align-items:center;gap:28px;height:60px} .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.01em} /* Wordmark lockup (195x42): fix the height and let width follow the aspect ratio. */ .logo img{height:26px;width:auto;display:block} .nav-links{display:flex;gap:26px;margin-left:auto} .nav-links a{font-size:14px;color:var(--dim);transition:color .12s ease;position:relative} .nav-links a::before{ content:"\25B8";position:absolute;left:-13px;top:50%; transform:translate(-4px,-50%);opacity:0;color:var(--sky);font-size:9px; transition:opacity .12s ease,transform .15s cubic-bezier(.2,0,0,1); } .nav-links a:hover::before{opacity:1;transform:translate(0,-50%)} .nav-links a::after{ content:"";position:absolute;left:0;bottom:-4px;height:1px;width:100%; background:var(--sky);transform:scaleX(0);transform-origin:left; transition:transform .15s cubic-bezier(.2,0,0,1); } .nav-links a:hover{color:var(--text)} .nav-links a:hover::after{transform:scaleX(1)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sans);font-size:14px;letter-spacing:.005em;font-weight:560; padding:10px 20px;border:1px solid var(--border-strong);border-radius:6px; color:var(--text);background:transparent;cursor:pointer; position:relative;overflow:hidden; transition:transform .08s ease,background .12s ease,border-color .12s ease,color .12s ease,box-shadow .15s ease; } .btn:hover{border-color:rgba(237,239,242,.3);color:#fff;background:rgba(255,255,255,.03)} .btn:active{transform:translateY(1px)} .btn.solid{ background:#2D9FBF; border-color:rgba(124,207,226,.45);color:#04202A;font-weight:640; box-shadow:0 8px 26px -14px rgba(69,175,201,.6),inset 0 1px 0 rgba(255,255,255,.28); } .btn.solid::before{ content:"";position:absolute;inset:-2px;pointer-events:none; background:linear-gradient(115deg,transparent 0 22%,rgba(2,26,33,.15) 22% 38%,transparent 38% 54%,rgba(2,26,33,.15) 54% 70%,transparent 70% 100%); transform:translateX(-130%);transition:transform .2s ease; } .btn.solid:hover::before{transform:translateX(130%)} .btn.solid:hover{ background:#39B2D2;color:#04202A; box-shadow:0 10px 30px -12px rgba(69,175,201,.7),inset 0 1px 0 rgba(255,255,255,.32); } .nav .btn{padding:9px 16px;margin-left:6px} /* ---------- station rail ---------- */ .rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);height:min(58vh,480px);z-index:80} .rail-track{ position:relative;width:16px;height:100%;border-right:1px solid var(--border-strong); background:repeating-linear-gradient(to bottom,rgba(46,59,72,.85) 0 1px,transparent 1px 12px); background-size:7px 100%;background-position:100% 0;background-repeat:no-repeat; } .rail-node{ position:absolute;right:-5px;width:9px;height:9px;padding:0; border:1px solid var(--border-strong);background:var(--canvas); transform:translateY(-50%) rotate(45deg);cursor:pointer; transition:border-color .12s ease,background .12s ease,box-shadow .12s ease; } .rail-node:hover{border-color:var(--amber)} .rail-node.on{border-color:var(--amber);background:rgba(242,168,59,.25);box-shadow:0 0 10px rgba(242,168,59,.35)} .rail-carriage{ position:absolute;left:-8px;right:-2px;height:2px;background:var(--amber); box-shadow:0 0 10px rgba(242,168,59,.5);pointer-events:none; } .rail-read{ position:absolute;right:24px;top:50%;transform:translateY(-50%);white-space:nowrap; font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--amber); padding:3px 8px;border-radius:3px;border:1px solid rgba(242,168,59,.22); background:rgba(11,13,16,.82); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); } @media(max-width:1020px){.rail{display:none}} /* ---------- hero ---------- */ .hero{ padding:76px 0 96px;position:relative;overflow:hidden; background: radial-gradient(1000px 560px at 78% -5%, rgba(69,175,201,.05), transparent 62%), radial-gradient(760px 420px at -5% 105%, rgba(242,168,59,.03), transparent 60%), linear-gradient(rgba(237,239,242,.026) 1px, transparent 1px), linear-gradient(90deg, rgba(237,239,242,.026) 1px, transparent 1px), var(--canvas); background-size:auto,auto,56px 56px,56px 56px,auto; } .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:56px;align-items:start;position:relative;z-index:1} .hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero-glow{ position:absolute;left:0;top:0;width:520px;height:520px;border-radius:50%; background:radial-gradient(circle,rgba(69,175,201,.08),transparent 65%); pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .3s ease; } .eyebrow{display:inline-block;border:1px solid var(--border);padding:6px 12px;border-radius:2px;margin-bottom:26px} h1{ font-size:clamp(2.9rem,5.4vw,4.7rem); line-height:1.03;letter-spacing:-.034em;font-weight:640; text-wrap:balance;margin-bottom:20px; } h1 em{font-style:normal;color:var(--amber)} .hero-sub{color:var(--dim);font-size:17px;max-width:46ch;margin-bottom:32px} .hero-sub strong{color:var(--text);font-weight:600} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px} .hero-proof{display:flex;gap:26px;flex-wrap:wrap} .hero-proof div{border-left:1px solid var(--border);padding-left:14px} .hero-proof .num{display:block;font-size:20px;font-weight:600;color:var(--text)} .hero-proof .tag{display:block;font-size:10px;margin-top:3px} /* survey detail: contours + benchmark, anchors the hero's lower left */ .survey{ position:absolute;left:32px;bottom:74px;width:206px;z-index:2; pointer-events:none;opacity:.55; fill:none;stroke-linecap:round;stroke-linejoin:round; } .survey .c1{stroke:rgba(237,239,242,.1);stroke-width:1;stroke-dasharray:1 4} .survey .c2{stroke:rgba(69,175,201,.35);stroke-width:1.2} .survey text{fill:var(--faint);stroke:none;font:500 7.5px var(--mono);letter-spacing:.14em} @media(max-width:1240px){.survey{display:none}} /* mobile scroll progress (the rail's stand-in below 1020px) */ .mprog{display:none} @media(max-width:1020px){ .mprog{display:block;position:fixed;top:0;left:0;right:0;height:2px;z-index:95;pointer-events:none} .mprog i{ display:block;height:100%;transform-origin:0 50%;transform:scaleX(0); background:var(--amber);box-shadow:0 0 8px rgba(242,168,59,.55); } } /* HUD corner annotations */ .hud{position:absolute;bottom:22px;z-index:2;font-family:var(--mono)} .hud-l{left:32px;border-left:1px solid rgba(69,175,201,.35);padding-left:12px} .hud-r{right:32px;border-right:1px solid rgba(242,168,59,.35);padding-right:12px;text-align:right} .hud-a{font-size:11px;letter-spacing:.1em;color:rgba(91,217,238,.85)} .hud-a.warn{color:rgba(242,168,59,.85)} .hud-a span{margin-right:6px} .hud-b{font-size:10px;letter-spacing:.1em;color:var(--faint);margin-top:4px} @media(max-width:1240px){.hud{display:none}} /* ---------- estimator (signature) ---------- */ .est{ border:1px solid;border-radius:8px;overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 40%), rgba(18,21,26,.72); border-color:rgba(255,255,255,.085) rgba(255,255,255,.05) rgba(0,0,0,.55); box-shadow: 0 24px 60px -30px rgba(0,0,0,.85), 0 0 80px -22px rgba(69,175,201,.16), inset 0 1px 0 rgba(255,255,255,.06); } .est-bar{ display:flex;align-items:center;justify-content:space-between; padding:10px 16px;border-bottom:1px solid var(--border); background:var(--surface-2); } .est-bar .dot,.ip-head .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sky);margin-right:8px;animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} .est-addr{display:flex;gap:8px;padding:14px 16px 0} .est-addr input{ flex:1;min-width:0;background:var(--canvas); border:1px solid var(--border);border-radius:4px; color:var(--text);font-family:var(--mono);font-size:12.5px; padding:10px 12px;letter-spacing:.02em; } .est-addr input::placeholder{color:var(--faint)} .est-addr input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(69,175,201,.13)} .est-addr .btn{padding:9px 18px} /* ---------- custom address dropdown (native