/* ========================================================================== THEME / SKIN SYSTEM Five interchangeable color skins, each defining the same five roles: deep / primary / hover / surface / highlight (+ the text color that keeps each role readable). Switching data-skin on re-themes the whole site. The active skin is chosen server-side (see ThemeController) from a "skin" cookie so there is no flash of the wrong skin on load. Layered on top of Bootstrap 5.3: a handful of Bootstrap's own CSS variables are remapped to these tokens so standard components (buttons, focus rings, links) pick up the brand color automatically; the rest of this file is bespoke component styling for the header, footer, menus, sidebars and page layouts that Bootstrap alone doesn't provide. ========================================================================== */ html, [data-skin="azure"] { --c-deep: #054a91; --c-deep-text: #ffffff; --c-primary: #3e7cb1; --c-primary-text: #ffffff; --c-hover: #81a4cd; --c-hover-text: #ffffff; --c-surface: #dbe4ee; --c-surface-text: #141a1f; --c-highlight: #f17300; --c-highlight-text: #1c1200; } [data-skin="emerald"] { --c-deep: #0b5d3b; --c-deep-text: #ffffff; --c-primary: #3f8f68; --c-primary-text: #ffffff; --c-hover: #8ec2a6; --c-hover-text: #ffffff; --c-surface: #dcece3; --c-surface-text: #12261c; --c-highlight: #e8622c; --c-highlight-text: #1c0f08; } [data-skin="plum"] { --c-deep: #4a1163; --c-deep-text: #ffffff; --c-primary: #7c4a9e; --c-primary-text: #ffffff; --c-hover: #b79bd1; --c-hover-text: #ffffff; --c-surface: #e7e0ef; --c-surface-text: #221530; --c-highlight: #f0a202; --c-highlight-text: #251900; } [data-skin="crimson"] { --c-deep: #7a1128; --c-deep-text: #ffffff; --c-primary: #b03052; --c-primary-text: #ffffff; --c-hover: #d98da3; --c-hover-text: #ffffff; --c-surface: #f3dde2; --c-surface-text: #2c141a; --c-highlight: #1f8a70; --c-highlight-text: #ffffff; } [data-skin="slate"] { --c-deep: #1f2937; --c-deep-text: #ffffff; --c-primary: #475569; --c-primary-text: #ffffff; --c-hover: #94a3b8; --c-hover-text: #0f172a; --c-surface: #e2e8f0; --c-surface-text: #111827; --c-highlight: #f17300; --c-highlight-text: #1c1200; } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --radius-btn: 6px; --shadow-sm: 0 3px 8px rgba(6, 13, 24, .30), 0 1px 3px rgba(6, 13, 24, .22); --shadow-md: 0 24px 48px rgba(6, 13, 24, .40), 0 8px 18px rgba(6, 13, 24, .30); --shadow-btn: 0 2px 5px rgba(4, 9, 16, .40), 0 1px 2px rgba(4, 9, 16, .32); --content-max: 1600px; } /* Remap a handful of Bootstrap variables so stock components (buttons, focus rings, links, offcanvas) follow the active skin without per-component overrides. */ html { --bs-primary: var(--c-deep); --bs-primary-rgb: 5, 74, 145; --bs-link-color: var(--c-deep); --bs-link-hover-color: var(--c-primary); --bs-body-bg: var(--c-surface); --bs-body-color: var(--c-surface-text); /* without this, Bootstrap's own ".navbar-nav .show > .nav-link" rule (higher specificity than our .main-nav override) repaints "Курсове" near-black the instant its dropdown opens */ --bs-navbar-color: var(--c-deep-text); --bs-navbar-hover-color: var(--c-deep-text); --bs-navbar-active-color: var(--c-deep-text); --bs-navbar-disabled-color: var(--c-deep-text); } /* Every button in the app shares one look — the same style as the header "Registration" button: Steel Blue fill, white text, an Alice Blue border, small rounded corners and a tight/crisp shadow. Hovers to Wisteria Blue. */ .btn-primary { --bs-btn-bg: var(--c-primary); --bs-btn-color: var(--c-primary-text); --bs-btn-border-color: var(--c-surface); --bs-btn-hover-bg: var(--c-hover); --bs-btn-hover-color: var(--c-hover-text); --bs-btn-hover-border-color: var(--c-surface); --bs-btn-active-bg: var(--c-hover); --bs-btn-active-color: var(--c-hover-text); --bs-btn-active-border-color: var(--c-surface); --bs-btn-disabled-bg: var(--c-primary); --bs-btn-disabled-border-color: var(--c-surface); } .btn { --bs-btn-border-radius: var(--radius-btn); box-shadow: var(--shadow-btn); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--c-primary); box-shadow: 0 0 0 .2rem rgba(5, 74, 145, .18); } .form-check-input:checked { background-color: var(--c-deep); border-color: var(--c-deep); } body { background: var(--c-surface); color: var(--c-surface-text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } main { display: block; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; } /* ========================================================================== HEADER ========================================================================== */ .site-header { background: var(--c-deep); color: var(--c-deep-text); box-shadow: var(--shadow-md); position: relative; z-index: 1030; } .header-inner { max-width: var(--content-max); margin: 0 auto; padding: var(--space-3) var(--space-5); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: nowrap; } .brand { display: flex; align-items: center; gap: 10px; color: inherit; } .brand:hover { color: inherit; } .brand__mark { width: 40px; height: 40px; border-radius: var(--radius-md); flex: none; background: var(--c-highlight); display: grid; place-items: center; } .brand__mark svg { width: 24px; height: 24px; } .brand__text strong { display: block; font-size: 1.08rem; letter-spacing: .01em; } .brand__text span { display: block; font-size: .7rem; opacity: .82; letter-spacing: .02em; } /* Bootstrap's dropdown JS toggles its own state classes on this element while open (exact combination varies with focus), and some of those carry higher specificity than a plain ".main-nav .nav-link" override — so this is pinned with !important against every state Bootstrap might apply, not just :hover/:focus. The highlight itself is driven off aria-expanded, which Bootstrap keeps true for as long as the dropdown is open regardless of which item inside it has focus — so clicking around inside the menu never changes it. */ .main-nav .nav-link, .main-nav .nav-link:hover, .main-nav .nav-link:focus, .main-nav .nav-link:active, .main-nav .nav-link.show, .main-nav .nav-link[aria-expanded="true"] { color: var(--c-deep-text) !important; font-weight: 600; } .main-nav .nav-link:hover, .main-nav .nav-link:focus, .main-nav .nav-link.show, .main-nav .nav-link[aria-expanded="true"] { background: rgba(255, 255, 255, .12); border-radius: var(--radius-sm); } /* Bootstrap dropdown = our "mega" menu panel */ .main-nav .dropdown-menu { background: var(--c-deep); border: 1px solid var(--c-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 6px; min-width: 240px; } .main-nav .dropdown-item { color: var(--c-deep-text); background: transparent; border-radius: var(--radius-sm); padding: 10px 12px; font-weight: 600; font-size: .9rem; white-space: normal; } .main-nav .dropdown-item:hover, .main-nav .dropdown-item:focus { background: var(--c-hover); color: var(--c-hover-text); } /* Desktop: a submenu (dropdown-submenu) opens as a flyout beside the category list, keeping the same background as its parent menu. */ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin-left: 8px; margin-top: 0; width: 300px; max-height: min(60vh, 420px); overflow-y: auto; } /* category arrow: points down at rest; once its flyout opens (to the right), it rotates to point right, toward the panel it opened. Bootstrap's own auto-generated caret on .dropdown-toggle is suppressed here so only our one SVG arrow shows. */ .dropdown-submenu > a.dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dropdown-submenu > a.dropdown-toggle::after { display: none; } .dropdown-submenu > a.dropdown-item .submenu-arrow { flex: none; transition: transform .18s ease; } .dropdown-submenu > a.dropdown-item[aria-expanded="true"] .submenu-arrow { transform: rotate(-90deg); } .ce-inactiveMenu .dropdown-header { background: var(--c-primary); color: var(--c-primary-text); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 8px 12px 8px 8px; margin: 2px 0 0; border-radius: var(--radius-sm); } .header-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; } .social-links { display: flex; gap: 8px; } .social-links a { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background .15s ease; } .social-links a:hover { background: rgba(255, 255, 255, .24); } .social-links svg { width: 15px; height: 15px; } .header-actions .nav-link { color: var(--c-deep-text); font-weight: 600; } /* Registration / Sign in / Account / Exit render as real buttons, not plain nav links — same style as every other button in the app (Steel Blue fill, Alice Blue border), hovering to Wisteria Blue. */ .btn-signin, .btn-register, .btn-account, .btn-exit, .header-actions .nav-link.btn-signin, .header-actions .nav-link.btn-register, .header-actions .nav-link.btn-account, .header-actions .nav-link.btn-exit { display: inline-flex; align-items: center; font-weight: 700; font-size: .875rem; padding: 8px 16px; border-radius: var(--radius-btn); white-space: nowrap; background: var(--c-primary); color: var(--c-primary-text) !important; border: 1px solid var(--c-surface); box-shadow: var(--shadow-btn); transition: background .15s ease, color .15s ease, transform .12s ease; } .btn-signin:hover, .btn-register:hover, .btn-account:hover, .btn-exit:hover, .header-actions .nav-link.btn-signin:hover, .header-actions .nav-link.btn-register:hover, .header-actions .nav-link.btn-account:hover, .header-actions .nav-link.btn-exit:hover { background: var(--c-hover); color: var(--c-hover-text) !important; transform: translateY(-1px); } /* Account is icon-only — square up the padding instead of the text buttons' wider horizontal padding. */ .btn-account, .header-actions .nav-link.btn-account { padding: 8px; justify-content: center; } .btn-account svg { display: block; } .navbar-toggler { background: rgba(255, 255, 255, .14); border: 0; color: var(--c-deep-text); } .navbar-toggler svg { color: var(--c-deep-text); } /* Mobile: the primary nav + submenus become a full-width off-canvas panel */ .offcanvas { background: var(--c-deep); color: var(--c-deep-text); } .offcanvas .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } @media (max-width: 991.98px) { .main-nav .dropdown-menu { position: static; float: none; width: 100%; margin: 4px 0 0; border: 0; box-shadow: none; background: var(--c-primary); color: var(--c-primary-text); } .main-nav .dropdown-item { color: var(--c-primary-text); } .dropdown-submenu > .dropdown-menu { width: 100%; max-height: none; margin-left: 0; padding-left: 14px; background: var(--c-primary); } } /* admin-only banner shown above the header for admins */ .admin-banner { width: 100%; text-align: center; font-weight: bold; padding: 10px; background-color: #f0b26b; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { background: var(--c-deep); color: var(--c-deep-text); } .footer-upper { max-width: 1100px; margin: 0 auto; padding: var(--space-7) var(--space-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); text-align: center; } .footer-col__title { font-size: .95rem; font-weight: 700; margin-bottom: var(--space-3); } .footer-col p { opacity: .85; font-size: .875rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .footer-col a { color: inherit; opacity: .85; font-size: .875rem; } .footer-col a:hover { opacity: 1; text-decoration: underline; color: inherit; } .footer-col .social-links { justify-content: center; margin-top: var(--space-2); } .footer-rule { border: 0; border-top: 1px solid var(--c-surface); margin: 0 var(--space-5); opacity: .5; } .footer-bottom { text-align: center; padding: var(--space-4) var(--space-5); font-size: .8125rem; opacity: .8; } .skin-picker { display: flex; gap: 10px; justify-content: center; margin-top: var(--space-3); } .skin-picker form { display: contents; } .skin-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; background: conic-gradient(var(--sw-deep) 0 20%, var(--sw-primary) 20% 40%, var(--sw-hover) 40% 60%, var(--sw-surface) 60% 80%, var(--sw-highlight) 80% 100%); } .skin-swatch[aria-current="true"] { border-color: #ffffff; box-shadow: 0 0 0 2px var(--c-deep), 0 0 0 4px var(--c-highlight); } .skin-picker__label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .8; margin-bottom: var(--space-2); } /* ========================================================================== PAGE SHELL — 1 / 2 / 3 column layouts ========================================================================== */ .page-main { background: var(--c-surface); color: var(--c-surface-text); min-height: 60vh; } .layout3 { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-5); display: flex; align-items: flex-start; gap: var(--space-6); } .layout3__main { flex: 1 1 auto; min-width: 0; } .layout2 { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-5); display: flex; align-items: flex-start; gap: var(--space-6); } .layout2__main { flex: 1 1 auto; min-width: 0; } /* shared sidebar shell (left topics rail, right tools rail, account menu) */ .aside { flex: 0 0 258px; background: var(--c-primary); color: var(--c-primary-text); border-radius: var(--radius-lg); padding: var(--space-4); position: sticky; top: var(--space-4); box-shadow: var(--shadow-md); } .aside__title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; opacity: .8; padding: 4px 10px 10px; } /* left sidebar — course topics, grouped by topic category. Groups are non-clickable headings (a real navigation, not an accordion — clicking a topic loads that page); the current topic is highlighted Alice Blue. Group title uses the deep tone so it reads as distinct against the sidebar's own primary-blue background. */ .topic-group { margin-bottom: 4px; border-radius: var(--radius-sm); overflow: hidden; } .topic-group__title { background: var(--c-deep); color: var(--c-deep-text); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 9px 10px; } .topic-group__list { list-style: none; margin: 0; padding: 0; } .topic-sub__item a { display: block; text-decoration: none; font-size: .88rem; padding: 9px 10px; color: var(--c-primary-text); border-radius: var(--radius-sm); } .topic-sub__item a:hover { background: var(--c-hover); color: var(--c-hover-text); } .topic-sub__item.is-selected a { background: var(--c-surface); color: var(--c-surface-text); font-weight: 700; } /* flat sidebar — right "tools" rail + account left menu: no submenus */ .flat-menu { list-style: none; margin: 0; padding: 0; } .flat-menu__item a { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; text-decoration: none; font-weight: 600; font-size: .9rem; color: var(--c-primary-text); padding: 10px 10px; border-radius: var(--radius-sm); margin-bottom: 2px; } .flat-menu__item a:hover { background: var(--c-hover); color: var(--c-hover-text); } /* admin-supplied SVG icons on these links come with no fixed size — pin them down so they don't render at their raw (often huge) intrinsic size and crowd out the label text */ .flat-menu__item a svg { width: 18px; height: 18px; flex: none; } .flat-menu__item.is-selected a { background: var(--c-surface); color: var(--c-surface-text); } .aside__note { font-size: .78rem; opacity: .82; padding: 10px; line-height: 1.5; } /* ========================================================================== HOME PAGE — one-column stacked blocks ========================================================================== */ .block { padding: var(--space-7) var(--space-5); } .block__inner { max-width: 1120px; margin: 0 auto; } .hero { position: relative; background: var(--c-primary); color: var(--c-primary-text); box-shadow: var(--shadow-md); } .hero__inner { max-width: 900px; margin: 0 auto; text-align: center; } .hero__eyebrow { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; margin-bottom: var(--space-3); } .hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; } .hero__lead { font-size: 1.125rem; opacity: .92; max-width: 640px; margin: 0 auto var(--space-6); } .hero__ctas { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* same style as every other button: Steel Blue fill, Alice Blue border, Wisteria Blue hover */ .btn-hero-solid, .btn-hero-outline { display: inline-flex; align-items: center; background: var(--c-primary); color: var(--c-primary-text); border: 1px solid var(--c-surface); font-weight: 700; padding: 12px 22px; border-radius: var(--radius-btn); box-shadow: var(--shadow-btn); transition: background .15s ease, color .15s ease, transform .12s ease; } .btn-hero-solid:hover, .btn-hero-outline:hover { background: var(--c-hover); color: var(--c-hover-text); transform: translateY(-1px); } .content-blocks .block:nth-of-type(odd) { background: var(--c-hover); color: var(--c-hover-text); } .content-blocks .block:nth-of-type(even) { background: var(--c-surface); color: var(--c-surface-text); } .block__head { text-align: center; max-width: 640px; margin: 0 auto var(--space-6); } .block__head h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; } .block__head p { opacity: .88; } .home-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); } .home-card { display: block; padding: var(--space-5); border-radius: var(--radius-lg); text-decoration: none; color: #fff; background: rgba(255, 255, 255, .14); transition: transform .18s ease, box-shadow .18s ease; } .content-blocks .block:nth-of-type(even) .home-card { background: #ffffff; color: var(--c-surface-text); box-shadow: var(--shadow-sm); } .home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); color: inherit; } .home-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; } .home-card p { font-size: .9rem; opacity: .9; margin: 0; } .home-card__thumb { height: 90px; border-radius: var(--radius-md); margin-bottom: var(--space-3); } .cta-band { text-align: center; } .cta-band h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; } /* ========================================================================== COURSE LESSON CONTENT ========================================================================== */ /* single card shell — intro header fused to a white body, so the whole topic reads as one unit instead of loose text stacked between the two side rails */ .lesson-card { background: #dddddd; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; } .lesson-card__body { padding: var(--space-6); font-size: 1.05rem; line-height: 1.7; } /* The rich-text HTML a topic's content blocks render (headings, paragraphs, lists) doesn't carry its own color/spacing - style it here for a softer, more readable page instead of flat --c-surface-text everywhere. Headings stay bold but a shade lighter than pure text-black so a long lesson page doesn't read as harsh; paragraphs get a touch more breathing room. */ .lesson-card__body h1, .lesson-card__body h2, .lesson-card__body h3, .lesson-card__body h4 { color: var(--c-surface-text); /* fallback for browsers without color-mix() */ color: color-mix(in srgb, var(--c-surface-text) 82%, white); line-height: 1.3; } .lesson-card__body h3, .lesson-card__body h4 { font-size: 1.1rem; font-weight: 700; margin: 0 0 var(--space-3); } .lesson-card__body p { color: var(--c-surface-text); color: color-mix(in srgb, var(--c-surface-text) 88%, white); } .lesson-card__body p:last-child { margin-bottom: 0; } .lesson-card__body li { margin-bottom: var(--space-2); } .lesson-intro { position: relative; background: var(--c-primary); color: var(--c-primary-text); padding: var(--space-6); } .lesson-intro h1, .lesson-intro h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 700; margin: 0; } .lesson-section { padding-top: var(--space-6); } .lesson-section:first-child { padding-top: 0; } .lesson-section + .lesson-section { border-top: 2px solid var(--c-deep); } .lesson-section h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--space-3); } /* Text blocks get their bottom gap "for free" - Bootstrap's default p { margin-bottom: 1rem } on the raw rich-text content collapses through the unpadded wrapper div in Topic.cshtml. The boxed block types below don't get that for free (their padding blocks the collapse), so they set the same 1rem explicitly to match - keep this in sync with Bootstrap's $paragraph-margin-bottom. */ .lesson-media { background: var(--c-hover); color: var(--c-hover-text); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: 1rem; } .lesson-media pre { background: rgba(0, 0, 0, .22); border-radius: var(--radius-md); padding: var(--space-4); overflow-x: auto; color: #f2f6fb; } .lesson-media img { max-width: 100%; height: auto; border-radius: var(--radius-md); } /* Uses the logo's own accent color (--c-highlight, the brand mark's badge fill) so an "important" block reads as unmistakably attention-grabbing while still following the active skin. */ .lesson-important { background: var(--c-highlight); color: var(--c-highlight-text); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: 1rem; } .lesson-important__label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .82; margin-bottom: var(--space-2); } .lesson-important h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--space-2); } .ad-slot { border: 1.5px dashed rgba(20, 26, 31, .3); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; background: rgba(255, 255, 255, .5); margin-bottom: 1rem; } .ad-slot__label { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; font-weight: 700; margin-bottom: 8px; } /* ========================================================================== AUTH PAGES ========================================================================== */ .auth-panel { background: #ffffff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-7); } .auth-panel h1 { font-size: 1.5rem; font-weight: 700; } .auth-tabs { display: flex; gap: 4px; background: var(--c-surface); padding: 4px; border-radius: var(--radius-pill); max-width: 420px; margin: 0 auto var(--space-6); } .auth-tabs a { flex: 1; text-align: center; padding: 9px 10px; border-radius: var(--radius-pill); font-weight: 700; font-size: .84rem; color: var(--c-surface-text); text-decoration: none; } .auth-tabs a.active { background: var(--c-deep); color: var(--c-deep-text); } .auth-form-col { max-width: 440px; margin: 0 auto; } .auth-form-col .form-floating { margin-bottom: var(--space-4); } .auth-side { max-width: 440px; margin: 0 auto; } .auth-side hr { border-color: #e2e8f0; } /* ========================================================================== ACCOUNT DASHBOARD ========================================================================== */ .account-card { background: #ffffff; border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); margin-bottom: var(--space-6); } .account-stat { background: #ffffff; border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-sm); text-align: center; } .account-stat strong { display: block; font-size: 1.6rem; } .account-stat span { font-size: .8125rem; opacity: .7; } /* ========================================================================== COURSE MOBILE SUB-NAV — burger + current topic title ========================================================================== */ .subnav { display: none; } .layout3 > .offcanvas-lg.offcanvas-start { flex: 0 0 258px; } #courseTopicsDrawer { --bs-offcanvas-width: 300px; } @media (max-width: 991.98px) { .layout3 > .offcanvas-lg.offcanvas-start { flex: 1 1 auto; } .layout3, .layout2 { flex-direction: column; } .layout3 .aside, .layout2 .aside { position: static; width: 100%; } .subnav { display: flex; align-items: center; gap: 10px; background: var(--c-deep); color: var(--c-deep-text); padding: 10px var(--space-4); position: sticky; top: 0; z-index: 1020; margin: 0 calc(-1 * var(--space-4)); } .subnav__burger { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); border: 0; border-radius: var(--radius-sm); color: inherit; } .subnav__title { flex: 1; min-width: 0; overflow: hidden; font-weight: 700; font-size: .9375rem; white-space: nowrap; } .subnav__title-inner { display: inline-block; } .subnav__title.is-marquee .subnav__title-inner { animation: marquee-scroll 7s ease-in-out infinite; } @keyframes marquee-scroll { 0%, 12% { transform: translateX(0); } 45%, 55% { transform: translateX(var(--marquee-shift, 0)); } 88%, 100% { transform: translateX(0); } } .footer-upper { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 575.98px) { .home-card-grid { grid-template-columns: 1fr; } }