/* ========================================================================== DOWNLOAD UMUM (PUBLICATIONS DOWNLOAD) PAGE STYLES (AdminLTE Template) TABLE OF CONTENTS: 1. Base Styles .................................. Line 45 2. Sidebar Styling (AdminLTE) ................... Line 60 3. Sidebar Active State & Animations ............ Line 95 4. Content Wrapper .............................. Line 165 5. DateTime Container ........................... Line 180 6. Animations ................................... Line 235 7. Download Wrapper ............................. Line 260 8. Welcome Header ............................... Line 290 9. Welcome Intro ................................ Line 340 10. Welcome Info Cards .......................... Line 370 11. Welcome Info Icons .......................... Line 430 12. Welcome Info Content ........................ Line 490 13. Quick Access Section ........................ Line 545 14. Quick Links ................................. Line 575 15. Info Banner ................................. Line 635 16. Section Styling ............................. Line 680 17. Section Header .............................. Line 710 18. Info Card Detail ............................ Line 745 19. Doc Info Grid ............................... Line 780 20. Doc Description & Features .................. Line 835 21. Action Buttons .............................. Line 905 22. Iframe Container ............................ Line 995 23. Iframe Header & Controls .................... Line 1035 24. Loading Indicator ........................... Line 1085 25. Sidebar Elements ............................ Line 1115 26. Brand Link .................................. Line 1185 27. Responsive: Mobile (≤768px) ................. Line 1205 USAGE: - ✅ REUSABLE: Sidebar, Info cards, Iframe containers - ⚠️ SEMI-REUSABLE: Welcome screen, Download sections - ❌ PAGE SPECIFIC: Document-specific content DEPENDENCIES: - Bootstrap 5.x - Font Awesome 6.x - AdminLTE 3.2 - Google Fonts (Inter) - jQuery 3.6.0 - External URLs (irainfo.org, simpktn.kemendag.go.id) File Size: ~1300 lines Created: 2025-01-XX Last Updated: 2025-01-XX ========================================================================== */ /* ========================================================================== 1. BASE STYLES PURPOSE: Global font and background USED IN: element REUSABLE: YES ✅ ========================================================================== */ body { font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%); } /* ========================================================================== 2. SIDEBAR STYLING (AdminLTE) PURPOSE: Custom styling for AdminLTE sidebar USED IN: Left navigation menu REUSABLE: YES ✅✅ (consistent with all AdminLTE pages) FEATURES: - Purple/blue gradient background - 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; } /* ========================================================================== 3. SIDEBAR ACTIVE STATE & ANIMATIONS PURPOSE: Active menu item styling with glow effect USED IN: Active sidebar navigation links REUSABLE: YES ✅✅ FEATURES: - Green gradient background (sustainability theme) - Glow animation - Pulsing dot indicator - Icon and text styling NOTE: Class name is .active-download (specific to this page) ========================================================================== */ .sidebar .nav-link.active-download { background: linear-gradient(135deg, #48bb78 0%, #38a169 100%) !important; color: white !important; font-weight: 700; border-left: 5px solid #2f855a; box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3); animation: glow-active 2s ease-in-out infinite; position: relative; } .sidebar .nav-link.active-download .nav-icon { color: white !important; transform: scale(1.15); text-shadow: 0 0 10px rgba(255, 255, 255, 0.5); } .sidebar .nav-link.active-download p { color: white !important; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .sidebar .nav-link.active-download::after { content: '●'; position: absolute; right: 15px; font-size: 20px; color: white; animation: pulse-dot 1.5s ease-in-out infinite; } /* Animations */ @keyframes glow-active { 0%, 100% { box-shadow: inset 0 0 20px rgba(72, 187, 120, 0.3); } 50% { box-shadow: inset 0 0 30px rgba(72, 187, 120, 0.5); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } } /* ========================================================================== 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 12+ pages - MUST extract 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, section fade-in REUSABLE: YES ✅ ========================================================================== */ @keyframes scroll-text { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } /* ========================================================================== 7. DOWNLOAD WRAPPER PURPOSE: Main container for download content USED IN: All sections REUSABLE: YES ✅ FEATURES: - White background with rounded corners - Green top inset border - Box shadow for depth - Minimum height ========================================================================== */ .download-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); min-height: 500px; } .download-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. WELCOME HEADER PURPOSE: Hero section for welcome screen USED IN: Welcome section REUSABLE: YES ✅ FEATURES: - Purple gradient background - White text - Centered content - Top gradient border - Large icon + title ========================================================================== */ .welcome-header { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 2.5rem 2rem; border-radius: 15px; margin-bottom: 2rem; text-align: center; box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); position: relative; overflow: hidden; } .welcome-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #026b2eff 0%, #03ad58ff 50%, #667eea 100%); } .welcome-header h1 { font-size: 2.2rem; font-weight: 800; margin: 0 0 0.5rem 0; display: flex; align-items: center; justify-content: center; gap: 1rem; } .welcome-header h1 i { font-size: 2.5rem; } .welcome-subtitle { font-size: 1.1rem; margin: 0; opacity: 0.95; font-weight: 500; } /* ========================================================================== 9. WELCOME INTRO PURPOSE: Introduction text section USED IN: Welcome screen REUSABLE: YES ✅ FEATURES: - Light green gradient background - Green left border - Justified text ========================================================================== */ .welcome-intro { background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(72, 187, 120, 0.15) 100%); padding: 1.5rem 2rem; border-radius: 12px; border-left: 5px solid #28a745; margin-bottom: 2rem; } .welcome-intro p { color: #555; line-height: 1.8; margin: 0; font-size: 1.05rem; text-align: justify; } /* ========================================================================== 10. WELCOME INFO CARDS PURPOSE: 3 main info cards (Contract, Specification, Manual) USED IN: Welcome screen REUSABLE: YES ✅✅ FEATURES: - White background - Rounded corners - Top border accent (blue, teal, purple) - Hover lift effect - Icon + title + description + list ========================================================================== */ .welcome-info-card { background: white; border-radius: 16px; padding: 2rem; height: 100%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; border-top: 5px solid; margin-bottom: 2rem; } .welcome-info-card.card-contract { border-top-color: #007bff; } .welcome-info-card.card-specification { border-top-color: #17a2b8; } .welcome-info-card.card-manual { border-top-color: #6f42c1; } .welcome-info-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); } /* ========================================================================== 11. WELCOME INFO ICONS PURPOSE: Circular icons for info cards USED IN: Welcome info cards REUSABLE: YES ✅ FEATURES: - Circular shape - Gradient backgrounds - Box shadow - Hover scale and rotation ========================================================================== */ .welcome-info-icon { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; font-size: 2.5rem; color: white; transition: transform 0.3s ease; } .welcome-info-card:hover .welcome-info-icon { transform: scale(1.1) rotate(5deg); } .card-contract .welcome-info-icon { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } .card-specification .welcome-info-icon { background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%); box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3); } .card-manual .welcome-info-icon { background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%); box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3); } /* ========================================================================== 12. WELCOME INFO CONTENT PURPOSE: Text content and list in info cards USED IN: Welcome info cards REUSABLE: YES ✅ STRUCTURE: - Title (centered) - Description paragraph - Check list ========================================================================== */ .welcome-info-content h3 { color: #2c3e50; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; text-align: center; } .welcome-info-content p { color: #555; line-height: 1.7; margin-bottom: 1.5rem; text-align: justify; } .welcome-info-list { list-style: none; padding: 0; margin: 0; } .welcome-info-list li { color: #555; padding: 0.5rem 0; display: flex; align-items: center; gap: 0.75rem; } .welcome-info-list li i { color: #28a745; font-size: 1.1rem; } /* ========================================================================== 13. QUICK ACCESS SECTION PURPOSE: Quick links grid for easy navigation USED IN: Welcome screen REUSABLE: YES ✅ FEATURES: - Light gray background - Rounded corners - Title with icon - Grid of quick links ========================================================================== */ .quick-access-section { background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); border-radius: 15px; padding: 2rem; margin: 2rem 0; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } .quick-access-section h2 { color: #2c3e50; font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .quick-access-section h2 i { color: #ffc107; } /* ========================================================================== 14. QUICK LINKS PURPOSE: Interactive link buttons in grid layout USED IN: Quick access section REUSABLE: YES ✅✅ FEATURES: - White background - Border outline - Icon + text - Hover transforms to blue gradient - Responsive grid ========================================================================== */ .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; } .quick-link { background: white; padding: 1.25rem; border-radius: 10px; text-align: center; text-decoration: none; color: #2c3e50; border: 2px solid #e9ecef; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .quick-link:hover { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; text-decoration: none; border-color: #007bff; transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3); } .quick-link i { font-size: 2rem; transition: transform 0.3s ease; } .quick-link:hover i { transform: scale(1.2); } .quick-link span { font-weight: 600; font-size: 0.95rem; } /* ========================================================================== 15. INFO BANNER PURPOSE: Information banner with icon and text USED IN: Welcome screen REUSABLE: YES ✅✅ FEATURES: - Teal gradient background - White text - Circular icon badge - Side-by-side layout ========================================================================== */ .info-banner { background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%); color: white; padding: 1.5rem 2rem; border-radius: 12px; margin-top: 2rem; display: flex; align-items: start; gap: 1.5rem; box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3); } .banner-icon { flex-shrink: 0; width: 60px; height: 60px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; } .banner-content h4 { margin: 0 0 0.5rem 0; font-size: 1.3rem; font-weight: 700; } .banner-content p { margin: 0; line-height: 1.7; opacity: 0.95; } /* ========================================================================== 16. SECTION STYLING PURPOSE: Show/hide mechanism for different sections USED IN: All download sections REUSABLE: YES ✅ FEATURES: - Hidden by default - Show with .active class - Fade-in animation ========================================================================== */ .download-section { display: none; } .download-section.active { display: block; animation: fadeIn 0.3s ease-in; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== 17. SECTION HEADER PURPOSE: Blue gradient header for document sections USED IN: Each document type section REUSABLE: YES ✅✅ FEATURES: - Blue gradient background - White text - Title with icon - Subtitle ========================================================================== */ .section-header { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; padding: 1.5rem; border-radius: 12px; margin-bottom: 2rem; box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3); } .section-header h2 { margin: 0; font-size: 1.8rem; font-weight: 700; display: flex; align-items: center; gap: 0.75rem; } .section-header p { margin: 0.5rem 0 0 0; opacity: 0.95; } /* ========================================================================== 18. INFO CARD DETAIL PURPOSE: Detailed info card for each document USED IN: Document sections REUSABLE: YES ✅✅ FEATURES: - White to gray gradient background - Rounded corners - Blue left border - Box shadow - Contains doc info grid, description, features ========================================================================== */ .info-card-detail { background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%); border-radius: 16px; padding: 2.5rem; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); margin-bottom: 2rem; border-left: 6px solid #007bff; } .info-card-detail h3 { color: #2c3e50; font-size: 1.6rem; font-weight: 700; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.75rem; } .info-card-detail h3 i { color: #007bff; font-size: 1.8rem; } /* ========================================================================== 19. DOC INFO GRID PURPOSE: Grid of document metadata USED IN: Info card detail REUSABLE: YES ✅✅✅ FEATURES: - Responsive grid (auto-fit, minmax) - White background items - Border on items - Hover effects - Label + value structure ========================================================================== */ .doc-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .doc-info-item { background: white; padding: 1.25rem; border-radius: 10px; border: 2px solid #e9ecef; transition: all 0.3s ease; } .doc-info-item:hover { border-color: #007bff; transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2); } .doc-info-item .label { font-size: 0.85rem; color: #6c757d; font-weight: 600; text-transform: uppercase; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .doc-info-item .label i { color: #007bff; } .doc-info-item .value { font-size: 1.1rem; color: #2c3e50; font-weight: 600; } /* ========================================================================== 20. DOC DESCRIPTION & FEATURES PURPOSE: Styled containers for document details USED IN: Info card detail REUSABLE: YES ✅✅ FEATURES: - Description: Gray background, teal left border - Features: White background, dashed border, check list ========================================================================== */ .doc-description { color: #555; line-height: 1.8; margin-bottom: 2rem; padding: 1.5rem; background: #f8f9fa; border-radius: 10px; border-left: 4px solid #17a2b8; } .doc-description p { margin: 0 0 1rem 0; } .doc-description p:last-child { margin-bottom: 0; } .doc-features { background: #fff; padding: 1.5rem; border-radius: 10px; border: 2px dashed #dee2e6; margin-bottom: 2rem; } .doc-features h4 { color: #2c3e50; font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .doc-features h4 i { color: #28a745; } .doc-features ul { list-style: none; padding: 0; margin: 0; } .doc-features ul li { padding: 0.75rem 0; color: #555; display: flex; align-items: start; gap: 0.75rem; border-bottom: 1px solid #f0f0f0; } .doc-features ul li:last-child { border-bottom: none; } .doc-features ul li i { color: #28a745; font-size: 1.1rem; margin-top: 0.2rem; flex-shrink: 0; } /* ========================================================================== 21. ACTION BUTTONS PURPOSE: Styled buttons for document actions USED IN: Info card detail REUSABLE: YES ✅✅✅ FEATURES: - Flexible layout - Minimum width for consistency - Icon + text - 3 variants: View (blue), Download (green), External (purple) - Hover lift and shadow effects ========================================================================== */ .action-buttons { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; } .btn-action { flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1rem 2rem; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: 1.05rem; transition: all 0.3s ease; border: none; cursor: pointer; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .btn-action i { font-size: 1.3rem; } /* View Button - Blue */ .btn-view { background: linear-gradient(135deg, #007bff 0%, #0056b3 100%); color: white; } .btn-view:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); color: white; text-decoration: none; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4); } /* Download Button - Green */ .btn-download-action { background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%); color: white; } .btn-download-action:hover { background: linear-gradient(135deg, #1e7e34 0%, #155724 100%); color: white; text-decoration: none; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4); } /* External Link Button - Purple */ .btn-external-action { background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%); color: white; } .btn-external-action:hover { background: linear-gradient(135deg, #5a32a3 0%, #4a2682 100%); color: white; text-decoration: none; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4); } /* ========================================================================== 22. IFRAME CONTAINER PURPOSE: Container for embedded external documents USED IN: Document sections (IRA contracts, Green Book) REUSABLE: YES ✅✅ FEATURES: - Gray background - Rounded corners - Hidden by default - Show with .show class - Slide-down animation - Contains iframe, header, loading indicator ========================================================================== */ .iframe-container { background: #f8f9fa; border-radius: 12px; padding: 1rem; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); display: none; margin-top: 2rem; } .iframe-container.show { display: block; animation: slideDown 0.4s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .iframe-container iframe { width: 100%; min-height: 600px; border: none; border-radius: 8px; background: white; } /* ========================================================================== 23. IFRAME HEADER & CONTROLS PURPOSE: Header bar with title and close button USED IN: Iframe container REUSABLE: YES ✅ FEATURES: - Teal gradient background - White text - Title with icon - Close button ========================================================================== */ .iframe-header { background: linear-gradient(135deg, #17a2b8 0%, #117a8b 100%); color: white; padding: 1rem 1.5rem; border-radius: 8px 8px 0 0; margin: -1rem -1rem 1rem -1rem; display: flex; justify-content: space-between; align-items: center; } .iframe-header h4 { margin: 0; font-size: 1.2rem; font-weight: 700; display: flex; align-items: center; gap: 0.5rem; } .btn-close-iframe { background: rgba(255, 255, 255, 0.2); border: 2px solid white; color: white; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; } .btn-close-iframe:hover { background: white; color: #17a2b8; } /* ========================================================================== 24. LOADING INDICATOR PURPOSE: Spinning icon while iframe loads USED IN: Iframe container REUSABLE: YES ✅ FEATURES: - Hidden by default - Show with .active class - Spinning icon animation ========================================================================== */ .iframe-loading { display: none; text-align: center; padding: 2rem; color: #6c757d; } .iframe-loading.active { display: block; } .iframe-loading i { font-size: 2rem; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ========================================================================== 25. SIDEBAR ELEMENTS PURPOSE: Sidebar search and form styling USED IN: Sidebar search form REUSABLE: YES ✅ (for other AdminLTE pages) FEATURES: - Semi-transparent white backgrounds - Hover effects - Placeholder styling - Divider and heading ========================================================================== */ .sidebar .form-control-sidebar { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); color: white; } .sidebar .form-control-sidebar:focus { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: white; } .sidebar .form-control-sidebar::placeholder { color: rgba(255, 255, 255, 0.5); } .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); } .sidebar .btn-sidebar:hover { background: rgba(255, 255, 255, 0.2); color: white; } /* 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; } /* ========================================================================== 26. BRAND LINK PURPOSE: Remove underline from brand link USED IN: Sidebar brand logo/text REUSABLE: YES ✅ ========================================================================== */ .brand-link .brand-text { text-decoration: none !important; color: inherit; } /* ========================================================================== 27. RESPONSIVE: MOBILE (≤768px) PURPOSE: Mobile optimization CHANGES: - Reduce padding throughout - Stack action buttons vertically - Single column doc info grid - Vertical info banner - Smaller iframe height - Smaller welcome header - Adjust quick links grid - Stack DateTime container ========================================================================== */ @media (max-width: 768px) { .download-wrapper { padding: 1.5rem; } .section-header h2 { font-size: 1.4rem; } .iframe-container iframe { min-height: 400px; } .action-buttons { flex-direction: column; } .btn-action { min-width: 100%; } .doc-info-grid { grid-template-columns: 1fr; } .info-card-detail { padding: 1.5rem; } .welcome-header h1 { font-size: 1.6rem; flex-direction: column; } .welcome-header h1 i { font-size: 2rem; } .welcome-subtitle { font-size: 1rem; } .welcome-info-content h3 { font-size: 1.3rem; } .quick-links { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .info-banner { flex-direction: column; text-align: center; } .banner-icon { margin: 0 auto; } .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 12+ pages - MUST extract to shared CSS - Sidebar styling consistent with all AdminLTE pages - Active state uses green gradient (sustainability theme) - Iframe integration for external documents (irainfo.org, simpktn) - Section navigation via JavaScript (show/hide) - Lazy loading for iframes (load on demand) DEPENDENCIES: - Bootstrap 5.x - Font Awesome 6.x - AdminLTE 3.2 - Google Fonts (Inter) - jQuery 3.6.0 - External URLs (irainfo.org, simpktn.kemendag.go.id) PERFORMANCE: - Transform animations are GPU-accelerated - Hover effects use scale (not width/height) - Minimal box-shadow for mobile performance - Iframe lazy loading reduces initial page load - Section show/hide avoids reloading content ACCESSIBILITY: - Iframe has proper attributes and title - Active state has multiple indicators (color + icon + dot) - Hover effects maintain readability - Color contrast meets WCAG AA standards - Focus states visible on interactive elements - Action buttons have descriptive text BROWSER SUPPORT: - CSS Animations: All modern browsers - CSS Grid: IE11+ (with -ms- prefix) - Flexbox: IE11+ (full support) - Transform animations: All modern browsers - Gradient backgrounds: IE10+ - Border-radius: IE9+ - Iframe seamless: Modern browsers DESIGN PATTERNS: - AdminLTE template integration - Purple/blue sidebar theme (consistent) - Green active state (sustainability) - Welcome screen with info cards - Quick access grid - Document detail pages - Iframe integration for external content - Section-based navigation - Rounded corners (10-20px border-radius) - Gradient backgrounds for emphasis CONTENT STRUCTURE: - Welcome screen with 3 info cards + quick access - Kontrak TSR (IRA iframe) - Kontrak Latex (IRA iframe) - Spesifikasi TSR (PDF download) - Spesifikasi RSS (IRA iframe) - SIMPKTN Manual (external link) JAVASCRIPT DEPENDENCIES: - AdminLTE sidebar toggle and treeview - jQuery for DOM manipulation - showSection() - Section navigation - loadIframe() - Lazy iframe loading - closeIframe() - Close iframe EXTERNAL INTEGRATIONS: - IRA (International Rubber Association) contracts - SIMPKTN (Kementerian Perdagangan RI) manual - Local PDF files in /file/ directory FUTURE IMPROVEMENTS: - Add download tracking analytics - Implement PDF viewer instead of external links - Add document version history - Consider replacing iframes with embedded PDF.js - Add print stylesheet for documents - Implement offline download queue - Add document search functionality - Create mobile app for document access ========================================================================== */