/* go_2048 — 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 design tokens (:root vars + dark-mode overrides), 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). Source of the tokens: property-team listing_2050 @theme. */ :root { color-scheme: light dark; --primary: #1d4ed8; /* --color-primary default (--primaryColor) */ --primary-strong: #1e40af; --surface-warm: #fcf7f4; /* --color-surface-warm */ --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; /* themed surfaces (light) */ --page-bg: var(--n100); --card-bg: #ffffff; --body-text: var(--n700); --heading-text: var(--n900); --border: var(--n200); --muted-text: var(--n500); } *, *::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(--page-bg); color: var(--body-text); 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(--heading-text); 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(--body-text); line-height: 1.7; font-size: 1.02rem; } .detail-content a { color: var(--primary); } .detail-content ul { color: var(--body-text); line-height: 1.85; padding-left: 1.15rem; } .muted { color: var(--muted-text); 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 ; the @media block is the no-JS fallback (OS preference when the user hasn't chosen). Dark surfaces cascade through the token vars. */ :root[data-theme="dark"] { --page-bg: var(--n950); --card-bg: var(--n900); --body-text: var(--n200); --heading-text: #ffffff; --border: var(--n800); --muted-text: var(--n400); --surface-warm: #1c1917; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --page-bg: var(--n950); --card-bg: var(--n900); --body-text: var(--n200); --heading-text: #ffffff; --border: var(--n800); --muted-text: var(--n400); --surface-warm: #1c1917; } } [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(--heading-text); margin: 0 0 .8rem; padding-bottom: .45rem; border-bottom: 1px solid var(--border); } .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(--body-text); } .project-amenities__item i { flex: none; width: 1.15rem; margin-top: .12rem; color: var(--primary); text-align: center; font-style: normal; } .project-amenities__item span { min-width: 0; }