/* ========= Sepiina Theme — High-contrast Dark + Light ========= */ :root{ /* Shared brand */ --primary: #22d3ee; --primary-2: #0891b2; --accent: #7c3aed; --accent-2: #5b21b6; --good: #16a34a; --warn: #f59e0b; --crit: #ef4444; /* DARK defaults */ --bg: #0b1020; --bg-2: #121a33; --card: #141b2f; --border: rgba(148,163,184,.18); --text: #e8edf7; /* brighter body text */ --text-strong: #ffffff; /* headings */ --text-muted: #adbad8; /* muted */ --link: #6EE7F9; --link-hover: #22d3ee; --ring: rgba(124,58,237,.35); --table-head: rgba(148,163,184,.10); } /* LIGHT variant (apply by adding class "theme-light" on ) */ body.theme-light{ --bg: #f7fafc; --bg-2: #f1f5fb; --card: #ffffff; --border: #e5e7eb; --text: #0b1220; --text-strong: #0a0f1c; --text-muted: #475569; --link: #0ea5e9; --link-hover: #0369a1; --table-head: #eef2f7; --ring: rgba(2,132,199,.25); } /* Backgrounds */ body{ background: radial-gradient(1200px 800px at -10% -10%, var(--bg-2) 0%, transparent 60%), radial-gradient(1200px 800px at 110% 110%, #0f1530 0%, transparent 60%), linear-gradient(120deg, var(--bg), var(--bg) 40%, var(--bg)); color: var(--text); min-height: 100vh; } /* Party mode (kept) */ body.party-mode{ background: radial-gradient(900px 600px at -10% -10%, rgba(124,58,237,.35), transparent 60%), radial-gradient(900px 600px at 110% 110%, rgba(34,211,238,.35), transparent 60%), linear-gradient(120deg, var(--bg), #131c3d 40%, #0b1533); animation: riffle 18s linear infinite; } @keyframes riffle{ 0%{background-position: 0 0, 0 0, 0 0} 50%{background-position: 10px 6px, -12px -10px, 0 0} 100%{background-position: 0 0, 0 0, 0 0} } /* Global text & links (ensure contrast) */ a{ color: var(--link); text-decoration: none; } a:hover{ color: var(--link-hover); text-decoration: underline; } h1,h2,h3,h4,h5,h6{ color: var(--text-strong); } /* Common elements get readable text */ p, li, th, td, label, .box, .alert{ color: var(--text); } /* Navbar */ .nav, nav{ background: linear-gradient(180deg, rgba(20,27,47,.85), rgba(12,17,34,.85)); backdrop-filter: blur(6px); border-bottom: 1px solid var(--border); } nav a{ color: var(--text); } nav a:hover{ color: var(--link); } /* Cards */ .card{ background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 10px 30px rgba(2,8,23,.35); color: var(--text); } .card:hover{ border-color: rgba(124,58,237,.35); box-shadow: 0 16px 40px rgba(124,58,237,.18); } /* Buttons */ button, .btn{ background: linear-gradient(180deg, var(--accent), var(--accent-2)); color: #fff; border: 0; border-radius: 10px; padding: 9px 14px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 20px rgba(124,58,237,.35); } button:hover, .btn:hover{ filter: brightness(1.06); box-shadow: 0 10px 26px rgba(124,58,237,.45); } button.secondary{ background: linear-gradient(180deg, #22d3ee, #0891b2); box-shadow: 0 6px 20px rgba(34,211,238,.30); color:#081018; } /* Tables */ .table{ width:100%; border-collapse: collapse; } .table th, .table td{ padding:10px 12px; border-bottom:1px solid var(--border); } .table thead th{ color: var(--text-muted); text-transform:uppercase; letter-spacing:.04em; font-size:.82rem; background: var(--table-head); } /* Badges */ .badge{ padding:4px 8px; border-radius:999px; font-weight:800; font-size:.82rem; } .badge-lat-ok{ background: rgba(22,163,74,.18); color:#b6f0c7; border:1px solid rgba(22,163,74,.40); } .badge-lat-warn{ background: rgba(245,158,11,.20); color:#fde68a; border:1px solid rgba(245,158,11,.45); } .badge-lat-crit{ background: rgba(239,68,68,.20); color:#fecaca; border:1px solid rgba(239,68,68,.45); } body.theme-light .badge-lat-ok{ color:#065f46; background:#d1fae5; border-color:#34d399; } body.theme-light .badge-lat-warn{ color:#7c2d12; background:#fef3c7; border-color:#fbbf24; } body.theme-light .badge-lat-crit{ color:#7f1d1d; background:#fee2e2; border-color:#f87171; } .muted{ color: var(--text-muted); } /* Tooltip using [data-tip] */ .tip{ display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:999px; background:#1f2937; color:#e5e7eb; font-size:.75rem; border:1px solid var(--border); cursor:help; position:relative; } body.theme-light .tip{ background:#e2e8f0; color:#0b1220; } .tip:hover::after{ content: attr(data-tip); position:absolute; left:50%; transform:translateX(-50%); bottom:125%; white-space:pre-line; background:#0b1222; border:1px solid var(--border); color:#e5e7eb; padding:8px 10px; border-radius:8px; width:max-content; max-width:320px; box-shadow:0 10px 30px rgba(2,8,23,.5); z-index:20; } body.theme-light .tip:hover::after{ background:#111827; color:#f8fafc; border-color:rgba(15,23,42,.25); } /* Sparkline styling */ svg.spark{ vertical-align:middle } .spark-bg{ stroke:#334155; stroke-width:1; } .spark-line{ fill:none; stroke:#22d3ee; stroke-width:2; } .spark-dot{ fill:#22d3ee; } .spark-rtt{ fill:none; stroke:#a78bfa; stroke-width:1.5; opacity:.95; } .spark-dot-rtt{ fill:#a78bfa; } /* Peek-a-boo squid */ .card:nth-of-type(3n+2)::after{ content:""; position:absolute; right:-8px; top:-8px; width:64px; height:64px; background:url('/img/cuttle-peek.svg') no-repeat center / contain; opacity:.20; pointer-events:none; transform: rotate(6deg); filter: drop-shadow(0 4px 10px rgba(2,8,23,.6)); } .card{ position:relative; overflow:hidden } /* Footer */ .site-footer a{ color: var(--link); } .site-footer a:hover{ color: var(--link-hover); } #ink-toggle, #theme-toggle{ margin-left:10px; border:1px dashed rgba(124,58,237,.6); color:#c7b7ff; background: rgba(124,58,237,.12); padding:2px 8px; border-radius:999px; font-size:.8rem; } #theme-toggle{ color:#9ad7ff; background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.5); } #ink-toggle:hover{ background: rgba(124,58,237,.18); } #theme-toggle:hover{ background: rgba(34,211,238,.18); } /* Forms */ label{ display:block; margin:8px 0; color: var(--text); } input[type="text"], input[type="email"], input[type="password"], select, textarea{ background:#0f162b; border:1px solid var(--border); color: var(--text); border-radius:10px; padding:10px 12px; width:100%; } input::placeholder, textarea::placeholder{ color: #8aa2c4; } body.theme-light input[type], body.theme-light select, body.theme-light textarea{ background:#ffffff; border-color:#d1d5db; color:#0b1220; } body.theme-light input::placeholder, body.theme-light textarea::placeholder{ color:#94a3b8; } /* Utility containers */ .box{ background: rgba(255,255,255,.03); border:1px solid var(--border); border-radius:14px; padding:12px; color: var(--text); } .alert{ background: rgba(124,58,237,.12); border:1px solid rgba(124,58,237,.35); color: var(--text); border-radius:10px; padding:10px 12px; } body.theme-light .card:nth-of-type(3n+2)::after{ opacity:.12 } /* --- Tentacle “holding card” effect --- */ .card { position: relative; z-index: 0; transform-style: preserve-3d; } .card--tentacle::before, .card--tentacle::after, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::before, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::after { content: ""; position: absolute; display: block; pointer-events: none; /* never blocks clicks */ will-change: transform; animation: tentacleWiggle 8s ease-in-out infinite; } /* Left tentacle (top-left corner) */ .card--tentacle::before, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::before { width: 140px; height: 160px; left: -36px; top: -46px; background: url('/img/tentacle-left.svg') no-repeat 0 0 / contain; transform: rotate(-8deg) translateZ(14px); z-index: 2; } /* Right tentacle (bottom-right corner) */ .card--tentacle::after, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::after { width: 150px; height: 170px; right: -40px; bottom: -56px; background: url('/img/tentacle-right.svg') no-repeat 0 0 / contain; transform: rotate(6deg) translateZ(14px); z-index: 2; } /* Slight 3D pop on hover for more depth */ .card:hover { transform: translateZ(0) rotateX(.5deg) rotateY(.5deg); } @keyframes tentacleWiggle { 0%, 100% { transform: translateZ(14px) rotate(0deg) } 50% { transform: translateZ(14px) rotate(1.5deg) } } @media (prefers-reduced-motion: reduce) { .card--tentacle::before, .card--tentacle::after, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::before, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::after { animation: none; } } /* Dark theme tweak: make suckers pop without blinding */ body:not(.theme-light) .card--tentacle::before, body:not(.theme-light) .card--tentacle::after, body:not(.theme-light) .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::before, body:not(.theme-light) .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::after { filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)) saturate(1.05) brightness(.98); } /* Small screens: reduce size or hide if too tight */ @media (max-width: 640px) { .card--tentacle::before, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::before { left: -22px; top: -32px; width: 110px; height: 126px; } .card--tentacle::after, .grid-cards .card:not(:nth-of-type(2)):not(:nth-of-type(5))::after { right: -24px; bottom: -36px; width: 118px; height: 134px; } }