Skip to content

schema-apps: visual design overhaul #9

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
melvincarvalho merged 1 commit into from
Jun 9, 2026
Merged

schema-apps: visual design overhaul #9

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
242 changes: 186 additions & 56 deletions app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,245 @@
/* schema-apps shared styles — restyle every app by editing this one file.
Each app sets its own --accent via window.APP.accent. */
Each app sets its own --accent via window.APP.accent.

Design direction: Linear / Stripe docs aesthetic — refined typography,
layered depth, generous whitespace, tasteful glass effects, cohesive
accent-driven palette. */
:root {
--accent: #2d6cdf;
--accent-2: color-mix(in oklab, var(--accent) 70%, #7c3aed);
--ink: #14182b;
--ink: #0e1225;
--ink-2: #1e2339;
--muted: #6b7280;
--line: #ececf1;
--muted-2: #9ca3af;
--line: #e8e9ef;
--line-2: #f1f2f6;
--card: #ffffff;
--radius: 18px;
--shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.18);
--shadow-hover: 0 2px 4px rgba(16,24,40,.06), 0 20px 48px -12px rgba(16,24,40,.24);
--surface: #f8f9fc;
--radius: 20px;
--radius-sm: 10px;
--shadow-sm: 0 1px 2px rgba(14,18,37,.04);
--shadow: 0 1px 3px rgba(14,18,37,.04), 0 8px 24px -6px rgba(14,18,37,.12);
--shadow-hover: 0 2px 6px rgba(14,18,37,.06), 0 16px 40px -8px rgba(14,18,37,.18);
--font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--mono: ui-monospace, "SF Mono", "Fira Code", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
font: 16px/1.6 var(--font);
font: 15px/1.65 var(--font);
color: var(--ink);
min-height: 100vh;
background:
radial-gradient(1200px 600px at 12% -10%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 60%),
radial-gradient(900px 500px at 110% 10%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 55%),
#f6f7fb;
radial-gradient(ellipse 1000px 500px at 10% -5%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
radial-gradient(ellipse 800px 400px at 105% 5%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 55%),
#f5f6fa;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.wrap { max-width: 660px; margin: clamp(1.5rem, 6vh, 4rem) auto; padding: 0 1rem; }

.wrap {
max-width: 640px;
margin: clamp(2rem, 8vh, 5rem) auto;
padding: 0 1.25rem;
}

/* ── Card ── */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
animation: rise .5s cubic-bezier(.2,.7,.2,1) both;
transition: box-shadow .3s ease, transform .3s ease;
animation: rise .55s cubic-bezier(.16,1,.3,1) both;
transition: box-shadow .35s cubic-bezier(.16,1,.3,1), transform .35s cubic-bezier(.16,1,.3,1);
}
.card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
transform: translateY(-3px);
}
@keyframes rise {
from { opacity: 0; transform: translateY(20px) scale(.98); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.card { animation: none; transition: none; }
.card:hover { transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

/* header band */
/* ── Header band ── */
.hd {
position: relative;
padding: 1.5rem 1.6rem 1.3rem;
padding: 1.75rem 1.75rem 1.5rem;
color: #fff;
background: linear-gradient(135deg, var(--accent), var(--accent-2));
background:
linear-gradient(160deg, var(--accent) 0%, var(--accent-2) 100%);
overflow: hidden;
}
/* Dot-grid texture overlay */
.hd::before {
content: "";
position: absolute; inset: 0;
background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
background-size: 16px 16px;
pointer-events: none;
mask-image: radial-gradient(ellipse 80% 100% at 0% 0%, #000 20%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse 80% 100% at 0% 0%, #000 20%, transparent 70%);
}
.hd::after { /* subtle sheen */
/* Sheen highlight */
.hd::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.22), transparent 45%);
background: radial-gradient(140% 140% at -10% -10%, rgba(255,255,255,.25), transparent 50%);
pointer-events: none;
}
.hd .icon {
width: 52px; height: 52px; display: grid; place-items: center;
font-size: 28px; line-height: 1; border-radius: 14px;
background: rgba(255,255,255,.18); backdrop-filter: blur(4px);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
width: 48px; height: 48px; display: grid; place-items: center;
font-size: 24px; line-height: 1; border-radius: 12px;
background: rgba(255,255,255,.15);
backdrop-filter: blur(8px);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.2),
0 2px 8px rgba(0,0,0,.12);
}
.hd .type {
margin-top: .85rem;
font-size: .65rem;
letter-spacing: .16em;
text-transform: uppercase;
opacity: .85;
font-weight: 700;
}
.hd .title {
margin: .15rem 0 0;
font-size: 1.55rem;
font-weight: 800;
letter-spacing: -.02em;
line-height: 1.2;
}
.hd .type { margin-top: .9rem; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .9; font-weight: 600; }
.hd .title { margin: .1rem 0 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }

/* body */
.bd { padding: 1.1rem 1.6rem 1.6rem; }
/* ── Body ── */
.bd { padding: 1.25rem 1.75rem 1.75rem; }
.rows { display: grid; }

.row {
display: grid; grid-template-columns: 140px 1fr; gap: 1rem;
padding: .7rem .6rem; margin: 0 -.6rem; border-radius: 10px;
border-top: 1px solid var(--line);
transition: background .15s ease;
display: grid;
grid-template-columns: 130px 1fr;
gap: .75rem;
padding: .75rem .65rem;
margin: 0 -.65rem;
border-radius: var(--radius-sm);
border-top: 1px solid var(--line-2);
transition: background .2s ease;
}
.row:first-child { border-top: 0; }
.row:hover { background: color-mix(in oklab, var(--accent) 6%, transparent); }
.row:active { background: color-mix(in oklab, var(--accent) 10%, transparent); transform: scale(.995); }
.row .k { color: var(--muted); font-size: .82rem; font-weight: 600; padding-top: .1rem; }
.row .v { font-weight: 500; word-break: break-word; }
.row .v a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); }
.row:hover { background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }

