@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); :root { --brand: #ffd056; --brand-2: #ff9f0a; } * { box-sizing: border-box } html, body { margin: 0; height: 100%; font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: black; } h1 { color: var(--brand, #ffd056); font-size: 2.2rem; font-weight: 800; text-align: center; text-transform: uppercase; margin-bottom: 1rem; } h2 { color: white; font-size: 1.6rem; text-align: center; } h3 { color: white; font-size: 1.05rem; text-align: center; } p { font-size: 1rem; color: #d9d9d9; /* greyish white */ margin: 0 auto 1.2rem; text-align: center; } /* Standardize list text color */ ul, ol, li { color: #ffffff; text-align: left; /* optional: keeps lists readable */ } a { color: inherit; text-decoration: none } .container { max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { .container { padding: 0 20px; } } /* NAVBAR */ .nav { position: sticky; top: 0; z-index: 50; background: #000000; border-bottom: 1px solid #262933; } .nav .inner { position: relative; max-width: 1600px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 12px 18px; } .logo { width: 150px; height: auto; display: inline-block; } @media (max-width: 768px) { .logo { width: 100px; } } .menu { display: flex; gap: 16px; flex: 1; flex-wrap: wrap; } .menu a { color: #d7d9e2; text-decoration: none; font-size: 14px; padding: 8px 10px; border-radius: 10px; transition: all .2s ease; } .menu a:hover { background: #20232b; color: #fff; } .actions { display: flex; align-items: center; /* fix invalid value */ justify-content: flex-end; /* optional: push buttons right */ gap: 2rem; /* primary spacing */ } .btn { border: 1px solid #fff; color: #fff; padding: 8px 28px; border-radius: 12px; font-weight: 600; } .btn:hover { background: #1d2230 } .btn.brand { background: #fed526; color: #1a1405; border: none } .btn.brand:hover { filter: brightness(1.05) } /* Show hamburger only on mobile */ .hamburger { display: none; background: transparent; border: 0; padding: 0; width: 40px; height: 40px; cursor: pointer; } .hamburger-icon { width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); } @media (max-width: 768px) { .hamburger { display: inline-flex; align-items: center; justify-content: center; } } /* Drawer container */ .drawer { position: fixed; inset: 0 auto 0 0; /* left side */ width: 78%; max-width: 320px; height: 100vh; background: #1b1e24; color: #fff; box-shadow: 8px 0 30px rgba(0, 0, 0, .45); transform: translateX(-100%); transition: transform .28s ease; z-index: 10010; overflow-y: auto; -webkit-overflow-scrolling: touch; border-right: 1px solid #272b36; } /* Drawer nav links */ .drawer-nav { display: flex; flex-direction: column; gap: 6px; padding: 18px; } .drawer-nav a { display: block; padding: 12px 12px; border-radius: 10px; text-decoration: none; color: #e9ecf7; font-weight: 600; font-size: 14px; background: transparent; border: 1px solid transparent; } .drawer-nav a:hover { background: #20232b; border-color: #2d313b; } /* Dark overlay behind drawer */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); backdrop-filter: blur(1px); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity .28s ease; } /* Open state driven by .drawer-open on */ body.drawer-open .drawer { transform: translateX(0); } body.drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; } body.drawer-open { overflow: hidden; } /* Profile icon hidden by default */ .profile { display: none; background: none; border: 0; padding: 0; line-height: 0; } .profile-icon { width: 30px; height: 30px; display: block; } /* Show only on mobile */ @media (max-width: 900px) { .profile { display: inline-flex; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); } } .desktop-only { display: block; } /* ===== Mobile layout ===== */ @media (max-width: 768px) { /* Hide desktop nav + actions */ .menu, .nav-actions { display: none !important; } .hamburger { display: inline-flex; align-items: center; justify-content: center; } .nav .inner { height: 56px; /* consistent bar height like screenshot */ justify-content: flex-start; } /* Center the logo absolutely within the bar */ .logo-brand { position: absolute; left: 50%; transform: translateX(-50%); } .desktop-only { display: none !important; } } /* Hero Carousel */ .hero { position: relative } .carousel { position: relative; overflow: hidden; } .slides { display: flex; transition: transform .6s cubic-bezier(.2, .7, .2, 1) } .slide { min-width: 100%; height: 100%; display: grid; place-items: center; text-align: center } .hero-img { width: 100%; height: 100%; object-fit: cover; } .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; display: flex; gap: 10px } .dot { width: 10px; height: 10px; border-radius: 999px; background: #3a4153; border: 1px solid #56607a; cursor: pointer } .dot.active { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border-color: transparent } /* Hide both sections on desktop */ .mobile-cta-section, .mobile-grid-section { display: none; } /* Show only on mobile */ @media (max-width: 900px) { .mobile-cta-section { display: block; background: #0f1115; } .mobile-grid-section { display: block; padding: 12px 14px; } /* Join/Login buttons */ .mobile-cta { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 10px; } .m-btn { display: inline-block; text-align: center; padding: 12px 0; font-weight: 800; text-decoration: none; } .m-join { background: #e21; color: #fff; } .m-login { background: #2a2f3a; color: #fff; } /* Game grid */ .mobile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .m-card { background: #1a1f2c; border: 1px solid #262c38; border-radius: 14px; padding: 12px 6px; text-align: center; color: #e8eef6; text-decoration: none; } .m-card img { width: 48px; height: 48px; object-fit: contain; display: block; margin: 6px auto 8px; } .m-card span { font-size: 12px; font-weight: 700; } .m-btn:active, .m-card:active { transform: translateY(1px); } } /* Content Section */ section.content { padding: 20px 0 } @media (max-width:900px) { section.content { padding: 12px 0 } } .anchor-text { color: #ff3b3b; /* bright red */ text-decoration: none; font-weight: 600; } .anchor-text:hover { text-decoration: underline; } .cta { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; } /* Utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 } /* About Section Styles */ .about-hero { display: block; width: 100%; height: auto; border: 1px solid #1f2431; box-shadow: 0 10px 30px rgba(0, 0, 0, .35) } .about-list { color: #ffffff; padding-inline-start: 1.2rem; } .about-list li { margin: .25rem 0 } /* Feature Cards Section */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } @media (max-width:900px) { .cards { grid-template-columns: 1fr; } } .card { border: 1px solid #1f2431; border-bottom: 5px solid #ffd056; border-radius: 18px; padding: 24px 20px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); background: linear-gradient(to top, rgba(255, 208, 86, .16) 0%, transparent 70%); } .icon-wrap { height: 120px; display: grid; place-items: center; margin-bottom: 12px } .card-icon { object-fit: contain; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .35)) } .card-title { margin: 8px 0 6px; font-size: 1.05rem } .card-sub { margin: 0 0 8px; font-size: .85rem; color: #ffce6a } .card-desc { margin: 0; color: #ffffff; line-height: 1.55 } .learn-more { min-width: 150px; text-align: center } /* Category Section Styles */ .categories { display: flex; flex-direction: column; gap: 28px; padding: 40px 0; } .category { display: grid; align-items: center; background: linear-gradient(to right, rgba(255, 208, 86, .16) 0%, transparent 100%); color: #fff; overflow: hidden; } .category-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 20px; padding: 32px 20px; } /* Remove grid on mobile */ @media (max-width: 768px) { .category-inner { display: block; } } .category-text { padding: 32px; display: flex; flex-direction: column; justify-content: center; gap: 14px } .category-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px } .btn.brand { width: fit-content; } @media(max-width:900px) { .category { grid-template-columns: 1fr; } .category-img { order: -1 } .category-text { padding: 24px 18px } } /* Reasons Section Styles */ .reasons { padding: 56px 0 } .reason { max-width: 900px; margin: 0 auto 14px; text-align: center } /* FAQ styles to match screenshot */ .faq-item { margin: 12px 0 } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; background: rgb(254, 213, 38); border-radius: 28px; padding: 18px 22px; cursor: pointer; font-size: 1rem; font-weight: 800; text-align: left; border: none; font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } .faq-q:hover { filter: brightness(1.05) } .faq-icon { width: 24px; height: 24px; transition: transform 0.3s ease; } .faq-a { padding: 12px 8px 6px 8px; line-height: 1.65; } .faq-item.open .faq-q { background: rgb(254, 200, 30); border-color: rgb(254, 200, 30); color: #000; } /* Why Choose styles */ .choose-card { position: relative; border-radius: 16px; overflow: hidden; color: #fff; border: 1px solid #262a34; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); background: #0f1115; padding: 32px; } .choose-card::before { content: ""; position: absolute; inset: 0; background: url('/assets/background.png') center/cover no-repeat; filter: saturate(110%); transform: scale(1.02); } .choose-card::after { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 60% at 50% 0, rgba(204, 33, 33, .55), rgba(15, 17, 21, .65) 60%), linear-gradient(180deg, rgba(15, 17, 21, .2), rgba(15, 17, 21, .75)); } .choose-card h2, .choose-card p { position: relative; z-index: 1 } /* === Footer Section === */ .site-footer { background: #151515; color: #d7d7d7; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .06); } .footer-wrap { max-width: 1260px; margin: 0 auto; padding: 0 20px; } /* Top grid */ .site-footer .footer-wrap:first-of-type { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr; /* brand | links | pay */ gap: 36px; align-items: start; padding-bottom: 18px; } /* vertical dividers like screenshot */ .footer-col { padding: 8px 24px; position: relative; } .footer-col:not(:last-child)::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, .08); } /* Brand block */ .ft-logo { height: 70px; object-fit: cover; display: block; margin-bottom: 10px; } .ft-small { font-size: 13px; color: #bfbfbf; margin: 6px 0; text-align: left; } .ft-small.label { margin-top: 12px; } .reg-logos { display: flex; gap: 16px; align-items: center; margin: 8px 0 12px; } .reg-logos img { height: 44px; width: auto; object-fit: contain; display: block; } .social { display: flex; align-items: center; gap: 10px; } .social .ft-small { margin-right: 6px; } .social a { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #232323; color: #eaeaea; font-size: 13px; transition: transform .15s ease, background .15s ease, color .15s ease; text-decoration: none; } .social a:hover { transform: translateY(-2px); background: #2c2c2c; color: #fff; } /* Links */ .ft-title { color: #e9e9e9; margin: 0 0 10px; font-weight: 800; font-size: 16px; } .links-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ft-list { list-style: none; margin: 0; padding: 0; } .ft-list li { margin: 8px 0; font-size: 14px; } .ft-list a { color: #cfcfcf; text-decoration: none; font-size: 14px; } .ft-list a:hover { color: #ffffff; } /* Payment methods */ .footer-pay .pay-logos { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: center; /* optional: center them horizontally */ } .pay-logos img { width: 70px; /* fixed width for all logos */ height: 40px; /* fixed height for all logos */ object-fit: contain; /* keeps aspect ratio within the box */ display: block; background: transparent; /* remove unwanted bg color */ filter: grayscale(100%) brightness(1.1); opacity: 0.9; border-radius: 4px; /* optional: smooth edges */ } /* Bottom bar */ .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 18px; } .copy { text-align: center; font-size: 12px; color: #b9b9b9; padding: 10px 0 16px; } /* Responsive */ @media (max-width: 980px) { .site-footer .footer-wrap:first-of-type { grid-template-columns: 1fr; gap: 28px; } .footer-col { padding: 0; } .footer-col::after { display: none; } .links-split { grid-template-columns: repeat(2, minmax(140px, 1fr)); } } /************************ Slot Page ************************/ .slot-banner { padding: 18px 16px } .slot-banner-inner { max-width: 1200px; margin: 0 auto; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); border: 1px solid #262a34 } .slot-banner-img { display: block; width: 100%; height: auto } /* ✅ On mobile: force exactly 3 rows × 3 columns */ @media (max-width: 768px) { .slot-banner { padding: 12px 20px; } .slot-banner-img { display: block; width: 100%; height: 220px; /* taller fixed height */ object-fit: cover; /* keeps the image proportionate and cropped nicely */ } } /* Breadcrumb */ .crumb { color: #dfe4ee; margin: 10px 0 14px; text-align: left; } .crumb span { margin: 0 6px; color: #8d96a8 } /* Pagination dots */ .slot-dots { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px } .slot-dots button { width: 8px; height: 8px; border-radius: 999px; border: 1px solid #56607a; background: #3a4153; cursor: pointer } .slot-dots button[aria-selected="true"] { background: #fed526; border-color: #fed526 } /* --- Layout for 2 rows × 6 columns per page --- */ .slot-scroller { position: relative; overflow: hidden; /* hide side slides */ } .slot-scroller .viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; /* Hide scrollbar (cross-browser) */ scrollbar-width: none; /* Firefox */ } .slot-scroller .viewport::-webkit-scrollbar { display: none; /* Chrome, Safari */ } .slot-scroller .track { display: flex; /* slides laid out horizontally */ } .slot-slide { scroll-snap-align: start; flex: 0 0 100%; display: grid; grid-template-columns: repeat(6, 1fr); /* 6 columns */ grid-template-rows: repeat(2, 1fr); /* 2 fixed rows */ gap: 12px; padding: 8px 4px 16px; box-sizing: border-box; align-content: start; /* prevent vertical stretching */ } /* Cards: make images fill their grid cells nicely */ .slot-card { display: block; border-radius: 12px; overflow: hidden; background: #2a3040; } .slot-card img { display: block; width: 100%; height: 100%; object-fit: cover; /* uniform thumbnails */ } /* ✅ On mobile: force exactly 3 rows × 3 columns */ @media (max-width: 768px) { .slot-slide { grid-template-columns: repeat(3, 1fr); /* 3 columns */ grid-template-rows: repeat(3, 1fr); /* 3 rows */ } } /* Modal container */ .modal { position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; z-index: 100000; } .modal[hidden] { display: none; } /* Overlay background */ .modal-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(5px); } /* Modal box */ .modal-content { position: relative; background: #1b1d23; color: #fff; border-radius: 12px; text-align: center; padding: 32px 26px; max-width: 380px; width: 90%; border: 1px solid #262b33; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); z-index: 2; } /* Close button */ .modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; font-size: 22px; color: #aaa; cursor: pointer; } .modal-close:hover { color: #fff; } /* Red cross icon using CSS */ .modal-icon { display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; background: #c72727; border-radius: 50%; margin: 0 auto 14px; position: relative; } .modal-icon .cross { position: relative; width: 32px; height: 4px; background: #fff; transform: rotate(45deg); } .modal-icon .cross::after { content: ''; position: absolute; width: 32px; height: 4px; background: #fff; transform: rotate(90deg); left: 0; top: 0; } /* Text styles */ .modal-title { font-size: 1.25rem; font-weight: 700; color: #0fdb92; margin-bottom: 8px; } .modal-text { font-size: 0.9rem; color: #d3d7de; margin-bottom: 28px; line-height: 1.5; } /* OK Button */ .modal-ok { background: #fed526; color: #1a1405; border: none; border-radius: 8px; font-weight: 700; padding: 12px 36px; cursor: pointer; font-size: 1rem; transition: 0.2s ease; } .modal-ok:hover { filter: brightness(1.05); } /************************ About Us Page ************************/ .provider-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; } .provider-card { background: rgb(40, 39, 44); border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, box-shadow 0.25s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } .provider-card img { height: auto; display: block; object-fit: contain; } /* Responsive */ @media (max-width: 768px) { .provider-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .provider-card { padding: 16px; } .provider-card img { max-width: 120px; } } /************************ VIP Page ************************/ /* Table Styling */ .vip-table-wrapper { overflow-x: auto; background: #13151c; border: 1px solid #2a2a2a; border-radius: 12px; box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4); } .vip-table { width: 100%; border-collapse: collapse; color: #fff; text-align: center; font-size: 0.95rem; } .vip-table th { background: #fed526; color: #000; padding: 14px 10px; font-weight: 700; } .vip-table th:first-child { border-top-left-radius: 8px; } .vip-table th:last-child { border-top-right-radius: 8px; } .vip-table td { padding: 14px 10px; border-bottom: 1px solid #2a2a2a; } .vip-rank { color: #ffe767; font-weight: 600; } /* Responsive */ @media (max-width: 768px) { .vip-title { font-size: 1.5rem; } .vip-table th, .vip-table td { padding: 10px 8px; font-size: 0.85rem; } } /* ===== New Footer (V2) ===== */ .footer-v2 { --bg: #0b0c10; --panel: #12141b; --panel-2: #0f1117; --line: rgba(255,255,255,0.08); --text: #cfd3dc; --muted: #9aa3b2; --accent: var(--brand, #ffd056); margin-top: 64px; position: relative; color: var(--text); background: radial-gradient(1200px 500px at 50% -120px, rgba(255,208,86,0.18), transparent 60%), linear-gradient(180deg, #0a0b10, #0a0b10); border-top: 1px solid var(--line); } /* Curved top edge */ .footer-v2-wave svg { width: 100%; height: 80px; display: block; } .footer-v2-wave path { fill: #0a0b10; opacity: .95; } .footer-v2-inner { max-width: 1240px; margin: 0 auto; padding: 28px 20px 18px; display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 28px; } .fv2-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 8px 30px rgba(0,0,0,.35); } /* Brand */ .fv2-logo { height: 56px; display: block; margin-bottom: 8px; } .fv2-tagline { font-size: .95rem; color: var(--muted); margin: 6px 0 14px; } .fv2-social { display: flex; gap: 10px; } .fv2-social a{ width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; background: #1a1f2b; color: #fff; font-size: 16px; border: 1px solid rgba(255,255,255,.08); transition: transform .2s ease, background .2s ease, box-shadow .2s ease; } .fv2-social a:hover{ transform: translateY(-3px); background: var(--accent); color: #0c0a02; box-shadow: 0 6px 18px rgba(255,208,86,.25); } /* Newsletter */ .fv2-newsletter h3 { color: #fff; margin: 0 0 6px; font-size: 1.1rem; } .fv2-newsletter p { margin: 0 0 12px; color: var(--muted); font-size: .95rem; } .fv2-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; } .fv2-form input{ background: #0e121a; color: #e8eef6; border: 1px solid #202636; border-radius: 12px; padding: 12px 14px; outline: none; font-size: .95rem; } .fv2-form input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,208,86,.18); } .fv2-btn{ background: var(--accent); color: #1a1405; border: none; border-radius: 12px; padding: 12px 18px; font-weight: 800; cursor: pointer; font-size: .95rem; transition: filter .2s ease, transform .05s ease; } .fv2-btn:hover{ filter: brightness(1.05); } .fv2-btn:active{ transform: translateY(1px); } .fv2-disclaimer{ display:block; margin-top:10px; color:#8e96a8; font-size:.78rem; } /* Links */ .fv2-links{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .fv2-links h4{ color: #fff; margin: 0 0 10px; font-size: 1rem; letter-spacing: .2px; } .fv2-links ul{ list-style: none; padding: 0; margin: 0; } .fv2-links li{ margin: 7px 0; } .fv2-links a{ color: #cbd1dd; text-decoration: none; font-size: .95rem; transition: color .15s ease, transform .15s ease; } .fv2-links a:hover{ color: var(--accent); transform: translateX(2px); } /* Badges */ .fv2-badges{ grid-column: 1 / -1; border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 18px; } .fv2-badges-row{ display:flex; flex-wrap:wrap; gap: 12px 16px; align-items:center; justify-content:center; } .fv2-badges-row img{ width: 72px; height: 40px; object-fit: contain; filter: grayscale(1) brightness(1.05); opacity:.95; transition: transform .15s ease, filter .2s ease; } .fv2-badges-row img:hover{ transform: translateY(-2px) scale(1.03); filter: grayscale(0); } .fv2-licenses{ display:flex; gap: 14px; justify-content:center; align-items:center; margin-top: 12px; } .fv2-licenses img{ height: 40px; object-fit: contain; filter: grayscale(1) brightness(1); opacity:.9; } /* Legal bar */ .fv2-legal{ border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; max-width:1240px; margin: 0 auto; padding: 16px 20px 24px; } .fv2-legal p{ margin: 0; font-size: .88rem; color: #aeb6c3; } .fv2-legal-links{ display:flex; gap: 14px; list-style: none; padding:0; margin:0; } .fv2-legal-links a{ color:#bfc6d4; font-size:.9rem; text-decoration:none; } .fv2-legal-links a:hover{ color: var(--accent); } .fv2-lang select{ background:#0f1320; color:#e6ebf4; border:1px solid #22293a; border-radius:10px; padding: 8px 10px; font-size:.9rem; } /* Accessibility helper */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip: rect(0,0,0,0); white-space:nowrap; border:0; } /* Responsive */ @media (max-width: 1100px){ .footer-v2-inner{ grid-template-columns: 1fr 1fr; /* brand + newsletter | links spans next row */ } .fv2-links{ grid-column: 1 / -1; } } @media (max-width: 720px){ .footer-v2-inner{ grid-template-columns: 1fr; } .fv2-social { justify-content: flex-start; } .fv2-legal{ grid-template-columns: 1fr; gap: 8px; text-align: center; } .fv2-legal-links{ justify-content: center; flex-wrap: wrap; } .fv2-lang{ justify-self: center; } } /* ===== Footer V3 (Simplified version) ===== */ .footer-v2-inner { max-width: 1240px; margin: 0 auto; padding: 28px 20px 18px; display: grid; grid-template-columns: 1.1fr 1.2fr 1fr; gap: 28px; } /* Payment methods card */ .fv2-payments h3 { color: #fff; font-size: 1.1rem; margin: 0 0 14px; font-weight: 600; text-align: left; } .fv2-payments-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 12px 18px; justify-items: center; align-items: center; } .fv2-payments-grid img { width: 70px; height: 40px; object-fit: contain; filter: grayscale(1) brightness(1.05); transition: transform 0.2s ease, filter 0.2s ease; } .fv2-payments-grid img:hover { transform: translateY(-3px); filter: grayscale(0); } .fv2-licenses { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 16px; } .fv2-licenses img { height: 42px; object-fit: contain; filter: grayscale(1); opacity: 0.9; transition: filter 0.2s ease; } .fv2-licenses img:hover { filter: grayscale(0); } /* Remove unwanted legal/footer links */ .fv2-legal { border-top: 1px solid rgba(255, 255, 255, 0.08); text-align: center; padding: 16px 20px 24px; } .fv2-legal p { margin: 0; font-size: 0.9rem; color: #aeb6c3; } /* Responsive adjustments */ @media (max-width: 1100px) { .footer-v2-inner { grid-template-columns: 1fr 1fr; } .fv2-links { grid-column: 1 / -1; } } @media (max-width: 720px) { .footer-v2-inner { grid-template-columns: 1fr; } .fv2-legal { text-align: center; } } /* Left-align text only for sub pages (e.g., /slot/) */ .sub-page, .sub-page p, .sub-page h1, .sub-page h2, .sub-page h3, .sub-page ul, .sub-page ol, .sub-page dl { text-align: left !important; }