) with NO classes. All presentation lives here, scoped to the section id the view emits:... Authoring conventions (identical for every event, text differs only): *phrase* -> gradient accent inside a heading (em) - item -> a card / row item (li) **Lead** -> a card's title inside an item (strong) > note -> caution / emphasis callout (blockquote) ~~₹999~~ -> struck old price (del) Icons are applied by position with :nth-child(), which is safe because every event keeps the same number of items in the same order. ========================================================================= */ /* ---- section theme variables (kept identical to master-class.css) ------- */ [data-bs-theme="dark"] { --agenda-card-bg: #1e293b; --agenda-item-bg: #0f172a; --agenda-border: rgba(255,255,255,.12); --target-section-bg: #1e293b; --target-item-bg: #0f172a; --target-border: rgba(255,255,255,.12); --target-icon-bg: rgba(99,102,241,.12); --build-section-bg: #0f172a; --build-card-bg: #1e293b; --build-border: rgba(255,255,255,.12); --build-icon-bg: rgba(99,102,241,.15); --struggle-bg: #1e293b; --struggle-item-bg: rgba(255,255,255,.05); --struggle-border: rgba(255,255,255,.10); --struggle-muted: rgba(255,255,255,.65); --struggle-text: #f1f5f9; --bonus-section-bg: #1e293b; --bonus-item-bg: #0f172a; --bonus-border: rgba(255,255,255,.12); --bonus-icon-bg: rgba(167,139,250,.12); --bonus-badge-bg: rgba(167,139,250,.10); --bonus-strike: rgba(255,255,255,.45); } [data-bs-theme="light"] { --agenda-card-bg: #f8fafc; --agenda-item-bg: #ffffff; --agenda-border: rgba(0,0,0,.12); --target-section-bg: #f8fafc; --target-item-bg: #ffffff; --target-border: rgba(0,0,0,.12); --target-icon-bg: rgba(99,102,241,.08); --build-section-bg: #ffffff; --build-card-bg: #f8fafc; --build-border: rgba(0,0,0,.10); --build-icon-bg: rgba(99,102,241,.08); --struggle-bg: #1e293b; --struggle-item-bg: rgba(255,255,255,.08); --struggle-border: rgba(255,255,255,.12); --struggle-muted: rgba(255,255,255,.70); --struggle-text: #f1f5f9; --bonus-section-bg: #f8fafc; --bonus-item-bg: #ffffff; --bonus-border: rgba(0,0,0,.10); --bonus-icon-bg: rgba(167,139,250,.10); --bonus-badge-bg: rgba(167,139,250,.08); --bonus-strike: rgba(0,0,0,.35); } :root { --accent: #6366f1; --accent-2: #a78bfa; } /* ---- shared helpers ----------------------------------------------------- */ #heading, #hero-point, #what, #audience, #build, #why, #bonus { font-family: inherit; } /* Center content robustly: flex column + align-items:center beats any margin:0 the list rules set (specificity no longer matters). Children cap their width. */ #what, #audience, #build, #why, #bonus { display: flex; flex-direction: column; align-items: center; } #what > *, #audience > *, #why > *, #bonus > * { width: 100%; max-width: 768px; } #build > * { width: 100%; max-width: 896px; } /* heading em / h2 em -> gradient accent */ #heading h1 em, #what h2 em, #audience h2 em, #build h2 em, #why h2 em, #bonus h2 em { font-style: normal; background: linear-gradient(135deg,#00d7ff,#ff00d9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* icon primitive: a masked box that inherits a color via background */ [id] li::before { content: ""; display: inline-block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; flex-shrink: 0; } /* =========================== #heading ==================================== */ #heading { margin-bottom: 1rem; } #heading h1 { font-size: clamp(1.8rem,4vw,3rem); font-weight: 800; line-height: 1.15; margin-bottom: .5rem; } #heading p { margin-bottom: .25rem; } #heading p:first-of-type { font-size: 1.25rem; font-weight: 600; color: var(--bs-secondary-color); } #heading p:last-of-type { font-size: .875rem; color: var(--bs-tertiary-color); margin-bottom: 1.5rem; } /* =========================== #hero-point (checklist) ===================== */ #hero-point ul { list-style: none; padding: 0; } #hero-point li { display: flex; align-items: flex-start; gap: .6rem; font-size: .95rem; margin-bottom: .75rem; color: var(--bs-body-color); } #hero-point li::before { width: 20px; height: 20px; border-radius: 50%; background: #4bc85a; -webkit-mask: var(--ic-hero-point-1) center/12px no-repeat; mask: var(--ic-hero-point-1) center/12px no-repeat; /* the mask cuts the check OUT; instead paint a green disc with a white check: */ background: #4bc85a; position: relative; } /* draw white check on top of the green disc */ #hero-point li { position: relative; padding-left: 0; } #hero-point li::before { -webkit-mask: none; mask: none; } #hero-point li::after { content: ""; position: absolute; left: 4px; top: 5px; width: 12px; height: 12px; background: #fff; -webkit-mask: var(--ic-hero-point-1) center/12px no-repeat; mask: var(--ic-hero-point-1) center/12px no-repeat; } /* =========================== #what (agenda) ============================== */ #what { background: var(--agenda-card-bg); padding: 3rem 1rem; } #what h2 { font-weight: 700; text-align: center; font-size: clamp(1.4rem,3vw,1.9rem); margin-bottom: .25rem; } #what h2 + p { text-align: center; color: var(--bs-secondary-color); font-size: .875rem; margin-bottom: 2.5rem; } #what ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; } #what li { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem; border-radius: .75rem; background: var(--agenda-item-bg); border: 1px solid var(--agenda-border); font-weight: 500; transition: all .2s ease; } #what li:hover { border-color: var(--accent); transform: translateY(-2px); } #what li::before { width: 20px; height: 20px; margin-top: 2px; background: var(--accent); } #what li:nth-child(1)::before { -webkit-mask: var(--ic-what-1) center/contain no-repeat; mask: var(--ic-what-1) center/contain no-repeat; } #what li:nth-child(2)::before { -webkit-mask: var(--ic-what-2) center/contain no-repeat; mask: var(--ic-what-2) center/contain no-repeat; } #what li:nth-child(3)::before { -webkit-mask: var(--ic-what-3) center/contain no-repeat; mask: var(--ic-what-3) center/contain no-repeat; } #what li:nth-child(4)::before { -webkit-mask: var(--ic-what-4) center/contain no-repeat; mask: var(--ic-what-4) center/contain no-repeat; } #what li:nth-child(5)::before { -webkit-mask: var(--ic-what-5) center/contain no-repeat; mask: var(--ic-what-5) center/contain no-repeat; } /* =========================== #audience (target) ========================= */ #audience { background: var(--target-section-bg); padding: 3rem 1rem; } #audience h2 { font-weight: 700; text-align: center; font-size: clamp(1.4rem,3vw,1.9rem); margin-bottom: 1.5rem; } #audience ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width:576px) { #audience ul { grid-template-columns: 1fr 1fr; } } #audience li { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: .75rem; background: var(--target-item-bg); border: 1px solid var(--target-border); font-size: .875rem; font-weight: 500; transition: all .25s ease; } #audience li:hover { border-color: var(--accent); transform: translateY(-2px); } #audience li::before { width: 52px; height: 52px; min-width: 52px; border-radius: 14px; background: var(--target-icon-bg); position: relative; } #audience li::after { content: ""; position: absolute; width: 24px; height: 24px; margin-left: 14px; background: var(--accent); } #audience li { position: relative; } #audience li:nth-child(1)::after { -webkit-mask: var(--ic-audience-1) center/contain no-repeat; mask: var(--ic-audience-1) center/contain no-repeat; } #audience li:nth-child(2)::after { -webkit-mask: var(--ic-audience-2) center/contain no-repeat; mask: var(--ic-audience-2) center/contain no-repeat; } #audience li:nth-child(3)::after { -webkit-mask: var(--ic-audience-3) center/contain no-repeat; mask: var(--ic-audience-3) center/contain no-repeat; } #audience li:nth-child(4)::after { -webkit-mask: var(--ic-audience-4) center/contain no-repeat; mask: var(--ic-audience-4) center/contain no-repeat; } #audience blockquote { margin: 1rem 0 0; padding: 0; border: 0; text-align: center; font-size: .875rem; font-weight: 500; color: #ef4444; } /* =========================== #build (cards) ============================= */ #build { background: var(--build-section-bg); padding: 3rem 1rem; } #build h2 { font-weight: 700; text-align: center; font-size: clamp(1.4rem,3vw,1.9rem); margin-bottom: .25rem; } #build h2 + p { text-align: center; color: var(--bs-secondary-color); font-size: .875rem; margin-bottom: 2.5rem; } #build ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width:768px) { #build ul { grid-template-columns: repeat(3,1fr); } } #build li { background: var(--build-card-bg); border: 1px solid #83acff; border-radius: 1rem; padding: 1.5rem; text-align: center; font-size: .75rem; color: var(--bs-secondary-color); transition: all .25s ease; } #build li:hover { box-shadow: 0 4px 20px rgba(0,0,0,.15); transform: translateY(-3px); } #build li strong { display: block; font-size: .95rem; font-weight: 700; color: var(--bs-body-color); margin-bottom: .25rem; } /* icon lives INSIDE the tinted box: colored SVG layered over the box background */ #build li::before { width: 48px; height: 48px; border-radius: .75rem; margin: 0 auto 1rem; background: var(--build-icon-bg); background-repeat: no-repeat; background-position: center; background-size: 22px; } #build li:nth-child(1)::before { background-image: var(--icb-build-1); } #build li:nth-child(2)::before { background-image: var(--icb-build-2); } #build li:nth-child(3)::before { background-image: var(--icb-build-3); } /* =========================== #why (struggle, dark) ====================== */ #why { background: var(--struggle-bg); color: var(--struggle-text); padding: 3rem 1rem; } #why h2 { font-weight: 700; text-align: center; font-size: clamp(1.4rem,3vw,1.9rem); margin-bottom: .75rem; } #why h2 + p { text-align: center; color: var(--struggle-muted); font-size: .875rem; margin-bottom: 1.5rem; } #why ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; } #why li { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: .75rem; background: var(--struggle-item-bg); border: 1px solid var(--struggle-border); color: var(--struggle-text); font-size: .875rem; font-weight: 500; transition: all .2s ease; } #why li:hover { transform: translateY(-2px); border-color: rgba(99,102,241,.35); } #why li::before { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: #ef4444; position: relative; } #why li::after { content: ""; position: absolute; width: 12px; height: 12px; margin-left: 6px; background: #fff; -webkit-mask: var(--ic-why-x) center/contain no-repeat; mask: var(--ic-why-x) center/contain no-repeat; } #why li { position: relative; } #why blockquote { margin: 0; padding: 0; border: 0; text-align: center; font-style: italic; font-size: .875rem; color: var(--struggle-muted); } /* =========================== #bonus ===================================== */ #bonus { background: var(--bonus-section-bg); padding: 3rem 1rem; } #bonus h2 { font-weight: 700; text-align: center; font-size: clamp(1.4rem,3vw,1.9rem); margin-bottom: .5rem; } #bonus h2 + p { text-align: center; font-size: 1.1rem; margin-bottom: 2.5rem; } #bonus h2 + p del { color: var(--bonus-strike); font-weight: 600; margin-right: .4rem; } #bonus h2 + p { font-weight: 700; } #bonus h2 + p { color: var(--accent); } #bonus ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .75rem; } #bonus li { display: flex; align-items: center; gap: .75rem; padding: 1rem; border-radius: .75rem; background: var(--bonus-item-bg); border: 1px solid var(--bonus-border); transition: all .25s ease; } #bonus li:hover { border-color: var(--accent-2); transform: translateY(-2px); } #bonus li::before { width: 52px; height: 52px; min-width: 52px; border-radius: .75rem; background: var(--bonus-icon-bg); position: relative; } #bonus li::after { content: ""; position: absolute; width: 20px; height: 20px; margin-left: 16px; background: var(--accent-2); } #bonus li { position: relative; } #bonus li strong { display: block; font-size: .88rem; font-weight: 700; color: var(--bs-body-color); margin-bottom: .15rem; } #bonus li { font-size: .78rem; color: var(--bs-secondary-color); } #bonus li:nth-child(1)::after { -webkit-mask: var(--ic-bonus-1) center/contain no-repeat; mask: var(--ic-bonus-1) center/contain no-repeat; } #bonus li:nth-child(2)::after { -webkit-mask: var(--ic-bonus-2) center/contain no-repeat; mask: var(--ic-bonus-2) center/contain no-repeat; } #bonus li:nth-child(3)::after { -webkit-mask: var(--ic-bonus-3) center/contain no-repeat; mask: var(--ic-bonus-3) center/contain no-repeat; } /* ---- loose/tight list safety: Markdig may wrap li text in----------- */ #what li p, #audience li p, #build li p, #why li p, #bonus li p, #hero-point li p { margin: 0; } #build li p:first-child strong, #bonus li p:first-child strong { display: block; }