/* css/fonts.css */
/* Generated by build-fonts.js — do not edit by hand. */
/* arabic */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeaijdA4M5.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeai3dAw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeaijdA4M5.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeai3dAw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeaijdA4M5.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeai3dAw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeaijdA4M5.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* vietnamese */
@font-face {
font-family: 'Alexandria';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(../fonts/alexandria-UMBXrPdDqW66y0Y2usFeai3dAw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(../fonts/cormorantgaramond-co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(../fonts/cormorantgaramond-co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/cormorantgaramond-co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/cormorantgaramond-co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/cormorantgaramond-co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys43PWrfQ.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3CZRtWPQCuHme67tEYUIx3Kh0PHR9N6Ys93PU.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CRXMR5Kw.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPO_-CUXMQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCRXMR5Kw.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YPi-OCUXMQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* arabic */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCRXMR5Kw.woff2) format('woff2');
unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
/* cyrillic-ext */
@font-face {
font-family: 'IBM Plex Sans Arabic';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(../fonts/ibmplexsansarabic-Qw3NZRtWPQCuHme67tEYUIx3Kh0PHR9N6YOG-eCUXMQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* css/tokens.css */
/* =====================================================================
CAFÈ BARBERA — BAGHDAD · design tokens
Black, red and white — the house colours — plus neutral greys. Every
colour, face, size, radius, shadow and timing the menu uses is named here
once; the other stylesheets only refer to these.
===================================================================== */
:root {
/* ---- colour: the house three, and greys ---- */
--red: #D81F26;
--red-deep: #A8141A;
--red-lit: #FF4D53; /* the red, lifted for use on black */
--red-soft: #FDECEC;
--red-ink: var(--red); /* red as small text: the brand red by day, lifted at night (5.9:1) */
--ink: #0D0D0D;
--ink-1: #161616;
--ink-2: #232323;
--white: #FFFFFF;
--paper: #FFFFFF;
--cream: #F4F4F3; /* a neutral grey-white, never yellow */
--cream-2: #E7E7E5;
--brass: #0D0D0D; /* "signature" was gold; in this house it is black */
--brass-soft: #F4F4F3;
/* ---- colour: roles ---- */
--bg: #FFFFFF;
--surface: #FFFFFF;
--surface-2: #F4F4F3;
--line: rgba(13, 13, 13, .09);
--line-str: rgba(13, 13, 13, .2);
--text: #0D0D0D;
--text-2: rgba(13, 13, 13, .7);
--text-3: rgba(13, 13, 13, .6); /* 5.6:1 on white — small text stays readable */
--primary: var(--red);
--primary-fg: #FFFFFF;
--ring: var(--red);
--room: var(--red); /* the section being read; set by [data-room] */
/* ---- price: present on every tile, never the loudest thing ---- */
--price-ink: rgba(13, 13, 13, .56);
--price-size: .74rem;
/* ---- type: one display face for both scripts, Italian names in an italic ---- */
--ar-sans: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Dubai", "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
--ar-serif: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", var(--ar-sans);
--la-sans: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--la-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--display: "Alexandria", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--italian: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--sans: var(--ar-sans); /* body face, swapped by [dir] below */
/* ---- type scale: display → section → name → Italian → story → meta → price.
The price is always the smallest figure on a card. ---- */
--fs-display: clamp(1.85rem, 7.6vw, 3.1rem);
--fs-h2: clamp(1.6rem, 6.5vw, 2.4rem);
--fs-name: 1.12rem;
--fs-italian: 1.04rem;
--fs-desc: .86rem;
--fs-meta: .8rem;
--fs-price: var(--price-size);
/* ---- icons: one line family — same stroke, round caps ---- */
--stroke: 1.75;
--stroke-sm: 2.2; /* glyphs drawn at 16px or less, so they read as the same weight */
/* ---- space, measure, shape ---- */
--pad: clamp(1.15rem, 5vw, 2.25rem);
--col: 48rem;
--r: 16px;
--r-sm: 10px;
/* the arch, for a 4:5 frame — round top, softly squared foot; the arched
doors of the first Barbera shop, 1870 */
--arch: 50% 50% 14px 14px / 40% 40% 14px 14px;
--rim: 0 0 0 5px var(--bg), 0 0 0 6px var(--ink);
/* ---- elevation ---- */
--shadow: 0 1px 2px rgba(20, 16, 13, .05), 0 8px 26px rgba(20, 16, 13, .07);
--shadow-lg: 0 24px 70px rgba(20, 16, 13, .18);
/* ---- motion ---- */
--e-out: cubic-bezier(.16, 1, .3, 1);
--e-io: cubic-bezier(.65, .05, .36, 1);
--e-back: cubic-bezier(.34, 1.4, .64, 1);
--t-fast: .2s;
--t: .42s;
--t-press: .14s; /* tap feedback */
--t-enter: .48s; /* a piece arriving */
--t-exit: .3s; /* leaving is faster than arriving */
}
:root[dir="ltr"] { --sans: var(--la-sans); }
/* ---- night: the same house, lights down ---- */
:root[data-theme="dark"] {
--bg: #0D0D0D;
--surface: #161616;
--surface-2: #1F1F1F;
--line: rgba(255, 255, 255, .1);
--line-str: rgba(255, 255, 255, .24);
--text: #FFFFFF;
--text-2: rgba(255, 255, 255, .72);
--text-3: rgba(255, 255, 255, .5);
--brass: #FFFFFF;
--brass-soft: rgba(255, 255, 255, .08);
--red-soft: rgba(216, 31, 38, .16);
--red-ink: var(--red-lit);
--price-ink: rgba(255, 255, 255, .56);
--shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
--shadow-lg: 0 30px 80px rgba(0, 0, 0, .6);
--rim: 0 0 0 5px var(--bg), 0 0 0 6px rgba(255, 255, 255, .5);
}
/* ---- the ten sections: each keeps one accent, used only as a trace ----
--acc the section's colour (the curtain on its arch, its subtitle)
--acc-ink its darkest note (the plate while a photo loads)
--material its texture, drawn in CSS — the swatch that opens the section */
#cat-hot {
--acc: #9A5B2E; --acc-ink: #2A170D;
--material: repeating-radial-gradient(circle at 50% 120%, #9A5B2E 0 2px, #C8955B 2px 6px, #E9D3BF 6px 9px);
}
#cat-cold {
--acc: #3E7891; --acc-ink: #14303D;
--material:
repeating-linear-gradient(60deg, #CFE3EC 0 2px, transparent 2px 7px),
repeating-linear-gradient(-60deg, #CFE3EC 0 2px, transparent 2px 7px),
linear-gradient(90deg, #3E7891, #8DBBD0);
}
#cat-fantasia {
--acc: #B0752B; --acc-ink: #3A2410;
--material: repeating-linear-gradient(115deg, #B0752B 0 3px, #F8EEDF 3px 9px, #D9A866 9px 11px, #F8EEDF 11px 17px);
}
#cat-matcha {
--acc: #5E7E35; --acc-ink: #1F2E12;
--material:
radial-gradient(circle, #5E7E35 1px, transparent 1.6px) 0 0 / 6px 6px,
radial-gradient(circle, #8BA65E 1px, transparent 1.6px) 3px 3px / 6px 6px,
#D8E4C2;
}
#cat-juices {
--acc: #D9711A; --acc-ink: #4A2306;
--material: repeating-conic-gradient(from 0deg at 50% 50%, #D9711A 0 12deg, #F3A24A 12deg 24deg) 0 0 / 22px 22px, #F8D9B4;
}
#cat-mocktails {
--acc: #B8305E; --acc-ink: #3F0E20;
--material:
radial-gradient(circle, rgba(255,255,255,.95) 1.5px, transparent 2.2px) 0 0 / 11px 11px,
radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.6px) 5px 6px / 9px 9px,
linear-gradient(90deg, #B8305E, #E06A94, #7E2BAE);
}
#cat-sandwiches {
--acc: #7A7432; --acc-ink: #2A280F;
--material:
repeating-linear-gradient(0deg, rgba(122,116,50,.35) 0 1px, transparent 1px 3px),
repeating-linear-gradient(90deg, rgba(122,116,50,.18) 0 1px, transparent 1px 5px),
#E3DCBF;
}
#cat-bakery {
--acc: #B9852A; --acc-ink: #3B2808;
--material: repeating-linear-gradient(0deg, #B9852A 0 2px, #F2DFB2 2px 4px, #E3BF73 4px 5px, #FCF3DE 5px 7px);
}
#cat-cakes {
--acc: #8E2848; --acc-ink: #2E0A16;
--material: repeating-linear-gradient(0deg, #8E2848 0 4px, #FFF6F0 4px 6px, #5A1A2E 6px 10px, #FFF6F0 10px 12px);
}
#cat-gelato {
--acc: #7B62AE; --acc-ink: #261C3D;
--material:
radial-gradient(circle, #F2B8C6 3px, transparent 3.5px) 0 0 / 18px 18px,
radial-gradient(circle, #B9A6E0 3px, transparent 3.5px) 6px 6px / 18px 18px,
radial-gradient(circle, #F6DFA6 3px, transparent 3.5px) 12px 12px / 18px 18px,
#F1EDF8;
}
/* the accent as text: a touch darker by day, lighter by night, so a small
subtitle reads at 4.5:1 in every section (worst case 4.8:1 day, 4.5:1 at night on a card) */
.cat { --acc-text: color-mix(in srgb, var(--acc) 80%, #000); }
:root[data-theme="dark"] .cat { --acc-text: color-mix(in srgb, var(--acc) 65%, #fff); }
/* the sticky row takes the accent of whichever section is being read;
[data-room] on is set by the position indicator in menu.js */
:root[data-room="hot"] { --room: #9A5B2E; }
:root[data-room="cold"] { --room: #3E7891; }
:root[data-room="fantasia"] { --room: #B0752B; }
:root[data-room="matcha"] { --room: #5E7E35; }
:root[data-room="juices"] { --room: #D9711A; }
:root[data-room="mocktails"] { --room: #B8305E; }
:root[data-room="sandwiches"] { --room: #7A7432; }
:root[data-room="bakery"] { --room: #B9852A; }
:root[data-room="cakes"] { --room: #8E2848; }
:root[data-room="gelato"] { --room: #7B62AE; }
/* css/base.css */
/* =====================================================================
CAFÈ BARBERA — base: reset, type, the logo, layout helpers, reveals.
Every direction-sensitive rule uses logical properties so the RTL⇄LTR
swap can't break the layout.
===================================================================== */
/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
scroll-behavior: smooth;
scroll-padding-top: 9rem;
}
body {
background: var(--bg);
color: var(--text);
font-family: var(--sans);
font-size: 17.5px;
line-height: 1.75; /* Arabic needs the air */
overflow-x: hidden;
overscroll-behavior-y: none;
padding-block-end: 6.2rem; /* the page never ends underneath the dock */
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
transition: background var(--t) var(--e-io), color var(--t) var(--e-io);
}
:root[dir="ltr"] body { line-height: 1.6; }
@media (min-width: 48rem) { body { font-size: 18px; } }
@media (min-width: 52rem) { body { padding-block-end: 0; } }
img, svg { display: block; max-width: 100%; }
/* An ![]()
carrying width/height attributes keeps its attribute height while
max-width shrinks it — which squashes the picture. Anything that genuinely
needs a fixed height sets one via a class, and that wins on specificity. */
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--red); color: #fff; }
/* "hidden" always wins — a styled control must never reappear when the script hides it */
[hidden] { display: none !important; }
/* ---------------------------------------------------------------- type */
.display { font-family: var(--display); font-weight: 800; line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
:root[dir="ltr"] .display { font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .06em; color: var(--red-ink); }
:root[dir="ltr"] .eyebrow { text-transform: uppercase; letter-spacing: .24em; font-size: .7rem; }
.tagline {
font-size: clamp(.62rem, 2.4vw, .78rem);
letter-spacing: .38em;
text-transform: uppercase;
color: var(--text-2);
font-family: var(--la-sans);
white-space: nowrap;
}
.num { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1; direction: ltr; unicode-bidi: isolate; }
/* ---------------------------------------------------------------- the logo */
.mark {
--mark-w: 15rem;
width: var(--mark-w);
aspect-ratio: 436 / 122; /* the black tagline row is clipped away */
background: url("../brand/logo-red.png") center top / 100% auto no-repeat;
flex: none;
}
:root[data-theme="dark"] .mark { filter: drop-shadow(0 2px 18px rgba(216, 31, 38, .4)); }
/* our mark, quietly, on the large photo in the item sheet */
.wm::after {
content: "";
position: absolute;
inset-block-end: .7rem; inset-inline-end: .85rem;
z-index: 3;
inline-size: 5.4rem;
aspect-ratio: 436 / 122;
background: url("../brand/logo-red.png") center / contain no-repeat;
opacity: .85;
filter: drop-shadow(0 1px 5px rgba(255, 255, 255, .9));
pointer-events: none;
}
/* ---------------------------------------------------------------- layout */
.wrap { width: min(100% - var(--pad) * 2, var(--col)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(3.5rem, 11vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 8vw, 4rem); }
.rule { display: flex; align-items: center; gap: 1rem; }
.rule::before, .rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.rule i { width: 6px; height: 6px; rotate: 45deg; background: var(--red); }
/* ---------------------------------------------------------------- reveal
Pieces that rise into view do so only under html.motion (motion.css), so
without the script, or with reduced motion, everything is simply there. */
/* headings assemble as they scroll in — pieces are inline blocks so each can
move on its own; whole words never break across lines */
[data-float] .sf { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; }
.sf__w { display: inline-block; white-space: nowrap; }
.sf__u { display: inline-block; transform-origin: 50% 0%; }
[data-float].is-near .sf__u { will-change: transform, opacity; } /* near the screen, each piece moves on the graphics chip */
/* ---------------------------------------------------------------- calm + print */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
}
@media print {
body { background: #fff; color: #000; font-size: 11pt; }
}
/* css/components.css */
/* =====================================================================
CAFÈ BARBERA — components: the pieces every view is built from.
Badges · prices · buttons · chips · the bar · the section row · tiles ·
bookmarks · sheets · search · My Picks · the quiz · the decision panel ·
the dock · the bubble menu · the idle showcase · small messages.
===================================================================== */
/* ---------------------------------------------------------------- badge
Ported from the shadcn/ui Badge, as data attributes on plain DOM.
One badge per plate at most, and only from real data. */
.badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border: 1px solid transparent;
padding: .12rem .625rem;
font-size: .7rem;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.badge[data-variant="default"] { background: var(--primary); color: var(--primary-fg); }
.badge[data-variant="default"]:hover { background: color-mix(in srgb, var(--primary) 82%, transparent); }
.badge[data-variant="brass"] { background: var(--ink); color: #fff; border-color: var(--ink); } /* signature */
.badge[data-variant="best"] { background: var(--red); color: #fff; border-color: var(--red); } /* most ordered */
.badge[data-variant="here"] { background: #fff; color: var(--red); border-color: var(--red); } /* the section's own best seller */
:root[data-theme="dark"] .badge[data-variant="brass"] { background: #fff; color: var(--ink); border-color: #fff; }
.badge:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ring); }
/* ---------------------------------------------------------------- price
A price is a labelled chip; sizes get one each, so "S 4,000 / M 5,000"
can never read as one number. On tiles it is quiet (see .items below). */
.price { display: flex; align-items: stretch; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.tag {
display: grid;
justify-items: center;
align-content: center;
gap: .05rem;
min-width: 3.9rem;
padding: .32rem .55rem;
border: 1px solid var(--line);
border-radius: var(--r-sm);
background: var(--surface);
transition: border-color var(--t-fast), transform var(--t-fast) var(--e-back);
}
.tag__size { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red-ink); font-family: var(--la-sans); }
.tag__val { font-size: 1.02rem; font-weight: 700; line-height: 1.15; }
.tag__cur { font-size: .6rem; color: var(--text-3); font-weight: 500; }
.tag--solo { min-width: 0; padding-inline: .75rem; }
.tag--solo .tag__val { font-size: 1.12rem; }
@media (max-width: 40rem) {
.tag { min-inline-size: 3.6rem; padding: .3rem .5rem; }
.tag__val { font-size: .98rem; }
}
/* ---------------------------------------------------------------- icon button */
.icon-btn {
display: grid;
place-items: center;
inline-size: 2.75rem; block-size: 2.75rem; /* the 44px thumb target */
border-radius: 50%;
border: 1px solid var(--line);
color: var(--text);
background: var(--surface);
box-shadow: 0 4px 14px rgba(13, 13, 13, .06);
touch-action: manipulation;
transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-press) var(--e-out);
}
.icon-btn:focus-visible { color: var(--red-ink); border-color: var(--red); outline-offset: 3px; }
@media (hover: hover) { .icon-btn:hover { color: var(--red-ink); border-color: var(--red); } }
.icon-btn:active { transform: scale(.94); }
.icon-btn svg { width: 1.15rem; height: 1.15rem; stroke: currentColor; fill: none; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
/* the theme key shows what it will switch to */
#themeBtn .ico-sun { display: none; }
:root[data-theme="dark"] #themeBtn .ico-sun { display: block; }
:root[data-theme="dark"] #themeBtn .ico-moon { display: none; }
/* on a phone the dock carries search, so the bar does not repeat it */
@media (max-width: 51.99rem) { .topbar__search { display: none; } }
.icon-btn--lang { padding-inline: .9rem; border-radius: 999px; font-size: .82rem; font-weight: 700; letter-spacing: .04em; }
/* ---------------------------------------------------------------- button */
/* Four kinds: primary (red), secondary (outline), tertiary (text) and the
icon button above. Every kind has hover, pressed, focus and disabled. */
.btn {
position: relative;
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
min-block-size: 2.75rem;
padding: .65rem 1.25rem; border-radius: 999px;
border: 1.5px solid var(--text);
font-family: var(--display);
font-size: .92rem; font-weight: 700;
line-height: 1.2;
color: var(--text);
background: var(--surface);
touch-action: manipulation;
isolation: isolate;
overflow: hidden;
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-press) var(--e-out);
}
.btn svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
.btn:hover { border-color: var(--red); color: var(--red-ink); }
.btn--solid:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; box-shadow: 0 10px 24px -10px rgba(216, 31, 38, .7); }
}
.btn:active { transform: scale(.96); }
.btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.btn--solid { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 8px 20px -12px rgba(216, 31, 38, .8); }
.btn--solid:focus-visible { outline-color: var(--text); }
/* a slow light across the primary button, once as it arrives and again on hover */
.btn--solid::after {
content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%);
transform: translateX(-120%);
}
@media (hover: hover) { .btn--solid:hover::after { transition: transform .6s var(--e-out); transform: translateX(120%); } }
.btn--text { border-color: transparent; background: none; color: var(--text-2); padding-inline: .9rem; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
@media (hover: hover) { .btn--text:hover { border-color: transparent; color: var(--red-ink); } }
.btn:disabled, .btn[aria-disabled="true"], .icon-btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; box-shadow: none; }
/* ---------------------------------------------------------------- chips + filters */
.chip {
position: relative;
flex: none;
scroll-snap-align: center;
display: inline-flex; align-items: center; justify-content: center;
min-block-size: 2.5rem;
padding: 0 .95rem;
border-radius: 999px;
border: 1px solid var(--line);
font-size: .84rem;
font-weight: 600;
white-space: nowrap;
color: var(--text-2);
background: var(--surface-2);
touch-action: manipulation;
transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}
@media (hover: hover) { .chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); } }
:root[data-theme="dark"] .chip:hover { background: #fff; color: var(--ink); }
.chip:active { transform: scale(.96); }
.chip { transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast), transform var(--t-press) var(--e-out); }
.chip--x { inline-size: 2.5rem; padding: 0; }
.chip--x svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: var(--stroke-sm); stroke-linecap: round; }
/* one row, always: the four filters share it, and slide sideways if a phone is very narrow */
.filters { display: flex; gap: .45rem; padding-block-start: 1rem; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters button {
flex: 1 0 auto;
display: inline-flex; align-items: center; justify-content: center;
min-block-size: 2.5rem;
padding: 0 .75rem;
border: 1px solid var(--line-str); border-radius: 999px;
font-size: .82rem; font-weight: 600;
color: var(--text-2); background: var(--surface);
touch-action: manipulation;
transition: all var(--t-fast);
}
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.filters button:active { transform: scale(.96); }
:root[data-theme="dark"] .filters button[aria-pressed="true"] { background: #fff; color: var(--ink); }
/* ---------------------------------------------------------------- the bar */
.topbar {
position: fixed;
inset-block-start: 0; inset-inline: 0;
z-index: 60;
display: flex;
align-items: center;
gap: .5rem;
padding: .55rem var(--pad);
padding-block-start: max(.55rem, env(safe-area-inset-top));
background: color-mix(in srgb, var(--bg) 90%, transparent);
backdrop-filter: blur(20px) saturate(1.6);
-webkit-backdrop-filter: blur(20px) saturate(1.6);
border-block-end: 1px solid transparent;
transition: padding .3s var(--e-out), border-color var(--t), background var(--t);
}
.topbar[data-lifted="1"] { border-block-end-color: var(--line); }
.topbar[data-compact="1"] { padding-block: .3rem; }
.topbar .mark { --mark-w: 7.6rem; min-block-size: 2.75rem; background-position: center; transition: width .3s var(--e-out); flex: 0 1 auto; min-inline-size: 5rem; }
/* on a narrow phone with the back button showing, the logo gives way, never a button:
each keeps its whole 44px under the thumb */
.topbar .icon-btn, .topbar .back { flex-shrink: 0; }
.topbar[data-compact="1"] .mark { --mark-w: 6.4rem; }
.topbar__spacer { flex: 1; }
:root.bm-open .topbar { z-index: 89; } /* the bar stays above the bubble menu, so its close is in reach */
/* the desktop links, and tooltips on the utility icons */
.topnav { display: none; }
@media (min-width: 64rem) {
.topnav { display: flex; gap: .2rem; margin-inline-start: 1.4rem; }
.topnav a {
display: grid; place-items: center;
min-block-size: 2.75rem; padding: 0 .85rem;
border-radius: 999px;
font-size: .88rem; font-weight: 600; color: var(--text-2);
transition: color var(--t-fast), background var(--t-fast);
}
.topnav a:hover { color: var(--text); background: var(--surface-2); }
}
@media (hover: hover) and (pointer: fine) {
[data-tip-now] { position: relative; }
[data-tip-now]::after {
content: attr(data-tip-now);
position: absolute;
inset-block-start: calc(100% + .45rem);
left: 50%; translate: -50% 0;
padding: .3rem .6rem;
border-radius: 8px;
background: var(--ink); color: #fff;
font-size: .72rem; font-weight: 600; white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .18s ease .25s;
}
[data-tip-now]:hover::after, [data-tip-now]:focus-visible::after { opacity: 1; }
}
/* reading progress, along the very top */
.progress { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 70; block-size: 3px; pointer-events: none; }
.progress i {
display: block; block-size: 100%;
background: linear-gradient(to right, var(--red), var(--brass));
transform: scaleX(var(--sp, 0)); transform-origin: left;
}
:root[dir="rtl"] .progress i { transform-origin: right; }
/* ---------------------------------------------------------------- preloader */
#preloader {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-content: center;
justify-items: center;
gap: 1.5rem;
background: var(--white);
transition: opacity .55s var(--e-io), visibility .55s;
}
:root[data-theme="dark"] #preloader { background: var(--ink); }
#preloader[data-done="1"] { opacity: 0; visibility: hidden; }
#preloader .mark { --mark-w: min(18rem, 64vw); animation: write 1.1s var(--e-out) both; }
:root[dir="rtl"] #preloader .mark { animation-name: write-rtl; }
@keyframes write { from { clip-path: inset(0 100% 0 0); opacity: .25; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes write-rtl { from { clip-path: inset(0 0 0 100%); opacity: .25; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
.pre__bar { width: min(18rem, 64vw); height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; }
.pre__bar i { display: block; height: 100%; background: var(--red); transform-origin: inline-start; animation: fill 1.3s var(--e-io) both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* ---------------------------------------------------------------- the section row
Ten real sections, one icon each. The one you are reading is black with a
red ring, and the row slides to keep it in view. It stays under the bar. */
.kinds {
position: sticky;
inset-block-start: calc(3.75rem + env(safe-area-inset-top));
z-index: 50;
padding-block: .7rem .6rem;
background: color-mix(in srgb, var(--bg) 94%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-block-end: 1px solid var(--line);
box-shadow: none;
transition: box-shadow .5s var(--e-io);
}
.kinds__strip {
display: flex;
gap: .45rem;
overflow-x: auto;
scrollbar-width: none;
scroll-snap-type: x proximity;
padding-block-end: .15rem;
overscroll-behavior-x: contain;
}
.kinds__strip::-webkit-scrollbar { display: none; }
.kind {
flex: none;
display: grid;
justify-items: center;
gap: .35rem;
inline-size: 4.4rem;
padding: .3rem .1rem;
border: 0;
border-radius: 0;
background: none;
color: var(--text-2);
touch-action: manipulation;
scroll-snap-align: center;
transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--e-back);
}
.kind__ico {
position: relative;
display: grid; place-items: center;
inline-size: 2.8rem; block-size: 2.8rem;
border-radius: 50%;
color: var(--text);
background: var(--surface-2);
transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.kind__ico svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.kind__lbl { font-size: .72rem; font-weight: 600; line-height: 1.25; text-align: center; white-space: nowrap; }
.kind:hover .kind__ico { color: var(--red-ink); }
.kind[aria-current="true"] { color: var(--text); }
.kind[aria-current="true"] .kind__ico { background: var(--ink); color: #fff; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--red); }
.kind[aria-current="true"] .kind__lbl { font-weight: 800; }
:root[data-theme="dark"] .kind[aria-current="true"] .kind__ico { background: #fff; color: var(--ink); }
/* where you are in the menu */
.kinds__bar {
position: absolute; inset-block-end: 0; inset-inline-start: 0;
block-size: 2px; background: var(--room);
inline-size: 100%;
transform: scaleX(var(--w, 0)); transform-origin: left; /* a stretch, not a resize: nothing is laid out again as you read */
transition: transform .25s var(--e-out), background .5s var(--e-io);
}
:root[dir="rtl"] .kinds__bar { transform-origin: right; }
.kinds__now {
display: flex; align-items: center; justify-content: space-between; gap: .6rem;
min-block-size: 1.45rem; /* one height, so a jump lands where it aims */
padding: .3rem .1rem 0;
font-size: .72rem; color: var(--text-3);
}
.kinds__now b { color: var(--text); font-weight: 700; transition: color .5s var(--e-io); }
/* one row on a wide screen too — a two-row sticky strip eats the page */
@media (min-width: 52rem) {
.kinds__strip { flex-wrap: nowrap; overflow: visible; justify-content: center; }
.kind { inline-size: 4.3rem; }
}
/* ---------------------------------------------------------------- tiles
Each item stands in its own arch: photo, name, the Italian name, the
story, then — last and quietest — the price. */
.items {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-flow: row dense; /* a single tile before a double-width signature leaves no hole */
gap: 1.5rem .9rem;
border: 0;
border-radius: 0;
background: none;
overflow: visible;
}
@media (min-width: 34rem) { .items { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 52rem) { .items { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.items > .item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
cursor: pointer;
touch-action: manipulation;
transition: transform var(--t-press) var(--e-out);
}
.items > .item:active { transform: scale(.97); }
.items > .item:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 16px; }
/* ---- the plate ---- */
.item__plate {
position: relative;
inline-size: 100%;
display: grid;
place-items: center;
overflow: hidden;
isolation: isolate;
}
.items .item__plate {
aspect-ratio: 4 / 5;
border-radius: var(--arch);
margin-block-end: .8rem;
background: var(--ink); /* the photos are shot on black */
box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .7);
}
:root[data-theme="dark"] .item__plate { background: #0A0908; }
.item__plate img {
grid-area: 1 / 1;
inline-size: 100%; block-size: 100%;
border-radius: 0;
opacity: 0;
transition: transform .9s var(--e-out), opacity .55s var(--e-out);
}
.item__thumb { overflow: hidden; }
:root[data-theme="dark"] .item__thumb[data-fit="contain"] { background: radial-gradient(60% 14% at 50% 86%, rgba(0, 0, 0, .45), transparent 70%), var(--ink-2); }
.item__plate[data-fit="cover"] img { object-fit: cover; padding: 0; background: none; }
.item__plate[data-fit="contain"] img { object-fit: contain; padding: 9%; background: none; }
.item__plate.is-loaded img { opacity: 1; }
.items > .item:hover .item__plate img { transform: scale(1.06); }
/* the mark on every photograph */
.item__plate:not([data-fit="mono"])::after {
content: "";
position: absolute;
inset-block-end: .55rem;
inset-inline-start: .6rem;
z-index: 3;
inline-size: 44%;
aspect-ratio: 436 / 122;
background: url("../brand/logo-red.png") center / contain no-repeat;
opacity: .9;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .9)) brightness(1.15);
pointer-events: none;
}
/* arriving: the plate shimmers in the section's colour, then the photo fades in.
The light is its own layer, moved (not repainted) across the plate, and it plays only
on a tile that is on screen (motion.css) — a phone keeps scrolling smoothly. */
.items .item__plate:not(.is-loaded):not([data-fit="mono"]) { background: color-mix(in srgb, var(--acc-ink, #14100D) 88%, #000); }
.item__plate:not(.is-loaded):not([data-fit="mono"])::before {
content: "";
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, transparent 25%, color-mix(in srgb, var(--acc, #888) 24%, transparent) 50%, transparent 75%);
transform: translateX(-100%);
pointer-events: none;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
/* the item's own kind, drawn, under every photo: it is what shows while a
photo is missing or if one fails — never a broken box */
.item__ph { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--acc, #fff) 45%, #fff); opacity: .2; }
.item__ph svg { inline-size: 36%; block-size: auto; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.item__plate[data-fit="mono"] .item__ph, .item__plate.is-broken .item__ph { opacity: .7; }
.item__plate.is-broken img { visibility: hidden; }
.item__plate.is-broken::after { display: none; }
img.is-broken { visibility: hidden; }
/* one badge, at the foot — an arch has no top corners to sit in */
.item__flag { position: absolute; z-index: 2; inset-block-start: .4rem; inset-inline-start: .4rem; }
.items .item__flag { inset-block-start: auto; inset-block-end: .55rem; inset-inline-start: auto; inset-inline-end: .55rem; }
.item__flag .badge { font-size: .58rem; padding: .1rem .45rem; }
/* ---- the words ---- */
.items .item__name {
grid-area: name;
display: block;
font-family: var(--display);
font-size: 1.12rem;
font-weight: 700;
line-height: 1.35;
text-align: center;
color: var(--text);
}
.items .item__name { text-wrap: balance; }
:root[dir="ltr"] .items .item__name { font-size: 1.02rem; font-weight: 600; }
@media (max-width: 23rem) { .items .item__name { font-size: 1.04rem; } }
/* the other script's name, isolated so mixed-direction text can't reorder;
under Arabic it is the Italian name, set in an Italian italic */
.item__alt { display: block; color: var(--text-3); line-height: 1.3; margin-block-start: .05rem; unicode-bidi: isolate; }
:root[dir="rtl"] .item__alt { direction: ltr; }
:root[dir="ltr"] .item__alt { font-family: var(--ar-sans); direction: rtl; font-size: .84rem; font-weight: 400; }
:root[dir="rtl"] .items .item__alt { font-family: var(--italian); font-style: italic; font-weight: 600; font-size: 1.04rem; letter-spacing: .01em; }
.items .item__desc {
grid-area: desc;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
margin-block-start: .3rem;
font-size: var(--fs-desc);
line-height: 1.55;
color: var(--text-2);
text-wrap: pretty;
}
/* ---- the price: small, light, see-through; no capsule, no currency ---- */
.items .item .price {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: .1rem .55rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
}
.items .item .tag {
display: inline-flex; align-items: baseline; gap: .22rem;
min-inline-size: 0;
padding: 0;
border: 0;
border-radius: 0;
background: none;
}
.items .item .tag__size { font-size: .58rem; font-weight: 500; letter-spacing: .02em; color: var(--price-ink); opacity: .8; }
.items .item .tag__val { font-family: var(--sans); font-size: var(--price-size); font-weight: 500; color: var(--price-ink); }
.items .item .tag__cur { display: none; }
/* the tile's foot: the price, and a small cue that the whole tile opens */
.item__foot { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-block-start: .4rem; }
.item__go {
inline-size: .8rem; block-size: .8rem;
fill: none; stroke: var(--text-3); stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round;
flex: none; opacity: .7;
}
:root[dir="ltr"] .item__go { transform: scaleX(-1); }
/* ---- the signatures: a black card, the one heavy object in each section ---- */
.items > .item.item--feature {
grid-column: span 2;
display: grid;
grid-template-columns: 40% 1fr;
grid-template-areas: "plate name" "plate alt" "plate desc" "plate price";
align-content: center;
justify-items: start;
text-align: start;
gap: 0 1rem;
padding: 1rem;
border-radius: 26px;
background: var(--ink);
color: #fff;
box-shadow: 0 30px 50px -36px rgba(0, 0, 0, .8);
}
.items > .item.item--feature.is-alt { grid-template-columns: 1fr 40%; grid-template-areas: "name plate" "alt plate" "desc plate" "price plate"; }
:root[data-theme="dark"] .items > .item.item--feature { background: #1F1F1F; }
@media (min-width: 34rem) { .items > .item.item--feature { grid-column: span 3; } }
@media (min-width: 52rem) { .items > .item.item--feature { grid-column: span 2; } }
.items > .item.item--feature .item__plate {
grid-area: plate;
aspect-ratio: 4 / 5;
margin: 0;
align-self: center;
box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px rgba(255, 255, 255, .22);
}
.items > .item.item--feature .item__name { grid-area: name; align-self: end; text-align: start; color: #fff; font-size: 1.38rem; font-weight: 700; padding-inline-end: 2.6rem; }
.items > .item.item--feature .item__alt { grid-area: alt; color: rgba(255, 255, 255, .6); padding-inline-end: 2.6rem; }
.items > .item.item--feature .item__desc { grid-area: desc; text-align: start; font-size: .9rem; color: rgba(255, 255, 255, .72); -webkit-line-clamp: 3; }
.items > .item.item--feature .item__flag { inset-block-start: .35rem; inset-inline-start: .35rem; }
.items > .item.item--feature .item__flag .badge[data-variant="brass"] { background: #fff; color: var(--ink); border-color: #fff; }
.items > .item.item--feature .price { grid-area: price; }
.items > .item.item--feature .tag__val { color: rgba(255, 255, 255, .56); }
.items > .item.item--feature .tag__size { color: rgba(255, 255, 255, .45); }
.items > .item.item--feature .item__foot { grid-area: price; justify-content: flex-start; margin-block-start: .5rem; }
.items > .item.item--feature .item__go { stroke: rgba(255, 255, 255, .55); }
.items > .item.item--feature .fav { inset-block-start: .5rem; inset-inline-end: .5rem; }
/* the narrowest phones: the words centre under the name */
@media (max-width: 23rem) {
.items > .item.item--feature { justify-items: center; text-align: center; }
.items > .item.item--feature .item__plate { inline-size: 70%; }
.items > .item.item--feature .item__name { text-align: center; }
.items > .item.item--feature .price { justify-content: center; }
}
/* ---------------------------------------------------------------- groups + add-ons */
.group { padding-block-start: 1.4rem; }
.group__name {
display: flex; align-items: center; gap: .8rem;
margin-block-end: .5rem;
font-family: var(--display); font-size: 1.05rem; font-weight: 700;
color: var(--text);
}
.group__name::after { content: ""; flex: 1; height: 1px; background: var(--line-str); }
.group__n {
display: inline-grid; place-items: center;
min-inline-size: 1.3rem; block-size: 1.3rem; padding-inline: .3rem;
border-radius: 999px;
background: var(--ink); color: #fff;
font-size: .65rem; font-weight: 800;
}
:root[data-theme="dark"] .group__n { background: #fff; color: var(--ink); }
.addons { margin-block-start: 1.8rem; padding: 1.1rem 1.2rem; border: 1px dashed var(--line-str); border-radius: var(--r); background: var(--surface); }
.addons__grid { display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; }
.addons__grid li { list-style: none; display: flex; gap: .5rem; align-items: center; padding: .4rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; }
.addons__grid b { font-weight: 700; }
/* ---------------------------------------------------------------- bookmark: My Picks */
.fav {
position: absolute;
inset-block-start: .1rem; inset-inline-end: .1rem;
z-index: 4;
display: grid; place-items: center;
inline-size: 2.75rem; block-size: 2.75rem;
border-radius: 50%;
color: var(--text);
-webkit-tap-highlight-color: transparent;
}
.fav::before { /* the visible disc sits in the arch's empty corner */
content: "";
position: absolute; inset: .45rem;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 2px 10px rgba(13, 13, 13, .16), 0 0 0 1px var(--line);
transition: background var(--t-fast), transform .25s var(--e-back);
}
.fav svg {
position: relative;
inline-size: 1.05rem; block-size: 1.05rem;
fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linejoin: round;
transition: fill var(--t-fast), stroke var(--t-fast);
}
.fav[aria-pressed="true"] { color: #fff; }
.fav[aria-pressed="true"]::before { background: var(--red); box-shadow: 0 4px 14px -4px rgba(216, 31, 38, .7); }
.fav[aria-pressed="true"] svg { fill: currentColor; }
.fav:active::before { transform: scale(.88); }
.fav.is-pop::before { animation: fav-pop .42s var(--e-back); }
@keyframes fav-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.fav:focus-visible { outline: none; }
.fav:focus-visible::before { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--red); }
:root[data-theme="dark"] .fav::before { background: var(--surface-2); }
.fav--sheet { position: relative; inset: auto; }
.fav--row { position: relative; inset: auto; flex: none; }
/* ---------------------------------------------------------------- sheet
Bottom sheet on a phone, centred dialog on a wide screen. */
.sheet {
position: fixed;
inset: 0;
z-index: 130;
display: grid;
align-items: end;
justify-items: center;
opacity: 0;
visibility: hidden;
transition: opacity .35s var(--e-io), visibility .35s;
}
.sheet[data-open="1"] { opacity: 1; visibility: visible; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet__panel {
position: relative;
inline-size: min(100%, 34rem);
max-block-size: 92svh;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--surface);
border-start-start-radius: 30px;
border-start-end-radius: 30px;
box-shadow: var(--shadow-lg);
transform: translate3d(0, 100%, 0);
transition: transform .45s var(--e-out);
padding-block-end: max(1.6rem, calc(1rem + env(safe-area-inset-bottom)));
}
.sheet[data-open="1"] .sheet__panel { transform: none; }
.sheet__grab { inline-size: 2.5rem; block-size: 4px; border-radius: 4px; background: var(--line-str); margin: .7rem auto .2rem; }
.sheet__close { position: absolute; inset-block-start: .8rem; inset-inline-end: .8rem; z-index: 3; background: var(--surface); color: var(--text); border: 1px solid var(--line); }
/* drag the sheet down to dismiss; --drag is written by menu.js */
@media (max-width: 40rem) {
.sheet__panel { transform: translate3d(0, calc(100% + var(--drag, 0px)), 0); max-block-size: 94svh; }
.sheet[data-open="1"] .sheet__panel { transform: translate3d(0, var(--drag, 0px), 0); }
.sheet__panel[data-dragging="1"] { transition: none; }
.sheet__grab { inline-size: 3rem; block-size: 5px; margin-block: .8rem .3rem; cursor: grab; }
.sheet__handle { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3rem; z-index: 2; touch-action: none; }
.sheet__close { inset-block-start: 3.2rem; }
}
@media (min-width: 48rem) {
.sheet { align-items: center; }
.sheet__panel { border-end-start-radius: 26px; border-end-end-radius: 26px; transform: translate3d(0, 3rem, 0) scale(.97); max-block-size: 88svh; }
.sheet__grab { display: none; }
}
/* ---- the photograph, in an arch ---- */
.sheet__figure {
position: relative;
margin: .5rem auto 0;
inline-size: min(66%, 17rem);
aspect-ratio: 4 / 5;
border-radius: var(--arch);
overflow: hidden;
background: var(--ink);
box-shadow: var(--rim), 0 30px 50px -30px rgba(0, 0, 0, .7);
}
.sheet__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; cursor: zoom-in; }
.sheet__figure[data-empty="1"] { display: grid; place-items: center; }
.sheet__figure[data-empty="1"] .mark { --mark-w: 70%; opacity: .9; }
.sheet__figure:not([data-empty="1"]):not([data-fit="contain"])::after {
content: "";
position: absolute;
inset-block-end: .9rem; inset-inline-start: 50%;
translate: 50% 0;
z-index: 3;
inline-size: 44%;
aspect-ratio: 436 / 122;
background: url("../brand/logo-red.png") center / contain no-repeat;
opacity: .92;
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .9)) brightness(1.15);
pointer-events: none;
}
:root[dir="ltr"] .sheet__figure:not([data-empty="1"]):not([data-fit="contain"])::after { translate: -50% 0; }
/* a cut-out product is shown whole, on a lit ground */
.sheet__figure[data-fit="contain"] {
background:
radial-gradient(40% 11% at 50% 87%, rgba(20, 16, 13, .14), transparent 70%),
radial-gradient(120% 95% at 50% 12%, #FFFFFF, var(--cream) 85%);
}
:root[data-theme="dark"] .sheet__figure[data-fit="contain"] { background: radial-gradient(40% 11% at 50% 87%, rgba(0, 0, 0, .5), transparent 70%), radial-gradient(120% 95% at 50% 12%, var(--ink-2), var(--ink) 88%); }
.sheet__figure[data-fit="contain"] img { object-fit: contain; padding: 7% 7% 9%; filter: drop-shadow(0 12px 16px rgba(20, 16, 13, .18)); }
/* ---- the words ---- */
.sheet__body { padding: 1.5rem 1.35rem 0; display: grid; gap: .5rem; text-align: center; justify-items: center; }
.sheet__toprow { display: flex; align-items: center; justify-content: center; gap: .6rem; inline-size: 100%; }
.sheet__eyebrow { font-size: .8rem; color: var(--red-ink); font-weight: 700; }
.sheet__title { font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2rem); font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; }
.sheet__alt { font-family: var(--la-serif); font-size: 1.05rem; color: var(--text-3); unicode-bidi: isolate; }
:root[dir="rtl"] .sheet__alt { font-family: var(--italian); font-style: italic; font-weight: 600; font-size: 1.25rem; letter-spacing: .01em; direction: ltr; margin-block-start: -.3rem; }
:root[dir="ltr"] .sheet__alt { font-family: var(--ar-serif); direction: rtl; }
.sheet__rank { font-size: .84rem; font-weight: 600; color: var(--text-2); }
.sheet__rank b { color: var(--red-ink); font-weight: 800; margin-inline-end: .2rem; }
.sheet__badges { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-block: .2rem .1rem; }
.sheet__kind {
display: inline-flex; align-items: center; gap: .35rem;
padding: .2rem .7rem .2rem .6rem;
border: 1px solid var(--line-str);
border-radius: 999px;
font-size: .78rem; font-weight: 600;
color: var(--text-2);
}
.sheet__kind svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.sheet__desc { max-inline-size: 30rem; color: var(--text-2); font-size: 1.04rem; line-height: 1.7; }
/* ---- prices: readable at a glance, quieter than the name ---- */
.sheet__prices { display: grid; gap: .5rem; inline-size: 100%; margin-block-start: .6rem; }
.sheet__row {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .75rem 1rem;
border: 0;
border-radius: 18px;
background: var(--surface-2);
color: var(--text);
}
.sheet__row b { font-size: .95rem; font-weight: 600; color: var(--text-2); }
.sheet__row .num { font-size: .95rem; font-weight: 600; color: var(--text-2); }
.sheet__row small { font-size: .72rem; color: var(--text-3); }
/* sizes: a cup that grows with the size */
.sheet__sizes { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: .5rem; }
.sheet__size {
display: grid; justify-items: center; align-content: end; gap: .2rem;
padding: .75rem .4rem .7rem;
border-radius: 20px;
background: var(--surface-2);
}
.sheet__size svg {
inline-size: calc(1.35rem + var(--k, 0) * .45rem);
block-size: calc(1.35rem + var(--k, 0) * .45rem);
fill: none; stroke: var(--text); stroke-width: var(--stroke); stroke-linejoin: round;
margin-block-end: .15rem;
opacity: .7;
}
.sheet__size b { font-size: .74rem; font-weight: 700; color: var(--text-3); letter-spacing: .04em; }
.sheet__size .num { font-size: .92rem; font-weight: 600; color: var(--text-2); }
.sheet__size small { font-size: .58rem; color: var(--text-3); }
.sheet__note { font-size: .8rem; color: var(--text-3); padding-block-start: .3rem; text-align: center; }
/* ---- chapters: goes well with, add-ons, the same section ---- */
.sheet__sec { inline-size: 100%; display: grid; gap: .65rem; margin-block-start: 1.2rem; text-align: start; }
.sheet__sec h4 { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: .92rem; font-weight: 700; }
.sheet__sec h4::after { content: ""; flex: 1; block-size: 1px; background: var(--line-str); }
.sheet__addons { list-style: none; padding: 0; display: grid; gap: .4rem; }
.sheet__addons li {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: .6rem .9rem;
border: 1px dashed var(--line-str);
border-radius: 14px;
font-size: .9rem;
}
.sheet__addons b { color: var(--price-ink); font-weight: 600; font-size: .82rem; }
.sheet__pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.sheet__pair { display: grid; gap: .25rem; text-align: center; }
.sheet__pair .sheet__mini-plate { margin-block-end: .25rem; }
.sheet__pair:hover .sheet__mini-plate img { transform: scale(1.06); }
.sheet__more {
display: flex; gap: .75rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
margin-inline: -1.35rem;
padding: .2rem 1.35rem .6rem;
scroll-padding-inline: 1.35rem;
overscroll-behavior-x: contain;
}
.sheet__more::-webkit-scrollbar { display: none; }
.sheet__mini { flex: none; inline-size: 6.9rem; display: grid; gap: .25rem; text-align: center; scroll-snap-align: start; touch-action: manipulation; }
.sheet__mini-plate { display: block; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--ink); margin-block-end: .3rem; }
.sheet__mini-plate img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .5s var(--e-out); }
.sheet__mini:hover .sheet__mini-plate img { transform: scale(1.07); }
.sheet__mini-name {
font-family: var(--display); font-weight: 600; font-size: .8rem; line-height: 1.35;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sheet__mini-price { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; font-size: var(--price-size); font-weight: 500; color: var(--price-ink); }
.sheet__mini-price i, .res__price i, .pick__price i, .quiz__price i { font-style: normal; font-size: .66em; color: var(--text-3); }
/* the captain line: the bridge from the phone to the table */
.captain {
display: flex; align-items: center; justify-content: center; gap: .5rem;
margin-block-start: 1rem;
font-size: .86rem; font-weight: 600;
color: var(--text-2);
text-align: center;
}
.captain svg { inline-size: 1.05rem; block-size: 1.05rem; flex: none; fill: none; stroke: var(--red); stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round; }
.captain--sheet { margin: 1.2rem 1rem .2rem; padding: .75rem 1rem; border-radius: 14px; background: var(--surface-2); }
/* ---------------------------------------------------------------- lightbox */
.lb {
position: fixed;
inset: 0;
z-index: 150;
display: grid;
grid-template-rows: 1fr auto;
padding: clamp(2.5rem, 7vw, 4rem) var(--pad) var(--pad);
padding-block-end: max(var(--pad), env(safe-area-inset-bottom));
background: rgba(8, 6, 5, .96);
opacity: 0; visibility: hidden;
transition: opacity .35s var(--e-io), visibility .35s;
}
.lb[data-open="1"] { opacity: 1; visibility: visible; }
.lb__stage { display: grid; place-items: center; min-block-size: 0; }
.lb img {
max-inline-size: 100%;
max-block-size: 100%;
inline-size: auto; block-size: auto; /* never stretched, never clipped */
object-fit: contain;
border-radius: var(--r);
transform: scale(.92);
opacity: 0;
transition: transform .5s var(--e-out), opacity .35s;
box-shadow: 0 30px 90px rgba(0, 0, 0, .65);
}
.lb[data-open="1"] img { transform: none; opacity: 1; }
.lb figcaption { color: rgba(250, 247, 241, .75); text-align: center; padding-block-start: 1rem; font-size: .9rem; }
.lb figcaption b { display: block; font-family: var(--display); font-size: 1.35rem; font-weight: 700; color: #fff; }
.lb__close { position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; }
.lb__close:hover { background: #fff; color: #14100D; }
/* ---------------------------------------------------------------- search */
.search {
position: fixed;
inset: 0;
z-index: 90;
background: color-mix(in srgb, var(--bg) 96%, transparent);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
padding: 5.2rem var(--pad) 2rem;
opacity: 0; visibility: hidden;
transform: translate3d(0, -1.5rem, 0);
transition: opacity var(--t) var(--e-io), transform var(--t) var(--e-out), visibility var(--t);
}
.search[data-open="1"] { opacity: 1; visibility: visible; transform: none; }
.search__field { position: relative; display: flex; align-items: center; gap: .8rem; border-block-end: 2px solid var(--line-str); padding-block-end: .7rem; }
.search__field input { flex: 1; min-width: 0; background: none; border: 0; color: var(--text); font-family: var(--display); font-size: clamp(1.25rem, 5.5vw, 1.9rem); font-weight: 700; }
.search__field input::placeholder { color: var(--text-3); font-weight: 400; }
.search__field input:focus { outline: none; }
.q-clear { inline-size: 2.75rem; block-size: 2.75rem; border: 0; box-shadow: none; background: var(--surface-2); }
.search__meta { padding-block: .9rem; font-size: .85rem; color: var(--text-3); }
.search__results { max-block-size: calc(100svh - 15rem); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: .4rem; }
@media (max-width: 40rem) {
.search { padding-block-start: max(5.2rem, calc(4.6rem + env(safe-area-inset-top))); }
.search__field input { font-size: max(1.25rem, 16px); } /* 16px keeps iOS from zooming the page */
.search__results { max-block-size: calc(100svh - 16rem); }
}
.srch__block { display: grid; gap: .2rem; margin-block-end: 1rem; }
.srch__h { font-size: .74rem; font-weight: 700; color: var(--text-3); letter-spacing: .04em; margin-block: .4rem .3rem; }
.srch__chips { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.srch__block .srch__chips { justify-content: flex-start; }
.res {
display: flex; align-items: center; gap: .85rem;
inline-size: 100%;
padding: .55rem .35rem;
border: 1px solid var(--line);
border-radius: 16px;
background: var(--surface);
text-align: start;
transition: border-color var(--t-fast);
animation: res-in .3s var(--e-out) both;
}
@keyframes res-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.res:hover { border-color: var(--red); }
.res:hover, .res:focus-visible { background: var(--surface-2); }
.res__img { flex: none; inline-size: 3.8rem; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--ink); }
.res__img img { inline-size: 100%; block-size: 100%; border-radius: 8px; object-fit: cover; }
.res__txt { flex: 1; min-inline-size: 0; display: grid; gap: .05rem; }
.res__cat { display: block; font-size: .7rem; font-weight: 700; color: var(--red-ink); }
.res__name { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.35; }
.res__alt { font-family: var(--italian); font-style: italic; font-size: .9rem; color: var(--text-3); }
:root[dir="ltr"] .res__alt { font-family: var(--sans); font-style: normal; font-size: .78rem; }
.res__desc { font-size: .76rem; color: var(--text-3); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.res__price { display: flex; gap: .5rem; font-size: var(--price-size); font-weight: 500; color: var(--price-ink); }
.res__go { flex: none; inline-size: 1rem; block-size: 1rem; fill: none; stroke: var(--text-3); stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round; }
:root[dir="ltr"] .res__go { transform: scaleX(-1); }
.res mark { background: color-mix(in srgb, var(--red) 16%, transparent); color: inherit; border-radius: 3px; padding-inline: 1px; }
/* ---------------------------------------------------------------- My Picks */
.picks__list { display: grid; gap: .2rem; padding: .4rem 1rem 1rem; }
.pick { display: flex; align-items: center; gap: .3rem; }
.pick__open {
flex: 1; min-inline-size: 0;
display: flex; align-items: center; gap: .85rem;
padding: .55rem .4rem;
border-radius: 16px;
text-align: start;
transition: background var(--t-fast);
}
.pick__open:hover, .pick__open:focus-visible { background: var(--surface-2); }
.pick__img { flex: none; inline-size: 3.6rem; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--ink); }
.pick__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pick__txt { display: grid; gap: .05rem; min-inline-size: 0; }
.pick__cat { font-size: .72rem; color: var(--red-ink); font-weight: 700; }
.pick__nm { font-family: var(--display); font-weight: 600; font-size: .98rem; line-height: 1.35; }
.pick__price { display: flex; gap: .5rem; font-size: var(--price-size); color: var(--price-ink); font-weight: 500; }
.pick__rm {
flex: none; display: grid; place-items: center;
inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
color: var(--text-3);
}
.pick__rm svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: var(--stroke-sm); stroke-linecap: round; }
.pick__rm:hover { color: var(--red-ink); background: var(--surface-2); }
/* empty states: what happened, and what to do next */
.empty { display: grid; justify-items: center; gap: .35rem; padding: 1.6rem 1rem 1rem; text-align: center; }
.empty svg { inline-size: 2.4rem; block-size: 2.4rem; fill: none; stroke: var(--text-3); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; margin-block-end: .3rem; }
.empty b { font-family: var(--display); font-size: 1.05rem; }
.empty span { font-size: .86rem; color: var(--text-3); max-inline-size: 18rem; }
/* ---------------------------------------------------------------- help me choose */
/* the close button sits in the top corner: keep the centred title clear of it on both sides */
.quiz__head { display: grid; justify-items: center; gap: .25rem; padding: 1.2rem 3.6rem .4rem; text-align: center; }
.quiz__prog { inline-size: min(100%, 14rem); block-size: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-block-start: .5rem; position: relative; }
.quiz__prog::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: right; transform: scaleX(var(--p, 0)); transition: transform .4s var(--e-out); }
:root[dir="ltr"] .quiz__prog::after { transform-origin: left; }
.quiz__body { display: grid; gap: .7rem; padding: .6rem 1.2rem 1.2rem; text-align: center; animation: res-in .35s var(--e-out); }
.quiz__k { font-size: .76rem; font-weight: 700; color: var(--text-3); }
.quiz__q { font-family: var(--display); font-size: 1.45rem; font-weight: 800; line-height: 1.3; }
.quiz__opts { display: grid; gap: .5rem; margin-block-start: .3rem; }
.quiz__opt {
min-block-size: 3.4rem;
padding: .6rem 1rem;
border-radius: 18px;
border: 1px solid var(--line-str);
font-size: 1rem; font-weight: 600;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.quiz__opt:hover, .quiz__opt:focus-visible { background: var(--ink); border-color: var(--ink); color: #fff; outline: none; }
.quiz__opt:active { transform: scale(.98); }
:root[data-theme="dark"] .quiz__opt:hover { background: #fff; color: var(--ink); }
.quiz__back { justify-self: center; min-block-size: 2.75rem; padding: 0 1rem; color: var(--text-3); font-size: .85rem; font-weight: 600; }
.quiz__res { display: grid; gap: .6rem; }
.quiz__card { display: flex; align-items: center; gap: .9rem; padding: .6rem; border-radius: 20px; background: var(--surface-2); text-align: start; }
.quiz__img { flex: none; inline-size: 4.6rem; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--ink); }
.quiz__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.quiz__txt { display: grid; gap: .15rem; min-inline-size: 0; }
.quiz__txt b { font-family: var(--display); font-size: 1.05rem; }
.quiz__txt span { font-size: .8rem; color: var(--text-3); line-height: 1.45; }
.quiz__price { display: flex; gap: .5rem; font-size: var(--price-size); font-weight: 500; color: var(--price-ink); }
.quiz__again { justify-self: center; }
/* ---------------------------------------------------------------- deciding, at the end of the menu */
.decide { display: grid; gap: 1.4rem; margin-block-start: 1.6rem; }
.decide__block { display: grid; gap: .7rem; }
.decide__block h3 { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: .98rem; font-weight: 700; }
.decide__block h3::after { content: ""; flex: 1; block-size: 1px; background: var(--line-str); }
.decide__row {
display: flex; gap: .75rem;
overflow-x: auto; scrollbar-width: none;
scroll-snap-type: x proximity;
padding-block-end: .3rem;
overscroll-behavior-x: contain;
}
.decide__row::-webkit-scrollbar { display: none; }
.decide__item { flex: none; inline-size: 6.4rem; display: grid; gap: .3rem; text-align: center; scroll-snap-align: start; }
.decide__item .sheet__mini-plate img { transition: transform .5s var(--e-out); }
.decide__item:hover .sheet__mini-plate img { transform: scale(1.06); }
.decide__picks {
display: flex; align-items: center; gap: .9rem;
padding: .9rem 1.1rem;
border-radius: 20px;
background: var(--red); color: #fff;
text-align: start;
transition: transform var(--t-fast) var(--e-out), background var(--t-fast);
}
.decide__picks:active { transform: scale(.985); }
.decide__picks svg { inline-size: 1.4rem; block-size: 1.4rem; flex: none; fill: currentColor; stroke: none; }
.decide__picks b { display: block; font-size: 1rem; }
.decide__picks small { display: block; font-size: .8rem; opacity: .85; }
.decide__routes { display: grid; gap: .5rem; }
@media (min-width: 48rem) { .decide__routes { grid-template-columns: repeat(3, 1fr); } }
.route {
display: flex; align-items: center; gap: .9rem;
min-block-size: 3.6rem;
padding: .7rem 1rem;
border-radius: 18px;
border: 1px solid var(--line-str);
text-align: start;
transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--e-out);
}
.route:hover { background: var(--surface-2); }
.route:active { transform: scale(.985); }
.route > svg:first-child {
inline-size: 2.4rem; block-size: 2.4rem; padding: .55rem; flex: none;
border-radius: 50%;
background: var(--ink); color: #fff;
fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round;
}
:root[data-theme="dark"] .route > svg:first-child { background: #fff; color: var(--ink); }
.route > span { flex: 1; display: grid; }
.route b { font-family: var(--display); font-size: .98rem; }
.route small { font-size: .78rem; color: var(--text-3); }
.route__go { inline-size: 1rem; block-size: 1rem; flex: none; fill: none; stroke: var(--text-3); stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round; }
:root[dir="ltr"] .route__go { transform: scaleX(-1); }
/* ---------------------------------------------------------------- the dock
A black pill floating above the page, the current tab in red. */
.tabbar {
position: fixed;
inset-inline: max(.75rem, calc(50% - 12.5rem));
inset-block-end: max(.75rem, env(safe-area-inset-bottom));
z-index: 80;
display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
gap: .2rem;
padding: .35rem;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 999px;
background: color-mix(in srgb, var(--ink) 94%, transparent);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .55);
transition: transform var(--t) var(--e-out);
}
:root.is-locked .tabbar { transform: translate3d(0, 170%, 0); } /* out of the way under a sheet */
:root[data-theme="dark"] .tabbar { background: color-mix(in srgb, #222 94%, transparent); }
@media (min-width: 52rem) { .tabbar { display: none; } }
.tab {
display: grid; justify-items: center; gap: .15rem;
padding: .45rem .2rem .4rem;
border-radius: 999px;
color: rgba(255, 255, 255, .62);
font-size: .66rem; font-weight: 600;
touch-action: manipulation;
transition: color var(--t-fast), background var(--t-fast);
}
.tab svg { inline-size: 1.35rem; block-size: 1.35rem; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .tab:hover { color: #fff; } }
.tab:active { transform: scale(.94); }
.tab { transition: color var(--t-fast), background var(--t-fast), transform var(--t-press) var(--e-out); }
.tab[aria-current="true"] { color: #fff; background: var(--red); }
.tab__wrap { position: relative; display: grid; place-items: center; }
.tab__up { display: none; }
.tab[data-top="1"] .tab__home { display: none; }
.tab[data-top="1"] .tab__up { display: block; animation: tab-up var(--t-enter) var(--e-back); }
@keyframes tab-up { from { transform: translateY(8px) rotate(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
/* the My Picks counter, only when something is saved */
.tab__dot {
position: absolute; inset-block-start: -.4rem; inset-inline-end: -.7rem;
min-inline-size: 1.1rem; block-size: 1.1rem; padding-inline: .25rem;
display: grid; place-items: center;
border-radius: 999px;
background: #fff; color: var(--red);
font-size: .62rem; font-weight: 800;
}
/* ---------------------------------------------------------------- back to top */
.totop {
position: fixed;
inset-inline-start: max(.9rem, env(safe-area-inset-left));
inset-block-end: calc(max(.75rem, env(safe-area-inset-bottom)) + 4.9rem);
z-index: 79;
display: grid; place-items: center;
inline-size: 2.9rem; block-size: 2.9rem;
border-radius: 50%;
background: var(--surface);
color: var(--text);
border: 1px solid var(--line);
box-shadow: 0 10px 24px -10px rgba(13, 13, 13, .45);
opacity: 0; transform: translateY(12px) scale(.9);
pointer-events: none;
transition: opacity .3s var(--e-out), transform .3s var(--e-out);
}
.totop[data-on="1"] { opacity: 1; transform: none; pointer-events: auto; }
.totop svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 52rem) { .totop { inset-block-end: 1.4rem; } }
@media (max-width: 51.99rem) { .totop { display: none; } }
/* ---------------------------------------------------------------- toast: a quiet one-line confirmation */
.toast {
position: fixed; inset-inline: 0; margin-inline: auto;
inset-block-end: calc(max(.75rem, env(safe-area-inset-bottom)) + 4.6rem);
z-index: 140;
display: grid; place-items: center;
inline-size: max-content; max-inline-size: calc(100% - 2rem);
padding: .6rem 1.1rem;
border-radius: 999px;
background: var(--ink); color: #fff;
font-size: .85rem; font-weight: 600;
box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5);
opacity: 0; transform: translateY(10px);
pointer-events: none;
transition: opacity .25s var(--e-out), transform .25s var(--e-out);
}
.toast[data-on="1"] { opacity: 1; transform: none; }
:root[data-theme="dark"] .toast { background: #fff; color: var(--ink); }
/* ---------------------------------------------------------------- the directory
The round button in the bar opens the whole menu on one screen: each
section as a pill in its own colour, the groups inside it beneath (Milkshakes,
Ice-Cream Rolls, Mojitos…), the kinds that cut across sections, and the
house's lists. Everything pops in on a back-ease, one after another. */
.bm-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: var(--text); }
.bm-btn .menu-line { display: block; inline-size: 1.15rem; block-size: 2px; border-radius: 2px; background: currentColor; transition: transform .3s ease, inline-size .3s ease; }
.bm-btn .menu-line.short { inline-size: .7rem; }
.bm-btn.open { color: var(--red-ink); border-color: var(--red); }
.bm-btn.open .menu-line { inline-size: 1.15rem; }
.bm-btn.open .menu-line:first-child { transform: translateY(3.5px) rotate(45deg); }
.bm-btn.open .menu-line:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.bm {
position: fixed; inset: 0;
z-index: 88;
overflow-y: auto;
overscroll-behavior: contain;
padding: calc(max(.55rem, env(safe-area-inset-top)) + 4.4rem) var(--pad) calc(env(safe-area-inset-bottom) + 2rem);
background:
radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--red) 8%, transparent), transparent 70%),
color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(18px) saturate(1.3);
-webkit-backdrop-filter: blur(18px) saturate(1.3);
opacity: 0;
transition: opacity .2s cubic-bezier(.55, .055, .675, .19);
}
.bm[data-open="1"] { opacity: 1; transition: opacity .3s var(--e-out); }
.bm__inner { inline-size: min(100%, 44rem); margin-inline: auto; }
.bm__title { font-family: var(--display); font-weight: 800; font-size: clamp(1.25rem, 5.2vw, 1.6rem); text-align: center; margin-block-end: 1.1rem; text-wrap: balance; }
.pill-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.pill-col { display: flex; flex-direction: column; min-inline-size: 0; }
.pill-col--wide { grid-column: 1 / -1; }
.pill-link {
--rot: 0deg;
--pop: cubic-bezier(.34, 1.5, .64, 1);
flex: 1;
min-inline-size: 0;
display: flex; align-items: center; justify-content: center;
min-block-size: 3.6rem;
padding: .6rem .9rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc, var(--line)) 30%, var(--line));
background: var(--surface);
color: var(--text);
font-family: var(--display);
box-shadow: 0 4px 14px rgba(20, 16, 13, .1);
transform: rotate(var(--rot)) scale(0);
transition: transform .2s cubic-bezier(.55, .055, .675, .19), background .3s ease, color .3s ease, border-color .3s ease;
-webkit-tap-highlight-color: transparent;
}
.pill-label {
display: inline-flex; align-items: center; gap: .55rem;
font-family: var(--display);
font-weight: 700;
font-size: clamp(.95rem, 3.9vw, 1.2rem);
line-height: 1.2;
text-align: center;
text-wrap: balance;
opacity: 0;
transform: translateY(24px);
transition: opacity .2s cubic-bezier(.55, .055, .675, .19), transform .2s cubic-bezier(.55, .055, .675, .19);
}
.pill-label svg { flex: none; inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: var(--acc, var(--text)); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s ease; }
.pill-label small, .pill-sub small {
display: inline-grid; place-items: center;
min-inline-size: 1.5rem; block-size: 1.5rem; padding-inline: .35rem;
border-radius: 999px;
background: color-mix(in srgb, var(--acc, var(--ink)) 14%, var(--surface-2));
font-family: var(--sans); font-size: .7rem; font-weight: 700; color: var(--text-2);
}
.bm[data-open="1"] .pill-link { transform: rotate(var(--rot)) scale(1); transition: transform .5s var(--pop) var(--d, 0s), background .3s ease, color .3s ease, border-color .3s ease; }
.bm[data-open="1"] .pill-label { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(.215, .61, .355, 1) calc(var(--d, 0s) + .05s), transform .5s cubic-bezier(.215, .61, .355, 1) calc(var(--d, 0s) + .05s); }
/* the pill floods with its own section's colour */
.bm[data-open="1"] .pill-link:is(:focus-visible, :active) { background: var(--hover-bg); border-color: var(--hover-bg); color: #fff; transform: rotate(var(--rot)) scale(1.04); transition-delay: 0s; }
@media (hover: hover) { .bm[data-open="1"] .pill-link:hover { background: var(--hover-bg); border-color: var(--hover-bg); color: #fff; transform: rotate(var(--rot)) scale(1.04); transition-delay: 0s; } }
.bm[data-open="1"] .pill-link:active { transform: rotate(var(--rot)) scale(.96); }
.pill-link:is(:hover, :focus-visible, :active) .pill-label svg { stroke: #fff; }
.pill-link:is(:hover, :focus-visible, :active) .pill-label small { background: rgba(0, 0, 0, .25); color: #fff; }
.pill-link:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--hover-bg); }
/* the groups inside a section, and the kinds: smaller pills that arrive after */
.pill-subs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; padding: .5rem .4rem 0; }
.pill-sub {
display: inline-flex; align-items: center; gap: .4rem;
min-block-size: 2.75rem;
padding: 0 .55rem 0 .95rem;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--acc, var(--ink)) 35%, var(--line));
background: color-mix(in srgb, var(--acc, var(--ink)) 7%, var(--surface));
color: var(--text);
font-family: var(--display); font-size: .86rem; font-weight: 600;
touch-action: manipulation;
opacity: 0; transform: scale(.6);
transition: opacity .2s ease, transform .2s ease, background var(--t-fast), color var(--t-fast);
}
.pill-sub--kind { padding-inline: .8rem .95rem; }
.pill-sub svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.bm[data-open="1"] .pill-sub { opacity: 1; transform: none; transition: opacity .4s var(--e-out) var(--d, 0s), transform .45s var(--e-back) var(--d, 0s), background var(--t-fast), color var(--t-fast); }
@media (hover: hover) { .pill-sub:hover { background: color-mix(in srgb, var(--acc, var(--ink)) 80%, #000); border-color: transparent; color: #fff; } }
.pill-sub:active { transform: scale(.95) !important; }
.bm__block { margin-block-start: 1.5rem; }
.bm__h { display: flex; align-items: center; gap: .7rem; margin-block-end: .7rem; font-family: var(--display); font-size: .92rem; font-weight: 700; color: var(--text-2); }
.bm__h::after { content: ""; flex: 1; block-size: 1px; background: var(--line-str); }
.bm__chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.bm__routes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.route--bm { min-block-size: 3.2rem; padding: .55rem .75rem; gap: .65rem; background: var(--surface); opacity: 0; transform: translateY(10px); }
.route--bm > svg:first-child { inline-size: 2.1rem; block-size: 2.1rem; padding: .45rem; }
.route--bm b { font-size: .88rem; line-height: 1.3; }
.bm[data-open="1"] .route--bm { opacity: 1; transform: none; transition: opacity .4s var(--e-out) var(--d, 0s), transform .45s var(--e-out) var(--d, 0s), background var(--t-fast); }
@media (min-width: 40rem) { .bm__routes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* ---------------------------------------------------------------- small pieces */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
position: fixed; inset-block-start: .5rem; inset-inline-start: .5rem; z-index: 400;
padding: .7rem 1rem; border-radius: 999px;
background: var(--ink); color: #fff; font-weight: 700;
transform: translateY(-200%);
transition: transform var(--t-fast) var(--e-out);
}
.skip:focus { transform: none; }
/* the kind a search is narrowed to, removable in one tap */
.srch__active { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-block-end: .6rem; padding: .3rem .3rem .3rem .9rem; border-radius: 999px; background: var(--surface-2); font-weight: 700; font-size: .86rem; }
.res__best { flex: none; display: grid; place-items: center; min-inline-size: 2.2rem; block-size: 1.6rem; padding-inline: .4rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .72rem; font-weight: 800; }
/* quiz answers carry an icon, so the choice reads before the words */
.quiz__opt { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.quiz__opt svg { inline-size: 1.25rem; block-size: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.quiz__tag { font-size: .72rem; font-weight: 700; color: var(--red-ink); }
.sheet__badges--kinds .sheet__kind { font-size: .74rem; }
/* offline: said plainly, out of the way */
.netbar {
position: fixed; inset-inline: 0; margin-inline: auto;
inset-block-start: calc(max(.55rem, env(safe-area-inset-top)) + 3.6rem);
z-index: 95;
inline-size: max-content; max-inline-size: calc(100% - 2rem);
padding: .5rem 1rem; border-radius: 999px;
background: var(--ink); color: #fff;
font-size: .82rem; font-weight: 600;
box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
opacity: 0; transform: translateY(-8px);
transition: opacity var(--t-exit) var(--e-out), transform var(--t-exit) var(--e-out);
}
.netbar[data-on="1"] { opacity: 1; transform: none; }
:root[data-theme="dark"] .netbar { background: #fff; color: var(--ink); }
/* ---------------------------------------------------------------- idle showcase
Left alone, the menu turns into a slow showcase of the house favourites. */
.idle {
position: fixed; inset: 0;
z-index: 300;
display: grid; grid-template-rows: auto 1fr auto;
padding: calc(env(safe-area-inset-top) + 1rem) 1.2rem calc(env(safe-area-inset-bottom) + 1.2rem);
background: radial-gradient(90% 60% at 50% 30%, #1d1d1d, #050505 70%);
color: #fff;
opacity: 0;
transition: opacity .35s var(--e-out);
cursor: pointer;
}
.idle[data-on="1"] { opacity: 1; }
.idle__bars { display: flex; gap: 4px; }
.idle__bars i { flex: 1; block-size: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.idle__bars i b { display: block; block-size: 100%; inline-size: 0; background: #fff; }
.idle__bars i[data-s="done"] b { inline-size: 100%; }
.idle__bars i[data-s="now"] b { animation: idle-bar 4.2s linear forwards; }
@keyframes idle-bar { to { inline-size: 100%; } }
.idle__stage { display: grid; place-items: center; overflow: hidden; }
.idle__slide { display: grid; justify-items: center; gap: 1.2rem; text-align: center; animation: idle-in .7s var(--e-out); }
@keyframes idle-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.idle__arch {
inline-size: min(66vw, 20rem);
aspect-ratio: 4 / 5;
border-radius: var(--arch);
overflow: hidden;
box-shadow: 0 0 0 6px #050505, 0 0 0 7px rgba(255, 255, 255, .35), 0 40px 70px -30px rgba(216, 31, 38, .45);
}
.idle__arch img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: idle-zoom 4.2s linear both; }
@keyframes idle-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }
.idle__txt { display: grid; justify-items: center; gap: .3rem; }
.idle__k { color: var(--red-lit); font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.idle__txt h3 { font-family: var(--display); font-size: clamp(1.8rem, 8vw, 2.8rem); font-weight: 800; line-height: 1.2; }
.idle__alt { font-family: var(--italian); font-style: italic; font-size: 1.2rem; color: rgba(255, 255, 255, .6); }
.idle__d { font-size: .92rem; color: rgba(255, 255, 255, .72); max-inline-size: 24rem; margin-inline: auto; }
.idle__see { margin-block-start: .6rem; }
.idle__hint { text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .5); }
/* ---------------------------------------------------------------- calm */
@media (prefers-reduced-motion: reduce) {
.item__plate:not(.is-loaded)::before { animation: none; }
.item__plate img { opacity: 1; transition: none; }
.kinds__bar, .kinds__now b { transition: none; }
.res, .quiz__body, .idle__slide, .idle__arch img { animation: none; }
.fav.is-pop::before { animation: none; }
.toast, .totop { transition: none; }
.bm, .pill-link, .pill-label, .pill-sub, .route--bm { transition: none !important; }
}
/* ---------------------------------------------------------------- framed
A hairline that draws itself once round a piece as it arrives — a tile's
arch, the sheet's photograph, a card — then lets go. motion.css plays it;
without motion it is simply never seen. Registered so the sweep animates. */
@property --sweep { syntax: ''; inherits: false; initial-value: 0deg; }
.fx, .frame::after {
position: absolute; inset: 0; z-index: 4;
border-radius: inherit;
border: 2px solid var(--frame-c, var(--red));
-webkit-mask: conic-gradient(from 200deg, #000 var(--sweep), transparent 0);
mask: conic-gradient(from 200deg, #000 var(--sweep), transparent 0);
opacity: 0;
pointer-events: none;
}
.frame { position: relative; }
.frame::after { content: ""; }
:root[dir="rtl"] :is(.fx, .frame::after) { transform: scaleX(-1); } /* RTL: it draws from the other side */
.items .item__plate { --frame-c: color-mix(in srgb, var(--acc, var(--red)) 45%, #fff); }
.sheet__figure, .show__arch, .podium__arch { --frame-c: var(--red-lit); }
.method__arch { --frame-c: #fff; }
/* ---------------------------------------------------------------- search: before typing */
.srch__stat { margin-block: .1rem .5rem; font-size: .8rem; font-weight: 600; color: var(--text-2); }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.6rem, 1fr)); gap: .45rem; }
.kchip {
display: flex; align-items: center; gap: .55rem;
min-block-size: 2.9rem; padding: .4rem .55rem .4rem .7rem;
border: 1px solid var(--line-str); border-radius: 14px;
background: var(--surface); color: var(--text);
font-size: .84rem; font-weight: 600; text-align: start;
touch-action: manipulation;
transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-press) var(--e-out);
}
.kchip svg { flex: none; inline-size: 1.2rem; block-size: 1.2rem; fill: none; stroke: var(--red-ink); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.kchip span { flex: 1; min-inline-size: 0; }
.kchip b { flex: none; min-inline-size: 1.6rem; padding: .1rem .4rem; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: .72rem; text-align: center; }
.kchip:active { transform: scale(.96); }
@media (hover: hover) { .kchip:hover { border-color: var(--red); } }
/* ---------------------------------------------------------------- my picks: the summary */
.picks__sum {
display: flex; align-items: center; gap: .9rem;
margin: .2rem .35rem .6rem; padding: .8rem .9rem;
border-radius: 20px; background: var(--surface-2);
}
.picks__n {
flex: none; display: grid; place-items: center;
inline-size: 3.2rem; block-size: 4rem; border-radius: var(--arch);
background: var(--red); color: #fff;
font-family: var(--display); font-size: 1.5rem; font-weight: 800;
}
.picks__sumtxt { display: grid; gap: .35rem; min-inline-size: 0; }
.picks__sumtxt > b { font-size: .95rem; }
.picks__secs { display: flex; flex-wrap: wrap; gap: .3rem; }
.picks__secs i {
display: inline-flex; align-items: center; gap: .35rem;
padding: .15rem .55rem; border-radius: 999px;
border: 1px solid var(--line-str); background: var(--surface);
font-style: normal; font-size: .72rem; font-weight: 600; color: var(--text-2);
}
.picks__secs i::before { content: ""; inline-size: .45rem; block-size: .45rem; border-radius: 50%; background: var(--acc, var(--red)); }
.picks__goes { padding: .6rem .35rem 0; }
.picks__goes .sheet__pairs { margin-block-start: .2rem; }
/* ---------------------------------------------------------------- the dock: how far through the menu */
.tab .tab__ring {
position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
inline-size: 2.5rem; block-size: 2.5rem;
translate: -50% -50%; rotate: -90deg;
opacity: 0; transition: opacity var(--t-fast);
}
:root[dir="rtl"] .tab .tab__ring { translate: 50% -50%; }
.tab__ring circle { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 2.2; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--mp, 0) * 100); transition: stroke-dashoffset .2s linear; }
.tab[aria-current="true"] .tab__ring { opacity: 1; }
.quiz__card { position: relative; }
/* ---------------------------------------------------------------- the sheet: its neighbours, and sharing */
.sheet__nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; inline-size: 100%; margin-block-end: .2rem; }
.sheet__pos { flex: 1; text-align: center; font-size: .78rem; font-weight: 600; color: var(--text-2); }
.sheet__step { inline-size: 2.75rem; block-size: 2.75rem; }
:root[dir="rtl"] .sheet__step svg { transform: scaleX(-1); }
.sheet__share { inline-size: 2.75rem; block-size: 2.75rem; flex: none; }
.sheet__figure { touch-action: pan-y; }
/* ---------------------------------------------------------------- my picks, for the captain */
.picks__show { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; inline-size: calc(100% - .7rem); margin: 0 .35rem .5rem; }
.picks__show svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; }
.cap { display: grid; gap: 1rem; padding: .4rem .35rem 1rem; justify-items: stretch; }
.cap__h { text-align: center; font-size: .9rem; font-weight: 700; color: var(--text-2); }
.cap__list { display: grid; gap: .6rem; counter-reset: cap; }
.cap__list li { counter-increment: cap; display: grid; gap: .1rem; padding: .9rem 1rem .9rem 3.4rem; position: relative; border-radius: 18px; background: var(--surface-2); }
:root[dir="rtl"] .cap__list li { padding: .9rem 3.4rem .9rem 1rem; }
.cap__list li::before { content: counter(cap); position: absolute; inset-inline-start: .9rem; inset-block-start: .9rem; display: grid; place-items: center; inline-size: 1.8rem; block-size: 1.8rem; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: .9rem; }
.cap__list b { font-family: var(--display); font-size: clamp(1.5rem, 7vw, 2rem); font-weight: 800; line-height: 1.25; }
.cap__list span { font-size: 1.05rem; font-weight: 600; color: var(--text-2); }
.cap__list small { font-size: .78rem; color: var(--text-2); }
.cap .btn { justify-self: center; }
/* ---------------------------------------------------------------- surprise me */
.surprise__body { display: grid; justify-items: center; gap: 1rem; padding: .6rem 1.35rem 1.4rem; text-align: center; }
.reel { position: relative; inline-size: min(62%, 15rem); aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: var(--ink); box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .75); --frame-c: var(--red-lit); }
.reel__strip { display: grid; block-size: calc(100% * var(--n)); grid-template-rows: repeat(var(--n), 1fr); transform: translate3d(0, calc(-100% * (var(--n) - 1) / var(--n)), 0); }
.reel__cell { display: block; overflow: hidden; }
.reel__cell img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.surprise__res { display: grid; justify-items: center; gap: .3rem; }
.surprise__cat { font-size: .78rem; font-weight: 700; color: var(--red-ink); }
.surprise__name { font-family: var(--display); font-size: clamp(1.4rem, 6vw, 1.8rem); font-weight: 800; line-height: 1.25; }
.surprise__alt { font-size: .85rem; color: var(--text-2); }
.surprise__desc { max-inline-size: 24rem; font-size: .9rem; color: var(--text-2); }
.surprise__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-block-start: .5rem; }
/* ---------------------------------------------------------------- text size */
.bm__text { display: flex; gap: .5rem; }
.bm__text button { flex: 1; min-block-size: 2.9rem; border-radius: 999px; border: 1px solid var(--line-str); background: var(--surface); color: var(--text); font-weight: 800; font-family: var(--la-sans); transition: background var(--t-fast), color var(--t-fast); }
.bm__text button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
:root[data-theme="dark"] .bm__text button[aria-pressed="true"] { background: #fff; color: var(--ink); }
html[data-text="l"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }
html[data-text="l"] body { font-size: 19.5px; }
html[data-text="xl"] body { font-size: 21.5px; }
/* with larger letters, the two-up route cards stack, so their words have room */
html:is([data-text="l"], [data-text="xl"]) :is(.bm__routes, .decide__routes, .pill-list) { grid-template-columns: minmax(0, 1fr); }
/* ---------------------------------------------------------------- the sheet: at a glance */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; inline-size: 100%; margin-block: .2rem .4rem; }
.fact { display: flex; align-items: center; gap: .55rem; padding: .55rem .6rem; border-radius: 14px; background: var(--surface-2); text-align: start; min-inline-size: 0; }
.fact__ico { flex: none; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--surface); }
.fact__ico svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: var(--red-ink); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.fact__txt { display: grid; min-inline-size: 0; line-height: 1.3; }
.fact__txt small { font-size: .68rem; color: var(--text-2); }
.fact__txt b { font-size: .8rem; font-weight: 700; overflow-wrap: anywhere; }
/* css/sections.css */
/* =====================================================================
CAFÈ BARBERA — sections: the page from top to bottom.
Welcome · house favourites · signatures · the menu index · the menu's
section openers · help me choose · visit · the story · the method ·
from Italy to Baghdad · the footer.
===================================================================== */
/* ---------------------------------------------------------------- welcome
White, with the 1870 shop standing in an arch: the doors it opened onto
the street were arches too. Black-and-white by blending, so the red
founding stamp stays red. */
.hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
overflow: clip;
isolation: isolate;
text-align: center;
padding: calc(4.6rem + env(safe-area-inset-top)) var(--pad) 2.6rem;
color: var(--text);
background: var(--bg);
}
/* ---- the stage above the welcome: one of three designs (see heroStage in menu.js) ---- */
.hero__stage { position: relative; z-index: 0; inline-size: 100%; display: grid; justify-items: center; }
/* A · stage — the house favourites take turns in the arch, on the house black (D shares the ground) */
.hero:is([data-hero="stage"], [data-hero="signature"]) {
--bg: #0D0D0D; --surface: #1C1C1C; --text: #FFFFFF; --text-2: rgba(255, 255, 255, .78); --text-3: rgba(255, 255, 255, .64); --line: rgba(255, 255, 255, .14);
background: radial-gradient(120% 65% at 50% 16%, #3A1012 0%, #160A0A 38%, #0D0D0D 70%);
color: var(--text);
}
:root:is([data-hero="stage"], [data-hero="signature"]) .topbar[data-lifted="0"] {
--bg: #0D0D0D; --surface: #1C1C1C; --text: #FFFFFF; --line: rgba(255, 255, 255, .16);
background: color-mix(in srgb, #0D0D0D 88%, transparent); color: #fff;
}
.stage { display: grid; justify-items: center; gap: .85rem; }
.stage__arch {
position: relative; display: block;
inline-size: clamp(9.5rem, min(52vw, 26svh), 21rem); aspect-ratio: 4 / 5;
border-radius: var(--arch); overflow: hidden; background: #000;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 40px 70px -30px rgba(216, 31, 38, .6);
--frame-c: var(--red-lit);
}
.stage__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--e-out), transform 3.8s linear; }
.stage__img.is-on { opacity: 1; transform: scale(1); }
.stage__cap { display: inline-flex; align-items: center; gap: .55rem; padding: .3rem .9rem .3rem .3rem; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-size: .86rem; font-weight: 600; color: #fff; }
.stage__cap b { display: grid; place-items: center; min-inline-size: 2rem; block-size: 2rem; padding-inline: .35rem; border-radius: 999px; background: var(--red); font-size: .82rem; font-weight: 800; }
.stage__dots { display: flex; gap: .35rem; }
.stage__dots i { inline-size: .45rem; block-size: .45rem; border-radius: 999px; background: rgba(255, 255, 255, .3); transition: inline-size .35s var(--e-out), background .35s; }
.stage__dots i.is-on { inline-size: 1.6rem; background: var(--red-lit); }
.hero:is([data-hero="stage"], [data-hero="signature"]) .mark { filter: drop-shadow(0 2px 18px rgba(216, 31, 38, .35)); }
/* B · mosaic — a wall of arches, each section's best seller; the middle column sits lower */
.hero[data-hero="mosaic"] { background: linear-gradient(180deg, color-mix(in srgb, var(--red) 6%, var(--surface-2)) 0%, var(--bg) 62%); }
.mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; inline-size: min(100%, 25rem); padding-block-end: 1.3rem; }
.mosaic__tile {
position: relative; display: block; aspect-ratio: 4 / 5;
border-radius: var(--arch); overflow: hidden; background: var(--ink);
box-shadow: 0 18px 30px -20px rgba(0, 0, 0, .6);
--frame-c: color-mix(in srgb, var(--red) 55%, #fff);
}
.mosaic__tile:nth-child(3n + 2) { translate: 0 1.3rem; }
.mosaic__tile img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mosaic__lbl { position: absolute; inset-inline: .3rem; inset-block-end: .35rem; padding: .12rem .4rem; border-radius: 999px; background: rgba(13, 13, 13, .74); color: #fff; font-size: .62rem; font-weight: 700; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* on a phone the welcome and both buttons must share the first screen with the stage */
@media (max-width: 40rem) { .hero .hero__lead { display: none; } } /* from the first paint, not once the script has run: no jump */
/* C · cup — one steaming cup on the house red, open now, and something for the hour */
.hero[data-hero="cup"] { background: radial-gradient(90% 50% at 50% 20%, color-mix(in srgb, var(--red) 16%, var(--bg)) 0%, var(--bg) 72%); }
.cup { display: grid; justify-items: center; gap: .85rem; }
.cup__disc {
position: relative; display: grid; place-items: center;
inline-size: clamp(9.5rem, min(50vw, 24svh), 18rem); aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle at 34% 28%, #F0444B, var(--red) 55%, #9C1117);
box-shadow: 0 40px 60px -30px rgba(216, 31, 38, .7), inset 0 -12px 30px rgba(0, 0, 0, .25);
}
.cup__img { position: relative; z-index: 2; inline-size: 84%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 5px rgba(255, 255, 255, .9), 0 22px 30px -14px rgba(0, 0, 0, .55); }
.cup__steam { position: absolute; z-index: 1; inset-block-start: -2%; inset-inline: 0; display: flex; justify-content: center; gap: 7%; pointer-events: none; }
.cup__steam i { inline-size: 8%; aspect-ratio: 1 / 3.4; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%); filter: blur(4px); opacity: 0; }
.cup__bean { position: absolute; z-index: 3; inline-size: 13%; block-size: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.cup__bean--a { inset-block-start: 9%; inset-inline-start: 2%; rotate: -25deg; }
.cup__bean--b { inset-block-end: 10%; inset-inline-end: 0; rotate: 40deg; inline-size: 11%; }
.cup__bean--c { inset-block-start: 24%; inset-inline-end: 4%; rotate: 12deg; inline-size: 9%; }
.cup__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.cup__live { display: inline-flex; align-items: center; gap: .45rem; min-block-size: 2.4rem; padding: .3rem .85rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .8rem; font-weight: 700; color: var(--text); }
.cup__live i { inline-size: .55rem; block-size: .55rem; border-radius: 50%; background: #8A8A8A; }
.cup__live[data-open="1"] i { background: #1E9E57; box-shadow: 0 0 0 3px rgba(30, 158, 87, .2); }
.cup__sug { display: inline-flex; align-items: center; gap: .55rem; min-block-size: 2.75rem; padding: .3rem .85rem .3rem .3rem; border-radius: 999px; background: var(--ink); color: #fff; text-align: start; }
.cup__sug-img { inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%; object-fit: cover; flex: none; }
.cup__sug span { display: grid; line-height: 1.25; }
.cup__sug small { font-size: .66rem; color: rgba(255, 255, 255, .72); }
.cup__sug b { font-size: .82rem; }
:root[data-theme="dark"] .cup__sug { background: #fff; color: var(--ink); }
:root[data-theme="dark"] .cup__sug small { color: rgba(13, 13, 13, .66); }
.hero__captain { margin-block-start: .2rem; font-size: .84rem; }
.hero__inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: .6rem; max-width: 38rem; margin-block-start: 1.2rem; }
.hero .dhero__cta { margin-block-start: .25rem; }
.hero .mark { --mark-w: min(12.5rem, 56vw); }
:root[data-theme="dark"] .hero .mark { filter: drop-shadow(0 2px 18px rgba(216, 31, 38, .4)); }
.hero .tagline { color: var(--text-3); }
.hero__welcome { font-size: .95rem; color: var(--text-2); font-weight: 600; }
.hero__h1 { color: var(--text); font-weight: 800; font-size: var(--fs-display); text-wrap: balance; }
.hero__lead { color: var(--text-2); font-size: .98rem; max-width: 30rem; }
.dhero__cta { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.hero .btn:not(.btn--solid),
.hero .btn:not(.btn--solid):hover { background: var(--surface); color: var(--text); border-color: var(--text); }
@media (max-width: 40rem) {
.dhero__cta { padding-block-start: .3rem; }
.dhero__cta .btn { padding: .7rem 1.3rem; }
}
@media (max-height: 30rem) and (orientation: landscape) {
.hero__lead { display: none; }
}
/* a few real roasted beans drifting behind — depth, not confetti */
.beans { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.beans img {
position: absolute; inset-block-start: 0;
inline-size: var(--s, 22px); block-size: auto;
opacity: 0;
filter: blur(var(--b, .5px));
animation: drift var(--d, 30s) linear infinite;
animation-delay: var(--dl, 0s);
will-change: transform;
}
.beans:not(.is-live) img { animation-play-state: paused; } /* they drift only on screen */
@keyframes drift {
from { transform: translate3d(0, -14vh, 0) rotate(-8deg); opacity: 0; }
10% { opacity: calc(var(--o, .3) * .7); }
90% { opacity: calc(var(--o, .3) * .7); }
to { transform: translate3d(var(--dx, 3vw), 116vh, 0) rotate(96deg); opacity: 0; }
}
/* ---------------------------------------------------------------- house favourites
The real top five, ranked, each in an arch; the frame holds still while
the contents change. */
.showcase {
position: relative;
overflow: hidden;
isolation: isolate;
padding-block: clamp(2.2rem, 7vw, 3.4rem) clamp(1.8rem, 6vw, 2.8rem);
background: radial-gradient(90% 70% at 50% 0%, var(--cream), transparent 70%), var(--paper);
border-block: 1px solid var(--line);
}
:root[data-theme="dark"] .showcase { background: radial-gradient(90% 70% at 50% 0%, var(--ink-2), transparent 70%), var(--ink); }
.show__head { display: grid; justify-items: center; text-align: center; gap: .15rem; margin-block-end: 1rem; }
.show__head h2 { font-size: var(--fs-h2); }
.show__note { font-size: var(--fs-meta); color: var(--text-3); font-weight: 600; }
.showcase__ghost { display: none; }
.showcase__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1rem; width: min(100% - var(--pad) * 2, var(--col)); margin-inline: auto; }
.showcase__stage { position: relative; display: grid; place-items: center; inline-size: 100%; padding-block: .4rem 1.4rem; }
.show__arch {
position: relative;
inline-size: min(64vw, 17rem);
aspect-ratio: 4 / 5;
border-radius: var(--arch);
overflow: hidden;
background: var(--ink);
box-shadow: var(--rim), 0 30px 50px -30px rgba(0, 0, 0, .7);
transition: opacity .26s var(--e-out), transform .26s var(--e-out);
}
.show__arch img {
position: absolute; inset: 0;
inline-size: 100%; block-size: 100%;
max-inline-size: none;
object-fit: cover;
object-position: bottom center;
transition: opacity .5s var(--e-io), transform .7s var(--e-out);
}
.showcase[data-anim="1"] .show__arch { opacity: 0; transform: translateY(14px) scale(.97); }
.showcase[data-anim="1"] .show__arch img { opacity: 0; transform: translate3d(0, 22px, 0) scale(.94); }
.show__rank {
position: absolute;
inset-block-end: -.9rem;
inset-inline-start: 50%;
translate: 50% 0;
display: grid; place-items: center;
inline-size: 4.2rem; aspect-ratio: 1;
border-radius: 50%;
background: var(--red); color: #fff;
box-shadow: 0 0 0 4px var(--bg);
line-height: 1;
}
:root[dir="ltr"] .show__rank { translate: -50% 0; }
.show__rank b { font-family: var(--display); font-size: 1.5rem; font-weight: 800; }
.show__rank small { font-size: .5rem; font-weight: 700; letter-spacing: .02em; text-align: center; padding-inline: .3rem; }
.showcase__body { display: grid; justify-items: center; gap: .5rem; text-align: center; margin-block-start: 1.6rem; }
.showcase__body > * { transition: opacity .45s var(--e-io), transform .6s var(--e-out); }
.showcase[data-anim="1"] .showcase__body > * { opacity: 0; transform: translate3d(0, 10px, 0); }
.showcase__body .kick { font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--red-ink); }
.showcase__body h3 { font-family: var(--display); font-size: clamp(1.6rem, 6.6vw, 2.1rem); font-weight: 800; line-height: 1.3; }
.showcase__body .alt { font-family: var(--la-serif); font-size: 1rem; color: var(--text-3); unicode-bidi: isolate; }
.showcase__body p { color: var(--text-2); font-size: .95rem; max-width: 27rem; }
.showcase .price .tag { border: 0; background: none; padding: 0 .35rem; }
.showcase .price .tag__val { font-size: .8rem; font-weight: 500; color: var(--price-ink); }
.showcase .price .tag__size, .showcase .price .tag__cur { color: var(--price-ink); font-size: .6rem; font-weight: 500; }
.showcase__arrow {
position: absolute;
inset-block-start: 42%;
z-index: 4;
display: grid; place-items: center;
inline-size: 2.9rem; block-size: 2.9rem;
border-radius: 50%;
border: 1px solid var(--line);
background: var(--surface);
color: var(--text-2);
box-shadow: var(--shadow);
transition: transform var(--t-fast) var(--e-back), color var(--t-fast), border-color var(--t-fast);
}
.showcase__arrow svg { inline-size: 1.2rem; block-size: 1.2rem; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.showcase__arrow:hover { color: var(--red-ink); border-color: var(--red); transform: scale(1.08); }
.showcase__arrow:active { transform: scale(.94); }
.showcase__arrow--prev { inset-inline-start: max(.6rem, calc(50% - var(--col) / 2 - 3.4rem)); }
.showcase__arrow--next { inset-inline-end: max(.6rem, calc(50% - var(--col) / 2 - 3.4rem)); }
:root[dir="rtl"] .showcase__arrow svg { transform: scaleX(-1); } /* the glyphs point along the reading direction */
/* a 44px button each, the visible dot drawn inside */
.showcase__dots { position: relative; z-index: 4; display: flex; justify-content: center; gap: 0; padding-block: 1.2rem .4rem; }
.showcase__dots button {
position: relative;
display: grid; place-items: center;
inline-size: 2.75rem; block-size: 2.75rem;
border-radius: 0; background: none; opacity: 1;
touch-action: manipulation;
transition: inline-size var(--t) var(--e-out), background var(--t-fast);
}
.showcase__dots button::before {
content: "";
inline-size: .5rem; block-size: .5rem; border-radius: 999px;
background: var(--line-str);
transition: inline-size var(--t) var(--e-out), background var(--t-fast);
}
.showcase__dots button[aria-current="true"]::before { inline-size: 1.6rem; background: var(--red); }
/* ---------------------------------------------------------------- the signatures: coverflow on black
One number — the card width — drives the whole rake. */
.cover {
position: relative;
padding-block: clamp(2.4rem, 8vw, 4rem) clamp(2rem, 7vw, 3.2rem);
background: var(--ink);
color: #fff;
overflow: hidden;
isolation: isolate; /* the cards' z-indices stay inside, under the sheets */
}
.cover__head { display: grid; gap: .2rem; justify-items: center; text-align: center; }
.cover__head h2 { font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
.cover .eyebrow { color: var(--red-lit); }
.cover h2 { color: #fff; }
.cf { position: relative; --cf-card: clamp(176px, 50vw, 264px); }
@media (min-width: 48rem) { .cf { --cf-card: clamp(200px, 24vw, 280px); } }
.cf__frame {
position: relative;
overflow: hidden;
padding-block: 2.2rem 2.6rem;
perspective: calc(var(--cf-card) * 3);
touch-action: pan-y; /* horizontal drag is ours, vertical scroll stays the page's */
cursor: grab;
outline: none;
direction: ltr; /* the ring is laid out physically; RTL is handled in JS */
}
.cf__frame:active { cursor: grabbing; }
.cf__frame:focus-visible { box-shadow: inset 0 0 0 2px var(--red); border-radius: var(--r); }
.cf__stage { position: relative; block-size: var(--cf-card); transform-style: preserve-3d; user-select: none; -webkit-user-select: none; }
.cf__card {
position: absolute;
inset-block-start: 0;
left: 50%; /* physical on purpose — translateX(-50%) centres it */
inline-size: var(--cf-card);
aspect-ratio: 1;
border-radius: 20px;
overflow: hidden;
background: #000;
box-shadow: 0 22px 40px -14px rgba(20, 12, 8, .55), 0 2px 0 rgba(255, 255, 255, .06) inset;
will-change: transform, opacity;
backface-visibility: hidden;
}
.cf__card img { inline-size: 100%; block-size: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.cf__card::after {
content: "";
position: absolute; inset-block-end: .55rem; inset-inline-start: .65rem;
inline-size: 42%; aspect-ratio: 436 / 122;
background: url("../brand/logo-red.png") center / contain no-repeat;
filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .9)) brightness(1.15);
pointer-events: none;
}
.cf__nav {
position: absolute; inset-block-start: 50%; z-index: 300;
translate: 0 -50%;
display: grid; place-items: center;
inline-size: 2.75rem; block-size: 2.75rem;
border-radius: 50%;
background: rgba(255, 255, 255, .1);
border: 1px solid rgba(255, 255, 255, .18);
color: #fff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: none;
transition: background var(--t-fast), transform var(--t-fast) var(--e-back);
touch-action: manipulation;
}
.cf__nav:hover { background: rgba(255, 255, 255, .2); }
.cf__nav:active { transform: scale(.92); }
.cf__nav svg { inline-size: 1.15rem; block-size: 1.15rem; fill: none; stroke: currentColor; stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round; }
.cf__nav--prev { inset-inline-start: .6rem; }
.cf__nav--next { inset-inline-end: .6rem; }
:root[dir="rtl"] .cf__nav svg { transform: scaleX(-1); }
.cf__cap { display: grid; justify-items: center; gap: .15rem; padding-inline: var(--pad); text-align: center; min-block-size: 9.5rem; animation: cf-in .35s var(--e-out); }
@keyframes cf-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
.cf__cap .t { font-family: var(--display); font-size: 1.45rem; font-weight: 700; line-height: 1.3; color: #fff; }
.cf__cap .s { font-size: .82rem; color: rgba(255, 255, 255, .55); }
.cf__cap dl { inline-size: min(100%, 15rem); margin-block-start: .7rem; display: grid; gap: .1rem; }
.cf__cap dl > div { display: flex; justify-content: space-between; align-items: baseline; padding-block: .22rem; border-block-end: 1px dashed; border-color: rgba(255, 255, 255, .14); font-size: .8rem; }
.cf__cap dt { color: rgba(255, 255, 255, .55); font-size: .74rem; }
.cf__cap dd { font-size: .78rem; font-weight: 500; color: rgba(255, 255, 255, .56); font-variant-numeric: tabular-nums; }
.cf__cap .go { margin-block-start: .8rem; padding: .55rem 1.2rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .85rem; font-weight: 700; min-block-size: 2.75rem; }
.cf__dots { display: flex; justify-content: center; gap: 0; padding-block-start: .8rem; flex-wrap: wrap; padding-inline: var(--pad); }
.cf__dots button {
position: relative;
display: grid; place-items: center;
inline-size: 2.75rem; block-size: 2.75rem;
border-radius: 999px;
background: none; opacity: 1;
transition: opacity var(--t-fast), inline-size var(--t) var(--e-out), background var(--t-fast);
}
.cf__dots button::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 999px; background: rgba(255, 255, 255, .45); transition: inline-size var(--t) var(--e-out), background var(--t-fast); }
.cf__dots button[aria-current="true"] { inline-size: 3.25rem; }
.cf__dots button[aria-current="true"]::before { inline-size: 1.5rem; background: var(--red); }
/* on a phone twelve 44px dots will not fit: a counter and a progress line instead */
.cf__count { display: none; }
@media (max-width: 47.99rem) {
.cf__dots { display: none; }
.cf__count {
display: grid; justify-items: center; gap: .45rem;
padding-block-start: .9rem;
font-size: .8rem; font-weight: 700; letter-spacing: .08em;
color: rgba(255, 255, 255, .7);
}
.cf__count i { display: block; inline-size: 7rem; block-size: 2px; border-radius: 2px; background: rgba(255, 255, 255, .2); position: relative; overflow: hidden; }
.cf__count i::after { content: ""; position: absolute; inset: 0; background: var(--red); transform-origin: right; transform: scaleX(var(--p, 0)); transition: transform .35s var(--e-out); }
:root[dir="ltr"] .cf__count i::after { transform-origin: left; }
}
/* ---------------------------------------------------------------- the menu index
One panel per section. Closed panels are dimmed to black; the open one
blooms back to the full photograph. */
.ag-sec { padding-block: clamp(2.2rem, 7vw, 3.6rem) clamp(1.6rem, 5vw, 2.6rem); }
.ag-sec .cover__head { margin-block-end: 1.1rem; }
.accordion-gallery {
--ag-gap: 6px;
--ag-radius: 14px;
--ag-media-size: 320px;
--ag-ratio: .4; /* share of the row the open panel takes */
--ag-grow: 6; /* set from --ag-ratio by JS */
--ag-dur: .6s;
--ag-ease: cubic-bezier(.215, .61, .355, 1);
--s: 1; /* reading direction, for the caption slide */
--ag-overlay: #0D0D0D;
display: flex;
flex-direction: row;
gap: var(--ag-gap);
block-size: 30rem;
perspective: 1400px;
perspective-origin: 50% 50%;
}
:root[dir="rtl"] .accordion-gallery { --s: -1; }
@media (max-width: 47.99rem) {
/* phones: a column, tall enough that the open panel really opens and every
closed strip is still a 44px tap target */
.accordion-gallery { flex-direction: column; block-size: 42rem; --ag-ratio: .36; perspective: none; }
}
.ag-panel {
position: relative;
flex: 1 1 0;
min-inline-size: 0;
min-block-size: 0;
overflow: hidden;
display: block;
border-radius: var(--ag-radius);
color: #fff;
background: var(--ag-overlay);
box-shadow: 0 10px 30px -18px rgba(20, 16, 13, .7);
transform: rotateX(var(--ag-rx, 0deg)) rotateY(var(--ag-ry, 0deg));
transform-origin: center;
transition: flex-grow var(--ag-dur) var(--ag-ease), transform var(--ag-dur) var(--ag-ease), box-shadow var(--t-fast);
-webkit-tap-highlight-color: transparent;
}
.ag-panel.is-active { flex-grow: var(--ag-grow); }
.ag-panel:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ag-accent), 0 10px 30px -18px rgba(20, 16, 13, .7); }
.ag-panel__frame { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.ag-panel__media {
position: absolute;
top: 50%; left: 50%; /* physical on purpose — the translate centres it */
inline-size: var(--ag-media-size);
block-size: 100%;
transform: translate(calc(-50% + var(--ag-x, 0px)), calc(-50% + var(--ag-y, 0px)));
filter: grayscale(1) contrast(1.08);
transition: transform var(--ag-dur) var(--ag-ease), filter var(--ag-dur) var(--ag-ease);
}
.ag-panel.is-active .ag-panel__media { filter: none; }
@media (max-width: 47.99rem) { .ag-panel__media { inline-size: 100%; block-size: var(--ag-media-size); } }
.ag-panel__media img { inline-size: 100%; block-size: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.ag-panel__overlay { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--ag-overlay) 86%, transparent), transparent 58%); }
.ag-panel__overlay::before { content: ""; position: absolute; inset: 0; background: var(--ink, #0D0D0D); opacity: .72; transition: opacity var(--ag-dur) var(--ag-ease); }
.ag-panel.is-active .ag-panel__overlay::before { opacity: 0; }
/* the one trace of the section's own colour: a hairline at the reading edge */
.ag-panel__overlay::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 3px; background: var(--ag-accent); transition: opacity var(--ag-dur) var(--ag-ease); }
.ag-panel.is-active .ag-panel__overlay::after { opacity: 0; }
.ag-panel__spine {
position: absolute; inset-block: 0; inset-inline: 1rem;
z-index: 2;
display: flex; align-items: center; gap: .65rem;
font-weight: 700;
font-size: .98rem;
line-height: 1.2;
white-space: nowrap;
text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
pointer-events: none;
transition: opacity .3s ease;
}
.ag-panel__spine svg { flex: none; color: var(--red-lit); inline-size: 1.3rem; block-size: 1.3rem; fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.ag-panel.is-active .ag-panel__spine { opacity: 0; }
.ag-n { margin-inline-start: auto; font-style: normal; font-size: .72rem; opacity: .6; letter-spacing: .04em; }
@media (min-width: 48rem) {
/* in a row the closed panels are narrow: the name stands on its side, like a book spine */
.ag-panel__spine { inset-inline: 0; flex-direction: column; justify-content: flex-start; padding-block-start: 1.2rem; }
.ag-panel__spine span { writing-mode: vertical-rl; max-block-size: 22rem; overflow: hidden; text-overflow: ellipsis; }
.ag-n { margin-inline-start: 0; margin-block-start: auto; padding-block-end: 1rem; }
}
.ag-panel__label { position: absolute; inset-inline: 1.1rem; inset-block-end: 1rem; z-index: 2; display: flex; align-items: center; gap: .8rem; pointer-events: none; }
.ag-panel__bar, .ag-panel__text, .ag-panel__go {
opacity: 0;
transform: translateX(calc(-14px * var(--s)));
transition: opacity calc(var(--ag-dur) * .6) var(--ag-ease), transform calc(var(--ag-dur) * .6) var(--ag-ease);
}
.ag-panel__bar { flex: none; inline-size: 3px; block-size: 2.7rem; border-radius: 3px; background: var(--red); box-shadow: 0 0 14px color-mix(in srgb, var(--red) 70%, transparent); }
.ag-panel__text { flex: 1; min-inline-size: 0; display: grid; gap: .1rem; }
.ag-panel__text b { font-family: var(--display); font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.ag-panel__text em { font-style: normal; font-size: .76rem; color: rgba(255, 255, 255, .78); }
.ag-panel__text small { font-size: .78rem; color: rgba(255, 255, 255, .84); }
.ag-panel__n { font-style: normal; font-size: .72rem; color: rgba(255, 255, 255, .65); letter-spacing: .06em; }
.ag-panel__go { flex: none; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.ag-panel__go svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round; }
.ag-panel.is-active .ag-panel__bar, .ag-panel.is-active .ag-panel__text, .ag-panel.is-active .ag-panel__go { opacity: 1; transform: none; transition-duration: var(--ag-dur); }
.ag-panel.is-active .ag-panel__text { transition-delay: .06s; }
.ag-panel.is-active .ag-panel__go { transition-delay: .12s; }
/* how to use it, said once, for the input in hand */
.ag-hint { margin-block-start: .9rem; text-align: center; font-size: .82rem; color: var(--text-3); }
.ag-hint [data-for="mouse"] { display: none; }
@media (hover: hover) and (pointer: fine) {
.ag-hint [data-for="touch"] { display: none; }
.ag-hint [data-for="mouse"] { display: inline; }
}
/* ---------------------------------------------------------------- the menu: section openers
A doorway: the section's photograph in an arch at the far side, its name
in big black type beside it. A curtain in the section's own colour rises
off the arch as the section arrives — the one place that colour is loud. */
.cat { position: relative; scroll-margin-block-start: 8.5rem; background: var(--bg); transition: background .6s var(--e-io); }
.cat__hero {
position: relative;
max-inline-size: calc(var(--col) + var(--pad) * 2);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) 40%;
grid-template-rows: 1fr auto auto 1fr auto auto;
grid-template-areas: ". art" "sub art" "title art" ". art" "meta meta" "sort sort";
align-content: center;
column-gap: 1.2rem;
row-gap: .35rem;
padding: 3rem var(--pad) .4rem;
color: var(--text);
}
.cat__hero > * { position: relative; z-index: 2; }
.cat__hero img {
grid-area: art;
z-index: 0;
inline-size: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--arch);
background: var(--ink);
box-shadow: var(--rim), 0 26px 40px -26px rgba(0, 0, 0, .6);
}
/* the doors: one element per leaf, each the whole arch clipped to its half,
so it folds away to its own hinge. Shown only when the page may move. */
.cat__hero::before, .cat__hero::after {
content: "";
grid-area: art;
position: relative;
z-index: 1;
display: none;
border-radius: var(--arch);
background:
linear-gradient(to right, transparent 49.2%, rgba(0, 0, 0, .28) 49.6% 50.4%, transparent 50.8%),
linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, .14) 10% 10.8%, transparent 10.8% 54%, rgba(0, 0, 0, .14) 54% 54.8%, transparent 54.8% 60%, rgba(0, 0, 0, .14) 60% 60.8%, transparent 60.8% 92%, rgba(0, 0, 0, .14) 92% 92.8%, transparent 92.8%),
linear-gradient(160deg, color-mix(in srgb, var(--acc, var(--red)) 88%, #fff), color-mix(in srgb, var(--acc, var(--red)) 78%, #000));
}
.cat__hero::before { clip-path: inset(0 50% 0 0); transform-origin: 0 50%; }
.cat__hero::after { clip-path: inset(0 0 0 50%); transform-origin: 100% 50%; }
.cat__sub { grid-area: sub; display: flex; align-items: center; gap: .5rem; color: var(--acc-text, var(--red-ink)); font-size: var(--fs-meta); font-weight: 700; letter-spacing: .02em; }
.cat__no { font-family: var(--display); font-weight: 800; letter-spacing: .04em; }
.cat__sub::before { content: ""; inline-size: 1.4rem; block-size: 2px; background: currentColor; flex: none; }
.cat__title { grid-area: title; color: var(--text); font-size: clamp(1.7rem, 7.4vw, 2.8rem); line-height: 1.22; text-wrap: balance; }
:root[dir="ltr"] .cat__title { line-height: 1.05; }
.cat__meta { grid-area: meta; display: block; padding-block-start: .9rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
/* the sort is said, so the order is never a mystery */
.cat__sort { grid-area: sort; display: inline-flex; align-items: center; gap: .35rem; justify-self: start; margin-block-start: .35rem; padding: .2rem .65rem .2rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--acc, var(--ink)) 10%, var(--surface-2)); font-size: .74rem; font-weight: 700; color: color-mix(in srgb, var(--acc, var(--ink)) 70%, var(--text)); }
:root[data-theme="dark"] .cat__sort { color: color-mix(in srgb, var(--acc, #fff) 50%, #fff); } /* lighter at night: 4.5:1 in every section */
.cat__sort svg { inline-size: 1rem; block-size: 1rem; fill: none; stroke: currentColor; stroke-width: var(--stroke-sm); stroke-linecap: round; stroke-linejoin: round; }
.group { scroll-margin-block-start: 9rem; }
.cat__lead { color: var(--text-2); font-size: 1rem; max-width: 34rem; padding-block: 1.5rem 0; }
/* a swatch of the section's material opens it, drawing in from the reading edge */
.cat > .wrap { position: relative; }
.cat > .wrap::before {
content: "";
display: block;
block-size: 12px;
margin-block: 1.1rem .2rem;
border-radius: 999px;
background: var(--material, var(--line));
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc-ink, #000) 12%, transparent);
transform-origin: right;
transform: scaleX(var(--swatch, 0));
transition: transform 1.1s var(--e-out) .15s;
}
:root[dir="ltr"] .cat > .wrap::before { transform-origin: left; }
.cat.is-in > .wrap::before { --swatch: 1; }
/* ---------------------------------------------------------------- help me choose */
.choose { padding-block: clamp(2rem, 7vw, 3.4rem); }
.choose__card { display: grid; justify-items: center; gap: .55rem; padding: 2rem 1.2rem 1.6rem; border-radius: 28px; background: var(--ink); color: #fff; text-align: center; }
.choose__card .eyebrow { color: var(--red-lit); }
.choose__card h2 { font-size: clamp(1.45rem, 6vw, 2.1rem); color: #fff; }
.choose__card .btn { margin-block-start: .4rem; }
.choose__card .captain { color: rgba(255, 255, 255, .78); }
:root[data-theme="dark"] .choose__card { background: var(--surface-2); }
/* ---------------------------------------------------------------- visit */
.sec-head { display: grid; gap: .25rem; justify-items: center; text-align: center; margin-block-end: 1.6rem; }
.sec-head h2 { font-size: clamp(1.6rem, 6vw, 2.3rem); }
.bean-rule { display: flex; align-items: center; gap: .8rem; inline-size: min(100%, 15rem); margin-block: .45rem; }
.bean-rule::before, .bean-rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.visit { display: grid; gap: .9rem; }
@media (min-width: 40rem) { .visit { grid-template-columns: repeat(2, 1fr); } }
.visit__card {
display: grid; gap: .45rem;
padding: 1.15rem 1.25rem;
border: 1px solid var(--line); border-radius: var(--r);
background: var(--surface); box-shadow: var(--shadow);
transition: border-color var(--t-fast), transform var(--t-fast) var(--e-out);
}
.visit__card:hover { border-color: var(--red); transform: translateY(-3px); }
.visit__card h3 { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.visit__card h3 svg { inline-size: 1.15rem; block-size: 1.15rem; stroke: var(--red); fill: none; stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.visit__card p { color: var(--text-2); font-size: .94rem; }
.visit__card .hours { text-align: start; }
.visit__card .hours div { justify-content: space-between; }
/* ---------------------------------------------------------------- the method band */
.method { position: relative; overflow: hidden; padding-block: clamp(3rem, 10vw, 5rem); background: var(--ink); color: #fff; }
.method__mock {
position: absolute;
inset-block-end: -8%;
inset-inline-end: -18%;
inline-size: min(78vw, 30rem);
opacity: .1;
filter: grayscale(1) brightness(1.6);
pointer-events: none;
rotate: -8deg;
}
.method__inner { position: relative; display: grid; gap: 1.8rem; }
.method__head { display: grid; gap: .3rem; justify-items: center; text-align: center; }
.method__head .eyebrow { color: var(--red-lit); }
.method__head h2 { color: #fff; font-size: clamp(1.6rem, 6.5vw, 2.4rem); }
.method__lead { color: rgba(255, 255, 255, .74); max-inline-size: 34rem; font-size: .98rem; line-height: 1.75; text-wrap: pretty; }
.method__sub { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: .95rem; font-weight: 700; color: rgba(255, 255, 255, .86); }
.method__sub::before, .method__sub::after { content: ""; flex: 1; block-size: 1px; background: rgba(255, 255, 255, .16); }
.method__steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.method__step { display: grid; justify-items: center; gap: .35rem; text-align: center; }
.method__arch {
position: relative;
inline-size: 100%;
aspect-ratio: 4 / 5;
border-radius: var(--arch);
overflow: hidden;
background: #1a1a1a;
box-shadow: 0 0 0 4px var(--ink), 0 0 0 5px rgba(255, 255, 255, .2);
}
.method__arch img { inline-size: 100%; block-size: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); opacity: .9; }
.method__step:nth-child(1) .method__arch img { object-fit: contain; padding: 18%; }
.method__arch::after { content: ""; position: absolute; inset: 0; background: var(--red); mix-blend-mode: multiply; opacity: .25; }
.method__n {
display: grid; place-items: center;
inline-size: 2rem; aspect-ratio: 1;
margin-block-start: -1.4rem;
position: relative;
border-radius: 50%;
background: var(--red); color: #fff;
font-weight: 800; font-size: .85rem;
box-shadow: 0 0 0 3px var(--ink);
}
.method__step b { font-family: var(--display); font-size: 1rem; }
.method__step > span:last-child { font-size: .76rem; color: rgba(255, 255, 255, .62); line-height: 1.45; }
.method__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; border-block-start: 1px solid rgba(255, 255, 255, .14); padding-block-start: 1.4rem; text-align: center; }
.method__facts dt { font-family: var(--display); font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 800; line-height: 1; }
.method__facts dt small { font-size: .5em; margin-inline-start: .1em; }
.method__facts dd { font-size: .74rem; color: rgba(255, 255, 255, .6); margin-block-start: .3rem; }
/* ---------------------------------------------------------------- from Italy to Baghdad: the orbit
Three rings anchored at the bottom centre, so only their top arcs show.
The rings are set apart by more than a badge is wide (--gap), and badges
sit evenly round each ring, so no two can ever touch; the widest ring is
narrower than the screen, so nothing is clipped at the sides. */
.journey { padding-block: clamp(1.6rem, 6vw, 3rem) clamp(.6rem, 3vw, 1.6rem); }
.orbit {
--b: 2.6rem; /* badge */
--r3: min(44vw, 15rem); /* outer radius */
--gap: calc(var(--b) + .7rem); /* ring to ring, more than a badge */
position: relative;
inline-size: 100%;
block-size: calc(var(--r3) + var(--b) * .7);
overflow: hidden;
isolation: isolate;
}
@media (min-width: 48rem) { .orbit { --b: 3.3rem; --r3: 17rem; } }
.ring { position: absolute; inset-block-end: 0; left: 50%; transform: translate(-50%, 50%); border-radius: 50%; border: 1px dashed var(--line-str); aspect-ratio: 1; }
.ring--3 { inline-size: calc(var(--r3) * 2); }
.ring--2 { inline-size: calc((var(--r3) - var(--gap)) * 2); }
.ring--1 { inline-size: calc((var(--r3) - var(--gap) * 2) * 2); }
.orbit__core {
position: absolute;
inset-block-end: 0; left: 50%;
transform: translate(-50%, 50%);
inline-size: calc((var(--r3) - var(--gap) * 3) * 2 + var(--b) * .4);
aspect-ratio: 1;
border-radius: 50%;
z-index: 10;
display: grid; place-items: center;
background: var(--red);
color: #fff;
box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px color-mix(in srgb, var(--red) 40%, transparent), 0 14px 30px -10px rgba(216, 31, 38, .6);
}
.orbit__core span { transform: translateY(-58%); font-family: var(--italian); font-style: italic; font-weight: 600; font-size: clamp(.8rem, 3vw, 1.05rem); }
.ring__arm {
position: absolute;
inset-block-start: 0; left: 50%;
block-size: 50%;
margin-left: calc(var(--b) / -2);
inline-size: var(--b);
transform-origin: bottom center;
transform: rotate(var(--a, 0deg));
display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
}
.ring__badge {
inline-size: var(--b); block-size: var(--b);
flex: none;
margin-block-start: calc(var(--b) / -2);
border-radius: 50%;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--shadow);
display: grid; place-items: center;
overflow: hidden;
transform: rotate(calc(var(--a, 0deg) * -1));
}
.ring__badge img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 18%; }
.ring__badge.is-photo img, .ring__badge.is-flag img { object-fit: cover; padding: 0; }
.ring__badge.is-photo { background: var(--ink); }
.orbit-cap { text-align: center; display: grid; gap: .2rem; padding: 1.2rem var(--pad) 0; }
.orbit-cap b { font-family: var(--display); font-size: clamp(1.2rem, 5.5vw, 1.75rem); font-weight: 700; }
.orbit-cap span { font-size: .88rem; color: var(--text-3); }
/* ---------------------------------------------------------------- footer */
.foot {
border-block-start: 1px solid var(--line);
padding-block: clamp(2.5rem, 9vw, 4rem) max(3rem, calc(2rem + env(safe-area-inset-bottom)));
text-align: center; display: grid; gap: 1.4rem; justify-items: center;
}
.seal {
display: grid; place-items: center; gap: .25rem;
inline-size: 9.5rem; aspect-ratio: 1;
border: 1px solid var(--line-str); border-radius: 50%;
padding: 1rem; text-align: center;
transition: transform 1.4s var(--e-out);
}
.seal:hover { transform: rotate(360deg); }
.seal img { inline-size: 5.2rem; }
.seal span { font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); font-family: var(--la-sans); }
.hours { display: grid; gap: .35rem; font-size: .95rem; color: var(--text-2); }
.hours div { display: flex; gap: 1rem; justify-content: center; align-items: baseline; }
.hours b { color: var(--text); font-weight: 600; }
.foot__actions { display: flex; gap: .55rem; flex-wrap: wrap; justify-content: center; }
.vat { font-size: .85rem; color: var(--text-3); max-width: 28rem; }
/* ---------------------------------------------------------------- calm */
@media (prefers-reduced-motion: reduce) {
.beans { display: none; }
.seal:hover { transform: none; }
.showcase[data-anim="1"] .showcase__body > *,
.showcase[data-anim="1"] .show__arch img { opacity: 1 !important; transform: none !important; }
.cf__cap { animation: none; }
.ag-panel, .ag-panel__media, .ag-panel__overlay::before,
.ag-panel__bar, .ag-panel__text, .ag-panel__go, .ag-panel__spine { transition: none !important; }
.ag-panel { transform: none; }
.cat, .cat > .wrap::before { transition: none; }
.cat > .wrap::before { transform: none !important; }
.cat__hero::before, .cat__hero::after { display: none !important; }
.ring__arm, .ring__badge { animation: none !important; }
}
/* ---------------------------------------------------------------- print: a clean list */
@media print {
.topbar, .search, .lb, .sheet, .progress, .beans, .visit, .showcase, .cover, .ag-sec,
.kinds, .bm, .bm-btn, .journey, .method, .tabbar, .toast, .fav, .totop, .idle, .choose,
.netbar, .cat__sort, .proof, .spot, .cat__star { display: none !important; }
.hero__stage, .cat__hero img, .cat__hero::before, .cat__hero::after { display: none !important; }
.cat { background: none !important; }
.cat > .wrap::before { display: none; }
.cat__hero { display: block; padding-block: .8rem; color: #000; }
.cat__title, .cat__sub { color: #000; }
.items { grid-template-columns: repeat(3, 1fr); }
.item__plate { display: none; }
.item { opacity: 1 !important; transform: none !important; break-inside: avoid; }
}
/* ---------------------------------------------------------------- the house in numbers
A bento of true things before the visit card: open right now, years of
roasting, the real top three, the menu in four numbers, what is made here,
and the captain line. Two columns on a phone, four on a wide screen. */
.proof { padding-block-end: 0; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.bento__card {
position: relative; isolation: isolate;
display: grid; align-content: start; gap: .3rem;
padding: 1.1rem 1.1rem 1.15rem;
border-radius: 22px;
background: var(--surface); color: var(--text);
border: 1px solid var(--line);
box-shadow: var(--shadow);
overflow: hidden;
}
.bento__card[hidden] { display: none; }
.bento__card--live, .bento__card--podium, .bento__card--tally, .bento__card--made, .bento__card--captain { grid-column: span 2; }
@media (min-width: 48rem) {
.bento { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bento__card--podium { grid-row: span 2; }
.bento__card--captain { grid-column: 1 / -1; }
}
/* digits run left-to-right; justify-self keeps them on the reading edge in Arabic too */
.bento__big, .tally__it b { justify-self: start; }
.bento__big { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 11vw, 3.3rem); line-height: 1; letter-spacing: -.02em; }
.bento__lbl { font-size: .88rem; font-weight: 700; }
.bento__foot { font-size: .74rem; font-weight: 500; color: var(--text-2); }
.bento__h { font-family: var(--display); font-size: 1.1rem; font-weight: 800; }
/* open right now — from the café's own hours */
.live { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .6rem; }
.live__dot { position: relative; flex: none; inline-size: .75rem; block-size: .75rem; border-radius: 50%; background: #8A8A8A; }
.live__dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; opacity: 0; }
.live[data-open="1"] .live__dot { background: #1E9E57; }
.live__now { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
.live__when { font-weight: 600; color: var(--text-2); }
/* the years — on black, the number in the lifted red */
.bento__card--years, .bento__card--captain { background: var(--ink); color: #fff; border-color: transparent; --frame-c: var(--red-lit); }
.bento__card--years .bento__big { color: var(--red-lit); }
.bento__card--years .bento__foot, .bento__card--captain .bento__foot { color: rgba(255, 255, 255, .72); }
:root[data-theme="dark"] :is(.bento__card--years, .bento__card--captain) { background: #1F1F1F; border-color: var(--line); }
/* the favourites — the one red card */
.bento__card--favs { background: var(--red); color: #fff; border-color: transparent; --frame-c: #fff; }
.bento__card--favs .bento__foot { color: #fff; }
/* the top three, on a podium: #1 in the middle and tallest */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .6rem; padding-block: .7rem .3rem; }
.podium__it { display: grid; justify-items: center; gap: .3rem; text-align: center; color: var(--text); touch-action: manipulation; transition: transform var(--t-press) var(--e-out); }
.podium__it:active { transform: scale(.96); }
.podium__arch {
position: relative; display: block;
inline-size: 84%; aspect-ratio: 4 / 5;
border-radius: var(--arch); overflow: hidden;
background: var(--ink);
box-shadow: 0 16px 26px -18px rgba(0, 0, 0, .7);
}
.podium__it[data-rank="1"] .podium__arch { inline-size: 100%; }
.podium__arch img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.podium__n { font-family: var(--display); font-size: 1.05rem; font-weight: 800; color: var(--red-ink); }
.podium__it[data-rank="1"] .podium__n { font-size: 1.4rem; }
.podium__nm { font-size: .8rem; font-weight: 700; line-height: 1.3; min-block-size: 2.1em; }
.podium__step { display: block; inline-size: 100%; block-size: 1.1rem; border-radius: 10px 10px 4px 4px; background: var(--surface-2); }
.podium__it[data-rank="2"] .podium__step { block-size: 1.8rem; }
.podium__it[data-rank="1"] .podium__step { block-size: 2.6rem; background: color-mix(in srgb, var(--red) 16%, var(--surface-2)); }
@media (hover: hover) { .podium__it:hover .podium__arch img { transform: scale(1.05); } .podium__arch img { transition: transform var(--t) var(--e-out); } }
/* the menu in four numbers */
.tally { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem .8rem; }
@media (min-width: 30rem) { .tally { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tally__it { display: grid; gap: .15rem; align-content: start; }
.tally__it::before { content: ""; inline-size: 1.4rem; block-size: 3px; border-radius: 2px; background: var(--red); margin-block-end: .4rem; }
.tally__it b { font-family: var(--display); font-size: clamp(1.8rem, 8vw, 2.3rem); font-weight: 800; line-height: 1; }
.tally__it span { font-size: .78rem; color: var(--text-2); }
/* what is made here — in the menu's own words */
.made { display: grid; gap: .6rem; margin-block-start: .4rem; }
.made li { display: flex; align-items: center; gap: .75rem; }
.made__ico { flex: none; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; background: var(--surface-2); }
.made__ico svg { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: var(--red-ink); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.made li > span:last-child { display: grid; gap: .05rem; }
.made b { font-size: .9rem; }
.made li > span:last-child > span { font-size: .8rem; color: var(--text-2); }
/* the last word: what to do next */
.bento__card--captain { justify-items: center; text-align: center; gap: .75rem; padding-block: 1.6rem; }
.bento__check { inline-size: 2.6rem; block-size: 2.6rem; padding: .55rem; border-radius: 50%; background: var(--red); fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.bento__cap { max-inline-size: 22rem; font-family: var(--display); font-size: clamp(1.1rem, 4.6vw, 1.4rem); font-weight: 800; line-height: 1.4; }
.bento__pill { display: inline-grid; place-items: center; min-inline-size: 1.45rem; block-size: 1.45rem; padding-inline: .3rem; margin-inline-start: .4rem; border-radius: 999px; background: #fff; color: var(--red); font-size: .75rem; font-weight: 800; }
/* ---------------------------------------------------------------- the live map
The branch's real pin in Google's embed, a three-way view switch under it,
and the way there. Offline, a quiet card stands in for the map. */
.visit__map { gap: .7rem; --frame-c: var(--red); }
.map__frame { position: relative; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); }
@media (min-width: 48rem) { .map__frame { aspect-ratio: 16 / 9; } }
.map__frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.map__off { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: .35rem; padding: 1rem; text-align: center; background: var(--surface-2); color: var(--text-2); font-size: .86rem; }
.map__off svg { inline-size: 1.8rem; block-size: 1.8rem; fill: none; stroke: var(--red-ink); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
.map__off b { color: var(--text); }
.visit__map.is-off .map__off { display: grid; }
.map__bar { display: flex; gap: .4rem; }
.map__bar button {
flex: 1; min-block-size: 2.75rem; padding-inline: .5rem;
border-radius: 999px; border: 1px solid var(--line-str);
background: var(--surface); color: var(--text-2);
font-size: .82rem; font-weight: 700;
touch-action: manipulation;
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-press) var(--e-out);
}
.map__bar button:active { transform: scale(.96); }
.map__bar button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
:root[data-theme="dark"] .map__bar button[aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.map__foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.map__foot > span { display: grid; gap: .1rem; min-inline-size: 0; }
.map__foot b { font-size: .95rem; }
.map__foot small { font-size: .78rem; color: var(--text-2); }
.map__foot .btn { flex: none; }
.visit__tel { font-size: 1.05rem; font-weight: 700; color: var(--text); }
/* ---------------------------------------------------------------- menu engineering
The star: a slim strip at the top of each section naming what guests order
most here. The day's pick: a large card two rows down for one of the
section's quieter items, on black, with the section's colour along its top. */
.cat__star {
display: flex; align-items: center; gap: .7rem;
inline-size: 100%; min-block-size: 3.1rem;
margin-block: 0 1rem; padding: .55rem .85rem;
border-radius: 16px;
background: color-mix(in srgb, var(--red) 7%, var(--surface));
border: 1px solid color-mix(in srgb, var(--red) 28%, var(--line));
color: var(--text); text-align: start;
touch-action: manipulation;
transition: transform var(--t-press) var(--e-out), border-color var(--t-fast);
}
.cat__star:active { transform: scale(.98); }
@media (hover: hover) { .cat__star:hover { border-color: var(--red); } }
.cat__star-ico { flex: none; inline-size: 1.5rem; block-size: 1.5rem; fill: var(--red); stroke: none; }
.cat__star-txt { flex: 1; display: grid; gap: .05rem; min-inline-size: 0; }
.cat__star-k { font-size: .72rem; font-weight: 700; color: var(--red-ink); }
.cat__star b { font-size: .98rem; font-weight: 800; }
.cat__star small { font-weight: 600; color: var(--text-2); }
.cat__star-go { flex: none; inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: var(--text-2); stroke-width: var(--stroke); stroke-linecap: round; stroke-linejoin: round; }
:root[dir="ltr"] .cat__star-go { transform: scaleX(-1); }
.spot { margin-block: .2rem 1.6rem; }
.spot__in {
position: relative; overflow: hidden; isolation: isolate;
display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); align-items: center; gap: 1rem;
inline-size: 100%; padding: .9rem;
border-radius: 26px;
background: var(--ink); color: #fff; text-align: start;
box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .8);
touch-action: manipulation;
transition: transform var(--t-press) var(--e-out);
}
.spot__in::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: var(--acc, var(--red)); }
.spot__in:active { transform: scale(.985); }
:root[data-theme="dark"] .spot__in { background: #1F1F1F; border: 1px solid var(--line); }
.spot__plate { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--arch); overflow: hidden; background: #000; --frame-c: var(--red-lit); }
.spot__plate img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--e-out); }
.spot__plate[data-fit="contain"] img { object-fit: contain; padding: 8%; }
@media (hover: hover) { .spot__in:hover .spot__plate img { transform: scale(1.06); } }
.spot__txt { display: grid; gap: .3rem; align-content: center; }
.spot__kick { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; font-weight: 800; letter-spacing: .03em; color: var(--red-lit); }
.spot__kick svg { inline-size: 1rem; block-size: 1rem; fill: var(--red-lit); stroke: none; }
.spot__name { font-family: var(--display); font-size: clamp(1.2rem, 5.2vw, 1.65rem); font-weight: 800; line-height: 1.2; }
.spot__alt { font-size: .8rem; color: rgba(255, 255, 255, .72); }
.spot__desc { font-size: .84rem; line-height: 1.5; color: rgba(255, 255, 255, .82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.spot__note { font-size: .72rem; color: rgba(255, 255, 255, .66); }
.spot__go { justify-self: start; margin-block-start: .35rem; padding: .5rem 1rem; min-block-size: 2.5rem; display: inline-flex; align-items: center; border-radius: 999px; background: var(--red); color: #fff; font-size: .82rem; font-weight: 700; }
@media (min-width: 48rem) { .spot__in { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); padding: 1.1rem 1.4rem; gap: 1.6rem; } }
/* D · signature — the best of the three: the dark arch with its caption and progress
inside, the favourites and every section's best seller in turn, the live chips under it */
.sig { display: grid; justify-items: center; gap: .6rem; inline-size: 100%; }
.sig__arch {
position: relative; display: block;
inline-size: clamp(9rem, min(50vw, 27svh), 21rem); aspect-ratio: 4 / 5;
border-radius: var(--arch); overflow: hidden; background: #000;
box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 7px rgba(216, 31, 38, .16), 0 40px 70px -30px rgba(216, 31, 38, .6);
touch-action: pan-y;
--frame-c: var(--red-lit);
}
.sig__img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .7s var(--e-out), transform 4s linear; }
.sig__img.is-on { opacity: 1; transform: scale(1); }
.sig__arch::after { content: ""; position: absolute; inset: 55% 0 0; z-index: 1; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .82)); pointer-events: none; }
.sig__cap { position: absolute; z-index: 2; inset-inline: .7rem; inset-block-end: 1.05rem; display: flex; align-items: center; gap: .55rem; text-align: start; color: #fff; }
.sig__cap b { flex: none; display: grid; place-items: center; min-inline-size: 2.1rem; block-size: 2.1rem; padding-inline: .35rem; border-radius: 999px; background: var(--red); font-size: .85rem; font-weight: 800; }
.sig__cap > span { display: grid; min-inline-size: 0; line-height: 1.3; }
.sig__cap strong { font-family: var(--display); font-size: 1rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig__cap small { font-size: .72rem; color: rgba(255, 255, 255, .82); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig__bar { position: absolute; z-index: 2; inset-inline: 1rem; inset-block-end: .45rem; block-size: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.sig__bar i { display: block; block-size: 100%; inline-size: 100%; background: var(--red-lit); transform: scaleX(0); transform-origin: left; }
[dir="rtl"] .sig__bar i { transform-origin: right; }
/* the mosaic, small: every photo of the turn, the lit one ringed in red; each is a 44px target */
.sig__thumbs { display: flex; justify-content: safe center; gap: .15rem; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; padding-block: .15rem; }
.sig__thumbs::-webkit-scrollbar { display: none; }
.sig__thumb { flex: none; display: grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 12px; touch-action: manipulation; }
.sig__thumb img { inline-size: 2.1rem; block-size: 2.6rem; object-fit: cover; border-radius: 1.05rem 1.05rem .4rem .4rem; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity var(--t-fast), outline-color var(--t-fast), transform var(--t) var(--e-back); }
.sig__thumb[aria-pressed="true"] img { opacity: 1; outline-color: var(--red-lit); transform: translateY(-2px); }
.sig__chips { display: flex; flex-wrap: nowrap; justify-content: safe center; gap: .4rem; max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
.sig__chips::-webkit-scrollbar { display: none; }
.sig__chips > * { flex: none; }
.sig__live { min-block-size: 2.4rem; padding: .25rem .7rem; font-size: .74rem; }
.sig__sug { min-block-size: 2.4rem; padding: .2rem .7rem .2rem .2rem; }
.sig__sug .cup__sug-img { inline-size: 1.9rem; block-size: 1.9rem; }
.sig__sug b { font-size: .76rem; max-inline-size: 8.5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig__sug span { min-inline-size: 0; }
/* both buttons on one line where the phone is wide enough */
.hero[data-hero="signature"] .dhero__cta { gap: .5rem; }
.hero[data-hero="signature"] .dhero__cta .btn { padding: .65rem 1rem; }
.hero[data-hero="signature"] .hero__inner { margin-block-start: .7rem; gap: .5rem; }
.hero[data-hero="signature"] .mark { --mark-w: min(10.5rem, 46vw); }
.sig__live { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
.sig__sug { background: #fff; color: var(--ink); }
.sig__sug small { color: rgba(13, 13, 13, .66); }
:root[data-theme="dark"] .sig__sug { background: #fff; color: var(--ink); }
/* the dish name may take two lines in the arch rather than be cut */
.sig__cap strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
@media (max-width: 23.75rem) { .sig__sug b { max-inline-size: 7rem; } .sig__live { padding-inline: .55rem; } }
.sig__sug { min-block-size: 2.75rem; }
/* css/motion.css */
/* =====================================================================
CAFÈ BARBERA — motion: the openings.
The signature is the one the house already owns: arched doors. The page
opens on the 1870 shop's doors swinging apart; every section opens the
same way, its doors in its own colour; then its pieces arrive — the
photographs rise in their arches, names follow, badges and bookmarks pop,
every kind of button has its own small hook as it comes into view, and
numbers count up to their real values.
Rules: transform and opacity (and a clip) only; one piece is never longer
than about half a second — a sequence is made of short beats; leaving is
faster than arriving; nothing blocks a tap. All of it lives under
html.motion, which the script adds only when the phone allows motion, so
with "reduce motion" on, or without the script, everything is simply there.
===================================================================== */
@media (prefers-reduced-motion: no-preference) {
/* ---------------------------------------------------------------- shared beats */
@keyframes hook-pop { 0% { opacity: 0; transform: scale(.55); } 60% { opacity: 1; transform: scale(1.07); } 100% { opacity: 1; transform: none; } }
@keyframes hook-drop { 0% { opacity: 0; transform: translateY(-14px) scale(.8); } 70% { opacity: 1; transform: translateY(2px) scale(1.02); } 100% { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes rise-s { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tile-in { from { opacity: 0; transform: translateY(26px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes arch-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.2); } to { transform: none; } }
@keyframes sheen { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes slide-in-s { from { opacity: 0; transform: translateX(calc(18px * var(--rd, 1))); } to { opacity: 1; transform: none; } }
:root { --rd: -1; } /* LTR: pieces arrive from the left, the reading edge */
:root[dir="rtl"] { --rd: 1; } /* RTL: from the right */
/* anything that rises as it comes into view */
.motion [data-rise] { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity .6s var(--e-out), transform .6s var(--e-out); }
.motion [data-rise].is-in { opacity: 1; transform: none; }
/* ---------------------------------------------------------------- 1. the welcome: the doors open
Two panelled doors stand closed in the arch. On the first frame they swing
apart on their hinges and the old shop appears behind them; the founding
stamp drops onto the step; the logo writes itself; the rest rises. */
/* A · stage: the arch opens from the foot, its frame draws, then each favourite
cross-fades in and settles; the caption and the dot follow each turn */
.motion .hero[data-hero="stage"] .stage__arch { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.22, 1, .36, 1) .2s; }
.motion.is-open .hero[data-hero="stage"] .stage__arch { clip-path: inset(0 0 0 0); }
.motion.is-open .hero[data-hero="stage"] .stage__arch .fx { animation: frame-draw 1s var(--e-out) 1s backwards; }
.motion .stage.is-turn .stage__cap { animation: rise-s .45s var(--e-out); }
.motion .hero[data-hero="stage"] .stage__cap, .motion .hero[data-hero="stage"] .stage__dots { opacity: 0; transition: opacity .5s var(--e-out) .9s; }
.motion.is-open .hero[data-hero="stage"] :is(.stage__cap, .stage__dots) { opacity: 1; }
/* B · mosaic: the arches rise in a cascade and settle, their frames draw, then each photo breathes */
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.06); } }
.motion .mosaic__tile { opacity: 0; transform: translate3d(0, 34px, 0) scale(.9); transition: opacity .6s var(--e-out), transform .75s var(--e-back); transition-delay: calc(var(--k, 0) * 90ms + .15s); }
.motion.is-open .mosaic__tile { opacity: 1; transform: none; }
.motion.is-open .mosaic__tile .fx { animation: frame-draw .9s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 90ms + .7s); }
.motion.is-open .mosaic__tile img { animation: breathe 7s ease-in-out infinite alternate; animation-delay: calc(var(--k, 0) * -1.2s); }
/* C · cup: the red disc pops, the cup rises into it, steam curls up, the beans bob */
@keyframes steam { 0% { opacity: 0; transform: translate3d(0, 25%, 0) scaleX(.8); } 30% { opacity: .85; } 100% { opacity: 0; transform: translate3d(0, -70%, 0) scaleX(1.35); } }
@keyframes bob { from { transform: translate3d(0, -4px, 0); } to { transform: translate3d(0, 4px, 0); } }
.motion .cup__disc { opacity: 0; transform: scale(.6); transition: opacity .4s var(--e-out) .15s, transform .8s var(--e-back) .15s; }
.motion.is-open .cup__disc { opacity: 1; transform: none; }
.motion .cup__img { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity .5s var(--e-out) .45s, transform .7s var(--e-back) .45s; }
.motion.is-open .cup__img { opacity: 1; transform: none; }
.motion.is-open .cup__steam i { animation: steam 3.2s ease-out infinite; }
.motion.is-open .cup__steam i:nth-child(2) { animation-delay: 1.05s; }
.motion.is-open .cup__steam i:nth-child(3) { animation-delay: 2.1s; }
.motion.is-open .cup__bean { animation: bob 2.6s ease-in-out infinite alternate; }
.motion.is-open .cup__bean--b { animation-delay: -.9s; }
.motion.is-open .cup__bean--c { animation-delay: -1.7s; }
.motion .cup__chips > * { opacity: 0; }
.motion.is-open .cup__chips > * { opacity: 1; animation: hook-pop .5s var(--e-back) backwards; animation-delay: 1s; }
.motion.is-open .cup__chips > :nth-child(2) { animation-delay: 1.12s; }
/* the welcome rises behind the doors, a beat at a time */
.motion .hero [data-rise] { transition-duration: .55s; }
.motion .hero .mark[data-rise] { transition-delay: .7s; clip-path: inset(0 100% 0 0); transition-property: opacity, transform, clip-path; transition-duration: .5s, .5s, .9s; }
.motion .hero .mark[data-rise].is-in { clip-path: inset(0 0 0 0); }
.motion .hero .tagline[data-rise] { transition-delay: .85s; letter-spacing: .7em; transition-property: opacity, transform, letter-spacing; transition-duration: .5s, .5s, 1s; }
.motion .hero .tagline[data-rise].is-in { letter-spacing: .38em; }
.motion .hero .hero__welcome[data-rise] { transition-delay: .98s; }
.motion .hero .hero__h1[data-rise] { transition-delay: 1.08s; }
.motion .hero .hero__lead[data-rise] { transition-delay: 1.18s; }
.motion .hero .dhero__cta[data-rise] { transition-delay: 1.26s; }
.motion .hero .hero__captain[data-rise] { transition-delay: 1.4s; }
.motion .hero .dhero__cta.is-in .btn { animation: hook-pop .5s var(--e-back) backwards; }
.motion .hero .dhero__cta.is-in .btn:nth-child(1) { animation-delay: 1.3s; }
.motion .hero .dhero__cta.is-in .btn:nth-child(2) { animation-delay: 1.38s; }
.motion .hero .dhero__cta.is-in .btn--solid::after { animation: sheen 1s var(--e-out) 1.7s backwards; }
/* the bar's keys drop into place, the dock rises, as the page opens */
.motion .topbar > * { animation: hook-drop .48s var(--e-back) backwards; }
.motion .topbar > :nth-child(1) { animation-delay: .15s; }
.motion .topbar > :nth-child(2) { animation-delay: .2s; }
.motion .topbar > :nth-child(4) { animation-delay: .25s; }
.motion .topbar > :nth-child(5) { animation-delay: .3s; }
.motion .topbar > :nth-child(6) { animation-delay: .35s; }
.motion .topbar > :nth-child(7) { animation-delay: .4s; }
@keyframes dock-in { from { transform: translate3d(0, 160%, 0); } to { transform: none; } }
.motion .tabbar { animation: dock-in .6s var(--e-out) .55s backwards; }
.motion .tab { animation: hook-pop .45s var(--e-back) backwards; }
.motion .tab:nth-child(1) { animation-delay: .8s; }
.motion .tab:nth-child(2) { animation-delay: .86s; }
.motion .tab:nth-child(3) { animation-delay: .92s; }
.motion .tab:nth-child(4) { animation-delay: .98s; }
/* ---------------------------------------------------------------- 2. every section opens
Its doors — in the section's own colour — fold back to their hinges, the
arch settles, the chapter's words slide in from the reading edge, the
count runs up, and the material swatch draws itself. */
.motion .cat__hero::before, .motion .cat__hero::after { display: block; transition: transform .9s cubic-bezier(.62, .04, .22, 1) .12s; }
.motion .cat.is-in .cat__hero::before, .motion .cat.is-in .cat__hero::after { transform: scaleX(0); }
.motion .cat__hero img { transform: scale(.94); opacity: .5; transition: transform 1s var(--e-out) .15s, opacity .6s var(--e-out) .15s; }
.motion .cat.is-in .cat__hero img { transform: none; opacity: 1; }
.motion .cat__sub, .motion .cat__meta, .motion .cat__sort { opacity: 0; }
.motion .cat.is-in .cat__sub { animation: slide-in-s .5s var(--e-out) .3s both; }
.motion .cat.is-in .cat__meta { animation: slide-in-s .5s var(--e-out) .55s both; }
.motion .cat.is-in .cat__sort { animation: hook-pop .5s var(--e-back) .7s both; }
/* ---------------------------------------------------------------- 3. the tiles
The arches rise one after another: the frame opens from the foot up, the
photograph settles into it, the words follow, then the badge and the
bookmark pop on. */
/* Each tile opens as it reaches the screen (it takes .is-in itself, --i counting the
tiles that arrive together), never a whole section at once: a phone then runs every
one of these on its graphics chip, and a long section never animates out of sight. */
.motion .items > .item { opacity: 0; }
.motion .items > .item.is-in { opacity: 1; animation: tile-in .6s var(--e-out) backwards; animation-delay: calc(var(--i, 0) * 55ms + .05s); }
.motion .items > .item.is-in .item__plate { animation: arch-rise .75s cubic-bezier(.22, 1, .36, 1) backwards; animation-delay: calc(var(--i, 0) * 55ms + .08s); }
.motion .items > .item.is-in .item__plate img { animation: settle 1.1s var(--e-out) backwards; animation-delay: calc(var(--i, 0) * 55ms + .08s); }
.motion .items > .item.is-in :is(.item__flag, .fav) { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--i, 0) * 55ms + .5s); }
/* the plate's light runs while its photo arrives, a few passes at most */
.motion .items > .item.is-in .item__plate:not(.is-loaded):not([data-fit="mono"])::before { animation: shimmer 1.4s linear 6; }
.motion .group__name { opacity: 0; }
.motion :is(.group, .addons).is-in .group__name { animation: slide-in-s .5s var(--e-out) both; }
.motion .group.is-in .group__n { animation: hook-pop .45s var(--e-back) .25s backwards; }
@media (hover: hover) {
.items > .item .item__plate { transition: box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out); }
.items > .item:hover .item__plate { transform: translateY(-4px); box-shadow: 0 26px 36px -24px rgba(0, 0, 0, .75); }
}
/* ---------------------------------------------------------------- 4. where am I
The section row's keys pop in once, the current key's ring draws itself
each time you reach a new section, and the bar under the row runs in that
section's own colour. */
.motion .kinds .kind { opacity: 0; }
.motion .kinds.is-in .kind { opacity: 1; animation: hook-pop .5s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 45ms); }
@keyframes ring-in {
from { transform: scale(.82); box-shadow: 0 0 0 3px var(--bg), 0 0 0 14px color-mix(in srgb, var(--red) 0%, transparent); }
to { transform: none; box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--red); }
}
.motion .kind[aria-current="true"] .kind__ico { animation: ring-in .45s var(--e-back); }
.kinds__bar { background: var(--room); }
/* ---------------------------------------------------------------- 5. buttons: every kind has a hook
As its section comes into view each button pops into place; the primary
one catches a light across it once. */
.motion :is(.showcase, .cover, .ag-sec, .choose, .decide, .visit, .foot) :is(.btn, .route, .showcase__arrow, .cf__nav, .cf__cap .go) { opacity: 0; }
.motion .is-in :is(.btn, .route, .showcase__arrow, .cf__nav, .cf__cap .go) { opacity: 1; animation: hook-pop .5s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 60ms + .2s); }
.motion .is-in .btn--solid::after { animation: sheen 1s var(--e-out) .7s backwards; }
.motion .is-in .foot__actions .btn:nth-child(2), .motion .is-in .visit .btn:nth-child(2) { --k: 1; }
.motion .is-in .foot__actions .btn:nth-child(3), .motion .is-in .visit .btn:nth-child(3) { --k: 2; }
.motion .showcase.is-in .showcase__arrow--next { --k: 1; }
.motion .cover.is-in .cf__nav--next { --k: 1; }
/* ---------------------------------------------------------------- 6. house favourites + signatures */
.motion .show__rank { animation: hook-pop .55s var(--e-back) .2s backwards; }
.motion .showcase .show__arch { animation: rise .6s var(--e-out) backwards; }
.motion .cf__card[aria-current="true"] { box-shadow: 0 26px 46px -14px rgba(0, 0, 0, .9), 0 0 0 2px var(--red); }
.motion .cover .cf__frame { opacity: 0; }
.motion .cover.is-in .cf__frame { opacity: 1; animation: rise .7s var(--e-out) .1s backwards; }
.cf__card[aria-current="true"] { box-shadow: 0 26px 46px -14px rgba(0, 0, 0, .9), 0 0 0 2px var(--red); }
/* ---------------------------------------------------------------- 7. the menu index */
.motion .ag-sec .ag-panel { opacity: 0; }
.motion .ag-sec.is-in .ag-panel { opacity: 1; animation: rise .55s var(--e-out) backwards; }
.motion .ag-sec.is-in .ag-panel:nth-child(2) { animation-delay: .05s; }
.motion .ag-sec.is-in .ag-panel:nth-child(3) { animation-delay: .1s; }
.motion .ag-sec.is-in .ag-panel:nth-child(4) { animation-delay: .15s; }
.motion .ag-sec.is-in .ag-panel:nth-child(5) { animation-delay: .2s; }
.motion .ag-sec.is-in .ag-panel:nth-child(6) { animation-delay: .25s; }
.motion .ag-sec.is-in .ag-panel:nth-child(7) { animation-delay: .3s; }
.motion .ag-sec.is-in .ag-panel:nth-child(8) { animation-delay: .35s; }
.motion .ag-sec.is-in .ag-panel:nth-child(9) { animation-delay: .4s; }
.motion .ag-sec.is-in .ag-panel:nth-child(10) { animation-delay: .45s; }
.motion .ag-panel.is-active .ag-panel__go { animation: hook-pop .5s var(--e-back) .2s backwards; }
/* ---------------------------------------------------------------- 8. deciding, the story, the visit */
.motion .decide .decide__block { opacity: 0; }
.motion .decide.is-in .decide__block { opacity: 1; animation: rise-s .5s var(--e-out) backwards; }
.motion .decide.is-in .decide__block:nth-of-type(2) { animation-delay: .12s; }
.motion .decide.is-in .decide__block:nth-of-type(3) { animation-delay: .24s; }
.motion .decide.is-in .decide__item { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 50ms + .2s); }
.motion .decide.is-in .decide__picks { animation: hook-pop .5s var(--e-back) backwards; }
.motion .method .method__step, .motion .method .method__facts > div { opacity: 0; }
.motion .method.is-in .method__step { opacity: 1; animation: tile-in .6s var(--e-out) backwards; }
.motion .method.is-in .method__step:nth-child(2) { animation-delay: .14s; }
.motion .method.is-in .method__step:nth-child(3) { animation-delay: .28s; }
.motion .method.is-in .method__n { animation: hook-pop .45s var(--e-back) .45s backwards; }
.motion .method.is-in .method__facts > div { opacity: 1; animation: rise-s .5s var(--e-out) backwards; }
.motion .method.is-in .method__facts > div:nth-child(2) { animation-delay: .1s; }
.motion .method.is-in .method__facts > div:nth-child(3) { animation-delay: .2s; }
.motion .visit .visit__card { opacity: 0; }
.motion .is-in .visit .visit__card { opacity: 1; animation: rise .55s var(--e-out) backwards; }
.motion .is-in .visit .visit__card:nth-child(2) { animation-delay: .12s; }
.motion .is-in .visit .visit__card:nth-child(3) { animation-delay: .24s; }
/* ---------------------------------------------------------------- 9. from Italy to Baghdad
The rings grow out of the stamp, then turn slowly — each at its own pace,
the middle one the other way — with every badge staying upright. */
@keyframes ring-grow { from { opacity: 0; transform: translate(-50%, 50%) scale(.6); } to { opacity: 1; transform: translate(-50%, 50%); } }
@keyframes orbit-cw { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) + 360deg)); } }
@keyframes orbit-ccw { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) - 360deg)); } }
@keyframes keep-cw { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) * -1 - 360deg)); } }
@keyframes keep-ccw { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) * -1 + 360deg)); } }
.motion .journey .ring, .motion .journey .orbit__core { opacity: 0; }
.motion .journey.is-in .ring, .motion .journey.is-in .orbit__core { opacity: 1; animation: ring-grow .8s var(--e-out) backwards; }
.motion .journey.is-in .ring--2 { animation-delay: .1s; }
.motion .journey.is-in .ring--3 { animation-delay: .2s; }
.motion .ring__arm { animation: orbit-cw var(--dur, 40s) linear infinite; }
.motion .ring__badge { animation: keep-cw var(--dur, 40s) linear infinite; }
/* the rings turn only while they are on screen (menu.js marks .is-live): started out of
sight, a phone would turn them on its main thread for as long as the page is open */
.motion .orbit:not(.is-live) :is(.ring__arm, .ring__badge) { animation-play-state: paused; }
.motion .ring--2 .ring__arm { animation-name: orbit-ccw; }
.motion .ring--2 .ring__badge { animation-name: keep-ccw; }
/* ---------------------------------------------------------------- 10. the sheets
A sheet springs up; inside it, the photograph settles into its arch and
then each part arrives a beat after the last — name, story, sizes (each
size cup pops), pairings, add-ons, the captain line. Stepping to a
neighbour replays it. Leaving is quicker. */
.motion .sheet__panel { transition: transform .5s cubic-bezier(.2, 1.05, .32, 1); }
.motion .sheet[data-open="0"] .sheet__panel { transition-duration: var(--t-exit); transition-timing-function: var(--e-io); }
.motion .sheet.is-painted .sheet__figure img { animation: settle .9s var(--e-out) backwards; }
.motion .sheet.is-painted .sheet__body > * { animation: rise-s .42s var(--e-out) backwards; animation-delay: calc(min(var(--k, 0), 12) * 40ms + .12s); }
.motion .sheet.is-painted .sheet__size { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 70ms + .4s); }
.motion .sheet.is-painted .sheet__pair, .motion .sheet.is-painted .sheet__mini { animation: hook-pop .45s var(--e-back) backwards; animation-delay: .55s; }
.motion .sheet[data-open="1"] .sheet__close { animation: hook-pop .4s var(--e-back) .2s backwards; }
.motion #picks[data-open="1"] .picks__list > * { animation: rise-s .4s var(--e-out) backwards; animation-delay: calc(min(var(--k, 0), 10) * 45ms + .1s); }
.motion .quiz__opt { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 60ms + .05s); }
.motion .quiz__card { animation: rise-s .45s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 80ms + .05s); }
.motion .quiz__q { animation: rise-s .4s var(--e-out) backwards; }
/* search: the field slides down, the filters pop, the results file in */
.motion .search[data-open="1"] .filters button { animation: hook-pop .4s var(--e-back) backwards; }
.motion .search[data-open="1"] .filters button:nth-child(2) { animation-delay: .05s; }
.motion .search[data-open="1"] .filters button:nth-child(3) { animation-delay: .1s; }
.motion .search[data-open="1"] .filters button:nth-child(4) { animation-delay: .15s; }
.motion .res { animation-delay: calc(var(--k, 0) * 30ms); }
.motion .search .chip { animation: hook-pop .4s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 40ms); }
/* ---------------------------------------------------------------- 11. framed
As a piece arrives, a hairline in its colour draws itself once round its
frame — from low on the reading side, all the way round — then lets go.
Tiles in their section's colour, the sheet's photograph and the house
favourite in the lifted red, the story's arches in white. */
@keyframes frame-draw { 0% { --sweep: 0deg; opacity: 1; } 60% { --sweep: 360deg; opacity: 1; } 100% { --sweep: 360deg; opacity: 0; } }
/* a tile's hairline lights up round its arch and lets go: a fade, which the graphics chip
plays, since dozens of tiles drawing a sweep while a finger scrolls would stutter */
@keyframes frame-glint { 0% { opacity: 0; scale: 1.035; } 35% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
.items > .item .fx { -webkit-mask: none; mask: none; }
.motion .items > .item.is-in .fx { animation: frame-glint .9s var(--e-out) backwards; animation-delay: calc(var(--i, 0) * 55ms + .25s); }
.motion .sheet.is-painted .sheet__figure .fx { animation: frame-draw .9s var(--e-out) .25s backwards; }
.motion .showcase .show__arch .fx { animation: frame-draw .9s var(--e-out) .3s backwards; }
.motion .method.is-in .method__arch .fx { animation: frame-draw .9s var(--e-out) backwards; }
.motion .method.is-in .method__step:nth-child(2) .fx { animation-delay: .14s; }
.motion .method.is-in .method__step:nth-child(3) .fx { animation-delay: .28s; }
.motion .quiz__card.frame::after { animation: frame-draw .8s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 80ms + .25s); }
.motion .bento__card.is-in.frame::after { animation: frame-draw .9s var(--e-out) .2s backwards; }
/* ---------------------------------------------------------------- 12. the house in numbers
Each card rises as it comes into view and its numbers count up; the open
dot breathes; the podium's steps grow and the three arches stand on them,
#1 last; the four numbers pop in turn; what is made here slides in from
the reading edge; the captain's tick draws itself. */
@keyframes step-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes draw-tick { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
@keyframes live-pulse { from { opacity: .55; transform: scale(1); } to { opacity: 0; transform: scale(2.8); } }
.motion .bento__card { opacity: 0; }
.motion .bento__card.is-in { opacity: 1; animation: tile-in .6s var(--e-out) backwards; animation-delay: calc(min(var(--k, 0), 2) * 70ms); }
.motion .live[data-open="1"] .live__dot::after { animation: live-pulse 2s var(--e-out) infinite; }
.motion .bento__card--podium.is-in .podium__step { transform-origin: 50% 100%; animation: step-grow .5s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 90ms + .2s); }
.motion .bento__card--podium.is-in .podium__arch { animation: rise .55s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 110ms + .4s); }
.motion .bento__card--podium.is-in .podium__it[data-rank="1"] .podium__arch { animation-delay: .75s; }
.motion .bento__card--podium.is-in .podium__n { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 110ms + .8s); }
.motion .bento__card--podium.is-in .podium__it[data-rank="1"] .podium__n { animation-delay: 1.05s; }
.motion .bento__card--tally.is-in .tally__it { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 80ms + .15s); }
.motion .bento__card--made.is-in .made li { animation: slide-in-s .45s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 80ms + .2s); }
.motion .bento__card--captain.is-in .bento__check { animation: hook-pop .5s var(--e-back) .15s backwards; }
.motion .bento__card--captain.is-in .bento__check path { stroke-dasharray: 24; animation: draw-tick .45s var(--e-out) .45s backwards; }
.motion .bento__card.is-in :is(.bento__big, .tally__it b) { animation: rise-s .5s var(--e-out) .1s backwards; }
/* ---------------------------------------------------------------- 13. the tabs
The key you are on pops as it lights; the Menu key's ring fills as you read
down the menu; the My Picks count jumps when it changes; Search's kinds and
My Picks' summary arrive a beat apart. */
@keyframes tab-on { 0% { transform: scale(.7); } 60% { transform: scale(1.12); } 100% { transform: none; } }
.motion .tab[aria-current="true"] .tab__wrap { animation: tab-on .4s var(--e-back); }
.motion .tab__dot.is-bump { animation: hook-pop .45s var(--e-back); }
.motion .search[data-open="1"] .kchip { animation: hook-pop .4s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 35ms + .12s); }
.motion .search[data-open="1"] .srch__stat { animation: rise-s .4s var(--e-out) .05s backwards; }
.motion #picks[data-open="1"] .picks__n { animation: hook-pop .5s var(--e-back) .15s backwards; }
.motion #picks[data-open="1"] .picks__secs i { animation: hook-pop .4s var(--e-back) backwards; animation-delay: .3s; }
.motion #picks[data-open="1"] .picks__goes .sheet__pair { animation: hook-pop .45s var(--e-back) backwards; animation-delay: .45s; }
/* ---------------------------------------------------------------- 14. switching
Night falls from the moon button outwards and day comes back the same way;
a language swap cross-fades. (The script only asks for this where the
browser can do it, and never with reduce-motion on.) */
@keyframes vt-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; }
html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) { animation: vt-reveal .5s var(--e-out); }
/* the live map: its frame draws as the card arrives; switching the view pulls the map back and in again */
@keyframes map-zoom { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: none; } }
.motion .is-in .visit__map.frame::after { animation: frame-draw .9s var(--e-out) .25s backwards; }
.motion .visit__map.is-switch .map__frame { animation: map-zoom .45s var(--e-out); }
.motion .is-in .map__bar button { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 60ms + .35s); }
.motion .is-in .map__bar button:nth-child(2) { --k: 1; }
.motion .is-in .map__bar button:nth-child(3) { --k: 2; }
/* ---------------------------------------------------------------- 15. the star and the day's pick
The star's flame flickers once as its section opens; the day's pick rises
in, its photograph settles, its frame draws, its sparkle turns, its button pops. */
@keyframes flicker { 0%, 100% { transform: none; } 30% { transform: scale(1.18) rotate(-6deg); } 60% { transform: scale(.94) rotate(4deg); } }
@keyframes spin-in { from { transform: rotate(-120deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.motion .cat__star { opacity: 0; }
.motion .cat.is-in .cat__star { opacity: 1; animation: rise-s .5s var(--e-out) .5s backwards; }
.motion .cat.is-in .cat__star-ico { animation: flicker .7s var(--e-out) .9s; }
.motion .spot { opacity: 0; }
.motion .spot.is-in { opacity: 1; animation: tile-in .6s var(--e-out) backwards; }
.motion .spot.is-in .spot__plate img { animation: settle 1s var(--e-out) backwards; }
.motion .spot.is-in .fx { animation: frame-draw .9s var(--e-out) .3s backwards; }
.motion .spot.is-in .spot__kick svg { animation: spin-in .6s var(--e-back) .35s backwards; }
.motion .spot.is-in .spot__go { animation: hook-pop .45s var(--e-back) .6s backwards; }
.motion .spot.is-in .spot__go::after { content: none; }
/* ---------------------------------------------------------------- 16. stepping, the captain, the surprise
Stepping to the next item slides the photograph in from the reading side;
the captain's list arrives line by line; the surprise reel spins through
the house's photographs and slows onto one, its frame draws, then the name
and the buttons arrive. */
@keyframes from-end { from { opacity: 0; transform: translateX(calc(40px * var(--rd, 1) * -1)); } to { opacity: 1; transform: none; } }
@keyframes from-start { from { opacity: 0; transform: translateX(calc(40px * var(--rd, 1))); } to { opacity: 1; transform: none; } }
@keyframes reel-spin { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-100% * (var(--n) - 1) / var(--n)), 0); } }
.motion .sheet.is-painted[data-dir="next"] .sheet__figure { animation: from-end .38s var(--e-out); }
.motion .sheet.is-painted[data-dir="prev"] .sheet__figure { animation: from-start .38s var(--e-out); }
.motion #picks.is-captain .cap__list li { animation: rise-s .4s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 70ms + .05s); }
.motion #surprise.is-spun .reel__strip { animation: reel-spin 1.7s cubic-bezier(.12, .7, .2, 1) backwards; }
.motion #surprise.is-spun .reel .fx { animation: frame-draw .9s var(--e-out) 1.5s backwards; }
.motion #surprise.is-spun .surprise__res > * { animation: rise-s .45s var(--e-out) backwards; animation-delay: calc(1.5s + var(--k, 0) * 70ms); }
.motion #surprise.is-spun .surprise__res > :nth-child(2) { --k: 1; }
.motion #surprise.is-spun .surprise__res > :nth-child(3) { --k: 2; }
.motion #surprise.is-spun .surprise__res > :nth-child(4) { --k: 3; }
.motion #surprise.is-spun .surprise__res > :nth-child(5) { --k: 4; }
/* D · signature: the arch opens from the foot and its frame draws; each turn the
photo cross-fades and settles, the caption rises, the progress line runs to the next */
@keyframes sig-run { from { transform: scaleX(0); } to { transform: none; } }
.motion .hero[data-hero="signature"] .sig__arch { clip-path: inset(100% 0 0 0); transition: clip-path 1s cubic-bezier(.22, 1, .36, 1) .2s; }
.motion.is-open .hero[data-hero="signature"] .sig__arch { clip-path: inset(0 0 0 0); }
.motion.is-open .hero[data-hero="signature"] .sig__arch .fx { animation: frame-draw 1s var(--e-out) 1s backwards; }
.motion .sig.is-turn .sig__cap { animation: rise-s .45s var(--e-out); }
.motion .sig.is-turn .sig__bar i { animation: sig-run 3.8s linear; }
.motion .sig__chips > * { opacity: 0; }
.motion.is-open .sig__chips > * { opacity: 1; animation: hook-pop .5s var(--e-back) backwards; animation-delay: 1.05s; }
.motion.is-open .sig__chips > :nth-child(2) { animation-delay: 1.17s; }
.motion.is-open .sig__live[data-open="1"] i { animation: live-pulse-dot 2s var(--e-out) infinite; }
@keyframes live-pulse-dot { 0% { box-shadow: 0 0 0 0 rgba(30, 158, 87, .55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(30, 158, 87, 0); } }
.motion .sig__thumb { opacity: 0; }
.motion.is-open .sig__thumb { opacity: 1; animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 60ms + .9s); }
.motion .sheet.is-painted .fact { animation: hook-pop .4s var(--e-back) backwards; }
.motion .sheet.is-painted .fact:nth-child(2) { animation-delay: .05s; }
.motion .sheet.is-painted .fact:nth-child(3) { animation-delay: .1s; }
.motion .sheet.is-painted .fact:nth-child(4) { animation-delay: .15s; }
.motion .sheet.is-painted .fact:nth-child(5) { animation-delay: .2s; }
.motion .sheet.is-painted .fact:nth-child(6) { animation-delay: .25s; }
} /* end prefers-reduced-motion: no-preference */
/* css/v6.css */
/* =====================================================================
v6 — the Back button, "complete it with", and the house's own photographs.
Loaded last, so it only adds to what tokens/base/components/sections
and motion already set.
===================================================================== */
/* ---------------------------------------------------------------- the Back button
In the top bar, beside the theme and language buttons, in the house red —
only while there is somewhere to go back to (a section, the directory, a
search result, the logo all leave a step). Just the button, no label over
the page; it rings once on each new jump. */
.topbar .back {
position: relative;
overflow: visible;
border-color: transparent;
background: radial-gradient(120% 120% at 30% 20%, #ff4d53, var(--red) 55%, var(--red-deep));
color: #fff;
box-shadow: 0 8px 18px -8px rgba(216, 31, 38, .7), inset 0 1px 0 rgba(255, 255, 255, .25);
transition: inline-size .45s var(--e-out), margin .45s var(--e-out), opacity .3s var(--e-out),
transform .5s var(--e-back), box-shadow var(--t-fast);
}
.topbar .back[hidden] { display: none; }
.topbar .back[data-on="1"] { animation: back-in .45s var(--e-back) both; }
@keyframes back-in { from { opacity: 0; transform: scale(.5) rotate(-50deg); } }
.topbar .back[data-on="1"][data-wide="1"] { animation: back-in .45s var(--e-back) both, back-call 1.6s var(--e-out) .3s 1; }
@media (hover: hover) { .topbar .back:hover { color: #fff; border-color: transparent; box-shadow: 0 10px 22px -8px rgba(216, 31, 38, .85); } }
.topbar .back:active { transform: scale(.92); }
.topbar .back svg { inline-size: 1.2rem; block-size: 1.2rem; stroke: #fff; stroke-width: 2.2; }
:root[dir="rtl"] .topbar .back svg { transform: scaleX(-1); } /* back points the way Arabic reads backwards */
@keyframes back-call {
0% { box-shadow: 0 8px 18px -8px rgba(216, 31, 38, .7), 0 0 0 0 rgba(216, 31, 38, .55); }
100% { box-shadow: 0 8px 18px -8px rgba(216, 31, 38, .7), 0 0 0 12px rgba(216, 31, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .topbar .back { transition: opacity .2s; } .topbar .back[data-wide="1"] { animation: none; } }
/* ---------------------------------------------------------------- complete it with
The band at the end of a section: why the pair works, in one line, and the
three things that go with it, washed in the section's own colour. */
.pairband {
position: relative;
isolation: isolate;
margin-block: 1.8rem .6rem;
padding: 1.05rem 1rem 1.15rem;
border-radius: 1.5rem;
border: 1px solid color-mix(in srgb, var(--acc, var(--red)) 24%, transparent);
background:
radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc, var(--red)) 16%, transparent), transparent 60%),
linear-gradient(180deg, var(--surface), var(--surface-2));
overflow: hidden;
}
/* the house mark, faint, in the corner — every band is signed */
.pairband::after {
content: "";
position: absolute; z-index: -1;
inset-block-start: .8rem; inset-inline-end: .9rem;
inline-size: 4.6rem; block-size: 1.7rem;
background: url("../brand/logo-red.png") center / contain no-repeat;
opacity: .14;
}
.pairband__k {
display: inline-flex; align-items: center; gap: .35rem;
padding: .22rem .6rem .22rem .5rem;
border-radius: 999px;
background: color-mix(in srgb, var(--acc, var(--red)) 14%, var(--surface));
color: color-mix(in srgb, var(--acc, var(--red)) 78%, var(--text));
font-size: .7rem; font-weight: 800; letter-spacing: .03em;
}
.pairband__k svg { inline-size: .85rem; block-size: .85rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.pairband__h {
margin: .5rem 0 .9rem;
font-family: var(--display);
font-size: clamp(1rem, 4.4vw, 1.2rem);
font-weight: 700;
line-height: 1.35;
text-wrap: balance;
}
.pairband__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; }
.pairband__item {
display: grid; gap: .22rem; align-content: start;
text-align: center;
touch-action: manipulation;
transition: transform var(--t-press, .14s) var(--e-out);
}
.pairband__item .sheet__mini-plate { box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .55); }
.pairband__item:active { transform: scale(.95); }
@media (hover: hover) { .pairband__item:hover .sheet__mini-plate img { transform: scale(1.07); } }
:root[data-theme="dark"] .pairband { background:
radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--acc, var(--red)) 22%, transparent), transparent 60%),
linear-gradient(180deg, #1b1b1b, #121212); }
:root[data-theme="dark"] .pairband__k { color: color-mix(in srgb, var(--acc, var(--red)) 45%, #fff); background: color-mix(in srgb, var(--acc, var(--red)) 26%, #161616); }
.motion .pairband.is-in .pairband__item { animation: hook-pop .5s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 70ms + .15s); }
.motion .pairband.is-in .pairband__h { animation: rise-s .5s var(--e-out) backwards; }
/* in the item sheet: the reason, above the three */
.sheet__sec--pair { padding: .95rem .9rem 1rem; border-radius: 1.2rem;
background: color-mix(in srgb, var(--acc, var(--red)) 8%, var(--surface-2)); }
.sheet__pairk { margin: 0 0 .15rem; color: color-mix(in srgb, var(--acc, var(--red)) 80%, var(--text)); font-size: .7rem; font-weight: 800; letter-spacing: .03em; }
:root[data-theme="dark"] .sheet__sec--pair { background: color-mix(in srgb, var(--acc, var(--red)) 14%, #161616); }
:root[data-theme="dark"] .sheet__pairk { color: color-mix(in srgb, var(--acc, var(--red)) 45%, #fff); }
/* ---------------------------------------------------------------- the advisor
"Help me choose", read back: the guest's taste as chips, one line saying how
it was read, then three picks with a ring for how closely each matches the
answers — the best one marked — and the companion the house pairs with it. */
.rx { display: grid; gap: .55rem; margin-block-end: .9rem; padding: .9rem; border-radius: 1.2rem;
background:
radial-gradient(110% 80% at 100% 0%, rgba(216, 31, 38, .12), transparent 60%),
var(--surface-2); }
.rx__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rx__chip { padding: .3rem .7rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .76rem; font-weight: 700; }
.rx__chip:last-child { background: var(--red); }
:root[data-theme="dark"] .rx__chip { background: #fff; color: var(--ink); }
:root[data-theme="dark"] .rx__chip:last-child { background: var(--red); color: #fff; }
.rx__line { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--text-2); }
.rx__why { color: color-mix(in srgb, var(--red-ink) 80%, var(--text)) !important; font-weight: 600; }
.quiz__card { padding-inline-end: .7rem; }
.quiz__card.is-best { background: linear-gradient(135deg, color-mix(in srgb, var(--red) 10%, var(--surface-2)), var(--surface-2) 70%);
box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--red) 45%, transparent); }
.quiz__card .quiz__txt { flex: 1; }
.rx__ring { position: relative; flex: none; display: grid; place-items: center; inline-size: 3.4rem; block-size: 3.4rem; }
.rx__ring svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.rx__ring circle { fill: none; stroke-width: 3.2; }
.rx__track { stroke: color-mix(in srgb, var(--text) 10%, transparent); }
.rx__fill { stroke: var(--red); stroke-linecap: round; stroke-dasharray: var(--m, 0) 100; }
.rx__ring b { position: relative; font-size: .86rem; font-weight: 800; line-height: 1; margin-block-start: -.35rem; }
.rx__ring b small { font-size: .6rem; }
.rx__ring i { position: absolute; inset-block-end: .62rem; font-style: normal; font-size: .52rem; font-weight: 700; color: var(--text-3); }
.motion .quiz__card .rx__fill { animation: rx-fill 1.1s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 120ms + .3s); }
@keyframes rx-fill { from { stroke-dasharray: 0 100; } }
.rx__pair { margin-block-start: 1rem; padding: .9rem; border-radius: 1.2rem; background: color-mix(in srgb, var(--red) 7%, var(--surface-2)); }
.rx__pair h4 { margin: 0 0 .7rem; font-family: var(--display); font-size: 1rem; line-height: 1.35; }
.rx__pairrow { display: flex; }
.rx__mini { display: grid; grid-template-columns: 4.4rem 1fr; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; inline-size: 100%; text-align: start; }
.rx__mini .sheet__mini-plate { grid-row: span 2; margin: 0; }
.rx__mini .sheet__mini-name { align-self: end; font-family: var(--display); font-size: .98rem; }
.rx__mini .sheet__mini-price { justify-content: flex-start; align-self: start; }
.motion .rx__chip { animation: hook-pop .45s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 70ms); }
.motion .rx__pair { animation: rise-s .5s var(--e-out) backwards; animation-delay: .55s; }
/* ---------------------------------------------------------------- its character: four meters */
.taste { justify-self: stretch; inline-size: 100%; box-sizing: border-box; text-align: start; display: grid; gap: .5rem; margin-block: .9rem .2rem; padding: .85rem .95rem .95rem; border-radius: 1.1rem; background: var(--surface-2); }
.taste__h { margin: 0 0 .1rem; font-size: .76rem; font-weight: 800; letter-spacing: .03em; color: var(--text-3); }
.taste__row { display: grid; grid-template-columns: 7.4rem minmax(0, 1fr); align-items: center; gap: .8rem; }
.taste__lbl { font-size: .84rem; font-weight: 600; }
.taste__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.taste__bar i { block-size: .5rem; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.taste__row[data-k="st"] i.on { background: linear-gradient(90deg, #3b2418, #6f3f24); }
.taste__row[data-k="sw"] i.on { background: linear-gradient(90deg, #d81f26, #ff6b5a); }
.taste__row[data-k="cr"] i.on { background: linear-gradient(90deg, #c9a27a, #e8cfae); }
.taste__row[data-k="fr"] i.on { background: linear-gradient(90deg, #1f9d6b, #6fd3a5); }
:root[data-theme="dark"] .taste__row[data-k="st"] i.on { background: linear-gradient(90deg, #8a5532, #c08055); }
.motion .sheet.is-painted .taste__bar i.on { animation: taste-in .6s var(--e-out) backwards; animation-delay: calc(var(--k, 0) * 90ms + .35s); transform-origin: inline-start; }
@keyframes taste-in { from { transform: scaleX(0); opacity: .2; } }
/* ---------------------------------------------------------------- one logo, never two
The managers' photographs already carry the Cafè Barbera mark; the mark the
menu prints over a photo is left off them. */
.item__plate[data-own="1"]::after,
.spot__plate[data-own="1"]::after,
.cf__card[data-own="1"]::after,
.sheet__figure[data-own="1"]::after { content: none !important; display: none !important; }
/* ---------------------------------------------------------------- today's picks, on a line
Instant prints on a sagging string in the house red, wooden pegs, a paper
frame with the item's name written under the photo. */
.pl-sec { position: relative; padding-block: clamp(3rem, 10vw, 5rem) 1rem; background:
radial-gradient(90% 60% at 50% 0%, rgba(216, 31, 38, .07), transparent 70%), var(--bg); overflow: hidden; }
.pl-sec[hidden] { display: none; }
.pl {
--pl-cw: 190px;
position: relative;
block-size: clamp(27rem, 118vw, 33rem);
inline-size: 100%;
overflow: hidden;
touch-action: pan-y;
user-select: none; -webkit-user-select: none;
cursor: grab;
outline: none;
}
.pl[data-drag="1"] { cursor: grabbing; }
.pl:focus-visible { box-shadow: inset 0 0 0 2px var(--red); border-radius: 1rem; }
.pl__string { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; overflow: visible; }
.pl__cord { stroke: var(--red); stroke-width: 1.6; }
.pl__cord--2 { stroke: rgba(255, 255, 255, .55); stroke-width: .6; stroke-dasharray: 2 5; } /* the twist in the cord */
.pl__card {
position: absolute; left: 0; top: 0;
inline-size: var(--pl-cw);
padding: 0; border: 0; background: none;
transform-origin: 50% 0;
will-change: transform;
cursor: inherit;
-webkit-tap-highlight-color: transparent;
}
.pl__print {
display: block;
margin-top: 10px;
padding: 9px 9px 0;
background: #fbfaf7;
box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 20px 32px -16px rgba(0, 0, 0, .45);
transition: transform .5s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.pl__card[data-on="0"] .pl__print { transform: scale(.88); filter: saturate(.75) brightness(.95); }
.pl__card[data-on="1"] .pl__print { box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 26px 40px -16px rgba(0, 0, 0, .55), 0 0 0 1px rgba(216, 31, 38, .15); }
.pl__shot { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #1a1a1a; }
.pl__shot img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; object-fit: cover; pointer-events: none; }
.pl__note {
display: flex; align-items: center; justify-content: center;
block-size: 2.6rem; padding-inline: .3rem;
font-family: var(--display); font-size: .86rem; font-weight: 700; color: #2b2724;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
:root[dir="ltr"] .pl__note { font-family: var(--italian); font-style: italic; font-size: 1.02rem; font-weight: 600; }
.pl__peg {
position: absolute; left: 50%; top: 0;
inline-size: 10px; block-size: 26px; margin-left: -5px;
border-radius: 2px;
background: linear-gradient(90deg, #c9a67a, #e3c9a1 45%, #b8915f);
box-shadow: 0 2px 3px rgba(0, 0, 0, .25);
}
.pl__peg::after { content: ""; position: absolute; left: 4px; top: 8px; inline-size: 2px; block-size: 7px; background: rgba(80, 60, 30, .45); border-radius: 1px; }
.pl__bar {
position: absolute; inset-inline: clamp(1rem, 4vw, 3.5rem); inset-block-end: .4rem;
display: flex; align-items: center; gap: .7rem;
cursor: default;
}
.pl__cap { flex: 1; min-inline-size: 0; display: grid; gap: .1rem; }
.pl__cap > * { animation: pl-in .55s cubic-bezier(.2, .8, .2, 1) both; }
.pl__kick { font-size: .72rem; font-weight: 800; color: var(--red-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl__title { font-family: var(--display); font-size: clamp(1.1rem, 5vw, 1.4rem); font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl__sub { font-size: .8rem; color: var(--text-3); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pl__count { flex: none; font-size: .74rem; letter-spacing: .12em; color: var(--text-3); }
.pl__count b { color: var(--text); font-weight: 700; }
.pl__btn {
flex: none; display: grid; place-items: center;
inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%;
border: 1px solid var(--line-str); background: var(--surface); color: var(--text);
touch-action: manipulation;
transition: background var(--t-fast), color var(--t-fast), transform var(--t-press) var(--e-out);
}
.pl__btn svg { inline-size: 1.1rem; block-size: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[dir="rtl"] .pl__btn svg { transform: scaleX(-1); }
.pl__btn:active { transform: scale(.92); }
@media (hover: hover) { .pl__btn:hover { background: var(--red); border-color: var(--red); color: #fff; } }
@keyframes pl-in { from { transform: translateY(60%); opacity: 0; } to { transform: none; opacity: 1; } }
:root[data-theme="dark"] .pl-sec { background: radial-gradient(90% 60% at 50% 0%, rgba(216, 31, 38, .14), transparent 70%), var(--bg); }
@media (prefers-reduced-motion: reduce) { .pl__cap > * { animation: none; } .pl__print { transition: none; } }
/* ---------------------------------------------------------------- the gallery ring
A bent ring of the managers' own photographs, on the house black. Cards
fade into the black as they turn away; the front one wears a red rim. */
.ring-sec { position: relative; padding-block: clamp(3rem, 10vw, 5rem) 1.6rem; background:
radial-gradient(80% 55% at 50% 45%, rgba(216, 31, 38, .22), transparent 70%), #0d0d0d; color: #fff; overflow: hidden; }
.ring-sec[hidden] { display: none; }
.ring-sec .eyebrow { color: #ff6b6f; }
.ring-sec .display { color: #fff; }
.gring {
--rr: 14px;
position: relative; inline-size: 100%;
block-size: clamp(24rem, 112vw, 32rem);
overflow: hidden; outline: none;
touch-action: pan-y;
user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
cursor: grab;
}
.gring[data-drag="1"] { cursor: grabbing; }
.gring:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 77, 83, .7); border-radius: 1rem; }
.gring__view { position: absolute; inset: 0; }
.gring__stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.gring__camera, .gring__ring, .gring__card { inline-size: 0; block-size: 0; transform-style: preserve-3d; }
.gring__camera { position: relative; }
.gring__ring, .gring__card { position: absolute; left: 0; top: 0; }
.gring__tile { position: absolute; outline: 1px solid transparent; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gring__frame { position: absolute; left: 0; top: 0; inline-size: 100%; overflow: hidden; background: #111; }
.gring__frame img { position: absolute; top: 0; display: block; max-inline-size: none; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.gring__shade { position: absolute; inset: 0; background: #0d0d0d; opacity: var(--d, 0); pointer-events: none; }
.gring__card.is-front .gring__frame { box-shadow: inset 0 3px 0 rgba(255, 77, 83, .95), inset 0 -3px 0 rgba(255, 77, 83, .95); }
.gring__cap { position: absolute; inset-inline: 0; inset-block-end: .8rem; display: grid; justify-items: center; gap: .3rem; pointer-events: none; text-align: center; }
.gring__title { display: grid; justify-items: center; gap: .1rem; animation: ring-title .52s cubic-bezier(.22, 1, .36, 1); }
.gring__title b { font-family: var(--display); font-size: clamp(1.1rem, 5vw, 1.35rem); font-weight: 800; }
.gring__title small { font-size: .74rem; color: rgba(255, 255, 255, .62); }
.gring__count { display: inline-flex; align-items: center; gap: .2rem; font-size: .76rem; color: rgba(255, 255, 255, .5); }
.gring__count i { font-style: normal; opacity: .6; }
.gring__digits { display: inline-flex; }
.gring__digit { display: inline-block; block-size: 1em; overflow: hidden; line-height: 1; }
.gring__reel { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.gring__reel > span { block-size: 1em; }
.gring__hint { margin: .6rem auto 0; max-inline-size: 22rem; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .55); }
@keyframes ring-title { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .gring__reel { transition: none; } .gring__title { animation: none; } }
/* ---------------------------------------------------------------- animated lists
Rows pop from 70 % as they enter the list's view and shrink as they leave;
the highlighted row (arrow keys, or the mouse) wears the house red. */
.al-frame { position: relative; }
.al-row { transform: scale(.7); opacity: 0; transition: transform .2s ease .1s, opacity .2s ease .1s, background var(--t-fast), box-shadow var(--t-fast); animation: none !important; }
.al-row.al-in { transform: none; opacity: 1; }
.al-row.is-sel { box-shadow: inset 0 0 0 1.5px var(--red); }
.res.al-row.is-sel { background: var(--surface-2); }
.al-grad { position: absolute; inset-inline: 0; pointer-events: none; z-index: 2; transition: opacity .3s ease; }
.al-grad--top { inset-block-start: 0; block-size: 50px; opacity: 0; background: linear-gradient(to bottom, var(--bg), transparent); }
.al-grad--bot { inset-block-end: 0; block-size: 90px; opacity: 1; background: linear-gradient(to top, var(--bg), transparent); }
@media (prefers-reduced-motion: reduce) { .al-row { transform: none; opacity: 1; transition: none; } }
/* ---------------------------------------------------------------- where you are
The ten sections with a line marker each and a tick between; the one being
read is lit in the house red and slid along. --fx (0..1) is eased in one
loop, so colour, slide and marker move together. */
.ls { --ls-accent: var(--red); --ls-text: var(--text-2); --ls-marker: var(--line-str); --ls-len: 38px; --ls-gap: 12px;
position: relative; padding-inline-start: calc(var(--ls-len) + .4rem); }
.ls__now { margin: 0 0 .7rem; margin-inline-start: calc(-1 * (var(--ls-len) + .4rem)); font-size: .8rem; color: var(--text-3); }
.ls__now b { color: var(--red-ink); font-weight: 800; }
.ls__list { list-style: none; margin: 0; padding: .2rem 0; display: flex; flex-direction: column; gap: var(--ls-gap); }
.ls__item { position: relative; }
.ls__label {
position: relative; display: inline-flex; align-items: baseline; gap: .55rem;
padding: .15rem 0; border: 0; background: none; text-align: start;
font-family: var(--display); font-size: 1rem; font-weight: 700; line-height: 1.25;
color: color-mix(in srgb, var(--ls-accent) calc(var(--fx, 0) * 100%), var(--ls-text));
transform: translateX(calc(var(--fx, 0) * var(--ls-shift, 18px)));
touch-action: manipulation;
}
:root[dir="rtl"] .ls__label { transform: translateX(calc(var(--fx, 0) * -18px)); }
.ls__label::before { content: ""; position: absolute; inset: -.35rem -2rem; } /* a wider target, a touch before the finger arrives */
.ls__index { font-size: .78em; opacity: calc(.5 + var(--fx, 0) * .5); }
.ls__marker {
position: absolute; inset-block-start: 50%; inset-inline-start: calc(-1 * var(--ls-len) - .4rem);
block-size: 1.5px; inline-size: var(--ls-len); border-radius: 2px;
background: color-mix(in srgb, var(--ls-accent) calc(var(--fx, 0) * 100%), var(--ls-marker));
transform-origin: inline-start; translate: 0 -50%;
scale: calc(.6 + var(--fx, 0) * .6) 1;
}
:root[dir="rtl"] .ls__marker { transform-origin: right center; }
:root[dir="ltr"] .ls__marker { transform-origin: left center; }
.ls__item:not(:last-child)::after {
content: ""; position: absolute; inset-block-start: calc(100% + var(--ls-gap) / 2); inset-inline-start: calc(-1 * var(--ls-len) - .4rem);
block-size: 1px; inline-size: calc(var(--ls-len) * .5); background: var(--ls-marker); opacity: .6;
}
.ls__item[aria-current] .ls__label::after { content: ""; position: absolute; inset-inline-end: -.9rem; inset-block-start: 50%; inline-size: .4rem; block-size: .4rem; border-radius: 50%; background: var(--red); translate: 0 -50%; animation: ls-dot 1.6s ease-in-out infinite; }
@keyframes ls-dot { 50% { opacity: .35; scale: .7; } }
.bm__block--where { margin-block: .4rem 1.4rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: var(--surface-2); }
/* the margin rail: only where the menu column leaves room, only inside the menu */
.ls-rail { display: none; }
@media (min-width: 78rem) {
.ls-rail { display: block; position: fixed; z-index: 60; inset-block-start: 50%; inset-inline-start: max(1.4rem, calc((100vw - 48rem) / 2 - 15rem));
translate: 0 -50%; inline-size: 13rem; opacity: 0; pointer-events: none; transition: opacity .4s var(--e-out); }
:root[data-in-menu="1"] .ls-rail { opacity: 1; pointer-events: auto; }
:root.is-locked .ls-rail { opacity: 0; pointer-events: none; }
.ls-rail .ls__label { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .ls__item[aria-current] .ls__label::after { animation: none; } }
/* ---------------------------------------------------------------- the house mark, on a loop */
.ll { position: relative; overflow: hidden; margin-block-start: 2.2rem; padding-block: 1.1rem; border-block: 1px solid var(--line); direction: ltr; }
.ll::before, .ll::after { content: ""; position: absolute; inset-block: 0; inline-size: clamp(24px, 12%, 120px); z-index: 2; pointer-events: none; }
.ll::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.ll::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.ll__track { display: flex; inline-size: max-content; will-change: transform; user-select: none; }
.ll__list { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.ll__item { flex: none; display: grid; place-items: center; margin-inline-end: 2.2rem; block-size: 2.2rem; }
.ll__item img { block-size: 2.1rem; inline-size: auto; object-fit: contain; -webkit-user-drag: none; pointer-events: none; transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.ll__item img.ll__bean { block-size: 1.2rem; opacity: .8; }
.ll__txt { white-space: nowrap; font-family: var(--display); font-size: .95rem; font-weight: 700; letter-spacing: .02em; color: var(--text-2); }
.ll__txt--it { font-family: var(--italian); font-style: italic; font-size: 1.15rem; font-weight: 600; color: var(--red-ink); }
@media (hover: hover) { .ll__item:hover img { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .ll__track { transform: none !important; } }
/* ---------------------------------------------------------------- the electric border
Round the photo arch of what guests order most: a crackling red line on a
canvas, two soft glows following the arch, and a faint bloom behind. */
.item.has-eb { position: relative; }
.eb { position: absolute; z-index: 4; pointer-events: none; border-radius: var(--arch); }
.eb__cv { position: absolute; left: -24px; top: -24px; display: block; }
.eb__glow, .eb__bg { position: absolute; inset: 0; border-radius: inherit; box-sizing: border-box; }
.eb__glow--1 { border: 2px solid rgba(255, 45, 53, .6); filter: blur(1px); }
.eb__glow--2 { border: 2px solid #ff5a60; filter: blur(4px); }
.eb__bg { z-index: -1; transform: scale(1.08); filter: blur(26px); opacity: .28; background: linear-gradient(-30deg, #ff5a60, transparent, #d81f26); }
/* the frame breathes: a slow pulse, nothing more */
.eb { animation: eb-pulse 2.6s ease-in-out infinite; }
.eb:not(.is-live) { animation-play-state: paused; } /* breathes only on screen */
.eb__glow--1 { border-width: 1.5px; }
.eb__glow--2 { border-width: 1.5px; filter: blur(5px); }
.eb__bg { opacity: .16; }
@keyframes eb-pulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eb { animation: none; opacity: .8; } }
/* ---------------------------------------------------------------- Barbera around the world */
.world { position: relative; padding-block: clamp(3rem, 10vw, 5rem); background:
radial-gradient(70% 50% at 50% 40%, rgba(216, 31, 38, .2), transparent 70%), #0b0b0c; color: #fff; overflow: hidden; }
.world .eyebrow { color: #ff6b6f; }
.world .display { color: #fff; }
.world__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-block: .2rem 1rem; text-align: center; }
.world__stats div { display: grid; gap: .1rem; padding: .7rem .3rem; border-radius: 1rem; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.world__stats b { font-family: var(--display); font-size: clamp(1.4rem, 7vw, 2rem); font-weight: 800; color: #fff; }
.world__stats div:first-child b { color: #ff4d53; }
.world__stats span { font-size: .74rem; color: rgba(255, 255, 255, .62); }
.glb { position: relative; inline-size: min(100%, 26rem); aspect-ratio: 1; margin-inline: auto; border-radius: 50%; outline: none; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.glb:focus-visible { box-shadow: 0 0 0 2px rgba(255, 77, 83, .7); }
.glb__stage { position: absolute; inset: 0; cursor: grab; opacity: 0; transition: opacity .7s ease; }
.glb.is-live .glb__stage { opacity: 1; }
.glb__stage:active { cursor: grabbing; }
.glb__stage canvas { inline-size: 100%; block-size: 100%; display: block; }
.glb__flags { position: absolute; inset: 0; pointer-events: none; }
.glb.is-flat .glb__flags { display: none; }
.glb.is-flat::before { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .15); background: radial-gradient(circle at 35% 30%, #2a2a2e, #111 70%); }
.glb__flag { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.glb__flag img { display: block; inline-size: clamp(14px, 4.6vw, 20px); aspect-ratio: 3 / 2; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.glb__flag.is-here img { inline-size: clamp(18px, 6vw, 26px); outline: 2px solid #ff4d53; outline-offset: 1px; }
.glb__here { position: absolute; inset-block-end: calc(100% + 4px); left: 50%; translate: -50% 0; white-space: nowrap; padding: .12rem .45rem; border-radius: 999px; background: var(--red); color: #fff; font-style: normal; font-size: .62rem; font-weight: 800; box-shadow: 0 4px 10px -4px rgba(216, 31, 38, .8); }
.world__hint { margin: .6rem 0 1rem; text-align: center; font-size: .78rem; color: rgba(255, 255, 255, .5); }
.world__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.wc { display: inline-flex; align-items: center; gap: .4rem; padding: .38rem .6rem .38rem .45rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff; font-size: .8rem; font-weight: 600; touch-action: manipulation; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-press) var(--e-out); }
.wc img { inline-size: 21px; block-size: 14px; border-radius: 2px; object-fit: cover; }
.wc small { min-inline-size: 1.25rem; padding: .05rem .35rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .66rem; color: rgba(255, 255, 255, .75); }
.wc.is-soon { opacity: .7; }
.wc.is-here { border-color: rgba(255, 77, 83, .7); }
.wc[aria-pressed="true"] { background: var(--red); border-color: var(--red); }
.wc[aria-pressed="true"] small { background: rgba(0, 0, 0, .25); color: #fff; }
.wc:active { transform: scale(.95); }
.world__panel { margin-block-start: 1rem; padding: 1rem 1.1rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); animation: rise-s .4s var(--e-out); }
.world__panel[hidden] { display: none; }
.world__panel h3 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .6rem; font-family: var(--display); font-size: 1.1rem; }
.world__panel h3 img { border-radius: 3px; }
.world__panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.world__panel li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .6rem; border-radius: .7rem; background: rgba(255, 255, 255, .04); font-size: .84rem; direction: ltr; text-align: left; }
.world__panel li small { flex: none; padding: .1rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .66rem; color: rgba(255, 255, 255, .75); direction: rtl; }
:root[dir="ltr"] .world__panel li small { direction: ltr; }
.world__panel li.is-soon span { color: rgba(255, 255, 255, .6); }
.world__panel li.is-here { background: rgba(216, 31, 38, .25); box-shadow: inset 0 0 0 1px rgba(255, 77, 83, .6); }
.world__panel li.is-here small { background: var(--red); color: #fff; }
.world__src { margin: 1rem 0 0; text-align: center; font-size: .7rem; color: rgba(255, 255, 255, .42); }
/* the strip at the top: a clean band between the black welcome and the favourites */
.ll--top { margin: 0; padding-block: .9rem; border-block: 0; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
.ll--top .ll__item img { block-size: 2rem; }
/* thumb-sized targets everywhere (≥ 42px) */
.wc { min-block-size: 2.65rem; }
.ls { --ls-gap: .15rem; }
.ls__label { min-block-size: 2.65rem; align-items: center; padding-block: .3rem; }
.ls__item:not(:last-child)::after { inset-block-start: calc(100% + .075rem); }
/* a cut-out (the plain croissant) is shown whole in the small cards too */
.sheet__mini-plate[data-fit="contain"] img { object-fit: contain; padding: 10%; }
/* the signatures: cards in the photographs' own 4:5 shape, so nothing is cut */
.cf__stage { block-size: calc(var(--cf-card) * 1.25); }
.cf__card { aspect-ratio: 4 / 5; }
/* =====================================================================
v7 — photos or a quick list, now at Barbera, the section's colour, the swipe hint
===================================================================== */
.viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .8rem; margin-block: 1.2rem .4rem; }
.viewbar__help { flex-basis: 100%; margin: 0; padding: .55rem .8rem; border-radius: 12px; background: var(--surface-2); font-size: .8rem; line-height: 1.55; color: var(--text-2); }
.viewbar__help::before { content: "ⓘ "; color: var(--red-ink); font-weight: 700; }
.viewbar__help--bm { margin-top: .5rem; }
.viewbar__lbl { font-size: .8rem; font-weight: 700; color: var(--text-3); }
.seg { display: inline-flex; padding: .25rem; gap: .25rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.seg button { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 2.75rem; padding-inline: .9rem; border: 0; border-radius: 999px; background: none; color: var(--text-2); font-size: .82rem; font-weight: 700; touch-action: manipulation; transition: background var(--t-fast), color var(--t-fast), transform var(--t-press) var(--e-out); }
.seg button svg { inline-size: 1.05rem; block-size: 1.05rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seg button[aria-pressed="true"] { background: var(--red); color: #fff; box-shadow: 0 6px 14px -8px rgba(216, 31, 38, .8); }
.seg button:active { transform: scale(.95); }
.seg--bm { display: flex; }
.seg--bm button { flex: 1; justify-content: center; }
/* the quick list: one compact row per item, photo as a small thumb */
:root[data-view="list"] #menu .items { grid-template-columns: 1fr; gap: .45rem; }
:root[data-view="list"] #menu .items > .item,
:root[data-view="list"] #menu .items > .item.item--feature {
grid-column: auto; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto;
grid-template-areas: "plate name foot" "plate alt foot"; align-items: center; justify-items: start;
column-gap: .8rem; row-gap: 0; padding: .45rem .7rem; min-block-size: 3.6rem;
border-radius: 14px; background: var(--surface-2); color: var(--text); box-shadow: none; text-align: start;
}
:root[data-view="list"] #menu .items > .item .item__plate { grid-area: plate; inline-size: 3.2rem; aspect-ratio: 1; margin: 0; border-radius: 10px; box-shadow: none; }
:root[data-view="list"] #menu .items > .item .item__name { grid-area: name; align-self: end; margin: 0; padding: 0; font-size: 1rem; color: var(--text); text-align: start; }
:root[data-view="list"] #menu .items > .item .item__alt { grid-area: alt; align-self: start; margin: 0; padding: 0; font-size: .78rem; color: var(--text-3); }
:root[data-view="list"] #menu .items > .item .item__desc,
:root[data-view="list"] #menu .items > .item .item__flag,
:root[data-view="list"] #menu .items > .item .fav,
:root[data-view="list"] #menu .items > .item .eb,
:root[data-view="list"] #menu .spot { display: none; }
:root[data-view="list"] #menu .items > .item .item__foot { grid-area: foot; margin: 0; flex-direction: column; align-items: flex-end; gap: .1rem; }
:root[data-view="list"] #menu .items > .item.item--feature .tag__val { color: var(--price-ink); }
:root[data-view="list"] #menu .items > .item[data-best]:not([data-best=""]) { box-shadow: inset 3px 0 0 var(--red); }
:root[dir="rtl"][data-view="list"] #menu .items > .item[data-best]:not([data-best=""]) { box-shadow: inset -3px 0 0 var(--red); }
:root[data-theme="dark"][data-view="list"] #menu .items > .item { background: #1b1b1b; }
/* now at Barbera */
.nowbar { margin: 0 auto; padding: 1.3rem var(--pad) 1.5rem; max-inline-size: var(--col); }
.nowbar__head { display: flex; gap: .8rem; align-items: flex-start; margin-block-end: .9rem; }
.nowbar__ico { flex: none; display: grid; place-items: center; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 8px 18px -10px rgba(216, 31, 38, .8); }
.nowbar__ico svg { inline-size: 1.3rem; block-size: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nowbar__k { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 800; color: var(--red-ink); }
.nowbar__state { padding: .1rem .5rem; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-weight: 700; }
.nowbar__state.is-open { background: color-mix(in srgb, #1f9d6b 14%, var(--surface)); color: #157a52; }
:root[data-theme="dark"] .nowbar__state.is-open { color: #6fd3a5; }
.nowbar__h { margin: .15rem 0 0; font-family: var(--display); font-size: clamp(1.25rem, 5.6vw, 1.6rem); font-weight: 800; line-height: 1.25; }
.nowbar__sub { margin: .15rem 0 0; font-size: .84rem; color: var(--text-3); }
.nowbar__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.nowbar__item { display: grid; gap: .2rem; align-content: start; text-align: center; min-block-size: 2.75rem; touch-action: manipulation; transition: transform var(--t-press) var(--e-out); }
.nowbar__item:active { transform: scale(.95); }
.nowbar__item .sheet__mini-name { font-size: .78rem; }
.motion .nowbar__item { animation: hook-pop .5s var(--e-back) backwards; animation-delay: calc(var(--k, 0) * 80ms + .35s); }
/* the section's colour, sweeping the foot of the top bar */
.room-sweep { position: absolute; inset-inline: 0; inset-block-end: -2px; block-size: 3px; pointer-events: none; opacity: 0;
background: linear-gradient(90deg, transparent, var(--sweep, var(--red)) 30%, var(--sweep, var(--red)) 70%, transparent); transform-origin: center; }
.room-sweep.is-on { opacity: 1; animation: room-sweep 1.1s var(--e-out) both; }
@keyframes room-sweep { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: .55; } }
/* the swipe hint on the first item sheet */
.swipe-hint { position: absolute; inset: auto 0 1.2rem; z-index: 5; display: grid; justify-items: center; gap: .4rem; pointer-events: none; animation: hint-out .4s ease 3s forwards; }
.swipe-hint__hand { display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: rgba(13, 13, 13, .7); color: #fff; animation: hint-swipe 1.4s var(--e-io, ease-in-out) 2; }
.swipe-hint__hand svg { inline-size: 1.6rem; block-size: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.swipe-hint b { padding: .3rem .8rem; border-radius: 999px; background: rgba(13, 13, 13, .7); color: #fff; font-size: .78rem; font-weight: 700; }
@keyframes hint-swipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-38px); } }
@keyframes hint-out { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .room-sweep.is-on { animation: none; } .swipe-hint__hand { animation: none; } }
/* ---------------------------------------------------------------- the item's number — the same as in the printed book */
.items > .item .item__no { position: absolute; z-index: 4; inset-block-start: .25rem; inset-inline-start: .25rem; display: grid; place-items: center;
min-inline-size: 1.75rem; block-size: 1.75rem; padding-inline: .35rem; border-radius: 999px; background: var(--red); color: #fff;
font-family: var(--display); font-size: .74rem; font-weight: 800; box-shadow: 0 0 0 2px var(--bg), 0 6px 12px -6px rgba(216, 31, 38, .7); pointer-events: none; }
.items > .item.item--feature .item__no { inset-block-start: .7rem; inset-inline-start: .7rem; box-shadow: 0 0 0 2px #0d0d0d; }
:root[data-view="list"] #menu .items > .item .item__no { inset-block-start: 50%; translate: 0 -50%; inset-inline-start: -.55rem; min-inline-size: 1.45rem; block-size: 1.45rem; font-size: .66rem; }
:root[data-view="list"] #menu .items > .item { padding-inline-start: 1.15rem; }
.sheet__no { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px; background: var(--red); color: #fff; font-size: .74rem; font-weight: 700; }
.sheet__no b { font-family: var(--display); font-weight: 800; }
/* ---- mobile speed: a phone lays out only the menu sections near the screen.
Each section is skipped until the guest scrolls close to it; once seen, its real
size is remembered (auto), so the page never jumps back. The guess is the
typical height of a section on a phone. */
.cat { content-visibility: auto; contain-intrinsic-size: auto 3800px; }
[data-view="list"] .cat { contain-intrinsic-size: auto 1400px; }
/* The hero's stage is filled by the script. Hold its place from the first paint, so on
a slow connection nothing below it jumps when the slides arrive (the signature stage
measures 62.5% of the width + 7rem, at most 532px, on screens from 320 to 1160px). */
.hero__stage { min-height: min(calc(62.5vw + 7rem - 2px), 530px); }
[data-hero]:not([data-hero="signature"]) .hero__stage { min-height: 0; }
.ll--top { min-block-size: 4rem; } /* the strip's height before the script fills it: no jump */