/* ==========================================================================
medca-theme.css
Brand tokens extracted from medcainc.com's live theme (MedCa / Twenty
Sixteen child theme). Built to give the internal PHP app (School's
menu.php, and anywhere else it's needed) a visual identity consistent
with the public site, without pulling in the site's actual WordPress/
Bootstrap/Slick asset stack -- this is a standalone, dependency-free
stylesheet.
========================================================================== */
/* Add these to your alongside this stylesheet:
*/
:root {
/* Core palette -- sampled directly from the official letterhead
(Top_of_Portal_template.doc): the "MedCA Certifications" wordmark,
the gold seal ring, and the seal's red star/accent. This replaces
the earlier medcainc.com-website-derived palette (magenta/teal),
which didn't match the company's actual letterhead branding. */
--medca-primary: #a50021; /* true wordmark maroon -- buttons, link accents, fail badge */
--medca-primary-hover-bg: #f7ecd0; /* warm gold-tinted hover, replaces plain gray */
--medca-primary-hover-text: #333333;
--medca-gold: #e6a515; /* seal ring gold -- header underline, accents */
--medca-secondary: #6b4e00; /* dark gold-brown, replaces navy for secondary buttons/hover */
--medca-navy: #174977; /* kept for anywhere navy is still wanted; no longer used in header */
--medca-body-text: #2f4149;
/* Warm gold-tinted gray, echoing the seal's ring color -- kept for
anywhere a light neutral tint is still wanted; no longer used by
table headers, see --medca-table-header-gradient below. */
--medca-light-bg: #f2ecd9;
/* Sampled directly from medcainc.com's live main-nav bar (teal-blue
to maroon/rose). Used for table column headers, not the page
header itself -- that stays the plain white letterhead. */
--medca-table-header-gradient: linear-gradient(90deg, #2d89b3, #a72854);
--medca-border: #e0e0e0;
--medca-white: #ffffff;
/* Retained for reference / anywhere the old gradient banner is still
wanted elsewhere -- no longer used by .medca-header below. */
--medca-gradient: linear-gradient(293deg, #08a8c4, #e40c74);
/* Typography */
--medca-font-body: 'Lato', Arial, sans-serif;
--medca-font-heading: 'Montserrat', Arial, sans-serif;
--medca-font-brand: 'Times New Roman', Georgia, Garamond, serif; /* matches the letterhead wordmark */
}
/* ---------- Base ---------- */
body.medca-themed {
font-family: var(--medca-font-body);
color: var(--medca-body-text);
background: #f2f2f2;
margin: 0;
padding: 0;
}
.medca-themed h1,
.medca-themed h2,
.medca-themed h3 {
font-family: var(--medca-font-heading);
font-weight: 700;
margin: 0;
}
/* ---------- Letterhead (top-of-portal branding) ----------
Exact match to the official letterhead: logo, "MedCA Certifications"
wordmark, phone number, tagline. This is the fixed company brand
block -- identical on every page, regardless of role or school. */
.medca-letterhead {
background: var(--medca-white);
padding: 22px 28px 18px 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 24px;
border-bottom: 4px solid var(--medca-gold);
text-align: center;
}
.medca-letterhead .medca-logo {
height: 110px;
width: auto;
flex-shrink: 0;
}
.medca-letterhead .medca-brand-name {
font-family: var(--medca-font-brand);
font-style: italic;
font-weight: 700;
font-size: 40px;
color: var(--medca-primary);
line-height: 1.15;
}
.medca-letterhead .medca-brand-phone {
font-family: var(--medca-font-brand);
font-size: 18px;
color: #000000;
margin-top: 4px;
}
.medca-letterhead .medca-brand-tagline {
font-family: var(--medca-font-brand);
font-style: italic;
font-size: 16px;
color: #000000;
margin-top: 8px;
}
/* ---------- Letterhead size variant 2 (larger) ----------
Add "medca-letterhead--lg" alongside "medca-letterhead" on the wrapper
div to use this size instead of the default above. */
.medca-letterhead.medca-letterhead--lg {
padding: 28px 28px 22px 28px;
gap: 28px;
}
.medca-letterhead--lg .medca-logo {
height: 130px;
}
.medca-letterhead--lg .medca-brand-name {
font-size: 48px;
}
.medca-letterhead--lg .medca-brand-phone {
font-size: 20px;
margin-top: 5px;
}
.medca-letterhead--lg .medca-brand-tagline {
font-size: 18px;
margin-top: 9px;
}
/* ---------- Portal bar (per-page app title + nav) ----------
Sits directly below the letterhead, separated from it by the gold
rule above. Left: page/app title + school name (varies per role and
per school). Right: nav links (Change Password / Change Email /
Log Out). Deliberately plain/functional styling -- the brand identity
lives in the letterhead above, this bar is the working tool. */
.medca-portal-bar {
background: var(--medca-white);
padding: 12px 28px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
border-bottom: 1px solid var(--medca-border);
}
.medca-portal-bar .medca-title {
font-family: var(--medca-font-heading);
font-weight: 700;
font-size: 20px;
color: var(--medca-body-text);
}
.medca-portal-bar .medca-title small {
display: block;
font-family: var(--medca-font-body);
font-weight: 400;
font-size: 13px;
color: #666666;
margin-top: 2px;
}
/* ---------- Nav links (Change Password / Change Email / Log Out, etc.) ---------- */
.medca-nav {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.medca-nav a {
color: var(--medca-primary);
text-decoration: none;
font-size: 14px;
font-weight: 600;
padding: 8px 14px;
border-radius: 3px;
transition: background 0.3s ease, color 0.3s ease;
}
.medca-nav a:hover {
background: var(--medca-primary-hover-bg);
color: var(--medca-primary-hover-text);
}
/* ---------- Buttons ----------
Matches the site's consistent CTA pattern: solid primary color,
fades to light gray with dark text on hover. */
.medca-btn,
.medca-btn:visited {
display: inline-block;
background: var(--medca-primary);
color: var(--medca-white);
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
padding: 9px 18px;
border: none;
border-radius: 3px;
cursor: pointer;
transition: background 0.3s ease, color 0.3s ease;
}
.medca-btn:hover {
background: var(--medca-primary-hover-bg);
color: var(--medca-primary-hover-text);
}
.medca-btn-secondary {
background: var(--medca-secondary);
}
/* ---------- Filter bar / form controls ---------- */
.medca-filter-bar {
margin: 16px 20px;
padding: 14px 16px;
background: var(--medca-white);
border: 1px solid var(--medca-border);
border-radius: 4px;
display: flex;
flex-wrap: wrap;
align-items: end;
gap: 16px;
}
.medca-filter-bar label {
display: flex;
flex-direction: column;
font-size: 12px;
font-weight: 600;
color: #555;
gap: 4px;
}
.medca-filter-bar input,
.medca-filter-bar select {
padding: 6px 8px;
border: 1px solid var(--medca-border);
border-radius: 3px;
font-family: var(--medca-font-body);
}
/* ---------- Tables ---------- */
.medca-table-wrap {
margin: 16px 20px;
background: var(--medca-white);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.medca-table {
width: 100%;
border-collapse: collapse;
}
.medca-table th {
background: var(--medca-table-header-gradient);
text-align: left;
padding: 10px 12px;
font-size: 13px;
font-weight: 700;
color: var(--medca-white);
position: sticky;
top: 0;
}
.medca-table td {
padding: 8px 12px;
font-size: 13px;
border-top: 1px solid var(--medca-border);
}
.medca-table tr:nth-child(even) td {
background: #fafafa;
}
.medca-table a {
color: var(--medca-navy);
}
/* ---------- Status badges (Pass / Fail) ---------- */
.medca-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 3px;
font-size: 12px;
font-weight: 700;
color: var(--medca-white);
text-transform: uppercase;
}
.medca-badge-pass { background: #2e9e5b; }
.medca-badge-fail { background: var(--medca-primary); }
/* ---------- Meta / helper text ---------- */
.medca-meta {
margin: 12px 20px;
font-size: 14px;
color: #555;
}
/* ---------- Footer ----------
Simple divider + centered copyright line, matching the plain footer
treatment at the bottom of the official letterhead. */
.medca-footer {
margin-top: 24px;
padding: 14px 20px;
border-top: 1px solid var(--medca-border);
text-align: center;
font-size: 13px;
color: #555555;
}
/* ---------- Auth pages ----------
Shared building blocks for login, forgot/reset password, account
recovery, change password, change email -- anywhere the page is a
single centered form rather than a data table. Sits below the
letterhead (and portal-bar, for logged-in pages like change_password/
change_email). */
.medca-auth-page {
display: flex;
justify-content: center;
}
.medca-auth-wrap {
max-width: 440px;
width: 100%;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
.medca-auth-card {
background: var(--medca-white);
border: 1px solid var(--medca-border);
border-radius: 6px;
padding: 28px 32px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.medca-auth-card h1 {
font-family: var(--medca-font-heading);
font-size: 20px;
margin: 0 0 20px 0;
color: var(--medca-body-text);
}
.medca-form-group {
margin-bottom: 16px;
}
.medca-form-group label {
display: block;
font-size: 13px;
font-weight: 600;
color: #555555;
margin-bottom: 4px;
}
.medca-form-group input[type="text"],
.medca-form-group input[type="email"],
.medca-form-group input[type="password"],
.medca-form-group textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--medca-border);
border-radius: 3px;
font-family: var(--medca-font-body);
font-size: 14px;
box-sizing: border-box;
}
.medca-form-group textarea {
min-height: 70px;
resize: vertical;
}
.medca-alert-error {
color: var(--medca-primary);
background: #fdeaea;
border: 1px solid #f3c2c2;
padding: 10px 14px;
border-radius: 4px;
font-size: 13px;
margin-bottom: 16px;
}
.medca-alert-success {
color: #1e7a3a;
background: #e9f7ee;
border: 1px solid #b7e3c5;
padding: 10px 14px;
border-radius: 4px;
font-size: 13px;
margin-bottom: 16px;
}
.medca-auth-links {
margin-top: 16px;
font-size: 13px;
}
.medca-auth-links a {
color: var(--medca-navy);
text-decoration: underline;
}
.medca-auth-links p {
margin: 6px 0;
}