/* * Thomassen Service — Mobile Responsive Stylesheet * Generated from Figma mobile design (node 972:2975, 393px) * Targets your actual Blade class names exactly as found in the codebase. * * HOW TO ADD: * 1. Save this file as: public/assets/css/thomassen-mobile.css * 2. In views/layouts/app.blade.php, add AFTER the main.css link: * * * This file is 100% additive — it only fires at ≤ 768px. * Your desktop layout is completely untouched. */ /* ─── DESIGN TOKENS (from Figma) ───────────────────────────── */ :root { --th-navy: #090360; --th-blue: #0000ff; --th-body: #2b2b2b; --th-muted: #989898; --th-bg: #f5f5f5; --th-white: #ffffff; --th-px: 16px; --th-py: 35px; --th-card-r: 20px; } @media (max-width: 768px) { /* ══════════════════════════════════════════════════════════════ HEADER / NAVBAR Classes: .header-minimal .header-inner .header-logo img .header-right .header-top-row .header-nav .header-divider .mobile-nav-toggle ══════════════════════════════════════════════════════════════ */ .mobile-nav-overlay { display: none; position: fixed; inset: 0; background: var(--th-navy); z-index: 999; padding: 90px var(--th-px) var(--th-py); flex-direction: column; } .mobile-nav-overlay.open { display: flex; } .mobile-nav-menu { display: flex; flex-direction: column; gap: 0; } .mobile-nav-menu a { color: var(--th-white); font-size: 18px; font-weight: 600; text-decoration: none; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.10); display: block; } .mobile-nav-menu a:last-child { border-bottom: none; } .mobile-nav-menu a.active { color: rgba(255,255,255,0.60); } .header-minimal { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: transparent; padding: 12px 0; transition: background 0.3s; } .header-minimal.scrolled { background: var(--th-white); box-shadow: 0 2px 12px rgba(9,3,96,0.12); } .header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--th-px); } /* Logo */ .header-logo img { height: 49px; width: auto; max-width: 180px; object-fit: contain; } /* Hide desktop nav completely */ .header-right { display: none !important; } /* Show burger button */ .mobile-nav-toggle { display: flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 0; color: var(--th-white); font-size: 24px; z-index: 1001; } .header-minimal.scrolled .mobile-nav-toggle { color: var(--th-navy); } /* Mobile slide-out overlay nav — Bootstrap adds .mobile-nav-active on */ body.mobile-nav-active .header-minimal { background: var(--th-navy); } /* Bootstrap mobile nav already handles the overlay via main.css; these tweaks align it with the Figma dark navy overlay style */ .mobile-nav { background: var(--th-navy) !important; padding: 70px var(--th-px) var(--th-py) !important; } .mobile-nav a { color: var(--th-white) !important; font-size: 18px; font-weight: 600; padding: 14px 0 !important; border-bottom: 1px solid rgba(255,255,255,0.10) !important; } .mobile-nav a:last-child { border-bottom: none !important; } /* ══════════════════════════════════════════════════════════════ HERO SECTION Classes: #hero.hero .hero-swiper .hero-slide .hero-overlay .hero-card .hero-title .hero-desc .hero-link-wrap .hero-link .hero-pagination .hero-dot .hero-dot-active ══════════════════════════════════════════════════════════════ */ #hero.hero { height: 100svh; min-height: 600px; max-height: 733px; } .hero-swiper, .hero-swiper .swiper-wrapper, .hero-swiper .swiper-slide { height: 100% !important; } .hero-card { /* Figma: glass card bottom-left, 20px padding, gap 20px */ position: absolute; bottom: 36px; left: 6px; right: 6px; background: rgba(9,3,96,0.50); border-radius: var(--th-card-r); padding: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 10; } .hero-title { font-size: 28px; font-weight: 900; line-height: 1.3; letter-spacing: 0.56px; color: var(--th-white); text-transform: capitalize; margin: 0; } .hero-desc { font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--th-white); margin: 0; } .hero-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--th-white); text-decoration: none; } /* Swiper pagination dots styled like Figma */ .hero-pagination { display: flex !important; align-items: center; gap: 5px; position: static !important; width: auto !important; margin-top: 4px; } .hero-dot { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.50); cursor: pointer; border: none; padding: 0; transition: width 0.3s; flex-shrink: 0; } .hero-dot-active { width: 26px; background: var(--th-white); } /* ══════════════════════════════════════════════════════════════ STATS SECTION Classes: #stats.stats.section .section-title h2 p .container .row.gy-4 .col-lg-3.col-md-6 .stats-item i.bi span ══════════════════════════════════════════════════════════════ */ #stats.stats.section { padding: var(--th-py) 0; background: var(--th-bg); } #stats .section-title { padding: 0 var(--th-px); margin-bottom: 16px; } #stats .section-title h2 { font-size: 12px; font-weight: 400; color: var(--th-blue); text-transform: uppercase; letter-spacing: 0; margin: 0 0 4px; } #stats .section-title p { font-size: 32px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; margin: 0; line-height: normal; } #stats .row { margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 0 var(--th-px); } #stats .col-lg-3, #stats .col-md-6 { width: 100% !important; max-width: 100% !important; padding: 0 !important; flex: none !important; } .stats-item { background: var(--th-white); border-radius: var(--th-card-r); padding: 14px; gap: 12px; } .stats-item i.bi { font-size: 28px; color: var(--th-blue); } .stats-item p { font-size: 15px; font-weight: 500; color: var(--th-body); margin: 0 0 8px; } .stats-item span { font-size: 32px; font-weight: 700; color: var(--th-body); line-height: 1; } /* ══════════════════════════════════════════════════════════════ ABOUT SECTION (home) Classes: #about.about.section .container .row.gx-0 .col-lg-8 .col-lg-4 .content h2 h3 .about-img a (know more link) ══════════════════════════════════════════════════════════════ */ #about.about.section { padding: 0 0 var(--th-py); background-color: var(--th-bg) !important; overflow: hidden; } #about .container { padding-left: var(--th-px); padding-right: var(--th-px); } #about .row.gx-0 { flex-direction: column !important; border-radius: 30px; padding: 20px !important; background: var(--th-white) !important; position: relative; z-index: 1; gap: 20px; margin: 0 !important; width: 100% !important; } #about .col-lg-8, #about .col-lg-4 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } #about .col-lg-8 { order: 1; } #about .col-lg-4 { order: 2; } #about h3 { font-size: 12px; font-weight: 400; color: var(--th-blue); text-transform: uppercase; margin: 0 0 4px; } #about h2 { font-size: 32px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; margin: 0 0 14px; } #about .content p, #about .content li { font-size: 15px; line-height: 1.55; color: var(--th-body); } #about .about-img { width: 100%; border-radius: var(--th-card-r); object-fit: cover; aspect-ratio: 3/2; display: block; } #about .content .text-lg-end { text-align: left !important; margin-top: 16px; } #about .content a { font-size: 14px; font-weight: 600; color: var(--th-blue); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } #about.section::after{ height: 70% !important; } /* ══════════════════════════════════════════════════════════════ SERVICE CARDS / VALUES SECTION (home) Classes: #values.values.section .section-title .row.gy-4 .col-lg-3 .card i.bi h3 p ══════════════════════════════════════════════════════════════ */ #values.values.section { padding: var(--th-py) 0; } #values .section-title { padding: 0 var(--th-px); margin-bottom: 16px; } #values .section-title h2 { font-size: 12px; font-weight: 400; color: var(--th-blue); text-transform: uppercase; margin: 0 0 4px; } #values .section-title p { font-size: 32px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; margin: 0; } #values .row { margin: 0; flex-direction: column; gap: 12px; padding: 0 var(--th-px); } #values .col-lg-3 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; } #values .card { border-radius: var(--th-card-r); padding: 14px; background: var(--th-white); border: none; display: flex; flex-direction: column; gap: 10px; } #values .card i.bi { font-size: 30px; color: var(--th-blue); background: rgba(0,0,255,0.05); border-radius: 12px; padding: 12px; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; } #values .card h3 { font-size: 18px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; letter-spacing: 0.36px; margin: 0; } #values .card p { font-size: 14px; line-height: 1.55; color: var(--th-body); margin: 0; } /* ══════════════════════════════════════════════════════════════ PORTFOLIO / PROJECTS SECTION (home + projects page) Classes: #portfolio.portfolio.section .section-title .portfolio-filters.isotope-filters li .filter-active .isotope-container .col-lg-4.col-md-6.portfolio-item .portfolio-content .img-wrapper img .portfolio-info h4 p .portfolio-nav-btn .portfolio-see-all ══════════════════════════════════════════════════════════════ */ #portfolio.portfolio.section { padding: var(--th-py) 0; background: var(--th-white); } #portfolio .section-title { padding: 0 var(--th-px); margin-bottom: 16px; } #portfolio .section-title h2 { font-size: 12px; font-weight: 400; color: var(--th-blue); text-transform: uppercase; margin: 0 0 4px; } #portfolio .section-title p { font-size: 32px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; margin: 0; } /* Filter pills — horizontally scrollable */ .portfolio-filters.isotope-filters { display: flex !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; background: var(--th-bg); border-radius: 99px; padding: 8px; margin: 0 var(--th-px) 16px; list-style: none; } .portfolio-filters.isotope-filters::-webkit-scrollbar { display: none; } .portfolio-filters.isotope-filters li { flex-shrink: 0; padding: 10px 16px; border-radius: 99px; font-size: 13px; font-weight: 400; color: #000; cursor: pointer; white-space: nowrap; min-width: 70px; text-align: center; } .portfolio-filters.isotope-filters li.filter-active, .portfolio-filters.isotope-filters li:hover { background: var(--th-blue); color: var(--th-white); font-weight: 700; } /* Project cards — full width, stacked */ #portfolio .isotope-container.row { margin: 0 !important; display: flex !important; flex-direction: column; gap: 0; padding: 0 var(--th-px); } #portfolio .col-lg-4, #portfolio .col-md-6 { width: 100% !important; max-width: 100% !important; flex: none !important; padding: 0 !important; margin-bottom: 0 !important; } .portfolio-content { display: flex; flex-direction: column; gap: 12px; min-height: 390px; padding-bottom: 10px; } .portfolio-content .img-wrapper { border-radius: var(--th-card-r); overflow: hidden; height: 220px; flex-shrink: 0; } .portfolio-content .img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--th-card-r); } .portfolio-info { padding: 0 4px; } .portfolio-info h4 { font-size: 20px; font-weight: 700; color: #262626; margin: 0 0 6px; } .portfolio-info p { font-size: 14px; line-height: 1.4; color: var(--th-body); margin: 0; } /* nav + see all */ #portfolio .container.mt-4 { padding: 0 var(--th-px); margin-top: 20px !important; } .portfolio-nav-btn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid #ddd; background: var(--th-white); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15px; } .portfolio-see-all { font-size: 14px; font-weight: 600; color: var(--th-blue); text-decoration: none; } /* ══════════════════════════════════════════════════════════════ CLIENTS SECTION Classes: #clients.clients.section .section-title .clients-track-wrapper .clients-track .client-logo img ══════════════════════════════════════════════════════════════ */ #clients.clients.section { background: var(--th-white); padding: var(--th-py) 0; } #clients .section-title { padding: 0 var(--th-px); margin-bottom: 24px; } #clients .section-title h2 { font-size: 12px; font-weight: 400; color: var(--th-blue); text-transform: uppercase; margin: 0 0 4px; } #clients .section-title p { font-size: 32px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; margin: 0; } .clients-track-wrapper { overflow: hidden; width: 100%; } .clients-track { display: flex; align-items: center; gap: 48px; width: max-content; animation: thomassenScrollLogos 18s linear infinite; } .client-logo img { height: 48px; width: auto; object-fit: contain; flex-shrink: 0; } @keyframes thomassenScrollLogos { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ══════════════════════════════════════════════════════════════ LATEST NEWS SECTION (home) Classes: #latest-news.latest-news-section .container .news-card-wrapper .news-list-panel .news-panel-header .news-main-title .news-see-all .news-item .news-thumb .news-thumb img .news-body .news-date .news-title .news-excerpt .news-read-more .news-featured-panel .news-featured-img img .news-featured-overlay .news-featured-content .news-featured-title .news-featured-excerpt .news-featured-read-more ══════════════════════════════════════════════════════════════ */ #latest-news.latest-news-section { background: var(--th-navy); padding: var(--th-py) var(--th-px); } .news-card-wrapper { background: var(--th-white); border-radius: var(--th-card-r); padding: 16px; display: flex; flex-direction: column; gap: 16px; } /* Header row: title + see all */ .news-panel-header { display: flex; align-items: center; justify-content: space-between; width: 100%; } .news-main-title { font-size: 28px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; margin: 0; } .news-see-all { font-size: 13px; font-weight: 600; color: var(--th-blue); text-decoration: none; white-space: nowrap; } /* Featured panel — full-width tall image card on mobile */ .news-featured-panel { position: relative; width: 100%; height: 480px; border-radius: var(--th-card-r); overflow: hidden; order: -1; /* featured first on mobile (Figma layout) */ } .news-featured-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .news-featured-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(9,3,96,0.75), rgba(9,3,96,0.15)); } .news-featured-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; display: flex; flex-direction: column; gap: 8px; } .news-featured-content .news-date { font-size: 14px; font-weight: 400; color: var(--th-white); } .news-featured-title { font-size: 24px; font-weight: 700; color: var(--th-white); text-transform: capitalize; margin: 0; line-height: 1.25; } .news-featured-excerpt { font-size: 13px; line-height: 1.4; color: var(--th-white); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-featured-read-more { font-size: 12px; font-weight: 600; color: var(--th-white); text-decoration: none; } /* News list items */ .news-list-panel { display: flex; flex-direction: column; gap: 0; } .news-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #f0f0f0; } .news-item:last-child { border-bottom: none; } .news-thumb { width: 90px; height: 90px; flex-shrink: 0; border-radius: 8px; overflow: hidden; } .news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; } .news-date { font-size: 10px; font-weight: 500; color: var(--th-muted); } .news-title { font-size: 16px; font-weight: 700; color: #262626; margin: 0; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-excerpt { font-size: 12px; line-height: 1.4; color: var(--th-body); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-read-more { font-size: 10px; font-weight: 600; color: var(--th-blue); text-decoration: none; } /* ══════════════════════════════════════════════════════════════ CONTACT SECTION Classes: #contact.contact-section .container .contact-wrapper .contact-form-panel .contact-label .contact-title .contact-field input textarea .contact-submit .contact-info-panel .contact-map iframe .contact-details .contact-info-item .contact-info-icon .contact-info-body strong span a ══════════════════════════════════════════════════════════════ */ #contact.contact-section { background: var(--th-white); padding: var(--th-py) var(--th-px); } .contact-wrapper { display: flex !important; flex-direction: column; gap: 24px; } .contact-form-panel, .contact-info-panel { width: 100% !important; flex: none !important; } .contact-label { display: block; font-size: 12px; font-weight: 400; color: var(--th-blue); text-transform: uppercase; margin-bottom: 4px; } .contact-title { font-size: 32px; font-weight: 700; color: var(--th-navy); text-transform: capitalize; margin: 0 0 20px; } .contact-form { display: flex; flex-direction: column; gap: 16px; } .contact-field input, .contact-field textarea { width: 100%; background: var(--th-bg); border: none; border-radius: 28px; padding: 12px 20px; height: 50px; font-size: 14px; color: var(--th-body); outline: none; font-family: inherit; } .contact-field input::placeholder, .contact-field textarea::placeholder { color: var(--th-muted); } .contact-field textarea { height: 120px; padding-top: 14px; resize: none; } .contact-submit { background: var(--th-blue); color: var(--th-white); border: none; border-radius: 99px; height: 50px; width: 200px; font-size: 14px; font-weight: 700; text-transform: capitalize; cursor: pointer; font-family: inherit; } /* Map */ .contact-map { width: 100%; height: 260px; border-radius: var(--th-card-r); overflow: hidden; margin-bottom: 20px; } .contact-map iframe { width: 100%; height: 100%; border: none; display: block; } /* Contact info items */ .contact-details { display: flex; flex-direction: column; gap: 18px; } .contact-info-item { display: flex; align-items: flex-start; gap: 14px; } .contact-info-icon { width: 46px; height: 46px; background: rgba(0,36,192,0.10); border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: var(--th-blue); } .contact-info-body { display: flex; flex-direction: column; gap: 3px; } .contact-info-body strong { font-size: 15px; font-weight: 700; color: var(--th-navy); letter-spacing: 0.3px; display: block; } .contact-info-body span, .contact-info-body a { font-size: 12px; color: var(--th-body); text-decoration: none; line-height: 1.5; } .contact-info-body a:hover { text-decoration: underline; } /* ══════════════════════════════════════════════════════════════ FOOTER Classes: #footer.footer-minimal .container .footer-inner .footer-logo-wrap .footer-logo .footer-socials .footer-social-link i.bi .footer-copy ══════════════════════════════════════════════════════════════ */ #footer.footer-minimal { background: var(--th-navy); padding: var(--th-py) var(--th-px); } .footer-inner { display: flex !important; flex-direction: column; align-items: center; gap: 20px; } .footer-logo-wrap { width: 100%; } .footer-logo { height: 70px; width: auto; max-width: 280px; display: block; object-fit: contain; } .footer-socials { display: flex; gap: 12px; align-items: center; margin-bottom: 12px !important; } .footer-social-link { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.10); border-radius: 50%; color: var(--th-white); font-size: 18px; text-decoration: none; transition: background 0.2s; } .footer-social-link:hover { background: rgba(255,255,255,0.22); color: var(--th-white); } .footer-copy { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.75); } /* ══════════════════════════════════════════════════════════════ PAGE BANNER (services, projects, news, about pages) Classes: .page-banner .page-banner-img img .page-banner-overlay .page-banner-content .page-banner-label h1.page-banner-title .page-banner-desc ══════════════════════════════════════════════════════════════ */ .page-banner { height: auto; min-height: 280px; padding-top: 100px; padding-bottom: 36px; position: relative; overflow: hidden; } .page-banner-img { position: absolute; inset: 0; } .page-banner-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .page-banner-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(9,3,96,0.65), rgba(9,3,96,0.40)); } .page-banner-content { position: relative; z-index: 2; padding: 0 var(--th-px); } .page-banner-label { display: block; font-size: 11px; font-weight: 400; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .page-banner-title { font-size: 26px; font-weight: 900; color: var(--th-white); line-height: 1.3; margin: 0 0 10px; text-transform: capitalize; } .page-banner-desc { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.85); margin: 0; } /* ══════════════════════════════════════════════════════════════ SERVICES PAGE — tabs + panels + alt rows Classes: .svc-tabs-wrap .svc-tabs .svc-tab .svc-panel .svc-panel-inner .svc-panel-text .svc-panel-img .svc-panel-label .svc-panel-title .svc-panel-desc .svc-features .svc-feature i.bi .alt-svc-row .alt-svc-inner .alt-svc-text .alt-svc-img .related-projects-section .rp-grid .rp-card ══════════════════════════════════════════════════════════════ */ .svc-tabs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 var(--th-px); } .svc-tabs-wrap::-webkit-scrollbar { display: none; } .svc-tabs { display: flex; gap: 8px; width: max-content; padding-bottom: 4px; } .svc-tab { white-space: nowrap; padding: 10px 18px; border-radius: 99px; font-size: 13px; font-weight: 500; border: 1px solid #ddd; background: var(--th-white); cursor: pointer; color: var(--th-body); } .svc-tab.active { background: var(--th-navy); color: var(--th-white); border-color: var(--th-navy); } .svc-panel-inner { display: flex !important; flex-direction: column; gap: 20px; padding: 0 var(--th-px); } .svc-panel-text, .svc-panel-img { width: 100% !important; flex: none !important; } .svc-panel-img img { width: 100%; border-radius: var(--th-card-r); object-fit: cover; aspect-ratio: 4/3; display: block; } .svc-panel-label { font-size: 11px; color: var(--th-blue); text-transform: uppercase; display: block; margin-bottom: 6px; } .svc-panel-title { font-size: 26px; font-weight: 700; color: var(--th-navy); margin: 0 0 12px; } .svc-panel-desc { font-size: 14px; line-height: 1.55; color: var(--th-body); } .svc-features { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; } .svc-feature { display: flex; gap: 12px; align-items: flex-start; } .svc-feature i.bi { font-size: 20px; color: var(--th-blue); flex-shrink: 0; margin-top: 2px; } /* Alternating service rows — stack on mobile */ .alt-svc-inner { display: flex !important; flex-direction: column !important; gap: 20px; padding: 0 var(--th-px); } .alt-svc-img, .alt-svc-text { width: 100% !important; flex: none !important; } .alt-svc-img img { width: 100%; border-radius: var(--th-card-r); object-fit: cover; aspect-ratio: 4/3; display: block; } /* Related projects */ .rp-grid { display: flex !important; flex-direction: column !important; gap: 16px; padding: 0 var(--th-px); } .rp-card { width: 100% !important; } .rp-card .rp-img-wrap img { width: 100%; border-radius: var(--th-card-r); object-fit: cover; aspect-ratio: 16/9; display: block; } /* ══════════════════════════════════════════════════════════════ NEWS LISTING PAGE Classes: .news-listing-section .news-filters-wrap .news-filters .news-filter .news-featured-post .news-featured-card .news-featured-img img .news-cat-badge .news-featured-middle .news-featured-title .news-featured-excerpt .news-featured-footer .news-grid .news-card .news-card-img .news-card-body .news-card-title .news-card-excerpt .news-card-footer .news-load-more-wrap .news-load-more ══════════════════════════════════════════════════════════════ */ .news-listing-section { padding: var(--th-py) 0; } .news-filters-wrap { padding: 0 var(--th-px); margin-bottom: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .news-filters-wrap::-webkit-scrollbar { display: none; } .news-filters { display: flex; gap: 0; width: max-content; background: var(--th-bg) !important; border-radius: 99px; padding: 6px; } .news-filter { flex-shrink: 0; padding: 9px 16px; border-radius: 99px; border: none; cursor: pointer; font-size: 13px; font-weight: 400; color: #000; background: transparent; white-space: nowrap; } .news-filter.active { background: var(--th-blue); color: var(--th-white); font-weight: 700; } /* Featured pair — stack vertically */ .news-featured-post { display: flex !important; flex-direction: column; gap: 16px; padding: 0 var(--th-px); margin-bottom: 24px; } .news-featured-card { width: 100% !important; flex: none !important; } .news-featured-img { position: relative; border-radius: var(--th-card-r); overflow: hidden; height: 200px; } .news-featured-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-cat-badge { font-size: 10px; padding: 3px 10px; border-radius: 99px; } .news-featured-title { font-size: 20px !important; margin: 8px 0 !important; } .news-featured-excerpt { font-size: 13px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* News grid — 1 column on mobile */ .news-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 16px; padding: 0 var(--th-px); } .news-card { width: 100% !important; } .news-card-img { border-radius: var(--th-card-r) var(--th-card-r) 0 0; overflow: hidden; height: 200px; } .news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-card-body { padding: 14px; } .news-card-title { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: #262626; } .news-card-excerpt { font-size: 13px; line-height: 1.45; color: var(--th-body); margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-card-footer { display: flex; align-items: center; justify-content: space-between; } .news-date { font-size: 11px; color: var(--th-muted); } .news-read-more { font-size: 12px; font-weight: 600; color: var(--th-blue); text-decoration: none; } .news-load-more-wrap { text-align: center; margin-top: 24px; padding: 0 var(--th-px); } .news-load-more { background: var(--th-navy); color: var(--th-white); border: none; border-radius: 99px; padding: 12px 36px; font-size: 14px; font-weight: 600; cursor: pointer; } /* ══════════════════════════════════════════════════════════════ SCROLL-TOP BUTTON ══════════════════════════════════════════════════════════════ */ #scroll-top { bottom: 16px !important; right: 16px !important; width: 40px !important; height: 40px !important; } /* ══════════════════════════════════════════════════════════════ SECTION SEPARATOR ══════════════════════════════════════════════════════════════ */ .section-separator { height: 1px; background: #eee; margin: 0 var(--th-px); } } /* end @media (max-width: 768px) */ /* ── Force drawer hidden by default on ALL screen sizes ── */ .mobile-nav-drawer { right: -100% !important; visibility: hidden; transition: right 0.35s ease, visibility 0.35s ease; } .mobile-nav-drawer.open { right: 0 !important; visibility: visible; } .mobile-nav-overlay { display: none !important; } .mobile-nav-overlay.open { display: block !important; } /* ── Hide hamburger on desktop ── */ @media (min-width: 1200px) { .mobile-nav-toggle { display: none !important; } .mobile-nav-drawer { display: none !important; } .mobile-nav-overlay { display: none !important; } }