1070 lines
23 KiB
CSS
1070 lines
23 KiB
CSS
/* ============================================================
|
|
PX360 Presentations — Healthcare Modern Slide Theme
|
|
|
|
Design direction: Warm & approachable healthcare aesthetic
|
|
with organic shapes, soft gradients, and data clarity.
|
|
|
|
Inspired by huashu-design principles:
|
|
- Anti-AI slop: no purple gradients, no emoji, no generic tech
|
|
- text-wrap: pretty for body text
|
|
- CSS Grid for precise layouts
|
|
- One detail at 120%, everything else at 80%
|
|
============================================================ */
|
|
|
|
/* === Design Tokens === */
|
|
:root {
|
|
/* Primary Palette */
|
|
--px-navy: #005696;
|
|
--px-blue: #007bbd;
|
|
--px-teal: #0EA5E9;
|
|
--px-light: #eef6fb;
|
|
|
|
/* Warm Accents */
|
|
--px-warm-teal: #14B8A6;
|
|
--px-amber: #F59E0B;
|
|
--px-coral: #FB7185;
|
|
--px-sage: #86EFAC;
|
|
--px-lavender: #A78BFA;
|
|
|
|
/* Neutrals */
|
|
--px-ink: #1e293b;
|
|
--px-body: #334155;
|
|
--px-muted: #64748b;
|
|
--px-light-muted: #94a3b8;
|
|
--px-border: #e2e8f0;
|
|
--px-surface: #f8fafc;
|
|
--px-bg: #f1f5f9;
|
|
--px-white: #ffffff;
|
|
|
|
/* Slide-Specific Gradients */
|
|
--px-gradient-cover: linear-gradient(135deg, #005696 0%, #007bbd 50%, #0EA5E9 100%);
|
|
--px-gradient-section: linear-gradient(135deg, #005696 0%, #0EA5E9 100%);
|
|
--px-gradient-warm: linear-gradient(135deg, #f0f7ff 0%, #eef6fb 50%, #f0fdfa 100%);
|
|
--px-gradient-accent: linear-gradient(to right, #005696, #0EA5E9);
|
|
--px-gradient-subtle: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
|
|
--px-gradient-hero: linear-gradient(135deg, #005696 0%, #0069a8 30%, #007bbd 60%, #0EA5E9 100%);
|
|
|
|
/* Chart Colors */
|
|
--px-chart-1: #005696;
|
|
--px-chart-2: #0EA5E9;
|
|
--px-chart-3: #14B8A6;
|
|
--px-chart-4: #F59E0B;
|
|
--px-chart-5: #FB7185;
|
|
--px-chart-6: #8B5CF6;
|
|
|
|
/* Typography */
|
|
--px-font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
|
--px-hero: 800 64px/1.1 var(--px-font);
|
|
--px-title: 700 44px/1.2 var(--px-font);
|
|
--px-subtitle: 500 26px/1.4 var(--px-font);
|
|
--px-body: 400 19px/1.7 var(--px-font);
|
|
--px-body-sm: 400 16px/1.6 var(--px-font);
|
|
--px-caption: 400 14px/1.5 var(--px-font);
|
|
--px-label: 600 12px/1.4 var(--px-font);
|
|
--px-kpi: 800 56px/1 var(--px-font);
|
|
--px-kpi-sm: 700 36px/1 var(--px-font);
|
|
|
|
/* Spacing */
|
|
--px-slide-padding: 64px 80px;
|
|
--px-gap: 32px;
|
|
--px-gap-sm: 16px;
|
|
--px-gap-lg: 48px;
|
|
--px-radius: 16px;
|
|
--px-radius-lg: 24px;
|
|
--px-radius-full: 9999px;
|
|
|
|
/* Shadows */
|
|
--px-shadow-sm: 0 1px 3px rgba(0, 86, 150, 0.06), 0 1px 2px rgba(0, 86, 150, 0.04);
|
|
--px-shadow: 0 4px 12px rgba(0, 86, 150, 0.08), 0 2px 4px rgba(0, 86, 150, 0.04);
|
|
--px-shadow-lg: 0 12px 32px rgba(0, 86, 150, 0.12), 0 4px 8px rgba(0, 86, 150, 0.06);
|
|
|
|
/* Slide Canvas */
|
|
--px-slide-width: 1920px;
|
|
--px-slide-height: 1080px;
|
|
}
|
|
|
|
/* === Slide Canvas === */
|
|
.slide-canvas {
|
|
width: var(--px-slide-width);
|
|
height: var(--px-slide-height);
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: var(--px-font);
|
|
color: var(--px-ink);
|
|
background: var(--px-white);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.slide-canvas *,
|
|
.slide-canvas *::before,
|
|
.slide-canvas *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* === Logo System === */
|
|
.slide-logo--hero {
|
|
display: block;
|
|
margin: 0 auto;
|
|
height: 80px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.slide-logo--header {
|
|
position: absolute;
|
|
top: 32px;
|
|
right: 80px;
|
|
height: 32px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
[dir="rtl"] .slide-logo--header {
|
|
right: auto;
|
|
left: 80px;
|
|
}
|
|
|
|
.slide-logo--footer {
|
|
position: absolute;
|
|
bottom: 28px;
|
|
right: 80px;
|
|
height: 24px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
[dir="rtl"] .slide-logo--footer {
|
|
right: auto;
|
|
left: 80px;
|
|
}
|
|
|
|
.slide-logo--footer-left {
|
|
position: absolute;
|
|
bottom: 28px;
|
|
left: 80px;
|
|
height: 24px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
opacity: 0.35;
|
|
}
|
|
|
|
[dir="rtl"] .slide-logo--footer-left {
|
|
left: auto;
|
|
right: 80px;
|
|
}
|
|
|
|
.slide-logo--light {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
/* === Slide Masthead === */
|
|
.slide-masthead {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 24px 80px;
|
|
border-bottom: 1px solid var(--px-border);
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-masthead__brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.slide-masthead__logo {
|
|
height: 28px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.slide-masthead__title {
|
|
font: var(--px-label);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--px-muted);
|
|
}
|
|
|
|
.slide-masthead__meta {
|
|
font: var(--px-caption);
|
|
color: var(--px-light-muted);
|
|
}
|
|
|
|
/* === Slide Footer === */
|
|
.slide-footer {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 80px;
|
|
border-top: 1px solid var(--px-border);
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-footer__section {
|
|
font: var(--px-caption);
|
|
color: var(--px-light-muted);
|
|
}
|
|
|
|
.slide-footer__counter {
|
|
font: 600 13px/1 var(--px-font);
|
|
color: var(--px-muted);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* === Organic Decorations === */
|
|
.slide-deco-wave {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 120px;
|
|
pointer-events: none;
|
|
opacity: 0.08;
|
|
}
|
|
|
|
.slide-deco-wave--teal { fill: var(--px-teal); }
|
|
.slide-deco-wave--navy { fill: var(--px-navy); }
|
|
|
|
.slide-deco-blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
pointer-events: none;
|
|
opacity: 0.06;
|
|
}
|
|
|
|
.slide-deco-blob--teal {
|
|
background: var(--px-teal);
|
|
}
|
|
|
|
.slide-deco-blob--navy {
|
|
background: var(--px-navy);
|
|
}
|
|
|
|
.slide-deco-blob--warm {
|
|
background: var(--px-warm-teal);
|
|
}
|
|
|
|
/* === Accent Bar === */
|
|
.slide-accent-bar {
|
|
height: 4px;
|
|
background: var(--px-gradient-accent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.slide-accent-bar--vertical {
|
|
width: 4px;
|
|
height: 100%;
|
|
min-height: 40px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* === Cover Slide === */
|
|
.slide-cover {
|
|
background: var(--px-gradient-hero);
|
|
color: var(--px-white);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 80px;
|
|
}
|
|
|
|
.slide-cover__logo {
|
|
height: 64px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
margin-bottom: 64px;
|
|
filter: brightness(0) invert(1);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.slide-cover__title {
|
|
font: 800 72px/1.08 var(--px-font);
|
|
margin: 0 0 24px;
|
|
max-width: 1200px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.slide-cover__subtitle {
|
|
font: 400 28px/1.5 var(--px-font);
|
|
opacity: 0.85;
|
|
margin: 0 0 48px;
|
|
max-width: 900px;
|
|
}
|
|
|
|
.slide-cover__meta {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32px;
|
|
font: 400 16px/1 var(--px-font);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.slide-cover__meta-divider {
|
|
width: 4px;
|
|
height: 4px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.slide-cover__wave {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* === Section Divider === */
|
|
.slide-section {
|
|
background: var(--px-gradient-section);
|
|
color: var(--px-white);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 80px 120px;
|
|
position: relative;
|
|
}
|
|
|
|
.slide-section__number {
|
|
font: 800 180px/0.9 var(--px-font);
|
|
opacity: 0.1;
|
|
position: absolute;
|
|
top: -20px;
|
|
right: 80px;
|
|
}
|
|
|
|
[dir="rtl"] .slide-section__number {
|
|
right: auto;
|
|
left: 80px;
|
|
}
|
|
|
|
.slide-section__label {
|
|
font: 600 14px/1 var(--px-font);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.12em;
|
|
opacity: 0.7;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.slide-section__title {
|
|
font: 800 64px/1.1 var(--px-font);
|
|
margin: 0 0 24px;
|
|
max-width: 1000px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.slide-section__subtitle {
|
|
font: 400 22px/1.6 var(--px-font);
|
|
opacity: 0.8;
|
|
max-width: 800px;
|
|
}
|
|
|
|
/* === KPI Dashboard === */
|
|
.slide-kpi {
|
|
padding: var(--px-slide-padding);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--px-gradient-warm);
|
|
}
|
|
|
|
.slide-kpi__header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.slide-kpi__title {
|
|
font: var(--px-title);
|
|
color: var(--px-ink);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.slide-kpi__subtitle {
|
|
font: var(--px-caption);
|
|
color: var(--px-muted);
|
|
}
|
|
|
|
.slide-kpi__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: var(--px-gap);
|
|
flex: 1;
|
|
}
|
|
|
|
.slide-kpi__card {
|
|
background: var(--px-white);
|
|
border-radius: var(--px-radius);
|
|
padding: 32px;
|
|
box-shadow: var(--px-shadow);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-kpi__card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: var(--px-gradient-accent);
|
|
}
|
|
|
|
.slide-kpi__card--success::before { background: linear-gradient(to right, #10b981, #14B8A6); }
|
|
.slide-kpi__card--warning::before { background: linear-gradient(to right, #F59E0B, #fbbf24); }
|
|
.slide-kpi__card--danger::before { background: linear-gradient(to right, #ef4444, #FB7185); }
|
|
|
|
.slide-kpi__card-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 20px;
|
|
background: var(--px-light);
|
|
color: var(--px-navy);
|
|
}
|
|
|
|
.slide-kpi__card-label {
|
|
font: var(--px-label);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--px-muted);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.slide-kpi__card-value {
|
|
font: var(--px-kpi);
|
|
color: var(--px-ink);
|
|
margin-bottom: 8px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.slide-kpi__card-change {
|
|
font: 500 14px/1 var(--px-font);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.slide-kpi__card-change--up { color: var(--px-warm-teal); }
|
|
.slide-kpi__card-change--down { color: var(--px-coral); }
|
|
.slide-kpi__card-change--neutral { color: var(--px-muted); }
|
|
|
|
/* === Chart Slides === */
|
|
.slide-chart {
|
|
padding: var(--px-slide-padding);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-chart__header {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.slide-chart__title {
|
|
font: var(--px-title);
|
|
color: var(--px-ink);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.slide-chart__subtitle {
|
|
font: var(--px-caption);
|
|
color: var(--px-muted);
|
|
}
|
|
|
|
.slide-chart__container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
position: relative;
|
|
}
|
|
|
|
.slide-chart__apex {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* === Chart + Metrics Split === */
|
|
.slide-chart-metrics {
|
|
padding: var(--px-slide-padding);
|
|
display: grid;
|
|
grid-template-columns: 3fr 2fr;
|
|
gap: var(--px-gap-lg);
|
|
height: 100%;
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-chart-metrics__chart {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slide-chart-metrics__chart-title {
|
|
font: var(--px-subtitle);
|
|
color: var(--px-ink);
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
.slide-chart-metrics__chart-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
.slide-chart-metrics__sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--px-gap);
|
|
}
|
|
|
|
.slide-chart-metrics__metric {
|
|
background: var(--px-surface);
|
|
border-radius: var(--px-radius);
|
|
padding: 24px;
|
|
border-left: 4px solid var(--px-navy);
|
|
}
|
|
|
|
.slide-chart-metrics__metric-label {
|
|
font: var(--px-label);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--px-muted);
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.slide-chart-metrics__metric-value {
|
|
font: var(--px-kpi-sm);
|
|
color: var(--px-ink);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.slide-chart-metrics__metric-desc {
|
|
font: var(--px-caption);
|
|
color: var(--px-light-muted);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* === Data Table === */
|
|
.slide-table {
|
|
padding: var(--px-slide-padding);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-table__header {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.slide-table__title {
|
|
font: var(--px-title);
|
|
color: var(--px-ink);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.slide-table__subtitle {
|
|
font: var(--px-caption);
|
|
color: var(--px-muted);
|
|
}
|
|
|
|
.slide-table__container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
border-radius: var(--px-radius);
|
|
border: 1px solid var(--px-border);
|
|
}
|
|
|
|
.slide-table__element {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-collapse: collapse;
|
|
font: var(--px-body-sm);
|
|
}
|
|
|
|
.slide-table__element thead {
|
|
background: var(--px-surface);
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.slide-table__element th {
|
|
font: var(--px-label);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--px-muted);
|
|
padding: 14px 20px;
|
|
text-align: left;
|
|
border-bottom: 2px solid var(--px-border);
|
|
}
|
|
|
|
[dir="rtl"] .slide-table__element th {
|
|
text-align: right;
|
|
}
|
|
|
|
.slide-table__element td {
|
|
padding: 12px 20px;
|
|
border-bottom: 1px solid var(--px-border);
|
|
color: var(--px-body);
|
|
}
|
|
|
|
.slide-table__element tbody tr:nth-child(even) {
|
|
background: var(--px-surface);
|
|
}
|
|
|
|
.slide-table__element tbody tr:hover {
|
|
background: var(--px-light);
|
|
}
|
|
|
|
/* === Two Column === */
|
|
.slide-two-col {
|
|
padding: var(--px-slide-padding);
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--px-gap-lg);
|
|
height: 100%;
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-two-col__col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slide-two-col__title {
|
|
font: var(--px-title);
|
|
color: var(--px-ink);
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
.slide-two-col__body {
|
|
font: var(--px-body);
|
|
color: var(--px-body);
|
|
text-wrap: pretty;
|
|
}
|
|
|
|
.slide-two-col__body p {
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
/* === Quote / Callout === */
|
|
.slide-quote {
|
|
padding: 80px 120px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
height: 100%;
|
|
background: var(--px-gradient-warm);
|
|
}
|
|
|
|
.slide-quote__mark {
|
|
font: 800 120px/0.8 Georgia, serif;
|
|
color: var(--px-navy);
|
|
opacity: 0.15;
|
|
margin-bottom: -20px;
|
|
user-select: none;
|
|
}
|
|
|
|
.slide-quote__text {
|
|
font: 500 36px/1.6 var(--px-font);
|
|
color: var(--px-ink);
|
|
max-width: 1200px;
|
|
text-wrap: balance;
|
|
margin: 0 0 40px;
|
|
}
|
|
|
|
.slide-quote__attribution {
|
|
font: var(--px-subtitle);
|
|
color: var(--px-navy);
|
|
font-style: italic;
|
|
}
|
|
|
|
.slide-quote__role {
|
|
font: var(--px-caption);
|
|
color: var(--px-muted);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* === Timeline === */
|
|
.slide-timeline {
|
|
padding: var(--px-slide-padding);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-timeline__header {
|
|
margin-bottom: 48px;
|
|
}
|
|
|
|
.slide-timeline__title {
|
|
font: var(--px-title);
|
|
color: var(--px-ink);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.slide-timeline__track {
|
|
display: flex;
|
|
gap: 0;
|
|
flex: 1;
|
|
align-items: stretch;
|
|
position: relative;
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.slide-timeline__track::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 56px;
|
|
left: 40px;
|
|
right: 40px;
|
|
height: 3px;
|
|
background: var(--px-border);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.slide-timeline__item {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
position: relative;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.slide-timeline__dot {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 50%;
|
|
background: var(--px-navy);
|
|
border: 4px solid var(--px-white);
|
|
box-shadow: 0 0 0 3px var(--px-navy);
|
|
margin-bottom: 28px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.slide-timeline__item--active .slide-timeline__dot {
|
|
background: var(--px-teal);
|
|
box-shadow: 0 0 0 3px var(--px-teal), 0 0 0 8px rgba(14, 165, 233, 0.15);
|
|
}
|
|
|
|
.slide-timeline__date {
|
|
font: var(--px-label);
|
|
text-transform: uppercase;
|
|
color: var(--px-muted);
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.slide-timeline__event-title {
|
|
font: 600 18px/1.4 var(--px-font);
|
|
color: var(--px-ink);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.slide-timeline__event-desc {
|
|
font: var(--px-caption);
|
|
color: var(--px-body);
|
|
max-width: 200px;
|
|
}
|
|
|
|
/* === Comparison === */
|
|
.slide-comparison {
|
|
padding: var(--px-slide-padding);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-comparison__header {
|
|
margin-bottom: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.slide-comparison__title {
|
|
font: var(--px-title);
|
|
color: var(--px-ink);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.slide-comparison__panels {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
gap: var(--px-gap);
|
|
flex: 1;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.slide-comparison__panel {
|
|
background: var(--px-surface);
|
|
border-radius: var(--px-radius);
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.slide-comparison__panel--highlight {
|
|
background: var(--px-light);
|
|
border: 2px solid var(--px-navy);
|
|
}
|
|
|
|
.slide-comparison__panel-label {
|
|
font: var(--px-label);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--px-navy);
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.slide-comparison__divider {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.slide-comparison__vs {
|
|
font: 800 24px/1 var(--px-font);
|
|
color: var(--px-muted);
|
|
background: var(--px-white);
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--px-shadow);
|
|
}
|
|
|
|
/* === Team Grid === */
|
|
.slide-team {
|
|
padding: var(--px-slide-padding);
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
background: var(--px-white);
|
|
}
|
|
|
|
.slide-team__header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.slide-team__title {
|
|
font: var(--px-title);
|
|
color: var(--px-ink);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.slide-team__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
gap: var(--px-gap);
|
|
flex: 1;
|
|
}
|
|
|
|
.slide-team__card {
|
|
background: var(--px-surface);
|
|
border-radius: var(--px-radius);
|
|
padding: 28px;
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.slide-team__avatar {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: var(--px-gradient-accent);
|
|
color: var(--px-white);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font: 700 24px/1 var(--px-font);
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.slide-team__name {
|
|
font: 600 17px/1.3 var(--px-font);
|
|
color: var(--px-ink);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.slide-team__role {
|
|
font: var(--px-caption);
|
|
color: var(--px-muted);
|
|
}
|
|
|
|
.slide-team__metric {
|
|
margin-top: 16px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--px-border);
|
|
width: 100%;
|
|
}
|
|
|
|
.slide-team__metric-value {
|
|
font: 700 28px/1 var(--px-font);
|
|
color: var(--px-navy);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.slide-team__metric-label {
|
|
font: var(--px-caption);
|
|
color: var(--px-muted);
|
|
}
|
|
|
|
/* === Closing === */
|
|
.slide-closing {
|
|
background: var(--px-gradient-hero);
|
|
color: var(--px-white);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 80px;
|
|
}
|
|
|
|
.slide-closing__logo {
|
|
height: 72px;
|
|
width: auto;
|
|
object-fit: contain;
|
|
margin-bottom: 56px;
|
|
filter: brightness(0) invert(1);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.slide-closing__title {
|
|
font: 800 60px/1.1 var(--px-font);
|
|
margin: 0 0 24px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.slide-closing__subtitle {
|
|
font: 400 24px/1.6 var(--px-font);
|
|
opacity: 0.8;
|
|
max-width: 800px;
|
|
margin: 0 0 56px;
|
|
}
|
|
|
|
.slide-closing__contact {
|
|
display: flex;
|
|
gap: 40px;
|
|
font: 400 16px/1 var(--px-font);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* === Utility Classes === */
|
|
.slide-text-navy { color: var(--px-navy); }
|
|
.slide-text-teal { color: var(--px-teal); }
|
|
.slide-text-muted { color: var(--px-muted); }
|
|
.slide-text-white { color: var(--px-white); }
|
|
|
|
.slide-bg-light { background: var(--px-gradient-warm); }
|
|
.slide-bg-white { background: var(--px-white); }
|
|
|
|
.slide-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 4px 14px;
|
|
border-radius: var(--px-radius-full);
|
|
font: var(--px-label);
|
|
}
|
|
|
|
.slide-badge--navy { background: rgba(0, 86, 150, 0.1); color: var(--px-navy); }
|
|
.slide-badge--teal { background: rgba(14, 165, 233, 0.1); color: var(--px-teal); }
|
|
.slide-badge--success { background: rgba(20, 184, 166, 0.1); color: var(--px-warm-teal); }
|
|
.slide-badge--warning { background: rgba(245, 158, 11, 0.1); color: var(--px-amber); }
|
|
.slide-badge--danger { background: rgba(251, 113, 133, 0.1); color: var(--px-coral); }
|
|
|
|
.slide-progress-bar {
|
|
height: 6px;
|
|
background: var(--px-border);
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.slide-progress-bar__fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
background: var(--px-gradient-accent);
|
|
transition: width 0.6s ease;
|
|
}
|
|
|
|
.slide-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.slide-list__item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 16px;
|
|
padding: 12px 0;
|
|
font: var(--px-body);
|
|
color: var(--px-body);
|
|
}
|
|
|
|
.slide-list__item-bullet {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: var(--px-navy);
|
|
flex-shrink: 0;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.slide-list__item-bullet--teal { background: var(--px-teal); }
|
|
.slide-list__item-bullet--warm { background: var(--px-warm-teal); }
|
|
|
|
/* === Doctor Rating Row Colors === */
|
|
.slide-table__element tbody tr.rating-row--high { background: #0B769F; color: #fff; }
|
|
.slide-table__element tbody tr.rating-row--high td { color: #fff; border-bottom-color: rgba(255,255,255,0.15); }
|
|
.slide-table__element tbody tr.rating-row--medium { background: #1e293b; color: #fff; }
|
|
.slide-table__element tbody tr.rating-row--medium td { color: #fff; border-bottom-color: rgba(255,255,255,0.15); }
|
|
.slide-table__element tbody tr.rating-row--low { background: #ED1A24; color: #fff; }
|
|
.slide-table__element tbody tr.rating-row--low td { color: #fff; border-bottom-color: rgba(255,255,255,0.15); }
|
|
.slide-table__element tbody tr.rating-row--top { background: #3A7C22; color: #fff; }
|
|
.slide-table__element tbody tr.rating-row--top td { color: #fff; border-bottom-color: rgba(255,255,255,0.15); }
|
|
|
|
.slide-table__element tbody tr.rating-row--high:hover,
|
|
.slide-table__element tbody tbody tr.rating-row--medium:hover,
|
|
.slide-table__element tbody tr.rating-row--low:hover,
|
|
.slide-table__element tbody tr.rating-row--top:hover { opacity: 0.92; }
|
|
|
|
.slide-table__element tbody tr.rating-row--high:nth-child(even),
|
|
.slide-table__element tbody tr.rating-row--medium:nth-child(even),
|
|
.slide-table__element tbody tr.rating-row--low:nth-child(even),
|
|
.slide-table__element tbody tr.rating-row--top:nth-child(even) { background: inherit; }
|
|
|
|
/* === Cover Department Subtitle === */
|
|
.slide-cover__department {
|
|
font: 500 18px/1.5 var(--px-font);
|
|
opacity: 0.65;
|
|
margin: 0 0 24px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|