/* RentDesk's look (spec §10, the approved mockups): OCH navy chrome, green for action and done, amber for due, red for late. Montserrat for headings, Open Sans for text, IBM Plex Mono for numbers and times. Colour always carries meaning. Light and dark themes: the system setting decides, and data-theme="light" or "dark" on overrides it. */ :root { --navy: #002A4E; --navy-2: #0B3A63; --green: #055A49; --green-soft: #E3F1EC; --paper: #F2F5F4; --card: #FFFFFF; --ink: #0F1B2A; --muted: #56626D; --line: #D5DCDA; --line-2: #E7ECEA; --amber: #8A5200; --amber-soft: #FFF1D1; --amber-bar: #D98E04; --red: #B7301F; --red-soft: #FDEBE8; --blue: #1D5A8E; --blue-soft: #E4EEF7; --chrome-ink: #FFFFFF; --chrome-mut: #A9C0D4; --chrome-accent: #7FD8BE; --shadow: 0 1px 2px rgba(15, 27, 42, .06), 0 4px 14px rgba(15, 27, 42, .06); --head: Montserrat, "Segoe UI", Arial, sans-serif; --body: "Open Sans", "Segoe UI", Roboto, Arial, sans-serif; --mono: "IBM Plex Mono", Consolas, "Courier New", monospace; --tap: 40px; --radius: 8px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --navy: #06192B; --navy-2: #0F2A44; --green: #46B393; --green-soft: #12342C; --paper: #0D161E; --card: #15212B; --ink: #E4EBEF; --muted: #94A3AE; --line: #2A3A46; --line-2: #1F2D38; --amber: #F0B657; --amber-soft: #3A2C10; --amber-bar: #E8A22E; --red: #F28B78; --red-soft: #3D1D19; --blue: #8DB9E2; --blue-soft: #172B3D; --chrome-ink: #E9F1F7; --chrome-mut: #8EA6BA; --chrome-accent: #7FD8BE; --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark; } } :root[data-theme="dark"] { --navy: #06192B; --navy-2: #0F2A44; --green: #46B393; --green-soft: #12342C; --paper: #0D161E; --card: #15212B; --ink: #E4EBEF; --muted: #94A3AE; --line: #2A3A46; --line-2: #1F2D38; --amber: #F0B657; --amber-soft: #3A2C10; --amber-bar: #E8A22E; --red: #F28B78; --red-soft: #3D1D19; --blue: #8DB9E2; --blue-soft: #172B3D; --chrome-ink: #E9F1F7; --chrome-mut: #8EA6BA; --chrome-accent: #7FD8BE; --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--paper); color: var(--ink); font: 15px/1.5 var(--body); -webkit-text-size-adjust: 100%; } h1, h2, h3 { font-family: var(--head); margin: 0; text-wrap: balance; } a { color: var(--green); } code, .mono { font-family: var(--mono); } [hidden] { display: none !important; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* The top bar (mockup: .bar, .word, .tabs, .who) */ .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; min-height: 52px; padding: 0 20px; background: var(--navy); color: var(--chrome-ink); } .word { font: 700 17px var(--head); letter-spacing: .01em; color: var(--chrome-ink); text-decoration: none; } .word b { color: var(--chrome-accent); font-weight: 700; } .bar-note { color: var(--chrome-mut); font-weight: 600; font-size: 13px; } .tabs { display: flex; gap: 4px; align-self: stretch; } .tabs a { display: flex; align-items: center; padding: 0 12px; color: var(--chrome-mut); text-decoration: none; font-weight: 600; font-size: 13px; border-bottom: 3px solid transparent; } .tabs a:hover, .tabs a:focus-visible { color: var(--chrome-ink); border-bottom-color: var(--chrome-accent); } .who { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; } .role-pill { font: 600 11px var(--mono); padding: 2px 8px; border-radius: 9px; background: rgba(255, 255, 255, .14); color: var(--chrome-ink); } /* Controls */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 16px; border: 1px solid var(--green); border-radius: 6px; background: var(--green); color: var(--card); font: 600 14px var(--body); cursor: pointer; text-decoration: none; } .btn:disabled { opacity: .6; cursor: default; } .btn.sec { background: var(--card); color: var(--green); border-color: var(--line); } .btn.on-navy { background: transparent; color: var(--chrome-ink); border-color: rgba(255, 255, 255, .45); } .btn.small { min-height: 34px; padding: 0 12px; font-size: 13px; } .field { width: 100%; min-height: var(--tap); padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; font: 15px var(--body); background: var(--card); color: var(--ink); } .field.small { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; } .btn:focus-visible, .field:focus-visible, a:focus-visible { outline: 2px solid var(--amber-bar); outline-offset: 2px; } .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.pending { background: var(--amber-soft); color: var(--amber); } .pill.active { background: var(--green-soft); color: var(--green); } .pill.disabled { background: var(--line-2); color: var(--muted); } .error { margin: 6px 0 12px; padding: 10px 12px; border-radius: 6px; background: var(--red-soft); color: var(--red); } /* The shell. Plan 2c puts the board here. */ .shell-main { max-width: 1240px; margin: 0 auto; padding-block: 48px; padding-inline: 20px; } .empty { margin: 0; padding: 40px 24px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card); color: var(--muted); text-align: center; font: 600 16px var(--head); } /* Phone: 40 px touch targets everywhere (spec §10). */ @media (max-width: 600px) { .bar { padding: 8px 12px; gap: 10px; } .btn.small, .field.small { min-height: var(--tap); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }