/* Wingreen CRM + client portal — shared interface. Everything is scoped under .wgx so the site theme can't leak in. */ .wgx { --x-bg: #F4F5F1; --x-surface: #fff; --x-line: #E1E4DB; --x-line2: #EEF0EA; --x-hover: #F7F8F4; --x-text: #1F241F; --x-muted: #626B5F; --x-faint: #8A9286; --x-primary: #3F5B30; --x-primary-dark: #2F4524; --x-primary-soft: #EAF0E4; --x-accent: #F94F02; --x-danger: #B42318; --x-danger-soft: #FDECEA; --x-warn: #B54708; --x-warn-soft: #FEF3E2; --x-info: #34484A; --x-info-soft: #DCE2E0; --x-radius: 10px; --x-shadow: 0 1px 2px rgba(20,30,15,.06); --x-font: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; font-family: var(--x-font); font-size: 14px; line-height: 1.5; color: var(--x-text); -webkit-font-smoothing: antialiased; } .wgx *, .wgx *::before, .wgx *::after { box-sizing: border-box; } .wgx a { color: var(--x-primary); text-decoration: none; } .wgx a:hover { text-decoration: underline; } .wgx h1, .wgx h2, .wgx h3, .wgx h4 { font-family: var(--x-font); color: var(--x-text); margin: 0; letter-spacing: -.01em; text-transform: none; line-height: 1.25; } .wgx h1 { font-size: 24px; font-weight: 700; } .wgx h2 { font-size: 17px; font-weight: 650; } .wgx h3 { font-size: 14px; font-weight: 650; } .wgx p { margin: 0 0 8px; } .wgx small, .wgx .x-muted { color: var(--x-muted); } .wgx .x-muted { font-size: 13px; } .wgx .x-num { font-variant-numeric: tabular-nums; } .wgx .x-code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 12px; color: var(--x-muted); letter-spacing: .02em; white-space: nowrap; } .wgx .x-high { color: var(--x-danger); font-weight: 600; } .wgx hr { border: 0; border-top: 1px solid var(--x-line2); margin: 14px 0; } /* ---------- buttons */ .wgx .x-btn, .wgx button.x-btn, .wgx a.x-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; margin: 0; border: 1px solid var(--x-line); border-radius: 8px; background: var(--x-surface); color: var(--x-text); font: 600 14px/1 var(--x-font); text-transform: none; letter-spacing: 0; cursor: pointer; white-space: nowrap; text-decoration: none; box-shadow: var(--x-shadow); } .wgx .x-btn:hover { background: var(--x-hover); border-color: #CDD2C6; text-decoration: none; color: var(--x-text); } .wgx .x-btn-primary, .wgx button.x-btn-primary, .wgx a.x-btn-primary { background: var(--x-primary); border-color: var(--x-primary); color: #fff; } .wgx .x-btn-primary:hover { background: var(--x-primary-dark); border-color: var(--x-primary-dark); color: #fff; } .wgx .x-btn-danger, .wgx button.x-btn-danger { background: var(--x-danger); border-color: var(--x-danger); color: #fff; } .wgx .x-btn-danger:hover { background: #8f1b13; color: #fff; } .wgx .x-btn-sm { height: 30px; padding: 0 10px; font-size: 13px; } .wgx .x-btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--x-primary); } .wgx .x-btn-ghost:hover { background: var(--x-primary-soft); border-color: transparent; } .wgx .x-link, .wgx button.x-link { background: none; border: 0; padding: 0; margin: 0; color: var(--x-primary); font: inherit; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; } .wgx .x-link:hover { text-decoration: underline; background: none; } .wgx .x-link-danger { color: var(--x-danger); } .wgx .x-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .wgx form.wgc-form { margin: 0; } .wgx .x-actions form.wgc-form, .wgx .x-inline-form { display: inline-flex; } /* ---------- pills */ .wgx .x-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: #EEF0EA; color: #4A5246; } .wgx .x-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; } .wgx .t-green { background: #E5F2DF; color: #2E6B1F; } .wgx .t-blue { background: var(--x-info-soft); color: var(--x-info); } .wgx .t-orange { background: var(--x-warn-soft); color: var(--x-warn); } .wgx .t-red { background: var(--x-danger-soft); color: var(--x-danger); } .wgx .t-purple { background: #F1EAFB; color: #6B3FB5; } .wgx .t-grey { background: #EEF0EA; color: #5A6356; } /* ---------- cards + layout */ .wgx .x-card { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--x-radius); box-shadow: var(--x-shadow); margin-bottom: 16px; min-width: 0; } .wgx .x-card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--x-line2); } .wgx .x-card-h h2 { font-size: 15px; } .wgx .x-card-b { padding: 16px 18px; } .wgx .x-card-b.x-flush { padding: 0; } .wgx .x-card-f { padding: 12px 18px; border-top: 1px solid var(--x-line2); } .wgx .x-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .wgx .x-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .wgx .x-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } @media (max-width: 1100px) { .wgx .x-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { .wgx .x-two, .wgx .x-three { grid-template-columns: minmax(0, 1fr); } } /* page header */ .wgx .x-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .wgx .x-head-t { min-width: 0; } .wgx .x-head-t p { margin: 4px 0 0; color: var(--x-muted); } .wgx .x-head-t .x-crumb { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 600; } .wgx .x-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* key numbers */ .wgx .x-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; } .wgx .x-kpi { display: block; padding: 14px 16px; background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--x-radius); box-shadow: var(--x-shadow); color: var(--x-text); } .wgx a.x-kpi:hover { border-color: var(--x-primary); text-decoration: none; } .wgx .x-kpi span { display: block; font-size: 12px; font-weight: 600; color: var(--x-muted); text-transform: uppercase; letter-spacing: .04em; } .wgx .x-kpi strong { display: block; font-size: 22px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; } .wgx .x-kpi small { display: block; margin-top: 2px; } .wgx .x-kpi.is-alert strong { color: var(--x-danger); } /* workflow (home) */ .wgx .x-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } @media (max-width: 1000px) { .wgx .x-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wgx .x-flow-c { background: var(--x-surface); border: 1px solid var(--x-line); border-radius: var(--x-radius); padding: 14px 16px; box-shadow: var(--x-shadow); border-top: 3px solid var(--x-primary); } .wgx .x-flow-c h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--x-muted); } .wgx .x-flow-c h3 a { text-transform: none; letter-spacing: 0; font-size: 13px; } .wgx .x-flow-c .big { display: block; font-size: 26px; font-weight: 700; margin: 6px 0 8px; } .wgx .x-flow-c ul { list-style: none; margin: 0; padding: 0; } .wgx .x-flow-c li { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; } .wgx .x-flow-c li a { color: var(--x-text); } .wgx .x-flow-c li b { font-variant-numeric: tabular-nums; } /* tabs */ .wgx .x-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--x-line); margin-bottom: 16px; scrollbar-width: thin; } .wgx .x-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--x-muted); font-weight: 600; white-space: nowrap; } .wgx .x-tabs a:hover { color: var(--x-text); text-decoration: none; } .wgx .x-tabs a.on { color: var(--x-primary); border-bottom-color: var(--x-primary); } .wgx .x-tabs a i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #EEF0EA; color: var(--x-muted); font-size: 12px; display: inline-flex; align-items: center; justify-content: center; } .wgx .x-tabs a.on i { background: var(--x-primary-soft); color: var(--x-primary); } /* toolbar above lists */ .wgx .x-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; } .wgx .x-toolbar .x-search { flex: 1 1 260px; max-width: 420px; } /* tables */ .wgx .x-table-wrap { overflow-x: auto; } .wgx table.x-table { width: 100%; border-collapse: collapse; margin: 0; border: 0; font-size: 14px; background: transparent; } .wgx .x-table th { text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 600; color: var(--x-muted); text-transform: uppercase; letter-spacing: .04em; border: 0; border-bottom: 1px solid var(--x-line); background: #FAFBF8; white-space: nowrap; } .wgx .x-table td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--x-line2); vertical-align: middle; background: transparent; } .wgx .x-table tr:last-child td { border-bottom: 0; } .wgx .x-table tr[data-href] { cursor: pointer; } .wgx .x-table tr[data-href]:hover td { background: var(--x-hover); } .wgx .x-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .wgx .x-table .nw { white-space: nowrap; } .wgx .x-table td strong a, .wgx .x-table td a.x-strong { color: var(--x-text); font-weight: 600; } .wgx .x-table td small { display: block; } /* lists inside cards */ .wgx .x-list { list-style: none; margin: 0; padding: 0; } .wgx .x-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--x-line2); } .wgx .x-list > li:last-child { border-bottom: 0; } .wgx .x-list > li > div { min-width: 0; } .wgx .x-list a.x-row { color: var(--x-text); font-weight: 600; } .wgx .x-list .x-right { text-align: right; flex: 0 0 auto; } /* definition rows */ .wgx .x-dl { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 12px; margin: 0; } .wgx .x-dl dt { color: var(--x-muted); font-size: 13px; } .wgx .x-dl dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; } /* timeline */ .wgx .x-feed { list-style: none; margin: 0; padding: 0; } .wgx .x-feed li { position: relative; padding: 0 0 14px 20px; } .wgx .x-feed li::before { content: ""; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: #B9C1B2; } .wgx .x-feed li::after { content: ""; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--x-line); } .wgx .x-feed li:last-child::after { display: none; } .wgx .x-feed .when { display: block; font-size: 12px; color: var(--x-muted); } .wgx .x-feed .body { color: var(--x-muted); font-size: 13px; margin-top: 2px; white-space: pre-line; } /* empty + notices */ .wgx .x-empty { padding: 28px 18px; text-align: center; color: var(--x-muted); } .wgx .x-empty strong { display: block; color: var(--x-text); font-size: 15px; margin-bottom: 4px; } .wgx .x-empty .x-actions { justify-content: center; margin-top: 12px; } .wgx .wgc-flash { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; margin: 0 0 16px; border-radius: 8px; background: #E5F2DF; color: #24561A; border: 1px solid #C8E2BD; font-weight: 500; } .wgx .wgc-flash-err { background: var(--x-danger-soft); color: var(--x-danger); border-color: #F5C6C1; } .wgx .wgc-flash-warn { background: var(--x-warn-soft); color: #7A3A06; border-color: #F7D7A8; } .wgx .wgc-flash .wgc-copy { width: 100%; margin-top: 6px; } .wgx .x-note { padding: 12px 14px; border-radius: 8px; background: #FAFBF8; border: 1px solid var(--x-line2); } .wgx .x-note.is-warn { background: var(--x-warn-soft); border-color: #F7D7A8; color: #7A3A06; } .wgx .x-note.is-info { background: var(--x-info-soft); border-color: #C3CDC9; color: #2E4244; } .wgx .x-note.is-ok { background: #E5F2DF; border-color: #C8E2BD; color: #24561A; } /* ---------- forms (reuses wgc_field markup) */ .wgx .wgc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-bottom: 14px; } .wgx .wgc-grid .wgc-span, .wgx .wgc-grid .wgc-span2, .wgx .wgc-grid .x-full { grid-column: 1 / -1; } @media (max-width: 640px) { .wgx .wgc-grid { grid-template-columns: minmax(0, 1fr); } } .wgx .wgs-field { display: flex; flex-direction: column; gap: 5px; margin: 0; min-width: 0; } .wgx .wgs-field > span { font-size: 13px; font-weight: 600; color: var(--x-text); text-transform: none; letter-spacing: 0; font-family: var(--x-font); } .wgx .wgs-field > span em { color: var(--x-danger); font-style: normal; } .wgx .wgs-field small { font-size: 12px; color: var(--x-muted); } .wgx input[type=text], .wgx input[type=email], .wgx input[type=tel], .wgx input[type=number], .wgx input[type=url], .wgx input[type=date], .wgx input[type=time], .wgx input[type=datetime-local], .wgx input[type=search], .wgx input[type=password], .wgx select, .wgx textarea { width: 100%; min-height: 38px; padding: 8px 11px; margin: 0; border: 1px solid #CDD2C6; border-radius: 8px; background: #fff; color: var(--x-text); font: 400 14px/1.4 var(--x-font); box-shadow: none; outline: none; transition: border-color .12s, box-shadow .12s; } .wgx textarea { min-height: 84px; resize: vertical; } .wgx input:focus, .wgx select:focus, .wgx textarea:focus { border-color: var(--x-primary); box-shadow: 0 0 0 3px rgba(63,91,48,.15); } .wgx .wgs-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 500; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; color: inherit; } .wgx .wgs-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--x-primary); flex: 0 0 auto; } .wgx fieldset { border: 1px solid var(--x-line); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; } .wgx legend { padding: 0 6px; font-weight: 600; font-size: 13px; } .wgx .x-form-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; } .wgx .x-form-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--x-muted); margin: 6px 0 10px; grid-column: 1 / -1; } /* ---------- dialogs */ .wgx dialog.x-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(15,25,10,.3); color: var(--x-text); background: #fff; overflow: hidden; } .wgx dialog.x-dialog.x-wide { width: min(980px, calc(100vw - 32px)); } .wgx dialog.x-dialog::backdrop { background: rgba(20,28,16,.45); } .wgx dialog.x-dialog[open] { display: flex; flex-direction: column; } .wgx .x-dialog-h { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--x-line2); } .wgx .x-dialog-h h2 { font-size: 17px; } .wgx .x-dialog-x { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; font-size: 22px; line-height: 1; color: var(--x-muted); cursor: pointer; padding: 0; } .wgx .x-dialog-x:hover { background: var(--x-hover); color: var(--x-text); } .wgx .x-dialog-b { padding: 18px 20px; overflow-y: auto; } .wgx .x-dialog-b > form > .x-form-foot, .wgx .x-dialog-b .x-sticky-foot { position: sticky; bottom: -18px; margin: 0 -20px -18px; padding: 12px 20px; background: #fff; border-top: 1px solid var(--x-line2); } /* ---------- dropdown menus */ .wgx details.x-menu { position: relative; display: inline-block; } .wgx details.x-menu > summary { list-style: none; } .wgx details.x-menu > summary::-webkit-details-marker { display: none; } .wgx .x-menu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px; padding: 6px; background: #fff; border: 1px solid var(--x-line); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,25,10,.16); } .wgx .x-menu-pop.x-left { right: auto; left: 0; } .wgx .x-menu-pop a, .wgx .x-menu-pop button { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--x-text); font: 500 14px/1.3 var(--x-font); text-align: left; cursor: pointer; text-transform: none; letter-spacing: 0; box-shadow: none; } .wgx .x-menu-pop a:hover, .wgx .x-menu-pop button:hover { background: var(--x-hover); text-decoration: none; } .wgx .x-menu-pop .x-danger { color: var(--x-danger); } .wgx .x-menu-pop hr { margin: 6px 0; } .wgx .x-menu-pop form { display: block; } /* ---------- line items + totals (classes used by lines.js) */ .wgx .wgc-lines table { width: 100%; border-collapse: collapse; } .wgx .wgc-lines th { text-align: left; font-size: 12px; font-weight: 600; color: var(--x-muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px 8px; border-bottom: 1px solid var(--x-line); background: transparent; } .wgx .wgc-lines td { padding: 8px; border: 0; border-bottom: 1px solid var(--x-line2); vertical-align: top; background: transparent; } .wgx .wgc-lines .n { text-align: right; white-space: nowrap; } .wgx .wgc-lines input[name="li_qty[]"] { width: 76px; } .wgx .wgc-lines input[name="li_price[]"] { width: 110px; } .wgx .wgc-lines textarea { min-height: 38px; margin-top: 6px; } .wgx .wgc-lines select { width: 76px; } .wgx .wgc-li-total { padding-top: 16px !important; font-weight: 600; } .wgx .wgc-li-add { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0; } .wgx .wgc-li-add .wgs-field { flex: 1 1 260px; } .wgx .wgc-totals { margin: 10px 0 14px auto; width: min(340px, 100%); display: grid; gap: 6px; } .wgx .wgc-totals > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .wgx .wgc-totals input { width: 120px; } .wgx .wgc-totals .wgc-grand { padding-top: 8px; border-top: 1px solid var(--x-line); font-size: 16px; font-weight: 700; } /* ---------- printable document */ .wgx .wgc-doc { background: #fff; padding: 28px; border: 1px solid var(--x-line); border-radius: var(--x-radius); } .wgx .wgc-doc-head { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 2px solid var(--x-primary); margin-bottom: 18px; } .wgx .wgc-doc-brand { font-size: 22px; font-weight: 800; color: var(--x-primary); letter-spacing: .02em; } .wgx .wgc-doc-meta { text-align: right; } .wgx .wgc-doc-meta h2 { font-size: 20px; text-transform: uppercase; letter-spacing: .08em; } .wgx .wgc-doc-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 18px; } .wgx .wgc-doc-parties span { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--x-muted); margin-bottom: 4px; } .wgx .wgc-doc-title { margin: 6px 0 12px; } .wgx .wgc-doc-note { margin-top: 12px; padding: 12px 14px; background: #FAFBF8; border-radius: 8px; white-space: normal; } .wgx .wgc-doc-foot { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--x-line2); font-size: 12px; color: var(--x-muted); } /* ---------- schedule */ .wgx .x-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--x-line); border-radius: var(--x-radius); overflow: hidden; background: var(--x-line); gap: 1px; margin-bottom: 16px; } .wgx .x-day { background: #fff; min-height: 220px; padding: 8px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .wgx .x-day h3 { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--x-muted); padding: 2px 2px 6px; } .wgx .x-day h3 b { font-size: 18px; color: var(--x-text); letter-spacing: 0; } .wgx .x-day.today h3 b { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; background: var(--x-primary); color: #fff; font-size: 15px; } .wgx .x-day.closed { background: #F6F6F2; background-image: repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,.025) 8px 16px); } .wgx .x-day .closed-why { font-size: 11px; color: var(--x-muted); font-weight: 600; } .wgx .x-visit { display: block; padding: 7px 9px; border-radius: 7px; background: var(--x-primary-soft); border-left: 3px solid var(--x-primary); color: var(--x-text); font-size: 12px; line-height: 1.35; overflow: hidden; } .wgx .x-visit:hover { text-decoration: none; filter: brightness(.97); } .wgx .x-visit b { display: block; font-size: 12px; } .wgx .x-visit.st-completed { background: #EEF0EA; border-left-color: #8A9286; color: var(--x-muted); } .wgx .x-visit.st-in_progress { background: var(--x-info-soft); border-left-color: var(--x-info); } .wgx .x-visit.st-on_hold { background: var(--x-warn-soft); border-left-color: var(--x-warn); } .wgx .x-add-day { margin-top: auto; font-size: 12px; color: var(--x-faint); } @media (max-width: 900px) { .wgx .x-week { grid-template-columns: minmax(0, 1fr); } .wgx .x-day { min-height: 0; } } /* leads board */ .wgx .x-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 12px; overflow-x: auto; } .wgx .x-col { background: #EEF0EA; border-radius: var(--x-radius); padding: 10px; min-width: 220px; } .wgx .x-col h3 { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 4px 10px; } .wgx .x-lead { background: #fff; border: 1px solid var(--x-line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--x-shadow); } .wgx .x-lead a { font-weight: 600; color: var(--x-text); } .wgx .x-lead select { min-height: 30px; padding: 4px 8px; font-size: 13px; margin-top: 8px; } /* tasks */ .wgx .x-task { display: flex; gap: 10px; align-items: flex-start; } .wgx .x-task .tick { width: 20px; height: 20px; margin-top: 1px; border: 2px solid #B9C1B2; border-radius: 6px; background: #fff; padding: 0; cursor: pointer; color: #fff; font-size: 12px; line-height: 1; box-shadow: none; } .wgx .x-task .tick:hover { border-color: var(--x-primary); } .wgx .x-task.done .tick { background: var(--x-primary); border-color: var(--x-primary); } .wgx .x-task.done strong { text-decoration: line-through; color: var(--x-muted); } /* results (pCi) */ .wgx .x-pci { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 76px; padding: 8px 10px; border-radius: 10px; background: #E5F2DF; color: #2E6B1F; } .wgx .x-pci strong { font-size: 24px; font-weight: 800; line-height: 1; } .wgx .x-pci span { font-size: 11px; font-weight: 600; } .wgx .x-pci.mid { background: var(--x-warn-soft); color: var(--x-warn); } .wgx .x-pci.high { background: var(--x-danger-soft); color: var(--x-danger); } .wgx .x-pci.held { background: #EEF0EA; color: var(--x-muted); } /* code tools output */ .wgx .wgc-out { margin-top: 12px; min-height: 24px; } .wgx .wgc-out .wgc-code-lg, .wgx .wgc-code-lg { font-family: ui-monospace, Consolas, monospace; font-size: 20px; font-weight: 700; color: var(--x-text); } .wgx .wgc-err { color: var(--x-danger); } .wgx .wgs-dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; margin: 10px 0 0; } .wgx .wgs-dl dd { margin: 0; } /* bar chart */ .wgx .wgc-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; align-items: end; height: 220px; } .wgx .wgc-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; min-width: 0; } .wgx .wgc-bar span { width: 100%; max-width: 44px; background: var(--x-primary); border-radius: 6px 6px 2px 2px; } .wgx .wgc-bar b { font-size: 11px; font-weight: 600; color: var(--x-muted); } .wgx .wgc-bar small { font-size: 11px; } .wgx .x-rows > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--x-line2); } .wgx .x-rows > div:last-child { border-bottom: 0; } /* ======================================================= CRM app shell */ body.wga { margin: 0; background: var(--x-bg); } .wga-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; } .wga-side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: #22301D; color: #DCE3D5; padding: 16px 12px; overflow-y: auto; } .wga-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .02em; } .wga-brand img { height: 28px; width: auto; } .wga-brand small { display: block; color: #9DB08F; font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .wga-nav { display: flex; flex-direction: column; gap: 2px; } .wga-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #DCE3D5; font-weight: 500; font-size: 14px; } .wga-nav a svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: .85; } .wga-nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; } .wga-nav a.on { background: #3F5B30; color: #fff; } .wga-nav a i { margin-left: auto; font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--x-accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .wga-nav .sep { height: 1px; background: rgba(255,255,255,.1); margin: 10px 6px; } .wga-side-foot { margin-top: auto; padding-top: 12px; font-size: 13px; } .wga-side-foot a { color: #B9C7AE; } .wga-main { min-width: 0; display: flex; flex-direction: column; } .wga-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--x-line); } .wga-top .x-search { flex: 1 1 auto; max-width: 520px; position: relative; } .wga-top .x-search input { padding-left: 36px; background: #F4F5F1; border-color: transparent; } .wga-top .x-search input:focus { background: #fff; border-color: var(--x-primary); } .wga-top .x-search svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--x-faint); } .wga-top .grow { flex: 1 1 auto; } .wga-burger { display: none; width: 38px; height: 38px; border: 1px solid var(--x-line); border-radius: 8px; background: #fff; cursor: pointer; padding: 0; } .wga-user { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--x-primary-soft); color: var(--x-primary); font-weight: 700; cursor: pointer; } .wga-page { padding: 24px; max-width: 1360px; width: 100%; } @media (max-width: 900px) { .wga-shell { grid-template-columns: minmax(0, 1fr); } .wga-side { position: fixed; z-index: 60; left: 0; top: 0; width: 260px; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.3); } body.nav-open .wga-side { transform: none; } body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.35); } .wga-burger { display: inline-flex; align-items: center; justify-content: center; } .wga-top { padding: 0 14px; } .wga-page { padding: 16px; } .wga-top .x-new-label { display: none; } } /* ======================================================= client portal */ .wgx.wgp2 { max-width: 1080px; margin: 0 auto; padding: 24px 16px 48px; font-size: 15px; } .wgp2 .p-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .wgp2 .p-head h1 { font-size: 26px; } .wgp2 .p-head p { margin: 4px 0 0; color: var(--x-muted); } .wgp2 .p-prop { min-width: 240px; } .wgp2 .p-prop select { min-height: 40px; } .wgp2 .p-nav { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin-bottom: 20px; background: #fff; border: 1px solid var(--x-line); border-radius: 12px; box-shadow: var(--x-shadow); } .wgp2 .p-nav a { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 9px; color: var(--x-muted); font-weight: 600; white-space: nowrap; } .wgp2 .p-nav a:hover { background: var(--x-hover); color: var(--x-text); text-decoration: none; } .wgp2 .p-nav a.on { background: var(--x-primary); color: #fff; } .wgp2 .p-nav a i { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--x-accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .wgp2 .p-action { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; margin-bottom: 12px; border-radius: var(--x-radius); background: #fff; border: 1px solid var(--x-line); border-left: 4px solid var(--x-primary); box-shadow: var(--x-shadow); } .wgp2 .p-action.is-due { border-left-color: var(--x-accent); } .wgp2 .p-action.is-info { border-left-color: var(--x-info); } .wgp2 .p-action h3 { font-size: 16px; margin-bottom: 2px; } .wgp2 .p-action p { margin: 0; color: var(--x-muted); } .wgp2 .p-result { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--x-line2); } .wgp2 .p-result:last-child { border-bottom: 0; } .wgp2 .p-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; } .wgp2 .p-help div { padding: 14px 16px; border-radius: var(--x-radius); background: #fff; border: 1px solid var(--x-line); } .wgp2 .p-help b { display: block; margin-bottom: 2px; } .wgp2 .p-gate { max-width: 520px; margin: 24px auto; text-align: center; padding: 32px 24px; background: #fff; border: 1px solid var(--x-line); border-radius: 14px; box-shadow: var(--x-shadow); } .wgp2 .p-gate h1 { margin-bottom: 8px; } .wgp2 .p-gate .x-actions { justify-content: center; margin-top: 16px; } /* ======================================================= print */ @media print { body.wga { background: #fff; } .wga-side, .wga-top, .x-noprint, .wgp2 .p-nav, .wgp2 .p-head, .wgp2 .p-help, header.elementor-location-header, footer.elementor-location-footer { display: none !important; } .wga-shell { display: block; } .wga-page, .wgx.wgp2 { padding: 0; max-width: none; } .wgx .wgc-doc { border: 0; padding: 0; } } /* fixes */ .wga-side a.wga-brand, .wga-side a.wga-brand:hover { color: #fff; text-decoration: none; } .wgx .x-btn svg, .wgx summary svg { width: 16px; height: 16px; flex: 0 0 auto; } .wgx .x-tabs { overflow-y: hidden; } .wgx details.x-menu > summary.wga-user { list-style: none; } .wgp2 .p-help a { margin-right: 2px; } /* ======================================================= Wingreen design language (site kit colours + type) */ .wgx { --x-bg: #E8E6DF; --x-surface: #F4F3EE; --x-line: rgba(52,70,47,.22); --x-line2: rgba(52,70,47,.12); --x-hover: #ECEAE3; --x-text: #1A1D1C; --x-muted: #5A615A; --x-faint: #7F857D; --x-primary: #4C5F3D; --x-primary-dark: #34462F; --x-primary-soft: #DFE5D6; --x-accent: #F94F02; --x-danger: #B81F0D; --x-danger-soft: #F6E0DC; --x-warn: #A85400; --x-warn-soft: #F7E7D2; --x-radius: 4px; --x-shadow: none; --x-font: "Inter Tight", Inter, "Segoe UI", system-ui, sans-serif; --x-display: Rajdhani, "Arial Narrow", sans-serif; } .wgx h1, .wgx h2, .wgx h3, .wgx .x-card-h h2, .wgx .x-dialog-h h2 { font-family: var(--x-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .wgx h1 { font-size: 30px; line-height: 1.1; } .wgx .x-card-h h2, .wgx .x-dialog-h h2 { font-size: 17px; color: var(--x-primary-dark); } .wgx .x-card { border-color: var(--x-line); border-radius: var(--x-radius); } .wgx .x-card-h { border-bottom-color: var(--x-line2); } .wgx .x-btn, .wgx button.x-btn, .wgx a.x-btn { border-radius: 2px; border-color: rgba(52,70,47,.36); background: transparent; color: var(--x-primary-dark); font-family: var(--x-display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; box-shadow: none; } .wgx .x-btn:hover { background: rgba(52,70,47,.07); border-color: var(--x-primary-dark); color: var(--x-primary-dark); } .wgx .x-btn-sm { font-size: 13px; } .wgx .x-btn-primary, .wgx button.x-btn-primary, .wgx a.x-btn-primary { background: var(--x-primary); border-color: var(--x-primary); color: #F4F3EE; } .wgx .x-btn-primary:hover { background: var(--x-primary-dark); border-color: var(--x-primary-dark); color: #fff; } .wgx .x-btn-accent, .wgx button.x-btn-accent, .wgx a.x-btn-accent, .wgx summary.x-btn-accent { background: var(--x-accent); border-color: var(--x-accent); color: #1A1D1C; } .wgx .x-btn-accent:hover { background: #E0320A; border-color: #E0320A; color: #1A1D1C; } .wgx .x-btn-danger, .wgx button.x-btn-danger { background: var(--x-danger); border-color: var(--x-danger); color: #fff; } .wgx .x-btn-ghost { border-color: transparent; } .wgx .x-link, .wgx button.x-link { font-family: var(--x-font); } .wgx input[type=text], .wgx input[type=email], .wgx input[type=tel], .wgx input[type=number], .wgx input[type=url], .wgx input[type=date], .wgx input[type=time], .wgx input[type=datetime-local], .wgx input[type=search], .wgx input[type=password], .wgx select, .wgx textarea { border-radius: 2px; border-color: rgba(52,70,47,.36); background: #FBFAF7; } .wgx input:focus, .wgx select:focus, .wgx textarea:focus { border-color: var(--x-primary-dark); box-shadow: 0 0 0 3px rgba(76,95,61,.18); } .wgx .wgs-field > span { font-family: var(--x-display); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--x-primary-dark); } .wgx .x-pill { border-radius: 2px; font-family: var(--x-display); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; height: 22px; } .wgx .t-green { background: #DCE6D2; color: #34462F; } .wgx .t-orange { background: #FBE2D2; color: #A8380A; } .wgx .t-red { background: #F4D8D3; color: #9F1A1A; } .wgx .t-grey { background: #DDDAD2; color: #4A504A; } .wgx .x-tabs { border-bottom-color: var(--x-line); } .wgx .x-tabs a { font-family: var(--x-display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; } .wgx .x-tabs a.on { color: var(--x-primary-dark); border-bottom-color: var(--x-accent); } .wgx .x-tabs a i, .wgx .x-tabs a.on i { border-radius: 2px; background: #DDDAD2; color: var(--x-primary-dark); font-family: var(--x-font); } .wgx .x-kpi, .wgx .x-flow-c { border-radius: var(--x-radius); border-color: var(--x-line); background: var(--x-surface); } .wgx .x-kpi span, .wgx .x-flow-c h3 { font-family: var(--x-display); font-weight: 700; font-size: 14px; letter-spacing: .06em; color: var(--x-primary-dark); } .wgx .x-kpi strong, .wgx .x-flow-c .big { font-family: var(--x-display); font-weight: 700; font-size: 32px; line-height: 1.1; } .wgx .x-flow-c { border-top: 3px solid var(--x-primary); } .wgx .x-flow-c h3 a { font-family: var(--x-display); text-transform: uppercase; letter-spacing: .05em; } .wgx .x-table th, .wgx .wgc-lines th { background: rgba(52,70,47,.05); font-family: var(--x-display); font-weight: 700; font-size: 13px; color: var(--x-primary-dark); letter-spacing: .06em; } .wgx dialog.x-dialog { border-radius: 4px; background: var(--x-surface); } .wgx .x-dialog-b > form > .x-form-foot, .wgx .x-dialog-b .x-sticky-foot { background: var(--x-surface); } .wgx .x-menu-pop { border-radius: 4px; background: var(--x-surface); } .wgx .x-form-section { font-family: var(--x-display); font-size: 14px; color: var(--x-primary-dark); border-bottom: 1px solid var(--x-line2); padding-bottom: 4px; } .wgx .x-note { border-radius: 2px; } .wgx .wgc-flash { border-radius: 2px; } .wgx .x-pci { border-radius: 2px; } .wgx .x-pci strong { font-family: var(--x-display); font-size: 30px; } .wgx .x-week { border-radius: var(--x-radius); } .wgx .x-day { background: var(--x-surface); } .wgx .x-day h3 { font-family: var(--x-display); font-size: 13px; } .wgx .x-day h3 b { font-family: var(--x-display); font-size: 22px; } .wgx .x-day.today h3 b { border-radius: 2px; background: var(--x-accent); color: #1A1D1C; } .wgx .x-day.closed { background-color: #DDDAD2; } .wgx .x-visit { border-radius: 2px; background: #DCE6D2; border-left-color: var(--x-primary); } .wgx .wgc-doc { background: #fff; border-radius: 4px; } .wgx .wgc-doc-head { border-bottom-color: var(--x-primary); } .wgx .wgc-doc-brand { font-family: var(--x-display); font-size: 28px; text-transform: uppercase; letter-spacing: .08em; color: var(--x-primary-dark); } .wgx .wgc-doc-meta h2 { font-family: var(--x-display); } .wgx .x-col { background: #DDDAD2; border-radius: 4px; } .wgx .x-col h3 { font-family: var(--x-display); } .wgx .x-lead { border-radius: 2px; background: var(--x-surface); } /* app shell: dark moss sidebar, Thermal marker on the current page */ body.wga { background: #E8E6DF; } .wga-side { background: #232826; } .wga-brand { font-family: Rajdhani, sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .1em; } .wga-brand small { font-family: Rajdhani, sans-serif; color: #9BAF8F; letter-spacing: .14em; } .wga-nav a { border-radius: 2px; font-family: Rajdhani, sans-serif; font-weight: 600; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; color: #C6C4BC; } .wga-nav a.on { background: #34462F; color: #fff; box-shadow: inset 3px 0 0 #F94F02; } .wga-nav a i { border-radius: 2px; color: #1A1D1C; font-family: "Inter Tight", sans-serif; } .wga-side-foot a { color: #9BAF8F; } .wga-top { background: rgba(232,230,223,.94); border-bottom-color: rgba(52,70,47,.22); } .wga-top .x-search input { background: #F4F3EE; border-color: rgba(52,70,47,.22); } .wga-user { border-radius: 2px; background: #34462F; color: #fff; font-family: Rajdhani, sans-serif; } /* portal */ .wgp2 .p-nav { border-radius: 4px; background: var(--x-surface); border-color: var(--x-line); } .wgp2 .p-nav a { border-radius: 2px; font-family: var(--x-display); font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; } .wgp2 .p-nav a.on { background: var(--x-primary-dark); color: #fff; box-shadow: inset 0 -3px 0 var(--x-accent); } .wgp2 .p-action { border-radius: 4px; background: var(--x-surface); border-color: var(--x-line); } .wgp2 .p-action.is-due { border-left-color: var(--x-accent); } .wgp2 .p-action h3 { font-size: 18px; } .wgp2 .p-help div, .wgp2 .p-gate { border-radius: 4px; background: var(--x-surface); border-color: var(--x-line); } .wgp2 .p-help b { font-family: var(--x-display); text-transform: uppercase; letter-spacing: .05em; color: var(--x-primary-dark); } .wgx .wgc-lines td:first-child { min-width: 280px; } .wgx .wgc-lines input[name="li_name[]"] { min-width: 240px; } .wgx.wgp2 { width: 100%; } /* ======================================================= v1.1 — match the site's forms (request form, sign in) */ .wgx { --x-label-bg: #E8E6DF; --x-field: rgba(232,230,222,.38); --x-panel-line: rgba(52,70,47,.16); } /* panels: no fill, thin moss line, square corners — like the form wrapper */ .wgx .x-card, .wgx .x-kpi, .wgx .x-flow-c, .wgp2 .p-action, .wgp2 .p-help div, .wgp2 .p-gate { background: transparent; border: 1px solid var(--x-panel-line); border-radius: 2px; box-shadow: none; } .wgx .x-card-h { padding: 12px 18px; border-bottom: 1px solid var(--x-panel-line); } .wgx .x-card-h h2 { font-size: 14px; letter-spacing: .07em; color: var(--x-primary-dark); } .wgx .x-flow-c { border-top: 1px solid var(--x-panel-line); position: relative; } .wgx .x-flow-c::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 5px; background: rgba(52,70,47,.12); } .wgx .x-flow-c::after { content: ""; position: absolute; left: -1px; top: -1px; height: 5px; width: 34%; background: var(--x-primary); } .wgx .x-table th, .wgx .wgc-lines th { background: transparent; border-bottom: 1px solid var(--x-panel-line); } .wgx .x-table td, .wgx .x-list > li { border-bottom-color: rgba(52,70,47,.10); } /* buttons: green with the orange edge, like Continue / Submit */ .wgx .x-btn-primary, .wgx button.x-btn-primary, .wgx a.x-btn-primary, .wgx summary.x-btn-primary { background: #4C5F3D linear-gradient(90deg, #F94F02 0 4px, transparent 4px); border: 1px solid rgba(255,255,255,.08); color: #E8E6DF; padding-left: 18px; } .wgx .x-btn-primary:hover { background: #657A50 linear-gradient(90deg, #F94F02 0 4px, transparent 4px); color: #fff; border-color: rgba(255,255,255,.08); } .wgx .x-btn { height: 40px; padding: 0 16px; font-size: 14px; letter-spacing: .07em; } .wgx .x-btn-sm { height: 32px; padding: 0 11px; font-size: 13px; } .wgx .x-btn-sm.x-btn-primary { padding-left: 14px; } /* fields: label sits in the field border, like the request form */ .wgx .wgs-field { position: relative; padding-top: 10px; gap: 0; } .wgx .wgs-field > span { position: absolute; z-index: 2; top: 0; left: 12px; max-width: calc(100% - 24px); padding: .3em .9em; background: var(--x-label-bg); border: 1px solid rgba(52,70,47,.18); border-radius: 2px; color: rgba(52,70,47,.88); font-family: var(--x-display); font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: .045em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wgx .wgs-field:focus-within > span { color: var(--x-primary-dark); border-color: rgba(52,70,47,.32); } .wgx .wgs-field > small { margin-top: 5px; } .wgx .wgs-field input[type=text], .wgx .wgs-field input[type=email], .wgx .wgs-field input[type=tel], .wgx .wgs-field input[type=number], .wgx .wgs-field input[type=url], .wgx .wgs-field input[type=date], .wgx .wgs-field input[type=time], .wgx .wgs-field input[type=datetime-local], .wgx .wgs-field input[type=password], .wgx .wgs-field select, .wgx .wgs-field input[type=search] { min-height: 52px; padding: 16px 14px 8px; } .wgx .wgs-field textarea { padding: 18px 14px 10px; } .wgx input[type=text], .wgx input[type=email], .wgx input[type=tel], .wgx input[type=number], .wgx input[type=url], .wgx input[type=date], .wgx input[type=time], .wgx input[type=datetime-local], .wgx input[type=search], .wgx input[type=password], .wgx select, .wgx textarea { background: var(--x-field); border: 1px solid rgba(52,70,47,.36); border-radius: 2px; font-family: "Inter", "Inter Tight", system-ui, sans-serif; font-size: 13px; font-weight: 500; } .wgx input:focus, .wgx select:focus, .wgx textarea:focus { background: rgba(238,236,228,.58); border-color: rgba(52,70,47,.62); box-shadow: 0 0 0 3px rgba(52,70,47,.10); } .wgx .wgc-grid { gap: 22px 16px; } .wgx .wgc-lines input, .wgx .wgc-lines select, .wgx .wgc-lines textarea, .wgx .wgc-totals input { min-height: 38px; padding: 8px 10px; } .wgx .wgs-check input { accent-color: #4C5F3D; } /* dialogs: Calcite panel under a green title band */ .wgx dialog.x-dialog { background: #E8E6DF; border-radius: 2px; --x-label-bg: #E8E6DF; } .wgx .x-dialog-h { background: #4C5F3D; border: 0; padding: 12px 20px; } .wgx .x-dialog-h h2 { color: #E8E6DF; font-size: 20px; letter-spacing: .05em; } .wgx .x-dialog-x { color: #E8E6DF; } .wgx .x-dialog-x:hover { background: rgba(255,255,255,.1); color: #fff; } .wgx .x-dialog-b > form > .x-form-foot, .wgx .x-dialog-b .x-sticky-foot { background: #E8E6DF; border-top-color: var(--x-panel-line); } .wgx .x-menu-pop { background: #E8E6DF; border: 1px solid rgba(52,70,47,.24); border-radius: 2px; box-shadow: 0 10px 28px rgba(26,29,28,.18); } .wgx .x-menu-pop a, .wgx .x-menu-pop button { font-family: var(--x-display); font-weight: 600; font-size: 15px; letter-spacing: .03em; border-radius: 2px; } /* tabs: the form's progress line */ .wgx .x-tabs { gap: 0; border: 0; box-shadow: inset 0 -3px 0 rgba(52,70,47,.12); } .wgx .x-tabs a { padding: 10px 14px 12px; border-bottom: 3px solid transparent; margin-bottom: 0; color: rgba(31,36,31,.62); font-size: 14px; letter-spacing: .06em; } .wgx .x-tabs a.on { color: var(--x-primary-dark); border-bottom-color: #4C5F3D; } /* ---------------------------------------------------- Field Office */ body.wga { background: #DDDAD2 url("https://www.wingreen.tech/wp-content/uploads/2026/04/hort-image-color-graded.png") center top / cover fixed; } .wga-side { background: #232826; } .wga-top { background: rgba(232,230,223,.96); } .wga-main { background: transparent; } .wga-page { background: #E8E6DF; margin: 24px; padding: 0 0 28px; width: auto; max-width: none; border: 1px solid rgba(52,70,47,.14); min-height: calc(100vh - 110px); } .wga-page > *:not(.x-head):not(dialog) { margin-left: 28px; margin-right: 28px; } .wga-page > .wgc-flash { margin-top: 18px; } /* page title = the site's green title band */ .wga-page > .x-head { margin: 0 0 22px; padding: 14px 28px; background: #4C5F3D; align-items: center; } .wga-page > .x-head h1 { color: #E8E6DF; font-size: 26px; letter-spacing: .05em; } .wga-page > .x-head .x-head-t p, .wga-page > .x-head .x-head-t p a, .wga-page > .x-head .x-crumb { color: #DCE3D5; } .wga-page > .x-head .x-head-t p b { color: #fff; } .wga-page > .x-head .x-code { color: #C6D2BB; } .wga-page > .x-head .x-btn { border-color: rgba(232,230,223,.5); color: #E8E6DF; } .wga-page > .x-head .x-btn:hover { background: rgba(255,255,255,.08); border-color: #E8E6DF; color: #fff; } .wga-page > .x-head .x-btn-primary, .wga-page > .x-head .x-btn-accent { background: #F94F02; border-color: #F94F02; color: #1A1D1C; padding-left: 16px; } .wga-page > .x-head .x-btn-primary:hover { background: #FF6A18; border-color: #FF6A18; color: #1A1D1C; } /* items in a header dropdown sit on the menu's own (light or dark) panel, not on the olive header */ .wga-page > .x-head .x-menu-pop .x-btn, .wga-page > .x-head .x-menu-pop a, .wga-page > .x-head .x-menu-pop button { background: none; border-color: transparent; color: var(--x-text); } .wga-page > .x-head .x-menu-pop .x-btn { width: 100%; height: auto; justify-content: flex-start; padding: 8px 10px; font-size: 15px; text-transform: none; letter-spacing: .03em; } .wga-page > .x-head .x-menu-pop .x-btn:hover, .wga-page > .x-head .x-menu-pop a:hover, .wga-page > .x-head .x-menu-pop button:hover { background: var(--x-hover); color: var(--x-text); } .wga-page > .x-head .x-pill { background: rgba(232,230,223,.92); } @media (max-width: 900px) { .wga-page { margin: 12px; } .wga-page > *:not(.x-head):not(dialog) { margin-left: 14px; margin-right: 14px; } .wga-page > .x-head { padding: 12px 14px; } } /* ---------------------------------------------------- client portal: one fixed column inside the page's panel */ .elementor-widget-shortcode:has(.wgp2), .elementor-widget-shortcode:has(.wgp2) .elementor-shortcode { width: 100%; } .wgx.wgp2 { width: 100%; max-width: none; margin: 0; padding: 28px 30px 34px; } .wgp2 .p-head { margin-bottom: 14px; } .wgp2 .p-head h1 { font-size: 26px; text-transform: none; letter-spacing: .01em; } .wgp2 .p-nav { background: transparent; border: 0; border-radius: 0; padding: 0; gap: 0; box-shadow: inset 0 -3px 0 rgba(52,70,47,.12); margin-bottom: 22px; } .wgp2 .p-nav a { padding: 10px 14px 12px; border-radius: 0; border-bottom: 3px solid transparent; color: rgba(31,36,31,.62); font-size: 14px; letter-spacing: .06em; } .wgp2 .p-nav a:hover { background: transparent; color: var(--x-primary-dark); } .wgp2 .p-nav a.on { background: transparent; color: var(--x-primary-dark); border-bottom-color: #4C5F3D; box-shadow: none; } .wgp2 .p-action { border-left: 4px solid #4C5F3D; } .wgp2 .p-action.is-due { border-left-color: #F94F02; } .wgp2 .p-action.is-info { border-left-color: #657A50; } .wgp2 .x-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wgp2 .x-two { grid-template-columns: minmax(0, 1fr); } @media (max-width: 640px) { .wgp2 .x-kpis { grid-template-columns: minmax(0, 1fr); } .wgx.wgp2 { padding: 20px 16px; } } /* ======================================================= phones and tablets */ /* tablets in landscape: a slimmer sidebar so the work area keeps its room */ @media (max-width: 1279px) and (min-width: 901px) { .wga-shell { grid-template-columns: 208px minmax(0, 1fr); } .wga-side { padding: 14px 10px; } .wga-page { margin: 16px; } .wga-page > *:not(.x-head):not(dialog) { margin-left: 20px; margin-right: 20px; } .wga-page > .x-head { padding: 14px 20px; } .wga-top { padding: 0 16px; gap: 10px; } } .wga-side-x { display: none; } .wga-tabbar { display: none; } /* tablets in portrait and phones: the sidebar becomes a drawer, the top bar keeps only what fits */ @media (max-width: 900px) { .wga-top { gap: 8px; height: 56px; padding: 0 12px; } .wga-burger { flex: 0 0 40px; width: 40px; height: 40px; color: var(--x-text); } .wga-burger svg { width: 20px; height: 20px; } .wga-top .x-search { flex: 1 1 auto; min-width: 0; max-width: none; } .wga-top .grow { display: none; } .wga-top a.x-btn.wga-quick { display: none; } .wga-top .wga-theme, .wga-top .wga-user, .wga-top summary.x-btn { flex: 0 0 auto; } .wga-top summary.x-btn-accent { width: 40px; padding: 0; } .wga-side { width: min(300px, 86vw); padding: 14px 12px calc(14px + env(safe-area-inset-bottom)); overscroll-behavior: contain; } .wga-side-x { display: inline-grid; place-items: center; position: absolute; top: 12px; right: 10px; width: 40px; height: 40px; border: 0; border-radius: 2px; background: rgba(255,255,255,.06); color: #E8E6DF; font-size: 24px; line-height: 1; cursor: pointer; padding: 0; } body.nav-open { overflow: hidden; } .wga-nav a { min-height: 44px; } .wga-side-foot a { display: inline-block; padding: 6px 0; } body.wga { background: #DDDAD2; } .wgx .wgc-lines { overflow-x: auto; } .wgx .x-board { scroll-snap-type: x mandatory; } .wgx .x-col { scroll-snap-align: start; } } /* phones */ @media (max-width: 640px) { .wga-page { margin: 0; border: 0; min-height: calc(100vh - 116px); padding-bottom: 20px; } .wga-page > *:not(.x-head):not(dialog) { margin-left: 12px; margin-right: 12px; } .wga-page > .x-head { padding: 12px; margin-bottom: 14px; gap: 10px; } .wga-page > .x-head h1 { font-size: 22px; } .wga-page > .x-head .x-actions { width: 100%; } .wgx .x-head .x-btn { height: 36px; padding: 0 12px; font-size: 13px; } .wgx .x-card-h { padding: 10px 12px; flex-wrap: wrap; } .wgx .x-card-b { padding: 12px; } .wgx .x-card-f { padding: 10px 12px; } .wgx .x-list > li { padding: 10px 12px; flex-wrap: wrap; } .wgx .x-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .wgx .x-kpi { padding: 10px 12px; } .wgx .x-kpi strong, .wgx .x-flow-c .big { font-size: 26px; } .wgx .x-flow { gap: 8px; } .wgx .x-flow-c { padding: 12px; } .wgx .x-flow-c li { font-size: 12.5px; gap: 6px; } .wgx .x-dl, .wgx .wgs-dl { grid-template-columns: 104px minmax(0, 1fr); } .wgx .x-toolbar .x-search { flex: 1 1 100%; max-width: none; } .wgx .x-tabs { margin-left: -12px; margin-right: -12px; padding: 0 6px; scrollbar-width: none; } .wgx .x-tabs::-webkit-scrollbar { display: none; } .wgx .x-tabs a { padding: 10px 11px 12px; font-size: 13px; } .wgx .wgc-doc { padding: 16px; } .wgx .wgc-doc-head { flex-direction: column; } .wgx .wgc-doc-meta { text-align: left; } .wgx .wgc-lines td:first-child { min-width: 200px; } .wgx .wgc-lines input[name="li_name[]"] { min-width: 180px; } /* dialogs open as full-screen sheets */ .wgx dialog.x-dialog, .wgx dialog.x-dialog.x-wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; inset: 0; border-radius: 0; } .wgx .x-dialog-h { padding: 10px 12px 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); } .wgx .x-dialog-x { width: 40px; height: 40px; } .wgx .x-dialog-b { flex: 1 1 auto; padding: 16px; } .wgx .x-dialog-b > form > .x-form-foot, .wgx .x-dialog-b .x-sticky-foot { margin: 0 -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); bottom: -16px; } .wgx .x-form-foot .x-btn { flex: 1 1 0; } /* menus open as a sheet above the tab bar (the top bar drops its blur so the sheet can sit on the screen, not inside the bar) */ .wga-top { -webkit-backdrop-filter: none; backdrop-filter: none; } .wgx details.x-menu[open] > .x-menu-pop { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(68px + env(safe-area-inset-bottom)); min-width: 0; max-height: 62vh; overflow-y: auto; z-index: 70; padding: 8px; } .wgx .x-menu-pop a, .wgx .x-menu-pop button { min-height: 44px; } html[data-theme="dark"] body.wga { background: #0C100E; } } /* touch screens: 16px text in fields so phones don't zoom in, and roomier tap targets */ @media (pointer: coarse) { .wgx input[type=text], .wgx input[type=email], .wgx input[type=tel], .wgx input[type=number], .wgx input[type=url], .wgx input[type=date], .wgx input[type=time], .wgx input[type=datetime-local], .wgx input[type=search], .wgx input[type=password], .wgx select, .wgx textarea { font-size: 16px; } .wgx .x-btn-sm { height: 36px; } .wgx .wgs-check input { width: 20px; height: 20px; } } /* no blue in the Field Office either: "info" and "scheduled" use a neutral slate that sits with the greens */ .wgx { --x-info: #34484A; --x-info-soft: #DCE2E0; } .wgx .t-blue { background: #DCE2E0; color: #2E4244; } .wgx .x-note.is-info { background: #E3E7E4; border-color: rgba(52,72,74,.22); color: #2E4244; } .wgx .x-visit.st-in_progress { background: #DCE2E0; border-left-color: #34484A; } html[data-theme="dark"] .wgx .x-visit.st-in_progress { background: rgba(183,198,195,.12); border-left-color: #B7C6C3; } /* tables read as cards on phones, and on tablets whenever a table is wider than its panel (app.js decides and adds the column names) */ .wgx table.x-cardmode, .wgx table.x-cardmode tbody { display: block; width: 100% !important; min-width: 0 !important; } .wgx table.x-cardmode td { white-space: normal !important; } .wgx table.x-cardmode thead, .wgx table.x-cardmode tr.x-hrow { display: none; } .wgx table.x-cardmode tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px; border-bottom: 1px solid var(--x-panel-line, var(--x-line2)); } .wgx table.x-cardmode tr:last-child { border-bottom: 0; } .wgx table.x-cardmode td { display: block; padding: 3px 0; border: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; } .wgx table.x-cardmode td::before { content: attr(data-label); float: left; max-width: 45%; margin-right: 12px; text-align: left; color: var(--x-muted); font: 700 12px/1.7 var(--x-display, sans-serif); letter-spacing: .05em; text-transform: uppercase; } .wgx table.x-cardmode td::after { content: ""; display: table; clear: both; } .wgx table.x-cardmode td.x-lead-cell .x-code, .wgx table.x-cardmode td.x-lead-cell .x-pill { margin-left: 8px; } .wgx table.x-cardmode td:not([data-label])::before, .wgx table.x-cardmode td[data-label=""]::before { content: none; } .wgx table.x-cardmode td.x-lead-cell { display: block; order: -1; text-align: left; font-size: 15px; padding-bottom: 4px; } .wgx table.x-cardmode td.x-lead-cell::before { content: none; } .wgx table.x-cardmode td.x-pick { position: absolute; right: 12px; top: 12px; padding: 0; } .wgx table.x-cardmode td.x-pick::before { content: none; } .wgx table.x-cardmode tr.has-pick { position: relative; padding-right: 44px; } .wgx table.x-cardmode td:empty { display: none; } .wgx table.x-cardmode td .x-actions { justify-content: flex-end; } .wgx .x-table-wrap:has(> table.x-cardmode), .wgx .wgs-table-wrap:has(> table.x-cardmode) { overflow-x: visible; } /* phones and tablets: one menu button, at the bottom (the tab bar's Menu); the top bar has no burger */ @media (max-width: 900px) { .wga-top .wga-burger { display: none !important; } body.wga { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } /* bottom tab bar */ .wga-tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #232826; border-top: 1px solid rgba(255,255,255,.08); padding-bottom: env(safe-area-inset-bottom); } .wga-tabbar a, .wga-tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 60px; margin: 0; padding: 0; border: 0; background: none; color: #C6C4BC; font: 700 11px/1 Rajdhani, sans-serif; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; text-decoration: none; } .wga-tabbar a:hover { text-decoration: none; color: #fff; } .wga-tabbar svg { width: 22px; height: 22px; } .wga-tabbar .on { color: #fff; box-shadow: inset 0 3px 0 #F94F02; background: rgba(255,255,255,.04); } .wga-tabbar i { position: absolute; top: 7px; left: calc(50% + 7px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 2px; background: #F94F02; color: #1A1D1C; font: 700 10px/17px "Inter Tight", sans-serif; font-style: normal; letter-spacing: 0; } html[data-theme="dark"] .wga-tabbar { background: #0E1210; border-top-color: rgba(232,230,223,.08); } } /* round 20: tab rows wrap onto a second line instead of scrolling past the edge of the page */ .wgx .x-tabs { flex-wrap: wrap; overflow: visible; row-gap: 2px; } @media (max-width: 640px) { .wgx .x-tabs { margin-left: 0; margin-right: 0; padding: 0; } } /* ================================================================ round 23: photos, network bar, offline */ .wgx .wgc-net { position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 18px; background: var(--x-primary-soft); color: var(--x-text); border-bottom: 1px solid var(--x-line); font-size: 14px; } .wgx .wgc-net.is-off { background: #2B2F2C; color: #E8E6DF; border-color: transparent; } .wgx .wgc-net.is-off a { color: #FFB38F; } .wgx .wgc-net.is-off .x-btn { background: transparent; color: #E8E6DF; border-color: rgba(232,230,223,.35); } .wgx .wgc-toast { position: sticky; top: 44px; z-index: 29; } .wgx .wgc-saved-page { max-width: 640px; margin: 8vh auto; padding: 0 16px; } .wgx .wgc-ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .wgx .wgc-ph { position: relative; margin: 0; min-width: 0; } .wgx .wgc-ph-open { display: block; width: 100%; padding: 0; border: 1px solid var(--x-line); background: var(--x-line2); cursor: zoom-in; overflow: hidden; } .wgx .wgc-ph-open img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; } .wgx .wgc-ph-open:hover img { transform: scale(1.03); } .wgx .wgc-ph figcaption { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; margin-top: 5px; font-size: 12px; line-height: 1.35; color: var(--x-muted); min-width: 0; } .wgx .wgc-ph figcaption span:last-child:not(.wgc-ph-tag) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .wgx .wgc-ph-tag { font: 700 10px/1.6 Rajdhani, sans-serif; letter-spacing: .12em; text-transform: uppercase; padding: 0 6px; background: var(--x-line2); color: var(--x-text); } .wgx .wgc-ph-tag.t-before { background: #F7E7D2; color: #7A3D00; } .wgx .wgc-ph-tag.t-after { background: #DFE5D6; color: #2F4524; } .wgx .wgc-ph-tag.t-testing { background: #E8E2F0; color: #4A3A63; } .wgx .wgc-ph-tag.t-issue { background: #F6E0DC; color: #8C1A0B; } .wgx .wgc-ph-pick { position: absolute; top: 6px; left: 6px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; background: rgba(255,255,255,.88); border: 1px solid var(--x-line); cursor: pointer; } .wgx .wgc-ph-pick input { width: 18px; height: 18px; margin: 0; } .wgx .wgc-ph.is-picked .wgc-ph-open { outline: 3px solid var(--x-accent); outline-offset: -3px; } .wgx .wgc-ph-group + .wgc-ph-group { margin-top: 18px; } .wgx .wgc-ph-group h3, .wgx .wgc-ph-day h2 { font: 700 13px/1 Rajdhani, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--x-muted); margin: 0 0 10px; } .wgx .wgc-ph-group h3 small { color: var(--x-faint); margin-left: 4px; } .wgx .wgc-ph-day { margin: 0 0 24px; } .wgx .wgc-ph-filter { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 12px 14px; margin-bottom: 14px; } .wgx .wgc-ph-filter input[type=search] { flex: 1 1 220px; min-width: 0; } .wgx .wgc-ph-filter label { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--x-muted); } .wgx .wgc-ph-bulk { position: sticky; top: 8px; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; margin-bottom: 14px; background: var(--x-surface); border: 1px solid var(--x-line); border-left: 4px solid var(--x-accent); box-shadow: 0 8px 24px rgba(0,0,0,.08); } .wgx .wgc-ph-bulk[hidden] { display: none; } .wgx .wgc-ph-bulk select, .wgx .wgc-ph-bulk input { width: auto; min-width: 0; } .wgx .wgc-photo-pick { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 12px; } .wgx .wgc-photo-pick label.x-btn { cursor: pointer; } .wgx .wgc-photo-prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; } .wgx .wgc-photo-prev:empty { display: none; } .wgx .wgc-photo-prev figure { position: relative; margin: 0; } .wgx .wgc-photo-prev img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--x-line); } .wgx .wgc-photo-prev button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border: 0; background: rgba(26,29,28,.75); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; } .wgx .wgc-photo-phase { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; } .wgx .wgc-photo-phase legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 6px; } .wgx .wgc-photo-phase label { cursor: pointer; } .wgx .wgc-photo-phase input { position: absolute; opacity: 0; pointer-events: none; } .wgx .wgc-photo-phase span { display: inline-block; padding: 7px 12px; border: 1px solid var(--x-line); background: var(--x-surface); font-size: 14px; } .wgx .wgc-photo-phase input:checked + span { background: var(--x-primary); border-color: var(--x-primary); color: #fff; } .wgx .wgc-photo-phase input:focus-visible + span { outline: 2px solid var(--x-accent); outline-offset: 2px; } .wgx .wgc-ph-view { width: min(1280px, 96vw); max-width: none; height: min(860px, 94vh); max-height: none; padding: 0; border: 0; background: #0C100E; color: #E8E6DF; display: none; grid-template-columns: minmax(0, 1fr) 300px; } .wgx .wgc-ph-view[open] { display: grid; } .wgx .wgc-ph-view::backdrop { background: rgba(5,7,6,.82); } .wgx .wgc-ph-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; } .wgx .wgc-ph-stage img { max-width: 100%; max-height: 100%; object-fit: contain; } .wgx .wgc-ph-nav, .wgx .wgc-ph-x { position: absolute; border: 0; background: rgba(12,16,14,.6); color: #fff; cursor: pointer; font-size: 30px; line-height: 1; width: 46px; height: 46px; } .wgx .wgc-ph-nav { top: 50%; transform: translateY(-50%); } .wgx .wgc-ph-nav.prev { left: 10px; } .wgx .wgc-ph-nav.next { right: 10px; } .wgx .wgc-ph-x { top: 10px; right: 10px; } .wgx .wgc-ph-side { overflow: auto; padding: 18px; background: #151B18; display: grid; gap: 12px; align-content: start; --x-text: #E8E6DF; --x-muted: #A3AA9F; --x-line: rgba(232,230,223,.16); --x-surface: #1C2420; } .wgx .wgc-ph-meta b { display: block; font-size: 16px; } .wgx .wgc-ph-meta small { color: #A3AA9F; } .wgx .wgc-ph-meta p { margin: 8px 0 4px; } .wgx .wgc-ph-meta a { color: #FFB38F; } .wgx .wgc-ph-side .wgs-field { margin-bottom: 8px; } .wgx .wgc-ph-side .wgs-field span { color: #A3AA9F; } .wgx .wgc-ph-side input, .wgx .wgc-ph-side select { background: #0C100E; color: #E8E6DF; border-color: rgba(232,230,223,.2); } .wgx .wgc-ph-side .x-btn:not(.x-btn-primary) { background: transparent; color: #E8E6DF; border-color: rgba(232,230,223,.3); } @media (max-width: 860px) { .wgx .wgc-ph-view { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; width: 100vw; height: 100dvh; } .wgx .wgc-ph-side { max-height: 42dvh; } } @media (max-width: 520px) { .wgx .wgc-ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } html[data-theme="dark"] .wgx .wgc-ph-tag.t-before { background: rgba(249,79,2,.16); color: #FFB38F; } html[data-theme="dark"] .wgx .wgc-ph-tag.t-after { background: rgba(127,160,104,.2); color: #BFD3AE; } html[data-theme="dark"] .wgx .wgc-ph-tag.t-testing { background: rgba(160,140,200,.18); color: #CFC3E6; } html[data-theme="dark"] .wgx .wgc-ph-tag.t-issue { background: rgba(184,31,13,.22); color: #F2A79C; } html[data-theme="dark"] .wgx .wgc-ph-pick { background: rgba(21,27,24,.9); } html[data-theme="dark"] .wgx .wgc-net:not(.is-off) { background: rgba(127,160,104,.14); } /* ================================================================ round 25: client portal, friendlier */ .wgp2 .p-head p { max-width: 60ch; } .wgp2 .p-id { gap: 2px 10px; padding: 10px 14px; } .wgp2 .p-id small { opacity: .8; } .wgp2 .p-quick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 4px; } .wgp2 .p-quick a { display: grid; gap: 4px; align-content: start; padding: 16px 16px 18px; border: 1px solid var(--x-panel-line, var(--x-line)); background: var(--x-surface); color: var(--x-text); text-decoration: none; transition: border-color .2s, transform .2s; } .wgp2 .p-quick a:hover { border-color: #F94F02; transform: translateY(-2px); } .wgp2 .p-quick svg { width: 26px; height: 26px; color: #F94F02; margin-bottom: 6px; } .wgp2 .p-quick b { font: 700 16px/1.15 var(--x-display, Rajdhani, sans-serif); text-transform: uppercase; letter-spacing: .04em; } .wgp2 .p-quick small { color: var(--x-muted); font-size: 13px; line-height: 1.35; } @media (max-width: 860px) { .wgp2 .p-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .wgp2 .p-action.is-resume { border-left-color: #F94F02; } /* more room between boxes in forms, and around the card footers */ .wgp2 .wgc-grid { gap: 26px 18px; } .wgp2 .wgc-form .wgs-field { margin-bottom: 0; } .wgp2 .p-email { margin: 22px 0 18px; line-height: 1.6; } .wgp2 fieldset legend { margin-bottom: 8px; } .wgp2 .x-card-f { padding: 16px 18px; line-height: 1.7; } /* small text-style edit / remove buttons inside lists */ .wgx .x-linkbtn { border: 0; background: none; padding: 0 2px; font: inherit; font-size: 12px; color: var(--x-primary); text-decoration: underline; cursor: pointer; } .wgx form:has(> .x-linkbtn) { display: inline; } /* portal: progress of the current job */ .wgp2 .p-progress { margin: 6px 0 16px; padding: 18px 20px 20px; border: 1px solid var(--x-panel-line, var(--x-line)); background: var(--x-surface); } .wgp2 .p-progress-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; margin-bottom: 16px; } .wgp2 .p-progress-h b { font: 700 17px/1.1 var(--x-display, Rajdhani, sans-serif); text-transform: uppercase; letter-spacing: .04em; } .wgp2 .p-progress-h span { color: var(--x-muted); font-size: 14px; } .wgp2 .p-progress ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; } .wgp2 .p-progress ol::before { content: ""; position: absolute; left: 9px; right: 9px; top: 8px; height: 2px; background: var(--x-line); } .wgp2 .p-progress li { position: relative; display: grid; gap: 8px; justify-items: start; font-size: 14px; color: var(--x-muted); padding-right: 8px; } .wgp2 .p-progress li i { position: relative; z-index: 1; width: 18px; height: 18px; border: 2px solid var(--x-line); background: var(--x-surface); } .wgp2 .p-progress li.is-done i { background: #4C5F3D; border-color: #4C5F3D; } .wgp2 .p-progress li.is-now i { background: #F94F02; border-color: #F94F02; } .wgp2 .p-progress li.is-done, .wgp2 .p-progress li.is-now { color: var(--x-text); font-weight: 600; } @media (max-width: 640px) { .wgp2 .p-progress ol { grid-template-columns: minmax(0, 1fr); gap: 14px; } .wgp2 .p-progress ol::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; } .wgp2 .p-progress li { grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 12px; } } /* portal: where a result sits on the scale */ .wgp2 .p-scale { margin: 10px 0 4px; max-width: 360px; } .wgp2 .p-scale-bar { position: relative; height: 8px; background: linear-gradient(90deg, #7FA068 0 25%, #D9A441 25% 50%, #E0663A 50%); } .wgp2 .p-scale-bar span { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(0,0,0,.35); } .wgp2 .p-scale-bar i { position: absolute; top: -6px; width: 4px; height: 20px; margin-left: -2px; background: #1A1D1C; box-shadow: 0 0 0 2px var(--x-surface); } .wgp2 .p-scale-k { position: relative; height: 18px; font-size: 11px; color: var(--x-muted); } .wgp2 .p-scale-k small { position: absolute; top: 4px; transform: translateX(-50%); } .wgp2 .p-scale-k small:first-child { left: 0; transform: none; } .wgp2 .p-scale-k small:last-child { transform: translateX(-100%); } html[data-theme="dark"] .wgp2 .p-scale-bar i { background: #E8E6DF; } /* the sidebar brand is the logo itself, not typed text */ .wga-brand { display: grid; gap: 6px; } .wga-brand .wga-logo { display: flex; align-items: center; gap: 9px; } .wga-brand .wga-logo img { display: block; height: auto; } .wga-brand .wga-logo img:first-child { width: 22px; } .wga-brand .wga-logo img:last-child { width: 118px; } .wga-brand > small { font: 600 11px/1 Rajdhani, sans-serif; letter-spacing: .2em; text-transform: uppercase; opacity: .7; } /* portal: what each section is for, and the first-visit guide */ .wgp2 .p-about { margin: -8px 0 18px; color: var(--x-muted); font-size: 15px; max-width: 70ch; } .wgp2 .p-welcome { margin: 0 0 18px; padding: 20px; border: 1px solid var(--x-panel-line, var(--x-line)); border-top: 4px solid #F94F02; background: var(--x-surface); } .wgp2 .p-welcome-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 14px; } .wgp2 .p-welcome-h b { font: 700 20px/1.1 var(--x-display, Rajdhani, sans-serif); text-transform: uppercase; letter-spacing: .03em; } .wgp2 .p-welcome-h span { color: var(--x-muted); } .wgp2 .p-welcome ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .wgp2 .p-welcome li a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 12px; border: 1px solid var(--x-line); color: var(--x-text); text-decoration: none; height: 100%; box-sizing: border-box; } .wgp2 .p-welcome li a:hover { border-color: #F94F02; } .wgp2 .p-welcome li i { grid-row: span 2; display: grid; place-items: center; width: 28px; height: 28px; background: #4C5F3D; color: #fff; font: 700 15px/1 Rajdhani, sans-serif; font-style: normal; } .wgp2 .p-welcome li b { font-weight: 700; } .wgp2 .p-welcome li small { color: var(--x-muted); font-size: 13px; line-height: 1.4; } .wgp2 .p-welcome-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; color: var(--x-muted); } .wgp2 .p-welcome-f form { margin: 0; } @media (max-width: 860px) { .wgp2 .p-welcome ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .wgp2 .p-welcome ol { grid-template-columns: minmax(0, 1fr); } } /* reference codes copy on click */ .wgx .x-code { cursor: copy; } .wgx .x-code:hover { text-decoration: underline dotted; text-underline-offset: 3px; } .x-copied { position: fixed; z-index: 9999; padding: 6px 10px; background: #1A1D1C; color: #E8E6DF; font: 600 12px/1.2 'Inter Tight', sans-serif; border-left: 3px solid #F94F02; opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; pointer-events: none; } .x-copied.on { opacity: 1; transform: none; } /* no browser-default blue anywhere in the Field Office or portal */ .wgx input[type=checkbox], .wgx input[type=radio], .wgx input[type=range], .wgx progress, .wgx meter { accent-color: var(--x-primary, #4C5F3D); } .wgx :focus-visible { outline: 2px solid #F94F02; outline-offset: 2px; } .wgx input:focus-visible, .wgx select:focus-visible, .wgx textarea:focus-visible { outline: 0; border-color: var(--x-primary, #4C5F3D); box-shadow: 0 0 0 3px rgba(76,95,61,.18); } .wgx ::selection { background: rgba(249,79,2,.22); color: inherit; } .wgx input[type=date]::-webkit-calendar-picker-indicator, .wgx input[type=time]::-webkit-calendar-picker-indicator { filter: grayscale(1); } html[data-theme="dark"] .wgx :focus-visible { outline-color: #FF8A4D; } /* ================================================================ portal: "Portal" header, menu below it, windows Site style (glass panels, square edges, Rajdhani). Orange only where something needs attention: money due, alerts. */ .wgp2 { --p-line: var(--glass-edge, rgba(26,29,28,.16)); --p-rule: var(--line, rgba(26,29,28,.16)); --p-ink: var(--ink, #1A1D1C); --p-sub: var(--sub, #4A524C); --p-olive: var(--olive, #4C5F3D); } .wgp2 .p-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "top top" "side main"; gap: 24px; align-items: start; } .wgp2 .acr { border-radius: 0; } /* where you are, who you are, and your Client ID */ .wgp2 .p-top { grid-area: top; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; padding-bottom: 22px; border-bottom: 1px solid var(--p-rule); } .wgp2 .p-top-t { display: grid; gap: 10px; min-width: 0; } .wgp2 .p-here { margin: 0; font: 700 clamp(52px, 7.4vw, 104px)/.86 var(--display, Rajdhani, sans-serif); text-transform: uppercase; letter-spacing: .005em; color: var(--p-ink); } .wgp2 .p-hi { margin: 0; font: 600 21px/1.3 var(--body, inherit); color: var(--p-ink); } .wgp2 .p-hi span { font-weight: 400; color: var(--p-sub); font-size: 16px; } .wgp2 .p-cid { display: grid; grid-template-columns: auto auto; grid-template-areas: "l l" "c b"; align-items: center; gap: 6px 18px; padding: 14px 16px 14px 20px; border: 1px solid var(--p-line); background-color: var(--glass, rgba(240,238,231,.46)); background-image: var(--grain, none); box-shadow: inset 0 1px 0 var(--glass-hl, #fff), var(--glass-shadow, none); color: var(--p-ink); cursor: copy; text-align: left; font: inherit; transition: border-color .15s, background-color .15s; } .wgp2 .p-cid small { grid-area: l; font: 700 12px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .2em; text-transform: uppercase; color: var(--p-sub); } .wgp2 .p-cid b { grid-area: c; font: 700 34px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .08em; } .wgp2 .p-cid-do { grid-area: b; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border: 1px solid var(--p-olive); color: var(--p-olive); font: 700 13px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .14em; text-transform: uppercase; transition: background .15s, color .15s; } .wgp2 .p-cid-do svg { width: 17px; height: 17px; } .wgp2 .p-cid-do i { font-style: normal; } .wgp2 .p-cid:hover { border-color: var(--p-olive); } .wgp2 .p-cid:hover .p-cid-do, .wgp2 .p-cid.is-copied .p-cid-do { background: var(--p-olive); color: #fff; } /* menu, below the header */ .wgp2 .p-side { grid-area: side; position: sticky; top: calc(var(--strip-h, 34px) + var(--bar-h, 64px) + 30px); display: grid; gap: 12px; padding: 12px; } .wgp2 .p-side .p-prop { min-width: 0; } .wgp2 .p-side .p-prop select { width: 100%; min-height: 40px; border-radius: 0; } .wgp2 .p-menu { display: grid; gap: 2px; } .wgp2 .p-menu a { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 12px; border-radius: 0; color: var(--p-ink); font: 700 14px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: background .15s, color .15s; } .wgp2 .p-menu a svg, .wgp2 .p-side-f svg { width: 19px; height: 19px; flex: none; color: var(--birch, #657A50); } .wgp2 .p-menu a span { flex: 1; } .wgp2 .p-menu a:hover { background: rgba(76,95,61,.1); text-decoration: none; } .wgp2 .p-menu a.on { background: var(--p-olive); color: #fff; box-shadow: none; } .wgp2 .p-menu a.on svg { color: #fff; } .wgp2 .p-menu a::before, .wgp2 .p-menu a.on::before { content: none; } .wgp2 .p-menu em { font-style: normal; font: 700 12px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .04em; padding: 4px 7px; background: rgba(76,95,61,.12); color: var(--p-sub); text-transform: none; } .wgp2 .p-menu em.is-hot { background: rgba(76,95,61,.16); color: var(--p-ink); } .wgp2 .p-menu a[href*="tab=billing"] em.is-hot { background: var(--thermal, #F94F02); color: #fff; } .wgp2 .p-menu a.on em, .wgp2 .p-menu a.on em.is-hot { background: rgba(255,255,255,.2); color: #fff; } .wgp2 .p-side-f { display: grid; padding-top: 10px; border-top: 1px solid var(--p-rule); } .wgp2 .p-side-f a { display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 0 12px; color: var(--p-sub); font-size: 14px; font-weight: 600; text-decoration: none; } .wgp2 .p-side-f a:hover { color: var(--p-ink); background: rgba(76,95,61,.08); } /* the section */ .wgp2 .p-main { grid-area: main; min-width: 0; } .wgp2 .p-title { display: grid; gap: 6px; margin: 0 0 18px; } .wgp2 .p-title h2 { margin: 0; font: 700 30px/1 var(--display, Rajdhani, sans-serif); text-transform: uppercase; letter-spacing: .02em; color: var(--p-ink); } .wgp2 .p-title p { margin: 0; color: var(--p-sub); font-size: 15.5px; max-width: 64ch; } .wgp2 .p-solo { max-width: 760px; margin: 0 auto; } .wgp2 .p-solo .p-title h1 { margin: 0; font: 700 clamp(32px, 4vw, 48px)/1 var(--display, Rajdhani, sans-serif); text-transform: uppercase; } /* windows */ .wgp2 .p-wins { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; } .wgp2 .p-win { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; min-width: 0; } .wgp2 .p-w4 { grid-column: span 4; } .wgp2 .p-w6 { grid-column: span 6; } .wgp2 .p-w8 { grid-column: span 8; } .wgp2 .p-w12 { grid-column: 1 / -1; } .wgp2 .p-win > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wgp2 .p-win h3.lbl { margin: 0; font-size: 12px; letter-spacing: .2em; color: var(--p-sub); } .wgp2 .p-win p { margin: 0; color: var(--p-sub); line-height: 1.5; font-size: 15px; } .wgp2 .p-win p b { color: var(--p-ink); } .wgp2 .p-big { font: 700 40px/1 var(--display, Rajdhani, sans-serif); color: var(--p-ink); letter-spacing: .01em; } .wgp2 .p-big small { font-size: 16px; color: var(--p-sub); } .wgp2 .p-big-d { font-size: 28px; text-transform: uppercase; } .wgp2 .p-quiet { color: var(--p-sub); } .wgp2 .p-where { display: flex; align-items: center; gap: 6px; } .wgp2 .p-where svg { width: 15px; height: 15px; flex: none; color: var(--birch, #657A50); } .wgp2 .p-win-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: auto; padding-top: 12px; } .wgp2 .p-win .x-btn { min-height: 40px; border-radius: 0; } .wgp2 .p-more { color: var(--p-ink) !important; font: 700 13px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important; border-bottom: 1px solid var(--p-olive); padding-bottom: 3px; } .wgp2 .p-more:hover { color: var(--p-olive) !important; border-bottom-width: 2px; } .wgp2 .p-flag { padding: 4px 8px; background: var(--thermal, #F94F02); color: #fff; font: 700 11.5px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .14em; text-transform: uppercase; } .wgp2 .p-win.is-due { box-shadow: inset 0 3px 0 var(--thermal, #F94F02), inset 0 1px 0 var(--glass-hl, #fff), var(--glass-shadow, none); } .wgp2 .p-win.is-high { box-shadow: inset 0 3px 0 #B54708, inset 0 1px 0 var(--glass-hl, #fff), var(--glass-shadow, none); } .wgp2 .p-win .p-progress { margin: 4px 0 0; padding: 0; border: 0; background: none; box-shadow: none; } .wgp2 .p-win .p-scale { margin: 6px 0 8px; } .wgp2 .p-mini { list-style: none; margin: 0; padding: 0; display: grid; } .wgp2 .p-mini li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--p-rule); font-size: 15px; } .wgp2 .p-mini li:first-child { padding-top: 2px; } .wgp2 .p-mini li:last-child { border-bottom: 0; } .wgp2 .p-mini li b { font-weight: 600; min-width: 0; color: var(--p-ink); } .wgp2 .p-mini li small { color: var(--p-sub); white-space: nowrap; } .wgp2 .p-mini li.is-new b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; background: var(--p-olive); vertical-align: 1px; } /* section pages: cards are the same glass windows */ .wgp2 .p-main .x-card, .wgp2 .p-main .p-action, .wgp2 .p-main .p-welcome { position: relative; border-radius: 0; background-color: var(--glass, rgba(240,238,231,.46)); background-image: var(--grain, none); border: 1px solid var(--p-line); box-shadow: inset 0 1px 0 var(--glass-hl, #fff), var(--glass-shadow, none); -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6); margin-bottom: 16px; } .wgp2 .p-main .x-card::before { content: none; } .wgp2 .p-main .x-card .x-btn, .wgp2 .p-main .p-action .x-btn, .wgp2 .p-main input, .wgp2 .p-main select, .wgp2 .p-main textarea { border-radius: 0; } .wgp2 .p-main .p-action { border-left: 3px solid var(--p-olive); } .wgp2 .p-main .p-action.is-due { border-left-color: var(--thermal, #F94F02); } .wgp2 .p-main .p-action.is-resume { border-left-color: var(--p-olive); } .wgp2 .p-main .p-welcome { border-top: 1px solid var(--p-line); } .wgp2 .p-main .p-welcome li i { box-shadow: none; } .wgp2 .p-foot { margin: 24px 0 0; padding-top: 12px; border-top: 1px solid var(--p-rule); color: var(--p-sub); font-size: 13px; line-height: 1.6; } .wgp2 .p-foot a { color: var(--p-ink); text-decoration: underline; text-underline-offset: 3px; } .wgp2 .p-foot a:hover { color: var(--p-olive); } .wgp2 .p-foot span { display: inline-block; margin-left: 4px; } .wgp2 .p-help { display: none; } @media (max-width: 1180px) { .wgp2 .p-w4 { grid-column: span 6; } .wgp2 .p-wins > .p-w4:nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 900px) { .wgp2 .p-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "side" "main"; gap: 14px; } .wgp2 .p-top { padding-bottom: 16px; gap: 14px; } .wgp2 .p-cid { width: 100%; grid-template-columns: minmax(0, 1fr) auto; } .wgp2 .p-cid b { font-size: 30px; } .wgp2 .p-side { position: static; padding: 8px; } .wgp2 .p-menu { display: flex; gap: 6px; overflow-x: auto; margin: 0 -8px; padding: 0 8px 2px; scrollbar-width: none; } .wgp2 .p-menu::-webkit-scrollbar { display: none; } .wgp2 .p-menu a { flex: none; min-height: 40px; padding: 0 12px; gap: 7px; font-size: 13px; border: 1px solid var(--p-rule); } .wgp2 .p-menu a svg { width: 17px; height: 17px; } .wgp2 .p-side-f { display: none; } .wgp2 .p-wins { gap: 12px; } .wgp2 .p-wins > .p-win:nth-child(n) { grid-column: 1 / -1; } .wgp2 .p-win { padding: 18px; } .wgp2 .p-big { font-size: 34px; } .wgp2 .p-title h2 { font-size: 26px; } } @media print { .wgp2 .p-side, .wgp2 .p-foot, .wgp2 .p-cid { display: none !important; } .wgp2 .p-shell { display: block; } } html[data-theme="dark"] .wgp2 { --p-olive: #9BAF8F; } html[data-theme="dark"] .wgp2 .p-menu a.on { background: var(--olive, #4C5F3D); } html[data-theme="dark"] .wgp2 .p-menu a:hover, html[data-theme="dark"] .wgp2 .p-side-f a:hover { background: rgba(232,230,223,.06); } html[data-theme="dark"] .wgp2 .p-menu a svg, html[data-theme="dark"] .wgp2 .p-side-f svg, html[data-theme="dark"] .wgp2 .p-where svg { color: var(--mint, #9BAF8F); } html[data-theme="dark"] .wgp2 .p-menu a.on svg { color: #fff; } html[data-theme="dark"] .wgp2 .p-menu em { background: rgba(232,230,223,.08); } html[data-theme="dark"] .wgp2 .p-cid:hover .p-cid-do, html[data-theme="dark"] .wgp2 .p-cid.is-copied .p-cid-do { background: var(--olive, #4C5F3D); border-color: var(--olive, #4C5F3D); color: #fff; } /* round 32: one type size for the three top windows; client since sits in the Overview header */ .wgp2 .p-big, .wgp2 .p-big-d { font: 700 30px/1.05 var(--display, Rajdhani, sans-serif); letter-spacing: .01em; text-transform: uppercase; } .wgp2 .p-win.is-due { box-shadow: inset 0 1px 0 var(--glass-hl, #fff), var(--glass-shadow, none); } .wgp2 .p-win.is-due .p-big { color: var(--p-ink); } .wgp2 .p-since { justify-self: start; margin-top: 4px; padding: 6px 10px; border: 1px solid var(--p-rule); color: var(--p-sub); font: 700 12px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .14em; text-transform: uppercase; } @media (max-width: 900px) { .wgp2 .p-big, .wgp2 .p-big-d { font-size: 28px; } } .wgp2 .p-wins-top { margin-bottom: 18px; } .wgp2 .p-aside { margin: 4px 0 0; color: var(--p-sub); font-size: 13.5px; } .wgp2 .p-aside a { color: var(--p-ink); text-decoration: underline; text-underline-offset: 3px; } .wgp2 .p-aside a:hover { color: var(--p-olive); } /* payment history timeline */ .wgp2 .p-tl-y { margin: 18px 0 6px; font: 700 13px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .2em; color: var(--p-sub); } .wgp2 .p-tl-y:first-child { margin-top: 0; } .wgp2 .p-tl ol { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 1px solid var(--p-rule); } .wgp2 .p-tl li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--p-rule); } .wgp2 .p-tl li:last-child { border-bottom: 0; } .wgp2 .p-tl li::before { content: ""; position: absolute; left: -23px; top: 18px; width: 11px; height: 11px; background: var(--p-sub); opacity: .55; } .wgp2 .p-tl li.is-pay::before { background: var(--p-olive); opacity: 1; } .wgp2 .p-tl time { color: var(--p-sub); font: 700 13px/1.4 var(--display, Rajdhani, sans-serif); letter-spacing: .1em; text-transform: uppercase; } .wgp2 .p-tl li b { display: block; color: var(--p-ink); font-weight: 600; } .wgp2 .p-tl li small { display: block; color: var(--p-sub); margin-top: 2px; } @media (max-width: 600px) { .wgp2 .p-tl li { grid-template-columns: minmax(0, 1fr) auto; } .wgp2 .p-tl time { grid-column: 1 / -1; } } @media (max-width: 900px) { .wgp2 .p-wins-top { margin-bottom: 12px; } } /* coordinates */ .wgx .wgc-coords-in { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 10px; } .wgx .wgc-coords-g { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; } .wgx .wgc-coords-g input { font-variant-numeric: tabular-nums; letter-spacing: .02em; } .wgx .wgc-coords-g input.is-bad { border-color: #B42318; } .wgx .wgc-coords-g .x-btn { min-height: 42px; } .wgx .wgc-coords-note { grid-column: 1 / -1; margin: 0; font-size: 13px; } .wgx .wgc-coords { white-space: nowrap; } .wgx .wgc-sub { display: block; margin: 6px 0 8px; font: 700 12px/1 Rajdhani, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--x-muted); } @media (max-width: 560px) { .wgx .wgc-coords-in { grid-template-columns: minmax(0, 1fr); } } /* ================================================================ no browser blue anywhere in the Field Office */ /* the clear (×) button in search boxes */ .wgx input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; margin-left: 6px; cursor: pointer; background: var(--x-muted, #626B5F); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; } .wgx input[type=search]::-webkit-search-cancel-button:hover { background: var(--x-accent, #F94F02); } /* browser autofill tint */ .wgx input:-webkit-autofill, .wgx input:-webkit-autofill:hover, .wgx input:-webkit-autofill:focus, .wgx textarea:-webkit-autofill, .wgx select:-webkit-autofill { -webkit-text-fill-color: var(--x-text, #1F241F); -webkit-box-shadow: 0 0 0 1000px var(--x-surface, #FBFAF7) inset; caret-color: var(--x-text, #1F241F); transition: background-color 99999s; } /* tap flash on phones and tablets */ .wgx, .wgx a, .wgx button, .wgx label, .wgx summary { -webkit-tap-highlight-color: rgba(76, 95, 61, .16); } .wgx input, .wgx select, .wgx textarea, .wgx progress { accent-color: var(--x-primary, #4C5F3D); } /* Google Maps: its keyboard-focus frame is blue */ .wgx .gm-style iframe + div { border-color: var(--x-accent, #F94F02) !important; } .wgx .gm-style :focus-visible { outline: 2px solid var(--x-accent, #F94F02) !important; outline-offset: -2px; } /* open dropdown lists: styled where the browser allows it (otherwise the system draws the highlight) */ @supports (appearance: base-select) { .wgx select, .wgx select::picker(select) { appearance: base-select; } .wgx select { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; } .wgx select::picker-icon { color: var(--x-muted, #626B5F); } .wgx select::picker(select) { margin-top: 4px; padding: 4px 0; border: 1px solid var(--x-line, #E1E4DB); border-radius: 2px; background: var(--x-surface, #fff); color: var(--x-text, #1F241F); box-shadow: 0 10px 28px rgba(20, 30, 15, .16); } .wgx select option { padding: 9px 14px; font: inherit; } .wgx select option::checkmark { display: none; } .wgx select option:hover, .wgx select option:focus-visible { background: var(--x-primary-soft, #EAF0E4); outline: 0; } .wgx select option:checked { background: var(--x-primary, #3F5B30); color: #fff; } /* dark.css gives every option a dark background; these must outrank it or the chosen option reads dark on dark */ html[data-theme="dark"] .wgx select option:hover, html[data-theme="dark"] .wgx select option:focus-visible { background: rgba(155,175,143,.18); color: #E8E6DF; } html[data-theme="dark"] .wgx select option:checked { background: #9BAF8F; color: #0C100E; } } /* ================================================================ portal lists you can open (portal-views.php) */ .wgp2 .p-rows { display: grid; } .wgp2 .p-row { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--p-rule); } .wgp2 .p-row:last-child { border-bottom: 0; } .wgp2 .p-row-a { flex: 1; min-width: 0; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 18px; align-items: center; gap: 4px 14px; padding: 14px 18px; color: var(--p-ink); text-decoration: none !important; transition: background .15s; } .wgp2 a.p-row-a:hover { background: rgba(76, 95, 61, .07); } .wgp2 a.p-row-a:hover .p-row-go { color: var(--p-olive); translate: 2px 0; } .wgp2 .p-row-i { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--p-rule); color: var(--p-olive); } .wgp2 .p-row-i svg { width: 19px; height: 19px; } .wgp2 .p-row-t { display: grid; gap: 3px; min-width: 0; } .wgp2 .p-row-t b { font-weight: 600; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; } .wgp2 .p-row-t small { color: var(--p-sub); font-size: 13.5px; line-height: 1.4; } .wgp2 .p-row-body { color: var(--p-ink); font-size: 14px; line-height: 1.5; margin-top: 4px; } .wgp2 .p-row-s { display: grid; justify-items: end; gap: 4px; text-align: right; max-width: 260px; } .wgp2 .p-row-s small { color: var(--p-sub); font-size: 12.5px; line-height: 1.35; } .wgp2 .p-row-go { width: 18px; height: 18px; color: var(--p-sub); transition: translate .15s, color .15s; } .wgp2 .p-row-go svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wgp2 .p-row.is-static .p-row-a { grid-template-columns: 36px minmax(0, 1fr) auto; } .wgp2 .p-row.is-new .p-row-t b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; background: var(--p-olive); vertical-align: 2px; } .wgp2 .p-row-x { align-self: center; margin: 0 18px 0 -4px; flex: none; } @media (max-width: 640px) { .wgp2 .p-row { flex-wrap: wrap; } .wgp2 .p-row-a { grid-template-columns: 32px minmax(0, 1fr) 16px; padding: 13px 14px; } .wgp2 .p-row.is-static .p-row-a { grid-template-columns: 32px minmax(0, 1fr); } .wgp2 .p-row-i { width: 32px; height: 32px; } .wgp2 .p-row-s { grid-column: 2; grid-row: 2; justify-items: start; text-align: left; max-width: none; } .wgp2 .p-row-go { grid-column: 3; grid-row: 1 / span 2; } .wgp2 .p-row-x { margin: 0 14px 12px 60px; } } /* an item's own page */ .wgp2 .p-dhead { display: grid; gap: 6px; margin: 0 0 16px; } .wgp2 .p-back { display: inline-flex; align-items: center; gap: 4px; justify-self: start; margin-bottom: 6px; padding: 6px 10px 6px 6px; border: 1px solid var(--p-rule); color: var(--p-ink) !important; font: 700 12.5px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important; } .wgp2 .p-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .wgp2 .p-back:hover { border-color: var(--p-olive); color: var(--p-olive) !important; } .wgp2 .p-kind { color: var(--p-sub); font: 700 12px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .18em; text-transform: uppercase; } .wgp2 .p-dhead h3 { margin: 0; font: 700 clamp(24px, 3vw, 32px)/1.05 var(--display, Rajdhani, sans-serif); text-transform: uppercase; letter-spacing: .01em; color: var(--p-ink); } .wgp2 .p-dpill { margin-top: 2px; } .wgp2 .p-dhead p { margin: 0; color: var(--p-sub); } .wgp2 .p-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 22px; margin: 0; } .wgp2 .p-facts > div { min-width: 0; } .wgp2 .p-facts dt { color: var(--p-sub); font: 700 11.5px/1.2 var(--display, Rajdhani, sans-serif); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; } .wgp2 .p-facts dd { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; } .wgp2 .p-steps { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); position: relative; } .wgp2 .p-steps::before { content: ""; position: absolute; left: 9px; right: 9px; top: 8px; height: 2px; background: var(--p-rule); } .wgp2 .p-steps li { position: relative; display: grid; gap: 8px; justify-items: start; padding-right: 8px; color: var(--p-sub); font-size: 14px; } .wgp2 .p-steps li i { position: relative; z-index: 1; width: 18px; height: 18px; border: 2px solid var(--p-rule); background: var(--x-surface, #fff); } .wgp2 .p-steps li.is-done i { background: var(--p-olive); border-color: var(--p-olive); } .wgp2 .p-steps li.is-now i { box-shadow: 0 0 0 4px rgba(76, 95, 61, .2); } .wgp2 .p-steps li.is-done, .wgp2 .p-steps li.is-now { color: var(--p-ink); font-weight: 600; } @media (max-width: 640px) { .wgp2 .p-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; } .wgp2 .p-steps::before { left: 8px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; } .wgp2 .p-steps li { grid-template-columns: 18px minmax(0, 1fr); align-items: center; gap: 12px; } } .wgp2 .p-now { margin: 0; font-size: 16px; line-height: 1.5; color: var(--p-ink); } .wgp2 .p-links { margin-top: 14px; flex-wrap: wrap; } .wgp2 .p-small { font-size: 13px; margin: 10px 0 0; } .wgp2 .p-when { display: grid; gap: 4px; margin-bottom: 14px; } .wgp2 .p-when b { font: 700 26px/1.05 var(--display, Rajdhani, sans-serif); text-transform: uppercase; } .wgp2 .p-when span { font-size: 16px; font-weight: 600; color: var(--p-olive); } .wgp2 .p-result-big { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; } .wgp2 .p-result-big b { font: 700 54px/1 var(--display, Rajdhani, sans-serif); } .wgp2 .p-result-big span { color: var(--p-sub); font-weight: 600; } .wgp2 .p-prose { line-height: 1.6; } .wgp2 .p-prose ul { margin: 8px 0 0; padding-left: 20px; } .wgp2 .p-prose li { margin: 4px 0; } .wgp2 .p-ans { border-top: 1px solid var(--p-rule); } .wgp2 .p-ans:first-child { border-top: 0; } .wgp2 .p-ans summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; list-style: none; font: 700 14px/1.2 var(--display, Rajdhani, sans-serif); letter-spacing: .1em; text-transform: uppercase; } .wgp2 .p-ans summary::-webkit-details-marker { display: none; } .wgp2 .p-ans summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--p-sub); border-bottom: 2px solid var(--p-sub); rotate: 45deg; transition: rotate .2s; } .wgp2 .p-ans[open] summary::after { rotate: -135deg; } .wgp2 .p-ans summary small { padding: 2px 7px; border: 1px solid var(--p-rule); color: var(--p-sub); font-size: 11px; letter-spacing: .06em; } .wgp2 .p-ans .p-facts { padding: 2px 0 16px; } .wgp2 .p-thread { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; } .wgp2 .p-thread li { max-width: 88%; padding: 10px 14px; border: 1px solid var(--p-rule); } .wgp2 .p-thread li.is-you { justify-self: end; background: rgba(76, 95, 61, .08); } .wgp2 .p-thread li.is-them { justify-self: start; border-left: 3px solid var(--p-olive); } .wgp2 .p-thread small { color: var(--p-sub); font-size: 12px; } .wgp2 .p-thread p { margin: 4px 0 0; line-height: 1.5; } .wgp2 .p-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; } .wgp2 .x-two { align-items: start; } /* the welcome, as a notification you dismiss with Got it */ .wgp2 .p-note { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: start; gap: 6px 16px; margin: 0 0 18px; padding: 18px 18px 18px 16px; border: 1px solid var(--p-line); border-left: 4px solid var(--p-olive); background-color: var(--glass, rgba(240,238,231,.46)); box-shadow: inset 0 1px 0 var(--glass-hl, #fff), var(--glass-shadow, none); } .wgp2 .p-note-i { display: grid; place-items: center; width: 44px; height: 44px; background: var(--p-olive); color: #fff; } .wgp2 .p-note-i svg { width: 24px; height: 24px; } .wgp2 .p-note-b { display: grid; gap: 4px; min-width: 0; } .wgp2 .p-note-k { color: var(--p-olive); font: 700 11.5px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .18em; text-transform: uppercase; } .wgp2 .p-note-b > b { font: 700 21px/1.1 var(--display, Rajdhani, sans-serif); text-transform: uppercase; color: var(--p-ink); } .wgp2 .p-note-b p { margin: 2px 0 0; color: var(--p-sub); } .wgp2 .p-note-b ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; } .wgp2 .p-note-b li span { color: var(--p-sub); } .wgp2 .p-note-b li a { font-weight: 600; color: var(--p-ink); text-decoration: underline; text-underline-offset: 3px; } .wgp2 .p-note form { margin: 0; } .wgp2 .p-note-x { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .wgp2 .p-note-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } @media (max-width: 640px) { .wgp2 .p-note { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; } .wgp2 .p-note-i { width: 36px; height: 36px; } .wgp2 .p-note form { grid-column: 1 / -1; } .wgp2 .p-note-x { width: 100%; justify-content: center; } } html[data-theme="dark"] .wgp2 .p-note-i { background: var(--olive, #4C5F3D); } html[data-theme="dark"] .wgp2 a.p-row-a:hover { background: rgba(155, 175, 143, .08); } html[data-theme="dark"] .wgp2 .p-thread li.is-you { background: rgba(155, 175, 143, .1); } /* the Scan button in the Field Office top bar */ .wga .wga-scanbtn { display: inline-flex; align-items: center; gap: 7px; } .wga .wga-scanbtn svg { width: 18px; height: 18px; } @media (max-width: 640px) { .wga .wga-scanbtn span { display: none; } .wga .wga-scanbtn { padding: 0 10px; } } /* ================================================================ round 43: portal */ /* the count of updates still to look at, in amber */ .wgp2 .p-menu em.is-amber, .wgp2 .p-menu a.on em.is-amber { background: #F2A20C; color: #1A1D1C; } /* the short line under a heading: one line when there's room, an even break when it wraps */ .wgp2 .p-title p { max-width: none; text-wrap: balance; } /* the fine print sits at the bottom of the page, not straight under short content */ .wgp2 .p-main { align-self: stretch; display: flex; flex-direction: column; min-height: 780px; } .wgp2 .p-main > * { flex: none; } .wgp2 .p-main > .p-foot { margin-top: auto; padding-top: 14px; } @media (max-width: 900px) { .wgp2 .p-main { min-height: 560px; } } /* recommended account action: create a password */ .wgp2 .p-pwnote { align-items: center; border-left-color: #F2A20C; } .wgp2 .p-pwnote .p-note-i { background: #F2A20C; color: #1A1D1C; } .wgp2 .p-note-a { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } .wgp2 .p-note-a form { margin: 0; } @media (max-width: 760px) { .wgp2 .p-note-a { grid-column: 1 / -1; justify-content: flex-start; } } /* notifications: pick some, then acknowledge or mute; earlier ones fold away */ .wgp2 .p-notes-bar { position: sticky; top: calc(var(--strip-h, 34px) + var(--bar-h, 64px) + 6px); z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 16px; border-bottom: 1px solid var(--p-rule); background: rgba(240,238,231,.94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } html[data-theme="dark"] .wgp2 .p-notes-bar { background: rgba(26,29,28,.94); } .wgp2 .p-notes-all { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 600; color: var(--p-sub); font-size: 14px; cursor: pointer; } .wgp2 .p-notes-all input, .wgp2 .p-nrow input { width: 18px; height: 18px; accent-color: var(--p-olive); } .wgp2 .p-nrow { display: grid; grid-template-columns: 22px 34px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--p-rule); cursor: pointer; } .wgp2 .p-nrow:last-child { border-bottom: 0; } .wgp2 .p-nrow input { margin-top: 8px; } .wgp2 .p-nrow:has(input:checked) { background: rgba(242,162,12,.10); } .wgp2 .p-nrow .p-row-t { display: grid; gap: 2px; min-width: 0; } .wgp2 .p-nrow .p-row-t small { color: var(--p-sub); font-size: 13px; } .wgp2 .p-nrow .p-row-body { color: var(--p-sub); font-size: 14px; line-height: 1.5; margin-top: 4px; } .wgp2 .p-nrow .p-more { align-self: center; } .wgp2 .p-notes:not([data-notes]) .p-nrow { grid-template-columns: 34px minmax(0, 1fr) auto; cursor: default; } .wgp2 .p-earlier { margin: 0 0 18px; border: 1px solid var(--p-line); background-color: var(--glass, rgba(240,238,231,.46)); } .wgp2 .p-earlier > summary { cursor: pointer; padding: 13px 16px; font: 700 14px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--p-sub); } .wgp2 .p-earlier > summary small { margin-left: 6px; opacity: .7; } .wgp2 .p-earlier .p-mini { margin: 0; padding: 0 16px 12px; } .wgp2 .p-earlier .p-mini a { color: inherit; } .wgp2 .p-muted { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--p-sub); font-size: 13.5px; } .wgp2 .p-muted form { margin: 0; } .wgp2 .p-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--p-line); background: transparent; color: var(--p-ink); font: 600 13px/1 var(--body, inherit); cursor: pointer; } .wgp2 .p-chip i { font-style: normal; opacity: .6; } .wgp2 .p-chip:hover { border-color: var(--p-olive); } /* Support: the search field and its button share one height */ .wgp2 .p-search { align-items: end; } .wgp2 .p-search input, .wgp2 .p-search .x-btn { box-sizing: border-box; height: 52px; min-height: 52px; } .wgp2 .p-search .x-btn { padding-top: 0; padding-bottom: 0; } /* share codes, messages, odds and ends */ .wgp2 .p-copy { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; letter-spacing: .06em; color: inherit; cursor: copy; text-decoration: underline dotted; text-underline-offset: 4px; } .wgp2 .p-copy.is-copied::after { content: " · copied"; font-weight: 600; letter-spacing: 0; color: var(--p-olive); } .wgp2 .p-mail { line-height: 1.65; max-width: 72ch; overflow-wrap: anywhere; } .wgp2 .p-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--p-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .wgp2 .p-win.is-start { border-left: 3px solid var(--p-olive); } /* 2026-10-19: Bills & payments: Balance 2/3 + Recent payment 1/3 (stacked on phones); history opens under Open invoices */ @media (max-width: 1180px) and (min-width: 901px) { .wgp2 .p-wins-bill > .p-w8 { grid-column: span 7; } .wgp2 .p-wins-bill > .p-w4 { grid-column: span 5; } } .wgp2 .p-payhist { margin-top: 18px; } .wgp2 .p-payhist[hidden] { display: none; } /* ---------- Job checklists (crm-checklist.php) ---------- */ .wgc-cl-row { display: grid; grid-template-columns: minmax(0, 46%) 1fr; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(52,70,47,.12); } .wgc-cl-row:last-child { border-bottom: 0; } .wgc-cl-q { font-size: 14px; line-height: 1.4; } .wgc-cl-opts { display: flex; flex-wrap: wrap; gap: 6px 16px; } .wgc-cl-a .wgs-check { margin: 0; } .wgc-cl-a input[type=text] { width: 100%; } .wgc-cl-num input { width: 120px; } @media (max-width: 720px) { .wgc-cl-row { grid-template-columns: 1fr; gap: 6px; } } /* ---------------------------------------------------- Field Office look, Oct 2026: plain Calcite, frosted glass panels */ html[data-theme="light"] body.wga { background: #E8E6DF; } html[data-theme="light"] .wga-page { background: transparent; border: 0; } html[data-theme="light"] .wga-top { background: rgba(232,230,223,.92); } html[data-theme="light"] .wga-main .x-card { background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.30)); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%); border: 1px solid rgba(255,255,255,.75); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 26px rgba(26,29,28,.07); border-radius: 0; margin-bottom: 20px; } html[data-theme="light"] .wga-main .x-card-h { background: transparent; border-bottom: 1px solid rgba(76,95,61,.16); } html[data-theme="light"] .wga-main .x-card .x-card { box-shadow: none; margin-bottom: 12px; } .wga-main .x-card-h h2 { font-size: 15px; } /* record header band (job page): dark frosted green, status pill as tall as the title */ .wga-page > .x-head.x-band { padding: 22px 28px; background: linear-gradient(160deg, rgba(52,70,47,.95), rgba(35,40,38,.92)); align-items: flex-end; box-shadow: 0 10px 30px rgba(26,29,28,.16); } .wga-page > .x-head.x-band h1 { font-size: 36px; line-height: 38px; } .wga-page > .x-head.x-band .x-title-row { align-items: center; } .wga-page > .x-head.x-band .x-pill { height: 38px; padding: 0 14px; font-size: 14px; letter-spacing: .08em; background: #F94F02; color: #0F1111; } .wga-page > .x-head.x-band .x-code { color: #C6C4BC; font-size: 13px; } /* slim status indicators */ .wgx .x-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .wgx .x-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; font-size: 13px; color: var(--x-text, #1A1D1C); text-decoration: none; background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.3)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.75); } .wgx .x-chip:hover { text-decoration: none; border-color: #7F9470; } .wgx .x-chip i { width: 9px; height: 9px; flex: none; background: #4C5F3D; } .wgx .x-chip.t-due i { background: #F94F02; } .wgx .x-chip.t-look i, .wgx .x-look { background: #FC9100; box-shadow: 0 0 0 2px rgba(252,145,0,.28), 0 0 10px rgba(252,145,0,.85); } .wgx .x-chip span { color: #4C5F3D; } .wgx .x-chip b { font-weight: 600; } /* progress strip */ .wgx .x-steps { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; } .wgx .x-steps li { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .03em; color: #4A524D; } .wgx .x-steps i { height: 8px; background: rgba(255,255,255,.55); border: 1px solid rgba(76,95,61,.25); box-sizing: border-box; } .wgx .x-steps li.is-done { color: #4C5F3D; } .wgx .x-steps li.is-done i { background: #4C5F3D; border-color: #4C5F3D; } .wgx .x-steps li.is-now { color: #1A1D1C; font-weight: 700; } .wgx .x-steps li.is-now i { background: #F94F02; border-color: #F94F02; } @media (max-width: 640px) { .wgx .x-steps span { font-size: 10px; } } /* tabs inside a record */ .wgx .x-ptabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 2px solid #34462F; margin-bottom: 18px; scrollbar-width: thin; } .wgx .x-ptabs a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; white-space: nowrap; font: 700 15px/1 Rajdhani, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #34462F; background: rgba(255,255,255,.35); text-decoration: none; } .wgx .x-ptabs a:hover { background: rgba(255,255,255,.65); text-decoration: none; } .wgx .x-ptabs a.on { background: #34462F; color: #E8E6DF; } .wgx .x-ptabs a i { font: 600 10px/1 "Inter Tight", sans-serif; letter-spacing: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: #4C5F3D; color: #E8E6DF; font-style: normal; } .wgx .x-ptabs a.on i { background: #E8E6DF; color: #34462F; } .wgx .x-look { width: 8px; height: 8px; display: inline-block; } .wgx [data-ptabs-on] ~ .x-pane:not(.on) { display: none; } /* codes found in plain text are copyable too */ .wgx .x-code-t { cursor: copy; border-bottom: 1px dotted currentColor; } html[data-theme="dark"] .wgx .x-chip, html[data-theme="dark"] .wgx .x-ptabs a { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #DDDAD2; } html[data-theme="dark"] .wgx .x-chip span { color: #9BAF8F; } html[data-theme="dark"] .wgx .x-ptabs a.on { background: #4C5F3D; color: #E8E6DF; } html[data-theme="dark"] .wgx .x-steps li { color: #BBBAB3; } html[data-theme="dark"] .wgx .x-steps li:not(.is-done):not(.is-now) i { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); } /* the page you're on: a light block in the dark menu, in both themes */ .wga-side .wga-nav a.on, html[data-theme="dark"] .wga-side .wga-nav a.on { background: #DDDAD2; color: #1A1D1C; box-shadow: none; } .wga-side .wga-nav a.on svg, html[data-theme="dark"] .wga-side .wga-nav a.on svg { color: #4C5F3D; } /* phones: the record header, strip and tabs fit the screen */ @media (max-width: 700px) { .wga-page > .x-head.x-band { padding: 16px; } .wga-page > .x-head.x-band h1 { font-size: 24px; line-height: 28px; overflow-wrap: anywhere; } .wga-page > .x-head.x-band .x-pill { height: 28px; font-size: 12px; } .wga-page > .x-chips, .wga-page > .x-steps, .wga-page > .x-ptabs, .wga-page > .x-pane { margin-left: 12px; margin-right: 12px; min-width: 0; } .wgx .x-steps li span { display: none; } .wgx .x-steps li.is-now span { display: block; white-space: nowrap; } .wgx .x-pane { overflow-x: hidden; } .wgx .x-pane .x-split { display: block; } .wgx .x-pane .x-card { max-width: 100%; box-sizing: border-box; } } /* every page title uses the same dark frosted band as record pages */ .wga-page > .x-head { background: linear-gradient(160deg, rgba(52,70,47,.95), rgba(35,40,38,.92)); box-shadow: 0 10px 30px rgba(26,29,28,.16); } /* list-page tabs look like record tabs */ body.wga .x-tabs { gap: 2px; border: 0; border-bottom: 2px solid #34462F; box-shadow: none; margin-bottom: 18px; } body.wga .x-tabs a { min-height: 44px; padding: 0 16px; border: 0; margin: 0; background: rgba(255,255,255,.35); color: #34462F; font: 700 15px/1 Rajdhani, sans-serif; letter-spacing: .06em; text-transform: uppercase; } body.wga .x-tabs a:hover { background: rgba(255,255,255,.65); color: #34462F; } body.wga .x-tabs a.on { background: #34462F; color: #E8E6DF; border: 0; } body.wga .x-tabs a i, .wgx .x-tabs a.on i { min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 0; font: 600 10px/1 "Inter Tight", sans-serif; background: #4C5F3D; color: #E8E6DF; } body.wga .x-tabs a.on i { background: #E8E6DF; color: #34462F; } /* tabs inside a card (e.g. Work on older pages) stay quieter */ body.wga .x-card .x-tabs { border-bottom-width: 1px; } body.wga .x-card .x-tabs a { min-height: 38px; font-size: 14px; } /* number strips on list pages: compact glass blocks instead of big tiles */ html[data-theme="light"] body.wga .x-kpi { background: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.3)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.75); } body.wga .x-kpi { padding: 10px 14px; min-height: 0; } body.wga .x-kpi span { font-size: 12px; } body.wga .x-kpi strong { font-size: 22px; line-height: 1.1; } body.wga .x-kpi.is-alert { box-shadow: inset 3px 0 0 #FC9100; } html[data-theme="dark"] body.wga .x-tabs a { background: rgba(255,255,255,.06); color: #DDDAD2; } html[data-theme="dark"] body.wga .x-tabs a.on { background: #4C5F3D; color: #E8E6DF; } /* 2026-10-20: portal on tablets and phones: bottom tab bar (More opens the full menu as a sheet), compact header, smaller type. The bar and sheet live in .p-mob, which a script moves to so position: fixed works. */ .p-mob { display: none; } @media (max-width: 900px) { body:has(.wgp2) .pg-mark { display: none; } .wgx.wgp2 { font-size: 14px; } .wgp2 .p-shell { gap: 10px; padding-bottom: 72px; } .wgp2 .p-top { flex-wrap: nowrap; align-items: center; gap: 12px; padding-bottom: 10px; } .wgp2 .p-top-t { gap: 2px; } .wgp2 .p-here { font-size: 26px; line-height: 1; } .wgp2 .p-hi { font-size: 14px; font-weight: 500; color: var(--p-sub); } .wgp2 .p-cid { width: auto; flex: none; grid-template-columns: auto auto; gap: 2px 8px; padding: 6px 6px 6px 10px; } .wgp2 .p-cid small { font-size: 10px; letter-spacing: .14em; } .wgp2 .p-cid b { font-size: 16px; letter-spacing: .06em; } .wgp2 .p-cid-do { height: 26px; padding: 0 7px; } .wgp2 .p-cid-do i { display: none; } .wgp2 .p-shell > .p-side { position: static; padding: 0; background: none; border: 0; box-shadow: none; } .wgp2 .p-shell > .p-side > .p-menu, .wgp2 .p-shell > .p-side > .p-side-f { display: none; } .wgp2 .p-shell > .p-side:not(:has(.p-prop)) { display: none; } .p-mob { display: block; font-size: 14px; } .p-mob .p-tabbar { position: fixed; z-index: 9990; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); padding: 0 0 env(safe-area-inset-bottom); background: #1A1D1C; border-top: 1px solid rgba(232,230,223,.16); } .p-mob .p-tabbar a, .p-mob .p-tabbar button { position: relative; display: grid; justify-items: center; align-content: center; gap: 5px; min-height: 58px; padding: 6px 2px; border: 0; border-radius: 0; background: none; color: rgba(232,230,223,.72); font: 700 11px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .p-mob .p-tabbar svg { width: 21px; height: 21px; color: inherit; } .p-mob .p-tabbar .on, .p-mob.is-open .p-mtog { color: #fff; box-shadow: inset 0 3px 0 #9BAF8F; } .p-mob .p-tabbar em { position: absolute; top: 9px; left: calc(50% + 8px); width: 8px; height: 8px; padding: 0; background: #F2A20C; } .p-mob .p-tabbar em.is-hot { background: #F94F02; } .p-mob .p-scrim, .p-mob .p-sheet { display: none; } .p-mob.is-open .p-scrim { display: block; position: fixed; z-index: 9988; inset: 0; background: rgba(15,17,17,.6); } .p-mob.is-open .p-sheet { position: fixed; z-index: 9989; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); display: block; max-height: 72vh; overflow-y: auto; background: #1A1D1C; border-top: 1px solid rgba(232,230,223,.16); } .p-mob .p-sheet .p-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(232,230,223,.1); } .p-mob .p-sheet .p-menu a { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 0 12px; background: #232826; color: #E8E6DF; font: 700 12.5px/1.1 var(--display, Rajdhani, sans-serif); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; } .p-mob .p-sheet .p-menu a span { flex: 1; } .p-mob .p-sheet .p-menu a.on { background: #4C5F3D; } .p-mob .p-sheet .p-menu svg, .p-mob .p-side-f svg { width: 17px; height: 17px; flex: none; color: #9BAF8F; } .p-mob .p-sheet .p-menu a.on svg { color: #fff; } .p-mob .p-sheet .p-menu em { font-style: normal; font: 700 11px/1 var(--display, Rajdhani, sans-serif); padding: 3px 6px; background: rgba(232,230,223,.12); color: #E8E6DF; } .p-mob .p-sheet .p-menu em.is-amber { background: #F2A20C; color: #1A1D1C; } .p-mob .p-sheet .p-menu a[href*="tab=billing"] em.is-hot { background: #F94F02; color: #fff; } .p-mob .p-side-f { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 12px; border: 0; } .p-mob .p-side-f a { display: flex; align-items: center; gap: 8px; min-height: 40px; color: rgba(232,230,223,.8); font-size: 13.5px; font-weight: 600; text-decoration: none; } .wgp2 .p-main { min-height: 0; } .wgp2 .p-title { margin-bottom: 12px; } .wgp2 .p-title h2 { font-size: 20px; } .wgp2 .p-title p, .wgp2 .p-win p, .wgp2 .p-mini li, .wgp2 .p-facts dd, .wgp2 .p-now, .wgp2 .p-when span, .wgp2 .p-about { font-size: 14px; } .wgp2 .p-since { font-size: 10.5px; padding: 5px 8px; } .wgp2 .p-win { padding: 14px; gap: 6px; } .wgp2 .p-wins { gap: 10px; } .wgp2 .p-big, .wgp2 .p-big-d { font-size: 21px; } .wgp2 .p-big small { font-size: 13px; } .wgp2 .p-win h3, .wgp2 .p-action h3, .wgp2 .p-progress-h b { font-size: 15px; } .wgp2 .p-more { font-size: 11.5px; } .wgp2 .p-progress li, .wgp2 .p-foot { font-size: 12.5px; } .wgx.wgp2 .x-btn { height: 38px; min-height: 38px; font-size: 13px; padding: 0 12px; } .wgp2 input, .wgp2 select, .wgp2 textarea { font-size: 16px; } } @media (max-width: 600px) { .p-mob .p-sheet .p-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wgp2 .p-cid small { display: none; } .wgp2 .p-cid { grid-template-areas: "c b"; } } @media print { .p-mob { display: none !important; } } /* 2026-10-20: phone edges follow the header buttons (widths set by app.js); More sheet is 2 columns with Settings beside New inquiry and Get help */ @media (max-width: 900px) { /* the page sits inside the site's --gut; the header buttons sit 9px further in (bar padding 8px + 1px border) */ .wgx.wgp2 { padding-left: 9px; padding-right: 9px; } /* Client ID spans from the left of Contact us to the right of the menu button: 120px + 6px gap + 42px */ .wgp2 .p-cid { width: 168px; grid-template-columns: minmax(0, 1fr) auto; box-sizing: border-box; } } @media (max-width: 640px) { /* phones: Contact us 91px + 6px gap + 38px menu button */ .wgp2 .p-cid { width: 135px; } .p-mob .p-sheet .p-menu, .p-mob .p-sheet .p-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } .p-mob .p-sheet .p-side-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; padding: 0; border-top: 1px solid rgba(232,230,223,.1); background: rgba(232,230,223,.1); } .p-mob .p-sheet .p-side-f a { justify-content: flex-start; gap: 8px; min-height: 50px; padding: 0 12px; background: #1A1D1C; color: #E8E6DF; font: 700 12.5px/1.1 var(--display, Rajdhani, sans-serif); letter-spacing: .08em; text-transform: uppercase; } .p-mob .p-sheet .p-side-f a.on { background: #4C5F3D; } .p-mob .p-sheet .p-side-f a.on svg { color: #fff; } .p-mob .p-sheet .p-side-f a span { flex: 1; } } /* 2026-10-20: More uses the site menu button's two bars, which turn into an X when the sheet is open; (no page-change animation on the portal: portal-ui.php opts out, so tabs swap in one step) */ .p-mob .p-mtog-i { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; width: 21px; height: 21px; } .p-mob .p-mtog-i i { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .3s var(--ease, cubic-bezier(.22, .8, .12, 1)); } .p-mob .p-mtog[aria-expanded="true"] .p-mtog-i i:first-child { transform: translateY(4px) rotate(45deg); } .p-mob .p-mtog[aria-expanded="true"] .p-mtog-i i:last-child { transform: translateY(-4px) rotate(-45deg); } /* 2026-10-20: Field Office on phones (owner-approved mockup): dark bottom bar with Home/Schedule/Clients/Tasks/More (owner asked for it dark again), a top bar with only search, night mode and New, compact buttons, tab rows that scroll, short cards for table rows */ @media (max-width: 900px) { .wga-tabbar { background: #232826; border-top: 1px solid rgba(255,255,255,.08); } .wga-tabbar a, .wga-tabbar button { color: #C6C4BC; font: 600 11px/1 "Inter Tight", sans-serif; letter-spacing: 0; text-transform: none; } .wga-tabbar a:hover { color: #fff; } .wga-tabbar svg { width: 20px; height: 20px; } .wga-tabbar .on { background: #4C5F3D; color: #fff; box-shadow: none; } .wga-tabbar i { color: #fff; border-radius: 0; } html[data-theme="dark"] .wga-tabbar { background: #0E1210; } } @media (max-width: 640px) { /* top bar: search, night mode, New (Scanner is in More → Field & gear; Sign out at the foot of More) */ .wga-top { height: 52px; gap: 6px; padding: 0 10px; } .wga-top a.x-btn.wga-scanbtn, .wga-top .wga-user { display: none; } .wga-top .x-search input { font-size: 16px; } .wga-top .wga-theme, .wga-top summary.x-btn-accent { width: 36px; height: 36px; } /* More: the drawer covers the screen */ .wga-side { width: 100vw; padding-bottom: calc(76px + env(safe-area-inset-bottom)); } /* page title band */ .wga-page > .x-head, .wga-page > .x-head.x-band { padding: 12px; margin-bottom: 10px; gap: 8px; } .wga-page > .x-head h1, .wga-page > .x-head.x-band h1 { font-size: 20px; line-height: 24px; } .wga-page > .x-head.x-band .x-pill { height: 24px; font-size: 11px; } .wga-page > .x-head .x-actions { gap: 6px; } /* buttons: compact, not chunky */ .wgx .x-btn, .wgx button.x-btn, .wgx a.x-btn, .wgx .x-head .x-btn { height: 34px; min-height: 34px; padding: 0 10px; font-size: 13px; letter-spacing: .04em; } .wgx .x-btn-sm, .wgx .x-card-h .x-btn { height: 30px; min-height: 30px; padding: 0 9px; font-size: 12px; } .wgx .x-btn svg { width: 15px; height: 15px; } /* status chips */ .wga-page > .x-chips { gap: 6px; } .wgx .x-chip { padding: 4px 8px; font-size: 12px; } /* tab rows scroll sideways instead of wrapping */ body.wga .x-tabs, .wgx .x-ptabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; } body.wga .x-tabs::-webkit-scrollbar, .wgx .x-ptabs::-webkit-scrollbar { display: none; } body.wga .x-tabs a, .wgx .x-ptabs a { flex: 0 0 auto; min-height: 38px; padding: 0 12px; font-size: 13px; white-space: nowrap; } /* cards and their headers */ html[data-theme="light"] .wga-main .x-card { margin-bottom: 10px; } .wgx .x-card-h { padding: 8px 12px; } .wgx .x-card-h h2 { font-size: 13px; } /* table rows as short cards: name, then the values in small grey lines, no column names; empty cells hidden */ .wgx table.x-cardmode tr { gap: 0; padding: 10px 12px; } .wgx table.x-cardmode tr.has-pill { position: relative; } .wgx table.x-cardmode tr.has-pill td.x-lead-cell { padding-right: 96px; } .wgx table.x-cardmode td { padding: 1px 0; text-align: left; font-size: 13px; color: var(--x-muted); } .wgx table.x-cardmode td::before { content: none; } .wgx table.x-cardmode td.n::before { content: attr(data-label) " "; float: none; margin: 0; font: inherit; letter-spacing: 0; text-transform: none; } .wgx table.x-cardmode td small { display: inline; margin-left: 6px; } .wgx table.x-cardmode td.x-nil { display: none; } .wgx table.x-cardmode td.x-lead-cell { font-size: 15px; color: var(--x-text); padding-bottom: 2px; } .wgx table.x-cardmode td.x-lead-cell .x-code { margin-left: 6px; } .wgx table.x-cardmode td.x-pill-cell { position: absolute; top: 10px; right: 12px; padding: 0; } .wgx table.x-cardmode tr.has-pick.has-pill td.x-pill-cell { right: 44px; } .wgx table.x-cardmode td .x-actions { justify-content: flex-start; margin-top: 4px; } /* list filter rows */ .wgx .x-toolbar { gap: 6px; } } /* 2026-10-20 (v2): portal on tablets and phones. A two-row bar at the top replaces the site header (green line on top): Exit portal + menu button, then four text tabs. The menu sheet drops from under row 1: who is signed in, a tile grid of sections (Support and Settings set apart), then Contact us, phone, theme and Sign out pinned at the bottom. */ .p-mob .p-bar { display: none; } @media (max-width: 900px) { body:has(.p-mob) .hdr, body:has(.p-mob) .rail, body:has(.p-mob) .blurbar { display: none; } body:has(.p-mob) .acct, body:has(.p-mob) .wrapped { padding-top: calc(98px + env(safe-area-inset-top) + 14px); } .wgp2 .p-shell { padding-bottom: 16px; } .p-mob .p-tabbar { display: none; } .p-mob .p-bar { display: block; position: fixed; z-index: 9990; left: 0; right: 0; top: 0; padding-top: env(safe-area-inset-top); background: #1A1D1C; border-top: 3px solid #657A50; color: #E8E6DF; } .p-bar-row { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; } .p-exit { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: #4C5F3D; box-shadow: inset 3px 0 0 #F94F02; color: #fff; font: 700 13.5px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .p-exit svg { width: 18px; height: 18px; } .p-mob .p-mtog { position: relative; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(232,230,223,.28); border-radius: 0; background: none; color: #E8E6DF; cursor: pointer; box-shadow: none; } .p-mob .p-mtog-i { display: flex; flex-direction: column; gap: 6px; } .p-mob .p-mtog-i i { display: block; width: 18px; height: 2px; background: currentColor; transition: transform .25s; } .p-mob.is-open .p-mtog-i i:first-child { transform: translateY(4px) rotate(45deg); } .p-mob.is-open .p-mtog-i i:last-child { transform: translateY(-4px) rotate(-45deg); } .p-mob .p-mtog em { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; background: #F2A20C; } .p-mob.is-open .p-mtog em { display: none; } .p-mob.is-open .p-mtog { color: #fff; box-shadow: none; border-color: rgba(232,230,223,.5); } .p-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: 40px; background: #232826; border-top: 1px solid rgba(232,230,223,.1); } .p-tabs a { position: relative; display: flex; align-items: center; justify-content: center; color: rgba(232,230,223,.72); font: 700 12.5px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; } .p-tabs a.on { color: #fff; box-shadow: inset 0 -3px 0 #9BAF8F; } .p-tabs em { position: absolute; top: 9px; right: 10px; width: 6px; height: 6px; background: #F2A20C; } .p-tabs em.is-hot { background: #F94F02; } .p-mob.is-open .p-tabs { display: none; } .p-mob .p-scrim, .p-mob .p-sheet { display: none; } .p-mob.is-open .p-sheet { display: flex; flex-direction: column; position: fixed; z-index: 9989; left: 0; right: 0; bottom: 0; top: calc(57px + env(safe-area-inset-top)); max-height: none; overflow-y: auto; overscroll-behavior: contain; background: #1A1D1C; color: #E8E6DF; border-top: 1px solid rgba(232,230,223,.12); } html:has(.p-mob.is-open), html:has(.p-mob.is-open) body { overflow: hidden; } .p-who { display: flex; align-items: baseline; gap: 6px; margin: 0; padding: 12px 16px; border-bottom: 1px solid rgba(232,230,223,.1); color: rgba(232,230,223,.7); font-size: 13.5px; } .p-who b { color: #E8E6DF; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .p-who span { margin-left: auto; flex: none; color: #9BAF8F; font: 700 12.5px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .08em; } .p-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 12px 12px 0; background: rgba(232,230,223,.09); border: 1px solid rgba(232,230,223,.09); } .p-grid-x { margin-top: 12px; } .p-grid a { position: relative; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 10px 6px 12px; background: #1A1D1C; color: #E8E6DF; font-size: 13.5px; font-weight: 500; text-decoration: none; } .p-grid a svg { width: 19px; height: 19px; color: #9BAF8F; } .p-grid a.on { background: #2C332F; box-shadow: inset 3px 0 0 #9BAF8F; } .p-grid a.on svg { color: #fff; } .p-grid a span { min-width: 0; line-height: 1.2; } .p-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; } .p-grid a:has(em) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-content: center; } .p-grid a:has(em) svg { grid-row: 1 / 3; } .p-grid em { justify-self: start; padding: 1px 6px; font: 600 11px/1.3 var(--body, 'Inter Tight', sans-serif); font-style: normal; background: rgba(232,230,223,.14); color: #E8E6DF; } .p-grid em.is-amber { background: #F2A20C; color: #1A1D1C; } .p-grid em.is-hot { background: #F94F02; color: #1A1D1C; } .p-act { margin-top: auto; display: grid; gap: 10px; padding: 14px 14px max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(232,230,223,.12); } .p-grid-x { margin-bottom: 16px; } .p-act-req { display: flex; align-items: center; justify-content: center; min-height: 50px; background: #F94F02; color: #1A1D1C; font: 700 15px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } .p-act-row { display: flex; align-items: center; gap: 14px; min-height: 42px; } .p-act-tel { flex: 1; display: inline-flex; align-items: center; gap: 8px; color: #E8E6DF; font-size: 14px; font-weight: 600; text-decoration: none; } .p-act-tel svg { width: 16px; height: 16px; } .p-act .theme-t { flex: none; width: 40px; height: 40px; color: #FC9100; border: 1px solid rgba(232,230,223,.22); background: none; } .p-act-out { flex: none; color: #E8E6DF; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } }/* 2026-10-21: "Portal" beside Exit portal; Support in the grid and Settings full width last; the bar and menu follow light/dark */ @media (max-width: 900px) { .p-bar-t { margin: 0 auto 0 14px; font: 700 17px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .16em; text-transform: uppercase; } .p-grid a.p-set, .p-grid a:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; } html[data-theme="light"] .p-mob .p-bar { background: #E8E6DF; color: #1A1D1C; border-bottom: 1px solid rgba(26,29,28,.12); } html[data-theme="light"] .p-mob .p-mtog, html[data-theme="light"] .p-mob.is-open .p-mtog { color: #1A1D1C; border-color: rgba(26,29,28,.3); } html[data-theme="light"] .p-tabs { background: #DDDAD2; border-top-color: rgba(26,29,28,.1); } html[data-theme="light"] .p-tabs a { color: rgba(26,29,28,.62); } html[data-theme="light"] .p-tabs a.on { color: #1A1D1C; box-shadow: inset 0 -3px 0 #4C5F3D; } html[data-theme="light"] .p-mob.is-open .p-sheet { background: #E8E6DF; color: #1A1D1C; border-top-color: rgba(26,29,28,.12); } html[data-theme="light"] .p-who { color: rgba(26,29,28,.62); border-bottom-color: rgba(26,29,28,.1); } html[data-theme="light"] .p-who b { color: #1A1D1C; } html[data-theme="light"] .p-who span { color: #4C5F3D; } html[data-theme="light"] .p-grid { background: rgba(26,29,28,.12); border-color: rgba(26,29,28,.12); } html[data-theme="light"] .p-grid a { background: #E8E6DF; color: #1A1D1C; } html[data-theme="light"] .p-grid a svg { color: #4C5F3D; } html[data-theme="light"] .p-grid a.on { background: #DDDAD2; box-shadow: inset 3px 0 0 #4C5F3D; } html[data-theme="light"] .p-grid a.on svg { color: #1A1D1C; } html[data-theme="light"] .p-grid em { background: rgba(26,29,28,.1); color: #1A1D1C; } html[data-theme="light"] .p-grid em.is-amber { background: #F2A20C; } html[data-theme="light"] .p-grid em.is-hot { background: #F94F02; } html[data-theme="light"] .p-act { border-top-color: rgba(26,29,28,.12); } html[data-theme="light"] .p-act-tel, html[data-theme="light"] .p-act-out { color: #1A1D1C; } html[data-theme="light"] .p-act .theme-t { color: #F94F02; border-color: rgba(26,29,28,.25); } } /* 2026-10-21: a header that stands apart from the page (light mode: Silver bar, Mist tabs, olive underline and a shadow); Settings as its own outlined button under the grid; white text on the green Exit portal button */ @media (max-width: 900px) { .p-mob .p-bar { box-shadow: 0 8px 20px -12px rgba(15,17,17,.55); border-bottom: 2px solid #4C5F3D; } html[data-theme="light"] .p-mob .p-bar { background: #D2CFC7; border-bottom: 2px solid #4C5F3D; } html[data-theme="light"] .p-tabs { background: #C6C4BC; } .p-mob .p-bar .p-exit, .p-mob .p-bar .p-exit:hover { color: #fff; } .p-mob .p-sheet .p-set { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; margin: 16px 12px 0; border: 1px solid rgba(232,230,223,.32); background: none; color: #E8E6DF; font: 700 14px/1 var(--display, Rajdhani, sans-serif); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; } .p-mob .p-sheet .p-set svg { width: 18px; height: 18px; color: #9BAF8F; } .p-mob .p-sheet .p-set.on { border-color: #9BAF8F; box-shadow: inset 0 0 0 1px #9BAF8F; } .p-mob .p-sheet .p-set em { margin-left: 4px; padding: 1px 6px; font: 600 11px/1.3 var(--body, 'Inter Tight', sans-serif); font-style: normal; background: #F2A20C; color: #1A1D1C; } html[data-theme="light"] .p-mob .p-sheet .p-set { border-color: rgba(26,29,28,.35); color: #1A1D1C; } html[data-theme="light"] .p-mob .p-sheet .p-set svg { color: #4C5F3D; } html[data-theme="light"] .p-mob .p-sheet .p-set.on { border-color: #4C5F3D; box-shadow: inset 0 0 0 1px #4C5F3D; } } @media (max-width: 900px) { .p-grid a:nth-last-child(2):nth-child(odd) { grid-column: auto; } .p-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; } }