/* ══════════════════════════════════════════════════════════════ PAGE.CSS — Sub-page shared design system Jemke Solutions | 2026 Used by: /privat/ · /business/ · /community/ World identity via data-world="care|systems|community" on ══════════════════════════════════════════════════════════════ */ /* ── Smooth theme transitions ── */ html { overflow-x: clip; transition: background-color .4s ease, color .3s ease; } *, *::before, *::after { transition: background-color .32s ease, border-color .32s ease, color .24s ease, box-shadow .32s ease, opacity .28s ease; } video, canvas { transition: opacity .5s ease, transform .75s cubic-bezier(.4,0,.2,1) !important; } img { transition: opacity .4s ease, filter .4s ease !important; } /* ══════════════════════════════════════════════════════════════ WORLD ACCENT VARIABLES ══════════════════════════════════════════════════════════════ */ [data-world="care"] { --wa: #34d399; --wa-dim: rgba( 52, 211, 153, 0.1); --wa-glow: rgba( 16, 185, 129, 0.24); --wa-mute: rgba( 52, 211, 153, 0.6); } [data-world="systems"] { --wa: #818cf8; --wa-dim: rgba(129, 140, 248, 0.1); --wa-glow: rgba( 99, 102, 241, 0.24); --wa-mute: rgba(129, 140, 248, 0.6); } [data-world="community"] { --wa: #a78bfa; --wa-dim: rgba(167, 139, 250, 0.1); --wa-glow: rgba(139, 92, 246, 0.24); --wa-mute: rgba(167, 139, 250, 0.6); --wa2: #70b062; --wa2-dim: rgba(112, 176, 98, 0.1); --wa2-glow: rgba(112, 176, 98, 0.22); --wa2-mute: rgba(112, 176, 98, 0.6); } [data-world="wissen"] { --wa: #34d399; --wa-dim: rgba( 52, 211, 153, 0.10); --wa-glow: rgba( 16, 185, 129, 0.22); --wa-mute: rgba( 52, 211, 153, 0.55); } /* Light mode accent overrides */ html[data-theme="light"][data-world="care"] { --wa: #059669; --wa-dim: rgba(5,150,105,.09); --wa-glow: rgba(5,150,105,.18); --wa-mute: rgba(5,150,105,.55); } html[data-theme="light"][data-world="systems"] { --wa: #4f46e5; --wa-dim: rgba(79,70,229,.09); --wa-glow: rgba(79,70,229,.18); --wa-mute: rgba(79,70,229,.55); } html[data-theme="light"][data-world="community"] { --wa: #7c3aed; --wa-dim: rgba(124,58,237,.09); --wa-glow: rgba(124,58,237,.18); --wa-mute: rgba(124,58,237,.55); --wa2: #4a9040; --wa2-dim: rgba(74,144,64,.09); --wa2-glow: rgba(74,144,64,.18); --wa2-mute: rgba(74,144,64,.55); } html[data-theme="light"][data-world="wissen"] { --wa: #059669; --wa-dim: rgba(5,150,105,.09); --wa-glow: rgba(5,150,105,.18); --wa-mute: rgba(5,150,105,.55); } /* ══════════════════════════════════════════════════════════════ BODY RESET ══════════════════════════════════════════════════════════════ */ body.pg-page { display: flex; flex-direction: column; min-height: 100dvh; background: #06090d; overflow-x: clip; } body.pg-page::before { display: none !important; } body.pg-page .growth-vine, body.pg-page .ambient, body.pg-page #plantTop, body.pg-page .plant-top, body.pg-page .chapter-rail-auto, body.pg-page .chapter-rail-mobile-toggle--auto { display: none !important; } /* ══════════════════════════════════════════════════════════════ NAV ══════════════════════════════════════════════════════════════ */ .pg-nav { position: fixed; inset: 0 0 auto 0; z-index: 200; display: flex; align-items: center; gap: 0.7rem; padding: 0 1.6rem; height: 58px; background: rgba(6, 9, 13, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .pg-nav__home { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.72rem 0.3rem 0.55rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); text-decoration: none; font-size: 0.77rem; font-family: var(--font-heading); font-weight: 600; color: rgba(240, 246, 255, 0.62); flex-shrink: 0; } .pg-nav__home:hover { background: rgba(255,255,255,.09); color: #f0f6ff; border-color: rgba(255,255,255,.2); } /* ── Article-style nav (pg-nav__inner wrapper) ── */ .pg-nav__inner { display: flex; align-items: center; gap: 0.7rem; width: 100%; height: 100%; } .pg-nav__logo { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; flex-shrink: 0; } .pg-nav__logo img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .pg-nav__links { display: flex; align-items: center; gap: 1.4rem; margin-left: auto; } .pg-nav__links a { font-size: 0.8rem; font-family: var(--font-heading); font-weight: 600; color: rgba(240, 246, 255, 0.48); text-decoration: none; transition: color 0.15s; } .pg-nav__links a:hover { color: rgba(240, 246, 255, 0.9); } .pg-nav__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: 0.6rem; flex-shrink: 0; } .pg-theme-toggle { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: rgba(240, 246, 255, 0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; } .pg-theme-toggle:hover { background: rgba(255, 255, 255, 0.13); color: #f0f6ff; border-color: rgba(255, 255, 255, 0.22); } html[data-theme="light"] .pg-nav__links a { color: rgba(13, 17, 23, 0.48); } html[data-theme="light"] .pg-nav__links a:hover { color: #0d1117; } html[data-theme="light"] .pg-theme-toggle { border-color: rgba(0, 0, 0, 0.12); background: rgba(0, 0, 0, 0.04); color: rgba(13, 17, 23, 0.55); } html[data-theme="light"] .pg-theme-toggle:hover { background: rgba(0,0,0,.09); color: #0d1117; } .pg-nav__world { display: flex; align-items: center; gap: 0.52rem; flex: 1; min-width: 0; } .pg-nav__world-logo { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; filter: invert(1); mix-blend-mode: screen; opacity: 0.92; transition: none !important; } .pg-nav__world-name { font-family: var(--font-heading); font-size: 0.94rem; font-weight: 700; letter-spacing: -0.01em; color: #f0f6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pg-nav__switcher { display: flex; align-items: center; gap: 0.35rem; } /* When switcher is the rightmost nav element (no konto follows), reserve space for the fixed theme toggle */ .pg-nav__switcher:last-child { margin-right: 7.5rem; } .pg-nav__switch { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.28rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.07); font-size: 0.74rem; font-family: var(--font-heading); font-weight: 600; color: rgba(240, 246, 255, 0.82); text-decoration: none; white-space: nowrap; transition: background 0.16s, border-color 0.16s, color 0.16s; } .pg-nav__switch:hover { background: var(--wa-dim); border-color: var(--wa-mute); color: var(--wa); } /* ── Konto link (pill with accent) ── */ .pg-nav__konto { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.28rem 0.72rem 0.28rem 0.55rem; border-radius: 999px; border: 1px solid var(--wa-mute, rgba(255,255,255,0.22)); background: var(--wa-dim, rgba(255,255,255,0.07)); font-size: 0.74rem; font-family: var(--font-heading); font-weight: 700; color: var(--wa, rgba(240,246,255,0.82)); text-decoration: none; white-space: nowrap; /* Push left so fixed theme-toggle doesn't cover it */ margin-left: 0.2rem; margin-right: 7.5rem; transition: background 0.16s, border-color 0.16s, color 0.16s, opacity 0.16s; } .pg-nav__konto:hover { opacity: 0.8; } .pg-nav__konto svg { flex-shrink: 0; opacity: 0.85; } /* Konto link in pg-nav__links (article/quiz nav — theme toggle is IN the nav, not fixed) */ .pg-nav__links .pg-nav__konto { font-size: 0.75rem; padding: 0.22rem 0.6rem 0.22rem 0.45rem; margin-right: 0; } /* ── Theme toggle ── */ body.pg-page #themeToggle.theme-toggle { position: fixed !important; top: 12px !important; right: 1.6rem !important; bottom: auto !important; left: auto !important; z-index: 300; padding: 0.3rem 0.78rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: rgba(240, 246, 255, 0.65); font-size: 0.76rem; font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; transform: none !important; } body.pg-page #themeToggle.theme-toggle:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); color: #f0f6ff; } /* ══════════════════════════════════════════════════════════════ HERO ══════════════════════════════════════════════════════════════ */ .pg-hero { position: relative; min-height: 100dvh; display: flex; align-items: flex-end; overflow: hidden; } .pg-hero__media { position: absolute; inset: 0; z-index: 0; } .pg-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.42; } .pg-hero__img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.48; } .pg-hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( to bottom, rgba(6, 9, 13, 0.1) 0%, rgba(6, 9, 13, 0.05) 28%, rgba(6, 9, 13, 0.55) 58%, rgba(6, 9, 13, 0.94) 100% ); } .pg-hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 50% 110%, var(--wa-glow), transparent 55%); } .pg-hero__inner { position: relative; z-index: 10; width: min(880px, calc(100% - 3.2rem)); margin: 0 auto 4rem; padding: 2.2rem 2.6rem 2.4rem; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(6, 9, 13, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 22px 64px rgba(0, 0, 0, 0.45); } .pg-hero__eyebrow { display: block; margin-bottom: 1rem; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wa); } .pg-hero__brand { display: flex; align-items: flex-start; gap: 0.85rem; margin-bottom: 1.2rem; } .pg-hero__logo { width: 46px; height: 46px; object-fit: contain; flex-shrink: 0; margin-top: 0.15rem; filter: invert(1); mix-blend-mode: screen; opacity: 0.92; } .pg-hero__h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.7rem, 4vw, 3.2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; color: #f0f6ff; } .pg-hero__lead { margin: 0 0 1.6rem; font-size: clamp(0.95rem, 1.5vw, 1.05rem); line-height: 1.72; color: rgba(240, 246, 255, 0.7); max-width: 640px; } .pg-hero__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; } .pg-hero__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.4rem; list-style: none; padding: 0; } .pg-hero__tags li { padding: 0.22rem 0.62rem; border-radius: 999px; font-size: 0.71rem; font-family: var(--font-heading); font-weight: 600; border: 1px solid var(--wa-glow); background: var(--wa-dim); color: var(--wa); } /* ══════════════════════════════════════════════════════════════ MAIN + SECTION REVEAL ══════════════════════════════════════════════════════════════ */ .pg-main { flex: 1; } .section-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, 1, .4, 1); } .section-reveal.is-visible { opacity: 1; transform: none; } .pg-hero.section-reveal { opacity: 1 !important; transform: none !important; } /* ══════════════════════════════════════════════════════════════ SECTIONS ══════════════════════════════════════════════════════════════ */ .pg-section { padding: 5rem 1.6rem; } .pg-section--alt { background: rgba(255, 255, 255, 0.018); } .pg-section--dark { background: rgba(0, 0, 0, 0.22); } .pg-section__inner { max-width: 1120px; margin: 0 auto; } .pg-section__head { max-width: 700px; margin-bottom: 3rem; } .pg-section__head--center { max-width: 700px; margin: 0 auto 3rem; text-align: center; } /* ══════════════════════════════════════════════════════════════ TYPOGRAPHY ══════════════════════════════════════════════════════════════ */ .pg-eyebrow { display: block; margin-bottom: 0.6rem; font-family: var(--font-heading); font-size: 0.71rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wa); } .pg-h2 { margin: 0 0 0.7rem; font-family: var(--font-heading); font-size: clamp(1.55rem, 2.8vw, 2.35rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; color: var(--text); } .pg-lead { margin: 0; font-size: clamp(0.91rem, 1.3vw, 1rem); line-height: 1.72; color: var(--muted); } /* ══════════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════════ */ .pg-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.6rem 1.3rem; border-radius: 999px; font-family: var(--font-heading); font-size: 0.87rem; font-weight: 700; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: none; transition: transform .25s ease, box-shadow .25s ease !important; } .pg-btn:hover { transform: translateY(-2px); } .pg-btn--accent { background: var(--wa); color: #06090d; box-shadow: 0 6px 22px var(--wa-glow); } .pg-btn--accent:hover { box-shadow: 0 10px 30px var(--wa-glow); } .pg-btn--ghost { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: rgba(240, 246, 255, 0.78); } .pg-btn--ghost:hover { background: rgba(255,255,255,.11); color: #f0f6ff; } /* ══════════════════════════════════════════════════════════════ GRID ══════════════════════════════════════════════════════════════ */ .pg-grid { display: grid; gap: 1.1rem; } .pg-grid--2 { grid-template-columns: repeat(2, 1fr); } .pg-grid--3 { grid-template-columns: repeat(3, 1fr); } .pg-grid--auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } @media (max-width: 640px) { .pg-grid--2, .pg-grid--3 { grid-template-columns: 1fr; gap: .7rem; } } @media (min-width: 641px) and (max-width: 900px) { .pg-grid--3 { grid-template-columns: repeat(2, 1fr); } } /* ══════════════════════════════════════════════════════════════ CARD ══════════════════════════════════════════════════════════════ */ .pg-card { padding: 1.5rem 1.6rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); display: flex; flex-direction: column; gap: 0.5rem; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important; } .pg-card:hover { border-color: rgba(255,255,255,.15); box-shadow: 0 16px 40px rgba(0,0,0,.28); transform: translateY(-2px); } .pg-card--accent { border-color: var(--wa-dim); background: var(--wa-dim); } .pg-card--accent:hover { border-color: var(--wa-mute); box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 30px var(--wa-glow); } .pg-card__icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--wa-dim); border: 1px solid rgba(255,255,255,.09); margin-bottom: 0.3rem; flex-shrink: 0; } .pg-card__icon img, .pg-card__icon svg { width: 22px; height: 22px; filter: brightness(0) invert(1); opacity: 0.78; display: block; } .pg-card__num { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; color: var(--wa); opacity: 0.7; line-height: 1; } .pg-card__label { display: block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--wa); margin-bottom: 0.1rem; } .pg-card__title { font-family: var(--font-heading); font-size: 1.06rem; font-weight: 700; color: var(--text); margin: 0; line-height: 1.25; } .pg-card__body { font-size: 0.87rem; line-height: 1.66; color: var(--muted); margin: 0; } .pg-card__list { list-style: none; padding: 0; margin: 0.25rem 0 0; display: flex; flex-direction: column; gap: 0.28rem; } .pg-card__list li { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.83rem; color: var(--muted); line-height: 1.5; } .pg-card__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wa); flex-shrink: 0; margin-top: 0.38rem; } /* ══════════════════════════════════════════════════════════════ HIGHLIGHT / CALLOUT ══════════════════════════════════════════════════════════════ */ .pg-callout { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.8rem 2rem; border-radius: 18px; border: 1px solid var(--wa-dim); background: var(--wa-dim); border-left: 3px solid var(--wa); } .pg-callout__icon { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); } .pg-callout__icon svg { color: var(--wa); } .pg-callout--featured { flex-direction: column; gap: 1rem; padding: 2.2rem 2.4rem; border-radius: 22px; border-left-width: 4px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } .pg-callout__tags { display: flex; flex-wrap: wrap; gap: 0.38rem; margin-top: 0.5rem; } .pg-callout__tags span { padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.71rem; font-family: var(--font-heading); font-weight: 600; border: 1px solid var(--wa-glow); background: rgba(255, 255, 255, 0.04); color: var(--wa); } .pg-callout__body { flex: 1; } .pg-callout__title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 0.55rem; } .pg-callout p { font-size: 0.88rem; line-height: 1.68; color: var(--muted); margin: 0 0 0.5rem; } .pg-callout p:last-of-type { margin-bottom: 0; } /* ══════════════════════════════════════════════════════════════ SECTION INNER NARROW ══════════════════════════════════════════════════════════════ */ .pg-section__inner--narrow { max-width: 760px; } /* ══════════════════════════════════════════════════════════════ NAV SWITCH ACTIVE ══════════════════════════════════════════════════════════════ */ .pg-nav__switch.is-active { background: var(--wa-dim); border-color: var(--wa-mute); color: var(--wa); } /* ══════════════════════════════════════════════════════════════ FEATURE PANELS (alternating visual + body) ══════════════════════════════════════════════════════════════ */ .pg-feature { display: grid; gap: 3rem 4.5rem; align-items: center; padding: 3.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .pg-feature:last-child { border-bottom: none; } .pg-feature--left { grid-template-columns: 1fr 1.65fr; } .pg-feature--right { grid-template-columns: 1.65fr 1fr; } .pg-feature--right .pg-feature__visual { order: 1; } .pg-feature__visual { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; } .pg-feature__icon-wrap { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 20px; background: var(--wa-dim); border: 1px solid rgba(255, 255, 255, 0.08); } .pg-feature__icon-wrap svg { color: var(--wa); opacity: 0.88; } /* ── Image panel (replaces icon-wrap) ── */ .pg-feature__img-panel { width: 100%; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; position: relative; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5); transition: transform .6s cubic-bezier(.4,0,.2,1) !important; } .pg-feature:hover .pg-feature__img-panel { transform: scale(1.025); } .pg-feature__img-veil { position: absolute; inset: 0; background: linear-gradient( 135deg, rgba(6, 9, 13, 0.55) 0%, rgba(6, 9, 13, 0.2) 50%, rgba(6, 9, 13, 0.5) 100% ); /* world-tinted glow at bottom */ box-shadow: inset 0 -60px 80px rgba(0, 0, 0, 0.6); } /* World-accent glow overlay on veil */ [data-world="care"] .pg-feature__img-veil::after, [data-world="systems"] .pg-feature__img-veil::after, [data-world="community"] .pg-feature__img-veil::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 60% at 50% 110%, var(--wa-glow), transparent 55%); } .pg-feature__img-badge { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; font-family: var(--font-heading); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(240, 246, 255, 0.7); background: rgba(6, 9, 13, 0.65); backdrop-filter: blur(10px); padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); } .pg-feature__tag-cloud { display: flex; flex-wrap: wrap; gap: 0.38rem; } .pg-feature__tag-cloud span { padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.71rem; font-family: var(--font-heading); font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04); color: rgba(240, 246, 255, 0.6); } .pg-feature__body { display: flex; flex-direction: column; gap: 0.8rem; } .pg-feature__num { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wa); opacity: 0.8; } .pg-feature__title { font-family: var(--font-heading); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text); margin: 0; line-height: 1.2; } .pg-feature__desc { font-size: 0.93rem; line-height: 1.72; color: var(--muted); margin: 0; } .pg-feature__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .pg-feature__list li { display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.87rem; color: rgba(240, 246, 255, 0.72); line-height: 1.55; } .pg-feature__list li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--wa); flex-shrink: 0; margin-top: 0.42rem; } /* ══════════════════════════════════════════════════════════════ PROCESS STEPS ══════════════════════════════════════════════════════════════ */ .pg-steps { display: flex; flex-direction: column; gap: 6px; } .pg-step { display: flex; gap: 1.4rem; padding: 1.4rem 1.6rem; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); align-items: flex-start; } .pg-step__num { font-family: var(--font-heading); font-size: 1.45rem; font-weight: 700; color: var(--wa); opacity: 0.55; line-height: 1; flex-shrink: 0; min-width: 2rem; padding-top: 0.12rem; } .pg-step__content { display: flex; flex-direction: column; gap: 0.3rem; } .pg-step__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; } .pg-step__body { font-size: 0.87rem; line-height: 1.64; color: var(--muted); margin: 0; } /* ══════════════════════════════════════════════════════════════ FAQ ACCORDION ══════════════════════════════════════════════════════════════ */ .pg-faq { display: flex; flex-direction: column; gap: 5px; } .pg-faq-item { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; background: rgba(255, 255, 255, 0.025); overflow: hidden; } .pg-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font-heading); font-size: 0.93rem; font-weight: 700; color: var(--text); } .pg-faq-q::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--wa); flex-shrink: 0; transition: transform .3s ease; } .pg-faq-item.is-open .pg-faq-q::after { transform: rotate(45deg); } .pg-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.4,0,.2,1); } .pg-faq-item.is-open .pg-faq-a { grid-template-rows: 1fr; } .pg-faq-a-inner { overflow: hidden; padding: 0 1.4rem; font-size: 0.87rem; line-height: 1.68; color: var(--muted); } .pg-faq-item.is-open .pg-faq-a-inner { padding-bottom: 1.2rem; } /* ══════════════════════════════════════════════════════════════ CONTACT SECTION ══════════════════════════════════════════════════════════════ */ .pg-contact { padding: 5.5rem 1.6rem; text-align: center; } .pg-contact__inner { max-width: 620px; margin: 0 auto; } .pg-contact__inner .pg-h2 { margin-bottom: 0.7rem; } .pg-contact__actions { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 2rem; } /* ══════════════════════════════════════════════════════════════ CROSS-WORLD NAV ══════════════════════════════════════════════════════════════ */ .pg-xnav { padding: 4rem 1.6rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } .pg-xnav__inner { max-width: 1120px; margin: 0 auto; } .pg-xnav__label { display: block; font-family: var(--font-heading); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(240, 246, 255, 0.32); margin-bottom: 1.2rem; } .pg-xnav__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .pg-xnav__card { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.5rem 1.6rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); text-decoration: none; color: var(--text); transition: border-color .3s ease, background .3s ease, transform .3s ease !important; } .pg-xnav__card:hover { border-color: rgba(255,255,255,.16); background: rgba(255,255,255,.055); transform: translateY(-2px); } .pg-xnav__world { font-family: var(--font-heading); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(240, 246, 255, 0.38); } .pg-xnav__title { font-family: var(--font-heading); font-size: 1.08rem; font-weight: 700; color: var(--text); } .pg-xnav__body { font-size: 0.85rem; line-height: 1.6; color: var(--muted); } /* ══════════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════════ */ .pg-footer { background: rgba(6, 9, 13, 0.95); border-top: 1px solid rgba(255,255,255,.06); } .pg-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.7rem; max-width: 1440px; margin: 0 auto; padding: 0.9rem 1.6rem; font-size: 0.76rem; color: rgba(240, 246, 255, 0.38); } .pg-footer__brand { color: rgba(240,246,255,.65); font-weight: 600; font-family: var(--font-heading); } .pg-footer__inner a { color: rgba(240,246,255,.52); text-decoration: none; } .pg-footer__inner a:hover { color: #f0f6ff; } .pg-footer__sep { opacity: 0.22; } /* ══════════════════════════════════════════════════════════════ ENTRANCE ANIMATIONS ══════════════════════════════════════════════════════════════ */ @keyframes pgNavIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } } @keyframes pgHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .pg-nav { animation: pgNavIn .55s cubic-bezier(.4,0,.2,1) both; } .pg-hero__inner { animation: pgHeroIn .9s cubic-bezier(.2,1,.4,1) .12s both; } /* ══════════════════════════════════════════════════════════════ LIGHT MODE ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] body.pg-page { background: #eef2f5; } html[data-theme="light"] .pg-nav { background: rgba(238,242,245,.9); border-bottom-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-nav__home { color: rgba(13,17,23,.6); border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.04); } html[data-theme="light"] .pg-nav__home:hover { background: rgba(0,0,0,.08); color: #0d1117; } html[data-theme="light"] .pg-nav__world-logo { filter: none; mix-blend-mode: normal; opacity: 1; } html[data-theme="light"] .pg-nav__world-name { color: #0d1117; } html[data-theme="light"] .pg-nav__switch { color: rgba(13,17,23,.72); border-color: rgba(0,0,0,.18); background: rgba(0,0,0,.05); } html[data-theme="light"] .pg-nav__konto { color: var(--wa); border-color: var(--wa-mute); background: var(--wa-dim); } html[data-theme="light"] body.pg-page #themeToggle.theme-toggle { color: rgba(13,17,23,.62); border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); } html[data-theme="light"] .pg-hero__veil { background: linear-gradient( to bottom, rgba(238,242,245,.06) 0%, rgba(238,242,245,.03) 28%, rgba(238,242,245,.52) 58%, rgba(238,242,245,.96) 100% ); } html[data-theme="light"] .pg-hero__inner { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.08); box-shadow: 0 22px 64px rgba(0,0,0,.12); } html[data-theme="light"] .pg-hero__h1 { color: #0d1117; } html[data-theme="light"] .pg-hero__lead { color: rgba(13,17,23,.68); } html[data-theme="light"] .pg-hero__logo { filter: none; mix-blend-mode: normal; opacity: 1; } html[data-theme="light"] .pg-btn--ghost { border-color: rgba(0,0,0,.15); background: rgba(0,0,0,.04); color: rgba(13,17,23,.72); } html[data-theme="light"] .pg-btn--ghost:hover { background: rgba(0,0,0,.08); color: #0d1117; } html[data-theme="light"] .pg-section--alt { background: rgba(0,0,0,.024); } html[data-theme="light"] .pg-section--dark { background: rgba(0,0,0,.04); } html[data-theme="light"] .pg-card { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-card:hover { border-color: rgba(0,0,0,.14); box-shadow: 0 16px 40px rgba(0,0,0,.08); } html[data-theme="light"] .pg-card__icon { background: var(--wa-dim); border-color: rgba(0,0,0,.07); } html[data-theme="light"] .pg-card__icon img, html[data-theme="light"] .pg-card__icon svg { filter: none; opacity: .9; } html[data-theme="light"] .pg-callout { background: var(--wa-dim); border-color: var(--wa-dim); } html[data-theme="light"] .pg-nav__switch.is-active { background: var(--wa-dim); border-color: var(--wa-mute); color: var(--wa); } html[data-theme="light"] .pg-feature__icon-wrap { background: var(--wa-dim); border-color: rgba(0,0,0,.07); } html[data-theme="light"] .pg-feature__tag-cloud span { border-color: rgba(0,0,0,.1); background: rgba(0,0,0,.04); color: rgba(13,17,23,.62); } html[data-theme="light"] .pg-feature__list li { color: rgba(13,17,23,.65); } html[data-theme="light"] .pg-feature__img-panel { border-color: rgba(0,0,0,.1); box-shadow: 0 16px 48px rgba(0,0,0,.15); } html[data-theme="light"] .pg-hero__glow { opacity: 0; } html[data-theme="light"] .pg-feature__img-veil { background: linear-gradient( 135deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.04) 50%, rgba(0,0,0,.10) 100% ); box-shadow: inset 0 -50px 70px rgba(238,242,245,.45); } html[data-theme="light"] .pg-feature__img-badge { background: rgba(255,255,255,.75); border-color: rgba(0,0,0,.1); color: rgba(13,17,23,.72); } html[data-theme="light"] .pg-callout__icon { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.07); } html[data-theme="light"] .pg-step { background: rgba(255,255,255,.65); border-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-faq-item { background: rgba(255,255,255,.65); border-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-faq-q { color: #0d1117; } html[data-theme="light"] .pg-xnav { border-top-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-xnav__card { background: rgba(255,255,255,.62); border-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-xnav__card:hover { background: rgba(255,255,255,.88); border-color: rgba(0,0,0,.14); } html[data-theme="light"] .pg-xnav__title { color: #0d1117; } html[data-theme="light"] .pg-footer { background: rgba(238,242,245,.97); border-top-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-footer__inner { color: rgba(13,17,23,.4); } html[data-theme="light"] .pg-footer__brand { color: rgba(13,17,23,.68); } html[data-theme="light"] .pg-footer__inner a { color: rgba(13,17,23,.56); } html[data-theme="light"] .pg-footer__inner a:hover { color: #0d1117; } /* ══════════════════════════════════════════════════════════════ MOBILE ══════════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .pg-nav__switcher { display: none; } body.pg-page #themeToggle.theme-toggle { right: 1rem !important; top: 15px !important; } .pg-hero__inner { padding: 1.6rem 1.4rem; margin: 0 0.8rem 1.5rem; } .pg-section { padding: 3.5rem 1rem; } .pg-grid--2, .pg-grid--3 { grid-template-columns: 1fr; } .pg-xnav__grid { grid-template-columns: 1fr; } .pg-xnav { padding: 3rem 1rem; } .pg-contact { padding: 3.5rem 1rem; } .pg-feature--left, .pg-feature--right { grid-template-columns: 1fr; } .pg-feature--right .pg-feature__visual { order: 0; } .pg-callout--featured { padding: 1.6rem 1.4rem; } .pg-callout { flex-direction: column; gap: .6rem; padding: 1.2rem 1.4rem; } } @media (max-width: 480px) { .pg-nav__home span { display: none; } .pg-hero__h1 { font-size: 1.65rem; } } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .pg-nav, .pg-hero__inner, .section-reveal { animation: none !important; transition: none !important; } .section-reveal { opacity: 1 !important; transform: none !important; } } /* ── Theme picker sits above page content ── */ body.pg-page .theme-picker { z-index: 500; } /* ══════════════════════════════════════════════════════════════ SCENARIO CARDS — "Erkennst du dich wieder?" ══════════════════════════════════════════════════════════════ */ .pg-grid--4 { grid-template-columns: repeat(4, 1fr); } .pg-scenario { padding: 1.6rem 1.5rem 1.4rem; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); display: flex; flex-direction: column; gap: 0.65rem; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important; position: relative; overflow: hidden; } .pg-scenario::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--wa), transparent); opacity: 0; transition: opacity .3s ease; } .pg-scenario:hover { border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35); transform: translateY(-3px); } .pg-scenario:hover::before { opacity: 1; } .pg-scenario--accent { border-color: var(--wa-dim); background: var(--wa-dim); } .pg-scenario--accent::before { opacity: 0.7; } .pg-scenario__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--wa-dim); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--wa); flex-shrink: 0; margin-bottom: 0.1rem; } .pg-scenario--accent .pg-scenario__icon { background: rgba(255, 255, 255, 0.08); } .pg-scenario__title { font-family: var(--font-heading); font-size: 0.97rem; font-weight: 700; line-height: 1.35; color: #f0f6ff; margin: 0; } .pg-scenario__body { font-size: 0.85rem; line-height: 1.65; color: rgba(240, 246, 255, 0.58); margin: 0; flex: 1; } .pg-scenario__tag { display: inline-block; font-family: var(--font-heading); font-size: 0.69rem; font-weight: 700; letter-spacing: 0.05em; color: var(--wa); opacity: 0.85; margin-top: 0.2rem; } /* ── CTA row below section grids ── */ .pg-section__cta-row { margin-top: 2.2rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; } .pg-section__cta-note { font-size: 0.8rem; font-family: var(--font-heading); font-weight: 600; color: rgba(240, 246, 255, 0.38); } /* ══════════════════════════════════════════════════════════════ NO-RISK STRIP — trust & reassurance ══════════════════════════════════════════════════════════════ */ .pg-no-risk { background: radial-gradient(ellipse 60% 100% at 50% 50%, var(--wa-dim), transparent 60%), rgba(255, 255, 255, 0.015); border-top: 1px solid rgba(255, 255, 255, 0.06); border-bottom: 1px solid rgba(255, 255, 255, 0.06); padding: 3.5rem 1.6rem; } .pg-no-risk__inner { display: flex; gap: 0; max-width: 1100px; margin: 0 auto; align-items: flex-start; } .pg-no-risk__sep { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.07); flex-shrink: 0; margin: 0 2rem; } .pg-no-risk__item { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; } .pg-no-risk__icon { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 13px; background: var(--wa-dim); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--wa); flex-shrink: 0; margin-bottom: 0.2rem; } .pg-no-risk__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: #f0f6ff; } .pg-no-risk__body { font-size: 0.875rem; line-height: 1.7; color: rgba(240, 246, 255, 0.55); margin: 0; } /* ══════════════════════════════════════════════════════════════ CONTACT REASSURANCE LIST ══════════════════════════════════════════════════════════════ */ .pg-contact__reassurance { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-bottom: 1.8rem; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600; color: rgba(240, 246, 255, 0.45); } /* ══════════════════════════════════════════════════════════════ COMPARISON TABLE — Jemke vs. other providers ══════════════════════════════════════════════════════════════ */ .pg-compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 0.5rem; } .pg-compare-col { padding: 2rem 2rem 1.8rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.07); } .pg-compare-col--good { background: var(--wa-dim); border-color: var(--wa-glow); } .pg-compare-col--bad { background: rgba(255, 255, 255, 0.02); opacity: 0.72; } .pg-compare-col__head { font-family: var(--font-heading); font-size: 0.88rem; font-weight: 700; letter-spacing: 0.03em; margin: 0 0 1.2rem; display: flex; align-items: center; gap: 0.5rem; } .pg-compare-col--good .pg-compare-col__head { color: var(--wa); } .pg-compare-col--good .pg-compare-col__head svg { color: var(--wa); } .pg-compare-col--bad .pg-compare-col__head { color: rgba(240, 246, 255, 0.38); } .pg-compare-col--bad .pg-compare-col__head svg { color: rgba(240, 246, 255, 0.3); } .pg-compare-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } .pg-compare-col li { font-size: 0.875rem; line-height: 1.5; padding-left: 1.2rem; position: relative; } .pg-compare-col li::before { content: ""; position: absolute; left: 0; top: 0.52em; width: 5px; height: 5px; border-radius: 50%; } .pg-compare-col--good li { color: rgba(240, 246, 255, 0.8); } .pg-compare-col--good li::before { background: var(--wa); box-shadow: 0 0 6px var(--wa-glow); } .pg-compare-col--bad li { color: rgba(240, 246, 255, 0.38); } .pg-compare-col--bad li::before { background: rgba(240, 246, 255, 0.2); } /* ══════════════════════════════════════════════════════════════ LIGHT MODE — new components ══════════════════════════════════════════════════════════════ */ html[data-theme="light"] .pg-scenario { border-color: rgba(0, 0, 0, 0.07); background: rgba(255, 255, 255, 0.7); } html[data-theme="light"] .pg-scenario--accent { background: var(--wa-dim); border-color: var(--wa-glow); } html[data-theme="light"] .pg-scenario__title { color: #0d1117; } html[data-theme="light"] .pg-scenario__body { color: rgba(13, 17, 23, 0.6); } html[data-theme="light"] .pg-no-risk { background: radial-gradient(ellipse 60% 100% at 50% 50%, var(--wa-dim), transparent 60%), rgba(0, 0, 0, 0.01); border-color: rgba(0, 0, 0, 0.07); } html[data-theme="light"] .pg-no-risk__sep { background: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .pg-no-risk__title { color: #0d1117; } html[data-theme="light"] .pg-no-risk__body { color: rgba(13, 17, 23, 0.55); } html[data-theme="light"] .pg-compare-col { border-color: rgba(0, 0, 0, 0.07); } html[data-theme="light"] .pg-compare-col--good { background: var(--wa-dim); border-color: var(--wa-glow); } html[data-theme="light"] .pg-compare-col--bad { background: rgba(0, 0, 0, 0.02); } html[data-theme="light"] .pg-compare-col--good li { color: rgba(13, 17, 23, 0.82); } html[data-theme="light"] .pg-compare-col--bad li { color: rgba(13, 17, 23, 0.38); } html[data-theme="light"] .pg-section__cta-note { color: rgba(13, 17, 23, 0.38); } html[data-theme="light"] .pg-contact__reassurance { color: rgba(13, 17, 23, 0.45); } /* ══════════════════════════════════════════════════════════════ MOBILE — new components ══════════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .pg-grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .pg-compare-grid { grid-template-columns: 1fr; } .pg-compare-col--bad { display: none; } .pg-no-risk__inner { flex-direction: column; gap: 2rem; } .pg-no-risk__sep { display: none; } } @media (max-width: 640px) { .pg-grid--4 { grid-template-columns: 1fr; } .pg-no-risk { padding: 2.5rem 1.2rem; } .pg-section__cta-row { flex-direction: column; align-items: flex-start; } } /* ══════════════════════════════════════════════════════════════ CSS QUALITY UPGRADES - Improved section textures - Better card hover effects - pg-highlight-bar component - Hero glow per world ══════════════════════════════════════════════════════════════ */ /* ── Section with grain texture ── */ .pg-section--alt { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"), rgba(255, 255, 255, 0.018); background-size: 180px, auto; } /* ── Card icon: world-accent SVG color ── */ .pg-card__icon svg { color: var(--wa); filter: none; opacity: 0.9; } /* ── Hero glow adapts to world ── */ [data-world] .pg-hero__glow { background: radial-gradient(ellipse 80% 50% at 50% 110%, var(--wa-glow), transparent 55%), radial-gradient(ellipse 50% 40% at 20% 90%, var(--wa-dim), transparent 50%); } /* ── pg-highlight-bar: horizontal strip of trust/stats ── */ .pg-highlight-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; background: rgba(255, 255, 255, 0.02); border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05); padding: 0 1.6rem; } .pg-highlight-item { display: flex; align-items: center; gap: 0.6rem; padding: 1.1rem 2rem; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 600; color: rgba(240, 246, 255, 0.5); position: relative; white-space: nowrap; } .pg-highlight-item + .pg-highlight-item::before { content: ""; position: absolute; left: 0; top: 25%; height: 50%; width: 1px; background: rgba(255, 255, 255, 0.07); } .pg-highlight-item strong { font-weight: 700; color: var(--wa); } .pg-highlight-item svg { flex-shrink: 0; color: var(--wa); opacity: 0.7; } /* ── Improved pg-section__head spacing ── */ .pg-section__head { margin-bottom: 2.8rem; } /* ── Better step number (larger, more impactful) ── */ .pg-step__num { font-size: 2.8rem; background: linear-gradient(135deg, var(--wa), rgba(240,246,255,.15)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Light mode for quality upgrades */ html[data-theme="light"] .pg-highlight-bar { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.06); } html[data-theme="light"] .pg-highlight-item { color: rgba(13,17,23,.55); } html[data-theme="light"] .pg-highlight-item + .pg-highlight-item::before { background: rgba(0,0,0,.08); } @media (max-width: 640px) { .pg-highlight-item { padding: 0.9rem 1.1rem; font-size: 0.76rem; } .pg-highlight-item + .pg-highlight-item::before { display: none; } } /* ══════════════════════════════════════════════════════════════ PREMIUM VISUAL UPGRADES V2 Gradient text · Animated glow · Eyebrow lines · Glassmorphism · Section mesh · World-accent shadows ══════════════════════════════════════════════════════════════ */ /* ── Animated hero glow pulse ── */ @keyframes worldGlowPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } } .pg-hero__glow { animation: worldGlowPulse 7s ease-in-out infinite; } /* ── Hero H1 gradient text ── */ .pg-hero__h1 { background: linear-gradient(125deg, #f0f6ff 35%, var(--wa) 108%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html[data-theme="light"] .pg-hero__h1 { background: linear-gradient(125deg, #0a1628 32%, var(--wa) 112%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Feature title gradient text ── */ .pg-feature__title { background: linear-gradient(125deg, #f0f6ff 40%, var(--wa-mute) 120%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html[data-theme="light"] .pg-feature__title { background: linear-gradient(125deg, #09141e 38%, var(--wa) 118%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Eyebrow: decorative leading accent line ── */ .pg-eyebrow, .pg-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; } .pg-eyebrow::before, .pg-hero__eyebrow::before { content: ""; display: inline-block; width: 20px; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--wa), transparent); flex-shrink: 0; } /* ── Hero inner: world glow border + soft inner light ── */ .pg-hero__inner { border-color: var(--wa-glow); box-shadow: 0 22px 64px rgba(0, 0, 0, 0.45), 0 0 60px var(--wa-dim), inset 0 1px 0 rgba(255, 255, 255, 0.08); } /* ── Nav world name: subtle gradient tint ── */ .pg-nav__world-name { background: linear-gradient(90deg, #f0f6ff 28%, var(--wa-mute) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } html[data-theme="light"] .pg-nav__world-name { background: linear-gradient(90deg, #0d1117 28%, var(--wa) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ── Card: glassmorphism + world hover glow ── */ .pg-card { backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .pg-card:hover { border-color: var(--wa-glow); box-shadow: 0 20px 52px rgba(0, 0, 0, 0.32), 0 0 28px var(--wa-dim); } /* ── Scenario: glassmorphism + world hover glow ── */ .pg-scenario { backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } .pg-scenario:hover { border-color: var(--wa-glow); box-shadow: 0 22px 50px rgba(0, 0, 0, 0.38), 0 0 30px var(--wa-dim); } /* ── Feature image panel: world glow on hover ── */ .pg-feature:hover .pg-feature__img-panel { box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55), 0 0 40px var(--wa-glow); } /* ── Compare good column: world accent shadow ── */ .pg-compare-col--good { box-shadow: 0 8px 36px var(--wa-glow); } /* ── Callout featured: inset world glow ── */ .pg-callout--featured { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), inset 0 0 40px var(--wa-dim); } /* ── Section alt: world accent side orbs ── */ .pg-section--alt { background: radial-gradient(ellipse 50% 65% at 0% 50%, var(--wa-dim), transparent 55%), radial-gradient(ellipse 50% 65% at 100% 50%, var(--wa-dim), transparent 55%), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E"), rgba(255, 255, 255, 0.018); background-size: auto, auto, 180px, auto; } /* ── Contact section: world mesh background ── */ .pg-contact { position: relative; overflow: hidden; } .pg-contact::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 75% at 50% 50%, var(--wa-dim), transparent 60%), radial-gradient(ellipse 45% 55% at 10% 90%, var(--wa-glow), transparent 55%), radial-gradient(ellipse 40% 50% at 90% 10%, var(--wa-dim), transparent 55%); } /* ── Light mode overrides for V2 ── */ html[data-theme="light"] .pg-hero__inner { border-color: var(--wa-glow); box-shadow: 0 22px 64px rgba(0, 0, 0, 0.12), 0 0 40px var(--wa-dim); } html[data-theme="light"] .pg-card:hover { border-color: var(--wa-glow); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1), 0 0 20px var(--wa-dim); } html[data-theme="light"] .pg-compare-col--good { box-shadow: 0 8px 32px var(--wa-dim); } html[data-theme="light"] .pg-section--alt { background: radial-gradient(ellipse 50% 65% at 0% 50%, var(--wa-dim), transparent 55%), radial-gradient(ellipse 50% 65% at 100% 50%, var(--wa-dim), transparent 55%), rgba(0, 0, 0, 0.024); } html[data-theme="light"] .pg-callout--featured { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), inset 0 0 40px var(--wa-dim); } html[data-theme="light"] .pg-contact::before { opacity: 0.55; } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { .pg-hero__glow { animation: none !important; } } /* ════════════════════════════════════════════════ MISSION · KI · APP-SHOWCASE (V3) ════════════════════════════════════════════════ */ /* ── Mission pull-quote ── */ .pg-mission-quote { margin: 3rem auto 0; max-width: 680px; text-align: center; font-family: var(--font-heading); font-size: clamp(1.05rem, 1.7vw, 1.22rem); font-style: italic; font-weight: 500; color: rgba(240, 246, 255, 0.6); line-height: 1.65; padding: 1.6rem 2rem; border: 1px solid var(--wa-glow); border-radius: 18px; background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(10px); position: relative; } .pg-mission-quote::before { content: '"'; position: absolute; top: -0.55rem; left: 1.5rem; font-size: 3.5rem; line-height: 1; color: var(--wa); font-style: normal; opacity: 0.5; } /* ── KI split comparison ── */ .pg-ki-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 3rem 0 2.5rem; } .pg-ki-side { padding: 2rem 2rem 1.8rem; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.02); } .pg-ki-side--cloud { border-color: rgba(239, 68, 68, 0.14); background: rgba(239, 68, 68, 0.02); } .pg-ki-side--local { border-color: var(--wa-glow); background: rgba(255, 255, 255, 0.025); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 24px var(--wa-dim); } .pg-ki-side__head { margin-bottom: 1.4rem; } .pg-ki-side__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 8px; margin-bottom: 0.5rem; } .pg-ki-side--cloud .pg-ki-side__badge { background: rgba(239, 68, 68, 0.1); color: rgba(239, 68, 68, 0.8); border: 1px solid rgba(239, 68, 68, 0.15); } .pg-ki-side--local .pg-ki-side__badge { background: rgba(99, 102, 241, 0.1); color: var(--wa); border: 1px solid var(--wa-glow); } .pg-ki-side__sub { font-size: 0.83rem; color: rgba(240, 246, 255, 0.38); margin: 0; } .pg-ki-side__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .pg-ki-side__list li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; line-height: 1.5; color: rgba(240, 246, 255, 0.6); } .pg-ki-check { color: var(--wa); font-weight: 700; flex-shrink: 0; line-height: 1.5; } .pg-ki-cross { color: rgba(239, 68, 68, 0.65); font-weight: 700; flex-shrink: 0; line-height: 1.5; } /* ── KI highlight fact box ── */ .pg-ki-fact { display: flex; gap: 1.3rem; align-items: flex-start; padding: 1.8rem 2rem; border-radius: 18px; border: 1px solid var(--wa-glow); background: rgba(255, 255, 255, 0.018); backdrop-filter: blur(12px); margin-bottom: 2.5rem; } .pg-ki-fact__icon { width: 46px; height: 46px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(99, 102, 241, 0.1); border: 1px solid var(--wa-glow); color: var(--wa); } .pg-ki-fact__title { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: #f0f6ff; margin: 0 0 0.4rem; } .pg-ki-fact__text { font-size: 0.88rem; line-height: 1.72; color: rgba(240, 246, 255, 0.57); margin: 0; } /* ── App showcase: phone screens ── */ .pg-app-showcase { margin: 3rem 0 2rem; } .pg-app-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 1.5rem; } .pg-app-screen { border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); backdrop-filter: blur(10px); overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .pg-app-screen:hover { border-color: var(--wa-glow); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25), 0 0 24px var(--wa-dim); transform: translateY(-2px); } .pg-app-screen__topbar { height: 42px; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.06); display: flex; align-items: center; gap: 0.45rem; padding: 0 1rem; } .pg-app-screen__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); } .pg-app-screen__topbar-title { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; color: rgba(240, 246, 255, 0.38); margin-left: 0.4rem; letter-spacing: 0.05em; } .pg-app-screen__body { padding: 1rem 0.9rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; } .pg-app-screen__row { height: 40px; border-radius: 9px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); display: flex; align-items: center; gap: 0.65rem; padding: 0 0.75rem; } .pg-app-screen__row-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--wa-dim); flex-shrink: 0; } .pg-app-screen__row-text { flex: 1; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); } .pg-app-screen__row-text-sm { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); } .pg-app-screen__row-tag { font-size: 0.65rem; font-family: var(--font-heading); font-weight: 700; color: var(--wa); background: var(--wa-dim); border-radius: 5px; padding: 0.1rem 0.4rem; flex-shrink: 0; } .pg-app-screen__chat-user, .pg-app-screen__chat-ai { border-radius: 10px; padding: 0.55rem 0.75rem; font-size: 0.72rem; line-height: 1.5; } .pg-app-screen__chat-user { background: var(--wa-dim); color: rgba(240, 246, 255, 0.75); align-self: flex-end; max-width: 85%; border-bottom-right-radius: 3px; } .pg-app-screen__chat-ai { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.07); color: rgba(240, 246, 255, 0.6); max-width: 95%; border-bottom-left-radius: 3px; } .pg-app-screen__footer-label { text-align: center; font-family: var(--font-heading); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(240, 246, 255, 0.35); padding: 0.7rem 0.9rem; border-top: 1px solid rgba(255, 255, 255, 0.05); } /* ── Logo wall ── */ .pg-logo-wall { margin: 2.5rem 0 0; } .pg-logo-wall__head { font-family: var(--font-heading); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(240, 246, 255, 0.3); text-align: center; margin-bottom: 1.2rem; } .pg-logo-wall__grid { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: center; align-items: center; } .pg-logo-wall__item { width: 68px; height: 68px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.07); display: flex; align-items: center; justify-content: center; padding: 9px; opacity: 0.55; transition: opacity .25s ease, border-color .25s ease, transform .25s ease; } .pg-logo-wall__item:hover { opacity: 0.9; border-color: var(--wa-glow); transform: translateY(-1px); } .pg-logo-wall__item img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); } /* ── Light mode overrides ── */ html[data-theme="light"] .pg-mission-quote { color: rgba(13, 17, 23, 0.58); background: rgba(0, 0, 0, 0.02); } html[data-theme="light"] .pg-ki-side--cloud { background: rgba(239,68,68,0.02); } html[data-theme="light"] .pg-ki-side--local { background: rgba(0,0,0,0.01); } html[data-theme="light"] .pg-ki-side__sub { color: rgba(13,17,23,0.45); } html[data-theme="light"] .pg-ki-side__list li { color: rgba(13,17,23,0.62); } html[data-theme="light"] .pg-ki-fact { background: rgba(0,0,0,0.02); } html[data-theme="light"] .pg-ki-fact__text { color: rgba(13,17,23,0.58); } html[data-theme="light"] .pg-ki-fact__title { color: #0d1117; } html[data-theme="light"] .pg-ki-fact__icon { background: rgba(99,102,241,0.07); } html[data-theme="light"] .pg-app-screen { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .pg-app-screen__topbar { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .pg-app-screen__row { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.06); } html[data-theme="light"] .pg-app-screen__row-text { background: rgba(0,0,0,0.1); } html[data-theme="light"] .pg-app-screen__row-text-sm { background: rgba(0,0,0,0.06); } html[data-theme="light"] .pg-app-screen__chat-user { color: rgba(13,17,23,0.7); } html[data-theme="light"] .pg-app-screen__chat-ai { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.07); color: rgba(13,17,23,0.6); } html[data-theme="light"] .pg-logo-wall__item { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.09); } html[data-theme="light"] .pg-logo-wall__item img { filter: none; } /* ── Legal pages ── */ .pg-legal-body { font-size: 0.92rem; line-height: 1.8; color: rgba(240, 246, 255, 0.65); } .pg-legal-body h2 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #f0f6ff; margin: 2rem 0 0.5rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.07); } .pg-legal-body h2:first-child { border-top: none; margin-top: 0; } .pg-legal-body p { margin: 0 0 0.8rem; } .pg-legal-body ul { padding-left: 1.4rem; margin: 0 0 0.8rem; } .pg-legal-body li { margin-bottom: 0.3rem; } .pg-legal-body a { color: var(--wa); text-decoration: underline; text-underline-offset: 3px; } .pg-legal-body a:hover { opacity: 0.8; } html[data-theme="light"] .pg-legal-body { color: rgba(13, 17, 23, 0.65); } html[data-theme="light"] .pg-legal-body h2 { color: #0d1117; border-top-color: rgba(0, 0, 0, 0.08); } /* ── Refurbished calculator ── */ .pg-calc { max-width: 780px; margin: 3rem auto 0; padding: 2.5rem 2.5rem 2rem; border-radius: 24px; border: 1px solid var(--wa-glow); background: rgba(255, 255, 255, 0.018); backdrop-filter: blur(14px); } .pg-calc__question { font-family: var(--font-heading); font-size: clamp(1rem, 1.6vw, 1.1rem); font-weight: 700; color: #f0f6ff; margin-bottom: 1.5rem; text-align: center; } .pg-calc__slider-row { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 2rem; } .pg-calc__slider { -webkit-appearance: none; appearance: none; flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); outline: none; cursor: pointer; } .pg-calc__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wa); cursor: pointer; box-shadow: 0 0 0 4px var(--wa-dim); transition: box-shadow .2s ease; } .pg-calc__slider::-webkit-slider-thumb:hover { box-shadow: 0 0 0 6px var(--wa-dim); } .pg-calc__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--wa); border: none; cursor: pointer; } .pg-calc__count-badge { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; color: var(--wa); min-width: 3.5rem; text-align: center; background: var(--wa-dim); border: 1px solid var(--wa-glow); border-radius: 10px; padding: 0.3rem 0.7rem; flex-shrink: 0; } .pg-calc__results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.4rem; } .pg-calc__result { padding: 1.3rem 1rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.025); text-align: center; display: flex; flex-direction: column; gap: 0.2rem; } .pg-calc__num { font-family: var(--font-heading); font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 700; letter-spacing: -0.03em; color: var(--wa); line-height: 1; } .pg-calc__unit { font-family: var(--font-heading); font-size: 0.78rem; font-weight: 600; color: #f0f6ff; opacity: 0.8; } .pg-calc__desc { font-size: 0.74rem; color: rgba(240, 246, 255, 0.42); } .pg-calc__note { font-size: 0.76rem; color: rgba(240, 246, 255, 0.35); text-align: center; margin: 0; line-height: 1.6; } html[data-theme="light"] .pg-calc { background: rgba(0, 0, 0, 0.02); border-color: var(--wa-glow); } html[data-theme="light"] .pg-calc__question { color: #0d1117; } html[data-theme="light"] .pg-calc__result { background: rgba(0, 0, 0, 0.025); border-color: rgba(0, 0, 0, 0.08); } html[data-theme="light"] .pg-calc__unit { color: #0d1117; } html[data-theme="light"] .pg-calc__slider { background: rgba(0,0,0,0.12); } @media (max-width: 640px) { .pg-calc { padding: 1.6rem 1.2rem; } .pg-calc__results { grid-template-columns: 1fr; gap: 0.7rem; } } /* ── Responsive ── */ @media (max-width: 840px) { .pg-ki-split { grid-template-columns: 1fr; } .pg-app-screens { grid-template-columns: 1fr; } .pg-ki-fact { flex-direction: column; gap: 0.8rem; } } @media (max-width: 600px) { .pg-ki-side { padding: 1.4rem; } .pg-ki-fact { padding: 1.3rem; } } /* ══════════════════════════════════════════════════════════════ GLOBAL LIGHT-MODE FIXES — catch-all for near-white text that becomes invisible on #eef2f5 background ══════════════════════════════════════════════════════════════ */ /* Base body text color so `currentColor` SVG icons stay visible */ html[data-theme="light"] body.pg-page { color: rgba(13,17,23,.82); } /* Section headings + body text */ html[data-theme="light"] .pg-h2 { color: #0a1628; } html[data-theme="light"] .pg-lead { color: rgba(13,17,23,.62); } html[data-theme="light"] .pg-eyebrow { color: var(--wa); } html[data-theme="light"] .pg-section__head + .pg-lead { color: rgba(13,17,23,.62); } /* Scenario cards */ html[data-theme="light"] .pg-scenario { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-scenario:hover { border-color: var(--wa-mute); box-shadow: 0 12px 36px rgba(0,0,0,.1); } html[data-theme="light"] .pg-scenario__title { color: #0d1117; } html[data-theme="light"] .pg-scenario__body { color: rgba(13,17,23,.58); } html[data-theme="light"] .pg-scenario--accent { background: var(--wa-dim); border-color: var(--wa-mute); } html[data-theme="light"] .pg-scenario__icon { background: var(--wa-dim); border-color: var(--wa-glow); } /* CTA rows and notes */ html[data-theme="light"] .pg-section__cta-note { color: rgba(13,17,23,.45); } html[data-theme="light"] .pg-section__cta-row .pg-section__cta-note { color: rgba(13,17,23,.45); } /* No-risk strip */ html[data-theme="light"] .pg-no-risk { background: rgba(0,0,0,.018); border-color: rgba(0,0,0,.06); } html[data-theme="light"] .pg-no-risk__title { color: #0d1117; } html[data-theme="light"] .pg-no-risk__body { color: rgba(13,17,23,.58); } html[data-theme="light"] .pg-no-risk__icon { color: var(--wa); } /* Calc desc / note */ html[data-theme="light"] .pg-calc__desc { color: rgba(13,17,23,.52); } html[data-theme="light"] .pg-calc__note { color: rgba(13,17,23,.42); } /* App screen misc */ html[data-theme="light"] .pg-app-screen__footer-label { color: rgba(13,17,23,.38); border-top-color: rgba(0,0,0,.06); } html[data-theme="light"] .pg-logo-wall__head { color: rgba(13,17,23,.35); } /* Logo wall: show logos as-is in light mode (already handled above but redundant is safe) */ html[data-theme="light"] .pg-logo-wall__item img { filter: none; } /* Compare grid */ html[data-theme="light"] .pg-compare-col { background: rgba(255,255,255,.72); border-color: rgba(0,0,0,.08); } html[data-theme="light"] .pg-compare-col li { color: rgba(13,17,23,.65); } html[data-theme="light"] .pg-compare-col--good .pg-compare-col__head { color: #059669; } html[data-theme="light"] .pg-compare-col--bad .pg-compare-col__head { color: rgba(13,17,23,.45); } /* Mission quote */ html[data-theme="light"] .pg-mission-quote { color: rgba(13,17,23,.6); background: rgba(0,0,0,.02); } /* Contact section */ html[data-theme="light"] .pg-contact { background: rgba(0,0,0,.025); } html[data-theme="light"] .pg-contact__reassurance span { color: rgba(13,17,23,.58); } /* FAQs */ html[data-theme="light"] .pg-faq-a p { color: rgba(13,17,23,.65); } /* KI side list items */ html[data-theme="light"] .pg-ki-side__list li { color: rgba(13,17,23,.65); } /* Green IT tip icons on page.css-based pages */ html[data-theme="light"] .pg-card__icon svg { color: var(--wa); } html[data-theme="light"] .pg-feature__icon-wrap svg { color: var(--wa); } /* ══════════════════════════════════════════════════════════════ PAGE HERO — Cinematic split hero, auto-themed per world accent Used by: Care, Systems, Community, Akademie ══════════════════════════════════════════════════════════════ */ .page-hero { min-height: 100dvh; padding: 0 !important; display: flex; flex-direction: column; position: relative; overflow: hidden; } .page-hero::before, .page-hero::after { display: none !important; } .ph-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #030610; } .ph-media img, .ph-media video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; display: block; filter: saturate(1.06) contrast(1.02); transform: scale(1.04); will-change: auto; } .ph-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,4,14,.94) 0%, rgba(2,4,14,.7) 34%, rgba(2,4,14,.22) 64%, rgba(2,4,14,.06) 100%), linear-gradient(0deg, rgba(2,4,14,.96) 0%, rgba(2,4,14,.3) 32%, rgba(2,4,14,.16) 76%, rgba(2,4,14,.54) 100%); } html[data-theme="light"] .ph-media::after { background: linear-gradient(90deg, rgba(248,249,253,.97) 0%, rgba(248,249,253,.82) 36%, rgba(248,249,253,.22) 68%, rgba(248,249,253,.04) 100%), linear-gradient(0deg, rgba(248,249,253,.96) 0%, rgba(248,249,253,.15) 55%, rgba(248,249,253,.44) 100%); } .ph-noise { display: none; } .ph-glow-tr { position: absolute; top: -20%; right: -10%; pointer-events: none; z-index: 0; width: clamp(500px,60vw,900px); height: clamp(500px,60vw,900px); border-radius: 50%; background: radial-gradient(circle at 50%, var(--wa-glow, rgba(255,255,255,.1)) 0%, transparent 62%); opacity: .65; } .ph-glow-bl { position: absolute; bottom: -15%; left: -8%; pointer-events: none; z-index: 0; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle at 50%, var(--wa-glow, rgba(255,255,255,.07)) 0%, transparent 65%); opacity: .45; } .ph-eyebrow { position: absolute; top: calc(70px + 1.8rem); left: clamp(1.5rem,5vw,6rem); display: flex; align-items: center; gap: .55rem; z-index: 3; font-family: var(--font-heading); font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--wa); } .ph-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wa); flex-shrink: 0; box-shadow: 0 0 8px var(--wa-glow); animation: phDotPulse 2.8s ease-in-out infinite; } @keyframes phDotPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } } .ph-divider { position: absolute; top: calc(70px + 6rem); bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, var(--wa-glow) 25%, var(--wa-glow) 75%, transparent); z-index: 1; pointer-events: none; } .ph-split { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; flex: 1; max-width: 1400px; margin: 0 auto; width: 100%; padding: calc(70px + 5.5rem) clamp(1.5rem,5vw,6rem) 0; gap: 0; } .ph-manifesto-col { padding-right: clamp(2rem,4vw,5rem); } .ph-logo { width: clamp(38px,4.5vw,52px); height: clamp(38px,4.5vw,52px); object-fit: contain; margin-bottom: 1.2rem; display: block; filter: drop-shadow(0 0 14px var(--wa-glow)); } .ph-manifesto { font-family: var(--font-heading); font-size: clamp(2.6rem,4.6vw,5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.04em; margin: 0 0 1.5rem; background: linear-gradient(155deg, rgba(232,240,255,.96) 10%, var(--wa) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: phMfIn 1.1s .1s cubic-bezier(.22,1,.36,1) both; } html[data-theme="light"] .ph-manifesto { background: linear-gradient(155deg, rgba(10,20,40,.9) 10%, var(--wa) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } @keyframes phMfIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } } .ph-sub { font-size: clamp(.96rem,1.4vw,1.14rem); color: rgba(200,215,255,.5); line-height: 1.72; max-width: 480px; margin-bottom: 2.5rem; animation: phMfIn 1.1s .22s cubic-bezier(.22,1,.36,1) both; } html[data-theme="light"] .ph-sub { color: rgba(10,22,40,.62); } .ph-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; animation: phMfIn 1.1s .32s cubic-bezier(.22,1,.36,1) both; } .ph-search-wrap { position: relative; margin-top: 1.6rem; max-width: 400px; animation: phMfIn 1.1s .38s cubic-bezier(.22,1,.36,1) both; } .ph-search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--wa-mute); pointer-events: none; } .ph-search { width: 100%; padding: .72rem 1rem .72rem 2.6rem; font-family: var(--font-body); font-size: .94rem; background: rgba(255,255,255,.06); border: 1px solid var(--wa-glow); border-radius: 10px; color: rgba(240,246,255,.88); outline: none; transition: border-color .2s, background .2s; } .ph-search:focus { background: rgba(255,255,255,.1); border-color: var(--wa-mute); } html[data-theme="light"] .ph-search { background: rgba(0,0,0,.04); color: rgba(10,22,40,.88); border-color: var(--wa-glow); } html[data-theme="light"] .ph-search:focus { background: rgba(0,0,0,.07); } .ph-atmos-col { padding-left: clamp(2rem,4vw,5rem); } .ph-big-num { font-family: var(--font-heading); font-size: clamp(9rem,21vw,25rem); font-weight: 900; line-height: .8; letter-spacing: -.07em; -webkit-text-stroke: 2px var(--wa-glow); color: var(--wa-dim); display: block; animation: phNumIn 1.1s cubic-bezier(.22,1,.36,1) both; } @keyframes phNumIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } } .ph-big-unit { display: block; margin-top: .6rem; padding-left: .35rem; font-family: var(--font-heading); font-size: clamp(1.1rem,2.2vw,2rem); font-weight: 800; color: var(--wa); letter-spacing: -.01em; line-height: 1.1; animation: phNumIn 1.1s .15s cubic-bezier(.22,1,.36,1) both; } .ph-big-desc { display: block; padding-left: .35rem; margin-top: .3rem; font-family: var(--font-heading); font-size: clamp(.72rem,.96vw,.9rem); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wa-mute); opacity: .55; animation: phNumIn 1.1s .25s cubic-bezier(.22,1,.36,1) both; } .ph-strip { position: relative; z-index: 2; display: flex; width: 100%; margin-top: auto; border-top: 1px solid var(--wa-glow); background: rgba(2,4,14,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html[data-theme="light"] .ph-strip { background: rgba(248,249,253,.8); } .ph-strip-item { flex: 1; padding: clamp(1.1rem,2.5vh,1.8rem) clamp(1.2rem,3vw,3rem); border-right: 1px solid var(--wa-glow); animation: phStripIn .8s calc(.5s + var(--i,0)*.12s) cubic-bezier(.22,1,.36,1) both; } @keyframes phStripIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .ph-strip-item:last-child { border-right: none; } .ph-strip-num { font-family: var(--font-heading); font-size: clamp(1.8rem,3.2vw,3.2rem); font-weight: 900; color: var(--wa); line-height: 1; letter-spacing: -.04em; } .ph-strip-unit { font-size: clamp(.7rem,.95vw,.88rem); font-weight: 800; color: var(--wa-mute); margin-left: .1rem; } .ph-strip-label { display: block; margin-top: .3rem; font-family: var(--font-heading); font-size: clamp(.74rem,.86vw,.86rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(200,210,255,.34); line-height: 1.35; } html[data-theme="light"] .ph-strip-label { color: rgba(10,22,40,.42); } @media (max-width: 860px) { .ph-split { grid-template-columns: 1fr; padding-top: calc(70px + 3rem); gap: 2.5rem; } .ph-divider { display: none; } .ph-manifesto-col { padding-right: 0; } .ph-atmos-col { padding-left: 0; order: -1; } .ph-big-num { font-size: clamp(7rem,30vw,14rem); } .ph-strip { flex-wrap: wrap; } .ph-strip-item { flex: 1 1 50%; border-right: none; border-bottom: 1px solid var(--wa-glow); } .ph-strip-item:nth-child(odd) { border-right: 1px solid var(--wa-glow); } } @media (max-width: 480px) { .ph-strip-item { flex: 1 1 100%; border-right: none !important; } }