/* Design tokens live in tokens.css, which base.html loads before this file for every page in the app. The `:root` block that used to sit here has been removed rather than moved: three stylesheets each declaring their own copy of the palette is precisely how they drifted apart. Everything it defined is still available under the same names -- see the compatibility section at the bottom of tokens.css -- so no rule below had to change to keep working. */ /* ============================================================================= landing.css — the public marketing site. This is the first surface a prospective user sees, so it is deliberately quieter than it used to be: the glow was doing the work that type and spacing should do. Sizes, colours, radii, shadows and easings all come from tokens now; there are no hardcoded hexes below except where a value is genuinely local (the traffic-light dots in the fake window chrome). Sections -------- 1. Base & layout 2. Ambient background 3. Flash messages 4. Navigation 5. Buttons 6. Hero 7. Product preview — four tabs, all of them query results 8. Stats strip — every tile names its source 9. Section scaffolding 10. Feature cards 11. Maintenance page 12. Sources 13. Workflow 14. Ecosystem 15b. Status — catalog and supply chain, in public 16. CTA banner 17. Footer 17b. Legal pages — Impressum and Datenschutzerklärung 18. Responsive ============================================================================= */ /* ============================================================================= 1. Base & layout ============================================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; /* The hero's glow-orb-1/2/3 are large (400-500px) absolutely positioned circles that intentionally bleed past the edge of the viewport on desktop for the glow effect -- on a narrow mobile viewport they genuinely overflow the page width. body's overflow-x:hidden below doesn't reliably stop that from becoming a swipeable/scrollable horizontal area on mobile browsers (notably iOS Safari), which compute the page's scrollable bounds from the root element, not . Needs to be set on both. */ overflow-x: hidden; } body { margin: 0; font-family: var(--mf-font-sans); background: var(--mf-bg); color: var(--mf-fg); font-size: var(--mf-text-base); line-height: var(--mf-leading-normal); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } /* One container width for the whole site. Sections that need a narrower measure cap their own prose rather than inventing a second container. */ .container { width: 100%; max-width: var(--mf-layout-max); margin: 0 auto; padding: 0 var(--mf-space-5); } /* ============================================================================= 2. Ambient background The orbs are decoration layered on top of --mf-gradient-glow, which is now much softer than it was. They stay because motion at this scale reads as "alive" rather than "busy", but their opacities were pulled down to match. ============================================================================= */ .glow-backdrop { position: fixed; inset: 0; z-index: -1; background: var(--mf-bg-sunken); background-image: var(--mf-gradient-glow); overflow: hidden; } .glow-orb-1, .glow-orb-2, .glow-orb-3 { position: absolute; border-radius: var(--mf-radius-full); filter: blur(130px); pointer-events: none; z-index: var(--mf-z-base); } .glow-orb-1 { width: 500px; height: 500px; top: 5%; left: 3%; background: var(--mf-orb-1); animation: floatOrb1 14s ease-in-out infinite alternate; } .glow-orb-2 { width: 450px; height: 450px; top: 35%; right: 3%; background: var(--mf-orb-2); animation: floatOrb2 18s ease-in-out infinite alternate; } .glow-orb-3 { width: 400px; height: 400px; bottom: 10%; left: 30%; background: var(--mf-orb-3); animation: floatOrb1 20s ease-in-out infinite alternate-reverse; } @keyframes floatOrb1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, 50px) scale(1.15); } } @keyframes floatOrb2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-40px, -30px) scale(1.12); } } /* Scroll reveal. A short travel distance: content that flies in from far away draws attention to the animation instead of to the content. */ .reveal-on-scroll { opacity: 0; transform: translateY(16px); transition: opacity var(--mf-dur-slow) var(--mf-ease-out), transform var(--mf-dur-slow) var(--mf-ease-out); } .reveal-on-scroll.is-revealed { opacity: 1; transform: translateY(0); } /* ============================================================================= 3. Flash messages ============================================================================= */ .flash-container { position: fixed; top: var(--mf-space-4); left: 50%; transform: translateX(-50%); z-index: var(--mf-z-toast); display: flex; flex-direction: column; gap: var(--mf-space-2); width: min(92vw, 420px); } .flash { padding: var(--mf-space-3) var(--mf-space-4); border-radius: var(--mf-radius-md); font-size: var(--mf-text-md); line-height: var(--mf-leading-snug); background: var(--mf-surface-raised); border: 1px solid var(--mf-border-strong); box-shadow: var(--mf-shadow-md); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: slideDown var(--mf-dur-normal) var(--mf-ease-out); } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Status colour on the left edge as well as the border: a 1px tinted outline is easy to miss, a bar is not. */ .flash-error { border-color: var(--mf-danger-wash); border-left: 3px solid var(--mf-danger-fg); color: var(--mf-danger-fg); } .flash-success { border-color: var(--mf-ok-wash); border-left: 3px solid var(--mf-ok-fg); color: var(--mf-ok-fg); } .flash-info { border-color: var(--mf-info-wash); border-left: 3px solid var(--mf-info-fg); color: var(--mf-info-fg); } .flash-warning { border-color: var(--mf-warn-wash); border-left: 3px solid var(--mf-warn-fg); color: var(--mf-warn-fg); } /* ============================================================================= 4. Navigation Sticky, translucent, one hairline at the bottom. The scrolled state only firms up the same two properties rather than changing the bar's shape, so nothing under it shifts as you scroll. ============================================================================= */ .site-nav { position: sticky; top: 0; z-index: var(--mf-z-sticky); background: color-mix(in srgb, var(--mf-bg-sunken) 78%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--mf-border); transition: border-color var(--mf-dur-normal) var(--mf-ease), background-color var(--mf-dur-normal) var(--mf-ease); } .site-nav.scrolled { border-color: var(--mf-border-strong); background: color-mix(in srgb, var(--mf-bg-sunken) 94%, transparent); } .site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 68px; /* The three groups (brand · links · CTAs) sit in one row with no room to spare. Without a gap here, space-between lets them touch as soon as the row fills up — which is how "MediaForge" ended up glued to "Features". */ gap: var(--mf-space-5); } .brand { display: flex; align-items: center; gap: var(--mf-space-3); font-weight: var(--mf-weight-bold); font-size: var(--mf-text-lg); letter-spacing: var(--mf-tracking-tight); color: var(--mf-fg); transition: opacity var(--mf-dur-fast) var(--mf-ease); /* The wordmark is not a place to save pixels — never let flex shrink it. */ flex-shrink: 0; white-space: nowrap; } .brand:hover { opacity: 0.82; } .brand-mark { width: 34px; height: 34px; border-radius: var(--mf-radius-sm); background: transparent; display: flex; align-items: center; justify-content: center; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(124, 92, 255, 0.35)); animation: pulseLogo 6s infinite alternate; } @keyframes pulseLogo { 0% { filter: drop-shadow(0 2px 6px rgba(124, 92, 255, 0.3)); } 100% { filter: drop-shadow(0 2px 12px rgba(34, 211, 238, 0.45)); } } .brand-mark svg { width: 28px; height: 28px; } .nav-links { display: flex; align-items: center; /* Breathing room where there is room, less where there isn't — instead of a fixed 32px that forces the row to break as soon as the viewport gets tight. */ gap: clamp(12px, 1.4vw, 24px); flex-wrap: nowrap; min-width: 0; } .nav-links a { color: var(--mf-fg-muted); font-size: var(--mf-text-md); font-weight: var(--mf-weight-medium); border-radius: var(--mf-radius-xs); transition: color var(--mf-dur-fast) var(--mf-ease); /* A nav item is a label, not a paragraph. Wrapping is what turned "How It Works" and "Dev Info API" into two-line stacks and made the bar look squashed. */ white-space: nowrap; } .nav-links a:hover { color: var(--mf-fg); } .nav-links a.active { color: var(--mf-fg); font-weight: var(--mf-weight-semibold); } /* ---- the "More" disclosure in the nav ------------------------------------- A native
. Four reference links (source, API, imprint, privacy) live in here so the bar holds seven items instead of eleven — see _public_nav.html for why they are behind a menu rather than dropped. */ .nav-menu { position: relative; flex-shrink: 0; } .nav-menu > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 4px; color: var(--mf-fg-muted); font-size: var(--mf-text-md); font-weight: var(--mf-weight-medium); white-space: nowrap; transition: color var(--mf-dur-fast) var(--mf-ease); } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu > summary:hover { color: var(--mf-fg); } .nav-menu > summary.active { color: var(--mf-fg); font-weight: var(--mf-weight-semibold); } .nav-menu-caret { display: inline-flex; transition: transform var(--mf-dur-normal) var(--mf-ease); } .nav-menu-caret svg { width: 14px; height: 14px; display: block; } .nav-menu[open] .nav-menu-caret { transform: rotate(180deg); } .nav-menu-pop { position: absolute; right: 0; top: calc(100% + var(--mf-space-3)); z-index: var(--mf-z-dropdown); min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: var(--mf-space-2); background: var(--mf-surface-raised); border: 1px solid var(--mf-border-strong); border-radius: var(--mf-radius-md); box-shadow: var(--mf-shadow-lg); } .nav-menu-pop a { padding: var(--mf-space-2) var(--mf-space-3); border-radius: var(--mf-radius-xs); font-size: var(--mf-text-sm); } .nav-menu-pop a:hover { background: var(--mf-surface); } /* The drawer's flat copies of the four. The menu is the desktop form; below the collapse breakpoint the two swap. */ .nav-drawer-only { display: none; } .nav-cta { display: flex; align-items: center; gap: var(--mf-space-3); flex-shrink: 0; } /* The nav's buttons are navigation, not calls to action in a hero — the generous .btn padding is too much here and is what pushed the row over the edge. */ .site-nav .btn { height: var(--mf-control-height); padding: 0 var(--mf-space-4); font-size: var(--mf-text-md); } .nav-cta-mobile { display: none; } /* ============================================================================= 5. Buttons Two weights only. Primary is the gradient and carries a shadow; ghost is a hairline surface. Anything else on the page that looks like a button is a chip or a card, not a third button style. ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mf-space-2); padding: 0 var(--mf-space-5); height: var(--mf-control-height-lg); border-radius: var(--mf-radius-sm); font-weight: var(--mf-weight-semibold); font-size: var(--mf-text-md); letter-spacing: var(--mf-tracking-tight); border: 1px solid transparent; cursor: pointer; transition: transform var(--mf-dur-fast) var(--mf-ease), box-shadow var(--mf-dur-normal) var(--mf-ease), background-color var(--mf-dur-normal) var(--mf-ease), border-color var(--mf-dur-normal) var(--mf-ease), color var(--mf-dur-normal) var(--mf-ease); white-space: nowrap; } .btn-primary { background: var(--mf-gradient-brand); color: var(--mf-fg-on-accent); box-shadow: var(--mf-shadow-brand); font-weight: var(--mf-weight-bold); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--mf-shadow-brand), var(--mf-shadow-md); } .btn-ghost { background: transparent; border-color: var(--mf-border-strong); color: var(--mf-fg); } .btn-ghost:hover { background: var(--mf-surface-hover); border-color: var(--mf-border-accent); transform: translateY(-1px); } .btn-lg { height: 52px; padding: 0 var(--mf-space-6); font-size: var(--mf-text-base); border-radius: var(--mf-radius-md); } /* ============================================================================= 6. Mobile toggle ============================================================================= */ .nav-toggle { display: none; background: none; border: 1px solid var(--mf-border-strong); border-radius: var(--mf-radius-sm); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 20px; height: 2px; border-radius: var(--mf-radius-full); background: var(--mf-fg); position: relative; transition: transform var(--mf-dur-normal) var(--mf-ease), opacity var(--mf-dur-normal) var(--mf-ease), background-color var(--mf-dur-fast) var(--mf-ease); } .nav-toggle span::before { position: absolute; top: -7px; } .nav-toggle span::after { position: absolute; top: 7px; } .nav-toggle.is-active span { background: transparent; } .nav-toggle.is-active span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active span::after { transform: translateY(-7px) rotate(-45deg); } /* ============================================================================= 7. Hero The headline carries the page. It runs to --mf-text-5xl on wide viewports and clamps down to --mf-text-3xl on a phone, tracked tight so a 60px line still reads as one shape rather than as spaced-out words. ============================================================================= */ .hero { padding: var(--mf-space-9) 0 var(--mf-space-8); text-align: center; position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: var(--mf-space-2); padding: var(--mf-space-1) var(--mf-space-3); border-radius: var(--mf-radius-full); border: 1px solid var(--mf-border-accent); background: var(--mf-accent-wash); font-size: var(--mf-text-xs); font-weight: var(--mf-weight-medium); letter-spacing: var(--mf-tracking-wide); text-transform: uppercase; color: var(--mf-accent-text-bright); margin-bottom: var(--mf-space-5); } .hero-badge .dot { width: 6px; height: 6px; border-radius: var(--mf-radius-full); background: var(--mf-ok-solid); box-shadow: 0 0 8px var(--mf-ok-solid); animation: pulseDot 2.4s infinite; } @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.45; } } .hero h1 { font-size: clamp(var(--mf-text-3xl), 6vw, var(--mf-text-5xl)); line-height: var(--mf-leading-tight); letter-spacing: var(--mf-tracking-tighter); margin: 0 auto var(--mf-space-5); font-weight: var(--mf-weight-bold); max-width: 18ch; text-wrap: balance; } .hero h1 .grad { background: var(--mf-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Prose measure, not viewport measure: a subhead that runs the full width of a 27" monitor is unreadable however nicely it is set. */ .hero p.subhead { max-width: var(--mf-layout-max-prose); margin: 0 auto var(--mf-space-7); font-size: var(--mf-text-lg); color: var(--mf-fg-muted); line-height: var(--mf-leading-relaxed); text-wrap: pretty; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: var(--mf-space-3); flex-wrap: wrap; margin-bottom: var(--mf-space-7); } .hero-note { margin-top: var(--mf-space-4); font-size: var(--mf-text-sm); color: var(--mf-fg-subtle); display: flex; align-items: center; justify-content: center; gap: var(--mf-space-2); /* Two clauses and a link: it has to be allowed to wrap on a phone instead of forcing the hero wider than the viewport. */ flex-wrap: wrap; text-align: center; } .hero-note-icon { width: 16px; height: 16px; stroke: var(--mf-accent2); flex-shrink: 0; } .hero-note a { color: var(--mf-accent-text); } .hero-note a:hover { text-decoration: underline; } /* ============================================================================= 8. Product preview — the panel under the hero No longer a mock: every tab renders a query result. The tabs are radio inputs with