.mockup{--m1: var(--c-primary);--m2: var(--c-primary-bright);position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(70% 90% at 80% 10%,color-mix(in srgb,var(--m2) 45%,transparent),transparent 60%),radial-gradient(60% 70% at 0% 100%,color-mix(in srgb,var(--m1) 35%,transparent),transparent 60%),var(--c-bg-alt)}.mockup--2{--m1: var(--c-accent);--m2: var(--c-primary-bright)}.mockup--3{--m1: var(--c-blue);--m2: var(--c-primary)}.mockup--4{--m1: var(--c-cyan);--m2: var(--c-blue)}.mockup__window{position:absolute;left:8%;top:12%;width:72%;height:92%;border-radius:12px;border:1px solid color-mix(in srgb,#fff 14%,transparent);background:color-mix(in srgb,var(--c-bg) 88%,transparent);box-shadow:0 40px 80px -30px #000000e6,0 0 60px -30px var(--m2);overflow:hidden;transition:transform 1s var(--ease-out)}.project:hover .mockup__window,.product-card:hover .mockup__window{transform:translateY(-6px) rotate(-.4deg)}.mockup__bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-bottom:1px solid color-mix(in srgb,#fff 8%,transparent)}.mockup__bar i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,#fff 20%,transparent)}.mockup__bar span{margin-left:12px;width:40%;height:8px;border-radius:6px;background:color-mix(in srgb,#fff 8%,transparent)}.mockup__body{padding:4% 6%;display:grid;gap:7%;height:calc(100% - 26px);align-content:start}.mockup__nav{display:flex;align-items:center;gap:6%}.mockup__nav b{width:12%;height:9px;border-radius:4px;background:linear-gradient(90deg,var(--m1),var(--m2))}.mockup__nav span{width:8%;height:5px;border-radius:4px;background:color-mix(in srgb,#fff 18%,transparent)}.mockup__nav em{margin-left:auto;width:14%;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--m1),var(--m2))}.mockup__hero{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:center}.mockup__copy{display:grid;gap:9px}.mockup__copy span{height:12px;border-radius:6px;background:color-mix(in srgb,#fff 80%,transparent)}.mockup__copy span:nth-child(2){width:80%;background:linear-gradient(90deg,var(--m2),var(--m1))}.mockup__copy span:nth-child(3){width:60%;height:6px;background:color-mix(in srgb,#fff 18%,transparent)}.mockup__copy em{width:34%;height:16px;margin-top:6px;border-radius:999px;background:linear-gradient(90deg,var(--m1),var(--m2))}.mockup__art{aspect-ratio:1;border-radius:50%;background:radial-gradient(40% 35% at 32% 28%,rgba(255,255,255,.55),transparent 60%),radial-gradient(circle at 70% 75%,var(--m1),transparent 60%),linear-gradient(145deg,var(--m2),#12052a);box-shadow:0 0 40px -6px var(--m2)}.mockup__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:5%}.mockup__cards span{height:46px;border-radius:8px;border:1px solid color-mix(in srgb,#fff 8%,transparent);background:color-mix(in srgb,#fff 3%,transparent)}.mockup__phone{position:absolute;right:6%;bottom:-14%;width:21%;aspect-ratio:9 / 18;border-radius:18px;border:1px solid color-mix(in srgb,#fff 16%,transparent);background:color-mix(in srgb,var(--c-bg) 92%,transparent);box-shadow:0 30px 60px -20px #000000e6;padding:9%;transition:transform 1s var(--ease-out)}.project:hover .mockup__phone,.product-card:hover .mockup__phone{transform:translateY(-12px)}.mockup__phone-screen{display:grid;gap:8px}.mockup__phone-screen span{height:8px;border-radius:4px;background:color-mix(in srgb,#fff 20%,transparent)}.mockup__phone-screen span:first-child{height:52px;border-radius:10px;background:linear-gradient(150deg,var(--m2),var(--m1))}.mockup__phone-screen em{height:14px;margin-top:4px;border-radius:999px;background:linear-gradient(90deg,var(--m1),var(--m2))}
/*# sourceMappingURL=/cdn/shop/t/5/assets/component-mockup.css.map */