/* NdA — Design System v2 · mobile-first shell --------------------------------------------------------------------------- Tokens extracted verbatim from the design-tool mock `themes` object ("NdA - Namoro de Aluguel.html"). Light + dark are switched by the `data-theme` attribute on , driven by the global theme signal (web/src/state/theme.rs) and persisted to localStorage. This file is additive: it does NOT re-skin the existing v1 screens. It only defines the v2 token surface + the shell/bottom-nav primitives. Screens get migrated to these tokens in a separate increment. --------------------------------------------------------------------------- */ /* ── Fonts ────────────────────────────────────────────────────────────────── Hanken Grotesque = body/UI. Instrument Serif = titles. (Baloo 2 stays the brand wordmark, linked in index.html.) The @import is a fallback; the primary lives in index.html for earlier preload. */ @import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesque:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&display=swap"); /* Light theme = default (also applied when no data-theme is set yet). */ :root, :root[data-theme="light"] { --v2-bg: #FBEDE9; --v2-bg2: #FFF6F3; --v2-surface: #FFFFFF; --v2-surface2: #FCEFEC; --v2-text: #2A1418; --v2-soft: #8A646D; --v2-border: #F1DBD5; --v2-accent: #C0314A; --v2-accent-strong: #A11F38; --v2-accent-soft: #FBE3E6; --v2-gold: #A9854F; --v2-shadow: rgba(120, 20, 40, 0.16); --v2-track: #EAD3CD; /* Typography tokens */ --v2-font-body: "Hanken Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --v2-font-title: "Instrument Serif", Georgia, "Times New Roman", serif; --v2-font-brand: "Baloo 2", "Hanken Grotesque", system-ui, sans-serif; /* Shell geometry */ --v2-radius-pill: 999px; --v2-bottom-nav-h: 64px; /* approx height of the floating pill */ --v2-bottom-nav-gap: 18px; /* distance from viewport bottom (mock) */ } :root[data-theme="dark"] { --v2-bg: #150B0F; --v2-bg2: #1E1116; --v2-surface: #241419; --v2-surface2: #2E1A20; --v2-text: #F7E9EC; --v2-soft: #BE96A0; --v2-border: #3A222A; --v2-accent: #E2566E; --v2-accent-strong: #F0697F; --v2-accent-soft: #3A1B23; --v2-gold: #CBA56B; --v2-shadow: rgba(0, 0, 0, 0.55); --v2-track: #3A222A; } /* ── App shell ────────────────────────────────────────────────────────────── The shell paints the v2 background app-wide and reserves bottom space so the floating nav never covers page content. */ .nda-shell { min-height: 100vh; background: var(--v2-bg); color: var(--v2-text); font-family: var(--v2-font-body); /* leave room for the floating bottom nav + safe-area inset */ padding-bottom: calc( var(--v2-bottom-nav-h) + var(--v2-bottom-nav-gap) + env(safe-area-inset-bottom, 0px) + 16px ); } /* ── Top header (logo + theme toggle) ─────────────────────────────────────── Sticky, surface background, hairline bottom border — mirrors the mock. */ .nda-header { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: var(--v2-surface); border-bottom: 1px solid var(--v2-border); } .nda-header__brand { display: flex; align-items: baseline; gap: 2px; background: none; border: none; padding: 0; cursor: pointer; font-family: var(--v2-font-brand); font-weight: 800; font-size: 26px; line-height: 1; color: var(--v2-text); text-decoration: none; } .nda-header__brand-accent { color: var(--v2-accent); } /* Sun/moon theme toggle — round button on bg2. */ .nda-theme-toggle { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--v2-bg2); border: 1px solid var(--v2-border); color: var(--v2-text); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 150ms ease, transform 150ms ease; } .nda-theme-toggle:hover { background: var(--v2-surface2); } .nda-theme-toggle:active { transform: scale(0.94); } /* ── Floating bottom navigation (pill) ────────────────────────────────────── Fixed, horizontally centered pill. surface bg, border, big soft shadow, border-radius 999px. Item = pill button; active = accent bg + white text, inactive = soft text. Geometry from the mock's page-switcher. */ .nda-bottom-nav { position: fixed; left: 50%; bottom: calc(var(--v2-bottom-nav-gap) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 70; display: flex; gap: 4px; max-width: calc(100vw - 24px); padding: 5px; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius-pill); box-shadow: 0 18px 40px -18px var(--v2-shadow); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nda-bottom-nav::-webkit-scrollbar { display: none; } .nda-bottom-nav__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 8px 15px; border: none; border-radius: var(--v2-radius-pill); background: transparent; color: var(--v2-soft); font-family: var(--v2-font-body); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: background 150ms ease, color 150ms ease; } .nda-bottom-nav__item:hover { color: var(--v2-text); } .nda-bottom-nav__item--active { background: var(--v2-accent); color: #fff; } .nda-bottom-nav__item--active:hover { color: #fff; } .nda-bottom-nav__glyph { font-size: 15px; line-height: 1; } /* ── Generic v2 page wrapper ────────────────────────────────────────────────*/ .nda-page { max-width: 760px; margin: 0 auto; padding: 20px 18px 8px; } .nda-page__title { font-family: var(--v2-font-title); font-weight: 400; font-size: 30px; line-height: 1.15; color: var(--v2-text); margin: 0 0 6px; } .nda-page__subtitle { font-family: var(--v2-font-body); font-size: 14.5px; color: var(--v2-soft); margin: 0; } /* ── Chats scaffold (placeholder) ───────────────────────────────────────────*/ .nda-chats__empty { margin-top: 28px; padding: 40px 24px; text-align: center; background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: 22px; box-shadow: 0 14px 36px -28px var(--v2-shadow); } .nda-chats__empty-glyph { font-size: 44px; line-height: 1; } .nda-chats__empty-title { font-family: var(--v2-font-title); font-size: 22px; color: var(--v2-text); margin: 14px 0 6px; } .nda-chats__empty-text { font-size: 14px; color: var(--v2-soft); margin: 0 auto; max-width: 320px; }