/* * Team R2 design system: base layer for my.TeamR2.com (2026-09-28). * * Loaded by src/views/layout.njk at the END of , after each page's own * block head. It has to come last: converted pages re-import R2default.css * () inside their head block, which * would otherwise undo it. Because it comes last it also wins over a page's own * rules of equal specificity, so it only sets the few properties listed below * and leaves links, headings, sizes, paddings and widths alone. Rules with an * id or more classes (the header, home page, Job Edit) still win. * R2default.css itself is untouched: tools/sync-content.js re-copies it from * W:\wwwMy. * * What it does: the design system's portal tokens, the system UI font at * normal weight (R2default sets weight 900), and R2default's shared pieces * (buttons, inputs, selects, tabs, table_div rows, popups, faint label text) * restyled with those tokens. Sizes, paddings and widths are left alone so * page layouts don't move. * * Source of truth: the "Team R2" design system artifact * (https://claude.ai/artifact/5ugtpE1SDWpjsnjLTgqsuK). Keep token values in step. * To turn the whole layer off, remove its from src/views/layout.njk. */ /* ---------- Tokens ---------- */ :root { /* brand */ --orange: #e65c00; --orange-dark: #b84a00; --ink: #111111; --grey: #7b7d82; --grey-text: #6c6e73; --navy: #000d5b; /* portal */ --app-bg: #f4f5f7; --app-surface: #ffffff; --app-ink: #1d2330; --app-muted: #667085; --app-line: #e3e6ea; --app-field-line: #cfd4dc; --app-brand: var(--navy); --app-brand-hover: #1b2a8a; --app-soft: #e8ecfa; --app-soft-line: #d5dbf3; --app-icon: #344054; --app-icon-2: #475467; --app-chip: #eef0f3; --app-mark: #fff0a8; --app-danger: #b42318; --app-done: #15803d; --app-on-dark: #ffffff; /* home-page areas */ --area-shop: #1b2a8a; --area-ship: #0e7490; --area-jobs: #6d28d9; --area-inv: #b45309; --area-acct: #15803d; --area-time: #475467; --area-me: #6b6e75; --area-personal: #be185d; --area-admin: #b42318; --app-radius-sm: 6px; --app-radius: 8px; --app-radius-card: 10px; --app-radius-float: 12px; --app-shadow-lift: 0 1px 2px rgba(16, 24, 40, 0.1); --app-shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.18); --font-app: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* ---------- Page ---------- */ /* Font size (12px) and line height stay as R2default has them: many pages use fixed-height rows and inputs sized around them. */ body { font-family: var(--font-app); font-weight: 400; color: var(--app-ink); background-color: var(--app-bg); } ::selection { background: var(--app-soft-line); } /* Field labels were bold only because the whole body was weight 900. */ .element_titles, legend, label { font-weight: 600; } .red { color: var(--app-danger); } /* Text R2default made too faint to read (#dcdcdc and #999 on white). */ .element_sub_titles, label.batch_edit_4, span.batch_edit_4 { color: var(--app-muted); } input.batch_edit_1:focus + label, span.batch_edit_3:focus + label, select.batch_edit_2:focus + label { color: var(--app-brand-hover); } /* ---------- Buttons ---------- */ /* R2default: navy fill, and a #ddd hover that left white text unreadable. Buttons that also carry a Bootstrap-style variant (btn-primary, btn-danger…) keep that variant's colours. */ .btn:not([class*="btn-"]), .btn-tiny, .button { background-color: var(--app-brand); color: var(--app-on-dark); border-radius: var(--app-radius-sm); font-family: var(--font-app); font-weight: 500; cursor: pointer; transition: background-color .15s; } .btn:not([class*="btn-"]):hover, .btn-tiny:hover, .button:hover { background-color: var(--app-brand-hover); color: var(--app-on-dark); text-decoration: none; } .btn.active:not([class*="btn-"]), .btn-tiny.active, .button.active { background-color: var(--app-soft); color: var(--app-brand); } /* ---------- Inputs ---------- */ input[type='text'], input[type='number'], input[type='date'], input[type='datetime-local'], input[type='time'], input[type='search'], input[type='email'], input[type='tel'], input[type='password'], textarea, select { border-color: var(--app-field-line); border-radius: 4px; color: var(--app-ink); font-family: var(--font-app); } select { border-radius: var(--app-radius-sm); } input[type='text']:read-only { border-color: var(--app-line); border-style: dashed; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--app-brand-hover); outline-offset: 1px; } input[type='checkbox'], input[type='radio'] { accent-color: var(--app-brand); } ::placeholder { color: var(--app-muted); opacity: 1; } /* ---------- Tabs (.tab row of buttons) ---------- */ .tab { border: 1px solid var(--app-line); border-radius: var(--app-radius); background-color: var(--app-surface); } .tab button { color: var(--app-icon); font-family: var(--font-app); } .tab button:hover { background-color: var(--app-soft); color: var(--app-brand); } .tab button.active { background-color: var(--app-surface); color: var(--app-brand); font-weight: 600; box-shadow: inset 0 -2px 0 var(--app-brand); } /* ---------- table_div lists ---------- */ .table_div, .table_div_header { font-family: var(--font-app); } .table_div_header { background-color: var(--app-brand); border-color: var(--app-brand); border-radius: var(--app-radius-sm); font-weight: 600; } .table_div_header_2nd { background-color: var(--app-icon-2); border-color: var(--app-icon-2); border-radius: var(--app-radius-sm); } .table_div_header_3rd { background-color: var(--app-ink); } .table_div_body, .table_div_body_2nd, .table_div_body_3rd { background-color: var(--app-surface); color: var(--app-ink); } .table_div_body:nth-child(odd), .table_div_body2:nth-child(even), .table_div_body_2nd:nth-child(odd), .table_div_body_3rd:nth-child(odd) { background-color: var(--app-bg); border-color: var(--app-bg); border-radius: var(--app-radius-sm); } .table_div_body2:hover { background-color: var(--app-soft); border-color: var(--app-soft); color: var(--app-ink); } /* ---------- Popups ---------- */ .div_popup, .batch_edit_holder { border: 1px solid var(--app-line); border-radius: var(--app-radius-card); box-shadow: var(--app-shadow-menu); background-color: var(--app-surface); } /* ---------- Rules ---------- */ .divider_bar { background: var(--app-field-line); } .hr-text::after { background-color: var(--app-bg); color: var(--app-ink); }