/* ============================================================ HAXOR — v3 Design System · "Kinetic Product OS" T0 reusable system: tokens (light/dark) + base + kinetic components (nav, hero, bento + mini-UIs, disciplines, field-notes, CTA band, footer, .rv reveal). SCOPING RULE — everything is scoped under `.page` on purpose. The live diagnostic modal (#diagnosticModal) is rendered at level, OUTSIDE `.page`, and keeps using styles/main.css. By scoping v3 tokens to `.page` (not :root) we guarantee the modal palette (main.css :root vars) is never clobbered — even when the v3 light theme is toggled. Do NOT move these tokens to :root. Load AFTER styles/main.css. ============================================================ */ /* ---------- design tokens (scoped) ---------- */ .page{ /* light (default) */ --bg:#EDF1F0; --bg-2:#F6F8F7; --surface:#FFFFFF; --text:#0A0E0D; --muted:#59635F; --faint:#8B938F; --hair:rgba(10,14,13,.12); --hair-hi:rgba(0,168,134,.30); --accent:#00A886; --accent-2:#0A6E5C; --on-accent:#04211B; --shadow:0 1px 2px rgba(10,14,13,.06), 0 24px 60px -24px rgba(10,14,13,.20); --sans:'Inter',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,'Liberation Mono',monospace; --max:1200px; --step:clamp(14px,1.05vw,16px); } @media (prefers-color-scheme:dark){ :root:not([data-theme]) .page{ --bg:#060708; --bg-2:#0A0D0E; --surface:#0C1113; --text:#E9EDEC; --muted:#8A9491; --faint:#5C6663; --hair:rgba(255,255,255,.09); --hair-hi:rgba(0,212,170,.20); --accent:#00D4AA; --accent-2:#0A9E82; --on-accent:#001611; --shadow:0 1px 0 rgba(255,255,255,.03), 0 30px 80px -30px rgba(0,0,0,.8); } } :root[data-theme="dark"] .page{ --bg:#060708; --bg-2:#0A0D0E; --surface:#0C1113; --text:#E9EDEC; --muted:#8A9491; --faint:#5C6663; --hair:rgba(255,255,255,.09); --hair-hi:rgba(0,212,170,.20); --accent:#00D4AA; --accent-2:#0A9E82; --on-accent:#001611; --shadow:0 1px 0 rgba(255,255,255,.03), 0 30px 80px -30px rgba(0,0,0,.8); } :root[data-theme="light"] .page{ --bg:#EDF1F0; --bg-2:#F6F8F7; --surface:#FFFFFF; --text:#0A0E0D; --muted:#59635F; --faint:#8B938F; --hair:rgba(10,14,13,.12); --hair-hi:rgba(0,168,134,.30); --accent:#00A886; --accent-2:#0A6E5C; --on-accent:#04211B; --shadow:0 1px 2px rgba(10,14,13,.06), 0 24px 60px -24px rgba(10,14,13,.20); } /* ---------- base ---------- */ .page{ background:var(--bg); color:var(--text); font-family:var(--sans); font-size:var(--step); line-height:1.55; -webkit-font-smoothing:antialiased; letter-spacing:-.01em; overflow-x:hidden; } .page a{color:inherit;text-decoration:none} .page ::selection{background:var(--accent);color:var(--on-accent)} .page :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .page img{max-width:100%} .page .wrap{max-width:var(--max);margin-inline:auto;padding-inline:24px} .page .mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} .page .eyebrow{display:inline-flex;align-items:center;gap:.6em;color:var(--accent); font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase} .page .eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.7} /* ---------- top bar ---------- */ .page header.nav{position:fixed;inset:0 0 auto 0;z-index:50; backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2); background:color-mix(in srgb,var(--bg) 72%,transparent); border-bottom:1px solid transparent;transition:border-color .3s, background .3s} .page header.nav.scrolled{border-bottom:1px solid var(--hair)} .page .nav-in{display:flex;align-items:center;gap:22px;height:64px; max-width:var(--max);margin-inline:auto;padding-inline:24px} .page .logo{font-weight:700;font-size:1.05rem;letter-spacing:-.02em;color:var(--text)} .page .logo b{color:var(--accent)} .page nav.links{display:flex;gap:24px;margin-left:6px} .page nav.links a{color:var(--muted);font-size:.86rem;position:relative;transition:color .2s} .page nav.links a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0; background:var(--accent);transition:width .25s} .page nav.links a:hover{color:var(--text)} .page nav.links a:hover::after{width:100%} .page .nav-spacer{flex:1} .page .status-chip{display:inline-flex;align-items:center;gap:.5em;color:var(--muted); font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase; padding:6px 10px;border:1px solid var(--hair);border-radius:999px;white-space:nowrap} .page .dot{width:7px;height:7px;border-radius:50%;background:var(--accent); box-shadow:0 0 0 0 var(--accent);animation:hxpulse 2.4s infinite} @keyframes hxpulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)} 70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .page .icon-btn{display:grid;place-items:center;width:36px;height:36px;border-radius:8px; border:1px solid var(--hair);background:transparent;color:var(--muted);cursor:pointer;transition:.2s;font-size:1rem} .page .icon-btn:hover{color:var(--text);border-color:var(--hair-hi)} /* v3 buttons — scoped so they never touch the modal's .btn (main.css) */ .page .btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.88rem; padding:10px 18px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:.22s; will-change:transform;font-family:var(--sans);line-height:1;text-align:center} .page .btn-primary{background:var(--accent);color:var(--on-accent)} .page .btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)} .page .btn-ghost{border-color:var(--hair);color:var(--text);background:transparent} .page .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .page .btn .arw{transition:transform .22s} .page .btn:hover .arw{transform:translateX(3px)} /* v3 language switcher (reuses main.css .lang-pill markup, restyled) */ .page .lang-switcher{display:inline-flex;gap:2px;border:1px solid var(--hair);border-radius:999px;padding:3px} .page .lang-pill{background:transparent;border:0;cursor:pointer;color:var(--muted); font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;padding:5px 8px;border-radius:999px;transition:.2s} .page .lang-pill:hover{color:var(--text)} .page .lang-pill.active{background:var(--accent);color:var(--on-accent)} /* ---------- hero (committed dark cinematic) ---------- */ .page .hero{position:relative;min-height:100svh;display:flex;align-items:center; background:#050607;color:#EAF3F0;overflow:hidden;isolation:isolate} .page #gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block} .page .hero-fallback{position:absolute;inset:0;z-index:0; background:radial-gradient(120% 90% at 70% 20%,rgba(0,212,170,.22),transparent 55%), radial-gradient(90% 80% at 15% 90%,rgba(10,110,92,.28),transparent 60%),#050607} .page .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(5,6,7,.35) 0%,transparent 22%,transparent 62%,rgba(5,6,7,.92) 100%)} .page .hero-lines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5; background:linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/ calc(100% / 12) 100%; -webkit-mask:linear-gradient(180deg,#000 0,#000 60%,transparent 100%); mask:linear-gradient(180deg,#000 0,#000 60%,transparent 100%)} .page .hero-in{position:relative;z-index:2;width:100%;max-width:var(--max);margin-inline:auto; padding:120px 24px 90px;display:grid;grid-template-columns:1.4fr .9fr;gap:40px;align-items:end} .page .hero h1{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:.98;font-weight:700; letter-spacing:-.035em;margin:.5rem 0 0;text-wrap:balance;color:#F3FAF8} .page .hero h1 .em{font-style:normal;color:var(--accent)} .page .hero .sub{margin-top:1.4rem;max-width:52ch;color:#AEBEB9;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.6} .page .hero-cta{margin-top:2.2rem;display:flex;gap:14px;flex-wrap:wrap} .page .hero .btn-ghost{border-color:rgba(255,255,255,.18);color:#EAF3F0} .page .hero .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} /* instrument readout panel */ .page .readout{border:1px solid rgba(255,255,255,.12);border-radius:14px; background:rgba(8,12,12,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:20px; font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:#9FB1AC} .page .readout .rowr{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.08)} .page .readout .rowr:last-child{border-bottom:0} .page .readout b{color:#EAF3F0;font-weight:600;text-align:right} .page .readout .up{color:var(--accent)} .page .scroll-cue{position:absolute;left:24px;bottom:26px;z-index:2;display:flex;align-items:center;gap:10px; color:#7C8D89;font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase} .page .scroll-cue .bar{width:1px;height:34px;background:linear-gradient(#7C8D89,transparent);position:relative;overflow:hidden} .page .scroll-cue .bar::after{content:"";position:absolute;inset:0;background:var(--accent); animation:hxdrop 2.2s infinite ease-in-out} @keyframes hxdrop{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}} /* ---------- section frame ---------- */ .page section.band{position:relative;padding:110px 0;border-top:1px solid var(--hair)} .page .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:52px;flex-wrap:wrap} .page .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.9rem);line-height:1.04;letter-spacing:-.03em; font-weight:700;margin:.5rem 0 0;max-width:20ch;text-wrap:balance} .page .sec-head p{color:var(--muted);max-width:42ch;margin:0} .page .coord{color:var(--faint);font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase} /* ---------- systems bento ---------- */ .page .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px} .page .card{background:var(--surface);border:1px solid var(--hair);border-radius:16px; padding:22px;position:relative;overflow:hidden;box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s;will-change:transform} .page .card:hover{transform:translateY(-4px);border-color:var(--hair-hi)} .page .card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s; background:radial-gradient(420px 200px at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%)} .page .card:hover::before{opacity:1} .page .card.sp3{grid-column:span 3} .page .card.sp2{grid-column:span 2} .page .card.sp6{grid-column:span 6} .page .card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px} .page .card-name{font-weight:700;font-size:1.18rem;letter-spacing:-.02em} .page .card-name .sl{color:var(--accent)} .page .pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase; padding:4px 8px;border-radius:999px;border:1px solid var(--hair-hi);color:var(--accent); display:inline-flex;align-items:center;gap:.4em;white-space:nowrap} .page .pill .dot{width:6px;height:6px} .page .card-desc{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0 0 16px} .page .card-for{color:var(--faint);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;margin-top:14px} .page .card-link{margin-top:8px;display:inline-flex;align-items:center;gap:.5em;color:var(--accent);font-size:.85rem;font-weight:600} .page .card-link .arw{transition:transform .2s} .page .card:hover .card-link .arw{transform:translateX(3px)} /* mini live UIs inside cards */ .page .mini{border:1px solid var(--hair);border-radius:11px;background:var(--bg-2);padding:12px;height:132px;overflow:hidden;position:relative} .page .mini-bar{height:5px;background:var(--hair);border-radius:3px;overflow:hidden;margin:7px 0} .page .mini-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;border-radius:3px; animation:hxfill 3.4s ease-in-out infinite alternate} .page .mini-bar:nth-child(2) i{animation-delay:.3s} .page .mini-bar:nth-child(3) i{animation-delay:.6s} @keyframes hxfill{0%{width:12%}100%{width:var(--w,80%)}} .page .occ{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-top:6px} .page .occ span{aspect-ratio:1;border-radius:2px;background:var(--hair)} .page .occ span.on{background:color-mix(in srgb,var(--accent) 70%,transparent);animation:hxblip 4s infinite} @keyframes hxblip{0%,100%{opacity:.5}50%{opacity:1}} .page .roster div{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.72rem;color:var(--muted); border-bottom:1px solid var(--hair)} .page .roster div:last-child{border-bottom:0} .page .chk{width:14px;height:14px;border-radius:4px;border:1px solid var(--accent);display:grid;place-items:center;flex:none} .page .chk::after{content:"\2713";font-size:9px;color:var(--accent);opacity:0;animation:hxtick 4s infinite} .page .roster div:nth-child(2) .chk::after{animation-delay:.5s} .page .roster div:nth-child(3) .chk::after{animation-delay:1s} @keyframes hxtick{0%,40%{opacity:0}55%,100%{opacity:1}} .page .ring{--p:72;width:70px;height:70px;border-radius:50%;flex:none; background:conic-gradient(var(--accent) calc(var(--p)*1%),var(--hair) 0); display:grid;place-items:center;position:relative} .page .ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--bg-2)} .page .ring b{position:relative;font-family:var(--mono);font-size:.8rem;color:var(--text)} .page .typing{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:8px;white-space:nowrap;overflow:hidden; border-right:2px solid var(--accent);width:0;animation:hxtype 5s steps(30) infinite} @keyframes hxtype{0%{width:0}45%,60%{width:22ch}100%{width:0}} /* ---------- disciplines strip ---------- */ .page .disc{display:grid;grid-template-columns:repeat(5,1fr);gap:0;border:1px solid var(--hair);border-radius:16px;overflow:hidden;background:var(--surface)} .page .disc > div{padding:24px 20px;border-right:1px solid var(--hair);transition:background .3s} .page .disc > div:last-child{border-right:0} .page .disc > div:hover{background:var(--bg-2)} .page .disc h4{margin:14px 0 6px;font-size:1rem;letter-spacing:-.01em} .page .disc p{margin:0;color:var(--muted);font-size:.82rem;line-height:1.5} .page .disc .n{font-family:var(--mono);font-size:.66rem;color:var(--accent);letter-spacing:.12em} /* ---------- field notes ---------- */ .page .notes{display:grid;gap:2px;border:1px solid var(--hair);border-radius:16px;overflow:hidden} .page .note{display:grid;grid-template-columns:130px 1fr auto;gap:24px;align-items:center; padding:22px 24px;background:var(--surface);transition:background .25s} .page .note:hover{background:var(--bg-2)} .page .note .rg{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .page .note .tx{color:var(--text);font-size:.95rem;line-height:1.5} .page .note .tx span{color:var(--muted)} .page .note .mt{font-family:var(--mono);font-size:.72rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums} /* ---------- contact / booking ---------- */ .page .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start} .page .contact-intro p{color:var(--muted);margin:0 0 1rem;max-width:44ch} .page .contact-intro .signature{color:var(--text);font-family:var(--mono);font-size:.78rem;letter-spacing:.04em;margin-top:1.5rem} .page .booking-form{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:26px;box-shadow:var(--shadow)} .page .booking-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px} .page .field-group{display:flex;flex-direction:column;gap:7px} .page .field-group-full{grid-column:1 / -1} .page .field-group label{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)} .page .field-group .optional{text-transform:none;letter-spacing:0;color:var(--faint)} .page .booking-form input[type="text"], .page .booking-form input[type="email"], .page .booking-form textarea{width:100%;background:var(--bg-2);border:1px solid var(--hair);border-radius:9px; padding:11px 13px;color:var(--text);font-family:var(--sans);font-size:.9rem;transition:border-color .2s} .page .booking-form input:focus, .page .booking-form textarea:focus{outline:none;border-color:var(--accent)} .page .booking-form textarea{resize:vertical;min-height:3rem} .page .time-options{display:flex;gap:10px;flex-wrap:wrap} .page .time-option{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border:1px solid var(--hair); border-radius:999px;cursor:pointer;font-size:.82rem;color:var(--muted);transition:.2s} .page .time-option:hover{border-color:var(--hair-hi);color:var(--text)} .page .time-option input{accent-color:var(--accent)} .page .booking-form button[type="submit"]{margin-top:22px} .page .booking-success{margin-top:16px;color:var(--accent);font-size:.88rem;font-family:var(--mono)} .page .booking-success.hidden{display:none} /* ---------- CTA band ---------- */ .page .cta-band{position:relative;border-top:1px solid var(--hair);overflow:hidden} .page .cta-in{max-width:var(--max);margin-inline:auto;padding:96px 24px;text-align:center} .page .cta-in h2{font-size:clamp(2rem,5vw,3.6rem);letter-spacing:-.035em;line-height:1;margin:.6rem 0 18px;text-wrap:balance;font-weight:700} .page .cta-in p{color:var(--muted);max-width:52ch;margin:0 auto 30px} .page .cta-in .btnrow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .page .cta-glow{position:absolute;inset:auto 0 -40% 0;height:80%;z-index:-1; background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 70%)} /* ---------- footer ---------- */ .page footer.foot-v3{border-top:1px solid var(--hair);background:var(--bg-2)} .page .foot{max-width:var(--max);margin-inline:auto;padding:40px 24px;display:flex; justify-content:space-between;gap:20px 32px;flex-wrap:wrap;align-items:center} .page .foot .mono{color:var(--faint)} .page .foot-links{display:flex;gap:18px;flex-wrap:wrap} .page .foot-links a{color:var(--muted);font-size:.82rem;transition:color .2s} .page .foot-links a:hover{color:var(--accent)} .page .foot-entity{color:var(--faint);font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;flex-basis:100%} /* ---------- reveal ---------- */ .page .rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .page .rv.in{opacity:1;transform:none} /* ---------- skip link (v3-aware, overrides main.css inside page) ---------- */ .page .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--on-accent); padding:10px 16px;border-radius:0 0 8px 0;font-size:.85rem;font-weight:600} .page .skip-link:focus{left:0} /* ---------- responsive ---------- */ @media (max-width:900px){ .page .hero-in{grid-template-columns:1fr;gap:28px;align-items:start;padding-top:110px} .page .readout{max-width:420px} .page .bento{grid-template-columns:repeat(2,1fr)} .page .card.sp3,.page .card.sp2,.page .card.sp6{grid-column:span 2} .page .disc{grid-template-columns:repeat(2,1fr)} .page .disc>div{border-right:0;border-bottom:1px solid var(--hair)} .page nav.links{display:none} .page .contact-grid{grid-template-columns:1fr;gap:28px} .page .note{grid-template-columns:1fr;gap:6px}.page .note .mt{white-space:normal} } @media (max-width:560px){ .page .bento{grid-template-columns:1fr} .page .card.sp3,.page .card.sp2,.page .card.sp6{grid-column:span 1} .page .disc{grid-template-columns:1fr} .page .booking-fields{grid-template-columns:1fr} .page .status-chip{display:none} .page .nav-in{gap:14px} } @media (prefers-reduced-motion:reduce){ .page *{animation:none!important;scroll-behavior:auto!important} .page .rv{opacity:1;transform:none} }