@charset "UTF-8"; /** * KAIZEN GRID SYSTEM & SCROLL ANIMATIONS * Forge Creation Digital * Grid layout + scroll-based animations controlled by kaizen-grid.js * ================================================== */ /* ===== PAGE CONTAINER & COLOR SWITCHING ===== */ /* Global color system now lives on so header/menu/logo also switch */ body { background-color: #000; color: #fff; transition: background-color 0.6s ease, color 0.6s ease; } /* When a white section is active */ body.color-switch { background-color: #fff; color: #000; } /* Page container is now layout-only */ .page-container { max-width: 100%; padding: 0 0px; box-sizing: border-box; min-height: 100vh; } /* ===== RESPONSIVE DESKTOP/MOBILE VISIBILITY ===== */ .kaizen-mobile { display: none; } @media (max-width: 900px) { .kaizen-mobile { display: block !important; } .kaizen-desktop { display: none !important; } } /* ===== KAIZEN SECTION LAYOUT ===== */ /* Center content vertically and horizontally */ .kaizen-section { display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 1500px; margin: 0 auto; padding: 0 20px; } /* ===== STICKY SCROLL SECTIONS ===== */ /* For sequential video sections that stick then get pushed away */ .kaizen-section-sticky { position: sticky; top: 0; min-height: 100vh; z-index: 10; transition: opacity 0.6s ease; overflow: hidden; /* required so overlay doesn’t spill */ } .kaizen-section-sticky .fade-overlay { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; z-index: 50; /* Above video + content */ mix-blend-mode: normal; } /* Stack the sticky sections with decreasing z-index so later sections push earlier ones away */ .kaizen-section-sticky:nth-child(1) { z-index: auto; } .kaizen-section-sticky:nth-child(2) { z-index: auto; } .kaizen-section-sticky:nth-child(3) { z-index: auto; } .kaizen-section-sticky:nth-child(4) { z-index: auto; } .kaizen-section-sticky:nth-child(5) { z-index: auto; background-color: #000; } /* No class-based fade — JS controls opacity directly */ .kaizen-section-sticky { transition: opacity 0.6s ease; } /* Top section variant - proper spacing without gaps */ .kaizen-section-top { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; max-width: 1500px; margin: 0 auto; padding: 100px 20px 80px 20px; /* top, right, bottom, left */ min-height: auto !important; /* Override the grid min-height */ } /* Universal last section utility */ .last-section { min-height: 600px !important; } /* Laptop */ @media (max-width: 1200px) { .last-section { min-height: 400px !important; } } /* Tablet */ @media (max-width: 1024px) { .last-section { min-height: 300px !important; } } /* Mobile */ @media (max-width: 767px) { .last-section { min-height: 250px !important; } } /* ===== TYPOGRAPHY STYLES ===== */ /* Title Styles */ .title { font-size: clamp(2rem, 5vw, 7.5rem); margin-bottom: 2rem; overflow: hidden; text-overflow: ellipsis; text-align: center; line-height: 1.2; } /* Responsive adjustments for Title */ @media (max-width: 1200px) { .title { font-size: clamp(2rem, 4.5vw, 6rem); } } @media (max-width: 900px) { .title { font-size: clamp(1.5rem, 4vw, 4.5rem); padding: 0 10px; } } @media (max-width: 600px) { .title { font-size: clamp(1.25rem, 3.5vw, 3.5rem); padding: 0 5px; white-space: normal; } } .kaizen-col { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; } /* Default H3 Styling for kaizen-col */ .kaizen-col h3 { font-size: 5rem; /* Default font size for desktop */ margin-bottom: 1rem; color: #333; /* Default color */ } /* Mobile-specific H3 Styling for kaizen-col */ @media (max-width: 900px) { .kaizen-col h3 { font-size: 3.5rem; /* Adjusted font size for mobile */ margin-bottom: 0.75rem; color: #111; /* Slightly darker color for mobile */ } } /* Default (Desktop/Laptop) */ .kaizen-title { color: #e91e26; font-size: 2.5em; } /* Tablet (768px to 1024px) */ @media (max-width: 1024px) and (min-width: 768px) { .kaizen-title { font-size: 2em; } } /* Mobile (up to 767px) */ @media (max-width: 767px) { .kaizen-title { font-size: 1.5em; } } /* ===== KAIZEN GRID SETTINGS ===== */ .kaizen-group { display: grid; grid-gap: 10px; } .kaizen-grid-1 { grid-template-columns: 1fr; min-height: 1000px; } .kaizen-grid-2 { grid-template-columns: repeat(2, 1fr); min-height: 1000px; } .kaizen-grid-3 { grid-template-columns: repeat(3, 1fr); min-height: 1000px; } .kaizen-grid-4 { grid-template-columns: repeat(4, 1fr); min-height: 1000px; } .kaizen-grid-5 { grid-template-columns: repeat(5, 1fr); min-height: 1000px; } .kaizen-grid-6 { grid-template-columns: repeat(6, 1fr); min-height: 1000px; } /* Laptop adjustments */ @media (max-width: 1200px) { .kaizen-grid-1, .kaizen-grid-2, .kaizen-grid-3, .kaizen-grid-4, .kaizen-grid-5, .kaizen-grid-6 { min-height: 800px; } .kaizen-section-sticky:nth-child(5) { min-height: 500px; } } /* Tablet adjustments */ @media (max-width: 1024px) { .kaizen-grid-1, .kaizen-grid-2, .kaizen-grid-3, .kaizen-grid-4, .kaizen-grid-5, .kaizen-grid-6 { grid-template-columns: 1fr; /* Collapse to single column */ min-height: 600px; } .kaizen-col { width: 100%; padding: 0px !important; } .kaizen-col img { max-width: 90%; } .kaizen-section-sticky:nth-child(5) { min-height: 400px !important; } } /* Mobile adjustments */ @media (max-width: 767px) { .kaizen-grid-1, .kaizen-grid-2, .kaizen-grid-3, .kaizen-grid-4, .kaizen-grid-5, .kaizen-grid-6 { min-height: 450px; grid-template-columns: 1fr; /* Collapse to single column */ } .kaizen-col { width: 100%; padding: 0px !important; } .kaizen-col img { max-width: 90%; } .kaizen-section-sticky:nth-child(5) { min-height: 550px !important; grid-template-columns: 1fr; /* Collapse to single column */ } } /* ===== KAIZEN SCROLL ANIMATIONS ===== */ /* These work with kaizen-grid.js scroll detection */ /* Individual Element Animation Classes */ .anime { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .anime.fade-in-up { opacity: 1; transform: translateY(-10px); } .anime.fade-out-up { opacity: 0; transform: translateY(10px); } .anime.fade-in-down { opacity: 1; transform: translateY(10px); } .anime.fade-out-down { opacity: 0; transform: translateY(-10px); } /* Image Animation Classes */ .animeimage { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .animeimage.fade-in-up { opacity: 1; transform: translateY(-10px); } .animeimage.fade-out-up { opacity: 0; transform: translateY(10px); } .animeimage.fade-in-down { opacity: 1; transform: translateY(10px); } .animeimage.fade-out-down { opacity: 0; transform: translateY(-10px); } /* ===== PERFORMANCE OPTIMIZATIONS ===== */ .anime, .animeimage { will-change: transform, opacity; } /* ===== REDUCED MOTION SUPPORT ===== */ @media (prefers-reduced-motion: reduce) { .page-container, .anime, .animeimage { transition: none !important; } .anime, .animeimage { opacity: 1 !important; transform: none !important; } }