/* Mission Control auth-portal custom styles Targets caddy-security v1.1.62 actual DOM (verified via DevTools Apr 30): .app-page > .app-content > .app-container > .logo-box, #authenticators ... Button: .app-login-btn-box > div (tailwind arbitrary-color), .app-login-btn-txt Logo: rendered inside .logo-box QR: #qr (we hide), #bookmarks (we hide) */ /* Background: jungle photo, full-bleed, fixed so card scrolls without parallax oddities */ html.h-full, body.h-full, html, body { background: #0a0f1e url('/auth-bg.jpg') no-repeat center center fixed !important; background-size: cover !important; color: #f4eee0 !important; min-height: 100vh; } /* Vignette overlay for readability */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.65) 100%); pointer-events: none; z-index: 0; } /* Content sits above overlay */ .app-page, .app-content, .app-container { position: relative; z-index: 1; background: transparent !important; } /* The auth card container: caddy-security's .app-container is the white card when bg-blue-100 is on . Override to dark warm card. */ .app-container { background: rgba(20, 28, 38, 0.85) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; border: 1px solid rgba(201, 168, 110, 0.35) !important; box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important; border-radius: 12px !important; padding: 2rem !important; } /* Logo box: cherub */ .logo-box { text-align: center; margin-bottom: 1.5rem; } .logo-box img { max-height: 140px !important; max-width: 180px !important; width: auto !important; height: auto !important; margin: 0 auto !important; display: block !important; filter: drop-shadow(0 6px 16px rgba(201, 168, 110, 0.25)); } /* All text in the card: warm cream */ .app-page, .app-content, .app-container, .app-page *, .app-content *, .app-container * { color: #f4eee0 !important; } /* Headings (look for any h1/h2/h3 inside the card) */ .app-container h1, .app-container h2, .app-container h3 { font-family: Georgia, "Cormorant Garamond", "Times New Roman", serif !important; font-weight: 400 !important; letter-spacing: 0.02em !important; text-align: center !important; margin-bottom: 1rem !important; } /* The login button — verified DOM:
(icon side)
*/ /* Make the entire button row a single gold gradient strip */ .app-login-btn-box { background: linear-gradient(135deg, #c9a86e 0%, #a98648 100%) !important; border: 1px solid #c9a86e !important; border-radius: 8px !important; box-shadow: 0 4px 14px rgba(201, 168, 110, 0.35) !important; overflow: hidden; transition: all 0.2s ease; } .app-login-btn-box > div { background: transparent !important; color: #1a1a1a !important; } /* Hide the Google "G" icon — we want a clean gold button */ .app-login-btn-box i.la-google, .app-login-btn-box .lab.la-google { display: none !important; } /* Replace "GOOGLE" text with "Enter the garden" via pseudo-element */ .app-login-btn-txt { visibility: hidden !important; position: relative; padding: 1rem 1.5rem !important; font-size: 0 !important; /* hide original text */ text-align: center !important; width: 100%; } .app-login-btn-txt::after { content: "Enter the garden"; visibility: visible; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #1a1a1a !important; font-family: Georgia, "Cormorant Garamond", "Times New Roman", serif !important; font-style: italic !important; font-weight: 500 !important; font-size: 1.25rem !important; letter-spacing: 0.04em !important; white-space: nowrap; } /* Button hover */ a:has(.app-login-btn-box):hover .app-login-btn-box, .app-login-btn-box:hover { background: linear-gradient(135deg, #d4b67d 0%, #b6924f 100%) !important; box-shadow: 0 6px 20px rgba(201, 168, 110, 0.5) !important; transform: translateY(-1px); } /* Hide the QR code section + bookmarks (#qr, #bookmarks already have `hidden` class in DOM but ensure they stay hidden if caddy-security ever toggles them) */ #qr, #bookmarks { display: none !important; } /* Hide the @authenticators wrapper's first sibling div if it's empty after our changes (defensive — caddy-security sometimes renders extra spacers) */ /* Links inside the card */ .app-container a { color: #c9a86e !important; } .app-container a:hover { color: #d4b67d !important; } /* Remove the default html/body bg-blue-100 white-ish backdrop */ html.bg-blue-100, .bg-blue-100 { background-color: transparent !important; } /* Hide the "Sign In" heading (redundant with "Enter the garden" button) */ .app-container h1, .app-container h2, .app-container h3 { display: none !important; }