/* ========================================================================== Skins — reusable, image-rich full-page layouts for showcase demo items. Driven entirely by two custom properties set per item on : --accent the item accent colour --hero a url() to the item's hero image (optional) One skin renders many visually-distinct items via meta.sections. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } .skin-body { margin: 0; font: 400 16px/1.6 "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #0f172a; background: #f8fafc; -webkit-font-smoothing: antialiased; } @media (prefers-color-scheme: dark) { .skin-body { color: #e6edf3; background: #0b0f14; } } /* Shared demo chrome (same look as demos/_shell) */ .demo-chrome { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 1rem; font: 600 .85rem/1.2 "Inter", ui-sans-serif, system-ui, sans-serif; background: rgba(15, 23, 42, .92); color: #e5e7eb; backdrop-filter: saturate(140%) blur(6px); border-bottom: 1px solid rgba(255, 255, 255, .08); } .demo-chrome a.demo-back { color: #e5e7eb; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .demo-chrome a.demo-back:hover { color: #fff; } .demo-chrome .demo-pill { display: inline-flex; align-items: center; gap: .4rem; background: rgba(16, 185, 129, .15); color: #6ee7b7; border: 1px solid rgba(16, 185, 129, .35); border-radius: 999px; padding: .25rem .7rem; font-size: .72rem; letter-spacing: .02em; } .demo-chrome .demo-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); } @media print { .demo-chrome { display: none; } } /* Shared building blocks -------------------------------------------------- */ .sk-wrap { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } .sk-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 700; color: var(--accent); } .sk-h1 { font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; margin: .4rem 0 .6rem; font-weight: 800; letter-spacing: -.02em; } .sk-lead { font-size: 1.1rem; color: #475569; max-width: 44ch; } @media (prefers-color-scheme: dark) { .sk-lead { color: #94a3b8; } } .sk-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; } .sk-tags span { font-size: .74rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); } .sk-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.6rem; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; padding: .8rem 1.4rem; border-radius: .7rem; box-shadow: 0 12px 30px -12px var(--accent); } .sk-section { margin-top: 2.4rem; } .sk-section h2 { font-size: 1.3rem; font-weight: 700; margin: 0 0 .5rem; letter-spacing: -.01em; } .sk-section p { color: #475569; margin: 0 0 .6rem; } @media (prefers-color-scheme: dark) { .sk-section p { color: #94a3b8; } } .sk-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; } .sk-bullets li { position: relative; padding-left: 1.6rem; } .sk-bullets li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .sk-figure { margin: 1rem 0 0; border-radius: 1rem; overflow: hidden; border: 1px solid rgba(148,163,184,.25); box-shadow: 0 30px 60px -30px rgba(15,23,42,.35); } .sk-figure img { display: block; width: 100%; height: auto; } /* ── skin: hero-split ─────────────────────────────────────────────────── */ [data-skin="hero-split"] .sk-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; } [data-skin="hero-split"] .sk-hero-art { aspect-ratio: 4/3; border-radius: 1.25rem; background: var(--hero) center/cover no-repeat, linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #0f172a)); box-shadow: 0 40px 80px -40px rgba(15,23,42,.5); border: 1px solid rgba(255,255,255,.15); } @media (max-width: 860px) { [data-skin="hero-split"] .sk-hero { grid-template-columns: 1fr; } } /* ── skin: editorial ─────────────────────────────────────────────────── */ [data-skin="editorial"] .skin-body, [data-skin="editorial"] { } [data-skin="editorial"] .sk-h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; } [data-skin="editorial"] .sk-hero-art { height: 52vh; margin: 1.5rem 0 2rem; border-radius: 1rem; background: var(--hero) center/cover no-repeat, linear-gradient(135deg, var(--accent), #1e293b); } [data-skin="editorial"] .sk-wrap { max-width: 780px; } [data-skin="editorial"] .sk-section h2 { font-family: "Fraunces", Georgia, serif; } /* ── skin: dashboard-frame ───────────────────────────────────────────── */ [data-skin="dashboard-frame"] .sk-wrap { max-width: 1240px; } [data-skin="dashboard-frame"] .sk-app { display: grid; grid-template-columns: 220px 1fr; min-height: 70vh; border: 1px solid rgba(148,163,184,.25); border-radius: 1rem; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -50px rgba(15,23,42,.4); } @media (prefers-color-scheme: dark) { [data-skin="dashboard-frame"] .sk-app { background: #0f172a; } } [data-skin="dashboard-frame"] .sk-rail { background: color-mix(in srgb, var(--accent) 14%, #0f172a); color: #e2e8f0; padding: 1.2rem; } [data-skin="dashboard-frame"] .sk-rail b { color: #fff; } [data-skin="dashboard-frame"] .sk-rail a { display: block; color: #cbd5e1; text-decoration: none; padding: .5rem .6rem; border-radius: .5rem; font-size: .88rem; } [data-skin="dashboard-frame"] .sk-rail a.on, [data-skin="dashboard-frame"] .sk-rail a:hover { background: rgba(255,255,255,.12); color: #fff; } [data-skin="dashboard-frame"] .sk-main { padding: 1.6rem; } [data-skin="dashboard-frame"] .sk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; } [data-skin="dashboard-frame"] .sk-kpi { border: 1px solid rgba(148,163,184,.25); border-radius: .8rem; padding: 1rem; } [data-skin="dashboard-frame"] .sk-kpi b { font-size: 1.6rem; display: block; } @media (max-width: 720px) { [data-skin="dashboard-frame"] .sk-app { grid-template-columns: 1fr; } [data-skin="dashboard-frame"] .sk-rail { display: none; } } /* ── skin: device-mock ───────────────────────────────────────────────── */ [data-skin="device-mock"] .sk-stage { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; } [data-skin="device-mock"] .sk-phone { border: 12px solid #0f172a; border-radius: 2.5rem; background: #fff; aspect-ratio: 9/19; overflow: hidden; box-shadow: 0 50px 90px -40px rgba(15,23,42,.55); background-image: var(--hero); background-size: cover; background-position: center; } @media (max-width: 860px) { [data-skin="device-mock"] .sk-stage { grid-template-columns: 1fr; } [data-skin="device-mock"] .sk-phone { max-width: 320px; margin: 0 auto; } } /* ── skin: flow-canvas ───────────────────────────────────────────────── */ [data-skin="flow-canvas"] .sk-wrap { max-width: 1240px; } [data-skin="flow-canvas"] .sk-flow { display: grid; grid-template-columns: 260px 1fr 320px; gap: 1.25rem; } [data-skin="flow-canvas"] .sk-panel { border: 1px solid rgba(148,163,184,.25); border-radius: 1rem; padding: 1.1rem; background: #fff; } @media (prefers-color-scheme: dark) { [data-skin="flow-canvas"] .sk-panel { background: #0f172a; } } [data-skin="flow-canvas"] .sk-canvas { background: radial-gradient(circle at 1px 1px, rgba(148,163,184,.35) 1px, transparent 0) 0 0 / 22px 22px, #fff; border-radius: 1rem; border: 1px solid rgba(148,163,184,.25); padding: 1.5rem; min-height: 60vh; } @media (prefers-color-scheme: dark) { [data-skin="flow-canvas"] .sk-canvas { background-color: #0f172a; } } [data-skin="flow-canvas"] .sk-node { border: 2px solid var(--accent); border-radius: .8rem; padding: .7rem .9rem; background: color-mix(in srgb, var(--accent) 8%, #fff); margin-bottom: 1.4rem; max-width: 280px; transition: box-shadow .2s, transform .2s; } [data-skin="flow-canvas"] .sk-node.on { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); transform: translateY(-2px); } @media (max-width: 980px) { [data-skin="flow-canvas"] .sk-flow { grid-template-columns: 1fr; } } /* ── skin: console-dark ──────────────────────────────────────────────── */ [data-skin="console-dark"] .skin-body, [data-skin="console-dark"].skin-body { background: #0b1020; color: #e2e8f0; } [data-skin="console-dark"] .sk-lead { color: #94a3b8; } [data-skin="console-dark"] .sk-console { font-family: ui-monospace, "SF Mono", Menlo, monospace; background: #0f172a; border: 1px solid #1e293b; border-radius: .8rem; padding: 1.2rem; margin-top: 1.5rem; } [data-skin="console-dark"] .sk-console .ln { display: block; padding: .1rem 0; } [data-skin="console-dark"] .sk-console .ok { color: #4ade80; } [data-skin="console-dark"] .sk-console .warn { color: #fbbf24; } /* ── skin: kanban-board ──────────────────────────────────────────────── */ [data-skin="kanban-board"] .sk-wrap { max-width: 1300px; } [data-skin="kanban-board"] .sk-cols { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: 1rem; } [data-skin="kanban-board"] .sk-col { background: color-mix(in srgb, var(--accent) 6%, #f1f5f9); border-radius: .9rem; padding: .9rem; } @media (prefers-color-scheme: dark) { [data-skin="kanban-board"] .sk-col { background: #111827; } } [data-skin="kanban-board"] .sk-col h3 { margin: 0 0 .7rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: #64748b; } [data-skin="kanban-board"] .sk-card { background: #fff; border: 1px solid rgba(148,163,184,.25); border-radius: .6rem; padding: .7rem .8rem; margin-bottom: .6rem; box-shadow: 0 2px 6px -2px rgba(15,23,42,.15); } @media (prefers-color-scheme: dark) { [data-skin="kanban-board"] .sk-card { background: #0f172a; } }