nexu-io--open-design
wehub-resource-sync
138 行
5.9 KiB
HTML
138 行
5.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Webflow - Pitch deck</title>
|
|
<style>
|
|
:root {
|
|
--accent: #146ef5;
|
|
--accent-active: color-mix(in oklab, var(--accent), black 14%);
|
|
--accent-hover: #0055d4;
|
|
--accent-on: #ffffff;
|
|
--bg: #ffffff;
|
|
--border: #d8d8d8;
|
|
--border-soft: #ebebeb;
|
|
--container-gutter-desktop: 24px;
|
|
--container-gutter-phone: 12px;
|
|
--container-gutter-tablet: 16px;
|
|
--container-max: 1200px;
|
|
--danger: #ee1d36;
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--elev-flat: none;
|
|
--elev-raised: 0px 84px 24px rgba(0, 0, 0, 0), 0px 54px 22px rgba(0, 0, 0, 0.01), 0px 30px 18px rgba(0, 0, 0, 0.04), 0px 13px 13px rgba(0, 0, 0, 0.08), 0px 3px 7px rgba(0, 0, 0, 0.09);
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|
--fg: #080808;
|
|
--fg-2: #363636;
|
|
--focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 70%);
|
|
--font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
|
|
--font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
|
|
--font-mono: "Inconsolata", ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
|
|
--leading-body: 1.6;
|
|
--leading-tight: 1.04;
|
|
--meta: #ababab;
|
|
--motion-base: 200ms;
|
|
--motion-fast: 150ms;
|
|
--muted: #5a5a5a;
|
|
--radius-lg: 8px;
|
|
--radius-md: 4px;
|
|
--radius-pill: 9999px;
|
|
--radius-sm: 4px;
|
|
--section-y-desktop: 96px;
|
|
--section-y-phone: 48px;
|
|
--section-y-tablet: 64px;
|
|
--space-1: 4px;
|
|
--space-12: 48px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--success: #00d722;
|
|
--surface: #ffffff;
|
|
--surface-warm: var(--surface);
|
|
--text-2xl: 32px;
|
|
--text-3xl: 56px;
|
|
--text-4xl: 80px;
|
|
--text-base: 16px;
|
|
--text-lg: 20px;
|
|
--text-sm: 14px;
|
|
--text-xl: 24px;
|
|
--text-xs: 12px;
|
|
--tracking-display: -0.01em;
|
|
--warn: #ffae13;
|
|
}
|
|
:root {
|
|
--od-page-bg: #ffffff;
|
|
--od-surface: #ffffff;
|
|
--od-text: #080808;
|
|
--od-muted: #5a5a5a;
|
|
--od-border: #d8d8d8;
|
|
--od-accent: #146ef5;
|
|
--od-radius: 4px;
|
|
--od-font-body: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
|
|
--od-font-display: "WF Visual Sans Variable", "Inter", Arial, system-ui, sans-serif;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: var(--od-page-bg);
|
|
color: var(--od-text);
|
|
font-family: var(--od-font-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
a { color: inherit; }
|
|
.page { width: min(1100px, calc(100vw - 48px)); margin: 0 auto; padding: 72px 0; }
|
|
.eyebrow { color: var(--od-accent); font-size: 12px; font-weight: 750; letter-spacing: 0; text-transform: uppercase; }
|
|
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; }
|
|
h1, h2, h3, p { margin: 0; }
|
|
h1, h2, h3 { font-family: var(--od-font-display); letter-spacing: 0; line-height: 1.05; }
|
|
h1 { margin-top: 12px; font-size: 64px; }
|
|
h2 { font-size: 40px; }
|
|
h3 { font-size: 22px; }
|
|
.lead { margin-top: 18px; color: var(--od-muted); font-size: 20px; line-height: 1.55; }
|
|
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
|
|
.button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; border-radius: var(--od-radius); padding: 0 18px; font-weight: 750; text-decoration: none; border: 1px solid var(--od-border); }
|
|
.button.primary { background: var(--od-accent); border-color: var(--od-accent); color: #ffffff; }
|
|
.button.secondary { background: var(--od-surface); }
|
|
.panel, .card, .field, .slide, .email, .poster { border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-surface); }
|
|
.panel { padding: 24px; box-shadow: 0 24px 80px rgba(15, 17, 23, 0.08); }
|
|
.metric-grid, .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
|
|
.metric, .card { padding: 18px; }
|
|
.metric strong { display: block; font-size: 30px; line-height: 1; }
|
|
.metric span, .card p, .field span { color: var(--od-muted); font-size: 14px; line-height: 1.5; }
|
|
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
|
|
.chip { border: 1px solid var(--od-border); border-radius: 999px; padding: 8px 12px; color: var(--od-muted); }
|
|
input, textarea, select { width: 100%; min-height: 44px; border: 1px solid var(--od-border); border-radius: var(--od-radius); background: var(--od-page-bg); color: var(--od-text); font: inherit; padding: 10px 12px; }
|
|
label { display: grid; gap: 8px; color: var(--od-muted); font-size: 13px; font-weight: 700; }
|
|
@media (max-width: 820px) { .hero, .metric-grid, .card-grid { grid-template-columns: 1fr; } .page { width: min(100vw - 28px, 1100px); padding: 40px 0; } h1 { font-size: 42px; } h2 { font-size: 30px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="page">
|
|
<section class="hero">
|
|
<div>
|
|
<p class="eyebrow">Deck module</p>
|
|
<h1>Webflow Executive deck</h1>
|
|
<p class="lead">Slide-scale title, metric, and section patterns for presentation work.</p>
|
|
<div class="actions">
|
|
<a class="button primary" href="#">Continue</a>
|
|
<a class="button secondary" href="#">View details</a>
|
|
</div>
|
|
</div>
|
|
<article class="panel">
|
|
<p class="eyebrow">Preview</p>
|
|
<h3>Pitch deck</h3>
|
|
<p class="lead" style="font-size:16px">Bundled Open Design package for Webflow, derived from curated DESIGN.md, tokens.css, and components.html fixtures.</p>
|
|
<div class="card-grid" style="grid-template-columns:1fr 1fr">
|
|
<div class="field"><label>Primary input<input value="Webflow" /></label></div>
|
|
<div class="field"><label>Status<select><option>Ready</option><option>Draft</option></select></label></div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
</main>
|
|
</body>
|
|
</html>
|