taurean.bryant.land
a a vibe-coded abomination experiment of a fragrance review platform built on the atmosphere.
drydown.social
1/* Component-specific styles for App */
2
3:root {
4 --bg-color: #ffffff;
5 --text-color: #000000;
6 --text-secondary: #666666;
7 --border-color: #dddddd;
8
9 --card-border: #dddddd;
10 --card-border-dashed: #cccccc;
11
12 --card-bg: #f5f5f5;
13 --card-bg-interactive: #ffffff;
14 --card-bg-hover: #f0f8ff;
15
16 --status-ready: #0066cc;
17 --status-completed: #00aa00;
18 --status-inprogress: #666666;
19
20 --star-color: #ff9900;
21
22 --site-max-width: 720px;
23}
24
25@media (prefers-color-scheme: dark) {
26 :root {
27 --bg-color: #121212;
28 --text-color: #e0e0e0;
29 --text-secondary: #aaaaaa;
30 --border-color: #333333;
31
32 --card-border: #333333;
33 --card-border-dashed: #444444;
34
35 --card-bg: #1e1e1e;
36 --card-bg-interactive: #1e1e1e;
37 --card-bg-hover: #2a2a2a;
38
39 --status-ready: #4dabf5;
40 --status-completed: #66bb6a;
41 --status-inprogress: #aaaaaa;
42 }
43}
44
45body {
46 background-color: var(--bg-color);
47 color: var(--text-color);
48}
49
50a {
51 color: var(--text-color);
52}
53
54#app {
55 width: 100%;
56 max-width: var(--site-max-width);
57 margin: 0 auto;
58 padding: 0;
59 text-align: left;
60}
61
62/* Page container can just control padding/box-sizing now */
63.page-container {
64 width: 100%;
65 padding: 1rem 1rem;
66 box-sizing: border-box;
67}
68
69/* Ensure images and other content resize properly */
70.page-container img {
71 max-width: 100%;
72 height: auto;
73}
74
75.card {
76 padding: 2em;
77}
78
79/* Site Header */
80.site-header {
81 display: flex;
82 justify-content: space-between;
83 align-items: center;
84 margin-bottom: 1.5rem;
85 padding: 0;
86 width: 100%;
87}
88
89.site-logo {
90 font-size: 1.5rem;
91 font-weight: 800;
92 letter-spacing: -0.02em;
93 color: var(--text-color);
94 text-decoration: none;
95}
96
97.site-nav {
98 display: flex;
99 gap: 1rem;
100 align-items: center;
101}
102
103.nav-link {
104 font-size: 0.9rem;
105 color: var(--text-secondary);
106 text-decoration: none;
107 transition: color 0.15s ease;
108}
109
110.nav-link:hover {
111 color: var(--text-color);
112}
113
114.nav-link-username {
115 color: var(--text-color);
116}
117
118/* Legacy header styles for page-specific headers */
119header {
120 display: flex;
121 justify-content: space-between;
122 align-items: center;
123 margin-bottom: 1.5rem;
124 padding: 0;
125 width: 100%;
126}
127
128header h1 {
129 margin: 0;
130 font-size: 2.2rem;
131 letter-spacing: -0.02em;
132 font-weight: 800;
133 color: var(--text-color);
134}
135
136/* Profile Avatar */
137.profile-avatar {
138 border: 2px solid var(--border-color);
139}
140
141/* Review List Styles */
142.review-section {
143 margin-bottom: 2rem;
144}
145
146.review-section-header {
147 font-size: 1.2rem;
148 margin-bottom: 1rem;
149 color: var(--text-color);
150}
151
152.review-section-header.ready {
153 color: var(--status-ready);
154}
155
156.review-section-header.in-progress {
157 color: var(--status-inprogress);
158}
159
160.review-section-header.completed {
161 color: var(--status-completed);
162}
163
164.all-reviews-header-container {
165 display: flex;
166 justify-content: space-between;
167 align-items: center;
168 margin-bottom: 1rem;
169}
170
171.subtle-heading {
172 font-size: 0.9rem;
173 color: var(--text-secondary);
174 text-transform: uppercase;
175 letter-spacing: 0.05em;
176 font-weight: bold;
177}
178
179.sort-controls {
180 display: flex;
181 gap: 0.5rem;
182 align-items: center;
183 font-size: 0.85rem;
184 color: var(--text-secondary);
185}
186
187.sort-controls select {
188 background-color: var(--card-bg);
189 color: var(--text-color);
190 border: 1px solid var(--border-color);
191 border-radius: 4px;
192 padding: 0.2rem 0.4rem;
193 font-size: 0.85rem;
194}
195
196.reviews-empty {
197 text-align: center;
198 padding: 2rem;
199 color: var(--text-secondary);
200}
201
202/* Enhanced empty state for non-drydown users */
203.empty-profile-state {
204 text-align: center;
205 padding: 3rem 2rem;
206 background: var(--surface-2);
207 border: 1px solid var(--border-color);
208 border-radius: var(--radius-lg);
209 margin: 2rem 0;
210}
211
212.empty-profile-state-title {
213 font-size: 1.25rem;
214 font-weight: 600;
215 margin-bottom: 1rem;
216 color: var(--text-primary);
217}
218
219.empty-profile-state-description {
220 font-size: 0.95rem;
221 color: var(--text-secondary);
222 line-height: 1.6;
223 margin-bottom: 1.5rem;
224 max-width: 480px;
225 margin-left: auto;
226 margin-right: auto;
227}
228
229.empty-profile-state-cta {
230 margin-top: 1.5rem;
231}
232
233/* Review Card Styles */
234.review-card {
235 border: 1px solid var(--card-border);
236 border-radius: 8px;
237 padding: 1rem;
238 margin-bottom: 1rem;
239 background-color: var(--card-bg);
240 transition: background-color 0.2s, border-color 0.2s;
241}
242
243.review-card.inProgress {
244 border: 1px dashed var(--card-border-dashed);
245 opacity: 0.8;
246}
247
248.review-card.interactive {
249 cursor: pointer;
250 background-color: var(--card-bg-interactive);
251}
252
253.review-card.interactive:hover {
254 background-color: var(--card-bg-hover);
255}
256
257.review-card-title {
258 margin: 0 0 0.5rem 0;
259 font-size: 1.1rem;
260 color: var(--text-color);
261}
262
263.review-card-status {
264 font-size: 0.9rem;
265 font-weight: bold;
266}
267
268.review-card-status.ready {
269 color: var(--status-ready);
270}
271
272.review-card-status.in-progress {
273 color: var(--text-secondary);
274 font-weight: normal;
275}
276
277.review-card-rating {
278 font-size: 1.2rem;
279 color: var(--star-color);
280}
281
282.review-card-excerpt {
283 font-size: 0.9rem;
284 color: var(--text-secondary);
285 margin: 0.5rem 0 0 0;
286}
287
288/* Tab Bar Styles */
289.tab-bar {
290 display: flex;
291 gap: 0.5rem;
292 border-bottom: 1px solid var(--border-color);
293 margin-bottom: 2rem;
294}
295
296.tab-item {
297 padding: 0.75rem 1rem;
298 font-size: 1rem;
299 text-decoration: none;
300 color: var(--text-color);
301 opacity: 0.5;
302 transition: opacity 0.2s ease;
303}
304
305.tab-item:hover {
306 opacity: 0.7;
307}
308
309.tab-item--active {
310 opacity: 1;
311 font-weight: 600;
312 border-bottom: 2px solid var(--text-color);
313}
314
315/* Shared Header/Nav Styles */
316.main-nav {
317 display: flex;
318 justify-content: space-between;
319 align-items: center;
320 margin-bottom: 2rem;
321 border-bottom: 1px solid var(--border-color);
322 padding-bottom: 1rem;
323}
324
325.nav-logo {
326 text-decoration: none;
327 color: var(--text-color);
328 font-weight: 800;
329 font-size: 1.5rem;
330}
331
332/* Single Review Page Styles */
333.back-link {
334 display: inline-block;
335 margin-bottom: 1rem;
336 color: var(--text-secondary);
337 text-decoration: none;
338}
339
340.review-header {
341 margin-bottom: 2rem;
342 display: flex;
343 justify-content: space-between;
344 align-items: flex-start;
345}
346
347.review-title {
348 margin: 0 0 0.25rem 0;
349 font-size: 2.2rem;
350 letter-spacing: -0.02em;
351 font-weight: 800;
352 color: var(--text-color);
353}
354
355.review-subtitle {
356 font-size: 1.2rem;
357 font-weight: normal;
358 color: var(--text-secondary);
359 margin: 0;
360}
361
362.review-meta {
363 display: flex;
364 flex-direction: column;
365 gap: 1.5rem;
366 margin-bottom: 2rem;
367}
368
369.rating-section {
370 display: flex;
371 flex-direction: column;
372 align-items: flex-start;
373 gap: 0.5rem;
374}
375
376.rating-stars {
377 font-size: 2.5rem;
378 color: var(--star-color);
379 line-height: 1;
380}
381
382.rating-note {
383 font-size: 0.9rem;
384 font-style: italic;
385 opacity: 0.8;
386 color: var(--text-secondary);
387}
388
389.review-info {
390 display: flex;
391 flex-direction: column;
392 gap: 0.35rem;
393 text-align: left;
394}
395
396.review-date {
397 font-size: 0.95rem;
398 color: var(--text-secondary);
399}
400
401.review-author {
402 font-size: 0.9rem;
403 opacity: 0.75;
404 color: var(--text-secondary);
405}
406
407/* Legacy class for backwards compatibility */
408.rating-large {
409 font-size: 2.5rem;
410 color: var(--star-color);
411}
412
413.grid-scores {
414 display: grid;
415 grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
416 gap: 1rem;
417 margin-bottom: 2rem;
418}
419
420.score-item {
421 background: var(--card-bg);
422 padding: 0.8rem;
423 border-radius: 8px;
424 border: 1px solid var(--card-border);
425}
426
427.score-label {
428 font-size: 0.8rem;
429 color: var(--text-secondary);
430}
431
432.score-value {
433 font-size: 1.2rem;
434 font-weight: bold;
435 color: var(--text-color);
436}
437
438.review-text {
439 font-size: 1.1rem;
440 line-height: 1.6;
441 color: var(--text-color);
442}
443
444.review-paragraph {
445 margin-bottom: 1rem;
446}
447
448/* Weather Opt-In Banner */
449.weather-opt-in-banner {
450 background: var(--card-bg);
451 border: 1px solid var(--card-border);
452 border-radius: 8px;
453 padding: 1.5rem;
454 margin-bottom: 2rem;
455 display: flex;
456 flex-direction: column;
457 gap: 1rem;
458}
459
460.banner-icon {
461 font-size: 2rem;
462}
463
464.banner-content h3 {
465 margin: 0 0 0.5rem 0;
466 font-size: 1.125rem;
467 color: var(--text-color);
468}
469
470.banner-content p {
471 margin: 0;
472 color: var(--text-secondary);
473 font-size: 0.875rem;
474}
475
476.banner-actions {
477 display: flex;
478 gap: 1rem;
479 align-items: center;
480}
481
482.banner-actions button {
483 padding: 0.5rem 1rem;
484}
485
486.banner-actions a {
487 color: var(--text-secondary);
488 text-decoration: none;
489}
490
491.banner-actions a:hover {
492 text-decoration: underline;
493}
494
495.error-message {
496 color: #ef4444;
497 font-size: 0.875rem;
498 margin-top: 0.5rem;
499}
500
501@media (prefers-color-scheme: dark) {
502 .error-message {
503 color: #f87171;
504 }
505}
506
507/* Landing Page Hero */
508.landing-hero {
509 text-align: center;
510 max-width: 400px;
511 margin: 0 auto 2rem;
512 padding: 1rem 0;
513}
514
515.landing-hero h1 {
516 font-size: 2.5rem;
517 font-weight: 800;
518 letter-spacing: -0.03em;
519 margin-bottom: 0.5rem;
520}
521
522.landing-hero p {
523 color: var(--text-secondary);
524 font-size: 1rem;
525 margin-bottom: 1.5rem;
526}
527
528/* Houses Ribbon */
529.houses-section {
530 margin-bottom: 2rem;
531}
532
533.houses-section h2 {
534 font-size: 1.2rem;
535 margin-bottom: 0.75rem;
536 font-weight: 600;
537}
538
539.houses-ribbon {
540 display: flex;
541 gap: 0.75rem;
542 overflow-x: auto;
543 scroll-snap-type: x mandatory;
544 scroll-behavior: smooth;
545 padding-bottom: 0.5rem;
546 -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
547}
548
549.houses-ribbon::-webkit-scrollbar {
550 height: 6px;
551}
552
553.houses-ribbon::-webkit-scrollbar-track {
554 background: var(--card-bg);
555 border-radius: 3px;
556}
557
558.houses-ribbon::-webkit-scrollbar-thumb {
559 background: var(--border-color);
560 border-radius: 3px;
561}
562
563/* House Card */
564.house-card {
565 min-width: 150px;
566 background: var(--card-bg);
567 border: 1px solid var(--card-border);
568 border-radius: 8px;
569 padding: 0.75rem;
570 scroll-snap-align: start;
571 flex-shrink: 0;
572 transition: background 0.2s ease;
573}
574
575.house-card:hover {
576 background: var(--card-bg-hover);
577}
578
579.house-card-name {
580 font-size: 1rem;
581 font-weight: 600;
582 margin-bottom: 0.5rem;
583 color: var(--text-color);
584}
585
586.house-card-count {
587 font-size: 0.85rem;
588 opacity: 0.7;
589 color: var(--text-secondary);
590}
591
592/* House Filter Toggle */
593.house-filter {
594 display: flex;
595 gap: 0.5rem;
596 border-bottom: 1px solid var(--border-color);
597 margin-bottom: 2rem;
598}
599
600.house-filter-button {
601 background: none;
602 border: none;
603 padding: 0.75rem 1rem;
604 font-size: 1rem;
605 color: var(--text-color);
606 opacity: 0.5;
607 cursor: pointer;
608 transition: opacity 0.2s ease;
609 border-bottom: 2px solid transparent;
610}
611
612.house-filter-button:hover {
613 opacity: 0.7;
614}
615
616.house-filter-button.active {
617 opacity: 1;
618 font-weight: 600;
619 border-bottom-color: var(--text-color);
620}
621
622/* Reviews Section */
623.landing-reviews {
624 margin-bottom: 1.5rem;
625}
626
627.landing-reviews h2 {
628 font-size: 1.2rem;
629 margin-bottom: 0.75rem;
630 font-weight: 600;
631}
632
633/* Mobile Adjustments */
634@media (max-width: 480px) {
635 .landing-hero {
636 padding: 0.5rem 0;
637 }
638
639 .landing-hero h1 {
640 font-size: 2rem;
641 }
642
643 .house-card {
644 min-width: 140px;
645 }
646}
647
648/* Login Form Styles */
649.login-form-card {
650 max-width: var(--site-max-width);
651 margin: 0 auto;
652 padding: 2rem 2rem 1.5rem;
653 border: 1px solid var(--border-color);
654 border-radius: 12px;
655 background: var(--card-bg-interactive);
656}
657
658.login-form-heading {
659 text-align: center;
660 font-size: 1rem;
661 font-weight: 700;
662 line-height: 1.4;
663 margin-bottom: 1.5rem;
664 color: var(--text-color);
665 text-transform: lowercase;
666 text-wrap: balance;
667}
668
669.login-form {
670 display: flex;
671 flex-direction: column;
672 gap: 1rem;
673 max-width: var(--site-max-width);
674 margin: 0 auto;
675}
676
677/* Primary Button Style */
678/* Login form button */
679.login-form-button {
680 width: 100%;
681}
682
683.login-form-providers {
684 text-align: center;
685 font-size: 0.875rem;
686 color: var(--text-color);
687 line-height: 1.5;
688}
689
690.login-form-providers a {
691 color: var(--text-color);
692 text-decoration: underline;
693}
694
695.login-form-providers a:hover {
696 opacity: 0.8;
697}
698
699/* Accessibility */
700.sr-only {
701 position: absolute;
702 width: 1px;
703 height: 1px;
704 padding: 0;
705 margin: -1px;
706 overflow: hidden;
707 clip: rect(0, 0, 0, 0);
708 white-space: nowrap;
709 border-width: 0;
710}
711
712/* App Disclaimer - Very Subtle Footer */
713.app-disclaimer {
714 margin-top: 3rem;
715 padding-top: 2rem;
716 border-top: 1px solid var(--border-color);
717 opacity: 0.7;
718 transition: opacity 0.2s ease;
719}
720
721.app-disclaimer:hover {
722 opacity: 0.9;
723}
724
725.app-disclaimer.minimal {
726 text-align: center;
727}
728
729.app-disclaimer.minimal p {
730 font-size: 0.75rem;
731 color: var(--text-secondary);
732 margin: 0;
733 line-height: 1.4;
734 text-wrap: pretty;
735}
736
737.app-disclaimer.detailed {
738 max-width: var(--site-max-width);
739 margin-left: auto;
740 margin-right: auto;
741}
742
743.app-disclaimer.detailed p {
744 font-size: 0.85rem;
745 color: var(--text-secondary);
746 margin: 0 0 0.75rem 0;
747 line-height: 1.6;
748 text-wrap: pretty;
749}
750
751.app-disclaimer.detailed p:last-child {
752 margin-bottom: 0;
753}
754
755.app-disclaimer a {
756 color: var(--text-secondary);
757 text-decoration: underline;
758}
759
760.app-disclaimer a:hover {
761 text-decoration-thickness: 2px;
762}
763
764/* App Footer */
765.app-footer {
766 margin-top: 3rem;
767 padding: 2rem 0 1rem;
768 border-top: 1px solid var(--border-color);
769 text-align: center;
770}
771
772.footer-links {
773 font-size: 0.85rem;
774 color: var(--text-secondary);
775 line-height: 1.6;
776}
777
778.footer-links a {
779 color: var(--text-secondary);
780 text-decoration: none;
781 transition: opacity 0.2s ease;
782}
783
784.footer-links a:hover {
785 opacity: 0.7;
786 text-decoration: underline;
787}
788
789.footer-separator {
790 margin: 0 0.5rem;
791 opacity: 0.5;
792}
793
794/* Rubric Selector Styles */
795.rubric-selector {
796 margin-bottom: 1.5rem;
797}
798
799.rubric-question {
800 font-size: 1rem;
801 font-weight: 600;
802 margin-bottom: 0.75rem;
803 color: var(--text-color);
804}
805
806.rubric-options {
807 display: flex;
808 flex-direction: column;
809 gap: 0.5rem;
810}
811
812.rubric-option {
813 display: flex;
814 align-items: center;
815 padding: 0.875rem 1rem;
816 border: 2px solid var(--card-border);
817 border-radius: 8px;
818 background: var(--card-bg);
819 cursor: pointer;
820 transition: border-color 0.15s ease, background-color 0.15s ease;
821 text-align: left;
822 width: 100%;
823 font-size: inherit;
824 font-family: inherit;
825 color: inherit;
826}
827
828.rubric-option:hover:not(.disabled) {
829 border-color: var(--status-ready);
830 background: var(--card-bg-hover);
831}
832
833.rubric-option.selected {
834 border-color: var(--status-ready);
835 background: var(--card-bg-hover);
836}
837
838.rubric-option:focus-visible {
839 outline: 2px solid var(--status-ready);
840 outline-offset: 2px;
841}
842
843.rubric-option.disabled {
844 opacity: 0.5;
845 cursor: not-allowed;
846}
847
848.rubric-option-text {
849 line-height: 1.4;
850 color: var(--text-color);
851}
852
853/* Touch targets - ensure 44x44px minimum for accessibility */
854@media (pointer: coarse) {
855 .rubric-option {
856 min-height: 56px;
857 padding: 1rem;
858 }
859}
860
861/* Rubric Display (read-only) Styles */
862.rubric-display {
863 display: flex;
864 flex-direction: column;
865 gap: 0.5rem;
866}
867
868.rubric-display-item {
869 display: flex;
870 justify-content: space-between;
871 align-items: flex-start;
872 padding: 0.5rem 0;
873 border-bottom: 1px solid var(--card-border);
874}
875
876.rubric-display-item:last-child {
877 border-bottom: none;
878}
879
880.rubric-display-label {
881 font-size: 0.85rem;
882 color: var(--text-secondary);
883 flex-shrink: 0;
884 margin-right: 1rem;
885}
886
887.rubric-display-value {
888 font-size: 0.9rem;
889 color: var(--text-color);
890 text-align: right;
891}
892
893.rubric-display-value.compact {
894 font-weight: 500;
895}
896
897.rubric-display-value.full {
898 max-width: 300px;
899}
900
901/* Settings Page Styles */
902.settings-page {
903 width: 100%;
904}
905
906.settings-header {
907 margin-bottom: 2rem;
908}
909
910.settings-header h1 {
911 font-size: 2rem;
912 font-weight: 800;
913 letter-spacing: -0.02em;
914 margin: 0 0 0.75rem 0;
915 color: var(--text-color);
916}
917
918.settings-intro {
919 font-size: 0.8rem;
920 color: var(--text-secondary);
921 line-height: 1.5;
922 margin: 1rem 0 0 0;
923 width: 54ch;
924 padding-inline-start: 4em;
925}
926
927.settings-preferences {
928 display: flex;
929 flex-direction: column;
930 gap: 2.5rem;
931 margin-bottom: 2rem;
932}
933
934.settings-section {
935 margin-bottom: 2rem;
936 padding-top: 1.5rem;
937 border-top: 1px solid var(--border-color);
938}
939
940.settings-section-title {
941 font-size: 1.25rem;
942 font-weight: 600;
943 margin: 0 0 0.5rem 0;
944 color: var(--text-color);
945}
946
947.settings-section-description {
948 font-size: 0.9rem;
949 color: var(--text-secondary);
950 margin: 0 0 1rem 0;
951 line-height: 1.5;
952}
953
954.settings-actions {
955 display: flex;
956 gap: 1rem;
957 justify-content: flex-end;
958 padding-top: 1.5rem;
959 border-top: 1px solid var(--border-color);
960}
961
962/* Preference Selector Styles */
963.preference-selector {
964 margin-bottom: 0;
965}
966
967.preference-header {
968 margin-bottom: 1rem;
969}
970
971.preference-question {
972 font-size: 1.1rem;
973 font-weight: 600;
974 margin-bottom: 0.25rem;
975 color: var(--text-color);
976}
977
978.preference-description {
979 font-size: 0.85rem;
980 color: var(--text-secondary);
981 line-height: 1.4;
982}
983
984.preference-options {
985 display: flex;
986 flex-direction: column;
987 gap: 0.5rem;
988}
989
990.preference-option {
991 display: flex;
992 align-items: center;
993 padding: 0.875rem 1rem;
994 border: 2px solid var(--card-border);
995 border-radius: 8px;
996 background: var(--card-bg);
997 cursor: pointer;
998 transition: border-color 0.15s ease, background-color 0.15s ease;
999 text-align: left;
1000 width: 100%;
1001 font-size: inherit;
1002 font-family: inherit;
1003 color: inherit;
1004}
1005
1006.preference-option:hover:not(.disabled) {
1007 border-color: var(--status-ready);
1008 background: var(--card-bg-hover);
1009}
1010
1011.preference-option.selected {
1012 border-color: var(--status-ready);
1013 background: var(--card-bg-hover);
1014}
1015
1016.preference-option:focus-visible {
1017 outline: 2px solid var(--status-ready);
1018 outline-offset: 2px;
1019}
1020
1021.preference-option.disabled {
1022 opacity: 0.5;
1023 cursor: not-allowed;
1024}
1025
1026.preference-option-text {
1027 line-height: 1.4;
1028 color: var(--text-color);
1029}
1030
1031/* Score Lens Toggle */
1032.score-lens-options {
1033 display: flex;
1034 flex-direction: column;
1035 gap: 0.5rem;
1036}
1037
1038.score-lens-option {
1039 display: flex;
1040 flex-direction: column;
1041 align-items: flex-start;
1042 padding: 1rem;
1043 border: 2px solid var(--card-border);
1044 border-radius: 8px;
1045 background: var(--card-bg);
1046 cursor: pointer;
1047 transition: border-color 0.15s ease, background-color 0.15s ease;
1048 text-align: left;
1049 width: 100%;
1050 font-size: inherit;
1051 font-family: inherit;
1052 color: inherit;
1053}
1054
1055.score-lens-option:hover:not(:disabled) {
1056 border-color: var(--status-ready);
1057 background: var(--card-bg-hover);
1058}
1059
1060.score-lens-option.selected {
1061 border-color: var(--status-ready);
1062 background: var(--card-bg-hover);
1063}
1064
1065.score-lens-option:focus-visible {
1066 outline: 2px solid var(--status-ready);
1067 outline-offset: 2px;
1068}
1069
1070.score-lens-option:disabled {
1071 opacity: 0.5;
1072 cursor: not-allowed;
1073}
1074
1075.score-lens-label {
1076 font-weight: 600;
1077 color: var(--text-color);
1078 margin-bottom: 0.25rem;
1079}
1080
1081.score-lens-description {
1082 font-size: 0.85rem;
1083 color: var(--text-secondary);
1084 line-height: 1.4;
1085}
1086
1087/* Success Message */
1088.success-message {
1089 background: #d4edda;
1090 color: #155724;
1091 padding: 0.75rem 1rem;
1092 border-radius: 8px;
1093 margin-bottom: 1.5rem;
1094 font-size: 0.9rem;
1095}
1096
1097@media (prefers-color-scheme: dark) {
1098 .success-message {
1099 background: #1e3a1e;
1100 color: #75d675;
1101 }
1102}
1103
1104/* Touch targets for preference options */
1105@media (pointer: coarse) {
1106 .preference-option,
1107 .score-lens-option {
1108 min-height: 56px;
1109 padding: 1rem;
1110 }
1111}
1112
1113/* Personalized score indicator */
1114.personalized-score-indicator {
1115 font-size: 0.75rem;
1116 color: var(--text-secondary);
1117 margin-top: 0.25rem;
1118 font-style: italic;
1119}
1120
1121/* Original score reference (shown alongside personalized) */
1122.original-score-reference {
1123 font-size: 0.9rem;
1124 color: var(--text-secondary);
1125 opacity: 0.6;
1126 margin-top: 0.15rem;
1127 font-style: italic;
1128 line-height: 1.3;
1129}
1130
1131/* Smaller in compact card view */
1132.review-card .original-score-reference {
1133 font-size: 0.75rem;
1134 line-height: 1.2;
1135}
1136
1137/* Styling for detailed view */
1138.review-meta .original-score-reference {
1139 font-size: 0.8rem;
1140 margin-top: 0.25rem;
1141 margin-bottom: -0.25rem;
1142}
1143
1144/* Compatibility Score Styling */
1145.compatibility-score {
1146 grid-column: span 2;
1147 opacity: 0.85;
1148}
1149
1150.compatibility-score .score-value {
1151 display: flex;
1152 flex-direction: column;
1153 align-items: center;
1154 gap: 0.25rem;
1155 font-size: 0.95rem;
1156}
1157
1158.compatibility-score .score-label {
1159 font-size: 0.8rem;
1160 text-align: center;
1161}