/* * NEW-BCK-0180 §2. The customer portal skin. * * Codex's own block, transplanted from ~/Desktop/RICK-CODEX-PORTAL/portal.css: * Arial, compact spacing, square fields, slate section bars, lime primary * buttons, pale utility panels and dense tables. Every hex value below is his, * unchanged. * * WHAT IS OURS IS THE SCOPE. His file styles `html`, `body` and `*` directly, * which would have reskinned the back office the moment anything shared a * stylesheet. Everything here hangs off `.portal-skin`, stamped on the * storefront layout's own and nowhere else, so the two buildings cannot * bleed into each other — the same rule 0179's follows for the * same reason. * * No build step: this is plain CSS served from public/, exactly as * public/css/qc-screen.css is. */ .portal-skin { --slate: #3d4246; --slate2: #2f3438; --lime: #91bd18; --lime2: #71980d; --orange: #e6911f; --red: #b94135; --blue: #dcecf5; --line: #c5c9cc; --paper: #fff; --wash: #e9ebec; --muted: #72787c; --ink: #2d3235; margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 14px; background: var(--wash); color: var(--ink); } .portal-skin * { box-sizing: border-box; } /* ---- header + nav ---------------------------------------------------- */ .portal-skin .top { background: var(--slate2); border-bottom: 4px solid var(--lime); color: #fff; } .portal-skin .top-inner { width: 1080px; max-width: calc(100% - 24px); margin: auto; display: flex; align-items: center; min-height: 48px; } .portal-skin .brand { font-weight: bold; font-size: 18px; margin-right: 26px; } .portal-skin .nav { display: flex; align-items: stretch; gap: 1px; } .portal-skin .nav a, .portal-skin .nav button { appearance: none; border: 0; background: transparent; color: #fff; text-decoration: none; padding: 16px 13px; font: inherit; cursor: pointer; } .portal-skin .nav a:hover, .portal-skin .nav a.active, .portal-skin .nav button:hover { background: #4d5357; } .portal-skin .nav .signout { margin-left: 12px; } .portal-skin .nav form { display: flex; margin: 0; } /* NEW-BCK-0205 — V10. "New order", a product chooser rather than one hardcoded left-chest link — see layouts/storefront.blade.php's own note. */ .portal-skin .nav details { position: relative; } .portal-skin .nav summary { list-style: none; padding: 16px 13px; cursor: pointer; } .portal-skin .nav summary::-webkit-details-marker { display: none; } .portal-skin .nav details:hover summary, .portal-skin .nav details[open] summary { background: #4d5357; } .portal-skin .nav details .menu { position: absolute; top: 100%; left: 0; min-width: 160px; background: var(--slate2); border: 1px solid #4d5357; z-index: 20; } .portal-skin .nav details .menu a { display: block; padding: 10px 13px; white-space: nowrap; } /* ---- page shell ------------------------------------------------------ */ .portal-skin .page { width: 1080px; max-width: calc(100% - 24px); margin: 16px auto 36px; background: var(--paper); border: 1px solid #b8bdc0; } .portal-skin .page-title { background: var(--slate); color: #fff; padding: 10px 13px; display: flex; align-items: center; } .portal-skin .page-title h1 { font-size: 18px; margin: 0; } .portal-skin .page-title .ref { margin-left: auto; background: #272b2e; padding: 5px 8px; font-weight: bold; } .portal-skin .section { border-top: 1px solid var(--line); } .portal-skin .section:first-of-type { border-top: 0; } .portal-skin .section-title { background: var(--slate); color: #fff; font-size: 13px; text-transform: uppercase; padding: 7px 10px; font-weight: bold; } .portal-skin .body { padding: 12px; } .portal-skin .footer-note { padding: 10px; background: #f1f2f2; border-top: 1px solid var(--line); font-size: 12px; color: #62686c; } /* ---- order confirmation ---------------------------------------------- *\ NEW-BCK-0228 §4. The page a customer lands on the moment they have committed to an order used to carry a `card` class this stylesheet has never defined, so it rendered as bare unstyled text on a grey background. Two rules, both in the skin's existing idiom: the four facts as a definition list, and the row holding "View your order" beside the quieter "Place another order". \* ---------------------------------------------------------------------- */ .portal-skin dl.confirmation { margin: 0; display: grid; gap: 8px; } .portal-skin dl.confirmation > div { display: grid; grid-template-columns: 150px 1fr; gap: 10px; align-items: baseline; } .portal-skin dl.confirmation dt { font-weight: bold; color: #4a5054; } .portal-skin dl.confirmation dd { margin: 0; } .portal-skin .confirmation-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; } .portal-skin .confirmation-actions .button { font-size: 14px; padding: 10px 20px; } .portal-skin .confirmation-actions .secondary { color: var(--slate); text-decoration: underline; } @media (max-width: 620px) { .portal-skin dl.confirmation > div { grid-template-columns: 1fr; gap: 2px; } } /* ---- controls -------------------------------------------------------- */ .portal-skin .toolbar { display: grid; grid-template-columns: 1fr 180px 180px auto; gap: 8px; padding: 10px; background: #dfe2e3; border-bottom: 1px solid var(--line); } .portal-skin input, .portal-skin select, .portal-skin textarea { font: inherit; border: 1px solid #aeb3b6; border-radius: 0; background: #fff; padding: 7px 8px; color: var(--ink); } .portal-skin input, .portal-skin select { height: 34px; } .portal-skin textarea { width: 100%; min-height: 90px; resize: vertical; } .portal-skin .button { display: inline-block; border: 1px solid var(--lime2); background: linear-gradient(#a9d62a, #83ad13); color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 8px 13px; cursor: pointer; } .portal-skin .button.orange { background: linear-gradient(#f1a43b, #d77a12); border-color: #b5660d; } .portal-skin .button.red { background: linear-gradient(#d75c4d, #ad362d); border-color: #8f2c25; } .portal-skin .button.dark { background: linear-gradient(#555c61, #363b3f); border-color: #282c2f; } .portal-skin .button.small { font-size: 11px; padding: 6px 9px; } .portal-skin .button[disabled] { opacity: .55; cursor: default; } /* NEW-BCK-0353-CUSTOMER-PORTAL-A. FRONTEND-SPEC.md §2: "Pale neutral secondary; pale blue Request a quote; not every button lime." Place a new order keeps the lime primary above; Request a quote and the dashboard's product buttons use this. */ .portal-skin .button.secondary { background: var(--blue); color: var(--slate2); border-color: #b7d3e3; text-transform: none; font-weight: normal; } /* ---- dashboard --------------------------------------------------------- */ .portal-skin .dashboard-actions { display: flex; gap: 10px; margin: 10px 0; flex-wrap: wrap; } .portal-skin .product-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; } .portal-skin .product-button { display: inline-block; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: bold; padding: 10px 16px; } .portal-skin .product-button:hover { border-color: var(--lime2); background: #f4f7eb; } /* ---- buckets + order table ------------------------------------------- */ .portal-skin .buckets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 10px; background: #f5f6f6; } .portal-skin .bucket { display: block; background: #d9dcde; color: #333; text-decoration: none; border: 1px solid #b9bdc0; padding: 9px 10px; font-weight: bold; } .portal-skin .bucket.active { background: var(--lime); border-color: var(--lime2); color: #fff; } .portal-skin .bucket span { float: right; background: rgba(0, 0, 0, .15); padding: 1px 5px; } .portal-skin .orders { width: 100%; border-collapse: collapse; } .portal-skin .orders th { background: #60666a; color: #fff; text-align: left; padding: 7px 8px; font-size: 12px; } .portal-skin .orders td { border-bottom: 1px solid #d3d6d8; padding: 7px 8px; vertical-align: middle; } .portal-skin .orders tr:hover td { background: #f4f7eb; } /* NEW-BCK-0259 TASK C. An invoice's lines are sorted by date and may cover ten orders; a heavier rule above the first row of each new one is what "several orders clearly separated" looks like on a screen. */ .portal-skin .invoice-lines tr.order-break td { border-top: 2px solid #9aa2a6; } .portal-skin .thumb { width: 58px; height: 45px; border: 1px solid #aeb3b6; background: linear-gradient(135deg, #e1e3e4 25%, #c6c9cb 25%, #c6c9cb 50%, #e1e3e4 50%, #e1e3e4 75%, #c6c9cb 75%); background-size: 16px 16px; display: flex; align-items: center; justify-content: center; color: #666; font-size: 10px; overflow: hidden; } .portal-skin .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---- status chips ---------------------------------------------------- */ .portal-skin .status { display: inline-block; padding: 4px 7px; background: #d9dcde; font-size: 11px; font-weight: bold; text-transform: uppercase; } .portal-skin .status.progress { background: #dcecf5; color: #28536b; } .portal-skin .status.approval { background: #fde7bd; color: #81540f; } .portal-skin .status.hold { background: #f3d5d0; color: #7f2e27; } .portal-skin .status.complete, .portal-skin .status.paid { background: #dceab7; color: #46620c; } .portal-skin .status.unpaid { background: #f4d0cb; color: #8a2e26; } /* NEW-BCK-0205 — V5. Grey, not red: a decline is a completed decision, not a fault. */ .portal-skin .status.cancelled { background: #d9dcde; color: #4a4f57; } /* ---- detail ---------------------------------------------------------- */ .portal-skin .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .portal-skin .details { width: 100%; border-collapse: collapse; } .portal-skin .details th, .portal-skin .details td { padding: 6px 8px; border-bottom: 1px solid #d6d9da; text-align: left; } .portal-skin .details th { width: 42%; background: #f1f2f2; color: #555; } .portal-skin .file-list { list-style: none; padding: 0; margin: 0; } .portal-skin .file-list li { display: flex; gap: 8px; align-items: center; padding: 7px; border-bottom: 1px solid #ddd; } .portal-skin .preview-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; } .portal-skin .imagebox { height: 320px; border: 1px solid #afb4b7; background: #eef0f1; display: flex; align-items: center; justify-content: center; text-align: center; color: #6d7377; font-weight: bold; overflow: hidden; } .portal-skin .imagebox img { max-width: 100%; max-height: 100%; object-fit: contain; } .portal-skin .imagebox.sewout { height: 230px; background: #e2e5e6; } .portal-skin .download-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .portal-skin .ticket-strip { background: var(--blue); border: 1px solid #a9c6d7; padding: 9px 10px; } .portal-skin .quote { font-size: 24px; font-weight: bold; color: #435d08; } .portal-skin .approval-actions { display: flex; gap: 8px; margin-top: 12px; } .portal-skin .locked { border: 2px solid var(--orange); background: #fff4df; padding: 12px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .portal-skin .locked strong { font-size: 16px; } /* ---- invoices, tickets, account -------------------------------------- */ .portal-skin .invoice-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; } .portal-skin .metric { background: #eef0f1; border: 1px solid #c7cbcd; padding: 12px; } .portal-skin .metric b { display: block; font-size: 20px; margin-top: 4px; } .portal-skin .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .portal-skin .thread { border: 1px solid var(--line); } .portal-skin .message { padding: 10px; border-bottom: 1px solid var(--line); } .portal-skin .message.customer { background: #f5f7ec; } .portal-skin .message.support { background: #e8f2f7; } .portal-skin .message .meta { font-size: 11px; color: var(--muted); margin-bottom: 5px; } .portal-skin .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .portal-skin .field label { display: block; font-weight: bold; color: #555; margin: 0 0 4px; } .portal-skin .field input, .portal-skin .field select, .portal-skin .field textarea { width: 100%; } .portal-skin .hint { font-size: 11px; color: var(--muted); } .portal-skin .right { text-align: right; } .portal-skin .empty-preview { color: #777; font-style: italic; } .portal-skin .priority { color: #8a570b; font-weight: bold; } /* Ours: the messages the skin has no block for. Same palette. */ .portal-skin .flash { background: #dceab7; border: 1px solid #a9c46a; color: #3c5409; padding: 9px 10px; margin: 0 0 10px; } .portal-skin .notice { background: #fdf3e0; border: 1px solid #e6c98a; color: #6f4a06; padding: 9px 10px; } .portal-skin .error { background: #f4d0cb; border: 1px solid #d09a92; color: #7f2620; padding: 9px 10px; margin: 0 0 10px; } .portal-skin .field-error { color: var(--red); font-size: 12px; margin: 4px 0 0; } @media (max-width: 760px) { .portal-skin .top-inner { display: block; padding-top: 8px; } .portal-skin .brand { display: block; margin: 0 8px 6px; } .portal-skin .nav { overflow-x: auto; } .portal-skin .nav a, .portal-skin .nav button { white-space: nowrap; padding: 11px 10px; } .portal-skin .toolbar, .portal-skin .detail-grid, .portal-skin .preview-grid, .portal-skin .two-col, .portal-skin .form-grid, .portal-skin .invoice-summary { grid-template-columns: 1fr; } .portal-skin .buckets { grid-template-columns: 1fr 1fr; } .portal-skin .orders { font-size: 12px; } .portal-skin .orders .optional { display: none; } .portal-skin .page { max-width: 100%; margin: 0; } .portal-skin .imagebox { height: 230px; } } /* --------------------------------------------------------------------------- NEW-BCK-0206 §8 — the money strip. MONEY-DECISIONS-v1 R11's tone has a visual half. The paused state is a quiet amber band, not a red alarm: the customer is being told a fact and given an action, and a page that shouts at somebody who owes £11 for two edits is the opposite of what the ruling asks for. --------------------------------------------------------------------------- */ .portal-skin .money-strip { display: flex; flex-direction: column; gap: .5rem; padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid #dfe3e8; border-radius: 8px; background: #fbfcfd; } .portal-skin .money-strip-paused { border-color: #e6c98a; background: #fdf8ee; } /* NEW-BCK-0328 R2 — one class per named state. Neutral is the plain strip; paused is the amber it has always been; overdue is urgent and says so. */ .portal-skin .money-strip-neutral { border-color: #d9dde3; background: #fbfcfd; } .portal-skin .money-strip-urgent { border-color: #d9534f; background: #fdf3f3; } .portal-skin .money-strip-urgent .money-strip-line { color: #8a2b28; font-weight: 600; } .portal-skin .money-strip-figures { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; } .portal-skin .money-metric { display: flex; flex-direction: column; line-height: 1.25; } .portal-skin .money-metric .money-k { font-size: .72rem; letter-spacing: .02em; text-transform: uppercase; color: #7b8794; } .portal-skin .money-metric b { font-size: 1.05rem; color: #2c3038; } .portal-skin .money-strip-line { font-size: .95rem; color: #2c3038; } .portal-skin .money-strip-line b { font-weight: 600; } .portal-skin .money-strip-note { margin: 0; max-width: 62ch; color: #6b5a2e; font-size: .92rem; } .portal-skin .money-strip .button { margin-left: auto; } /* --------------------------------------------------------------------------- NEW-BCK-0333 — the account card. R5's four facts, quietly laid out; the same restrained tone as the money strip above rather than a second alarm. --------------------------------------------------------------------------- */ .portal-skin .account-card { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .7rem .9rem; margin-bottom: 1rem; border: 1px solid #dfe3e8; border-radius: 8px; background: #fbfcfd; } .portal-skin .account-card-row { font-size: .92rem; color: #2c3038; } .portal-skin .account-card-row-overdue { color: #7a4d16; } .portal-skin .account-card-note { margin: 0; color: #6b5a2e; font-size: .92rem; } .portal-skin .account-card .button { margin-left: auto; } /* --------------------------------------------------------------------------- NEW-BCK-0214 §3 — the storefront footer. It exists to carry two links and it should look like it: a hairline rule, a quiet row, and no visual weight competing with the page above it. The rule is the same --line the rest of the shell uses rather than a second grey, and the row sits on the same 1080px measure as .top-inner so the links land under the nav they belong with rather than at the edge of the window. --------------------------------------------------------------------------- */ .portal-skin .foot { margin-top: 2.5rem; border-top: 1px solid var(--line); background: #f7f8f8; } .portal-skin .foot-inner { width: 1080px; max-width: calc(100% - 24px); margin: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; padding: 1rem 0; font-size: .86rem; color: #6b7280; } .portal-skin .foot nav { display: flex; flex-wrap: wrap; gap: 1.1rem; } .portal-skin .foot a { color: #4b5563; text-decoration: none; border-bottom: 1px solid transparent; } .portal-skin .foot a:hover { color: #1f2937; border-bottom-color: currentColor; } @media (max-width: 720px) { .portal-skin .foot-inner { justify-content: flex-start; } } /* * NEW-BCK-0241 TASK C. THE EDIT MARK, ON THE CUSTOMER'S SIDE. * * The owner's ruling reaches the customer's own order list and order page, and * the portal loads none of the back office's tokens — so 's * `badge badge-edit` classes mean nothing here and the mark would render as * bare text. Its own hook, painted in the portal's own blue. */ .portal-skin .edit-mark { display: inline-block; padding: 3px 6px; border-radius: 3px; background: #dcecf5; color: #28536b; font-size: 10px; font-weight: bold; letter-spacing: .05em; vertical-align: middle; } .portal-skin .edit-mark-parent { font-size: 11px; color: var(--muted); } /* * NEW-BCK-0299 R4 — THE LEGAL PAGES, rendered from markdown. * * The portal's skin styles the screens it was written for — cards, tables, * fields — and none of those is a six-thousand-word document. Markdown emits * h1/h2/ul/em/strong straight into `.body`, where nothing had a rule, so * without these a terms page renders as one undifferentiated wall with its * headings the same size as its paragraphs. Scoped to `.legal` so no other * screen's `.body` changes. * * MEASURE, not width: a line of legal text longer than about 70 characters is * one people lose their place in, which is the practical difference between * terms that are published and terms that are read. */ .portal-skin .legal { max-width: 42rem; line-height: 1.6; } .portal-skin .legal h1 { font-size: 1.5rem; margin: 0 0 1rem; } .portal-skin .legal h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; } .portal-skin .legal h3 { font-size: 1rem; margin: 1.5rem 0 .5rem; } .portal-skin .legal p { margin: 0 0 1rem; } .portal-skin .legal ul, .portal-skin .legal ol { margin: 0 0 1rem 1.25rem; padding: 0; } .portal-skin .legal li { margin: 0 0 .35rem; } .portal-skin .legal code { background: #f3f4f6; padding: 1px 4px; border-radius: 3px; font-size: .9em; } .portal-skin .legal hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.75rem 0; } .portal-skin .legal a { color: #28536b; } /* R4's order-form line, beside Place order and never in place of it. */ .portal-skin .legal-consent { margin: 0 0 .5rem; font-size: .9rem; } /* ---- the order list's pager — NEW-BCK-0312 ---------------------------- x-floor-pager is the floor's footer, reused whole rather than copied, and the floor's stylesheet calls its buttons `.btn` while this skin calls its own `.button`. Rather than fork the component for one class name, the two names are made to mean the same thing here. Nothing else on the storefront uses `.btn`, so this is scoped to the pager and cannot reach a form. */ .portal-skin .pager-row { margin-top: .9rem; } .portal-skin .floor-pager-count { font-size: 12px; color: var(--muted); } .portal-skin .floor-pager-nav { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .portal-skin .floor-pager-nav .btn { display: inline-block; border: 1px solid var(--lime2); background: linear-gradient(#a9d62a, #83ad13); color: #fff; text-decoration: none; text-transform: uppercase; font-weight: bold; font-size: 11px; padding: 6px 9px; cursor: pointer; } .portal-skin .floor-pager-nav .btn[disabled] { opacity: .55; cursor: default; } .portal-skin .floor-pager-nav .muted { font-size: 11px; color: var(--muted); text-transform: uppercase; } /* --------------------------------------------------------------------------- NEW-BCK-0354-CUSTOMER-PORTAL-B — the rebuilt Dashboard (W1-W7). .panel reuses the same restrained card look the money strip and the account card already established (border, radius, pale background) rather than inventing a second visual language for Welcome/Get in touch/Account details/Support — FRONTEND-SPEC.md §2's "no oversized headings/cards". --------------------------------------------------------------------------- */ .portal-skin .dashboard-title { display: block; } .portal-skin .dashboard-title h1 { display: block; } .portal-skin .panel { border: 1px solid #dfe3e8; border-radius: 8px; background: #fbfcfd; padding: .7rem .9rem; margin-bottom: 1rem; } .portal-skin .panel-title { font-weight: bold; font-size: .95rem; margin-bottom: .3rem; color: #2c3038; } .portal-skin .dashboard-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .portal-skin .dashboard-intro .panel p { margin: 0 0 .5rem; font-size: .92rem; } .portal-skin .tickets-shortcut { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #aeb3b6; padding: 7px 8px; text-decoration: none; color: var(--ink); font-size: .9rem; white-space: nowrap; } .portal-skin .tickets-shortcut:hover { border-color: var(--lime2); background: #f4f7eb; } /* Five tabs, not four — the bucket grid's own column count widens rather than wrapping the fifth tab onto a lonely row. */ .portal-skin .dashboard-scopes { grid-template-columns: repeat(5, 1fr); } .portal-skin .product-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 16px; } .portal-skin .product-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; padding: 12px 14px; } .portal-skin .product-tile:hover { border-color: var(--lime2); background: #f4f7eb; } .portal-skin .product-tile-icon { color: var(--slate2); } .portal-skin .product-tile-label { font-weight: bold; } .portal-skin .product-tile-description { font-size: .82rem; color: var(--muted); } .portal-skin .completed-download-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; } .portal-skin .completed-download-row p { margin: 0; } .portal-skin .download-buttons { display: flex; flex-wrap: wrap; gap: 6px; } .portal-skin .dashboard-footer-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; } @media (max-width: 760px) { .portal-skin .dashboard-intro, .portal-skin .dashboard-footer-panels { grid-template-columns: 1fr; } .portal-skin .dashboard-scopes { grid-template-columns: 1fr 1fr; } .portal-skin .product-tiles { grid-template-columns: 1fr 1fr; } .portal-skin .dashboard-orders .optional { display: none; } }