/* =========================================================================== Company CMS — public site theme (layered on top of Bootstrap 5) --brand / --brand-dark are injected per-site from Settings in header.php =========================================================================== */ :root { --brand: #1d4ed8; --brand-dark: #0f172a; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0; --bg-soft: #f6f8fc; --bg-page: #ffffff; --surface: #ffffff; --radius: 16px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06); --shadow-lg: 0 10px 40px rgba(15, 23, 42, .12); color-scheme: light; } /* ---- Dark theme (toggled via data-theme="dark" on ) --------------- */ :root[data-theme="dark"] { --ink: #e7ecf5; --muted: #9aa7bd; --line: #263349; --bg-soft: #0f1729; --bg-page: #0b1220; --surface: #101a2f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .35); --shadow-lg: 0 10px 40px rgba(0, 0, 0, .5); color-scheme: dark; } * { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg-page); overflow-x: hidden; transition: background-color .25s ease, color .25s ease; } h1, h2, h3, h4, h5, h6, .display-title { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-weight: 700; letter-spacing: -.02em; } a { text-decoration: none; color: var(--brand); } a:hover { color: var(--brand-dark); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--brand); color: #fff; padding: .6rem 1rem; } .skip-link:focus { left: 0; color: #fff; } .text-brand { color: var(--brand) !important; } .bg-soft { background: var(--bg-soft); } /* ---- Buttons ------------------------------------------------------------ */ .btn { border-radius: 10px; font-weight: 600; padding: .6rem 1.35rem; } .btn-brand { background: var(--brand); color: #fff; border: 1px solid var(--brand); } .btn-brand:hover, .btn-brand:focus { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; } .btn-outline-brand { border: 1px solid var(--brand); color: var(--brand); background: transparent; } .btn-outline-brand:hover { background: var(--brand); color: #fff; } .btn-light-brand { background: rgba(255, 255, 255, .15); color: #fff; border: 1px solid rgba(255, 255, 255, .5); } .btn-light-brand:hover { background: #fff; color: var(--brand-dark); } /* ---- Top bar & navigation ---------------------------------------------- */ /* FIX: topbar now has the same glass/blur treatment as the floating nav, so the whole header reads as one consistent glass unit. */ .topbar { background: rgba(10, 14, 28, .55); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); color: rgba(255, 255, 255, .82); font-size: .85rem; padding: .5rem 0; position: relative; z-index: 1001; } .topbar a { color: rgba(255, 255, 255, .82); margin-right: 1.25rem; } .topbar a:hover { color: #fff; } .topbar-contact span { margin-right: 1.25rem; } .topbar-social a { margin: 0 .35rem 0 0; font-size: 1rem; } /* ---- Floating pill navbar (overlay style) ------------------------------- */ /* FIX: blur(300px) was an unrealistic value (way past what a normal glass effect needs and heavier than most browsers can even render smoothly). Brought down to a real glass-blur amount. Also removed a stray extra "}" that was here before and silently breaking the rules after it. */ .site-nav { background: rgba(10, 14, 28, .65); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border-radius: 100px; padding: .2rem .75rem; margin-top: .15rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: box-shadow .25s ease, padding .25s ease, background .25s ease; position: absolute; top: 34px; left: 44px; right: 44px; z-index: 1000; overflow: hidden; /* keeps the shine sweep clipped to the pill shape */ } /* ---- Full-border shine on .site-nav (whole edge glows together) --------- The entire border ring brightens and dims as one, like the pill is breathing light — not a moving beam, the whole outline shines at once. */ .site-nav { border: 1px solid rgba(110, 168, 255, .35); animation: navBorderShine 2.6s ease-in-out infinite; } @keyframes navBorderShine { 0%, 100% { border-color: rgba(110, 168, 255, .3); box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 6px rgba(110, 168, 255, .15), inset 0 0 6px rgba(110, 168, 255, .08); } 50% { border-color: rgba(150, 195, 255, .95); box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 22px rgba(110, 168, 255, .65), inset 0 0 14px rgba(110, 168, 255, .35); } } @media (prefers-reduced-motion: reduce) { .site-nav { animation: none; } } .site-nav .container { background: transparent; position: relative; z-index: 2; } .site-nav.is-scrolled { position: fixed; background: rgba(10, 14, 28, .95); box-shadow: var(--shadow-sm); } .navbar-brand { display: flex; align-items: center; gap: .6rem; } .brand-logo { height: 56px; width: auto; max-width: 240px; object-fit: contain; } .brand-mark { width: 52px; height: 52px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.3rem; } .brand-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; color: rgba(255,255,255,.95); font-size: 1.1rem; letter-spacing: -.01em; line-height: 1; } .site-nav .nav-link { color: rgba(255,255,255,.85); font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; padding: .5rem 1.1rem; border-radius: 8px; position: relative; text-align: center; } .site-nav .nav-link::after { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.5); margin: 4px auto 0; transition: background .2s ease; } .site-nav .nav-link:hover, .site-nav .nav-link.active { color: #fff; background: transparent; } .site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { background: #6ea8ff; } .site-nav .nav-search-btn { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: grid; place-items: center; border: none; margin-left: .5rem; } .site-nav .nav-search-btn:hover { background: rgba(255,255,255,.18); } /* ---- Hero slider -------------------------------------------------------- */ .hero-slider .carousel-item { height: clamp(460px, 78vh, 760px); } .hero-slide { position: relative; height: 100%; display: flex; align-items: center; background-size: cover; background-position: center; } .hero-slide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6, 12, 30, .82) 0%, rgba(6, 12, 30, .55) 55%, rgba(6, 12, 30, .35) 100%); } .hero-slide.text-center::after { background: rgba(6, 12, 30, .62); } .hero-slide > .container { position: relative; z-index: 2; color: #fff; } .hero-slider .carousel-item { height: clamp(460px, 78vh, 760px); } .hero-slide.text-center .hero-content { margin: 0 auto; } .hero-slide.text-end .hero-content { margin-left: auto; } .hero-subtitle { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 700; color: #fff; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); padding: .35rem .85rem; border-radius: 100px; margin-bottom: 1rem; } .hero-title { font-size: clamp(2rem, 4.6vw, 3.6rem); color: #fff; line-height: 1.1; margin-bottom: 1rem; } .hero-text { font-size: 1.08rem; color: rgba(255, 255, 255, .88); margin-bottom: 1.75rem; } .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 6%; opacity: .7; } .hero-slider .carousel-indicators [data-bs-target] { width: 30px; height: 4px; border-radius: 4px; border: 0; background: rgba(255, 255, 255, .5); } .hero-slider .carousel-indicators .active { background: #fff; } /* ---- Page hero (inner pages) ------------------------------------------- */ /* FIX (the actual overlap bug): the floating .site-nav is position:absolute and gets removed from normal document flow, so on inner pages (about/services/etc.) the .page-hero used to start right at the top and the nav pill would sit ON TOP of the heading/breadcrumb, hiding it. Padding-top increased enough to clear the topbar + floating nav. */ .page-hero { background: var(--brand-dark); background-size: cover; background-position: center; color: #fff; padding: 9.5rem 0 3.5rem; position: relative; } .page-hero::after { content: ''; position: absolute; inset: 0; background: rgba(8, 15, 35, .7); } .page-hero > .container { position: relative; z-index: 2; } .page-hero h1 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.75rem); } .page-hero .breadcrumb { margin: .5rem 0 0; } .page-hero .breadcrumb a { color: rgba(255, 255, 255, .8); } .page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .5); } .page-hero .breadcrumb-item.active { color: rgba(255, 255, 255, .95); } /* ---- Sections ----------------------------------------------------------- */ .section { padding: 5rem 0; } .section-sm { padding: 3.5rem 0; } .section-head { max-width: 680px; margin: 0 auto 3rem; text-align: center; } .section-head.text-start { margin-left: 0; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--brand); background: rgba(29, 78, 216, .08); padding: .35rem .85rem; border-radius: 100px; margin-bottom: .85rem; } .section-title { font-size: clamp(1.6rem, 3vw, 2.35rem); margin-bottom: .75rem; } .section-sub { color: var(--muted); margin-bottom: 0; } /* ---- Cards -------------------------------------------------------------- */ .card-elev { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card-elev:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; } .media-placeholder, img.card-media, .card-media { display: block; width: 100%; height: 220px; object-fit: cover; } .media-placeholder { display: grid; place-items: center; color: rgba(255, 255, 255, .9); font-size: 2.5rem; } .media-wrap { position: relative; overflow: hidden; } .media-wrap img { transition: transform .5s ease; } .card-elev:hover .media-wrap img { transform: scale(1.06); } .media-badge { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(15, 23, 42, .82); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 100px; } .media-badge.badge-brand { background: var(--brand); } .card-body-pad { padding: 1.5rem; } .card-title-link { color: var(--ink); font-weight: 700; } .card-title-link:hover { color: var(--brand); } .card-text-muted { color: var(--muted); font-size: .95rem; margin-bottom: 1rem; } .link-more { font-weight: 600; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; } .link-more i { transition: transform .2s ease; } .link-more:hover i { transform: translateX(4px); } /* ---- Services ----------------------------------------------------------- */ .service-card { padding: 2rem 1.75rem; } .service-icon { width: 62px; height: 62px; border-radius: 16px; display: grid; place-items: center; background: rgba(29, 78, 216, .09); color: var(--brand); font-size: 1.6rem; margin-bottom: 1.25rem; transition: background .25s ease, color .25s ease; } .card-elev:hover .service-icon { background: var(--brand); color: #fff; } /* ---- Products ----------------------------------------------------------- */ .price-now { color: var(--brand); font-weight: 700; } .price-old { color: var(--muted); text-decoration: line-through; font-size: .9rem; margin-right: .25rem; } .stock-pill { font-size: .75rem; font-weight: 600; padding: .2rem .6rem; border-radius: 100px; } .stock-in { background: rgba(22, 163, 74, .12); color: #15803d; } .stock-out { background: rgba(220, 38, 38, .1); color: #b91c1c; } /* ---- Filter chips (products / projects) --------------------------------- */ .filter-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.5rem; } .filter-chip { border: 1px solid var(--line); background: var(--surface); color: var(--muted); border-radius: 100px; padding: .5rem 1.15rem; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all .2s ease; } .filter-chip:hover { border-color: var(--brand); color: var(--brand); } .filter-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; } /* ---- Projects ----------------------------------------------------------- */ .project-card .media-wrap { height: 260px; } .project-card .card-media { height: 260px; } .project-overlay { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.5rem 1.25rem 1.15rem; color: #fff; background: linear-gradient(to top, rgba(8, 15, 35, .92), rgba(8, 15, 35, 0)); } .project-overlay .cat { font-size: .78rem; color: rgba(255, 255, 255, .8); } .project-overlay h5 { color: #fff; margin: .15rem 0 0; font-size: 1.1rem; } /* ---- Team --------------------------------------------------------------- */ .team-card { text-align: center; } .team-photo, .team-card .media-placeholder { height: 300px; } .avatar-initials { display: grid; place-items: center; color: #fff; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; } .avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; } .team-social { position: absolute; inset: auto 0 -60px 0; z-index: 3; display: flex; justify-content: center; gap: .5rem; padding: 1rem; transition: bottom .3s ease; } .card-elev:hover .team-social { bottom: 0; } .team-social a { width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--brand); display: grid; place-items: center; box-shadow: var(--shadow-sm); } .team-social a:hover { background: var(--brand); color: #fff; } .team-role { color: var(--brand); font-weight: 600; font-size: .92rem; } /* ---- Events ------------------------------------------------------------- */ .event-row { display: flex; gap: 1.25rem; align-items: stretch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; } .event-row:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); } .event-date { flex: 0 0 96px; background: var(--brand); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem .5rem; } .event-date .d { font-size: 1.9rem; font-weight: 800; line-height: 1; font-family: 'Plus Jakarta Sans', sans-serif; } .event-date .m { text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; } .event-date .y { font-size: .75rem; opacity: .8; } .event-body { padding: 1.15rem 1.25rem 1.15rem 0; flex: 1; } .event-meta { color: var(--muted); font-size: .87rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; } .event-thumb { flex: 0 0 160px; } .event-thumb img, .event-thumb .media-placeholder { height: 100%; min-height: 140px; } .event-past { opacity: .72; } .event-past .event-date { background: var(--muted); } /* ---- Blog --------------------------------------------------------------- */ .post-meta { color: var(--muted); font-size: .84rem; display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; } .post-body { font-size: 1.03rem; line-height: 1.8; } .post-body img { max-width: 100%; height: auto; border-radius: 12px; margin: 1rem 0; } .post-body h2, .post-body h3 { margin: 1.75rem 0 .75rem; } .post-body blockquote { border-left: 4px solid var(--brand); padding: .5rem 0 .5rem 1.25rem; color: var(--muted); font-style: italic; margin: 1.5rem 0; } .sidebar-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; background: var(--surface); } .sidebar-card h6 { font-weight: 700; margin-bottom: 1rem; } .sidebar-list { list-style: none; padding: 0; margin: 0; } .sidebar-list li { padding: .45rem 0; border-bottom: 1px dashed var(--line); } .sidebar-list li:last-child { border-bottom: 0; } .sidebar-list a { color: var(--ink); font-weight: 500; } .sidebar-list a:hover { color: var(--brand); } .mini-post { display: flex; gap: .75rem; padding: .6rem 0; } .mini-post img, .mini-post .media-placeholder { width: 68px; height: 60px; border-radius: 10px; object-fit: cover; flex: 0 0 68px; font-size: 1rem; } .tag-pill { display: inline-block; background: var(--bg-soft); color: var(--muted); border-radius: 100px; padding: .3rem .8rem; font-size: .8rem; margin: 0 .3rem .5rem 0; } .tag-pill:hover { background: var(--brand); color: #fff; } /* ---- About / stats / testimonials / partners ---------------------------- */ .about-media { position: relative; border-radius: var(--radius); overflow: hidden; } .about-media img, .about-media .media-placeholder { width: 100%; height: 460px; object-fit: cover; } .about-badge { position: absolute; right: 18px; bottom: 18px; background: var(--brand); color: #fff; border-radius: 14px; padding: 1rem 1.25rem; box-shadow: var(--shadow-lg); } .about-badge .n { font-size: 1.8rem; font-weight: 800; line-height: 1; font-family: 'Plus Jakarta Sans', sans-serif; } .check-list { list-style: none; padding: 0; margin: 1.25rem 0 0; } .check-list li { padding: .35rem 0 .35rem 1.85rem; position: relative; color: var(--muted); } .check-list li::before { content: '\F26E'; font-family: 'bootstrap-icons'; color: var(--brand); position: absolute; left: 0; top: .3rem; } .stat-item { text-align: center; padding: 1.5rem .5rem; } .stat-item i { font-size: 2rem; color: var(--brand); margin-bottom: .5rem; display: block; } .stat-value { font-size: 2.4rem; font-weight: 800; font-family: 'Plus Jakarta Sans', sans-serif; line-height: 1; } .stat-label { color: var(--muted); font-size: .95rem; margin-top: .35rem; } .testimonial-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; height: 100%; } .testimonial-card .quote-mark { font-size: 2.2rem; color: rgba(29, 78, 216, .18); line-height: 1; } .stars { color: #f59e0b; letter-spacing: .1em; font-size: .9rem; } .partner-logo { display: grid; place-items: center; padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); height: 96px; } .partner-logo img { max-height: 52px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .7; transition: all .25s ease; } .partner-logo:hover img { filter: none; opacity: 1; } .cta-band { background: linear-gradient(135deg, var(--brand-dark), var(--brand)); color: #fff; border-radius: 22px; padding: 3rem 2.5rem; } .cta-band h2 { color: #fff; } /* ---- Forms -------------------------------------------------------------- */ .form-control, .form-select { border-radius: 10px; border-color: var(--line); padding: .7rem .9rem; } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .12); } .form-label { font-weight: 600; font-size: .92rem; } .contact-info-card { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); height: 100%; } .contact-info-card i { flex: 0 0 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(29, 78, 216, .09); color: var(--brand); font-size: 1.2rem; } .map-embed iframe, .map-embed { width: 100%; min-height: 380px; border: 0; border-radius: var(--radius); } /* ---- Footer ------------------------------------------------------------- */ .site-footer { background: var(--brand-dark); color: rgba(255, 255, 255, .72); padding-top: 4rem; margin-top: 0; } .site-footer .brand-text { color: #fff; } .site-footer .brand-mark { background: rgba(255, 255, 255, .14); } .footer-about { font-size: .95rem; line-height: 1.75; } .footer-title { color: #fff; font-weight: 700; margin-bottom: 1.1rem; font-size: 1rem; } .footer-links, .footer-contact { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: .6rem; } .footer-links a { color: rgba(255, 255, 255, .72); font-size: .95rem; } .footer-links a:hover { color: #fff; padding-left: 4px; } .footer-contact li { display: flex; gap: .65rem; margin-bottom: .75rem; font-size: .95rem; } .footer-contact i { color: var(--brand); margin-top: .2rem; } .footer-contact a { color: rgba(255, 255, 255, .72); } .footer-contact a:hover { color: #fff; } .footer-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; margin-right: .5rem; } .footer-social a:hover { background: var(--brand); } .newsletter-form .form-control { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; } .newsletter-form .form-control::placeholder { color: rgba(255, 255, 255, .5); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 3rem; padding: 1.35rem 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; font-size: .9rem; } .footer-bottom a { color: rgba(255, 255, 255, .72); } .footer-bottom a:hover { color: #fff; } /* ---- Floating actions --------------------------------------------------- */ .whatsapp-float { position: fixed; left: 22px; bottom: 22px; z-index: 1040; display: inline-flex; align-items: center; gap: .6rem; background: #25d366; color: #fff; border-radius: 100px; padding: .85rem 1.1rem; box-shadow: 0 8px 26px rgba(37, 211, 102, .45); font-weight: 600; } .whatsapp-float i { font-size: 1.5rem; line-height: 1; } .whatsapp-float:hover { color: #fff; transform: translateY(-2px); } .whatsapp-label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s ease; } .whatsapp-float:hover .whatsapp-label { max-width: 200px; } @media (max-width: 575.98px) { .whatsapp-label { display: none; } } .back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 1040; width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--brand); color: #fff; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s ease; } .back-to-top.show { opacity: 1; visibility: visible; transform: none; } /* ---- Reveal-on-scroll --------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } * { scroll-behavior: auto; } } /* ---- Empty states & pagination ------------------------------------------ */ .empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--muted); } .empty-state i { font-size: 2.5rem; color: var(--line); display: block; margin-bottom: .75rem; } .pagination .page-link { color: var(--brand); border-radius: 10px; margin: 0 .15rem; border-color: var(--line); } .pagination .page-item.active .page-link { background: var(--brand); border-color: var(--brand); color: #fff; } /* ---- Responsive tweaks -------------------------------------------------- */ @media (max-width: 991.98px) { .section { padding: 3.5rem 0; } .site-nav .navbar-nav { padding: .75rem 0; gap: .15rem; } .site-nav .nav-item .btn { width: 100%; margin-top: .5rem; } .about-media img, .about-media .media-placeholder { height: 320px; } .event-thumb { display: none; } .page-hero { padding-top: 8rem; } } @media (max-width: 575.98px) { .hero-slider .carousel-item { height: 78vh; min-height: 440px; } .cta-band { padding: 2rem 1.25rem; } .event-row { flex-direction: column; } .event-date { flex-direction: row; gap: .5rem; padding: .6rem; } .event-body { padding: 1rem; } .page-hero { padding-top: 7rem; } } /* ---- Theme toggle button ------------------------------------------------- Add this button's markup in includes/header.php navbar. See assets/js/main.js for the click/persist logic. */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background-color .2s ease, border-color .2s ease, transform .15s ease; } .theme-toggle:hover { transform: translateY(-1px); border-color: var(--brand); } .theme-toggle .theme-icon { font-size: 1.05rem; color: var(--ink); } .theme-toggle .theme-icon-dark { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-light { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-dark { display: inline-block; color: #fbbf24; } /* ---- Dark-mode fixes for Bootstrap form controls & the mobile toggler --- */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--surface); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .form-control::placeholder { color: var(--muted); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--surface); color: var(--ink); } [data-theme="dark"] .navbar-toggler-icon { filter: invert(1); } [data-theme="dark"] .empty-state i { color: var(--line); } /* ---- Dark-mode fix for the Bootstrap FAQ accordion ---------------------- */ [data-theme="dark"] .accordion-item { background-color: var(--surface); border-color: var(--line); color: var(--ink); } [data-theme="dark"] .accordion-button { background-color: var(--surface); color: var(--ink); } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: var(--bg-soft); color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); } [data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); } [data-theme="dark"] .accordion-body { background-color: var(--surface); } /* ---- Shop cart / account additions ---------------------------------- */ .cart-thumb img, .cart-thumb .media-placeholder { width: 100%; height: 100%; object-fit: cover; } .nav-cart-badge { position: absolute; top: -6px; right: -10px; background: var(--brand); color: #fff; font-size: .65rem; font-weight: 700; line-height: 1; padding: .25rem .4rem; border-radius: 100px; } .nav-icon-link { position: relative; display: inline-flex; align-items: center; }