/* ---------------------------------------------------------------------- Dark / light mode — dock-ui palette Only applied when is set, which the inline detection script in template.ftl does ONLY for the platform & dock apps. Default (no attribute) keeps the existing light theme untouched. ---------------------------------------------------------------------- */ :root { /* Toggle button — light defaults (overridden under [data-theme="dark"]) */ --toggle-bg: #ffffff; --toggle-bg-hover: #f1f5f9; --toggle-border: #e3e6ec; --toggle-text: #0f172a; } /* ---------- Dark palette (dock-ui [data-bs-theme="dark"]) ---------- */ html[data-theme="dark"] { color-scheme: dark; --primary-color: #fd665c; /* keep Filika coral accent */ --secondary-color: #aad1d9; --text-color: #e2e8f0; --background-color: #0b0f17; --border-color: #233045; --card-bg-translucent: rgba(19, 27, 41, 0.92); --card-bg: #0f1623; --form-control: #131b29; --muted-color: #94a3b8; --border-hover: #475569; --surface-hover: #1e293b; /* Toggle button — dark overrides */ --toggle-bg: var(--background-color); --toggle-bg-hover: var(--surface-hover); --toggle-border: var(--border-color); --toggle-text: var(--text-color); } /* Quick toggle button (shown by JS only for platform & dock). Colors come from variables, so it follows the theme automatically. */ .theme-toggle { position: absolute; top: 16px; left: 96px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--toggle-border); background: var(--toggle-bg); color: var(--toggle-text); cursor: pointer; display: none; /* JS flips to inline-flex when enabled */ align-items: center; justify-content: center; font-size: 18px; line-height: 1; z-index: 50; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.08); transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } @media screen and (max-width: 1200px) { .theme-toggle { top: 10px; } } html[data-theme="dark"] .theme-toggle>span { color: white; box-shadow: 0 1px 2px rgba(255, 255, 255, 0.05), 0 8px 24px rgba(255, 255, 255, 0.08); } .theme-toggle:hover { background: var(--toggle-bg-hover); } /* Page background */ html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .login-pf body, html[data-theme="dark"] .template-container { background-color: var(--background-color) !important; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--text-color) !important; } /* Loader backdrop so it doesn't flash white */ html[data-theme="dark"] .page-loader { background-color: var(--background-color) !important; } /* ---------- Form panel ---------- */ html[data-theme="dark"] .app-form { background: var(--card-bg) !important; border-color: var(--border-color) !important; --tw-shadow: 0 4px 40px -8px rgba(255, 255, 255, 0.08); --tw-shadow-colored: 0 4px 40px -8px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } /* Light text inside the form panel, and clear the forced white from generic wrapper elements (the global `* { background: white }`). */ html[data-theme="dark"] .app-form, html[data-theme="dark"] .app-form h1, html[data-theme="dark"] .app-form h2, html[data-theme="dark"] .app-form h3, html[data-theme="dark"] .app-form p, html[data-theme="dark"] .app-form label, html[data-theme="dark"] .app-form div { color: var(--text-color); } html[data-theme="dark"] .app-form div, html[data-theme="dark"] .app-form span, html[data-theme="dark"] .app-form p, html[data-theme="dark"] .app-form h1, html[data-theme="dark"] .app-form h2, html[data-theme="dark"] .app-form ul, html[data-theme="dark"] .app-form li { background-color: transparent !important; } html[data-theme="dark"] .app-form a { color: var(--primary-color) !important; } html[data-theme="dark"] .app-form a:hover { color: var(--primary-color) !important; } html[data-theme="dark"] #commercial-container .title>span { color: var(--text-color) !important; } html[data-theme="dark"] #commercial-container .content-project-images img { --tw-shadow: 0 25px 60px -20px rgba(255, 255, 255, 0.35); --tw-shadow-colored: 0 25px 80px -20px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #ffffff00), var(--tw-ring-shadow, 0 0 #ffffff00), var(--tw-shadow); } html[data-theme="dark"] .adword-apps>div { background: var(--card-bg) !important; color: var(--text-color) !important; --tw-shadow: 0 10px 20px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -4px rgba(255, 255, 255, 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #ffffff00), var(--tw-ring-shadow, 0 0 #ffffff00), var(--tw-shadow); } html[data-theme="dark"] #kc-login { color: white !important; } html[data-theme="dark"] #kc-current-locale-link { background-color: var(--background-color) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] #kc-current-locale-link svg { color: white !important; } html[data-theme="dark"] .language-item { background-color: var(--background-color) !important; box-shadow: rgba(255, 255, 255, 0.1) 0px 5px 15px; } html[data-theme="dark"] .checkbox>label>span { color: white !important; } html[data-theme="dark"] #filika-loading>path:nth-child(2) { fill: var(--background-color) !important; } html[data-theme="dark"] .criteria-item { color: white !important; } html[data-theme="dark"] .adword-apps-title { color: var(--text-color) !important; } html[data-theme="dark"] .app-form-item { border-color: var(--border-color) !important; } html[data-theme="dark"] .page-expired .instruction { border-color: var(--border-color) !important; } html[data-theme="dark"] .pf-c-button.btn-default:hover { color: var(--background-color) !important; } html[data-theme="dark"] .social-link img { background-color: var(--background-color) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .criteria-item.valid { color: #27b227 !important; } html[data-theme="dark"] #kc-terms-text { border-color: var(--border-color) !important; } html[data-theme="dark"] .dynamic-message { color: var(--muted-color) !important; } html[data-theme="dark"] .register-link>span { color: var(--muted-color) !important; } html[data-theme="dark"] .text-center-hr::before, html[data-theme="dark"] .text-center-hr::after { border-color: var(--border-color) !important; } html[data-theme="dark"] .smartbanner { background-color: var(--background-color) !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .smartbanner-info { color: var(--text-color) !important; } html[data-theme="dark"] .smartbanner-title { color: white; } html[data-theme="dark"] .smartbanner-close { background-color: #ffffff20 !important; color: white; } /* ---------- Inputs ---------- */ html[data-theme="dark"] .custom-form-input { background: var(--form-control) !important; border-color: var(--border-color) !important; color: var(--text-color) !important; } html[data-theme="dark"] .custom-form-input::placeholder { color: var(--muted-color); } html[data-theme="dark"] .custom-form-label, html[data-theme="dark"] .custom-form-label * { color: var(--muted-color) !important; } /* ---------- Social / secondary buttons ---------- */ html[data-theme="dark"] .custom-social-account-button { background: var(--background-color) !important; border-color: var(--border-color) !important; color: var(--text-color) !important; } html[data-theme="dark"] .custom-social-account-button:hover { border-color: var(--border-hover) !important; }