/* Kilomatik v33 - Theme system (10 themes) Apply with: ... Also supports nested previews:
... */ :root{ --km-radius-card: 1.05rem; --km-radius-input: .95rem; --km-bg-page: #f8f9fa; --km-bg-decor: none; --km-card-bg: rgba(255,255,255,.96); --km-card-border: rgba(0,0,0,.08); --km-shadow-card: 0 14px 34px rgba(0,0,0,.08); --km-input-bg: rgba(255,255,255,.92); --km-input-text: inherit; --km-input-border: rgba(0,0,0,.14); --km-nav-bg: linear-gradient(90deg,#111827,#111827); --km-nav-text: rgba(255,255,255,.92); --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(13,110,253,.15), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(25,135,84,.12), transparent 60%); --km-link-color: var(--bs-primary, #0d6efd); } /* Base surfaces */ html{ background: var(--km-bg-page); } .km-body{ min-height: 100vh; background: var(--km-bg-page) !important; color: var(--bs-body-color, #212529); position: relative; } .km-body::before{ content:""; position: fixed; inset: 0; background: var(--km-bg-decor); pointer-events: none; z-index: 0; } /* Important: do NOT override Bootstrap modal/backdrop stacking/positioning */ .km-body > :not(.modal):not(.modal-backdrop):not(script):not(style){ position: relative; z-index: 1; } /* Navbar */ .km-navbar{ background: var(--km-nav-bg) !important; border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: 0 12px 28px rgba(0,0,0,.14); } /* v40 FIX: Keep dropdown menus above hero/sections (km-body children have z-index:1). Raise navbar stacking context so dropdown isn't covered by content below. */ .km-navbar{ position: relative; z-index: 2000 !important; } .km-navbar .dropdown-menu{ z-index: 2010 !important; } .km-navbar .navbar-brand, .km-navbar .nav-link, .km-navbar .navbar-text{ color: var(--km-nav-text) !important; } .km-navbar .nav-link{ opacity: .92; } .km-navbar .nav-link:hover{ opacity: 1; } /* Cards, modals, dropdowns */ .card, .modal-content, .dropdown-menu{ background: var(--km-card-bg) !important; border-color: var(--km-card-border) !important; box-shadow: var(--km-shadow-card); } .card{ border-radius: var(--km-radius-card) !important; } .btn, .form-control, .form-select, .input-group-text, .modal-content{ border-radius: var(--km-radius-input) !important; } .form-control, .form-select{ background: var(--km-input-bg) !important; color: var(--km-input-text) !important; border-color: var(--km-input-border) !important; } .form-control::placeholder{ color: rgba(108,117,125,.85); } /* Links */ a{ color: var(--km-link-color); } /* Small helpers */ .km-glass{ backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Theme preview boxes (admin & user) */ .km-theme-card{ border-radius: 1.25rem; overflow: hidden; border: 1px solid var(--km-card-border); } .km-theme-card .km-theme-top{ padding: .85rem 1rem; background: var(--km-nav-bg); color: var(--km-nav-text); } .km-theme-card .km-theme-body{ padding: 1rem; } .km-theme-sample{ display: flex; gap: .6rem; align-items: center; } .km-theme-sample .dot{ width: 14px; height: 14px; border-radius: 99px; background: var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb,13,110,253), .18); } /* ============================== THEMES (10) ============================== */ /* 1) Default (Classic) */ [data-km-theme="t1-default"]{ color-scheme: light; --bs-body-bg: #f8f9fa; --bs-body-color: #212529; --bs-primary: #0d6efd; --bs-primary-rgb: 13,110,253; --km-bg-page: #f6f7fb; --km-bg-decor: radial-gradient(900px 520px at 12% 12%, rgba(13,110,253,.14), transparent 60%), radial-gradient(820px 520px at 88% 0%, rgba(25,135,84,.11), transparent 60%); --km-card-bg: rgba(255,255,255,.96); --km-nav-bg: linear-gradient(90deg,#111827,#111827); --km-nav-text: rgba(255,255,255,.92); --km-link-color: #0d6efd; } /* 2) Modern */ [data-km-theme="t2-modern"]{ color-scheme: light; --bs-body-bg: #f4f5ff; --bs-body-color: #111827; --bs-primary: #6f42c1; --bs-primary-rgb: 111,66,193; --km-bg-page: #f4f5ff; --km-bg-decor: radial-gradient(1000px 600px at 15% 0%, rgba(111,66,193,.18), transparent 60%), radial-gradient(900px 520px at 85% 10%, rgba(13,110,253,.14), transparent 60%); --km-card-bg: rgba(255,255,255,.78); --km-card-border: rgba(17,24,39,.10); --km-shadow-card: 0 18px 44px rgba(17,24,39,.10); --km-input-bg: rgba(255,255,255,.75); --km-nav-bg: linear-gradient(90deg,#6f42c1,#0d6efd); --km-nav-text: rgba(255,255,255,.94); --km-link-color: #6f42c1; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(111,66,193,.22), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(13,110,253,.16), transparent 60%); } /* 3) Colorful */ [data-km-theme="t3-colorful"]{ color-scheme: light; --bs-body-bg: #fff7fb; --bs-body-color: #1f2937; --bs-primary: #ff3d71; --bs-primary-rgb: 255,61,113; --km-bg-page: #fff7fb; --km-bg-decor: radial-gradient(900px 520px at 10% 10%, rgba(255,61,113,.18), transparent 60%), radial-gradient(920px 560px at 90% 0%, rgba(32,201,151,.14), transparent 60%), radial-gradient(900px 520px at 50% 100%, rgba(253,126,20,.12), transparent 60%); --km-card-bg: rgba(255,255,255,.80); --km-shadow-card: 0 18px 44px rgba(0,0,0,.10); --km-input-bg: rgba(255,255,255,.84); --km-nav-bg: linear-gradient(90deg,#ff3d71,#845ef7,#20c997); --km-nav-text: rgba(255,255,255,.96); --km-link-color: #ff3d71; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(255,61,113,.22), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(132,94,247,.18), transparent 60%), radial-gradient(900px 520px at 55% 100%, rgba(32,201,151,.14), transparent 60%); } /* 4) Visual */ [data-km-theme="t4-visual"]{ color-scheme: light; --bs-body-bg: #f2fff9; --bs-body-color: #0b1f16; --bs-primary: #20c997; --bs-primary-rgb: 32,201,151; --km-bg-page: #f2fff9; --km-bg-decor: radial-gradient(900px 520px at 10% 0%, rgba(32,201,151,.18), transparent 60%), radial-gradient(900px 520px at 90% 10%, rgba(13,202,240,.16), transparent 60%), repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 18px), repeating-linear-gradient(0deg, rgba(0,0,0,.03) 0 1px, transparent 1px 18px); --km-card-bg: rgba(255,255,255,.82); --km-card-border: rgba(11,31,22,.10); --km-nav-bg: linear-gradient(90deg,#0ca678,#20c997); --km-nav-text: rgba(255,255,255,.95); --km-link-color: #0ca678; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(32,201,151,.20), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(13,202,240,.16), transparent 60%); } /* 5) Muhteşem */ [data-km-theme="t5-muhtesem"]{ color-scheme: dark; --bs-body-bg: #0b1020; --bs-body-color: #e9ecef; --bs-primary: #f59f00; --bs-primary-rgb: 245,159,0; --km-bg-page: #0b1020; --km-bg-decor: radial-gradient(1100px 700px at 15% 0%, rgba(245,159,0,.16), transparent 60%), radial-gradient(1000px 650px at 90% 10%, rgba(21,170,191,.16), transparent 60%), radial-gradient(900px 520px at 50% 100%, rgba(111,66,193,.14), transparent 60%); --km-card-bg: rgba(20,26,44,.72); --km-card-border: rgba(255,255,255,.10); --km-shadow-card: 0 22px 60px rgba(0,0,0,.55); --km-input-bg: rgba(20,26,44,.70); --km-input-text: #e9ecef; --km-input-border: rgba(255,255,255,.18); --km-nav-bg: linear-gradient(90deg,#0b1020,#1b0f2e); --km-nav-text: rgba(255,255,255,.94); --km-link-color: #f59f00; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(245,159,0,.18), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(21,170,191,.16), transparent 60%); } /* 6) Ocean */ [data-km-theme="t6-ocean"]{ color-scheme: light; --bs-body-bg: #f1fbff; --bs-body-color: #0b2230; --bs-primary: #0dcaf0; --bs-primary-rgb: 13,202,240; --km-bg-page: #f1fbff; --km-bg-decor: radial-gradient(1100px 700px at 10% 0%, rgba(13,202,240,.18), transparent 60%), radial-gradient(950px 580px at 95% 15%, rgba(32,201,151,.14), transparent 60%), repeating-linear-gradient(135deg, rgba(13,202,240,.08) 0 2px, transparent 2px 16px); --km-card-bg: rgba(255,255,255,.84); --km-card-border: rgba(11,34,48,.10); --km-nav-bg: linear-gradient(90deg,#0dcaf0,#0d6efd); --km-nav-text: rgba(255,255,255,.96); --km-link-color: #0aa2c0; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(13,202,240,.20), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(13,110,253,.14), transparent 60%); } /* 7) Sunset */ [data-km-theme="t7-sunset"]{ color-scheme: light; --bs-body-bg: #fff4f0; --bs-body-color: #2b1b18; --bs-primary: #fd7e14; --bs-primary-rgb: 253,126,20; --km-bg-page: #fff4f0; --km-bg-decor: radial-gradient(1000px 620px at 15% 0%, rgba(253,126,20,.18), transparent 60%), radial-gradient(900px 560px at 85% 10%, rgba(255,61,113,.16), transparent 60%); --km-card-bg: rgba(255,255,255,.82); --km-nav-bg: linear-gradient(90deg,#fd7e14,#ff3d71); --km-nav-text: rgba(255,255,255,.96); --km-link-color: #fd7e14; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(253,126,20,.22), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(255,61,113,.16), transparent 60%); } /* 8) Forest */ [data-km-theme="t8-forest"]{ color-scheme: light; --bs-body-bg: #f4fff8; --bs-body-color: #0f2418; --bs-primary: #198754; --bs-primary-rgb: 25,135,84; --km-bg-page: #f4fff8; --km-bg-decor: radial-gradient(1000px 640px at 12% 0%, rgba(25,135,84,.18), transparent 60%), radial-gradient(900px 560px at 88% 10%, rgba(32,201,151,.14), transparent 60%), repeating-linear-gradient(0deg, rgba(25,135,84,.06) 0 1px, transparent 1px 16px); --km-card-bg: rgba(255,255,255,.84); --km-nav-bg: linear-gradient(90deg,#145a32,#198754); --km-nav-text: rgba(255,255,255,.95); --km-link-color: #145a32; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(25,135,84,.20), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(32,201,151,.14), transparent 60%); } /* 9) Minimal */ [data-km-theme="t9-minimal"]{ color-scheme: light; --bs-body-bg: #ffffff; --bs-body-color: #111827; --bs-primary: #343a40; --bs-primary-rgb: 52,58,64; --km-bg-page: #ffffff; --km-bg-decor: radial-gradient(900px 520px at 10% 0%, rgba(52,58,64,.06), transparent 60%); --km-card-bg: rgba(255,255,255,.96); --km-card-border: rgba(17,24,39,.10); --km-shadow-card: 0 14px 28px rgba(17,24,39,.08); --km-input-bg: rgba(255,255,255,.96); --km-nav-bg: linear-gradient(90deg,#111827,#343a40); --km-nav-text: rgba(255,255,255,.95); --km-link-color: #111827; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(17,24,39,.10), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(52,58,64,.08), transparent 60%); } /* 10) Midnight */ [data-km-theme="t10-midnight"]{ color-scheme: dark; --bs-body-bg: #070a14; --bs-body-color: #e9ecef; --bs-primary: #15aabf; --bs-primary-rgb: 21,170,191; --km-bg-page: #070a14; --km-bg-decor: radial-gradient(1100px 700px at 10% 0%, rgba(21,170,191,.18), transparent 60%), radial-gradient(1000px 650px at 90% 10%, rgba(111,66,193,.16), transparent 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 18px); --km-card-bg: rgba(16,20,36,.74); --km-card-border: rgba(255,255,255,.12); --km-shadow-card: 0 22px 60px rgba(0,0,0,.55); --km-input-bg: rgba(16,20,36,.72); --km-input-text: #e9ecef; --km-input-border: rgba(255,255,255,.18); --km-nav-bg: linear-gradient(90deg,#070a14,#0b1020); --km-nav-text: rgba(255,255,255,.94); --km-link-color: #15aabf; --km-hero-bg: radial-gradient(1200px 600px at 10% 10%, rgba(21,170,191,.18), transparent 60%), radial-gradient(1000px 500px at 90% 0%, rgba(111,66,193,.16), transparent 60%); }