/* ========================================================= weesa-skin.css — WeeSa client panel design system Re-skins WHMCS Twenty-One (Bootstrap 4) into a modern, RTL-first portal with a fixed sidebar + sticky topbar. Design source: WHMCS Panel handoff (teal -> violet). • Loaded LAST in includes/head.tpl. • Reversible: remove its to restore stock theme. • Light/Dark via [data-weesa-theme] on . ========================================================= */ /* ========================================================= 1. Design tokens ========================================================= */ :root{ --bg:#eef3f6; --surface:#ffffff; --surface-2:#f3f7f9; --border:#e3eaef; --text:#16242f; --muted:#647888; --heading:#0c1922; --primary:#0e9bb5; --primary-strong:#0b8298; --primary-soft:#e1f3f6; --accent:#2168c9; --success:#16a673; --success-soft:#e3f5ed; --warning:#cf8421; --warning-soft:#f8efdb; --danger:#dd524d; --danger-soft:#fae7e6; --shadow:0 6px 22px rgba(20,60,90,.07), 0 1px 3px rgba(20,60,90,.05); --sidebar:#ffffff; --c-teal:#0e9bb5; --c-teal-s:#e1f3f6; --c-violet:#7c5cdb; --c-violet-s:#eee9fb; --c-blue:#2f74e0; --c-blue-s:#e6effb; --c-green:#16a673; --c-green-s:#e2f5ed; --c-amber:#e8862a; --c-amber-s:#f9efdb; --c-pink:#d6519b; --c-pink-s:#fbe6f1; --app-bg: radial-gradient(1200px 700px at 86% -12%, rgba(124,92,219,.16), transparent 56%), radial-gradient(900px 560px at 2% 4%, rgba(14,155,181,.16), transparent 52%), radial-gradient(760px 560px at 60% 108%, rgba(214,81,155,.10), transparent 56%), var(--bg); } html[data-weesa-theme="dark"]{ --bg:#0d161e; --surface:#15222d; --surface-2:#1c2d39; --border:#273a48; --text:#e7eef3; --muted:#90a4b2; --heading:#f2f7fa; --primary:#1fb6d0; --primary-strong:#3ccadf; --primary-soft:#0f2f39; --accent:#5b9bff; --success:#2fc28a; --success-soft:#10302a; --warning:#e6a347; --warning-soft:#332810; --danger:#ef726d; --danger-soft:#37201f; --shadow:0 8px 26px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.35); --sidebar:#111c25; --c-teal:#1fb6d0; --c-teal-s:#0f2f39; --c-violet:#9b85ec; --c-violet-s:#241d3c; --c-blue:#5b9bff; --c-blue-s:#15263f; --c-green:#2fc28a; --c-green-s:#10302a; --c-amber:#eaa54a; --c-amber-s:#33280f; --c-pink:#ec74b4; --c-pink-s:#371d2d; --app-bg: radial-gradient(1200px 700px at 86% -12%, rgba(124,92,219,.20), transparent 56%), radial-gradient(900px 560px at 2% 4%, rgba(14,155,181,.18), transparent 52%), radial-gradient(760px 560px at 60% 108%, rgba(214,81,155,.13), transparent 56%), var(--bg); } /* ========================================================= 2. Base ========================================================= */ body.weesa-app, body.weesa-guest{ margin:0; background:var(--app-bg) !important; color:var(--text); font-family:Vazirmatn,Tahoma,Arial,sans-serif !important; -webkit-font-smoothing:antialiased; min-height:100vh; } .weesa-app *, .weesa-guest *{box-sizing:border-box;} .weesa-app ::selection, .weesa-guest ::selection{background:rgba(14,155,181,.22);} .weesa-app *::-webkit-scrollbar, .weesa-guest *::-webkit-scrollbar{width:11px;height:11px;} .weesa-app *::-webkit-scrollbar-thumb, .weesa-guest *::-webkit-scrollbar-thumb{ background:var(--border);border-radius:10px; border:3px solid transparent;background-clip:content-box; } .weesa-app *::-webkit-scrollbar-track, .weesa-guest *::-webkit-scrollbar-track{background:transparent;} @keyframes weesaFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} @keyframes weesaFloaty{0%,100%{transform:translate(0,0);}50%{transform:translate(14px,-18px);}} @keyframes weesaFloaty2{0%,100%{transform:translate(0,0);}50%{transform:translate(-18px,14px);}} .weesa-app .grain,.weesa-guest .grain{ position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .weesa-app a{color:var(--primary-strong);} .weesa-app a:hover{color:var(--primary);} .weesa-app h1,.weesa-app h2,.weesa-app h3,.weesa-app h4,.weesa-app h5,.weesa-app h6{color:var(--heading);} /* hide the stock WHMCS chrome we replace */ .weesa-app > #header, .weesa-app > .master-breadcrumb, .weesa-app > #footer{display:none !important;} /* ========================================================= 3. App shell ========================================================= */ .weesa-shell{display:flex;min-height:100vh;} .weesa-sidebar{ width:252px;flex:none;background:var(--sidebar); border-inline-start:1px solid var(--border); display:flex;flex-direction:column;padding:20px 16px; position:sticky;top:0;height:100vh;z-index:40; } .weesa-main{flex:1;min-width:0;display:flex;flex-direction:column;} .weesa-content{padding:26px 30px;flex:1;} .weesa-content > *{animation:weesaFadeUp .4s var(--ease,ease) both;} /* ---- Sidebar brand ---- */ .weesa-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 24px;text-decoration:none;} .weesa-brand:hover{text-decoration:none;} .weesa-brand__mark{ width:40px;height:40px;border-radius:13px;flex:none; background:linear-gradient(135deg,#0e9bb5,#6b54c9); display:flex;align-items:center;justify-content:center; box-shadow:0 6px 16px rgba(60,80,160,.4); } .weesa-brand__mark i,.weesa-brand__mark img{color:#fff;font-size:22px;max-width:24px;max-height:24px;} .weesa-brand__name{font-weight:700;font-size:16.5px;color:var(--heading);letter-spacing:-.2px;line-height:1.2;} .weesa-brand__name span{color:var(--primary);} .weesa-brand__sub{font-size:10.5px;color:var(--muted);margin-top:1px;} .weesa-navlabel{font-size:11px;color:var(--muted);font-weight:600;padding:0 10px 8px;letter-spacing:.3px;} .weesa-nav{display:flex;flex-direction:column;} .weesa-nav__item{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:13px; cursor:pointer;font-size:14px;text-decoration:none;margin-bottom:4px; transition:transform .15s ease,background .15s ease; font-weight:500;color:var(--muted);background:transparent; } .weesa-nav__item:hover{transform:translateX(-3px);text-decoration:none;color:var(--text);} .weesa-nav__ic{ width:31px;height:31px;border-radius:9px;flex:none; display:flex;align-items:center;justify-content:center; } .weesa-nav__ic i{font-size:17px;} .weesa-nav__item .weesa-nav__txt{flex:1;} .weesa-nav__item.is-active{ font-weight:700;color:#fff; background:linear-gradient(135deg,var(--c-teal),var(--c-blue)); box-shadow:0 9px 22px rgba(20,110,160,.36); } .weesa-nav__item.is-active:hover{transform:none;color:#fff;} .weesa-nav__item.is-active .weesa-nav__ic{background:rgba(255,255,255,.22) !important;} .weesa-nav__item.is-active .weesa-nav__ic i{color:#fff !important;} /* per-item resting colors */ .weesa-nav__item[data-tone="teal"] .weesa-nav__ic{background:var(--c-teal-s);} .weesa-nav__item[data-tone="teal"] .weesa-nav__ic i{color:var(--c-teal);} .weesa-nav__item[data-tone="blue"] .weesa-nav__ic{background:var(--c-blue-s);} .weesa-nav__item[data-tone="blue"] .weesa-nav__ic i{color:var(--c-blue);} .weesa-nav__item[data-tone="amber"] .weesa-nav__ic{background:var(--c-amber-s);} .weesa-nav__item[data-tone="amber"] .weesa-nav__ic i{color:var(--c-amber);} .weesa-nav__item[data-tone="violet"] .weesa-nav__ic{background:var(--c-violet-s);} .weesa-nav__item[data-tone="violet"] .weesa-nav__ic i{color:var(--c-violet);} .weesa-nav__item[data-tone="green"] .weesa-nav__ic{background:var(--c-green-s);} .weesa-nav__item[data-tone="green"] .weesa-nav__ic i{color:var(--c-green);} .weesa-nav__item[data-tone="pink"] .weesa-nav__ic{background:var(--c-pink-s);} .weesa-nav__item[data-tone="pink"] .weesa-nav__ic i{color:var(--c-pink);} .weesa-nav__badge{ background:var(--danger);color:#fff;font-size:11px;font-weight:600; min-width:19px;height:19px;border-radius:10px; display:flex;align-items:center;justify-content:center;padding:0 5px; } /* ---- Sidebar help card ---- */ .weesa-help{ margin-top:auto;background:var(--surface-2);border:1px solid var(--border); border-radius:13px;padding:14px;margin-bottom:14px; } .weesa-help__head{display:flex;align-items:center;gap:8px;margin-bottom:8px;} .weesa-help__head i{color:var(--primary);font-size:18px;} .weesa-help__head span{font-size:13px;font-weight:600;color:var(--heading);} .weesa-help p{font-size:11.5px;color:var(--muted);margin:0 0 11px;line-height:1.8;} .weesa-help__btn{ width:100%;padding:8px;border-radius:9px;border:1px solid var(--primary); background:transparent;color:var(--primary);font-size:12.5px;font-weight:600; cursor:pointer;text-align:center;display:block;text-decoration:none; } .weesa-help__btn:hover{background:var(--primary-soft);color:var(--primary-strong);text-decoration:none;} /* ---- Sidebar user ---- */ .weesa-suser{border-top:1px solid var(--border);padding-top:14px;display:flex;align-items:center;gap:10px;} .weesa-avatar{ border-radius:50%;background:var(--primary-soft);color:var(--primary-strong); display:flex;align-items:center;justify-content:center;font-weight:700;flex:none; width:36px;height:36px;font-size:13px; } .weesa-suser__meta{flex:1;min-width:0;} .weesa-suser__name{font-size:13px;font-weight:600;color:var(--heading);} .weesa-suser__mail{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .weesa-suser__out{font-size:18px;color:var(--muted);cursor:pointer;} .weesa-suser__out:hover{color:var(--danger);} /* ========================================================= 4. Topbar ========================================================= */ .weesa-topbar{ position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px; padding:13px 30px;background:var(--surface);border-bottom:1px solid var(--border); } .weesa-topbar__title{margin:0;font-size:17px;font-weight:700;color:var(--heading);} .weesa-topbar__crumb{font-size:11.5px;color:var(--muted);margin-top:2px;} .weesa-topbar__actions{margin-inline-start:auto;display:flex;align-items:center;gap:11px;} .weesa-search{position:relative;display:flex;align-items:center;} .weesa-search i{position:absolute;inset-inline-start:13px;color:var(--muted);font-size:16px;pointer-events:none;} .weesa-search input{ width:230px;padding:9px 40px 9px 14px;border-radius:10px;background:var(--surface-2); border:1px solid var(--border);color:var(--text);font-size:13px; } .weesa-iconbtn{ width:38px;height:38px;border-radius:10px;border:1px solid var(--border); background:var(--surface-2);color:var(--text);cursor:pointer; display:flex;align-items:center;justify-content:center;position:relative; } .weesa-iconbtn i{font-size:18px;} .weesa-iconbtn:hover{color:var(--primary);border-color:var(--primary);} .weesa-iconbtn .weesa-dot{ position:absolute;top:8px;inset-inline-end:9px;width:7px;height:7px;border-radius:50%; background:var(--danger);border:1.5px solid var(--surface-2); } .weesa-topbar__avatar{ width:38px;height:38px;border-radius:50%;background:var(--primary-soft); color:var(--primary-strong);display:flex;align-items:center;justify-content:center; font-weight:700;font-size:13px;cursor:pointer;text-decoration:none; } .weesa-topbar__avatar:hover{text-decoration:none;color:var(--primary-strong);} .weesa-burger{display:none;} /* ========================================================= 5. Buttons (Bootstrap overrides, scoped) ========================================================= */ .weesa-app .btn{ border-radius:11px;font-weight:600;font-family:inherit; transition:transform .15s ease,box-shadow .15s ease,background .15s ease; } .weesa-app .btn:active{transform:translateY(1px);} .weesa-app .btn-primary, .weesa-app .btn-info{ background:var(--primary);border-color:var(--primary);color:#fff; box-shadow:0 4px 14px rgba(14,155,181,.30); } .weesa-app .btn-primary:hover, .weesa-app .btn-info:hover{background:var(--primary-strong);border-color:var(--primary-strong);color:#fff;} .weesa-app .btn-default, .weesa-app .btn-secondary{ background:var(--surface-2);border:1px solid var(--border);color:var(--text); } .weesa-app .btn-default:hover, .weesa-app .btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--surface-2);} .weesa-app .btn-success{background:var(--success);border-color:var(--success);color:#fff;} .weesa-app .btn-danger{background:var(--danger);border-color:var(--danger);color:#fff;} .weesa-app .btn-warning{background:var(--warning);border-color:var(--warning);color:#fff;} .weesa-app .btn-link{color:var(--primary-strong);box-shadow:none;} .weesa-app .btn-outline-primary{border-color:var(--primary);color:var(--primary);background:transparent;} .weesa-app .btn-outline-primary:hover{background:var(--primary);color:#fff;} .weesa-btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:11px 21px;border-radius:13px;border:none;background:var(--primary);color:#fff; font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none; box-shadow:0 4px 14px rgba(14,155,181,.30);transition:transform .15s ease; } .weesa-btn:hover{transform:translateY(-2px);color:#fff;text-decoration:none;} .weesa-btn--ghost{background:var(--surface-2);border:1px solid var(--border);color:var(--text);box-shadow:none;} .weesa-btn--ghost:hover{color:var(--primary);border-color:var(--primary);} /* ========================================================= 6. Cards / panels ========================================================= */ .weesa-app .card, .weesa-app .panel{ background:var(--surface);border:1px solid var(--border);border-radius:14px; box-shadow:var(--shadow);overflow:hidden; } .weesa-app .card-header, .weesa-app .panel-heading{ background:var(--surface);border-bottom:1px solid var(--border); padding:16px 18px;font-weight:700;color:var(--heading); } .weesa-app .card-title{color:var(--heading);font-weight:700;font-size:15px;} .weesa-app .card-body, .weesa-app .panel-body{background:var(--surface);color:var(--text);} .weesa-app .card-footer, .weesa-app .panel-footer{background:var(--surface);border-top:1px solid var(--border);} .weesa-app .card-footer:empty{display:none;} /* card accent strips kept subtle */ .weesa-app .card-accent-blue{border-top:3px solid var(--c-blue);} .weesa-app .card-accent-green{border-top:3px solid var(--c-green);} .weesa-app .card-accent-red{border-top:3px solid var(--danger);} .weesa-app .card-accent-gold, .weesa-app .card-accent-orange{border-top:3px solid var(--c-amber);} /* ========================================================= 7. Tables ========================================================= */ .weesa-app .table{color:var(--text);margin-bottom:0;} .weesa-app .table thead th, .weesa-app .table > thead > tr > th{ background:var(--surface-2);border:none;border-bottom:1px solid var(--border); font-size:11.5px;font-weight:600;color:var(--muted);padding:12px 14px;vertical-align:middle; } .weesa-app .table td, .weesa-app .table > tbody > tr > td{ border-top:1px solid var(--border);padding:13px 14px; vertical-align:middle;font-size:13px;color:var(--text); } .weesa-app .table tbody tr{transition:background .14s ease;} .weesa-app .table-hover tbody tr:hover, .weesa-app .table tbody tr:hover{background:var(--surface-2);} .weesa-app .table-striped tbody tr:nth-of-type(odd){background:transparent;} /* ========================================================= 8. Status pills / badges / labels ========================================================= */ .weesa-app .badge, .weesa-app .label, .weesa-pill{ display:inline-block;font-size:11.5px;font-weight:600;line-height:1.6; padding:4px 11px;border-radius:20px;background:var(--surface-2);color:var(--muted); } .weesa-app .badge-primary,.weesa-app .label-primary,.weesa-app .label-info,.weesa-app .badge-info, .weesa-pill--primary{background:var(--primary-soft);color:var(--primary-strong);} .weesa-app .badge-success,.weesa-app .label-success,.weesa-app .status-active, .weesa-pill--success{background:var(--success-soft);color:var(--success);} .weesa-app .badge-warning,.weesa-app .label-warning,.weesa-app .status-pending, .weesa-pill--warning{background:var(--warning-soft);color:var(--warning);} .weesa-app .badge-danger,.weesa-app .label-danger, .weesa-pill--danger{background:var(--danger-soft);color:var(--danger);} /* WHMCS status pill classes (span.label.status.status-*) */ .weesa-app .status-active, .weesa-app .status-paid, .weesa-app .status-answered, .weesa-app .status-completed{background:var(--success-soft) !important;color:var(--success) !important;} .weesa-app .status-pending, .weesa-app .status-unpaid, .weesa-app .status-on-hold, .weesa-app .status-customer-reply, .weesa-app .status-draft, .weesa-app .status-collections{background:var(--warning-soft) !important;color:var(--warning) !important;} .weesa-app .status-suspended, .weesa-app .status-terminated, .weesa-app .status-cancelled, .weesa-app .status-fraud, .weesa-app .status-overdue, .weesa-app .status-refunded{background:var(--danger-soft) !important;color:var(--danger) !important;} .weesa-app .status-open, .weesa-app .status-in-progress, .weesa-app .status-onhold, .weesa-app .status-payment-pending{background:var(--primary-soft) !important;color:var(--primary-strong) !important;} .weesa-app .status-closed, .weesa-app .status-expired, .weesa-app .status-inactive{background:var(--surface-2) !important;color:var(--muted) !important;} /* DataTables list pages -> rounded card */ .weesa-app .table-container{ background:var(--surface);border:1px solid var(--border);border-radius:14px; box-shadow:var(--shadow);overflow:hidden; } .weesa-app .table-container .table{margin:0;} .weesa-app table.dataTable{border-collapse:collapse !important;width:100% !important;} .weesa-app .dataTables_wrapper .dataTables_filter, .weesa-app .dataTables_wrapper .dataTables_length{padding:14px 16px;font-size:13px;color:var(--muted);} .weesa-app .dataTables_wrapper .dataTables_info, .weesa-app .dataTables_wrapper .dataTables_paginate{padding:12px 16px;font-size:12.5px;color:var(--muted);} .weesa-app .dataTables_wrapper .dataTables_filter input{display:inline-block;width:auto;} .weesa-app .table-list a{color:var(--primary-strong);} .weesa-app .table-list strong{color:var(--heading);} /* ========================================================= 9. Forms ========================================================= */ .weesa-app .form-control, .weesa-app input[type="text"], .weesa-app input[type="email"], .weesa-app input[type="password"], .weesa-app input[type="number"], .weesa-app input[type="search"], .weesa-app input[type="tel"], .weesa-app textarea, .weesa-app select, .weesa-guest .form-control, .weesa-guest input, .weesa-guest textarea, .weesa-guest select{ border-radius:10px;border:1px solid var(--border);background:var(--surface-2); color:var(--text);font-size:13.5px;padding:11px 14px;height:auto; transition:border-color .15s ease,box-shadow .15s ease; } .weesa-app .form-control:focus, .weesa-app input:focus,.weesa-app textarea:focus,.weesa-app select:focus, .weesa-guest input:focus,.weesa-guest textarea:focus,.weesa-guest select:focus{ border-color:var(--primary) !important; box-shadow:0 0 0 3px rgba(14,155,181,.15) !important; background:var(--surface); } .weesa-app textarea,.weesa-guest textarea{line-height:1.9;resize:vertical;} .weesa-app label,.weesa-app .control-label{color:var(--muted);font-size:12.5px;font-weight:500;} .weesa-app .input-group-text{background:var(--surface-2);border:1px solid var(--border);color:var(--muted);border-radius:10px;} .weesa-app .custom-control-label::before{border-radius:6px;} .weesa-app input[type="checkbox"],.weesa-app input[type="radio"]{accent-color:var(--primary);} /* ========================================================= 10. List groups (in-page sidebars, service detail menus) ========================================================= */ .weesa-app .list-group{border-radius:12px;} .weesa-app .list-group-item{ background:var(--surface);border-color:var(--border);color:var(--text); font-size:13.5px;padding:11px 16px; } .weesa-app .list-group-item-action:hover{background:var(--surface-2);color:var(--heading);} .weesa-app .list-group-item.active{ background:var(--primary-soft);border-color:var(--primary-soft); color:var(--primary-strong);font-weight:600; } .weesa-app .list-group-item .badge{float:none;} /* sidebar cards inside content pages */ .weesa-app .card-sidebar .card-header{font-size:14px;} /* ========================================================= 11. Alerts ========================================================= */ .weesa-app .alert{border-radius:13px;border:1px solid var(--border);font-size:13.5px;} .weesa-app .alert-success{background:var(--success-soft);border-color:transparent;color:var(--success);} .weesa-app .alert-warning{background:var(--warning-soft);border-color:transparent;color:var(--warning);} .weesa-app .alert-danger{background:var(--danger-soft);border-color:transparent;color:var(--danger);} .weesa-app .alert-info{background:var(--primary-soft);border-color:transparent;color:var(--primary-strong);} /* ========================================================= 12. Nav tabs / pills + pagination ========================================================= */ .weesa-app .nav-tabs{border-bottom:1px solid var(--border);} .weesa-app .nav-tabs .nav-link{ border:none;color:var(--muted);font-weight:600;border-radius:10px 10px 0 0; } .weesa-app .nav-tabs .nav-link.active{ color:var(--primary-strong);background:transparent;border-bottom:2px solid var(--primary); } .weesa-app .nav-pills .nav-link.active{background:var(--primary);color:#fff;border-radius:10px;} .weesa-app .pagination{gap:6px;} .weesa-app .page-link{ border-radius:9px;border:1px solid var(--border);color:var(--text);background:var(--surface); } .weesa-app .page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:#fff;} /* ========================================================= 13. Dashboard ========================================================= */ .weesa-hero{ position:relative;overflow:hidden;border-radius:22px;padding:30px 34px;margin-bottom:18px; background:linear-gradient(120deg,#0e9bb5 0%,#1c84b6 42%,#6b54c9 100%); box-shadow:0 18px 44px rgba(30,90,150,.32);color:#fff; display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px; } .weesa-hero__main{position:relative;z-index:2;} .weesa-hero__eyebrow{font-size:13.5px;color:#fff;opacity:1;margin-bottom:7px;display:flex;align-items:center;gap:7px;} .weesa-hero__title{margin:0;font-size:29px;font-weight:800;letter-spacing:-.5px;color:#fff;} .weesa-hero__title em{font-style:normal;font-weight:500;color:#fff;opacity:.95;} .weesa-hero__sub{margin:11px 0 0;font-size:14px;color:#fff;opacity:1;line-height:1.95;max-width:430px;} .weesa-hero__cta{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap;} .weesa-hero__cta .weesa-btn{background:#fff;color:#0b7e96;box-shadow:0 6px 16px rgba(0,0,0,.12);} .weesa-hero__cta .weesa-btn:hover{color:#0b7e96;} .weesa-hero__cta .weesa-btn--glass{ background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.45);color:#fff; backdrop-filter:blur(6px);box-shadow:none;font-weight:600; } .weesa-hero__cta .weesa-btn--glass:hover{color:#fff;} .weesa-hero__stats{position:relative;z-index:2;display:flex;gap:13px;flex-wrap:wrap;} .weesa-hero__chip{ background:rgba(255,255,255,.15);backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22);border-radius:17px;padding:17px 21px;min-width:128px; } .weesa-hero__chip i{font-size:20px;opacity:.9;} .weesa-hero__chip .n{font-size:24px;font-weight:800;margin-top:9px;} .weesa-hero__chip .t{font-size:11.5px;opacity:.85;margin-top:2px;} .weesa-hero__blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);} .weesa-hero__blob.b1{left:-50px;top:-70px;width:240px;height:240px;animation:weesaFloaty 9s ease-in-out infinite;} .weesa-hero__blob.b2{left:150px;bottom:-100px;width:210px;height:210px;background:rgba(255,255,255,.07);animation:weesaFloaty2 11s ease-in-out infinite;} .weesa-hero__blob.b3{right:42%;top:-44px;width:120px;height:120px;background:rgba(255,255,255,.06);animation:weesaFloaty 13s ease-in-out infinite;} .weesa-statgrid{ display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-bottom:18px; } .weesa-stat{ position:relative;overflow:hidden; background:var(--surface);border:1px solid var(--border);border-radius:18px; box-shadow:var(--shadow);padding:20px;text-decoration:none;display:block; transition:transform .18s ease,box-shadow .18s ease; } .weesa-stat:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(20,70,110,.16);text-decoration:none;} .weesa-stat__deco{position:absolute;inset-inline-end:-22px;top:-22px;width:96px;height:96px;border-radius:50%;opacity:.1;} .weesa-stat__top{position:relative;display:flex;align-items:center;justify-content:space-between;} .weesa-stat__ic{ width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center; } .weesa-stat__ic i{font-size:23px;color:#fff;} .weesa-stat__tag{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:20px;} .weesa-stat__val{font-size:31px;font-weight:800;color:var(--heading);margin-top:16px;letter-spacing:-.5px;} .weesa-stat__lbl{font-size:13px;color:var(--muted);margin-top:2px;} /* gradient icon fills + glow (per tone) */ .weesa-grad-teal{background:linear-gradient(135deg,#0e9bb5,#2f74e0);box-shadow:0 9px 20px rgba(20,110,160,.42);} .weesa-grad-amber{background:linear-gradient(135deg,#eaa13a,#e8642a);box-shadow:0 9px 20px rgba(220,120,40,.40);} .weesa-grad-violet{background:linear-gradient(135deg,#8a6cf0,#6b54c9);box-shadow:0 9px 20px rgba(108,84,201,.42);} .weesa-grad-blue{background:linear-gradient(135deg,#2f74e0,#0e9bb5);box-shadow:0 9px 20px rgba(47,116,224,.42);} .weesa-grad-green{background:linear-gradient(135deg,#1fb583,#0e9bb5);box-shadow:0 9px 20px rgba(22,166,115,.40);} .weesa-grad-pink{background:linear-gradient(135deg,#e060a8,#a23db0);box-shadow:0 9px 20px rgba(200,70,150,.40);} .weesa-tagtone-teal{background:var(--c-teal-s);color:var(--c-teal);} .weesa-tagtone-amber{background:var(--c-amber-s);color:var(--c-amber);} .weesa-tagtone-violet{background:var(--c-violet-s);color:var(--c-violet);} .weesa-tagtone-blue{background:var(--c-blue-s);color:var(--c-blue);} .weesa-tagtone-green{background:var(--c-green-s);color:var(--c-green);} .weesa-tagtone-pink{background:var(--c-pink-s);color:var(--c-pink);} /* hero wallet chip */ .weesa-hero__chip--wallet{min-width:148px;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.28);} .weesa-hero__chip--wallet .row{display:flex;align-items:center;justify-content:space-between;} .weesa-hero__chip--wallet .add{font-size:18px;opacity:.85;cursor:pointer;text-decoration:none;color:#fff;} .weesa-hero__chip--wallet .n{font-size:22px;} /* visits bar chart */ .weesa-chart{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:20px 22px;} .weesa-chart__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:8px;} .weesa-chart__title{display:flex;align-items:center;gap:9px;} .weesa-chart__title .ic{width:30px;height:30px;border-radius:9px;background:var(--c-teal-s);display:flex;align-items:center;justify-content:center;} .weesa-chart__title .ic i{font-size:17px;color:var(--c-teal);} .weesa-chart__title b{font-size:15px;font-weight:700;color:var(--heading);} .weesa-chart__title small{font-size:11px;color:var(--muted);} .weesa-chart__big{font-size:19px;font-weight:800;color:var(--heading);} .weesa-chart__delta{font-size:11px;font-weight:700;color:var(--c-green);display:inline-flex;align-items:center;gap:3px;background:var(--c-green-s);padding:3px 9px;border-radius:20px;} .weesa-chart__bars{display:flex;align-items:flex-end;gap:10px;} .weesa-chart__col{flex:1;display:flex;flex-direction:column;align-items:center;} .weesa-chart__track{height:142px;width:100%;display:flex;align-items:flex-end;} .weesa-chart__bar{width:100%;border-radius:9px 9px 5px 5px;background:linear-gradient(to top,#0e9bb5,#7c5cdb);transition:opacity .16s ease;cursor:pointer;} .weesa-chart__bar:hover{opacity:.78;} .weesa-chart__d{font-size:11.5px;color:var(--muted);margin-top:10px;} /* website-builder promo card */ .weesa-promo{ position:relative;overflow:hidden;border-radius:18px;padding:22px;color:#fff; background:linear-gradient(145deg,#7c5cdb,#2f74e0 58%,#0e9bb5); box-shadow:0 14px 32px rgba(60,70,160,.34); } .weesa-promo__in{position:relative;z-index:1;} .weesa-promo__ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;margin-bottom:13px;} .weesa-promo__ic i{font-size:22px;} .weesa-promo__t{font-size:16px;font-weight:800;} .weesa-promo p{font-size:12.5px;opacity:.92;line-height:1.95;margin:7px 0 16px;} .weesa-promo__btn{ width:100%;padding:11px;border-radius:11px;border:none;background:#fff;color:#5340a8; font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px; text-decoration:none;transition:transform .15s ease; } .weesa-promo__btn:hover{transform:translateY(-2px);color:#5340a8;text-decoration:none;} .weesa-promo__blob{position:absolute;left:-30px;bottom:-44px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.1);animation:weesaFloaty2 12s ease-in-out infinite;} /* ===== Websites page ===== */ .weesa-web-hero{ position:relative;overflow:hidden;border-radius:20px;padding:24px 28px;margin-bottom:18px;color:#fff; background:linear-gradient(120deg,#6b54c9,#2f74e0 55%,#0e9bb5);box-shadow:0 16px 40px rgba(50,70,150,.3); display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px; } .weesa-web-hero__main{position:relative;z-index:2;} .weesa-web-hero h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-.4px;color:#fff;} .weesa-web-hero p{margin:9px 0 0;font-size:13.5px;opacity:.92;line-height:1.9;max-width:440px;} .weesa-web-hero__btn{ position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:13px; border:none;background:#fff;color:#3a3d9c;font-size:13.5px;font-weight:700;cursor:pointer;text-decoration:none; box-shadow:0 6px 16px rgba(0,0,0,.14);transition:transform .15s ease; } .weesa-web-hero__btn:hover{transform:translateY(-2px);color:#3a3d9c;text-decoration:none;} .weesa-web-hero__blob{position:absolute;left:-40px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.1);animation:weesaFloaty 10s ease-in-out infinite;} .weesa-ministats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:18px;} .weesa-ministat{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px;} .weesa-ministat__row{display:flex;align-items:center;gap:10px;} .weesa-ministat__ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;} .weesa-ministat__ic i{font-size:20px;} .weesa-ministat__val{font-size:22px;font-weight:800;color:var(--heading);} .weesa-ministat__lbl{font-size:12px;color:var(--muted);} .weesa-webgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px;} .weesa-webcard{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;} .weesa-webcard:hover{transform:translateY(-5px);box-shadow:0 22px 44px rgba(20,70,110,.16);} .weesa-webcard__preview{position:relative;height:152px;overflow:hidden;} .weesa-webcard__bar{position:absolute;top:12px;left:12px;right:12px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:8px;padding:6px 10px;box-shadow:0 3px 8px rgba(0,0,0,.12);} .weesa-webcard__bar .dot{width:7px;height:7px;border-radius:50%;} .weesa-webcard__bar .url{flex:1;text-align:center;font-size:9.5px;color:#7a8a96;} .weesa-webcard__skel{position:absolute;left:24px;right:24px;bottom:20px;} .weesa-webcard__skel i{display:block;border-radius:4px;} .weesa-webcard__body{padding:16px 18px;} .weesa-webcard__head{display:flex;align-items:center;justify-content:space-between;gap:8px;} .weesa-webcard__name{font-size:14.5px;font-weight:700;color:var(--heading);} .weesa-webcard__tpl{font-size:11.5px;color:var(--muted);margin-top:4px;} .weesa-webcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:13px;border-top:1px solid var(--border);} .weesa-webcard__visit{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);} .weesa-webcard__visit i{font-size:15px;} .weesa-webcard__btns{display:flex;gap:7px;} .weesa-webcard__icbtn{width:32px;height:32px;border-radius:9px;border:1px solid var(--border);background:var(--surface-2);color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;} .weesa-webcard__edit{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:9px;border:none;background:var(--c-teal);color:#fff;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;} .weesa-webcard__edit:hover{color:#fff;text-decoration:none;} .weesa-webnew{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;min-height:300px; border-radius:18px;border:2px dashed var(--border);background:transparent;color:var(--muted);cursor:pointer; text-decoration:none;transition:border-color .15s ease,color .15s ease; } .weesa-webnew:hover{border-color:var(--c-teal);color:var(--c-teal);text-decoration:none;} .weesa-webnew .plus{width:56px;height:56px;border-radius:50%;background:var(--c-teal-s);display:flex;align-items:center;justify-content:center;} .weesa-webnew .plus i{font-size:28px;color:var(--c-teal);} .weesa-webnew b{font-size:14px;font-weight:700;} .weesa-webnew span{font-size:11.5px;} /* dashboard overview heading row */ .weesa-overview-head{display:flex;align-items:center;gap:9px;margin-bottom:22px;} .weesa-overview-head .ic{width:30px;height:30px;border-radius:9px;background:var(--c-teal-s);display:flex;align-items:center;justify-content:center;} .weesa-overview-head .ic i{font-size:17px;color:var(--c-teal);} .weesa-overview-head b{font-size:15px;font-weight:700;color:var(--heading);} .weesa-tone-teal{background:var(--c-teal-s);} .weesa-tone-teal i{color:var(--c-teal);} .weesa-tone-blue{background:var(--c-blue-s);} .weesa-tone-blue i{color:var(--c-blue);} .weesa-tone-amber{background:var(--c-amber-s);} .weesa-tone-amber i{color:var(--c-amber);} .weesa-tone-violet{background:var(--c-violet-s);} .weesa-tone-violet i{color:var(--c-violet);} .weesa-tone-green{background:var(--c-green-s);} .weesa-tone-green i{color:var(--c-green);} .weesa-tone-pink{background:var(--c-pink-s);} .weesa-tone-pink i{color:var(--c-pink);} .weesa-dashgrid{display:grid;grid-template-columns:2fr 1fr;gap:16px;align-items:start;} .weesa-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;} .weesa-panel__head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--border);} .weesa-panel__title{font-size:15px;font-weight:700;color:var(--heading);} .weesa-panel__link{font-size:12.5px;color:var(--primary);cursor:pointer;text-decoration:none;} .weesa-credit{ position:relative;overflow:hidden;border-radius:18px;padding:22px;color:#fff; background:linear-gradient(140deg,#0e9bb5,#3f6fc4 58%,#6b54c9); box-shadow:0 14px 32px rgba(40,80,150,.34); } .weesa-credit__lbl{font-size:12.5px;opacity:.85;} .weesa-credit__val{font-size:27px;font-weight:700;margin:6px 0 2px;} .weesa-credit__val small{font-size:14px;font-weight:500;opacity:.8;} .weesa-credit__btn{ width:100%;margin-top:14px;padding:10px;border-radius:10px;border:none; background:rgba(255,255,255,.2);color:#fff;font-size:13px;font-weight:600;cursor:pointer; backdrop-filter:blur(4px);text-decoration:none;display:block;text-align:center; } .weesa-credit__btn:hover{color:#fff;background:rgba(255,255,255,.3);text-decoration:none;} .weesa-quick{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:18px;} .weesa-quick__title{font-size:14px;font-weight:700;color:var(--heading);margin-bottom:14px;} .weesa-quick__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .weesa-quick__btn{ display:flex;flex-direction:column;align-items:center;gap:9px;padding:16px 8px;border-radius:14px; border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;text-decoration:none; transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; } .weesa-quick__btn:hover{transform:translateY(-4px);border-color:transparent;box-shadow:0 12px 26px rgba(20,70,110,.13);text-decoration:none;color:var(--text);} .weesa-quick__btn .ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;} .weesa-quick__btn .ic i{font-size:20px;} .weesa-quick__btn span.lbl{font-size:11.5px;font-weight:600;} /* section heading row */ .weesa-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;flex-wrap:wrap;gap:14px;} .weesa-section-head h2{margin:0;font-size:20px;font-weight:700;color:var(--heading);} .weesa-section-head p{margin:5px 0 0;color:var(--muted);font-size:13.5px;} /* ========================================================= 14. Auth — login (single centered card on a living gradient) ========================================================= */ .weesa-guest{display:flex;min-height:100vh;} .weesa-guest-wrap{flex:1;width:100%;min-width:0;display:flex;flex-direction:column;} .weesa-guest-wrap > .primary-content{flex:1;width:100%;max-width:760px;margin:0 auto;padding:40px 20px;} .weesa-guest-wrap > .primary-content:has(.weesa-login){max-width:none;margin:0;padding:0;} /* ---- stage + slowly-shifting teal -> blue -> violet gradient ---- */ .weesa-login{ position:relative;min-height:100vh;width:100%;overflow:hidden; display:flex;align-items:center;justify-content:center;padding:40px 20px; background:linear-gradient(135deg,#0e9bb5 0%,#2168c9 48%,#7c5cdb 100%); background-size:200% 200%; animation:weesaGradShift 22s ease-in-out infinite; } html[data-weesa-theme="dark"] .weesa-login{ background:linear-gradient(135deg,#0a5f70 0%,#1b3f86 48%,#3b2c75 100%); background-size:200% 200%; } @keyframes weesaGradShift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} } /* ---- floating blurred orbs + faint grain ---- */ .weesa-login__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;} .weesa-login__bg .grain{opacity:.10;} .weesa-login__orb{ position:absolute;border-radius:50%;filter:blur(60px);opacity:.55; will-change:transform; } .weesa-login__orb.o1{width:420px;height:420px;top:-120px;inset-inline-end:-90px; background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(124,92,219,.12)); animation:weesaFloaty 16s ease-in-out infinite;} .weesa-login__orb.o2{width:360px;height:360px;bottom:-120px;inset-inline-start:-80px; background:radial-gradient(circle at 30% 30%,rgba(120,220,235,.55),rgba(33,104,201,.10)); animation:weesaFloaty2 19s ease-in-out infinite;} .weesa-login__orb.o3{width:280px;height:280px;top:38%;inset-inline-start:18%; background:radial-gradient(circle at 30% 30%,rgba(180,150,255,.40),transparent 70%); animation:weesaFloaty 23s ease-in-out infinite reverse;} /* ---- the card ---- */ .weesa-login__card{ position:relative;z-index:2;width:100%;max-width:500px; max-height:calc(100vh - 56px);overflow-y:auto; background:var(--surface);border:1px solid var(--border);border-radius:22px; padding:42px 40px; box-shadow:0 30px 80px rgba(12,30,60,.28),0 6px 18px rgba(12,30,60,.14); transition:max-width .35s cubic-bezier(.2,.7,.3,1); } /* register has a two-column form, so give it a wider card */ .weesa-login.is-register .weesa-login__card{max-width:720px;} .weesa-login__logo{display:flex;align-items:center;gap:12px;margin-bottom:24px;} .weesa-login__logo .mk{ width:46px;height:46px;border-radius:13px;flex:none; display:flex;align-items:center;justify-content:center;overflow:hidden; background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 6px 16px rgba(14,155,181,.32); } .weesa-login__logo .mk i{font-size:25px;color:#fff;} .weesa-login__logo .mk img{width:100%;height:100%;object-fit:contain;} .weesa-login__logo .nm{font-weight:700;font-size:19px;color:var(--heading);} .weesa-login__card h1{font-size:24px;font-weight:700;color:var(--heading);margin:0 0 6px;} .weesa-login__card .lead{font-size:13.5px;color:var(--muted);margin:0 0 22px;} /* ---- ورود / ثبت‌نام tabs ---- */ .weesa-login__tabs{ display:flex;gap:6px;padding:5px;margin-bottom:24px; background:var(--surface-2);border:1px solid var(--border);border-radius:13px; } .weesa-login__tabs > button{ flex:1;text-align:center;padding:9px 0;border:none;border-radius:9px; font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer; color:var(--muted);background:transparent;transition:all .18s ease; } .weesa-login__tabs > button:hover{color:var(--heading);background:var(--surface);} .weesa-login__tabs > button.is-active{ color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent)); box-shadow:0 4px 12px rgba(14,155,181,.30); } /* ---- panes (login / register / reset toggle) ---- */ .weesa-login__pane.is-hidden, .weesa-login__pane[hidden]{display:none;} .weesa-login__pane.weesa-pop{animation:weesaFadeUp .42s cubic-bezier(.2,.7,.3,1) both;} .weesa-login__hint{ display:flex;align-items:flex-start;gap:7px;margin:14px 0 0; font-size:11.5px;line-height:1.7;color:var(--muted); } .weesa-login__hint i{font-size:15px;margin-top:1px;color:var(--primary);flex:none;} /* two-column rows (register form) */ .weesa-login__row{display:flex;gap:16px;} .weesa-login__row > .form-group{flex:1 1 0;min-width:0;} @media (max-width:560px){ .weesa-login__row{flex-direction:column;gap:0;} } /* ---- captcha inside the card: hide instruction; image + input on ONE row, image height = input ---- */ /* the include wraps the captcha in Bootstrap .row/.col — kill the row's -15px side margins (otherwise zeroing col padding makes the input col overflow the card) and use full width */ .weesa-login .row{margin-left:0;margin-right:0;} .weesa-login .col-md-8.mx-auto{flex:0 0 100%;max-width:100%;padding:0;} .weesa-login #default-captcha-domainchecker{ display:flex;align-items:center;flex-wrap:nowrap;gap:10px;margin:0 0 6px; } .weesa-login #default-captcha-domainchecker > p{display:none;} .weesa-login #default-captcha-domainchecker > .col-6{padding:0;max-width:none;margin:0;} .weesa-login #default-captcha-domainchecker .captchaimage{flex:0 0 auto;} .weesa-login #default-captcha-domainchecker > .col-6:not(.captchaimage){flex:1 1 0;min-width:0;} .weesa-login #inputCaptchaImage{ display:block;height:44px;max-height:44px;width:auto; border:1px solid var(--border);border-radius:10px;background:#fff; } .weesa-login #inputCaptcha{height:44px;width:100%;margin:0;} .weesa-login .recaptcha-container{margin:0 auto 6px;} /* ---- icon fields ---- */ .weesa-field{position:relative;} .weesa-field > i{ position:absolute;top:50%;inset-inline-start:14px;transform:translateY(-50%); font-size:17px;color:var(--muted);pointer-events:none;transition:color .15s ease; } .weesa-field .form-control{ width:100%;padding-inline-start:42px; } .weesa-field--pw .form-control{padding-inline-end:42px;} .weesa-field:focus-within > i{color:var(--primary);} .weesa-field .btn-reveal-pw{ position:absolute;top:50%;inset-inline-end:6px;transform:translateY(-50%); background:transparent;border:none;box-shadow:none;color:var(--muted); padding:6px 8px;border-radius:8px;height:auto; } .weesa-field .btn-reveal-pw:hover{color:var(--primary);background:transparent;} .weesa-login__remember{ display:flex;align-items:center;gap:8px;margin:0 0 20px; color:var(--muted);cursor:pointer;font-weight:500;font-size:13px; } /* ---- gradient CTA ---- */ .weesa-login__cta{ border:none;color:#fff;font-weight:700;font-size:14.5px;padding:13px;border-radius:12px; background:linear-gradient(135deg,#0e9bb5 0%,#2168c9 50%,#7c5cdb 100%); background-size:160% 160%; box-shadow:0 10px 24px rgba(33,104,201,.32); transition:background-position .4s ease,transform .15s ease,box-shadow .15s ease; } .weesa-login__cta:hover{ color:#fff;background-position:100% 100%; box-shadow:0 14px 30px rgba(124,92,219,.40); } .weesa-login__cta:active{transform:translateY(1px);} .weesa-login__alt{text-align:center;margin:22px 0 0;font-size:13px;color:var(--muted);} .weesa-login__alt a{color:var(--primary-strong);} /* ---- staggered fade-in entrance ---- */ .weesa-login .fade-item{opacity:0;animation:weesaFadeUp .55s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s);} @media (prefers-reduced-motion:reduce){ .weesa-login,.weesa-login__orb{animation:none !important;} .weesa-login .fade-item{opacity:1;animation:none;} } @media (max-width:520px){ .weesa-login__card{padding:34px 24px;border-radius:18px;} } /* ========================================================= 15. Footer ========================================================= */ .weesa-footer{ padding:18px 30px;border-top:1px solid var(--border);background:var(--surface); display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px; font-size:12px;color:var(--muted); } .weesa-footer a{color:var(--muted);text-decoration:none;margin-inline-start:16px;} .weesa-footer a:hover{color:var(--primary);} /* ========================================================= 16. Responsive ========================================================= */ @media (max-width:992px){ .weesa-sidebar{ position:fixed;inset-inline-end:0;top:0;transform:translateX(100%); transition:transform .25s ease;box-shadow:-12px 0 40px rgba(0,0,0,.18); } .weesa-app.weesa-nav-open .weesa-sidebar{transform:translateX(0);} .weesa-burger{display:flex;} .weesa-search input{width:150px;} .weesa-nav-backdrop{ display:none;position:fixed;inset:0;background:rgba(8,18,26,.45);z-index:35; } .weesa-app.weesa-nav-open .weesa-nav-backdrop{display:block;} } @media (max-width:1100px){ .weesa-dashgrid{grid-template-columns:1fr;} } @media (max-width:640px){ .weesa-content{padding:18px 16px;} .weesa-topbar{padding:11px 16px;} .weesa-search{display:none;} .weesa-hero{padding:24px 22px;} .weesa-hero__title{font-size:24px;} } @media (prefers-reduced-motion:reduce){ .weesa-content > *,.weesa-app *{animation:none !important;transition:none !important;} }