diff --git a/app/globals.css b/app/globals.css index 6c98b89..6a14141 100644 --- a/app/globals.css +++ b/app/globals.css @@ -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 { @@ -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: @@ -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); } @@ -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 { @@ -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 @@ -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); } @@ -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 { @@ -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). */ @@ -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"] {