/* ixMaps landing — Vercel-style design. Dark is the default (:root). Activate [data-theme="light"] on for the light variant. */ /* ── Variables ──────────────────────────────────────────────────────── */ :root{ --bg:#000000; --surface:#111111; --surface-2:#1a1a1a; --line:rgba(255,255,255,.07); --cyan:#0070f3; --green:#50e3c2; --amber:#f5a623; --emerald:#17c964; --red:#f31260; --text:#ededed; --muted:#888888; --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'DM Sans',system-ui,-apple-system,sans-serif; --maxw:1240px; /* component tokens */ --graticule:rgba(255,255,255,.035); --graticule-op:1; --chip-bg:rgba(255,255,255,.06); --btn-ink:#fff; --btn-sh:0 0 0 1px rgba(0,112,243,.3),0 8px 32px -8px rgba(0,112,243,.45); --btn-sh-hover:0 0 0 1px rgba(0,112,243,.5),0 16px 44px -8px rgba(0,112,243,.6); --ghost-bg:transparent; --nav-bg:rgba(0,0,0,.7); --nav-solid:rgba(0,0,0,.98); --brand-ix:#ededed; --sub-ink:var(--muted); --fig-border:rgba(255,255,255,.08); --fig-shadow:0 40px 80px -30px rgba(0,112,243,.2),inset 0 0 0 1px rgba(255,255,255,.04); --fig-tint:0,0,0; --code-key:#7bc47a; --code-bg:#0a0a0a; --code-fade:#0a0a0a; --code-shadow:0 32px 80px -24px rgba(0,0,0,.9); --code-ln:#e1e4e8; --code-lnno:#444d56; --code-fn:#79b8ff; --code-str:#9ecbff; --code-pun:#586069; --code-com:#6a737d; --code-num:#f0e64c; --cdn-ink:#79b8ff; --tag-bg:rgba(0,0,0,.85); --viz-bg:#0d0d0d; --viz-grid:#1c1c1c; --pie-base:#1c1c1c; --ramp1:#0f3d4d; --ramp2:#0e6b7e; --ramp3:#13a7b8; --ramp4:#3f8fd6; --rose:#4f7fe0; --logo-grid:#222; } /* ── Light theme ─────────────────────────────────────────────────────── */ [data-theme="light"]{ --bg:#f6f8fb; --surface:#ffffff; --surface-2:#eef2f8; --line:#dde4ee; --cyan:#2570e0; --green:#38a030; --amber:#f59e0b; --emerald:#10b981; --red:#ef4444; --text:#0f172a; --muted:#5b6b80; --graticule:rgba(15,23,42,.04); --graticule-op:1; --chip-bg:#ffffff; --btn-ink:#fff; --btn-sh:0 0 0 1px rgba(37,112,224,.3),0 8px 30px -8px rgba(37,112,224,.45); --btn-sh-hover:0 0 0 1px rgba(37,112,224,.5),0 14px 40px -8px rgba(37,112,224,.55); --ghost-bg:#ffffff; --nav-bg:rgba(255,255,255,.82); --nav-solid:rgba(255,255,255,.92); --brand-ix:#38a030; --sub-ink:var(--muted); --fig-border:rgba(15,23,42,.18); --fig-shadow:0 30px 70px -28px rgba(15,23,42,.4),inset 0 0 0 1px rgba(255,255,255,.04); --fig-tint:246,248,251; --code-key:#16a34a; --code-bg:#f1f5fb; --code-fade:#f1f5fb; --code-shadow:0 20px 50px -20px rgba(15,23,42,.18); --code-ln:#1e293b; --code-lnno:#94a3b8; --code-fn:#1d4ed8; --code-str:#0e7490; --code-pun:#64748b; --code-com:#9db4c8; --code-num:#b45309; --cdn-ink:var(--cyan); --tag-bg:rgba(255,255,255,.88); --viz-bg:#eef3f9; --viz-grid:#c7d2e0; --pie-base:#dde6ef; --ramp1:#a9dcea; --ramp2:#6fc4dc; --ramp3:#2ea7c8; --ramp4:#5566c8; --rose:#2e6fd0; --logo-grid:#c7d2e0; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:var(--sans); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* subtle line grid */ body::before{ content:""; position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(var(--graticule) 1px,transparent 1px), linear-gradient(90deg,var(--graticule) 1px,transparent 1px); background-size:64px 64px; opacity:var(--graticule-op); mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,#000 30%,transparent 90%); -webkit-mask-image:radial-gradient(ellipse 100% 80% at 50% 0%,#000 30%,transparent 90%); } /* ambient glow — blue + purple orbs */ body::after{ content:"";position:fixed;z-index:0;pointer-events:none; top:-20%;left:50%;width:80vw;height:60vh;transform:translateX(-50%); background:radial-gradient(circle at 30% 30%,rgba(0,112,243,.12),transparent 65%), radial-gradient(circle at 70% 60%,rgba(121,40,202,.10),transparent 65%); filter:blur(24px); } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;position:relative;z-index:1} a{color:inherit;text-decoration:none} ::selection{background:rgba(0,112,243,.3);color:#fff} .eyebrow{ font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase; color:var(--cyan);display:inline-block; } .eyebrow.muted{color:var(--muted)} h1,h2,h3{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0} .chip{ font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; color:var(--text);border:1px solid var(--line);border-radius:4px; padding:.4em .7em;background:var(--chip-bg);white-space:nowrap; } .chip b{color:var(--cyan);font-weight:700} /* ── Buttons ── */ .btn{ font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase; display:inline-flex;align-items:center;gap:.5em; padding:.85em 1.3em;border-radius:6px;border:1px solid transparent;cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease; } .btn-primary{ background:linear-gradient(120deg,#007cf0,#7928ca); color:var(--btn-ink);font-weight:700; box-shadow:var(--btn-sh); } .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--btn-sh-hover)} .btn-ghost{border-color:var(--line);background:var(--ghost-bg);color:var(--text)} .btn-ghost:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px)} .btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px} /* ===== NAV ===== */ header.nav{ position:sticky;top:0;z-index:50; backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); background:var(--nav-bg);border-bottom:1px solid var(--line); } .nav-inner{display:flex;align-items:center;gap:1.5rem;height:64px} .brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.15rem;letter-spacing:-.02em} .brand .mark{width:26px;height:26px;flex:none} .brand b{color:var(--cyan)} .brand .ix{color:var(--brand-ix)} .ver{font-family:var(--mono);font-size:.62rem;color:var(--muted);border:1px solid var(--line); border-radius:4px;padding:.2em .45em;letter-spacing:.08em;margin-left:.2rem} .nav-links{display:flex;align-items:center;gap:1.6rem;margin-left:auto} .nav-links .lnk{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .15s} .nav-links .lnk:hover{color:var(--text)} button.lnk{background:none;border:0;padding:0;cursor:pointer;text-align:left} .nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:6px;color:var(--text); width:42px;height:38px;cursor:pointer;font-size:1.1rem} /* ===== HERO ===== */ .hero{padding:clamp(3rem,7vw,6rem) 0 clamp(2.5rem,5vw,4rem)} .hero-grid{display:grid;grid-template-columns:1.05fr 1.1fr;gap:clamp(2rem,4vw,4rem);align-items:center} .hero h1{font-size:clamp(2.8rem,5.8vw,5rem);margin:.6rem 0 0} .hero h1 .accent{ background:linear-gradient(110deg,#007cf0,#bd34fe); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero .sub{font-size:1.12rem;color:var(--sub-ink);max-width:46ch;margin:1.4rem 0 0;font-weight:300} .hero .cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem} .hero .chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:2rem} /* hero map figure — terminal chrome follows the theme */ .hero-fig{position:relative;border:1px solid var(--fig-border);border-radius:14px;overflow:hidden; background:var(--viz-bg);box-shadow:var(--fig-shadow)} .hero-fig img{display:block;width:100%;height:auto} .fig-bar{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:.5rem; padding:0 .8rem;background:linear-gradient(180deg,rgba(var(--fig-tint),.85),rgba(var(--fig-tint),0)); font-family:var(--mono);font-size:.62rem;color:var(--muted);letter-spacing:.1em; z-index:3;pointer-events:none} .hero-map-wrap{position:relative;aspect-ratio:4/3;background:var(--viz-bg)} .hero-map-wrap img{position:absolute;inset:0;width:100%;height:100%;visibility:hidden} .hero-map-wrap.show-fallback img{visibility:visible} .hero-map-wrap.show-fallback .map-gate{display:none} #hero-map{position:absolute;inset:0;z-index:1} #hero-map .leaflet-container{background:var(--viz-bg)} .map-gate{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center; padding:0 0 9%;background:none;border:0;cursor:pointer} .map-gate .hint{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase; color:var(--text);background:rgba(var(--fig-tint),.88);border:1px solid rgba(0,112,243,.4);border-radius:6px; padding:.5em .9em;box-shadow:0 0 0 1px rgba(0,112,243,.15),0 10px 30px -10px rgba(0,112,243,.4)} .map-gate.off{display:none} .dot{width:9px;height:9px;border-radius:50%;background:var(--line)} .dot.live{background:var(--cyan);box-shadow:0 0 10px var(--cyan)} .readout{position:absolute;font-family:var(--mono);font-size:.64rem;letter-spacing:.06em; background:rgba(var(--fig-tint),.85);border:1px solid var(--line);border-radius:6px;padding:.45em .65em; color:var(--text);backdrop-filter:blur(4px);box-shadow:0 8px 24px -10px rgba(0,0,0,.35); z-index:3;pointer-events:none} .readout .k{color:var(--muted)} .readout .v{color:var(--cyan)} .r-zoom{right:5%;top:18%} /* ===== SECTION SHELL ===== */ section{padding:clamp(3rem,5.5vw,4.6rem) 0;position:relative;z-index:1} .sec-head{max-width:60ch;margin-bottom:2.2rem} .sec-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-top:.6rem} .sec-head p{color:var(--muted);margin:.8rem 0 0;font-size:1.02rem} .rule-top{border-top:1px solid var(--line)} /* ===== FEATURES ===== */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:12px;overflow:hidden} .feat{background:var(--surface);padding:1.8rem 1.6rem;transition:background .2s} .feat:hover{background:var(--surface-2)} .feat .ml{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);opacity:.85} .feat h3{font-size:1.15rem;margin:.5rem 0 .5rem} .feat p{color:var(--muted);font-size:.94rem;margin:0} /* "Why ixMaps" plain text cards */ .feat-grid:not(.tool-grid){background:transparent;border:0;border-radius:0;overflow:visible;gap:2.2rem 2.6rem} .feat-grid:not(.tool-grid) .feat{background:transparent;padding:0} .feat-grid:not(.tool-grid) .feat:hover{background:transparent} /* ===== CREATE / TOOLS ===== */ #create{ background: radial-gradient(ellipse 55% 60% at 15% 25%, rgba(108,66,245,.13) 0%, transparent 70%), radial-gradient(ellipse 50% 55% at 85% 75%, rgba(34,211,238,.10) 0%, transparent 65%), radial-gradient(ellipse 40% 45% at 65% 15%, rgba(99,102,241,.09) 0%, transparent 60%); } [data-theme="light"] #create{ background: radial-gradient(ellipse 55% 60% at 15% 25%, rgba(108,66,245,.07) 0%, transparent 70%), radial-gradient(ellipse 50% 55% at 85% 75%, rgba(34,211,238,.06) 0%, transparent 65%), radial-gradient(ellipse 40% 45% at 65% 15%, rgba(99,102,241,.05) 0%, transparent 60%); } #create .tool{background:transparent;border-color:rgba(108,66,245,.18)} #create .tool-body{background:rgba(17,17,17,.5);backdrop-filter:blur(8px)} [data-theme="light"] #create .tool-body{background:rgba(255,255,255,.42);backdrop-filter:blur(8px)} .tools{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .tool{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s} .tool:hover{transform:translateY(-5px);border-color:var(--cyan);box-shadow:0 18px 44px -24px rgba(0,112,243,.5)} .tool-viz{background:var(--viz-bg);border-bottom:1px solid var(--line);line-height:0} .tool-icon{height:88px;display:flex;align-items:center;justify-content:center} .ti-purple{background:linear-gradient(135deg,#6c42f5,#4338ca)} .ti-blue{background:linear-gradient(135deg,#0070f3,#2563eb)} .ti-teal{background:linear-gradient(135deg,#22d3ee,#0ea5e9)} /* Tool-viz SVG theming */ .tv-bg{fill:var(--viz-bg)} .tv-bar{fill:var(--surface)} .tv-sep{stroke:var(--line)} .tv-panel{fill:var(--surface);stroke:var(--line)} .tv-panel-grid{stroke:var(--viz-grid)} .tv-grid{stroke:var(--viz-grid)} .tv-muted{fill:var(--muted)} .tv-text{fill:var(--text)} .tv-card{fill:var(--surface);stroke:var(--line)} .tv-card-sel{fill:var(--surface-2);stroke:var(--cyan)} .tool-viz .tv{display:block;width:100%;height:auto} .tool-body{display:flex;flex-direction:column;gap:.45rem;padding:1.3rem 1.4rem 1.5rem;flex:1} .tool-body .ml{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)} .tool-body h3{font-size:1.18rem;margin:.1rem 0} .tool-body p{color:var(--muted);font-size:.92rem;margin:0;flex:1} .tool-cta{margin-top:1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cyan);font-weight:700;display:inline-flex;gap:.4rem;align-items:center} .tool-cta .arr{transition:transform .18s} .tool:hover .tool-cta .arr{transform:translate(2px,-2px)} @media (max-width:900px){ .tools{grid-template-columns:1fr} } /* ===== CODE ===== */ .code-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:2.4rem;align-items:start} .code-grid>*{min-width:0} .code-panel{ --code-bg:#0d1117; --code-fade:#0d1117; --code-ln:#e6edf3; --code-lnno:#484f58; --code-key:#ff7b72; --code-fn:#d2a8ff; --code-str:#a5d6ff; --code-pun:#8b949e; --code-com:#6e7681; --code-num:#f0883e; border:1px solid rgba(255,255,255,.08);border-radius:12px;overflow:hidden;background:var(--code-bg); box-shadow:0 20px 50px -20px rgba(0,0,0,.5)} .code-body{position:relative} .code-body::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;pointer-events:none; background:linear-gradient(90deg,transparent,var(--code-fade));opacity:.9} .code-chrome{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.08)} .code-chrome .tab{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--code-ln); background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-bottom:none;border-radius:6px 6px 0 0; padding:.4em .8em;margin-bottom:-.7rem;margin-top:.05rem} pre{margin:0;padding:1.4rem 1.3rem;overflow-x:auto;font-family:var(--mono);font-size:.82rem;line-height:1.75; counter-reset:ln;tab-size:2} pre code{display:block} .ln{display:block;white-space:pre;color:var(--code-ln)} .ln::before{counter-increment:ln;content:counter(ln);display:inline-block;width:2.2ch;margin-right:1.4ch; color:var(--code-lnno);text-align:right;font-size:.78em;user-select:none} .t-key{color:var(--code-key)} .t-fn{color:var(--code-fn)} .t-str{color:var(--code-str)} .t-pun{color:var(--code-pun)} .t-com{color:var(--code-com);font-style:italic} .t-num{color:var(--code-num)} .code-side h3{font-size:1.35rem;margin-bottom:.7rem} .code-side p{color:var(--muted);font-size:.96rem} .code-side a{color:var(--cyan);text-decoration:underline;text-underline-offset:2px} .code-side a:hover{opacity:.8} .cdn-box{position:relative;margin-top:1.4rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden} .cdn-box::after{content:"";position:absolute;right:0;bottom:0;width:30px;height:2.6rem;pointer-events:none; border-radius:0 0 8px 0;background:linear-gradient(90deg,transparent,var(--surface))} .cdn-box .cdn-top{display:flex;align-items:center;justify-content:space-between;padding:.5rem .8rem;border-bottom:1px solid var(--line)} .cdn-box .cdn-top span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .copy-btn{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan); background:none;border:1px solid var(--line);border-radius:4px;padding:.3em .6em;cursor:pointer;transition:.15s} .copy-btn:hover{border-color:var(--cyan);background:rgba(0,112,243,.08)} .cdn-box code{display:block;padding:.85rem .8rem;font-family:var(--mono);font-size:.74rem; color:var(--cdn-ink);overflow-x:auto;white-space:nowrap} /* ===== MAP TYPES ===== */ .type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem} .type-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface); transition:transform .2s,border-color .2s} .type-card:hover{transform:translateY(-4px);border-color:rgba(0,112,243,.4)} .type-card .viz{display:block;width:100%;height:auto;background:var(--viz-bg);border-bottom:1px solid var(--line)} .type-card .cap{padding:.6rem .8rem} .type-card .ml{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)} .type-card p{margin:.35rem 0 0;font-size:.84rem;color:var(--muted)} /* themed SVG parts */ .f-accent{fill:var(--cyan)} .s-accent{stroke:var(--cyan)} .stop-accent{stop-color:var(--cyan)} .tc-bg{fill:var(--viz-bg)} .tc-grid{stroke:var(--viz-grid)} .tc-pie{fill:var(--pie-base)} .tc-r1{fill:var(--ramp1)} .tc-r2{fill:var(--ramp2)} .tc-r3{fill:var(--ramp3)} .tc-r4{fill:var(--ramp4)} .tc-rose{stroke:var(--rose)} .tc-dot{fill:var(--text)} .logo-grid{stroke:var(--logo-grid)} /* ===== GALLERY ===== */ .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .gal-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface); display:flex;flex-direction:column;transition:transform .22s,border-color .22s,box-shadow .22s} .gal-card:hover{transform:translateY(-5px);border-color:rgba(0,112,243,.45); box-shadow:0 24px 50px -24px rgba(0,112,243,.3)} .gal-thumb{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:1px solid var(--line)} .gal-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease} .gal-card:hover .gal-thumb img{transform:scale(1.05)} .gal-tag{position:absolute;top:.7rem;left:.7rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em; text-transform:uppercase;color:var(--cyan);background:var(--tag-bg);border:1px solid var(--line); border-radius:4px;padding:.3em .55em;backdrop-filter:blur(4px)} .gal-body{padding:1.1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column} .gal-body h3{font-size:1.08rem;margin-bottom:.35rem} .gal-body p{color:var(--muted);font-size:.9rem;margin:0;flex:1} .gal-open{margin-top:1rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:var(--cyan);display:inline-flex;align-items:center;gap:.4em} .gal-card:hover .gal-open{text-shadow:0 0 12px rgba(0,112,243,.6)} .gal-more{grid-column:1/-1;text-align:center;margin-top:1.6rem} /* ===== CTA BAND ===== */ .cta-band{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden; padding:clamp(2.6rem,5vw,4rem);text-align:center;background:var(--surface)} .cta-band::before{content:"";position:absolute;inset:0; background:radial-gradient(circle at 25% 20%,rgba(0,112,243,.22),transparent 55%), radial-gradient(circle at 80% 80%,rgba(121,40,202,.22),transparent 55%);} .cta-band::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:48px 48px;opacity:.12;mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%); -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 75%)} .cta-band > *{position:relative;z-index:1} .cta-band h2{font-size:clamp(2rem,4vw,3rem);margin:.7rem auto 0;max-width:18ch} .cta-band .cdn-box{max-width:640px;margin:1.8rem auto 0;text-align:left} .cta-band .cta-row{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem} /* ===== FOOTER ===== */ footer{border-top:1px solid var(--line);padding:3.5rem 0 2.5rem;position:relative;z-index:1} .foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem} .foot-brand p{color:var(--muted);font-size:.92rem;max-width:34ch;margin:.9rem 0 0} .foot-col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin:0 0 .9rem} .foot-col a{display:block;color:var(--muted);font-size:.92rem;padding:.22rem 0;transition:color .15s} .foot-col a:hover{color:var(--text)} .foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-top:2.8rem;padding-top:1.6rem; border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;color:var(--muted)} .foot-bottom .coord{color:rgba(255,255,255,.18)} [data-theme="light"] .foot-bottom .coord{color:#c0cad8} /* ===== REVEAL ===== */ .reveal{transform:translateY(14px);transition:opacity .6s ease,transform .6s ease} .reveal.in{transform:none} body.reveal-armed .reveal:not(.in){opacity:.85} /* ===== RESPONSIVE ===== */ @media (min-width:1024px){ .type-grid{grid-template-columns:repeat(3,230px);justify-content:start;gap:.8rem} } @media (max-width:980px){ .hero-grid{grid-template-columns:1fr} .code-grid{grid-template-columns:1fr} .feat-grid{grid-template-columns:repeat(2,1fr)} .type-grid{grid-template-columns:repeat(2,1fr)} .gal-grid{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr} } @media (max-width:640px){ .nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0; background:var(--nav-solid);border-bottom:1px solid var(--line);padding:.6rem 28px 1.2rem;display:none} .nav-links.open{display:flex} .nav-links .lnk{padding:.7rem 0;width:100%;border-bottom:1px solid var(--line)} .nav-links .btn{margin-top:.8rem} .nav-toggle{display:block} .feat-grid{grid-template-columns:1fr} .type-grid{grid-template-columns:1fr 1fr} .gal-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .readout{font-size:.56rem} .hero .cta-row .btn{flex:1} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} body.reveal-armed .reveal:not(.in){opacity:1} }