/* ============================================================ paceOPS · Per-module identity layer Each module page sets . This gives every module its own accent + a bespoke signature visual so the solutions read as genuinely distinct. Brand cyan stays on primary CTAs; --mod themes the identity. ============================================================ */ [data-mod] { --mod: var(--accent); --mod-rgb: 0,188,239; } [data-mod="core"] { --mod: #d7dee7; --mod-rgb: 215,222,231; } /* KI-Automatisierung · Silber */ [data-mod="mail"] { --mod: #2ea6ff; --mod-rgb: 46,166,255; } /* Cold-Mailing · Neon-Blau */ [data-mod="bind"] { --mod: #9a6cf2; --mod-rgb: 154,108,242; } /* Aftersales · Violett */ [data-mod="cap"] { --mod: #e6b53d; --mod-rgb: 230,181,61; } /* Fulfillment · Gold */ [data-mod="ctrl"] { --mod: #33c46f; --mod-rgb: 51,196,111; } /* Selbstoptimierung · Grün */ /* The whole subpage adopts the module colour — the cyan token family is remapped to the module hue so nothing mixes with the brand blue. */ [data-mod] { --accent: var(--mod); --accent-hover: color-mix(in oklab, var(--mod) 82%, #fff); --accent-press: color-mix(in oklab, var(--mod) 80%, #000); --accent-muted: color-mix(in oklab, var(--mod) 58%, #000); --accent-contrast: #0a1019; --po-cyan-300: color-mix(in oklab, var(--mod) 72%, #fff); --po-cyan-400: var(--mod); --po-cyan-500: var(--mod); --po-cyan-600: color-mix(in oklab, var(--mod) 82%, #000); --po-cyan-700: color-mix(in oklab, var(--mod) 60%, #000); --border-accent: rgba(var(--mod-rgb), .45); --glow-cyan: 0 0 0 1px rgba(var(--mod-rgb),.35), 0 0 40px -6px rgba(var(--mod-rgb),.55); --glow-cyan-soft: 0 0 60px -10px rgba(var(--mod-rgb),.40); --tint-cyan-08: rgba(var(--mod-rgb), .08); --tint-cyan-14: rgba(var(--mod-rgb), .14); --tint-cyan-24: rgba(var(--mod-rgb), .24); } /* neutralise the hardcoded-cyan section backgrounds */ [data-mod] .sp-section--petrol { background: radial-gradient(90% 55% at 80% 12%, rgba(var(--mod-rgb),.10), transparent 60%), linear-gradient(180deg, var(--po-ink-900) 0%, var(--po-petrol-800) 32%, var(--po-petrol-800) 60%, var(--po-ink-900) 100%); } [data-mod] .sp-cta { background: radial-gradient(90% 120% at 80% 0%, rgba(var(--mod-rgb),.18), transparent 55%), linear-gradient(180deg, var(--po-petrol-700), var(--po-ink-900)); } [data-mod] .sp-panel__glow { background: radial-gradient(closest-side, rgba(var(--mod-rgb),.18), transparent 70%); } /* themed hero + eyebrow dots adopt the module colour */ [data-mod] .sp-hero { background: radial-gradient(110% 70% at 82% -10%, rgba(var(--mod-rgb),.18), transparent 52%), linear-gradient(180deg, var(--po-petrol-800) 0%, var(--po-ink-900) 78%); } [data-mod] .sp-hero__ray { background: radial-gradient(closest-side, rgba(var(--mod-rgb),.30), transparent 70%); } [data-mod] .s-eyebrow::before { background: var(--mod); box-shadow: 0 0 12px 1px rgba(var(--mod-rgb),.85); } [data-mod] .sp-hero__meta .n { color: var(--mod); } [data-mod] .sphero-emblem::before { border-color: rgba(var(--mod-rgb),.3); } [data-mod] .sphero-emblem__ico { background: radial-gradient(circle at 38% 30%, #fff 0%, var(--mod) 48%, color-mix(in oklab, var(--mod) 64%, #000) 100%); border-color: rgba(var(--mod-rgb),.6); color: var(--mod); box-shadow: 0 0 50px rgba(var(--mod-rgb),.45), inset 0 2px 6px rgba(255,255,255,.5); } [data-mod] .sphero-emblem__ico svg { color: color-mix(in oklab, var(--mod) 30%, #0a1019); } /* glossy, premium primary buttons on module pages */ [data-mod] .s-btn--primary { background: linear-gradient(180deg, color-mix(in oklab, var(--mod) 70%, #fff) 0%, var(--mod) 55%, color-mix(in oklab, var(--mod) 86%, #000) 100%); } [data-mod] .s-btn--primary:hover { background: linear-gradient(180deg, color-mix(in oklab, var(--mod) 60%, #fff) 0%, var(--mod) 60%, color-mix(in oklab, var(--mod) 86%, #000) 100%); } /* KI-Automatisierung = bright shiny silver: retint the hardcoded-cyan Osiris visuals */ [data-mod="core"] .brain__orb { background: radial-gradient(circle at 46% 32%, #ffffff 0%, #eef2f7 28%, #c2cdda 58%, #707c8c 88%); box-shadow: 0 0 70px 12px rgba(215,222,231,.55), 0 0 150px 34px rgba(215,222,231,.22), inset 0 0 40px rgba(255,255,255,.55); } [data-mod="core"] .brain__ring.a { border-color: rgba(215,222,231,.42); } [data-mod="core"] .brain__ring.c { border-color: rgba(215,222,231,.2); } [data-mod="core"] .brain__dot::before { background: #eef2f7; box-shadow: 0 0 12px 2px rgba(215,222,231,.85); } [data-mod="core"] .brain__plasma { background: conic-gradient(from 0deg, transparent 0%, rgba(255,255,255,.6) 11%, transparent 28%, rgba(215,222,231,.6) 48%, transparent 64%, rgba(255,255,255,.45) 83%, transparent 100%); } [data-mod="core"] .brain__plasma::after { background: conic-gradient(from 180deg, transparent 0%, rgba(194,205,218,.5) 20%, transparent 42%, rgba(255,255,255,.42) 70%, transparent 92%); } [data-mod="core"] .brain__beams i::before { background: #ffffff; box-shadow: 0 0 10px 3px rgba(215,222,231,.9); } [data-mod="core"] .sp-osiris__halo { background: radial-gradient(closest-side, rgba(215,222,231,.45), rgba(215,222,231,.12) 55%, transparent 72%); } [data-mod="core"] .sp-osiris__ring.r1, [data-mod="core"] .sp-osiris__ring.r3 { border-color: rgba(215,222,231,.22); } [data-mod="core"] .sp-osiris__plinth { background: radial-gradient(closest-side, rgba(215,222,231,.34), transparent 72%); } [data-mod="core"] .sp-osiris__fig { filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(215,222,231,.45)); -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.45) 92%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 80%, rgba(0,0,0,.45) 92%, transparent 100%); } [data-mod="core"] .sp-osiris__name, [data-mod="core"] .sphero-badge { background: linear-gradient(180deg, #ffffff 0%, #d7dee7 46%, #9aa6b5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 8px 36px rgba(215,222,231,.4)); } [data-mod="core"] .s-btn--primary { color: #182230; } /* KI-Automatisierung · premium silver shine on cards & panels */ [data-mod="core"] .sp-ocard, [data-mod="core"] .sp-oout, [data-mod="core"] .sp-card, [data-mod="core"] .sp-panel, [data-mod="core"] .s-stat, [data-mod="core"] .sp-step2 { background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 46%); border-color: rgba(215,222,231,.2); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-md); } [data-mod="core"] .sp-ocard:hover, [data-mod="core"] .sp-card:hover { border-color: rgba(215,222,231,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 0 32px rgba(215,222,231,.14), var(--shadow-md); transform: translateY(-3px); } [data-mod="core"] .sp-ocard .ic, [data-mod="core"] .sp-card__ico { background: radial-gradient(circle at 38% 30%, #ffffff, #d7dee7 55%, #97a3b2) !important; border-color: rgba(215,222,231,.6) !important; color: #1c2733 !important; box-shadow: 0 0 26px rgba(215,222,231,.4), inset 0 2px 5px rgba(255,255,255,.7); } [data-mod] .sp-crumb a:hover { color: var(--mod); } /* a themed chip used in headers */ .mtag { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(var(--mod-rgb),.4); background: rgba(var(--mod-rgb),.1); font: 600 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mod); } .msig { display: grid; gap: 8px; } .msig__big { font: 700 clamp(40px,5vw,68px)/1 var(--font-display); letter-spacing: -.03em; color: var(--text-strong); font-variant-numeric: tabular-nums; } .msig__big em { color: var(--mod); font-style: normal; } /* ============================================================ A · COLD-MAILING — multichannel outreach sequence (violet) A vertical touchpoint rail beside a live, personalised mail. ============================================================ */ .mseq { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px,4vw,56px); align-items: start; } .mseq__rail { position: relative; display: grid; gap: 16px; } .mseq__rail::before { content: ""; position: absolute; left: 26px; top: 26px; bottom: 26px; width: 2px; background: linear-gradient(180deg, transparent, rgba(var(--mod-rgb),.55), transparent); } .mseq__step { position: relative; display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--edge-top); transition: border-color var(--dur-base), transform var(--dur-base); } .mseq__step:hover { border-color: rgba(var(--mod-rgb),.5); transform: translateX(3px); } .mseq__ico { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; z-index: 1; background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.42); color: var(--mod); } .mseq__when { display: block; font: 600 10.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mod); } .mseq__t { display: block; font: 600 15px/1.3 var(--font-sans); color: var(--text-strong); margin-top: 6px; } .mseq__d { display: block; font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; } .mseq__ch { font: 600 10.5px/1 var(--font-mono); color: var(--text-subtle); padding: 6px 10px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); white-space: nowrap; } .mmail { position: sticky; top: 96px; border-radius: var(--radius-xl); border: 1px solid var(--border-line); background: linear-gradient(180deg, var(--po-ink-800), var(--po-ink-900)); overflow: hidden; box-shadow: var(--shadow-lg), var(--edge-top), 7px 9px 0 -1px var(--po-ink-900), 8px 10px 0 0 var(--border-subtle), 15px 19px 0 -1px var(--po-ink-900), 16px 20px 0 0 var(--border-subtle); } .mmail__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-subtle); } .mmail__bar .av { width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--mod-rgb),.16); border: 1px solid rgba(var(--mod-rgb),.4); color: var(--mod); display: grid; place-items: center; font: 700 13px/1 var(--font-display); } .mmail__from { font: 600 13px/1.2 var(--font-sans); color: var(--text-strong); } .mmail__addr { font: 400 11.5px/1.2 var(--font-mono); color: var(--text-subtle); margin-top: 2px; } .mmail__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font-mono); color: var(--mod); } .mmail__live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 9px 1px rgba(var(--mod-rgb),.8); } .mmail__subject { padding: 16px 22px 0; font: 600 15px/1.4 var(--font-sans); color: var(--text-strong); display: flex; align-items: center; gap: 10px; } .mmail__k { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); flex: none; } .mmail__lines { padding: 16px 22px 6px; display: grid; gap: 13px; } .mmail__lines .ln { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .skel { height: 9px; border-radius: 5px; background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); flex: none; } .mmail__perso { display: flex; align-items: center; gap: 9px; margin: 2px 22px 4px; padding-top: 12px; border-top: 1px dashed var(--border-subtle); font: 600 12px/1.4 var(--font-sans); color: var(--text-body); } .mmail__perso svg { color: var(--mod); flex: none; } .mmail__signals { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 13px 22px; border-bottom: 1px solid var(--border-subtle); } .mmail__signals .k { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); margin-right: 4px; } .msig-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: var(--radius-pill); background: rgba(var(--mod-rgb),.1); border: 1px solid rgba(var(--mod-rgb),.32); font: 600 11px/1 var(--font-sans); color: var(--mod); } .msig-chip svg { width: 12px; height: 12px; } .tok { color: var(--mod); background: rgba(var(--mod-rgb),.13); border: 1px solid rgba(var(--mod-rgb),.34); border-radius: 6px; padding: 0 6px; font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; } .mmail__foot { display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--border-subtle); } .mmail__send { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill); background: var(--mod); color: #140c22; font: 600 13px/1 var(--font-sans); } .mmail__meta { margin-left: auto; font: 500 12px/1 var(--font-mono); color: var(--text-subtle); } .mmail__body { padding: 14px 22px 6px; display: grid; gap: 9px; } .mmail__body p { margin: 0; font: 400 13.5px/1.62 var(--font-sans); color: var(--text-muted); } .mmail__body .ln1 { font-weight: 600; color: var(--text-body); } .mmail__hl { color: var(--text-strong); background: linear-gradient(90deg, rgba(var(--mod-rgb),.18), rgba(var(--mod-rgb),.04)); border-left: 2px solid var(--mod); border-radius: 0 8px 8px 0; padding: 9px 12px; } .mmail__uniq { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font-mono); color: var(--mod); } .mmail__uniq .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 8px 1px rgba(var(--mod-rgb),.8); } /* ============================================================ B · FULFILLMENT — One-Click machine + capacity fan-out (amber) ============================================================ */ .mmac { border: 1px solid var(--border-line); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-card); box-shadow: var(--shadow-lg), var(--edge-top); display: grid; grid-template-columns: auto 1fr; } .mmac__btn { display: grid; place-items: center; gap: 14px; padding: clamp(24px,3vw,40px); min-width: 190px; background: linear-gradient(180deg, rgba(var(--mod-rgb),.2), rgba(var(--mod-rgb),.05)); border-right: 1px solid var(--border-line); } .mmac__btn .b { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; color: #1c1304; background: radial-gradient(120% 120% at 30% 25%, #ffd98a, var(--mod) 60%); box-shadow: 0 0 0 10px rgba(var(--mod-rgb),.14), 0 18px 36px -10px rgba(var(--mod-rgb),.7); animation: mpress 3.6s ease-in-out infinite; } @keyframes mpress { 0%,82%,100% { transform: none; } 88% { transform: scale(.9); } 94% { transform: scale(1.02); } } @media (prefers-reduced-motion: reduce) { .mmac__btn .b { animation: none; } } .mmac__btn .lab { font: 700 14px/1.2 var(--font-display); color: var(--text-strong); text-align: center; } .mmac__btn .sub { font: 500 11.5px/1.3 var(--font-mono); color: var(--text-subtle); text-align: center; } .mmac__line { display: grid; grid-template-columns: repeat(4, 1fr); } .mmac__stage { position: relative; padding: clamp(18px,2.4vw,26px) 16px; border-right: 1px solid var(--border-subtle); display: grid; gap: 9px; align-content: center; } .mmac__stage:last-child { border-right: none; } .mmac__stage .ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.36); color: var(--mod); } .mmac__stage .k { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); } .mmac__stage .t { font: 600 14px/1.25 var(--font-sans); color: var(--text-strong); } .mmac__stage::after { content: ""; position: absolute; right: -7px; top: 50%; width: 13px; height: 13px; transform: translateY(-50%) rotate(45deg); border-top: 2px solid rgba(var(--mod-rgb),.5); border-right: 2px solid rgba(var(--mod-rgb),.5); z-index: 2; background: var(--surface-card); } .mmac__stage:last-child::after { display: none; } .mfan { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px,4vw,52px); align-items: center; } .mfan__one { display: grid; gap: 12px; justify-items: center; text-align: center; } .mfan__one .av { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--border-line); color: var(--text-body); box-shadow: var(--edge-top); } .mfan__one .cap { font: 600 12px/1.3 var(--font-sans); color: var(--text-muted); } .mfan__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .mfan__cell { aspect-ratio: 1; border-radius: 13px; display: grid; place-items: center; background: rgba(var(--mod-rgb),.09); border: 1px solid rgba(var(--mod-rgb),.3); color: var(--mod); } .mfan__note { margin-top: 14px; font: 600 13px/1.4 var(--font-sans); color: var(--text-muted); } .mfan__note b { color: var(--mod); } @media (max-width: 760px) { .mmac { grid-template-columns: 1fr; } .mmac__btn { border-right: none; border-bottom: 1px solid var(--border-line); } .mmac__line { grid-template-columns: 1fr 1fr; } .mmac__stage::after { display: none; } .mfan { grid-template-columns: 1fr; } .mfan__grid { grid-template-columns: repeat(5, 1fr); } } /* ============================================================ C · AFTERSALES — recurring lifecycle loop (emerald) ============================================================ */ .mloop { position: relative; width: min(540px, 100%); aspect-ratio: 1; margin: 0 auto; } .mloop__ring { position: absolute; inset: 14%; border-radius: 50%; border: 1.5px dashed rgba(var(--mod-rgb),.4); animation: mspin 60s linear infinite; } .mloop__ring::after { content: ""; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translateX(-50%); background: var(--mod); box-shadow: 0 0 12px 2px rgba(var(--mod-rgb),.8); } @keyframes mspin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .mloop__ring { animation: none; } } .mloop__core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 40%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 12px; background: radial-gradient(60% 60% at 50% 38%, rgba(var(--mod-rgb),.28), var(--po-ink-800) 72%); border: 1px solid rgba(var(--mod-rgb),.45); box-shadow: 0 0 40px rgba(var(--mod-rgb),.3), inset 0 1px 0 rgba(255,255,255,.1); } .mloop__core .n { font: 700 clamp(26px,3vw,38px)/1 var(--font-display); color: var(--text-strong); } .mloop__core .l { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mod); margin-top: 4px; } .mloop__node { position: absolute; transform: translate(-50%,-50%); width: 130px; display: grid; justify-items: center; gap: 7px; text-align: center; } .mloop__node .b { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-card); border: 1px solid rgba(var(--mod-rgb),.4); color: var(--mod); box-shadow: var(--shadow-md); } .mloop__node .s { font: 600 10px/1 var(--font-mono); color: var(--text-subtle); } .mloop__node .t { font: 600 13px/1.25 var(--font-sans); color: var(--text-strong); } .mloop__node.n1 { top: 2%; left: 50%; } .mloop__node.n2 { top: 36%; left: 98%; } .mloop__node.n3 { top: 92%; left: 74%; } .mloop__node.n4 { top: 92%; left: 26%; } .mloop__node.n5 { top: 36%; left: 2%; } @media (max-width: 620px) { .mloop__node { width: 96px; } .mloop__node .t { font-size: 11.5px; } } /* ============================================================ D · SELBSTOPTIMIERUNG — control-room cockpit (rose) ============================================================ */ .mcock { border: 1px solid var(--border-line); border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(180deg, var(--po-ink-800), var(--po-ink-900)); box-shadow: var(--shadow-lg), var(--edge-top); } .mcock__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); } .mcock__head .t { font: 600 14px/1 var(--font-sans); color: var(--text-strong); } .mcock__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 11px/1 var(--font-mono); color: var(--mod); } .mcock__live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 9px 1px rgba(var(--mod-rgb),.85); animation: s-blink 1.8s ease-in-out infinite; } .mcock__grid { display: grid; grid-template-columns: 1.15fr 1fr; } .mcock__chart { padding: 22px; border-right: 1px solid var(--border-subtle); } .mcock__caption { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .mcock__caption .k { font: 600 12px/1 var(--font-sans); color: var(--text-muted); } .mcock__caption .v { font: 700 13px/1 var(--font-mono); color: var(--mod); } .mcock__svg { width: 100%; height: 150px; display: block; } .mcock__svg .grid { stroke: rgba(255,255,255,.06); stroke-width: 1; } .mcock__svg .band { fill: rgba(47,207,142,.08); } .mcock__svg .area { fill: rgba(var(--mod-rgb),.16); } .mcock__svg .ln { fill: none; stroke: var(--mod); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .mcock__svg .mark { fill: var(--mod); } .mcock__svg .dip { fill: #ffce5a; } .mcock__flag { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 12px; border-radius: var(--radius-pill); background: rgba(var(--mod-rgb),.1); border: 1px solid rgba(var(--mod-rgb),.34); font: 600 12px/1.3 var(--font-sans); color: var(--text-strong); } .mcock__feed { padding: 16px 18px; display: grid; gap: 10px; align-content: start; } .mfeed { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--surface-card); } .mfeed .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; } .mfeed .ic.ok { background: rgba(47,207,142,.12); border: 1px solid rgba(47,207,142,.36); color: var(--po-success); } .mfeed .ic.warn { background: rgba(255,206,90,.12); border: 1px solid rgba(255,206,90,.4); color: #ffce5a; } .mfeed .ic.act { background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.4); color: var(--mod); } .mfeed .t { font: 600 13px/1.25 var(--font-sans); color: var(--text-strong); } .mfeed .d { font: 400 11.5px/1.3 var(--font-mono); color: var(--text-subtle); margin-top: 2px; } .mfeed .st { margin-left: auto; font: 600 10.5px/1 var(--font-mono); white-space: nowrap; } .mfeed .st.ok { color: var(--po-success); } .mfeed .st.warn { color: #ffce5a; } .mfeed .st.act { color: var(--mod); } @media (max-width: 760px) { .mcock__grid { grid-template-columns: 1fr; } .mcock__chart { border-right: none; border-bottom: 1px solid var(--border-subtle); } } /* shared viz components (site.css) themed per module */ [data-mod] .viz-gauge .ring { background: conic-gradient(var(--mod) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); } [data-mod] .viz__glow { background: radial-gradient(closest-side, rgba(var(--mod-rgb),.18), transparent 70%); } [data-mod] .viz-bar { background: linear-gradient(180deg, color-mix(in oklch, var(--mod) 88%, #000), color-mix(in oklch, var(--mod) 48%, #000)); } [data-mod] .viz-bar.lead { background: linear-gradient(180deg, var(--mod), color-mix(in oklch, var(--mod) 66%, #000)); box-shadow: 0 0 22px -4px rgba(var(--mod-rgb),.6); } [data-mod] .viz-line .path { stroke: var(--mod); } [data-mod] .viz-line .dot { fill: var(--mod); } [data-mod] .viz-kpi .n.glow, [data-mod] .s-stat .n.glow { background: linear-gradient(180deg, var(--mod), color-mix(in oklch, var(--mod) 66%, #000)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* generic two-up media block reused with theme */ .mlede { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px,4vw,56px); align-items: center; } @media (max-width: 900px) { .mseq, .mlede { grid-template-columns: 1fr; } .mmail { position: static; } } /* ============================================================ Live-in-practice — before/after autonomous operations (silver) ============================================================ */ .opslive { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px,2.4vw,26px); margin-top: 8px; } .ops-col { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: var(--surface-card); padding: 22px; } .ops-col--old { opacity: .82; } .ops-col--new { border-color: rgba(215,222,231,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 44px rgba(215,222,231,.08); } .ops-col__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .ops-pill { font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-line); } .ops-pill--bad { color: var(--text-subtle); } .ops-pill--ok { color: #1c2733; background: linear-gradient(180deg, #ffffff, #d7dee7); border-color: rgba(215,222,231,.6); } .ops-col__sub { font-size: 12.5px; color: var(--text-subtle); } .ops-lane { display: grid; gap: 9px; position: relative; } .ops-row { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,.02); font: 500 13.5px/1.25 var(--font-sans); color: var(--text-body); } .ops-row--bad { color: var(--text-muted); } .ops-row--ok { border-color: rgba(215,222,231,.16); background: rgba(215,222,231,.04); } .ops-stat { margin-left: auto; font: 600 11px/1 var(--font-mono); color: var(--text-subtle); white-space: nowrap; } .ops-stat.ok { color: #cfd8e3; } .ops-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex: none; border: 1px solid var(--border-line); color: var(--text-subtle); } .ops-ic.ok { border-color: rgba(215,222,231,.5); color: #1c2733; background: radial-gradient(circle at 38% 30%, #ffffff, #d7dee7 65%, #aab4c2); box-shadow: inset 0 1px 3px rgba(255,255,255,.7); } .ops-col__foot { margin-top: 16px; display: flex; align-items: center; gap: 9px; font: 600 12px/1.3 var(--font-sans); } .ops-col__foot--bad { color: var(--text-subtle); } .ops-col__foot--ok { color: var(--text-strong); } .ops-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); flex: none; } .ops-dot.ok { background: #e7edf3; box-shadow: 0 0 10px 1px rgba(215,222,231,.85); } .ops-scan { position: absolute; left: 12px; right: 12px; top: 64px; height: 40px; pointer-events: none; z-index: 2; border-radius: 12px; background: linear-gradient(180deg, transparent, rgba(215,222,231,.18), transparent); opacity: 0; } .ospipe { margin-top: 22px; padding: clamp(22px,3vw,30px); border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); } .ospipe__track { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px; } .ospipe__line { position: absolute; left: 3%; right: 3%; top: 23px; height: 2px; background: linear-gradient(90deg, transparent, rgba(215,222,231,.32), transparent); } .ospipe__pulse { position: absolute; top: 23px; left: 3%; width: 64px; height: 3px; transform: translateY(-50%); border-radius: 3px; background: linear-gradient(90deg, transparent, #eef2f7, transparent); opacity: 0; } .ospipe__node { position: relative; z-index: 1; display: grid; gap: 9px; justify-items: center; text-align: center; } .ospipe__node .b { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #1c2733; background: radial-gradient(circle at 38% 30%, #ffffff, #d7dee7 60%, #97a3b2); border: 1px solid rgba(215,222,231,.5); box-shadow: 0 0 22px rgba(215,222,231,.22), inset 0 2px 4px rgba(255,255,255,.65); } .ospipe__node .t { font: 600 11.5px/1.2 var(--font-sans); color: var(--text-body); } .ospipe__cap { margin: 20px auto 0; max-width: 560px; text-align: center; font-size: 13.5px; color: var(--text-subtle); } @media (prefers-reduced-motion: no-preference) { .ops-scan { animation: ops-scan 3.6s ease-in-out infinite; } .ops-col--new .ops-ic.ok { animation: ops-tick 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.5s); } .ospipe__pulse { animation: ospipe-travel 3.8s linear infinite; } .ospipe__pulse.p2 { animation-delay: 1.9s; } } @keyframes ops-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(250px); opacity: 0; } } @keyframes ops-tick { 0%, 38% { transform: scale(1); } 48% { transform: scale(1.16); box-shadow: 0 0 14px rgba(215,222,231,.7), inset 0 1px 3px rgba(255,255,255,.7); } 62%, 100% { transform: scale(1); } } @keyframes ospipe-travel { 0% { left: 2%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 92%; opacity: 0; } } @media (max-width: 760px) { .opslive { grid-template-columns: 1fr; } .ospipe__node .t { display: none; } } /* ============================================================ Living autonomous system console — futuristic ops (core) ============================================================ */ .aos { position: relative; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid rgba(var(--mod-rgb),.26); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%), linear-gradient(180deg, var(--po-ink-800), var(--po-ink-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 70px -16px rgba(var(--mod-rgb),.3), var(--shadow-xl); padding: clamp(20px,2.6vw,30px); margin-top: 8px; } .aos::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px); background-size: 100% 4px; } .aos > * { position: relative; z-index: 1; } .aos__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(var(--mod-rgb),.55), transparent); box-shadow: 0 0 14px rgba(var(--mod-rgb),.45); opacity: 0; } .aos__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--border-subtle); } .aos__id { display: flex; align-items: center; gap: 13px; } .aos__orb { width: 44px; height: 44px; border-radius: 50%; flex: none; background: radial-gradient(circle at 38% 30%, #fff, #d7dee7 50%, #8c98a8 86%); box-shadow: 0 0 26px rgba(var(--mod-rgb),.6), inset 0 2px 5px rgba(255,255,255,.7); } .aos__name { display: block; font: 700 17px/1 var(--font-osiris); letter-spacing: .02em; color: var(--text-strong); } .aos__role { display: block; margin-top: 4px; font: 500 11.5px/1 var(--font-mono); letter-spacing: .07em; color: var(--text-subtle); } .aos__status { display: grid; gap: 6px; justify-items: end; } .aos__live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--text-strong); } .aos__live .dot { width: 7px; height: 7px; border-radius: 50%; background: #e7edf3; box-shadow: 0 0 10px 1px rgba(var(--mod-rgb),.9); animation: s-blink 2.2s ease-in-out infinite; } .aos__uptime { font: 500 12px/1 var(--font-sans); color: var(--text-subtle); } .aos__uptime b { color: var(--text-body); } .aos__body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(16px,2.2vw,26px); padding: 22px 0; } .aos__vitals { display: grid; gap: 14px; align-content: start; } .aos__ecg { position: relative; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: rgba(255,255,255,.02); padding: 16px; } .aos__ecg svg { width: 100%; height: 58px; display: block; } .aos__ecg .wave { fill: none; stroke: var(--mod); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(var(--mod-rgb),.7)); } .aos__ecg-cap { display: block; margin-top: 8px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); } .aos__kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } .aos__kpi { border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: rgba(255,255,255,.02); padding: 13px 10px; text-align: center; } .aos__kpi .n { display: block; font: 700 clamp(19px,2.3vw,25px)/1 var(--font-display); color: var(--text-strong); } .aos__kpi .n i { font-style: normal; font-size: .6em; color: var(--text-muted); } .aos__kpi .l { display: block; margin-top: 5px; font-size: 10.5px; color: var(--text-subtle); line-height: 1.3; } .aos__feedwrap { display: grid; grid-template-rows: auto 1fr; border-radius: var(--radius-lg); border: 1px solid rgba(var(--mod-rgb),.2); background: rgba(255,255,255,.02); overflow: hidden; } .aos__feedhead { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border-subtle); font: 600 12.5px/1 var(--font-sans); color: var(--text-body); } .aos__feedtag { font: 600 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mod); } .aos__feed { position: relative; height: 208px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 84%, transparent); } .aos__stream { list-style: none; margin: 0; padding: 8px 16px; display: grid; gap: 12px; } .aos__stream li { position: relative; padding-left: 26px; font: 500 12.5px/1.45 var(--font-sans); color: var(--text-muted); } .aos__stream li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 8px 1px rgba(var(--mod-rgb),.7); } .aos__stream li b { color: var(--text-body); font-weight: 600; } .aos__procs { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; padding-top: 20px; border-top: 1px solid var(--border-subtle); } .aos__proc { border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: rgba(255,255,255,.02); padding: 13px 12px; display: grid; gap: 9px; } .aos__proc .ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .aos__proc .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #1c2733; background: radial-gradient(circle at 38% 30%, #fff, #d7dee7 60%, #97a3b2); box-shadow: inset 0 1px 3px rgba(255,255,255,.6); } .aos__proc .st { font: 700 8.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mod); } .aos__proc .pn { font: 600 11.5px/1.3 var(--font-sans); color: var(--text-body); } .aos__bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; } .aos__bars i { flex: 1; height: 100%; border-radius: 2px; transform-origin: bottom; transform: scaleY(.3); background: linear-gradient(180deg, var(--mod), color-mix(in oklab, var(--mod) 50%, #000)); } @media (prefers-reduced-motion: no-preference) { .aos__scan { animation: aos-scan 6s ease-in-out infinite; } .aos__ecg .wave { stroke-dasharray: 720; animation: aos-ecg 2.6s linear infinite; } .aos__stream { animation: aos-scroll 20s linear infinite; } .aos__bars i { animation: aos-bar 3.2s ease-in-out infinite; animation-delay: calc(var(--b,0) * 0.42s); } } @keyframes aos-scan { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: .45; } 90% { opacity: .45; } 100% { transform: translateY(460px); opacity: 0; } } @keyframes aos-ecg { from { stroke-dashoffset: 720; } to { stroke-dashoffset: 0; } } @keyframes aos-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes aos-bar { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } } @media (max-width: 900px) { .aos__body { grid-template-columns: 1fr; } .aos__procs { grid-template-columns: repeat(3,1fr); } } @media (max-width: 560px) { .aos__procs { grid-template-columns: repeat(2,1fr); } } /* ============================================================ Gamified build roadmap (core) ============================================================ */ .groad { margin-top: 8px; } .groad__prog { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; } .groad__progbar { position: relative; flex: 1; height: 9px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; border: 1px solid var(--border-subtle); } .groad__progbar::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 74%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in oklab,var(--mod) 55%,#000), var(--mod)); box-shadow: 0 0 16px rgba(var(--mod-rgb),.6); } .groad__proglabel { font: 700 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); white-space: nowrap; } .groad__track { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; } .groad__line { position: absolute; left: 9%; right: 9%; top: 27px; height: 2px; background: var(--border-line); } .groad__line-fill { position: absolute; left: 9%; top: 27px; height: 2px; width: 62%; background: linear-gradient(90deg, var(--mod), transparent); box-shadow: 0 0 12px rgba(var(--mod-rgb),.5); } .groad__node { position: relative; display: grid; justify-items: center; } .groad__badge { position: relative; z-index: 1; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; font: 800 18px/1 var(--font-display); color: #1c2733; background: radial-gradient(circle at 38% 30%, #fff, #d7dee7 58%, #97a3b2); border: 1px solid rgba(var(--mod-rgb),.6); box-shadow: 0 0 26px rgba(var(--mod-rgb),.45), inset 0 2px 5px rgba(255,255,255,.7); } .groad__badge svg { width: 22px; height: 22px; } .groad__card { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--surface-card); padding: 18px 16px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--shadow-md); transition: transform var(--dur-base), border-color var(--dur-base), box-shadow var(--dur-base); } .groad__node:hover .groad__card { transform: translateY(-4px); border-color: rgba(var(--mod-rgb),.42); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 30px rgba(var(--mod-rgb),.14), var(--shadow-md); } .groad__lvl { font: 700 10px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mod); } .groad__card h3 { margin: 9px 0 6px; font: 600 17px/1.2 var(--font-sans); color: var(--text-strong); } .groad__card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); } .groad__reward { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 6px 12px; border-radius: 99px; font: 600 11px/1 var(--font-sans); color: var(--text-strong); background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.34); } .groad__reward svg { width: 12px; height: 12px; color: var(--mod); flex: none; } @media (max-width: 860px) { .groad__track { grid-template-columns: 1fr 1fr; } .groad__line, .groad__line-fill { display: none; } } @media (max-width: 480px) { .groad__track { grid-template-columns: 1fr; } } /* Cold-Mailing = neon blue: metallic chips adopt the module hue */ [data-mod="mail"] .aos__orb, [data-mod="mail"] .groad__badge, [data-mod="mail"] .aos__proc .ic, [data-mod="mail"] .ops-ic.ok { background: radial-gradient(circle at 38% 30%, #cfe8ff, #57b4ff 52%, #1d6fc4 88%); color: #04243f; border-color: rgba(46,166,255,.6); box-shadow: 0 0 26px rgba(46,166,255,.5), inset 0 2px 5px rgba(255,255,255,.5); } [data-mod="mail"] .aos__live .dot { background: #bfe2ff; } [data-mod="mail"] .aos__proc .ic { box-shadow: inset 0 1px 3px rgba(255,255,255,.5); } /* ============================================================ Redacted output preview — conveys personalised/signal-based output without showing any example copy ============================================================ */ .mmail__subject--redact { align-items: center; } .mmail__rbar { height: 12px; border-radius: 6px; display: inline-block; background: linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); } .mmail__body--redact { padding: 18px 22px 8px; display: grid; gap: 11px; } .mmail__rline { height: 11px; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); } .mmail__rline--hl { background: linear-gradient(90deg, rgba(var(--mod-rgb),.5), rgba(var(--mod-rgb),.14)); box-shadow: 0 0 16px -3px rgba(var(--mod-rgb),.55); } .mmail__seal { display: flex; align-items: center; gap: 12px; margin: 8px 22px 6px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px dashed rgba(var(--mod-rgb),.45); background: rgba(var(--mod-rgb),.07); } .mmail__seal svg { color: var(--mod); flex: none; } .mmail__seal b { display: block; font: 600 13px/1.3 var(--font-sans); color: var(--text-strong); } .mmail__seal span { font: 500 12px/1.45 var(--font-sans); color: var(--text-muted); } /* ============================================================ Sales-boost schematic (cold-mailing) — leverage diagram Same effort in · multiplied sales out ============================================================ */ .boost { position: relative; overflow: hidden; border-radius: var(--radius-2xl); border: 1px solid rgba(var(--mod-rgb),.26); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%), linear-gradient(180deg, var(--po-ink-800), var(--po-ink-900)); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 70px -16px rgba(var(--mod-rgb),.3), var(--shadow-xl); padding: clamp(22px,3vw,42px); margin-top: 8px; } .boost__flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: clamp(18px,3vw,46px); } @media (max-width: 880px){ .boost__flow { grid-template-columns: 1fr; gap: 26px; } } .boost__col { display: grid; align-content: start; gap: 12px; padding: clamp(16px,2vw,22px); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: rgba(255,255,255,.02); } .boost__col--out { border-color: rgba(var(--mod-rgb),.4); box-shadow: 0 0 44px -20px rgba(var(--mod-rgb),.8), inset 0 0 0 1px rgba(var(--mod-rgb),.08); } .boost__tag { font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); } .boost__fig { display: flex; align-items: baseline; gap: 10px; } .boost__big { font: 700 clamp(38px,6vw,66px)/.9 var(--font-display); color: var(--text-strong); letter-spacing: -.02em; } .boost__big.glow { color: var(--mod); text-shadow: 0 0 30px rgba(var(--mod-rgb),.55); } .boost__unit { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/1.25 var(--font-sans); color: var(--text-muted); } .boost__unit svg { color: var(--mod); } .boost__cap { font: 500 13.5px/1.5 var(--font-sans); color: var(--text-muted); } .boost__chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; } .boost__chips li { font: 600 11.5px/1 var(--font-mono); padding: 7px 11px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle); background: rgba(255,255,255,.03); color: var(--text-subtle); } .boost__chips--out li { border-color: rgba(var(--mod-rgb),.32); background: rgba(var(--mod-rgb),.08); color: var(--mod); } .boost__spark { width: 100%; height: 38px; margin-top: 4px; } .boost__spark path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .boost__spark--flat path { stroke: rgba(255,255,255,.22); stroke-dasharray: 4 5; } .boost__spark--up path { stroke: var(--mod); filter: drop-shadow(0 4px 10px rgba(var(--mod-rgb),.5)); } .boost__engine { position: relative; display: grid; justify-items: center; align-content: center; gap: 12px; min-width: clamp(150px,16vw,210px); } .boost__mult { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font: 700 20px/1 var(--font-display); color: var(--mod); background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.4); width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; box-shadow: 0 0 18px rgba(var(--mod-rgb),.45); z-index: 2; } .boost__core { position: relative; width: clamp(110px,12vw,140px); aspect-ratio: 1; display: grid; place-items: center; margin-top: 28px; } .boost__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--mod-rgb),.3); } .boost__ring.r2 { inset: 16%; border-color: rgba(var(--mod-rgb),.45); } .boost__ring.r3 { inset: 32%; border-color: rgba(var(--mod-rgb),.6); } .boost__core-in { width: 40%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: #04243f; background: radial-gradient(circle at 38% 30%, #cfe8ff, #57b4ff 52%, #1d6fc4 88%); box-shadow: 0 0 30px rgba(var(--mod-rgb),.6), inset 0 2px 5px rgba(255,255,255,.5); } .boost__elabel { font: 700 13px/1 var(--font-display); color: var(--text-strong); } .boost__readout { display: grid; gap: 6px; text-align: center; } .boost__readout span { font: 500 12px/1.35 var(--font-sans); color: var(--text-muted); } .boost__readout b { color: var(--text-strong); font-weight: 700; } .boost__on { display: inline-flex; align-items: center; gap: 6px; justify-content: center; color: var(--mod) !important; font-weight: 600 !important; } .boost__on .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 9px 1px rgba(var(--mod-rgb),.8); } .boost__engine::before, .boost__engine::after { content: ""; position: absolute; top: 52%; height: 2px; pointer-events: none; } .boost__engine::before { right: 100%; width: clamp(18px,3vw,46px); margin-right: 4px; background: linear-gradient(90deg, rgba(var(--mod-rgb),.05), rgba(var(--mod-rgb),.5)); } .boost__engine::after { left: 100%; width: clamp(18px,3vw,46px); margin-left: 4px; background: linear-gradient(90deg, rgba(var(--mod-rgb),.5), rgba(var(--mod-rgb),.05)); } @media (max-width: 880px){ .boost__engine::before, .boost__engine::after { display: none; } } .boost__lever { margin-top: clamp(20px,2.5vw,30px); padding-top: clamp(18px,2vw,24px); border-top: 1px solid var(--border-subtle); display: grid; gap: 12px; } .boost__lever-k { font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); } .boost__lever-row { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 14px; } .boost__lever-row .lk { font: 600 13px/1 var(--font-sans); color: var(--text-muted); } .boost__lever-row .lv { font: 600 12px/1 var(--font-mono); color: var(--text-subtle); } .boost__lever-row .lbar { height: 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.05); overflow: hidden; } .boost__lever-row .lbar i { display: block; height: 100%; border-radius: inherit; background: rgba(255,255,255,.22); } .boost__lever-row .lbar--up i { background: linear-gradient(90deg, rgba(var(--mod-rgb),.5), var(--mod)); box-shadow: 0 0 16px rgba(var(--mod-rgb),.6); } @media (max-width: 560px){ .boost__lever-row { grid-template-columns: 76px 1fr; } .boost__lever-row .lv { grid-column: 2; justify-self: end; } } @media (prefers-reduced-motion: no-preference){ .boost__ring { animation: boostpulse 3.4s ease-in-out infinite; } .boost__ring.r2 { animation-delay: .4s; } .boost__ring.r3 { animation-delay: .8s; } } @keyframes boostpulse { 0%,100%{ opacity: .5; } 50%{ opacity: 1; } } /* ---- Motion graphics for the leverage schematic ---- */ .boost__core-in { position: relative; z-index: 2; } @media (prefers-reduced-motion: no-preference){ /* energy flowing into and out of the engine */ .boost__engine::before, .boost__engine::after { background-image: repeating-linear-gradient(90deg, rgba(var(--mod-rgb),0) 0, rgba(var(--mod-rgb),0) 9px, rgba(var(--mod-rgb),.95) 13px, rgba(var(--mod-rgb),0) 18px); background-size: 18px 100%; background-repeat: repeat-x; box-shadow: 0 0 8px rgba(var(--mod-rgb),.4); } .boost__engine::before { animation: boostFlowIn 0.85s linear infinite; } .boost__engine::after { animation: boostFlowOut 0.85s linear infinite; } /* rotating outer ring + breathing inner glow */ .boost__core::before { content: ""; position: absolute; inset: -7%; border-radius: 50%; z-index: 0; border: 1px dashed rgba(var(--mod-rgb),.5); animation: boostSpin 16s linear infinite; } .boost__core::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; z-index: 1; background: radial-gradient(circle, rgba(var(--mod-rgb),.4), transparent 70%); animation: boostHalo 2.6s ease-in-out infinite; } .boost__core-in { animation: boostBob 2.6s ease-in-out infinite; } .boost__ring.r1 { animation: boostpulse 3.4s ease-in-out infinite, boostSpin 22s linear infinite reverse; } .boost__mult { animation: boostMult 2.4s ease-in-out infinite; } .boost__big.glow { animation: boostNum 2.4s ease-in-out infinite; } /* output curve draws itself, flat line drifts */ .boost__spark--up path { stroke-dasharray: 240; stroke-dashoffset: 240; animation: boostDraw 3.4s ease-in-out infinite; } .boost__spark--flat path { animation: boostDash 1.2s linear infinite; } /* result bar keeps surging */ .boost__lever-row .lbar--up i { transform-origin: left; animation: boostSurge 4.2s cubic-bezier(.33,.8,.25,1) both; } .boost__on .dot { animation: boostBlink 1.4s ease-in-out infinite; } } @keyframes boostFlowIn { to { background-position: -18px 0; } } @keyframes boostFlowOut { to { background-position: 18px 0; } } @keyframes boostSpin { to { transform: rotate(360deg); } } @keyframes boostHalo { 0%,100%{ opacity: .35; transform: scale(.88); } 50%{ opacity: 1; transform: scale(1.12); } } @keyframes boostBob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-3px); } } @keyframes boostMult { 0%,100%{ transform: translateX(-50%) scale(1); } 50%{ transform: translateX(-50%) scale(1.16); } } @keyframes boostNum { 0%,100%{ text-shadow: 0 0 24px rgba(var(--mod-rgb),.45); } 50%{ text-shadow: 0 0 42px rgba(var(--mod-rgb),.9); } } @keyframes boostDraw { 0%{ stroke-dashoffset: 240; } 55%{ stroke-dashoffset: 0; } 82%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: 240; } } @keyframes boostDash { to { stroke-dashoffset: -18; } } @keyframes boostSurge { 0%{ transform: scaleX(.18); } 100%{ transform: scaleX(1); } } @keyframes boostBlink { 0%,100%{ opacity: 1; } 50%{ opacity: .3; } } /* ---- Live pipeline feed (output column) ---- */ .pipe { width: 100%; margin: 2px 0 6px; } .pipe__feed { position: relative; height: 134px; overflow: hidden; border: 1px solid rgba(var(--mod-rgb),.18); border-radius: 12px; background: linear-gradient(180deg, rgba(var(--mod-rgb),.06), rgba(255,255,255,.015)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%); } .pipe__stream { display: flex; flex-direction: column; gap: 9px; padding: 11px; animation: pipeScroll 7.5s linear infinite; } .pipe__req { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(var(--mod-rgb),.08); border: 1px solid rgba(var(--mod-rgb),.16); } .pipe__avatar { width: 26px; height: 26px; border-radius: 50%; flex: none; background: radial-gradient(circle at 32% 30%, rgba(var(--mod-rgb),.95), rgba(var(--mod-rgb),.35)); box-shadow: 0 0 10px rgba(var(--mod-rgb),.55); } .pipe__txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .pipe__txt b { font-weight: 600; font-size: 13px; color: #fff; } .pipe__txt i { font-style: normal; font-size: 11px; color: rgba(255,255,255,.5); } .pipe__badge { margin-left: auto; flex: none; font-weight: 600; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--mod-rgb)); padding: 4px 8px; border-radius: 999px; background: rgba(var(--mod-rgb),.15); } .pipe__meter { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .pipe__meter .pk { font-weight: 600; font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; } .pipe__meter .pv { font-weight: 600; font-size: 11px; color: rgb(var(--mod-rgb)); white-space: nowrap; } .pipe__track { flex: 1; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.06); border: 1px solid rgba(var(--mod-rgb),.16); } .pipe__lvl { display: block; height: 100%; border-radius: 999px; width: 64%; background: linear-gradient(90deg, rgba(var(--mod-rgb),.45), rgb(var(--mod-rgb))); box-shadow: 0 0 12px rgba(var(--mod-rgb),.6); } @media (prefers-reduced-motion: no-preference){ .pipe__lvl { animation: pipeFill 7.5s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce){ .pipe__stream { animation: none; } } @keyframes pipeScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes pipeFill { 0%,100% { width: 58%; } 50% { width: 100%; } } /* ============================================================ VIP onboarding schematic (aftersales) — new customer in, instant VIP, contracts / PM / tasks fire automatically ============================================================ */ .vip { display: flex; align-items: center; justify-content: center; gap: clamp(10px,2vw,26px); flex-wrap: wrap; margin-top: 44px; } .vip__entry { flex: none; width: 200px; } .vip__cust { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 14px; background: rgba(var(--mod-rgb),.07); border: 1px solid rgba(var(--mod-rgb),.24); box-shadow: 0 0 34px -16px rgba(var(--mod-rgb),.9); } .vip__ava { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #08243c; background: radial-gradient(circle at 32% 30%, #fff, var(--mod) 66%); box-shadow: 0 0 14px rgba(var(--mod-rgb),.6); } .vip__cust .tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .vip__cust .tx b { font-weight: 600; font-size: 13.5px; color: #fff; } .vip__cust .tx i { font-style: normal; font-size: 11px; color: rgba(255,255,255,.5); } .vip__cust .nw { margin-left: auto; flex: none; font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--mod-rgb)); padding: 4px 8px; border-radius: 999px; background: rgba(var(--mod-rgb),.15); } .vip__flow { flex: 1 1 54px; min-width: 48px; max-width: 120px; height: 3px; align-self: center; border-radius: 3px; position: relative; overflow: hidden; background: rgba(var(--mod-rgb),.16); } .vip__flow::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(var(--mod-rgb)), transparent); background-size: 45% 100%; background-repeat: no-repeat; box-shadow: 0 0 8px rgba(var(--mod-rgb),.5); } .vip__core { position: relative; flex: none; width: 188px; height: 188px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-align: center; background: radial-gradient(62% 62% at 50% 36%, rgba(var(--mod-rgb),.34), var(--po-ink-800) 74%); border: 1px solid rgba(var(--mod-rgb),.5); box-shadow: 0 0 50px rgba(var(--mod-rgb),.32), inset 0 1px 0 rgba(255,255,255,.12); } .vip__ring { position: absolute; inset: -11px; border-radius: 50%; border: 1.5px dashed rgba(var(--mod-rgb),.45); } .vip__crown { color: var(--mod); filter: drop-shadow(0 0 9px rgba(var(--mod-rgb),.75)); margin-bottom: 1px; } .vip__core .k { font: 600 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-subtle); } .vip__core .v { font: 800 36px/1 var(--font-display); color: #fff; letter-spacing: .02em; } .vip__stamp { margin-top: 5px; font: 600 9.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--mod-rgb)); padding: 4px 9px; border-radius: 999px; background: rgba(var(--mod-rgb),.14); border: 1px solid rgba(var(--mod-rgb),.34); } .vip__out { flex: none; width: 282px; display: flex; flex-direction: column; gap: 10px; } .vip__task { position: relative; display: grid; grid-template-columns: 36px 1fr 24px; align-items: center; gap: 12px; padding: 12px 13px; border-radius: 13px; background: rgba(255,255,255,.02); border: 1px solid var(--border-subtle); } .vip__task .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--mod); background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.34); } .vip__task .tx { display: flex; flex-direction: column; line-height: 1.22; min-width: 0; } .vip__task .tx b { font-weight: 600; font-size: 13px; color: #fff; } .vip__task .tx i { font-style: normal; font-size: 11px; color: rgba(255,255,255,.5); } .vip__done { width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center; color: #08243c; background: var(--mod); box-shadow: 0 0 12px rgba(var(--mod-rgb),.6); } .vip__done svg { width: 14px; height: 14px; } @media (max-width: 920px){ .vip__flow { max-width: none; flex-basis: 40px; } .vip__entry, .vip__out { width: min(320px,100%); } } @media (max-width: 620px){ .vip { flex-direction: column; } .vip__flow { width: 3px; height: 38px; flex: none; } .vip__flow::before { background: linear-gradient(180deg, transparent, rgb(var(--mod-rgb)), transparent); background-size: 100% 45%; } .vip__entry, .vip__out { width: min(340px,100%); } } @media (prefers-reduced-motion: no-preference){ .vip__flow::before { animation: vipDash 1.4s linear infinite; } .vip__ring { animation: vipRing 15s linear infinite; } .vip__core { animation: vipCore 5s ease-in-out infinite; } .vip__crown { animation: vipCrown 5s ease-in-out infinite; } .vip__stamp { animation: vipStamp 5s ease-in-out infinite; } .vip__cust { animation: vipCust 9.5s ease-in-out infinite; } .vip__task { animation: vipTask 9.5s ease-in-out infinite; animation-delay: calc(1s + var(--i) * 1.05s); } .vip__done { animation: vipDoneA 9.5s ease-in-out infinite; animation-delay: calc(1.25s + var(--i) * 1.05s); } } @keyframes vipDash { from { background-position: -55% 0; } to { background-position: 155% 0; } } @keyframes vipRing { to { transform: rotate(360deg); } } @keyframes vipCore { 0%,100% { box-shadow: 0 0 38px rgba(var(--mod-rgb),.26), inset 0 1px 0 rgba(255,255,255,.12); } 50% { box-shadow: 0 0 72px rgba(var(--mod-rgb),.55), inset 0 1px 0 rgba(255,255,255,.12); } } @keyframes vipCrown { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes vipStamp { 0%,100% { opacity: .65; } 50% { opacity: 1; } } @keyframes vipCust { 0% { transform: translateX(-14px); opacity: 0; } 7% { transform: none; opacity: 1; } 86% { transform: none; opacity: 1; } 97%,100% { transform: translateX(-14px); opacity: 0; } } @keyframes vipTask { 0% { opacity: 0; transform: translateX(12px); border-color: var(--border-subtle); } 7% { opacity: 1; transform: none; border-color: rgba(var(--mod-rgb),.5); } 84% { opacity: 1; transform: none; border-color: rgba(var(--mod-rgb),.5); } 95%,100% { opacity: 0; transform: translateX(12px); border-color: var(--border-subtle); } } @keyframes vipDoneA { 0% { opacity: 0; transform: scale(.3); } 8% { opacity: 0; transform: scale(.3); } 14% { opacity: 1; transform: scale(1.18); } 19% { opacity: 1; transform: scale(1); } 84% { opacity: 1; transform: scale(1); } 94%,100% { opacity: 0; transform: scale(.3); } } /* ============================================================ Autonomous delivery line (fulfillment) — orders in, an autonomous engine produces, finished output ships out ============================================================ */ .adl { display: flex; align-items: center; justify-content: center; gap: clamp(8px,1.6vw,20px); flex-wrap: wrap; margin-top: 44px; } .adl__io { flex: none; width: 236px; } .adl__k { display: block; margin-bottom: 9px; font: 600 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle); } .adl__feed { position: relative; height: 152px; overflow: hidden; border: 1px solid rgba(var(--mod-rgb),.18); border-radius: 12px; background: linear-gradient(180deg, rgba(var(--mod-rgb),.06), rgba(255,255,255,.015)); -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%); } .adl__stream { display: flex; flex-direction: column; gap: 9px; padding: 10px; } .adl__item { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: rgba(var(--mod-rgb),.08); border: 1px solid rgba(var(--mod-rgb),.16); } .adl__item .ic { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; color: var(--mod); background: rgba(var(--mod-rgb),.14); border: 1px solid rgba(var(--mod-rgb),.3); } .adl__item .ic svg { width: 15px; height: 15px; } .adl__item .tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .adl__item .tx b { font-weight: 600; font-size: 12.5px; color: #fff; } .adl__item .tx i { font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.5); } .adl__flow { flex: 1 1 46px; min-width: 42px; max-width: 96px; height: 6px; align-self: center; border-radius: 3px; background: repeating-linear-gradient(90deg, rgba(var(--mod-rgb),.55) 0 7px, rgba(var(--mod-rgb),.08) 7px 14px); } .adl__engine { display: flex; flex-direction: column; align-items: center; flex: none; } .adl__core { position: relative; width: 200px; height: 200px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(62% 62% at 50% 38%, rgba(var(--mod-rgb),.32), var(--po-ink-800) 74%); border: 1px solid rgba(var(--mod-rgb),.5); box-shadow: 0 0 50px rgba(var(--mod-rgb),.3), inset 0 1px 0 rgba(255,255,255,.12); } .adl__ring { position: absolute; inset: -11px; border-radius: 50%; border: 1.5px dashed rgba(var(--mod-rgb),.45); } .adl__gear { position: absolute; top: 50%; left: 50%; color: var(--mod); filter: drop-shadow(0 0 8px rgba(var(--mod-rgb),.6)); } .adl__gear.g1 { width: 82px; height: 82px; margin: -46px 0 0 -50px; } .adl__gear.g2 { width: 56px; height: 56px; margin: -8px 0 0 -4px; } .adl__gear svg { display: block; width: 100%; height: 100%; } .adl__stamp { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font: 600 9.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--mod-rgb)); padding: 4px 10px; border-radius: 999px; background: rgba(var(--mod-rgb),.16); border: 1px solid rgba(var(--mod-rgb),.36); } .adl__cap { margin-top: 14px; text-align: center; font: 600 12.5px/1.3 var(--font-sans); color: var(--text-muted); max-width: 188px; } .adl__stages { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; max-width: 214px; } .adl__lamp { font: 600 10px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); padding: 6px 9px; border-radius: 999px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,.02); } .adl__out { display: flex; flex-direction: column; gap: 9px; } .adl__deliv { position: relative; display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; background: rgba(255,255,255,.02); border: 1px solid var(--border-subtle); } .adl__deliv .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--mod); background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.32); } .adl__deliv .ic svg { width: 16px; height: 16px; } .adl__deliv .tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .adl__deliv .tx b { font-weight: 600; font-size: 12.5px; color: #fff; } .adl__deliv .tx i { font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.5); } .adl__ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #1c1304; background: var(--mod); box-shadow: 0 0 12px rgba(var(--mod-rgb),.6); } .adl__ok svg { width: 13px; height: 13px; } @media (max-width: 980px){ .adl__io { width: min(300px,100%); } } @media (max-width: 640px){ .adl { flex-direction: column; } .adl__flow { width: 6px; height: 34px; flex: none; max-width: none; background: repeating-linear-gradient(180deg, rgba(var(--mod-rgb),.55) 0 7px, rgba(var(--mod-rgb),.08) 7px 14px); } .adl__io { width: min(340px,100%); } } @media (prefers-reduced-motion: no-preference){ .adl__stream { animation: adlScroll 9s linear infinite; } .adl__flow { animation: adlBelt .55s linear infinite; } .adl__ring { animation: adlSpin 15s linear infinite; } .adl__gear.g1 svg { animation: adlSpin 8s linear infinite; } .adl__gear.g2 svg { animation: adlSpin 6s linear infinite reverse; } .adl__stamp { animation: adlStamp 4s ease-in-out infinite; } .adl__lamp { animation: adlStage 4s ease-in-out infinite; animation-delay: calc(var(--i) * 1s); } .adl__deliv { animation: adlPop 5s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); } } @media (max-width: 640px) and (prefers-reduced-motion: no-preference){ .adl__flow { animation: adlBeltV .55s linear infinite; } } @keyframes adlScroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes adlBelt { to { background-position: 14px 0; } } @keyframes adlBeltV { to { background-position: 0 14px; } } @keyframes adlSpin { to { transform: rotate(360deg); } } @keyframes adlStamp { 0%,100% { opacity: .65; } 50% { opacity: 1; } } @keyframes adlStage { 0%,10% { opacity: .4; border-color: var(--border-subtle); box-shadow: none; } 24%,40% { opacity: 1; color: var(--mod); border-color: rgba(var(--mod-rgb),.55); box-shadow: 0 0 16px -4px rgba(var(--mod-rgb),.7); } 60%,100% { opacity: .4; border-color: var(--border-subtle); box-shadow: none; } } @keyframes adlPop { 0%,5% { opacity: 0; transform: translateX(-12px) scale(.96); } 15%,90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-12px) scale(.96); } } /* ============================================================ Self-optimization loop (selbstoptimierung) — measures, detects deficits, analyses & improves itself, on repeat ============================================================ */ .sopt { display: grid; grid-template-columns: minmax(280px,1fr) minmax(300px,1.05fr); gap: clamp(22px,3vw,46px); align-items: center; margin-top: 44px; } @media (max-width: 880px){ .sopt { grid-template-columns: 1fr; } } .sopt__loop { position: relative; width: min(360px,86vw); aspect-ratio: 1; margin: 0 auto; } .sopt__track { position: absolute; inset: 15%; border-radius: 50%; border: 1.5px solid rgba(var(--mod-rgb),.22); } .sopt__orbit { position: absolute; inset: 15%; } .sopt__arc { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(var(--mod-rgb),0) 0 66%, rgba(var(--mod-rgb),.45) 86%, rgba(var(--mod-rgb),.95) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); } .sopt__pulse { position: absolute; top: -7px; left: 50%; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 16px 4px rgba(var(--mod-rgb),.8); } .sopt__core { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 38%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: radial-gradient(60% 60% at 50% 38%, rgba(var(--mod-rgb),.3), var(--po-ink-800) 76%); border: 1px solid rgba(var(--mod-rgb),.5); box-shadow: 0 0 46px rgba(var(--mod-rgb),.28), inset 0 1px 0 rgba(255,255,255,.12); } .sopt__core .ci { color: var(--mod); display: grid; place-items: center; filter: drop-shadow(0 0 8px rgba(var(--mod-rgb),.7)); } .sopt__core .ci svg { width: 30px; height: 30px; } .sopt__core .cl { font: 600 8.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--mod-rgb)); } .sopt__node { position: absolute; width: clamp(76px,22%,98px); display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; } .sopt__node .nic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--mod); background: rgba(var(--mod-rgb),.1); border: 1px solid rgba(var(--mod-rgb),.3); } .sopt__node .nic svg { width: 22px; height: 22px; } .sopt__node .nl { font: 600 11px/1.15 var(--font-sans); color: var(--text-muted); } .sopt__node .nk { font: 600 8px/1 var(--font-mono); letter-spacing: .14em; color: var(--text-subtle); } .sopt__node.n1 { top: -3%; left: 50%; transform: translateX(-50%); } .sopt__node.n2 { top: 50%; right: -4%; transform: translateY(-50%); } .sopt__node.n3 { bottom: -3%; left: 50%; transform: translateX(-50%); } .sopt__node.n4 { top: 50%; left: -4%; transform: translateY(-50%); } .sopt__panel { border: 1px solid var(--border-subtle); border-radius: 16px; padding: 18px; background: linear-gradient(180deg, rgba(var(--mod-rgb),.05), rgba(255,255,255,.012)); } .sopt__phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sopt__phead .t { font: 600 13px/1 var(--font-sans); color: #fff; display: inline-flex; gap: 8px; align-items: center; } .sopt__phead .t svg { width: 15px; height: 15px; color: var(--mod); } .sopt__live { font: 600 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgb(var(--mod-rgb)); display: inline-flex; align-items: center; gap: 6px; } .sopt__live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mod); box-shadow: 0 0 8px var(--mod); } .sopt__steps { display: flex; flex-direction: column; gap: 8px; } .sopt__step { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--border-subtle); background: rgba(255,255,255,.015); } .sopt__step .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--mod); background: rgba(var(--mod-rgb),.12); border: 1px solid rgba(var(--mod-rgb),.3); } .sopt__step .ic svg { width: 16px; height: 16px; } .sopt__step .tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .sopt__step .tx b { font-weight: 600; font-size: 12.5px; color: #fff; } .sopt__step .tx i { font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.5); } .sopt__step .badge { font: 600 9px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 4px 8px; border-radius: 999px; border: 1px solid var(--border-subtle); white-space: nowrap; } .sopt__delta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-subtle); display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; } .sopt__bars { display: flex; align-items: flex-end; gap: 6px; height: 48px; } .sopt__bars span { width: 13px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(var(--mod-rgb),.85), rgba(var(--mod-rgb),.25)); } .sopt__bars span.lead { background: linear-gradient(180deg, var(--mod), rgba(var(--mod-rgb),.45)); box-shadow: 0 0 16px rgba(var(--mod-rgb),.6); } .sopt__deltacap { text-align: right; } .sopt__deltacap b { display: block; font: 700 22px/1 var(--font-display); color: #fff; letter-spacing: -.02em; } .sopt__deltacap i { font-style: normal; font: 600 9.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); } @media (prefers-reduced-motion: no-preference){ .sopt__orbit { animation: soptSpin 4s linear infinite; } .sopt__core .ci { animation: soptCore 2.4s ease-in-out infinite; } .sopt__node .nic { animation: soptNic 4s ease-in-out infinite; animation-delay: var(--d); } .sopt__step { animation: soptStep 4s ease-in-out infinite; animation-delay: var(--d); } .sopt__bars span.lead { animation: soptLead 2.4s ease-in-out infinite; } } @keyframes soptSpin { to { transform: rotate(360deg); } } @keyframes soptCore { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.1); opacity: 1; } } @keyframes soptNic { 0%,14% { background: var(--mod); border-color: var(--mod); box-shadow: 0 0 22px rgba(var(--mod-rgb),.7); transform: scale(1.12); color: #06140c; } 28%,100% { background: rgba(var(--mod-rgb),.1); border-color: rgba(var(--mod-rgb),.3); box-shadow: none; transform: none; color: var(--mod); } } @keyframes soptStep { 0%,14% { border-color: rgba(var(--mod-rgb),.55); background: rgba(var(--mod-rgb),.08); box-shadow: 0 0 18px -6px rgba(var(--mod-rgb),.7); } 28%,100% { border-color: var(--border-subtle); background: rgba(255,255,255,.015); } } @keyframes soptLead { 0%,100% { box-shadow: 0 0 10px rgba(var(--mod-rgb),.4); } 50% { box-shadow: 0 0 22px rgba(var(--mod-rgb),.85); } }