87 lines
3.9 KiB
HTML
87 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<!-- @dsCard group="Brand" name="Shadows & Elevation" subtitle="Flat — bg+border elevation, interactive card demo" viewport="700x220" -->
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<style>
|
|
body { margin: 0; padding: 16px 20px; background: var(--bg-page); font-family: var(--font-body); }
|
|
.section-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-subtle); }
|
|
.section { margin-bottom: 20px; }
|
|
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
|
|
|
|
/* Elevation via bg + border only */
|
|
.surface {
|
|
border-radius: var(--radius-md); padding: 12px 14px;
|
|
font-family: var(--font-mono); font-size: 10px; width: 120px;
|
|
transition: background var(--transition-hover), border-color var(--transition-hover);
|
|
}
|
|
.surface-label { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 4px; }
|
|
.surface-token { color: var(--fg-caption); }
|
|
|
|
.elev-page { background: var(--bg-page); border: none; }
|
|
.elev-card { background: var(--bg-surface); border: 1px solid var(--border); }
|
|
.elev-hover { background: var(--bg-surface); border: 1px solid var(--gold-dim); cursor: pointer; }
|
|
.elev-active { background: var(--bg-active); border: 1px solid var(--gold-dim); cursor: pointer; }
|
|
.elev-overlay { background: var(--bg-shell);border: 1px solid var(--gold-dim); }
|
|
|
|
/* Interactive card demo */
|
|
.demo-card {
|
|
background: var(--bg-surface); border: 1px solid var(--border);
|
|
border-radius: var(--radius-md); padding: 14px 16px; width: 160px;
|
|
cursor: pointer;
|
|
transition: background var(--transition-hover), border-color var(--transition-hover);
|
|
}
|
|
.demo-card:hover { border-color: var(--gold-dim); background: var(--bg-surface); }
|
|
.demo-card:active {
|
|
background: var(--bg-active); border-color: var(--gold-dim);
|
|
transition: background var(--transition-press), border-color var(--transition-press);
|
|
}
|
|
.demo-card-title { font-weight: 700; font-size: 13px; color: var(--fg-heading); margin-bottom: 3px; }
|
|
.demo-card-sub { font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="section">
|
|
<div class="section-label">Elevation — bg + border only · no drop shadows</div>
|
|
<div class="row">
|
|
<div>
|
|
<div class="surface elev-page"><div class="surface-label">Page</div><div class="surface-token">bg0 · no border</div></div>
|
|
</div>
|
|
<div>
|
|
<div class="surface elev-card"><div class="surface-label">Card / raised</div><div class="surface-token">bg1 · --border</div></div>
|
|
</div>
|
|
<div>
|
|
<div class="surface elev-hover"><div class="surface-label">Hover</div><div class="surface-token">bg1 · gold-dim</div></div>
|
|
</div>
|
|
<div>
|
|
<div class="surface elev-active"><div class="surface-label">Active / press</div><div class="surface-token">bg2 · gold-dim</div></div>
|
|
</div>
|
|
<div>
|
|
<div class="surface elev-overlay"><div class="surface-label">Overlay / modal</div><div class="surface-token">bg-hard · gold-dim</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" style="margin:0">
|
|
<div class="section-label">Interactive card — hover and press to see state changes</div>
|
|
<div class="row">
|
|
<div class="demo-card">
|
|
<div class="demo-card-title">Node Alpha</div>
|
|
<div class="demo-card-sub">99.97% · us-east-1</div>
|
|
</div>
|
|
<div style="font-family:var(--font-mono);font-size:10px;color:var(--fg-muted);line-height:1.8;padding-top:4px">
|
|
Default: bg1 + --border<br>
|
|
Hover: bg1 + gold-dim border<br>
|
|
Press: bg2 + gold-dim border<br>
|
|
<br>
|
|
No shadow at any state.<br>
|
|
Focus: 2px gold outline.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|