Update styles.css

Author: omarakhmedov-web

styles.css

@@ -1,12 +1,12 @@
-/* v0.4.3 — partners marquee + extra brand spacing */
+/* v0.4.4 — partners planet marquee (2x size, embossed, orbit effect) */
 :root{ --bg:#070709; --ink:#f5f3eb; --muted:#b9b3a3; --glass:#0c0d11; --stroke:rgba(255,255,255,.10);
   --gold1:#f7e3a1; --gold2:#b88a2a; --link:#f0c65a; --link-visited:#d0b36e }
 *{box-sizing:border-box} html{scroll-behavior:smooth} html,body{height:100%}
 body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--ink);
   background: radial-gradient(900px 500px at 10% 15%, rgba(247,227,161,.08), transparent 60%), radial-gradient(800px 420px at 80% 8%, rgba(184,138,42,.10), transparent 60%), radial-gradient(1200px 600px at 70% 70%, rgba(255,255,255,.05), transparent 60%), var(--bg); line-height:1.6 }
 a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline} a:visited{color:var(--link-visited)}
 .container{width:min(1120px, 92%); margin:0 auto}
-.nav-container-wide{width:min(1160px, 96%)} /* больше воздуха слева для бренда */
+.nav-container-wide{width:min(1160px, 96%)}
 
 /* Navbar */
 .nav{position:fixed; top:0; left:0; right:0; z-index:100; border-bottom:1px solid var(--stroke); backdrop-filter:saturate(150%) blur(8px); background:rgba(7,7,9,.70); box-shadow:0 6px 18px rgba(0,0,0,.35)}
@@ -22,7 +22,7 @@ a{color:var(--link); text-decoration:none} a:hover{text-decoration:underline} a:
 .burger{display:none; margin-left:8px; background:transparent; border:1px solid var(--stroke); color:var(--ink); border-radius:10px; padding:8px 10px; cursor:pointer}
 body.has-fixed-nav{padding-top:72px}
 
-/* Hero & sections */
+/* Sections */
 .hero{padding:96px 0 56px}
 .hero-inner{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px; align-items:center}
 .hero-copy h1{font-size: clamp(36px, 5.8vw, 66px); line-height:1.06; margin:0 0 10px; font-weight:900; letter-spacing:-.02em}
@@ -53,15 +53,36 @@ body.has-fixed-nav{padding-top:72px}
 .card{padding:18px}
 .card .price{font-size:22px; font-weight:900}
 
-/* Partners — marquee "train" */
-.logos.marquee{overflow:hidden; mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent); -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent)}
-.logos.marquee .marquee-track{display:flex; gap:16px; align-items:center; width:max-content; animation:marquee-left 28s linear infinite}
-/* reverse direction: .logos.marquee.rtl -> right */
+/* Partners — planet marquee */
+.logos.marquee{position:relative; overflow:hidden; perspective:1200px;
+  background: radial-gradient(650px 120px at 50% 120%, rgba(88,140,200,.08), rgba(0,0,0,0) 70%) }
+.logos.marquee::before{ /* faint "earth" rim */
+  content:""; position:absolute; left:50%; top:50%; width:1200px; height:120px; transform:translate(-50%,-50%) rotateX(65deg);
+  border-radius:50%; box-shadow:0 0 120px rgba(86,160,230,.18) inset; pointer-events:none; filter:blur(1px);
+}
+.logos.marquee .marquee-track{display:flex; gap:20px; align-items:center; width:max-content; animation:marquee-left 34s linear infinite; transform-style:preserve-3d}
+/* Reverse direction via .rtl */
 .logos.marquee.rtl .marquee-track{animation-name:marquee-right}
-.logo{flex:0 0 auto; display:grid; place-items:center; padding:14px; height:84px; border-radius:18px; border:1px solid var(--stroke); background:rgba(255,255,255,.03); box-shadow:0 18px 48px rgba(0,0,0,.20); backdrop-filter: blur(6px)}
-.logo img{max-width:120px; max-height:56px; opacity:.95; filter:grayscale(100%) contrast(105%)}
-@keyframes marquee-left{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
-@keyframes marquee-right{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }
+
+.logo{flex:0 0 auto; display:grid; place-items:center; padding:18px; height:140px; min-width:240px;
+  border-radius:22px; border:1px solid var(--stroke);
+  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
+  box-shadow:
+    0 18px 48px rgba(0,0,0,.35),
+    inset 0 1px 0 rgba(255,255,255,.10),
+    inset 0 -8px 16px rgba(0,0,0,.25); /* embossed */
+  backdrop-filter: blur(8px);
+  transform:rotateX(12deg) rotateY(10deg);
+  animation:orbit 6s ease-in-out infinite alternate;
+}
+.logo img{max-width:240px; max-height:112px; opacity:.97; filter:grayscale(100%) contrast(110%)}
+@keyframes marquee-left{ from{ transform:translateX(0) } to{ transform:translateX(-33.3333%) } }
+@keyframes marquee-right{ from{ transform:translateX(-33.3333%) } to{ transform:translateX(0) } }
+@keyframes orbit{
+  0%  { transform:rotateX(12deg) rotateY(10deg) translateY(0) translateZ(0) scale(1.00); box-shadow:0 18px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -8px 16px rgba(0,0,0,.25) }
+  50% { transform:rotateX(16deg) rotateY(0deg)  translateY(-6px) translateZ(26px) scale(1.04); box-shadow:0 22px 64px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.12), inset 0 -10px 18px rgba(0,0,0,.28) }
+  100%{ transform:rotateX(12deg) rotateY(-10deg) translateY(0) translateZ(0) scale(1.00); box-shadow:0 18px 48px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10), inset 0 -8px 16px rgba(0,0,0,.25) }
+}
 .logos.marquee:hover .marquee-track{ animation-play-state:paused }
 
 /* How & Security */
@@ -103,9 +124,11 @@ body.has-fixed-nav{padding-top:72px}
   .hero-inner{grid-template-columns:1fr; gap:18px} .hero{padding-top:64px}
   .nav-inner{flex-wrap:wrap} .nav-links{display:none; flex-direction:column; width:100%; order:3; padding:8px 0}
   .nav-actions{margin-left:auto} .burger{display:inline-block} .nav-links.open{display:flex}
+  .logo{height:120px; min-width:200px}
+  .logo img{max-height:96px; max-width:200px}
 }
 
-/* Light theme */
+/* Light theme tweaks */
 :root.light{--bg:#faf8f2; --ink:#14120e; --muted:#5a5346; --glass:#ffffff; --stroke:rgba(0,0,0,.10); --link:#916c16; --link-visited:#6d5524; background:none}
 :root.light body{background:var(--bg)}
 :root.light .nav{background:rgba(255,255,255,.90); border-bottom-color:var(--stroke); box-shadow:0 6px 18px rgba(0,0,0,.08)}