/* === MAKHANZA · Webfonts === Display: Playfair Display (serif) · Body: DM Sans (sans) Both served from Google Fonts. These @import lines bring in the @font-face declarations the compiler ships to consumers. */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600&display=swap'); @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap'); /* =========================================================== MAKHANZA · COLOUR TOKENS Two anchor ramps — Forest Green & Gold — over a warm neutral spine. Every colour decision maps to one of these three families. Base scale values first, semantic aliases second. =========================================================== */ :root { /* ---- Forest Green ramp ---- */ --forest-50: #E8F5EE; /* tint */ --forest-100: #B8DFC8; --forest-200: #4A9266; /* light */ --forest-400: #2D6A48; /* mid */ --forest-600: #1A4A2E; /* brand */ --forest-900: #0F3320; /* deep */ /* ---- Gold ramp ---- */ --gold-50: #FDF4DC; /* tint */ --gold-100: #F5D96B; /* light */ --gold-200: #EFB830; --gold-400: #C8960C; /* brand */ --gold-600: #8A6509; /* dark */ --gold-900: #5C4106; /* deepest */ /* ---- Warm neutral ramp ---- */ --white: #FFFFFF; --cream: #FBF6EC; --cream-dark: #F0E8D5; --neutral-400: #8A7A60; /* text light */ --neutral-600: #4A4030; /* text mid */ --neutral-900: #1C1A14; /* text dark */ --brown-warm: #5C3D1A; /* reserved warm accent */ /* =========================================================== SEMANTIC ALIASES — reach for these in product work. =========================================================== */ /* Brand */ --color-forest: var(--forest-600); --color-forest-mid: var(--forest-400); --color-forest-light: var(--forest-200); --color-forest-deep: var(--forest-900); --color-gold: var(--gold-400); --color-gold-light: var(--gold-100); --color-gold-dark: var(--gold-600); /* Surfaces */ --surface-page: var(--cream); /* main page bg */ --surface-card: var(--white); /* product / form cards */ --surface-muted: var(--cream-dark); /* nutrition bg, inputs */ --surface-forest: var(--forest-600); /* Why-Makhana dark section */ --surface-forest-deep: var(--forest-900); /* incubation section */ --surface-footer: var(--neutral-900); /* footer bg */ /* Text */ --text-strong: var(--neutral-900); /* primary body / headings on light */ --text-body: var(--neutral-600); /* paragraphs, subtitles */ --text-muted: var(--neutral-400); /* captions, meta */ --text-on-forest: var(--gold-100); /* headings/text on dark forest */ --text-heading: var(--forest-600); /* section titles on light */ /* Accent / lines */ --accent: var(--gold-400); --accent-soft: rgba(200, 150, 12, 0.08); /* eyebrow pill bg */ --accent-tag: rgba(200, 150, 12, 0.12); /* product tag bg */ --border-hairline: var(--cream-dark); /* card borders */ --border-gold-soft: rgba(200, 150, 12, 0.20); /* nav border, dividers */ --border-on-forest: rgba(245, 217, 107, 0.20); /* benefit-card border */ /* Focus / interactive */ --focus-ring: var(--forest-200); } /* =========================================================== MAKHANZA · TYPOGRAPHY TOKENS Display = Playfair Display (serif) · Body = DM Sans (sans) =========================================================== */ :root { /* ---- Families ---- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* ---- Weights ---- */ --fw-light: 300; /* @kind font */ /* hero subtitle */ --fw-regular: 400; /* @kind font */ /* body, blockquote, tagline */ --fw-medium: 500; /* @kind font */ /* nav links */ --fw-semibold: 600; /* @kind font */ /* eyebrow, badge, buttons */ --fw-bold: 700; /* @kind font */ /* all headings */ /* ---- Fluid display sizes ---- */ --fs-hero: clamp(3rem, 6vw, 4.8rem); /* @kind font */ /* hero H1 */ --fs-section: clamp(2rem, 3.5vw, 3rem); /* @kind font */ /* H2 section titles */ --fs-h3: 1.5rem; /* @kind font */ --fs-quote: 1.3rem; /* @kind font */ /* blockquote */ /* ---- Body / UI sizes ---- */ --fs-lead: 1.15rem; /* @kind font */ /* hero subtitle */ --fs-body: 1.05rem; /* @kind font */ /* section paragraphs */ --fs-base: 1rem; /* @kind font */ --fs-sm: 0.95rem; /* @kind font */ --fs-card: 0.88rem; /* @kind font */ /* product card body */ --fs-label: 0.82rem; /* @kind font */ --fs-eyebrow: 0.78rem; /* @kind font */ /* eyebrow labels */ --fs-tag: 0.72rem; /* @kind font */ /* product tags */ /* ---- Line heights ---- */ --lh-tight: 1.12; /* @kind font */ /* hero title */ --lh-heading: 1.2; /* @kind font */ /* section title */ --lh-snug: 1.6; /* @kind font */ /* blockquote, card */ --lh-lead: 1.75; /* @kind font */ /* hero subtitle */ --lh-body: 1.8; /* @kind font */ /* paragraphs */ /* ---- Letter spacing ---- */ --ls-eyebrow: 0.18em; /* @kind font */ /* uppercase eyebrow */ --ls-nav: 0.08em; /* @kind font */ /* nav links, badges */ --ls-cta: 0.05em; /* @kind font */ /* buttons */ --ls-tight: -0.01em; /* @kind font */ /* large display headings */ } /* =========================================================== MAKHANZA · SPACING, RADIUS & LAYOUT TOKENS =========================================================== */ :root { /* ---- Spacing scale ---- */ --space-xs: 4px; /* icon padding, micro gaps */ --space-sm: 8px; /* badge padding, small gaps */ --space-md: 12px; /* badge grid gap, inner card gaps */ --space-lg: 16px; /* compact card padding, form gaps */ --space-xl: 24px; /* card padding, content gutters */ --space-2xl: 32px; /* card grid rows, roadmap gap */ --space-3xl: 48px; /* hero action gap, section margin */ --space-4xl: 64px; /* story / nutrition grid gap */ /* ---- Structural ---- */ --section-padding: 96px; /* 6rem · full-section top/bottom */ --section-padding-mobile: 64px; /* 4rem · ≤900px */ --nav-height: 72px; --hero-top-pad: 100px; /* clears fixed nav */ --content-max: 1200px; /* outer content container */ --measure: 640px; /* paragraph max-width */ /* ---- Border radius ---- */ --radius-sm: 4px; /* bar track ends, swatches */ --radius-md: 8px; /* badge pills, small tags */ --radius-lg: 12px; /* form inputs */ --radius-xl: 20px; /* product & benefit cards */ --radius-2xl: 24px; /* hero/story images, form card */ --radius-pill: 9999px; /* CTAs, nav pill, badges */ /* ---- Borders ---- */ --border-width: 1px; --border-width-2: 1.5px; /* outline buttons, inputs */ /* ---- Motion ---- */ --ease: ease; /* @kind other */ --ease-out: ease-out; /* @kind other */ --dur-fast: 0.15s; /* @kind other */ --dur: 0.2s; /* @kind other */ --dur-lift: 0.25s; /* @kind other */ --dur-reveal: 0.7s; /* @kind other */ --float-duration: 6s; /* @kind other */ } /* =========================================================== MAKHANZA · SHADOW TOKENS A forest+gold layered elevation system. Shadows are tinted with the forest green (and gold on the hero) — never neutral grey — so elevation feels warm and on-brand. =========================================================== */ :root { /* Floating hero product shot — dual forest + gold halo */ --shadow-hero: 0 30px 80px rgba(26, 74, 46, 0.20), 0 8px 24px rgba(200, 150, 12, 0.15); /* Prominent editorial images in two-column grids */ --shadow-image: 0 20px 60px rgba(26, 74, 46, 0.15); /* Product card raised (hover) state */ --shadow-card-hover: 0 12px 40px rgba(26, 74, 46, 0.12); /* Subtle elevation on white contact-form card */ --shadow-card: 0 8px 32px rgba(26, 74, 46, 0.08); /* Section divider — thin gold gradient rule (not a shadow, lives here as a shared decorative token) */ --divider-gradient: linear-gradient(90deg, transparent, var(--gold-100), transparent); }