/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #02130d #1c2622 #f7faf8 #0f8a5f #158259 #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f7faf8; --surface: #fbfdfc; --surface-2: #ebeeec; --border: #d5dad7; --border-strong: #aeb5b2; --ink: #1c2622; --muted: #6b716e; --accent: #0f8a5f; --accent-hover: #0d7551; --accent-ink: #02130d; --accent-text: #158259; --accent-strong: #0d7550; --accent-soft: #d7eae3; --accent-border: #8fc8b3; --success: #15803d; --success-ink: #ffffff; --success-soft: #dcebe2; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #efe6db; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f0dfde; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #02100b; --surface: #1b2823; --surface-2: #0f1c17; --border: #25312d; --border-strong: #4e5854; --ink: #f7faf8; --muted: #959c99; --accent: #0f8a5f; --accent-hover: #339c77; --accent-ink: #02130d; --accent-text: #22936c; --accent-strong: #349c78; --accent-soft: #052b1d; --accent-border: #084731; --success: #15803d; --success-ink: #ffffff; --success-soft: #062916; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #291f0b; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2a130f; --danger-strong: #d16969; } /* ==================================================================== * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty. * * design.css is a FLOOR, not a ceiling. * * For a long time it was both, and the cost was measurable: an app could * not write a single CSS rule, so every app built here had the same 10px * radius, the same Public Sans at the same 15px, the same 1px borders and * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three * apps in a row came out looking like the same product in three coats of * paint, which is what this file exists to end. * * It loads AFTER design.css and theme.css, so anything here wins. * * ---- THE FIRST LEVER: RETUNE THE SYSTEM --------------------------- * * A :root block here re-tunes every component at once — nothing is * restyled one class at a time. These are the tokens that decide an app's * CHARACTER, and they are the fastest way to make two apps look nothing * alike: * * --radius-sm --radius --radius-lg 0 is brutal, 4 is crisp, 18 is soft * --font-sans --font-mono a display face changes more than colour * --t-xs … --t-5xl the type scale, and how far it ramps * --lh --lh-tight --track-tight density and tone * --s-1 … --s-12 the spacing scale: tight or generous * --shadow --shadow-raised flat, or lifted * --border --border-strong widths hairline, or heavy and drawn * --dur-1 --dur-2 --ease brisk, or languid * --content-max --measure a wide dashboard or a narrow reading page * * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner * picked the palette on the approval card before you built anything, and * it is the only part of the look they chose themselves. theme.css holds * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an * rgb() or an hsl(), here or anywhere. The validator refuses those. * * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE --------------------- * * design.css covers the ordinary furniture. It does NOT cover the one * screen that makes this app itself — a timer's dial, a board's columns, * a chart, a seating plan, a game grid. Write those here, in full, and * name them for what they are (.dial, .board-col), never .card-2. * * Compose the primitives where they fit and write your own where they do * not. An app that used only the frozen classes and added nothing shipped * 160 component classes and zero rules of its own — and read as generated, * because the system's ceiling had become the app's ceiling. * * Keep using the tokens in what you write. A rule built on var(--s-4) and * var(--radius) stays consistent with everything around it and follows the * app when its character changes; one built on 16px and 10px does not. * ==================================================================== */ :root { --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 4%, transparent); --shadow-raised: 0 20px 40px -12px color-mix(in srgb, var(--ink) 20%, transparent); --content-max: 1320px; } /* Auth screens (setup/login) — centred card on a quiet gradient ground. */ .auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s-6, 24px); background: radial-gradient(circle at top, color-mix(in srgb, var(--accent) 10%, var(--canvas)), var(--canvas) 60%); } .auth-card { width: 100%; max-width: 420px; } /* Calendar */ .cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: var(--t-xs); color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .cal-cell { min-height: 92px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .cal-cell > * + * { margin-top: 4px; } .cal-cell:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: var(--accent-border); } .cal-cell-empty { border: none; background: transparent; } .cal-cell-today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .cal-daynum { font-size: var(--t-xs); font-weight: 600; color: var(--muted); } .cal-dots { display: flex; flex-wrap: wrap; gap: 3px; } .cal-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; } /* Floating quick-action button */ .fab-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 40; } .fab { list-style: none; width: 56px; height: 56px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; box-shadow: var(--shadow-raised); cursor: pointer; transition: transform 0.15s ease; } .fab:hover { transform: scale(1.06); } .fab::-webkit-details-marker { display: none; } .fab-dropdown[open] .fab { transform: rotate(45deg); } .fab-menu { position: absolute; right: 0; bottom: 68px; min-width: 200px; } /* Print views */ @media print { .hide-print, .shell-sidebar aside, .topbar, .fab-wrap { display: none; } } /* Quotation line-item rows */ .quote-item-row { align-items: flex-end; } /* Global search — a plain input with an absolutely positioned result panel, shown once htmx has put something inside it. */ .search-box { position: relative; } .search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; min-width: 320px; max-height: 70vh; overflow: auto; z-index: 30; } .search-results:not(:empty) { display: block; }