Spaces:
Sleeping
Sleeping
| :root { | |
| --tropical-indigo: rgb(120, 187, 242); | |
| --latte-cream: #ffffff; | |
| --wisteria: #c5dcff; | |
| --navbar-height: 0px; /* dynamic padding */ | |
| } | |
| body { | |
| padding-top: var(--navbar-height); | |
| transition: padding-top 0.2s ease; | |
| font-family: "Rubik", sans-serif; | |
| } | |
| /* ---------- NAVBAR area---------- */ | |
| nav { | |
| backdrop-filter: blur(12px); | |
| background-color: rgba(255, 255, 255, 0.2); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.3); | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); | |
| } | |
| /* Logo */ | |
| nav .logo { | |
| color: #333; | |
| font-weight: bold; | |
| transition: color 0.3s ease; | |
| } | |
| nav .logo:hover { | |
| color: var(--tropical-indigo); | |
| } | |
| /* Desktop links and buttons */ | |
| nav a.nav-link, | |
| nav button.nav-link { | |
| color: #333; | |
| transition: color 0.3s ease; | |
| } | |
| /* Hamburger */ | |
| #hamburger { | |
| color: #333; | |
| transition: color 0.3s ease; | |
| } | |
| #hamburger:hover { | |
| color: var(--tropical-indigo); | |
| } | |
| /* Mobile Menu */ | |
| #mobile-menu { | |
| backdrop-filter: blur(12px); | |
| background-color: rgba(255, 255, 255, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| border-radius: 1rem; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); | |
| } | |
| #mobile-menu a, | |
| #mobile-menu button { | |
| color: #333; | |
| transition: color 0.3s ease; | |
| } | |
| /* ---------- BUTTONS ---------- */ | |
| #editProfileBtn, | |
| #saveProfileBtn, | |
| #cancelProfileBtn, | |
| #addEntryBtn, | |
| #resetChartBtn, | |
| #analyzerBtn { | |
| background-color: var(--tropical-indigo); | |
| color: white; | |
| transition: background-color 0.3s ease; | |
| } | |
| #editProfileBtn:hover, | |
| #saveProfileBtn:hover, | |
| #addEntryBtn:hover, | |
| #analyzerBtn:hover { | |
| background-color: #5ba5dd; | |
| } | |
| #resetChartBtn:hover { | |
| background-color: #e63946; | |
| } | |
| /* ---------- INPUTS ---------- */ | |
| input, | |
| textarea { | |
| border: 1px solid var(--wisteria); | |
| background-color: #fafbfc; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--tropical-indigo); | |
| box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3); | |
| } | |
| /* HEADINGS */ | |
| h1, | |
| h2, | |
| h3, | |
| h4 { | |
| color: var(--tropical-indigo); | |
| } | |
| /* Chart Card */ | |
| #chartSection > div { | |
| background-color: var(--latte-cream); | |
| border: 1px solid var(--wisteria); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| } | |
| .rec-card { | |
| background-color: var(--latte-cream); | |
| border: 1px solid var(--wisteria); | |
| border-radius: 1rem; | |
| padding: 1.25rem; | |
| margin-bottom: 1.5rem; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); | |
| transition: all 0.3s ease; | |
| } | |
| .rec-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); | |
| } | |
| .rec-title { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| color: var(--tropical-indigo); | |
| margin-bottom: 0.5rem; | |
| } | |
| .rec-badge { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| } | |
| .badge-high { | |
| background-color: #fee2e2; | |
| color: #b91c1c; | |
| } | |
| .badge-medium { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| .badge-low { | |
| background-color: #d1fae5; | |
| color: #065f46; | |
| } | |
| .rec-content { | |
| list-style-type: disc; | |
| margin-left: 1.25rem; | |
| font-size: 0.875rem; | |
| color: #374151; | |
| } | |
| .rec-link { | |
| color: var(--tropical-indigo); | |
| text-decoration: underline; | |
| } | |
| .rec-link:hover { | |
| color: #4b7bbd; | |
| } | |
| .btn-primary { | |
| background-color: var(--tropical-indigo); | |
| color: white; | |
| transition: background-color 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #5ba5dd; | |
| } | |
| input, | |
| textarea { | |
| border: 1px solid var(--wisteria); | |
| background-color: #fafbfc; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--tropical-indigo); | |
| box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3); | |
| } | |
| h2, | |
| h3 { | |
| color: var(--tropical-indigo); | |
| } | |
| #chat-output { | |
| background-color: #f7f9fc; | |
| border: 1px solid var(--wisteria); | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| transition: all 0.8s ease-out; | |
| } | |
| .fade-in.show { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| .glass-card { | |
| background: rgba(162, 160, 160, 0.075); | |
| backdrop-filter: blur(12px); | |
| border-radius: 1rem; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| padding: 2rem; | |
| text-align: center; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .glass-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .nav-link { | |
| position: relative; | |
| padding-bottom: 4px; | |
| transition: color 0.3s; | |
| } | |
| .nav-link::after { | |
| content: ""; | |
| position: absolute; | |
| width: 0%; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: black; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-size: cover; | |
| background-position: center; | |
| position: relative; | |
| } | |
| /* Typing effect styles */ | |
| #typed-heading, | |
| #typed-paragraph { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| border-right: 2px solid var(--tropical-indigo); | |
| } | |
| .rec-card { | |
| background-color: var(--latte-cream); | |
| border: 1px solid var(--wisteria); | |
| border-radius: 1rem; | |
| padding: 1.25rem; | |
| margin-bottom: 1.5rem; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); | |
| transition: all 0.3s ease; | |
| } | |
| .rec-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); | |
| } | |
| .rec-title { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| color: var(--tropical-indigo); | |
| margin-bottom: 0.5rem; | |
| } | |
| .rec-badge { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 9999px; | |
| } | |
| .badge-high { | |
| background-color: #fee2e2; | |
| color: #b91c1c; | |
| } | |
| .badge-medium { | |
| background-color: #fef3c7; | |
| color: #92400e; | |
| } | |
| .badge-low { | |
| background-color: #d1fae5; | |
| color: #065f46; | |
| } | |
| .rec-content { | |
| list-style-type: disc; | |
| margin-left: 1.25rem; | |
| font-size: 0.875rem; | |
| color: #374151; | |
| } | |
| .rec-link { | |
| color: var(--tropical-indigo); | |
| text-decoration: underline; | |
| } | |
| .rec-link:hover { | |
| color: #4b7bbd; | |
| } | |
| .btn-primary { | |
| background-color: var(--tropical-indigo); | |
| color: white; | |
| transition: background-color 0.3s ease; | |
| } | |
| .btn-primary:hover { | |
| background-color: #5ba5dd; | |
| } | |
| input, | |
| textarea { | |
| border: 1px solid var(--wisteria); | |
| background-color: #fafbfc; | |
| } | |
| input:focus, | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--tropical-indigo); | |
| box-shadow: 0 0 0 2px rgba(120, 187, 242, 0.3); | |
| } | |
| h2, | |
| h3 { | |
| color: var(--tropical-indigo); | |
| } | |
| #chat-output { | |
| background-color: #f7f9fc; | |
| border: 1px solid var(--wisteria); | |
| } | |
| .hidden-by-default { | |
| display: none; | |
| } |