/* frontend/styles/main.css */ /* --- 1. Custom CSS Property for Animation --- */ /* This tells the browser that '--angle' is a valid property that can be animated. */ @property --angle { syntax: ''; inherits: false; initial-value: 0deg; } /* --- 2. Color Variables for Theming --- */ /* Default (Light) Theme Variables */ :root { --bg-color: #764c4cff; --card-bg-color: #e2e2e2ff; --text-color: #212529; --text-muted-color: #6c757d; --border-color: #dee2e6; --primary-color: #4a00e0; --primary-hover-color: #3b00b3; --dot-pattern-color: #d8dde2; } /* Dark Theme Overrides: These are applied when the tag has data-theme="dark" */ [data-theme="dark"] { --bg-color: #121212; --card-bg-color: #1e1e1e; --text-color: #e8e6e3; --text-muted-color: #adb5bd; --border-color: #495057; --dot-pattern-color: #2a2a2a; } /* --- 3. Universal Styles --- */ body { font-family: 'Poppins', sans-serif; background-color: var(--bg-color);/* Uses the theme's background color */ color: var(--text-color); /* Uses the theme's text color */ transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition between themes */ } /* --- 4. Styles for Standard (Light/Dark) Pages --- */ /* This applies to pages like Dashboard, Profile, etc. */ body:not(.auth-page) {/* Sets a light gray background color. */ /* Creates a subtle pattern of dots for the background. */ background-image: radial-gradient(var(--dot-pattern-color) 1px, transparent 1px); background-size: 16px 16px; /* Keeps the background image fixed during scrolling. */ } /* --- 5. Styles for the Animated Authentication Pages --- */ /* This applies only to pages with */ /* --- Styles for the Dark, Animated Authentication Pages (Login, Register) --- */ /* This applies only to tags with the 'auth-page' class. */ .auth-page { background: #296360ff; /* Sets a very dark blue/black background. */ background-image: url('/Screeenshots/pngtree-stethoscope-with-red-heart-on-gray-background-heart-health-care-concept-image_15663980.jpg'); background-size: cover; background-position: center; /* Ensures the background image covers the entire area. */ background-attachment: fixed; color: #150d0dff; /* Sets the default text color to a light gray. */ } /* --- 6. Card Styles (Theming Applied) --- */ .card { border: 1px solid var(--border-color); border-radius: 1rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); position: relative; z-index: ; background-color: var(--card-bg-color); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); color: var(--text-color); transition: background-color 0.3s ease; } .card .text-muted { color: var(--text-muted-color) !important; } .card-title, .card-body h1, .card-body h2, .card-body h3, .card-body h5 { color: var(--text-color); } /* --- 7. Animated Border for the Authentication Card --- */ .auth-page .card { background: #dc5757ff; /* A solid dark color for the card itself */ border: none; /* The gradient will act as the border */ font-weight: bold; } /* The blurred, glowing layer of the border */ .auth-page .card::before { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; z-index: -2; background: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545); border-radius: 1rem; filter: blur(1.5rem); opacity: 0.7; animation: spin 3s linear infinite; } /* The sharp, thin line of the border */ .auth-page .card::after { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; z-index: -1; background: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545); border-radius: 1rem; animation: spin 3s linear infinite; } /* The spinning animation */ @keyframes spin { from { --angle: 0deg; } to { --angle: 360deg; } } /* Text styles for the auth card */ .auth-page .card-body, .auth-page .form-label, .auth-page .card p { color: #eee; } .auth-page .card a { color: #fff; font-weight: bold; } /* --- 8. Other Component Styles (Theming Applied) --- */ .p-3.border.rounded.bg-light { background-color: var(--card-bg-color) !important; border-color: var(--border-color) !important; } .drop-zone { background-color: var(--card-bg-color); color: var(--text-muted-color); border-color: var(--border-color); border: 2px dashed #797373ff; border-radius: 0.5rem; padding: 40px; text-align: center; color: #6c757d; cursor: pointer; transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .chart-container { background-color: var(--card-bg-color); } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: var(--primary-hover-color); border-color: var(--primary-hover-color); } #navbar-container .navbar { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .drop-zone__input { display: none; } .drop-zone__prompt { font-size: 1.1rem; } .clickable-ocr-number { color: var(--primary-color); font-weight: bold; cursor: pointer; } .clickable-ocr-number:hover { background-color: #cfe2ff; text-decoration: none; } /* --- 9. Styles for the Theme Toggle Switch --- */ .theme-switch-wrapper { display: flex; align-items: center; } .theme-switch { position: relative; display: inline-block; width: 50px; height: 26px; } .theme-switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4c566a; transition: .4s; border-radius: 26px; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; } input:checked + .slider { background-color: #88c0d0; } input:checked + .slider:before { transform: translateX(24px); } .slider .sun-icon, .slider .moon-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 14px; opacity: 1; transition: opacity 0.4s; pointer-events: none; } .slider .sun-icon { right: 5px; opacity: 0; } .slider .moon-icon { left: 5px; } input:checked + .slider .sun-icon { opacity: 1; } input:checked + .slider .moon-icon { opacity: 0; } /* --- NEW Styles for Landing Page --- */ .hero-section { position: relative; z-index: 1; } .features-section .feature-card, .how-it-works-section .step-card { background-color: rgba(255, 255, 255, 0.41); backdrop-filter: blur(10px); border: 2px solid rgba(97, 97, 97, 1); border-radius: 1rem; padding: 2rem; height: 100%; transition: transform 0.4s ease-in-out, background-color 0.4s; } .features-section .feature-card:hover { transform: translateY(-5px); background-color: rgba(255, 255, 255, 0.15); } .feature-icon { color: #a370f7; /* This sets the color of the SVG icons to a vibrant purple */ } .step-number { width: 50px; height: 50px; background-color: #4a00e0; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin: 0 auto 1rem; } /* Ensures the section is positioned correctly within the animated background. */ .benefits-section { position: relative; z-index: 1; } /* Styles the individual "benefit" cards. */ .benefits-section .benefit-card { /* Creates the semi-transparent "frosted glass" background. */ background-color: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); border: 2px solid rgba(224, 5, 5, 1); border-radius: 1rem; /* Rounds the corners of the card. */ padding: 2rem; /* Adds internal spacing. */ height: 100%; /* Ensures all cards in a row have the same height. */ /* Prepares the card for a smooth animation on hover. */ transition: transform 0.2s ease-in-out, background-color 0.2s; } /* Adds a hover effect to the benefit cards. */ .benefits-section .benefit-card:hover { transform: translateY(-5px); /* Lifts the card slightly when hovered. */ background-color: rgba(255, 255, 255, 0.15); /* Makes the card slightly brighter. */ } /* Styles the Bootstrap icons inside the benefit cards. */ .benefit-card i { color: #a370f7; /* Sets the color of the icons (e.g., the shield, clock). */ } /* --- Styles for the Footer/Copyright Section --- */ /* Styles the main footer container. */ .footer { position: relative; /* Ensures it is positioned correctly within the layout. */ z-index: 1; /* Makes sure the footer appears on top of any background effects. */ /* Sets a semi-transparent black background. */ background-color: rgba(0, 0, 0, 1); /* Sets the default text color for the footer. */ color: #000000ff; } /* Styles to control the size and background of the chart container. */ .chart-container { max-width: 500px; /* Sets the maximum width of the chart. You can adjust this value. */ margin: auto; /* This centers the chart horizontally on the page. */ position: relative; /* Required for proper chart rendering. */ background-color: var(--card-bg-color); /* Ensures the chart has a solid white background. */ } /* --- NEW: Dark Mode Styles for Accordion Component --- */ [data-theme="dark"] .accordion-item { background-color: var(--card-bg-color); border-color: var(--border-color); } [data-theme="dark"] .accordion-button { background-color: #2a2a2a; color: var(--text-color); } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--primary-color); color: white; } [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(100%) brightness(200%); } [data-theme="dark"] .accordion-body { color: var(--text-muted-color); } [data-theme="dark"] .accordion-body pre { background-color: #121212 !important; color: var(--text-color); } /* Styles for Bootstrap List Group (Prediction History) */ [data-theme="dark"] .list-group-item { background-color: var(--card-bg-color); border-color: var(--border-color); color: var(--text-color); } /* Styles for "jumbotron" on About page */ [data-theme="dark"] .p-5.text-center.bg-light.rounded-3 { background-color: var(--card-bg-color) !important; } /* This new rule specifically targets the text inside that section */ [data-theme="dark"] .p-5.text-center.bg-light.rounded-3 .text-body-emphasis, [data-theme="dark"] .p-5.text-center.bg-light.rounded-3 .text-muted { color: var(--text-color) !important; } /* Add this to your styles/main.css file */ /* ======== General Body & Animated Background ======== */ /* ======== General Body & NEW Animated Background ======== */ /* ======== General Body & NEW Vibrant Red Animated Background ======== */ /* ======== General Body & NEW Heartbeat Background ======== */ html { scroll-behavior: smooth; } body.auth-page { background-color: #000; /* A solid black fallback background */ overflow: hidden; /* Prevent scrollbars from the canvas */ } #canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; /* This is crucial to place it behind your content */ } /* ======== Navigation Bar (Styled for the dark theme) ======== */ .navbar { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .navbar .nav-link { color: rgba(255, 255, 255, 0.8); font-weight: 500; transition: color 0.3s ease; } .navbar .nav-link:hover { color: #fff; } .navbar-brand { color: #fff; font-weight: bold; } .navbar .btn-outline-light { border-color: #fff; color: #fff; transition: all 0.3s ease; } .navbar .btn-outline-light:hover { background: #fff; color: #a71d1d; } /* ======== Buttons (Styled to contrast with the deep red) ======== */ .btn-primary { background-color: #fff; color: #a71d1d; font-weight: 500; border: none; transition: all 0.3s ease; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); background-color: #f0f0f0; } .btn-outline-primary { color: #fff; border-color: #fff; } .btn-outline-primary:hover { background-color: #fff; color: #a71d1d; } /* ======== Card Styling (Glass effect on the pulsing background) ======== */ .feature-card, .benefit-card, .step-card { background: rgba(0, 0, 0, 0.15); /* Darker glass effect */ border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 15px; padding: 2rem; height: 100%; backdrop-filter: blur(8px); transition: transform 0.3s ease, background-color 0.3s ease; color: #f0f0f0; /* Light text INSIDE the dark cards */ } .feature-card:hover, .benefit-card:hover, .step-card:hover { transform: translateY(-10px); background: rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.3); } .feature-card h5, .benefit-card h5, .step-card h5 { color: #fff; } .feature-card p, .benefit-card p, .step-card p { color: rgba(255, 255, 255, 0.8); } .feature-icon { font-size: 3rem; color: #ff5252; /* A brighter red for the icon to stand out */ } .step-number { width: 50px; height: 50px; background: #ff5252; /* Brighter red */ color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; margin-bottom: 1rem; } /* ======== Section Headers & Text ======== */ h1, h2 { color: #fff; } .hero-section p.lead { color: rgba(255, 255, 255, 0.9); } /* ======== Footer ======== */ .footer { background: rgba(6, 162, 147, 1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); text-align: center; padding: 1.5rem 0; text-color: #ffffff; border-top: 1px solid rgba(255, 255, 255, 0.93); } .footer .text-muted { color: rgba(255, 255, 255, 0.7) !important; }