/* * Parke Auth Stylesheet * Loaded exclusively by app/views/layouts/devise.html.erb * * Dark tokens: * Background #0a0a0f Surface #0d0d1a * Cyan #00d4ff Amber #f5a623 * Text #eeeeff Muted rgba(238,238,255,0.45) * Border rgba(255,255,255,0.07) * * Light tokens: * Background #f0f2f5 Surface #ffffff * Cyan #0090cc Amber #d98008 * Text #1a1a2e Muted rgba(26,26,46,0.5) * Border rgba(0,0,0,0.1) * * Fonts: Syne (headings) + Outfit (body) — loaded via Google Fonts in the layout */ /* ═══════════════════════════════════════════════════════════════ LIGHT THEME (default — no .dark on ) ═══════════════════════════════════════════════════════════════ */ /* ── RESET / BASE ──────────────────────────────────────────── */ .parke-auth-body { background-color: #f0f2f5 !important; background-image: radial-gradient(ellipse at 20% 30%, rgba(0, 144, 204, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(217, 128, 8, 0.05) 0%, transparent 55%), radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px) !important; background-size: auto, auto, 28px 28px !important; font-family: "Outfit", system-ui, sans-serif !important; color: #1a1a2e !important; } /* ── CARD ──────────────────────────────────────────────────── */ .parke-auth-body .bg-white { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 32px 80px rgba(0, 0, 0, 0.08) !important; } /* ── TYPOGRAPHY ────────────────────────────────────────────── */ .parke-auth-body h1 { font-family: "Syne", system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.025em !important; color: #1a1a2e !important; } .parke-auth-body .text-gray-900 { color: #1a1a2e !important; } .parke-auth-body .text-gray-700 { color: rgba(26, 26, 46, 0.65) !important; } .parke-auth-body .text-gray-600 { color: rgba(26, 26, 46, 0.5) !important; } .parke-auth-body .text-gray-500 { color: rgba(26, 26, 46, 0.4) !important; } .parke-auth-body .text-xs.text-gray-500 { color: rgba(26, 26, 46, 0.4) !important; font-size: 0.72rem !important; } /* ── LOGO / BRAND HEADER ───────────────────────────────────── */ .parke-auth-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; text-decoration: none; } .parke-auth-logo-mark { width: 36px; height: 36px; background: linear-gradient(135deg, #00d4ff, #0090cc); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: "Syne", system-ui, sans-serif; font-weight: 800; font-size: 1.05rem; color: #060610; box-shadow: 0 0 20px rgba(0, 212, 255, 0.35); flex-shrink: 0; } .parke-auth-logo-name { font-family: "Syne", system-ui, sans-serif; font-weight: 800; font-size: 1.25rem; letter-spacing: -0.02em; color: #1a1a2e; } /* ── FORM LABELS ───────────────────────────────────────────── */ .parke-auth-body label, .parke-auth-body .block.text-sm.font-medium { font-family: "Syne", system-ui, sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(26, 26, 46, 0.45) !important; margin-bottom: 8px !important; } /* ── INPUTS ────────────────────────────────────────────────── */ .parke-auth-body input[type="email"], .parke-auth-body input[type="password"], .parke-auth-body input[type="text"] { background: #ffffff !important; border: 1px solid rgba(0, 0, 0, 0.12) !important; border-radius: 10px !important; color: #1a1a2e !important; font-family: "Outfit", system-ui, sans-serif !important; font-size: 0.9rem !important; padding: 13px 14px 13px 44px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; outline: none !important; } .parke-auth-body input[type="email"]:focus, .parke-auth-body input[type="password"]:focus, .parke-auth-body input[type="text"]:focus { border-color: rgba(0, 144, 204, 0.45) !important; box-shadow: 0 0 0 3px rgba(0, 144, 204, 0.1) !important; background: rgba(0, 144, 204, 0.02) !important; } .parke-auth-body input::placeholder { color: rgba(26, 26, 46, 0.3) !important; } .parke-auth-body .absolute svg { color: rgba(26, 26, 46, 0.3) !important; stroke: rgba(26, 26, 46, 0.3) !important; } .parke-auth-body input:focus + .absolute svg, .parke-auth-body input:focus ~ .absolute svg { stroke: rgba(0, 144, 204, 0.6) !important; } .parke-auth-body .focus\:ring-indigo-500:focus, .parke-auth-body .focus\:border-indigo-500:focus { --tw-ring-color: rgba(0, 144, 204, 0.3) !important; border-color: rgba(0, 144, 204, 0.45) !important; } /* ── CHECKBOX ──────────────────────────────────────────────── */ .parke-auth-body input[type="checkbox"] { accent-color: #0090cc !important; background: #ffffff !important; border-color: rgba(0, 0, 0, 0.15) !important; width: 16px !important; height: 16px !important; } /* ── SUBMIT BUTTON ─────────────────────────────────────────── */ .parke-auth-body input[type="submit"], .parke-auth-body button[type="submit"] { background: linear-gradient(135deg, #0090cc, #0075a8) !important; color: #ffffff !important; font-family: "Syne", system-ui, sans-serif !important; font-weight: 700 !important; font-size: 0.9rem !important; letter-spacing: 0.03em !important; border: none !important; border-radius: 12px !important; padding: 14px 24px !important; box-shadow: 0 0 28px rgba(0, 144, 204, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; cursor: pointer !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .parke-auth-body input[type="submit"]:hover, .parke-auth-body button[type="submit"]:hover { transform: translateY(-2px) !important; box-shadow: 0 0 44px rgba(0, 144, 204, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; background: linear-gradient(135deg, #00a8e8, #0090cc) !important; } .parke-auth-body .bg-indigo-600 { background: linear-gradient(135deg, #0090cc, #0075a8) !important; color: #ffffff !important; border-radius: 12px !important; box-shadow: 0 0 28px rgba(0, 144, 204, 0.2) !important; } .parke-auth-body .hover\:bg-indigo-700:hover, .parke-auth-body .bg-indigo-600:hover { background: linear-gradient(135deg, #00a8e8, #0090cc) !important; transform: translateY(-2px) !important; } /* ── LINKS ─────────────────────────────────────────────────── */ .parke-auth-body a, .parke-auth-body .text-indigo-600 { color: #0090cc !important; transition: color 0.2s ease !important; } .parke-auth-body a:hover, .parke-auth-body .text-indigo-600:hover, .parke-auth-body .hover\:text-indigo-500:hover { color: rgba(0, 114, 174, 0.8) !important; } .parke-auth-body .text-sm.font-medium.text-indigo-600 { font-size: 0.82rem !important; font-weight: 500 !important; } .parke-auth-body .mt-6.text-center p { color: rgba(26, 26, 46, 0.4) !important; font-size: 0.85rem !important; } /* ── ERROR MESSAGES ────────────────────────────────────────── */ .parke-auth-body #error_explanation { background: rgba(239, 68, 68, 0.05) !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; border-radius: 12px !important; padding: 16px 20px !important; margin-bottom: 20px !important; } .parke-auth-body #error_explanation h2 { font-family: "Syne", system-ui, sans-serif !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: rgba(185, 28, 28, 0.9) !important; margin-bottom: 10px !important; } .parke-auth-body #error_explanation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .parke-auth-body #error_explanation li { font-size: 0.85rem !important; color: rgba(185, 28, 28, 0.8) !important; font-weight: 300 !important; padding-left: 14px !important; position: relative !important; } .parke-auth-body #error_explanation li::before { content: "—" !important; position: absolute !important; left: 0 !important; color: rgba(185, 28, 28, 0.5) !important; } .parke-auth-body .field_with_errors input { border-color: rgba(239, 68, 68, 0.5) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important; } /* ── FLASH MESSAGES ────────────────────────────────────────── */ .parke-auth-body #flash-notice { background: rgba(0, 144, 204, 0.06) !important; border: 1px solid rgba(0, 144, 204, 0.22) !important; color: rgba(0, 114, 174, 0.9) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important; } .parke-auth-body #flash-notice svg { color: #0090cc !important; } .parke-auth-body #flash-notice button { color: rgba(0, 144, 204, 0.5) !important; } .parke-auth-body #flash-notice button:hover { color: #0090cc !important; } .parke-auth-body #flash-alert { background: rgba(239, 68, 68, 0.05) !important; border: 1px solid rgba(239, 68, 68, 0.2) !important; color: rgba(185, 28, 28, 0.9) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06) !important; } .parke-auth-body #flash-alert svg { color: rgba(185, 28, 28, 0.8) !important; } .parke-auth-body #flash-alert button { color: rgba(185, 28, 28, 0.5) !important; } .parke-auth-body #flash-alert button:hover { color: rgba(185, 28, 28, 0.9) !important; } /* ── DIVIDERS ──────────────────────────────────────────────── */ .parke-auth-body .mt-6 { border-top: 1px solid rgba(0, 0, 0, 0.07) !important; padding-top: 24px !important; } /* ── CARD SPACING TWEAKS ───────────────────────────────────── */ .parke-auth-body .text-center.mb-8 h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important; margin-bottom: 10px !important; } /* ── REMEMBER ME LABEL ─────────────────────────────────────── */ .parke-auth-body .flex.items-center label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.85rem !important; color: rgba(26, 26, 46, 0.5) !important; } /* ═══════════════════════════════════════════════════════════════ DARK THEME (.dark on ) ═══════════════════════════════════════════════════════════════ */ /* ── RESET / BASE ──────────────────────────────────────────── */ .dark .parke-auth-body { background-color: #0a0a0f !important; background-image: radial-gradient(ellipse at 20% 30%, rgba(0, 212, 255, 0.06) 0%, transparent 55%), radial-gradient(ellipse at 80% 70%, rgba(245, 166, 35, 0.05) 0%, transparent 55%), radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px) !important; background-size: auto, auto, 28px 28px !important; font-family: "Outfit", system-ui, sans-serif !important; color: #eeeeff !important; } /* ── CARD ──────────────────────────────────────────────────── */ .dark .parke-auth-body .bg-white { background: rgba(255, 255, 255, 0.025) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 32px 80px rgba(0, 0, 0, 0.6) !important; } /* ── TYPOGRAPHY ────────────────────────────────────────────── */ .dark .parke-auth-body h1 { font-family: "Syne", system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.025em !important; color: #eeeeff !important; } .dark .parke-auth-body .text-gray-900 { color: #eeeeff !important; } .dark .parke-auth-body .text-gray-700 { color: rgba(238, 238, 255, 0.55) !important; } .dark .parke-auth-body .text-gray-600 { color: rgba(238, 238, 255, 0.38) !important; } .dark .parke-auth-body .text-gray-500 { color: rgba(238, 238, 255, 0.3) !important; } .dark .parke-auth-body .text-xs.text-gray-500 { color: rgba(238, 238, 255, 0.3) !important; font-size: 0.72rem !important; } /* ── LOGO ──────────────────────────────────────────────────── */ .dark .parke-auth-logo-name { color: #eeeeff; } /* ── FORM LABELS ───────────────────────────────────────────── */ .dark .parke-auth-body label, .dark .parke-auth-body .block.text-sm.font-medium { font-family: "Syne", system-ui, sans-serif !important; font-size: 0.72rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(238, 238, 255, 0.4) !important; margin-bottom: 8px !important; } /* ── INPUTS ────────────────────────────────────────────────── */ .dark .parke-auth-body input[type="email"], .dark .parke-auth-body input[type="password"], .dark .parke-auth-body input[type="text"] { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 10px !important; color: #eeeeff !important; font-family: "Outfit", system-ui, sans-serif !important; font-size: 0.9rem !important; padding: 13px 14px 13px 44px !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; outline: none !important; } .dark .parke-auth-body input[type="email"]:focus, .dark .parke-auth-body input[type="password"]:focus, .dark .parke-auth-body input[type="text"]:focus { border-color: rgba(0, 212, 255, 0.45) !important; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08) !important; background: rgba(0, 212, 255, 0.03) !important; } .dark .parke-auth-body input::placeholder { color: rgba(238, 238, 255, 0.2) !important; } .dark .parke-auth-body .absolute svg { color: rgba(238, 238, 255, 0.25) !important; stroke: rgba(238, 238, 255, 0.25) !important; } .dark .parke-auth-body input:focus + .absolute svg, .dark .parke-auth-body input:focus ~ .absolute svg { stroke: rgba(0, 212, 255, 0.6) !important; } .dark .parke-auth-body .focus\:ring-indigo-500:focus, .dark .parke-auth-body .focus\:border-indigo-500:focus { --tw-ring-color: rgba(0, 212, 255, 0.3) !important; border-color: rgba(0, 212, 255, 0.45) !important; } /* ── CHECKBOX ──────────────────────────────────────────────── */ .dark .parke-auth-body input[type="checkbox"] { accent-color: #00d4ff !important; background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.15) !important; width: 16px !important; height: 16px !important; } /* ── SUBMIT BUTTON ─────────────────────────────────────────── */ .dark .parke-auth-body input[type="submit"], .dark .parke-auth-body button[type="submit"] { background: linear-gradient(135deg, #00d4ff, #009bcc) !important; color: #060610 !important; font-family: "Syne", system-ui, sans-serif !important; font-weight: 700 !important; font-size: 0.9rem !important; letter-spacing: 0.03em !important; border: none !important; border-radius: 12px !important; padding: 14px 24px !important; box-shadow: 0 0 28px rgba(0, 212, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; cursor: pointer !important; transition: transform 0.2s ease, box-shadow 0.2s ease !important; } .dark .parke-auth-body input[type="submit"]:hover, .dark .parke-auth-body button[type="submit"]:hover { transform: translateY(-2px) !important; box-shadow: 0 0 44px rgba(0, 212, 255, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; background: linear-gradient(135deg, #19daff, #00b8e8) !important; } .dark .parke-auth-body .bg-indigo-600 { background: linear-gradient(135deg, #00d4ff, #009bcc) !important; color: #060610 !important; border-radius: 12px !important; box-shadow: 0 0 28px rgba(0, 212, 255, 0.28) !important; } .dark .parke-auth-body .hover\:bg-indigo-700:hover, .dark .parke-auth-body .bg-indigo-600:hover { background: linear-gradient(135deg, #19daff, #00b8e8) !important; transform: translateY(-2px) !important; } /* ── LINKS ─────────────────────────────────────────────────── */ .dark .parke-auth-body a, .dark .parke-auth-body .text-indigo-600 { color: #00d4ff !important; transition: color 0.2s ease !important; } .dark .parke-auth-body a:hover, .dark .parke-auth-body .text-indigo-600:hover, .dark .parke-auth-body .hover\:text-indigo-500:hover { color: rgba(0, 212, 255, 0.75) !important; } .dark .parke-auth-body .text-sm.font-medium.text-indigo-600 { font-size: 0.82rem !important; font-weight: 500 !important; } .dark .parke-auth-body .mt-6.text-center p { color: rgba(238, 238, 255, 0.35) !important; font-size: 0.85rem !important; } /* ── ERROR MESSAGES ────────────────────────────────────────── */ .dark .parke-auth-body #error_explanation { background: rgba(239, 68, 68, 0.06) !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; border-radius: 12px !important; padding: 16px 20px !important; margin-bottom: 20px !important; } .dark .parke-auth-body #error_explanation h2 { font-family: "Syne", system-ui, sans-serif !important; font-size: 0.8rem !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: rgba(248, 113, 113, 0.9) !important; margin-bottom: 10px !important; } .dark .parke-auth-body #error_explanation ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; } .dark .parke-auth-body #error_explanation li { font-size: 0.85rem !important; color: rgba(252, 165, 165, 0.8) !important; font-weight: 300 !important; padding-left: 14px !important; position: relative !important; } .dark .parke-auth-body #error_explanation li::before { content: "—" !important; position: absolute !important; left: 0 !important; color: rgba(248, 113, 113, 0.5) !important; } .dark .parke-auth-body .field_with_errors input { border-color: rgba(239, 68, 68, 0.5) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08) !important; } /* ── FLASH MESSAGES ────────────────────────────────────────── */ .dark .parke-auth-body #flash-notice { background: rgba(0, 212, 255, 0.06) !important; border: 1px solid rgba(0, 212, 255, 0.22) !important; color: rgba(0, 212, 255, 0.9) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; } .dark .parke-auth-body #flash-notice svg { color: #00d4ff !important; } .dark .parke-auth-body #flash-notice button { color: rgba(0, 212, 255, 0.5) !important; } .dark .parke-auth-body #flash-notice button:hover { color: #00d4ff !important; } .dark .parke-auth-body #flash-alert { background: rgba(239, 68, 68, 0.06) !important; border: 1px solid rgba(239, 68, 68, 0.22) !important; color: rgba(252, 165, 165, 0.9) !important; border-radius: 12px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; } .dark .parke-auth-body #flash-alert svg { color: rgba(248, 113, 113, 0.8) !important; } .dark .parke-auth-body #flash-alert button { color: rgba(248, 113, 113, 0.5) !important; } .dark .parke-auth-body #flash-alert button:hover { color: rgba(248, 113, 113, 0.9) !important; } /* ── DIVIDERS ──────────────────────────────────────────────── */ .dark .parke-auth-body .mt-6 { border-top: 1px solid rgba(255, 255, 255, 0.07) !important; padding-top: 24px !important; } /* ── CARD SPACING TWEAKS ───────────────────────────────────── */ .dark .parke-auth-body .text-center.mb-8 h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important; margin-bottom: 10px !important; } /* ── REMEMBER ME LABEL ─────────────────────────────────────── */ .dark .parke-auth-body .flex.items-center label { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.85rem !important; color: rgba(238, 238, 255, 0.45) !important; }