/* ========================================================================== GALERI (GALLERY) PAGE STYLES TABLE OF CONTENTS: 1. Global Styles ................................ Line 30 2. DateTime Container ........................... Line 45 3. Animations ................................... Line 100 4. Header Section with Badge .................... Line 145 5. Galeri Grid Wrapper .......................... Line 230 6. Galeri Card Styling .......................... Line 280 7. Image Wrapper & Hover Effects ................ Line 315 8. Content Area ................................. Line 350 9. Read More Button ............................. Line 410 10. Pagination .................................. Line 445 11. Modal Styles ................................ Line 510 12. Responsive: Tablet (≤992px) ................. Line 590 13. Responsive: Mobile (≤767px) ................. Line 630 14. Responsive: Small Mobile (≤575px) ........... Line 695 15. Responsive: Extra Small (≤400px) ............ Line 745 USAGE: - ✅ REUSABLE: DateTime, Header, Pagination, Modal - ⚠️ SEMI-REUSABLE: Gallery cards (adapt for portfolios/products) - ❌ PAGE SPECIFIC: 3-column grid layout DEPENDENCIES: - Bootstrap 5.x (via asetheadbtsrap.php) - Font Awesome 5.x - Google Fonts (Lato) File Size: ~600 lines Created: 2025-01-XX Last Updated: 2025-01-XX ========================================================================== */ /* ========================================================================== 1. GLOBAL STYLES PURPOSE: Page-level layout and font USED IN: element REUSABLE: YES ✅ ========================================================================== */ body { margin: 0 0 0 0; padding: 0; overflow-x: hidden; font-family: 'Lato', sans-serif; } ::placeholder { font-style: italic; } /* ========================================================================== 2. DATETIME CONTAINER PURPOSE: Date display with scrolling news ticker USED IN: Top of page below navbar REUSABLE: YES ✅✅✅ NOTE: Identical across index.php, tentang_gapkindo.php, profil_produk.php, berita.php, galeri.php - consider extracting to shared CSS file. ========================================================================== */ .datetime-container { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 15px 25px; color: white; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); margin: -2px 0 0 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; } .date-display { font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .running-text-container { flex: 1; overflow: hidden; position: relative; min-width: 250px; max-width: 100%; } .running-text { display: inline-block; white-space: nowrap; animation: scroll-text 25s linear infinite; font-weight: 500; } /* ========================================================================== 3. ANIMATIONS PURPOSE: Reusable keyframe animations USED IN: Running text, badge glow, icon pulse REUSABLE: YES ✅ ========================================================================== */ /* Scrolling text animation for news ticker */ @keyframes scroll-text { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Badge glow animation for "GAPKINDO" label */ @keyframes badgeGlow { 0%, 100% { box-shadow: 0 0 5px rgba(102, 126, 234, 0.3); } 50% { box-shadow: 0 0 15px rgba(102, 126, 234, 0.6); } } /* Icon pulse animation for gallery icon */ @keyframes iconPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 2px 4px rgba(102, 126, 234, 0.3)); } 50% { transform: scale(1.1); filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.5)); } } /* ========================================================================== 4. HEADER SECTION WITH BADGE PURPOSE: Page title header with animated icon and badge USED IN: "GALERI KEGIATAN" page header REUSABLE: YES ✅✅ FEATURES: - Gradient top border - Icon pulse animation - "GAPKINDO" badge with glow effect - Centered content layout ========================================================================== */ .header-galeri { background: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 1rem 1.5rem; margin-bottom: 2rem; position: relative; overflow: hidden; } /* Top gradient border */ .header-galeri::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%); } /* Badge "GAPKINDO" on top-right */ .header-galeri::after { content: 'GAPKINDO'; position: absolute; top: 8px; right: 15px; font-size: 10px; font-weight: 700; color: #667eea; background: rgba(102, 126, 234, 0.1); padding: 3px 6px; border-radius: 4px; letter-spacing: 0.5px; animation: badgeGlow 2s ease-in-out infinite; z-index: 3; } .header-content { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } .header-icon { width: 32px; height: 32px; animation: iconPulse 2s ease-in-out infinite; } .header-title { font-size: 24px; font-weight: 900; color: #2c3e50; margin: 0; transform: scaleY(1.2); letter-spacing: 1px; } /* ========================================================================== 5. GALERI GRID WRAPPER PURPOSE: Main container for gallery grid USED IN: Gallery page main section REUSABLE: YES ✅ FEATURES: - White background with rounded corners - Top inset border (purple gradient effect) - Box shadow for depth - Gradient top border decoration ========================================================================== */ .galeri-grid-wrapper { background: white; border-radius: 20px; padding: 2rem; padding-top: 2.5rem; margin: 0 1rem 2rem 1rem; position: relative; overflow: hidden; box-shadow: inset 0 5px 0 0 #667eea, 0 10px 40px rgba(0, 0, 0, 0.1); } /* Gradient top border for wrapper */ .galeri-grid-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%); border-radius: 20px 20px 0 0; } /* Adjust row margin inside wrapper */ .galeri-grid-wrapper .row { margin: 0 -15px; } /* Vertical spacing between rows */ .galeri-grid-wrapper .col-md-4 { margin-bottom: 1.5rem; } /* Remove margin-bottom for last row (last 3 items in 3-column layout) */ .galeri-grid-wrapper .row > .col-md-4:nth-last-child(-n+3) { margin-bottom: 0; } /* ========================================================================== 6. GALERI CARD STYLING PURPOSE: Individual gallery card container USED IN: Each gallery item REUSABLE: YES ✅✅ FEATURES: - Gradient background (white to light gray) - Hover lift effect - Top inset purple border - Flexbox vertical layout ========================================================================== */ .news-card-galeri { background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; height: 100%; display: flex; flex-direction: column; box-shadow: inset 0 10px 0 0 #667eea, 0 5px 15px rgba(0, 0, 0, 0.1); } .news-card-galeri:hover { transform: translateY(-8px); box-shadow: inset 0 10px 0 0 #667eea, 0 12px 30px rgba(0, 0, 0, 0.15); } /* ========================================================================== 7. IMAGE WRAPPER & HOVER EFFECTS PURPOSE: Gallery image container with zoom effect USED IN: Gallery card image section REUSABLE: YES ✅ FEATURES: - Padding around image - Rounded corners - Image zoom on card hover - Fixed aspect ratio (250px height) ========================================================================== */ .image-wrapper { padding: 25px 15px 0 15px; flex-shrink: 0; } .image-wrapper img { width: 100%; height: 250px; object-fit: cover; border-radius: 12px; transition: transform 0.3s ease; } .news-card-galeri:hover .image-wrapper img { transform: scale(1.05); } /* ========================================================================== 8. CONTENT AREA PURPOSE: Gallery card text content (title, description, date) USED IN: Gallery card body REUSABLE: YES ✅ STRUCTURE: - Card body with padding - Title (h2) with min-height - Description paragraph - Date/time info - Read more link ========================================================================== */ .news-content { padding: 20px; flex: 1; display: flex; flex-direction: column; } .news-content h2 { font-size: 1.25rem; font-weight: 700; color: #2c3e50; margin-bottom: 1rem; line-height: 1.4; min-height: 2.8rem; } .news-content p { font-size: 0.95rem; line-height: 1.6; color: #555; margin-bottom: 1rem; flex: 1; } .news-content .date-info { font-size: 0.85rem; color: #888; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } /* ========================================================================== 9. READ MORE BUTTON PURPOSE: Link to full gallery detail page USED IN: Gallery card footer REUSABLE: YES ✅✅ FEATURES: - Gradient button style (purple) - Hover slide-right animation - Arrow icon - Box shadow on hover ========================================================================== */ .news-content .read-more { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; background: linear-gradient(135deg, #667eea, #764ba2); color: white; text-decoration: none; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; align-self: flex-start; margin-top: auto; } .news-content .read-more:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); color: white; } /* ========================================================================== 10. PAGINATION PURPOSE: Page navigation for gallery archive USED IN: Bottom of gallery list REUSABLE: YES ✅✅✅ NOTE: Identical to berita.php pagination - consider shared CSS FEATURES: - Centered flex layout - Prev/Next buttons - Numbered page links - Active page highlight (green) - Hover lift effect ========================================================================== */ .pagination { text-align: center; margin: 2rem 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; } .pagination a, .pagination .current-page { display: inline-block; padding: 0.5rem 1rem; border: 1px solid #ccc; background-color: #f5f5f5; text-decoration: none; color: #333; border-radius: 5px; transition: all 0.3s ease; font-weight: 500; } .pagination a:hover { background-color: #007bff; color: white; border-color: #007bff; } .pagination .current-page { background-color: green; color: #fff; border-color: green; } /* ========================================================================== 11. MODAL STYLES PURPOSE: Modal dialog for adding gallery items (admin feature) USED IN: "Tambah Galeri" modal REUSABLE: YES ✅✅ COMPONENTS: - Custom header (blue background) - Form controls with focus effects - Custom close button (X icon) - Footer with action buttons ========================================================================== */ .modal-header.custom-header { background-color: #007bff; color: white; } .modal-dialog { max-width: 600px; } .modal-body .form-control { border: 1px solid #e0e0e0; border-radius: 5px; transition: border-color 0.3s ease; } .modal-body .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); border-color: #007bff; } .modal-footer { background-color: #f8f9fa; } /* Modal close button with X icon */ .btn-close-custom { background: transparent; border: none; color: white; font-size: 1.8rem; line-height: 1; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.8; transition: opacity 0.3s; } .btn-close-custom:hover { opacity: 1; transform: scale(1.1); } /* ========================================================================== 12. RESPONSIVE: TABLET (≤992px) PURPOSE: Layout adjustments for tablet screens CHANGES: - Gallery grid: 3 columns maintained (Bootstrap col-md-4) - Reduced container padding - Card spacing adjustments - Remove margin for last item ========================================================================== */ @media (max-width: 992px) { .galeri-grid-wrapper { padding: 1.5rem; margin: 0 0.5rem 1.5rem 0.5rem; border-radius: 15px; } .col-md-4 { margin-bottom: 1.5rem; } /* Remove margin-bottom for last item in row */ .col-md-4:last-child { margin-bottom: 0; } } /* ========================================================================== 13. RESPONSIVE: MOBILE (≤767px) PURPOSE: Single column layout for mobile CHANGES: - DateTime container: vertical stack - Gallery grid: 3 columns → 1 column - Reduced padding and margins - Smaller image height (200px) - Modal: 95% width ========================================================================== */ @media (max-width: 767.98px) { /* DateTime Container Mobile */ .datetime-container { flex-direction: column; text-align: center; padding: 15px; gap: 10px; } .date-display { font-size: 1rem; justify-content: center; width: 100%; } .running-text-container { width: 100%; min-width: 100%; } .running-text { font-size: 0.9rem; } /* Modal Mobile */ .modal-dialog { max-width: 95%; } /* Gallery Grid Wrapper Mobile */ .galeri-grid-wrapper { padding: 1rem; margin: 0 0.25rem 1rem 0.25rem; border-radius: 12px; } .galeri-grid-wrapper::before { height: 4px; border-radius: 12px 12px 0 0; } /* Gallery Cards Mobile */ .news-card-galeri { margin-bottom: 1.5rem; } /* Remove margin-bottom for last card */ .galeri-grid-wrapper .row > .col-md-4:last-child { margin-bottom: 0; } /* Image Mobile */ .image-wrapper { padding: 20px 15px 0 15px; } .image-wrapper img { height: 200px; } /* Content Mobile */ .news-content h2 { font-size: 1.1rem; min-height: auto; } } /* ========================================================================== 14. RESPONSIVE: SMALL MOBILE (≤575px) PURPOSE: Extreme mobile optimization CHANGES: - Minimal padding everywhere - Smaller fonts - Compact spacing - Image height: 180px ========================================================================== */ @media (max-width: 575.98px) { /* DateTime Small Mobile */ .datetime-container { padding: 12px 10px; } .date-display { font-size: 0.9rem; gap: 8px; } .running-text { font-size: 0.85rem; animation: scroll-text 20s linear infinite; } /* Gallery Grid Wrapper Small Mobile */ .galeri-grid-wrapper { padding: 0.75rem; margin: 0 0.15rem 0.75rem 0.15rem; border-radius: 10px; } .galeri-grid-wrapper::before { height: 3px; border-radius: 10px 10px 0 0; } /* Image Small Mobile */ .image-wrapper { padding: 15px 10px 0 10px; } .image-wrapper img { height: 180px; } /* Content Small Mobile */ .news-content { padding: 15px; } .news-content h2 { font-size: 1rem; } .news-content p { font-size: 0.9rem; } } /* ========================================================================== 15. RESPONSIVE: EXTRA SMALL (≤400px) PURPOSE: Tiny phone optimization CHANGES: - Absolute minimum padding - Smallest font sizes ========================================================================== */ @media (max-width: 400px) { .datetime-container { padding: 10px 8px; } .date-display { font-size: 0.85rem; gap: 6px; } .running-text { font-size: 0.8rem; } } /* ========================================================================== END OF STYLESHEET MAINTENANCE NOTES: - DateTime container is identical across 5+ pages - extract to shared CSS - Pagination is identical to berita.php - extract to shared CSS - Gallery uses 3-column grid (col-md-4) vs 4-column in berita.php - Modal styles can be reused for other admin forms - GAPKINDO badge animation matches brand identity DEPENDENCIES: - Bootstrap 5.x (via asetheadbtsrap.php) - Font Awesome 5.x (for calendar/arrow icons) - Google Fonts (Lato) PERFORMANCE: - Transform animations are GPU-accelerated - Lazy loading images (loading="lazy" in HTML) - Minimal box-shadow for mobile performance - CSS Grid not used (Bootstrap grid sufficient) ACCESSIBILITY: - Ensure gallery images have descriptive alt text - Modal has proper aria-labels - Color contrast meets WCAG AA standards - Keyboard navigation supported - Focus states visible on interactive elements BROWSER SUPPORT: - Flexbox: IE11+ (full support) - Transform animations: All modern browsers - Gradient backgrounds: IE10+ - Border-radius: IE9+ DESIGN PATTERNS: - Purple gradient theme (#667eea to #764ba2) - Consistent card elevation (hover lift effect) - Inset borders for emphasis (top border accent) - Rounded corners (12-20px border-radius) - White/light gray card backgrounds ========================================================================== */