:root { /* --- VNNY brand tokens (generated manually; keep in sync with tokens.json) --- */ --vnny-primary-sage-dark: #3D4F3F; --vnny-primary-sage: #4A5D4A; --vnny-primary-sage-medium: #5A6B52; --vnny-primary-sage-light: #6B7D63; --vnny-bg-white: #FFFFFF; --vnny-bg-cream: #F5F5EB; --vnny-bg-dark: #3D4F3F; --vnny-text-primary: #3D4F3F; --vnny-text-secondary: #5A6B5A; --vnny-text-muted: #8B9B8B; --vnny-text-on-dark: #F5F5EB; --vnny-accent-teal-slate: #4A6B6B; --vnny-accent-teal-slate-light: #6B8B8B; --vnny-accent-forest: #4A6B4A; --vnny-accent-ochre: #B5864A; --vnny-accent-slate: #5A6B6B; --vnny-radius-sm: 10px; --vnny-radius-md: 14px; --vnny-radius-lg: 18px; --vnny-radius-xl: 22px; --vnny-shadow-soft: 0 10px 22px rgba(0,0,0,0.18); --vnny-shadow-card: 0 12px 32px rgba(25, 39, 25, 0.12); --vnny-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --vnny-font-serif: ui-serif, Georgia, "Times New Roman", Times, serif; } /* --------------------------------------- Base page styling (website) --------------------------------------- */ html, body { height: 100%; } body { margin: 0; font-family: var(--vnny-font-sans); color: var(--vnny-text-primary); background: var(--vnny-bg-white); } /* --------------------------------------- Backgrounds (match the app vibe) - "Speckled gradient" like the Flutter NoiseOverlay + gradients --------------------------------------- */ /* Use on or on a wrapper */ .vnny-bg-sage { position: relative; background: radial-gradient(1200px 600px at 20% -10%, rgba(107, 125, 99, 0.55), rgba(255,255,255,0) 60%), radial-gradient(900px 500px at 80% 0%, rgba(74, 107, 107, 0.22), rgba(255,255,255,0) 55%), linear-gradient(180deg, rgba(245,245,235,1) 0%, rgba(245,245,235,1) 42%, rgba(255,255,255,1) 100%); } /* Dark hero background (for sections) */ .vnny-bg-sage-dark { position: relative; color: var(--vnny-text-on-dark); background: radial-gradient(900px 520px at 25% -20%, rgba(107, 125, 99, 0.35), rgba(61,79,63,0) 60%), radial-gradient(700px 420px at 80% 10%, rgba(74, 107, 107, 0.18), rgba(61,79,63,0) 60%), linear-gradient(180deg, rgba(61,79,63,1) 0%, rgba(74,93,74,1) 100%); } /* Speckle overlay – apply alongside either background above */ .vnny-noise::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.055; /* tweak to taste */ background-image: radial-gradient(rgba(0,0,0,0.9) 0.6px, transparent 0.7px), radial-gradient(rgba(255,255,255,0.9) 0.6px, transparent 0.7px); background-size: 14px 14px, 18px 18px; background-position: 0 0, 6px 10px; mix-blend-mode: soft-light; } /* --------------------------------------- Components --------------------------------------- */ .vnny-card { background: rgba(255,255,255,0.92); border-radius: var(--vnny-radius-lg); box-shadow: var(--vnny-shadow-card); border: 1px solid rgba(61, 79, 63, 0.12); } .vnny-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 18px; border-radius: var(--vnny-radius-md); font-weight: 600; border: none; text-decoration: none; cursor: pointer; } .vnny-btn-primary { background: var(--vnny-primary-sage-dark); color: #fff; } .vnny-btn-secondary { background: transparent; color: var(--vnny-primary-sage-dark); border: 1px solid rgba(61, 79, 63, 0.35); }