/* ============================================================ AgentCore — REDESIGN (terret-grade motion) Layer on top of model-site.css. Adds: - 3 switchable directions via [data-dir] on - elevated hero + live "Cockpit" panel - the scroll-driven ASK → PRIORIZAR → EXECUTAR sequence Theme-able tokens are redefined per direction; everything accent-driven reads --accent + --accent-rgb so swaps are 1 line. ============================================================ */ /* ---------- accent as rgb channel so tints follow the theme ---------- */ :root{ --accent-rgb: 61,214,140; --mo: .7; /* motion intensity 0..1 (tweakable) */ --ff-display: var(--ff-sans); --rail-w: 220px; --seq-track: 360vh; /* scroll length of the cinematic section */ } /* ===================================================================== DIRECTIONS ===================================================================== */ /* ---- 01 · OPERATOR (refined AgentCore green) — default ---- */ html[data-dir="operator"]{ --bg:#0C0D0F; --bg-1:#0F1113; --bg-2:#121417; --surface:#16181B; --surface-2:#1B1E22; --border:#23262B; --border-2:#2E3338; --text:#ECEEF0; --text-2:#C2C7CE; --muted:#9AA0A8; --faint:#7E848E; --accent:#3DD68C; --accent-2:#56E0A0; --accent-dk:#28A56B; --accent-rgb:61,214,140; --grad-accent:linear-gradient(135deg,#5EE3A4 0%,#2FB877 100%); } /* ---- 02 · NEXUS (terret homage: blacker, whiter, pinpoint accent) ---- */ html[data-dir="nexus"]{ --bg:#060708; --bg-1:#0A0B0D; --bg-2:#0D0F11; --surface:#101315; --surface-2:#151A1D; --border:#1C2125; --border-2:#283036; --text:#F5F7F8; --text-2:#C9D0D6; --muted:#8E97A0; --faint:#727B85; --accent:#41E08F; --accent-2:#6BF0AC; --accent-dk:#23A86C; --accent-rgb:65,224,143; --grad-accent:linear-gradient(135deg,#6BF0AC 0%,#2BC07E 100%); } html[data-dir="nexus"] body{ letter-spacing:-.014em; } /* nexus leans more monochrome — soften the green depth-glow */ html[data-dir="nexus"] .bg-fx::after{ opacity:.55; } /* ---- 03 · SIGNAL (warm graphite terminal, amber accent) ---- */ html[data-dir="signal"]{ --bg:#0C0B09; --bg-1:#100E0B; --bg-2:#14110D; --surface:#18150F; --surface-2:#1E1A13; --border:#2A251C; --border-2:#39311F; --text:#F3EFE7; --text-2:#CFC7B6; --muted:#A39A86; --faint:#867D6B; --accent:#E8AC3E; --accent-2:#F4C162; --accent-dk:#C2872A; --accent-rgb:232,172,62; --grad-accent:linear-gradient(135deg,#F4C162 0%,#D2922C 100%); } html[data-dir="signal"] .bg-fx::after{ background: radial-gradient(52% 38% at 72% 4%, rgba(232,172,62,.12), transparent 60%), radial-gradient(40% 30% at 12% 0%, rgba(194,135,42,.09), transparent 62%); } /* tints that must follow the theme */ .btn-primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 14px 40px -14px rgba(var(--accent-rgb),.42); } .btn-primary:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 20px 48px -14px rgba(var(--accent-rgb),.55); } ::selection{ background:rgba(var(--accent-rgb),.26); color:#fff; } body{ font-family:var(--ff-display); } h1,h2,h3{ font-family:var(--ff-display); } /* ===================================================================== MOTION PRIMITIVES (intensity-aware reveals) ===================================================================== */ .js [data-reveal]{ opacity:1; transform:translateY(calc(18px * var(--mo))); will-change:transform; } .js [data-reveal].in{ transform:none; transition:transform calc(.5s + .35s * var(--mo)) var(--ease); } .js [data-reveal-fade]{ opacity:0; transform:translateY(calc(22px * var(--mo))); } .js [data-reveal-fade].in{ opacity:1; transform:none; transition:opacity .6s var(--ease), transform calc(.55s + .35s * var(--mo)) var(--ease); } @media(prefers-reduced-motion:reduce){ .js [data-reveal],.js [data-reveal-fade]{ transform:none; opacity:1; transition:none; } } /* ===================================================================== NAV — add a thin scroll-progress hairline (terret-ish) ===================================================================== */ .nav::after{ content:""; position:absolute; left:0; bottom:-1px; height:1.5px; width:0; background:linear-gradient(90deg,transparent,var(--accent)); transform-origin:left; transform:scaleX(var(--scrollp,0)); width:100%; opacity:0; transition:opacity .3s; } .nav.scrolled::after{ opacity:1; } .brand .logo{ box-shadow:0 0 0 1px rgba(var(--accent-rgb),.18), 0 8px 22px -10px rgba(var(--accent-rgb),.5); } /* ===================================================================== HERO ===================================================================== */ .hero{ position:relative; padding:152px 0 96px; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.02fr 1fr; gap:54px; align-items:center; position:relative; z-index:2; } .hero-pill{ display:inline-flex; align-items:center; gap:9px; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:7px 13px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--border-2); background:rgba(var(--accent-rgb),.03); } .hero-pill .lv{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.16); animation:pulseDot 2.4s var(--ease) infinite; } @keyframes pulseDot{ 0%,100%{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);} 50%{ box-shadow:0 0 0 7px rgba(var(--accent-rgb),0);} } .hero h1{ margin:24px 0 0; max-width:13ch; font-size:clamp(44px,6.4vw,82px); letter-spacing:-.04em; } .hero-line{ display:block; } .hero-accent{ background:var(--grad-accent); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero .lede{ margin-top:24px; max-width:520px; } .hero-cta{ display:flex; gap:13px; margin-top:32px; flex-wrap:wrap; } .hero-trust{ display:flex; align-items:center; gap:14px; margin-top:26px; color:var(--faint); font-size:13px; font-family:var(--ff-mono); letter-spacing:.02em; } .hero-trust .tdot{ width:5px; height:5px; border-radius:50%; background:var(--accent); } /* ---------- Cockpit panel (shared: hero + sequence) ---------- */ .cockpit{ position:relative; background:var(--surface); border:1px solid var(--border-2); border-radius:18px; overflow:hidden; box-shadow:var(--shadow-pop), 0 40px 90px -50px rgba(var(--accent-rgb),.4); } .cockpit::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.05); } .ck-top{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-bottom:1px solid var(--border); background:var(--bg-1); } .ck-dot{ width:9px; height:9px; border-radius:50%; background:#2a2e33; } .ck-dot.live{ background:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18); animation:pulseDot 2.4s infinite; } .ck-brand{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text); } .ck-brand img{ width:19px; height:19px; } .ck-mode{ margin-left:2px; font-family:var(--ff-mono); font-size:11px; color:var(--muted); } .ck-clock{ margin-left:auto; font-family:var(--ff-mono); font-size:11.5px; color:var(--accent); letter-spacing:.02em; font-variant-numeric:tabular-nums; } .ck-avatar{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; color:#07130D; background:var(--accent); } .ck-shell{ display:grid; grid-template-columns:120px 1fr; } .ck-side{ display:flex; flex-direction:column; gap:3px; padding:14px 11px; border-right:1px solid var(--border); } .ck-side .sp{ font-size:12px; color:var(--muted); padding:7px 10px; border-radius:8px; display:flex; align-items:center; gap:8px; transition:.25s; } .ck-side .sp i{ width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.5; } .ck-side .sp.active{ color:var(--text); background:rgba(var(--accent-rgb),.10); box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.22); } .ck-side .sp.active i{ background:var(--accent); opacity:1; } .ck-main{ padding:15px; } /* hero cockpit (static, gently alive) */ .hero-cockpit .ck-main{ display:grid; gap:11px; } .bubble{ border-radius:12px; padding:12px 14px; border:1px solid var(--border); } .bubble.q{ background:var(--bg-1); } .bubble.q small{ font-family:var(--ff-mono); font-size:10.5px; color:var(--faint); } .bubble.q b{ display:block; margin-top:5px; font-size:14px; color:var(--text); font-weight:560; } .bubble.a{ display:flex; gap:11px; background:var(--surface-2); } .bubble.a .spark{ color:var(--accent); font-size:15px; } .bubble.a b{ display:block; font-size:13.5px; color:var(--text); } .bubble.a p{ margin-top:5px; font-size:12.8px; color:var(--muted); line-height:1.5; } .mini-actions{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .mini-act{ background:var(--bg-1); border:1px solid var(--border); border-radius:10px; padding:11px 12px; } .mini-act span{ font-family:var(--ff-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); } .mini-act b{ display:block; margin-top:5px; font-size:13.5px; color:var(--text); } .mini-act small{ display:block; margin-top:3px; font-size:11px; } .mini-act.high{ border-color:rgba(var(--accent-rgb),.3); } .mini-act.high small{ color:var(--accent); } .mini-act.mid small{ color:var(--amber); } .ck-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; border-top:1px solid var(--border); padding-top:13px; } .ck-kpis > div b{ display:block; font-family:var(--ff-mono); font-size:14.5px; color:var(--text); letter-spacing:-.02em; } .ck-kpis > div span{ display:block; margin-top:3px; font-size:10px; color:var(--muted); } @media(max-width:980px){ .hero-grid{ grid-template-columns:1fr; gap:42px; } .hero{ padding:128px 0 72px; } .hero h1{ max-width:none; } } @media(max-width:520px){ .ck-shell{ grid-template-columns:1fr; } .ck-side{ flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--border); } .ck-kpis{ grid-template-columns:1fr 1fr; } .mini-actions{ grid-template-columns:1fr; } } /* ===================================================================== THE CINEMATIC SEQUENCE (scroll-driven: ASK → PRIORIZAR → EXECUTAR) ===================================================================== */ .seq{ position:relative; height:var(--seq-track); } .seq-sticky{ position:sticky; top:0; height:100vh; display:flex; align-items:center; } .seq-wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 var(--gutter); } .seq-head{ text-align:center; margin-bottom:26px; } .seq-head h2{ margin-top:12px; font-size:clamp(26px,3.2vw,40px); } .seq-stage{ display:grid; grid-template-columns:var(--rail-w) 1fr; gap:26px; align-items:start; } /* left rail — phase tracker */ .seq-rail{ position:relative; display:flex; flex-direction:column; gap:6px; padding-top:6px; } .seq-phase{ position:relative; padding:16px 16px 16px 20px; border-radius:13px; border:1px solid transparent; transition:.4s var(--ease); } .seq-phase .pn{ font-family:var(--ff-mono); font-size:11px; color:var(--faint); letter-spacing:.1em; } .seq-phase b{ display:block; margin-top:6px; font-size:15px; color:var(--muted); letter-spacing:-.01em; transition:.4s; } .seq-phase i{ display:block; margin-top:3px; font-style:normal; font-size:12.5px; color:var(--faint); } .seq-phase.on{ background:var(--surface); border-color:var(--border-2); box-shadow:var(--shadow-card); } .seq-phase.on .pn{ color:var(--accent); } .seq-phase.on b{ color:var(--text); } .seq-phase.done .pn::after{ content:" ✓"; color:var(--accent); } .seq-railbar{ position:absolute; left:0; top:8px; bottom:8px; width:2px; background:var(--border); border-radius:2px; overflow:hidden; } .seq-railbar > span{ position:absolute; left:0; top:0; width:100%; height:var(--railp,0%); background:linear-gradient(180deg,var(--accent),var(--accent-dk)); transition:height .15s linear; } /* the screen that plays out */ .seq-screen{ position:relative; } .seq-screen .cockpit{ height:min(72vh,640px); display:flex; flex-direction:column; } .seq-screen .ck-shell{ flex:1; min-height:0; grid-auto-rows:minmax(0,1fr); } .seq-screen .ck-side{ min-height:0; } .seq-feedwrap{ position:relative; flex:1; overflow:hidden; padding:16px; min-height:0; } .seq-feedwrap::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:54px; background:linear-gradient(to top,var(--surface),transparent); pointer-events:none; z-index:2; } .seq-feedwrap::before{ content:""; position:absolute; left:0; right:0; top:0; height:30px; background:linear-gradient(to bottom,var(--surface),transparent); pointer-events:none; z-index:2; } .seq-feed{ position:relative; display:flex; flex-direction:column; gap:11px; transition:transform .5s var(--ease); will-change:transform; } .seq-input{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-top:1px solid var(--border); background:var(--bg-1); color:var(--faint); font-size:12.5px; } .seq-input .plus{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center; box-shadow:inset 0 0 0 1px var(--border-2); color:var(--muted); flex:none; } .seq-input .caret{ width:1.5px; height:14px; background:var(--accent); animation:blink 1.1s steps(1) infinite; } @keyframes blink{ 50%{ opacity:0; } } /* scroll cue under the sequence heading */ .seq-cue{ display:inline-flex; align-items:center; gap:8px; margin-top:16px; font-family:var(--ff-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); transition:opacity .45s var(--ease); } .seq-cue .ar{ width:14px; height:14px; animation:cueBob 1.8s ease-in-out infinite; } @keyframes cueBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(3px); } } .seq.played .seq-cue{ opacity:0; } .seq[data-cinematic="off"] .seq-cue, .no-js .seq-cue{ display:none; } /* steps */ .seq-step{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); } .seq-step.on{ opacity:1; transform:none; } .s-tag{ display:inline-flex; align-items:center; gap:8px; font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:9px; } .s-tag .ts{ color:var(--faint); letter-spacing:.02em; } .s-tag .ln{ flex:1; height:1px; background:var(--border); } .s-q{ display:flex; gap:10px; align-items:flex-start; } .s-q .who{ width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:10px; font-weight:700; background:var(--surface-2); color:var(--text-2); box-shadow:inset 0 0 0 1px var(--border-2); } .s-q .qx{ background:var(--bg-1); border:1px solid var(--border); border-radius:12px; border-top-left-radius:4px; padding:10px 13px; font-size:13.5px; color:var(--text); font-weight:560; } .s-a{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:13px 15px; } .s-a .ah{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--text); font-weight:600; } .s-a .ah .spark{ color:var(--accent); } .s-a p{ margin-top:7px; font-size:13px; color:var(--text-2); line-height:1.55; } .s-a p b{ color:var(--text); } .s-findings{ display:flex; flex-direction:column; gap:7px; margin-top:11px; } .s-find{ display:flex; gap:10px; padding:9px 11px; background:var(--bg-1); border:1px solid var(--border); border-radius:9px; font-size:12.5px; color:var(--text-2); line-height:1.5; } .s-find .fn{ font-family:var(--ff-mono); color:var(--accent); font-size:11px; flex:none; padding-top:1px; } .s-find b{ color:var(--text); } .s-cards{ display:grid; grid-template-columns:1fr 1fr; gap:9px; } .s-card{ background:var(--bg-1); border:1px solid var(--border); border-radius:10px; padding:11px 12px; } .s-card .ct{ font-family:var(--ff-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); } .s-card b{ display:block; margin-top:5px; font-size:13.5px; color:var(--text); } .s-card small{ display:block; margin-top:3px; font-size:11px; color:var(--accent); } .s-card.warn small{ color:var(--amber); } .s-asset{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:linear-gradient(180deg,rgba(var(--accent-rgb),.08),var(--bg-1)); border:1px solid rgba(var(--accent-rgb),.28); border-radius:11px; } .s-asset .ai{ width:36px; height:44px; border-radius:7px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-2); display:grid; place-items:center; color:var(--accent); flex:none; font-family:var(--ff-mono); font-size:9px; } .s-asset b{ display:block; font-size:13.5px; color:var(--text); } .s-asset small{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted); font-family:var(--ff-mono); } .s-asset .dl{ margin-left:auto; font-size:11.5px; color:var(--accent); font-weight:600; display:flex; align-items:center; gap:5px; } .s-asset .dl svg{ width:14px; height:14px; } .s-deploy{ display:flex; align-items:center; gap:10px; padding:11px 13px; background:var(--bg-1); border:1px solid var(--border); border-left:2px solid var(--accent); border-radius:9px; font-size:12.5px; color:var(--text-2); } .s-deploy .pg{ margin-left:auto; font-family:var(--ff-mono); font-size:11px; color:var(--accent); } .s-alert{ background:var(--bg-1); border:1px solid var(--border); border-radius:11px; overflow:hidden; } .s-alert .aH{ display:flex; align-items:center; gap:9px; padding:10px 13px; background:rgba(217,164,65,.08); border-bottom:1px solid var(--border); font-size:12.5px; color:var(--amber); font-weight:600; } .s-alert .aR{ display:flex; align-items:center; gap:11px; padding:10px 13px; } .s-alert .aR + .aR{ border-top:1px solid var(--border); } .s-alert .aR .nm{ font-size:12.5px; color:var(--text); font-weight:560; } .s-alert .aR .mt{ font-size:11px; color:var(--muted); margin-top:2px; } .s-alert .aR .vl{ margin-left:auto; font-family:var(--ff-mono); font-size:13px; color:var(--text); } .s-alert .aR .tg{ font-family:var(--ff-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); padding:3px 7px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.3); } /* cinematic OFF / reduced-motion → static stacked view, no pin */ .seq[data-cinematic="off"]{ height:auto; } .seq[data-cinematic="off"] .seq-sticky{ position:static; height:auto; padding:96px 0; } .seq[data-cinematic="off"] .seq-feed{ transform:none !important; } .seq[data-cinematic="off"] .seq-feedwrap{ overflow:visible; max-height:none; } .seq[data-cinematic="off"] .cockpit{ height:auto; } .seq[data-cinematic="off"] .seq-feedwrap::after{ display:none; } .seq[data-cinematic="off"] .seq-step{ opacity:1; transform:none; } .seq[data-cinematic="off"] .seq-phase{ background:var(--surface); border-color:var(--border-2); } .seq[data-cinematic="off"] .seq-phase .pn{ color:var(--accent); } .seq[data-cinematic="off"] .seq-phase b{ color:var(--text); } @media(prefers-reduced-motion:reduce){ .seq{ height:auto; } .seq-sticky{ position:static; height:auto; padding:80px 0; } .seq .cockpit{ height:auto; } .seq-feed{ transform:none !important; } .seq-feedwrap{ overflow:visible; } .seq-step{ opacity:1; transform:none; } } /* no-JS safety: show the full sequence statically */ .no-js .seq{ height:auto; } .no-js .seq-sticky{ position:static; height:auto; padding:80px 0; } .no-js .seq .cockpit{ height:auto; } .no-js .seq-feed{ transform:none; } .no-js .seq-feedwrap{ overflow:visible; } .no-js .seq-step{ opacity:1; transform:none; } .no-js .seq-phase{ background:var(--surface); border-color:var(--border-2); } @media(max-width:900px){ .seq{ height:auto; } .seq-sticky{ position:static; height:auto; padding:72px 0; } .seq .cockpit{ height:auto; } .seq-cue{ display:none; } .seq-stage{ grid-template-columns:1fr; gap:18px; } .seq-rail{ flex-direction:row; gap:8px; overflow-x:auto; } .seq-phase{ flex:1; min-width:150px; } .seq-railbar{ display:none; } .seq-feed{ transform:none !important; } .seq-feedwrap{ overflow:visible; max-height:none; } .seq-feedwrap::after{ display:none; } .seq-step{ opacity:1; transform:none; } }