tillandClaude Opus 5
181060c32d
A static Astro page. The sheet playground imports the print engine (printlayout.ts, paper.ts) verbatim from the Klarbild repository and runs it in the browser, so the layout on screen is the application's own arithmetic rather than a mock-up. The PDF it offers is drawn from the same placements with pdf-lib. No backend, nothing uploaded, no third-party requests. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Nh4A79bbqT9dcd2inzYUdg
205 lines
12 KiB
CSS
205 lines
12 KiB
CSS
/* Klarbild demo site — the product's own tokens, one accent, warm paper. */
|
|
|
|
:root {
|
|
--measure: 62ch;
|
|
--gutter: clamp(20px, 5vw, 64px);
|
|
--wide: 1240px;
|
|
--bleed: oklch(88% 0.012 150);
|
|
--cellfill: oklch(93.5% 0.012 150);
|
|
--cellink: oklch(58% 0.035 158);
|
|
}
|
|
|
|
body {
|
|
background:
|
|
radial-gradient(70rem 40rem at 82% -10%, oklch(45% 0.23 267 / 0.05), transparent 60%),
|
|
var(--paper);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Paper grain. Fixed and pointer-transparent so it never repaints on scroll. */
|
|
body::after {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
opacity: 0.32;
|
|
mix-blend-mode: multiply;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.shell { width: min(100% - var(--gutter) * 2, var(--wide)); margin-inline: auto; }
|
|
|
|
/* The top bar is sticky, so anything jumped to needs room above it. */
|
|
:target, section[id], #try { scroll-margin-top: 78px; }
|
|
html { scroll-behavior: smooth; }
|
|
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
|
|
.prose { max-width: var(--measure); }
|
|
|
|
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.03em; line-height: 1.02; margin: 0; }
|
|
h1 { font-size: clamp(2.6rem, 7vw, 5.1rem); font-weight: 700; }
|
|
h2 { font-size: clamp(1.7rem, 3.6vw, 2.7rem); font-weight: 700; }
|
|
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
|
|
p { margin: 0 0 1em; }
|
|
.lead { font-size: clamp(1.05rem, 1.8vw, 1.28rem); color: var(--ink-soft); line-height: 1.6; }
|
|
.kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em;
|
|
text-transform: uppercase; color: var(--ink-soft); display: block; margin-bottom: 14px; }
|
|
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
|
|
/* ------------------------------------------------------------------- header */
|
|
|
|
.top {
|
|
position: sticky; top: 0; z-index: 30;
|
|
backdrop-filter: saturate(1.3) blur(10px);
|
|
background: color-mix(in oklab, var(--paper) 82%, transparent);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.top-in { display: flex; align-items: center; gap: 18px; padding: 13px 0;
|
|
padding-top: calc(13px + env(safe-area-inset-top, 0px)); }
|
|
.brand { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display);
|
|
font-weight: 700; font-size: 1.14rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
|
|
.top nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
|
|
.top nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.88rem;
|
|
padding: 7px 11px; border-radius: 999px; }
|
|
.top nav a:hover { color: var(--ink); background: var(--card); }
|
|
.top nav a.cta { color: #fff; background: var(--accent); font-weight: 600; }
|
|
.top nav a.cta:hover { background: var(--accent-2); color: #fff; }
|
|
@media (max-width: 720px) { .top nav a.hide-s { display: none; } }
|
|
|
|
/* --------------------------------------------------------------------- hero */
|
|
|
|
.hero { padding: clamp(48px, 9vw, 108px) 0 clamp(36px, 6vw, 64px); position: relative; z-index: 2; }
|
|
.hero-grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: end;
|
|
grid-template-columns: minmax(0, 1fr); }
|
|
@media (min-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
|
|
.hero h1 span { color: var(--accent); }
|
|
.hero .lead { margin-top: 22px; max-width: 46ch; }
|
|
.hero-side { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 30px); }
|
|
@media (max-width: 899px) { .hero-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 22px; } }
|
|
.hero-side dl { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; }
|
|
.hero-side dt { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700;
|
|
font-variant-numeric: tabular-nums; color: var(--ink); }
|
|
.hero-side dd { margin: 0; font-size: 0.86rem; color: var(--ink-soft); align-self: center; }
|
|
|
|
.btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
|
|
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line);
|
|
background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600;
|
|
font-size: 0.93rem; padding: 12px 18px; border-radius: var(--radius); cursor: pointer;
|
|
font-family: inherit; transition: transform .12s cubic-bezier(.16,1,.3,1), background .16s, border-color .16s; }
|
|
.btn:hover { border-color: var(--ink-soft); }
|
|
.btn:active { transform: translateY(1px); }
|
|
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff;
|
|
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.16); }
|
|
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
|
|
.btn[disabled] { opacity: .55; cursor: progress; }
|
|
|
|
/* --------------------------------------------------------------- playground */
|
|
|
|
.pg { position: relative; z-index: 2; padding-bottom: clamp(40px, 7vw, 88px); }
|
|
.pg-shell { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
|
|
box-shadow: 0 18px 50px -34px oklch(21% 0.01 95 / 0.5); overflow: hidden; }
|
|
.pg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
|
|
padding: 15px 18px; border-bottom: 1px solid var(--line); }
|
|
.pg-head h2 { font-size: 1.05rem; }
|
|
.pg-head .fine { font-size: 0.82rem; color: var(--ink-soft); margin-left: auto; }
|
|
.pg-body { display: grid; grid-template-columns: minmax(0, 1fr); }
|
|
@media (min-width: 880px) { .pg-body { grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); } }
|
|
.pg-controls { padding: 20px 18px; display: grid; gap: 17px; align-content: start; }
|
|
@media (min-width: 880px) { .pg-controls { border-right: 1px solid var(--line); } }
|
|
.field { display: grid; gap: 6px; }
|
|
.field > label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em;
|
|
text-transform: uppercase; color: var(--ink-soft); }
|
|
select, input[type=number] { font-family: inherit; font-size: 0.94rem; color: var(--ink);
|
|
background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
|
|
padding: 9px 10px; width: 100%; }
|
|
input[type=range] { width: 100%; accent-color: var(--accent); }
|
|
.seg { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
|
|
.seg button { flex: 1; font-family: inherit; font-size: 0.85rem; padding: 9px 6px; border: 0;
|
|
background: var(--paper); color: var(--ink-soft); cursor: pointer; border-right: 1px solid var(--line); }
|
|
.seg button:last-child { border-right: 0; }
|
|
.seg button[aria-pressed=true] { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
|
|
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
|
.slider-head { display: flex; justify-content: space-between; align-items: baseline; }
|
|
.slider-head span { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); }
|
|
.toggle { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; color: var(--ink-soft); }
|
|
.toggle button { width: 38px; height: 22px; border-radius: 999px; border: 1px solid var(--line);
|
|
background: var(--paper); position: relative; cursor: pointer; padding: 0; }
|
|
.toggle button::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
|
|
border-radius: 50%; background: var(--mark); transition: transform .16s cubic-bezier(.16,1,.3,1), background .16s; }
|
|
.toggle button[aria-pressed=true] { border-color: var(--accent); background: var(--accent-bg); }
|
|
.toggle button[aria-pressed=true]::after { transform: translateX(16px); background: var(--accent); }
|
|
|
|
.pg-stage { padding: 22px 18px 26px; display: grid; gap: 16px; align-content: start;
|
|
background: repeating-linear-gradient(45deg, transparent 0 11px, oklch(21% 0.01 95 / 0.015) 11px 22px); }
|
|
.stage-sheet { display: grid; place-items: center; }
|
|
#sheet { width: auto; max-width: 100%; max-height: min(58vh, 520px);
|
|
filter: drop-shadow(0 10px 26px oklch(21% 0.01 95 / 0.16)); background: #fff; }
|
|
#sheet .cell { animation: pop .34s cubic-bezier(.16,1,.3,1) backwards;
|
|
animation-delay: calc(var(--i) * 22ms); }
|
|
@keyframes pop { from { opacity: 0; transform: scale(.965); } }
|
|
@media (prefers-reduced-motion: reduce) { #sheet .cell { animation: none; } }
|
|
|
|
.readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
|
|
background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
|
|
@media (min-width: 560px) { .readout { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
|
|
.readout div { background: var(--card); padding: 10px 12px; }
|
|
.readout dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .15em;
|
|
text-transform: uppercase; color: var(--ink-soft); margin-bottom: 3px; }
|
|
.readout dd { margin: 0; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700;
|
|
font-variant-numeric: tabular-nums; }
|
|
.note { font-size: 0.88rem; padding: 10px 12px; border-left: 2px solid var(--mark);
|
|
background: var(--paper); color: var(--ink-soft); }
|
|
.note[data-tone=ok] { border-left-color: var(--ok); }
|
|
.note[data-tone=warn] { border-left-color: var(--warn); color: var(--ink); }
|
|
.pg-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
|
|
padding: 14px 18px; border-top: 1px solid var(--line); }
|
|
.pg-foot p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); max-width: 52ch; }
|
|
|
|
/* ----------------------------------------------------------------- sections */
|
|
|
|
section { position: relative; z-index: 2; padding: clamp(46px, 8vw, 96px) 0; }
|
|
section + section { border-top: 1px solid var(--line); }
|
|
|
|
.zig { display: grid; gap: clamp(24px, 4vw, 52px); align-items: center;
|
|
grid-template-columns: minmax(0, 1fr); }
|
|
@media (min-width: 880px) { .zig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
|
|
@media (min-width: 880px) { .zig.flip > :first-child { order: 2; } }
|
|
.zig figure { margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
|
|
overflow: hidden; background: var(--card); box-shadow: 0 16px 44px -34px oklch(21% 0.01 95 / 0.55); }
|
|
.zig figure img { display: block; width: 100%; height: auto; }
|
|
.zig figcaption { font-size: 0.8rem; color: var(--ink-soft); padding: 9px 12px; border-top: 1px solid var(--line); }
|
|
|
|
.facts { display: grid; gap: 0; margin-top: 30px; border-top: 1px solid var(--line); }
|
|
.facts > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--line); }
|
|
@media (min-width: 680px) { .facts > div { grid-template-columns: 13rem minmax(0, 1fr); gap: 20px; align-items: baseline; } }
|
|
.facts h3 { color: var(--ink); }
|
|
.facts p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
|
|
|
|
/* Modules: a list that reads as a switchboard, not three equal cards. */
|
|
.mods { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 32px; }
|
|
.mod { display: grid; gap: 4px 18px; padding: 15px 0; border-bottom: 1px solid var(--line);
|
|
grid-template-columns: minmax(0, 1fr); }
|
|
@media (min-width: 760px) { .mod { grid-template-columns: 9.5rem minmax(0, 1fr) 15rem; align-items: baseline; } }
|
|
.mod code { font-family: var(--font-mono); font-size: 0.86rem; color: var(--accent); }
|
|
.mod.core code { color: var(--ink); }
|
|
.mod p { margin: 0; font-size: 0.94rem; }
|
|
.mod .need { font-size: 0.83rem; color: var(--ink-soft); }
|
|
.mod.core { background: linear-gradient(90deg, var(--accent-bg), transparent 60%); }
|
|
|
|
pre { background: var(--ink); color: oklch(94% 0.01 95); font-family: var(--font-mono);
|
|
font-size: 0.83rem; line-height: 1.7; padding: 16px 18px; border-radius: var(--radius);
|
|
overflow-x: auto; margin: 0; }
|
|
pre .c { color: oklch(66% 0.02 95); }
|
|
code { font-family: var(--font-mono); font-size: 0.9em; }
|
|
|
|
.split-code { display: grid; gap: clamp(22px, 4vw, 44px); grid-template-columns: minmax(0, 1fr); align-items: start; }
|
|
@media (min-width: 880px) { .split-code { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } }
|
|
|
|
footer { position: relative; z-index: 2; border-top: 1px solid var(--line);
|
|
padding: 40px 0 calc(48px + env(safe-area-inset-bottom, 0px)); }
|
|
.foot-in { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: baseline; }
|
|
footer a { color: var(--ink-soft); text-decoration: none; font-size: 0.88rem; }
|
|
footer a:hover { color: var(--accent); }
|
|
footer .fine { font-size: 0.8rem; color: var(--ink-soft); margin-left: auto; }
|
|
@media (max-width: 620px) { footer .fine { margin-left: 0; width: 100%; } }
|