/* stamp: cloned from Manodo Home 10 Stamp.dc.html. Generated by tools/clone.js. */
/* The brief's own ground, which is what the design was drawn on.
*
* Two vocabularies on purpose. The brief's markup reads its own names (--desk,
* --bord, --papermut); the site's chrome, the shared sections appended under
* the brief, hover states and focus outlines read the site's names
* (--accent-ink, --on-accent, --line-2, --well). The first cut of this block
* carried only the brief's names, and every consumer of the other vocabulary
* quietly resolved to nothing: hovers that never changed, buttons whose text
* did not paint, wells with no ground. A palette is only a palette here if
* BOTH vocabularies resolve, and the site's names are derived from the brief's
* own values so the two cannot disagree.
*
* Deliberately NOT :root-scoped. On a normal page these attributes sit on the
* html element and nothing changes; on the sampler, one page carries all seven
* themes at once, each section wrapped in a div bearing its own theme's
* data-design and data-palette, and custom properties cascade from whatever
* element defines them. :root would have pinned every theme's colours to the
* one document. */
[data-design="stamp"][data-palette="own"] {
--paper: #FFFDF5;
--ink: #101010;
--accent: #D62828;
--accent2: #F58A8A;
--desk: #F1EFE7;
--line: #E2E1DA;
--bord: #C1BFB9;
--faint: #B3B1AC;
--strike: #9F9E99;
--mut: #5C5C59;
--soft: #454442;
--papermut: #BCBBB5;
--pmut2: #969590;
--stone: #DEDCD5;
--inkline: #2F2F2E;
--glass: rgba(255,253,245,0.94);
--scrim: rgba(16,16,16,0.72);
--paper-2: color-mix(in srgb, var(--paper) 55%, var(--desk));
--paper-3: var(--desk);
--well: var(--stone);
--well-dim: color-mix(in srgb, var(--stone) 82%, var(--ink));
--ink-2: var(--inkline);
--line-2: var(--bord);
--accent-2: var(--accent2);
--accent-ink: var(--accent);
--on-accent: var(--paper);
}
/* The brief's own base rules, which lived in its and were otherwise
lost with it: the desk tone outside the sheet, and plain ink links that turn
accent on hover. Scoped to the cloned surfaces (the chrome and the brief's
own unclassed sections); the shared sections keep the site's styling, and
anything the brief set inline still wins outright. */
:root[data-design="stamp"] body { background: var(--paper-3); }
[data-design="stamp"] :is(header, footer, section:not([class])) a { color: var(--ink); text-decoration: none; }
[data-design="stamp"] :is(header, footer, section:not([class])) a:hover { color: var(--accent); }
/* The same names, driven by whichever of the 24 palettes is chosen, so the
colour switcher works on cloned markup without touching a single style="". */
[data-design="stamp"]:not([data-palette="own"]) {
--accent2: var(--accent-2);
--desk: var(--paper-3);
--bord: var(--line-2);
--papermut: var(--faint);
--pmut2: var(--strike);
--inkline: var(--ink-2);
--glass: color-mix(in srgb, var(--paper) 94%, transparent);
--scrim: color-mix(in srgb, var(--ink) 72%, transparent);
}
/* style-hover="..." is an authoring attribute no browser implements. These are
the brief's own hover declarations, moved into rules that actually fire. */
[data-design="stamp"] .dc-stamp-h0:hover { background: var(--accent); color: var(--paper) }
[data-design="stamp"] .dc-stamp-h1:hover { background: var(--accent); color: var(--paper) }
[data-design="stamp"] .dc-stamp-h2:hover { background: var(--ink); color: var(--paper) }
[data-design="stamp"] .dc-stamp-h3:hover { background: var(--accent); color: var(--paper) }
[data-design="stamp"] .dc-stamp-h4:hover { background: var(--accent2) }
/* The ambient layer: above the sheet's own ground, below everything on it. */
[data-design="stamp"] .dc-orn {
position: absolute; inset: 0; overflow: hidden;
pointer-events: none; z-index: -1;
}
/* An inserted ornament band clips its own overhang so a vine that runs off the
edge cannot widen the page. */
[data-design="stamp"] .dc-ins { overflow: hidden; }
[data-design="stamp"] .dc-orn .bloom span {
--spin: 48s !important;
animation-timing-function: steps(12, end);
}
/* -- ambient: the ratchet ---------------------------------------------------
The floor already puts the two blooms on a twelve step turn. This adds the
second hand: the bands inside each mandala advance on their own step count,
so the drawing never settles into one wheel turning. */
[data-design="stamp"] .dc-orn .bloom svg .mz {
animation: dc-stamp-ratchet 96s steps(8, end) infinite;
animation-duration: calc(96s + var(--band, 0) * 24s);
}
[data-design="stamp"] .dc-orn .bloom svg .mz--b1,
[data-design="stamp"] .dc-orn .bloom svg .mz--b3 { animation-direction: reverse; }
[data-design="stamp"] .dc-orn .bloom svg .mz-rings {
animation: dc-stamp-flick 5.4s steps(2, jump-none) infinite;
}
/* -- ambient: the travelling stroke -----------------------------------------
A bel is one continuous line, and the engine sets pathLength 1000 on it, so
a body shorter than the path walks the whole way along on dashoffset alone.
Stepped, so the creeper advances in notches like a plate walking a repeat. */
[data-design="stamp"] .dc-orn .dc-stamp-vine {
position: absolute; left: -6%; width: 112%; display: block;
opacity: calc(.9 * var(--pattern-intensity, 1));
}
[data-design="stamp"] .dc-orn .dc-stamp-vine--hi { top: 12%; }
[data-design="stamp"] .dc-orn .dc-stamp-vine--lo { top: 68%; transform: scaleX(-1); }
[data-design="stamp"] .dc-orn .dc-stamp-vine .kl-line {
stroke-dasharray: 300 1000;
animation: dc-stamp-travel 22s steps(28, end) infinite;
}
[data-design="stamp"] .dc-orn .dc-stamp-vine--lo .kl-line { animation-delay: -11s; }
[data-design="stamp"] .dc-orn .dc-stamp-vine .kl-line--under { animation-delay: -.8s; }
/* -- ambient: the corners --------------------------------------------------- */
[data-design="stamp"] .dc-orn .dc-stamp-konia {
position: absolute; display: block;
width: clamp(72px, 11vw, 168px); aspect-ratio: 1;
opacity: calc(.1 * var(--pattern-intensity, 1));
animation: dc-stamp-press 13s steps(3, jump-none) infinite;
}
[data-design="stamp"] .dc-orn .dc-stamp-konia svg { width: 100%; height: 100%; display: block; }
[data-design="stamp"] .dc-orn .dc-stamp-konia--tl { top: 10px; left: 10px; }
[data-design="stamp"] .dc-orn .dc-stamp-konia--br { bottom: 10px; right: 10px; animation-delay: -6.5s; }
@keyframes dc-stamp-ratchet { to { transform: rotate(360deg); } }
@keyframes dc-stamp-flick { 0% { opacity: .4; } 100% { opacity: .95; } }
@keyframes dc-stamp-press { 0% { scale: .94; } 100% { scale: 1.03; } }
@keyframes dc-stamp-travel { from { stroke-dashoffset: 1300; } to { stroke-dashoffset: -1000; } }
/* -- insert: the leheriya strip ---------------------------------------------
Full bleed, because the band above it is full bleed. Isolated, because the
engine's tiling SVG sits at z-index -1 and without a stacking context of its
own it would sink past the sheet's ground. */
[data-design="stamp"] .dc-stamp-leh {
position: relative; isolation: isolate; line-height: 0;
height: clamp(24px, 3.4vw, 42px);
background: var(--paper);
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
}
[data-design="stamp"] .dc-stamp-leh .pat--wave {
opacity: calc(.9 * var(--pattern-intensity, 1));
animation: dc-stamp-slide 5.6s steps(8, end) infinite;
}
@keyframes dc-stamp-slide { to { transform: translate3d(-132px, 0, 0); } }
/* -- insert: the row of buti stamps -----------------------------------------
Seven different marks, each landing on its own beat. The scale comes down
from well above one and overshoots below it before settling, which is what a
rubber stamp does against a desk, and the settle is stepped so the recovery
reads as a bounce rather than a cushion. */
[data-design="stamp"] .dc-stamp-buti {
display: flex; flex-wrap: wrap; justify-content: space-between;
align-items: center; gap: clamp(8px, 1.6vw, 20px);
padding: clamp(16px, 2.2vw, 26px) clamp(16px, 2.6vw, 36px);
background: var(--paper);
border-bottom: 1px solid var(--line);
}
[data-design="stamp"] .dc-stamp-buti__u {
display: block; width: clamp(34px, 5.4vw, 62px); aspect-ratio: 1;
opacity: 1;
transform-origin: 50% 88%;
animation: dc-stamp-thump 8.4s cubic-bezier(.9, 0, 1, 1) infinite;
}
[data-design="stamp"] .dc-stamp-buti__u svg { width: 100%; height: 100%; display: block; }
[data-design="stamp"] .dc-stamp-buti__u:nth-child(1) { animation-delay: 0s; }
[data-design="stamp"] .dc-stamp-buti__u:nth-child(2) { animation-delay: .18s; }
[data-design="stamp"] .dc-stamp-buti__u:nth-child(3) { animation-delay: .36s; }
[data-design="stamp"] .dc-stamp-buti__u:nth-child(4) { animation-delay: .54s; }
[data-design="stamp"] .dc-stamp-buti__u:nth-child(5) { animation-delay: .72s; }
[data-design="stamp"] .dc-stamp-buti__u:nth-child(6) { animation-delay: .9s; }
[data-design="stamp"] .dc-stamp-buti__u:nth-child(7) { animation-delay: 1.08s; }
@keyframes dc-stamp-thump {
0% { transform: scale(2.1); opacity: 0; }
3% { transform: scale(2.1); opacity: 0; }
4% { transform: scale(.86); opacity: 1; }
6% { transform: scale(1.08); opacity: 1; }
8% { transform: scale(.97); opacity: 1; }
10% { transform: scale(1); opacity: 1; }
86% { transform: scale(1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
/* The inserted bands are foreground ornament, so the global halt on .dc-orn
does not reach them. They stop here. */
@media (prefers-reduced-motion: reduce) {
[data-design="stamp"] .dc-stamp-leh .pat--wave,
[data-design="stamp"] .dc-stamp-buti__u {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
[data-design="stamp"] .dc-orn .dc-stamp-vine .kl-line,
[data-design="stamp"] .dc-orn .dc-stamp-konia,
[data-design="stamp"] .dc-orn .bloom svg .mz,
[data-design="stamp"] .dc-orn .bloom svg .mz-rings {
animation: none !important;
stroke-dashoffset: 0 !important;
scale: 1 !important;
}
}