/* ========================================================================== maglula-tablet-ux.css — UI-02 tablet layer (installed on STAGING 2026-10-04; production: not deployed) Scope: 600px – 1023.98px only. Phones below 600px and desktop from 1024px are untouched by this file. WHY: below 1024px the theme sizes the phone design relative to the screen width (html{font-size:4.2vw} plus vw-based .f-m-NN font classes and vw-based vertical spacing). That is right for phones but on tablets it produced 32–43px body text and a 145–193px header. Inside this band every such vw-based size is frozen to what it is on a ~440px phone (the approved phone look), so tablets read like a large phone instead of a magnified one. Horizontal layout (widths, columns, image sizes) stays fluid. Values are generated from the theme CSS (main-style.css, style2.css) plus maglula-mobile-ux.css, maglula-site-fixes.css and the Customizer CSS: typography reference width 440px (root 18.48px) vertical-spacing reference width 520px If the theme CSS ever changes, regenerate this list. Desktop-only navigation rules were pruned (verified never rendered below 1024px); everything else is kept even if a page in the sample did not use it (utility classes / conditional states). ========================================================================== */ @media (min-width: 600px) and (max-width: 1023.98px) { /* ---- ROOT + GLOBAL TYPE SCALE (rem root and the theme's .f-m-NN utility classes, frozen at a 440px phone) ---- */ html { font-size: 18.48px; } .f-m-14 { font-size: 8.18px !important; } .f-m-16 { font-size: 9.37px !important; } .f-m-17 { font-size: 9.94px !important; } .f-m-18 { font-size: 10.56px !important; } .f-m-19 { font-size: 11.13px !important; } .f-m-20 { font-size: 11.70px !important; } .f-m-21 { font-size: 12.32px !important; } .f-m-22 { font-size: 12.89px !important; } .f-m-24 { font-size: 14.08px !important; } .f-m-25 { font-size: 14.65px !important; } .f-m-26 { font-size: 15.22px !important; } .f-m-27 { font-size: 15.84px !important; } .f-m-28 { font-size: 16.41px !important; } .f-m-30 { font-size: 17.60px !important; } .f-m-32 { font-size: 18.74px !important; } .f-m-34 { font-size: 19.93px !important; } .f-m-35 { font-size: 20.50px !important; } .f-m-36 { font-size: 21.12px !important; } .f-m-38 { font-size: 22.00px !important; } .f-m-40 { font-size: 23.45px !important; } .f-m-42 { font-size: 24.64px !important; } .f-m-45 { font-size: 26.40px !important; } .f-m-47 { font-size: 27.54px !important; } .f-m-50 { font-size: 29.30px !important; } .f-m-52 { font-size: 30.49px !important; } .f-m-53 { font-size: 30.80px !important; } .f-m-55 { font-size: 32.25px !important; } .f-m-60 { font-size: 35.20px !important; } .f-m-65 { font-size: 38.10px !important; } .f-m-70 { font-size: 41.05px !important; } .f-m-75 { font-size: 44.00px !important; } .f-m-80 { font-size: 46.90px !important; } .f-m-85 { font-size: 49.85px !important; } .f-m-90 { font-size: 52.80px !important; } .f-m-95 { font-size: 55.70px !important; } .f-m-100 { font-size: 58.52px !important; } .f-m-105 { font-size: 61.60px !important; } .btn { font-size: 14.08px; } .input-primary { padding-bottom: 20.80px; } .checkbox input { margin-top: 5.20px; } /* ---- HEADER (mobile header: logo, chat icon, hamburger positions) ---- */ .static-menu .find-and-cart { top: 24.90px; left: 23.45px; } .static-menu .header-logo { top: 21.12px; } .static-menu .cart .img { width: 24.64px; height: 22.00px; } .static-menu .hamburger { top: 22.00px; right: 23.45px; } /* ---- HOMEPAGE (Find Your Fit, testimonial slider, Latest Products spacing, dealer logos, counters) ---- */ .find-loader { padding-top: 62.40px !important; padding-bottom: 52.00px !important; } .find-loader .steps { margin-top: 13.83px; margin-bottom: 27.72px; } .testimonial-slider .logo { margin-bottom: 10.40px !important; } .testimonial-slider .swiper { padding-bottom: 52.00px !important; } .testimonial-slider a { margin-top: 7.28px; } .dealers { padding-bottom: 69.32px; } .dealers ul { margin-top: 31.20px; margin-bottom: 48.52px; } .dealers li { margin-bottom: 31.20px !important; } .home-banner h1 { margin-bottom: 20.80px; } .home-banner a { margin-top: 41.60px; } .products-slider { padding-top: 52.00px; padding-bottom: 156.00px; } .products-slider h2 { margin-top: 16.25px; margin-bottom: 31.20px; } .products-slider .swiper-slide .hidden { margin-top: 3.38px; } .products-slider .swiper-slide { padding-bottom: 27.72px; } .products-slider .swiper { padding-bottom: 41.60px; } .products-slider h3 { margin-bottom: 10.40px; } .products-slider .swiper-slide a { margin-top: 27.72px; } .running-number-wrapp { margin-bottom: 104.00px !important; } body .testimonial-slider .swiper-pagination, body .swiper-pagination { row-gap: 13.00px; padding-top: 13.00px; padding-bottom: 7.80px; } /* ---- FOOTER + NEWSLETTER ---- */ .newsletter { margin-bottom: -114.40px; } .newsletter .footer-newsletter-form .submit-newsletter { margin-top: 13.52px; } .newsletter .container { padding-top: 48.52px; } .newsletter .icon { margin-bottom: 17.32px; } .newsletter h3 { margin-bottom: 69.32px; } .newsletter a { margin-top: 34.63px; } .newsletter h2 { margin-bottom: 31.20px; } .footer { padding-top: 169.83px; padding-bottom: 69.32px; } .footer-top { margin-bottom: 17.32px; } .footer-about h2 { margin-bottom: 10.40px; } .footer-about a { margin-top: 20.80px; } .footer-logo { margin-top: 62.40px; } .footer-contact h2 { margin-bottom: 10.40px; } .footer-contact form .footer-form { margin-top: 20.28px; margin-bottom: 20.28px; } .footer-contact form .input-part-col { margin-bottom: 18.93px; padding-bottom: 5.20px; } .footer-contact form .submit-footer-form { margin-top: 13.52px; margin-bottom: 13.52px; } .footer-contact a { margin-bottom: 17.32px; } .footer-bottom .top { margin-bottom: 31.20px; } .footer-categories ul li { margin-bottom: 5.20px; } .footer-calibers ul li { margin-bottom: 5.20px; } .footer-bottom h2 { margin-bottom: 5.72px; } .footer-about { margin-bottom: 104.00px; } .footer-contact form { margin-top: 27.72px; margin-bottom: 27.72px; } .footer-contact form input { margin-bottom: 48.52px; } .footer-contact form input:last-child, .footer-contact form input:nth-child(3) { margin-bottom: 48.52px; } /* ---- FOR DEALERS + WHERE TO BUY ---- */ .download { padding-top: 231.40px; padding-bottom: 97.03px; } .download .heading { margin-bottom: 76.23px; } .download .picture-video h3 { margin-bottom: 52.00px; } .download .picture-video ul { margin-bottom: -41.60px; } .download .picture-video ul li { margin-bottom: 41.60px; } .download .picture-video .img img { margin-bottom: 13.83px; } .download .picture-video p { margin-bottom: 13.83px; } .download .file span { font-size: 9.90px; } .download .row { margin-bottom: 149.03px; } .download .catalog { margin-bottom: 79.72px; } .download .catalog a { margin-bottom: 6.92px; } .download .logo-kit h3 { margin-bottom: 20.80px; } .download .logo-kit ul { margin-bottom: 34.58px; } .download .logo-kit ul li { margin-bottom: 26.00px; margin-top: 26.00px; } .distributors-banner h1 { margin-bottom: 52.00px; } .distributors-banner input { margin-bottom: 27.72px; margin-top: 10.40px; } .distributors .search-dealers-title { margin-bottom: 7.80px; } .distributors .search-dealers-list { margin-top: 7.80px !important; margin-bottom: 7.80px !important; } .distributors { padding-top: 45.03px; padding-bottom: 124.80px; } .distributors h2 { margin-bottom: 31.20px; } .distributors p { margin-bottom: 13.00px; } .distributors ul { margin-bottom: -58.92px; } .distributors ul li { margin-bottom: 58.92px; } .distributors ul:last-child { margin-top: 58.92px; } .distributors ul img { margin-bottom: 3.90px; } .page-template-tpl-dealers-new .distributors-banner form ._input input { padding-top: 4.16px; padding-bottom: 4.16px; line-height: 33.00px; } .page-template-tpl-dealers-new .distributors-banner form ._submit button { padding-top: 10.40px; padding-bottom: 10.40px; } .dealers-banner p { margin-top: 18.20px; margin-bottom: 18.20px; } .dealers-banner .btn { margin-top: 18.98px; } .dealers-form { padding-bottom: 104.00px; } .dealers-form form { margin-top: 41.60px; } .dealers-form form > * { margin-bottom: 48.52px; } .dealers-form .checkbox { margin-bottom: 26.00px; } .dealers-search { margin-bottom: 104.00px; } .dealers-search h2 { margin-bottom: 13.83px; } .dealers-form form > .input { margin-bottom: 13.52px; } .distributors ul li img { margin-bottom: 10.40px !important; } /* ---- TESTIMONIALS PAGE (banner, gallery, review list/form, stars) ---- */ .testimonial-banner ul { margin-top: 34.63px; margin-bottom: -52.00px; } .testimonial-banner ul li { margin-bottom: 52.00px; } .testimonial-banner ul p { margin-bottom: 17.32px; } .testimonial-gallery .swiper { padding-bottom: 52.00px; } .reviews { padding-top: 41.60px; padding-bottom: 104.00px; } .reviews-list .quottes { margin-bottom: 20.80px; } .reviews-list ul li:not(:last-child) { margin-bottom: 20.80px; } .reviews-add h2 { margin-bottom: 34.63px; } .reviews-add form .inputs-box .input-fild { margin-bottom: 41.60px; } .reviews-add .uploaded-files { padding-top: 10.40px; padding-bottom: 45.03px; } .reviews-add .file-upload { margin-top: 27.72px; } .reviews-list ul li { padding-top: 48.52px; padding-bottom: 27.72px; } .reviews-add { margin-bottom: 69.32px; } .reviews-add .confirm-block a { margin-top: 17.32px; } .stars { margin-bottom: 31.20px; } .reviews-list .stars { margin-bottom: 5.20px; } .stars:not(:checked) > label { font-size: 26.40px; line-height: 26.40px; } .stars span { font-size: 26.40px; line-height: 26.40px; } .testimonial-gallery .swiper-slide img, .testimonial-gallery .swiper-slide img:not(:last-child) { margin-bottom: 13.83px; } /* ---- ABOUT PAGE ---- */ .about { padding-top: 69.16px; padding-bottom: 131.72px; } .about .container > p { margin-bottom: 55.43px; } .about .img { margin-bottom: 39.00px; } .about-banner ul { margin-top: 24.23px; margin-bottom: 41.60px; } .about-banner ul li { margin-bottom: 20.80px; } .about-banner .icons { margin-top: 55.12px; } .about-banner .text { padding-top: 130.00px; padding-bottom: 78.00px; } .about-banner .icons p:first-child { margin-bottom: 41.60px; } .page-template-about-us .about-banner .icons { margin-top: 52.00px; } .about-banner .icons p { margin-bottom: 41.60px; } /* ---- CATEGORY (SHOP) HERO: keep its height as before UI-02. The theme caps it with max-height:26.0417rem below 1024px; with the root frozen that cap shrank the banner to ~481px and pushed the title and the "What's your Caliber?" search out of the dark banner (white on white). 109.375vw = 26.0417rem x 4.2vw = the exact pre-UI-02 cap. Added in installed QA. ---- */ .home-banner.shop-page { max-height: 109.375vw; } /* ---- HOMEPAGE HERO: deliberately kept fluid (freezing it broke the image/label composition). These two lines undo the freeze for the hero labels only. ---- */ .loaders-landing .links a.f-m-53 { font-size: 7vw !important; } .header-banner .loaders-landing .links a .small-text { font-size: 3.72vw; } } /* For Dealers "Pictures & Movie clips": 3 per row on wider tablets (2 per row stays below 768: items would be ~168px at 600px). */ @media (min-width: 768.02px) and (max-width: 1023.98px) { .download .picture-video ul li { flex-basis: 33.333% !important; max-width: 33.333% !important; } } /* Category grid: 2 columns up to 899px, theme/WooCommerce 3 columns from 900px. (<= 768 WooCommerce's own small-screen CSS already gives 2 columns; this replicates those two rules for 768.02–899.98 without editing the plugin.) */ @media (min-width: 768.02px) and (max-width: 899.98px) { .woocommerce ul.products[class*="columns-"] li.product, .woocommerce-page ul.products[class*="columns-"] li.product { width: 48%; float: left; clear: both; margin: 0 0 2.992em; } .woocommerce ul.products[class*="columns-"] li.product:nth-child(2n), .woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) { float: right; clear: none !important; } }