/* Skill Ready Techs - Complete Stylesheet */
/* ======================================== */
/* Built on top of Pure CSS (loaded before this file on every page - see the
in each page's ) for cross-browser normalization, its grid
utilities, and baseline table/form resets. Pure was chosen over Foundation
and Petal because it is unopinionated at the tag level - it doesn't ship
its own visual "skin" or bundle JS components that fight with this site's
already-built custom design system (buttons, cards, the tech card, the
readout panel, etc.), so it can sit underneath as a clean foundation
without a full markup rewrite. Everything in this file loads AFTER Pure
and wins the cascade wherever the two disagree. */
:root {
/* HVACR industry palette. --primary/--primary-light are the deep,
high-trust navy and are used both as GRADIENT BACKGROUNDS (hero,
footer, training header, tech card) and as the header/heading ink -
never as the page/card background, which is why they can stay dark
even though the rest of the site reads light. Brand accent is the
"cooling" HVAC blue throughout - --info is a separate, cooler cyan-blue
used for secondary ("employer side") UI so the two don't collapse into
one color. --hvac-orange is the "heating" tone, reserved for urgent /
high-attention CTAs so it doesn't compete with the everyday blue accent. */
--primary: #1e293b; /* --color-primary-navy */
--primary-light: #2c3e58;
--accent: #0284c7; /* --color-hvac-blue */
--accent-hover: #0369a1;
--accent-soft: #0369a1; /* readable blue for text sitting on --accent-light chips on this light ground */
--accent-light: rgba(2, 132, 199, 0.12);
--hvac-orange: #ea580c; /* Heating / urgent CTA highlight */
--hvac-orange-hover: #c2410c;
--hvac-orange-light: rgba(234, 88, 12, 0.14);
--success: #10b981;
--success-light: rgba(16, 185, 129, 0.14);
--danger: #ef4444;
--danger-light: rgba(239, 68, 68, 0.12);
--warning: #f59e0b;
--warning-soft: #92400e; /* readable amber-brown for text sitting on --warning-light chips on this light ground */
--warning-light: rgba(245, 158, 11, 0.16);
--info: #0ea5e9;
--info-light: rgba(14, 165, 233, 0.13);
--text: #334155; /* --color-text-dark */
--text-light: #4b5b71;
--text-muted: #6c7d93;
/* Default page background - a clean, cool-neutral dashboard background
rather than a tinted "SaaS blue-white", so cards and photography sit on
a calmer, less templated ground. */
--bg: #f8fafc; /* --color-bg-light */
--bg-white: #ffffff;
--bg-elevated: #eef2f6;
--border: #dce3ea;
--border-strong: #c3ccd6;
--shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.06);
--shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
--shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.1), 0 4px 6px -4px rgb(15 23 42 / 0.07);
--shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.12), 0 8px 10px -6px rgb(15 23 42 / 0.08);
/* A tighter, less "bubbly-default-template" radius scale - crisp rather
than uniformly rounded. */
--radius: 0.375rem;
--radius-lg: 0.625rem;
--radius-xl: 0.875rem;
/* Signature corner cut used on primary buttons and a few brand touches -
see .btn-primary / .btn-secondary below - a small deliberate detail
nodding at instrument-panel switches rather than a stock rounded pill. */
--notch: 10px;
--transition: all 0.2s ease-in-out;
/* Industrial, structured hierarchy: Oswald carries H1-H4 in uppercase
with tracked letter-spacing (the "read me first" headline tier, styled
like instrument-panel labeling). Body copy and smaller UI text (H5-H6,
labels, the brand wordmark) stay on Open Sans - a highly readable
workhorse sans that keeps long-form dashboard text calm and legible. */
--font-heading: 'Oswald', 'Segoe UI', Helvetica, Arial, sans-serif;
--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--font-serif: var(--font-heading);
--font-sans: var(--font-body);
--font-display: var(--font-sans);
--font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--text);
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
}
/* Typography */
/* H1-H4: Oswald headline tier - uppercase, tracked letter-spacing for a
rugged, structured, instrument-panel look. */
h1, h2, h3, h4 {
font-family: var(--font-heading);
text-transform: uppercase;
letter-spacing: 0.03em;
color: var(--primary);
line-height: 1.2;
}
/* H5-H6: Open Sans, sits with body copy rather than the headline tier. */
h5, h6 { font-family: var(--font-body); font-weight: 700; line-height: 1.15; color: var(--text); letter-spacing: -0.01em; text-transform: none; }
h1 { font-size: 2.75rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 2rem; font-weight: 500; line-height: 1.3; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.25rem; font-weight: 600; }
p { color: var(--text-light); }
a { text-decoration: none; color: inherit; transition: var(--transition); }
.eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--accent); font-weight: 600; }
/* Layout */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.section { padding: 5rem 0; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius);
font-weight: 600; font-size: 0.95rem; cursor: pointer; border: none;
transition: var(--transition); white-space: nowrap;
}
/* A clipped top-right corner is the site's one recurring shape signature -
it shows up here, on the logo mark, and on the readout panel - so filled
buttons read as a deliberately designed instrument rather than a stock
rounded pill borrowed from a template. Outline/ghost/form controls stay
plain rounded rectangles so text-heavy UI stays calm. */
.btn-primary, .btn-secondary {
clip-path: polygon(0 0, calc(100% - var(--notch)) 0, 100% var(--notch), 100% 100%, 0 100%);
border-radius: 0;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
color: white; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 10px -4px rgba(2, 132, 199, 0.45);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(2, 132, 199, 0.55); }
.btn-primary:active { transform: translateY(0); filter: brightness(0.97); }
.btn-secondary { background: var(--primary); color: white; }
.btn-secondary:hover { background: var(--primary-light); }
.btn-outline { background: transparent; border: 2px solid var(--border-strong); color: var(--text); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.btn-ghost { background: transparent; color: var(--text-light); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; --notch: 7px; }
.btn-lg { padding: 1rem 2rem; font-size: 1.1rem; --notch: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }
/* Cards */
.card {
position: relative;
background: var(--bg-white); border-radius: var(--radius-lg);
box-shadow: var(--shadow); border: 1px solid var(--border);
overflow: hidden; transition: var(--transition);
}
/* A thin accent bar draws in along the top edge on hover instead of the
card just lifting - a quieter, more considered "this is alive" cue than
the shadow-and-transform combo every template card uses. */
.card::before {
content: ''; position: absolute; top: 0; left: 0; right: 100%; height: 3px;
background: linear-gradient(90deg, var(--accent), var(--info));
transition: right 0.25s ease;
}
.card:hover::before { right: 0; }
.card:hover { box-shadow: var(--shadow); border-color: var(--border); }
.card-header { padding: 1.5rem; border-bottom: 1px solid var(--border); }
.card-body { padding: 1.5rem; }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg); }
/* Forms */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--text); }
.form-input, .form-select, .form-textarea {
width: 100%; padding: 0.75rem 1rem; border: 2px solid var(--border);
border-radius: var(--radius); font-size: 0.95rem; transition: var(--transition);
background: var(--bg-white); color: var(--text);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.14);
}
.form-input::placeholder { color: var(--text-muted); }
.form-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.form-error { font-size: 0.8rem; color: var(--danger); margin-top: 0.25rem; display: none; }
.form-group.has-error .form-input { border-color: var(--danger); }
.form-group.has-error .form-error { display: block; }
/* Navigation */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
/* High opacity on purpose: this sits over the dark hero on every page that
has one, and backdrop-filter isn't guaranteed everywhere (older
browsers, some rendering paths skip it entirely) - at low opacity that
combination lets hero text ghost through the navbar unblurred. Near-
opaque keeps the glass look in browsers that do blur it, and stays
legible/solid everywhere else. */
background: rgba(255,255,255,0.96); backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
/* A thin navy-to-orange strip stands in for a physical instrument-panel
top edge - navy (trust) into the "heating" orange, echoing the same two
brand tones used for the urgent CTA below. */
border-top: 3px solid var(--primary);
border-image: linear-gradient(90deg, var(--primary) 0%, var(--hvac-orange) 100%) 1;
border-bottom: 1px solid var(--border); transition: var(--transition);
}
.navbar.scrolled { box-shadow: var(--shadow); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.logo {
display: flex; align-items: center; gap: 0.75rem;
font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem;
text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary);
}
/* --- The logo mark ---------------------------------------------------------
`.logo-icon` is the square slot the brand mark sits in. It ships holding a
Font Awesome gauge glyph, which needs a frame to read as a mark at all -
the gradient fill, the clipped top-right corner, the drop shadow.
A real logo needs none of that, and the frame actively damaged it: the
clip-path sliced a notch out of the top-right corner of every uploaded
image, the gradient showed through anything transparent, and `object-fit:
cover` cropped the sides off anything that wasn't already square.
So the moment an image goes in, js/app.js adds `has-logo` and all of it
comes off. What's left is a square box with the artwork laid over it at a
true 1:1 aspect ratio, sized to fit whole (`contain`) rather than cropped
to fill. Keeping the slot square regardless of the source file's
proportions is what makes the mark line up with the wordmark beside it on
every page, at every breakpoint. */
.logo-image {
width: 100%; height: 100%; display: block;
object-fit: contain; object-position: center;
border-radius: 0; background: transparent;
}
.logo-icon {
width: 40px; height: 40px; aspect-ratio: 1 / 1; flex-shrink: 0;
background: linear-gradient(135deg, var(--primary), var(--accent));
clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
display: flex; align-items: center; justify-content: center; color: white; font-size: 1.25rem;
box-shadow: 0 3px 8px -2px rgba(2, 132, 199, 0.5);
overflow: visible;
}
.logo-icon.has-logo {
background: none;
clip-path: none;
box-shadow: none;
border-radius: 0;
padding: 0;
overflow: visible;
}
/* On the dark navy surfaces - the footer on every page, and the sign-in
panel on login.html - a transparent logo with dark ink in it would simply
disappear into the background. A white disc sits BEHIND the artwork (the
image is still drawn at full size on top of it, so nothing is cut off or
covered) to give it something to read against. The default seal is round,
so the disc reads as part of the mark. */
.footer .logo-icon.has-logo,
.auth-sidebar .logo-icon.has-logo {
background: #ffffff;
border-radius: 50%;
padding: 2px;
}
/* Nav links read like instrument labels - small mono caps with tracking -
rather than the plain-prose nav text most template navbars ship with. */
.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; }
.nav-links a {
font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-light); position: relative;
}
.nav-links a:hover, .nav-links a.active { color: var(--accent); }
.nav-links a::after {
content: ''; position: absolute; left: 50%; right: 50%; bottom: -6px; height: 2px;
background: var(--accent); transition: left 0.18s ease-in-out, right 0.18s ease-in-out;
border-radius: 2px;
}
.nav-links a:hover::after, .nav-links a.active::after { left: 0; right: 0; }
/* --- Signed-in header: one menu, the hamburger ----------------------------
For a signed-in Technician or Employer the header carries exactly one
menu. The account caret dropdown that used to sit beside the avatar is
gone, and Edit Profile / Log Out now live in the hamburger panel with the
page navigation (App.buildNavMenu() in js/app.js adds both, and adds
`nav-collapsed` to ).
That only works if the hamburger is reachable at every width, so these
rules give `.nav-links` the same dropdown-panel treatment on a desktop
that it has always had on a phone, rather than leaving a signed-in
desktop visitor with no Profile or Log Out control in the header at all.
They are scoped to body.nav-collapsed, so a signed-out visitor still gets
the ordinary inline nav row at desktop widths, unchanged.
Specificity note: these intentionally outrank the width-scoped
`.nav-links` rules further down the file, so the panel behaves the same
above and below the 768px breakpoint. */
body.nav-collapsed .nav-links {
display: none;
position: absolute;
top: 100%; left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
background: var(--bg-white);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-lg);
padding: 0.5rem 0;
max-height: calc(100vh - 72px);
overflow-y: auto;
}
body.nav-collapsed .nav-links.active { display: flex; }
body.nav-collapsed .nav-links li { width: 100%; }
body.nav-collapsed .nav-links a { display: block; padding: 0.9rem 1.5rem; font-size: 0.85rem; }
body.nav-collapsed .nav-links a::after { display: none; }
body.nav-collapsed .mobile-menu-btn { display: block; }
/* The account block at the foot of that panel. Separated from the page
links above it so "Log Out" never reads as just another destination. */
.nav-account-heading {
margin-top: 0.4rem;
padding: 0.75rem 1.5rem 0.3rem;
border-top: 1px solid var(--border);
font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-muted);
}
.nav-account-item a { display: flex !important; align-items: center; gap: 0.65rem; }
.nav-account-item a i { width: 16px; text-align: center; }
.nav-actions { display: flex; align-items: center; gap: 1rem; }
/* The header's own CTA (Log In / Get Started) is the one place the "urgent
CTA" heating-orange gets used, so it reads as the one clear next action
in the header without recoloring every primary button site-wide. */
.nav-actions .btn-primary {
background: linear-gradient(135deg, var(--hvac-orange) 0%, var(--hvac-orange-hover) 100%);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 10px -4px rgba(234, 88, 12, 0.5);
}
.nav-actions .btn-primary:hover { box-shadow: 0 8px 20px -6px rgba(234, 88, 12, 0.6); }
.user-menu { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; }
/* Signed-in header controls - markup built by App.buildUserMenu() in
js/app.js. The notifications bell mounts itself into this same container
at whatever position it lands, so the running order of the three controls
is pinned here instead of by DOM position: avatar/dashboard button, then
bell, then the account caret. */
.user-menu .user-home-btn { order: 1; }
.user-menu .notif-bell-wrap { order: 2; }
/* The avatar button goes to the person's dashboard, not their profile
settings, so it is styled to read as a destination rather than a bare
avatar: a raised pill carrying the account name and an explicit
"Dashboard" tag. */
.user-home-btn {
display: flex; align-items: center; gap: 0.5rem;
padding: 0.35rem 0.6rem 0.35rem 0.4rem;
border: 1px solid var(--border); border-radius: 9999px;
background: var(--bg-white);
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.user-home-btn:hover, .user-home-btn.active {
border-color: var(--accent);
box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.28);
}
.user-home-btn .user-avatar {
width: 32px; height: 32px; border-radius: 50%; color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 0.875rem; flex-shrink: 0;
background-size: cover; background-position: center;
}
.user-home-btn .user-name {
font-weight: 600; max-width: 150px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.user-home-tag {
display: inline-flex; align-items: center; gap: 0.3rem;
padding: 0.15rem 0.5rem; border-radius: 9999px;
background: var(--accent-light); color: var(--accent);
font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.03em; white-space: nowrap;
}
.user-home-tag i { font-size: 0.7rem; }
/* Notifications bell + dropdown - see js/notifications.js. Mounted into
every .user-menu on the page for a signed-in Technician or Employer. */
.notif-bell-wrap { position: relative; display: flex; align-items: center; }
.notif-bell { position: relative; padding: 0.5rem 0.65rem !important; }
.notif-badge {
position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
border-radius: 9999px; background: var(--danger, #dc2626); color: #fff; font-size: 0.65rem;
font-weight: 700; line-height: 16px; text-align: center;
}
.notif-panel {
position: absolute; top: calc(100% + 10px); right: 0; width: 320px; max-width: 88vw;
max-height: 420px; overflow-y: auto; background: var(--bg-white); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25); z-index: 200;
}
/* Below ~480px the bell doesn't sit flush with the screen's right edge (the
user menu/avatar and, on most pages, the hamburger button both take up
space to its right), so anchoring the panel with `right: 0` off the bell
itself runs it off the LEFT edge of the screen at common phone widths
(390px, 375px, 360px and more all clipped part of the panel before this).
Switching to viewport-fixed positioning here guarantees the whole panel
- header, list, and its edges - stays fully on-screen regardless of
where the bell happens to sit in the header. */
@media (max-width: 480px) {
.notif-panel {
position: fixed;
top: 64px;
left: 0.75rem;
right: 0.75rem;
width: auto;
max-width: none;
max-height: min(420px, calc(100vh - 64px - 5rem));
}
}
.notif-panel-header {
display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1rem;
border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-white);
}
.notif-mark-read { background: none; border: none; color: var(--accent); font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }
/* Separator between the "No new messages." banner and the already-read
notification history kept below it (see renderList in js/notifications.js). */
.notif-panel-divider {
padding: 0.45rem 1rem; font-family: var(--font-mono); font-size: 0.65rem;
text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted);
background: var(--bg); border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.notif-item {
display: block; width: 100%; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
text-decoration: none; color: var(--text); background: none; border-left: none; border-right: none; border-top: none;
text-align: left; font: inherit; cursor: pointer;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: var(--accent-light); }
.notif-item-title { font-weight: 600; font-size: 0.875rem; }
.notif-item-body { font-size: 0.8rem; color: var(--text-light); margin-top: 0.2rem; }
.notif-item-time { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.35rem; }
/* Small on/off switch reused for notification preferences and similar
per-account toggles. Markup: */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; cursor: pointer; inset: 0; background: var(--border); border-radius: 24px; transition: 0.2s; }
.switch-track::before { content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.2s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::before { transform: translateX(18px); }
.mobile-menu-btn { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text); }
/* Hero */
.hero {
position: relative; padding: 9rem 0 5rem; overflow: hidden;
background: linear-gradient(160deg, var(--primary) 0%, var(--primary-light) 60%, #1e3a5f 100%);
}
.hero::before {
content: ''; position: absolute; inset: 0; opacity: 0.5;
background-image:
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
background-size: 42px 42px;
mask-image: radial-gradient(circle at 30% 30%, black 0%, transparent 70%);
}
.hero::after {
content: ''; position: absolute; top: -20%; right: -10%; width: 55%; height: 90%;
background: radial-gradient(circle, rgba(2, 132, 199, 0.35) 0%, transparent 70%);
pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; align-items: center; }
.hero-content { position: relative; z-index: 1; text-align: left; max-width: 620px; }
.hero .eyebrow { color: #93c5fd; }
.hero h1 { color: white; margin: 1rem 0 1.5rem; font-size: 3rem; }
.hero h1 span { color: #60a5fa; position: relative; }
.hero p { color: rgba(255,255,255,0.92); font-size: 1.15rem; margin-bottom: 2.25rem; max-width: 540px; }
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Readout panel - signature hero element, styled like a technician's gauge cluster */
.readout-panel {
position: relative; background: rgba(13, 27, 42, 0.55); border: 1px solid rgba(255,255,255,0.12);
border-radius: var(--radius-xl); padding: 1.75rem; backdrop-filter: blur(6px);
box-shadow: var(--shadow-xl);
}
.readout-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px dashed rgba(255,255,255,0.15); }
.readout-header span { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.readout-live { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; color: #7fe3a3; }
.readout-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7fe3a3; box-shadow: 0 0 0 0 rgba(127,227,163,0.7); animation: pulseDot 2s infinite; }
@keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(127,227,163,0.5); } 70% { box-shadow: 0 0 0 8px rgba(127,227,163,0); } 100% { box-shadow: 0 0 0 0 rgba(127,227,163,0); } }
.readout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-bottom: 1.25rem; }
.readout-cell { background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.09); border-radius: var(--radius); padding: 0.9rem 1rem; }
/* Skills / Certifications / EPA 608 / Availability - readable sans-serif
labeling in a calm, neutral tone rather than the mono "gauge" numerals
used elsewhere in this panel, since these are profile facts an employer
reads as text, not live telemetry. */
.readout-cell-label {
font-family: var(--font-body); font-size: 0.7rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.07em;
color: rgba(226, 232, 240, 0.6); margin-bottom: 0.4rem;
}
.readout-cell-value {
font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
color: #eef2f7; line-height: 1.35;
}
/* Status-style values (EPA 608, Availability) get a quiet pill rather than
neon full-text color - the checkmark carries the "verified/good" signal
so the label itself can stay neutral and easy to read. */
.readout-cell-value.status {
display: inline-flex; align-items: center; gap: 0.4rem;
background: rgba(226, 232, 240, 0.1); border: 1px solid rgba(226, 232, 240, 0.16);
padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.85rem;
}
.readout-cell-value.status i { color: #4ade80; font-size: 0.8rem; }
.readout-note { font-size: 0.85rem; color: rgba(255,255,255,0.8); display: flex; gap: 0.6rem; align-items: flex-start; }
.readout-note i { color: #7fe3a3; margin-top: 0.15rem; }
/* Growth strip - replaces raw vanity metrics with momentum messaging */
.growth-strip { display: flex; justify-content: center; gap: 2.5rem; margin-top: 3.5rem; flex-wrap: wrap; }
.growth-item { display: flex; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.93); font-size: 0.95rem; max-width: 260px; }
.growth-item i { color: #60a5fa; font-size: 1.1rem; }
/* Section Headers */
.section-header { text-align: center; max-width: 600px; margin: 0 auto 3rem; }
.section-header h2 { margin-bottom: 1rem; }
.section-header p { font-size: 1.125rem; }
.badge {
display: inline-flex; align-items: center; gap: 0.5rem;
padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 600;
}
.badge-accent { background: var(--accent-light); color: var(--accent-soft); }
.badge-success { background: var(--success-light); color: var(--success); }
.badge-info { background: var(--info-light); color: var(--info); }
/* Admin-adjustable home page section colors. Each defaults to the main
accent color/tint (set below) unless an admin overrides it in Admin
Settings > Website Customization, which writes --section-* directly onto
the root element (see js/config.js applySectionColor). */
:root {
--section-process: var(--accent);
--section-process-light: var(--accent-light);
--section-knowledge: var(--accent);
--section-knowledge-light: var(--accent-light);
--section-pricing: var(--accent);
--section-pricing-light: var(--accent-light);
}
.badge-section-process { background: var(--section-process-light); color: var(--section-process); }
.badge-section-knowledge { background: var(--section-knowledge-light); color: var(--section-knowledge); }
.badge-section-pricing { background: var(--section-pricing-light); color: var(--section-pricing); }
#pricing .pricing-card.featured { border-color: var(--section-pricing); }
/* Feature Cards */
.feature-card { padding: 2rem; text-align: center; }
.feature-icon {
width: 64px; height: 64px; border-radius: var(--radius-lg);
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1.5rem; font-size: 1.5rem;
}
.feature-icon.orange { background: var(--accent-light); color: var(--accent); }
.feature-icon.blue { background: var(--info-light); color: var(--info); }
.feature-icon.green { background: var(--success-light); color: var(--success); }
.feature-card h3 { margin-bottom: 0.75rem; font-size: 1.25rem; }
/* Feature rows - editorial list replacing the uniform 3-up icon grid */
.feature-rows { border-top: 1px solid var(--border); }
.feature-row {
display: grid; grid-template-columns: 90px 1fr; gap: 1.75rem;
padding: 2rem 0; border-bottom: 1px solid var(--border);
}
.feature-row-index { font-family: var(--font-mono); font-size: 0.85rem; color: var(--accent); padding-top: 0.35rem; }
.feature-row h3 { margin-bottom: 0.5rem; }
.feature-row p { max-width: 640px; }
/* "Why Skill Ready Techs" (index.html > section#features) - white copy.
------------------------------------------------------------------------
This section previously inherited the light page background (--bg) with
dark --text copy on top of it. White text alone would have been invisible
there, so the section is given the deep navy primary surface as a
backdrop and every piece of copy inside it is set to white. It now reads
as a deliberate dark band between the two light sections either side of
it, matching the hero and footer, which use the same navy.
To revert to dark-on-light: delete this whole block. To keep the white
text but drop the dark band, remove only the `background` and
`border-top`/`border-bottom` declarations from #features below - but note
the copy will then be unreadable on a light background. */
#features {
background: linear-gradient(160deg, var(--primary) 0%, var(--primary-light) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.08);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
#features .section-header h2,
#features .feature-row h3 { color: #ffffff; }
#features .section-header p,
#features .feature-row p { color: rgba(255, 255, 255, 0.92); }
/* The eyebrow label and the 01-07 row numbers keep the accent hue, lightened
so they stay legible against the navy rather than disappearing into it. */
#features .eyebrow { color: #93c5fd; }
#features .feature-row-index { color: #93c5fd; }
/* Row rules have to lighten too - the default --border is a light grey that
is invisible on this ground. */
#features .feature-rows { border-top-color: rgba(255, 255, 255, 0.16); }
#features .feature-row { border-bottom-color: rgba(255, 255, 255, 0.16); }
/* The generic ".section + .section" separator that js/../styles.css draws
between sections would show as a light seam on top of the navy. */
#features::before { display: none; }
/* How It Works - For Technicians / For Employers side-by-side comparison.
Each side gets its own tinted card (accent blue vs. info blue, matching
the numbered-step circles already used inside each column) with a top
accent bar, so the two audiences read as clearly separate tracks rather
than one continuous list that happens to have a heading in the middle. */
.how-it-works-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start;
}
.how-it-works-col {
position: relative; padding: 2rem 1.75rem 1.75rem; border-radius: var(--radius-lg);
border: 1px solid var(--border); overflow: hidden;
}
.how-it-works-col::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.how-it-works-col-tech { background: var(--section-process-light); }
.how-it-works-col-tech::before { background: var(--section-process); }
.how-it-works-col-employer { background: var(--info-light); }
.how-it-works-col-employer::before { background: var(--info); }
@media (max-width: 768px) {
.how-it-works-grid { grid-template-columns: 1fr; gap: 2rem; }
.how-it-works-col { padding: 1.75rem 1.5rem 1.5rem; }
}
/* Pricing */
.pricing-card { position: relative; padding: 2rem; text-align: center; transition: opacity 0.25s ease, transform 0.25s ease; }
.pricing-card.featured { border: 2px solid var(--accent); transform: scale(1.05); box-shadow: 0 12px 28px -12px rgba(2, 132, 199, 0.35); }
/* Employer-tier label - every pricing card except Technician gets this, so
a mobile visitor scrolling through stacked, single-column cards (see the
768px breakpoint below) can tell at a glance which tier belongs to which
audience without having to scroll back up to the section intro copy. */
.pricing-employer-label {
display: none; font-family: var(--font-mono); font-size: 0.95rem; font-weight: 800;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--info);
background: var(--info-light); padding: 0.35rem 0.9rem; border-radius: 9999px; margin-bottom: 0.85rem;
}
@media (max-width: 768px) {
.pricing-employer-label { display: inline-block; }
}
.pricing-price { font-size: 3rem; font-weight: 800; color: var(--text); margin: 1rem 0; }
.pricing-price span { font-size: 1rem; color: var(--text-muted); font-weight: 400; }
.pricing-features { list-style: none; margin: 2rem 0; text-align: left; }
.pricing-features li { padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; }
.pricing-features li i { color: var(--success); }
/* Admin Settings > Business & Growth can individually hide/show each
employer plan tier (Starter / Professional / Enterprise) - see
App.applyBranding() in js/app.js, which toggles each plan card's
display between '' and 'none'. A fixed 4-column grid-template-columns
would leave a dangling empty column whenever a tier is hidden, since
CSS grid keeps the track count even when a track has nothing left in it.
auto-fit re-flows around whatever is actually visible: it collapses any
track with no item in it to zero width and lets the remaining cards
grow to fill the row, so the pricing section re-spaces itself correctly
no matter how many tiers are currently visible - 1, 2, 3, or all 4 -
with no JS layout logic needed. Higher specificity (ID selector) than
the general .grid-4 rule (including its breakpoint override below), so
this always wins regardless of viewport width. */
#pricing-grid.pricing-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Dashboard */
.dashboard { padding-top: 96px; min-height: 100vh; }
.dashboard-sidebar {
width: 280px; background: var(--bg-white); border-right: 1px solid var(--border);
height: calc(100vh - 72px); position: fixed; left: 0; top: 72px; overflow-y: auto;
padding: 1.5rem; z-index: 100;
}
.dashboard-main { margin-left: 280px; padding: 2rem; min-height: calc(100vh - 72px); }
.sidebar-menu { list-style: none; }
.sidebar-menu li { margin-bottom: 0.25rem; }
.sidebar-menu a {
display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem;
border-radius: var(--radius); color: var(--text-light); font-weight: 500;
position: relative; border-left: 3px solid transparent; transition: var(--transition);
}
.sidebar-menu a:hover, .sidebar-menu a.active { background: var(--accent-light); color: var(--accent-soft); }
.sidebar-menu a.active { border-left-color: var(--accent); font-weight: 600; }
.sidebar-menu a:hover { transform: translateX(2px); }
.sidebar-menu a.active:hover { transform: none; }
.sidebar-menu a i { width: 20px; text-align: center; }
.sidebar-section { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.sidebar-section-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.075em; color: var(--text-muted); margin-bottom: 0.75rem; font-weight: 700; }
/* Stats Cards */
.stat-card { padding: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.stat-icon { width: 48px; height: 48px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.stat-icon.blue { background: var(--info-light); color: var(--info); }
.stat-icon.green { background: var(--success-light); color: var(--success); }
.stat-icon.orange { background: var(--accent-light); color: var(--accent); }
.stat-icon.red { background: var(--danger-light); color: var(--danger); }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.stat-label { font-size: 0.875rem; color: var(--text-light); letter-spacing: 0.075em; text-transform: uppercase; font-weight: 700; }
/* Progress */
.progress-bar-bg { width: 100%; height: 8px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: 9999px; transition: width 0.5s ease; }
.progress-bar-fill.success { background: var(--success); }
.progress-bar-fill.info { background: var(--info); }
/* Tables */
.table-container { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.table th { font-weight: 600; color: var(--text-light); font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg); }
.table tr:hover { background: var(--bg); }
.table td { font-size: 0.95rem; }
/* Tags */
.tag { display: inline-flex; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; }
.tag-blue { background: #dbe8fb; color: #17509c; }
.tag-green { background: #d7f5e6; color: #056e4a; }
.tag-orange { background: var(--accent-light); color: var(--accent-soft); }
.tag-gray { background: #e8edf5; color: #35455c; }
/* Search Techs - distance search map (js/geosearch.js, Leaflet + OpenStreetMap) */
#tech-map { position: relative; }
#tech-map.hidden { display: none; }
.geo-origin-marker { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hvac-orange); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.35); font-size: 0.9rem; }
.leaflet-popup-content { font-family: inherit; font-size: 0.85rem; }
/* Modals */
.modal-overlay {
position: fixed; inset: 0; background: rgba(15, 23, 42, 0.5); z-index: 2000;
display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
transition: var(--transition);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal {
background: var(--bg-white); border-radius: var(--radius-xl); max-width: 500px; width: 90%;
max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-xl); transform: scale(0.95);
transition: var(--transition); color: var(--text);
}
.modal-overlay.active .modal { transform: scale(1); }
.modal-header { padding: 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.modal-close { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: var(--text-muted); flex-shrink: 0; }
.modal-close:hover { color: var(--text); }
/* A "compose" row (a message/reply textarea plus its send button side by
side) - used by the New Message modal (admin.html) and the notification
reply window (js/notifications.js). Stacks on narrow phone widths (see
the 480px query below) instead of squeezing the textarea and button into
a row too tight to use. */
.message-compose-row { display: flex; gap: 0.5rem; align-items: flex-end; }
/* Message-view surface: every place an actual message body is displayed for
reading - the employer<->technician conversation windows, the admin<->user
message thread (both on admin.html and on each dashboard), the notification
reply detail modal, and the admin Message Inbox (contact-form submissions).
Deliberately fixed to black text on a white card in a slim, low-contrast
grey frame - independent of the accent color, dark/light section context,
or which side sent it - so the message content itself always reads as
clearly as possible instead of taking on a tinted "bubble" background that
can wash out with certain accent colors. Sender is distinguished only by
the alignment/label above the bubble, not by giving it a different fill. */
.msg-bubble {
background: #ffffff;
color: #14181f;
border: 1px solid #d7dce2;
border-radius: var(--radius);
padding: 0.6rem 0.85rem;
font-size: 0.875rem;
line-height: 1.5;
white-space: pre-wrap;
word-break: break-word;
}
/* The admin Message Inbox card (contact-form submissions) and any other
"view message" surface that isn't a chat bubble but still needs the same
explicit black-on-white treatment. */
.msg-surface {
background: #ffffff;
color: #14181f;
border: 1px solid #d7dce2;
border-radius: var(--radius);
}
/* Wraps a whole scrollable message thread (a series of .msg-bubble elements)
in the same low-contrast grey frame the per-conversation cards on the
Employer/Technician "conversations" list already get, so every message
thread on the site - the admin<->user thread on both dashboards, the
admin's own Message User modal, and the notification reply detail modal -
reads the same way: black-on-white bubbles sitting inside a grey frame,
never floating directly on a white card/modal background. Applies equally
on mobile - nothing here is width- or breakpoint-dependent. */
.msg-thread-frame {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 0.75rem;
}
/* File viewer (EPA 608 card + other credentials) - PDF branch. The "Open
PDF" call-to-action always sits above the inline