/* ============================================================ Fieldkeep — home page styles ============================================================ */ /* ---------- 1. HERO ---------- */ .hero { overflow: hidden; padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 120px); } .hero-inner { display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; position: relative; z-index: 2; } .hero-glow { position: absolute; top: -10%; left: 18%; width: 760px; height: 760px; background: radial-gradient(circle, rgba(48,80,200,.45) 0%, rgba(48,80,200,0) 62%); filter: blur(20px); z-index: 0; pointer-events: none; } .hero-grid-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%); } .hero-h1 { font-size: clamp(40px, 6.4vw, 78px); line-height: 1.0; margin: 22px 0 0; } .hero-accent { color: var(--indigo-bright); font-style: italic; } .hero-sub { margin-top: 26px; max-width: 540px; } .hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .hero-loop { display: flex; align-items: center; gap: 14px; margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--d-border); font-family: var(--display); font-size: clamp(17px, 2vw, 21px); font-style: italic; color: var(--d-text); } .loop-step b { font-weight: 500; white-space: nowrap; } .loop-step:nth-child(1) b { color: var(--d-text); } .loop-sep { color: var(--indigo-bright); opacity: .8; } /* command center frame */ .hero-visual { position: relative; } .cc-frame { background: linear-gradient(180deg, #14161e, #0e1015); border: 1px solid var(--d-border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-glow); overflow: hidden; } .cc-top { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--d-border); background: rgba(255,255,255,.02); } .cc-dotrow { display: flex; gap: 6px; } .cc-dotrow i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.16); } .cc-title { font-size: 11.5px; color: var(--d-text-3); letter-spacing: .04em; } .cc-live { margin-left: auto; display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--d-text-2); font-family: var(--mono); white-space: nowrap; } .cc-livedot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 0 0 rgba(79,214,160,.6); animation: pulse 2.4s infinite; } .cc-map { position: relative; aspect-ratio: 520/380; } .cc-mapsvg { position: absolute; inset: 0; width: 100%; height: 100%; } .cc-routeline { animation: dash 2.8s linear infinite; } .ping { transform-box: fill-box; transform-origin: center; animation: ping 2.6s ease-out infinite; } .cc-card { position: absolute; width: 178px; background: rgba(20,22,30,.86); backdrop-filter: blur(8px); border: 1px solid var(--d-border-2); border-radius: 12px; padding: 11px 12px; box-shadow: 0 12px 30px rgba(0,0,0,.4); } .cc-card header { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--d-text); white-space: nowrap; } .cc-card header b { font-weight: 600; } .cc-clock { margin-left: auto; font-size: 11.5px; color: var(--d-text-2); white-space: nowrap; } .cc-prop { font-size: 12px; color: var(--d-text-2); margin-top: 5px; } .cc-wo { font-size: 11px; color: var(--d-text-3); margin-top: 2px; } .cc-card.flagged { border-color: rgba(255,107,97,.5); box-shadow: 0 12px 30px rgba(200,69,61,.28), 0 0 0 1px rgba(255,107,97,.3); } .cc-flag { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--red-d); margin-top: 6px; font-weight: 500; } .pos-a { top: 12%; left: 4%; } .pos-b { top: 44%; right: 5%; } .pos-c { bottom: 8%; left: 10%; } .hero-tagline { text-align: center; margin-top: 20px; font-size: 13px; color: var(--d-text-3); letter-spacing: .04em; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(79,214,160,.5);} 70% { box-shadow: 0 0 0 7px rgba(79,214,160,0);} 100% { box-shadow: 0 0 0 0 rgba(79,214,160,0);} } @keyframes ping { 0% { opacity:.8; transform: scale(1);} 80%,100% { opacity:0; transform: scale(3.4);} } @keyframes dash { to { stroke-dashoffset: -130; } } @media (prefers-reduced-motion: reduce) { .cc-livedot, .ping, .cc-routeline, .flowline { animation: none !important; } .ping { opacity: 0; } } @media (max-width: 940px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { max-width: 560px; } .cc-card { width: 150px; } } @media (max-width: 520px) { .cc-card { width: 132px; padding: 9px 10px; } .cc-card header { font-size: 12px; } } /* ---------- 2. PROBLEM ---------- */ .problem-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; margin-top: 56px; } .prob-card { background: transparent; border: 0; border-top: 2px solid var(--indigo); border-radius: 0; padding: 20px 2px 0; box-shadow: none; } .prob-ic { font-size: 26px; color: var(--indigo); width: 48px; height: 48px; border-radius: 12px; background: var(--indigo-tint); display: grid; place-items: center; margin-bottom: 20px; } .prob-card h3 { font-size: 22px; margin-bottom: 10px; } .prob-card p { color: var(--text-2); font-size: 15.5px; } .prob-illustrative { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border-2); font-size: 14px !important; color: var(--text-3) !important; } .prob-illustrative .mono { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); background: rgba(201,135,31,.1); padding: 2px 6px; border-radius: 4px; margin-right: 6px; } .prob-illustrative b { color: var(--text); } @media (max-width: 820px) { .problem-grid { grid-template-columns: 1fr; } } /* ---------- 3. RECONCILIATION ---------- */ .recon-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,6vw,80px); align-items: center; } .pullquote { margin-top: 34px; padding: 26px 30px; position: relative; background: var(--indigo-tint); border-radius: var(--r-md); border-left: 3px solid var(--indigo); font-family: var(--display); font-size: clamp(19px, 2.4vw, 25px); line-height: 1.35; color: var(--text); } .pullquote em { font-style: italic; color: var(--indigo); } .pq-mark { position: absolute; top: -10px; left: 16px; font-family: var(--display); font-size: 60px; color: var(--indigo); opacity: .26; line-height: 1; } .recon-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-lg); } .recon-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 24px; } .recon-head > span:first-child { display: flex; align-items: center; gap: 8px; } .recon-id { color: var(--text-3); font-weight: 400; } .recon-row { display: grid; grid-template-columns: 130px 1fr 64px; align-items: center; gap: 14px; margin-bottom: 16px; } .recon-label { font-size: 14px; color: var(--text-2); } .recon-bar { height: 12px; border-radius: 6px; background: var(--bg-soft-2); overflow: hidden; } .recon-fill { display: block; height: 100%; border-radius: 6px; width: 0; transition: width 1.05s cubic-bezier(.22,.61,.36,1); } .recon-fill.clk { background: linear-gradient(90deg, var(--text-3), var(--text-2)); transition-delay: .15s; } .recon-fill.wo { background: linear-gradient(90deg, var(--indigo), var(--indigo-bright)); transition-delay: .5s; } .recon-val { text-align: right; font-size: 14px; font-weight: 500; } .recon-flagbar { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 14px 16px; background: rgba(200,69,61,.07); border: 1px solid rgba(200,69,61,.22); border-radius: 12px; color: var(--red); font-size: 15px; opacity: 0; transform: translateY(8px); transition: opacity .55s ease 1.45s, transform .55s ease 1.45s; } /* the gap is flagged AFTER the bars finish filling -- the discovery beat */ .recon-card.in .recon-flagbar { opacity: 1; transform: none; } .recon-flagbar b { font-weight: 600; } .recon-cta { margin-left: auto; font-size: 12.5px; color: var(--red); opacity: .85; } @media (max-width: 860px) { .recon-inner { grid-template-columns: 1fr; } } /* §3 — per-property allocation card (replaces the flagged-gap card) */ .alloc-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--shadow-lg); } .alloc-head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; margin-bottom: 22px; } .alloc-head > span:first-child { display: flex; align-items: center; gap: 8px; } .alloc-id { color: var(--text-3); font-weight: 400; } .alloc-row { display: grid; grid-template-columns: 120px 1fr 64px; align-items: center; gap: 14px; margin-bottom: 14px; } .alloc-prop { font-size: 14px; color: var(--text-2); } .alloc-bar { height: 12px; border-radius: 6px; background: var(--bg-soft-2); overflow: hidden; } .alloc-fill { display: block; height: 100%; border-radius: 6px; width: 0; background: linear-gradient(90deg, var(--indigo), var(--indigo-bright)); transition: width 1.05s cubic-bezier(.22,.61,.36,1); } .alloc-row:nth-child(3) .alloc-fill { transition-delay: .12s; } .alloc-row:nth-child(4) .alloc-fill { transition-delay: .24s; } .alloc-val { text-align: right; font-size: 14px; font-weight: 500; } .alloc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); } .alloc-rec { color: var(--indigo); font-size: 12.5px; } @media (prefers-reduced-motion: reduce) { .alloc-fill { transition: none; } } /* ---------- 4. ALTITUDE — drill-in map cinematic (mirrors .hkx) ---------- */ /* ============ 3. IT CATCHES WHAT EVERYONE MISSED -- catch -> route -> close ============ */ .acx { position: relative; height: 400vh; background: var(--ink); } .acx-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } .acx-glow { position: absolute; top: 52%; left: 50%; transform: translate(-50%,-50%); width: 760px; height: 540px; max-width: 96vw; background: radial-gradient(ellipse, rgba(48,80,200,.26) 0%, transparent 66%); filter: blur(16px); pointer-events: none; z-index: 1; opacity: .85; } .acx-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(12,13,17,.55) 0%, rgba(12,13,17,.05) 18%, transparent 50%, rgba(12,13,17,.5) 84%, rgba(12,13,17,.92) 100%); } .acx-hud { position: absolute; top: 78px; left: var(--pad); z-index: 7; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--d-text-3); letter-spacing: .07em; } .acx-hud .hud-live { display: inline-flex; align-items: center; gap: 5px; color: var(--green-d); font-weight: 700; } .acx-hud .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 6px var(--green-d); animation: livePulse 2s ease infinite; } .acx-hud .hud-sep { opacity: .4; } .acx-q { position: absolute; top: 84px; left: 0; right: 0; z-index: 6; text-align: center; padding: 0 var(--pad); } .acx-q .eyebrow { color: var(--indigo-bright); } .acx-h2 { font-family: var(--display); font-size: clamp(24px, 3.2vw, 38px); line-height: 1.14; color: var(--d-text); margin: 10px auto 0; max-width: 680px; font-weight: 500; } .acx-h2 .it { color: var(--indigo-bright); font-style: italic; } /* the three scattered fragments -- no single system saw the gap */ .ac-frag { position: absolute; z-index: 4; width: min(248px, 62vw); background: rgba(20,22,30,.86); border: 1px solid var(--d-border-2); border-radius: 13px; padding: 12px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.5); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); display: flex; flex-direction: column; gap: 6px; will-change: transform, opacity; } .ac-ftag { font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-bright); opacity: .9; display: inline-flex; align-items: center; gap: 6px; } .ac-ftag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .ac-frag p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--d-text-2); } .ac-frag p b { color: var(--d-text); font-weight: 600; } .ac-fmeta { font-size: 9px; color: var(--d-text-3); font-family: var(--mono); letter-spacing: .03em; } .ac-frag.f-chat { left: 7%; top: 30%; } .ac-frag.f-chat .ac-ftag { color: #5fd0e6; } .ac-frag.f-wo { right: 8%; top: 26%; } .ac-frag.f-wo .ac-ftag { color: var(--indigo-bright); } .ac-frag.f-sched { left: 14%; bottom: 18%; } .ac-frag.f-sched .ac-ftag { color: var(--d-text-3); } .ac-readpulse { position: absolute; top: 50%; left: 50%; z-index: 3; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(108,138,255,.5) 0%, transparent 68%); transform: translate(-50%,-50%); opacity: 0; pointer-events: none; } /* the surfaced Action Card (centered via wrap so the engine owns its transform) */ /* top padding clears the absolute heading (.acx-q ~197px deep) so the centered card never presses against "makes sure it gets done" (Win gate, 2026-06-12) */ .ac-cardwrap { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: clamp(170px, 24vh, 230px) var(--pad) 18px; pointer-events: none; } .ac-card { position: relative; width: min(430px, 86vw); opacity: 0; pointer-events: auto; background: linear-gradient(180deg, rgba(28,31,40,.95), rgba(18,19,26,.97)); border: 1px solid var(--d-border-2); border-left: 3px solid var(--indigo-bright); border-radius: 16px; padding: 18px 20px; box-shadow: 0 40px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(108,138,255,.08), 0 0 80px rgba(48,80,200,.28); transition: border-left-color .5s ease, box-shadow .6s ease; will-change: transform, opacity; } .ac-card.is-closed { border-left-color: var(--green-d); box-shadow: 0 40px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(52,211,153,.1), 0 0 80px rgba(20,120,80,.26); } .ac-head { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid var(--d-border); } .ac-mark { width: 20px; height: 20px; color: var(--indigo-bright); filter: drop-shadow(0 0 5px rgba(108,138,255,.45)); flex: none; } .ac-mark svg { width: 100%; height: auto; display: block; } .ac-src { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-bright); } .ac-time { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--d-text-3); } .ac-title { font-family: var(--display); font-size: clamp(17px, 1.9vw, 21px); font-weight: 500; color: var(--d-text); line-height: 1.28; margin: 14px 0 12px; } .ac-srcline { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; } .ac-rd { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--d-text-3); margin-right: 1px; } .ac-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--d-text-2); background: rgba(255,255,255,.05); border: 1px solid var(--d-border); padding: 3px 9px; border-radius: 20px; } .ac-pill i { width: 6px; height: 6px; border-radius: 50%; flex: none; } .ac-pill.p-chat i { background: #5fd0e6; } .ac-pill.p-wo i { background: var(--indigo-bright); } .ac-pill.p-sched i { background: var(--d-text-3); } .ac-srclink { font-size: 10.5px; color: var(--indigo-bright); margin-left: auto; white-space: nowrap; } .ac-sources { list-style: none; margin: 0 0 2px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .ac-srcrow { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--d-text-3); line-height: 1.3; } .ac-srcrow i { width: 6px; height: 6px; border-radius: 50%; flex: none; } .ac-srcrow b { color: var(--d-text-2); font-weight: 600; } .ac-srcrow.p-chat i { background: #5fd0e6; } .ac-srcrow.p-wo i { background: var(--indigo-bright); } .ac-srcrow.p-sched i { background: var(--d-text-3); } .ac-row { display: flex; align-items: center; gap: 11px; min-height: 34px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--d-border); } .ac-owner { position: relative; flex: 1; min-height: 30px; } .ac-owner-un, .ac-owner-named { position: absolute; inset: 0; display: flex; align-items: center; gap: 9px; } .ac-owner-un { color: var(--d-text-3); font-style: italic; font-size: 12.5px; } .ac-owner-named { opacity: 0; } .ac-avatar { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--indigo-bright), var(--indigo)); box-shadow: 0 2px 8px rgba(48,80,200,.5); } .ac-owner-named b { font-size: 13px; color: var(--d-text); font-weight: 600; } .ac-olabel { font-size: 10px; color: var(--d-text-3); font-family: var(--mono); display: block; } .ac-assign-tick { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--green-d); opacity: 0; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .ac-done { position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--green-d) calc(var(--fill, 0) * 360deg), rgba(255,255,255,.12) 0); } .ac-done::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: #14161d; } .ac-check { position: relative; z-index: 1; font-size: 13px; line-height: 1; color: var(--green-d); opacity: 0; transition: opacity .3s ease; } .ac-done.is-done .ac-check { opacity: 1; } .ac-statwrap { position: relative; flex: 1; min-height: 22px; } .ac-status-open, .ac-status-closed { position: absolute; inset: 0; display: flex; align-items: center; font-size: 12.5px; } .ac-status-open { color: var(--d-text-3); } .ac-status-closed { color: var(--green-d); font-weight: 600; opacity: 0; } .ac-note { margin: 14px 0 0; padding: 11px 13px; border-radius: 11px; background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.2); font-size: 12.5px; line-height: 1.5; color: var(--d-text); opacity: 0; } .ac-note b { color: var(--green-d); font-weight: 600; } .acx-hint { position: absolute; left: 0; right: 0; bottom: 12%; z-index: 6; text-align: center; font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--indigo-bright); opacity: .9; pointer-events: none; text-shadow: 0 1px 10px rgba(8,9,13,.9); } .acx-coda { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 6; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--d-text-3); opacity: 0; pointer-events: none; } /* shot fallback: keep the cinematic layout, just relative + revealed */ .acx-shot { height: auto; } .acx-shot .acx-stage { position: relative; height: auto; min-height: 100svh; } /* mobile / reduced-motion: a calm stacked column -- heading, then the closed card */ .acx-static { height: auto; } .acx-static .acx-stage { position: relative; height: auto; min-height: 0; overflow: visible; padding: 92px var(--pad) 60px; display: flex; flex-direction: column; align-items: center; gap: 26px; } .acx-static .acx-q { position: relative; top: auto; left: auto; right: auto; width: 100%; padding: 0; } .acx-static .ac-cardwrap { position: relative; inset: auto; display: block; width: 100%; padding: 0; } .acx-static .ac-card { margin: 0 auto; } .acx-static .ac-frag, .acx-static .ac-readpulse, .acx-static .acx-glow { display: none; } .acx-static .acx-hint, .acx-static .acx-coda { display: none; } .acx-static .acx-hud { top: 18px; } @media (max-width: 760px) { .ac-frag { width: min(220px, 70vw); padding: 10px 12px; } .ac-frag.f-chat { left: 3%; top: 23%; } .ac-frag.f-wo { right: 3%; top: 20%; } .ac-frag.f-sched { left: 7%; bottom: 13%; } .ac-card { width: min(372px, 91vw); padding: 16px 16px; } .acx-h2 { font-size: clamp(21px, 5.6vw, 28px); } } /* ============ 4. AND IT NEVER FORGETS -- operating memory / compounding ============ */ .memx { position: relative; height: 320vh; background: var(--ink-2); } .memx-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 84px var(--pad) 60px; } .memx-glow { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%); width: 820px; height: 520px; max-width: 96vw; background: radial-gradient(ellipse, rgba(48,80,200,.2) 0%, transparent 68%); filter: blur(18px); pointer-events: none; z-index: 0; } .memx-head { position: relative; z-index: 2; text-align: center; max-width: 680px; margin: 0 auto 26px; } .memx-head .eyebrow { color: var(--indigo-bright); } .memx-h2 { font-family: var(--display); font-size: clamp(26px, 3.4vw, 42px); line-height: 1.12; color: var(--d-text); margin: 10px 0 0; font-weight: 500; } .memx-sub { font-size: clamp(14px, 1.5vw, 16.5px); line-height: 1.55; color: var(--d-text-2); margin: 12px auto 0; max-width: 560px; } .memx-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(18px, 3vw, 32px); align-items: start; max-width: 1000px; margin: 0 auto; width: 100%; } /* the board -- every caught/owned/closed loop stays */ .mem-board { background: linear-gradient(180deg, rgba(22,24,32,.9), rgba(16,17,23,.94)); border: 1px solid var(--d-border-2); border-radius: 16px; padding: 14px 16px 6px; box-shadow: 0 30px 80px rgba(0,0,0,.5); } .mem-board-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 11px; border-bottom: 1px solid var(--d-border); } .mem-board-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--d-text-2); } .mem-board-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; color: var(--green-d); } .mem-board-live .ld { width: 5px; height: 5px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 5px var(--green-d); } .mem-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px 2px; border-bottom: 1px solid var(--d-border); } .mem-kpi-item { text-align: center; } .mem-kpi-num { font-family: var(--mono); font-size: 19px; font-weight: 700; color: var(--d-text); display: block; line-height: 1; } .mem-kpi-num.amber { color: var(--amber-d); } .mem-kpi-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; text-transform: uppercase; color: var(--d-text-3); margin-top: 5px; display: block; } .mem-rows { display: flex; flex-direction: column; } .mem-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--d-border); } .mem-row:last-child { border-bottom: 0; } .mem-av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mono); font-size: 9px; font-weight: 700; color: #fff; background: rgba(255,255,255,.1); } .mem-av.ai { background: linear-gradient(135deg, var(--indigo-bright), var(--indigo)); } .mem-body { min-width: 0; } .mem-title { font-size: 12.5px; color: var(--d-text); line-height: 1.3; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mem-meta { font-size: 9.5px; color: var(--d-text-3); margin-top: 2px; display: block; } .mem-became { color: var(--green-d); } .mem-pill { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 5px; white-space: nowrap; } .mem-pill.ai { background: rgba(108,138,255,.16); color: var(--indigo-bright); } .mem-pill.flag { background: rgba(251,191,36,.14); color: var(--amber-d); } .mem-pill.wo { background: rgba(95,208,230,.14); color: #5fd0e6; } .mem-pill.manual { background: rgba(255,255,255,.07); color: var(--d-text-3); } .mem-age { font-family: var(--mono); font-size: 10px; color: var(--d-text-3); white-space: nowrap; } .mem-age.old { color: var(--amber-d); } .mem-dot { width: 17px; height: 17px; border-radius: 50%; flex: none; border: 1.5px solid var(--d-border-2); display: grid; place-items: center; font-size: 10px; line-height: 1; } .mem-dot.done { background: var(--green-d); border-color: var(--green-d); color: #0c0d11; } .mem-row.ai-created { border-left: 2px solid var(--indigo-bright); margin-left: -16px; padding-left: 14px; } .mem-row.closed .mem-title { color: var(--d-text-3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.22); } /* the briefing reads the board back -- the proof of memory */ .mem-brief { background: linear-gradient(180deg, rgba(28,31,40,.92), rgba(18,19,26,.96)); border: 1px solid var(--d-border-2); border-radius: 16px; padding: 18px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(108,138,255,.06), 0 0 70px rgba(48,80,200,.16); position: relative; } .mem-brief::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--indigo-bright) 35%, transparent); opacity: .7; } .mem-brief-head { display: flex; align-items: center; gap: 9px; padding-bottom: 13px; border-bottom: 1px solid var(--d-border); } .mem-brief-mark { width: 20px; height: 20px; color: var(--indigo-bright); filter: drop-shadow(0 0 5px rgba(108,138,255,.45)); flex: none; } .mem-brief-mark svg { width: 100%; height: auto; display: block; } .mem-brief-label { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--indigo-bright); } .mem-brief-time { margin-left: auto; font-family: var(--mono); font-size: 9.5px; color: var(--d-text-3); } .mem-brief-greet { font-family: var(--display); font-size: clamp(16px, 1.8vw, 20px); font-weight: 500; color: var(--d-text); margin: 14px 0 13px; line-height: 1.3; } .mem-brief-greet b { color: var(--indigo-bright); font-weight: 600; } .mem-brief-items { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .mem-brief-items li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.46; color: var(--d-text-2); } .mem-brief-items li i { width: 7px; height: 7px; border-radius: 50%; margin-top: 5px; flex: none; } .mem-brief-items li b { color: var(--d-text); font-weight: 600; } .mem-link { color: var(--indigo-bright); } .mem-bi-open i { background: var(--amber-d); } .mem-bi-closed i { background: var(--green-d); } .mem-bi-new i { background: var(--indigo-bright); } .mem-brief-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--d-border); font-family: var(--mono); font-size: 9px; color: var(--d-text-3); text-align: center; letter-spacing: .04em; } .mem-brief-foot b { color: var(--d-text-2); } .memx-coda { position: relative; z-index: 2; text-align: center; margin: 26px auto 0; max-width: 640px; } .memx-coda p { font-family: var(--display); font-size: clamp(16px, 1.9vw, 22px); color: var(--d-text); line-height: 1.35; font-weight: 500; margin: 0; } .memx-coda b { color: var(--indigo-bright); font-weight: 600; } /* static / mobile fallback (generic scrub engine adds .scrub-static) */ .memx.scrub-static { height: auto; } .memx.scrub-static .memx-stage { position: relative; height: auto; min-height: 0; overflow: visible; } @media (max-width: 860px) { .memx { height: auto; } .memx-stage { position: relative; height: auto; min-height: 0; overflow: visible; padding: 80px var(--pad) 50px; justify-content: flex-start; } .memx-grid { grid-template-columns: 1fr; gap: 16px; max-width: 460px; } .mem-title { white-space: normal; } } .altx { position: relative; height: 360vh; background: var(--ink); } .altx-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } .altmap { position: absolute; inset: 0; z-index: 1; isolation: isolate; background: #0b0c10; } .altx #altMap { pointer-events: none; } .altx .leaflet-container { background: #0b0c10 !important; font-family: var(--sans); } .altx-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(12,13,17,.6) 0%, rgba(12,13,17,.08) 16%, transparent 46%, rgba(12,13,17,.5) 82%, rgba(12,13,17,.92) 100%), radial-gradient(120% 80% at 38% 48%, transparent 46%, rgba(12,13,17,.5) 100%); } .altx-hud { position: absolute; top: 78px; left: var(--pad); z-index: 6; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--d-text-3); letter-spacing: .07em; } .altx-hud .hud-live { display: inline-flex; align-items: center; gap: 5px; color: var(--green-d); font-weight: 700; } .altx-hud .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 6px var(--green-d); animation: livePulse 2s ease infinite; } .altx-hud .hud-sep { opacity: .4; } .altx-q { position: absolute; top: 86px; left: 0; right: 0; z-index: 6; text-align: center; padding: 0 var(--pad); } .altx-q .eyebrow { color: var(--indigo-bright); } .altx-qsub { font-family: var(--display); font-size: clamp(22px, 3vw, 33px); line-height: 1.16; color: var(--d-text); margin: 10px auto 0; max-width: 600px; } /* the three altitude cards overlap on the right and cross-fade at their stop; auto-margins center them vertically so the JS rise-transform stays free */ .altcard { position: absolute; right: var(--pad); top: 0; bottom: 0; margin: auto 0; height: fit-content; z-index: 6; width: min(320px, 40vw); background: rgba(20,22,30,.9); border: 1px solid var(--d-border-2); border-radius: 14px; padding: 18px 20px; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); box-shadow: 0 18px 50px rgba(0,0,0,.5); } .altcard-tag { display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-bright); margin-bottom: 9px; } .altcard > b { display: block; font-size: 16px; color: var(--d-text); font-weight: 600; line-height: 1.3; } .altcard > p { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--d-text-2); } /* the annotated specimen ring (portfolio card): labels do the legend's old job */ .ring-anat { display: block; width: 100%; height: auto; margin-top: 12px; } .ring-anat text { font-family: var(--mono); font-size: 10px; fill: var(--d-text-2); letter-spacing: .02em; } .ring-anat line { stroke: rgba(255,255,255,.3); stroke-width: 1; } .altcard .alt-proplist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .altcard .alt-proplist span { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 8px 11px; background: rgba(255,255,255,.04); border-radius: 9px; color: var(--d-text-2); } .altcard .alt-job-card { display: flex; flex-direction: column; gap: 5px; padding: 14px; background: rgba(255,255,255,.045); color: var(--d-text); border-radius: 11px; margin-top: 12px; } .altcard .alt-job-card b { font-size: 15px; } .altcard .alt-job-card .mono { font-size: 12px; color: var(--d-text-2); } .altcard .alt-job-meta { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--green-d); margin-top: 4px; } /* static fallback (reduced-motion / narrow): masthead + dimmed map + cards stacked */ .altx.altx-static { height: auto; } .altx.altx-static .altx-stage { position: relative; height: auto; padding: 62px var(--pad) 54px; } .altx-static .altmap { opacity: .32; } .altx-static .altx-hud, .altx-static .altx-hint { display: none; } .altx-static .altx-q { position: relative; top: auto; margin-bottom: 26px; } .altx-static .altcard { position: relative; right: auto; top: auto; bottom: auto; margin: 0 auto 14px; width: 100%; max-width: 420px; } @media (max-width: 820px) { .altx { height: 240vh; } } @media (max-width: 760px) { .altcard { width: min(76vw, 300px); } .altx-qsub { font-size: 20px; max-width: 86vw; } } /* concentric ring markers (port of dashboard.html propertyRingSvg): outer = WO arcs by tech + amber unassigned tail, inner = showings; cluster = aggregated. */ .apm-icon { background: none; border: 0; } .apm { position: relative; width: 46px; height: 46px; transform: scale(var(--boost, 1)); transform-origin: center; } .apm-member { transform: scale(calc(var(--boost, 1) * 1.3)); } .apm-cluster { transform: scale(calc(var(--boost, 1) * 1.08)); } .apm-ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); } .apm-fill { fill: transparent; } @keyframes apmUnPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } } .apm-un { animation: apmUnPulse 2.6s ease-in-out infinite; } @keyframes apmHalo { 0%,100% { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 3px rgba(251,191,36,.18)); } 50% { filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(251,191,36,.55)); } } .apm.has-un .apm-ring { animation: apmHalo 2.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .apm-un, .apm.has-un .apm-ring { animation: none; } } /* the scheduled-work reveal (opening a ring to see who's assigned) + break hint */ .altcard-sched { width: min(350px, 44vw); } .altcard-sched > b { margin-bottom: 2px; } .sched-list { list-style: none; margin: 13px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .sched-list li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--d-text-2); } .sched-list li .sd { width: 9px; height: 9px; border-radius: 50%; flex: none; } .sched-list li b { color: var(--d-text); font-weight: 600; } .sched-list li span { color: var(--d-text-3); font-size: 11.5px; margin-left: auto; } @keyframes schedUnPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } } .sched-list .sd-un { animation: schedUnPulse 2.2s ease-in-out infinite; box-shadow: 0 0 6px rgba(251,191,36,.55); } @media (prefers-reduced-motion: reduce) { .sched-list .sd-un { animation: none; } } .altx-hint { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 6; text-align: center; font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--indigo-bright); opacity: .92; pointer-events: none; text-shadow: 0 1px 10px rgba(8,9,13,.9), 0 0 2px rgba(8,9,13,.8); } /* ---------- 5. AI ---------- */ .ai { overflow: hidden; } .ai-glow { position: absolute; top: 30%; left: 50%; transform: translateX(-50%); width: 900px; height: 600px; background: radial-gradient(ellipse, rgba(48,80,200,.34) 0%, transparent 64%); filter: blur(18px); pointer-events: none; } .ai-inner { position: relative; z-index: 2; } .fusion { display: grid; grid-template-columns: minmax(170px,1fr) 90px minmax(170px,220px) 70px minmax(220px,1.4fr); align-items: center; gap: 0; margin-top: 64px; } .fusion-sources { display: flex; flex-direction: column; gap: 14px; } .fz-chip { display: flex; align-items: center; gap: 13px; padding: 14px 16px; background: rgba(255,255,255,.04); border: 1px solid var(--d-border); border-radius: 12px; } .fz-ic { width: 38px; height: 38px; flex: none; border-radius: 9px; background: rgba(108,138,255,.14); color: var(--indigo-bright); display: grid; place-items: center; font-size: 18px; } .fz-chip b { display: block; font-size: 15px; color: var(--d-text); } .fz-chip small { font-size: 12.5px; color: var(--d-text-3); white-space: nowrap; } .fusion-lines { height: 320px; width: 100%; } .fusion-lines.out { height: 200px; } .flowline { stroke-dasharray: 5 10; animation: flow 2.4s linear infinite; } @keyframes flow { to { stroke-dashoffset: -120; } } .fusion-core { text-align: center; padding: 28px 22px; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 0%, rgba(108,138,255,.22), rgba(255,255,255,.03)); border: 1px solid rgba(108,138,255,.4); box-shadow: 0 0 60px rgba(48,80,200,.4); } .fz-core-mark { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 14px; background: var(--indigo); color: #fff; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 24px rgba(48,80,200,.5); } .fz-core-mark svg { width: 34px; } .fusion-core b { font-family: var(--display); font-size: 22px; color: var(--d-text); display: block; } .fusion-core small { font-size: 12.5px; color: var(--d-text-2); } .brief-card { background: var(--ink-card); border: 1px solid var(--d-border-2); border-radius: var(--r-md); padding: 18px; box-shadow: var(--shadow-lg); } .brief-time { font-size: 12px; color: var(--indigo-bright); display: block; margin-bottom: 14px; } .brief-card ul { display: flex; flex-direction: column; gap: 12px; } .brief-card li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; font-size: 13.5px; color: var(--d-text-2); line-height: 1.45; } .brief-card li i { margin-top: 5px; } .brief-card li b { color: var(--d-text); font-weight: 600; } .brief-tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 5px; background: rgba(255,255,255,.06); color: var(--d-text-3); height: fit-content; } .ai-tagline { margin-top: 48px; font-size: 13px; color: var(--d-text-3); letter-spacing: .05em; } /* ── 5b. The owner's morning briefing (Act II centerpiece) ── */ .ownbrief { max-width: 680px; margin: 60px auto 0; } .ownbrief-context { text-align: center; font-size: 11px; letter-spacing: .06em; color: var(--d-text-3); margin-bottom: 16px; } .ownbrief-card { position: relative; background: linear-gradient(180deg, rgba(28,31,40,.92), rgba(18,19,26,.96)); border: 1px solid var(--d-border-2); border-radius: 18px; padding: 22px 24px; box-shadow: 0 40px 90px rgba(0,0,0,.5), 0 0 0 1px rgba(108,138,255,.06), 0 0 90px rgba(48,80,200,.2); } .ownbrief-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--indigo-bright) 35%, transparent); opacity: .7; } .ob-head { display: flex; align-items: center; gap: 9px; padding-bottom: 14px; border-bottom: 1px solid var(--d-border); } .ob-mark { width: 22px; height: 22px; color: var(--indigo-bright); filter: drop-shadow(0 0 5px rgba(108,138,255,.45)); flex: none; } .ob-mark svg { width: 100%; height: auto; display: block; } .ob-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo-bright); } .ob-time { margin-left: auto; font-size: 10px; color: var(--d-text-3); font-family: var(--mono); } .ob-greet { font-family: var(--display); font-size: clamp(18px, 2vw, 23px); font-weight: 500; color: var(--d-text); margin: 16px 0 14px; line-height: 1.3; } .ob-greet b { color: var(--indigo-bright); font-weight: 600; } .ob-items { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; } .ob-item { display: grid; grid-template-columns: auto 1fr; gap: 11px; align-items: start; padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid var(--d-border); border-left: 3px solid var(--d-border-2); } .ob-item p { font-size: 13px; line-height: 1.5; color: var(--d-text-2); margin: 0; } .ob-item b { color: var(--d-text); font-weight: 600; } .ob-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; } .ob-item.sev-red { border-left-color: var(--red-d); } .ob-item.sev-red .ob-dot { background: var(--red-d); box-shadow: 0 0 8px rgba(248,113,113,.6); } .ob-item.sev-amber { border-left-color: var(--amber-d); } .ob-item.sev-amber .ob-dot { background: var(--amber-d); box-shadow: 0 0 8px rgba(251,191,36,.55); } .ob-item.sev-green { border-left-color: var(--green-d); } .ob-item.sev-green .ob-dot { background: var(--green-d); box-shadow: 0 0 8px rgba(52,211,153,.5); } .ob-tag { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; padding: 1px 7px; border-radius: 5px; background: rgba(255,255,255,.07); color: var(--d-text-3); white-space: nowrap; margin-left: 2px; } .ob-tag-ok { color: var(--green-d); background: rgba(52,211,153,.12); } .ob-foresight { margin-top: 14px; padding: 13px 15px; border-radius: 11px; background: rgba(108,138,255,.09); border: 1px solid rgba(108,138,255,.22); } .ob-fore-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-bright); margin-bottom: 5px; } .ob-foresight p { font-size: 13px; line-height: 1.5; color: var(--d-text); margin: 0; } .ob-foresight b { color: var(--indigo-bright); font-weight: 600; } .ob-sources { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--d-border); font-size: 10px; color: var(--d-text-3); text-align: center; letter-spacing: .04em; } .ob-sources b { color: var(--d-text-2); font-weight: 600; } /* the briefing composes itself as it enters: card -> greeting -> items -> foresight */ .ownbrief.reveal { opacity: 1; transform: none; } .ownbrief-context, .ownbrief-card { opacity: 0; transition: opacity .6s cubic-bezier(.16,.7,.3,1), transform .6s cubic-bezier(.16,.7,.3,1); } .ownbrief-card { transform: translateY(20px) scale(.99); } .ownbrief.in .ownbrief-context { opacity: 1; transition-delay: .05s; } .ownbrief.in .ownbrief-card { opacity: 1; transform: none; transition-delay: .18s; } .ob-greet, .ob-item, .ob-foresight, .ob-sources { opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.16,.7,.3,1), transform .5s cubic-bezier(.16,.7,.3,1); } .ownbrief.in .ob-greet { opacity: 1; transform: none; transition-delay: .55s; } .ownbrief.in .ob-item { opacity: 1; transform: none; } .ownbrief.in .ob-items .ob-item:nth-child(1) { transition-delay: .8s; } .ownbrief.in .ob-items .ob-item:nth-child(2) { transition-delay: .97s; } .ownbrief.in .ob-items .ob-item:nth-child(3) { transition-delay: 1.14s; } .ownbrief.in .ob-foresight { opacity: 1; transform: none; transition-delay: 1.37s; } .ownbrief.in .ob-sources { opacity: 1; transform: none; transition-delay: 1.55s; } @media (max-width: 600px) { .ownbrief-card { padding: 18px 16px; } .ob-item p, .ob-foresight p { font-size: 12.5px; } } /* ── 5c. "How did it know all that?" — the fusion made concrete ── */ .howknows { max-width: 880px; margin: 64px auto 0; } .hk-head { max-width: 620px; margin: 0 auto 26px; } .hk-head .eyebrow { color: var(--indigo-bright); } .hk-sub { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: var(--d-text-2); margin-top: 10px; } .hk-sub b { color: var(--d-text); font-weight: 600; } .hk-sources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .hk-frag { background: rgba(255,255,255,.02); border: 1px solid var(--d-border); border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; } .hk-tag { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-bright); opacity: .85; } .hk-frag p { font-size: 12px; line-height: 1.5; color: var(--d-text-2); margin: 0; } .hk-frag b { color: var(--d-text); font-weight: 600; } .hk-meta { font-size: 9px; color: var(--d-text-3); margin-top: auto; } .hk-pill { font-family: var(--mono); font-size: 8.5px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 5px; background: rgba(251,191,36,.12); color: var(--amber-d); margin-left: 4px; white-space: nowrap; } .hk-merge { display: flex; align-items: center; justify-content: center; gap: 11px; margin: 24px 0; } .hk-merge::before, .hk-merge::after { content: ""; flex: 1; max-width: 150px; height: 1px; } .hk-merge::before { background: linear-gradient(90deg, transparent, rgba(108,138,255,.45)); } .hk-merge::after { background: linear-gradient(90deg, rgba(108,138,255,.45), transparent); } .hk-merge-mark { width: 30px; height: 30px; color: var(--indigo-bright); filter: drop-shadow(0 0 8px rgba(108,138,255,.5)); flex: none; } .hk-merge-mark svg { width: 100%; height: auto; display: block; } .hk-merge-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; color: var(--indigo-bright); white-space: nowrap; } .hk-out { position: relative; background: linear-gradient(180deg, rgba(108,138,255,.1), rgba(108,138,255,.035)); border: 1px solid rgba(108,138,255,.28); border-radius: 14px; padding: 18px 22px; text-align: center; max-width: 680px; margin: 0 auto; box-shadow: 0 0 60px rgba(48,80,200,.16); } .hk-out-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-bright); margin-bottom: 8px; } .hk-out p { font-size: clamp(14px, 1.5vw, 16.5px); line-height: 1.55; color: var(--d-text); margin: 0; } .hk-out b { color: var(--indigo-bright); font-weight: 600; } /* (the scattered->fused->knowing sequence is now driven by the scroll-scrub engine on #hkx via inline opacity/transform — no CSS transition here, so the reveal tracks scroll precisely.) */ @media (max-width: 820px) { .hk-sources { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .hk-sources { grid-template-columns: 1fr; } .hk-merge::before, .hk-merge::after { max-width: 60px; } } /* == 5b. How it knows -- map cinematic: the day happens on the real map == */ .hkx { position: relative; height: 520vh; background: var(--ink); } .hkx-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; } .hkmap { position: absolute; inset: 0; z-index: 1; isolation: isolate; background: #0b0c10; } .hkx #hkMap { pointer-events: none; } .hkx .leaflet-container { background: #0b0c10 !important; font-family: var(--sans); } .hkx-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(12,13,17,.66) 0%, rgba(12,13,17,.1) 16%, transparent 44%, rgba(12,13,17,.5) 80%, rgba(12,13,17,.92) 100%), radial-gradient(125% 80% at 50% 42%, transparent 44%, rgba(12,13,17,.55) 100%); } .hkx-dim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(8,9,13,.74); opacity: 0; } .hkx-hud { position: absolute; top: 78px; left: var(--pad); z-index: 6; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--d-text-3); letter-spacing: .07em; } .hkx-hud .hud-live { display: inline-flex; align-items: center; gap: 5px; color: var(--green-d); font-weight: 700; } .hkx-hud .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 6px var(--green-d); animation: livePulse 2s ease infinite; } .hkx-hud .hud-sep { opacity: .4; } .hkx-q { position: absolute; top: 90px; left: 0; right: 0; z-index: 6; text-align: center; padding: 0 var(--pad); } .hkx-q .eyebrow { color: var(--indigo-bright); } .hkx-qsub { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: var(--d-text-2); margin: 8px auto 0; max-width: 560px; } .hkchat { position: absolute; left: var(--pad); top: 52%; transform: translateY(-50%); z-index: 6; width: min(300px, 42vw); display: flex; flex-direction: column; gap: 10px; } .hkmsg { max-width: 92%; padding: 9px 12px; border-radius: 13px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hkmsg p { margin: 0; color: var(--d-text); } .hkmsg-who { display: block; margin-top: 4px; font-size: 8.5px; color: var(--d-text-3); letter-spacing: .04em; } .hkmsg.out { align-self: flex-start; background: rgba(108,138,255,.17); border: 1px solid rgba(108,138,255,.3); border-bottom-left-radius: 4px; } .hkmsg.in { align-self: flex-end; background: rgba(28,31,40,.92); border: 1px solid var(--d-border-2); border-bottom-right-radius: 4px; } .hkmsg.in p { color: var(--d-text-2); } .hksigs { position: absolute; right: var(--pad); top: 52%; transform: translateY(-50%); z-index: 6; width: min(252px, 38vw); display: flex; flex-direction: column; gap: 10px; } .hksig { background: rgba(20,22,30,.88); border: 1px solid var(--d-border-2); border-radius: 11px; padding: 10px 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0,0,0,.45); } .hksig-tag { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-bright); opacity: .85; margin-bottom: 5px; } .hksig p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--d-text-2); } .hkx-answerwrap { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none; padding: 0 var(--pad); } .hkx-answer { width: min(620px, 92vw); max-width: 620px; padding: 26px 30px; } .hk-out-mark { width: 30px; height: 30px; margin: 0 auto 10px; color: var(--indigo-bright); filter: drop-shadow(0 0 9px rgba(108,138,255,.55)); } .hk-out-mark svg { width: 100%; height: auto; display: block; } .hkx-answer p { font-size: clamp(15px, 1.6vw, 18.5px); line-height: 1.6; } .hkx.hkx-static { height: auto; } .hkx.hkx-static .hkx-stage { position: relative; height: clamp(520px, 82vh, 680px); } @media (max-width: 760px) { .hkchat, .hksigs { width: min(72vw, 280px); } .hkx-answer { padding: 20px 18px; } } @media (max-width: 820px) { .hkx { height: 320vh; } } /* --- fusion: data fuses into intelligence, sequenced as it enters --- sources slide in -> the streams light up -> the core ignites -> the briefing writes itself out, line by line. */ .fusion.reveal { opacity: 1; transform: none; } .fusion .fz-chip, .fusion .fusion-lines, .fusion .fusion-core, .fusion .brief-card, .fusion .brief-card li { opacity: 0; transition: opacity .6s cubic-bezier(.16,.7,.3,1), transform .6s cubic-bezier(.16,.7,.3,1); } .fusion .fz-chip { transform: translateX(-14px); } .fusion .fusion-core { transform: scale(.94); } .fusion .brief-card { transform: translateX(16px); } .fusion .brief-card li { transform: translateY(8px); } .fusion.in .fz-chip { opacity: 1; transform: none; } .fusion.in .fz-chip:nth-child(1) { transition-delay: .05s; } .fusion.in .fz-chip:nth-child(2) { transition-delay: .15s; } .fusion.in .fz-chip:nth-child(3) { transition-delay: .25s; } .fusion.in .fz-chip:nth-child(4) { transition-delay: .35s; } .fusion.in .fusion-lines { opacity: 1; transition-delay: .5s; } .fusion.in .fusion-lines.out { transition-delay: .9s; } .fusion.in .fusion-core { opacity: 1; transform: none; transition-delay: .65s; animation: corePulse 1.3s ease .65s both; } .fusion.in .brief-card { opacity: 1; transform: none; transition-delay: 1s; } .fusion.in .brief-card li { opacity: 1; transform: none; } .fusion.in .brief-card li:nth-child(1) { transition-delay: 1.2s; } .fusion.in .brief-card li:nth-child(2) { transition-delay: 1.35s; } .fusion.in .brief-card li:nth-child(3) { transition-delay: 1.5s; } @keyframes corePulse { 0% { box-shadow: 0 0 0 rgba(48,80,200,0); } 55% { box-shadow: 0 0 90px rgba(108,138,255,.75); } 100% { box-shadow: 0 0 60px rgba(48,80,200,.4); } } @media (max-width: 1040px) { .fusion { grid-template-columns: 1fr; gap: 22px; max-width: 460px; margin-left: auto; margin-right: auto; } .fusion-lines { display: none; } .fusion-core { max-width: 280px; margin: 0 auto; } } /* ---------- 6. CAPABILITY MAP ---------- */ .cap-moat { font-family: var(--display); font-size: clamp(21px, 2.6vw, 30px); line-height: 1.3; color: var(--text); max-width: 780px; margin: 20px 0 4px; } .cap-moat b { color: var(--indigo); font-weight: 600; } .cap-list { margin-top: 40px; border-top: 1px solid var(--border); } .cap-item { border-bottom: 1px solid var(--border); } .cap-btn { display: grid; grid-template-columns: 54px minmax(180px,260px) 1fr 32px; align-items: center; gap: 20px; width: 100%; text-align: left; padding: 26px 8px; transition: background .18s; } .cap-btn:hover { background: var(--bg-soft); } .cap-num { color: var(--indigo); font-size: 13px; } .cap-name { font-family: var(--display); font-size: clamp(20px,2.4vw,26px); font-weight: 500; } .cap-line { color: var(--text-2); font-size: 15.5px; } .cap-toggle { font-size: 24px; color: var(--text-3); text-align: center; transition: transform .25s ease, color .2s; font-weight: 300; } .cap-item.open .cap-toggle { transform: rotate(45deg); color: var(--indigo); } .cap-detail { max-height: 0; overflow: hidden; transition: max-height .35s cubic-bezier(.4,0,.2,1); } .cap-detail p { padding: 0 8px 28px 74px; max-width: 760px; color: var(--text-2); font-size: 16px; } .cap-item.open .cap-detail { max-height: 220px; } /* capability rows reveal in a quick cascade as the list enters */ .cap-list.reveal { opacity: 1; transform: none; } .cap-list .cap-item { opacity: 0; transform: translateY(14px); transition: opacity .5s cubic-bezier(.16,.7,.3,1), transform .5s cubic-bezier(.16,.7,.3,1); } .cap-list.in .cap-item { opacity: 1; transform: none; } .cap-list.in .cap-item:nth-child(2) { transition-delay: .05s; } .cap-list.in .cap-item:nth-child(3) { transition-delay: .10s; } .cap-list.in .cap-item:nth-child(4) { transition-delay: .15s; } .cap-list.in .cap-item:nth-child(5) { transition-delay: .20s; } .cap-list.in .cap-item:nth-child(6) { transition-delay: .25s; } .cap-list.in .cap-item:nth-child(7) { transition-delay: .30s; } @media (max-width: 760px) { .cap-btn { grid-template-columns: 36px 1fr 28px; gap: 12px; padding: 20px 4px; } .cap-line { display: none; } .cap-detail p { padding-left: 48px; } } /* ---------- 7. ROLES ---------- (the product page's 7-role grid was replaced by the homepage seat-switcher pattern -- all styles live in the SEATS block below) */ /* ---------- 8. HOW IT FITS ---------- */ /* ---- how it fits: keep your systems, add the command layer ---- */ .keep { margin: 48px auto 0; max-width: 860px; } .keep-layer { position: relative; display: flex; align-items: center; gap: 15px; padding: 16px 22px; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(108,138,255,.16), rgba(48,80,200,.05)); border: 1px solid rgba(108,138,255,.34); box-shadow: 0 0 54px rgba(48,80,200,.3); } .keep-layer-mark { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--indigo); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(48,80,200,.5); } .keep-layer-mark svg { width: 26px; } .keep-layer-txt b { font-family: var(--display); font-size: 21px; font-weight: 500; color: var(--d-text); display: block; line-height: 1.1; } .keep-layer-txt small { font-size: 12.5px; color: var(--d-text-2); } .keep-layer-tag { margin-left: auto; font-size: 10.5px; letter-spacing: .03em; color: var(--indigo-bright); white-space: nowrap; } .keep-onto { display: block; text-align: center; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--d-text-3); margin: 13px 0; } .keep-base { border: 1px solid var(--d-border); border-radius: var(--r-lg); background: var(--ink-3); padding: 20px; } .keep-base-label { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-text-3); margin-bottom: 16px; } .keep-systems { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; } .keep-sys { display: flex; flex-direction: column; gap: 3px; padding: 14px; border-radius: var(--r-md); background: rgba(255,255,255,.03); border: 1px solid var(--d-border); } .keep-sys b { font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--d-text); } .keep-sys > span:not(.keep-tag) { font-size: 12px; color: var(--d-text-2); } .keep-tag { margin-top: 9px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .01em; line-height: 1.35; } .keep-tag.stays { color: var(--green-d); } .keep-tag.swap { color: var(--indigo-bright); } .keep-tag.swap i { opacity: .7; } .keep-crew { display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 20px; font-size: 15px; color: var(--d-text); } @media (max-width: 720px) { .keep-systems { grid-template-columns: repeat(2,1fr); } .keep-layer { flex-wrap: wrap; } .keep-layer-tag { margin-left: 0; width: 100%; } } /* ---------- 9. FIELD APP ---------- */ .field-inner { display: grid; grid-template-columns: 1fr 360px; gap: clamp(36px,6vw,80px); align-items: center; } .field-points { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; } .field-points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; font-size: 16px; color: var(--text-2); line-height: 1.5; } .field-points b { color: var(--text); font-weight: 600; } .fp-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--indigo-tint); color: var(--indigo); display: grid; place-items: center; font-size: 12px; margin-top: 2px; } .field-avail { margin-top: 30px; } /* phone */ .field-phone { display: flex; justify-content: center; } .phone { width: 300px; background: #0c0d11; border-radius: 42px; padding: 11px; box-shadow: 0 30px 70px rgba(16,18,28,.28), 0 0 0 1px rgba(16,18,28,.12), inset 0 0 0 2px #23252e; position: relative; } .phone-notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 110px; height: 26px; background: #0c0d11; border-radius: 14px; z-index: 4; } .phone-screen { background: #f4f5f8; color: var(--text); border-radius: 32px; overflow: hidden; height: 600px; display: flex; flex-direction: column; } .ph-status { display: flex; justify-content: space-between; padding: 16px 24px 8px; font-size: 12px; color: var(--text-2); } .ph-body { flex: 1; padding: 14px 20px 8px; overflow: hidden; } .ph-greet { font-family: var(--display); font-size: 24px; font-weight: 500; } .ph-date { font-size: 12px; color: var(--text-3); margin-top: 2px; } .ph-clock-card { background: var(--ink); color: #fff; border-radius: 18px; padding: 18px; margin: 16px 0; text-align: center; box-shadow: 0 10px 24px rgba(48,80,200,.2); } .ph-clock-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-text-3); } .ph-clock-time { display: block; font-family: var(--display); font-size: 44px; font-weight: 500; line-height: 1.1; margin: 4px 0 14px; } .ph-clock-time small { font-size: 20px; color: var(--d-text-3); } .ph-clock-btn { background: var(--indigo); color: #fff; border-radius: 999px; padding: 10px 26px; font-size: 14px; font-weight: 500; width: 100%; } .ph-clock-foot { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; color: var(--d-text-3); margin-top: 12px; } .ph-section { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin: 6px 0 10px; } .ph-job { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--border); } .ph-job .status-dot { flex: none; } .ph-job .status-dot:not(.green) { background: var(--border-2); box-shadow: none; } .ph-job b { font-size: 14px; display: block; } .ph-job small { font-size: 12px; color: var(--text-3); } .ph-job-now { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--green); background: rgba(47,158,107,.12); padding: 3px 8px; border-radius: 6px; } .ph-job-dur { margin-left: auto; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; } .ph-tabs { display: flex; background: #fff; border-top: 1px solid var(--border); padding: 10px 0 22px; } .ph-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--text-3); } .ph-tab i { font-size: 18px; font-style: normal; } .ph-tab.active { color: var(--indigo); } /* the phone "fills in" like the app loading: greeting -> clock -> the day's jobs */ .field-phone .ph-body > * { opacity: 0; transform: translateY(10px); transition: opacity .5s cubic-bezier(.16,.7,.3,1), transform .5s cubic-bezier(.16,.7,.3,1); } .field-phone.in .ph-body > * { opacity: 1; transform: none; } .field-phone.in .ph-body > :nth-child(1) { transition-delay: .2s; } .field-phone.in .ph-body > :nth-child(2) { transition-delay: .28s; } .field-phone.in .ph-body > :nth-child(3) { transition-delay: .38s; } .field-phone.in .ph-body > :nth-child(4) { transition-delay: .52s; } .field-phone.in .ph-body > :nth-child(5) { transition-delay: .6s; } .field-phone.in .ph-body > :nth-child(6) { transition-delay: .68s; } .field-phone.in .ph-body > :nth-child(7) { transition-delay: .76s; } @media (max-width: 820px) { .field-inner { grid-template-columns: 1fr; justify-items: center; } .field-copy { order: 1; } } /* ---------- 10. PROOF ---------- */ .proof { overflow: hidden; } .proof-glow { position: absolute; bottom: -20%; right: 10%; width: 700px; height: 600px; background: radial-gradient(circle, rgba(48,80,200,.3), transparent 64%); filter: blur(20px); pointer-events: none; } .proof-inner { position: relative; z-index: 2; } .proof-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 56px; } /* container stays put; the three stats rise in a stagger as it enters */ .proof-stats.reveal { opacity: 1; transform: none; } .proof-stats .pstat { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.16,.7,.3,1), transform .6s cubic-bezier(.16,.7,.3,1); } .proof-stats.in .pstat { opacity: 1; transform: none; } .proof-stats.in .pstat:nth-child(2) { transition-delay: .12s; } .proof-stats.in .pstat:nth-child(3) { transition-delay: .24s; } .pstat { padding: 28px; border: 1px solid var(--d-border); border-radius: var(--r-lg); background: rgba(255,255,255,.025); } .pstat b { font-family: var(--display); font-size: clamp(32px,4.6vw,52px); font-weight: 500; color: var(--d-text); display: block; line-height: 1; } .pstat-plus { color: var(--indigo-bright); } .pstat span { font-size: 15px; color: var(--d-text-2); margin-top: 12px; display: block; } .proof-honest { margin-top: 36px; font-size: 16px; color: var(--d-text-2); } .proof-honest .mono { color: var(--d-text); font-size: 14px; } @media (max-width: 760px) { .proof-stats { grid-template-columns: 1fr; } } /* ---------- 11. CTA ---------- */ .cta { overflow: hidden; text-align: center; } .cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 900px; height: 500px; background: radial-gradient(ellipse, rgba(48,80,200,.4), transparent 62%); filter: blur(20px); pointer-events: none; } .cta-inner { position: relative; z-index: 2; max-width: 760px; } .cta-h2 { font-size: clamp(34px,5.4vw,62px); margin: 20px 0 22px; } .cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; } .cta-mail { margin-top: 14px; font-size: 12.5px; letter-spacing: .03em; color: var(--d-text-3); } .cta-mail a { color: var(--d-text-2); text-decoration: underline; text-underline-offset: 3px; } .cta-proof { margin-top: 16px; font-size: 12.5px; letter-spacing: .05em; color: var(--d-text-2); } .cta-loop { margin-top: 30px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--indigo-bright); } /* the brand loop ticks in phrase by phrase as the finale settles */ .cta-loop .cl-step { opacity: 0; transition: opacity .5s ease; } .cta-inner.in .cta-loop .cl-step { opacity: 1; } .cta-inner.in .cta-loop .cl-step:nth-child(1) { transition-delay: .5s; } .cta-inner.in .cta-loop .cl-step:nth-child(2) { transition-delay: .78s; } .cta-inner.in .cta-loop .cl-step:nth-child(3) { transition-delay: 1.06s; } /* reduced motion: data-story visuals settle to final state, no animation (JS sets the bar widths + count text to their final values directly). */ @media (prefers-reduced-motion: reduce) { .recon-fill { transition: none; } .recon-flagbar { opacity: 1; transform: none; transition: none; } .proof-stats .pstat { opacity: 1; transform: none; transition: none; } .fusion .fz-chip, .fusion .fusion-lines, .fusion .fusion-core, .fusion .brief-card, .fusion .brief-card li { opacity: 1; transform: none; transition: none; } .fusion.in .fusion-core { animation: none; } .stack > * { opacity: 1; transform: none; transition: none; } .cap-list .cap-item { opacity: 1; transform: none; transition: none; } .field-phone .ph-body > * { opacity: 1; transform: none; transition: none; } .cta-loop .cl-step { opacity: 1; transition: none; } .ownbrief-context, .ownbrief-card, .ob-greet, .ob-item, .ob-foresight, .ob-sources { opacity: 1; transform: none; transition: none; } .hk-head, .hk-frag, .hk-merge, .hk-out { opacity: 1; transform: none; transition: none; } } /* dev capture mode (?shot/?reveal): settle all motion instantly for clean stills */ .fk-shot *, .fk-shot *::before, .fk-shot *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; } /* --- atmospheric grain: a faint film over the whole page (the "expensive" texture). Fixed, non-interactive, very low opacity so it reads as lens grain, never as noise. --- */ .grain { position: fixed; inset: 0; z-index: 100; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='ng'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ng)'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: .05; } @media (prefers-reduced-motion: reduce) { .grain { opacity: .03; } } /* ============ 1b. WHAT IT IS — the fusion build-up (scroll-scrubbed; engine sets opacity/transform) ============ */ .fxb { position: relative; height: 340vh; } .fxb-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(16px, 3vh, 36px); padding: 80px var(--pad) 46px; } .fx-glow { position: absolute; top: 54%; left: 50%; transform: translate(-50%,-50%); width: 760px; height: 480px; max-width: 92vw; background: radial-gradient(ellipse, rgba(48,80,200,.24) 0%, transparent 66%); filter: blur(24px); pointer-events: none; z-index: 0; } /* head + cross-fading framing (AppFolio -> Fieldkeep) */ .fxb-head { position: relative; z-index: 2; text-align: center; max-width: 780px; margin: 0 auto; } .fxb-h2 { display: grid; } .fxb-sub { display: grid; margin-top: 10px; } .fxb-h2 .fxb-t, .fxb-sub .fxb-t { grid-area: 1 / 1; } .fxb-h2 .fxb-t { font-family: var(--display); font-size: clamp(28px, 4vw, 46px); line-height: 1.12; color: var(--d-text); } .fxb-sub .fxb-t { font-size: clamp(15px, 1.7vw, 18px); color: var(--d-text-2); } .fxb-t1 { opacity: 0; } /* diagram */ .fxb-diagram { position: relative; z-index: 2; width: 100%; max-width: 1040px; height: clamp(360px, 52vh, 460px); margin: 0 auto; } .fx-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .fxw { fill: none; stroke: rgba(108,138,255,.5); stroke-width: 1.4; stroke-linecap: round; opacity: 0; } .fxf { fill: none; stroke: var(--indigo-bright); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 7 320; stroke-dashoffset: 327; opacity: 0; filter: drop-shadow(0 0 4px rgba(108,138,255,.7)); } .fxf.on { animation: fxFlow 2.3s linear infinite; } .fxf-out.on { animation-duration: 2s; } @keyframes fxFlow { 0% { stroke-dashoffset: 327; opacity: 0; } 14% { opacity: .95; } 86% { opacity: .95; } 100% { stroke-dashoffset: 0; opacity: 0; } } /* source nodes (left) */ .fx-src { position: absolute; left: 0; transform: translateY(-50%); width: 23%; min-width: 150px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255,255,255,.04); border: 1px solid var(--d-border); border-radius: 12px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; z-index: 2; } .fx-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; background: rgba(108,138,255,.14); color: var(--indigo-bright); display: grid; place-items: center; } .fx-ic svg { width: 17px; height: 17px; } .fx-lbl { font-size: 13px; color: var(--d-text); font-weight: 500; line-height: 1.2; } /* source intro reveal: the icon comes alive, then the label resolves (engine toggles .revealed by scroll) */ .fx-src[data-reveal] { opacity: 0; } .fx-src[data-reveal] .fx-lbl { opacity: 0; transform: translateX(-8px); } .fx-src[data-reveal] .fx-ic { position: relative; overflow: visible; } .fx-src[data-reveal].revealed { opacity: 1; transition: opacity .35s ease; } .fx-src[data-reveal].revealed .fx-ic { animation: fxIcPop .5s cubic-bezier(.2,.8,.2,1); } .fx-src[data-reveal].revealed .fx-lbl { opacity: 1; transform: none; transition: opacity .5s ease .6s, transform .55s cubic-bezier(.2,.7,.2,1) .6s; } @keyframes fxIcPop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } /* GPS signature: a locating ping */ .fx-src.s-gps.revealed .fx-ic::before, .fx-src.s-gps.revealed .fx-ic::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; border: 1.5px solid var(--indigo-bright); opacity: 0; pointer-events: none; animation: fxLocate 1.5s ease-out .2s 2; } .fx-src.s-gps.revealed .fx-ic::after { animation-delay: .7s; } @keyframes fxLocate { 0% { transform: scale(.5); opacity: .7; } 75% { opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } } /* Field chat signature: a typing indicator */ .fx-src.s-chat .fx-typing { position: absolute; left: 50%; top: 45%; transform: translate(-50%,-50%); display: flex; gap: 2px; pointer-events: none; } .fx-src.s-chat .fx-typing i { width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--indigo-bright); opacity: 0; } .fx-src.s-chat.revealed .fx-typing i { animation: fxType 1.1s ease-in-out 3; } .fx-src.s-chat.revealed .fx-typing i:nth-child(2) { animation-delay: .15s; } .fx-src.s-chat.revealed .fx-typing i:nth-child(3) { animation-delay: .3s; } @keyframes fxType { 0%,100% { opacity: .25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-1.5px); } } /* Time & mileage signature: a sweeping hand */ .fx-src.s-time .fx-sweep { position: absolute; left: 50%; bottom: 50%; width: 1.5px; height: 7px; background: var(--indigo-bright); border-radius: 1px; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); opacity: 0; pointer-events: none; } .fx-src.s-time.revealed .fx-sweep { animation: fxSweep 1.5s cubic-bezier(.4,0,.2,1) .1s 1; } @keyframes fxSweep { 0% { opacity: 0; transform: translateX(-50%) rotate(-20deg); } 15% { opacity: .9; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateX(-50%) rotate(340deg); } } /* Documents signature: the lines write themselves in */ .fx-src.s-doc .fx-doc-lines { stroke-dasharray: 1; stroke-dashoffset: 1; } .fx-src.s-doc.revealed .fx-doc-lines { animation: fxDraw 1s ease .25s forwards; } @keyframes fxDraw { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .fx-src[data-reveal].revealed .fx-ic, .fx-src[data-reveal].revealed .fx-lbl { animation: none; transition: none; } .fx-src.s-gps.revealed .fx-ic::before, .fx-src.s-gps.revealed .fx-ic::after { display: none; } .fx-src.s-chat .fx-typing, .fx-src.s-time .fx-sweep { display: none; } .fx-src.s-doc .fx-doc-lines { stroke-dashoffset: 0; } } /* core */ .fx-core { position: absolute; left: 51.5%; top: 50%; transform: translate(-50%,-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px; } .fx-core-mark { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(48,80,200,.5), rgba(16,18,26,.96)); border: 1.5px solid rgba(108,138,255,.3); color: #fff; } .fx-core-mark svg { width: 44px; height: auto; } .fx-core-name { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--indigo-bright); font-weight: 700; white-space: nowrap; } .fx-core-ai { color: #fff; opacity: 0; } .fxv-w { transform-box: fill-box; transform-origin: center bottom; animation: fxWedge calc(2.6s - var(--alive, 0) * 1.1s) ease-in-out infinite; animation-delay: calc(var(--wd, 0) * .26s); } @keyframes fxWedge { 0%, 100% { transform: scaleY(.72); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fxv-w { animation: none; opacity: 1; transform: none; } } /* output (right): METAMORPHOSES — an AppFolio+AI report becomes a live command center; each source adds a distinct, valuable layer */ .fx-out { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 31%; min-width: 232px; z-index: 2; } .fx-out-screen { position: relative; height: 220px; border-radius: 14px; border: 1px solid var(--d-border-2); overflow: hidden; box-shadow: 0 18px 48px rgba(0,0,0,.5); background: linear-gradient(180deg, rgba(24,27,36,.95), rgba(14,16,22,.97)); } /* REPORT (AI on AppFolio): a static financial report — backward, greyscale */ .fxo-report { position: absolute; inset: 0; padding: 12px 15px; display: flex; flex-direction: column; } .fxr-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); } .fxr-title { font-size: 12.5px; font-weight: 600; color: var(--d-text-2); } .fxr-date { font-size: 10px; color: var(--d-text-3); } .fxr-trend { display: flex; align-items: center; gap: 9px; margin-top: 9px; } .fxr-spark { width: 62px; height: 17px; color: var(--d-text-3); flex: none; opacity: .7; } .fxr-trend-lbl { font-size: 10px; color: var(--d-text-3); } .fxr-trend-lbl b { color: #cf8a8a; font-family: var(--mono); font-weight: 600; } .fxr-rows { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .fxr-rows li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--d-text-3); } .fxr-rows li span { margin-right: auto; } .fxr-rows li b { color: var(--d-text-2); font-weight: 600; font-family: var(--mono); } .fxr-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; opacity: .62; } .fxr-dot.d1 { background: #5fd0e6; } .fxr-dot.d2 { background: #7ed957; } .fxr-dot.d3 { background: #a78bfa; } .fxr-ai { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--d-text-3); margin-top: auto; padding-top: 8px; } .fxr-aistar { width: 11px; height: 11px; color: var(--d-text-3); flex: none; } /* LIVE (Fieldkeep): the command center — each source adds its own layer */ .fxo-live { position: absolute; inset: 0; } .fxl-grid { position: absolute; inset: 0; opacity: 0; background-image: linear-gradient(rgba(108,138,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(108,138,255,.07) 1px, transparent 1px); background-size: 22px 22px; } .fxl-tag { position: absolute; top: 11px; left: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; color: var(--green-d); } .fxl-tag .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 6px var(--green-d); animation: livePulse 2s ease infinite; } /* crew pins: parent = anchor (JS flies it in from its report row); child .fxl-dot = colored glow + gentle drift */ .fxl-pin { position: absolute; width: 11px; height: 11px; will-change: transform, opacity; } .fxl-pin.p1 { left: 22%; top: 47%; } .fxl-pin.p2 { left: 60%; top: 39%; } .fxl-pin.p3 { left: 43%; top: 65%; } .fxl-dot { position: absolute; inset: 0; border-radius: 50%; } .fxl-pin.p1 .fxl-dot { background: #5fd0e6; box-shadow: 0 0 10px #5fd0e6; animation: fxDrift1 7s ease-in-out infinite; } .fxl-pin.p2 .fxl-dot { background: #7ed957; box-shadow: 0 0 10px #7ed957; animation: fxDrift2 8.5s ease-in-out infinite; } .fxl-pin.p3 .fxl-dot { background: #a78bfa; box-shadow: 0 0 10px #a78bfa; animation: fxDrift3 9.5s ease-in-out infinite; } .fxl-ring { position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid #7ed957; opacity: 0; animation: fxPing 2.6s ease-out infinite; } .fxl-land { position: absolute; inset: -5px; border-radius: 50%; border: 1px solid #fff; opacity: 0; pointer-events: none; } .fxl-pin.p1 .fxl-land { border-color: #5fd0e6; } .fxl-pin.p2 .fxl-land { border-color: #7ed957; } .fxl-pin.p3 .fxl-land { border-color: #a78bfa; } @keyframes fxDrift1 { 0%,100% { transform: translate(0,0); } 33% { transform: translate(4px,-3px); } 66% { transform: translate(-2px,3px); } } @keyframes fxDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-4px,4px); } } @keyframes fxDrift3 { 0%,100% { transform: translate(0,0); } 40% { transform: translate(3px,3px); } 75% { transform: translate(-3px,-2px); } } @keyframes fxPing { 0% { transform: scale(.45); opacity: .65; } 70% { opacity: 0; } 100% { transform: scale(2.1); opacity: 0; } } .fxl-flag { position: absolute; left: 72%; top: 62%; width: 11px; height: 11px; border-radius: 50%; background: #fbbf24; animation: fxFlag 2s ease-in-out infinite; } @keyframes fxFlag { 0%,100% { box-shadow: 0 0 7px #fbbf24; } 50% { box-shadow: 0 0 15px #fbbf24, 0 0 4px #fbbf24; } } .fxl-chat { position: absolute; top: 30px; right: 12px; width: 56px; height: 30px; border-radius: 9px 9px 9px 2px; background: rgba(108,138,255,.18); border: 1px solid rgba(108,138,255,.34); display: flex; align-items: center; padding: 0 5px; transform-origin: top right; } .fxl-photo { width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(135deg, #5fd0e6, #a78bfa); display: block; } .fxl-chip { position: absolute; left: 13%; top: 65%; font-size: 9px; font-family: var(--mono); color: var(--green-d); background: rgba(126,217,87,.16); border: 1px solid rgba(126,217,87,.32); padding: 2px 6px; border-radius: 5px; white-space: nowrap; transform-origin: left center; } .fxl-brief { position: absolute; left: 12px; right: 12px; bottom: 11px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 7px; padding: 6px 9px; border-radius: 9px; background: rgba(108,138,255,.12); border: 1px solid rgba(108,138,255,.24); transform-origin: center bottom; } .fxl-brief-ai { font-size: 9px; font-weight: 700; letter-spacing: .07em; color: var(--indigo-bright); flex: none; } .fxl-brief-src { flex-basis: 100%; font-size: 8px; letter-spacing: .05em; color: var(--d-text-3); } .fxl-brief-txt { font-size: 10.5px; color: var(--d-text); white-space: nowrap; overflow: hidden; } .fxl-type { display: inline-block; white-space: nowrap; clip-path: inset(0 calc((1 - var(--type, 1)) * 100%) 0 0); } .fxb-hint { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 4; text-align: center; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--d-text-3); } /* static (reduced-motion desktop / collapsed) + mobile stack */ .fxb-static { height: auto; } .fxb-static .fxb-stage { position: relative; height: auto; } .fxb-static .fxb-hint { display: none; } @media (prefers-reduced-motion: reduce) { .fxf { display: none; } .fxl-flag { animation: none; } } @media (max-width: 760px) { .fxb { height: auto; } .fxb-stage { position: relative; height: auto; } .fxb-diagram { height: auto; max-width: 380px; display: flex; flex-direction: column; gap: 11px; } .fx-wires { display: none; } .fx-src { position: relative; top: auto !important; transform: none !important; width: 100%; min-width: 0; opacity: 1 !important; } .fx-core { position: relative; left: auto; top: auto; transform: none !important; flex-direction: row; gap: 12px; justify-content: center; margin: 4px 0; } .fx-core-mark { width: 64px; height: 64px; } .fx-core-mark svg { width: 32px; } .fx-out { position: relative; right: auto; top: auto; transform: none !important; width: 100%; min-width: 0; } .fxb-hint { display: none; } } /* ============ §2 PROBLEM — the disconnected-streams gap visual (inverse of the fusion) ============ */ .problem-inner.center { text-align: center; } .gap-viz { max-width: 720px; margin: 44px auto 0; } .gap-streams { display: flex; justify-content: center; align-items: center; gap: clamp(14px, 5vw, 52px); flex-wrap: wrap; margin-bottom: 26px; } .gap-node { display: flex; flex-direction: column; align-items: center; gap: 9px; opacity: .62; } .gap-node:nth-child(2) { transform: translateY(-15px); } .gap-node:nth-child(3) { transform: translateY(9px); } .gap-node:nth-child(4) { transform: translateY(-9px); } .gap-node:nth-child(5) { transform: translateY(5px); } .gap-node svg { width: 30px; height: 30px; color: var(--d-text-3); } .gap-node i { font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--d-text-3); font-style: normal; } .gap-cap { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-text-3); margin: 0 0 30px; } .gap-stat-num { font-family: var(--display); font-size: clamp(36px, 5.6vw, 56px); font-weight: 500; color: var(--amber-d); line-height: 1; display: inline-block; text-shadow: 0 0 40px rgba(251,191,36,.25); } .gap-stat-num .gap-cur { font-size: .56em; vertical-align: 0.12em; margin-right: 1px; } .gap-stat-lbl { display: block; margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--d-text-2); max-width: 460px; margin-left: auto; margin-right: auto; } .gap-illus { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: var(--d-text-3); border: 1px solid var(--d-border); padding: 1px 6px; border-radius: 4px; white-space: nowrap; } .gap-viz.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.16,.7,.3,1), transform .6s cubic-bezier(.16,.7,.3,1); } .gap-viz.in { opacity: 1; transform: none; } @media (max-width: 560px) { .gap-streams { gap: 14px 22px; } .gap-node:nth-child(n) { transform: none; } } /* ============ §5 PROOF — the loud hero numeral PAIR (units × buildings) ============ */ .proof-hero { text-align: center; margin: 18px auto 6px; } .proof-bigrow { display: flex; justify-content: center; align-items: flex-start; gap: clamp(34px, 8vw, 110px); flex-wrap: wrap; } .proof-bigstat { flex: 0 1 auto; } .proof-bigstat .proof-bigsub { max-width: 250px; margin-left: auto; margin-right: auto; } .proof-bignum { font-family: var(--display); font-weight: 600; font-size: clamp(64px, 11vw, 132px); line-height: .9; color: var(--d-text); letter-spacing: -.025em; display: inline-flex; align-items: flex-start; justify-content: center; text-shadow: 0 0 70px rgba(108,138,255,.55); } .proof-bignum .proof-plus { font-size: .38em; color: var(--indigo-bright); margin-top: .12em; margin-left: .02em; } .proof-bigsub { font-size: clamp(15px, 1.9vw, 20px); color: var(--d-text-2); margin-top: 8px; } .proof-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 24px; } .proof-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .03em; color: var(--d-text-3); background: rgba(255,255,255,.04); border: 1px solid var(--d-border); padding: 7px 14px; border-radius: 22px; } .proof-chip .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 6px var(--green-d); animation: livePulse 2s ease infinite; } .proof .proof-honest { margin-top: 30px; } /* ============ §9 HOW-IT-FITS — elevated command-layer assembly ============ */ .fitstack { max-width: 720px; margin: 42px auto 0; position: relative; } .fitstack-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 14px; max-width: 560px; margin: 0 auto; padding: 16px 20px; border-radius: 16px; background: linear-gradient(180deg, rgba(48,80,200,.32), rgba(30,40,90,.5)); border: 1px solid rgba(108,138,255,.5); box-shadow: 0 24px 54px rgba(0,0,0,.55), 0 0 60px rgba(48,80,200,.35), inset 0 1px 0 rgba(255,255,255,.1); } .fitstack-mark { width: 30px; height: 30px; color: #fff; flex: none; filter: drop-shadow(0 0 8px rgba(108,138,255,.7)); } .fitstack-mark svg { width: 100%; height: auto; display: block; } .fitstack-top-txt { flex: 1; min-width: 0; } .fitstack-top-txt b { display: block; font-size: 17px; color: #fff; font-weight: 600; } .fitstack-top-txt small { font-size: 12px; color: var(--d-text-2); } .fitstack-top-tag { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--indigo-bright); white-space: nowrap; } .fitstack-beams { position: relative; z-index: 1; height: 28px; display: flex; justify-content: center; gap: 21%; margin: -3px 0; } .fitstack-beams i { width: 1px; background: linear-gradient(180deg, rgba(108,138,255,.65), rgba(108,138,255,.04)); } .fitstack-base { position: relative; z-index: 2; padding: 18px 18px 16px; border-radius: 16px; background: rgba(0,0,0,.28); border: 1px solid var(--d-border); box-shadow: inset 0 2px 16px rgba(0,0,0,.55); } .fitstack-base-lbl { display: block; text-align: center; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--d-text-3); margin-bottom: 14px; } .fitstack-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .fittile { padding: 13px 12px; border-radius: 11px; background: rgba(255,255,255,.025); border: 1px solid var(--d-border); } .fittile .wm { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--d-text); font-weight: 600; } .fittile .wm .wm-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; } .wm-dot.a { background: #2a7de1; } .wm-dot.g { background: #1a9d5a; } .wm-dot.q { background: #2ca01c; } .wm-dot.d { background: #d0271d; } .fittile > span:not(.fittile-tag) { display: block; font-size: 10.5px; color: var(--d-text-3); margin-top: 4px; } .fittile-tag { display: block; font-family: var(--mono); font-size: 8.5px; letter-spacing: .03em; margin-top: 9px; } .fittile-tag.stays { color: var(--green-d); } .fittile-tag.swap { color: var(--indigo-bright); } .fits-crew { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px; font-size: 13px; color: var(--d-text-2); } .fitstack-top, .fittile, .fitstack-beams i { opacity: 0; transition: opacity .55s cubic-bezier(.16,.7,.3,1), transform .55s cubic-bezier(.16,.7,.3,1); } .fitstack-top { transform: translateY(-14px) scale(.985); } .fittile { transform: translateY(12px); } .fitstack-beams i { transform: scaleY(0); transform-origin: top; transition: opacity .4s ease, transform .5s ease; } .fitstack.in .fittile { opacity: 1; transform: none; } .fitstack.in .fittile:nth-child(1) { transition-delay: .08s; } .fitstack.in .fittile:nth-child(2) { transition-delay: .18s; } .fitstack.in .fittile:nth-child(3) { transition-delay: .28s; } .fitstack.in .fittile:nth-child(4) { transition-delay: .38s; } .fitstack.in .fitstack-top { opacity: 1; transform: none; transition-delay: .6s; } .fitstack.in .fitstack-beams i { opacity: 1; transform: scaleY(1); transition-delay: .82s; } @media (max-width: 640px) { .fitstack-tiles { grid-template-columns: repeat(2, 1fr); } .fitstack-top { flex-wrap: wrap; } .fitstack-top-tag { width: 100%; } } @media (prefers-reduced-motion: reduce) { .fitstack-top, .fittile, .fitstack-beams i { opacity: 1; transform: none; transition: none; } } /* ============ §10 ROLES — seat-switcher (one artifact, reframed per seat) ============ */ .seatsw { max-width: 940px; margin: 36px auto 0; } .seatsw-pills { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-bottom: 30px; } .seatsw-pill { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--d-text-2); background: rgba(255,255,255,.04); border: 1px solid var(--d-border-2); padding: 8px 16px; border-radius: 22px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; } .seatsw-pill:hover { color: var(--d-text); border-color: rgba(255,255,255,.22); } .seatsw-pill[aria-selected="true"] { color: #fff; background: var(--indigo); border-color: var(--indigo-bright); box-shadow: 0 4px 16px rgba(48,80,200,.42); } .seatsw-stage { display: grid; } .seatsw-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: center; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; } .seatsw-panel.active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .seatp-copy h3 { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; color: var(--d-text); margin: 0 0 12px; } .seatp-copy p { font-size: 15.5px; line-height: 1.6; color: var(--d-text-2); margin: 0; } .seatp-copy b { color: var(--indigo-bright); font-weight: 600; } .seatp-art { display: flex; justify-content: center; } .seatcard { width: 100%; max-width: 360px; background: linear-gradient(180deg, rgba(24,26,34,.95), rgba(16,17,23,.97)); border: 1px solid var(--d-border-2); border-radius: 16px; padding: 16px 18px; box-shadow: 0 26px 70px rgba(0,0,0,.5); } .sc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--d-border); } .sc-name { font-size: 12.5px; font-weight: 600; color: var(--d-text); } .sc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--green-d); white-space: nowrap; } .sc-live .ld { width: 5px; height: 5px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 5px var(--green-d); animation: livePulse 2s ease infinite; } .sc-foot { display: flex; align-items: center; gap: 6px; font-size: 9.5px; color: var(--d-text-3); margin-top: 12px; } .sc-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0; } .sc-kpi { text-align: center; } .sc-kpi b { display: block; font-family: var(--display); font-size: 26px; font-weight: 500; color: var(--d-text); line-height: 1; } .sc-kpi b.amber { color: var(--amber-d); } .sc-kpi span { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--d-text-3); margin-top: 5px; display: block; } /* the owner panel's briefing — the real §4 briefing-card vocabulary at mini scale */ .smb { margin-top: 2px; padding: 12px 13px; border-radius: 12px; background: linear-gradient(180deg, rgba(108,138,255,.10), rgba(108,138,255,.05)); border: 1px solid rgba(108,138,255,.22); } .smb-head { display: flex; align-items: center; gap: 7px; padding-bottom: 8px; border-bottom: 1px solid rgba(108,138,255,.14); } .smb-mark { display: inline-flex; color: var(--indigo-bright); } .smb-mark svg { width: 14px; height: 12px; } .smb-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--indigo-bright); } .smb-time { margin-left: auto; font-size: 8.5px; color: var(--d-text-3); } .smb-items { margin: 9px 0 0; display: flex; flex-direction: column; gap: 8px; } .smb-items li { display: flex; gap: 8px; font-size: 11.5px; line-height: 1.45; color: var(--d-text-2); } .smb-items li i { width: 6px; height: 6px; border-radius: 50%; margin-top: 5px; flex: none; } .smb-amber i { background: var(--amber-d); box-shadow: 0 0 6px rgba(251,191,36,.5); } .smb-green i { background: var(--green-d); box-shadow: 0 0 6px rgba(52,211,153,.45); } .smb-items b { color: var(--d-text); font-weight: 600; } .smb-src { margin-top: 10px; font-size: 8.5px; letter-spacing: .05em; color: var(--d-text-3); } /* the dispatch panel's mini live-map tile (fxo-live visual language, no Leaflet) */ .smt { position: relative; height: 150px; margin: 14px 0 2px; border-radius: 12px; background: linear-gradient(165deg, #11141c, #0d0f15); border: 1px solid var(--d-border); overflow: hidden; } .smt-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(108,138,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(108,138,255,.05) 1px, transparent 1px); background-size: 26px 26px; } .smt-trail { position: absolute; inset: 0; width: 100%; height: 100%; } .smt-trail path { stroke: #5fd0e6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 6; fill: none; opacity: .75; } .smt-pin { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; } .smt-pin svg { width: 16px; height: 14px; filter: drop-shadow(0 0 6px currentColor); } .smt-name { font-family: var(--mono); font-size: 8px; font-style: normal; letter-spacing: .04em; color: currentColor; } .smt-ring { position: absolute; right: 16%; bottom: 22%; width: 22px; height: 22px; border: 2px dashed var(--amber-d); border-radius: 50%; box-shadow: 0 0 10px rgba(251,191,36,.35); animation: livePulse 2s ease infinite; } /* the ops-manager panel's follow-up board mini (§4 board vocabulary) */ .smfb-kpis { display: flex; gap: 16px; margin: 13px 0; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--d-text-3); } .smfb-kpis b { font-family: var(--display); font-size: 19px; font-weight: 500; color: var(--d-text); margin-right: 4px; } .smfb-kpis b.amber { color: var(--amber-d); } .smfb-rows { display: flex; flex-direction: column; gap: 10px; } .smfb-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--d-border); } .smfb-row.done { opacity: .72; } .smfb-av { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 8px; font-weight: 700; color: var(--d-text); background: rgba(255,255,255,.08); } .smfb-av.ai { color: var(--indigo-bright); background: rgba(108,138,255,.16); } .smfb-row > div { min-width: 0; } .smfb-row b { display: block; font-size: 11.5px; font-weight: 600; color: var(--d-text); } .smfb-row small { font-size: 10px; color: var(--d-text-3); } .smfb-row.done b { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.3); } .smfb-dot { flex: none; margin-left: auto; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--d-border-2); font-size: 9px; display: grid; place-items: center; color: var(--green-d); } .smfb-dot.done { border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.12); } /* the leasing panel's showing-ready rows */ .sml-rows { display: flex; flex-direction: column; gap: 10px; margin: 13px 0 2px; } .sml-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--d-border); } .sml-row b { display: block; font-size: 12px; font-weight: 600; color: var(--d-text); } .sml-row small { font-size: 10.5px; color: var(--d-text-3); font-family: var(--mono); } .sml-ready { flex: none; font-family: var(--mono); font-size: 9px; color: var(--green-d); background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.3); padding: 3px 8px; border-radius: 6px; } .sml-wip { flex: none; font-family: var(--mono); font-size: 9px; color: var(--amber-d); background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.28); padding: 3px 8px; border-radius: 6px; } /* the accounting panel's reconciliation foot (mirrors the recon alloc-card) */ .sc-allocfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 10.5px; color: var(--d-text-3); padding-top: 10px; border-top: 1px solid var(--d-border); } .sc-rec { color: var(--green-d); font-size: 9.5px; } /* the field panel's compact phone */ .phone--mini { width: 224px; padding: 8px; border-radius: 34px; box-shadow: 0 22px 50px rgba(16,18,28,.45), 0 0 0 1px rgba(16,18,28,.12), inset 0 0 0 2px #23252e; } .phone--mini .phone-screen { height: 374px; border-radius: 26px; } .phone--mini .ph-body { padding: 16px 16px 8px; } .phone--mini .ph-greet { font-size: 18px; } .phone--mini .ph-clock-card { padding: 13px; margin: 12px 0; border-radius: 14px; } .phone--mini .ph-clock-time { font-size: 30px; margin: 3px 0 10px; } .phone--mini .ph-clock-time small { font-size: 14px; } .phone--mini .ph-clock-btn { padding: 8px 0; font-size: 12.5px; } .phone--mini .ph-section { margin: 2px 0 6px; font-size: 10px; } .phone--mini .ph-job { padding: 9px 0; } .phone--mini .ph-job b { font-size: 12.5px; } .phone--mini .ph-job small { font-size: 10.5px; } .sc-crew { margin-top: 13px; display: flex; flex-direction: column; gap: 11px; } .sc-crewrow { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--d-text); } .sc-crewrow .cdot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .sc-crewrow b { font-weight: 600; } .sc-crewrow span { margin-left: auto; font-size: 11px; color: var(--d-text-3); } .cdot.c1 { background: #5fd0e6; } .cdot.c2 { background: #7ed957; } .cdot.c3 { background: #a78bfa; } .cdot.c4 { background: var(--d-text-3); } .sc-alloc { margin: 14px 0; display: flex; flex-direction: column; gap: 11px; } .sc-allocrow { display: grid; grid-template-columns: 80px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; color: var(--d-text-2); } .sc-allocrow .sc-bar { height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; } .sc-allocrow .sc-bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--indigo), var(--indigo-bright)); } .sc-allocrow .mono { text-align: right; color: var(--d-text); } .seatsw-more { text-align: center; margin-top: 28px; } .seatsw-more a { font-size: 13px; color: var(--indigo-bright); } @media (max-width: 760px) { .seatsw-panel { grid-template-columns: 1fr; gap: 22px; } .seatp-copy { order: 1; text-align: center; } .seatp-art { order: 2; } .seatcard { max-width: 380px; } } @media (prefers-reduced-motion: reduce) { .seatsw-panel { transition: none; } } /* ============ TEXT PAGES (about / support / legal) — dark-native prose + page head ============ */ .page-head { text-align: center; padding-top: clamp(104px, 15vh, 168px); padding-bottom: clamp(26px, 5vh, 54px); position: relative; overflow: hidden; } .page-head .ph-glow { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 820px; height: 460px; max-width: 96vw; background: radial-gradient(ellipse, rgba(48,80,200,.2) 0%, transparent 66%); filter: blur(20px); pointer-events: none; } .page-head .wrap { position: relative; z-index: 2; } .page-head h1 { font-family: var(--display); font-weight: 500; font-size: clamp(32px, 5vw, 54px); line-height: 1.06; letter-spacing: -0.01em; color: var(--d-text); max-width: 760px; margin: 14px auto 0; } .page-head .lede { max-width: 600px; margin: 18px auto 0; } .prose { max-width: 720px; margin: 0 auto; } .prose h2 { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; color: var(--d-text); margin: 40px 0 12px; line-height: 1.22; } .prose h2:first-child { margin-top: 0; } .prose h3 { font-size: 16px; font-weight: 600; color: var(--d-text); margin: 26px 0 8px; } .prose p { font-size: 15.5px; line-height: 1.7; color: var(--d-text-2); margin: 0 0 16px; } .prose p:last-child { margin-bottom: 0; } .prose strong, .prose b { color: var(--d-text); font-weight: 600; } .prose a { color: var(--indigo-bright); } .prose ul { margin: 0 0 16px; padding-left: 20px; } .prose li { font-size: 15.5px; line-height: 1.7; color: var(--d-text-2); margin-bottom: 8px; } .prose .muted { color: var(--d-text-3); } .prose-note { margin-top: 24px; padding: 18px 22px; border: 1px solid var(--d-border-2); border-radius: 14px; background: var(--ink-3); } .prose-note p { margin: 0; } .prose-note p + p { margin-top: 10px; } .faq-list { max-width: 720px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--d-border); } .faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 40px 20px 0; position: relative; font-size: 16px; font-weight: 600; color: var(--d-text); } .faq-q::after { content: "+"; position: absolute; right: 6px; top: 18px; font-size: 20px; color: var(--d-text-3); font-weight: 400; } .faq-item.open .faq-q::after { content: "\2212"; color: var(--indigo-bright); } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .faq-item.open .faq-a { max-height: 320px; } .faq-a p { font-size: 14.5px; line-height: 1.6; color: var(--d-text-2); margin: 0 0 18px; } /* AI-surface source citations (trust gate) */ .ab-src { display: block; margin-top: 9px; font-size: 9px; letter-spacing: .05em; color: var(--d-text-3); } /* ============ THE IDEA SURFACE — efficiency rail (ideas, not to-dos) ============ */ .effx { position: relative; overflow: hidden; } .effx-glow { position: absolute; top: -8%; left: 14%; width: 660px; height: 520px; max-width: 96vw; background: radial-gradient(circle, rgba(251,191,36,.09) 0%, transparent 62%); filter: blur(22px); pointer-events: none; } .effx-inner { position: relative; z-index: 2; } .effx-h2 .it { font-style: italic; color: var(--amber-d); } .effx-rail { max-width: 620px; margin: 36px auto 0; text-align: left; background: linear-gradient(180deg, rgba(22,24,32,.9), rgba(16,17,23,.94)); border: 1px solid var(--d-border-2); border-radius: 16px; padding: 14px 18px 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(251,191,36,.05); } .effx-rail-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 11px; border-bottom: 1px solid var(--d-border); } .effx-bolt { width: 15px; height: 15px; color: var(--amber-d); filter: drop-shadow(0 0 6px rgba(251,191,36,.45)); flex: none; } .effx-bolt svg { width: 100%; height: 100%; display: block; } .effx-rail-title { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--d-text-2); } .effx-rail-sub { font-size: 9.5px; color: var(--d-text-3); letter-spacing: .05em; } .effx-rail-live { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; letter-spacing: .08em; color: var(--green-d); } .effx-rail-live .ld { width: 6px; height: 6px; border-radius: 50%; background: var(--green-d); box-shadow: 0 0 6px var(--green-d); animation: livePulse 2s ease infinite; } .effx-card { padding: 13px 2px 13px; border-bottom: 1px solid var(--d-border); } .effx-card:last-child { border-bottom: 0; } .effx-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 8.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--amber-d); background: rgba(251,191,36,.10); border-radius: 5px; padding: 2.5px 8px; } .effx-spark { width: 5px; height: 5px; border-radius: 50%; background: var(--amber-d); flex: none; } .effx-title { font-size: 14.5px; font-weight: 600; color: var(--d-text); margin: 8px 0 0; line-height: 1.35; } .effx-ev { font-size: 10.5px; color: var(--d-text-3); margin: 6px 0 0; line-height: 1.55; letter-spacing: .01em; } .effx-state { display: flex; align-items: center; gap: 10px; margin-top: 9px; font-size: 11.5px; line-height: 1.45; color: var(--d-text-2); } .effx-state.accepted { color: var(--d-text-2); } .effx-state.accepted b { color: var(--green-d); font-weight: 600; } .effx-check { width: 16px; height: 16px; border-radius: 50%; background: var(--green-d); color: #0c0d11; display: grid; place-items: center; font-size: 9px; line-height: 1; flex: none; } .effx-nope { font-size: 9.5px; letter-spacing: .04em; color: var(--d-text-3); background: rgba(255,255,255,.05); border: 1px solid var(--d-border); border-radius: 14px; padding: 4px 11px; white-space: nowrap; } .effx-wait { font-size: 9.5px; color: var(--d-text-3); } .effx-card.is-withdrawn { opacity: .55; } .effx-card.is-withdrawn .effx-title { color: var(--d-text-3); text-decoration: line-through; text-decoration-color: rgba(255,255,255,.25); } .effx-state.withdrawn { font-size: 11px; font-style: italic; color: var(--d-text-3); } .effx-state.withdrawn b { font-style: normal; color: var(--amber-d); } .effx-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; } .effx-chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .03em; color: var(--d-text-3); background: rgba(255,255,255,.04); border: 1px solid var(--d-border); padding: 7px 14px; border-radius: 22px; } .effx-coda { text-align: center; max-width: 580px; margin: 26px auto 0; font-size: 14px; line-height: 1.6; color: var(--d-text-2); } .effx-coda b { color: var(--amber-d); font-weight: 600; } @media (max-width: 560px) { .effx-rail { padding: 12px 14px 8px; } .effx-title { font-size: 13.5px; } .effx-state { flex-wrap: wrap; gap: 7px; } }