/** * Bella Nova NY, self-hosted webfonts. * * The reference loads these from Google Fonts. Self-hosting removes a third-party * request and guarantees the exact binaries the design was built against. * * Both families resolve to variable fonts, so one file covers the whole weight * range and the weight axis is declared with font-weight: . * * font-display: swap matches the reference's `&display=swap`. */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/CormorantGaramond-Variable-wght300-700.woff2') format('woff2-variations'), url('../fonts/CormorantGaramond-Variable-wght300-700.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('../fonts/CormorantGaramond-Italic-Variable-wght300-600.woff2') format('woff2-variations'), url('../fonts/CormorantGaramond-Italic-Variable-wght300-600.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('../fonts/Manrope-Variable-wght300-700.woff2') format('woff2-variations'), url('../fonts/Manrope-Variable-wght300-700.woff2') format('woff2'); } /** * Bella Nova NY, Design Tokens * Extracted from the compiled Tailwind v3.4.17 output of the Emergent reference app * (real-index.css, 74,842 bytes, 881 `--` custom properties total. The vast majority * of those 881 are Tailwind's per-utility-class plumbing vars, e.g. --tw-translate-x, * --tw-gradient-from, --tw-shadow, generated fresh for every utility class that needs * them). They are NOT design tokens and are not reproduced here. What follows is the * actual design system: the 19 semantic vars in the app's :root block, the 6 named * brand colors used directly as Tailwind theme colors, the type scale, spacing, * radius, shadow, transition, breakpoint and z-index values actually used in the app. * * Source of truth: real-index.css (:root block, lines 504-525) plus Tailwind theme * colors resolved from every .bg-, .text-, and .border- utility actually emitted in the * file. Cross-check target if values ever need re-verifying: * https://bella-modern.preview.emergentagent.com/ */ :root { /* ============================================================ COLOR: brand primitives (Tailwind custom theme colors) These are the literal names used throughout the JSX as bg-forest, text-sage, border-brass, etc. Defined as flat RGB in the Tailwind config (a separate system from the shadcn HSL block below). ============================================================ */ --color-cream: #F7F5F0; /* rgb(247 245 240), base light bg */ --color-forest: #2C3B2E; /* rgb(44 59 46), primary dark (text/bg) */ --color-sage: #8B9A84; /* rgb(139 154 132), mid green-gray accent */ --color-palesage: #E8EBE4; /* rgb(232 235 228), pale secondary bg */ --color-brass: #C2A878; /* rgb(194 168 120), gold accent, CTA/icon color */ --color-moss: #5C6B5E; /* rgb(92 107 94), secondary/muted text */ --color-white: #FFFFFF; /* ============================================================ COLOR: shadcn/ui semantic system (HSL triples, as authored) This is a SEPARATE definition system from the brand primitives above. See README.md "Ambiguous / flagged" section: several of these resolve to the same color as a brand primitive but were independently authored in HSL, so they land 1 unit off in RGB (--primary vs --color-forest, for example). Kept as raw HSL triples exactly as they appear in the source, for use with hsl(var(--x)) exactly as the app does. ============================================================ */ --background: 40 30% 95.5%; /* = #F7F5F0, matches --color-cream exactly */ --foreground: 133 15% 20%; /* = #2B3B2F, close to --color-forest (#2C3B2E) */ --card: 0 0% 100%; /* = #FFFFFF */ --card-foreground: 133 15% 20%; /* = #2B3B2F */ --popover: 0 0% 100%; /* = #FFFFFF */ --popover-foreground: 133 15% 20%; /* = #2B3B2F */ --primary: 133 15% 20%; /* = #2B3B2F, close to --color-forest */ --primary-foreground: 40 30% 95.5%; /* = #F7F5F0, matches --color-cream exactly */ --secondary: 103 15% 91%; /* = #E7EBE5, close to --color-palesage (#E8EBE4) */ --secondary-foreground: 133 15% 20%;/* = #2B3B2F */ --muted: 103 15% 91%; /* = #E7EBE5, close to --color-palesage */ --muted-foreground: 120 8% 39%; /* = #5B6B5B, close to --color-moss (#5C6B5E) */ --accent: 101 10% 56%; /* = #8B9A84, matches --color-sage exactly */ --accent-foreground: 0 0% 100%; /* = #FFFFFF */ --destructive: 0 60% 45%; /* = #B82E2E. Not observed in use anywhere in the provided source (no toast/alert component included) */ --destructive-foreground: 0 0% 98%; /* = #FAFAFA */ --border: 133 15% 20% / 0.12; /* forest at 12% alpha, hairline border */ --input: 120 8% 80%; /* = #C8D0C8 */ --ring: 101 10% 56%; /* = #8B9A84, focus ring = sage */ --radius: 0.75rem; /* 12px, base corner radius */ /* ============================================================ COLOR: utility (non-token) accents seen in raw CSS ============================================================ */ --color-selection-bg: #8B9A84; /* ::selection background = sage */ --color-selection-fg: #F7F5F0; /* ::selection color = cream */ --color-placeholder: #9ca3af; /* Tailwind gray-400 default, input::placeholder */ --color-ring-default: rgb(59 130 246 / 0.5); /* Tailwind's stock blue-500 ring, unused by brand components but present in the reset layer */ /* ============================================================ TYPOGRAPHY: font families Loaded via: @import url(https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Manrope:wght@300;400;500;600;700&display=swap) ============================================================ */ --font-serif: "Cormorant Garamond", Georgia, serif; /* headings, display, wordmark */ --font-sans: Manrope, ui-sans-serif, system-ui, sans-serif; /* body, UI, nav */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Tailwind preflight default, not used by brand components */ /* Cormorant Garamond weights loaded: 300,400,500,600,700 (upright) plus 300,400,500,600 (italic) */ /* Manrope weights loaded: 300,400,500,600,700 */ /* ============================================================ TYPOGRAPHY: font sizes actually used (Tailwind scale, keyed to the utility class name for traceability). Full per-role compositions (weight + line-height + letter-spacing + color) are in typography.md; this is the raw size scale only. ============================================================ */ --text-9px: 9px; /* text-[9px], logo tagline */ --text-10px: 10px; /* text-[10px] */ --text-11px: 11px; /* text-[11px], legal/meta */ --text-13px: 13px; /* text-[13px], nav links, CTA button */ --text-15vw: 15vw; /* text-[15vw], Home hero H1, fluid */ --text-xs: 0.75rem; /* 12px, line-height 1rem (16px) */ --text-sm: 0.875rem; /* 14px, line-height 1.25rem (20px) */ --text-base: 1rem; /* 16px, line-height 1.5rem (24px) */ --text-lg: 1.125rem; /* 18px, line-height 1.75rem (28px) */ --text-xl: 1.25rem; /* 20px, line-height 1.75rem (28px) */ --text-2xl: 1.5rem; /* 24px, line-height 2rem (32px) */ --text-3xl: 1.875rem; /* 30px, line-height 2.25rem (36px) */ --text-4xl: 2.25rem; /* 36px, line-height 2.5rem (40px) */ --text-5xl: 3rem; /* 48px, line-height 1 */ --text-6xl: 3.75rem; /* 60px, line-height 1, sm/md breakpoint only */ --text-7xl: 4.5rem; /* 72px, line-height 1 */ --text-8xl: 6rem; /* 96px, line-height 1, lg breakpoint only */ --text-26px: 26px; /* md:text-[26px] */ /* ============================================================ TYPOGRAPHY: line-heights actually used ============================================================ */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-relaxed: 1.625; --leading-hero: 0.95; /* leading-[0.95], Home hero H1 only */ --leading-about-hero: 1.02; /* leading-[1.02], About hero H1 only */ --leading-html-default: 1.5; /* html/body preflight default */ /* ============================================================ TYPOGRAPHY: letter-spacing (tracking) scale actually used ============================================================ */ --tracking-tight: -0.025em; --tracking-widest: 0.1em; --tracking-12: 0.12em; /* footer legal links, hairline dividers */ --tracking-15: 0.15em; /* nav links, CTA buttons, most uppercase micro-labels */ --tracking-18: 0.18em; /* nav link alt, page-body eyebrow variants */ --tracking-20: 0.2em; /* AgeGate footer note */ --tracking-25: 0.25em; /* .eyebrow component default */ --tracking-28: 0.28em; /* logo wordmark */ --tracking-30: 0.3em; /* AgeGate wordmark */ --tracking-55: 0.55em; /* logo tagline, AgeGate tagline. Widest tracking in the system */ /* ============================================================ SPACING: Tailwind's UNMODIFIED default 0.25rem (4px) scale. No custom spacing scale was found; every spacing utility in the file (p-, px-, py-, m-, gap-, space-y-) maps to Tailwind's stock scale. Listed here only for the values actually observed in use, as raw px reference. ============================================================ */ --space-0-5: 0.125rem; /* 2px */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-2-5: 0.625rem; /* 10px */ --space-3: 0.75rem; /* 12px */ --space-3-5: 0.875rem; /* 14px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-9: 2.25rem; /* 36px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-14: 3.5rem; /* 56px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ --space-28: 7rem; /* 112px, space-y-28, largest section rhythm gap observed */ --space-32: 8rem; /* 128px */ --space-36: 9rem; /* 144px */ /* Container */ --container-max: 80rem; /* 1280px, max-w-7xl, the site's outer content container */ /* ============================================================ RADIUS ============================================================ */ --radius-sm: calc(var(--radius) - 4px); /* 8px */ --radius-md: calc(var(--radius) - 2px); /* 10px */ --radius-lg: var(--radius); /* 12px */ --radius-xl: 0.75rem; /* 12px, literal (same value as --radius-lg via a different utility) */ --radius-3xl: 1.5rem; /* 24px, .dutchie-frame, larger cards */ --radius-full: 9999px; /* pills, CTA buttons, avatar/icon circles */ /* ============================================================ SHADOW ============================================================ */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --shadow-hairline-forest: 0 1px 0 rgba(44, 59, 46, 0.08); /* card top hairline, forest at 8% */ --shadow-dutchie-frame: 0 8px 32px rgba(44, 59, 46, 0.08); /* menu embed card, forest at 8%, soft and large */ --backdrop-blur: blur(8px); --backdrop-blur-xl: blur(24px); --backdrop-blur-2xl: blur(40px); /* AgeGate modal backdrop */ /* ============================================================ TRANSITIONS / EASING ============================================================ */ --ease-default: cubic-bezier(0.4, 0, 0.2, 1); /* Tailwind's default ease-in-out, used for all .transition-* utilities */ --ease-scroll-reveal: cubic-bezier(0.22, 1, 0.36, 1); /* framer-motion Reveal.jsx custom ease. Not in the CSS file, lives in JS. See animations.css. */ --duration-150: 150ms; /* default .transition/.transition-colors/.transition-transform/.transition-opacity duration */ --duration-200: 200ms; /* accordion open/close */ --duration-300: 300ms; /* nav link hover, CTA hover, most micro-interactions */ --duration-500: 500ms; --duration-700: 700ms; --duration-1000: 1000ms; --duration-scroll-reveal: 800ms; /* framer-motion Reveal.jsx, JS-driven */ --duration-pulse: 2s; /* @keyframes pulse (DutchieEmbed loading state) */ --duration-marquee: 60s; /* @keyframes marquee-scroll, linear infinite */ /* ============================================================ Z-INDEX LAYERS (as literally used, not a formal scale) ============================================================ */ --z-negative: -10; /* .-z-10, decorative background layers */ --z-1: 1; /* .z-[1] */ --z-10: 10; /* .z-10 */ --z-50: 50; /* .z-50 */ --z-grain: 90; /* body::after grain overlay, fixed, pointer-events:none */ --z-modal: 100; /* .z-[100], AgeGate fullscreen modal. Highest layer in the system */ } /* ============================================================ BREAKPOINTS (reference only, CSS custom properties cannot be used inside @media conditions; documented here so the values are recorded alongside the rest of the token set). Tailwind's UNMODIFIED default breakpoints. No custom/extra breakpoints exist anywhere in the compiled output. See README.md for the full breakdown of what changes at each one, and for how this maps to the WordPress/Elementor breakpoint set. ------------------------------------------------------------ sm: min-width: 640px md: min-width: 768px lg: min-width: 1024px (xl/2xl are Tailwind defaults but NEVER used anywhere in the compiled CSS; no xl: or 2xl: utility exists in the source) ============================================================ */