/** * @DOSYA qm-preset-tokens.css * @ETIKET TEMA-TOKEN — body.menu-layout-{preset} değişkenleri * @YUKLENME layouts/public.php (ThemeCssService inline SONRASI, public-app ÖNCESİ/SONRASI değil — inline önce) * @REHBER CSS-REHBER.md * * Tüm preset farkları burada CSS değişkeni olarak tanımlanır. * menu-layouts.css / surfaces / product bu değişkenleri tüketir. */ /* ── [ETIKET: GENEL] Yerleşim & tipografi (mobil → tablet → masaüstü) ── */ .public-qm { --qm-space-page: clamp(0.75rem, 3.2vw, 1.35rem); --qm-grid-max: min(100%, 36rem); --qm-content-max: min(100%, 42rem); --qm-fs-body: clamp(0.9375rem, 2.4vw, 1rem); --qm-fs-small: clamp(0.78rem, 2vw, 0.875rem); --qm-fs-title: clamp(1rem, 2.8vw, 1.125rem); --qm-fs-price: clamp(0.95rem, 2.5vw, 1.0625rem); --qm-fs-hero: clamp(1.35rem, 4.5vw, 2rem); --qm-fs-h1: clamp(1.5rem, 5vw, 2.25rem); font-size: var(--qm-fs-body); /* Düz renk: gradyan katmanı public-app.css ::before (--qm-page-atmosphere) */ background-color: var(--qm-bg); } @media (min-width: 640px) { .public-qm { --qm-grid-max: min(100%, 48rem); } } @media (min-width: 768px) { .public-qm { --qm-grid-max: min(100%, 56rem); --qm-content-max: min(100%, 60rem); } } @media (min-width: 1200px) { .public-qm { --qm-grid-max: min(100%, 64rem); --qm-content-max: min(100%, 72rem); } } /* Varsayılan kart token’ları (card preset ile aynı taban) */ .public-qm { --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-body-color) 8%, var(--qm-border)); --qm-tile-border-hover: 1px solid color-mix(in srgb, var(--qm-primary) 24%, var(--qm-border)); --qm-chip-bg: color-mix(in srgb, var(--qm-card-bg) 88%, #fff); --qm-chip-border: 1px solid color-mix(in srgb, var(--qm-body-color) 12%, transparent); --qm-tile-bg: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 88%, #fff) 0%, var(--qm-card-bg) 42% ); --qm-tile-shadow: 0 1px 2px color-mix(in srgb, var(--qm-body-color) 5%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--qm-body-color) 9%, transparent); --qm-tile-shadow-hover: 0 8px 16px -4px color-mix(in srgb, var(--qm-primary) 14%, transparent), 0 22px 48px -12px color-mix(in srgb, var(--qm-body-color) 14%, transparent); --qm-hover-lift: -4px; --qm-hover-scale: 1; --qm-tile-backdrop: none; --qm-hero-shadow: 0 14px 38px -12px color-mix(in srgb, var(--qm-body-color) 12%, transparent); --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-primary) 14%, var(--qm-border)); --qm-hero-bg: radial-gradient(circle at top left, color-mix(in srgb, var(--qm-primary) 16%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)), var(--qm-card-bg)); /* Ürün detay + karşılama — preset ile birlikte güncellenir */ --qm-product-hero-bg: var(--qm-card-bg); --qm-product-hero-border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); --qm-product-hero-shadow: 0 18px 50px color-mix(in srgb, var(--qm-body-color) 10%, transparent); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-bg: color-mix(in srgb, var(--qm-primary) 8%, var(--qm-card-bg)); --qm-product-surface-border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, var(--qm-border)); --qm-product-surface-shadow: 0 10px 28px color-mix(in srgb, var(--qm-body-color) 8%, transparent); --qm-product-topbar-bg: color-mix(in srgb, var(--qm-card-bg) 94%, transparent); --qm-welcome-tile-bg: var(--qm-tile-bg); --qm-welcome-photo-shade: linear-gradient( 180deg, color-mix(in srgb, var(--qm-body-color) 10%, transparent) 0%, color-mix(in srgb, var(--qm-body-color) 58%, transparent) 100% ); --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 42%, var(--qm-body-color)); --qm-welcome-name-on-photo: #fff; --qm-welcome-pattern-opacity: 0.72; --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 38%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-secondary, var(--qm-primary)) 28%, transparent); --qm-welcome-accent: var(--qm-primary); --qm-welcome-link-weight: 600; } /* [PRESET: card] */ .public-qm.menu-layout-card { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 38%, var(--qm-body-color)); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 34%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-secondary) 22%, transparent); --qm-tile-border-hover: 1px solid color-mix(in srgb, var(--qm-primary) 24%, var(--qm-border)); --qm-product-hero-bg: linear-gradient(180deg, color-mix(in srgb, var(--qm-card-bg) 94%, #fff), var(--qm-card-bg)); --qm-product-hero-border: 1px solid color-mix(in srgb, var(--qm-body-color) 8%, var(--qm-border)); --qm-product-hero-shadow: 0 16px 40px -12px color-mix(in srgb, var(--qm-body-color) 13%, transparent); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-shadow: 0 8px 22px color-mix(in srgb, var(--qm-body-color) 9%, transparent); } /* [PRESET: list] */ .public-qm.menu-layout-list { --qm-welcome-name-color: var(--qm-body-color); --qm-welcome-tile-bg: var(--qm-card-bg); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 28%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-primary) 12%, transparent); --qm-product-hero-bg: var(--qm-card-bg); --qm-product-hero-shadow: 0 8px 24px -8px color-mix(in srgb, var(--qm-body-color) 12%, transparent); --qm-product-card-bg: var(--qm-card-bg); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-shadow: none; --qm-tile-border-hover: 1px solid color-mix(in srgb, var(--qm-primary) 30%, var(--qm-border)); --qm-grid-max: min(100%, 40rem); --qm-tile-bg: var(--qm-card-bg); --qm-tile-shadow: 0 4px 14px -4px color-mix(in srgb, var(--qm-body-color) 7%, transparent); --qm-tile-shadow-hover: 0 10px 28px -6px color-mix(in srgb, var(--qm-body-color) 12%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 12%, transparent); --qm-hover-lift: -2px; } @media (min-width: 768px) { .public-qm.menu-layout-list { --qm-grid-max: min(100%, 34rem); } } /* [PRESET: minimal] */ .public-qm.menu-layout-minimal { --qm-welcome-tile-bg: transparent; --qm-welcome-name-color: var(--qm-body-color); --qm-welcome-pattern-opacity: 0.45; --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 22%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-body-color) 8%, transparent); --qm-product-hero-bg: var(--qm-card-bg); --qm-product-hero-shadow: none; --qm-product-card-shadow: none; --qm-product-surface-shadow: none; --qm-product-surface-bg: transparent; --qm-tile-border-hover: 1px solid color-mix(in srgb, var(--qm-primary) 26%, var(--qm-border)); --qm-tile-bg: transparent; --qm-tile-shadow: none; --qm-tile-shadow-hover: 0 10px 28px -10px color-mix(in srgb, var(--qm-body-color) 8%, transparent); --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); --qm-hover-lift: -2px; --qm-hero-shadow: 0 6px 22px -8px color-mix(in srgb, var(--qm-body-color) 10%, transparent); --qm-hero-bg: var(--qm-card-bg); --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); } /* [PRESET: premium] */ .public-qm.menu-layout-premium { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 48%, var(--qm-body-color)); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 42%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-primary) 18%, transparent); --qm-welcome-pattern-opacity: 0.85; --qm-tile-border: none; --qm-tile-bg: radial-gradient( 120% 80% at 50% -10%, color-mix(in srgb, var(--qm-card-bg) 92%, #fff) 0%, var(--qm-card-bg) 55% ); --qm-tile-shadow: 0 2px 4px color-mix(in srgb, var(--qm-body-color) 4%, transparent), 0 16px 42px -10px color-mix(in srgb, var(--qm-body-color) 14%, transparent), 0 6px 18px -8px color-mix(in srgb, var(--qm-primary) 8%, transparent); --qm-tile-shadow-hover: 0 12px 28px -6px color-mix(in srgb, var(--qm-primary) 18%, transparent), 0 28px 56px -14px color-mix(in srgb, var(--qm-body-color) 18%, transparent); --qm-hover-lift: -5px; --qm-hero-shadow: 0 18px 44px -12px color-mix(in srgb, var(--qm-body-color) 16%, transparent); --qm-hero-bg: radial-gradient(ellipse 90% 70% at 50% -15%, color-mix(in srgb, var(--qm-primary) 14%, transparent), transparent 60%), linear-gradient(180deg, var(--qm-card-bg), color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary))); --qm-product-hero-bg: var(--qm-hero-bg); --qm-product-hero-border: none; --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-border: none; --qm-product-surface-shadow: 0 10px 28px color-mix(in srgb, var(--qm-body-color) 9%, transparent); } /* [PRESET: modern] */ .public-qm.menu-layout-modern { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 52%, var(--qm-body-color)); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 30%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-body-color) 10%, transparent); --qm-tile-bg: var(--qm-card-bg); --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-body-color) 9%, transparent); --qm-tile-shadow: 0 2px 4px color-mix(in srgb, var(--qm-body-color) 5%, transparent), 0 14px 36px -10px color-mix(in srgb, var(--qm-body-color) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 6%, transparent); --qm-tile-shadow-hover: 0 6px 14px -4px color-mix(in srgb, var(--qm-primary) 22%, transparent), 0 22px 44px -12px color-mix(in srgb, var(--qm-body-color) 16%, transparent), 0 0 0 2px color-mix(in srgb, var(--qm-primary) 18%, transparent); --qm-hover-lift: -4px; --qm-hover-scale: 1.008; --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, transparent); --qm-hero-shadow: 0 10px 28px -8px color-mix(in srgb, var(--qm-body-color) 18%, transparent), 0 0 0 1px color-mix(in srgb, var(--qm-primary) 8%, transparent); --qm-product-hero-bg: var(--qm-card-bg); --qm-product-hero-border: var(--qm-hero-border); --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, transparent); --qm-product-surface-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); } /* [PRESET: glass] */ .public-qm.menu-layout-glass { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 45%, var(--qm-body-color)); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 36%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-secondary, var(--qm-primary)) 24%, transparent); --qm-welcome-pattern-opacity: 0.9; --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); --qm-tile-bg: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 62%, #fff) 0%, color-mix(in srgb, var(--qm-card-bg) 78%, #fff) 100% ); --qm-tile-backdrop: saturate(175%) blur(18px); --qm-tile-shadow: 0 14px 40px color-mix(in srgb, var(--qm-body-color) 11%, transparent); --qm-tile-shadow-hover: 0 18px 48px color-mix(in srgb, var(--qm-primary) 16%, transparent); --qm-hover-lift: -3px; --qm-hero-bg: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--qm-primary) 12%, transparent), transparent 40%), linear-gradient(145deg, color-mix(in srgb, var(--qm-card-bg) 82%, #fff), var(--qm-card-bg)); --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); --qm-hero-shadow: 0 16px 42px color-mix(in srgb, var(--qm-body-color) 11%, transparent); --qm-product-hero-bg: linear-gradient(160deg, color-mix(in srgb, var(--qm-card-bg) 78%, #fff), var(--qm-card-bg)); --qm-product-hero-border: var(--qm-hero-border); --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-bg: color-mix(in srgb, var(--qm-card-bg) 86%, #fff); --qm-product-surface-border: 1px solid color-mix(in srgb, var(--qm-card-bg) 68%, #fff); --qm-product-topbar-bg: color-mix(in srgb, var(--qm-card-bg) 88%, #fff); --qm-product-surface-shadow: 0 12px 32px color-mix(in srgb, var(--qm-body-color) 10%, transparent); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .public-qm.menu-layout-glass { --qm-tile-backdrop: none; --qm-tile-bg: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); } } /* [PRESET: bold] */ .public-qm.menu-layout-bold { --qm-welcome-name-color: var(--qm-body-color); --qm-welcome-accent: var(--qm-primary); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 40%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-primary) 14%, transparent); --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-body-color) 10%, var(--qm-border)); --qm-tile-bg: linear-gradient( 90deg, var(--qm-primary) 0%, var(--qm-primary) 5px, var(--qm-card-bg) 5px, var(--qm-card-bg) 100% ); --qm-tile-shadow: 0 2px 6px color-mix(in srgb, var(--qm-primary) 15%, transparent), 0 12px 28px -8px color-mix(in srgb, var(--qm-body-color) 11%, transparent); --qm-tile-shadow-hover: 0 4px 14px color-mix(in srgb, var(--qm-primary) 28%, transparent), 0 18px 38px -10px color-mix(in srgb, var(--qm-body-color) 14%, transparent); --qm-hover-lift: -3px; --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-body-color) 11%, var(--qm-border)); --qm-hero-border-left: 5px solid var(--qm-primary); --qm-hero-bg: linear-gradient( 90deg, color-mix(in srgb, var(--qm-primary) 12%, transparent) 0%, var(--qm-card-bg) 36% ); --qm-hero-shadow: 0 12px 32px color-mix(in srgb, var(--qm-primary) 18%, transparent); --qm-product-hero-bg: var(--qm-card-bg); --qm-product-hero-border: var(--qm-hero-border); --qm-product-hero-border-left: 6px solid var(--qm-primary); --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-surface-border: 2px solid color-mix(in srgb, var(--qm-primary) 28%, transparent); --qm-product-surface-shadow: 0 8px 24px color-mix(in srgb, var(--qm-primary) 14%, transparent); } /* [PRESET: soft] */ .public-qm.menu-layout-soft { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 55%, var(--qm-body-color)); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 44%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-primary) 26%, transparent); --qm-welcome-pattern-opacity: 0.88; --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-primary) 18%, var(--qm-border)); --qm-tile-bg: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)) 0%, var(--qm-card-bg) 55% ); --qm-tile-shadow: 0 2px 8px color-mix(in srgb, var(--qm-primary) 12%, transparent), 0 18px 46px -12px color-mix(in srgb, var(--qm-primary) 26%, transparent); --qm-tile-shadow-hover: 0 6px 18px color-mix(in srgb, var(--qm-primary) 22%, transparent), 0 26px 52px -14px color-mix(in srgb, var(--qm-primary) 34%, transparent); --qm-hover-lift: -4px; --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, var(--qm-border)); --qm-hero-shadow: 0 8px 28px color-mix(in srgb, var(--qm-primary) 22%, transparent), 0 18px 44px color-mix(in srgb, var(--qm-primary) 16%, transparent); --qm-hero-bg: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), var(--qm-card-bg) ); --qm-product-hero-bg: linear-gradient(180deg, color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)), var(--qm-card-bg)); --qm-product-hero-border: var(--qm-hero-border); --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-shadow: 0 12px 32px color-mix(in srgb, var(--qm-primary) 18%, transparent); } /* [PRESET: neon] — cyber glow */ .public-qm.menu-layout-neon { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 72%, #e8f4ff); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 55%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-secondary, var(--qm-primary)) 35%, transparent); --qm-welcome-pattern-opacity: 1; --qm-chip-bg: color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)); --qm-chip-border: 1px solid color-mix(in srgb, var(--qm-primary) 42%, transparent); --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-primary) 45%, var(--qm-border)); --qm-tile-border-hover: 1px solid color-mix(in srgb, var(--qm-primary) 75%, transparent); --qm-tile-bg: linear-gradient( 165deg, color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)) 0%, color-mix(in srgb, var(--qm-card-bg) 96%, #0a0f1a) 100% ); --qm-tile-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 22%, transparent), 0 0 28px color-mix(in srgb, var(--qm-primary) 28%, transparent), 0 12px 32px -8px color-mix(in srgb, var(--qm-body-color) 20%, transparent); --qm-tile-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 55%, transparent), 0 0 40px color-mix(in srgb, var(--qm-primary) 42%, transparent), 0 18px 42px -10px color-mix(in srgb, var(--qm-primary) 25%, transparent); --qm-hover-lift: -3px; --qm-hover-scale: 1.01; --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-primary) 40%, var(--qm-border)); --qm-hero-bg: linear-gradient( 135deg, color-mix(in srgb, var(--qm-primary) 18%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-card-bg) 94%, #0a0f1a) ); --qm-hero-shadow: 0 0 32px color-mix(in srgb, var(--qm-primary) 32%, transparent), 0 14px 38px -10px color-mix(in srgb, var(--qm-body-color) 18%, transparent); --qm-product-hero-bg: linear-gradient(165deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 96%, #0a0f1a)); --qm-product-hero-border: var(--qm-hero-border); --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-bg: color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)); --qm-product-surface-border: 1px solid color-mix(in srgb, var(--qm-primary) 40%, transparent); --qm-product-surface-shadow: 0 0 22px color-mix(in srgb, var(--qm-primary) 22%, transparent); --qm-welcome-photo-shade: linear-gradient(180deg, transparent 0%, color-mix(in srgb, #0a0f1a 75%, transparent) 100%); } /* [PRESET: aurora] */ .public-qm.menu-layout-aurora { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 40%, var(--qm-body-color)); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 48%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-secondary) 42%, transparent); --qm-welcome-pattern-opacity: 0.95; --qm-chip-bg: linear-gradient( 135deg, color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-secondary)) ); --qm-chip-border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, var(--qm-secondary)); --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-primary) 16%, var(--qm-border)); --qm-tile-border-hover: 1px solid color-mix(in srgb, var(--qm-secondary) 28%, var(--qm-border)); --qm-tile-bg: linear-gradient( 145deg, color-mix(in srgb, var(--qm-card-bg) 88%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-secondary)) ); --qm-tile-shadow: 0 8px 32px color-mix(in srgb, var(--qm-primary) 18%, transparent), 0 20px 48px -12px color-mix(in srgb, var(--qm-secondary) 14%, transparent); --qm-tile-shadow-hover: 0 12px 36px color-mix(in srgb, var(--qm-primary) 26%, transparent), 0 28px 56px -14px color-mix(in srgb, var(--qm-secondary) 22%, transparent); --qm-hover-lift: -4px; --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-primary) 20%, transparent); --qm-hero-bg: linear-gradient( 125deg, color-mix(in srgb, var(--qm-primary) 14%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 10%, var(--qm-card-bg)) 45%, var(--qm-card-bg) ); --qm-hero-shadow: 0 20px 50px color-mix(in srgb, var(--qm-primary) 20%, transparent); --qm-product-hero-bg: linear-gradient(145deg, color-mix(in srgb, var(--qm-card-bg) 90%, var(--qm-primary)), color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-secondary))); --qm-product-hero-border: var(--qm-hero-border); --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-bg: linear-gradient(145deg, color-mix(in srgb, var(--qm-primary) 12%, var(--qm-card-bg)), color-mix(in srgb, var(--qm-secondary) 10%, var(--qm-card-bg))); --qm-product-surface-border: 1px solid color-mix(in srgb, var(--qm-primary) 22%, transparent); --qm-product-surface-shadow: 0 12px 32px color-mix(in srgb, var(--qm-primary) 14%, transparent); --qm-welcome-photo-shade: linear-gradient( 125deg, color-mix(in srgb, var(--qm-primary) 35%, transparent), color-mix(in srgb, var(--qm-secondary) 40%, transparent) ); } /* [PRESET: nexus] */ .public-qm.menu-layout-nexus { --qm-welcome-name-color: color-mix(in srgb, var(--qm-primary) 58%, var(--qm-body-color)); --qm-welcome-pattern-a: color-mix(in srgb, var(--qm-primary) 32%, transparent); --qm-welcome-pattern-b: color-mix(in srgb, var(--qm-primary) 16%, transparent); --qm-welcome-pattern-opacity: 0.65; --qm-chip-bg: color-mix(in srgb, var(--qm-card-bg) 86%, var(--qm-primary)); --qm-chip-border: 1px solid color-mix(in srgb, var(--qm-primary) 28%, var(--qm-border)); --qm-tile-border: 1px solid color-mix(in srgb, var(--qm-primary) 24%, var(--qm-border)); --qm-tile-border-hover: 1px solid color-mix(in srgb, var(--qm-primary) 42%, transparent); --qm-tile-bg: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); --qm-tile-backdrop: saturate(160%) blur(10px); --qm-tile-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 12%, transparent), 0 10px 28px color-mix(in srgb, var(--qm-body-color) 12%, transparent); --qm-tile-shadow-hover: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 28%, transparent), 0 16px 36px color-mix(in srgb, var(--qm-primary) 18%, transparent); --qm-hover-lift: -2px; --qm-hero-border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, var(--qm-border)); --qm-hero-bg: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); --qm-hero-shadow: 0 12px 34px color-mix(in srgb, var(--qm-primary) 16%, transparent); --qm-product-hero-bg: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); --qm-product-hero-border: var(--qm-hero-border); --qm-product-hero-shadow: var(--qm-hero-shadow); --qm-product-card-bg: var(--qm-tile-bg); --qm-product-card-border: var(--qm-tile-border); --qm-product-card-shadow: var(--qm-tile-shadow); --qm-product-surface-bg: color-mix(in srgb, var(--qm-card-bg) 94%, var(--qm-primary)); --qm-product-surface-border: 1px solid color-mix(in srgb, var(--qm-primary) 26%, var(--qm-border)); --qm-product-surface-shadow: 0 0 0 1px color-mix(in srgb, var(--qm-primary) 10%, transparent); --qm-product-topbar-bg: color-mix(in srgb, var(--qm-card-bg) 92%, var(--qm-primary)); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .public-qm.menu-layout-nexus { --qm-tile-backdrop: none; } }