gabriel / musehub public
_surfaces.scss
287 lines 8.0 KB
Raw
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 5 days ago
1 // ─────────────────────────────────────────────────────────────────────────────
2 // Component: Surfaces
3 // File: src/scss/patterns/_surfaces.scss
4 //
5 // Variants: .panel .panel--overlay .drawer .modal .modal-backdrop .modal-panel
6 // Tokens: --bg-surface, --bg-elevated, --bg-overlay, --border-default
7 // --shadow-xl, --z-modal, --z-overlay
8 // Usage: <div class="modal"><div class="modal-panel">…</div></div>
9 //
10 // Notes: No drop shadows on cards — use border-lift.
11 // Modal backdrop is rgba black at 0.6 — intentionally hardcoded.
12 // ─────────────────────────────────────────────────────────────────────────────
13
14 // ── Hero ──────────────────────────────────────────────────────────────────────
15 // Full-width section with dark gradient background + optional radial glow.
16 // Usage: <div class="hero hero--human"> ... </div>
17 .hero {
18 position: relative;
19 overflow: hidden;
20 padding: 0 var(--space-4);
21 border-bottom: 1px solid var(--border-default);
22 background: var(--bg-base);
23
24 &--human {
25 background: linear-gradient(135deg,
26 var(--bg-base) 0%,
27 color-mix(in srgb, var(--color-accent) 4%, var(--bg-base)) 55%,
28 var(--bg-base) 100%
29 );
30 }
31
32 &--agent {
33 background: linear-gradient(135deg,
34 var(--bg-base) 0%,
35 color-mix(in srgb, var(--color-purple) 5%, var(--bg-base)) 55%,
36 var(--bg-base) 100%
37 );
38 }
39
40 &--org {
41 background: linear-gradient(135deg,
42 var(--bg-base) 0%,
43 color-mix(in srgb, var(--color-warning) 4%, var(--bg-base)) 55%,
44 var(--bg-base) 100%
45 );
46 }
47
48 &--explore {
49 background: linear-gradient(135deg, var(--bg-base) 0%, var(--bg-hero-mid) 50%, var(--bg-base) 100%);
50 }
51 }
52
53 // Ambient radial glow layer — place as first child: <div class="hero-glow hero-glow--human"></div>
54 .hero-glow {
55 position: absolute;
56 inset: 0;
57 pointer-events: none;
58
59 &--human {
60 background:
61 radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 65%),
62 radial-gradient(ellipse 35% 55% at 8% 75%, color-mix(in srgb, var(--color-purple) 5%, transparent) 0%, transparent 60%);
63 }
64
65 &--agent {
66 background:
67 radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-purple) 10%, transparent) 0%, transparent 65%),
68 radial-gradient(ellipse 35% 55% at 8% 75%, color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 60%);
69 }
70
71 &--org {
72 background:
73 radial-gradient(ellipse 60% 80% at 78% 40%, color-mix(in srgb, var(--color-warning) 9%, transparent) 0%, transparent 65%),
74 radial-gradient(ellipse 35% 55% at 8% 75%, color-mix(in srgb, var(--color-success) 5%, transparent) 0%, transparent 60%);
75 }
76
77 &--explore {
78 background:
79 radial-gradient(ellipse 60% 80% at 70% 50%, color-mix(in srgb, var(--color-accent) 6%, transparent) 0%, transparent 70%),
80 radial-gradient(ellipse 40% 60% at 10% 80%, color-mix(in srgb, var(--color-purple) 5%, transparent) 0%, transparent 60%);
81 }
82 }
83
84 // Inner content row — max-width container inside a hero
85 .hero-inner {
86 position: relative;
87 display: flex;
88 align-items: flex-start;
89 gap: var(--space-4);
90 padding: var(--space-8) 0 var(--space-5);
91 max-width: 1200px;
92 margin: 0 auto;
93
94 @media (max-width: 768px) {
95 flex-direction: column;
96 gap: var(--space-3);
97 padding: var(--space-6) 0 var(--space-4);
98 }
99
100 // Centered variant — for full-width content like explore search
101 &--center {
102 max-width: 760px;
103 flex-direction: column;
104 align-items: center;
105 text-align: center;
106 padding: var(--space-8) 0 var(--space-6);
107 }
108 }
109
110 // Hero left content column — natural width, capped so it doesn't blow out
111 .hero__content {
112 max-width: 560px;
113 min-width: 0;
114
115 h1 {
116 font-size: clamp(28px, 5vw, 44px);
117 font-weight: 300;
118 color: var(--color-accent);
119 letter-spacing: -0.02em;
120 line-height: 1.1;
121 margin: 0 0 var(--space-4);
122 }
123 }
124
125 // Hero action buttons row
126 .hero__actions {
127 display: flex;
128 gap: 10px;
129 flex-wrap: wrap;
130 align-items: center;
131 }
132
133 // Hero stats column — e.g. stat pills in MCP hero
134 .hero__stats {
135 display: flex;
136 flex-direction: column;
137 gap: var(--space-3);
138 flex-shrink: 0;
139 margin-left: auto;
140 }
141
142 // Hero subtitle — descriptive text below the h1
143 .hero__sub {
144 font-size: var(--text-sm);
145 line-height: 1.6;
146 color: var(--text-secondary);
147 max-width: 520px;
148 margin: 0 0 var(--space-4);
149 }
150
151 // Bottom metadata strip inside a hero
152 .hero-strip {
153 position: relative;
154 display: flex;
155 flex-wrap: wrap;
156 align-items: center;
157 gap: 0 var(--space-3);
158 padding: var(--space-3) 0;
159 border-top: 1px solid rgba(255, 255, 255, 0.06);
160 max-width: 1200px;
161 margin: 0 auto;
162 font-size: var(--text-xs);
163 }
164
165 // Hero eyebrow — row above display name in hero
166 .hero-eyebrow { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
167
168 // Hero strip items — metadata within .hero-strip
169 .strip-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
170 .strip-label { color: var(--text-muted); font-size: 11px; }
171 .strip-val { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
172 .strip-val--mono { word-break: break-all; overflow-wrap: anywhere; }
173
174 // Stacked strip — vertical layout for profile identity strip
175 .hero-strip--stacked {
176 flex-direction: column;
177 align-items: flex-start;
178 gap: var(--space-2) 0;
179 }
180 .strip-row {
181 display: flex;
182 align-items: center;
183 gap: var(--space-3);
184 flex-wrap: wrap;
185 min-width: 0;
186 }
187 .strip-sep { color: var(--border-default); user-select: none; font-size: 14px; line-height: 1; }
188 .strip-badge {
189 font-family: var(--font-mono);
190 font-size: 10px;
191 font-weight: var(--weight-semibold);
192 color: var(--color-accent);
193 background: color-mix(in srgb, var(--color-accent) 10%, transparent);
194 border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
195 border-radius: 4px;
196 padding: 1px 6px;
197 letter-spacing: 0.05em;
198 text-transform: uppercase;
199 }
200
201 .panel {
202 background: var(--bg-surface);
203 border: 1px solid var(--border-default);
204 border-radius: var(--radius-md);
205 padding: var(--space-4);
206 }
207
208 .panel--overlay {
209 background: var(--bg-overlay);
210 }
211
212 // Modal
213 .modal {
214 display: none;
215 position: fixed;
216 inset: 0;
217 z-index: var(--z-modal);
218
219 &.is-open {
220 display: flex;
221 align-items: center;
222 justify-content: center;
223 }
224 }
225
226 .modal-backdrop {
227 position: fixed;
228 inset: 0;
229 background: rgba(0, 0, 0, 0.6);
230 z-index: var(--z-overlay);
231 }
232
233 .modal-panel {
234 position: relative;
235 z-index: var(--z-modal);
236 background: var(--bg-surface);
237 border: 1px solid var(--border-default);
238 border-radius: var(--radius-md);
239 box-shadow: var(--shadow-xl);
240 padding: var(--space-6);
241 max-width: 560px;
242 width: 90%;
243 max-height: 80vh;
244 overflow-y: auto;
245 }
246
247 .modal-header {
248 display: flex;
249 align-items: center;
250 justify-content: space-between;
251 margin-bottom: var(--space-4);
252 }
253
254 .modal-footer {
255 display: flex;
256 gap: var(--space-2);
257 justify-content: flex-end;
258 margin-top: var(--space-4);
259 padding-top: var(--space-4);
260 border-top: 1px solid var(--border-default);
261 }
262
263 // Comment blocks
264 .comment-block {
265 border: 1px solid var(--border-default);
266 border-radius: var(--radius-base);
267 overflow: hidden;
268 margin-bottom: var(--space-3);
269 }
270
271 .comment-header-row {
272 display: flex;
273 align-items: center;
274 gap: var(--space-2);
275 padding: var(--space-2) var(--space-3);
276 background: var(--bg-surface);
277 border-bottom: 1px solid var(--border-default);
278 font-size: 13px;
279 }
280
281 .comment-body-text {
282 padding: var(--space-3);
283 font-size: 13px;
284 color: var(--text-primary);
285 white-space: pre-wrap;
286 word-break: break-word;
287 }
File History 1 commit
sha256:7d6dd8f4a89e2d1fef2d84f6e65feaff51385d382f466766b7f690a22ec18e32 fix: fall back to DB ancestry check when mpack-only fast-fo… Sonnet 4.6 patch 5 days ago