/* ============================================================ SONARA — Colors & Type tokens Source of truth: landing/src/app/globals.css + landing/src/app/layout.tsx Brand: violet #41228e + crisp white/black, Space Grotesk + DM Sans ============================================================ */ /* Webfonts — DM Sans (body) ships locally from /fonts (uploaded TTFs). Space Grotesk (display) + JetBrains Mono (mono) load from Google Fonts. ⚠ Space Grotesk is NOT bundled locally — flag to user if a fully-local build is needed. */ @import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap"); /* DM Sans — local @font-face. Using the default cut (24pt-equivalent) which DM Sans ships as the unmarked filename (`DMSans-*.ttf`). Optical-size variants exist in /fonts (18pt / 24pt / 36pt) — wire them up via `font-size-adjust` / explicit @font-face if you need them. */ @font-face { font-family: "DM Sans"; font-weight: 300; font-style: normal; src: url("fonts/DMSans-Light.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 300; font-style: italic; src: url("fonts/DMSans-LightItalic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 400; font-style: normal; src: url("fonts/DMSans-Regular.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 400; font-style: italic; src: url("fonts/DMSans-Italic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 500; font-style: normal; src: url("fonts/DMSans-Medium.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 500; font-style: italic; src: url("fonts/DMSans-MediumItalic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 600; font-style: normal; src: url("fonts/DMSans-SemiBold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 600; font-style: italic; src: url("fonts/DMSans-SemiBoldItalic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 700; font-style: normal; src: url("fonts/DMSans-Bold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 700; font-style: italic; src: url("fonts/DMSans-BoldItalic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 800; font-style: normal; src: url("fonts/DMSans-ExtraBold.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 800; font-style: italic; src: url("fonts/DMSans-ExtraBoldItalic.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 900; font-style: normal; src: url("fonts/DMSans-Black.ttf") format("truetype"); font-display: swap; } @font-face { font-family: "DM Sans"; font-weight: 900; font-style: italic; src: url("fonts/DMSans-BlackItalic.ttf") format("truetype"); font-display: swap; } :root { /* ---------- BRAND VIOLET ---------- */ /* The single signature color of Sonara. Used for CTAs, links, accents, gradients, and the logo background swatch. */ --violet: #41228e; /* primary */ --violet-light: #6b4bb8; /* gradients / hover-on-light */ --violet-dark: #2e1866; /* gradient stops / pressed */ --violet-50: #f3eefc; --violet-100: #e3d8f6; --violet-200: #c5b1ee; --violet-300: #a689e2; --violet-400: #8b6cc8; --violet-500: #6b4bb8; --violet-600: #5a3aa8; --violet-700: #41228e; /* === BRAND === */ --violet-800: #2e1866; --violet-900: #1f1147; /* Dark-mode brighter variant (for readability on near-black) */ --violet-bright: #7b55d0; /* ---------- LIGHT THEME ---------- */ --background: oklch(98.5% 0.008 285); /* near-white, hint of violet */ --foreground: oklch(15% 0.02 285); /* near-black */ --card: #ffffff; --card-foreground: oklch(15% 0.02 285); --primary: oklch(15% 0.02 285); /* dark text on light */ --primary-foreground: oklch(98.5% 0.008 285); --secondary: var(--violet); /* === brand action === */ --secondary-foreground: #ffffff; --muted: oklch(96% 0.008 285); --muted-foreground: oklch(45% 0.03 285); --accent: oklch(96% 0.015 285); --accent-foreground: oklch(15% 0.02 285); --border: oklch(90% 0.015 285); --input: oklch(90% 0.015 285); --ring: var(--violet); --destructive: oklch(57.7% 0.245 27.325); --success: #16a34a; --warning: #f59e0b; /* ---------- TYPE FAMILIES ---------- */ --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; /* headings, badges, brand */ --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; /* body */ --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* ---------- TYPE SCALE (clamped, mobile-first) ---------- */ --fs-xs: 0.75rem; /* 12 */ --fs-sm: 0.875rem; /* 14 */ --fs-base: 1rem; /* 16 */ --fs-lg: 1.125rem; /* 18 */ --fs-xl: 1.25rem; /* 20 */ --fs-2xl: 1.5rem; /* 24 */ --fs-3xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.25rem); /* 30→36 */ --fs-4xl: clamp(2.25rem, 1.9rem + 2vw, 3rem); /* 36→48 */ --fs-5xl: clamp(3rem, 2.4rem + 3vw, 3.75rem); /* 48→60 */ --fs-6xl: clamp(3.75rem, 2.8rem + 4.5vw, 5rem); /* 60→80 */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7; --tracking-tighter: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.1em; /* ---------- RADIUS / SPACING / SHADOW ---------- */ --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-pill: 9999px; --radius: 0.75rem; /* default */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* Soft elevation (light mode) */ --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 6px -1px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05); --shadow-lg: 0 10px 15px -3px rgba(16, 24, 40, 0.10), 0 4px 6px -4px rgba(16, 24, 40, 0.05); --shadow-xl: 0 20px 25px -5px rgba(16, 24, 40, 0.10), 0 8px 10px -6px rgba(16, 24, 40, 0.05); /* Brand-tinted shadows for CTAs / hero cards */ --shadow-violet-sm: 0 4px 8px -2px rgba(65, 34, 142, 0.30), 0 2px 4px -1px rgba(65, 34, 142, 0.20); --shadow-violet-md: 0 6px 12px -2px rgba(65, 34, 142, 0.35), 0 3px 6px -1px rgba(65, 34, 142, 0.25); --shadow-violet-glow: 0 0 40px rgba(65, 34, 142, 0.30), 0 0 80px rgba(65, 34, 142, 0.15); --shadow-violet-glow-lg: 0 0 60px rgba(65, 34, 142, 0.40), 0 0 120px rgba(65, 34, 142, 0.20), 0 0 180px rgba(65, 34, 142, 0.10); /* CTA button signature shadow (from globals.css) */ --cta-shadow-rest: inset 0 1px 2px rgba(255,255,255,0.25), 0 4px 8px -2px rgba(139, 92, 246, 0.40), 0 2px 4px -1px rgba(139, 92, 246, 0.20); --cta-shadow-hover: inset 0 1px 2px rgba(255,255,255,0.25), 0 6px 12px -2px rgba(139, 92, 246, 0.50), 0 3px 6px -1px rgba(139, 92, 246, 0.30); /* ---------- GRADIENTS ---------- */ --gradient-violet: linear-gradient(135deg, #41228e 0%, #2e1866 100%); --gradient-violet-light: linear-gradient(135deg, #6b4bb8 0%, #41228e 100%); --gradient-violet-rich: linear-gradient(135deg, #5a35b0 0%, #41228e 50%, #2e1866 100%); --gradient-text-violet: linear-gradient(135deg, #6b4bb8 0%, #41228e 50%, #2e1866 100%); --gradient-fade-bg: radial-gradient(ellipse 80% 50% at 50% -20%, var(--violet) 0%, transparent 50%); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-spring: cubic-bezier(0.87, 0, 0.13, 1); --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 500ms; } /* ===================================================================== DARK THEME — default for sonara.space (defaultTheme="dark") ===================================================================== */ :root.dark, [data-theme="dark"] { --background: oklch(13% 0.02 285); --foreground: oklch(96% 0.005 285); --card: oklch(19% 0.02 285); --card-foreground: oklch(96% 0.005 285); --primary: oklch(96% 0.005 285); --primary-foreground: oklch(13% 0.02 285); --secondary: var(--violet-bright); --secondary-foreground: #ffffff; --muted: oklch(23% 0.02 285); --muted-foreground: oklch(75% 0.02 285); --accent: oklch(24% 0.03 285); --accent-foreground: oklch(96% 0.005 285); --border: oklch(33% 0.025 285); --input: oklch(33% 0.025 285); --ring: var(--violet-bright); } /* ===================================================================== SEMANTIC ELEMENT STYLES Drop this stylesheet into a page and h1/p/code immediately get Sonara typography and color. Headings use Space Grotesk; body uses DM Sans. ===================================================================== */ html { color-scheme: light dark; } body { font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--primary); letter-spacing: var(--tracking-tight); text-wrap: balance; margin: 0; } h1 { font-size: var(--fs-6xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); } h2 { font-size: var(--fs-4xl); font-weight: 700; line-height: var(--lh-tight); } h3 { font-size: var(--fs-2xl); font-weight: 600; line-height: var(--lh-snug); } h4 { font-size: var(--fs-xl); font-weight: 600; line-height: var(--lh-snug); } h5 { font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-snug); } h6 { font-size: var(--fs-base); font-weight: 600; line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: var(--tracking-wider); } p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--muted-foreground); margin: 0; text-wrap: pretty; } .lead { font-size: var(--fs-lg); line-height: var(--lh-relaxed); } small, .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } a { color: var(--secondary); text-decoration: none; transition: opacity var(--dur-fast) var(--ease-out); } a:hover { opacity: 0.8; } code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; } code { background: var(--muted); color: var(--primary); padding: 0.1em 0.35em; border-radius: var(--radius-xs); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; } /* Eyebrow / label — uppercase tracked label used above section titles */ .eyebrow { font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--muted-foreground); } /* Gradient text utility used on hero headlines */ .text-gradient-violet { background: var(--gradient-text-violet); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Selection color */ ::selection { background: var(--violet); color: white; }