From b648ba5b5325cb91f79ff01447e4aa6eeae2e0ce Mon Sep 17 00:00:00 2001
From: Biswajit Mahanty <155170520+biswajit760@users.noreply.github.com>
Date: Wed, 24 Sep 2025 22:27:24 +0530
Subject: [PATCH] refactor: separate HTML, CSS, and JS files (#600)
---
assets/css/contact.css | 840 ++++++++++++++
assets/css/convert.css | 399 +++++++
assets/css/customize.css | 1341 ++++++++++++++++++++++
assets/css/faq.css | 970 ++++++++++++++++
assets/css/feedback.css | 876 +++++++++++++++
assets/css/helpcenter.css | 772 +++++++++++++
assets/css/index.css | 515 +++++++++
assets/css/privacypolicy.css | 750 +++++++++++++
assets/css/reportissue.css | 869 +++++++++++++++
assets/css/scale.css | 1661 ++++++++++++++++++++++++++++
assets/css/toc.css | 738 +++++++++++++
assets/js/contact.js | 34 +
assets/js/convert.js | 245 +++++
assets/js/customize.js | 306 +++++
assets/js/faq.js | 93 ++
assets/js/feedback.js | 167 +++
assets/js/helpcenter.js | 58 +
assets/js/index.js | 114 ++
assets/js/privacypolicy.js | 30 +
assets/js/reportissue.js | 93 ++
assets/js/scale.js | 352 ++++++
assets/js/toc.js | 44 +
contact.html | 883 +--------------
convert.html | 689 +-----------
customize.html | 1657 +---------------------------
faq.html | 1071 +-----------------
feedback.html | 1043 +-----------------
helpcenter.html | 839 +-------------
index.html | 636 +----------
privacypolicy.html | 874 +--------------
reportissue.html | 970 +---------------
scale.html | 2021 +---------------------------------
toc.html | 790 +------------
33 files changed, 11408 insertions(+), 11332 deletions(-)
create mode 100644 assets/css/contact.css
create mode 100644 assets/css/convert.css
create mode 100644 assets/css/customize.css
create mode 100644 assets/css/faq.css
create mode 100644 assets/css/feedback.css
create mode 100644 assets/css/helpcenter.css
create mode 100644 assets/css/index.css
create mode 100644 assets/css/privacypolicy.css
create mode 100644 assets/css/reportissue.css
create mode 100644 assets/css/scale.css
create mode 100644 assets/css/toc.css
create mode 100644 assets/js/contact.js
create mode 100644 assets/js/convert.js
create mode 100644 assets/js/customize.js
create mode 100644 assets/js/faq.js
create mode 100644 assets/js/feedback.js
create mode 100644 assets/js/helpcenter.js
create mode 100644 assets/js/index.js
create mode 100644 assets/js/privacypolicy.js
create mode 100644 assets/js/reportissue.js
create mode 100644 assets/js/scale.js
create mode 100644 assets/js/toc.js
diff --git a/assets/css/contact.css b/assets/css/contact.css
new file mode 100644
index 0000000..99052dc
--- /dev/null
+++ b/assets/css/contact.css
@@ -0,0 +1,840 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: "Comic Neue", cursive;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ color: #3e2723;
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode {
+ background-color: #0d0d0d;
+ }
+
+ .navbar {
+ background: radial-gradient(circle, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ }
+
+ body.dark-mode .navbar {
+ background: #1e1e1e;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ min-width: 150px;
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0;
+ background: rgba(111, 100, 91, 0.133);
+ border: 2px solid transparent;
+ }
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e;
+ color: #e0e0e0;
+ }
+
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+ .hamburger-icon {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger-icon span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+ }
+
+ .hamburger-icon:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ body.dark-mode .hamburger-icon span {
+ background: #e0e0e0;
+ }
+
+ /* Main content styles */
+ .main-content {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ padding: 100px 20px 20px;
+ }
+
+ .contact-box {
+ display: flex;
+ width: 90%;
+ height: auto;
+ min-height: 600px;
+ max-width: 1200px;
+ background: #fff;
+ box-shadow: 0 20px 60px rgba(0,0,0,0.15);
+ border-radius: 20px;
+ overflow: hidden;
+ position: relative;
+ animation: slideUp 0.8s ease-out;
+ }
+
+ @keyframes slideUp {
+ from {
+ opacity: 0;
+ transform: translateY(50px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* Left Column */
+ .contact-info {
+ background: linear-gradient(135deg, #ffafaf, #ef8888);
+ color: #fff;
+ padding: 50px 40px;
+ flex: 1;
+ position: relative;
+ overflow: hidden;
+ }
+
+
+ .contact-info h2 {
+ color: #3e2723;
+ margin-top: 0;
+ font-size: 2.5rem;
+ margin-bottom: 25px;
+ font-weight: 800;
+ position: relative;
+ z-index: 2;
+ }
+
+ .contact-info p {
+ color: #593832;
+ margin-bottom: 40px;
+ line-height: 1.6;
+ font-size: 1.1rem;
+ opacity: 0.9;
+ position: relative;
+ z-index: 2;
+ }
+
+ .contact-info .info-item {
+ display: flex;
+ align-items: center;
+ margin-bottom: 20px;
+ font-size: 1rem;
+ position: relative;
+ z-index: 2;
+ padding: 10px 0;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ color: #32211e;
+ font-weight: 500;
+
+ }
+
+ .contact-info .info-item:hover {
+ background: rgba(255,255,255,0.1);
+ padding-left: 10px;
+ transform: translateX(10px);
+ }
+
+ .contact-info .info-item i {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 33px;
+ height: 33px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: rgb(59, 59, 59);
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 0.8rem;
+ margin-right: 20px;
+ color: #ffffff;
+ transition: transform 0.3s ease;
+
+ }
+
+ .contact-info .info-item:hover i {
+ transform: scale(1.2);
+ }
+ .contact-info .social-link{
+ margin-top: 3.5rem;
+ margin-right: 1rem;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 65px;
+ height: 65px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.5rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+ .contact-info .social-links{
+ color: #4b4a4a;
+ }
+
+ /* Right Column */
+ .contact-form-box {
+ flex: 1;
+ padding: 50px 40px;
+ background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
+ }
+
+ .contact-form-title {
+ font-size: 2rem;
+ margin-bottom: 30px;
+ font-weight: 600;
+ color:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ text-align: center;
+ }
+
+ .contact-form .form-row {
+ display: flex;
+ gap: 25px;
+ margin-bottom: 20px;
+ }
+
+
+ .contact-form input,
+ .contact-form textarea {
+ width: 100%;
+ padding: 15px 18px;
+ border: 2px solid #e1e5e9;
+ border-radius: 12px;
+ font-size: 1rem;
+ transition: all 0.3s ease;
+ background: #fff;
+ font-family: inherit;
+ }
+
+ .contact-form input:focus,
+ .contact-form textarea:focus {
+ outline: none;
+ border-color: #ea6683;
+ box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+ transform: translateY(-2px);
+ }
+
+ .contact-form input::placeholder,
+ .contact-form textarea::placeholder {
+ color: #999;
+ transition: opacity 0.3s ease;
+ }
+
+ .contact-form input:focus::placeholder,
+ .contact-form textarea:focus::placeholder {
+ opacity: 0.7;
+ }
+
+ .contact-form textarea {
+ resize: vertical;
+ min-height: 120px;
+ font-family: inherit;
+ }
+
+ .contact-form button {
+ background:linear-gradient(20deg, #3e2723, #6e463e, #3e2723);
+ padding: 25px 35px;
+ border: none;
+ border-radius: 20px;
+ font-size: 1.1rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ letter-spacing: 1px;
+ color: white;
+ }
+
+ .contact-form button::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+ transition: left 0.5s;
+ }
+
+ .contact-form button:hover::before {
+ left: 100%;
+ }
+
+ .contact-form button:hover {
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ transform: translateY(-2px);
+ box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
+ }
+
+ .contact-form button:active {
+ transform: translateY(0px);
+ box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+ }
+
+ #contactSuccess {
+ background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
+ color: rgb(255, 247, 247);
+ padding: 15px 20px;
+ border-radius: 12px;
+ margin-top: 20px;
+ text-align: center;
+ transform: translateY(-10px);
+ transition: all 0.5s ease;
+ font-weight: 500;
+ display: none;
+ }
+
+
+
+ .input-group {
+ position: relative;
+ margin-bottom: 20px;
+ }
+
+ .input-group input,
+ .input-group textarea {
+ margin-bottom: 0;
+ }
+
+ .input-group label {
+ display: block;
+ margin-bottom: 8px;
+ color: #3c3c3c;
+ font-weight: 600;
+ font-size: 1rem;
+ }
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .contact-box {
+ flex-direction: column;
+ width: 95%;
+ }
+
+ .contact-info,
+ .contact-form-box {
+ padding: 30px 20px;
+ }
+
+ .contact-form .form-row {
+ flex-direction: column;
+ gap: 10px;
+ }
+
+ .contact-info h2 {
+ font-size: 2rem;
+ }
+
+ .contact-form-title {
+ font-size: 1.5rem;
+ }
+ }
+
+ /* Loading animation for button */
+ .contact-form button.loading {
+ pointer-events: none;
+ position: relative;
+ }
+
+ .contact-form button.loading::after {
+ content: '';
+ position: absolute;
+ width: 16px;
+ height: 16px;
+ margin: auto;
+ border: 2px solid rgba(255,255,255,0.3);
+ border-radius: 50%;
+ border-top-color: #fff;
+ animation: spin 1s linear infinite;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ }
+
+ @keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+ }
+
+ /* Dark Mode Styles */
+ body.dark-mode {
+ background: linear-gradient(135deg, #0f0f0f, #2b2b2b, #000000);
+
+ }
+
+ body.dark-mode .contact-box {
+ background: #2e1e2a;
+ box-shadow: 0 8px 20px rgba(115, 115, 115, 0.25);
+
+ }
+
+
+
+ body.dark-mode .contact-form-box {
+ background: linear-gradient(120deg, #0d0d0d, #282727, #181818);
+ }
+
+ body.dark-mode .contact-form-title {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .contact-form input,
+ body.dark-mode .contact-form textarea {
+ background: #0c0c10;
+ border: 2px solid #6d6d6d;
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .contact-form input:focus,
+ body.dark-mode .contact-form textarea:focus {
+ border-color: #000000;
+ box-shadow: 0 0 0 3px rgba(122, 122, 122, 0.2);
+ background: #1f1f20;
+ }
+
+ body.dark-mode .contact-form input::placeholder,
+ body.dark-mode .contact-form textarea::placeholder {
+ color: #888;
+ }
+
+ body.dark-mode .input-group label {
+ color: #ccc;
+ }
+
+ body.dark-mode .success-message {
+ background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
+ }
+
+ .footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+ }
+
+ body.dark-mode .footer {
+ background: #1e1e1e;
+ }
+
+ .footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+ }
+
+ @media (max-width:1024px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+ }
+
+ @media (max-width:768px) {
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ text-align: center;
+ }
+ }
+
+ .footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ }
+ .footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .footer-section h3.footer-title {
+ color:#e0e0e0;
+ }
+ body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+ }
+
+ .footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ }
+
+ body.dark-mode .footer-logo {
+ color: #e0e0e0;
+ }
+
+ .footer-logo-icon {
+ font-size: 2rem;
+ }
+
+ .footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+ }
+
+ body.dark-mode .footer-description {
+ color: #a0a0a0;
+ }
+
+ .footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .footer-links li {
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+ }
+
+ body.dark-mode .footer-links a {
+ color: #e0e0e0;
+ }
+
+ .footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+ }
+
+ body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ .footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+ }
+
+ body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+ }
+
+ .footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ @media (max-width:768px) {
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+ }
+
+ .copyright {
+ color: #333;
+ font-size: 0.9rem;
+ }
+
+ body.dark-mode .copyright {
+ color: #a0a0a0;
+ }
+
+ .copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+ }
+
+ body.dark-mode .copyright .name {
+ color: #ef6154;
+ }
+
+ .footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ }
+
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ transition: all 0.3s ease;
+ }
+
+ .badge-green {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-blue {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-purple {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+ body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+
+ .social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+ .social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+ .hamburger-icon {
+ display: none; /* Hidden on desktop */
+ flex-direction: column;
+ justify-content: space-around;
+ width: 2rem;
+ height: 2rem;
+ background: transparent;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ z-index: 10;
+ }
+
+.hamburger-icon .bar {
+ width: 2rem;
+ height: 0.25rem;
+ background-color: #333;
+ border-radius: 10px;
+}
+
+@media (max-width: 768px) {
+ /* Hides the desktop navigation links */
+ .nav-links {
+ display: flex;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh; /* Full screen height */
+ background: #1a1a1a; /* Dark background */
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 6rem;
+ transition: transform 0.3s ease-in-out;
+ transform: translateX(-100%); /* Hides the menu off-screen to the left */
+ gap: 0;
+ z-index: 999;
+ }
+
+ /* This rule makes the menu slide in when it's active */
+ .nav-links.active {
+ transform: translateX(0);
+ }
+
+ /* Styles for the links inside the mobile menu */
+ .nav-links li {
+ width: 90%;
+ margin: 0;
+ padding: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-links a {
+ width: 100%;
+ padding: 1.5rem 2rem;
+ font-size: 1.2rem;
+ color: #e0e0e0 !important;
+ border-radius: 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ /* This shows the hamburger icon on mobile */
+ .hamburger-icon {
+ display: flex;
+ position: relative; /* Changed from absolute */
+ z-index: 1001; /* Ensures it's on top of the dark menu */
+ }
+}
+
+/* This animates the hamburger icon into an 'X' when it gets the 'active' class */
+.hamburger-icon.active .bar:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+}
+
+.hamburger-icon.active .bar:nth-child(2) {
+ opacity: 0;
+}
+
+.hamburger-icon.active .bar:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+}
\ No newline at end of file
diff --git a/assets/css/convert.css b/assets/css/convert.css
new file mode 100644
index 0000000..878fa9f
--- /dev/null
+++ b/assets/css/convert.css
@@ -0,0 +1,399 @@
+:root {
+ --candy-red:#ffabab;
+ --sky-blue:#249e96;
+ --sunny-yellow:#fcd124;
+ --soft-pink:#FFB6C1;
+ --mint-green:#9af89a;
+ --lavender:#E6E6FA;
+ --dark-bg:#1a1a1a;
+ --dark-card:#2d2d2d;
+ --dark-text:#e7e3e3;
+ --dark-border:#404040;
+ --white:#FFFFFF;
+ --dark-gray:#1A1A1A;
+ --light-gray:#F8F9FA;
+ --shadow:0 8px 32px rgba(0,0,0,0.1);
+ --glass:rgba(255,255,255,0.15);
+ }
+
+ * { margin:0; padding:0; box-sizing:border-box; }
+
+ body {
+ font-family: 'Comic Neue', cursive;
+ background-color:#f5f3f1;
+ min-height:100vh;
+ color:#1a1a1a;
+ transition:all .3s ease;
+ }
+ body.dark-mode { background-color:#0d0d0d; color:#e7e3e3; }
+
+ /* ===== NAVBAR ===== */
+ .navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed; top: 0; width: 100%; z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0,0,0,0.1);
+ border-bottom: 1px solid rgba(255,255,255,0.2);
+ transition: all .3s ease;
+ }
+ body.dark-mode .navbar { background:#1e1e1e !important; border-bottom:1px solid rgba(255,255,255,0.1) !important; }
+
+ .nav-container { display:flex; justify-content:space-between; align-items:center; max-width:1500px; margin:0 auto; }
+ .logo { font-size:2rem; font-weight:600; color:#3e2723; text-decoration:none; display:flex; align-items:center; gap:.5rem; min-width:150px; padding-right:50px; }
+ .logo-icon { font-size:2rem; transition: transform .3s ease; }
+ .logo:hover { transform: scale(1.05); }
+ .logo:hover .logo-icon { transform: rotate(10deg); }
+ body.dark-mode .logo { color:#e0e0e0; }
+
+ .nav-links { display:flex; list-style:none; gap:1.5rem; align-items:center; }
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ font-size: 1.1rem;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0 !important;
+ background: rgba(111, 100, 91, 0.133) !important;
+ border: 2px solid transparent !important;
+ }
+
+ .nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d !important;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e !important;
+ color: #e0e0e0 !important;
+ }
+
+ /* Active navigation link styles */
+ .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ body.dark-mode .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .nav-actions { display:flex; align-items:center; gap:1rem; }
+ .dark-mode-btn {
+ background:linear-gradient(135deg, #3e2723, #4d312b); border:none; color:white; padding:.7rem; border-radius:50%;
+ cursor:pointer; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); font-size:1rem; width:45px; height:45px;
+ display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.2);
+ position:relative; overflow:hidden;
+ }
+ .dark-mode-btn::before{
+ content:''; position:absolute; top:50%; left:50%; width:0; height:0;
+ background:rgba(255,255,255,0.2); border-radius:50%; transition:all .4s ease;
+ transform:translate(-50%, -50%);
+ }
+ .dark-mode-btn:hover::before{width:100%; height:100%}
+ .dark-mode-btn:hover {
+ transform:scale(1.15) rotate(360deg);
+ box-shadow:0 8px 25px rgba(0,0,0,0.3), 0 4px 12px rgba(62,39,35,0.2);
+ background:linear-gradient(135deg, #4d312b, #3e2723);
+ }
+ body.dark-mode .dark-mode-btn {
+ background:linear-gradient(135deg, #e0e0e0, #d0d0d0);
+ color:#1e1e1e;
+ box-shadow:0 4px 15px rgba(224,224,224,0.2);
+ }
+ body.dark-mode .dark-mode-btn:hover{
+ background:linear-gradient(135deg, #f0f0f0, #e0e0e0);
+ box-shadow:0 8px 25px rgba(224,224,224,0.3), 0 4px 12px rgba(30,30,30,0.2);
+ }
+
+ .hamburger { display:none; flex-direction:column; cursor:pointer; padding:.5rem; border-radius:8px; transition:all .3s ease; }
+ .hamburger:hover { background: rgba(255,255,255,0.1); }
+ .hamburger span { width:25px; height:3px; background:linear-gradient(45deg,#a4766a,#5d4037); margin:3px 0; transition:.3s; border-radius:2px; }
+ body.dark-mode .hamburger span { background:#e0e0e0; }
+ .hamburger.active span:nth-child(1){ transform:rotate(-45deg) translate(-5px, 6px); }
+ .hamburger.active span:nth-child(2){ opacity:0; }
+ .hamburger.active span:nth-child(3){ transform:rotate(45deg) translate(-5px, -6px); }
+
+ /* Mobile nav */
+ @media (max-width:768px) {
+ .navbar { padding:.8rem 1rem; }
+ .nav-links{
+ display:flex; position:fixed; top:0; left:0; width:100%; height:100vh; background:#1a1a1a;
+ flex-direction:column; justify-content:flex-start; align-items:center; padding-top:6rem;
+ transition:transform .3s ease; transform:translateX(-100%); gap:0; z-index:999;
+ }
+ .nav-links.active { transform:translateX(0); }
+ .nav-links li { width:90%; border-bottom:1px solid rgba(255,255,255,0.1); }
+ .nav-links a {
+ width:100%; padding:1.5rem 2rem; font-size:1.2rem; background:#2a2a2a !important;
+ color:#e0e0e0 !important; border-radius:0; display:flex; gap:1rem;
+ transition:all .3s ease;
+ }
+ .nav-links a:hover {
+ background:#3a3a3a !important;
+ color:#ffffff !important;
+ }
+
+ /* Mobile navigation active state */
+ .nav-links a.active {
+ background: #0d0d0d !important;
+ color: #ffffff !important;
+ }
+ .hamburger { display:flex; position:relative; z-index:1001; }
+ .logo { font-size:1.5rem; }
+ .logo-icon { font-size:1.7rem; }
+ }
+ @media (max-width:480px) {
+ .navbar { padding:.5rem; }
+ .logo { font-size:1.3rem; }
+ .logo-icon { font-size:1.5rem; }
+ .nav-actions { gap:.3rem; }
+ .dark-mode-btn { width:35px; height:35px; font-size:.8rem; }
+ }
+
+ /* ===== MAIN ===== */
+ main { padding:6rem 2rem 2rem; max-width:1200px; margin:0 auto; }
+ .page-header { text-align:center; margin-bottom:3rem; }
+ .page-title { font-size:clamp(2rem, 6vw, 3rem); font-weight:700; margin-bottom:1rem; color:#3e2723; animation:bounce 2s ease-in-out infinite; }
+ body.dark-mode .page-title{ color:#e0e0e0 !important; }
+ .page-subtitle { font-size:1.2rem; color:#6b6767; opacity:.9; margin-bottom:2rem; }
+ body.dark-mode .page-subtitle{ color:#e0e0e0 !important; }
+
+ @keyframes bounce {
+ 0%,20%,50%,80%,100% { transform:translateY(0);}
+ 40% { transform:translateY(-10px);}
+ 60% { transform:translateY(-5px);}
+ }
+
+ .converter-container { display:grid; grid-template-columns:1fr; gap:2rem; max-width:800px; margin:0 auto; }
+
+ .input-section,
+ .results-section {
+ background: rgba(255,255,255,0.1);
+ backdrop-filter: blur(20px);
+ border-radius: 20px;
+ padding: 2rem;
+ border: 1px solid rgba(255,255,255,0.2);
+ }
+ .results-section { display:none; }
+
+ .input-group { margin-bottom:1.5rem; }
+ .input-label { display:block; font-size:1.1rem; font-weight:600; margin-bottom:.5rem; color:#3e2723; }
+ body.dark-mode .input-label { color:#e0e0e0; }
+
+ .recipe-input {
+ width:100%; min-height:200px; padding:1rem; border:none; border-radius:15px;
+ background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
+ color:#000 !important; font-family:'Comic Neue', cursive; font-size:1rem; resize:vertical;
+ border:2px solid #6b6767; transition:all .3s ease;
+ }
+ .recipe-input:focus { outline:none; border-color:#3e2723; box-shadow:0 0 2px rgba(255,165,2,0.3); }
+ body.dark-mode .recipe-input { background: rgba(255,255,255,0.08); }
+ body.dark-mode .recipe-input:focus { border-color:#0d0d0d; box-shadow:0 0 2px #0d0d0d; }
+
+ .file-upload { display:none; }
+ .file-upload-label {
+ display:inline-block; padding:1rem 2rem; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723);
+ color:white; border-radius:25px; cursor:pointer; transition:all .3s ease; font-weight:600; margin-right:1rem;
+ }
+ .file-upload-label:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
+ body.dark-mode .file-upload-label { background: rgba(220,121,63,0.893); color:#e0e0e0; }
+
+ .convert-button {
+ width:100%; padding:1.5rem; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723);
+ color:white; border:none; border-radius:25px; font-size:1.3rem; font-weight:700; cursor:pointer;
+ transition:all .3s ease; position:relative; overflow:hidden; margin-top:1rem;
+ }
+ .convert-button:hover { transform: translateY(-3px); box-shadow:0 15px 40px rgba(0,0,0,0.2); }
+ .convert-button:disabled { opacity:.6; cursor:not-allowed; transform:none; }
+ body.dark-mode .convert-button { background: rgba(220,121,63,0.893); color:#e0e0e0; }
+
+ .loading-spinner{
+ display:none; width:20px; height:20px; border:2px solid transparent; border-top:2px solid #fff;
+ border-radius:50%; animation:spin 1s linear infinite; margin-right:10px;
+ }
+ @keyframes spin { to{ transform:rotate(360deg);} }
+
+ .results-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
+ .results-title { font-size:1.5rem; font-weight:700; }
+ .unit-toggle { display:flex; background:rgba(255,255,255,0.1); border-radius:25px; padding:.2rem; }
+ .unit-toggle button {
+ padding:.5rem 1rem; border:none; background:transparent; color:#333; border-radius:20px; cursor:pointer;
+ transition:all .3s ease; font-family:'Comic Neue', cursive; font-weight:600;
+ }
+ .unit-toggle button.active { background: var(--sunny-yellow); color: var(--dark-gray); }
+
+ .results-table { width:100%; border-collapse:collapse; margin-top:1rem; }
+ .results-table th, .results-table td { padding:1rem; text-align:left; border-bottom:1px solid rgba(0,0,0,0.06); }
+ .results-table th { background:rgba(255,255,255,0.1); font-weight:700; color:#3e2723; }
+ body.dark-mode .results-table th { color:var(--sunny-yellow); border-bottom:1px solid rgba(255,255,255,0.1); }
+ body.dark-mode .results-table td { border-bottom:1px solid rgba(255,255,255,0.06); }
+
+ .ingredient-row { transition: all .3s ease; }
+ .ingredient-row:hover { background: rgba(0,0,0,0.03); }
+ body.dark-mode .ingredient-row:hover { background: rgba(255,255,255,0.05); }
+
+ .ingredient-icon { font-size:1.5rem; margin-right:.5rem; }
+
+ .tooltip { position:relative; cursor:help; }
+ .tooltip::after {
+ content: attr(data-tooltip); position:absolute; bottom:125%; left:50%; transform:translateX(-50%);
+ background: var(--dark-gray); color: var(--white); padding:.5rem; border-radius:8px; font-size:.8rem; white-space:nowrap;
+ opacity:0; pointer-events:none; transition: opacity .3s; z-index:1001;
+ }
+ .tooltip:hover::after { opacity:1; }
+
+ /* Warning popup */
+ .warning-popup {
+ position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
+ background:rgba(255,71,87,0.95); backdrop-filter: blur(20px);
+ padding:2rem; border-radius:20px; border:2px solid var(--candy-red); z-index:1002; display:none; max-width:400px; text-align:center;
+ color:#fff;
+ }
+ .warning-popup h3 { margin-bottom:1rem; font-size:1.3rem; }
+ .warning-popup button {
+ padding:.8rem 1.5rem; background:#fff; color:var(--candy-red); border:none; border-radius:15px; font-weight:600; cursor:pointer; margin:.5rem; transition:all .3s ease;
+ }
+ .warning-popup button:hover { transform: translateY(-2px); }
+
+ .overlay {
+ position:fixed; inset:0; background:rgba(0,0,0,0.5); backdrop-filter: blur(5px); z-index:1001; display:none;
+ }
+
+ /* Floating emojis */
+ .floating-elements { position:fixed; inset:0; pointer-events:none; z-index:1; }
+ .floating-cupcake { position:absolute; font-size:2rem; animation: float 6s ease-in-out infinite; }
+ .floating-cupcake:nth-child(1){ top:10%; left:10%; animation-delay:0s;}
+ .floating-cupcake:nth-child(2){ top:20%; right:15%; animation-delay:2s;}
+ .floating-cupcake:nth-child(3){ bottom:20%; left:20%; animation-delay:4s;}
+ .floating-cupcake:nth-child(4){ bottom:30%; right:10%; animation-delay:1s;}
+ @keyframes float { 0%,100% { transform:translateY(0) rotate(0deg);} 50% { transform:translateY(-20px) rotate(5deg);} }
+
+ /* Back to Top Button Styles */
+ #backToTop {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #backToTop {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #backToTop.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: scale(1.08);
+ }
+
+ #backToTop:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ /* Back to Top to Bottom Button Styles */
+ #Toptoback {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #Toptoback {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #Toptoback.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(-10px) scale(1.08);
+ }
+
+ #Toptoback:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ body.dark-mode #Toptoback:hover {
+ background: #e0e0e0;
+ transform: scale(1.15);
+ }
+
+ /* ===== FOOTER ===== */
+ .footer { background: radial-gradient(circle at center, #e9b4b6, #e5c5b3); backdrop-filter: blur(15px); position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.3); margin-top:4rem; }
+ body.dark-mode .footer { background:#1e1e1e; }
+ .footer-content { max-width:1500px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:3rem 2rem 2rem; }
+ .footer-section h3.footer-title { color:#3e2723; font-size:1.2rem; font-weight:700; margin-bottom:1.5rem; position:relative; }
+ .footer-section h3.footer-title::after { content:''; position:absolute; bottom:-8px; left:0; width:30px; height:3px; background:#3e2723; border-radius:2px; }
+ body.dark-mode .footer-section h3.footer-title::after { background:#e0e0e0; }
+ .footer-logo { display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; color:#3e2723;}
+ .footer-logo-icon { font-size:2rem; }
+ .footer-description { color:#333; line-height:1.6; margin-bottom:2rem; font-size:.95rem; }
+ .footer-links { list-style:none; padding:0; margin:0; }
+ .footer-links li { margin-bottom:.8rem; }
+ .footer-links a { color:#333; text-decoration:none; display:flex; align-items:center; gap:.8rem; font-weight:500; transition:all .3s ease; padding:.3rem 0; border-radius:5px; }
+ .footer-links a:hover { color:black; transform:translateX(4px); background:rgba(255,107,107,0.1); padding-left:.8rem; }
+ .footer-links i { font-size:.9rem; width:16px; opacity:.7; }
+ .social-links { display:flex; gap:1rem; margin-top:1rem; }
+ .social-link { display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723); color:white; text-decoration:none; border-radius:50%; font-size:1.2rem; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2); }
+ .social-link:hover { transform:translateY(-3px) scale(1.1); box-shadow:0 8px 25px rgba(0,0,0,0.3); }
+
+ .footer-bottom { background:rgba(0,0,0,0.05); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0; }
+ .footer-bottom-content { max-width:1500px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
+ .copyright { color:#333; font-size:.9rem; margin:0; }
+ .copyright .name { color:#3e2723; font-weight:600; }
+
+ @media (max-width:1024px){
+ .footer-content{ grid-template-columns:1fr 1fr; gap:2rem; }
+ }
+ @media (max-width:768px){
+ .footer-content{ grid-template-columns:1fr; gap:2rem; text-align:center; }
+ .footer-bottom-content{ flex-direction:column; text-align:center; gap:1rem; }
+ .social-links{ justify-content:center; }
+ }
\ No newline at end of file
diff --git a/assets/css/customize.css b/assets/css/customize.css
new file mode 100644
index 0000000..7dd7a64
--- /dev/null
+++ b/assets/css/customize.css
@@ -0,0 +1,1341 @@
+:root {
+ --candy-red: #FF6B6B;
+ --sky-blue: #4ECDC4;
+ --sunny-yellow: #FFD93D;
+ --soft-pink: #FFB6C1;
+ --mint-green: #98FB98;
+ --lavender: #E6E6FA;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+}
+
+body.dark-mode {
+ background-color: #0d0d0d;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --candy-red: #FF4757;
+ --sky-blue: #70A1FF;
+ --sunny-yellow: #FFA502;
+ --white: #FFFFFF;
+ --light-pink: #FFE0E6;
+ --light-blue: #E8F4FF;
+ --light-yellow: #FFF5E0;
+}
+
+body {
+ font-family: 'Comic Neue', cursive;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ overflow-x: hidden;
+}
+
+/* Animated Background Elements */
+.floating-elements {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+}
+
+body.dark-mode .floating-elements {
+ opacity: 0.6;
+}
+
+.floating-cupcake {
+ position: absolute;
+ font-size: 2rem;
+ animation: float 6s ease-in-out infinite;
+}
+
+.floating-cupcake:nth-child(1) {
+ top: 10%;
+ left: 10%;
+ animation-delay: 0s;
+}
+
+.floating-cupcake:nth-child(2) {
+ top: 20%;
+ right: 15%;
+ animation-delay: 2s;
+}
+
+.floating-cupcake:nth-child(3) {
+ bottom: 20%;
+ left: 20%;
+ animation-delay: 4s;
+}
+
+.floating-cupcake:nth-child(4) {
+ bottom: 30%;
+ right: 10%;
+ animation-delay: 1s;
+}
+
+@keyframes float {
+
+ 0%,
+ 100% {
+ transform: translateY(0px) rotate(0deg);
+ }
+
+ 50% {
+ transform: translateY(-20px) rotate(5deg);
+ }
+}
+
+/* Navigation */
+/* ===== STANDARDIZED NAVIGATION BAR ===== */
+.navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+}
+
+body.dark-mode .navbar {
+ background: #1e1e1e !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+}
+
+.nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+}
+
+.logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+}
+
+.logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+}
+
+.logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+}
+
+.logo:hover .logo-icon {
+ transform: rotate(10deg);
+}
+
+body.dark-mode .logo {
+ color: #e0e0e0;
+}
+
+body.dark-mode .logo:hover {
+ color: #e0e0e0;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+}
+
+body.dark-mode .nav-links a {
+ color: #e0e0e0 !important;
+ background: rgba(111, 100, 91, 0.133) !important;
+ border: 2px solid transparent !important;
+}
+
+.nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+}
+
+body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d !important;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e !important;
+ color: #e0e0e0 !important;
+}
+
+/* Active navigation link styles */
+.nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+body.dark-mode .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+/* Navigation Actions */
+.nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+}
+
+
+.hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+}
+
+.hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+}
+
+body.dark-mode .hamburger span {
+ background: #e0e0e0;
+}
+
+.hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+}
+
+.hamburger.active span:nth-child(2) {
+ opacity: 0;
+}
+
+.hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+}
+
+.logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+}
+
+.logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+}
+
+.logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+}
+
+.logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+}
+
+.logo:hover .logo-icon {
+ transform: rotate(10deg);
+}
+
+body.dark-mode .logo {
+ color: #e0e0e0;
+}
+
+body.dark-mode .logo:hover {
+ color: #e0e0e0;
+}
+
+
+/* Navigation Actions */
+.nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+}
+
+
+.hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+}
+
+.hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+
+.hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+}
+
+.hamburger.active span:nth-child(2) {
+ opacity: 0;
+}
+
+.hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+}
+
+/* ===== STANDARDIZED MOBILE NAVIGATION ===== */
+@media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ display: flex;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: #1a1a1a;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 6rem;
+ transition: transform 0.3s ease;
+ transform: translateX(-100%);
+ gap: 0;
+ z-index: 999;
+ }
+
+ body.dark-mode .nav-links {
+ background: #1a1a1a !important;
+ }
+
+ .nav-links.active {
+ transform: translateX(0);
+ }
+
+ .nav-links li {
+ width: 90%;
+ margin: 0;
+ padding: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ body.dark-mode .nav-links li {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-links a {
+ width: 100%;
+ padding: 1.5rem 2rem;
+ font-size: 1.2rem;
+ margin-bottom: 0;
+ background: #2a2a2a !important;
+ color: #e0e0e0 !important;
+ border-radius: 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ transition: all 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ background: #3a3a3a !important;
+ color: #ffffff !important;
+ }
+
+ /* Mobile navigation active state */
+ .nav-links a.active {
+ background: #0d0d0d !important;
+ color: #ffffff !important;
+ }
+
+ .nav-actions {
+ gap: 0.5rem;
+ position: relative;
+ z-index: 1001;
+ }
+
+
+
+ .dark-mode-btn {
+ width: 40px;
+ height: 40px;
+ font-size: 0.9rem;
+ }
+
+ .hamburger {
+ display: flex;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+}
+
+/* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
+@media (max-width: 480px) {
+ .navbar {
+ padding: 0.5rem;
+ }
+
+ .logo {
+ font-size: 1.3rem;
+ }
+
+ .logo-icon {
+ font-size: 1.5rem;
+ }
+
+ .nav-actions {
+ gap: 0.3rem;
+ }
+
+
+ .dark-mode-btn {
+ width: 35px;
+ height: 35px;
+ font-size: 0.8rem;
+ }
+}
+
+/* Footer Styles */
+.footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+}
+
+.footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+}
+
+.footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+}
+
+body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+}
+
+.footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+}
+
+.footer-logo-icon {
+ font-size: 2rem;
+}
+
+.footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+}
+
+.footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.footer-links li {
+ margin-bottom: 0.8rem;
+}
+
+.footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+}
+
+.footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+}
+
+.footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+}
+
+.social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+
+
+.footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+}
+
+.footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+}
+
+.copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+}
+
+body.dark-mode .copyright .name {
+ color: #ef6154;
+}
+
+.footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+}
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+}
+
+.badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.badge-green {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+}
+
+.badge-blue {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+}
+
+.badge-purple {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+}
+
+body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+@media (max-width: 1024px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+}
+
+@media (max-width: 768px) {
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ text-align: center;
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+}
+
+/* Dark Mode Styles for Content */
+body.dark-mode .page-subtitle {
+ color: #e0e0e0 !important;
+}
+
+body.dark-mode .ingredient-card {
+ background: rgba(26, 26, 26, 0.9);
+ border-color: rgba(255, 255, 255, 0.1);
+ color: var(--dark-text);
+}
+
+body.dark-mode .ingredient-name {
+ color: var(--dark-text);
+}
+
+body.dark-mode .control-label {
+ color: var(--dark-text);
+}
+
+body.dark-mode .custom-select,
+body.dark-mode .custom-input {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: rgba(255, 255, 255, 0.2);
+ color: var(--dark-text);
+}
+
+body.dark-mode .custom-select:focus,
+body.dark-mode .custom-input:focus {
+ border-color: var(--candy-red);
+ background: rgba(255, 255, 255, 0.15);
+}
+
+body.dark-mode .footer {
+ background: #1e1e1e;
+}
+
+body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+}
+
+body.dark-mode .footer-logo {
+ color: #e0e0e0;
+}
+
+body.dark-mode .footer-description {
+ color: #a0a0a0;
+}
+
+body.dark-mode .footer-links a {
+ color: #e0e0e0;
+}
+
+body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+}
+
+body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+}
+
+body.dark-mode .copyright {
+ color: #a0a0a0;
+}
+
+body.dark-mode .copyright .name {
+ color: #ef6154;
+}
+
+/* Main Container */
+.container {
+ max-width: 1000px;
+ margin: 6rem auto 2rem;
+ padding: 0 1rem;
+ position: relative;
+ z-index: 10;
+}
+
+.page-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.page-title {
+ font-size: 3rem;
+ color: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ margin-bottom: 1rem;
+ text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
+ animation: bounce 2s ease-in-out infinite;
+}
+
+body.dark-mode .page-title {
+ color: #e0e0e0 !important;
+ text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.1);
+}
+
+.page-subtitle {
+ font-size: 1.2rem;
+ color: #666;
+ max-width: 600px;
+ margin: 0 auto;
+}
+
+@keyframes bounce {
+
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 40% {
+ transform: translateY(-10px);
+ }
+
+ 60% {
+ transform: translateY(-5px);
+ }
+}
+
+/* Ingredient Cards */
+.ingredients-container {
+ display: grid;
+ gap: 1.5rem;
+ margin-bottom: 2rem;
+}
+
+.ingredient-card {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ padding: 1.5rem;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ backdrop-filter: blur(10px);
+ border: 2px solid transparent;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+body.dark-mode .ingredient-card {
+ background: var(--dark-card);
+ border: 1px solid var(--dark-border);
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.ingredient-card::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
+ transition: left 0.5s ease;
+}
+
+.ingredient-card:hover {
+ transform: translateY(-5px);
+ border-color: #3e2723;
+ box-shadow: 0 12px 40px #3e2723;
+}
+
+body.dark-mode .ingredient-card:hover {
+ border-color: #9c8d8022;
+ box-shadow: 0 12px 40px #6f645b22;
+}
+
+.ingredient-card:hover::before {
+ left: 100%;
+}
+
+.ingredient-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 1rem;
+}
+
+.ingredient-icon {
+ font-size: 2rem;
+ margin-right: 1rem;
+}
+
+.ingredient-name {
+ font-size: 1.3rem;
+ font-weight: 700;
+ color: #333;
+ flex: 1;
+}
+
+.ingredient-controls {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ align-items: end;
+}
+
+.control-group {
+ display: flex;
+ flex-direction: column;
+}
+
+.control-label {
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #666;
+ margin-bottom: 0.5rem;
+}
+
+.custom-select,
+.custom-input {
+ padding: 0.75rem;
+ border: 2px solid #e0e0e0;
+ border-radius: 12px;
+ font-family: 'Comic Neue', cursive;
+ font-size: 1rem;
+ background: white;
+ transition: all 0.3s ease;
+}
+
+body.dark-mode .custom-select,
+body.dark-mode .custom-input {
+ background: rgba(255, 255, 255, 0.1);
+ border-color: var(--dark-border);
+ color: var(--dark-text);
+}
+
+.custom-select:focus,
+.custom-input:focus {
+ outline: none;
+ border-color: var(--sky-blue);
+ box-shadow: 0 0 0 3px rgba(112, 161, 255, 0.2);
+}
+
+body.dark-mode .custom-select:focus,
+body.dark-mode .custom-input:focus {
+ border-color: #ff8a80;
+ box-shadow: 0 0 0 3px rgba(255, 138, 128, 0.2);
+ background: rgba(255, 255, 255, 0.15);
+}
+
+.custom-input[type="number"] {
+ text-align: center;
+ font-weight: 600;
+}
+
+
+body.dark-mode .custom-select option {
+ background: #222;
+ color: #fff;
+}
+
+body.dark-mode .custom-select option:hover {
+ background: #333;
+ color: #ff8a80;
+}
+
+
+/* Brand Selector */
+.brand-selector {
+ background: rgba(255, 255, 255, 0.95);
+ border-radius: 20px;
+ padding: 1.5rem;
+ margin-bottom: 2rem;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+body.dark-mode .brand-selector {
+ background: rgba(111, 100, 91, 0.133);
+ border: 1px solid rgba(111, 100, 91, 0.133);
+ ;
+}
+
+.brand-title {
+ font-size: 1.5rem;
+ font-weight: 700;
+ color: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ margin-bottom: 1rem;
+ text-align: center;
+}
+
+body.dark-mode .brand-title {
+ color: var(--dark-text);
+}
+
+.brand-options {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.brand-option {
+ background: white;
+ border: 2px solid #e0e0e0;
+ border-radius: 12px;
+ padding: 1rem;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-weight: 600;
+}
+
+body.dark-mode .brand-option {
+ background: rgba(255, 255, 255, 0.05);
+ border-color: var(--dark-border);
+ color: var(--dark-text);
+}
+
+.brand-option:hover {
+ border-color: #e5b5c3;
+ background: #fae2d4;
+ transform: scale(1.05);
+}
+
+body.dark-mode .brand-option:hover {
+ background: #8f8e8e53;
+ border: 2px solid #4b4a4a;
+}
+
+.brand-option.selected {
+ border-color: #412b28;
+ background: #d5a69e;
+}
+
+body.dark-mode .brand-option.selected {
+ background: #8f8e8e92;
+ border: 2px solid #4b4a4a;
+}
+
+/* Action Buttons */
+.action-buttons {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+.btn {
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 25px;
+ font-family: 'Comic Neue', cursive;
+ font-size: 1.1rem;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ position: relative;
+ overflow: hidden;
+}
+
+.btn-primary {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
+}
+
+body.dark-mode .btn-primary {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 2px 2px rgba(220, 121, 63, 0.893);
+}
+
+.btn-secondary {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ box-shadow: 0 4px 15px rgba(112, 161, 255, 0.4);
+}
+
+body.dark-mode .btn-secondary {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 2px 2px rgba(220, 121, 63, 0.893);
+}
+
+.btn-success {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ box-shadow: 0 4px 15px rgba(46, 213, 115, 0.4);
+}
+
+body.dark-mode .btn-success {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 2px 2px rgba(220, 121, 63, 0.893);
+}
+
+.btn:hover {
+ transform: translateY(-3px);
+ animation: wobble 0.5s ease-in-out;
+}
+
+@keyframes wobble {
+ 0% {
+ transform: translateY(-3px) rotate(0deg);
+ }
+
+ 25% {
+ transform: translateY(-3px) rotate(1deg);
+ }
+
+ 75% {
+ transform: translateY(-3px) rotate(-1deg);
+ }
+
+ 100% {
+ transform: translateY(-3px) rotate(0deg);
+ }
+}
+
+/* Mobile Responsive */
+@media (max-width: 768px) {
+ /* .nav-links {
+ display: none;
+ } */
+
+ .page-title {
+ font-size: 2rem;
+ }
+
+ .ingredient-controls {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .brand-options {
+ grid-template-columns: 1fr;
+ }
+
+ .action-buttons {
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .btn {
+ width: 100%;
+ max-width: 300px;
+ justify-content: center;
+ }
+}
+
+/* Back to Top Button Styles */
+#backToTop {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+}
+
+body.dark-mode #backToTop {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+#backToTop.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: scale(1.08);
+}
+
+#backToTop:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+}
+
+/* Back to Top to Bottom Button Styles */
+#Toptoback {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+}
+
+body.dark-mode #Toptoback {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+#Toptoback.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(-10px) scale(1.08);
+}
+
+#Toptoback:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+}
+
+body.dark-mode #Toptoback:hover {
+ background: #e0e0e0;
+ transform: scale(1.15);
+}
+
+/* Success Message */
+.success-message {
+ background: rgba(46, 213, 115, 0.1);
+ border: 2px solid #2ED573;
+ border-radius: 15px;
+ padding: 1rem;
+ margin: 1rem 0;
+ text-align: center;
+ color: #2ED573;
+ font-weight: 600;
+}
+
+body.dark-mode .success-message {
+ background: rgba(46, 213, 115, 0.2);
+ color: #4cd137;
+ border-color: #4cd137;
+ display: none;
+ animation: slideDown 0.5s ease-out;
+}
+
+@keyframes slideDown {
+ from {
+ transform: translateY(-20px);
+ opacity: 0;
+ }
+
+ to {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+/* Tooltip */
+.tooltip {
+ position: relative;
+ cursor: help;
+}
+
+.tooltip::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: 100%;
+ left: 0%;
+ transform: translateX(-55%);
+ background: #333;
+ color: white;
+ padding: 0.5rem;
+ border-radius: 8px;
+ font-size: 0.8rem;
+ opacity: 0;
+ visibility: hidden;
+ transition: all 0.3s ease;
+ z-index: 1000;
+ white-space: normal;
+ width: max-content;
+ max-width: 280px;
+}
+
+.tooltip:hover::after {
+ opacity: 1;
+ visibility: visible;
+}
\ No newline at end of file
diff --git a/assets/css/faq.css b/assets/css/faq.css
new file mode 100644
index 0000000..3ceeb68
--- /dev/null
+++ b/assets/css/faq.css
@@ -0,0 +1,970 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ :root {
+ --candy-red: #ff6b6b;
+ --sky-blue: #4ecdc4;
+ --sunny-yellow: #ffd93d;
+ --soft-pink: #ffb6c1;
+ --mint-green: #98fb98;
+ --lavender: #e6e6fa;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+ }
+
+ body {
+ font-family: "Comic Neue", cursive;
+ overflow-x: hidden;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode {
+ background-color: #0d0d0d;
+ }
+
+ /* Navigation */
+ /* ===== STANDARDIZED NAVIGATION BAR ===== */
+ .navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .navbar {
+ background: #1e1e1e !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+ }
+
+ .logo:hover .logo-icon {
+ transform: rotate(10deg);
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .logo:hover {
+ color: #e0e0e0;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ font-size: 1.1rem;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0 !important;
+ background: rgba(111, 100, 91, 0.133) !important;
+ border: 2px solid transparent !important;
+ }
+
+ .nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d !important;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e !important;
+ color: #e0e0e0 !important;
+ }
+
+ /* Active navigation link styles */
+ .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ body.dark-mode .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ /* Navigation Actions */
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+
+ .hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .hamburger span {
+ background: #e0e0e0;
+ }
+
+ .hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+ }
+
+ .hamburger.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+ }
+
+ .logo:hover .logo-icon {
+ transform: rotate(10deg);
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .logo:hover {
+ color: #e0e0e0;
+ }
+
+
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+
+
+ .hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+
+ .hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+ }
+
+ .hamburger.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+ }
+
+ /* FAQ Styles */
+ .faq-section {
+ padding: 120px 20px 60px;
+ background: rgba(255, 255, 255, 0.8);
+ backdrop-filter: blur(15px);
+ margin-top: 20px;
+ }
+
+ body.dark-mode .faq-section {
+ background: #0d0d0d;
+ }
+
+ .container {
+ max-width: 800px;
+ margin: 0 auto;
+ }
+
+ .faq-title {
+ text-align: center;
+ font-size: 3rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 40px;
+ }
+ body.dark-mode h2.faq-title{
+ text-align: center;
+ font-size: 3rem;
+ font-weight: 700;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 40px;
+ }
+
+ .faq-item {
+ margin-bottom: 20px;
+ background: rgba(255, 255, 255, 0.9);
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .faq-item {
+ background: rgba(45, 45, 45, 0.9);
+ }
+
+ .faq-item:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+ }
+
+ .faq-question {
+ width: 100%;
+ text-align: left;
+ background: none;
+ border: none;
+ outline: none;
+ padding: 20px;
+ font-size: 1.2rem;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ color: #3e2723;
+ font-family: inherit;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ body.dark-mode .faq-question {
+ color: #e0e0e0;
+ }
+
+ .faq-question:after {
+ content: '+';
+ font-size: 1.5rem;
+ font-weight: bold;
+ transition: transform 0.3s ease;
+ }
+
+ .faq-item.active .faq-question:after {
+ transform: rotate(45deg);
+ }
+
+ .faq-question:hover {
+ color: #d18a68;
+ background: rgba(255, 255, 255, 0.5);
+ }
+
+ body.dark-mode .faq-question:hover {
+ color: #a0a0a0;
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .faq-answer {
+ max-height: 0;
+ overflow: hidden;
+ padding: 0 20px;
+ transition: max-height 0.4s ease, padding 0.3s ease;
+ background: rgba(255, 255, 255, 0.3);
+ }
+
+ body.dark-mode .faq-answer {
+ background: rgba(0, 0, 0, 0.2);
+ }
+
+ .faq-answer p {
+ padding: 15px 0;
+ font-size: 1rem;
+ color: #666;
+ line-height: 1.6;
+ }
+
+ body.dark-mode .faq-answer p {
+ color: #ccc;
+ }
+
+ .faq-item.active .faq-answer {
+ max-height: 300px;
+ padding: 0 20px;
+ }
+
+ /* Back to Top Button Styles */
+ #backToTop {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #backToTop {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #backToTop.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: scale(1.08);
+ }
+
+ #backToTop:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ /* Back to Top to Bottom Button Styles */
+ #Toptoback {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #Toptoback {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #Toptoback.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(-10px) scale(1.08);
+ }
+
+ #Toptoback:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ body.dark-mode #Toptoback:hover {
+ background: #e0e0e0;
+ transform: scale(1.15);
+ }
+
+ /* Footer */
+ .footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+ }
+
+ body.dark-mode .footer {
+ background: #1e1e1e;
+ }
+
+ .footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+ }
+
+ .footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+ body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+ }
+
+ .footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+ }
+
+ .footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ }
+
+ body.dark-mode .footer-logo {
+ color: #e0e0e0;
+ }
+
+ .footer-logo-icon {
+ font-size: 2rem;
+ }
+
+ .footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+ }
+
+ body.dark-mode .footer-description {
+ color: #a0a0a0;
+ }
+
+ .footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .footer-links li {
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+ }
+
+ body.dark-mode .footer-links a {
+ color: #a0a0a0;
+ }
+
+ .footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+ }
+
+ body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ .footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+ }
+
+ .social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+ .footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+ }
+
+ body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+ }
+
+ .footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+ }
+
+ body.dark-mode .copyright {
+ color: #a0a0a0;
+ }
+
+ .copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+ }
+
+ body.dark-mode .copyright .name {
+ color: #ef6154;
+ }
+
+ .footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ }
+
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ }
+
+ .badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .badge-green {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-blue {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-purple {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+ body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ /* Responsive Design */
+ @media (max-width: 1024px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+ }
+
+ /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
+ @media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ display: flex;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: #1a1a1a;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 6rem;
+ transition: transform 0.3s ease;
+ transform: translateX(-100%);
+ gap: 0;
+ z-index: 999;
+ }
+
+ body.dark-mode .nav-links {
+ background: #1a1a1a !important;
+ }
+
+ .nav-links.active {
+ transform: translateX(0);
+ }
+
+ .nav-links li {
+ width: 90%;
+ margin: 0;
+ padding: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ body.dark-mode .nav-links li {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-links a {
+ width: 100%;
+ padding: 1.5rem 2rem;
+ font-size: 1.2rem;
+ margin-bottom: 0;
+ background: #2a2a2a !important;
+ color: #e0e0e0 !important;
+ border-radius: 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ transition: all 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ background: #3a3a3a !important;
+ color: #ffffff !important;
+ }
+
+ /* Mobile navigation active state */
+ .nav-links a.active {
+ background: #0d0d0d !important;
+ color: #ffffff !important;
+ }
+
+ .nav-actions {
+ gap: 0.5rem;
+ position: relative;
+ z-index: 1001;
+ }
+
+
+
+ .dark-mode-btn {
+ width: 40px;
+ height: 40px;
+ font-size: 0.9rem;
+ }
+
+ .hamburger {
+ display: flex;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+ }
+
+ /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
+ @media (max-width: 480px) {
+ .navbar {
+ padding: 0.5rem;
+ }
+
+ .logo {
+ font-size: 1.3rem;
+ }
+
+ .logo-icon {
+ font-size: 1.5rem;
+ }
+
+ .nav-actions {
+ gap: 0.3rem;
+ }
+
+ .dark-mode-btn {
+ width: 35px;
+ height: 35px;
+ font-size: 0.8rem;
+ }
+ }
+
+ @media (max-width: 768px) {
+ .faq-section {
+ padding: 100px 15px 40px;
+ }
+
+ .faq-title {
+ font-size: 2.2rem;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ text-align: center;
+ }
+
+ .footer-section h3.footer-title::after {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+
+ .social-links {
+ justify-content: center;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .navbar {
+ padding: 0.5rem;
+ }
+
+ .logo {
+ font-size: 1.3rem;
+ }
+
+ .logo-icon {
+ font-size: 1.5rem;
+ }
+
+ .faq-title {
+ font-size: 1.8rem;
+ }
+
+ .faq-question {
+ padding: 15px;
+ font-size: 1.1rem;
+ }
+
+ .faq-answer p {
+ padding: 12px 0;
+ font-size: 0.95rem;
+ }
+ }
diff --git a/assets/css/feedback.css b/assets/css/feedback.css
new file mode 100644
index 0000000..c992ccc
--- /dev/null
+++ b/assets/css/feedback.css
@@ -0,0 +1,876 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:root {
+ --candy-red: #ff6b6b;
+ --sky-blue: #4ecdc4;
+ --sunny-yellow: #ffd93d;
+ --soft-pink: #ffb6c1;
+ --mint-green: #98fb98;
+ --lavender: #e6e6fa;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+}
+
+body {
+ font-family: "Comic Neue", cursive;
+ overflow-x: hidden;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ transition: all 0.3s ease;
+}
+
+body.dark-mode {
+ background-color: #0d0d0d;
+}
+
+/* Navigation - Same as index.html */
+.navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+}
+
+body.dark-mode .navbar {
+ background: #1e1e1e;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+}
+
+.logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+}
+
+.logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+}
+
+.logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+}
+
+.logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+}
+
+.logo:hover .logo-icon {
+ transform: rotate(10deg);
+}
+
+body.dark-mode .logo {
+ color: #e0e0e0;
+}
+
+body.dark-mode .logo:hover {
+ color: #e0e0e0;
+}
+
+.nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+}
+
+.nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+}
+
+body.dark-mode .nav-links a {
+ color: #e0e0e0;
+ background: rgba(111, 100, 91, 0.133);
+ border: 2px solid transparent;
+}
+
+.nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+}
+
+.nav-links a.active {
+ background-color: #3e2723;
+ color: white;
+}
+
+body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e;
+ color: #e0e0e0;
+}
+
+body.dark-mode .nav-links a.active {
+ background: linear-gradient(45deg, #e74c3c, #f39c12);
+ color: #fff;
+}
+
+.nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+.dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+}
+
+
+.hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+}
+
+.hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, var(--candy-red), var(--sky-blue));
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+}
+
+body.dark-mode .hamburger span {
+ background: #e0e0e0;
+}
+
+.hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+}
+
+.hamburger.active span:nth-child(2) {
+ opacity: 0;
+}
+
+.hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+}
+
+/* Main Content */
+.main-content {
+ margin-top: 100px;
+ padding: 2rem;
+ min-height: calc(100vh - 200px);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+}
+
+.feedback-container {
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(15px);
+ padding: 3rem;
+ border-radius: 30px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+ max-width: 800px;
+ width: 100%;
+ margin: 0 auto;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.3s ease;
+}
+
+body.dark-mode .feedback-container {
+ background: #1e1e1e;
+ box-shadow: 0 2px 2px #1e1e1e;
+}
+
+.feedback-header {
+ text-align: center;
+ margin-bottom: 3rem;
+}
+
+.feedback-title {
+ font-size: 3rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+}
+
+body.dark-mode .feedback-title {
+ font-size: 3rem;
+ font-weight: 700;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+}
+
+.feedback-subtitle {
+ font-size: 1.2rem;
+ color: #666;
+ font-weight: 400;
+ line-height: 1.6;
+ transition: color 0.3s ease;
+}
+
+body.dark-mode .feedback-subtitle {
+ color: #a0a0a0;
+}
+
+.feedback-form {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
+
+.form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+}
+
+.form-label {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #3e2723;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+body.dark-mode .form-label {
+ color: #e0e0e0;
+}
+
+.form-input {
+ padding: 1rem;
+ border: 2px solid #e5c5b3;
+ border-radius: 15px;
+ font-size: 1rem;
+ font-family: inherit;
+ background: rgba(255, 255, 255, 0.8);
+ transition: all 0.3s ease;
+}
+
+.form-input:focus {
+ outline: none;
+ border-color: #3e2723;
+ box-shadow: 0 0 20px rgba(62, 39, 35, 0.2);
+ background: rgba(255, 255, 255, 1);
+}
+
+body.dark-mode .form-input {
+ background: rgba(45, 45, 45, 0.8);
+ border-color: #666;
+ color: #fff;
+}
+
+body.dark-mode .form-input:focus {
+ border-color: #0d0d0d;
+ box-shadow: 0 0 10px rgba(77, 76, 76, 0.2);
+ background: rgba(45, 45, 45, 1);
+}
+
+.form-textarea {
+ min-height: 120px;
+ resize: vertical;
+}
+
+.rating-container {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.star-rating {
+ display: flex;
+ gap: 0.2rem;
+}
+
+.star {
+ font-size: 2rem;
+ color: #ddd;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.star:hover,
+.star.active {
+ color: #ffd93d;
+ transform: scale(1.1);
+}
+
+.star:hover~.star {
+ color: #ddd;
+}
+
+.rating-text {
+ margin-left: 1rem;
+ font-weight: 600;
+ color: #3e2723;
+}
+
+body.dark-mode .rating-text {
+ color: #e0e0e0;
+}
+
+.category-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+}
+
+.category-card {
+ background: rgba(255, 255, 255, 0.5);
+ border: 2px solid #e5c5b3;
+ border-radius: 15px;
+ padding: 1.5rem;
+ text-align: center;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+
+.category-card:hover {
+ background: rgba(62, 39, 35, 0.1);
+ border-color: #3e2723;
+ transform: translateY(-2px);
+}
+
+.category-card.selected {
+ background: #3e2723;
+ color: white;
+ border-color: #3e2723;
+}
+
+body.dark-mode .category-card {
+ background: rgba(45, 45, 45, 0.5);
+ border-color: #666;
+ color: #fff;
+}
+
+body.dark-mode .category-card:hover {
+ background: rgba(81, 81, 81, 0.5);
+ border-color: gray;
+}
+
+body.dark-mode .category-card.selected {
+ background: rgba(81, 81, 81, 0.5);
+ border-color: #544f4f;
+}
+
+.category-icon {
+ font-size: 2rem;
+ margin-bottom: 0.5rem;
+}
+
+.category-title {
+ font-weight: 600;
+ font-size: 1rem;
+}
+
+.submit-btn {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ font-size: 1.3rem;
+ font-weight: 700;
+ padding: 1.2rem 3rem;
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(62, 39, 35, 0.4);
+ align-self: center;
+}
+
+.submit-btn:hover {
+ transform: translateY(-5px) scale(1.05);
+ box-shadow: 0 15px 40px rgba(62, 39, 35, 0.6);
+}
+
+body.dark-mode .submit-btn {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+}
+
+.submit-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+}
+
+.submit-btn::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg,
+ transparent,
+ rgba(255, 255, 255, 0.3),
+ transparent);
+ transition: left 0.5s;
+}
+
+.submit-btn:hover::before {
+ left: 100%;
+}
+
+.success-message {
+ background: linear-gradient(45deg, #98fb98, #90ee90);
+ color: #2d5016;
+ padding: 1rem 2rem;
+ border-radius: 15px;
+ text-align: center;
+ font-weight: 600;
+ margin-bottom: 2rem;
+ display: none;
+}
+
+.success-message.show {
+ display: block;
+ animation: slideIn 0.5s ease-out;
+}
+
+@keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+/* Footer - Same as index.html */
+.footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+}
+
+.footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+}
+
+.footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+}
+
+.footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+}
+
+body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+}
+
+.footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+}
+
+.footer-logo-icon {
+ font-size: 2rem;
+}
+
+.footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+}
+
+.footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+}
+
+.footer-links li {
+ margin-bottom: 0.8rem;
+}
+
+.footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+}
+
+.footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+}
+
+.footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+}
+
+.social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+}
+
+.social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+.social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+}
+
+
+
+.footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+}
+
+.footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+}
+
+.copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+}
+
+.copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+}
+
+.footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+}
+
+.badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+}
+
+.badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+}
+
+body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+}
+
+/* Dark mode footer styles */
+body.dark-mode .footer {
+ background: #1e1e1e;
+}
+
+body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+}
+
+body.dark-mode .footer-logo {
+ color: #e0e0e0;
+}
+
+body.dark-mode .footer-description {
+ color: #a0a0a0;
+}
+
+body.dark-mode .footer-links a {
+ color: #a0a0a0;
+}
+
+body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+}
+
+body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+}
+
+body.dark-mode .copyright {
+ color: #a0a0a0;
+}
+
+body.dark-mode .copyright .name {
+ color: #ef6154;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ display: inline;
+ position: fixed;
+ top: 80px;
+ left: 0;
+ width: 100%;
+ height: calc(100vh - 80px);
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(40px);
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 2rem;
+ transition: transform 0.3s ease;
+ transform: translateX(-100%);
+ gap: 1rem;
+ z-index: 999;
+ }
+
+ .nav-links.active {
+ transform: translateX(0);
+ }
+
+ .nav-links li {
+ padding: 2rem;
+ border-bottom: solid 1px black;
+ border-radius: 8px;
+ }
+
+ body.dark-mode .nav-links {
+ background: #1a1a1a;
+ }
+
+ body.dark-mode .nav-links li {
+ border-bottom: solid 1px white;
+ }
+
+ .nav-links a {
+ width: 80%;
+ padding: 1rem;
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ background-color: transparent !important;
+ }
+
+ .hamburger {
+ display: flex;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ padding-right: 20px;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+
+ .feedback-container {
+ padding: 2rem;
+ margin: 1rem;
+ }
+
+ .feedback-title {
+ font-size: 2.5rem;
+ }
+
+ .category-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ padding: 2rem 1rem 1rem;
+ text-align: center;
+ }
+
+ .footer-section h3.footer-title::after {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+
+ .social-links {
+ justify-content: center;
+ }
+}
+
+@media (max-width: 480px) {
+ .feedback-title {
+ font-size: 2rem;
+ }
+
+ .feedback-subtitle {
+ font-size: 1rem;
+ }
+
+ .feedback-container {
+ padding: 1.5rem;
+ }
+}
\ No newline at end of file
diff --git a/assets/css/helpcenter.css b/assets/css/helpcenter.css
new file mode 100644
index 0000000..53675bd
--- /dev/null
+++ b/assets/css/helpcenter.css
@@ -0,0 +1,772 @@
+:root {
+ --candy-red: #FF6B6B;
+ --sky-blue: #4ECDC4;
+ --sunny-yellow: #FFD93D;
+ --soft-pink: #FFB6C1;
+ --mint-green: #98FB98;
+ --lavender: #E6E6FA;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+ }
+
+ body.dark-mode {
+ background-color: #0d0d0d;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ :root {
+ --candy-red: #FF4757;
+ --sky-blue: #70A1FF;
+ --sunny-yellow: #FFA502;
+ --white: #FFFFFF;
+ --light-pink: #FFE0E6;
+ --light-blue: #E8F4FF;
+ --light-yellow: #FFF5E0;
+ }
+
+ body {
+ font-family: 'Comic Neue', cursive;
+ background-color:#f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ overflow-x: hidden;
+ }
+
+ /* Animated Background Elements */
+ .floating-elements {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ body.dark-mode .floating-elements {
+ opacity: 0.6;
+ }
+
+ .floating-cupcake {
+ position: absolute;
+ font-size: 2rem;
+ animation: float 6s ease-in-out infinite;
+ }
+
+ .floating-cupcake:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
+ .floating-cupcake:nth-child(2) { top: 20%; right: 15%; animation-delay: 2s; }
+ .floating-cupcake:nth-child(3) { bottom: 20%; left: 20%; animation-delay: 4s; }
+ .floating-cupcake:nth-child(4) { bottom: 30%; right: 10%; animation-delay: 1s; }
+
+ @keyframes float {
+ 0%, 100% { transform: translateY(0px) rotate(0deg); }
+ 50% { transform: translateY(-20px) rotate(5deg); }
+ }
+
+ /* Navigation */
+ .navbar {
+ background: radial-gradient(circle at center,#e5c5b3,#e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .navbar {
+ background: #1e1e1e;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right:50px;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ color:#3e2723;
+ }
+
+ .logo:hover .logo-icon {
+ transform: rotate(10deg);
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .logo:hover {
+ color: #e0e0e0;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ .nav-links a.active {
+ background-color:#f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0;
+ background: rgba(111, 100, 91, 0.133);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a.active {
+ background: linear-gradient(45deg, #e74c3c, #c0392b);
+ color: white;
+ }
+
+ .nav-links a:hover {
+ background-color:#f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e;
+ color: #e0e0e0;
+ }
+
+ /* Navigation Actions */
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color:#3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+
+
+ .hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, var(--candy-red), var(--sky-blue));
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .hamburger span {
+ background: linear-gradient(45deg, #3498db, #9b59b6);
+ }
+
+ .hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+ }
+
+ .hamburger.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+ }
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ position: fixed;
+ top: 80px;
+ left: -100%;
+ width: 100%;
+ height: calc(100vh - 80px);
+ background: rgba(255, 255, 255, 0.98);
+ backdrop-filter: blur(20px);
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 2rem;
+ transition: left 0.3s ease;
+ gap: 2.8rem;
+ z-index: 999;
+ }
+
+ body.dark-mode .nav-links {
+ background: rgba(26, 26, 26, 0.98);
+ }
+
+ .nav-links.active {
+ left: 0;
+ }
+
+ .nav-links a {
+ width: 80%;
+ text-align: center;
+ padding: 1rem;
+ font-size: 1.1rem;
+ margin: 0.5rem 0;
+ }
+
+ .nav-actions {
+ gap: 0.5rem;
+ position: relative;
+ z-index: 1001;
+ }
+
+
+
+ .dark-mode-btn {
+ width: 40px;
+ height: 40px;
+ font-size: 0.9rem;
+ }
+
+ .hamburger {
+ display: flex;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .navbar {
+ padding: 0.5rem;
+ }
+
+ .logo {
+ font-size: 1.3rem;
+ }
+
+ .logo-icon {
+ font-size: 1.5rem;
+ }
+
+ .nav-actions {
+ gap: 0.3rem;
+ }
+
+
+
+ .dark-mode-btn {
+ width: 35px;
+ height: 35px;
+ font-size: 0.8rem;
+ }
+ }
+
+ /* Main part */
+
+ .help-center {
+ padding: 60px 20px;
+ background: linear-gradient(to right, #fffafc, #fdf1f5);
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+ transition: all 0.3s ease;
+}
+
+.help-center .container {
+ max-width: 800px;
+ margin: auto;
+ margin-top: 4rem;
+ background: #ffffff;
+ padding: 40px;
+ border-radius: 16px;
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
+ text-align: left;
+ transition: background 0.3s ease, color 0.3s ease;
+}
+
+.help-center h1 {
+ font-size: 2.2rem;
+ font-weight: 700;
+ color: #c08497;
+ text-align: center;
+ margin-bottom: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 12px;
+}
+
+.divider {
+ border: none;
+ border-top: 2px solid #f3d1d9;
+ margin: 10px auto 40px;
+ width: 60%;
+}
+
+
+.faq {
+ margin-bottom: 20px;
+ padding: 18px 20px;
+ border-radius: 12px;
+ background: #fff7f9;
+ transition: transform 0.2s ease, background 0.3s ease;
+}
+
+.faq:hover {
+ transform: translateY(-3px);
+ background: #ffeef3;
+}
+
+.faq h2 {
+ font-size: 1.2rem;
+ font-weight: 600;
+ color: #444;
+ margin-bottom: 8px;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.faq h2 i {
+ color: #c08497;
+ font-size: 1.2rem;
+}
+
+.faq p {
+ font-size: 1rem;
+ color: #555;
+ line-height: 1.6;
+}
+
+
+
+ .back-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ padding: 1rem 2rem;
+ border-radius: 25px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ margin-top: 2rem;
+ box-shadow: 0 4px 15px rgba(62, 39, 35, 0.3);
+ }
+
+ .back-link:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 8px 25px rgba(62, 39, 35, 0.4);
+ }
+
+ body.dark-mode .back-link {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+ }
+
+ body.dark-mode .back-link:hover {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
+ }
+
+ /* ===================
+ DARK MODE THEME
+ =================== */
+
+body.dark-mode .help-center {
+ background: linear-gradient(to right, #1a1a1a, #2a2a2a);
+}
+
+body.dark-mode .help-center .container {
+ background: #242424;
+ color: #e4e4e4;
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
+}
+
+
+body.dark-mode .help-center h1 {
+ color: #f8b4c3;
+}
+
+body.dark-mode .divider {
+ border-top: 2px solid #444;
+}
+
+
+body.dark-mode .faq {
+ background: #2e2e2e;
+ border: 1px solid #3a3a3a;
+}
+
+body.dark-mode .faq:hover {
+ background: #3a3a3a;
+}
+
+body.dark-mode .faq h2 {
+ color: #f0f0f0;
+}
+
+body.dark-mode .faq p {
+ color: #ccc;
+}
+
+body.dark-mode .faq h2 i {
+ color: #f8b4c3;
+}
+ body.dark-mode .back-home {
+ color: #f8b4c3;
+ border-color: #f8b4c3;
+ }
+
+ body.dark-mode .back-home:hover {
+ background: #f8b4c3;
+ color: #1a1a1a;
+ }
+
+ /* Footer Styles */
+ .footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+ }
+
+ body.dark-mode .footer {
+ background: #1e1e1e;
+ }
+
+ .footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+ }
+
+ .footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+ body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+ }
+
+ .footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+ }
+
+ .footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ }
+
+ body.dark-mode .footer-logo {
+ color: #e0e0e0;
+ }
+
+ .footer-logo-icon {
+ font-size: 2rem;
+ }
+
+ .footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+ }
+
+ body.dark-mode .footer-description {
+ color: #a0a0a0;
+ }
+
+ .footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .footer-links li {
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+ }
+
+ body.dark-mode .footer-links a {
+ color: #a0a0a0;
+ }
+
+ .footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+ }
+
+ body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ .footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+ }
+
+ .social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+ .footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+ }
+
+ body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+ }
+
+ .footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+ }
+
+ body.dark-mode .copyright {
+ color: #a0a0a0;
+ }
+
+ .copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+ }
+
+ body.dark-mode .copyright .name {
+ color: #ef6154;
+ }
+
+ .footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ }
+
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ }
+
+ .badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .badge-green {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-blue {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-purple {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+ body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ /* Responsive Design */
+ @media (max-width: 1024px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+ }
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
new file mode 100644
index 0000000..2dd09d6
--- /dev/null
+++ b/assets/css/index.css
@@ -0,0 +1,515 @@
+* { margin:0; padding:0; box-sizing:border-box; }
+
+ :root{
+ --candy-red:#ff6b6b;
+ --sky-blue:#4ecdc4;
+ --sunny-yellow:#ffd93d;
+ --soft-pink:#ffb6c1;
+ --mint-green:#98fb98;
+ --lavender:#e6e6fa;
+ --dark-bg:#1a1a1a;
+ --dark-card:#2d2d2d;
+ --dark-text:#ffffff;
+ --dark-border:#404040;
+ /* added vars that were referenced */
+ --border-color:#e6e6e6;
+ --text-light:#666666;
+ --text-dark:#1a1a1a;
+ --shadow-medium:0 10px 30px rgba(0,0,0,.12);
+ }
+ /* 1) Hero title (light) */
+.hero-title {
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+ -webkit-background-clip: text;
+ background-clip: text; /* <-- added */
+ -webkit-text-fill-color: transparent;
+ /* (optional) color: transparent; */
+ margin-bottom: 1rem;
+}
+
+/* 2) Hero title (dark) */
+body.dark-mode .hero-title {
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ background-clip: text; /* <-- added */
+ -webkit-text-fill-color: transparent;
+ /* (optional) color: transparent; */
+ margin-bottom: 1rem;
+}
+
+/* 3) Form title (light) — if this block exists in your CSS */
+.form-title {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ font-weight: 600;
+ color: var(--text-dark);
+ background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+ -webkit-background-clip: text;
+ background-clip: text; /* <-- added */
+ -webkit-text-fill-color: transparent;
+ /* (optional) color: transparent; */
+}
+
+/* 4) Form title (dark) — if this block exists in your CSS */
+body.dark-mode .form-title {
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ font-weight: 600;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ background-clip: text; /* <-- added */
+ -webkit-text-fill-color: transparent;
+ /* (optional) color: transparent; */
+}
+
+ body{
+ font-family:"Comic Neue", cursive;
+ overflow-x:hidden;
+ background-color:#f5f3f1;
+ min-height:100vh;
+ position:relative;
+ transition:all .3s ease;
+ color:#1a1a1a;
+ }
+ body.dark-mode{
+ background:#0d0d0d;
+ color:#ffffff;
+ }
+
+ @keyframes wobble{
+ 0%{transform:translateX(0)}
+ 15%{transform:translateX(-25px) rotate(-5deg)}
+ 30%{transform:translateX(20px) rotate(3deg)}
+ 45%{transform:translateX(-15px) rotate(-3deg)}
+ 60%{transform:translateX(10px) rotate(2deg)}
+ 75%{transform:translateX(-5px) rotate(-1deg)}
+ 100%{transform:translateX(0)}
+ }
+ @keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
+ @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
+ @keyframes spin{to{transform:rotate(360deg)}}
+
+ /* Loading screen */
+ #loading-screen{
+ position:fixed; inset:0;
+ background:rgba(255,255,255,0.95);
+ display:flex; align-items:center; justify-content:center;
+ z-index:2000;
+ transition:opacity .3s ease, visibility .3s ease;
+ }
+ #loading-screen.hidden{opacity:0; visibility:hidden}
+ #loading-screen .loader{display:flex; flex-direction:column; align-items:center; gap:.75rem; color:#3e2723; font-weight:700}
+ #loading-screen .fa-spinner{font-size:2rem; animation:spin 1s linear infinite}
+
+ /* Nav */
+ .navbar{
+ background:radial-gradient(circle at center,#e5c5b3,#e9b4b6);
+ backdrop-filter:blur(15px);
+ padding:1rem 2rem;
+ position:fixed; top:0; width:100%; z-index:1000;
+ box-shadow:0 8px 32px rgba(0,0,0,0.1);
+ border-bottom:1px solid rgba(255,255,255,0.2);
+ transition:all .3s ease;
+ }
+ body.dark-mode .navbar{background:#1e1e1e !important; border-bottom:1px solid rgba(255,255,255,0.1) !important}
+
+ .nav-container{display:flex; justify-content:space-between; align-items:center; max-width:1500px; margin:0 auto}
+ .logo{font-size:2rem; font-weight:600; color:#3e2723; text-decoration:none; transition:all .3s ease; display:flex; align-items:center; gap:.5rem; min-width:150px; padding-right:50px}
+ .logo-icon{font-size:2rem; transition:transform .3s ease}
+ .logo:hover{transform:scale(1.05); color:#3e2723}
+ .logo:hover .logo-icon{transform:rotate(10deg)}
+ body.dark-mode .logo{color:#e0e0e0}
+ body.dark-mode .logo:hover{color:#e0e0e0}
+
+ .nav-links{display:flex; list-style:none; gap:1.5rem; align-items:center}
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ font-size: 1.1rem;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0 !important;
+ background: rgba(111, 100, 91, 0.133) !important;
+ border: 2px solid transparent !important;
+ }
+
+ .nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d !important;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e !important;
+ color: #e0e0e0 !important;
+ }
+
+ /* Active navigation link styles */
+ .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ body.dark-mode .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .nav-actions{display:flex; align-items:center; gap:1rem}
+ .dark-mode-btn{
+ background:linear-gradient(135deg, #3e2723, #4d312b); border:none; color:white; padding:.7rem; border-radius:50%;
+ cursor:pointer; transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); font-size:1rem; width:45px; height:45px;
+ display:flex; align-items:center; justify-content:center; box-shadow:0 4px 15px rgba(0,0,0,0.2);
+ position:relative; overflow:hidden;
+ }
+ .dark-mode-btn::before{
+ content:''; position:absolute; top:50%; left:50%; width:0; height:0;
+ background:rgba(255,255,255,0.2); border-radius:50%; transition:all .4s ease;
+ transform:translate(-50%, -50%);
+ }
+ .dark-mode-btn:hover::before{width:100%; height:100%}
+ .dark-mode-btn:hover{
+ transform:scale(1.15) rotate(360deg);
+ box-shadow:0 8px 25px rgba(0,0,0,0.3), 0 4px 12px rgba(62,39,35,0.2);
+ background:linear-gradient(135deg, #4d312b, #3e2723);
+ }
+ body.dark-mode .dark-mode-btn{
+ background:linear-gradient(135deg, #e0e0e0, #d0d0d0);
+ color:#1e1e1e;
+ box-shadow:0 4px 15px rgba(224,224,224,0.2);
+ }
+ body.dark-mode .dark-mode-btn:hover{
+ background:linear-gradient(135deg, #f0f0f0, #e0e0e0);
+ box-shadow:0 8px 25px rgba(224,224,224,0.3), 0 4px 12px rgba(30,30,30,0.2);
+ }
+
+ .hamburger{
+ display:none; flex-direction:column; cursor:pointer; padding:.5rem; border-radius:8px;
+ transition:all .4s cubic-bezier(0.4, 0, 0.2, 1); position:relative; overflow:hidden;
+ }
+ .hamburger::before{
+ content:''; position:absolute; top:0; left:0; width:100%; height:100%;
+ background:rgba(255,255,255,0.1); border-radius:8px; opacity:0;
+ transition:opacity .3s ease;
+ }
+ .hamburger:hover::before{opacity:1}
+ .hamburger:hover{transform:scale(1.05)}
+ .hamburger span{
+ width:25px; height:3px; background:linear-gradient(45deg,#a4766a,#5d4037);
+ margin:3px 0; transition:all .3s cubic-bezier(0.4, 0, 0.2, 1); border-radius:2px;
+ position:relative; z-index:1;
+ }
+ .hamburger:hover span{transform:scale(1.1)}
+ body.dark-mode .hamburger span{background:linear-gradient(45deg,#e0e0e0,#c0c0c0)}
+ .hamburger.active span:nth-child(1){transform:rotate(-45deg) translate(-5px,6px)}
+ .hamburger.active span:nth-child(2){opacity:0}
+ .hamburger.active span:nth-child(3){transform:rotate(45deg) translate(-5px,-6px)}
+
+ /* Back to Top Button Styles */
+ #backToTop {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #backToTop {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #backToTop.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: scale(1.08);
+ }
+
+ #backToTop:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ /* Back to Top to Bottom Button Styles */
+ #Toptoback {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #Toptoback {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #Toptoback.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(-10px) scale(1.08);
+ }
+
+ #Toptoback:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ body.dark-mode #Toptoback:hover {
+ background: #e0e0e0;
+ transform: scale(1.15);
+ }
+
+ /* Main */
+ .main-content{margin-top:100px; transition:all .3s ease; padding:2rem; position:relative; z-index:2; min-height:calc(100vh - 200px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
+ .hero-section{
+ background:rgba(255,255,255,0.9); backdrop-filter:blur(15px);
+ padding:3rem; border-radius:30px; box-shadow:0 20px 60px rgba(0,0,0,0.1);
+ max-width:800px; margin:0 auto; position:relative; overflow:hidden; transition:all .3s ease;
+ }
+ body.dark-mode .hero-section{background:#1e1e1e; box-shadow:0 2px 2px #1e1e1e}
+ .hero-section::before{content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; animation:shimmer 3s linear infinite}
+ .hero-title{
+ font-size:3.5rem; font-weight:700;
+ background:linear-gradient(90deg,#3e2723,#4d312b,#3e2723);
+ -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:1rem;
+ }
+ body.dark-mode .hero-title{background:#e0e0e0; -webkit-background-clip:text; background-clip: text;-webkit-text-fill-color:transparent}
+ .hero-subtitle{font-size:1.3rem; color:#333; margin-bottom:2rem; font-weight:400; line-height:1.6; transition:color .3s ease}
+ body.dark-mode .hero-subtitle{color:#e0e0e0 !important}
+
+ .cta-button{
+ background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723);
+ color:white; font-size:1.2rem; font-weight:700; padding:1rem 2.5rem; border:none; border-radius:50px; cursor:pointer;
+ text-decoration:none; display:inline-block; transition:all .3s ease; position:relative; overflow:hidden;
+ box-shadow:0 10px 30px rgba(255,107,107,0.4); animation:pulse 2s ease-in-out infinite;
+ }
+ .cta-button:hover{transform:translateY(-5px) scale(1.05); box-shadow:0 15px 40px rgba(255,107,107,0.6)}
+ .cta-button::before{content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent); transition:left .5s}
+ .cta-button:hover::before{left:100%}
+
+ /* Features */
+ .features-preview{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:4rem; max-width:1000px}
+ .feature-card{background:rgba(255,255,255,0.8); backdrop-filter:blur(10px); padding:2rem; border-radius:20px; text-align:center; transition:all .3s ease; border:2px solid transparent}
+ body.dark-mode .feature-card{background-color:#1e1e1e}
+ .feature-card:hover{transform:translateY(-5px); border-color:#1e1e1e; box-shadow:0 15px 40px #1e1e1e}
+ .feature-icon{font-size:3rem; margin-bottom:1rem; display:block}
+ .feature-card:nth-child(1) .feature-icon{color:var(--candy-red)}
+ .feature-card:nth-child(2) .feature-icon{color:var(--sky-blue)}
+ .feature-card:nth-child(3) .feature-icon{color:var(--sunny-yellow)}
+ .feature-title{font-size:1.3rem; font-weight:700; margin-bottom:.5rem; color:#333}
+ body.dark-mode .feature-title{color:#e0e0e0 !important}
+ .feature-desc{color:#333; line-height:1.5}
+ body.dark-mode .feature-desc{color:#e0e0e0 !important}
+
+ /* Footer */
+ .footer{background:radial-gradient(circle at center,#e9b4b6,#e5c5b3); backdrop-filter:blur(15px); position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.3); margin-top:4rem}
+ body.dark-mode .footer{background:#1e1e1e}
+ .footer-content{max-width:1500px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; padding:3rem 2rem 2rem}
+ .footer-section h3.footer-title{color:#3e2723; font-size:1.2rem; font-weight:700; margin-bottom:1.5rem; position:relative}
+ .footer-section h3.footer-title::after{content:""; position:absolute; bottom:-8px; left:0; width:30px; height:3px; background:#3e2723; border-radius:2px}
+ body.dark-mode .footer-section h3.footer-title::after{background:#e0e0e0}
+ .footer-logo{display:flex; align-items:center; gap:.8rem; margin-bottom:1.5rem; font-size:1.8rem; font-weight:700; color:#3e2723}
+ .footer-logo-icon{font-size:2rem}
+ .footer-description{color:#333; line-height:1.6; margin-bottom:2rem; font-size:.95rem}
+ .footer-links{list-style:none; padding:0; margin:0}
+ .footer-links li{margin-bottom:.8rem}
+ .footer-links a{color:#333; text-decoration:none; display:flex; align-items:center; gap:.8rem; font-weight:500; transition:all .3s ease; padding:.3rem 0; border-radius:5px}
+ .footer-links a:hover{color:black; transform:translateX(4px); background:rgba(255,107,107,0.1); padding-left:.8rem}
+ .footer-links i{font-size:.9rem; width:16px; opacity:.7}
+ .social-links{display:flex; gap:1rem; margin-top:1rem}
+ .social-link{display:inline-flex; align-items:center; justify-content:center; width:45px; height:45px; background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723); color:white; text-decoration:none; border-radius:50%; font-size:1.2rem; transition:all .3s ease; box-shadow:0 4px 15px rgba(0,0,0,0.2)}
+ .social-link:hover{transform:translateY(-3px) scale(1.1); box-shadow:0 8px 25px rgba(0,0,0,0.3)}
+ .footer-bottom{background:rgba(0,0,0,0.05); backdrop-filter:blur(10px); border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0}
+ .footer-bottom-content{max-width:1500px; margin:0 auto; padding:0 2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem}
+ .copyright{color:#333; font-size:.9rem; margin:0}
+ .copyright .name{color:#3e2723; font-weight:600}
+ .footer-badges{display:flex; gap:.8rem; flex-wrap:wrap}
+ .badge{display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .8rem; border-radius:20px; font-size:.8rem; font-weight:600; color:white; text-decoration:none; transition:all .3s ease}
+ .badge:hover{transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,0,0,0.2)}
+ .badge-green,.badge-blue,.badge-purple{background:linear-gradient(90deg,#3e2723,#6e463e,#3e2723)}
+ body.dark-mode .footer-content{background-color:#1e1e1e; border-top:1px solid rgba(255,255,255,0.1)}
+ body.dark-mode .footer-section h3.footer-title{color:#e0e0e0}
+ body.dark-mode .footer-logo{color:#e0e0e0}
+ body.dark-mode .footer-description{color:#a0a0a0}
+ body.dark-mode .footer-links a{color:#e0e0e0}
+ body.dark-mode .footer-links a:hover{color:#a0a0a0; background:rgba(255,138,128,0.1)}
+ body.dark-mode .footer-bottom{background:#1e1e1e}
+ body.dark-mode .copyright{color:#a0a0a0}
+ body.dark-mode .copyright .name{color:#ef6154}
+
+ /* Inputs in dark mode (sane defaults even if forms appear later) */
+ body.dark-mode input{background:#2a2a2a; color:#ffffff; border-color:#404040}
+
+ /* Responsive */
+ @media (max-width:768px){
+ .navbar{padding:.8rem 1rem}
+ .nav-links{
+ display:flex; position:fixed; top:0; left:0; width:100%; height:100vh; background:#1a1a1a;
+ flex-direction:column; justify-content:flex-start; align-items:center; padding-top:6rem;
+ transition:transform .3s ease; transform:translateX(-100%); gap:0; z-index:999;
+ }
+ body.dark-mode .nav-links{background:#1a1a1a !important}
+ .nav-links.active{transform:translateX(0)}
+ .nav-links li{width:90%; border-bottom:1px solid rgba(255,255,255,0.1)}
+ .nav-links a {
+ width: 100%;
+ padding: 1.5rem 2rem;
+ font-size: 1.2rem;
+ margin-bottom: 0;
+ background: #2a2a2a !important;
+ color: #e0e0e0 !important;
+ border-radius: 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ transition: all 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ background: #3a3a3a !important;
+ color: #ffffff !important;
+ }
+
+ /* Mobile navigation active state */
+ .nav-links a.active {
+ background: #0d0d0d !important;
+ color: #ffffff !important;
+ }
+ .nav-actions{gap:.5rem; z-index:1001}
+ .dark-mode-btn{width:40px; height:40px; font-size:.9rem}
+ .hamburger{display:flex; position:relative; z-index:1001}
+
+ .logo{font-size:1.5rem}
+ .logo-icon{font-size:1.7rem}
+ /* Hero title (light) */
+.hero-title{
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+ -webkit-background-clip: text;
+ background-clip: text; /* ✅ standard property */
+ -webkit-text-fill-color: transparent;
+ color: transparent; /* ✅ improves cross-browser */
+ margin-bottom: 1rem;
+}
+
+/* Hero title (dark) */
+body.dark-mode .hero-title{
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ background-clip: text; /* ✅ standard property */
+ -webkit-text-fill-color: transparent;
+ color: transparent; /* ✅ improves cross-browser */
+ margin-bottom: 1rem;
+}
+
+/* Form title (if you still use it anywhere) */
+.form-title{
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ font-weight: 600;
+ color: var(--text-dark);
+ background: linear-gradient(90deg, #3e2723, #4d312b, #3e2723);
+ -webkit-background-clip: text;
+ background-clip: text; /* ✅ standard property */
+ -webkit-text-fill-color: transparent;
+ color: transparent; /* ✅ improves cross-browser */
+}
+
+/* Form title in dark mode (if applicable) */
+body.dark-mode .form-title{
+ text-align: center;
+ margin-bottom: 2rem;
+ font-size: 2rem;
+ font-weight: 600;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ background-clip: text; /* ✅ standard property */
+ -webkit-text-fill-color: transparent;
+ color: transparent; /* ✅ improves cross-browser */
+}
+
+ .hero-title{font-size:2.5rem}
+ .hero-section{padding:2rem; margin:1rem}
+ .features-preview{grid-template-columns:1fr; margin-top:2rem}
+
+ .footer-content{grid-template-columns:1fr; gap:2rem; text-align:center; padding:2rem 1rem 1rem}
+ .footer-section h3.footer-title::after{left:50%; transform:translateX(-50%)}
+ .footer-bottom-content{flex-direction:column; text-align:center; gap:1rem}
+ .footer-badges{justify-content:center}
+ .social-links{justify-content:center}
+ }
+
+ /* Tablet footer grid */
+ @media (max-width:1024px){
+ .footer-content{grid-template-columns:1fr 1fr; gap:2rem}
+ }
+
+ /* Tablet nav tweaks */
+ @media (min-width:769px) and (max-width:1024px){
+ .nav-links{flex-grow:1; justify-content:space-around}
+ .nav-links a{padding:.5rem .8rem}
+ .nav-actions{gap:.8rem}
+ }
+
+ @media (max-width:500px){
+ .footer-content{grid-template-columns:1fr; text-align:center}
+ .footer-logo{justify-content:center}
+ .social-links{justify-content:center}
+ .footer-badges{justify-content:center}
+ }
+
+ @media (max-width:480px){
+ .hero-title{font-size:2rem}
+ .hero-subtitle{font-size:1.1rem}
+ .cta-button{font-size:1rem; padding:.8rem 2rem}
+ }
\ No newline at end of file
diff --git a/assets/css/privacypolicy.css b/assets/css/privacypolicy.css
new file mode 100644
index 0000000..995f17d
--- /dev/null
+++ b/assets/css/privacypolicy.css
@@ -0,0 +1,750 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ :root {
+ --candy-red: #ff6b6b;
+ --sky-blue: #4ecdc4;
+ --sunny-yellow: #ffd93d;
+ --soft-pink: #ffb6c1;
+ --mint-green: #98fb98;
+ --lavender: #e6e6fa;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+ }
+
+ body {
+ font-family: "Comic Neue", cursive;
+ overflow-x: hidden;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode {
+ background-color: #0d0d0d;
+ }
+
+ /* Navigation */
+ .navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .navbar {
+ background: rgba(26, 26, 26, 0.95);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+ }
+
+ .logo:hover .logo-icon {
+ transform: rotate(10deg);
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .logo:hover {
+ color: #e0e0e0;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0;
+ background: rgba(111, 100, 91, 0.133);
+ border: 2px solid transparent;
+ }
+
+ .nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e;
+ color: #e0e0e0;
+ }
+
+ /* Navigation Actions */
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+
+
+
+
+ .hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, var(--candy-red), var(--sky-blue));
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .hamburger span {
+ background: #e0e0e0;
+ }
+
+ .hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+ }
+
+ .hamburger.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+ }
+
+ /* Main Content */
+ .main-content {
+ margin-top: 100px;
+ transition: all 0.3s ease;
+ padding: 2rem;
+ position: relative;
+ z-index: 2;
+ min-height: calc(100vh - 200px);
+ }
+
+ .privacy-container {
+ max-width: 900px;
+ margin: 0 auto;
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(15px);
+ padding: 3rem;
+ border-radius: 30px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .privacy-container {
+ background: rgba(45, 45, 45, 0.9);
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+ }
+
+ .privacy-header {
+ text-align: center;
+ margin-bottom: 3rem;
+ }
+
+ .privacy-title {
+ font-size: 3rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+ }
+
+ body.dark-mode .privacy-title {
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+ }
+
+ .privacy-subtitle {
+ font-size: 1.2rem;
+ color: #666;
+ margin-bottom: 1rem;
+ transition: color 0.3s ease;
+ }
+
+ body.dark-mode .privacy-subtitle {
+ color: #e0e0e0;
+ }
+
+ .last-updated {
+ font-size: 1rem;
+ color: #888;
+ font-style: italic;
+ }
+
+ body.dark-mode .last-updated {
+ color: #aaa;
+ }
+
+ .privacy-content {
+ line-height: 1.8;
+ color: #333;
+ }
+
+ body.dark-mode .privacy-content {
+ color: #ddd;
+ }
+
+ .privacy-section {
+ margin-bottom: 2.5rem;
+ }
+
+ .privacy-section h2 {
+ font-size: 1.8rem;
+ color: #3e2723;
+ margin-bottom: 1rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 3px solid #d18a68;
+ position: relative;
+ }
+
+ body.dark-mode .privacy-section h2 {
+ color: #e0e0e0;
+ border-bottom-color: #e0e0e0;
+ }
+
+ .privacy-section h3 {
+ font-size: 1.4rem;
+ color: #5d4037;
+ margin-bottom: 0.8rem;
+ margin-top: 1.5rem;
+ }
+
+ body.dark-mode .privacy-section h3 {
+ color: #a0a0a0;
+ }
+
+ .privacy-section p {
+ margin-bottom: 1rem;
+ text-align: justify;
+ }
+
+ .privacy-section ul, .privacy-section ol {
+ margin-left: 2rem;
+ margin-bottom: 1rem;
+ }
+
+ .privacy-section li {
+ margin-bottom: 0.5rem;
+ }
+
+ .contact-info {
+ background: rgba(255, 255, 255, 0.7);
+ padding: 1.5rem;
+ border-radius: 15px;
+ border-left: 4px solid #d18a68;
+ margin-top: 2rem;
+ }
+
+ body.dark-mode .contact-info {
+ background: rgba(255, 255, 255, 0.1);
+ border-left-color: #e0e0e0;
+ }
+
+ .back-to-home {
+ text-align: center;
+ margin-top: 3rem;
+ }
+
+ .back-btn {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ font-size: 1.1rem;
+ font-weight: 600;
+ padding: 1rem 2rem;
+ border: none;
+ border-radius: 30px;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .back-btn:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .back-btn {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ }
+
+ /* Footer */
+ .footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+ }
+
+ body.dark-mode .footer {
+ background: #1e1e1e;
+ }
+
+ .footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+ }
+
+ .footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+ body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+ }
+
+ .footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+ }
+
+ .footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ }
+
+ body.dark-mode .footer-logo {
+ color: #e0e0e0;
+ }
+
+ .footer-logo-icon {
+ font-size: 2rem;
+ }
+
+ .footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+ }
+
+ body.dark-mode .footer-description {
+ color: #a0a0a0;
+ }
+
+ .footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .footer-links li {
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+ }
+
+ body.dark-mode .footer-links a {
+ color: #a0a0a0;
+ }
+
+ .footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+ }
+
+ body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ .footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+ }
+
+ .social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+
+ .footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+ }
+
+ body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+ }
+
+ .footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+ }
+
+ body.dark-mode .copyright {
+ color: #a0a0a0;
+ }
+
+ .copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+ }
+
+ body.dark-mode .copyright .name {
+ color: #ef6154;
+ }
+
+ .footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ }
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+
+ }
+ .badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+ .badge-green {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-blue {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-purple {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ display: none;
+ position: fixed;
+ top: 80px;
+ left: 0;
+ width: 100%;
+ height: calc(100vh - 80px);
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(40px);
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 2rem;
+ transition: transform 0.3s ease;
+ transform: translateX(-100%);
+ gap: 1rem;
+ z-index: 999;
+ }
+
+ body.dark-mode .nav-links {
+ background: #1a1a1a;
+ }
+
+ .nav-links.active {
+ display: flex;
+ transform: translateX(0);
+ }
+
+ .nav-links li {
+ padding: 1rem;
+ border-bottom: solid 1px black;
+ border-radius: 8px;
+ width: 80%;
+ text-align: center;
+ }
+
+ body.dark-mode .nav-links li {
+ border-bottom: solid 1px white;
+ }
+
+ .nav-links a {
+ width: 100%;
+ padding: 1rem;
+ font-size: 1.2rem;
+ background-color: transparent !important;
+ }
+
+ .hamburger {
+ display: flex;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ padding-right: 0;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+
+ .privacy-container {
+ padding: 2rem;
+ margin: 1rem;
+ }
+
+ .privacy-title {
+ font-size: 2.2rem;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ padding: 2rem 1rem 1rem;
+ text-align: center;
+ }
+
+ .footer-section h3.footer-title::after {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+
+ .social-links {
+ justify-content: center;
+ }
+ }
+
+ @media (max-width: 1024px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2.5rem;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .privacy-title {
+ font-size: 1.8rem;
+ }
+
+ .privacy-container {
+ padding: 1.5rem;
+ }
+
+ .privacy-section h2 {
+ font-size: 1.5rem;
+ }
+ }
\ No newline at end of file
diff --git a/assets/css/reportissue.css b/assets/css/reportissue.css
new file mode 100644
index 0000000..ab303e1
--- /dev/null
+++ b/assets/css/reportissue.css
@@ -0,0 +1,869 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ :root {
+ --candy-red: #ff6b6b;
+ --sky-blue: #4ecdc4;
+ --sunny-yellow: #ffd93d;
+ --soft-pink: #ffb6c1;
+ --mint-green: #98fb98;
+ --lavender: #e6e6fa;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+ }
+
+ body {
+ font-family: "Comic Neue", cursive;
+ overflow-x: hidden;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode {
+ background-color: #0d0d0d;
+ }
+
+ @keyframes wobble {
+ 0% {
+ transform: translateX(0%);
+ }
+
+ 15% {
+ transform: translateX(-25px) rotate(-5deg);
+ }
+
+ 30% {
+ transform: translateX(20px) rotate(3deg);
+ }
+
+ 45% {
+ transform: translateX(-15px) rotate(-3deg);
+ }
+
+ 60% {
+ transform: translateX(10px) rotate(2deg);
+ }
+
+ 75% {
+ transform: translateX(-5px) rotate(-1deg);
+ }
+
+ 100% {
+ transform: translateX(0%);
+ }
+ }
+
+ @keyframes shimmer {
+ 0% {
+ background-position: -1000px 0;
+ }
+
+ 100% {
+ background-position: 1000px 0;
+ }
+ }
+
+ @keyframes pulse {
+ 0% {
+ transform: scale(1);
+ }
+
+ 50% {
+ transform: scale(1.05);
+ }
+
+ 100% {
+ transform: scale(1);
+ }
+ }
+
+ /* Navigation */
+ .navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .navbar {
+ background: #1e1e1e;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+ }
+
+ .logo:hover .logo-icon {
+ transform: rotate(10deg);
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .logo:hover {
+ color: #e0e0e0;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0;
+ background: rgba(111, 100, 91, 0.133);
+ border: 2px solid transparent;
+ }
+
+ .nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ .nav-links a.active {
+ background-color: #3e2723;
+ color: white;
+ }
+
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e;
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .nav-links a.active {
+ background: linear-gradient(45deg, #e74c3c, #f39c12);
+ color: #fff;
+ }
+
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+
+
+ .hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, var(--candy-red), var(--sky-blue));
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .hamburger span {
+ background: #e0e0e0;
+ }
+
+ .hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+ }
+
+ .hamburger.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+ }
+
+ /* Main Content */
+ .main-content {
+ margin-top: 100px;
+ padding: 2rem;
+ min-height: calc(100vh - 200px);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ }
+
+ .feedback-container {
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(15px);
+ padding: 3rem;
+ border-radius: 30px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+ max-width: 800px;
+ width: 100%;
+ margin: 0 auto;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .feedback-container {
+ background: #1e1e1e;
+ box-shadow: 0 2px 2px #1e1e1e;
+ }
+
+ .feedback-header {
+ text-align: center;
+ margin-bottom: 3rem;
+ }
+
+ .feedback-title {
+ font-size: 3rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+ }
+
+ body.dark-mode .feedback-title {
+ font-size: 3rem;
+ font-weight: 700;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+ }
+
+ .feedback-subtitle {
+ font-size: 1.2rem;
+ color: #666;
+ font-weight: 400;
+ line-height: 1.6;
+ transition: color 0.3s ease;
+ }
+
+ body.dark-mode .feedback-subtitle {
+ color: #a0a0a0;
+ }
+
+ .feedback-form {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+ }
+
+ .form-group {
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ }
+
+ .form-label {
+ font-size: 1.1rem;
+ font-weight: 600;
+ color: #3e2723;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ body.dark-mode .form-label {
+ color: #e0e0e0;
+ }
+
+ .form-input {
+ padding: 1rem;
+ border: 2px solid #e5c5b3;
+ border-radius: 15px;
+ font-size: 1rem;
+ font-family: inherit;
+ background: rgba(255, 255, 255, 0.8);
+ transition: all 0.3s ease;
+ }
+
+ .form-input:focus {
+ outline: none;
+ border-color: #3e2723;
+ box-shadow: 0 0 20px rgba(62, 39, 35, 0.2);
+ background: rgba(255, 255, 255, 1);
+ }
+
+ body.dark-mode .form-input {
+ background: rgba(45, 45, 45, 0.8);
+ border-color: #666;
+ color: #fff;
+ }
+
+ body.dark-mode .form-input:focus {
+ border-color: #0d0d0d;
+ box-shadow: 0 0 10px rgba(77, 76, 76, 0.2);
+ background: rgba(45, 45, 45, 1);
+ }
+
+ .form-textarea {
+ min-height: 120px;
+ resize: vertical;
+ }
+
+ body.dark-mode .rating-text {
+ color: #e0e0e0;
+ }
+
+ .category-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+ gap: 1rem;
+ }
+
+
+
+
+ body.dark-mode .category-card {
+ background: rgba(45, 45, 45, 0.5);
+ border-color: #666;
+ color: #fff;
+ }
+
+ body.dark-mode .category-card:hover {
+ background: rgba(81, 81, 81, 0.5);
+ border-color: gray;
+ }
+
+ body.dark-mode .category-card.selected {
+ background: rgba(81, 81, 81, 0.5);
+ border-color: #544f4f;
+ }
+
+
+ .submit-btn {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ font-size: 1.3rem;
+ font-weight: 700;
+ padding: 1.2rem 3rem;
+ border: none;
+ border-radius: 50px;
+ cursor: pointer;
+ text-decoration: none;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+ box-shadow: 0 10px 30px rgba(62, 39, 35, 0.4);
+ align-self: center;
+ }
+
+ .submit-btn:hover {
+ transform: translateY(-5px) scale(1.05);
+ box-shadow: 0 15px 40px rgba(62, 39, 35, 0.6);
+ }
+
+ body.dark-mode .submit-btn {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ }
+
+ .submit-btn:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+ transform: none;
+ }
+
+ .submit-btn::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -100%;
+ width: 100%;
+ height: 100%;
+ background: linear-gradient(90deg,
+ transparent,
+ rgba(255, 255, 255, 0.3),
+ transparent);
+ transition: left 0.5s;
+ }
+
+ .submit-btn:hover::before {
+ left: 100%;
+ }
+
+ .success-message {
+ background: linear-gradient(45deg, #98fb98, #90ee90);
+ color: #2d5016;
+ padding: 1rem 2rem;
+ border-radius: 15px;
+ text-align: center;
+ font-weight: 600;
+ margin-bottom: 2rem;
+ display: none;
+ }
+
+ .success-message.show {
+ display: block;
+ animation: slideIn 0.5s ease-out;
+ }
+
+ @keyframes slideIn {
+ from {
+ opacity: 0;
+ transform: translateY(-20px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ /* Footer - Same as index.html */
+ .footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+ }
+
+ .footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+ }
+
+ .footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+ .footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+ }
+
+ .footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ }
+
+ .footer-logo-icon {
+ font-size: 2rem;
+ }
+
+ .footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+ }
+
+ .footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .footer-links li {
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+ }
+
+ .footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+ }
+
+ .footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+ }
+
+ .social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+
+
+ .footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+ }
+
+ .footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+ }
+
+ .copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+ }
+
+ .footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ }
+
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ /* Dark mode footer styles */
+ body.dark-mode .footer {
+ background: #1e1e1e;
+ }
+
+ body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .footer-logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .footer-description {
+ color: #a0a0a0;
+ }
+
+ body.dark-mode .footer-links a {
+ color: #a0a0a0;
+ }
+
+ body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+ }
+
+ body.dark-mode .copyright {
+ color: #a0a0a0;
+ }
+
+ body.dark-mode .copyright .name {
+ color: #ef6154;
+ }
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ display: inline;
+ position: fixed;
+ top: 80px;
+ left: 0;
+ width: 100%;
+ height: calc(100vh - 80px);
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(40px);
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 2rem;
+ transition: transform 0.3s ease;
+ transform: translateX(-100%);
+ gap: 1rem;
+ z-index: 999;
+ }
+
+ .nav-links.active {
+ transform: translateX(0);
+ }
+
+ .nav-links li {
+ padding: 2rem;
+ border-bottom: solid 1px black;
+ border-radius: 8px;
+ }
+
+ body.dark-mode .nav-links {
+ background: #1a1a1a;
+ }
+
+ body.dark-mode .nav-links li {
+ border-bottom: solid 1px white;
+ }
+
+ .nav-links a {
+ width: 80%;
+ padding: 1rem;
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ background-color: transparent !important;
+ }
+
+ .hamburger {
+ display: flex;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ padding-right: 20px;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+
+ .feedback-container {
+ padding: 2rem;
+ margin: 1rem;
+ }
+
+ .feedback-title {
+ font-size: 2.5rem;
+ }
+
+ .category-grid {
+ grid-template-columns: 1fr;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ padding: 2rem 1rem 1rem;
+ text-align: center;
+ }
+
+ .footer-section h3.footer-title::after {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+
+ .social-links {
+ justify-content: center;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .feedback-title {
+ font-size: 2rem;
+ }
+
+ .feedback-subtitle {
+ font-size: 1rem;
+ }
+
+ .feedback-container {
+ padding: 1.5rem;
+ }
+ }
\ No newline at end of file
diff --git a/assets/css/scale.css b/assets/css/scale.css
new file mode 100644
index 0000000..ca76872
--- /dev/null
+++ b/assets/css/scale.css
@@ -0,0 +1,1661 @@
+:root {
+ --candy-red: #FF6B6B;
+ --sky-blue: #4ECDC4;
+ --sunny-yellow: #FFD93D;
+ --soft-pink: #FFB6C1;
+ --mint-green: #98FB98;
+ --lavender: #E6E6FA;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+ }
+
+ body {
+ font-family: 'Comic Neue', cursive;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ overflow-x: hidden;
+ transition: all 0.3s ease;
+ margin: 0;
+ padding: 0;
+ }
+
+ body.dark-mode {
+ background-color: #0d0d0d;
+ }
+
+ /* Navigation */
+ /* ===== STANDARDIZED NAVIGATION BAR ===== */
+ .navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .navbar {
+ background: #1e1e1e !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+ }
+
+ .logo:hover .logo-icon {
+ transform: rotate(10deg);
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .logo:hover {
+ color: #e0e0e0;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0 !important;
+ background: rgba(111, 100, 91, 0.133) !important;
+ border: 2px solid transparent !important;
+ }
+
+ .nav-links a:hover {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a:hover {
+ background-color: #0d0d0d !important;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e !important;
+ color: #e0e0e0 !important;
+ }
+
+ /* Active navigation link styles */
+ .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ body.dark-mode .nav-links a.active {
+ background-color: #0d0d0d !important;
+ color: #ffffff !important;
+ border-color: #1e1e1e !important;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ /* Navigation Actions */
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+
+ .hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .hamburger span {
+ background: #e0e0e0;
+ }
+
+ .hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+ }
+
+ .hamburger.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+ }
+
+
+ body.dark-mode .social-link{
+ background-color: #e0e0e0;
+ color: #e0e0e0;
+ }
+ body.dark-mode .social-link a:hover {
+ filter: brightness(1.14);
+ transform: scale(1.11);
+ box-shadow: 0 5px 16px 0 rgba(44, 68, 186, 0.13);
+ }
+ /* Navigation Actions */
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+
+
+
+ /* ===== STANDARDIZED MOBILE NAVIGATION ===== */
+ @media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ display: flex;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100vh;
+ background: #1a1a1a;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 6rem;
+ transition: transform 0.3s ease;
+ transform: translateX(-100%);
+ gap: 0;
+ z-index: 999;
+ }
+
+ body.dark-mode .nav-links {
+ background: #1a1a1a !important;
+ }
+
+ .nav-links.active {
+ transform: translateX(0);
+ }
+
+ .nav-links li {
+ width: 90%;
+ margin: 0;
+ padding: 0;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ body.dark-mode .nav-links li {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-links a {
+ width: 100%;
+ padding: 1.5rem 2rem;
+ font-size: 1.2rem;
+ margin-bottom: 0;
+ background: #2a2a2a !important;
+ color: #e0e0e0 !important;
+ border-radius: 0;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ transition: all 0.3s ease;
+ }
+
+ .nav-links a:hover {
+ background: #3a3a3a !important;
+ color: #ffffff !important;
+ }
+
+ /* Mobile navigation active state */
+ .nav-links a.active {
+ background: #0d0d0d !important;
+ color: #ffffff !important;
+ }
+
+ .nav-actions {
+ gap: 0.5rem;
+ position: relative;
+ z-index: 1001;
+ }
+
+
+ .dark-mode-btn {
+ width: 40px;
+ height: 40px;
+ font-size: 0.9rem;
+ }
+
+ .hamburger {
+ display: flex;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+ }
+
+ /* ===== STANDARDIZED SMALL MOBILE NAVIGATION ===== */
+ @media (max-width: 480px) {
+ .navbar {
+ padding: 0.5rem;
+ }
+
+ .logo {
+ font-size: 1.3rem;
+ }
+
+ .logo-icon {
+ font-size: 1.5rem;
+ }
+
+ .nav-actions {
+ gap: 0.3rem;
+ }
+
+
+
+ .dark-mode-btn {
+ width: 35px;
+ height: 35px;
+ font-size: 0.8rem;
+ }
+ }
+
+ /* Footer Modern Multi-Column */
+ .footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+ }
+
+ .footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+ }
+
+ .footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+
+
+ .footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+ }
+
+ .footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ }
+
+ .footer-logo-icon {
+ font-size: 2rem;
+ }
+
+ .footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+ }
+
+ .footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .footer-links li {
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+ }
+
+ .footer-links a:hover {
+ color: black;
+ transform: translateX(5px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+ }
+
+ .footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+ }
+
+ .social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+
+ .social-link.linkedin {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .social-link.github {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .social-link.portfolio {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .social-link.email {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+ }
+
+ .footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+ }
+
+ .copyright a {
+ color: #3e2723;
+ text-decoration: none;
+ font-weight: 600;
+ }
+
+ .copyright a:hover {
+ text-decoration: underline;
+ }
+
+ .footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ }
+
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ }
+
+ .badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .badge-green {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-blue {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge-purple {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+
+ @media (max-width: 1024px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+ }
+
+ @media (max-width: 768px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ text-align: center;
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+ }
+
+ /*dark mode*/
+ body.dark-mode .footer {
+
+ background: #1e1e1e;
+
+ }
+
+ body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .footer-logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .footer-description {
+ color: #a0a0a0;
+ }
+
+ body.dark-mode .footer-links a {
+ color: #a0a0a0;
+ }
+
+ body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+ }
+
+ body.dark-mode .copyright {
+ color: #a0a0a0;
+ }
+
+ body.dark-mode .copyright .name {
+ color: #ef6154;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+ :root {
+ --candy-red: #FF4757;
+ --light-pink: #FFE0E6;
+ --light-blue: #E8F4FF;
+ --light-yellow: #FFF5E0;
+ }
+
+ body {
+ font-family: 'Comic Neue', cursive;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ color: var(--white);
+ transition: all 0.3s ease;
+ }
+
+
+ /* Animated Background Elements */
+ .floating-elements {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ pointer-events: none;
+ z-index: 1;
+ }
+
+ .floating-cupcake {
+ position: absolute;
+ font-size: 2rem;
+ animation: float 6s ease-in-out infinite;
+ }
+
+ .floating-cupcake:nth-child(1) {
+ top: 10%;
+ left: 10%;
+ animation-delay: 0s;
+ }
+ .floating-cupcake:nth-child(2) {
+ top: 20%;
+ right: 15%;
+ animation-delay: 2s;
+ }
+
+ .floating-cupcake:nth-child(3) {
+ bottom: 30%;
+ left: 20%;
+ animation-delay: 4s;
+ }
+
+ .floating-cupcake:nth-child(4) {
+ bottom: 15%;
+ right: 10%;
+ animation-delay: 1s;
+ }
+
+ @keyframes float {
+ 0%, 100% {
+ transform: translateY(0px) rotate(0deg);
+ }
+ 50% {
+ transform: translateY(-20px) rotate(5deg);
+ }
+ }
+
+
+ .floating-cupcake:nth-child(4) {
+ bottom: 15%;
+ right: 10%;
+ animation-delay: 1s;
+ }
+
+ @keyframes float {
+
+ 0%,
+ 100% {
+ transform: translateY(0px) rotate(0deg);
+ }
+
+ 50% {
+ transform: translateY(-20px) rotate(5deg);
+ }
+ }
+
+ @keyframes wobble {
+
+ 0%,
+ 100% {
+ transform: rotate(0deg);
+ }
+
+ 25% {
+ transform: rotate(-3deg);
+ }
+
+ 75% {
+ transform: rotate(3deg);
+ }
+ }
+
+ /* Back to Top Button Styles */
+ #backToTop {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #backToTop {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #backToTop.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: scale(1.08);
+ }
+
+ #backToTop:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ /* Back to Top to Bottom Button Styles */
+ #Toptoback {
+ position: fixed;
+ bottom: 2.5rem;
+ right: 2.5rem;
+ z-index: 2000;
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ color: #fff;
+ border: none;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ font-size: 2rem;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+ cursor: pointer;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.4s, transform 0.2s;
+ }
+
+ body.dark-mode #Toptoback {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ #Toptoback.show {
+ opacity: 1;
+ pointer-events: auto;
+ transform: translateY(-10px) scale(1.08);
+ }
+
+ #Toptoback:hover {
+ background: linear-gradient(45deg, #a4766a, #5d4037);
+ transform: scale(1.15);
+ }
+
+ body.dark-mode #Toptoback:hover {
+ background: #e0e0e0;
+ transform: scale(1.15);
+ }
+
+ /* Main Container */
+ .container {
+ max-width: 1200px;
+ margin: 4rem auto 0;
+ padding: 2rem;
+ position: relative;
+ z-index: 10;
+ }
+
+ /* Header Section */
+ .header {
+ text-align: center;
+ margin-bottom: 3rem;
+ }
+
+ .heading {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 3rem;
+ gap: 0.5rem;
+ }
+
+
+ .header h1 {
+
+ font-size: clamp(2rem, 6vw, 3rem);
+ font-weight: 700;
+ margin-bottom: 1rem;
+ color: #3e2723;
+ animation: bounce 2s ease-in-out infinite;
+
+ }
+ body.dark-mode .header h1{
+ color: #e0e0e0 !important;
+ text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.1);
+}
+
+
+
+ .header p {
+ font-size: 1.2rem;
+ opacity: 0.9;
+ margin-bottom: 2rem;
+ color: #6b6767;
+
+ }
+
+ body.dark-mode .header p {
+ color: #e0e0e0 !important;
+ }
+ @keyframes bounce {
+
+ 0%,
+ 20%,
+ 50%,
+ 80%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 40% {
+ transform: translateY(-10px);
+ }
+
+ 60% {
+ transform: translateY(-5px);
+ }
+ }
+
+ /* Main Content */
+ .main-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ margin-bottom: 2rem;
+ }
+
+
+ body.dark-mode .main-content {
+ color: #f1f5f9;
+ }
+
+ /* Card Style Sections */
+ .input-section,
+ .output-section {
+ background: rgba(255, 255, 255, 0.9);
+
+ border-radius: 20px;
+ padding: 2rem;
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+ backdrop-filter: blur(12px);
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ }
+
+ .input-section:hover,
+ .output-section:hover {
+ transform: translateY(-4px);
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
+ }
+
+ /* Dark Mode Cards */
+ body.dark-mode .input-section,
+ body.dark-mode .output-section {
+ background: linear-gradient(120deg, #0d0d0d, #282727, #181818);
+
+ backdrop-filter: blur(20px);
+ border-radius: 24px;
+ padding: 2rem;
+
+ border: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ /* Header */
+ body.dark-mode .header h1 {
+ font-family:'Comic Neue', cursive;
+ font-weight: 700;
+ font-size: clamp(2rem, 6vw, 3rem);
+ color: #f0f0f1;
+ margin-bottom: 1rem;
+ position: relative;
+ display: inline-block;
+ }
+
+ .section-title {
+ font-size: 1.9rem;
+ font-weight: 700;
+ color: #2b1d14;
+ margin-bottom: 2rem;
+ text-align: center;
+ position: relative;
+ letter-spacing: 0.5px;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+ }
+
+ body.dark-mode .section-title {
+ color: #e0e0e0;
+ }
+
+ .section-title::after {
+ content: '';
+ position: absolute;
+ bottom: -6px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 60px;
+ height: 3px;
+ background: linear-gradient(90deg, #4ECDC4, #ff6b6b);
+ border-radius: 2px;
+ }
+ body.dark-mode .section-title::after{
+ background:#e0e0e0;
+ }
+
+ body.dark-mode .section-title {
+ color: #e2e8f0;
+ text-shadow: none;
+ }
+
+ /* Input Groups */
+ .input-group {
+ margin-bottom: 1.5rem;
+ }
+
+ .input-group label {
+ display: block;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 0.5rem;
+ font-size: 1rem;
+ }
+
+ body.dark-mode .input-group label {
+ font-size: 0.9rem;
+ font-weight: 500;
+ color: #94a3b8;
+ }
+
+
+ body.dark-mode .input-group label {
+ color: #a0a0a0;
+ }
+ .serving-inputs {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ margin-bottom: 1.5rem;
+ margin-top: 0.8rem;
+ }
+
+ .serving-input input {
+ width: 100%;
+ padding: 1rem;
+ border: 2px solid #e0d6d0;
+ border-radius: 15px;
+ font-size: 1.1rem;
+ font-family: 'Comic Neue', cursive;
+ text-align: center;
+ transition: all 0.3s ease;
+ background: rgba(255, 255, 255, 0.95);
+ color: #2b2b2b;
+ font-weight: 500;
+ margin-top: 0.3rem;
+ }
+
+ .serving-input input::placeholder {
+ color: #4b4a4a;
+ }
+
+ body.dark-mode .serving-input label {
+ color: #a0a0a0;
+ }
+
+ body.dark-mode .serving-input input {
+ background: #ffffff34;
+ border: 2px solid #6b6767;
+ color: #0d0d0d;
+ }
+
+ .serving-input input:focus {
+ outline: none;
+ background: #fff;
+ color: #1a1a1a;
+ border-color: #4ECDC4;
+ transform: scale(1.04);
+ box-shadow: 0 6px 15px rgba(78, 205, 196, 0.25);
+ }
+
+ /* Dark Mode Serving Input */
+ body.dark-mode .serving-input input {
+ background: rgba(27, 31, 35, 0.8);
+ border: 2px solid rgba(148, 163, 184, 0.3);
+ color: #f1f5f9;
+ }
+
+ body.dark-mode .serving-input input::placeholder {
+ color: #94a3b8;
+ }
+
+ body.dark-mode .serving-input input:focus {
+ background: #0b0b0b;
+ border-color: #ffffff;
+ box-shadow: 0 6px 15px rgba(255, 255, 255, 0.35);
+ }
+
+ /* Recipe Textarea */
+ .recipe-textarea {
+ width: 100%;
+ min-height: 200px;
+ padding: 1rem;
+ border: 2px solid #e0d6d0;
+ border-radius: 15px;
+ font-size: 1rem;
+ font-family: 'Comic Neue', cursive;
+ resize: vertical;
+ transition: all 0.3s ease;
+ background: rgba(255, 255, 255, 0.95);
+ color: #2b2b2b;
+ font-weight: 500;
+ }
+
+ .recipe-textarea::placeholder {
+ color: #777;
+ }
+
+ body.dark-mode .recipe-textarea {
+ background: #ffffff34;
+ border: 2px solid #6b6767;
+ }
+
+
+ .recipe-textarea:focus {
+ outline: none;
+ background: #fff;
+ color: #1a1a1a;
+ border-color: #4ECDC4;
+ box-shadow: 0 6px 15px rgba(78, 205, 196, 0.25);
+ }
+
+ /* Dark Mode Recipe Textarea */
+ body.dark-mode .recipe-textarea {
+ background: rgba(27, 31, 35, 0.8);
+ border: 2px solid rgba(148, 163, 184, 0.3);
+ color: #f1f5f9;
+ border: 2px solid rgba(148, 163, 184, 0.25);
+ }
+
+ body.dark-mode .recipe-textarea::placeholder {
+ color: #94a3b8;
+ }
+
+ body.dark-mode .recipe-textarea:focus {
+ background: #0b0b0b;
+ border-color: #ffffff;
+ box-shadow: 0 6px 15px rgba(255, 255, 255, 0.35);
+ }
+
+ /* Toggle Switch */
+ .toggle-switch {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ margin-top: 1rem;
+ color: #333;
+ font-weight: 500;
+ }
+
+ body.dark-mode .toggle-switch {
+ color: #cbd5e1;
+ }
+
+ .toggle-switch input[type="checkbox"] {
+ width: 50px;
+ height: 25px;
+ -webkit-appearance: none;
+ appearance: none;
+ background: #ccc;
+ border-radius: 25px;
+ position: relative;
+ cursor: pointer;
+ transition: background 0.3s ease;
+ }
+
+ .toggle-switch input[type="checkbox"]::before {
+ content: '';
+ position: absolute;
+ width: 21px;
+ height: 21px;
+ border-radius: 50%;
+ top: 2px;
+ left: 2px;
+ background: white;
+ transition: transform 0.3s ease;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+ }
+
+ .toggle-switch input[type="checkbox"]:checked {
+ background: linear-gradient(90deg, #4ECDC4, #45b7af);
+ }
+
+ .toggle-switch input[type="checkbox"]:checked::before {
+ transform: translateX(25px);
+ }
+
+
+ /* Buttons */
+ .btn-group {
+ display: flex;
+ gap: 1rem;
+ justify-content: center;
+ margin-top: 1.5rem;
+ }
+
+ /* Base Button */
+ .btn {
+ padding: 0.5rem 2rem;
+ border: none;
+ border-radius: 20px;
+ font-family: 'Comic Neue', cursive;
+ font-size: 1.1rem;
+ font-weight: 700;
+ cursor: pointer;
+ transition: all 0.35s ease;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ position: relative;
+ overflow: hidden;
+ letter-spacing: 0.5px;
+ z-index: 1;
+ text-align: center;
+ }
+
+ /* Shared Glow Effect */
+ .btn::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ border-radius: 30px;
+ background: inherit;
+ filter: blur(20px);
+ opacity: 0;
+ transition: opacity 0.35s ease;
+ z-index: -1;
+ }
+
+ .btn:hover::before {
+ opacity: 0.8;
+ }
+
+ /* Primary Button */
+ .btn-primary {
+ width: 50%;
+ background: #FF4C4C;
+ color: #fff;
+ border: none;
+ padding: 16px 32px;
+ border-radius: 12px;
+ font-weight: bold;
+ font-size: 1.1rem;
+ box-shadow: 0 2px 8px rgba(255, 70, 70, 0.10);
+ transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
+ cursor: pointer;
+
+ }
+
+ .btn-primary:hover {
+ background: #d73838;
+ box-shadow: 0 4px 16px rgba(255, 76, 76, 0.22);
+ transform: translateY(-2px) scale(1.04);
+ }
+
+ /* Secondary Button */
+ .btn-secondary {
+ background: #FF4C4C;
+ color: #fff;
+ border: none;
+ padding: 16px 32px;
+ border-radius: 12px;
+ font-weight: bold;
+ font-size: 1.1rem;
+ box-shadow: 0 2px 8px rgba(255, 70, 70, 0.10);
+ transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
+ cursor: pointer;
+ }
+
+ .btn-secondary:hover {
+ background: #d73838;
+ box-shadow: 0 4px 16px rgba(255, 76, 76, 0.22);
+ transform: translateY(-2px) scale(1.04);
+ }
+
+ /* Dark Mode Buttons */
+ body.dark-mode .btn-primary {
+ background: linear-gradient(135deg, #4ECDC4, #38bdf8, #818cf8);
+ text-shadow: none;
+ box-shadow: 0 4px 15px rgba(78, 205, 196, 0.25);
+ }
+
+ body.dark-mode .btn-secondary {
+ background: linear-gradient(135deg, #334155, #1e293b);
+ color: #e2e8f0;
+ text-shadow: none;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
+ }
+
+ body.dark-mode .btn-primary:hover {
+ box-shadow: 0 12px 28px rgba(78, 205, 196, 0.35);
+ }
+
+ body.dark-mode .btn-secondary:hover {
+ box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5);
+ }
+
+ /* Gradient Animation */
+ @keyframes gradientShift {
+ 0% {
+ background-position: 0% 50%;
+ }
+
+ 50% {
+ background-position: 100% 50%;
+ }
+
+ 100% {
+ background-position: 0% 50%;
+ }
+ }
+
+ /* Results Section */
+ .output-section {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: flex-start;
+ color: #2b2b2b;
+ font-size: 1.05rem;
+ line-height: 1.6;
+ }
+
+ .output-placeholder {
+ font-size: 1rem;
+ color: #777;
+ text-align: center;
+ margin-top: 3rem;
+ opacity: 0.9;
+ }
+
+ body.dark-mode .btn-primary {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 2px 2px rgba(220, 121, 63, 0.893);
+ }
+
+ body.dark-mode .btn-secondary {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 2px 2px rgba(220, 121, 63, 0.893);
+ }
+
+ @keyframes shimmer {
+ 0% {
+ background-position: -200% center;
+ }
+
+ 100% {
+ background-position: 200% center;
+ }
+ }
+
+ .btn-secondary {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ box-shadow: 0 4px 15px rgba(112, 161, 255, 0.4);
+ }
+
+ .btn-secondary:hover {
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ transform: translateY(-3px);
+ }
+
+ /* Toggle Switch */
+ .toggle-container {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 1rem;
+ margin: 1rem 0;
+ }
+
+ body.dark-mode .toggle-container span {
+ color: #a0a0a0;
+ }
+
+ .toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+ }
+
+ .toggle-switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+ }
+
+ .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ transition: .4s;
+ border-radius: 34px;
+ }
+
+ body.dark-mode .slider {
+ background-color: #a0a0a0;
+ }
+
+ .slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ transition: .4s;
+ border-radius: 50%;
+ }
+
+ input:checked+.slider {
+ background-color: #3e2723;
+ }
+
+
+ body.dark-mode input:checked+.slider {
+ background-color: #0d0d0d;
+ }
+
+ input:checked+.slider:before {
+ transform: translateX(26px);
+ }
+
+ /* Results Section */
+ .results-container {
+ display: none;
+ }
+
+ .results-container.show {
+ display: block;
+ animation: fadeInUp 0.5s ease-out;
+ }
+
+ @keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(30px);
+ }
+
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+ }
+
+ .results-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-top: 1rem;
+ background: white;
+ border-radius: 15px;
+ overflow: hidden;
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+ }
+
+ .results-table th,
+ .results-table td {
+ padding: 1rem;
+ text-align: left;
+ border-bottom: 1px solid #f0f0f0;
+ }
+
+ .results-table th {
+ background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
+ color: white;
+ font-weight: 600;
+ }
+
+ .results-table tr:hover {
+ background-color: #f8f9fa;
+ }
+
+ .ingredient-icon {
+ font-size: 1.5rem;
+ margin-right: 0.5rem;
+ }
+
+ /* Suggestions Box */
+ .suggestions-box {
+ background: rgba(255, 230, 109, 0.2);
+ border: 2px solid #666;
+ border-radius: 15px;
+ padding: 1.5rem;
+ margin-top: 1rem;
+ }
+
+ .suggestions-box h3 {
+ color: #FF6B6B;
+ margin-bottom: 1rem;
+ font-size: 1.3rem;
+ }
+
+ .suggestions-box p {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 0.5rem;
+ }
+
+ /* Loading Animation */
+ .loading {
+ display: none;
+ text-align: center;
+ padding: 2rem;
+ }
+
+ .loading.show {
+ display: block;
+ }
+
+ .spinner {
+ width: 50px;
+ height: 50px;
+ border: 5px solid #f3f3f3;
+ border-top: 5px solid #FF6B6B;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin: 0 auto 1rem;
+ }
+
+ @keyframes spin {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .main-content {
+ grid-template-columns: 1fr;
+ gap: 1rem;
+ }
+
+ .serving-inputs {
+ grid-template-columns: 1fr;
+ }
+
+ .header h1 {
+ font-size: 2rem;
+ }
+
+ .container {
+ padding: 1rem;
+ }
+
+ .btn-group {
+ flex-direction: column;
+ }
+ }
+
+/* Tablet responsiveness */
+@media (max-width: 1024px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ }
+}
+
+/* Tablet & Mobile tweaks */
+@media (max-width: 768px) {
+ .footer-content {
+ grid-template-columns: 1fr 1fr;
+ gap: 2rem;
+ text-align: center;
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+
+ /* ✅ underline fix */
+ .footer-section h3.footer-title {
+ text-align: center;
+ display: inline-block;
+ margin: 0 auto 1.5rem;
+ }
+
+ .footer-section h3.footer-title::after {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+}
+
+/* Mobile (phones) */
+@media (max-width: 500px) {
+ .footer-content {
+ grid-template-columns: 1fr;
+ text-align: center;
+ }
+
+ .footer-logo {
+ justify-content: center;
+ }
+
+ .footer-description {
+ max-width: 90%;
+ margin: 0 auto;
+ }
+
+ .social-links {
+ justify-content: center;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+}
+
+
+@media (max-width: 768px) {
+ .btn-group {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ }
+}
\ No newline at end of file
diff --git a/assets/css/toc.css b/assets/css/toc.css
new file mode 100644
index 0000000..486997c
--- /dev/null
+++ b/assets/css/toc.css
@@ -0,0 +1,738 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ :root {
+ --candy-red: #ff6b6b;
+ --sky-blue: #4ecdc4;
+ --sunny-yellow: #ffd93d;
+ --soft-pink: #ffb6c1;
+ --mint-green: #98fb98;
+ --lavender: #e6e6fa;
+ --dark-bg: #1a1a1a;
+ --dark-card: #2d2d2d;
+ --dark-text: #ffffff;
+ --dark-border: #404040;
+ }
+
+ body {
+ font-family: "Comic Neue", cursive;
+ overflow-x: hidden;
+ background-color: #f5f3f1;
+ min-height: 100vh;
+ position: relative;
+ transition: all 0.3s ease;
+ color: #333;
+ line-height: 1.6;
+ }
+
+ body.dark-mode {
+ background-color: #0d0d0d;
+ }
+
+ /* Navigation */
+ .navbar {
+ background: radial-gradient(circle at center, #e5c5b3, #e9b4b6);
+ backdrop-filter: blur(15px);
+ padding: 1rem 2rem;
+ position: fixed;
+ top: 0;
+ width: 100%;
+ z-index: 1000;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .navbar {
+ background: #1e1e1e;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .nav-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1500px;
+ margin: 0 auto;
+ }
+
+ .logo {
+ font-size: 2rem;
+ font-weight: 600;
+ color: #3e2723;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ font-family: "Comic Neue", cursive;
+ min-width: 150px;
+ padding-right: 50px;
+ }
+
+ .logo-icon {
+ font-size: 2rem;
+ transition: transform 0.3s ease;
+ }
+
+ .logo-text {
+ font-weight: 600;
+ letter-spacing: -0.5px;
+ }
+
+ .logo:hover {
+ transform: scale(1.05);
+ color: #3e2723;
+ }
+
+ .logo:hover .logo-icon {
+ transform: rotate(10deg);
+ }
+
+ body.dark-mode .logo {
+ color: #e0e0e0;
+ }
+
+ body.dark-mode .logo:hover {
+ color: #e0e0e0;
+ }
+
+ .nav-links {
+ display: flex;
+ list-style: none;
+ gap: 1.5rem;
+ align-items: center;
+ }
+
+ .nav-links a {
+ text-decoration: none;
+ color: #3e2723;
+ font-weight: 600;
+ padding: 0.7rem 1rem;
+ border-radius: 25px;
+ transition: all 0.3s ease;
+ position: relative;
+ background: rgba(255, 255, 255, 0.1);
+ border: 2px solid transparent;
+ }
+
+ body.dark-mode .nav-links a {
+ color: #e0e0e0;
+ background: rgba(111, 100, 91, 0.133);
+ border: 2px solid transparent;
+ }
+
+ .nav-links a:hover,
+ .nav-links a.active {
+ background-color: #f3e0d6;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: rgba(228, 191, 180, 0.3);
+ color: #3e2723;
+ }
+
+ body.dark-mode .nav-links a:hover,
+ body.dark-mode .nav-links a.active {
+ background-color: #0d0d0d;
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ border-color: #1e1e1e;
+ color: #e0e0e0;
+ }
+
+ .nav-actions {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .dark-mode-btn {
+ background-color: #3e2723;
+ border: none;
+ color: white;
+ padding: 0.7rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ font-size: 1rem;
+ width: 45px;
+ height: 45px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .dark-mode-btn:hover {
+ transform: scale(1.1) rotate(360deg);
+ box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
+ }
+
+ body.dark-mode .dark-mode-btn {
+ background-color: #e0e0e0;
+ color: #1e1e1e;
+ }
+
+ .hamburger {
+ display: none;
+ flex-direction: column;
+ cursor: pointer;
+ padding: 0.5rem;
+ border-radius: 8px;
+ transition: all 0.3s ease;
+ }
+
+ .hamburger:hover {
+ background: rgba(255, 255, 255, 0.1);
+ }
+
+ .hamburger span {
+ width: 25px;
+ height: 3px;
+ background: linear-gradient(45deg, var(--candy-red), var(--sky-blue));
+ margin: 3px 0;
+ transition: 0.3s;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .hamburger span {
+ background: #e0e0e0;
+ }
+
+ .hamburger.active span:nth-child(1) {
+ transform: rotate(-45deg) translate(-5px, 6px);
+ }
+
+ .hamburger.active span:nth-child(2) {
+ opacity: 0;
+ }
+
+ .hamburger.active span:nth-child(3) {
+ transform: rotate(45deg) translate(-5px, -6px);
+ }
+
+ /* Main Content */
+ .main-content {
+ margin-top: 100px;
+ padding: 2rem;
+ min-height: calc(100vh - 200px);
+ max-width: 1200px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .tos-container {
+ background: rgba(255, 255, 255, 0.9);
+ backdrop-filter: blur(15px);
+ padding: 3rem;
+ border-radius: 30px;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+ margin: 2rem auto;
+ position: relative;
+ overflow: hidden;
+ transition: all 0.3s ease;
+ }
+
+ body.dark-mode .tos-container {
+ background: #1e1e1e;
+ box-shadow: 0 2px 2px #1e1e1e;
+ }
+
+ .tos-title {
+ font-size: 3rem;
+ font-weight: 700;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 2rem;
+ text-align: center;
+ }
+
+ body.dark-mode .tos-title {
+ font-size: 3.5rem;
+ font-weight: 700;
+ background: #e0e0e0;
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: 1rem;
+ }
+
+ .last-updated {
+ text-align: center;
+ color: #666;
+ font-style: italic;
+ margin-bottom: 3rem;
+ font-size: 1.1rem;
+ }
+
+ body.dark-mode .last-updated {
+ color: #a0a0a0;
+ }
+
+ .tos-section {
+ margin-bottom: 2.5rem;
+ }
+
+ .tos-section h2 {
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ margin-bottom: 1rem;
+ border-bottom: 3px solid #d18a68;
+ padding-bottom: 0.5rem;
+ }
+
+ body.dark-mode .tos-section h2 {
+ color: #e0e0e0;
+ border-bottom-color: #e0e0e0;
+ }
+
+ .tos-section h3 {
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #5d4037;
+ margin: 1.5rem 0 0.8rem 0;
+ }
+
+ body.dark-mode .tos-section h3 {
+ color: #d3d3d3;
+ }
+
+ .tos-section p {
+ margin-bottom: 1rem;
+ text-align: justify;
+ font-size: 1.05rem;
+ }
+
+ body.dark-mode .tos-section p{
+ color:#a0a0a0;
+ }
+
+ .tos-section ul {
+ margin: 1rem 0;
+ padding-left: 2rem;
+ }
+
+ .tos-section li {
+ margin-bottom: 0.5rem;
+ }
+
+ body.dark-mode .tos-section li{
+ color:#a0a0a0;
+ }
+ body.dark-mode .tos-section a{
+ color:#d3d3d3;
+ }
+
+ .contact-info {
+ background: linear-gradient(45deg, rgba(255, 107, 107, 0.1), rgba(78, 205, 196, 0.1));
+ padding: 1.5rem;
+ border-radius: 15px;
+ border-left: 5px solid #d18a68;
+ margin: 1.5rem 0;
+ }
+
+ body.dark-mode .contact-info {
+ background: #ffffff1a;
+ border-left-color: #a0a0a0;
+ }
+
+ .back-link {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.5rem;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ padding: 1rem 2rem;
+ border-radius: 25px;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ margin-top: 2rem;
+ box-shadow: 0 4px 15px rgba(62, 39, 35, 0.3);
+ }
+
+ .back-link:hover {
+ transform: translateY(-3px);
+ box-shadow: 0 8px 25px rgba(62, 39, 35, 0.4);
+ }
+
+ body.dark-mode .back-link {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);
+ }
+
+ body.dark-mode .back-link:hover {
+ background: rgba(220, 121, 63, 0.893);
+ color: #e0e0e0;
+ box-shadow: 0 8px 25px rgba(231, 76, 60, 0.4);
+ }
+
+ /* Footer */
+ .footer {
+ background: radial-gradient(circle at center, #e9b4b6, #e5c5b3);
+ backdrop-filter: blur(15px);
+ position: relative;
+ z-index: 2;
+ border-top: 1px solid rgba(255, 255, 255, 0.3);
+ margin-top: 4rem;
+ }
+
+ body.dark-mode .footer {
+ background: #1e1e1e;
+ }
+
+ .footer-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ display: grid;
+ grid-template-columns: 2fr 1fr 1fr 1fr;
+ gap: 3rem;
+ padding: 3rem 2rem 2rem;
+ }
+
+ .footer-section h3.footer-title {
+ color: #3e2723;
+ font-size: 1.2rem;
+ font-weight: 700;
+ margin-bottom: 1.5rem;
+ position: relative;
+ }
+
+ body.dark-mode .footer-section h3.footer-title {
+ color: #e0e0e0;
+ }
+
+ .footer-section h3.footer-title::after {
+ content: '';
+ position: absolute;
+ bottom: -8px;
+ left: 0;
+ width: 30px;
+ height: 3px;
+ background: #3e2723;
+ border-radius: 2px;
+ }
+
+ body.dark-mode .footer-section h3.footer-title::after {
+ background: #e0e0e0;
+ }
+
+ .footer-logo {
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ margin-bottom: 1.5rem;
+ font-size: 1.8rem;
+ font-weight: 700;
+ color: #3e2723;
+ }
+
+ body.dark-mode .footer-logo {
+ color: #e0e0e0;
+ }
+
+ .footer-logo-icon {
+ font-size: 2rem;
+ }
+
+ .footer-description {
+ color: #333;
+ line-height: 1.6;
+ margin-bottom: 2rem;
+ font-size: 0.95rem;
+ }
+
+ body.dark-mode .footer-description {
+ color: #a0a0a0;
+ }
+
+ .footer-links {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ .footer-links li {
+ margin-bottom: 0.8rem;
+ }
+
+ .footer-links a {
+ color: #333;
+ text-decoration: none;
+ display: flex;
+ align-items: center;
+ gap: 0.8rem;
+ font-weight: 500;
+ transition: all 0.3s ease;
+ padding: 0.3rem 0;
+ border-radius: 5px;
+ }
+
+ body.dark-mode .footer-links a {
+ color: #e0e0e0;
+ }
+
+ .footer-links a:hover {
+ color: black;
+ transform: translateX(4px);
+ background: rgba(255, 107, 107, 0.1);
+ padding-left: 0.8rem;
+ }
+
+ body.dark-mode .footer-links a:hover {
+ color: #a0a0a0;
+ background: rgba(255, 138, 128, 0.1);
+ }
+
+ .footer-links a.active {
+ color: #d18a68;
+ font-weight: 700;
+ }
+
+ .footer-links i {
+ font-size: 0.9rem;
+ width: 16px;
+ opacity: 0.7;
+ }
+
+ .social-links {
+ display: flex;
+ gap: 1rem;
+ margin-top: 1rem;
+ }
+
+ .social-link {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 45px;
+ height: 45px;
+ background:linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ color: white;
+ text-decoration: none;
+ border-radius: 50%;
+ font-size: 1.2rem;
+ transition: all 0.3s ease;
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+
+ .social-link:hover {
+ transform: translateY(-3px) scale(1.1);
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
+ }
+
+ .footer-bottom {
+ background: rgba(0, 0, 0, 0.05);
+ backdrop-filter: blur(10px);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ padding: 1.5rem 0;
+ }
+
+ body.dark-mode .footer-bottom {
+ background: #1e1e1e;
+ }
+
+ .footer-bottom-content {
+ max-width: 1500px;
+ margin: 0 auto;
+ padding: 0 2rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .copyright {
+ color: #333;
+ font-size: 0.9rem;
+ margin: 0;
+ }
+
+ body.dark-mode .copyright {
+ color: #a0a0a0;
+ }
+
+ .copyright .name {
+ color: #3e2723;
+ font-weight: 600;
+ }
+
+ body.dark-mode .copyright .name {
+ color: #ef6154;
+ }
+
+ .footer-badges {
+ display: flex;
+ gap: 0.8rem;
+ flex-wrap: wrap;
+ }
+
+ .badge {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.4rem;
+ padding: 0.4rem 0.8rem;
+ border-radius: 20px;
+ font-size: 0.8rem;
+ font-weight: 600;
+ color: white;
+ text-decoration: none;
+ transition: all 0.3s ease;
+ background: linear-gradient(90deg, #3e2723, #6e463e, #3e2723);
+ }
+
+ .badge:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
+ }
+ body.dark-mode .badge-blue {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-green {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ body.dark-mode .badge-purple {
+ background: #e0e0e0;
+ color: #0d0d0d;
+ }
+
+ /* Responsive Design */
+ @media (max-width: 768px) {
+ .navbar {
+ padding: 0.8rem 1rem;
+ }
+
+ .nav-links {
+ display: none;
+ position: fixed;
+ top: 80px;
+ left: 0;
+ width: 100%;
+ height: calc(100vh - 80px);
+ background: rgba(255, 255, 255, 0.95);
+ backdrop-filter: blur(40px);
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ padding-top: 2rem;
+ transition: transform 0.3s ease;
+ transform: translateX(-100%);
+ gap: 1rem;
+ z-index: 999;
+ }
+
+ body.dark-mode .nav-links {
+ background: #1a1a1a;
+ }
+
+ .nav-links.active {
+ display: flex;
+ transform: translateX(0);
+ }
+
+ .nav-links li {
+ padding: 2rem;
+ border-bottom: solid 1px black;
+ border-radius: 8px;
+ }
+
+ body.dark-mode .nav-links li {
+ border-bottom: solid 1px white;
+ }
+
+ .nav-links a {
+ width: 80%;
+ padding: 1rem;
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ background-color: transparent !important;
+ }
+
+ .nav-actions {
+ gap: 0.5rem;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .dark-mode-btn {
+ width: 40px;
+ height: 40px;
+ font-size: 0.9rem;
+ }
+
+ .hamburger {
+ display: flex;
+ position: relative;
+ z-index: 1001;
+ }
+
+ .logo {
+ font-size: 1.5rem;
+ padding-right: 0;
+ }
+
+ .logo-icon {
+ font-size: 1.7rem;
+ }
+
+ .tos-title {
+ font-size: 2.5rem;
+ }
+
+ .tos-container {
+ padding: 2rem;
+ margin: 1rem;
+ }
+
+ .footer-content {
+ grid-template-columns: 1fr;
+ gap: 2rem;
+ padding: 2rem 1rem 1rem;
+ text-align: center;
+ }
+
+ .footer-section h3.footer-title::after {
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .footer-bottom-content {
+ flex-direction: column;
+ text-align: center;
+ gap: 1rem;
+ }
+
+ .footer-badges {
+ justify-content: center;
+ }
+
+ .social-links {
+ justify-content: center;
+ }
+ }
+
+ @media (max-width: 480px) {
+ .tos-title {
+ font-size: 2rem;
+ }
+
+ .tos-container {
+ padding: 1.5rem;
+ }
+
+ .tos-section h2 {
+ font-size: 1.5rem;
+ }
+ }
\ No newline at end of file
diff --git a/assets/js/contact.js b/assets/js/contact.js
new file mode 100644
index 0000000..db865fd
--- /dev/null
+++ b/assets/js/contact.js
@@ -0,0 +1,34 @@
+// Mobile Navigation Toggle
+ const hamburger = document.getElementById("hamburger-icon");
+ const navLinks = document.getElementById("nav-links");
+ hamburger.addEventListener("click", (e) => {
+ e.stopPropagation();
+ navLinks.classList.toggle("active");
+ hamburger.classList.toggle("active");
+ });
+ // Close mobile menu when clicking on a link
+ document.querySelectorAll(".nav-links a").forEach(item => {
+ item.addEventListener("click", () => {
+ navLinks.classList.remove("active");
+ hamburger.classList.remove("active");
+ });
+ });
+ // Close menu when clicking outside
+ document.addEventListener("click", (e) => {
+ if (navLinks.classList.contains("active") &&
+ !hamburger.contains(e.target) &&
+ !navLinks.contains(e.target)
+ ) {
+ navLinks.classList.remove("active");
+ hamburger.classList.remove("active");
+ }
+ });
+
+ // Contact form "sent" animation
+ document.getElementById("bakeContactForm").addEventListener("submit", function (e) {
+ e.preventDefault();
+ document.getElementById("contactSuccess").style.display = "block";
+ console.log("printed")
+ this.reset();
+ setTimeout(() => { document.getElementById("contactSuccess").style.display = "none"; }, 4000);
+ });
\ No newline at end of file
diff --git a/assets/js/convert.js b/assets/js/convert.js
new file mode 100644
index 0000000..7d22a45
--- /dev/null
+++ b/assets/js/convert.js
@@ -0,0 +1,245 @@
+// Dark Mode Toggle
+ const darkModeToggle = document.getElementById('darkModeToggle');
+ const body = document.body;
+ const darkModeIcon = darkModeToggle.querySelector('i');
+
+ const currentTheme = localStorage.getItem('theme') || 'light';
+ if (currentTheme === 'dark') {
+ body.classList.add('dark-mode');
+ darkModeIcon.classList.replace('fa-moon','fa-sun');
+ }
+
+ darkModeToggle.addEventListener('click', () => {
+ body.classList.toggle('dark-mode');
+ if (body.classList.contains('dark-mode')) {
+ darkModeIcon.classList.replace('fa-moon','fa-sun');
+ localStorage.setItem('theme','dark');
+ } else {
+ darkModeIcon.classList.replace('fa-sun','fa-moon');
+ localStorage.setItem('theme','light');
+ }
+ });
+
+ // Mobile nav
+ const hamburger = document.getElementById('hamburger');
+ const navLinks = document.getElementById('navLinks');
+ const toggleNav = () => {
+ navLinks.classList.toggle('active');
+ hamburger.classList.toggle('active');
+ const expanded = hamburger.getAttribute('aria-expanded') === 'true';
+ hamburger.setAttribute('aria-expanded', (!expanded).toString());
+ };
+ hamburger.addEventListener('click', (e) => { e.stopPropagation(); toggleNav(); });
+ hamburger.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleNav(); }});
+ document.querySelectorAll('.nav-links a').forEach(a => a.addEventListener('click', () => {
+ navLinks.classList.remove('active'); hamburger.classList.remove('active'); hamburger.setAttribute('aria-expanded','false');
+ }));
+ document.addEventListener('click', (e) => {
+ if (navLinks.classList.contains('active') && !hamburger.contains(e.target) && !navLinks.contains(e.target)) {
+ navLinks.classList.remove('active'); hamburger.classList.remove('active'); hamburger.setAttribute('aria-expanded','false');
+ }
+ });
+
+ // File upload
+ function handleFileUpload(event){
+ const file = event.target.files[0];
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = (e) => { document.getElementById('recipeInput').value = e.target.result; };
+ reader.readAsText(file);
+ }
+ window.handleFileUpload = handleFileUpload;
+
+ // Ingredient emojis
+ const ingredientEmojis = {
+ 'flour':'🌾','sugar':'🍯','butter':'🧈','egg':'🥚','milk':'🥛','vanilla':'🌿','baking powder':'⚡','salt':'🧂',
+ 'chocolate':'🍫','cocoa':'🍫','oil':'🫒','honey':'🍯','cream':'🥛','cheese':'🧀','nuts':'🥜','fruit':'🍓',
+ 'lemon':'🍋','orange':'🍊','cinnamon':'🌿','default':'🥄'
+ };
+ function getIngredientEmoji(ing){
+ const lower = ing.toLowerCase();
+ for (const [key, emoji] of Object.entries(ingredientEmojis)) if (lower.includes(key)) return emoji;
+ return ingredientEmojis.default;
+ }
+
+ // Convert logic (wire up to your backend)
+ const GEMINI_API_KEY = 'API_KEY';
+ const GEMINI_API_URL = 'API_URL';
+ let currentUnit = 'metric';
+ let convertedData = [];
+
+ async function convertRecipe(){
+ const recipeText = document.getElementById('recipeInput').value.trim();
+ if (!recipeText){ showWarning('Please enter a recipe to convert!'); return; }
+ setLoading(true);
+ try{
+ const response = await fetch(`${GEMINI_API_URL}?key=${GEMINI_API_KEY}`,{
+ method:'POST', headers:{'Content-Type':'application/json'},
+ body: JSON.stringify({
+ contents:[{ parts:[{ text:
+`Convert this recipe to precise gram measurements. For each ingredient, provide:
+1. Normalized ingredient name
+2. Original measurement
+3. Gram equivalent
+4. Any relevant notes about the conversion
+
+Please format the response as JSON with this structure:
+{
+ "ingredients": [
+ {"ingredient":"All-purpose flour","original":"2 cups","grams":240,"notes":"Sifted measurement"}
+ ],
+ "warnings": ["Any ambiguous measurements that need clarification"]
+}
+
+Recipe to convert:
+${recipeText}` }]}]
+ })
+ });
+ if (!response.ok) throw new Error('API request failed');
+ const data = await response.json();
+ const aiResponse = data?.candidates?.[0]?.content?.parts?.[0]?.text ?? '';
+
+ try{
+ const jsonMatch = aiResponse.match(/\{[\s\S]*\}/);
+ if (!jsonMatch) throw new Error('No JSON found');
+ const parsed = JSON.parse(jsonMatch[0]);
+ convertedData = parsed.ingredients || [];
+ displayResults(convertedData);
+ if (parsed.warnings?.length) showWarning(parsed.warnings.join('\n'));
+ }catch{
+ convertedData = parseTextResponse(aiResponse);
+ displayResults(convertedData);
+ }
+ }catch(err){
+ console.error(err);
+ showWarning('Sorry, there was an error converting your recipe. Please try again.');
+ }finally{
+ setLoading(false);
+ }
+ }
+ window.convertRecipe = convertRecipe;
+
+ function parseTextResponse(text){
+ const lines = text.split('\n').filter(Boolean);
+ const ingredients = [];
+ lines.forEach(line=>{
+ if (/(cup|tbsp|tsp|pound|oz)/i.test(line)){
+ const parts = line.split(/[:;-]/);
+ if (parts.length>=2){
+ ingredients.push({
+ ingredient: parts[0].trim(),
+ original: parts[1].trim(),
+ grams: Math.round(Math.random()*200+50),
+ notes: 'Estimated conversion'
+ });
+ }
+ }
+ });
+ return ingredients;
+ }
+
+ function displayResults(items){
+ const resultsSection = document.getElementById('resultsSection');
+ const resultsBody = document.getElementById('resultsBody');
+ resultsBody.innerHTML = '';
+ items.forEach(item=>{
+ const row = document.createElement('tr');
+ row.className='ingredient-row';
+ const emoji = getIngredientEmoji(item.ingredient);
+ row.innerHTML = `
+ ${emoji} ${item.ingredient}${item.original}
+ ${item.grams}g ${item.notes || 'Standard'}
+
+
+
+ Measurement Type
+
+ Sifted
+ Packed
+ Leveled
+ Heaped
+ Melted
+ Softened
+ Liquid
+
+
+
+ Grams Override
+
+
+
+
Scaling Factor: ${scale.toFixed(2)}x
+
From ${currentServings} servings to ${desiredServings} servings
+
+ ${item.icon}
+ ${item.ingredient}
+
+ ${item.original}
+ ${item.scaled} ${tip}
`).join('');
+ }
+
+ function clearInputs() {
+ document.getElementById('currentServings').value = '6';
+ document.getElementById('desiredServings').value = '12';
+ document.getElementById('recipeInput').value = '';
+ document.getElementById('convertToGrams').checked = false;
+ document.getElementById('resultsContainer').classList.remove('show');
+ }
+
+ // Back to Top Button Logic
+ const backToTopBtn = document.getElementById("backToTop");
+ window.addEventListener("scroll", () => {
+ if (window.scrollY > 100) {
+ backToTopBtn.classList.add("show");
+ } else {
+ backToTopBtn.classList.remove("show");
+ }
+ });
+ backToTopBtn.addEventListener("click", () => {
+ window.scrollTo({ top: 0, behavior: "smooth" });
+ });
+
+ //Top to Bottom Button Logic
+ const ToptobackBtn = document.getElementById("Toptoback");
+ window.addEventListener("scroll", () => {
+ if (window.scrollY < 100) {
+ ToptobackBtn.classList.add("show");
+ } else {
+ ToptobackBtn.classList.remove("show");
+ }
+ });
+ ToptobackBtn.addEventListener("click", () => {
+ window.scrollTo({ top: 10000, behavior: "smooth" });
+ });
+
+ // Add some example recipes on page load
+ window.addEventListener('load', function () {
+ const examples = [
+ "2 cups all-purpose flour\n1 cup sugar\n1/2 cup butter\n2 eggs\n1 tsp baking powder\n1/2 tsp salt\n1 cup milk",
+ "3 cups flour\n1 cup cocoa powder\n2 cups sugar\n1 tsp baking soda\n1/2 tsp salt\n2 eggs\n1 cup buttermilk",
+ "4 cups flour\n1/2 cup sugar\n1 packet yeast\n1 tsp salt\n1/4 cup olive oil\n1 1/2 cups warm water"
+ ];
+
+ });
+
+ });
diff --git a/assets/js/toc.js b/assets/js/toc.js
new file mode 100644
index 0000000..564ae64
--- /dev/null
+++ b/assets/js/toc.js
@@ -0,0 +1,44 @@
+// Mobile Navigation Toggle
+ const hamburger = document.getElementById("hamburger");
+ const navLinks = document.getElementById("navLinks");
+
+ hamburger.addEventListener("click", (e) => {
+ e.stopPropagation();
+ navLinks.classList.toggle("active");
+ hamburger.classList.toggle("active");
+ });
+
+ // Close mobile menu when clicking on a link
+ const navItems = document.querySelectorAll(".nav-links a");
+ navItems.forEach((item) => {
+ item.addEventListener("click", () => {
+ navLinks.classList.remove("active");
+ hamburger.classList.remove("active");
+ });
+ });
+
+ // Close mobile menu when clicking outside
+ document.addEventListener("click", (e) => {
+ if (
+ navLinks.classList.contains("active") &&
+ !hamburger.contains(e.target) &&
+ !navLinks.contains(e.target)
+ ) {
+ navLinks.classList.remove("active");
+ hamburger.classList.remove("active");
+ }
+ });
+
+ // Smooth scrolling for internal links
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+ anchor.addEventListener('click', function (e) {
+ e.preventDefault();
+ const target = document.querySelector(this.getAttribute('href'));
+ if (target) {
+ target.scrollIntoView({
+ behavior: 'smooth',
+ block: 'start'
+ });
+ }
+ });
+ });
\ No newline at end of file
diff --git a/contact.html b/contact.html
index fccbafe..6ce788f 100644
--- a/contact.html
+++ b/contact.html
@@ -49,850 +49,7 @@