/* * InboxMate marketing site — shared design system. * Loaded on every page (index, platform, chatbot, shopify, vs-*). * Tailwind (CDN) handles layout/utility classes; this file only adds * what Tailwind can't: motion, tokens, and small hand-tuned polish. * * Principles (see also /CLAUDE.md "anti-vibe" rules): * - One accent (emerald), quiet neutrals, no decorative gradients. * - Motion is restrained, staggered, and fully progressive-enhancement: * content is visible by default; animation only ever ADDS, never gates. * - Every animated rule is guarded by prefers-reduced-motion. */ :root { /* Spacing rhythm — used for section padding so pages share one vertical beat */ --space-section-y: clamp(4.5rem, 4rem + 2.5vw, 7.5rem); --space-section-y-tight: clamp(3rem, 2.6rem + 1.8vw, 5rem); /* Motion */ --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --dur-reveal: 700ms; --dur-fast: 180ms; /* Shadows — a single soft, warm-tinted shadow scale instead of ad-hoc box-shadows */ --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.10); --shadow-card-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 20px 40px -16px rgba(16, 185, 129, 0.22); } /* ── Section rhythm ─────────────────────────────────────────────────────── */ .section-y { padding-top: var(--space-section-y); padding-bottom: var(--space-section-y); } .section-y-tight { padding-top: var(--space-section-y-tight); padding-bottom: var(--space-section-y-tight); } /* ── Scroll reveal ──────────────────────────────────────────────────────── */ /* Content is visible by default (no-JS / reduced-motion safe). Animation is opt-in via prefers-reduced-motion: no-preference, and only takes effect once JS adds .js-ready to (see js/reveal.js) — this prevents any flash-of-hidden-content if the script is slow, blocked, or absent. */ @media (prefers-reduced-motion: no-preference) { html.js-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } html.js-ready .reveal.visible { opacity: 1; transform: translateY(0); } /* Stagger for grouped children — apply .reveal-group to the parent grid/list and .reveal to each child; no JS index-counting needed. */ .reveal-group > .reveal:nth-child(1) { --reveal-delay: 0ms; } .reveal-group > .reveal:nth-child(2) { --reveal-delay: 90ms; } .reveal-group > .reveal:nth-child(3) { --reveal-delay: 180ms; } .reveal-group > .reveal:nth-child(4) { --reveal-delay: 270ms; } .reveal-group > .reveal:nth-child(5) { --reveal-delay: 360ms; } .reveal-group > .reveal:nth-child(6) { --reveal-delay: 450ms; } } /* ── Card / tile micro-interaction ─────────────────────────────────────── */ .tilt-card { transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, border-color var(--dur-fast) ease; } @media (hover: hover) and (pointer: fine) { .tilt-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); } } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn-primary { transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease; } @media (hover: hover) and (pointer: fine) { .btn-primary:hover { transform: translateY(-1px); } } .btn-primary:active { transform: translateY(0); } /* ── Accessible focus ring everywhere (Tailwind CDN default outline is thin) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; border-radius: 4px; } /* ── Underline-on-hover for inline text links (replaces bare color-only hover) */ .link-underline { background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 1px; transition: background-size var(--dur-fast) ease; } @media (hover: hover) and (pointer: fine) { .link-underline:hover { background-size: 100% 1px; } } /* ── Hero ambient — a quiet, contained glow instead of a full-bleed gradient blob. Extremely low opacity, blurred, pointer-events none, decorative only. */ .hero-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .hero-ambient::before { content: ""; position: absolute; top: -10%; left: 50%; width: 60rem; height: 32rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0) 70%); filter: blur(10px); } /* ── Pricing ambient — the same quiet, contained glow treatment as the hero, reused behind the pricing cards so that section reads a little less flat without introducing a new decorative motif. */ .pricing-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .pricing-ambient::before { content: ""; position: absolute; top: -6%; left: 50%; width: 54rem; height: 30rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(16, 185, 129, 0.06), rgba(16, 185, 129, 0) 70%); filter: blur(10px); } /* Fine dot-grid texture — subtle structure behind hero copy, on-brand & quiet */ .hero-grid { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(15, 23, 42, 0.07) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%); mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), transparent 85%); } /* ── Counter / number ticks (used with existing .counter JS) ─────────────── */ .tabular-nums { font-variant-numeric: tabular-nums; } /* ── Skip link (accessibility — hidden until focused) ─────────────────────── */ .skip-link { position: absolute; left: 0.75rem; top: -3rem; background: #10b981; color: #fff; padding: 0.6rem 1rem; border-radius: 0.5rem; z-index: 100; transition: top var(--dur-fast) ease; font-weight: 600; font-size: 0.875rem; } .skip-link:focus { top: 0.75rem; } /* ── Misc: prevent any accidental horizontal scroll from decorative layers */ body { overflow-x: hidden; } /* ── Anchor-jump offset: the header is `fixed`, so in-page anchors (nav links, /#pricing from other pages) need breathing room or their top content — including any absolutely-positioned badge — lands under the header. */ section[id] { scroll-margin-top: 5.5rem; } /* ── Display face — used sparingly for H1/H2 emphasis words only. Body copy stays on the fast system stack; only headline emphasis pulls in Newsreader (one italic + one regular weight), loaded on index.html. */ .font-display { font-family: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif; font-optical-sizing: auto; } /* ── Signature hero moment: the real product screenshot in a browser mock ── The hero shows the actual InboxMate "System-Übersicht" (visualization.png) framed in a minimal browser chrome, instead of a synthetic CSS mockup. Purely presentational; no motion of its own beyond the shared .reveal. */ .browser-mock { border-radius: 0.9rem; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.28), var(--shadow-card); } .browser-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.9rem; background: #f8fafc; border-bottom: 1px solid #eef2f6; } .browser-dots { display: inline-flex; gap: 0.35rem; flex-shrink: 0; } .browser-dot { width: 0.65rem; height: 0.65rem; border-radius: 999px; background: #e2e8f0; } .browser-url { flex: 1; min-width: 0; text-align: center; font-size: 0.72rem; font-weight: 500; color: #94a3b8; background: #fff; border: 1px solid #eef2f6; border-radius: 999px; padding: 0.28rem 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .browser-shot { background: #fff; } /* ── Pricing: featured (Pro) tile gets quiet depth instead of a louder color. A subtle top-to-bottom gradient (not a loud AI-cliché blob) reads as more premium than a flat fill while staying just as "dark green" at a glance. */ .price-tile-featured { background: linear-gradient(165deg, #114f40 0%, #0b3b30 45%, #082a22 100%); color: #f0fdf9; border-color: transparent !important; box-shadow: 0 24px 48px -20px rgba(4, 32, 26, 0.45); } /* Shared pricing strings (i18n keys used on / , /chatbot, /platform, /shopify) must not hardcode a text colour: the Pro tile is dark on the home page and white everywhere else. Use .price-tile-muted in those strings — it resolves to grey on light tiles and to mint inside the dark featured tile. */ .price-tile-muted { color: #6b7280; } .price-tile-featured .price-tile-muted { color: #a7d9c9; } .price-tile-featured .price-tile-hr { border-color: rgba(255,255,255,0.12); } /* ── Pricing: the two non-featured tiles get a whisper of resting depth so the row doesn't read as flat cards next to the featured tile's shadow. */ .price-tile-quiet { background: linear-gradient(180deg, #ffffff 0%, #fafaf9 100%); box-shadow: var(--shadow-card); } /* ── Progressive disclosure (native
, no JS needed to toggle) ─── Used by: the collapsed hero video, the pricing calculator, and each item in the demoted "How it works" section. */ .disclosure > summary { cursor: pointer; list-style: none; } .disclosure > summary::-webkit-details-marker { display: none; } .disclosure .disclosure-chevron { transition: transform var(--dur-fast) ease; } .disclosure[open] .disclosure-chevron { transform: rotate(180deg); }