/* ============================================================================================ ROOM — the sauce, and nothing under it. NOT ONE SIZE, SPACE OR POSITION IS SET IN THIS FILE, and that is the contract it is written to. No `--c-u`, no `--c-gap`, no `--c-rhythm`, no `--c-gut`, no `--c-measure`, no padding, no margin, no grid, no inset. How much air a band gets, how many things go across, where a heading sits and what happens at 390px are the LAYOUT's answers and they are the same on every theme. What is here is colour, type, treatment, and the grade a photograph takes. THE TEST OF IT: delete this file and the page is the same page, in grey. TWO ROOMS. The dark one is a warm-neutral graphite, never a blue-black — food photographed under tungsten sits inside it without arguing. The light one is a cream, not a white — the same photographs at the same weight, done with paper rather than with glare. Neither is the other one flipped: the dark room LIFTS to make a surface (850 → 800) and the light room SINKS (100 → 150), because on paper recessed reads better than raised, and they have a different number of steps. SURFACES STEP BY VALUE ONLY, never by hue, and never more than two steps deep on one screen. ============================================================================================ */ /* ── THE TWO RAMPS ───────────────────────────────────────────────────────────────────────── Stated by name because they are this design's, not the owner's. `--c-brand` is nought for exactly that reason: the neutrals here carry no accent at all, which is what "surfaces step by value only" means when it is written as code. */ :root, :is(#clay-page,#design-sheets).room{ --accent:#E0157F; /* the one colour a business picks */ /* the dark room — ink · graphite ramp */ --rm-1000:#08080A; /* under everything */ --rm-950:#0B0B0C; /* page */ --rm-900:#101011; /* frame */ --rm-850:#17181A; /* surface */ --rm-800:#1E1F22; /* raised — and the contrast band, see below */ --rm-700:#2C2E32; /* hairline */ --rm-600:#3A3D42; /* edge */ --rm-500:#55595F; /* disabled */ --rm-400:#7A7F86; /* disabled */ --rm-350:#838890; /* text tertiary — see the note beside `--c-faint` */ --rm-300:#A6ABB2; /* text secondary */ --rm-100:#F4F5F6; /* text primary */ /* the light room — sand · paper ramp. It gains a step the dark room does not have: SUNKEN. */ --sd-000:#FFFFFF; /* raised */ --sd-050:#FFFDF9; /* surface */ --sd-100:#F6F1E8; /* page */ --sd-150:#EFE8DA; /* sunken */ --sd-200:#E3DBCC; /* hairline */ --sd-300:#CDC2AE; /* edge */ --sd-400:#B3A793; /* disabled */ --sd-500:#8B8375; /* disabled */ --sd-550:#6F685A; /* text tertiary — see the note beside `--c-faint` */ --sd-600:#5E584D; /* text secondary */ --sd-800:#312E28; /* ink on paper */ --sd-900:#1A1916; /* text primary */ /* THE SIGNALS — four fixed hues that are never the accent, because the accent belongs to the owner and open-or-closed belongs to the truth. Each is stated once per room. */ --rm-open:#4ADE80; } /* WHICH ROOM AN UNATTRIBUTED PAGE IS IN — the LIGHT one, and it is not a preference. The server writes `data-mode` on the page and on , so a real site is always one or the other; but `scripts/preview-design.mjs` and anything else that renders a theme on its own write no attribute at all, and whichever palette carries the bare class is what they draw. Every other theme answers light there, so Room does too — otherwise "look at it in light" quietly shows the dark one and the two themes cannot be compared. The DEFAULT an owner gets is still dark; that is `settings()` in theme.js, which is a different question. */ /* ── THE DARK ROOM, WHICH IS THE PRIMARY ONE ─────────────────────────────────────────────── Both selector shapes, because the attribute lands in two places: the server writes it on and on the page, and the Design panel writes it on the page as somebody presses it — so the room changes without a reload. */ #clay-page.room[data-mode="dark"], #design-sheets.room[data-mode="dark"], :root[data-mode="dark"] #clay-page.room, :root[data-mode="dark"] #design-sheets.room{ --c-paper:var(--rm-950); --c-ink:var(--rm-100); --c-soft:var(--rm-300); --c-faint:var(--rm-350); --c-line:var(--rm-700); --c-fill:var(--rm-850); /* the dark room LIFTS to make a surface */ /* A CARD IS TOLD FROM THE PAGE BY VALUE, AND A WARM CARD ON WARM PAPER IS NOT. The products, the hires and the ways in all sat on the sand step, which is half a tone off the cream page — "for this theme the grey product cards would work better". A neutral grey is a step you can see, and it lets the photographs above it stay the only warm thing in the card. */ --c-card-bg:#1B1C1E; --c-ground-fill:var(--rm-850); --c-over:var(--rm-1000); /* the scrim behind a sheet, and under a photograph */ --c-map-ground:var(--rm-900); /* THE CONTRAST BAND IS A LIFT, NOT THE OTHER ROOM. "In the dark room the same job is done by lifting to 800." A cream band edge to edge on a graphite page is a second website; a step up is a room you are still in. */ --c-flip:var(--rm-800); --c-flip-ink:var(--rm-100); /* A THING STANDING ON THAT PLATE TAKES ONE MORE STEP, never the plate itself. The hires sit INSIDE the booking card, which is already the contrast room — so "darker, like the ways in" cannot be `--c-flip` there or the card and the thing on it are one surface. One step up, which is what this room does to make a surface. */ --rm-thing:var(--rm-700); --rm-edge:rgb(244 245 246 / .12); /* the hairline inside a photograph */ --rm-live:var(--rm-open); } /* ── THE LIGHT ROOM ──────────────────────────────────────────────────────────────────────── Not an inversion. The sunken step does the work the raised step does in the dark, and hairlines are stronger because paper needs more line than graphite does. */ :is(#clay-page,#design-sheets).room, #clay-page.room[data-mode="light"], #design-sheets.room[data-mode="light"], :root[data-mode="light"] #clay-page.room, :root[data-mode="light"] #design-sheets.room{ --c-paper:var(--sd-100); --c-ink:var(--sd-900); --c-soft:var(--sd-600); --c-faint:var(--sd-550); --c-line:var(--sd-200); --c-fill:var(--sd-150); /* the light room SINKS to make a surface */ --c-card-bg:#E7E5E1; /* the grey — see the note in the dark room above */ --c-ground-fill:var(--sd-150); --c-over:var(--sd-900); --c-map-ground:var(--sd-050); /* on paper the contrast band is the ink — the one dark plate a cream page gets */ --c-flip:var(--sd-900); --c-flip-ink:var(--sd-050); /* …and on paper the step is INTO the ink rather than out of it — see the note in the dark room */ --rm-thing:var(--sd-800); --rm-edge:rgb(26 25 22 / .10); --rm-live:#15803D; /* a mint green on cream is not a signal */ } /* ── THE PLATE TAKES THE OWNER'S HUE ─────────────────────────────────────────────────────── The deep surfaces of this design are no longer one fixed colour. They are the business's accent, rotated a step toward amber, held at the LIGHTNESS this design already had and at a chroma nobody would call a colour. Room is a warm design in both of its rooms, so the rotation goes the warm way: a blue business gets a deep teal-slate rather than a violet one. THE LIGHTNESS IS THE ONE THING THAT DOES NOT MOVE. Each value below is the oklch lightness of the colour it replaces, measured off the hex it used to be — so the page has the same weight, the same seam and the same contrast it always had, and only the hue is the owner's. Change a lightness here and you have redesigned the theme rather than recoloured it. THE CHROMA CAP IS THE WHOLE THING, and it was measured rather than guessed — six accents by four caps, drawn with this stylesheet and the real band. Here: .022 on the plates, .014 on the step above them. Chroma in oklch is absolute, so the SAME number is louder on a near-black than on a lift: the deeper the surface, the higher the cap can go before it stops reading as a temperature and starts reading as a colour. EVERYTHING HANGING OFF THE PLATE FOLLOWS FOR FREE, because they are all `--c-flip`: the ways-in plates (`--c-block-bg`), the product cards, the footer, and every ink inside them, which parts.css derives from the ground. The `thing` step is derived too, or a hire's card is the one surface on the page still wearing the old colour — which is exactly how it shipped first. THE PAGE IS UNTOUCHED IN BOTH ROOMS. Tinting a dark room's PAPER was tried and it took the band with it — same colour, no band, the section simply gone. A tinted page needs its lift re-derived off the new colour, which is a bigger change than a plate. */ @supports (color: oklch(from red l c h)){ :is(#clay-page,#design-sheets).room, #clay-page.room[data-mode="light"], #design-sheets.room[data-mode="light"], :root[data-mode="light"] #clay-page.room, :root[data-mode="light"] #design-sheets.room{ --c-flip:oklch(from var(--accent) .213 min(c, .022) calc(h + 25)); --rm-thing:oklch(from var(--accent) .302 min(c, .014) calc(h + 25)); } #clay-page.room[data-mode="dark"], #design-sheets.room[data-mode="dark"], :root[data-mode="dark"] #clay-page.room, :root[data-mode="dark"] #design-sheets.room{ --c-flip:oklch(from var(--accent) .239 min(c, .020) calc(h + 25)); --rm-thing:oklch(from var(--accent) .301 min(c, .014) calc(h + 25)); } } /* ── THE ACCENT SLOT — one input, four values ────────────────────────────────────────────── accent as typed — the primary action, the one emphasis accent-ink what goes ON it: black or white, whichever clears 4.5:1 accent-soft 14% — a selected chip, a focused field's fill accent-line 44% — the focus ring, today's underline DERIVED WHERE THE ACCENT ACTUALLY IS, which is on the page and not on `:root`: `vars()` writes the owner's colour onto `#clay-page.room` precisely so it cannot repaint the editor's chrome, so maths run on the root would never once see the colour the business chose. */ :root, :is(#clay-page,#design-sheets).room{ --c-accent:var(--accent); --c-brand:0%; /* the neutrals carry no accent at all — see above */ --rm-soft:color-mix(in srgb, var(--accent) 14%, transparent); --rm-lined:color-mix(in srgb, var(--accent) 44%, transparent); /* `--c-on` IS NOT STATED HERE, and that is the whole of a bug that shipped. parts.css declares it as a plain white and then DERIVES it — black or white by luminance — inside an @supports block on `#clay-page`. This file's selector carries an extra class, so restating it here won on specificity and pinned it to white for every accent there has ever been. Invisible on a hot pink; on a pale lime the basket's own button came out white on lime. See `.btn` below, which was reading it. */ --c-accent-ink:var(--accent); } @supports (color: oklch(from red l c h)){ :root, :is(#clay-page,#design-sheets).room{ /* A DARK ACCENT LIKE MAROON FAILS AS A LIVE DOT ON GRAPHITE, so the dot and the accent-as-text use the hue LIFTED to a fixed lightness while the button keeps the hue exactly as typed. That one correction is what makes any hue survive either room. */ --c-accent-ink:oklch(from var(--accent) max(l, .62) c h); } #clay-page.room[data-mode="light"], #design-sheets.room[data-mode="light"], :root[data-mode="light"] #clay-page.room, :root[data-mode="light"] #design-sheets.room{ --c-accent-ink:oklch(from var(--accent) min(l, .46) c h); } } /* ── TYPE ────────────────────────────────────────────────────────────────────────────────── One geometric grotesk carries everything a business writes; a mono carries everything a system says — labels, counts, the "/ 01". Two families, and the second one never sets a sentence. `--c-base` and `--c-ratio` are the type SCALE, not spacing: they say how big a letter is and how far apart the steps are. The fluid steps above them stay `parts.css`'s, so every rule about a heading against its own body is measuring the page this actually draws. */ :is(#clay-page,#design-sheets).room{ --c-display:"Schibsted Grotesk","Inter",system-ui,sans-serif; --c-body:"Schibsted Grotesk","Inter",system-ui,sans-serif; --c-label:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --c-weight:500; /* medium, on every title. Nothing here is bold. */ --c-case:none; --c-track:-.03em; --c-lead-h:1.0; --c-body-h:1.7; --c-base:16px; --c-ratio:1.34; --c-ratio-sm:1.2; --c-display-adj:1; /* the label — mono, uppercase, tracked, and never underlined: an eyebrow is not pressable */ --c-label-weight:400; --c-label-case:uppercase; --c-label-track:.14em; --c-eyebrow-deco:none; } /* ── TREATMENT — four radii, one border weight, and no shadow ────────────────────────────── Everything is generously round and nothing is a rectangle by accident. A DARK THEME WITH DROP SHADOWS LOOKS LIKE DIRT: elevation here is one step of value, never a blur. These are shape, not size. `--c-r` is what a corner looks like; it moves nothing and takes up no room. */ :is(#clay-page,#design-sheets).room{ --c-r:16px; /* media, fields, small tiles */ --c-r-lg:28px; /* cards, sheets, panels */ --c-bw:1px; --c-card-bw:1px; --c-card-shadow:none; --c-quote-bw:var(--c-bw); --c-quote-bg:var(--c-fill); /* …and neither is `--c-quote-ink`, for the same reason: a quotation states its own ground, so the ink on it is derived from THAT rather than from the page's. */ --c-field-bg:var(--c-fill); --c-field-bg-hi:var(--c-paper); --c-field-bw:var(--c-bw); --c-field-bw-b:var(--c-bw); } /* ── THE GRADE — the one that decides it ─────────────────────────────────────────────────── Forty photographs taken over four years on three phones: some flash-lit, some blue with shade. The treatment's job is not to make them beautiful. It is to make them look like they were all taken by the same person on the same afternoon. saturate .86 pulls apart phone-camera oversaturation, so a red plate and a red wall agree contrast 1.06 puts a floor under flat, overcast shots brightness .96 lets any photograph sit on graphite without glowing at its edges the vignette 34% at the corners — hides the four different vignettes their phones applied the scrim ink 0 → 55%: the one thing that makes white type safe on a photograph nobody vetted the hairline 1px of the text colour at 12% inside the radius — a photo always has an edge IN THE LIGHT ROOM the same six moves take different values: brightness returns to 1.0, the vignette is dropped entirely and the hairline becomes ink at 10%. Same six moves, different room — not the dark values inverted. */ :is(#clay-page,#design-sheets).room{ --c-photo:saturate(.86) contrast(1.06) brightness(.96); --c-photo-wash:radial-gradient(120% 120% at 50% 45%, rgb(0 0 0 / 0) 52%, rgb(0 0 0 / .34) 100%); --c-photo-wash-blend:multiply; --c-scrim-a:0; --c-scrim-b:.55; --c-scrim-dim:.30; } #clay-page.room[data-mode="light"], #design-sheets.room[data-mode="light"], :root[data-mode="light"] #clay-page.room, :root[data-mode="light"] #design-sheets.room, :is(#clay-page,#design-sheets).room:not([data-mode="dark"]){ --c-photo:saturate(.86) contrast(1.06) brightness(1); --c-photo-wash:none; --c-scrim-b:.46; } /* THE ESCAPE HATCH — the picture as they took it, every layer off together. Some businesses have photographs a filter would only spoil. */ :root[data-photos="raw"], :root[data-photos="raw"] :is(#clay-page,#design-sheets).room{ --c-photo:none; --c-photo-wash:none; --c-photo-grain:none; } /* ── THE ONE ACCENT EVENT ────────────────────────────────────────────────────────────────── The accent lands on the CLOSING INVITATION — the last thing on the page, the thing somebody is meant to press — and nowhere else. Every other button is ink on paper: the white pill on graphite, the black pill on cream. "One accent event per screen. The primary action, or the live state, or the one thing being sold — not all three. Everywhere else the hierarchy is carried by value and size." */ :is(#clay-page,#design-sheets).room{ --c-act-font:var(--c-body); --c-act-weight:500; --c-act-case:none; /* THE ACCENT IS THE ACTION. It was ink on paper — a black pill on cream, a white one on graphite — which kept the owner's colour for a live dot and one map pin and nothing else: "not using the accent color for main buttons or cta.. now its almost not used". A slot the owner fills that never appears is not a slot. So every primary action wears it, on the page and in the bar, and `one accent event per screen` goes back to meaning what it meant in the brief: the accent marks the thing you press, and nothing else competes. AND THE INK ON IT IS NOT STATED, WHICH IS THE POINT. Whether an owner's colour can be told apart from what is written on it is not a matter of taste and not something this file can answer — it is written before anybody picks a colour. parts.css derives `--c-act-ink` from `--c-act-bg-safe`, which is the accent held to a lightness the paper can be told from, by a threshold somebody searched for. Stating the ink here overrode all of that: a green a restaurant might genuinely pick came out with dark words on it. So the theme says its taste and the contract keeps the floor. */ --c-act-bg:var(--c-accent); --c-act-bar-bg:var(--c-accent); /* …AND THE PLATE UNDER A WAY IN IS NOT THE ACTION. `--c-block-bg` defaults to the button's ground, so making the button the accent turned every ways-in card's word plate into a slab of the owner's colour — three green plates across the first band under the photograph. It is the contrast room here, which is what it was before the accent moved. */ --c-block-bg:var(--c-flip); --c-nav-dim:1; --c-band-accent:var(--c-accent); /* …nor `--c-on-band`, which is the same derivation over the band's own accent. */ } /* ── A THING FOR SALE OR FOR HIRE IS THE SAME OBJECT AS A WAY IN ─────────────────────────── "for shop for the room theme i also asked the darker cards.. makes more sense. and for the rental cards.. like the 'does' section." A way in is a photograph with a plate under the words (`--c-block-bg`). A product and a hire are the same object — a photograph, a name, a price — and they were wearing the pale card instead, which on cream is half a tone off the page and reads as nothing. So they wear the plate. TWO PLACES IT CANNOT BE THE PLATE, and both are the same reason: a plate standing on itself is one surface. · a products band whose GROUND is already the contrast room — there the card keeps the grey · a hire, which sits INSIDE the booking card and that card is the contrast room — so a hire takes one step within that room (`--rm-thing`) rather than the room itself `--g` and not just `background`: every ink inside these is derived from the ground they state, so setting the fill alone would leave near-black type on a near-black plate. */ :is(#clay-page,#design-sheets).room .c-band[data-band="products"]:not(.c-g-ink):not(.c-g-accent):not(.c-g-photo) .c-card{ --g:var(--c-block-bg);background:var(--g);border-color:transparent} :is(#clay-page,#design-sheets).room .l-bc-thing{--g:var(--rm-thing);background:var(--g); border-color:transparent} /* ============================================================================================ THE EDITOR'S STYLESHEETS ARE ON THIS PAGE TOO — and they are older than this design. ============================================================================================ An owner's page loads editor-ui.css and site.css for the panel, the dock and the pickers. Both carry UNSCOPED class rules on names the design layer also uses — `.sheet`, `.card`, `.wrap`, `.field`, `.fgrid` — and the result is visible only to the OWNER, which is why it survives a whole test suite. Everything those files set on a shared name is put back to the browser's own value here. This is plumbing, not design: it undoes, it does not decide. ============================================================================================ */ :is(#clay-page,#design-sheets).room .sheet{color:inherit;font-family:inherit;background:none;border:0} :is(#clay-page,#design-sheets).room .card{background:none;border-radius:0;transition:none} /* A BUTTON IS NOT A BUTTON-SHAPED BOX. Anything clickable is a real