/* ===================================================================== Cookaro — FUTURISTIC SCI-FI design layer (design-only, additive) A premium, dark cinematic neon theme. Everything is scoped under `body.ck-futuristic` so it overrides the existing warm theme and the Bootstrap palette WITHOUT any markup / logic / routing changes. Loaded on every landing page via partials/_head.blade.php ===================================================================== */ /* --------------------------------------------------------------------- 0. Palette + Bootstrap variable remap (cascades through everything) --------------------------------------------------------------------- */ body.ck-futuristic { /* Core neon palette */ --ckf-bg: #05060f; --ckf-bg-2: #0a0e23; --ckf-surface: rgba(16, 22, 48, 0.55); --ckf-surface-2: rgba(10, 14, 35, 0.72); --ckf-glass: rgba(255, 255, 255, 0.045); --ckf-glass-2: rgba(255, 255, 255, 0.07); --ckf-border: rgba(120, 160, 255, 0.16); --ckf-border-hi: rgba(var(--bs-primary-rgb), 0.55); /* Primary neon accent follows the configured brand `primaryColor` (--bs-primary), falling back to neon cyan when none is set. The blue and purple stay fixed as the sci-fi secondary/ambient tones. */ --ckf-cyan: var(--bs-primary, #22d3ee); --ckf-cyan-hi: color-mix(in srgb, var(--bs-primary, #22d3ee) 55%, #ffffff); --ckf-blue: #3b82f6; --ckf-purple: #a855f7; --ckf-pink: #ec4899; --ckf-text: #e8edff; --ckf-muted: #95a3c9; --ckf-faint: #5f6c91; --ckf-glow-cyan: 0 0 24px rgba(var(--bs-primary-rgb), .45); --ckf-glow-purple: 0 0 28px rgba(168, 85, 247, .40); --ckf-grad: linear-gradient(120deg, var(--bs-primary, #22d3ee), var(--ckf-blue) 50%, var(--ckf-purple)); --ckf-grad-soft: linear-gradient(120deg, rgba(var(--bs-primary-rgb),.18), rgba(59,130,246,.14) 50%, rgba(168,85,247,.18)); /* Mode-flippable surface tokens (light palette overrides these below) */ --ckf-input-bg: rgba(7, 10, 28, 0.6); --ckf-nav-bg: rgba(7, 10, 28, 0.62); --ckf-grid: rgba(120, 160, 255, 0.04); --ckf-page-bg: radial-gradient(1100px 720px at 12% -8%, rgba(59, 130, 246, .22), transparent 60%), radial-gradient(1000px 760px at 92% 4%, rgba(168, 85, 247, .20), transparent 58%), radial-gradient(900px 700px at 50% 118%, rgba(var(--bs-primary-rgb), .16), transparent 60%), linear-gradient(180deg, #05060f 0%, #070a1c 45%, #05060f 100%); --ckf-panel-light: linear-gradient(180deg, rgba(12,18,42,.6), rgba(7,10,28,.6)); /* Map Bootstrap tokens so the entire existing UI shifts to sci-fi. We deliberately DO NOT override --bs-primary / --bs-primary-rgb here: they carry the configured brand `primaryColor` (set inline on , defaulted to neon cyan by the layout when none is saved), so the whole neon accent system above is driven by the brand colour. */ --bs-body-bg: #05060f; --bs-body-color: #e8edff; --bs-secondary-color: #95a3c9; --bs-emphasis-color: #ffffff; --bs-border-color: rgba(120, 160, 255, 0.16); --bs-link-color: var(--ckf-cyan-hi); --bs-link-hover-color: #a855f7; --bs-body-bg-rgb: 5, 6, 15; --ck-primary: var(--bs-primary, #22d3ee); color: var(--ckf-text); background-color: var(--ckf-bg); } /* --------------------------------------------------------------------- 0b. LIGHT futuristic palette — flips on data-bs-theme="light". Same neon language on a bright, frosted-glass canvas. Makes the light/dark toggle a real, polished switch on every page. --------------------------------------------------------------------- */ html[data-bs-theme="light"] body.ck-futuristic { --ckf-bg: #eaf0fb; --ckf-bg-2: #dde6f7; --ckf-surface: rgba(255, 255, 255, 0.72); --ckf-surface-2: rgba(255, 255, 255, 0.86); --ckf-glass: rgba(255, 255, 255, 0.6); --ckf-glass-2: rgba(255, 255, 255, 0.78); --ckf-border: rgba(40, 90, 190, 0.16); --ckf-border-hi: rgba(var(--bs-primary-rgb), 0.55); --ckf-cyan: var(--bs-primary, #0891b2); --ckf-cyan-hi: color-mix(in srgb, var(--bs-primary, #0891b2) 78%, #001018); --ckf-blue: #2563eb; --ckf-purple: #7c3aed; --ckf-text: #0f1734; --ckf-muted: #44537e; --ckf-faint: #8893b5; --ckf-glow-cyan: 0 0 22px rgba(var(--bs-primary-rgb), .28); --ckf-glow-purple: 0 0 24px rgba(124, 58, 237, .22); --bs-body-bg: #eaf0fb; --bs-body-color: #0f1734; --bs-secondary-color: #44537e; --bs-emphasis-color: #05060f; --bs-border-color: rgba(40, 90, 190, 0.16); /* --bs-primary / --bs-primary-rgb intentionally inherit the brand colour */ --bs-link-color: var(--ckf-cyan-hi); --bs-link-hover-color: #7c3aed; --bs-body-bg-rgb: 234, 240, 251; --ck-primary: var(--bs-primary, #0891b2); --ckf-input-bg: rgba(255, 255, 255, 0.85); --ckf-nav-bg: rgba(255, 255, 255, 0.72); --ckf-grid: rgba(40, 90, 190, 0.05); --ckf-page-bg: radial-gradient(1100px 720px at 12% -8%, rgba(37, 99, 235, .12), transparent 60%), radial-gradient(1000px 760px at 92% 4%, rgba(124, 58, 237, .10), transparent 58%), radial-gradient(900px 700px at 50% 118%, rgba(8, 145, 178, .10), transparent 60%), linear-gradient(180deg, #eef3fc 0%, #e3ebf8 45%, #eef3fc 100%); --ckf-panel-light: linear-gradient(180deg, rgba(255,255,255,.7), rgba(238,243,252,.7)); } /* --------------------------------------------------------------------- 1. Cinematic page backdrop (mode-aware via --ckf-page-bg) --------------------------------------------------------------------- */ body.ck-futuristic, body.ck-futuristic.body-bg, body.ck-futuristic.dark { background: var(--ckf-page-bg) !important; background-attachment: fixed !important; color: var(--ckf-text); } /* Full-viewport particle / constellation canvas injected by JS */ #ckf-particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .9; } /* Subtle holographic grid veil for the "AI OS" feel — fixed layer that sits behind all real content (which is lifted to z-index:1 below). */ body.ck-futuristic::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--ckf-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ckf-grid) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(circle at 50% 28%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(circle at 50% 28%, #000 0%, transparent 78%); } /* Keep real content above the backdrop layers */ body.ck-futuristic .main-content, body.ck-futuristic .footer, body.ck-futuristic #loading, body.ck-futuristic .screen-darken { position: relative; z-index: 1; } /* Recolour the existing decorative hero blobs into neon nebulae */ body.ck-futuristic .ck-blob-1 { background: radial-gradient(circle, var(--ckf-cyan), transparent 70%) !important; opacity: .35 !important; filter: blur(80px); } body.ck-futuristic .ck-blob-2 { background: radial-gradient(circle, var(--ckf-purple), transparent 70%) !important; opacity: .30 !important; filter: blur(90px); } /* --------------------------------------------------------------------- 2. Typography — neon gradient headings + readable body --------------------------------------------------------------------- */ body.ck-futuristic h1, body.ck-futuristic h2, body.ck-futuristic h3, body.ck-futuristic h4, body.ck-futuristic h5, body.ck-futuristic h6 { color: var(--ckf-text); } body.ck-futuristic .text-body, body.ck-futuristic .text-body-secondary { color: var(--ckf-muted) !important; } body.ck-futuristic p { color: var(--ckf-muted); } body.ck-futuristic .cookaro-home .ck-hero-title, body.ck-futuristic .iq-title-box h1, body.ck-futuristic .iq-title-box h2 { /* Theme-aware: near-white on the dark theme, dark ink on the light theme so section titles stay readable on the light page background. */ color: var(--ckf-text); letter-spacing: .2px; } /* Hero headline → animated holographic gradient text */ body.ck-futuristic .cookaro-home .ck-hero-title { background: linear-gradient(110deg, #ffffff 0%, var(--ckf-cyan-hi) 30%, var(--ckf-blue) 55%, var(--ckf-purple) 80%, #ffffff 100%); background-size: 280% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ckf-textshine 9s linear infinite; text-shadow: 0 0 42px rgba(var(--bs-primary-rgb), .18); } @keyframes ckf-textshine { to { background-position: 280% center; } } /* Light theme: swap the white gradient endpoints for dark ink so the holographic hero headline stays visible on the bright background. */ html[data-bs-theme="light"] body.ck-futuristic .cookaro-home .ck-hero-title { background: linear-gradient(110deg, #0f1734 0%, var(--ckf-cyan-hi) 30%, var(--ckf-blue) 55%, var(--ckf-purple) 80%, #0f1734 100%); background-size: 280% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* The hand-drawn underline swoosh → neon stroke */ body.ck-futuristic .highlighted-image svg path { stroke: var(--ckf-cyan); filter: drop-shadow(0 0 6px rgba(var(--bs-primary-rgb),.8)); } /* --------------------------------------------------------------------- 3. Glassmorphism navigation (header) --------------------------------------------------------------------- */ body.ck-futuristic header .top-header, body.ck-futuristic header .top-header.bg-primary { background: linear-gradient(90deg, rgba(var(--bs-primary-rgb),.12), rgba(168,85,247,.12)) !important; border-bottom: 1px solid var(--ckf-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.ck-futuristic header .top-header a, body.ck-futuristic header .top-header span { color: #d6e2ff !important; } body.ck-futuristic header .iq-navbar { background: var(--ckf-nav-bg) !important; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--ckf-border); box-shadow: 0 8px 40px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255,255,255,.04); } body.ck-futuristic .iq-nav-menu .nav-link { color: #cdd8f7; } body.ck-futuristic .iq-nav-menu .nav-link::after { background: var(--ckf-grad); box-shadow: var(--ckf-glow-cyan); } body.ck-futuristic .iq-nav-menu .nav-link:hover, body.ck-futuristic .iq-nav-menu .nav-link.active { color: var(--ckf-cyan-hi); } body.ck-futuristic header .iq-navbar .dropdown-menu, body.ck-futuristic header .user-dropdown-menu { background: var(--ckf-surface-2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--ckf-border); box-shadow: 0 20px 50px rgba(0,0,0,.6), var(--ckf-glow-cyan); } body.ck-futuristic .dropdown-item { color: #cdd8f7; } body.ck-futuristic .dropdown-item:hover { background: rgba(var(--bs-primary-rgb), .12); color: var(--ckf-cyan-hi); } body.ck-futuristic header .navbar-nav .theme-scheme-dropdown .nav-link, body.ck-futuristic header .navbar-nav #wishlist { border: 1px solid var(--ckf-border); color: #cdd8f7; } body.ck-futuristic header .navbar-nav .theme-scheme-dropdown .nav-link:hover, body.ck-futuristic header .navbar-nav #wishlist:hover { background: rgba(var(--bs-primary-rgb), .12); color: var(--ckf-cyan-hi); box-shadow: var(--ckf-glow-cyan); } body.ck-futuristic header .user-dropdown .avatar-50 { border-color: var(--ckf-border-hi); box-shadow: var(--ckf-glow-cyan); } /* --------------------------------------------------------------------- 4. Buttons — neon energy --------------------------------------------------------------------- */ body.ck-futuristic .btn-primary, body.ck-futuristic .btn.bg-primary, body.ck-futuristic .bg-primary.rounded-3 { background: var(--ckf-grad) !important; border: 0 !important; color: #04121a !important; font-weight: 700; box-shadow: 0 8px 30px rgba(var(--bs-primary-rgb), .28); } body.ck-futuristic .btn-primary:hover, body.ck-futuristic .btn.bg-primary:hover { color: #04121a !important; transform: translateY(-2px); box-shadow: 0 14px 40px rgba(var(--bs-primary-rgb), .5), var(--ckf-glow-purple); filter: brightness(1.08); } body.ck-futuristic .btn-outline-primary { color: var(--ckf-cyan-hi); border: 1.5px solid var(--ckf-border-hi); background: rgba(var(--bs-primary-rgb), .05); } body.ck-futuristic .btn-outline-primary:hover { background: var(--ckf-grad); border-color: transparent; color: #04121a; box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb), .45); } body.ck-futuristic .btn-link, body.ck-futuristic a.btn-link { color: var(--ckf-cyan-hi); } body.ck-futuristic .btn-link:hover { color: var(--ckf-purple); } /* Light buttons inside the dark CTA bands */ body.ck-futuristic .cookaro-home .ck-btn-light { background: var(--ckf-grad); color: #04121a; border: 0; box-shadow: 0 10px 30px rgba(var(--bs-primary-rgb),.4); } body.ck-futuristic .cookaro-home .ck-btn-light:hover { color: #04121a; filter: brightness(1.08); transform: translateY(-2px); } body.ck-futuristic .cookaro-home .ck-btn-ghost-light { border: 1.5px solid rgba(var(--bs-primary-rgb), .55); color: var(--ckf-cyan-hi); background: rgba(var(--bs-primary-rgb), .06); } body.ck-futuristic .cookaro-home .ck-btn-ghost-light:hover { background: rgba(var(--bs-primary-rgb), .14); color: #fff; } /* --------------------------------------------------------------------- 5. Pills, chips, tags — holographic --------------------------------------------------------------------- */ body.ck-futuristic .cookaro-home .ck-pill, body.ck-futuristic .ck-page-hero .ck-page-pill { background: rgba(var(--bs-primary-rgb), .10); border: 1px solid var(--ckf-border-hi); color: var(--ckf-cyan-hi); box-shadow: inset 0 0 18px rgba(var(--bs-primary-rgb), .12); } body.ck-futuristic .cookaro-home .ck-pill-light { background: rgba(168,85,247,.16); border-color: rgba(168,85,247,.5); color: #e9d5ff; } body.ck-futuristic .cookaro-home .ck-trust-chip { background: var(--ckf-glass); border: 1px solid var(--ckf-border); color: #cdd8f7; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.ck-futuristic .cookaro-home .ck-trust-chip:hover { border-color: var(--ckf-border-hi); box-shadow: var(--ckf-glow-cyan); transform: translateY(-2px); } /* --------------------------------------------------------------------- 6. Floating glass cards with glow (steps, mini-cards, features, dishes) --------------------------------------------------------------------- */ body.ck-futuristic .cookaro-home .ck-step, body.ck-futuristic .cookaro-home .ck-mini-card, body.ck-futuristic .cookaro-home .ck-feature-item, body.ck-futuristic .ck-content-card, body.ck-futuristic .cookaro-home .our-service .service-box-card, body.ck-futuristic .card, body.ck-futuristic .iq-card { background: var(--ckf-surface) !important; border: 1px solid var(--ckf-border) !important; backdrop-filter: blur(16px) saturate(130%); -webkit-backdrop-filter: blur(16px) saturate(130%); box-shadow: 0 16px 44px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .05); position: relative; overflow: hidden; } /* Animated neon top-edge that lights up on hover */ body.ck-futuristic .cookaro-home .ck-step::before, body.ck-futuristic .cookaro-home .ck-mini-card::before, body.ck-futuristic .cookaro-home .our-service .service-box-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1.5px; background: var(--ckf-grad); opacity: .35; transition: opacity .3s ease; } body.ck-futuristic .cookaro-home .ck-step:hover, body.ck-futuristic .cookaro-home .ck-mini-card:hover, body.ck-futuristic .cookaro-home .ck-feature-item:hover, body.ck-futuristic .cookaro-home .our-service .service-box-card:hover { transform: translateY(-8px); border-color: var(--ckf-border-hi) !important; box-shadow: 0 26px 60px rgba(0, 0, 0, .55), var(--ckf-glow-cyan), inset 0 1px 0 rgba(255,255,255,.08); } body.ck-futuristic .cookaro-home .ck-step:hover::before, body.ck-futuristic .cookaro-home .ck-mini-card:hover::before, body.ck-futuristic .cookaro-home .our-service .service-box-card:hover::before { opacity: 1; } /* Icon tiles + numbers glow */ body.ck-futuristic .cookaro-home .ck-step-ico, body.ck-futuristic .cookaro-home .ck-feature-num { background: rgba(var(--bs-primary-rgb), .12); border: 1px solid var(--ckf-border-hi); box-shadow: inset 0 0 20px rgba(var(--bs-primary-rgb), .15); color: var(--ckf-cyan-hi); } body.ck-futuristic .cookaro-home .ck-step-num { color: transparent; background: var(--ckf-grad); -webkit-background-clip: text; background-clip: text; opacity: .55; } body.ck-futuristic .cookaro-home .ck-mini-ico { filter: drop-shadow(0 0 10px rgba(var(--bs-primary-rgb),.5)); } /* "bg-light" sections become deep glass panels rather than white */ body.ck-futuristic .bg-light, body.ck-futuristic section.bg-light { background: var(--ckf-panel-light) !important; border-top: 1px solid var(--ckf-border); border-bottom: 1px solid var(--ckf-border); } body.ck-futuristic .bg-primary-subtle { background: rgba(var(--bs-primary-rgb), .06) !important; } /* --------------------------------------------------------------------- 7. Signature bands — AI matching, CTA, app download, feature, provider --------------------------------------------------------------------- */ body.ck-futuristic .cookaro-home .ck-ai-band { background: linear-gradient(135deg, rgba(var(--bs-primary-rgb),.16), rgba(59,130,246,.12) 45%, rgba(168,85,247,.20)) !important; border: 1px solid var(--ckf-border-hi); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 60px rgba(var(--bs-primary-rgb),.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } body.ck-futuristic .cookaro-home .ck-chat { background: rgba(5, 8, 22, .55); border: 1px solid var(--ckf-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } body.ck-futuristic .cookaro-home .ck-chat-you { background: rgba(var(--bs-primary-rgb), .14); color: #eaf7ff; border: 1px solid var(--ckf-border-hi); } body.ck-futuristic .cookaro-home .ck-chat-ai { background: rgba(168, 85, 247, .16); color: #f3e9ff; border: 1px solid rgba(168,85,247,.4); } body.ck-futuristic .cookaro-home .ck-chat-ai .ck-tag { background: rgba(var(--bs-primary-rgb),.2); color: var(--ckf-cyan-hi); } /* Light theme: the AI band is a pale translucent panel, so its hardcoded white headline/body and the light-purple pill must flip to dark ink to stay readable. (The chat box keeps a dark background, so its light text is left untouched.) */ html[data-bs-theme="light"] body.ck-futuristic .ck-ai-band .text-white { color: var(--ckf-text) !important; } html[data-bs-theme="light"] body.ck-futuristic .ck-ai-band .text-white-50 { color: var(--ckf-muted) !important; } html[data-bs-theme="light"] body.ck-futuristic .ck-ai-band .ck-pill-light { background: rgba(124, 58, 237, .12); border-color: rgba(124, 58, 237, .45); color: #6b21a8; } body.ck-futuristic .cookaro-home .ck-cta { background: radial-gradient(600px 300px at 50% -20%, rgba(var(--bs-primary-rgb),.22), transparent 70%), linear-gradient(135deg, #0a0f2a, #120a2e) !important; border: 1px solid var(--ckf-border-hi); box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 80px rgba(168,85,247,.08); } body.ck-futuristic .cookaro-home .ck-feature-band { background: var(--ckf-panel-light) !important; border: 1px solid var(--ckf-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } body.ck-futuristic .cookaro-home .ck-feature-item { background: var(--ckf-surface-2) !important; } body.ck-futuristic .cookaro-home .ck-video-frame { box-shadow: 0 26px 70px rgba(0,0,0,.6), var(--ckf-glow-cyan); border: 1px solid var(--ckf-border-hi); } body.ck-futuristic .cookaro-home .ck-video-frame .iq-video { background: var(--ckf-grad) !important; box-shadow: 0 0 0 6px rgba(var(--bs-primary-rgb),.12), 0 0 40px rgba(var(--bs-primary-rgb),.5); } body.ck-futuristic .cookaro-home .ck-video-frame .iq-video::after { border-color: var(--ckf-cyan); } /* App-download band */ body.ck-futuristic .cookaro-home .ck-app-band, body.ck-futuristic .bg-primary.rounded-3.ck-app-band, body.ck-futuristic section .bg-primary.rounded-3 { background: radial-gradient(500px 300px at 90% 0%, rgba(168,85,247,.3), transparent 60%), linear-gradient(135deg, #0a1030, #0c0a2a) !important; border: 1px solid var(--ckf-border-hi); box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 60px rgba(var(--bs-primary-rgb),.06); } /* Provider section soft neon wash */ body.ck-futuristic .provider-section { z-index: 1; } /* Rating pill */ body.ck-futuristic .cookaro-home .ck-rating-pill, body.ck-futuristic .bg-body { background: var(--ckf-surface) !important; border: 1px solid var(--ckf-border); box-shadow: 0 14px 40px rgba(0,0,0,.45), var(--ckf-glow-cyan); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* --------------------------------------------------------------------- 8. Forms / inputs — neon focus --------------------------------------------------------------------- */ body.ck-futuristic .form-control, body.ck-futuristic .form-select, body.ck-futuristic .choices__inner, body.ck-futuristic input.form-control { background: var(--ckf-input-bg) !important; border: 1px solid var(--ckf-border) !important; color: var(--ckf-text) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } body.ck-futuristic .form-control::placeholder { color: var(--ckf-faint); } body.ck-futuristic .form-control:focus, body.ck-futuristic .form-select:focus { border-color: var(--ckf-border-hi) !important; box-shadow: 0 0 0 .22rem rgba(var(--bs-primary-rgb), .18), var(--ckf-glow-cyan) !important; background: var(--ckf-input-bg) !important; } /* --------------------------------------------------------------------- 8b. Defensive overrides for the header-less (auth) layout. That layout hardcodes `p { color:#fff }` / `.dark p { color:#000 }` with an inverted theme toggle + select2 widgets on #171928/#fff. These rules out-specify those so text stays readable on the dark UI. --------------------------------------------------------------------- */ body.ck-futuristic p, body.ck-futuristic.dark p { color: var(--ckf-muted) !important; } body.ck-futuristic h1, body.ck-futuristic.dark h1, body.ck-futuristic h2, body.ck-futuristic.dark h2, body.ck-futuristic h3, body.ck-futuristic.dark h3 { color: var(--ckf-text); } body.ck-futuristic .select2-container .select2-selection--single, body.ck-futuristic.dark .select2-container .select2-selection--single, body.ck-futuristic .select2-selection--multiple, body.ck-futuristic.dark .select2-selection--multiple { background-color: var(--ckf-input-bg) !important; border: 1px solid var(--ckf-border) !important; color: var(--ckf-text) !important; } body.ck-futuristic .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--ckf-text) !important; } body.ck-futuristic .select2-dropdown { background: var(--ckf-surface-2) !important; border: 1px solid var(--ckf-border) !important; color: var(--ckf-text); } body.ck-futuristic .select2-results__option { color: var(--ckf-muted); } body.ck-futuristic .select2-container--default .select2-results__option--highlighted[aria-selected] { background: rgba(var(--bs-primary-rgb), .18) !important; color: var(--ckf-cyan-hi) !important; } body.ck-futuristic .input-group-text { color: var(--ckf-muted); } /* --------------------------------------------------------------------- 9. Reusable page hero (list / content / legal pages) --------------------------------------------------------------------- */ body.ck-futuristic .ck-page-hero { background: radial-gradient(120% 140% at 100% 0%, rgba(var(--bs-primary-rgb),.16), transparent 55%), radial-gradient(120% 140% at 0% 100%, rgba(168,85,247,.16), transparent 55%), var(--ckf-panel-light) !important; border-bottom: 1px solid var(--ckf-border); } body.ck-futuristic .ck-page-hero .ck-page-title { color: var(--ckf-text); } body.ck-futuristic .ck-page-hero .ck-page-sub, body.ck-futuristic .ck-rich { color: var(--ckf-muted); } body.ck-futuristic .ck-rich h1, body.ck-futuristic .ck-rich h2, body.ck-futuristic .ck-rich h3, body.ck-futuristic .ck-rich h4, body.ck-futuristic .ck-rich h5, body.ck-futuristic .ck-rich h6 { color: var(--ckf-text); } body.ck-futuristic .ck-rich a { color: var(--ckf-cyan-hi); } body.ck-futuristic .ck-rich blockquote { background: rgba(var(--bs-primary-rgb),.07); border-left-color: var(--ckf-cyan); } /* --------------------------------------------------------------------- 10. Footer — deep space console --------------------------------------------------------------------- */ body.ck-futuristic .footer { background: linear-gradient(180deg, #070a1c 0%, #04050d 100%) !important; border-top: 1px solid var(--ckf-border); } body.ck-futuristic .footer::before { background: var(--ckf-grad); box-shadow: var(--ckf-glow-cyan); } body.ck-futuristic .footer::after { background: radial-gradient(circle, var(--ckf-purple), transparent 70%); opacity: .18; } body.ck-futuristic .footer .iq-social-list-text li a, body.ck-futuristic .footer .iq-footer-catogery-list li a { background: rgba(var(--bs-primary-rgb), .07); border: 1px solid var(--ckf-border); } body.ck-futuristic .footer .iq-social-list-text li a:hover, body.ck-futuristic .footer .iq-footer-catogery-list li a:hover { background: var(--ckf-grad); color: #04121a !important; box-shadow: var(--ckf-glow-cyan); } /* --------------------------------------------------------------------- 11. Scroll-reveal (storytelling). JS toggles .ckf-in --------------------------------------------------------------------- */ body.ck-futuristic .ckf-reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } body.ck-futuristic .ckf-reveal.ckf-in { opacity: 1; transform: none; } /* Pointer-driven 3D tilt helper (JS sets the custom props) */ body.ck-futuristic .ckf-tilt { transform: perspective(900px) rotateX(var(--ckf-rx, 0deg)) rotateY(var(--ckf-ry, 0deg)) translateY(var(--ckf-ty, 0)); transform-style: preserve-3d; transition: transform .18s ease-out; } /* --------------------------------------------------------------------- 12. Custom neon scrollbar + selection + misc polish --------------------------------------------------------------------- */ body.ck-futuristic ::selection { background: rgba(var(--bs-primary-rgb), .35); color: #fff; } body.ck-futuristic ::-webkit-scrollbar { width: 12px; height: 12px; } body.ck-futuristic ::-webkit-scrollbar-track { background: #05060f; } body.ck-futuristic ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--ckf-cyan), var(--ckf-purple)); border-radius: 20px; border: 3px solid #05060f; } body.ck-futuristic .swiper-pagination-bullet { background: var(--ckf-muted); } body.ck-futuristic .swiper-pagination-bullet-active { background: var(--ckf-cyan) !important; box-shadow: var(--ckf-glow-cyan); } body.ck-futuristic .star-rating .vue-star-rating-star path, body.ck-futuristic .rating-text { color: var(--ckf-cyan-hi); } /* Empty-state panels */ body.ck-futuristic .cookaro-home .our-service section > span.text-center { background: var(--ckf-surface) !important; border: 1px dashed var(--ckf-border-hi) !important; color: var(--ckf-muted); } /* The fallback "global notice" bar (shown when meta description is empty) ships with hardcoded warm inline colours — re-skin it to the sci-fi UI. */ body.ck-futuristic .global-notice { background: linear-gradient(90deg, rgba(var(--bs-primary-rgb),.14), rgba(168,85,247,.14)) !important; color: var(--ckf-cyan-hi) !important; border-bottom: 1px solid var(--ckf-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; z-index: 2; } /* Loading screen + back-to-top get neon treatment */ body.ck-futuristic #loading { background: #05060f !important; } body.ck-futuristic .scroll-to-top .btn, body.ck-futuristic #back-to-top .top { background: var(--ckf-grad) !important; box-shadow: var(--ckf-glow-cyan); border: 0; } /* --------------------------------------------------------------------- 13. Mobile-first responsiveness for the heavier effects --------------------------------------------------------------------- */ @media (max-width: 991.98px) { body.ck-futuristic .main-content::before { background-size: 44px 44px; } } @media (max-width: 575.98px) { /* Lighten blur on small devices for performance */ body.ck-futuristic .cookaro-home .ck-step, body.ck-futuristic .cookaro-home .ck-mini-card, body.ck-futuristic .cookaro-home .our-service .service-box-card, body.ck-futuristic header .iq-navbar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } body.ck-futuristic .ckf-reveal { transform: translateY(22px); transition-duration: .6s; } } /* --------------------------------------------------------------------- 14. Accessibility — respect reduced motion --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.ck-futuristic .cookaro-home .ck-hero-title { animation: none; } body.ck-futuristic .ckf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } body.ck-futuristic .ckf-tilt { transform: none !important; transition: none !important; } body.ck-futuristic #ckf-particles { display: none; } }