@layer components { .weigh-ask { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-xs); margin-block-end: var(--space-s); label { flex: 1 1 10em; min-inline-size: 0; } span { display: block; margin-block-end: var(--space-2xs); color: var(--muted); font-size: var(--step-00); font-weight: 700; letter-spacing: 0.02em; } label input { inline-size: 100%; min-block-size: var(--touch); padding: 0.55em 0.65em; border: thin solid color-mix(in oklch, var(--ink) 22%, var(--mist)); border-radius: var(--radius-s); background: var(--cream); } .btn { margin: 0; flex: 0 1 6em; } } .open-day, .diary-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); .btn { margin: 0; } input[type="date"] { appearance: auto; min-block-size: var(--touch); font-size: 1rem; } } .open-day { margin-block: var(--space-xs) var(--space-m); } .diary-pages { margin-block-start: var(--space-m); container-type: inline-size; justify-content: center; /* Narrow: each wrapped row fills the width — no ragged edges, bigger targets. */ > * { flex: 1 1 auto; justify-content: center; } a { display: inline-flex; align-items: center; text-decoration: none; &[aria-current="page"] { background: color-mix(in oklch, var(--paprika) 32%, var(--dusk)); } } .diary-jump { display: inline-flex; align-items: center; } .diary-jump input[type="date"] { inline-size: 100%; min-inline-size: 0; } } /* Wide enough for one relaxed row: natural widths instead of filled bars. */ @container (min-width: 28rem) { .diary-pages > * { flex: 0 0 auto; } .diary-pages .diary-jump input[type="date"] { inline-size: auto; } } .day { position: relative; background: var(--cream); border: thin solid color-mix(in oklch, var(--ink) 16%, var(--mist)); border-radius: var(--radius); overflow: clip; scroll-margin-block: 5rem; min-inline-size: 0; margin-block-end: var(--space-m); .day-head { padding: var(--space-xs) var(--space-s) var(--space-s); background: var(--dusk); color: var(--cream); border-start-start-radius: var(--radius); border-start-end-radius: var(--radius); .day-benefit { font-weight: 600; letter-spacing: 0; &.is-high { color: color-mix(in oklch, var(--sage) 40%, var(--cream)); } &.is-mid { color: var(--cream); } &.is-low { color: color-mix(in oklch, var(--over) 42%, var(--cream)); } } } &:has(.day-foot) .composer { border-end-start-radius: 0; border-end-end-radius: 0; } } @media (max-width: 40rem) { .day { margin-inline: calc(-1 * var(--gutter)); border-inline: 0; border-block-start: 0; border-radius: 0; .day-head { border-start-start-radius: 0; border-start-end-radius: 0; } .composer { border-end-start-radius: 0; border-end-end-radius: 0; } } } .day-foot { display: flex; justify-content: center; padding: var(--space-s); background: var(--paper); border-block-start: thin solid var(--mist); .btn { margin: 0; font-variant-numeric: tabular-nums; } .close-day { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2xs); padding: var(--space-s) var(--space-m); font-size: var(--step-0); text-align: center; .brand-mark { inline-size: 9rem; block-size: 9rem; } } } /* Closing firework: a fixed point at the button, sparks flying out on * one keyframe. The burst is appended to so the day morph cannot * cut it short. Palette and flight math stay here; JS only sets --n / --r. */ .spark-burst { --sparks: 28; --c0: oklch(0.72 0.22 34); --c1: oklch(0.78 0.2 78); --c2: oklch(0.7 0.18 145); --c3: oklch(0.68 0.24 12); --c4: oklch(0.8 0.2 55); --c5: oklch(0.75 0.22 200); --c6: oklch(0.82 0.18 95); --c7: oklch(0.7 0.24 350); position: fixed; z-index: 30; inline-size: 0; block-size: 0; pointer-events: none; b { position: absolute; inset: -1.1rem; border-radius: 50%; background: radial-gradient( circle, oklch(0.95 0.12 85 / 0.95) 0%, oklch(0.78 0.22 34 / 0.55) 40%, transparent 70% ); animation: spark-flash 0.45s ease-out forwards; } i { --angle: calc(360deg / var(--sparks) * var(--n) + var(--r) * 20deg - 10deg); --dist: calc(4.5rem + var(--r) * 6.5rem); --size: calc(0.35rem + var(--r) * 0.45rem); --spin: calc(var(--r) * 360deg - 180deg); position: absolute; inset-block-start: calc(var(--size) / -2); inset-inline-start: calc(var(--size) / -2); inline-size: var(--size); block-size: var(--size); border-radius: 50%; background: var(--spark, var(--c0)); box-shadow: 0 0 0.55rem var(--spark, var(--c0)); animation: spark-fly 0.85s cubic-bezier(0.12, 0.7, 0.35, 1) forwards; animation-delay: calc(var(--r) * 0.1s); /* First child is the flash ; sparks start at 2. */ &:nth-child(8n + 2) { --spark: var(--c0); } &:nth-child(8n + 3) { --spark: var(--c1); } &:nth-child(8n + 4) { --spark: var(--c2); } &:nth-child(8n + 5) { --spark: var(--c3); } &:nth-child(8n + 6) { --spark: var(--c4); } &:nth-child(8n + 7) { --spark: var(--c5); } &:nth-child(8n + 8) { --spark: var(--c6); } &:nth-child(8n + 9) { --spark: var(--c7); } /* Every third spark is a streak. */ &:nth-child(3n + 2) { inline-size: calc(var(--size) * 0.45); block-size: calc(var(--size) * 1.8); border-radius: 40%; } } } @keyframes spark-flash { 0% { opacity: 0; scale: 0.2; } 25% { opacity: 1; scale: 1.35; } 100% { opacity: 0; scale: 2.2; } } @keyframes spark-fly { 0% { opacity: 0; translate: 0 0; scale: 0.35; rotate: calc(var(--angle) + 90deg); } 12% { opacity: 1; scale: 1.35; } 55% { opacity: 1; } 100% { opacity: 0; scale: 0.55; rotate: calc(var(--angle) + 90deg + var(--spin)); translate: calc(cos(var(--angle)) * var(--dist)) calc(sin(var(--angle)) * var(--dist)); } } @media (prefers-reduced-motion: reduce) { .spark-burst { display: none; } } }