26 lines
1.3 KiB
HTML
26 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Elevation — Atmospheric Shadows</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 28px; box-sizing: border-box; display: flex; gap: 22px; font-family: var(--font-sans); align-items: center; }
|
|
.cell { flex: 1; text-align: center; }
|
|
.box { margin: 0 auto 10px; width: 120px; height: 90px; background: #fffcf7; border-radius: 12px; }
|
|
.s1 { box-shadow: 0 12px 32px -12px rgba(56,56,49,0.06); }
|
|
.s2 { box-shadow: 0 24px 48px -16px rgba(56,56,49,0.05), 0 4px 12px -4px rgba(56,56,49,0.04); }
|
|
.s3 { box-shadow: 0 40px 64px -24px rgba(56,56,49,0.08), 0 8px 16px -6px rgba(56,56,49,0.04); }
|
|
.k { font-size: 12px; font-weight: 600; color: var(--on-surface); }
|
|
.v { font-size: 11px; color: var(--on-surface-variant); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card" style="background:#f6f4ec">
|
|
<div class="cell"><div class="box s1"></div><div class="k">ambient</div><div class="v">cards · 6% warm</div></div>
|
|
<div class="cell"><div class="box s2"></div><div class="k">float</div><div class="v">popovers</div></div>
|
|
<div class="cell"><div class="box s3"></div><div class="k">modal</div><div class="v">overlays</div></div>
|
|
</div>
|
|
</body>
|
|
</html>
|