1/* popssh.com — ported from products/_prototypes/popssh/src/popssh.com/layouts/Layout.astro */
2/* Berkeley Mono font is not served yet — falling back to system monospace */
3
4:root {
5 --color-primary: #0084ff;
6 --color-text: #111;
7 --color-text-muted: #666;
8 --color-text-light: #999;
9 --color-bg: #fff;
10 --color-bg-muted: #f5f5f5;
11 --color-border: #ddd;
12 --color-border-light: #eee;
13 --color-link: #0084ff;
14 --color-success: #22c55e;
15 --color-warning: #f59e0b;
16 --color-error: #ef4444;
17 /* rainbow brand colors */
18 --color-pop-1: #FF5A2F;
19 --color-pop-2: #FF9E1F;
20 --color-pop-3: #FFC72A;
21 --color-pop-4: #4FC46B;
22 --color-pop-5: #00B8F0;
23 --color-pop-6: #197BFF;
24 --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
25 --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
26 --font-size-base: 14px;
27 --font-size-sm: 12px;
28 --font-size-xs: 11px;
29 --max-width: 600px;
30 --page-padding: 1rem;
31 --border-radius: 4px;
32 --gap: 16px;
33 --section-padding: 1rem;
34}
35
36* { margin: 0; padding: 0; box-sizing: border-box; }
37
38html {
39 font-size: var(--font-size-base);
40 font-family: var(--font-sans);
41 line-height: 1.5;
42 color: var(--color-text);
43 background: var(--color-bg);
44}
45
46body {
47 min-height: 100vh;
48 display: flex;
49 flex-direction: column;
50 overflow-y: scroll;
51}
52
53/* Header */
54header {
55 max-width: var(--max-width);
56 margin: 0 auto;
57 padding: 0.5rem var(--page-padding);
58 width: 100%;
59}
60
61.logo {
62 font-family: var(--font-mono);
63 font-size: 20px;
64 letter-spacing: -0.5px;
65 text-decoration: none;
66}
67.logo-p { color: var(--color-pop-1); }
68.logo-o { color: var(--color-pop-2); }
69.logo-ps { color: var(--color-pop-3); }
70.logo-s { color: var(--color-pop-4); }
71.logo-ss { color: var(--color-pop-5); }
72.logo-h { color: var(--color-pop-6); }
73
74nav {
75 display: flex;
76 align-items: center;
77 justify-content: space-between;
78}
79
80nav a {
81 font-family: var(--font-mono);
82 font-size: var(--font-size-sm);
83 color: var(--color-text-muted);
84 text-decoration: none;
85}
86nav a:hover { color: var(--color-text); }
87
88.nav-links {
89 display: flex;
90 gap: var(--gap);
91 align-items: center;
92}
93
94/* Main content */
95main {
96 max-width: var(--max-width);
97 margin: 0 auto;
98 padding: 0 var(--page-padding);
99 width: 100%;
100 flex: 1;
101}
102
103/* Prose article wrapper — MDX pages are wrapped in <article class="prose"> */
104.prose { width: 100%; }
105
106/* Footer */
107footer {
108 max-width: var(--max-width);
109 margin: 0 auto;
110 padding: 2rem var(--page-padding);
111 width: 100%;
112 font-family: var(--font-mono);
113 font-size: var(--font-size-xs);
114 color: var(--color-text-light);
115}
116
117footer a {
118 color: var(--color-text-muted);
119 text-decoration: none;
120}
121footer a:hover { color: var(--color-text); }
122
123.footer-content {
124 display: flex;
125 justify-content: space-between;
126 align-items: center;
127}
128
129.footer-links {
130 display: flex;
131 gap: var(--gap);
132}
133
134/* Utilities */
135.mono { font-family: var(--font-mono); }
136.muted { color: var(--color-text-muted); }
137.small { font-size: var(--font-size-sm); }
138.narrow { max-width: 480px; }
139
140a { color: var(--color-link); text-decoration: none; }
141a:hover { opacity: 0.8; }
142
143/* Rainbow divider */
144.rainbow-divider {
145 height: 2px;
146 margin: 1rem 0 0.5rem;
147 background: linear-gradient(
148 90deg,
149 var(--color-pop-1),
150 var(--color-pop-2),
151 var(--color-pop-3),
152 var(--color-pop-4),
153 var(--color-pop-5),
154 var(--color-pop-6)
155 );
156}
157
158/* Sections */
159.section { padding: var(--section-padding) 0; }
160.section-hero { padding: var(--section-padding) 0; }
161
162/* Headings */
163.page-title {
164 font-family: var(--font-mono);
165 font-size: 24px;
166 letter-spacing: -0.5px;
167 margin-bottom: 0.25rem;
168}
169
170.section-title {
171 font-family: var(--font-mono);
172 margin-bottom: 0.5rem;
173}
174
175.page-subtitle {
176 font-size: var(--font-size-sm);
177 line-height: 1.5;
178 color: var(--color-text-muted);
179 max-width: 480px;
180}
181
182/* Buttons */
183.btn-row {
184 display: flex;
185 gap: 12px;
186 margin-top: 1.25rem;
187}
188
189.btn {
190 font-family: var(--font-mono);
191 font-size: var(--font-size-sm);
192 padding: 10px 24px;
193 border: 1px solid transparent;
194 border-radius: var(--border-radius);
195 text-decoration: none;
196 display: inline-block;
197}
198
199.btn-primary {
200 background: var(--color-text);
201 color: white;
202 border-color: var(--color-text);
203}
204.btn-primary:hover { color: white; opacity: 0.9; }
205
206.btn-secondary {
207 border-color: var(--color-border);
208 color: var(--color-text);
209 background: none;
210}
211.btn-secondary:hover { color: var(--color-text); border-color: var(--color-text-muted); }
212
213/* Grid */
214.grid-2 {
215 display: grid;
216 grid-template-columns: 1fr 1fr;
217 gap: 2rem;
218}
219
220/* Code blocks */
221code {
222 font-family: var(--font-mono);
223 font-size: var(--font-size-sm);
224 background: var(--color-bg-muted);
225 padding: 2px 6px;
226 border-radius: 3px;
227}
228
229pre {
230 font-family: var(--font-mono);
231 font-size: var(--font-size-sm);
232 background: var(--color-bg-muted);
233 padding: 12px 16px;
234 border-radius: var(--border-radius);
235 overflow-x: auto;
236 line-height: 1.6;
237 margin-top: 1rem;
238}
239pre code {
240 background: none;
241 padding: 0;
242}
243
244/* Prose pages (privacy, terms) */
245.prose h1 {
246 font-family: var(--font-mono);
247 font-size: 24px;
248 letter-spacing: -0.5px;
249 margin: 1.5rem 0 1rem;
250}
251.prose h3 { font-family: var(--font-mono); margin: 1.25rem 0 0.4rem; font-size: 14px; }
252.prose p, .prose ol, .prose ul { font-size: 13px; color: var(--color-text-muted); margin-bottom: 0.5rem; line-height: 1.6; }
253.prose ol, .prose ul { padding-left: 1.25rem; }
254.prose li { margin-bottom: 0.25rem; }