/* ═══════════════════════════════════════════════════════════════════════════ myquack redesign layer (loads AFTER style.css → overrides it) Brand: teal #1698A3 + warm cream. Light + dark. Squared, flat, no AI tells. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Type: force the brand sans everywhere (consistent, not OS-dependent) ──── */ :root{ --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ── LIGHT tokens → warm cream + teal ───────────────────────────────────────*/ :root{ color-scheme: light; --bg:#F4EEE1; --surface:#FFFFFF; --surface-2:#F4EEE1; --surface-3:#EBE3D3; --card:#FFFFFF; --text:#182320; --soft:#545E5A; --muted:#6F7772; --orange:#1698A3; --accent:#1698A3; --accent-press:#127E88; --gold:#B7852B; --ember:#D6452F; --green:#12876A; --blue:#2F6FE0; --purple:#7C5CBF; --emerald:#0E5F57; --border:rgba(24,60,58,0.14); --border-2:rgba(24,60,58,0.22); --glass-bg:rgba(255,255,255,0.58); --glass-border:rgba(24,60,58,0.16); --glass-highlight:rgba(255,255,255,0.9); --shadow-sm:0 1px 2px rgba(60,50,30,0.05), 0 1px 3px rgba(60,50,30,0.05); --shadow-md:0 2px 10px rgba(60,50,30,0.06), 0 16px 34px rgba(60,50,30,0.07); --radius:8px; --radius-lg:10px; --radius-sm:5px; --ink-on-accent:#FFFFFF; } /* ── DARK tokens → deep teal-charcoal + cream ───────────────────────────────*/ :root[data-theme="dark"]{ color-scheme: dark; --bg:#0E1A18; --surface:#15211F; --surface-2:#1B2725; --surface-3:#273330; --card:#15211F; --text:#EDE6D7; --soft:#B2BBB5; --muted:#869089; --orange:#2FB4BE; --accent:#2FB4BE; --accent-press:#2698A2; --gold:#D6A64E; --ember:#E9634C; --green:#3BB98C; --blue:#5B94F0; --purple:#A08AD6; --emerald:#0C4F49; --border:rgba(120,205,205,0.16); --border-2:rgba(120,205,205,0.26); --glass-bg:rgba(21,33,31,0.66); --glass-border:rgba(120,205,205,0.20); --glass-highlight:rgba(255,255,255,0.05); --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow-md:0 8px 26px rgba(0,0,0,0.45); --ink-on-accent:#06201F; } @media (prefers-color-scheme: dark){ :root[data-theme="system"]{ color-scheme: dark; --bg:#0E1A18; --surface:#15211F; --surface-2:#1B2725; --surface-3:#273330; --card:#15211F; --text:#EDE6D7; --soft:#B2BBB5; --muted:#869089; --orange:#2FB4BE; --accent:#2FB4BE; --accent-press:#2698A2; --gold:#D6A64E; --ember:#E9634C; --green:#3BB98C; --blue:#5B94F0; --purple:#A08AD6; --emerald:#0C4F49; --border:rgba(120,205,205,0.16); --border-2:rgba(120,205,205,0.26); --glass-bg:rgba(21,33,31,0.66); --glass-border:rgba(120,205,205,0.20); --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow-md:0 8px 26px rgba(0,0,0,0.45); --ink-on-accent:#06201F; } } /* ── Page backdrop ────────────────────────────────────────────────────────── Glass is a lens. Over a flat colour it refracts nothing, which is exactly why the frosting was invisible: the page was one solid cream, so blurring it returned the same cream. Every glassmorphism reference works because there is a photograph behind it. This is that photograph, reduced to its essentials: a real image (the gardening shot already in the category set) downsampled to 64x43 and blurred until it stops reading as any particular industry and becomes an abstract organic field, then pulled toward the brand tokens. Two bytes shy of nothing (~0.17KB) and the browser scales it up smoothly, so a full-viewport soft field costs no runtime blur. `fixed` so it sits still while the page scrolls — the parallax is what makes panels feel like they are floating ABOVE something rather than painted onto it. The solid colour stays underneath as the fallback if the image ever fails. */ html{ background:var(--bg) url('../img/brand/field-light.webp') center center / cover no-repeat fixed; } /* data-theme lives on :root, and :root IS , so these target the same element. */ :root[data-theme="dark"]{ background-image:url('../img/brand/field-dark.webp'); } @media (prefers-color-scheme: dark){ :root[data-theme="system"]{ background-image:url('../img/brand/field-dark.webp'); } } /* body must not paint over it — it was an opaque cream sheet hiding the whole thing. */ body{ font-family:var(--font-body); background:transparent; color:var(--text); } a{ color:var(--accent); } /* ── Squared, flat components (kill pills + big radii + glow) ────────────────*/ .btn{ border-radius:7px !important; box-shadow:none !important; font-weight:600; letter-spacing:0; } .btn-primary{ background:var(--accent); color:var(--ink-on-accent); border:1px solid transparent; } .btn-primary:hover{ background:var(--accent-press); } .btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border-2); } .btn-ghost:hover{ border-color:var(--text); } .btn-sm{ border-radius:6px !important; } /* ── Blocks: one treatment, shared with the calendar ───────────────────────── Four different container radii were in play (8px here, 12px inline on booking cards, 10px on the calendar, 14px on the modal) and elevation was inconsistent — booking cards and payout items carried a shadow while the sections around them did not. Mixed radii and mixed elevation is what makes a page read as assembled rather than designed. The calendar settled on flat surfaces with hairline borders and it looks right, so that is now the rule: containers share --radius-lg, inner chips step down to --radius, and nothing in this group floats. The genuinely floating surfaces — the frosted provider cards, the modal, the right-click menu, toasts — keep their shadows, because those actually sit above the page. */ .provider-card,.settings-section,.card,.pcard,.booking-card,.frame, .cal-body,.kpi-card,.payout-item{ border-radius:var(--radius-lg) !important; } /* Inner rows step DOWN. .service-row and .earn-worked were in the container list above, which put a container-sized corner on 16 quack rows nested inside a section — a card inside a card, which is exactly the fragmented look this pass is removing. */ .service-row,.earn-worked,.review-item,.offer-row{ border-radius:var(--radius) !important; } /* Flat + hairline. .provider-card is deliberately absent: it is part of the glass layer over the page backdrop and its inset highlight is doing real work. */ .booking-card,.review-item,.payout-item,.settings-section,.kpi-card{ box-shadow:none !important; } /* Symmetric padding. The bottom was 0.5rem against 1.25rem elsewhere, so every section sat visibly tighter at the base than the top. */ .settings-section{ padding:1.15rem 1.15rem !important; } .glass{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:var(--card) !important; } /* A card that is itself a link must never underline. The global `a:hover` rule was underlining every word inside a provider card on hover — name, tags, blurb, price — because the whole card is one anchor. */ a.provider-card, a.provider-card:hover, a.provider-card *, a.provider-card:hover * { text-decoration: none !important; } a.provider-card:hover{ border-color:var(--accent); } /* ── Tags: ONE definition, site-wide ───────────────────────────────────────── Previously five treatments were declared across redesign.css, browse.html and provider_public.html, plus an inline per-industry colour, so a single row could carry emerald, gold, pink, grey and accent at once. Colour now means something: teal marks the one claim a client cares about (documents reviewed), everything else is neutral metadata. Same size, same border, same radius. */ .pc-tag,.badge,.chip,.pill,.earn-badge{ border-radius:var(--radius-sm) !important; } .pc-tag{ display:inline-flex !important; align-items:center; gap:5px; font-size:0.72rem !important; font-weight:600 !important; line-height:1.35; padding:0.22rem 0.5rem !important; background:transparent !important; /* --soft, not --muted. On the frosted card these measured 2.76:1, well under the 4.5:1 WCAG AA needs for text this size. They are secondary metadata, but secondary is not the same as unreadable. */ color:var(--soft) !important; border:1px solid var(--border) !important; } /* The verification badge is the only one that earns colour. */ .pc-tag--verified{ /* Brand teal on a near-white card measures 2.76:1 — the badge that matters most was the least readable one on the page. --emerald is the same family, dark enough to clear AA. Dark mode keeps --accent, which is the light teal and already has plenty of contrast against a dark card; --emerald there would be near-invisible. */ color:var(--emerald) !important; border-color:color-mix(in srgb, var(--accent) 45%, transparent) !important; } :root[data-theme="dark"] .pc-tag--verified{ color:var(--accent) !important; } @media (prefers-color-scheme: dark){ :root[data-theme="system"] .pc-tag--verified{ color:var(--accent) !important; } } /* .pc-tag--seen removed: "You've booked before" is now a corner flag on the card (.pc-seen-flag in browse.html), not one tag among five in the tag row. */ /* input focus + fields */ input,select,textarea{ border-radius:7px !important; } input:focus,select:focus,textarea:focus{ outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent); outline-offset:1px; } /* Autofilled fields — Chrome paints its own pale blue over the field background and its own text colour over ours, which on the login form left two blue boxes sitting in a cream card, and is unreadable outright in dark mode. There is no property to switch it off, so the background is repainted with an inset shadow (the one thing autofill does not override) and the text colour forced. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 100px var(--card) inset; box-shadow: 0 0 0 100px var(--card) inset; caret-color: var(--text); transition: background-color 9999s ease-in-out 0s; /* outlast Chrome's own fade-in */ } /* ── Header ─────────────────────────────────────────────────────────────────*/ /* Frosted, with a caveat worth writing down: the bar is `position: sticky`, which keeps it in normal flow, so page content flows AFTER it and never passes UNDERNEATH it. Measured on /browse at several scroll positions and nothing is ever behind the bar. That means backdrop-filter has nothing to refract here and the frost cannot actually show; what you get is the body colour tinting through, not glass. It is kept because it costs almost nothing and becomes correct the moment the bar is made `fixed`. If you want real glass on the header, that is the change to make — plus top padding on every page that has no hero, which is currently all of them but /browse. Opaque first so a browser without backdrop-filter, or a viewer who has asked for reduced transparency, gets a solid readable bar rather than a washed-out one. */ .navbar{ background:var(--surface); border-bottom:1px solid var(--border); backdrop-filter:none; } :root[data-theme="dark"] .navbar{ background:var(--bg); } @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .navbar, :root[data-theme="dark"] .navbar{ background:var(--glass-bg); -webkit-backdrop-filter:blur(var(--glass-blur,22px)) saturate(180%); backdrop-filter:blur(var(--glass-blur,22px)) saturate(180%); border-bottom:1px solid var(--glass-border); /* The lit top edge is what reads as "glass" rather than "translucent". */ box-shadow:inset 0 1px 0 0 var(--glass-highlight); } /* Once scrolled there IS content underneath, so let it settle a little deeper. */ .navbar.scrolled, :root[data-theme="dark"] .navbar.scrolled{ box-shadow:inset 0 1px 0 0 var(--glass-highlight), 0 1px 2px rgba(20,40,38,.04), 0 10px 30px -14px rgba(20,40,38,.20); } } @media (prefers-reduced-transparency:reduce){ .navbar, :root[data-theme="dark"] .navbar{ background:var(--surface) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } :root[data-theme="dark"] .navbar{ background:var(--bg) !important; } } .brand-logo--full{ height:34px !important; } .brand-logo--mark{ height:34px !important; width:34px !important; } .navbar.scrolled .brand-logo--mark{ max-width:44px !important; } /* teal logo on light; light on dark. NOTE: .brand-logo is NOT handled here. base.html carries an inline