and on the cards without a single !important. Cards are matched by the shape they actually have in this codebase (`bg-white` + `rounded-xl`/`2xl`/`3xl`), because there is no card class to hook. That is good enough to compare grounds; it is not a theme system. Numbering is sparse, and the 76* family shares a prefix: same ground, same graph, ten different answers to foreground vs background. */ [data-design] { --dp-page-color: #f1f5f9; --dp-page-image: none; --dp-page-size: auto; --dp-page-position: 0 0; --dp-page-attachment: fixed; --dp-page-repeat: repeat; --dp-card: #ffffff; --dp-card-border: #e2e8f0; /* Three separate jobs, because one downward shadow cannot do all of them: `ring` is the full-perimeter hairline that makes an edge findable on every side, `top` an extra line above the top edge for concepts that want it stated outright, `shadow` the elevation. */ --dp-card-ring: rgb(15 23 42 / 0.10); --dp-card-top: transparent; --dp-card-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 12px 28px -18px rgb(15 23 42 / 0.24); --dp-card-filter: none; --dp-header: #ffffff; --dp-header-border: #e2e8f0; } /* The ground is painted on , not on

's box ends where its content ends, so anything anchored to the bottom was clipped there instead of reaching the bottom of the screen, and `background-size: 100% 100%` meant "as tall as main", not "as tall as the viewport". On the root element it is the canvas that gets painted, so `fixed` + `100% 100%` is exactly the screen. and

are then cleared, or their own bg-slate-100 covers it. */ [data-design] { background-color: var(--dp-page-color); background-image: var(--dp-page-image); background-size: var(--dp-page-size); background-position: var(--dp-page-position); background-repeat: var(--dp-page-repeat); background-attachment: var(--dp-page-attachment); } [data-design] body, [data-design] main { background: transparent; } /* Clearing

exposed the ghost-card decks. They are real app markup — `.deck-shuffle` on the concept-card and question pages, `.deck-wobble-*` on login — sitting at `-z-30/-z-20/-z-10` inside a wrapper that establishes no stacking context. A negative-z-index descendant paints below the background of the nearest ancestor stacking context, which is the root, so

's opaque bg-slate-100 is what normally covers them. Take that away and the tilted pile appears from behind every card. So hide them: this spike is about grounds, and it must not change what the app looks like anywhere else. Restores parity with a plain page. */ [data-design] :is(.deck-shuffle, .deck-wobble-back, .deck-wobble-mid, .deck-wobble-front) { display: none; } [data-design] .bg-white { background-color: var(--dp-card); } [data-design] header.bg-white, [data-design] header .bg-white\/95 { background-color: var(--dp-header); border-color: var(--dp-header-border); } /* The ring is the fix for an invisible top edge. The learning card is `bg-white rounded-2xl shadow-[…]` with NO border class, so `border-color` was inert on it and the only definition it had was a downward-offset shadow — which leaves the top of the card with nothing at all. A spread shadow draws on every side, so the card starts somewhere no matter where the light comes from. `overflow-hidden` on the card does not clip this; box-shadow paints outside the box. */ [data-design] .bg-white:is(.rounded-xl, .rounded-2xl, .rounded-3xl):not(button):not(input):not(select):not(textarea) { border-color: var(--dp-card-border); box-shadow: 0 -1px 0 var(--dp-card-top), 0 0 0 1px var(--dp-card-ring), var(--dp-card-shadow); filter: var(--dp-card-filter); } /* The real-chart ground (74, 75, 76 and the 76* family): a full-viewport canvas behind the page. Negative z-index keeps it above the root background and below every in-flow element, so no stacking context has to be invented for it. `pointer-events: none` is the guarantee that there are no hover boxes — the canvas never receives a mouse event, so ECharts has nothing to answer with. Hiding the tooltip in the option is the belt; this is the braces. */ .design-chart-ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .design-chart-ground > div, .design-chart-ground__canvas { width: 100%; height: 100%; } /* ------------------------------------------------------------- patterns ---- */ /* 59 — Fine dot grid, brand-tinted */ [data-design="59"] { --dp-page-color: #faf9f8; --dp-page-image: radial-gradient(900px circle at 8% 2%, rgb(232 117 17 / 0.10), transparent 60%), radial-gradient(circle, rgb(27 42 74 / 0.045) 1px, transparent 1.2px); --dp-page-size: auto, 13px 13px; --dp-page-repeat: no-repeat, repeat; --dp-page-attachment: fixed, scroll; --dp-card-border: #e8e6e2; --dp-card-ring: rgb(15 23 42 / 0.10); --dp-card-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 12px 28px -18px rgb(15 23 42 / 0.24); } /* 64 — Twin orbs over a tight dot grid. The halo is the FIRST layer, so it paints over the grid and leaves the reading area plain. */ [data-design="64"] { --dp-page-color: #fbfaf9; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-border: #ece9e6; --dp-card-ring: rgb(60 40 60 / 0.11); --dp-card-shadow: 0 1px 2px rgb(60 40 60 / 0.06), 0 16px 36px -20px rgb(60 40 60 / 0.28); } /* 70 — The item types on a lattice: concept card, single choice, multiple choice, gap text, flip card. */ [data-design="70"] { --dp-page-color: #fbfbfa; --dp-page-image: radial-gradient(900px circle at 6% 4%, rgb(232 117 17 / 0.09), transparent 62%), radial-gradient(860px circle at 95% 95%, rgb(99 102 241 / 0.09), transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='288' height='288' viewBox='0 0 288 288'%3E%3Cg fill='none' color='rgb(27 42 74 / 0.075)' stroke='rgb(27 42 74 / 0.075)' stroke-width='1.03'%3E%3Cg transform='translate(29.4 29.4) scale(1.55)'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath stroke-linecap='round' d='M7 10h7M7 14h5'/%3E%3C/g%3E%3Cg transform='translate(125.4 29.4) scale(1.55)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4' fill='currentColor' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(221.4 29.4) scale(1.55)'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12.5l3 3 5-6.5'/%3E%3C/g%3E%3Cg transform='translate(29.4 125.4) scale(1.55)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 5h14M5 5v3M19 5v3M12 5v14M9 19h6'/%3E%3C/g%3E%3Cg transform='translate(125.4 125.4) scale(1.55)'%3E%3Crect x='3' y='5' width='14' height='10' rx='1.5'/%3E%3Crect x='7' y='9' width='14' height='10' rx='1.5'/%3E%3C/g%3E%3Cg transform='translate(221.4 125.4) scale(1.55)'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath stroke-linecap='round' d='M7 10h7M7 14h5'/%3E%3C/g%3E%3Cg transform='translate(29.4 221.4) scale(1.55)'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12.5l3 3 5-6.5'/%3E%3C/g%3E%3Cg transform='translate(125.4 221.4) scale(1.55)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4' fill='currentColor' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(221.4 221.4) scale(1.55)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 5h14M5 5v3M19 5v3M12 5v14M9 19h6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --dp-page-size: auto, auto, 288px 288px; --dp-page-repeat: no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, scroll; --dp-card-border: #e9e8e4; --dp-card-ring: rgb(15 23 42 / 0.11); /* A pattern needs a white mat: a shadow alone lets the lattice run right up to the card edge and the two read as one surface. */ --dp-card-shadow: 0 0 0 5px rgb(255 255 255 / 0.85), 0 2px 4px rgb(15 23 42 / 0.05), 0 16px 34px -18px rgb(15 23 42 / 0.24); } /* 71 — The same item types, small and dense */ [data-design="71"] { --dp-page-color: #fcfbf9; --dp-page-image: radial-gradient(880px circle at 50% -12%, rgb(232 117 17 / 0.09), transparent 62%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='228' height='228' viewBox='0 0 228 228'%3E%3Cg fill='none' color='rgb(27 42 74 / 0.065)' stroke='rgb(27 42 74 / 0.065)' stroke-width='1.39'%3E%3Cg transform='translate(24.2 24.2) scale(1.15)'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath stroke-linecap='round' d='M7 10h7M7 14h5'/%3E%3C/g%3E%3Cg transform='translate(100.2 24.2) scale(1.15)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4' fill='currentColor' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(176.2 24.2) scale(1.15)'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12.5l3 3 5-6.5'/%3E%3C/g%3E%3Cg transform='translate(24.2 100.2) scale(1.15)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 5h14M5 5v3M19 5v3M12 5v14M9 19h6'/%3E%3C/g%3E%3Cg transform='translate(100.2 100.2) scale(1.15)'%3E%3Crect x='3' y='5' width='14' height='10' rx='1.5'/%3E%3Crect x='7' y='9' width='14' height='10' rx='1.5'/%3E%3C/g%3E%3Cg transform='translate(176.2 100.2) scale(1.15)'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath stroke-linecap='round' d='M7 10h7M7 14h5'/%3E%3C/g%3E%3Cg transform='translate(24.2 176.2) scale(1.15)'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M8 12.5l3 3 5-6.5'/%3E%3C/g%3E%3Cg transform='translate(100.2 176.2) scale(1.15)'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4' fill='currentColor' stroke='none'/%3E%3C/g%3E%3Cg transform='translate(176.2 176.2) scale(1.15)'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 5h14M5 5v3M19 5v3M12 5v14M9 19h6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); --dp-page-size: auto, 228px 228px; --dp-page-repeat: no-repeat, repeat; --dp-page-attachment: fixed, scroll; --dp-card-border: #eae8e3; --dp-card-ring: rgb(15 23 42 / 0.11); --dp-card-shadow: 0 0 0 5px rgb(255 255 255 / 0.85), 0 2px 4px rgb(15 23 42 / 0.05), 0 16px 34px -18px rgb(15 23 42 / 0.24); } /* ----------------------------------------------------------- real chart ---- 74, 75, 76 and the 76* family draw no chart here: `_design_preview_chart.html.twig` renders the actual ECharts instance behind the page, off the member's own trend. These only supply the ground it sits on. How present the line is allowed to be comes from CHART_PRESENCE in the extension. */ /* 74 — Real chart over 64's ground, line at 42% */ [data-design="74"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-border: #ece9e6; --dp-card-ring: rgb(60 40 60 / 0.11); --dp-card-shadow: 0 1px 2px rgb(60 40 60 / 0.06), 0 16px 36px -20px rgb(60 40 60 / 0.28); } /* 75 — 74 quieter still: the orbs barely tint, the dots are almost gone and the line drops to 24%. */ [data-design="75"] { --dp-page-color: #fcfcfb; --dp-page-image: radial-gradient(960px 720px at 50% 28%, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0) 78%), radial-gradient(780px circle at 4% 2%, rgb(232 117 17 / 0.06), transparent 64%), radial-gradient(840px circle at 97% 96%, rgb(99 102 241 / 0.05), transparent 64%), radial-gradient(circle, rgb(27 42 74 / 0.022) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 16px 16px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-border: #eeecea; --dp-card-ring: rgb(60 40 60 / 0.10); --dp-card-shadow: 0 1px 2px rgb(60 40 60 / 0.05), 0 14px 32px -20px rgb(60 40 60 / 0.24); } /* 76 — 75's graph over 74's ground: the quieter line, the fuller ground. The baseline the 76* family varies. */ [data-design="76"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-border: #ece9e6; --dp-card-ring: rgb(60 40 60 / 0.11); --dp-card-shadow: 0 1px 2px rgb(60 40 60 / 0.06), 0 16px 36px -20px rgb(60 40 60 / 0.28); } /* ------------------------------------------- 76* — foreground vs background -- All ten are 76's ground and 76's graph. Only the card's separation changes, so flipping between them compares exactly one decision. */ /* 76a — Hairline only. No shadow at all. One crisp edge, and the card is a cut sheet rather than a raised one — the top reads as clearly as the bottom because nothing depends on a light direction. */ [data-design="76a"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.16); --dp-card-shadow: 0 0 #0000; --dp-card-border: transparent; } /* 76b — Contact shadow. Tight and dark, so the card sits ON the ground rather than floating over it. Reads at any size and never smears into the pattern. */ [data-design="76b"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.10); --dp-card-shadow: 0 1px 2px rgb(15 23 42 / 0.11), 0 3px 5px -1px rgb(15 23 42 / 0.07); --dp-card-border: transparent; } /* 76c — Two-tier elevation. A near shadow for the edge and a far one for the lift. The conventional answer, and the ring is what saves the top edge. */ [data-design="76c"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.08); --dp-card-shadow: 0 2px 4px rgb(15 23 42 / 0.07), 0 12px 24px -8px rgb(15 23 42 / 0.15); --dp-card-border: transparent; } /* 76d — Top edge drawn. The direct fix for a top edge you cannot find: a 1px line offset ABOVE the card. Light still falls from above, but the start of the card no longer depends on it. */ [data-design="76d"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.06); --dp-card-top: rgb(15 23 42 / 0.17); --dp-card-shadow: 0 10px 24px -12px rgb(15 23 42 / 0.22); --dp-card-border: transparent; } /* 76e — Far float. Wide, soft and low-contrast — the card is well above the ground. Airy, but the ring is doing nearly all the edge work. */ [data-design="76e"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.07); --dp-card-shadow: 0 2px 6px rgb(15 23 42 / 0.04), 0 28px 64px -26px rgb(15 23 42 / 0.34); --dp-card-border: transparent; } /* 76f — Navy shadow. The shadow is brand navy, not grey. On a warm ground a cool shadow separates by hue as well as value, which survives low contrast. */ [data-design="76f"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(27 42 74 / 0.13); --dp-card-shadow: 0 2px 4px rgb(27 42 74 / 0.09), 0 16px 34px -16px rgb(27 42 74 / 0.30); --dp-card-border: transparent; } /* 76g — Brighter card. Separation by luminance instead of by shadow: the ground steps down so the card is plainly the brightest surface. Costs the pale ground but needs almost no shadow. */ [data-design="76g"] { --dp-page-color: #f4f2ef; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card: #ffffff; --dp-card-ring: rgb(15 23 42 / 0.07); --dp-card-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 8px 20px -12px rgb(15 23 42 / 0.14); --dp-card-border: transparent; } /* 76h — Ground recedes. The ground darkens where the card sits, so the contrast is made behind the card rather than under it. The card itself stays flat. */ [data-design="76h"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(1100px 760px at 50% 26%, rgb(15 23 42 / 0.10), transparent 72%), radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.07); --dp-card-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 6px 14px -6px rgb(15 23 42 / 0.10); --dp-card-border: transparent; } /* 76i — Offset outline. A hard second outline down and right, like a printed rule. No blur anywhere, so nothing can wash out against a pattern. */ [data-design="76i"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.14); --dp-card-shadow: 5px 5px 0 -1px rgb(15 23 42 / 0.055), 0 1px 2px rgb(15 23 42 / 0.05); --dp-card-border: transparent; } /* 76j — White mat. A white mount around the card, the way a print is mounted before it is framed. Holds the card away from a patterned ground better than any shadow can. */ [data-design="76j"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.09); --dp-card-shadow: 0 0 0 6px rgb(255 255 255 / 0.88), 0 2px 4px rgb(15 23 42 / 0.05), 0 18px 38px -18px rgb(15 23 42 / 0.24); --dp-card-border: transparent; } /* 76k — 76c, smaller. 76c with the lift halved. Same two-tier idea, much less spread — on a pale ground the far shadow was most of what made the page feel hazy. */ [data-design="76k"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.09); --dp-card-shadow: 0 1px 2px rgb(15 23 42 / 0.06), 0 6px 12px -6px rgb(15 23 42 / 0.13); --dp-card-border: transparent; } /* 76l — 76c, smallest. One near shadow and the ring, nothing else. The least a card can have and still be a card. */ [data-design="76l"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.10); --dp-card-shadow: 0 1px 3px rgb(15 23 42 / 0.09); --dp-card-border: transparent; } /* 76m — drop-shadow, md. Tailwind drop-shadow-md in shape. Traces the silhouette rather than the box, so the rounded corners get a shadow that actually follows them instead of a blurred rectangle behind them. */ [data-design="76m"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.09); --dp-card-shadow: 0 0 #0000; --dp-card-filter: drop-shadow(0 2px 2px rgb(15 23 42 / 0.06)) drop-shadow(0 4px 3px rgb(15 23 42 / 0.07)); --dp-card-border: transparent; } /* 76n — drop-shadow, lg. Tailwind drop-shadow-lg in shape: two stacked steps rather than one big blur. Reads as depth at very low alpha, which is what a near-white ground needs. */ [data-design="76n"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(15 23 42 / 0.08); --dp-card-shadow: 0 0 #0000; --dp-card-filter: drop-shadow(0 4px 3px rgb(15 23 42 / 0.07)) drop-shadow(0 10px 8px rgb(15 23 42 / 0.04)); --dp-card-border: transparent; } /* 76o — drop-shadow, navy. The lg stack in brand navy. Cool shadow on a warm ground separates by hue as well as value, so it survives being this faint. */ [data-design="76o"] { --dp-page-color: #fcfbfa; --dp-page-image: radial-gradient(900px 680px at 50% 28%, rgb(255 255 255 / 0.90), rgb(255 255 255 / 0) 76%), radial-gradient(760px circle at 4% 2%, rgb(232 117 17 / 0.10), transparent 62%), radial-gradient(820px circle at 97% 96%, rgb(99 102 241 / 0.09), transparent 62%), radial-gradient(circle, rgb(27 42 74 / 0.035) 1px, transparent 1.2px); --dp-page-size: auto, auto, auto, 14px 14px; --dp-page-repeat: no-repeat, no-repeat, no-repeat, repeat; --dp-page-attachment: fixed, fixed, fixed, scroll; --dp-card-ring: rgb(27 42 74 / 0.11); --dp-card-shadow: 0 0 #0000; --dp-card-filter: drop-shadow(0 2px 2px rgb(27 42 74 / 0.08)) drop-shadow(0 8px 6px rgb(27 42 74 / 0.07)); --dp-card-border: transparent; }