/* The Hauswerk theme. Loaded after bsft-ui.css and built on its tokens: the approved mock's palette (docs/mockup/hauswerk-prototyp.html) is mapped onto --bsft-color-* (light) and --bsft-dark-color-* (dark), so every framework component takes the Hauswerk look without being forked. Tokens the framework has no name for live as --hw-*. Three-state like the framework: without data-bsft-theme on the system preference decides, data-bsft-theme="light"|"dark" overrides it either way. */ :root { /* framework tokens, light */ --bsft-color-text: #1B2620; --bsft-color-muted: #56645B; --bsft-color-surface: #FFFFFF; --bsft-color-border: #D5DDD3; --bsft-color-primary: #2E6A4E; --bsft-color-primary-contrast: #FFFFFF; --bsft-color-danger: #B3413A; --bsft-color-danger-surface: #F6DCD8; --bsft-color-warning: #9A6410; --bsft-color-warning-surface: #FBEBC8; --bsft-color-success: #2F8558; --bsft-color-success-surface: #D7EEDF; --bsft-color-info: #3B6FA0; --bsft-color-info-surface: #DCE7F2; --bsft-color-skeleton: #F3F6F1; --bsft-radius: 14px; --bsft-font: var(--hw-font-body); /* framework tokens, dark palette (activated by bsft-ui.css) */ --bsft-dark-color-text: #E4EAE5; --bsft-dark-color-muted: #9CA9A1; --bsft-dark-color-surface: #18201B; --bsft-dark-color-border: #2D3831; --bsft-dark-color-primary: #72BA94; --bsft-dark-color-primary-contrast: #0E1210; --bsft-dark-color-danger: #E8857A; --bsft-dark-color-danger-surface: #3C221F; --bsft-dark-color-warning: #E3B45C; --bsft-dark-color-warning-surface: #3A2E17; --bsft-dark-color-success: #72C492; --bsft-dark-color-success-surface: #1C3527; --bsft-dark-color-info: #86AFD9; --bsft-dark-color-info-surface: #1D2A37; --bsft-dark-color-skeleton: #1F2822; /* Hauswerk tokens the framework has no name for, light */ --hw-ground: #E9EDE7; --hw-surface-2: #F3F6F1; --hw-accent-soft: #DAEBE0; --hw-house: #3B6FA0; --hw-house-soft: #DCE7F2; --hw-meal: #B86A12; --hw-meal-soft: #F6E6D0; --hw-act: #7A52A6; --hw-act-soft: #EADFF4; --hw-routine: #2F7A76; --hw-routine-soft: #D6ECEA; /* Google's sign-in button colours, fixed by its branding rules rather than the palette. */ --hw-google-surface: #FFFFFF; --hw-google-line: #747775; --hw-google-text: #1F1F1F; --hw-font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --hw-font-body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif; --hw-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace; --hw-desktop-nav-width: 240px; --hw-content-width: 960px; --hw-tabbar-height: 68px; --hw-keyboard-inset: 0px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-bsft-theme="light"]) { --hw-ground: #0E1210; --hw-surface-2: #1F2822; --hw-accent-soft: #1F3A2C; --hw-house: #86AFD9; --hw-house-soft: #1D2A37; --hw-meal: #E6A45A; --hw-meal-soft: #39291A; --hw-act: #BC9BE0; --hw-act-soft: #2D2439; --hw-routine: #7FC8C2; --hw-routine-soft: #1A3331; --hw-google-surface: #131314; --hw-google-line: #8E918F; --hw-google-text: #E3E3E3; color-scheme: dark; } } :root[data-bsft-theme="dark"] { --hw-ground: #0E1210; --hw-surface-2: #1F2822; --hw-accent-soft: #1F3A2C; --hw-house: #86AFD9; --hw-house-soft: #1D2A37; --hw-meal: #E6A45A; --hw-meal-soft: #39291A; --hw-act: #BC9BE0; --hw-act-soft: #2D2439; --hw-routine: #7FC8C2; --hw-routine-soft: #1A3331; --hw-google-surface: #131314; --hw-google-line: #8E918F; --hw-google-text: #E3E3E3; color-scheme: dark; } /* --- base ------------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; } body { background: var(--hw-ground); color: var(--bsft-color-text); font-family: var(--hw-font-body); font-size: 15px; line-height: 1.45; -webkit-tap-highlight-color: transparent; } h1, h2, h3 { font-family: var(--hw-font-display); font-weight: 700; margin: 0; letter-spacing: -0.01em; text-wrap: balance; } button, input, select { font: inherit; color: inherit; } /* The mock's reset: a button without a class of the button system below never shows the browser's grey bevel. */ button { background: none; border: 0; padding: 0; cursor: pointer; } button:disabled { cursor: default; } :focus-visible { outline: 2px solid var(--bsft-color-primary); outline-offset: 2px; } /* The start screen (docs/design/app-start.md): index.html paints it before the app's files arrive, and the shell renders the same while it asks who is signed in, so the change from one to the other does not move anything. The house sits in the middle at 128px, where and as large as the Android app's splash draws it, so the splash hands over without a jump; name, bar and status hang below it. */ .hw-boot { position: relative; min-height: 100dvh; background: var(--hw-ground); color: var(--bsft-color-muted); } .hw-boot-logo { position: absolute; top: 50%; left: 50%; width: 128px; height: 128px; margin: -64px 0 0 -64px; } .hw-boot-caption { position: absolute; top: calc(50% + 80px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 24px; } .hw-boot-name { font-family: var(--hw-font-display); font-size: 28px; font-weight: 700; line-height: 1.2; color: var(--bsft-color-text); } .hw-boot-bar { width: min(180px, 60vw); height: 3px; border-radius: 2px; overflow: hidden; background: var(--hw-accent-soft); } .hw-boot-bar-fill { width: var(--blazor-load-percentage, 0%); height: 100%; border-radius: 2px; background: var(--bsft-color-primary); transition: width 0.2s ease-out; } .hw-boot-bar-fill-done { width: 100%; } .hw-boot-status { min-height: 1.4em; font-size: 14px; line-height: 1.4; text-align: center; } /* A forced update (docs/design/app-version-handshake.md) lays the start screen with its words over the running app until the page reloads. */ .hw-boot-updating { position: fixed; inset: 0; z-index: 3000; } #blazor-error-ui { display: none; position: fixed; inset: auto 12px calc(12px + env(safe-area-inset-bottom)) 12px; z-index: 2000; padding: 12px 14px; border-radius: 14px; background: var(--bsft-color-danger-surface); color: var(--bsft-color-danger); } #blazor-error-ui .reload { color: inherit; font-weight: 700; margin-left: 8px; } /* --- shell: phone first ------------------------------------------------------ */ .hw-app { min-height: 100dvh; display: flex; flex-direction: column; } .hw-main { flex: 1; display: flex; flex-direction: column; min-width: 0; /* room for the fixed tab bar */ padding-bottom: calc(68px + env(safe-area-inset-bottom)); } .hw-appbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; /* status-bar safe: the notch area on an installed app */ padding: calc(10px + env(safe-area-inset-top)) 18px 10px; background: var(--hw-ground); } .hw-appbar-text { flex: 1; min-width: 0; } .hw-household { font-size: 13px; color: var(--bsft-color-muted); } .hw-title { font-size: 24px; outline: none; } .hw-content { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 24px; width: 100%; /* One content width for every page, centred beside the navigation on a wide screen. */ max-width: var(--hw-content-width); margin-inline: auto; } .hw-nav { position: fixed; inset: auto 0 0 0; z-index: 10; background: var(--bsft-color-surface); border-top: 1px solid var(--bsft-color-border); padding: 6px 6px calc(10px + env(safe-area-inset-bottom)); } .hw-brand { display: none; } .hw-nav-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); } .hw-nav-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; font-size: 11.5px; color: var(--bsft-color-muted); text-decoration: none; min-height: 48px; } .hw-nav-link[aria-current="page"] { color: var(--bsft-color-primary); font-weight: 700; } .hw-icon { width: 22px; height: 22px; flex: none; } /* --- shell: desktop ---------------------------------------------------------- */ @media (min-width: 900px) { .hw-app { flex-direction: row; } .hw-main { padding-bottom: 0; } .hw-appbar { /* the title lines up with the centred content below it */ padding: 28px max(32px, calc((100% - var(--hw-content-width)) / 2 + 32px)) 12px; } .hw-title { font-size: 30px; } .hw-content { padding: 4px 32px 48px; } .hw-nav { position: sticky; top: 0; inset: auto; align-self: flex-start; width: var(--hw-desktop-nav-width); height: 100dvh; flex: none; border-top: 0; border-right: 1px solid var(--bsft-color-border); padding: 28px 14px; } .hw-brand { display: block; font-family: var(--hw-font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; padding: 0 10px 20px; } .hw-nav-list { display: flex; flex-direction: column; gap: 2px; } .hw-nav-link { flex-direction: row; gap: 12px; min-height: 44px; padding: 8px 10px; font-size: 15px; color: var(--bsft-color-text); } .hw-nav-link:hover { background: var(--hw-surface-2); } .hw-nav-link[aria-current="page"] { background: var(--hw-accent-soft); color: var(--bsft-color-primary); } } /* --- cards and empty states -------------------------------------------------- */ .hw-card { background: var(--bsft-color-surface); border: 1px solid var(--bsft-color-border); border-radius: 18px; padding: 14px; } .hw-card-title { font-size: 16px; margin-bottom: 10px; } .hw-empty .bsft-empty-state { background: var(--bsft-color-surface); border: 1px dashed var(--bsft-color-border); border-radius: 18px; padding: 36px 20px; font-family: var(--hw-font-body); } .hw-empty .bsft-empty-state-title { font-family: var(--hw-font-display); font-size: 18px; font-weight: 700; } .hw-empty .bsft-empty-state-description { max-width: 42ch; margin-inline: auto; } .hw-settings { display: flex; flex-direction: column; gap: 12px; } /* --- app bar: household switcher and settings ------------------------------------ */ .hw-household-switch { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 2px 0; min-height: 32px; cursor: pointer; } .hw-household-switch .hw-icon { width: 16px; height: 16px; } .hw-household-menu { list-style: none; margin: 4px 0 8px; padding: 6px; display: flex; flex-direction: column; gap: 2px; max-width: 320px; background: var(--bsft-color-surface); border: 1px solid var(--bsft-color-border); border-radius: 14px; } .hw-household-option { width: 100%; text-align: left; border: 0; border-radius: 10px; background: transparent; padding: 10px 12px; min-height: 44px; cursor: pointer; } .hw-household-option:hover { background: var(--hw-surface-2); } .hw-household-option[aria-current="true"] { background: var(--hw-accent-soft); color: var(--bsft-color-primary); font-weight: 700; } /* --- standalone pages: sign-in, setup, invitation, first household ------------- */ .hw-standalone { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); } .hw-standalone-brand { font-family: var(--hw-font-display); font-size: 28px; font-weight: 700; letter-spacing: -0.01em; padding: 8px 0 20px; } .hw-standalone-content { width: 100%; max-width: 440px; } .hw-standalone-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; } .hw-standalone-title { font-size: 24px; outline: none; } /* The themed sign-in form ships without layout of its own. */ .bsft-idp-login, .bsft-idp-login form { display: flex; flex-direction: column; gap: 14px; } .bsft-idp-secondary-link { color: var(--bsft-color-primary); } /* The theme lists external providers as plain buttons with the provider's name; the sign-in page draws Google's own branded button above the form instead. */ .hw-login .bsft-idp-external-providers { display: none; } /* --- forms, notices and text ---------------------------------------------------- */ .bsft-form-field input:not([type="checkbox"]):not([type="radio"]), .bsft-form-field select { min-height: 44px; font-size: 16px; /* 16px keeps iOS from zooming into a focused field */ } .bsft-form-field input:disabled, .bsft-form-field select:disabled { opacity: 1; background: var(--hw-surface-2); color: var(--bsft-color-text); } .bsft-form-actions { flex-wrap: wrap; } /* --- select and combo box ---------------------------------------------------------- One rule (docs/design/slice-00-scaffold.md, "Lists to choose from"): a list with more than seven options or with options from data is an HwComboBox; a short fixed list is an hw-seg, chips, or a native