/* ========================================================================== Eduhubx Child — Base: typography, buttons, badges, utilities Scoped under .ehx-scope (added to ) to avoid bleeding into wp-admin or fighting Tutor/parent globals unexpectedly. ========================================================================== */ .ehx-scope { font-family: var(--ehx-font-body); color: var(--ehx-ink); background: var(--ehx-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color var(--ehx-dur) var(--ehx-ease), color var(--ehx-dur) var(--ehx-ease); } .ehx-scope h1, .ehx-scope h2, .ehx-scope h3, .ehx-scope h4, .ehx-scope .ehx-display { font-family: var(--ehx-font-head); color: var(--ehx-ink); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; margin: 0 0 var(--ehx-s4); } .ehx-scope p { line-height: 1.65; color: var(--ehx-ink-2); } /* ---- Layout helpers ---- */ .ehx-container { width: 100%; max-width: var(--ehx-container); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); } .ehx-section { padding-block: clamp(3rem, 7vw, 5.5rem); } .ehx-section--alt { background: var(--ehx-bg-2); } .ehx-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font: 600 var(--ehx-fs-sm)/1 var(--ehx-font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ehx-primary); margin-bottom: var(--ehx-s3); } .ehx-eyebrow::before { content:""; width: 22px; height: 2px; background: var(--ehx-accent); border-radius: 2px; } .ehx-section__head { max-width: 640px; margin-bottom: var(--ehx-s6); } .ehx-section__head h2 { font-size: var(--ehx-fs-3xl); } .ehx-section__head p { font-size: var(--ehx-fs-lg); color: var(--ehx-muted); margin:0; } /* ---- Signature: amber highlighter marker on hero keywords ---- */ .ehx-mark { background-image: linear-gradient(120deg, transparent 0, var(--ehx-accent-soft) 0); background-repeat: no-repeat; background-size: 100% 38%; background-position: 0 88%; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } [data-theme="dark"] .ehx-mark { background-color: transparent; background-image: linear-gradient(120deg, transparent 0, rgba(245,158,11,.5) 0); } /* ---- Buttons ---- */ .ehx-btn { --_bg: var(--ehx-primary); --_fg: var(--ehx-on-primary); display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: 0 1.5rem; font: 600 var(--ehx-fs-md)/1 var(--ehx-font-body); color: var(--_fg); background: var(--_bg); border: 1px solid transparent; border-radius: var(--ehx-r-btn); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--ehx-dur) var(--ehx-ease), box-shadow var(--ehx-dur) var(--ehx-ease), background-color var(--ehx-dur) var(--ehx-ease); box-shadow: var(--ehx-shadow-sm); } .ehx-btn:hover { transform: translateY(-2px); box-shadow: var(--ehx-shadow-md); } .ehx-btn:active { transform: translateY(0); } .ehx-btn:focus-visible { outline: none; box-shadow: var(--ehx-ring); } .ehx-btn--primary:hover { background: var(--ehx-primary-dark); } .ehx-btn--accent { --_bg: var(--ehx-accent); --_fg: var(--ehx-on-accent); } .ehx-btn--ghost { --_bg: transparent; --_fg: var(--ehx-ink); border-color: var(--ehx-border-strong); box-shadow: none; } .ehx-btn--ghost:hover { background: var(--ehx-surface); border-color: var(--ehx-primary); } .ehx-btn--lg { min-height: 54px; padding: 0 2rem; font-size: var(--ehx-fs-lg); } .ehx-btn--block { width: 100%; } .ehx-btn[aria-busy="true"] { pointer-events: none; opacity: .75; } /* ---- Badges / chips / tags ---- */ .ehx-badge { display: inline-flex; align-items: center; gap: .35rem; font: 600 var(--ehx-fs-xs)/1 var(--ehx-font-body); letter-spacing: .02em; padding: .4rem .6rem; border-radius: var(--ehx-r-pill); } .ehx-badge--free { background: var(--ehx-success); color:#fff; } .ehx-badge--cat { background: var(--ehx-primary-soft); color: var(--ehx-primary); } .ehx-badge--accent { background: var(--ehx-accent); color: var(--ehx-on-accent); } /* ---- Rating (number + stars, never color-only) ---- */ .ehx-rating { display: inline-flex; align-items: center; gap: .35rem; font: 600 var(--ehx-fs-sm)/1 var(--ehx-font-body); color: var(--ehx-ink-2); } .ehx-rating svg { width: 15px; height: 15px; fill: var(--ehx-rating); } .ehx-rating .ehx-rating__count { color: var(--ehx-muted); font-weight: 500; } /* ---- Cards (shared) ---- */ .ehx-card { background: var(--ehx-surface); border: 1px solid var(--ehx-border); border-radius: var(--ehx-r-card); box-shadow: var(--ehx-shadow-sm); transition: transform var(--ehx-dur) var(--ehx-ease), box-shadow var(--ehx-dur) var(--ehx-ease), border-color var(--ehx-dur) var(--ehx-ease); } /* ---- Focus + a11y ---- */ .ehx-scope a:focus-visible, .ehx-scope button:focus-visible, .ehx-scope input:focus-visible { outline: none; box-shadow: var(--ehx-ring); border-radius: var(--ehx-r-sm); } .ehx-visually-hidden { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ---- Dark-mode toggle button (injected into header by theme.js) ---- */ .ehx-theme-toggle { display:inline-grid; place-items:center; width:42px; height:42px; border-radius: var(--ehx-r-pill); cursor:pointer; background: var(--ehx-surface); border:1px solid var(--ehx-border); color: var(--ehx-ink); box-shadow: var(--ehx-shadow-sm); transition: transform var(--ehx-dur) var(--ehx-ease), background-color var(--ehx-dur); } .ehx-theme-toggle:hover { transform: rotate(-12deg); } .ehx-theme-toggle svg { width:20px; height:20px; } .ehx-theme-toggle .ehx-ico-moon { display:none; } [data-theme="dark"] .ehx-theme-toggle .ehx-ico-sun { display:none; } [data-theme="dark"] .ehx-theme-toggle .ehx-ico-moon { display:block; } /* floating fallback if header injection finds no anchor */ .ehx-theme-toggle--float { position:fixed; right:18px; bottom:18px; z-index:1000; width:48px; height:48px; box-shadow: var(--ehx-shadow-lg); } /* ---- Dotted-grid + glow decorative backdrop (used by hero/sections) ---- */ .ehx-dotgrid { background-image: radial-gradient(var(--ehx-grid-dot) 1.4px, transparent 1.4px); background-size: 22px 22px; } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .ehx-scope *, .ehx-scope *::before, .ehx-scope *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* ---- Header layout: logo left, nav + actions pushed right (Elementor header) ---- */ .turbo-header-template .elementor-element-d3b2ce8 { margin-right: auto; } /* ========================================================================== Dark theme — Tutor LMS course template overrides Tutor's own markup ships light surfaces/text; map them onto ehx tokens. ========================================================================== */ [data-theme="dark"] .tutor-card, [data-theme="dark"] .tutor-card-body, [data-theme="dark"] .tutor-is-sticky, [data-theme="dark"] .tutor-course-content-list, [data-theme="dark"] .tutor-course-content-list-item, [data-theme="dark"] .tutor-course-details-instructors { background-color: var(--ehx-surface) !important; border-color: var(--ehx-border) !important; } [data-theme="dark"] .tutor-course-content-list-item *, [data-theme="dark"] .tutor-card-title, [data-theme="dark"] .tutor-color-black, [data-theme="dark"] .tutor-is-sticky .tutor-color-black { color: var(--ehx-ink) !important; } [data-theme="dark"] .tutor-color-secondary, [data-theme="dark"] .tutor-color-muted, [data-theme="dark"] .tutor-fs-7 { color: var(--ehx-muted) !important; } [data-theme="dark"] .tutor-course-details-tab { background-color: transparent !important; border-color: var(--ehx-border) !important; } /* inactive tabs ship #41454F (near-black) — invisible on dark. Global: course detail tabs, dashboard my-courses tabs, etc. */ [data-theme="dark"] .tutor-nav-link:not(.is-active) { color: var(--ehx-muted) !important; } [data-theme="dark"] .tutor-nav-link:not(.is-active):hover { color: var(--ehx-ink) !important; } /* rating average number ships #212327 (near-black) on dark */ [data-theme="dark"] .tutor-ratings-average { color: var(--ehx-ink) !important; } /* "read more" fade mask — Tutor paints a white ::before gradient */ [data-theme="dark"] .tutor-toggle-more-content.tutor-toggle-more-collapsed::before { background-image: linear-gradient(rgba(11,17,32,0) 1.31%, rgba(11,17,32,.72) 15.41%, var(--ehx-bg) 100%) !important; } /* Course description:

items ship dark gray (#374151) — invisible on dark */ [data-theme="dark"] .tutor-course-details-content li { color: var(--ehx-ink) !important; } /* Catalog: sort dropdown — Tutor renders a light popover with light text */ [data-theme="dark"] .tutor-form-select-dropdown { background-color: var(--ehx-surface) !important; border-color: var(--ehx-border) !important; } [data-theme="dark"] .tutor-form-select-option { background-color: transparent !important; color: var(--ehx-ink) !important; } [data-theme="dark"] .tutor-form-select-option:hover, [data-theme="dark"] .tutor-form-select-option.is-active { background-color: var(--ehx-bg-2, #182234) !important; } [data-theme="dark"] .tutor-form-select, [data-theme="dark"] .tutor-form-control { background-color: var(--ehx-surface) !important; border-color: var(--ehx-border) !important; color: var(--ehx-ink) !important; } /* Catalog: pagination — soften Tutor's bright (#cdcfd5) border */ [data-theme="dark"] .tutor-pagination, [data-theme="dark"] .tutor-pagination .page-numbers { border-color: var(--ehx-border) !important; }