/* ============================================================ WHOLESALE TED – FREE EBOOK LANDING PAGE styles.css ============================================================ */ /* ---------- Google Font is loaded in ---------- */ /* ---------- CSS Custom Properties (design tokens) ---------- */ :root { --bg: hsl(24, 52%, 13%); /* deep warm dark brown */ --bg-card: hsl(24, 52%, 16%); --bg-secondary:hsl(24, 52%, 20%); --primary: hsl(26, 66%, 46%); /* burnt orange */ --primary-dim: hsl(26, 66%, 56%); --white: #ffffff; --white-90: rgba(255,255,255,0.90); --white-70: rgba(255,255,255,0.70); --white-60: rgba(255,255,255,0.60); --white-50: rgba(255,255,255,0.50); --white-30: rgba(255,255,255,0.30); --white-10: rgba(255,255,255,0.10); --white-05: rgba(255,255,255,0.05); --muted-fg: hsl(30, 20%, 70%); --border: hsl(24, 30%, 25%); --radius: 0.75rem; --font: 'Inter', sans-serif; } /* ---------- Reset / Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font); background-color: var(--bg); color: var(--white); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: var(--primary); text-decoration: none; } /* ---------- Utility ---------- */ .container { width: 100%; max-width: 1152px; margin-inline: auto; padding-inline: 1.5rem; } .text-primary { color: var(--primary); } .text-primary-dim { color: var(--primary-dim); } /* ============================================================ HERO SECTION ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, #050202 0%, #120503 50%, #050202 100%); } /* Canvas sits behind everything */ #ai-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; pointer-events: none; } /* Vignette overlays */ .hero-vignette-lr { position: absolute; inset: 0; background: linear-gradient(to right, rgba(5,2,2,0.80) 0%, transparent 50%, rgba(5,2,2,0.60) 100%); pointer-events: none; } .hero-vignette-tb { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 60%, rgba(5,2,2,0.90) 100%); pointer-events: none; } .hero-inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 3rem; padding-block: 5rem 7rem; } @media (min-width: 1024px) { .hero-inner { flex-direction: row; gap: 4rem; padding-block: 7rem; } } /* --- Ebook image --- */ .hero-image-wrap { position: relative; flex-shrink: 0; } .glow-box { position: absolute; inset: -1rem; border-radius: 1.5rem; background: rgba(196,98,38,0.20); filter: blur(2rem); pointer-events: none; } .glow-box--sm { inset: -1.5rem; background: rgba(196,98,38,0.10); filter: blur(3rem); } .hero-ebook-img { position: relative; width: 16rem; filter: drop-shadow(0 25px 50px rgba(0,0,0,0.6)); } @media (min-width: 640px) { .hero-ebook-img { width: 18rem; } } @media (min-width: 1024px) { .hero-ebook-img { width: 20rem; } } /* --- Hero content --- */ .hero-content { flex: 1; text-align: center; } @media (min-width: 1024px) { .hero-content { text-align: left; } } .author-byline { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; } .byline-avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; border: 2px solid rgba(196,98,38,0.50); } .byline-text { font-size: 0.875rem; color: var(--white-70); } .hero-heading { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 800; line-height: 1.1; color: var(--white); margin-bottom: 0.5rem; } .hero-subheading { font-size: clamp(1.25rem, 3vw, 1.875rem); font-weight: 600; color: var(--white-90); line-height: 1.25; margin-bottom: 0.5rem; } .hero-tagline { font-size: 1.125rem; color: var(--muted-fg); margin-bottom: 0.5rem; } .hero-body { font-size: 1rem; color: #f8fafc; line-height: 1.6; max-width: 32rem; margin-bottom: 2rem; margin-inline: auto; } @media (min-width: 1024px) { .hero-body { margin-inline: 0; } } .bonus-note { font-size: 0.875rem; color: var(--white-80, rgba(255,255,255,.8)); margin-top: 1.25rem; max-width: 32rem; text-align: left; margin-inline: auto; } @media (min-width: 1024px) { .bonus-note { margin-inline: 0; } } /* ============================================================ SIGNUP FORM (shared) ============================================================ */ .signup-form { width: 100%; max-width: 36rem; margin-inline: auto; } @media (min-width: 1024px) { .signup-form:not(.signup-form--centered) { margin-inline: 0; } } .form-row { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .form-row { flex-direction: row; } } .form-input { flex: 1; height: 3.5rem; padding: 0 1rem; background: var(--white-10); border: 1px solid rgba(255,255,255,0.20); border-radius: var(--radius); color: var(--white); font-family: var(--font); font-size: 1rem; backdrop-filter: blur(8px); transition: background 0.2s, border-color 0.2s; outline: none; } .form-input::placeholder { color: var(--white-50); } .form-input:focus { background: rgba(255,255,255,0.15); border-color: var(--primary); } .btn-primary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3.5rem; margin-top: 0.75rem; background: var(--primary); border: none; border-radius: var(--radius); color: var(--white); font-family: var(--font); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .btn-primary:hover { background: hsl(26, 66%, 52%); transform: scale(1.02); box-shadow: 0 8px 32px rgba(196,98,38,0.35); } .btn-primary:active { transform: scale(0.99); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* --- Success state --- */ .success-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 1.5rem 0; } .success-msg--centered { align-items: center; } .success-icon { width: 4rem; height: 4rem; border-radius: 50%; background: rgba(34,197,94,0.20); color: #4ade80; font-size: 1.75rem; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; } .success-title { font-size: 1.25rem; font-weight: 600; color: var(--white); } .success-sub { font-size: 0.9rem; color: var(--muted-fg); } /* ============================================================ WHAT YOU'LL LEARN SECTION ============================================================ */ .learn-section { position: relative; padding-block: 4rem; overflow: hidden; } @media (min-width: 1024px) { .learn-section { padding-block: 5rem; } } .learn-bg-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, rgba(44,26,10,0.30) 50%, var(--bg) 100%); pointer-events: none; } .learn-inner { position: relative; z-index: 10; display: flex; flex-direction: column-reverse; align-items: center; gap: 3.5rem; } @media (min-width: 1024px) { .learn-inner { flex-direction: row; align-items: flex-start; } } .learn-text { flex: 1; } .section-eyebrow { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; } .section-heading { font-size: clamp(1.6rem, 3.5vw, 2.25rem); font-weight: 800; line-height: 1.2; color: var(--white); margin-bottom: 0.75rem; } .section-sub { font-size: 1.125rem; color: rgba(255,255,255,0.50); margin-bottom: 2.5rem; } /* Feature list */ .feature-list { list-style: none; display: flex; flex-direction: column; gap: 2rem; } .feature-item { display: flex; align-items: flex-start; gap: 1.25rem; } .feature-icon { flex-shrink: 0; margin-top: 0.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(196,98,38,0.20); display: flex; align-items: center; justify-content: center; } .feature-icon svg { width: 1.25rem; height: 1.25rem; stroke: var(--primary); } .feature-title { font-size: 1.0625rem; font-weight: 700; color: var(--white); margin-bottom: 0.375rem; } .feature-desc { font-size: 0.9375rem; color: var(--white-60); line-height: 1.65; } /* Learn ebook image */ .learn-image-wrap { position: relative; flex-shrink: 0; order: -1; } @media (min-width: 1024px) { .learn-image-wrap { order: 0; } } .learn-ebook-img { position: relative; width: 16rem; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); } @media (min-width: 640px) { .learn-ebook-img { width: 18rem; } } @media (min-width: 1024px) { .learn-ebook-img { width: 24rem; } } /* ============================================================ AUTHOR SECTION ============================================================ */ .author-section { position: relative; padding-block: 3.5rem; overflow: hidden; } @media (min-width: 1024px) { .author-section { padding-block: 4.5rem; } } .author-bg-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--bg) 0%, rgba(36,18,8,0.20) 100%); pointer-events: none; } .author-inner { position: relative; z-index: 10; text-align: center; } .author-photo-wrap { position: relative; display: inline-block; margin-bottom: 2rem; } .author-photo-glow { position: absolute; inset: -0.75rem; border-radius: 50%; background: rgba(196,98,38,0.20); filter: blur(1.25rem); } .author-photo { position: relative; width: 8rem; height: 8rem; border-radius: 50%; object-fit: cover; border: 4px solid rgba(196,98,38,0.30); box-shadow: 0 20px 60px rgba(0,0,0,0.5); } @media (min-width: 640px) { .author-photo { width: 10rem; height: 10rem; } } .author-heading { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--white); margin-bottom: 1.5rem; } .author-bio { font-size: 1.0625rem; color: var(--white-60); line-height: 1.75; max-width: 40rem; margin-inline: auto; margin-bottom: 1rem; } /* ============================================================ CTA SECTION ============================================================ */ .cta-section { position: relative; padding-block: 4rem; overflow: hidden; } @media (min-width: 1024px) { .cta-section { padding-block: 5.5rem; } } .cta-bg-gradient { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(36,18,8,0.20) 0%, var(--bg) 50%, var(--bg) 100%); pointer-events: none; } .cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: rgba(196,98,38,0.08); border-radius: 50%; filter: blur(3rem); pointer-events: none; } .cta-inner { position: relative; z-index: 10; max-width: 40rem; text-align: center; } .cta-heading { font-size: clamp(1.75rem, 4vw, 3rem); font-weight: 700; color: var(--white); line-height: 1.2; margin-bottom: 1.25rem; } .cta-body { font-size: 1.0625rem; color: var(--white-60); line-height: 1.65; margin-bottom: 2.5rem; max-width: 28rem; margin-inline: auto; } .cta-bonus { margin-top: 1.25rem; font-size: 0.9rem; color: var(--white-80, rgba(255,255,255,.8)); } /* ============================================================ FOOTER ============================================================ */ .site-footer { padding-block: 2.5rem; border-top: 1px solid rgba(255,255,255,0.05); } .footer-text { text-align: center; font-size: 0.875rem; color: rgba(255,255,255,0.30); } /*madave custom css*/ .rc-div { width: 100%; margin-top: 10px; } .message-success { font-size: 1em; line-height: 1; margin: 10px 0; color: #fff; font-family: 'Rubik', sans-serif; text-align: left; font-weight: 300; position: relative; display: none; text-align: left; } .message-success:before { display: inline-block; margin-inline-end: 5px; vertical-align: middle; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); content: '\f00c'; font-size: 90%; display: none; } .message-error-recaptcha { display: none; font-size: 1rem !important; } .message-error { font-size: 1em; font-size: 1rem !important; line-height: 1; margin: 10px 0; color: #FF7B7B; font-family: 'Rubik', sans-serif; text-align: left; font-weight: 300; position: relative; display: none; text-align: left; } .message-error:before { display: inline-block; margin-inline-end: 5px; vertical-align: middle; font-family: var(--fa-style-family, "Font Awesome 6 Free"); font-weight: var(--fa-style, 900); content: '\f00d'; font-size: 90%; } @media (max-width: 767px) { .form-input { flex: auto;} } /*madave custom css end*/ /* ============================================================ SCROLL REVEAL ANIMATIONS ============================================================ */ .fade-in-left { opacity: 0; transform: translateX(-2.5rem); animation: fadeInLeft 0.8s ease-out forwards; } .fade-in-up { opacity: 0; transform: translateY(1.875rem); animation: fadeInUp 0.8s 0.2s ease-out forwards; } @keyframes fadeInLeft { to { opacity: 1; transform: translateX(0); } } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* Intersection-observer driven reveals */ .scroll-reveal { opacity: 0; transform: translateY(1.875rem); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--delay, 0s); } .scroll-reveal-right { opacity: 0; transform: translateX(2.5rem); transition: opacity 0.8s ease, transform 0.8s ease; } .scroll-reveal.is-visible, .scroll-reveal-right.is-visible { opacity: 1; transform: none; }