/* ============================================================================ * Shared layout for the earning-programme marketing pages: affiliate, seller, * and the hobby-and-career hub. Accent colour is set per page on . * ========================================================================== */ .prog { --prog-accent: var(--quilt-rose); --prog-accent-2: var(--sunflower-gold); --prog-hero-from: #3a2430; --prog-hero-via: #5a3344; --prog-hero-to: #8e4a4a; } .prog-theme-rose { --prog-accent: var(--quilt-rose); --prog-accent-2: var(--sunflower-gold); --prog-hero-from: #3a2430; --prog-hero-via: #5a3344; --prog-hero-to: #8e4a4a; } .prog-theme-sage { --prog-accent: #5f7150; --prog-accent-2: var(--sage-thread); --prog-hero-from: #24332a; --prog-hero-via: #355040; --prog-hero-to: #5f7150; } .prog-theme-indigo { --prog-accent: var(--patch-blue); --prog-accent-2: var(--sunflower-gold); --prog-hero-from: #232d47; --prog-hero-via: #2e3a59; --prog-hero-to: #46608a; } /* ---- Hero ---------------------------------------------------------------- */ .prog-hero { position: relative; padding: 150px 0 90px; background: linear-gradient(135deg, var(--prog-hero-from) 0%, var(--prog-hero-via) 45%, var(--prog-hero-to) 100%); color: #fff; overflow: hidden; } .prog-hero::before, .prog-hero::after { content: ""; position: absolute; width: 420px; height: 420px; opacity: 0.1; background: conic-gradient(from 45deg at 50% 50%, var(--prog-accent-2) 0 25%, transparent 0 50%, var(--prog-accent) 0 75%, transparent 0) 0 0 / 105px 105px; pointer-events: none; } .prog-hero::before { top: -140px; right: -120px; transform: rotate(8deg); } .prog-hero::after { bottom: -160px; left: -140px; transform: rotate(-6deg); } .prog-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; } .prog-eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(243, 201, 105, 0.16); border: 1px solid rgba(243, 201, 105, 0.45); color: var(--prog-accent-2); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; } .prog-hero h1 { font-size: 48px; font-weight: 800; line-height: 1.08; margin-bottom: 22px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); } .prog-hero h1 .prog-accent { background: linear-gradient(120deg, var(--prog-accent-2) 0%, var(--prog-accent) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .prog-hero .prog-lead { font-size: 19px; line-height: 1.65; opacity: 0.94; max-width: 560px; margin-bottom: 32px; } .prog-hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; } .prog-hero .btn-secondary { color: #fff; border-color: rgba(255, 255, 255, 0.75); } .prog-hero .btn-secondary:hover { background: #fff; color: var(--midnight-indigo); } .prog-hero-note { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; opacity: 0.85; } .prog-hero-note span::before { content: "✓"; color: var(--prog-accent-2); font-weight: 800; margin-right: 7px; } /* Browser / landing mock */ .prog-browser { position: relative; border-radius: 18px; background: #fff; box-shadow: 0 30px 80px rgba(10, 14, 28, 0.45); overflow: hidden; color: var(--text-primary); } .prog-browser-chrome { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: linear-gradient(180deg, #f7f8fa 0%, #eef0f4 100%); border-bottom: 1px solid rgba(46, 58, 89, 0.1); } .prog-browser-dots { display: flex; gap: 7px; } .prog-browser-dots span { width: 11px; height: 11px; border-radius: 50%; } .prog-browser-dots span:nth-child(1) { background: #ff5f57; } .prog-browser-dots span:nth-child(2) { background: #febc2e; } .prog-browser-dots span:nth-child(3) { background: #28c840; } .prog-browser-url { flex: 1; font-size: 13px; font-weight: 600; color: #5e6b87; background: #fff; border: 1px solid rgba(46, 58, 89, 0.12); border-radius: 8px; padding: 6px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .prog-browser-url strong { color: var(--midnight-indigo); } .prog-browser img { display: block; width: 100%; height: auto; } .prog-landing-body { padding: 28px 28px 32px; } .prog-landing-body p.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--prog-accent); margin-bottom: 8px; } .prog-landing-body h3 { font-size: 22px; margin-bottom: 10px; } .prog-landing-body p { color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; } .prog-code-pill { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; padding: 8px 14px; border-radius: 8px; background: var(--cream-linen); border: 1px dashed rgba(46, 58, 89, 0.2); color: var(--midnight-indigo); } /* ---- Sections ------------------------------------------------------------ */ .prog-section { padding: 88px 0; } .prog-section.alt { background: #fff; } .prog-center { text-align: center; max-width: 760px; margin: 0 auto 48px; } .prog-kicker { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--prog-accent); margin-bottom: 14px; } .prog-section h2 { font-size: 34px; font-weight: 800; line-height: 1.2; margin-bottom: 16px; } .prog-sub { font-size: 18px; line-height: 1.7; color: var(--text-secondary); } .prog-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; } .prog-split.reverse > :first-child { order: 2; } .prog-ticks { list-style: none; margin-top: 20px; } .prog-ticks li { position: relative; padding-left: 28px; margin-bottom: 14px; line-height: 1.6; } .prog-ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--prog-accent); font-weight: 800; } /* ---- Steps / cards --------------------------------------------------------- */ .prog-steps, .prog-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .prog-steps.four { grid-template-columns: repeat(4, 1fr); } .prog-step, .prog-card { background: #fff; border-radius: 16px; padding: 28px 24px; box-shadow: var(--shadow-sm); border: 1px solid rgba(46, 58, 89, 0.08); } .prog-section.alt .prog-step, .prog-section.alt .prog-card { background: var(--cream-linen); } .prog-step-num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--prog-accent); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 14px; } .prog-step h3, .prog-card h3 { font-size: 20px; margin-bottom: 10px; } .prog-step p, .prog-card p { color: var(--text-secondary); line-height: 1.6; } .prog-card a.stretched { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--prog-accent); text-decoration: none; } .prog-card a.stretched:hover { text-decoration: underline; } .prog-pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--prog-accent); background: rgba(226, 114, 91, 0.1); padding: 4px 10px; border-radius: 999px; margin-bottom: 12px; } .prog-theme-sage .prog-pill { background: rgba(95, 113, 80, 0.12); } .prog-theme-indigo .prog-pill { background: rgba(126, 168, 190, 0.18); } .prog-cards.two { grid-template-columns: 1fr 1fr; } .prog-cards.four { grid-template-columns: repeat(2, 1fr); } /* ---- Proof / numbers -------------------------------------------------------- */ .prog-proof { background: #fff; padding: 36px 0; border-bottom: 1px solid rgba(46, 58, 89, 0.08); } .prog-proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; } .prog-proof strong { display: block; font-size: 28px; font-weight: 800; color: var(--midnight-indigo); } .prog-proof span { color: var(--text-secondary); font-size: 14.5px; } /* ---- Compare table (ecosystem) ----------------------------------------- */ .prog-compare { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .prog-compare-card { background: #fff; border-radius: 18px; padding: 32px 26px 28px; border: 1px solid rgba(46, 58, 89, 0.1); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .prog-compare-card h3 { font-size: 22px; margin-bottom: 8px; } .prog-compare-card .who { font-size: 15px; color: var(--text-secondary); margin-bottom: 16px; min-height: 48px; } .prog-compare-card ul { list-style: none; flex: 1; margin-bottom: 22px; } .prog-compare-card li { padding: 8px 0 8px 22px; position: relative; line-height: 1.5; border-top: 1px solid rgba(46, 58, 89, 0.08); } .prog-compare-card li:first-child { border-top: 0; } .prog-compare-card li::before { content: "→"; position: absolute; left: 0; color: var(--prog-accent); font-weight: 700; } .prog-compare-card .btn { align-self: flex-start; } /* ---- Hobby vs career ------------------------------------------------------- */ .prog-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .prog-lane { border-radius: 18px; padding: 32px 28px; background: #fff; border: 1px solid rgba(46, 58, 89, 0.08); } .prog-lane h3 { font-size: 24px; margin-bottom: 12px; } .prog-lane p { color: var(--text-secondary); margin-bottom: 16px; line-height: 1.65; } .prog-lane a { color: var(--prog-accent); font-weight: 600; } /* ---- FAQ / final ----------------------------------------------------------- */ .prog-faq-list { max-width: 820px; margin: 0 auto; } .prog-final { background: linear-gradient(135deg, var(--prog-hero-from) 0%, var(--prog-hero-to) 100%); color: #fff; text-align: center; padding: 80px 0; } .prog-final h2 { font-size: 36px; margin-bottom: 14px; } .prog-final p { font-size: 18px; max-width: 640px; margin: 0 auto 28px; opacity: 0.94; line-height: 1.6; } .prog-final a:not(.btn) { color: inherit; text-decoration: underline; } .prog-final .prog-hero-note { justify-content: center; margin-top: 22px; } .prog-related { padding: 48px 0 72px; background: #fff; } .prog-related h2 { font-size: 22px; margin-bottom: 20px; text-align: center; } .prog-related-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .prog-related-links a { display: inline-block; padding: 10px 16px; border-radius: 999px; background: var(--cream-linen); color: var(--midnight-indigo); font-weight: 600; text-decoration: none; border: 1px solid rgba(46, 58, 89, 0.1); } .prog-related-links a:hover { border-color: var(--prog-accent); color: var(--prog-accent); } .prog-figure { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-md); } .prog-figure img { width: 100%; height: auto; display: block; } .prog-caption { font-size: 14px; color: var(--text-secondary); margin-top: 12px; } @media (max-width: 1080px) { .prog-steps.four, .prog-proof-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 968px) { .prog-hero { padding: 130px 0 70px; } .prog-hero-grid, .prog-split, .prog-split.reverse, .prog-lanes, .prog-compare { grid-template-columns: 1fr; } .prog-split.reverse > :first-child { order: 2; } .prog-hero h1 { font-size: 36px; } .prog-section h2 { font-size: 29px; } .prog-steps, .prog-cards, .prog-cards.two, .prog-cards.four { grid-template-columns: 1fr; } } @media (max-width: 640px) { .prog-hero h1 { font-size: 30px; } .prog-section { padding: 64px 0; } .prog-proof-grid { grid-template-columns: 1fr 1fr; } .prog-final h2 { font-size: 28px; } }