/**
* Portal dark mode — pairs with (see includes/theme_head.php).
* Glass + typography overrides for Tailwind utility classnames used across views.
*/
@keyframes portal-notify-dot-pulse {
0%,
100% {
opacity: 1;
transform: scale(1);
box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.5);
}
50% {
opacity: 0.88;
transform: scale(1.12);
box-shadow: 0 0 0 6px rgba(244, 63, 94, 0);
}
}
html.dark {
color-scheme: dark;
}
.portal-notify-dot {
animation: portal-notify-dot-pulse 2.2s ease-in-out infinite;
}
html.dark body {
transition: background-color 0.3s ease, color 0.3s ease;
}
/* Auth / marketing shell */
html.dark body.portal-auth-body {
background-image: radial-gradient(ellipse at top, rgba(82, 82, 91, 0.28), transparent 55%),
linear-gradient(to bottom, #09090b, #18181b) !important;
}
/* Typography — neutral zinc grayscale in dark mode */
html.dark .text-zinc-900 {
color: rgb(250 250 249) !important;
}
html.dark .text-zinc-800 {
color: rgb(228 228 231) !important;
}
html.dark .text-zinc-700 {
color: rgb(212 212 216) !important;
}
html.dark .text-zinc-600 {
color: rgb(161 161 170) !important;
}
html.dark .text-zinc-500 {
color: rgb(161 161 170) !important;
}
html.dark .text-zinc-400 {
color: rgb(161 161 170) !important;
}
/* Glass backgrounds */
html.dark .bg-white\/20 {
background-color: rgba(9, 9, 11, 0.36) !important;
}
html.dark .bg-white\/25 {
background-color: rgba(9, 9, 11, 0.4) !important;
}
html.dark .bg-white\/30 {
background-color: rgba(9, 9, 11, 0.44) !important;
}
html.dark .bg-white\/35 {
background-color: rgba(9, 9, 11, 0.48) !important;
}
html.dark .bg-white\/40 {
background-color: rgba(9, 9, 11, 0.52) !important;
}
html.dark .bg-white\/45 {
background-color: rgba(9, 9, 11, 0.54) !important;
}
html.dark .bg-white\/50 {
background-color: rgba(9, 9, 11, 0.56) !important;
}
html.dark .bg-white\/55 {
background-color: rgba(9, 9, 11, 0.58) !important;
}
html.dark .bg-white\/60 {
background-color: rgba(39, 39, 42, 0.58) !important;
}
html.dark .bg-white\/70 {
background-color: rgba(39, 39, 42, 0.68) !important;
}
html.dark .bg-white\/75 {
background-color: rgba(63, 63, 70, 0.58) !important;
}
html.dark .bg-white\/90 {
background-color: rgba(82, 82, 91, 0.72) !important;
}
html.dark .hover\:bg-white\/40:hover {
background-color: rgba(39, 39, 42, 0.58) !important;
}
html.dark .hover\:bg-white\/50:hover {
background-color: rgba(39, 39, 42, 0.6) !important;
}
html.dark .hover\:bg-white\/55:hover {
background-color: rgba(63, 63, 70, 0.52) !important;
}
html.dark .hover\:bg-white\/60:hover {
background-color: rgba(63, 63, 70, 0.56) !important;
}
html.dark .hover\:bg-white\/70:hover {
background-color: rgba(63, 63, 70, 0.62) !important;
}
html.dark .hover\:bg-white\/75:hover {
background-color: rgba(82, 82, 91, 0.54) !important;
}
html.dark .hover\:bg-white\/90:hover {
background-color: rgba(82, 82, 91, 0.62) !important;
}
/* Light borders → slate glass */
html.dark .border-white\/20 {
border-color: rgba(63, 63, 70, 0.48) !important;
}
html.dark .border-white\/30 {
border-color: rgba(63, 63, 70, 0.48) !important;
}
html.dark .border-white\/40 {
border-color: rgba(63, 63, 70, 0.5) !important;
}
html.dark .border-white\/50 {
border-color: rgba(82, 82, 91, 0.48) !important;
}
html.dark .border-white\/55 {
border-color: rgba(82, 82, 91, 0.5) !important;
}
html.dark .border-white\/60 {
border-color: rgba(82, 82, 91, 0.52) !important;
}
html.dark .border-white\/70 {
border-color: rgba(82, 82, 91, 0.54) !important;
}
html.dark .border-white\/80 {
border-color: rgba(113, 113, 122, 0.5) !important;
}
html.dark .border-zinc-200\/60 {
border-color: rgba(63, 63, 70, 0.52) !important;
}
html.dark .border-zinc-200\/70 {
border-color: rgba(63, 63, 70, 0.54) !important;
}
html.dark .border-zinc-200\/80 {
border-color: rgba(63, 63, 70, 0.56) !important;
}
html.dark .border-zinc-200\/90 {
border-color: rgba(63, 63, 70, 0.56) !important;
}
html.dark .border-zinc-300\/80 {
border-color: rgba(82, 82, 91, 0.5) !important;
}
html.dark .border-gray-200 {
border-color: rgba(82, 82, 91, 0.52) !important;
}
html.dark .border-gray-200\/90 {
border-color: rgba(82, 82, 91, 0.52) !important;
}
html.dark .divide-zinc-200\/60 > :not([hidden]) ~ :not([hidden]) {
border-color: rgba(63, 63, 70, 0.48) !important;
}
/* Decorative gradients on light pages */
html.dark .from-zinc-400\/60 {
--tw-gradient-from: rgba(161, 161, 170, 0.35) var(--tw-gradient-from-position) !important;
}
html.dark .ring-offset-stone-100,
html.dark .focus-visible\:ring-offset-stone-100:focus-visible {
--tw-ring-offset-color: rgb(9 9 11) !important;
}
html.dark .shadow-inner {
box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
html.dark ::placeholder {
color: rgb(113 113 122) !important;
}
html.dark .decoration-zinc-300,
html.dark .hover\:decoration-zinc-600:hover {
text-decoration-color: rgba(161, 161, 170, 0.55) !important;
}
html.dark .hover\:text-zinc-700:hover {
color: rgb(212 212 216) !important;
}
.portal-analytics-in {
animation: portal-analytics-in 0.55s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.portal-analytics-in {
animation: none;
opacity: 1;
transform: none;
}
}
@keyframes portal-analytics-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
html.dark .border-dashed.border-zinc-300\/80 {
border-color: rgba(71, 85, 105, 0.55) !important;
}