/* ============================================================ 04 Del Patio Barbershop - site.css READ: late-opening neighbourhood barbershop landing for Nou Barris families, with a warm plainspoken language, leaning toward a saturated teal ground where the week's opening hours are the page's hero object. WHAT THIS DESIGN IS NOT. The shop's listing calls it a "peluqueria, barberia dominicana", but not one of its six read reviews mentions Dominican, Latin, Afro or curly-hair work. So there is no Caribbean signalling anywhere in here: no flag colours, no palm, no domino, no tropical motif. Teal and coral were chosen precisely because they read as confident and local rather than as any country's flag. The shop's own self-description appears once on the page, framed as its own words, and the design supplies no specialism the evidence does not support. WHAT IT IS BUILT AROUND. Three facts that are evidenced: 1. It is open late and every day differs (the week strip is the spine). 2. Families come, and a reviewer names games for the children. 3. 4.9 from 93 Google reviews. ONE PHOTOGRAPH, AND THAT IS THE WHOLE OF IT. Public sources hold exactly one usable frame of this business: an empty interior, with no signage anywhere in it. There is no shopfront, no night shot and no play-corner photograph to be had, and the shop's Instagram is the owner's personal reel rather than shop marketing. So this page carries one image, in the "where we are" section, described in its alt text as only what is visible and never as proof of which shop it is. The other three slots this design once reserved have been cut rather than left standing empty: a labelled hole is honest but it is still a hole, and a page that reads as deliberately typographic is the better outcome. Everything that used to lean on a photograph now leans on type, on the week chart and on the six real reviews. Loaded FIRST, before ds.css / booking.css / media.css, so those layers refine it. Everything they need is declared here: --bg --bg-2 --line --text --muted --accent --accent-ink --font-display --font-body ============================================================ */ /* ---------- Tokens ---------- */ :root { /* Palette. Measured contrast on the #08454E ground: ink #FAF7F2 9.97:1 muted #C3D8DB 7.18:1 accent #FF5A3C 3.44:1 <- LARGE TEXT, FILLS AND RULES ONLY. error #ff9e8d 5.34:1 The accent is never small running text, never a caption, and never a link inside a paragraph. That is a hard constraint of this palette and it is honoured throughout the file. */ --bg: #08454E; --bg-2: #063B43; /* card and placeholder surface: DEEPER than the ground, which lifts ink to 11.46:1 and error text to 6.14:1 */ --bg-3: #0A4E58; /* form control fill, 8.76:1 for ink */ --line: rgba(250, 247, 242, 0.17); --line-strong: rgba(250, 247, 242, 0.34); --text: #FAF7F2; --muted: #C3D8DB; --accent: #FF5A3C; --accent-ink: #2A0A03; /* 5.93:1 on the coral fill */ --font-display: "Unbounded", "Figtree", system-ui, -apple-system, sans-serif; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* One corner-radius system, chosen and then held. Generously round, because the register of this page is "come in and sit down". */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; --nav-h: 64px; --pad: clamp(1.25rem, 4vw, 3rem); --maxw: 1160px; --ease: cubic-bezier(0.22, 0.75, 0.3, 1); /* ds.css interaction dials, matched to the motion dials on . */ --ds-lift: 3px; --ds-dur: 0.3s; /* Native form controls (the date picker above all) must render dark, or the calendar glyph is a black icon on a dark teal field. */ color-scheme: dark; } /* THE ERROR COLOUR, SET BY HAND AND ON PURPOSE. booking.css picks --bad off prefers-color-scheme, which cannot know that this page is dark whatever the system is set to. On a light system theme its #b3261e default measures 1.63:1 here, and the error message is the one string on the page a person MUST be able to read. #ff9e8d measures 5.34:1 on the ground and 6.14:1 on the card surface. `html:root` rather than `:root` because booking.css loads after this file and would otherwise win on equal specificity. */ html:root { --bad: #ff9e8d; } /* ---------- Reset and base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; margin: 0; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } img { max-width: 100%; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Reveal floor. motion.js takes ownership when it runs (ds.css switches this transition off); if it never runs, this is what still shows the page, and the