1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="_card.css" />
6 <style>
7 .stack {
8 display: flex;
9 flex-direction: column;
10 gap: 2px;
11 border-radius: 8px;
12 overflow: hidden;
13 border: 1px solid var(--alc-hairline);
14 }
15 .layer {
16 padding: 14px 18px;
17 display: flex;
18 align-items: center;
19 justify-content: space-between;
20 font-family: var(--alc-font-mono);
21 font-size: 12px;
22 }
23 .layer.dark {
24 color: var(--alc-fg-invert);
25 }
26 .layer.light {
27 color: var(--alc-fg-1);
28 }
29 .n {
30 font-weight: 500;
31 }
32 .h {
33 opacity: 0.65;
34 }
35 .desc {
36 font-family: var(--alc-font-sans);
37 font-size: 12px;
38 opacity: 0.75;
39 }
40 </style>
41 </head>
42 <body>
43 <div class="card">
44 <div class="stack">
45 <div class="layer light" style="background: #f5efe3">
46 <span class="n">--alc-bg</span
47 ><span class="desc">page / parchment</span
48 ><span class="h">#F5EFE3</span>
49 </div>
50 <div class="layer light" style="background: #efe7d6">
51 <span class="n">--alc-bg-nav</span
52 ><span class="desc">nav, sidebar</span><span class="h">#EFE7D6</span>
53 </div>
54 <div class="layer light" style="background: #fbf6ea">
55 <span class="n">--alc-bg-elev-1</span
56 ><span class="desc">cards, panels</span><span class="h">#FBF6EA</span>
57 </div>
58 <div class="layer light" style="background: #fffaf0">
59 <span class="n">--alc-bg-elev-2</span
60 ><span class="desc">hover / nested</span
61 ><span class="h">#FFFAF0</span>
62 </div>
63 <div class="layer light" style="background: #ebe3d0">
64 <span class="n">--alc-bg-sunk</span><span class="desc">insets</span
65 ><span class="h">#EBE3D0</span>
66 </div>
67 <div class="layer dark" style="background: #2a2620">
68 <span class="n">--alc-bg-code</span
69 ><span class="desc">terminal / code</span
70 ><span class="h">#2A2620</span>
71 </div>
72 </div>
73 </div>
74 </body>
75</html>