/* ============================================================ HomeNest Cleaning — Colors & Type Drop this stylesheet in of any HomeNest design. See README.md §3 for the full system. ============================================================ */ /* Google Fonts: Cormorant Garamond (display serif) + Montserrat (UI sans). Substitution flag: HomeNest wordmark is set in a custom/licensed serif. Cormorant Garamond is the nearest free analog. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Montserrat:wght@400;500;600;700&display=swap'); :root { /* ---------- Colors ---------- */ --navy: #0F2547; --navy-deep: #091732; --gold: #C9A24B; --gold-soft: #E8D49A; --cream: #F5EFE2; --ivory: #FBF8F1; --ink: #1B1F2A; --ink-soft: #4A5060; --whatsapp: #25D366; --whatsapp-deep: #128C7E; /* Hairlines */ --hairline-on-cream: rgba(15,37,71,0.10); --hairline-on-navy: rgba(255,255,255,0.12); /* ---------- Type ---------- */ --font-display: "Cormorant Garamond", "EB Garamond", Georgia, serif; --font-sans: "Montserrat", "Inter", system-ui, -apple-system, sans-serif; --fs-display: clamp(48px, 6vw, 80px); --fs-h1: clamp(34px, 4.2vw, 48px); --fs-h2: clamp(26px, 3vw, 34px); --fs-h3: 22px; --fs-body: 17px; --fs-small: 14px; --fs-micro: 12px; --fs-eyebrow: 13px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.6; /* ---------- Spacing (8-grid) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --gutter-mobile: 24px; --gutter-desktop: 48px; --content-max: 1080px; --reading-max: 640px; /* ---------- Radii ---------- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* ---------- Elevation (navy-tinted) ---------- */ --elev-0: none; --elev-1: 0 1px 2px rgba(15,37,71,.06), 0 2px 8px rgba(15,37,71,.06); --elev-2: 0 4px 14px rgba(15,37,71,.10), 0 12px 28px rgba(15,37,71,.08); --elev-3: 0 18px 40px rgba(15,37,71,.18); /* ---------- Motion ---------- */ --ease-calm: cubic-bezier(.2,.7,.2,1); --dur-fast: 180ms; --dur-mid: 280ms; --dur-slow: 480ms; } /* ============================================================ Semantic type primitives Use these instead of authoring h1/h2 ad-hoc. ============================================================ */ .h-display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; } .h-h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--navy); text-wrap: balance; } .h-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: -0.005em; color: var(--navy); text-wrap: balance; } .h-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--navy); } .t-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); text-wrap: pretty; } .t-small { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-soft); } .t-micro { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } /* Inverted variants (on navy) */ .on-navy .h-display, .on-navy .h-h1, .on-navy .h-h2, .on-navy .h-h3 { color: var(--cream); } .on-navy .t-body { color: rgba(255,255,255,0.84); } .on-navy .t-small{ color: rgba(255,255,255,0.66); } /* Text link */ .link { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness var(--dur-fast) var(--ease-calm); } .link:hover { text-decoration-thickness: 2px; }