/* ============================================================ Flowmatic — styles.css Design system: matches itinn.eu (oklch color tokens) Light/dark via data-theme on ============================================================ */ /* ── Design Tokens ─────────────────────────────────────────── */ :root { /* Colors */ --background: oklch(100% 0 0); --foreground: oklch(14.5% 0 0); --card: oklch(100% 0 0); --card-foreground: oklch(14.5% 0 0); --border: oklch(92.2% 0 0); --muted: oklch(97% 0 0); --muted-foreground: oklch(55.6% 0 0); --accent: #00d4ff; --accent-dark: #0099bb; --radius: 0.625rem; /* Typography */ --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", monospace; /* Spacing scale */ --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; /* Layout */ --max-width: 1200px; --header-height: 64px; } [data-theme="dark"] { --background: oklch(14.5% 0 0); --foreground: oklch(98.5% 0 0); --card: oklch(20.5% 0 0); --card-foreground: oklch(98.5% 0 0); --border: oklch(100% 0 0 / 0.1); --muted: oklch(20.5% 0 0); --muted-foreground: oklch(65% 0 0); } /* ── Reset & Base ────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; transition: background-color 0.2s ease, color 0.2s ease; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } /* ── Container ───────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--space-6); } /* ── Header ──────────────────────────────────────────────────── */ .header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background-color: var(--background); border-bottom: 1px solid var(--border); backdrop-filter: blur(8px); background-color: color-mix(in oklch, var(--background) 85%, transparent); } .header__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; } .header__logo { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.02em; } .header__logo-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: flex; align-items: center; justify-content: center; color: #0a0a1a; font-weight: 800; font-size: 1rem; } .header__nav { display: flex; align-items: center; gap: var(--space-6); } .header__nav a { font-size: 0.9rem; color: var(--muted-foreground); transition: color 0.15s; } .header__nav a:hover { color: var(--foreground); } .header__actions { display: flex; align-items: center; gap: var(--space-3); } /* Theme toggle button */ .theme-toggle { background: none; border: 1px solid var(--border); border-radius: var(--radius); width: 36px; height: 36px; cursor: pointer; color: var(--muted-foreground); display: flex; align-items: center; justify-content: center; transition: color 0.15s, border-color 0.15s; flex-shrink: 0; } .theme-toggle:hover { color: var(--foreground); border-color: var(--foreground); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ── Buttons ─────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.6rem 1.25rem; border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.15s, transform 0.1s; white-space: nowrap; } .btn:hover { opacity: 0.88; } .btn:active { transform: scale(0.98); } .btn--primary { background: var(--accent); color: #0a0a1a; } .btn--outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); } .btn--outline:hover { border-color: var(--accent); color: var(--accent); } .btn--lg { padding: 0.85rem 1.75rem; font-size: 1rem; } /* ── Hero Section ────────────────────────────────────────────── */ .hero { padding: var(--space-24) 0 var(--space-16); text-align: center; position: relative; overflow: hidden; } /* Subtle radial glow behind hero */ .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 70%); pointer-events: none; } .hero__badge { display: inline-flex; align-items: center; gap: var(--space-2); background: color-mix(in oklch, var(--accent) 15%, transparent); color: var(--accent); border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent); border-radius: 99px; padding: 0.3rem 0.9rem; font-size: 0.8rem; font-weight: 600; margin-bottom: var(--space-6); text-transform: uppercase; letter-spacing: 0.05em; } .hero__title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: var(--space-6); max-width: 820px; margin-left: auto; margin-right: auto; } .hero__title span { color: var(--accent); } .hero__subtitle { font-size: clamp(1rem, 2vw, 1.2rem); color: var(--muted-foreground); max-width: 600px; margin: 0 auto var(--space-8); line-height: 1.7; } .hero__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; } .hero__social-proof { margin-top: var(--space-12); color: var(--muted-foreground); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: var(--space-2); } .hero__social-proof::before, .hero__social-proof::after { content: ""; display: block; height: 1px; width: 60px; background: var(--border); } /* ── Pain Section ────────────────────────────────────────────── */ .pain { padding: var(--space-16) 0; background: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section__label { text-align: center; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); margin-bottom: var(--space-3); } .section__title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-4); } .section__subtitle { text-align: center; color: var(--muted-foreground); max-width: 560px; margin: 0 auto var(--space-12); font-size: 1rem; line-height: 1.7; } .pain__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); } .pain__card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) * 2); padding: var(--space-8); position: relative; overflow: hidden; transition: border-color 0.2s; } .pain__card:hover { border-color: color-mix(in oklch, var(--accent) 40%, transparent); } .pain__card-stat { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; color: var(--accent); line-height: 1; margin-bottom: var(--space-2); } .pain__card-label { font-size: 1rem; font-weight: 600; margin-bottom: var(--space-2); } .pain__card-desc { font-size: 0.9rem; color: var(--muted-foreground); line-height: 1.6; } /* ── Utilities ────────────────────────────────────────────────── */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } /* ── Mobile ───────────────────────────────────────────────────── */ @media (max-width: 640px) { .header__nav { display: none; } .hero { padding: var(--space-16) 0 var(--space-12); } .hero__actions .btn--lg { width: 100%; } .pain__grid { grid-template-columns: 1fr; } } /* ── How It Works ─────────────────────────────────────────────── */ .how-it-works { padding: var(--space-24) 0; } .steps { list-style: none; display: flex; flex-direction: column; gap: 0; max-width: 720px; margin: 0 auto; position: relative; } /* Vertical connector line */ .steps::before { content: ""; position: absolute; left: 28px; top: 48px; bottom: 48px; width: 2px; background: var(--border); } .step { display: flex; gap: var(--space-6); align-items: flex-start; padding: var(--space-6) 0; position: relative; } .step__number { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: var(--accent); letter-spacing: 0.05em; z-index: 1; } .step__content { padding-top: var(--space-3); } .step__title { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--space-2); } .step__desc { color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.7; } /* ── Features ─────────────────────────────────────────────────── */ .features { padding: var(--space-24) 0; background: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .features__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); } .feature-card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) * 2); padding: var(--space-6); transition: border-color 0.2s, transform 0.2s; } .feature-card:hover { border-color: color-mix(in oklch, var(--accent) 40%, transparent); transform: translateY(-2px); } .feature-card__icon { width: 44px; height: 44px; border-radius: var(--radius); background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .feature-card__title { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-2); } .feature-card__desc { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.65; } /* ── EU Trust ─────────────────────────────────────────────────── */ .eu-trust { padding: var(--space-24) 0; } .eu-trust__inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-16); align-items: center; } .eu-trust__title { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 700; letter-spacing: -0.02em; margin-bottom: var(--space-4); line-height: 1.25; } .eu-trust__desc { color: var(--muted-foreground); font-size: 1rem; line-height: 1.7; margin-bottom: var(--space-6); max-width: 520px; } .eu-trust__list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .eu-trust__list li { display: flex; align-items: center; gap: var(--space-3); font-size: 0.95rem; color: var(--foreground); } .eu-trust__list svg { flex-shrink: 0; color: var(--accent); } .eu-trust__badge-wrap { display: flex; align-items: center; justify-content: center; } .eu-trust__badge { width: 160px; height: 160px; border-radius: 50%; border: 3px solid var(--accent); background: color-mix(in oklch, var(--accent) 8%, var(--card)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-1); padding: var(--space-4); } .eu-trust__badge-stars { font-size: 1rem; line-height: 1.4; color: var(--accent); letter-spacing: 0.1em; } .eu-trust__badge-label { font-weight: 800; font-size: 0.9rem; letter-spacing: 0.05em; color: var(--foreground); } .eu-trust__badge-sub { font-size: 0.7rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.08em; } /* ── Pricing ──────────────────────────────────────────────────── */ .pricing { padding: var(--space-24) 0; background: var(--muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .pricing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); align-items: start; margin-bottom: var(--space-8); } .pricing-card { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) * 2); padding: var(--space-8); position: relative; } .pricing-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .pricing-card__popular { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #0a0a1a; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.75rem; border-radius: 99px; white-space: nowrap; letter-spacing: 0.03em; } .pricing-card__header { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--border); } .pricing-card__name { font-size: 1rem; font-weight: 700; margin-bottom: var(--space-3); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.08em; } .pricing-card__price { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-2); } .pricing-card__amount { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .pricing-card__period { font-size: 0.9rem; color: var(--muted-foreground); } .pricing-card__tagline { font-size: 0.875rem; color: var(--muted-foreground); } .pricing-card__features { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-8); } .pricing-card__features li { display: flex; align-items: center; gap: var(--space-3); font-size: 0.9rem; } .pricing-card__features svg { flex-shrink: 0; color: var(--accent); } .pricing__enterprise { text-align: center; font-size: 0.9rem; color: var(--muted-foreground); } .pricing__enterprise a { color: var(--accent); font-weight: 600; } .pricing__enterprise a:hover { text-decoration: underline; } /* ── Mobile updates ───────────────────────────────────────────── */ @media (max-width: 768px) { .steps::before { display: none; } .eu-trust__inner { grid-template-columns: 1fr; } .eu-trust__badge-wrap { display: none; } .pricing__grid { grid-template-columns: 1fr; } } /* ── Early Access Section ─────────────────────────────────────── */ .early-access { padding: var(--space-24) 0; } .early-access__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; } .early-access__title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; margin-bottom: var(--space-4); } .early-access__desc { color: var(--muted-foreground); font-size: 1rem; line-height: 1.7; margin-bottom: var(--space-6); max-width: 460px; } .early-access__perks { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .early-access__perks li { display: flex; align-items: center; gap: var(--space-3); font-size: 0.95rem; } .early-access__perks svg { flex-shrink: 0; color: var(--accent); } /* ── Form ─────────────────────────────────────────────────────── */ .early-access__form-wrap { background: var(--card); border: 1px solid var(--border); border-radius: calc(var(--radius) * 2); padding: var(--space-8); } .early-access__form { display: flex; flex-direction: column; gap: var(--space-4); } .form-group { display: flex; flex-direction: column; gap: var(--space-1); } .form-label { font-size: 0.875rem; font-weight: 600; color: var(--foreground); } .form-input { width: 100%; padding: 0.65rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); font-size: 0.95rem; font-family: inherit; transition: border-color 0.15s, box-shadow 0.15s; outline: none; } .form-input::placeholder { color: var(--muted-foreground); } .form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent); } .form-input.is-invalid { border-color: oklch(60% 0.2 25); } .form-error { font-size: 0.8rem; color: oklch(60% 0.2 25); min-height: 1.2em; } .form-submit { width: 100%; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); position: relative; } .form-submit:disabled { opacity: 0.65; cursor: not-allowed; } @keyframes spin { to { transform: rotate(360deg); } } .spin { animation: spin 0.8s linear infinite; } .form-privacy { font-size: 0.78rem; color: var(--muted-foreground); text-align: center; line-height: 1.6; } /* Success state */ .form-success { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-8) var(--space-4); gap: var(--space-4); } .form-success__icon { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in oklch, var(--accent) 15%, transparent); color: var(--accent); display: flex; align-items: center; justify-content: center; } .form-success__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; } .form-success__desc { color: var(--muted-foreground); font-size: 0.95rem; line-height: 1.7; } /* ── Footer ───────────────────────────────────────────────────── */ .footer { background: var(--muted); border-top: 1px solid var(--border); padding-top: var(--space-16); } .footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-12); padding-bottom: var(--space-12); border-bottom: 1px solid var(--border); } .footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 240px; } .footer__tagline { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } .footer__nav { display: flex; gap: var(--space-12); } .footer__nav-group { display: flex; flex-direction: column; gap: var(--space-3); } .footer__nav-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-bottom: var(--space-1); } .footer__nav-group a { font-size: 0.875rem; color: var(--muted-foreground); transition: color 0.15s; } .footer__nav-group a:hover { color: var(--foreground); } .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding: var(--space-6) 0; font-size: 0.8rem; color: var(--muted-foreground); gap: var(--space-4); flex-wrap: wrap; } /* ── Mobile updates ───────────────────────────────────────────── */ @media (max-width: 768px) { .early-access__inner { grid-template-columns: 1fr; } .footer__inner { flex-direction: column; gap: var(--space-8); } .footer__bottom { flex-direction: column; text-align: center; } }