/* OMEGACAP — shared styles for all pages */ /* ---------- language toggle ---------- DE is the server-rendered default (crawlable without JS/CSS). CSS alone decides which twin is visible, keyed off html[data-lang] — set by a blocking inline script in (reads localStorage) before first paint, so there is no flash of the wrong language on navigation. All translatable text is wrapped in /, so display:inline is always the correct restore value. */ [data-en] { display: none; } html[data-lang="en"] [data-de] { display: none; } html[data-lang="en"] [data-en] { display: inline; } :root { --bg: oklch(97.5% 0.006 75); --bg-alt: oklch(96% 0.01 60); --bg-about: oklch(94.5% 0.01 60); --bg-cta: #F1ECE7; --card-bg: oklch(98.5% 0.004 75); --text: oklch(18% 0.01 75); --text-soft: oklch(30% 0.01 75); --text-mute: oklch(42% 0.01 75); --text-faint: oklch(52% 0.01 75); --border: oklch(88% 0.01 75); --border-strong: oklch(80% 0.01 75); --accent: #FD791A; --accent-eyebrow: #EC8038; --accent-hover: color-mix(in srgb, #FD791A 80%, black); --ok-green: oklch(60% 0.15 145); --error: #b3261e; --font: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; } * { box-sizing: border-box; } html, body { margin: 0; } body { position: relative; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; overflow-x: hidden; } /* ---------- homepage conduit: an empty conduit pipe (always faintly visible) with a cable drawn in through it as the visitor scrolls, tipped by a small rotating cap. Purely decorative (aria-hidden), sits behind all real content and never blocks clicks. See the reveal script at the bottom of main.js. */ .page-squiggle { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; display: block; } .page-squiggle-tube { fill: none; stroke: var(--border); stroke-width: 9; stroke-linecap: round; opacity: .28; } .page-squiggle-cable { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; opacity: .28; } .page-squiggle-cap { opacity: 0; transition: opacity .3s ease; } @media (prefers-reduced-motion: reduce) { .page-squiggle-cable { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } .page-squiggle-cap { display: none; } } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } .btn-primary:hover, .header-cta:hover { color: #000; } ::selection { background: color-mix(in srgb, var(--accent) 35%, white); } img { max-width: 100%; } .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } /* ---------- header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter: blur(8px); /* Promote the sticky header to its own compositor layer explicitly, instead of relying on backdrop-filter to do it as a side effect. Without this, some browsers repaint the header together with the rest of the page on every scroll tick instead of just moving an already-painted layer — which is what made scrolling feel like it changed speed depending on what was passing underneath. */ will-change: transform; border-bottom: 1px solid var(--border); } .header-bar { max-width: 1160px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; } .logo { display: flex; align-items: center; flex: none; } .logo img { height: clamp(18px, 5.5vw, 26px); width: auto; object-fit: contain; } .main-nav { display: flex; gap: 28px; align-items: center; margin-left: auto; } .main-nav a { font-size: 14.5px; font-weight: 500; color: var(--text); } .header-actions { display: flex; align-items: center; gap: 12px; flex: none; } .lang-switch { display: flex; border: 1px solid var(--border-strong); border-radius: 20px; padding: 2px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; } .lang-switch button { padding: 6px 12px; border-radius: 16px; border: none; background: none; color: oklch(45% 0.01 75); cursor: pointer; } .lang-switch button.active { background: var(--accent); color: #fff; } .btn { display: inline-block; border-radius: 9px; font-weight: 700; cursor: pointer; } .btn-primary { background: var(--accent); color: #fff; border: none; padding: 14px 26px; font-size: 15.5px; } .btn-secondary { border: 1px solid var(--border-strong); color: var(--text); padding: 14px 26px; font-size: 15.5px; font-weight: 600; background: none; } .header-cta { background: var(--accent); color: #fff; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; white-space: nowrap; } .hamburger { display: none; flex-direction: column; justify-content: center; gap: 4px; width: 34px; height: 34px; background: none; border: none; cursor: pointer; } .hamburger span { display: block; width: 20px; height: 2px; background: var(--text); } .mobile-drawer { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); padding: 8px 24px 20px; box-shadow: 0 12px 24px oklch(0% 0 0 / 0.08); } .mobile-drawer a { font-size: 16px; font-weight: 600; color: var(--text); padding: 10px 0; border-bottom: 1px solid oklch(90% 0.01 75); } .mobile-drawer a:last-of-type { border-bottom: none; } .mobile-drawer .btn-primary { margin-top: 14px; text-align: center; color: #fff; } .mobile-drawer.open { display: flex; } @media (max-width: 1020px) { .main-nav, .header-cta { display: none; } .hamburger { display: flex; } } /* ---------- section headings ---------- */ .eyebrow { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 1.5px; color: var(--accent-eyebrow); text-transform: uppercase; margin-bottom: 12px; } section h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 700; margin: 0 0 40px; max-width: 900px; } .section { max-width: 1160px; margin: 0 auto; padding: 32px 24px 64px; } /* ---------- hero ---------- */ .hero { max-width: 1160px; margin: 0 auto; padding: 56px 24px 40px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; } .hero-copy { flex: 1 1 440px; min-width: 0; } .hero-copy h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); line-height: 1.08; font-weight: 700; margin: 0 0 18px; letter-spacing: -0.01em; } .hero-sub { font-size: clamp(1.05rem, 2.2vw, 1.25rem); font-weight: 600; color: var(--accent); margin: 0 0 14px; } .hero-body { font-size: 16px; color: var(--text-mute); max-width: 480px; margin: 0 0 28px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .hero-media { flex: 1 1 360px; min-width: 280px; max-width: 520px; position: relative; } .hero-media video { width: 100%; height: 400px; border-radius: 20px; object-fit: cover; background: oklch(90% 0.005 75); display: block; } .sound-toggle { position: absolute; bottom: 16px; right: 16px; width: 38px; height: 38px; border-radius: 50%; background: oklch(98% 0.005 75 / 0.95); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px oklch(0% 0 0 / 0.08); font-size: 16px; } /* ---------- trust strip ---------- */ .trust-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 22px 0; } .trust-item { display: flex; align-items: center; gap: 12px; } .trust-mark { flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid oklch(55% 0.01 75); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: var(--accent-eyebrow); } .trust-title { font-size: 13.5px; font-weight: 700; } .trust-short { font-size: 12.5px; color: var(--text-faint); } /* ---------- how it works ---------- */ .steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; } .step-photo { width: 100%; aspect-ratio: 1478/797; border-radius: 12px; overflow: hidden; margin: 0 0 16px; background: oklch(96% 0.005 75); } .step-photo img { width: 100%; height: 100%; object-fit: contain; } @media (max-width: 640px) { .step-photo { width: 70%; margin: 0 auto 16px; } } .step-num { font-family: var(--font-mono); font-size: 32px; font-weight: 700; color: oklch(60% 0.01 75); margin-bottom: 10px; transition: color .2s ease; } .step-item { transition: transform .2s ease; } .step-item:hover { transform: translateY(-4px); } .step-item:hover .step-num { color: var(--accent); } .step-title { font-size: 17px; font-weight: 700; margin-bottom: 8px; } .step-desc { font-size: 14.5px; color: var(--text-mute); } /* ---------- benefits ---------- */ .benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; } .benefit-card { border: 1px solid var(--border); border-radius: 14px; padding: 26px 22px; background: var(--card-bg); transition: transform .25s ease; } .benefit-card:hover { transform: translateY(-4px); } .benefit-card svg { margin-bottom: 16px; stroke: var(--accent-eyebrow); } .benefit-title { font-size: 17px; font-weight: 700; margin-bottom: 10px; } .benefit-desc { font-size: 14.5px; color: var(--text-mute); } /* ---------- models ---------- */ .models-sub { font-size: 15.5px; color: var(--text-mute); max-width: 600px; margin: 0 0 36px; } .models-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; } .model-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: #fff; cursor: pointer; padding: 0; text-align: left; font: inherit; color: inherit; transition: transform .25s ease; } .model-card:hover { transform: translateY(-4px); } .model-photo { width: 100%; aspect-ratio: 1/1; position: relative; background: oklch(96% 0.005 75); } .model-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .model-info { padding: 18px 18px 20px; } .model-swatch-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid oklch(0% 0 0 / 0.1); flex: none; display: inline-block; } .model-name { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; } .model-for { font-size: 13.5px; color: var(--text-mute); margin-bottom: 12px; } .model-packs { display: flex; gap: 6px; margin-bottom: 14px; } .pack-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 5px; background: oklch(96% 0.005 75); border: 1px solid var(--border); transition: background .15s ease, border-color .15s ease, color .15s ease; } .pack-pill:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .model-cta { font-size: 13.5px; font-weight: 700; } .models-guidance { margin-top: 36px; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); padding: 24px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; } .models-guidance-text { max-width: 520px; } .models-guidance-heading { font-size: 15px; font-weight: 700; margin-bottom: 4px; } .models-guidance-body { font-size: 14px; color: var(--text-mute); } .models-guidance-actions { display: flex; gap: 10px; flex-wrap: wrap; } .guidance-btn { padding: 11px 20px; border-radius: 8px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .guidance-btn.secondary { border: 1px solid var(--border-strong); color: var(--text); font-weight: 600; } .guidance-btn:hover { transform: translateY(-2px); } .guidance-btn.btn-primary:hover { box-shadow: 0 10px 20px oklch(15% 0.01 75 / 0.12); } .guidance-btn.secondary:hover { background: oklch(96% 0.005 75); border-color: var(--text-faint); } /* ---------- gallery dialog ---------- */ dialog.gallery-dialog, dialog.video-dialog { border: none; border-radius: 16px; padding: 0; max-width: 520px; width: calc(100% - 48px); background: #fff; } dialog.video-dialog { max-width: 760px; background: #000; } dialog::backdrop { background: oklch(15% 0.01 75 / 0.72); } .gallery-photo { width: 100%; aspect-ratio: 1/1; position: relative; background: oklch(96% 0.005 75); touch-action: none; } .gallery-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; } .dialog-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 50%; background: oklch(98% 0.005 75 / 0.9); border: none; font-size: 18px; cursor: pointer; z-index: 2; } .gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: oklch(98% 0.005 75 / 0.9); border: none; font-size: 18px; cursor: pointer; z-index: 2; } .gallery-arrow.prev { left: 10px; } .gallery-arrow.next { right: 10px; } .gallery-counter { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: oklch(15% 0.01 75 / 0.65); color: #fff; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 10px; } .gallery-body { position: relative; } .gallery-info { padding: 22px 24px 26px; } .gallery-info .model-swatch-row { margin-bottom: 10px; } .gallery-info .model-name { font-size: 14px; } .gallery-info .model-for { font-size: 14.5px; color: var(--text-soft); margin-bottom: 16px; } .pack-size-label { font-size: 12.5px; font-weight: 700; letter-spacing: 0.4px; color: var(--text-faint); margin-bottom: 8px; } .pack-size-row { display: flex; gap: 8px; margin-bottom: 20px; } .pack-size-row button { font-size: 13px; font-weight: 700; padding: 6px 14px; border-radius: 7px; cursor: pointer; background: oklch(96% 0.005 75); color: inherit; border: 1px solid var(--border); } .pack-size-row button.active { background: var(--accent); color: #fff; border-color: var(--accent); } .gallery-buy { display: inline-block; background: var(--accent); color: #fff; padding: 12px 22px; border-radius: 8px; font-size: 14.5px; font-weight: 700; } /* ---------- compatibility table ---------- */ .compat-wrap { overflow-x: auto; } .compat-table-box { min-width: 300px; max-width: 820px; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; } table.compat { width: 100%; border-collapse: collapse; font-size: 11.5px; } table.compat thead tr { background: var(--bg-alt); } table.compat th { text-align: center; padding: 8px 3px; font-weight: 700; } table.compat th:first-child { text-align: left; padding: 8px 10px; white-space: nowrap; } table.compat th .swatch { width: 9px; height: 9px; margin-bottom: 3px; } table.compat td { text-align: center; padding: 6px 3px; color: var(--ok-green); } table.compat td:first-child { text-align: left; padding: 6px 10px; font-weight: 600; color: var(--text); } table.compat tr { border-top: 1px solid oklch(90% 0.01 75); } /* ---------- videos ---------- */ .videos-scroll { position: relative; } .videos-grid { display: flex; flex-wrap: nowrap; gap: 22px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-bottom: 4px; } .videos-grid::-webkit-scrollbar { display: none; } .video-card { cursor: pointer; background: none; border: none; padding: 0; text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex: 0 0 260px; scroll-snap-align: start; transition: transform .25s ease; } .videos-arrow { top: 84px; } .videos-arrow.prev { left: -14px; } .videos-arrow.next { right: -14px; } .video-card:hover { transform: translateY(-4px); } .video-card:hover .play-btn { transform: scale(1.08); } .play-btn { transition: transform .2s ease; } .video-thumb-wrap { width: 100%; height: 200px; border-radius: 12px; background: oklch(15% 0.01 75); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .video-thumb-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .play-btn { width: 54px; height: 54px; border-radius: 50%; background: oklch(98% 0.005 75 / 0.92); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .video-title { font-size: 14.5px; font-weight: 700; margin: 12px 0 6px; } .video-desc { font-size: 13.5px; color: var(--text-mute); } .video-dialog video { width: 100%; max-height: 80vh; display: block; } /* ---------- image lightbox ---------- */ dialog.image-lightbox { border: none; padding: 0; max-width: 90vw; background: transparent; overflow: hidden; } dialog.image-lightbox img { max-width: calc(90vw - 4px); max-height: 85vh; display: block; border-radius: 8px; margin: 0 auto; touch-action: none; } dialog.image-lightbox .dialog-close { top: -14px; right: -14px; } dialog.image-lightbox .gallery-arrow.prev { left: -14px; } dialog.image-lightbox .gallery-arrow.next { right: -14px; } dialog.image-lightbox .gallery-counter { bottom: 12px; } .story-item-media.multi img, .story-item-media > img { cursor: zoom-in; } .story-item-media img.no-lightbox { cursor: default; } .story-logo-badge { object-fit: contain !important; background: transparent !important; padding: 22px; } /* ---------- store picker ---------- */ dialog.store-dialog { border: none; border-radius: 16px; padding: 0; max-width: 440px; width: calc(100% - 48px); background: #fff; } .store-dialog-inner { padding: 28px 26px; } .store-dialog-inner h3 { font-size: 19px; margin: 0 0 8px; } .store-dialog-hint { font-size: 13.5px; color: var(--text-mute); margin: 0 0 20px; } .store-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; } .store-grid button { font-size: 14px; font-weight: 600; padding: 12px 10px; border-radius: 9px; cursor: pointer; text-align: left; background: oklch(96% 0.005 75); border: 1.5px solid var(--border); color: var(--text); } .store-grid button.recommended { background: color-mix(in srgb, var(--accent) 10%, white); border-color: var(--accent); } @media (max-width: 420px) { .store-grid { grid-template-columns: 1fr; } } /* ---------- our story ---------- */ .story-hero { max-width: 760px; margin: 0 auto; padding: 64px 24px 28px; text-align: center; border-bottom: 1px solid var(--border); } .story-hero h1 { font-size: clamp(2rem, 4.6vw, 2.9rem); font-weight: 700; margin: 0 auto 16px; letter-spacing: -0.01em; } .story-hero-lead { font-size: 17px; line-height: 1.6; color: var(--text-soft); max-width: 640px; margin: 0 auto 8px; } .story-timeline { position: relative; max-width: 920px; margin: 0 auto; padding: 40px 24px 230px; display: flex; flex-direction: column; gap: 68px; } .story-path { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; overflow: visible; } .story-path-content path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-dasharray: 0.1 14; stroke-linecap: round; opacity: 0.5; } .story-path-dot { fill: var(--accent); opacity: 0.6; } .story-path-endcap { opacity: 0; transition: opacity .5s ease; } @media (prefers-reduced-motion: reduce) { .story-path-endcap { opacity: 0.92; } } .story-item { position: relative; z-index: 1; display: flex; gap: 44px; align-items: center; } .story-item.reverse { flex-direction: row-reverse; } .story-item-media { position: relative; z-index: 1; flex: 1 1 340px; min-width: 0; } .story-item-media img, .story-item-media video { width: 100%; max-height: 420px; border-radius: 14px; display: block; object-fit: cover; background: oklch(96% 0.005 75); } .story-item-media.logo-box { display: flex; align-items: center; justify-content: center; border-radius: 14px; background: oklch(96% 0.005 75); padding: 48px; } .story-item-media.logo-box img { width: 100%; max-height: 90px; object-fit: contain; border-radius: 0; background: none; } .story-item-media.multi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .story-item-media.multi img { max-height: 200px; } .story-item-media.multi.three { grid-template-columns: repeat(3, 1fr); } .story-item-media.multi.three img { max-height: 340px; } .story-item-media.multi.six { grid-template-columns: repeat(3, 1fr); } .story-item-media.multi.six img { max-height: 160px; } @media (max-width: 480px) { .story-item-media.multi.three, .story-item-media.multi.six { grid-template-columns: 1fr 1fr; } } .story-item-text { position: relative; z-index: 1; flex: 1 1 380px; min-width: 0; background: var(--bg); } .story-item-text h2 { font-size: 22px; font-weight: 700; margin: 0 0 12px; } .story-item-text p { font-size: 15px; color: var(--text-mute); line-height: 1.65; margin: 0 0 12px; } .story-item-text p:last-child { margin-bottom: 0; } .story-quote { border-left: 3px solid var(--accent); padding-left: 16px; font-size: 14.5px; font-style: italic; color: var(--text-soft); margin: 12px 0; } .story-cta { background: var(--bg-cta); text-align: center; padding: 64px 24px; } .story-cta h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0 auto 14px; } .story-cta p { font-size: 15px; color: oklch(38% 0.04 50); max-width: 480px; margin: 0 auto 24px; } @media (max-width: 720px) { .story-path { display: none; } .story-timeline { padding-bottom: 56px; } .story-item, .story-item.reverse { flex-direction: column; gap: 20px; } .story-item-text { order: -1; flex-basis: auto; } /* Without this, the desktop flex-basis (a column-width hint) is read as a minimum column-direction height once stacked, padding items whose image doesn't naturally reach 340px with empty space below it. */ .story-item-media { flex-basis: auto; } .story-item-media img, .story-item-media video { max-height: 400px; } .story-item-media.multi img { max-height: 220px; } } /* ---------- notice bar ---------- */ .notice-bar { background: var(--bg-about); border-bottom: 1px solid var(--border); } .notice-bar-inner { max-width: 1160px; margin: 0 auto; padding: 9px 24px; display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center; font-size: 13px; color: var(--text-soft); } .notice-bar-inner a { color: var(--accent); font-weight: 700; } /* ---------- partner teaser (home page) ---------- */ .partner-teaser { border-top: 1px solid var(--border); } .partner-teaser-inner { max-width: 1160px; margin: 0 auto; padding: 52px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; } .partner-teaser-text { flex: 1 1 380px; min-width: 0; } .partner-teaser-text h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 10px; max-width: none; } .partner-teaser-text p { font-size: 15px; color: var(--text-soft); max-width: 580px; margin: 0; line-height: 1.6; } .partner-teaser-actions { margin-top: 20px; } .partner-teaser-logos { flex: 1 1 260px; max-width: 320px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .partner-teaser-tile { aspect-ratio: 1.4; border: 1px solid var(--border); border-radius: 14px; background: var(--card-bg); display: flex; align-items: center; justify-content: center; padding: 16px; transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; } .partner-teaser-tile:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 24px rgba(0,0,0,.08); } .partner-teaser-tile img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } /* ---------- about ---------- */ .about-section { background: var(--bg-about); } .about-inner { max-width: 1160px; margin: 0 auto; padding: 64px 24px; display: flex; flex-wrap: wrap; gap: 44px; align-items: center; } .about-copy { flex: 1 1 380px; min-width: 0; } .about-copy p { font-size: 15.5px; color: var(--text-soft); max-width: 520px; } .about-photo { flex: 1 1 300px; min-width: 260px; max-width: 440px; } .about-photo img { width: 100%; height: 280px; object-fit: cover; border-radius: 18px; display: block; } .about-photo.brand-logo.brand-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 280px; padding: 40px 32px; background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; box-sizing: border-box; } /* Fixed px caps, not percentages: percentage max-height on a column-flex child doesn't reliably resolve against the flex container's height across browsers, which was silently letting each logo's width win over its height cap and crop the image instead of shrinking it to fit. */ .about-photo.brand-stack .brand-stack-logo { display: block; width: auto; height: auto; max-width: 220px; max-height: 64px; object-fit: contain; margin-bottom: 11px; transition: transform .2s ease; } .about-photo.brand-stack .brand-stack-logo.opnatix { max-width: 170px; margin-bottom: 0; } .about-photo.brand-stack .brand-stack-logo:hover { transform: scale(1.08); } .brand-stack-label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); } /* ---------- faq ---------- */ .faq-section { max-width: 820px; margin: 0 auto; padding: 64px 24px; } .faq-item { border-bottom: 1px solid var(--border); } .faq-item summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; font-weight: 600; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; flex: none; font-size: 20px; font-weight: 400; color: oklch(50% 0.01 75); } .faq-item[open] summary::after { content: "\2212"; } .faq-item p { font-size: 14.5px; color: var(--text-mute); margin: 0 0 18px; max-width: 680px; } /* ---------- final cta ---------- */ .final-cta { background: var(--bg-cta); } .final-cta-inner { max-width: 760px; margin: 0 auto; padding: 64px 24px; text-align: center; } .final-cta h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); margin: 0 0 16px; max-width: none; } .final-cta p { font-size: 15.5px; color: oklch(38% 0.04 50); max-width: 540px; margin: 0 auto 28px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--border); } .footer-grid { max-width: 1160px; margin: 0 auto; padding: 48px 24px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 32px; } .footer-logo img { height: 22px; width: auto; object-fit: contain; } .footer-tagline { font-size: 13px; color: var(--text-faint); max-width: 220px; } .footer-col-title { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer-links a { font-size: 14px; color: var(--text-soft); } .social-row { display: flex; gap: 10px; } .social-row a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text); } .social-row img { width: 16px; height: 16px; object-fit: contain; } .social-row img[alt="LinkedIn"], .social-row img[alt="Instagram"] { width: 19px; height: 19px; } .footer-bottom { max-width: 1160px; margin: 0 auto; padding: 18px 24px; border-top: 1px solid oklch(91% 0.01 75); font-size: 12.5px; color: var(--text-faint); } /* ---------- simple pages (Kontakt / Angebot / Impressum / Datenschutz) ---------- */ .simple-page { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; } .simple-page.legal { background: var(--bg-alt); } .simple-header { border-bottom: 1px solid var(--border); background: var(--bg); } .simple-header .header-bar { justify-content: space-between; } .back-link { font-size: 14px; font-weight: 600; } .simple-main { flex: 1; max-width: 600px; margin: 0 auto; padding: 64px 24px; width: 100%; } .simple-main.wide { max-width: 720px; } .simple-main h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); font-weight: 700; margin: 0 0 28px; } .simple-footer { border-top: 1px solid var(--border); padding: 18px 24px; text-align: center; font-size: 12.5px; color: var(--text-faint); } .legal-card { background: #fff; border-radius: 14px; padding: 32px; font-size: 14.5px; line-height: 1.7; color: var(--text-soft); } .legal-card p { margin: 0 0 16px; } .legal-card h2 { font-size: 17px; margin: 20px 0 10px; } .legal-card h2:first-child { margin-top: 0; } .legal-card ul { margin: 0 0 20px; padding-left: 20px; } .legal-card li { margin-bottom: 8px; } .download-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin: 0 0 28px; } .download-icon { width: 38px; height: 38px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, white); display: flex; align-items: center; justify-content: center; flex: none; } .download-title { font-size: 14.5px; font-weight: 700; color: var(--text); } .download-sub { font-size: 13px; color: oklch(48% 0.01 75); } .thanks-box { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 24px; font-size: 15px; font-weight: 600; } /* Mobile-first: single column by default (simpler and more legible on phones than uneven side-by-side pairs), two columns only from tablet width up. */ form.contact-form { display: grid; grid-template-columns: 1fr; gap: 14px; } form.contact-form[hidden] { display: none; } form.contact-form input:not([type="checkbox"]), form.contact-form textarea { grid-column: span 1; width: 100%; min-width: 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border-strong); font-size: 14.5px; font-family: inherit; } form.contact-form input[type="email"], form.contact-form textarea, form.contact-form .span-2 { grid-column: span 1; } form.contact-form textarea { resize: vertical; } .variant-label { font-size: 13.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 8px; } .variant-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .variant-option { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: #fff; } .variant-option input { margin-top: 2px; } .consent-row { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-mute); } .consent-row input { margin-top: 2px; } .form-error { grid-column: span 1; color: var(--error); font-size: 13.5px; } .submit-btn { grid-column: span 1; background: var(--accent); color: #fff; border: none; padding: 14px 26px; border-radius: 9px; font-size: 15px; font-weight: 700; cursor: pointer; justify-self: start; } .submit-btn:disabled { opacity: 0.6; cursor: default; } @media (min-width: 681px) { form.contact-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } form.contact-form input[type="email"], form.contact-form textarea, form.contact-form .span-2 { grid-column: span 2; } /* Variant names are long (e.g. "OMEGACAP-D9,5-BROWN NYM SMALL 3x1,5") and wrap awkwardly in a 2-up grid, ballooning the boxes — a single-column list keeps each one a compact, one-line row even at full form width. */ .form-error, .submit-btn { grid-column: span 2; } } /* lazy video placeholder (below-the-fold videos load only on interaction) */ .lazy-video-poster { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; background: oklch(20% 0.01 75); } /* ---------- partner page ---------- */ .partner-lead { font-size: 16px; color: var(--text-soft); max-width: 640px; margin: 0 0 40px; line-height: 1.6; } .partner-group-title { font-size: 20px; font-weight: 700; margin: 0 0 18px; } .partner-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 44px; } @media (min-width: 681px) { .partner-grid { grid-template-columns: 1fr 1fr; } } .partner-block { border: 1px solid var(--border); border-radius: 14px; padding: 24px; background: var(--card-bg); display: flex; flex-direction: column; } .partner-block-region { font-size: 12.5px; font-weight: 600; color: var(--text-faint); margin: 0 0 14px; } .partner-block-caption { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 14px; } .partner-logo { height: 34px; width: auto; max-width: 160px; object-fit: contain; object-position: left; margin-bottom: 14px; } .partner-logo-spacer { height: 34px; margin-bottom: 14px; } .partner-block-title { font-size: 18px; font-weight: 700; color: var(--text); margin: 0 0 14px; } .partner-block p { font-size: 14.5px; color: var(--text-mute); line-height: 1.6; margin: 0 0 18px; flex: 1; } .partner-block .btn { align-self: flex-start; } .events-section { border-top: 1px solid var(--border); padding-top: 32px; } .events-section h2 { font-size: 20px; font-weight: 700; margin: 0 0 18px; } .event-card { display: flex; gap: 16px; align-items: center; border: 1px solid var(--border); border-radius: 14px; padding: 18px 22px; background: var(--card-bg); color: inherit; transition: transform .2s ease, border-color .2s ease; } .event-card:hover { transform: translateY(-4px); border-color: var(--accent); color: inherit; } .event-date { flex: none; background: var(--accent); color: #fff; border-radius: 10px; padding: 10px 14px; text-align: center; font-weight: 700; font-size: 13.5px; line-height: 1.3; min-width: 68px; } .event-details-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; } .event-details-sub { font-size: 13.5px; color: var(--text-mute); } /* ---------- unternehmen page ---------- */ .company-intro { font-size: 16px; color: var(--text-soft); max-width: 680px; margin: 0 0 40px; line-height: 1.6; } .brand-logo-box { display: flex; align-items: center; justify-content: center; border-radius: 18px; background: var(--bg-about); padding: 56px 40px; margin: 0 0 48px; } .brand-logo-box img { width: 100%; max-width: 320px; height: auto; } .history-teaser { display: flex; align-items: center; gap: 28px; border-radius: 16px; overflow: hidden; margin: 0 0 48px; text-decoration: none; background: var(--card-bg); border: 1px solid var(--border); padding: 20px 28px 20px 20px; transition: border-color .2s ease, box-shadow .2s ease; } .history-teaser:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.06); } .history-teaser img { display: block; width: 168px; height: 130px; object-fit: cover; border-radius: 10px; flex: none; transition: transform .3s ease; } .history-teaser:hover img { transform: scale(1.04); } .history-teaser-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .history-teaser-kicker { font-size: 15px; font-weight: 700; color: var(--text); } .history-teaser-text { font-size: 14px; color: var(--text-soft); } .history-teaser-link { margin-top: 6px; font-size: 13.5px; font-weight: 700; color: var(--accent); } @media (max-width: 640px) { .brand-logo-box { padding: 28px 24px; margin: 0 0 28px; } .brand-logo-box img { max-width: 220px; } .history-teaser { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px; } .history-teaser img { width: 100%; height: 150px; } } .brand-story { margin: 0 0 48px; } .brand-story h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 18px; } .brand-story p { font-size: 15px; color: var(--text-soft); line-height: 1.75; margin: 0 0 16px; max-width: 720px; } /* ---------- sustainability quick-facts + real-photo story rows ---------- */ .quickfacts-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0 0 56px; } .quickfact-card { border: 1px solid var(--border); border-radius: 14px; padding: 24px 20px; background: #fff; transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; } .quickfact-card:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-4px); } .quickfact-label { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; opacity: .6; margin-bottom: 10px; } .quickfact-card h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; } .quickfact-card p { font-size: 13.5px; line-height: 1.55; margin: 0; color: var(--text-mute); } .quickfact-card:hover p { color: rgba(255, 255, 255, .92); } .sustain-story-row { margin: 0 0 56px; } .sustain-story-row .story-item-text h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); margin: 0 0 14px; } .sustain-story-row .story-item-text p { font-size: 15px; color: var(--text-soft); line-height: 1.75; margin: 0 0 12px; } @media (max-width: 720px) { .sustain-story-row .story-item, .sustain-story-row .story-item.reverse { flex-direction: column; gap: 20px; } } .founder-section { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; background: var(--card-bg); border: 1px solid var(--border); border-radius: 18px; padding: 32px; margin: 0 0 48px; } .founder-photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex: none; } .founder-quote-block { flex: 1 1 320px; min-width: 0; } .founder-quote { font-size: 18px; font-style: italic; line-height: 1.55; margin: 0 0 14px; color: var(--text); transition: color .2s ease; } .founder-quote::before { content: "\201C"; } .founder-quote::after { content: "\201D"; } .founder-quote-block:hover .founder-quote { color: var(--accent); } .founder-name { font-weight: 700; font-size: 14.5px; } .founder-title { font-size: 13px; color: var(--text-faint); }