/* ============================================================ Luminous Skin Lab — Pro Line Article CSS File: /esthetician-education/assets/css/pro-line-article.css Purpose: Special layout for Pro-Line education articles only Important: Use with ============================================================ */ /* ------------------------------------------------------------ Reset old article.css only for this Pro-Line article ------------------------------------------------------------ */ body.pro-line-article { margin: 0; background: #ffffff; } body.pro-line-article #main-content { max-width: none; margin: 0; padding: 0; } body.pro-line-article h1, body.pro-line-article h2, body.pro-line-article h3 { color: inherit; line-height: inherit; } body.pro-line-article h1, body.pro-line-article h2, body.pro-line-article h3, body.pro-line-article p, body.pro-line-article ul, body.pro-line-article ol { margin-top: 0; } /* ------------------------------------------------------------ Local design variables These variables are scoped only inside this article wrapper ------------------------------------------------------------ */ body.pro-line-article .lsl-edu-wrap { --navy: #1e2068; --navy-deep: #12144a; --navy-mid: #2b2d7e; --gold: #c9a227; --gold-light: #e0bb4e; --gold-pale: #fdf6e3; --gold-border: #e8d48a; --off-white: #f9f8ff; --body-text: #2c2c44; --muted: #5a5a7a; --border: #e4e2f0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; color: var(--body-text); background: #ffffff; } body.pro-line-article .lsl-edu-wrap *, body.pro-line-article .lsl-edu-wrap *::before, body.pro-line-article .lsl-edu-wrap *::after { box-sizing: border-box; } /* ------------------------------------------------------------ Breadcrumb ------------------------------------------------------------ */ body.pro-line-article .lsl-breadcrumb-bar { background: var(--navy-deep); padding: 11px 0; border-bottom: 2px solid var(--gold); } body.pro-line-article .lsl-breadcrumb-bar .inner { max-width: 960px; margin: 0 auto; padding: 0 24px; } body.pro-line-article .lsl-bc { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; color: rgba(201, 162, 39, 0.6); margin: 0; padding: 0; } body.pro-line-article .lsl-bc a { color: var(--gold-light); text-decoration: none; transition: color 0.2s; } body.pro-line-article .lsl-bc a:hover { color: #ffffff; } body.pro-line-article .lsl-bc .sep { color: rgba(201, 162, 39, 0.35); margin: 0 3px; } body.pro-line-article .lsl-bc li:last-child span { color: rgba(255, 255, 255, 0.75); } /* ------------------------------------------------------------ Hero Header ------------------------------------------------------------ */ body.pro-line-article .lsl-hero { background: var(--navy-deep); padding: 60px 24px 52px; position: relative; overflow: hidden; } body.pro-line-article .lsl-hero::before { content: ""; position: absolute; top: -80px; right: -80px; width: 420px; height: 420px; background: radial-gradient(circle, rgba(201, 162, 39, 0.1) 0%, transparent 65%); pointer-events: none; } body.pro-line-article .lsl-hero::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } body.pro-line-article .lsl-hero .inner { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; } body.pro-line-article .lsl-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } body.pro-line-article .lsl-eyebrow::before, body.pro-line-article .lsl-eyebrow::after { content: ""; display: inline-block; height: 1px; flex: 0 0 28px; } body.pro-line-article .lsl-eyebrow::before { background: linear-gradient(90deg, var(--gold), transparent); } body.pro-line-article .lsl-eyebrow::after { background: linear-gradient(270deg, var(--gold), transparent); } body.pro-line-article .lsl-hero h1 { font-size: clamp(25px, 3.8vw, 40px); font-weight: 800; line-height: 1.15; color: #ffffff; margin: 0 0 18px; letter-spacing: -0.02em; } body.pro-line-article .lsl-hero h1 em { font-style: normal; color: var(--gold-light); } body.pro-line-article .lsl-hero .sub { font-size: 17px; line-height: 1.68; color: rgba(255, 255, 255, 0.72); margin-bottom: 30px; max-width: 700px; } body.pro-line-article .lsl-meta { display: flex; flex-wrap: wrap; gap: 10px; } body.pro-line-article .lsl-pill { display: inline-flex; align-items: center; gap: 5px; border: 1px solid rgba(201, 162, 39, 0.35); border-radius: 20px; padding: 5px 14px; font-size: 12px; color: rgba(255, 255, 255, 0.65); background: rgba(201, 162, 39, 0.08); } body.pro-line-article .lsl-pill strong { color: var(--gold-light); font-weight: 600; } /* ------------------------------------------------------------ Hero Image ------------------------------------------------------------ */ body.pro-line-article .lsl-hero-img { max-width: 960px; margin: -28px auto 0; padding: 0 24px; } body.pro-line-article .lsl-hero-img figure { margin: 0; } body.pro-line-article .lsl-hero-img img { width: 100%; height: auto; border-radius: 12px; display: block; box-shadow: 0 18px 56px rgba(18, 20, 74, 0.28), 0 0 0 1px rgba(201, 162, 39, 0.18); } body.pro-line-article .lsl-hero-img figcaption { font-size: 12px; color: #999999; margin-top: 10px; font-style: italic; text-align: center; padding: 0 8px; } /* ------------------------------------------------------------ Body ------------------------------------------------------------ */ body.pro-line-article .lsl-body { max-width: 860px; margin: 0 auto; padding: 44px 24px 80px; } /* ------------------------------------------------------------ AI Answer Summary ------------------------------------------------------------ */ body.pro-line-article #ai-answer-summary { background: var(--off-white); border-left: 4px solid var(--navy); border-radius: 0 12px 12px 0; padding: 28px 32px; margin-bottom: 44px; } body.pro-line-article #ai-answer-summary::before { content: "AI Answer Summary"; display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } body.pro-line-article #ai-answer-summary h2 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 14px; line-height: 1.4; } body.pro-line-article #ai-answer-summary p { font-size: 15px; line-height: 1.76; color: var(--body-text); margin-bottom: 14px; } body.pro-line-article #ai-answer-summary ul { list-style: none; padding: 0; margin: 0; } body.pro-line-article #ai-answer-summary ul li { font-size: 14px; line-height: 1.65; color: var(--body-text); padding: 7px 0 7px 20px; position: relative; border-bottom: 1px solid var(--border); margin-bottom: 0; } body.pro-line-article #ai-answer-summary ul li:last-child { border-bottom: none; } body.pro-line-article #ai-answer-summary ul li::before { content: "\25C6"; position: absolute; left: 0; top: 10px; color: var(--gold); font-size: 8px; } /* ------------------------------------------------------------ Key Takeaways ------------------------------------------------------------ */ body.pro-line-article #key-takeaways { background: var(--navy); border-radius: 12px; padding: 30px 34px; margin-bottom: 48px; position: relative; overflow: hidden; border: none; } body.pro-line-article #key-takeaways::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); } body.pro-line-article #key-takeaways .kt-eye { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; } body.pro-line-article #key-takeaways h2 { font-size: 17px; font-weight: 700; color: #ffffff; margin: 0 0 18px; border: none; padding-bottom: 0; } body.pro-line-article #key-takeaways ul { list-style: none; padding: 0; margin: 0; } body.pro-line-article #key-takeaways ul li { font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, 0.78); padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid rgba(201, 162, 39, 0.15); margin-bottom: 0; } body.pro-line-article #key-takeaways ul li:last-child { border-bottom: none; } body.pro-line-article #key-takeaways ul li::before { content: "\2014"; position: absolute; left: 0; color: var(--gold); font-weight: 700; } /* ------------------------------------------------------------ Sections ------------------------------------------------------------ */ body.pro-line-article .lsl-sec { margin-bottom: 54px; } body.pro-line-article .lsl-sec h2 { font-size: 25px; font-weight: 800; color: var(--navy); margin: 0 0 18px; line-height: 1.25; letter-spacing: -0.02em; padding-bottom: 14px; border-bottom: 2px solid var(--gold-border); } body.pro-line-article .lsl-sec h3 { font-size: 18px; font-weight: 700; color: var(--navy-mid); margin: 28px 0 10px; line-height: 1.35; } body.pro-line-article .lsl-sec p { font-size: 16px; line-height: 1.82; color: var(--body-text); margin-bottom: 18px; } body.pro-line-article .lsl-sec ul, body.pro-line-article .lsl-sec ol { padding-left: 24px; margin-bottom: 18px; } body.pro-line-article .lsl-sec li { font-size: 16px; line-height: 1.72; color: var(--body-text); margin-bottom: 8px; } /* ------------------------------------------------------------ Science Callout Box ------------------------------------------------------------ */ body.pro-line-article .lsl-science-box { background: var(--navy-deep); border-radius: 12px; padding: 28px 32px; margin: 32px 0; border: 1px solid rgba(201, 162, 39, 0.22); position: relative; overflow: hidden; } body.pro-line-article .lsl-science-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); } body.pro-line-article .lsl-science-box .sci-label { font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } body.pro-line-article .lsl-science-box .sci-label::before { content: ""; display: inline-block; width: 18px; height: 1px; background: var(--gold); } body.pro-line-article .lsl-science-box h4 { font-size: 16px; font-weight: 700; color: var(--gold-light); margin: 0 0 14px; } body.pro-line-article .lsl-science-box p { font-size: 15px; line-height: 1.76; color: rgba(255, 255, 255, 0.78); margin: 0 0 12px; } body.pro-line-article .lsl-science-box p:last-child { margin: 0; } body.pro-line-article .lsl-science-box strong { color: var(--gold-light); } body.pro-line-article .lsl-science-box .sci-stat { display: flex; gap: 16px; margin-top: 20px; flex-wrap: wrap; } body.pro-line-article .lsl-science-box .stat-item { background: rgba(201, 162, 39, 0.1); border: 1px solid rgba(201, 162, 39, 0.25); border-radius: 8px; padding: 14px 16px; flex: 1; min-width: 130px; text-align: center; } body.pro-line-article .lsl-science-box .stat-num { font-size: 24px; font-weight: 800; color: var(--gold-light); display: block; } body.pro-line-article .lsl-science-box .stat-label { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 5px; line-height: 1.4; } /* ------------------------------------------------------------ Brand Note ------------------------------------------------------------ */ body.pro-line-article .lsl-brand-note { background: var(--off-white); border: 1px solid var(--gold-border); border-left: 4px solid var(--gold); border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 24px 0; font-size: 15px; line-height: 1.73; color: var(--body-text); } body.pro-line-article .lsl-brand-note strong { color: var(--navy); } /* ------------------------------------------------------------ From The Treatment Room ------------------------------------------------------------ */ body.pro-line-article .lsl-fttr { background: var(--navy-deep); border-radius: 12px; padding: 26px 30px; margin: 32px 0; position: relative; overflow: hidden; } body.pro-line-article .lsl-fttr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); } body.pro-line-article .lsl-fttr-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } body.pro-line-article .lsl-fttr-lbl::before { content: ""; display: inline-block; width: 20px; height: 1px; background: var(--gold); } body.pro-line-article .lsl-fttr p { font-size: 15px; line-height: 1.76; color: rgba(255, 255, 255, 0.78); margin: 0; } body.pro-line-article .lsl-fttr p strong { color: var(--gold-light); } /* ------------------------------------------------------------ Inline Figures ------------------------------------------------------------ */ body.pro-line-article .lsl-figure { margin: 36px 0; } body.pro-line-article .lsl-figure img { width: 100%; height: auto; border-radius: 10px; display: block; border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(18, 20, 74, 0.1); } body.pro-line-article .lsl-figure svg { max-width: 100%; height: auto; } body.pro-line-article .lsl-figure figcaption { font-size: 12px; color: #999999; margin-top: 10px; font-style: italic; line-height: 1.55; } /* ------------------------------------------------------------ Professional References ------------------------------------------------------------ */ body.pro-line-article #professional-references { background: var(--off-white); border: 1px solid var(--border); border-radius: 10px; padding: 28px 32px; margin-bottom: 44px; } body.pro-line-article #professional-references h2 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--gold-border); } body.pro-line-article #professional-references p, body.pro-line-article #professional-references li { font-size: 14px; line-height: 1.7; color: var(--muted); margin-bottom: 10px; } body.pro-line-article #professional-references ul { padding-left: 20px; margin-bottom: 0; } /* ------------------------------------------------------------ Editorial Recommendation ------------------------------------------------------------ */ body.pro-line-article .lsl-editorial-rec { background: var(--navy); border-radius: 14px; padding: 36px 40px; margin: 48px 0; position: relative; overflow: hidden; border: 1px solid rgba(201, 162, 39, 0.25); } body.pro-line-article .lsl-editorial-rec::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold)); } body.pro-line-article .lsl-editorial-rec::after { content: ""; position: absolute; bottom: -60px; right: -60px; width: 240px; height: 240px; background: radial-gradient(circle, rgba(201, 162, 39, 0.08) 0%, transparent 65%); pointer-events: none; } body.pro-line-article .lsl-editorial-rec .rec-label { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; } body.pro-line-article .lsl-editorial-rec .rec-label::before { content: ""; display: inline-block; width: 24px; height: 1px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); } body.pro-line-article .lsl-editorial-rec p { font-size: 15px; line-height: 1.78; color: rgba(255, 255, 255, 0.78); margin-bottom: 18px; position: relative; z-index: 1; } body.pro-line-article .lsl-editorial-rec p strong { color: var(--gold-light); } body.pro-line-article .lsl-editorial-rec a { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: var(--navy-deep); text-decoration: none; font-size: 13px; font-weight: 700; padding: 10px 22px; border-radius: 24px; letter-spacing: 0.04em; transition: background 0.2s, transform 0.15s; position: relative; z-index: 1; } body.pro-line-article .lsl-editorial-rec a:hover { background: var(--gold-light); transform: translateY(-1px); } /* ------------------------------------------------------------ FAQ ------------------------------------------------------------ */ body.pro-line-article #faq-section { margin-bottom: 54px; border: none; background: transparent; padding: 0; } body.pro-line-article #faq-section > h2 { font-size: 25px; font-weight: 800; color: var(--navy); margin: 0 0 28px; padding-bottom: 14px; border-bottom: 2px solid var(--gold-border); letter-spacing: -0.02em; } body.pro-line-article .lsl-faq { border-bottom: 1px solid var(--border); padding: 22px 0; } body.pro-line-article .lsl-faq:last-child { border-bottom: none; } body.pro-line-article .lsl-faq h3 { font-size: 17px; font-weight: 700; color: var(--navy); margin: 0 0 10px; line-height: 1.35; } body.pro-line-article .lsl-faq p { font-size: 15px; line-height: 1.78; color: var(--body-text); margin: 0; } /* ------------------------------------------------------------ Conclusion ------------------------------------------------------------ */ body.pro-line-article .lsl-conclusion { background: var(--gold-pale); border: 1px solid var(--gold-border); border-radius: 12px; padding: 32px 36px; margin-bottom: 52px; } body.pro-line-article .lsl-conclusion h2 { font-size: 22px; font-weight: 800; color: var(--navy); margin: 0 0 16px; letter-spacing: -0.02em; } body.pro-line-article .lsl-conclusion p { font-size: 16px; line-height: 1.8; color: var(--body-text); margin-bottom: 16px; } body.pro-line-article .lsl-conclusion p:last-child { margin: 0; } /* ------------------------------------------------------------ Internal Links ------------------------------------------------------------ */ body.pro-line-article #suggested-internal-links { border-top: 2px solid var(--gold-border); padding-top: 36px; margin-top: 0; } body.pro-line-article #suggested-internal-links h2 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 20px; border: none; padding-bottom: 0; } body.pro-line-article .lsl-link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } body.pro-line-article .lsl-link-card { background: var(--off-white); border: 1px solid var(--border); border-left: 3px solid var(--navy); border-radius: 0 8px 8px 0; padding: 14px 18px; text-decoration: none; display: block; transition: border-left-color 0.2s, background 0.2s; } body.pro-line-article .lsl-link-card:hover { border-left-color: var(--gold); background: var(--gold-pale); } body.pro-line-article .lsl-link-card .lnk-hub { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; } body.pro-line-article .lsl-link-card .lnk-title { font-size: 14px; font-weight: 600; color: var(--navy); line-height: 1.35; } /* ------------------------------------------------------------ Responsive ------------------------------------------------------------ */ @media (max-width: 768px) { body.pro-line-article .lsl-hero { padding: 46px 20px 42px; } body.pro-line-article .lsl-body { padding: 36px 20px 64px; } body.pro-line-article .lsl-hero h1 { font-size: 30px; } body.pro-line-article .lsl-hero .sub { font-size: 16px; } body.pro-line-article .lsl-editorial-rec { padding: 30px 26px; } body.pro-line-article #ai-answer-summary, body.pro-line-article #key-takeaways { padding: 24px 24px; } body.pro-line-article .lsl-science-box { padding: 24px 22px; } } @media (max-width: 640px) { body.pro-line-article .lsl-hero { padding: 42px 20px 40px; } body.pro-line-article .lsl-body { padding: 32px 20px 60px; } body.pro-line-article .lsl-hero h1 { font-size: 26px; } body.pro-line-article .lsl-eyebrow { align-items: flex-start; line-height: 1.4; } body.pro-line-article .lsl-eyebrow::before, body.pro-line-article .lsl-eyebrow::after { display: none; } body.pro-line-article .lsl-editorial-rec { padding: 28px 24px; } body.pro-line-article #ai-answer-summary, body.pro-line-article #key-takeaways { padding: 22px 22px; } body.pro-line-article .lsl-science-box { padding: 22px 20px; } body.pro-line-article .lsl-link-grid { grid-template-columns: 1fr; } body.pro-line-article .lsl-conclusion { padding: 26px 24px; } } @media (max-width: 480px) { body.pro-line-article .lsl-hero h1 { font-size: 24px; } body.pro-line-article .lsl-hero .sub { font-size: 15px; } body.pro-line-article .lsl-sec h2, body.pro-line-article #faq-section > h2 { font-size: 22px; } body.pro-line-article .lsl-sec p, body.pro-line-article .lsl-conclusion p { font-size: 15px; } body.pro-line-article .lsl-science-box .sci-stat { gap: 10px; } body.pro-line-article .lsl-science-box .stat-item { min-width: 100%; } }