/* MonoLog landing page — one stylesheet, no framework, no external requests. Colours and typography are taken from the product itself (frontend/src/styles/tokens.css, frontend/src/assets/monolog-mark.svg). */ /* ── Fonts (self-hosted: no Google Fonts request, nothing to declare in the privacy policy) ─────────────────────────────────────────────────────── */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/manrope-latin-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/manrope-latin-500-normal.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/manrope-latin-700-normal.woff2') format('woff2'); } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/manrope-latin-800-normal.woff2') format('woff2'); } /* Poppins exists for the LOCKUP ONLY — the logo is drawn as live SVG text in ExtraLight + SemiBold (Kevin's source file). Two weights, latin, nothing else on the page uses it. Without these the wordmark falls back to a system sans and stops being the logo. */ @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 200; font-display: block; src: url('../fonts/poppins-latin-200-normal.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: block; src: url('../fonts/poppins-latin-600-normal.woff2') format('woff2'); } :root { --bg: #0a0a0c; --bg-2: #101014; --panel: #15161a; --panel-2: #1b1c21; --line: rgba(255, 255, 255, 0.09); --line-strong: rgba(255, 255, 255, 0.16); --fg: #e8ecf1; --fg-dim: #a7aeb8; --fg-faint: #767d87; /* ⚠️ ONE brand colour drives the whole page, and it is the LOGO's own (#e37a35 from Kevin's lockup) — not the app UI's #fb6e1c, which now only appears inside the screenshots. Everything tinted derives from --brand-rgb, so switching products is a single attribute on : see the [data-product] block below. Nothing may hardcode an orange again. */ --brand: #e37a35; --brand-rgb: 227, 122, 53; --brand-hover: #f18d4b; --brand-ink: #17110a; /* text ON a filled brand surface */ --accent: var(--brand); --accent-soft: rgba(var(--brand-rgb), 0.12); --ok: #4ade80; --warn: #f5c451; --bad: #f2634f; --radius: 14px; --maxw: 1180px; } /* ── Product switch ─────────────────────────────────────────────────────── The site covers two products. The MonoLog pages keep the orange above; the monomanager pages carry petrol, taken from the app's own MonoCreate accent (#3EC0C3, the dark-surface value in frontend/src/styles/tokens.css) rather than from the logo file, whose #0f6b73 is mixed for a WHITE page and goes nearly black on this background. One attribute on flips everything, because every tint derives from --brand-rgb. */ html[data-product="monomanager"] { --brand: #3ec0c3; --brand-rgb: 62, 192, 195; --brand-hover: #5ad2d5; --brand-ink: #04201f; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--fg); font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; } h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; } h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; } h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; } h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } p { margin: 0 0 16px; } .lead { font-size: clamp(17px, 2vw, 20px); color: var(--fg-dim); max-width: 62ch; } .muted { color: var(--fg-dim); } /* ── Header ──────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(14px); background: rgba(10, 10, 12, 0.82); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; } .site-header.is-stuck { border-bottom-color: var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 28px; height: 68px; } .brand { display: flex; align-items: center; text-decoration: none; flex: 0 0 auto; } /* ── Lockup ─────────────────────────────────────────────────────────────── Kevin's logo (TODO/new Logo/logo-monolog-av-thin-horizontal.svg) is drawn for a LIGHT surface: near-black wordmark, pale grey rule. The geometry is copied verbatim, the colours are not — they come from the tokens here, so the same markup also works if a light section is ever added. */ /* ⚠️ overflow: visible is load-bearing, not tidiness. The wordmark's baseline sits at y=40 in a 52-high viewBox, so Poppins' descender on the "g" of monolog / monomanager ends up a hair below the box and SVG clips it by default — Kevin's source file carries the same declaration for exactly this reason, and it was lost when the geometry was copied over. */ .brand-logo { height: 26px; width: auto; display: block; overflow: visible; } .brand-wave { stroke: var(--brand); } .brand-word { font-family: 'Poppins', 'Manrope', system-ui, sans-serif; fill: var(--fg); } .brand-word-thin { font-weight: 200; } .brand-word-bold { font-weight: 600; } .brand-rule { fill: var(--line-strong); } .brand-av { font-family: 'Poppins', 'Manrope', system-ui, sans-serif; font-weight: 200; fill: var(--brand); } @media (max-width: 560px) { .brand-logo { height: 22px; } } /* ── Product tabs ───────────────────────────────────────────────────────── Two audiences, one site: MonoLog for the people who run the installation, monomanager for the integrators who build it. A segmented control rather than two nav links, because switching here changes the whole page — including its colour — and that has to look like a mode, not a jump. */ .product-tabs { display: flex; gap: 3px; padding: 3px; margin-left: 22px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); flex: 0 0 auto; } .product-tab { display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 8px; font-size: 13.5px; font-weight: 700; color: var(--fg-dim); text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background 0.15s ease; } .product-tab:hover { color: var(--fg); } .product-tab.is-active { background: rgba(var(--brand-rgb), 0.16); color: var(--brand); } .product-tab .short { display: none; } .nav { display: flex; gap: 26px; margin-left: auto; } .nav a { text-decoration: none; color: var(--fg-dim); font-size: 15px; font-weight: 500; /* Without this "How it works" breaks over three lines the moment the header runs short of room, which is what it did once the product tabs moved in. */ white-space: nowrap; transition: color 0.15s ease; } .nav a:hover { color: var(--fg); } .header-cta { flex: 0 0 auto; } /* Language switch — deliberately quiet: it is a preference, not a call to action, and it must not compete with the primary button beside it. It shows the language you are CURRENTLY reading (Kevin, 18.08.2026: "wenn die hp english ist zeigt er derzeit DE") and switches to the other one on click; the title attribute is what states that. */ .lang-switch { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--fg-dim); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } /* ⚠️ The flags are drawn, not emoji. Windows ships no country-flag glyphs at all — 🇬🇧 renders as the letters "GB" in every browser there, which is most of this audience. Both are inline SVG data URIs so they cost no request and survive the strict Content-Security-Policy (img-src 'self' data:). */ .lang-flag { width: 20px; height: 14px; flex: 0 0 auto; border-radius: 2px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22); } .lang-flag.is-gb { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='a'%3E%3Cpath d='M0 0h60v30H0z'/%3E%3C/clipPath%3E%3CclipPath id='b'%3E%3Cpath d='M30 15h30v15zv15H0zH0V0zV0h30z'/%3E%3C/clipPath%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M0 0v30h60V0z' fill='%23012169'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0l60 30m0-30L0 30' clip-path='url(%23b)' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0v30M0 15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/g%3E%3C/svg%3E"); } .lang-flag.is-at { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23ED2939'/%3E%3Crect y='13.34' width='60' height='13.33' fill='%23fff'/%3E%3C/svg%3E"); } .lang-switch:hover { color: var(--fg); border-color: var(--line-strong); } .nav + .lang-switch { margin-left: 0; } .site-header .nav { margin-left: auto; } .btn { display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--fg); font: inherit; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } .btn:hover { border-color: rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.04); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--brand-ink); } .btn-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); } .btn-lg { padding: 14px 26px; font-size: 16px; } /* ── Hero ────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 96px 0 40px; overflow: hidden; } /* The glow above the headline breathes rather than blinks: 7s, and only opacity/transform so it stays off the layout and off the main thread. */ .hero::before { content: ''; position: absolute; inset: -220px 0 auto 0; height: 620px; background: radial-gradient(60% 60% at 50% 40%, rgba(var(--brand-rgb), 0.16), transparent 70%); pointer-events: none; transform-origin: 50% 40%; will-change: opacity, transform; animation: hero-glow 7s ease-in-out infinite; } @keyframes hero-glow { 0%, 100% { opacity: 0.72; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.04); } } @media (prefers-reduced-motion: reduce) { .hero::before { animation: none; opacity: 0.85; } } .hero .wrap { position: relative; } .hero h1 { max-width: 15ch; } .hero .lead { margin-top: 22px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero-note { margin-top: 22px; font-size: 14.5px; color: var(--fg-faint); display: flex; flex-wrap: wrap; gap: 8px 18px; } .hero-note span { display: inline-flex; align-items: center; gap: 8px; } .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; } .dot.pulse { animation: pulse 3.2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (prefers-reduced-motion: reduce) { .dot.pulse { animation: none; } } /* Screenshot frame */ .shot { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); } .shot img { width: 100%; height: auto; } .hero-shot { margin-top: 56px; position: relative; } .hero-shot::after { content: ''; position: absolute; inset: auto 0 -1px 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--bg)); pointer-events: none; } /* ── Sections ────────────────────────────────────────────────────────── */ section { padding: 84px 0; } .section-head { max-width: 62ch; margin-bottom: 44px; } .section-head p { margin-top: 16px; } .divide { border-top: 1px solid var(--line); } /* Three-column contrast */ .cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .cols-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; } .card h3 { margin-bottom: 10px; } .card p { margin: 0; color: var(--fg-dim); font-size: 15.5px; } .card-accent { border-left: 2px solid var(--accent); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; } .step { position: relative; padding-top: 8px; } .step-no { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); border: 1px solid rgba(var(--brand-rgb), 0.28); color: var(--accent); font-weight: 800; font-size: 15px; margin-bottom: 16px; } .step h3 { margin-bottom: 8px; } .step p { color: var(--fg-dim); font-size: 15.5px; margin: 0; } /* Feature grid */ .features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px; transition: border-color 0.18s ease, transform 0.18s ease; } .feature:hover { border-color: var(--line-strong); transform: translateY(-2px); } .feature svg { width: 22px; height: 22px; color: var(--accent); margin-bottom: 16px; } .feature h3 { font-size: 17px; margin-bottom: 8px; } .feature p { font-size: 14.5px; color: var(--fg-dim); margin: 0; line-height: 1.6; } /* Screens */ .screens { display: grid; gap: 22px; } .screens figure { margin: 0; } .screens figcaption { margin-top: 12px; font-size: 14.5px; color: var(--fg-dim); } .screens figcaption b { color: var(--fg); font-weight: 700; } .screens-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 22px; } /* Deployment */ .deploy { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: start; } .spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; } .spec-list li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--fg-dim); } .spec-list li:last-child { border-bottom: 0; } .spec-list b { color: var(--fg); font-weight: 700; min-width: 168px; flex: 0 0 auto; } .check { color: var(--accent); flex: 0 0 auto; margin-top: 4px; } /* Demo / contact */ .demo { background: linear-gradient(180deg, var(--bg-2), var(--bg)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .demo-points { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; } .demo-points li { display: flex; gap: 12px; color: var(--fg-dim); font-size: 15.5px; } form { display: grid; gap: 16px; } .field { display: grid; gap: 7px; } .field label { font-size: 14px; font-weight: 700; color: var(--fg); } .field input, .field textarea { font: inherit; font-size: 15.5px; color: var(--fg); background: var(--panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--brand-rgb), 0.16); } .field textarea { min-height: 128px; resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--fg-dim); } .consent input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: 0 0 auto; } .consent a { color: var(--accent); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: 13.5px; color: var(--fg-faint); margin: 0; } .form-msg { display: none; padding: 14px 16px; border-radius: 10px; font-size: 15px; border: 1px solid var(--line-strong); } .form-msg.is-ok { display: block; border-color: rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); } .form-msg.is-err { display: block; border-color: rgba(242, 99, 79, 0.45); background: rgba(242, 99, 79, 0.08); } /* Footer */ .site-footer { padding: 46px 0; border-top: 1px solid var(--line); color: var(--fg-faint); font-size: 14.5px; } .site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; } .site-footer a { color: var(--fg-dim); text-decoration: none; } .site-footer a:hover { color: var(--fg); } .footer-spacer { margin-left: auto; } /* Legal pages */ .legal { padding: 64px 0 96px; } .legal .wrap { max-width: 760px; } .legal h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 28px; } .legal h2 { font-size: 21px; margin: 38px 0 12px; } .legal p, .legal li { color: var(--fg-dim); font-size: 16px; } .legal a { color: var(--accent); } .legal .todo { border: 1px dashed rgba(var(--brand-rgb), 0.5); background: var(--accent-soft); border-radius: 10px; padding: 14px 16px; color: var(--fg); font-size: 15px; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1020px) { .features { grid-template-columns: repeat(2, 1fr); } .deploy { grid-template-columns: 1fr; gap: 32px; } .demo-grid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 820px) { .nav { display: none; } .cols-3, .steps, .screens-grid { grid-template-columns: 1fr; } .cols-2 { grid-template-columns: 1fr; } section { padding: 60px 0; } .hero { padding-top: 64px; } .spec-list li { flex-direction: column; gap: 4px; } .spec-list b { min-width: 0; } } /* ── Header priority as the viewport narrows ────────────────────────────── Measured order of what may go: the in-page section links first (they are a convenience — the same sections are one scroll away), then the Demo shortcut, then the CTA button. The product tabs and the language switch never go, because nothing else on the page replaces them. ⚠️ These breakpoints exist because the header silently WRAPPED between ~900 and ~1300px once the tabs moved in: "How it works" broke over three lines while no page-level overflow was reported. */ @media (max-width: 1320px) { .site-header .wrap { gap: 18px; } .nav { gap: 20px; } .nav a[href^="#"]:not(.nav-demo) { display: none; } } @media (max-width: 900px) { .product-tab .full { display: none; } .product-tab .short { display: inline; } .product-tabs { margin-left: 14px; } .nav a[href^="#"] { display: none; } } /* ⚠️ Two-row header from 760px down, NOT from 560px. Measured with a 20px-step sweep across every page: below ~760 the brand, the tabs, the language switch and the CTA stop fitting on one line, and the header silently grew to three and four rows while pushing the page into a horizontal scroll of up to 123px. Wrapping deliberately: brand + language on the first row, the product tabs full width underneath. */ @media (max-width: 760px) { .site-header .wrap { height: auto; flex-wrap: wrap; gap: 10px; padding-top: 11px; padding-bottom: 11px; } .header-cta { display: none; } .nav { display: none; } .lang-switch { margin-left: auto; } .product-tabs { order: 3; width: 100%; margin-left: 0; justify-content: center; } .product-tab { flex: 1 1 0; justify-content: center; padding: 7px 8px; font-size: 13px; } } @media (max-width: 560px) { body { font-size: 16px; } .features { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } .wrap { padding: 0 18px; } }