/* ========================================================= Laghuna Design System - design tokens (Plot pilot) Category-agnostic. Same tokens work for nurseries today, schools / healthcare / activities / tutors / plumbers tomorrow. Switch the page accent with . ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap'); :root { /* ---------- Brand palette ---------- */ --teal-50: #E9F2F0; --teal-100: #C7E0DC; --teal-300: #6DB2A8; --teal-500: #1E8A7E; --teal-700: #0F6B63; /* primary */ --teal-800: #0B564F; --teal-900: #07403B; /* ---------- Neutrals ---------- */ --ink-900: #1C1917; --ink-700: #44403C; --ink-500: #78716C; --ink-400: #A8A29E; --ink-300: #D6D3D1; --ink-200: #E7E5E4; --ink-100: #F5F5F4; --cream-50: #FBF8F3; --cream-100:#F5EFE3; --hairline: #EFE8DC; --white: #FFFFFF; /* ---------- Accent ---------- */ --amber-400: #F2B55A; --amber-500: #E8A23B; --amber-600: #C8841F; /* ---------- Semantic state ---------- */ --success-50: #E6F4EC; --success-500: #2F9E6C; --success-700: #1F7A50; --warn-50: #FCEFD6; --warn-500: #D98E2B; --warn-700: #9A6B00; --danger-50: #FBE7E2; --danger-500: #C24A3A; --danger-700: #8E2F22; --info-50: #E2EBF8; --info-500: #2E6FC9; --info-700: #1E4F94; /* ---------- Foreground / background aliases ---------- */ --fg-1: var(--ink-900); --fg-2: var(--ink-700); --fg-3: var(--ink-500); --fg-4: var(--ink-400); --fg-on-primary: #FFFFFF; --bg-page: var(--cream-50); --bg-surface: var(--white); --bg-muted: var(--cream-100); --bg-subtle: var(--ink-100); --border-default: var(--hairline); --border-strong: var(--ink-300); --border-focus: var(--teal-700); --link: var(--teal-700); --link-hover: var(--teal-800); /* ---------- Category accent (override per ) ---------- */ --cat-primary: var(--teal-700); --cat-primary-50: var(--teal-50); --cat-on-primary: #FFFFFF; --cat-icon: #0E5954; /* ---------- Typography ---------- */ --font-display: 'Fraunces', 'Playfair Display', Georgia, serif; --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-display-1: 64px; --fs-display-2: 48px; --fs-h1: 40px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-lg: 18px; --fs-base: 16px; --fs-sm: 14px; --fs-xs: 12px; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal:1.5; --lh-relaxed:1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* ---------- Spacing (4px base) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; --sp-18: 72px; --sp-24: 96px; /* ---------- Radii ---------- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---------- Shadows ---------- */ --elev-1: 0 1px 2px rgba(28,25,23,.04), 0 1px 3px rgba(28,25,23,.06); --elev-2: 0 4px 14px rgba(28,25,23,.08); --elev-3: 0 12px 32px rgba(28,25,23,.12); --ring-focus: 0 0 0 2px var(--bg-page), 0 0 0 4px var(--teal-700); /* ---------- Motion ---------- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-med: 240ms; --dur-slow: 320ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ---------- Layout ---------- */ --container-md: 1040px; --container-lg: 1200px; --container-xl: 1280px; --header-h: 72px; --subnav-h: 52px; --anchor-offset: calc(var(--header-h) + var(--subnav-h) + 28px); } /* ========================================================= Per-category accent overrides ========================================================= */ body[data-category="nurseries"] { --cat-primary: #0F6B63; --cat-primary-50: #E9F2F0; --cat-icon: #0E5954; } body[data-category="schools"] { --cat-primary: #1E4F94; --cat-primary-50: #E2EBF8; --cat-icon: #1B447F; } body[data-category="healthcare"] { --cat-primary: #2F7D6F; --cat-primary-50: #E1F0EC; --cat-icon: #245F55; } body[data-category="activities"] { --cat-primary: #C8841F; --cat-primary-50: #FCEFD6; --cat-icon: #9A6B00; } body[data-category="tutors"] { --cat-primary: #6B4F8C; --cat-primary-50: #ECE4F4; --cat-icon: #543E70; } body[data-category="plumbers"], body[data-category="services"] { --cat-primary: #44403C; --cat-primary-50: #F0EAD6; --cat-icon: #1C1917; } /* ========================================================= Element defaults ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--bg-page); color: var(--fg-2); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; margin: 0; } img, svg, video { max-width: 100%; display: block; } h1, h2, h3 { font-family: var(--font-display); color: var(--fg-1); letter-spacing: var(--tracking-tight); text-wrap: balance; font-weight: 500; margin: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); } h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } h4 { font-family: var(--font-sans); font-size: var(--fs-h4); line-height: var(--lh-snug); font-weight: 600; color: var(--fg-1); letter-spacing: var(--tracking-tight); margin: 0; } .eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--cat-primary); } p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--fg-2); text-wrap: pretty; margin: 0; } a { color: var(--link); text-decoration: none; transition: color var(--dur-base) var(--ease-out); } a:hover { color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px; } .num { font-variant-numeric: tabular-nums; } *:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--r-sm); } /* Anchor scroll-offset for any in-page section under a sticky sub-nav */ [id] { scroll-margin-top: var(--anchor-offset); } /* Print */ @media print { header, nav, .no-print, [data-no-print] { display: none !important; } body { background: #fff; color: #000; } a { color: #000; text-decoration: underline; } }