/* Web Design — subject-specific animated panels (extends it-panels.css) */
.dm-x .it-viz { place-items: stretch; align-content: start; text-align: left; }
@keyframes wdv-ink { 0%, 10% { background: rgba(255,255,255,.1); box-shadow: none; } 28%, 88% { background: var(--c, #146ef5); } 100% { background: rgba(255,255,255,.1); } }
@keyframes wdv-in { 0%, 6% { opacity: 0; transform: translateY(8px); } 20%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(8px); } }
@keyframes wdv-hl { 0%, 100% { background: transparent; color: #9aa6ba; } 10%, 30% { background: rgba(98,169,255,.18); color: #fff; } 40% { background: transparent; color: #9aa6ba; } }
@keyframes wdv-cart { 0%, 14% { content: "0"; } 28% { content: "1"; } 46% { content: "2"; } 64%, 92% { content: "3"; } 100% { content: "0"; } }
@keyframes wdv-btn { 0%, 100% { transform: none; box-shadow: 0 0 0 0 rgba(98,169,255,.6); } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(98,169,255,0); } }
@keyframes wdv-type { 0%, 8% { width: 0; } 50%, 90% { width: var(--w); } 100% { width: 0; } }
@keyframes wdv-arc { 0%, 6% { stroke-dashoffset: 126; stroke: #ff6b6b; } 30% { stroke: #ffd37a; } 50%, 90% { stroke-dashoffset: var(--o); stroke: #3ddc84; } 100% { stroke-dashoffset: 126; stroke: #ff6b6b; } }
@keyframes wdv-fade { 0%, 40% { opacity: 1; } 50%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wdv-fade2 { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wdv-knob { 0%, 40% { left: 2px; } 50%, 90% { left: 16px; } 100% { left: 2px; } }
@keyframes wdv-rise { 0%, 8% { transform: scaleY(.1); } 40%, 90% { transform: scaleY(1); } 100% { transform: scaleY(.1); } }
@keyframes wdv-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.wdv-sub { color: #8e9ab0; font-size: 10.5px; }
/* 1 UI/UX wireframe -> design */
.wdv-ui { display: grid; grid-template-columns: 1fr 96px; gap: 12px; }
.wdv-fr { padding: 10px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); display: grid; gap: 7px; align-content: start; }
.wdv-fr i { display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); animation: wdv-ink 7s ease-in-out infinite; animation-delay: calc(var(--k) * .35s); }
.wdv-fr .h { height: 46px; border-radius: 8px; --c: #146ef5; background-image: none; }
.wdv-fr .r { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: none !important; animation: none; height: 30px; } .wdv-fr .r s { border-radius: 6px; background: rgba(255,255,255,.1); animation: wdv-ink 7s ease-in-out infinite; animation-delay: calc(var(--k) * .35s); }
.wdv-fr .b { width: 50%; height: 14px; border-radius: 99px; --c: #7DB4FF; }
.wdv-side { display: grid; gap: 8px; align-content: start; }
.wdv-sw { display: flex; gap: 5px; } .wdv-sw i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255,255,255,.2); animation: wdv-in 7s ease-in-out infinite; animation-delay: calc(var(--k) * .3s); }
.wdv-ty { padding: 8px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); } .wdv-ty strong { font-size: 26px; line-height: 1; display: block; } .wdv-ty span { font-size: 9.5px; color: #8e9ab0; }
.wdv-flow { display: flex; gap: 6px; margin-top: 12px; } .wdv-flow span { flex: 1; text-align: center; padding: 6px 2px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 10.5px; animation: itv-node 7s ease-in-out infinite; animation-delay: calc(var(--k) * 1.3s); }
/* browser mock */
.wdv-br { border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); overflow: hidden; }
.wdv-br > header { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: rgba(255,255,255,.06); } .wdv-br > header i { width: 7px; height: 7px; border-radius: 50%; background: #ff6b6b; } .wdv-br > header i + i { background: #ffd37a; } .wdv-br > header i + i + i { background: #3ddc84; } .wdv-br > header span { margin-left: 8px; flex: 1; padding: 2px 10px; border-radius: 99px; background: rgba(0,0,0,.3); color: #8e9ab0; font-size: 10px; }
.wdv-nav { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.08); } .wdv-nav span { padding: 3px 8px; border-radius: 99px; font-size: 10.5px; color: #9aa6ba; animation: wdv-hl 8s ease-in-out infinite; animation-delay: calc(var(--k) * 2s); }
.wdv-pg { padding: 10px; display: grid; gap: 8px; }
.wdv-hero { height: 52px; border-radius: 8px; background: linear-gradient(135deg, rgba(20,110,245,.6), rgba(98,169,255,.35)); display: grid; align-content: center; padding: 0 12px; gap: 5px; animation: wdv-in 8s ease-in-out infinite; } .wdv-hero i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.8); width: 60%; } .wdv-hero i + i { width: 36%; background: rgba(255,255,255,.4); }
.wdv-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .wdv-3 div { height: 38px; border-radius: 8px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.08); animation: wdv-in 8s ease-in-out infinite; animation-delay: calc(var(--k) * .4s); }
/* shop */
.wdv-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; } .wdv-p { padding: 6px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); font-size: 10.5px; display: grid; gap: 3px; } .wdv-p i { height: 38px; border-radius: 7px; background: var(--c); opacity: .85; animation: wdv-bounce 3s ease-in-out infinite; animation-delay: calc(var(--k) * .5s); } .wdv-p b { font-weight: 500; } .wdv-p em { font-style: normal; color: #8ff0bd; }
.wdv-cart { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .wdv-cart span { position: relative; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); } .wdv-cart span::after { content: "0"; animation: wdv-cart 9s steps(1) infinite; margin-left: 8px; padding: 1px 7px; border-radius: 99px; background: #7DB4FF; color: #0F0F0F; font-weight: 700; font-size: 10.5px; }
.wdv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; } .wdv-steps span { text-align: center; padding: 6px 2px; border-radius: 8px; font-size: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #9aa6ba; animation: itv-node 9s ease-in-out infinite; animation-delay: calc(var(--k) * 1.5s); }
/* landing */
.wdv-lp { display: grid; grid-template-columns: 1fr 112px; gap: 12px; align-items: center; }
.wdv-lh { padding: 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(20,110,245,.45), rgba(98,169,255,.2)); border: 1px solid rgba(255,255,255,.12); display: grid; gap: 7px; } .wdv-lh strong { font-size: 13px; } .wdv-lh i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.35); width: 80%; } .wdv-cta { justify-self: start; padding: 5px 13px; border-radius: 99px; background: #7DB4FF; color: #0F0F0F; font-weight: 700; font-size: 11px; animation: wdv-btn 2.2s ease-in-out infinite; }
.wdv-fn { display: grid; gap: 5px; } .wdv-fn div { height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; font-size: 10px; background: linear-gradient(90deg, #146ef5, #7DB4FF); color: #0F0F0F; font-weight: 600; width: var(--w); transform-origin: left; animation: itv-fill 7s ease-in-out infinite; animation-delay: calc(var(--k) * .3s); }
.wdv-ab { display: flex; gap: 8px; margin-top: 12px; } .wdv-ab span { flex: 1; text-align: center; padding: 7px 4px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); font-size: 10.5px; color: #8e9ab0; } .wdv-ab b { display: block; color: #fff; font-size: 14px; }
/* CMS editor */
.wdv-ed { border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); overflow: hidden; }
.wdv-tb { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: rgba(255,255,255,.06); } .wdv-tb b { width: 20px; height: 20px; border-radius: 5px; display: grid; place-items: center; background: rgba(255,255,255,.08); font-size: 10.5px; } .wdv-tb em { margin-left: auto; font-style: normal; padding: 3px 11px; border-radius: 99px; background: #7DB4FF; color: #0F0F0F; font-weight: 700; font-size: 10.5px; animation: wdv-btn 3s ease-in-out infinite; }
.wdv-tx { padding: 12px; display: grid; gap: 8px; } .wdv-tx i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.35); width: 0; animation: wdv-type 8s ease-in-out infinite; animation-delay: calc(var(--k) * .6s); } .wdv-tx i.t { height: 10px; background: rgba(255,255,255,.7); }
.wdv-rl { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .wdv-rl span { padding: 4px 10px; border-radius: 99px; font-size: 10.5px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); } .wdv-rl span:nth-child(1) { color: #7fe9f7; } .wdv-rl span:nth-child(2) { color: #8ff0bd; } .wdv-rl span:nth-child(3) { color: #ffd37a; }
/* vitals */
.wdv-cwv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .wdv-g { text-align: center; padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); position: relative; } .wdv-g svg { width: 64px; height: 64px; transform: rotate(-90deg); } .wdv-g circle { fill: none; stroke-width: 6; stroke: rgba(255,255,255,.1); } .wdv-g .v { stroke-linecap: round; stroke-dasharray: 126; stroke-dashoffset: 126; animation: wdv-arc 7s ease-in-out infinite; } .wdv-g strong { position: absolute; left: 0; right: 0; top: 29px; font-size: 11px; } .wdv-g b { display: block; font-size: 11.5px; margin-top: 2px; } .wdv-g small { color: #8e9ab0; font-size: 10px; }
.wdv-bud { display: grid; gap: 6px; } .wdv-bud div { display: grid; grid-template-columns: 70px 1fr 40px; gap: 8px; align-items: center; font-size: 10.5px; color: #8e9ab0; } .wdv-bud i { height: 6px; border-radius: 99px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; } .wdv-bud i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #ff6b6b, #3ddc84); transform-origin: left; animation: itv-fill 7s ease-in-out infinite; animation-delay: calc(var(--k) * .3s); } .wdv-bud em { font-style: normal; color: #8ff0bd; text-align: right; }
/* SEO */
.wdv-serp { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); margin-bottom: 10px; display: grid; gap: 3px; } .wdv-serp small { color: #8ff0bd; font-size: 10px; } .wdv-serp strong { color: #8fbfff; font-size: 13px; font-weight: 500; } .wdv-serp span { color: #8e9ab0; font-size: 10.5px; } .wdv-serp i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); width: 90%; margin-top: 2px; }
.wdv-code { padding: 8px 10px; border-radius: 10px; background: #0B0B0B; border: 1px solid rgba(255,255,255,.08); font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #8e9ab0; margin-bottom: 10px; display: grid; gap: 2px; } .wdv-code span { animation: itv-tick 8s ease-in-out infinite; animation-delay: calc(var(--k) * 1s); } .wdv-code b { color: #7fe9f7; font-weight: 400; }
/* RTL */
.wdv-rt { position: relative; height: 150px; margin-bottom: 12px; } .wdv-rt > div { position: absolute; inset: 0; padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-content: start; animation: wdv-fade 8s ease-in-out infinite; } .wdv-rt > div:last-child { animation-name: wdv-fade2; }
.wdv-rt aside { display: grid; gap: 6px; align-content: start; } .wdv-rt aside i { height: 14px; border-radius: 5px; background: rgba(98,169,255,.35); } .wdv-rt main { display: grid; gap: 7px; align-content: start; } .wdv-rt strong { font-size: 13px; } .wdv-rt main i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); } .wdv-rt main i:nth-of-type(2) { width: 70%; } .wdv-rt main span { justify-self: start; padding: 4px 12px; border-radius: 99px; background: #7DB4FF; color: #0F0F0F; font-weight: 700; font-size: 10.5px; }
.wdv-lang { display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; } .wdv-lang i { position: relative; width: 34px; height: 18px; border-radius: 99px; background: #7DB4FF; } .wdv-lang i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; animation: wdv-knob 8s ease-in-out infinite; }
/* stack */
.wdv-stk { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .wdv-stk span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 10px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); animation: wdv-bounce 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * .4s); } .wdv-stk span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
@media (prefers-reduced-motion: reduce) { .wdv-fr i, .wdv-fr .r s, .wdv-sw i { background: var(--c, #146ef5); } .wdv-tx i { width: var(--w); } .wdv-g .v { stroke: #3ddc84; stroke-dashoffset: var(--o); } .wdv-rt > div:last-child { opacity: 0; } .wdv-cart span::after { content: "3"; } .wdv-hero, .wdv-3 div, .wdv-sw i, .wdv-nav span, .wdv-code span { opacity: 1; } .wdv-fn div, .wdv-bud i::after { transform: none; } }