/* ========================================================================== SUSTAINABILITY RUBBER PAGE STYLES TABLE OF CONTENTS: 1. Global Styles ................................ Line 35 2. DateTime Container ........................... Line 50 3. Animations ................................... Line 105 4. Header Section with Badge .................... Line 155 5. Sustainability Wrapper ....................... Line 235 6. Sustainability Cards Base .................... Line 270 7. Card Color Variants .......................... Line 310 8. Card Logo Wrapper & Filters .................. Line 460 9. Card Content Area ............................ Line 530 10. Info Box Style (AdminLTE) ................... Line 590 11. Visit Button ................................ Line 710 12. Intro Section ............................... Line 750 13. Intro Stats Boxes ........................... Line 810 14. Row Spacing ................................. Line 980 15. Responsive: Tablet (≤992px) ................. Line 1000 16. Responsive: Mobile (≤767px) ................. Line 1030 17. Responsive: Small Mobile (≤575px) ........... Line 1155 18. Responsive: Extra Small (≤400px) ............ Line 1260 USAGE: - ✅ REUSABLE: DateTime, Header, Intro section, Stats boxes - ⚠️ SEMI-REUSABLE: Sustainability cards (adapt for certifications/programs) - ❌ PAGE SPECIFIC: 6 color variants, SVG filters DEPENDENCIES: - Bootstrap 5.x (via asetheadbtsrap.php) - Font Awesome 5.x - Google Fonts (Lato) File Size: ~1300 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; background: #f8f9fa; } ::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 6+ pages - strongly recommend extracting to shared-components.css ========================================================================== */ .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(40, 167, 69, 0.3); } 50% { box-shadow: 0 0 15px rgba(40, 167, 69, 0.6); } } /* Icon pulse animation for leaf icon */ @keyframes iconPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 2px 4px rgba(40, 167, 69, 0.3)); } 50% { transform: scale(1.1); filter: drop-shadow(0 4px 8px rgba(40, 167, 69, 0.5)); } } /* ========================================================================== 4. HEADER SECTION WITH BADGE PURPOSE: Page title header with animated icon and badge USED IN: "KARET BERKELANJUTAN" page header REUSABLE: YES ✅✅ FEATURES: - Green gradient top border (sustainability theme) - Icon pulse animation - "GAPKINDO" badge with green glow effect - Centered content layout NOTE: Similar to galeri.php header but with green color scheme ========================================================================== */ .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 - Green theme */ .header-galeri::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #17a2b8 100%); } /* Badge "GAPKINDO" on top-right - Green color */ .header-galeri::after { content: 'GAPKINDO'; position: absolute; top: 8px; right: 15px; font-size: 10px; font-weight: 700; color: #28a745; background: rgba(40, 167, 69, 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. SUSTAINABILITY WRAPPER PURPOSE: Main container for sustainability cards USED IN: Sustainability page main section REUSABLE: YES ✅ FEATURES: - White background with rounded corners - Green top inset border - Box shadow for depth - Green gradient top border decoration ========================================================================== */ .sustainability-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 #28a745, 0 10px 40px rgba(0, 0, 0, 0.1); } .sustainability-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #28a745 0%, #20c997 50%, #17a2b8 100%); border-radius: 20px 20px 0 0; } /* ========================================================================== 6. SUSTAINABILITY CARDS BASE PURPOSE: Base styling for sustainability organization cards USED IN: GPSNR, SNR-i, SNARPI, Project Tree, Rubber Way, EcoVadis cards REUSABLE: YES ✅✅ FEATURES: - Gradient background (white to light gray) - Hover lift effect - Flexbox vertical layout - Color variants via additional classes ========================================================================== */ .sustainability-card { 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: 0 5px 15px rgba(0, 0, 0, 0.1); margin-bottom: 1.5rem; } /* Hover effect for all cards */ .sustainability-card:hover { transform: translateY(-8px); } /* ========================================================================== 7. CARD COLOR VARIANTS PURPOSE: 6 different color schemes for different organizations USED IN: Each sustainability organization card REUSABLE: MAYBE ⚠️ COLORS: - Green: GPSNR (#28a745 → #20c997) - Teal: SNR-i (#20c997 → #17a2b8) - Blue: SNARPI (#007bff → #0056b3) - Orange: Project Tree (#fd7e14 → #e8590c) - Purple: Rubber Way (#6f42c1 → #5a32a3) - Red: EcoVadis (#dc3545 → #c82333) ========================================================================== */ /* Green Card - GPSNR */ .sustainability-card.card-green { box-shadow: inset 0 10px 0 0 #28a745, 0 5px 15px rgba(0, 0, 0, 0.1); border-top: 5px solid #28a745; } .sustainability-card.card-green:hover { box-shadow: inset 0 10px 0 0 #20c997, 0 12px 30px rgba(0, 0, 0, 0.15); } .sustainability-card.card-green .card-logo-wrapper { background: linear-gradient(135deg, #28a745 0%, #20c997 100%); } /* Teal Card - SNR-i */ .sustainability-card.card-teal { box-shadow: inset 0 10px 0 0 #20c997, 0 5px 15px rgba(0, 0, 0, 0.1); border-top: 5px solid #20c997; } .sustainability-card.card-teal:hover { box-shadow: inset 0 10px 0 0 #17a2b8, 0 12px 30px rgba(0, 0, 0, 0.15); } .sustainability-card.card-teal .card-logo-wrapper { background: linear-gradient(135deg, #20c997 0%, #17a2b8 100%); } /* Blue Card - SNARPI */ .sustainability-card.card-blue { box-shadow: inset 0 10px 0 0 #007bff, 0 5px 15px rgba(0, 0, 0, 0.1); border-top: 5px solid #007bff; } .sustainability-card.card-blue:hover { box-shadow: inset 0 10px 0 0 #0056b3, 0 12px 30px rgba(0, 0, 0, 0.15); } .sustainability-card.card-blue .card-logo-wrapper { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); } /* Orange Card - Project Tree */ .sustainability-card.card-orange { box-shadow: inset 0 10px 0 0 #fd7e14, 0 5px 15px rgba(0, 0, 0, 0.1); border-top: 5px solid #fd7e14; } .sustainability-card.card-orange:hover { box-shadow: inset 0 10px 0 0 #e8590c, 0 12px 30px rgba(0, 0, 0, 0.15); } .sustainability-card.card-orange .card-logo-wrapper { background: linear-gradient(135deg, #fd7e14 0%, #e8590c 100%); } /* Purple Card - Rubber Way */ .sustainability-card.card-purple { box-shadow: inset 0 10px 0 0 #6f42c1, 0 5px 15px rgba(0, 0, 0, 0.1); border-top: 5px solid #6f42c1; } .sustainability-card.card-purple:hover { box-shadow: inset 0 10px 0 0 #5a32a3, 0 12px 30px rgba(0, 0, 0, 0.15); } .sustainability-card.card-purple .card-logo-wrapper { background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%); } /* Red Card - EcoVadis */ .sustainability-card.card-red { box-shadow: inset 0 10px 0 0 #dc3545, 0 5px 15px rgba(0, 0, 0, 0.1); border-top: 5px solid #dc3545; } .sustainability-card.card-red:hover { box-shadow: inset 0 10px 0 0 #c82333, 0 12px 30px rgba(0, 0, 0, 0.15); } .sustainability-card.card-red .card-logo-wrapper { background: linear-gradient(135deg, #dc3545 0%, #c82333 100%); } /* ========================================================================== 8. CARD LOGO WRAPPER & FILTERS PURPOSE: Logo/image display area with SVG filters USED IN: Organization logo section of cards REUSABLE: MAYBE ⚠️ FEATURES: - Gradient background (from card color variant) - Logo scaling on card hover - SVG white filter for contrast - Fallback icon system NOTE: SVG filters might need adjustment per logo ========================================================================== */ .card-logo-wrapper { padding: 30px 20px 20px 20px; display: flex; align-items: center; justify-content: center; min-height: 150px; position: relative; } .card-logo { max-width: 180px; max-height: 100px; width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease; } /* SVG White Filter - For logos that need white color */ .card-logo.filter-white { filter: brightness(0) invert(1); } /* SVG with original color - No filter needed */ .card-logo.no-filter { filter: none; } /* Fallback Icon Style - Shows when image fails to load */ .fallback-icon { display: none; font-size: 4rem; color: white; opacity: 0.9; } .fallback-icon.show { display: block; } .sustainability-card:hover .card-logo { transform: scale(1.1); } /* ========================================================================== 9. CARD CONTENT AREA PURPOSE: Text content section of sustainability cards USED IN: Card body with title, info box, description REUSABLE: YES ✅ STRUCTURE: - Title with icon - Info box (AdminLTE style) - Description paragraph - Visit button ========================================================================== */ .card-content { padding: 25px; flex: 1; display: flex; flex-direction: column; } .card-content h3 { font-size: 1.4rem; font-weight: 700; color: #2c3e50; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .card-content h3 i { color: #28a745; font-size: 1.2rem; } .card-content p { font-size: 0.95rem; line-height: 1.7; color: #555; margin-bottom: 1.5rem; flex: 1; text-align: justify; } /* ========================================================================== 10. INFO BOX STYLE (AdminLTE) PURPOSE: Stat/info display boxes within cards USED IN: Organization details (Platform, Fokus, Kebijakan, etc.) REUSABLE: YES ✅✅✅ FEATURES: - AdminLTE-inspired design - Icon + label + value layout - Hover lift effect - Color variants match parent card NOTE: Similar design to profil_produk.php info boxes ========================================================================== */ .info-box-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%); border-radius: 10px; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; } .info-box-card:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); transform: translateY(-2px); } .info-box-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 2rem; color: white; flex-shrink: 0; } /* Icon colors for each card type */ .card-green .info-box-icon { background: linear-gradient(135deg, #28a745, #20c997); } .card-teal .info-box-icon { background: linear-gradient(135deg, #20c997, #17a2b8); } .card-blue .info-box-icon { background: linear-gradient(135deg, #007bff, #0056b3); } .card-orange .info-box-icon { background: linear-gradient(135deg, #fd7e14, #e8590c); } .card-purple .info-box-icon { background: linear-gradient(135deg, #6f42c1, #5a32a3); } .card-red .info-box-icon { background: linear-gradient(135deg, #dc3545, #c82333); } .info-box-content { flex: 1; } .info-box-label { font-size: 0.85rem; color: #888; text-transform: uppercase; font-weight: 600; margin-bottom: 0.25rem; } .info-box-value { font-size: 1.1rem; font-weight: 700; color: #2c3e50; } /* ========================================================================== 11. VISIT BUTTON PURPOSE: External link button to organization websites USED IN: Card footer REUSABLE: YES ✅✅ FEATURES: - Green gradient button - Hover slide-right animation - External link icon - Box shadow on hover ========================================================================== */ .card-content .visit-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.5rem; background: linear-gradient(135deg, #28a745, #20c997); color: white; text-decoration: none; border-radius: 25px; font-weight: 600; transition: all 0.3s ease; align-self: flex-start; margin-top: auto; } .card-content .visit-btn:hover { transform: translateX(5px); box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4); color: white; background: linear-gradient(135deg, #20c997, #17a2b8); } /* ========================================================================== 12. INTRO SECTION PURPOSE: Introduction text and context about sustainability USED IN: Top of page content REUSABLE: YES ✅✅ FEATURES: - Light green gradient background - Left green border accent - Title with icon - Description paragraphs ========================================================================== */ .intro-section { background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(32, 201, 151, 0.1) 100%); border-radius: 15px; padding: 2rem; margin-bottom: 2rem; border-left: 5px solid #28a745; } .intro-section h4 { color: #28a745; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; } .intro-section p { color: #555; line-height: 1.8; margin: 0 0 1.5rem 0; text-align: justify; } /* ========================================================================== 13. INTRO STATS BOXES PURPOSE: 4 key stat boxes showing sustainability pillars USED IN: Intro section - Lingkungan, Sosial, Ekonomi, Rantai Pasok REUSABLE: YES ✅✅✅ FEATURES: - Responsive grid layout - Icon + label + value - Hover lift & scale effects - Left border accent - 4 color variants (green, teal, blue, orange) ========================================================================== */ .intro-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; } .stat-box { background: white; border-radius: 12px; padding: 1.25rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08); transition: all 0.3s ease; position: relative; overflow: hidden; } .stat-box::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; transition: width 0.3s ease; } .stat-box:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .stat-box:hover::before { width: 100%; opacity: 0.05; } .stat-box:hover .stat-icon { transform: scale(1.1) rotate(5deg); } /* Stat Box Color Variants */ .stat-box.stat-green::before { background: linear-gradient(135deg, #28a745, #20c997); } .stat-box.stat-teal::before { background: linear-gradient(135deg, #20c997, #17a2b8); } .stat-box.stat-blue::before { background: linear-gradient(135deg, #007bff, #0056b3); } .stat-box.stat-orange::before { background: linear-gradient(135deg, #fd7e14, #e8590c); } .stat-icon { width: 55px; height: 55px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: white; flex-shrink: 0; position: relative; z-index: 1; transition: transform 0.3s ease; } .stat-box.stat-green .stat-icon { background: linear-gradient(135deg, #28a745, #20c997); } .stat-box.stat-teal .stat-icon { background: linear-gradient(135deg, #20c997, #17a2b8); } .stat-box.stat-blue .stat-icon { background: linear-gradient(135deg, #007bff, #0056b3); } .stat-box.stat-orange .stat-icon { background: linear-gradient(135deg, #fd7e14, #e8590c); } .stat-content { flex: 1; position: relative; z-index: 1; } .stat-label { font-size: 0.8rem; color: #888; text-transform: uppercase; font-weight: 600; margin-bottom: 0.3rem; letter-spacing: 0.5px; } .stat-value { font-size: 1.3rem; font-weight: 700; color: #2c3e50; line-height: 1.2; } /* ========================================================================== 14. ROW SPACING PURPOSE: Vertical spacing between card rows USED IN: Bootstrap rows containing cards REUSABLE: YES ✅ ========================================================================== */ .row-spacing { margin-bottom: 2rem; } /* ========================================================================== 15. RESPONSIVE: TABLET (≤992px) PURPOSE: Layout adjustments for tablet screens CHANGES: - Reduced container padding - Card spacing adjustments ========================================================================== */ @media (max-width: 992px) { .sustainability-wrapper { padding: 1.5rem; margin: 0 0.5rem 1.5rem 0.5rem; border-radius: 15px; } .sustainability-card { margin-bottom: 1.5rem; } .row-spacing { margin-bottom: 1.5rem; } } /* ========================================================================== 16. RESPONSIVE: MOBILE (≤767px) PURPOSE: Mobile optimization for single column layout CHANGES: - DateTime: vertical stack - Sustainability cards: full width - Reduced padding - Smaller logo sizes - Compact info boxes - Intro stats: 2 columns → 1 column on very small screens ========================================================================== */ @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; } /* Sustainability Wrapper Mobile */ .sustainability-wrapper { padding: 1rem; margin: 0 0.25rem 1rem 0.25rem; border-radius: 12px; } .sustainability-wrapper::before { height: 4px; border-radius: 12px 12px 0 0; } /* Card Logo Mobile */ .card-logo-wrapper { padding: 25px 15px 15px 15px; min-height: 120px; } .card-logo { max-width: 150px; max-height: 80px; } /* Card Content Mobile */ .card-content { padding: 20px; } .card-content h3 { font-size: 1.2rem; } /* Intro Section Mobile */ .intro-section { padding: 1.5rem; } /* Intro Stats Mobile */ .intro-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; } .stat-box { padding: 1rem; } .stat-icon { width: 50px; height: 50px; font-size: 1.5rem; } .stat-value { font-size: 1.1rem; } /* Row Spacing Mobile */ .row-spacing { margin-bottom: 1rem; } /* Info Box Mobile */ .info-box-card { padding: 0.75rem; } .info-box-icon { width: 50px; height: 50px; font-size: 1.5rem; } .info-box-label { font-size: 0.75rem; } .info-box-value { font-size: 1rem; } } /* ========================================================================== 17. RESPONSIVE: SMALL MOBILE (≤575px) PURPOSE: Extreme mobile optimization CHANGES: - Minimal padding - Smaller fonts - Compact spacing - Single column intro stats ========================================================================== */ @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; } /* Sustainability Wrapper Small Mobile */ .sustainability-wrapper { padding: 0.75rem; margin: 0 0.15rem 0.75rem 0.15rem; border-radius: 10px; } /* Card Content Small Mobile */ .card-content h3 { font-size: 1.1rem; } .card-content p { font-size: 0.9rem; } /* Intro Section Small Mobile */ .intro-section { padding: 1rem; } .intro-section h4 { font-size: 1.1rem; } .intro-section p { font-size: 0.9rem; } /* Intro Stats Small Mobile - Single Column */ .intro-stats { grid-template-columns: 1fr; gap: 0.6rem; } .stat-box { padding: 0.9rem; } .stat-icon { width: 45px; height: 45px; font-size: 1.3rem; } .stat-label { font-size: 0.75rem; } .stat-value { font-size: 1rem; } /* Row Spacing Small Mobile */ .row-spacing { margin-bottom: 0.75rem; } /* Info Box Small Mobile */ .info-box-card { padding: 0.6rem; gap: 0.75rem; } .info-box-icon { width: 45px; height: 45px; font-size: 1.3rem; } .info-box-label { font-size: 0.7rem; } .info-box-value { font-size: 0.9rem; } } /* ========================================================================== 18. RESPONSIVE: EXTRA SMALL (≤400px) PURPOSE: Tiny phone optimization CHANGES: - Absolute minimum padding - Smallest font sizes - Compact logo size ========================================================================== */ @media (max-width: 400px) { .datetime-container { padding: 10px 8px; } .date-display { font-size: 0.85rem; gap: 6px; } .running-text { font-size: 0.8rem; } .card-logo { max-width: 130px; max-height: 70px; } .intro-stats { gap: 0.5rem; } .stat-box { padding: 0.75rem; } .stat-icon { width: 40px; height: 40px; font-size: 1.2rem; } .stat-label { font-size: 0.7rem; } .stat-value { font-size: 0.9rem; } .info-box-icon { width: 40px; height: 40px; font-size: 1.2rem; } .info-box-label { font-size: 0.65rem; } .info-box-value { font-size: 0.85rem; } } /* ========================================================================== END OF STYLESHEET MAINTENANCE NOTES: - DateTime container identical across 6+ pages - extract to shared CSS - 6 color variants follow Bootstrap color scheme - SVG filters might need per-logo adjustment - Info boxes use AdminLTE-inspired design - Green gradient theme matches sustainability concept DEPENDENCIES: - Bootstrap 5.x (via asetheadbtsrap.php) - Font Awesome 5.x (for icons) - Google Fonts (Lato) PERFORMANCE: - Transform animations are GPU-accelerated - Minimal box-shadow for mobile performance - CSS Grid for intro stats (better than flexbox) - Image lazy loading (loading="lazy" in HTML) ACCESSIBILITY: - Ensure logo images have descriptive alt text - External links open in new tab (target="_blank") - Color contrast meets WCAG AA standards - Keyboard navigation supported - Focus states visible on interactive elements BROWSER SUPPORT: - CSS Grid: IE11+ (with -ms- prefix) - Flexbox: IE11+ (full support) - Transform animations: All modern browsers - Gradient backgrounds: IE10+ - SVG filters: All modern browsers DESIGN PATTERNS: - Green sustainability theme (#28a745 primary) - 6 organization cards with unique colors - AdminLTE-inspired info boxes - Intro section with 4 key stats - Consistent hover effects (lift + shadow) - Rounded corners (10-20px border-radius) SEO & CONTENT: - External links have rel="noopener noreferrer" - Descriptive link text ("Kunjungi Website") - Semantic HTML5 structure - Proper heading hierarchy (h3, h4) ========================================================================== */