/* ===================================================================== Cadence - landing page styles Warm & professional SaaS. Cream background, forest-green accent, matte finish (subtle neutral shadows only - no glows). ===================================================================== */ /* ---------- Design tokens ---------- Warm LIGHT theme is the default. Dark mode is toggled via data-theme="dark" on . */ :root { --bg: #080A05; /* OLED dark forest black */ --surface: rgba(20, 24, 18, 0.55); /* Vantablack glass core */ --surface-2: rgba(30, 36, 28, 0.7); /* Elevated core */ --text: #E2F1E8; /* mint white */ --muted: #8BA393; /* minty sage gray */ --accent: #38A169; /* vibrant forest green */ --accent-2: #48BB78; /* mid green */ --accent-ink:#5FBE90; /* readable green on dark */ --border: rgba(255, 255, 255, 0.08); /* ultra-thin hairline */ --tint: #0E120A; /* deep dark green section tint */ --green-tint:rgba(56, 161, 105, 0.08); /* green-tinted surface */ --green-line:rgba(95, 190, 144, 0.2); /* green hairline */ --radius-sm: 14px; --radius: 18px; --radius-lg: 24px; --shadow-sm: 0 2px 8px rgba(0, 0, 0, .4); --shadow: 0 12px 36px rgba(0, 0, 0, .5); --shadow-md: 0 24px 60px rgba(0, 0, 0, .6); --maxw: 1120px; --ease: cubic-bezier(.22, 1, .36, 1); } /* ---------- Light theme (toggled via data-theme="light") ---------- */ [data-theme="light"] { --bg: #FDFBF7; /* warm cream */ --surface: #FFFFFF; /* white card */ --surface-2: #F7F4EE; /* slightly off-white elevated */ --text: #2D3748; /* warm dark gray */ --muted: #64748B; /* medium gray */ --accent: #2F855A; /* forest green */ --accent-2: #38A169; /* mid green */ --accent-ink:#276749; /* deep green */ --border: #E5E0D5; /* warm light hairline */ --tint: #F5F2EB; /* subtle warm section tint */ --green-tint:#EDF7F1; --green-line:#B8D8C8; --shadow-sm: 0 1px 3px rgba(0, 0, 0, .06); --shadow: 0 8px 24px rgba(0, 0, 0, .08); --shadow-md: 0 18px 46px rgba(0, 0, 0, .12); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } .overflow-x-hidden { overflow-x: hidden; } .w-full { width: 100%; } .max-w-full { max-width: 100%; } body { margin: 0; position: relative; overflow-x: hidden; isolation: isolate; font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background-color: var(--bg); background-image: radial-gradient(ellipse 60% 40% at 75% 15%, rgba(56, 161, 105, 0.18), transparent 60%), radial-gradient(ellipse 50% 50% at 20% 75%, rgba(47, 133, 90, 0.12), transparent 50%), radial-gradient(circle at center, rgba(255, 255, 255, 0.02) 1px, transparent 1.2px); background-size: 100% 100%, 100% 100%, 24px 24px; background-attachment: scroll; } [data-theme="light"] body { background-image: radial-gradient(70% 55% at 82% -5%, rgba(56, 161, 105, .07), transparent 60%), radial-gradient(60% 45% at 0% 6%, rgba(56, 161, 105, .04), transparent 55%), radial-gradient(circle at center, rgba(0, 0, 0, .015) 1px, transparent 1.2px), linear-gradient(180deg, rgba(237, 247, 241, .35) 0%, var(--bg) 26%); background-size: 100% 100%, 100% 100%, 22px 22px, 100% 100%; } h1, h2, h3 { line-height: 1.1; letter-spacing: -.03em; margin: 0; font-weight: 700; max-width: 100%; } p { margin: 0; overflow-wrap: anywhere; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } code, .mono { font-family: 'Geist Mono', 'SF Mono', 'Fira Code', monospace; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; } .container--narrow { max-width: 760px; } .accent-text { color: var(--accent-ink); } /* Accessible focus ring */ a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid rgba(47, 133, 90, .45); outline-offset: 2px; border-radius: 6px; } /* ---------- Shared bits ---------- */ .eyebrow { display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px; } .eyebrow--green { color: var(--accent-ink); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: .95rem; padding: 11px 20px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); white-space: nowrap; } .btn--sm { padding: 8px 16px; font-size: .9rem; } .btn--lg { padding: 14px 26px; font-size: 1rem; } .btn--block { width: 100%; } .btn--primary { color: #fff; background: var(--accent); box-shadow: var(--shadow-sm); } .btn--primary:hover { background: #2F855A; transform: translateY(-1px); box-shadow: var(--shadow); } .btn--primary:active { transform: translateY(0); } .btn--ghost { color: var(--text); background: rgba(255, 255, 255, 0.02); border-color: var(--border); } .btn--ghost:hover { border-color: var(--accent); background: rgba(56, 161, 105, 0.05); transform: translateY(-1px); } .btn--onDark { color: var(--accent); background: #fff; } .btn--onDark:hover { transform: translateY(-1px); box-shadow: var(--shadow); } /* Nested Trailing Icon (Button-in-Button) */ .btn__icon-wrapper { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); margin-left: 10px; flex-shrink: 0; transition: transform 0.3s var(--ease), background 0.3s var(--ease); } .btn--primary .btn__icon-wrapper { background: rgba(255, 255, 255, 0.15); } .btn--primary:hover .btn__icon-wrapper { background: rgba(255, 255, 255, 0.25); transform: translateX(4px); } .btn--ghost:hover .btn__icon-wrapper { background: rgba(56, 161, 105, 0.15); transform: translateX(4px); } .btn:active .btn__icon-wrapper { transform: translateX(2px) scale(0.95); } [data-theme="light"] .btn__icon-wrapper { background: rgba(0, 0, 0, 0.05); } [data-theme="light"] .btn--primary .btn__icon-wrapper { background: rgba(255, 255, 255, 0.2); }