/* * Autorea mobile white-water surface layer. * Rollback: remove this stylesheet link from the HTML files. * Desktop remains governed entirely by main.css. */ @media (max-width: 767px) { :root { --cream: #ffffff; --cream-deep: #f1f5f2; --cream-light: #fbfdfb; --paper-veil: rgba(255, 255, 255, 0.72); --surface-0: #f1f5f2; --surface-1: #ffffff; --surface-2: #fbfdfb; --surface-3: #ffffff; --on-fir-2: rgba(255, 255, 255, 0.9); --on-fir-3: rgba(255, 255, 255, 0.7); --surface-glass-bg: radial-gradient(115% 170% at 8% -55%, rgba(255, 255, 255, 0.98) 0 34%, transparent 62%), radial-gradient(90% 150% at 104% 130%, rgba(168, 191, 160, 0.22), transparent 62%), linear-gradient(138deg, rgba(255, 255, 255, 0.78), rgba(239, 246, 241, 0.48)); --surface-glass-border: 1px solid rgba(47, 74, 58, 0.18); --surface-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(168, 191, 160, 0.18), 0 18px 44px -30px rgba(47, 74, 58, 0.55); --surface-glass-filter: blur(22px) saturate(155%); --surface-glass-inner-bg: radial-gradient(95% 56% at 3% 0, rgba(255, 255, 255, 0.98), transparent 62%), radial-gradient(85% 65% at 100% 100%, rgba(168, 191, 160, 0.17), transparent 72%), linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(241, 247, 243, 0.5)); --surface-glass-inner-border: 1px solid rgba(47, 74, 58, 0.15); --surface-glass-inner-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(168, 191, 160, 0.17), 0 22px 54px -38px rgba(47, 74, 58, 0.5); --nav-glass-bg: var(--surface-glass-bg); --nav-glass-border: var(--surface-glass-border); --nav-glass-shadow: var(--surface-glass-shadow); } html, body { background: #ffffff; } html[lang="de"] .source::before { content: "Quelle "; } .grain { /* Keep the paper texture without blending a fixed viewport-sized layer against every frame of moving page content in iOS Safari. */ opacity: 0.055; mix-blend-mode: normal; } .hero-reach__sticky { background: radial-gradient(circle at 50% 25%, rgba(255, 255, 255, 0.98) 0 22%, rgba(255, 255, 255, 0.76) 48%, transparent 72%), linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.34)); } .risk-hub, .risk-hub[data-chapter-tone="risk"] { background: radial-gradient(circle at 50% 48%, rgba(168, 191, 160, 0.09), transparent 44%), #ffffff; } .risk-hub::before { background: radial-gradient(circle at 50% 50%, rgba(168, 191, 160, 0.08), transparent 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.82)); } .risk-metric, .fixes-hub__tabs, .fixes-phase--before, .fixes-system__states-focus { background: rgba(244, 248, 245, 0.66); } .risk-detail { background: linear-gradient(135deg, #ffffff, #f1f7f3); -webkit-backdrop-filter: none; backdrop-filter: none; transform: translate(-50%, -50%); animation: none; } .risk-detail.is-switching { transform: translate(-50%, -50%); } .risk-hub.is-detail-open::after { background: rgba(47, 74, 58, 0.1); -webkit-backdrop-filter: none; backdrop-filter: none; } .fixes-section[data-chapter-tone="fix"], .guarantee, .methodology[data-chapter-tone="method"], .history-tabs-section[data-chapter-tone="history"], .history-tabs-section[data-chapter-tone="history"] + .section { background: radial-gradient(circle at 82% 20%, rgba(168, 191, 160, 0.08), transparent 36%), #ffffff; } .toc.toc--mobile-ready .toc__details { background: rgba(255, 255, 255, 0.94); border-color: rgba(47, 74, 58, 0.14); box-shadow: inset 0 1px 0 #ffffff, 0 16px 36px -30px rgba(47, 74, 58, 0.42); } .nav { /* The existing gradients, refraction border and inset highlights preserve the water surface. Avoid live backdrop sampling on a fixed element while the document is scrolling. */ backdrop-filter: none; -webkit-backdrop-filter: none; background: radial-gradient(115% 170% at 8% -55%, rgba(255, 255, 255, 0.99) 0 34%, transparent 62%), radial-gradient(90% 150% at 104% 130%, rgba(168, 191, 160, 0.2), transparent 62%), linear-gradient(138deg, rgba(255, 255, 255, 0.96), rgba(239, 246, 241, 0.91)); } .nav__mobile-panel { background: #ffffff; border-color: rgba(47, 74, 58, 0.17); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98), inset 0 -1px 0 rgba(168, 191, 160, 0.2), 0 26px 60px -34px rgba(47, 74, 58, 0.58); transform: none; transition: none; } .nav.is-mobile-open .nav__mobile-panel { transform: none; } .nav__mobile-panel summary span { transition: none; } .nav__mobile-panel summary { flex-wrap: nowrap; white-space: nowrap; } .nav__mobile-panel summary span, .nav__mobile-panel details[open] summary span { flex: none; transform: none; } .nav__mobile-group, .nav__mobile-group a { animation: none; transition: none; } .nav__mobile-panel summary, .nav__mobile-direct, .nav__mobile-group a { background: #ffffff; border-color: rgba(47, 74, 58, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82); } .partner-card__logo { background: radial-gradient(120% 100% at 0 0, #ffffff 0 38%, transparent 72%), linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(242, 247, 243, 0.58)); border-color: rgba(47, 74, 58, 0.12); box-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgba(168, 191, 160, 0.14), 0 14px 30px -27px rgba(47, 74, 58, 0.48); } .section--rule { border-color: rgba(47, 74, 58, 0.14); } /* Dark CTA and footer surfaces keep their green ground, but lose the cream cast. */ .close, .close__title, .close__arc li.is-lit, .fig-panel--fir, .standards-summary, .proto__col--after { color: #ffffff; } .close .eyebrow, .close__arc .sep, .foot .label, .foot__lede, .foot__newsletter-input::placeholder, .foot__sitemap-heading { color: rgba(255, 255, 255, 0.7); } .close__trust, .close__arc li, .foot, .foot__sitemap-col a:not(.foot__sitemap-heading), .foot__newsletter-note { color: rgba(255, 255, 255, 0.9); } .close .lead { color: rgba(255, 255, 255, 0.78) !important; } .foot__brand, .foot__heading, .foot__sitemap-col a:hover, .foot__sitemap-col a:focus-visible { color: #ffffff; } .foot__inner, .foot__newsletter-input, .foot__social-link { border-color: rgba(255, 255, 255, 0.22); } .foot__newsletter-input { color: #ffffff; } .foot__newsletter-submit { background: #ffffff; } }