russell@unturf.com
5ff8cb6587
Remove all <br> spacers, <center> tags, inline styles, HR dividers. Alternating white/gray sections, pill CTAs with hover lift, 16px radius cards with box-shadow, green "Best value" badge on annual pricing, tinted protection lists, numbered step circles, gradient final CTA. New landing.css isolates landing styles from shared common.css.
447 lines
7.6 KiB
CSS
447 lines
7.6 KiB
CSS
/* ============================================
|
|
LANDING PAGE — Modern flat redesign
|
|
Keeps the palette, Grid, Helvetica.
|
|
Adds depth, breathing room, visual rhythm.
|
|
============================================ */
|
|
|
|
/* ---- Layout reset for landing ---- */
|
|
|
|
.landing-content {
|
|
background-color: #FFFFFF;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ---- Nav tweaks ---- */
|
|
|
|
.nav-grid .nav {
|
|
padding: 16px 24px;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-grid .nav .logo {
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-grid .nav .logo img.logo {
|
|
width: auto;
|
|
max-height: 40px;
|
|
padding: 0;
|
|
}
|
|
|
|
.nav-grid .log-in {
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.nav-sep {
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.nav-grid .log-in a {
|
|
color: #515151;
|
|
font-weight: 500;
|
|
font-size: 15px;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.nav-grid .log-in a:hover {
|
|
color: #a3c765;
|
|
}
|
|
|
|
/* ---- Hero ---- */
|
|
|
|
.landing-hero {
|
|
background-color: #FFFFFF;
|
|
padding: 60px 24px 70px;
|
|
text-align: center;
|
|
max-width: none;
|
|
}
|
|
|
|
.landing-hero-inner {
|
|
max-width: 680px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.landing-hero-title {
|
|
font-family: helvetica, arial, sans-serif;
|
|
font-size: 3.2em;
|
|
font-weight: 700;
|
|
color: #0b0b0b;
|
|
line-height: 1.1;
|
|
margin: 0 0 20px;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.landing-hero-subtitle {
|
|
font-size: 1.25em;
|
|
font-weight: 500;
|
|
color: #0b0b0b;
|
|
margin: 0 0 24px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.landing-hero-body {
|
|
font-size: 1.05em;
|
|
color: #666;
|
|
line-height: 1.7;
|
|
margin: 0 0 36px;
|
|
max-width: 560px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
/* ---- Sections ---- */
|
|
|
|
.landing-section {
|
|
padding: 64px 24px;
|
|
}
|
|
|
|
.landing-section-alt {
|
|
background-color: #F9F9FA;
|
|
}
|
|
|
|
.landing-section-title {
|
|
font-family: helvetica, arial, sans-serif;
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
color: #0b0b0b;
|
|
margin: 0 0 12px;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.landing-body {
|
|
font-size: 1.05em;
|
|
color: #515151;
|
|
line-height: 1.7;
|
|
margin: 0 0 24px;
|
|
}
|
|
|
|
.landing-body a {
|
|
color: #a3c765;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
border-bottom: 1px solid transparent;
|
|
transition: border-color 0.2s ease;
|
|
}
|
|
|
|
.landing-body a:hover {
|
|
border-bottom-color: #a3c765;
|
|
}
|
|
|
|
.landing-muted {
|
|
color: #999;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ---- CTA Buttons ---- */
|
|
|
|
.landing-cta-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin: 0 0 16px;
|
|
}
|
|
|
|
a.mps-button.landing-cta {
|
|
border-radius: 50px;
|
|
min-width: 200px;
|
|
padding: 16px 32px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
transition: transform 0.15s ease, box-shadow 0.2s ease;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
a.mps-button.landing-cta:hover {
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
a.mps-button.landing-cta-large {
|
|
padding: 18px 48px;
|
|
font-size: 18px;
|
|
min-width: 260px;
|
|
}
|
|
|
|
/* ---- Pricing ---- */
|
|
|
|
.landing-pricing {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
margin: 32px 0;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.landing-pricing-card {
|
|
background: #FFFFFF;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 16px;
|
|
padding: 36px 24px;
|
|
text-align: center;
|
|
position: relative;
|
|
transition: box-shadow 0.2s ease, transform 0.15s ease;
|
|
}
|
|
|
|
.landing-pricing-card:hover {
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.landing-pricing-featured {
|
|
border: 2px solid #a3c765;
|
|
box-shadow: 0 4px 20px rgba(163, 199, 101, 0.15);
|
|
}
|
|
|
|
.landing-pricing-badge {
|
|
position: absolute;
|
|
top: -13px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: #a3c765;
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 4px 16px;
|
|
border-radius: 50px;
|
|
}
|
|
|
|
.landing-pricing-icon {
|
|
font-size: 28px;
|
|
display: block;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.landing-pricing-amount {
|
|
font-size: 3em;
|
|
font-weight: 700;
|
|
color: #0b0b0b;
|
|
display: block;
|
|
line-height: 1;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.landing-pricing-period {
|
|
font-size: 0.35em;
|
|
font-weight: 400;
|
|
color: #999;
|
|
}
|
|
|
|
.landing-pricing-desc {
|
|
font-size: 15px;
|
|
color: #666;
|
|
display: block;
|
|
}
|
|
|
|
/* ---- Cards (override common.css for landing) ---- */
|
|
|
|
.landing-content .mps-card {
|
|
border: 1px solid #eee;
|
|
border-radius: 12px;
|
|
padding: 28px 24px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.landing-section-alt .mps-card {
|
|
background: #FFFFFF;
|
|
}
|
|
|
|
.landing-content .mps-card:hover {
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.landing-content .mps-card-icon {
|
|
font-size: 32px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.landing-content .mps-card-title {
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.landing-content .mps-card-title a {
|
|
color: #0b0b0b;
|
|
text-decoration: none;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.landing-content .mps-card-title a:hover {
|
|
color: #a3c765;
|
|
}
|
|
|
|
.landing-content .mps-card-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ---- Step cards ---- */
|
|
|
|
.landing-step-card {
|
|
text-align: center;
|
|
}
|
|
|
|
.landing-step-number {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: #a3c765;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* ---- Comparison donut section ---- */
|
|
|
|
.landing-content .mps-comparison {
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.landing-content .mps-comparison-card {
|
|
border-radius: 16px;
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.donut-chart {
|
|
display: block;
|
|
margin: 0 auto 16px;
|
|
}
|
|
|
|
.donut-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 16px;
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
|
|
/* ---- Protection lists ---- */
|
|
|
|
.landing-two-lists {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
margin-top: 28px;
|
|
}
|
|
|
|
.landing-list-card {
|
|
border-radius: 12px;
|
|
padding: 28px 24px;
|
|
}
|
|
|
|
.landing-list-bad {
|
|
background: #fef2f2;
|
|
border: 1px solid #f5d5d5;
|
|
}
|
|
|
|
.landing-list-good {
|
|
background: #f0f9e8;
|
|
border: 1px solid #d5e8c0;
|
|
}
|
|
|
|
.landing-list-card ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.landing-list-card li {
|
|
padding: 10px 0;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
color: #333;
|
|
}
|
|
|
|
.landing-list-card li + li {
|
|
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.landing-x {
|
|
color: #c77765;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.landing-check {
|
|
color: #678731;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.landing-list-detail {
|
|
color: #666;
|
|
}
|
|
|
|
/* ---- Final CTA ---- */
|
|
|
|
.landing-final-cta {
|
|
background: linear-gradient(135deg, #f8faf5 0%, #f0f6ff 100%);
|
|
text-align: center;
|
|
padding: 80px 24px;
|
|
}
|
|
|
|
.landing-final-cta .landing-section-title {
|
|
font-size: 2.2em;
|
|
margin-bottom: 28px;
|
|
}
|
|
|
|
/* ---- Responsive ---- */
|
|
|
|
@media (min-width: 800px) {
|
|
.landing-hero {
|
|
padding: 80px 40px 100px;
|
|
}
|
|
|
|
.landing-hero-title {
|
|
font-size: 4em;
|
|
}
|
|
|
|
.landing-section {
|
|
padding: 80px 40px;
|
|
}
|
|
|
|
.landing-pricing {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.landing-two-lists {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.nav-grid .nav {
|
|
padding: 16px 40px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.landing-hero-title {
|
|
font-size: 4.5em;
|
|
}
|
|
|
|
.landing-hero {
|
|
padding: 100px 40px 120px;
|
|
}
|
|
|
|
.landing-section {
|
|
padding: 100px 40px;
|
|
}
|
|
}
|