/*
* ROSA Capital - Design Tokens & Base Styles
* Version: 1.0
* Date: 23/04/2026
*
* Drop-in CSS for use in the investments.rosa.capital web portal.
* Add to your stylesheet or extract variables as needed.
*
* Font loading: add to :
*
*
*
*/
:root {
/* Brand colours */
--rc-navy: #0A1F3D;
--rc-cream: #FAF8F3;
--rc-oxblood: #7A1028;
--rc-brass: #C19A3E;
--rc-slate: #4A5568;
--rc-smoke: #6B7280;
--rc-mist: #E5E0D3;
--rc-ink: #1A1A1A;
/* Functional colours (data visualisation only, not brand surfaces) */
--rc-gain: #2D6A4F;
--rc-loss: #9B2C2C;
--rc-warning: #B7791F;
--rc-info: #2C5282;
/* Typography */
--rc-font-display: 'Outfit', 'Poppins', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
--rc-font-body: 'Inter', 'Helvetica Neue', system-ui, -apple-system, Arial, sans-serif;
--rc-font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
/* Scale */
--rc-text-xs: 12px;
--rc-text-sm: 14px;
--rc-text-base: 16px;
--rc-text-lg: 18px;
--rc-text-xl: 20px;
--rc-text-2xl: 24px;
--rc-text-3xl: 28px;
--rc-text-4xl: 32px;
--rc-text-5xl: 42px;
--rc-text-6xl: 56px;
/* Spacing unit = 8px */
--rc-space-1: 8px;
--rc-space-2: 16px;
--rc-space-3: 24px;
--rc-space-4: 32px;
--rc-space-6: 48px;
--rc-space-8: 64px;
--rc-space-12: 96px;
/* Layout */
--rc-container-max: 1200px;
--rc-reading-max: 720px;
--rc-radius-sm: 4px;
--rc-radius-md: 8px;
--rc-radius-lg: 12px;
}
/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--rc-font-body);
font-size: var(--rc-text-base);
line-height: 1.6;
color: var(--rc-navy);
background: var(--rc-cream);
font-feature-settings: "kern" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--rc-font-display);
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--rc-navy);
margin: 0 0 var(--rc-space-2) 0;
}
h1 { font-size: var(--rc-text-5xl); letter-spacing: -0.02em; line-height: 1.1; }
h2 { font-size: var(--rc-text-4xl); }
h3 { font-size: var(--rc-text-2xl); }
h4 { font-size: var(--rc-text-xl); }
h5 { font-size: var(--rc-text-lg); }
h6 { font-size: var(--rc-text-base); }
p {
margin: 0 0 var(--rc-space-2) 0;
color: var(--rc-slate);
}
p.lead {
font-size: var(--rc-text-lg);
color: var(--rc-navy);
}
small, .caption {
font-size: var(--rc-text-xs);
color: var(--rc-smoke);
}
/* Eyebrow labels */
.eyebrow {
font-family: var(--rc-font-display);
font-size: var(--rc-text-xs);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rc-slate);
margin-bottom: var(--rc-space-1);
}
/* Links */
a {
color: var(--rc-oxblood);
text-decoration: none;
transition: opacity 0.15s;
}
a:hover { opacity: 0.75; }
a:focus-visible { outline: 2px solid var(--rc-oxblood); outline-offset: 2px; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--rc-space-1);
padding: 10px 20px;
font-family: var(--rc-font-body);
font-size: var(--rc-text-sm);
font-weight: 500;
line-height: 1;
border-radius: var(--rc-radius-sm);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s;
}
.btn-primary {
background: var(--rc-navy);
color: var(--rc-cream);
}
.btn-primary:hover { background: #11294d; }
.btn-secondary {
background: transparent;
color: var(--rc-navy);
border-color: var(--rc-navy);
}
.btn-secondary:hover { background: var(--rc-navy); color: var(--rc-cream); }
.btn-accent {
background: var(--rc-oxblood);
color: var(--rc-cream);
}
.btn-accent:hover { background: #8a1530; }
/* Tables */
table {
border-collapse: collapse;
width: 100%;
font-size: var(--rc-text-sm);
}
th {
font-family: var(--rc-font-body);
font-weight: 500;
font-size: var(--rc-text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rc-slate);
text-align: left;
padding: var(--rc-space-1) var(--rc-space-2);
border-bottom: 1px solid var(--rc-mist);
}
td {
padding: var(--rc-space-2);
border-bottom: 1px solid var(--rc-mist);
color: var(--rc-ink);
}
td.num, th.num {
text-align: right;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* Performance colours for data */
.gain { color: var(--rc-gain); }
.loss { color: var(--rc-loss); }
.warning { color: var(--rc-warning); }
.info { color: var(--rc-info); }
/* Containers */
.container {
max-width: var(--rc-container-max);
margin: 0 auto;
padding: 0 var(--rc-space-3);
}
.container-reading {
max-width: var(--rc-reading-max);
margin: 0 auto;
padding: 0 var(--rc-space-3);
}
/* Card */
.card {
background: #FFFFFF;
border: 1px solid var(--rc-mist);
border-radius: var(--rc-radius-md);
padding: var(--rc-space-3);
}
/* Header */
.header-main {
padding: var(--rc-space-3) 0;
border-bottom: 1px solid var(--rc-mist);
}
.header-main .logo { height: 32px; }
.header-main nav a {
color: var(--rc-navy);
margin-left: var(--rc-space-4);
font-size: var(--rc-text-sm);
}
/* Numerics */
.num-display {
font-family: var(--rc-font-display);
font-size: var(--rc-text-5xl);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
font-variant-numeric: tabular-nums;
color: var(--rc-navy);
}
.num-metric {
font-family: var(--rc-font-display);
font-size: var(--rc-text-3xl);
font-weight: 500;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
color: var(--rc-navy);
}
/* Utility */
.text-center { text-align: center; }
.text-muted { color: var(--rc-slate); }
.text-dim { color: var(--rc-smoke); }