/* Footer layout adjustments - completely unified */ .md-footer__unified { width: 100%; background-color: var(--md-footer-bg-color); color: var(--md-footer-fg-color); padding: 1rem 0; } .md-footer__inner { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .footer-content { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; } .footer-nav-links { flex-shrink: 0; min-width: 80px; display: flex; align-items: center; } .footer-nav-prev { margin-right: auto; } .footer-nav-next { margin-left: auto; justify-content: flex-end; } .footer-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center; } /* Inline subscribe form */ .footer-subscribe-inline { margin-bottom: 0.5rem; } .subscribe-row-inline { display: flex; align-items: center; justify-content: center; gap: 1rem; } .subscribe-logo-small { width: 60px; height: auto; opacity: 0.9; } .inline-form-container { display: flex; align-items: center; gap: 0.5rem; } .email-input-inline { width: 200px; padding: 0.4rem 0.6rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: 0.85rem; } .email-input-inline:focus { outline: none; border-color: var(--md-primary-fg-color); box-shadow: 0 0 0 2px var(--md-primary-fg-color--light); } .subscribe-btn-inline { background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); border: none; padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; white-space: nowrap; } .subscribe-btn-inline:hover { background: var(--md-accent-fg-color); } .md-copyright { font-size: 0.8rem; opacity: 0.9; } /* Original nav link styles */ .md-footer__link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--md-footer-fg-color); text-decoration: none; font-size: 0.9rem; padding: 0.5rem; border-radius: 4px; transition: background-color 0.2s ease; white-space: nowrap; } .md-footer__link:hover { background: rgba(255, 255, 255, 0.1); } .nav-icon { width: 1.2rem; height: 1.2rem; display: inline-flex; align-items: center; justify-content: center; } .nav-icon svg { width: 100%; height: 100%; fill: currentColor; } .nav-label { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Dark theme adjustments for inline subscribe */ [data-md-color-scheme="slate"] .email-input-inline { background: var(--md-code-bg-color); border-color: var(--md-default-fg-color--lightest); } [data-md-color-scheme="slate"] .email-input-inline:focus { border-color: var(--md-accent-fg-color); box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2); } /* Responsive adjustments for footer */ @media (max-width: 768px) { .footer-content { flex-direction: column; gap: 0.7rem; } .footer-nav-links { width: 100%; justify-content: center; } .footer-center { width: 100%; order: 1; } .footer-nav-prev { order: 0; } .footer-nav-next { order: 2; } .subscribe-row-inline { flex-direction: column; gap: 0.5rem; } .inline-form-container { flex-direction: column; width: 100%; } .email-input-inline { width: 100%; max-width: 250px; } } /* Subscribe Footer Styles */ .md-footer-subscribe { background: var(--md-footer-bg-color); border-top: 1px solid var(--md-footer-fg-color--light); padding: 1.5rem 0; } .md-footer-subscribe__inner { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .subscribe-row { display: flex; align-items: center; justify-content: center; gap: 2rem; max-width: 600px; margin: 0 auto; } .subscribe-container { max-width: 350px; text-align: center; flex: 1; } .subscribe-logo-container { flex-shrink: 0; } .subscribe-logo { width: 200px; height: auto; opacity: 0.9; } .subscribe-container h3 { color: var(--md-footer-fg-color); font-size: 1.25rem; font-weight: 600; margin-bottom: 0.4rem; line-height: 1.3; } .subscribe-description { color: var(--md-footer-fg-color--light); margin-bottom: 1.2rem; font-size: 0.85rem; line-height: 1.4; } .form-group { margin-bottom: 0.8rem; } .email-input, .name-input { width: 100%; max-width: 320px; padding: 0.6rem 0.8rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .email-input:focus, .name-input:focus { outline: none; border-color: var(--md-primary-fg-color); box-shadow: 0 0 0 2px var(--md-primary-fg-color--light); } .email-input::placeholder, .name-input::placeholder { color: var(--md-default-fg-color--light); } .checkbox-group { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.2rem; } .checkbox-group input[type="checkbox"] { margin: 0; transform: scale(1.0); } .checkbox-group label { color: var(--md-footer-fg-color--light); font-size: 0.8rem; cursor: pointer; user-select: none; } .subscribe-btn { background: var(--md-primary-fg-color); color: var(--md-primary-bg-color); border: none; padding: 0.6rem 1.5rem; border-radius: 4px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; min-width: 100px; } .subscribe-btn:hover { background: var(--md-accent-fg-color); transform: translateY(-1px); } .subscribe-btn:active { transform: translateY(0); } /* Dark theme adjustments */ [data-md-color-scheme="slate"] .email-input, [data-md-color-scheme="slate"] .name-input { background: var(--md-code-bg-color); border-color: var(--md-default-fg-color--lightest); } [data-md-color-scheme="slate"] .email-input:focus, [data-md-color-scheme="slate"] .name-input:focus { border-color: var(--md-accent-fg-color); box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2); } /* Dark theme adjustments for subscribe grid item */ [data-md-color-scheme="slate"] .grid-item.subscribe .email-input, [data-md-color-scheme="slate"] .grid-item.subscribe .name-input { background: var(--md-code-bg-color); border-color: var(--md-default-fg-color--lightest); } [data-md-color-scheme="slate"] .grid-item.subscribe .email-input:focus, [data-md_color-scheme="slate"] .grid-item.subscribe .name-input:focus { border-color: var(--md-accent-fg-color); box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.2); } /* Home Page Hero and Content Styles */ .hero-with-image { position: relative; overflow: hidden; min-height: 60vh; display: flex; align-items: center; padding: 3rem 0; } .hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: url('/assets/images/header.png'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.8; z-index: -1; } .hero-background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(124, 77, 255, 0.7), rgba(220, 53, 69, 0.6)); z-index: 1; } .hero-with-image .md-hero__inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 2rem; text-align: center; } .hero-with-image h1 { color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.7); font-size: 3rem; font-weight: bold; margin-bottom: 1rem; max-width: 800px; margin-left: auto; margin-right: auto; } .hero-with-image p { color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); font-size: 1.25rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.5; } .hero-actions { margin-top: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; } .hero-actions .md-button { background: rgba(255, 255, 255, 0.9); color: var(--md-primary-fg-color); border: 2px solid transparent; font-weight: 600; text-shadow: none; backdrop-filter: blur(10px); transition: all 0.3s ease; } .hero-actions .md-button:hover { background: rgba(255, 255, 255, 1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .hero-actions .md-button--primary { background: var(--md-primary-fg-color); color: white; } .hero-actions .md-button--primary:hover { background: var(--md-accent-fg-color); color: white; } .alert { padding: 1.5rem; margin: 2rem 0; border-radius: 8px; border-left: 4px solid; } .alert-danger { background-color: rgba(75, 0, 130, 0.95); /* Much darker purple */ border-left-color: #4b0082; color: white; font-weight: 500; } .alert-danger h2 { color: white !important; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); margin-bottom: 1rem; margin-top: 0; padding-bottom: 0; border-bottom: none; } .alert-danger strong { color: white; font-weight: 700; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin: 2rem 0; } .grid-item { padding: 2rem; border-radius: 8px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .grid-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .grid-item.threat { background: linear-gradient(135deg, rgba(220, 53, 69, 0.1), rgba(220, 53, 69, 0.05)); border-left: 4px solid #dc3545; } .grid-item.corruption { background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 193, 7, 0.05)); border-left: 4px solid #ffc107; } .grid-item.solution { background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05)); border-left: 4px solid #28a745; } .grid-item.subscribe { background: linear-gradient(135deg, rgba(124, 77, 255, 0.1), rgba(124, 77, 255, 0.05)); border-left: 4px solid #7c4dff; text-align: center; } .grid-item.subscribe h3 { color: var(--md-primary-fg-color); margin-bottom: 1rem; } .grid-item.subscribe p { margin-bottom: 1.5rem; color: var(--md-default-fg-color--light); } .grid-item.subscribe .form-group { margin-bottom: 1rem; } .grid-item.subscribe .email-input, .grid-item.subscribe .name-input { width: 100%; max-width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; background: var(--md-default-bg-color); color: var(--md-default-fg-color); font-size: 0.95rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .grid-item.subscribe .email-input:focus, .grid-item.subscribe .name-input:focus { outline: none; border-color: var(--md-primary-fg-color); box-shadow: 0 0 0 2px rgba(124, 77, 255, 0.2); } .grid-item.subscribe .checkbox-group { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; font-size: 0.9rem; } .grid-item.subscribe .checkbox-group label { color: var(--md-default-fg-color--light); cursor: pointer; } .grid-item.subscribe .subscribe-btn { background: var(--md-primary-fg-color); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 4px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; width: 100%; max-width: 200px; } .grid-item.subscribe .subscribe-btn:hover { background: var(--md-accent-fg-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(124, 77, 255, 0.3); } .tactics-grid, .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; margin: 2rem 0; } .tactic-item, .action-item { padding: 1.5rem; background: rgba(124, 77, 255, 0.05); border-radius: 8px; border: 1px solid rgba(124, 77, 255, 0.2); transition: all 0.3s ease; } .tactic-item:hover, .action-item:hover { background: rgba(124, 77, 255, 0.1); border-color: rgba(124, 77, 255, 0.4); } .section-divider { height: 2px; background: linear-gradient(90deg, transparent, var(--md-default-fg-color--lightest), transparent); margin: 3rem 0; } .quick-links-section { margin: 3rem 0; } .quick-links-section h2 { text-align: center; margin-bottom: 1rem; } .quick-links-section p { text-align: center; margin-bottom: 2rem; color: var(--md-default-fg-color--light); } .quick-links-section .grid-item h4 { color: var(--md-primary-fg-color); margin-bottom: 1rem; font-size: 1.1rem; } .quick-links-section .grid-item p { margin-bottom: 1.5rem; text-align: center; font-size: 0.9rem; color: var(--md-default-fg-color--light); } /* Force code blocks to wrap instead of scroll */ .highlight pre, .codehilite pre, code { white-space: pre-wrap !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } /* Ensure code block containers don't create horizontal scroll */ .highlight, .codehilite { overflow-x: visible !important; overflow-y: visible !important; } /* Make sure inline code also wraps */ p code, li code { white-space: pre-wrap !important; word-break: break-word !important; } /* FAQ Dropdown Styles */ .faq-item { margin-bottom: 1rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; overflow: hidden; transition: all 0.3s ease; background: var(--md-default-bg-color); } .faq-item:hover { border-color: var(--md-primary-fg-color--light); box-shadow: 0 2px 8px rgba(124, 77, 255, 0.1); } .faq-item summary { padding: 1.25rem 1.5rem; background: var(--md-default-bg-color); cursor: pointer; font-weight: 600; font-size: 1.1rem; color: var(--md-default-fg-color); border: none; outline: none; transition: all 0.3s ease; position: relative; list-style: none; user-select: none; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; color: var(--md-primary-fg-color); transition: transform 0.3s ease; } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-item summary:hover { background: rgba(124, 77, 255, 0.05); color: var(--md-primary-fg-color); } .faq-content { padding: 0 1.5rem 1.5rem 1.5rem; color: var(--md-default-fg-color--light); line-height: 1.6; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .faq-content ul { margin: 1rem 0; padding-left: 1.5rem; } .faq-content li { margin-bottom: 0.5rem; } .faq-content strong { color: var(--md-default-fg-color); font-weight: 600; } /* Dark theme adjustments for FAQ */ [data-md-color-scheme="slate"] .faq-item { background: var(--md-code-bg-color); border-color: var(--md-default-fg-color--lightest); } [data-md-color-scheme="slate"] .faq-item:hover { border-color: var(--md-accent-fg-color); box-shadow: 0 2px 8px rgba(255, 193, 7, 0.1); } [data-md-color-scheme="slate"] .faq-item summary { background: var(--md-code-bg-color); } [data-md_color-scheme="slate"] .faq-item summary:hover { background: rgba(255, 193, 7, 0.1); color: var(--md-accent-fg-color); } [data-md-color-scheme="slate"] .faq-item summary::after { color: var(--md-accent-fg-color); } /* FAQ section headers */ .md-content h2 { margin-top: 3rem; margin-bottom: 1.5rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--md-default-fg-color--lightest); color: var(--md-primary-fg-color); } /* Override the general h2 styling for alert-danger specifically */ .alert-danger h2 { color: white !important; font-weight: 700; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); margin-bottom: 1rem; margin-top: 0; padding-bottom: 0; border-bottom: none; } .md-content h2:first-of-type { margin-top: 1.5rem; } /* Responsive adjustments for subscribe row */ @media (max-width: 768px) { .subscribe-row { flex-direction: column; gap: 1rem; } .subscribe-logo { width: 60px; } } /* Footer layout adjustments */ .md-footer-meta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .md-footer-nav { display: flex; gap: 1rem; flex: 1; min-width: 0; } .md-footer-content { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; } .md-footer__link { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem; border-radius: 4px; transition: background-color 0.2s ease; text-decoration: none; color: var(--md-footer-fg-color); font-size: 0.9rem; } .md-footer__link:hover { background: rgba(255, 255, 255, 0.1); color: var(--md-footer-fg-color); } .md-footer__button { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .md-footer__title { min-width: 0; } .md-footer__direction { font-size: 0.75rem; opacity: 0.8; display: block; } .md-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } /* Responsive adjustments for footer */ @media (max-width: 768px) { .md-footer-meta__inner { flex-direction: column; align-items: stretch; gap: 1rem; } .md-footer-nav { justify-content: space-between; } .md-footer-content { justify-content: center; flex-direction: column; gap: 0.5rem; } .md-footer__link { flex: 1; justify-content: center; text-align: center; } }