/* Basic Reset & Fonts */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; /* Base font size */ } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; line-height: 1.7; /* Increased line height */ color: #495057; /* Slightly softer black */ background-color: #fdfdff; /* Very light off-white */ display: flex; flex-direction: column; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Import Inter font (Optional but recommended for modern look) - Add to in app.blade.php if possible, or use @import */ /* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); */ a { color: #007bff; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #0056b3; text-decoration: none; /* Remove underline on hover by default */ } img { max-width: 100%; height: auto; display: block; /* Remove bottom space */ } /* Container */ .container { width: 90%; max-width: 1140px; /* Slightly wider */ margin: 0 auto; padding: 0 15px; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-weight: 700; /* Bolder headings */ color: #343a40; /* Darker heading color */ margin-bottom: 0.75rem; line-height: 1.3; } h1 { font-size: 2.5rem; margin-bottom: 2rem; } /* Larger H1 */ h2 { font-size: 2rem; } h3 { font-size: 1.5rem; } /* === MODIFY this rule === */ .section-title { margin-bottom: 1rem; position: relative; padding-bottom: 0.8rem; display: inline-block; } .section-title::before { content: none; /* Odstranění původní modré čáry */ } .section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #0062cc, #5ca5ff); border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 123, 255, 0.15); } /* ====================================================== */ /* ================================= */ .section-subtitle { font-size: 1.1rem; color: #6c757d; max-width: 700px; /* Keep or adjust max-width */ margin-left: auto; /* ADD back */ margin-right: auto; /* ADD back */ margin-bottom: 2.5rem; } /* Header */ .site-header { background-color: #ffffff; padding: 1rem 0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); /* Slightly stronger shadow */ position: sticky; top: 0; z-index: 1000; border-bottom: 1px solid #e9ecef; } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.9rem; font-weight: 700; /* Make logo bolder */ color: #343a40; text-decoration: none; transition: color 0.3s ease; } .logo:hover { color: #007bff; /* Highlight on hover */ } .logo-subtitle { display: block; font-size: 0.75rem; /* Smaller subtitle */ color: #6c757d; font-weight: 500; /* Slightly bolder subtitle */ margin-top: -8px; /* Adjust spacing */ letter-spacing: 0.5px; } .main-navigation ul { list-style: none; display: flex; align-items: center; } .main-navigation li { margin-left: 1.8rem; /* Increase spacing */ } .main-navigation a { color: #495057; /* Match body text */ font-weight: 500; padding-bottom: 0.6rem; /* Increase padding for bigger click area */ border-bottom: 3px solid transparent; /* Thicker underline space */ transition: color 0.3s ease, border-color 0.3s ease; } .main-navigation a:hover, .main-navigation a.active { color: #007bff; border-bottom-color: #007bff; } .main-navigation a.social-link { border-bottom: none; padding-bottom: 0; /* Reset padding */ color: #6c757d; /* Icon color */ } .main-navigation a.social-link svg { stroke: currentColor; /* Use link color */ transition: color 0.3s ease; width: 22px; /* Slightly larger icons */ height: 22px; } .main-navigation a.social-link:hover { color: #007bff; } /* Mobile Menu Toggle */ .mobile-menu-toggle { display: none; background: none; border: none; font-size: 2rem; cursor: pointer; color: #343a40; } /* Main Content Area */ .main-content { flex-grow: 1; padding: 3rem 0 4rem 0; /* More vertical padding */ } .page-content h1 { text-align: center; /* Center main page title */ border-bottom: none; /* Remove default border */ margin-bottom: 3rem; /* More space after H1 */ } .content-section { padding: 3.5rem 0; /* Increase section padding */ border-bottom: 1px solid #e9ecef; /* Lighter separator */ } .content-section:last-child { border-bottom: none; } /* Background Gradient Section */ .bg-light-gradient { background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%); padding: 3.5rem 1.5rem; /* Keep padding */ margin: 2rem -15px; /* Adjust negative margin to match container padding */ border-top: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef; /* Removed border-radius for full-width feel */ } .text-center { text-align: center; } .lead { font-size: 1.25rem; /* Slightly larger lead */ color: #6c757d; /* Lighter lead text */ margin-bottom: 2rem; max-width: 750px; margin-left: auto; margin-right: auto; } /* Buttons */ .btn { display: inline-block; padding: 0.8rem 1.8rem; /* Larger padding */ font-size: 1rem; font-weight: 500; text-align: center; border-radius: 8px; /* More rounded */ cursor: pointer; transition: all 0.3s ease; /* Smooth transition */ border: 1px solid transparent; box-shadow: 0 4px 6px rgba(0, 123, 255, 0.1); /* Subtle shadow */ letter-spacing: 0.5px; } .btn-lg { padding: 1rem 2.2rem; font-size: 1.1rem; } .btn-primary { background-color: #007bff; color: #fff; border-color: #007bff; } .btn-primary:hover { background-color: #0056b3; border-color: #0056b3; color: #fff; transform: translateY(-2px); /* Slight lift on hover */ box-shadow: 0 6px 10px rgba(0, 123, 255, 0.2); /* Enhanced shadow */ } .btn:disabled { /* Keep disabled style */ } /* --- Homepage Specific --- */ .hero-section { padding: 4rem 0; /* More hero padding */ background: linear-gradient(135deg, rgba(240, 245, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%); /* Subtle diagonal gradient */ } .hero-content-wrapper { display: flex; align-items: center; gap: 3rem; } .hero-text { flex: 1; text-align: left; } .hero-image-container { flex: 0 0 45%; /* Give image slightly more space if needed */ perspective: 1500px; /* Add perspective for 3D effect */ position: relative; /* Needed for potential pseudo-elements later */ } .app-screenshot { border-radius: 18px; /* Slightly more rounded corners */ box-shadow: 0 15px 45px rgba(0, 0, 0, 0.15), /* Adjust shadow */ 0 5px 15px rgba(0, 0, 0, 0.1); /* --- Key Transformation --- */ transform: rotateY(-8deg) rotateX(3deg); /* Apply subtle 3D rotation */ transition: transform 0.5s ease, box-shadow 0.5s ease; /* Smooth transition on hover */ border: 1px solid rgba(0,0,0,0.05); /* Very subtle border */ } .app-screenshot:hover { transform: rotateY(-2deg) rotateX(1deg) scale(1.02); /* Reduce rotation and slightly scale up on hover */ box-shadow: 0 20px 55px rgba(0, 0, 0, 0.2), /* Enhance shadow on hover */ 0 8px 20px rgba(0, 0, 0, 0.15); } .hero-btn { margin-top: 1.5rem; } .app-availability { font-size: 0.9rem; color: #6c757d; margin-top: 1rem; } /* Floating animation for screenshot */ @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-10px); } 100% { transform: translatey(0px); } } /* Features Section */ .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; /* More gap */ margin-top: 3rem; } .feature-item { background-color: #fff; padding: 2rem; /* More padding */ border-radius: 12px; /* More rounded */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Subtle shadow */ text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e9ecef; /* Light border */ } .feature-item:hover { transform: translateY(-5px); /* Lift effect */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Stronger shadow */ } .feature-icon { width: 70px; /* Larger icon circle */ height: 70px; border-radius: 50%; margin: 0 auto 1.5rem auto; /* More space below icon */ display: flex; align-items: center; justify-content: center; color: #fff; /* White icon */ } .feature-icon svg { width: 32px; /* Adjust icon size */ height: 32px; } /* Specific icon colors */ .icon-blue { background-color: #007bff; } .icon-green { background-color: #28a745; } /* Bootstrap success green */ .icon-orange { background-color: #fd7e14; } /* Bootstrap orange */ /* For Whom Section */ .for-whom-content { display: flex; align-items: center; gap: 3rem; margin-top: 2rem; } .for-whom-text { flex: 1; } .for-whom-image { flex: 0 0 45%; } .styled-list { list-style: none; padding-left: 0; margin-top: 1rem; } .styled-list li { display: flex; align-items: center; margin-bottom: 0.8rem; font-size: 1.05rem; /* Slightly larger list items */ } .styled-list svg { margin-right: 0.8rem; color: #28a745; /* Green checkmark */ flex-shrink: 0; /* Prevent icon shrinking */ width: 20px; height: 20px; } .styled-list.compact li { margin-bottom: 0.5rem; font-size: 1rem;} .styled-list.compact svg { width: 18px; height: 18px; margin-right: 0.6rem;} .illustration-image { max-width: 100%; height: auto; padding: 1rem; /* Add some padding around illustrations */ } /* Download / CTA Section */ .cta-section { background-color: #007bff; /* Use primary color */ color: #fff; padding: 3.5rem 1.5rem; margin: 2rem -15px; /* Match container padding */ border-radius: 12px; /* Rounded corners for CTA */ } .cta-section h2, .cta-section p, .cta-section a { color: #fff; /* White text on blue */ } .cta-section .section-title::after { background-color: #fff; /* White underline */ } .cta-section a:hover { color: #e0e0e0; /* Lighter white on hover */ } .store-badges { margin: 2rem 0; } .badge-placeholder { display: inline-flex; /* Use flex for icon alignment */ align-items: center; gap: 0.5rem; /* Space between icon and text */ padding: 0.8rem 1.5rem; background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white */ color: #fff; border-radius: 8px; margin: 0.5rem; font-style: normal; /* Remove italic */ font-weight: 500; border: 1px solid rgba(255, 255, 255, 0.2); transition: background-color 0.3s ease; } .badge-placeholder:hover { background-color: rgba(255, 255, 255, 0.25); } .badge-placeholder svg { width: 22px; height: 22px; /* Adjust icon size */ } .contact-prompt { margin-top: 1rem; font-size: 1rem; } /* --- About Us Specific --- */ .about-story, .partners-intro { display: flex; align-items: center; gap: 3rem; } .about-text, .partners-text { flex: 1; } .about-image, .partners-image { flex: 0 0 40%; } .mission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-top: 3rem; text-align: center; } .mission-item { padding: 1.5rem; /* background-color: #fff; */ /* Optional background */ /* border-radius: 8px; */ /* box-shadow: 0 3px 8px rgba(0,0,0,0.04); */ } .mission-item h3 { font-size: 1.2rem; margin: 0.8rem 0 0.5rem 0; color: #343a40; } .mission-item p { font-size: 0.95rem; color: #6c757d; } .mission-icon { color: #007bff; /* Icon color */ margin-bottom: 0.5rem; } .mission-icon svg { width: 36px; height: 36px; } /* Larger mission icons */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust size */ gap: 2rem; text-align: center; margin-top: 3rem; } .team-member { background-color: #fff; padding: 2rem 1.5rem; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.06); transition: transform 0.3s ease, box-shadow 0.3s ease; } .team-member:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); } .team-photo-placeholder { width: 100px; height: 100px; background-color: #e9ecef; border-radius: 50%; margin: 0 auto 1rem auto; display: flex; align-items: center; justify-content: center; color: #adb5bd; /* Lighter icon color */ border: 3px solid #fff; /* White border around circle */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */ } .team-photo { /* If using actual images */ width: 100px; height: 100px; border-radius: 50%; margin: 0 auto 1rem auto; object-fit: cover; /* Ensure image covers circle */ border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .team-member strong { display: block; font-size: 1.1rem; color: #343a40; margin-bottom: 0.2rem; } .team-member small { color: #007bff; font-weight: 500; } /* Role color */ /* --- Partners Specific --- */ .partners-logos { display: flex; flex-wrap: wrap; gap: 2.5rem; /* More space between logos */ align-items: center; justify-content: center; margin-top: 3rem; padding: 2rem 0; border-top: 1px dashed #e0e0e0; /* Dashed separator */ border-bottom: 1px dashed #e0e0e0; } .partner-logo-item { text-align: center; /* Center logo if needed */ } .partner-logo-actual { max-height: 70px; /* Adjust max height */ max-width: 160px; /* Adjust max width */ width: auto; height: auto; object-fit: contain; filter: grayscale(80%); /* Start grayscale */ opacity: 0.8; transition: filter 0.3s ease, opacity 0.3s ease; } .partner-logo-actual:hover { filter: grayscale(0%); /* Full color on hover */ opacity: 1; } .partner-logo-placeholder { padding: 1.5rem 2.5rem; background-color: #f8f9fa; /* Lighter placeholder */ color: #adb5bd; border-radius: 8px; font-style: italic; min-height: 70px; min-width: 160px; display: flex; align-items: center; justify-content: center; border: 1px dashed #ced4da; /* Dashed border */ } /* --- Contact Specific --- */ .contact-section-wrapper { display: flex; align-items: flex-start; /* Align items top */ gap: 3rem; } .contact-details { flex: 1; } .contact-image { flex: 0 0 40%; margin-top: 2rem; /* Align image slightly lower */ } .contact-info { margin-top: 2rem; } .contact-item { display: flex; align-items: center; /* Align icon and text block vertically */ margin-bottom: 1.2rem; /* Slightly reduce space between items */ padding: 0.8rem 1rem; /* Reduce padding slightly */ background-color: #f8f9fa; border-radius: 8px; border: 1px solid #e9ecef; } .contact-icon { color: #007bff; margin-right: 1rem; /* Adjust space between icon and text */ flex-shrink: 0; width: 24px; /* Adjust icon size if needed */ height: 24px; } .contact-text { /* Ensures the text div takes up available space */ flex-grow: 1; } .contact-text strong { display: block; /* Keep it as block to stack vertically */ font-size: 0.85rem; /* Make label slightly smaller */ color: #6c757d; /* Gray label */ margin-bottom: 0.1rem; /* Reduce space below label */ text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; /* Make label slightly less bold */ } .contact-text a { font-weight: 500; font-size: 1.05rem; /* Keep value font size reasonable */ color: #343a40; /* Darker link text */ display: inline-block; /* Ensure it behaves well */ line-height: 1.3; /* Adjust line height for the link */ } .contact-text a:hover { color: #007bff; /* Blue on hover */ } /* Placeholder Styles (General) */ .placeholder-image { display: flex; align-items: center; justify-content: center; background-color: #e9ecef; color: #adb5bd; /* Lighter text */ border-radius: 10px; /* Match other roundness */ font-style: italic; text-align: center; padding: 2rem; /* More padding */ border: 1px dashed #ced4da; /* Dashed border */ font-size: 0.9rem; } .medium-placeholder { min-height: 200px; } .large-placeholder { min-height: 300px; } .tall-placeholder { min-height: 350px; } /* Footer */ .site-footer { background-color: #343a40; color: #adb5bd; /* Lighter gray text */ padding: 2.5rem 0; /* More footer padding */ margin-top: auto; text-align: center; font-size: 0.9rem; border-top: 4px solid #007bff; /* Accent line */ } .site-footer p { margin-bottom: 0.5rem; line-height: 1.5; } .site-footer p:last-child { margin-bottom: 0; } .site-footer a { color: #f8f9fa; /* Brighter links in footer */ font-weight: 500; } .site-footer a:hover { color: #007bff; /* Primary color on hover */ text-decoration: underline; } /* --- Responsive Adjustments --- */ @media (max-width: 992px) { .hero-content-wrapper, .about-story, .partners-intro, .contact-section-wrapper, .for-whom-content { flex-direction: column; /* Stack vertically */ text-align: center; /* Center text when stacked */ } .hero-text, .about-text, .partners-text, .contact-details, .for-whom-text { text-align: center; /* Ensure text is centered */ } .hero-image-container, .about-image, .partners-image, .contact-image, .for-whom-image { flex-basis: auto; /* Reset flex basis */ width: 80%; /* Limit image width when stacked */ max-width: 450px; /* Max width */ margin: 2rem auto 0 auto; /* Center image */ } .page-content h1 { font-size: 2.2rem; } h2 { font-size: 1.8rem; } .section-subtitle { margin-bottom: 1.5rem; } } @media (max-width: 768px) { html { font-size: 15px; } /* Slightly smaller base font */ .main-navigation ul { display: none; } /* Hide nav */ .mobile-menu-toggle { display: block; } /* Show hamburger */ .header-content { /* Adjust padding if needed */ } .features-grid, .team-grid, .mission-grid { grid-template-columns: 1fr; /* Single column */ gap: 1.5rem; } .bg-light-gradient, .cta-section { margin-left: -15px; margin-right: -15px; border-radius: 0; /* Remove radius on mobile */ padding: 2.5rem 1rem; } .page-content h1 { font-size: 2rem; margin-bottom: 2rem; } .hero-section { padding: 2.5rem 0; } .lead { font-size: 1.1rem; } .partners-logos { gap: 1.5rem; } .partner-logo-actual { max-height: 50px; } .contact-info { margin-top: 1.5rem; } .contact-item { flex-direction: column; text-align: center; gap: 0.5rem; } .contact-icon { margin-right: 0; margin-bottom: 0.5rem; } .contact-text a { font-size: 1rem; } .main-navigation ul.mobile-nav-open { display: flex; /* Override 'display: none' to show the menu */ flex-direction: column; /* Stack links vertically */ position: absolute; /* Position it absolutely relative to the header */ top: 100%; /* Place it right below the header */ left: 0; width: 100%; background-color: #ffffff; /* White background */ padding: 1rem 0; /* Add some vertical padding */ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add shadow */ border-top: 1px solid #e9ecef; /* Separator line */ /* Optional: Animate entry */ /* animation: slideDown 0.3s ease-out; */ } /* Style for individual links in the open mobile menu */ /* Add this rule inside or after @media (max-width: 768px) */ .main-navigation ul.mobile-nav-open li { margin-left: 0; /* Remove left margin */ width: 100%; /* Make list items full width */ text-align: center; /* Center the link text */ padding: 0.5rem 0; /* Add padding to list items */ } /* Add this rule inside or after @media (max-width: 768px) */ .main-navigation ul.mobile-nav-open li a { padding: 0.5rem 1rem; /* Padding on the link itself */ display: block; /* Make link fill the list item */ border-bottom: none; /* Remove desktop underline effect */ width: 100%; } /* Add this rule inside or after @media (max-width: 768px) */ .main-navigation ul.mobile-nav-open li a:hover, .main-navigation ul.mobile-nav-open li a.active { background-color: #f8f9fa; /* Subtle background on hover/active */ color: #0056b3; /* Darker blue */ } /* Instagram link in mobile */ /* Add this rule inside or after @media (max-width: 768px) */ .main-navigation ul.mobile-nav-open li a.social-link { display: inline-flex; /* Keep icon centered if needed */ width: auto; /* Don't force full width */ padding: 0.5rem; } /* Add this rule inside or after @media (max-width: 768px) */ .main-navigation ul.mobile-nav-open li a.social-link svg { width: 24px; height: 24px; /* Maybe slightly bigger */ } } /* Screen reader only text */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Showcase / Gallery Specific --- */ .screenshot-gallery { display: grid; /* Adjust minmax width based on your screenshot aspect ratio and desired size */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; /* Spacing between items */ margin-top: 3rem; margin-bottom: 3rem; } .screenshot-item { background-color: #fff; border-radius: 10px; overflow: hidden; /* Ensure image corners are clipped by border-radius */ box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid #e9ecef; display: flex; /* Use flex to manage content */ flex-direction: column; /* Stack image and caption vertically */ } .screenshot-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); } .screenshot-item img { width: 100%; /* Make image fill the container width */ height: auto; /* Maintain aspect ratio */ display: block; flex-shrink: 0; /* Prevent image from shrinking */ } /* Ensure placeholder divs also look good */ .screenshot-item .placeholder-image { width: 100%; border-radius: 0; /* Remove placeholder radius */ border: none; /* Remove placeholder border */ border-bottom: 1px solid #e9ecef; /* Add bottom border like image */ flex-grow: 1; /* Allow placeholder to take height */ aspect-ratio: 9/16; /* Suggest a mobile aspect ratio (adjust if needed) */ height: auto; /* Override fixed height */ min-height: 300px; /* Set a minimum height */ } .screenshot-item .caption { padding: 1rem 1.2rem; font-size: 0.9rem; color: #555; text-align: center; border-top: 1px solid #eee; /* Separator line */ margin-top: auto; /* Push caption to bottom if image is short */ background-color: #f8f9fa; /* Slight background for caption area */ } /* Adjust grid for larger screens if desired */ @media (min-width: 992px) { .screenshot-gallery { grid-template-columns: repeat(3, 1fr); /* Force 3 columns on large screens */ } } @media (min-width: 1200px) { .screenshot-gallery { grid-template-columns: repeat(4, 1fr); /* Force 4 columns on very large screens */ } } /* --- Download / Warning Section Styles --- */ .warning-section { padding-top: 1rem; /* Reduce top padding */ padding-bottom: 1rem; /* Reduce bottom padding */ border-bottom: none; /* Remove border if it's the last content section before button */ } .alert { padding: 1.5rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 0.5rem; /* Softer corners */ } .alert.mx-auto { display: block; /* Explicitly ensure it's block */ /* mx-auto should already apply margins, but we can be explicit */ margin-left: auto; margin-right: auto; } .alert-heading { color: inherit; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; /* Space below heading */ font-size: 1.4rem; /* Slightly larger heading */ } .alert-heading svg { width: 28px; /* Adjust icon size */ height: 28px; } .alert ul { padding-left: 1.5rem; /* Indent list */ margin-bottom: 0; /* Remove default bottom margin */ } .alert ul li { margin-bottom: 0.5rem; /* Space between list items */ } .alert-warning { color: #856404; /* Dark yellow/brown text */ background-color: #fff3cd; /* Light yellow background */ border-color: #ffeeba; /* Lighter yellow border */ } .alert-warning .alert-link { color: #533f03; /* Darker link color */ font-weight: bold; text-decoration: underline; } .alert-warning .alert-link:hover { color: #211901; } .download-button-section { padding-top: 2rem; border-top: 1px solid #e9ecef; /* Add separator if warning section border was removed */ } .btn-success { color: #fff; background-color: #28a745; border-color: #28a745; box-shadow: 0 4px 6px rgba(40, 167, 69, 0.15); } .btn-success:hover { color: #fff; background-color: #218838; border-color: #1e7e34; box-shadow: 0 6px 10px rgba(40, 167, 69, 0.25); } .download-btn svg { margin-right: 0.5em; /* Space between icon and text */ vertical-align: middle; /* Align icon better with text */ margin-top: -2px; /* Fine-tune vertical alignment */ } /* --- End Download --- */ /* --- End Showcase --- */ .text-center.section-title { margin-left: auto; margin-right: auto; display: table; text-align: center; } /* --- Password Form Styles --- */ .password-form { max-width: 400px; /* Limit form width */ margin-left: auto; margin-right: auto; } /* Helper to visually hide labels but keep for screen readers */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .form-control { display: block; width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.375rem; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; } .form-control-lg { padding: 1rem 1.25rem; font-size: 1.25rem; border-radius: 0.5rem; } .form-control:focus { color: #495057; background-color: #fff; border-color: #80bdff; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); } .is-invalid { border-color: #dc3545; /* Red border for error */ } .invalid-feedback { color: #dc3545; /* Red text for error */ font-size: 0.875em; } .d-block { display: block !important; } /* Ensure error message shows */ .mt-2 { margin-top: 0.5rem !important; } .mt-3 { margin-top: 1rem !important; } .mt-4 { margin-top: 1.5rem !important; } .mb-3 { margin-bottom: 1rem !important; } .mb-4 { margin-bottom: 1.5rem !important; } .text-danger { color: #dc3545 !important; } .alert-success { color: #0f5132; background-color: #d1e7dd; border-color: #badbcc;} .alert-danger { color: #842029; background-color: #f8d7da; border-color: #f5c2c7;} /* --- End Password Form --- */