Skip to content

style(panels): soft corners and solid rules on the tool panels #254

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yigitdot merged 2 commits into from
Sep 27, 2026
Merged

style(panels): soft corners and solid rules on the tool panels #254

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
20cea58
style(fleet): rule the fleet panel in solid lines
yigitdot Sep 27, 2026
0fa3713
style(panels): soften corners and rule terminal and faq card in solid…
yigitdot Sep 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 18 additions & 10 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@
clamp's 9vw term already exceeds 5rem, so a bigger floor does
nothing on desktop.) */
--nav-h: 0;
/* Corner radius shared by the tool panels (.terminal, .fleet,
.faq-card) and their offset shadows. */
--panel-radius: 6px;
}

@theme inline {
Expand Down Expand Up @@ -307,7 +310,9 @@ a.cta-primary:focus-visible {
(lib/stats.ts), one per cycle: tx → block → operator → bytes → paid.
All lines share one 4.5s loop; each line fades in at its own delay.
Progress bar fills during the "delivered" line. Cursor blinks
independently. The cascade restarts every cycle. */
independently. The cascade restarts every cycle. Shares the "tool
panel" vocabulary with .fleet and .faq-card: soft corners, a solid
1px rule, a hard offset shadow. */

.terminal {
font-family:
Expand All @@ -317,7 +322,8 @@ a.cta-primary:focus-visible {
line-height: 1.65;
color: var(--ink);
background: var(--paper);
border: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
border-radius: var(--panel-radius);
box-shadow: 7px 7px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
}

Expand All @@ -326,7 +332,7 @@ a.cta-primary:focus-visible {
align-items: center;
gap: 6px;
padding: 10px 14px;
border-bottom: 1px dashed color-mix(in srgb, var(--ink) 30%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
}

.terminal-dot {
Expand Down Expand Up @@ -498,7 +504,7 @@ a.cta-primary:focus-visible {

/* --- fleet status panel (§05) -----------------------------------------
Sits on the paper Contact section as an inverted panel. Same "tool
panel" vocabulary as .terminal — square corners, dashed border, hard
panel" vocabulary as .terminal — soft corners, solid rule, hard
offset shadow — with an ops-dashboard layout instead of a CLI log:
registered nodes (region, operator, last settlement) with a pulse for
each one that settled recently, plus two 24h
Expand All @@ -513,7 +519,8 @@ a.cta-primary:focus-visible {
line-height: 1.55;
color: var(--paper);
background: color-mix(in srgb, var(--paper) 12%, var(--ink));
border: 1px dashed color-mix(in srgb, var(--paper) 26%, transparent);
border: 1px solid color-mix(in srgb, var(--paper) 26%, transparent);
border-radius: var(--panel-radius);
overflow: hidden;
box-shadow: 7px 7px 0 0 color-mix(in srgb, var(--ink) 12%, transparent);
}
Expand All @@ -523,7 +530,7 @@ a.cta-primary:focus-visible {
align-items: center;
gap: 6px;
padding: 10px 14px;
border-bottom: 1px dashed color-mix(in srgb, var(--paper) 30%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
}

.fleet-dot {
Expand Down Expand Up @@ -711,8 +718,8 @@ a.cta-primary:focus-visible {
the threshold. The active section's nav item shows a full-width
whisper-green underline (scales in from the left) and a brighter
label opacity; hover shows a short underline preview. Focus paints
a dashed outline that matches the terminal / fleet border
vocabulary. No mix-blend-mode is used — the parent nav toggles
a dashed outline, kept dashed so focus reads as distinct from the
solid panel borders. No mix-blend-mode is used — the parent nav toggles
`data-tone` per-section to work around Safari's bug with
`mix-blend-mode: difference` on `position: fixed` elements
(see components/site/Chrome.tsx). */
Expand Down Expand Up @@ -1330,8 +1337,9 @@ a.cta-primary:focus-visible {
display: none;
margin: 0 0 1.5rem;
padding: var(--faq-pad);
/* Square and dashed, matching .terminal and .fleet. */
border: 1px dashed var(--faq-edge);
/* Soft-cornered and solid, matching .terminal and .fleet. */
border: 1px solid var(--faq-edge);
border-radius: var(--panel-radius);
box-shadow: 7px 7px 0 0 color-mix(in srgb, var(--paper) 12%, transparent);
}
.faq-card[data-selected="true"] {
Expand Down
Loading