/* EL-KADI OPS — Palantir blue + orange */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { --p-void: #040c18; --p-deep: #061428; --p-surface: #0c1a30; --p-elevated: rgba(12, 28, 52, 0.92); --p-border: rgba(56, 132, 220, 0.18); --p-border-hot: rgba(251, 146, 60, 0.45); --p-blue: #3b82f6; --p-cyan: #22d3ee; --p-orange: #fb923c; --p-amber: #fbbf24; --p-teal: #2dd4bf; --p-text: #e8eef7; --p-muted: #64748b; --p-mono: 'JetBrains Mono', ui-monospace, monospace; --p-sans: 'DM Sans', system-ui, sans-serif; --btn-bg: #1a1e28; --btn-hover: #242a38; --btn-icon: #2c3344; --color-logo-start: 59, 130, 246; --color-logo-stop: 251, 146, 60; } html { color-scheme: dark; } body { font-family: var(--p-sans) !important; background: var(--p-void) !important; color: var(--p-text) !important; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 110% 75% at 5% -10%, rgba(37, 99, 235, 0.38), transparent 55%), radial-gradient(ellipse 85% 60% at 92% 8%, rgba(34, 211, 238, 0.18), transparent 50%), radial-gradient(ellipse 70% 55% at 85% 80%, rgba(59, 130, 246, 0.12), transparent 48%), radial-gradient(ellipse 55% 45% at 10% 88%, rgba(251, 146, 60, 0.1), transparent 42%), linear-gradient(165deg, #0a1e3a 0%, #040c18 42%, #051220 100%); pointer-events: none; z-index: 0; animation: bg-breathe 14s ease-in-out infinite alternate; } @keyframes bg-breathe { 0% { opacity: 1; } 100% { opacity: 0.9; } } body::after { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(59, 130, 246, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 80% at 50% 30%, black 10%, transparent 72%); pointer-events: none; z-index: 0; animation: grid-drift 40s linear infinite; } @keyframes grid-drift { from { transform: translate(0, 0); } to { transform: translate(-56px, -56px); } } .palantir-scanline { position: fixed; inset: 0; pointer-events: none; z-index: 1; background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 6px); opacity: 0.35; } .palantir-noise { position: fixed; inset: 0; pointer-events: none; z-index: 1; opacity: 0.03; 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"); } #page_wrapper, main, #information-widgets { position: relative; z-index: 2; } html, body, #__next, #__next > div, main, footer, #footer, [class*="bg-theme"], [class*="bg-slate"], [class*="bg-zinc"] { background-color: var(--p-void) !important; background-image: none !important; } /* ── Header ── */ #information-widgets, .information-widget-container { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px 24px !important; border: 1px solid var(--p-border) !important; border-radius: 10px !important; background: var(--p-elevated) !important; backdrop-filter: blur(14px); box-shadow: 0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(59,130,246,0.08) !important; padding: 14px 24px !important; margin: 12px 16px 0 !important; border-bottom: none !important; } header { background: transparent !important; border: none !important; } header h1 { display: none !important; } .information-widget { border: none !important; border-radius: 0 !important; background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; padding: 0 !important; } #information-widget-greeting, .information-widget-greeting { font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 0.7rem !important; color: var(--p-orange) !important; font-family: var(--p-mono) !important; border-left: 1px solid var(--p-border) !important; padding-left: 18px !important; } .information-widget-greeting .text-theme-800, .information-widget-greeting .text-theme-200 { color: var(--p-text) !important; font-size: 0.95rem !important; letter-spacing: 0.04em !important; text-transform: none !important; } .information-widget-greeting .text-theme-500, .information-widget-greeting .text-theme-400 { color: var(--p-muted) !important; font-size: 0.65rem !important; text-transform: none !important; } /* Dell Technologies wordmark — geen ronde D, alleen tekstlogo */ .information-widget-logo { order: -10 !important; margin-right: 16px !important; min-width: 0 !important; } .information-widget-logo img, .information-widget-logo a img, .information-widget-logo svg { width: auto !important; height: 36px !important; min-width: 180px !important; max-width: 280px !important; min-height: unset !important; max-height: 36px !important; border-radius: 0 !important; object-fit: contain !important; object-position: left center !important; border: none !important; box-shadow: none !important; filter: none !important; animation: none !important; background: transparent !important; } /* Verberg gradient/afkorting fallback (de "D") */ .information-widget-logo .rounded-full, .information-widget-logo [class*="gradient"], .information-widget-logo > div:not(:has(img)) { display: none !important; } .information-widget-search input { background: rgba(26, 30, 40, 0.9) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; border-radius: 6px !important; } .information-widget-resource .resource-icon { animation: none !important; filter: none !important; } .information-widget-resource:nth-child(1) .resource-icon { color: #60a5fa !important; } .information-widget-resource:nth-child(2) .resource-icon { color: #fb923c !important; } .information-widget-resource:nth-child(3) .resource-icon { color: #4ade80 !important; } .resource-usage > div { background: linear-gradient(90deg, #3b82f6, #fb923c) !important; animation: none !important; background-size: 100% 100% !important; } /* ── Tabs (custom.js #atc-tabs) ── */ #atc-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px 0; margin: 12px 16px 0; background: transparent !important; border: none !important; position: sticky; top: 0; z-index: 50; } .atc-tab, button[role="tab"] { font-family: var(--p-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; border: 1px solid var(--p-border) !important; border-radius: 6px !important; background: rgba(26, 30, 40, 0.75) !important; color: var(--p-muted) !important; padding: 10px 18px !important; cursor: pointer; transition: all 0.25s ease; } .atc-tab:hover, button[role="tab"]:hover { color: var(--p-text) !important; border-color: rgba(59, 130, 246, 0.35) !important; } .atc-tab.active, button[role="tab"][aria-selected="true"] { background: linear-gradient(135deg, rgba(59,130,246,0.2), rgba(251,146,60,0.12)) !important; border-color: var(--p-border-hot) !important; color: var(--p-cyan) !important; box-shadow: 0 0 20px rgba(251,146,60,0.15); animation: none !important; } main { padding: 16px 20px 48px !important; max-width: 1720px !important; margin: 0 auto !important; background: transparent !important; } /* ── Secties ── */ .services-group { margin-bottom: 24px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .services-group.atc-hidden { display: none !important; } .services-group > div:first-child, .services-group h2, #services h2.service-group-name, .service-group-title { font-family: var(--p-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; color: var(--p-cyan) !important; margin-bottom: 12px !important; padding: 0 !important; border: none !important; background: transparent !important; } .services-group > div:first-child::before, .services-group h2::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--p-orange); box-shadow: 0 0 10px var(--p-orange); margin-right: 10px; vertical-align: middle; } .services-group ul, .services-list { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; list-style: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } .services-group ul > li, .services-list > li { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } @media (max-width: 1280px) { .services-group ul, .services-list { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 768px) { .services-group ul, .services-list { grid-template-columns: repeat(2, 1fr) !important; } } /* ── Service knoppen — strak kader om de knop (referentie homelab) ── */ .services-group, .services-group.flex-1, .services-group.subgroup { padding: 0 !important; margin-bottom: 18px !important; } .services-group ul, .services-list { gap: 6px !important; } .services-group ul > li.service, li.service { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; list-style: none !important; } /* De knop = .service-card, strak, laag (~42px) */ .service-card { display: block !important; background: rgba(22, 28, 38, 0.95) !important; border: 1px solid rgba(255, 255, 255, 0.09) !important; border-radius: 5px !important; padding: 0 !important; margin: 0 !important; min-height: 42px !important; max-height: 42px !important; position: relative !important; cursor: pointer !important; overflow: hidden !important; backdrop-filter: none !important; box-shadow: none !important; transition: border-color 0.15s ease, background 0.15s ease !important; animation: none !important; } .service-card[class*="bg-theme"], .service-card[class*="shadow-theme"], .service-card.hover\:bg-theme-300\/20, .service-card.dark\:hover\:bg-white\/10, .service-card.dark\:bg-white\/5 { background: rgba(22, 28, 38, 0.95) !important; box-shadow: none !important; } .service-card:hover { background: rgba(28, 34, 46, 0.98) !important; border-color: rgba(255, 255, 255, 0.16) !important; transform: none !important; box-shadow: none !important; } /* Gekleurde accent-streep links op de knop */ .services-group ul > li.service:nth-child(6n+1) .service-card { border-left: 3px solid #3b82f6 !important; } .services-group ul > li.service:nth-child(6n+2) .service-card { border-left: 3px solid #a855f7 !important; } .services-group ul > li.service:nth-child(6n+3) .service-card { border-left: 3px solid #22c55e !important; } .services-group ul > li.service:nth-child(6n+4) .service-card { border-left: 3px solid #06b6d4 !important; } .services-group ul > li.service:nth-child(6n+5) .service-card { border-left: 3px solid #f59e0b !important; } .services-group ul > li.service:nth-child(6n+6) .service-card { border-left: 3px solid #ec4899 !important; } .service-title { display: flex !important; flex-direction: row !important; align-items: center !important; min-height: 42px !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .service-title-text, .service-title-text a { flex: 1 !important; min-width: 0 !important; padding: 2px 22px 2px 6px !important; background: transparent !important; border: none !important; box-shadow: none !important; } .service-name { font-size: 0.78rem !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--p-text) !important; margin: 0 !important; } .service-description { font-size: 0.6rem !important; line-height: 1.2 !important; color: var(--p-muted) !important; margin: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* Icoon compact — geen apart groot kader */ .service-icon, a.service-icon, .service-icon.w-12 { width: 32px !important; height: 32px !important; min-width: 32px !important; max-width: 32px !important; margin: 5px 6px 5px 5px !important; padding: 4px !important; border: none !important; border-radius: 4px !important; background: transparent !important; box-shadow: none !important; flex-shrink: 0 !important; } .service-icon::before, .service-icon::after { display: none !important; content: none !important; } .service-icon img, .service-icon svg { width: 100% !important; height: 100% !important; object-fit: contain !important; filter: none !important; } .service-card:hover .service-icon { background: transparent !important; transform: none !important; } li.service.atc-db-tile .service-card { min-height: 52px !important; max-height: none !important; } li.service.atc-db-tile .service-title { align-items: flex-start !important; min-height: 52px !important; } li.service.atc-db-tile .service-description { font-family: var(--p-mono) !important; font-size: 0.5rem !important; white-space: pre-wrap !important; max-height: 2.6em !important; } li.service.atc-db-tile:hover .service-description { max-height: 10em !important; } /* Status dot — rechts in de knop */ .service-card .ping, .service-card .status-dot, .service-card [class*="status-dot"], .ping, .status-dot, [class*="status-dot"] { position: absolute !important; right: 7px !important; top: 50% !important; transform: translateY(-50%) !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; box-shadow: none !important; } .status-dot-status-green, .status-status-healthy, .text-green-500, .status-dot-green { background-color: #4ade80 !important; box-shadow: 0 0 8px rgba(74, 222, 128, 0.55), 0 0 0 2px var(--btn-bg) !important; animation: status-pulse-green 3s ease-out infinite; } .status-dot-status-red, .text-red-500, .status-dot-red { background-color: #f87171 !important; animation: status-pulse-red 3s ease-out infinite; } @keyframes status-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5), 0 0 0 2px var(--btn-bg); } 70% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0), 0 0 0 2px var(--btn-bg); } } @keyframes status-pulse-red { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5), 0 0 0 2px var(--btn-bg); } 70% { box-shadow: 0 0 0 6px rgba(248, 113, 113, 0), 0 0 0 2px var(--btn-bg); } } .service-widget { background: rgba(5, 12, 24, 0.6) !important; border: 1px solid var(--p-border) !important; border-radius: 6px !important; margin-top: 8px !important; padding: 6px 8px !important; font-size: 0.58rem !important; color: var(--p-muted) !important; } /* RSS Intel Hub — FEEDS tab */ #atc-rss-hub.atc-hub-hidden { display: none !important; } #atc-rss-hub { margin: 0 16px 24px !important; max-width: 1720px; } .services-group.atc-hub-active { display: none !important; } .rss-list { list-style: none; padding: 0; margin: 0; } .rss-column { max-height: 72vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--p-blue) transparent; } .rss-items li { font-size: 0.8rem !important; line-height: 1.45 !important; padding: 0.4rem 0 !important; } .rss-items a { display: block; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; line-height: 1.4; transition: color 0.15s ease; } .rss-items a:hover { color: var(--p-orange) !important; text-shadow: 0 0 12px rgba(251, 146, 60, 0.25); } .rss-items time { font-size: 0.62rem !important; opacity: 0.85; min-width: 2.2rem; text-align: right; } .rss-feed-name { font-size: 0.58rem !important; margin-bottom: 0.45rem !important; color: var(--p-cyan) !important; } .rss-column-head { position: sticky; top: 0; background: rgba(6, 14, 28, 0.95); z-index: 2; backdrop-filter: blur(8px); } /* Live Feeds tab (legacy tiles) */ .services-group.atc-feeds-group ul { grid-template-columns: repeat(3, 1fr) !important; } .services-group.atc-feeds-group .service-card { min-height: 200px !important; padding: 12px !important; } .services-group.atc-feeds-group .service-title { flex-direction: column !important; align-items: flex-start !important; } .services-group.atc-feeds-group .service-icon { width: 46px !important; height: 46px !important; margin: 0 0 8px 2px !important; } .services-group.atc-feeds-group .service-widget { max-height: 130px !important; overflow-y: auto !important; } .services-group.atc-feeds-group .service-widget a { color: var(--p-cyan) !important; } .services-group.atc-feeds-group .service-widget a:hover { color: var(--p-orange) !important; } /* Native FEEDS tab — leesbare RSS-widgets in kaarten */ .services-group .service-widget { max-height: 220px !important; overflow-y: auto !important; padding: 10px 12px !important; margin-top: 10px !important; font-size: 0.72rem !important; line-height: 1.5 !important; scrollbar-width: thin; scrollbar-color: var(--p-blue) transparent; } .services-group .service-widget ul, .services-group .service-widget ol { list-style: none !important; padding: 0 !important; margin: 0 !important; } .services-group .service-widget li { padding: 0.35rem 0 !important; border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; } .services-group .service-widget a { color: var(--p-text) !important; text-decoration: none !important; display: block !important; white-space: normal !important; line-height: 1.4 !important; } .services-group .service-widget a:hover { color: var(--p-orange) !important; } /* Homepage native tabs */ button[role="tab"] { font-family: var(--p-mono) !important; font-size: 0.68rem !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; } /* Bookmarks */ #bookmarks .bookmark-group h2, .bookmark-group-name { font-family: var(--p-mono) !important; font-size: 0.62rem !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--p-orange) !important; } #bookmarks a { border: 1px solid var(--p-border) !important; transition: border-color 0.2s, box-shadow 0.2s; } #bookmarks a:hover { border-color: rgba(251,146,60,0.4) !important; box-shadow: 0 0 16px rgba(59,130,246,0.1); } .bookmark-icon { font-weight: 600 !important; color: #fff !important; animation: none !important; box-shadow: none !important; } .bookmark:nth-child(4n+1) .bookmark-icon { background: linear-gradient(135deg, #2563eb, #3b82f6) !important; } .bookmark:nth-child(4n+2) .bookmark-icon { background: linear-gradient(135deg, #ea580c, #fb923c) !important; } .bookmark:nth-child(4n+3) .bookmark-icon { background: linear-gradient(135deg, #7c3aed, #a855f7) !important; } .bookmark:nth-child(4n+4) .bookmark-icon { background: linear-gradient(135deg, #059669, #22c55e) !important; } /* RSS hub (custom.js elkadi — optioneel) */ .rss-hub { margin: 1rem 1.5rem 1.5rem; padding: 1.25rem 1.5rem; border: 1px solid var(--p-border); border-radius: 14px; background: linear-gradient(145deg, rgba(10,22,40,0.95), rgba(6,12,22,0.98)); box-shadow: 0 8px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(59,130,246,0.12); backdrop-filter: blur(16px); position: relative; overflow: hidden; } .rss-hub::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--p-blue), var(--p-orange), var(--p-cyan), transparent); animation: rss-scan 4s ease-in-out infinite; } @keyframes rss-scan { 0%, 100% { opacity: 0.5; transform: scaleX(0.6); } 50% { opacity: 1; transform: scaleX(1); } } .rss-hub-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.25rem; font-family: var(--p-mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--p-cyan); } .rss-hub-accent { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--p-orange); box-shadow: 0 0 12px var(--p-orange); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } } .rss-hub-sub { font-size: 0.58rem; letter-spacing: 0.1em; color: var(--p-muted); text-transform: none; } .rss-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; } @media (max-width: 1280px) { .rss-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .rss-grid { grid-template-columns: 1fr; } } .rss-column { border: 1px solid rgba(59,130,246,0.12); border-radius: 10px; padding: 0.75rem; background: rgba(5,12,24,0.6); min-height: 160px; } .rss-column-head { display: flex; align-items: center; gap: 0.5rem; font-family: var(--p-mono); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--p-orange); margin-bottom: 0.65rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--p-border); } .rss-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--p-cyan); animation: pulse-dot 1.8s ease-in-out infinite; } .rss-feed-block { list-style: none; margin-bottom: 0.85rem; } .rss-feed-name { display: block; font-family: var(--p-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--p-muted); margin-bottom: 0.35rem; } .rss-items { list-style: none; padding: 0; margin: 0; } .rss-items li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.28rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.72rem; line-height: 1.35; animation: rss-fade-in 0.4s ease forwards; opacity: 0; } .rss-items li:nth-child(1) { animation-delay: 0.05s; } .rss-items li:nth-child(2) { animation-delay: 0.1s; } .rss-items li:nth-child(3) { animation-delay: 0.15s; } .rss-items li:nth-child(4) { animation-delay: 0.2s; } .rss-items li:nth-child(5) { animation-delay: 0.25s; } @keyframes rss-fade-in { to { opacity: 1; } } .rss-items a { color: var(--p-text) !important; text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rss-items a:hover { color: var(--p-orange) !important; } .rss-items time { font-family: var(--p-mono); font-size: 0.58rem; color: var(--p-muted); flex-shrink: 0; } .rss-loading { color: var(--p-muted); font-style: italic; } .rss-error a { color: var(--p-orange) !important; } footer, #footer { opacity: 0.35; font-family: var(--p-mono); font-size: 0.62rem; background: transparent !important; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--p-void); } ::-webkit-scrollbar-thumb { background: #2a3040; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--p-orange); } .service-card { animation: none !important; } .rss-hub { animation: none !important; } @media (prefers-reduced-motion: reduce) { body::before, body::after, .rss-hub::before, .rss-pulse, .rss-hub-accent, .service-icon, .service-icon::before, .service-icon::after, .service-card, .bookmark-icon, .information-widget-resource .resource-icon, button[role="tab"][aria-selected="true"], .rss-hub, #information-widgets img, .palantir-scanline, .palantir-noise, .atc-tab, .service { animation: none !important; } } /* DATA tab — compact 4-column database grid */ .services-group:has(h2) h2:has(+ ul li.service.atc-db-tile), li.service.atc-db-tile { max-width: 100%; } .services-group ul:has(li.service.atc-db-tile) { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 0.35rem 0.5rem !important; } li.service.atc-db-tile .service-card { min-height: 42px !important; max-height: 52px !important; } li.service.atc-db-tile .service-description { font-size: 0.62rem !important; line-height: 1.25 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-height: 2.5em !important; } li.service.atc-db-tile:hover .service-description { white-space: normal !important; overflow: visible !important; max-height: 8em !important; } #atc-rss-hub { display: none !important; }