/* go_2050 — token CSS for the listing_2050-ported theme. The chrome (header, hero, footer, nav, menus) and the detail/project pages are now authored with Tailwind utilities (built into static/app.css). This file keeps only what those don't cover: the theme's own tokens, base element styles, the .muted/.read-more/.error helpers, the .theme-switch toggle styling, and the articles/listings INDEX cards (still authored with semantic classes). Colour roles come from the SHARED design-templates semantic system (--color-surface*/heading/ink*/edge* in app.css, flipped in one place by the .dark/[data-theme="dark"] --sem-* block) — the old per-theme --page-bg / --card-bg / --body-text / --heading-text / --border / --muted-text vars are collapsed into it; only the neutral scale (--n*) stays for values with no semantic equivalent. */ :root { color-scheme: light dark; --header-height: 80px; /* sticky header offset / hero pull-up */ /* neutral scale (Tailwind neutral) */ --n50: #fafafa; --n100: #f5f5f5; --n200: #e5e5e5; --n300: #d4d4d4; --n400: #a3a3a3; --n500: #737373; --n600: #525252; --n700: #404040; --n800: #262626; --n900: #171717; --n950: #0a0a0a; } *, *::before, *::after { box-sizing: border-box; } /* clip (not hidden): clips any horizontal overflow without forcing overflow-y to `auto`, which would spawn a second scroll container → double scrollbar. */ html, body { overflow-x: clip; } body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--color-surface); color: var(--color-ink); margin: 0; display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } main { flex: 1; } .detail-content h1, .detail-content h2, .detail-content h3 { color: var(--color-heading); letter-spacing: -0.02em; line-height: 1.15; } h1 { font-size: 2.25rem; font-weight: 700; margin: 0 0 14px; } h2 { font-size: 1.5rem; font-weight: 600; margin-top: 40px; } h3 { font-size: 1.15rem; font-weight: 600; } /* Content typography is scoped to `.detail-content` — the authored-body wrapper (page/article body). These are bare, unlayered element rules, and an unlayered rule beats Tailwind's layered utilities regardless of specificity — so a global `p`/`ul`/`a`/`h* {}` would clobber the text-white/text-primary utilities on the chrome (nav, hero eyebrow/heading/lede, footer copyright) and tint it with the theme-dependent --heading-text / --body-text / --primary, flipping chrome text dark in light mode and teal on the nav. The hero/masthead now lives inside
(semantic: the page

belongs to
), so scoping to
would re-clobber it — scoping to `.detail-content` (which the hero is never inside) leaves all chrome to its theme-independent utilities while authored content keeps brand typography. Mirrors listing_2050's .detail-content prose scope. */ .detail-content p { color: var(--color-ink); line-height: 1.7; font-size: 1.02rem; } .detail-content a { color: var(--brand-primary, #1d4ed8); } .detail-content ul { color: var(--color-ink); line-height: 1.85; padding-left: 1.15rem; } .muted { color: var(--color-ink-muted); font-size: 0.9rem; } .error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 11px 16px; border-radius: 12px; } /* Dark/light colour mode. theme-init sets , which the SHARED --sem-* flip block (app.css, from design-templates) keys on — no per-theme dark overrides needed here. The @media block below is the no-JS fallback (OS preference when the user hasn't chosen): it mirrors the shared flip's values onto the same --sem-* vars, because without JS data-theme is never set and the shared block can't match. Keep in lockstep with shared/theme-tokens.css. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --sem-primary-soft: color-mix(in oklab, var(--brand-primary, #1d4ed8) 55%, white); --sem-surface-warm: #1c1917; --sem-surface: #0a0a0a; --sem-surface-raised: #171717; --sem-surface-muted: #262626; --sem-heading: #ffffff; --sem-ink: #d4d4d4; --sem-ink-muted: #a3a3a3; --sem-edge: #262626; --sem-edge-strong: #404040; --sem-edge-raised: rgba(255, 255, 255, .14); } } [data-theme="dark"] .error { background: #2a1414; border-color: #5b2424; color: #fca5a5; } /* Dark/light toggle button (white on the brand-coloured header). */ .theme-switch { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; margin-left: 4px; border: 0; border-radius: 999px; background: transparent; color: #ffffff; cursor: pointer; transition: background .15s ease; } .theme-switch:hover { background: rgba(255, 255, 255, 0.14); } .theme-switch__sun { display: none; } .theme-switch__moon { display: block; } [data-theme="dark"] .theme-switch__moon { display: none; } [data-theme="dark"] .theme-switch__sun { display: block; } /* Smaller sticky-header offset on phones (the Tailwind header is h-[var(--header-height)]; the home hero pulls up by the same amount). */ @media (max-width: 639.98px) { :root { --header-height: 60px; } } /* Development "Amenities" section — the ###[amenities]### page-builder token expansion (microsite_sections.go) emits these semantic classes, styled here (not Tailwind) like the index cards. Colours key off the theme tokens so the section flips with dark mode automatically. The sibling JSON sections (location/factsheets/…) are authored HTML and inherit .detail-content prose. */ .default-sections { margin: 1.5rem 0; } .project-amenities__group { margin: 0 0 1.75rem; } .project-amenities__group:last-child { margin-bottom: 0; } .project-amenities__category { font-size: 1.05rem; font-weight: 600; color: var(--color-heading); margin: 0 0 .8rem; padding-bottom: .45rem; border-bottom: 1px solid var(--color-edge); } .project-amenities__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .project-amenities__item { display: flex; align-items: flex-start; gap: .55rem; font-size: .95rem; line-height: 1.45; color: var(--color-ink); } .project-amenities__item i { flex: none; width: 1.15rem; margin-top: .12rem; color: var(--brand-primary, #1d4ed8); text-align: center; font-style: normal; } .project-amenities__item span { min-width: 0; }