are links here (real
navigation instead of prototype JS), so they pick up the UA underline that
.pill and .mcard already reset. */
.ftab, .header-badge, .nav-btn { text-decoration: none; }
/* Interaction polish: the frame is a poster, so keep it subtle. */
.nav-btn[disabled] { opacity: 0.4; cursor: default; }
.nav-btn[disabled]:hover { filter: none; }
.nav-btn[disabled]:active { transform: none; }
/* .ftab and .pill are left alone on purpose: both carry backdrop-filter in
their active state, and listing `transform` in a transition promotes them to
their own compositing layer, which makes the frosted fill sample an empty
backdrop and go flat. Only elements without backdrop-filter get the extra
transition. */
.modal__close, .day__check { transition: background 0.15s ease, border-color 0.15s ease, filter 0.15s ease, transform 0.15s ease; }
.btn { transition: filter 0.15s ease, transform 0.12s ease; }
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn[disabled]:hover { filter: none; }
.btn[disabled]:active { transform: none; }
/* @view-transition is a top-level rule and cannot be nested in @media, so the
reduced-motion case is handled by killing the snapshot animations instead. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none !important; }
}
/* "+N" counter closing the day cell's avatar grid when the team is bigger than
the 14 slots the design was drawn for. Without it a third and fourth row of
faces would spill over .day__note. */
.ava--more {
background: rgba(0, 0, 0, 0.55);
color: rgba(255, 255, 255, 0.9);
border-color: rgba(255, 255, 255, 0.75);
font-size: 10px;
}
/* ==========================================================================
MOTION LAYER
Appended, never woven into the pixel-matched sections above.
One hard constraint governs everything here: .nav-btn, .pill, .nav-divider,
.panel, .ftab--active and .modal__scrim all carry backdrop-filter, and
animating any ANCESTOR of those turns it into a backdrop root, which makes
the frosted fill sample an empty backdrop and go visibly flat. So .topnav,
.filter-tabs, .header-arrows, .panel and .modal-root are never animated —
only the frosted elements themselves, and leaves with nothing frosted inside.
Every animation settles on the exact design state (identity transform,
opacity 1) so the resting frame stays pixel-identical to the Figma frames.
========================================================================== */
:root {
/* Enter decelerates, exit accelerates; never linear. */
--dw-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--dw-ease-in: cubic-bezier(0.4, 0, 1, 1);
--dw-ease-std: cubic-bezier(0.4, 0, 0.2, 1);
--dw-ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
--dw-micro: 140ms; /* press / toggle feedback */
--dw-std: 260ms; /* hover, state change */
--dw-enter: 420ms; /* content arriving */
}
/* --------------------------------------------------------------------------
Loading skeleton
Reuses the real containers, so only fills and the shimmer live here.
-------------------------------------------------------------------------- */
.dw-skel {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
border-radius: 31px;
overflow: hidden;
}
html.dw-ready .dw-skel {
opacity: 0;
visibility: hidden;
transition: opacity 260ms var(--dw-ease-in), visibility 0s linear 260ms;
}
/* Same backstop as the content: a skeleton nothing can dismiss is worse than no
skeleton, so CSS alone retires it after 3s. */
html.dw-first:not(.dw-ready) .dw-skel { animation: dw-skel-timeout 4s steps(1, end) forwards; }
/* No JS: never show a skeleton that nothing can dismiss. And it is a
first-arrival device only - on later navigations the page is already marked
ready before it paints, so there is nothing to cover. */
html:not(.dw-js) .dw-skel,
html:not(.dw-first) .dw-skel { display: none; }
.dw-skel__box {
position: relative;
border-radius: 9px;
background: rgba(255, 255, 255, 0.055);
overflow: hidden;
}
/* One shared sweep, offset per item so the light travels across the grid
instead of every tile flashing in unison. */
.dw-skel__box::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.09) 50%,
rgba(255, 255, 255, 0) 80%);
transform: translateX(-100%);
animation: dw-shimmer 1500ms linear infinite;
animation-delay: calc(var(--i, 0) * -60ms);
}
@keyframes dw-shimmer {
to { transform: translateX(100%); }
}
@keyframes dw-hold {
0%, 99% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes dw-skel-timeout {
0%, 99% { opacity: 1; visibility: visible; }
100% { opacity: 0; visibility: hidden; }
}
/* the .stat chips borrow their own geometry; kill the coloured fills */
.dw-skel .stat { background: rgba(255, 255, 255, 0.055); border-radius: 14px; }
.dw-skel--h1 { position: absolute; left: 123px; top: 116px; width: 414px; height: 26px; }
.dw-skel--h2 { position: absolute; left: 123px; top: 152px; width: 262px; height: 26px; }
.dw-skel--card { border-radius: 9px; }
.dw-skel--wday { border-radius: 9px; height: 35px; }
.dw-skel--cell { border-radius: 9px; }
.dw-skel--tab { width: 74px; height: 46px; border-radius: 9999px; }
.dw-skel--tab-all { width: 168px; }
.dw-skel--head { position: absolute; left: 60px; top: 138px; width: 1542px; height: 30px; }
.dw-skel__rows {
position: absolute;
left: 60px;
top: 190px;
width: 1542px;
display: flex;
flex-direction: column;
gap: 6px;
}
.dw-skel--row { height: 80px; border-radius: 20px; flex: none; }
/* Chrome skeleton: title bar plus the three nav pills. Absolutely positioned
over the stage, so it never touches .topbar or the .topnav flex row. */
.dw-skel--frame {
position: absolute;
inset: 0;
border-radius: 0;
z-index: 4;
}
/* The frame skeleton sits over the lit background photo, not over the dark
panel, so a 5% white wash is invisible there. It borrows the pills' own
dark frosted tone instead. */
.dw-skel--frame .dw-skel__box { background: rgba(0, 0, 0, 0.42); }
.dw-skel--frame .dw-skel__box::after {
background: linear-gradient(100deg,
rgba(255, 255, 255, 0) 20%,
rgba(255, 255, 255, 0.13) 50%,
rgba(255, 255, 255, 0) 80%);
}
.dw-skel--title { position: absolute; left: 168px; top: 56px; width: 292px; height: 92px; border-radius: 14px; }
.dw-skel--navpill { position: absolute; top: 86px; height: 46px; border-radius: 9999px; }
.dw-skel--nav1 { left: 1322px; width: 176px; }
.dw-skel--nav2 { left: 1508px; width: 184px; --i: 1; }
.dw-skel--nav3 { left: 1714px; width: 46px; --i: 2; }
/* --------------------------------------------------------------------------
Entrance choreography
Gated on .dw-js so scripting-off never hides anything, and fired by
.dw-ready so the reveal starts the moment the skeleton leaves.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
html.dw-first:not(.dw-ready) .screen-title,
html.dw-first:not(.dw-ready) .header-side,
html.dw-first:not(.dw-ready) .pill,
html.dw-first:not(.dw-ready) .nav-divider,
html.dw-first:not(.dw-ready) .ov-heading,
html.dw-first:not(.dw-ready) .stat,
html.dw-first:not(.dw-ready) .mcard,
html.dw-first:not(.dw-ready) .rocket,
html.dw-first:not(.dw-ready) .wday,
html.dw-first:not(.dw-ready) .day,
html.dw-first:not(.dw-ready) .day--blank,
html.dw-first:not(.dw-ready) .ftab,
html.dw-first:not(.dw-ready) .res-head,
html.dw-first:not(.dw-ready) .row,
html.dw-first:not(.dw-ready) .sticker,
html.dw-first:not(.dw-ready) .brand-note {
/* Not a plain opacity:0. If dw-ready never lands - a stalled font, a JS
error, a browser that resolves document.fonts.ready differently - the
content must still appear rather than leaving a blank stage under a
skeleton. This holds it hidden, then reveals it on its own. */
animation: dw-hold 4s steps(1, end) forwards;
}
/* Staging: the frame arrives first, then the content it holds. Scoped to
.dw-first, so this plays once when the site is opened and never again on a
move between screens - repeating it there is what made the interface look
like it vanished and came back. */
html.dw-first.dw-ready .screen-title { animation: dw-rise-sm var(--dw-enter) var(--dw-ease-out) backwards; }
html.dw-first.dw-ready .header-side { animation: dw-rise-sm var(--dw-enter) var(--dw-ease-out) 60ms backwards; }
html.dw-first.dw-ready .pill,
html.dw-first.dw-ready .nav-divider { animation: dw-rise-sm var(--dw-enter) var(--dw-ease-out) backwards;
animation-delay: calc(40ms + var(--i, 0) * 45ms); }
html.dw-first.dw-ready .sticker,
html.dw-first.dw-ready .brand-note { animation: dw-fade 520ms var(--dw-ease-out) 220ms backwards; }
/* overview */
html.dw-first.dw-ready .ov-heading { animation: dw-rise var(--dw-enter) var(--dw-ease-out) 120ms backwards; }
html.dw-first.dw-ready .stat { animation: dw-pop 380ms var(--dw-ease-back) backwards;
animation-delay: calc(190ms + var(--i, 0) * 55ms); }
html.dw-first.dw-ready .mcard { animation: dw-rise var(--dw-enter) var(--dw-ease-out) backwards;
animation-delay: calc(300ms + var(--i, 0) * 26ms); }
/* Arc: the rocket drifts in along its own diagonal rather than straight up. */
html.dw-first.dw-ready .rocket { animation: dw-rocket 760ms var(--dw-ease-out) 260ms backwards; }
/* month — the grid fills row by row, so the eye reads it as a calendar */
html.dw-first.dw-ready .wday { animation: dw-rise-sm 360ms var(--dw-ease-out) backwards;
animation-delay: calc(var(--i, 0) * 34ms); }
html.dw-first.dw-ready .day,
html.dw-first.dw-ready .day--blank { animation: dw-rise-sm 340ms var(--dw-ease-out) backwards;
animation-delay: calc(220ms + var(--i, 0) * 11ms); }
/* summary */
html.dw-first.dw-ready .ftab { animation: dw-rise-sm 340ms var(--dw-ease-out) backwards;
animation-delay: calc(var(--i, 0) * 26ms); }
html.dw-first.dw-ready .res-head { animation: dw-fade 360ms var(--dw-ease-out) 220ms backwards; }
html.dw-first.dw-ready .row { animation: dw-rise var(--dw-enter) var(--dw-ease-out) backwards;
animation-delay: calc(280ms + var(--i, 0) * 44ms); }
/* Storytelling: the bar earns its length instead of appearing at full width. */
html.dw-first.dw-ready .row__fill { transform-origin: left center;
animation: dw-fill 720ms var(--dw-ease-out) backwards;
animation-delay: calc(420ms + var(--i, 0) * 44ms); }
}
@keyframes dw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-rise-sm { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dw-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dw-pop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } }
@keyframes dw-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dw-rocket { from { opacity: 0; transform: translate(26px, 34px) scale(0.965); }
to { opacity: 1; transform: none; } }
/* --------------------------------------------------------------------------
Micro-interactions
Each one answers "what does this communicate?" — feedback on press,
hierarchy on hover, state change on toggle. Nothing loops forever.
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
/* Press feedback. Squash keeps volume: as Y compresses, X gives a little. */
.btn:active { transform: scale(1.02, 0.94); }
.pill:active,
.ftab:active { transform: scale(0.975); }
.nav-btn:not([disabled]):active { transform: scale(0.92); }
.mcard:active { transform: translateY(-1px) scale(0.994); }
.day:active { transform: translateY(-1px) scale(0.995); }
/* Secondary action: the pin reacts to the card it is pinned to. */
.mcard__pin, .day__pin { transition: transform var(--dw-std) var(--dw-ease-back); }
.mcard:hover .mcard__pin { transform: rotate(-7deg) translateY(-1px); }
.day:hover .day__pin { transform: rotate(6deg) translateY(-1px); }
/* Participants lift together, with follow-through across the row. */
.avatars img, .avatars .ava { transition: transform var(--dw-std) var(--dw-ease-back); }
.day:hover .avatars img,
.day:hover .avatars .ava { transform: translateY(-2px); }
/* Leaderboard: the row lifts, the medal catches the light. Base rotation is
preserved — reordering these transforms sends the ribbon the wrong way. */
.row { transition: transform var(--dw-std) var(--dw-ease-out); }
.row:hover { transform: translateX(3px); }
.row__medal span, .row__thumb span { transition: transform var(--dw-std) var(--dw-ease-back); }
.row:hover .row__medal span { transform: rotate(-11.85deg) scale(1.07); }
.row:hover .row__thumb span { transform: rotate(-175.15deg) scaleY(-1) scale(1.09); }
.row__person img, .row__person .ava { transition: transform var(--dw-std) var(--dw-ease-back); }
.row:hover .row__person img,
.row:hover .row__person .ava { transform: scale(1.06); }
/* Day toggle: the tick pops on the way in, so marking a day feels landed. */
.day__check { transition: transform var(--dw-micro) var(--dw-ease-back),
background var(--dw-std) var(--dw-ease-std),
border-color var(--dw-std) var(--dw-ease-std); }
.day__check:active { transform: scale(0.86); }
.day__check--on img { animation: dw-tick 320ms var(--dw-ease-back) backwards; }
/* Modal participant rows */
.person { transition: background var(--dw-std) var(--dw-ease-std),
border-color var(--dw-std) var(--dw-ease-std),
transform var(--dw-micro) var(--dw-ease-back); }
.person:active { transform: scale(0.985); }
.person__tick { transition: background var(--dw-std) var(--dw-ease-std),
border-color var(--dw-std) var(--dw-ease-std); }
.person--on .person__tick img { animation: dw-tick 280ms var(--dw-ease-back) backwards; }
/* The modal's own enter/exit is driven by Alpine (see the day and login
partials), because a CSS animation here would fire once on page load while
the dialog is still hidden and never again on open. */
}
@keyframes dw-tick { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
/* --------------------------------------------------------------------------
Page transitions
boot.js tags each navigation with a type, so the motion carries one
consistent spatial model: into a month is forward, back to the year is back,
month stepping is sideways, and the two nav tabs simply cross-fade.
Exit accelerates away, enter decelerates in.
-------------------------------------------------------------------------- */
::view-transition-group(root) { animation-duration: 320ms; }
html:active-view-transition-type(dw-forward)::view-transition-old(root) {
animation: dw-vt-out-left 200ms var(--dw-ease-in) both;
}
html:active-view-transition-type(dw-forward)::view-transition-new(root) {
animation: dw-vt-in-right 340ms var(--dw-ease-out) both;
}
html:active-view-transition-type(dw-back)::view-transition-old(root) {
animation: dw-vt-out-right 190ms var(--dw-ease-in) both;
}
html:active-view-transition-type(dw-back)::view-transition-new(root) {
animation: dw-vt-in-left 320ms var(--dw-ease-out) both;
}
html:active-view-transition-type(dw-next)::view-transition-old(root) {
animation: dw-vt-out-left 180ms var(--dw-ease-in) both;
}
html:active-view-transition-type(dw-next)::view-transition-new(root) {
animation: dw-vt-in-right 300ms var(--dw-ease-out) both;
}
html:active-view-transition-type(dw-prev)::view-transition-old(root) {
animation: dw-vt-out-right 180ms var(--dw-ease-in) both;
}
html:active-view-transition-type(dw-prev)::view-transition-new(root) {
animation: dw-vt-in-left 300ms var(--dw-ease-out) both;
}
@keyframes dw-vt-out-left { to { opacity: 0; transform: translateX(-2.2%) scale(0.985); } }
@keyframes dw-vt-in-right { from { opacity: 0; transform: translateX(2.8%) scale(0.985); } }
@keyframes dw-vt-out-right { to { opacity: 0; transform: translateX(2.2%) scale(0.985); } }
@keyframes dw-vt-in-left { from { opacity: 0; transform: translateX(-2.8%) scale(0.985); } }
/* Modal enter/exit, applied by Alpine as classes on the sheet itself (the root
only cross-fades). Anticipation on the way in, faster and flatter on the way
out, because closing should not make the user wait. */
@media (prefers-reduced-motion: no-preference) {
.dw-anim-modal-in { animation: dw-modal-in 300ms var(--dw-ease-back); }
.dw-anim-modal-out { animation: dw-modal-out 180ms var(--dw-ease-in) forwards; }
}
@keyframes dw-modal-in { from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: none; } }
@keyframes dw-modal-out { from { opacity: 1; transform: none; }
to { opacity: 0; transform: translateY(6px) scale(0.99); } }
/* --------------------------------------------------------------------------
Modal dimming
The scrim lives inside .stage so the dialog, which is also in there, still
paints above it. But .stage is a scaled box, so inset:0 only ever covered the
design area and stopped at the letterbox edge. Growing it by the inverse of
the stage scale makes one layer that covers the whole viewport and dims the
calendar with it - two stacked layers would double-darken where they meet.
-------------------------------------------------------------------------- */
.modal__scrim {
inset: auto;
left: 50%;
top: 50%;
width: calc(100vw / var(--dw-scale, 1));
height: calc(100vh / var(--dw-scale, 1));
transform: translate(-50%, -50%);
}
/* The score chip's caps sat about 2.5px above the optical centre of its 35px
box. text-box cannot fix it: .row__score is a flex container and its text is
in an anonymous flex item the property never reaches. So the children are
nudged instead.
Only where trimming is supported, because the misalignment is Chrome-only
arithmetic: with hhea metrics Rex's line box is 1.0em, so centring a 20px box
in 35px puts the cap centre at 15px against a box centre of 17.5px. Firefox
uses win metrics, gets a 1.241em line box, and lands the cap centre at 17.47px
which is already right, so it must be left alone. */
/* The month badge is width:102px in the frame, which is exactly enough for the
single-digit case it was drawn with. "31 дня отмечено" needs about 103px
against the 97px left after the right padding, so the text escaped the green
pill. min-width keeps the drawn size for short labels and lets it grow only
when it has to; max-width stops it running past the card edge. */
.mcard__badge {
/* max-content, not auto. The text is an anonymous flex item, and shrink-to-fit
resolved it to 102.016px while the text itself needed 96px plus the 5px
right padding and 6px of border - 5px short, so it spilled past the left
edge. max-content sizes the box to what the text actually needs.
content-box is the other half of it: under the global border-box, width
sizes the OUTER box, so the 5px padding and 6px border ate into the text's
own allowance and it stayed 5px short however the width was expressed.
With content-box the text gets its full max-content and the padding and
border add around it.
Sizes are content-box now: min-width 91px is the frame's 102px minus the
11px of padding and border, and max-width 199px keeps the outer box inside
the 220px card with the 5px offset and a little clearance. */
width: auto;
min-width: 0;
max-width: 210px;
padding: 0 7px;
}
/* Same reasoning for the participants pill in a day cell: it already had a
min-width, but the count can reach three digits on a large team. */
.day__people { max-width: 130px; }
/* --------------------------------------------------------------------------
Optical centring of numerals in fixed-height chips
Rex's cap is 0.750em inside a 1.000em line box, so the 0.250em of descender
space it never uses sits inside the box and pushes the caps 2.5px above the
optical centre of a 35px chip. text-box cannot reach these: each one is a
flex container whose text lives in an anonymous flex item.
padding-top does reach them. With border-box the height is unchanged, the
content box shrinks, and centring inside it moves the caps down by half the
padding - 2.5px, which lands the cap centre exactly on the box centre.
Unconditional now. Before USE_TYPO_METRICS was set on the fonts, Firefox read
win metrics, got a 1.241em line box and happened to centre correctly, so this
would have broken it. With both engines on typo metrics they share the same
1.000em box and the same correction.
-------------------------------------------------------------------------- */
.stat__value { padding-top: 5px; }
.wday { padding-top: 5px; }
.row__score { padding-top: 5px; }
/* Same effect at PFDin's 0.689em cap in a 1.200em box, scaled to the 25px pill */
.day__people { padding-top: 2px; }
/* --------------------------------------------------------------------------
Stage scaling without JavaScript
The scale is normally set by the inline script in the layout. This is what
happens when that never runs - a script blocker, an injected CSP, an
extension that rewrites the page. Without it the 1920x1080 canvas renders at
natural size and gets cropped top and bottom, which is what a browser profile
with extensions was doing while the same machine was fine in incognito.
The canvas is 16:9, so above that aspect ratio the fit depends only on the
viewport height and below it only on the width. That makes it expressible as
stepped media queries. Every value is rounded DOWN, so the worst case is a few
px of extra letterbox rather than a single px of cropping.
Only applies while .dw-scaled is absent: the moment the script runs it sets
the exact value and this stands down. Frosted fills flatten under a var()
transform, which is a fair trade for a page that is otherwise unusable.
-------------------------------------------------------------------------- */
html:not(.dw-scaled) .stage { transform: scale(var(--dw-css-scale, 1)); }
/* wider than 16:9 - height decides */
@media (min-aspect-ratio: 16/9) {
@media (min-height: 360px) { html:not(.dw-scaled) { --dw-css-scale: 0.333; } }
@media (min-height: 380px) { html:not(.dw-scaled) { --dw-css-scale: 0.351; } }
@media (min-height: 400px) { html:not(.dw-scaled) { --dw-css-scale: 0.370; } }
@media (min-height: 420px) { html:not(.dw-scaled) { --dw-css-scale: 0.388; } }
@media (min-height: 440px) { html:not(.dw-scaled) { --dw-css-scale: 0.407; } }
@media (min-height: 460px) { html:not(.dw-scaled) { --dw-css-scale: 0.425; } }
@media (min-height: 480px) { html:not(.dw-scaled) { --dw-css-scale: 0.444; } }
@media (min-height: 500px) { html:not(.dw-scaled) { --dw-css-scale: 0.462; } }
@media (min-height: 520px) { html:not(.dw-scaled) { --dw-css-scale: 0.481; } }
@media (min-height: 540px) { html:not(.dw-scaled) { --dw-css-scale: 0.500; } }
@media (min-height: 560px) { html:not(.dw-scaled) { --dw-css-scale: 0.518; } }
@media (min-height: 580px) { html:not(.dw-scaled) { --dw-css-scale: 0.537; } }
@media (min-height: 600px) { html:not(.dw-scaled) { --dw-css-scale: 0.555; } }
@media (min-height: 620px) { html:not(.dw-scaled) { --dw-css-scale: 0.574; } }
@media (min-height: 640px) { html:not(.dw-scaled) { --dw-css-scale: 0.592; } }
@media (min-height: 660px) { html:not(.dw-scaled) { --dw-css-scale: 0.611; } }
@media (min-height: 680px) { html:not(.dw-scaled) { --dw-css-scale: 0.629; } }
@media (min-height: 700px) { html:not(.dw-scaled) { --dw-css-scale: 0.648; } }
@media (min-height: 720px) { html:not(.dw-scaled) { --dw-css-scale: 0.666; } }
@media (min-height: 740px) { html:not(.dw-scaled) { --dw-css-scale: 0.685; } }
@media (min-height: 760px) { html:not(.dw-scaled) { --dw-css-scale: 0.703; } }
@media (min-height: 780px) { html:not(.dw-scaled) { --dw-css-scale: 0.722; } }
@media (min-height: 800px) { html:not(.dw-scaled) { --dw-css-scale: 0.740; } }
@media (min-height: 820px) { html:not(.dw-scaled) { --dw-css-scale: 0.759; } }
@media (min-height: 840px) { html:not(.dw-scaled) { --dw-css-scale: 0.777; } }
@media (min-height: 860px) { html:not(.dw-scaled) { --dw-css-scale: 0.796; } }
@media (min-height: 880px) { html:not(.dw-scaled) { --dw-css-scale: 0.814; } }
@media (min-height: 900px) { html:not(.dw-scaled) { --dw-css-scale: 0.833; } }
@media (min-height: 920px) { html:not(.dw-scaled) { --dw-css-scale: 0.851; } }
@media (min-height: 940px) { html:not(.dw-scaled) { --dw-css-scale: 0.870; } }
@media (min-height: 960px) { html:not(.dw-scaled) { --dw-css-scale: 0.888; } }
@media (min-height: 980px) { html:not(.dw-scaled) { --dw-css-scale: 0.907; } }
@media (min-height: 1000px) { html:not(.dw-scaled) { --dw-css-scale: 0.925; } }
@media (min-height: 1020px) { html:not(.dw-scaled) { --dw-css-scale: 0.944; } }
@media (min-height: 1040px) { html:not(.dw-scaled) { --dw-css-scale: 0.962; } }
@media (min-height: 1060px) { html:not(.dw-scaled) { --dw-css-scale: 0.981; } }
@media (min-height: 1080px) { html:not(.dw-scaled) { --dw-css-scale: 1.000; } }
@media (min-height: 1100px) { html:not(.dw-scaled) { --dw-css-scale: 1.018; } }
@media (min-height: 1120px) { html:not(.dw-scaled) { --dw-css-scale: 1.037; } }
@media (min-height: 1140px) { html:not(.dw-scaled) { --dw-css-scale: 1.055; } }
@media (min-height: 1160px) { html:not(.dw-scaled) { --dw-css-scale: 1.074; } }
@media (min-height: 1180px) { html:not(.dw-scaled) { --dw-css-scale: 1.092; } }
@media (min-height: 1200px) { html:not(.dw-scaled) { --dw-css-scale: 1.111; } }
@media (min-height: 1220px) { html:not(.dw-scaled) { --dw-css-scale: 1.129; } }
@media (min-height: 1240px) { html:not(.dw-scaled) { --dw-css-scale: 1.148; } }
@media (min-height: 1260px) { html:not(.dw-scaled) { --dw-css-scale: 1.166; } }
@media (min-height: 1280px) { html:not(.dw-scaled) { --dw-css-scale: 1.185; } }
@media (min-height: 1300px) { html:not(.dw-scaled) { --dw-css-scale: 1.203; } }
@media (min-height: 1320px) { html:not(.dw-scaled) { --dw-css-scale: 1.222; } }
@media (min-height: 1340px) { html:not(.dw-scaled) { --dw-css-scale: 1.240; } }
@media (min-height: 1360px) { html:not(.dw-scaled) { --dw-css-scale: 1.259; } }
@media (min-height: 1380px) { html:not(.dw-scaled) { --dw-css-scale: 1.277; } }
@media (min-height: 1400px) { html:not(.dw-scaled) { --dw-css-scale: 1.296; } }
@media (min-height: 1420px) { html:not(.dw-scaled) { --dw-css-scale: 1.314; } }
@media (min-height: 1440px) { html:not(.dw-scaled) { --dw-css-scale: 1.333; } }
@media (min-height: 1460px) { html:not(.dw-scaled) { --dw-css-scale: 1.351; } }
@media (min-height: 1480px) { html:not(.dw-scaled) { --dw-css-scale: 1.370; } }
@media (min-height: 1500px) { html:not(.dw-scaled) { --dw-css-scale: 1.388; } }
@media (min-height: 1520px) { html:not(.dw-scaled) { --dw-css-scale: 1.407; } }
@media (min-height: 1540px) { html:not(.dw-scaled) { --dw-css-scale: 1.425; } }
@media (min-height: 1560px) { html:not(.dw-scaled) { --dw-css-scale: 1.444; } }
@media (min-height: 1580px) { html:not(.dw-scaled) { --dw-css-scale: 1.462; } }
@media (min-height: 1600px) { html:not(.dw-scaled) { --dw-css-scale: 1.481; } }
}
/* narrower than 16:9 - width decides */
@media (max-aspect-ratio: 16/9) {
@media (min-width: 320px) { html:not(.dw-scaled) { --dw-css-scale: 0.166; } }
@media (min-width: 350px) { html:not(.dw-scaled) { --dw-css-scale: 0.182; } }
@media (min-width: 380px) { html:not(.dw-scaled) { --dw-css-scale: 0.197; } }
@media (min-width: 410px) { html:not(.dw-scaled) { --dw-css-scale: 0.213; } }
@media (min-width: 440px) { html:not(.dw-scaled) { --dw-css-scale: 0.229; } }
@media (min-width: 470px) { html:not(.dw-scaled) { --dw-css-scale: 0.244; } }
@media (min-width: 500px) { html:not(.dw-scaled) { --dw-css-scale: 0.260; } }
@media (min-width: 530px) { html:not(.dw-scaled) { --dw-css-scale: 0.276; } }
@media (min-width: 560px) { html:not(.dw-scaled) { --dw-css-scale: 0.291; } }
@media (min-width: 590px) { html:not(.dw-scaled) { --dw-css-scale: 0.307; } }
@media (min-width: 620px) { html:not(.dw-scaled) { --dw-css-scale: 0.322; } }
@media (min-width: 650px) { html:not(.dw-scaled) { --dw-css-scale: 0.338; } }
@media (min-width: 680px) { html:not(.dw-scaled) { --dw-css-scale: 0.354; } }
@media (min-width: 710px) { html:not(.dw-scaled) { --dw-css-scale: 0.369; } }
@media (min-width: 740px) { html:not(.dw-scaled) { --dw-css-scale: 0.385; } }
@media (min-width: 770px) { html:not(.dw-scaled) { --dw-css-scale: 0.401; } }
@media (min-width: 800px) { html:not(.dw-scaled) { --dw-css-scale: 0.416; } }
@media (min-width: 830px) { html:not(.dw-scaled) { --dw-css-scale: 0.432; } }
@media (min-width: 860px) { html:not(.dw-scaled) { --dw-css-scale: 0.447; } }
@media (min-width: 890px) { html:not(.dw-scaled) { --dw-css-scale: 0.463; } }
@media (min-width: 920px) { html:not(.dw-scaled) { --dw-css-scale: 0.479; } }
@media (min-width: 950px) { html:not(.dw-scaled) { --dw-css-scale: 0.494; } }
@media (min-width: 980px) { html:not(.dw-scaled) { --dw-css-scale: 0.510; } }
@media (min-width: 1010px) { html:not(.dw-scaled) { --dw-css-scale: 0.526; } }
@media (min-width: 1040px) { html:not(.dw-scaled) { --dw-css-scale: 0.541; } }
@media (min-width: 1070px) { html:not(.dw-scaled) { --dw-css-scale: 0.557; } }
@media (min-width: 1100px) { html:not(.dw-scaled) { --dw-css-scale: 0.572; } }
@media (min-width: 1130px) { html:not(.dw-scaled) { --dw-css-scale: 0.588; } }
@media (min-width: 1160px) { html:not(.dw-scaled) { --dw-css-scale: 0.604; } }
@media (min-width: 1190px) { html:not(.dw-scaled) { --dw-css-scale: 0.619; } }
@media (min-width: 1220px) { html:not(.dw-scaled) { --dw-css-scale: 0.635; } }
@media (min-width: 1250px) { html:not(.dw-scaled) { --dw-css-scale: 0.651; } }
@media (min-width: 1280px) { html:not(.dw-scaled) { --dw-css-scale: 0.666; } }
@media (min-width: 1310px) { html:not(.dw-scaled) { --dw-css-scale: 0.682; } }
@media (min-width: 1340px) { html:not(.dw-scaled) { --dw-css-scale: 0.697; } }
@media (min-width: 1370px) { html:not(.dw-scaled) { --dw-css-scale: 0.713; } }
@media (min-width: 1400px) { html:not(.dw-scaled) { --dw-css-scale: 0.729; } }
@media (min-width: 1430px) { html:not(.dw-scaled) { --dw-css-scale: 0.744; } }
@media (min-width: 1460px) { html:not(.dw-scaled) { --dw-css-scale: 0.760; } }
@media (min-width: 1490px) { html:not(.dw-scaled) { --dw-css-scale: 0.776; } }
@media (min-width: 1520px) { html:not(.dw-scaled) { --dw-css-scale: 0.791; } }
@media (min-width: 1550px) { html:not(.dw-scaled) { --dw-css-scale: 0.807; } }
@media (min-width: 1580px) { html:not(.dw-scaled) { --dw-css-scale: 0.822; } }
@media (min-width: 1610px) { html:not(.dw-scaled) { --dw-css-scale: 0.838; } }
@media (min-width: 1640px) { html:not(.dw-scaled) { --dw-css-scale: 0.854; } }
@media (min-width: 1670px) { html:not(.dw-scaled) { --dw-css-scale: 0.869; } }
@media (min-width: 1700px) { html:not(.dw-scaled) { --dw-css-scale: 0.885; } }
@media (min-width: 1730px) { html:not(.dw-scaled) { --dw-css-scale: 0.901; } }
@media (min-width: 1760px) { html:not(.dw-scaled) { --dw-css-scale: 0.916; } }
@media (min-width: 1790px) { html:not(.dw-scaled) { --dw-css-scale: 0.932; } }
@media (min-width: 1820px) { html:not(.dw-scaled) { --dw-css-scale: 0.947; } }
@media (min-width: 1850px) { html:not(.dw-scaled) { --dw-css-scale: 0.963; } }
@media (min-width: 1880px) { html:not(.dw-scaled) { --dw-css-scale: 0.979; } }
@media (min-width: 1910px) { html:not(.dw-scaled) { --dw-css-scale: 0.994; } }
@media (min-width: 1940px) { html:not(.dw-scaled) { --dw-css-scale: 1.010; } }
@media (min-width: 1970px) { html:not(.dw-scaled) { --dw-css-scale: 1.026; } }
@media (min-width: 2000px) { html:not(.dw-scaled) { --dw-css-scale: 1.041; } }
@media (min-width: 2030px) { html:not(.dw-scaled) { --dw-css-scale: 1.057; } }
@media (min-width: 2060px) { html:not(.dw-scaled) { --dw-css-scale: 1.072; } }
@media (min-width: 2090px) { html:not(.dw-scaled) { --dw-css-scale: 1.088; } }
@media (min-width: 2120px) { html:not(.dw-scaled) { --dw-css-scale: 1.104; } }
@media (min-width: 2150px) { html:not(.dw-scaled) { --dw-css-scale: 1.119; } }
@media (min-width: 2180px) { html:not(.dw-scaled) { --dw-css-scale: 1.135; } }
@media (min-width: 2210px) { html:not(.dw-scaled) { --dw-css-scale: 1.151; } }
@media (min-width: 2240px) { html:not(.dw-scaled) { --dw-css-scale: 1.166; } }
@media (min-width: 2270px) { html:not(.dw-scaled) { --dw-css-scale: 1.182; } }
@media (min-width: 2300px) { html:not(.dw-scaled) { --dw-css-scale: 1.197; } }
@media (min-width: 2330px) { html:not(.dw-scaled) { --dw-css-scale: 1.213; } }
@media (min-width: 2360px) { html:not(.dw-scaled) { --dw-css-scale: 1.229; } }
@media (min-width: 2390px) { html:not(.dw-scaled) { --dw-css-scale: 1.244; } }
@media (min-width: 2420px) { html:not(.dw-scaled) { --dw-css-scale: 1.260; } }
@media (min-width: 2450px) { html:not(.dw-scaled) { --dw-css-scale: 1.276; } }
@media (min-width: 2480px) { html:not(.dw-scaled) { --dw-css-scale: 1.291; } }
@media (min-width: 2510px) { html:not(.dw-scaled) { --dw-css-scale: 1.307; } }
@media (min-width: 2540px) { html:not(.dw-scaled) { --dw-css-scale: 1.322; } }
@media (min-width: 2570px) { html:not(.dw-scaled) { --dw-css-scale: 1.338; } }
@media (min-width: 2600px) { html:not(.dw-scaled) { --dw-css-scale: 1.354; } }
}
/* The score plate is a fixed 76px sized for the widest count, and the frame
left-aligns inside it after a 13.46px indent. With a single-digit numerator
that leaves about 22px dead on the right, which reads as a mistake rather
than as spacing. Centring keeps the plate exactly where it is and shares the
slack, so it looks deliberate at every count width. */
.row__score {
justify-content: center;
padding-left: 0;
}
/* Empty leaderboard. Uses the same dog sticker the out-of-month cells use, so an
empty year looks like part of the design rather than a missing table. */
.rows--empty { overflow: hidden; }
.dw-nodata {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
}
.dw-nodata__art {
display: block;
width: 132px;
height: 132px;
margin-bottom: 14px;
opacity: 0.55;
transform: rotate(-4.44deg);
}
.dw-nodata__art img { width: 100%; height: 100%; display: block; }
.dw-nodata__title {
margin: 0;
font-family: 'Rex', sans-serif;
font-weight: 700;
font-size: 34px;
line-height: normal;
text-transform: lowercase;
color: rgba(255, 255, 255, 0.85);
text-box: trim-both cap alphabetic;
}
.dw-nodata__hint {
margin: 0;
font-family: 'PFDinIt', sans-serif;
font-weight: 400;
font-size: 16px;
line-height: normal;
color: rgba(255, 255, 255, 0.45);
}
/* --------------------------------------------------------------------------
Page fade, independent of view transitions
Cross-document view transitions are the nice path, but they are silently
unavailable in plenty of real setups - an unsupporting build, an extension,
or the OS reduce-motion switch - and then a navigation is a hard cut: the
interface vanishes and the next one appears. This is the floor under that:
an explicit fade out on the way off a page and in on the way onto the next
one, which needs nothing but CSS animation support.
Gated on .dw-js so a page with no scripting is never left faded, and skipped
on the first arrival, which has its own choreography behind the skeleton.
The fade briefly makes .stage a backdrop root, so the frosted panels flatten
while it runs. At 220ms against a cut that is the better trade.
-------------------------------------------------------------------------- */
/* No fade IN. Animating opacity on .stage makes it a backdrop root, so .panel,
the pills and the filter tabs lose their backdrop-filter for the duration and
render flat - which is the "the blur is missing for a second and then appears"
this was reported with, and it is also why the stickers looked like they
arrived ahead of everything else: their images finished decoding at different
points inside that fade.
Only the outgoing page fades. On the way out a flat panel for 150ms is not
something anyone sees, and it keeps a navigation from being a hard cut. */
html.dw-leaving .stage {
opacity: 0;
transition: opacity 150ms var(--dw-ease-in, ease-in);
}
/* Reduce motion means no fades, but a navigation must not be left mid-fade */
@media (prefers-reduced-motion: reduce) {
html.dw-leaving .stage { opacity: 1; transition: none; }
}
/* --------------------------------------------------------------------------
The three flow-layout blocks on the month screen. They carry no geometry on
the canvas: the day cell there already shows the roster, the note and the
count, so the card, the strip and the toggle stay out of the way entirely.
-------------------------------------------------------------------------- */
.dayview,
.daystrip,
.month-toggle,
.month-actions { display: none; }
/* Alpine fills them with x-text; do not flash empty boxes before it boots */
[x-cloak] .dayview,
[x-cloak] .daystrip,
[x-cloak] .month-toggle,
[x-cloak] .month-actions { display: none !important; }
/* --------------------------------------------------------------------------
Back to today, canvas side. A third .topbar item, so it lines up with the
red badge without touching the .header-side column. Only rendered while a
month other than the current one is open, so the reference frame - whose
month is the current one - is unaffected. Same fill and blur as .nav-btn.
-------------------------------------------------------------------------- */
.header-today {
flex: none;
align-self: flex-start;
height: 35px;
padding: 2px 17px 0;
border-radius: 9999px;
border: 1px solid var(--hairline);
background: var(--pill-fill);
backdrop-filter: blur(48.75px);
-webkit-backdrop-filter: blur(48.75px);
display: flex;
align-items: center;
justify-content: center;
font-family: 'PFDinIt', sans-serif;
font-weight: 900;
font-size: 14px;
line-height: normal;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
text-decoration: none;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease;
}
.header-today:hover { border-color: var(--red); color: #fff; }
/* ==========================================================================
MOBILE / FLOW LAYOUT
Everything above is a fixed 1920×1080 canvas: every element absolutely
positioned in px, the whole thing fitted with one transform: scale(). That
model dies on a phone. At 390×844 the scale is min(390/1920, 844/1080) =
0.203, so 12px body text renders at 2.4px. No amount of fitting helps.
So below a threshold the canvas is abandoned and the same DOM is laid out in
normal flow. The DOM order inside .stage already reads correctly top to
bottom - title, nav, panel, stickers - so nothing moves in Blade; the
absolute positioning is simply undone here.
Threshold: the canvas stays legible while the scale holds around 0.62, which
needs width >= 1190 AND height >= 670. The query below is the negation of
that, so phones in both orientations, tablets, and short desktop windows all
get the flow layout.
The same query string is in the inline scaling script in
resources/views/layouts/app.blade.php - it has to be checked there too,
because that script sets the transform inline with !important and would
outrank anything here. Keep the two identical.
Constraint that shapes this whole block: .nav-btn, .pill, .nav-divider,
.panel, .ftab--active and .modal__scrim carry backdrop-filter, and animating
or compositing any ANCESTOR of those flattens the frosted fill. Geometry is
fair game here; animation is not.
========================================================================== */
@media (max-width: 1189px), (max-height: 669px) {
/* ---------------------------------------------------------------- frame */
html, body {
height: auto;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
-webkit-text-size-adjust: 100%;
}
/* dvh, not vh: the vh unit measures the viewport without the mobile
address bar, so the page ends up taller than the screen on Safari */
/* A column so a short page (the month grid is barely half a phone screen)
can push the ESQRD note to the bottom instead of leaving it stranded in
the middle of the room photo. dvh, not vh: Safari's address bar. */
.viewport {
display: flex;
flex-direction: column;
/* The desktop rule centres on both axes to letterbox the canvas. Centring
the cross axis here would shrink-wrap .stage to its max-content width
(940px for the leaderboard) instead of the screen width. */
align-items: stretch;
justify-content: flex-start;
width: auto;
height: auto;
min-height: 100dvh;
overflow: visible;
}
/* A column, so the ESQRD note can be pushed to the bottom of a short page.
Width is 100%, not auto: an auto cross-axis margin on a flex item cancels
the stretch, and the stage would shrink-wrap to its max-content width
(~940px for a leaderboard row) and hang off the screen. With an explicit
width the auto margins only do what they are here for - centring the
column once the viewport is wider than 980px. */
.stage {
position: static;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
width: 100%;
height: auto;
max-width: 980px;
margin: 0 auto;
padding: 14px 14px 26px;
transform: none;
}
/* The stage is a flex column now, so every child is a flex item and would
shrink if the column were ever squeezed. Blocks do not shrink; keep it. */
.stage > * { flex: 0 0 auto; }
/* ----------------------------------------------------------- header row */
.topbar {
position: static;
left: auto;
top: auto;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
margin-bottom: 12px;
}
.screen-title { font-size: clamp(32px, 12vw, 58px); }
.header-side { flex-direction: row; align-items: center; gap: 8px; }
.header-badge { height: 30px; font-size: 14px; padding: 2px 13px 0 12px; }
/* The badge is a link on both screens - today's month from the overview, the
year from a month - and 30px is not a finger. The pseudo-element grows the
hit area into the slack around it without moving a pixel; [href] keeps it
off the plain
variant. */
.header-badge[href] { position: relative; }
.header-badge[href]::after {
content: '';
position: absolute;
inset: -8px -4px;
}
/* --------------------------------------------------------------- topnav
A scroll row rather than a wrap: the pills stay one line and keep their
46px height, which is also the tap target. */
.topnav {
position: static;
top: auto;
right: auto;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
padding-bottom: 4px;
margin-bottom: 12px;
scroll-snap-type: x proximity;
}
.topnav::-webkit-scrollbar { display: none; }
/* On a 390px phone the guest row measures 149 + 155 + 46 plus gaps and the
last pill lands just past the edge. Trimming the pill padding and dropping
the purely decorative divider brings it back inside, so the row reads whole
instead of relying on a scroll the user cannot see. The scroll above stays
as a safety net for longer translations. */
.pill { flex: none; padding: 10px 16px; scroll-snap-align: start; }
.pill__label { font-size: 14px; }
/* The icon-only pill is a fixed 46px circle, so it must keep the base 10px
padding - the wider padding above left a 14px content box for a 24px icon
and shoved the glyph off to the right. justify-content is belt and braces
against the same thing happening from any later rule. */
.pill--icon-only {
padding: 10px;
justify-content: center;
}
/* admin-panel-settings is a dense glyph: shield, notch and person badge. At
24px the negative space between them closes up and it reads as a blob, so
it gets the 2px the 46px circle can spare. */
.pill--icon-only .pill__icon { width: 26px; height: 26px; }
@media (max-width: 559px) {
.topnav { gap: 7px; }
.nav-divider { display: none; }
.pill { padding: 10px 14px; gap: 8px; }
.pill__label { font-size: 15px; }
.pill--icon-only { padding: 10px; }
}
/* ---------------------------------------------------------------- panel */
.panel {
position: static;
left: auto;
top: auto;
width: auto;
height: auto;
padding: 16px;
border-radius: 22px;
}
.panel--strong { height: auto; }
.panel::before { border-radius: 22px; }
.panel__inset {
left: 7px;
top: 7px;
right: 7px;
bottom: 7px;
width: auto;
height: auto;
transform: none;
border-radius: 16px;
}
/* The dot mask is cut to the desktop grid gutters, so it lands nowhere near
the mobile grid. Plain texture instead - the cards are opaque, so the dots
still only read in the gaps. */
.panel__dots--overview,
.panel__dots--calendar {
-webkit-mask: none;
mask: none;
border-radius: 21px;
}
/* -------------------------------------------------------------- overview */
.ov-heading {
position: static;
left: auto;
top: auto;
font-size: 20px;
white-space: normal;
margin-bottom: 14px;
}
.stat {
position: static;
left: auto;
top: auto;
width: auto;
height: auto;
min-height: 44px;
display: flex;
align-items: center;
gap: 10px;
padding: 5px;
border-radius: 12px;
margin-bottom: 8px;
}
.stat__value {
position: static;
left: auto;
top: auto;
width: auto;
min-width: 46px;
height: 34px;
padding: 5px 10px 0;
flex: none;
}
.stat__label {
position: static;
left: auto;
top: auto;
transform: none;
font-size: 15px;
}
.month-grid {
position: static;
left: auto;
top: auto;
width: auto;
height: auto;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: auto;
gap: 8px;
margin-top: 14px;
}
/* The frame pins the day count to the bottom of a 220x126 card, and the void
between reads as breathing room at that size. Shrunk to 161x92 the same
void reads as a mistake, so the card packs its content instead. */
.mcard {
display: flex;
flex-direction: column;
gap: 7px;
min-height: 0;
padding: 11px 11px 12px;
}
.mcard__name { position: static; left: auto; top: auto; font-size: 17px; }
.mcard__days,
.mcard__marks {
position: static;
left: auto;
right: auto;
top: auto;
font-size: 12px;
}
.mcard__badge {
position: static;
top: auto;
right: auto;
align-self: flex-start;
margin-top: 1px;
}
/* .shape is a clip-path generated for exactly 220×126 and falls apart at any
other size, so the current month gets a plain red outline instead. */
.mcard--current .shape { display: none; }
.mcard--current { background: var(--sticker-fill); }
.mcard--current::before {
display: block;
border: 2px solid var(--red);
background: none;
}
.mcard__pin {
left: auto;
right: 2px;
top: -8px;
width: 34px;
height: 32px;
}
/* Decor competes with data on a small screen: the rocket is 894px and the mug
and pen sit in the corners the content now occupies. The ESQRD note stays as
a signature at the end of the page. */
.rocket { display: none; }
.sticker--coffee,
.sticker--pen { display: none; }
.brand-note {
position: relative;
left: auto;
top: auto;
width: 132px;
height: 134px;
/* auto top margin inside the .stage column: sits just after the content on
a long page, drops to the bottom edge on a short one */
margin: auto auto 0;
padding-top: 18px;
box-sizing: content-box;
}
/* Offsets preserved from the frame: paper 1712.2/987.2, kicker 1732.5/1024.8,
title 1740.6/1034.0 - the deltas are what keeps the wording on the paper. */
.brand-note__paper { left: 0; top: 0; }
.brand-note__kicker { left: 20px; top: 38px; }
.brand-note__title { left: 28px; top: 47px; }
/* ------------------------------------------------------------ month grid
Seven columns kept, cells reduced to what reads at this size: the number,
the weekday dot and the marked state. Participants, the series name and the
comment move into the day modal, which already shows all three. */
.cal-grid {
position: static;
inset: auto;
padding: 0;
grid-template-columns: repeat(7, minmax(0, 1fr));
grid-template-rows: auto;
gap: 3px;
}
.wday {
height: 28px;
border-radius: 6px;
font-size: 11px;
padding-top: 4px;
}
/* Full name out, short name in from the attribute - no extra element, so the
desktop chip is untouched */
.wday > span { display: none; }
.wday::after { content: attr(data-short); }
.day,
.day--blank { min-height: 46px; border-radius: 6px; }
.day::before,
.day--blank::before { border-radius: 6px; border-width: 2px; }
.day__head { position: static; left: auto; top: auto; padding: 5px 0 0 5px; }
.day__num { font-size: 15px; }
.day__dot { width: 9px; height: 9px; }
.blank__rot { display: none; }
.day__people,
.avatars,
.day__note,
.day__fire,
.day__pin,
.day__today-badge,
.day__check { display: none; }
/* Marked days have to read at a glance - that is what the screen is for.
The design says it with avatars and a check, and neither fits a 46px cell,
so a marked day gets a green tick badge instead. .day::before is the border
overlay, ::after is free. */
.day--done::after,
.day--today.day--done::after {
content: '';
position: absolute;
right: 3px;
bottom: 3px;
width: 13px;
height: 13px;
border-radius: 9999px;
background: var(--check) center / 9px 9px no-repeat
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-7.5' fill='none' stroke='%23e2e9d0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.45);
pointer-events: none;
}
/* and a firmer tint under it, since the design's wash is too faint this small */
.day--done {
background:
linear-gradient(0deg, rgba(30, 164, 27, 0.14), rgba(30, 164, 27, 0.14)),
linear-gradient(0deg, var(--paper), var(--paper));
}
.day--today .shape { display: none; }
.day--today { background: var(--sticker-fill); }
.day--today::before {
display: block;
border: 2px solid var(--red);
border-radius: 6px;
}
/* ---------------------------------------------------------------- summary
Four columns do not fit, so a row becomes a two-line card: place, face and
name on the first line, score and progress on the second. The medals and
the dense ranking are untouched - only the arrangement changes. */
.filter-tabs {
position: static;
left: auto;
top: auto;
gap: 6px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
padding-bottom: 6px;
margin-bottom: 12px;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.ftab {
flex: none;
height: 40px;
padding: 8px 14px;
font-size: 14px;
}
.ftab--all { padding: 8px 15px; }
.ftab .pill__indicator { top: 36px; width: 44px; }
/* They label a table that no longer has columns */
.res-head { display: none; }
.rows {
position: static;
left: auto;
top: auto;
width: auto;
height: auto;
overflow: visible;
padding-right: 0;
gap: 8px;
}
.row {
height: auto;
padding: 10px 12px;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"lead person score"
"bar bar bar";
align-items: center;
gap: 8px 10px;
border-radius: 14px;
}
.row__medal {
position: static;
left: auto;
top: auto;
grid-area: lead;
width: 42px;
height: 48px;
overflow: hidden;
}
.row__medal span { transform: rotate(-11.85deg) scale(0.6); }
/* The thumbs-up overlaps the medal at this size and the gold already says
first place */
.row__thumb { display: none; }
.row__rank {
position: static;
left: auto;
top: auto;
grid-area: lead;
width: 42px;
text-align: center;
font-size: 22px;
}
.row__person {
position: static;
left: auto;
top: auto;
grid-area: person;
gap: 8px;
min-width: 0;
}
.row__person img,
.row__person .ava {
width: 34px;
height: 34px;
border-radius: 8px;
font-size: 13px;
}
/* Two lines rather than an ellipsis: the desktop row shows the whole name and
nothing else on this screen would give it back, so a long name wraps.
:not(.ava) matters - the initials avatar is a span in the same row, and
line-clamping it cuts the letters in half. */
.row__person > span:not(.ava) {
font-size: 14px;
min-width: 0;
white-space: normal;
line-height: 1.15;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.row__score {
position: static;
left: auto;
top: auto;
grid-area: score;
width: auto;
min-width: 58px;
height: 28px;
padding: 4px 10px 0;
font-size: 15px;
}
/* relative, not static: .row__fill and .row__pct are absolute inside it, and
with a static track they anchor to .row instead - which put the fill across
the top of the whole card */
.row__progress {
position: relative;
left: auto;
top: auto;
grid-area: bar;
width: auto;
height: 24px;
}
/* The fill gets its width inline in px, sized against the desktop track of
615px, which overflows a narrow bar. --dw-pct carries the same number as a
percentage; !important is needed because an inline style outranks a
stylesheet otherwise. */
.row__fill {
width: calc(var(--dw-pct, 0) * 1%) !important;
max-width: calc(100% - 6px);
height: 18px;
}
/* The label lives inside .row__progress, not in .row, so it cannot be moved
to a grid cell. The desktop track is 621px wide and the label only meets
the fill past 97%; at mobile width they collide from about 80% and the
number gets eaten.
So the track becomes a flex row, the label an ordinary item pinned right,
and z-index puts it over the absolutely positioned fill. The dark chip
behind it keeps it readable whether it sits on the fill or on the track -
which is knowable only at render time, not from the server. */
.row__progress {
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 5px;
}
.row__pct {
position: relative;
z-index: 1;
right: auto;
top: auto;
transform: none;
padding: 1px 6px 0;
border-radius: 6px;
/* solid, not translucent: 55% black over the orange fill reads as mud */
background: rgba(12, 9, 8, 0.86);
color: #fff;
font-size: 12px;
}
.rows--empty { position: relative; min-height: 240px; }
.dw-nodata { position: static; padding: 34px 0; }
.dw-nodata__art { width: 92px; height: 92px; margin-bottom: 10px; }
.dw-nodata__title { font-size: 22px; }
.dw-nodata__hint { font-size: 13px; padding: 0 10px; }
/* ----------------------------------------------------------------- modals */
.modal-root { position: fixed; inset: 0; padding: 12px; }
.modal__scrim {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: none;
}
/* The page must not scroll behind a fixed sheet; boot.js puts the class on
from the modal root's own hidden attribute. */
html.dw-modal-open,
html.dw-modal-open body { overflow: hidden; }
/* !important: .modal--day sets 760px in the sheet and the login modal sets
460px inline */
.modal {
overscroll-behavior: contain;
width: 100% !important;
max-width: 460px;
max-height: 86dvh;
overflow-y: auto;
padding: 20px 18px 18px;
border-radius: 18px;
}
.modal::after { inset: 6px; border-radius: 12px; }
.modal__title { font-size: 26px; }
.modal__sub { margin-bottom: 16px; }
.modal__close { right: 14px; top: 14px; }
.people-grid { grid-template-columns: 1fr; max-height: 40dvh; }
.people-tools { flex-wrap: wrap; }
.people-tools__all { flex: 1 1 auto; }
.toast { position: fixed; bottom: 16px; }
/* ---------------------------------------------------------------- skeleton
The panel skeleton reuses the real containers, so it follows the mobile
grid on its own. Only the boxes carrying desktop coordinates need undoing,
and the chrome skeleton goes: there is no fixed title or pill row to cover. */
.dw-skel--frame { display: none; }
.dw-skel { padding: 16px; }
.dw-skel--h1,
.dw-skel--h2 {
position: static;
left: auto;
top: auto;
height: 15px;
margin-bottom: 8px;
}
.dw-skel--h1 { width: 72%; }
.dw-skel--h2 { width: 48%; margin-bottom: 16px; }
.dw-skel--card { min-height: 92px; }
.dw-skel--wday { height: 28px; }
.dw-skel--cell { min-height: 46px; }
.dw-skel--tab { width: 58px; height: 40px; }
.dw-skel--tab-all { width: 112px; }
.dw-skel--head {
position: static;
left: auto;
top: auto;
width: 100%;
height: 16px;
margin: 12px 0;
}
.dw-skel__rows {
position: static;
left: auto;
top: auto;
width: auto;
}
.dw-skel--row { height: 64px; border-radius: 14px; }
/* ------------------------------------------------------------ error pages */
.err {
position: static;
inset: auto;
padding: 44px 14px;
min-height: 42vh;
}
.err__heading { font-size: 22px; }
.err__text { font-size: 15px; }
.err__footer { font-size: 12px; margin-top: 24px; }
/* ======================================================================
Second tier: wide phones in landscape and tablets. There is room for the
participant count, more month columns and the corner check again.
====================================================================== */
@media (min-width: 600px) {
.month-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat { display: inline-flex; width: auto; margin-right: 8px; }
.day { min-height: 62px; }
.day--blank { min-height: 62px; }
.day__people {
display: flex;
height: 20px;
min-width: 0;
padding: 0 5px;
margin-top: 0;
}
/* 11px matches the desktop badge; 10px was a size the design never uses */
.day__people span { font-size: 11px; }
.day__people img { width: 11px; height: 11px; }
.day__head { gap: 5px; align-items: center; }
/* The desktop circle is 26px for a mouse. A finger gets 32 - the cell
itself stays the primary target, this is the shortcut. */
.day__check {
display: flex;
position: absolute;
left: auto;
right: 4px;
bottom: 4px;
top: auto;
width: 32px;
height: 32px;
border-width: 2px;
}
.day__check img { width: 17px; height: 17px; }
/* The check button is back and turns green when the day is marked, so the
compact tick badge would sit on top of it saying the same thing twice. */
.day--done::after,
.day--today.day--done::after { display: none; }
.wday { font-size: 13px; height: 30px; }
.row__person > span:not(.ava) { font-size: 15px; }
}
@media (min-width: 768px) {
.month-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.day { min-height: 82px; }
.day--blank { min-height: 82px; }
/* Up to three faces read at this size; more turns into mush */
.avatars {
display: flex;
position: static;
left: auto;
top: auto;
width: auto;
padding: 0 0 0 5px;
margin-top: 2px;
}
.avatars > *:nth-child(n+4) { display: none; }
/* 11px is the smallest the design uses, and the plate grows to 24px so
two initials still clear the 1px border without clipping */
.avatars img,
.avatars .ava { width: 24px; height: 24px; font-size: 11px; }
/* Back to one line, as on the desktop: place, person, score, bar */
.row { grid-template-columns: auto minmax(0, 1fr) auto auto;
grid-template-areas: "lead person score bar"; }
.row__progress { width: 240px; }
}
/* Once there is width to spare the bar takes it, the way the 615px desktop
track does - a 240px bar next to 400px of empty row reads as unfinished. */
@media (min-width: 900px) {
.row__progress { width: 360px; }
}
/* The rocket earns its place back once there is width to spare. Its internals
are absolutely sized against a 664px square that is then rotated 62.75deg,
so the space it needs is 664 * scale * (|cos| + |sin|) = 664 * scale * 1.347.
At scale .32 that is 286px, which is why the box is 290 and not the 250 that
looks right on paper - anything smaller cuts the nose off. */
@media (min-width: 700px) {
.rocket {
display: flex;
position: relative;
left: auto;
top: auto;
width: 100%;
height: 290px;
margin-top: 6px;
overflow: hidden;
}
.rocket__rot { transform: rotate(-62.75deg) scale(0.32); }
}
/* ==================================================================== */
/* Day view: what the phone leads with instead of the grid. */
/* The 45px cell cannot hold a roster, and nobody opens a popup to find */
/* out who marked a day, so the roster is on the screen from the start. */
/* ==================================================================== */
.dayview {
display: flex;
flex-direction: column;
gap: 9px;
padding: 14px;
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.05);
}
.dayview__top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.dayview__when { min-width: 0; }
.dayview__date {
margin: 0;
font-family: 'Rex', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: normal;
text-transform: lowercase;
color: #fff;
text-box: trim-both cap alphabetic;
}
.dayview__wday {
margin: 5px 0 0;
font-family: 'PFDinIt', sans-serif;
font-weight: 400;
font-size: 13px;
line-height: normal;
color: rgba(255, 255, 255, 0.6);
}
.dayview__today {
flex: none;
height: 24px;
padding: 1px 10px 0;
border-radius: 9999px;
background: var(--red);
display: flex;
align-items: center;
font-family: 'PFDinIt', sans-serif;
font-weight: 900;
font-size: 12px;
line-height: normal;
text-transform: uppercase;
color: #fff;
}
.dayview__state {
margin: 0;
display: flex;
align-items: center;
gap: 8px;
font-family: 'PFDinIt', sans-serif;
font-weight: 700;
font-size: 12px;
line-height: normal;
text-transform: uppercase;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.5);
}
.dayview__count {
display: inline-flex;
align-items: center;
height: 23px;
padding: 1px 9px 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.09);
font-size: 14px;
color: rgba(255, 255, 255, 0.85);
}
.dayview__state--on { color: rgba(255, 255, 255, 0.62); }
.dayview__state--on .dayview__count { background: var(--check); color: #fff; }
.dayview__count b { font-weight: 900; }
.dayview__count i { font-style: normal; opacity: 0.75; }
.dayview__note {
margin: 0;
font-family: 'PFDinIt', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 14px;
line-height: 1.4;
color: rgba(255, 255, 255, 0.82);
}
.dayview__people { display: flex; flex-wrap: wrap; gap: 6px; }
.dvp {
display: inline-flex;
align-items: center;
gap: 7px;
height: 34px;
padding: 0 11px 0 4px;
border-radius: 9999px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
}
.dvp img,
.dvp .ava--dv {
flex: none;
width: 26px;
height: 26px;
border-radius: 9999px;
border: 1px solid #fff;
object-fit: cover;
}
.ava--dv { font-size: 10px; }
.dvp__name {
font-family: 'PFDinIt', sans-serif;
font-weight: 700;
font-size: 13px;
line-height: normal;
color: rgba(255, 255, 255, 0.85);
white-space: nowrap;
}
.dayview__edit { align-self: flex-start; height: 42px; margin-top: 3px; }
/* --------------------------------------------------------- day strip --
Every day of the month in one row that scrolls sideways, each with the
count on it, so picking a day costs a tap and no day hides its number. */
.daystrip {
display: flex;
gap: 6px;
margin-top: 12px;
padding-bottom: 4px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.daystrip::-webkit-scrollbar { display: none; }
.dsd {
flex: none;
width: 48px;
padding: 6px 0 6px;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.09);
background: rgba(255, 255, 255, 0.04);
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
cursor: pointer;
scroll-snap-align: center;
}
.dsd__wd {
font-family: 'PFDinIt', sans-serif;
font-weight: 700;
font-size: 11px;
line-height: normal;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
}
.dsd__num {
font-family: 'Rex', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: normal;
color: rgba(255, 255, 255, 0.9);
text-box: trim-both cap alphabetic;
}
/* Reserved whether or not there is a count, so the row does not jitter */
.dsd__cnt {
min-width: 18px;
height: 16px;
padding: 0 4px;
border-radius: 9999px;
font-family: 'PFDinIt', sans-serif;
font-weight: 900;
font-size: 11px;
line-height: 16px;
color: transparent;
}
.dsd--done .dsd__cnt { background: var(--check); color: #fff; }
.dsd--off .dsd__num { color: rgba(255, 255, 255, 0.45); }
.dsd--today .dsd__num { color: var(--red); }
.dsd--sel { border-color: var(--red); background: rgba(254, 58, 58, 0.16); }
.dsd--sel .dsd__num { color: #fff; }
.dsd--sel .dsd__wd { color: rgba(255, 255, 255, 0.7); }
/* ------------------------------------------------------ month toggle --
The header chip is hidden here: the phone puts both controls in one row
under the strip, where the thumb already is. */
.header-today { display: none; }
.month-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.month-today {
display: flex;
align-items: center;
justify-content: center;
flex: none;
height: 42px;
padding: 0 18px;
border-radius: 12px;
border: 1px solid var(--red);
background: rgba(254, 58, 58, 0.16);
font-family: 'PFDinIt', sans-serif;
font-weight: 900;
font-size: 13px;
line-height: normal;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #fff;
text-decoration: none;
cursor: pointer;
}
.month-toggle {
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 auto;
min-width: 0;
width: auto;
height: 42px;
margin-top: 0;
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(255, 255, 255, 0.04);
font-family: 'PFDinIt', sans-serif;
font-weight: 900;
font-size: 13px;
line-height: normal;
text-transform: uppercase;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.75);
cursor: pointer;
}
.cal-grid { margin-top: 10px; }
.cal-grid--closed { display: none; }
/* The month skeleton follows the new shape: one card box, then a strip.
Reuses the boxes that are already there rather than new markup. */
.dw-skel .cal-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
grid-template-columns: none;
grid-template-rows: none;
}
.dw-skel--wday { display: none; }
.dw-skel--wday:first-child {
display: block;
width: 100%;
height: 148px;
border-radius: 16px;
}
.dw-skel--cell { width: 48px; min-height: 62px; flex: none; border-radius: 12px; }
/* 7 weekday boxes + 8 cells is the whole visible skeleton */
.dw-skel .cal-grid > .dw-skel--cell:nth-child(n+16) { display: none; }
@media (max-width: 599px) {
/* The compact grid is a picker now, and the number of people is the thing
worth showing there: the count replaces the tick, which said less in the
same corner. Markup reused - the icon and the "/ 12" tail just go. */
.day__people {
display: flex;
position: absolute;
left: auto;
right: 3px;
bottom: 3px;
top: auto;
height: 16px;
min-width: 16px;
margin: 0;
padding: 0 4px;
border-radius: 9999px;
border: none;
background: var(--check);
align-items: center;
justify-content: center;
}
.day__people img,
.day__people i { display: none; }
/* font-size 0 on the wrapper kills the whitespace node left by the tail */
.day__people > span { font-size: 0; }
.day__people > span > span {
font-family: 'PFDinIt', sans-serif;
font-weight: 900;
font-size: 10px;
line-height: 1;
color: #fff;
}
.day--done::after,
.day--today.day--done::after { display: none; }
}
}
/* The day's note, read-only for a guest. On desktop it is already in the cell;
this is what carries it on a phone, where the compact grid drops it. */
.modal__note {
margin: 0 0 16px;
font-family: 'PFDinIt', sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.75);
}
/* ── Employee detail modal (summary page, admin only) ───────────────────────── */
.emp-modal-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
}
.emp-modal {
position: relative;
background: rgba(20, 30, 40, 0.82);
backdrop-filter: blur(32px) saturate(1.6);
-webkit-backdrop-filter: blur(32px) saturate(1.6);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
padding: 40px 48px 44px;
min-width: 360px;
max-width: 480px;
text-align: center;
color: #fff;
}
.emp-modal__close {
position: absolute;
top: 16px;
right: 20px;
background: none;
border: none;
color: rgba(255,255,255,0.5);
font-size: 20px;
cursor: pointer;
line-height: 1;
padding: 4px 8px;
border-radius: 8px;
transition: color .15s, background .15s;
}
.emp-modal__close:hover { color: #fff; background: rgba(255,255,255,0.1); }
.emp-modal__avatar {
width: 80px;
height: 80px;
border-radius: 18px;
margin: 0 auto 20px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Rex', sans-serif;
font-weight: 700;
font-size: 28px;
}
.emp-modal__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emp-modal__name {
margin: 0 0 6px;
font-family: 'Rex', sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 1.15;
text-transform: lowercase;
}
.emp-modal__tg {
margin: 0 0 28px;
font-family: 'PFDinIt', sans-serif;
font-size: 15px;
color: var(--purple);
opacity: .85;
}
.emp-modal__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.emp-modal__stat {
background: rgba(255,255,255,0.07);
border-radius: 14px;
padding: 16px 12px 14px;
display: flex;
flex-direction: column;
gap: 4px;
}
.emp-modal__stat-val {
font-family: 'Rex', sans-serif;
font-weight: 700;
font-size: 24px;
line-height: 1;
}
.emp-modal__stat-label {
font-family: 'PFDinIt', sans-serif;
font-size: 12px;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
letter-spacing: .04em;
}
.row--clickable { cursor: pointer; }
.row--clickable:hover { transform: translateX(5px); }