/* ============================================================ DAZZ MEDIA STUDIO — dazz-mobile.css Mobile-first responsive override layer. LOAD ORDER: Last in , after vendor responsive.css. PURPOSE: Win any cascade conflicts cleanly via specificity or !important where vendor rules are too broad. BREAKPOINTS (match Bootstrap 4): xs: <576px sm: 576–767px md: 768–991px lg: 992–1199px xl: ≥1200px ============================================================ */ /* ───────────────────────────────────────────────────────────── 0. GLOBAL RESET — applies across ALL screen sizes ───────────────────────────────────────────────────────────── These rules are safe at every width. overflow-x: hidden prevents animations and wide elements from triggering a horizontal scrollbar on mobile. ───────────────────────────────────────────────────────────── */ html { overflow-x: hidden; scroll-behavior: auto; /* Lenis handles smooth scroll; avoid double-smooth */ } body { overflow-x: hidden; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Ensure all images are responsive by default */ img { max-width: 100%; height: auto; } /* ───────────────────────────────────────────────────────────── 1. NAVBAR ───────────────────────────────────────────────────────────── The vendor template expects .navbar-nav.items as a direct child of .navbar-expand. Our HTML wraps it in .navbar-inner for flex centering. These rules ensure the wrapper doesn't break layout at any size. ───────────────────────────────────────────────────────────── */ /* Navbar base: flex row, space-between, no wrapping */ header .navbar.navbar-expand { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; padding: 0 20px !important; height: 70px !important; } /* Brand: never shrink */ header .navbar-brand.dazz-brand { flex-shrink: 0 !important; margin-right: 0 !important; } /* Desktop nav wrapper — takes up remaining flex space */ header .navbar-inner { flex: 1 1 auto !important; display: flex !important; justify-content: center !important; align-items: center !important; overflow: hidden !important; } /* Desktop nav items list */ header .navbar-inner .navbar-nav.items { display: flex !important; flex-direction: row !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 4px !important; } /* Hamburger toggle — hidden on desktop, shown on mobile/tablet */ header .navbar-nav.toggle { display: none !important; flex-shrink: 0 !important; } /* Action CTA list */ header .navbar-nav.action { flex-shrink: 0 !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* ── Tablet / small desktop: ≤1199px ── */ @media (max-width: 1199px) { /* Hide the desktop nav, show the hamburger */ header .navbar-inner { display: none !important; } header .navbar-nav.toggle { display: flex !important; align-items: center !important; } /* Push toggle to the right, CTA stays at far right */ header .navbar.navbar-expand { justify-content: space-between !important; } } /* ── Mobile: ≤767px ── */ @media (max-width: 767px) { header .navbar.navbar-expand { padding: 0 16px !important; height: 60px !important; } /* Logo font scale */ .dazz-logo-text { font-size: 1.05rem !important; } /* CTA button: show text but keep it compact */ header .navbar-nav.action .btn { padding: 8px 14px !important; font-size: 11px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; letter-spacing: 0.2px !important; } header .navbar-nav.action .btn svg { width: 13px !important; height: 13px !important; margin-right: 5px !important; flex-shrink: 0 !important; } /* Hamburger touch target: ≥44px */ header .navbar-nav.toggle .nav-link { min-width: 44px !important; min-height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 8px !important; } } /* ── Extra small: ≤380px ── */ @media (max-width: 380px) { header .navbar-nav.action .btn { padding: 8px 10px !important; font-size: 10px !important; } /* On very small screens: icon-only CTA */ header .navbar-nav.action .btn svg { margin-right: 0 !important; } } /* ───────────────────────────────────────────────────────────── 2. HERO SECTION ───────────────────────────────────────────────────────────── vendor responsive.css sets height:700px !important at ≤991px and height:100% !important at ≤767px. Our critical inline CSS sets min-height:100vh. This file uses a higher-specificity selector to conclusively win both height and min-height on all mobile sizes. ───────────────────────────────────────────────────────────── */ /* Tablet + mobile: override vendor height:700px !important */ @media (max-width: 991px) { .homepage-5 .welcome-area.dazz-hero, body.homepage-5 .welcome-area.dazz-hero { height: auto !important; min-height: 100svh !important; /* svh = small viewport height; avoids mobile browser chrome overlap */ min-height: 100vh !important; /* fallback for browsers without svh support */ padding-top: 90px !important; padding-bottom: 60px !important; display: flex !important; align-items: center !important; } } /* Small mobile */ @media (max-width: 767px) { .homepage-5 .welcome-area.dazz-hero, body.homepage-5 .welcome-area.dazz-hero { padding-top: 80px !important; padding-bottom: 50px !important; } /* Hero H1: scale down gracefully with clamp */ .welcome-area.dazz-hero #hero-headline { font-size: clamp(1.85rem, 8.5vw, 2.8rem) !important; letter-spacing: -0.01em !important; line-height: 1.15 !important; } /* Hero sub-copy: full width */ .welcome-area.dazz-hero .welcome-intro p { font-size: 0.9rem !important; max-width: 100% !important; line-height: 1.65 !important; } /* Trust stats row: allow wrapping */ .welcome-area.dazz-hero .d-flex.flex-wrap { flex-wrap: wrap !important; gap: 8px 14px !important; font-size: 0.78rem !important; } /* CTA buttons: stack vertically on small screens */ .welcome-area.dazz-hero .button-group { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; } .welcome-area.dazz-hero .button-group .btn { margin-right: 0 !important; margin-bottom: 0 !important; flex-shrink: 0 !important; min-height: 44px !important; /* WCAG tap target */ } } /* Extra small */ @media (max-width: 480px) { .welcome-area.dazz-hero #hero-headline { font-size: clamp(1.65rem, 9vw, 2.2rem) !important; } /* Eyebrow badge: prevent overflow */ .welcome-area.dazz-hero .dazz-eyebrow { font-size: 9px !important; letter-spacing: 1.2px !important; white-space: normal !important; text-align: center !important; } } /* ───────────────────────────────────────────────────────────── 3. MARQUEE STRIP ───────────────────────────────────────────────────────────── Slow down on mobile to stay readable; reduce item padding. ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-marquee-track { animation-duration: 44s !important; /* slower on mobile */ } .dazz-marquee-item { padding: 14px 20px !important; font-size: 10px !important; letter-spacing: 1.5px !important; } } /* ───────────────────────────────────────────────────────────── 4. SECTION HEADINGS — global ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .section-heading h2 { font-size: clamp(1.55rem, 6vw, 2.2rem) !important; line-height: 1.3 !important; } .section-heading p { font-size: 0.9rem !important; line-height: 1.65 !important; } } @media (max-width: 480px) { .section-heading h2 { font-size: clamp(1.4rem, 7.5vw, 1.9rem) !important; } } /* ───────────────────────────────────────────────────────────── 5. FEATURED SHOWREEL ───────────────────────────────────────────────────────────── */ @media (max-width: 991px) { /* On mobile, the thumbnail should be above the description */ .dazz-featured .col-12.col-lg-7.res-margin { margin-bottom: 28px !important; } /* Thumbnail: maintain 16:9 aspect ratio */ .dazz-featured-thumb img { width: 100% !important; height: auto !important; } } @media (max-width: 767px) { .dazz-featured .dazz-featured-content ul { font-size: 0.82rem !important; } } /* ───────────────────────────────────────────────────────────── 6. SERVICE STRIPS (service-strip sections) ───────────────────────────────────────────────────────────── On mobile, the text column stacks above the card column. res-margin handles the gap between them. ───────────────────────────────────────────────────────────── */ @media (max-width: 991px) { .service-strip .res-margin { margin-bottom: 28px !important; } /* Cancel flex-reverse on tablet — always text first, card second */ .service-strip .row.flex-lg-row-reverse { flex-direction: column !important; } /* Remove flex-row-reverse that applies at ≤991px */ .service-strip .row.align-items-center { flex-direction: column !important; } /* Ensure heading columns and card columns are full-width */ .service-strip .col-12.col-lg-6, .service-strip .col-12.col-lg-5 { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } } @media (max-width: 767px) { /* Service strips: reduce vertical padding */ .service-strip.dazz-strip-pad { padding-top: 48px !important; padding-bottom: 48px !important; } /* Section number badge */ .service-strip .badge.dazz-eyebrow { font-size: 9px !important; letter-spacing: 2px !important; } /* Service H2 in strips */ .service-strip h2.text-white { font-size: clamp(1.4rem, 6vw, 2rem) !important; line-height: 1.25 !important; } /* Glass service card */ .service-strip .single-service.media { padding: 20px !important; flex-direction: row !important; align-items: flex-start !important; } /* Service icon: keep square, reasonable size */ .service-strip .dazz-service-icon.dazz-glass-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 18px !important; flex-shrink: 0 !important; } /* Service media body */ .service-strip .media-body { margin-left: 14px !important; } .service-strip .media-body h3 { font-size: 1rem !important; line-height: 1.3 !important; } .service-strip .media-body p { font-size: 0.85rem !important; line-height: 1.6 !important; } /* CTA link: min tap target */ .service-strip .service-btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; font-size: 0.85rem !important; } } /* ───────────────────────────────────────────────────────────── 7. APP DEV CAPABILITY BANNER ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-appdev-banner { padding-top: 56px !important; padding-bottom: 56px !important; } .dazz-appdev-banner h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; line-height: 1.25 !important; } .dazz-appdev-banner p { font-size: 0.88rem !important; line-height: 1.65 !important; } } /* ───────────────────────────────────────────────────────────── 8. PORTFOLIO GRID ───────────────────────────────────────────────────────────── Bootstrap 4's col-sm-6 gives 2 columns at ≥576px. At <576px they stack to 1 column. Both are desirable. On ≥768px they're 3 columns via col-lg-4. The overlay text needs to be readable at all sizes. ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Reduce card spacing */ .portfolio-area .col-12.col-sm-6.col-lg-4.mb-4 { margin-bottom: 16px !important; padding-left: 8px !important; padding-right: 8px !important; } /* Slightly reduce outer gutter on small screens */ .portfolio-area .row.justify-content-center { margin-left: -8px !important; margin-right: -8px !important; } /* Overlay text: scale for small cards */ .single-case-studies .overlay-text h3 { font-size: 0.85rem !important; margin-bottom: 4px !important; } .single-case-studies .overlay-text p { font-size: 0.72rem !important; margin-bottom: 4px !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important; } .single-case-studies .overlay-text .btn-sm { font-size: 0.7rem !important; padding: 5px 10px !important; min-height: 32px !important; } /* Badge positioning */ .dazz-card-badge { font-size: 8px !important; letter-spacing: 0.8px !important; padding: 3px 8px !important; top: 8px !important; left: 8px !important; } } /* ───────────────────────────────────────────────────────────── 9. METRICS SECTION ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-metrics { padding-top: 56px !important; padding-bottom: 56px !important; } /* 2×2 grid on small screens — already set by col-6 col-md-3 */ .dazz-metrics .col-6 > div { padding: 20px 12px !important; border-radius: 10px !important; } .dazz-metrics .col-6 > div .counter { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; } .dazz-metrics .col-6 > div p { font-size: 0.72rem !important; letter-spacing: 1px !important; } } /* ───────────────────────────────────────────────────────────── 10. WHY CHOOSE SECTION ───────────────────────────────────────────────────────────── */ @media (max-width: 991px) { /* Why thumb: full width, stacks above text */ .content-area .dazz-why-thumb { margin-bottom: 32px !important; } /* Why thumb image: responsive */ .dazz-why-thumb img { width: 100% !important; max-height: 320px !important; object-fit: cover !important; border-radius: 10px !important; } } @media (max-width: 767px) { .content-area.dazz-bg-why { padding-top: 56px !important; padding-bottom: 56px !important; } /* Content list items: tighter */ .single-content-list.media { padding: 8px 0 !important; } .content-list .content-text span { font-size: 0.88rem !important; line-height: 1.55 !important; } } /* ───────────────────────────────────────────────────────────── 11. PROCESS SECTION ───────────────────────────────────────────────────────────── At ≤991px: 2 cards per row (col-md-6 handles this). At ≤767px: 1 card per row. At ≥992px: all 5 in a row (col-lg auto-flex). ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-process-card { padding: 24px 18px !important; } .dazz-process-num { font-size: 2rem !important; } .dazz-process-card h3 { font-size: 1rem !important; } .dazz-process-card p { font-size: 0.85rem !important; line-height: 1.6 !important; } } /* ───────────────────────────────────────────────────────────── 12. TESTIMONIALS / OWL CAROUSEL ───────────────────────────────────────────────────────────── Owl Carousel initialises with owlSettings in active.js. On mobile, ensure reviews are readable. ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-testimonials .single-review { padding: 20px !important; margin: 4px !important; } .dazz-testimonials .single-review p { font-size: 0.86rem !important; line-height: 1.65 !important; } .dazz-testimonials .reviewer h5 { font-size: 0.88rem !important; } } /* ───────────────────────────────────────────────────────────── 13. ABOUT / FOUNDER SECTION ───────────────────────────────────────────────────────────── */ @media (max-width: 991px) { /* Founder card stacks below text */ .content-area .col-12.col-lg-5.pt-5.pt-lg-0 { padding-top: 32px !important; } } @media (max-width: 767px) { .content-area.dazz-bg-about { padding-top: 56px !important; padding-bottom: 56px !important; } .dazz-founder-card { padding: 24px 20px !important; } .dazz-founder-avatar { width: 80px !important; height: 80px !important; } .dazz-founder-tags li { font-size: 0.72rem !important; padding: 3px 8px !important; margin: 3px !important; } } /* ───────────────────────────────────────────────────────────── 14. CREATIVE LAB CARDS ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-exp-card { padding: 32px 24px !important; } .dazz-exp-icon { width: 52px !important; height: 52px !important; font-size: 20px !important; } } /* ───────────────────────────────────────────────────────────── 15. FAQ SECTION ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-faq-trigger { padding: 15px 16px !important; gap: 10px !important; } .dazz-faq-trigger-text { font-size: 0.88rem !important; line-height: 1.45 !important; } .dazz-faq-body-inner { padding: 0 16px 16px !important; font-size: 0.85rem !important; line-height: 1.7 !important; } .dazz-faq-icon { width: 20px !important; height: 20px !important; flex-shrink: 0 !important; } } /* ───────────────────────────────────────────────────────────── 16. CONTACT SECTION ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .contact-area { padding-top: 56px !important; padding-bottom: 56px !important; } /* Contact cards: 2 per row on small screens */ .contact-area .col-12.col-md-6.col-lg-3 { /* stays full-width at xs, 2-up at sm handled by Bootstrap */ } .dazz-contact-card { padding: 20px 14px !important; } .dazz-contact-card h3 { font-size: 0.95rem !important; margin-top: 10px !important; margin-bottom: 6px !important; } .dazz-contact-card p { font-size: 0.82rem !important; } .dazz-contact-icon { width: 40px !important; height: 40px !important; font-size: 16px !important; } /* Contact CTA row: stack vertically */ .contact-area .row.justify-content-center.mt-4 .btn { margin-bottom: 8px !important; margin-right: 0 !important; width: 100% !important; max-width: 280px !important; justify-content: center !important; } } /* ───────────────────────────────────────────────────────────── 17. CONTACT FORM ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .dazz-form-input { font-size: 0.88rem !important; padding: 12px 14px !important; } .dazz-form-submit { font-size: 0.9rem !important; padding: 13px !important; min-height: 48px !important; } /* Form row: stack name and contact fields */ .dazz-contact-form-wrap .row .col-12.col-md-6 { padding-left: 0 !important; padding-right: 0 !important; } } /* ───────────────────────────────────────────────────────────── 18. FOOTER ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .footer-area .footer-top { padding-top: 48px !important; padding-bottom: 40px !important; } /* Collapse footer columns to full-width on mobile */ .footer-area .col-12.col-sm-6.col-lg-4, .footer-area .col-12.col-sm-6.col-lg-2, .footer-area .col-12.col-sm-6.col-lg-3 { margin-bottom: 28px !important; } .footer-area .col-12:last-child .footer-items { margin-bottom: 0 !important; } .footer-items h3.footer-title { font-size: 0.82rem !important; letter-spacing: 1.5px !important; margin-bottom: 12px !important; } .footer-items p, .footer-items ul li a, .footer-items ul li { font-size: 0.84rem !important; } /* Footer bottom: stack on xs */ .copyright-area { flex-direction: column !important; gap: 6px !important; padding-top: 20px !important; padding-bottom: 20px !important; } .copyright-left, .copyright-right { font-size: 0.78rem !important; text-align: center !important; } } /* ───────────────────────────────────────────────────────────── 19. FLOATING ELEMENTS POSITIONING ───────────────────────────────────────────────────────────── On mobile, the floating WA button and scroll-up button must not overlap each other. WA (bottom:28, right:24) vs scrollUp (bottom:24, right:24) On ≤575px, WA collapses to circle — scrollUp moves left. ───────────────────────────────────────────────────────────── */ @media (max-width: 575px) { /* Scroll-up: move left so it doesn't overlap circle WA */ #scrollUp { right: 80px !important; bottom: 24px !important; width: 38px !important; height: 38px !important; font-size: 14px !important; } /* WA circle: bottom-right corner */ .dazz-float-wa { bottom: 20px !important; right: 18px !important; } } /* ───────────────────────────────────────────────────────────── 20. MODAL / MOBILE MENU ───────────────────────────────────────────────────────────── The mobile menu modal (#menu) must be full-screen on mobile and provide adequate touch targets for each nav item. ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { #menu .modal-content { background: #06052F !important; border: none !important; } #menu .modal-header { background: rgba(131,64,255,0.08) !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; color: #fff !important; font-family: 'Poppins', sans-serif !important; font-weight: 600 !important; font-size: 0.9rem !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 18px 24px !important; } #menu .modal-body .items { padding: 12px 0 !important; } /* Each mobile nav link: full-width, tall tap target */ #menu .navbar-nav .nav-link, #menu .items .nav-item a { display: block !important; padding: 14px 24px !important; font-size: 1rem !important; font-weight: 600 !important; color: rgba(255,255,255,0.85) !important; letter-spacing: 0.5px !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; min-height: 52px !important; display: flex !important; align-items: center !important; transition: color 0.2s ease, background 0.2s ease !important; } #menu .navbar-nav .nav-link:hover, #menu .items .nav-item a:hover { color: #be63f9 !important; background: rgba(131,64,255,0.06) !important; } } /* ───────────────────────────────────────────────────────────── 21. SECTION PADDING — global compression for mobile ───────────────────────────────────────────────────────────── Vendor responsive.css sets ptb_100 → 50px at ≤767px. That's fine for most sections but too tight for a few. These are additive overrides, not blanket changes. ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { /* Services intro banner */ section#services.dazz-bg-services.ptb_100 { padding-top: 48px !important; padding-bottom: 40px !important; } /* Video production sub-header */ section.dazz-bg-services[style*="padding:40px 0 0"] { padding: 32px 0 0 !important; } /* Process: give each card a bit more room */ .dazz-process.ptb_100 { padding-top: 48px !important; padding-bottom: 48px !important; } /* Testimonials: matches process */ .dazz-testimonials.ptb_100 { padding-top: 48px !important; padding-bottom: 48px !important; } /* Creative Lab */ .dazz-experiments.ptb_100 { padding-top: 48px !important; padding-bottom: 48px !important; } } /* ───────────────────────────────────────────────────────────── 22. BUTTONS — global tap-target compliance ───────────────────────────────────────────────────────────── All interactive elements must be ≥44×44px on mobile (WCAG). ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .btn { min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 0.88rem !important; padding: 10px 20px !important; } .btn.btn-sm { min-height: 36px !important; font-size: 0.78rem !important; padding: 6px 14px !important; } } /* ───────────────────────────────────────────────────────────── 23. TYPOGRAPHY — global fluid sizing ───────────────────────────────────────────────────────────── These are global fallbacks. Section-specific rules above take precedence via specificity. ───────────────────────────────────────────────────────────── */ @media (max-width: 767px) { h2 { font-size: clamp(1.5rem, 6.5vw, 2rem) !important; line-height: 1.3 !important; } h3 { font-size: clamp(1rem, 4.5vw, 1.3rem) !important; line-height: 1.35 !important; } p { font-size: 0.9rem !important; line-height: 1.65 !important; } } /* ───────────────────────────────────────────────────────────── 24. PREVENT OVERFLOW FROM ANIMATIONS ───────────────────────────────────────────────────────────── GSAP animations animate x/y on elements. Without clipping, elements that start off-screen (x: -50) can briefly extend the document width, causing layout shift. ───────────────────────────────────────────────────────────── */ #main-wrapper, .section, main#main-content { overflow-x: hidden !important; } /* ───────────────────────────────────────────────────────────── 25. SKIP LINK — accessibility ───────────────────────────────────────────────────────────── */ .dazz-skip-link { position: absolute !important; top: -100px !important; left: 16px !important; z-index: 100000 !important; background: #8340ff !important; color: #fff !important; padding: 10px 18px !important; border-radius: 0 0 6px 6px !important; font-family: 'Poppins', sans-serif !important; font-size: 0.85rem !important; font-weight: 600 !important; text-decoration: none !important; transition: top 0.2s ease !important; } .dazz-skip-link:focus { top: 0 !important; } /* ───────────────────────────────────────────────────────────── 26. REDUCED MOTION — kill all transitions ───────────────────────────────────────────────────────────── Belt-and-suspenders: this file's own hover transitions should also respect prefers-reduced-motion. ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .dazz-marquee-track { animation: none !important; /* Show first set as static list on reduced-motion */ overflow-x: auto !important; } } /* ───────────────────────────────────────────────────────────── 27. PRINT STYLES ───────────────────────────────────────────────────────────── */ @media print { #preloader, .dazz-cursor, .dazz-cursor-ring, #dazz-progress-bar, .dazz-float-wa, #scrollUp, header .navbar-nav.toggle, header .navbar-nav.action, .dazz-marquee-outer { display: none !important; } body { background: #fff !important; color: #000 !important; } .text-white, .text-white-50 { color: #000 !important; } }