first-commit
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
ci / Validate workspace (push) Has been cancelled
landing-page-ci / Validate landing page (push) Has been cancelled
landing-page-deploy / Deploy landing page (push) Has been cancelled
github-metrics / Generate repository metrics SVG (push) Has been cancelled
refresh-contributors-wall / Refresh contributors wall cache bust (push) Waiting to run
This commit is contained in:
Zakaria
@@ -0,0 +1,338 @@
|
||||
<!doctype html>
|
||||
<!--
|
||||
OD web-prototype seed.
|
||||
|
||||
Copy this file to <project>/index.html, then fill `<main id="content">` by
|
||||
pasting blocks from `references/layouts.md`. Every class referenced in
|
||||
layouts.md is defined here — DO NOT remove unused ones unless you also
|
||||
remove their callers, and DO NOT invent new global classes (use inline
|
||||
style="…" for one-off tweaks).
|
||||
|
||||
Theme tokens at the top of `<style>` are the *only* place to set palette
|
||||
and type. They map cleanly onto a DESIGN.md — when an active design system
|
||||
is injected, swap these six variables and everything reflows.
|
||||
-->
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>[REPLACE] Page title · brand</title>
|
||||
<style>
|
||||
/* ─── tokens ─────────────────────────────────────────────────────────
|
||||
Six variables. Bind them to the active DESIGN.md and stop.
|
||||
Do not introduce raw hex anywhere else in this file. */
|
||||
:root {
|
||||
--bg: #fafaf7; /* page background — never #fff */
|
||||
--surface: #ffffff; /* cards, modals, raised areas */
|
||||
--fg: #1a1916; /* primary text — never #000 */
|
||||
--muted: #6b6964; /* secondary text, captions */
|
||||
--border: #e8e5df; /* hairlines, dividers */
|
||||
--accent: #c96442; /* one accent — used at most 2× per screen */
|
||||
|
||||
/* derived — do not change */
|
||||
--accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
|
||||
--fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
|
||||
|
||||
/* type — display = serif (default), body = sans, mono for numerics */
|
||||
--font-display: 'Iowan Old Style', 'Charter', Georgia, 'Times New Roman', serif;
|
||||
--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
|
||||
--font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
|
||||
|
||||
/* scale — clamp() so it works at 1280, 1440, 1920 without media queries */
|
||||
--fs-h1: clamp(44px, 6vw, 76px);
|
||||
--fs-h2: clamp(32px, 4vw, 48px);
|
||||
--fs-h3: 22px;
|
||||
--fs-lead: 19px;
|
||||
--fs-body: 16px;
|
||||
--fs-meta: 13px;
|
||||
|
||||
/* spacing — 8-point grid */
|
||||
--gap-xs: 8px;
|
||||
--gap-sm: 12px;
|
||||
--gap-md: 20px;
|
||||
--gap-lg: 32px;
|
||||
--gap-xl: 56px;
|
||||
--gap-2xl: 96px;
|
||||
--container: 1120px;
|
||||
--gutter: 32px;
|
||||
|
||||
--radius: 10px;
|
||||
--radius-lg: 16px;
|
||||
}
|
||||
|
||||
/* ─── reset & base ──────────────────────────────────────────────── */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html { -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--fs-body);
|
||||
line-height: 1.55;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
img, svg { display: block; max-width: 100%; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button { font: inherit; cursor: pointer; }
|
||||
p { text-wrap: pretty; }
|
||||
h1, h2, h3, h4 { text-wrap: balance; }
|
||||
|
||||
/* ─── layout primitives ─────────────────────────────────────────── */
|
||||
.container {
|
||||
max-width: var(--container);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--gutter);
|
||||
}
|
||||
.section {
|
||||
padding-block: clamp(48px, 8vw, var(--gap-2xl));
|
||||
}
|
||||
.section + .section { border-top: 1px solid var(--border); }
|
||||
.stack { display: flex; flex-direction: column; }
|
||||
.stack > * + * { margin-top: var(--gap-md); }
|
||||
.row { display: flex; align-items: center; gap: var(--gap-md); }
|
||||
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
|
||||
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
|
||||
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
|
||||
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
|
||||
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }
|
||||
.grid-1-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--gap-xl); align-items: start; }
|
||||
@media (max-width: 920px) {
|
||||
.grid-2, .grid-3, .grid-4, .grid-2-1, .grid-1-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
|
||||
/* ─── type ──────────────────────────────────────────────────────── */
|
||||
.h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.04; letter-spacing: -0.02em; margin: 0; }
|
||||
.h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
|
||||
.h3, h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; margin: 0; }
|
||||
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 60ch; margin: 0; }
|
||||
.eyebrow {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--accent);
|
||||
margin: 0 0 var(--gap-md);
|
||||
}
|
||||
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
|
||||
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* ─── chrome: nav + footer ──────────────────────────────────────── */
|
||||
.topnav {
|
||||
position: sticky; top: 0; z-index: 10;
|
||||
background: color-mix(in oklch, var(--bg) 92%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
|
||||
.topnav .logo { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
|
||||
.topnav nav { display: flex; gap: var(--gap-lg); }
|
||||
.topnav nav a { font-size: 14px; color: var(--muted); }
|
||||
.topnav nav a:hover { color: var(--fg); }
|
||||
.pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: 13px; border-top: 1px solid var(--border); }
|
||||
.pagefoot .row-between { flex-wrap: wrap; gap: var(--gap-md); }
|
||||
|
||||
/* ─── buttons ───────────────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; gap: 8px;
|
||||
padding: 11px 20px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid transparent;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.005em;
|
||||
transition: transform 0.05s ease, background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn-primary { background: var(--accent); color: var(--surface); border-color: var(--accent); }
|
||||
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, black); }
|
||||
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
|
||||
.btn-secondary:hover { border-color: var(--fg); }
|
||||
.btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 8px; }
|
||||
.btn-ghost:hover { color: var(--accent); }
|
||||
.btn-arrow::after { content: '→'; transition: transform 0.15s ease; }
|
||||
.btn-arrow:hover::after { transform: translateX(2px); }
|
||||
|
||||
/* ─── card / surface ────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 28px;
|
||||
}
|
||||
.card-flat { background: transparent; border: 0; padding: 0; }
|
||||
.card-rule { background: transparent; border: 0; border-top: 1px solid var(--fg); padding: 24px 0 0; border-radius: 0; }
|
||||
|
||||
/* ─── feature cell (icon + h3 + p) ──────────────────────────────── */
|
||||
.feature .feature-mark {
|
||||
width: 36px; height: 36px;
|
||||
display: grid; place-items: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
color: var(--accent);
|
||||
margin-bottom: var(--gap-md);
|
||||
}
|
||||
.feature .feature-mark svg { width: 18px; height: 18px; }
|
||||
.feature h3 { margin-bottom: 6px; }
|
||||
.feature p { margin: 0; color: var(--muted); font-size: 15px; }
|
||||
|
||||
/* ─── stat (big number + label) ─────────────────────────────────── */
|
||||
.stat .stat-num {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(56px, 8vw, 96px);
|
||||
line-height: 0.95;
|
||||
letter-spacing: -0.04em;
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.stat .stat-label { color: var(--muted); font-size: 14px; margin-top: 8px; max-width: 24ch; }
|
||||
.stat .stat-unit { font-size: 0.5em; opacity: 0.7; margin-left: 2px; }
|
||||
|
||||
/* ─── quote / testimonial ───────────────────────────────────────── */
|
||||
.quote {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(24px, 2.6vw, 32px);
|
||||
line-height: 1.32;
|
||||
letter-spacing: -0.01em;
|
||||
max-width: 28ch;
|
||||
}
|
||||
.quote-author { color: var(--muted); font-size: 14px; margin-top: var(--gap-md); }
|
||||
.quote-mark {
|
||||
font-family: var(--font-display);
|
||||
font-size: 140px; line-height: 0.7;
|
||||
color: var(--accent); opacity: 0.18;
|
||||
margin-bottom: -28px;
|
||||
}
|
||||
|
||||
/* ─── pill / badge / tag ────────────────────────────────────────── */
|
||||
.pill {
|
||||
display: inline-flex; align-items: center; gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
border-radius: 999px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.tag {
|
||||
display: inline-flex; align-items: center;
|
||||
padding: 4px 10px;
|
||||
background: transparent;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ─── form field ────────────────────────────────────────────────── */
|
||||
.field { display: flex; flex-direction: column; gap: 6px; }
|
||||
.field label { font-size: 13px; color: var(--muted); }
|
||||
.input, .textarea {
|
||||
width: 100%;
|
||||
padding: 11px 14px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
}
|
||||
.input:focus, .textarea:focus {
|
||||
outline: 2px solid var(--accent-soft);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
|
||||
|
||||
/* ─── table (data-style, no chrome) ─────────────────────────────── */
|
||||
.ds-table { width: 100%; border-collapse: collapse; font-size: 14px; }
|
||||
.ds-table th, .ds-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); }
|
||||
.ds-table th { color: var(--muted); font-weight: 500; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
|
||||
.ds-table tbody tr:hover { background: var(--fg-soft); }
|
||||
.ds-table .num-col { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
|
||||
|
||||
/* ─── image placeholder (DS-tinted block, never broken <img>) ──── */
|
||||
.ph-img {
|
||||
background:
|
||||
linear-gradient(135deg, var(--accent-soft), var(--fg-soft)),
|
||||
var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
aspect-ratio: 16 / 10;
|
||||
display: grid; place-items: center;
|
||||
color: var(--muted);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.ph-img.square { aspect-ratio: 1 / 1; }
|
||||
.ph-img.portrait { aspect-ratio: 3 / 4; }
|
||||
.ph-img.wide { aspect-ratio: 16 / 9; }
|
||||
|
||||
/* ─── divider ───────────────────────────────────────────────────── */
|
||||
.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }
|
||||
.rule-strong { border: 0; border-top: 1px solid var(--fg); margin: 0; }
|
||||
|
||||
/* ─── hero variants used by layouts.md ──────────────────────────── */
|
||||
.hero { padding-block: clamp(80px, 12vw, 160px); }
|
||||
.hero-center { text-align: center; max-width: 32ch; margin-inline: auto; }
|
||||
.hero h1 { margin-bottom: var(--gap-md); }
|
||||
.hero .lead { margin-bottom: var(--gap-lg); }
|
||||
.hero-cta { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; }
|
||||
.hero-center .hero-cta { justify-content: center; }
|
||||
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-2xl); align-items: center; }
|
||||
@media (max-width: 920px) { .hero-split { grid-template-columns: 1fr; } }
|
||||
|
||||
/* ─── log row (newsletter, blog list, changelog) ────────────────── */
|
||||
.log-row { display: grid; grid-template-columns: 120px 1fr 100px; gap: var(--gap-lg); padding: 22px 0; border-top: 1px solid var(--border); align-items: baseline; }
|
||||
.log-row .meta { color: var(--muted); }
|
||||
.log-row h3 { font-size: 19px; }
|
||||
.log-row .pull { text-align: right; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="topnav" data-od-id="topnav">
|
||||
<div class="container topnav-inner">
|
||||
<span class="logo">[REPLACE] Brand</span>
|
||||
<nav>
|
||||
<a href="#">[REPLACE] Link 1</a>
|
||||
<a href="#">[REPLACE] Link 2</a>
|
||||
<a href="#">[REPLACE] Link 3</a>
|
||||
</nav>
|
||||
<button class="btn btn-primary">[REPLACE] CTA</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="content">
|
||||
<!--
|
||||
┌─────────────────────────────────────────────────────────────────┐
|
||||
│ PASTE LAYOUTS FROM references/layouts.md HERE. │
|
||||
│ ► Each layout block is a self-contained `<section>` — │
|
||||
│ drop in 3–6 of them per page. │
|
||||
│ ► Always lead with one hero (Layout 1 or 2). │
|
||||
│ ► End with a CTA strip + footer (Layout 6 / footer below). │
|
||||
└─────────────────────────────────────────────────────────────────┘
|
||||
-->
|
||||
<section class="section hero" data-od-id="hero">
|
||||
<div class="container hero-center">
|
||||
<p class="eyebrow">[REPLACE] Eyebrow</p>
|
||||
<h1>[REPLACE] One sharp sentence about what this is.</h1>
|
||||
<p class="lead">[REPLACE] One subhead sentence — concrete value, not a tagline.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn btn-primary">[REPLACE] Primary CTA</button>
|
||||
<button class="btn btn-secondary">[REPLACE] Secondary</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="pagefoot" data-od-id="footer">
|
||||
<div class="container row-between">
|
||||
<span>© [REPLACE] Brand · [REPLACE] Year</span>
|
||||
<span class="meta">[REPLACE] tagline · contact@example.com</span>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user