SANTONLACV/styles.css at main · SANTONLA/SANTONLACV · 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
76
77
78
79
/* Reset & base */
:root{
  --bg: #f6f8fb;
  --card: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --accent: #0b5cff;
  --chip-bg: #eef2ff;
  --shadow: 0 6px 18px rgba(15,23,42,0.06);
  --radius: 10px;
  --max-width: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;}
a{color:var(--accent); text-decoration:none}
.page{max-width:var(--max-width);margin:28px auto;padding:20px;}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.profile{display:flex;gap:16px;align-items:center}
.avatar{width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#6b8cff);display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:20px;box-shadow:var(--shadow)}
.name{margin:0;font-size:20px}
.role{margin:2px 0 0;color:var(--muted);font-size:14px}
.contacts{margin-top:6px;color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center}

/* Buttons */
.btn{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600;box-shadow:0 4px 10px rgba(11,92,255,0.12)}
.btn.small{padding:6px 10px;font-size:13px;border-radius:8px}
.header-actions{display:flex;gap:8px}

/* Layout */
.main{display:grid;grid-template-columns:320px 1fr;gap:20px}
.sidebar .card, .content .card{background:var(--card);padding:16px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card h2{margin:0 0 8px;font-size:16px}

/* Sidebar content */
.sidebar .card{margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--chip-bg);color:var(--accent);padding:6px 8px;border-radius:999px;font-weight:600;font-size:13px}

/* Content area */
.content .card{margin-bottom:16px}
.muted{color:var(--muted);font-size:13px;margin-top:6px}
.small{font-size:13px;color:var(--muted);margin-top:8px}
.project-list{list-style:none;padding:0;margin:0}
.project-list li{margin-bottom:12px}

/* Responsive */
@media (max-width: 880px){
  .main{grid-template-columns:1fr; }
  .header{flex-direction:column;align-items:flex-start;gap:12px}
  .header-actions{align-self:stretch}
}

/* Print styles — clean for PDF */
@media print{
  :root{background: #fff}
  body, .page{background:white;color:black}
  .header-actions, .btn, .avatar{display:none}
  .page{box-shadow:none;margin:0;padding:0}
  .main{grid-template-columns:1fr;gap:6px}
  .card{box-shadow:none;border-radius:0;padding:0 0 10px 0}
  .contacts a{color:inherit}
}

/* Dark mode (toggle via JS) */
body.dark{
  --bg:#0b1220;
  --card:#071228;
  --text:#e6eef8;
  --muted:#9aa8c7;
  --accent:#57a8ff;
  --chip-bg:#07253a;
  background:var(--bg);
}
  .container{max-width:100%;padding:0}
  a::after{content: " (" attr(href) ")"; color: black; font-size:0.9em}
}