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