.row .k {
color: var(--muted);
font-size: .78rem;
font-weight: 600;
letter-spacing: .02em;
padding-top: .05rem;
align-self: start;
}
.row .v {
font-weight: 500;
font-size: .92rem;
color: var(--ink-2);
word-break: break-word;
line-height: 1.5;
}
.row .v a {
color: var(--accent);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
transition: border-color .15s;
}
.row .v a:hover { border-bottom-color: var(--accent); }

/* disclosures */
details { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
/* ── Disclosures ── */
details {
margin-top: 1rem;
border-top: 1px solid var(--line);
padding-top: 1rem;
}
summary {
cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .4rem;
font-weight: 600; font-size: .9rem; color: var(--accent);
cursor: pointer;
list-style: none;
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 600;
font-size: .85rem;
color: var(--accent);
user-select: none;
transition: color .15s;
}
summary:hover { color: var(--accent-2); }
summary::-webkit-details-marker { display: none; }
summary::before { content: "▸"; transition: transform .2s cubic-bezier(.4,0,.2,1); font-size: .8em; }
summary::before {
content: "▸";
transition: transform .2s cubic-bezier(.4,0,.2,1);
font-size: .75em;
}
details[open] summary::before { transform: rotate(90deg); }

/* edit form */
form { margin-top: 1rem; display: grid; gap: .9rem; }
label { display: grid; gap: .3rem; font-size: .78rem; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
/* ── Edit form ── */
form { margin-top: 1rem; display: grid; gap: .85rem; }
label {
display: grid; gap: .3rem;
font-size: .72rem;
font-weight: 650;
color: var(--muted);
letter-spacing: .03em;
text-transform: uppercase;
}
input, textarea {
font: inherit; color: var(--ink); padding: .6rem .7rem;
border: 1px solid var(--line); border-radius: 10px; background: #fcfcfe;
transition: border-color .2s ease, box-shadow .2s ease;
font: inherit;
color: var(--ink);
padding: .6rem .75rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--surface);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
input:hover, textarea:hover {
border-color: color-mix(in oklab, var(--muted) 40%, var(--line));
}
input:focus, textarea:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent), 0 1px 3px rgba(16,24,40,.08);
outline: none;
border-color: var(--accent);
background: #fff;
box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 15%, transparent), var(--shadow-sm);
}
textarea { min-height: 4.5rem; resize: vertical; }

/* JSON-LD source */
/* ── JSON-LD source ── */
pre {
margin: .9rem 0 0; padding: 1rem; border-radius: 12px; overflow: auto;
background: #0f1730; color: #d6e2ff; font: .8rem/1.5 ui-monospace, "SF Mono", Menlo, monospace;
margin: .85rem 0 0;
padding: 1rem 1.1rem;
border-radius: 12px;
overflow: auto;
background: #0d1117;
color: #c9d1d9;
border: 1px solid #21262d;
font: .78rem/1.6 var(--mono);
tab-size: 2;
}

footer { text-align: center; color: var(--muted); font-size: .8rem; margin-top: 1.1rem; }
footer a { color: var(--accent); text-decoration: none; }
/* ── Footer ── */
footer {
text-align: center;
color: var(--muted-2);
font-size: .78rem;
margin-top: 1.25rem;
letter-spacing: .01em;
}
footer a {
color: var(--accent);
text-decoration: none;
transition: color .15s;
}
footer a:hover { color: var(--accent-2); }
Loading