/* user/themes/mytheme/css/lite-mode.css Lightweight rendering mode for the BUET EEE Grav site. Activated by adding eee-lite-mode to , normally via ?theme=lite. */ :root { --eee-lite-red: #ac1f24; --eee-lite-red-dark: #86171b; --eee-lite-border: rgba(172, 31, 36, 0.24); --eee-lite-bg: #ffffff; } /* Toggle button --------------------------------------------------------- */ .eee-lite-toggle-section { align-items: center; display: flex; margin-left: .6rem; } .eee-lite-toggle { appearance: none; background: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.8); border-radius: 999px; color: var(--eee-lite-red); cursor: pointer; font-size: .72rem; font-weight: 700; letter-spacing: .02em; line-height: 1; padding: .45rem .7rem; white-space: nowrap; } .eee-lite-toggle:hover, .eee-lite-toggle:focus-visible { background: var(--eee-lite-red); color: #fff; outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; } html.eee-lite-mode .eee-lite-toggle { background: var(--eee-lite-red); color: #fff; } @media (max-width: 768px) { .eee-lite-toggle-section { margin-left: auto; } .eee-lite-toggle { font-size: .68rem; padding: .38rem .55rem; } } /* Core lite-mode kill switch ------------------------------------------ */ html.eee-lite-mode, html.eee-lite-mode body { scroll-behavior: auto !important; } html.eee-lite-mode *, html.eee-lite-mode *::before, html.eee-lite-mode *::after { animation: none !important; animation-delay: 0s !important; animation-duration: 0s !important; transition: none !important; transition-delay: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; } html.eee-lite-mode [data-aos], html.eee-lite-mode .animated, html.eee-lite-mode .wow, html.eee-lite-mode .fade, html.eee-lite-mode .fade-in, html.eee-lite-mode .is-animated { opacity: 1 !important; transform: none !important; visibility: visible !important; } html.eee-lite-mode .preloader, html.eee-lite-mode .page-loader, html.eee-lite-mode .loader, html.eee-lite-mode #preloader, html.eee-lite-mode .spinner, html.eee-lite-mode .spinner-small, html.eee-lite-mode .loader-section { display: none !important; opacity: 0 !important; visibility: hidden !important; } /* Remove costly hover transforms and animated visual effects ----------- */ html.eee-lite-mode .hero, html.eee-lite-mode .hero:hover, html.eee-lite-mode .hero h1, html.eee-lite-mode .hero h2, html.eee-lite-mode .hero h3, html.eee-lite-mode .hero h4, html.eee-lite-mode .hero:hover h1, html.eee-lite-mode .hero:hover h2, html.eee-lite-mode .hero:hover h3, html.eee-lite-mode .hero:hover h4, html.eee-lite-mode .card, html.eee-lite-mode .card:hover, html.eee-lite-mode .card-image img, html.eee-lite-mode .card:hover .card-image img, html.eee-lite-mode .team_img img, html.eee-lite-mode .team_style2:hover img, html.eee-lite-mode .facility-btn, html.eee-lite-mode .facility-btn:hover, html.eee-lite-mode .tool-btn, html.eee-lite-mode .tool-btn:hover, html.eee-lite-mode .backtotop, html.eee-lite-mode .backtotop:hover, html.eee-lite-mode .navbar-section.logo svg, html.eee-lite-mode .navbar-section.logo:hover svg, html.eee-lite-mode .dropmenu > li:hover > a, html.eee-lite-mode .dropmenu li ul, html.eee-lite-mode .dropmenu li ul li { transform: none !important; filter: none !important; } html.eee-lite-mode .card:hover, html.eee-lite-mode .facility-btn:hover, html.eee-lite-mode .tool-btn:hover, html.eee-lite-mode .sidebar-tiles li a:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08) !important; } html.eee-lite-mode .card-body, html.eee-lite-mode .card:hover .card-body { max-height: none !important; opacity: 1 !important; } html.eee-lite-mode .blog_img a::before, html.eee-lite-mode .gallery_item::before, html.eee-lite-mode .instafeed li a::before, html.eee-lite-mode .team_img::before, html.eee-lite-mode .team_style1 .social_icons, html.eee-lite-mode .team_style4 .social_icons { opacity: 0 !important; visibility: hidden !important; } /* Static home hero used by templates/home.html.twig in lite mode ------- */ .eee-lite-hero { display:none; align-items: center; background-color: #222; background-position: center; background-size: cover; color: #fff; justify-content: center; min-height: 280px; overflow: hidden; padding: 4rem 1rem 3.5rem; position: relative; text-align: center; } .eee-lite-hero__overlay { display:none; background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.70)); inset: 0; position: absolute; } .eee-lite-hero__content { max-width: 980px; position: relative; z-index: 2; } .eee-lite-hero h1 { color: #fff; font-size: clamp(1.7rem, 4vw, 3.1rem); line-height: 1.15; margin: 0; text-shadow: 0 2px 8px rgba(0,0,0,.45); } .eee-lite-hero p { color: #fff; font-size: clamp(1rem, 2vw, 1.4rem); margin: .8rem 0 0; text-shadow: 0 2px 8px rgba(0,0,0,.45); } /* Static LightSlider fallback used by templates/modular/lightslider.html.twig */ html.eee-lite-mode .eee-lite-slider { background: #111; color: #fff; min-height: 300px; overflow: hidden; position: relative; } html.eee-lite-mode .eee-lite-slider .eee-lite-slide, html.eee-lite-mode .eee-lite-slider .panel-bg { align-items: center; background-position: center; background-size: cover; display: flex; justify-content: center; min-height: 320px; width: 100%; } html.eee-lite-mode .eee-lite-slider img { display: block; height: auto; width: 100%; } html.eee-lite-mode .lSSlideOuter, html.eee-lite-mode .lSSlideWrapper, html.eee-lite-mode .lightSlider, html.eee-lite-mode .grav-lightslider ul { transform: none !important; } html.eee-lite-mode #slider-progress, html.eee-lite-mode #slider-toggle, html.eee-lite-mode .lSAction, html.eee-lite-mode .lSPager { display: none !important; } /* Bricklayer is skipped in lite mode; provide a simple CSS grid fallback. */ html.eee-lite-mode .bricklayer { display: grid !important; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } html.eee-lite-mode .bricklayer > * { width: auto !important; } /* Accessibility: respect OS-level reduced motion even outside URL lite mode. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ===================================================================== Lite mode: remove card/listing images ===================================================================== */ /* ===================================================================== Lite mode: hide card images but keep post date ===================================================================== */ /* Keep card-image container because blog-date is inside it */ html.eee-lite-mode .card-image { display: block !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding: 1rem 1rem 0 !important; background: transparent !important; } /* Hide only the image/link inside card-image */ html.eee-lite-mode .card-image > a, html.eee-lite-mode .card-image img { display: none !important; } /* Keep other non-card image blocks hidden */ html.eee-lite-mode .blog_img, html.eee-lite-mode .blog-image, html.eee-lite-mode .post_img, html.eee-lite-mode .content_img { display: none !important; } /* Reset date position because it was originally overlaid on the image */ html.eee-lite-mode .card-image .blog-date, html.eee-lite-mode .blog-date { position: static !important; top: auto !important; left: auto !important; display: inline-block !important; margin: 0 0 0.5rem 0 !important; padding: 0.25rem 0.45rem !important; background: rgba(172, 31, 36, 0.75) !important; color: #ffffff !important; font-size: 0.8rem !important; } /* Remove extra top padding from title area after date is kept */ html.eee-lite-mode .card-header { padding-top: 0.35rem !important; } /* Keep card text normally visible */ html.eee-lite-mode .card-body { max-height: none !important; overflow: visible !important; opacity: 1 !important; }