/* ============================================================
MATI BHADRA SAGARA — DESIGN SYSTEM
css/design-system.css
Single source of truth for all tokens.
All other CSS files consume via var(--token).
Never hardcode hex values or px values if a token exists.
============================================================ */
/* ─────────────────────────────────────────────────────────────
FONTS
Both tags must appear in BEFORE any CSS.
1. Lora (Google Fonts) — serif: H1, H2, H3, quotes, nav, footer logo
2. Satoshi (Fontshare) — sans-serif: body, eyebrows, CTAs, labels
DO NOT load Work Sans, Noto Serif, or any other typeface.
───────────────────────────────────────────────────────────── */
:root {
/* ─────────────────────────────────────────────────────────
COLOUR ROLE MAP
These five roles are non-negotiable. Never deviate.
Primary headlines (H1/H2/H3 on light bg): var(--color-brand-rust) #933d04
Reverse headlines (on dark/rust/red bg): var(--color-text-white) #ffffff
Primary body text: var(--color-text-body) #56433a
Primary CTA buttons & accent boxes: var(--color-cta) #cf493c
Eyebrows & active nav states: var(--color-brand-crimson) #a83827
───────────────────────────────────────────────────────── */
/* ─────────────────────────────────────────────────────────
COLOUR PALETTE
───────────────────────────────────────────────────────── */
/* Backgrounds */
--color-bg-primary: #fff8f2; /* Page bg, navbar */
--color-bg-secondary: #fff2de; /* Section alternates, footer */
--color-bg-tertiary: #f8e6c8; /* Cards, warm amber */
--color-bg-accent: #e9d8bb; /* Image placeholders, medium beige */
--color-bg-gold: #ebcf76; /* "Study as Identity" bento */
--color-bg-peach: #f2e0c3; /* Ethos cards, quote blocks */
--color-bg-white: #ffffff; /* Contact form column */
/* Text */
--color-text-primary: #231a08; /* Headlines on cream, dark body */
--color-text-body: #56433a; /* Primary body paragraphs */
--color-text-muted: #897268; /* Secondary text, inactive nav, borders */
--color-text-hero: #fff1ed; /* Text on rust/dark hero backgrounds */
--color-text-white: #ffffff; /* Reverse headlines; text on CTA red */
/* Brand */
--color-brand-rust: #933d04; /* Primary headlines H1/H2/H3 on light bg */
--color-brand-crimson: #a83827; /* Eyebrows, active nav, accent borders */
--color-brand-deep: #7f2b20; /* Left-border quote text */
/* CTA / Interactive */
--color-cta: #cf493c; /* Primary CTA buttons, accent boxes */
--color-cta-hover: #a83827; /* CTA hover — darkens to brand-crimson */
/* Hero gradient stops */
--color-hero-from: #933d04;
--color-hero-to: #b3541e;
/* Borders */
--color-border-subtle: rgba(220, 193, 181, 0.2);
--color-border-card: rgba(220, 193, 181, 0.1);
--color-border-muted: #897268;
--color-border-accent: #a83827; /* Active nav underline, left-border blocks */
--color-border-active: #933d04; /* Gallery filter active tab */
/* Overlays */
--color-overlay-texture: rgba(117, 111, 89, 0.05);
--color-overlay-dark: rgba(35, 26, 8, 0.8);
--color-overlay-hero: rgba(35, 26, 8, 0.6);
--color-overlay-frosted: rgba(225, 211, 198, 0.7);
/* ─────────────────────────────────────────────────────────
TYPOGRAPHY — FONT FAMILIES
Exactly two. No others.
───────────────────────────────────────────────────────── */
--font-display: 'Lora', Georgia, serif;
/* H1, H2, H3, quotes, nav links, footer logo name */
--font-sans: 'Satoshi', system-ui, sans-serif;
/* Body, eyebrows, CTAs, labels, footer links, buttons,
captions, gallery tabs, stat labels, fine print */
/* ─────────────────────────────────────────────────────────
TYPOGRAPHY — SIZE SCALE (desktop values)
Responsive overrides live in base.css via media queries.
───────────────────────────────────────────────────────── */
--type-size-display: 6rem; /* 96px — H1 home hero */
--type-lh-display: 6rem;
--type-ls-display: -0.3rem; /* -4.8px */
--type-size-h1-l: 4.5rem; /* 72px — Rinpoche, Gallery, Contact heroes */
--type-lh-h1-l: 4.5rem;
--type-ls-h1-contact: -0.1125rem; /* -1.8px — contact hero only */
--type-size-h2-xl: 3.75rem; /* 60px — "Our Story" */
--type-lh-h2-xl: 3.75rem;
--type-size-h2-l: 3rem; /* 48px — section H2s */
--type-lh-h2-l: 3.75rem; /* 60px */
--type-size-h2-m: 2.25rem; /* 36px */
--type-lh-h2-m: 2.5rem; /* 40px */
--type-size-h2-s: 1.875rem; /* 30px — column headings */
--type-lh-h2-s: 2.25rem; /* 36px */
--type-size-h3: 1.5rem; /* 24px */
--type-lh-h3: 2rem; /* 32px */
--type-size-h3-s: 1.25rem; /* 20px — study cards */
--type-lh-h3-s: 1.75rem; /* 28px */
--type-size-quote-xl: 3.75rem; /* 60px — ethos italic */
--type-lh-quote-xl: 3.75rem;
--type-size-quote-l: 3rem; /* 48px — red CTA section */
--type-lh-quote-l: 3rem;
--type-size-quote-m: 1.875rem; /* 30px — "Est. 1991" */
--type-lh-quote-m: 2.25rem;
--type-size-quote-s: 1.125rem; /* 18px — left-border blocks */
--type-lh-quote-s: 1.75rem; /* 28px */
--type-size-body-l: 1.5rem; /* 24px — hero subtitle */
--type-lh-body-l: 2rem; /* 32px */
--type-size-body-m: 1.125rem; /* 18px — body paragraphs */
--type-lh-body-m: 1.828125rem; /* ~29.25px */
--type-size-body: 1rem; /* 16px — card body */
--type-lh-body: 1.5rem; /* 24px */
--type-size-body-s: 0.875rem; /* 14px — small body, placeholders */
--type-lh-body-s: 1.421875rem;
--type-size-nav: 1.125rem; /* 18px — desktop nav links */
--type-lh-nav: 1.75rem; /* 28px */
--type-ls-nav: -0.028125rem; /* -0.45px */
--type-size-eyebrow-l: 0.875rem; /* 14px — hero eyebrows */
--type-lh-eyebrow-l: 1.25rem; /* 20px */
--type-ls-eyebrow-l: 0.35rem; /* 5.6px */
--type-size-eyebrow-m: 0.75rem; /* 12px — section eyebrows */
--type-lh-eyebrow-m: 1rem; /* 16px */
--type-ls-eyebrow-m: 0.15rem; /* 2.4px */
--type-ls-eyebrow-s: 0.075rem; /* 1.2px — gallery tabs, form labels */
--type-size-cta: 0.875rem; /* 14px — button labels */
--type-lh-cta: 1.25rem; /* 20px */
--type-ls-cta: 0.0875rem; /* 1.4px */
--type-size-label: 0.75rem; /* 12px — form labels */
--type-ls-label: 0.075rem; /* 1.2px */
--type-size-footer: 0.875rem; /* 14px — footer links */
--type-ls-footer: 0.0875rem; /* 1.4px */
--type-size-fine: 0.75rem; /* 12px — copyright */
--type-ls-fine: 0.075rem; /* 1.2px */
--type-size-logo: 1.25rem; /* 20px — footer logo name */
--type-lh-logo: 1.75rem; /* 28px */
/* ─────────────────────────────────────────────────────────
SPACING
───────────────────────────────────────────────────────── */
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 1rem; /* 16px */
--space-4: 1.5rem; /* 24px */
--space-5: 2rem; /* 32px */
--space-6: 2.25rem; /* 36px */
--space-7: 2.5rem; /* 40px */
--space-8: 3rem; /* 48px */
--space-9: 4rem; /* 64px */
--space-10: 5rem; /* 80px */
--space-11: 6rem; /* 96px */
--space-12: 8rem; /* 128px */
--space-13: 12rem; /* 192px */
/* ─────────────────────────────────────────────────────────
LAYOUT
───────────────────────────────────────────────────────── */
--container-max: 80rem; /* 1280px — main content */
--container-nav: 96rem; /* 1536px — navbar */
--container-inner: 74rem; /* 1184px — some centred grids */
--gutter: 1.5rem; /* 24px — mobile base */
--grid-gap: 1rem; /* 16px — mobile base */
--nav-height: 4rem; /* 64px mobile; 5.25rem desktop */
/* ─────────────────────────────────────────────────────────
BORDERS & RADII
───────────────────────────────────────────────────────── */
--radius: 0; /* Sharp corners throughout — no border-radius */
--radius-input: 0; /* Form inputs also sharp */
--border-subtle: 1px solid var(--color-border-subtle);
--border-card: 1px solid var(--color-border-card);
--border-muted: 1px solid var(--color-border-muted);
--border-accent-b: 2px solid var(--color-border-accent); /* nav active */
--border-active-b: 2px solid var(--color-border-active); /* gallery filter */
--border-accent-l: 4px solid var(--color-brand-rust); /* left accent block */
--border-divider: 1px solid var(--color-text-muted); /* timeline */
/* ─────────────────────────────────────────────────────────
SHADOWS
───────────────────────────────────────────────────────── */
--shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-map-pin: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
/* ─────────────────────────────────────────────────────────
TRANSITIONS
───────────────────────────────────────────────────────── */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 300ms ease;
--transition-xslow: 500ms ease;
/* Semantic aliases — used in layout.css / base.css */
--transition-nav: var(--transition-fast); /* nav link colour */
--transition-active: var(--transition-slow); /* nav underline grows */
--transition-drawer: var(--transition-base); /* hamburger bars */
--transition-reveal: var(--transition-xslow); /* scroll reveal */
/* ─────────────────────────────────────────────────────────
GRADIENTS
───────────────────────────────────────────────────────── */
--gradient-hero:
linear-gradient(135deg, var(--color-hero-from) 0%, var(--color-hero-to) 100%);
--gradient-about-hero:
linear-gradient(90deg, rgba(35, 26, 8, 0.6) 0%, rgba(35, 26, 8, 0) 100%);
--gradient-contact-hero:
linear-gradient(0deg, var(--color-bg-primary) 0%, rgba(255, 248, 242, 0) 100%),
linear-gradient(90deg, rgba(147, 61, 4, 0.2) 0%, rgba(147, 61, 4, 0.2) 100%);
--gradient-gallery-hover:
linear-gradient(0deg, rgba(35, 26, 8, 0.8) 0%, rgba(35, 26, 8, 0) 100%);
--gradient-lineage-hero:
linear-gradient(90deg, var(--color-bg-secondary) 50%, rgba(255, 242, 222, 0) 100%);
/* ─────────────────────────────────────────────────────────
Z-INDEX SCALE
───────────────────────────────────────────────────────── */
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-overlay: 20;
--z-nav: 100;
--z-modal: 200;
/* ─────────────────────────────────────────────────────────
COMPONENT TOKENS
───────────────────────────────────────────────────────── */
/* Button — Primary Filled */
--btn-primary-bg: var(--color-cta);
--btn-primary-bg-hover: var(--color-cta-hover);
--btn-primary-color: var(--color-text-white);
--btn-primary-px: 2rem;
--btn-primary-py: 1rem;
/* Button — Primary Inverse (white fill on dark hero) */
--btn-inverse-bg: var(--color-text-white);
--btn-inverse-bg-hover: var(--color-bg-secondary);
--btn-inverse-color: var(--color-brand-rust);
/* Button — Ghost (border-only on dark hero) */
--btn-ghost-border: 1px solid var(--color-text-hero);
--btn-ghost-color: var(--color-text-hero);
--btn-ghost-px: 2.5625rem;
--btn-ghost-py: 1.0625rem;
/* Button — Ghost Dark (donation) */
--btn-ghost-dark-border: 1px solid var(--color-text-muted);
--btn-ghost-dark-color: var(--color-text-primary);
--btn-ghost-dark-hover-border: var(--color-brand-rust);
--btn-ghost-dark-hover-color: var(--color-brand-rust);
/* Button — Small Nav (VISIT) */
--btn-small-bg: var(--color-cta);
--btn-small-px: 1.5rem;
--btn-small-py: 0.5rem;
/* Navigation */
--nav-link-color: var(--color-text-muted);
--nav-link-hover: var(--color-brand-crimson);
--nav-link-active: var(--color-brand-crimson);
--nav-active-border: 2px solid var(--color-brand-crimson);
/* Form */
--input-border: 1px solid var(--color-text-muted);
--input-color: var(--color-text-body);
--input-placeholder: rgba(220, 193, 181, 0.5);
--input-label-color: var(--color-text-muted);
/* Gallery filter tabs */
--tab-active-color: var(--color-brand-rust);
--tab-active-border: 2px solid var(--color-brand-rust);
--tab-inactive-color: var(--color-text-muted);
/* Left-border accent block */
--accent-block-border: 4px solid var(--color-brand-rust);
--accent-block-pl: 1.75rem;
}
/* ─────────────────────────────────────────────────────────────
RESPONSIVE TOKEN OVERRIDES
Gutter and nav height grow with viewport.
───────────────────────────────────────────────────────────── */
@media (min-width: 769px) {
:root {
--gutter: 2rem; /* 32px tablet */
--grid-gap: 1.5rem; /* 24px */
--nav-height: 5.25rem; /* 84px */
}
}
@media (min-width: 1025px) {
:root {
--gutter: 3rem; /* 48px desktop */
--grid-gap: 2rem; /* 32px */
}
}
/* ─────────────────────────────────────────────────────────────
GLOBAL UTILITY CLASSES
Minimal set — only truly shared across all pages.
───────────────────────────────────────────────────────────── */
/* Containers */
.container {
width: 100%;
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--gutter);
}
.container--nav {
max-width: var(--container-nav);
padding-inline: var(--gutter);
margin-inline: auto;
width: 100%;
}
.container--inner {
max-width: var(--container-inner);
margin-inline: auto;
padding-inline: var(--gutter);
width: 100%;
}
/* Eyebrow — always Satoshi Bold, always uppercase */
.eyebrow {
font-family: var(--font-sans);
font-size: var(--type-size-eyebrow-m);
line-height: var(--type-lh-eyebrow-m);
letter-spacing: var(--type-ls-eyebrow-m);
font-weight: 700;
text-transform: uppercase;
color: var(--color-brand-crimson);
display: block;
}
.eyebrow--hero {
font-family: var(--font-sans);
font-size: var(--type-size-eyebrow-l);
line-height: var(--type-lh-eyebrow-l);
letter-spacing: var(--type-ls-eyebrow-l);
font-weight: 400;
text-transform: uppercase;
color: var(--color-text-hero);
display: block;
}
.eyebrow--muted {
color: var(--color-text-muted);
font-weight: 400;
}
/* Section padding helpers */
.section-pad {
padding-block: var(--space-8); /* 48px mobile */
}
.section-pad--l {
padding-block: var(--space-9); /* 64px mobile */
}
@media (min-width: 769px) {
.section-pad { padding-block: var(--space-10); } /* 80px tablet */
.section-pad--l { padding-block: var(--space-11); } /* 96px tablet */
}
@media (min-width: 1025px) {
.section-pad { padding-block: var(--space-11); } /* 96px desktop */
.section-pad--l { padding-block: var(--space-12); } /* 128px desktop */
}
/* Divider line (timeline) */
.divider {
width: 3rem;
height: 1px;
background-color: var(--color-text-muted);
flex-shrink: 0;
border: none;
}
/* Visually hidden — screen readers only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Skip link */
.skip-link {
position: absolute;
top: -100%;
left: 0;
padding: 0.75rem 1.5rem;
background: var(--color-brand-rust);
color: var(--color-text-white);
font-family: var(--font-sans);
font-size: var(--type-size-cta);
letter-spacing: var(--type-ls-cta);
text-transform: uppercase;
text-decoration: none;
z-index: var(--z-modal);
transition: top var(--transition-fast);
}
.skip-link:focus {
top: 0;
}
/* Focus ring — keyboard users only */
:focus-visible {
outline: 2px solid var(--color-brand-crimson);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
/* ─────────────────────────────────────────────────────────────
BUTTON COMPONENT
All button variants defined here; used across all pages.
───────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-sans);
font-size: var(--type-size-cta);
line-height: var(--type-lh-cta);
letter-spacing: var(--type-ls-cta);
font-weight: 400;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
transition: background-color var(--transition-base),
color var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base);
white-space: nowrap;
min-height: 44px; /* WCAG 2.5.5 minimum tap target */
padding: var(--btn-primary-py) var(--btn-primary-px);
}
/* Primary filled — red */
.btn--primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-color);
}
.btn--primary:hover,
.btn--primary:focus-visible {
background-color: var(--btn-primary-bg-hover);
box-shadow: 0 4px 12px rgba(207, 73, 60, 0.35);
}
/* Primary inverse — white fill on dark hero */
.btn--inverse {
background-color: var(--btn-inverse-bg);
color: var(--btn-inverse-color);
}
.btn--inverse:hover,
.btn--inverse:focus-visible {
background-color: var(--btn-inverse-bg-hover);
}
/* Ghost — border-only, on dark hero */
.btn--ghost {
background-color: transparent;
border: var(--btn-ghost-border);
color: var(--btn-ghost-color);
padding: var(--btn-ghost-py) var(--btn-ghost-px);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
background-color: rgba(255, 241, 237, 0.1);
}
/* Ghost dark — outline on light bg */
.btn--ghost-dark {
background-color: transparent;
border: var(--btn-ghost-dark-border);
color: var(--btn-ghost-dark-color);
}
.btn--ghost-dark:hover,
.btn--ghost-dark:focus-visible {
border-color: var(--btn-ghost-dark-hover-border);
color: var(--btn-ghost-dark-hover-color);
}
/* Small — nav VISIT button */
.btn--small {
background-color: var(--btn-small-bg);
color: var(--color-text-white);
padding: var(--btn-small-py) var(--btn-small-px);
font-weight: 400;
min-height: 36px;
}
.btn--small:hover,
.btn--small:focus-visible {
background-color: var(--color-cta-hover);
box-shadow: 0 2px 8px rgba(207, 73, 60, 0.4);
}
/* Text arrow — no bg, rust colour with animated arrow */
.btn--text-arrow {
background-color: transparent;
color: var(--color-brand-rust);
padding: 0;
font-weight: 700;
min-height: 44px;
gap: var(--space-2);
border: none;
}
.btn--text-arrow:hover,
.btn--text-arrow:focus-visible {
color: var(--color-brand-crimson);
}
.btn--text-arrow .btn__arrow {
display: inline-block;
transition: transform var(--transition-base);
line-height: 1;
}
.btn--text-arrow:hover .btn__arrow,
.btn--text-arrow:focus-visible .btn__arrow {
transform: translateX(4px);
}
/* Text underline — crimson underline */
.btn--text-underline {
background-color: transparent;
color: var(--color-brand-crimson);
padding: 0 0 4px;
font-weight: 700;
border-bottom: 2px solid var(--color-brand-crimson);
border-radius: 0;
min-height: 44px;
gap: var(--space-2);
}
.btn--text-underline:hover,
.btn--text-underline:focus-visible {
color: var(--color-brand-rust);
border-bottom-color: var(--color-brand-rust);
}
.btn--text-underline .btn__arrow {
display: inline-block;
transition: transform var(--transition-base);
}
.btn--text-underline:hover .btn__arrow,
.btn--text-underline:focus-visible .btn__arrow {
transform: translateX(4px);
}
/* Full-width on mobile ≤480px */
@media (max-width: 480px) {
.btn--primary,
.btn--inverse,
.btn--ghost {
width: 100%;
justify-content: center;
}
}
/* ─────────────────────────────────────────────────────────────
REDUCED MOTION — global override
───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ─────────────────────────────────────────────────────────────
PRINT
───────────────────────────────────────────────────────────── */
@media print {
:root {
--color-bg-primary: #ffffff;
--color-text-body: #000000;
}
}