/* Dynamic Discoveries - Site Theme (REQ-1003) Goals: educational, soft/fluffy, modern micro-interactions, not overdone. Constraints: Bootstrap-compatible; CSS-only; respect prefers-reduced-motion. */ :root { /* Brand palette (soft + cheerful, not neon) */ --dd-primary: #5b7cfb; /* periwinkle */ --dd-primary-rgb: 91, 124, 251; --dd-accent: #b08cfd; /* lavender */ --dd-accent-rgb: 176, 140, 253; --dd-mint: #57d3c2; /* mint */ --dd-mint-rgb: 87, 211, 194; --dd-sun: #ffd8a8; /* warm peach */ --dd-sun-rgb: 255, 216, 168; /* Ink + surfaces */ --dd-ink: #203047; --dd-ink-muted: #5b6a82; --dd-border: rgba(32, 48, 71, 0.12); --dd-surface: rgba(255, 255, 255, 0.78); --dd-surface-solid: #ffffff; --dd-surface-warm: rgba(255, 247, 242, 0.92); --dd-surface-cool: rgba(244, 248, 255, 0.92); /* Shadows */ --dd-shadow-sm: 0 10px 28px rgba(32, 48, 71, 0.10); --dd-shadow-md: 0 16px 44px rgba(32, 48, 71, 0.14); --dd-shadow-focus: 0 0 0 0.25rem rgba(var(--dd-primary-rgb), 0.18); /* Bootstrap variable overrides */ --bs-body-color: var(--dd-ink); --bs-body-bg: transparent; --bs-primary: var(--dd-primary); --bs-primary-rgb: var(--dd-primary-rgb); --bs-link-color: var(--dd-primary); --bs-link-hover-color: #3f63f6; --bs-border-color: rgba(32, 48, 71, 0.14); --bs-border-radius: 0.9rem; --bs-border-radius-lg: 1.1rem; } html { height: 100%; /* Render the global background on the document element to avoid tiling seams */ background: radial-gradient(1100px 650px at 12% 8%, rgba(var(--dd-accent-rgb), 0.18), transparent 55%), radial-gradient(900px 600px at 92% 10%, rgba(var(--dd-mint-rgb), 0.16), transparent 52%), radial-gradient(1000px 650px at 22% 92%, rgba(var(--dd-sun-rgb), 0.18), transparent 58%), linear-gradient(180deg, #f6f4ff 0%, #f8fbff 45%, #fff8f3 100%); background-repeat: no-repeat; background-attachment: fixed; } body { min-height: 100%; display: flex; flex-direction: column; font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--dd-ink); /* Background is rendered on to prevent scroll seams */ background: transparent; } /* Subtle dot texture overlay (kept very light) */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(32, 48, 71, 0.06) 1px, transparent 1px); background-size: 18px 18px; opacity: 0.55; } main { flex: 1; } /* Default page surface inside the main content container */ main > .container.py-4 { background: var(--dd-surface); border: 1px solid var(--dd-border); border-radius: 1.25rem; box-shadow: var(--dd-shadow-sm); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Navbar: slightly translucent for modern feel */ .navbar { margin-bottom: 0; background: rgba(255, 255, 255, 0.78) !important; border-bottom: 1px solid rgba(32, 48, 71, 0.08); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Menus (dropdowns, account menus, role menus) */ .dropdown-menu { background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(32, 48, 71, 0.14); box-shadow: var(--dd-shadow-md); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 1rem; padding: 0.5rem; } .dropdown-menu .dropdown-header { color: var(--dd-ink-muted); font-weight: 600; } .dropdown-menu .dropdown-divider { border-top-color: rgba(32, 48, 71, 0.10); } .dropdown-item { color: var(--dd-ink); border-radius: 0.85rem; padding: 0.55rem 0.75rem; transition: background-color 140ms ease, transform 140ms ease; } .dropdown-item:hover, .dropdown-item:focus { background: rgba(var(--dd-primary-rgb), 0.10); color: var(--dd-ink); transform: translateY(-1px); } .dropdown-item.active, .dropdown-item:active { background: rgba(var(--dd-primary-rgb), 0.16); color: var(--dd-ink); } .dropdown-item i.bi { opacity: 0.9; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: 'Fredoka', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 600; letter-spacing: -0.01em; } section { position: relative; } /* Utility: not a Bootstrap default, but used by home template */ .min-vh-75 { min-height: 75vh; } /* Hero: fluffy gradient + soft blobs */ .hero-section { position: relative; overflow: hidden; border-radius: 1.5rem; background: linear-gradient(135deg, rgba(var(--dd-primary-rgb), 0.95) 0%, rgba(var(--dd-accent-rgb), 0.88) 55%, rgba(var(--dd-mint-rgb), 0.82) 100%); box-shadow: var(--dd-shadow-md); border: 1px solid rgba(255, 255, 255, 0.18); } .hero-section::before, .hero-section::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 999px; filter: blur(20px); opacity: 0.35; pointer-events: none; } .hero-section::before { left: -220px; top: -220px; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(var(--dd-sun-rgb), 0.55), transparent 70%); } .hero-section::after { right: -240px; bottom: -260px; background: radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.85), rgba(var(--dd-mint-rgb), 0.55), transparent 72%); } .hero-section .container { position: relative; z-index: 1; } .hero-section h1 { text-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); } /* Fluffy section backgrounds used by home */ .bg-pattern { background: radial-gradient(700px 360px at 20% 20%, rgba(var(--dd-accent-rgb), 0.10), transparent 65%), radial-gradient(700px 360px at 85% 35%, rgba(var(--dd-mint-rgb), 0.10), transparent 65%), linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.10) 100%); } .bg-warm { background: var(--dd-surface-warm) !important; border: 1px solid rgba(32, 48, 71, 0.08); } .bg-warm-alt { background: radial-gradient(900px 420px at 20% 20%, rgba(var(--dd-sun-rgb), 0.16), transparent 62%), linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.12) 100%); } .shadow-soft { box-shadow: var(--dd-shadow-sm); border: 1px solid rgba(32, 48, 71, 0.10); border-radius: 1.25rem; background: var(--dd-surface-solid); } .section-divider { height: 1px; border: 0; margin: 1.5rem 0; background: linear-gradient(90deg, transparent, rgba(var(--dd-primary-rgb), 0.35), rgba(var(--dd-accent-rgb), 0.22), transparent); } /* Cards: softer corners + gentle hover lift */ .card { border: 1px solid rgba(32, 48, 71, 0.08); border-radius: 1.1rem; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; background: rgba(255, 255, 255, 0.92); } .card:hover { transform: translateY(-4px); box-shadow: var(--dd-shadow-md); border-color: rgba(var(--dd-primary-rgb), 0.22); } .card.border-0.shadow-sm { border-radius: 1.1rem; overflow: hidden; } .card.border-0.shadow-sm .card-body { padding: 2rem 1.5rem; } /* Icons and small UI motion */ .bi { transition: transform 180ms ease; } .card:hover .bi { transform: translateY(-2px) scale(1.05); } /* Form Controls: explicit white background for all inputs (REQ-UI-025) */ .form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="search"], textarea, select { background-color: #ffffff !important; color: var(--dd-ink); } .form-control:focus, .form-select:focus { background-color: #ffffff !important; } /* Override browser autofill background */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px white inset !important; background-color: #ffffff !important; } /* Buttons: slightly more playful, still professional */ .btn { border-radius: 999px; transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, border-color 140ms ease; } .btn:focus-visible { box-shadow: var(--dd-shadow-focus); outline: 0; } .btn-primary { border: none; padding: 0.65rem 1.4rem; background: linear-gradient(135deg, rgba(var(--dd-primary-rgb), 1) 0%, rgba(var(--dd-accent-rgb), 0.92) 100%); box-shadow: 0 10px 22px rgba(var(--dd-primary-rgb), 0.18); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(var(--dd-primary-rgb), 0.22); } .btn-outline-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14); } /* Alerts spacing */ .alert { margin-bottom: 1rem; border-radius: 1rem; } /* HTMX loading indicators */ .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline; } .htmx-request.htmx-indicator { display: inline; } /* Footer styling */ .site-footer { background: linear-gradient(135deg, rgba(32, 48, 71, 0.96) 0%, rgba(39, 57, 84, 0.96) 100%); margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw; margin-top: auto; position: relative; } .site-footer a:hover { opacity: 0.88; } /* Motion helpers (used on home) */ .fade-in { animation: ddFadeIn 700ms ease both; } .slide-in-left { animation: ddSlideInLeft 650ms ease both; } .slide-in-right { animation: ddSlideInRight 650ms ease both; } @keyframes ddFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes ddSlideInLeft { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } } @keyframes ddSlideInRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } } /* Responsive adjustments */ @media (max-width: 768px) { .hero-section { padding: 2.5rem 0; } .card.border-0.shadow-sm .card-body { padding: 1.5rem 1rem; } }