Spaces:
Running
Running
| :root { | |
| --bg-dark: #1a1a1a; | |
| --text-main: #ffffff; | |
| --text-muted: #cccccc; | |
| --glass-bg: rgba(255, 255, 255, 0.12); | |
| --glass-border: rgba(255, 255, 255, 0.2); | |
| --primary-glow: rgba(255, 255, 255, 0.3); | |
| /* New color scheme: Yellow, White, Grey, Black */ | |
| --accent-1: #ffd700; | |
| --accent-2: #ffed4e; | |
| --accent-3: #f4f4f4; | |
| --accent-4: #e0e0e0; | |
| --accent-5: #999999; | |
| --accent-6: #333333; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| line-height: 1.6; | |
| } | |
| .build-marker { | |
| display: none; | |
| } | |
| .brand-logos { | |
| position: fixed; | |
| top: 0.9rem; | |
| left: 1rem; | |
| z-index: 1200; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.02rem; | |
| background: transparent; | |
| border: none; | |
| border-radius: 12px; | |
| padding: 0.2rem 0.3rem; | |
| backdrop-filter: blur(8px); | |
| } | |
| .brand-logo { | |
| display: block; | |
| object-fit: contain; | |
| } | |
| .sedna-logo { | |
| width: 250px; | |
| height: 83px; | |
| } | |
| .lvmwd-logo { | |
| width: 286px; | |
| height: 83px; | |
| margin-left: -42px; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| .login-overlay { | |
| position: fixed; | |
| inset: 0; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1.25rem; | |
| z-index: 2000; | |
| background: rgba(5, 8, 14, 0.86); | |
| backdrop-filter: blur(8px); | |
| } | |
| .login-card { | |
| width: min(560px, 100%); | |
| border-radius: 22px; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| background: linear-gradient(135deg, rgba(20, 25, 36, 0.96), rgba(30, 36, 48, 0.96)); | |
| padding: 2rem; | |
| box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45); | |
| } | |
| .login-card h2 { | |
| font-size: 1.8rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .login-card p { | |
| color: var(--text-muted); | |
| margin-bottom: 1.5rem; | |
| } | |
| .login-form { | |
| display: grid; | |
| gap: 0.75rem; | |
| } | |
| .login-form label { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: #b8b8b8; | |
| } | |
| .login-form input { | |
| width: 100%; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| border-radius: 12px; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: #b8b8b8 ; | |
| -webkit-text-fill-color: #b8b8b8; | |
| font-size: 1rem; | |
| padding: 0.8rem 0.9rem; | |
| } | |
| .login-form select { | |
| width: 100%; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| border-radius: 12px; | |
| background: rgba(120, 120, 120, 0.22); | |
| color: #b8b8b8 ; | |
| font-size: 1rem; | |
| padding: 0.8rem 0.9rem; | |
| } | |
| .login-form input::placeholder { | |
| color: #8f8f8f; | |
| } | |
| .login-form input:-webkit-autofill, | |
| .login-form input:-webkit-autofill:hover, | |
| .login-form input:-webkit-autofill:focus, | |
| .login-form input:-webkit-autofill:active { | |
| -webkit-text-fill-color: #b8b8b8 ; | |
| box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset ; | |
| transition: background-color 9999s ease-in-out 0s; | |
| } | |
| .login-form input:-moz-autofill { | |
| color: #b8b8b8 ; | |
| box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.05) inset ; | |
| } | |
| .login-form select option { | |
| background: #3a3a3a; | |
| color: #e6e6e6; | |
| } | |
| .login-form input:focus { | |
| outline: none; | |
| border-color: var(--accent-1); | |
| box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2); | |
| } | |
| .login-form select:focus { | |
| outline: none; | |
| border-color: var(--accent-1); | |
| box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.2); | |
| } | |
| .login-btn { | |
| margin-top: 0.75rem; | |
| border: 1px solid rgba(255, 215, 0, 0.4); | |
| border-radius: 12px; | |
| padding: 0.85rem 1rem; | |
| background: linear-gradient(135deg, rgba(255, 215, 0, 0.22), rgba(255, 237, 78, 0.12)); | |
| color: var(--text-main); | |
| font-weight: 700; | |
| cursor: pointer; | |
| } | |
| .user-session { | |
| margin-top: 1rem; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| padding: 0.5rem 0.7rem; | |
| border: 1px solid rgba(255, 255, 255, 0.15); | |
| border-radius: 999px; | |
| background: rgba(0, 0, 0, 0.22); | |
| } | |
| #current-user-label { | |
| font-size: 0.88rem; | |
| color: var(--text-muted); | |
| } | |
| #logout-btn { | |
| margin: 0; | |
| padding: 0.45rem 0.85rem; | |
| font-size: 0.82rem; | |
| } | |
| /* Background Effects */ | |
| .background-effects { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100vw; | |
| height: 100vh; | |
| z-index: -1; | |
| overflow: hidden; | |
| } | |
| .glow-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(100px); | |
| opacity: 0.6; | |
| animation: float 20s infinite ease-in-out alternate; | |
| } | |
| .orb-1 { | |
| width: 600px; | |
| height: 600px; | |
| background: radial-gradient(circle, rgba(255, 215, 0, 0.1), transparent 70%); | |
| top: -100px; | |
| left: -100px; | |
| } | |
| .orb-2 { | |
| width: 500px; | |
| height: 500px; | |
| background: radial-gradient(circle, rgba(255, 237, 78, 0.08), transparent 70%); | |
| bottom: -50px; | |
| right: -100px; | |
| animation-delay: -5s; | |
| } | |
| .orb-3 { | |
| width: 700px; | |
| height: 700px; | |
| background: radial-gradient(circle, rgba(200, 200, 200, 0.06), transparent 70%); | |
| top: 40%; | |
| left: 30%; | |
| opacity: 0.5; | |
| animation-delay: -10s; | |
| } | |
| @keyframes float { | |
| 0% { transform: translate(0, 0) scale(1); } | |
| 100% { transform: translate(120px, 80px) scale(1.1); } | |
| } | |
| /* Typography & Layout */ | |
| .main-header { | |
| text-align: center; | |
| padding: 4rem 1rem 3rem; | |
| animation: fadeInDown 1s ease-out; | |
| } | |
| .main-header h1 { | |
| font-size: 4rem; | |
| font-weight: 700; | |
| letter-spacing: -1px; | |
| margin-bottom: 0.5rem; | |
| } | |
| .main-header h1 span { | |
| background: linear-gradient(to right, var(--accent-1), var(--accent-2)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .main-header p { | |
| font-size: 1.25rem; | |
| color: var(--text-muted); | |
| font-weight: 300; | |
| } | |
| main { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 2rem 4rem; | |
| position: relative; | |
| min-height: 50vh; | |
| } | |
| /* View System */ | |
| .view { | |
| display: none; | |
| opacity: 0; | |
| transform: translateY(20px); | |
| transition: opacity 0.5s ease, transform 0.5s ease; | |
| min-height: 60vh; | |
| pointer-events: none; | |
| } | |
| .view.active { | |
| display: block ; | |
| opacity: 1; | |
| transform: translateY(0); | |
| animation: fadeInUp 0.5s ease-out forwards; | |
| pointer-events: auto; | |
| } | |
| /* Grids */ | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 2.5rem; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #categories-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 2.5rem; | |
| width: 100%; | |
| } | |
| /* Glassmorphism Cards */ | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.12); | |
| backdrop-filter: blur(16px); | |
| -webkit-backdrop-filter: blur(16px); | |
| border: 2px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 24px; | |
| padding: 2.5rem; | |
| cursor: pointer; | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| display: flex ; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); | |
| min-height: 250px; | |
| visibility: visible ; | |
| opacity: 1 ; | |
| animation: slideIn 0.6s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .glass-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.08), transparent); | |
| transform: translateX(-100%); | |
| transition: transform 0.6s ease; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-12px) scale(1.02); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| background: rgba(255, 255, 255, 0.08); | |
| } | |
| .glass-card:hover::before { | |
| transform: translateX(100%); | |
| } | |
| .category-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 1.5rem; | |
| display: inline-flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 20px; | |
| background: rgba(0, 0, 0, 0.3); | |
| box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.05); | |
| } | |
| .glass-card h3 { | |
| font-size: 1.6rem; | |
| font-weight: 600; | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| } | |
| .glass-card p { | |
| color: var(--text-muted); | |
| font-size: 1.05rem; | |
| flex-grow: 1; | |
| } | |
| .glass-card .meta { | |
| margin-top: 1.5rem; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| padding: 0.5rem 1.2rem; | |
| border-radius: 20px; | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| /* Use Case View Styles */ | |
| .glass-btn { | |
| background: var(--glass-bg); | |
| border: 1px solid var(--glass-border); | |
| color: var(--text-main); | |
| padding: 0.8rem 1.8rem; | |
| border-radius: 30px; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| backdrop-filter: blur(10px); | |
| transition: all 0.3s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 3rem; | |
| } | |
| .glass-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| transform: translateX(-5px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .category-header { | |
| margin-bottom: 4rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| animation: fadeInDown 0.6s ease; | |
| } | |
| .category-header i { | |
| font-size: 4rem; | |
| margin-bottom: 1.2rem; | |
| filter: drop-shadow(0 0 15px currentColor); | |
| } | |
| .category-header h2 { | |
| font-size: 3rem; | |
| margin-bottom: 0.75rem; | |
| font-weight: 700; | |
| } | |
| .category-header p { | |
| color: var(--text-muted); | |
| font-size: 1.2rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 0.4rem 1.5rem; | |
| border-radius: 30px; | |
| border: 1px solid var(--glass-border); | |
| } | |
| .group-section { | |
| margin-bottom: 0; | |
| } | |
| .group-section-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| margin-bottom: 1.25rem; | |
| padding: 1rem 1.2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 14px; | |
| background: rgba(255, 255, 255, 0.03); | |
| cursor: pointer; | |
| list-style: none; | |
| min-height: 118px; | |
| } | |
| .group-section-header::-webkit-details-marker { | |
| display: none; | |
| } | |
| .group-section-header h3 { | |
| font-size: 1.2rem; | |
| color: var(--text-main); | |
| font-weight: 600; | |
| line-height: 1.35; | |
| } | |
| .group-section-meta { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.7rem; | |
| } | |
| .group-section-header p { | |
| color: var(--text-muted); | |
| font-size: 0.92rem; | |
| white-space: nowrap; | |
| } | |
| .group-section-header i { | |
| color: var(--text-muted); | |
| transition: transform 0.2s ease; | |
| } | |
| .group-section[open] .group-section-header i { | |
| transform: rotate(90deg); | |
| } | |
| .group-section:not([open]) .group-section-header { | |
| margin-bottom: 0; | |
| } | |
| .group-use-cases-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| /* Individual Use Case Items */ | |
| .use-case-card { | |
| background: rgba(15, 23, 42, 0.6); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| padding: 2rem; | |
| border-radius: 20px; | |
| border: 1px solid var(--glass-border); | |
| border-top: 4px solid var(--accent-1); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| opacity: 0; | |
| animation: slideUpFade 0.5s ease forwards; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .use-case-card.clickable { | |
| cursor: pointer; | |
| } | |
| .use-case-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); | |
| background: rgba(30, 41, 59, 0.7); | |
| } | |
| .use-case-card h4 { | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| color: #fff; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.75rem; | |
| line-height: 1.4; | |
| } | |
| .use-case-card h4 span.id-badge { | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 0.25rem 0.6rem; | |
| border-radius: 8px; | |
| font-size: 0.85rem; | |
| color: var(--accent-1); | |
| border: 1px solid var(--glass-border); | |
| flex-shrink: 0; | |
| margin-top: 2px; | |
| } | |
| .use-case-card p { | |
| color: var(--text-muted); | |
| font-size: 1.05rem; | |
| line-height: 1.6; | |
| margin-bottom: 1.5rem; | |
| } | |
| .view-details-hint { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| font-size: 0.9rem; | |
| color: var(--accent-1); | |
| font-weight: 600; | |
| opacity: 0.7; | |
| transition: all 0.3s ease; | |
| } | |
| .use-case-card:hover .view-details-hint { | |
| opacity: 1; | |
| gap: 0.75rem; | |
| } | |
| .use-case-image-preview { | |
| margin-top: 0.6rem; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 12px; | |
| overflow: hidden; | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .use-case-image-preview img { | |
| display: block; | |
| width: 100%; | |
| max-height: 180px; | |
| object-fit: cover; | |
| } | |
| .image-caption-small { | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--accent-1); | |
| padding: 0.45rem 0.6rem; | |
| } | |
| .use-case-image-preview.image-missing { | |
| border-style: dashed; | |
| } | |
| .use-case-image-preview.image-missing::before { | |
| content: 'Add oracle-of-water-1-1.png to the project folder to show this image preview'; | |
| display: block; | |
| color: var(--text-muted); | |
| font-size: 0.85rem; | |
| padding: 0.7rem; | |
| } | |
| .use-case-image-preview.image-missing img, | |
| .use-case-image-preview.image-missing .image-caption-small { | |
| display: none; | |
| } | |
| /* Animations */ | |
| @keyframes fadeInUp { | |
| from { opacity: 0; transform: translateY(30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes fadeInDown { | |
| from { opacity: 0; transform: translateY(-30px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| @keyframes slideUpFade { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Modal & Detail View */ | |
| .detail-modal { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.7); | |
| backdrop-filter: blur(4px); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1rem; | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .detail-modal.visible { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .detail-modal-content { | |
| background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.95)); | |
| backdrop-filter: blur(20px); | |
| -webkit-backdrop-filter: blur(20px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 32px; | |
| padding: 3rem; | |
| max-width: 900px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| position: relative; | |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); | |
| animation: slideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(50px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .modal-close { | |
| position: absolute; | |
| top: 1.5rem; | |
| right: 1.5rem; | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| color: var(--text-main); | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| font-size: 1.25rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| z-index: 10; | |
| } | |
| .modal-close:hover { | |
| background: rgba(255, 255, 255, 0.15); | |
| transform: rotate(90deg); | |
| } | |
| /* Detail Content Structure */ | |
| .detail-use-case { | |
| animation: fadeInUp 0.6s ease; | |
| } | |
| .detail-header { | |
| margin-bottom: 3rem; | |
| border-bottom: 2px solid var(--glass-border); | |
| padding-bottom: 2rem; | |
| } | |
| .detail-id-title { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .detail-id-badge { | |
| background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.2)); | |
| border: 2px solid var(--accent-1); | |
| padding: 0.5rem 1.2rem; | |
| border-radius: 12px; | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: var(--accent-1); | |
| flex-shrink: 0; | |
| } | |
| .detail-id-title h2 { | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| margin: 0; | |
| } | |
| .detail-id-title p { | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| margin: 0; | |
| } | |
| /* Sections Grid */ | |
| .detail-sections { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .section-card { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 20px; | |
| padding: 2rem; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .section-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: linear-gradient(90deg, var(--accent-1), var(--accent-2), transparent); | |
| } | |
| .section-card:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .section-icon { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| color: var(--accent-1); | |
| display: inline-block; | |
| } | |
| .section-card h3 { | |
| font-size: 1.35rem; | |
| margin-bottom: 1rem; | |
| color: var(--text-main); | |
| font-weight: 600; | |
| } | |
| .section-card p, | |
| .section-card li { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| line-height: 1.7; | |
| margin: 0 0 0.75rem 0; | |
| } | |
| .section-card ul { | |
| margin: 1rem 0; | |
| padding-left: 1.5rem; | |
| } | |
| .section-card li { | |
| margin-bottom: 0.5rem; | |
| } | |
| /* Full Description */ | |
| .detail-description { | |
| background: rgba(255, 255, 255, 0.02); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 20px; | |
| padding: 2.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .detail-description h3 { | |
| font-size: 1.4rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--text-main); | |
| } | |
| .detail-description p { | |
| color: var(--text-muted); | |
| font-size: 1.05rem; | |
| line-height: 1.8; | |
| margin-bottom: 1rem; | |
| } | |
| .detail-image-block { | |
| margin: 0 0 2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| .detail-image-block img { | |
| display: block; | |
| width: 100%; | |
| max-height: 420px; | |
| object-fit: cover; | |
| } | |
| .image-caption { | |
| margin: 0; | |
| padding: 0.7rem 0.9rem; | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .detail-image-block.image-missing { | |
| border-style: dashed; | |
| } | |
| .detail-image-block.image-missing::before { | |
| content: 'Add oracle-of-water-1-1.png to the project folder to show the full graphical abstract in this modal'; | |
| display: block; | |
| color: var(--text-muted); | |
| font-size: 0.92rem; | |
| padding: 1rem; | |
| } | |
| .detail-image-block.image-missing img, | |
| .detail-image-block.image-missing .image-caption { | |
| display: none; | |
| } | |
| /* Expanded Description Section */ | |
| .expanded-description { | |
| background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 237, 78, 0.05)); | |
| border: 1px solid rgba(255, 215, 0, 0.15); | |
| border-radius: 20px; | |
| padding: 2.5rem; | |
| margin: 2rem 0; | |
| border-left: 4px solid var(--accent-1); | |
| } | |
| .expanded-description h3 { | |
| font-size: 1.35rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--text-main); | |
| font-weight: 600; | |
| } | |
| .expanded-description p { | |
| color: var(--text-muted); | |
| font-size: 1rem; | |
| line-height: 1.85; | |
| margin-bottom: 1rem; | |
| } | |
| /* Info Card */ | |
| .info-card { | |
| border-left: 4px solid rgba(100, 200, 255, 0.4); | |
| } | |
| .info-card .section-icon { | |
| color: rgba(100, 200, 255, 0.8); | |
| } | |
| .sub-text { | |
| margin-top: 1.5rem; | |
| padding-top: 1.5rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.92rem; | |
| color: var(--text-muted); | |
| display: block; | |
| } | |
| /* Outcomes Card */ | |
| .outcomes-card { | |
| border-left: 4px solid rgba(0, 255, 150, 0.4); | |
| } | |
| .outcomes-card .section-icon { | |
| color: rgba(0, 255, 150, 0.8); | |
| } | |
| /* Applications Card */ | |
| .applications-card { | |
| border-left: 4px solid rgba(200, 100, 255, 0.4); | |
| } | |
| .applications-card .section-icon { | |
| color: rgba(200, 100, 255, 0.8); | |
| } | |
| .applications-card ul { | |
| display: grid; | |
| grid-template-columns: 1fr; | |
| gap: 0.75rem; | |
| } | |
| .applications-card li { | |
| padding: 0.7rem 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| } | |
| .applications-card li:last-child { | |
| border-bottom: none; | |
| } | |
| .user-notes-dropdown { | |
| margin-top: 2rem; | |
| border: 1px solid rgba(255, 255, 255, 0.14); | |
| border-radius: 14px; | |
| background: rgba(255, 255, 255, 0.02); | |
| overflow: hidden; | |
| } | |
| .user-notes-dropdown summary { | |
| list-style: none; | |
| cursor: pointer; | |
| padding: 0.95rem 1rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| font-weight: 600; | |
| } | |
| .user-notes-dropdown summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .user-notes-dropdown summary span { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.55rem; | |
| } | |
| .user-notes-dropdown summary small { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| } | |
| .user-notes-dropdown summary i { | |
| transition: transform 0.2s ease; | |
| } | |
| .user-notes-dropdown[open] summary i { | |
| transform: rotate(90deg); | |
| } | |
| .user-notes-panel { | |
| margin-top: 0; | |
| border: 0; | |
| border-top: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 0; | |
| padding: 1.25rem; | |
| background: rgba(255, 255, 255, 0.03); | |
| } | |
| .inline-notes-dropdown { | |
| margin-top: 0.35rem; | |
| } | |
| .inline-notes-dropdown summary { | |
| padding: 0.75rem 0.8rem; | |
| } | |
| .inline-notes-panel { | |
| padding: 0.85rem; | |
| position: relative; | |
| } | |
| .inline-note-input { | |
| min-height: 88px; | |
| } | |
| .inline-note-clear-btn { | |
| position: absolute; | |
| top: 0.5rem; | |
| right: 0.55rem; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-main); | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 999px; | |
| font-size: 0.95rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| } | |
| .inline-note-clear-btn:hover { | |
| background: rgba(255, 99, 71, 0.2); | |
| border-color: rgba(255, 99, 71, 0.4); | |
| } | |
| .inline-note-status { | |
| margin-top: 0.5rem; | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| } | |
| .user-notes-panel h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 0.35rem; | |
| } | |
| .notes-user-line { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| margin-bottom: 0.8rem; | |
| } | |
| .user-note-input { | |
| width: 100%; | |
| min-height: 110px; | |
| resize: vertical; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| border-radius: 12px; | |
| background: rgba(0, 0, 0, 0.25); | |
| color: var(--text-main); | |
| padding: 0.8rem; | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| } | |
| .user-note-input:focus { | |
| outline: none; | |
| border-color: var(--accent-1); | |
| box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.22); | |
| } | |
| .hidden-file-input { | |
| display: none; | |
| } | |
| .note-image-tools { | |
| margin-top: 0.75rem; | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 0.6rem; | |
| } | |
| .note-image-btn, | |
| .note-image-clear-btn { | |
| border: 1px solid rgba(255, 255, 255, 0.16); | |
| border-radius: 10px; | |
| padding: 0.42rem 0.8rem; | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-main); | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .note-image-btn:hover, | |
| .note-image-clear-btn:hover { | |
| border-color: rgba(255, 215, 0, 0.35); | |
| background: rgba(255, 215, 0, 0.12); | |
| } | |
| .note-image-clear-btn.hidden { | |
| display: none; | |
| } | |
| .note-image-status { | |
| width: 100%; | |
| margin: 0; | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| } | |
| .note-image-preview { | |
| display: none; | |
| margin-top: 0.85rem; | |
| } | |
| .note-image-preview.visible { | |
| display: block; | |
| } | |
| .note-image-gallery, | |
| .note-image-preview-grid { | |
| display: grid; | |
| gap: 0.75rem; | |
| } | |
| .note-image-gallery { | |
| grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); | |
| } | |
| .note-image-preview-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .note-image-preview-card, | |
| .note-image-figure { | |
| position: relative; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| .note-image-remove-btn { | |
| position: absolute; | |
| top: 0.45rem; | |
| right: 0.45rem; | |
| z-index: 2; | |
| width: 24px; | |
| height: 24px; | |
| border: 1px solid rgba(255, 255, 255, 0.22); | |
| border-radius: 999px; | |
| background: rgba(0, 0, 0, 0.7); | |
| color: #fff; | |
| font-size: 1rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| } | |
| .note-image-remove-btn:hover { | |
| background: rgba(255, 69, 58, 0.82); | |
| border-color: rgba(255, 255, 255, 0.35); | |
| } | |
| .note-image-preview-card img, | |
| .note-image-figure img { | |
| display: block; | |
| width: 100%; | |
| max-height: 260px; | |
| object-fit: contain; | |
| background: rgba(0, 0, 0, 0.25); | |
| } | |
| .note-image-preview-meta, | |
| .note-image-figure figcaption { | |
| padding: 0.55rem 0.7rem; | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| border-top: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .note-image-preview-summary, | |
| .note-image-gallery-count { | |
| font-size: 0.8rem; | |
| color: var(--text-muted); | |
| margin: 0.2rem 0 0; | |
| } | |
| .inline-note-image-tools { | |
| margin-top: 0.55rem; | |
| } | |
| .inline-note-image-status { | |
| font-size: 0.76rem; | |
| } | |
| .notes-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| margin-top: 0.65rem; | |
| } | |
| .note-save-btn { | |
| border: 1px solid rgba(255, 215, 0, 0.35); | |
| border-radius: 10px; | |
| background: rgba(255, 215, 0, 0.14); | |
| color: var(--text-main); | |
| padding: 0.45rem 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .user-notes-list { | |
| margin-top: 1rem; | |
| display: grid; | |
| gap: 0.65rem; | |
| } | |
| .note-item { | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| padding: 0.65rem 0.8rem; | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .note-item p { | |
| margin: 0; | |
| color: var(--text-main); | |
| font-size: 0.92rem; | |
| line-height: 1.45; | |
| } | |
| .note-item span { | |
| display: block; | |
| margin-top: 0.35rem; | |
| font-size: 0.78rem; | |
| color: var(--text-muted); | |
| } | |
| .note-empty { | |
| color: var(--text-muted); | |
| font-size: 0.9rem; | |
| } | |
| .admin-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 1.25rem; | |
| margin-bottom: 1.25rem; | |
| } | |
| .admin-card { | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 16px; | |
| background: rgba(255, 255, 255, 0.03); | |
| padding: 1rem; | |
| } | |
| .admin-card h3 { | |
| margin-bottom: 0.8rem; | |
| } | |
| .admin-form { | |
| display: grid; | |
| gap: 0.6rem; | |
| } | |
| .admin-form input, | |
| .admin-form select, | |
| .admin-form textarea { | |
| width: 100%; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| border-radius: 12px; | |
| background: rgba(0, 0, 0, 0.25); | |
| color: var(--text-main); | |
| padding: 0.7rem 0.8rem; | |
| font-family: inherit; | |
| } | |
| .admin-list { | |
| margin-top: 0.75rem; | |
| display: grid; | |
| gap: 0.55rem; | |
| } | |
| .admin-list-item { | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 12px; | |
| padding: 0.6rem 0.75rem; | |
| background: rgba(255, 255, 255, 0.02); | |
| } | |
| .admin-user-item { | |
| width: 100%; | |
| text-align: left; | |
| cursor: pointer; | |
| } | |
| .admin-list-item-selected { | |
| border-color: rgba(255, 215, 0, 0.5); | |
| background: rgba(255, 215, 0, 0.12); | |
| } | |
| .admin-list-item p { | |
| margin: 0; | |
| } | |
| .admin-list-item span { | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| } | |
| .admin-table-wrap { | |
| overflow-x: auto; | |
| } | |
| .admin-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| min-width: 920px; | |
| } | |
| .admin-table th, | |
| .admin-table td { | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| padding: 0.65rem; | |
| text-align: left; | |
| vertical-align: top; | |
| font-size: 0.86rem; | |
| } | |
| .admin-table th { | |
| color: var(--text-muted); | |
| font-weight: 600; | |
| } | |
| .admin-user-data-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 0.9rem; | |
| } | |
| .admin-user-data-card { | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 12px; | |
| background: rgba(255, 255, 255, 0.02); | |
| padding: 0.65rem; | |
| } | |
| .admin-user-data-card h4 { | |
| margin: 0 0 0.6rem; | |
| } | |
| .admin-inline-actions { | |
| display: flex; | |
| gap: 0.55rem; | |
| margin-top: 0.6rem; | |
| } | |
| .admin-broadcast-list { | |
| border: 1px solid rgba(255, 215, 0, 0.25); | |
| border-radius: 12px; | |
| background: rgba(255, 215, 0, 0.08); | |
| padding: 0.7rem; | |
| margin-bottom: 0.85rem; | |
| } | |
| .admin-broadcast-list h4 { | |
| margin: 0 0 0.55rem; | |
| font-size: 0.92rem; | |
| color: var(--accent-1); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| } | |
| .admin-broadcast-item { | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 10px; | |
| background: rgba(0, 0, 0, 0.2); | |
| padding: 0.6rem; | |
| margin-bottom: 0.55rem; | |
| } | |
| .admin-broadcast-item:last-child { | |
| margin-bottom: 0; | |
| } | |
| .admin-broadcast-item p { | |
| margin: 0; | |
| font-size: 0.9rem; | |
| } | |
| .admin-broadcast-item span { | |
| display: block; | |
| margin-top: 0.35rem; | |
| color: var(--text-muted); | |
| font-size: 0.78rem; | |
| } | |
| /* Scrollbar styling for modal */ | |
| .detail-modal-content::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .detail-modal-content::-webkit-scrollbar-track { | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: 10px; | |
| } | |
| .detail-modal-content::-webkit-scrollbar-thumb { | |
| background: rgba(255, 255, 255, 0.15); | |
| border-radius: 10px; | |
| } | |
| .detail-modal-content::-webkit-scrollbar-thumb:hover { | |
| background: rgba(255, 255, 255, 0.25); | |
| } | |
| /* Use case card clickable cursor */ | |
| .use-case-card { | |
| cursor: pointer; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .brand-logos { | |
| top: 0.6rem; | |
| left: 0.6rem; | |
| gap: 0.015rem; | |
| padding: 0.1rem 0.2rem; | |
| } | |
| .sedna-logo { | |
| width: 214px; | |
| height: 71px; | |
| } | |
| .lvmwd-logo { | |
| width: 250px; | |
| height: 71px; | |
| margin-left: -32px; | |
| } | |
| .main-header h1 { font-size: 2.8rem; } | |
| .category-header h2 { font-size: 2.2rem; } | |
| .grid { grid-template-columns: 1fr; } | |
| .group-use-cases-grid { grid-template-columns: 1fr; } | |
| .main-header { padding: 3rem 1rem 2rem; } | |
| main { padding: 0 1rem 3rem; } | |
| .detail-modal-content { | |
| padding: 2rem; | |
| border-radius: 24px; | |
| max-height: 95vh; | |
| } | |
| .detail-id-title h2 { | |
| font-size: 1.8rem; | |
| } | |
| .detail-sections { | |
| grid-template-columns: 1fr; | |
| gap: 1.5rem; | |
| } | |
| .admin-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .detail-description { | |
| padding: 1.5rem; | |
| } | |
| } | |