MetatroncubeSoftwareSolutions/crawlerx_website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Box and center pre-footer CTA section within 1200px container

Browse Source
This commit is contained in:
metatroncubeswdev 2026-10-19 07:54:23 -04:00
parent 02a694f3ca
commit f06fc215ba
1 changed files with 116 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/index.css
View File

@ -1806,6 +1806,67 @@ input[type=range].agency-slider::-webkit-slider-thumb {
display: block;
}
/* ==========================================================================
PRE-FOOTER CTA CARD (Boxed, Centered, High-Impact)
========================================================================== */
.pre-footer-cta, .final-cta-section {
max-width: 1200px;
margin: 96px auto 96px;
padding: 64px 40px;
position: relative;
background: radial-gradient(120% 120% at 50% 0%, rgba(20, 32, 45, 0.95) 0%, rgba(10, 16, 22, 0.98) 100%);
border: 1px solid rgba(63, 182, 174, 0.28);
border-radius: var(--radius-xl);
text-align: center;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), var(--shadow-glow-teal);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.pre-footer-cta::before, .final-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 20%;
right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, var(--teal-vibrant), transparent);
}
.pre-footer-cta .eyebrow-pill {
margin-bottom: 20px;
}
.pre-footer-cta h2 {
font-size: 38px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.03em;
color: #FFFFFF;
margin: 0 0 16px 0;
max-width: 760px;
}
.pre-footer-cta p {
font-size: 16.5px;
line-height: 1.6;
color: var(--ink-secondary);
max-width: 620px;
margin: 0 auto 32px auto;
}
.pre-footer-cta .cta-buttons {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
/* ==========================================================================
BLOG & ARTICLES LISTING
========================================================================= */
@ -2134,6 +2195,28 @@ input[type=range].agency-slider::-webkit-slider-thumb {
.ui-diff-container, .codecmp { grid-template-columns: 1fr; }
.ui-workbench, .ui-body { grid-template-columns: 1fr; }
.ui-rail, .ui-sidebar { display: none; }
.pre-footer-cta, .final-cta-section {
margin: 48px 16px 64px !important;
padding: 40px 20px !important;
border-radius: var(--radius-lg) !important;
}
.pre-footer-cta h2 {
font-size: 26px !important;
line-height: 1.25 !important;
}
.pre-footer-cta p {
font-size: 14.5px !important;
}
.pre-footer-cta .cta-buttons {
flex-direction: column !important;
width: 100% !important;
gap: 12px !important;
}
.pre-footer-cta .cta-buttons a,
.pre-footer-cta .cta-buttons button {
width: 100% !important;
justify-content: center !important;
}
}
/* ==========================================================================
@ -3201,14 +3284,45 @@ body.theme-light::before {
}
/* Pre-footer CTA & Footer in Light Mode */
[data-theme="light"] .pre-footer-cta,
[data-theme="light"] .final-cta-section,
.theme-light .pre-footer-cta,
.theme-light .final-cta-section {
background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
border: 1.5px solid rgba(14, 110, 106, 0.22) !important;
box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04) !important;
}
[data-theme="light"] .pre-footer-cta::before,
[data-theme="light"] .final-cta-section::before,
.theme-light .pre-footer-cta::before,
.theme-light .final-cta-section::before {
background: linear-gradient(90deg, transparent, #0E6E6A, transparent) !important;
}
[data-theme="light"] .pre-footer-cta h2,
.theme-light .pre-footer-cta h2 {
color: #0F172A;
color: #0F172A !important;
}
[data-theme="light"] .pre-footer-cta p,
.theme-light .pre-footer-cta p {
color: #475569;
color: #475569 !important;
}
[data-theme="light"] .pre-footer-cta .btn-outline,
.theme-light .pre-footer-cta .btn-outline {
background: #FFFFFF !important;
color: #0F172A !important;
border: 1px solid rgba(15, 23, 42, 0.18) !important;
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .pre-footer-cta .btn-outline:hover,
.theme-light .pre-footer-cta .btn-outline:hover {
background: #F8FAFC !important;
border-color: #0E6E6A !important;
color: #0E6E6A !important;
}
[data-theme="light"] .footer,