diff --git a/assets/images/oliver-arnold.jpg b/assets/images/oliver-arnold.jpg new file mode 100644 index 0000000..d5e2e38 Binary files /dev/null and b/assets/images/oliver-arnold.jpg differ diff --git a/index.html b/index.html index 49e16ef..0b0d1a6 100644 --- a/index.html +++ b/index.html @@ -975,6 +975,114 @@ .pricing-card.featured { transform: none; } } + /* ══════════════════════════════════════════════════════════ + PRICING SLIDER & ORDER FORM + ══════════════════════════════════════════════════════════ */ + .pricing-slider { + position: relative; + overflow: hidden; + max-width: 960px; + margin: 0 auto; + } + .pricing-slider-track { + display: flex; + transition: transform 0.5s cubic-bezier(.34,1.56,.64,1); + transform: translateX(0); + } + .pricing-slider-track.slide-left { + transform: translateX(-50%); + } + .pricing-panel, + .order-panel { + min-width: 100%; + box-sizing: border-box; + } + .order-panel { + background: var(--bg-card); + border: 1px solid var(--border-hi); + border-radius: var(--radius-card); + padding: 40px 36px; + box-shadow: var(--shadow); + text-align: center; + } + .order-panel h3 { + font-size: 1.3rem; + margin-bottom: 8px; + } + .order-panel .order-plan { + color: var(--accent); + font-weight: 600; + margin-bottom: 20px; + } + .order-email-row { + margin-bottom: 24px; + text-align: left; + } + .order-email-row label { + display: block; + font-size: 12px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--text-muted); + margin-bottom: 6px; + } + .order-email-row input { + width: 100%; + padding: 12px 16px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: var(--radius); + color: var(--text); + font-size: 15px; + outline: none; + transition: border-color 0.2s; + box-sizing: border-box; + } + .order-email-row input:focus { + border-color: var(--accent); + } + .order-stripe-btn { + width: 100%; + padding: 14px 28px; + border: none; + border-radius: var(--radius); + background: linear-gradient(135deg, var(--accent), #5a7de0); + color: #fff; + font-size: 15px; + font-weight: 600; + cursor: pointer; + transition: opacity 0.2s, transform 0.15s; + } + .order-stripe-btn:hover { opacity: 0.9; transform: scale(1.02); } + .order-stripe-btn:active { transform: scale(0.97); } + .order-stripe-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } + .order-back { + display: inline-block; + margin-top: 16px; + font-size: 13px; + color: var(--text-muted); + cursor: pointer; + text-decoration: none; + } + .order-back:hover { color: var(--accent); } + .order-status { + margin-top: 16px; + font-size: 13px; + color: var(--text-muted); + display: none; + } + .order-status.show { + display: block; + animation: msgSlide 0.25s cubic-bezier(.22,1,.36,1); + } + .order-status.success { color: #4ade80; } + .order-status.error { color: #f87171; } + + @media (max-width: 900px) { + .order-panel { padding: 32px 24px; } + } + /* ══════════════════════════════════════════════════════════ FAQ ══════════════════════════════════════════════════════════ */ @@ -1815,6 +1923,10 @@
+ + + + + + + @@ -1989,7 +2119,7 @@