/* NextGen Distribution EOOD - Responsive + Auto Light/Dark + Manual Toggle (SAFE, no color-mix) */ :root{ --radius: 18px; --shadow: 0 18px 60px rgba(0,0,0,.14); --font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; /* Brand */ --accent: #EAA95C; --accent2:#D39853; /* Layout */ --max: 1120px; --pad: 18px; --header-h: 64px; /* Light defaults */ --bg: #F7F8FB; --bg2:#FFFFFF; --text:#0E1524; --muted: rgba(14,21,36,.70); --line: rgba(14,21,36,.14); --panel: rgba(255,255,255,.80); --panel2: rgba(255,255,255,.92); --link: #0E1524; --chip-bg: rgba(14,21,36,.06); --chip-bg2: rgba(14,21,36,.08); --headerGlass: rgba(247,248,251,.78); --focus: 0 0 0 4px rgba(234,169,92,.26); color-scheme: light; } /* Auto dark based on device */ @media (prefers-color-scheme: dark){ :root{ /* Not pure black: easier on eyes */ --bg: #0D1526; --bg2:#0F1B33; --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.14); --panel: rgba(255,255,255,.07); --panel2: rgba(255,255,255,.10); --link: rgba(255,255,255,.92); --chip-bg: rgba(255,255,255,.07); --chip-bg2: rgba(255,255,255,.10); --headerGlass: rgba(13,21,38,.72); --shadow: 0 22px 70px rgba(0,0,0,.35); color-scheme: dark; } } /* Manual override (set on ) */ html[data-theme="light"]{ --bg: #F7F8FB; --bg2:#FFFFFF; --text:#0E1524; --muted: rgba(14,21,36,.70); --line: rgba(14,21,36,.14); --panel: rgba(255,255,255,.80); --panel2: rgba(255,255,255,.92); --link: #0E1524; --chip-bg: rgba(14,21,36,.06); --chip-bg2: rgba(14,21,36,.08); --headerGlass: rgba(247,248,251,.78); --shadow: 0 18px 60px rgba(0,0,0,.14); color-scheme: light; } html[data-theme="dark"]{ --bg: #0D1526; --bg2:#0F1B33; --text: rgba(255,255,255,.92); --muted: rgba(255,255,255,.72); --line: rgba(255,255,255,.14); --panel: rgba(255,255,255,.07); --panel2: rgba(255,255,255,.10); --link: rgba(255,255,255,.92); --chip-bg: rgba(255,255,255,.07); --chip-bg2: rgba(255,255,255,.10); --headerGlass: rgba(13,21,38,.72); --shadow: 0 22px 70px rgba(0,0,0,.35); color-scheme: dark; } *{ box-sizing:border-box; } html,body{ height:100%; } body{ margin:0; font-family: var(--font); color: var(--text); background: radial-gradient(1100px 600px at 15% 0%, rgba(234,169,92,.16), transparent 60%), radial-gradient(900px 520px at 90% 12%, rgba(211,152,83,.10), transparent 55%), radial-gradient(1000px 700px at 50% 100%, rgba(234,169,92,.08), transparent 55%), var(--bg); line-height:1.55; overflow-x: hidden; /* stops random mobile horizontal scroll */ } img{ max-width:100%; height:auto; } a{ color: var(--link); text-decoration:none; } a:hover{ text-decoration:underline; } :focus-visible{ outline:none; box-shadow: var(--focus); border-radius: 10px; } .wrap{ max-width: var(--max); margin: 0 auto; padding: 14px var(--pad) 46px; } /* Sticky header */ .header{ position: sticky; top: 0; z-index: 50; backdrop-filter: blur(10px); background: var(--headerGlass); border-bottom: 1px solid var(--line); } .headerInner{ max-width: var(--max); margin: 0 auto; padding: 10px var(--pad); min-height: var(--header-h); display:flex; align-items:center; justify-content:space-between; gap: 12px; } .brand{ display:flex; align-items:center; gap: 12px; min-width: 220px; } .brand img{ height: 38px; width: auto; filter: drop-shadow(0 10px 20px rgba(0,0,0,.14)); } .brand .title{ display:flex; flex-direction:column; line-height: 1.1; } .brand .title strong{ font-size: 13px; letter-spacing: .12em; text-transform: uppercase; } .brand .title span{ font-size: 12px; color: var(--muted); } /* Header controls */ .headerRight{ display:flex; align-items:center; gap: 10px; } .iconBtn{ width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color: transparent; } .iconBtn:hover{ background: var(--panel2); } .iconBtn svg{ width: 18px; height: 18px; opacity: .9; } /* Desktop nav */ .nav{ display:flex; flex-wrap:wrap; gap: 8px; justify-content:flex-end; } .nav a{ font-size: 13px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); min-height: 40px; display:inline-flex; align-items:center; } .nav a:hover{ text-decoration:none; border-color: rgba(234,169,92,.55); background: rgba(234,169,92,.10); } /* Mobile menu */ .menuBtn{ display:none; } .mobileNav{ display:none; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) 12px; } .mobileNavInner{ border: 1px solid var(--line); background: var(--panel2); border-radius: 16px; padding: 10px; display:grid; grid-template-columns: 1fr 1fr; gap: 8px; } .mobileNav a{ text-align:center; padding: 10px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; min-height: 44px; display:flex; align-items:center; justify-content:center; } .mobileNav a:hover{ text-decoration:none; background: var(--panel2); } @media (max-width: 900px){ .nav{ display:none; } .menuBtn{ display:inline-flex; } .mobileNav{ display:block; } .wrap{ padding: 12px 14px 40px; } .headerInner{ padding: 10px 14px; } .brand{ min-width: 0; } .brand .title span{ display:none; } /* saves space on mobile */ } /* Main card */ .hero{ margin-top: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; } .heroTop{ display:grid; grid-template-columns: 1.25fr .75fr; gap: 16px; padding: 22px; } @media (max-width: 900px){ .heroTop{ grid-template-columns: 1fr; padding: 16px; } } .hero h1{ margin: 0 0 10px; font-size: clamp(22px, 5.3vw, 36px); letter-spacing: -0.02em; } .hero p{ margin: 0 0 14px; color: var(--muted); font-size: 15px; } .badges{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px; } .badge{ display:flex; align-items:center; gap: 8px; padding: 8px 10px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--line); font-size: 13px; color: rgba(255,255,255,.92); } html[data-theme="light"] .badge, :root:not([data-theme="dark"]) .badge{ /* In light theme make badge text dark */ color: rgba(14,21,36,.90); } .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(234,169,92,.20); } .ctas{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 14px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap: 10px; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(234,169,92,.55); background: rgba(234,169,92,.14); font-weight: 750; font-size: 14px; min-height: 44px; } .btn:hover{ text-decoration:none; background: rgba(234,169,92,.18); } .btn.secondary{ border-color: var(--line); background: var(--panel); font-weight: 650; } @media (max-width: 520px){ .ctas a.btn{ width:100%; } /* better mobile tap targets */ } .heroRight{ border:1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--chip-bg2); } .heroRight .logoRow{ display:flex; align-items:flex-start; gap: 12px; } .heroRight img{ width: 62px; height: 62px; object-fit: contain; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); padding: 8px; flex: 0 0 auto; } .heroRight h3{ margin: 0; font-size: 13px; letter-spacing: .10em; text-transform: uppercase; } .heroRight p{ margin: 8px 0 0; font-size: 13px; color: var(--muted); } /* Grid cards */ .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 18px 22px 22px; border-top: 1px solid var(--line); } @media (max-width: 900px){ .grid{ grid-template-columns: 1fr; padding: 16px; } } .card{ border: 1px solid var(--line); background: var(--panel); border-radius: 16px; padding: 16px; } .card h2{ margin: 0 0 8px; font-size: 16px; } .card p, .card li{ color: var(--muted); font-size: 14px; } .card ul{ margin: 10px 0 0; padding-left: 18px; } .kv{ display:grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin-top: 10px; font-size: 14px; } @media (max-width: 520px){ .kv{ grid-template-columns: 1fr; } .kv div:nth-child(odd){ font-weight: 800; } } .kv div:nth-child(odd){ color: rgba(255,255,255,.92); } html[data-theme="light"] .kv div:nth-child(odd), :root:not([data-theme="dark"]) .kv div:nth-child(odd){ color: rgba(14,21,36,.90); } .kv div:nth-child(even){ color: var(--muted); } /* Policy pages */ .page{ margin-top: 18px; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel2), var(--panel)); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } @media (max-width: 900px){ .page{ padding: 16px; } } .page h1{ margin:0 0 8px; font-size: clamp(20px, 4.6vw, 28px); } .page h2{ margin: 18px 0 8px; font-size: 16px; } .page p, .page li{ color: var(--muted); font-size: 14px; } .page ul{ padding-left: 18px; } .breadcrumb{ margin: 8px 0 0; color: var(--muted); font-size: 13px; } .breadcrumb a{ color: var(--link); } /* Footer */ .footer{ margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; display:flex; flex-direction:column; gap: 10px; } .footerTop{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap: 10px; } .footerLinks{ display:flex; flex-wrap:wrap; gap: 10px; } .footerLinks a{ font-size: 13px; color: var(--link); padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); min-height: 40px; display:inline-flex; align-items:center; } .footerLinks a:hover{ text-decoration:none; border-color: rgba(234,169,92,.55); background: rgba(234,169,92,.10); } .smallprint{ font-size: 12px; color: rgba(255,255,255,.64); } html[data-theme="light"] .smallprint, :root:not([data-theme="dark"]) .smallprint{ color: rgba(14,21,36,.62); }