/* ===================================================================== Aegon Tools — glassmorphism theme, matched to the live site Fonts: Clash Display (headings) + Poppins (body) Light + dark mode via [data-theme] on ===================================================================== */ /* ===================================================================== CUSTOM CURSOR — enabled by JS only after a real mouse is detected ===================================================================== */ @media (any-hover:hover) and (any-pointer:fine) { html.cursor-ready *, html.cursor-ready *::before, html.cursor-ready *::after { cursor: none !important; } } #cur-dot, #cur-ring, .cur-trail, .cur-ripple { position: fixed; top: 0; left: 0; pointer-events: none; opacity: 0; will-change: transform, opacity; } /* Precise luminous core */ #cur-dot { z-index: 100001; width: 7px; height: 7px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 50%; background: linear-gradient(135deg, #c4b5fd, var(--violet, #7c5cff)); box-shadow: 0 0 8px rgba(124, 92, 255, .9), 0 0 18px rgba(124, 92, 255, .35); transition: width .18s ease, height .18s ease, opacity .2s ease, background .18s ease, box-shadow .18s ease; } /* Soft glass ring with a moving highlight */ #cur-ring { z-index: 100000; width: 34px; height: 34px; border: 1px solid rgba(124, 92, 255, .6); border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .2), transparent 25%), rgba(124, 92, 255, .045); box-shadow: inset 0 0 10px rgba(124, 92, 255, .08), 0 0 16px rgba(124, 92, 255, .1); backdrop-filter: blur(1.5px); transition: width .28s cubic-bezier(.2, .8, .2, 1), height .28s cubic-bezier(.2, .8, .2, 1), border-color .2s ease, background .2s ease, opacity .2s ease; } html.cursor-ready body:not(.cur-away) #cur-dot, html.cursor-ready body:not(.cur-away) #cur-ring { opacity: 1; } /* Restrained comet particles */ .cur-trail { z-index: 99999; width: var(--trail-size, 5px); height: var(--trail-size, 5px); border-radius: 50%; background: radial-gradient(circle, rgba(196, 181, 253, .85), rgba(124, 92, 255, .15) 65%, transparent 72%); box-shadow: 0 0 8px rgba(124, 92, 255, .45); animation: curTrailFade .48s ease-out forwards; } @keyframes curTrailFade { from { opacity: .72; transform: translate3d(var(--x), var(--y), 0) scale(1); } to { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(.1); } } /* Interactive state */ body.cur-hover #cur-ring { width: 48px; height: 48px; border-color: rgba(167, 139, 250, .9); background: rgba(124, 92, 255, .1); box-shadow: inset 0 0 14px rgba(124, 92, 255, .12), 0 0 22px rgba(124, 92, 255, .18); } body.cur-hover #cur-dot { width: 5px; height: 5px; background: #fff; box-shadow: 0 0 10px #a78bfa, 0 0 22px rgba(124, 92, 255, .65); } body.cur-click #cur-dot { width: 14px; height: 14px; } body.cur-click #cur-ring { width: 58px; height: 58px; opacity: .45 !important; } body.cur-text #cur-dot { width: 2px; height: 19px; border-radius: 2px; } body.cur-text #cur-ring { opacity: .3 !important; } .cur-ripple { z-index: 99998; width: 12px; height: 12px; border: 1.5px solid rgba(139, 92, 246, .75); border-radius: 50%; animation: curRippleOut .55s cubic-bezier(.16, 1, .3, 1) forwards; } @keyframes curRippleOut { from { opacity: .85; transform: translate3d(var(--x), var(--y), 0) scale(.3); } to { opacity: 0; transform: translate3d(var(--x), var(--y), 0) scale(4.5); } } @media (prefers-reduced-motion: reduce) { .cur-trail { display: none; } #cur-ring { transition-duration: .01ms; } } @media (any-hover:none) and (any-pointer:coarse) { #cur-dot, #cur-ring, .cur-trail, .cur-ripple { display: none !important; } } /* ===================================================================== PAGE LOADER ===================================================================== */ /* Top progress bar */ #pg-bar { position: fixed; top: 0; left: 0; z-index: 99997; height: 3px; width: 0%; background: linear-gradient(90deg, #7c5cff, #a855f7, #ec4899, #7c5cff); background-size: 300% 100%; animation: pgShimmer 1.5s linear infinite; transition: width .4s ease, opacity .5s; box-shadow: 0 0 12px rgba(124, 92, 255, .7); border-radius: 0 2px 2px 0; } #pg-bar.done { width: 100% !important; opacity: 0; transition: width .2s ease, opacity .6s .1s } @keyframes pgShimmer { 0% { background-position: 300% 0 } 100% { background-position: 0% 0 } } /* Full-screen preloader */ #preloader, #sitePreloader, .preloader-overlay, .preloader { position: fixed; inset: 0; z-index: 99996; background: var(--bg, #f5f6fa); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1.2rem; transition: opacity .4s ease, visibility .4s ease; } [data-theme="dark"] #preloader, [data-theme="dark"] #sitePreloader, [data-theme="dark"] .preloader-overlay { background: #0e0e1a } #preloader.hidden, #preloader.fade-out, #sitePreloader.hidden, #sitePreloader.fade-out, .preloader-overlay.hidden, .preloader-overlay.fade-out { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important } .pl-logo { display: flex; align-items: center; gap: .7rem; animation: plPulse 1.2s ease-in-out infinite alternate; } @keyframes plPulse { from { transform: scale(1) } to { transform: scale(1.05) } } .pl-mark { width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, #7c5cff, #a855f7); display: grid; place-items: center; font-family: 'Clash Display', sans-serif; font-weight: 900; font-size: 1.5rem; color: #fff; box-shadow: 0 8px 32px rgba(124, 92, 255, .45); } .pl-name { font-family: 'Clash Display', sans-serif; font-weight: 900; font-size: 1.4rem; background: linear-gradient(135deg, #7c5cff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Spinner dots */ .pl-dots { display: flex; gap: .45rem; align-items: center } .pl-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #7c5cff, #a855f7); animation: plDot 1.2s ease-in-out infinite; box-shadow: 0 2px 8px rgba(124, 92, 255, .4); } .pl-dot:nth-child(1) { animation-delay: 0s } .pl-dot:nth-child(2) { animation-delay: .15s } .pl-dot:nth-child(3) { animation-delay: .3s } .pl-dot:nth-child(4) { animation-delay: .45s } @keyframes plDot { 0%, 80%, 100% { transform: scale(.5); opacity: .4 } 40% { transform: scale(1.2); opacity: 1 } } :root { --navy: #2c255e; --navy-2: #3a3178; --violet: #7c5cff; --violet-2: #9d7bff; --grad-2: #b39aff; --green: #16a34a; --green-bg: #e7f8ee; --wa: #25d366; --amber: #f59e0b; --orange: #f97316; --red: #ef4444; --bg: #efeff7; --grid-line: rgba(76, 60, 160, .035); --card: #f8f8fc; --surface-alt: rgba(242, 242, 249, .68); --glass: rgba(247, 247, 252, .8); --glass-strong: rgba(248, 248, 252, .94); --glass-border: rgba(210, 207, 229, .96); --chip-bg: rgba(44, 37, 94, .075); --ink: #373259; --ink-strong: #241d5d; --muted: #625e7c; --line: #d9d6e8; --danger: #e5484d; --shadow: 0 18px 44px rgba(44, 37, 94, .13); --shadow-sm: 0 6px 20px rgba(44, 37, 94, .08); --radius: 20px; --maxw: 1240px; --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-display: 'Clash Display', 'Poppins', system-ui, sans-serif; } [data-theme="dark"] { --bg: #0c0b18; --grid-line: rgba(255, 255, 255, .022); --card: #15132a; --surface-alt: rgba(255, 255, 255, .03); --glass: rgba(21, 19, 42, .78); --glass-strong: rgba(21, 19, 42, .94); --glass-border: rgba(255, 255, 255, .10); --chip-bg: rgba(255, 255, 255, .06); --ink: #cfcbe6; --ink-strong: #ffffff; --muted: #9a96bb; --line: rgba(255, 255, 255, .10); --green-bg: rgba(22, 163, 74, .16); --shadow: 0 18px 44px rgba(0, 0, 0, .5); --shadow-sm: 0 6px 20px rgba(0, 0, 0, .35); } /* ===================================================================== CUSTOM SCROLLBAR — slim, branded (light + dark) ===================================================================== */ /* ── Webkit (Chrome, Edge, Safari) ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--violet) 0%, var(--navy) 100%); border-radius: 100px; transition: background .25s; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--violet-2) 0%, var(--navy-2) 100%); box-shadow: 0 0 8px rgba(124, 92, 255, .55); } ::-webkit-scrollbar-corner { background: transparent; } /* ── Light mode track tint ── */ :root ::-webkit-scrollbar-track { background: rgba(44, 37, 94, .05); border-radius: 100px; } /* ── Dark mode ── */ [data-theme="dark"] ::-webkit-scrollbar-track { background: rgba(255, 255, 255, .04); border-radius: 100px; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--violet) 0%, #1a1235 100%); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--violet-2) 0%, var(--navy-2) 100%); box-shadow: 0 0 10px rgba(124, 92, 255, .7); } /* ── Firefox ── */ * { scrollbar-width: thin; scrollbar-color: var(--violet) transparent; } [data-theme="dark"] * { scrollbar-color: var(--violet) rgba(255, 255, 255, .04); } * { box-sizing: border-box } html { scroll-behavior: smooth } body { margin: 0; position: relative; isolation: isolate; font-family: var(--font-body); color: var(--ink); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(135deg, rgba(232, 231, 244, .82), rgba(224, 230, 242, .58) 48%, rgba(226, 232, 244, .72)); background-size: 40px 40px, 40px 40px, auto; background-attachment: scroll, scroll, fixed; } [data-theme="dark"] body { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(135deg, rgba(24, 20, 48, .7), rgba(17, 19, 35, .55)); background-size: 40px 40px, 40px 40px, auto; background-attachment: scroll, scroll, fixed; } /* Subtle, continuous atmosphere shared by every page with soft blur and theme color flares */ body::before { content: ''; position: fixed; inset: -20vh -20vw; z-index: 0; pointer-events: none; background: radial-gradient(circle at 10% 12%, rgba(79, 70, 229, .15) 0, rgba(79, 70, 229, .05) 20%, transparent 42%), radial-gradient(circle at 88% 25%, rgba(124, 58, 237, .13) 0, rgba(124, 58, 237, .04) 18%, transparent 40%), radial-gradient(circle at 45% 65%, rgba(14, 165, 233, .10) 0, rgba(14, 165, 233, .03) 22%, transparent 45%), radial-gradient(circle at 82% 85%, rgba(192, 132, 252, .11) 0, rgba(192, 132, 252, .035) 18%, transparent 38%), radial-gradient(circle at 18% 82%, rgba(16, 185, 129, .08) 0, rgba(16, 185, 129, .02) 19%, transparent 42%); filter: blur(68px); -webkit-filter: blur(68px); transform: translateZ(0); animation: themeFlaresPulse 18s ease-in-out infinite alternate; } [data-theme="dark"] body::before { background: radial-gradient(circle at 10% 12%, rgba(99, 102, 241, .20) 0, rgba(99, 102, 241, .06) 24%, transparent 48%), radial-gradient(circle at 88% 25%, rgba(168, 85, 247, .18) 0, rgba(168, 85, 247, .05) 20%, transparent 44%), radial-gradient(circle at 45% 65%, rgba(56, 189, 248, .14) 0, rgba(56, 189, 248, .035) 25%, transparent 48%), radial-gradient(circle at 82% 85%, rgba(232, 121, 249, .13) 0, rgba(232, 121, 249, .04) 22%, transparent 42%), radial-gradient(circle at 18% 82%, rgba(52, 211, 153, .10) 0, rgba(52, 211, 153, .025) 22%, transparent 45%); filter: blur(78px); -webkit-filter: blur(78px); } @keyframes themeFlaresPulse { 0% { transform: scale(1) translate(0, 0); } 50% { transform: scale(1.04) translate(-14px, 8px); } 100% { transform: scale(1.02) translate(10px, -12px); } } a { color: inherit; text-decoration: none } img { max-width: 100%; display: block } h1, h2, h3, h4, h5, h6 { line-height: 1.12; margin: 0 0 .5em; color: var(--ink-strong); font-weight: 700; font-family: var(--font-display) } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px } .hidden { display: none !important } .muted { color: var(--muted) } .text-center { text-align: center } .mt-1 { margin-top: .5rem } .mt-2 { margin-top: 1rem } .mt-3 { margin-top: 1.5rem } .mb-2 { margin-bottom: 1rem } .grad-text { background: linear-gradient(100deg, var(--violet) 10%, var(--grad-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent } /* floating ambient particles */ .particles { position: fixed; inset: 0; pointer-events: none; z-index: 0 } .particles i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--violet); opacity: .25; animation: floatp 7s ease-in-out infinite } .particles i:nth-child(2n) { width: 3px; height: 3px; animation-duration: 9s } .particles i:nth-child(3n) { animation-delay: 2s } .particles i:nth-child(4n) { animation-delay: 4s; animation-duration: 6s } @keyframes floatp { 0%, 100% { transform: translateY(0); opacity: .2 } 50% { transform: translateY(-18px); opacity: .45 } } .site-main, .site-header, .site-footer { position: relative; z-index: 1 } .site-main { min-height: calc(100vh - 70px); padding-top: 92px; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px) } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .72rem 1.4rem; border-radius: 999px; font-weight: 600; font-size: .93rem; border: 1px solid transparent; cursor: pointer; transition: .18s ease; white-space: nowrap; font-family: var(--font-body); } .btn:hover { transform: translateY(-1px) } .btn svg { flex: none } .btn-navy { background: var(--navy); color: #fff; box-shadow: 0 10px 24px rgba(44, 37, 94, .28) } .btn-navy:hover { background: var(--navy-2) } [data-theme="dark"] .btn-navy { background: var(--violet) } [data-theme="dark"] .btn-navy:hover { background: var(--violet-2) } .btn-dark { background: var(--navy); color: #fff } .btn-dark:hover { background: var(--navy-2) } .btn-primary { background: var(--violet); color: #fff; box-shadow: 0 10px 24px rgba(124, 92, 255, .3) } .btn-primary:hover { background: var(--violet-2) } .btn-glass { background: var(--glass-strong); color: var(--ink-strong); border-color: var(--line); backdrop-filter: blur(10px); box-shadow: var(--shadow-sm) } .btn-glass:hover { border-color: var(--violet); color: var(--violet) } .btn-outline { background: var(--glass-strong); color: var(--ink-strong); border-color: var(--line) } .btn-outline:hover { border-color: var(--violet); color: var(--violet) } .btn-ghost { background: transparent; color: var(--ink-strong) } .btn-ghost:hover { background: var(--chip-bg) } .btn-whatsapp { background: var(--wa); color: #fff } .btn-whatsapp:hover { background: #1fbe5a } .btn-block { width: 100% } .btn-sm { padding: .5rem .95rem; font-size: .85rem } .btn-lg { padding: .95rem 1.9rem; font-size: 1rem } /* ---- Admin-controlled animated announcement bar ---- */ .announcement-bar { position: relative; z-index: 70; min-height: 40px; display: flex; align-items: center; overflow: hidden; color: #fff; background: linear-gradient(110deg, #5131d7 0%, #7c3aed 45%, #b23ee5 100%); box-shadow: 0 8px 28px rgba(86, 48, 210, .22) } .announcement-bar::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, .2) 45%, transparent 70%); transform: translateX(-120%); animation: announcementShine 6s ease-in-out infinite } .announcement-glow { position: absolute; width: 240px; height: 100px; top: -65px; left: 12%; border-radius: 50%; background: rgba(255, 255, 255, .24); filter: blur(34px); animation: announcementGlow 7s ease-in-out infinite alternate } .announcement-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 40px; padding-top: 6px; padding-bottom: 6px; font-size: .82rem; font-weight: 600; line-height: 1.35; text-align: center } .announcement-badge { display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .25rem .55rem; border: 1px solid rgba(255, 255, 255, .26); border-radius: 999px; background: rgba(24, 15, 70, .2); backdrop-filter: blur(8px); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase } .announcement-badge i { width: 6px; height: 6px; border-radius: 50%; background: #a7f3d0; box-shadow: 0 0 0 0 rgba(167, 243, 208, .65); animation: announcementPing 1.8s ease-out infinite } .announcement-message { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; animation: announcementEnter .65s cubic-bezier(.2, .8, .2, 1) both } .announcement-spark { color: #fde68a; font-size: 1rem; animation: announcementSpark 2.4s ease-in-out infinite } .announcement-action { display: inline-flex; align-items: center; gap: .35rem; flex: none; padding: .3rem .75rem; border-radius: 999px; color: #352166; background: rgba(255, 255, 255, .92); box-shadow: 0 5px 16px rgba(35, 18, 91, .2); transition: transform .2s ease, background .2s ease } .announcement-action:hover { transform: translateY(-1px); background: #fff } @keyframes announcementShine { 0%, 55% { transform: translateX(-120%) } 82%, 100% { transform: translateX(120%) } } @keyframes announcementGlow { to { left: 72%; transform: scale(1.25) } } @keyframes announcementPing { 70% { box-shadow: 0 0 0 6px rgba(167, 243, 208, 0) } 100% { box-shadow: 0 0 0 0 rgba(167, 243, 208, 0) } } @keyframes announcementEnter { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: translateY(0) } } @keyframes announcementSpark { 0%, 100% { transform: rotate(0) scale(1) } 50% { transform: rotate(25deg) scale(1.2) } } /* ---- Floating glass navbar ---- */ .site-header { position: sticky; top: 14px; z-index: 60; height: 0; background: transparent; overflow: visible } /* The header creates no background strip, fade, divider, or independent layer. */ .site-header::before, .site-header::after { content: none } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 64px; padding: 0 12px 0 20px; background: var(--glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: 0 8px 32px rgba(44, 37, 94, .12); } /* Sticky header remains transparent outside the navbar itself, allowing the exact same body background to continue behind and around it. */ .site-header, .site-header>.container { background: transparent !important } .brand { display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.12rem; color: var(--ink-strong); font-family: var(--font-display) } .brand-mark { width: 35px; height: 35px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--violet), var(--navy)); box-shadow: 0 6px 16px rgba(124, 92, 255, .35); font-family: var(--font-display); } .nav-links { display: flex; align-items: center; gap: 3px; background: var(--chip-bg); border-radius: 999px; padding: 5px } .nav-links a { padding: .48rem 1rem; border-radius: 999px; font-weight: 500; font-size: .9rem; color: var(--ink); transition: .15s } .nav-links a:hover { color: var(--ink-strong); background: var(--glass-strong) } .nav-links a.active { background: var(--navy); color: #fff; box-shadow: 0 6px 14px rgba(44, 37, 94, .28); font-weight: 600 } [data-theme="dark"] .nav-links a.active { background: var(--violet) } /* Compact More menu keeps secondary pages available without crowding the nav. */ .nav-more { position: relative } .nav-more-toggle { min-height: 36px; display: inline-flex; align-items: center; gap: .32rem; padding: .48rem .82rem; border: 0; border-radius: 999px; color: var(--ink); background: transparent; font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer; transition: color .15s ease, background .15s ease } .nav-more-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease } .nav-more:hover .nav-more-toggle, .nav-more:focus-within .nav-more-toggle, .nav-more.is-open .nav-more-toggle { color: var(--ink-strong); background: var(--glass-strong) } .nav-more.active .nav-more-toggle { color: #fff; background: var(--navy); box-shadow: 0 6px 14px rgba(44, 37, 94, .28); font-weight: 600 } [data-theme="dark"] .nav-more.active .nav-more-toggle { background: var(--violet) } .nav-more:hover .nav-more-toggle svg, .nav-more:focus-within .nav-more-toggle svg, .nav-more.is-open .nav-more-toggle svg { transform: rotate(180deg) } .nav-more-menu { position: absolute; left: 50%; top: calc(100% + 12px); width: 255px; padding: .55rem; opacity: 0; visibility: hidden; border: 1px solid var(--glass-border); border-radius: 18px; background: color-mix(in srgb, var(--card) 94%, transparent); box-shadow: 0 20px 48px rgba(38, 28, 85, .2), inset 0 1px 0 rgba(255, 255, 255, .65); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); transform: translate(-50%, 8px) scale(.98); transform-origin: top center; transition: opacity .18s ease, visibility .18s ease, transform .18s ease; z-index: 90 } .nav-more-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 13px } .nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu, .nav-more.is-open .nav-more-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1) } .nav-links .nav-more-menu a { display: flex; align-items: center; gap: .72rem; padding: .7rem; border-radius: 13px; color: var(--ink); background: transparent; box-shadow: none } .nav-links .nav-more-menu a+a { margin-top: .18rem } .nav-links .nav-more-menu a:hover, .nav-links .nav-more-menu a:focus-visible, .nav-links .nav-more-menu a.active { color: var(--violet); background: rgba(124, 92, 255, .09) } .nav-more-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: none; border: 1px solid rgba(124, 92, 255, .12); border-radius: 11px; color: var(--violet); background: rgba(124, 92, 255, .08) } .nav-more-menu a>span:last-child { min-width: 0; display: flex; flex-direction: column; gap: .08rem } .nav-more-menu b { color: var(--ink-strong); font-size: .86rem; line-height: 1.25 } .nav-more-menu small { color: var(--muted); font-size: .68rem; line-height: 1.3; white-space: nowrap } .nav-actions { display: flex; align-items: center; gap: .45rem } .icon-btn { position: relative; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; color: var(--ink-strong); font-size: 1.05rem; transition: .15s; } .icon-btn:hover { background: var(--chip-bg) } .icon-btn svg { width: 20px; height: 20px } .icon-sun { display: none } [data-theme="dark"] .icon-sun { display: block } [data-theme="dark"] .icon-moon { display: none } .pill-navy { display: inline-flex; align-items: center; gap: .35rem; background: var(--navy); color: #fff; padding: .5rem 1rem; border-radius: 999px; font-weight: 600; font-size: .86rem; } [data-theme="dark"] .pill-navy { background: rgba(255, 255, 255, .10) } /* ── Currency Switcher ── */ .cur-wrap { position: relative; z-index: 300 } .cur-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--chip-bg); color: var(--ink-strong); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap; } .cur-btn:hover { border-color: var(--violet); background: rgba(124, 92, 255, .06); color: var(--violet) } .cur-btn-text { letter-spacing: .3px } .cur-chevron { transition: transform .2s; opacity: .6 } .cur-drop.open~.cur-btn .cur-chevron, .cur-wrap.open .cur-chevron { transform: rotate(180deg) } .cur-drop { display: none; position: absolute; top: calc(100% + 8px); right: 0; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: 0 16px 48px rgba(0, 0, 0, .18); width: 260px; overflow: hidden; } .cur-drop.open { display: block; animation: curFadeIn .18s ease } @keyframes curFadeIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: translateY(0) } } .cur-drop-header { padding: .65rem 1rem .5rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); border-bottom: 1px solid var(--line); } .cur-drop form { margin: 0; padding: 0 } .cur-opt { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .65rem 1rem; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: var(--ink-strong); transition: .12s; } .cur-opt:hover { background: var(--chip-bg) } .cur-opt.cur-active { background: rgba(124, 92, 255, .07) } .cur-sym { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--chip-bg); font-size: .85rem; font-weight: 900; flex-shrink: 0; border: 1px solid var(--line); } .cur-opt.cur-active .cur-sym { background: rgba(124, 92, 255, .1); border-color: rgba(124, 92, 255, .3); color: var(--violet) } .cur-info { display: flex; flex-direction: column; flex: 1; gap: .05rem } .cur-code { font-size: .82rem; font-weight: 800; font-family: var(--font-display); letter-spacing: .4px; color: var(--ink-strong) } .cur-name { font-size: .7rem; color: var(--muted) } .cur-opt.cur-active .cur-code { color: var(--violet) } .cur-check { width: 20px; height: 20px; border-radius: 50%; background: var(--violet); color: #fff; font-size: .72rem; font-weight: 900; display: grid; place-items: center; flex-shrink: 0; } [data-theme="dark"] .cur-btn { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .15) } [data-theme="dark"] .cur-drop { box-shadow: 0 16px 48px rgba(0, 0, 0, .5) } .cart-badge { position: absolute; top: 2px; right: 0; background: var(--violet); color: #fff; font-size: .62rem; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px } .nav-toggle span { width: 22px; height: 2px; background: var(--ink-strong); border-radius: 2px } /* dropdown */ .dropdown { position: relative } .dropdown-toggle { border-radius: 999px } .dropdown-menu { position: absolute; right: 0; top: 130%; background: var(--glass-strong); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--shadow); min-width: 190px; padding: .45rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s; z-index: 70 } .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) } .dropdown-menu a { display: block; padding: .6rem .8rem; border-radius: 10px; font-size: .92rem; font-weight: 500 } .dropdown-menu a:hover { background: var(--chip-bg); color: var(--violet) } /* ---- Flash ---- */ .flash-wrap { margin-top: 1rem } .flash { padding: .85rem 1.15rem; border-radius: 14px; margin-bottom: .6rem; font-weight: 500; border: 1px solid transparent; backdrop-filter: blur(8px) } .flash-success { background: #e7f9f2; color: #0a7a5a; border-color: #bfeeda } .flash-error { background: #fdecec; color: #b42318; border-color: #f7c9c6 } .flash-info { background: #eef0ff; color: #3a3178; border-color: #d5d8ff } [data-theme="dark"] .flash-success { background: rgba(22, 163, 74, .15); color: #5fe0a0; border-color: rgba(22, 163, 74, .3) } [data-theme="dark"] .flash-error { background: rgba(229, 72, 77, .15); color: #ff9b9e; border-color: rgba(229, 72, 77, .3) } [data-theme="dark"] .flash-info { background: rgba(124, 92, 255, .15); color: #c3b2ff; border-color: rgba(124, 92, 255, .3) } /* ---- Hero ---- */ .hero-lite { padding: 4rem 0 2.4rem } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center } .badge-pill { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem 1.1rem; border-radius: 999px; background: rgba(124, 92, 255, .10); border: 1px solid rgba(124, 92, 255, .35); font-weight: 600; font-size: .83rem; color: var(--ink-strong); box-shadow: var(--shadow-sm); margin-bottom: 1.4rem; backdrop-filter: blur(10px); } .badge-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); animation: ping 1.6s ease-out infinite } @keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(124, 92, 255, .5) } 70% { box-shadow: 0 0 0 7px rgba(124, 92, 255, 0) } 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0) } } .hero-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 5.8vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em; word-spacing: -.06em; color: var(--ink-strong); margin: 0 0 1.1rem; } .hero-sub { font-size: 1.18rem; color: var(--muted); margin: 0 0 1.7rem; font-weight: 400 } .hero-cta { display: flex; gap: .8rem; flex-wrap: wrap } .trust-line { color: var(--muted); font-size: .9rem; margin: 1.2rem 0 1.5rem; font-weight: 500 } .trust-chips { display: grid; grid-template-columns: repeat(4, auto); gap: .7rem; justify-content: start } .trust-chip { display: flex; align-items: center; gap: .6rem; padding: .65rem .95rem; border-radius: 16px; background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); font-size: .76rem; line-height: 1.3; color: var(--muted); font-weight: 500; } .trust-chip span { white-space: nowrap } .trust-chip strong { display: block; color: var(--ink-strong); font-size: .84rem } .chip-ico { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgba(124, 92, 255, .12); color: var(--navy); font-size: .95rem } [data-theme="dark"] .chip-ico { color: var(--violet-2) } /* floating hero product cards */ .hero-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; padding: 1rem .4rem; perspective: 1600px } .tool-float { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 22px; padding: 1.15rem; box-shadow: var(--shadow); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: transform .3s ease, box-shadow .3s ease; animation: floaty 6s ease-in-out infinite; } .tool-float:nth-child(1) { transform: rotate(-3deg) } .tool-float:nth-child(2) { transform: rotate(2.5deg) translateY(16px); animation-delay: 1.2s } .tool-float:nth-child(3) { transform: rotate(-2deg) translateY(-4px); animation-delay: 2.2s } .tool-float:nth-child(4) { transform: rotate(2deg) translateY(10px); animation-delay: 3.1s } .tool-float:hover { transform: rotate(0) scale(1.03); z-index: 2; animation-play-state: paused } @keyframes floaty { 0%, 100% { margin-top: 0 } 50% { margin-top: -10px } } .tool-float .tf-logo { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--chip-bg); margin-bottom: .6rem; overflow: hidden; position: relative; font-weight: 700; color: var(--navy); font-family: var(--font-display); font-size: 1.15rem } .tool-float .tf-logo img { width: 62%; height: 62%; object-fit: contain; position: relative; z-index: 1 } .tool-float h3 { font-size: 1rem; margin: 0 0 .55rem } .tool-checks { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .35rem } .tool-checks li { display: flex; align-items: center; gap: .45rem; font-size: .76rem; color: var(--muted); font-weight: 500 } .chk { width: 16px; height: 16px; flex: none; border-radius: 50%; background: var(--green-bg); color: var(--green); display: grid; place-items: center; font-size: .6rem; font-weight: 800 } .price-pill { display: inline-flex; align-items: baseline; gap: .3rem; padding: .45rem .95rem; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-strong); font-weight: 700; color: var(--ink-strong); font-size: .95rem; font-family: var(--font-display); } .price-pill small { color: var(--muted); font-weight: 500; font-size: .72rem; font-family: var(--font-body) } /* stats band */ .stats-band { margin: 2.6rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); overflow: hidden; } .stat-cell { display: flex; align-items: center; gap: .9rem; padding: 1.3rem 1.6rem; border-left: 1px solid var(--line) } .stat-cell:first-child { border-left: 0 } .stat-ico { width: 44px; height: 44px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--chip-bg); font-size: 1.15rem; color: var(--navy) } [data-theme="dark"] .stat-ico { color: var(--violet-2) } .stat-cell .num { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-strong); line-height: 1.1 } .stat-cell .lbl { color: var(--muted); font-size: .83rem; font-weight: 500 } /* ---- Section header pattern (divider + pill + two-tone H2) ---- */ section.block { padding: 4rem 0; position: relative; background: transparent } section.block+section.block::before { content: ''; position: absolute; top: -34px; left: 5%; right: 5%; height: 68px; pointer-events: none; background: radial-gradient(ellipse at center, rgba(124, 92, 255, .09), transparent 68%); filter: blur(20px) } .sec-divider { display: flex; align-items: center; justify-content: center; gap: .6rem; margin-bottom: 1.6rem } .sec-divider::before, .sec-divider::after { content: ''; height: 1px; width: min(260px, 28vw); background: linear-gradient(90deg, transparent, var(--line)) } .sec-divider::after { background: linear-gradient(90deg, var(--line), transparent) } .sec-divider .diamond { width: 8px; height: 8px; border: 1px solid var(--violet); transform: rotate(45deg); opacity: .7 } .sec-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.2rem; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font-weight: 600; font-size: .78rem; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-strong); box-shadow: var(--shadow-sm); } .section-head { text-align: center; max-width: 46rem; margin: 0 auto 2.8rem } .section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4.2vw, 3.2rem); letter-spacing: -.01em; margin: .4rem 0 .5rem; line-height: 1.08; } .section-head p { color: var(--muted); font-size: 1.05rem; margin: 0 } /* ---- Product card (matches live site) ---- */ .grid { display: grid; gap: 1.4rem } .grid-4 { grid-template-columns: repeat(4, 1fr) } .grid-3 { grid-template-columns: repeat(3, 1fr) } .grid-2 { grid-template-columns: repeat(2, 1fr) } .pcard { background: var(--card); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: 0 2px 12px rgba(44, 37, 94, .05); transition: .35s ease; display: flex; flex-direction: column; position: relative; } .pcard:hover { transform: translateY(-5px); box-shadow: 0 24px 60px -12px rgba(44, 37, 94, .28); border-color: rgba(124, 92, 255, .4) } .pcard-media { position: relative; height: 190px; display: grid; place-items: center; margin: 10px; border-radius: 18px; overflow: hidden; background: linear-gradient(145deg, rgba(124, 92, 255, .07), rgba(44, 37, 94, .04)); } [data-theme="dark"] .pcard-media { background: linear-gradient(145deg, rgba(124, 92, 255, .12), rgba(255, 255, 255, .03)) } .pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); display: block; border-radius: 18px; } .pcard:hover .pcard-media img { transform: scale(1.06) } .pcard-media .initial { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; color: var(--navy); opacity: .75 } [data-theme="dark"] .pcard-media .initial { color: var(--violet-2) } .tagb { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #fff; z-index: 2; } .tagb.seller { background: var(--orange) } .tagb.trending { background: var(--violet) } .tagb.newarr { background: #10b981 } .offb { position: absolute; top: 12px; right: 12px; padding: .3rem .6rem; border-radius: 999px; font-size: .64rem; font-weight: 700; color: #fff; background: linear-gradient(100deg, #ef4444, #f43f5e); z-index: 2; } .pcard-body { padding: .6rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; flex: 1 } .pcard-toprow { display: flex; align-items: center; justify-content: space-between } .cat-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border-radius: 999px; background: var(--chip-bg); font-size: .62rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-strong); } .verified { display: inline-flex; align-items: center; gap: .25rem; color: var(--green); font-size: .74rem; font-weight: 600 } .pcard h3 { font-size: 1.22rem; margin: 0 } .pcard h3 a:hover { color: var(--violet) } .rating-row { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--muted); flex-wrap: wrap } .stars { color: var(--amber); letter-spacing: 1px; font-size: .8rem } .rating-row b { color: var(--ink-strong) } .rating-row .sep { opacity: .4 } .info-cells { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-top: .2rem } .info-cell { border: 1px solid var(--line); border-radius: 12px; padding: .5rem .7rem; background: var(--surface-alt); display: flex; align-items: center; gap: .5rem; } .info-cell .ic { color: var(--violet); font-size: .9rem } .info-cell small { display: block; font-size: .56rem; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 600; line-height: 1.2 } .info-cell b { font-size: .78rem; color: var(--ink-strong); font-weight: 600; line-height: 1.2 } .dashed-line { border-top: 1px dashed var(--line); margin: .4rem 0 .2rem } .pcard-pricerow { display: flex; align-items: baseline; gap: .5rem } .pcard-pricerow .now { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink-strong) } .pcard-pricerow .was { font-size: .85rem; color: var(--muted); text-decoration: line-through } .pcard-actions { display: flex; gap: .5rem; margin-top: .3rem } .pcard-actions .btn-get { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--navy); color: #fff; border-radius: 14px; padding: .75rem 1rem; font-weight: 600; font-size: .9rem; transition: .2s; } .pcard-actions .btn-get:hover { background: var(--navy-2); transform: translateY(-1px) } [data-theme="dark"] .pcard-actions .btn-get { background: var(--violet) } .cart-sq { width: 46px; height: 46px; flex: none; border-radius: 14px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink-strong); transition: .2s; font-size: 1rem; } .cart-sq:hover { background: var(--violet); border-color: var(--violet); color: #fff } .cart-sq svg { width: 19px; height: 19px } /* ---- Packs ---- */ .packs-grid { display: grid; grid-template-columns: 1.15fr .9fr .9fr; gap: 1.4rem; align-items: stretch } .pack-card { background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 12px rgba(44, 37, 94, .05); transition: .3s; } .pack-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(124, 92, 255, .4) } .pack-media { position: relative; height: 180px; background: linear-gradient(120deg, #1b1740, #4c3cbe); display: grid; place-items: center; overflow: hidden } .pack-card.featured .pack-media { height: 230px } .pack-media img { width: 100%; height: 100%; object-fit: cover } .pack-media .ph { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: rgba(255, 255, 255, .9); text-align: center; padding: 0 1rem; text-shadow: 0 4px 20px rgba(0, 0, 0, .4) } .pack-badge { position: absolute; top: 12px; left: 12px; padding: .3rem .7rem; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px) } .pack-badge.free { left: auto; right: 12px; background: #10b981 } .pack-body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; flex: 1 } .pack-body .cat-chip { align-self: flex-start } .pack-body h3 { font-size: 1.25rem; margin: 0 } .pack-body p.desc { color: var(--muted); font-size: .85rem; margin: 0; flex: 0 } .pack-stats { display: flex; flex-wrap: wrap; gap: .9rem; color: var(--muted); font-size: .78rem; font-weight: 500 } .pack-stats b { color: var(--ink-strong) } .pack-perks { list-style: none; margin: .2rem 0 0; padding: 0; display: grid; gap: .3rem } .pack-perks li { display: flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--muted) } .pack-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .7rem; border-top: 1px dashed var(--line) } .free-tag { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #10b981 } .free-tag .was { font-size: .8rem; color: var(--muted); text-decoration: line-through; font-family: var(--font-body); font-weight: 500; margin-left: .4rem } /* ---- Trust section (6 cards) ---- */ .trust6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem } .trust-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.7rem; overflow: hidden; transition: .3s; min-height: 210px; display: flex; flex-direction: column; } .trust-card:hover { border-color: rgba(124, 92, 255, .45); box-shadow: var(--shadow); transform: translateY(-3px) } .trust-card .glowb { position: absolute; width: 150px; height: 150px; border-radius: 50%; filter: blur(60px); opacity: .35; right: -40px; top: -40px; background: var(--violet); pointer-events: none } .trust-card:nth-child(2) .glowb { background: #38bdf8 } .trust-card:nth-child(3) .glowb { background: #f472b6 } .trust-card:nth-child(4) .glowb { background: #34d399 } .trust-card:nth-child(5) .glowb { background: #fbbf24 } .trust-card:nth-child(6) .glowb { background: #a78bfa } .trust-card .tnum { position: absolute; top: 1.2rem; right: 1.4rem; font-family: ui-monospace, monospace; font-size: .8rem; color: var(--muted); opacity: .7 } .trust-card .ticon { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 1.1rem; background: var(--chip-bg); border: 1px solid var(--line); color: var(--navy); font-size: 1.25rem; transition: .3s; } [data-theme="dark"] .trust-card .ticon { color: var(--violet-2) } .trust-card:hover .ticon { transform: scale(1.08); box-shadow: 0 0 20px rgba(124, 92, 255, .35) } .trust-card h3 { font-size: 1.3rem; margin: 0 0 .4rem } .trust-card p { color: var(--muted); font-size: .88rem; margin: 0 } .trust-card .uline { height: 2px; width: 0; background: linear-gradient(90deg, var(--violet), transparent); margin-top: auto; transition: width .4s } .trust-card:hover .uline { width: 100% } /* ---- Testimonials ---- */ .testi-wrap { position: relative; max-width: 900px; margin: 0 auto } .testi-card { background: linear-gradient(145deg, var(--card), var(--card)) padding-box, linear-gradient(135deg, rgba(124, 92, 255, .4), rgba(167, 139, 250, .15), rgba(217, 70, 239, .25)) border-box; border: 1px solid transparent; border-radius: 26px; padding: 2.2rem; box-shadow: var(--shadow-sm); display: grid; grid-template-columns: 230px 1fr; gap: 1.8rem; align-items: center; min-height: 250px; } .testi-meta { text-align: left; border-right: 1px solid var(--line); padding-right: 1.6rem } .testi-avatar { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.7rem; background: linear-gradient(135deg, var(--violet), var(--navy)); box-shadow: 0 0 30px rgba(124, 92, 255, .45); margin-bottom: .8rem; } .testi-meta .tname { font-family: var(--font-display); font-weight: 700; color: var(--ink-strong); font-size: 1.05rem; display: flex; align-items: center; gap: .45rem } .vbadge { display: inline-flex; align-items: center; gap: .2rem; background: var(--green-bg); color: var(--green); font-size: .62rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px } .testi-meta .trole { color: var(--muted); font-size: .85rem; margin: .15rem 0 .5rem } .tool-chip { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); border-radius: 999px; padding: .25rem .7rem; font-size: .72rem; color: var(--muted); font-weight: 500 } .tool-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); animation: ping 1.6s infinite } .testi-quote .stars { font-size: .9rem } .testi-quote .score { color: var(--muted); font-size: .8rem; margin-left: .4rem } .testi-quote .qmark { font-family: var(--font-display); font-size: 2.6rem; color: var(--violet); opacity: .35; line-height: .6; margin: .6rem 0 .2rem } .testi-quote p { font-size: 1.15rem; color: var(--ink-strong); font-weight: 500; line-height: 1.55; margin: .4rem 0 0 } .testi-slide { display: none } .testi-slide.on { display: grid; animation: tfade .5s ease } @keyframes tfade { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } .testi-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass-strong); color: var(--ink-strong); cursor: pointer; display: grid; place-items: center; font-size: 1rem; transition: .2s; z-index: 2; } .testi-nav:hover { background: var(--violet); color: #fff; border-color: var(--violet) } .testi-nav.prev { left: -60px } .testi-nav.next { right: -60px } .testi-dots { display: flex; gap: .4rem; justify-content: center; margin-top: 1.3rem } .testi-dots button { width: 8px; height: 8px; border-radius: 999px; border: 0; background: var(--line); cursor: pointer; transition: .25s; padding: 0 } .testi-dots button.on { width: 26px; background: var(--violet) } .testi-stats { margin-top: 2rem; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--glass); border: 1px solid var(--glass-border); border-radius: 22px; box-shadow: var(--shadow-sm); overflow: hidden; } .testi-stats .cell { text-align: center; padding: 1.4rem 1rem; border-left: 1px solid var(--line) } .testi-stats .cell:first-child { border-left: 0 } .testi-stats .n { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; background: linear-gradient(120deg, var(--violet), var(--grad-2)); -webkit-background-clip: text; background-clip: text; color: transparent } .testi-stats .l { color: var(--muted); font-size: .85rem; font-weight: 500 } /* ---- FAQ ---- */ .faq { max-width: 46rem; margin: 0 auto; display: grid; gap: .8rem } .faq details { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; padding: .2rem 1.2rem; backdrop-filter: blur(10px); box-shadow: var(--shadow-sm) } .faq summary { cursor: pointer; font-weight: 600; padding: .95rem 0; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--ink-strong) } .faq summary::-webkit-details-marker { display: none } .faq summary::after { content: '+'; font-size: 1.3rem; color: var(--violet) } .faq details[open] summary::after { content: '\2013' } .faq p { color: var(--muted); margin: 0 0 1rem } /* ---- Page header ---- */ .page-hero { padding: 3.2rem 0 .5rem; text-align: center } .page-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -.01em; margin: 0 } .page-hero p { color: var(--muted); margin: .4rem 0 0; font-size: 1.05rem } /* ---- Filters ---- */ .filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.8rem; justify-content: center } .chip { padding: .55rem 1.15rem; border-radius: 999px; border: 1px solid var(--line); background: var(--glass); font-weight: 600; font-size: .86rem; color: var(--muted); cursor: pointer; backdrop-filter: blur(8px); transition: .2s } .chip.active, .chip:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: scale(1.04) } [data-theme="dark"] .chip.active, [data-theme="dark"] .chip:hover { background: var(--violet); border-color: var(--violet) } /* ---- Forms / auth ---- */ .auth-wrap { max-width: 440px; margin: 3rem auto; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.3rem; box-shadow: var(--shadow); backdrop-filter: blur(16px) } .auth-wrap h1 { font-size: 1.5rem; text-align: center } .auth-sub { text-align: center; color: var(--muted); margin-top: -.3rem; margin-bottom: 1.4rem } .field { margin-bottom: 1rem } .field label { display: block; font-weight: 600; font-size: .86rem; margin-bottom: .35rem; color: var(--ink-strong) } .field input, .field select, .field textarea { width: 100%; padding: .78rem .95rem; border: 1px solid var(--line); border-radius: 13px; font: inherit; background: var(--card); color: var(--ink-strong); transition: .15s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, .16) } .field input:disabled { opacity: .6 } .auth-alt { text-align: center; margin-top: 1.1rem; color: var(--muted); font-size: .9rem } .auth-alt a { color: var(--violet); font-weight: 600 } /* ---- Cart / checkout / tables / admin (unchanged core) ---- */ .layout-2 { display: grid; grid-template-columns: 1.6fr .9fr; gap: 1.6rem; align-items: start } .panel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(12px) } .cart-row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line) } .cart-row:last-child { border-bottom: 0 } .cart-row .product-logo { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--chip-bg); font-family: var(--font-display); font-weight: 700; color: var(--navy) } [data-theme="dark"] .cart-row .product-logo { color: var(--violet-2) } .qty input { width: 64px; text-align: center; border: 1px solid var(--line); border-radius: 10px; padding: .45rem; background: var(--card); color: var(--ink-strong) } .summary-line { display: flex; justify-content: space-between; padding: .4rem 0; color: var(--muted) } .summary-total { display: flex; justify-content: space-between; padding: .8rem 0; font-weight: 700; font-size: 1.15rem; color: var(--ink-strong); border-top: 1px solid var(--line); margin-top: .4rem; font-family: var(--font-display) } .table-wrap { overflow-x: auto; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); backdrop-filter: blur(10px) } table.data { width: 100%; border-collapse: collapse; font-size: .9rem } table.data th, table.data td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); color: var(--ink) } table.data th { background: var(--chip-bg); font-weight: 700; color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .4px } table.data tr:last-child td { border-bottom: 0 } .status { display: inline-block; padding: .25rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 700; text-transform: capitalize } .status.pending { background: #fff3e0; color: #b26a00 } .status.processing { background: #e6efff; color: #2456c9 } .status.completed { background: #e7f9f2; color: #0a7a5a } .status.cancelled { background: #fdecec; color: #b42318 } .status.active { background: #e7f9f2; color: #0a7a5a } .status.blocked { background: #fdecec; color: #b42318 } [data-theme="dark"] .status.pending { background: rgba(255, 171, 0, .15); color: #ffc861 } [data-theme="dark"] .status.processing { background: rgba(60, 120, 255, .15); color: #8fb3ff } [data-theme="dark"] .status.completed, [data-theme="dark"] .status.active { background: rgba(22, 163, 74, .16); color: #5fe0a0 } [data-theme="dark"] .status.cancelled, [data-theme="dark"] .status.blocked { background: rgba(229, 72, 77, .16); color: #ff9b9e } .admin-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; align-items: start } .admin-side { background: var(--navy); color: #fff; padding: 1.4rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto } .admin-side .brand, .admin-side .brand .brand-text { color: #fff } .admin-side .brand { margin-bottom: 1.6rem } .admin-nav { display: flex; flex-direction: column; gap: .2rem } .admin-nav a { padding: .7rem .9rem; border-radius: 12px; color: rgba(255, 255, 255, .82); font-weight: 500 } .admin-nav a:hover, .admin-nav a.active { background: rgba(255, 255, 255, .14); color: #fff } .admin-main { padding: 1.8rem 2rem; background: var(--bg) } .admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.6rem } .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; margin-bottom: 1.8rem } .stat { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 1.3rem; backdrop-filter: blur(10px) } .stat .label { color: var(--muted); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .4px } .stat .value { font-size: 1.8rem; font-weight: 700; color: var(--ink-strong); margin-top: .2rem; font-family: var(--font-display) } .row-actions { display: flex; gap: .4rem } .empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted) } .empty-state .big { font-size: 2.6rem; margin-bottom: .4rem } /* ---- CTA band ---- */ .cta-band { background: linear-gradient(135deg, var(--violet), var(--navy)); color: #fff; border-radius: 28px; padding: 3.2rem; text-align: center; box-shadow: var(--shadow) } .cta-band h2 { color: #fff; font-size: clamp(1.7rem, 3vw, 2.3rem) } .cta-band p { color: rgba(255, 255, 255, .85); max-width: 34rem; margin: 0 auto 1.5rem } .cta-band .btn-dark { background: #fff; color: var(--navy) } .cta-band .btn-dark:hover { background: #f0eefc } /* ---- Smooth footer reveal: page content slides above a fixed footer ---- */ .site-footer { position: relative; isolation: isolate; overflow: hidden; color: rgba(255, 255, 255, .78); background: radial-gradient(circle at 12% 18%, rgba(92, 120, 255, .25), transparent 31%), radial-gradient(circle at 88% 10%, rgba(91, 68, 190, .18), transparent 28%), linear-gradient(145deg, #151b3e 0%, #1b2550 48%, #11162f 100%); border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 -42px 0 #151b3e, 0 -24px 70px rgba(15, 22, 56, .3) } .site-footer::before { content: none } .site-footer::after { content: ''; position: absolute; z-index: -1; width: 420px; height: 420px; right: -150px; bottom: -230px; border-radius: 50%; pointer-events: none; background: rgba(124, 92, 255, .2); filter: blur(65px) } .footer-reveal-ready .site-main { z-index: 2; margin-bottom: var(--footer-reveal-height, 420px); background-color: var(--bg); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), radial-gradient(65% 40% at 12% 0%, rgba(105, 75, 230, .12), transparent 62%), linear-gradient(180deg, transparent 80%, color-mix(in srgb, var(--bg) 92%, #6f57e9 8%)); background-size: 40px 40px, 40px 40px, auto, auto; border-radius: 0 0 34px 34px; box-shadow: 0 26px 70px rgba(15, 11, 40, .26), 0 0 0 1px rgba(33, 25, 70, .08); transform: translateZ(0) } .footer-reveal-ready .site-footer { position: fixed; z-index: 0; left: 0; right: 0; bottom: 0; min-height: var(--footer-reveal-height, 420px) } .footer-reveal-head { width: min(calc(100% - 44px), var(--maxw)); margin: 0 auto; padding-top: 1.15rem; display: flex; align-items: center; justify-content: center; gap: .85rem; color: rgba(255, 255, 255, .46); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase } .footer-reveal-head i { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .44), transparent) } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 2.2rem; padding: 2.4rem 0 2.2rem } .site-footer .brand-text, .site-footer .footer-col h4, .site-footer .contact-item b { color: #fff } .footer-brand p { color: rgba(255, 255, 255, .58); max-width: 17rem; font-size: .92rem } .socials { display: flex; gap: .55rem; flex-wrap: wrap; margin-top: 1rem } .socials a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .07); display: grid; place-items: center; color: rgba(255, 255, 255, .9); transition: .2s; font-size: .95rem; } .socials a:hover { background: var(--violet); color: #fff; transform: translateY(-2px) } .socials a svg { width: 17px; height: 17px } .footer-col h4 { margin-bottom: 1rem; font-size: 1.05rem } .footer-col a { display: block; width: fit-content; padding: .3rem 0; color: rgba(255, 255, 255, .58); font-size: .92rem; transition: color .2s ease, transform .2s ease } .footer-col a:hover { color: #fff; transform: translateX(4px) } .contact-item { display: flex; gap: .7rem; align-items: flex-start; padding: .35rem 0; color: rgba(255, 255, 255, .58); font-size: .92rem } .contact-item .ci { color: var(--violet); flex: none; margin-top: 2px } .contact-item small { display: block; font-size: .72rem; color: rgba(255, 255, 255, .46) } .contact-item b { font-weight: 600 } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 1.2rem 0 } .footer-bottom .container { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; color: rgba(255, 255, 255, .5) } .footer-bottom .legal { display: flex; gap: 1.4rem } .footer-bottom .legal a:hover { color: #fff } @media(max-width:720px) { .footer-reveal-ready .site-main { border-radius: 0 0 24px 24px } .footer-reveal-head { padding-top: .85rem } } @media(max-width:560px) { .footer-reveal-ready .site-footer { position: relative; min-height: 0 } .footer-reveal-ready .site-main { margin-bottom: 0; border-radius: 0; box-shadow: none } .footer-grid { grid-template-columns: 1fr; gap: 1.6rem } .footer-bottom .container, .footer-bottom .legal { justify-content: center; text-align: center } } @media (prefers-reduced-motion: reduce) { .footer-reveal-ready .site-footer { position: relative; min-height: 0 } .footer-reveal-ready .site-main { margin-bottom: 0; border-radius: 0; box-shadow: none } } /* floating chat button */ .float-chat { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--navy)); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px rgba(44, 37, 94, .4); transition: .2s; } .float-chat:hover { transform: scale(1.08) } .float-chat svg { width: 26px; height: 26px } .float-chat::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(124, 92, 255, .5); animation: ping 2s ease-out infinite } /* ---- Responsive ---- */ @media(max-width:1180px) { .testi-nav.prev { left: -10px } .testi-nav.next { right: -10px } } @media(max-width:1080px) { .trust-chips { grid-template-columns: repeat(2, 1fr) } .grid-4 { grid-template-columns: repeat(3, 1fr) } .packs-grid { grid-template-columns: 1fr 1fr } .pack-card.featured { grid-column: 1/-1 } } @media(max-width:980px) { .hero-grid { grid-template-columns: 1fr } .hero-cards { display: none } .trust6 { grid-template-columns: repeat(2, 1fr) } .stats-band { grid-template-columns: repeat(2, 1fr) } .stat-cell:nth-child(3) { border-left: 0 } .stat-cell { border-top: 1px solid var(--line) } .stat-cell:nth-child(-n+2) { border-top: 0 } .layout-2 { grid-template-columns: 1fr } .admin-shell { grid-template-columns: 1fr } .admin-side { display: none } .nav-links { display: none } .nav-links.open { display: flex; flex-direction: column; position: fixed; left: 14px; right: 14px; top: 92px; background: var(--glass-strong); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 22px; padding: .8rem; box-shadow: var(--shadow); z-index: 65; } .nav-links.open>a { padding: .8rem 1rem } .nav-links.open .nav-more { width: 100% } .nav-links.open .nav-more-toggle { width: 100%; justify-content: space-between; padding: .8rem 1rem } .nav-links.open .nav-more-menu { position: static; width: 100%; max-height: 0; padding: 0 .35rem; opacity: 0; visibility: hidden; overflow: hidden; border: 0; box-shadow: none; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transition: max-height .22s ease, opacity .18s ease, padding .22s ease } .nav-links.open .nav-more:hover .nav-more-menu, .nav-links.open .nav-more:focus-within .nav-more-menu, .nav-links.open .nav-more.is-open .nav-more-menu { max-height: 160px; padding: .35rem; opacity: 1; visibility: visible; transform: none } .nav-links.open .nav-more-menu::before { content: none } .nav-links.open .nav-more-menu a { padding: .58rem .65rem } .nav-toggle { display: flex } .testi-card { grid-template-columns: 1fr; gap: 1.2rem } .testi-meta { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 1.2rem } } @media(max-width:720px) { .announcement-inner { gap: .45rem; font-size: .73rem; padding-left: 12px; padding-right: 12px } .announcement-badge { display: none } .announcement-action { padding: .25rem .55rem; font-size: .68rem } .site-header { top: 8px } .site-main { padding-top: 76px } .header-inner { height: 58px; padding: 0 8px 0 16px } .pill-navy { display: none } .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr } .trust6, .packs-grid { grid-template-columns: 1fr } .stat-grid { grid-template-columns: repeat(2, 1fr) } .cta-band { padding: 2.2rem 1.3rem } .trust-chips { grid-template-columns: 1fr 1fr } .hero-title { font-size: 2.5rem } .hero2-title { font-size: clamp(2.5rem, 10vw, 3.8rem) } .footer-grid { grid-template-columns: 1fr 1fr } .testi-stats { grid-template-columns: 1fr 1fr } .testi-stats .cell:nth-child(3) { border-left: 0 } .pcard-media { height: 150px } .info-cells { grid-template-columns: 1fr } } @media(max-width:520px) { .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr } } /* ===================================================================== v3 — Tools hero, product detail, contact, about/why-us, blog, legal ===================================================================== */ /* Tools page hero + search */ .tools-hero { padding: 3rem 0 .5rem; text-align: center } .tools-hero h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: .4rem 0 .5rem } .tools-hero p { color: var(--muted); max-width: 34rem; margin: 0 auto; font-size: 1.02rem } .big-search { max-width: 600px; margin: 1.8rem auto 1.2rem; position: relative } .big-search input { width: 100%; padding: 1rem 1.2rem 1rem 3rem; border-radius: 18px; border: 1px solid var(--line); background: var(--card); color: var(--ink-strong); font: inherit; font-size: .98rem; box-shadow: var(--shadow-sm); } .big-search input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, .16) } .big-search .si { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted) } .showing-row { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem } .showing-row b { color: var(--ink-strong) } .showing-row a { color: var(--violet); font-weight: 600 } /* ---- Product detail ---- */ .pd-crumb { color: var(--muted); font-size: .85rem; margin: 1.6rem 0 1.2rem } .pd-crumb a:hover { color: var(--violet) } .pd-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 2rem; align-items: start } .pd-imgwrap { position: relative } .pd-imgwrap .glow { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, .35), transparent); filter: blur(40px) } .pd-imgcard { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 26px; min-height: 320px; display: grid; place-items: center; box-shadow: var(--shadow); overflow: hidden; } .pd-imgcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, 1, .36, 1); } .pd-imgwrap:hover .pd-imgcard img { transform: scale(1.05) } .pd-imgcard .initial { font-family: var(--font-display); font-weight: 700; font-size: 6rem; color: var(--navy); opacity: .7 } [data-theme="dark"] .pd-imgcard .initial { color: var(--violet-2) } .pd-vbadge { position: absolute; top: 14px; left: 14px; background: var(--green-bg); color: var(--green); font-size: .7rem; font-weight: 700; padding: .35rem .7rem; border-radius: 999px } .pd-stock { position: absolute; bottom: 14px; left: 14px; display: inline-flex; align-items: center; gap: .4rem; background: var(--glass-strong); border: 1px solid var(--line); padding: .35rem .8rem; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--green) } .pd-stock .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: ping 1.6s infinite } .pd-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .7rem } .pd-title { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .2rem 0 .4rem } .pd-rating { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; margin-bottom: .9rem; flex-wrap: wrap } .pd-rating .stars { color: var(--amber) } .pd-desc { color: var(--muted); margin: 0 0 1.1rem } .pay-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.2rem } .pay-chip { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: .4rem .85rem; font-size: .78rem; font-weight: 600; color: var(--ink) } .pay-chip .pdot { width: 8px; height: 8px; border-radius: 50% } .pd-buybox { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: 1.3rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px) } .pd-price-row { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .2rem } .pd-price-row .now { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--ink-strong) } .pd-price-row .was { color: var(--muted); text-decoration: line-through } .pd-price-row .offb { position: static } .pd-live { display: flex; gap: 1.2rem; color: var(--muted); font-size: .78rem; margin: .6rem 0 1rem; flex-wrap: wrap } .pd-live b { color: var(--ink-strong) } .pd-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem } .pd-qty { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem } .pd-qty label { font-weight: 600; font-size: .85rem; color: var(--ink-strong) } .pd-qty input { width: 70px; text-align: center; padding: .5rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink-strong) } /* tabs */ .pd-tabs { margin-top: 2.6rem } .tab-bar { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.4rem } .tab-btn { padding: .7rem 1.2rem; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px } .tab-btn.on { color: var(--violet); border-bottom-color: var(--violet) } .tab-pane { display: none } .tab-pane.on { display: block; animation: tfade .3s ease } .inc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; grid-template-columns: 1fr 1fr } .inc-list li { display: flex; align-items: center; gap: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; font-size: .9rem } .facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem } .fact { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem } .fact small { display: block; color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; font-weight: 700 } .fact b { color: var(--ink-strong) } .rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem } .rev-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem } .rev-card .stars { color: var(--amber); font-size: .85rem } .rev-card p { color: var(--muted); font-size: .88rem; margin: .5rem 0 } .rev-card .who { font-weight: 700; color: var(--ink-strong); font-size: .85rem } .rev-card .vbadge { margin-left: .4rem } /* ---- Contact ---- */ .contact-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 1.6rem; align-items: start } .chan-card { display: flex; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.2rem; margin-bottom: .9rem; transition: .2s; } .chan-card:hover { border-color: var(--violet); box-shadow: var(--shadow-sm); transform: translateY(-2px) } .chan-ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem } .chan-card .arrow { margin-left: auto; color: var(--muted) } .chan-card small { display: block; color: var(--muted); font-size: .78rem } .chan-card b { color: var(--ink-strong) } .trust-pills { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1.2rem } .trust-pills span { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: var(--glass); border-radius: 999px; padding: .45rem .95rem; font-size: .82rem; font-weight: 600; color: var(--ink) } .form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem } /* ---- About / Why Us ---- */ .mk-hero { text-align: center; padding: 3.4rem 0 2rem } .mk-hero h1 { font-size: clamp(2.6rem, 5.6vw, 4.2rem); letter-spacing: -.015em; margin: .5rem 0 .7rem } .mk-hero h1 em { font-style: italic; background: linear-gradient(100deg, var(--violet), var(--grad-2)); -webkit-background-clip: text; background-clip: text; color: transparent } .mk-hero p { color: var(--muted); max-width: 38rem; margin: 0 auto 1.6rem; font-size: 1.08rem } .mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 2.2rem 0; margin: 2.4rem 0; text-align: center } .mk-stats .n { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 3rem); color: var(--ink-strong); letter-spacing: -.02em } .mk-stats .l { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600 } .mk-eyebrow { color: var(--violet); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: .78rem } .mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; margin: 2rem 0 } .mk-split h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem) } .mk-split p { color: var(--muted) } .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem } .pillar { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.8rem; transition: .3s } .pillar:hover { border-color: rgba(124, 92, 255, .5); box-shadow: var(--shadow) } .pillar:nth-child(2) { transform: translateY(26px) } .pillar .pico { width: 48px; height: 48px; border-radius: 13px; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 1.1rem; margin-bottom: 1rem } [data-theme="dark"] .pillar .pico { background: var(--violet) } .pillar h3 { font-size: 1.25rem } .pillar p { color: var(--muted); font-size: .9rem; margin: 0 } .quote-panel { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 26px; padding: 2.6rem; margin: 3rem 0; box-shadow: var(--shadow-sm); } .quote-panel blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.2rem, 2.6vw, 1.8rem); color: var(--ink-strong); line-height: 1.4 } .quote-panel .qwho { display: flex; align-items: center; gap: .8rem; margin-top: 1.4rem } .quote-panel .qav { width: 44px; height: 44px; border-radius: 50%; background: var(--chip-bg); display: grid; place-items: center; font-weight: 700; color: var(--ink-strong) } .founder-card { display: flex; gap: 1.4rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: 1.8rem; margin-top: 2rem } .founder-av { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; background: linear-gradient(135deg, var(--violet), var(--navy)); box-shadow: 0 0 26px rgba(124, 92, 255, .4) } /* ---- Blog (editorial serif) ---- */ .blog-shell { font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif } .font-ed { font-family: 'Instrument Serif', ui-serif, Georgia, serif; font-weight: 400; letter-spacing: -.01em } .masthead { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .7rem 0; margin: 1.6rem 0 2.4rem; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 600 } .blog-nameplate { text-align: center; max-width: 52rem; margin: 0 auto 2.6rem } .blog-nameplate .kicker { font-size: .68rem; letter-spacing: 3px; text-transform: uppercase; color: var(--muted); font-weight: 600 } .blog-nameplate h1 { font-family: 'Instrument Serif', serif; font-weight: 400; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.08; margin: .6rem 0 } .blog-nameplate h1 em { color: var(--violet) } .blog-nameplate p { color: var(--muted) } .lead-story { display: grid; grid-template-columns: 7fr 5fr; gap: 2rem; align-items: center; border-top: 1px solid var(--line); padding-top: 2rem; margin-bottom: 2.6rem } .bcover { border-radius: 14px; overflow: hidden; background: linear-gradient(120deg, #241d52, #5a48d8); aspect-ratio: 16/9; display: grid; place-items: center } .bcover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s } a:hover .bcover img { transform: scale(1.03) } .bcover .bph { font-family: 'Instrument Serif', serif; color: rgba(255, 255, 255, .92); font-size: 1.5rem; text-align: center; padding: 1rem } .blabel { font-size: .66rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: var(--violet) } .lead-story h2, .bcard h3 { font-family: 'Instrument Serif', serif; font-weight: 400; color: var(--ink-strong); line-height: 1.15 } .lead-story h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: .5rem 0 } .lead-story p.exc { color: var(--muted) } .bmeta { font-size: .68rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-top: .7rem } .blog-toolbar { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .7rem 0; margin: 0 0 2rem; flex-wrap: wrap } .blog-tabs { display: flex; gap: 1.4rem; font-size: .72rem; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700 } .blog-tabs a { color: var(--muted); padding-bottom: .2rem; border-bottom: 2px solid transparent } .blog-tabs a.on, .blog-tabs a:hover { color: var(--ink-strong); border-bottom-color: var(--violet) } .blog-search input { border: 0; border-bottom: 1px solid var(--line); background: none; padding: .4rem 0; font: inherit; color: var(--ink-strong); width: 200px } .blog-search input:focus { outline: none; border-bottom-color: var(--violet) } .bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem } .bcard { display: block } .bcard .bcover { aspect-ratio: 4/3; margin-bottom: .8rem } .bcard h3 { font-size: 1.35rem; margin: .3rem 0 } .bcard h3:hover { color: var(--violet) } .bcard p.exc { color: var(--muted); font-size: .9rem; margin: .2rem 0 0 } /* article */ .post-hero { position: relative; border-radius: 0 0 26px 26px; overflow: hidden; min-height: 340px; display: flex; align-items: flex-end; background: linear-gradient(120deg, #1c1740, #4c3cbe); margin-top: -1px } .post-hero .ov { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 26, .1), rgba(10, 8, 26, .75)) } .post-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover } .post-hero .inner { position: relative; z-index: 2; padding: 2.4rem; color: #fff; width: 100% } .post-hero .chips { display: flex; gap: .7rem; align-items: center; font-size: .72rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: rgba(255, 255, 255, .85); margin-bottom: .7rem } .post-hero .chips .cat { background: var(--violet); padding: .3rem .8rem; border-radius: 999px } .post-hero h1 { font-family: 'Instrument Serif', serif; font-weight: 400; color: #fff; font-size: clamp(1.9rem, 4.2vw, 3.2rem); margin: 0; line-height: 1.12 } .post-layout { display: grid; grid-template-columns: 230px 1fr; gap: 2.6rem; margin-top: 2.2rem; align-items: start } .toc { position: sticky; top: 100px; border-left: 2px solid var(--line); padding-left: 1rem } .toc .tt { font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: .7rem } .toc a { display: block; color: var(--muted); font-size: .85rem; padding: .25rem 0 } .toc a:hover { color: var(--violet) } .prose { max-width: 46rem; font-size: 1.02rem; color: var(--ink); font-family: 'Work Sans', system-ui, sans-serif } .prose h2 { font-size: 1.5rem; margin: 2rem 0 .7rem } .prose h3 { font-size: 1.15rem; margin: 1.5rem 0 .5rem } .prose p { margin: .9rem 0 } .prose ul { padding-left: 1.2rem; color: var(--muted) } .prose li { margin: .35rem 0 } .prose strong { color: var(--ink-strong) } .prose blockquote { border-left: 3px solid var(--violet); margin: 1.4rem 0; padding: .4rem 0 .4rem 1.1rem; color: var(--muted); font-style: italic } .author-row { display: flex; align-items: center; gap: .8rem; margin: 1.6rem 0; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line) } .author-row .aav { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--navy)); display: grid; place-items: center; color: #fff; font-weight: 700 } .post-cta { background: var(--navy); color: #fff; border-radius: 20px; padding: 2rem; text-align: center; margin: 2.6rem 0 } .post-cta h3 { color: #fff; font-size: 1.35rem } [data-theme="dark"] .post-cta { background: var(--violet) } /* ---- Legal ---- */ .legal-wrap { max-width: 46rem; margin: 0 auto } .legal-wrap h2 { font-size: 1.25rem; display: flex; align-items: center; gap: .6rem; margin-top: 2rem } .legal-wrap p, .legal-wrap li { color: var(--muted) } /* responsive v3 */ @media(max-width:980px) { .pd-grid, .contact-grid, .mk-split, .lead-story, .post-layout { grid-template-columns: 1fr } .toc { display: none } .facts-grid { grid-template-columns: 1fr 1fr } .rev-grid, .bgrid { grid-template-columns: 1fr 1fr } .pillars { grid-template-columns: 1fr } .pillar:nth-child(2) { transform: none } .mk-stats { grid-template-columns: 1fr 1fr } .inc-list { grid-template-columns: 1fr } } @media(max-width:640px) { .rev-grid, .bgrid, .form-2col, .pd-ctas { grid-template-columns: 1fr } } /* hero line 2: navy in light, gradient in dark (matches live site) */ .hero-l2 { color: var(--ink-strong) } [data-theme="dark"] .hero-l2 { background: linear-gradient(100deg, #fff 20%, var(--violet-2)); -webkit-background-clip: text; background-clip: text; color: transparent } /* ---- Infinite tool marquee (under hero) ---- */ .marquee-bar { margin: 2.2rem 0 0; background: var(--card); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; position: relative; box-shadow: var(--shadow-sm); padding: .85rem 0; } .marquee-bar::before, .marquee-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none; } .marquee-bar::before { left: 0; background: linear-gradient(90deg, var(--card), transparent) } .marquee-bar::after { right: 0; background: linear-gradient(270deg, var(--card), transparent) } .marquee-track { display: flex; align-items: center; gap: 0; width: max-content; animation: marquee 28s linear infinite; } .marquee-bar:hover .marquee-track { animation-play-state: paused } .marquee-track span { display: inline-flex; align-items: center; gap: 0; flex: none; font-size: .74rem; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; color: var(--muted); padding: 0 1.1rem; white-space: nowrap; } .marquee-track i { width: 5px; height: 5px; border-radius: 50%; background: var(--violet); flex: none; opacity: .8 } @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } @media (prefers-reduced-motion: reduce) { .marquee-track, .announcement-bar::before, .announcement-glow, .announcement-badge i, .announcement-message, .announcement-spark { animation: none } } /* ===================================================================== v5 — Unique hero redesign (deal deck + orbiting icons + animated text) ===================================================================== */ .hero2 { position: relative; padding: .55rem 0 2.4rem; overflow: visible; isolation: isolate; background: transparent } .hero2::before { content: ''; position: absolute; inset: -80px 0 -180px; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, rgba(124, 92, 255, .075), transparent 72%); filter: blur(38px) } .hero2-bg { position: absolute; inset: -80px 0 0; pointer-events: none; z-index: 0 } .hero2-bg .blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .58; animation: heroBlobFloat 10s ease-in-out infinite alternate } .hero2-bg .b2 { animation-delay: -3s } .hero2-bg .b3 { animation-delay: -6s } @keyframes heroBlobFloat { from { transform: translate3d(-12px, -8px, 0) scale(.96) } to { transform: translate3d(18px, 14px, 0) scale(1.08) } } .hero2-bg .b1 { width: 480px; height: 480px; left: -140px; top: 90px; background: rgba(124, 92, 255, .35) } .hero2-bg .b2 { width: 420px; height: 420px; right: -100px; top: 150px; background: rgba(63, 115, 210, .18) } .hero2-bg .b3 { width: 360px; height: 360px; right: 30%; bottom: -120px; background: rgba(56, 189, 248, .16) } [data-theme="dark"] .hero2-bg .blob { opacity: .35 } .hero2 .container { position: relative; z-index: 1 } .hero2-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 2.6rem; align-items: center } /* left copy */ .glow-badge { position: relative; border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(120deg, rgba(124, 92, 255, .7), rgba(217, 70, 239, .4), rgba(124, 92, 255, .7)) border-box; } .hero2-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.8rem, 5.8vw, 4.8rem); line-height: 1.04; letter-spacing: -.02em; color: var(--ink-strong); margin: 0 0 1rem; } .hero2-title .hl { display: inline-block; white-space: nowrap } @media(max-width:560px) { .hero2-title .hl { white-space: normal } } :root { --gt-a: #2b2467 } [data-theme="dark"] { --gt-a: #ffffff } .grad-anim { background: linear-gradient(90deg, var(--gt-a) 0%, var(--violet) 30%, #d946ef 50%, var(--violet) 70%, var(--gt-a) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradshift 7s linear infinite; } @keyframes gradshift { to { background-position: 220% center } } .hero2-sub { font-size: 1.15rem; color: var(--muted); margin: 0 0 1.7rem; min-height: 1.8em } .rotator { display: inline-block; color: var(--violet); font-weight: 600; position: relative; transition: opacity .35s, transform .35s } .rotator.out { opacity: 0; transform: translateY(8px) } .btn-shine { position: relative; overflow: hidden } .btn-shine::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-20deg); animation: shine 3.4s ease-in-out infinite; } @keyframes shine { 0% { left: -70% } 55% { left: 130% } 100% { left: 130% } } .hero2-proof { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0 1.4rem; color: var(--muted); font-size: .95rem; flex-wrap: wrap } .hero2-proof b { color: var(--ink-strong) } .hero2-proof .stars { color: var(--amber); letter-spacing: 1px } .avatar-stack { display: flex } .avatar-stack span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: .8rem; margin-left: -10px; border: 2px solid var(--bg); font-family: var(--font-display); } .avatar-stack span:first-child { margin-left: 0 } .avatar-stack span:nth-child(1) { background: linear-gradient(135deg, #7c5cff, #2c255e) } .avatar-stack span:nth-child(2) { background: linear-gradient(135deg, #f43f5e, #b91c5c) } .avatar-stack span:nth-child(3) { background: linear-gradient(135deg, #10b981, #047857) } .avatar-stack span:nth-child(4) { background: linear-gradient(135deg, #f59e0b, #d97706) } /* right stage: deck + orbit */ .hero2-stage { position: relative; min-height: 520px; display: grid; place-items: center } .hero2-stage .ring { position: absolute; width: 480px; height: 480px; border-radius: 50%; border: 1.5px dashed rgba(124, 92, 255, .42); background: radial-gradient(circle, rgba(255, 255, 255, .82) 0 34%, rgba(124, 92, 255, .08) 56%, transparent 72%); box-shadow: inset 0 0 80px rgba(124, 92, 255, .1), 0 0 80px rgba(124, 92, 255, .12) } [data-theme="dark"] .hero2-stage .ring { background: radial-gradient(circle, rgba(29, 26, 52, .78) 0 34%, rgba(124, 92, 255, .12) 56%, transparent 72%) } .hero2-stage .ring::before { content: ''; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 92, 255, .16), transparent 70%); } .orbit { position: absolute; width: 480px; height: 480px; animation: spin 30s linear infinite; pointer-events: none } @keyframes spin { to { transform: rotate(360deg) } } .o-pos { position: absolute; left: 50%; top: 50%; margin: -24px 0 0 -24px } .o-ico { width: 48px; height: 48px; border-radius: 14px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); animation: spinrev 30s linear infinite; font-family: var(--font-display); font-weight: 700; color: var(--navy); position: relative; } [data-theme="dark"] .o-ico { background: #1e1e2e; border-color: rgba(255, 255, 255, .12); color: var(--violet-2); box-shadow: 0 2px 12px rgba(0, 0, 0, .35); } .o-ico img { width: 64%; height: 64%; object-fit: contain; display: block } /* Tooltip */ .o-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--ink-strong); color: var(--bg); font-size: .62rem; font-weight: 600; border-radius: 6px; padding: .2em .5em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 10; } .o-ico:hover .o-tip { opacity: 1 } @keyframes spinrev { to { transform: rotate(-360deg) } } .o-pos.p1 { transform: rotate(0deg) translateX(240px) } .o-pos.p2 { transform: rotate(60deg) translateX(240px) } .o-pos.p3 { transform: rotate(120deg) translateX(240px) } .o-pos.p4 { transform: rotate(180deg) translateX(240px) } .o-pos.p5 { transform: rotate(240deg) translateX(240px) } .o-pos.p6 { transform: rotate(300deg) translateX(240px) } .deck { position: relative; width: 300px } .deck-card { background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(16px); padding: 1.3rem; } .deck-card.back { position: absolute; inset: 0; z-index: 0 } .deck-card.back.bk1 { transform: rotate(-8deg) translate(-26px, 14px) scale(.96); opacity: .65 } .deck-card.back.bk2 { transform: rotate(7deg) translate(26px, 10px) scale(.96); opacity: .65 } .deck-card.front { position: relative; z-index: 2; animation: floaty 6s ease-in-out infinite } .deck-card .dk-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem } .deck-card .dk-logo { width: 54px; height: 54px; border-radius: 15px; background: #fff; display: grid; place-items: center; overflow: hidden; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--navy); flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); } [data-theme="dark"] .deck-card .dk-logo { background: #1e1e2e; color: var(--violet-2) } .deck-card .dk-logo img { width: 68%; height: 68%; object-fit: contain } /* Full image variant — shows product image large and rounded */ .deck-card .dk-logo.dk-logo-full { width: 60px; height: 60px; border-radius: 16px; background: transparent; padding: 0; } .deck-card .dk-logo.dk-logo-full img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .deck-card h3 { margin: 0; font-size: 1.15rem } .deck-card .dk-cat { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600 } .deck-card .tool-checks { margin-bottom: .9rem } .dk-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; border-top: 1px dashed var(--line); padding-top: .9rem } .dk-price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-strong) } .dk-price small { color: var(--muted); font-weight: 500; font-size: .72rem; font-family: var(--font-body) } .dk-price .was { display: block; font-size: .75rem; color: var(--muted); text-decoration: line-through; font-family: var(--font-body); font-weight: 500 } .float-tag { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 999px; padding: .45rem .9rem; font-size: .76rem; font-weight: 700; color: var(--ink-strong); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); animation: floaty 5s ease-in-out infinite; } .float-tag.t1 { top: 8%; left: 4%; animation-delay: .8s } .float-tag.t2 { bottom: 10%; right: 2%; color: #e5484d; animation-delay: 1.6s } .float-tag.t3 { top: 16%; right: 0%; color: var(--green); animation-delay: 2.4s } @media(max-width:1180px) { .o-pos.p1, .o-pos.p2, .o-pos.p3, .o-pos.p4, .o-pos.p5, .o-pos.p6 { transform: rotate(0) translateX(0) } .orbit, .hero2-stage .ring { width: 420px; height: 420px } .o-pos.p1 { transform: rotate(0deg) translateX(210px) } .o-pos.p2 { transform: rotate(60deg) translateX(210px) } .o-pos.p3 { transform: rotate(120deg) translateX(210px) } .o-pos.p4 { transform: rotate(180deg) translateX(210px) } .o-pos.p5 { transform: rotate(240deg) translateX(210px) } .o-pos.p6 { transform: rotate(300deg) translateX(210px) } } @media(max-width:980px) { .hero2-grid { grid-template-columns: 1fr } .hero2-stage { display: none } } @media (prefers-reduced-motion: reduce) { .orbit, .o-ico, .grad-anim, .btn-shine::after, .deck-card.front, .float-tag { animation: none } } /* ===================================================================== v6 — icons + redesigned home Tools & Packs sections ===================================================================== */ .ic { display: inline-block; vertical-align: -3px; flex: none } .sec-pill .ic { color: var(--violet); vertical-align: -4px } .btn .ic { vertical-align: -4px } .chk { font-size: .58rem } .trust-pills .ic { color: var(--violet); width: 15px; height: 15px } .pay-chip .ic { width: 14px; height: 14px } .support-header-btn { color: var(--violet) } .support-unread-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 900; line-height: 16px; text-align: center } .site-floating-actions { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: .7rem } .scroll-top-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: .15rem; border: 1px solid rgba(124, 92, 255, .32); border-radius: 14px; background: rgba(255, 255, 255, .88); color: var(--violet); box-shadow: 0 14px 34px rgba(44, 37, 94, .18); backdrop-filter: blur(16px); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px) scale(.94); transition: opacity .22s ease, visibility .22s ease, transform .22s ease, border-color .22s ease } .scroll-top-btn.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1) } .scroll-top-btn:hover { transform: translateY(-3px) scale(1.03); border-color: rgba(124, 92, 255, .62) } [data-theme="dark"] .scroll-top-btn { background: rgba(29, 24, 60, .92); color: #b7a8ff } .support-float-launcher { position: relative; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1px solid rgba(124, 92, 255, .28); border-radius: 17px; background: linear-gradient(135deg, rgba(255, 255, 255, .92), rgba(242, 239, 255, .82)); color: var(--ink-strong); box-shadow: 0 18px 42px rgba(44, 37, 94, .2); backdrop-filter: blur(16px) } .support-float-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 13px; background: linear-gradient(135deg, #7c5cff, #2478c9); color: #fff } .support-float-copy strong, .support-float-copy small { display: block } .support-float-copy strong { font-size: .78rem } .support-float-copy small { font-size: .65rem; color: var(--muted) } .support-float-launcher>b { align-self: flex-start; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: #ef4444; color: #fff; font-size: .6rem; line-height: 17px; text-align: center } [data-theme="dark"] .support-float-launcher { background: linear-gradient(135deg, rgba(29, 24, 60, .95), rgba(31, 37, 78, .9)); color: #fff } .support-float-launcher:hover { transform: translateY(-3px); border-color: rgba(124, 92, 255, .55); box-shadow: 0 22px 48px rgba(44, 37, 94, .27) } @media(max-width:600px) { .site-floating-actions { right: .75rem; bottom: .75rem } .support-float-copy { display: none } .support-float-launcher { padding: .48rem } .support-float-icon { width: 42px; height: 42px } } .admin-nav a { display: flex; align-items: center; gap: .6rem } .admin-nav .ic { opacity: .85 } .empty-state .big .ic { width: 44px; height: 44px; color: var(--muted) } .contact-item .ci .ic { width: 16px; height: 16px } .rating-row .ic, .pd-rating .ic, .pd-live .ic { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted) } .info-cell .ic { width: 15px; height: 15px } .legal-wrap h2 .ic { color: var(--violet) } /* split section header (title left, action right) */ .split-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.4rem; margin-bottom: 1.6rem; flex-wrap: wrap } .split-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: -.01em; margin: .5rem 0 .3rem; line-height: 1.1 } .split-head p { color: var(--muted); margin: 0; max-width: 34rem } .split-head .sh-action { flex: none; margin-bottom: .3rem } /* home tools: filter pills + animated grid */ .home-filter { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem } .home-filter .chip { font-size: .82rem } .home-filter .chip .cnt { opacity: .65; font-size: .72rem; margin-left: .25rem } .ht-item { display: contents } .ht-item.off { display: none } .home-tools .pcard { animation: cardin .35s ease both } @keyframes cardin { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } } /* Homepage popular tools: six focused cards with a storefront-style hierarchy. */ .popular-tools-section { position: relative; overflow: hidden; border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent); background: color-mix(in srgb, var(--bg) 94%, #7c5cff 6%); } .popular-tools-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(124, 92, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 92, 255, .035) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); } .popular-tools-section>.container { position: relative; z-index: 1; } .popular-tools-head { align-items: center; margin-bottom: 1.25rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--line); } .popular-tools-intro { max-width: 650px; } .popular-tools-head h2 { max-width: 620px; margin-top: .65rem; font-size: 3rem; } .popular-tools-head p { max-width: 570px; font-size: .95rem; line-height: 1.65; } .popular-tools-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; } .popular-tools-proof, .popular-tools-footer>span { display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); font-size: .76rem; font-weight: 750; } .popular-tools-proof svg, .popular-tools-footer>span svg { color: #16a05d; } .popular-tools-filter { margin-bottom: 1.25rem; } .popular-tools-filter .chip { min-height: 38px; padding: .55rem .85rem; border: 1px solid var(--line); background: var(--card); transition: color .2s ease, border-color .2s ease, background-color .2s ease, transform .2s ease; } .popular-tools-filter .chip:hover { transform: translateY(-1px); border-color: rgba(124, 92, 255, .4); } .popular-tools-filter .chip.active { border-color: var(--violet); background: var(--violet); color: #fff; box-shadow: 0 7px 18px rgba(124, 92, 255, .22); } .popular-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.15rem; align-items: stretch; } .popular-tools-grid .tl-card { border-radius: 18px; border-color: color-mix(in srgb, var(--line) 84%, #7c5cff 16%); background: var(--card); box-shadow: 0 9px 28px rgba(44, 37, 94, .075), inset 0 1px 0 rgba(255, 255, 255, .6); } .popular-tools-grid .tl-card-top { width: calc(100% - 20px); margin: 10px 10px 0; border: 1px solid rgba(255, 255, 255, .38); border-radius: 14px; } .popular-tools-grid .tl-card-img { border-radius: 13px; } .popular-tools-grid .tl-card-img.icon-mode { border-radius: 16px; } .popular-tools-grid .tl-card-body { padding: .95rem 1rem 1rem; gap: .55rem; } .popular-tools-grid .tl-title { font-size: 1.02rem; } .popular-tools-grid .tl-price { font-size: 1.3rem; } .popular-tools-grid .tl-btn-get, .popular-tools-grid .tl-btn-cart { min-height: 41px; height: 41px; border-radius: 11px; } .popular-tools-grid .tl-btn-cart { width: 41px; min-width: 41px; } .popular-tools-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } [data-theme="dark"] .popular-tools-section { background: color-mix(in srgb, var(--bg) 93%, #7c5cff 7%); } /* Restore the original homepage tools presentation on desktop only. */ @media (min-width: 1025px) { .popular-tools-section { overflow: visible; border-top: 0; border-bottom: 0; background: var(--bg); } [data-theme="dark"] .popular-tools-section { background: var(--bg); } .popular-tools-section::before { display: none; } .popular-tools-head { align-items: flex-end; margin-bottom: 1.6rem; padding-bottom: 0; border-bottom: 0; } .popular-tools-intro { max-width: none; } .popular-tools-head h2 { max-width: none; margin: .5rem 0 .3rem; font-size: clamp(1.9rem, 3.6vw, 2.8rem); } .popular-tools-head p { max-width: 34rem; font-size: inherit; line-height: inherit; } .popular-tools-head-side { display: block; } .popular-tools-proof { display: none; } .popular-tools-filter { margin-bottom: 1.6rem; } .popular-tools-filter .chip { min-height: 0; padding: .5rem .8rem; box-shadow: none; } .popular-tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .popular-tools-grid .tl-card { border-radius: 20px; border-color: var(--line); background: var(--card); box-shadow: none; } .popular-tools-grid .tl-card-top { width: auto; margin: 0; border: 0; border-radius: 20px; } .popular-tools-grid .tl-card-img { border-radius: 20px; } .popular-tools-grid .tl-card-img.icon-mode { border-radius: 20px; } .popular-tools-grid .tl-card-body { padding: 1rem 1rem 1.05rem; gap: .65rem; } .popular-tools-grid .tl-title { font-size: 1.08rem; } .popular-tools-grid .tl-price { font-size: 1.35rem; } .popular-tools-grid .tl-btn-get, .popular-tools-grid .tl-btn-cart { min-height: 43px; height: 43px; border-radius: 12px; } .popular-tools-grid .tl-btn-cart { width: 43px; min-width: 43px; } .popular-tools-footer { display: flex; justify-content: center; margin-top: 1.8rem; padding-top: 0; border-top: 0; } .popular-tools-footer>span { display: none; } } @media (max-width: 900px) and (min-width: 681px) { .popular-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Homepage creator packs — image-led cards matching the packs catalog */ .packs2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; position: relative } .packs2::before { content: ''; position: absolute; inset: 8% 4% -8%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at center, rgba(124, 92, 255, .18), transparent 68%); filter: blur(45px) } .pk2-card { --pack-accent: #7c5cff; min-width: 0; display: flex; flex-direction: column; cursor: pointer; position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--pack-accent) 24%, var(--line)); border-radius: 24px; background: linear-gradient(145deg, color-mix(in srgb, var(--card) 94%, var(--pack-accent) 6%), var(--card)); box-shadow: 0 12px 32px rgba(38, 29, 91, .09), inset 0 1px 0 rgba(255, 255, 255, .7); transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease } .pk2-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3) } .pk2-card:hover, .pk2-card:focus-visible { transform: translateY(-7px); border-color: color-mix(in srgb, var(--pack-accent) 62%, var(--line)); box-shadow: 0 24px 55px color-mix(in srgb, var(--pack-accent) 18%, transparent), 0 10px 24px rgba(38, 29, 91, .12); outline: none } .pk2-card.is-featured { border-color: color-mix(in srgb, var(--pack-accent) 55%, var(--line)) } .pk2-media { position: relative; height: 230px; margin: 10px 10px 0; overflow: hidden; isolation: isolate; border-radius: 17px; background: linear-gradient(135deg, color-mix(in srgb, var(--pack-accent) 36%, #17142d), #17142d) } .pk2-media-backdrop { position: absolute; inset: -12px; z-index: -1; background: radial-gradient(circle at 25% 15%, var(--pack-accent), transparent 52%); filter: blur(22px); opacity: .6 } .pk2-media::after { content: ''; position: absolute; inset: 36% 0 0; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(12, 10, 29, .76)); z-index: 1 } .pk2-media>img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .4s ease } .pk2-card:hover .pk2-media>img, .pk2-card:focus-visible .pk2-media>img { transform: scale(1.055); filter: saturate(1.08) contrast(1.03) } .pk2-media .pack-badge { top: 12px; left: 12px; z-index: 3; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px) } .pk2-media .pack-badge.free { left: auto; right: 12px; background: rgba(19, 158, 110, .9) } .pk2-card:not(.is-featured) .pk2-media .pack-badge.free { left: 12px; right: auto } .pk2-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 2rem; text-align: center; color: rgba(255, 255, 255, .88); font-family: var(--font-display); font-weight: 700; background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--pack-accent) 72%, transparent), transparent 50%), linear-gradient(135deg, #252044, #151329) } .pk2-placeholder[hidden] { display: none } .pk2-open { position: absolute; z-index: 3; left: 15px; bottom: 13px; display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .92); font-size: .72rem; font-weight: 700; letter-spacing: .02em; transform: translateY(4px); opacity: .82; transition: .3s ease } .pk2-card:hover .pk2-open { transform: none; opacity: 1 } .pk2-body { padding: 1.15rem 1.25rem 1.25rem; display: flex; flex: 1; flex-direction: column } .pk2-category { display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; color: var(--pack-accent); font-size: .68rem; font-weight: 800; letter-spacing: .09em } .pk2-category i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, var(--pack-accent) 14%, transparent) } .pk2-body h3 { margin: 0 0 .45rem; color: var(--ink-strong); font-size: 1.15rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .pk2-body>p { min-height: 3.9em; margin: 0 0 .85rem; color: var(--muted); font-size: .82rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden } .pk2-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .75rem; padding: .7rem 0; border-top: 1px dashed var(--line); border-bottom: 1px dashed var(--line); color: var(--muted); font-size: .72rem } .pk2-meta span { display: inline-flex; align-items: center; gap: .25rem } .pk2-meta .ic { color: var(--pack-accent) } .pk2-meta b { color: var(--ink-strong) } .pk2-meta .pk2-rating, .pk2-meta .pk2-rating b { color: #d89400 } .pk2-foot { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: auto; padding-top: 1rem } .pk2-price { color: var(--green); font-family: var(--font-display); font-size: 1.12rem; font-weight: 800 } .pk2-price .was { display: block; margin-top: .1rem; color: var(--muted); font-family: var(--font-body); font-size: .7rem; font-weight: 500; text-decoration: line-through } [data-theme="dark"] .pk2-card { background: linear-gradient(145deg, color-mix(in srgb, var(--card) 94%, var(--pack-accent) 6%), var(--card)); box-shadow: 0 16px 38px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .04) } .packs2-stats { margin-top: 1.4rem; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); } .packs2-stats .cell { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 1rem; border-left: 1px solid var(--line); color: var(--muted); font-size: .85rem; font-weight: 500 } .packs2-stats .cell:first-child { border-left: 0 } .packs2-stats .cell .ic { color: var(--violet) } .packs2-stats .cell b { color: var(--ink-strong) } @media(max-width:980px) { .packs2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .pk2-card:first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(300px, 1.05fr) 1fr } .pk2-card:first-child .pk2-media { height: auto; min-height: 285px; margin: 10px 0 10px 10px } .packs2-stats { grid-template-columns: 1fr 1fr } .packs2-stats .cell:nth-child(3) { border-left: 0 } .split-head { align-items: flex-start; flex-direction: column } } @media(max-width:680px) { .packs2 { grid-template-columns: 1fr; gap: 1rem } .pk2-card:first-child { grid-column: auto; display: flex } .pk2-card:first-child .pk2-media, .pk2-media { height: clamp(210px, 58vw, 280px); min-height: 0; margin: 8px 8px 0 } .pk2-body { padding: 1rem } .pk2-body>p { min-height: auto } } @media(max-width:430px) { .pk2-foot { align-items: stretch; flex-direction: column } .pk2-foot .btn { width: 100%; justify-content: center } } /* ---- Kill horizontal overflow (bottom scrollbar + right gap) ---- */ html, body { overflow-x: clip; max-width: 100%; } @supports not (overflow: clip) { html, body { overflow-x: hidden; } } .hero2-bg { overflow: hidden; pointer-events: none; } /* marquee sits inside the hero, between content and stats */ .hero2 .marquee-bar { margin: 2.4rem 0 0 } .hero2 .stats-band { margin-top: 1.4rem; background: linear-gradient(110deg, rgba(255, 255, 255, .9), rgba(243, 240, 255, .86) 45%, rgba(238, 247, 255, .9)); border-color: rgba(124, 92, 255, .2); box-shadow: 0 18px 48px rgba(43, 36, 103, .12), inset 0 1px 0 rgba(255, 255, 255, .9) } .hero2 .stat-cell { position: relative; transition: transform .3s ease, background .3s ease } .hero2 .stat-cell:hover { transform: translateY(-4px); background: rgba(124, 92, 255, .07) } .hero2 .stat-cell:nth-child(1) .stat-ico { color: #6947e8; background: linear-gradient(135deg, #eee9ff, #ddd4ff) } .hero2 .stat-cell:nth-child(2) .stat-ico { color: #d89400 !important; background: linear-gradient(135deg, #fff7d6, #ffe8a3) } .hero2 .stat-cell:nth-child(3) .stat-ico { color: #087fba; background: linear-gradient(135deg, #dcf5ff, #bceaff) } .hero2 .stat-cell:nth-child(4) .stat-ico { color: #159669; background: linear-gradient(135deg, #ddfaee, #bdf2da) } .hero2 .stat-ico { box-shadow: 0 8px 20px rgba(43, 36, 103, .1); animation: statIconPulse 3.5s ease-in-out infinite } .hero2 .stat-cell:nth-child(2) .stat-ico { animation-delay: .5s } .hero2 .stat-cell:nth-child(3) .stat-ico { animation-delay: 1s } .hero2 .stat-cell:nth-child(4) .stat-ico { animation-delay: 1.5s } @keyframes statIconPulse { 0%, 100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-4px) rotate(3deg) } } [data-theme="dark"] .hero2 .stats-band { background: linear-gradient(110deg, rgba(34, 30, 61, .94), rgba(25, 29, 50, .92)); border-color: rgba(151, 125, 255, .24); box-shadow: 0 18px 50px rgba(0, 0, 0, .28) } /* ===================================================================== v8 — Why Us page redesign ===================================================================== */ /* numbered reasons rail */ .reasons { border-bottom: 1px solid var(--line) } .reason-row { display: grid; grid-template-columns: 150px 1.1fr 1fr; gap: 2rem; padding: 2.4rem 0; border-top: 1px solid var(--line); align-items: center; transition: .25s } .reason-num { font-family: var(--font-display); font-weight: 700; font-size: 4.2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(124, 92, 255, .55); transition: .3s; } .reason-row:hover .reason-num { color: var(--violet); -webkit-text-stroke: 0 } .reason-row h3 { font-size: 1.5rem; margin: 0 0 .35rem } .reason-row p { color: var(--muted); margin: 0; font-size: .95rem } .reason-chips { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end } .reason-chips span { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--line); background: var(--glass); border-radius: 999px; padding: .45rem .9rem; font-size: .78rem; font-weight: 600; color: var(--ink); } .reason-chips .ic { color: var(--green); width: 14px; height: 14px } /* comparison panel */ .vs-panel { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-sm) } .vs-col { padding: 2.2rem } .vs-col.bad { background: rgba(229, 72, 77, .05); border-right: 1px solid var(--line) } .vs-col.good { background: rgba(124, 92, 255, .07) } [data-theme="dark"] .vs-col.bad { background: rgba(229, 72, 77, .08) } [data-theme="dark"] .vs-col.good { background: rgba(124, 92, 255, .12) } .vs-col .vs-tag { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: .4rem .9rem; border-radius: 999px; margin-bottom: 1.2rem } .vs-col.bad .vs-tag { background: rgba(229, 72, 77, .12); color: #e5484d } .vs-col.good .vs-tag { background: rgba(124, 92, 255, .16); color: var(--violet) } .vs-col h3 { font-size: 1.4rem } .vs-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .85rem } .vs-list li { display: flex; gap: .7rem; align-items: flex-start; font-size: .93rem; color: var(--ink) } .vs-list .ic { flex: none; margin-top: 2px } .vs-col.bad .vs-list .ic { color: #e5484d } .vs-col.good .vs-list .ic { color: var(--green) } .vs-list li b { color: var(--ink-strong) } /* delivery timeline */ .timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; position: relative; margin-top: 2.4rem } .timeline::before { content: ''; position: absolute; top: 24px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, var(--violet), var(--grad-2)); opacity: .35 } .tl-step { position: relative; text-align: center; padding: 0 .5rem } .tl-dot { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: var(--card); border: 2px solid var(--violet); color: var(--violet); font-family: var(--font-display); font-weight: 700; position: relative; z-index: 1; box-shadow: 0 0 0 6px var(--bg); } .tl-step h4 { font-size: 1.02rem; margin: 0 0 .3rem; font-family: var(--font-display) } .tl-step p { color: var(--muted); font-size: .85rem; margin: 0 0 .6rem } .tl-time { display: inline-flex; align-items: center; gap: .35rem; background: var(--green-bg); color: var(--green); font-size: .72rem; font-weight: 700; padding: .3rem .7rem; border-radius: 999px } .tl-time .ic { width: 12px; height: 12px } /* guarantee card */ .guarantee { display: grid; grid-template-columns: auto 1fr auto; gap: 1.8rem; align-items: center; background: linear-gradient(135deg, rgba(124, 92, 255, .10), rgba(44, 37, 94, .06)); border: 1px solid rgba(124, 92, 255, .35); border-radius: 26px; padding: 2.2rem; margin-top: 3rem; box-shadow: var(--shadow-sm); } .g-shield { width: 84px; height: 84px; border-radius: 24px; display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(135deg, var(--violet), var(--navy)); box-shadow: 0 14px 34px rgba(124, 92, 255, .4); } .g-shield .ic { width: 38px; height: 38px } .guarantee h3 { font-size: 1.5rem; margin: 0 0 .3rem } .guarantee p { color: var(--muted); margin: 0 } .g-chips { display: grid; gap: .5rem } .g-chips span { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--ink-strong) } .g-chips .ic { color: var(--green); width: 15px; height: 15px } @media(max-width:980px) { .reason-row { grid-template-columns: 80px 1fr; gap: 1.2rem } .reason-num { font-size: 2.8rem } .reason-chips { grid-column: 2; justify-content: flex-start } .vs-panel { grid-template-columns: 1fr } .vs-col.bad { border-right: 0; border-bottom: 1px solid var(--line) } .timeline { grid-template-columns: 1fr 1fr; gap: 2rem 1rem } .timeline::before { display: none } .guarantee { grid-template-columns: 1fr; text-align: center } .g-shield { margin: 0 auto } .g-chips { justify-items: center } } /* ===================================================================== v9 — About page redesign ===================================================================== */ .story-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: start; margin: 1rem 0 0 } .story-split h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.1; position: sticky; top: 110px } .story-body p { color: var(--muted); font-size: 1.02rem; margin: 0 0 1.1rem } .story-body p:first-child::first-letter { font-family: var(--font-display); font-weight: 700; font-size: 3.6em; line-height: .8; float: left; margin: .06em .12em 0 0; color: var(--violet); } /* vertical journey timeline */ .vtl { position: relative; max-width: 780px; margin: 2.2rem auto 0; padding-left: 8px } .vtl::before { content: ''; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--violet), rgba(124, 92, 255, .08)) } .vtl-item { position: relative; padding: 0 0 2rem 3rem } .vtl-item:last-child { padding-bottom: 0 } .vtl-dot { position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 2px solid var(--violet); display: grid; place-items: center; color: var(--violet); box-shadow: 0 0 0 5px var(--bg); z-index: 1; } .vtl-dot .ic { width: 14px; height: 14px } .vtl-item .vtag { display: inline-flex; font-size: .68rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--violet); margin-bottom: .25rem } .vtl-item h3 { font-size: 1.3rem; margin: 0 0 .3rem } .vtl-item p { color: var(--muted); margin: 0; font-size: .94rem; max-width: 36rem } /* value tiles with accent bar */ .vtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: 2rem } .vtile { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.6rem 1.6rem 1.6rem 1.9rem; overflow: hidden; transition: .25s } .vtile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--violet), var(--grad-2)) } .vtile:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(124, 92, 255, .4) } .vtile .vt-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--chip-bg); color: var(--navy); margin-bottom: .9rem } [data-theme="dark"] .vtile .vt-ico { color: var(--violet-2) } .vtile h3 { font-size: 1.15rem; margin: 0 0 .3rem } .vtile p { color: var(--muted); margin: 0; font-size: .9rem } /* founder premium card */ .founder2 { background: linear-gradient(145deg, var(--card), var(--card)) padding-box, linear-gradient(135deg, rgba(124, 92, 255, .5), rgba(217, 70, 239, .2), rgba(124, 92, 255, .4)) border-box; border: 1px solid transparent; border-radius: 26px; padding: 2.4rem; margin-top: 3rem; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: center; box-shadow: var(--shadow-sm); } .founder2 .f-av { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 2rem; background: linear-gradient(135deg, var(--violet), var(--navy)); box-shadow: 0 0 34px rgba(124, 92, 255, .5); } .founder2 .f-eyebrow { color: var(--violet); font-weight: 700; text-transform: uppercase; letter-spacing: 2px; font-size: .72rem } .founder2 h3 { font-size: 1.6rem; margin: .15rem 0 .4rem } .founder2 blockquote { margin: .2rem 0 0; color: var(--muted); font-style: italic; font-size: .98rem; border-left: 3px solid var(--violet); padding-left: 1rem } @media(max-width:980px) { .story-split { grid-template-columns: 1fr } .story-split h2 { position: static } .vtiles { grid-template-columns: 1fr } .founder2 { grid-template-columns: 1fr; text-align: center } .founder2 .f-av { margin: 0 auto } .founder2 blockquote { text-align: left } } /* ===================================================================== v10 — Product detail redesign (Buy Now / WhatsApp / cart icon) ===================================================================== */ .pd-buybox { background: linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, linear-gradient(135deg, rgba(124, 92, 255, .45), rgba(233, 230, 247, .6), rgba(124, 92, 255, .35)) border-box; border: 1px solid transparent; } [data-theme="dark"] .pd-buybox { background: linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box, linear-gradient(135deg, rgba(124, 92, 255, .5), rgba(255, 255, 255, .08), rgba(124, 92, 255, .4)) border-box; } .save-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--green-bg); color: var(--green); font-size: .76rem; font-weight: 700; padding: .35rem .75rem; border-radius: 999px; } .qty-step { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card) } .qty-step button { width: 38px; height: 42px; border: 0; background: transparent; cursor: pointer; font-size: 1.1rem; color: var(--ink-strong); font-weight: 700; transition: .15s } .qty-step button:hover { background: var(--chip-bg) } .qty-step input { width: 52px; height: 42px; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: transparent; color: var(--ink-strong); font-weight: 700; font-family: var(--font-display); font-size: 1rem } .qty-step input::-webkit-outer-spin-button, .qty-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 } .pd-ctarow { display: flex; gap: .6rem; margin-top: 1rem } .pd-ctarow .btn { flex: 1; padding: .95rem 1rem } .pd-cart-sq { width: 54px; height: 54px; flex: none; border-radius: 16px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; cursor: pointer; color: var(--ink-strong); transition: .2s; } .pd-cart-sq:hover { background: var(--violet); border-color: var(--violet); color: #fff; transform: translateY(-1px) } .pd-cart-sq svg { width: 22px; height: 22px } .pd-secure { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; } .pd-secure .cell { display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); background: var(--surface-alt); border-radius: 14px; padding: .65rem .8rem; font-size: .74rem; font-weight: 600; color: var(--muted); line-height: 1.25; } .pd-secure .cell .ic { color: var(--violet); flex: none } .pd-secure .cell b { display: block; color: var(--ink-strong); font-size: .8rem } /* sticky mobile buy bar */ .pd-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: none; align-items: center; gap: .6rem; background: var(--glass-strong); backdrop-filter: blur(18px); border-top: 1px solid var(--line); padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom)); box-shadow: 0 -8px 30px rgba(44, 37, 94, .15); } .pd-mbar .mprice { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink-strong); line-height: 1.1 } .pd-mbar .mprice small { display: block; color: var(--muted); font-size: .68rem; text-decoration: line-through; font-family: var(--font-body); font-weight: 500 } .pd-mbar .btn { padding: .7rem 1rem; font-size: .88rem } .pd-mbar .grow { flex: 1 } @media(max-width:720px) { .pd-mbar { display: flex } body.pdp .float-chat { bottom: 92px } .pd-ctarow { flex-wrap: wrap } .pd-secure { grid-template-columns: 1fr } } /* ===================================================================== v11 — Packs page (sidebar filters) + user dashboard ===================================================================== */ .packs-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.6rem; align-items: start } .side-panel { position: sticky; top: 100px; display: grid; gap: 1.2rem } .side-panel .panel { padding: 1.2rem } .side-panel h4 { font-size: .95rem; margin: 0 0 .8rem } /* ── Type segment redesign ── */ .seg { display: flex; gap: .35rem; flex-wrap: wrap; background: var(--chip-bg); border-radius: 14px; padding: .35rem; } .seg a { flex: 1; text-align: center; padding: .5rem .6rem; border-radius: 10px; font-size: .78rem; font-weight: 700; color: var(--muted); transition: .18s; text-decoration: none; white-space: nowrap; } .seg a:hover { background: rgba(124, 92, 255, .1); color: var(--violet) } .seg a.on { background: linear-gradient(135deg, var(--violet), #a855f7); color: #fff; box-shadow: 0 3px 10px rgba(124, 92, 255, .3); } [data-theme="dark"] .seg a.on { background: linear-gradient(135deg, var(--violet), #a855f7) } /* ── Category list redesign ── */ .cat-list { display: grid; gap: .3rem } .cat-list a { display: flex; justify-content: space-between; align-items: center; padding: .6rem .85rem; border-radius: 12px; font-size: .82rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: .18s; border: 1.5px solid transparent; } .cat-list a:hover { background: rgba(124, 92, 255, .07); border-color: rgba(124, 92, 255, .2); color: var(--violet); } .cat-list a.on { background: linear-gradient(135deg, var(--violet), #a855f7); color: #fff; border-color: transparent; box-shadow: 0 4px 14px rgba(124, 92, 255, .3); } .cat-list a .cat-left { display: flex; align-items: center; gap: .55rem; } .cat-list a .cat-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--violet); box-shadow: 0 0 6px rgba(124, 92, 255, .5); } .cat-list a.on .cat-dot { background: rgba(255, 255, 255, .7); box-shadow: none } .cat-list .n { font-size: .68rem; font-weight: 800; background: rgba(0, 0, 0, .1); border-radius: 8px; padding: .1em .45em; min-width: 18px; text-align: center; } .cat-list a.on .n { background: rgba(255, 255, 255, .25); color: #fff } .cat-list a:hover .n { background: rgba(124, 92, 255, .15); color: var(--violet) } .sort-select { width: 100%; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--card); color: var(--ink-strong); font: inherit; font-size: .86rem } .packs-topstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin: 1.6rem 0 0 } .packs-topstats .cell { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 16px; padding: .9rem; text-align: center } .packs-topstats .n { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-strong) } .packs-topstats .l { color: var(--muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px } .claim-btn { display: inline-flex; align-items: center; gap: .35rem } .pack-foot .btn-group { display: flex; gap: .4rem } /* ===================================================================== USER DASHBOARD REDESIGN ===================================================================== */ .ud-wrap { position: relative; } .ud-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .ud-bg-shape { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; } .ud-bg-shape.shape-1 { width: 600px; height: 600px; background: var(--violet); top: -200px; left: -100px; } .ud-bg-shape.shape-2 { width: 500px; height: 500px; background: var(--navy); bottom: -100px; right: -100px; } .ud-shell { position: relative; z-index: 1; display: flex; gap: 2rem; align-items: flex-start; margin: 1rem 0 3rem; } /* Sidebar */ .ud-side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 100px; } .ud-profile-card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: 2rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); } .ud-profile-card .dash-av { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--navy)); color: #fff; display: grid; place-items: center; font-size: 1.8rem; font-family: var(--font-display); font-weight: 700; margin: 0 auto 1rem; box-shadow: 0 8px 24px rgba(124, 92, 255, .3); } .ud-profile-card h3 { margin: 0 0 .3rem; font-size: 1.25rem; color: var(--ink-strong); } .ud-email { color: var(--muted); font-size: .85rem; display: flex; align-items: center; justify-content: center; gap: .3rem; margin: 0 0 .8rem; } .ud-member { font-size: .75rem; background: var(--chip-bg); color: var(--ink); display: inline-block; padding: .3em .8em; border-radius: 999px; font-weight: 600; } .ud-nav { background: var(--glass); border: 1px solid var(--glass-border); border-radius: 20px; padding: .5rem; display: flex; flex-direction: column; gap: .2rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); } .ud-nav-btn { display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left; padding: .9rem 1rem; background: transparent; border: none; border-radius: 12px; font-family: var(--font-body); font-weight: 600; font-size: .95rem; color: var(--muted); cursor: pointer; transition: all .2s ease; } .ud-nav-btn .ud-icon { color: var(--muted); transition: .2s ease; display: grid; place-items: center; } .ud-nav-btn:hover { background: var(--surface-alt); color: var(--ink-strong); } .ud-nav-btn:hover .ud-icon { color: var(--violet); } .ud-nav-btn.on { background: rgba(124, 92, 255, .1); color: var(--violet); } .ud-nav-btn.on .ud-icon { color: var(--violet); } .ud-side-acts { display: flex; flex-direction: column; gap: .6rem; } /* Main Content */ .ud-main { flex: 1; min-width: 0; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 24px; padding: 2.5rem; box-shadow: var(--shadow-sm); backdrop-filter: blur(12px); } .ud-header { margin-bottom: 2rem; border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; } .ud-header h2 { font-size: 1.8rem; margin: 0 0 .3rem; color: var(--ink-strong); } .ud-header p { color: var(--muted); margin: 0; font-size: .95rem; } /* Dashboard Stats */ .dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem; margin-bottom: 2.2rem } .dash-stats .stat { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.4rem; transition: .2s ease; position: relative; overflow: hidden; } .dash-stats .stat:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: 0 8px 24px rgba(124, 92, 255, .15) } .dash-stats .stat::after { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle at top right, rgba(124, 92, 255, .1), transparent 70%); pointer-events: none; } .dash-stats .stat-icon { width: 42px; height: 42px; border-radius: 12px; background: rgba(124, 92, 255, .1); color: var(--violet); display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.2rem; } .dash-stats .stat .label { color: var(--muted); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .3rem } .dash-stats .stat .value { font-size: 1.8rem; font-family: var(--font-display); font-weight: 700; color: var(--ink-strong) } /* Quick Actions Grid */ .ud-qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1rem; } .ud-qa-card { display: flex; align-items: flex-start; gap: 1.2rem; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem; text-decoration: none; color: inherit; transition: .2s ease; } .ud-qa-card:hover { border-color: var(--violet); transform: translateY(-3px); box-shadow: var(--shadow-sm); } .qa-icon { width: 54px; height: 54px; border-radius: 16px; background: rgba(124, 92, 255, .1); color: var(--violet); display: grid; place-items: center; flex: none; } .qa-text h4 { margin: 0 0 .2rem; font-size: 1.1rem; } .qa-text p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.4; } /* Orders & Packs */ .order-acts { display: flex; gap: .4rem; flex-wrap: wrap } .ud-packs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .mypack-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.2rem; } .mypack-row .mp-ico { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, #1b1740, #4c3cbe); color: #fff; display: grid; place-items: center; flex: none } .mypack-row h4 { margin: 0; font-size: 1.02rem } .mypack-row .meta { color: var(--muted); font-size: .78rem; margin-bottom: .5rem; } .mypack-row .acts { display: flex; gap: .4rem; grid-column: span 2; } @media(max-width:980px) { .ud-shell { flex-direction: column; } .ud-side { width: 100%; position: static; } .ud-main { padding: 1.5rem; } .ud-qa-grid, .ud-packs-grid { grid-template-columns: 1fr; } .packs-topstats { grid-template-columns: 1fr 1fr } .mypack-row { grid-template-columns: 1fr; text-align: left } } /* ==================================================================== ADMIN — PRODUCT EDIT ENHANCED LAYOUT ==================================================================== */ .admin-edit-header { display: flex; gap: .6rem; align-items: center; margin-bottom: 1.2rem } .product-edit-layout { display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem; align-items: start; } .product-edit-main { display: flex; flex-direction: column; gap: 1.5rem; } .product-edit-side { display: flex; flex-direction: column; gap: 1.5rem; } @media (max-width: 1024px) { .product-edit-layout { grid-template-columns: 1fr; } } .edit-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm) } .edit-card-head { display: flex; align-items: center; gap: .55rem; padding: .95rem 1.4rem; font-weight: 700; font-size: .93rem; border-bottom: 1px solid var(--line); background: var(--surface-alt); color: var(--ink-strong) } .edit-card-sub { font-weight: 400; font-size: .78rem; color: var(--muted); margin-left: .3rem } .edit-card-body { padding: 1.4rem } .field-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem } .field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem } .field-hint { display: block; font-size: .76rem; color: var(--muted); margin-top: .35rem; line-height: 1.5 } .field-hint code { background: var(--chip-bg); padding: .1em .35em; border-radius: 5px; font-size: .82em } .field-hint a { color: var(--violet) } .req { color: var(--danger); margin-left: .15rem } .req-hint { font-weight: 400; font-size: .75rem; color: var(--muted); margin-left: .3rem } .price-preview-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; background: var(--chip-bg); border-radius: 12px; padding: .75rem 1rem; margin-top: .5rem } .ppv-price { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-strong) } .ppv-was { text-decoration: line-through; color: var(--muted); font-size: .92rem } .ppv-badge { background: var(--violet); color: #fff; font-size: .75rem; font-weight: 700; padding: .25em .7em; border-radius: 999px } /* image upload */ .img-upload-area { display: flex; flex-direction: column; gap: .75rem } .img-current { display: flex; align-items: center; gap: 1rem } .img-preview-thumb { width: 90px; height: 72px; object-fit: contain; border-radius: 12px; border: 1px solid var(--line); background: var(--chip-bg); padding: .3rem } .img-current-label { font-size: .78rem; color: var(--muted) } .img-upload-zone { border: 2px dashed var(--line); border-radius: 16px; background: var(--surface-alt); transition: .2s; overflow: hidden } .img-upload-zone.drag-over { border-color: var(--violet); background: rgba(124, 92, 255, .06) } .img-upload-label { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1.8rem 1rem; cursor: pointer; text-align: center; color: var(--muted) } .img-upload-label:hover { color: var(--violet) } .img-upload-label strong { color: var(--ink-strong) } .img-upload-label small { font-size: .76rem } .img-upload-label svg { opacity: .55 } .img-upload-preview { display: none; flex-direction: column; align-items: center; gap: .7rem; padding: 1.2rem } .img-upload-preview img { max-width: 140px; max-height: 110px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line) } .img-clear-btn { background: none; border: 1px solid var(--line); color: var(--danger); padding: .3rem .8rem; border-radius: 8px; font-size: .78rem; cursor: pointer } .img-clear-btn:hover { background: rgba(229, 72, 77, .08) } /* admin FAQ rows */ .admin-faq-rows { display: flex; flex-direction: column; gap: .85rem; margin-bottom: .6rem } .admin-faq-row { display: grid; grid-template-columns: 28px 1fr 30px; gap: .75rem; align-items: start; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px; padding: 1rem } .admin-faq-row-num { width: 26px; height: 26px; background: var(--violet); color: #fff; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .78rem; flex: none; margin-top: .2rem } .admin-faq-row-fields { display: flex; flex-direction: column; gap: .55rem } .admin-faq-row-fields .field { margin: 0 } .admin-faq-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; width: 28px; height: 28px; border-radius: 8px; transition: .15s; margin-top: .2rem } .admin-faq-remove:hover { background: rgba(229, 72, 77, .1); color: var(--danger) } .add-faq-btn { margin-top: .2rem } /* toggle checkboxes */ .toggle-row { display: flex; flex-direction: column; gap: .85rem } .toggle-label { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; cursor: pointer } .toggle-label input[type=checkbox] { margin-top: .2rem; accent-color: var(--violet); width: 18px; height: 18px } .toggle-text strong { display: block; font-size: .93rem; color: var(--ink-strong) } .toggle-text small { color: var(--muted); font-size: .78rem } /* save bar */ .edit-save-bar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; max-width: 860px; margin-top: 1.4rem; padding: 1.2rem 1.4rem; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 18px; backdrop-filter: blur(12px); box-shadow: var(--shadow-sm) } /* ==================================================================== PRODUCT PAGE — KEY FEATURES ==================================================================== */ .pd-features { margin: .8rem 0 1.1rem; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem } .pd-feat-title { display: flex; align-items: center; gap: .4rem; font-size: .86rem; font-weight: 700; color: var(--violet); margin: 0 0 .6rem; text-transform: uppercase; letter-spacing: .5px } .pd-feat-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .8rem } .pd-feat-list li { font-size: .84rem; color: var(--ink); padding-left: 1.2rem; position: relative } .pd-feat-list li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: .8rem } /* ==================================================================== PRODUCT PAGE — FAQ ACCORDION ==================================================================== */ .faq-list { display: flex; flex-direction: column; gap: .65rem; padding: .4rem 0 } .faq-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); transition: border-color .2s } .faq-item:hover { border-color: var(--violet) } .faq-item.open { border-color: var(--violet); box-shadow: 0 4px 18px rgba(124, 92, 255, .12) } .faq-q { width: 100%; background: none; border: none; padding: 1rem 1.3rem; text-align: left; font-weight: 600; font-size: .93rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; color: var(--ink-strong); font-family: var(--font-body); gap: .8rem } .faq-q::after { content: '+'; flex: none; width: 24px; height: 24px; background: var(--chip-bg); border-radius: 50%; display: grid; place-items: center; font-size: 1.1rem; font-weight: 300; transition: transform .25s, background .2s } .faq-item.open .faq-q::after { transform: rotate(45deg); background: var(--violet); color: #fff } .faq-a { max-height: 0; overflow: hidden; transition: max-height .32s cubic-bezier(.4, 0, .2, 1), padding .32s; padding: 0 1.3rem; color: var(--muted); font-size: .88rem; line-height: 1.75 } .faq-item.open .faq-a { max-height: 600px; padding: .2rem 1.3rem 1.1rem } /* responsive */ @media(max-width:640px) { .field-row-2, .field-row-3 { grid-template-columns: 1fr } .edit-save-bar { flex-direction: column; gap: .6rem } .pd-feat-list { grid-template-columns: 1fr } } /* ==================================================================== BLOG — JOURNAL HERO ==================================================================== */ .journal-hero { background: linear-gradient(135deg, var(--navy) 0%, #3d1a78 60%, #1a0d40 100%); padding: 3rem 0 2.5rem; position: relative; overflow: hidden; } .journal-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(124, 92, 255, .3), transparent 60%), radial-gradient(ellipse at 10% 80%, rgba(179, 154, 255, .15), transparent 50%); } .journal-masthead { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; } .jm-vol { font-size: .75rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-bottom: .4rem } .jm-title { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .6rem; color: #fff; font-style: italic } .jm-title em { font-style: normal; background: linear-gradient(100deg, #b39aff, #fff); -webkit-background-clip: text; background-clip: text; color: transparent } .jm-sub { color: rgba(255, 255, 255, .7); font-size: .95rem; margin: 0; max-width: 480px; line-height: 1.6 } .jm-right { display: flex; gap: 1.5rem; flex-shrink: 0 } .jm-stat { display: flex; flex-direction: column; align-items: center; text-align: center } .jm-stat .jn { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: #fff } .jm-stat .jl { font-size: .7rem; text-transform: uppercase; letter-spacing: .8px; color: rgba(255, 255, 255, .5) } /* ==================================================================== BLOG — LISTING PAGE ==================================================================== */ .blog-shell-v2 { padding: 2rem 22px 0; max-width: var(--maxw); margin: 0 auto } /* Lead / featured story */ .lead-story-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); transition: .25s; margin-bottom: 2rem; } .lead-story-v2:hover { transform: translateY(-3px); box-shadow: 0 28px 60px rgba(44, 37, 94, .18) } .ls-img { position: relative; height: 320px; background-size: cover; background-position: center; background-color: linear-gradient(135deg, var(--violet), var(--navy)); } .ls-img-ph { display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, .2) } .ls-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(44, 37, 94, .5), rgba(124, 92, 255, .2)) } .ls-badges { position: absolute; top: 1.2rem; left: 1.2rem; display: flex; gap: .5rem; flex-wrap: wrap; z-index: 1 } .blog-cat-badge { padding: .3em .75em; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .5px } .ls-body { padding: 2rem; display: flex; flex-direction: column; justify-content: center } .ls-kicker { font-size: .72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--violet); margin-bottom: .5rem } .ls-title { font-size: 1.55rem; margin: 0 0 .75rem; line-height: 1.2; color: var(--ink-strong) } .ls-exc { color: var(--muted); font-size: .9rem; line-height: 1.65; margin: 0 0 1rem } .lead-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem } .ls-meta { display: flex; align-items: center; gap: .8rem; margin-top: auto } .ls-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--navy)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none } .ls-author { font-weight: 700; font-size: .88rem; color: var(--ink-strong) } .ls-date { font-size: .78rem; color: var(--muted) } .ls-arrow { margin-left: auto; color: var(--violet); font-weight: 700; font-size: .9rem; white-space: nowrap } /* Toolbar */ .blog-toolbar-v2 { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem } .blog-cats-v2 { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1 } .blog-cat-btn { padding: .45rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1.5px solid var(--line); color: var(--muted); transition: .18s; background: var(--card) } .blog-cat-btn:hover, .blog-cat-btn.on { background: var(--navy); color: #fff; border-color: var(--navy) } [data-theme="dark"] .blog-cat-btn.on { background: var(--violet); border-color: var(--violet) } .blog-search-v2 { display: flex; align-items: center; gap: .5rem; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: .45rem .9rem; min-width: 200px; flex: none } .blog-search-v2 input { border: none; background: none; outline: none; font: inherit; font-size: .88rem; color: var(--ink); width: 180px } .search-clear { color: var(--muted); font-size: .8rem; text-decoration: none } .blog-results-info { font-size: .85rem; color: var(--muted); margin-bottom: 1rem } .blog-results-info a { color: var(--violet) } .blog-section-label { font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: .5rem; margin: 2rem 0 1.2rem } /* Article grid */ .bgrid-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 2.5rem } .bcard-v2 { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: .22s; display: flex; flex-direction: column; } .bcard-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(124, 92, 255, .3) } .bc-img { height: 180px; background-size: cover; background-position: center; background-color: var(--chip-bg); position: relative; display: flex; align-items: flex-end; justify-content: flex-start; } .bc-img-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); opacity: .4 } .bc-cat { position: relative; z-index: 1; margin: .8rem; padding: .25em .7em; border-radius: 999px; font-size: .7rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .4px; align-self: flex-start; } .bc-body { padding: 1.1rem; display: flex; flex-direction: column; flex: 1 } .bc-title { font-size: 1.02rem; margin: 0 0 .5rem; color: var(--ink-strong); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .bc-exc { font-size: .83rem; color: var(--muted); margin: 0 0 .7rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .bc-tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .7rem } .bc-meta { display: flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--muted); margin-top: auto; flex-wrap: wrap } .bc-av { width: 22px; height: 22px; border-radius: 50%; background: var(--violet); color: #fff; display: grid; place-items: center; font-size: .65rem; font-weight: 700; flex: none } .bc-dot { opacity: .4 } /* Tags */ .blog-tag { padding: .18em .6em; background: var(--chip-bg); border-radius: 6px; font-size: .72rem; color: var(--muted); font-weight: 500 } .blog-tag-link { padding: .18em .6em; background: var(--chip-bg); border-radius: 6px; font-size: .82rem; color: var(--violet); font-weight: 500; transition: .15s } .blog-tag-link:hover { background: rgba(124, 92, 255, .12) } /* Pagination */ .blog-pagination { display: flex; justify-content: center; gap: .4rem; margin: 1rem 0 3rem; flex-wrap: wrap } .pg-btn { padding: .5rem 1rem; border-radius: 10px; border: 1.5px solid var(--line); font-size: .85rem; font-weight: 600; color: var(--ink); background: var(--card); transition: .15s } .pg-btn:hover { border-color: var(--violet); color: var(--violet) } .pg-btn.on { background: var(--navy); color: #fff; border-color: var(--navy) } .pg-btn.disabled { opacity: .4; pointer-events: none } /* ==================================================================== BLOG POST — HERO ==================================================================== */ .post-hero-v2 { min-height: 360px; background: linear-gradient(135deg, var(--navy), #2d1060); background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; padding-bottom: 2.5rem; } .post-hero-v2.has-cover { min-height: 440px; } .ph-overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 7, 25, .92) 0%, rgba(10, 7, 25, .55) 55%, rgba(10, 7, 25, .2) 100%) } .ph-inner { position: relative; z-index: 1; max-width: 800px } .ph-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; align-items: center } .ph-cat { padding: .3em .8em; border-radius: 999px; font-size: .72rem; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .5px } .ph-chip { display: flex; align-items: center; gap: .35rem; padding: .3em .7em; border-radius: 999px; background: rgba(255, 255, 255, .1); backdrop-filter: blur(8px); font-size: .78rem; color: rgba(255, 255, 255, .85) } .ph-title { font-size: clamp(1.8rem, 4vw, 2.8rem); color: #fff; margin: 0 0 .7rem; line-height: 1.15 } .ph-exc { color: rgba(255, 255, 255, .75); font-size: 1rem; margin: 0; line-height: 1.65; max-width: 640px } /* Author bar */ .post-author-bar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 0; border-bottom: 1px solid var(--line); margin-bottom: 2rem; } .post-av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--navy)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; flex: none } .post-author-name { font-weight: 700; color: var(--ink-strong); font-size: .95rem } .post-author-meta { font-size: .78rem; color: var(--muted) } .post-share { display: flex; align-items: center; gap: .5rem; margin-left: auto } .share-label { font-size: .78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px } .share-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--chip-bg); color: var(--muted); border: none; cursor: pointer; transition: .18s } .share-btn:hover { background: var(--violet); color: #fff; transform: translateY(-1px) } .share-wa:hover { background: var(--wa) } .share-tw:hover { background: #000 } /* Content layout */ .post-layout-v2 { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: start; margin-bottom: 2rem } /* Sticky TOC */ .toc-v2 { position: sticky; top: 100px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem; box-shadow: var(--shadow-sm); } .toc-head { font-size: .72rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: .8rem } .toc-nav { display: flex; flex-direction: column; gap: .2rem } .toc-link { font-size: .82rem; color: var(--muted); padding: .35rem .65rem; border-radius: 8px; border-left: 3px solid transparent; transition: .18s; display: block; line-height: 1.4 } .toc-link.toc-sub { padding-left: 1.2rem; font-size: .78rem } .toc-link:hover { color: var(--violet); background: var(--chip-bg) } .toc-link.active { color: var(--violet); border-left-color: var(--violet); background: rgba(124, 92, 255, .07); font-weight: 600 } .toc-progress-wrap { height: 3px; background: var(--line); border-radius: 3px; margin-top: 1rem; overflow: hidden } .toc-progress-bar { height: 100%; background: linear-gradient(90deg, var(--violet), var(--grad-2)); width: 0%; transition: width .1s; border-radius: 3px } /* Article prose */ .prose-v2 { min-width: 0; font-size: 1.02rem; line-height: 1.85; color: var(--ink) } .prose-v2 h2 { font-size: 1.7rem; margin: 2.2rem 0 .9rem; color: var(--ink-strong); border-bottom: 3px solid var(--violet); padding-bottom: .4rem; scroll-margin-top: 100px } .prose-v2 h3 { font-size: 1.25rem; color: var(--ink-strong); margin: 1.7rem 0 .6rem; scroll-margin-top: 100px } .prose-v2 h4 { font-size: 1.05rem; color: var(--ink-strong); margin: 1.4rem 0 .5rem } .prose-v2 p { margin: 0 0 1.2rem } .prose-v2 a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px } .prose-v2 a:hover { color: var(--violet-2) } .prose-v2 ul, .prose-v2 ol { padding-left: 1.6rem; margin: 0 0 1.2rem } .prose-v2 li { margin-bottom: .35rem } .prose-v2 blockquote { border-left: 4px solid var(--violet); margin: 1.5rem 0; padding: .9rem 1.3rem; background: rgba(124, 92, 255, .06); border-radius: 0 14px 14px 0; color: var(--ink); font-style: italic; font-size: 1rem } .prose-v2 pre { background: var(--navy); color: #e8e6f0; border-radius: 14px; padding: 1.3rem; font-size: .875rem; overflow-x: auto; margin: 1.3rem 0; line-height: 1.6 } .prose-v2 code:not(pre code) { background: var(--chip-bg); color: var(--violet); padding: .15em .45em; border-radius: 6px; font-size: .87em } .prose-v2 img { border-radius: 16px; margin: 1.4rem 0; max-width: 100% } .prose-v2 table { border-collapse: collapse; width: 100%; margin: 1.3rem 0; font-size: .9rem } .prose-v2 table td, .prose-v2 table th { border: 1px solid var(--line); padding: .7rem 1rem } .prose-v2 table th { background: var(--chip-bg); font-weight: 700; color: var(--ink-strong) } .prose-v2 hr { border: none; border-top: 2px solid var(--line); margin: 2rem 0 } .prose-v2 .callout { border-radius: 14px; padding: 1rem 1.3rem; margin: 1.3rem 0 } .prose-v2 .callout-info { background: rgba(124, 92, 255, .08); border-left: 4px solid var(--violet) } .prose-v2 .callout-warn { background: rgba(245, 158, 11, .08); border-left: 4px solid var(--amber) } .prose-v2 .key-point { background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(179, 154, 255, .12)); border: 1px solid rgba(124, 92, 255, .25); border-radius: 14px; padding: 1.1rem 1.4rem } /* Tags row */ .post-tags-row { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin: 2rem 0 1.5rem; padding: 1.2rem; background: var(--chip-bg); border-radius: 14px } .post-tags-label { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; flex: none } /* In-article CTA */ .post-cta-v2 { display: flex; gap: 1.2rem; align-items: flex-start; background: linear-gradient(135deg, var(--navy), #3d1a78); border-radius: 20px; padding: 1.8rem 2rem; margin: 2.5rem 0 0; color: #fff; } .cta-icon { flex: none; opacity: .7; margin-top: .2rem } .post-cta-v2 h3 { color: #fff; margin: 0 0 .4rem; font-size: 1.25rem } .post-cta-v2 p { color: rgba(255, 255, 255, .8); margin: 0; font-size: .92rem } /* Related articles */ .related-section { margin-top: 3rem } /* ==================================================================== BLOG ADMIN — EDIT LAYOUT (two-column: main + sidebar) ==================================================================== */ .blog-edit-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.4rem; align-items: start; margin-top: 1rem } .blog-edit-main { display: flex; flex-direction: column; gap: 0 } .blog-edit-sidebar { display: flex; flex-direction: column; position: sticky; top: 88px } /* Title input (big, newspaper-style) */ .blog-title-field { margin-bottom: .4rem } .blog-title-input { width: 100%; border: none; border-bottom: 3px solid var(--line); font: 700 2rem var(--font-display); color: var(--ink-strong); padding: .5rem 0; background: transparent; outline: none; transition: border-color .2s; } .blog-title-input:focus { border-bottom-color: var(--violet) } .blog-title-input::placeholder { color: var(--muted); font-weight: 400 } /* Slug row */ .blog-slug-row { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; flex-wrap: wrap } .slug-label { font-size: .8rem; color: var(--muted); white-space: nowrap } .slug-input { flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: .4rem .8rem; font-size: .83rem; background: var(--card); color: var(--ink); min-width: 0 } .slug-input:focus { outline: none; border-color: var(--violet) } /* Char counter */ .char-counter { font-size: .73rem; color: var(--muted); text-align: right; margin-top: .25rem } /* SEO preview */ .seo-preview { background: var(--surface-alt); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.2rem; margin-top: 1rem } .seo-prev-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin-bottom: .5rem } .seo-prev-url { font-size: .78rem; color: var(--green); margin-bottom: .2rem } .seo-prev-title { font-size: 1.05rem; color: #1a0dab; font-weight: 700; line-height: 1.3; margin-bottom: .25rem } [data-theme="dark"] .seo-prev-title { color: #7c9de8 } .seo-prev-desc { font-size: .82rem; color: #545454; line-height: 1.5 } [data-theme="dark"] .seo-prev-desc { color: #9e9e9e } /* Category radio group */ .cat-radio-group { display: flex; flex-direction: column; gap: .4rem } .cat-radio { display: flex; align-items: center; gap: .65rem; padding: .55rem .8rem; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .85rem; transition: .15s; --cc: #7c5cff; } .cat-radio:hover { border-color: var(--cc); color: var(--cc) } .cat-radio.sel { background: var(--cc); border-color: var(--cc); color: #fff; font-weight: 600 } .cat-radio input[type=radio] { display: none } /* Tag chips */ .tag-chips { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .4rem; min-height: 1.5rem } .tag-chip { padding: .15em .55em; background: var(--chip-bg); border-radius: 6px; font-size: .73rem; color: var(--muted) } /* ==================================================================== RESPONSIVE ==================================================================== */ @media(max-width:1100px) { .post-layout-v2 { grid-template-columns: 200px 1fr; gap: 1.5rem } .bgrid-v2 { grid-template-columns: repeat(2, 1fr) } } @media(max-width:860px) { .lead-story-v2 { grid-template-columns: 1fr } .ls-img { height: 200px } .blog-edit-layout { grid-template-columns: 1fr } .blog-edit-sidebar { position: static } } @media(max-width:680px) { .post-layout-v2 { grid-template-columns: 1fr } .toc-v2 { display: none } .bgrid-v2 { grid-template-columns: 1fr } .jm-right { display: none } .post-hero-v2 { min-height: 260px } .ph-title { font-size: 1.6rem } .post-cta-v2 { flex-direction: column } .blog-cats-v2 { gap: .3rem } } /* ==================================================================== PHASE 3 — PACKS HERO ==================================================================== */ .packs-hero { background: linear-gradient(135deg, #15132a 0%, #2b1d5e 55%, #1a0d40 100%); padding: 1.6rem 0 0; position: relative; overflow: hidden; } .packs-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(124, 92, 255, .22), transparent 55%), radial-gradient(ellipse at 10% 80%, rgba(36, 120, 201, .12), transparent 50%); pointer-events: none; } .packs-hero-inner { position: relative; z-index: 1; display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap; padding-bottom: 1.2rem; } .packs-hero-left { flex: 1; min-width: 0 } .packs-hero h1 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: .3rem 0 .4rem; color: #fff; line-height: 1.2; } .packs-hero p { color: rgba(255, 255, 255, .6); font-size: .82rem; margin: 0; line-height: 1.5; max-width: 460px; } .packs-hero-stats { display: flex; gap: 0; flex-wrap: wrap; border-left: 1px solid rgba(255, 255, 255, .12); padding-left: 1.8rem; flex-shrink: 0; } .phs-item { display: flex; flex-direction: column; align-items: center; padding: 0 1.2rem; border-right: 1px solid rgba(255, 255, 255, .12); } .phs-item:last-child { border-right: none } .phs-n { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; line-height: 1 } .phs-l { font-size: .62rem; text-transform: uppercase; letter-spacing: .8px; color: rgba(255, 255, 255, .4); margin-top: .15rem } /* Category chips strip — horizontal scroll row below hero text */ .packs-cat-strip { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .08); padding: .65rem 0; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; } .packs-cat-strip::-webkit-scrollbar { display: none } .packs-cat-icons { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0 } .pci-btn { display: flex; align-items: center; gap: .55rem; padding: .55rem 1rem; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; color: rgba(255, 255, 255, .8); font-size: .82rem; font-weight: 600; transition: .18s; backdrop-filter: blur(8px); --cc: #7c5cff; } .pci-btn:hover { background: rgba(255, 255, 255, .15); color: #fff } .pci-btn.on { background: var(--cc); border-color: var(--cc); color: #fff } /* ==================================================================== PACKS — CARD V2 ==================================================================== */ .pack-card-v2 { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; transition: .22s; display: flex; flex-direction: column; } .pack-card-v2:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(124, 92, 255, .3) } .pack-card-v2.featured { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet) } /* Media area — rounded image */ .pc2-media { position: relative; overflow: hidden; padding: 10px 10px 0; } .pc2-cover { width: 100%; height: 175px; object-fit: cover; display: block; background: var(--chip-bg); transition: transform .35s; border-radius: 14px; } .pack-card-v2:hover .pc2-cover { transform: scale(1.03) } .pc2-ph { display: flex; align-items: center; justify-content: center; height: 175px; border-radius: 14px; overflow: hidden; } /* Gallery strip */ .pc2-gallery-strip { display: flex; gap: 3px; background: rgba(0, 0, 0, .4); padding: 4px 6px; overflow-x: auto; scrollbar-width: none; } .pc2-gallery-strip::-webkit-scrollbar { display: none } .pc2-gallery-thumb { width: 54px; height: 36px; object-fit: cover; border-radius: 5px; flex: none; border: 1.5px solid rgba(255, 255, 255, .15); transition: .15s; cursor: pointer; } .pc2-gallery-thumb:hover { border-color: #fff; transform: scale(1.08) } .pc2-gallery-more { flex: none; width: 44px; height: 36px; border-radius: 5px; background: rgba(255, 255, 255, .12); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; } /* Body */ .pc2-body { padding: 1.1rem; display: flex; flex-direction: column; flex: 1 } .pc2-cat { font-size: .7rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: .4rem; display: flex; align-items: center; gap: .3rem } .pc2-name { font-size: 1.05rem; margin: 0 0 .4rem; color: var(--ink-strong); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .pc2-desc { font-size: .82rem; color: var(--muted); margin: 0 0 .7rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .pc2-stats { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; font-size: .76rem; color: var(--muted); margin-bottom: .8rem } .pc2-rating { display: flex; align-items: center; gap: .25rem } .stars-txt { color: #f59e0b; font-size: .82rem; letter-spacing: -1px } .pc2-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: auto } .pc2-price { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--green) } /* ==================================================================== ADMIN PACK EDIT — CATEGORY TILES ==================================================================== */ .pk-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem } .pk-cat-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .9rem .5rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: .18s; text-align: center; --cc: #7c5cff; } .pk-cat-tile:hover { border-color: var(--cc); background: rgba(124, 92, 255, .04) } .pk-cat-tile.sel { background: var(--cc); border-color: var(--cc); color: #fff } .pk-cat-tile.sel .pk-cat-ico svg { stroke: #fff } .pk-cat-tile input[type=radio] { display: none } .pk-cat-ico { opacity: .75 } .pk-cat-tile.sel .pk-cat-ico { opacity: 1 } .pk-cat-name { font-size: .78rem; font-weight: 600; line-height: 1.2 } /* ==================================================================== ADMIN PACK EDIT — INCLUDED ITEMS EDITOR ==================================================================== */ .inc-item-row { display: grid; grid-template-columns: 20px 1fr 28px; gap: .5rem; align-items: center; background: var(--surface-alt); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; margin-bottom: .4rem; } .inc-check { color: var(--green); font-weight: 700; font-size: .9rem } .inc-item-row input { border: none; background: none; outline: none; font: inherit; font-size: .87rem; color: var(--ink); width: 100% } /* ==================================================================== ADMIN PACK EDIT — GALLERY GRID ==================================================================== */ .gallery-grid { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem } .gallery-thumb { position: relative; width: 90px; height: 66px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line) } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover } .gallery-remove { position: absolute; top: 3px; right: 3px; background: rgba(0, 0, 0, .65); color: #fff; border: none; border-radius: 5px; width: 18px; height: 18px; font-size: .65rem; cursor: pointer; display: grid; place-items: center; } .gallery-remove:hover { background: var(--danger) } .gallery-new-badge { position: absolute; bottom: 3px; left: 3px; background: var(--violet); color: #fff; font-size: .6rem; font-weight: 700; padding: .1em .4em; border-radius: 4px } .gallery-upload-previews { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem } /* rating stars display */ .rating-stars { font-size: 1.2rem; color: #f59e0b; letter-spacing: -1px } /* ==================================================================== RESPONSIVE PACKS ==================================================================== */ @media(max-width:860px) { .packs-hero-inner { flex-direction: column; align-items: flex-start } .packs-cat-icons { flex-direction: row; flex-wrap: wrap } .pk-cat-grid { grid-template-columns: repeat(2, 1fr) } } @media(max-width:600px) { .pk-cat-grid { grid-template-columns: 1fr 1fr } .packs-hero-stats { gap: 1rem } } /* ==================================================================== PHASE 4 — SETTINGS PAGE ==================================================================== */ /* Header row + tab strip */ .settings-header { margin-bottom: 1.4rem } .settings-title { margin: 0 0 1rem; font-size: 1.35rem } .settings-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 2px solid var(--line); padding-bottom: 0 } .stab { display: flex; align-items: center; gap: .4rem; padding: .6rem 1.1rem; font-size: .85rem; font-weight: 600; color: var(--muted); border-radius: 10px 10px 0 0; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: .15s; } .stab:hover { color: var(--ink); background: var(--chip-bg) } .stab.on { color: var(--violet); border-bottom-color: var(--violet); background: var(--card) } .stab-badge { background: var(--violet); color: #fff; font-size: .65rem; font-weight: 700; padding: .1em .45em; border-radius: 10px; margin-left: .2rem } /* Settings form layout */ .settings-form { max-width: 860px } .settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem } .settings-grid-1 { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 1.2rem; max-width: 620px } .settings-save-bar { padding: 1rem 0; border-top: 1px solid var(--line); margin-top: .5rem } /* Social fields */ .social-field { display: flex; align-items: flex-end; gap: .75rem; margin-bottom: .7rem } .social-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-bottom: .9rem } /* SMTP callout */ .callout-info-box { display: flex; gap: .75rem; align-items: flex-start; background: rgba(124, 92, 255, .07); border: 1px solid rgba(124, 92, 255, .2); border-radius: 12px; padding: .9rem 1.1rem; font-size: .86rem; line-height: 1.6; } .callout-info-box code { background: var(--chip-bg); padding: .1em .4em; border-radius: 5px; font-size: .83em; color: var(--violet) } .smtp-status { margin-top: .8rem; font-size: .83rem } .pass-field-wrap { display: flex; gap: .4rem } .pass-field-wrap input { flex: 1 } .pass-toggle { padding: .4rem .8rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--chip-bg); font-size: .8rem; cursor: pointer; white-space: nowrap; color: var(--muted) } .pass-toggle:hover { border-color: var(--violet); color: var(--violet) } /* Legal page tab switcher */ .legal-tabs-inner { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap } .ltab { padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); font-size: .84rem; font-weight: 600; color: var(--muted); background: var(--card); cursor: pointer; transition: .15s; } .ltab:hover { border-color: var(--violet); color: var(--violet) } .ltab.on { background: var(--navy); border-color: var(--navy); color: #fff } [data-theme="dark"] .ltab.on { background: var(--violet); border-color: var(--violet) } .legal-editor { width: 100%; border: none; border-radius: 0 0 12px 12px; background: var(--surface-alt); color: var(--ink); font-family: 'Fira Code', monospace, sans-serif; font-size: .84rem; padding: 1rem; resize: vertical; outline: none; line-height: 1.7; min-height: 360px; } .legal-editor:focus { box-shadow: 0 0 0 2px rgba(124, 92, 255, .25) inset } /* ==================================================================== TESTIMONIALS ADMIN CARDS ==================================================================== */ .test-admin-card { display: flex; gap: .9rem; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; transition: .15s; } .test-admin-card:hover { border-color: rgba(124, 92, 255, .25) } .test-admin-card.dimmed { opacity: .55 } .test-av-wrap { flex: none } .test-av-img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line) } .test-av-ph { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--navy)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1.1rem; } .test-content { flex: 1; min-width: 0 } .test-top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: .25rem } .test-msg { font-size: .83rem; color: var(--muted); margin: .25rem 0 .6rem; line-height: 1.5 } /* ==================================================================== LEGAL PAGE — PUBLIC FRONTEND ==================================================================== */ .legal-hero-inner { max-width: 700px } .legal-hero-inner h1 { margin: 0 0 .4rem } .legal-nav { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: 1rem } .legal-nav a { padding: .4rem 1rem; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .75); font-size: .82rem; font-weight: 600; transition: .15s; } .legal-nav a:hover { background: rgba(255, 255, 255, .12); color: #fff } .legal-nav a.on { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .5) } .legal-wrap { max-width: 760px; margin: 0 auto } .legal-wrap h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; color: var(--ink-strong); display: flex; align-items: center; gap: .5rem; } .legal-wrap p { margin: 0 0 1rem; color: var(--ink); line-height: 1.75 } .legal-wrap ul, .legal-wrap ol { padding-left: 1.5rem; margin: 0 0 1rem } .legal-wrap li { margin-bottom: .35rem; line-height: 1.65 } /* ==================================================================== RESPONSIVE SETTINGS ==================================================================== */ @media(max-width:860px) { .settings-grid { grid-template-columns: 1fr } .settings-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px } .stab { white-space: nowrap } } @media(max-width:600px) { .social-field { flex-direction: column; gap: .3rem } .social-dot { display: none } } /* ==================================================================== PHASE 5 — ADMIN DASHBOARD ==================================================================== */ /* ── KPI Strip ── */ .dash-kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.3rem; } .kpi-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.3rem 1.4rem; display: flex; align-items: flex-start; gap: 1rem; position: relative; overflow: hidden; transition: .2s; } .kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow) } .kpi-card::before { content: ''; position: absolute; top: -30px; right: -20px; width: 100px; height: 100px; border-radius: 50%; opacity: .08; } .kpi-card.accent-violet::before { background: var(--violet) } .kpi-card.accent-green::before { background: var(--green) } .kpi-card.accent-blue::before { background: #2478c9 } .kpi-card.accent-amber::before { background: var(--amber) } .kpi-icon { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--chip-bg); opacity: .85; } .accent-violet .kpi-icon { background: rgba(124, 92, 255, .15); color: var(--violet) } .accent-green .kpi-icon { background: rgba(22, 163, 74, .12); color: var(--green) } .accent-blue .kpi-icon { background: rgba(36, 120, 201, .12); color: #2478c9 } .accent-amber .kpi-icon { background: rgba(245, 158, 11, .12); color: var(--amber) } .kpi-body { flex: 1; min-width: 0 } .kpi-val { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--ink-strong); line-height: 1 } .kpi-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin: .2rem 0 .3rem } .kpi-trend { font-size: .73rem; font-weight: 600; display: flex; align-items: center; gap: .25rem } .kpi-trend.up { color: var(--green) } .kpi-trend.down { color: var(--danger) } .kpi-trend.flat { color: var(--muted) } .kpi-badge { position: absolute; top: .7rem; right: .7rem; background: var(--violet); color: #fff; font-size: .65rem; font-weight: 700; padding: .15em .55em; border-radius: 20px; } .kpi-badge-link { text-decoration: none; cursor: pointer } .kpi-badge-link:hover { background: var(--violet-2, #6b46ef) } /* ── Mini stat row ── */ .dash-mini-row { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.3rem; } .mini-stat { flex: 1; min-width: 100px; display: flex; flex-direction: column; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .8rem .5rem; text-align: center; transition: .15s; position: relative; } .mini-stat:hover { border-color: rgba(124, 92, 255, .35); background: rgba(124, 92, 255, .03) } .mini-icon { color: var(--muted); margin-bottom: .25rem } .mini-n { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-strong) } .mini-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .6px; color: var(--muted) } .mini-badge { position: absolute; top: .4rem; right: .4rem; background: var(--violet); color: #fff; font-size: .58rem; font-weight: 700; padding: .1em .4em; border-radius: 10px; } /* ── Chart row ── */ .dash-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.3rem } .dash-chart-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.3rem; } .chart-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem } .chart-title { font-weight: 700; font-size: .95rem; color: var(--ink-strong) } .chart-sub { font-size: .75rem; color: var(--muted); margin-top: .15rem } /* Bar chart (pure JS render) */ .bar-chart { height: 160px; overflow: hidden } .bc-inner { display: flex; gap: 3px; height: 100%; align-items: flex-end } .bc-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100% } .bc-bar-wrap { flex: 1; display: flex; align-items: flex-end; width: 100%; padding: 0 1px } .bc-bar { width: 100%; border-radius: 5px 5px 0 0; transform: scaleY(0); transform-origin: bottom; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); cursor: pointer; opacity: .85; } .bc-bar:hover { opacity: 1; filter: brightness(1.15) } .bc-label { font-size: .6rem; color: var(--muted); margin-top: 3px; text-align: center; white-space: nowrap; overflow: hidden } .bc-tooltip { position: fixed; display: none; background: var(--navy); color: #fff; font-size: .75rem; font-weight: 600; padding: .3rem .7rem; border-radius: 8px; z-index: 9999; pointer-events: none; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); } /* ── Bottom grid ── */ .dash-bottom-grid { display: grid; grid-template-columns: 1fr 380px; gap: 1.1rem } .dash-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .dash-card-head { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .9rem; color: var(--ink-strong); gap: .5rem; } /* Recent orders list */ .dash-order-list { display: flex; flex-direction: column } .dash-order-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1.3rem; border-bottom: 1px solid var(--line); } .dash-order-row:last-child { border-bottom: none } .do-info { display: flex; flex-direction: column; min-width: 0 } .do-code { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px } .do-name { font-size: .88rem; font-weight: 600; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .do-right { display: flex; align-items: center; gap: .6rem; flex-shrink: 0 } .do-amt { font-weight: 700; font-size: .9rem; color: var(--green) } /* Top products */ .top-products-list { padding: .7rem 1.3rem; display: flex; flex-direction: column; gap: .65rem } .tp-row { display: flex; align-items: center; gap: .75rem } .tp-rank { flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--chip-bg); color: var(--muted); font-size: .72rem; font-weight: 700; display: grid; place-items: center } .tp-info { flex: 1; min-width: 0 } .tp-name { font-size: .83rem; font-weight: 600; color: var(--ink-strong); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .2rem } .tp-bar-wrap { height: 4px; background: var(--line); border-radius: 3px; overflow: hidden } .tp-bar { height: 100%; background: linear-gradient(90deg, var(--violet), var(--grad-2)); border-radius: 3px; transition: width .6s } .tp-stats { flex: none; text-align: right } .tp-orders { display: block; font-size: .72rem; color: var(--muted) } .tp-rev { display: block; font-size: .8rem; font-weight: 700; color: var(--green) } /* Quick actions */ .quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; padding: .8rem 1rem } .qa-btn { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .5rem; border-radius: 14px; border: 1.5px solid var(--line); font-size: .78rem; font-weight: 600; color: var(--muted); text-align: center; transition: .18s; } .qa-btn:hover { border-color: var(--violet); color: var(--violet); background: rgba(124, 92, 255, .05) } .qa-btn.qa-alert { border-color: var(--amber); color: var(--amber) } .qa-btn.qa-alert:hover { background: rgba(245, 158, 11, .07) } /* Order status summary */ .status-summary { padding: .9rem 1.3rem; display: flex; flex-direction: column; gap: .6rem } .ss-row { display: flex; align-items: center; gap: .6rem; font-size: .82rem } .ss-dot { width: 9px; height: 9px; border-radius: 50%; flex: none } .ss-label { width: 80px; color: var(--ink); text-transform: capitalize; font-weight: 500 } .ss-bar-wrap { flex: 1; height: 6px; background: var(--line); border-radius: 4px; overflow: hidden } .ss-bar { height: 100%; border-radius: 4px; transition: width .6s } .ss-cnt { width: 28px; text-align: right; font-weight: 700; color: var(--ink-strong); font-size: .8rem } .ss-pct { width: 36px; text-align: right; color: var(--muted); font-size: .75rem } /* ── Nav badges ── */ .nav-badge { background: var(--danger); color: #fff; font-size: .6rem; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; padding: 0 .3em; display: inline-flex; align-items: center; justify-content: center; margin-left: auto; } /* ==================================================================== RESPONSIVE DASHBOARD ==================================================================== */ @media(max-width:1200px) { .dash-kpi-strip { grid-template-columns: repeat(2, 1fr) } } @media(max-width:900px) { .dash-charts-row { grid-template-columns: 1fr } .dash-bottom-grid { grid-template-columns: 1fr } } @media(max-width:600px) { .dash-kpi-strip { grid-template-columns: 1fr 1fr } .dash-mini-row { display: grid; grid-template-columns: repeat(3, 1fr) } .quick-actions { grid-template-columns: repeat(2, 1fr) } .kpi-val { font-size: 1.4rem } } /* ==================================================================== POPUP SYSTEM — Professional Theme-Matched CSS v2 Colors: violet #7c5cff · navy #2c255e · dark bg #0c0b18 All 10 templates + animations + admin editor ==================================================================== */ /* ── Overlay ── */ .popup-overlay { position: fixed; inset: 0; z-index: 8000; background: rgba(8, 6, 24, .72); backdrop-filter: blur(6px) saturate(1.4); -webkit-backdrop-filter: blur(6px) saturate(1.4); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .popup-overlay.popup-overlay-in { opacity: 1; pointer-events: all } /* ── Entry shell ── */ .popup-entry { position: fixed; inset: 0; z-index: 8001; pointer-events: none } /* ── Close button ── */ .popup-close { position: absolute; top: .9rem; right: .9rem; z-index: 20; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .18); cursor: pointer; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); display: grid; place-items: center; transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background .18s; backdrop-filter: blur(4px); } .popup-close:hover { background: rgba(255, 255, 255, .22); transform: rotate(90deg) scale(1.1); color: #fff; } /* Light-mode close adjustments for light-bg popups */ .popup-tpl-announcement .popup-close, .popup-tpl-cookie-bar .popup-close, .popup-tpl-social-proof .popup-close { background: rgba(44, 37, 94, .09); border-color: rgba(44, 37, 94, .14); color: var(--muted); } .popup-tpl-announcement .popup-close:hover, .popup-tpl-cookie-bar .popup-close:hover, .popup-tpl-social-proof .popup-close:hover { background: rgba(44, 37, 94, .16); color: var(--ink-strong); } [data-theme="dark"] .popup-tpl-announcement .popup-close, [data-theme="dark"] .popup-tpl-cookie-bar .popup-close, [data-theme="dark"] .popup-tpl-social-proof .popup-close { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .15); color: var(--muted); } /* ── BOX base ── */ .popup-box { position: fixed; z-index: 8002; pointer-events: all; overflow: hidden; } /* ── POSITIONS ── */ .popup-pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-pos-bottom-right { bottom: 1.6rem; right: 1.6rem; } .popup-pos-top-bar { top: 0; left: 0; right: 0; } .popup-pos-bottom-bar { bottom: 0; left: 0; right: 0; } /* ── SIZES ── */ .popup-pos-center.popup-size-sm { width: min(420px, 94vw) } .popup-pos-center.popup-size-md { width: min(580px, 94vw) } .popup-pos-center.popup-size-lg { width: min(760px, 96vw) } .popup-pos-center.popup-size-fullscreen { width: 100vw; height: 100dvh; top: 0; left: 0; transform: none; border-radius: 0; } .popup-pos-bottom-right.popup-size-sm { width: min(360px, 94vw) } .popup-pos-bottom-right.popup-size-md { width: min(440px, 94vw) } /* ══════════════════════════════ ANIMATIONS ══════════════════════════════ */ /* fade */ .popup-anim-fade { opacity: 0; transition: opacity .38s ease; } .popup-anim-fade.popup-box-in { opacity: 1 } /* slide-up (center) */ .popup-pos-center.popup-anim-slide-up { opacity: 0; transform: translate(-50%, -42%); transition: opacity .38s ease, transform .42s cubic-bezier(.22, 1, .36, 1); } .popup-pos-center.popup-anim-slide-up.popup-box-in { opacity: 1; transform: translate(-50%, -50%); } /* slide-up (bars / corner) */ .popup-pos-top-bar.popup-anim-slide-up, .popup-pos-bottom-right.popup-anim-slide-up, .popup-pos-bottom-bar.popup-anim-slide-up { opacity: 0; transform: translateY(24px); transition: opacity .35s ease, transform .38s cubic-bezier(.22, 1, .36, 1); } .popup-pos-top-bar.popup-anim-slide-up { transform: translateY(-24px) } .popup-pos-top-bar.popup-anim-slide-up.popup-box-in, .popup-pos-bottom-right.popup-anim-slide-up.popup-box-in, .popup-pos-bottom-bar.popup-anim-slide-up.popup-box-in { opacity: 1; transform: translateY(0); } /* zoom (center) */ .popup-pos-center.popup-anim-zoom { opacity: 0; transform: translate(-50%, -50%) scale(.82); transition: opacity .32s ease, transform .38s cubic-bezier(.34, 1.42, .64, 1); } .popup-pos-center.popup-anim-zoom.popup-box-in { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* zoom (bars / corner) */ .popup-pos-top-bar.popup-anim-zoom, .popup-pos-bottom-right.popup-anim-zoom, .popup-pos-bottom-bar.popup-anim-zoom { opacity: 0; transform: scale(.88); transition: opacity .32s ease, transform .38s cubic-bezier(.34, 1.42, .64, 1); } .popup-pos-top-bar.popup-anim-zoom.popup-box-in, .popup-pos-bottom-right.popup-anim-zoom.popup-box-in, .popup-pos-bottom-bar.popup-anim-zoom.popup-box-in { opacity: 1; transform: scale(1); } /* flip (center only) */ .popup-pos-center.popup-anim-flip { opacity: 0; transform: translate(-50%, -50%) perspective(700px) rotateX(20deg); transition: opacity .38s, transform .42s cubic-bezier(.22, 1, .36, 1); } .popup-pos-center.popup-anim-flip.popup-box-in { opacity: 1; transform: translate(-50%, -50%) perspective(700px) rotateX(0deg); } /* bounce (center) */ .popup-pos-center.popup-anim-bounce { opacity: 0; transform: translate(-50%, -50%) scale(.5); transition: opacity .26s, transform .6s cubic-bezier(.34, 1.72, .64, 1); } .popup-pos-center.popup-anim-bounce.popup-box-in { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* ══════════════════════════════ SHARED CONTENT HELPERS ══════════════════════════════ */ .popup-img-strip { width: 100%; height: 210px; overflow: hidden; flex: none; } .popup-img-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .popup-box:hover .popup-img-strip img { transform: scale(1.04) } .popup-body-wrap { padding: 2rem 2.2rem 2rem } @media(max-width:500px) { .popup-body-wrap { padding: 1.5rem 1.4rem } } .popup-tag { display: inline-block; font-size: .65rem; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; padding: .25em .75em; border-radius: 20px; margin-bottom: .8rem; background: rgba(124, 92, 255, .15); color: var(--violet); border: 1px solid rgba(124, 92, 255, .25); } .popup-title { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.2; color: var(--ink-strong); margin: 0 0 .65rem; } .popup-body-text { font-size: .92rem; color: var(--muted); line-height: 1.75; margin: 0 0 1.3rem; } .popup-body-text strong { color: var(--ink-strong); font-weight: 700 } .popup-actions { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center } .popup-actions-center { justify-content: center } .popup-dismiss { background: none; border: none; padding: .3rem; font-size: .8rem; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; transition: .15s; } .popup-dismiss:hover { color: var(--ink-strong) } /* ══════════════════════════════════════════ TEMPLATE 1 — promo-banner (top bar) Animated gradient, compact, attention-grabbing ══════════════════════════════════════════ */ .popup-tpl-promo-banner { background: linear-gradient(270deg, #7c5cff, #3a0ca3, #7c5cff); background-size: 400% 100%; animation: pgAnim 6s ease infinite; border: none; border-radius: 0; } @keyframes pgAnim { 0%, 100% { background-position: 0% 50% } 50% { background-position: 100% 50% } } .popup-tpl-promo-banner .popup-close { top: 50%; transform: translateY(-50%); right: 1rem; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); color: #fff; } .popup-tpl-promo-banner .popup-close:hover { transform: translateY(-50%) rotate(90deg) } .pb-inner { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 3.5rem .7rem 1.5rem; flex-wrap: wrap; } .pb-left { display: flex; align-items: center; gap: .8rem; flex: 1; flex-wrap: wrap } .pb-emoji { font-size: 1.4rem; flex: none } .pb-texts { display: flex; flex-direction: column } .pb-headline { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: #fff; letter-spacing: -.2px; } .pb-sub { font-size: .78rem; color: rgba(255, 255, 255, .8) } .pb-code { display: inline-block; background: rgba(255, 255, 255, .2); border: 1.5px dashed rgba(255, 255, 255, .5); color: #fff; font-weight: 800; font-size: .8rem; font-family: monospace; padding: .2em .6em; border-radius: 6px; letter-spacing: 1px; } .pb-actions { display: flex; gap: .5rem; flex-shrink: 0 } /* ══════════════════════════════════════════ TEMPLATE 2 — announcement (glassmorphism card) ══════════════════════════════════════════ */ .popup-tpl-announcement { border-radius: 28px; background: var(--glass-strong); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--glass-border); box-shadow: 0 0 0 1px rgba(124, 92, 255, .12), 0 40px 100px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5); } [data-theme="dark"] .popup-tpl-announcement { background: rgba(21, 19, 42, .88); border-color: rgba(255, 255, 255, .1); box-shadow: 0 40px 100px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .07); } /* Accent glow top border */ .popup-tpl-announcement::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 2px; border-radius: 0 0 20px 20px; background: linear-gradient(90deg, transparent, var(--violet), var(--grad-2), transparent); opacity: .8; } .popup-tpl-announcement .popup-title { color: var(--ink-strong) } .popup-tpl-announcement .popup-img-strip { border-radius: 18px 18px 0 0 } /* ══════════════════════════════════════════ TEMPLATE 3 — newsletter (split layout) ══════════════════════════════════════════ */ .popup-tpl-newsletter { border-radius: 28px; background: var(--glass-strong); backdrop-filter: blur(28px); border: 1px solid var(--glass-border); box-shadow: 0 40px 100px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5); } [data-theme="dark"] .popup-tpl-newsletter { background: rgba(21, 19, 42, .88); border-color: rgba(255, 255, 255, .1); } .nl-wrap { display: grid; grid-template-columns: 180px 1fr } .nl-side { background: linear-gradient(170deg, var(--violet) 0%, var(--navy) 70%, #0c0b18 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.2rem 1.2rem; gap: 1rem; border-radius: 28px 0 0 28px; position: relative; overflow: hidden; } .nl-side::after { content: ''; position: absolute; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, .06); bottom: -30px; right: -30px; } .nl-icon-big { font-size: 3rem; filter: drop-shadow(0 4px 16px rgba(124, 92, 255, .6)) } .nl-side-title { font-family: var(--font-display); font-weight: 800; font-size: .9rem; color: #fff; text-align: center; line-height: 1.3; } .nl-right { padding: 2.2rem 2rem; display: flex; flex-direction: column; justify-content: center } .nl-right .popup-title { font-size: 1.3rem } .nl-btn-wrap { display: flex; flex-direction: column; gap: .5rem } /* ══════════════════════════════════════════ TEMPLATE 4 — exit-intent (urgent dark) ══════════════════════════════════════════ */ .popup-tpl-exit-intent { border-radius: 28px; background: linear-gradient(145deg, #0c0b18 0%, #1a0e40 60%, #2b1060 100%); border: 1px solid rgba(124, 92, 255, .25); box-shadow: 0 40px 100px rgba(0, 0, 0, .7), 0 0 60px rgba(124, 92, 255, .12); } .popup-tpl-exit-intent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 28px 28px 0 0; background: linear-gradient(90deg, #ff4d00, #ff6b6b, var(--violet), #ff6b6b, #ff4d00); background-size: 300% 100%; animation: urgentLine 3s linear infinite; } @keyframes urgentLine { 0% { background-position: 0% } 100% { background-position: 300% } } .popup-tpl-exit-intent .popup-close { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7) } .popup-tpl-exit-intent .popup-title { color: #fff; font-size: 1.6rem } .popup-tpl-exit-intent .popup-tag { background: rgba(239, 68, 68, .15); color: #f87171; border-color: rgba(239, 68, 68, .3) } .popup-tpl-exit-intent .popup-body-text { color: rgba(255, 255, 255, .7) } .popup-tpl-exit-intent .popup-dismiss { color: rgba(255, 255, 255, .38) } .popup-tpl-exit-intent .popup-dismiss:hover { color: rgba(255, 255, 255, .7) } .ei-glow { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 255, .25), transparent 70%); top: -80px; right: -60px; pointer-events: none; } /* ══════════════════════════════════════════ TEMPLATE 5 — welcome-hero (fullscreen) ══════════════════════════════════════════ */ .popup-tpl-welcome-hero { background: radial-gradient(60% 50% at 20% 30%, rgba(124, 92, 255, .35), transparent 60%), radial-gradient(50% 50% at 80% 70%, rgba(44, 37, 94, .8), transparent 60%), linear-gradient(145deg, #0c0b18 0%, #15132a 100%); display: flex; align-items: center; justify-content: center; } .popup-tpl-welcome-hero .popup-close { top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; background: rgba(255, 255, 255, .12); } .wh-wrap { text-align: center; max-width: 640px; padding: 3rem 2rem; margin: 0 auto; position: relative; z-index: 1; } .wh-logo { width: 80px; height: 80px; object-fit: contain; border-radius: 20px; margin: 0 auto 1.8rem; box-shadow: 0 0 40px rgba(124, 92, 255, .5); } .wh-badge { display: inline-block; background: rgba(124, 92, 255, .2); border: 1px solid rgba(124, 92, 255, .4); color: var(--grad-2); font-size: .7rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: .3em 1em; border-radius: 20px; margin-bottom: 1.2rem; } .wh-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 5vw, 3.2rem); color: #fff; margin: 0 0 1rem; line-height: 1.1; background: linear-gradient(135deg, #fff 30%, var(--grad-2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .wh-body { color: rgba(255, 255, 255, .65); font-size: 1rem; line-height: 1.8; margin: 0 0 2rem; } .wh-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap } /* ══════════════════════════════════════════ TEMPLATE 6 — product-spot (2-col) ══════════════════════════════════════════ */ .popup-tpl-product-spot { border-radius: 28px; background: var(--glass-strong); backdrop-filter: blur(28px); border: 1px solid var(--glass-border); box-shadow: 0 40px 100px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5); } [data-theme="dark"] .popup-tpl-product-spot { background: rgba(21, 19, 42, .9); border-color: rgba(255, 255, 255, .1); box-shadow: 0 40px 100px rgba(0, 0, 0, .6); } .ps-wrap { display: grid; grid-template-columns: 220px 1fr } .ps-img-col { background: linear-gradient(145deg, rgba(124, 92, 255, .08), rgba(44, 37, 94, .12)); overflow: hidden; border-radius: 28px 0 0 28px; display: flex; align-items: center; justify-content: center; } .ps-img-col img { width: 100%; height: 100%; object-fit: cover } .ps-img-col .ps-placeholder { font-size: 5rem; opacity: .4; } .ps-right { padding: 2.2rem 2rem; display: flex; flex-direction: column; justify-content: center } .ps-price { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; color: var(--violet); margin: .5rem 0 1rem; } .ps-price-old { font-size: .9rem; color: var(--muted); text-decoration: line-through; margin-left: .4rem; font-weight: 400; } .ps-features { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.2rem; } .ps-feat { display: flex; align-items: center; gap: .5rem; font-size: .83rem; color: var(--muted) } .ps-feat::before { content: '✓'; color: var(--green); font-weight: 800; font-size: .85rem } /* ══════════════════════════════════════════ TEMPLATE 7 — cookie-bar (bottom bar) ══════════════════════════════════════════ */ .popup-tpl-cookie-bar { background: var(--glass-strong); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); border-top: 1px solid var(--glass-border); border-radius: 0; box-shadow: 0 -8px 32px rgba(0, 0, 0, .12); } [data-theme="dark"] .popup-tpl-cookie-bar { background: rgba(21, 19, 42, .92); border-top-color: rgba(255, 255, 255, .1); box-shadow: 0 -8px 40px rgba(0, 0, 0, .5); } .cb-wrap { display: flex; align-items: center; gap: 1.2rem; padding: .9rem 3.5rem .9rem 1.5rem; flex-wrap: wrap; } .cb-icon { font-size: 1.6rem; flex: none } .cb-text-wrap { flex: 1; min-width: 0 } .cb-headline { font-weight: 700; font-size: .88rem; color: var(--ink-strong) } .cb-sub { font-size: .78rem; color: var(--muted); margin-top: .1rem } .cb-sub a { color: var(--violet); text-decoration: underline } .cb-actions { display: flex; gap: .5rem; flex-shrink: 0 } /* ══════════════════════════════════════════ TEMPLATE 8 — video-promo (lightbox) ══════════════════════════════════════════ */ .popup-tpl-video-promo { border-radius: 24px; background: #050410; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 50px 120px rgba(0, 0, 0, .8); } .popup-tpl-video-promo .popup-close { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .25) } .vp-header { padding: 1.5rem 1.8rem .8rem } .vp-header .popup-title { color: #fff; margin: 0 } .vp-sub { font-size: .83rem; color: rgba(255, 255, 255, .5); margin: .3rem 0 0 } .vp-player { position: relative; padding-top: 56.25%; background: #000; margin: 0 1.8rem 1.5rem; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px rgba(124, 92, 255, .3); } .vp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none } /* ══════════════════════════════════════════ TEMPLATE 9 — countdown-deal (timer card) ══════════════════════════════════════════ */ .popup-tpl-countdown-deal { border-radius: 28px; background: var(--glass-strong); backdrop-filter: blur(28px); border: 1px solid var(--glass-border); box-shadow: 0 40px 100px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .5); } [data-theme="dark"] .popup-tpl-countdown-deal { background: rgba(21, 19, 42, .9); border-color: rgba(255, 255, 255, .1); } .cd-header { background: linear-gradient(135deg, var(--violet) 0%, var(--navy) 100%); padding: 1.8rem 2rem; position: relative; overflow: hidden; } .cd-header::after { content: ''; position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, .06); right: -50px; top: -50px; } .cd-label-top { font-size: .68rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255, 255, 255, .65); margin-bottom: .8rem; text-align: center; } .cd-timer { display: flex; align-items: center; justify-content: center; gap: .6rem; position: relative; z-index: 1; } .cd-unit { display: flex; flex-direction: column; align-items: center; gap: .2rem } .cd-digits { font-family: var(--font-display); font-weight: 900; font-size: 2.8rem; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; padding: .15em .4em; min-width: 2ch; text-align: center; text-shadow: 0 2px 12px rgba(124, 92, 255, .5); display: block; } .cd-unit-label { font-size: .58rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255, 255, 255, .55) } .cd-colon { font-size: 2.2rem; font-weight: 900; color: rgba(255, 255, 255, .5); padding-bottom: .8rem } .cd-body { padding: 1.8rem 2.2rem } /* ══════════════════════════════════════════ TEMPLATE 10 — social-proof (corner toast) ══════════════════════════════════════════ */ .popup-tpl-social-proof { border-radius: 20px; background: var(--glass-strong); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid var(--glass-border); box-shadow: 0 24px 60px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .6); width: min(360px, 94vw); } [data-theme="dark"] .popup-tpl-social-proof { background: rgba(21, 19, 42, .92); border-color: rgba(255, 255, 255, .1); box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); } .sp-wrap { display: flex; gap: 1rem; align-items: flex-start; padding: 1.3rem 1.5rem } .sp-avatar { flex: none; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, var(--violet), var(--navy)); border: 2.5px solid rgba(124, 92, 255, .3); display: grid; place-items: center; font-size: 1.3rem; } .sp-avatar img { width: 100%; height: 100%; object-fit: cover } .sp-content { flex: 1; min-width: 0 } .sp-stars { color: #f59e0b; font-size: .95rem; letter-spacing: -1.5px; margin-bottom: .3rem } .sp-name { font-weight: 700; font-size: .82rem; color: var(--ink-strong); margin-bottom: .2rem } .sp-quote { font-size: .8rem; color: var(--muted); font-style: italic; line-height: 1.6; margin: 0 0 .75rem; } .sp-meta { font-size: .7rem; color: var(--muted); margin-bottom: .5rem } .sp-count { color: var(--green); font-weight: 700 } /* ══════════════════════════════════════════ ADMIN POPUP EDITOR STYLES ══════════════════════════════════════════ */ .popup-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; align-items: start } /* Template picker */ .popup-tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem } .popup-tpl-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .9rem 1rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .18s, background .18s, box-shadow .18s; user-select: none; } .popup-tpl-tile:hover { border-color: rgba(124, 92, 255, .5); background: rgba(124, 92, 255, .04); } .popup-tpl-tile.sel { border-color: var(--violet); background: rgba(124, 92, 255, .07); box-shadow: 0 0 0 4px rgba(124, 92, 255, .1); } .popup-tpl-tile.sel::after { content: '✓'; position: absolute; top: .5rem; right: .6rem; font-size: .7rem; font-weight: 800; color: var(--violet); } .popup-tpl-tile input { display: none } .ptl-ico { font-size: 1.5rem; line-height: 1; margin-bottom: .1rem } .ptl-name { font-weight: 700; font-size: .82rem; color: var(--ink-strong) } .ptl-desc { font-size: .7rem; color: var(--muted); line-height: 1.4 } /* Trigger tiles */ .trigger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem } .trigger-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .5rem; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; font-size: .73rem; font-weight: 600; color: var(--muted); text-align: center; transition: .18s; user-select: none; } .trigger-tile:hover { border-color: rgba(124, 92, 255, .4); color: var(--violet) } .trigger-tile.sel { border-color: var(--violet); background: rgba(124, 92, 255, .08); color: var(--violet) } .trigger-tile input { display: none } /* Animation tiles */ .anim-grid { display: flex; gap: .4rem; flex-wrap: wrap } .anim-tile { padding: .38rem .9rem; border: 2px solid var(--line); border-radius: 20px; cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--muted); transition: .15s; user-select: none; } .anim-tile:hover { border-color: rgba(124, 92, 255, .4); color: var(--violet) } .anim-tile.sel { border-color: var(--violet); background: var(--violet); color: #fff } .anim-tile input { display: none } /* Status badge */ .status-toggle { padding: .2em .75em; border-radius: 20px; font-size: .72rem; font-weight: 700; cursor: pointer; border: none; } .status-toggle.active { background: rgba(22, 163, 74, .12); color: var(--green) } .status-toggle.blocked { background: rgba(229, 72, 77, .1); color: var(--danger) } /* Misc */ .edit-card-sub-head { font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin: .9rem 0 .5rem; padding-top: .75rem; border-top: 1px solid var(--line); } .field-row-3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: .7rem } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media(max-width:860px) { .popup-edit-grid { grid-template-columns: 1fr } .popup-tpl-grid { grid-template-columns: repeat(2, 1fr) } .nl-wrap, .ps-wrap { grid-template-columns: 1fr } .nl-side { border-radius: 28px 28px 0 0; flex-direction: row; padding: 1.3rem 1.5rem } .ps-img-col { height: 180px; border-radius: 28px 28px 0 0 } .trigger-grid { grid-template-columns: repeat(2, 1fr) } .field-row-3 { grid-template-columns: 1fr 1fr } } @media(max-width:560px) { .popup-pos-center.popup-size-md, .popup-pos-center.popup-size-lg { width: 97vw } .popup-body-wrap { padding: 1.4rem 1.3rem } .popup-tpl-grid { grid-template-columns: 1fr 1fr } .wh-title { font-size: 1.7rem } .cd-digits { font-size: 2rem; border-radius: 10px } .pb-inner { flex-direction: column; align-items: flex-start; gap: .7rem } .ps-wrap { grid-template-columns: 1fr } } /* ── Overlay ── */ .popup-overlay { position: fixed; inset: 0; z-index: 8000; background: rgba(0, 0, 0, .55); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .popup-overlay.popup-overlay-in { opacity: 1; pointer-events: all } /* ── Entry wrapper ── */ .popup-entry { position: fixed; inset: 0; z-index: 8001; pointer-events: none } .popup-entry[style*="display:block"] .popup-overlay, .popup-entry[style*="display: block"] .popup-overlay { pointer-events: all } /* ── Close button ── */ .popup-close { position: absolute; top: .75rem; right: .75rem; z-index: 10; width: 32px; height: 32px; border-radius: 50%; border: none; cursor: pointer; background: rgba(0, 0, 0, .12); color: inherit; display: grid; place-items: center; transition: .15s; } .popup-close:hover { background: rgba(0, 0, 0, .28); transform: rotate(90deg) } [data-theme="dark"] .popup-close { background: rgba(255, 255, 255, .12) } [data-theme="dark"] .popup-close:hover { background: rgba(255, 255, 255, .22) } /* ── BOX — base ── */ .popup-box { position: fixed; z-index: 8002; pointer-events: all; background: var(--popup-bg, var(--card)); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 32px 80px rgba(0, 0, 0, .35); overflow: hidden; } /* ── POSITIONS ── */ .popup-pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-pos-bottom-right { bottom: 1.5rem; right: 1.5rem; border-radius: 20px; } .popup-pos-top-bar { top: 0; left: 0; right: 0; border-radius: 0; border-top: none; border-left: none; border-right: none; } .popup-pos-bottom-bar { bottom: 0; left: 0; right: 0; border-radius: 0; border-bottom: none; border-left: none; border-right: none; } /* ── SIZES ── */ .popup-pos-center.popup-size-sm { width: min(400px, 95vw) } .popup-pos-center.popup-size-md { width: min(560px, 95vw) } .popup-pos-center.popup-size-lg { width: min(740px, 96vw) } .popup-pos-center.popup-size-fullscreen { width: 100vw; height: 100dvh; border-radius: 0; top: 0; left: 0; transform: none; } .popup-pos-bottom-right.popup-size-sm { width: min(360px, 95vw) } .popup-pos-bottom-right.popup-size-md { width: min(440px, 95vw) } /* ── ANIMATIONS ── */ /* fade */ .popup-anim-fade { opacity: 0; transition: opacity .35s ease } .popup-anim-fade.popup-box-in { opacity: 1 } /* slide-up */ .popup-anim-slide-up { opacity: 0; transform: translate(-50%, -40%) !important; transition: opacity .35s ease, transform .35s ease } .popup-pos-bottom-right.popup-anim-slide-up, .popup-pos-top-bar.popup-anim-slide-up, .popup-pos-bottom-bar.popup-anim-slide-up { transform: translateY(30px) !important } .popup-anim-slide-up.popup-box-in { opacity: 1; transform: translate(-50%, -50%) !important } .popup-pos-bottom-right.popup-anim-slide-up.popup-box-in, .popup-pos-top-bar.popup-anim-slide-up.popup-box-in, .popup-pos-bottom-bar.popup-anim-slide-up.popup-box-in { transform: translateY(0) !important } /* zoom */ .popup-anim-zoom { opacity: 0; transform: translate(-50%, -50%) scale(.82) !important; transition: opacity .32s ease, transform .32s cubic-bezier(.34, 1.4, .64, 1) } .popup-pos-bottom-right.popup-anim-zoom, .popup-pos-top-bar.popup-anim-zoom, .popup-pos-bottom-bar.popup-anim-zoom { transform: scale(.88) !important } .popup-anim-zoom.popup-box-in { opacity: 1; transform: translate(-50%, -50%) scale(1) !important } .popup-pos-bottom-right.popup-anim-zoom.popup-box-in, .popup-pos-top-bar.popup-anim-zoom.popup-box-in, .popup-pos-bottom-bar.popup-anim-zoom.popup-box-in { transform: scale(1) !important } /* flip */ .popup-anim-flip { opacity: 0; transform: translate(-50%, -50%) perspective(600px) rotateX(22deg) !important; transition: opacity .38s, transform .38s ease } .popup-anim-flip.popup-box-in { opacity: 1; transform: translate(-50%, -50%) perspective(600px) rotateX(0) !important } /* bounce */ .popup-anim-bounce { opacity: 0; transform: translate(-50%, -50%) scale(.6) !important; transition: opacity .28s, transform .55s cubic-bezier(.34, 1.7, .64, 1) } .popup-anim-bounce.popup-box-in { opacity: 1; transform: translate(-50%, -50%) scale(1) !important } /* bar/corner animations — don't need translate tricks */ .popup-pos-top-bar.popup-anim-zoom, .popup-pos-bottom-bar.popup-anim-zoom, .popup-pos-bottom-right.popup-anim-zoom, .popup-pos-top-bar.popup-anim-flip, .popup-pos-bottom-bar.popup-anim-flip { transform: none !important; transition: opacity .32s, transform .32s; } .popup-pos-top-bar.popup-anim-zoom.popup-box-in, .popup-pos-bottom-bar.popup-anim-zoom.popup-box-in, .popup-pos-bottom-right.popup-anim-zoom.popup-box-in, .popup-pos-top-bar.popup-anim-flip.popup-box-in, .popup-pos-bottom-bar.popup-anim-flip.popup-box-in { opacity: 1; transform: none !important; } /* ── SHARED CONTENT HELPERS ── */ .popup-img-wrap { width: 100%; max-height: 220px; overflow: hidden } .popup-img-wrap img { width: 100%; height: 220px; object-fit: cover; display: block } .popup-body-wrap { padding: 1.6rem 1.8rem } .popup-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-strong); margin: 0 0 .6rem; line-height: 1.2 } .popup-body { font-size: .9rem; color: var(--muted); line-height: 1.7; margin: 0 0 1.1rem } .popup-body strong { color: var(--ink-strong) } .popup-btns { display: flex; gap: .6rem; flex-wrap: wrap } .popup-btns-centered { justify-content: center } .popup-dismiss-link { background: none; border: none; color: var(--muted); font-size: .82rem; cursor: pointer; text-decoration: underline; padding: .3rem 0; margin-top: .3rem } /* ════════════════════════════════════════ TEMPLATE 1: promo-banner (top bar) ════════════════════════════════════════ */ .popup-tpl-promo-banner { background: linear-gradient(90deg, #ff4d00, #ff8c00, #ff4d00); background-size: 200% 100%; animation: pbGrad 4s linear infinite; color: #fff; padding: .6rem 3rem .6rem 1.2rem; border: none; } @keyframes pbGrad { 0% { background-position: 0% } 100% { background-position: 200% } } .popup-tpl-promo-banner .popup-close { background: rgba(255, 255, 255, .25); color: #fff } .pb-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap } .pb-text { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; flex: 1 } .pb-text strong { color: #fff; font-size: .95rem } .pb-body { font-size: .85rem; opacity: .92 } .pb-actions { display: flex; gap: .5rem; flex-shrink: 0 } /* ════════════════════════════════════════ TEMPLATE 2: announcement (glassmorphism) ════════════════════════════════════════ */ .popup-tpl-announcement { background: var(--popup-bg, var(--glass-strong)); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); } .popup-tpl-announcement .popup-body-wrap { padding: 2rem } .popup-tpl-announcement .popup-title { font-size: 1.4rem } /* ════════════════════════════════════════ TEMPLATE 3: newsletter (split) ════════════════════════════════════════ */ .popup-tpl-newsletter { overflow: hidden } .nl-layout { display: grid; grid-template-columns: 160px 1fr } .nl-side { background: linear-gradient(160deg, var(--violet), var(--navy)); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; gap: .8rem; } .nl-icon { font-size: 3rem } .nl-content { padding: 2rem 1.8rem; display: flex; flex-direction: column; justify-content: center } .nl-content .popup-title { font-size: 1.2rem } /* ════════════════════════════════════════ TEMPLATE 4: exit-intent (dark urgent) ════════════════════════════════════════ */ .popup-tpl-exit-intent { background: linear-gradient(145deg, #0c0b18, #2b1d5e); color: #fff; border-color: rgba(124, 92, 255, .3); } .popup-tpl-exit-intent .popup-title { color: #fff; font-size: 1.5rem } .popup-tpl-exit-intent .popup-body { color: rgba(255, 255, 255, .75) } .popup-tpl-exit-intent .popup-close { background: rgba(255, 255, 255, .15); color: #fff } .popup-tpl-exit-intent .popup-dismiss-link { color: rgba(255, 255, 255, .45) } .ei-img-wrap { height: 180px; overflow: hidden } .ei-img-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: .5 } .ei-content { padding: 2rem 2rem 1.8rem } .ei-badge { display: inline-block; background: var(--violet); color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; padding: .25em .75em; border-radius: 20px; margin-bottom: .75rem; } /* ════════════════════════════════════════ TEMPLATE 5: welcome-hero (fullscreen) ════════════════════════════════════════ */ .popup-tpl-welcome-hero { background: linear-gradient(135deg, #15132a 0%, #2b1d5e 50%, #1a0d40 100%); color: #fff; display: flex; align-items: center; justify-content: center; } .popup-tpl-welcome-hero .popup-close { background: rgba(255, 255, 255, .18); color: #fff; top: 1.2rem; right: 1.2rem } .wh-content { text-align: center; max-width: 620px; padding: 2.5rem; margin: 0 auto } .wh-logo { width: 80px; height: 80px; object-fit: contain; border-radius: 16px; margin: 0 auto 1.5rem } .wh-title { font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: .8rem; line-height: 1.1 } .wh-body { color: rgba(255, 255, 255, .75); font-size: 1rem; margin-bottom: 2rem; line-height: 1.7 } /* ════════════════════════════════════════ TEMPLATE 6: product-spot (2-col card) ════════════════════════════════════════ */ .popup-tpl-product-spot { overflow: hidden } .ps-layout { display: grid; grid-template-columns: 220px 1fr } .ps-img { background: var(--chip-bg); overflow: hidden } .ps-img img { width: 100%; height: 100%; object-fit: cover; display: block } .ps-content { padding: 2rem 1.8rem; display: flex; flex-direction: column; justify-content: center } .ps-badge { display: inline-block; background: var(--amber); color: #fff; font-size: .65rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; padding: .2em .7em; border-radius: 20px; margin-bottom: .75rem } .ps-content .popup-title { font-size: 1.25rem } /* ════════════════════════════════════════ TEMPLATE 7: cookie-bar (bottom bar) ════════════════════════════════════════ */ .popup-tpl-cookie-bar { background: var(--popup-bg, var(--glass-strong)); backdrop-filter: blur(16px); border-top: 1px solid var(--line); border-radius: 0; padding: .85rem 1.3rem; } .popup-tpl-cookie-bar .popup-close { top: 50%; transform: translateY(-50%); right: .8rem } .cb-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-right: 2.5rem } .cb-icon { font-size: 1.4rem; flex: none } .cb-text { flex: 1; font-size: .83rem; color: var(--ink); display: flex; flex-direction: column; gap: .1rem } .cb-text strong { color: var(--ink-strong) } .cb-actions { display: flex; gap: .5rem; flex-shrink: 0 } /* ════════════════════════════════════════ TEMPLATE 8: video-promo (lightbox) ════════════════════════════════════════ */ .popup-tpl-video-promo { background: #000; border-color: #333; color: #fff; } .popup-tpl-video-promo .popup-close { background: rgba(255, 255, 255, .2); color: #fff } .popup-tpl-video-promo .popup-title { color: #fff } .vp-wrap { padding: 1.5rem 1.5rem 1rem } .vp-player { position: relative; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #111 } .vp-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none } /* ════════════════════════════════════════ TEMPLATE 9: countdown-deal (timer) ════════════════════════════════════════ */ .popup-tpl-countdown-deal { background: linear-gradient(145deg, var(--card), var(--surface-alt)); } .cd-header { background: linear-gradient(90deg, var(--violet), var(--navy)); padding: 1.5rem; text-align: center; } .cd-timer { display: flex; align-items: center; justify-content: center; gap: .4rem } .cd-unit { display: flex; flex-direction: column; align-items: center } .cd-digits { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: #fff; background: rgba(0, 0, 0, .3); border-radius: 10px; padding: .1em .35em; min-width: 2ch; text-align: center; line-height: 1.1; display: block; font-variant-numeric: tabular-nums; } .cd-label { font-size: .65rem; color: rgba(255, 255, 255, .7); text-transform: uppercase; letter-spacing: .8px; margin-top: .25rem } .cd-sep { font-size: 2rem; font-weight: 700; color: #fff; margin-bottom: 1.2rem; opacity: .7 } .cd-body { padding: 1.6rem 1.8rem } /* ════════════════════════════════════════ TEMPLATE 10: social-proof (toast) ════════════════════════════════════════ */ .popup-tpl-social-proof { background: var(--popup-bg, var(--glass-strong)); backdrop-filter: blur(16px); border: 1px solid var(--glass-border); max-width: 360px; padding: 1.2rem 1.4rem; } .popup-tpl-social-proof .popup-close { top: .5rem; right: .5rem; width: 26px; height: 26px } .sp-inner { display: flex; gap: .9rem; align-items: flex-start } .sp-av { flex: none; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--chip-bg) } .sp-av img { width: 100%; height: 100%; object-fit: cover } .sp-av-ph { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--navy)); display: grid; place-items: center; font-size: 1.2rem } .sp-content { flex: 1; min-width: 0 } .sp-stars { color: #f59e0b; font-size: .9rem; letter-spacing: -1px; margin-bottom: .25rem } .popup-tpl-social-proof .popup-title { font-size: .92rem; margin-bottom: .3rem } .sp-quote { font-size: .8rem; color: var(--muted); font-style: italic; line-height: 1.5; margin: 0 0 .6rem } /* ════════════════════════════════════════ ADMIN — POPUP EDITOR STYLES ════════════════════════════════════════ */ .popup-edit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start } /* Template picker grid */ .popup-tpl-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem } .popup-tpl-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .85rem .9rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: .18s; } .popup-tpl-tile:hover { border-color: var(--violet); background: rgba(124, 92, 255, .04) } .popup-tpl-tile.sel { border-color: var(--violet); background: rgba(124, 92, 255, .08) } .popup-tpl-tile input { display: none } .ptl-ico { font-size: 1.4rem; line-height: 1 } .ptl-name { font-weight: 700; font-size: .83rem; color: var(--ink-strong) } .ptl-desc { font-size: .73rem; color: var(--muted); line-height: 1.35 } /* Trigger type tiles */ .trigger-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem } .trigger-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .4rem; border: 2px solid var(--line); border-radius: 12px; cursor: pointer; transition: .15s; text-align: center; font-size: .75rem; font-weight: 600; color: var(--muted); } .trigger-tile:hover { border-color: var(--violet); color: var(--violet) } .trigger-tile.sel { border-color: var(--violet); background: rgba(124, 92, 255, .09); color: var(--violet) } .trigger-tile input { display: none } /* Animation tiles */ .anim-grid { display: flex; gap: .4rem; flex-wrap: wrap } .anim-tile { padding: .4rem .9rem; border: 2px solid var(--line); border-radius: 20px; cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--muted); transition: .15s; } .anim-tile:hover { border-color: var(--violet); color: var(--violet) } .anim-tile.sel { border-color: var(--violet); background: var(--violet); color: #fff } .anim-tile input { display: none } /* Sub-headings in editor */ .edit-card-sub-head { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); margin: .9rem 0 .5rem; padding-top: .7rem; border-top: 1px solid var(--line) } .field-row-3 { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: .7rem } /* status toggle buttons */ .status-toggle { padding: .2em .75em; border-radius: 20px; font-size: .72rem; font-weight: 700; cursor: pointer; border: none; } .status-toggle.active { background: rgba(22, 163, 74, .12); color: var(--green) } .status-toggle.blocked { background: rgba(229, 72, 77, .10); color: var(--danger) } /* ════════════════════════════════════════ RESPONSIVE POPUPS ════════════════════════════════════════ */ @media(max-width:860px) { .popup-edit-grid { grid-template-columns: 1fr } .popup-tpl-grid { grid-template-columns: repeat(2, 1fr) } .ps-layout { grid-template-columns: 1fr } .ps-img { height: 160px } .nl-layout { grid-template-columns: 1fr } .nl-side { padding: 1.5rem; flex-direction: row; gap: 1rem } .trigger-grid { grid-template-columns: repeat(2, 1fr) } .field-row-3 { grid-template-columns: 1fr 1fr } } @media(max-width:600px) { .popup-pos-center.popup-size-md, .popup-pos-center.popup-size-lg { width: 96vw } .popup-body-wrap { padding: 1.3rem } .popup-tpl-grid { grid-template-columns: 1fr } .wh-title { font-size: 1.6rem } .cd-digits { font-size: 1.8rem } .pb-inner { flex-direction: column; align-items: flex-start } } /* ════════════════════════════════════ POPUP LIVE TOGGLE SWITCH iOS-style, no page reload ════════════════════════════════════ */ .popup-live-switch { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; } .plt-checkbox { display: none } /* Track */ .plt-track { position: relative; width: 44px; height: 24px; border-radius: 24px; flex: none; background: rgba(229, 72, 77, .25); border: 1.5px solid rgba(229, 72, 77, .3); transition: background .25s, border-color .25s; } .plt-checkbox:checked+.plt-track { background: rgba(22, 163, 74, .2); border-color: rgba(22, 163, 74, .4); } /* Thumb */ .plt-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), background .22s; box-shadow: 0 1px 5px rgba(0, 0, 0, .25); } .plt-checkbox:checked~.plt-track .plt-thumb, .plt-checkbox:checked+.plt-track .plt-thumb { transform: translateX(20px); background: var(--green); } /* Label */ .plt-label { font-size: .72rem; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: var(--danger); min-width: 22px; transition: color .22s; } .plt-checkbox:checked~.plt-label, .popup-live-switch:has(.plt-checkbox:checked) .plt-label { color: var(--green); } /* Fallback for browsers without :has */ .plt-label[data-state="on"] { color: var(--green) } /* Hover glow */ .popup-live-switch:hover .plt-track { box-shadow: 0 0 0 4px rgba(124, 92, 255, .12); } /* ==================================================================== PURCHASE NOTIFICATION — Minimal Compact v2 ==================================================================== */ #pn-widget { position: fixed; bottom: 1.4rem; right: 1.4rem; z-index: 7900; pointer-events: none; max-width: 280px; width: calc(100vw - 2.4rem); } .pn-toast { pointer-events: all; position: relative; display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem .7rem .75rem; border-radius: 14px; overflow: hidden; cursor: default; /* Light */ background: rgba(255, 255, 255, .96); border: 1px solid rgba(124, 92, 255, .13); box-shadow: 0 4px 24px rgba(44, 37, 94, .12), 0 1px 4px rgba(44, 37, 94, .06); /* Enter hidden */ opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .32s cubic-bezier(.22, 1, .36, 1), transform .36s cubic-bezier(.22, 1, .36, 1); } [data-theme="dark"] .pn-toast { background: rgba(18, 16, 36, .96); border-color: rgba(124, 92, 255, .18); box-shadow: 0 4px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(124, 92, 255, .08); } /* Progress bar — bottom */ .pn-toast::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--violet), var(--grad-2)); transform-origin: left; animation: pnProg 5.5s linear forwards; } @keyframes pnProg { to { transform: scaleX(0); } } .pn-toast:hover::after { animation-play-state: paused } /* Slide IN */ .pn-toast.pn-in { opacity: 1; transform: translateY(0) scale(1) } /* Slide OUT */ .pn-toast.pn-out { opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .25s ease, transform .28s ease; } /* ── Avatar dot — small initial circle ── */ .pn-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .78rem; color: #fff; letter-spacing: 0; font-family: var(--font-display); } /* ── Body ── */ .pn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .08rem; } /* Row 1: name + time */ .pn-head { display: flex; align-items: center; justify-content: space-between; gap: .3rem; } .pn-name { font-weight: 700; font-size: .78rem; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-ago { font-size: .65rem; color: var(--muted); white-space: nowrap; flex-shrink: 0; } /* Row 2: message */ .pn-msg { font-size: .74rem; color: var(--muted); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pn-item { font-weight: 700; color: var(--violet); } [data-theme="dark"] .pn-item { color: var(--grad-2) } /* Row 3: city + price (hidden — merged into msg) */ .pn-foot, .pn-badge, .pn-verb, .pn-loc, .pn-price { display: none } /* ── Close ── */ .pn-close { flex: none; width: 18px; height: 18px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: transparent; color: var(--muted); display: grid; place-items: center; opacity: 0; transition: opacity .18s; margin-left: .1rem; } .pn-toast:hover .pn-close { opacity: .6 } .pn-close:hover { opacity: 1 !important; color: var(--ink-strong) } [data-theme="dark"] .pn-close:hover { color: #fff } @media(max-width:400px) { #pn-widget { bottom: .9rem; right: .9rem; max-width: calc(100vw - 1.8rem) } .pn-toast { padding: .6rem .75rem; border-radius: 12px } } /* ==================================================================== PRODUCT DETAIL PAGE v2 — Full Redesign ==================================================================== */ /* ══════════════════════════════════════════════════════════════════ * * HIGH-END GLASSMORPHIC PRODUCT HERO REDESIGN (EXACT BOUNDARIES) * ══════════════════════════════════════════════════════════════════ */ .pd-grid { display: grid; grid-template-columns: 320px 1fr; gap: 2.2rem; align-items: start; margin-bottom: 2.5rem; } @media (max-width: 860px) { .pd-grid { grid-template-columns: 1fr; } } .pd-left-col { position: sticky; top: 1.5rem; } .pd-imgwrap { position: relative; } .pd-imgcard { position: relative; min-height: 280px; border-radius: 26px; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.2rem 1.4rem 1.4rem; overflow: hidden; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; } [data-theme="dark"] .pd-imgcard { background: rgba(18, 24, 46, 0.82); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .pd-imgcard:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -10px rgba(79, 70, 229, 0.22); } .pd-imgcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .pd-imgcard:hover img { transform: scale(1.06); } .pd-imgcard .initial { font-size: 4rem; font-weight: 900; color: var(--violet); opacity: 0.22; font-family: var(--font-display); } .pd-vbadge { position: absolute; top: 1rem; left: 1rem; z-index: 5; padding: 4px 11px; border-radius: 20px; background: rgba(16, 185, 129, 0.16); border: 1px solid rgba(16, 185, 129, 0.3); color: #059669; font-size: 11px; font-weight: 800; letter-spacing: 0.02em; backdrop-filter: blur(8px); } [data-theme="dark"] .pd-vbadge { background: rgba(16, 185, 129, 0.25); color: #34d399; } .pd-stock { position: absolute; bottom: 1rem; z-index: 5; padding: 5px 13px; border-radius: 20px; background: rgba(15, 23, 42, 0.75); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.18); color: #10b981; font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); } .pd-stock .dot { width: 7px; height: 7px; border-radius: 50%; background: #10b981; animation: blink 1.4s infinite; } .pd-proof-strip { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 8px 14px; border-radius: 999px; background: rgba(79, 70, 229, 0.07); backdrop-filter: blur(12px); border: 1px solid rgba(79, 70, 229, 0.16); font-size: 12px; color: #64748b; font-weight: 600; } [data-theme="dark"] .pd-proof-strip { background: rgba(99, 102, 241, 0.12); border-color: rgba(99, 102, 241, 0.22); color: #94a3b8; } .pd-proof-strip strong { color: #4f46e5; } [data-theme="dark"] .pd-proof-strip strong { color: #818cf8; } .pd-proof-dot { width: 4px; height: 4px; border-radius: 50%; background: #94a3b8; opacity: 0.4; } .pd-right-col { display: flex; flex-direction: column; gap: 0.85rem; } .pd-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0.2rem; } .pd-badges .cat-chip { padding: 5px 12px; border-radius: 20px; background: rgba(79, 70, 229, 0.1); border: 1px solid rgba(79, 70, 229, 0.2); color: #4f46e5; font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } [data-theme="dark"] .pd-badges .cat-chip { background: rgba(99, 102, 241, 0.18); color: #818cf8; } .pd-badges .offb { padding: 5px 12px; border-radius: 20px; background: linear-gradient(135deg, #ef4444, #f97316); color: #ffffff; font-size: 11px; font-weight: 900; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35); } .wishlist-detail { margin-left: auto; border-radius: 20px; padding: 6px 14px; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(79, 70, 229, 0.2); font-size: 12px; font-weight: 700; } .pd-title { font-size: 2.3rem; font-weight: 900; letter-spacing: -0.03em; line-height: 1.12; color: #0f172a; margin: 0 0 0.3rem; } [data-theme="dark"] .pd-title { color: #f8fafc; } .pd-rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; color: #64748b; margin-bottom: 0.4rem; } [data-theme="dark"] .pd-rating { color: #94a3b8; } .pd-rating .stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; } .pd-desc { font-size: 14.5px; color: #475569; line-height: 1.68; margin: 0 0 0.8rem; } [data-theme="dark"] .pd-desc { color: #cbd5e1; } .pd-trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 0.4rem; } .pd-trust-cell { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.08); transition: all 0.25s ease; } [data-theme="dark"] .pd-trust-cell { background: rgba(18, 24, 46, 0.72); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.4); } .pd-trust-cell:hover { transform: translateY(-3px); border-color: rgba(79, 70, 229, 0.3); box-shadow: 0 12px 30px -4px rgba(79, 70, 229, 0.18); } .pd-trust-cell svg { color: #4f46e5; flex: none; } [data-theme="dark"] .pd-trust-cell svg { color: #818cf8; } .pd-trust-cell strong { font-size: 13px; font-weight: 800; color: #0f172a; } [data-theme="dark"] .pd-trust-cell strong { color: #f8fafc; } .pd-trust-cell span { font-size: 11px; color: #64748b; } [data-theme="dark"] .pd-trust-cell span { color: #94a3b8; } .pd-pay-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .pd-pay-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 20px; padding: 5px 13px; color: #334155; transition: all 0.2s ease; } [data-theme="dark"] .pd-pay-chip { background: rgba(18, 24, 46, 0.65); border-color: rgba(255, 255, 255, 0.12); color: #cbd5e1; } .pd-pay-chip:hover { border-color: #4f46e5; color: #4f46e5; transform: translateY(-2px); } /* ═══════════════════════════════════════ PLANS SECTION ═══════════════════════════════════════ */ .pd-plans-section { margin: 0 auto 1.2rem; max-width: 860px; text-align: center; } /* ── Animated "Choose Your Plan" heading ── */ .pd-plans-title { font-size: 2rem; font-weight: 900; margin-bottom: 1.6rem; font-family: var(--font-display); letter-spacing: -.02em; position: relative; display: inline-block; } .pd-plans-title .pt-plain { color: var(--ink-strong) } .pd-plans-title .pt-glow { background: linear-gradient(90deg, var(--violet), #a855f7, #ec4899, var(--violet)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: planTitleShine 3s linear infinite; } @keyframes planTitleShine { 0% { background-position: 0% center } 100% { background-position: 200% center } } .pd-plans-title::after { content: ''; display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), #ec4899); margin: .4rem auto 0; width: 60%; animation: planLineGrow .6s ease forwards; } @keyframes planLineGrow { from { width: 0 } to { width: 60% } } /* Grid: 1 / 2 / 3 columns */ .pd-plans-grid { display: grid; gap: 1rem; justify-items: center; } .pd-plans-count-1 { grid-template-columns: minmax(260px, 380px); justify-content: center } .pd-plans-count-2 { grid-template-columns: repeat(2, 1fr) } .pd-plans-count-3 { grid-template-columns: repeat(3, 1fr) } @media(max-width:680px) { .pd-plans-count-2, .pd-plans-count-3 { grid-template-columns: 1fr } .pd-plans-title { font-size: 1.5rem } } /* Plan card */ .pd-plan-card { width: 100%; position: relative; background: var(--card); border: 2px solid var(--line); border-radius: 20px; padding: 1.4rem 1.2rem 1.15rem; display: flex; flex-direction: column; gap: .55rem; transition: border-color .22s, box-shadow .25s, transform .22s; cursor: default; opacity: 0; transform: translateY(18px); } .pd-plan-card.pd-visible { opacity: 1; transform: translateY(0); transition: opacity .4s ease, transform .4s ease, border-color .22s, box-shadow .25s; } .pd-plan-card:hover { border-color: rgba(124, 92, 255, .5); box-shadow: 0 8px 32px rgba(124, 92, 255, .14); transform: translateY(-3px); } /* Popular card — animated glow border */ .pd-plan-popular { border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12), 0 8px 28px rgba(124, 92, 255, .18); animation: popularPulse 2.4s ease-in-out infinite; } @keyframes popularPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(124, 92, 255, .12), 0 8px 28px rgba(124, 92, 255, .18) } 50% { box-shadow: 0 0 0 6px rgba(124, 92, 255, .22), 0 12px 36px rgba(124, 92, 255, .28) } } .pd-plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, var(--violet), var(--grad-2)); color: #fff; font-size: .6rem; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; padding: .25em 1em; border-radius: 20px; white-space: nowrap; box-shadow: 0 2px 10px rgba(124, 92, 255, .4); } .pd-plan-label { font-size: .7rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; font-family: var(--font-display); } .pd-plan-price-row { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; } .pd-plan-price { font-size: 1.75rem; font-weight: 900; font-family: var(--font-display); color: var(--ink-strong); } .pd-plan-old { font-size: .82rem; color: var(--muted); text-decoration: line-through; } .pd-plan-off { font-size: .65rem; font-weight: 800; background: rgba(229, 72, 77, .1); color: var(--danger); border-radius: 6px; padding: .12em .45em; } .pd-plan-save { font-size: .72rem; font-weight: 700; color: var(--green); display: flex; align-items: center; gap: .25rem; background: rgba(22, 163, 74, .08); border: 1px solid rgba(22, 163, 74, .2); border-radius: 8px; padding: .2em .55em; width: fit-content; } /* Qty stepper */ .pd-plan-qty { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; } .qty-btn { width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-strong); font-size: 1.1rem; display: grid; place-items: center; cursor: pointer; transition: .15s; font-weight: 700; } .qty-btn:hover { border-color: var(--violet); background: rgba(124, 92, 255, .07) } .qty-input { width: 48px; text-align: center; border: 1.5px solid var(--line); border-radius: 10px; padding: .4rem; font-weight: 700; background: var(--card); color: var(--ink-strong); } .pd-plan-buy { width: 100%; margin-top: .3rem; padding: .9rem; font-size: .95rem; } /* WhatsApp button — green solid */ .pd-plan-wa { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; padding: .65rem; border-radius: 12px; background: #25D366; color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none; border: none; cursor: pointer; transition: background .18s, transform .15s, box-shadow .18s; box-shadow: 0 3px 12px rgba(37, 211, 102, .25); margin-top: .1rem; } .pd-plan-wa:hover { background: #1ebe5d; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(37, 211, 102, .35); color: #fff; } .pd-plan-wa svg { stroke: #fff } /* ── Guarantees strip — smaller ── */ .pd-guarantees { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: .7rem; font-weight: 600; color: var(--muted); margin: 0 auto 2.5rem; max-width: 520px; } .pd-guarantees svg { color: var(--violet); width: 13px; height: 13px } .pd-guarantees span { display: flex; align-items: center; gap: .28rem } .pd-g-dot { font-size: .8rem; color: var(--line) } /* ═══════════════════════════════════════ 4 TABS SECTION ═══════════════════════════════════════ */ .pd-tabs-wrap { margin: 0 auto 3rem; max-width: 900px; } .pd-tab-bar { display: flex; flex-wrap: wrap; gap: .35rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .35rem; margin-bottom: 1.5rem; } .pd-tab-btn { flex: 1; min-width: max-content; padding: .48rem .85rem; border-radius: 10px; border: none; background: transparent; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer; font-family: var(--font-body); letter-spacing: 0; transition: .2s; } .pd-tab-btn:hover { color: var(--ink-strong); background: var(--hover) } .pd-tab-btn.pd-tab-on { background: linear-gradient(135deg, var(--violet), var(--grad-2)); color: #fff; box-shadow: 0 2px 8px rgba(124, 92, 255, .28); } .pd-tab-pane { display: none } .pd-tab-pane.pd-tab-on { display: block; animation: pdFadeIn .3s ease } @keyframes pdFadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } } /* Section text — match site font */ .inc-item, .fact-v2, .pd-step-body p, .rev-text { font-family: var(--font-body); font-size: .85rem; color: var(--muted); line-height: 1.65; } .inc-item span:last-child { color: var(--ink) } .pd-step-body h3, .rev-name, .fact-val { font-family: var(--font-display); font-size: .88rem; } /* What's Included grid */ .inc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .75rem; } .inc-item { display: flex; align-items: flex-start; gap: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem 1rem; font-size: .86rem; opacity: 0; transform: translateY(12px); transition: .35s; } .inc-item.pd-visible { opacity: 1; transform: translateY(0) } .inc-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgba(22, 163, 74, .12); color: #16a34a; display: grid; place-items: center; margin-top: .05rem; } /* Quick Facts grid */ .facts-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; } .fact-v2 { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem; display: flex; flex-direction: column; gap: .2rem; opacity: 0; transform: translateY(10px); transition: .35s; } .fact-v2.pd-visible { opacity: 1; transform: translateY(0) } .fact-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .fact-val { font-size: .88rem; font-weight: 700; color: var(--ink-strong) } /* How It Works steps */ .pd-steps { display: flex; flex-direction: column; gap: 1rem } .pd-step { display: flex; gap: 1.2rem; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem 1.4rem; opacity: 0; transform: translateX(-16px); transition: .4s; } .pd-step.pd-visible { opacity: 1; transform: translateX(0) } .pd-step-num { flex: none; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--grad-2)); color: #fff; font-weight: 900; font-size: 1rem; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(124, 92, 255, .3); } .pd-step-body h3 { font-size: .95rem; font-weight: 700; margin: 0 0 .25rem } .pd-step-body p { font-size: .84rem; color: var(--muted); margin: 0; line-height: 1.55 } /* Reviews grid */ .rev-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .85rem; } .rev-card-v2 { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; opacity: 0; transform: translateY(12px); transition: .38s; } .rev-card-v2.pd-visible { opacity: 1; transform: translateY(0) } .rev-top { display: flex; align-items: center; gap: .75rem } .rev-av { flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--grad-2)); color: #fff; font-weight: 800; font-size: .95rem; display: grid; place-items: center; } .rev-meta { flex: 1; display: flex; flex-direction: column; gap: .08rem } .rev-name { font-size: .85rem; font-weight: 700; color: var(--ink-strong) } .rev-city { font-size: .72rem; color: var(--muted) } .rev-stars { color: #f59e0b; font-size: .9rem; letter-spacing: 1px } .rev-text { font-size: .83rem; color: var(--muted); line-height: 1.6; margin: 0 } .rev-verified { font-size: .68rem; font-weight: 700; color: #16a34a; display: flex; align-items: center; gap: .3rem; } /* ═══════════════════════════════════════ RELATED PRODUCTS — compact box cards ═══════════════════════════════════════ */ .pd-related-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; margin-top: 3rem; } .pd-related-head h2 { font-size: 1.3rem; font-weight: 800; margin: 0 } .pd-related-all { font-size: .8rem; font-weight: 600; color: var(--violet); display: flex; align-items: center; gap: .3rem; text-decoration: none; } .pd-related-all:hover { text-decoration: underline } .pd-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 2.5rem; } @media(max-width:640px) { .pd-related-grid { grid-template-columns: repeat(2, 1fr) } } .pd-rel-card { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; } .pd-rel-card:hover { border-color: rgba(124, 92, 255, .35); box-shadow: 0 6px 20px rgba(124, 92, 255, .1); transform: translateY(-2px); } .pd-rel-off { position: absolute; top: .5rem; left: .5rem; z-index: 1; font-size: .62rem; font-weight: 800; background: var(--danger); color: #fff; border-radius: 8px; padding: .15em .5em; } .pd-rel-img { position: relative; height: 150px; overflow: hidden; margin: 10px 10px 0; border-radius: 12px; background: var(--hover); } .pd-rel-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: transform .5s cubic-bezier(.22, 1, .36, 1); } .pd-rel-card:hover .pd-rel-img img { transform: scale(1.07) } .pd-rel-init { font-size: 2rem; font-weight: 900; color: var(--violet); opacity: .25; font-family: var(--font-display); } .pd-rel-info { padding: .65rem .75rem; display: flex; flex-direction: column; gap: .2rem; border-top: 1px solid var(--line); } .pd-rel-name { font-size: .78rem; font-weight: 700; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pd-rel-price { font-size: .75rem; font-weight: 800; color: var(--violet); } /* ── Admin plan rows ── */ .admin-plan-row { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--line); } .admin-plan-row:last-child { border-bottom: none } .admin-plan-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: rgba(124, 92, 255, .12); color: var(--violet); display: grid; place-items: center; font-size: .8rem; font-weight: 800; margin-top: .5rem; } .admin-plan-fields { flex: 1; min-width: 0 } .admin-plan-remove { flex: none; width: 28px; height: 28px; border-radius: 8px; border: 1.5px solid var(--danger); background: rgba(229, 72, 77, .08); color: var(--danger); display: grid; place-items: center; cursor: pointer; margin-top: .5rem; font-size: .8rem; transition: .15s; } .admin-plan-remove:hover { background: var(--danger); color: #fff } /* ── Product page: show only footer bottom bar ── */ body.pdp .footer-grid, body.pdp .footer-brand, body.pdp .footer-col { display: none !important } body.pdp .site-footer { padding: 0 } /* ==================================================================== COUPON SYSTEM — Checkout + Admin ==================================================================== */ /* Checkout: coupon input row */ .cpn-row { display: flex; gap: .5rem; } .cpn-row input { flex: 1; } .cpn-row .btn { flex: none; white-space: nowrap; padding: .55rem 1.1rem; } .cpn-msg { font-size: .8rem; font-weight: 600; padding: .5rem .85rem; border-radius: 10px; margin-top: .4rem; display: flex; align-items: center; gap: .4rem; } .cpn-ok { background: rgba(22, 163, 74, .1); color: #16a34a; border: 1px solid rgba(22, 163, 74, .2); } .cpn-err { background: rgba(229, 72, 77, .08); color: var(--danger); border: 1px solid rgba(229, 72, 77, .2); } /* Order summary discount line */ .cpn-discount-line { display: flex; justify-content: space-between; font-size: .9rem; font-weight: 600; color: var(--green); padding: .3rem 0; } /* Admin: applies-to radio group */ .cpn-applies-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .35rem; } .cpn-applies-opt { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; font-size: .84rem; font-weight: 600; transition: .18s; } .cpn-applies-opt:has(input:checked) { border-color: var(--violet); background: rgba(124, 92, 255, .07); color: var(--violet); } .cpn-applies-opt input { display: none } /* Admin: multi-checkbox grid */ .cpn-multi-check { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .4rem; margin-top: .35rem; max-height: 220px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: .75rem; } .cpn-check-item { display: flex; align-items: center; gap: .45rem; font-size: .82rem; cursor: pointer; padding: .25rem .4rem; border-radius: 8px; transition: .15s; } .cpn-check-item:hover { background: var(--hover) } .cpn-check-item input[type="checkbox"] { accent-color: var(--violet); width: 15px; height: 15px } /* Admin: live/off toggle pill */ .cpn-toggle { padding: .3em .8em; border-radius: 20px; font-size: .72rem; font-weight: 800; letter-spacing: .4px; border: none; cursor: pointer; transition: .18s; } .cpn-on { background: rgba(22, 163, 74, .15); color: #16a34a; } .cpn-off { background: rgba(148, 163, 184, .15); color: var(--muted); } .cpn-on:hover { background: rgba(22, 163, 74, .25) } .cpn-off:hover { background: rgba(148, 163, 184, .25) } /* Badge pill (used in coupon table) */ .badge-pill { display: inline-block; padding: .2em .65em; border-radius: 20px; font-size: .72rem; font-weight: 700; } /* ==================================================================== MULTI-STEP CHECKOUT v2 ==================================================================== */ /* ── Coupon top strip ── */ .cpn-top-strip { background: transparent; border-bottom: 1px solid var(--line); padding: .6rem 0; } .cpn-strip-inner { display: flex; align-items: center; justify-content: center; gap: .85rem; flex-wrap: wrap; } .cpn-strip-inner svg { stroke: var(--violet); flex: none } .cpn-strip-label { font-size: .72rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--violet); white-space: nowrap; } .cpn-strip-row { display: flex; gap: .5rem; align-items: center } .cpn-strip-row input { width: 190px; font-weight: 700; letter-spacing: .8px; font-size: .83rem; background: var(--input-bg, var(--card)); border: 1px solid var(--line); color: var(--ink); border-radius: 12px; padding: .48rem .9rem; transition: border-color .18s; } .cpn-strip-row input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(124, 92, 255, .12); } .cpn-strip-row input::placeholder { color: var(--muted); letter-spacing: .5px } @media(max-width:520px) { .cpn-strip-inner { justify-content: flex-start; padding: 0 1rem } .cpn-strip-row input { width: 140px } } /* ── Checkout grid ── */ .co-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.5rem; align-items: start; } @media(max-width:820px) { .co-grid { grid-template-columns: 1fr } } /* ── Step cards ── */ .co-step-card { background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 1.35rem 1.4rem; margin-bottom: .85rem; transition: border-color .22s, box-shadow .22s; } .co-step-card.co-step-done { border-color: rgba(22, 163, 74, .35); box-shadow: 0 0 0 3px rgba(22, 163, 74, .06); } .co-step-card.co-step-locked { opacity: .5; pointer-events: none; } .co-step-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; } .co-step-num { width: 28px; height: 28px; border-radius: 50%; flex: none; background: linear-gradient(135deg, var(--violet), var(--grad-2)); color: #fff; font-weight: 900; font-size: .82rem; display: grid; place-items: center; font-family: var(--font-display); } .co-step-done .co-step-num { background: linear-gradient(135deg, #16a34a, #22c55e); font-size: .8rem; } .co-step-done .co-step-num::after { content: '✓' } .co-step-locked .co-step-num { background: var(--hover); color: var(--muted) } .co-step-title { font-size: .95rem; font-weight: 800; flex: 1; font-family: var(--font-display); letter-spacing: -.01em; } .co-edit-btn { font-size: .7rem; font-weight: 700; color: var(--violet); border: 1px solid rgba(124, 92, 255, .25); background: rgba(124, 92, 255, .06); border-radius: 8px; padding: .22em .65em; cursor: pointer; transition: .15s; } .co-edit-btn:hover { background: rgba(124, 92, 255, .15) } /* textarea: vertical resize only */ textarea { resize: vertical; min-height: 56px } /* ── Payment method cards ── */ .pm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; } .pm-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.1rem .65rem .9rem; background: var(--card); border: 2px solid var(--line); border-radius: 16px; cursor: pointer; text-align: center; user-select: none; transition: border-color .2s, box-shadow .2s, transform .2s; min-height: 100px; } .pm-card:hover { border-color: rgba(124, 92, 255, .45); box-shadow: 0 6px 22px rgba(124, 92, 255, .14); transform: translateY(-3px); } .pm-card.pm-selected { border-color: var(--violet); background: rgba(124, 92, 255, .07); box-shadow: 0 6px 26px rgba(124, 92, 255, .22); transform: translateY(-3px); } /* Fallback colored badge with initials */ .pm-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: .82rem; font-weight: 900; color: #fff; letter-spacing: .3px; font-family: var(--font-display); flex: none; } .pm-name { font-size: .72rem; font-weight: 700; color: var(--ink); line-height: 1.25; max-width: 110px; } .pm-check { position: absolute; top: 5px; right: 7px; font-size: .7rem; font-weight: 900; color: var(--violet); opacity: 0; transition: .15s; } .pm-card.pm-selected .pm-check { opacity: 1 } /* ── Payment instructions panel ── */ .pm-instructions { background: rgba(124, 92, 255, .05); border: 1px solid rgba(124, 92, 255, .18); border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: .9rem; animation: pdFadeIn .25s ease; } .pm-account-box { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .65rem; padding-bottom: .65rem; border-bottom: 1px solid rgba(124, 92, 255, .12); } .pm-acc-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); } .pm-acc-val { font-size: .95rem; font-weight: 800; color: var(--ink-strong); font-family: var(--font-display); word-break: break-all; } .pm-inst-text { font-size: .82rem; color: var(--muted); line-height: 1.65; white-space: pre-line; } /* ── Proof upload zone ── */ .proof-upload-zone { border: 2px dashed var(--line); border-radius: 14px; background: var(--card); transition: border-color .18s; overflow: hidden; } .proof-upload-zone.drag-over { border-color: var(--violet) } .proof-upload-label { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.4rem; cursor: pointer; font-size: .82rem; color: var(--muted); text-align: center; } .proof-upload-label:hover { color: var(--violet) } .proof-upload-label small { font-size: .72rem } #proofPreview { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .75rem; } #proofPreview img { max-height: 160px; border-radius: 10px; object-fit: contain; border: 1px solid var(--line); } #proofClear { font-size: .75rem; color: var(--danger); border: 1px solid rgba(229, 72, 77, .3); border-radius: 8px; padding: .25em .7em; background: rgba(229, 72, 77, .06); cursor: pointer; transition: .15s; } #proofClear:hover { background: var(--danger); color: #fff } /* Payment method real icon image */ .pm-icon-img { width: 52px; height: 52px; object-fit: contain; border-radius: 12px; background: #fff; /* white bg so colored logos show clearly */ padding: 6px; flex: none; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); } /* ═══════════════════════════════════════════════════════════ TOOLS PAGE REDESIGN — tl-* classes ════════════════════════════════════════════════════════════ */ /* ── Hero ── */ .tl-hero { position: relative; padding: 4rem 0 2rem; text-align: center; overflow: hidden; } .tl-hero::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(124, 92, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 92, 255, .06) 1px, transparent 1px); background-size: 40px 40px; animation: tlGridMove 20s linear infinite; pointer-events: none; } @keyframes tlGridMove { 0% { background-position: 0 0 } 100% { background-position: 40px 40px } } .tl-hero-sub { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--violet); border: 1px solid rgba(124, 92, 255, .3); background: rgba(124, 92, 255, .08); border-radius: 20px; padding: .3em 1em; margin-bottom: .8rem; } .tl-hero h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 900; margin: .3rem 0 .6rem; line-height: 1.1 } .tl-grad-text { background: linear-gradient(135deg, var(--violet), #a855f7, #ec4899); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: tlGradFlow 4s linear infinite; } @keyframes tlGradFlow { 0% { background-position: 0% } 100% { background-position: 200% } } /* Search */ .tl-search-wrap { position: relative; max-width: 580px; margin: 1.4rem auto 1rem; } .tl-search-icon { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .tl-search-input { width: 100%; padding: .85rem 3.5rem .85rem 3rem; border: 2px solid var(--line); border-radius: 16px; font-size: 1rem; background: var(--card); color: var(--ink-strong); transition: border-color .2s, box-shadow .2s; } .tl-search-input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 92, 255, .14); } .tl-search-hint { position: absolute; right: 1.1rem; top: 50%; transform: translateY(-50%); font-size: .7rem; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: .1em .45em; background: var(--bg); } /* Stats strip */ .tl-stats-strip { display: flex; align-items: center; justify-content: center; gap: 1.4rem; flex-wrap: wrap; margin-top: .8rem; font-size: .78rem; font-weight: 600; color: var(--muted); } .tl-stat { display: flex; align-items: center; gap: .35rem } .tl-stat b { color: var(--ink-strong); font-size: .9rem } .tl-stat svg { color: var(--violet) } .tl-stat-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line) } /* ── Category filters ── */ .tl-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; justify-content: center; } .tl-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .9rem; border-radius: 99px; border: 1.5px solid var(--line); background: var(--card); font-size: .78rem; font-weight: 700; color: var(--muted); text-decoration: none; transition: .18s; cursor: pointer; } .tl-chip:hover { border-color: var(--violet); color: var(--violet); background: rgba(124, 92, 255, .07) } .tl-chip.active { background: linear-gradient(135deg, var(--violet), #a855f7); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(124, 92, 255, .35); } .tl-chip-count { background: rgba(0, 0, 0, .12); color: inherit; border-radius: 10px; padding: .05em .45em; font-size: .68rem; font-weight: 800; } .tl-chip.active .tl-chip-count { background: rgba(255, 255, 255, .25) } /* ── Controls row ── */ .tl-controls { position: relative; z-index: 120; display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.6rem; padding: .65rem .7rem .65rem 1rem; flex-wrap: wrap; gap: .75rem; border: 1px solid var(--glass-border); border-radius: 18px; background: color-mix(in srgb, var(--glass) 88%, transparent); box-shadow: 0 10px 30px rgba(44, 37, 94, .07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px) } .tl-results-count { display: inline-flex; align-items: center; min-height: 42px; font-size: .84rem; color: var(--muted); font-weight: 500 } .tl-results-count b { display: inline-grid; place-items: center; min-width: 30px; height: 25px; margin: 0 .35rem; padding: 0 .4rem; color: var(--violet); font-size: .84rem; border-radius: 8px; background: rgba(124, 92, 255, .1) } .tl-controls-right { display: flex; align-items: center; gap: .65rem } .tl-sort { position: relative; min-width: 270px; z-index: 130 } .tl-sort-trigger { position: relative; width: 100%; height: 52px; display: flex; align-items: center; gap: .7rem; padding: 6px 2.55rem 6px .55rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--violet) 22%, var(--line)); border-radius: 15px; background: linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, #fff), color-mix(in srgb, var(--card) 91%, #eee9ff)); color: var(--muted); font-family: var(--font-body); text-align: left; box-shadow: 0 7px 18px rgba(44, 37, 94, .08), inset 0 1px 0 rgba(255, 255, 255, .75); cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease } .tl-sort-trigger:hover { transform: translateY(-1px); border-color: rgba(124, 92, 255, .5); box-shadow: 0 10px 23px rgba(74, 54, 155, .13), inset 0 1px 0 rgba(255, 255, 255, .75) } .tl-sort-trigger:focus-visible, .tl-sort.is-open .tl-sort-trigger { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 92, 255, .12), 0 9px 22px rgba(74, 54, 155, .12) } .tl-sort-icon { width: 38px; height: 38px; display: grid; place-items: center; flex: none; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--violet), #9d4edd); box-shadow: 0 6px 14px rgba(124, 92, 255, .27) } .tl-sort-icon svg { width: 17px; height: 17px; display: block } .tl-sort-copy { min-width: 0; display: grid; flex: 1; gap: 0 } .tl-sort-label { font-size: .6rem; line-height: 1.2; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) } .tl-sort-value { min-width: 0; overflow: hidden; color: var(--ink-strong); font-size: .8rem; line-height: 1.35; font-weight: 800; text-overflow: ellipsis; white-space: nowrap } .tl-sort-chevron { position: absolute; z-index: 2; right: .9rem; top: 50%; width: 17px; height: 17px; fill: none; stroke: var(--violet); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transform: translateY(-50%); transition: transform .2s ease } .tl-sort.is-open .tl-sort-chevron { transform: translateY(-50%) rotate(180deg) } .tl-sort-menu { position: absolute; z-index: 1000; top: calc(100% + 10px); right: 0; width: 330px; padding: .55rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--violet) 24%, var(--line)); border-radius: 18px; background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: 0 22px 55px rgba(35, 27, 83, .2), inset 0 1px 0 rgba(255, 255, 255, .75); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); transform-origin: top right; animation: tlSortMenuIn .18s ease both } .tl-sort-menu[hidden] { display: none } @keyframes tlSortMenuIn { from { opacity: 0; transform: translateY(-7px) scale(.97) } to { opacity: 1; transform: translateY(0) scale(1) } } .tl-sort-menu-head { display: flex; align-items: center; justify-content: space-between; padding: .45rem .55rem .6rem; color: var(--ink-strong); font-size: .68rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase } .tl-sort-menu-head small { color: var(--muted); font-size: .61rem; letter-spacing: .03em } .tl-sort-option { width: 100%; min-height: 55px; display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border: 1px solid transparent; border-radius: 13px; background: transparent; color: var(--ink); font-family: var(--font-body); text-align: left; cursor: pointer; transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease } .tl-sort-option:hover, .tl-sort-option:focus-visible { outline: none; color: var(--violet); border-color: rgba(124, 92, 255, .14); background: rgba(124, 92, 255, .075); transform: translateX(2px) } .tl-sort-option.is-selected { color: var(--violet); border-color: rgba(124, 92, 255, .2); background: linear-gradient(110deg, rgba(124, 92, 255, .13), rgba(168, 85, 247, .055)) } .tl-sort-option-icon { width: 35px; height: 35px; display: grid; place-items: center; flex: none; border-radius: 10px; color: var(--violet); background: rgba(124, 92, 255, .09) } .tl-sort-option.is-selected .tl-sort-option-icon { color: #fff; background: linear-gradient(135deg, var(--violet), #9d4edd); box-shadow: 0 5px 12px rgba(124, 92, 255, .25) } .tl-sort-option-copy { min-width: 0; display: grid; flex: 1; gap: 1px } .tl-sort-option-copy b { overflow: hidden; font-size: .76rem; line-height: 1.35; font-weight: 850; text-overflow: ellipsis; white-space: nowrap } .tl-sort-option-copy small { color: var(--muted); font-size: .65rem; line-height: 1.35 } .tl-sort-option-check { width: 24px; height: 24px; display: grid; place-items: center; flex: none; border-radius: 50%; color: transparent; background: transparent } .tl-sort-option.is-selected .tl-sort-option-check { color: #fff; background: var(--violet) } .tl-view-toggle { height: 52px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65) } .tl-view-btn { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 9px; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--muted); transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease } .tl-view-btn:hover:not(.active) { color: var(--violet); background: rgba(124, 92, 255, .08) } .tl-view-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px } .tl-view-btn.active { color: #fff; background: linear-gradient(135deg, var(--violet), #9d4edd); box-shadow: 0 6px 14px rgba(124, 92, 255, .3) } .tl-view-btn.active:hover { transform: translateY(-1px) } .tl-view-btn svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2 } [data-theme="dark"] .tl-controls, [data-theme="dark"] .tl-view-toggle { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) } [data-theme="dark"] .tl-sort-trigger { background: linear-gradient(135deg, color-mix(in srgb, var(--card) 96%, #17122f), color-mix(in srgb, var(--card) 90%, #271d52)); box-shadow: 0 7px 20px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .04) } [data-theme="dark"] .tl-sort-menu { background: color-mix(in srgb, var(--card) 94%, #130f29); box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .045) } @media(max-width:640px) { .tl-controls { align-items: stretch; padding: .75rem } .tl-results-count, .tl-controls-right { width: 100% } .tl-results-count { min-height: 30px } .tl-sort { min-width: 0; flex: 1 } } @media(max-width:430px) { .tl-controls-right { align-items: stretch; flex-direction: column } .tl-sort, .tl-view-toggle { width: 100% } .tl-sort-menu { left: 0; right: auto; width: 100% } .tl-view-toggle { justify-content: center } .tl-view-btn { width: 50% } } /* ── Product Grid ── */ .tl-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.35rem; } @media(max-width:1100px) { .tl-grid { grid-template-columns: repeat(3, 1fr) } } @media(max-width:760px) { .tl-grid { grid-template-columns: repeat(2, 1fr) } } @media(max-width:480px) { .tl-grid { grid-template-columns: 1fr } } /* ── List view ── */ .tl-grid.list-view { grid-template-columns: 1fr } .tl-grid.list-view .tl-card { flex-direction: row; align-items: stretch } .tl-grid.list-view .tl-card-top { width: 140px; min-width: 140px; aspect-ratio: unset; height: auto; margin: 0; border-radius: 18px 0 0 18px; border-right: 1px solid var(--line) } .tl-grid.list-view .tl-card-body { flex: 1 } .tl-grid.list-view .tl-desc { display: block !important } /* ── Card wrapper (for stagger animation) ── */ .tl-card-wrapper { min-width: 0; animation: tlCardAppear .5s ease both; } @keyframes tlCardAppear { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } /* ── Product Card: polished light storefront design ── */ .tl-card { position: relative; background: linear-gradient(165deg, #fff 0%, #fbfaff 100%); border: 1px solid #e5e1f2; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; height: 100%; box-shadow: 0 12px 34px rgba(44, 37, 94, .085), inset 0 1px 0 rgba(255, 255, 255, .9); transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, border-color .28s ease; } .tl-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .28s ease } .tl-card:hover { transform: translateY(-7px); border-color: rgba(124, 92, 255, .42); box-shadow: 0 26px 58px -18px rgba(70, 52, 150, .32), 0 10px 24px rgba(44, 37, 94, .08); } .tl-card:hover::after { box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .08) } /* Inset, softly tinted product image panel */ .tl-card-top { position: relative; width: calc(100% - 24px); aspect-ratio: 16/10; margin: 12px 12px 0; overflow: hidden; border-radius: 17px; background: linear-gradient(135deg, #d9d2ff 0%, #eeeaff 100%); display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .tl-card.cat-ai .tl-card-top { background: linear-gradient(135deg, #a9ddd5 0%, #8dc8c1 100%) } .tl-card.cat-seo .tl-card-top { background: linear-gradient(135deg, #ffe0c7 0%, #ffcfae 100%) } .tl-card.cat-creative .tl-card-top { background: linear-gradient(135deg, #f8d4e6 0%, #edbdd8 100%) } .tl-card.cat-entertainment .tl-card-top { background: linear-gradient(135deg, #f6c8cb 0%, #e9aeb4 100%) } .tl-card.cat-premium .tl-card-top { background: linear-gradient(135deg, #d8d0ff 0%, #c6b8f4 100%) } .tl-card-img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; display: block; transition: transform .38s ease; } /* Brand logos remain crisp and visually prominent inside the media panel. */ .tl-card-img.icon-mode { width: 46%; height: 72%; max-width: 112px; object-fit: contain; border-radius: 24px; background: rgba(255, 255, 255, .16); padding: 8px; filter: drop-shadow(0 12px 12px rgba(22, 73, 68, .2)); } .tl-card:hover .tl-card-img { transform: scale(1.045) } .tl-initial { width: 92px; height: 92px; border-radius: 24px; background: linear-gradient(135deg, var(--violet), #a855f7); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 25px rgba(124, 92, 255, .3); transition: transform .24s ease; } .tl-card:hover .tl-initial { transform: scale(1.05) rotate(-2deg) } /* Compact corner badges */ .tl-badges { position: absolute; top: .65rem; left: .65rem; right: .65rem; display: flex; align-items: flex-start; gap: .35rem; flex-wrap: nowrap; z-index: 10; pointer-events: none; } .tl-badge { font-size: .62rem; font-weight: 900; line-height: 1; letter-spacing: .25px; padding: .55em .7em; border-radius: 7px; text-transform: uppercase; background: linear-gradient(135deg, #8b5cf6, #b14cff); color: #fff; box-shadow: 0 5px 14px rgba(87, 58, 170, .2); } .tl-badge.off { background: linear-gradient(135deg, #ff5c57, #ff493d); box-shadow: 0 5px 14px rgba(239, 68, 68, .22) } /* Clear information hierarchy with the description visible in grid view. */ .tl-card-body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .62rem; flex: 1; border-radius: 0 0 23px 23px; } .tl-card-kicker { display: flex; align-items: center; justify-content: space-between; gap: .5rem } .tl-category-label { min-width: 0; overflow: hidden; color: var(--violet); font-size: .62rem; line-height: 1.3; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap } .tl-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem } .tl-title-arrow { width: 28px; height: 28px; display: grid; place-items: center; flex: none; margin-top: -2px; border-radius: 9px; color: var(--violet); background: rgba(124, 92, 255, .08); font-size: .95rem; font-weight: 800; transition: color .2s ease, background .2s ease, transform .2s ease } .tl-card:hover .tl-title-arrow { color: #fff; background: var(--violet); transform: translate(2px, -2px) } .tl-title { font-size: 1.05rem; font-weight: 900; margin: 0; line-height: 1.28; flex: 1; min-width: 0 } .tl-title a { color: #30266b; text-decoration: none } .tl-title a:hover { color: var(--violet) } .tl-verified { display: inline-flex; align-items: center; gap: .2rem; flex: none; font-size: .6rem; font-weight: 850; color: #0f9f4c; background: #e9f8ee; border-radius: 999px; padding: .28em .58em; white-space: nowrap } .tl-rating { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .7rem; line-height: 1.35; color: #716d8d; } .tl-review-count, .tl-sold-count { display: inline-flex; align-items: center; white-space: nowrap } .tl-review-count::before, .tl-sold-count::before { content: ''; width: 3px; height: 3px; margin-right: .3rem; border-radius: 50%; background: currentColor; opacity: .5 } .tl-rating b { color: #625d80 } .tl-stars { color: #ffae00; font-size: .79rem; letter-spacing: .5px; white-space: nowrap } .tl-desc { min-height: 2.95em; font-size: .78rem; color: #77728f; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tl-grid:not(.list-view) .tl-desc { display: -webkit-box } .tl-compact-meta { display: none; } .tl-price-row { display: flex; align-items: baseline; gap: .45rem; margin-top: auto; padding-top: .72rem; border-top: 1px solid #eeeaf6 } .tl-price { font-size: 1.42rem; font-weight: 900; line-height: 1.1; font-family: var(--font-display); color: #30266b; } .tl-price-old { font-size: .8rem; color: #86819b; text-decoration: line-through; } .tl-actions { display: flex; align-items: stretch; gap: .55rem; margin-top: .35rem } .tl-btn-get { min-height: 44px; flex: 1; display: flex; align-items: center; justify-content: center; padding: .72rem .8rem; border-radius: 13px; background: linear-gradient(100deg, #7652ff 0%, #a649ee 100%); color: #fff; font-size: .82rem; font-weight: 800; text-align: center; text-decoration: none; transition: .2s ease; box-shadow: 0 7px 18px rgba(124, 92, 255, .27); } .tl-btn-get:hover { background: linear-gradient(100deg, #6944ef, #9636df); transform: translateY(-1px); box-shadow: 0 9px 22px rgba(124, 92, 255, .36); color: #fff; } .tl-btn-cart { width: 44px; min-width: 44px; height: 44px; border-radius: 13px; border: 1px solid #ded9ee; background: #fff; display: grid; place-items: center; cursor: pointer; color: #6e698b; transition: .18s ease; } .tl-btn-cart svg { width: 17px; height: 17px } .tl-btn-cart:hover { border-color: var(--violet); color: var(--violet); background: #f7f4ff; transform: translateY(-1px) } /* Retain the established dark theme while the new treatment targets light mode. */ [data-theme="dark"] .tl-card { background: var(--card); border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .22) } [data-theme="dark"] .tl-card:hover { border-color: rgba(124, 92, 255, .5); box-shadow: 0 18px 46px rgba(0, 0, 0, .38) } [data-theme="dark"] .tl-card-top { background: linear-gradient(135deg, rgba(124, 92, 255, .22), rgba(168, 85, 247, .1)) } [data-theme="dark"] .tl-card.cat-ai .tl-card-top { background: linear-gradient(135deg, rgba(16, 163, 127, .26), rgba(16, 163, 127, .09)) } [data-theme="dark"] .tl-card.cat-seo .tl-card-top { background: linear-gradient(135deg, rgba(255, 100, 45, .25), rgba(255, 100, 45, .08)) } [data-theme="dark"] .tl-card.cat-creative .tl-card-top { background: linear-gradient(135deg, rgba(236, 72, 153, .25), rgba(236, 72, 153, .08)) } [data-theme="dark"] .tl-card.cat-entertainment .tl-card-top { background: linear-gradient(135deg, rgba(229, 9, 20, .24), rgba(229, 9, 20, .08)) } [data-theme="dark"] .tl-card-img.icon-mode { background: rgba(255, 255, 255, .04); filter: drop-shadow(0 12px 12px rgba(0, 0, 0, .28)) } [data-theme="dark"] .tl-title a, [data-theme="dark"] .tl-price { color: var(--ink-strong) } [data-theme="dark"] .tl-rating, [data-theme="dark"] .tl-desc, [data-theme="dark"] .tl-price-old { color: var(--muted) } [data-theme="dark"] .tl-price-row { border-top-color: var(--line) } [data-theme="dark"] .tl-title-arrow { background: rgba(124, 92, 255, .13) } [data-theme="dark"] .tl-rating b { color: var(--ink) } [data-theme="dark"] .tl-verified { background: var(--green-bg) } [data-theme="dark"] .tl-btn-cart { background: var(--card); border-color: var(--line); color: var(--muted) } [data-theme="dark"] .tl-btn-cart:hover { background: rgba(124, 92, 255, .09); color: var(--violet-2) } /* Premium horizontal card treatment — scoped exclusively to list view. */ .tl-grid.list-view { gap: 1rem } .tl-grid.list-view .tl-card { min-height: 228px; padding: 10px; flex-direction: row; align-items: stretch; overflow: hidden; border-radius: 26px; border-color: rgba(117, 91, 201, .2); background: radial-gradient(circle at 92% 10%, rgba(124, 92, 255, .09), transparent 28%), linear-gradient(135deg, #fff 0%, #fdfcff 58%, #f8f5ff 100%); box-shadow: 0 14px 38px rgba(45, 35, 99, .09), inset 0 1px 0 rgba(255, 255, 255, .95) } .tl-grid.list-view .tl-card::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--violet), #b24bf3); opacity: .72; transition: top .28s ease, bottom .28s ease, opacity .28s ease } .tl-grid.list-view .tl-card:hover { transform: translateY(-4px) scale(1.002); border-color: rgba(124, 92, 255, .4); box-shadow: 0 24px 58px -18px rgba(58, 39, 133, .3), 0 9px 24px rgba(44, 37, 94, .08) } .tl-grid.list-view .tl-card:hover::before { top: 12%; bottom: 12%; opacity: 1 } .tl-grid.list-view .tl-card-top { width: 244px; min-width: 244px; height: auto; min-height: 206px; aspect-ratio: auto; margin: 0; border: 1px solid rgba(255, 255, 255, .7); border-radius: 19px; box-shadow: inset 0 0 0 1px rgba(70, 50, 130, .04), 0 10px 25px rgba(49, 37, 99, .11) } .tl-grid.list-view .tl-card-top::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, .3), transparent 38%, rgba(36, 19, 83, .08)) } .tl-grid.list-view .tl-card-top>a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center } .tl-grid.list-view .tl-card-img { border-radius: 18px } .tl-grid.list-view .tl-card-img.icon-mode { width: 112px; height: 112px; max-width: none; padding: 14px; border: 1px solid rgba(255, 255, 255, .38); border-radius: 29px; background: rgba(255, 255, 255, .22); box-shadow: 0 18px 35px rgba(38, 27, 91, .16); backdrop-filter: blur(8px) } .tl-grid.list-view .tl-badges { top: .75rem; left: .75rem; right: .75rem } .tl-grid.list-view .tl-badge { padding: .62em .82em; border-radius: 9px; box-shadow: 0 7px 17px rgba(58, 38, 127, .2) } .tl-grid.list-view .tl-card-body { min-width: 0; padding: 1.15rem 1.2rem 1.1rem 1.35rem; display: grid; grid-template-columns: minmax(0, 1fr) 190px; grid-template-rows: auto auto auto 1fr; column-gap: 1.5rem; row-gap: .55rem; align-content: center; border-radius: 0 } .tl-grid.list-view .tl-card-kicker, .tl-grid.list-view .tl-title-row, .tl-grid.list-view .tl-rating, .tl-grid.list-view .tl-desc { grid-column: 1 } .tl-grid.list-view .tl-card-kicker { justify-content: flex-start; gap: .7rem } .tl-grid.list-view .tl-category-label { padding: .34rem .58rem; border-radius: 7px; background: rgba(124, 92, 255, .08) } .tl-grid.list-view .tl-title { font-size: 1.28rem; line-height: 1.2 } .tl-grid.list-view .tl-title-arrow { width: 31px; height: 31px; border-radius: 10px } .tl-grid.list-view .tl-rating { font-size: .74rem } .tl-grid.list-view .tl-desc { display: -webkit-box !important; max-width: 680px; min-height: 0; font-size: .84rem; line-height: 1.6; -webkit-line-clamp: 2 } .tl-grid.list-view .tl-price-row { grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-content: flex-end; margin: 0; padding: 0 0 .75rem; border-top: 0; border-bottom: 1px solid #e9e4f3 } .tl-grid.list-view .tl-price { font-size: 1.65rem } .tl-grid.list-view .tl-actions { grid-column: 2; grid-row: 3 / span 2; align-self: start; margin-top: .12rem } .tl-grid.list-view .tl-btn-get { min-height: 47px; border-radius: 14px } .tl-grid.list-view .tl-btn-cart { width: 47px; min-width: 47px; height: 47px; border-radius: 14px } [data-theme="dark"] .tl-grid.list-view .tl-card { border-color: var(--line); background: radial-gradient(circle at 92% 10%, rgba(124, 92, 255, .13), transparent 30%), linear-gradient(135deg, var(--card), color-mix(in srgb, var(--card) 86%, #1c1538)) } [data-theme="dark"] .tl-grid.list-view .tl-card-top { border-color: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025), 0 12px 30px rgba(0, 0, 0, .25) } [data-theme="dark"] .tl-grid.list-view .tl-category-label { background: rgba(124, 92, 255, .13) } [data-theme="dark"] .tl-grid.list-view .tl-price-row { border-bottom-color: var(--line) } @media(max-width:850px) { .tl-grid.list-view .tl-card-top { width: 205px; min-width: 205px } .tl-grid.list-view .tl-card-body { grid-template-columns: minmax(0, 1fr) 165px; column-gap: 1rem; padding-left: 1.1rem } } @media(max-width:680px) { .tl-grid.list-view .tl-card { min-height: 190px } .tl-grid.list-view .tl-card-top { width: 168px; min-width: 168px; min-height: 170px } .tl-grid.list-view .tl-card-body { display: flex; padding: .9rem 1rem; gap: .45rem } .tl-grid.list-view .tl-desc { -webkit-line-clamp: 1 } .tl-grid.list-view .tl-price-row { justify-content: flex-start; padding: .45rem 0 0; border-top: 1px solid #e9e4f3; border-bottom: 0 } [data-theme="dark"] .tl-grid.list-view .tl-price-row { border-top-color: var(--line) } .tl-grid.list-view .tl-actions { width: 100%; margin-top: .1rem } } @media(max-width:480px) { .tl-grid.list-view .tl-card { min-height: 0; padding: 8px; flex-direction: column; border-radius: 22px } .tl-grid.list-view .tl-card-top { width: 100%; min-width: 0; min-height: 0; aspect-ratio: 16/10; margin: 0; border-radius: 16px } .tl-grid.list-view .tl-card-img { border-radius: 15px } .tl-grid.list-view .tl-card-body { padding: .95rem .75rem .75rem } .tl-card { border-radius: 20px } .tl-card-top { width: calc(100% - 16px); margin: 8px 8px 0; border-radius: 14px } .tl-card-body { padding: .9rem 1rem 1rem } .tl-title, .tl-grid.list-view .tl-title { font-size: 1rem } } /* ── Empty state ── */ .tl-empty { text-align: center; padding: 5rem 1rem; } .tl-empty-icon { width: 72px; height: 72px; border-radius: 20px; background: rgba(124, 92, 255, .1); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.2rem; } .tl-empty-icon svg { width: 32px; height: 32px; color: var(--violet) } .tl-empty h3 { font-size: 1.3rem; margin: 0 0 .4rem } .tl-empty p { color: var(--muted); margin-bottom: 1.2rem } /* ==================================================================== PRELOADER / LOADING SCREEN (Center Logo, Animated Circles, Blur BG) ==================================================================== */ .preloader-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.78); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="light"] .preloader-overlay { background: rgba(248, 250, 252, 0.85); } .preloader-overlay.fade-out { opacity: 0; visibility: hidden; pointer-events: none; } /* Top Progress Line */ .preloader-bar { position: absolute; top: 0; left: 0; height: 3.5px; width: 0%; background: linear-gradient(90deg, #7c5cff, #a855f7, #ec4899, #38bdf8); box-shadow: 0 0 12px rgba(124, 92, 255, 0.8); animation: preloaderBar 1.2s ease-in-out infinite; } @keyframes preloaderBar { 0% { width: 0%; left: 0; } 50% { width: 70%; left: 15%; } 100% { width: 100%; left: 100%; } } /* Centered Animated Circles Wrapper */ .preloader-content { position: relative; width: 150px; height: 150px; display: grid; place-items: center; } /* Outer Spinning Dashed Ring */ .preloader-circle.ring-outer { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed rgba(124, 92, 255, 0.55); animation: preloaderSpin 7s linear infinite; } /* Middle Counter-Rotating Dual-Color Ring */ .preloader-circle.ring-middle { position: absolute; inset: 12px; border-radius: 50%; border: 2.5px solid transparent; border-top-color: #a855f7; border-bottom-color: #38bdf8; animation: preloaderSpinRev 3s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; } /* Inner Pulsating Ripple Ring */ .preloader-circle.ring-inner { position: absolute; inset: 24px; border-radius: 50%; border: 2px solid #7c5cff; animation: preloaderPulse 1.8s ease-out infinite; } @keyframes preloaderSpin { 100% { transform: rotate(360deg); } } @keyframes preloaderSpinRev { 100% { transform: rotate(-360deg); } } @keyframes preloaderPulse { 0% { transform: scale(0.92); opacity: 0.9; box-shadow: 0 0 0 0 rgba(124, 92, 255, 0.5); } 70% { transform: scale(1.15); opacity: 0.45; box-shadow: 0 0 25px 12px rgba(168, 85, 247, 0.4); } 100% { transform: scale(0.92); opacity: 0.9; box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); } } /* Center Logo Container */ .preloader-logo-wrap { width: 68px; height: 68px; border-radius: 20px; background: var(--card, #ffffff); box-shadow: 0 10px 30px rgba(124, 92, 255, 0.35); display: flex; align-items: center; justify-content: center; z-index: 2; animation: preloaderFloat 2.4s ease-in-out infinite; } .preloader-logo-img { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; } .preloader-logo-mark { font-family: var(--font-display, sans-serif); font-size: 30px; font-weight: 900; color: var(--violet, #7c5cff); } @keyframes preloaderFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.04); } } /* Dashboard command hero and account insight modules */ .ud-command-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; margin: 0 0 1.25rem; padding: clamp(1.4rem, 3vw, 2.4rem); overflow: hidden; border: 1px solid rgba(124, 92, 255, .18); border-radius: 30px; background: linear-gradient(125deg, rgba(28, 25, 72, .97), rgba(79, 70, 229, .91) 56%, rgba(14, 165, 233, .82)); color: #fff; box-shadow: 0 25px 65px rgba(44, 36, 120, .24) } .ud-command-hero::before { content: ''; position: absolute; width: 340px; height: 340px; right: -100px; top: -180px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255, 255, 255, .035), 0 0 0 88px rgba(255, 255, 255, .025) } .ud-command-hero>div { position: relative; z-index: 1 } .ud-kicker { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .65rem; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: #c4b5fd } .ud-command-hero h1 { max-width: 680px; margin: 0 0 .55rem; color: #fff; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1; letter-spacing: -.055em } .ud-command-hero p { max-width: 680px; margin: 0; color: rgba(255, 255, 255, .72); line-height: 1.6 } .ud-command-meta { display: grid; gap: .55rem; min-width: 220px } .ud-command-meta span { display: flex; align-items: center; gap: .5rem; padding: .68rem .8rem; border: 1px solid rgba(255, 255, 255, .14); border-radius: 13px; background: rgba(255, 255, 255, .09); font-size: .76rem; font-weight: 700; backdrop-filter: blur(10px) } .ud-insight-row { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1rem; margin: 0 0 1.6rem } .ud-spend-card, .ud-protection-card { display: flex; align-items: center; gap: 1rem; padding: 1.15rem; border: 1px solid var(--line); border-radius: 21px; background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--violet) 5%, var(--card))) } .ud-spend-card>span, .ud-protection-card>span { width: 48px; height: 48px; display: grid; place-items: center; flex: none; border-radius: 15px; background: rgba(124, 92, 255, .12); color: var(--violet) } .ud-insight-row small { display: block; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em } .ud-insight-row strong { display: block; margin: .18rem 0; color: var(--ink-strong); font-size: 1.1rem } .ud-spend-card strong { font-size: 1.45rem } .ud-insight-row p { margin: 0; color: var(--muted); font-size: .77rem } .ud-protection-card .btn { margin-left: auto; flex: none } @media(max-width:900px) { .ud-command-hero { grid-template-columns: 1fr } .ud-command-meta { grid-template-columns: repeat(3, 1fr); min-width: 0 } .ud-insight-row { grid-template-columns: 1fr } } @media(max-width:600px) { .ud-command-meta { grid-template-columns: 1fr } .ud-command-hero { border-radius: 23px } .ud-protection-card { align-items: flex-start; flex-wrap: wrap } .ud-protection-card .btn { width: 100%; margin: 0 } } /* ==================================================================== CUSTOMER DASHBOARD V2 + GLOBAL WISHLIST ==================================================================== */ .wishlist-toggle { position: relative; z-index: 4; display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 38px; padding: .55rem .75rem; border: 1px solid rgba(124, 92, 255, .22); border-radius: 12px; background: rgba(255, 255, 255, .86); color: var(--muted); font: 700 .76rem/1 var(--font-body); cursor: pointer; box-shadow: 0 8px 24px rgba(21, 24, 61, .1); backdrop-filter: blur(14px); transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease } .wishlist-toggle:hover { transform: translateY(-2px) scale(1.02); border-color: rgba(124, 92, 255, .55); color: var(--violet); box-shadow: 0 12px 28px rgba(124, 92, 255, .18) } .wishlist-toggle svg { transition: transform .25s ease, fill .25s ease } .wishlist-toggle.is-saved { color: #e83e75; border-color: rgba(232, 62, 117, .32); background: rgba(255, 239, 246, .94) } .wishlist-toggle.is-saved svg { fill: currentColor; transform: scale(1.08) } .wishlist-toggle[data-busy="1"] { opacity: .65; pointer-events: none } /* Tool cards: keep the image at its original full size and float the heart over it. */ .tl-card-top>a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center } .tl-card-top>.wishlist-toggle { position: absolute; top: 42px; right: 10px; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; z-index: 6 } .tl-card-top>.wishlist-toggle svg { width: 15px; height: 15px } .tl-card-top>.wishlist-toggle .wishlist-label { display: none } /* Compact hearts sit high on the right while staying clear of pack badges. */ .pack-wishlist { position: absolute; top: 3.1rem; right: .7rem; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50% } .pack-wishlist svg { width: 15px; height: 15px } .wishlist-detail { position: static; min-height: 46px; padding: .8rem 1.15rem; font-size: .88rem } .wishlist-toast { position: fixed; left: 50%; bottom: 1.5rem; z-index: 10020; transform: translate(-50%, 24px); opacity: 0; padding: .8rem 1.15rem; border: 1px solid rgba(124, 92, 255, .25); border-radius: 999px; background: #15172f; color: #fff; font-size: .84rem; font-weight: 700; box-shadow: 0 18px 45px rgba(7, 9, 30, .28); transition: .25s ease; pointer-events: none } .wishlist-toast.is-visible { opacity: 1; transform: translate(-50%, 0) } .ud-wrap { padding: 2.2rem 0 4rem; isolation: isolate; overflow: hidden } .ud-bg-shape { animation: udOrb 13s ease-in-out infinite alternate } .ud-bg-shape.shape-2 { animation-delay: -5s } .ud-shell { gap: 1.35rem; margin: 0; align-items: stretch } .ud-side { width: 264px; top: 88px; gap: 1rem } .ud-profile-card, .ud-nav, .ud-main { background: color-mix(in srgb, var(--card) 82%, transparent); border-color: rgba(124, 92, 255, .16); box-shadow: 0 24px 70px rgba(31, 28, 80, .11); backdrop-filter: blur(22px) } .ud-profile-card { position: relative; overflow: hidden; padding: 1.7rem 1.2rem; border-radius: 26px } .ud-profile-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #7c5cff, #38bdf8, #ec4899) } .dash-av, .ud-avatar-option { background: linear-gradient(135deg, #7c5cff, #4f46e5) } .ud-avatar-violet { background: linear-gradient(135deg, #8b5cf6, #4f46e5) !important } .ud-avatar-ocean { background: linear-gradient(135deg, #06b6d4, #2563eb) !important } .ud-avatar-sunset { background: linear-gradient(135deg, #fb7185, #f97316) !important } .ud-avatar-mint { background: linear-gradient(135deg, #10b981, #0ea5e9) !important } .ud-avatar-berry { background: linear-gradient(135deg, #ec4899, #7c3aed) !important } .ud-avatar-midnight { background: linear-gradient(135deg, #334155, #111827) !important } .ud-profile-card .dash-av { width: 82px; height: 82px; font-size: 1.55rem; border: 4px solid rgba(255, 255, 255, .8); box-shadow: 0 14px 35px rgba(79, 70, 229, .3) } .ud-nav { border-radius: 22px; padding: .55rem } .ud-nav-btn { position: relative; border-radius: 14px; padding: .82rem .9rem } .ud-nav-btn.on { background: linear-gradient(135deg, rgba(124, 92, 255, .16), rgba(56, 189, 248, .08)); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .12) } .ud-nav-count { margin-left: auto; min-width: 23px; padding: .2rem .4rem; border-radius: 99px; background: rgba(124, 92, 255, .13); text-align: center; font-size: .7rem } .ud-main { border-radius: 30px; padding: clamp(1.25rem, 3vw, 2.5rem); min-height: 680px; overflow: hidden } .ud-main>.tab-pane.on { animation: udPaneIn .45s cubic-bezier(.2, .7, .2, 1) } .ud-header { position: relative; margin-bottom: 1.5rem; padding-bottom: 1.3rem } .ud-header h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); letter-spacing: -.04em } .dash-stats { grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: .8rem } .dash-stats .stat { min-height: 142px; padding: 1.15rem; border-radius: 20px; background: linear-gradient(150deg, color-mix(in srgb, var(--card) 93%, transparent), color-mix(in srgb, var(--surface-alt) 82%, transparent)); box-shadow: 0 12px 35px rgba(29, 27, 74, .07) } .dash-stats .stat:nth-child(2) .stat-icon { color: #f59e0b; background: rgba(245, 158, 11, .12) } .dash-stats .stat:nth-child(3) .stat-icon { color: #10b981; background: rgba(16, 185, 129, .12) } .dash-stats .stat:nth-child(4) .stat-icon { color: #0ea5e9; background: rgba(14, 165, 233, .12) } .dash-stats .stat:nth-child(5) .stat-icon { color: #ec4899; background: rgba(236, 72, 153, .12) } .ud-quick-actions { margin-top: 1.5rem } .ud-quick-actions>h3 { font-size: 1.05rem } .ud-qa-card { background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--violet) 5%, var(--card))); border-radius: 22px } .ud-wishlist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem } .ud-wishlist-card { position: relative; display: grid; grid-template-columns: 76px 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, var(--card), color-mix(in srgb, var(--surface-alt) 88%, transparent)); transition: .28s ease } .ud-wishlist-card:hover { transform: translateY(-4px); border-color: rgba(124, 92, 255, .35); box-shadow: 0 18px 40px rgba(124, 92, 255, .1) } .ud-wishlist-card.is-removing { opacity: 0; transform: scale(.94) } .ud-wishlist-art { width: 76px; height: 76px; border-radius: 19px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #7c5cff, #4f46e5) } .ud-wishlist-art.is-pack { background: linear-gradient(135deg, #ec4899, #f97316) } .ud-wishlist-info span { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) } .ud-wishlist-info h3 { font-size: 1rem; margin: .25rem 0 } .ud-wishlist-info h3 a { color: var(--ink-strong); text-decoration: none } .ud-wishlist-info strong { color: var(--violet); font-size: .85rem } .ud-avatar-picker { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .65rem } .ud-avatar-option { width: 56px; height: 56px; border: 3px solid transparent; border-radius: 18px; color: #fff; font-weight: 900; cursor: pointer; box-shadow: 0 8px 20px rgba(29, 27, 74, .15); transition: .2s ease } .ud-avatar-option:hover { transform: translateY(-3px) } .ud-avatar-option.is-selected { border-color: var(--card); outline: 3px solid var(--violet); transform: translateY(-3px) scale(1.04) } .ud-2fa-form { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line) } .ud-security-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; margin-bottom: 1rem; padding: 1rem; border: 1px solid rgba(124, 92, 255, .17); border-radius: 19px; background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(56, 189, 248, .05)) } .ud-security-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: linear-gradient(135deg, #7c5cff, #4f46e5); color: #fff; box-shadow: 0 9px 22px rgba(124, 92, 255, .25) } .ud-security-card h3 { margin: .2rem 0; font-size: 1rem } .ud-security-card p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.5 } .ud-security-status { display: inline-flex; padding: .22rem .5rem; border-radius: 99px; background: rgba(245, 158, 11, .13); color: #d97706; font-size: .65rem; font-weight: 900; text-transform: uppercase; letter-spacing: .07em } .ud-security-status.is-on { background: rgba(16, 185, 129, .13); color: #059669 } .auth-2fa-wrap { position: relative } .auth-badge { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 18px; background: linear-gradient(135deg, #7c5cff, #2563eb); color: #fff; box-shadow: 0 13px 30px rgba(124, 92, 255, .3) } [data-theme="dark"] .wishlist-toggle { background: rgba(24, 26, 49, .9); color: #cbd5e1 } [data-theme="dark"] .wishlist-toggle.is-saved { background: rgba(73, 22, 46, .75); color: #fb7185 } [data-theme="dark"] .ud-profile-card, [data-theme="dark"] .ud-nav, [data-theme="dark"] .ud-main { background: rgba(15, 18, 37, .78) } @keyframes udOrb { to { transform: translate3d(80px, 40px, 0) scale(1.14) } } @keyframes udPaneIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } @media(max-width:1180px) { .dash-stats { grid-template-columns: repeat(3, 1fr) } .ud-wishlist-grid { grid-template-columns: 1fr } } @media(max-width:980px) { .ud-side { position: static } .ud-profile-card { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left } .ud-profile-card .dash-av { grid-row: span 3; margin: 0 1rem 0 0 } .ud-email { justify-content: flex-start } .ud-nav { flex-direction: row; overflow-x: auto; scrollbar-width: none } .ud-nav-btn { width: auto; min-width: max-content } .ud-side-acts { display: none } } @media(max-width:650px) { .ud-wrap { padding-top: 1rem } .ud-main { padding: 1rem; border-radius: 22px } .dash-stats { grid-template-columns: repeat(2, 1fr) } .dash-stats .stat { min-height: 125px } .ud-qa-grid { grid-template-columns: 1fr } .ud-wishlist-card { grid-template-columns: 58px 1fr auto } .ud-wishlist-art { width: 58px; height: 58px } .ud-profile-card { padding: 1.1rem } .ud-profile-card .dash-av { width: 62px; height: 62px } .wishlist-detail { width: 100% } } @media(prefers-reduced-motion:reduce) { .ud-bg-shape, .ud-main>.tab-pane.on { animation: none !important } .wishlist-toggle, .ud-wishlist-card, .wishlist-toast { transition: none !important } } /* ================================================================ ACCOUNT WORKSPACE V3 — top dock, cinematic hero and bento canvas ================================================================ */ .ud-v3 { --ud-ink: #10142d; --ud-soft: #69708a; --ud-line: rgba(83, 68, 166, .13); --ud-glass: rgba(255, 255, 255, .76); position: relative; min-height: 85vh; padding: clamp(1.25rem, 3vw, 2.75rem) 0 5rem; isolation: isolate; overflow: visible } /* Pull only the dashboard atmosphere into the global navbar-clearance space. The content stays in place while the flare continues upward without a seam. */ .ud-v3 .ud-bg { position: absolute; top: -92px; right: 0; bottom: 0; left: 0; pointer-events: none; overflow: hidden; z-index: -1; mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .72) 58px, #000 150px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .72) 58px, #000 150px) } .ud-v3-grid { position: absolute; inset: 0; opacity: .34; background-image: linear-gradient(rgba(99, 76, 189, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 76, 189, .055) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, #000, transparent 78%) } .ud-v3 .ud-bg-shape { filter: blur(28px); opacity: .55 } .ud-v3 .ud-bg-shape.shape-1 { top: -245px } .ud-v3-hero { min-height: 370px; position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .7fr) 150px; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4.5rem); border: 1px solid rgba(255, 255, 255, .72); border-radius: 38px; color: #fff; overflow: hidden; box-shadow: 0 32px 80px rgba(38, 29, 92, .24), inset 0 1px rgba(255, 255, 255, .26); background: radial-gradient(circle at 74% 16%, rgba(146, 112, 255, .52), transparent 27%), radial-gradient(circle at 10% 100%, rgba(31, 207, 223, .24), transparent 32%), linear-gradient(125deg, #141735 0%, #27235f 52%, #5540b6 100%) } .ud-v3-hero::before { content: ''; position: absolute; width: 340px; height: 340px; right: 14%; top: -55%; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .018) } .ud-v3-copy, .ud-v3-identity, .ud-v3-hero-rail { position: relative; z-index: 1 } .ud-v3-copy .ud-kicker { color: #d8d3ff; border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08) } .ud-v3-copy h1 { max-width: 650px; margin: .75rem 0 1rem; color: #fff; font-size: clamp(2.45rem, 5.1vw, 4.85rem); line-height: .96; letter-spacing: -.065em } .ud-v3-copy h1 em { color: #bfb3ff; font-style: normal; font-weight: inherit } .ud-v3-copy h1 .ud-v3-greeting-name { display: inline-block; max-width: 100%; margin-left: .24em; overflow: visible; color: #cfc4ff; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 1em; font-weight: 700; line-height: 1; letter-spacing: -.055em; vertical-align: baseline; white-space: nowrap; text-shadow: 0 8px 24px rgba(10, 6, 43, .28); transform: rotate(-1deg) } .ud-v3-copy p { max-width: 570px; color: rgba(235, 235, 255, .73); font-size: 1.03rem; line-height: 1.75 } .ud-v3-actions { display: flex; gap: .75rem; margin-top: 1.6rem; flex-wrap: wrap } .ud-v3-actions .btn-glass { color: #fff; border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .09) } .ud-v3-identity { min-height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center } .ud-v3-avatar { width: 108px; height: 108px; position: relative; z-index: 2; display: grid; place-items: center; border: 7px solid rgba(255, 255, 255, .14); border-radius: 34px; font-size: 2.1rem; font-weight: 800; box-shadow: 0 22px 45px rgba(8, 8, 32, .35); transform: rotate(-3deg); animation: udV3Avatar 5s ease-in-out infinite } .ud-v3-person { display: flex; flex-direction: column; margin-top: 1.05rem } .ud-v3-person span, .ud-v3-person small { color: rgba(235, 235, 255, .62); font-size: .76rem } .ud-v3-person strong { margin: .15rem 0; color: #fff; font-size: 1.1rem } .ud-v3-presence, .ud-v3-member { display: inline-flex; align-items: center; gap: .4rem; color: #ddd9ff; font-size: .71rem } .ud-v3-presence { margin-top: .8rem; padding: .38rem .65rem; border: 1px solid rgba(255, 255, 255, .15); border-radius: 99px; background: rgba(255, 255, 255, .07) } .ud-v3-presence i, .ud-v3-live i { width: 6px; height: 6px; border-radius: 50%; background: #52e6a2; box-shadow: 0 0 0 5px rgba(82, 230, 162, .11); animation: udV3Pulse 2s infinite } .ud-v3-member { margin-top: .7rem } .ud-v3-orbit { position: absolute; border: 1px solid rgba(255, 255, 255, .15); border-radius: 50%; animation: udV3Orbit 18s linear infinite } .ud-v3-orbit::after { content: ''; position: absolute; top: 20%; left: 4%; width: 8px; height: 8px; border-radius: 50%; background: #a99aff; box-shadow: 0 0 17px #a99aff } .orbit-one { width: 218px; height: 218px } .orbit-two { width: 270px; height: 270px; animation-direction: reverse; animation-duration: 25s } .ud-v3-hero-rail { align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: .7rem } .ud-v3-hero-rail>div { display: grid; grid-template-columns: 34px 1fr; padding: .85rem; border: 1px solid rgba(255, 255, 255, .12); border-radius: 17px; background: rgba(255, 255, 255, .07); backdrop-filter: blur(12px) } .ud-v3-hero-rail>div>span { grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: #d5ceff; background: rgba(255, 255, 255, .1) } .ud-v3-hero-rail small { color: rgba(235, 235, 255, .56); font-size: .65rem } .ud-v3-hero-rail strong { color: #fff; font-size: .86rem } .ud-v3-dock-wrap { position: sticky; top: 75px; z-index: 20; display: flex; align-items: center; gap: .7rem; width: max-content; max-width: calc(100% - 2rem); margin: -24px auto 2rem; padding: .45rem; border: 1px solid rgba(255, 255, 255, .88); border-radius: 21px; background: rgba(251, 251, 255, .82); box-shadow: 0 16px 45px rgba(33, 27, 73, .14); backdrop-filter: blur(22px) saturate(1.35) } .ud-v3 .ud-nav.ud-v3-dock { display: flex; flex-direction: row; gap: .22rem; width: auto; padding: 0; border: 0; box-shadow: none; background: none; overflow-x: auto; scrollbar-width: none } .ud-v3 .ud-nav-btn { width: auto; min-width: max-content; display: flex; gap: .45rem; padding: .72rem .85rem; border-radius: 14px; color: #666b82; font-size: .78rem; font-weight: 700; border: 0; background: transparent } .ud-v3 .ud-nav-btn::before { display: none } .ud-v3 .ud-nav-btn:hover { color: #4c3ca0; background: #f0edff; transform: none } .ud-v3 .ud-nav-btn.on { color: #fff; background: linear-gradient(135deg, #5f49c9, #7b61df); box-shadow: 0 8px 18px rgba(95, 73, 201, .25) } .ud-v3 .ud-icon { width: auto; height: auto; background: none; color: inherit } .ud-v3 .ud-nav-count { min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border-radius: 99px; color: inherit; background: rgba(127, 104, 213, .12); font-size: .65rem } .ud-v3 .ud-nav-btn.on .ud-nav-count { background: rgba(255, 255, 255, .2) } .ud-v3-dock-acts { display: flex; gap: .3rem; padding-left: .5rem; border-left: 1px solid var(--ud-line) } .ud-v3-dock-acts a { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 12px; color: #716b87; background: #f1eff9 } .ud-v3-dock-acts a:last-child:hover { color: #d7335c; background: #fff0f3 } .ud-v3 .ud-shell { display: block; margin: 0 } .ud-v3 .ud-main { min-height: 650px; padding: 0; border: 0; border-radius: 0; overflow: visible; background: transparent; box-shadow: none } .ud-v3 .ud-main::before { display: none } .ud-v3-section-head { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin: 2.5rem 0 1.35rem } .ud-v3-section-head span, .ud-v3 .ud-header::before { color: #7059ce; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase } .ud-v3-section-head h2 { margin: .28rem 0 0; color: var(--ud-ink); font-size: clamp(1.65rem, 3vw, 2.45rem); letter-spacing: -.04em } .ud-v3-section-head>p { max-width: 360px; margin: 0; color: var(--ud-soft); text-align: right; line-height: 1.6 } .ud-v3-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem } .ud-v3-bento>article, .ud-v3-mini-card { position: relative; overflow: hidden; border: 1px solid var(--ud-line); border-radius: 26px; background: var(--ud-glass); box-shadow: 0 16px 40px rgba(43, 35, 88, .075); backdrop-filter: blur(15px); transition: transform .3s ease, box-shadow .3s ease } .ud-v3-bento>article:hover, .ud-v3-mini-card:hover { transform: translateY(-4px); box-shadow: 0 23px 50px rgba(43, 35, 88, .13) } .ud-v3-value-card { grid-column: span 5; grid-row: span 2; min-height: 335px; padding: 1.55rem; color: #fff; background: radial-gradient(circle at 90% 0, rgba(255, 255, 255, .22), transparent 27%), linear-gradient(145deg, #533dba, #7964df) !important } .ud-v3-progress-card { grid-column: span 7; padding: 1.55rem } .ud-v3-mini-card { grid-column: span 3; min-height: 155px; display: flex; flex-direction: column; align-items: flex-start; padding: 1.3rem; color: var(--ud-ink); text-align: left; cursor: pointer } .ud-v3-security-card { grid-column: span 6; display: grid; grid-template-columns: auto 1fr auto; gap: 1.1rem; align-items: center; padding: 1.5rem } .ud-v3-discover-card { grid-column: span 6; display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1.5rem } .ud-v3-card-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem } .ud-v3-card-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; color: #765fd2; background: #eeebff } .ud-v3-value-card .ud-v3-card-icon { color: #fff; background: rgba(255, 255, 255, .14) } .ud-v3-live { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: rgba(255, 255, 255, .72) } .ud-v3-value-card>small { display: block; margin-top: 1.4rem; color: rgba(255, 255, 255, .62) } .ud-v3-value-card>strong { display: block; margin-top: .2rem; font-size: clamp(2.1rem, 4vw, 3.35rem); letter-spacing: -.06em } .ud-v3-value-card>p { margin: 1rem 0 0; color: rgba(255, 255, 255, .65); font-size: .78rem } .ud-v3-bars { height: 70px; display: flex; align-items: end; gap: 7px; margin-top: 1rem } .ud-v3-bars i { flex: 1; height: 28%; border-radius: 6px 6px 2px 2px; background: rgba(255, 255, 255, .2); animation: udV3Bars 3.4s ease-in-out infinite alternate } .ud-v3-bars i:nth-child(2) { height: 52%; animation-delay: -.8s } .ud-v3-bars i:nth-child(3) { height: 38%; animation-delay: -1.4s } .ud-v3-bars i:nth-child(4) { height: 82%; animation-delay: -.3s } .ud-v3-bars i:nth-child(5) { height: 62%; animation-delay: -1.8s } .ud-v3-bars i:nth-child(6) { height: 92%; animation-delay: -1s } .ud-v3-bars i:nth-child(7) { height: 75%; animation-delay: -2s } .ud-v3-progress-card .ud-v3-card-top button { display: flex; align-items: center; gap: .3rem; border: 0; background: none; color: #7059ce; font-weight: 700; cursor: pointer } .ud-v3-progress-card h3 { margin: 1.25rem 0 .35rem; color: var(--ud-ink); font-size: 1.35rem } .ud-v3-progress-card p { margin: 0; color: var(--ud-soft); font-size: .85rem } .ud-v3-progress-track { height: 8px; margin: 1.55rem 0 1rem; overflow: hidden; border-radius: 99px; background: #eae7f5 } .ud-v3-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6952d0, #a483f3); box-shadow: 0 0 16px rgba(105, 82, 208, .35); animation: udV3Track 1.2s cubic-bezier(.2, .8, .2, 1) both } .ud-v3-progress-meta { display: flex; justify-content: space-between; gap: .6rem; color: var(--ud-soft); font-size: .72rem } .ud-v3-progress-meta b { display: block; color: var(--ud-ink); font-size: 1rem } .ud-v3-mini-card>span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #dc4776; background: #fff0f6 } .ud-v3-packs>span { color: #5676d6; background: #edf2ff } .ud-v3-mini-card small { margin-top: .8rem; color: var(--ud-soft) } .ud-v3-mini-card strong { font-size: 1.8rem; color: var(--ud-ink) } .ud-v3-mini-card em { margin-top: auto; color: #7b6f9c; font-size: .7rem; font-style: normal } .ud-v3-security-ring { width: 65px; height: 65px; display: grid; place-items: center; border: 1px solid #cfc7f7; border-radius: 50%; color: #664dc8; background: #f0edff; box-shadow: inset 0 0 0 7px rgba(105, 82, 208, .07) } .ud-v3-security-card small, .ud-v3-discover-card small { color: #7059ce; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em } .ud-v3-security-card h3, .ud-v3-discover-card h3 { margin: .2rem 0; color: var(--ud-ink); font-size: 1rem } .ud-v3-security-card p, .ud-v3-discover-card p { margin: 0; color: var(--ud-soft); font-size: .76rem } /* Unified content panes */ .ud-v3 .tab-pane:not([data-pane="overview"]) { padding: clamp(1.2rem, 3vw, 2.35rem); border: 1px solid var(--ud-line); border-radius: 30px; background: var(--ud-glass); box-shadow: 0 20px 55px rgba(43, 35, 88, .08); backdrop-filter: blur(17px) } .ud-v3 .ud-header { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 1.7rem; padding-bottom: 1.15rem; border-bottom: 1px solid var(--ud-line) } .ud-v3 .ud-header::before { content: 'Aegon workspace'; position: absolute } .ud-v3 .ud-header h2 { margin: 1.2rem 0 0; color: var(--ud-ink); font-size: clamp(1.55rem, 3vw, 2.15rem); letter-spacing: -.035em } .ud-v3 .ud-header p { max-width: 430px; margin: 0; color: var(--ud-soft); text-align: right } .ud-v3 .table-wrap { border: 1px solid var(--ud-line); border-radius: 20px; background: rgba(255, 255, 255, .53) } .ud-v3 table.data thead { background: #f2f0fa } .ud-v3 table.data th { color: #716987; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase } .ud-v3 table.data td { border-color: var(--ud-line) } .ud-v3 .mypack-row, .ud-v3 .ud-wishlist-card { border: 1px solid var(--ud-line); border-radius: 20px; background: rgba(255, 255, 255, .57); box-shadow: none; transition: transform .25s ease, border-color .25s ease } .ud-v3 .mypack-row:hover, .ud-v3 .ud-wishlist-card:hover { transform: translateY(-3px); border-color: rgba(109, 82, 208, .28) } .ud-v3 .ud-wishlist-card { border-radius: 22px } .ud-v3 .ud-wishlist-art { border-radius: 16px } .ud-v3 .empty-state { min-height: 350px; border: 1px dashed rgba(105, 82, 208, .24); border-radius: 24px; background: rgba(246, 244, 255, .48) } .ud-v3 [data-pane="profile"]>.panel, .ud-v3 [data-pane="security"]>.panel { max-width: none !important; display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid var(--ud-line); border-radius: 23px; background: rgba(255, 255, 255, .55); box-shadow: none } .ud-v3 [data-pane="security"]>.panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.3rem; align-items: start } .ud-v3 [data-pane="security"]>.panel>form { height: 100%; padding: 1.25rem; border: 1px solid var(--ud-line); border-radius: 18px; background: rgba(255, 255, 255, .62) } .ud-v3 .ud-avatar-picker { justify-content: flex-start } .ud-v3 .ud-avatar-option { transition: transform .25s ease, box-shadow .25s ease } .ud-v3 .ud-avatar-option:hover { transform: translateY(-4px) rotate(3deg) } [data-theme="dark"] .ud-v3 { --ud-ink: #f3f0ff; --ud-soft: #aaa6c1; --ud-line: rgba(177, 160, 255, .14); --ud-glass: rgba(18, 20, 39, .78) } [data-theme="dark"] .ud-v3-dock-wrap { border-color: rgba(255, 255, 255, .1); background: rgba(18, 20, 38, .83) } [data-theme="dark"] .ud-v3 .ud-nav-btn { color: #b5afc8 } [data-theme="dark"] .ud-v3 .ud-nav-btn:hover { color: #ddd6ff; background: #2b2748 } [data-theme="dark"] .ud-v3-dock-acts a { color: #bab3ce; background: #282541 } [data-theme="dark"] .ud-v3 .table-wrap, [data-theme="dark"] .ud-v3 .mypack-row, [data-theme="dark"] .ud-v3 .ud-wishlist-card, [data-theme="dark"] .ud-v3 [data-pane="profile"]>.panel, [data-theme="dark"] .ud-v3 [data-pane="security"]>.panel, [data-theme="dark"] .ud-v3 [data-pane="security"]>.panel>form { background: rgba(25, 27, 48, .68) } [data-theme="dark"] .ud-v3 table.data thead { background: #25233d } [data-theme="dark"] .ud-v3 .empty-state { background: rgba(28, 27, 49, .46) } @keyframes udV3Avatar { 0%, 100% { transform: translateY(0) rotate(-3deg) } 50% { transform: translateY(-9px) rotate(2deg) } } @keyframes udV3Orbit { to { transform: rotate(360deg) } } @keyframes udV3Pulse { 50% { opacity: .45; box-shadow: 0 0 0 8px rgba(82, 230, 162, 0) } } @keyframes udV3Bars { to { transform: scaleY(.65); opacity: .65 } } @keyframes udV3Track { from { width: 0 } } @media(max-width:1050px) { .ud-v3-hero { grid-template-columns: 1.2fr .8fr } .ud-v3-hero-rail { grid-column: 1/-1; flex-direction: row } .ud-v3-hero-rail>div { flex: 1 } .ud-v3-dock-wrap { width: calc(100% - 1.5rem) } .ud-v3 .ud-nav.ud-v3-dock { flex: 1 } .ud-v3-value-card { grid-column: span 5 } .ud-v3-progress-card { grid-column: span 7 } .ud-v3-mini-card { grid-column: span 3 } } @media(max-width:780px) { .ud-v3 { padding-top: .8rem } .ud-v3 .ud-bg { top: -76px; mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .72) 45px, #000 125px); -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, .72) 45px, #000 125px) } .ud-v3-hero { min-height: 0; grid-template-columns: 1fr; padding: 2rem; border-radius: 28px } .ud-v3-copy { text-align: center } .ud-v3-copy p { margin-inline: auto } .ud-v3-actions { justify-content: center } .ud-v3-identity { min-height: 230px } .ud-v3-hero-rail { display: grid; grid-template-columns: repeat(3, 1fr) } .ud-v3-hero-rail>div { display: flex; flex-direction: column; align-items: center; text-align: center } .ud-v3-hero-rail>div>span { grid-row: auto } .ud-v3-dock-wrap { top: 68px; margin-top: -14px; overflow: hidden } .ud-v3-dock-acts { display: none } .ud-v3 .ud-nav-btn { flex-direction: column; gap: .2rem; min-height: 44px; padding: .42rem .68rem; font-size: .65rem } .ud-v3 .ud-nav-count { position: absolute; margin: -8px 0 0 25px } .ud-v3-section-head { align-items: start; flex-direction: column; gap: .5rem } .ud-v3-section-head>p, .ud-v3 .ud-header p { text-align: left } .ud-v3-value-card, .ud-v3-progress-card { grid-column: span 12 } .ud-v3-mini-card { grid-column: span 6 } .ud-v3-security-card, .ud-v3-discover-card { grid-column: span 12 } .ud-v3 [data-pane="security"]>.panel { grid-template-columns: 1fr } .ud-v3 .ud-header { align-items: start; flex-direction: column; gap: .4rem } .ud-v3 .table-wrap { border-radius: 16px } } @media(max-width:520px) { .ud-v3-hero { padding: 1.5rem } .ud-v3-copy h1 { font-size: 2.55rem } .ud-v3-copy p { font-size: .88rem } .ud-v3-actions .btn { flex: 1 } .ud-v3-hero-rail { gap: .4rem } .ud-v3-hero-rail>div { padding: .65rem .3rem } .ud-v3-hero-rail small { display: none } .ud-v3-dock-wrap { max-width: calc(100% - .7rem); width: calc(100% - .7rem); padding: .3rem; border-radius: 17px } .ud-v3 .ud-nav-btn { padding: .55rem .65rem } .ud-v3 .ud-nav-btn span:not(.ud-icon):not(.ud-nav-count) { display: none } .ud-v3 .ud-nav-btn .ud-icon { width: 24px; height: 24px } .ud-v3-mini-card { grid-column: span 6 } .ud-v3-security-card, .ud-v3-discover-card { grid-template-columns: 1fr; text-align: left } .ud-v3-security-ring { width: 52px; height: 52px } .ud-v3 .tab-pane:not([data-pane="overview"]) { padding: 1rem; border-radius: 22px } .ud-v3 .order-acts { min-width: 145px } } /* V3 polish: safe spacing for names, headings and controls */ .ud-v3-copy { min-width: 0 } .ud-v3-copy h1 { overflow-wrap: anywhere; text-wrap: balance } .ud-v3-person { width: 100%; min-width: 0; padding-inline: .5rem } .ud-v3-person strong, .ud-v3-person small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .ud-v3-person strong { line-height: 1.35 } .ud-v3-person .ud-v3-name { width: 100%; margin: .25rem 0 .18rem; overflow: visible; color: #fff; font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-size: 1.35rem; font-weight: 750; line-height: 1.08; letter-spacing: -.035em; text-align: center; text-overflow: clip; text-shadow: 0 5px 20px rgba(11, 7, 48, .28); white-space: nowrap } .ud-v3-person small { line-height: 1.55 } .ud-v3 .ud-header { position: relative; min-height: 82px; padding-top: 1.45rem } .ud-v3 .ud-header::before { top: 0; left: 0; line-height: 1 } .ud-v3 .ud-header h2, .ud-v3 .ud-header p { min-width: 0 } .ud-v3 .btn, .ud-v3 button { line-height: 1.25 } .ud-v3 .btn { min-height: 40px; white-space: normal; text-align: center } .ud-v3-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding-inline: 1rem } .ud-v3-security-card>.btn, .ud-v3-discover-card>.btn { min-width: max-content } .ud-v3 .order-acts { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap } .ud-v3 .order-acts form, .ud-v3 .order-acts form .btn { margin: 0 } .ud-v3-dock-wrap { min-width: min(780px, calc(100% - 2rem)); padding: .24rem .32rem; border-radius: 17px } .ud-v3-dock-acts { padding-left: .35rem } .ud-v3-dock-acts a { flex: 0 0 34px } .ud-v3 .ud-nav-btn { position: relative; justify-content: center; flex: 1 1 0; min-height: 36px; padding: .42rem .85rem; border-radius: 12px; line-height: 1.1 } .ud-v3 .ud-nav.ud-v3-dock { flex: 1; justify-content: space-between; gap: .3rem } .ud-v3-dock-acts a { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px } @media(max-width:1050px) and (min-width:781px) { .ud-v3-hero { grid-template-columns: minmax(0, 1.05fr) minmax(250px, .75fr) } .ud-v3-copy h1 { font-size: clamp(2.6rem, 5.8vw, 4rem) } } @media(max-width:780px) { .ud-v3 .ud-header { min-height: 0; padding-top: 1.5rem } .ud-v3-copy h1 .ud-v3-greeting-name { display: block; width: 100%; max-width: 100%; margin: .12em 0 0; overflow: visible; font-size: clamp(1.65rem, 10vw, 3.7rem); text-align: center; white-space: nowrap } .ud-v3-security-card>.btn, .ud-v3-discover-card>.btn { min-width: 0; width: max-content; max-width: 100% } } @media(max-width:520px) { .ud-v3-copy h1 { line-height: 1.03; letter-spacing: -.05em } .ud-v3-actions { gap: .55rem } .ud-v3-actions .btn { flex: 1 1 140px; min-width: 0; padding: .75rem .65rem } .ud-v3-hero-rail strong { font-size: .75rem } .ud-v3 .ud-nav-btn { min-width: 45px } } @media(prefers-reduced-motion:reduce) { .ud-v3 * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important } .ud-v3-bento>article, .ud-v3-mini-card, .ud-v3 .mypack-row { transition: none !important } } /* ================================================================ ACCOUNT WORKSPACE V4 - professional desktop dashboard ================================================================ */ @media (min-width:1025px) { .ud-v3 { --ud-ink: #172033; --ud-soft: #687386; --ud-line: #e3e8f0; --ud-panel: #fff; --ud-subtle: #f6f8fb; --ud-primary: #5146d8; --ud-primary-soft: #eeecff; --ud-cyan: #0786a8; --ud-green: #14805e; --ud-red: #c43e5c; min-height: 86vh; padding: 1.4rem 0 5rem; overflow: visible; background: #f4f6fa } .ud-v3>.ud-bg, .ud-v3>#dashTabs, .ud-v3>.ma-account, .ud-v3>.ma-back-button, .ud-v3 .mo-orders { display: none !important } .ud-v3>.ud-v3-hero, .ud-v3>.ud-v3-dock-wrap, .ud-v3>.ud-v3-shell { width: min(1240px, calc(100% - 48px)); margin-right: auto; margin-left: auto } .ud-v3-hero { min-height: 258px; grid-template-columns: minmax(0, 1.55fr) minmax(240px, .62fr) minmax(190px, .45fr); gap: 2rem; padding: 2.25rem 2.5rem; border: 1px solid #28314a; border-radius: 8px; background: #182035; box-shadow: 0 18px 45px rgba(24, 32, 53, .16) } .ud-v3-hero::before { width: 380px; height: 380px; top: -245px; right: 21%; border-color: rgba(255, 255, 255, .08); box-shadow: 0 0 0 64px rgba(255, 255, 255, .018), 0 0 0 128px rgba(255, 255, 255, .012) } .ud-v3-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, #6857e7 0 33%, #12a9a0 33% 66%, #e3a11a 66%) } .ud-v3-copy .ud-kicker { display: inline-flex; align-items: center; gap: .45rem; padding: .38rem .58rem; border: 1px solid rgba(255, 255, 255, .13); border-radius: 5px; color: #c9d1e5; background: rgba(255, 255, 255, .05); font-size: .7rem; letter-spacing: .07em; text-transform: uppercase } .ud-v3-copy h1 { max-width: 720px; margin: .8rem 0 .65rem; font-size: clamp(2rem, 3vw, 3rem); line-height: 1.08; letter-spacing: 0 } .ud-v3-copy h1 .ud-v3-greeting-name { display: inline; margin: 0; color: #aeb8ff; font-family: inherit; font-size: inherit; font-weight: 750; line-height: inherit; letter-spacing: 0; white-space: normal; text-shadow: none; transform: none } .ud-v3-copy p { max-width: 650px; margin: 0; color: #aeb7ca; font-size: .91rem; line-height: 1.65 } .ud-v3-actions { gap: .6rem; margin-top: 1.25rem } .ud-v3-actions .btn { min-height: 38px; padding: .62rem .9rem; border-radius: 6px; font-size: .76rem } .ud-v3-actions .btn-navy { border-color: #7166e9; background: #6257de; box-shadow: 0 8px 18px rgba(81, 70, 216, .24) } .ud-v3-actions .btn-glass { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06) } .ud-v3-identity { min-height: 180px; align-items: flex-start; padding: 1.1rem 1.2rem; border-left: 1px solid rgba(255, 255, 255, .1); text-align: left } .ud-v3-orbit { display: none } .ud-v3-avatar { width: 64px; height: 64px; border: 3px solid rgba(255, 255, 255, .18); border-radius: 8px; font-size: 1.22rem; box-shadow: 0 10px 24px rgba(7, 11, 24, .28); transform: none; animation: none } .ud-v3-person { width: 100%; margin-top: .75rem; padding: 0 } .ud-v3-person .ud-v3-name { margin: .12rem 0; overflow: hidden; color: #fff; font-family: inherit; font-size: 1rem; font-weight: 750; line-height: 1.35; letter-spacing: 0; text-align: left; text-overflow: ellipsis; text-shadow: none } .ud-v3-person span, .ud-v3-person small { color: #9da8bd; font-size: .7rem } .ud-v3-presence, .ud-v3-member { margin-top: .55rem; color: #bec7d8; font-size: .66rem } .ud-v3-presence { padding: .3rem .5rem; border-radius: 5px } .ud-v3-presence i, .ud-v3-live i { animation: none } .ud-v3-hero-rail { gap: .5rem } .ud-v3-hero-rail>div { grid-template-columns: 30px 1fr; padding: .68rem .72rem; border-radius: 6px; background: rgba(255, 255, 255, .045) } .ud-v3-hero-rail>div>span { width: 25px; height: 25px; border-radius: 5px } .ud-v3-hero-rail small { font-size: .6rem } .ud-v3-hero-rail strong { font-size: .76rem } .ud-v3-dock-wrap { top: 76px; z-index: 30; min-width: 0; max-width: none; margin-top: 1rem; margin-bottom: 1.4rem; padding: .45rem; border: 1px solid var(--ud-line); border-radius: 8px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 24px rgba(37, 47, 67, .08); backdrop-filter: blur(16px) } .ud-v3 .ud-nav.ud-v3-dock { justify-content: flex-start; gap: .25rem } .ud-v3 .ud-nav-btn { flex: 0 1 auto; min-height: 40px; justify-content: flex-start; gap: .48rem; padding: .62rem .82rem; border-radius: 6px; color: #667085; font-size: .76rem } .ud-v3 .ud-nav-btn:hover { color: #30384a; background: #f3f5f8 } .ud-v3 .ud-nav-btn.on { color: #4338bd; background: var(--ud-primary-soft); box-shadow: inset 0 0 0 1px rgba(81, 70, 216, .12) } .ud-v3 .ud-nav-btn.on::after { content: ''; position: absolute; right: .7rem; bottom: 3px; left: .7rem; height: 2px; border-radius: 2px; background: var(--ud-primary) } .ud-v3 .ud-nav-count { color: #4338bd; background: #ddd9ff } .ud-v3-dock-acts { margin-left: auto; padding-left: .45rem } .ud-v3-dock-acts a { width: 36px; height: 36px; flex-basis: 36px; border-radius: 6px; color: #8a4455; background: #fff1f3 } .ud-v3 .ud-main { min-height: 560px } .ud-v3 .ud-main>.tab-pane.on { animation: udV4PaneIn .32s cubic-bezier(.2, .75, .25, 1) } .ud-v3-section-head { align-items: center; margin: .3rem 0 1rem; padding: 0 .1rem } .ud-v3-section-head span, .ud-v3 .ud-header::before { color: #6358ca; font-size: .66rem; letter-spacing: .1em } .ud-v3-section-head h2 { margin-top: .2rem; font-size: 1.55rem; letter-spacing: 0 } .ud-v3-section-head>p { max-width: 430px; font-size: .8rem; line-height: 1.5 } .ud-v3-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .8rem } .ud-v3-bento>article, .ud-v3-mini-card { border-radius: 8px; background: var(--ud-panel); box-shadow: 0 5px 18px rgba(31, 42, 61, .055); backdrop-filter: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease } .ud-v3-bento>article:hover, .ud-v3-mini-card:hover { transform: translateY(-2px); border-color: #cdd4df; box-shadow: 0 10px 26px rgba(31, 42, 61, .09) } .ud-v3-value-card { grid-column: span 4; grid-row: span 2; min-height: 286px; padding: 1.35rem; background: #5146c9 !important } .ud-v3-progress-card { grid-column: span 5; min-height: 153px; padding: 1.25rem } .ud-v3-mini-card { grid-column: span 3; min-height: 153px; padding: 1.15rem } .ud-v3-security-card, .ud-v3-discover-card { grid-column: span 4; grid-template-columns: auto 1fr; gap: .85rem; padding: 1.2rem } .ud-v3-security-card>.btn, .ud-v3-discover-card>.btn { grid-column: 2; width: max-content } .ud-v3-card-icon, .ud-v3-mini-card>span { width: 38px; height: 38px; border-radius: 7px } .ud-v3-value-card>small { margin-top: 1.05rem } .ud-v3-value-card>strong { font-size: 2.35rem; letter-spacing: 0 } .ud-v3-bars { height: 54px } .ud-v3-bars i { animation: none } .ud-v3-progress-card h3 { margin: .85rem 0 .25rem; font-size: 1.05rem } .ud-v3-progress-track { height: 6px; margin: 1rem 0 .75rem } .ud-v3-progress-track span { animation: udV4Track .75s cubic-bezier(.2, .8, .2, 1) both } .ud-v3-mini-card strong { font-size: 1.55rem } .ud-v3-security-ring { width: 50px; height: 50px; border-radius: 8px } .ud-v3-security-card h3, .ud-v3-discover-card h3 { font-size: .9rem } .ud-v3-security-card p, .ud-v3-discover-card p { line-height: 1.45 } .ud-v3 .tab-pane:not([data-pane="overview"]) { padding: 1.55rem; border: 1px solid var(--ud-line); border-radius: 8px; background: var(--ud-panel); box-shadow: 0 8px 24px rgba(31, 42, 61, .055); backdrop-filter: none } .ud-v3 .ud-header { min-height: 0; margin-bottom: 1.25rem; padding: 0 0 1rem; border-bottom: 1px solid var(--ud-line) } .ud-v3 .ud-header::before { position: static; display: block; margin-bottom: .3rem } .ud-v3 .ud-header h2 { margin: 0; color: var(--ud-ink); font-size: 1.42rem; letter-spacing: 0 } .ud-v3 .ud-header p { margin: .25rem 0 0; color: var(--ud-soft); font-size: .8rem } .ud-v3 [data-pane="orders"] .ud-header::before { content: 'Purchase history' } .ud-v3 [data-pane="packs"] .ud-header::before { content: 'Digital library' } .ud-v3 [data-pane="wishlist"] .ud-header::before { content: 'Saved resources' } .ud-v3 [data-pane="profile"] .ud-header::before { content: 'Account details' } .ud-v3 [data-pane="security"] .ud-header::before { content: 'Access protection' } .ud-v3 .table-wrap { overflow: hidden; border: 1px solid var(--ud-line); border-radius: 8px; box-shadow: none } .ud-v3 table.data { width: 100%; border-collapse: collapse } .ud-v3 table.data thead { background: var(--ud-subtle) } .ud-v3 table.data th { padding: .72rem .9rem; color: #737d8f; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase } .ud-v3 table.data td { padding: .9rem; border-top: 1px solid var(--ud-line); color: #596477; font-size: .77rem } .ud-v3 table.data tbody tr { transition: background .18s ease } .ud-v3 table.data tbody tr:hover { background: #fafbfe } .ud-v3 table.data td:first-child strong, .ud-v3 table.data td:nth-child(4) strong { color: var(--ud-ink) } .ud-v3 .status { display: inline-flex; align-items: center; min-height: 24px; padding: .25rem .48rem; border-radius: 5px; font-size: .64rem; font-weight: 800; text-transform: capitalize } .ud-v3 .order-acts { flex-wrap: nowrap } .ud-v3 .order-acts .btn { min-height: 31px; display: inline-flex; align-items: center; gap: .3rem; padding: .42rem .55rem; border-radius: 5px; font-size: .66rem; white-space: nowrap } .ud-v3 .ud-packs-grid { display: grid; gap: .65rem } .ud-v3 .mypack-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .9rem; border: 1px solid var(--ud-line); border-radius: 8px; background: #fff; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease } .ud-v3 .mypack-row:hover { transform: translateX(2px); border-color: #cbd2de; box-shadow: 0 6px 18px rgba(31, 42, 61, .06) } .ud-v3 .mp-ico { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 7px; color: #0786a8; background: #e9f7fa } .ud-v3 .mypack-row h4 { margin: 0 0 .2rem; color: var(--ud-ink); font-size: .86rem } .ud-v3 .mypack-row .meta { color: var(--ud-soft); font-size: .7rem } .ud-v3 .mypack-row .acts { display: flex; gap: .4rem } .ud-v3 .mypack-row .btn { min-height: 32px; border-radius: 5px } .ud-v3 .ud-wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem } .ud-v3 .ud-wishlist-card { grid-template-columns: 58px minmax(0, 1fr) auto; gap: .8rem; padding: .85rem; border-radius: 8px; background: #fff; box-shadow: none } .ud-v3 .ud-wishlist-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(31, 42, 61, .07) } .ud-v3 .ud-wishlist-art { width: 58px; height: 58px; border-radius: 7px; background: #5146c9 } .ud-v3 .ud-wishlist-art.is-pack { background: #c44d6f } .ud-v3 .ud-wishlist-info span { font-size: .6rem; letter-spacing: .07em } .ud-v3 .ud-wishlist-info h3 { margin: .2rem 0; font-size: .86rem } .ud-v3 .ud-wishlist-card>.wishlist-toggle { width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 6px; box-shadow: none } .ud-v3 .empty-state { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem; border: 1px dashed #ccd4e0; border-radius: 8px; background: var(--ud-subtle); text-align: center } .ud-v3 .empty-state .big { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 8px; color: var(--ud-primary); background: var(--ud-primary-soft) } .ud-v3 .empty-state h3 { margin: .9rem 0 .3rem; color: var(--ud-ink); font-size: 1rem } .ud-v3 .empty-state p { margin: 0 0 1rem; color: var(--ud-soft); font-size: .78rem } .ud-v3 .ud-profile-panel, .ud-v3 .ud-security-panel { max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none } .ud-v3 .ud-profile-panel>form { max-width: 760px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.15rem } .ud-v3 .ud-profile-panel>form>.field:nth-of-type(3), .ud-v3 .ud-profile-panel>form>.btn { grid-column: 1 / -1 } .ud-v3 .ud-security-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem } .ud-v3 .ud-security-panel>form { padding: 1.2rem; border: 1px solid var(--ud-line); border-radius: 8px; background: var(--ud-subtle) } .ud-v3 .ud-security-panel>.ud-2fa-form { margin: 0; padding-top: 1.2rem; border-top: 1px solid var(--ud-line) } .ud-v3 .field { margin: 0 } .ud-v3 .field label { display: block; margin-bottom: .38rem; color: #485468; font-size: .69rem; font-weight: 750 } .ud-v3 .field input, .ud-v3 .field select { min-height: 43px; border: 1px solid #cfd6e1; border-radius: 6px; background: #fff; color: var(--ud-ink); box-shadow: none; transition: border-color .18s ease, box-shadow .18s ease } .ud-v3 .field input:focus, .ud-v3 .field select:focus { border-color: #7166e9; box-shadow: 0 0 0 3px rgba(81, 70, 216, .11) } .ud-v3 .field input:disabled { color: #8a94a5; background: #f0f2f6 } .ud-v3 .ud-avatar-picker { gap: .55rem } .ud-v3 .ud-avatar-option { width: 48px; height: 48px; border-width: 2px; border-radius: 7px; box-shadow: none } .ud-v3 .ud-avatar-option:hover { transform: translateY(-2px) } .ud-v3 .ud-avatar-option.is-selected { border-color: #fff; outline: 2px solid var(--ud-primary); transform: none } .ud-v3 .ud-security-card { margin-bottom: 1rem; border-radius: 7px; background: #f0edff } .ud-v3 .ud-security-icon { border-radius: 7px; background: #5146c9; box-shadow: none } .ud-v3 .ud-security-status { border-radius: 4px } .ud-v3 .btn:not(.ud-nav-btn) { border-radius: 6px } .ud-v3 .btn-navy { background: #5146c9 } [data-theme="dark"] .ud-v3 { --ud-ink: #eef1f7; --ud-soft: #99a4b7; --ud-line: #303849; --ud-panel: #181e2a; --ud-subtle: #202735; --ud-primary-soft: #2b2854; background: #111620 } [data-theme="dark"] .ud-v3-dock-wrap { border-color: var(--ud-line); background: rgba(24, 30, 42, .94) } [data-theme="dark"] .ud-v3 .ud-nav-btn { color: #a4aec0 } [data-theme="dark"] .ud-v3 .ud-nav-btn:hover { color: #edf0f7; background: #252c3a } [data-theme="dark"] .ud-v3 .ud-nav-btn.on { color: #c8c2ff; background: #2b2854 } [data-theme="dark"] .ud-v3 .ud-nav-count { color: #d8d4ff; background: #454075 } [data-theme="dark"] .ud-v3 table.data thead, [data-theme="dark"] .ud-v3 table.data tbody tr:hover, [data-theme="dark"] .ud-v3 .ud-security-panel>form, [data-theme="dark"] .ud-v3 .empty-state { background: var(--ud-subtle) } [data-theme="dark"] .ud-v3 .mypack-row, [data-theme="dark"] .ud-v3 .ud-wishlist-card, [data-theme="dark"] .ud-v3 .field input, [data-theme="dark"] .ud-v3 .field select { color: var(--ud-ink); background: #181e2a } [data-theme="dark"] .ud-v3 .field label { color: #c3cad7 } [data-theme="dark"] .ud-v3 .field input:disabled { color: #7f899a; background: #202735 } [data-theme="dark"] .ud-v3 .ud-security-card { background: #2b2854 } [data-theme="dark"] .ud-v3 .ud-wishlist-card>.wishlist-toggle { background: #332235 } } @media (min-width:1025px) and (max-width:1180px) { .ud-v3-hero { grid-template-columns: minmax(0, 1.25fr) minmax(220px, .65fr) } .ud-v3-hero-rail { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) } .ud-v3-value-card { grid-column: span 5 } .ud-v3-progress-card { grid-column: span 7 } .ud-v3-mini-card { grid-column: span 6 } .ud-v3-security-card, .ud-v3-discover-card { grid-column: span 6 } .ud-v3 .ud-nav-btn { padding-inline: .65rem } } @keyframes udV4PaneIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } } @keyframes udV4Track { from { width: 0 } } @media (min-width:1025px) and (prefers-reduced-motion:reduce) { .ud-v3 .ud-main>.tab-pane.on, .ud-v3 .ud-v3-progress-track span { animation: none !important } .ud-v3-bento>article, .ud-v3-mini-card, .ud-v3 .mypack-row, .ud-v3 .ud-wishlist-card, .ud-v3 .ud-nav-btn { transition: none !important } } /* ══════════════════════════════════════════════════════════════════ * * RIGHT SIDE FLOATING BUTTONS (SUPPORT CHAT & SCROLL TO TOP STACK) * ══════════════════════════════════════════════════════════════════ */ .support-float-left-btn { position: fixed !important; right: 24px !important; left: auto !important; bottom: 24px !important; height: 48px !important; display: inline-flex !important; align-items: center !important; gap: 10px !important; padding: 0 18px 0 12px !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; border-radius: 30px !important; background: linear-gradient(135deg, #4f46e5, #2563eb, #1d4ed8) !important; background-size: 200% 200% !important; color: #ffffff !important; text-decoration: none !important; font-family: inherit !important; font-size: 13.5px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; box-shadow: 0 12px 30px -4px rgba(37, 99, 235, 0.48), 0 4px 14px rgba(79, 70, 229, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; z-index: 9999 !important; transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important; overflow: hidden !important; } .support-float-left-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: 0.6s; } .support-float-left-btn:hover { transform: translateY(-4px) scale(1.04) !important; box-shadow: 0 18px 38px -4px rgba(37, 99, 235, 0.6), 0 6px 20px rgba(79, 70, 229, 0.45) !important; color: #ffffff !important; } .support-float-left-btn:hover::before { left: 160%; } .scroll-top-btn { position: fixed !important; right: 24px !important; left: auto !important; bottom: 82px !important; width: 44px !important; height: 44px !important; display: grid !important; place-items: center !important; border: 1px solid rgba(255, 255, 255, 0.7) !important; border-radius: 50% !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(12px) !important; color: #1e293b !important; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important; z-index: 9998 !important; opacity: 0; visibility: hidden; transform: translateY(10px) scale(0.9); transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } [data-theme="dark"] .scroll-top-btn { background: rgba(30, 41, 59, 0.88) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: #f8fafc !important; } .scroll-top-btn.is-visible { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } .scroll-top-btn:hover { transform: translateY(-3px) scale(1.08) !important; background: #ffffff !important; color: #2563eb !important; box-shadow: 0 12px 28px rgba(37, 99, 235, 0.28) !important; } .support-float-icon-wrap { width: 32px; height: 32px; display: grid; place-items: center; position: relative; border-radius: 50%; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .support-float-pulse { position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: #10b981; border: 2px solid #ffffff; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); animation: supportPulseDot 2s infinite; } .support-float-kicker { padding: 2px 7px; border-radius: 10px; background: rgba(255, 255, 255, 0.22); color: #ffffff; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; margin-left: 2px; } .support-float-unread { position: absolute; top: -6px; right: -8px; padding: 2px 6px; border-radius: 10px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 800; line-height: 1; border: 2px solid #fff; } @keyframes supportPulseDot { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); } 70% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } /* ══════════════════════════════════════════════════════════════════ * * SMALL COMPACT TALL BLURRED GLASS PILL NOTIFICATION * ══════════════════════════════════════════════════════════════════ */ #pn-widget { position: fixed !important; left: 24px !important; right: auto !important; bottom: 24px !important; z-index: 9997 !important; display: flex; flex-direction: column; gap: 8px; pointer-events: none; } .pn-toast { pointer-events: auto; display: inline-flex; align-items: center; gap: 9px; padding: 9px 12px 9px 9px; border-radius: 22px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 12px 32px -4px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.85); width: 230px; max-width: 230px; opacity: 0; transform: translateX(-40px) scale(0.92); transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="dark"] .pn-toast { background: rgba(15, 23, 42, 0.82); border-color: rgba(255, 255, 255, 0.15); box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .pn-toast.pn-in { opacity: 1; transform: translateX(0) scale(1); } .pn-toast.pn-out { opacity: 0; transform: translateX(-40px) scale(0.9); } .pn-av { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 50%; color: #ffffff; font-size: 13px; font-weight: 800; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18); } .pn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pn-head { display: flex; align-items: center; gap: 4px; line-height: 1.15; } .pn-name { font-size: 11.5px; font-weight: 800; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="dark"] .pn-name { color: #f8fafc; } .pn-verified { width: 13px; height: 13px; display: inline-grid; place-items: center; border-radius: 50%; background: #10b981; color: #ffffff; font-size: 8.5px; font-weight: 900; line-height: 1; flex: none; } .pn-ago { margin-left: auto; font-size: 9px; color: #94a3b8; font-weight: 500; white-space: nowrap; } .pn-msg { font-size: 10.5px; color: #475569; line-height: 1.3; white-space: normal; word-break: break-word; } [data-theme="dark"] .pn-msg { color: #cbd5e1; } .pn-item { font-weight: 800; color: #4f46e5; } [data-theme="dark"] .pn-item { color: #818cf8; } .pn-close { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.06); color: #94a3b8; cursor: pointer; transition: all 0.15s; flex: none; margin-left: 2px; } .pn-close:hover { background: rgba(239, 68, 68, 0.15); color: #ef4444; } @media (max-width: 600px) { #pn-widget { left: 12px !important; bottom: 12px !important; } .pn-toast { width: 210px; max-width: 210px; } } /* ══════════════════════════════════════════════════════════════════ * * ULTRA-PROFESSIONAL ANIMATED GLASSMORPHIC POPUP ENGINE REDESIGN * ══════════════════════════════════════════════════════════════════ */ .popup-overlay { position: fixed !important; inset: 0 !important; z-index: 99990 !important; background: rgba(10, 14, 30, 0.65) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; opacity: 0; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; pointer-events: none; } .popup-overlay.popup-overlay-in { opacity: 1 !important; pointer-events: all !important; } .popup-entry { position: fixed !important; inset: 0 !important; z-index: 99991 !important; pointer-events: none !important; } .popup-close { position: absolute !important; top: 1rem !important; right: 1rem !important; z-index: 100 !important; width: 34px !important; height: 34px !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; cursor: pointer !important; background: rgba(255, 255, 255, 0.25) !important; backdrop-filter: blur(8px) !important; color: #1e293b !important; display: grid !important; place-items: center !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important; transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .popup-close:hover { background: #ffffff !important; color: #ef4444 !important; transform: rotate(90deg) scale(1.1) !important; box-shadow: 0 6px 18px rgba(239, 68, 68, 0.25) !important; } [data-theme="dark"] .popup-close { background: rgba(255, 255, 255, 0.12) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f8fafc !important; } [data-theme="dark"] .popup-close:hover { background: #ffffff !important; color: #ef4444 !important; } .popup-box { position: fixed !important; z-index: 99992 !important; pointer-events: all !important; background: rgba(255, 255, 255, 0.94) !important; backdrop-filter: blur(28px) !important; -webkit-backdrop-filter: blur(28px) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; border-radius: 28px !important; box-shadow: 0 35px 90px -15px rgba(15, 23, 42, 0.32), 0 0 0 1px rgba(99, 102, 241, 0.12) !important; overflow: hidden !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } [data-theme="dark"] .popup-box { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: 0 35px 90px -15px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(129, 140, 248, 0.2) !important; } /* POSITIONS & SIZES */ .popup-pos-center.popup-size-sm { width: min(420px, 94vw) !important; } .popup-pos-center.popup-size-md { width: min(580px, 95vw) !important; } .popup-pos-center.popup-size-lg { width: min(780px, 96vw) !important; } /* ANIMATION SPRING OVERRIDES */ .popup-anim-zoom { opacity: 0; transform: translate(-50%, -50%) scale(0.78) !important; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .popup-anim-zoom.popup-box-in { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } .popup-anim-slide-up { opacity: 0; transform: translate(-50%, -35%) !important; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .popup-anim-slide-up.popup-box-in { opacity: 1 !important; transform: translate(-50%, -50%) !important; } .popup-anim-bounce { opacity: 0; transform: translate(-50%, -50%) scale(0.5) !important; transition: opacity 0.3s ease, transform 0.55s cubic-bezier(0.34, 1.8, 0.64, 1) !important; } .popup-anim-bounce.popup-box-in { opacity: 1 !important; transform: translate(-50%, -50%) scale(1) !important; } .popup-anim-flip { opacity: 0; transform: translate(-50%, -50%) perspective(800px) rotateX(25deg) !important; transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .popup-anim-flip.popup-box-in { opacity: 1 !important; transform: translate(-50%, -50%) perspective(800px) rotateX(0deg) !important; } /* TYPOGRAPHY & BODY WRAP */ .popup-body-wrap { padding: 2rem 2.2rem !important; } .popup-title { font-family: inherit !important; font-weight: 800 !important; font-size: 1.45rem !important; color: #0f172a !important; margin: 0 0 0.65rem !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; } [data-theme="dark"] .popup-title { color: #f8fafc !important; } .popup-body { font-size: 0.95rem !important; color: #475569 !important; line-height: 1.68 !important; margin: 0 0 1.2rem !important; } [data-theme="dark"] .popup-body { color: #94a3b8 !important; } .popup-body strong { color: #0f172a !important; font-weight: 700 !important; } [data-theme="dark"] .popup-body strong { color: #f8fafc !important; } /* TEMPLATES HIGH-END STYLING */ .popup-tpl-promo-banner { background: linear-gradient(135deg, #4f46e5, #7c3aed, #ec4899) !important; background-size: 200% 200% !important; animation: popupGradFlow 5s ease infinite !important; color: #ffffff !important; padding: 0.8rem 3.5rem 0.8rem 1.4rem !important; border: none !important; box-shadow: 0 12px 30px rgba(79, 70, 229, 0.35) !important; } @keyframes popupGradFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .popup-tpl-exit-intent { background: linear-gradient(145deg, #0f172a, #1e1b4b, #311042) !important; color: #ffffff !important; border-color: rgba(129, 140, 248, 0.3) !important; } .popup-tpl-exit-intent .popup-title { color: #ffffff !important; font-size: 1.65rem !important; font-weight: 800 !important; } .ei-badge { display: inline-block !important; background: linear-gradient(135deg, #ef4444, #f97316) !important; color: #ffffff !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 4px 12px !important; border-radius: 20px !important; box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important; margin-bottom: 0.85rem !important; } .popup-tpl-countdown-deal { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(28px) !important; } [data-theme="dark"] .popup-tpl-countdown-deal { background: rgba(15, 23, 42, 0.94) !important; } .cd-header { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; padding: 1.8rem 1.4rem !important; text-align: center !important; } .cd-digits { font-family: inherit !important; font-weight: 900 !important; font-size: 2.2rem !important; color: #ffffff !important; background: rgba(0, 0, 0, 0.28) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 14px !important; padding: 0.15em 0.45em !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important; } .popup-tpl-social-proof { background: rgba(255, 255, 255, 0.92) !important; backdrop-filter: blur(24px) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; max-width: 380px !important; padding: 1.25rem 1.5rem !important; border-radius: 24px !important; box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.2) !important; } [data-theme="dark"] .popup-tpl-social-proof { background: rgba(15, 23, 42, 0.92) !important; border-color: rgba(255, 255, 255, 0.14) !important; } /* ══════════════════════════════════════════════════════════════════ * * REDESIGNED TOOLS HERO SECTION — COMPACT & ULTRA PROFESSIONAL * ══════════════════════════════════════════════════════════════════ */ .tl-hero { position: relative; padding: 1.8rem 0 1.2rem; text-align: center; overflow: hidden; background: transparent; } .tl-hero-container { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; } /* Hero Badge */ .tl-hero-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 30px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(79, 70, 229, 0.22); color: #4f46e5; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(79, 70, 229, 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); margin-bottom: 0.75rem; animation: tlBadgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="dark"] .tl-hero-badge { background: rgba(15, 23, 42, 0.85); border-color: rgba(129, 140, 248, 0.25); color: #818cf8; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .tl-hero-badge-spark { display: inline-block; animation: tlSparkle 2s ease-in-out infinite; } @keyframes tlSparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.25) rotate(15deg); } } @keyframes tlBadgePop { from { opacity: 0; transform: translateY(-8px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Hero Title */ .tl-hero-title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink-strong); margin: 0 0 0.35rem; animation: tlTitleFade 0.6s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes tlTitleFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .tl-hero-desc { font-size: 0.95rem; color: var(--muted); margin: 0 auto 1.25rem; max-width: 580px; font-weight: 500; line-height: 1.5; } /* Glassmorphic Search Bar */ .tl-search-wrap { position: relative; max-width: 640px; margin: 0 auto 1.25rem; border-radius: 24px; background: rgba(255, 255, 255, 0.92); border: 1.5px solid rgba(79, 70, 229, 0.22); box-shadow: 0 12px 32px -6px rgba(79, 70, 229, 0.12), 0 4px 10px rgba(15, 23, 42, 0.03); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); } [data-theme="dark"] .tl-search-wrap { background: rgba(15, 23, 42, 0.92); border-color: rgba(129, 140, 248, 0.25); box-shadow: 0 12px 32px -6px rgba(0, 0, 0, 0.4); } .tl-search-wrap:focus-within, .tl-search-wrap:hover { border-color: #4f46e5; transform: translateY(-2px); box-shadow: 0 16px 38px -4px rgba(79, 70, 229, 0.22), 0 0 0 3px rgba(79, 70, 229, 0.1); } .tl-search-wrap form { display: flex; align-items: center; width: 100%; } .tl-search-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #4f46e5; font-size: 1.1rem; pointer-events: none; transition: transform 0.25s ease; } .tl-search-wrap:focus-within .tl-search-icon { transform: translateY(-50%) scale(1.12); } .tl-search-input { width: 100%; height: 50px; padding: 0 78px 0 48px; border: 0; outline: 0; background: transparent; color: var(--ink-strong); font-size: 0.98rem; font-weight: 500; font-family: inherit; } .tl-search-submit { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #4f46e5, #2563eb); color: #ffffff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 5px 14px rgba(79, 70, 229, 0.32); transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .tl-search-submit:hover { transform: translateY(-50%) scale(1.08); box-shadow: 0 7px 18px rgba(79, 70, 229, 0.45); } .tl-search-hint { position: absolute; right: 52px; top: 50%; transform: translateY(-50%); padding: 2px 7px; border-radius: 6px; background: rgba(79, 70, 229, 0.08); border: 1px solid rgba(79, 70, 229, 0.16); color: #4f46e5; font-size: 0.74rem; font-weight: 800; line-height: 1; pointer-events: none; } /* Glass Stat Pills Strip */ .tl-stats-strip { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .tl-stat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 30px; background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(79, 70, 229, 0.15); color: var(--ink); font-size: 0.83rem; font-weight: 500; box-shadow: 0 3px 10px rgba(79, 70, 229, 0.05); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: all 0.22s ease; } [data-theme="dark"] .tl-stat-pill { background: rgba(15, 23, 42, 0.85); border-color: rgba(129, 140, 248, 0.18); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); } .tl-stat-pill:hover { transform: translateY(-2px); border-color: #4f46e5; box-shadow: 0 6px 16px rgba(79, 70, 229, 0.15); } .tl-stat-icon-box { width: 24px; height: 24px; border-radius: 50%; background: rgba(79, 70, 229, 0.09); color: #4f46e5; display: grid; place-items: center; } /* Homepage resource coverflow */ .home-resources-section { position: relative; overflow: hidden; background: color-mix(in srgb, var(--bg) 96%, #18a875 4%); border-bottom: 1px solid var(--line); } .home-resources-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: 1.4rem; } .home-resources-head h2 { margin: .6rem 0 .45rem; font-size: 2.8rem; line-height: 1.08; } .home-resources-head p { max-width: 640px; margin: 0; color: var(--muted); } .home-resources-section .packs2[hidden], .home-resources-section .packs2-stats { display: none !important; } .resource-carousel { position: relative; max-width: 1120px; margin: 0 auto; padding: 0 58px 12px; outline: none; } .resource-carousel:focus-visible { border-radius: 12px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 28%, transparent); } .resource-carousel-stage { position: relative; height: 540px; overflow: hidden; perspective: 1300px; touch-action: pan-y; } .resource-slide { position: absolute; top: 24px; left: 50%; width: min(410px, 39vw); opacity: 0; pointer-events: none; transform: translateX(-50%) translate3d(0, 34px, -240px) scale(.68); transform-origin: 50% 100%; transition: transform .62s cubic-bezier(.22, .72, .18, 1), opacity .42s ease, filter .42s ease; will-change: transform, opacity; } .resource-slide.is-active { z-index: 5; opacity: 1; pointer-events: auto; transform: translateX(-50%) translate3d(0, 0, 90px) scale(1); filter: none; } .resource-slide.is-prev, .resource-slide.is-next { z-index: 3; opacity: .72; pointer-events: auto; filter: saturate(.78); } .resource-slide.is-prev { transform: translateX(-50%) translate3d(-76%, 46px, -100px) rotateY(9deg) scale(.76); } .resource-slide.is-next { transform: translateX(-50%) translate3d(76%, 46px, -100px) rotateY(-9deg) scale(.76); } .resource-slide.is-far-prev, .resource-slide.is-far-next { z-index: 1; opacity: .16; filter: saturate(.55); } .resource-slide.is-far-prev { transform: translateX(-50%) translate3d(-119%, 70px, -210px) rotateY(13deg) scale(.61); } .resource-slide.is-far-next { transform: translateX(-50%) translate3d(119%, 70px, -210px) rotateY(-13deg) scale(.61); } .resource-card { overflow: hidden; border: 1px solid color-mix(in srgb, var(--resource-accent) 30%, var(--line)); border-radius: 8px; background: var(--card); box-shadow: 0 18px 48px rgba(31, 26, 76, .14); } .resource-slide.is-active .resource-card { border-color: color-mix(in srgb, var(--resource-accent) 58%, var(--line)); box-shadow: 0 28px 70px rgba(31, 26, 76, .22), 0 0 0 1px color-mix(in srgb, var(--resource-accent) 18%, transparent); } .resource-card-media { position: relative; height: 225px; margin: 10px 10px 0; overflow: hidden; border-radius: 7px; background: color-mix(in srgb, var(--resource-accent) 12%, var(--chip-bg)); } .resource-card-media>img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, .72, .18, 1); } .resource-slide.is-active .resource-card-media>img { transform: scale(1.035); } .resource-card-glow { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 58%, rgba(10, 12, 28, .28)); pointer-events: none; } .resource-type { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 6px; background: rgba(18, 20, 37, .82); color: #fff; font-size: .67rem; font-weight: 800; backdrop-filter: blur(10px); } .resource-wishlist { position: absolute !important; top: 10px !important; right: 10px !important; z-index: 3; width: 32px !important; height: 32px !important; min-height: 32px !important; padding: 0 !important; border-radius: 7px !important; background: rgba(255, 255, 255, .9) !important; } .resource-card-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 2rem; color: var(--resource-accent); text-align: center; font-weight: 850; } .resource-card-placeholder[hidden] { display: none; } .resource-card-body { padding: 1.15rem 1.25rem 1.2rem; } .resource-category { color: var(--resource-accent); font-size: .68rem; font-weight: 850; } .resource-card-body h3 { margin: .35rem 0 .4rem; font-size: 1.35rem; line-height: 1.2; } .resource-card-body h3 a { color: var(--ink-strong); } .resource-card-body>p { min-height: 2.9em; margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; } .resource-meta { display: flex; flex-wrap: wrap; gap: 7px 13px; margin-top: .8rem; color: var(--muted); font-size: .72rem; } .resource-meta span { display: inline-flex; align-items: center; gap: 4px; } .resource-meta span:first-child { color: #d88900; } .resource-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--line); } .resource-card-foot strong { color: #15945a; font-size: 1.05rem; } .resource-card-foot a { display: inline-flex; align-items: center; gap: 6px; color: var(--violet); font-size: .78rem; font-weight: 850; } .resource-arrow { position: absolute; top: 244px; z-index: 8; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-strong); box-shadow: 0 10px 26px rgba(31, 26, 76, .12); cursor: pointer; transition: transform .2s ease, border-color .2s ease, color .2s ease; } .resource-arrow:hover { transform: translateY(-2px); border-color: var(--violet); color: var(--violet); } .resource-prev { left: 0; } .resource-prev .ic { transform: rotate(180deg); } .resource-next { right: 0; } .resource-arrow .ic { display: block; flex: none; } @media (min-width: 761px) { .resource-carousel-stage { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .resource-card, .resource-slide.is-active .resource-card { box-shadow: none; } .resource-slide.is-far-prev, .resource-slide.is-far-next { opacity: .1; } } .resource-carousel-footer { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 30px; } .resource-dots { display: flex; align-items: center; gap: 6px; } .resource-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--muted) 35%, transparent); cursor: pointer; transition: width .3s ease, border-radius .3s ease, background .3s ease; } .resource-dots button.is-active { width: 24px; border-radius: 8px; background: var(--violet); } .resource-counter { color: var(--muted); font-size: .7rem; font-weight: 750; } .resource-counter b { color: var(--ink-strong); } @media (max-width: 760px) { .home-resources-head { display: block; margin-bottom: .8rem; } .home-resources-head h2 { font-size: 2rem; } .home-resources-head .sh-action { margin-top: 1rem; } .resource-carousel { padding: 0 34px 8px; } .resource-carousel-stage { height: 490px; } .resource-slide { top: 18px; width: min(330px, 76vw); } .resource-slide.is-prev { transform: translateX(-50%) translate3d(-64%, 52px, -100px) rotateY(8deg) scale(.72); } .resource-slide.is-next { transform: translateX(-50%) translate3d(64%, 52px, -100px) rotateY(-8deg) scale(.72); } .resource-slide.is-far-prev, .resource-slide.is-far-next { opacity: 0; } .resource-card-media { height: 185px; } .resource-card-body { padding: .95rem 1rem 1rem; } .resource-card-body h3 { font-size: 1.14rem; } .resource-card-body>p { font-size: .76rem; } .resource-arrow { top: 213px; width: 36px; height: 36px; } } @media (prefers-reduced-motion: reduce) { .resource-slide, .resource-card-media>img, .resource-dots button { transition-duration: .01ms !important; } } /* Cartoon Avatars */ .ud-avatar-cartoon_1, .ud-avatar-cartoon_2, .ud-avatar-cartoon_3, .ud-avatar-cartoon_4, .ud-avatar-cartoon_5, .ud-avatar-cartoon_6 { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; color: transparent !important; } .ud-avatar-cartoon_1 { background-image: url('../img/avatars/cartoon_1.jpg') !important; } .ud-avatar-cartoon_2 { background-image: url('../img/avatars/cartoon_2.jpg') !important; } .ud-avatar-cartoon_3 { background-image: url('../img/avatars/cartoon_3.jpg') !important; } .ud-avatar-cartoon_4 { background-image: url('../img/avatars/cartoon_4.jpg') !important; } .ud-avatar-cartoon_5 { background-image: url('../img/avatars/cartoon_5.jpg') !important; } .ud-avatar-cartoon_6 { background-image: url('../img/avatars/cartoon_6.jpg') !important; }