/* ============================================================ Village By The Lake — colors & type tokens Drop into any to get the brand foundation. ============================================================ */ /* ---------- Brand webfonts: Eina ---------- Eina01 — display (slightly more geometric / friendly) Eina03 — body / UI We load the four weights × roman+italic for each. */ @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('fonts/Eina01-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-RegularItalic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-SemiboldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('fonts/Eina03-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } /* When loaded from a /preview/* card or /ui_kits//* page (one level deep), the relative URL above resolves to ../fonts/. Provide a fallback @font-face block so nested pages still get the brand fonts without per-file rewrites. */ @font-face { font-family: 'Eina01'; src: url('../fonts/Eina01-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('../fonts/Eina01-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('../fonts/Eina01-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('../fonts/Eina01-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../fonts/Eina03-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../fonts/Eina03-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../fonts/Eina03-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../fonts/Eina03-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* And the same for two-deep pages (e.g. /ui_kits/website/*). */ @font-face { font-family: 'Eina01'; src: url('../../fonts/Eina01-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('../../fonts/Eina01-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('../../fonts/Eina01-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina01'; src: url('../../fonts/Eina01-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../../fonts/Eina03-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../../fonts/Eina03-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../../fonts/Eina03-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Eina03'; src: url('../../fonts/Eina03-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ============ COLOR ============ */ /* Core palette */ --forest: #1F2A24; --forest-90: #2A3730; --forest-80: #3A4842; --forest-60: #6E7A74; --forest-40: #A4ACA8; --forest-12: rgba(31, 42, 36, 0.12); --forest-08: rgba(31, 42, 36, 0.08); --forest-04: rgba(31, 42, 36, 0.04); --cream: #FAF6EE; --cream-warm: #F5EFE2; --cream-soft: #FCF9F2; --sand: #E8DEC9; --sand-deep: #D9CCB1; --sand-soft: #F1E8D5; --lake: #3F5B5A; --lake-soft: #6F8786; --moss: #7A8B5C; --moss-soft: #A1B084; --ember: #C2643D; --ember-deep: #A85230; --ember-soft: #E0926F; /* Semantic */ --bg: var(--cream); --bg-alt: var(--cream-warm); --bg-card: var(--cream-soft); --bg-inverse: var(--forest); --fg: var(--forest); --fg-muted: var(--forest-80); --fg-subtle: var(--forest-60); --fg-faint: var(--forest-40); --fg-inverse: var(--cream); --border: var(--forest-12); --border-strong:var(--forest); --divider: var(--forest-12); --link: var(--forest); --link-hover: var(--ember-deep); --accent: var(--ember); --accent-deep: var(--ember-deep); --focus: var(--ember); --success: #5C7A4F; --warning: #B8862C; --danger: #A33A2A; --info: var(--lake); /* ============ TYPE ============ */ --font-display: 'Eina01', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Eina03', 'Helvetica Neue', Arial, sans-serif; --font-editorial:'Eina01', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Type scale (px) */ --fs-12: 12px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-48: 48px; --fs-56: 56px; --fs-72: 72px; --fs-96: 96px; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.45; --lh-relaxed: 1.6; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-eyebrow:0.16em; /* ============ SPACING ============ */ --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; --sp-10: 128px; /* ============ RADIUS ============ */ --r-sharp: 0px; --r-input: 2px; --r-pill: 999px; /* ============ ELEVATION ============ */ --shadow-sm: 0 1px 0 rgba(31,42,36,.06); --shadow-md: 0 1px 0 rgba(31,42,36,.06), 0 12px 28px -16px rgba(31,42,36,.18); --shadow-lg: 0 1px 0 rgba(31,42,36,.06), 0 28px 56px -28px rgba(31,42,36,.28); /* ============ MOTION ============ */ --ease: cubic-bezier(.2,.6,.2,1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 480ms; } /* ============================================================ Element defaults ============================================================ */ html { color-scheme: light; } body { font-family: var(--font-body); font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); color: inherit; margin: 0; } h1 { font-size: var(--fs-72); line-height: var(--lh-tight); font-weight: 300; letter-spacing: var(--tracking-tight); } h2 { font-size: var(--fs-48); line-height: var(--lh-snug); font-weight: 300; letter-spacing: var(--tracking-tight); } h3 { font-size: var(--fs-28); line-height: var(--lh-snug); font-weight: 600; } h4 { font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: 600; font-family: var(--font-body); letter-spacing: var(--tracking-tight); } p { margin: 0; text-wrap: pretty; max-width: 64ch; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--forest-12); transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } a:hover { border-bottom-color: var(--forest); } small, .small { font-size: var(--fs-14); color: var(--fg-muted); } /* ============================================================ Utility classes ============================================================ */ .eyebrow { font-family: var(--font-body); font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--fg-muted); } .display-xl { font-family: var(--font-display); font-size: var(--fs-96); line-height: var(--lh-tight); font-weight: 300; letter-spacing: var(--tracking-tight); } .display-lg { font-family: var(--font-display); font-size: var(--fs-72); line-height: var(--lh-tight); font-weight: 300; letter-spacing: var(--tracking-tight); } .display-md { font-family: var(--font-display); font-size: var(--fs-48); line-height: var(--lh-snug); font-weight: 300; letter-spacing: var(--tracking-tight); } .display-sm { font-family: var(--font-display); font-size: var(--fs-32); line-height: var(--lh-snug); font-weight: 600; } .serif-editorial { font-family: var(--font-editorial); font-size: var(--fs-18); line-height: var(--lh-relaxed); font-weight: 300; } .label-caps { font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); } /* ============================================================ Buttons ============================================================ */ .btn { font-family: var(--font-body); font-size: var(--fs-15); font-weight: 500; line-height: 1; padding: 14px 22px; border-radius: var(--r-input); border: 1px solid transparent; background: var(--forest); color: var(--cream); cursor: pointer; transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); display: inline-flex; align-items: center; gap: var(--sp-2); } .btn:hover { background: var(--forest-90); } .btn:active { transform: scale(.985); } .btn--ghost { background: transparent; color: var(--forest); border-color: var(--forest); } .btn--ghost:hover { background: var(--forest); color: var(--cream); } .btn--ember { background: var(--ember); color: var(--cream); } .btn--ember:hover { background: var(--ember-deep); } .btn--pill { border-radius: var(--r-pill); padding: 12px 20px; } .wave-rule { display: block; width: 64px; height: 14px; color: var(--fg-muted); }