krz/hutch

  1:root {
  2  --bg: #f3f3f1;
  3  --surface: #fff;
  4  --border: #ddd;
  5  --text: #111;
  6  --muted: rgba(0, 0, 0, 0.62);
  7  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  8  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.06);
  9}
 10
 11* {
 12  box-sizing: border-box;
 13}
 14
 15body {
 16  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 17  background: var(--bg);
 18  color: var(--text);
 19  margin: 0;
 20}
 21
 22a,
 23a:visited {
 24  color: blue;
 25}
 26
 27img {
 28  max-width: 100%;
 29  display: block;
 30}
 31
 32.page {
 33  max-width: 960px;
 34  margin: 0 auto;
 35  padding: 16px;
 36}
 37
 38.privacy,
 39.site-header,
 40.content-grid,
 41.screenshots,
 42.resources,
 43.feature-sections {
 44  border: 1px solid var(--border);
 45  background: var(--surface);
 46  margin-bottom: 16px;
 47  padding: 20px;
 48}
 49
 50.brand-row {
 51  display: flex;
 52  justify-content: space-between;
 53  gap: 20px;
 54  align-items: flex-start;
 55}
 56
 57.brand,
 58.brand h1,
 59.brand p {
 60  color: black;
 61  text-decoration: none;
 62}
 63
 64.brand {
 65  display: flex;
 66  gap: 16px;
 67  align-items: center;
 68  min-width: 0;
 69}
 70
 71.brand h1 {
 72  margin: 0;
 73}
 74
 75.subtitle,
 76.brand p {
 77  margin-top: 0;
 78  opacity: 0.68;
 79}
 80
 81.app-icon {
 82  width: 80px;
 83  border-radius: 18px;
 84  border: 1px solid rgba(0, 0, 0, 0.08);
 85  box-shadow: var(--shadow-sm), 0 4px 12px rgba(0, 0, 0, 0.08);
 86  flex: 0 0 auto;
 87}
 88
 89.hero-actions {
 90  text-align: right;
 91  flex: 0 0 auto;
 92}
 93
 94.store-img {
 95  height: 40px;
 96  padding-bottom: 0.5rem;
 97}
 98
 99.header-links {
100  font-size: 14px;
101}
102
103.intro-copy {
104  margin-top: 18px;
105}
106
107.lede {
108  margin: 0 0 10px;
109  font-weight: 700;
110  font-size: 1.125rem;
111}
112
113.intro-copy p:last-child {
114  margin-bottom: 0;
115}
116
117.content-grid,
118.feature-sections {
119  display: grid;
120  grid-template-columns: 1fr 1fr;
121  gap: 20px;
122}
123
124.content-grid>div,
125.feature-sections>.feature-panel {
126  min-width: 0;
127}
128
129.content-grid h2,
130.screenshots h2,
131.resources h2,
132.feature-panel h2 {
133  margin-top: 0;
134}
135
136.feature-list {
137  margin: 0;
138  padding-left: 1.2rem;
139  line-height: 1.55;
140}
141
142.feature-list li+li {
143  margin-top: 0.45rem;
144}
145
146.section-intro {
147  margin-top: 0;
148  color: var(--muted);
149}
150
151.shot-scroll {
152  display: grid;
153  grid-auto-flow: column;
154  grid-auto-columns: minmax(220px, 280px);
155  gap: 12px;
156  overflow-x: auto;
157  overscroll-behavior-x: contain;
158  padding-bottom: 8px;
159  scroll-snap-type: x proximity;
160  -webkit-overflow-scrolling: touch;
161}
162
163.shot-scroll::-webkit-scrollbar {
164  height: 10px;
165}
166
167.shot-scroll::-webkit-scrollbar-thumb {
168  background: rgba(0, 0, 0, 0.18);
169}
170
171.shot-card {
172  margin: 0;
173  scroll-snap-align: start;
174  border: 1px solid var(--border);
175  overflow: hidden;
176  background: #fafafa;
177  box-shadow: var(--shadow-md);
178}
179
180.shot-card img {
181  width: 100%;
182  height: auto;
183}
184
185.shot-card figcaption {
186  padding: 10px 12px 12px;
187  font-size: 0.95rem;
188  font-weight: 600;
189}
190
191.resource-list {
192  display: flex;
193  flex-direction: column;
194  gap: 6px;
195  margin: 0;
196  padding-left: 1.2rem;
197}
198
199.resource-list ul {
200  margin-top: 6px;
201}
202
203.site-footer,
204footer {
205  padding: 4px 2px 24px;
206}
207
208.privacy h2 {
209  margin: 0 0 20px;
210  font-size: 28px;
211  line-height: 1.1;
212}
213
214.privacy h3 {
215  margin: 24px 0 8px;
216  font-size: 18px;
217  line-height: 1.2;
218}
219
220.privacy p {
221  margin: 0 0 14px;
222  line-height: 1.5;
223}
224
225.privacy ul {
226  margin: 0 0 14px;
227  padding-left: 0;
228  list-style: none;
229}
230
231.privacy li {
232  padding-left: 1em;
233  text-indent: -1em;
234}
235
236.privacy li::before {
237  content: "- ";
238}
239
240.privacy a:hover {
241  text-decoration: underline;
242}
243
244code {
245  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
246  font-size: 0.95em;
247}
248
249@media (max-width: 760px) {
250  .page {
251    padding: 12px;
252  }
253
254  .brand-row,
255  .content-grid,
256  .feature-sections {
257    grid-template-columns: 1fr;
258    display: grid;
259  }
260
261  .shot-scroll {
262    grid-auto-columns: minmax(240px, 78vw);
263  }
264
265  .brand-row {
266    gap: 16px;
267  }
268
269  .hero-actions {
270    text-align: left;
271  }
272
273  .brand {
274    align-items: flex-start;
275  }
276
277  .store-img {
278    height: 44px;
279  }
280
281  .content-grid,
282  .feature-sections {
283    gap: 12px;
284  }
285
286  .site-header,
287  .content-grid,
288  .screenshots,
289  .resources,
290  .feature-sections,
291  .privacy {
292    padding: 16px;
293  }
294
295  .feature-list,
296  .resource-list {
297    padding-left: 1.1rem;
298  }
299}
300
301.info-banner {
302  margin: 24px auto;
303  padding: 14px 16px;
304  max-width: 960px;
305
306  background: #fff3cd;
307  border: 1px solid #ffeeba;
308
309  color: #856404;
310  font-size: 14px;
311  line-height: 1.5;
312
313  text-align: center;
314}
315
316.info-banner-live {
317  background: #edf7ee;
318  border-color: #cfe8d3;
319  color: #1d5c2f;
320}