lab/style.css at main · hsolgaard/lab · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --text: #1d1f22;
  --muted: #5d636b;
  --line: #e4e1dc;
  --accent: #2f6f62;
  --accent-soft: #e3efec;
  --shadow: 0 1px 2px rgba(20, 20, 20, 0.04), 0 4px 16px rgba(20, 20, 20, 0.05);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141618;
    --surface: #1c1f22;
    --text: #e8e6e3;
    --muted: #a0a6ad;
    --line: #2d3236;
    --accent: #6cc3ad;
    --accent-soft: #1f3330;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); }
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }

/* header */
.top {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 650; letter-spacing: -0.01em; }
nav { display: flex; gap: 20px; }
nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
nav a:hover { color: var(--text); }

/* hero */

.eyebrow { margin: 0 0 12px; color: var(--accent); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
h1 { margin: 0 0 18px; font-size: clamp(30px, 5vw, 44px); line-height: 1.15; letter-spacing: -0.02em; max-width: 20ch; }
.lead { margin: 0; max-width: 62ch; color: var(--muted); font-size: 19px; }

/* sections */
section.wrap { padding-top: 48px; padding-bottom: 8px; }
section.hero { padding-top: 72px; padding-bottom: 24px; }
h2 { margin: 0 0 20px; font-size: 26px; letter-spacing: -0.01em; }
h3 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.section-lead { margin: -6px 0 24px; max-width: 64ch; color: var(--muted); }
.tag { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

/* project cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px; box-shadow: var(--shadow);
}
.card p { margin: 14px 0 18px; color: var(--muted); font-size: 16px; flex: 1; }
.card-head { display: flex; gap: 14px; align-items: flex-start; }
.icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; background: var(--accent-soft);
}
.icon svg { width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon svg circle, .icon svg ellipse { fill: none; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; font-weight: 550; }
.links a { text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* reviews */
.reviews { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.review {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; box-shadow: var(--shadow);
}
.review.upcoming { background: transparent; box-shadow: none; border-style: dashed; }
.review.upcoming h3 { color: var(--muted); font-weight: 600; }
.disclosure { border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; max-width: 64ch; }
.disclosure h3 { font-size: 16px; margin-bottom: 6px; }
.disclosure p { margin: 0; color: var(--muted); font-size: 16px; }

/* buttons */
.btn {
  display: inline-block; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 550; background: var(--surface);
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .btn-primary { color: #0f1a18; } }
.contact { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* footer */
.foot { padding-top: 32px; padding-bottom: 48px; border-top: 1px solid var(--line); margin-top: 24px; }
.foot p { margin: 0; color: var(--muted); font-size: 14px; }


/* review articles */
.article { max-width: 780px; padding-top: 48px; padding-bottom: 24px; }
.article .eyebrow a { color: inherit; text-decoration: none; }
.article h1 { max-width: none; font-size: clamp(28px, 4.4vw, 38px); margin-bottom: 10px; }
.article h2 { margin: 44px 0 14px; font-size: 23px; }
.article p, .article li { max-width: 68ch; }
.article ul { padding-left: 22px; }
.article li { margin: 4px 0; }
.byline { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.origin { margin: 0 0 32px; padding: 12px 16px; border-radius: 10px; background: var(--accent-soft); font-size: 15px; }
.verdict { padding: 14px 18px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.article .disclosure { margin: 28px 0; }
.article figure { margin: 24px 0; }
.article figure img { display: block; max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.article figcaption { margin-top: 8px; color: var(--muted); font-size: 14px; }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.article th, .article td { text-align: left; vertical-align: top; padding: 9px 14px; border-bottom: 1px solid var(--line); }
.article th { font-weight: 600; color: var(--muted); font-size: 14px; }
.article tbody tr:last-child td { border-bottom: 0; }
.status { display: inline-block; white-space: nowrap; padding: 1px 9px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.status.ok { background: var(--accent-soft); color: var(--accent); }
.status.info { background: color-mix(in srgb, #3b74c4 16%, transparent); color: #3b74c4; }
.status.none { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }
.status.bad { background: color-mix(in srgb, #c0563b 16%, transparent); color: #c0563b; }
@media (prefers-color-scheme: dark) { .status.info { color: #8ab4ec; } .status.bad { color: #ec9a85; } }
.note { color: var(--muted); font-size: 15px; }
.back { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.review-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.review-links .alt { font-size: 14px; color: var(--muted); }

@media (max-width: 560px) {
  .article { padding-top: 32px; }
  .article th, .article td { padding: 8px 10px; }
  .status { white-space: normal; }
  body { font-size: 16px; }
  section.hero { padding-top: 44px; }
  nav { gap: 12px; }
  nav a { font-size: 14px; }
  .brand span { font-size: 16px; }
  .review .btn { width: 100%; text-align: center; }
  .review-links { width: 100%; }
}

#about p { max-width: 64ch; }