/* ============================================================ HC Farms — Design System Cormorant Garamond (display) · Manrope (UI) · JetBrains Mono (data) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } img, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } a { color: inherit; text-decoration: none; } ul { list-style: none; } /* ---------- TOKENS ---------- */ :root { /* type */ --serif: "Cormorant Garamond", Georgia, serif; --sans: "Manrope", system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace; /* radii */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-egg: 50% 50% 50% 50% / 60% 60% 40% 40%; /* spacing rhythm */ --pad: clamp(20px, 5vw, 96px); /* shadows (warm-tinted) */ --sh-sm: 0 1px 2px rgba(28,26,20,.06), 0 2px 6px rgba(28,26,20,.05); --sh-md: 0 6px 18px rgba(28,26,20,.08), 0 2px 6px rgba(28,26,20,.05); --sh-lg: 0 20px 48px rgba(16,36,26,.16), 0 6px 16px rgba(16,36,26,.08); --sh-gold: 0 10px 30px rgba(217,162,39,.30); --ease: cubic-bezier(.22,.61,.36,1); } /* =========================================================== THEMES — set on =========================================================== */ /* default: Forest & Gold */ :root, [data-theme="forest"] { --bg: #F4EBD6; --bg-2: #EFE3C9; --surface: #FCF7EA; --surface-2: #FFFFFF; --ink: #1B1A13; --ink-soft: #4B4736; --ink-faint: #8C856E; --line: #E2D6BB; --green-900: #0E2118; --green-800: #15311F; --green: #214B33; --green-600: #2C6342; --green-500: #3C7C55; --gold: #D29B22; --gold-bright:#F0B400; --gold-soft: #F6E6BB; --brown: #7A5634; --clay: #B4713C; --on-green: #F6EFD9; /* text on green */ --hero-bg: var(--green-900); --hero-ink: #F4EBD6; } /* Cream & Sage — light, airy */ [data-theme="cream"] { --bg: #F7F3E8; --bg-2: #EFEAD8; --surface: #FFFFFF; --surface-2: #FBFAF4; --ink: #23271F; --ink-soft: #545A48; --ink-faint: #939884; --line: #E4E2D2; --green-900: #2D4636; --green-800: #3A5644; --green: #4E6E55; --green-600: #5F8167; --green-500: #79997F; --gold: #C99A3C; --gold-bright:#E0AE3E; --gold-soft: #F1E7C6; --brown: #8B6A45; --clay: #C08552; --on-green: #F4F1E4; --hero-bg: #4E6E55; --hero-ink: #F7F3E8; } /* Terracotta Earth — warm, rustic */ [data-theme="terracotta"] { --bg: #F3E6D6; --bg-2: #ECD9C2; --surface: #FCF4E9; --surface-2: #FFFFFF; --ink: #2A1C12; --ink-soft: #5A4533; --ink-faint: #9A8670; --line: #E2CDB3; --green-900: #2E3B22; --green-800: #3B4A2C; --green: #50613A; --green-600: #647754; --green-500: #7E8E6A; --gold: #C77E37; --gold-bright:#E2932F; --gold-soft: #F3DCBE; --brown: #8A4F2C; --clay: #C0633A; --on-green: #F5ECDB; --hero-bg: #5A2F1C; --hero-ink: #F3E6D6; } /* Midnight Coop — dark, premium */ [data-theme="midnight"] { --bg: #11140F; --bg-2: #161B13; --surface: #1B221A; --surface-2: #222B20; --ink: #ECE7D6; --ink-soft: #B6B2A0; --ink-faint: #7C7A6B; --line: #2E3729; --green-900: #0A0D08; --green-800: #121710; --green: #2E6344; --green-600: #3C7C55; --green-500: #51976B; --gold: #E7B53F; --gold-bright:#FFC94D; --gold-soft: #3A331C; --brown: #B0814F; --clay: #C98A56; --on-green: #F4EFDD; --hero-bg: #0A0D08; --hero-ink: #ECE7D6; } html, body { background: var(--bg); color: var(--ink); } body { font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; transition: background .5s var(--ease), color .5s var(--ease); overflow-x: hidden; } /* ---------- TYPE PRIMITIVES ---------- */ .display { font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -.01em; } .kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 500; } .mal { /* Malayalam accent */ font-family: var(--sans); font-weight: 600; letter-spacing: 0; } /* ---------- SHARED COMPONENTS ---------- */ .btn { --c: var(--green); display: inline-flex; align-items: center; gap: .55em; padding: 14px 26px; border-radius: 999px; font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: .01em; background: var(--c); color: var(--on-green); box-shadow: var(--sh-md); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .3s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-lg); } .btn:active { transform: translateY(0); } .btn--gold { --c: var(--gold); color: #1B1A13; box-shadow: var(--sh-gold); } .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); } .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--green); background: transparent; } .btn--lg { padding: 17px 34px; font-size: 16px; } .card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-md); border: 1px solid var(--line); } .chip { display: inline-flex; align-items: center; gap: .45em; padding: 6px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--gold-soft); color: var(--brown); } /* ---------- EGG SHAPE ---------- */ .egg { border-radius: var(--r-egg); background: linear-gradient(150deg, #FFFDF6, #F2E6C8 75%); box-shadow: inset -4px -6px 14px rgba(176,140,70,.30), inset 3px 4px 10px rgba(255,255,255,.7); } /* ---------- CIRCUIT BACKGROUND ---------- */ .circuit { position: absolute; inset: 0; pointer-events: none; opacity: .5; } .circuit line, .circuit path { stroke: currentColor; fill: none; stroke-width: 1; } .circuit circle { fill: currentColor; } /* dash animation for circuits */ @keyframes dashflow { to { stroke-dashoffset: -40; } } .circuit .flow { stroke-dasharray: 5 9; animation: dashflow 2.4s linear infinite; } /* ---------- reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } .circuit .flow { animation: none; } } /* ---------- utility ---------- */ .wrap { width: min(1200px, 100% - var(--pad)*2); margin-inline: auto; } .section { padding-block: clamp(64px, 9vw, 130px); position: relative; background: var(--bg); } .center { text-align: center; } .mono { font-family: var(--mono); } .serif { font-family: var(--serif); } ::selection { background: var(--gold); color: #1B1A13; } /* ---------- BRAND (shared) ---------- */ .brand { display: flex; align-items: center; gap: 11px; } .brand .mark { width: 38px; height: 38px; flex: 0 0 auto; } .brand .name { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1; letter-spacing: -.01em; white-space: nowrap; } .brand .name small { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .26em; color: var(--gold); margin-top: 3px; }