/* ============================================================
THE DREAM — dream.css, the design system for every app page
------------------------------------------------------------
The lobby TV's look (luxe.css + tv.html), carried to the pages people
touch: the door iPad, the staff floor, the owner's report on his phone.
A near-black ground lit by the logo's gold, pole red and pole blue; glass
panels with hairline borders; Playfair Display for names and headings with
one italic gold word; Manrope for everything else; and exactly one gold-lit
"hole-in-one" per screen where the eye must land first. Barber colour is a
ring, a dot or a faint tint beside his name — never a block of paint.
HOW TO USE
- gives the ground (colour + the three glows). Do not give
a background, or it will cover the glows.
- Optional watermark:
as the first child of .
- This is the design system for every screen but the TV; a page loads it plus
its own sheet (kiosk.css, owner.css, launch.css). It styles .toast and
.banner, the two elements app.js creates. luxe.css (the TV) is separate.
- Every component is prefixed .dq-*. Modifiers are BEM-style (.dq-btn--primary),
states are .is-* or ARIA attributes (aria-pressed, aria-expanded, [open],
:disabled, aria-invalid). The only unprefixed classes are .toast and
.banner, because app.js creates them, and they are scoped under .dq.
- Sizes are px/rem with clamp() over vmin, so an iPad reads the same in
landscape (1180x820) and portrait (820x1180), and a phone steps down.
The TV-only --u unit is deliberately NOT defined here.
- Barber colours: put barberVars(color) from /app.js in the style attribute of
the badge / row / swatch (it sets --c, --cg, --cr, --on). Letters come from
initialsFor(barber, barbers).
- Anything using backdrop-filter (.dq-glass) becomes the containing block for
position:fixed children — keep modals, scrims and toasts at level.
CONTENTS
1 tokens 8 lead (hole-in-one) 15 modal / sheet
2 ground + page 9 buttons 16 drawer / disclosure
3 type 10 segmented control 17 table
4 glass, rows, tiles 11 inputs 18 stats, bars, meters
5 section headers 12 code dots + keypad 19 swatches
6 barber badges 13 switch 20 calm, tagline, toast, banner
7 pills 14 lock screen layout 21 motion + reduced motion
============================================================ */
/* ---------- 1. tokens ------------------------------------------------------
The first block is IDENTICAL IN VALUE to :root in luxe.css (minus --u, which
is the TV's viewport unit). Change a colour in both files or in neither. */
:root{
--ground:#0B0908;
--ink:#F2E8D6; /* the logo's ivory */
--ink-2:rgba(242,232,214,.74);
--ink-3:rgba(242,232,214,.50);
--gold:#F7A945; /* the logo's gold */
--gold-hi:#FFC766;
--gold-lo:#D98A2B;
--pole-red:#D9402C;
--pole-blue:#5374AA;
--hair:rgba(255,236,210,.10);
--hair-2:rgba(255,236,210,.16);
--glass:rgba(255,244,228,.035);
--serif:"Playfair Display",Georgia,"Times New Roman",serif;
--sans:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
}
/* App-only tokens, all --dq-*. */
:root{
color-scheme:dark;
/* ink on the brass, and the brass itself */
--dq-on-gold:#1B1309;
--dq-brass:linear-gradient(180deg,var(--gold-hi),var(--gold) 58%,var(--gold-lo));
--dq-hair-row:rgba(255,236,210,.08);
--dq-gold-line:rgba(247,169,69,.45);
--dq-gold-tint:rgba(247,169,69,.08);
/* the pole colours, lifted so small text on the ground still reads */
--dq-red-ink:#F4907E;
--dq-red-line:rgba(217,64,44,.55);
--dq-red-tint:rgba(217,64,44,.09);
--dq-blue-ink:#A3B9E0;
--dq-blue-line:rgba(83,116,170,.6);
--dq-blue-tint:rgba(83,116,170,.12);
--dq-warn-ink:#F6C58C;
--dq-warn-line:rgba(217,138,43,.55);
--dq-warn-tint:rgba(217,138,43,.10);
/* type scale: phone (390 wide) at the low end, iPad (820 short side) near the top */
--dq-fs-display:clamp(36px,calc(14px + 5.6vmin),66px);
--dq-fs-h1:clamp(30px,calc(17px + 3.3vmin),48px);
--dq-fs-h2:clamp(26px,calc(17px + 2.3vmin),38px);
--dq-fs-h3:clamp(19px,calc(14.5px + 1.4vmin),27px);
--dq-fs-lede:clamp(16px,calc(12.4px + .93vmin),21px);
--dq-fs-body:clamp(15px,calc(13.2px + .47vmin),17px);
--dq-fs-small:clamp(13px,calc(11.6px + .35vmin),15px);
--dq-fs-eyebrow:clamp(10.5px,calc(9.6px + .3vmin),12.5px);
--dq-fs-pill:clamp(10.5px,calc(9.6px + .26vmin),12px);
--dq-fs-btn:clamp(15px,calc(13px + .5vmin),17px);
--dq-fs-input:clamp(16px,calc(14px + .6vmin),19px); /* never under 16px: iOS zooms */
--dq-fs-stat:clamp(38px,calc(21.7px + 4.2vmin),60px);
/* space + shape */
--dq-tap:52px; /* iPad; phones step to 46px below */
--dq-tap-lg:clamp(62px,calc(44px + 3.6vmin),78px);
--dq-gutter:clamp(16px,4vw,40px);
--dq-gap:clamp(12px,calc(8px + 1.2vmin),20px);
--dq-gap-row:clamp(8px,calc(5px + .8vmin),12px);
--dq-pad-panel:clamp(18px,calc(10px + 2vmin),34px);
--dq-r-panel:clamp(18px,calc(12px + 1vmin),24px);
--dq-r-row:clamp(13px,calc(9px + .7vmin),17px);
--dq-r-field:14px;
--dq-shadow-panel:0 20px 56px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,244,228,.07);
--dq-ease:cubic-bezier(.2,.7,.2,1);
--dq-max:1280px;
}
@media (max-width:599px){
:root{--dq-tap:46px}
}
/* ---------- 2. ground + page ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body.dq{
margin:0;min-height:100vh;min-height:100dvh;
color:var(--ink);font:500 var(--dq-fs-body)/1.5 var(--sans);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;
-webkit-text-size-adjust:100%;text-size-adjust:100%;
background:var(--ground);
scrollbar-color:rgba(242,232,214,.18) transparent;
}
/* The glows live on a fixed layer rather than background-attachment:fixed,
which iOS ignores (the light would stretch down a long report). */
body.dq::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 55% at 10% -6%, rgba(247,169,69,.17), transparent 62%),
radial-gradient(46% 52% at 104% 104%, rgba(83,116,170,.17), transparent 64%),
radial-gradient(34% 38% at 92% -4%, rgba(217,64,44,.11), transparent 62%);
}
.dq ::selection{background:rgba(247,169,69,.34);color:var(--ink)}
.dq :where(h1,h2,h3,h4,p,figure,blockquote){margin:0}
.dq :where(h1,h2,h3,h4){font-weight:inherit;text-wrap:balance}
.dq :where(button,input,select,textarea){font:inherit;color:inherit}
.dq :where(button,a,label,summary,[role="button"]){touch-action:manipulation}
.dq :where(a){color:inherit}
.dq img{max-width:100%}
/* one focus ring for everything: gold, offset, following the corner radius.
.is-focus-visible exists only so the style guide can show it. */
.dq :focus-visible,.dq .is-focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.dq :focus:not(:focus-visible){outline:none}
/* The logo again, huge and faint, behind everything. The art still has the
pole's red and blue in it and hard edges, and at 5% both came through the
glass keys and read as a stray rule across the content — so the watermark is
greyed, softened and pushed further into the corner. A dense screen (the
staff floor) turns it off altogether. */
.dq-mark{position:fixed;z-index:-1;left:0;bottom:0;width:clamp(460px,62vw,1180px);height:auto;
transform:translate(-26%,34%);opacity:.035;filter:grayscale(1) blur(1.5px);
pointer-events:none;user-select:none;-webkit-user-drag:none}
.dq-page{position:relative;width:100%;max-width:var(--dq-max);margin:0 auto;
padding:calc(clamp(14px,calc(6px + 2vmin),30px) + env(safe-area-inset-top))
max(var(--dq-gutter),env(safe-area-inset-right))
calc(clamp(20px,calc(8px + 2.6vmin),36px) + env(safe-area-inset-bottom))
max(var(--dq-gutter),env(safe-area-inset-left))}
.dq-page--wide{--dq-max:1600px}
.dq-page--narrow{--dq-max:720px}
.dq-head{display:flex;align-items:center;justify-content:space-between;gap:var(--dq-gap);min-width:0}
.dq-logo{display:block;height:clamp(54px,calc(32px + 5vmin),100px);width:auto;
filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.dq-logo--sm{height:clamp(40px,calc(28px + 2.6vmin),58px)}
.dq-head-meta{text-align:right;min-width:0}
.dq-clock{font:300 clamp(26px,calc(16px + 2.8vmin),46px)/1 var(--sans);letter-spacing:-.02em;
font-variant-numeric:tabular-nums;color:var(--ink)}
.dq-head-meta .dq-eyebrow{margin-top:8px}
/* ---------- 3. type ------------------------------------------------------- */
/* Serif headings take one italic gold word:
The chairs
*/
.dq-display,.dq-h1,.dq-h2,.dq-h3{font-family:var(--serif);font-weight:600;color:var(--ink);letter-spacing:-.005em}
.dq-display{font-size:var(--dq-fs-display);line-height:1.02;letter-spacing:-.012em}
.dq-h1{font-size:var(--dq-fs-h1);line-height:1.06}
.dq-h2{font-size:var(--dq-fs-h2);line-height:1.08}
.dq-h3{font-size:var(--dq-fs-h3);line-height:1.15}
:is(.dq-display,.dq-h1,.dq-h2,.dq-h3) em{font-style:italic;font-weight:600;color:var(--gold)}
.dq-lede{font:500 var(--dq-fs-lede)/1.45 var(--sans);color:var(--ink-2);text-wrap:pretty}
.dq-text{font:500 var(--dq-fs-body)/1.5 var(--sans);color:var(--ink-2);text-wrap:pretty}
.dq-small{font:500 var(--dq-fs-small)/1.4 var(--sans);color:var(--ink-3)}
:is(.dq-lede,.dq-text,.dq-small) b,:is(.dq-lede,.dq-text,.dq-small) strong{font-weight:700;color:var(--ink)}
:is(.dq-lede,.dq-text,.dq-small) .dq-gold,:is(.dq-lede,.dq-text,.dq-small) b.dq-gold{color:var(--gold)}
.dq-eyebrow{display:block;font:700 var(--dq-fs-eyebrow)/1.2 var(--sans);letter-spacing:.2em;
text-transform:uppercase;color:var(--ink-3)}
.dq-eyebrow--gold{color:var(--gold)}
.dq-tnum{font-variant-numeric:tabular-nums}
.dq-gold{color:var(--gold)}
.dq-ink-2{color:var(--ink-2)}
.dq-ink-3{color:var(--ink-3)}
/* a word in a barber's colour, softened toward ivory so it reads on the ground
(put barberVars on it or an ancestor) */
.dq-ink-barber{color:color-mix(in oklab,var(--c,#8E8275) 66%,#F2E8D6)}
.dq-link{color:var(--ink-3);font-weight:600;text-decoration:underline;
text-decoration-color:rgba(242,232,214,.24);text-underline-offset:.22em;cursor:pointer;
background:none;border:0;padding:0;transition:color .18s,text-decoration-color .18s}
.dq-link:hover{color:var(--ink-2);text-decoration-color:rgba(242,232,214,.5)}
.dq-link--gold{color:var(--gold);text-decoration-color:rgba(247,169,69,.4)}
.dq-link--gold:hover{color:var(--gold-hi);text-decoration-color:var(--gold)}
.dq-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* layout helpers */
.dq-stack{display:flex;flex-direction:column;gap:var(--dq-stack,var(--dq-gap))}
.dq-cluster{display:flex;flex-wrap:wrap;align-items:center;gap:var(--dq-cluster,12px)}
.dq-spread{display:flex;align-items:center;justify-content:space-between;gap:var(--dq-gap);min-width:0}
.dq-hr{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--hair-2) 18%,var(--hair-2) 82%,transparent)}
/* ---------- 4. glass panels + rows ---------------------------------------- */
/* The warm light pooling in a corner is a background layer, not a pseudo
element, so panels need no overflow:hidden and focus rings are never clipped. */
.dq-glass{
position:relative;min-width:0;
padding:var(--dq-pad-panel);border-radius:var(--dq-r-panel);
background:
radial-gradient(36% 36% at 18% 98%, rgba(247,169,69,.09), transparent),
linear-gradient(180deg,rgba(255,244,228,.06),rgba(255,244,228,.018));
border:1px solid var(--hair);
box-shadow:var(--dq-shadow-panel);
-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
}
.dq-glass--flush{padding:0}
.dq-glass--pool-right{background:
radial-gradient(36% 36% at 82% 98%, rgba(247,169,69,.09), transparent),
linear-gradient(180deg,rgba(255,244,228,.06),rgba(255,244,228,.018))}
/* a fainter glass, for rows and tiles inside a panel */
.dq-rows{display:flex;flex-direction:column;gap:var(--dq-gap-row);min-width:0}
.dq-row{
position:relative;display:flex;align-items:center;min-width:0;
gap:clamp(12px,calc(7px + 1.1vmin),18px);
min-height:var(--dq-tap);
padding:clamp(10px,calc(6px + .9vmin),14px) clamp(12px,calc(8px + 1.1vmin),18px);
border-radius:var(--dq-r-row);
background:var(--glass);border:1px solid var(--dq-hair-row);
}
.dq-row--roomy{padding-top:clamp(12px,calc(8px + 1.2vmin),18px);padding-bottom:clamp(12px,calc(8px + 1.2vmin),18px)}
/* a row someone taps */
:is(button,a).dq-row,.dq-row--button{
width:100%;font:inherit;color:inherit;text-align:left;text-decoration:none;cursor:pointer;
-webkit-appearance:none;appearance:none;
transition:background-color .18s,border-color .18s,transform .12s,box-shadow .18s}
@media (hover:hover){
:is(button,a).dq-row:hover,.dq-row--button:hover{background-color:rgba(255,244,228,.06);border-color:var(--hair-2)}
}
:is(button,a).dq-row:active,.dq-row--button:active,.dq-row.is-pressed{transform:translateY(1px);
box-shadow:inset 0 2px 8px rgba(0,0,0,.3)}
:is(button,a).dq-row[aria-expanded="true"],.dq-row.is-open{border-color:var(--hair-2);background-color:rgba(255,244,228,.06)}
/* a faint wash of a barber's colour from the left: "asked for you" */
.dq-row--tint{
background-image:linear-gradient(90deg,color-mix(in oklab,var(--c,#8E8275) 10%,transparent),transparent 55%);
border-color:color-mix(in oklab,var(--c,#8E8275) 18%,rgba(255,236,210,.08))}
.dq-row--off{opacity:.55}
/* a tile: the fainter glass as a block (stat tiles use it too). Declared here,
before the lead, so .dq-lead can light any of these surfaces. */
.dq-tile,.dq-stat{position:relative;min-width:0;
padding:clamp(14px,calc(9px + 1.3vmin),22px) clamp(16px,calc(10px + 1.3vmin),24px);border-radius:var(--dq-r-row);
background:linear-gradient(180deg,rgba(255,244,228,.05),rgba(255,244,228,.014));border:1px solid var(--dq-hair-row)}
/* a name block: serif name, quiet line under it. In a row it keeps room for a
short name and lets a barber label beside it give way first. */
.dq-who{min-width:0;flex:1 1 auto}
.dq-row > .dq-who{min-width:min(5.5em,40%)}
.dq-row > .dq-barber{flex:0 1 auto}
.dq-who-name{font:600 var(--dq-fs-h3)/1.12 var(--serif);color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq-who-sub{margin-top:2px;font:500 var(--dq-fs-small)/1.3 var(--sans);color:var(--ink-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq-who-sub b{font-weight:700;color:color-mix(in oklab,var(--c,#8E8275) 66%,#F2E8D6)}
.dq-who-sub strong{font-weight:700;color:var(--ink-2)}
.dq-row-end{flex:none;display:flex;align-items:center;gap:10px;margin-left:auto}
/* a quiet line at the foot of a panel */
.dq-panel-foot{margin-top:var(--dq-gap);font:500 var(--dq-fs-small)/1.4 var(--sans);color:var(--ink-3);text-align:center}
.dq-panel-foot b{font-weight:700;color:var(--gold)}
/* ---------- 5. section headers -------------------------------------------- */
/*
Up next
*/
.dq-section-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
gap:8px 16px;margin-bottom:clamp(12px,calc(6px + 1.3vmin),20px);min-width:0}
.dq-section-head > :first-child{min-width:0}
.dq-section-head .dq-eyebrow{margin-bottom:6px}
/* a smaller divider inside a panel: THE LINE · 4 ———— */
.dq-subhead{display:flex;align-items:center;gap:12px;margin:clamp(18px,calc(10px + 1.8vmin),28px) 0 12px}
.dq-subhead .dq-count{font:600 var(--dq-fs-small)/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink-2)}
.dq-subhead::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--hair-2),transparent)}
/* ---------- 6. barber badges ---------------------------------------------- */
/* Jh
A ring in his colour (--cr: a polished sweep for the five metals) around a
dark disc with his letters in ivory. Sizes: --sm, (default), --lg, --xl. */
.dq-badge{
--dq-bs:clamp(40px,calc(30px + 2.2vmin),50px);
position:relative;flex:none;display:inline-grid;place-items:center;vertical-align:middle;
width:var(--dq-bs);height:var(--dq-bs);border-radius:50%;
background:var(--cr,var(--c,#8E8275));
box-shadow:0 0 calc(var(--dq-bs) * .4) color-mix(in oklab,var(--c,#8E8275) 32%,transparent);
}
.dq-badge::before{content:"";position:absolute;inset:max(2px,calc(var(--dq-bs) * .064));border-radius:50%;
background:radial-gradient(circle at 34% 28%,#2B241D,#110E0B 72%)}
.dq-badge > span{position:relative;font:800 calc(var(--dq-bs) * .34)/1 var(--sans);letter-spacing:.01em;color:var(--ink)}
.dq-badge--sm{--dq-bs:clamp(26px,calc(21px + 1vmin),32px);box-shadow:none}
.dq-badge--sm > span{font-size:calc(var(--dq-bs) * .36)}
.dq-badge--lg{--dq-bs:clamp(64px,calc(46px + 3.8vmin),84px)}
.dq-badge--xl{--dq-bs:clamp(88px,calc(60px + 6vmin),120px)}
.dq-badge--xl > span,.dq-badge--lg > span{font-weight:700;letter-spacing:0}
/* nobody in particular: "next available" */
.dq-badge--any{--c:#F2E8D6;
background:conic-gradient(from 210deg,rgba(242,232,214,.62),rgba(242,232,214,.14),rgba(242,232,214,.5),rgba(242,232,214,.14),rgba(242,232,214,.62));
box-shadow:none}
.dq-badge--any > span{color:var(--gold);font-weight:700}
/* off the clock, or no longer at the shop */
.dq-badge--off{filter:saturate(.35) brightness(.8);box-shadow:none}
/* several barbers: rings overlap, each cut out of the one beneath it */
.dq-badges{display:inline-flex;align-items:center;flex:none;vertical-align:middle}
.dq-badges > .dq-badge{box-shadow:0 0 0 2px #100D0B}
.dq-badges > * + *{margin-left:calc(var(--dq-bs,30px) * -.18)}
.dq-badges-more{--dq-bs:clamp(26px,calc(21px + 1vmin),32px);display:inline-grid;place-items:center;flex:none;
width:var(--dq-bs);height:var(--dq-bs);border-radius:50%;
font:800 calc(var(--dq-bs) * .34)/1 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums;
background:#1E1914;border:1px solid var(--hair-2);box-shadow:0 0 0 2px #100D0B}
.dq-badges--lg > .dq-badge,.dq-badges--lg > .dq-badges-more{box-shadow:0 0 0 3px #100D0B}
/* a small badge with his name beside it */
.dq-barber{display:inline-flex;align-items:center;gap:9px;min-width:0;max-width:100%;vertical-align:middle}
.dq-barber-name{font:600 var(--dq-fs-small)/1.2 var(--sans);color:var(--ink-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- 7. pills + states --------------------------------------------- */
/* Outlined, tiny, uppercase. Gold is good news; the dot says what kind of state. */
.dq-pill{
display:inline-flex;align-items:center;gap:8px;flex:none;vertical-align:middle;
min-height:clamp(26px,calc(22px + .7vmin),32px);padding:0 clamp(10px,calc(8px + .5vmin),14px);
border-radius:999px;border:1px solid var(--hair-2);background:transparent;
font:700 var(--dq-fs-pill)/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
color:var(--ink-3);
}
.dq-pill > i{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor}
.dq-pill--open,.dq-pill--gold{color:var(--gold);border-color:var(--dq-gold-line);background:var(--dq-gold-tint)}
/* cutting: a slow breath in the barber's colour (barberVars on the pill or its row) */
.dq-pill--cutting > i{background:var(--c,#8E8275);box-shadow:0 0 10px var(--c,#8E8275);
animation:dq-breathe 2.6s ease-in-out infinite}
.dq-pill--warn{color:var(--dq-warn-ink);border-color:var(--dq-warn-line);background:var(--dq-warn-tint)}
.dq-pill--warn > i{background:var(--gold-lo)}
.dq-pill--danger{color:var(--dq-red-ink);border-color:var(--dq-red-line);background:var(--dq-red-tint)}
.dq-pill--danger > i{background:var(--pole-red);box-shadow:0 0 8px rgba(217,64,44,.6)}
.dq-pill--info{color:var(--dq-blue-ink);border-color:var(--dq-blue-line);background:var(--dq-blue-tint)}
.dq-pill--info > i{background:var(--pole-blue)}
/* inside the lead, a plain pill lights gold ("Any barber" on the first row) */
.dq-lead .dq-pill:not(.dq-pill--warn,.dq-pill--danger,.dq-pill--info,.dq-pill--cutting){
color:var(--gold);border-color:var(--dq-gold-line)}
/* a lone status dot: */
.dq-dot{display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--ink-3));vertical-align:middle}
.dq-dot--live{box-shadow:0 0 10px var(--c,var(--gold));animation:dq-breathe 2.6s ease-in-out infinite}
.dq-dot--gold{background:var(--gold);box-shadow:0 0 10px rgba(247,169,69,.6)}
/* ---------- 8. the hole-in-one (gold lead) -------------------------------- */
/* Exactly ONE per screen. Row:
. Card: add
dq-lead--card to a .dq-glass / .dq-stat / .dq-tile. Uses ::after for the sheen.
It comes after every surface it can sit on, so it wins at equal specificity. */
.dq-lead{
position:relative;overflow:hidden;isolation:isolate;
border:1px solid rgba(247,169,69,.5);
background:linear-gradient(90deg,rgba(247,169,69,.26),rgba(247,169,69,.07));
box-shadow:0 12px 32px -14px rgba(247,169,69,.45),inset 0 1px 0 rgba(255,214,150,.14);
}
.dq-lead--card{
background:
radial-gradient(90% 80% at 0% 0%,rgba(255,199,102,.22),transparent 62%),
linear-gradient(155deg,rgba(247,169,69,.25),rgba(247,169,69,.06) 58%,rgba(247,169,69,.11));
box-shadow:0 26px 56px -24px rgba(247,169,69,.34),0 18px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,160,.22);
}
.dq-lead::after,.dq-sheen::after{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
background:linear-gradient(105deg,transparent 38%,rgba(255,232,190,.15) 50%,transparent 62%);
transform:translateX(-110%);animation:dq-sheen 8s ease-in-out infinite}
.dq-lead--card::after{background:linear-gradient(112deg,transparent 40%,rgba(255,232,190,.12) 50%,transparent 60%)}
.dq-sheen{position:relative;overflow:hidden;isolation:isolate}
.dq-lead :is(.dq-eyebrow){color:var(--gold)}
/* the numbered chip: place in line. Gold inside the lead. */
.dq-num{
--dq-ns:clamp(32px,calc(25px + 1.4vmin),42px);
flex:none;display:inline-grid;place-items:center;width:var(--dq-ns);height:var(--dq-ns);border-radius:50%;
font:600 calc(var(--dq-ns) * .46)/1 var(--serif);color:var(--ink-2);
background:rgba(255,244,228,.05);border:1px solid var(--hair-2)}
.dq-lead .dq-num,.dq-num--gold{color:var(--dq-on-gold);border-color:transparent;background:var(--dq-brass);
box-shadow:0 4px 14px rgba(247,169,69,.35),inset 0 1px 0 rgba(255,244,214,.55)}
/* ---------- 9. buttons ---------------------------------------------------- */
/* .dq-btn is the secondary glass button; add --primary (brass key), --quiet,
--danger, --icon. Sizes: --sm (44px, phone), default (52px iPad / 46px phone),
--lg (kiosk call to action), --block (full width). */
.dq-btn{
--dq-bh:var(--dq-tap);
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:var(--dq-bh);min-width:var(--dq-bh);padding:0 clamp(18px,calc(12px + 1.2vmin),28px);
border-radius:999px;border:1px solid var(--hair-2);
background:linear-gradient(180deg,rgba(255,244,228,.085),rgba(255,244,228,.03));
color:var(--ink);font:700 var(--dq-fs-btn)/1.15 var(--sans);letter-spacing:.01em;
text-align:center;text-decoration:none;white-space:nowrap;cursor:pointer;user-select:none;
-webkit-appearance:none;appearance:none;touch-action:manipulation;
box-shadow:inset 0 1px 0 rgba(255,244,228,.09),0 6px 18px rgba(0,0,0,.26);
transition:background-color .18s,border-color .18s,box-shadow .18s,color .18s,filter .18s,transform .1s;
}
.dq-btn svg{flex:none;width:1.25em;height:1.25em}
@media (hover:hover){
.dq-btn:hover{border-color:rgba(255,236,210,.26);background-color:rgba(255,244,228,.05)}
}
.dq-btn:active,.dq-btn.is-pressed{transform:translateY(1px);
background-color:rgba(0,0,0,.14);box-shadow:inset 0 2px 7px rgba(0,0,0,.4)}
/* a secondary that stays on: "On the clock" */
.dq-btn[aria-pressed="true"],.dq-btn.is-on{color:var(--gold);border-color:var(--dq-gold-line);
background:linear-gradient(180deg,rgba(247,169,69,.16),rgba(247,169,69,.06))}
/* the brass key */
.dq-btn--primary{
color:var(--dq-on-gold);font-weight:800;border-color:rgba(255,214,140,.55);
background:var(--dq-brass);text-shadow:0 1px 0 rgba(255,232,180,.35);
box-shadow:inset 0 1px 0 rgba(255,246,222,.7),inset 0 -2px 0 rgba(140,80,10,.28),
0 12px 30px -10px rgba(247,169,69,.6),0 2px 6px rgba(0,0,0,.35)}
@media (hover:hover){
.dq-btn--primary:hover{filter:brightness(1.06) saturate(1.05);border-color:rgba(255,224,160,.7);background:var(--dq-brass)}
}
.dq-btn--primary:active,.dq-btn--primary.is-pressed{transform:translateY(2px);filter:brightness(.95);
background:var(--dq-brass);
box-shadow:inset 0 3px 8px rgba(110,60,0,.4),0 4px 12px -6px rgba(247,169,69,.45)}
/* quiet: a text button that still has a full tap target */
.dq-btn--quiet{background:none;border-color:transparent;box-shadow:none;color:var(--ink-3);font-weight:600}
@media (hover:hover){.dq-btn--quiet:hover{background:rgba(255,244,228,.04);border-color:transparent;color:var(--ink-2)}}
.dq-btn--quiet:active,.dq-btn--quiet.is-pressed{background:rgba(255,244,228,.06);box-shadow:none;color:var(--ink)}
/* danger: pole red outline and tint, never a red block */
.dq-btn--danger{color:var(--dq-red-ink);border-color:var(--dq-red-line);background:var(--dq-red-tint);
box-shadow:inset 0 1px 0 rgba(255,200,190,.06)}
@media (hover:hover){.dq-btn--danger:hover{background:rgba(217,64,44,.16);border-color:rgba(240,110,90,.7)}}
.dq-btn--danger:active,.dq-btn--danger.is-pressed{background:rgba(217,64,44,.2);box-shadow:inset 0 2px 7px rgba(0,0,0,.35)}
.dq-btn--icon{width:var(--dq-bh);padding:0;border-radius:50%}
.dq-btn--icon svg{width:22px;height:22px}
.dq-btn--sm{--dq-bh:44px;padding:0 18px;font-size:14px;gap:8px}
.dq-btn--lg{--dq-bh:var(--dq-tap-lg);padding:0 clamp(30px,calc(18px + 2.6vmin),48px);
font-size:clamp(17px,calc(12px + 1.2vmin),22px);letter-spacing:.015em;gap:12px}
.dq-btn--block{display:flex;width:100%}
.dq-btn:disabled,.dq-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.42;transform:none;filter:none;box-shadow:none}
/* A primary that can't be pressed yet is a quiet glass button, not a dimmed
brass one: a muddy gold slab with a 2.5:1 label reads as broken rather than
as "not yet", and it still looks like the key the eye should go to. */
.dq-btn--primary:disabled,.dq-btn--primary[aria-disabled="true"]{opacity:1;text-shadow:none;
color:rgba(242,232,214,.55);border-color:var(--hair);
background:linear-gradient(180deg,rgba(255,244,228,.05),rgba(255,244,228,.015));box-shadow:none}
.dq-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dq-actions--end{justify-content:flex-end}
/* ---------- 10. segmented control ----------------------------------------- */
/*
…
aria-pressed, aria-selected, aria-checked or .is-on marks the chosen one. */
.dq-seg{display:inline-flex;max-width:100%;padding:4px;gap:2px;border-radius:999px;
background:rgba(6,5,4,.42);border:1px solid var(--dq-hair-row);box-shadow:inset 0 1px 3px rgba(0,0,0,.45)}
.dq-seg > :is(button,a){flex:1 1 0;min-width:0;min-height:max(44px,calc(var(--dq-tap) - 8px));
padding:0 clamp(14px,calc(8px + 1.3vmin),24px);border:1px solid transparent;border-radius:999px;background:none;
color:var(--ink-3);font:700 var(--dq-fs-small)/1 var(--sans);letter-spacing:.02em;white-space:nowrap;
text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
-webkit-appearance:none;appearance:none;transition:color .18s,background-color .18s,border-color .18s,box-shadow .18s}
@media (hover:hover){.dq-seg > :is(button,a):hover{color:var(--ink-2)}}
.dq-seg > :is([aria-pressed="true"],[aria-selected="true"],[aria-checked="true"],[aria-current="page"],.is-on){
color:var(--ink);border-color:var(--hair-2);
background:linear-gradient(180deg,rgba(255,244,228,.14),rgba(255,244,228,.055));
box-shadow:inset 0 1px 0 rgba(255,244,228,.12),0 4px 14px rgba(0,0,0,.4)}
.dq-seg--block{display:flex;width:100%}
/* ---------- 11. inputs ---------------------------------------------------- */
/* . Works on input, select, textarea, or a
div standing in for one (the kiosk's own keyboard). */
.dq-field{display:grid;gap:8px;min-width:0}
.dq-label{font:700 var(--dq-fs-eyebrow)/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.dq-hint{font:500 var(--dq-fs-small)/1.4 var(--sans);color:var(--ink-3)}
.dq-hint--bad{color:var(--dq-red-ink)}
.dq-input{
display:block;width:100%;min-width:0;min-height:var(--dq-tap);margin:0;
padding:0 clamp(14px,calc(10px + 1vmin),20px);border-radius:var(--dq-r-field);
border:1px solid var(--hair-2);
background:linear-gradient(180deg,rgba(6,5,4,.34),rgba(255,244,228,.035));
box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
color:var(--ink);font:500 var(--dq-fs-input)/1.25 var(--sans);
-webkit-appearance:none;appearance:none;caret-color:var(--gold);
transition:border-color .18s,box-shadow .18s,background-color .18s}
.dq-input::placeholder{color:rgba(242,232,214,.32);opacity:1}
@media (hover:hover){.dq-input:hover{border-color:rgba(255,236,210,.24)}}
.dq-input:focus,.dq-input:focus-visible,.dq-input.is-focus{outline:none;border-color:rgba(247,169,69,.75);
box-shadow:0 0 0 4px rgba(247,169,69,.16),inset 0 1px 2px rgba(0,0,0,.35)}
.dq-input[aria-invalid="true"],.dq-input.is-bad{border-color:rgba(230,90,70,.75);
box-shadow:0 0 0 4px rgba(217,64,44,.14),inset 0 1px 2px rgba(0,0,0,.35)}
.dq-input:disabled{opacity:.45;cursor:not-allowed}
.dq-input--lg{min-height:var(--dq-tap-lg);padding:0 clamp(18px,calc(12px + 1.4vmin),26px);
border-radius:18px;font-size:clamp(20px,calc(13px + 1.8vmin),30px);font-weight:600}
textarea.dq-input{min-height:112px;padding-top:14px;padding-bottom:14px;line-height:1.45;resize:vertical}
select.dq-input{padding-right:46px;cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23F2E8D6' stroke-opacity='.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
linear-gradient(180deg,rgba(6,5,4,.34),rgba(255,244,228,.035));
background-repeat:no-repeat;background-position:right 18px center,0 0;background-size:12px 8px,100% 100%}
select.dq-input option{background:#1A1512;color:var(--ink)}
/* a short numeric code, typed on a real keyboard */
.dq-input--code{max-width:min(100%,320px);min-width:0;text-align:center;
font:300 clamp(28px,calc(18px + 2.4vmin),40px)/1 var(--sans);font-variant-numeric:tabular-nums;
letter-spacing:.55em;padding-left:calc(20px + .55em);padding-right:20px;min-height:var(--dq-tap-lg)}
.dq-input--code::placeholder{letter-spacing:.55em;color:rgba(242,232,214,.2)}
/* a stand-in field with a blinking gold caret (the kiosk's name entry) */
.dq-input--display{display:flex;align-items:center;gap:2px;cursor:text}
.dq-input--display .dq-ph{color:rgba(242,232,214,.32)}
.dq-caret{display:inline-block;flex:none;width:2px;height:1.1em;border-radius:1px;background:var(--gold);
animation:dq-blink 1.1s steps(1) infinite}
/* ---------- 12. code dots + keypad (lock screens) -------------------------- */
/*
as the first child of .
- This is the design system for every screen but the TV; a page loads it plus
its own sheet (kiosk.css, owner.css, launch.css). It styles .toast and
.banner, the two elements app.js creates. luxe.css (the TV) is separate.
- Every component is prefixed .dq-*. Modifiers are BEM-style (.dq-btn--primary),
states are .is-* or ARIA attributes (aria-pressed, aria-expanded, [open],
:disabled, aria-invalid). The only unprefixed classes are .toast and
.banner, because app.js creates them, and they are scoped under .dq.
- Sizes are px/rem with clamp() over vmin, so an iPad reads the same in
landscape (1180x820) and portrait (820x1180), and a phone steps down.
The TV-only --u unit is deliberately NOT defined here.
- Barber colours: put barberVars(color) from /app.js in the style attribute of
the badge / row / swatch (it sets --c, --cg, --cr, --on). Letters come from
initialsFor(barber, barbers).
- Anything using backdrop-filter (.dq-glass) becomes the containing block for
position:fixed children — keep modals, scrims and toasts at level.
CONTENTS
1 tokens 8 lead (hole-in-one) 15 modal / sheet
2 ground + page 9 buttons 16 drawer / disclosure
3 type 10 segmented control 17 table
4 glass, rows, tiles 11 inputs 18 stats, bars, meters
5 section headers 12 code dots + keypad 19 swatches
6 barber badges 13 switch 20 calm, tagline, toast, banner
7 pills 14 lock screen layout 21 motion + reduced motion
============================================================ */
/* ---------- 1. tokens ------------------------------------------------------
The first block is IDENTICAL IN VALUE to :root in luxe.css (minus --u, which
is the TV's viewport unit). Change a colour in both files or in neither. */
:root{
--ground:#0B0908;
--ink:#F2E8D6; /* the logo's ivory */
--ink-2:rgba(242,232,214,.74);
--ink-3:rgba(242,232,214,.50);
--gold:#F7A945; /* the logo's gold */
--gold-hi:#FFC766;
--gold-lo:#D98A2B;
--pole-red:#D9402C;
--pole-blue:#5374AA;
--hair:rgba(255,236,210,.10);
--hair-2:rgba(255,236,210,.16);
--glass:rgba(255,244,228,.035);
--serif:"Playfair Display",Georgia,"Times New Roman",serif;
--sans:Manrope,"Segoe UI",system-ui,-apple-system,sans-serif;
}
/* App-only tokens, all --dq-*. */
:root{
color-scheme:dark;
/* ink on the brass, and the brass itself */
--dq-on-gold:#1B1309;
--dq-brass:linear-gradient(180deg,var(--gold-hi),var(--gold) 58%,var(--gold-lo));
--dq-hair-row:rgba(255,236,210,.08);
--dq-gold-line:rgba(247,169,69,.45);
--dq-gold-tint:rgba(247,169,69,.08);
/* the pole colours, lifted so small text on the ground still reads */
--dq-red-ink:#F4907E;
--dq-red-line:rgba(217,64,44,.55);
--dq-red-tint:rgba(217,64,44,.09);
--dq-blue-ink:#A3B9E0;
--dq-blue-line:rgba(83,116,170,.6);
--dq-blue-tint:rgba(83,116,170,.12);
--dq-warn-ink:#F6C58C;
--dq-warn-line:rgba(217,138,43,.55);
--dq-warn-tint:rgba(217,138,43,.10);
/* type scale: phone (390 wide) at the low end, iPad (820 short side) near the top */
--dq-fs-display:clamp(36px,calc(14px + 5.6vmin),66px);
--dq-fs-h1:clamp(30px,calc(17px + 3.3vmin),48px);
--dq-fs-h2:clamp(26px,calc(17px + 2.3vmin),38px);
--dq-fs-h3:clamp(19px,calc(14.5px + 1.4vmin),27px);
--dq-fs-lede:clamp(16px,calc(12.4px + .93vmin),21px);
--dq-fs-body:clamp(15px,calc(13.2px + .47vmin),17px);
--dq-fs-small:clamp(13px,calc(11.6px + .35vmin),15px);
--dq-fs-eyebrow:clamp(10.5px,calc(9.6px + .3vmin),12.5px);
--dq-fs-pill:clamp(10.5px,calc(9.6px + .26vmin),12px);
--dq-fs-btn:clamp(15px,calc(13px + .5vmin),17px);
--dq-fs-input:clamp(16px,calc(14px + .6vmin),19px); /* never under 16px: iOS zooms */
--dq-fs-stat:clamp(38px,calc(21.7px + 4.2vmin),60px);
/* space + shape */
--dq-tap:52px; /* iPad; phones step to 46px below */
--dq-tap-lg:clamp(62px,calc(44px + 3.6vmin),78px);
--dq-gutter:clamp(16px,4vw,40px);
--dq-gap:clamp(12px,calc(8px + 1.2vmin),20px);
--dq-gap-row:clamp(8px,calc(5px + .8vmin),12px);
--dq-pad-panel:clamp(18px,calc(10px + 2vmin),34px);
--dq-r-panel:clamp(18px,calc(12px + 1vmin),24px);
--dq-r-row:clamp(13px,calc(9px + .7vmin),17px);
--dq-r-field:14px;
--dq-shadow-panel:0 20px 56px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,244,228,.07);
--dq-ease:cubic-bezier(.2,.7,.2,1);
--dq-max:1280px;
}
@media (max-width:599px){
:root{--dq-tap:46px}
}
/* ---------- 2. ground + page ---------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body.dq{
margin:0;min-height:100vh;min-height:100dvh;
color:var(--ink);font:500 var(--dq-fs-body)/1.5 var(--sans);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent;
-webkit-text-size-adjust:100%;text-size-adjust:100%;
background:var(--ground);
scrollbar-color:rgba(242,232,214,.18) transparent;
}
/* The glows live on a fixed layer rather than background-attachment:fixed,
which iOS ignores (the light would stretch down a long report). */
body.dq::before{
content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:
radial-gradient(60% 55% at 10% -6%, rgba(247,169,69,.17), transparent 62%),
radial-gradient(46% 52% at 104% 104%, rgba(83,116,170,.17), transparent 64%),
radial-gradient(34% 38% at 92% -4%, rgba(217,64,44,.11), transparent 62%);
}
.dq ::selection{background:rgba(247,169,69,.34);color:var(--ink)}
.dq :where(h1,h2,h3,h4,p,figure,blockquote){margin:0}
.dq :where(h1,h2,h3,h4){font-weight:inherit;text-wrap:balance}
.dq :where(button,input,select,textarea){font:inherit;color:inherit}
.dq :where(button,a,label,summary,[role="button"]){touch-action:manipulation}
.dq :where(a){color:inherit}
.dq img{max-width:100%}
/* one focus ring for everything: gold, offset, following the corner radius.
.is-focus-visible exists only so the style guide can show it. */
.dq :focus-visible,.dq .is-focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.dq :focus:not(:focus-visible){outline:none}
/* The logo again, huge and faint, behind everything. The art still has the
pole's red and blue in it and hard edges, and at 5% both came through the
glass keys and read as a stray rule across the content — so the watermark is
greyed, softened and pushed further into the corner. A dense screen (the
staff floor) turns it off altogether. */
.dq-mark{position:fixed;z-index:-1;left:0;bottom:0;width:clamp(460px,62vw,1180px);height:auto;
transform:translate(-26%,34%);opacity:.035;filter:grayscale(1) blur(1.5px);
pointer-events:none;user-select:none;-webkit-user-drag:none}
.dq-page{position:relative;width:100%;max-width:var(--dq-max);margin:0 auto;
padding:calc(clamp(14px,calc(6px + 2vmin),30px) + env(safe-area-inset-top))
max(var(--dq-gutter),env(safe-area-inset-right))
calc(clamp(20px,calc(8px + 2.6vmin),36px) + env(safe-area-inset-bottom))
max(var(--dq-gutter),env(safe-area-inset-left))}
.dq-page--wide{--dq-max:1600px}
.dq-page--narrow{--dq-max:720px}
.dq-head{display:flex;align-items:center;justify-content:space-between;gap:var(--dq-gap);min-width:0}
.dq-logo{display:block;height:clamp(54px,calc(32px + 5vmin),100px);width:auto;
filter:drop-shadow(0 6px 16px rgba(0,0,0,.55))}
.dq-logo--sm{height:clamp(40px,calc(28px + 2.6vmin),58px)}
.dq-head-meta{text-align:right;min-width:0}
.dq-clock{font:300 clamp(26px,calc(16px + 2.8vmin),46px)/1 var(--sans);letter-spacing:-.02em;
font-variant-numeric:tabular-nums;color:var(--ink)}
.dq-head-meta .dq-eyebrow{margin-top:8px}
/* ---------- 3. type ------------------------------------------------------- */
/* Serif headings take one italic gold word: