/* ========================================================================== FONT IMPORT ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Inter:wght@400;500;600;700;800&display=swap'); /* ========================================================================== TYPOGRAPHY ASSIGNMENTS ========================================================================== */ /* --- Базовый шрифт для всего сайта --- */ body, .product-card, .product-card .card-title, .product-card .card-body, .social-item-custom, .sa-discord-modal, .sa-discord-title, .sa-discord-text, .sa-discord-btn, .navbar.navbar-expand-lg.component, .navbar.navbar-expand-lg.component .nav-link, .navbar.navbar-expand-lg.component .btn, .feedback-card, .product-tabs, .buy-buttons, footer.footer.component, .bg-gray, .testimonials.row > [class*="col-"], .d-flex.flex-wrap.variants button.variant, .section-title h2, .products-divider__title, .hero-beauty .hero-subtitle, .hero-beauty .hero-cta { font-family: 'Inter', system-ui, -apple-system, sans-serif !important; } .hero-beauty .hero-title { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; line-height: 1.0; letter-spacing: -0.03em; text-transform: none; /* убираем uppercase */ } /* --- Заголовки секций --- */ .section-title h2, .products-divider__title { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; letter-spacing: -0.02em; } .hero-beauty .stats .value, .hero-beauty .stats .label { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* --- Дополнительная плавность текста --- */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== TABLE OF CONTENTS ========================================================================== 1. ROOT / GLOBAL VARS 2. PAGE BACKGROUND 2a. Base body background 2b. Global darkening overlay (html::before) 2c. Edge glow (body::before) 2d. Animated grid lines (body::after) 2e. Reduced-motion override 2f. Mobile overrides 3. LAYOUT CONTAINERS 3a. Desktop 3b. Mobile 4. SECTION TITLES 5. SOCIALS 5a. Section spacing 5b. Card base styles 5c. Interaction states (hover / active) 5d. Platform-specific: Discord 5e. Platform-specific: YouTube 5f. Platform-specific: FunPay 6. PRODUCT CARD 6a. CSS variables (hover palette) 6b. Card base + z-index 6c. Animated border (::before) 6d. Holo overlay (::after) 6e. Hover & active states 6f. Image area 6g. Title gradient 6h. Price 6i. Purchase overlay & button 6j. Keyframe animations 7. HERO 7a. Layout & sizing 7b. Glow background (::before) 7c. Stats block 7d. Brand glow 7e. No-image variant 7f. Mobile overrides 7g. Side image sizing & positioning 7h. Neon glow on side image 8. HERO / PRODUCTS SPACING HELPERS 9. PRODUCTS DIVIDER ("Our Products") 10. SNOW / PARTICLES 11. FEEDBACK (marquee) 11a. Container & wrapper 11b. Card base styles 11c. Card glass style (full override) 11d. Edge fade overlays (::before / ::after) 11e. Typography inside cards 11f. Scroll-reveal helper 12. NAVBAR 12a. Base structure & backdrop 12b. Decorative layers (::before / ::after) 12c. UI layering (z-index) 12d. Links, buttons, brand 12e. Dropdown 12f. Mobile overrides 13. HERO — CURSOR RADIAL GLOW (misc) 14. HERO TYPEWRITER 15. SOCIALS SECTION BACKGROUND + BUTTON RESTYLE 15a. Section background & backdrop 15b. Decorative layers (::before / ::after) 15c. Content layering 15d. Title / subtitle color 15e. Fix: overflow containment 15f. Platform hover accents 15g. Button restyle (navbar look) 16. PRODUCT CARD — BACKGROUND COLOR OVERRIDE 17. HERO SIDE IMAGE — FLOAT ANIMATION 18. DISCORD POPUP 18a. Overlay 18b. Modal card 18c. Decorative layers (::before / ::after) 18d. Header & title 18e. Body text 18f. Action buttons 18g. Note 18h. Mobile overrides 18i. Animated border + holo overlay (product-card style) 18j. Button animated border on hover 18k. Title gradient animation 18l. Overlay ambient glow (::after) 18m. Entry animation 18n. Join button pulse 18o. Disable on mobile / touch 19. PRODUCT CARD IMAGE — SELLAUTH FIX 20. SCROLL REVEAL (product card wrappers) 21. FOOTER 21a. Seamless background with Socials 21b. Footer container (no own background) 21c. Layout: centered 21d. Heading & nav buttons 21e. Mobile overrides 22. LEGAL PAGES (bg-gray glass block) 23. REVIEWS / FEEDBACK PAGE (/reviews) 23a. Feedback container reset 23b. Column card style 23c. Hard-fix: inner backgrounds 23d. Decorative glow + lines (::before / ::after) 23e. Content layering 23f. Hover state 23g. Typography 24. PRODUCT / CHECKOUT — GLASS ELEMENTS 24a. CSS variables 24b. Quantity input group (buy-buttons scope) 24c. +/- buttons (buy-buttons scope) 24d. Discount / notice bar (buy-buttons scope) 24e. Buy buttons row (buy-buttons scope) 24f. Checkout form controls (checkout / cart scope) 25. PRODUCT TABS (Description / Features) 26. GLASS QUANTITY (product-wrapper / checkout-wrapper / cart-wrapper scope) 26a. Variables 26b. Input group 26c. Quantity field 26d. Spin-button removal 26e. +/- buttons 26f. Focus glow 26g. Discount / notice bar 26h. Helper text 27. PRODUCT QUANTITY — SELLAUTH-SPECIFIC GLASS (product-wrapper.component) 27a. Input group 27b. Quantity field 27c. Volume discount / notice bar 27d. Focus state 27e. SVG icon color 28. CART / ORDER SUMMARY ("Your Order") 29. PRODUCT VARIANTS 29a. Container layout 29b. Button base + inner shine 29c. Hover state 29d. Active (selected) state 29e. Disabled / out-of-stock 29f. Inner text hierarchy 30. PRODUCT IMAGE CAROUSEL — GRADIENT BORDER 31. STOCK BADGES 31a. Hide empty / hidden badges 31b. Base geometry & glass (first pass) 31c. In Stock 31d. Out of Stock 31e. Hover / focus / active 31f. Full pill redesign (second pass — overrides first) 31g. Dot pulse animation 32. PRODUCT DESCRIPTION / VIDEO — GLASS CARD 33. CURRENCY SWITCH (Choices.js) 33a. Container sizing 33b. Inner plaque 33c. Text & arrow 33d. Hover / focus / open states 33e. Dropdown 33f. Dropdown item highlights 34. CURRENCY SWITCH — NAVBAR VARIANT (fixed layering + chevron) 34a. Layering above navbar texture 34b. Glass inner + glow 34c. Chevron arrow 34d. Text & currency symbol 34e. Dropdown glass 34f. Dropdown item highlight 35. PRODUCT VARIANT — BTN-PRIMARY OVERRIDE 35a. Base style 35b. Hover 35c. Active / selected 35d. Remove old active-indicator ========================================================================== */ /* ========================================================================== 1) ROOT / GLOBAL VARS ========================================================================== */ :root{ /* единая палитра holo (используется в product-card/hero) */ --holo-cyan: 120, 210, 255; /* мягкий голубой */ --holo-blue: 90, 140, 255; /* мягкий синий */ --holo-teal: 100, 255, 220; /* мягкий бирюзовый */ /* glow цвет для краёв фидбека */ --bgGlow: 11, 42, 74; } html, body{ width: 100%; height: 100%; overflow-x: hidden; } /* ========================================================================== 2) PAGE BACKGROUND ========================================================================== */ /* --- 2a. Base body background --- */ html, body { height: 100%; } body { background-color: #020b0e; background-image: radial-gradient(120% 140% at 50% 35%, rgba(0, 28, 36, 0.96) 0%, rgba(0, 24, 32, 0.90) 52%, rgba(0, 20, 26, 0.58) 82%, rgba(0, 20, 26, 0.00) 100% ), linear-gradient( 180deg, rgba(0, 32, 40, 0.92) 0%, rgba(0, 28, 36, 0.72) 45%, rgba(0, 22, 28, 0.38) 75%, rgba(0, 22, 28, 0.00) 100% ); background-attachment: fixed; } /* --- 2b. Global darkening overlay --- */ html::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -3; background: rgba(0,0,0,0.38); } /* --- 2c. Живой туман (nebula) --- */ body::before { content: ""; position: fixed; inset: -30%; pointer-events: none; z-index: -2; background: radial-gradient(ellipse 70% 55% at 15% 25%, rgba(0, 180, 255, 0.13) 0%, transparent 65% ), radial-gradient(ellipse 60% 50% at 85% 20%, rgba(0, 120, 255, 0.10) 0%, transparent 60% ), radial-gradient(ellipse 80% 60% at 50% 80%, rgba(0, 210, 200, 0.09) 0%, transparent 65% ), radial-gradient(ellipse 50% 40% at 70% 55%, rgba(30, 60, 180, 0.08) 0%, transparent 55% ); filter: blur(40px); animation: nebulaShift 22s ease-in-out infinite alternate; will-change: transform, opacity; } @keyframes nebulaShift { 0% { transform: translate(0%, 0%) scale(1); opacity: 0.85; } 25% { transform: translate(2%, -3%) scale(1.04); opacity: 0.95; } 50% { transform: translate(-3%, 2%) scale(1.06); opacity: 1; } 75% { transform: translate(3%, 3%) scale(1.03); opacity: 0.90; } 100% { transform: translate(-2%, -2%) scale(1); opacity: 0.85; } } /* --- 2d. Тонкая сетка которая дышит --- */ body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: linear-gradient(rgba(0, 210, 255, 0.028) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 255, 0.028) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.0) 100% ); mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.0) 100% ); animation: gridBreathe 8s ease-in-out infinite; will-change: opacity, background-size; } @keyframes gridBreathe { 0%, 100% { opacity: 0.55; background-size: 52px 52px; } 50% { opacity: 0.80; background-size: 54px 54px; } } /* --- 2e. Reduced-motion override --- */ @media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } body::after { animation: none !important; } } /* --- 2f. Mobile overrides --- */ @media (max-width: 991.98px) { body { background-attachment: scroll; } body::before { filter: blur(32px); animation-duration: 30s; } body::after { opacity: 0.4; animation: none; } } /* ========================================================================== 3) LAYOUT CONTAINERS (ширина/отступы) ========================================================================== */ /* --- 3a. Desktop --- */ @media (min-width: 1024px){ body .container, body .page-container, body .shop-container, body .products-container, body main{ max-width: 100% !important; width: 100% !important; padding-left: 90px !important; padding-right: 90px !important; margin: 0 auto !important; } body .products-grid, body .product-list, body .grid{ max-width: 1400px !important; margin: 0 auto !important; } } /* --- 3b. Mobile --- */ @media (max-width: 1023px){ body .container, body .page-container, body .shop-container, body .products-container, body main{ max-width: 100% !important; width: 100% !important; padding-left: 12px !important; padding-right: 12px !important; margin: 0 auto !important; } } /* ========================================================================== 4) SECTION TITLES (общий перелив h2) ========================================================================== */ .section-title h2{ background: linear-gradient(90deg, #36c8ff, #144ff3, #16ddf7, #36c8ff); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: productsHueShift 4s linear infinite; text-shadow: 0 0 8px rgba(54, 200, 255, 0.35), 0 0 16px rgba(31, 91, 255, 0.25); } @keyframes productsHueShift{ 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================================== 5) SOCIALS (Discord / YouTube / FunPay) ========================================================================== */ /* --- 5a. Section spacing --- */ .socials-custom{ padding: 60px 0 !important; } /* --- 5b. Card base styles --- */ .socials-list-custom{ gap: 40px !important; } .social-item-custom{ display: flex; justify-content: space-between; align-items: center; background: #0e0e0e; padding: 18px 28px; border-radius: 14px; font-size: 20px; position: relative; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,0.35); transition: 0.25s ease, box-shadow 0.35s ease; } .social-item-custom span.left{ display: flex; gap: 10px; align-items: center; transition: 0.25s ease; } .social-item-custom svg{ transition: 0.25s ease; } /* --- 5c. Interaction states --- */ .social-item-custom:active{ transform: scale(0.96); box-shadow: 0 3px 10px rgba(0,0,0,0.45); } /* --- 5d. Platform-specific: Discord --- */ .discord-custom:hover span.left{ color: #5865F2 !important; transform: scale(1.08); } .discord-custom:hover svg{ transform: scale(1.12); } .discord-custom:hover{ box-shadow: 0 0 18px rgba(88, 101, 242, 0.55), 0 0 35px rgba(88, 101, 242, 0.35); } /* --- 5e. Platform-specific: YouTube --- */ .youtube-custom:hover span.left{ color: #FF0000 !important; transform: scale(1.08); } .youtube-custom:hover svg{ transform: scale(1.12); } .youtube-custom:hover{ box-shadow: 0 0 18px rgba(255, 0, 0, 0.55), 0 0 35px rgba(255, 0, 0, 0.35); } /* --- 5f. Platform-specific: FunPay --- */ .funpay-icon{ width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; font-weight: 800; font-size: 18px; line-height: 1; letter-spacing: 0.5px; color: #ffffff; background: linear-gradient(135deg, #2aa7ff, #2270D7); box-shadow: 0 4px 10px rgba(0,0,0,0.35), 0 0 10px rgba(70,180,255,0.45); transition: 0.25s ease; } .funpay-custom:hover span.left{ color: #2270D7 !important; transform: scale(1.08); } .funpay-custom:hover{ box-shadow: 0 0 18px rgba(70, 180, 255, 0.55), 0 0 35px rgba(80, 220, 255, 0.35); } /* ========================================================================== 6) PRODUCT CARD ========================================================================== */ /* --- 6a. CSS variables --- */ :root { --hover-cyan: 80, 170, 255; --hover-blue: 30, 100, 255; } /* --- 6b. Card base --- */ .product-card { position: relative; overflow: hidden; border-radius: 16px; z-index: 0; transition: transform 0.22s cubic-bezier(.22,1,.36,1), box-shadow 0.22s ease, filter 0.22s ease; will-change: transform, box-shadow; } .product-card > * { position: relative; z-index: 1; } /* --- 6c. Animated border (::before) --- */ .product-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity 0.22s ease; z-index: 3; pointer-events: none; background: linear-gradient( 120deg, rgba(var(--hover-cyan), 0.90), rgba(var(--hover-blue), 0.90), rgba(var(--hover-cyan), 0.90) ); background-size: 320% 320%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .product-card:hover::before { opacity: 1; animation: borderFlowBlue 2.15s ease-in-out infinite; } /* --- 6d. Holo overlay (::after) --- */ .product-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity 0.22s ease; z-index: 0; pointer-events: none; background-image: linear-gradient( 135deg, rgba(var(--hover-cyan), 0.00) 0%, rgba(var(--hover-cyan), 0.10) 30%, rgba(var(--hover-blue), 0.14) 55%, rgba(var(--hover-cyan), 0.08) 78%, rgba(var(--hover-cyan), 0.00) 100% ); mix-blend-mode: screen; } .product-card:hover::after { opacity: 1; animation: holoSweepBlue 2s ease-in-out infinite; } /* --- 6e. Hover & active --- */ .product-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 0 0 0 transparent, 0 20px 50px rgba(0,0,0,0.55), 0 0 30px rgba(var(--hover-cyan), 0.18), 0 0 60px rgba(var(--hover-blue), 0.10); filter: saturate(1.05); } .product-card:active { transform: translateY(1px) scale(0.995); filter: saturate(0.98); } /* --- 6f. Image area --- */ .product-card .card-img-top { position: relative; overflow: hidden; border-top-left-radius: inherit; border-top-right-radius: inherit; } .product-card .card-img-top img { display: block; width: 100%; height: auto; transition: transform .30s ease, filter .30s ease; will-change: transform; } .product-card:hover .card-img-top img { transform: scale(1.06); filter: saturate(1.05) brightness(1.03); } /* --- 6g. Title --- */ .product-card .card-title { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 1.05rem !important; letter-spacing: -0.01em; background: linear-gradient( 90deg, rgba(220, 250, 255, 0.95), rgba(120, 210, 255, 0.95), rgba(220, 250, 255, 0.95) ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: productTitleHueShift 8s ease-in-out infinite; } /* --- 6h. Price --- */ .product-card .price { font-family: 'Syne', sans-serif !important; font-size: 1.25rem !important; font-weight: 700 !important; letter-spacing: -0.02em; color: #e8f6ff; } .product-card .price s { font-family: 'Inter', sans-serif !important; font-size: 0.88rem; font-weight: 400; color: rgba(255,255,255,0.38); margin-left: 6px; letter-spacing: 0; } /* --- 6i. Purchase overlay & button --- */ .product-card .purchase-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform: translateY(27%); z-index: 2; opacity: 0; pointer-events: auto; transition: opacity .28s ease, transform .28s ease; } .product-card:hover .purchase-overlay { opacity: 1; } .product-card .purchase-btn { position: relative; overflow: hidden; width: 68%; max-width: 230px; min-width: 165px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 999px; font-family: 'Syne', sans-serif !important; font-weight: 700; font-size: 13.5px; letter-spacing: .1px; color: rgba(235, 245, 255, 0.95); background: rgba(80, 160, 255, 0.10); border: 1px solid rgba(80, 160, 255, 0.35); box-shadow: 0 4px 14px rgba(0,0,0,0.30), 0 0 14px rgba(80,160,255,0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease; cursor: pointer; } .product-card:hover .purchase-btn:hover { background: rgba(80, 160, 255, 0.18); border-color: rgba(80, 160, 255, 0.60); box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 22px rgba(80,160,255,0.22); transform: translateY(-2px) scale(1.02); } /* --- 6j. Keyframes --- */ @keyframes borderFlowBlue { 0% { background-position: 0% 55%; } 50% { background-position: 100% 35%; } 100% { background-position: 0% 55%; } } @keyframes holoSweepBlue { 0% { background-position: 10% 60%; } 50% { background-position: 95% 35%; } 100% { background-position: 10% 60%; } } @keyframes productTitleHueShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 30px rgba(var(--hover-cyan), 0.18), 0 0 60px rgba(var(--hover-blue), 0.10); } 50% { box-shadow: 0 20px 50px rgba(0,0,0,0.55), 0 0 40px rgba(var(--hover-cyan), 0.26), 0 0 80px rgba(var(--hover-blue), 0.14); } } /* ========================================================================== 7) HERO ========================================================================== */ /* --- 7a. Layout & sizing --- */ .hero-beauty { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: clamp(56px, 9vh, 110px) !important; padding-bottom: clamp(12px, 1.2vh, 24px) !important; min-height: auto !important; height: auto !important; } .hero-beauty.height-full { padding-top: clamp(72px, 11vh, 140px) !important; padding-bottom: clamp(72px, 11vh, 140px) !important; } .hero-beauty .hero-container { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: clamp(20px, 4vw, 56px); justify-items: start; } .hero-beauty .hero-content { max-width: 820px; text-align: left; } .hero-beauty .hero-title { margin-bottom: 12px; line-height: 1.05; font-size: clamp(2.1rem, 4.2vw, 3.4rem); font-weight: 750; letter-spacing: -0.02em; } .hero-beauty .hero-subtitle { margin-bottom: 18px; opacity: 0.9; font-size: clamp(1.05rem, 1.25vw, 1.35rem); line-height: 1.7; letter-spacing: 0.01em; } .hero-beauty .hero-cta { margin-top: 6px; } /* --- 7b. Glow background (::before) --- */ .hero-beauty::before { content: ""; position: absolute; left: -10%; right: -10%; top: -15%; height: 520px; background: radial-gradient(circle at 18% 18%, rgba(54,200,255,0.14), transparent 60%), radial-gradient(circle at 78% 8%, rgba(31,91,255,0.12), transparent 62%), radial-gradient(circle at 55% 30%, rgba(100,255,220,0.10), transparent 65%); -webkit-mask-image: linear-gradient( to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 100% ); mask-image: linear-gradient( to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 55%, rgba(0,0,0,0.25) 75%, rgba(0,0,0,0) 100% ); filter: blur(6px); pointer-events: none; z-index: 0; } .hero-beauty > * { position: relative; z-index: 1; } /* --- 7c. Stats block --- */ .hero-beauty .stats-wrapper { margin-top: 24px; } .hero-beauty .stats { display: flex !important; gap: 0; align-items: center; flex-wrap: wrap; justify-content: flex-start; text-align: left; animation: statsGlow 4.5s ease-in-out infinite; border-top: 2px solid rgba(0, 210, 255, 0.12); padding-top: 20px; } .hero-beauty .stats > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; /* разделитель между блоками */ padding: 0 32px; border-right: 2px solid rgba(0, 210, 255, 0.12); } /* первый без левого паддинга */ .hero-beauty .stats > div:first-child { padding-left: 0; } /* последний без правой линии */ .hero-beauty .stats > div:last-child { border-right: none; } .hero-beauty .stats .value { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 1.55rem; line-height: 1; display: flex; align-items: center; gap: 6px; color: #f2fbff; text-shadow: 0 0 4px rgba(var(--holo-cyan), 0.45), 0 0 10px rgba(var(--holo-blue), 0.25); } .hero-beauty .stats .label { font-family: 'Syne', sans-serif !important; font-size: 0.85rem; font-weight: 400; color: rgba(180, 230, 255, 0.65); text-shadow: none; } .hero-beauty .stats .value svg { display: none !important; } .hero-beauty .stats > div:first-child .value::after { content: " ★"; opacity: 0.9; margin-left: 4px; font-size: 1.1rem; } @keyframes statsGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.06); } } /* --- 7d. Brand glow --- */ .brand-glow { font-size: inherit; font-weight: 800; background: linear-gradient(90deg, #4fd1ff, #40E0D0, #0994f0); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brandFlow 4.5s ease-in-out infinite; } @keyframes brandFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- 7e. No-image variant --- */ .hero-beauty.hero-no-image .hero-container { grid-template-columns: 1fr !important; } .hero-beauty.hero-no-image .hero-content { margin-left: 0 !important; margin-right: auto !important; text-align: left !important; } .hero-beauty.hero-no-image .stats { justify-content: flex-start !important; text-align: left !important; } .hero-beauty.hero-no-image .stats > div { align-items: flex-start !important; min-width: 120px; } /* --- 7f. Mobile overrides --- */ @media (max-width: 991.98px) { .hero-beauty .hero-container { grid-template-columns: 1fr; align-items: flex-start; text-align: left; } .hero-beauty .hero-title { overflow-wrap: anywhere; word-break: break-word; } } /* --- 7g. Side image sizing & positioning --- */ .hero-beauty .hero-image { width: 100%; max-width: 533px; justify-self: end; position: relative; will-change: transform, filter; animation: heroFloat 6.5s ease-in-out infinite; } .hero-beauty .hero-image img { position: relative; z-index: 1; width: 100%; height: auto; display: block; object-fit: contain; border-radius: 18px; transform: none; transform-origin: center; filter: drop-shadow(0 0 6px rgba(0,255,220,0.55)) drop-shadow(0 0 14px rgba(0,190,255,0.35)) drop-shadow(0 0 28px rgba(0,255,220,0.22)); transition: filter 0.4s ease; } .hero-beauty .hero-image:hover img { filter: drop-shadow(0 0 10px rgba(0,255,220,0.75)) drop-shadow(0 0 22px rgba(0,190,255,0.55)) drop-shadow(0 0 40px rgba(0,255,220,0.35)); } /* --- 7h. Neon aura behind image --- */ .hero-beauty .hero-image::before { content: ""; position: absolute; left: 50%; top: 50%; width: 110%; height: 110%; transform: translate(-50%, -50%); border-radius: 999px; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(0,255,220,0.55) 0%, rgba(0,190,255,0.30) 35%, rgba(0,255,220,0.14) 55%, rgba(0,0,0,0) 68% ); filter: blur(13px); opacity: 0.7; mix-blend-mode: screen; animation: auraPulse 6.4s ease-in-out infinite; } /* скрыть на мобиле */ @media (max-width: 991.98px) { .hero-beauty .hero-image { display: none !important; } } @media (prefers-reduced-motion: reduce) { .hero-beauty .hero-image, .hero-beauty .hero-image::before { animation: none !important; } } /* ========================================================================== 17) HERO SIDE IMAGE — ANIMATIONS ========================================================================== */ @keyframes heroFloat { 0% { transform: translateY(0px) rotate(-0.25deg); filter: brightness(1); } 25% { transform: translateY(-14px) rotate(0.6deg); filter: brightness(1.04); } 50% { transform: translateY(-8px) rotate(0.2deg); filter: brightness(1.06); } 75% { transform: translateY(10px) rotate(-0.6deg); filter: brightness(1.02); } 100% { transform: translateY(0px) rotate(-0.25deg); filter: brightness(1); } } @keyframes auraPulse { 0%,100% { filter: blur(18px); opacity: 0.85; transform: translate(-50%, -50%) scale(1); } 33% { filter: blur(22px); opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 66% { filter: blur(16px); opacity: 0.92; transform: translate(-50%, -50%) scale(1.04); } } .hero-beauty .hero-image { cursor: none; transform-style: preserve-3d; } /* Glare-слой поверх изображения */ .hero-image-glare { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 0.2s ease; z-index: 2; } /* Shimmer-полоса при наклоне */ .hero-image-shimmer { position: absolute; inset: 0; border-radius: 18px; pointer-events: none; opacity: 0; background: linear-gradient( 105deg, transparent 30%, rgba(255, 255, 255, 0.06) 50%, transparent 70% ); mix-blend-mode: screen; transition: opacity 0.2s ease; z-index: 2; } /* ========================================================================== 8) HERO / PRODUCTS SPACING HELPERS ========================================================================== */ .component .row.products{ margin-top: 0 !important; padding-top: 0 !important; } .component.container.py-20{ padding-top: clamp(10px, 1.5vh, 20px) !important; padding-bottom: clamp(18px, 3vh, 32px) !important; } .component.container.py-20 + .component .row.products, .component.container.py-20 + .row.products{ margin-top: clamp(-8px, -0.8vh, -16px) !important; } /* ========================================================================== 9) PRODUCTS DIVIDER ========================================================================== */ .products-divider { position: relative; display: flex; align-items: center; gap: 20px; margin-top: 8px !important; margin-bottom: 150px !important; } .products-divider__title { margin: 0; padding: 0 16px; white-space: nowrap; font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: clamp(20px, 2.2vw, 32px); letter-spacing: -0.02em; line-height: 1.2; } .products-divider__our { color: #ffffff; } .products-divider__products { background: linear-gradient(90deg, #4fd1ff 0%, #2a7bff 50%, #4fd1ff 100%); background-size: 200% 100%; animation: productsTextFlow 4s ease-in-out infinite alternate; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* линия — теперь с точками и свечением */ .products-divider__line { flex: 1; position: relative; height: 2px; /* было 1px */ background: linear-gradient( 90deg, transparent 0%, rgba(0, 210, 255, 0.25) 15%, rgba(0, 210, 255, 0.85) 50%, rgba(0, 210, 255, 0.25) 85%, transparent 100% ); box-shadow: 0 0 8px rgba(0, 210, 255, 0.45), 0 0 20px rgba(0, 120, 255, 0.25), 0 0 40px rgba(0, 210, 255, 0.10); } .products-divider__line::before, .products-divider__line::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 7px; /* было 5px */ height: 7px; border-radius: 50%; background: rgba(0, 210, 255, 0.95); box-shadow: 0 0 10px rgba(0, 210, 255, 0.80), 0 0 22px rgba(0, 210, 255, 0.50), 0 0 40px rgba(0, 210, 255, 0.20); animation: dotPulse 2.5s ease-in-out infinite; } .products-divider__line::before { left: 0; } .products-divider__line::after { right: 0; animation-delay: 1.25s; } @keyframes dotPulse { 0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); } 50% { opacity: 1.0; transform: translateY(-50%) scale(1.35); } } @keyframes productsTextFlow { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } /* ========================================================================== 10) SNOW / PARTICLES ========================================================================== */ #snow{ position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } .snowflake{ position: absolute; top: -10px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6); box-shadow: 0 0 8px rgba(180,255,245,0.35); will-change: transform, background-color, opacity; } @keyframes snow-color{ 0% { background-color: rgba(255,255,255,0.55); } 50% { background-color: rgba(120,255,240,0.55); } 100% { background-color: rgba(255,255,255,0.733); } } /* отключение на телефонах */ @media (max-width: 768px), (hover: none) and (pointer: coarse){ #snow{ display: none !important; } } /* ========================================================================== 11) FEEDBACK (marquee + glass cards) ========================================================================== */ /* --- 11a. Container & wrapper --- */ .feedback-container { position: relative; overflow: hidden; width: 100%; } .feedback-wrapper { display: flex; gap: 12px; animation: scrollFeedback 35s linear infinite; width: max-content; } .feedback-wrapper:hover { animation-play-state: paused; } /* --- 11b. Card base --- */ .feedback-card { flex: 0 0 auto; width: 300px; position: relative; overflow: hidden; border-radius: 20px; padding: 2px; background: linear-gradient( 135deg, rgba(0, 210, 255, 0.18) 0%, rgba(30, 80, 180, 0.12) 50%, rgba(0, 210, 255, 0.08) 100% ) !important; border: 1px solid rgba(0, 210, 255, 0.16) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 20px rgba(0, 210, 255, 0.06); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } /* внутренний контейнер */ .feedback-card > * { position: relative; z-index: 2; } /* стеклянный слой */ .feedback-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 0; pointer-events: none; background: radial-gradient(circle at 20% 15%, rgba(0, 210, 255, 0.10), transparent 55%), radial-gradient(circle at 80% 85%, rgba(30, 80, 255, 0.08), transparent 55%), linear-gradient( 160deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.00) 100% ); -webkit-backdrop-filter: blur(12px) saturate(130%); backdrop-filter: blur(12px) saturate(130%); } /* верхний блик */ .feedback-card::after { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.18) 30%, rgba(0, 210, 255, 0.25) 50%, rgba(255,255,255,0.18) 70%, transparent ); z-index: 3; pointer-events: none; } /* hover */ .feedback-card:hover { transform: translateY(-4px) scale(1.01); border-color: rgba(0, 210, 255, 0.30) !important; box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 30px rgba(0, 210, 255, 0.12), 0 0 60px rgba(0, 120, 255, 0.08); } /* --- 11c. Edge fade overlays --- */ .feedback-container::before, .feedback-container::after { content: ""; position: absolute; top: 0; height: 100%; width: 100px; pointer-events: none; z-index: 999; } .feedback-container::before { left: 0; background: linear-gradient(90deg, rgba(2, 11, 14, 0.95) 0%, rgba(2, 11, 14, 0.60) 50%, rgba(2, 11, 14, 0.00) 100% ); } .feedback-container::after { right: 0; background: linear-gradient(270deg, rgba(2, 11, 14, 0.95) 0%, rgba(2, 11, 14, 0.60) 50%, rgba(2, 11, 14, 0.00) 100% ); } @keyframes scrollFeedback { from { transform: translateX(0); } to { transform: translateX(-33.33%); } } /* --- 11d. Типографика --- */ .feedback-card, .feedback-card * { color: rgba(220, 250, 255, 0.92) !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; } .feedback-card p { color: rgba(235, 252, 255, 0.90) !important; font-size: 14px !important; line-height: 1.65 !important; text-shadow: 0 1px 0 rgba(0,0,0,0.35); } .feedback-card small { color: rgba(180, 230, 255, 0.65) !important; font-size: 12px !important; } .feedback-card [class*="star"], .feedback-card .stars, .feedback-card .rating { color: rgba(255, 210, 60, 0.95) !important; text-shadow: 0 0 10px rgba(255, 180, 0, 0.25) !important; } /* --- 11e. Scroll-reveal --- */ .scroll-animate { transition: transform 0.5s cubic-bezier(.22,1,.36,1), opacity 0.5s cubic-bezier(.22,1,.36,1); will-change: transform, opacity; } .scroll-animate.is-hidden { opacity: 0; transform: translateY(30px); pointer-events: none; } .scroll-animate.reveal-up { opacity: 1; transform: translateY(0); pointer-events: auto; } /* --- fade-in зона появления карточек --- */ .feedback-container { -webkit-mask-image: linear-gradient( 90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 4%, rgba(0,0,0,1.0) 10%, rgba(0,0,0,1.0) 90%, rgba(0,0,0,0.6) 96%, rgba(0,0,0,0.0) 100% ); mask-image: linear-gradient( 90deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 4%, rgba(0,0,0,1.0) 10%, rgba(0,0,0,1.0) 90%, rgba(0,0,0,0.6) 96%, rgba(0,0,0,0.0) 100% ); } /* убрать старые ::before / ::after overlay — маска их заменяет */ .feedback-container::before, .feedback-container::after { content: none !important; } /* ========================================================================== 12) NAVBAR ========================================================================== */ /* --- 12a. Base structure & backdrop --- */ .navbar.navbar-expand-lg.component{ position: sticky; top: 0; z-index: 1000; overflow: visible; isolation: isolate; --line-offset: 0px; --line-opacity: 0.58; -webkit-mask-image: none; mask-image: none; background: radial-gradient(120% 140% at 50% 40%, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.52) 40%, rgba(0,0,0,0.18) 75%, rgba(0,0,0,0.00) 100% ), linear-gradient( 180deg, rgba(2, 26, 36, 0.90) 0%, rgba(2, 26, 36, 0.72) 45%, rgba(2, 26, 36, 0.34) 75%, rgba(2, 26, 36, 0.00) 100% ); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); border-bottom: 1px solid rgba(0, 210, 255, 0.10); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ========================================================================== 12b) NAVBAR — декоративные слои (замена) ========================================================================== */ .navbar.navbar-expand-lg.component::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse 60% 120% at 20% 50%, rgba(0, 210, 255, 0.07) 0%, transparent 65% ), radial-gradient(ellipse 50% 100% at 80% 40%, rgba(0, 140, 255, 0.05) 0%, transparent 60% ); opacity: 1; animation: navGlow 10s ease-in-out infinite alternate; will-change: opacity; } @keyframes navGlow { 0% { opacity: 0.7; } 50% { opacity: 1.0; } 100% { opacity: 0.7; } } .navbar.navbar-expand-lg.component::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: linear-gradient(rgba(0, 210, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 255, 0.022) 1px, transparent 1px); background-size: 52px 52px; -webkit-mask-image: linear-gradient( 180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.0) 100% ); mask-image: linear-gradient( 180deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.0) 100% ); opacity: 0.6; } /* --- 12c. UI layering (z-index) --- */ .navbar.navbar-expand-lg.component > .container, .navbar.navbar-expand-lg.component .navbar-collapse, .navbar.navbar-expand-lg.component .navbar-nav, .navbar.navbar-expand-lg.component .navbar-brand, .navbar.navbar-expand-lg.component .navbar-toggler, .navbar.navbar-expand-lg.component .btn, .navbar.navbar-expand-lg.component .nav-link, .navbar.navbar-expand-lg.component .collapse, .navbar.navbar-expand-lg.component .dropdown, .navbar.navbar-expand-lg.component .dropdown-menu{ position: relative; z-index: 3; } /* --- 12d. Links, buttons, brand --- */ .navbar.navbar-expand-lg.component .navbar-brand span, .navbar.navbar-expand-lg.component .nav-link, .navbar.navbar-expand-lg.component .btn{ color: rgba(220, 250, 255, 0.92); } .navbar.navbar-expand-lg.component .nav-link, .navbar.navbar-expand-lg.component .btn, .navbar.navbar-expand-lg.component .navbar-brand{ border-radius: 12px; padding: 8px 12px; background: rgba(2, 26, 36, 0.34); -webkit-backdrop-filter: blur(6px) saturate(110%); backdrop-filter: blur(6px) saturate(110%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .navbar.navbar-expand-lg.component .nav-link{ transition: opacity 220ms ease, text-shadow 220ms ease, transform 220ms ease, background 220ms ease; } .navbar.navbar-expand-lg.component .nav-link:hover{ text-shadow: 0 0 16px rgba(0, 210, 255, 0.24); transform: translateY(-1px); background: rgba(2, 26, 36, 0.42); } .navbar.navbar-expand-lg.component .btn.btn-outline-primary{ background: rgba(0, 210, 255, 0.04); border: 1px solid rgba(0, 210, 255, 0.16); color: rgba(220, 250, 255, 0.92); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease; } .navbar.navbar-expand-lg.component .btn.btn-outline-primary:hover{ background: rgba(0, 210, 255, 0.08); border-color: rgba(0, 210, 255, 0.28); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.30), 0 0 22px rgba(0, 210, 255, 0.10); transform: translateY(-1px); } /* --- 12e. Dropdown --- */ .navbar.navbar-expand-lg.component .dropdown-menu{ z-index: 9999; background: rgba(2, 26, 36, 0.92); border: 1px solid rgba(0, 210, 255, 0.14); box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04); -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); } .navbar.navbar-expand-lg.component .dropdown-item{ color: rgba(220, 250, 255, 0.92); } .navbar.navbar-expand-lg.component .dropdown-item:hover, .navbar.navbar-expand-lg.component .dropdown-item:focus{ background: rgba(0, 210, 255, 0.08); color: rgba(235, 252, 255, 0.98); } /* --- 12f. Mobile overrides --- */ @media (max-width: 768px){ .navbar.navbar-expand-lg.component{ -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%); } } /* ========================================================================== NAVBAR — BRAND BUTTON (fallenhueta) Syne 800, без рамки, градиентный текст + мягкое свечение ========================================================================== */ .navbar.navbar-expand-lg.component .navbar-brand { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.03em; /* полный сброс фона, рамки, теней от секции 12d */ background: none !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 6px 8px !important; color: transparent !important; transition: transform 200ms ease, filter 200ms ease !important; } /* градиент на span внутри бренда */ .navbar.navbar-expand-lg.component .navbar-brand span { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; letter-spacing: -0.03em; background: linear-gradient( 90deg, rgba(220, 250, 255, 0.96) 0%, rgba(80, 210, 255, 0.96) 45%, rgba(220, 250, 255, 0.96) 100% ) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: brandNameFlow 6s ease-in-out infinite; border: none !important; box-shadow: none !important; background-color: transparent !important; padding: 0 !important; } .navbar.navbar-expand-lg.component .navbar-brand:hover span, .navbar.navbar-expand-lg.component .navbar-brand:hover { transform: translateY(-1px); filter: brightness(1.12); text-shadow: 0 0 18px rgba(0, 210, 255, 0.30), 0 0 40px rgba(0, 140, 255, 0.16); } @keyframes brandNameFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ========================================================================== NAVBAR — КНОПКИ И ССЫЛКИ (общий апгрейд) ========================================================================== */ /* --- Base reset — единый glass-стиль для всех кнопок navbar --- */ .navbar.navbar-expand-lg.component .nav-link, .navbar.navbar-expand-lg.component .btn { position: relative; overflow: hidden; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.01em; border-radius: 12px !important; padding: 8px 14px !important; color: rgba(210, 245, 255, 0.88) !important; background: rgba(2, 26, 36, 0.28) !important; border: 1px solid rgba(0, 210, 255, 0.10) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.20) !important; transition: transform 200ms cubic-bezier(.22, 1, .36, 1), background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease, text-shadow 200ms ease !important; } /* --- Верхний блик на кнопках (псевдо-элемент) --- */ .navbar.navbar-expand-lg.component .btn::before, .navbar.navbar-expand-lg.component .nav-link::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.10) 35%, rgba(0, 210, 255, 0.16) 50%, rgba(255, 255, 255, 0.10) 65%, transparent ); pointer-events: none; z-index: 1; border: none !important; box-shadow: none !important; padding: 0 !important; background-color: transparent !important; opacity: 1; border-radius: 0 !important; } /* --- Hover --- */ .navbar.navbar-expand-lg.component .nav-link:hover, .navbar.navbar-expand-lg.component .btn:hover { transform: translateY(-2px) !important; color: rgba(235, 252, 255, 0.98) !important; background: rgba(2, 32, 44, 0.46) !important; border-color: rgba(0, 210, 255, 0.22) !important; text-shadow: 0 0 14px rgba(0, 210, 255, 0.20) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 20px rgba(0, 0, 0, 0.28), 0 0 18px rgba(0, 210, 255, 0.10) !important; } /* --- Active / press --- */ .navbar.navbar-expand-lg.component .nav-link:active, .navbar.navbar-expand-lg.component .btn:active { transform: translateY(0) scale(0.97) !important; transition-duration: 80ms !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 1px 4px rgba(0, 0, 0, 0.30) !important; } /* --- Кнопка btn-outline-primary (Cart, Login, My Account) --- */ .navbar.navbar-expand-lg.component .btn.btn-outline-primary { background: rgba(0, 210, 255, 0.06) !important; border: 1px solid rgba(0, 210, 255, 0.18) !important; color: rgba(210, 248, 255, 0.92) !important; } .navbar.navbar-expand-lg.component .btn.btn-outline-primary:hover { background: rgba(0, 210, 255, 0.12) !important; border-color: rgba(0, 210, 255, 0.36) !important; color: rgba(235, 252, 255, 0.98) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 20px rgba(0, 0, 0, 0.28), 0 0 22px rgba(0, 210, 255, 0.16), 0 0 50px rgba(0, 140, 255, 0.08) !important; } /* --- Иконка корзины --- */ .navbar.navbar-expand-lg.component .btn svg { color: rgba(200, 240, 255, 0.88) !important; transition: transform 200ms ease, color 200ms ease; } .navbar.navbar-expand-lg.component .btn:hover svg { color: rgba(235, 252, 255, 0.98) !important; transform: scale(1.10); } /* --- Счётчик корзины (badge) --- */ .navbar.navbar-expand-lg.component .count { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: static !important; background: rgba(0, 210, 255, 0.82) !important; color: rgba(2, 14, 20, 0.96) !important; font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 10px !important; line-height: 1 !important; border-radius: 999px !important; padding: 2px 6px !important; min-width: 18px !important; height: 18px !important; box-shadow: 0 0 8px rgba(0, 210, 255, 0.40) !important; vertical-align: middle !important; transform: none !important; top: auto !important; right: auto !important; } @keyframes cartBadgePop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } /* --- Toggler (бургер) на мобиле --- */ .navbar.navbar-expand-lg.component .navbar-toggler { background: rgba(2, 26, 36, 0.38) !important; border: 1px solid rgba(0, 210, 255, 0.14) !important; border-radius: 10px !important; padding: 6px 10px !important; transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease; } .navbar.navbar-expand-lg.component .navbar-toggler:hover { background: rgba(2, 32, 44, 0.52) !important; border-color: rgba(0, 210, 255, 0.28) !important; box-shadow: 0 0 14px rgba(0, 210, 255, 0.12) !important; } .navbar.navbar-expand-lg.component .navbar-toggler-icon { filter: brightness(0) invert(1) opacity(0.80); transition: opacity 200ms ease; } .navbar.navbar-expand-lg.component .navbar-toggler:hover .navbar-toggler-icon { opacity: 1; } /* --- Mobile collapse --- */ @media (max-width: 991.98px) { .navbar.navbar-expand-lg.component .navbar-collapse { background: rgba(2, 22, 32, 0.94); border: 1px solid rgba(0, 210, 255, 0.10); border-radius: 14px; margin-top: 8px; padding: 10px 12px; -webkit-backdrop-filter: blur(16px) saturate(130%); backdrop-filter: blur(16px) saturate(130%); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .navbar.navbar-expand-lg.component .navbar-nav { gap: 6px !important; } .navbar.navbar-expand-lg.component .nav-link, .navbar.navbar-expand-lg.component .btn { width: 100%; justify-content: flex-start; } } /* ========================================================================== 13) HERO — CURSOR RADIAL GLOW (misc) ========================================================================== */ .hero::before{ content:''; position:absolute; inset:0; background: radial-gradient( circle at var(--x) var(--y), rgba(0,170,255,.18), transparent 40% ); } /* ========================================================================== 14) HERO TYPEWRITER + GLITCH + SCANLINES ========================================================================== */ .tw { display: inline-block; white-space: nowrap; } .tw-caret { display: inline-block; margin-left: 0.06em; width: 2px; height: 0.85em; vertical-align: -0.05em; border-radius: 2px; background: linear-gradient(180deg, #4fd1ff, #0994f0); opacity: 1; animation: twBlink 1.1s ease-in-out infinite; box-shadow: 0 0 8px rgba(79,209,255,.70), 0 0 18px rgba(79,209,255,.35); } @keyframes twBlink { 0%,45% { opacity: 1; } 55%,100%{ opacity: 0; } } .tw-char { display: inline-block; opacity: 0; transform: translateY(5px); transition: opacity .16s ease, transform .16s ease; } .tw-char.visible { opacity: 1; transform: translateY(0); } .brand-glow .tw-char.visible { color: #4fd1ff; text-shadow: 0 0 10px rgba(79,209,255,.65), 0 0 26px rgba(9,148,240,.40); } /* --- Обёртка вокруг brand-слова --- */ .brand-wrap { position: relative; display: inline-block; } /* --- Scanlines — только на слове --- */ .word-scanlines { position: absolute; inset: -2px -1px; pointer-events: none; z-index: 5; opacity: 0; border-radius: 2px; background: repeating-linear-gradient( 0deg, rgba(0, 210, 255, 0.08) 0px, rgba(0, 210, 255, 0.08) 1px, transparent 1px, transparent 3px ); } .word-scanlines.active { animation: wordScanlinesAnim 0.75s ease-out forwards; } @keyframes wordScanlinesAnim { 0% { opacity: 0.90; } 15% { opacity: 0.75; } 30% { opacity: 0.92; } 45% { opacity: 0.55; } 60% { opacity: 0.30; } 80% { opacity: 0.12; } 100% { opacity: 0; } } /* --- CRT Tear — только на слове --- */ .word-tear { position: absolute; left: -2px; right: -2px; height: 2px; top: 30%; pointer-events: none; z-index: 6; opacity: 0; background: rgba(0, 255, 234, 0.70); box-shadow: 0 0 6px rgba(0, 255, 234, 0.90), 0 0 14px rgba(0, 210, 255, 0.50); mix-blend-mode: screen; border-radius: 1px; } .word-tear.active { animation: wordTearMove 0.75s ease-out forwards; } @keyframes wordTearMove { 0% { opacity: 0.95; top: 10%; } 8% { opacity: 0.80; top: 65%; } 16% { opacity: 0.95; top: 25%; } 24% { opacity: 0.60; top: 78%; } 32% { opacity: 0.85; top: 42%; } 42% { opacity: 0.50; top: 15%; } 52% { opacity: 0.30; top: 58%; } 65% { opacity: 0.15; top: 82%; } 100% { opacity: 0; top: 95%; } } /* --- Глитч keyframe --- */ @keyframes cpGlitch { 0% { transform:translateX(-14px) skewX(40deg) scaleY(1.10) scaleX(.92); opacity:.2; color:#ff003c; text-shadow:12px 0 #0ff,-12px 0 #f0f, 0 0 30px #ff003c; filter:blur(5px) brightness(2.5) hue-rotate(180deg); } 4% { transform:translateX(16px) skewX(-45deg) scaleY(.88) scaleX(1.08);opacity:.6; color:#ffe600; text-shadow:-10px 0 #f0f, 10px 0 #0ff, 0 0 40px #ffe600; filter:blur(2px) brightness(3) hue-rotate(90deg); } 7% { transform:translateX(-10px) skewX(30deg) scaleY(1.12) scaleX(.95); opacity:.35; color:#ff003c; text-shadow: 8px 0 #0ff, -8px 0 #f0f; filter:blur(4px) brightness(2); } 10% { transform:translateX(12px) skewX(-35deg) scaleY(.90) scaleX(1.05);opacity:.75; color:#00ffea; text-shadow:-9px 0 #f0f, 9px 0 #0ff, 0 0 50px #00ffea; filter:blur(1px) brightness(3.5); } 13% { transform:translateX(-16px) skewX(50deg) scaleY(1.15) scaleX(.88); opacity:.25; color:#ff003c; text-shadow:14px 0 #0ff,-14px 0 #f0f; filter:blur(6px) brightness(2); } 16% { transform:translateX(8px) skewX(-25deg) scaleY(.92) scaleX(1.06);opacity:.9; color:#fff; text-shadow:-7px 0 #f0f, 7px 0 #0ff, 0 0 60px #fff; filter:blur(0) brightness(4); } 19% { transform:translateX(-8px) skewX(20deg) scaleY(1.08) scaleX(.94); opacity:.45; color:#ff003c; text-shadow: 6px 0 #0ff, -6px 0 #f0f; filter:blur(3px); } 22% { transform:translateX(10px) skewX(-18deg) scaleY(.95); opacity:.8; color:#00ffea; text-shadow:-5px 0 #f0f, 5px 0 #0ff, 0 0 35px #00ffea; filter:blur(0) brightness(2.5); } 26% { transform:translateX(-6px) skewX(14deg) scaleY(1.05); opacity:.55; color:#ffe600; text-shadow: 4px 0 #0ff, 0 0 20px #ffe600; filter:blur(2px); } 30% { transform:translateX(7px) skewX(-10deg) scaleY(.97); opacity:.95; color:#fff; text-shadow:-4px 0 #f0f, 4px 0 #0ff, 0 0 20px #fff; filter:blur(0) brightness(2); } 35% { transform:translateX(-4px) skewX(7deg); opacity:.65; color:#ff003c; text-shadow: 3px 0 #0ff; filter:blur(1px); } 40% { transform:translateX(5px) skewX(-5deg); opacity:.85; color:#00ffea; text-shadow:-3px 0 #f0f, 3px 0 #0ff; filter:blur(0); } 46% { transform:translateX(-3px) skewX(3deg); opacity:.9; color:#4fd1ff; text-shadow: 0 0 24px rgba(79,209,255,1), 5px 0 #f0f,-5px 0 #0ff; filter:blur(0); } 52% { transform:translateX(2px) skewX(-2deg); opacity:1; color:#4fd1ff; text-shadow: 0 0 20px rgba(79,209,255,.95); } 60% { transform:translateX(-2px); opacity:1; color:#4fd1ff; text-shadow: 0 0 16px rgba(79,209,255,.8); } 70% { transform:translateX(1px); opacity:1; color:#4fd1ff; text-shadow: 0 0 14px rgba(79,209,255,.7); } 82% { transform:translateX(-1px); opacity:1; color:#4fd1ff; text-shadow: 0 0 12px rgba(79,209,255,.65); } 100% { transform:translateX(0) skewX(0) scaleY(1) scaleX(1); opacity:1; color:#4fd1ff; text-shadow: 0 0 10px rgba(79,209,255,.65), 0 0 26px rgba(9,148,240,.40); filter:blur(0) brightness(1) hue-rotate(0deg); } } .brand-glow .tw-char.glitch { animation: cpGlitch .75s ease-out forwards; will-change: transform, filter, color; } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .tw-char { opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; } .brand-glow .tw-char.glitch { animation: none; } .tw-caret { animation: none; } .word-scanlines, .word-tear { display: none !important; } } @media (max-width: 991.98px) { .hero-beauty .tw { white-space: normal !important; } .hero-beauty .hero-title { overflow-wrap: anywhere; word-break: break-word; } } /* ========================================================================== 15) SOCIALS SECTION ========================================================================== */ /* --- 15a. Section background --- */ .socials.component.socials-custom { position: relative; isolation: isolate; overflow: hidden !important; padding: 46px 0 !important; padding-bottom: calc(46px + var(--footerTail)) !important; margin-bottom: calc(-1 * var(--footerTail)) !important; border-top: 1px solid rgba(0, 210, 255, 0.08) !important; border-bottom: 0 !important; background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0, 210, 255, 0.07) 0%, transparent 65% ), radial-gradient(ellipse 60% 80% at 20% 100%, rgba(0, 100, 200, 0.06) 0%, transparent 60% ), rgba(2, 14, 20, 0.72) !important; -webkit-backdrop-filter: blur(20px) saturate(130%) !important; backdrop-filter: blur(20px) saturate(130%) !important; box-shadow: 0 -1px 0 rgba(0, 210, 255, 0.08), inset 0 1px 0 rgba(255,255,255,0.03) !important; } /* убрать декоративные линии */ .socials.component.socials-custom::before, .socials.component.socials-custom::after { content: none !important; } /* --- 15b. Заголовок секции --- */ .socials.component.socials-custom .section-title h2 { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: clamp(1.6rem, 2.5vw, 2.4rem) !important; letter-spacing: -0.03em !important; background: linear-gradient( 90deg, rgba(220, 250, 255, 0.95) 0%, rgba(100, 210, 255, 0.95) 40%, rgba(220, 250, 255, 0.95) 100% ) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: socialsTitle 6s ease-in-out infinite !important; text-shadow: none !important; } @keyframes socialsTitle { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* --- 15c. Content layering --- */ .socials.component.socials-custom > .container, .socials.component.socials-custom .section-title, .socials.component.socials-custom .section-subtitle, .socials.component.socials-custom .social-item-custom { position: relative; z-index: 3; } .socials.component.socials-custom .section-subtitle p { color: rgba(180, 230, 255, 0.75) !important; opacity: 1 !important; } /* --- 15d. Карточки платформ --- */ .socials-custom .social-item-custom { position: relative; overflow: hidden; background: rgba(2, 20, 30, 0.45) !important; border: 1px solid rgba(0, 210, 255, 0.12) !important; border-radius: 16px !important; color: rgba(220, 250, 255, 0.92) !important; -webkit-backdrop-filter: blur(16px) saturate(130%) !important; backdrop-filter: blur(16px) saturate(130%) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.05) !important; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; } /* верхний блик */ .socials-custom .social-item-custom::before { content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient( 90deg, transparent, rgba(255,255,255,0.14) 30%, rgba(0, 210, 255, 0.20) 50%, rgba(255,255,255,0.14) 70%, transparent ); pointer-events: none; z-index: 1; } .socials-custom .social-item-custom:hover { transform: translateY(-2px) !important; border-color: rgba(0, 210, 255, 0.25) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.40), 0 0 22px rgba(0, 210, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.06) !important; } /* --- 15e. Platform hover accents --- */ .discord-custom:hover { border-color: rgba(88, 101, 242, 0.35) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.40), 0 0 24px rgba(88, 101, 242, 0.18) !important; } .discord-custom:hover span.left { color: #7289da !important; } .youtube-custom:hover { border-color: rgba(255, 0, 0, 0.30) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.40), 0 0 24px rgba(255, 0, 0, 0.14) !important; } .youtube-custom:hover span.left { color: #FF4444 !important; } .funpay-custom:hover { border-color: rgba(70, 180, 255, 0.30) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.40), 0 0 24px rgba(70, 180, 255, 0.16) !important; } .funpay-custom:hover span.left { color: #4ab4ff !important; } .socials-custom .social-item-custom svg { color: rgba(220, 250, 255, 0.85) !important; } /* ========================================================================== 16) PRODUCT CARD — BACKGROUND ========================================================================== */ a.product-card.card { background: linear-gradient( 160deg, rgba(2, 22, 32, 0.92) 0%, rgba(2, 18, 28, 0.88) 50%, rgba(2, 14, 22, 0.85) 100% ) !important; border: 1px solid rgba(255,255,255,0.05) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.04); } /* ========================================================================== 18) DISCORD POPUP ========================================================================== */ /* --- 18a. Overlay --- */ .sa-discord-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 18px; z-index: 20000; background: rgba(0,0,0,0.62); opacity: 0; transition: opacity 320ms ease, backdrop-filter 320ms ease; -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); } .sa-discord-overlay.sa-show { opacity: 1; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } /* --- 18b. Modal card --- */ .sa-discord-modal { width: min(500px, 100%); padding: 24px 22px 20px; border-radius: 12px; position: relative; isolation: isolate; overflow: hidden; z-index: 0; background: radial-gradient(120% 140% at 50% 35%, rgba(1,22,30,0.94) 0%, rgba(1,22,30,0.82) 46%, rgba(1,22,30,0.70) 78%, rgba(1,22,30,0.60) 100% ); border: 1px solid rgba(0,220,240,0.16); box-shadow: 0 22px 70px rgba(0,0,0,0.62), 0 0 0 1px rgba(0,220,240,0.09) inset, 0 0 24px rgba(0,220,240,0.18), 0 0 50px rgba(30,140,255,0.10); transform: translateY(12px) scale(0.985); opacity: 0; transition: transform 340ms cubic-bezier(.22,1,.36,1), opacity 340ms ease; } .sa-discord-overlay.sa-show .sa-discord-modal { transform: translateY(0) scale(1); opacity: 1; animation: saPopupEnter 520ms cubic-bezier(.22,1.25,.36,1); } /* --- 18c. Animated border (::before) --- */ .sa-discord-modal::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; opacity: 0.92; z-index: 3; pointer-events: none; background: linear-gradient( 120deg, rgba(0,220,240,0.92), rgba(30,140,255,0.92), rgba(0,230,245,0.92), rgba(0,220,240,0.92) ); background-size: 320% 320%; animation: borderFlow 2.15s ease-in-out infinite; animation-delay: -0.55s; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } /* --- 18d. Holo sweep (::after) --- */ .sa-discord-modal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0.52; z-index: 1; pointer-events: none; background-image: linear-gradient(135deg, rgba(0,220,240,0.00) 0%, rgba(0,220,240,0.13) 30%, rgba(30,140,255,0.15) 55%, rgba(0,220,240,0.09) 78%, rgba(0,220,240,0.00) 100% ); background-size: 260% 260%; background-position: 10% 60%; animation: holoSweep 1.95s ease-in-out infinite; animation-delay: -0.37s; mix-blend-mode: screen; } /* content above layers */ .sa-discord-modal > * { position: relative; z-index: 4; } /* top edge light */ .sa-discord-edge-light { position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(0,180,200,0.12) 25%, rgba(0,210,230,0.22) 50%, rgba(0,180,200,0.12) 75%, transparent ); z-index: 5; pointer-events: none; } /* --- 18e. Title --- */ .sa-discord-title { margin: 0 0 10px; font-family: 'Syne', sans-serif !important; font-size: 20px; font-weight: 800; letter-spacing: -0.025em; background: linear-gradient(90deg, rgba(0,230,250,0.97), rgba(50,160,255,0.90), rgba(0,230,250,0.97) ); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: saTitleFlow 4.5s ease-in-out infinite; } @keyframes saTitleFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- 18f. Divider --- */ .sa-discord-divider { height: 1px; margin: 0 0 14px; background: linear-gradient(90deg, transparent, rgba(0,220,240,0.20) 25%, rgba(0,220,240,0.32) 50%, rgba(0,220,240,0.20) 75%, transparent ); } /* --- 18g. Body text --- */ .sa-discord-text { margin: 0 0 15px; font-size: 14px; line-height: 1.65; color: rgba(210,250,255,0.82); text-shadow: 0 1px 0 rgba(0,0,0,0.40); -webkit-font-smoothing: antialiased; } /* payment tags */ .sa-pay-tag { display: inline; background: rgba(0,200,230,0.11); border: 1px solid rgba(0,200,230,0.30); border-radius: 6px; padding: 1px 6px; font-size: 12.5px; font-weight: 700; color: rgba(0,220,240,0.96); white-space: nowrap; text-shadow: 0 0 10px rgba(0,220,240,0.38); } /* --- 18h. Perks grid --- */ .sa-discord-perks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; } .sa-perk { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(1,22,30,0.38); border: 1px solid rgba(0,220,240,0.11); font-size: 12px; font-weight: 500; color: rgba(180,238,250,0.80); transition: background .2s, border-color .2s; } .sa-perk:hover { background: rgba(0,220,240,0.06); border-color: rgba(0,220,240,0.20); } .sa-perk-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: rgba(0,230,248,0.95); box-shadow: 0 0 6px rgba(0,230,248,0.58); animation: saDotPulse 2.2s ease-in-out infinite; } .sa-perk-dot.alt { background: rgba(50,160,255,0.88); box-shadow: 0 0 5px rgba(50,160,255,0.46); } .sa-perk:nth-child(2) .sa-perk-dot { animation-delay: -.55s; } .sa-perk:nth-child(3) .sa-perk-dot { animation-delay: -1.1s; } .sa-perk:nth-child(4) .sa-perk-dot { animation-delay: -1.65s; } @keyframes saDotPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:.3; transform:scale(.55); } } /* --- 18i. Actions --- */ .sa-discord-actions { display: flex; gap: 10px; } .sa-discord-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; border-radius: 12px; padding: 12px 18px; font-family: 'Inter', sans-serif !important; font-weight: 700; font-size: 14px; letter-spacing: .1px; cursor: pointer; user-select: none; position: relative; overflow: hidden; z-index: 0; color: rgba(225,252,255,0.96); background: rgba(1,22,30,0.38); border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 22px rgba(0,0,0,0.30); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, text-shadow 180ms ease; } .sa-discord-btn > * { position: relative; z-index: 2; } .sa-discord-btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity 180ms ease; pointer-events: none; z-index: 1; background: linear-gradient(120deg, rgba(0,220,240,0.88), rgba(30,140,255,0.88), rgba(0,220,240,0.88) ); background-size: 320% 320%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .sa-discord-btn:hover::before { opacity: 1; animation: borderFlow 2.15s ease-in-out infinite; } .sa-discord-btn:hover { transform: translateY(-2px); } .sa-discord-btn:active { transform: translateY(0) scale(0.985); } /* Ghost (Decline) */ .sa-discord-btn-ghost { background: rgba(1,22,30,0.36); border: 1px solid rgba(0,220,240,0.15); color: rgba(180,238,250,0.72); } .sa-discord-btn-ghost:hover { background: rgba(1,22,30,0.44); border-color: rgba(0,220,240,0.28); color: rgba(215,250,255,0.90); text-shadow: 0 0 16px rgba(0,220,240,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 22px rgba(0,0,0,0.30), 0 0 22px rgba(0,220,240,0.11), 0 0 44px rgba(0,220,240,0.06); } /* Primary (Join) */ .sa-discord-btn-primary { background: rgba(0,205,230,0.11); border: 1px solid rgba(0,205,230,0.34); animation: saJoinPulse 2.8s ease-in-out infinite; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.32), 0 0 22px rgba(0,205,230,0.16); } .sa-discord-btn-primary:hover { background: rgba(0,205,230,0.18); border-color: rgba(0,205,230,0.52); text-shadow: 0 0 16px rgba(0,220,240,0.32); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 12px 28px rgba(0,0,0,0.34), 0 0 32px rgba(0,205,230,0.26); } @keyframes saJoinPulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.32), 0 0 22px rgba(0,205,230,0.18); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 22px rgba(0,0,0,0.32), 0 0 40px rgba(0,205,230,0.34); } } /* --- 18j. Note --- */ .sa-discord-note { margin-top: 10px; font-size: 11.5px; color: rgba(110,185,205,0.38); text-align: center; letter-spacing: .02em; } /* --- 18k. Entry animation --- */ @keyframes saPopupEnter { 0% { transform: translateY(24px) scale(0.96); opacity: 0; } 60% { transform: translateY(-4px) scale(1.01); } 100% { transform: translateY(0) scale(1); opacity: 1; } } /* --- 18l. Keyframes --- */ @keyframes borderFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes holoSweep { 0%,100% { background-position: 10% 60%; } 50% { background-position: 90% 40%; } } /* --- 18m. Mobile overrides --- */ @media (max-width: 520px) { .sa-discord-modal { padding: 20px 16px 16px; } .sa-discord-perks { grid-template-columns: 1fr; } .sa-discord-actions { flex-direction: column; } } @media (max-width: 768px), (hover: none) and (pointer: coarse) { .sa-discord-overlay { display: none !important; } } /* ========================================================================== 19) PRODUCT CARD IMAGE — SELLAUTH FIX ========================================================================== */ a.product-card.card .card-img-top{ background: transparent !important; line-height: 0 !important; overflow: hidden; } a.product-card.card .card-img-top img{ width: 100% !important; height: 100% !important; object-fit: scale-down !important; aspect-ratio: auto !important; display: block !important; transform: scale(1.03); transform-origin: center; transition: transform .28s ease, filter .28s ease; } a.product-card.card:hover .card-img-top img{ transform: scale(1.08); } a.product-card.card .card-img-top{ line-height: 0 !important; } /* вернуть нормальную типографику для оверлея */ a.product-card.card .purchase-overlay, a.product-card.card .purchase-btn{ line-height: normal !important; } a.product-card.card .purchase-btn{ line-height: 1.2 !important; } /* ========================================================================== 20) SCROLL REVEAL (product card wrappers) ========================================================================== */ .col-12.col-md-6.col-lg-4.col-xl-3.mb-4.sa-reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; will-change: opacity, transform; } .col-12.col-md-6.col-lg-4.col-xl-3.mb-4.sa-reveal.reveal-in { opacity: 1; transform: translateY(0); } .col-12.col-md-6.col-lg-4.col-xl-3.mb-4.sa-reveal.reveal-out { opacity: 0; transform: translateY(18px); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .col-12.col-md-6.col-lg-4.col-xl-3.mb-4.sa-reveal, .col-12.col-md-6.col-lg-4.col-xl-3.mb-4.sa-reveal.reveal-out { opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; } } /* ========================================================================== 21) FOOTER ========================================================================== */ /* --- 21a. Seamless background with Socials --- */ :root{ --footerTail: 150px; } .socials.component.socials-custom{ padding-bottom: calc(46px + var(--footerTail)) !important; margin-bottom: calc(-1 * var(--footerTail)) !important; border-bottom: 0 !important; } /* --- 21b. Footer container (no own background) --- */ footer.footer.component{ position: relative; isolation: isolate; overflow: visible; background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-top: 0 !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 22px !important; } footer.footer.component::before, footer.footer.component::after{ content: none !important; } footer.footer.component > *{ position: relative; z-index: 5; } /* --- 21c. Layout: centered --- */ footer.footer.component .container, footer.footer.component .container-fluid{ display: flex; justify-content: center; } footer.footer.component .row.py-5{ padding-top: 16px !important; padding-bottom: 0 !important; width: 100%; justify-content: center !important; align-items: center; text-align: center; row-gap: 10px; column-gap: 14px; } footer.footer.component .row.py-5 > [class*="col-"]{ flex: 0 1 auto !important; width: auto !important; max-width: none !important; } /* --- 21d. Heading & nav buttons --- */ footer.footer.component h5{ margin: 0 0 10px 0 !important; font-size: 18px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; text-align: center; color: rgba(220, 250, 255, 0.92); text-shadow: 0 0 14px rgba(0, 210, 255, 0.14); } footer.footer.component .nav.flex-column{ display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center !important; align-items: center; gap: 10px !important; margin: 0 !important; padding: 0 !important; } /* --- 21e. Mobile overrides --- */ @media (max-width: 768px){ footer.footer.component .row.py-5{ padding-top: 14px !important; } footer.footer.component h5{ font-size: 16px; margin-bottom: 10px !important; } } /* full-center override */ footer.footer.component .row.py-5{ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } footer.footer.component .row.py-5 > [class*="col-"]{ width: 100% !important; max-width: 900px; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; } footer.footer.component .text-end, footer.footer.component .text-md-end, footer.footer.component .justify-content-end, footer.footer.component .justify-content-md-end{ text-align: center !important; justify-content: center !important; } /* ========================================================================== 22) LEGAL PAGES (bg-gray glass block) ========================================================================== */ .bg-gray{ background: rgba(2, 26, 36, 0.34) !important; border: 1px solid rgba(0, 210, 255, 0.10) !important; -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); box-shadow: 0 12px 34px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04) !important; color: rgba(220, 250, 255, 0.92) !important; } .bg-gray.editor, .bg-gray.editor *{ color: rgba(220, 250, 255, 0.92) !important; } .bg-gray.editor a{ color: rgba(120, 210, 255, 0.95) !important; text-decoration: none; border-bottom: 1px solid rgba(120, 210, 255, 0.30); } .bg-gray.editor a:hover{ border-bottom-color: rgba(120, 210, 255, 0.60); text-shadow: 0 0 14px rgba(0, 210, 255, 0.18); } /* ========================================================================== 23) FIX: REVIEWS PAGE — testimonials grid Исправляет наезд карточек друг на друга ========================================================================== */ /* --- Сетка --- */ .testimonials.row { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; align-items: start !important; } /* --- Колонки: сброс Bootstrap float/flex артефактов --- */ .testimonials.row > [class*="col-"] { position: relative !important; overflow: hidden !important; float: none !important; /* сброс Bootstrap col паддингов */ padding: 18px 20px !important; margin: 0 !important; width: auto !important; max-width: none !important; flex: none !important; /* glass стиль */ border-radius: 18px !important; background: rgba(2, 26, 36, 0.42) !important; border: 1px solid rgba(0, 210, 255, 0.14) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: 0 12px 34px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.04) !important; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important; /* минимальная высота чтобы карточки не схлопывались */ min-height: 120px; } /* --- Hover --- */ .testimonials.row > [class*="col-"]:hover { transform: translateY(-3px) !important; border-color: rgba(0, 210, 255, 0.26) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.46), 0 0 24px rgba(0, 210, 255, 0.12), inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* --- Декоративные слои — убеждаемся что не вылезают за карточку --- */ .testimonials.row > [class*="col-"]::before, .testimonials.row > [class*="col-"]::after { pointer-events: none !important; border-radius: inherit !important; } .testimonials.row > [class*="col-"]::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: radial-gradient(circle at 18% 20%, rgba(0,210,255,0.10), transparent 55%), radial-gradient(circle at 85% 10%, rgba(60,120,255,0.08), transparent 58%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.00) 60%) !important; } .testimonials.row > [class*="col-"]::after { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; background: repeating-linear-gradient( 135deg, rgba(0, 210, 255, 0.05) 0px, rgba(0, 210, 255, 0.05) 1px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 18px ) !important; opacity: 0.10 !important; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,0) 100%) !important; mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.4) 55%, rgba(0,0,0,0) 100%) !important; } /* --- Контент выше псевдоэлементов --- */ .testimonials.row > [class*="col-"] > * { position: relative !important; z-index: 1 !important; } /* --- Типографика --- */ .testimonials.row > [class*="col-"], .testimonials.row > [class*="col-"] * { color: rgba(220, 250, 255, 0.92) !important; } .testimonials.row > [class*="col-"] p { color: rgba(235, 252, 255, 0.90) !important; font-size: 14px !important; line-height: 1.60 !important; text-shadow: 0 1px 0 rgba(0,0,0,0.30); margin: 0 0 10px 0 !important; } .testimonials.row > [class*="col-"] small { color: rgba(180, 225, 255, 0.65) !important; font-size: 12px !important; } /* звёзды */ .testimonials.row > [class*="col-"] [class*="star"], .testimonials.row > [class*="col-"] .stars, .testimonials.row > [class*="col-"] .rating { color: rgba(255, 210, 60, 0.95) !important; text-shadow: 0 0 8px rgba(255, 180, 0, 0.22) !important; } /* --- Сброс любых фонов внутри карточки --- */ .testimonials.row > [class*="col-"] *, .testimonials.row > [class*="col-"] *::before, .testimonials.row > [class*="col-"] *::after { background-color: transparent !important; background-image: none !important; box-shadow: none !important; } /* исключение — сами псевдоэлементы карточки */ .testimonials.row > [class*="col-"]::before, .testimonials.row > [class*="col-"]::after { background-color: unset !important; background-image: unset !important; } /* --- Адаптив --- */ @media (max-width: 1200px) { .testimonials.row { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 900px) { .testimonials.row { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 560px) { .testimonials.row { grid-template-columns: 1fr !important; gap: 14px !important; } } /* ========================================================================== PAGINATION — Reviews page ========================================================================== */ /* --- Обёртка --- */ .testimonials.row ~ div .pagination, .testimonials.row ~ div nav, .py-5-nav .pagination, .py-5-nav nav[aria-label="Pagination Navigation"] { margin-top: 32px !important; } /* --- Текст "Showing X to Y of Z" --- */ .py-5-nav .text-muted, .py-5-nav nav .text-muted { color: rgba(180, 225, 255, 0.60) !important; font-size: 13px !important; } .py-5-nav nav .fw-semibold { color: rgba(210, 248, 255, 0.88) !important; font-weight: 700 !important; } /* --- Список пагинации --- */ .py-5-nav ul.pagination { display: flex !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; align-items: center !important; background: transparent !important; box-shadow: none !important; } /* --- Базовый page-link --- */ .py-5-nav .page-item .page-link, .py-5-nav .page-item span.page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 36px !important; height: 36px !important; padding: 0 10px !important; border-radius: 10px !important; border: 1px solid rgba(0, 210, 255, 0.16) !important; background: rgba(2, 26, 36, 0.40) !important; color: rgba(210, 248, 255, 0.88) !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; line-height: 1 !important; text-decoration: none !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.20) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease !important; cursor: pointer !important; } /* --- Hover --- */ .py-5-nav .page-item:not(.disabled):not(.active) .page-link:hover { transform: translateY(-2px) !important; background: rgba(2, 32, 44, 0.56) !important; border-color: rgba(0, 210, 255, 0.32) !important; color: rgba(235, 252, 255, 0.98) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 18px rgba(0, 210, 255, 0.12) !important; } /* --- Активная страница --- */ .py-5-nav .page-item.active .page-link, .py-5-nav .page-item.active span.page-link { background: rgba(0, 210, 255, 0.14) !important; border-color: rgba(0, 210, 255, 0.42) !important; color: rgba(235, 252, 255, 0.98) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 2px rgba(0, 210, 255, 0.18), 0 0 20px rgba(0, 210, 255, 0.14) !important; cursor: default !important; } /* --- Disabled --- */ .py-5-nav .page-item.disabled .page-link, .py-5-nav .page-item.disabled span.page-link { opacity: 0.35 !important; cursor: not-allowed !important; transform: none !important; pointer-events: none !important; } /* --- Мобильные кнопки Previous / Next --- */ .py-5-nav .btn.btn-ouline-primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 18px !important; border-radius: 10px !important; border: 1px solid rgba(0, 210, 255, 0.18) !important; background: rgba(2, 26, 36, 0.40) !important; color: rgba(210, 248, 255, 0.88) !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.20) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; } .py-5-nav .btn.btn-ouline-primary:not(.disabled):hover { transform: translateY(-2px) !important; background: rgba(2, 32, 44, 0.56) !important; border-color: rgba(0, 210, 255, 0.32) !important; color: rgba(235, 252, 255, 0.98) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 18px rgba(0, 210, 255, 0.12) !important; } .py-5-nav .btn.btn-ouline-primary.disabled { opacity: 0.35 !important; cursor: not-allowed !important; pointer-events: none !important; } /* ========================================================================== 24) PRODUCT / CHECKOUT — GLASS ELEMENTS ========================================================================== */ /* --- 24a. CSS variables --- */ :root{ --glass-bg: rgba(2, 26, 36, 0.34); --glass-bg-2: rgba(2, 26, 36, 0.26); --glass-border: rgba(0, 210, 255, 0.16); --glass-border-hover: rgba(0, 210, 255, 0.28); --glass-text: rgba(220, 250, 255, 0.92); } /* --- 24b. Quantity input group (buy-buttons scope) --- */ .buy-buttons .input-group, .buy-buttons .input-group .form-control, .buy-buttons .input-group .input-group-text{ border-radius: 12px !important; } .buy-buttons .form-control{ background: var(--glass-bg-2) !important; color: var(--glass-text) !important; border: 1px solid var(--glass-border) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important; } .buy-buttons .form-control::placeholder{ color: rgba(220, 250, 255, 0.55) !important; } .buy-buttons .form-control:focus{ outline: none !important; border-color: rgba(0, 210, 255, 0.32) !important; box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* --- 24c. +/- buttons (buy-buttons scope) --- */ .buy-buttons .btn.input-group-btn, .buy-buttons .btn.btn-outline-primary.input-group-btn{ background: var(--glass-bg) !important; color: var(--glass-text) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(8px) saturate(120%) !important; backdrop-filter: blur(8px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.18) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .buy-buttons .btn.input-group-btn:hover, .buy-buttons .btn.btn-outline-primary.input-group-btn:hover{ transform: translateY(-1px); background: rgba(2, 26, 36, 0.46) !important; border-color: var(--glass-border-hover) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.22), 0 0 22px rgba(0, 210, 255, 0.10) !important; } /* --- 24d. Discount / notice bar (buy-buttons scope) --- */ .buy-buttons .alert, .buy-buttons .notice, .buy-buttons .message, .buy-buttons .help-block, .buy-buttons .form-text, .buy-buttons small.form-text, .buy-buttons .text-muted, .buy-buttons div[class*="discount"], .buy-buttons div[class*="Discount"], .buy-buttons div[class*="notice"], .buy-buttons div[class*="Notice"]{ background: var(--glass-bg) !important; border: 1px solid rgba(0, 210, 255, 0.10) !important; color: rgba(220, 250, 255, 0.88) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.18) !important; } /* --- 24e. Buy buttons row (buy-buttons scope) --- */ .buy-buttons .btn{ border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.24); transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, text-shadow 180ms ease; } .buy-buttons .btn:hover{ transform: translateY(-1px); text-shadow: 0 0 16px rgba(0, 210, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 30px rgba(0,0,0,0.30), 0 0 22px rgba(0, 210, 255, 0.08); } /* Outline primary (Buy Now) */ .buy-buttons .btn.btn-outline-primary{ background: var(--glass-bg) !important; border: 1px solid var(--glass-border) !important; color: var(--glass-text) !important; } .buy-buttons .btn.btn-outline-primary:hover{ background: rgba(2, 26, 36, 0.46) !important; border-color: var(--glass-border-hover) !important; } /* Primary (Add to Cart) */ .buy-buttons .btn.btn-primary{ background: rgba(0, 210, 255, 0.10) !important; border: 1px solid rgba(0, 210, 255, 0.22) !important; color: var(--glass-text) !important; } .buy-buttons .btn.btn-primary:hover{ background: rgba(0, 210, 255, 0.14) !important; border-color: rgba(0, 210, 255, 0.34) !important; } .buy-buttons .btn svg{ color: var(--glass-text) !important; } /* --- 24f. Checkout form controls (checkout / cart scope) --- */ .checkout form .form-control, .cart form .form-control, .checkout form .form-select, .cart form .form-select, .checkout form .input-group-text, .cart form .input-group-text{ background: var(--glass-bg) !important; color: var(--glass-text) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; } .checkout form .btn, .cart form .btn{ border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); } /* ========================================================================== 25) PRODUCT TABS (Description / Features) ========================================================================== */ .product-tabs{ gap: 10px !important; } .product-tabs .btn{ border-radius: 14px !important; padding: 10px 14px !important; font-weight: 700 !important; letter-spacing: .15px !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.22) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, text-shadow 180ms ease; } .product-tabs .btn:hover{ transform: translateY(-1px); text-shadow: 0 0 14px rgba(0,210,255,0.12); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.30), 0 0 22px rgba(0,210,255,0.08) !important; } /* ACTIVE tab */ .product-tabs .btn.btn-primary{ background: rgba(0, 210, 255, 0.14) !important; border: 1px solid rgba(0, 210, 255, 0.32) !important; color: rgba(230, 255, 255, 0.96) !important; } /* INACTIVE tab */ .product-tabs .btn.btn-outline-primary{ background: rgba(2, 26, 36, 0.34) !important; border: 1px solid rgba(0, 210, 255, 0.18) !important; color: rgba(220, 250, 255, 0.92) !important; } .product-tabs .btn.btn-outline-primary:hover{ background: rgba(2, 26, 36, 0.46) !important; border-color: rgba(0, 210, 255, 0.30) !important; } .product-tabs .btn:focus, .product-tabs .btn:active{ outline: none !important; box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* ========================================================================== 26) GLASS QUANTITY (product-wrapper / checkout-wrapper / cart-wrapper scope) ========================================================================== */ /* --- 26a. Variables --- */ .product-wrapper, .checkout-wrapper, .cart-wrapper, .components {} :root{ --q-bg: rgba(2, 26, 36, 0.34); --q-bg-inner: rgba(2, 26, 36, 0.26); --q-border: rgba(0, 210, 255, 0.18); --q-border-strong: rgba(0, 210, 255, 0.30); --q-text: rgba(220, 250, 255, 0.92); --q-text-muted: rgba(220, 250, 255, 0.70); } /* --- 26b. Input group --- */ .product-wrapper .input-group, .checkout-wrapper .input-group, .cart-wrapper .input-group{ align-items: stretch; } /* --- 26c. Quantity field --- */ .product-wrapper input.form-control, .checkout-wrapper input.form-control, .cart-wrapper input.form-control{ background: var(--q-bg-inner) !important; color: var(--q-text) !important; border: 1px solid var(--q-border) !important; border-left: 0 !important; border-right: 0 !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important; } /* --- 26d. Spin-button removal --- */ .product-wrapper input[type="number"]::-webkit-outer-spin-button, .product-wrapper input[type="number"]::-webkit-inner-spin-button, .checkout-wrapper input[type="number"]::-webkit-outer-spin-button, .checkout-wrapper input[type="number"]::-webkit-inner-spin-button, .cart-wrapper input[type="number"]::-webkit-outer-spin-button, .cart-wrapper input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } .product-wrapper input[type="number"], .checkout-wrapper input[type="number"], .cart-wrapper input[type="number"]{ -moz-appearance: textfield; } /* --- 26e. +/- buttons --- */ .product-wrapper .btn.btn-outline-primary.input-group-btn, .checkout-wrapper .btn.btn-outline-primary.input-group-btn, .cart-wrapper .btn.btn-outline-primary.input-group-btn{ background: var(--q-bg) !important; color: var(--q-text) !important; border: 1px solid var(--q-border) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.18) !important; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .product-wrapper .btn.btn-outline-primary.input-group-btn:hover, .checkout-wrapper .btn.btn-outline-primary.input-group-btn:hover, .cart-wrapper .btn.btn-outline-primary.input-group-btn:hover{ transform: translateY(-1px); border-color: var(--q-border-strong) !important; background: rgba(2, 26, 36, 0.46) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.24), 0 0 18px rgba(0,210,255,0.10) !important; } /* --- 26f. Border-radius (single control look) --- */ .product-wrapper .input-group > .btn.input-group-btn:first-child, .checkout-wrapper .input-group > .btn.input-group-btn:first-child, .cart-wrapper .input-group > .btn.input-group-btn:first-child{ border-radius: 12px 0 0 12px !important; } .product-wrapper .input-group > input.form-control, .checkout-wrapper .input-group > input.form-control, .cart-wrapper .input-group > input.form-control{ border-radius: 0 !important; } .product-wrapper .input-group > .btn.input-group-btn:last-child, .checkout-wrapper .input-group > .btn.input-group-btn:last-child, .cart-wrapper .input-group > .btn.input-group-btn:last-child{ border-radius: 0 12px 12px 0 !important; } /* --- 26f (cont). Focus glow --- */ .product-wrapper .input-group:focus-within, .checkout-wrapper .input-group:focus-within, .cart-wrapper .input-group:focus-within{ border-radius: 12px; box-shadow: 0 0 0 3px rgba(0,210,255,0.10); } /* --- 26g. Discount / notice bar --- */ .product-wrapper .alert, .product-wrapper .notice, .product-wrapper .help-block, .product-wrapper .message, .product-wrapper .availableVolumeDiscount, .checkout-wrapper .alert, .checkout-wrapper .notice, .checkout-wrapper .help-block, checkout-wrapper .message, .checkout-wrapper .availableVolumeDiscount, .cart-wrapper .alert, .cart-wrapper .notice, .cart-wrapper .help-block, .cart-wrapper .message, .cart-wrapper .availableVolumeDiscount{ background: rgba(2, 26, 36, 0.28) !important; border: 1px solid rgba(0, 210, 255, 0.12) !important; color: var(--q-text-muted) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important; } /* --- 26h. Helper text --- */ .product-wrapper .form-text, .product-wrapper small.form-text, .product-wrapper .text-muted, .checkout-wrapper .form-text, .checkout-wrapper small.form-text, .checkout-wrapper .text-muted, .cart-wrapper .form-text, .cart-wrapper small.form-text, .cart-wrapper .text-muted{ color: var(--q-text-muted) !important; } /* ========================================================================== 27) PRODUCT QUANTITY — SELLAUTH-SPECIFIC GLASS (product-wrapper.component) ========================================================================== */ /* --- 27a. Variables --- */ :root{ --glass-bg: rgba(2, 26, 36, 0.34); --glass-bg-2: rgba(2, 26, 36, 0.22); --glass-border: rgba(0, 210, 255, 0.16); --glass-border-2: rgba(0, 210, 255, 0.26); --glass-text: rgba(220, 250, 255, 0.92); } /* --- 27b. Input group --- */ .product-wrapper.component .input-group{ border-radius: 12px !important; } .product-wrapper.component .input-group .form-control{ background: var(--glass-bg-2) !important; color: var(--glass-text) !important; border: 1px solid var(--glass-border) !important; border-left: 0 !important; border-right: 0 !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important; } .product-wrapper.component .btn.btn-outline-primary.input-group-btn{ background: var(--glass-bg) !important; color: var(--glass-text) !important; border: 1px solid var(--glass-border) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.18) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .product-wrapper.component .btn.btn-outline-primary.input-group-btn:hover{ transform: translateY(-1px); background: rgba(2, 26, 36, 0.46) !important; border-color: var(--glass-border-2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.22), 0 0 22px rgba(0, 210, 255, 0.10) !important; } .product-wrapper.component .btn.btn-outline-primary.input-group-btn:active{ transform: translateY(0) scale(0.985); } .product-wrapper.component .input-group > .btn.input-group-btn:first-child{ border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .product-wrapper.component .input-group > .form-control{ border-radius: 0 !important; } .product-wrapper.component .input-group > .btn.input-group-btn:last-child{ border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } /* --- 27b (cont). Volume discount notice bar --- */ .product-wrapper.component [x-show="availableVolumeDiscount"] .form-control.text-center.mt-2, .product-wrapper.component .form-control.text-center.mt-2{ background: rgba(2, 26, 36, 0.30) !important; color: var(--glass-text) !important; border: 1px solid rgba(0, 210, 255, 0.12) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.16) !important; padding: 10px 12px !important; } .product-wrapper.component .form-control.text-center.mt-2 *{ background: transparent !important; color: var(--glass-text) !important; } /* --- 27c. Focus state --- */ .product-wrapper.component .input-group .form-control:focus{ outline: none !important; border-color: rgba(0, 210, 255, 0.30) !important; box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* --- 27d. SVG icon color --- */ .product-wrapper.component .btn.btn-outline-primary.input-group-btn svg{ color: var(--glass-text) !important; } /* ========================================================================== 28) CART / ORDER SUMMARY ("Your Order") ========================================================================== */ .d-flex.flex-column.gap-4.p-4.border.rounded.form{ background: rgba(2, 26, 36, 0.34) !important; border: 1px solid rgba(0, 210, 255, 0.14) !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; backdrop-filter: blur(12px) saturate(120%) !important; box-shadow: 0 14px 36px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04) !important; color: rgba(220, 250, 255, 0.92) !important; } form[\@submit\.prevent="checkout"]{ background: transparent !important; border: 0 !important; box-shadow: none !important; } .d-flex.flex-column.gap-4.p-4.border.rounded.form .form-label{ color: rgba(220, 250, 255, 0.92) !important; font-weight: 700; } .d-flex.flex-column.gap-4.p-4.border.rounded.form .border-bottom{ border-bottom: 1px solid rgba(0, 210, 255, 0.12) !important; } .d-flex.flex-column.gap-4.p-4.border.rounded.form .d-flex.justify-content-between{ color: rgba(220, 250, 255, 0.88) !important; } .d-flex.flex-column.gap-4.p-4.border.rounded.form .d-flex.justify-content-between > :last-child{ color: rgba(235, 252, 255, 0.94) !important; font-weight: 800; } .d-flex.flex-column.gap-4.p-4.border.rounded.form .btn{ background: rgba(2, 26, 36, 0.34) !important; border: 1px solid rgba(0, 210, 255, 0.18) !important; border-radius: 12px !important; color: rgba(220, 250, 255, 0.92) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.22) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } .d-flex.flex-column.gap-4.p-4.border.rounded.form .btn:hover{ transform: translateY(-1px); background: rgba(2, 26, 36, 0.46) !important; border-color: rgba(0, 210, 255, 0.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.30), 0 0 22px rgba(0, 210, 255, 0.10) !important; } .d-flex.flex-column.gap-4.p-4.border.rounded.form .btn:disabled{ opacity: 0.6 !important; transform: none !important; } .d-flex.flex-column.gap-4.p-4.border.rounded.form *{ background-image: none !important; } /* ========================================================================== 29) PRODUCT VARIANTS ========================================================================== */ /* --- 29a. Variables --- */ :root{ --glass-bg: rgba(2, 26, 36, 0.34); --glass-bg-hover: rgba(2, 26, 36, 0.46); --glass-border: rgba(0, 210, 255, 0.18); --glass-border-hover: rgba(0, 210, 255, 0.32); --glass-text: rgba(220, 250, 255, 0.92); } /* --- 29b. Container layout --- */ .d-flex.flex-wrap.variants{ gap: 12px !important; } /* --- 29c. Button base + inner shine --- */ .d-flex.flex-wrap.variants button.variant{ position: relative !important; overflow: hidden !important; background: var(--glass-bg) !important; color: var(--glass-text) !important; border: 1px solid var(--glass-border) !important; border-radius: 14px !important; padding: 14px 16px !important; min-width: 260px; text-align: left !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: 0 12px 26px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.04) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease !important; } .d-flex.flex-wrap.variants button.variant::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: radial-gradient(circle at 18% 18%, rgba(0,210,255,0.12), transparent 55%), radial-gradient(circle at 85% 12%, rgba(60,120,255,0.10), transparent 58%), linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.00) 60%); opacity: .9; } .d-flex.flex-wrap.variants button.variant > *{ position: relative; z-index: 1; } /* --- 29d. Hover state --- */ .d-flex.flex-wrap.variants button.variant:hover{ transform: translateY(-2px) !important; background: var(--glass-bg-hover) !important; border-color: var(--glass-border-hover) !important; box-shadow: 0 16px 36px rgba(0,0,0,0.42), 0 0 22px rgba(0,210,255,0.10), inset 0 1px 0 rgba(255,255,255,0.05) !important; } /* --- 29e. Active (selected) state --- */ .d-flex.flex-wrap.variants button.variant.active{ border-color: rgba(0,210,255,0.46) !important; background: rgba(0,210,255,0.10) !important; box-shadow: 0 18px 44px rgba(0,0,0,0.46), 0 0 0 2px rgba(0,210,255,0.22), 0 0 26px rgba(0,210,255,0.14), inset 0 1px 0 rgba(255,255,255,0.05) !important; } .d-flex.flex-wrap.variants button.variant.active:hover{ background: rgba(0,210,255,0.14) !important; border-color: rgba(0,210,255,0.58) !important; } /* --- 29f. Disabled / out-of-stock --- */ .d-flex.flex-wrap.variants button.variant:disabled, .d-flex.flex-wrap.variants button.variant[disabled]{ opacity: 0.55 !important; filter: grayscale(0.25); cursor: not-allowed !important; box-shadow: 0 10px 22px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03) !important; } /* --- 29g. Inner text hierarchy --- */ .d-flex.flex-wrap.variants button.variant strong, .d-flex.flex-wrap.variants button.variant b{ color: rgba(235, 252, 255, 0.96) !important; } .d-flex.flex-wrap.variants button.variant small{ color: rgba(220, 250, 255, 0.72) !important; } /* ========================================================================== 30) PRODUCT IMAGE CAROUSEL — GRADIENT BORDER ========================================================================== */ #productImageCarousel .carousel-item{ position: relative; } #productImageCarousel img.d-block.w-100{ display: block; border-radius: 14px; } #productImageCarousel .carousel-item::before{ content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 1px; pointer-events: none; background: linear-gradient(135deg, rgba(80, 170, 255, 0.95), rgba(40, 255, 220, 0.95) ); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.35; filter: drop-shadow(0 0 6px rgba(80, 170, 255, 0.35)) drop-shadow(0 0 12px rgba(40, 255, 220, 0.22)); } /* ========================================================================== 31) STOCK BADGES ========================================================================== */ span.stock-indicator:empty { display: none !important; } span.stock-indicator { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px; font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 11px; letter-spacing: .3px; line-height: 1; white-space: nowrap; text-decoration: none; user-select: none; -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%); transition: transform .18s ease, box-shadow .18s ease; } /* In Stock */ span.stock-indicator.btn-outline-primary { --dot-rgb: 0, 220, 180; background: rgba(0, 180, 150, 0.10) !important; border: 1px solid rgba(0, 220, 180, 0.22) !important; color: rgba(0, 220, 180, 0.95) !important; /* было rgba(160, 255, 230, 0.92) */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 12px rgba(0, 220, 180, 0.10); } /* Out of Stock */ span.stock-indicator.btn-outline-danger { --dot-rgb: 255, 80, 110; background: rgba(180, 0, 40, 0.10) !important; border: 1px solid rgba(255, 80, 110, 0.22) !important; color: rgba(255, 80, 110, 0.95) !important; /* было rgba(255, 200, 210, 0.92) */ box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 12px rgba(255, 80, 110, 0.10); } span.stock-indicator:hover { transform: translateY(-1px); } /* dot */ span.stock-indicator::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--dot-rgb), 0.95); box-shadow: 0 0 8px rgba(var(--dot-rgb), 0.50), 0 0 0 0 rgba(var(--dot-rgb), 0.25); animation: stockDotPulse 1.8s ease-out infinite; flex-shrink: 0; } @keyframes stockDotPulse { 0% { box-shadow: 0 0 8px rgba(var(--dot-rgb), 0.50), 0 0 0 0 rgba(var(--dot-rgb), 0.25); transform: scale(1); } 55% { box-shadow: 0 0 12px rgba(var(--dot-rgb), 0.60), 0 0 0 8px rgba(var(--dot-rgb), 0.00); transform: scale(1.15); } 100% { box-shadow: 0 0 8px rgba(var(--dot-rgb), 0.50), 0 0 0 0 rgba(var(--dot-rgb), 0.00); transform: scale(1); } } @media (prefers-reduced-motion: reduce) { span.stock-indicator::before { animation: none !important; } } /* ========================================================================== 32) PRODUCT DESCRIPTION / VIDEO — GLASS CARD ========================================================================== */ .product-tabs .content{ position: relative; overflow: hidden; margin-top: 14px; padding: 18px 18px; width: 100%; max-width: 980px; background: rgba(2, 26, 36, 0.34) !important; border: 1px solid rgba(0, 210, 255, 0.14) !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); box-shadow: 0 14px 36px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.04) !important; } .product-tabs .content::before{ content:""; position:absolute; inset:-20%; pointer-events:none; z-index:0; background: radial-gradient(circle at 18% 20%, rgba(0,210,255,0.14), transparent 55%), radial-gradient(circle at 85% 10%, rgba(60,120,255,0.12), transparent 58%), radial-gradient(circle at 55% 120%, rgba(100,255,220,0.08), transparent 60%); filter: blur(26px); opacity: 0.9; } .product-tabs .content::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: repeating-linear-gradient( 135deg, rgba(0,210,255,0.06) 0px, rgba(0,210,255,0.06) 1px, rgba(0,0,0,0) 10px, rgba(0,0,0,0) 18px ); opacity: 0.12; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,0) 100%); } .product-tabs .content > *{ position: relative; z-index: 1; } .product-tabs .editor, .product-tabs .editor *{ background: transparent !important; box-shadow: none !important; } .product-tabs .editor{ color: rgba(220, 250, 255, 0.92) !important; line-height: 1.65; font-size: 15px; } .product-tabs .editor p{ color: rgba(235,252,255,0.92) !important; text-shadow: 0 1px 0 rgba(0,0,0,0.35); } .product-tabs .editor ul{ padding-left: 18px; margin: 10px 0 0; } .product-tabs .editor li{ margin: 6px 0; } /* ========================================================================== 33) CURRENCY SWITCH (Choices.js) ========================================================================== */ /* --- 33a. Container sizing --- */ .currency-selector .choices{ width: 80px; } /* --- 33b. Inner plaque --- */ .currency-selector .choices__inner{ background: rgba(2, 26, 36, 0.34) !important; border: 1px solid rgba(0, 210, 255, 0.18) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 10px 22px rgba(0,0,0,0.24) !important; color: rgba(220, 250, 255, 0.92) !important; min-height: 40px !important; padding: 8px 12px !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* --- 33c. Text & arrow --- */ .currency-selector .choices__item, .currency-selector .choices__item--selectable{ color: rgba(220, 250, 255, 0.92) !important; font-weight: 700; letter-spacing: .2px; } .currency-selector .choices[data-type*="select-one"]::after{ border-color: rgba(220, 250, 255, 0.75) transparent transparent transparent !important; margin-top: -2px !important; } .currency-selector .choices.is-open[data-type*="select-one"]::after{ border-color: transparent transparent rgba(220, 250, 255, 0.75) transparent !important; } /* --- 33d. Hover / focus / open states --- */ .currency-selector .choices:hover .choices__inner{ background: rgba(2, 26, 36, 0.46) !important; border-color: rgba(0, 210, 255, 0.30) !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.30), 0 0 22px rgba(0, 210, 255, 0.10) !important; } .currency-selector .choices:focus, .currency-selector .choices__inner:focus{ outline: none !important; } .currency-selector .choices.is-focused .choices__inner, .currency-selector .choices.is-open .choices__inner{ border-color: rgba(0, 210, 255, 0.34) !important; box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.10), inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.30) !important; } /* --- 33e. Dropdown --- */ .currency-selector .choices__list--dropdown, .currency-selector .choices__list[aria-expanded]{ background: rgba(2, 26, 36, 0.92) !important; border: 1px solid rgba(0, 210, 255, 0.14) !important; border-radius: 14px !important; -webkit-backdrop-filter: blur(12px) saturate(120%) !important; backdrop-filter: blur(12px) saturate(120%) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; overflow: hidden; z-index: 99999 !important; } /* --- 33f. Dropdown item highlights --- */ .currency-selector .choices__list--dropdown .choices__item{ padding: 10px 12px !important; color: rgba(220, 250, 255, 0.92) !important; } .currency-selector .choices__list--dropdown .choices__item--highlighted, .currency-selector .choices__list[aria-expanded] .choices__item--highlighted{ background: rgba(0, 210, 255, 0.10) !important; color: rgba(235, 252, 255, 0.98) !important; } .currency-selector .choices__list--dropdown .choices__list{ background: transparent !important; } /* ========================================================================== 34) CURRENCY SWITCH — NAVBAR VARIANT (fixed layering + chevron) ========================================================================== */ /* --- 34a. Layering above navbar texture --- */ .navbar.navbar-expand-lg.component .currency-selector, .navbar.navbar-expand-lg.component .currency-selector .choices{ position: relative; z-index: 8; isolation: isolate; } /* --- 34b. Glass inner + glow --- */ .navbar.navbar-expand-lg.component .currency-selector .choices__inner{ position: relative; overflow: hidden; background: rgba(2, 26, 36, 0.46) !important; border: 1px solid rgba(0, 210, 255, 0.20) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; backdrop-filter: blur(12px) saturate(125%) !important; min-height: 40px !important; padding: 8px 32px 8px 12px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 22px rgba(0,0,0,0.26), 0 0 18px rgba(0, 210, 255, 0.10) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* --- 34c. Chevron arrow --- */ .navbar.navbar-expand-lg.component .currency-selector .choices[data-type*="select-one"]::after{ content:"" !important; position:absolute !important; right: 12px !important; top: 50% !important; width: 8px !important; height: 8px !important; border: 0 !important; border-right: 2px solid rgba(220, 250, 255, 0.82) !important; border-bottom: 2px solid rgba(220, 250, 255, 0.82) !important; transform: translateY(-55%) rotate(45deg) !important; margin: 0 !important; pointer-events: none !important; } .navbar.navbar-expand-lg.component .currency-selector .choices.is-open[data-type*="select-one"]::after{ transform: translateY(-45%) rotate(-135deg) !important; } /* --- 34d. Text & currency symbol --- */ .navbar.navbar-expand-lg.component .currency-selector .choices__list--single{ padding: 0 !important; } .navbar.navbar-expand-lg.component .currency-selector .choices__item{ color: rgba(220, 250, 255, 0.92) !important; font-weight: 700; letter-spacing: .2px; } .navbar.navbar-expand-lg.component .currency-selector .symbol{ color: rgba(var(--holo-teal), 0.98) !important; text-shadow: 0 0 10px rgba(var(--holo-teal), 0.35), 0 0 22px rgba(var(--holo-cyan), 0.18) !important; } /* --- 34e. Dropdown glass --- */ .navbar.navbar-expand-lg.component .currency-selector .choices__list--dropdown, .navbar.navbar-expand-lg.component .currency-selector .choices__list[aria-expanded]{ background: rgba(2, 26, 36, 0.92) !important; border: 1px solid rgba(0, 210, 255, 0.14) !important; border-radius: 14px !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; backdrop-filter: blur(12px) saturate(125%) !important; box-shadow: 0 18px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important; overflow: hidden; z-index: 99999 !important; } /* --- 34f. Dropdown item highlight --- */ .navbar.navbar-expand-lg.component .currency-selector .choices__list--dropdown .choices__item{ padding: 10px 12px !important; color: rgba(220, 250, 255, 0.92) !important; } .navbar.navbar-expand-lg.component .currency-selector .choices__list--dropdown .choices__item--highlighted{ background: rgba(0, 210, 255, 0.10) !important; color: rgba(235, 252, 255, 0.98) !important; } /* ========================================================================== 35) PRODUCT VARIANT — BTN-PRIMARY OVERRIDE ========================================================================== */ /* --- 35a. Base style --- */ .variant.btn-primary { position: relative; overflow: hidden; background: linear-gradient(135deg, #0b2f46 0%, #0f4c6d 100%); border: 1px solid rgba(0, 255, 255, 0.25); color: #dffcff; font-weight: 600; border-radius: 14px; transition: all 0.25s ease; box-shadow: 0 0 12px rgba(0, 255, 255, 0.12), inset 0 0 12px rgba(255,255,255,0.03); } /* --- 35b. Hover --- */ .variant.btn-primary:hover { transform: translateY(-2px); border-color: rgba(0,255,255,0.5); box-shadow: 0 0 18px rgba(0,255,255,0.25), 0 0 40px rgba(0,255,255,0.08); } /* --- 35c. Active / selected --- */ .variant.btn-primary.active { background: linear-gradient(135deg, #00bcd4 0%, #007ea7 100%); border-color: rgba(0,255,255,0.9); color: white; box-shadow: 0 0 20px rgba(0,255,255,0.45), 0 0 50px rgba(0,255,255,0.2); } /* --- 35d. Remove old active-indicator --- */ .active-indicator { display: none !important; } .product-card .price s { font-size: 1.1rem; color: rgba(255, 255, 255, 0.50); letter-spacing: -0.02em; } /* Stock text в карточке товара */ .product-card .card-body .info p.text-primary { color: rgba(0, 220, 180, 0.95) !important; font-family: 'Syne', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .3px; } /* Out of stock */ .product-card .card-body .info p.text-primary:has (> :only-child) { color: rgba(0, 220, 180, 0.95) !important; } /* Hero CTA кнопки */ .hero-cta-group { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; align-items: center; } .hero-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 14px; font-family: 'Syne', sans-serif !important; font-weight: 700; font-size: 15px; letter-spacing: .1px; text-decoration: none; position: relative; overflow: hidden; transition: transform 200ms ease, box-shadow 200ms ease, background 200ms ease, border-color 200ms ease; } /* Browse Products — акцентная */ .hero-btn-primary { background: rgba(0, 190, 255, 0.12); border: 1px solid rgba(0, 190, 255, 0.35); color: rgba(220, 250, 255, 0.96) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.28), 0 0 20px rgba(0, 190, 255, 0.12); } .hero-btn-primary:hover { transform: translateY(-2px); background: rgba(0, 190, 255, 0.18); border-color: rgba(0, 190, 255, 0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 32px rgba(0,0,0,0.35), 0 0 30px rgba(0, 190, 255, 0.22); } /* View on FunPay — вторичная */ .hero-btn-secondary { background: rgba(2, 20, 30, 0.45); border: 1px solid rgba(255,255,255,0.10); color: rgba(200, 235, 255, 0.85) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hero-btn-secondary:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.18); color: rgba(220, 250, 255, 0.95) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.32), 0 0 20px rgba(255,255,255,0.05); } .hero-btn:active { transform: translateY(0) scale(0.98); } .hero-btn::after { content: none; } /* Browse Products — акцентная */ .hero-btn-primary { background: rgba(0, 190, 255, 0.12); border: 1px solid rgba(0, 190, 255, 0.35); color: rgba(220, 250, 255, 0.96) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.28), 0 0 20px rgba(0, 190, 255, 0.12); } .hero-btn-primary:hover { transform: translateY(-3px); background: rgba(0, 190, 255, 0.16); border-color: rgba(0, 190, 255, 0.60); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.38), 0 0 25px rgba(0, 190, 255, 0.28), 0 0 60px rgba(0, 190, 255, 0.12); animation: btnPrimaryPulse 1.8s ease-in-out infinite; } @keyframes btnPrimaryPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.38), 0 0 25px rgba(0, 190, 255, 0.28), 0 0 60px rgba(0, 190, 255, 0.12); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 14px 36px rgba(0,0,0,0.38), 0 0 35px rgba(0, 190, 255, 0.42), 0 0 80px rgba(0, 190, 255, 0.20); } } /* View on FunPay — вторичная */ .hero-btn-secondary { background: rgba(2, 20, 30, 0.45); border: 1px solid rgba(255,255,255,0.10); color: rgba(200, 235, 255, 0.85) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.25); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hero-btn-secondary:hover { transform: translateY(-3px); border-color: rgba(0, 190, 255, 0.25); color: rgba(220, 250, 255, 0.95) !important; background: rgba(0, 190, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 36px rgba(0,0,0,0.32), 0 0 20px rgba(0, 190, 255, 0.14), 0 0 50px rgba(0, 190, 255, 0.07); animation: btnSecondaryPulse 1.8s ease-in-out infinite; } @keyframes btnSecondaryPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 36px rgba(0,0,0,0.32), 0 0 20px rgba(0, 190, 255, 0.14), 0 0 50px rgba(0, 190, 255, 0.07); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 14px 36px rgba(0,0,0,0.32), 0 0 28px rgba(0, 190, 255, 0.22), 0 0 70px rgba(0, 190, 255, 0.12); } } .hero-btn:active { transform: translateY(0) scale(0.97); animation: none !important; } /* ========================================================================== 36) CUSTOMER LOGIN MODAL ========================================================================== */ /* --- 36a. Backdrop overlay --- */ .modal.fade.show .modal-backdrop, .modal-backdrop.fade.show { background: rgba(0, 0, 0, 0.60) !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; } /* --- 36b. Modal dialog centering --- */ .customer-login-modal .modal-dialog, div[id="customer-login-modal"] .modal-dialog { display: flex !important; align-items: center !important; justify-content: center !important; min-height: calc(100vh - 60px) !important; } /* --- 36c. Modal content card --- */ .customer-login-modal .modal-content, div[id="customer-login-modal"] .modal-content { position: relative !important; isolation: isolate !important; overflow: hidden !important; width: min(500px, 100%) !important; padding: 0 !important; border-radius: 18px !important; background: radial-gradient(120% 140% at 50% 35%, rgba(1, 22, 30, 0.97) 0%, rgba(1, 18, 26, 0.93) 46%, rgba(1, 16, 22, 0.88) 78%, rgba(1, 14, 20, 0.82) 100% ) !important; border: 1px solid rgba(0, 210, 255, 0.10) !important; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 210, 255, 0.06) inset, 0 0 28px rgba(0, 210, 255, 0.08), 0 0 60px rgba(30, 120, 255, 0.06) !important; -webkit-backdrop-filter: blur(20px) saturate(130%) !important; backdrop-filter: blur(20px) saturate(130%) !important; animation: loginModalEnter 420ms cubic-bezier(.22, 1.25, .36, 1) !important; } /* --- 36d. Animated holo border (::before) --- */ .customer-login-modal .modal-content::before, div[id="customer-login-modal"] .modal-content::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; padding: 1px !important; opacity: 0.55 !important; pointer-events: none !important; z-index: 0 !important; background: linear-gradient( 135deg, rgba(0, 210, 255, 0.60) 0%, rgba(30, 100, 255, 0.40) 35%, rgba(0, 230, 220, 0.50) 65%, rgba(0, 210, 255, 0.60) 100% ) !important; background-size: 300% 300% !important; animation: loginBorderFlow 4s ease-in-out infinite !important; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important; -webkit-mask-composite: xor !important; mask-composite: exclude !important; } /* --- 36e. Ambient glow sweep (::after) --- */ .customer-login-modal .modal-content::after, div[id="customer-login-modal"] .modal-content::after { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; pointer-events: none !important; z-index: 0 !important; opacity: 0.45 !important; background-image: radial-gradient(ellipse 70% 50% at 20% 15%, rgba(0, 210, 255, 0.12) 0%, transparent 60% ), radial-gradient(ellipse 55% 45% at 80% 85%, rgba(30, 100, 255, 0.10) 0%, transparent 60% ), linear-gradient( 160deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 40%, rgba(255, 255, 255, 0.00) 100% ) !important; mix-blend-mode: screen !important; } /* --- 36f. Content z-index layering --- */ .customer-login-modal .modal-content > *, div[id="customer-login-modal"] .modal-content > * { position: relative !important; z-index: 2 !important; } /* --- 36g. Modal header --- */ .customer-login-modal .modal-header, div[id="customer-login-modal"] .modal-header { padding: 22px 24px 16px !important; border-bottom: 1px solid rgba(0, 210, 255, 0.09) !important; background: transparent !important; align-items: center !important; } /* --- 36h. Modal title --- */ .customer-login-modal .modal-title, div[id="customer-login-modal"] .modal-title { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: clamp(16px, 2.2vw, 20px) !important; letter-spacing: -0.025em !important; background: linear-gradient( 90deg, rgba(220, 250, 255, 0.96) 0%, rgba(80, 210, 255, 0.96) 45%, rgba(220, 250, 255, 0.96) 100% ) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: loginTitleFlow 6s ease-in-out infinite !important; margin: 0 !important; } /* --- 36i. Close (×) button --- */ .customer-login-modal .btn-close, div[id="customer-login-modal"] .btn-close { position: relative !important; z-index: 5 !important; width: 32px !important; height: 32px !important; padding: 0 !important; border-radius: 10px !important; background: rgba(2, 26, 36, 0.50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='rgba(180,230,255,0.75)' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat !important; border: 1px solid rgba(0, 210, 255, 0.14) !important; opacity: 1 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 10px rgba(0, 0, 0, 0.25) !important; transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important; -webkit-backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important; } .customer-login-modal .btn-close:hover, div[id="customer-login-modal"] .btn-close:hover { transform: translateY(-1px) scale(1.06) !important; background-color: rgba(2, 32, 44, 0.70) !important; border-color: rgba(0, 210, 255, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px rgba(0, 0, 0, 0.30), 0 0 16px rgba(0, 210, 255, 0.12) !important; } .customer-login-modal .btn-close:active, div[id="customer-login-modal"] .btn-close:active { transform: scale(0.94) !important; transition-duration: 80ms !important; } /* --- 36j. Modal body --- */ .customer-login-modal .modal-body, div[id="customer-login-modal"] .modal-body { padding: 20px 24px 26px !important; background: transparent !important; } /* --- 36k. Labels --- */ .customer-login-modal .modal-body .form-label, div[id="customer-login-modal"] .modal-body .form-label, .customer-login-modal .modal-body label, div[id="customer-login-modal"] .modal-body label { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; color: rgba(220, 250, 255, 0.88) !important; margin-bottom: 6px !important; display: block !important; } /* --- 36l. Helper text under label --- */ .customer-login-modal .modal-body .form-text, .customer-login-modal .modal-body small, div[id="customer-login-modal"] .modal-body .form-text, div[id="customer-login-modal"] .modal-body small { font-size: 13px !important; color: rgba(180, 225, 255, 0.60) !important; margin-top: 3px !important; display: block !important; margin-bottom: 12px !important; } /* --- 36m. Email input --- */ .customer-login-modal .modal-body .form-control, div[id="customer-login-modal"] .modal-body .form-control { background: rgba(2, 26, 36, 0.38) !important; color: rgba(220, 250, 255, 0.92) !important; border: 1px solid rgba(0, 210, 255, 0.18) !important; border-radius: 12px !important; padding: 12px 16px !important; font-size: 15px !important; font-family: 'Inter', sans-serif !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 -1px 0 rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.20) !important; transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease !important; } .customer-login-modal .modal-body .form-control::placeholder, div[id="customer-login-modal"] .modal-body .form-control::placeholder { color: rgba(180, 225, 255, 0.35) !important; } .customer-login-modal .modal-body .form-control:focus, div[id="customer-login-modal"] .modal-body .form-control:focus { outline: none !important; border-color: rgba(0, 210, 255, 0.38) !important; background: rgba(2, 30, 42, 0.50) !important; box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 12px rgba(0, 0, 0, 0.22) !important; } /* --- 36n. Continue button --- */ .customer-login-modal .modal-body .btn-primary, div[id="customer-login-modal"] .modal-body .btn-primary, .customer-login-modal .modal-body button[type="submit"], div[id="customer-login-modal"] .modal-body button[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; padding: 13px 20px !important; margin-top: 8px !important; border-radius: 14px !important; font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: 0.05em !important; color: rgba(220, 250, 255, 0.96) !important; background: rgba(0, 185, 255, 0.11) !important; border: 1px solid rgba(0, 185, 255, 0.32) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.28), 0 0 20px rgba(0, 185, 255, 0.12) !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; animation: loginBtnPulse 2.8s ease-in-out infinite !important; } .customer-login-modal .modal-body .btn-primary:hover, div[id="customer-login-modal"] .modal-body .btn-primary:hover, .customer-login-modal .modal-body button[type="submit"]:hover, div[id="customer-login-modal"] .modal-body button[type="submit"]:hover { transform: translateY(-2px) !important; background: rgba(0, 185, 255, 0.18) !important; border-color: rgba(0, 185, 255, 0.52) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 32px rgba(0, 0, 0, 0.34), 0 0 30px rgba(0, 185, 255, 0.24), 0 0 60px rgba(0, 185, 255, 0.12) !important; } .customer-login-modal .modal-body .btn-primary:active, div[id="customer-login-modal"] .modal-body .btn-primary:active, .customer-login-modal .modal-body button[type="submit"]:active, div[id="customer-login-modal"] .modal-body button[type="submit"]:active { transform: translateY(0) scale(0.98) !important; animation: none !important; transition-duration: 80ms !important; } .customer-login-modal .modal-body .btn-primary:disabled, div[id="customer-login-modal"] .modal-body .btn-primary:disabled, .customer-login-modal .modal-body button[type="submit"]:disabled, div[id="customer-login-modal"] .modal-body button[type="submit"]:disabled { opacity: 0.55 !important; transform: none !important; animation: none !important; cursor: not-allowed !important; } /* --- 36o. Keyframes --- */ @keyframes loginModalEnter { 0% { transform: translateY(20px) scale(0.97); opacity: 0; } 60% { transform: translateY(-3px) scale(1.005); } 100% { transform: translateY(0) scale(1); opacity: 1; } } @keyframes loginBorderFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes loginTitleFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes loginBtnPulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.28), 0 0 20px rgba(0,185,255,0.12); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.28), 0 0 32px rgba(0,185,255,0.22); } } /* --- 36p. Mobile overrides --- */ @media (max-width: 520px) { .customer-login-modal .modal-content, div[id="customer-login-modal"] .modal-content { border-radius: 14px !important; } .customer-login-modal .modal-header, div[id="customer-login-modal"] .modal-header { padding: 18px 18px 14px !important; } .customer-login-modal .modal-body, div[id="customer-login-modal"] .modal-body { padding: 16px 18px 20px !important; } } /* ========================================================================== 37) CUSTOMER DASHBOARD ========================================================================== */ /* --- 37a. Page section wrapper --- */ section.py-5-nav { position: relative; isolation: isolate; padding: 32px 0 !important; } /* --- 37b. Sidebar card (Customer Dashboard + nav) --- */ section.py-5-nav .col-12.col-lg-3.mb-4 .card.p-4 { position: relative !important; overflow: hidden !important; isolation: isolate !important; background: radial-gradient(140% 140% at 50% 0%, rgba(1, 22, 30, 0.96) 0%, rgba(1, 18, 26, 0.90) 55%, rgba(1, 14, 22, 0.84) 100% ) !important; border: 1px solid rgba(0, 210, 255, 0.12) !important; border-radius: 18px !important; -webkit-backdrop-filter: blur(14px) saturate(130%) !important; backdrop-filter: blur(14px) saturate(130%) !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.40), 0 0 0 1px rgba(0, 210, 255, 0.05) inset !important; } /* decorative glow layer */ section.py-5-nav .col-12.col-lg-3.mb-4 .card.p-4::before { content: "" !important; position: absolute !important; inset: -20% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(ellipse 65% 50% at 20% 15%, rgba(0, 210, 255, 0.12) 0%, transparent 60% ), radial-gradient(ellipse 50% 45% at 80% 85%, rgba(30, 100, 255, 0.09) 0%, transparent 58% ); filter: blur(22px) !important; opacity: 0.85 !important; } /* top edge shimmer */ section.py-5-nav .col-12.col-lg-3.mb-4 .card.p-4::after { content: "" !important; position: absolute !important; top: 0 !important; left: 8% !important; right: 8% !important; height: 1px !important; pointer-events: none !important; z-index: 1 !important; background: linear-gradient( 90deg, transparent, rgba(0, 210, 255, 0.22) 30%, rgba(255, 255, 255, 0.14) 50%, rgba(0, 210, 255, 0.22) 70%, transparent ) !important; } section.py-5-nav .col-12.col-lg-3.mb-4 .card.p-4 > * { position: relative !important; z-index: 2 !important; } /* --- 37c. Sidebar title (Customer Dashboard) --- */ section.py-5-nav .col-12.col-lg-3.mb-4 .card.p-4 h5 { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: -0.025em !important; margin-bottom: 4px !important; background: linear-gradient( 90deg, rgba(220, 250, 255, 0.96) 0%, rgba(80, 210, 255, 0.90) 50%, rgba(220, 250, 255, 0.96) 100% ) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: dashTitleFlow 6s ease-in-out infinite !important; } @keyframes dashTitleFlow { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- 37d. Sidebar subtitle (Logged in as ...) --- */ section.py-5-nav .col-12.col-lg-3.mb-4 .card.p-4 small.text-muted { font-family: 'Inter', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; color: rgba(180, 225, 255, 0.55) !important; display: block !important; margin-bottom: 14px !important; word-break: break-all !important; } /* --- 37e. Sidebar divider --- */ section.py-5-nav .col-12.col-lg-3.mb-4 .card.p-4 hr { border: none !important; height: 1px !important; background: linear-gradient( 90deg, transparent, rgba(0, 210, 255, 0.20) 25%, rgba(0, 210, 255, 0.32) 50%, rgba(0, 210, 255, 0.20) 75%, transparent ) !important; margin: 10px 0 14px !important; opacity: 1 !important; } /* --- 37f. Nav pills container --- */ section.py-5-nav .col-12.col-lg-3.mb-4 ul.nav.flex-column.gap-2.nav-pills { display: flex !important; flex-direction: column !important; gap: 6px !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } /* --- 37g. Nav pill item --- */ section.py-5-nav .col-12.col-lg-3.mb-4 ul.nav.flex-column.gap-2.nav-pills .nav-item { width: 100% !important; } /* --- 37h. Nav pill link (base) --- */ section.py-5-nav .col-12.col-lg-3.mb-4 ul.nav.flex-column.gap-2.nav-pills .nav-link { display: flex !important; align-items: center !important; width: 100% !important; padding: 9px 14px !important; border-radius: 12px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: 0.01em !important; color: rgba(180, 225, 255, 0.72) !important; background: transparent !important; border: 1px solid transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; text-decoration: none !important; transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important; } /* --- 37i. Nav pill link hover --- */ section.py-5-nav .col-12.col-lg-3.mb-4 ul.nav.flex-column.gap-2.nav-pills .nav-link:hover { color: rgba(210, 248, 255, 0.90) !important; background: rgba(0, 210, 255, 0.06) !important; border-color: rgba(0, 210, 255, 0.14) !important; transform: translateX(3px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 12px rgba(0,0,0,0.15) !important; } /* --- 37j. Nav pill link active (Dashboard) --- */ section.py-5-nav .col-12.col-lg-3.mb-4 ul.nav.flex-column.gap-2.nav-pills .nav-link.active, section.py-5-nav .col-12.col-lg-3.mb-4 ul.nav.flex-column.gap-2.nav-pills .nav-link.show { color: rgba(225, 252, 255, 0.96) !important; background: rgba(0, 185, 255, 0.12) !important; border-color: rgba(0, 185, 255, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 6px 18px rgba(0,0,0,0.22), 0 0 18px rgba(0, 185, 255, 0.12) !important; transform: none !important; } section.py-5-nav .col-12.col-lg-3.mb-4 ul.nav.flex-column.gap-2.nav-pills .nav-link:active { transform: translateX(1px) scale(0.98) !important; transition-duration: 80ms !important; } /* --- 37k. Stat cards (Completed Orders / Total Spent / Customer Since) --- */ section.py-5-nav .col-12.col-lg-9 .card.p-4 { position: relative !important; overflow: hidden !important; isolation: isolate !important; background: radial-gradient(140% 130% at 50% 0%, rgba(1, 22, 30, 0.95) 0%, rgba(1, 18, 26, 0.88) 60%, rgba(1, 14, 22, 0.82) 100% ) !important; border: 1px solid rgba(0, 210, 255, 0.10) !important; border-radius: 16px !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; backdrop-filter: blur(12px) saturate(125%) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(0, 210, 255, 0.04) inset !important; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; } /* stat card glow */ section.py-5-nav .col-12.col-lg-9 .card.p-4::before { content: "" !important; position: absolute !important; inset: -25% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(ellipse 60% 50% at 20% 15%, rgba(0, 210, 255, 0.10) 0%, transparent 58% ), radial-gradient(ellipse 50% 40% at 78% 80%, rgba(30, 100, 255, 0.08) 0%, transparent 55% ); filter: blur(20px) !important; opacity: 0.80 !important; } /* stat card top shimmer */ section.py-5-nav .col-12.col-lg-9 .card.p-4::after { content: "" !important; position: absolute !important; top: 0 !important; left: 8% !important; right: 8% !important; height: 1px !important; pointer-events: none !important; z-index: 1 !important; background: linear-gradient( 90deg, transparent, rgba(0, 210, 255, 0.18) 30%, rgba(255, 255, 255, 0.10) 50%, rgba(0, 210, 255, 0.18) 70%, transparent ) !important; } section.py-5-nav .col-12.col-lg-9 .card.p-4 > * { position: relative !important; z-index: 2 !important; } section.py-5-nav .col-12.col-lg-9 .card.p-4:hover { transform: translateY(-3px) !important; border-color: rgba(0, 210, 255, 0.20) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44), 0 0 24px rgba(0, 210, 255, 0.10), 0 0 0 1px rgba(0, 210, 255, 0.06) inset !important; } /* --- 37l. Stat card headings (h4) --- */ section.py-5-nav .col-12.col-lg-9 .card.p-4 h4 { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: -0.01em !important; margin-bottom: 10px !important; color: rgba(180, 225, 255, 0.70) !important; text-transform: none !important; } /* --- 37m. Stat card values (p.mb-0) --- */ section.py-5-nav .col-12.col-lg-9 .card.p-4 p.mb-0 { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: clamp(20px, 2.2vw, 28px) !important; letter-spacing: -0.02em !important; color: rgba(220, 250, 255, 0.95) !important; text-shadow: 0 0 6px rgba(0, 210, 255, 0.20), 0 0 14px rgba(0, 120, 255, 0.12) !important; margin: 0 !important; line-height: 1.2 !important; } /* --- 37n. Latest Order card --- */ section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4 { position: relative !important; overflow: hidden !important; isolation: isolate !important; background: radial-gradient(130% 130% at 40% 0%, rgba(1, 22, 30, 0.96) 0%, rgba(1, 18, 26, 0.90) 55%, rgba(1, 14, 22, 0.84) 100% ) !important; border: 1px solid rgba(0, 210, 255, 0.10) !important; border-radius: 16px !important; -webkit-backdrop-filter: blur(12px) saturate(125%) !important; backdrop-filter: blur(12px) saturate(125%) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 210, 255, 0.04) inset !important; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; } section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4::before { content: "" !important; position: absolute !important; inset: -20% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(ellipse 70% 50% at 15% 20%, rgba(0, 210, 255, 0.10) 0%, transparent 60% ), radial-gradient(ellipse 55% 45% at 85% 80%, rgba(30, 100, 255, 0.08) 0%, transparent 58% ); filter: blur(22px) !important; opacity: 0.80 !important; } section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4::after { content: "" !important; position: absolute !important; top: 0 !important; left: 8% !important; right: 8% !important; height: 1px !important; pointer-events: none !important; z-index: 1 !important; background: linear-gradient( 90deg, transparent, rgba(0, 210, 255, 0.18) 30%, rgba(255, 255, 255, 0.10) 50%, rgba(0, 210, 255, 0.18) 70%, transparent ) !important; } section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4 > * { position: relative !important; z-index: 2 !important; } section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4:hover { transform: translateY(-3px) !important; border-color: rgba(0, 210, 255, 0.20) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44), 0 0 24px rgba(0, 210, 255, 0.10), 0 0 0 1px rgba(0, 210, 255, 0.06) inset !important; } /* --- 37o. Latest Order label (h5) --- */ section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4 h5.mb-0 { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 12px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(0, 210, 255, 0.65) !important; margin-bottom: 8px !important; } /* --- 37p. Latest Order product title (h4 inside mt-2) --- */ section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4 .mt-2 h4 { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: clamp(16px, 1.8vw, 20px) !important; letter-spacing: -0.02em !important; line-height: 1.3 !important; margin-bottom: 10px !important; color: rgba(220, 250, 255, 0.96) !important; } /* --- 37q. Latest Order invoice line (small.text-muted) --- */ section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4 small.mb-0.text-muted { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: rgba(180, 225, 255, 0.50) !important; } /* invoice link */ section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4 small.mb-0.text-muted a { color: rgba(0, 185, 255, 0.80) !important; text-decoration: none !important; border-bottom: 1px solid rgba(0, 185, 255, 0.22) !important; transition: color 180ms ease, border-color 180ms ease !important; } section.py-5-nav .col-12.col-lg-8.mb-4 .card.p-4 small.mb-0.text-muted a:hover { color: rgba(0, 210, 255, 0.96) !important; border-bottom-color: rgba(0, 210, 255, 0.50) !important; } /* --- 37r. Delete Account button --- */ section.py-5-nav button.btn-outline-danger { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 10px 22px !important; border-radius: 12px !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: 0.02em !important; color: rgba(255, 100, 120, 0.85) !important; background: rgba(180, 0, 40, 0.08) !important; border: 1px solid rgba(255, 80, 110, 0.22) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 6px 18px rgba(0, 0, 0, 0.24) !important; transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease !important; } section.py-5-nav button.btn-outline-danger:hover { transform: translateY(-2px) !important; color: rgba(255, 120, 140, 0.95) !important; background: rgba(180, 0, 40, 0.14) !important; border-color: rgba(255, 80, 110, 0.40) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(0, 0, 0, 0.30), 0 0 20px rgba(255, 60, 100, 0.14) !important; } section.py-5-nav button.btn-outline-danger:active { transform: scale(0.97) !important; transition-duration: 80ms !important; } /* --- 37s. Global card text colour inside dashboard --- */ section.py-5-nav .card.p-4, section.py-5-nav .card.p-4 * { color: rgba(220, 250, 255, 0.92); } /* ========================================================================== 38) DASHBOARD TABLES (Orders, Affiliates, etc.) ========================================================================== */ /* --- 38a. Table wrapper reset --- */ section.py-5-nav .card.p-4 .table-responsive, section.py-5-nav .card.p-4 table.table { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* --- 38b. Table base --- */ section.py-5-nav table.table { width: 100% !important; border-collapse: separate !important; border-spacing: 0 6px !important; color: rgba(220, 250, 255, 0.92) !important; } /* --- 38c. Table head --- */ section.py-5-nav table.table thead tr { background: transparent !important; } section.py-5-nav table.table thead th { background: rgba(0, 210, 255, 0.06) !important; border: 0 !important; border-bottom: 1px solid rgba(0, 210, 255, 0.14) !important; color: rgba(0, 210, 255, 0.70) !important; font-family: 'Inter', sans-serif !important; font-weight: 700 !important; font-size: 11px !important; letter-spacing: 0.10em !important; text-transform: uppercase !important; padding: 10px 14px !important; white-space: nowrap !important; } section.py-5-nav table.table thead th:first-child { border-radius: 10px 0 0 10px !important; } section.py-5-nav table.table thead th:last-child { border-radius: 0 10px 10px 0 !important; } /* --- 38d. Table body rows --- */ section.py-5-nav table.table tbody tr.small { background: rgba(2, 26, 36, 0.30) !important; transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease !important; } section.py-5-nav table.table tbody tr.small:hover { background: rgba(0, 210, 255, 0.06) !important; transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 210, 255, 0.10) !important; } /* --- 38e. Table body cells --- */ section.py-5-nav table.table tbody td { background: transparent !important; border: 0 !important; border-top: 1px solid rgba(0, 210, 255, 0.06) !important; color: rgba(220, 250, 255, 0.88) !important; font-family: 'Inter', sans-serif !important; font-size: 13.5px !important; font-weight: 500 !important; line-height: 1.5 !important; padding: 10px 14px !important; vertical-align: middle !important; } section.py-5-nav table.table tbody td:first-child { border-radius: 10px 0 0 10px !important; border-top-color: transparent !important; } section.py-5-nav table.table tbody td:last-child { border-radius: 0 10px 10px 0 !important; border-top-color: transparent !important; } /* --- 38f. Status / text-capitalize cell --- */ section.py-5-nav table.table td.text-capitalize { font-weight: 700 !important; } /* "Pending" badge */ section.py-5-nav table.table td.text-capitalize:first-child { position: relative !important; } /* small date line under status */ section.py-5-nav table.table td small, section.py-5-nav table.table td .text-muted { color: rgba(180, 225, 255, 0.45) !important; font-size: 11.5px !important; display: block !important; margin-top: 2px !important; } /* --- 38g. Order ID links --- */ section.py-5-nav table.table td a { color: rgba(0, 190, 255, 0.85) !important; text-decoration: none !important; font-weight: 600 !important; border-bottom: 1px solid rgba(0, 190, 255, 0.22) !important; transition: color 180ms ease, border-color 180ms ease !important; word-break: break-all !important; } section.py-5-nav table.table td a:hover { color: rgba(0, 220, 255, 0.98) !important; border-bottom-color: rgba(0, 220, 255, 0.50) !important; text-shadow: 0 0 12px rgba(0, 210, 255, 0.18) !important; } /* --- 38h. Price cell --- */ section.py-5-nav table.table td:has(> *:only-child) { font-variant-numeric: tabular-nums !important; } /* Bold price column */ section.py-5-nav table.table td:nth-child(4) { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 14px !important; color: rgba(235, 252, 255, 0.96) !important; text-shadow: 0 0 8px rgba(0, 210, 255, 0.12) !important; } /* --- 38i. Empty state ("No referred customers yet.") --- */ section.py-5-nav table.table tbody td[colspan] { text-align: center !important; color: rgba(180, 225, 255, 0.45) !important; font-style: italic !important; padding: 20px 14px !important; border: 0 !important; background: transparent !important; border-radius: 10px !important; } /* --- 38j. Bottom gold stripe fix — remove default browser styling --- */ section.py-5-nav table.table tfoot tr td, section.py-5-nav table.table tfoot { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* --- 38k. Table divider line between head and body --- */ section.py-5-nav table.table thead { box-shadow: 0 1px 0 rgba(0, 210, 255, 0.10) !important; } /* --- 38l. Scrollable wrapper glass hint --- */ section.py-5-nav .card.p-4 .table-responsive { border-radius: 12px !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; /* subtle inner shadow on scroll edges */ background: linear-gradient(90deg, rgba(1,22,30,0.30) 0%, transparent 40px) no-repeat left, linear-gradient(270deg, rgba(1,22,30,0.30) 0%, transparent 40px) no-repeat right !important; background-size: 40px 100%, 40px 100% !important; background-attachment: local, local !important; } /* scrollbar styling */ section.py-5-nav .card.p-4 .table-responsive::-webkit-scrollbar { height: 4px !important; } section.py-5-nav .card.p-4 .table-responsive::-webkit-scrollbar-track { background: rgba(0, 210, 255, 0.04) !important; border-radius: 99px !important; } section.py-5-nav .card.p-4 .table-responsive::-webkit-scrollbar-thumb { background: rgba(0, 210, 255, 0.22) !important; border-radius: 99px !important; } section.py-5-nav .card.p-4 .table-responsive::-webkit-scrollbar-thumb:hover { background: rgba(0, 210, 255, 0.40) !important; } /* ========================================================================== 39) AFFILIATE & EXTRA DASHBOARD CARDS ========================================================================== */ /* --- 39a. Variables (local) --- */ /* Uses existing :root vars: --glass-bg, --glass-border, --glass-text */ /* --- 39b. md-6 col cards (Affiliate Link, Affiliate Rewards, View Your Balance, View Your Balance History, etc.) --- */ section.py-5-nav .col-12.col-md-6.mb-4 .card.p-4, section.py-5-nav .col-12.col-md-6.mb-4 .card { position: relative !important; overflow: hidden !important; isolation: isolate !important; background: radial-gradient(130% 130% at 40% 0%, rgba(1, 22, 30, 0.96) 0%, rgba(1, 18, 26, 0.90) 55%, rgba(1, 14, 22, 0.84) 100% ) !important; border: 1px solid rgba(0, 210, 255, 0.10) !important; border-radius: 16px !important; -webkit-backdrop-filter: blur(14px) saturate(125%) !important; backdrop-filter: blur(14px) saturate(125%) !important; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 210, 255, 0.04) inset !important; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important; } /* glow blob */ section.py-5-nav .col-12.col-md-6.mb-4 .card.p-4::before, section.py-5-nav .col-12.col-md-6.mb-4 .card::before { content: "" !important; position: absolute !important; inset: -20% !important; pointer-events: none !important; z-index: 0 !important; background: radial-gradient(ellipse 65% 50% at 18% 15%, rgba(0, 210, 255, 0.10) 0%, transparent 60% ), radial-gradient(ellipse 50% 42% at 82% 82%, rgba(30, 100, 255, 0.08) 0%, transparent 58% ); filter: blur(22px) !important; opacity: 0.80 !important; } /* top shimmer */ section.py-5-nav .col-12.col-md-6.mb-4 .card.p-4::after, section.py-5-nav .col-12.col-md-6.mb-4 .card::after { content: "" !important; position: absolute !important; top: 0 !important; left: 8% !important; right: 8% !important; height: 1px !important; pointer-events: none !important; z-index: 1 !important; background: linear-gradient( 90deg, transparent, rgba(0, 210, 255, 0.20) 30%, rgba(255, 255, 255, 0.12) 50%, rgba(0, 210, 255, 0.20) 70%, transparent ) !important; } section.py-5-nav .col-12.col-md-6.mb-4 .card.p-4 > *, section.py-5-nav .col-12.col-md-6.mb-4 .card > * { position: relative !important; z-index: 2 !important; } section.py-5-nav .col-12.col-md-6.mb-4 .card.p-4:hover, section.py-5-nav .col-12.col-md-6.mb-4 .card:hover { transform: translateY(-3px) !important; border-color: rgba(0, 210, 255, 0.20) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.44), 0 0 24px rgba(0, 210, 255, 0.10), 0 0 0 1px rgba(0, 210, 255, 0.06) inset !important; } /* --- 39c. Card headings (h5) inside md-6 cards --- */ section.py-5-nav .col-12.col-md-6.mb-4 .card h5 { font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 16px !important; letter-spacing: -0.02em !important; margin-bottom: 8px !important; background: linear-gradient( 90deg, rgba(220, 250, 255, 0.96) 0%, rgba(80, 210, 255, 0.88) 50%, rgba(220, 250, 255, 0.96) 100% ) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; animation: affCardTitle 7s ease-in-out infinite !important; } @keyframes affCardTitle { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- 39d. Card body text --- */ section.py-5-nav .col-12.col-md-6.mb-4 .card p { color: rgba(190, 230, 255, 0.72) !important; font-size: 14px !important; line-height: 1.60 !important; margin-bottom: 0 !important; } /* Large percentage value (15%) */ section.py-5-nav .col-12.col-md-6.mb-4 .card p.h2, section.py-5-nav .col-12.col-md-6.mb-4 .card .h2, section.py-5-nav .col-12.col-md-6.mb-4 .card [class*="display"] { font-family: 'Syne', sans-serif !important; font-weight: 800 !important; font-size: clamp(24px, 3vw, 36px) !important; letter-spacing: -0.03em !important; color: rgba(220, 250, 255, 0.96) !important; text-shadow: 0 0 8px rgba(0, 210, 255, 0.22), 0 0 20px rgba(0, 120, 255, 0.14) !important; } /* --- 39e. "View Your Balance" / "View Your Balance History" link cards --- */ section.py-5-nav .col-12.col-md-6.mb-4 .card a.card, section.py-5-nav .col-12.col-md-6.mb-4 a.card { display: flex !important; align-items: center !important; justify-content: space-between !important; text-decoration: none !important; cursor: pointer !important; padding: 20px !important; } section.py-5-nav .col-12.col-md-6.mb-4 a.card h5 { color: rgba(220, 250, 255, 0.92) !important; } /* arrow icon on link cards */ section.py-5-nav .col-12.col-md-6.mb-4 a.card svg, section.py-5-nav .col-12.col-md-6.mb-4 .card a svg { color: rgba(0, 210, 255, 0.65) !important; transition: transform 200ms ease, color 200ms ease !important; } section.py-5-nav .col-12.col-md-6.mb-4 a.card:hover svg, section.py-5-nav .col-12.col-md-6.mb-4 .card a:hover svg { transform: translate(3px, -3px) !important; color: rgba(0, 210, 255, 0.95) !important; } /* ========================================================================== 40) AFFILIATE LINK BUTTON — GLASS + COPY ANIMATION ========================================================================== */ /* --- 40a. Button base --- */ button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1, [x-ref="affiliateLink"] { display: inline-flex !important; align-items: center !important; width: 100% !important; padding: 11px 16px !important; border-radius: 12px !important; font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: 0.01em !important; text-align: left !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; text-decoration: none !important; color: rgba(0, 190, 255, 0.90) !important; background: rgba(0, 185, 255, 0.08) !important; border: 1px solid rgba(0, 185, 255, 0.26) !important; -webkit-backdrop-filter: blur(10px) saturate(120%) !important; backdrop-filter: blur(10px) saturate(120%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 18px rgba(0, 185, 255, 0.08) !important; cursor: pointer !important; position: relative !important; overflow: hidden !important; z-index: 0 !important; transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, color 200ms ease !important; } /* top edge shimmer */ button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1::before, [x-ref="affiliateLink"]::before { content: "" !important; position: absolute !important; top: 0 !important; left: 6% !important; right: 6% !important; height: 1px !important; pointer-events: none !important; z-index: 1 !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; background-color: transparent !important; background: linear-gradient( 90deg, transparent, rgba(0, 185, 255, 0.28) 35%, rgba(255, 255, 255, 0.14) 50%, rgba(0, 185, 255, 0.28) 65%, transparent ) !important; } /* hover */ button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1:hover, [x-ref="affiliateLink"]:hover { transform: translateY(-1px) !important; background: rgba(0, 185, 255, 0.13) !important; border-color: rgba(0, 185, 255, 0.42) !important; color: rgba(0, 220, 255, 0.98) !important; text-shadow: 0 0 10px rgba(0, 210, 255, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 20px rgba(0, 0, 0, 0.28), 0 0 24px rgba(0, 185, 255, 0.16) !important; } /* active / press */ button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1:active, [x-ref="affiliateLink"]:active { transform: scale(0.98) !important; transition-duration: 80ms !important; } /* --- 40b. COPIED state (Alpine x-if="copied" template shows a sibling) --- */ /* When :disabled is set (copying in progress), pulse the border */ button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1:disabled, [x-ref="affiliateLink"]:disabled { cursor: default !important; transform: none !important; pointer-events: none !important; color: rgba(0, 230, 180, 0.92) !important; background: rgba(0, 200, 160, 0.10) !important; border-color: rgba(0, 220, 175, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 24px rgba(0, 220, 175, 0.20) !important; animation: affilinkCopied 600ms cubic-bezier(.22, 1.25, .36, 1) both !important; } /* --- 40c. Copy ripple keyframe --- */ @keyframes affilinkCopied { 0% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 14px rgba(0,0,0,0.22), 0 0 0 0 rgba(0, 220, 175, 0.55); border-color: rgba(0, 220, 175, 0.38); } 25% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 14px rgba(0,0,0,0.22), 0 0 0 6px rgba(0, 220, 175, 0.22), 0 0 30px rgba(0, 220, 175, 0.28); border-color: rgba(0, 220, 175, 0.65); } 55% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 4px 14px rgba(0,0,0,0.22), 0 0 0 12px rgba(0, 220, 175, 0.08), 0 0 40px rgba(0, 220, 175, 0.18); border-color: rgba(0, 220, 175, 0.50); } 100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.22), 0 0 0 16px rgba(0, 220, 175, 0.00), 0 0 24px rgba(0, 220, 175, 0.12); border-color: rgba(0, 220, 175, 0.38); } } /* --- 40d. "Copied!" text flash (the template that appears) --- */ section.py-5-nav .col-12.col-md-6.mb-4 [x-if="copied"], section.py-5-nav .col-12.col-md-6.mb-4 [x-show="copied"], section.py-5-nav .col-12.col-md-6.mb-4 template + * { display: inline-flex !important; align-items: center !important; gap: 5px !important; color: rgba(0, 220, 175, 0.92) !important; font-family: 'Syne', sans-serif !important; font-weight: 700 !important; font-size: 13px !important; letter-spacing: 0.02em !important; background: rgba(0, 200, 160, 0.10) !important; border: 1px solid rgba(0, 220, 175, 0.30) !important; border-radius: 10px !important; padding: 8px 14px !important; box-shadow: 0 0 18px rgba(0, 220, 175, 0.16), inset 0 1px 0 rgba(255,255,255,0.05) !important; animation: copiedTextPop 300ms cubic-bezier(.22, 1.25, .36, 1) both !important; } @keyframes copiedTextPop { 0% { opacity: 0; transform: scale(0.85) translateY(4px); } 60% { opacity: 1; transform: scale(1.04) translateY(-1px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* --- 40e. Glint sweep on the affiliate link box --- */ button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1::after, [x-ref="affiliateLink"]::after { content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important; z-index: 0 !important; border-radius: inherit !important; background: linear-gradient( 105deg, transparent 25%, rgba(0, 185, 255, 0.09) 46%, rgba(255, 255, 255, 0.05) 50%, rgba(0, 185, 255, 0.09) 54%, transparent 75% ) !important; background-size: 250% 100% !important; background-position: 200% 0 !important; opacity: 0 !important; transition: opacity 200ms ease !important; } button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1:hover::after, [x-ref="affiliateLink"]:hover::after { opacity: 1 !important; animation: afflinkGlint 1.6s ease-in-out infinite !important; } @keyframes afflinkGlint { 0% { background-position: 200% 0; } 60% { background-position: -50% 0; } 100% { background-position: -50% 0; opacity: 0; } } /* --- 40f. Accessibility: reduced motion --- */ @media (prefers-reduced-motion: reduce) { button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1, [x-ref="affiliateLink"], button.btn.btn-link.text-start.p-0.text-decoration-none.fw-semibold.text-truncate.flex-grow-1::after, [x-ref="affiliateLink"]::after { animation: none !important; transition: none !important; } } /* --- Fix: hide Alpine template ghost element --- */ section.py-5-nav .col-12.col-md-6.mb-4 template, section.py-5-nav template[x-if="copied"] { display: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; }