/* ════════════════════════════════════════════════════════════════════════ EDITORIAL DESIGN OVERLAY — Option C polish layer ════════════════════════════════════════════════════════════════════════ Loaded LAST in the of /host, /admin, /account, /escapes so it wins same-specificity cascades vs. inline page styles. Touches ONLY visual properties (color, font, radius, padding, letter-spacing). Does NOT change layout-critical values that JS may query (offsetHeight, getBoundingClientRect, etc.). Anchored in docs/R9-DESIGN-TOKENS.md and the dashboard prototype at /dashboards. Lifts the same design language into the operational pages without modifying their JavaScript or HTML structure. Tokens redeclared at :root with !important fallback so they cascade even when inline styles re-define them late. ════════════════════════════════════════════════════════════════════════ */ /* ─── 1. Tokens ─────────────────────────────────────────────────────── */ :root { /* Canonical editorial palette — strict monochrome */ --tlb-ink: #141414; --tlb-deep: #2a2a2a; --tlb-mid: #6a6a6a; --tlb-soft: #d8d4ca; --tlb-line: #e5e5e5; --tlb-bg: #ffffff; --tlb-bg-soft: #f8f8f8; --tlb-bg-canvas: #fafafa; /* operational tool canvas — slightly off-white */ /* Typography */ --tlb-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --tlb-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --tlb-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Radius — design system */ --tlb-radius-pill: 100px; --tlb-radius-card: 18px; --tlb-radius-input: 12px; --tlb-radius-modal: 8px; --tlb-radius-icon: 50%; /* Editorial easing */ --tlb-ease: cubic-bezier(0.25, 0.1, 0.25, 1); } /* ─── 2. Document baseline ──────────────────────────────────────────── */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Body — pure white background across every operational dashboard, but ONLY in day theme. host.html supports a night theme via `` set from localStorage('tlb-theme'). In night mode the body bg is `#0f0f0f` and text is `#f0f0f0`. If we force white bg there, the white text becomes invisible (the bug the user just reported). Scope the override to day-theme only. */ body { font-family: var(--tlb-sans); font-feature-settings: 'cv11', 'ss01', 'ss03', 'cv09'; } html:not([data-theme="night"]):not([data-theme="dark"]) body, :root:not([data-theme="night"]):not([data-theme="dark"]) body { background: #ffffff !important; } html:not([data-theme="night"]):not([data-theme="dark"]) { background: #ffffff !important; } /* IMPORTANT — DO NOT re-point --cream / --bg / --bg-card tokens here. Operational pages have INVERTED meanings for these tokens: - host.html declares `--cream: #141414` and uses it as TEXT COLOR (`color: var(--cream)` on body, .form-input, .stat-value, etc.). Overriding it to #ffffff made every form input value, KPI number, property name, and table row text render as white-on-white — completely invisible. - admin.html uses `--bg` for body background (off-white). - account.html uses `--cream` for body background (off-white). - escapes.html uses `--cream` for body background (white). The overlay enforces the white background via the direct `body { background: #ffffff !important }` rule above, which wins over any var(--cream)-driven body bg without breaking the same token's text-color usage on host.html. */ /* ─── 3. Headings — promote Playfair Display ────────────────────────── */ h1, h2, .editorial-h1, .editorial-h2, .dashboard-welcome > div:nth-child(2), /* host.html welcome */ .welcome-title, .page-title { font-family: var(--tlb-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; } /* Italic accent inside a heading — Playfair italic earns the emphasis. */ h1 em, h2 em, h3 em, .editorial-h1 em, .editorial-h2 em { font-family: var(--tlb-display); font-style: italic; font-weight: 500; } /* H3 stays in Plus Jakarta Sans by default — operational tools want sans-serif sub-section labels for scanability. Add `.h3-display` to any h3 that should promote to Playfair. */ .h3-display { font-family: var(--tlb-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } /* ─── 4. Eyebrow pattern (10px uppercase, 0.18em letter-spacing) ───── */ .editorial-eyebrow, .eyebrow, .section-eyebrow, .kicker { font-family: var(--tlb-sans); font-size: 10px !important; font-weight: 600; letter-spacing: 0.18em !important; text-transform: uppercase; color: var(--tlb-mid); } /* ─── 5. Button polish — 100px pill ─────────────────────────────────── */ /* Light-touch overlay: only normalises border-radius to the canonical pill value and ensures fonts inherit. Page-level colors / borders / backgrounds are PRESERVED so custom variants (host.html .btn-gold, admin.html .sm-btn-ghost, etc.) keep their authored personality. */ .btn, .button, .cta, .action-btn, .pill-btn, .nav-enquire, .footer-cta, .modal-cta, .sm-btn-primary, .sm-btn-ghost, .quick-action-btn { border-radius: var(--tlb-radius-pill) !important; transition: all 0.2s var(--tlb-ease); } /* Square shape for table cells / chip rows still allowed when authored */ .btn[class*="-square"], .btn[data-shape="square"], .icon-btn, .icon-button, [class*="icon-btn"] { border-radius: var(--tlb-radius-input) !important; } /* Round icon buttons stay round */ .btn-icon, .nav-search-btn, .scroll-top-btn, [class*="circle-btn"], [data-shape="circle"] { border-radius: var(--tlb-radius-icon) !important; } /* SVG icons inside pill buttons — allow them to keep their natural stroke; don't promote them to anything filled. */ .btn svg, .button svg, .pill-btn svg, .cta svg { flex-shrink: 0; fill: none; } /* ─── 6. Card / panel polish — 18px radius ──────────────────────────── */ .panel, .card, .villa-card, .article-card, .escape-card, .offer-card, .account-sidebar, .account-content, .account-card, .dashboard-card, .stat-card, .kpi-card, .property-card, .featured-card, .dest-card, .collection-card, [class*="-card"]:not([class*="card-"]) { border-radius: var(--tlb-radius-card) !important; } /* Smaller card-radius for content rails inside larger cards */ .card-inner, .row-card, .micro-card { border-radius: var(--tlb-radius-input); } /* ─── 7. Form controls — 12px input radius, inherit fonts ───────────── */ input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="password"], input[type="date"], input[type="time"], input[type="url"], input[type="datetime-local"], select, textarea { border-radius: var(--tlb-radius-input) !important; font-family: var(--tlb-sans) !important; } /* Force form controls to inherit, not OS defaults — same fix as js/typography-guard.js for stray fonts. */ button, input, select, textarea, optgroup { font-family: inherit !important; } /* ── Form text contrast guard ────────────────────────────────────── User reported the host "Add Property" modal showing form values as nearly-invisible faint grey text. Three causes were possible: (a) `color: var(--cream)` resolving to white when --cream got overridden (fixed in Section 2 by removing the bad token override). (b) The OS-default macOS Safari rendering for ,