/* Shared site chrome: the ONE palette and the ONE header used by the web app (index.html links this too), the marketing pages and the prerendered catalog pages. The palette values are the app's own (src/styles.css `.fk-root` / `.fk-root.dark`); the theme is chosen by /marketing/chrome.js (data-theme on , key `fk_theme`), with a prefers-color-scheme fallback for the no-JS case. */ :root { --bg: #F7F5F0; --bg2: #FFFFFF; --bg3: #EDEAE3; --ink: #1A1D22; --ink2: #5F6773; --line: #E0DCD3; --accent: #0F6E68; --accent-ink: #FFFFFF; --accent-soft: rgba(15, 110, 104, .10); /* marketing aliases */ --card: var(--bg2); --muted: var(--ink2); --work: #14b8a6; --on-work: #04211c; --housing: #0b0e13; --shadow: 0 18px 44px -22px rgba(20, 30, 45, .5); --uistack: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --sitehead-h: 56px; --tap: 44px; color-scheme: light; } :root[data-theme="dark"] { --bg: #14161A; --bg2: #1C2026; --bg3: #262B33; --ink: #F0F2F5; --ink2: #98A1AD; --line: #2E343D; --accent: #3FB3AA; --accent-ink: #04211F; --accent-soft: rgba(63, 179, 170, .13); --shadow: 0 18px 44px -22px rgba(0, 0, 0, .7); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14161A; --bg2: #1C2026; --bg3: #262B33; --ink: #F0F2F5; --ink2: #98A1AD; --line: #2E343D; --accent: #3FB3AA; --accent-ink: #04211F; --accent-soft: rgba(63, 179, 170, .13); --shadow: 0 18px 44px -22px rgba(0, 0, 0, .7); color-scheme: dark; } } /* ---- the header ---- */ .fk-sitehead { position: sticky; top: 0; z-index: 30; background: var(--bg); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); color: var(--ink); font-family: var(--uistack); padding-top: env(safe-area-inset-top); } .fk-sitehead-in { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: .5rem; height: calc(var(--sitehead-h) - 1px); padding: 0 .875rem; /* 1px = the border below */ } .fk-sitebrand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--ink); text-decoration: none; min-height: var(--tap); border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; } .fk-sitebrand svg { display: block; flex: none; } .fk-sitenav { display: flex; align-items: center; gap: 1rem; margin-left: .75rem; font-size: .875rem; font-weight: 600; color: var(--ink2); } .fk-sitenav a { text-decoration: none; color: inherit; white-space: nowrap; } .fk-sitenav a:hover { color: var(--ink); } .fk-siteacts { display: flex; align-items: center; gap: .25rem; margin-left: auto; } .fk-sitelink { display: inline-flex; align-items: center; gap: .375rem; min-height: var(--tap); padding: 0 .625rem; border-radius: 999px; font-size: .875rem; font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; border: 0; background: none; cursor: pointer; font-family: inherit; } .fk-sitelink:hover { background: var(--bg3); } .fk-sitelink svg { display: block; flex: none; } .fk-sitebtn { width: var(--tap); height: var(--tap); border-radius: 50%; border: 0; background: var(--bg3); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; } .fk-sitebtn svg { display: block; } :root[data-theme="dark"] .fk-sitebtn .ico-moon { display: none; } :root:not([data-theme="dark"]) .fk-sitebtn .ico-sun { display: none; } .fk-sitecta { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; border-radius: 11px; background: var(--work); color: var(--on-work); font-weight: 700; font-size: .875rem; text-decoration: none; white-space: nowrap; margin-left: .25rem; } @media (max-width: 860px) { .fk-sitenav { display: none; } } @media (max-width: 520px) { .fk-sitelink .t { display: none; } .fk-sitecta { display: none; } } /* Below ~400px (iPhone SE and narrower) the header still overflows even with the icon-only Library link: the plain-text "Open app"/"Site" link (no .t wrapper to hide, since it carries no icon) is the next thing to drop - it's redundant with the brand link and the page's own CTAs at this width. */ @media (max-width: 400px) { .fk-sitelink-text { display: none; } .fk-sitehead-in { gap: .25rem; } }