/* ========================================================================== EUDR RUBBER PAGE STYLES (AdminLTE Template) TABLE OF CONTENTS: 1. Global Styles ................................ Line 40 2. EUDR Header Info ............................. Line 55 3. Sidebar Styling (AdminLTE) ................... Line 140 4. Content Wrapper .............................. Line 200 5. DateTime Container ........................... Line 215 6. Animations ................................... Line 270 7. EUDR Wrapper ................................. Line 295 8. Intro Section ................................ Line 330 9. Intro Stats Boxes ............................ Line 380 10. Commodity Cards ............................. Line 540 11. Card Icon Wrappers .......................... Line 640 12. Card Content Area ........................... Line 770 13. Section Cards ............................... Line 850 14. Section Card Variants ....................... Line 895 15. Row Spacing & Section Title ................. Line 975 16. Sidebar Elements ............................ Line 1005 17. Responsive: Tablet (≤768px) ................. Line 1050 18. Responsive: Small Mobile (≤576px) ........... Line 1090 USAGE: - ✅ REUSABLE: DateTime, Stats boxes, Card system - ⚠️ SEMI-REUSABLE: EUDR-specific styling - ❌ PAGE SPECIFIC: AdminLTE sidebar, 7 commodity colors DEPENDENCIES: - Bootstrap 5.x - Font Awesome 5.x - AdminLTE 3.2 - Google Fonts (Inter) File Size: ~1100 lines Created: 2025-01-XX Last Updated: 2025-01-XX ========================================================================== */ /* ========================================================================== 1. GLOBAL STYLES PURPOSE: Page-level font and background USED IN: element REUSABLE: YES ✅ ========================================================================== */ body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); } /* ========================================================================== 2. EUDR HEADER INFO PURPOSE: Prominent header explaining EUDR regulation USED IN: Top of page content REUSABLE: MAYBE ⚠️ FEATURES: - Purple/blue gradient background - Top gradient border (green-red spectrum) - Link to official EUR-Lex document - Dashed border on link ========================================================================== */ .eudr-header-info { background: linear-gradient(135deg, #200bddff 0%, #240872ff 100%); padding: 1.5rem 2rem; margin-top: 1rem; margin-bottom: 1.5rem; border-radius: 15px; color: white; box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3); position: relative; overflow: hidden; } .eudr-header-info::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #026b2eff 0%, #03ad58ff 50%, #dc3545 100%); } .eudr-header-info h2 { color: white; font-weight: 800; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; font-size: 1.8rem; } .eudr-header-info p { color: rgba(255, 255, 255, 0.95); line-height: 1.8; margin-bottom: 1rem; font-size: 1rem; } .eudr-reference-link { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255, 182, 193, 0.3); padding: 0.75rem 1.5rem; border-radius: 10px; color: white; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: 2px dashed rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); } .eudr-reference-link:hover { background: rgba(255, 182, 193, 0.5); color: white; text-decoration: none; transform: translateX(5px); box-shadow: 0 4px 12px rgba(255, 182, 193, 0.5); border: 2px dashed rgba(255, 255, 255, 0.5); } .eudr-reference-link i { font-size: 1.2rem; } /* ========================================================================== 3. SIDEBAR STYLING (AdminLTE) PURPOSE: Custom styling for AdminLTE sidebar USED IN: Left navigation menu REUSABLE: YES ✅ (for other AdminLTE pages) FEATURES: - Purple/blue gradient background - Active state (green gradient) - Hover effects with green left border - Smooth transitions ========================================================================== */ .main-sidebar { background: linear-gradient(180deg, #230146ff 0%, #042de7ff 100%); } .sidebar .nav-link { color: rgba(255, 255, 255, 0.8); transition: all 0.3s ease; border-left: 3px solid transparent; } .sidebar .nav-link:hover { background: rgba(102, 126, 234, 0.15); color: white; border-left: 3px solid #48bb78; } .sidebar .nav-link.active-eudr { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important; color: white !important; font-weight: 700; border-left: 5px solid #2f855a; } /* ========================================================================== 4. CONTENT WRAPPER PURPOSE: AdminLTE content wrapper override USED IN: Main content area REUSABLE: YES ✅ ========================================================================== */ .content-wrapper { background: transparent; } /* ========================================================================== 5. DATETIME CONTAINER PURPOSE: Date display with scrolling news ticker USED IN: Top of page below navbar REUSABLE: YES ✅✅✅ NOTE: Identical across 7+ 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 !important; 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; } .running-text-container { flex: 1; overflow: hidden; position: relative; min-width: 250px; } .running-text { display: inline-block; white-space: nowrap; animation: scroll-text 25s linear infinite; font-weight: 500; } /* ========================================================================== 6. ANIMATIONS PURPOSE: Reusable keyframe animations USED IN: Running text REUSABLE: YES ✅ ========================================================================== */ @keyframes scroll-text { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* ========================================================================== 7. EUDR WRAPPER PURPOSE: Main container for EUDR content USED IN: All sections REUSABLE: YES ✅ FEATURES: - White background with rounded corners - Green top inset border - Box shadow for depth ========================================================================== */ .eudr-wrapper { background: white; border-radius: 20px; padding: 2rem; padding-top: 2.5rem; margin-top: 1.5rem; position: relative; overflow: hidden; box-shadow: inset 0 5px 0 0 #038041ff, 0 10px 40px rgba(0, 0, 0, 0.1); } .eudr-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #038041ff 0%); border-radius: 20px 20px 0 0; } /* ========================================================================== 8. INTRO SECTION PURPOSE: Introduction text about EUDR USED IN: Top of page content REUSABLE: YES ✅✅ NOTE: Similar to sustainability_rubber.php intro section ========================================================================== */ .intro-section { background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(72, 187, 120, 0.15) 100%); border-radius: 15px; padding: 2rem; margin-bottom: 2rem; border-left: 5px solid #28a745; } .intro-section h4 { color: #28a745; font-weight: 700; margin-bottom: 1rem; 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; } /* ========================================================================== 9. INTRO STATS BOXES PURPOSE: 4 key stat boxes showing EUDR key points USED IN: Intro section - Regulasi, Sistem, Rantai Pasok, Batas Waktu REUSABLE: YES ✅✅✅ FEATURES: - Responsive grid layout - Icon + label + value - Hover lift & scale effects - Left border accent - 4 color variants (red, orange, yellow, purple) NOTE: Similar design to sustainability_rubber.php stat boxes ========================================================================== */ .intro-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; margin-bottom: 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-red::before { background: linear-gradient(135deg, #dc3545, #c82333); } .stat-box.stat-orange::before { background: linear-gradient(135deg, #fd7e14, #e8590c); } .stat-box.stat-yellow::before { background: linear-gradient(135deg, #ffc107, #e0a800); } .stat-box.stat-purple::before { background: linear-gradient(135deg, #6f42c1, #5a32a3); } .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-red .stat-icon { background: linear-gradient(135deg, #dc3545, #c82333); } .stat-box.stat-orange .stat-icon { background: linear-gradient(135deg, #fd7e14, #e8590c); } .stat-box.stat-yellow .stat-icon { background: linear-gradient(135deg, #ffc107, #e0a800); } .stat-box.stat-purple .stat-icon { background: linear-gradient(135deg, #6f42c1, #5a32a3); } .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; } /* ========================================================================== 10. COMMODITY CARDS PURPOSE: 7 commodity cards with unique colors USED IN: Lingkup Komoditi section REUSABLE: MAYBE ⚠️ COMMODITIES: - Cattle (Brown #8b4513) - Cacao (Dark Brown #6f4e37) - Coffee (Coffee Brown #4b3621) - Palm Oil (Orange #ff8c00) - Rubber (Green #28a745) - Soya (Yellow #e3bc51) - Wood (Wood Brown #8b7355) ========================================================================== */ .commodity-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; border-top: 5px solid; } .commodity-card.card-cattle { border-top-color: #8b4513; box-shadow: inset 0 10px 0 0 #8b4513, 0 5px 15px rgba(0, 0, 0, 0.1); } .commodity-card.card-cacao { border-top-color: #6f4e37; box-shadow: inset 0 10px 0 0 #6f4e37, 0 5px 15px rgba(0, 0, 0, 0.1); } .commodity-card.card-coffee { border-top-color: #4b3621; box-shadow: inset 0 10px 0 0 #4b3621, 0 5px 15px rgba(0, 0, 0, 0.1); } .commodity-card.card-palm { border-top-color: #ff8c00; box-shadow: inset 0 10px 0 0 #ff8c00, 0 5px 15px rgba(0, 0, 0, 0.1); } .commodity-card.card-rubber { border-top-color: #28a745; box-shadow: inset 0 10px 0 0 #28a745, 0 5px 15px rgba(0, 0, 0, 0.1); } .commodity-card.card-soya { border-top-color: #e3bc51; box-shadow: inset 0 10px 0 0 #e3bc51, 0 5px 15px rgba(0, 0, 0, 0.1); } .commodity-card.card-wood { border-top-color: #8b7355; box-shadow: inset 0 10px 0 0 #8b7355, 0 5px 15px rgba(0, 0, 0, 0.1); } .commodity-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } /* ========================================================================== 11. CARD ICON WRAPPERS PURPOSE: Icon/logo display area for cards USED IN: Commodity and Section cards REUSABLE: YES ✅ FEATURES: - Gradient background (commodity-specific) - Icon scaling on hover - Fixed minimum height ========================================================================== */ .card-icon-wrapper { padding: 30px 20px; display: flex; align-items: center; justify-content: center; min-height: 120px; position: relative; } /* Commodity Card Icon Wrappers */ .commodity-card.card-cattle .card-icon-wrapper { background: linear-gradient(135deg, #8b4513 0%, #704010 100%); } .commodity-card.card-cacao .card-icon-wrapper { background: linear-gradient(135deg, #6f4e37 0%, #5c3e2b 100%); } .commodity-card.card-coffee .card-icon-wrapper { background: linear-gradient(135deg, #4b3621 0%, #3a2918 100%); } .commodity-card.card-palm .card-icon-wrapper { background: linear-gradient(135deg, #ff8c00 0%, #cc7000 100%); } .commodity-card.card-rubber .card-icon-wrapper { background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); } .commodity-card.card-soya .card-icon-wrapper { background: linear-gradient(135deg, #e3bc51 0%, #d4a840 100%); } .commodity-card.card-wood .card-icon-wrapper { background: linear-gradient(135deg, #8b7355 0%, #6e5c43 100%); } .card-icon { font-size: 4rem; color: white; transition: transform 0.3s ease; } .commodity-card:hover .card-icon { transform: scale(1.15) rotate(5deg); } /* ========================================================================== 12. CARD CONTENT AREA PURPOSE: Text content section of cards USED IN: All card types REUSABLE: YES ✅ STRUCTURE: - Title with icon - Subtitle (h4) - Description paragraphs - Lists (for requirements) ========================================================================== */ .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 { font-size: 1.2rem; } .card-content h4 { font-size: 1.1rem; font-weight: 700; color: #495057; margin: 1rem 0 0.5rem 0; } .card-content p, .card-content ul { font-size: 0.95rem; line-height: 1.7; color: #555; text-align: justify; } .card-content ul { margin: 0.5rem 0 1rem 1.5rem; padding: 0; } .card-content ul li { margin-bottom: 0.5rem; } /* ========================================================================== 13. SECTION CARDS PURPOSE: 3 main section cards (Role, Requirements, DDS) USED IN: Peran, Persyaratan, DDS sections REUSABLE: YES ✅ FEATURES: - Similar to commodity cards - 3 color variants (blue, teal, purple) - Hover lift effect ========================================================================== */ .section-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; border-top: 5px solid; } .section-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } /* ========================================================================== 14. SECTION CARD VARIANTS PURPOSE: 3 color schemes for section cards USED IN: Role, Requirements, DDS cards REUSABLE: YES ✅ COLORS: - Role: Blue (#007bff) - Requirements: Teal (#17a2b8) - DDS: Purple (#6f42c1) ========================================================================== */ /* Role Card - Blue */ .section-card.card-role { border-top-color: #007bff; box-shadow: inset 0 10px 0 0 #007bff, 0 5px 15px rgba(0, 0, 0, 0.1); } .section-card.card-role .card-icon-wrapper { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); } /* Requirements Card - Teal */ .section-card.card-requirements { border-top-color: #17a2b8; box-shadow: inset 0 10px 0 0 #17a2b8, 0 5px 15px rgba(0, 0, 0, 0.1); } .section-card.card-requirements .card-icon-wrapper { background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%); } /* DDS Card - Purple */ .section-card.card-dds { border-top-color: #6f42c1; box-shadow: inset 0 10px 0 0 #6f42c1, 0 5px 15px rgba(0, 0, 0, 0.1); } .section-card.card-dds .card-icon-wrapper { background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%); } /* ========================================================================== 15. ROW SPACING & SECTION TITLE PURPOSE: Vertical spacing and section headers USED IN: Between sections REUSABLE: YES ✅ ========================================================================== */ .row-spacing { margin-bottom: 2rem; } .section-title { font-size: 1.8rem; font-weight: 800; color: #2c3e50; margin: 3rem 0 1.5rem 0; padding-bottom: 0.5rem; border-bottom: 3px solid #dc3545; display: inline-block; } /* ========================================================================== 16. SIDEBAR ELEMENTS PURPOSE: AdminLTE sidebar customization USED IN: Sidebar search, divider, heading REUSABLE: YES ✅ (for other AdminLTE pages) ========================================================================== */ /* Sidebar Search */ .sidebar .form-control-sidebar { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; } .sidebar .btn-sidebar { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.8); } /* Divider */ .sidebar-divider { border-top: 2px solid rgba(255, 255, 255, 0.2); margin: 15px 0; } /* Heading */ .sidebar-heading { color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; padding: 10px 15px; margin-top: 10px; } /* Brand Link */ .brand-link .brand-text { text-decoration: none !important; color: inherit; } /* ========================================================================== 17. RESPONSIVE: TABLET (≤768px) PURPOSE: Layout adjustments for tablet screens CHANGES: - Reduced padding - Smaller icons and fonts - Adjusted header info ========================================================================== */ @media (max-width: 768px) { .eudr-wrapper { padding: 1.5rem; } .card-icon { font-size: 3rem; } .section-title { font-size: 1.4rem; } .eudr-header-info { padding: 1.25rem 1.5rem; margin-bottom: 1rem; } .eudr-header-info h2 { font-size: 1.3rem; } .eudr-header-info p { font-size: 0.9rem; } .eudr-reference-link { font-size: 0.9rem; padding: 0.6rem 1.2rem; width: 100%; justify-content: center; } } /* ========================================================================== 18. RESPONSIVE: SMALL MOBILE (≤576px) PURPOSE: Extreme mobile optimization CHANGES: - Minimal padding - Vertical layout for header - DateTime container stacked - Full-width buttons ========================================================================== */ @media (max-width: 576px) { .eudr-header-info { padding: 1rem; border-radius: 10px; } .eudr-header-info h2 { font-size: 1.1rem; flex-direction: column; gap: 0.5rem; text-align: center; } .eudr-header-info p { font-size: 0.85rem; text-align: justify; } .eudr-reference-link { font-size: 0.85rem; padding: 0.5rem 1rem; } .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%; } } /* ========================================================================== END OF STYLESHEET MAINTENANCE NOTES: - DateTime container identical across 8+ pages - extract to shared CSS - AdminLTE sidebar styling can be reused for other regulation pages - 7 commodity colors match official EUDR documentation - Stat boxes use 4-color gradient scheme (red→orange→yellow→purple) - Section cards use 3-color scheme (blue→teal→purple) DEPENDENCIES: - Bootstrap 5.x - Font Awesome 5.x - AdminLTE 3.2 - Google Fonts (Inter) - jQuery 3.6.0 (for AdminLTE) PERFORMANCE: - Transform animations are GPU-accelerated - Minimal box-shadow for mobile performance - CSS Grid for stat boxes (better than flexbox) - Smooth scroll handled by JavaScript ACCESSIBILITY: - Sidebar navigation keyboard accessible - Focus states visible on interactive elements - Color contrast meets WCAG AA standards - Semantic HTML5 structure - ARIA labels on sidebar search BROWSER SUPPORT: - CSS Grid: IE11+ (with -ms- prefix) - Flexbox: IE11+ (full support) - Transform animations: All modern browsers - Gradient backgrounds: IE10+ - Backdrop-filter: Chrome 76+, Safari 9+, Firefox 103+ DESIGN PATTERNS: - AdminLTE template integration - Purple/blue sidebar theme - Green EUDR theme (sustainability) - 7 unique commodity colors - Consistent hover effects (lift + shadow) - Rounded corners (10-20px border-radius) - Gradient backgrounds for emphasis JAVASCRIPT DEPENDENCIES: - Smooth scroll functionality (inline script) - Active section highlighting on scroll - AdminLTE sidebar toggle SEO & CONTENT: - External link to EUR-Lex (official EUDR document) - Descriptive link text - Semantic HTML5 structure - Proper heading hierarchy (h2, h3, h4) - Section IDs for deep linking ========================================================================== */