:root{--page-title-display:none;}/* Start custom CSS *//* ══════════════════════════════════════════════════════════════ KEY2SUCCESS COMPLETE SERIES — Page Styles WHERE TO PASTE: Elementor → Edit Page → Page Settings (gear icon, bottom left) → Advanced tab → Custom CSS → paste everything below NOTE: All styles are namespaced under .k2s-complete so they will not conflict with your theme or other pages. FONTS: Load "Lato" and "Playfair Display" via Elementor's Site Settings → Global Fonts, OR via a plugin like "Insert Headers and Footers" with this in : ══════════════════════════════════════════════════════════════ */ .k2s-complete { --gold: #f0ad4e; --gold-dark: #9d8336; --gold-light: #fdf3e0; --black: #121212; --dark: rgba(0,0,0,0.80); --text: #4f4f4f; --text-light: #757575; --bg-light: #f9fafa; --bg-callout: #fffbf2; --border: #e8e0cc; --white: #ffffff; font-family: 'Lato', Arial, sans-serif; color: var(--text); background: var(--white); line-height: 1.6; } .k2s-complete *, .k2s-complete *::before, .k2s-complete *::after { box-sizing: border-box; } /* ── HERO ── */ .k2s-complete .hero { background: var(--black); color: var(--white); padding: 80px 24px 72px; text-align: center; position: relative; overflow: hidden; } .k2s-complete .hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 40px, rgba(240,173,78,0.04) 40px, rgba(240,173,78,0.04) 41px ); } .k2s-complete .hero-eyebrow { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(240,173,78,0.4); padding: 6px 18px; border-radius: 2px; margin-bottom: 28px; position: relative; } .k2s-complete .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(36px, 5vw, 64px); font-weight: 700; color: var(--white); line-height: 1.1; max-width: 780px; margin: 0 auto 24px; position: relative; } .k2s-complete .hero h1 span { color: var(--gold); } .k2s-complete .hero-subtitle { font-size: clamp(16px, 2vw, 20px); font-weight: 300; color: rgba(255,255,255,0.75); max-width: 600px; margin: 0 auto 40px; position: relative; } .k2s-complete .hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; position: relative; } .k2s-complete .hero-tag { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--black); background: var(--gold); padding: 8px 18px; border-radius: 2px; } /* ── SECTION WRAPPER ── */ .k2s-complete .section { padding: 72px 24px; } .k2s-complete .section.section-no-top { padding-top: 0; } .k2s-complete .section-inner { max-width: 1080px; margin: 0 auto; } .k2s-complete .section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; } .k2s-complete .section-label.section-label-light { color: rgba(240,173,78,0.8); } .k2s-complete .section-title { font-size: clamp(24px, 3vw, 36px); font-weight: 900; color: var(--black); line-height: 1.2; margin-bottom: 16px; } .k2s-complete .section-title.section-title-light { color: var(--white); } .k2s-complete .section-desc { font-size: 17px; color: var(--text); max-width: 640px; margin-bottom: 48px; } .k2s-complete .section-desc.section-desc-light { color: rgba(255,255,255,0.6); } /* ── WHY COMPLETE ── */ .k2s-complete .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; margin-top: 48px; } .k2s-complete .why-card { background: var(--bg-callout); border: 1px solid var(--border); border-top: 3px solid var(--gold); padding: 28px 24px; border-radius: 2px; } .k2s-complete .why-icon { width: 40px; height: 40px; background: var(--gold); border-radius: 2px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .k2s-complete .why-icon svg { width: 20px; height: 20px; fill: var(--black); } .k2s-complete .why-card h3 { font-size: 15px; font-weight: 700; color: var(--black); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.06em; } .k2s-complete .why-card p { font-size: 14px; line-height: 1.65; } /* ── APPS SECTION ── */ .k2s-complete .apps-bg { background: var(--bg-callout); } .k2s-complete .apps-section { padding-top: 0; padding-bottom: 56px; } .k2s-complete .apps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; } .k2s-complete .app-block-label { font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; border-bottom: 2px solid var(--gold); padding-bottom: 8px; display: inline-block; } .k2s-complete .app-block h3 { font-size: 18px; font-weight: 900; color: var(--black); margin-bottom: 10px; } .k2s-complete .app-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .k2s-complete .app-pill { font-size: 12px; font-weight: 700; color: var(--black); background: var(--white); border: 1px solid var(--border); padding: 5px 12px; border-radius: 2px; } /* ── TIER CARDS ── */ .k2s-complete .tiers-bg { background: var(--bg-light); } .k2s-complete .tiers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 48px; } .k2s-complete .tier-card { background: var(--white); border: 1px solid var(--border); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } .k2s-complete .tier-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.10); } .k2s-complete .tier-card.featured { border: 2px solid var(--gold); } .k2s-complete .tier-header { background: var(--black); padding: 20px 20px 16px; position: relative; } .k2s-complete .tier-card.featured .tier-header { background: #1a1400; } .k2s-complete .tier-header-ultimate { background: #1a1400 !important; } .k2s-complete .tier-badge { position: absolute; top: 12px; right: 12px; font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--gold); color: var(--black); padding: 3px 8px; border-radius: 2px; } .k2s-complete .tier-badge-ultimate { background: var(--white); color: var(--black); } .k2s-complete .tier-name { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } .k2s-complete .tier-title { font-size: 17px; font-weight: 900; color: var(--white); line-height: 1.2; } .k2s-complete .tier-price { font-size: 26px; font-weight: 900; color: var(--gold); margin-top: 12px; font-family: 'Playfair Display', serif; } .k2s-complete .tier-body { padding: 20px; flex: 1; display: flex; flex-direction: column; } .k2s-complete .tier-features { list-style: none; padding: 0; margin: 0 0 20px 0; flex: 1; } .k2s-complete .tier-features li { font-size: 13px; line-height: 1.5; padding: 5px 0; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; gap: 8px; color: var(--text); } .k2s-complete .tier-features li:last-child { border-bottom: none; } .k2s-complete .tier-features li::before { content: ''; width: 14px; height: 14px; min-width: 14px; border-radius: 50%; background: var(--gold); margin-top: 2px; display: flex; align-items: center; justify-content: center; } .k2s-complete .tier-coupon { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); background: var(--gold-light); border: 1px solid var(--border); padding: 6px 10px; border-radius: 2px; margin-bottom: 16px; text-align: center; } .k2s-complete .tier-coupon-ultimate { background: var(--black); color: var(--gold); border-color: var(--gold-dark); } .k2s-complete .tier-cta { display: block; background: var(--gold); color: var(--black); text-align: center; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 16px; border-radius: 2px; text-decoration: none; transition: background 0.2s; } .k2s-complete .tier-cta:hover { background: #e09c35; color: var(--black); } /* ── COMPARISON TABLE ── */ .k2s-complete .compare-wrap { overflow-x: auto; margin-top: 48px; } .k2s-complete .compare-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; } .k2s-complete .compare-table th { background: var(--black); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 14px 16px; text-align: center; } .k2s-complete .compare-table th:first-child { text-align: left; background: #1c1c1c; } .k2s-complete .compare-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: center; color: var(--text); } .k2s-complete .compare-table td:first-child { text-align: left; font-weight: 700; color: var(--black); background: var(--bg-callout); } .k2s-complete .compare-table tr:last-child td { border-bottom: none; } .k2s-complete .compare-table tr:nth-child(even) td:not(:first-child) { background: var(--bg-light); } .k2s-complete .check { display: inline-block; width: 18px; height: 18px; background: var(--gold); border-radius: 50%; line-height: 18px; font-size: 11px; font-weight: 900; color: var(--black); } .k2s-complete .dash { color: #ccc; font-size: 18px; } .k2s-complete .featured-col { border-left: 2px solid var(--gold); border-right: 2px solid var(--gold); } /* ── SUPPORT CALLOUT ── */ .k2s-complete .support-bg { background: var(--black); } .k2s-complete .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 48px; } .k2s-complete .support-card { border: 1px solid rgba(240,173,78,0.3); padding: 32px 28px; border-radius: 2px; background: rgba(255,255,255,0.03); } .k2s-complete .support-card-label { font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; } .k2s-complete .support-card h3 { font-size: 20px; font-weight: 900; color: var(--white); margin-bottom: 12px; line-height: 1.2; } .k2s-complete .support-card p { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.7; } .k2s-complete .support-card ul { list-style: none; padding: 0; margin: 16px 0 0 0; } .k2s-complete .support-card ul li { font-size: 13px; color: rgba(255,255,255,0.65); padding: 4px 0; padding-left: 18px; position: relative; } .k2s-complete .support-card ul li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-weight: 700; } /* ── TILE COUPON ── */ .k2s-complete .coupon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 48px; } .k2s-complete .coupon-card { border: 1px dashed var(--border); padding: 24px 20px; text-align: center; border-radius: 2px; background: var(--bg-callout); } .k2s-complete .coupon-card-gold { border-color: var(--gold); } .k2s-complete .coupon-pct { font-family: 'Playfair Display', serif; font-size: 42px; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: 4px; } .k2s-complete .coupon-pct-text { font-size: 28px; margin-top: 6px; } .k2s-complete .coupon-off { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 12px; } .k2s-complete .coupon-name { font-size: 13px; font-weight: 700; color: var(--black); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; } .k2s-complete .coupon-desc { font-size: 12px; color: var(--text-light); line-height: 1.5; } .k2s-complete .coupon-included { background: var(--black); color: var(--gold); border-color: var(--gold); border-style: solid; } .k2s-complete .coupon-included .coupon-pct { color: var(--gold); } .k2s-complete .coupon-included .coupon-off, .k2s-complete .coupon-included .coupon-name { color: var(--gold); } .k2s-complete .coupon-included .coupon-desc { color: rgba(255,255,255,0.65); } /* ── FINAL CTA ── */ .k2s-complete .final-cta-bg { background: var(--gold); padding: 72px 24px; text-align: center; } .k2s-complete .final-cta-bg h2 { font-family: 'Playfair Display', serif; font-size: clamp(28px, 4vw, 48px); font-weight: 700; color: var(--black); margin-bottom: 16px; line-height: 1.1; } .k2s-complete .final-cta-bg p { font-size: 17px; color: rgba(0,0,0,0.65); max-width: 540px; margin: 0 auto 36px; } .k2s-complete .cta-btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .k2s-complete .cta-btn-dark { background: var(--black); color: var(--gold); font-size: 13px; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; padding: 16px 32px; border-radius: 2px; text-decoration: none; transition: opacity 0.2s; } .k2s-complete .cta-btn-dark:hover { opacity: 0.85; color: var(--gold); } .k2s-complete .cta-btn-outline { border: 2px solid var(--black); color: var(--black); font-size: 13px; font-weight: 900; letter-spacing: 0.10em; text-transform: uppercase; padding: 14px 32px; border-radius: 2px; text-decoration: none; transition: background 0.2s; } .k2s-complete .cta-btn-outline:hover { background: rgba(0,0,0,0.08); color: var(--black); } /* ── IMAGE PLACEHOLDER ── */ .k2s-complete .img-placeholder { background: var(--border); height: 360px; display: flex; align-items: center; justify-content: center; border-radius: 2px; font-size: 13px; color: var(--text-light); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } @media (max-width: 680px) { .k2s-complete .apps-grid { grid-template-columns: 1fr; } .k2s-complete .tiers-grid { grid-template-columns: 1fr; } }/* End custom CSS */