27 lines
1.2 KiB
HTML
27 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Glass Overlay</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.stage { position: relative; height: 220px; background:
|
|
repeating-linear-gradient(180deg, #fffcf7 0 28px, #f6f4ec 28px 56px);
|
|
padding: 0; box-sizing: border-box; }
|
|
.glass { position: absolute; inset: 28px 36px; background: rgba(255,252,247,0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 12px; padding: 20px 24px; box-shadow: 0 24px 48px -16px rgba(56,56,49,0.05); }
|
|
.lab { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #9a8679; }
|
|
.t { font-family: var(--font-serif); font-size: 22px; color: #383831; margin: 6px 0 4px; }
|
|
.p { font-family: var(--font-sans); font-size: 13px; color: #5f5e5e; margin: 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="stage">
|
|
<div class="glass">
|
|
<div class="lab">Floating search · glass surface</div>
|
|
<div class="t">Ask the archive.</div>
|
|
<div class="p">80% surface · 16px backdrop blur · warm atmospheric shadow.</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|