/* ============================================================
CLEAR HOME SERVICES — BRAND SYSTEM (single source of truth)
Derived from the official CHS Brand Guidelines.
Every CHS dashboard / form / report links this file and
styles itself from these tokens. Change the brand here ONCE
and it propagates everywhere. Do not hard-code brand colors
or fonts in individual pages — reference the tokens below.
------------------------------------------------------------
Tagline: "We care for homes."
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=Montserrat:wght@400;500;600;700&display=swap');
:root {
/* ---- PRIMARY BRAND COLORS (brand guide §3.1) ---- */
--sky-blue: #3cafe9; /* primary accent / top of gradient */
--royal-blue: #2a52af; /* deep accent / bottom of gradient */
--steel-blue: #2a3748; /* dark navy — house mark, headers, primary text */
--dull-blue: #37608c; /* muted mid-blue — secondary chrome */
--full-black: #000000;
/* ---- SECONDARY BRAND COLORS (brand guide §3.2) ---- */
--light-sky: #63d8fc;
--medium-royal: #4476c6;
--light-steel: #3e85ba;
--navy-deep: #08194f;
--teal-pop: #28dddd;
/* ---- THE BRAND GRADIENT (brand guide §3.3: Royal -> Sky) ---- */
--brand-gradient: linear-gradient(135deg, var(--royal-blue) 0%, var(--sky-blue) 100%);
/* ---- SERVICE-LINE ACCENTS (tie to the two sub-logos) ---- */
--pool-accent: var(--sky-blue); /* Pool Technician */
--home-accent: var(--dull-blue); /* Home Maintenance Technician */
/* ---- FUNCTIONAL STATUS COLORS (NOT brand — semantic, kept legible) ---- */
--status-success: #2e7d52; --status-success-bg: #e7f4ee;
--status-warning: #b9770a; --status-warning-bg: #fdf3e2;
--status-danger: #c62828; --status-danger-bg: #fdecec;
/* ---- NEUTRALS ---- */
--ink: #2a3748; /* body text = steel-blue for warmth, on-brand */
--ink-soft: #5a6675;
--line: #e3e7ee;
--surface: #ffffff;
--surface-2: #f5f8fc; /* faint sky-tinted panel */
--surface-3: #eef3fa;
/* ---- TYPOGRAPHY (brand guide §4) ----
Playfair Display = headings (primary, serif, editorial)
Montserrat = subheads + body (secondary geometric sans)
[Creato Display is the guide's body font but is a paid/non-web
face; Montserrat substitutes until a web license is acquired.] */
--font-head: 'Playfair Display', Georgia, serif;
--font-sub: 'Montserrat', system-ui, sans-serif;
--font-body: 'Montserrat', system-ui, sans-serif;
/* ---- SHAPE / DEPTH ---- */
--radius: 14px;
--radius-sm: 9px;
--shadow: 0 6px 22px rgba(42,55,72,0.10);
--shadow-sm: 0 2px 8px rgba(42,55,72,0.08);
}
/* ============================================================
BASE
============================================================ */
body.chs {
font-family: var(--font-body);
color: var(--ink);
background: var(--surface-2);
margin: 0;
}
.chs h1, .chs h2, .chs h3 { font-family: var(--font-head); color: var(--steel-blue); letter-spacing: .2px; }
.chs h4, .chs h5, .chs .eyebrow { font-family: var(--font-sub); font-weight: 600; }
.chs a { color: var(--royal-blue); }
/* ============================================================
CHS BRAND BAR (standard top bar on EVERY portal page)
Injected as the first child of . White surface with the
full-color primary logo (matches brand mockups) + a gradient
accent rule beneath. Service badge optional on the right.
============================================================ */
.chs-brandbar {
display:flex; align-items:center; gap:12px;
background:#fff; padding:10px 20px;
border-bottom:3px solid transparent;
border-image: var(--brand-gradient) 1;
box-shadow: var(--shadow-sm);
position:relative; z-index:50;
}
.chs-brandbar img.brand-logo { height:38px; width:auto; display:block; }
.chs-brandbar .brand-name {
font-family: var(--font-head); font-weight:700; color: var(--steel-blue);
font-size:1.18rem; line-height:1; letter-spacing:.3px;
}
.chs-brandbar .tagline {
font-family: var(--font-head); font-style:italic; color: var(--dull-blue);
font-size:.8rem; margin-left:auto;
}
@media (max-width:560px){ .chs-brandbar .tagline{ display:none; } }
/* Accent rule under section headers (echoes the brand-guide divider) */
.brand-rule { height:4px; width:64px; border:0; border-radius:4px; background: var(--brand-gradient); margin:6px 0 18px; }
/* ============================================================
BUTTONS
============================================================ */
.btn-primary {
font-family: var(--font-sub); font-weight: 600; color:#fff;
background: var(--brand-gradient);
border:0; border-radius: var(--radius-sm);
padding: 11px 20px; cursor:pointer;
box-shadow: var(--shadow-sm); transition: filter .15s, transform .05s;
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
font-family: var(--font-sub); font-weight:600; color: var(--royal-blue);
background:#fff; border:1.5px solid var(--line); border-radius: var(--radius-sm);
padding: 10px 18px; cursor:pointer;
}
.btn-ghost:hover { border-color: var(--sky-blue); color: var(--sky-blue); }
/* ============================================================
CARDS / PANELS
============================================================ */
.card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding:18px; }
/* ============================================================
SERVICE-TYPE BADGES (schedule labels / report + form headers)
Pairs a sub-logo with a color so the visit type reads instantly.
Pool Service
============================================================ */
.svc-badge {
display:inline-flex; align-items:center; gap:7px;
font-family: var(--font-sub); font-weight:600; font-size:.78rem;
padding:5px 11px 5px 8px; border-radius:999px; line-height:1;
border:1.5px solid transparent;
}
.svc-badge img { height:18px; width:auto; display:block; }
.svc-badge--pool { color: var(--royal-blue); background: #e9f6fd; border-color: var(--pool-accent); }
.svc-badge--home { color: var(--steel-blue); background: #eef2f8; border-color: var(--home-accent); }
/* ============================================================
STATUS PILLS (semantic — deliberately NOT brand-blue)
============================================================ */
.status { display:inline-block; font-family:var(--font-sub); font-weight:600; font-size:.75rem; padding:3px 10px; border-radius:999px; }
.status--ok { color:var(--status-success); background:var(--status-success-bg); }
.status--warn { color:var(--status-warning); background:var(--status-warning-bg); }
.status--bad { color:var(--status-danger); background:var(--status-danger-bg); }
/* ============================================================
ACTION-BAR ICON SYSTEM (A.8.12, added 2026-08-19)
Shared by the dashboard action bars. Replaces the emoji/Unicode
glyphs that could not be sized, colored, or animated.
Every tint is DERIVED from an A.8.2 token via color-mix — no
literal hexes, so a future brand change propagates here too.
Browsers without color-mix keep the flat surface fallback.
============================================================ */
.ab-ico{
width:32px; height:32px; border-radius:8px; flex:none;
display:inline-flex; align-items:center; justify-content:center;
background:#fff;
}
.ab-ico svg{
width:20px; height:20px; fill:none; stroke-width:2;
stroke-linecap:round; stroke-linejoin:round; display:block;
}
.ab-ico .ab-g{ transform-origin:center; transition:transform .3s cubic-bezier(.34,1.4,.64,1); }
/* Token-derived tints + stroke colors */
.ab-ico--sky { background:color-mix(in srgb, var(--sky-blue) 13%, #fff); }
.ab-ico--sky svg{ stroke:var(--royal-blue); }
.ab-ico--royal { background:color-mix(in srgb, var(--royal-blue) 13%, #fff); }
.ab-ico--royal svg{ stroke:var(--royal-blue); }
.ab-ico--dull { background:color-mix(in srgb, var(--dull-blue) 13%, #fff); }
.ab-ico--dull svg{ stroke:var(--dull-blue); }
.ab-ico--mroyal{ background:color-mix(in srgb, var(--medium-royal) 13%, #fff); }
.ab-ico--mroyal svg{ stroke:var(--medium-royal); }
.ab-ico--lsteel{ background:color-mix(in srgb, var(--light-steel) 13%, #fff); }
.ab-ico--lsteel svg{ stroke:var(--light-steel); }
.ab-ico--steel { background:color-mix(in srgb, var(--steel-blue) 10%, #fff); }
.ab-ico--steel svg{ stroke:var(--steel-blue); }
.ab-ico--navy { background:color-mix(in srgb, var(--navy-deep) 10%, #fff); }
.ab-ico--navy svg{ stroke:var(--navy-deep); }
.ab-ico--teal { background:color-mix(in srgb, var(--teal-pop) 16%, #fff); }
.ab-ico--teal svg{ stroke:var(--dull-blue); }
.ab-ico--onbrand{ background:rgba(255,255,255,.22); }
.ab-ico--onbrand svg{ stroke:#fff; }
/* Motion — hover on pointer devices, :active so touch gets it too.
One gesture per icon, chosen to mean something. */
.ab-mo-spin:hover .ab-g, .ab-mo-spin:active .ab-g{ transform:rotate(90deg); }
.ab-mo-cock:hover .ab-g, .ab-mo-cock:active .ab-g{ transform:rotate(-25deg); }
.ab-mo-lift:hover .ab-g, .ab-mo-lift:active .ab-g{ transform:translateY(-2px); }
.ab-mo-grow:hover .ab-g, .ab-mo-grow:active .ab-g{ transform:scale(1.18); }
.ab-mo-swap:hover .ab-g, .ab-mo-swap:active .ab-g{ animation:ab-swap .45s ease; }
@keyframes ab-swap{ 25%{transform:translateX(-2px);} 75%{transform:translateX(2px);} }
/* Self-drawing check: dash length 22 covers the tick path. */
.ab-ico .ab-draw{ stroke-dasharray:22; stroke-dashoffset:0; }
.ab-mo-draw:hover .ab-draw, .ab-mo-draw:active .ab-draw{ animation:ab-draw .5s ease forwards; }
@keyframes ab-draw{ from{stroke-dashoffset:22;} to{stroke-dashoffset:0;} }
/* Motion is decoration; never make it a condition of using the tool. */
@media (prefers-reduced-motion: reduce){
.ab-ico .ab-g, .ab-ico .ab-draw{ transition:none !important; animation:none !important; transform:none !important; }
}