/* Jobeazee UI — the shared component layer of the supplied design system. This is `jobeazee-ui.css` as delivered, with ONE change: its `:root` block was moved to tokens.css, which every page loads first. The file kept its own copy of values that guide.css and profiles.css already declared, so a colour lived in three places and "change the brand colour" meant remembering all three. Loaded ONLY by pages converted to this system. It sets `body` and `*`, so a page that still carries Tailwind utility markup must NOT load it — the two would fight, and the loser would be whichever stylesheet happened to arrive last. `/daily-match` is already a live example of that: it loads app.css AND home.css, and both define `.eyebrow`. 25 of the class names below are also defined in chrome.css, home.css, guide.css, profiles.css or the Tailwind component layer — `.card`, `.nav`, `.page`, `.btn`, `.label`, `.field`, `.brand`, `.note` among them. That is why a page converts wholly or not at all; there is no half-way that renders predictably. To extend: add to tokens.css first, then use the token here. Do not write a raw colour, radius or shadow into this file. */ *{box-sizing:border-box} html{scroll-padding-top:96px} body{ margin:0;background:var(--paper);color:var(--ink);font-size:17px;line-height:1.6; font-family:var(--sans); -webkit-font-smoothing:antialiased; } .serif{font-family:var(--serif);font-style:italic;font-weight:400} a{color:var(--indigo);text-decoration:none} a:hover{text-decoration:underline} button{font:inherit;cursor:pointer} /* ---------- nav: DELIBERATELY ABSENT ---------- 🔴 The design system ships a nav, because its reference pages are standalone mockups. This app has ONE shared header (_site_header.html) styled by chrome.css, loaded on every page, and chrome.css exists precisely because that markup and its styling drifted apart once already and shipped a naked header to /guide. ui.css loads AFTER chrome.css, so its `.nav`, `.nav-in`, `.nav-links`, `.brand` and `.mark` would have won at equal specificity — and only on converted pages. The header would have changed appearance one page at a time as the rollout proceeded, which is the hardest kind of visual bug to attribute. If a converted page needs the header to look different, change chrome.css, where every page can see it. ---------------------------------------------------------------------------- */ /* ---------- buttons ---------- */ /* Scoped to `.page` — page CONTENT — not global. chrome.css defines `.btn` for the header's 'Get started', and ui.css loads later: unscoped, these rules would restyle the shared header on converted pages only. `.page` is the main wrapper the reference designs already use, so the supplied markup keeps working. */ .page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill); padding:11px 20px;font-weight:600;font-size:15px;border:1.5px solid var(--ink);background:var(--ink); color:var(--card);white-space:nowrap;transition:transform .14s ease} .page .btn:hover{transform:translateY(-1px);text-decoration:none} .page .btn.indigo{background:var(--indigo);border-color:var(--indigo)} .page .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)} .page .btn.sm{padding:8px 15px;font-size:14px} .page .btn.lg{padding:15px 26px;font-size:17px} .page .btn[disabled]{opacity:.45;pointer-events:none} /* ---------- page shell ---------- */ /* `--maxw` is deliberately NOT in tokens.css: a marketing page is 1440px wide and an app page is 900px, and that is a real difference rather than a collision. So it carries the design system's own 900px as a FALLBACK — without one, a page that forgets to set it gets `max-width:` with nothing after it, which is not an error, just a page with no width limit and a line length nobody can read. */ .page{max-width:var(--maxw, 900px);margin:0 auto;padding:56px 24px 110px} .page-head{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap} h1{font-size:clamp(34px,5vw,46px);letter-spacing:-.04em;line-height:1.05;margin:0;font-weight:700} h1 .serif{color:var(--indigo)} .sub{color:var(--muted);margin:14px 0 0;max-width:56ch;font-size:16.5px} .page-head .btn{margin-left:auto} @media (max-width:620px){.page{padding:38px 18px 90px}.page-head .btn{margin-left:0;width:100%}} /* ---------- cards ---------- */ .card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg); padding:26px 28px;box-shadow:var(--shadow);margin-top:20px} .card-head h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.025em} .card-head p{margin:8px 0 0;color:var(--muted);font-size:15.5px;max-width:70ch} .card-head.row{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .card-head.row .btn{margin-left:auto} @media (max-width:620px){.card{padding:22px 20px}} /* ---------- stats ---------- */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:32px} .stat{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-md);padding:16px 18px} .stat b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1.1} .stat span{display:block;font-size:14px;color:var(--muted);margin-top:2px} @media (max-width:620px){.stats{grid-template-columns:repeat(2,1fr)}} /* ---------- upload drops ---------- */ .drops{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px} @media (max-width:760px){.drops{grid-template-columns:1fr}} .drop{display:block;background:var(--paper);border:1.5px dashed var(--line);border-radius:var(--r-md); padding:20px;cursor:pointer;transition:border-color .15s ease, background .15s ease} .drop:hover{border-color:var(--indigo-line);background:var(--card)} .drop .ico{width:34px;height:34px;border-radius:10px;background:var(--indigo-soft);display:grid;place-items:center} .drop .ico svg{width:18px;height:18px;fill:none;stroke:var(--indigo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .drop b{display:block;margin-top:12px;font-size:16px;font-weight:650;letter-spacing:-.01em} .drop .hint{display:block;margin-top:6px;font-size:14.5px;color:var(--muted);line-height:1.45} .drop .file{display:flex;align-items:center;gap:10px;margin-top:14px;background:var(--card);border:1.5px solid var(--line); border-radius:var(--r-sm);padding:9px 12px;font-size:14px;font-weight:550} .drop .file em{font-style:normal;color:var(--faint);font-weight:400} .drop .btn{margin-top:12px} .drop .how{display:inline-block;margin-top:12px;margin-left:12px;font-size:14px} /* ---------- empty states ---------- */ .empty{margin-top:20px;border:1.5px dashed var(--line);border-radius:var(--r-md);padding:30px 24px;text-align:center} .empty.small{padding:22px} .empty-ico{width:42px;height:42px;border-radius:12px;background:var(--paper-2);display:grid;place-items:center;margin:0 auto 12px} .empty-ico svg{width:20px;height:20px;fill:none;stroke:var(--faint);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .empty b{display:block;font-size:16.5px;font-weight:650} .empty p{margin:8px auto 16px;color:var(--muted);font-size:15px;max-width:52ch} /* ---------- tiles ---------- */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px} @media (max-width:620px){.tiles{grid-template-columns:1fr}} .tile{background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:22px 24px; display:block;color:var(--ink);box-shadow:var(--shadow);transition:transform .14s ease} .tile:hover{transform:translateY(-2px);text-decoration:none;border-color:var(--indigo-line)} .tile-ico{width:34px;height:34px;border-radius:10px;background:var(--indigo-soft);display:grid;place-items:center} .tile-ico svg{width:18px;height:18px;fill:none;stroke:var(--indigo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .tile b{display:block;margin-top:12px;font-size:16.5px;font-weight:650;letter-spacing:-.01em} .tile span{display:block;margin-top:4px;font-size:14.5px;color:var(--muted)} /* ---------- callouts ---------- */ .note{margin-top:20px;border-left:3px solid var(--indigo);background:var(--indigo-soft); border-radius:0 var(--r-sm) var(--r-sm) 0;padding:14px 18px;font-size:15.5px;color:var(--ink-2)} .note b{font-weight:640} .foot-note{margin-top:32px;border-left:3px solid var(--line);padding:6px 0 6px 18px; color:var(--muted);font-size:15.5px} /* ---------- status pills ---------- */ .status{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;border-radius:var(--r-pill); padding:6px 13px;font-weight:520} .status.ready{background:var(--green-soft);color:var(--green-ink)} .status.todo{background:var(--amber-soft);color:var(--amber);border:1px solid var(--amber-line)} .status svg{width:14px;height:14px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .status.ready svg{stroke:var(--green)} .status.todo svg{stroke:var(--amber)} /* ---------- forms ---------- */ .field{margin-top:18px} .field label,.label{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.005em;margin-bottom:7px} .req{color:var(--indigo);font-weight:700;margin-left:2px} /* 🔴 EVERY text-entry type the app uses, not the four the design system happened to show. `tel` was missing, so the profile editor's Phone field rendered as bare text on the page background with no box — it did not look broken, it looked absent, which is worse. `password` and `search` are here for the same reason: an unlisted type gets no rule at all and fails silently. The app's full census, measured: text 43, radio 17, checkbox 16, number 11, file 6, url 4, tel 2, email 2, password 1. radio, checkbox and file are styled separately because a box and a border would be wrong for them. */ input[type=text],input[type=email],input[type=url],input[type=number],input[type=tel], input[type=password],input[type=search],input[type=date],input:not([type]),select,textarea{ width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;font-size:16px; background:var(--paper);color:var(--ink);font-family:inherit;transition:border-color .14s ease, background .14s ease} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);background:var(--card); box-shadow:0 0 0 4px var(--indigo-soft)} input::placeholder,textarea::placeholder{color:var(--faint)} textarea{min-height:96px;resize:vertical;line-height:1.5} select{appearance:none;background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px} .hint{display:block;margin-top:6px;font-size:14px;color:var(--muted);line-height:1.45} .two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media (max-width:620px){.two-col{grid-template-columns:1fr}} .check{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:15.5px} .check input{width:18px;height:18px;margin-top:3px;accent-color:var(--indigo);flex:none} /* progress meters */ .meters{display:grid;gap:14px;margin-top:20px} .meter b{display:flex;justify-content:space-between;font-size:14.5px;font-weight:600} .meter b span{color:var(--muted);font-weight:500} .track{height:8px;border-radius:9px;background:var(--paper-2);margin-top:7px;overflow:hidden} .track i{display:block;height:100%;border-radius:9px;background:var(--indigo)} /* sticky save bar */ .savebar{position:sticky;bottom:0;margin-top:26px;background:rgba(244,241,234,.9);backdrop-filter:blur(10px); border-top:1px solid var(--line);padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px)); display:flex;align-items:center;gap:12px;flex-wrap:wrap;z-index:40} .savebar .spacer{margin-left:auto;font-size:14.5px;color:var(--muted)} /* ---------- long-form documents ---------- Added 2026-09-24 (batch 5) for /privacy and /terms. The design system is built for application pages, where every block sits in a card; a policy is a page of prose with headings, and it needs reading rhythm rather than components. Those two pages carried Tailwind's `prose` class, which does NOTHING here — the typography plugin is not in `tailwind.config.js` — so they were already rendering on browser defaults. */ .doc{max-width:72ch} .doc h2{margin:34px 0 10px;font-size:19px;font-weight:650;letter-spacing:-.02em} .doc h3{margin:24px 0 8px;font-size:16.5px;font-weight:650} .doc p{margin:0 0 14px;font-size:16px;line-height:1.65;color:var(--ink-2)} .doc ul,.doc ol{list-style:revert;margin:0 0 14px;padding-left:22px;font-size:16px;line-height:1.65;color:var(--ink-2)} .doc li{margin:6px 0} .doc .stamp{font-size:14.5px;color:var(--muted);margin-bottom:26px} /* ---------- data tables ---------- One table in the app (/history). Borderless rows with a ruled head: a grid of boxes reads as a spreadsheet, and this is a list of documents. */ .tbl{width:100%;border-collapse:collapse;font-size:15px;margin-top:6px} .tbl th{text-align:left;font-weight:650;font-size:13.5px;letter-spacing:.02em; text-transform:uppercase;color:var(--muted);padding:0 14px 10px 0;border-bottom:1.5px solid var(--line)} .tbl td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top} .tbl tr:last-child td{border-bottom:0} .tbl .nowrap{white-space:nowrap;color:var(--muted)} .tbl .tag{display:inline-block;margin-left:7px;padding:2px 8px;border-radius:var(--r-pill); background:var(--amber-soft);color:var(--amber);font-size:12.5px;font-weight:600} @media (max-width:620px){.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%} .tbl thead{display:none} .tbl tr{border-bottom:1px solid var(--line);padding:12px 0} .tbl td{border:0;padding:2px 0}}