/* ========================================================================== BERITA (NEWS ARCHIVE) PAGE STYLES TABLE OF CONTENTS: 1. Global Styles ................................ Line 30 2. DateTime Container ........................... Line 45 3. Animations ................................... Line 100 4. Header Section with Icon Hover ............... Line 130 5. News Card Container Wrapper .................. Line 190 6. News Grid Layout ............................. Line 215 7. News Card Styling ............................ Line 235 8. News Card Image & Badge ...................... Line 270 9. News Content Area ............................ Line 340 10. Read More Button ............................ Line 395 11. Pagination .................................. Line 425 12. Responsive: Tablet (≤992px) ................. Line 490 13. Responsive: Mobile (≤768px) ................. Line 520 14. Responsive: Small Mobile (≤600px) ........... Line 565 15. Responsive: Tiny Mobile (≤576px, ≤400px) .... Line 625 USAGE: - ✅ REUSABLE: DateTime, Header section, Pagination - ⚠️ SEMI-REUSABLE: News cards (modify for gallery/events) - ❌ PAGE SPECIFIC: News grid layout DEPENDENCIES: - Bootstrap 5.x (via asetheadbtsrap.php) - Font Awesome 5.x - Google Fonts (optional) File Size: ~500 lines Created: 2025-01-XX Last Updated: 2025-01-XX ========================================================================== */ /* ========================================================================== 1. GLOBAL STYLES PURPOSE: Page-level layout adjustments USED IN: element REUSABLE: YES ✅ ========================================================================== */ body { margin: 0 0 0 0; padding: 0; } /* ========================================================================== 2. DATETIME CONTAINER PURPOSE: Date display with scrolling news ticker (same as index.php) USED IN: Top of page below navbar REUSABLE: YES ✅✅✅ NOTE: This is identical across multiple pages (index, tentang_gapkindo, profil_produk, berita). 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 pulse REUSABLE: YES ✅ ========================================================================== */ /* Scrolling text animation for news ticker */ @keyframes scroll-text { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* Badge pulse animation for "TERBARU" label */ @keyframes badgePulse { 0%, 100% { box-shadow: 2px 2px 8px rgba(220, 53, 69, 0.3); } 50% { box-shadow: 2px 2px 15px rgba(220, 53, 69, 0.6); } } /* ========================================================================== 4. HEADER SECTION WITH ICON HOVER EFFECT PURPOSE: Page title header with animated icon USED IN: "ARSIP BERITA" page header REUSABLE: YES ✅✅ FEATURES: - Gradient top border - Icon rotation on hover - Text color transition ========================================================================== */ .header-berita { background: white; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); padding: 1rem 1.5rem; margin-bottom: 1rem; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 55px; } .header-berita::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #f093fb 100%); } .header-content { display: flex; align-items: center; gap: 10px; } .header-content img { height: 26px; transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); } /* Icon hover effect - rotate and scale with shadow */ .header-content img:hover { transform: scale(1.2) rotate(15deg); filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.4)); } .header-title { font-size: 24px; font-weight: 900; transform: scaleY(1.2); color: #2c3e50; transition: color 0.3s ease; } .header-content:hover .header-title { color: #667eea; } /* ========================================================================== 5. NEWS CARD CONTAINER WRAPPER PURPOSE: Main container for news grid and pagination USED IN: News archive page REUSABLE: MAYBE ⚠️ FEATURES: - White background with rounded corners - Top inset border (purple gradient effect) - Box shadow for depth ========================================================================== */ .news-card-container-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); } /* ========================================================================== 6. NEWS GRID LAYOUT PURPOSE: 4-column grid for news cards USED IN: News archive display REUSABLE: YES ✅ NOTE: Responsive breakpoints reduce columns on smaller screens Desktop: 4 columns | Tablet: 2 columns | Mobile: 1 column ========================================================================== */ .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 0; } /* ========================================================================== 7. NEWS CARD STYLING PURPOSE: Individual news card container USED IN: Each news item REUSABLE: YES ✅✅ FEATURES: - Flexbox vertical layout - Hover lift effect - Border and shadow - Rounded corners ========================================================================== */ .news-card { display: flex; flex-direction: column; border: 1px solid #e0e0e0; background: white; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); height: 100%; } .news-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } /* ========================================================================== 8. NEWS CARD IMAGE & BADGE PURPOSE: News thumbnail with "TERBARU" badge overlay USED IN: News card image section REUSABLE: YES ✅ FEATURES: - Image zoom on card hover - Pulsing "TERBARU" badge (first item only) - Aspect ratio maintained ========================================================================== */ /* Image Wrapper */ .news-card-image-wrapper { position: relative; overflow: hidden; width: 100%; } .news-card-image-wrapper img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.3s ease; } .news-card:hover .news-card-image-wrapper img { transform: scale(1.05); } /* Badge "TERBARU" - Red badge on bottom-left */ .badge-terbaru { position: absolute; bottom: 3px; left: 3px; background-color: #dc3545; color: white; padding: 6px 14px; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.5px; border-right: 4px solid white; z-index: 10; box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); animation: badgePulse 2s ease-in-out infinite; } /* ========================================================================== 9. NEWS CONTENT AREA PURPOSE: News card text content (title, excerpt, date) USED IN: News card body REUSABLE: YES ✅ STRUCTURE: - Card body with padding - Title (h2) - Excerpt paragraph - Date/time info - Read more link ========================================================================== */ .news-content { padding: 1rem; flex: 1; display: flex; flex-direction: column; } .news-content h2 { margin: 0 0 0.5rem 0; font-size: 1.1rem; font-weight: bold; color: #2c3e50; line-height: 1.4; } .news-content p { margin: 5px 0; line-height: 1.6; color: #555; flex: 1; } .news-content p:last-of-type { font-size: 0.85rem; color: #888; display: flex; align-items: center; gap: 0.5rem; } /* ========================================================================== 10. READ MORE BUTTON PURPOSE: Link to full news article USED IN: News card footer REUSABLE: YES ✅✅ FEATURES: - Outlined button style - Hover fill effect (blue background) - Arrow icon with slide-right animation ========================================================================== */ .read-more { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background-color: #fff; color: #007bff; text-decoration: none; border-radius: 25px; border: 2px solid #007bff; transition: all 0.3s ease; font-weight: 500; align-self: flex-start; margin-top: 0.5rem; } .read-more:hover { background-color: #007bff; color: #fff; transform: translateX(5px); } /* ========================================================================== 11. PAGINATION PURPOSE: Page navigation for news archive USED IN: Bottom of news list REUSABLE: YES ✅✅✅ FEATURES: - Centered flex layout - Prev/Next buttons - Numbered page links - Active page highlight (green) - Hover lift effect ========================================================================== */ .pagination-wrapper { margin-top: 2rem; padding-top: 1.5rem; border-top: 2px solid #f0f0f0; } .pagination { text-align: center; display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin: 0; } .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; transform: translateY(-2px); } .pagination .current-page { background-color: green; color: #fff; border-color: green; } /* ========================================================================== 12. RESPONSIVE: TABLET (≤992px) PURPOSE: Layout adjustments for tablet screens CHANGES: - News grid: 4 columns → 2 columns - Reduced container padding - Smaller pagination spacing ========================================================================== */ @media screen and (max-width: 992px) { .news-grid { grid-template-columns: repeat(2, 1fr); } .news-card-container-wrapper { padding: 1.5rem; padding-top: 2rem; margin: 0 0.5rem 1.5rem 0.5rem; } .pagination-wrapper { margin-top: 1.5rem; padding-top: 1rem; } } /* ========================================================================== 13. RESPONSIVE: MOBILE (≤768px) PURPOSE: DateTime container mobile optimization CHANGES: - Stack date and running text vertically - Center align text - Adjust font sizes ========================================================================== */ @media screen and (max-width: 768px) { .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; } } /* ========================================================================== 14. RESPONSIVE: SMALL MOBILE (≤600px) PURPOSE: Single column layout for small phones CHANGES: - News grid: 2 columns → 1 column - Further reduced padding - Smaller image height - Smaller badge size ========================================================================== */ @media screen and (max-width: 600px) { .news-grid { grid-template-columns: 1fr; } .news-card-container-wrapper { padding: 1rem; padding-top: 1.5rem; margin: 0 0.25rem 1rem 0.25rem; } .news-card { height: auto; } .news-card-image-wrapper img { height: 180px; } .badge-terbaru { padding: 5px 12px; font-size: 0.7rem; border-right-width: 3px; } .pagination-wrapper { margin-top: 1rem; padding-top: 0.75rem; } .pagination a, .pagination .current-page { padding: 0.4rem 0.8rem; font-size: 0.9rem; } } /* ========================================================================== 15. RESPONSIVE: TINY MOBILE (≤576px, ≤400px) PURPOSE: Extreme mobile optimization CHANGES: - Minimal padding everywhere - Smallest font sizes - Compact spacing - Badge micro adjustments ========================================================================== */ /* Small Mobile (≤576px) */ @media screen and (max-width: 576px) { .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; } .news-card-container-wrapper { padding: 0.75rem; padding-top: 1.25rem; } .pagination { gap: 0.35rem; } .pagination a, .pagination .current-page { padding: 0.35rem 0.7rem; font-size: 0.85rem; } } /* Tiny Mobile (≤400px) */ @media screen and (max-width: 400px) { .datetime-container { padding: 10px 8px; } .date-display { font-size: 0.85rem; gap: 6px; } .running-text { font-size: 0.8rem; } .badge-terbaru { padding: 4px 10px; font-size: 0.65rem; border-right-width: 2px; } } /* ========================================================================== END OF STYLESHEET MAINTENANCE NOTES: - DateTime container is identical across pages (index, tentang_gapkindo, profil_produk, berita) - consider extracting to shared CSS - Badge pulse animation synced with news card hover - Pagination green active state matches GAPKINDO brand colors - Grid breakpoints: 4 cols (desktop) → 2 cols (tablet) → 1 col (mobile) DEPENDENCIES: - Bootstrap 5.x (via asetheadbtsrap.php) - Font Awesome 5.x (for calendar/arrow icons) - Google Fonts (optional, via asetheadbtsrap.php) PERFORMANCE: - Uses CSS Grid (better than flexbox for equal-height cards) - Transform animations are GPU-accelerated - Lazy loading images (loading="lazy" in HTML) - Minimal box-shadow for mobile performance ACCESSIBILITY: - Ensure news images have alt text - Pagination links have proper aria-labels - Color contrast meets WCAG AA standards - Keyboard navigation supported BROWSER SUPPORT: - CSS Grid: IE11+ (with -ms- prefix) - Transform animations: All modern browsers - Flexbox: IE11+ (full support) ========================================================================== */