/** * Awesum premium theme — aligned with https://awesum-main-new-style.vercel.app (ambient-bg: mesh-breathe, * aurora, orbs, beams, grid-pan, noise). Use + .premium-atmosphere markup. */ :root { /* Exact palette + fills from https://awesum-main-new-style.vercel.app/styles.css */ --black: #010102; --ink-deep: #030206; --ink-2: #050308; --surface: #0a0c12; --surface-2: #0e1018; --fill-card: linear-gradient(158deg, #020203 0%, #040104 40%, #0c0308 75%, rgba(100, 10, 28, 0.55) 100%); --fill-panel: linear-gradient(168deg, #010101 0%, #050204 52%, rgba(90, 10, 26, 0.45) 100%); --fill-header: linear-gradient(180deg, rgba(0, 0, 0, 0.94) 0%, rgba(10, 2, 7, 0.9) 100%); --fill-input: linear-gradient(175deg, rgba(3, 3, 6, 0.95) 0%, rgba(10, 2, 6, 0.82) 100%); --fill-dropdown: linear-gradient(188deg, rgba(0, 0, 0, 0.97) 0%, rgba(14, 3, 8, 0.95) 65%, rgba(55, 8, 18, 0.4) 100%); --fill-section-dark: linear-gradient(178deg, rgba(0, 0, 0, 0.76) 0%, rgba(8, 2, 5, 0.84) 48%, rgba(75, 8, 22, 0.38) 100%); --text: #f7f9ff; --muted: #b4bed2; --lead: #d8deed; --meta: #9aa8bc; --line: rgba(255, 255, 255, 0.14); --line-brand: rgba(255, 43, 62, 0.2); --brand: #ff2b3e; --brand-2: #ff6a75; --link-on-dark: #ffaeb6; --glow: rgba(255, 43, 62, 0.4); --premium-ease: cubic-bezier(0.22, 1, 0.36, 1); --premium-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --premium-font-display: "Syne", "Manrope", system-ui, sans-serif; --premium-font-ui: "Manrope", system-ui, -apple-system, sans-serif; --shadow-deep: 0 22px 70px rgba(15, 18, 28, 0.38); --shadow-soft: 0 16px 44px rgba(15, 18, 28, 0.26); --amb-mx: 50%; --amb-my: 42%; } html:has(body.premium-theme) { background: #000; } body.premium-theme { font-family: var(--premium-font-ui); font-size: 18px; line-height: 1.7; color: var(--text); position: relative; isolation: isolate; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* Base wash — same values as awesum-main-new-style body */ background: radial-gradient(ellipse 95% 80% at 92% 100%, rgba(255, 43, 62, 0.22), transparent 56%), radial-gradient(ellipse 65% 50% at 6% 8%, rgba(255, 43, 62, 0.08), transparent 48%), radial-gradient(ellipse 70% 55% at 50% -8%, rgba(255, 43, 62, 0.06), transparent 52%), linear-gradient(198deg, #000000 0%, #020103 28%, #050204 58%, #0c0206 88%, rgba(40, 4, 12, 0.65) 100%) !important; min-height: 100vh; } body.premium-theme h1, body.premium-theme h2, body.premium-theme h3 { font-family: var(--premium-font-display); letter-spacing: -0.02em; line-height: 1.08; font-weight: 800; } body.premium-theme h1 { font-size: clamp(1.85rem, 2.6vw, 2.5rem); } body.premium-theme h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.12; } body.premium-theme .summary h2, body.premium-theme .section h2 { font-size: clamp(1.45rem, 2.4vw, 2.125rem); line-height: 1.12; max-width: min(28ch, 100%); } body.premium-theme .form h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.12; } body.premium-theme h3 { font-size: 1.18rem; line-height: 1.2; font-weight: 800; } body.premium-theme .module-head h1 { font-size: clamp(1.25rem, 1.8vw, 1.35rem); font-weight: 800; } body.premium-theme input, body.premium-theme select, body.premium-theme textarea, body.premium-theme button { font-family: inherit; } body.premium-theme input:not([type="checkbox"]):not([type="radio"]), body.premium-theme select, body.premium-theme textarea { font-size: 1em; line-height: 1.5; background: var(--fill-input) !important; border-color: rgba(255, 43, 62, 0.22) !important; color: var(--text) !important; } body.premium-theme .btn.alt, body.premium-theme .btn.secondary, body.premium-theme button.alt { background: var(--fill-panel) !important; border: 1px solid var(--line-brand) !important; color: var(--text) !important; } body.premium-theme .kpi, body.premium-theme .step-chip:not(.active) { background: linear-gradient(160deg, rgba(2, 2, 3, 0.9) 0%, rgba(8, 2, 6, 0.82) 100%) !important; border-color: rgba(255, 43, 62, 0.14) !important; } body.premium-theme .module-head p, body.premium-theme .support-note { color: var(--meta); } body.premium-theme .strip-work-card, body.premium-theme .wysiwyg-editor { background: var(--fill-input) !important; border-color: rgba(255, 43, 62, 0.22) !important; } body.premium-theme .strip-work-card table.strip-work-log-table { background: transparent !important; box-shadow: none !important; border: 0 !important; } body.premium-theme table { font-size: 0.95rem; line-height: 1.55; } body.premium-theme th { font-size: 0.8125rem; } body.premium-theme label, body.premium-theme .label, body.premium-theme .stat-card .label { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; } body.premium-theme .subtitle { font-size: 1em; line-height: 1.7; color: var(--lead); } /* Landing hero: same scale as awesum-main (Syne display, not oversized) */ body.premium-theme .hero .subtitle { max-width: min(52ch, 100%); } body.premium-theme .kpi strong { font-family: var(--premium-font-display); font-size: 1.65rem; line-height: 1.1; font-weight: 800; } body.premium-theme .kpi span { font-size: 0.82rem; line-height: 1.45; } body.premium-theme .brand span, body.premium-theme .logo-text { font-family: var(--premium-font-display); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; } body.premium-theme .portal-link, body.premium-theme .link, body.premium-theme .site-link, body.premium-theme .home-link { font-size: 0.8125rem; } body.premium-theme main a:not(.btn):not(.portal-link):not(.brand-card) { color: var(--link-on-dark); text-decoration-color: rgba(255, 174, 182, 0.55); } body.premium-theme main a:not(.btn):not(.portal-link):not(.brand-card):hover { color: #fff; } body.premium-theme a:focus-visible, body.premium-theme button:focus-visible, body.premium-theme input:focus-visible, body.premium-theme select:focus-visible, body.premium-theme textarea:focus-visible, body.premium-theme summary:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; } body.premium-theme p, body.premium-theme li { font-size: inherit; line-height: 1.78; } body.premium-theme .muted { color: var(--muted); } /* ---- Atmosphere (fixed stack) — aurora + beams + grid-pan like awesum-main-new-style ---- */ .premium-atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .premium-atmosphere__mesh { position: absolute; inset: -20%; background: radial-gradient(ellipse 80% 50% at var(--amb-mx) var(--amb-my), rgba(255, 43, 62, 0.26), transparent 55%), radial-gradient(ellipse 60% 40% at 12% 88%, rgba(255, 43, 62, 0.09), transparent 50%), radial-gradient(ellipse 50% 45% at 88% 18%, rgba(255, 43, 62, 0.14), transparent 48%), linear-gradient(202deg, #000000 0%, #030102 38%, #0a0206 72%, rgba(50, 5, 14, 0.55) 100%); animation: premium-mesh-breathe 18s ease-in-out infinite alternate; transform-origin: 50% 50%; } .premium-atmosphere__aurora { position: absolute; inset: -30% -20%; background: conic-gradient( from 120deg at 50% 50%, rgba(255, 43, 62, 0.12), transparent 28%, rgba(120, 90, 255, 0.09), transparent 55%, rgba(255, 106, 117, 0.1), transparent 82%, rgba(255, 43, 62, 0.09) ); opacity: 0.52; animation: premium-aurora-spin 48s linear infinite; mix-blend-mode: screen; } .premium-atmosphere__orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.52; mix-blend-mode: screen; animation: premium-orb-drift 22s ease-in-out infinite; } .premium-atmosphere__orb--a { width: min(48vw, 520px); height: min(48vw, 520px); left: -8%; top: 12%; background: radial-gradient(circle, rgba(255, 43, 62, 0.55), transparent 70%); animation-duration: 26s; } .premium-atmosphere__orb--b { width: min(42vw, 440px); height: min(42vw, 440px); right: -6%; top: 38%; background: radial-gradient(circle, rgba(255, 106, 117, 0.4), transparent 72%); animation-duration: 20s; animation-delay: -4s; } .premium-atmosphere__orb--c { width: min(36vw, 380px); height: min(36vw, 380px); left: 32%; bottom: -12%; background: radial-gradient(circle, rgba(255, 43, 62, 0.32), transparent 70%); animation-duration: 24s; animation-delay: -8s; } .premium-atmosphere__beams { position: absolute; inset: 0; background: repeating-linear-gradient( -28deg, transparent, transparent 140px, rgba(255, 255, 255, 0.03) 140px, rgba(255, 255, 255, 0.03) 141px ); mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 20%, black 0%, transparent 72%); animation: premium-beams-shift 28s linear infinite; opacity: 0.88; } .premium-atmosphere__grid { position: absolute; inset: 0; opacity: 0.12; background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); background-size: 64px 64px; background-position: 0 0, 0 0; mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 10%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 35%, black 10%, transparent 75%); animation: premium-grid-pan 40s linear infinite; } .premium-atmosphere__noise { position: absolute; inset: 0; opacity: 0.032; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .premium-atmosphere__shine { position: absolute; top: -35%; left: -40%; width: 90%; height: 85%; background: linear-gradient( 118deg, transparent 38%, rgba(255, 255, 255, 0.06) 48%, transparent 58% ); transform: rotate(-16deg); animation: premium-shine-sweep 22s var(--premium-ease) infinite; } @keyframes premium-mesh-breathe { 0% { transform: scale(1) translate3d(0, 0, 0); filter: hue-rotate(0deg); } 100% { transform: scale(1.04) translate3d(-1.2%, 1%, 0); filter: hue-rotate(10deg); } } @keyframes premium-aurora-spin { from { transform: rotate(0deg) scale(1.05); } to { transform: rotate(360deg) scale(1.05); } } @keyframes premium-orb-drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(3%, -4%, 0) scale(1.08); } } @keyframes premium-grid-pan { 0% { background-position: 0 0, 0 0; } 100% { background-position: 64px 64px, 64px 64px; } } @keyframes premium-beams-shift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-120px, 80px, 0); } } @keyframes premium-shine-sweep { 0%, 100% { transform: translate3d(-6%, 0, 0) rotate(-16deg); opacity: 0.45; } 50% { transform: translate3d(14%, 4%, 0) rotate(-12deg); opacity: 0.78; } } @media (prefers-reduced-motion: reduce) { .premium-atmosphere__mesh, .premium-atmosphere__aurora, .premium-atmosphere__beams, .premium-atmosphere__grid, .premium-atmosphere__shine, .premium-atmosphere__orb { animation: none !important; } .premium-atmosphere__grid { opacity: 0.08; } .premium-atmosphere__noise { opacity: 0.02; } } /* Content above atmosphere */ body.premium-theme > main, body.premium-theme > .container { position: relative; z-index: 1; } /* ---- Surfaces ---- */ body.premium-theme .topbar, body.premium-theme .nav { background: linear-gradient(145deg, rgba(255, 255, 255, 0.07) 0%, transparent 42%), linear-gradient(168deg, rgba(8, 3, 6, 0.92) 0%, rgba(2, 2, 4, 0.88) 45%, rgba(22, 5, 12, 0.82) 100%) !important; backdrop-filter: blur(18px) saturate(1.35); -webkit-backdrop-filter: blur(18px) saturate(1.35); border-color: var(--line-brand) !important; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12) inset, 0 -1px 0 rgba(255, 255, 255, 0.06) inset, 0 4px 24px rgba(0, 0, 0, 0.45); transition: border-color 0.35s var(--premium-ease), box-shadow 0.35s var(--premium-ease); } body.premium-theme .topbar:hover, body.premium-theme .nav:hover { border-color: rgba(255, 106, 117, 0.38); box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12) inset, 0 -1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 32px rgba(0, 0, 0, 0.55); } body.premium-theme .card, body.premium-theme .wrap .card, body.premium-theme .module, body.premium-theme .top, body.premium-theme .stat, body.premium-theme .buy, body.premium-theme .stat-card, body.premium-theme .mail-card, body.premium-theme .integration-card, body.premium-theme .connections-card, body.premium-theme .brands-footer, body.premium-theme table, body.premium-theme .empty-card, body.premium-theme .tab-btn:not(.active), body.premium-theme .subtab-btn:not(.active), body.premium-theme .mode-chip, body.premium-theme .mode-opt, body.premium-theme .insight-card, body.premium-theme .ring-card, body.premium-theme .ticket-admin-card { background: var(--fill-card) !important; backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); border-color: var(--line-brand) !important; box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: transform 0.45s var(--premium-ease-out), border-color 0.35s ease, box-shadow 0.45s var(--premium-ease-out); } /* Client portal: primary CTA tab — must override glass .tab-btn:not(.active) (uses !important above) */ body.premium-theme .tab-btn.buy-prominent { background: linear-gradient( 122deg, var(--brand) 0%, #ff3d52 40%, #ff5c6e 72%, var(--brand-2) 100% ) !important; color: #fff !important; border-color: rgba(255, 200, 150, 0.55) !important; font-weight: 800; font-size: 0.875rem; letter-spacing: 0.02em; padding: 10px 18px !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 12px 36px rgba(255, 43, 62, 0.5), 0 0 48px rgba(255, 43, 62, 0.18) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: transform 0.2s var(--premium-ease), border-color 0.25s ease, box-shadow 0.25s ease; } body.premium-theme .tab-btn.buy-prominent:hover { transform: translateY(-1px); border-color: rgba(255, 220, 190, 0.78) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 16px 44px rgba(255, 43, 62, 0.58), 0 0 56px rgba(255, 43, 62, 0.22) !important; } body.premium-theme .tab-btn.buy-prominent.active { background: linear-gradient( 122deg, #ff1f35 0%, var(--brand) 38%, #ff4e60 100% ) !important; border-color: rgba(255, 255, 255, 0.32) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 10px 36px var(--glow), 0 0 56px rgba(255, 43, 62, 0.22) !important; } body.premium-theme .photo { transition: transform 0.5s var(--premium-ease-out), box-shadow 0.45s ease; } body.premium-theme .photo:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 28px 70px rgba(2, 4, 20, 0.5); } body.premium-theme .kpi { transition: transform 0.35s var(--premium-ease-out), border-color 0.3s ease; } body.premium-theme .kpi:hover { transform: translateY(-3px); border-color: rgba(255, 106, 117, 0.4); } body.premium-theme .mode-chip.live { border-color: rgba(98, 242, 187, 0.55) !important; } body.premium-theme .mode-chip.test { border-color: rgba(255, 191, 110, 0.55) !important; } /* ---- Primary actions ---- */ body.premium-theme .btn:not(.secondary):not(.alt):not(.no-premium-fx) { position: relative; overflow: hidden; border: 0; background: linear-gradient(120deg, var(--brand) 0%, #ff4e60 45%, var(--brand-2) 100%); color: #fff; box-shadow: 0 8px 28px var(--glow); transition: transform 0.2s var(--premium-ease), box-shadow 0.25s ease; } body.premium-theme .btn:not(.secondary):not(.alt):not(.no-premium-fx)::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 105deg, transparent 0%, rgba(255, 255, 255, 0.22) 45%, transparent 70% ); transform: translateX(-120%); transition: transform 0.6s var(--premium-ease); pointer-events: none; } body.premium-theme .btn:not(.secondary):not(.alt):not(.no-premium-fx):hover { transform: translateY(-1px); box-shadow: 0 12px 36px rgba(255, 43, 62, 0.5); } body.premium-theme .btn:not(.secondary):not(.alt):not(.no-premium-fx):hover::after { transform: translateX(120%); } /* ---- Landing hero headline (match main site: ~h1 scale, comfortable measure) ---- */ body.premium-theme .hero h1 { font-family: var(--premium-font-display), "Syne", system-ui, sans-serif; font-size: clamp(1.85rem, 2.75vw, 2.65rem); font-weight: 800; font-stretch: normal; letter-spacing: -0.02em; line-height: 1.12; max-width: min(38ch, 100%); background: linear-gradient( 125deg, #ffffff 0%, var(--lead) 42%, #ffe8ec 78%, #ffffff 100% ); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 48px rgba(255, 43, 62, 0.1); } body.premium-theme .eyebrow, body.premium-theme .kicker { font-size: 0.76rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #ff8a96; } body.premium-theme .eyebrow { animation: premium-fade-rise 0.9s var(--premium-ease-out) both; } body.premium-theme .hero-chip { font-size: 0.82rem; letter-spacing: 0.06em; line-height: 1.25; animation: premium-fade-rise 0.9s var(--premium-ease-out) 0.08s both; } body.premium-theme .hero-badge { font-size: 0.82rem; line-height: 1.35; animation: premium-fade-rise 0.75s var(--premium-ease-out) both; } body.premium-theme .step-chip { font-size: 0.8125rem; font-weight: 700; } body.premium-theme .tab-btn { font-size: 0.8125rem; } body.premium-theme .subtab-btn { font-size: 0.8125rem; } body.premium-theme .btn { font-size: 1em; font-weight: 700; } body.premium-theme .value { font-family: var(--premium-font-display); font-size: 1.65rem; font-weight: 800; line-height: 1.1; } @media (max-width: 700px) { body.premium-theme .brand span, body.premium-theme .logo-text { font-size: 1.125rem; } } body.premium-theme .hero-badge:nth-child(1) { animation-delay: 0.12s; } body.premium-theme .hero-badge:nth-child(2) { animation-delay: 0.2s; } body.premium-theme .hero-badge:nth-child(3) { animation-delay: 0.28s; } body.premium-theme .hero-chip, body.premium-theme .hero-badge { background: linear-gradient(160deg, rgba(2, 2, 3, 0.88) 0%, rgba(10, 2, 7, 0.78) 100%) !important; border-color: rgba(255, 43, 62, 0.22) !important; color: var(--text) !important; } @keyframes premium-fade-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* ---- Reveal on scroll (IntersectionObserver adds .in) ---- */ body.premium-theme .reveal { opacity: 0; transform: translateY(40px) scale(0.98); filter: blur(4px); transition: opacity 0.85s var(--premium-ease-out), transform 0.85s var(--premium-ease-out), filter 0.85s var(--premium-ease-out); will-change: opacity, transform, filter; } body.premium-theme .reveal.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } /* Pages that animate .reveal purely via CSS (e.g. voorwaarden) */ body.premium-theme .reveal.css-reveal-only { opacity: 0; transform: translateY(18px) scale(0.995); filter: none !important; will-change: auto; transition: none !important; animation: premium-reveal-css 0.85s var(--premium-ease-out) forwards; animation-delay: var(--delay, 0ms); } body.premium-theme .reveal.css-reveal-only.in { opacity: 1; transform: translateY(0) scale(1); filter: none; } @keyframes premium-reveal-css { to { opacity: 1; transform: translateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { body.premium-theme .reveal { filter: none !important; transition-duration: 0.35s; } body.premium-theme .hero-badge, body.premium-theme .eyebrow, body.premium-theme .hero-chip { animation: none !important; } } /* ---- Step chips & tabs ---- */ body.premium-theme .step-chip.active, body.premium-theme .tab-btn.active { box-shadow: 0 6px 24px var(--glow); } /* ---- Brand cards (index footer) ---- */ body.premium-theme .brand-card { transition: transform 0.4s var(--premium-ease-out), border-color 0.3s ease, box-shadow 0.4s ease; } body.premium-theme .brand-card:hover { transform: translateY(-5px) scale(1.01); box-shadow: 0 22px 48px rgba(2, 4, 18, 0.5); } /* ---- Cookie banner ---- */ body.premium-theme .cookie { background: var(--fill-dropdown) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-color: var(--line-brand) !important; box-shadow: var(--shadow-soft), 0 0 0 1px rgba(255, 43, 62, 0.12) inset; } body.premium-theme .cookie.cookie-banner { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); max-width: min(560px, calc(100vw - 24px)); margin-right: 0; padding: 16px 18px 14px; border-radius: 16px; border: 1px solid rgba(255, 106, 117, 0.32) !important; } body.premium-theme .cookie-banner__title { font-family: var(--premium-font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 10px; color: var(--text); } body.premium-theme .cookie-banner__text { margin: 0 0 10px; font-size: 0.8125rem; line-height: 1.55; color: var(--muted); } body.premium-theme .cookie-banner__text strong { color: var(--lead); font-weight: 700; } body.premium-theme .cookie-banner__links { margin: 0 0 12px; font-size: 0.78rem; } body.premium-theme .cookie-banner__links a { color: var(--link-on-dark); font-weight: 700; text-decoration: none; } body.premium-theme .cookie-banner__links a:hover { text-decoration: underline; } body.premium-theme .cookie-banner .cookie-actions { margin-top: 2px; } /* Landing hero: soft rim light */ body.premium-theme .hero.card { position: relative; } body.premium-theme .hero.card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 43, 62, 0.32) 38%, rgba(130, 110, 255, 0.24) 62%, rgba(255, 255, 255, 0.12) 100% ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.85; } body.premium-theme .form.card { position: relative; } body.premium-theme .form.card::after { content: ""; position: absolute; width: 200px; height: 200px; right: -60px; top: -80px; background: radial-gradient(circle, rgba(255, 43, 62, 0.2), transparent 68%); pointer-events: none; filter: blur(2px); } /* ---- Legal footer (copyright + voorwaarden) ---- */ body.premium-theme .site-footer-legal { margin-top: 1.35rem; padding: 1rem 0 0; text-align: center; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--meta); border-top: 1px solid rgba(255, 255, 255, 0.1); } body.premium-theme .site-footer-legal a { color: var(--link-on-dark); font-weight: 600; text-decoration: none; } body.premium-theme .site-footer-legal a:hover { text-decoration: underline; }