/* ============================================================================ ELIVTECH Content Enhancement Library (elx-*) Theme-aligned components for CKEditor-driven detail pages. Inherits the Sandbox theme: Manrope, root 20px, body .8rem/1.7 (#60697b), headings 700/1.2 (#343f52), primary #3f78e0, radius .4rem. Scoped to .elx-content so nothing leaks into theme/admin chrome. ========================================================================== */ /* Design tokens on :root so EVERY elx-* component resolves them, even the reading bar / back-to-top button that live outside .elx-content. */ :root { --elx-primary: #3f78e0; --elx-primary-dark: #1e3a8a; --elx-primary-light: #60a5fa; --elx-ink: #343f52; /* theme heading color */ --elx-muted: #60697b; /* theme body color */ --elx-line: #e3e7ee; --elx-bg-soft: #f4f7fc; --elx-grad: linear-gradient(135deg, #60a5fa 0%, #3f78e0 50%, #1e3a8a 100%); --elx-grad-soft: linear-gradient(135deg, #eef4ff 0%, #f7faff 100%); --elx-shadow: 0 .5rem 1.5rem rgba(30, 34, 40, .07); --elx-shadow-sm: 0 .25rem .75rem rgba(30, 34, 40, .06); --elx-radius: .5rem; } /* .elx-content inherits the theme font-family/size/color; line-height tightened slightly (theme 1.7 -> 1.6) for a more compact, professional read. */ .elx-content { line-height: 1.6; } .elx-content p { margin-bottom: .85rem; } /* ---- Typography: follow the theme; only add rhythm + scroll offset ----- */ .elx-content h2, .elx-content h3, .elx-content h4 { scroll-margin-top: 90px; } .elx-content > h2, .elx-content .elx-section > h2 { margin-top: 2.25rem; } .elx-content > h3 { margin-top: 1.5rem; } .elx-content > p { margin-bottom: 1rem; } .elx-content a { color: var(--elx-primary); } .elx-eyebrow { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--elx-primary); margin-bottom: .25rem; } .elx-gradient-text { background: var(--elx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .elx-lead { font-size: .95rem; font-weight: 500; line-height: 1.7; color: var(--elx-ink); margin-bottom: 1.25rem; } .elx-section { margin: 1.75rem 0; } .elx-divider { height: 3px; width: 48px; border: 0; border-radius: 3px; background: var(--elx-grad); margin: .6rem 0 1.1rem; opacity: 1; } /* ---- Scroll reveal (progressive enhancement) --------------------------- */ /* Content is visible by default; only hidden when JS is active (.elx-js on ), so a blocked/slow script can never leave blank gaps. */ .elx-js .elx-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .elx-js .elx-reveal.is-visible { opacity: 1; transform: none; } .elx-js .elx-reveal[data-elx-delay="1"] { transition-delay: .07s; } .elx-js .elx-reveal[data-elx-delay="2"] { transition-delay: .14s; } .elx-js .elx-reveal[data-elx-delay="3"] { transition-delay: .21s; } .elx-js .elx-reveal[data-elx-delay="4"] { transition-delay: .28s; } @media (prefers-reduced-motion: reduce) { .elx-js .elx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ---- Grid helpers ------------------------------------------------------ */ .elx-grid { display: grid; gap: 1rem; margin: 1.25rem 0; } .elx-grid-2 { grid-template-columns: repeat(2, 1fr); } .elx-grid-3 { grid-template-columns: repeat(3, 1fr); } .elx-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .elx-grid-3, .elx-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { .elx-grid-2, .elx-grid-3, .elx-grid-4 { grid-template-columns: 1fr; } } /* ---- Cards ------------------------------------------------------------- */ .elx-card { background: #fff; border: 1px solid var(--elx-line); border-radius: var(--elx-radius); padding: 1.25rem; box-shadow: var(--elx-shadow-sm); height: 100%; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .elx-card:hover { transform: translateY(-4px); box-shadow: var(--elx-shadow); border-color: #c5d7f6; } .elx-card > :last-child { margin-bottom: 0; } .elx-card h3, .elx-card h4 { margin-top: 0; margin-bottom: .4rem; } .elx-card p { color: var(--elx-muted); margin-bottom: 0; } .elx-card__icon { width: 44px; height: 44px; border-radius: .55rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; color: #fff; background: var(--elx-grad); margin-bottom: .8rem; } .elx-card__icon i { line-height: 1; } .elx-card--glass { background: rgba(255,255,255,.6); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); border-color: rgba(255,255,255,.7); } .elx-card--gradient { background: var(--elx-grad); color: #fff; border: 0; } .elx-card--gradient h3, .elx-card--gradient h4, .elx-card--gradient p { color: #fff; } .elx-card--soft { background: var(--elx-grad-soft); border-color: #dbe7ff; } /* ---- Stats / counters -------------------------------------------------- */ .elx-stats { display: grid; gap: .9rem; grid-template-columns: repeat(4, 1fr); margin: 1.5rem 0; } @media (max-width: 900px) { .elx-stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .elx-stats { grid-template-columns: 1fr; } } .elx-stat { text-align: center; padding: 1.1rem .85rem; border-radius: var(--elx-radius); background: var(--elx-grad-soft); border: 1px solid #dbe7ff; } .elx-stat__num { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; background: var(--elx-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .elx-stat__label { display: block; margin-top: .35rem; font-size: .72rem; color: var(--elx-muted); font-weight: 500; line-height: 1.45; } /* ---- Process steps ----------------------------------------------------- */ .elx-steps { counter-reset: elx-step; display: grid; gap: .9rem; margin: 1.4rem 0; } .elx-steps.elx-steps--row { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .elx-steps.elx-steps--row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .elx-steps.elx-steps--row { grid-template-columns: 1fr; } } .elx-step { position: relative; background: #fff; border: 1px solid var(--elx-line); border-radius: var(--elx-radius); padding: 1.15rem 1.1rem; box-shadow: var(--elx-shadow-sm); } .elx-step > :last-child { margin-bottom: 0; } .elx-step::before { counter-increment: elx-step; content: counter(elx-step, decimal-leading-zero); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: .5rem; background: var(--elx-grad); color: #fff; font-weight: 700; font-size: .8rem; margin-bottom: .6rem; } .elx-step h3, .elx-step h4 { margin: 0 0 .3rem; } .elx-step p { margin: 0; color: var(--elx-muted); } /* ---- Timeline ---------------------------------------------------------- */ .elx-timeline { position: relative; margin: 1.4rem 0; padding-left: 1.9rem; } .elx-timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: linear-gradient(180deg, var(--elx-primary-light), var(--elx-primary-dark)); border-radius: 2px; } .elx-tl { position: relative; padding: 0 0 1.3rem; } .elx-tl:last-child { padding-bottom: 0; } .elx-tl::before { content: ""; position: absolute; left: -1.9rem; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--elx-primary); box-shadow: 0 0 0 3px rgba(63,120,224,.12); } .elx-tl__time { font-size: .7rem; font-weight: 700; color: var(--elx-primary); letter-spacing: .03em; text-transform: uppercase; } .elx-tl h3, .elx-tl h4 { margin: .1rem 0 .25rem; } .elx-tl p { margin: 0; color: var(--elx-muted); } /* ---- Accordion / FAQ --------------------------------------------------- */ .elx-accordion { margin: 1.3rem 0; border-radius: var(--elx-radius); overflow: hidden; border: 1px solid var(--elx-line); } .elx-acc { border-top: 1px solid var(--elx-line); background: #fff; } .elx-acc:first-child { border-top: 0; } .elx-acc__q { margin: 0; cursor: pointer; padding: .85rem 2.5rem .85rem 1.1rem; position: relative; font-weight: 700; color: var(--elx-ink); font-size: .85rem; list-style: none; user-select: none; transition: background .2s ease; } .elx-acc__q::-webkit-details-marker { display: none; } .elx-acc__q:hover { background: var(--elx-bg-soft); } .elx-acc__q::after { content: "+"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--elx-grad-soft); color: var(--elx-primary); display: grid; place-items: center; font-size: 1rem; font-weight: 700; transition: transform .3s ease; } .elx-acc[open] .elx-acc__q::after { content: "\2212"; transform: translateY(-50%) rotate(180deg); } .elx-acc__a { padding: 0 1.1rem 1rem; color: var(--elx-muted); } .elx-acc__a > :first-child { margin-top: 0; } .elx-acc__a > :last-child { margin-bottom: 0; } .elx-acc[open] .elx-acc__a { animation: elxFade .35s ease; } @keyframes elxFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ---- Tabs -------------------------------------------------------------- */ .elx-tabs { margin: 1.4rem 0; } .elx-tabs__nav { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 2px solid var(--elx-line); margin-bottom: 1.1rem; } .elx-tabs__btn { border: 0; background: transparent; padding: .55rem .95rem; font-weight: 700; color: var(--elx-muted); cursor: pointer; border-radius: .4rem .4rem 0 0; position: relative; font-size: .82rem; transition: color .2s ease; } .elx-tabs__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--elx-grad); border-radius: 2px; transform: scaleX(0); transition: transform .3s ease; } .elx-tabs__btn.is-active { color: var(--elx-primary); } .elx-tabs__btn.is-active::after { transform: scaleX(1); } .elx-tabs__pane { display: none; animation: elxFade .35s ease; } .elx-tabs__pane.is-active { display: block; } .elx-tabs__pane > :last-child { margin-bottom: 0; } /* ---- Tables ------------------------------------------------------------ */ .elx-table-wrap { overflow-x: auto; margin: 1.3rem 0; border-radius: var(--elx-radius); border: 1px solid var(--elx-line); box-shadow: var(--elx-shadow-sm); } .elx-table { width: 100%; border-collapse: collapse; min-width: 480px; background: #fff; font-size: .8rem; } .elx-table th, .elx-table td { padding: .65rem .9rem; text-align: left; border-bottom: 1px solid var(--elx-line); } .elx-table thead th { background: var(--elx-grad); color: #fff; font-weight: 700; } .elx-table tbody tr:nth-child(even) { background: var(--elx-bg-soft); } .elx-table tbody tr:hover { background: #eaf1ff; } .elx-table td:first-child, .elx-table th:first-child { font-weight: 700; color: var(--elx-ink); } .elx-yes { color: #16a34a; font-weight: 700; } .elx-no { color: #dc2626; font-weight: 700; } /* ---- Pros / cons ------------------------------------------------------- */ .elx-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.3rem 0; } @media (max-width: 640px) { .elx-proscons { grid-template-columns: 1fr; } } .elx-pros, .elx-cons { border-radius: var(--elx-radius); padding: 1.15rem 1.25rem; border: 1px solid var(--elx-line); } .elx-pros { background: #f0fdf4; border-color: #bbf7d0; } .elx-cons { background: #fef2f2; border-color: #fecaca; } .elx-pros h4, .elx-cons h4 { margin-top: 0; margin-bottom: .6rem; } .elx-pros ul, .elx-cons ul { margin: 0; padding-left: 0; list-style: none; } .elx-pros li, .elx-cons li { position: relative; padding-left: 1.5rem; margin-bottom: .45rem; color: var(--elx-ink); } .elx-pros li:last-child, .elx-cons li:last-child { margin-bottom: 0; } .elx-pros li::before { content: "\2713"; position: absolute; left: 0; color: #16a34a; font-weight: 700; } .elx-cons li::before { content: "\2717"; position: absolute; left: 0; color: #dc2626; font-weight: 700; } /* ---- Checklist --------------------------------------------------------- */ .elx-checklist { list-style: none; padding-left: 0; margin: 1rem 0; } .elx-checklist li { position: relative; padding-left: 1.8rem; margin-bottom: .55rem; color: var(--elx-ink); } .elx-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: .35rem; background: var(--elx-grad); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; } /* ---- Progress bars ----------------------------------------------------- */ .elx-bars { margin: 1.3rem 0; display: grid; gap: .85rem; } .elx-bar__top { display: flex; justify-content: space-between; font-weight: 700; font-size: .8rem; margin-bottom: .3rem; color: var(--elx-ink); } .elx-bar__track { height: 9px; border-radius: 6px; background: var(--elx-line); overflow: hidden; } .elx-bar__fill { height: 100%; width: 0; border-radius: 6px; background: var(--elx-grad); transition: width 1.2s cubic-bezier(.2,.7,.2,1); } /* ---- Chips ------------------------------------------------------------- */ .elx-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1rem 0; } .elx-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; background: var(--elx-grad-soft); border: 1px solid #dbe7ff; color: var(--elx-primary-dark); font-weight: 700; font-size: .75rem; } .elx-badge { display: inline-block; padding: .25rem .65rem; border-radius: 999px; background: var(--elx-grad); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .02em; } /* ---- Callout / CTA ----------------------------------------------------- */ .elx-callout { border-left: 4px solid var(--elx-primary); background: var(--elx-bg-soft); padding: .9rem 1.1rem; border-radius: 0 .4rem .4rem 0; margin: 1.3rem 0; color: var(--elx-ink); } .elx-callout > :last-child { margin-bottom: 0; } .elx-callout--warn { border-left-color: #f59e0b; background: #fffbeb; } .elx-callout--ok { border-left-color: #16a34a; background: #f0fdf4; } .elx-cta { background: var(--elx-grad); color: #fff; border-radius: var(--elx-radius); padding: 1.75rem; text-align: center; margin: 2rem 0 0; box-shadow: var(--elx-shadow); } .elx-cta h3 { color: #fff; margin: 0 0 .4rem; } .elx-cta p { color: rgba(255,255,255,.9); margin: 0 0 1.1rem; } .elx-cta .elx-btn { background: #fff; color: var(--elx-primary-dark); } .elx-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.4rem; border-radius: 999px; background: var(--elx-grad); color: #fff; font-weight: 700; font-size: .82rem; text-decoration: none; border: 0; transition: transform .2s ease, box-shadow .2s ease; } .elx-btn:hover { transform: translateY(-2px); box-shadow: var(--elx-shadow); color: #fff; } .elx-cta .elx-btn:hover { color: var(--elx-primary-dark); } /* ---- Quote ------------------------------------------------------------- */ .elx-quote { position: relative; background: var(--elx-grad-soft); border: 1px solid #dbe7ff; border-radius: var(--elx-radius); padding: 1.5rem 1.5rem 1.2rem; margin: 1.4rem 0; font-size: .95rem; font-style: italic; color: var(--elx-ink); line-height: 1.7; } .elx-quote::before { content: "\201C"; position: absolute; top: 0; left: .7rem; font-size: 3rem; line-height: 1; color: var(--elx-primary-light); opacity: .45; font-family: Georgia, serif; } .elx-quote cite { display: block; margin-top: .7rem; font-style: normal; font-weight: 700; font-size: .8rem; color: var(--elx-primary-dark); } /* ---- Takeaways --------------------------------------------------------- */ .elx-takeaways { background: var(--elx-grad-soft); border: 1px dashed #b9d0ff; border-radius: var(--elx-radius); padding: 1.25rem 1.4rem; margin: 1.4rem 0; } .elx-takeaways h3, .elx-takeaways h4 { margin-top: 0; margin-bottom: .7rem; } .elx-takeaways ul { margin: 0; padding-left: 0; list-style: none; } .elx-takeaways li { position: relative; padding-left: 1.6rem; margin-bottom: .5rem; color: var(--elx-ink); } .elx-takeaways li:last-child { margin-bottom: 0; } .elx-takeaways li::before { content: "\2713"; position: absolute; left: 0; top: 1px; color: var(--elx-primary); font-weight: 700; } /* ---- Chart ------------------------------------------------------------- */ .elx-chart { background: #fff; border: 1px solid var(--elx-line); border-radius: var(--elx-radius); padding: 1.1rem 1.2rem; margin: 1.3rem auto; box-shadow: var(--elx-shadow-sm); max-width: 640px; } .elx-chart__title { font-weight: 700; margin: 0 0 .7rem; color: var(--elx-ink); font-size: .85rem; text-align: center; } .elx-chart canvas { max-width: 100%; max-height: 300px; } /* ---- Before / after ---------------------------------------------------- */ .elx-beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.3rem 0; } @media (max-width: 640px) { .elx-beforeafter { grid-template-columns: 1fr; } } .elx-ba { border-radius: var(--elx-radius); padding: 1.15rem 1.25rem; border: 1px solid var(--elx-line); } .elx-ba > :last-child { margin-bottom: 0; } .elx-ba--before { background: #fbfcfe; } .elx-ba--after { background: var(--elx-grad-soft); border-color: #dbe7ff; } .elx-ba__tag { display: inline-block; font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; margin-bottom: .6rem; } .elx-ba--before .elx-ba__tag { background: #eef1f6; color: var(--elx-muted); } .elx-ba--after .elx-ba__tag { background: var(--elx-grad); color: #fff; } /* ---- Table of contents ------------------------------------------------- */ .elx-toc { background: #fff; border: 1px solid var(--elx-line); border-radius: var(--elx-radius); padding: 1.1rem 1.2rem; box-shadow: var(--elx-shadow-sm); position: sticky; top: 90px; } .elx-toc__title { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--elx-muted); font-weight: 700; margin: 0 0 .6rem; } .elx-toc ul { list-style: none; margin: 0; padding: 0; } .elx-toc li { margin-bottom: .1rem; } .elx-toc a { display: block; padding: .35rem .6rem; border-radius: .35rem; color: var(--elx-muted); text-decoration: none; font-size: .78rem; border-left: 2px solid transparent; transition: all .2s ease; } .elx-toc a:hover { background: var(--elx-bg-soft); color: var(--elx-primary); } .elx-toc a.is-active { background: var(--elx-bg-soft); color: var(--elx-primary); border-left-color: var(--elx-primary); font-weight: 700; } .elx-toc a.elx-toc--h3 { padding-left: 1.2rem; font-size: .74rem; } @media (max-width: 991px) { .elx-toc { position: static; margin-bottom: 1.25rem; } } /* ---- Breadcrumbs ------------------------------------------------------- */ .elx-crumbs { font-size: .72rem; color: var(--elx-muted); margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; } .elx-crumbs a { color: var(--elx-primary); text-decoration: none; } .elx-crumbs a:hover { text-decoration: underline; } .elx-crumbs__sep { opacity: .5; } .elx-crumbs__current { color: var(--elx-ink); font-weight: 600; } /* ---- Reading progress + FAB ------------------------------------------- */ .elx-readbar { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 1080; background: var(--elx-grad); transition: width .1s linear; } .elx-fab { position: fixed; right: 20px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--elx-grad); color: #fff; border: 0; display: grid; place-items: center; font-size: 1.2rem; box-shadow: var(--elx-shadow); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .3s ease; z-index: 1080; } .elx-fab.is-visible { opacity: 1; visibility: visible; transform: none; } /* ---- Accessibility: visible keyboard focus ----------------------------- */ .elx-acc__q:focus-visible, .elx-tabs__btn:focus-visible, .elx-btn:focus-visible, .elx-chip:focus-visible, .elx-toc a:focus-visible, .elx-crumbs a:focus-visible, .elx-fab:focus-visible { outline: 3px solid var(--elx-primary-light); outline-offset: 2px; border-radius: .35rem; } .elx-tabs__btn:focus-visible { outline-offset: -2px; } /* ---- Content image polish ---------------------------------------------- */ .elx-content img { border-radius: var(--elx-radius); } .elx-content figure.image { max-width: 100%; } /* ---- Layout: content + sidebar ----------------------------------------- */ .elx-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; } @media (max-width: 991px) { .elx-layout { grid-template-columns: 1fr; } }