/* |-------------------------------------------------------------------------- | Global CSS - styles.css |-------------------------------------------------------------------------- */ /* Import Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Roboto+Slab:wght@400;700&display=swap'); /* Root Variables for Fixed Palette and Typography */ :root { /* Color Palette (Professional, Light, Eye-Comfort) */ --clr-primary: #004d40; /* Dark Teal/Green - Professional core */ --clr-primary-light: #26a69a; /* Lighter Teal/Green for accents */ --clr-secondary: #ffb300; /* Amber/Gold - Warm accent/CTA */ --clr-background-light: #f8f9fa; /* Very light gray/off-white */ --clr-surface: #ffffff; /* Pure white for content blocks */ --clr-text-main: #343a40; /* Dark gray for main text */ --clr-text-secondary: #6c757d; /* Medium gray for secondary text/caption */ --clr-border: #e9ecef; /* Light border color */ --clr-hover-bg: #e6f5f4; /* Subtle hover background */ /* Typography */ --ff-primary: 'Poppins', sans-serif; /* Modern, clean sans-serif */ --ff-heading: 'Roboto Slab', serif; /* Slightly more formal/trustworthy for headings */ --fz-base: 1rem; /* Base font size (now relative to ) */ } /* Global Reset and Base Styles */ * { box-sizing: border-box; margin: 0; padding: 0; } /* Fluid Root Font Size (Moved near top for cascading) */ html { /* Scales base font from 16px (mobile) to 18px (large desktop) */ /* All 'rem' units will scale fluidly based on this */ font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); } body { font-family: var(--ff-primary); font-size: var(--fz-base); line-height: 1.6; color: var(--clr-text-main); background-color: var(--clr-background-light); transition: background-color 0.3s; min-height: 100vh; /* Ensure full page height for spacious feel */ } h1, h2, h3, h4, h5, h6 { font-family: var(--ff-heading); color: var(--clr-primary); line-height: 1.2; margin-top: 1.5rem; margin-bottom: 0.75rem; } /* Fluid Heading Sizes (Replaces old static definitions) */ h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem); } h2 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.5rem); } h3 { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); } h4 { font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem); } h5 { font-size: clamp(1.1rem, 0.9rem + 0.75vw, 1.25rem); } h6 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.1rem); } p { margin-bottom: 1rem; } a { color: var(--clr-primary-light); text-decoration: none; transition: color 0.2s, background-color 0.2s; } a:hover, a:focus { color: var(--clr-primary); } sup { color: var(--clr-primary); } label.required::after { content: " *"; color: var(--clr-primary-light); font-weight: 700; margin-left: 0.15em; } /* Spacing utility for main content */ .container { max-width: 1200px; margin-left: auto; margin-right: auto; padding: 0 1rem; } /* Navbar Design */ .navbar { background-color: var(--clr-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); padding: 0.5rem 0; /* Compact vertical spacing */ position: sticky; top: 0; z-index: 1030; } .navbar-brand { font-family: var(--ff-heading); font-size: 1.25rem; /* This will be overridden by scaling rules */ font-weight: 700; color: var(--clr-primary); display: flex; align-items: center; padding: 0.25rem 0; } .navbar-brand img { height: 50px; width: auto; margin-right: 0.5rem; border-radius: 4px; /* Slight rounding for logo */ transition: height 0.2s; /* Animate logo size changes */ } /* Navbar Brand Text Scaling */ .navbar-brand-text { display: none; /* Hide all by default, media queries will show one */ font-weight: 700; vertical-align: middle; line-height: 1.2; transition: font-size 0.2s; } /* Toggle button for smaller screens */ .navbar-toggler { border-color: var(--clr-border); } .navbar-toggler:focus { box-shadow: 0 0 0 0.25rem rgba(0, 77, 64, 0.25); } /* Navigation Links */ .navbar-nav .nav-link { color: var(--clr-text-main); font-weight: 500; padding: 0.5rem 0.75rem; /* Compact horizontal padding */ margin: 0 0.25rem; border-radius: 4px; transition: all 0.2s; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus { color: var(--clr-primary); background-color: var(--clr-hover-bg); } .navbar-nav .nav-link.active { color: var(--clr-surface) !important; background-color: var(--clr-primary); } /* Dropdown Menu (Courses Submenu) */ .dropdown-menu { border: 1px solid var(--clr-border); border-top: 3px solid var(--clr-primary); /* Highlight dropdown */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 0.5rem 0; } .dropdown-item { font-size: 1rem; padding: 0.5rem 1rem; color: var(--clr-text-main); transition: all 0.2s; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--clr-hover-bg); color: var(--clr-primary); } /* Login/Register Buttons */ .btn-outline-primary { color: var(--clr-primary); border-color: var(--clr-primary); transition: all 0.2s; } .btn-outline-primary:hover { color: var(--clr-surface); background-color: var(--clr-primary); } .btn-primary { background-color: var(--clr-secondary); border-color: var(--clr-secondary); color: var(--clr-text-main); /* Keep text dark for contrast */ font-weight: 600; transition: all 0.2s; } .btn-primary:hover { background-color: #f5a800; /* Slightly darker secondary */ border-color: #f5a800; color: var(--clr-text-main); } /* Footer Design */ footer { text-align: center; padding: 1.5rem 1rem; font-size: 0.9rem; color: var(--clr-text-secondary); border-top: 1px solid var(--clr-border); margin-top: 2rem; background-color: var(--clr-surface); } footer a { color: var(--clr-text-secondary); } footer a:hover { color: var(--clr-primary); } /* Responsiveness: Fluid Typography & Navbar Scaling */ /* Main Content Margin */ main.container { margin-top: 2rem; } /* Navbar Specific Scaling (The 5 Scales) */ /* Base (Mobile-First) - Corresponds to Scale 5 */ #brand-text-sm-short { display: inline; } /* Show short mobile text */ .navbar-brand-text { font-size: 0.9rem; } /* Scale 5: Small brand text */ .navbar-brand img { height: 40px; } /* Smaller logo */ /* Scale 5: Small menu item fonts (in collapsed menu) */ .navbar-collapse .navbar-nav .nav-link { font-size: 0.9rem; } .navbar-collapse .dropdown-item { font-size: 0.9rem; } .navbar-collapse .btn-outline-primary, .navbar-collapse .btn-primary { font-size: 0.9rem; padding: 0.25rem 0.5rem; } /* Scale 4: Small screens (sm) */ @media (min-width: 576px) { /* Show short mobile text */ #brand-text-lg-full, #brand-text-lg-short, #brand-text-sm-full { display: none; } #brand-text-sm-short { display: inline; } /* Scale 4: Back to original size */ .navbar-brand-text { font-size: 1rem; } .navbar-brand img { height: 45px; } /* Scale 4: Restore original menu item fonts (in collapsed menu) */ .navbar-collapse .navbar-nav .nav-link { font-size: 0.9rem; } .navbar-collapse .dropdown-item { font-size: 1rem; } .navbar-collapse .btn-outline-primary, .navbar-collapse .btn-primary { font-size: 0.8rem; padding: 0.375rem 0.75rem; /* Default BS padding */ } } /* Scale 3: Medium screens (md) */ @media (min-width: 768px) { /* Show FULL mobile text */ #brand-text-lg-full, #brand-text-lg-short, #brand-text-sm-short { display: none; } #brand-text-sm-full { display: inline; } /* Scale 3: Original font size */ .navbar-brand-text { font-size: 1.15rem; } .navbar-brand img { height: 50px; } /* Back to original logo size */ /* Note: Menu item fonts remain 1rem from (sm) breakpoint */ } /* Scale 2: Large screens (lg) - Desktop Nav */ @media (min-width: 992px) { /* Show SHORT desktop text */ #brand-text-lg-full, #brand-text-sm-full, #brand-text-sm-short { display: none; } #brand-text-lg-short { display: inline; } /* Scale 2: Small brand font size */ .navbar-brand-text { font-size: 0.85rem; } /* Scale 2: Squeeze ALL nav items (desktop) */ .navbar-nav .nav-link { font-size: 0.85rem; padding: 0.5rem 0.4rem; margin: 0 0.1rem; } .dropdown-item { font-size: 0.85rem; } .btn-outline-primary, .btn-primary { font-size: 0.85rem; padding: 0.25rem 0.5rem; } } /* Scale 1: Extra-Large screens (xl) - Desktop Nav */ @media (min-width: 1200px) { /* Show FULL desktop text */ #brand-text-lg-short, #brand-text-sm-full, #brand-text-sm-short { display: none; } #brand-text-lg-full { display: inline; } /* Scale 1: Full brand font size */ .navbar-brand-text { font-size: 1rem; } /* Scale 1: Restore original nav item sizes */ .navbar-nav .nav-link { font-size: 1rem; padding: 0.5rem 0.75rem; margin: 0 0.25rem; } .dropdown-item { font-size: 1rem; } .btn-outline-primary, .btn-primary { font-size: 1rem; padding: 0.375rem 0.75rem; } } /* Homepage Specific Styles (for home.html elements) */ /* Slider */ .slider-container { margin-top: 0.5rem; margin-bottom: 2rem; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); } .fade-slider { position: relative; height: 300px; /* Fixed height for consistency */ width: 100%; } .fade-slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.5s ease-in-out; } .fade-slider img.active { opacity: 1; } /* Welcome Banner */ .welcome-banner { text-align: center; padding: 3rem 1rem; margin-bottom: 2rem; background: linear-gradient(135deg, var(--clr-surface), var(--clr-background-light)); /* Subtle gradient/texture */ border-radius: 8px; border: 1px solid var(--clr-border); } .welcome-banner h1 { font-size: calc(var(--fz-base) * 2.5); margin-top: 0; margin-bottom: 0.75rem; color: var(--clr-primary); } .welcome-banner p { font-size: calc(var(--fz-base) * 1.1); max-width: 800px; margin-left: auto; margin-right: auto; color: var(--clr-text-secondary); } /* Info Section Modern (Grid/Flex) */ .info-section-modern { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .info-card { background-color: var(--clr-surface); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transition: transform 0.3s, box-shadow 0.3s; } .info-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); } .info-card img { width: 100%; height: 200px; object-fit: cover; } .info-content { padding: 1.5rem; } .info-content h3 { margin-top: 0; font-size: calc(var(--fz-base) * 1.3); } .info-content p { font-size: 0.95rem; color: var(--clr-text-secondary); margin-bottom: 0.5rem; } /* CTA Section */ .cta-section { text-align: center; padding: 3rem 1rem; margin-bottom: 3rem; background-color: var(--clr-primary); /* Use primary color for strong contrast */ background-image: linear-gradient(45deg, var(--clr-primary), #00796b); /* Subtle gradient */ border-radius: 8px; color: var(--clr-surface); } .cta-section p { font-size: calc(var(--fz-base) * 1.2); font-weight: 600; margin-bottom: 1.5rem; color: var(--clr-surface); } .cta-btn { display: inline-block; padding: 0.75rem 1.75rem; background-color: var(--clr-secondary); color: var(--clr-text-main); border-radius: 4px; font-weight: 700; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); transition: background-color 0.2s, transform 0.2s; text-transform: uppercase; } .cta-btn:hover { background-color: #f5a800; text-decoration: none; transform: translateY(-2px); } /* Tablet & Mobile Adjustments for Homepage */ @media (max-width: 768px) { .fade-slider { height: 200px; /* Shorter slider on small screens */ } .welcome-banner { padding: 2rem 1rem; } .welcome-banner h1 { font-size: calc(var(--fz-base) * 1.8); } .info-section-modern { grid-template-columns: 1fr; /* Single column layout */ } } /* |-------------------------------------------------------------------------- | ABOUT Page Specific Styles |-------------------------------------------------------------------------- */ /* Hero Section */ .about-hero { height: 70vh; /* More spacious, but not too dominant */ display: flex; align-items: center; justify-content: center; position: relative; background-size: cover !important; background-position: center center !important; margin-bottom: 3rem; border-radius: 8px; overflow: hidden; } .about-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /* Subtle blue-to-transparent overlay for text contrast and palette integration */ background: linear-gradient(180deg, rgba(0, 74, 119, 0.4) 0%, rgba(0, 74, 119, 0.2) 50%, rgba(0, 0, 0, 0.1) 100%); } .about-hero .container { position: relative; z-index: 10; text-align: center; padding: 2rem; } .about-hero h1 { color: var(--clr-surface); font-size: 3rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); margin-bottom: 0.5rem; } .about-hero .lead { color: var(--clr-background-light); font-size: 1.5rem; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); } .about-hero .cta-btn-alt { /* Use primary accent color for CTA button on hero */ display: inline-block; padding: 0.75rem 2rem; background-color: var(--clr-secondary); color: var(--clr-text-main); border-radius: 4px; font-weight: 700; transition: background-color 0.2s, transform 0.2s; text-transform: uppercase; } .about-hero .cta-btn-alt:hover { background-color: #f5a800; transform: translateY(-2px); } /* Commitment Section */ .commitment-section { padding: 4rem 1rem; background-color: var(--clr-surface); margin-bottom: 3rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } .commitment-card { max-width: 800px; margin: 0 auto; text-align: center; } .commitment-card h2 { color: var(--clr-primary); font-size: 2.2rem; margin-top: 0; margin-bottom: 1.5rem; } /* Mission & Vision Section (Glass Effect Inspired) */ .mv-section { padding: 3rem 1rem; background-color: var(--clr-background-light); /* Light background for contrast */ } .mv-card { padding: 2rem; border-radius: 12px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1); background-color: var(--clr-surface); /* Solid white for clean look */ border-left: 5px solid; transition: transform 0.3s, box-shadow 0.3s; height: 100%; } .mv-card.mission { border-left-color: var(--clr-primary); } .mv-card.vision { border-left-color: var(--clr-primary-light); } .mv-card h3 { margin-top: 0; font-size: 1.5rem; } /* Image Strip Section */ .image-strip-container { margin: 4rem 0; text-align: center; } .image-strip-container h1 { margin-bottom: 2rem; } .image-strip { display: flex; white-space: nowrap; width: auto; transition: transform 0.5s ease-in-out; } .gallery-img { flex-shrink: 0; width: calc(100% / 3); /* Show 3 images */ height: 300px; object-fit: cover; padding: 0 0.5rem; filter: brightness(0.7) grayscale(0.8); transition: all 0.5s; transform: scale(0.9); cursor: pointer; } .gallery-img.center { filter: brightness(1) grayscale(0); transform: scale(1); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } /* Core Values Section */ .values-section { padding: 3rem 1rem; background-color: var(--clr-background-light); } .value-card { padding: 2rem; background-color: var(--clr-surface); border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); height: 100%; border-top: 5px solid var(--clr-primary-light); /* Blue border for connection */ transition: box-shadow 0.3s; } .value-card h4 { color: var(--clr-primary); margin-top: 0; } @media (max-width: 768px) { .image-strip-container h1 { margin-bottom: 1rem; } .gallery-img { width: 100%; /* Show one image at a time on mobile */ height: 250px; } .about-hero { height: 50vh; } .about-hero h1 { font-size: 1.8rem; } .about-hero .lead { font-size: 1.2rem; } .mv-card { margin-bottom: 1rem; } } /* |-------------------------------------------------------------------------- | CONTACT Page Specific Styles |-------------------------------------------------------------------------- */ .contact-wrapper { display: flex; justify-content: center; align-items: flex-start; /* Align to the top */ padding: 3rem 1rem; min-height: calc(100vh - 150px); background-color: var(--clr-background-light); } .contact-container { width: 100%; max-width: 900px; display: flex; flex-wrap: wrap; gap: 2rem; background-color: var(--clr-surface); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } /* Left Panel: Contact Form */ .contact-form-panel { flex: 1 1 55%; /* Takes about 55% of the space */ padding: 2.5rem; } .contact-form-panel h2 { font-family: var(--ff-heading); color: var(--clr-primary); margin-bottom: 0.5rem; font-size: 2rem; } .contact-form-panel p.lead-text { color: var(--clr-text-secondary); margin-bottom: 2rem; } /* Form Group Styling (Reusing form-group structure from register/login) */ .contact-form-panel .form-group { margin-bottom: 1.5rem; } .contact-form-panel label { display: block; font-weight: 500; color: var(--clr-text-main); margin-bottom: 0.25rem; } .contact-form-panel .form-control { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--clr-border); border-radius: 6px; font-size: 1rem; font-family: var(--ff-primary); } .contact-form-panel textarea.form-control { resize: vertical; min-height: 120px; } .contact-form-panel .btn-submit { padding: 0.75rem 2rem; font-size: 1.1rem; font-weight: 700; background-color: var(--clr-primary); border: None; color: var(--clr-surface); border-radius: 6px; cursor: pointer; transition: background-color 0.2s; width: auto; } .contact-form-panel .btn-submit:hover { background-color: var(--clr-primary-light); transform: translateY(-1px); } /* Right Panel: Social Media & Digital Info */ .contact-info-panel { flex: 1 1 35%; /* Takes about 35% of the space */ padding: 2.5rem; background-color: var(--clr-primary); /* Solid blue background */ color: var(--clr-surface); border-top-right-radius: 12px; border-bottom-right-radius: 12px; } .contact-info-panel h3 { font-family: var(--ff-heading); font-size: 1.5rem; margin-bottom: 1.5rem; border-bottom: 2px solid rgba(255, 255, 255, 0.3); padding-bottom: 0.5rem; } /* Digital Contact Links */ .digital-contact-item { display: flex; align-items: center; margin-bottom: 1rem; font-size: 1rem; } .digital-contact-item i { font-size: 1.25rem; margin-right: 0.75rem; color: var(--clr-secondary); /* Accent color for icons */ } .digital-contact-item a { color: var(--clr-surface); text-decoration: none; transition: color 0.2s; } .digital-contact-item a:hover { color: var(--clr-secondary); } .color-inv { color: var(--clr-surface) !important; } /* Social Media Grid */ .social-links-grid { margin-top: 2rem; display: flex; gap: 1.5rem; justify-content: flex-start; } .social-links-grid a { color: var(--clr-surface); font-size: 1.8rem; transition: color 0.2s, transform 0.2s; } .social-links-grid a:hover { color: var(--clr-secondary); transform: translateY(-2px); } /* Mobile adjustments: Stack panels */ @media (max-width: 768px) { .contact-container { flex-direction: column; } .contact-form-panel, .contact-info-panel { flex: 1 1 100%; padding: 2rem; } .contact-info-panel { border-radius: 0 0 12px 12px; } .social-links-grid { justify-content: center; } } /* |-------------------------------------------------------------------------- | COURSES HISTORY Page Specific Styles |-------------------------------------------------------------------------- */ /* Filters/Search Bar Area */ .course-filters { margin-bottom: 2rem; background-color: var(--clr-surface); padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; } .course-filters input[type="text"] { flex-grow: 1; min-width: 250px; padding: 0.75rem 1rem; border: 1px solid var(--clr-border); border-radius: 4px; font-size: 1rem; font-family: var(--ff-primary); } /* Course Grid Layout */ .course-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; } /* Course Card Style (Spacious and Elevated) */ .course-card { background-color: var(--clr-surface); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; position: relative; } .course-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } .course-card img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.3s; } .course-card:hover img { transform: scale(1.05); } .course-card-info { padding: 1.5rem 1.5rem 0.5rem 1.5rem; /* Reduced bottom padding */ display: flex; flex-direction: column; flex-grow: 1; position: relative; } /* * MODIFICATION: Remove previous badge positioning * New element at the bottom of the card for status. */ .course-card .badge { /* REMOVE the absolute positioning from the previous CSS */ display: none; } /* NEW: Style for the bottom status tag */ .course-status-tag { /* Position the status tag absolutely within the relative .course-card */ position: absolute; bottom: 0; right: 0; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 600; border-top-left-radius: 6px; border-bottom-right-radius: 8px; /* Match card corner radius */ /* Use the text secondary color (gray) for past/ended status */ background-color: var(--clr-text-secondary) !important; color: var(--clr-surface); } .course-title { font-family: var(--ff-heading); font-size: 1.35rem; font-weight: 700; color: var(--clr-primary); margin-bottom: 0.75rem; line-height: 1.3; } .course-meta { font-size: 0.95rem; color: var(--clr-text-secondary); display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .course-meta .fa-icon { color: var(--clr-primary-light); margin-right: 0.4rem; } /* Status Tags */ .online-tag { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; } .online-tag::before { content: ""; width: 10px; height: 10px; background: var(--clr-primary-light); border-radius: 50%; display: inline-block; margin-right: 6px; } .course-card .badge { position: absolute; top: 10px; right: 10px; padding: 0.5em 0.75em; font-size: 0.85rem; font-weight: 600; /* Use a contrasting background color for the 'Ended' badge */ background-color: var(--clr-text-secondary) !important; } .details-link { color: inherit; text-decoration: none; transition: none; } .details-link:hover { color: inherit; text-decoration: none; } /* No Courses Message */ .no-courses { text-align: center; padding: 4rem 1rem; background-color: var(--clr-surface); border-radius: 8px; border: 1px solid var(--clr-border); color: var(--clr-text-secondary); font-style: italic; } /* |-------------------------------------------------------------------------- | COURSE DETAILS Page Specific Styles |-------------------------------------------------------------------------- */ /* Reset main container style for this specific page to achieve the desired card look */ main.container { padding-top: 2rem; padding-bottom: 2rem; } .course-detail-wrapper { max-width: 960px; margin: 0 auto; background: var(--clr-surface); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); overflow: hidden; } .course-detail-header-img { width: 100%; height: 350px; object-fit: cover; display: block; } .course-detail-content { padding: 2.5rem 3rem; } .course-detail-content h1 { font-size: 2.2rem; margin-top: 0; margin-bottom: 1rem; color: var(--clr-primary); } /* Metadata Block */ .course-meta { font-size: 1rem; color: var(--clr-text-secondary); display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--clr-border); } .course-meta span { display: flex; align-items: center; } .course-meta .fa-icon { color: var(--clr-primary-light); margin-right: 0.5rem; } /* Detail Rows (Chairmen, Instructors, Objectives, etc.) */ .course-detail-row { margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px dashed var(--clr-border); } .course-detail-title { display: block; font-family: var(--ff-heading); font-size: 1.3rem; font-weight: 700; color: var(--clr-text-main); margin-bottom: 1rem; } /* List Tags (Chairmen/Instructors names) */ .list-tag { display: inline-block; padding: 6px 14px; font-size: 0.95rem; font-weight: 500; background: var(--clr-hover-bg); /* Light blue background */ color: var(--clr-primary); border-radius: 50px; margin: 0.5rem 0.5rem 0.5rem 0; border: 1px solid var(--clr-primary-light); } /* Course Objectives Content */ .course-detail-row p { font-size: 1.05rem; color: var(--clr-text-main); } /* Action/Registration Footer */ .course-action-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding-top: 1rem; } .course-action-footer .btn-register { /* Use CTA accent color (secondary) */ background-color: var(--clr-secondary); border: none; color: var(--clr-text-main); font-weight: 700; padding: 0.75rem 2.5rem; border-radius: 4px; transition: all 0.2s; } .course-action-footer .btn-register:hover:not(:disabled) { background-color: #f5a800; border-color: #f5a800; } .course-action-footer .deadline-notice { font-size: 0.95rem; color: var(--clr-text-secondary); margin: 0; font-style: italic; padding-left: 1rem; } /* Materials Section */ .course-materials-wrapper { position: relative; padding: 0.5rem 0; } .material-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 10px; } .material-item a { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; background-color: var(--clr-background-light); border-radius: 4px; border: 1px solid var(--clr-border); transition: background-color 0.2s; color: var(--clr-text-main); } .material-item a:hover { background-color: var(--clr-hover-bg); color: var(--clr-primary); text-decoration: none; } .material-icon { font-size: 1.2rem; } /* Locked Materials Overlay */ .course-materials-wrapper.locked { filter: blur(2px) grayscale(0.5); /* Subtle effect to show it's locked */ position: relative; pointer-events: none; /* Disable clicking on blurred items */ } .course-materials-wrapper .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; pointer-events: auto; border-radius: 4px; } .overlay-message { text-align: center; padding: 1rem; background-color: var(--clr-surface); border: 2px solid var(--clr-primary); border-radius: 8px; font-size: 1.1rem; font-weight: 600; color: var(--clr-primary); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .overlay-message a { color: var(--clr-primary-light); font-weight: 700; text-decoration: underline; } /* Scrollable Highlights - Customizing the existing styles */ .course-scroll-wrapper { overflow-x: auto; white-space: nowrap; padding: 1rem 0; border-bottom: none; /* Removed the line */ /* Custom scrollbar styles are good, keeping them simple */ } .course-scroll-item { display: inline-block; cursor: pointer; margin-right: 1.5rem; /* Increased spacing */ } .course-scroll-item img { height: 180px; /* Slightly larger highlights */ width: auto; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } /* Modal Lightbox - Simple and effective, no major palette change needed */ .modal-overlay { display: none; /* Hidden by default */ position: fixed; /* Stays on top of everything */ z-index: 1050; /* Higher than navbar */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* Enable scroll if image is too large */ background-color: rgba(0, 0, 0, 0.9); /* Dark semi-transparent background */ align-items: center; justify-content: center; backdrop-filter: blur(5px); /* Subtle blur for background */ } .modal-overlay.active { display: flex; /* Show when active */ } .modal-image { display: block; /* Ensure image behaves as a block element */ max-width: 90vw; /* Max width 90% of viewport width */ max-height: 90vh; /* Max height 90% of viewport height */ margin: auto; /* Center the image */ object-fit: contain; /* Contain the image within its bounds */ border-radius: 8px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Stronger shadow for image */ } .modal-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ color: var(--clr-surface); /* White arrows */ font-size: 2.5rem; /* Larger arrows */ padding: 0.8rem 1.2rem; border: none; cursor: pointer; user-select: none; border-radius: 50%; /* Circular buttons */ transition: background-color 0.3s, color 0.3s; line-height: 1; /* Keep icon vertically centered */ } .modal-nav:hover { background-color: rgba(0, 0, 0, 0.8); color: var(--clr-secondary); /* Accent color on hover */ } .modal-prev { left: 1rem; } .modal-next { right: 1rem; } .modal-close { position: absolute; top: 1rem; right: 1rem; background-color: rgba(0, 0, 0, 0.5); color: var(--clr-surface); font-size: 2.5rem; /* Larger close button */ padding: 0.2rem 1rem; border: none; cursor: pointer; user-select: none; border-radius: 50%; transition: background-color 0.3s, color 0.3s; line-height: 1; } .modal-close:hover { background-color: rgba(0, 0, 0, 0.8); color: var(--clr-secondary); } /* Ensure body doesn't scroll when modal is active */ body.modal-open { overflow: hidden; } /* Mobile adjustments */ @media (max-width: 768px) { .course-detail-content { padding: 1.5rem; } .course-detail-header-img { height: 250px; } .course-meta { flex-direction: column; gap: 0.75rem; } .course-detail-content h1 { font-size: 1.8rem; } .course-action-footer { flex-direction: column; align-items: stretch; gap: 1rem; } .course-action-footer .deadline-notice { padding-left: 0; text-align: center; } } /* |-------------------------------------------------------------------------- | UPCOMING COURSES Page Specific Styles |-------------------------------------------------------------------------- */ /* Filter Bar for Upcoming Courses */ .search-bar-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 2.5rem; padding: 1.5rem; background-color: var(--clr-surface); border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); } .search-bar { position: relative; flex-grow: 1; margin-right: 1.5rem; min-width: 250px; } .search-bar input[type="text"] { width: 100%; padding: 0.8rem 1rem 0.8rem 3rem; /* Space for icon */ border: 2px solid var(--clr-primary-light); border-radius: 6px; font-size: 1rem; font-family: var(--ff-primary); transition: border-color 0.3s; } .search-bar input[type="text"]:focus { border-color: var(--clr-primary); outline: none; } .search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--clr-primary-light); font-size: 1.1rem; } /* Checkbox Label Styling */ .free-checkbox { display: flex; align-items: center; font-size: 1rem; font-weight: 500; color: var(--clr-text-main); } .free-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-right: 8px; accent-color: var(--clr-primary); /* Use primary color for the checkbox */ } /* Course Card Actions/Buttons */ .upcoming-course-actions { padding: 0 1.5rem 1.5rem 1.5rem; /* Use flexbox to make the button take full width */ display: flex; justify-content: stretch; } .upcoming-course-actions button { width: 100%; padding: 0.75rem; font-weight: 700; border-radius: 4px; transition: background-color 0.2s; border: none; } /* Enroll Button (Success/Active CTA) */ .upcoming-course-actions .btn-success { background-color: var(--clr-secondary); /* Accent color for main CTA */ color: var(--clr-text-main); } .upcoming-course-actions .btn-success:hover:not(:disabled) { background-color: #f5a800; } /* Registration Closed Button (Danger) */ .upcoming-course-actions .btn-danger { background-color: #e74c3c; /* Red for closed */ color: var(--clr-surface); } /* Info/Wait Button (Secondary/Neutral) */ .upcoming-course-actions .btn-secondary { background-color: var(--clr-primary-light); /* Lighter blue for informative status */ color: var(--clr-surface) !important; white-space: normal; /* Allow text wrapping for long date strings */ line-height: 1.3; } /* Mobile Responsiveness for Filters */ @media (max-width: 600px) { .search-bar-container { flex-direction: column; gap: 1rem; padding: 1rem; } .search-bar { margin-right: 0; width: 100%; } .free-checkbox { width: 100%; justify-content: flex-start; } } /* |-------------------------------------------------------------------------- | STAFF Page Specific Styles |-------------------------------------------------------------------------- */ /* Hero/Header Section */ .staff-header { text-align: center; padding: 4rem 1rem; background-color: var(--clr-hover-bg); /* Very light blue background */ margin-bottom: 3rem; /* Removed inline styles */ } .staff-header h1 { font-family: var(--ff-heading); color: var(--clr-primary); margin-top: 0; } .staff-header p { max-width: 800px; margin: 1rem auto 0; font-size: 1.15rem; color: var(--clr-text-main); } /* Staff Grid and Card Layout */ .staff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Adjusted min size */ gap: 2rem; padding-bottom: 3rem; } .staff-card { /* Enforce a Max Width for the Card to prevent overly wide single columns on large screens */ max-width: 350px; margin: 0 auto; /* Center the card when max-width is applied */ background-color: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; height: 100%; text-align: center; } .staff-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } /* Staff Photo Styling - SQUARED AND CONTAINED */ .staff-photo-wrapper { width: 100%; /* 🔑 FIX: Enforce a perfect square aspect ratio */ aspect-ratio: 1 / 1; /* Removed fixed height */ overflow: hidden; margin-bottom: 1rem; border-bottom: 3px solid var(--clr-primary-light); } .staff-photo-wrapper img { width: 100%; height: 100%; /* Ensures the image fills the square wrapper without stretching */ object-fit: cover; transition: transform 0.3s; } .staff-card:hover .staff-photo-wrapper img { transform: scale(1.05); } .staff-card-body { padding: 0 1.5rem 1.5rem 1.5rem; } .staff-card-body h5 { font-family: var(--ff-primary); font-size: 1.35rem; font-weight: 600; color: var(--clr-primary); margin-bottom: 0.25rem; } .staff-card-body .card-text { font-size: 1rem; color: var(--clr-text-secondary); font-style: italic; } /* |-------------------------------------------------------------------------- | LOGIN / AUTH Page Specific Styles |-------------------------------------------------------------------------- */ /* Main container and Card */ .auth-wrapper { display: flex; justify-content: center; align-items: center; padding: 3rem 1rem; min-height: calc(100vh - 150px); /* Ensures it fills most of the screen */ background-color: var(--clr-background-light); } .auth-container { width: 100%; max-width: 450px; /* Standard size for login forms */ padding: 2.5rem; background-color: var(--clr-surface); border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); text-align: center; } .auth-container h1 { font-family: var(--ff-heading); color: var(--clr-primary); margin-bottom: 1.5rem; font-size: 2rem; } /* Django Form Styling (form.as_p) */ .auth-container form p { margin-bottom: 1rem; text-align: left; } .auth-container form label { display: block; font-weight: 500; color: var(--clr-text-main); margin-bottom: 0.25rem; } .auth-container input[type="text"], .auth-container input[type="password"], .auth-container input[type="email"] { width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--clr-border); border-radius: 6px; font-size: 1rem; font-family: var(--ff-primary); transition: border-color 0.3s, box-shadow 0.3s; } .auth-container input:focus { border-color: var(--clr-primary); outline: none; box-shadow: 0 0 0 3px rgba(70, 130, 180, 0.15); } /* Login Button Styling */ .auth-container .btn-login { width: 100%; padding: 0.75rem 1.5rem; margin-top: 1rem; font-size: 1.1rem; font-weight: 700; background-color: var(--clr-primary); border: none; color: var(--clr-surface); border-radius: 6px; cursor: pointer; transition: background-color 0.2s, transform 0.2s; } .auth-container .btn-login:hover { background-color: var(--clr-primary-light); transform: translateY(-1px); } /* Links and helper text */ .auth-container .helper-link { display: block; margin-top: 1rem; color: var(--clr-text-secondary); font-size: 0.95rem; text-decoration: none; transition: color 0.2s; } .auth-container .helper-link:hover { color: var(--clr-primary); } .auth-container .register-text { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--clr-border); font-size: 1rem; color: var(--clr-text-main); } .auth-container .register-text a { color: var(--clr-primary-light); font-weight: 600; text-decoration: underline; } .auth-container .register-text a:hover { text-decoration: underline; } /* Error/Help Text Styling */ .auth-container ul.errorlist { list-style: none; padding: 0; margin-top: 0.5rem; color: #e74c3c; /* Danger red */ font-size: 0.9rem; text-align: left; } /* |-------------------------------------------------------------------------- | REGISTRATION / Complex Form Field Styles |-------------------------------------------------------------------------- */ .auth-container h3 { font-family: var(--ff-heading); color: var(--clr-primary); margin-bottom: 2rem; font-size: 2rem; } /* Phone Input (intl-tel-input integration) */ /* This ensures the phone input fields match the rest of the form controls */ .auth-container .form-group .iti { display: block; /* Make the wrapper take full width */ } .auth-container .form-group .iti input[type="tel"] { width: 100%; /* Important for full width */ padding: 0.75rem 1rem; height: auto; /* Override default height */ border: 1px solid var(--clr-border); border-radius: 6px; font-size: 1rem; font-family: var(--ff-primary); transition: border-color 0.3s, box-shadow 0.3s; } /* Style the country dropdown */ .auth-container .form-group .iti .iti__country-container .iti__selected-flag { height: 100%; /* Match parent height */ } .auth-container .form-group .iti .iti__selected-flag { padding-left: 10px; padding-right: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .password-input-wrapper { display: flex; /* Use flexbox for horizontal alignment */ width: 100%; align-items: stretch; /* Crucial: Makes the button stretch to the input height */ position: relative; /* Needed if you want to use absolute positioning later */ } .password-input-wrapper .form-control { flex-grow: 1; /* Input takes up all available space */ border-right: none; /* Merge the borders visually */ border-top-right-radius: 0; border-bottom-right-radius: 0; /* Ensure padding/height consistency (0.75rem padding top/bottom is 44px total height for 16px font) */ padding: 0.75rem 1rem; font-size: 1rem; height: auto; /* Let padding define height */ } /* Style the Password Reveal Button */ .password-input-wrapper .btn-password-toggle { /* New button class for clarity */ display: flex; align-items: center; justify-content: center; /* Explicitly match the input field's height definition */ padding: 0.75rem 1rem; border: 1px solid var(--clr-border); background-color: var(--clr-background-light); color: var(--clr-text-secondary); border-left: none; /* Only need 3 sides of border */ border-radius: 6px; border-top-left-radius: 0; border-bottom-left-radius: 0; cursor: pointer; transition: all 0.2s; /* Ensure icon size is consistent */ line-height: 1; font-size: 1.1rem; } .password-input-wrapper .btn-password-toggle:hover { color: var(--clr-primary); background-color: var(--clr-hover-bg); } .auth-container .input-group .btn-outline-secondary:hover { color: var(--clr-primary); background-color: var(--clr-hover-bg); } .auth-container .input-group .btn-outline-secondary i { /* Ensure the icon itself is not causing wraps */ line-height: 1; font-size: 1.1rem; } .auth-container .signup-label { text-align: left; } .auth-container .form-text { display: block; margin-top: 0.5rem; font-size: 0.9rem; color: var(--clr-text-secondary) !important; text-align: left; } .auth-container .form-group { margin-bottom: 1.5rem; } /* Register Button (Reuse btn-login styles) */ .auth-container .btn-register { width: 100%; padding: 0.75rem 1.5rem; margin-top: 2rem; /* Increased top margin for separation */ font-size: 1.1rem; font-weight: 700; background-color: var(--clr-primary); border: None; color: var(--clr-surface); border-radius: 6px; cursor: pointer; transition: background-color 0.2s, transform 0.2s; } .auth-container .btn-register:hover { background-color: var(--clr-primary-light); transform: translateY(-1px); }