/* ============================================================================= ROAM Stays — design tokens + self-hosted brand fonts Single source of truth, adapted from the ROAM Stays v2 design system (design/v2/colors_and_type.css). Enqueued BEFORE roam.css so every rule can reference --roam-* tokens. Self-hosts the brand variable fonts (no CDN). ========================================================================== */ /* ── Brand variable fonts (self-hosted in assets/fonts/) ─────────────────── */ @font-face{ font-family:'Playfair Display'; src:url('assets/fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype-variations'); font-weight:100 1000; font-style:normal; font-display:swap; } @font-face{ font-family:'Playfair Display'; src:url('assets/fonts/PlayfairDisplay-Italic-VariableFont_wght.ttf') format('truetype-variations'); font-weight:100 1000; font-style:italic; font-display:swap; } @font-face{ font-family:'DM Sans'; src:url('assets/fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'); font-weight:100 1000; font-style:normal; font-display:swap; } @font-face{ font-family:'DM Sans'; src:url('assets/fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'); font-weight:100 1000; font-style:italic; font-display:swap; } :root{ /* ── Core palette ── */ --roam-forest:#1B2B27; --roam-forest-light:#2A4A40; --roam-forest-soft:#3D6858; --roam-forest-active:#0F1A16; --roam-teal:#5B8FA8; --roam-teal-active:#4A7D95; --roam-gold:#C6975B; --roam-gold-active:#B8893F; /* THE ELEVATED GOLD. Brand gold sits on cream; this one sits on a photograph or a forest band, where #C6975B goes muddy and reads brown. It is the hero eyebrow's colour, the ROAM Standard band's, and the guest-favourite laurel's. It was NOT canonised — declared in roam.css inside the hero's own block and read by three rules in two other places, which is a palette entry hiding in a component. Asked directly whether it was; it was not; it is now. */ --roam-gold-lifted:#E0B978; --roam-sage:#A89E7B; --roam-sage-active:#968C6B; --roam-cream:#FAF6F1; --roam-cream-active:#E5E1DB; --roam-white:#FFFFFF; /* The ground under a placeholder tile — a shade below cream so a "photo to come" reads as deliberately empty rather than as a card that failed to paint. It was a bare #E8E2D9 literal in two card rules before it was named. */ --roam-sand:#E8E2D9; --roam-error:#A33030; --roam-error-active:#8C2424; --roam-success:#3A7D52; --roam-success-active:#2F6843; --roam-warning:#946B2D; --roam-warning-active:#7D5A24; --roam-info:#3B6B9B; --roam-info-active:#305A84; /* ── Light-theme text ── */ --roam-text-primary:#1B2B27; --roam-text-body:#444444; --roam-text-secondary:#555555; --roam-text-muted:rgba(27,43,39,0.6); --roam-text-light:#999999; --roam-text-faint:#AAAAAA; --roam-text-ghost:#BBBBBB; --roam-text-warm:#AD9B84; /* ── Dark-theme text (over forest) ── */ --roam-dark-text:#FAF6F1; --roam-dark-text-body:rgba(250,246,241,0.6); --roam-dark-text-muted:rgba(250,246,241,0.5); --roam-dark-text-faint:rgba(250,246,241,0.4); --roam-dark-text-ghost:rgba(250,246,241,0.35); --roam-dark-text-whisper:rgba(250,246,241,0.3); /* ── Borders ── */ --roam-border-cream:#F0EDE8; --roam-border-tag:#E0DCD7; --roam-border-warm:#3A342B; --roam-dark-border-subtle:rgba(250,246,241,0.10); --roam-dark-border-visible:rgba(250,246,241,0.12); /* ── Gradients / surfaces ── */ --roam-gradient-brand:linear-gradient(to right,#5B8FA8,#A89E7B,#C6975B); --roam-gradient-simple:linear-gradient(to right,#5B8FA8,#C6975B); --roam-gradient-accent:linear-gradient(to bottom,#5B8FA8,#C6975B); --roam-surface-hero:linear-gradient(145deg,#1B2B27 0%,#2A4A40 40%,#3D6858 100%); --roam-surface-stat:linear-gradient(145deg,#1B2B27 0%,#2A4A40 100%); --roam-surface-content:linear-gradient(145deg,#2A4A40 0%,#3D6858 100%); --roam-surface-forest-down:linear-gradient(180deg,#2A4A40 0%,#1B2B27 100%); --roam-surface-forest-up:linear-gradient(180deg,#1B2B27 0%,#2A4A40 100%); /* ── Photo treatment (the "Roam Photo Treatment") ── */ --roam-photo-filter:saturate(0.8) contrast(1.05) brightness(0.95); --roam-photo-overlay:linear-gradient(180deg,rgba(27,43,39,0.2) 0%,transparent 40%,transparent 60%,rgba(27,43,39,0.8) 100%); /* ── Typefaces ── */ --roam-font-display:'Playfair Display', Georgia, serif; --roam-font-body:'DM Sans', system-ui, -apple-system, sans-serif; /* ── Type scale (px) ── */ --roam-fs-9:9px; --roam-fs-10:10px; --roam-fs-11:11px; --roam-fs-12:12px; --roam-fs-13:13px; --roam-fs-14:14px; --roam-fs-15:15px; --roam-fs-16:16px; --roam-fs-18:18px; --roam-fs-20:20px; --roam-fs-22:22px; --roam-fs-24:24px; --roam-fs-28:28px; --roam-fs-32:32px; --roam-fs-36:36px; --roam-fs-40:40px; --roam-fs-56:56px; --roam-fs-80:80px; --roam-fs-display:clamp(40px,10vw,80px); /* ── Weight / line-height / tracking ── */ --roam-fw-normal:400; --roam-fw-medium:500; --roam-fw-semibold:600; --roam-fw-bold:700; --roam-lh-none:1; --roam-lh-tight:1.05; --roam-lh-heading:1.1; --roam-lh-card:1.2; --roam-lh-snug:1.6; --roam-lh-body:1.7; --roam-ls-tight:-0.3px; --roam-ls-xs:0.05em; --roam-ls-sm:0.08em; --roam-ls-md:0.10em; --roam-ls-lg:0.12em; --roam-ls-xl:0.15em; --roam-ls-section:2px; /* ── Spacing / flow ── */ --roam-sp-2:2px; --roam-sp-4:4px; --roam-sp-6:6px; --roam-sp-8:8px; --roam-sp-10:10px;--roam-sp-12:12px;--roam-sp-14:14px;--roam-sp-16:16px; --roam-sp-18:18px;--roam-sp-20:20px;--roam-sp-24:24px;--roam-sp-28:28px; --roam-sp-32:32px;--roam-sp-36:36px;--roam-sp-40:40px;--roam-sp-48:48px; --roam-sp-56:56px;--roam-sp-60:60px;--roam-sp-64:64px;--roam-sp-80:80px;--roam-sp-112:112px; /* FLOW — the space between two things, chosen by their RELATIONSHIP rather than by eye. Four, and the count is the point: a scale with twenty entries is not a system, it is a menu. coupled a label and the thing it labels; a caption and its figure related two parts of one statement separated one idea ends and another begins block a HEADING ends and a grid begins — a card row, a tile row, a column set. Wider than `separated` because what follows is not another sentence, it is a different kind of object, and the eye needs to be told to stop reading. blockprose the same seam, but with a paragraph above it instead of a heading. TIGHTER, not looser, and that is the design's own arrangement rather than an oversight: a heading is a label for the whole band and wants air under it, while a lede has already started explaining the thing the grid is about. THESE WERE DEAD UNTIL 2026-08-01. Declared here at the port and referenced nowhere — zero uses in roam.css, zero in inc/ — so every vertical gap on the site was still picked by hand beside the rule that wanted it. That is a system on paper, and it is why the hero's elements drifted: nothing was holding them to a scale. The hero reads them now; the rest of the site is still on the raw --roam-sp-* scale and wants converting section by section as each is touched. `block` was added 2026-08-01 because two rules had already invented it independently — .roam-why__lede and .roam-std__h both wrote 40px below themselves for exactly this relationship, and .roam-hsec wrote 24 for the same one. One of the three was wrong and there was no way to tell which, which is the whole argument for naming it. IT WAS THEN 40 AND THE DEV SITE IS 32. Measured at both viewports on the regions, amenity and type bands, and declared in that site's own sheet as `.roam-hs__h2 { margin: 8px 0 32px }`. 40 was picked here by eye, and it is precisely the gap the client asked to tighten. The prose variant is 22 on the same evidence — measured on the why-direct band, lede to stats. NEITHER VALUE MOVES BETWEEN DESKTOP AND PHONE, which is worth writing down because it is not what you would guess. Every flow gap on the dev homepage is identical at 1440 and 390; the only thing that responds is the band's own padding, --roam-sec-y. The rhythm INSIDE a section is a property of the type, and this type is not fluid. */ --roam-flow-coupled:8px; --roam-flow-related:16px; --roam-flow-separated:24px; --roam-flow-block:32px; --roam-flow-blockprose:22px; /* THE CLEARANCE UNDER THE GOLD RULE, and it is not a flow value. A title with no eyebrow above it draws the 32x2 gold mark itself, absolutely positioned at its own top edge, and this is the padding that keeps the text off it. It is a property of that ONE construction, so it is named for the mark rather than for a relationship between two elements — and naming it is what stops it being read as an eyebrow-to-title gap, which is what it was doing: 20px of it landed under every eyebrow on the homepage, on top of the 8px the flow token had already set, for a mark that rule suppresses. */ --roam-flow-mark:20px; /* ── Type roles ─────────────────────────────────────────────────────────── FOUR ROLES, and the point is that a section is described by which role a line plays rather than by which block it happens to live in. Before these there were three competing families for the same four things: .roam-hsec__h at clamp(24,3vw,32), .roam-why__title at clamp(28,3.5vw,36) and .roam-sec__h flat at 24, with the lede sometimes 18/snug and sometimes inherited, and the gold 32x2 rule declared on BOTH the eyebrow and the title so a section carrying an eyebrow drew it twice. eyebrow the label above a section title the section's own name subtitle the line that qualifies the title body prose A fifth is here because the property page needs it and would otherwise have gone on inventing its own: subhead is a heading INSIDE a section, which is a different job from naming one. */ --roam-type-eyebrow-size:12px; --roam-type-eyebrow-weight:600; --roam-type-eyebrow-track:2px; /* THE EYEBROW WAS THE ONE ROLE WITH NO LINE HEIGHT, so it inherited body's 1.7 — 12px of ink in a 20.4px box. Every other role names its own. 1.867 IS MEASURED, NOT CHOSEN: dev's section eyebrow renders 12px on a 22.4px line at every viewport. It was briefly 1.2 here on the reasoning that a single uppercase line never wraps so its leading is doing nothing — which is true as typography and wrong as a brief. That is 8px of air the reference site has above and below every eyebrow on the page, and taking it out moved the label 4px closer to its title than the design puts it. */ --roam-type-eyebrow-lh:1.867; /* dev: .roam-hs__h2 is clamp(30px, 4vw, 40px) on 1.1 with no tracking. Mine was clamp(26,3vw,34) on 1.15 with -0.3px — a smaller, looser, tighter-set heading, which is three differences reading as one "doesn't match". */ --roam-type-title-size:clamp(30px, 4vw, 40px); --roam-type-title-lh:1.1; --roam-type-subhead-size:24px; --roam-type-subhead-lh:1.25; --roam-type-subtitle-size:18px; --roam-type-subtitle-lh:1.5; /* dev: .roam-hs__lede is 15px on #444 at a 520px measure — a section's body copy, which is what our body role already is. The measure comes with it: 60ch at 15px is about 450 and reads narrow beside a 40px heading. */ --roam-type-body-size:15px; --roam-type-body-lh:1.7; --roam-type-body-measure:520px; /* ── Radius / elevation / motion ── */ --roam-r-xs:2px; --roam-r-sm:8px; --roam-r-md:10px; --roam-r-lg:12px; --roam-r-xl:20px; --roam-r-full:9999px; --roam-shadow-rest:0 2px 16px rgba(27,43,39,0.06); --roam-shadow-hover:0 20px 60px rgba(27,43,39,0.12); --roam-lift-hover:translateY(-4px); --roam-easing:cubic-bezier(0.25,0.46,0.45,0.94); /* ── Layout ────────────────────────────────────────────────────────────── ONE content column for the whole site. Everything that holds content — the header bar, the hero, every homepage section, the footer — resolves to the same box: min(--roam-max-width, 100vw - 2*--roam-page-x), centred. At 1440 that is 1280px starting at x=80, and the ROAM logo, the hero eyebrow and every section heading share that left edge. --roam-shell is for boxes that pad INSIDE their own max-width (a section that is its own container). --roam-max-width is for boxes that sit inside a padded parent (the inner wrapper of a full-bleed band). The two are the same content column expressed for the two box models; mixing them up is what put six sections on x=105 and three on x=80. Client report 2026-07-27: "sections seem to have significantly varying widths… the roam logo is 55px in from the hero content left edge." 135 minus 80 is exactly that 55. */ --roam-max-width:1280px; --roam-page-x:25px; --roam-header-h:72px; --roam-shell:calc(var(--roam-max-width) + 2 * var(--roam-page-x)); /* Vertical rhythm — ONE unit. Every section pads --roam-sec-y top and bottom, whether or not it paints its own background, so the seam between any two of them is exactly 2× and there is nothing to reason about. This started as two tokens, a smaller one for plain sections and a larger one for coloured bands, on the theory that a band should breathe more. It measured 72px between plain sections and 109 either side of a band — still the uneven spacing that was reported, just less of it. Rendered side by side at 36 the bands read fine: the colour edge does the work the extra padding was supposed to do. Before any of this the seams ran 72,72,144,144,144,144,72,176. Dialled 36 → 28 on 2026-08-02 (client): the rhythm read a touch airy on the long property page. It is still ONE unit, so every section tightens together — no per-section exception. */ --roam-sec-y:28px; /* ── Back-compat aliases (existing header/hero roam.css uses these short names) ── */ --forest:var(--roam-forest); --forest-light:var(--roam-forest-light); --forest-soft:var(--roam-forest-soft); --gold:var(--roam-gold); --gold-active:var(--roam-gold-active); --sage:var(--roam-sage); --teal:var(--roam-teal); --cream:var(--roam-cream); --white:var(--roam-white); --radius-full:var(--roam-r-full); --track-sm:var(--roam-ls-sm); --roam-header-bg:var(--roam-surface-stat); --font-display:var(--roam-font-display); --font-body:var(--roam-font-body); } /* Phones get the same column, tightened vertically. 72px of band on a 390px screen is a fifth of the viewport spent on nothing. */ @media (max-width:767px){ :root{ --roam-sec-y:20px; } }