/* ============================================================================
demo.css — every style that belongs to demo.trimsy.io and to no other shop.
ONE FILE, LINKED ONLY BY THE DEMO, for two reasons that pull the same way.
Correctness first: the demo's furniture appears on BOTH sides of the
product. The wordmark is in the public header, the public footer, the admin
bar and the app's launch screen - and the public pages load app.css while
the staff pages load admin.css, which share nothing. Written into app.css
alone, the mark arrived on the admin with no weight, no tracking and no word
space, so `demo barber` rendered as `demobarber`. Written into both, it is
two copies to keep in step for ever.
Cost second: fifty paying shops were downloading the styles for a banner
saying "this shop is invented", a modal explaining a demo, and a plaque
printing a pairing code, none of which can ever render on their sites. Now
they download none of it and this file is requested by one hostname.
Linked from lib/views/demo.js, which is also the only thing that emits the
markup these rules are for. Both layouts ask that module and neither knows
anything about the demo beyond "is it".
========================================================================== */
/* THE MADE-UP SHOP'S WORDMARK — demo.trimsy.io only, drawn by
lib/views/demo.js. No shop we are paid by ever gets this.
`demo barber`, set the way Fresha's mark and Trimsy's own are: one weight,
lowercase, tracked in tight. Those three things are the entire design. Set
it in two weights or in caps and it stops being a mark and goes back to
being two words in a header.
Sized in em off one font-size so the header, the footer and the app's launch
screen are the same artwork at four scales rather than four sets of numbers
to keep in step. It takes currentColor, which is what lets one wordmark sit
on the sign-black header, the sign-black footer band, the brand-coloured
admin bar and a white launch screen without a second file. */
.dmark {
display: inline-block; font-size: 24px; line-height: 1;
font-family: var(--sans); font-weight: 800;
/* The mark is lowercase whatever the markup says, so a future caller writing
"Demo Barber" cannot quietly undo half the design. */
text-transform: lowercase;
letter-spacing: -.045em;
color: currentColor; text-decoration: none; white-space: nowrap;
}
/* THE WORD SPACE, and it is load-bearing. A default space at 800 weight opens
a hole in the middle of the mark wide enough to read as two words that
happen to be next to each other. A fifth of an em closes it to the point
where the pair reads as one object and the tracking can still do its work.
Left margin rather than a narrow-space character: a character is invisible
in the source and the next person deletes it. */
.dmark .dm2 { margin-left: .2em; }
/* The footer copy is the same mark, larger, and a block so it sits at the
start of its column like the artwork it replaces. .fmark is written for an
![]()
and caps the width in px, which would squeeze type. */
.dmark.fmark { display: block; width: auto; height: auto; font-size: 30px; }
/* ---- the demo shop --------------------------------------------------------
demo.trimsy.io only. Rendered by lib/views/demo.js, gated on isDemoShop(),
and never served to a shop we are paid by. */
/* THE RIBBON, above the sticky header so it scrolls away. It has to be read
before a price or a barber's name is, and it has to stop being in the way
immediately afterwards - a banner pinned over a booking flow is shouting
over the thing it is trying to demonstrate. */
.demobar {
background: var(--brand); color: var(--on-brand);
font-size: var(--t-small);
border-bottom: 1px solid rgba(var(--sign-rgb), .18);
}
.demobar .wrap {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4); padding-top: var(--s2); padding-bottom: var(--s2);
}
.demobar p { margin: 0; }
/* The link keeps its underline. It is the one control in the bar, it sits on a
coloured field where a bare colour change would not read as a link at all,
and it must not be mistaken for the rest of the sentence. */
.demobar-how {
color: inherit; white-space: nowrap; font-weight: 600;
text-underline-offset: 3px;
}
/* Under 640px the sentence and the link stack rather than squeeze: the link is
a tap target and the last thing that should be losing width. */
@media (max-width: 640px) {
.demobar .wrap { flex-direction: column; align-items: flex-start; gap: var(--s1); }
}
/* THE GUIDE AS A SECTION - what it is with no script at all. Ordinary page
furniture at the bottom of the page, which the ribbon's link jumps to. */
.dguide {
max-width: var(--maxw); margin: var(--s8) auto 0; padding: 0 var(--s5);
}
.dguide-in {
background: var(--paper); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: var(--s6);
}
.dguide h2 { font: 600 var(--t-title)/1.15 var(--display); margin: 0 0 var(--s3); }
.dguide h3 {
font: 700 var(--t-tiny)/1 var(--sans); letter-spacing: var(--track-caps);
text-transform: uppercase; color: var(--ink-faint);
margin: var(--s6) 0 var(--s3);
}
.dguide-lead { font-size: var(--t-lead); color: var(--ink-soft); margin: 0; }
/* The number and the bullet are the only things telling these two lists apart
at a glance, so the ordered one keeps its numerals rather than being styled
into another set of dots. */
.dguide-list { margin: 0; padding-left: var(--s5); }
.dguide-list li { margin: 0 0 var(--s3); color: var(--ink-soft); }
.dguide-list strong { color: var(--ink); }
.dguide-cta {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
margin: var(--s6) 0 0;
}
.dguide-link { color: var(--ink-soft); font-size: var(--t-small); }
/* THE SAME ELEMENT AS A MODAL, once static/demo.js has moved it into a