-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththeme.css
More file actions
101 lines (92 loc) · 5.19 KB
/
Copy paththeme.css
File metadata and controls
101 lines (92 loc) · 5.19 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
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
/* =============================================================
GenLayer — Theme & shared page chrome
Link order: colors_and_type.css → components.css → theme.css
Provides:
• page-level theme tokens (extend the component --c-* surface set)
• shared nav (.gl-nav), page shell (.gl-page/.gl-wrap), hero,
section + footer scaffolding, and the dark/light toggle button
Theme is driven by the `.on-dark` class on <html> (set by theme.js,
default dark). Light is the base; .on-dark flips every token.
============================================================= */
/* ---- page chrome tokens (light defaults) ---- */
:root {
--c-nav-bg: rgba(255, 255, 255, 0.82);
--c-bg-deep: #f1f1f2; /* deeper surface (app sidebars) */
--c-bloom: 0; /* gradient blooms hidden on light */
--c-logo-invert: 0; /* black wordmark stays black on light */
}
.on-dark {
--c-nav-bg: rgba(6, 6, 6, 0.72);
--c-bg-deep: #0a0a0c;
--c-bloom: 1; /* blooms visible on dark */
--c-logo-invert: 1; /* invert black wordmark → white */
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: var(--c-bg); }
body {
background: var(--c-bg);
color: var(--c-fg);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
}
/* ---- page shell + gradient blooms ---- */
.gl-page { position: relative; overflow: hidden; min-height: 100vh; }
.gl-page__bloom {
position: fixed; border-radius: 999px; filter: blur(50px);
pointer-events: none; z-index: 0; opacity: var(--c-bloom); transition: opacity .3s;
}
.gl-page__bloom--1 { top: -300px; right: -200px; width: 900px; height: 900px;
background: radial-gradient(circle, rgba(227,125,247,.22), rgba(155,106,246,.09) 40%, transparent 68%); }
.gl-page__bloom--2 { bottom: -400px; left: -300px; width: 800px; height: 800px;
background: radial-gradient(circle, rgba(17,15,255,.26), transparent 65%); }
.gl-wrap { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); }
/* ---- shared nav ---- */
.gl-nav {
position: sticky; top: 0; z-index: 40; height: 64px; display: flex; align-items: center;
background: var(--c-nav-bg); backdrop-filter: blur(14px);
border-bottom: var(--c-hairline) solid var(--c-border);
}
.gl-nav__inner { display: flex; align-items: center; gap: var(--space-6); width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 var(--space-6); }
.gl-nav__brand { display: inline-flex; }
.gl-nav__brand img { height: 20px; display: block; filter: invert(var(--c-logo-invert)); transition: filter .3s; }
.gl-nav__links { display: flex; gap: var(--space-6); margin-left: var(--space-4); }
.gl-nav__links a { color: var(--c-fg-muted); font-size: var(--fs-sm); text-decoration: none; transition: color .15s; }
.gl-nav__links a:hover { color: var(--c-fg); }
.gl-nav__links a[aria-current="page"] { color: var(--c-fg); font-weight: 600; }
.gl-nav__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
/* ---- theme toggle button ---- */
.gl-theme-toggle {
width: 34px; height: 34px; flex: 0 0 34px; border-radius: 999px;
border: var(--c-hairline) solid var(--c-border); background: var(--c-card); color: var(--c-fg);
cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
transition: background .15s, border-color .15s;
}
.gl-theme-toggle:hover { background: var(--c-card-hover); border-color: var(--c-border-strong); }
.gl-theme-toggle svg { width: 16px; height: 16px; }
.gl-theme-toggle .icon-sun { display: none; }
.gl-theme-toggle .icon-moon { display: block; }
.on-dark .gl-theme-toggle .icon-sun { display: block; }
.on-dark .gl-theme-toggle .icon-moon { display: none; }
/* ---- hero ---- */
.gl-hero { padding: var(--space-16) 0 var(--space-12); }
.gl-hero h1 {
font-family: var(--font-display); font-weight: 700; font-size: clamp(44px, 8vw, 92px);
letter-spacing: -0.05em; line-height: .94; margin: var(--space-6) 0 var(--space-4); color: var(--c-fg);
}
.gl-lede { font-size: var(--fs-body-lg); color: var(--c-fg-muted); max-width: 60ch; line-height: 1.5; margin: 0; }
.gl-grad-text {
background: var(--gl-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
font-style: italic; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-right: .1em;
}
/* ---- section + footer ---- */
.gl-block { padding: var(--space-12) 0; border-top: var(--c-hairline) solid var(--c-border); }
.gl-block__head { margin-bottom: var(--space-8); }
.gl-block__head .gl-kicker { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c-fg-subtle); }
.gl-block__head h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2); letter-spacing: -0.03em; margin: 6px 0 0; color: var(--c-fg); }
.gl-block__head p { color: var(--c-fg-muted); font-size: var(--fs-sm); margin: 8px 0 0; max-width: 64ch; }
.gl-footer { padding: var(--space-16) 0 var(--space-24); border-top: var(--c-hairline) solid var(--c-border); color: var(--c-fg-subtle); font-size: var(--fs-sm); }
.gl-footer a { color: var(--fg-link); }
@media (max-width: 820px) {
.gl-nav__links { display: none; }
}