style: polish on-box UI (sticky nav, softer cards, status tiles, app tile hover)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
5830f8887a
commit
24beffeaf4
1 changed files with 106 additions and 21 deletions
|
|
@ -21,7 +21,13 @@
|
|||
--r-pill: 999px;
|
||||
|
||||
--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.35);
|
||||
--ring: 0 0 0 2px var(--accent);
|
||||
/* Brand red from the logo, used only for small highlights. */
|
||||
--brand: #ff6b56;
|
||||
--glow-a: rgba(255, 107, 86, 0.10);
|
||||
--glow-b: rgba(110, 231, 183, 0.08);
|
||||
--nav-bg: rgba(15, 17, 21, 0.72);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
|
|
@ -38,6 +44,11 @@
|
|||
--warn-fg: #5a2a10;
|
||||
--danger: #c03a28;
|
||||
--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
--shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.10);
|
||||
--brand: #c03a28;
|
||||
--glow-a: rgba(192, 58, 40, 0.07);
|
||||
--glow-b: rgba(15, 138, 95, 0.06);
|
||||
--nav-bg: rgba(247, 246, 243, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -45,9 +56,16 @@
|
|||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
/* Two soft glows at the top (logo red, accent green) give the page some
|
||||
depth without competing with the content. */
|
||||
background:
|
||||
radial-gradient(60rem 28rem at 15% -10%, var(--glow-a), transparent 70%),
|
||||
radial-gradient(50rem 24rem at 95% -5%, var(--glow-b), transparent 70%),
|
||||
var(--bg);
|
||||
background-attachment: fixed;
|
||||
color: var(--fg);
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* Shared page container — both landing and /apps wrap content in
|
||||
|
|
@ -59,9 +77,16 @@ body {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 1.25rem;
|
||||
padding: 0.85rem 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 2rem;
|
||||
/* Stays in reach while scrolling long pages like /settings. */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
background: var(--nav-bg);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.brand {
|
||||
font-weight: 700;
|
||||
|
|
@ -91,30 +116,52 @@ body {
|
|||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: var(--r-sm);
|
||||
border-radius: var(--r-pill);
|
||||
transition: color 120ms, background 120ms;
|
||||
}
|
||||
.nav-links a:hover { color: var(--fg); }
|
||||
.nav-links a:hover { color: var(--fg); background: var(--card); }
|
||||
.nav-links a[aria-current="page"] {
|
||||
color: var(--fg);
|
||||
background: var(--accent-soft);
|
||||
}
|
||||
|
||||
/* -- Landing page ---------------------------------------------- */
|
||||
header h1 { margin: 0 0 0.5rem; font-size: 2.5rem; }
|
||||
header h1 {
|
||||
margin: 0 0 0.5rem;
|
||||
font-size: clamp(2rem, 6vw, 2.75rem);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
background: linear-gradient(100deg, var(--fg) 40%, var(--accent));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
.lead { font-size: 1.25rem; color: var(--muted); margin: 0 0 0.25rem; }
|
||||
.host { color: var(--muted); margin: 0 0 3rem; }
|
||||
.host code {
|
||||
background: var(--card);
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: var(--r-sm);
|
||||
background: var(--accent-soft);
|
||||
padding: 0.2rem 0.65rem;
|
||||
border-radius: var(--r-pill);
|
||||
color: var(--accent);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
section h2 {
|
||||
font-size: 1.1rem;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
letter-spacing: 0.12em;
|
||||
color: var(--muted);
|
||||
margin: 2rem 0 1rem;
|
||||
margin: 2.5rem 0 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
/* Small brand-red marker in front of each landing-page section title. */
|
||||
section h2::before {
|
||||
content: "";
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--brand);
|
||||
}
|
||||
.tiles {
|
||||
display: grid;
|
||||
|
|
@ -124,9 +171,21 @@ section h2 {
|
|||
.tile {
|
||||
background: var(--card);
|
||||
padding: 1.25rem;
|
||||
border-radius: var(--r-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* Thin accent line along the top edge of each status tile. */
|
||||
.tile::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 auto 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--accent), transparent);
|
||||
opacity: 0.7;
|
||||
}
|
||||
.tile .label {
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -134,7 +193,12 @@ section h2 {
|
|||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.tile .value { font-size: 1.25rem; margin-top: 0.5rem; }
|
||||
.tile .value {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 600;
|
||||
margin-top: 0.5rem;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.updated { font-size: 0.85rem; color: var(--muted); margin-top: 1rem; }
|
||||
.soon {
|
||||
background: var(--card);
|
||||
|
|
@ -172,7 +236,9 @@ h2 {
|
|||
.app {
|
||||
background: var(--card);
|
||||
padding: 1rem;
|
||||
border-radius: var(--r-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
transition: border-color 120ms;
|
||||
margin: 0.5rem 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -219,7 +285,10 @@ button, .btn {
|
|||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
transition: filter 120ms, transform 80ms;
|
||||
}
|
||||
button:hover:not(:disabled), .btn:hover { filter: brightness(1.08); }
|
||||
button:active:not(:disabled), .btn:active { transform: translateY(1px); }
|
||||
button.secondary, .btn.secondary {
|
||||
background: var(--card);
|
||||
color: var(--fg);
|
||||
|
|
@ -451,7 +520,8 @@ details.log-details[open] > summary { color: var(--fg); }
|
|||
.card {
|
||||
background: var(--card);
|
||||
padding: 1.25rem;
|
||||
border-radius: var(--r-md);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
.card + .card { margin-top: 1rem; }
|
||||
|
|
@ -506,9 +576,9 @@ details.log-details[open] > summary { color: var(--fg); }
|
|||
gap: 0.75rem;
|
||||
}
|
||||
.app-tile {
|
||||
background: var(--bg);
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-md);
|
||||
border-radius: var(--r-lg);
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -516,12 +586,20 @@ details.log-details[open] > summary { color: var(--fg); }
|
|||
align-items: flex-start;
|
||||
text-decoration: none;
|
||||
color: var(--fg);
|
||||
transition: border-color 120ms, background 120ms;
|
||||
transition: border-color 120ms, background 120ms, transform 120ms, box-shadow 120ms;
|
||||
}
|
||||
.app-tile:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--card-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lift);
|
||||
}
|
||||
.app-tile:hover { border-color: var(--accent); background: var(--card-hover); }
|
||||
.app-tile .icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
padding: 6px;
|
||||
border-radius: var(--r-md);
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -549,6 +627,13 @@ details.log-details[open] > summary { color: var(--fg); }
|
|||
.app-icon svg { width: 36px; height: 36px; }
|
||||
|
||||
.login-brand { margin: 0 0 1.5rem; font-size: 1.2rem; }
|
||||
|
||||
.app:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after { transition: none !important; }
|
||||
.app-tile:hover { transform: none; }
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
.brand::before { background: #c03a28; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue