top of page
bottom of page
/* Case Study Template - Stylesheet Extends the main styles.css with specific case study styling */ /* ===== Case Study Header ===== */ .case-study-header { background-color: var(--bg-secondary); padding: 120px 0 var(--spacing-lg); text-align: center; } .breadcrumbs { margin-bottom: var(--spacing-md); color: var(--text-secondary); font-size: 0.875rem; } .breadcrumbs a { color: var(--text-secondary); transition: color var(--transition-fast); } .breadcrumbs a:hover { color: var(--accent-color); } .case-study-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--spacing-md); margin-top: var(--spacing-md); } .meta-item { display: flex; align-items: center; color: var(--text-secondary); } .meta-item i { color: var(--accent-color); margin-right: var(--spacing-xs); } /* ===== Case Study Sections ===== */ .case-study-section { padding: var(--spacing-xl) 0; } .case-study-section:nth-child(odd) { background-color: var(--bg-primary); } .case-study-section:nth-child(even) { background-color: var(--bg-secondary); } /* ===== Overview Section ===== */ .overview-content { display: grid; grid-template-columns: 3fr 2fr; gap: var(--spacing-lg); align-items: center; } .overview-text p { margin-bottom: var(--spacing-md); } .overview-image { border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } /* ===== Tools Section ===== */ .tools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); } .tool-card { background-color: var(--bg-tertiary); padding: var(--spacing-md); border-radius: var(--radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transition: transform var(--transition-medium); } .tool-card:hover { transform: translateY(-5px); } .tool-icon { font-size: 2rem; color: var(--accent-color); margin-bottom: var(--spacing-sm); text-align: center; } .tool-card h3 { text-align: center; margin-bottom: var(--spacing-md); color: var(--text-primary); } .tool-card ul { list-style: none; } .tool-card ul li { padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); } .tool-card ul li:last-child { border-bottom: none; } /* ===== Process Section ===== */ .process-timeline { position: relative; max-width: 1000px; margin: 0 auto; } .process-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50px; width: 2px; background-color: var(--accent-color); } .timeline-item { position: relative; padding-left: 100px; margin-bottom: var(--spacing-lg); } .timeline-item:last-child { margin-bottom: 0; } .timeline-number { position: absolute; left: 0; top: 0; width: 50px; height: 50px; background-color: var(--accent-color); color: var(--bg-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; z-index: 1; } .timeline-content { background-color: var(--bg-tertiary); padding: var(--spacing-md); border-radius: var(--radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); } .timeline-content h3 { margin-bottom: var(--spacing-sm); color: var(--accent-color); } .timeline-content p { margin-bottom: var(--spacing-md); } .timeline-image { margin-top: var(--spacing-md); border-radius: var(--radius-sm); overflow: hidden; } /* ===== Before & After Section ===== */ .before-after-container { display: flex; flex-direction: column; gap: var(--spacing-xl); } .before-after-item h3 { margin-bottom: var(--spacing-md); text-align: center; } .comparison-slider { position: relative; width: 100%; height: 500px; overflow: hidden; border-radius: var(--radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .before-image, .after-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .before-image { z-index: 1; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); } .after-image { z-index: 0; } .before-image img, .after-image img { width: 100%; height: 100%; object-fit: cover; } .label { position: absolute; top: 20px; padding: 5px 10px; background-color: rgba(0, 0, 0, 0.7); color: white; font-size: 0.875rem; border-radius: var(--radius-sm); } .before-image .label { left: 20px; } .after-image .label { right: 20px; } .slider-handle { position: absolute; top: 0; left: 50%; width: 4px; height: 100%; background-color: var(--accent-color); z-index: 2; cursor: ew-resize; } .handle-line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .handle-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; background-color: var(--accent-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--bg-primary); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); } .comparison-description { margin-top: var(--spacing-md); text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } /* ===== Challenges Section ===== */ .challenges-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); } .challenge-card { background-color: var(--bg-tertiary); padding: var(--spacing-md); border-radius: var(--radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transition: transform var(--transition-medium); } .challenge-card:hover { transform: translateY(-5px); } .challenge-icon { font-size: 2rem; color: var(--accent-color); margin-bottom: var(--spacing-sm); text-align: center; } .challenge-card h3 { text-align: center; margin-bottom: var(--spacing-md); color: var(--text-primary); } /* ===== Results Section ===== */ .results-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: center; margin-bottom: var(--spacing-lg); } .results-text p { margin-bottom: var(--spacing-md); } .results-image { border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .testimonial { background-color: var(--bg-tertiary); padding: var(--spacing-lg); border-radius: var(--radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); text-align: center; position: relative; } .quote-icon { font-size: 2rem; color: var(--accent-color); margin-bottom: var(--spacing-sm); } .testimonial blockquote { font-size: 1.25rem; font-style: italic; margin-bottom: var(--spacing-md); color: var(--text-primary); } .testimonial-author { color: var(--text-secondary); } /* ===== Related Projects ===== */ .related-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); } .related-project { background-color: var(--bg-tertiary); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); transition: transform var(--transition-medium); } .related-project:hover { transform: translateY(-10px); } .related-image { height: 200px; overflow: hidden; } .related-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .related-project:hover .related-image img { transform: scale(1.05); } .related-project h3 { padding: var(--spacing-sm) var(--spacing-md); margin-bottom: 0; } .related-project p { padding: 0 var(--spacing-md); margin-bottom: var(--spacing-md); } .related-project .btn { margin: 0 var(--spacing-md) var(--spacing-md); } /* ===== CTA Section ===== */ .cta-section { background-color: var(--bg-tertiary); text-align: center; } .cta-content { max-width: 800px; margin: 0 auto; } .cta-content h2 { margin-bottom: var(--spacing-sm); } .cta-content p { margin-bottom: var(--spacing-md); } .cta-buttons { display: flex; justify-content: center; gap: var(--spacing-md); } /* ===== Responsive Styles ===== */ @media (max-width: 992px) { .overview-content, .results-content { grid-template-columns: 1fr; } .overview-image, .results-image { order: -1; margin-bottom: var(--spacing-md); } .comparison-slider { height: 400px; } .cta-buttons { flex-direction: column; align-items: center; gap: var(--spacing-sm); } } @media (max-width: 768px) { .case-study-meta { flex-direction: column; gap: var(--spacing-sm); } .process-timeline::before { left: 25px; } .timeline-item { padding-left: 60px; } .timeline-number { width: 40px; height: 40px; font-size: 1rem; } .comparison-slider { height: 300px; } } @media (max-width: 576px) { .case-study-header { padding: 100px 0 var(--spacing-md); } .comparison-slider { height: 250px; } .handle-circle { width: 30px; height: 30px; } }