/* ============================================================ AETHILM — Colors & Type Foundations A minimalist brand-identity portfolio. Warm-dark monochrome UI shell framing earthy, natural-light photography. ------------------------------------------------------------ Source of truth: the "Portfolite"-based aethilm site (Framer export supplied by the client). Reproduced faithfully. FONTS (loaded per-file): Satoshi — display / headings (Fontshare CDN) https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap Inter — body / UI (Google Fonts) Plus Jakarta Sans — alt UI / labels (Google Fonts) See README "VISUAL FOUNDATIONS" for font notes. ============================================================ */ :root { /* ---- WARM-DARK SHELL (the UI canvas) ------------------- */ --black: #000000; /* page base */ --ink: #0A0908; /* warm near-black */ --surface-1: #0D0D0C; /* cards / sections */ --surface-2: #141413; /* raised / nested cards */ --surface-3: #1C1B19; /* inputs / hover fills */ --surface-4: #232220; /* strong hover / active */ /* ---- TEXT ON DARK -------------------------------------- */ --fg1: #FFFFFF; /* primary text */ --fg2: rgba(255,255,255,0.65); /* secondary / body */ --fg3: rgba(255,255,255,0.45); /* muted / captions */ --fg4: rgba(255,255,255,0.30); /* faint / disabled */ /* ---- HAIRLINES & FILLS --------------------------------- */ --line: rgba(255,255,255,0.08); --line-strong: rgba(255,255,255,0.14); --fill-1: rgba(255,255,255,0.04); --fill-2: rgba(255,255,255,0.08); /* ---- LIGHT-ON-DARK INVERSE (CTA buttons) --------------- */ --paper: #F5F1EA; /* warm off-white — primary button bg */ --paper-dim: #E7E0D4; /* button hover */ --on-paper: #0A0908; /* text on paper buttons */ /* ---- EARTHY ACCENT PALETTE ---------------------------- Pulled from the brand photography. Used SPARINGLY in the dark shell (tags, underlines, marquee, charts) and as the warmth that defines aethilm's imagery + any light surfaces. */ --clay: #C06B4B; /* terracotta */ --clay-soft: #D89A7E; --ochre: #C79A52; /* warm gold */ --sage: #7E866A; /* olive / herb green */ --sage-soft: #A7AD93; --sand: #D8C7AE; /* warm sand */ --tan: #B79B76; /* clay-tan */ --cream: #EFE7D8; /* lightest warm neutral */ /* ---- SEMANTIC STATUS (muted, warm) --------------------- */ --success: #8A9A6B; --warning: #C79A52; --danger: #C0584A; --star: #E9C16B; /* review stars */ /* ---- SEMANTIC ROLES ------------------------------------ */ --bg: var(--black); --bg-alt: var(--ink); --surface: var(--surface-1); --accent: var(--clay); /* ---- TYPE FAMILIES ------------------------------------- */ --font-display: "Satoshi", "Inter", system-ui, sans-serif; /* headings */ --font-body: "Inter", system-ui, -apple-system, sans-serif; --font-alt: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; /* ---- TYPE SCALE ---------------------------------------- Display is BIG and light (Satoshi 400/500), matching the site's 92px hero. Body is Inter, calm and quiet. */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-base: 0.9375rem; /* 15 */ --text-md: 1.0625rem; /* 17 */ --text-lg: 1.375rem; /* 22 */ --text-xl: 1.875rem; /* 30 */ --text-2xl: 2.75rem; /* 44 */ --text-3xl: 3.75rem; /* 60 */ --text-4xl: 4.75rem; /* 76 */ --text-5xl: 5.75rem; /* 92 — hero display */ --leading-tight: 1.0; --leading-snug: 1.15; --leading-normal: 1.45; --leading-relaxed: 1.65; --tracking-tight: -0.03em; /* big display */ --tracking-snug: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.16em; /* eyebrows */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; /* ---- SPACING (4px base) -------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 180px; /* ---- RADII (very rounded — brand signature) ----------- The site uses 32–78px on cards and 999px pills. */ --radius-sm: 10px; --radius-md: 18px; --radius-lg: 24px; --radius-xl: 32px; --radius-2xl: 42px; --radius-3xl: 64px; --radius-card: 32px; /* default card */ --radius-pill: 999px; /* ---- SHADOWS (subtle on dark; mostly inner glow/line) -- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 8px 30px rgba(0,0,0,0.45); --shadow-lg: 0 24px 70px rgba(0,0,0,0.55); --ring: 0 0 0 1px var(--line); /* hairline ring */ --ring-hi: inset 0 1px 0 rgba(255,255,255,0.06); /* top highlight */ /* ---- MOTION -------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-soft: cubic-bezier(0.33, 0, 0.2, 1); --dur-fast: 150ms; --dur-base: 280ms; --dur-slow: 520ms; } /* ============================================================ ELEMENT DEFAULTS ============================================================ */ body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg2); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: var(--weight-regular); /* Satoshi reads big & light */ line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fg1); margin: 0; text-wrap: balance; } h1 { font-size: var(--text-5xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); } h4 { font-size: var(--text-lg); letter-spacing: var(--tracking-snug); } .eyebrow, .eyebrow * { font-family: var(--font-alt); font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg3); } p, .body { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg2); margin: 0; text-wrap: pretty; } .lead { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--fg2); } small, .caption { font-size: var(--text-sm); color: var(--fg3); } a { color: var(--fg1); text-decoration: none; } a:hover { color: var(--fg2); }