was the first build and it toggled correctly, but it cannot be
animated on this engine. Measured, repeatedly, in isolation:
::details-content{block-size:0} + [open]{block-size:auto} -> works
the same plus transition:block-size .5s -> the folder
never grows at all, it stays pinned at the closed height
the same plus interpolate-size:allow-keywords -> same
grid-template-rows:0fr -> 1fr on the pseudo -> same
Any transition on ::details-content freezes it shut here, and
removes its content from rendering the moment it closes, so there is no
second chance to animate the shut. The user asked for the folder to visibly
open, so the toggle moved to a checkbox, which browsers have animated
reliably for years via grid-template-rows 0fr -> 1fr. Same behaviour the
user asked for - press to open, press again to close - and now both
directions actually move.
The one thing lost:
gave one-open-at-a-time for free. A
checkbox cannot do that without script, and for a menu, several sections
open at once is no loss.
Palette stays inside the four: cream paper, near-black ink, brand orange for
the one thing the user is looking at, grey for everything else.
========================================================================== */
/* ---------- 1. the paper ------------------------------------------------ */
html:has(.menu-folders){
--bg:#f2f0ea;
--panel:#eae7de;
--panel2:#f7f5f0;
--ink:#1c1c1a;
--muted:rgba(28,28,26,.72);
--soft:rgba(28,28,26,.60);
--faint:rgba(28,28,26,.46);
--line:rgba(28,28,26,.22);
--lift:#1c1c1a;
--green:#1c1c1a;
--red:#ff6b00;
--g-ink:#1c1c1a;
--g-grey:#1c1c1a;
--g-mute:rgba(28,28,26,.72);
--g-faint:rgba(28,28,26,.46);
--g-ghost:rgba(28,28,26,.50);
--g-label:rgba(28,28,26,.62);
--g-placeholder:rgba(28,28,26,.34);
--g-hair:rgba(28,28,26,.22);
--g-hair2:rgba(28,28,26,.34);
--g-accent:#ff6b00;
--m-card:#151514;
--m-cardink:#f2f0ea;
--m-cardfaint:rgba(242,240,234,.58);
--m-cardhair:rgba(242,240,234,.15);
}
/* painted outright as well, so this page does not depend on the lift layer
existing if that one is ever reverted */
html:has(.menu-folders),
html:has(.menu-folders) body,
html:has(.menu-folders) .shell,
html:has(.menu-folders) .topbar{background:var(--bg) !important}
html:has(.menu-folders) .shell{border-color:var(--g-hair)}
/* the dropdown panels are painted with a literal dark in grid.css */
html:has(.menu-folders) .navdrop .menu,
html:has(.menu-folders) .views .menu{background:var(--panel2)}
html:has(.menu-folders) .navdrop .grp,
html:has(.menu-folders) .views .grp,
html:has(.menu-folders) .navdrop .menu a,
html:has(.menu-folders) .views .menu a{border-color:rgba(28,28,26,.14)}
html:has(.menu-folders) .navdrop summary:hover,
html:has(.menu-folders) .views summary:hover{background:rgba(28,28,26,.05)}
/* ---------- 2. the page head ------------------------------------------- */
.menu-folders{padding:34px 0 0}
.m-head{display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap}
.m-head>div:first-child{flex:1;min-width:280px}
.menu-folders .kick{margin:0 0 16px;display:flex;align-items:center;gap:14px}
.menu-folders .kick::before{content:"";width:7px;height:7px;flex:none;
background:var(--g-accent)}
.m-stamp{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--g-accent);white-space:nowrap;padding-top:3px}
.menu-folders h1{max-width:16ch}
.menu-folders .sub{margin-top:18px;max-width:52ch;font-size:12.5px}
.m-note{margin:26px 0 0;padding:16px 20px;
border:1px solid var(--g-hair);border-left:2px solid var(--g-accent);
font-size:12.5px;color:var(--g-mute);line-height:1.7;max-width:92ch}
.m-note b{color:var(--g-ink);font-weight:400}
/* ---------- 3. drinks, then food --------------------------------------- */
.m-drawer{margin:30px 0 0;position:relative;padding-top:26px;
border-top:1px solid var(--g-hair2)}
.m-drawer::before{content:"PRESS A SECTION TO OPEN IT";position:absolute;top:6px;
left:0;font-size:9px;letter-spacing:.30em;text-transform:uppercase;
color:var(--g-ghost)}
.m-group{margin:34px 0 0}
.m-drawer .m-group:first-child{margin-top:26px}
.m-gh{display:flex;align-items:baseline;gap:18px;
padding:0 0 11px;border-bottom:1px solid var(--g-hair2);
font-size:10px;letter-spacing:.30em;text-transform:uppercase;
color:var(--g-ink)}
.m-gh::before{content:"";width:7px;height:7px;flex:none;
background:var(--g-accent);transform:translateY(-1px)}
.m-gn{flex:1;color:var(--g-faint);font-size:9px;letter-spacing:.20em}
.m-gc{color:var(--g-faint);font-size:9px;letter-spacing:.20em;white-space:nowrap}
/* ---------- 4. one folder ---------------------------------------------- */
.m-folder{position:relative}
/* THE STACK. Each folder is pulled up 16px under the one above it and the one
above is drawn on top, so every sheet shows a tucked-under shoulder and an
exposed strip - the stack of files, not a list of rows. --i is the folder's
position, set inline in the template. */
.m-drawer .m-folder{margin-top:-16px;z-index:calc(40 - var(--i,0))}
.m-drawer .m-group>.m-folder:first-child{margin-top:0}
/* the state lives in a real checkbox so the keyboard still works: tab to it,
space to toggle */
.m-in{position:absolute;width:1px;height:1px;margin:0;opacity:0;
pointer-events:none}
.menu-folders .m-tab{
display:flex;align-items:center;gap:14px;
padding:16px 20px 15px;
border:1px solid var(--g-hair);border-top:0;
background:var(--panel);color:var(--g-ink);
cursor:pointer;user-select:none;
transition:background .32s ease,color .32s ease,border-color .32s ease;
}
.m-group>.m-folder:first-child>.m-tab{border-top:1px solid var(--g-hair)}
.menu-folders .m-tab:hover{background:#e3dfd3}
.m-in:focus-visible~.m-tab{outline:1px solid var(--g-accent);outline-offset:-1px}
.m-in:checked~.m-tab{background:var(--g-ink);color:var(--bg);
border-color:var(--g-ink)}
.m-idx{font-size:9.5px;letter-spacing:.16em;color:var(--g-faint);flex:none;
width:26px;transition:color .32s ease}
.m-nm{font-size:11px;letter-spacing:.28em;text-transform:uppercase;flex:1;
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-ct{font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;
color:var(--g-faint);flex:none;transition:color .32s ease}
.m-mk{flex:none;display:grid;place-items:center;width:34px;height:17px;
border:1px solid var(--g-hair);background:var(--bg);
font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
color:var(--g-faint);
transition:background .32s ease,color .32s ease,border-color .32s ease}
.m-in:checked~.m-tab .m-idx,
.m-in:checked~.m-tab .m-ct{color:var(--bg);opacity:.66}
.m-in:checked~.m-tab .m-mk{background:var(--g-accent);
border-color:var(--g-accent);color:#1c1c1a}
/* the toggle mark: a hairline + whose upright rotates onto the crossbar to
become a -. Typographic, not an icon. */
.m-pm{position:relative;width:11px;height:11px;flex:none;margin-left:4px;
color:var(--g-faint);transition:color .32s ease}
.m-in:checked~.m-tab .m-pm{color:var(--g-accent)}
.m-pm i{position:absolute;left:0;top:50%;width:11px;height:1px;
background:currentColor;display:block;transform-origin:50% 50%;
transition:transform .40s cubic-bezier(.22,1,.36,1)}
.m-pm i:first-child{transform:translateY(-50%) rotate(0deg)}
.m-pm i:last-child{transform:translateY(-50%) rotate(90deg)}
.m-in:checked~.m-tab .m-pm i:last-child{transform:translateY(-50%) rotate(0deg)}
/* THE OPEN AND THE SHUT.
grid-template-rows goes 0fr -> 1fr. This is the animation: the folder's own
height grows over half a second, which is the thing the eye actually reads as
a drawer opening, and it runs in both directions. */
.m-body{display:grid;grid-template-rows:0fr;
transition:grid-template-rows .52s cubic-bezier(.22,1,.36,1)}
.m-in:checked~.m-body{grid-template-rows:1fr}
.m-clip{overflow:hidden;min-height:0}
/* the panel arrives first, clipped at its bottom edge so it reads as the card
being pulled up out of the folder mouth, not as a box fading in */
@keyframes mCardOut{
from{transform:translateY(-26px);opacity:0;clip-path:inset(0 0 100% 0)}
to{transform:none;opacity:1;clip-path:inset(0 0 0 0)}
}
@keyframes mRowIn{
from{transform:translateY(-8px);opacity:0}
to{transform:none;opacity:1}
}
.menu-folders .m-card{
border:1px solid var(--g-hair);border-top:0;
background:var(--m-card);color:var(--m-cardink);
padding:24px 22px 26px;
}
.m-in:checked~.m-body .m-card{
animation:mCardOut .58s cubic-bezier(.22,1,.36,1) both}
/* the words only come once the card has landed - theirs does the same, and it
is what makes it feel pulled out rather than faded in */
.m-in:checked~.m-body .m-row{
animation:mRowIn .34s cubic-bezier(.22,1,.36,1) both;
animation-delay:calc(270ms + var(--r,0)*34ms)}
/* SCROLL, the way theirs uses it: each sheet settles up into place as it
enters the viewport, so scrolling assembles the stack. Wrapped in a support
query - where timelines are not understood the sheeting is simply static. */
@keyframes mSheetIn{
from{opacity:.32;transform:translateY(16px)}
to{opacity:1;transform:none}
}
@supports (animation-timeline:view()){
.menu-folders .m-folder{
animation:mSheetIn linear both;
animation-timeline:view();
animation-range:entry 8% cover 26%}
}
.m-cardhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
border-bottom:1px solid var(--m-cardhair);padding-bottom:13px;margin-bottom:8px}
.m-rec{font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;
color:var(--m-cardfaint)}
.m-ttl{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
color:var(--m-cardink);flex:1;text-align:right}
.menu-folders .m-row{display:grid;grid-template-columns:1fr auto;
gap:4px 22px;align-items:baseline;padding:12px 0;
border-bottom:1px solid var(--m-cardhair)}
.menu-folders .m-row:last-child{border-bottom:0}
.m-it{font-size:13.5px;letter-spacing:-.005em}
.menu-folders .m-pr{font-family:'SGL',system-ui;font-size:14px;
color:var(--g-accent);white-space:nowrap}
.m-nt{grid-column:1/-1;font-size:11.5px;color:var(--m-cardfaint);
line-height:1.6;margin-top:2px}
/* ---------- 4b. one dish: tap the name, the photo slides out ---------------- */
/* The dish photo.
is the native, no-JavaScript disclosure, so this
works with script off and on every phone. A closed
renders nothing,
which is also what keeps the menu light: the lazy ![]()
inside a dish is not
requested at all until that dish is opened. */
.menu-folders .m-dish{border-bottom:1px solid var(--m-cardhair)}
.menu-folders .m-dish:last-child{border-bottom:0}
.menu-folders summary.m-row{
border-bottom:0;cursor:pointer;list-style:none;
transition:background .3s ease}
.menu-folders summary.m-row::-webkit-details-marker{display:none}
.menu-folders summary.m-row::marker{content:""}
.menu-folders summary.m-row:hover{background:rgba(242,240,234,.045)}
.menu-folders summary.m-row:focus-visible{outline:1px solid var(--g-accent);
outline-offset:-2px}
/* the affordance: a small + on the name that becomes a - once the dish is open,
the same typographic mark the section tabs use. Decorative, so it is not read
out - the summary already carries the dish name. */
.m-hasphoto{position:relative;padding-right:16px}
.m-hasphoto::after{content:"+";position:absolute;right:0;top:-1px;
font-size:12px;line-height:1.2;color:var(--g-accent)}
.m-dish[open] .m-hasphoto::after{content:"\2013"}
.m-photo{margin:0 0 14px}
.m-photo img{display:block;width:100%;max-width:560px;height:auto;
border:1px solid var(--m-cardhair);background:var(--m-card)}
/* ---------- 5. the foot of the page ------------------------------------ */
.m-foot{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;
margin:26px 0 0;padding-top:20px;border-top:1px solid var(--g-hair);
font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
color:var(--g-faint)}
.m-sp{flex:1}
.m-hint{margin:20px 0 0;font-size:11px;color:var(--g-faint);
line-height:1.75;max-width:82ch}
.menu-folders .m-pull{margin:26px 0 0;padding-left:20px;
border-left:1px solid var(--g-accent);font-family:'SGL',system-ui;
font-size:clamp(17px,2.1vw,22px);font-weight:300;line-height:1.26;
letter-spacing:-.015em;text-transform:uppercase;color:var(--g-ink);
max-width:60ch}
/* ---------- 6. phone ---------------------------------------------------- */
@media (max-width:780px){
.menu-folders{padding:24px 0 0}
.m-drawer{margin-top:24px;padding-top:24px}
.menu-folders .m-tab{padding:15px 13px 14px;gap:10px}
.m-nm{letter-spacing:.20em;font-size:10.5px}
.m-idx{width:22px}
.menu-folders .m-card{padding:20px 15px 22px}
.menu-folders .m-row{gap:3px 14px}
.m-stamp{padding-top:0}
.m-gh{gap:12px}
.m-gn{display:none}
}
@media (max-width:420px){
/* keep the item count and drop the initials sticker: at this width the
count is information and the sticker is decoration */
.m-mk{display:none}
.m-nm{letter-spacing:.16em;font-size:10px}
.m-ttl{text-align:left}
}
@media (prefers-reduced-motion:reduce){
.menu-folders *{animation:none !important;transition:none !important}
}