/* ========================================================= GiftSend — Core Design System 10 themes switch via [data-theme="theme-N"] on . Light/Dark switches via [data-mode="dark"] on . ========================================================= */ :root{ --font-body:"Plus Jakarta Sans",sans-serif; --radius:16px; --radius-lg:22px; --shadow:0 10px 32px rgba(12,21,59,.08); --shadow-lg:0 20px 50px rgba(12,21,59,.14); } /* ---------- THEME 1 — Ocean Blue (default) ---------- */ [data-theme="theme-1"]{ --accent:#2453F0; --accent-deep:#1436B8; --accent-tint:#EDF2FE; --gold:#FFB443; --ink:#0C153B; --muted:#5A6284; --paper:#FDFBF7; --line:#E6E4DC; --surface:#FFFFFF; } /* ---------- THEME 2 — Sunset Coral ---------- */ [data-theme="theme-2"]{ --accent:#FF6B4A; --accent-deep:#E14A2B; --accent-tint:#FFEDE7; --gold:#FFC55C; --ink:#301A16; --muted:#8A6B62; --paper:#FFF9F5; --line:#F0DED5; --surface:#FFFFFF; } /* ---------- THEME 3 — Royal Purple ---------- */ [data-theme="theme-3"]{ --accent:#7B3FE4; --accent-deep:#5B23BB; --accent-tint:#F1EAFE; --gold:#F2B8FF; --ink:#211138; --muted:#75688F; --paper:#FBF9FF; --line:#E7E0F5; --surface:#FFFFFF; } /* ---------- THEME 4 — Emerald Luxe ---------- */ [data-theme="theme-4"]{ --accent:#0F9D58; --accent-deep:#0B7A43; --accent-tint:#E6F7EE; --gold:#D4AF37; --ink:#0E2318; --muted:#5C7568; --paper:#F8FBF9; --line:#DCEBE2; --surface:#FFFFFF; } /* ---------- THEME 5 — Midnight Gold ---------- */ [data-theme="theme-5"]{ --accent:#B68A35; --accent-deep:#8F6A24; --accent-tint:#F5EEDD; --gold:#E8C77A; --ink:#0B0F1F; --muted:#5C6178; --paper:#F9F8F4; --line:#E7E2D2; --surface:#FFFFFF; } /* ---------- THEME 6 — Rose Blush ---------- */ [data-theme="theme-6"]{ --accent:#E85D8A; --accent-deep:#C43C68; --accent-tint:#FDECF2; --gold:#FFD3E0; --ink:#3A1526; --muted:#8C6577; --paper:#FFF8FA; --line:#F3DEE6; --surface:#FFFFFF; } /* ---------- THEME 7 — Slate Minimal ---------- */ [data-theme="theme-7"]{ --accent:#3D4759; --accent-deep:#262D3B; --accent-tint:#EEF0F3; --gold:#C7A76A; --ink:#1B2029; --muted:#6B7280; --paper:#FAFAFA; --line:#E4E5E8; --surface:#FFFFFF; } /* ---------- THEME 8 — Cyber Neon ---------- */ [data-theme="theme-8"]{ --accent:#00E5A0; --accent-deep:#00B87F; --accent-tint:#0F2B24; --gold:#FF3EA5; --ink:#EAFBF5; --muted:#8FB3A6; --paper:#0A0F0D; --line:#1C2B26; --surface:#0F1613; } /* ---------- THEME 9 — Terracotta ---------- */ [data-theme="theme-9"]{ --accent:#C15C33; --accent-deep:#9A431F; --accent-tint:#F7E9DE; --gold:#D9A05B; --ink:#2E1D14; --muted:#8A6E5C; --paper:#FBF6F0; --line:#EEE0D2; --surface:#FFFFFF; } /* ---------- THEME 10 — Classic Mono ---------- */ [data-theme="theme-10"]{ --accent:#111111; --accent-deep:#000000; --accent-tint:#F0F0F0; --gold:#8A8A8A; --ink:#0A0A0A; --muted:#6B6B6B; --paper:#FFFFFF; --line:#DDDDDD; --surface:#FFFFFF; } /* ---------- DARK MODE ---------- Applies on top of whichever theme is active. Accent colours stay the same (brand identity), only surfaces/text invert. */ [data-mode="dark"]{ --ink:#F3F4F8; --muted:#A6ACC4; --paper:#0E1226; --line:#242A47; --surface:#161B33; } [data-mode="dark"] .card, [data-mode="dark"] .auth-card, [data-mode="dark"] .table-wrap, [data-mode="dark"] .modal{ background:var(--surface); } /* ============ RESET & BASE ============ */ *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth} body{ font-family:var(--font-body); background:var(--paper); color:var(--ink); line-height:1.6; transition:background .25s ease,color .25s ease; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{text-decoration:none;color:inherit} ul{list-style:none} button{font-family:inherit} .container{max-width:1180px;margin:0 auto;padding:0 24px} .container-sm{max-width:820px;margin:0 auto;padding:0 24px} /* ============ TYPOGRAPHY ============ */ h1,h2,h3,h4{font-weight:800;letter-spacing:-.01em;line-height:1.15} .text-muted{color:var(--muted)} /* ============ BUTTONS ============ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; font-weight:700;font-size:.95rem;padding:13px 26px;border-radius:99px; border:none;cursor:pointer;transition:.2s;text-align:center; } .btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.15)} .btn-primary:hover{background:var(--accent-deep);transform:translateY(-2px)} .btn-outline{background:transparent;color:var(--ink);border:1.5px solid var(--line)} .btn-outline:hover{border-color:var(--accent);color:var(--accent)} .btn-block{width:100%} .btn-sm{padding:9px 18px;font-size:.85rem} .btn-danger{background:#E5484D;color:#fff} .btn-danger:hover{background:#C63A3F} .btn:disabled{opacity:.6;cursor:not-allowed} /* ============ FORMS ============ */ .form-group{margin-bottom:20px} .form-label{display:block;font-weight:700;font-size:.88rem;margin-bottom:8px;color:var(--ink)} .form-control{ width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid var(--line); background:var(--surface);color:var(--ink);font-family:inherit;font-size:.95rem;transition:.2s; } .form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-tint)} .form-hint{font-size:.8rem;color:var(--muted);margin-top:6px} .form-error{font-size:.8rem;color:#E5484D;margin-top:6px} .input-icon-wrap{position:relative} .input-icon-wrap i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)} .input-icon-wrap .form-control{padding-left:44px} .toggle-pass{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);cursor:pointer} .checkbox-row{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--muted)} /* ============ ALERTS / FLASH MESSAGES ============ */ .alert{padding:14px 18px;border-radius:12px;font-size:.9rem;margin-bottom:18px;display:flex;align-items:center;gap:10px} .alert-success{background:#E6F7EE;color:#0F9D58} .alert-error{background:#FDEBEC;color:#E5484D} .alert-info{background:var(--accent-tint);color:var(--accent)} /* ============ AUTH PAGES (login/register/forgot/reset) ============ */ .auth-shell{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:var(--paper)} .auth-side{ position:relative;display:flex;flex-direction:column;justify-content:space-between; padding:48px;color:#fff;overflow:hidden; background-size:cover;background-position:center; } .auth-side::before{ content:"";position:absolute;inset:0; background:linear-gradient(160deg,rgba(9,16,48,.92) 0%,var(--accent-deep,#1436B8) 55%,rgba(9,16,48,.75) 100%); opacity:.88; } .auth-side::after{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 80% 15%,rgba(255,255,255,.14),transparent 45%), radial-gradient(circle at 10% 85%,rgba(255,255,255,.08),transparent 40%); } .auth-side>*{position:relative;z-index:1} .auth-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.3rem} .auth-brand .mark{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);display:grid;place-items:center;font-size:1.1rem;overflow:hidden} .auth-brand .mark img{width:100%;height:100%;object-fit:cover} .auth-side h2{font-size:2rem;max-width:380px;margin-bottom:12px} .auth-side p{color:rgba(255,255,255,.85);max-width:380px} .auth-quote{font-size:.85rem;color:rgba(255,255,255,.7)} /* Floating polaroid-style gift card, echoing the WrapSend hero treatment */ .auth-float-card{ position:absolute;right:8%;top:16%;width:200px;background:#fff;border-radius:16px; box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden;z-index:2; animation:authFloat 5s ease-in-out infinite; } .auth-float-card img{width:100%;height:140px;object-fit:cover;display:block} .auth-float-card .afc-body{padding:12px 14px;color:var(--ink)} .auth-float-card .afc-body b{font-size:.82rem;display:block} .auth-float-card .afc-body small{color:var(--muted);font-size:.7rem} .auth-badge{ position:absolute;left:6%;bottom:22%;z-index:2;background:rgba(255,255,255,.14);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25);color:#fff;border-radius:99px;padding:9px 16px;font-size:.8rem;font-weight:700; display:flex;align-items:center;gap:8px;animation:authFloat 4.5s ease-in-out infinite 1s; } @keyframes authFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}} .auth-main{display:flex;align-items:center;justify-content:center;padding:40px} .auth-card{width:100%;max-width:420px} .auth-card h1{font-size:1.7rem;margin-bottom:6px} .auth-card .sub{color:var(--muted);font-size:.92rem;margin-bottom:30px} .auth-links{display:flex;justify-content:space-between;font-size:.85rem;margin-top:8px;flex-wrap:wrap;gap:8px} .auth-links a{color:var(--accent);font-weight:600} .auth-foot{text-align:center;margin-top:26px;font-size:.9rem;color:var(--muted)} .auth-foot a{color:var(--accent);font-weight:700} .divider-or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.8rem;margin:22px 0} .divider-or::before,.divider-or::after{content:"";flex:1;height:1px;background:var(--line)} @media(max-width:900px){ .auth-shell{grid-template-columns:1fr} .auth-side{display:none} } /* ============ TOP NAV (logged-out site) ============ */ .site-nav{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line)} .site-nav .inner{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem} .brand .mark{width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;display:grid;place-items:center;overflow:hidden} .brand .mark img{width:100%;height:100%;object-fit:cover} .nav-links{display:flex;gap:28px;font-weight:600;font-size:.92rem} .nav-links a{opacity:.75} .nav-links a:hover{opacity:1;color:var(--accent)} .nav-cta{display:flex;align-items:center;gap:12px} /* ============ MODE / THEME TOGGLES ============ */ .mode-toggle{ width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface); color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:.2s;font-size:1rem; } .mode-toggle:hover{border-color:var(--accent);color:var(--accent)} /* ============ APP SHELL (dashboard + admin) ============ */ .app-shell{display:flex;min-height:100vh;background:var(--paper)} .sidebar{ width:264px;background:var(--surface);border-right:1px solid var(--line); padding:26px 18px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto; transition:.25s; } .sidebar .brand{padding:8px 10px 22px} .side-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800;padding:16px 12px 8px} .side-link{ display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px; font-weight:600;font-size:.92rem;color:var(--muted);transition:.18s; } .side-link i{width:18px;text-align:center;color:var(--muted)} .side-link:hover{background:var(--accent-tint);color:var(--accent)} .side-link:hover i{color:var(--accent)} .side-link.active{background:var(--accent);color:#fff} .side-link.active i{color:#fff} .sidebar-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)} .main-col{flex:1;min-width:0;display:flex;flex-direction:column} .topbar{ height:72px;display:flex;align-items:center;justify-content:space-between; padding:0 28px;border-bottom:1px solid var(--line);background:var(--surface);position:sticky;top:0;z-index:20; } .topbar-left{display:flex;align-items:center;gap:14px} .topbar h1{font-size:1.15rem} .hamburger-btn{display:none;background:none;border:none;font-size:1.2rem;color:var(--ink);cursor:pointer} .topbar-right{display:flex;align-items:center;gap:14px} .avatar-chip{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:99px;background:var(--paper);border:1px solid var(--line);cursor:pointer} .avatar-chip img,.avatar-chip .initials{width:34px;height:34px;border-radius:50%;object-fit:cover;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem} .avatar-chip .name{font-size:.85rem;font-weight:700} .page{padding:28px} /* ============ CARDS ============ */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px} .card-title{font-size:1.05rem;font-weight:800;margin-bottom:4px} .card-sub{font-size:.85rem;color:var(--muted);margin-bottom:20px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .stat-card{display:flex;align-items:center;gap:16px} .stat-icon{width:52px;height:52px;border-radius:14px;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-size:1.3rem} .stat-value{font-size:1.5rem;font-weight:800} .stat-label{font-size:.82rem;color:var(--muted)} /* ============ TABLES ============ */ .table-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow-x:auto;-webkit-overflow-scrolling:touch} .table-wrap table{border-radius:var(--radius-lg);overflow:hidden} table{width:100%;border-collapse:collapse;font-size:.9rem} thead{background:var(--paper)} th{text-align:left;padding:14px 18px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:800;border-bottom:1px solid var(--line)} td{padding:14px 18px;border-bottom:1px solid var(--line)} tr:last-child td{border-bottom:none} .badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:99px;font-size:.75rem;font-weight:700} .badge-success{background:#E6F7EE;color:#0F9D58} .badge-danger{background:#FDEBEC;color:#E5484D} .badge-muted{background:var(--accent-tint);color:var(--accent)} .table-actions{display:flex;gap:8px} .icon-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:.18s} .icon-btn:hover{border-color:var(--accent);color:var(--accent)} /* ============ THEME PICKER (admin site settings) ============ */ .theme-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px} .theme-swatch{border:2px solid var(--line);border-radius:14px;padding:12px;cursor:pointer;transition:.2s;text-align:center} .theme-swatch.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)} .swatch-preview{height:54px;border-radius:9px;margin-bottom:10px;display:flex;overflow:hidden} .swatch-preview span{flex:1} .theme-swatch b{font-size:.8rem;display:block} .theme-swatch small{font-size:.7rem;color:var(--muted)} /* ============ MISC ============ */ .divider{height:1px;background:var(--line);margin:24px 0} .empty-state{text-align:center;padding:60px 20px;color:var(--muted)} .empty-state i{font-size:2.4rem;color:var(--line);margin-bottom:14px} .progress{height:8px;background:var(--line);border-radius:99px;overflow:hidden} .progress span{display:block;height:100%;background:var(--accent);border-radius:99px;transition:.3s} /* ============ NOTIFICATION BELL ============ */ .notif-wrap{position:relative} .notif-dot{position:absolute;top:2px;right:2px;background:#E5484D;color:#fff;font-size:.62rem;font-weight:800;min-width:16px;height:16px;border-radius:99px;display:grid;place-items:center;padding:0 3px;line-height:1} .notif-dropdown{position:absolute;top:calc(100% + 12px);right:0;width:320px;max-height:420px;overflow-y:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:80;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.2s} .notif-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)} .notif-head{padding:14px 16px;font-weight:800;font-size:.9rem;border-bottom:1px solid var(--line)} .notif-item{display:block;padding:12px 16px;border-bottom:1px solid var(--line);transition:.15s} .notif-item:hover{background:var(--paper)} .notif-item.unread{background:var(--accent-tint)} .notif-title{font-weight:700;font-size:.85rem;margin-bottom:3px} .notif-msg{font-size:.78rem;color:var(--muted);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical} .notif-time{font-size:.7rem;color:var(--muted)} .notif-empty{padding:36px 16px;text-align:center;color:var(--muted)} .notif-empty i{font-size:1.6rem;margin-bottom:8px;display:block} .notif-view-all{display:block;text-align:center;padding:12px;font-weight:700;font-size:.82rem;color:var(--accent)} /* ============ ANNOUNCEMENT BANNER ============ */ .announcement-banner{padding:12px 24px;text-align:center;font-size:.88rem;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;position:relative} .announcement-banner.type-info{background:var(--accent-tint);color:var(--accent)} .announcement-banner.type-success{background:#E6F7EE;color:#0F9D58} .announcement-banner.type-error{background:#FDEBEC;color:#E5484D} .announcement-banner .close-banner{position:absolute;right:16px;background:none;border:none;cursor:pointer;color:inherit;opacity:.6;font-size:.9rem} .announcement-banner .close-banner:hover{opacity:1} /* ============ VERIFY EMAIL BANNER ============ */ .verify-banner{background:#FFF4E0;color:#C77E00;padding:12px 24px;text-align:center;font-size:.86rem;font-weight:600} .verify-banner a{text-decoration:underline} /* ============ WISHLIST HEART BUTTON ============ */ .wish-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);border:none;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.2s;z-index:2} .wish-btn:hover{color:#E5484D;transform:scale(1.1)} .wish-btn.active{color:#E5484D} /* ============ ADDRESS BOOK CARD ============ */ /* ============ LANDING HERO (real photo + cinematic overlay) ============ */ .landing-hero{position:relative;padding:110px 0 90px;color:#fff;overflow:hidden;background-size:cover;background-position:center} .landing-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(9,16,48,.92) 0%,var(--accent-deep,#1436B8) 55%,rgba(9,16,48,.55) 100%);opacity:.9} .landing-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(255,255,255,.14),transparent 45%)} .landing-hero>*{position:relative;z-index:1} .landing-hero h1{font-size:clamp(2.2rem,5vw,3.6rem);max-width:760px;margin:0 auto 18px} .landing-hero p{max-width:560px;margin:0 auto 32px;color:rgba(255,255,255,.85);font-size:1.1rem} .hero-float-strip{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:50px} .hero-float-card{width:150px;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3);animation:authFloat 5s ease-in-out infinite} .hero-float-card:nth-child(2){animation-delay:.6s} .hero-float-card:nth-child(3){animation-delay:1.2s} .hero-float-card img{width:100%;height:100px;object-fit:cover;display:block} .hero-float-card span{display:block;padding:8px 10px;font-size:.72rem;font-weight:700;color:var(--ink)} /* ============ FEATURE / PHOTO CARDS ============ */ .photo-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.3s} .photo-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)} .photo-card .pc-image{height:170px;overflow:hidden;position:relative} .photo-card .pc-image img{width:100%;height:100%;object-fit:cover;transition:.5s} .photo-card:hover .pc-image img{transform:scale(1.08)} .photo-card .pc-badge{position:absolute;top:12px;left:12px;background:rgba(255,255,255,.94);backdrop-filter:blur(4px);color:var(--ink);font-size:.7rem;font-weight:800;padding:5px 12px;border-radius:99px} .photo-card .pc-body{padding:20px} .photo-card .pc-body h3{font-size:1.05rem;margin-bottom:8px} .photo-card .pc-body p{color:var(--muted);font-size:.9rem} /* ============ DASHBOARD HERO BANNER (real photo) ============ */ .dash-hero{ position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff; padding:34px;background-size:cover;background-position:center;margin-bottom:24px; } .dash-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,var(--accent) 0%,var(--accent-deep) 70%);opacity:.88} .dash-hero>*{position:relative;z-index:1} .dash-hero h2{font-size:1.4rem;margin-bottom:6px} .dash-hero p{opacity:.92;margin-bottom:18px;max-width:480px} /* ============ WALLET BALANCE CARD (base — 10 fintech-style variants below) ============ */ .balance-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px 28px;margin-bottom:24px;box-shadow:var(--shadow); } .balance-card-label{font-size:.82rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px} .balance-card-amount{font-size:2.3rem;font-weight:800;color:var(--ink);margin-bottom:18px;letter-spacing:-.02em} .balance-card-actions{display:flex;gap:10px;flex-wrap:wrap} .currency-toggle{display:inline-flex;background:var(--paper);border-radius:999px;padding:3px;border:1px solid var(--line)} .currency-toggle-btn{background:none;border:none;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:700;color:var(--muted);cursor:pointer;transition:.2s} .currency-toggle-btn.active{background:var(--accent);color:#fff} .currency-toggle-on-accent .currency-toggle-btn.active{background:#fff!important;color:var(--accent)!important} /* ============ ILLUSTRATED EMPTY STATE ============ */ .empty-state-photo{width:100%;max-width:220px;margin:0 auto 20px;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)} .empty-state-photo img{width:100%;display:block} /* ============ TESTIMONIAL / AVATAR PHOTO ROW ============ */ .avatar-photo-row{display:flex;align-items:center;gap:-8px} .avatar-photo-row img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid var(--paper);margin-left:-10px} .avatar-photo-row img:first-child{margin-left:0} /* ============ DASHBOARD MODAL NOTIFICATION ============ */ .dm-overlay{position:fixed;inset:0;background:rgba(9,16,48,.6);backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.25s} .dm-overlay.open{opacity:1;visibility:visible} .dm-box{background:var(--surface);border-radius:20px;max-width:380px;width:100%;padding:32px 28px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.35);transform:translateY(16px) scale(.97);transition:.3s} .dm-overlay.open .dm-box{transform:translateY(0) scale(1)} .dm-icon{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 18px;font-size:1.6rem} .dm-box h3{font-size:1.25rem;margin-bottom:10px} .dm-box p{color:var(--muted);font-size:.92rem;margin-bottom:22px} .dm-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);font-size:1.1rem;cursor:pointer} /* ========================================================= ADMIN DASHBOARD STRUCTURAL LAYOUTS (10 variants) These change STRUCTURE — sidebar position/width/shape, content density, container boundaries — not just color. Applied only where [data-admin-layout] is present, which is only on admin pages. layout-1 is the default classic sidebar (no overrides needed). ========================================================= */ /* ---- layout-2: Compact Icon Rail — icon-only sidebar, maximizes content width ---- */ [data-admin-layout="layout-2"] .sidebar{width:76px;padding:20px 12px;align-items:center} [data-admin-layout="layout-2"] .sidebar .brand{padding:6px 0 18px;justify-content:center} [data-admin-layout="layout-2"] .sidebar .brand span:not(.mark){display:none} [data-admin-layout="layout-2"] .side-label{display:none} [data-admin-layout="layout-2"] .side-link{justify-content:center;padding:12px;width:52px} [data-admin-layout="layout-2"] .side-link-label{display:none} [data-admin-layout="layout-2"] .side-link i{width:auto;font-size:1.05rem} /* ---- layout-3: Top Navigation — sidebar becomes a horizontal bar under the topbar ---- */ [data-admin-layout="layout-3"].app-shell{flex-direction:column} [data-admin-layout="layout-3"] .sidebar{ width:100%;height:auto;position:sticky;top:0;flex-direction:row;align-items:center; overflow-x:auto;overflow-y:visible;border-right:none;border-bottom:1px solid var(--line); padding:12px 20px;gap:4px;z-index:21; } [data-admin-layout="layout-3"] .sidebar .brand{padding:0 18px 0 0;flex-shrink:0} [data-admin-layout="layout-3"] .side-label{display:none} [data-admin-layout="layout-3"] .side-link{padding:9px 14px;flex-shrink:0;white-space:nowrap} [data-admin-layout="layout-3"] .sidebar-foot{margin-top:0;margin-left:auto;padding-top:0;border-top:none;flex-shrink:0} [data-admin-layout="layout-3"] .main-col{width:100%} /* ---- layout-4: Floating Panels — detached, rounded, shadowed sidebar/topbar ---- */ [data-admin-layout="layout-4"].app-shell{background:var(--ink);background:color-mix(in srgb, var(--paper) 92%, var(--ink) 8%)} [data-admin-layout="layout-4"] .sidebar{margin:16px 0 16px 16px;height:calc(100vh - 32px);border-radius:20px;box-shadow:var(--shadow-lg);border:none} [data-admin-layout="layout-4"] .topbar{margin:16px 16px 0;border-radius:16px;box-shadow:var(--shadow);border:none;top:16px} [data-admin-layout="layout-4"] .page{padding-top:20px} /* ---- layout-5: Right Sidebar — mirrors the classic layout ---- */ [data-admin-layout="layout-5"].app-shell{flex-direction:row-reverse} [data-admin-layout="layout-5"] .sidebar{border-right:none;border-left:1px solid var(--line)} /* ---- layout-6: Boxed Contained — centered max-width content, visible page margins ---- */ [data-admin-layout="layout-6"].app-shell{background:color-mix(in srgb, var(--paper) 90%, var(--ink) 10%)} [data-admin-layout="layout-6"] .page{max-width:1240px;margin:0 auto;width:100%} [data-admin-layout="layout-6"] .topbar{max-width:1240px;margin:0 auto;width:100%;position:relative;top:auto} /* ---- layout-7: Grouped Card Nav — nav items as individual spaced-out rounded cards ---- */ [data-admin-layout="layout-7"] .sidebar{width:280px;gap:10px;padding:28px 20px} [data-admin-layout="layout-7"] .side-link{background:var(--paper);border:1px solid var(--line);padding:13px 16px;border-radius:14px} [data-admin-layout="layout-7"] .side-link.active{border-color:var(--accent)} [data-admin-layout="layout-7"] .side-label{padding-top:20px} /* ---- layout-8: Dense — smaller everything, for power users who want more on screen ---- */ [data-admin-layout="layout-8"] .sidebar{width:224px;padding:16px 12px} [data-admin-layout="layout-8"] .side-link{padding:8px 12px;font-size:.85rem;border-radius:8px} [data-admin-layout="layout-8"] .topbar{height:56px;padding:0 18px} [data-admin-layout="layout-8"] .topbar h1{font-size:1rem} [data-admin-layout="layout-8"] .page{padding:16px} [data-admin-layout="layout-8"] .card{padding:16px;border-radius:12px} /* ---- layout-9: Spacious — generous whitespace, larger rounded cards ---- */ [data-admin-layout="layout-9"] .sidebar{width:296px;padding:34px 24px} [data-admin-layout="layout-9"] .side-link{padding:14px 18px;font-size:.98rem} [data-admin-layout="layout-9"] .topbar{height:84px;padding:0 36px} [data-admin-layout="layout-9"] .page{padding:40px} [data-admin-layout="layout-9"] .card{padding:32px;border-radius:20px} /* ---- layout-10: Minimal Borderless — flush, seamless, no dividing lines ---- */ [data-admin-layout="layout-10"] .sidebar{border-right:none;background:var(--paper)} [data-admin-layout="layout-10"] .topbar{border-bottom:none;background:var(--paper)} [data-admin-layout="layout-10"] .card{border:none;box-shadow:var(--shadow)} [data-admin-layout="layout-10"] .side-link.active{background:var(--ink);color:var(--paper)} [data-admin-layout="layout-10"] .side-link.active i{color:var(--paper)} /* ========================================================= USER DASHBOARD STRUCTURAL LAYOUTS (10 variants) Same approach as the admin layouts, scoped separately via [data-user-layout] so admin and user dashboards are fully independent choices. ulayout-1 is the default (no overrides). ========================================================= */ [data-user-layout="ulayout-2"] .sidebar{width:76px;padding:20px 12px;align-items:center} [data-user-layout="ulayout-2"] .sidebar .brand{padding:6px 0 18px;justify-content:center} [data-user-layout="ulayout-2"] .sidebar .brand span:not(.mark){display:none} [data-user-layout="ulayout-2"] .side-label{display:none} [data-user-layout="ulayout-2"] .side-link{justify-content:center;padding:12px;width:52px} [data-user-layout="ulayout-2"] .side-link-label{display:none} [data-user-layout="ulayout-2"] .side-link i{width:auto;font-size:1.05rem} [data-user-layout="ulayout-3"].app-shell{flex-direction:column} [data-user-layout="ulayout-3"] .sidebar{ width:100%;height:auto;position:sticky;top:0;flex-direction:row;align-items:center; overflow-x:auto;overflow-y:visible;border-right:none;border-bottom:1px solid var(--line); padding:12px 20px;gap:4px;z-index:21; } [data-user-layout="ulayout-3"] .sidebar .brand{padding:0 18px 0 0;flex-shrink:0} [data-user-layout="ulayout-3"] .side-label{display:none} [data-user-layout="ulayout-3"] .side-link{padding:9px 14px;flex-shrink:0;white-space:nowrap} [data-user-layout="ulayout-3"] .sidebar-foot{margin-top:0;margin-left:auto;padding-top:0;border-top:none;flex-shrink:0} [data-user-layout="ulayout-3"] .main-col{width:100%} [data-user-layout="ulayout-4"].app-shell{background:color-mix(in srgb, var(--paper) 92%, var(--ink) 8%)} [data-user-layout="ulayout-4"] .sidebar{margin:16px 0 16px 16px;height:calc(100vh - 32px);border-radius:20px;box-shadow:var(--shadow-lg);border:none} [data-user-layout="ulayout-4"] .topbar{margin:16px 16px 0;border-radius:16px;box-shadow:var(--shadow);border:none;top:16px} [data-user-layout="ulayout-4"] .page{padding-top:20px} [data-user-layout="ulayout-5"].app-shell{flex-direction:row-reverse} [data-user-layout="ulayout-5"] .sidebar{border-right:none;border-left:1px solid var(--line)} [data-user-layout="ulayout-6"].app-shell{background:color-mix(in srgb, var(--paper) 90%, var(--ink) 10%)} [data-user-layout="ulayout-6"] .page{max-width:1240px;margin:0 auto;width:100%} [data-user-layout="ulayout-6"] .topbar{max-width:1240px;margin:0 auto;width:100%;position:relative;top:auto} [data-user-layout="ulayout-7"] .sidebar{width:280px;gap:10px;padding:28px 20px} [data-user-layout="ulayout-7"] .side-link{background:var(--paper);border:1px solid var(--line);padding:13px 16px;border-radius:14px} [data-user-layout="ulayout-7"] .side-link.active{border-color:var(--accent)} [data-user-layout="ulayout-7"] .side-label{padding-top:20px} [data-user-layout="ulayout-8"] .sidebar{width:224px;padding:16px 12px} [data-user-layout="ulayout-8"] .side-link{padding:8px 12px;font-size:.85rem;border-radius:8px} [data-user-layout="ulayout-8"] .topbar{height:56px;padding:0 18px} [data-user-layout="ulayout-8"] .topbar h1{font-size:1rem} [data-user-layout="ulayout-8"] .page{padding:16px} [data-user-layout="ulayout-8"] .card{padding:16px;border-radius:12px} [data-user-layout="ulayout-9"] .sidebar{width:296px;padding:34px 24px} [data-user-layout="ulayout-9"] .side-link{padding:14px 18px;font-size:.98rem} [data-user-layout="ulayout-9"] .topbar{height:84px;padding:0 36px} [data-user-layout="ulayout-9"] .page{padding:40px} [data-user-layout="ulayout-9"] .card{padding:32px;border-radius:20px} [data-user-layout="ulayout-10"] .sidebar{border-right:none;background:var(--paper)} [data-user-layout="ulayout-10"] .topbar{border-bottom:none;background:var(--paper)} [data-user-layout="ulayout-10"] .card{border:none;box-shadow:var(--shadow)} [data-user-layout="ulayout-10"] .side-link.active{background:var(--ink);color:var(--paper)} [data-user-layout="ulayout-10"] .side-link.active i{color:var(--paper)} /* ========================================================= SITE-WIDE DESIGN TEMPLATES (9 additional, on top of dt-1 default) Applied via [data-design-template] on — covers EVERY page (landing, login, register, recovery, dashboard, admin) since includes/head.php is shared by all of them. Each template is a genuinely distinct visual language: shape, shadow, and decoration philosophy — not just a color swap (themes already handle color). ========================================================= */ /* ---- STRUCTURAL ARRANGEMENT VARIANTS (auth pages) ---- */ /* dt-2 Neo-Brutalist: side panel on top as a full-width banner, form below — stacked, not split */ [data-design-template="dt-2"] .auth-shell{grid-template-columns:1fr;grid-template-rows:auto 1fr} [data-design-template="dt-2"] .auth-side{padding:28px 40px;min-height:auto} [data-design-template="dt-2"] .auth-side h2{font-size:1.4rem;max-width:none} [data-design-template="dt-2"] .auth-float-card,[data-design-template="dt-2"] .auth-badge{display:none} /* dt-4 Glassmorphism: photo becomes a full-bleed BACKGROUND behind a centered floating card — no split at all */ [data-design-template="dt-4"] .auth-shell{grid-template-columns:1fr;position:relative} [data-design-template="dt-4"] .auth-side{position:absolute;inset:0;width:100%;z-index:0} [data-design-template="dt-4"] .auth-main{position:relative;z-index:1;min-height:100vh} [data-design-template="dt-4"] .auth-card{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;padding:40px;border:1px solid rgba(255,255,255,.5)} /* dt-5 Editorial: panel moves to the RIGHT, narrower split (35/65) */ [data-design-template="dt-5"] .auth-shell{grid-template-columns:2fr 3fr} [data-design-template="dt-5"] .auth-side{order:2} [data-design-template="dt-5"] .auth-main{order:1} /* dt-6 Vibrant Gradient: wider photo panel (60/40), gradient overlay intensified */ [data-design-template="dt-6"] .auth-shell{grid-template-columns:3fr 2fr} /* dt-8 Dark Premium: no split — full-width centered card on a dark canvas, photo panel removed entirely */ [data-design-template="dt-8"] .auth-shell{grid-template-columns:1fr} [data-design-template="dt-8"] .auth-side{display:none} [data-design-template="dt-8"] .auth-main{background:radial-gradient(circle at 30% 20%,color-mix(in srgb, var(--gold) 8%, transparent),transparent 50%)} /* dt-9 Playful Rounded: side panel becomes a big rounded card floating WITHIN the split (inset margin all around) */ [data-design-template="dt-9"] .auth-side{margin:20px;border-radius:32px;min-height:calc(100vh - 40px)} /* dt-10 Retro/Vintage: panel on top, stacked like dt-2 but with a shorter banner height */ [data-design-template="dt-10"] .auth-shell{grid-template-columns:1fr;grid-template-rows:220px 1fr} [data-design-template="dt-10"] .auth-side{padding:24px 36px} [data-design-template="dt-10"] .auth-side h2{font-size:1.3rem;max-width:none} [data-design-template="dt-10"] .auth-float-card{display:none} /* ---- STRUCTURAL ARRANGEMENT VARIANTS (landing hero) ---- */ /* dt-2 Neo-Brutalist: cards column comes FIRST, solid ink background instead of photo slideshow */ [data-design-template="dt-2"] .lp-hero-slides{display:none} [data-design-template="dt-2"] .lp-hero{background:var(--ink)} [data-design-template="dt-2"] .lp-hero-overlay{display:none} [data-design-template="dt-2"] .lp-hero-content{grid-template-columns:.9fr 1.1fr} [data-design-template="dt-2"] .lp-hero-cards{order:-1} /* dt-4 Glassmorphism: single centered column, floating cards hidden, everything wrapped in a glass panel */ [data-design-template="dt-4"] .lp-hero-content{grid-template-columns:1fr;max-width:720px;margin:0 auto;text-align:center;background:rgba(255,255,255,.12);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:32px;padding:56px;border:1px solid rgba(255,255,255,.25)} [data-design-template="dt-4"] .lp-hero-cards{display:none} [data-design-template="dt-4"] .lp-hero-ctas{justify-content:center} [data-design-template="dt-4"] .lp-hero-stats{justify-content:center} /* dt-5 Editorial: single centered column like a magazine masthead, no floating cards, no photo slideshow */ [data-design-template="dt-5"] .lp-hero-slides,[data-design-template="dt-5"] .lp-hero-overlay{display:none} [data-design-template="dt-5"] .lp-hero{background:var(--paper);color:var(--ink);min-height:auto;padding:160px 0 100px} [data-design-template="dt-5"] .lp-hero-content{grid-template-columns:1fr;max-width:760px;margin:0 auto;text-align:center} [data-design-template="dt-5"] .lp-hero-cards{display:none} [data-design-template="dt-5"] .lp-hero-ctas,[data-design-template="dt-5"] .lp-hero-stats{justify-content:center} [data-design-template="dt-5"] .lp-eyebrow{background:transparent;border:1px solid var(--ink);color:var(--ink)} /* dt-6 Vibrant Gradient: cards enlarged and given more visual weight (wider column) */ [data-design-template="dt-6"] .lp-hero-content{grid-template-columns:1fr 1.2fr} /* dt-8 Dark Premium: photo slideshow removed, deep radial-gradient backdrop, single centered column */ [data-design-template="dt-8"] .lp-hero-slides{display:none} [data-design-template="dt-8"] .lp-hero{background:radial-gradient(circle at 70% 20%,color-mix(in srgb, var(--gold) 10%, transparent),var(--ink) 60%)} [data-design-template="dt-8"] .lp-hero-overlay{display:none} [data-design-template="dt-8"] .lp-hero-content{grid-template-columns:1fr;max-width:680px;margin:0 auto;text-align:center} [data-design-template="dt-8"] .lp-hero-cards{display:none} [data-design-template="dt-8"] .lp-hero-ctas,[data-design-template="dt-8"] .lp-hero-stats{justify-content:center} /* dt-9 Playful Rounded: cards stacked ABOVE the text, centered, full width */ [data-design-template="dt-9"] .lp-hero-content{grid-template-columns:1fr;text-align:center;max-width:900px;margin:0 auto} [data-design-template="dt-9"] .lp-hero-cards{order:-1;position:static;height:auto;display:flex;gap:16px;justify-content:center;margin-bottom:32px} [data-design-template="dt-9"] .lp-hero-cards .lp-fl-card{position:static;opacity:1;transform:none;width:150px} [data-design-template="dt-9"] .lp-hero-ctas,[data-design-template="dt-9"] .lp-hero-stats{justify-content:center} /* dt-10 Retro/Vintage: text column widened, cards shrunk into a small corner accent instead of a full column */ [data-design-template="dt-10"] .lp-hero-content{grid-template-columns:1.6fr .4fr} [data-design-template="dt-10"] .lp-hero-cards{transform:scale(.7);transform-origin:top right} /* ---- STRUCTURAL ARRANGEMENT VARIANTS (dashboard) ---- */ /* ---- STAT CARDS, PHOTO CARDS, TABLES — full 10-template coverage. These are what users actually see throughout the REAL dashboard — orders list, gift catalog, wishlist, transaction history — so this is what makes switching templates feel like a genuinely different platform, not just a different home-page balance card. ---- */ /* dt-1 default already looks correct as-is (base .stat-card/.photo-card/.table-wrap rules) */ [data-design-template="dt-2"] .photo-card{border:2.5px solid var(--ink);border-radius:2px;box-shadow:4px 4px 0 var(--ink)} [data-design-template="dt-2"] .table-wrap{border:2.5px solid var(--ink);border-radius:2px} [data-design-template="dt-2"] .table-wrap table thead{border-bottom:2.5px solid var(--ink)} [data-design-template="dt-2"] .badge{border-radius:2px;font-weight:800} [data-design-template="dt-3"] .stat-card{border:none;box-shadow:8px 8px 20px rgba(0,0,0,.06),-8px -8px 20px rgba(255,255,255,.7);border-radius:22px} [data-design-template="dt-3"] .photo-card{border:none;box-shadow:8px 8px 20px rgba(0,0,0,.06),-8px -8px 20px rgba(255,255,255,.7);border-radius:22px} [data-design-template="dt-3"] .table-wrap{border:none;box-shadow:8px 8px 20px rgba(0,0,0,.06),-8px -8px 20px rgba(255,255,255,.7)} [data-design-template="dt-4"] .stat-card,[data-design-template="dt-4"] .photo-card,[data-design-template="dt-4"] .table-wrap{ background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.5); } [data-design-template="dt-5"] .stat-card{border:none;border-bottom:2px solid var(--ink);border-radius:0;padding-bottom:14px} [data-design-template="dt-5"] .photo-card{border:none;border-radius:0;box-shadow:none} [data-design-template="dt-5"] .photo-card .pc-body h3{font-family:Georgia,serif;font-weight:400} [data-design-template="dt-5"] .table-wrap{border:none;border-top:2px solid var(--ink);box-shadow:none;border-radius:0} [data-design-template="dt-5"] .table-wrap table thead{font-family:Georgia,serif} [data-design-template="dt-6"] .stat-icon{background:linear-gradient(135deg,var(--accent),var(--gold))!important;color:#fff!important} [data-design-template="dt-6"] .photo-card:hover{box-shadow:0 16px 32px color-mix(in srgb, var(--accent) 30%, transparent)} [data-design-template="dt-6"] .badge-success{background:linear-gradient(120deg,var(--accent),var(--gold));color:#fff} [data-design-template="dt-7"] .stat-card,[data-design-template="dt-7"] .photo-card{box-shadow:none;border:1px solid var(--line);border-radius:6px} [data-design-template="dt-7"] .table-wrap{box-shadow:none;border-radius:6px} [data-design-template="dt-7"] .badge{border-radius:4px} [data-design-template="dt-8"] .stat-card,[data-design-template="dt-8"] .photo-card,[data-design-template="dt-8"] .table-wrap{ background:var(--surface);border:1px solid var(--line);box-shadow:0 12px 30px rgba(0,0,0,.3); } [data-design-template="dt-8"] .stat-icon{background:color-mix(in srgb, var(--gold) 15%, transparent)!important;color:var(--gold)!important} [data-design-template="dt-8"] .table-wrap table thead{color:var(--gold)} [data-design-template="dt-9"] .stat-card{border-radius:24px} [data-design-template="dt-9"] .photo-card{border-radius:26px;border:2px solid var(--line)} [data-design-template="dt-9"] .table-wrap{border-radius:24px} [data-design-template="dt-9"] .badge{border-radius:999px;font-weight:800} [data-design-template="dt-10"] .stat-card,[data-design-template="dt-10"] .photo-card{border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.08);border-radius:8px} [data-design-template="dt-10"] .table-wrap{border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.08);border-radius:8px} [data-design-template="dt-10"] .table-wrap table thead{font-family:Georgia,serif;font-style:italic} /* ---- FINTECH-STYLE BALANCE CARD — 10 distinct archetypes ---- */ /* dt-2 Neo-Brutalist: stamped "punch card" — thick border, hard shadow, monospace ledger number */ [data-design-template="dt-2"] .balance-card{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);border-radius:4px;background:var(--paper)} [data-design-template="dt-2"] .balance-card-amount{font-family:monospace;font-weight:900} [data-design-template="dt-2"] .balance-card-label{font-family:monospace} /* dt-3 Soft Neumorphism: embossed wallet card, pressed into the surface, no hard edges */ [data-design-template="dt-3"] .balance-card{border:none;border-radius:24px;box-shadow:10px 10px 24px rgba(0,0,0,.07),-10px -10px 24px rgba(255,255,255,.75);background:var(--paper)} /* dt-4 Glassmorphism: frosted floating card, like a modern neobank app (Revolut/N26 style) */ [data-design-template="dt-4"] .balance-card{background:rgba(255,255,255,.5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.5);border-radius:24px} [data-design-template="dt-4"] .balance-card-amount{background:linear-gradient(120deg,var(--accent),var(--accent-deep));-webkit-background-clip:text;background-clip:text;color:transparent} /* dt-5 Editorial: no card chrome at all — just a large statement-style number, like a bank statement header */ [data-design-template="dt-5"] .balance-card{background:transparent;border:none;box-shadow:none;border-radius:0;border-bottom:2px solid var(--ink);padding:0 0 22px} [data-design-template="dt-5"] .balance-card-amount{font-family:Georgia,serif;font-weight:400;font-size:2.8rem} /* dt-6 Vibrant Gradient: full gradient balance card with glow — like Cash App / Chime */ [data-design-template="dt-6"] .balance-card{background:linear-gradient(135deg,var(--accent),var(--gold));border:none;box-shadow:0 16px 40px color-mix(in srgb, var(--accent) 40%, transparent)} [data-design-template="dt-6"] .balance-card-label,[data-design-template="dt-6"] .balance-card-amount{color:#fff} [data-design-template="dt-6"] .balance-card .btn-outline{border-color:rgba(255,255,255,.6);color:#fff} /* dt-7 Corporate Minimal: flat understated row, like a traditional bank web portal */ [data-design-template="dt-7"] .balance-card{box-shadow:none;border-radius:6px;padding:20px 24px} [data-design-template="dt-7"] .balance-card-amount{font-size:1.9rem;font-weight:700} /* dt-8 Dark Premium: metal card proportions — like Apple Card / Revolut Metal, gold engraved numerals */ [data-design-template="dt-8"] .balance-card{ background:linear-gradient(135deg,#1a1204,var(--ink) 60%);border:1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius:20px;aspect-ratio:1.9/1;display:flex;flex-direction:column;justify-content:center;max-width:420px; } [data-design-template="dt-8"] .balance-card-label{color:color-mix(in srgb, var(--gold) 70%, #fff)} [data-design-template="dt-8"] .balance-card-amount{color:var(--gold);font-family:monospace;letter-spacing:.03em} /* dt-9 Playful Rounded: big rounded chip, like a consumer payment app (PayPal/Venmo style) */ [data-design-template="dt-9"] .balance-card{border-radius:32px;border:2px solid var(--line);text-align:center} [data-design-template="dt-9"] .balance-card-amount{font-size:2.8rem} [data-design-template="dt-9"] .balance-card-actions{justify-content:center} [data-design-template="dt-9"] .balance-card .btn{border-radius:999px} /* dt-10 Retro/Vintage: bank passbook / ledger page style, serif numerals, thick border */ [data-design-template="dt-10"] .balance-card{border:2px solid var(--ink);box-shadow:4px 4px 0 rgba(0,0,0,.08);border-radius:8px} [data-design-template="dt-10"] .balance-card-amount{font-family:Georgia,serif} [data-design-template="dt-10"] .balance-card-label{font-family:Georgia,serif;text-transform:none;letter-spacing:0;font-style:italic} [data-design-template="dt-2"] .dash-hero{border:2.5px solid var(--ink);border-radius:2px} [data-design-template="dt-2"] .grid-3{grid-template-columns:repeat(3,1fr);gap:0} [data-design-template="dt-2"] .grid-3 .stat-card{border-radius:0;margin-left:-2.5px} [data-design-template="dt-2"] .grid-3 .stat-card:first-child{margin-left:0} [data-design-template="dt-4"] .dash-hero{background:rgba(255,255,255,.15)!important;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.3)} [data-design-template="dt-5"] .dash-hero{background:var(--paper)!important;color:var(--ink);border-top:2px solid var(--ink);border-radius:0;padding:32px 0} [data-design-template="dt-5"] .dash-hero .btn{background:var(--ink)!important;color:var(--paper)!important} [data-design-template="dt-5"] .grid-3{grid-template-columns:1fr;gap:0} [data-design-template="dt-5"] .grid-3 .stat-card{border:none;border-bottom:1px solid var(--line);border-radius:0;padding:18px 0} [data-design-template="dt-8"] .dash-hero{background:linear-gradient(135deg,#1a1204,var(--ink))!important} [data-design-template="dt-9"] .grid-3{gap:14px} [data-design-template="dt-9"] .grid-3 .stat-card{border-radius:24px} /* ---- Neo-Brutalist (continued) ---- */ [data-design-template="dt-2"]{--radius:2px;--radius-lg:2px;--shadow:4px 4px 0 var(--ink);--shadow-lg:6px 6px 0 var(--ink)} [data-design-template="dt-2"] .card{border:2.5px solid var(--ink);box-shadow:var(--shadow-lg)} [data-design-template="dt-2"] .btn{border-radius:2px;font-weight:800;text-transform:uppercase;letter-spacing:.03em} [data-design-template="dt-2"] .btn-primary{border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink)} [data-design-template="dt-2"] .btn-primary:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)} [data-design-template="dt-2"] .btn-outline{border:2.5px solid var(--ink)} [data-design-template="dt-2"] .form-control{border:2.5px solid var(--ink);border-radius:2px} [data-design-template="dt-2"] .badge{border-radius:2px;border:1.5px solid currentColor} [data-design-template="dt-2"] .sidebar,[data-design-template="dt-2"] .topbar{border-color:var(--ink);border-width:2.5px} /* ---- dt-3: Soft Neumorphism — very rounded, dual soft shadows, low-contrast surfaces ---- */ [data-design-template="dt-3"]{--radius:22px;--radius-lg:28px;--shadow:8px 8px 20px rgba(0,0,0,.06),-8px -8px 20px rgba(255,255,255,.7);--shadow-lg:10px 10px 28px rgba(0,0,0,.08),-10px -10px 28px rgba(255,255,255,.8)} [data-design-template="dt-3"] .card{border:none;box-shadow:var(--shadow-lg);background:var(--paper)} [data-design-template="dt-3"] .btn{border-radius:16px} [data-design-template="dt-3"] .btn-primary{box-shadow:var(--shadow),0 8px 20px rgba(0,0,0,.12);border:none} [data-design-template="dt-3"] .form-control{border:none;background:var(--paper);box-shadow:inset 3px 3px 8px rgba(0,0,0,.05),inset -3px -3px 8px rgba(255,255,255,.6);border-radius:16px} [data-design-template="dt-3"] .sidebar,[data-design-template="dt-3"] .topbar{border:none;box-shadow:var(--shadow)} /* ---- dt-4: Glassmorphism — translucent blurred panels over a gradient backdrop ---- */ [data-design-template="dt-4"]{background:linear-gradient(135deg,var(--accent-tint),var(--paper) 60%)} [data-design-template="dt-4"] .app-shell{background:transparent} [data-design-template="dt-4"] .card{background:rgba(255,255,255,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.4);box-shadow:0 8px 32px rgba(0,0,0,.08)} [data-design-template="dt-4"] .sidebar,[data-design-template="dt-4"] .topbar{background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.4)} [data-design-template="dt-4"] .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-deep));border:1px solid rgba(255,255,255,.3)} [data-design-template="dt-4"] .form-control{background:rgba(255,255,255,.5);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5)} /* ---- dt-5: Editorial — serif headings, hairline dividers, generous whitespace, muted ---- */ [data-design-template="dt-5"]{--radius:4px;--radius-lg:6px;--shadow:none;--shadow-lg:none} [data-design-template="dt-5"] h1,[data-design-template="dt-5"] h2,[data-design-template="dt-5"] h3,[data-design-template="dt-5"] .card-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:0} [data-design-template="dt-5"] .card{border:none;border-top:2px solid var(--ink);box-shadow:none;border-radius:0;padding-top:22px} [data-design-template="dt-5"] .btn{border-radius:2px;letter-spacing:.04em} [data-design-template="dt-5"] .btn-primary{box-shadow:none} [data-design-template="dt-5"] .form-control{border:none;border-bottom:2px solid var(--line);border-radius:0;background:transparent;padding-left:2px} [data-design-template="dt-5"] .form-control:focus{box-shadow:none;border-color:var(--ink)} [data-design-template="dt-5"] .sidebar,[data-design-template="dt-5"] .topbar{box-shadow:none} /* ---- dt-6: Vibrant Gradient — bold gradient washes, glowing accents, high energy ---- */ [data-design-template="dt-6"]{--radius:18px;--radius-lg:24px} [data-design-template="dt-6"] .card{background:linear-gradient(155deg,var(--surface),var(--accent-tint) 140%);border:none;box-shadow:0 4px 24px rgba(0,0,0,.06)} [data-design-template="dt-6"] .btn-primary{background:linear-gradient(120deg,var(--accent),var(--gold));border:none;box-shadow:0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent)} [data-design-template="dt-6"] .btn-primary:hover{box-shadow:0 12px 32px color-mix(in srgb, var(--accent) 55%, transparent)} [data-design-template="dt-6"] .stat-icon,[data-design-template="dt-6"] .dm-icon{background:linear-gradient(135deg,var(--accent),var(--gold))!important;color:#fff!important} [data-design-template="dt-6"] .sidebar .side-link.active{background:linear-gradient(120deg,var(--accent),var(--accent-deep));color:#fff} [data-design-template="dt-6"] .sidebar .side-link.active i{color:#fff} /* ---- dt-7: Corporate Minimal — flat, conservative, thin borders, near-zero shadow ---- */ [data-design-template="dt-7"]{--radius:6px;--radius-lg:8px;--shadow:none;--shadow-lg:0 2px 8px rgba(12,21,59,.06)} [data-design-template="dt-7"] .card{box-shadow:none;border:1px solid var(--line)} [data-design-template="dt-7"] .btn{border-radius:6px;font-weight:600} [data-design-template="dt-7"] .btn-primary{box-shadow:none} [data-design-template="dt-7"] .btn-primary:hover{transform:none;filter:brightness(.92)} [data-design-template="dt-7"] .badge{border-radius:4px} /* ---- dt-8: Dark Premium — deep charcoal base with gold-glow accents, always-dark aesthetic ---- */ [data-design-template="dt-8"]{--ink:#F3F4F8;--muted:#A6ACC4;--paper:#0B0E1F;--line:#232840;--surface:#141830;--radius:14px;--radius-lg:18px} [data-design-template="dt-8"] .card{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 20px 50px rgba(0,0,0,.4)} [data-design-template="dt-8"] .btn-primary{background:linear-gradient(135deg,var(--gold),color-mix(in srgb, var(--gold) 70%, #fff));color:#1a1204;box-shadow:0 8px 24px color-mix(in srgb, var(--gold) 35%, transparent);font-weight:700} [data-design-template="dt-8"] .sidebar,[data-design-template="dt-8"] .topbar{background:var(--surface);border-color:var(--line)} [data-design-template="dt-8"] .sidebar .side-link.active{background:color-mix(in srgb, var(--gold) 15%, transparent);color:var(--gold)} [data-design-template="dt-8"] .sidebar .side-link.active i{color:var(--gold)} [data-design-template="dt-8"] .form-control{background:var(--paper);border-color:var(--line);color:var(--ink)} /* ---- dt-9: Playful Rounded — pill everything, bouncy, bright, friendly ---- */ [data-design-template="dt-9"]{--radius:20px;--radius-lg:26px} [data-design-template="dt-9"] .card{border-radius:26px;border:2px solid var(--line)} [data-design-template="dt-9"] .btn{border-radius:999px;font-weight:800} [data-design-template="dt-9"] .btn-primary{box-shadow:0 6px 0 var(--accent-deep)} [data-design-template="dt-9"] .btn-primary:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--accent-deep)} [data-design-template="dt-9"] .btn-primary:active{transform:translateY(6px);box-shadow:none} [data-design-template="dt-9"] .form-control{border-radius:999px;border:2px solid var(--line);padding-left:20px} [data-design-template="dt-9"] .badge{border-radius:999px;font-weight:800} [data-design-template="dt-9"] .side-link{border-radius:999px} [data-design-template="dt-9"] .side-link.active{background:var(--accent);color:#fff} [data-design-template="dt-9"] .side-link.active i{color:#fff} /* ---- dt-10: Retro/Vintage — warm cream, thick borders, terracotta/mustard palette feel, mixed serif+mono ---- */ [data-design-template="dt-10"]{--radius:8px;--radius-lg:10px;--shadow:4px 4px 0 rgba(0,0,0,.08);--shadow-lg:6px 6px 0 rgba(0,0,0,.1)} [data-design-template="dt-10"] h1,[data-design-template="dt-10"] h2,[data-design-template="dt-10"] h3{font-family:Georgia,serif;letter-spacing:-.01em} [data-design-template="dt-10"] .card{border:2px solid var(--ink);box-shadow:var(--shadow-lg);background:var(--paper)} [data-design-template="dt-10"] .btn{border-radius:8px;font-family:Georgia,serif} [data-design-template="dt-10"] .btn-primary{border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)} [data-design-template="dt-10"] .btn-primary:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)} [data-design-template="dt-10"] .form-control{border:2px solid var(--ink);border-radius:8px} [data-design-template="dt-10"] .badge{border:1.5px solid currentColor;border-radius:6px} /* ============ RESPONSIVE ============ */ @media(max-width:960px){ .grid-3{grid-template-columns:1fr 1fr} .theme-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:860px){ .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);box-shadow:var(--shadow-lg)} .sidebar.open{transform:translateX(0)} .hamburger-btn{display:block} .nav-links{display:none} } /* ---- Mobile-specific per-template overrides — these correctly beat the generic index.php mobile rule that otherwise hides .lp-hero-cards and collapses every template to the same look below 860px, wiping out the whole point of picking a different template. !important is used deliberately here since it's the one thing guaranteed to win regardless of which file (index.php's own