/* Dessert Ledger — the site chrome both hosts serve (plan 192). ONE file, byte-identical on app.dessertledger.com (Domus: linked before styles.css, copied into dist/ by scripts/build.mjs) and on dessertledger.com (the portal: site/ledger-chrome.css, versioned by its content hash). Domus's tokens are the source of truth: the cream palette and its dark counterpart moved here from styles.css, with the base type, the button family and the bar, the footer and the notice the two hosts share. Nothing page-specific lives here. Dark: Domus stamps from its stored preference before first paint (index.html, theme-mode.js); a host with no script — the portal, whose CSP allows none — carries no attribute and follows the system through the second block, which repeats the first token for token (tests/site-chrome.test.mjs holds the two equal). Type: the system stack. The served Domus build strips its Google Fonts links (build.mjs) and both hosts' CSPs would refuse them, so this is what production renders today. */ :root { --bg: #f1e9d9; --paper: #faf5e9; --paper-2: #f5edda; --ink: #1a1512; --ink-2: #5a534a; --ink-3: #8e8676; --ink-4: #b4ab98; --line: #e2d6bd; --line-2: #d0c2a3; --line-3: #f0e6cf; --accent: #b73a1c; --accent-soft: #f7d9c8; --accent-tint: #fbe8db; --blocker: #b73a1c; --blocker-soft: #f7d9c8; --good: #4f6b3b; --good-soft: #d6dfc8; --judgment: #8a6614; --judgment-soft: #ecd9a9; --waiting: #5e5648; --waiting-soft: #ddd2b8; --auto: #3a5a73; --auto-soft: #c8d6df; --scope-shared: #b8973e; --scope-mark: #4d7059; --scope-liang: #6d5d9c; --scope-wen: #b86d4a; --scope-wenbin: #5c6470; --scope-acct: #3f5670; --shadow-card: 0 1px 0 rgba(40,28,16,0.04), 0 1px 2px rgba(40,28,16,0.03); --shadow-pop: 0 1px 0 rgba(40,28,16,0.06), 0 12px 32px -8px rgba(40,28,16,0.18); --radius: 10px; --radius-sm: 6px; --radius-lg: 16px; /* the chrome's own measures: the bar's height (sticky rows below it offset by it), the page column and its side gutter, which narrow with the viewport below */ --dl-nav-h: 52px; --dl-col: 960px; --dl-gutter: 32px; --dl-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --dl-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } @media screen { html[data-theme="dark"] { color-scheme: dark; --bg: #17130f; --paper: #211b16; --paper-2: #2b241d; --ink: #f1e8d8; --ink-2: #cdc1ab; --ink-3: #a3977f; --ink-4: #706656; --line: #3b3128; --line-2: #4d4034; --line-3: #2f2720; --accent: #ee8c58; --accent-soft: #4a2a18; --accent-tint: #35200f; --blocker: #ee8c58; --blocker-soft: #4a2a18; --good: #a3c283; --good-soft: #2a3620; --judgment: #dfb257; --judgment-soft: #3d2f12; --waiting: #b6a98f; --waiting-soft: #332b21; --auto: #94b8d4; --auto-soft: #1f2d3a; --scope-shared: #d8b25a; --scope-mark: #93b89b; --scope-liang: #b6a6de; --scope-wen: #ea9d7a; --scope-wenbin: #a6b0bd; --scope-acct: #93b3cf; --shadow-card: 0 1px 0 rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3); --shadow-pop: 0 1px 0 rgba(0,0,0,0.5), 0 16px 40px -8px rgba(0,0,0,0.55); } } /* The same tokens for a document that carries no data-theme (the portal): the system's choice. */ @media screen and (prefers-color-scheme: dark) { html:not([data-theme]) { color-scheme: dark; --bg: #17130f; --paper: #211b16; --paper-2: #2b241d; --ink: #f1e8d8; --ink-2: #cdc1ab; --ink-3: #a3977f; --ink-4: #706656; --line: #3b3128; --line-2: #4d4034; --line-3: #2f2720; --accent: #ee8c58; --accent-soft: #4a2a18; --accent-tint: #35200f; --blocker: #ee8c58; --blocker-soft: #4a2a18; --good: #a3c283; --good-soft: #2a3620; --judgment: #dfb257; --judgment-soft: #3d2f12; --waiting: #b6a98f; --waiting-soft: #332b21; --auto: #94b8d4; --auto-soft: #1f2d3a; --scope-shared: #d8b25a; --scope-mark: #93b89b; --scope-liang: #b6a6de; --scope-wen: #ea9d7a; --scope-wenbin: #a6b0bd; --scope-acct: #93b3cf; --shadow-card: 0 1px 0 rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3); --shadow-pop: 0 1px 0 rgba(0,0,0,0.5), 0 16px 40px -8px rgba(0,0,0,0.55); } } @media (max-width: 760px) { :root { --dl-gutter: 16px; } } @media (max-width: 640px) { :root { --dl-gutter: 18px; } } /* ---------- Base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--dl-sans); font-feature-settings: "ss01", "cv11"; font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: 13px; text-decoration: none; cursor: pointer; transition: background 100ms, border-color 100ms, transform 60ms; } .btn:hover { background: var(--paper-2); border-color: var(--ink-3); } .btn:active { transform: translateY(0.5px); } .btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn.primary:hover { background: var(--ink-2); border-color: var(--ink-2); } .btn.accent { background: var(--accent); color: white; border-color: var(--accent); } .btn.accent:hover { filter: brightness(1.05); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.ghost:hover { background: var(--paper-2); color: var(--ink); } .btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 6px; } .btn.lg { padding: 12px 20px; font-size: 14px; } /* ---------- The bar ---------- One row, never two: the brand, the three places, the person. Sticky under the phone's top inset; anything else that sticks on the page sits at --dl-nav-h below it. */ .dl-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--dl-nav-h); background: var(--paper); border-bottom: 1px solid var(--line); font-family: var(--dl-sans); font-size: 13.5px; line-height: 1.3; } .dl-nav-inner { max-width: var(--dl-col); height: 100%; margin: auto; padding: 0 var(--dl-gutter); display: flex; align-items: center; gap: 18px; } .dl-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--ink); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .dl-mark { width: 20px; height: 20px; border-radius: 5px; display: block; } .dl-nav-items { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; height: 100%; overflow-x: auto; scrollbar-width: none; } .dl-nav-items::-webkit-scrollbar { display: none; } .dl-nav-items a { position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0 10px; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: 8px 8px 0 0; transition: color 100ms, background 100ms; } .dl-nav-items a:hover { color: var(--ink); background: var(--paper-2); } .dl-nav-items a[aria-current="page"] { color: var(--ink); font-weight: 500; } .dl-nav-items a[aria-current="page"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--accent); } .dl-nav-user { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; color: var(--ink-3); font-size: 12.5px; white-space: nowrap; } .dl-nav-user form { margin: 0; display: contents; } .dl-nav-out { font: inherit; font-size: 13px; color: var(--ink-2); background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: none; } .dl-nav-out:hover { color: var(--accent); } .dl-nav :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; } @media (max-width: 720px) { .dl-nav-inner { gap: 12px; } .dl-nav-who { display: none; } .dl-brand span { display: none; } } /* ---------- The foot ---------- */ .dl-foot { max-width: var(--dl-col); margin: auto; padding: 22px var(--dl-gutter) 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; color: var(--ink-3); font-family: var(--dl-sans); font-size: 12px; } .dl-foot a { color: var(--ink-3); text-decoration: none; } .dl-foot a:hover { color: var(--ink); } .dl-foot .dl-foot-brand { margin-right: auto; } /* ---------- The page column and the notice (the portal's pages; Domus's surfaces keep their own) ---------- */ .dl-page { max-width: var(--dl-col); margin: auto; padding: 24px var(--dl-gutter) 80px; } .dl-notice { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: var(--paper); padding: 12px 16px; margin: 20px 0; font-size: 13.5px; color: var(--ink-2); } /* Printed, a page is its content: no bar, no foot. */ @media print { .dl-nav, .dl-foot { display: none; } }