/* ==========================================================================
tokens.css — sridharvanka.me shared design tokens ("The Cream System")
Source of truth: Portfolio Home Page/style.css (the live site).
Generated to match design-system.md — do not hand-edit values here
without updating design-system.md to match (or vice versa).
Usage: before your page's own
stylesheet, then build components using these variables and classes
instead of picking new colors/fonts/spacing.
========================================================================== */
:root {
/* Colour */
--paper: #F4F1E8;
--surface: #FFFFFF;
--inset: #FAF8F2;
--accent: #0E8A6E;
--accent-ink: #0A5C49;
--ink: #14130F;
--ink-muted: #57544B;
--ink-faint: #8C887C;
--line: rgba(20, 19, 15, 0.11);
--line-soft: rgba(20, 19, 15, 0.07);
--chip-bg: #F1EEE4;
--radius: 14px;
/* Typography */
--font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
/* Layout */
--content-max: 1180px;
--content-max-article: 860px;
--page-padding: 32px;
/* Motion */
--transition: 0.15s;
}
/* Load fonts — include this in instead if you prefer:
*/
/* ── Reset ────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
background: var(--paper);
color: var(--ink);
font-family: var(--font-sans);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
a {
text-decoration: none;
color: inherit;
}
::selection {
background: var(--accent);
color: var(--paper);
}
.wrap,
.main {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 var(--page-padding);
}
/* ── Background grid texture ──────────────────────────────────────────── */
.grid-bg {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image:
linear-gradient(rgba(20, 19, 15, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(20, 19, 15, 0.045) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: radial-gradient(120% 120% at 50% 0%, #000 60%, transparent 100%);
-webkit-mask-image: radial-gradient(120% 120% at 50% 0%, #000 60%, transparent 100%);
}
.site-wrap {
position: relative;
z-index: 1;
}
/* ── Typography scale ─────────────────────────────────────────────────── */
.hero-h1,
.h1 {
font-size: clamp(48px, 7vw, 92px);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.035em;
}
.section-h2,
.h2 {
margin: 14px 0 0;
font-size: clamp(30px, 4vw, 44px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.02;
}
.lead {
font-size: 19px;
line-height: 1.56;
color: var(--ink-muted);
font-weight: 450;
}
.eyebrow {
font-family: var(--font-mono);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent-ink);
}
.meta {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-faint);
}
code,
.mono {
font-family: var(--font-mono);
}
/* ── Navigation ───────────────────────────────────────────────────────── */
.nav-header {
position: sticky;
top: 0;
z-index: 20;
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
background: rgba(244, 241, 232, 0.78);
border-bottom: 1px solid var(--line-soft);
}
.nav-inner {
max-width: var(--content-max);
margin: 0 auto;
padding: 16px var(--page-padding);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.nav-wordmark {
font-weight: 800;
font-size: 15px;
letter-spacing: 0.08em;
}
.nav-links {
display: flex;
align-items: center;
gap: 28px;
}
.nav-link {
font-size: 14.5px;
font-weight: 500;
color: var(--ink-muted);
transition: color var(--transition);
}
.nav-link:hover {
color: var(--ink);
}
.nav-link--active {
font-weight: 600;
color: var(--ink);
padding-bottom: 2px;
border-bottom: 2px solid var(--accent);
}
.nav-cta {
font-size: 14px;
font-weight: 600;
color: var(--paper);
background: var(--ink);
padding: 9px 16px;
border-radius: 999px;
transition: opacity var(--transition);
}
.nav-cta:hover {
opacity: 0.85;
}
/* ── Cards ────────────────────────────────────────────────────────────── */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 1px 2px rgba(20, 19, 15, 0.04), 0 16px 36px -26px rgba(20, 19, 15, 0.22);
transition: box-shadow 0.2s, transform 0.2s;
}
.card--interactive {
cursor: pointer;
}
.card--interactive:hover {
box-shadow: 0 1px 2px rgba(20, 19, 15, 0.06), 0 22px 44px -24px rgba(20, 19, 15, 0.3);
transform: translateY(-2px);
}
.card-body {
padding: 22px 22px 24px;
}
/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 700;
color: var(--paper);
background: var(--accent);
padding: 13px 26px;
border: none;
border-radius: 999px;
cursor: pointer;
transition: opacity var(--transition);
}
.btn-primary:hover {
opacity: 0.9;
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 15px;
font-weight: 600;
color: var(--ink-muted);
background: var(--surface);
border: 1px solid var(--line);
padding: 12px 22px;
border-radius: 999px;
cursor: pointer;
transition: color var(--transition), border-color var(--transition);
}
.btn-secondary:hover {
color: var(--ink);
border-color: var(--ink-muted);
}
.cta-text-primary {
font-size: 16px;
font-weight: 700;
color: var(--accent-ink);
border-bottom: 2px solid var(--accent);
padding-bottom: 2px;
}
.cta-text-primary:hover {
opacity: 0.8;
}
/* ── Tags / chips ─────────────────────────────────────────────────────── */
.tag {
display: inline-block;
font-family: var(--font-mono);
font-size: 11.5px;
color: var(--ink-muted);
background: var(--chip-bg);
border: 1px solid var(--line-soft);
padding: 4px 9px;
border-radius: 6px;
}
/* ── Status dot (e.g. "currently building") ──────────────────────────── */
.status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(14, 138, 110, 0.16);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
box-shadow: 0 0 0 4px rgba(14, 138, 110, 0.16);
}
50% {
box-shadow: 0 0 0 7px rgba(14, 138, 110, 0.08);
}
}
/* ── Terminal / code block ───────────────────────────────────────────── */
.terminal-block {
background: var(--inset);
border: 1px solid var(--line-soft);
border-radius: 10px;
padding: 16px 18px;
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.85;
color: var(--ink-muted);
}
/* ── Footer ───────────────────────────────────────────────────────────── */
.footer {
max-width: var(--content-max);
margin: 64px auto 0;
padding: 36px var(--page-padding) 56px;
border-top: 1px solid var(--line);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.footer-wordmark {
font-weight: 800;
font-size: 15px;
letter-spacing: 0.08em;
}
.footer-copy {
margin-top: 6px;
font-size: 14px;
color: var(--ink-faint);
}
.footer-link {
font-family: var(--font-mono);
font-size: 13px;
color: var(--accent-ink);
border-bottom: 2px solid var(--accent);
padding-bottom: 3px;
transition: opacity var(--transition);
}
.footer-link:hover {
opacity: 0.75;
}
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 680px) {
.nav-inner {
padding: 14px 20px;
}
.main {
padding: 0 20px;
}
.footer {
padding: 32px 20px 48px;
}
.nav-link {
display: none;
}
}