/* ============================================================
Modern Care Works, Web / Interactive Brand Stylesheet
Drop this into any HTML deliverable:
(Adjust the relative path to fonts/ if you move the file.)
------------------------------------------------------------
Palette discipline: Slate Blue leads, off-white/white carries
the page, Warm Gold is the SINGLE sharp accent. Never give gold
equal weight to slate; one gold emphasis per view.
============================================================ */
/* ---- Fonts (bundled in assets/fonts) ---- */
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/Montserrat-Regular.ttf") format("truetype");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/MontserratSemiBold-Regular.ttf") format("truetype");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("../assets/fonts/Montserrat-Bold.ttf") format("truetype");
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Open Sans";
src: url("../assets/fonts/OpenSans-Regular.ttf") format("truetype");
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Open Sans";
src: url("../assets/fonts/OpenSansSemiBold-Regular.ttf") format("truetype");
font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
font-family: "Open Sans";
src: url("../assets/fonts/OpenSans-Bold.ttf") format("truetype");
font-weight: 700; font-style: normal; font-display: swap;
}
/* ---- Design tokens ---- */
:root {
/* Brand palette */
--mcw-slate: #4A6FA5; /* primary, headings, structure, dark surfaces */
--mcw-slate-700: #3B5A86; /* hover / pressed slate */
--mcw-slate-900: #2C426A; /* deepest slate, dark surfaces */
--mcw-gold: #D4AF37; /* accent ONLY, sparingly */
--mcw-gold-soft: #EBD9A0; /* gold tint for fills/zebra-on-gold */
--mcw-canvas: #F9F9F6; /* off-white page background */
--mcw-ink: #1F2A37; /* body text on light */
--mcw-gray: #6B7280; /* secondary text, captions, footers */
--mcw-hairline: #E3E1D8; /* thin rules + borders on canvas */
--mcw-white: #FFFFFF;
/* Slate tints for surfaces, charts, risk states */
--mcw-slate-050: #EEF2F8;
--mcw-slate-100: #DCE4F0;
--mcw-slate-200: #B9C8E0;
/* Functional risk ramp (low -> high). Built from brand hues only:
calm slate for low, warm gold for the high-attention end. */
--mcw-risk-low: #4A6FA5; /* slate */
--mcw-risk-mod: #8A86A0; /* slate->gold midpoint */
--mcw-risk-high: #C99A3A; /* deepened gold for "needs attention" */
--mcw-risk-track: #E3E1D8; /* unfilled bar track */
/* Type */
--mcw-font-head: "Montserrat", system-ui, sans-serif;
--mcw-font-body: "Open Sans", system-ui, sans-serif;
/* Radii + elevation (restrained, clinical) */
--mcw-radius-sm: 6px;
--mcw-radius: 10px;
--mcw-radius-lg: 16px;
--mcw-shadow-sm: 0 1px 2px rgba(31,42,55,.06), 0 1px 3px rgba(31,42,55,.05);
--mcw-shadow: 0 2px 4px rgba(31,42,55,.05), 0 8px 24px rgba(31,42,55,.07);
--mcw-shadow-lg: 0 12px 40px rgba(31,42,55,.12);
/* Spacing scale (8pt) */
--mcw-s1: 4px; --mcw-s2: 8px; --mcw-s3: 12px; --mcw-s4: 16px;
--mcw-s5: 24px; --mcw-s6: 32px; --mcw-s7: 48px; --mcw-s8: 64px; --mcw-s9: 96px;
}
/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--mcw-font-body);
font-size: 16px;
line-height: 1.6;
color: var(--mcw-ink);
background: var(--mcw-canvas);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---- Type scale ---- */
.mcw-eyebrow {
font-family: var(--mcw-font-head);
font-weight: 600;
font-size: .75rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--mcw-gold);
margin: 0 0 var(--mcw-s3);
}
.mcw-title { /* hero, LOWERCASE, the signature treatment */
font-family: var(--mcw-font-head);
font-weight: 700;
text-transform: lowercase;
color: var(--mcw-slate);
line-height: 1.05;
letter-spacing: -.01em;
font-size: clamp(2.4rem, 5vw, 4rem);
margin: 0;
}
.mcw-h1 { font-family: var(--mcw-font-head); font-weight: 700; color: var(--mcw-slate); font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0 0 var(--mcw-s4); }
.mcw-h2 { font-family: var(--mcw-font-head); font-weight: 600; color: var(--mcw-slate); font-size: 1.5rem; line-height: 1.2; margin: 0 0 var(--mcw-s3); }
.mcw-h3 { font-family: var(--mcw-font-head); font-weight: 600; color: var(--mcw-slate); font-size: 1.125rem; line-height: 1.3; margin: 0 0 var(--mcw-s2); }
.mcw-subtitle { color: var(--mcw-gray); font-size: 1.125rem; line-height: 1.55; margin: 0; max-width: 60ch; }
.mcw-lead { font-size: 1.0625rem; color: var(--mcw-ink); }
.mcw-caption { font-size: .8125rem; color: var(--mcw-gray); }
p { text-wrap: pretty; }
a { color: var(--mcw-slate); text-decoration-color: var(--mcw-slate-200); text-underline-offset: 2px; }
/* ---- Layout helpers ---- */
.mcw-wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--mcw-s6); }
.mcw-stack > * + * { margin-top: var(--mcw-s4); }
.mcw-grid { display: grid; gap: var(--mcw-s5); }
/* ---- Surfaces ---- */
.mcw-card {
background: var(--mcw-white);
border: 1px solid var(--mcw-hairline);
border-radius: var(--mcw-radius);
box-shadow: var(--mcw-shadow-sm);
}
.mcw-panel { /* soft off-white panel for stats/charts */
background: var(--mcw-canvas);
border: 1px solid var(--mcw-hairline);
border-radius: var(--mcw-radius);
}
.mcw-slate-block { background: var(--mcw-slate); color: var(--mcw-white); }
.mcw-slate-block .mcw-title,
.mcw-slate-block .mcw-h1,
.mcw-slate-block .mcw-h2,
.mcw-slate-block .mcw-h3 { color: var(--mcw-white); }
.mcw-slate-block .mcw-subtitle { color: var(--mcw-slate-100); }
/* Gold-accented callout: thick gold left rule, otherwise quiet */
.mcw-callout {
background: var(--mcw-white);
border: 1px solid var(--mcw-hairline);
border-left: 4px solid var(--mcw-gold);
border-radius: var(--mcw-radius-sm);
padding: var(--mcw-s4) var(--mcw-s5);
}
/* ---- Buttons ---- */
.mcw-btn {
display: inline-flex; align-items: center; gap: var(--mcw-s2);
font-family: var(--mcw-font-head); font-weight: 600; font-size: .9375rem;
padding: 12px 22px; border-radius: var(--mcw-radius-sm);
border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .05s ease;
}
.mcw-btn:active { transform: translateY(1px); }
.mcw-btn--primary { background: var(--mcw-slate); color: var(--mcw-white); }
.mcw-btn--primary:hover { background: var(--mcw-slate-700); }
.mcw-btn--ghost { background: transparent; color: var(--mcw-slate); border-color: var(--mcw-slate-200); }
.mcw-btn--ghost:hover { background: var(--mcw-slate-050); }
/* ---- Pills / tags ---- */
.mcw-pill {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mcw-font-head); font-weight: 600; font-size: .75rem;
letter-spacing: .03em; padding: 4px 10px; border-radius: 999px;
background: var(--mcw-slate-050); color: var(--mcw-slate);
}
/* ---- Eyebrow numerals (gold) ---- */
.mcw-num { font-family: var(--mcw-font-head); font-weight: 700; color: var(--mcw-gold); }
/* ============================================================
Five Pillars of Risk, horizontal-bar scoring component
Order is canonical: Behavioral, Clinical, Functional, Financial, Legal.
Markup:
Set --v (0-100). Tint via data-level="low|mod|high" on .mcw-pillar.
============================================================ */
.mcw-pillars { display: grid; gap: var(--mcw-s3); }
.mcw-pillar {
display: grid;
grid-template-columns: 96px 1fr 40px;
align-items: center;
gap: var(--mcw-s4);
}
.mcw-pillar__name {
font-family: var(--mcw-font-head); font-weight: 600; font-size: .875rem; color: var(--mcw-ink);
}
.mcw-pillar__track {
position: relative; height: 10px; border-radius: 999px;
background: var(--mcw-risk-track); overflow: hidden;
}
.mcw-pillar__fill {
position: absolute; inset: 0; width: calc(var(--v, 0) * 1%);
border-radius: 999px; background: var(--mcw-slate);
transition: width .6s cubic-bezier(.22,.61,.36,1);
}
.mcw-pillar[data-level="low"] .mcw-pillar__fill { background: var(--mcw-risk-low); }
.mcw-pillar[data-level="mod"] .mcw-pillar__fill { background: var(--mcw-risk-mod); }
.mcw-pillar[data-level="high"] .mcw-pillar__fill { background: var(--mcw-risk-high); }
.mcw-pillar__val {
font-family: var(--mcw-font-head); font-weight: 700; font-size: .9375rem;
color: var(--mcw-slate); text-align: right;
}
/* Composite score ring helper (optional), set --score (0-100) on the element.
background uses a conic gradient; keep slate as the fill, gold reserved. */
.mcw-score-ring {
--score: 0;
width: 120px; height: 120px; border-radius: 50%;
display: grid; place-items: center;
background:
radial-gradient(closest-side, var(--mcw-white) 79%, transparent 80% 100%),
conic-gradient(var(--mcw-slate) calc(var(--score) * 1%), var(--mcw-risk-track) 0);
}
.mcw-score-ring__num { font-family: var(--mcw-font-head); font-weight: 700; font-size: 2rem; color: var(--mcw-slate); line-height: 1; }
.mcw-score-ring__lbl { font-family: var(--mcw-font-head); font-weight: 600; font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mcw-gray); }
/* ---- Tables (slate header, canvas zebra) ---- */
.mcw-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.mcw-table thead th {
background: var(--mcw-slate); color: var(--mcw-white);
font-family: var(--mcw-font-head); font-weight: 600; text-align: left;
padding: 12px 16px;
}
.mcw-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--mcw-hairline); }
.mcw-table tbody tr:nth-child(even) { background: var(--mcw-canvas); }
/* ---- Footer ---- */
.mcw-footer {
border-top: 2px solid var(--mcw-gold);
color: var(--mcw-gray); font-size: .8125rem;
padding-top: var(--mcw-s4);
}
/* ---- Accessibility / motion ---- */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
:focus-visible { outline: 2px solid var(--mcw-gold); outline-offset: 2px; border-radius: 4px; }