/* ========================================================================== Delta Networks , mobile-first layer Loaded last, after bootstrap / main.css / main-light.css. The Tekmino theme is authored desktop-first: it lays out for 1600px and then patches downwards. This file is the opposite , it states what the small screen should do, then hands control back to the theme at 992px. Everything here is scoped so nothing leaks into the desktop design. Contents 1 Document & overflow guards 2 Fluid type scale 3 Rhythm: containers, gutters, section spacing 4 Header & mobile drawer 5 Hero / page banner 6 Decorative shapes & marquees 7 Components: cards, counters, pricing, testimonial, FAQ 8 Sliders & swiper controls 9 Forms & contact 10 Footer 11 Touch targets & focus 12 Motion & performance ========================================================================== */ /* ========================================================================== 1. Document & overflow guards ========================================================================== */ html { /* clip, not hidden: hidden on makes position:sticky stop working */ overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-width: 320px; overflow-wrap: break-word; } /* Absolutely-positioned theme decorations are the usual source of sideways scroll on phones. Section-level clipping contains them without hiding the content that scrolls legitimately (marquees, swipers). */ @media (max-width: 991.98px) { main.site-main > section, .tj-footer-section { overflow-x: clip; } } img, svg, video, canvas, iframe { max-width: 100%; } img, video { height: auto; } /* Bootstrap columns default to min-width:auto, so one long word or a wide child stretches the whole row past the viewport. */ .row > * { min-width: 0; } input, select, textarea, button { max-width: 100%; font: inherit; } table { width: 100%; } .table-responsive, .cart-table, .wishlist-table, .woocommerce-cart-form { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ========================================================================== 2. Fluid type scale The theme sets fixed px sizes per breakpoint. Fluid clamps remove the jumps between 320px and 991px and stop long headings clipping. ========================================================================== */ @media (max-width: 991.98px) { .slider_content .title, .banner-content .title, .tj-page-header .page-title, .breadcrumb-title { font-size: clamp(2.125rem, 8.5vw, 3.5rem) !important; line-height: 1.06 !important; letter-spacing: -0.03em; overflow-wrap: break-word; } .sec-title, .section-title { font-size: clamp(1.75rem, 6.4vw, 2.75rem) !important; line-height: 1.12 !important; letter-spacing: -0.02em; max-width: 100%; overflow-wrap: break-word; } .sec-subtitle, .sub-title { font-size: 0.8125rem; letter-spacing: 0.08em; } h3, .title-sm, .service-item .title, .blog-item .title, .pricing-item .title { font-size: clamp(1.125rem, 4.6vw, 1.5rem); line-height: 1.25; overflow-wrap: break-word; } /* 16px minimum for body copy , smaller reflows badly and triggers iOS zoom-on-focus in form fields. */ body, p, .desc { font-size: 1rem; line-height: 1.6; } /* Nothing below 12px: the theme drops badges and labels to 10px. */ .badge, .tag, .label, small, .post-meta, .meta { font-size: 0.75rem !important; } } /* ========================================================================== 3. Rhythm: containers, gutters, section spacing ========================================================================== */ @media (max-width: 991.98px) { .container, .container-fluid { --bs-gutter-x: 32px; padding-inline: calc(var(--bs-gutter-x) * 0.5); } /* One vertical rhythm for every section, whichever spacing class the theme happened to use. */ .section-gap { padding-block: clamp(56px, 10vw, 88px); } .section-gap-x, .section-gap-top { padding-top: clamp(56px, 10vw, 88px); } .section-gap-bottom { padding-bottom: clamp(56px, 10vw, 88px); } /* Heading blocks sit closer to their content on a phone. */ .sec-heading, .section-heading, .sec-title-wrapper { margin-bottom: clamp(28px, 6vw, 44px); max-width: 100%; } } @media (max-width: 575.98px) { .container, .container-fluid { --bs-gutter-x: 24px; } } /* ========================================================================== 4. Header & mobile drawer ========================================================================== */ @media (max-width: 991.98px) { .header-top, .header-duplicate { display: none !important; } .header-bottom { padding-block: 10px; } .header-wrapper { min-height: 56px; gap: 16px; } .logo img, .site_logo img, .mobile_logo img { width: auto; max-width: 150px; max-height: 44px; object-fit: contain; } .menu_btn, .mobile_menu_bar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* Drawer: never wider than the screen, always scrollable, and its scroll must not chain to the page underneath. */ .hamburger-area { width: min(88vw, 380px) !important; max-width: 100%; display: flex; flex-direction: column; overscroll-behavior: contain; } /* Scroll the whole drawer, not a box inside it. The theme's inner box is a fixed-height flex child, so scrolling that one clipped the address while the social row stayed pinned on top of it. */ .hamburger_wrapper { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .hamburger_inner { min-height: 0; overflow: visible; flex: 0 0 auto; } .hamburger_close_btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } .mean-container .mean-nav { overflow: visible; } .mean-container .mean-nav ul li a { min-height: 48px; display: flex; align-items: center; white-space: normal; padding-block: 12px; } /* The dropdown toggle is a 26x32 caret. Stretch it to the full height of its own row so the whole right edge is tappable, without moving it. */ .mean-container .mean-nav ul li a.mean-expand { width: 56px; height: 100%; margin-top: 0; display: flex; align-items: center; justify-content: center; } /* The theme lets this block stretch its own heading to absorb leftover column space (the "Contact Info" h5 computes ~350px tall), which pushes the address into the social row once the drawer is phone-height. Pin it back to normal flow. */ .hamburger-infos { display: block; margin-bottom: 24px; } .hamburger-title { height: auto !important; flex: none; margin-bottom: 16px; } .hamburger-infos .contact-info { display: block; } .hamburger-infos .contact-item + .contact-item { margin-top: 14px; } /* Multi-line entries (a street address) must stay normal flowing text , inline-flex with a min-height mangles their wrapping , so they get their tap area from vertical padding instead. */ .hamburger-infos a { display: inline-block; padding-block: 8px; } } /* ========================================================================== 5. Hero / page banner ========================================================================== */ @media (max-width: 991.98px) { /* The theme pins the hero to 700px regardless of how much copy is in it, which leaves ~200px of dead space under the button on a phone. Size to content instead, with a floor so the image still reads as a hero. */ .slier_content_wrapper { min-height: min(78svh, 620px) !important; padding-top: clamp(104px, 22vw, 150px) !important; padding-bottom: clamp(72px, 14vw, 110px) !important; } .tj-hero-slider, .tj-hero-slider .swiper-slide, .tj_slider_item { height: auto !important; min-height: 0 !important; } .slider_content { max-width: 100% !important; } .slider_content .desc { max-width: 46ch; font-size: 1rem; } /* Photographic hero backgrounds are chosen for a wide desktop crop; on a narrow viewport the subject drifts off and the text loses contrast. A bottom-weighted scrim keeps the copy legible over any crop. */ .slider-bg, .tj-page-header .hero-bg, .tj-banner-section .hero-bg { background-position: 60% center; } .tj_slider_item::after, .tj-page-header::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient( 180deg, rgba(6, 12, 20, 0.72) 0%, rgba(6, 12, 20, 0.5) 45%, rgba(6, 12, 20, 0.78) 100% ); } .tj_slider_item > .container, .tj-page-header > .container { position: relative; z-index: 2; } /* "Follow us" rail is desktop furniture; it has nowhere to live on a phone. */ .slider_socials { display: none !important; } /* Page banners carry only a title and a crumb , they do not need 180px. */ .tj-page-header, .tj-breadcrumb-section { padding-top: clamp(112px, 24vw, 160px); padding-bottom: clamp(48px, 12vw, 84px); } .breadcrumb-list, .tj-breadcrumb-list { flex-wrap: wrap; row-gap: 4px; } } @media (max-width: 575.98px) { .slider_content .title br, .sec-title br, .banner-content .title br { display: none; } } /* ========================================================================== 6. Decorative shapes & marquees ========================================================================== */ @media (max-width: 991.98px) { /* Shapes are positioned against a 1600px canvas. Below 992px they either overlap the copy or hang off the edge, so they come out. */ .h3-about-shape, .about-shape, .faq-shape, .pricing-shape, .counter-shape, .client-shape, .testimonial-shape, .banner-shape, .hero-shape, .orbit, .blur-shape { display: none !important; } /* The rotating badge is absolutely centred over the about image; on a narrow viewport half of it lands off-screen and the circular caption is unreadable at any size a phone can spare. It is decoration, so it goes. */ .circle-text { display: none !important; } /* Marquees must scroll inside their own strip and never sit under the heading above them. */ .h3-marquee-section, .marquee-section { overflow: hidden; padding-block: 8px; } .marquee_text, .marquee-text { font-size: clamp(1.5rem, 7vw, 2.5rem); } } /* ========================================================================== 7. Components ========================================================================== */ @media (max-width: 991.98px) { /* --- Feature / service / blog cards --------------------------------- */ .features-item, .service-item, .blog-item, .pricing-item, .team-item, .integration-item, .location-card { height: auto; padding: clamp(20px, 5vw, 32px); } .features-item .icon, .service-item .icon { flex: 0 0 auto; } /* --- Counters ------------------------------------------------------- */ /* The theme gives these cards a 280px floor and pushes the number and the label to opposite ends with margin-bottom:auto, so the desktop grid lines up. Once the columns stack that becomes ~120px of empty card between a number and its own label. Size to content and group them. */ .h3_countup, .counter-item, .counter-box { display: flex; flex-direction: column; height: auto !important; min-height: 0 !important; padding: clamp(20px, 5vw, 28px) !important; } .h3_countup .inline-content { margin-bottom: 4px; } .counter-item .count, .counter-item .counter_number { font-size: clamp(2.25rem, 11vw, 3.25rem); line-height: 1; } .h3_countup .title, .counter-item .title { margin: 0; } .h3_countup .desc, .counter-item .desc { margin-top: 6px; } /* --- Tabs / accordion lists ---------------------------------------- */ .nav-tabs, .service-tab-list { flex-wrap: wrap; gap: 8px; } .nav-tabs .nav-link, .service-tab-list li a { min-height: 48px; display: flex; align-items: center; } /* --- FAQ ------------------------------------------------------------ */ .accordion-button { min-height: 56px; padding-block: 14px; font-size: 1.0625rem; line-height: 1.35; text-align: start; gap: 12px; } .accordion-body { padding-top: 0; font-size: 1rem; } /* --- Pricing -------------------------------------------------------- */ .pricing-item .price, .pricing-item .amount { font-size: clamp(2rem, 10vw, 3rem); line-height: 1.05; } .pricing-item ul li, .pricing_item ul li { padding-block: 8px; } /* Same push-apart trick as the counters: the price period is floated to the bottom of a fixed-height card, which strands it once cards stack. */ .pricing_item, .pricing-box, .h9_pricing_item { height: auto !important; min-height: 0 !important; } .pricing_item .package_price .period, .pricing-box .pricing-package .period, .h9_pricing_item .package_price .tj_period { margin-bottom: 0; } /* --- Testimonials --------------------------------------------------- */ .testimonial-item { padding: clamp(20px, 5vw, 32px); } .testimonial-item .desc, .testimonial-item p { font-size: 1.0625rem; line-height: 1.55; } /* --- Integration tiles ---------------------------------------------- */ /* throwable.js adds .tj-no-throwable on small screens (no Matter.js physics loop on a phone). Without it the tiles have no positioning of their own, so lay them out as a plain centred wrap instead of a 445px empty box. */ .tj-no-throwable .throwable_wrapper { pointer-events: auto; width: 100%; max-width: 100%; margin-inline: 0; margin-top: 28px; } .tj-no-throwable .throwable_items_wrap { height: auto; width: 100%; max-width: 100%; overflow: visible; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; padding-block: 8px; pointer-events: auto; } /* The theme translates each tile by -50%/-50% so Matter.js can drive it from its centre of mass. With no physics that offset just shifts every tile up and to the left, out of its own row. */ .tj-no-throwable .integration_item { transform: none !important; width: 100%; max-width: 100%; height: auto; min-height: 52px; padding-inline: 8px; gap: 6px; justify-content: center; overflow: hidden; } /* Each tile's label is baked into the logo PNG, so the image carries the tile's real width. Let it scale down instead of spilling past the edge. */ .tj-no-throwable .integration_item img { flex: 0 1 auto; min-width: 0; width: auto; max-width: 100%; height: auto; object-fit: contain; } /* The theme absolutely-positions every tile so Matter.js can drive it; with no physics they would all stack on the same coordinate. */ .tj-no-throwable .throwable_items_wrap > p { position: static; margin: 0; transform: none !important; /* two per row, never wider than half the card */ flex: 1 1 calc(50% - 10px); max-width: calc(50% - 5px); min-width: 0; } /* --- Client / logo grids -------------------------------------------- */ .client-item img, .brand-item img { max-height: 40px; width: auto; object-fit: contain; } /* --- Images inside cards -------------------------------------------- */ .service-item .image img, .blog-item .image img, .about-img img, .image-frame img { width: 100%; height: auto; object-fit: cover; } } /* ========================================================================== 8. Sliders & swiper controls ========================================================================== */ @media (max-width: 991.98px) { /* Swiper's own overflow plus a 1px rounding error is a classic source of a few px of horizontal scroll. */ .swiper { overflow: hidden; } .swiper-button-next, .swiper-button-prev, .slider-nav button, .tj-slider-nav button { width: 44px !important; height: 44px !important; } /* Pagination bullets need a finger-sized hit area even when drawn small. */ .swiper-pagination-bullet { position: relative; width: 10px; height: 10px; } .swiper-pagination-bullet::after { content: ""; position: absolute; inset: -17px; } } /* ========================================================================== 9. Forms & contact ========================================================================== */ @media (max-width: 991.98px) { /* 16px is the threshold below which iOS Safari zooms the page on focus. */ input, select, textarea { font-size: 16px !important; } .contact-form input:not([type="checkbox"]):not([type="radio"]), .contact-form select, .form-control, .nice-select { width: 100%; min-height: 52px; } .contact-form textarea, textarea.form-control { min-height: 140px; } .contact-form button, .contact-form .tj-primary-btn, button[type="submit"] { width: 100%; justify-content: center; } .contact-form .row > [class*="col-"] { margin-bottom: 16px; } /* Map: a fixed desktop height leaves a letterbox on a phone. */ #map, .map-area, .contact-map iframe { height: clamp(240px, 55vw, 360px) !important; width: 100% !important; } .contact-info-item, .contact-item { padding: clamp(20px, 5vw, 28px); } /* Long addresses and emails must wrap rather than push the card wide. */ .contact-item a, .contact-info-item a, .hamburger-infos a { overflow-wrap: anywhere; } } /* ========================================================================== 10. Footer ========================================================================== */ @media (max-width: 991.98px) { .footer-widget { margin-bottom: 32px; } .footer-widget ul li a { display: inline-flex; align-items: center; min-height: 40px; } .copyright-area, .footer-bottom { flex-direction: column; gap: 10px; text-align: center; padding-block: 20px; } .footer-social ul, .social-links ul { justify-content: center; flex-wrap: wrap; gap: 8px; } .footer-social ul li a, .social-links ul li a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ========================================================================== 11. Touch targets & focus ========================================================================== */ @media (max-width: 991.98px) { .tj-primary-btn, .tj-secondary-btn, .btn { min-height: 48px; max-width: 100%; } .tj-primary-btn .btn-text, .tj-secondary-btn .btn-text { white-space: normal; } /* Inline "Learn more" style links: give them a real strip to tap. */ .tj-text-btn, .read-more, .link-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; } /* Button rows wrap instead of squeezing. */ .btn-wrapper, .button-group, .banner-button, .hero-button { display: flex; flex-wrap: wrap; gap: 12px; } .search_close_btn, .search-btn, .cart-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Standalone links the theme renders at 17-32px tall. These are navigation, not prose, so each one needs a finger-sized row of its own. */ .site_logo .logo, .mobile_logo { display: inline-flex; align-items: center; min-height: 44px; } .copyright-menu ul li a, .footer_widget ul li a, .footer-menu ul li a { display: inline-flex; align-items: center; min-height: 44px; } .footer_socials li a, .footer_socials li > a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; } .download_buttons a, .download-buttons a { display: inline-flex; align-items: center; min-height: 44px; } /* Post meta sits as a row of tiny adjacent links; space them apart so a thumb cannot hit two at once, and give each one a taller strip. */ .blog-meta, .post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } .blog-meta a, .post-meta a { display: inline-flex; align-items: center; min-height: 32px; } /* Contact details are the primary conversion on a phone , a tel: or mailto: link is the thing people actually tap, so give each its own row. */ .contact-item a, .contact-link, .contact-list li a, .faq-contact-number a, .footer-contact-info .contact-item a { display: inline-block; padding-block: 10px; } /* Breadcrumb links and the footer logo. */ .tj-page-link span a, .tj-breadcrumb-list a, .footer-logo a { display: inline-flex; align-items: center; min-height: 44px; } /* Post-navigation blocks on the service-details page. */ .tj-nav-post__grid > a { display: flex; align-items: center; min-height: 44px; } /* Card titles are links wrapping a whole heading , plenty wide, but a single 23px line is a thin strip to hit. */ .item_content .title a, .blog-content .title a, .service-content .title a, .team-content .title a { display: inline-block; padding-block: 6px; } /* Step numbers on the services tabs render at 10px. */ .service_tab_item .button_inner span, .services_tabs .button_inner span { font-size: 0.75rem !important; } } /* Stop the 300ms double-tap zoom delay on interactive elements. */ a, button, input, select, textarea, label, .mobile_menu_bar, .hamburger_close_btn { touch-action: manipulation; } /* A visible focus ring for keyboard and switch-control users. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ========================================================================== 12. Motion & performance ========================================================================== */ /* gsap-animation.js adds .tj-no-smooth-scroll to when ScrollSmoother is skipped (touch devices). Without the smoother the wrapper must behave like normal document flow, and a permanent will-change on a 17,000px element is pure memory cost on a phone. */ .tj-no-smooth-scroll #smooth-wrapper { position: static; height: auto; overflow: visible; } .tj-no-smooth-scroll #smooth-content { transform: none; will-change: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto !important; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } /* Reveal anything the animation library would otherwise leave hidden. */ .tj-fade-anim, .tj-zoom-anim, .tj-slide-wrap, [class*="tj-split-text"], .wow { opacity: 1 !important; transform: none !important; visibility: visible !important; clip-path: none !important; } } /* ========================================================================== 13. Brand wordmark (PLACEHOLDER , see note) The theme shipped with the Tekmino logo baked into five image files and there is no Delta Networks artwork in the package, so the logo is set as live text instead of a picture. That is also the better mobile answer: it is sharp at every pixel density, costs no request, scales with the layout and is readable by screen readers. Swap it for a real (or an inline SVG) the moment Delta supply their mark , the markup hook is .dn-wordmark. ========================================================================== */ .dn-wordmark { display: inline-flex; align-items: baseline; gap: 0.28em; font-family: var(--tj-ff-heading, "Manrope", sans-serif); font-size: clamp(1.05rem, 3.6vw, 1.35rem); line-height: 1; letter-spacing: -0.02em; white-space: nowrap; color: inherit; } .dn-wordmark .dn-w1 { font-weight: 800; } .dn-wordmark .dn-w2 { font-style: normal; font-weight: 500; color: var(--tj-color-theme-primary, #d3ed31); } /* Colour is set per surface rather than inherited, because the theme paints headings inside the header and drawer with its own tokens. Token note: in light mode --tj-color-theme-dark is #f6f7f7 (it names the dark *theme's* surface, not "dark ink"), so using it here painted the wordmark near-white on a white drawer. --tj-color-heading-primary is the one that flips correctly: #050505 in light mode, #f6f7f7 in dark. */ .dn-wordmark .dn-w1 { color: var(--tj-color-heading-primary, #f6f7f7); } .dn-wordmark .dn-w2 { color: var(--tj-color-theme-primary, #d3ed31); } /* Lime on white fails contrast, so on light surfaces the second word uses the same ink and leans on weight alone for the split. */ .tj-light-mode .dn-wordmark .dn-w2 { color: var(--tj-color-heading-primary, #050505); opacity: 0.55; } /* The oversized footer lockup. */ .dn-wordmark--xl { font-size: clamp(2.5rem, 13vw, 7rem); letter-spacing: -0.04em; gap: 0.22em; } /* Preloader glyph, replacing the Tekmino icon. */ .dn-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--tj-color-theme-primary, #d3ed31); color: var(--tj-color-theme-dark, #050505); font-family: var(--tj-ff-heading, "Manrope", sans-serif); font-size: 26px; font-weight: 800; line-height: 1; } @media (max-width: 991.98px) { .dn-wordmark { font-size: clamp(1rem, 4.4vw, 1.25rem); } .dn-wordmark--xl { font-size: clamp(2rem, 13vw, 3.5rem); white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; line-height: 1.05; } .tj_footer_bottom_logo { padding-block: 8px 20px; text-align: center; } }