From c34c0290d615038bb86164ec434b89c9fedb16ec Mon Sep 17 00:00:00 2001 From: Charlie Date: Tue, 9 Jun 2026 09:46:16 +0200 Subject: [PATCH] =?UTF-8?q?schema-apps:=20visual=20design=20overhaul=20?= =?UTF-8?q?=E2=80=94=20Linear/Stripe=20aesthetic?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app.css | 242 +++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 186 insertions(+), 56 deletions(-) diff --git a/app.css b/app.css index bf41235..ca899ca 100644 --- a/app.css +++ b/app.css @@ -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); }