Repository navigation
Expand file tree
/
Copy pathknowledge.css
More file actions
35 lines (35 loc) · 3.16 KB
/
Copy pathknowledge.css
File metadata and controls
35 lines (35 loc) · 3.16 KB
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
/* Technical knowledge base layout. */
.knowledge-page { background: #f4f4ef; color: #111820; min-height: 70vh; }
.knowledge-wrap { max-width: 1180px; margin: 0 auto; padding: 72px 24px 120px; }
.kb-breadcrumb { display:flex; flex-wrap:wrap; gap:10px; color:#68727b; font:500 11px/1.5 var(--font-mono); letter-spacing:.04em; text-transform:uppercase; }
.kb-breadcrumb a { color:#347fb8; }
.kb-hero, .kb-article { max-width: 920px; }
.kb-eyebrow { margin:42px 0 16px; color:#347fb8; font:500 11px/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
.kb-hero h1, .kb-article h1 { max-width: 900px; margin:0; font-size:clamp(42px,6vw,78px); line-height:1.04; letter-spacing:-.065em; text-wrap:balance; }
.kb-dek { max-width:780px; margin:26px 0; color:#56616c; font-size:20px; line-height:1.65; }
.kb-answer { max-width:820px; margin:34px 0 60px; border-left:3px solid #4dc8a0; padding:20px 24px; background:#e7eee9; color:#26343b; font-size:18px; line-height:1.8; }
.kb-article section { margin:64px 0; }
.kb-article h2, .kb-card-grid h2, .kb-note h2 { margin:0 0 20px; font-size:32px; letter-spacing:-.04em; }
.kb-article h3 { margin:28px 0 10px; font-size:20px; }
.kb-article p, .kb-article li, .kb-note p { max-width:820px; color:#45525c; font-size:16px; line-height:1.85; }
.kb-article ul, .kb-article ol { max-width:820px; padding-left:24px; }
.kb-article code { padding:2px 5px; background:#e2e5e2; font-family:var(--font-mono); font-size:.9em; }
.kb-article pre { max-width:900px; overflow:auto; border:1px solid #c5cbc7; background:#17212b; padding:22px; color:#cce7dc; line-height:1.65; }
.kb-article pre code { padding:0; background:none; color:inherit; }
.kb-table-scroll { overflow:auto; }
.kb-table { width:100%; min-width:700px; border-collapse:collapse; font-size:14px; }
.kb-table th, .kb-table td { border:1px solid #c5cbc7; padding:13px 14px; vertical-align:top; text-align:left; line-height:1.55; }
.kb-table th { background:#e4e8e5; color:#25313a; font-weight:700; }
.kb-table td { color:#4b5962; background:rgba(255,255,255,.32); }
.kb-sources, .kb-related { border-top:1px solid #c5cbc7; padding-top:26px; }
.kb-sources ul, .kb-related ul { padding-left:20px; }
.kb-sources p, .kb-updated { color:#68727b; font:400 12px/1.7 var(--font-mono); }
.kb-card-grid { margin-top:90px; }
.kb-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.kb-card { display:block; min-height:190px; border:1px solid #c5cbc7; background:rgba(255,255,255,.38); padding:24px; transition:transform .2s,background .2s; }
.kb-card:hover { background:#fff; transform:translateY(-3px); }
.kb-card span { color:#347fb8; font:500 10px/1.4 var(--font-mono); letter-spacing:.1em; text-transform:uppercase; }
.kb-card h3 { margin:18px 0 10px; color:#17212b; font-size:21px; letter-spacing:-.035em; }
.kb-card p { margin:0; color:#65717b; font-size:14px; line-height:1.65; }
.kb-note { margin-top:64px; border:1px solid #c5cbc7; padding:28px; background:#e9ece8; }
@media (max-width:800px) { .knowledge-wrap { padding:40px 20px 80px; } .kb-hero h1,.kb-article h1 { font-size:clamp(38px,11vw,54px); } .kb-dek { font-size:17px; } .kb-answer { font-size:16px; } .kb-cards { grid-template-columns:1fr; } }