/* ======================================================================== // === MAIN STYLESHEET FOR ART OF MENTALISM === // === This file contains all styling for the main app layout, === // === themes, and reusable UI components. === // ======================================================================== */ /* ======================================================================== // --- 1. THEME & ROOT VARIABLE DEFINITIONS --- // ======================================================================== */ /* * Defines color variables for both dark and light themes. * The theme is applied to the tag using the `data-theme` attribute. */ /* Dark Theme (Default) */ body[data-theme='dark'] { --bg-color: #0f0f1a; --card-bg: rgba(255, 255, 255, 0.07); --text-color: #e0e0e0; --container-before-bg: rgba(15, 15, 26, 0.7); --bottom-banner-bg: rgba(0, 0, 0, 0.25); --social-icon-color: #ccc; --border-color: rgba(255, 255, 255, 0.1); --iframe-header-bg: rgba(0,0,0,0.2); } /* Light Theme */ body[data-theme='light'] { --bg-color: #f0f2f5; --card-bg: #ffffff; --text-color: #333; --container-before-bg: rgba(255, 255, 255, 0.6); --bottom-banner-bg: #e9ecef; --social-icon-color: #555; --border-color: rgba(0, 0, 0, 0.1); --iframe-header-bg: #f8f9fa; } /* Global Root Variables (Unaffected by theme) */ :root { --primary-color: #9c27b0; --secondary-color: #00bcd4; } /* ======================================================================== // --- 2. GLOBAL & MAIN LAYOUT STYLES --- // ======================================================================== */ /* Basic setup for the entire page. */ body { font-family: 'Poppins', sans-serif; margin: 0; padding: 10px; background: var(--bg-color); color: var(--text-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; box-sizing: border-box; overflow: hidden; transition: background-color 0.3s ease, color 0.3s ease; } /* The main container for the app interface. */ .container { width: 100%; max-width: 420px; height: calc(100vh - 20px); background-size: cover; background-position: center; position: relative; border-radius: 24px; display: flex; flex-direction: column; overflow: hidden; } /* Glassmorphism effect overlay for the container. */ .container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--container-before-bg); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 24px; z-index: 1; transition: background-color 0.3s ease; } /* Wraps all page content to sit above the glass effect. */ .page-wrapper { position: relative; z-index: 2; flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; } /* The main scrollable area for page content. */ .scroll-content { flex-grow: 1; overflow-y: auto; padding: 20px 20px 0 20px; /* ‼️ CRITICAL FIX: This prevents padding from causing horizontal overflow. */ box-sizing: border-box; } /* Custom scrollbar styling. */ .scroll-content::-webkit-scrollbar { width: 6px; } .scroll-content::-webkit-scrollbar-track { background: transparent; } .scroll-content::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; } /* ======================================================================== // --- 3. STANDARD REUSABLE COMPONENTS (HEADER, BANNER, MENU) --- // ======================================================================== */ /* Header section containing logo and tagline. */ .header { margin-bottom: 25px; text-align: center; } .logo img { max-width: 180px; height: auto; display: block; margin: 0 auto 10px; } .tagline { font-size: 1em; color: var(--secondary-color); text-shadow: 0 0 8px var(--secondary-color); } /* Breadcrumb navigation for sub-pages. */ .breadcrumb { margin-top: 15px; font-size: 0.9em; color: var(--secondary-color); } .breadcrumb a { color: var(--secondary-color); text-decoration: none; transition: color 0.2s ease; } .breadcrumb a:hover { color: #fff; } .breadcrumb .separator { margin: 0 8px; color: rgba(255, 255, 255, 0.5); } /* Horizontally scrolling offer banner. */ .offer-banner-container { width: 100%; height: 80px; overflow: hidden; border-radius: 16px; margin-bottom: 20px; } .offer-banner-scroll { display: flex; width: max-content; animation: scrollBanner 30s linear infinite; } .offer-banner-scroll img { height: 80px; width: auto; margin-right: 15px; border-radius: 12px; cursor: pointer; object-fit: cover; transition: transform 0.2s ease-in-out; } .offer-banner-scroll img:active { transform: scale(0.98); } @keyframes scrollBanner { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Main content area wrapper. */ main { padding-bottom: 20px; } /* Default icon-based menu grid. */ .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: 10px; margin-bottom: 15px; } .menu-item { background: var(--card-bg); border-radius: 15px; padding: 15px 10px; cursor: pointer; text-decoration: none; color: var(--text-color); display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; border: 1px solid transparent; transition: all 0.3s ease; } .menu-item:hover { transform: translateY(-5px); border-color: var(--secondary-color); box-shadow: 0 0 20px rgba(0, 188, 212, 0.4); } .menu-item .icon { font-size: 38px; width: 40px; height: 40px; margin-bottom: 10px; color: var(--secondary-color); text-shadow: 0 0 5px var(--secondary-color); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .menu-item:hover .icon { color: #fff; text-shadow: 0 0 10px #fff; } body[data-theme='light'] .menu-item:hover .icon { color: var(--primary-color); text-shadow: none; } .menu-item h3 { margin: 0; font-size: 0.85em; font-weight: 600; line-height: 1.2; text-align: center; } /* ======================================================================== // --- 4. FOOTER & THEME SWITCHER --- // ======================================================================== */ .bottom-banner { flex-shrink: 0; padding: 12px 10px; background: var(--bottom-banner-bg); border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .theme-switcher { display: flex; align-items: center; gap: 8px; padding-left: 10px; } .theme-switcher .fa-sun { color: #f1c40f; } .theme-switcher .fa-moon { color: var(--social-icon-color); } .switch { position: relative; display: inline-block; width: 44px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #555; transition: .4s; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; } input:checked + .slider { background-color: var(--primary-color); } input:checked + .slider:before { transform: translateX(20px); } .slider.round { border-radius: 24px; } .slider.round:before { border-radius: 50%; } .social-icons { display: flex; justify-content: space-around; align-items: center; flex-grow: 1; } .social-icons a { color: var(--social-icon-color); text-decoration: none; transition: all 0.3s ease; } .social-icons a:hover { color: #fff; transform: scale(1.1); } body[data-theme='light'] .social-icons a:hover { color: var(--primary-color); } .social-icons i { font-size: 24px; vertical-align: middle; } /* ======================================================================== // --- 5. IFRAME CONTAINER & OVERLAY (ORIGINAL) --- // ======================================================================== */ /* Styles for the iframe container used to display internal pages. */ #content-display { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); border-radius: 24px; display: none; /* Initially hidden */ flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform 0.4s ease-in-out; z-index: 100; } #content-display.active { display: flex; transform: translateX(0); } #iframe-header { display: flex; align-items: center; padding: 10px 15px; background: var(--iframe-header-bg); flex-shrink: 0; border-bottom: 1px solid var(--border-color); transition: all 0.3s ease; } .iframe-nav-button { background: none; border: none; color: var(--text-color); cursor: pointer; padding: 5px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background-color 0.2s ease; } .iframe-nav-button:hover { background-color: rgba(0, 188, 212, 0.1); } .iframe-nav-button i { font-size: 20px; } #iframe-header .page-title { flex-grow: 1; font-size: 1.1em; font-weight: 600; text-align: center; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 10px; } .iframe-nav-controls { display: flex; align-items: center; gap: 5px; } .header-logo { width: 30px; height: 30px; margin-left: auto; } #content-iframe { border: none; width: 100%; flex-grow: 1; background-color: transparent; } /* ======================================================================== // --- 6. IMAGE MODAL POPUP (ORIGINAL) --- // ======================================================================== */ .image-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; animation: fadeIn 0.3s ease; } .image-modal-overlay.active { display: flex; } .image-modal-content { position: relative; max-width: 90%; max-height: 90%; } .image-modal-content img { max-width: 100%; max-height: 100%; border-radius: 10px; object-fit: contain; } .image-modal-close { position: absolute; top: 15px; right: 15px; color: #fff; font-size: 30px; cursor: pointer; background: rgba(0, 0, 0, 0.5); border-radius: 50%; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ======================================================================== // --- 7. RESPONSIVE ADJUSTMENTS --- // ======================================================================== */ @media (max-width: 600px) { body { padding: 0; } .container { border-radius: 0; height: 100vh; } #content-display { border-radius: 0; } .image-modal-close { top: 10px; right: 10px; font-size: 24px; width: 35px; height: 35px; } } /* ======================================================================== // === ✅ 8. NEW REUSABLE UI COMPONENTS (ADDED) === // ======================================================================== */ /* --- 8.1. Hero Banner (For specific pages like Courses) --- */ .hero-banner { width: 100%; height: 220px; border-radius: 16px; background-size: cover; background-position: center; margin-bottom: 25px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero-banner::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.1)); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; color: #fff; padding: 20px; } .hero-title { font-size: 1.8em; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,0.8); margin: 0 0 5px 0; } .hero-subtitle { font-size: 1em; font-weight: 400; text-shadow: 0 1px 8px rgba(0,0,0,0.8); margin: 0; } /* --- 8.2. Responsive Video Container --- */ .video-container { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ border-radius: 16px; margin-bottom: 25px; background: #000; border: 1px solid var(--border-color); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* --- 8.3. Content Card (Image on top, Title below) --- */ .content-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 cards per row */ gap: 15px; margin-bottom: 20px; } .content-card { background-color: var(--card-bg); border-radius: 16px; overflow: hidden; /* Crucial for keeping the image inside the rounded corners */ text-decoration: none; color: var(--text-color); display: flex; flex-direction: column; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .content-card:hover { transform: translateY(-8px); /* Lifts the card up on hover */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); border-color: var(--secondary-color); } .card-image-container { width: 100%; aspect-ratio: 16 / 10; /* Gives a consistent shape to the image area */ overflow: hidden; } .card-image-container img { width: 100%; height: 100%; object-fit: cover; /* This makes the image cover the container without distortion or overflow */ transition: transform 0.4s ease-out; } .content-card:hover .card-image-container img { transform: scale(1.1); /* Subtle zoom effect on hover */ } .card-content { padding: 15px; text-align: center; border-top: 1px solid var(--border-color); } .card-content h3 { margin: 0; font-size: 0.9em; font-weight: 600; } /* --- 8.4. Decorative Video Frame Component (NEW) --- */ /* A stylish, reusable container that makes videos look like they are in a digital frame. */ .video-frame { position: relative; background-color: rgba(0,0,0,0.3); /* Dark, semi-transparent background for the frame */ padding: 50px 15px 15px 15px; /* Top padding is larger to make space for the title bar */ border-radius: 16px; border: 1px solid var(--border-color); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.1); margin-bottom: 25px; } /* The title bar at the top of the frame */ .video-frame::before { content: attr(data-title); /* Pulls the title text from the 'data-title' HTML attribute */ position: absolute; top: 0; left: 0; right: 0; padding: 12px 90px; background-color: rgba(30, 30, 40, 0.5); /* A slightly different background for the title bar */ border-bottom: 1px solid var(--border-color); color: var(--secondary-color); text-shadow: 0 0 5px var(--secondary-color); font-weight: 600; font-size: 0.9em; text-align: center; border-top-left-radius: 16px; border-top-right-radius: 16px; } /* Decorative "window control" dots on the title bar */ .video-frame::after { content: ''; position: absolute; top: 16px; left: 18px; width: 10px; height: 10px; background-color: #ff5f56; /* Red dot */ border-radius: 50%; /* This creates the other two dots using box-shadow */ box-shadow: 16px 0 0 #ffbd2e, 32px 0 0 #27c93f; /* Yellow and Green dots */ } /* The inner container that holds the actual video iframe */ .video-frame .video-container-inner { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */ overflow: hidden; background: #000; border-radius: 6px; /* Slightly rounded corners for the "screen" */ } /* The iframe itself */ .video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } /* ======================================================================== // === ✅ 9. PAGE-SPECIFIC COMPONENTS === // ======================================================================== */ /* --- 9.1. Styles for the Quiz Container --- */ #quiz-container { width: 100%; margin: 0 auto; background: var(--card-bg); padding: 25px; border-radius: 20px; border: 1px solid var(--border-color); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); box-sizing: border-box; } #progress-bar-container { width: 100%; height: 8px; background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; margin-bottom: 25px; } #progress-bar { height: 100%; width: 0%; background-color: var(--secondary-color); border-radius: 4px; transition: width 0.4s ease-in-out; } .question { font-size: 1.2em; font-weight: 600; margin-bottom: 20px; line-height: 1.4; text-align: center; } .options button { display: block; width: 100%; padding: 12px; margin: 8px 0; font-size: 1em; font-weight: 500; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background-color: rgba(255, 255, 255, 0.05); color: var(--text-color); text-align: left; transition: all 0.3s ease; } .options button:not(:disabled):hover { background-color: rgba(0, 188, 212, 0.2); border-color: var(--secondary-color); } .options button.correct { background: #27ae60 !important; border-color: #27ae60 !important; color: white; box-shadow: 0 0 15px rgba(39, 174, 96, 0.5); } .options button.wrong { background: #e74c3c !important; border-color: #e74c3c !important; color: white; box-shadow: 0 0 15px rgba(231, 76, 60, 0.5); } #next-btn, #restart-btn { margin-top: 20px; padding: 14px 25px; width: 100%; font-size: 1.1em; font-weight: bold; background: var(--primary-color); color: white; border: none; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 0 20px rgba(156, 39, 176, 0.5); } #next-btn { display: none; } #next-btn:hover, #restart-btn:hover { transform: translateY(-3px); box-shadow: 0 0 30px rgba(156, 39, 176, 0.8); } #result-container { text-align: center; } #result-container .fa-trophy { font-size: 5em; color: #f1c40f; text-shadow: 0 0 20px #f1c40f; } #result-container h2 { font-size: 2em; margin: 15px 0 10px; } #result-text { font-size: 1.2em; } #final-score { font-size: 2.5em; font-weight: bold; color: #27ae60; margin-bottom: 25px; }