/* ===================================================================== NeetOne — GLOBAL DESIGN SYSTEM (v2) Shared by index.html, admin.html, legal pages (dashboard.html has its own theme block in dashboard.css using the SAME two accent colors so the whole product feels like one interface). Palette: exactly 2 accent colors — Violet + Pink — used everywhere for buttons, links, active states, gradients. Two modes: "Default" (light) and "Dark". Toggle via [data-theme="dark"] on . ===================================================================== */ :root{ /* --- The only 2 accent colors in the whole product --- */ --violet:#8b5cf6; --violet-rgb:139,92,246; --pink:#ec4899; --pink-rgb:236,72,153; --a1: var(--violet); --a1-rgb: var(--violet-rgb); --a2: var(--pink); --a2-rgb: var(--pink-rgb); --grad: linear-gradient(120deg, var(--violet) 0%, var(--pink) 100%); --grad-soft: linear-gradient(120deg, rgba(var(--violet-rgb),.12), rgba(var(--pink-rgb),.12)); /* --- Default (light) surfaces --- */ --bg-0:#faf8fd; --bg-1:#ffffff; --bg-2:#f3eefb; --card-bg:#ffffff; --text:#1e1b2e; --muted:#6b6478; --faint:#9992a6; --glass: rgba(139,92,246,.045); --glass-2: rgba(139,92,246,.07); --stroke: rgba(30,20,50,.10); --stroke-strong: rgba(30,20,50,.18); --shadow: 0 18px 40px -20px rgba(80,40,130,.20), 0 4px 14px -10px rgba(80,40,130,.12); --glow: 0 0 0 1px rgba(var(--violet-rgb),.25), 0 10px 26px -10px rgba(var(--violet-rgb),.35); --radius:20px; --radius-sm:14px; --ease: cubic-bezier(.22,.61,.36,1); --header-h:72px; --header-bg: rgba(255,255,255,.75); --overlay-bg: rgba(30,20,50,.45); } /* --------------------------- Dark mode --------------------------- */ [data-theme="dark"]{ --bg-0:#120f1e; --bg-1:#17132a; --bg-2:#1c1733; --card-bg:#1a1630; --text:#f2edfa; --muted:#a89fc0; --faint:#726a8a; --glass: rgba(255,255,255,.045); --glass-2: rgba(255,255,255,.07); --stroke: rgba(255,255,255,.10); --stroke-strong: rgba(255,255,255,.18); --shadow: 0 18px 40px -18px rgba(0,0,0,.6), 0 4px 14px -10px rgba(0,0,0,.5); --glow: 0 0 0 1px rgba(var(--violet-rgb),.35), 0 10px 26px -10px rgba(var(--violet-rgb),.5); --header-bg: rgba(18,15,30,.75); --overlay-bg: rgba(5,3,12,.6); } /* --------------------------- Reset --------------------------- */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Lexend',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg-0); color:var(--text); line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .25s var(--ease), color .25s var(--ease); } a{ text-decoration:none; color:inherit; } ul{ list-style:none; } img{ max-width:100%; display:block; } h1,h2,h3,h4{ font-family:'Sora','Lexend',sans-serif; font-weight:600; letter-spacing:-0.01em; } :focus-visible{ outline:2px solid var(--violet); outline-offset:2px; border-radius:6px; } .container{ max-width:1200px; margin:0 auto; padding:0 20px; position:relative; z-index:1; } .gradient-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; } /* --------------------------- Buttons --------------------------- */ .btn{ display:inline-block; padding:13px 28px; border-radius:12px; font-weight:600; font-size:0.95rem; cursor:pointer; border:none; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); text-align:center; } .btn-primary{ background:var(--grad); color:#ffffff; box-shadow:0 8px 22px -8px rgba(var(--violet-rgb),.55); } .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -8px rgba(var(--pink-rgb),.6); } .btn-outline{ background:var(--glass); border:1.5px solid var(--stroke); color:var(--text); backdrop-filter:blur(8px); } .btn-outline:hover{ border-color:var(--violet); transform:translateY(-2px); box-shadow:var(--glow); } /* --------------------------- Glass / surface card --------------------------- */ .glass-card{ background:var(--card-bg); border:1px solid var(--stroke); border-radius:var(--radius); box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .25s var(--ease); } .glass-card:hover{ transform:translateY(-6px); border-color:var(--stroke-strong); box-shadow:0 24px 50px -20px rgba(var(--violet-rgb),.25); } /* ===================================================================== Soft dot-grid background — clean, professional, no glowing blobs. Matches the reference product's flat, card-based aesthetic instead of the old "aurora blur" look. ===================================================================== */ .dot-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; background-image: radial-gradient(rgba(var(--violet-rgb),.16) 1.4px, transparent 1.4px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 90%); } /* --------------------------- Theme toggle switch --------------------------- */ .theme-switch{ display:inline-flex; align-items:center; gap:8px; padding:6px; border-radius:999px; background:var(--glass-2); border:1px solid var(--stroke); cursor:pointer; } .theme-switch .ts-track{ position:relative; width:42px; height:24px; border-radius:999px; background:var(--grad); flex:0 0 auto; } .theme-switch .ts-knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .25s var(--ease); display:grid; place-items:center; } [data-theme="dark"] .theme-switch .ts-knob{ transform:translateX(18px); } .theme-switch .ts-knob svg{ width:11px; height:11px; color:var(--violet); } .theme-switch .ts-label{ font-size:.78rem; font-weight:600; color:var(--muted); padding-right:4px; } /* --------------------------- Shared form elements --------------------------- */ .form-group{ margin-bottom:20px; text-align:left; } .form-group label{ display:block; margin-bottom:8px; font-weight:500; font-size:.9rem; color:var(--text); } .form-input{ width:100%; padding:12px 15px; background:var(--glass); border:1px solid var(--stroke); border-radius:10px; font-size:1rem; color:var(--text); outline:none; font-family:inherit; transition:border-color .25s; } .form-input::placeholder{ color:var(--faint); } .form-input:focus{ border-color:var(--violet); } /* --------------------------- Scroll reveal --------------------------- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in-view{ opacity:1; transform:translateY(0); } /* --------------------------- Brand lockup (logo + wordmark) --------------------------- */ .brand-mark{ display:flex; align-items:center; gap:.65rem; } .brand-mark img{ width:38px; height:38px; border-radius:11px; flex:0 0 auto; box-shadow:0 6px 16px -6px rgba(var(--violet-rgb),.5); } .brand-mark b{ font-family:'Sora',sans-serif; font-size:1.2rem; font-weight:800; color:var(--text); }