phishguard/global.css at main · raj7-debug/phishguard · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
/* ==========================================
   PHISHGUARD GLOBAL STYLES & SIDEBAR
   ========================================== */

   :root {
    --bg: #07090f;
    --panel: #101522;
    --panel-2: #141b2b;
    --line: #26334a;
    --text: #f4f7fb;
    --muted: #9aa8bd;
    --cyan: #36e0d0;
    --blue: #56b7ff;
    --amber: #ffc857;
    --red: #ff6685;
    --green: #55d98b;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      radial-gradient(circle at 78% 8%, rgba(54, 224, 208, .12), transparent 28rem),
      radial-gradient(circle at 10% 90%, rgba(86, 183, 255, .08), transparent 25rem),
      var(--bg);
  }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; }

  /* Global Shell & Sidebar Layout */
  .shell { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: 100vh; }
  .sidebar {
    padding: 28px 18px;
    background: rgba(9, 13, 23, .9);
    border-right: 1px solid var(--line);
  }
  .sidebar-brand, .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
  .brand-mark {
    width: 34px; height: 34px; display: grid; place-items: center;
    border: 1px solid rgba(54, 224, 208, .65); border-radius: 10px;
    color: var(--cyan); font-weight: 900; box-shadow: 0 0 22px rgba(54,224,208,.16);
  }
  .brand-text, .brand-name { color: var(--cyan); letter-spacing: 1.4px; font-weight: 800; font-size: 16px; }

  /* Sidebar Navigation Items & Smooth Hover */
  .sidebar-nav, .nav { display: grid; gap: 7px; }
  .sidebar-nav .sidebar-item, .nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
  }

  .sidebar-nav .sidebar-item:hover, .nav a:hover {
    color: var(--text);
    background: rgba(86, 183, 255, 0.1);
    transform: translateX(4px); /* Smooth slide effect */
  }

  .sidebar-nav .sidebar-item.active, .nav a.active {
    color: var(--cyan);
    background: rgba(54, 224, 208, 0.1);
    border: 1px solid rgba(54, 224, 208, 0.25);
    font-weight: 600;
  }