hypha.coop
Tend your corner of the atmosphere. spores.garden turns your AT Protocol records into a personal site with unique themes. Your data never leaves your PDS. Grow something that's truly yours.
spores.garden
charlebois.info
1/**
2 * spores.garden - Base Theme
3 * Brutalist/minimalist aesthetic with high contrast and bold typography.
4 */
5
6/* ============================================
7 Google Fonts Import
8 ============================================ */
9
10/* Fonts are loaded dynamically based on theme - see engine.ts */
11/* Only Inter and JetBrains Mono are loaded statically as fallbacks */
12@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&family=Work+Sans:wght@400;600;700&display=swap');
13
14/* ============================================
15 CSS Custom Properties
16 ============================================ */
17
18:root {
19 /* Breakpoints */
20 --breakpoint-sm: 480px;
21 --breakpoint-md: 768px;
22 --breakpoint-lg: 1024px;
23
24 /* Safe Area Insets (Notch Support) */
25 --safe-area-inset-top: env(safe-area-inset-top, 0px);
26 --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
27 --safe-area-inset-left: env(safe-area-inset-left, 0px);
28 --safe-area-inset-right: env(safe-area-inset-right, 0px);
29
30 /* Colors - High Contrast */
31 --color-background: #ffffff;
32 --color-background-rgb: 255, 255, 255;
33 --color-text: #000000;
34 --color-text-rgb: 0, 0, 0;
35 --color-surface: #f8f9fa;
36 --color-text-muted: #6b7280;
37 --color-primary: #000000;
38 --color-accent: #0ea5e9;
39 --color-border: #e5e7eb;
40 --color-border-muted: #d1d5db;
41 --color-border-dark: #000000;
42
43 /* Fluid Typography (Phase 7) */
44 --font-size-base: clamp(0.875rem, 2.5vw, 1rem);
45 --font-size-sm: clamp(0.75rem, 2vw, 0.875rem);
46 --font-size-lg: clamp(1rem, 3vw, 1.25rem);
47 --font-size-xl: clamp(1.25rem, 4vw, 1.75rem);
48 --font-size-2xl: clamp(1.5rem, 5vw, 2.5rem);
49
50 /* Typography */
51 --font-heading: 'Work Sans', sans-serif;
52 --font-body: 'Work Sans', sans-serif;
53 --font-mono: 'JetBrains Mono', 'Courier New', monospace;
54
55 /* Spacing */
56 --spacing-xs: 0.25rem;
57 --spacing-sm: 0.5rem;
58 --spacing-md: 1rem;
59 --spacing-lg: 2rem;
60 --spacing-xl: 4rem;
61
62 /* Border */
63 --border-width: 2px;
64 --border-width-thick: 4px;
65 --border-width-extra-thick: 20px;
66 --border-style: solid;
67 /* Border radius derived from border-width */
68 --border-radius: calc(var(--border-width) * 4);
69
70 /* Drop shadow (overridden by theme engine / generated themes) */
71 --shadow-type: normal;
72 --shadow-x: 6px;
73 --shadow-y: 6px;
74 --shadow-blur: 0px;
75 --shadow-spread: 0px;
76 --shadow-color: rgba(0, 0, 0, 0.08);
77
78 /* Convenience: one var to use everywhere */
79 --shadow-elevated: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
80
81 /* Transitions */
82 --transition: 150ms ease;
83}
84
85/* ============================================
86 Base Reset
87 ============================================ */
88
89*,
90*::before,
91*::after {
92 box-sizing: border-box;
93}
94
95body {
96 margin: 0;
97 padding: 0;
98 min-height: 100vh;
99 min-height: 100svh; /* Small viewport height for mobile */
100 font-family: var(--font-body);
101 font-size: var(--font-size-base);
102 line-height: 1.5;
103 color: var(--color-text);
104 background-color: var(--color-background);
105 /* Isoline pattern background - fixed, 1:1 with viewport (size set in JS) */
106 background-image: var(--pattern-background, none);
107 background-size: var(--pattern-width, auto) var(--pattern-height, auto);
108 background-repeat: no-repeat;
109 background-attachment: fixed;
110 background-position: 0 0;
111 /* Smooth color transitions when navigating between gardens */
112 transition: background-color 0.6s ease-in-out, color 0.6s ease-in-out;
113 -webkit-font-smoothing: antialiased;
114 -moz-osx-font-smoothing: grayscale;
115}
116
117/* Skip navigation link for keyboard users */
118.skip-link {
119 position: absolute;
120 top: -100%;
121 left: var(--spacing-md);
122 z-index: 9999;
123 padding: var(--spacing-sm) var(--spacing-md);
124 background: var(--color-text);
125 color: var(--color-background);
126 font-weight: 700;
127 text-decoration: none;
128 font-size: 0.875rem;
129 text-transform: uppercase;
130 letter-spacing: 0.05em;
131 border: 2px solid var(--color-border-dark);
132}
133.skip-link:focus {
134 top: var(--spacing-md);
135}
136#main-content:focus {
137 outline: none;
138}
139
140/* Hide text until fonts are loaded to prevent flicker */
141body:not(.fonts-ready) h1,
142body:not(.fonts-ready) h2,
143body:not(.fonts-ready) h3,
144body:not(.fonts-ready) h4,
145body:not(.fonts-ready) h5,
146body:not(.fonts-ready) h6,
147body:not(.fonts-ready) .site-title,
148body:not(.fonts-ready) .section-title {
149 visibility: hidden;
150}
151
152body.fonts-ready h1,
153body.fonts-ready h2,
154body.fonts-ready h3,
155body.fonts-ready h4,
156body.fonts-ready h5,
157body.fonts-ready h6,
158body.fonts-ready .site-title,
159body.fonts-ready .section-title {
160 visibility: visible;
161 transition: opacity 200ms ease-in-out;
162}
163
164h1,
165h2,
166h3,
167h4,
168h5,
169h6 {
170 font-family: var(--font-heading);
171 font-weight: 700;
172 margin: 0 0 var(--spacing-md);
173 line-height: 1.1;
174 letter-spacing: 0.02em;
175}
176
177h1 {
178 font-size: var(--font-size-xl);
179}
180
181h2 {
182 font-size: var(--font-size-lg);
183}
184
185h3 {
186 font-size: var(--font-size-base);
187}
188
189h4 {
190 font-size: var(--font-size-base);
191}
192
193h5,
194h6 {
195 font-size: var(--font-size-sm);
196}
197
198a {
199 color: var(--color-text);
200 text-decoration: underline;
201 text-decoration-thickness: 2px;
202 text-underline-offset: 3px;
203 transition: text-decoration var(--transition);
204}
205
206a:hover {
207 text-decoration-style: double;
208}
209
210img {
211 max-width: 100%;
212 height: auto;
213 display: block;
214}
215
216/* ============================================
217 Site Structure
218 ============================================ */
219
220site-app {
221 display: flex;
222 flex-direction: column;
223 min-height: 100vh;
224 /* Ensure main content is centered on ultra-wide screens */
225 align-items: center;
226 width: 100%;
227}
228
229/* Theme loading state: content fades in smoothly after theme is applied */
230site-app:not(.theme-ready) .main,
231site-app:not(.theme-ready) .header {
232 opacity: 0;
233}
234
235site-app.theme-ready .main,
236site-app.theme-ready .header {
237 opacity: 1;
238 animation: fadeIn 0.35s ease-out;
239}
240
241.header {
242 display: flex;
243 justify-content: space-between;
244 align-items: flex-start;
245 padding-bottom: var(--spacing-md);
246 padding-top: calc(var(--spacing-lg) + var(--safe-area-inset-top));
247 padding-left: calc(var(--spacing-lg) + var(--safe-area-inset-left));
248 padding-right: calc(var(--spacing-lg) + var(--safe-area-inset-right));
249 background: var(--color-background);
250 gap: var(--spacing-md);
251 /* Ensure header stretches to full width since parent is now centered */
252 width: 100%;
253 max-width: 100%;
254 position: sticky;
255 top: 0;
256 z-index: 200;
257 transition: transform 0.3s ease;
258}
259
260.header.header--hidden {
261 transform: translateY(-100%);
262}
263
264.header-left {
265 display: flex;
266 align-items: center;
267 gap: var(--spacing-md);
268}
269
270/* Header special spore – nudge up so stem doesn’t sit low vs title/flower */
271.header-spores {
272 align-self: center;
273 display: inline-flex;
274 align-items: center;
275}
276
277.header-spores > div {
278 display: flex;
279 align-items: center;
280 justify-content: center;
281}
282
283.header-spores > div svg {
284 display: block;
285 /* Optical nudge: spore graphic has stem below, so shift up to align with text */
286 transform: translateY(-4px);
287}
288
289/* Home Button with Dandelion Icon */
290.home-button {
291 display: flex;
292 align-items: center;
293 justify-content: center;
294 width: 48px;
295 height: 48px;
296 flex-shrink: 0;
297 color: var(--color-text);
298 text-decoration: none;
299 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
300 background: var(--color-background);
301 transition: all var(--transition);
302 padding: var(--spacing-xs);
303}
304
305.home-button:hover {
306 background: var(--color-text);
307 color: var(--color-background);
308 transform: scale(1.05);
309}
310
311.home-button:active {
312 transform: scale(0.98);
313}
314
315.dandelion-icon {
316 width: 100%;
317 height: 100%;
318}
319
320/* Dandelion icon - has both stroke and fill */
321.dandelion-icon path,
322.dandelion-icon line,
323.dandelion-icon circle {
324 stroke: var(--color-text);
325 fill: var(--color-text);
326 transition: stroke var(--transition), fill var(--transition);
327}
328
329/* Monochrome spore flower - outline only, no fill */
330.monochrome-spore-flower path,
331.monochrome-spore-flower circle {
332 stroke: var(--color-text);
333 transition: stroke var(--transition);
334}
335
336/* Invert colors on hover */
337.home-button:hover .dandelion-icon path,
338.home-button:hover .dandelion-icon line,
339.home-button:hover .dandelion-icon circle {
340 stroke: var(--color-background) !important;
341 fill: var(--color-background) !important;
342}
343
344.home-button:hover .monochrome-spore-flower path,
345.home-button:hover .monochrome-spore-flower circle {
346 stroke: var(--color-background) !important;
347}
348
349.site-title {
350 margin: 0;
351 font-size: var(--font-size-xl);
352 font-weight: 700;
353 color: var(--color-text);
354 letter-spacing: -0.03em;
355}
356
357.site-subtitle {
358 font-size: 0.98rem;
359 font-weight: 500;
360 margin: 0;
361 margin-top: 0.25rem;
362 color: var(--color-text-muted);
363 letter-spacing: 0.05em;
364}
365
366/* Inline edit inputs for title/subtitle in edit mode */
367.site-title-input,
368.site-subtitle-input {
369 font-family: var(--font-heading);
370 background: var(--color-background);
371 border: 2px dashed var(--color-border-dark);
372 border-radius: 0;
373 color: var(--color-text);
374 width: 100%;
375 max-width: 400px;
376 transition: all var(--transition);
377}
378
379.site-title-input {
380 font-size: var(--font-size-xl);
381 font-weight: 700;
382 letter-spacing: -0.03em;
383 padding: var(--spacing-xs) var(--spacing-sm);
384 margin: 0;
385}
386
387.site-subtitle-input {
388 font-size: 0.98rem;
389 font-weight: 500;
390 letter-spacing: 0.05em;
391 padding: var(--spacing-xs) var(--spacing-sm);
392 margin-top: 0.25rem;
393 color: var(--color-text-muted);
394}
395
396.site-title-input:focus,
397.site-subtitle-input:focus {
398 outline: none;
399 border-style: solid;
400 border-width: 2px;
401 border-color: var(--color-border-dark);
402}
403
404.site-title-input::placeholder {
405 color: var(--color-text-muted);
406 opacity: 0.6;
407}
408
409.site-subtitle-input::placeholder {
410 color: var(--color-text-muted);
411 opacity: 0.6;
412}
413
414/* Mobile adjustments for inline edit inputs */
415@media (max-width: 767px) {
416 .site-title-input {
417 font-size: 1.25rem;
418 max-width: 100%;
419 }
420
421 .site-subtitle-input {
422 font-size: 0.85rem;
423 max-width: 100%;
424 }
425}
426
427@media (max-width: 479px) {
428 .site-title-input {
429 font-size: 1.1rem;
430 }
431
432 .site-subtitle-input {
433 font-size: 0.75rem;
434 }
435}
436
437.controls {
438 display: flex;
439 gap: var(--spacing-sm);
440 align-items: stretch;
441}
442
443/* Header controls: match home button pattern (outline default, filled on hover) */
444.header .controls .button,
445.header .controls .button-primary,
446.header .controls .button-secondary,
447.header .controls .button-ghost {
448 color: var(--color-text);
449 background: var(--color-background);
450 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
451}
452
453.header .controls .button:hover,
454.header .controls .button-primary:hover,
455.header .controls .button-secondary:hover,
456.header .controls .button-ghost:hover {
457 background: var(--color-text);
458 color: var(--color-background);
459}
460
461.header .controls .button-ghost:hover {
462 border-color: var(--color-border-dark);
463}
464
465/* Mobile Menu Toggle (Hamburger) */
466.mobile-menu-toggle {
467 display: none;
468 width: 48px;
469 height: 48px;
470 padding: var(--spacing-xs);
471 background: transparent;
472 border: var(--border-width) var(--border-style) var(--color-border-dark);
473 cursor: pointer;
474 flex-shrink: 0;
475 align-self: flex-start;
476}
477
478.mobile-menu-toggle svg {
479 width: 24px;
480 height: 24px;
481}
482
483.mobile-menu-toggle:hover {
484 background: var(--color-text);
485 color: var(--color-background);
486}
487
488.mobile-menu-toggle:active {
489 transform: scale(0.98);
490}
491
492/* Mobile menu styles (< 768px) */
493@media (max-width: 767px) {
494 .mobile-menu-toggle {
495 display: flex;
496 align-items: center;
497 justify-content: center;
498 }
499
500 .header {
501 position: sticky;
502 z-index: 200;
503 padding: var(--spacing-sm) var(--spacing-md);
504 padding-top: calc(var(--spacing-md) + var(--safe-area-inset-top));
505 padding-left: calc(var(--spacing-md) + var(--safe-area-inset-left));
506 padding-right: calc(var(--spacing-md) + var(--safe-area-inset-right));
507 flex-wrap: nowrap;
508 }
509
510 .header-left {
511 flex: 1;
512 min-width: 0;
513 overflow: visible;
514 flex-wrap: nowrap !important;
515 /* Prevent wrapping - keep title on same line as home button */
516 }
517
518 /* Title container should flex and allow text wrapping */
519 .header-left > div {
520 flex: 1;
521 min-width: 0;
522 max-width: 100%;
523 overflow-wrap: break-word;
524 word-wrap: break-word;
525 }
526
527 .site-info {
528 min-width: 0;
529 overflow: hidden;
530 }
531
532 .site-title {
533 font-size: 1.25rem;
534 word-wrap: break-word;
535 overflow-wrap: break-word;
536 max-width: 100%;
537 }
538
539 .site-subtitle {
540 font-size: 0.85rem;
541 word-wrap: break-word;
542 overflow-wrap: break-word;
543 max-width: 100%;
544 }
545
546 .controls {
547 position: absolute;
548 top: 100%;
549 left: 0;
550 right: 0;
551 flex-direction: column;
552 background: var(--color-background);
553 border: none;
554 border-bottom: var(--border-width) var(--border-style) var(--color-border-dark);
555 padding: var(--spacing-md);
556 gap: var(--spacing-sm);
557 z-index: 100;
558 transform: translateY(-100%);
559 opacity: 0;
560 pointer-events: none;
561 transition: transform 200ms ease, opacity 200ms ease;
562 }
563
564 .controls.open {
565 transform: translateY(0);
566 opacity: 1;
567 pointer-events: auto;
568 }
569
570 /* Match header padding (including safe area) so dropdown aligns when has-pattern */
571 body.has-pattern .controls.open {
572 padding-top: var(--spacing-sm);
573 padding-bottom: var(--spacing-sm);
574 padding-left: calc(var(--spacing-md) + var(--safe-area-inset-left));
575 padding-right: calc(var(--spacing-md) + var(--safe-area-inset-right));
576 }
577
578 .controls .button {
579 width: 100%;
580 justify-content: center;
581 min-height: 44px;
582 text-align: center;
583 }
584}
585
586/* Extra small screens (< 480px) */
587@media (max-width: 479px) {
588 .site-title {
589 font-size: 1.1rem;
590 }
591
592 .site-subtitle {
593 font-size: 0.75rem;
594 }
595
596 .home-button,
597 .mobile-menu-toggle {
598 width: 36px;
599 height: 36px;
600 padding: 4px;
601 }
602
603 .mobile-menu-toggle svg {
604 width: 18px;
605 height: 18px;
606 }
607
608 .home-button svg,
609 .dandelion-icon {
610 width: 100%;
611 height: 100%;
612 }
613}
614
615.flower-bed {
616 width: 100%;
617}
618
619.main {
620 flex: 1;
621 align-self: center;
622 width: 100%;
623 max-width: 1200px;
624 margin: 0 auto;
625 padding: var(--spacing-xl) var(--spacing-lg);
626 display: flex;
627 flex-direction: column;
628 box-sizing: border-box;
629}
630
631/* Constrain homepage width for better readability */
632.main.is-homepage {
633 max-width: 1000px !important;
634}
635
636/* Add bottom padding on mobile to account for fixed save bar when in edit mode */
637@media (max-width: 1280px) {
638 .main {
639 padding: var(--spacing-lg) var(--spacing-md);
640 }
641
642 .main:has(.save-bar) {
643 padding-bottom: calc(110px + var(--safe-area-inset-bottom));
644 }
645}
646
647.footer {
648 text-align: center;
649 color: var(--color-text-muted);
650 font-size: 0.875rem;
651 margin-top: var(--spacing-lg);
652 margin-bottom: var(--spacing-lg);
653}
654
655.footer a {
656 color: inherit;
657}
658
659.footer .hypha-credit-link,
660.footer .hypha-credit-link:visited {
661 color: #9900FC;
662 font-family: 'Work Sans', var(--font-body);
663 font-size: 1.1em;
664 text-decoration-line: none;
665 text-decoration-color: #000;
666 text-decoration-style: solid;
667 text-decoration-thickness: 2px;
668 text-underline-offset: 3px;
669 text-decoration-skip-ink: none;
670}
671
672.footer .hypha-credit-link:hover,
673.footer .hypha-credit-link:focus-visible,
674.footer .hypha-credit-link:active {
675 color: #9900FC;
676 text-decoration-line: underline;
677 text-decoration-color: #000;
678 text-decoration-style: solid;
679}
680
681/* ============================================
682 Sections
683 ============================================ */
684
685/* Section blocks stay hidden until content is ready, then fade in */
686section-block:not(.section-ready) {
687 opacity: 0;
688 pointer-events: none;
689}
690
691section-block.section-ready {
692 animation: fadeIn 0.35s ease-out forwards;
693 pointer-events: auto;
694}
695
696.section {
697 margin-bottom: var(--spacing-xl);
698}
699
700/* Liquid glass effect for sections when isoline pattern is active */
701body.has-pattern .section,
702body.has-pattern section-block,
703body.has-pattern section-block.section {
704 background: rgba(var(--color-background-rgb), 0.25) !important;
705 border-radius: var(--border-radius);
706 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
707 backdrop-filter: blur(80px);
708 -webkit-backdrop-filter: blur(80px);
709 border: 1px solid rgba(var(--color-text-rgb), 0.1);
710 padding: var(--spacing-lg);
711}
712
713@media (max-width: 767px) {
714 body.has-pattern .section,
715 body.has-pattern section-block,
716 body.has-pattern section-block.section {
717 padding: var(--spacing-md);
718 }
719}
720
721/* Liquid glass effect for header and mobile menu when isoline pattern is active */
722body.has-pattern .header,
723body.has-pattern .controls.open {
724 background: rgba(var(--color-background-rgb), 0.25) !important;
725 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
726 backdrop-filter: blur(80px);
727 -webkit-backdrop-filter: blur(80px);
728 border-bottom: 1px solid rgba(var(--color-text-rgb), 0.1);
729}
730
731/* When menu open: header + dropdown read as one panel (no double border) */
732body.has-pattern .header:has(.controls.open) {
733 border-bottom: none !important;
734}
735
736/* Fallback for browsers without backdrop-filter support */
737@supports not (backdrop-filter: blur(1px)) {
738
739 body.has-pattern .section,
740 body.has-pattern section-block,
741 body.has-pattern section-block.section {
742 background: rgba(var(--color-background-rgb), 0.85) !important;
743 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
744 }
745
746 body.has-pattern .header,
747 body.has-pattern .controls.open {
748 background: rgba(var(--color-background-rgb), 0.9) !important;
749 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
750 }
751
752 body.has-pattern .garden-preview__flower-box,
753 body.has-pattern .flower-grid-item {
754 background: rgba(var(--color-background-rgb), 0.85) !important;
755 box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
756 }
757}
758
759.section-header {
760 display: flex;
761 justify-content: space-between;
762 align-items: flex-start;
763 gap: var(--spacing-md);
764 flex-wrap: wrap;
765 margin-bottom: var(--spacing-md);
766}
767
768.section-title-wrapper {
769 display: flex;
770 align-items: center;
771 gap: 0.5rem;
772}
773
774.section-title {
775 margin: 0;
776 font-size: var(--font-size-lg);
777 font-weight: 700;
778 letter-spacing: -0.02em;
779}
780
781.section-controls {
782 display: flex;
783 gap: var(--spacing-sm);
784 align-items: center;
785 justify-content: flex-end;
786 flex-wrap: wrap;
787 margin-top: var(--spacing-lg);
788 padding-top: var(--spacing-md);
789 border-top: calc(var(--border-width) * 0.25) var(--border-style, solid) var(--color-border-dark);
790}
791
792/* In edit mode, put the divider on the whole section, not the header */
793.section[data-edit-mode="true"] {
794 padding: var(--spacing-md);
795 border: calc(var(--border-width) * 0.5) var(--border-style, solid) var(--color-border-dark);
796}
797
798.section-info {
799 display: inline-flex;
800 align-items: center;
801 padding: var(--spacing-sm) var(--spacing-md);
802 border: 2px var(--border-style, solid) var(--color-border);
803 font-family: var(--font-mono);
804 color: var(--color-text-muted);
805 white-space: nowrap;
806 max-width: 300px;
807 overflow: hidden;
808 text-overflow: ellipsis;
809}
810
811.section-info-row {
812 display: flex;
813 gap: var(--spacing-xs);
814 align-items: center;
815}
816
817.section-move-buttons {
818 display: flex;
819 gap: 0.25rem;
820}
821
822.section-action-buttons {
823 display: flex;
824 gap: var(--spacing-xs);
825 align-items: center;
826}
827
828/* Section Controls Mobile Responsive (< 768px) */
829@media (max-width: 767px) {
830 .section-header {
831 flex-direction: column;
832 align-items: stretch;
833 }
834
835 .section-title-wrapper {
836 width: 100%;
837 }
838
839 .section-controls {
840 width: 100%;
841 flex-wrap: wrap;
842 justify-content: flex-start;
843 }
844
845 .section-controls .button {
846 flex: 1 1 calc(50% - var(--spacing-xs));
847 min-width: 120px;
848 min-height: 44px;
849 }
850
851 .section-info-row {
852 width: 100%;
853 display: flex;
854 }
855
856 .section-info-row .section-info,
857 .section-info-row .section-move-buttons {
858 flex: 0 0 50%;
859 width: 50%;
860 box-sizing: border-box;
861 }
862
863 .section-info-row .section-info {
864 font-size: 0.7rem;
865 overflow: hidden;
866 text-overflow: ellipsis;
867 }
868
869 .section-info-row .section-move-buttons {
870 justify-content: flex-end;
871 }
872
873 /* Override button sizing inside move buttons - keep them small */
874 .section-info-row .section-move-buttons .button {
875 flex: 0 0 auto;
876 min-width: 44px;
877 width: auto;
878 }
879
880 .section-action-buttons {
881 display: flex;
882 flex-wrap: wrap;
883 gap: var(--spacing-xs);
884 width: 100%;
885 }
886
887 .section-action-buttons .button {
888 flex: 1 1 calc(50% - var(--spacing-xs));
889 min-width: 0;
890 }
891}
892
893/* Section Info Collapse - Extra small screens (< 480px) */
894@media (max-width: 479px) {
895 .section-info-row .section-info {
896 font-size: 0.65rem;
897 }
898
899 /* Keep action buttons at 50% even on small screens */
900 .section-action-buttons .button {
901 flex: 1 1 calc(50% - var(--spacing-xs));
902 min-width: 0;
903 }
904}
905
906/* Record Grid - Mobile-first responsive grid */
907.record-grid {
908 display: grid;
909 gap: var(--spacing-md);
910 grid-template-columns: 1fr;
911 /* Base: single column on mobile */
912}
913
914@media (min-width: 480px) {
915 .record-grid {
916 grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
917 gap: var(--spacing-lg);
918 }
919}
920
921@media (min-width: 768px) {
922 .record-grid {
923 grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
924 }
925}
926
927@media (min-width: 1024px) {
928 .record-grid {
929 grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
930 }
931}
932
933/* When there's only one item, let it take full width up to a max */
934.record-grid:has(> :only-child) {
935 grid-template-columns: 1fr;
936}
937
938.record-grid> :only-child {
939 max-width: 700px;
940}
941
942.record-grid.content-enter {
943 display: flex;
944 flex-direction: column;
945 align-items: center;
946}
947
948.record-error {
949 min-height: 200px;
950 display: flex;
951 align-items: center;
952 justify-content: center;
953}
954
955.image-error-container {
956 padding: var(--spacing-md);
957}
958
959/* ============================================
960 Form Elements
961 ============================================ */
962
963.input,
964.textarea,
965.select {
966 font-family: inherit;
967 font-size: 1rem;
968 padding: var(--spacing-md);
969 border: 2px var(--border-style, solid) var(--color-border-dark);
970 border-radius: 0;
971 background: var(--color-background);
972 color: var(--color-text);
973 width: 100%;
974 transition: all var(--transition), border-style var(--transition);
975}
976
977.input:focus,
978.textarea:focus,
979.select:focus {
980 outline: none;
981 border-width: 4px;
982 border-color: var(--color-border-dark);
983}
984
985.input::placeholder,
986.textarea::placeholder {
987 color: var(--color-text-muted);
988}
989
990.textarea {
991 resize: vertical;
992 min-height: 120px;
993}
994
995/* Text selection - inverted colors for sufficient contrast */
996.textarea::selection,
997.content::selection,
998.input::selection {
999 background-color: var(--color-text);
1000 color: var(--color-background);
1001}
1002
1003.textarea::-moz-selection,
1004.content::-moz-selection,
1005.input::-moz-selection {
1006 background-color: var(--color-text);
1007 color: var(--color-background);
1008}
1009
1010/* ============================================
1011 Buttons
1012 ============================================ */
1013
1014.button {
1015 font-family: var(--font-body);
1016 font-size: 0.875rem;
1017 font-weight: 700;
1018 padding: var(--spacing-md) var(--spacing-lg);
1019 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
1020 border-radius: 0;
1021 background: var(--color-text);
1022 color: var(--color-background);
1023 cursor: pointer;
1024 transition: all var(--transition);
1025 text-transform: uppercase;
1026 letter-spacing: 0.05em;
1027}
1028
1029.button:hover {
1030 background: var(--color-background);
1031 color: var(--color-text);
1032}
1033
1034.button:focus-visible {
1035 outline: 3px solid var(--color-border-dark);
1036 outline-offset: 2px;
1037}
1038
1039.button:active {
1040 transform: translate(1px, 1px);
1041}
1042
1043.button:disabled {
1044 opacity: 0.3;
1045 cursor: not-allowed;
1046}
1047
1048.button-primary {
1049 background: var(--color-text);
1050 color: var(--color-background);
1051 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
1052}
1053
1054.button-secondary {
1055 background: var(--color-text-muted);
1056 color: var(--color-button-secondary-text, var(--color-background));
1057 border: var(--border-width) var(--border-style, solid) var(--color-border-muted);
1058}
1059
1060.modal-actions .button-secondary {
1061 margin-top: 0;
1062}
1063
1064.button-ghost {
1065 background: transparent;
1066 color: var(--color-text);
1067 border: var(--border-width) var(--border-style, solid) transparent;
1068}
1069
1070.button-ghost:hover {
1071 color: var(--color-text);
1072 border-color: var(--color-border);
1073}
1074
1075.button-danger {
1076 background: #dc2626;
1077 border-color: #dc2626;
1078 color: white;
1079}
1080
1081.button-danger:hover {
1082 background: #b91c1c;
1083 border-color: #b91c1c;
1084}
1085
1086.button-accent {
1087 background: var(--color-accent);
1088 border-color: var(--color-accent);
1089 color: var(--color-button-accent-text, white);
1090}
1091
1092.button-accent:hover {
1093 background: #0284c7;
1094 border-color: #0284c7;
1095}
1096
1097.button-small {
1098 padding: var(--spacing-sm) var(--spacing-md);
1099 font-size: 0.75rem;
1100}
1101
1102.button-icon {
1103 padding: var(--spacing-xs);
1104 display: inline-flex;
1105 align-items: center;
1106 justify-content: center;
1107 line-height: 1;
1108}
1109
1110.button-large {
1111 padding: var(--spacing-lg) var(--spacing-xl);
1112 font-size: 1rem;
1113}
1114
1115/* ============================================
1116 Touch Targets & Interactions (Phase 6)
1117 ============================================ */
1118
1119/* Minimum Touch Target Size - Ensure all interactive elements meet 44x44px */
1120.button,
1121.section-move-btn,
1122.flower-item {
1123 min-height: 44px;
1124 min-width: 44px;
1125}
1126
1127/* Links need touch target via padding on mobile */
1128@media (max-width: 767px) {
1129 .button {
1130 padding: var(--spacing-sm) var(--spacing-md);
1131 min-height: 44px;
1132 }
1133
1134 .button-small {
1135 min-height: 36px;
1136 padding: var(--spacing-xs) var(--spacing-sm);
1137 }
1138
1139 /* Tap Highlight for better touch feedback */
1140 .button,
1141 a,
1142 .flower-item,
1143 .flower-grid-item a,
1144 .recent-garden-row-link,
1145 .section-type,
1146 .template-card,
1147 .collection-item,
1148 .record-item,
1149 .post-item,
1150 .welcome-action-card {
1151 -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
1152 }
1153
1154 /* Ensure clickable elements have adequate touch area */
1155 .links-item,
1156 .recent-garden-row-link {
1157 min-height: 44px;
1158 }
1159
1160 /* Improve touch target for close buttons */
1161 .modal-close,
1162 .notification-close {
1163 min-width: 44px;
1164 min-height: 44px;
1165 display: flex;
1166 align-items: center;
1167 justify-content: center;
1168 }
1169}
1170
1171/* ============================================
1172 Dev Notice
1173 ============================================ */
1174
1175.dev-notice {
1176 margin: var(--spacing-sm) 0;
1177 padding: var(--spacing-xs) var(--spacing-sm);
1178 border-left: 3px solid var(--color-text-muted);
1179 background: var(--color-surface, rgba(0,0,0,0.03));
1180 font-size: 0.8rem;
1181 color: var(--color-text-muted);
1182 border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
1183}
1184.dev-notice a {
1185 color: inherit;
1186 text-decoration: underline;
1187}
1188
1189/* ============================================
1190 Modals
1191 ============================================ */
1192
1193.modal,
1194.modal-overlay {
1195 position: fixed;
1196 inset: 0;
1197 display: flex;
1198 align-items: center;
1199 justify-content: center;
1200 background: rgba(0, 0, 0, 0.8);
1201 padding: var(--spacing-md);
1202 z-index: 1000;
1203}
1204
1205.modal-content {
1206 background: var(--color-background);
1207 padding: var(--spacing-lg);
1208 border: var(--border-width-thick) var(--border-style, solid) var(--color-border-dark);
1209 max-width: 800px;
1210 width: 100%;
1211 max-height: 90vh;
1212 overflow-y: auto;
1213}
1214
1215/* Modal Mobile Responsive - Bottom Sheet Style (< 480px) */
1216@media (max-width: 479px) {
1217
1218 .modal,
1219 .modal-overlay {
1220 padding: 0;
1221 align-items: flex-end;
1222 }
1223
1224 .modal-content {
1225 max-width: none;
1226 max-height: 90vh;
1227 border-left: none;
1228 border-right: none;
1229 border-bottom: none;
1230 border-radius: 0;
1231 padding: 0;
1232 }
1233
1234 .modal-header {
1235 position: sticky;
1236 top: 0;
1237 background: var(--color-background);
1238 padding: var(--spacing-md);
1239 z-index: 1;
1240 }
1241
1242 .modal-body {
1243 padding: var(--spacing-md);
1244 }
1245
1246 .modal-footer {
1247 position: sticky;
1248 bottom: 0;
1249 background: var(--color-background);
1250 border-top: var(--border-width) var(--border-style, solid) var(--color-border-dark);
1251 padding: var(--spacing-md);
1252 padding-left: calc(var(--spacing-md) + var(--safe-area-inset-left));
1253 padding-right: calc(var(--spacing-md) + var(--safe-area-inset-right));
1254 }
1255
1256 .modal-content h2 {
1257 font-size: var(--font-size-lg);
1258 padding: var(--spacing-md);
1259 padding-bottom: 0;
1260 }
1261
1262 /* Add padding to modal description text on mobile */
1263 .modal-content h2+p,
1264 .modal-content>p:first-of-type {
1265 padding: 0 var(--spacing-md);
1266 }
1267
1268 .modal-actions {
1269 flex-direction: column;
1270 padding: 0 var(--spacing-md);
1271 padding-bottom: var(--spacing-lg);
1272 }
1273
1274 .modal-actions .button {
1275 width: 100%;
1276 min-height: 44px;
1277 justify-content: center;
1278 }
1279
1280 .dev-notice {
1281 margin: var(--spacing-sm) var(--spacing-md);
1282 font-size: 0.85rem;
1283 border-left-width: 2px;
1284 }
1285}
1286
1287.login-modal-content {
1288 padding: var(--spacing-xl);
1289 max-width: 400px;
1290}
1291
1292/* Login Modal Mobile Responsive (< 480px) */
1293@media (max-width: 479px) {
1294 .login-modal-content {
1295 padding: var(--spacing-md);
1296 }
1297
1298 .login-modal-content .input,
1299 .login-modal-content input {
1300 font-size: 16px;
1301 /* Prevents iOS zoom on focus */
1302 }
1303}
1304
1305.create-content-modal,
1306.create-block-modal {
1307 max-width: 600px;
1308}
1309
1310/* Create Content/Block Modal Mobile Responsive (< 480px) */
1311@media (max-width: 479px) {
1312
1313 .create-content-modal,
1314 .create-block-modal {
1315 max-width: none;
1316 padding: var(--spacing-md);
1317 }
1318
1319 .create-content-modal .section-types,
1320 .create-block-modal .section-types {
1321 grid-template-columns: 1fr;
1322 gap: var(--spacing-sm);
1323 }
1324
1325 .section-type {
1326 padding: var(--spacing-md);
1327 min-height: 44px;
1328 }
1329}
1330
1331.content {
1332 line-height: 1.6;
1333}
1334
1335/* Markdown/text content blocks: max-width 700px, centered in parent */
1336.section[data-type="content"] .section-content {
1337 display: flex;
1338 flex-direction: column;
1339 align-items: center;
1340}
1341
1342.section[data-type="content"] .section-content > .content {
1343 max-width: 700px;
1344 width: 100%;
1345}
1346
1347/* Smooth appearance when content replaces loading state */
1348.content-enter {
1349 animation: fadeIn 0.3s ease-out;
1350}
1351
1352.content h1,
1353.content h2,
1354.content h3 {
1355 margin-top: 1.5em;
1356 margin-bottom: 0.5em;
1357}
1358
1359.content p {
1360 margin-bottom: 1em;
1361}
1362
1363.config-modal-content {
1364 max-width: 800px;
1365 max-height: 90vh;
1366 overflow-y: auto;
1367}
1368
1369/* Config Modal Mobile Responsive (< 480px) */
1370@media (max-width: 479px) {
1371 .config-modal-content {
1372 padding: var(--spacing-sm);
1373 }
1374
1375 .config-modal-content .site-config {
1376 margin: 0;
1377 padding: var(--spacing-sm);
1378 }
1379
1380 .config-modal-content .theme-colors {
1381 grid-template-columns: 1fr;
1382 }
1383
1384 .config-tabs {
1385 flex-wrap: wrap;
1386 }
1387
1388 .config-tab {
1389 flex: 1 1 calc(50% - var(--spacing-xs));
1390 min-width: 0;
1391 text-align: center;
1392 }
1393}
1394
1395.config-modal-header {
1396 display: flex;
1397 justify-content: space-between;
1398 align-items: baseline;
1399 margin-bottom: var(--spacing-lg);
1400 padding-bottom: var(--spacing-md);
1401 border-bottom: var(--border-width) var(--border-style, solid) var(--color-border);
1402}
1403
1404.config-modal-header h2 {
1405 margin: 0;
1406}
1407
1408.config-modal-header .modal-close {
1409 width: auto;
1410 margin: 0;
1411 padding: var(--spacing-sm) var(--spacing-md);
1412 font-size: 1.5rem;
1413 line-height: 1;
1414 min-width: auto;
1415}
1416
1417.modal-content h2 {
1418 font-size: var(--font-size-lg);
1419 margin-top: 0;
1420 margin-bottom: var(--spacing-lg);
1421}
1422
1423.modal-close {
1424 display: block;
1425 width: 100%;
1426}
1427
1428/* Modal close button padding on mobile */
1429@media (max-width: 479px) {
1430 .modal-content>.modal-close {
1431 margin-left: var(--spacing-md);
1432 margin-right: var(--spacing-md);
1433 margin-bottom: var(--spacing-lg);
1434 width: calc(100% - var(--spacing-md) * 2);
1435 }
1436}
1437
1438.login-form {
1439 display: flex;
1440 flex-direction: column;
1441 gap: var(--spacing-md);
1442 margin-bottom: 0;
1443}
1444
1445.form-group {
1446 margin-bottom: var(--spacing-lg);
1447}
1448
1449/* Form group mobile padding in modals */
1450@media (max-width: 479px) {
1451
1452 .modal-content .form-group,
1453 .take-flower-form {
1454 padding: 0 var(--spacing-md);
1455 }
1456
1457 .login-form {
1458 padding: var(--spacing-md);
1459 }
1460}
1461
1462.form-group label {
1463 display: block;
1464 font-weight: 600;
1465 margin-bottom: var(--spacing-sm);
1466 text-transform: uppercase;
1467 font-size: 0.75rem;
1468 letter-spacing: 0.05em;
1469}
1470
1471.form-hint {
1472 display: block;
1473 margin-top: var(--spacing-xs);
1474 font-size: 0.75rem;
1475 color: var(--color-text-muted);
1476 font-style: italic;
1477}
1478
1479.upload-label {
1480 display: flex;
1481 flex-direction: column;
1482 gap: var(--spacing-xs);
1483 cursor: pointer;
1484}
1485
1486.upload-label>span:first-child {
1487 font-weight: 600;
1488 text-transform: uppercase;
1489 font-size: 0.75rem;
1490 letter-spacing: 0.05em;
1491}
1492
1493.file-input {
1494 display: none;
1495}
1496
1497.upload-hint {
1498 font-size: 0.875rem;
1499 color: var(--color-text-muted);
1500 font-weight: normal;
1501 text-transform: none;
1502 letter-spacing: normal;
1503}
1504
1505.modal-actions {
1506 display: flex;
1507 gap: var(--spacing-md);
1508 margin-top: var(--spacing-lg);
1509}
1510
1511.modal-actions .button {
1512 flex: 1;
1513}
1514
1515/* Confirmation Modal */
1516.confirm-modal-content {
1517 max-width: 400px;
1518 text-align: center;
1519}
1520
1521.confirm-modal-content h2 {
1522 margin-bottom: var(--spacing-md);
1523}
1524
1525.confirm-modal-message {
1526 margin: 0 0 var(--spacing-lg);
1527 color: var(--color-text);
1528 line-height: 1.5;
1529}
1530
1531.confirm-modal-content .modal-actions {
1532 justify-content: center;
1533}
1534
1535.confirm-modal-content .modal-actions .button {
1536 flex: 0 1 auto;
1537 min-width: 100px;
1538}
1539
1540/* Confirmation Modal Mobile Responsive (< 480px) */
1541@media (max-width: 479px) {
1542 .confirm-modal-content {
1543 max-width: none;
1544 padding: var(--spacing-md);
1545 }
1546
1547 .confirm-modal-content .modal-actions {
1548 flex-direction: row;
1549 gap: var(--spacing-sm);
1550 }
1551
1552 .confirm-modal-content .modal-actions .button {
1553 flex: 1;
1554 min-width: 0;
1555 min-height: 44px;
1556 }
1557}
1558
1559/* Alert Modal (single button notification) */
1560.alert-modal-content {
1561 max-width: 400px;
1562 text-align: center;
1563}
1564
1565.alert-modal-content h2 {
1566 margin-bottom: var(--spacing-md);
1567}
1568
1569.alert-modal-message {
1570 margin: 0 0 var(--spacing-lg);
1571 color: var(--color-text);
1572 line-height: 1.5;
1573}
1574
1575.alert-modal-icon {
1576 font-size: 3rem;
1577 line-height: 1;
1578 margin-bottom: var(--spacing-md);
1579}
1580
1581.alert-modal-content.alert-success .alert-modal-icon {
1582 color: #22c55e;
1583}
1584
1585.alert-modal-content.alert-error .alert-modal-icon {
1586 color: #dc2626;
1587}
1588
1589.alert-modal-content .modal-actions {
1590 justify-content: center;
1591}
1592
1593.alert-modal-content .modal-actions .button {
1594 min-width: 120px;
1595}
1596
1597/* Alert Modal Mobile Responsive (< 480px) */
1598@media (max-width: 479px) {
1599 .alert-modal-content {
1600 max-width: none;
1601 padding: var(--spacing-md);
1602 }
1603
1604 .alert-modal-content .modal-actions .button {
1605 min-height: 44px;
1606 }
1607}
1608
1609.section-types {
1610 display: grid;
1611 grid-template-columns: repeat(3, 1fr);
1612 gap: var(--spacing-md);
1613 margin-bottom: var(--spacing-lg);
1614 padding: var(--spacing-md);
1615}
1616
1617.section-type {
1618 display: flex;
1619 flex-direction: column;
1620 align-items: center;
1621 gap: var(--spacing-sm);
1622 padding: var(--spacing-lg);
1623 background: var(--color-background);
1624 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
1625 cursor: pointer;
1626 transition: all var(--transition);
1627 text-transform: uppercase;
1628 font-weight: 700;
1629 font-size: 0.75rem;
1630 letter-spacing: 0.05em;
1631}
1632
1633.section-type:hover {
1634 background: var(--color-text);
1635 color: var(--color-background);
1636}
1637
1638.section-type-helper {
1639 grid-column: 1 / -1;
1640 font-size: 0.75rem;
1641 color: var(--color-text-muted);
1642 text-align: center;
1643 font-style: italic;
1644 text-transform: none;
1645 font-weight: normal;
1646 margin-top: calc(var(--spacing-md) * -1);
1647 line-height: 1.5;
1648}
1649
1650.icon {
1651 font-size: 2rem;
1652}
1653
1654/* ============================================
1655 Utilities
1656 ============================================ */
1657
1658.loading {
1659 text-align: center;
1660 padding: var(--spacing-xl);
1661 color: var(--color-text-muted);
1662 font-weight: 600;
1663 font-size: var(--font-size-xl);
1664 text-transform: uppercase;
1665 letter-spacing: 0.1em;
1666 animation: fadeIn 0.2s ease-out;
1667}
1668
1669.error {
1670 color: #dc2626;
1671 padding: var(--spacing-lg);
1672 background: #fef2f2;
1673 border: var(--border-width) var(--border-style, solid) #dc2626;
1674 font-weight: 600;
1675}
1676
1677/* Loading and Error States */
1678.loading-state {
1679 display: flex;
1680 flex-direction: column;
1681 align-items: center;
1682 justify-content: center;
1683 padding: var(--spacing-xl);
1684 gap: var(--spacing-md);
1685 min-height: 200px;
1686 animation: fadeIn 0.2s ease-out;
1687}
1688
1689.loading-text {
1690 margin: 0;
1691 color: var(--color-text-muted);
1692 font-weight: 600;
1693 text-transform: uppercase;
1694 letter-spacing: 0.1em;
1695 font-size: 0.875rem;
1696}
1697
1698.error-state {
1699 display: flex;
1700 flex-direction: column;
1701 align-items: center;
1702 justify-content: center;
1703 padding: var(--spacing-xl);
1704 gap: var(--spacing-md);
1705 min-height: 200px;
1706 text-align: center;
1707 background: #fef2f2;
1708 border: var(--border-width) var(--border-style, solid) #dc2626;
1709 border-radius: 4px;
1710 animation: fadeIn 0.2s ease-out;
1711}
1712
1713.error-icon {
1714 font-size: 3rem;
1715 line-height: 1;
1716}
1717
1718.error-message {
1719 margin: 0;
1720 color: #dc2626;
1721 font-weight: 600;
1722 font-size: 1.125rem;
1723}
1724
1725.error-details {
1726 margin: 0;
1727 color: var(--color-text-muted);
1728 font-size: 0.875rem;
1729 font-family: var(--font-mono);
1730}
1731
1732.button-retry {
1733 margin-top: var(--spacing-sm);
1734}
1735
1736.button-retry:disabled {
1737 opacity: 0.6;
1738 cursor: not-allowed;
1739}
1740
1741/* Loading States */
1742.loading-state {
1743 display: flex;
1744 flex-direction: column;
1745 align-items: center;
1746 justify-content: center;
1747 gap: var(--spacing-md);
1748 padding: var(--spacing-xl);
1749 text-align: center;
1750 min-height: 120px;
1751 animation: fadeIn 0.2s ease-out;
1752}
1753
1754.loading-message {
1755 margin: 0;
1756 color: var(--color-text-muted);
1757 font-weight: 500;
1758 text-transform: uppercase;
1759 letter-spacing: 0.05em;
1760 font-size: 0.875rem;
1761}
1762
1763/* Error States */
1764.error-state {
1765 display: flex;
1766 flex-direction: column;
1767 align-items: center;
1768 justify-content: center;
1769 gap: var(--spacing-md);
1770 padding: var(--spacing-lg);
1771 background: #fef2f2;
1772 border: var(--border-width) var(--border-style, solid) #dc2626;
1773 border-radius: 0;
1774 min-height: 120px;
1775 animation: fadeIn 0.2s ease-out;
1776}
1777
1778.error-icon {
1779 font-size: 2rem;
1780 line-height: 1;
1781}
1782
1783.error-message {
1784 margin: 0;
1785 color: #dc2626;
1786 font-weight: 600;
1787 text-align: center;
1788}
1789
1790.error-state .button {
1791 margin-top: var(--spacing-sm);
1792}
1793
1794.empty {
1795 text-align: center;
1796 padding: var(--spacing-lg);
1797 color: var(--color-text-muted);
1798}
1799
1800.homepage-view {
1801 text-align: center;
1802 padding: var(--spacing-xl);
1803 border: var(--border-width-thick) groove var(--color-border-dark);
1804 margin: auto 0;
1805 background-color: #ffffff;
1806}
1807
1808.homepage-view h2 {
1809 margin-bottom: var(--spacing-md);
1810 font-weight: 500;
1811}
1812
1813/* Homepage hero */
1814.homepage-hero {
1815 display: flex;
1816 flex-direction: column;
1817 align-items: center;
1818 gap: var(--spacing-md);
1819}
1820
1821.homepage-hero__greeting {
1822 font-size: 1.5rem;
1823 color: #000000;
1824 margin: 0;
1825}
1826
1827.homepage-hero__heading {
1828 font-size: 1.5rem;
1829 font-weight: 600;
1830 margin: 0;
1831}
1832
1833.homepage-features {
1834 list-style: none;
1835 padding: 0;
1836 margin: var(--spacing-sm) 0 0;
1837 text-align: left;
1838 display: flex;
1839 flex-direction: column;
1840 gap: var(--spacing-sm);
1841}
1842
1843.homepage-features__item {
1844 position: relative;
1845 padding-left: 1.5em;
1846 line-height: 1.5;
1847 color: var(--color-text);
1848}
1849
1850.homepage-features__item::before {
1851 content: '\2022';
1852 position: absolute;
1853 left: 0;
1854}
1855
1856.homepage-teaser {
1857 font-style: italic;
1858 color: var(--color-text);
1859 font-size: 0.875rem;
1860 margin: var(--spacing-md) 0 0;
1861}
1862
1863/* Homepage Mobile Responsive (Phase 10) - Extra small screens (< 480px) */
1864@media (max-width: 479px) {
1865 .homepage-view {
1866 padding: var(--spacing-md);
1867 text-align: center;
1868 }
1869
1870 .homepage-hero__heading {
1871 font-size: 1.25rem;
1872 }
1873
1874 .homepage-hero__greeting {
1875 font-size: 1.25rem;
1876 }
1877
1878 .homepage-features {
1879 text-align: left;
1880 }
1881}
1882
1883.empty-state {
1884 text-align: center;
1885 padding: var(--spacing-xl);
1886 border: var(--border-width-extra-thick) groove var(--color-border-dark);
1887 margin: auto 0;
1888}
1889
1890.empty-state h2 {
1891 margin-bottom: var(--spacing-md);
1892}
1893
1894/* Garden preview: theme + flower + CTA when no config or empty garden */
1895.garden-preview {
1896 display: flex;
1897 flex-direction: column;
1898 align-items: center;
1899 justify-content: center;
1900 text-align: center;
1901 padding: var(--spacing-xl);
1902 gap: var(--spacing-lg);
1903 min-height: 40vh;
1904}
1905
1906.garden-preview__flower-box {
1907 border: var(--border-width) var(--border-style) var(--color-border);
1908 padding: var(--spacing-lg);
1909 display: flex;
1910 flex-direction: column;
1911 align-items: center;
1912 justify-content: center;
1913 gap: var(--spacing-md);
1914}
1915
1916/* Liquid glass effect for flower box and flower grid items when isoline pattern is active */
1917body.has-pattern .garden-preview__flower-box,
1918body.has-pattern .flower-grid-item {
1919 background: rgba(var(--color-background-rgb), 0.25) !important;
1920 border-radius: var(--border-radius);
1921 box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
1922 backdrop-filter: blur(80px);
1923 -webkit-backdrop-filter: blur(80px);
1924 border: 1px solid rgba(var(--color-text-rgb), 0.1);
1925}
1926
1927body.has-pattern .flower-grid-item {
1928 margin-top: var(--spacing-sm);
1929}
1930
1931.garden-preview__heading {
1932 font-family: var(--font-heading);
1933 font-size: var(--font-size-xl);
1934 font-weight: 700;
1935 margin: 0;
1936 color: var(--color-text);
1937}
1938
1939.garden-preview__subtext {
1940 margin: 0;
1941 color: var(--color-text-muted);
1942 font-size: var(--font-size-base);
1943 max-width: 28ch;
1944}
1945
1946.garden-preview__hint {
1947 margin: 0;
1948 margin-top: var(--spacing-sm);
1949 display: flex;
1950 flex-wrap: wrap;
1951 align-items: center;
1952 justify-content: center;
1953 gap: 0.25rem 0.5rem;
1954 color: var(--color-text-muted);
1955 font-size: var(--font-size-base);
1956}
1957
1958.garden-preview__flower-box > .button {
1959 margin-top: var(--spacing-sm);
1960}
1961
1962.add-section {
1963 display: block;
1964 width: 100%;
1965 padding: var(--spacing-lg);
1966 margin: var(--spacing-md);
1967 margin-bottom: var(--spacing-lg);
1968 background: transparent;
1969 border: var(--border-width-thick) dashed var(--color-border-dark);
1970 color: var(--color-text);
1971 cursor: pointer;
1972 transition: all var(--transition);
1973 font-size: 1rem;
1974 font-weight: 700;
1975 text-transform: uppercase;
1976 letter-spacing: 0.05em;
1977 /* Account for margin in width calculation */
1978 width: calc(100% - var(--spacing-md) * 2);
1979}
1980
1981.add-section:hover {
1982 background: var(--color-text);
1983 color: var(--color-background);
1984 border-style: solid;
1985}
1986
1987/* Save Bar - Mobile-first: full-width bottom bar, floating on desktop */
1988.save-bar {
1989 position: fixed;
1990 bottom: 0;
1991 left: 0;
1992 right: 0;
1993 padding: var(--spacing-md);
1994 padding-bottom: calc(var(--spacing-md) + var(--safe-area-inset-bottom));
1995 padding-left: calc(var(--spacing-md) + var(--safe-area-inset-left));
1996 padding-right: calc(var(--spacing-md) + var(--safe-area-inset-right));
1997 background: var(--color-surface);
1998 border-top: var(--border-width) var(--border-style, solid) var(--color-border-dark);
1999 display: flex;
2000 justify-content: center;
2001 gap: var(--spacing-md);
2002 z-index: 999;
2003}
2004
2005/* Desktop: floating save bar */
2006@media (min-width: 768px) {
2007 .save-bar {
2008 position: fixed;
2009 bottom: var(--spacing-lg);
2010 right: var(--spacing-lg);
2011 left: auto;
2012 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2013 padding: 0;
2014 background: var(--color-surface);
2015 }
2016}
2017
2018.save-bar .save-btn {
2019 padding: var(--spacing-md) var(--spacing-lg);
2020 font-size: 0.875rem;
2021 font-weight: 700;
2022 text-transform: uppercase;
2023 letter-spacing: 0.05em;
2024 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
2025 transition: all var(--transition);
2026 min-height: 44px;
2027 /* Touch target */
2028}
2029
2030.save-bar .save-btn:hover {
2031 transform: translateY(-2px);
2032 box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
2033}
2034
2035.save-bar .save-btn:active {
2036 transform: translateY(0);
2037 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
2038}
2039
2040/* ============================================
2041 Dev Tools (only visible on localhost)
2042 ============================================ */
2043
2044.dev-tools {
2045 position: fixed;
2046 bottom: calc(var(--spacing-md) + var(--safe-area-inset-bottom));
2047 left: calc(var(--spacing-md) + var(--safe-area-inset-left));
2048 display: flex;
2049 flex-direction: column;
2050 gap: 0.5rem;
2051 z-index: 999;
2052}
2053
2054.dev-tool-button {
2055 padding: var(--spacing-md) var(--spacing-lg);
2056 color: white;
2057 border: var(--border-width) solid transparent;
2058 font-family: var(--font-body);
2059 font-size: 0.875rem;
2060 font-weight: 700;
2061 text-transform: uppercase;
2062 letter-spacing: 0.05em;
2063 cursor: pointer;
2064 transition: all var(--transition);
2065 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
2066}
2067
2068.dev-tool-button-backup {
2069 background: #1d4ed8;
2070 border-color: #1e40af;
2071}
2072
2073.dev-tool-button-reset {
2074 background: #dc2626;
2075 border-color: #b91c1c;
2076}
2077
2078.dev-tool-button-restore {
2079 background: #166534;
2080 border-color: #14532d;
2081}
2082
2083.dev-tool-button:hover {
2084 transform: translateY(-2px);
2085 box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
2086}
2087
2088.dev-tool-button-backup:hover {
2089 background: #1e40af;
2090 border-color: #1e3a8a;
2091}
2092
2093.dev-tool-button-reset:hover {
2094 background: #b91c1c;
2095 border-color: #991b1b;
2096}
2097
2098.dev-tool-button-restore:hover {
2099 background: #14532d;
2100 border-color: #052e16;
2101}
2102
2103.dev-tool-button:active {
2104 transform: translateY(0);
2105 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
2106}
2107
2108/* ============================================
2109 Welcome Modal
2110 ============================================ */
2111
2112.welcome-modal {
2113 position: fixed;
2114 inset: 0;
2115 display: flex;
2116 align-items: center;
2117 justify-content: center;
2118 background: rgba(0, 0, 0, 0.9);
2119 z-index: 2000;
2120 padding: var(--spacing-sm);
2121}
2122
2123.welcome-content {
2124 background: var(--color-background);
2125 border: var(--border-width-thick) var(--border-style, solid) var(--color-border-dark);
2126 max-width: 800px;
2127 width: 100%;
2128 max-height: 90vh;
2129 overflow-y: auto;
2130 padding: var(--spacing-lg);
2131}
2132
2133/* Welcome Modal Mobile Responsive (< 480px) */
2134@media (max-width: 479px) {
2135 .welcome-modal {
2136 padding: 0;
2137 align-items: flex-end;
2138 }
2139
2140 .welcome-content {
2141 max-width: none;
2142 max-height: 95vh;
2143 border-left: none;
2144 border-right: none;
2145 border-bottom: none;
2146 padding: var(--spacing-md);
2147 }
2148
2149 .welcome-title {
2150 font-size: var(--font-size-lg);
2151 }
2152
2153 .welcome-actions {
2154 grid-template-columns: 1fr;
2155 gap: var(--spacing-md);
2156 }
2157
2158 .welcome-action-card {
2159 padding: var(--spacing-md);
2160 }
2161
2162 .welcome-icon {
2163 font-size: 2rem;
2164 }
2165}
2166
2167.welcome-header {
2168 margin-bottom: var(--spacing-md);
2169}
2170
2171.welcome-title {
2172 text-align: center;
2173 font-size: var(--font-size-xl);
2174 font-weight: 700;
2175 margin-bottom: var(--spacing-lg);
2176 letter-spacing: -0.05em;
2177}
2178
2179.welcome-subtitle {
2180 font-size: 1.25rem;
2181 color: var(--color-text-muted);
2182 margin: 0;
2183}
2184
2185/* Center the primary CTA in onboarding step 2 */
2186#save-continue-btn {
2187 display: block;
2188 margin: var(--spacing-lg) auto 0;
2189}
2190
2191.welcome-actions {
2192 display: grid;
2193 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
2194 gap: var(--spacing-lg);
2195 margin-bottom: var(--spacing-xl);
2196}
2197
2198.welcome-action-card {
2199 display: flex;
2200 flex-direction: column;
2201 align-items: center;
2202 gap: var(--spacing-md);
2203 padding: var(--spacing-xl);
2204 background: var(--color-background);
2205 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2206 cursor: pointer;
2207 transition: all var(--transition);
2208 text-align: center;
2209 font-family: inherit;
2210 font-size: inherit;
2211}
2212
2213.welcome-action-card:hover {
2214 background: var(--color-text);
2215 color: var(--color-background);
2216 transform: translateY(-2px);
2217 border-width: var(--border-width-thick);
2218}
2219
2220.welcome-icon {
2221 font-size: 3rem;
2222 line-height: 1;
2223}
2224
2225.welcome-card-content h3 {
2226 margin: 0 0 var(--spacing-sm);
2227 font-size: var(--font-size-base);
2228 letter-spacing: 0.05em;
2229}
2230
2231.welcome-card-content p {
2232 margin: 0;
2233 font-size: 0.875rem;
2234 color: var(--color-text-muted);
2235 line-height: 1.5;
2236}
2237
2238.welcome-action-card:hover .welcome-card-content p {
2239 color: var(--color-background);
2240}
2241
2242.welcome-footer {
2243 text-align: center;
2244 padding-top: var(--spacing-lg);
2245 border-top: var(--border-width) var(--border-style, solid) var(--color-border);
2246}
2247
2248.welcome-loading,
2249.welcome-message {
2250 text-align: center;
2251 padding: var(--spacing-xl);
2252 min-height: 200px;
2253 display: flex;
2254 flex-direction: column;
2255 align-items: center;
2256 justify-content: center;
2257 gap: var(--spacing-lg);
2258}
2259
2260.spinner,
2261.loading-spinner {
2262 width: 40px;
2263 height: 40px;
2264 border: var(--border-width-thick) var(--border-style, solid) var(--color-border);
2265 border-top-color: var(--color-text);
2266 border-radius: 50%;
2267 animation: spin 0.8s linear infinite;
2268}
2269
2270@keyframes spin {
2271 to {
2272 transform: rotate(360deg);
2273 }
2274}
2275
2276@keyframes fadeIn {
2277 from {
2278 opacity: 0;
2279 }
2280
2281 to {
2282 opacity: 1;
2283 }
2284}
2285
2286/* Share Modal Styles */
2287.share-modal .share-modal-body {
2288 min-height: 200px;
2289}
2290
2291.share-modal .share-preview-loading {
2292 display: flex;
2293 flex-direction: column;
2294 align-items: center;
2295 justify-content: center;
2296 gap: var(--spacing-md);
2297 padding: var(--spacing-xl);
2298 text-align: center;
2299}
2300
2301.share-modal .share-preview-loading p {
2302 margin: 0;
2303 color: var(--color-text-muted);
2304 font-weight: 600;
2305 text-transform: uppercase;
2306 letter-spacing: 0.05em;
2307 font-size: 0.875rem;
2308}
2309
2310.share-modal .share-preview img {
2311 display: block;
2312 max-width: 100%;
2313 border: 2px solid var(--color-border);
2314 border-radius: var(--radius-md);
2315 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2316}
2317
2318.share-modal .share-preview-hint {
2319 margin-top: var(--spacing-md);
2320 color: var(--color-text-muted);
2321 font-size: 0.9em;
2322}
2323
2324.share-modal .share-post-text {
2325 margin-top: var(--spacing-lg);
2326}
2327
2328.share-modal .share-post-text label {
2329 display: block;
2330 font-weight: 600;
2331 margin-bottom: var(--spacing-xs);
2332 font-size: 0.875rem;
2333}
2334
2335.share-modal .share-post-text-controls {
2336 display: flex;
2337 flex-direction: column;
2338 gap: var(--spacing-xs);
2339}
2340
2341.share-modal .share-post-text-input {
2342 width: 100%;
2343 resize: vertical;
2344 min-height: 4em;
2345}
2346
2347.share-modal .share-post-text-meta {
2348 display: flex;
2349 align-items: center;
2350 justify-content: end;
2351 gap: var(--spacing-sm);
2352 font-size: 0.8rem;
2353 color: var(--color-text-muted);
2354 padding-right: var(--spacing-sm);
2355}
2356
2357.share-modal .share-post-text-count.over-limit {
2358 color: var(--error-color);
2359 font-weight: 600;
2360}
2361
2362.share-modal .share-post-text-reset {
2363 margin-left: auto;
2364 padding: 0 var(--spacing-xs);
2365 font-size: 0.75rem;
2366 background: none;
2367 border: none;
2368 color: var(--color-link);
2369 cursor: pointer;
2370 text-decoration: underline;
2371}
2372
2373.share-modal .share-post-text-reset:hover {
2374 color: var(--color-link-hover);
2375}
2376
2377/* Share modal mobile padding */
2378@media (max-width: 479px) {
2379
2380 .share-modal .share-preview,
2381 .share-modal .share-preview-hint,
2382 .share-modal .share-post-text {
2383 padding-left: var(--spacing-md);
2384 padding-right: var(--spacing-md);
2385 }
2386}
2387
2388.share-modal .share-error,
2389.share-modal .share-success {
2390 padding: var(--spacing-lg);
2391}
2392
2393.welcome-selector {
2394 max-width: 600px;
2395 margin: 0 auto;
2396}
2397
2398.welcome-selector h2 {
2399 margin-bottom: var(--spacing-sm);
2400}
2401
2402.welcome-selector p {
2403 color: var(--color-text-muted);
2404 margin-bottom: var(--spacing-lg);
2405}
2406
2407.collection-list,
2408.record-list,
2409.post-list,
2410.template-list {
2411 display: flex;
2412 flex-direction: column;
2413 gap: var(--spacing-sm);
2414 margin-bottom: var(--spacing-lg);
2415 max-height: 400px;
2416 overflow-y: auto;
2417 overflow-x: hidden;
2418 padding: var(--spacing-md);
2419}
2420
2421.collection-item,
2422.record-item,
2423.post-item {
2424 display: flex;
2425 gap: var(--spacing-md);
2426 padding: var(--spacing-md);
2427 background: var(--color-surface);
2428 border: var(--border-width) var(--border-style, solid) var(--color-border);
2429 cursor: pointer;
2430 transition: all var(--transition);
2431 font-family: inherit;
2432 font-size: inherit;
2433 text-align: left;
2434 min-width: 0;
2435 max-width: 100%;
2436}
2437
2438.collection-item,
2439.record-item {
2440 align-items: center;
2441}
2442
2443.post-item {
2444 align-items: flex-start;
2445}
2446
2447.collection-item:hover,
2448.record-item:hover,
2449.post-item:hover {
2450 background: var(--color-text);
2451 color: var(--color-background);
2452 border-color: var(--color-border-dark);
2453}
2454
2455.collection-name,
2456.record-title {
2457 flex: 1;
2458 font-weight: 600;
2459 word-break: break-word;
2460}
2461
2462.collection-arrow {
2463 font-size: 1.25rem;
2464 opacity: 0.5;
2465}
2466
2467.collection-item:hover .collection-arrow {
2468 opacity: 1;
2469}
2470
2471.record-item input[type="checkbox"],
2472.post-item input[type="checkbox"] {
2473 width: 20px;
2474 height: 20px;
2475 cursor: pointer;
2476 accent-color: var(--color-text);
2477}
2478
2479.post-content {
2480 flex: 1;
2481 display: flex;
2482 flex-direction: column;
2483 gap: var(--spacing-xs);
2484 min-width: 0;
2485}
2486
2487.post-text {
2488 margin: 0;
2489 line-height: 1.5;
2490 display: -webkit-box;
2491 -webkit-line-clamp: 3;
2492 -webkit-box-orient: vertical;
2493 overflow: hidden;
2494}
2495
2496.post-date {
2497 font-size: 0.75rem;
2498 color: var(--color-text-muted);
2499 text-transform: uppercase;
2500 letter-spacing: 0.05em;
2501}
2502
2503.post-item:hover .post-date {
2504 color: var(--color-background);
2505}
2506
2507.template-card {
2508 padding: var(--spacing-lg);
2509 background: var(--color-surface);
2510 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2511 cursor: pointer;
2512 transition: all var(--transition);
2513 text-align: left;
2514 font-family: inherit;
2515 font-size: inherit;
2516}
2517
2518.template-card:hover {
2519 background: var(--color-text);
2520 color: var(--color-background);
2521 border-width: var(--border-width-thick);
2522}
2523
2524.template-card h3 {
2525 margin: 0 0 var(--spacing-xs);
2526 font-size: var(--font-size-base);
2527 letter-spacing: 0.05em;
2528}
2529
2530.template-card p {
2531 margin: 0;
2532 font-size: 0.875rem;
2533 color: var(--color-text-muted);
2534}
2535
2536.template-card:hover p {
2537 color: var(--color-background);
2538}
2539
2540.selector-actions {
2541 display: flex;
2542 gap: var(--spacing-md);
2543 justify-content: flex-end;
2544}
2545
2546.bsky-user-search {
2547 display: flex;
2548 gap: var(--spacing-sm);
2549 align-items: stretch;
2550 margin-bottom: var(--spacing-md);
2551}
2552
2553.bsky-user-search .input {
2554 flex: 1;
2555 min-width: 0;
2556}
2557
2558.bsky-user-search .button {
2559 white-space: nowrap;
2560}
2561
2562/* Post selector mobile: add side padding to elements that lose it when modal-content padding is 0 */
2563@media (max-width: 479px) {
2564 .modal-content .welcome-selector p {
2565 padding-left: var(--spacing-md);
2566 padding-right: var(--spacing-md);
2567 }
2568
2569 .modal-content .bsky-user-search {
2570 flex-direction: column;
2571 align-items: stretch;
2572 padding: 0 var(--spacing-md);
2573 }
2574
2575 .modal-content .bsky-user-search .button {
2576 width: 100%;
2577 min-height: 44px;
2578 justify-content: center;
2579 }
2580
2581 .modal-content .selector-actions {
2582 padding: 0 var(--spacing-md) var(--spacing-lg);
2583 }
2584
2585 .modal-content .selector-actions .button {
2586 width: 100%;
2587 min-height: 44px;
2588 justify-content: center;
2589 }
2590}
2591
2592/* ============================================
2593 Layout Styles
2594 ============================================ */
2595
2596/* Card Layout */
2597.layout-card {
2598 display: flex;
2599 flex-direction: column;
2600 background: var(--color-surface);
2601 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2602 transition: all var(--transition);
2603 overflow: hidden;
2604}
2605
2606.layout-card:hover {
2607 border-width: var(--border-width-thick);
2608}
2609
2610.card-image {
2611 width: 100%;
2612 height: auto;
2613 display: block;
2614 border-bottom: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2615}
2616
2617.card-body {
2618 padding: var(--spacing-lg);
2619 display: flex;
2620 flex-direction: column;
2621 gap: var(--spacing-sm);
2622 flex: 1;
2623}
2624
2625.card-title {
2626 margin: 0;
2627 font-size: var(--font-size-base);
2628 font-weight: 700;
2629 color: var(--color-text);
2630 letter-spacing: -0.02em;
2631}
2632
2633.card-content {
2634 margin: 0;
2635 color: var(--color-text);
2636 line-height: 1.6;
2637 flex: 1;
2638}
2639
2640.card-date {
2641 font-size: 0.75rem;
2642 color: var(--color-text-muted);
2643 text-transform: uppercase;
2644 letter-spacing: 0.05em;
2645}
2646
2647/* Card Layout Mobile Responsive (< 480px) */
2648@media (max-width: 479px) {
2649 .layout-card {
2650 padding: var(--spacing-sm);
2651 }
2652
2653 .card-body {
2654 padding: var(--spacing-md);
2655 }
2656
2657 .card-title {
2658 font-size: var(--font-size-sm);
2659 }
2660
2661 .card-content {
2662 font-size: 0.9rem;
2663 }
2664}
2665
2666.layout-profile {
2667 display: flex;
2668 flex-direction: column;
2669 gap: 0;
2670}
2671
2672.profile-banner {
2673 width: 100%;
2674 height: 150px;
2675 overflow: hidden;
2676 border-radius: var(--radius-md) var(--radius-md) 0 0;
2677 background: var(--color-background-alt, var(--color-border));
2678}
2679
2680.profile-banner-image {
2681 width: 100%;
2682 height: 100%;
2683 object-fit: cover;
2684}
2685
2686.profile-body {
2687 display: flex;
2688 gap: var(--spacing-lg);
2689 align-items: flex-start;
2690 padding: var(--spacing-md);
2691}
2692
2693/* Pull avatar up to overlap banner when banner exists */
2694.profile-banner+.profile-body {
2695 margin-top: -40px;
2696}
2697
2698.profile-banner+.profile-body .profile-avatar {
2699 border: 3px solid var(--color-background);
2700 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2701}
2702
2703.profile-avatar {
2704 width: 80px;
2705 height: 80px;
2706 border-radius: 50%;
2707 object-fit: cover;
2708 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2709 flex-shrink: 0;
2710 background: var(--color-background);
2711}
2712
2713.profile-info {
2714 flex: 1;
2715 padding-top: var(--spacing-sm);
2716}
2717
2718/* When avatar overlaps banner, add padding to info to align text */
2719.profile-banner+.profile-body .profile-info {
2720 padding-top: calc(40px + var(--spacing-sm));
2721}
2722
2723.profile-name {
2724 margin: 0 0 var(--spacing-sm);
2725}
2726
2727.profile-bio {
2728 margin: 0;
2729 color: var(--color-text-muted);
2730 line-height: 1.6;
2731 white-space: pre-wrap;
2732}
2733
2734/* Profile Layout Mobile Responsive (< 480px) */
2735@media (max-width: 479px) {
2736 .layout-profile {
2737 padding: var(--spacing-sm);
2738 }
2739
2740 .profile-banner {
2741 height: 120px;
2742 }
2743
2744 .profile-avatar {
2745 width: 60px;
2746 height: 60px;
2747 }
2748
2749 .profile-body {
2750 gap: var(--spacing-md);
2751 padding: var(--spacing-sm);
2752 }
2753
2754 /* Adjust overlap when banner exists */
2755 .profile-banner+.profile-body {
2756 margin-top: -30px;
2757 }
2758
2759 .profile-banner+.profile-body .profile-info {
2760 padding-top: calc(30px + var(--spacing-xs));
2761 }
2762
2763 .profile-name {
2764 font-size: var(--font-size-lg);
2765 }
2766
2767 .profile-bio {
2768 font-size: 0.9rem;
2769 }
2770}
2771
2772/* Post Layout */
2773.layout-post {
2774 padding: var(--spacing-lg);
2775 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2776 background: var(--color-background);
2777 max-width: 800px;
2778 margin: 0 auto;
2779}
2780
2781.post-title {
2782 margin: 0 0 var(--spacing-md);
2783 font-size: var(--font-size-xl);
2784 font-weight: 700;
2785 line-height: 1.3;
2786}
2787
2788.post-meta {
2789 display: flex;
2790 align-items: center;
2791 gap: var(--spacing-md);
2792 margin-bottom: var(--spacing-md);
2793 font-size: 0.875rem;
2794 color: var(--color-text-muted);
2795}
2796
2797.post-avatar {
2798 width: 20px;
2799 height: 20px;
2800 border-radius: 50%;
2801 flex-shrink: 0;
2802 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2803}
2804
2805.post-meta time {
2806 color: var(--color-text-muted);
2807}
2808
2809.post-tags {
2810 display: flex;
2811 flex-wrap: wrap;
2812 gap: var(--spacing-xs);
2813}
2814
2815.tag {
2816 padding: 0.25rem 0.5rem;
2817 background: var(--color-background);
2818 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2819 color: var(--color-text);
2820 font-size: 0.75rem;
2821 text-transform: uppercase;
2822 letter-spacing: 0.05em;
2823}
2824
2825.post-image {
2826 width: 100%;
2827 height: auto;
2828 margin: var(--spacing-md) 0;
2829 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2830}
2831
2832/* Multi-image grid layouts for posts */
2833.post-images {
2834 display: grid;
2835 gap: var(--spacing-sm);
2836 margin: var(--spacing-md) 0;
2837}
2838
2839.post-images-single {
2840 grid-template-columns: 1fr;
2841}
2842
2843.post-images-two {
2844 grid-template-columns: repeat(2, 1fr);
2845}
2846
2847.post-images-three {
2848 grid-template-columns: repeat(3, 1fr);
2849}
2850
2851.post-images-grid {
2852 grid-template-columns: repeat(2, 1fr);
2853}
2854
2855.post-images .post-image {
2856 width: 100%;
2857 height: auto;
2858 margin: 0;
2859 object-fit: cover;
2860 aspect-ratio: 1;
2861}
2862
2863.post-images-single .post-image {
2864 aspect-ratio: auto;
2865 max-height: 500px;
2866 object-fit: contain;
2867}
2868
2869@media (max-width: 640px) {
2870 .post-images-three {
2871 grid-template-columns: repeat(2, 1fr);
2872 }
2873
2874 .post-images-three .post-image:last-child:nth-child(odd) {
2875 grid-column: span 2;
2876 }
2877}
2878
2879/* Post Layout Mobile Responsive (< 480px) */
2880@media (max-width: 479px) {
2881 .layout-post {
2882 padding: var(--spacing-sm);
2883 }
2884
2885 .post-title {
2886 font-size: var(--font-size-lg);
2887 }
2888
2889 .post-images-two {
2890 grid-template-columns: 1fr;
2891 }
2892
2893 .post-meta {
2894 flex-wrap: wrap;
2895 gap: var(--spacing-xs);
2896 }
2897
2898 .post-tags {
2899 width: 100%;
2900 margin-top: var(--spacing-xs);
2901 }
2902}
2903
2904.layout-post .post-content {
2905 margin: var(--spacing-md) 0 0;
2906 line-height: 1.7;
2907}
2908
2909.layout-post .post-content p {
2910 margin: 0 0 var(--spacing-md);
2911}
2912
2913.layout-post .post-content p:last-child {
2914 margin-bottom: 0;
2915}
2916
2917/* ============================================
2918 Line Length Control (Phase 7)
2919 ============================================ */
2920
2921/* Limit line length for optimal readability */
2922.layout-post .post-content,
2923.layout-card .card-content,
2924.modal-body p {
2925 max-width: 65ch;
2926}
2927
2928/* Remove max-width constraint on small screens where space is limited */
2929@media (max-width: 479px) {
2930
2931 .layout-post .post-content,
2932 .layout-card .card-content {
2933 max-width: none;
2934 }
2935}
2936
2937.card-date-link,
2938.post-date-link {
2939 text-decoration: none;
2940 color: inherit;
2941 transition: opacity var(--transition);
2942}
2943
2944.card-date-link:hover,
2945.post-date-link:hover {
2946 opacity: 0.7;
2947 text-decoration: underline;
2948}
2949
2950.card-date-link time,
2951.post-date-link time {
2952 display: inline;
2953}
2954
2955.post-link-back {
2956 display: block;
2957 font-size: 0.75rem;
2958 color: var(--color-text-muted);
2959 text-decoration: none;
2960 margin-top: var(--spacing-md);
2961 transition: opacity var(--transition);
2962}
2963
2964.post-link-back:hover {
2965 opacity: 0.7;
2966 text-decoration: underline;
2967}
2968
2969/* Image Layout */
2970.layout-image {
2971 display: flex;
2972 flex-direction: column;
2973 gap: var(--spacing-md);
2974}
2975
2976.image-main {
2977 width: 100%;
2978 height: auto;
2979 display: block;
2980 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
2981}
2982
2983/* Image Gallery - Mobile-first responsive grid */
2984.image-gallery {
2985 display: grid;
2986 gap: var(--spacing-sm);
2987 grid-template-columns: repeat(2, 1fr);
2988 /* Base: 2 columns on mobile */
2989}
2990
2991@media (min-width: 480px) {
2992 .image-gallery {
2993 grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
2994 }
2995}
2996
2997@media (min-width: 768px) {
2998 .image-gallery {
2999 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
3000 gap: var(--spacing-md);
3001 }
3002}
3003
3004.image-gallery img {
3005 width: 100%;
3006 height: auto;
3007 display: block;
3008 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3009}
3010
3011.image-caption {
3012 color: var(--color-text);
3013 font-size: 0.875rem;
3014 text-align: center;
3015 padding: var(--spacing-sm);
3016}
3017
3018/* Link Layout */
3019.layout-link {
3020 display: flex;
3021 gap: var(--spacing-md);
3022 padding: var(--spacing-md);
3023 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3024 background: var(--color-surface);
3025 text-decoration: none;
3026 color: var(--color-text);
3027 transition: all var(--transition);
3028}
3029
3030.layout-link:hover {
3031 border-width: var(--border-width-thick);
3032 background: var(--color-background);
3033}
3034
3035.link-image {
3036 width: 120px;
3037 height: 120px;
3038 object-fit: cover;
3039 flex-shrink: 0;
3040 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3041}
3042
3043.link-body {
3044 flex: 1;
3045 display: flex;
3046 flex-direction: column;
3047 gap: var(--spacing-xs);
3048}
3049
3050.link-title {
3051 font-weight: 600;
3052 color: var(--color-text);
3053}
3054
3055.link-description {
3056 font-size: 0.875rem;
3057 color: var(--color-text-muted);
3058}
3059
3060.link-url {
3061 font-size: 0.75rem;
3062 color: var(--color-text-muted);
3063 font-family: var(--font-mono);
3064}
3065
3066/* Link Layout Mobile Responsive (< 480px) */
3067@media (max-width: 479px) {
3068 .layout-link {
3069 flex-direction: column;
3070 }
3071
3072 .link-image {
3073 width: 100%;
3074 max-width: none;
3075 height: auto;
3076 aspect-ratio: 16/9;
3077 }
3078
3079 .link-body {
3080 padding: var(--spacing-sm);
3081 }
3082
3083 .link-title {
3084 font-size: 1rem;
3085 }
3086
3087 .link-description {
3088 font-size: 0.85rem;
3089 }
3090}
3091
3092/* Links Layout */
3093.layout-links {
3094 display: flex;
3095 flex-direction: column;
3096 gap: var(--spacing-sm);
3097}
3098
3099.links-item {
3100 display: flex;
3101 align-items: center;
3102 gap: var(--spacing-sm);
3103 padding: var(--spacing-md);
3104 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3105 background: var(--color-surface);
3106 text-decoration: none;
3107 color: var(--color-text);
3108 transition: all var(--transition);
3109}
3110
3111.links-item:hover {
3112 background: var(--color-text);
3113 color: var(--color-background);
3114 border-width: var(--border-width-thick);
3115}
3116
3117.links-icon {
3118 font-size: 1.25rem;
3119}
3120
3121.links-title {
3122 flex: 1;
3123 font-weight: 600;
3124}
3125
3126/* Smoke Signal Events Layout */
3127.layout-smoke-signal {
3128 display: flex;
3129 flex-direction: column;
3130 gap: var(--spacing-lg);
3131}
3132
3133.smoke-signal-event {
3134 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3135 background: var(--color-surface);
3136 padding: var(--spacing-lg);
3137 position: relative;
3138 transition: all var(--transition);
3139}
3140
3141.smoke-signal-event:hover {
3142 border-width: var(--border-width-thick);
3143 box-shadow: var(--shadow-elevated);
3144}
3145
3146.event-type-badge {
3147 display: inline-block;
3148 padding: 0.25rem 0.75rem;
3149 font-size: 0.75rem;
3150 font-weight: 700;
3151 text-transform: uppercase;
3152 letter-spacing: 0.05em;
3153 margin-bottom: var(--spacing-md);
3154 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3155}
3156
3157.event-hosting .event-type-badge {
3158 background: var(--color-primary, #000);
3159 color: var(--color-background, #fff);
3160}
3161
3162.event-attending .event-type-badge {
3163 background: var(--color-surface, #f8f9fa);
3164 color: var(--color-text, #000);
3165}
3166
3167.event-image {
3168 margin-bottom: var(--spacing-md);
3169}
3170
3171.event-image img {
3172 width: 100%;
3173 height: auto;
3174 max-height: 300px;
3175 object-fit: cover;
3176 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3177}
3178
3179.event-content {
3180 display: flex;
3181 flex-direction: column;
3182 gap: var(--spacing-sm);
3183}
3184
3185.event-title {
3186 font-size: var(--font-size-lg);
3187 font-weight: 700;
3188 margin: 0;
3189 letter-spacing: -0.02em;
3190}
3191
3192.event-title a {
3193 color: inherit;
3194 text-decoration: none;
3195}
3196
3197.event-title a:hover {
3198 text-decoration: underline;
3199}
3200
3201.event-date {
3202 font-size: 0.875rem;
3203 color: var(--color-text-muted, #6b7280);
3204 font-family: var(--font-mono);
3205}
3206
3207.event-date-relative {
3208 color: var(--color-text-muted, #999);
3209 font-weight: 400;
3210}
3211
3212.event-location {
3213 font-size: 0.875rem;
3214 color: var(--color-text);
3215 margin-top: var(--spacing-xs);
3216}
3217
3218.event-description {
3219 font-size: 1rem;
3220 line-height: 1.6;
3221 color: var(--color-text);
3222 margin-top: var(--spacing-sm);
3223 white-space: pre-wrap;
3224}
3225
3226/* Standard.site Long-Form Publishing Layout */
3227.layout-leaflet {
3228 display: flex;
3229 flex-direction: column;
3230 gap: var(--spacing-xl);
3231}
3232
3233.leaflet-article {
3234 width: 100%;
3235 max-width: 100%;
3236 padding: var(--spacing-lg);
3237}
3238
3239.leaflet-badge {
3240 display: inline-block;
3241 padding: 0.25rem 0.75rem;
3242 font-size: 0.75rem;
3243 font-weight: 700;
3244 text-transform: uppercase;
3245 letter-spacing: 0.05em;
3246 margin-bottom: var(--spacing-md);
3247 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3248 background: var(--color-primary, #000);
3249 color: var(--color-background, #fff);
3250}
3251
3252.leaflet-header {
3253 margin-bottom: var(--spacing-lg);
3254 border-bottom: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3255 padding-bottom: var(--spacing-md);
3256}
3257
3258.leaflet-title {
3259 font-size: var(--font-size-xl);
3260 font-weight: 700;
3261 margin: 0 0 var(--spacing-md);
3262 line-height: 1.2;
3263 letter-spacing: -0.02em;
3264}
3265
3266.leaflet-title a {
3267 color: inherit;
3268 text-decoration: none;
3269}
3270
3271.leaflet-title a:hover {
3272 text-decoration: underline;
3273}
3274
3275.leaflet-meta {
3276 display: flex;
3277 flex-wrap: wrap;
3278 gap: var(--spacing-md);
3279 align-items: center;
3280 margin-top: var(--spacing-sm);
3281}
3282
3283.leaflet-date {
3284 font-size: 0.875rem;
3285 color: var(--color-text-muted);
3286 font-family: var(--font-mono);
3287}
3288
3289.leaflet-tags {
3290 display: flex;
3291 flex-wrap: wrap;
3292 gap: var(--spacing-xs);
3293}
3294
3295.leaflet-tag {
3296 font-size: 0.75rem;
3297 padding: 0.25rem 0.5rem;
3298 background: var(--color-background);
3299 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3300 border-radius: 0.25rem;
3301 color: var(--color-text-muted);
3302}
3303
3304.leaflet-image {
3305 margin: var(--spacing-xl) 0;
3306}
3307
3308.leaflet-image img {
3309 width: 100%;
3310 height: auto;
3311 max-height: 600px;
3312 object-fit: cover;
3313 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3314}
3315
3316.leaflet-subheader {
3317 font-size: 1.125rem;
3318 font-weight: 500;
3319 line-height: 1.5;
3320 color: var(--color-text-muted);
3321 margin: var(--spacing-md) 0 0;
3322}
3323
3324.leaflet-content {
3325 font-size: 1.125rem;
3326 line-height: 1.8;
3327 margin-top: var(--spacing-lg);
3328 color: var(--color-text);
3329}
3330
3331.leaflet-content p {
3332 margin-bottom: var(--spacing-md);
3333}
3334
3335.leaflet-content h2,
3336.leaflet-content h3,
3337.leaflet-content h4 {
3338 margin-top: var(--spacing-lg);
3339 margin-bottom: var(--spacing-md);
3340 font-weight: 700;
3341 line-height: 1.3;
3342}
3343
3344.leaflet-content h2 {
3345 font-size: var(--font-size-xl);
3346}
3347
3348.leaflet-content h3 {
3349 font-size: var(--font-size-lg);
3350}
3351
3352.leaflet-content h4 {
3353 font-size: var(--font-size-base);
3354}
3355
3356.leaflet-content ul,
3357.leaflet-content ol {
3358 margin: var(--spacing-md) 0;
3359 padding-left: var(--spacing-lg);
3360}
3361
3362.leaflet-content li {
3363 margin-bottom: var(--spacing-xs);
3364}
3365
3366.leaflet-content blockquote {
3367 margin: var(--spacing-lg) 0;
3368 padding: var(--spacing-md);
3369 border-left: 4px solid var(--color-border-dark);
3370 background: var(--color-background);
3371 font-style: italic;
3372}
3373
3374.leaflet-content code {
3375 font-family: var(--font-mono);
3376 font-size: 0.9em;
3377 padding: 0.125rem 0.25rem;
3378 background: var(--color-background);
3379 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3380}
3381
3382.leaflet-content pre {
3383 margin: var(--spacing-md) 0;
3384 padding: var(--spacing-md);
3385 background: var(--color-background);
3386 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3387 overflow-x: auto;
3388}
3389
3390.leaflet-content pre code {
3391 display: block;
3392 padding: 0;
3393 background: none;
3394 border: none;
3395}
3396
3397.leaflet-content a {
3398 color: var(--color-primary);
3399 text-decoration: underline;
3400 text-decoration-thickness: 1px;
3401}
3402
3403.leaflet-content a:hover {
3404 text-decoration-thickness: 2px;
3405}
3406
3407.leaflet-link-back {
3408 margin-top: var(--spacing-xl);
3409 padding-top: var(--spacing-md);
3410 border-top: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3411 text-align: center;
3412}
3413
3414.leaflet-link-back a {
3415 color: var(--color-text-muted);
3416 text-decoration: none;
3417 font-size: 0.875rem;
3418 font-family: var(--font-mono);
3419}
3420
3421.leaflet-link-back a:hover {
3422 color: var(--color-text);
3423 text-decoration: underline;
3424}
3425
3426.event-description {
3427 font-size: 1rem;
3428 line-height: 1.6;
3429 color: var(--color-text);
3430 margin-top: var(--spacing-sm);
3431 white-space: pre-wrap;
3432}
3433
3434/* List Layout */
3435.layout-list {
3436 list-style: none;
3437 padding: 0;
3438 margin: 0;
3439 display: flex;
3440 flex-direction: column;
3441 gap: var(--spacing-sm);
3442}
3443
3444.list-item {
3445 padding: var(--spacing-md);
3446 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3447 background: var(--color-surface);
3448 color: var(--color-text);
3449}
3450
3451/* ============================================
3452 Responsive
3453 ============================================ */
3454
3455@media (max-width: 640px) {
3456 .main {
3457 padding: var(--spacing-sm) var(--spacing-md);
3458 }
3459
3460 .garden-preview {
3461 padding: var(--spacing-md) var(--spacing-lg);
3462 }
3463
3464 /* .record-grid now uses mobile-first approach - see Grid Systems section */
3465
3466 .section-types {
3467 grid-template-columns: 1fr;
3468 }
3469}
3470
3471/* ============================================
3472 Garden Config Editor
3473 ============================================ */
3474
3475.site-config {
3476 border: var(--border-width-thick) var(--border-style, solid) var(--color-border-dark);
3477 margin: var(--spacing-lg);
3478 background: var(--color-surface);
3479}
3480
3481.config-modal-content .site-config {
3482 border: none;
3483 margin: 0;
3484 background: transparent;
3485}
3486
3487.config-modal-content .site-config-header {
3488 display: none;
3489}
3490
3491.site-config-header {
3492 padding: var(--spacing-md) var(--spacing-lg);
3493 border-bottom: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3494 background: var(--color-background);
3495}
3496
3497.site-config-header h3 {
3498 margin: 0;
3499 font-size: var(--font-size-sm);
3500 letter-spacing: 0.05em;
3501}
3502
3503.site-config-content {
3504 display: flex;
3505 flex-direction: column;
3506 gap: var(--spacing-lg);
3507 background: var(--color-background);
3508}
3509
3510.site-config-section {
3511 display: flex;
3512 flex-direction: column;
3513 gap: var(--spacing-sm);
3514}
3515
3516.label {
3517 display: block;
3518 font-weight: 600;
3519 text-transform: uppercase;
3520 font-size: 0.75rem;
3521 letter-spacing: 0.05em;
3522 color: var(--color-text);
3523}
3524
3525.label-small {
3526 display: block;
3527 font-weight: 500;
3528 font-size: 0.75rem;
3529 color: var(--color-text-muted);
3530 margin-bottom: var(--spacing-xs);
3531}
3532
3533.theme-colors {
3534 display: grid;
3535 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
3536 gap: var(--spacing-md);
3537}
3538
3539.theme-color-group {
3540 display: flex;
3541 flex-direction: column;
3542 gap: var(--spacing-xs);
3543}
3544
3545.color-input {
3546 width: 100%;
3547 height: 40px;
3548 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3549 background: var(--color-background);
3550 cursor: pointer;
3551 padding: 0;
3552}
3553
3554.color-input::-webkit-color-swatch-wrapper {
3555 padding: 0;
3556}
3557
3558.color-input::-webkit-color-swatch {
3559 border: none;
3560 border-radius: 0;
3561}
3562
3563.input-small {
3564 font-size: 0.875rem;
3565 padding: var(--spacing-sm);
3566}
3567
3568.textarea {
3569 resize: vertical;
3570 min-height: 120px;
3571 font-family: var(--font-mono);
3572 font-size: 0.875rem;
3573}
3574
3575/* ============================================
3576 Notifications - Mobile-first
3577 ============================================ */
3578
3579.notification {
3580 position: fixed;
3581 /* Mobile: full-width with spacing (no save bar by default) */
3582 bottom: calc(var(--spacing-md) + var(--safe-area-inset-bottom));
3583 right: calc(var(--spacing-md) + var(--safe-area-inset-right));
3584 left: calc(var(--spacing-md) + var(--safe-area-inset-left));
3585 z-index: 3000;
3586 background: var(--color-background);
3587 border: var(--border-width-thick) var(--border-style, solid) var(--color-border-dark);
3588 box-shadow: var(--shadow-elevated);
3589 transition: opacity var(--transition);
3590}
3591
3592/* When save bar is present, push notification up so it sits above the bar */
3593body:has(.save-bar) .notification {
3594 bottom: calc(var(--spacing-md) + 80px + var(--safe-area-inset-bottom));
3595}
3596@media (min-width: 480px) {
3597 body:has(.save-bar) .notification {
3598 bottom: calc(var(--spacing-lg) + 80px);
3599 }
3600}
3601
3602/* Desktop: constrained width, right-aligned */
3603@media (min-width: 480px) {
3604 .notification {
3605 left: auto;
3606 right: var(--spacing-lg);
3607 bottom: var(--spacing-lg);
3608 max-width: 400px;
3609 }
3610}
3611
3612.notification-content {
3613 display: flex;
3614 align-items: center;
3615 justify-content: space-between;
3616 padding: var(--spacing-md) var(--spacing-lg);
3617 gap: var(--spacing-md);
3618}
3619
3620.notification-message {
3621 font-weight: 600;
3622 font-size: 0.875rem;
3623 text-transform: uppercase;
3624 letter-spacing: 0.05em;
3625 flex: 1;
3626}
3627
3628.notification-close {
3629 background: transparent;
3630 border: none;
3631 font-size: 1.5rem;
3632 line-height: 1;
3633 cursor: pointer;
3634 color: var(--color-text);
3635 padding: 0;
3636 width: 24px;
3637 height: 24px;
3638 display: flex;
3639 align-items: center;
3640 justify-content: center;
3641 transition: all var(--transition);
3642}
3643
3644.notification-close:hover {
3645 background: var(--color-text);
3646 color: var(--color-background);
3647}
3648
3649.notification-success {
3650 border-color: var(--color-border-dark);
3651}
3652
3653.notification-error {
3654 border-color: #dc2626;
3655 background: #fef2f2;
3656}
3657
3658.notification-error .notification-message {
3659 color: #dc2626;
3660}
3661
3662.notification-error .notification-close {
3663 color: #dc2626;
3664}
3665
3666.notification-error .notification-close:hover {
3667 background: #dc2626;
3668 color: #fef2f2;
3669}
3670
3671@media (max-width: 640px) {
3672 .site-config {
3673 margin: var(--spacing-md);
3674 }
3675
3676 .theme-colors {
3677 grid-template-columns: 1fr;
3678 }
3679
3680 /* Notification mobile styles now handled in mobile-first section above */
3681}
3682
3683/* ============================================
3684 Generative Art & DID Visualization
3685 ============================================ */
3686
3687.generative-art-explanation {
3688 background: var(--color-surface);
3689 border: var(--border-width) var(--border-style, solid) var(--color-border);
3690 padding: var(--spacing-lg);
3691 margin-bottom: var(--spacing-lg);
3692 line-height: 1.6;
3693}
3694
3695.generative-art-explanation p {
3696 margin: 0 0 var(--spacing-md);
3697}
3698
3699.generative-art-explanation p:last-child {
3700 margin-bottom: 0;
3701}
3702
3703.did-visualization-row {
3704 display: flex;
3705 align-items: center;
3706 justify-content: center;
3707 gap: var(--spacing-sm);
3708 flex-wrap: wrap;
3709}
3710
3711.theme-details-help-tooltip {
3712 display: inline-flex;
3713}
3714
3715.favicon-note,
3716.edit-note {
3717 font-size: 0.875rem;
3718 color: var(--color-text-muted);
3719 text-align: center;
3720 margin: var(--spacing-sm) 0;
3721 font-style: italic;
3722}
3723
3724.did-info-button {
3725 width: 24px;
3726 height: 24px;
3727 border-radius: 50%;
3728 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3729 background: var(--color-background);
3730 color: var(--color-text);
3731 cursor: pointer;
3732 font-size: 0.875rem;
3733 font-weight: 700;
3734 display: flex;
3735 align-items: center;
3736 justify-content: center;
3737 padding: 0;
3738 transition: all var(--transition);
3739 font-family: var(--font-body);
3740 line-height: 1;
3741}
3742
3743.did-info-button:hover {
3744 background: var(--color-text);
3745 color: var(--color-background);
3746 border-width: var(--border-width-thick);
3747}
3748
3749.did-info-tooltip {
3750 position: absolute;
3751 top: calc(100% + var(--spacing-sm));
3752 left: 50%;
3753 transform: translateX(-50%);
3754 background: var(--color-background);
3755 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
3756 padding: var(--spacing-md);
3757 max-width: 280px;
3758 font-size: 0.875rem;
3759 line-height: 1.5;
3760 color: var(--color-text);
3761 z-index: 1000;
3762 display: none;
3763 box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
3764 white-space: normal;
3765}
3766
3767.did-info-tooltip::before {
3768 content: '';
3769 position: absolute;
3770 bottom: 100%;
3771 left: 50%;
3772 transform: translateX(-50%);
3773 border: var(--border-width) var(--border-style, solid) transparent;
3774 border-bottom-color: var(--color-border-dark);
3775 border-width: 8px;
3776 margin-left: -8px;
3777}
3778
3779/* Flower Bed (full bordered container using owner's unique style) */
3780.flower-bed {
3781 position: relative;
3782 padding: var(--spacing-lg);
3783 margin-top: var(--spacing-md);
3784 background: var(--flower-bed-background, var(--color-surface));
3785 border: var(--flower-bed-border-width, var(--border-width-thick)) var(--flower-bed-border-style, var(--border-style, solid)) var(--flower-bed-border-color, var(--color-border-dark));
3786 box-shadow: var(--shadow-elevated);
3787 overflow: hidden;
3788 /* Prevent horizontal scrolling, ensure grid wraps */
3789}
3790
3791/* Inner decorative border using owner's accent/primary color */
3792.flower-bed::before {
3793 content: '';
3794 position: absolute;
3795 inset: calc(var(--flower-bed-border-width, var(--border-width-thick)) + var(--spacing-sm));
3796 border: var(--border-width) var(--flower-bed-border-style, var(--border-style, solid)) var(--flower-bed-inset-color, var(--color-accent, var(--color-primary, var(--color-border-dark))));
3797 opacity: 0.6;
3798 pointer-events: none;
3799 transition: opacity 0.2s ease;
3800}
3801
3802.flower-bed:hover::before {
3803 opacity: 0.9;
3804}
3805
3806/* Flower Grid Layout - Mobile-first responsive */
3807.flower-grid {
3808 display: grid;
3809 gap: var(--spacing-sm);
3810 grid-template-columns: repeat(3, 1fr);
3811 /* Base: 3 columns on mobile */
3812 margin-top: var(--spacing-lg);
3813 margin-bottom: var(--spacing-lg);
3814}
3815
3816@media (min-width: 480px) {
3817 .flower-grid {
3818 grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
3819 gap: var(--spacing-md);
3820 }
3821}
3822
3823@media (min-width: 768px) {
3824 .flower-grid {
3825 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
3826 }
3827}
3828
3829.flower-grid-item {
3830 display: flex;
3831 flex-direction: column;
3832 align-items: center;
3833 gap: var(--spacing-sm);
3834 min-width: 0;
3835 /* Allow shrinking in grid */
3836 overflow: hidden;
3837}
3838
3839/* Ensure flower visualizations scale within grid cells */
3840.flower-grid-item did-visualization {
3841 width: 100%;
3842 max-width: 100px;
3843}
3844
3845.flower-grid-item did-visualization svg {
3846 width: 100%;
3847 height: auto;
3848}
3849
3850.flower-grid-item a {
3851 display: block;
3852 text-decoration: none;
3853 transition: transform 0.2s ease;
3854}
3855
3856a.flower-grid-item {
3857 text-decoration: none;
3858 color: inherit;
3859 transition: transform 0.2s ease;
3860}
3861
3862button.flower-grid-item {
3863 background: none;
3864 border: none;
3865 padding: 0;
3866 cursor: pointer;
3867 transition: transform 0.2s ease;
3868}
3869
3870.flower-grid-item a:hover,
3871a.flower-grid-item:hover {
3872 transform: scale(1.05);
3873}
3874
3875.flower-note {
3876 font-size: 0.875rem;
3877 color: var(--color-text-muted);
3878 text-align: center;
3879 padding: var(--spacing-xs);
3880 margin-top: var(--spacing-xs);
3881 line-height: 1.4;
3882 max-width: 100%;
3883 word-wrap: break-word;
3884}
3885
3886.flower-grid-item-actions {
3887 display: flex;
3888 gap: var(--spacing-xs);
3889 justify-content: center;
3890 margin-top: var(--spacing-xs);
3891 flex-wrap: wrap;
3892}
3893
3894.flower-grid-item-actions .button-icon {
3895 padding: var(--spacing-xs);
3896 min-width: 32px;
3897 min-height: 32px;
3898 display: inline-flex;
3899 align-items: center;
3900 justify-content: center;
3901}
3902
3903.flower-grid-item-actions .action-icon {
3904 width: 16px;
3905 height: 16px;
3906 display: block;
3907}
3908
3909/* ============================================
3910 Recent Gardens Display
3911 ============================================ */
3912
3913.recent-gardens {
3914 padding: var(--spacing-lg) 0;
3915}
3916
3917.recent-gardens-title {
3918 font-size: var(--font-size-lg);
3919 font-weight: 700;
3920 margin-bottom: var(--spacing-md);
3921 letter-spacing: -0.02em;
3922}
3923
3924.recent-gardens-list {
3925 display: flex;
3926 flex-direction: column;
3927 gap: var(--spacing-sm);
3928}
3929
3930/* Streamlined single-row garden item */
3931.recent-garden-row {
3932 transition: all var(--transition);
3933 /* Default styles are overridden by inline styles from each garden's unique theme */
3934}
3935
3936.recent-garden-row-link {
3937 display: flex;
3938 align-items: center;
3939 gap: var(--spacing-md);
3940 padding: var(--spacing-sm) var(--spacing-md);
3941 text-decoration: none;
3942 color: var(--color-text);
3943}
3944
3945/* Smaller flower visualization */
3946.recent-garden-flower {
3947 flex-shrink: 0;
3948 width: 40px;
3949 height: 40px;
3950 display: flex;
3951 align-items: center;
3952 justify-content: center;
3953}
3954
3955/* Display name and handle stacked */
3956.recent-garden-identity {
3957 flex: 1;
3958 display: flex;
3959 flex-direction: column;
3960 gap: 0;
3961 min-width: 0;
3962 overflow: hidden;
3963}
3964
3965.recent-garden-display-name {
3966 font-size: 0.9rem;
3967 font-weight: 700;
3968 letter-spacing: -0.01em;
3969 line-height: 1.2;
3970 white-space: nowrap;
3971 overflow: hidden;
3972 text-overflow: ellipsis;
3973}
3974
3975.recent-garden-handle {
3976 font-size: 0.75rem;
3977 color: var(--color-text-muted);
3978 font-weight: 400;
3979 white-space: nowrap;
3980 overflow: hidden;
3981 text-overflow: ellipsis;
3982}
3983
3984/* Flower emoji and timestamp */
3985.recent-garden-activity {
3986 flex-shrink: 0;
3987 display: flex;
3988 align-items: center;
3989 gap: var(--spacing-xs);
3990 font-size: 0.75rem;
3991 color: var(--color-text-muted);
3992}
3993
3994.recent-garden-update-icon {
3995 font-size: 0.875rem;
3996}
3997
3998.recent-garden-time {
3999 white-space: nowrap;
4000}
4001
4002.recent-gardens-loading,
4003.recent-gardens-empty {
4004 text-align: center;
4005 padding: var(--spacing-lg);
4006 color: var(--color-text-muted);
4007}
4008
4009.recent-gardens-empty-note {
4010 font-size: 0.875rem;
4011 font-style: italic;
4012 margin-top: var(--spacing-sm);
4013}
4014
4015/* Responsive adjustments */
4016@media (max-width: 768px) {
4017 .recent-gardens-title {
4018 font-size: var(--font-size-base);
4019 }
4020
4021 .recent-garden-row-link {
4022 padding: var(--spacing-xs) var(--spacing-sm);
4023 }
4024
4025 .recent-garden-display-name {
4026 font-size: 0.85rem;
4027 }
4028}
4029
4030/* ============================================
4031 Phase 9: Specific Components Mobile (< 480px)
4032 ============================================ */
4033
4034/* 9.1 Recent Gardens - Extra small screens */
4035@media (max-width: 479px) {
4036 .recent-gardens-list {
4037 margin: 0 calc(-1 * var(--spacing-md));
4038 padding: var(--spacing-md);
4039 }
4040
4041 .recent-garden-row-link {
4042 padding: var(--spacing-sm);
4043 gap: var(--spacing-sm);
4044 }
4045
4046 .recent-garden-flower {
4047 width: 32px;
4048 height: 32px;
4049 flex-shrink: 0;
4050 }
4051
4052 .recent-garden-display-name {
4053 font-size: 0.9rem;
4054 }
4055
4056 .recent-garden-handle {
4057 font-size: 0.75rem;
4058 }
4059}
4060
4061/* 9.2 DID Visualization - Extra small screens */
4062@media (max-width: 479px) {
4063 .did-visualization {
4064 max-width: 200px;
4065 margin: 0 auto;
4066 }
4067}
4068
4069/* 9.3 Flower Bed - Extra small screens */
4070@media (max-width: 479px) {
4071 .flower-bed-header {
4072 flex-direction: column;
4073 align-items: flex-start;
4074 gap: var(--spacing-sm);
4075 }
4076
4077 .flower-modal {
4078 padding: var(--spacing-md);
4079 padding-bottom: var(--spacing-lg);
4080 }
4081
4082 .flower-modal-content {
4083 max-width: 280px;
4084 padding: 0 var(--spacing-md) var(--spacing-lg);
4085 }
4086
4087 /* Flower gardens modal buttons need horizontal padding */
4088 #flower-gardens-self-cta,
4089 #flower-gardens-list {
4090 padding: 0 var(--spacing-md);
4091 }
4092
4093 #flower-gardens-self-cta .button,
4094 #flower-gardens-list .button {
4095 width: 100%;
4096 box-sizing: border-box;
4097 }
4098}
4099
4100/* Flower garden CTAs use each garden's theme colors (like recent-gardens) */
4101.flower-garden-cta {
4102 text-transform: none;
4103}
4104.flower-garden-cta:hover {
4105 filter: brightness(0.95);
4106}
4107
4108/* ============================================
4109 Flower Bed Header Strip
4110 ============================================ */
4111
4112/* Override container styles for header strip variant */
4113.flower-bed.header-strip {
4114 padding: 0.75rem 1.5rem;
4115 padding-top: 0;
4116 margin: 0;
4117 border: none;
4118 box-shadow: none;
4119 background: transparent;
4120}
4121
4122/* Remove decorative border for header strip */
4123.flower-bed.header-strip::before {
4124 display: none;
4125}
4126
4127/* Transform grid to flex-wrap for header strip */
4128.flower-bed.header-strip .flower-grid {
4129 display: flex;
4130 flex-wrap: wrap;
4131 align-items: center;
4132 gap: 0.5rem;
4133 margin: 0;
4134}
4135
4136/* Adjust flower size for header strip */
4137.flower-bed.header-strip .flower-grid-item {
4138 width: 48px;
4139 height: 48px;
4140 flex-shrink: 0;
4141 transition: transform 0.2s ease;
4142}
4143
4144.flower-bed.header-strip .flower-grid-item:hover {
4145 transform: scale(1.15);
4146}
4147
4148.flower-bed.header-strip .flower-grid-item did-visualization {
4149 width: 48px;
4150 height: 48px;
4151 max-width: 48px;
4152}
4153
4154.flower-bed.header-strip .flower-grid-item did-visualization svg {
4155 width: 48px;
4156 height: 48px;
4157}
4158
4159/* Header strip CTA button */
4160.header-strip-cta {
4161 /* Slightly smaller than 48px flowers on desktop */
4162 height: 44px;
4163 margin-top: var(--spacing-sm);
4164 margin-bottom: 2px;
4165 padding: 0 1rem;
4166 font-size: 0.8rem;
4167 font-weight: 600;
4168 text-transform: uppercase;
4169 letter-spacing: 0.03em;
4170 white-space: nowrap;
4171 border-width: 1px;
4172 min-height: auto;
4173 min-width: auto;
4174}
4175
4176.header-strip-cta:hover {
4177 transform: scale(1.05);
4178}
4179
4180/* Mobile adjustments for header strip */
4181@media (max-width: 479px) {
4182 .flower-bed.header-strip {
4183 padding: var(--spacing-sm);
4184 padding-top: 0;
4185 }
4186
4187 .flower-bed.header-strip .flower-grid {
4188 gap: 0.375rem;
4189 }
4190
4191 .flower-bed.header-strip .flower-grid-item,
4192 .flower-bed.header-strip .flower-grid-item did-visualization,
4193 .flower-bed.header-strip .flower-grid-item did-visualization svg {
4194 width: 44px;
4195 height: 44px;
4196 }
4197
4198 .header-strip-cta {
4199 height: 44px;
4200 margin: 0;
4201 padding: 0 0.75rem;
4202 font-size: 0.75rem;
4203 }
4204
4205 /* Header spores - smaller on mobile to match flower bed header */
4206 .header-spores > div {
4207 width: 44px !important;
4208 height: 44px !important;
4209 }
4210
4211 .header-spores > div svg {
4212 width: 44px !important;
4213 height: 44px !important;
4214 }
4215}
4216
4217/* Owner flower in header strip – circular clip with accent ring */
4218.flower-bed.header-strip .flower-grid-item--owner {
4219 width: 56px;
4220 height: 56px;
4221 position: relative;
4222 border-radius: 50%;
4223 overflow: hidden;
4224}
4225
4226.flower-bed.header-strip .flower-grid-item--owner::after {
4227 content: '';
4228 position: absolute;
4229 inset: 0;
4230 border: var(--border-width) var(--border-style) var(--color-primary);
4231 border-radius: 50%;
4232 pointer-events: none;
4233 z-index: 1;
4234}
4235
4236.flower-bed.header-strip .flower-grid-item--owner did-visualization,
4237.flower-bed.header-strip .flower-grid-item--owner did-visualization svg {
4238 width: 56px;
4239 height: 56px;
4240 max-width: 56px;
4241 transform: translateY(-1.5px);
4242}
4243
4244@media (max-width: 479px) {
4245 .flower-bed.header-strip .flower-grid-item--owner {
4246 width: 52px;
4247 height: 52px;
4248 }
4249
4250 .flower-bed.header-strip .flower-grid-item--owner did-visualization,
4251 .flower-bed.header-strip .flower-grid-item--owner did-visualization svg {
4252 width: 52px;
4253 height: 52px;
4254 max-width: 52px;
4255 transform: translateY(-2px);
4256 }
4257}
4258
4259/* Help tooltips – fixed positioning, viewport-aware */
4260.help-tooltip {
4261 position: fixed;
4262 z-index: 10001;
4263 display: none;
4264 background: var(--color-background, #fff);
4265 border: var(--border-width) var(--border-style, solid) var(--color-border-dark);
4266 padding: var(--spacing-md);
4267 max-width: min(360px, calc(100vw - 1rem));
4268 width: max-content;
4269 font-size: 0.875rem;
4270 line-height: 1.5;
4271 color: var(--color-text);
4272 box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
4273 white-space: normal;
4274}
4275
4276.theme-details-help-tooltip + .help-tooltip {
4277 white-space: pre-line;
4278}
4279
4280@media (max-width: 640px) {
4281 .did-info-button {
4282 width: 28px;
4283 height: 28px;
4284 font-size: 1rem;
4285 }
4286
4287 .theme-details-help-tooltip {
4288 margin-top: var(--spacing-xs);
4289 }
4290
4291 .help-tooltip {
4292 max-width: calc(100vw - 2rem);
4293 width: auto;
4294 font-size: 0.8125rem;
4295 line-height: 1.45;
4296 padding: var(--spacing-sm);
4297 }
4298}
4299
4300/* ============================================
4301 Font Modal
4302 ============================================ */
4303
4304.font-modal-backdrop {
4305 position: fixed;
4306 inset: 0;
4307 background: rgba(0, 0, 0, 0.5);
4308 z-index: 9999;
4309 display: flex;
4310 align-items: center;
4311 justify-content: center;
4312}
4313
4314.font-modal-content {
4315 background: var(--color-background);
4316 color: var(--color-text);
4317 border: var(--border-width) var(--border-style) var(--color-border);
4318 border-radius: var(--border-radius);
4319 padding: var(--spacing-lg);
4320 min-width: 280px;
4321 max-width: 400px;
4322 width: 90vw;
4323}
4324
4325.font-modal-content h2 {
4326 margin-top: 0;
4327}
4328
4329.font-modal-content label {
4330 display: block;
4331 font-weight: 600;
4332 margin-bottom: var(--spacing-xs);
4333}
4334
4335.font-modal-content select {
4336 width: 100%;
4337 padding: var(--spacing-sm);
4338 margin-bottom: var(--spacing-md);
4339 font-size: var(--font-size-base);
4340 font-family: var(--font-body);
4341 border: var(--border-width) var(--border-style) var(--color-border);
4342 border-radius: var(--border-radius);
4343 background: var(--color-background);
4344 color: var(--color-text);
4345}
4346
4347.font-modal-content .font-modal-actions {
4348 display: flex;
4349 justify-content: flex-end;
4350 margin-top: var(--spacing-md);
4351}