/* ===================================================================== Testimonials slider — mobile fit On phones the prev/next buttons squeezed the slider so the fixed 350px cards were clipped (text cut off on the right). Hide the buttons (swipe to scroll), make the slider a clean flex scroller, and size each card to fill the width so text wraps cleanly. ===================================================================== */ @media (max-width: 767px) { .testimonials-wrapper .testimonials-nav-btn { display: none !important; } .testimonials-wrapper .testimonials-slider { display: flex !important; gap: 14px; padding: 8px 2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .testimonials-slider .testimonial-card { flex: 0 0 100% !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; scroll-snap-align: center; } } /* ===================================================================== Friendsware Solutions — Global UI Polish Layer --------------------------------------------------------------------- Brand-preserving refinement applied site-wide. Loaded LAST in so it gently refines the existing Designesia theme without changing any markup or layout structure. Goals: cleaner typography, smoother motion, better focus/forms, stronger responsiveness, and tasteful micro-interactions so the UI feels human and premium rather than robotic. Brand: orange #e2660a / #f4761f | navy #172054 / #09335c ===================================================================== */ :root { --fw-orange: #e2660a; --fw-orange-light: #f4761f; --fw-orange-soft: rgba(226, 102, 10, 0.15); --fw-navy: #172054; --fw-navy-deep: #09335c; /* Easing — natural, decelerating curves (the opposite of "robotic") */ --fw-ease: cubic-bezier(0.4, 0, 0.2, 1); --fw-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Layered, soft shadows */ --fw-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.10); --fw-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.16); --fw-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.24); --fw-shadow-brand: 0 10px 28px rgba(226, 102, 10, 0.30); } /* --------------------------------------------------------------------- 1. Global rendering quality --------------------------------------------------------------------- */ * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html { scroll-behavior: smooth; /* Keep anchor targets clear of the header instead of jumping under it */ scroll-padding-top: 110px; /* Kill stray horizontal scroll on mobile without breaking sticky els */ overflow-x: clip; } body { overflow-x: clip; text-rendering: optimizeLegibility; } /* Responsive media never overflows its container */ img, svg, video, iframe { max-width: 100%; } img { height: auto; } /* Brand-tinted text selection */ ::selection { background: var(--fw-orange); color: #fff; } ::-moz-selection { background: var(--fw-orange); color: #fff; } /* --------------------------------------------------------------------- 2. Accessible, modern focus states Visible ring for keyboard users; no harsh outline for mouse clicks. --------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--fw-orange); outline-offset: 3px; border-radius: 4px; } :focus:not(:focus-visible) { outline: none; } /* --------------------------------------------------------------------- 3. Typography refinement text-wrap keeps headings/paragraphs from breaking into ragged, awkward lines — a subtle but big "this was designed" cue. --------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { text-wrap: balance; } p, li, blockquote, figcaption { text-wrap: pretty; } /* Smooth, intentional colour transitions on links */ a { transition: color 0.25s var(--fw-ease), opacity 0.25s var(--fw-ease); } /* --------------------------------------------------------------------- 4. Buttons — smoother, with a gentle lift and brand glow Transforms are kept subtle so existing layouts don't shift. --------------------------------------------------------------------- */ .btn-main, a.btn-main, .btn-primary, a.btn-primary, .btn-line, a.btn-line, button.btn-main { transition: transform 0.28s var(--fw-ease-out), box-shadow 0.3s var(--fw-ease-out), background-color 0.25s var(--fw-ease), color 0.25s var(--fw-ease), border-color 0.25s var(--fw-ease) !important; will-change: transform; } .btn-main:hover, a.btn-main:hover, .btn-primary:hover, a.btn-primary:hover, button.btn-main:hover { transform: translateY(-2px); box-shadow: var(--fw-shadow-brand); } .btn-main:active, a.btn-main:active, .btn-primary:active, a.btn-primary:active, button.btn-main:active { transform: translateY(0); box-shadow: var(--fw-shadow-sm); } /* --------------------------------------------------------------------- 5. Cards & feature boxes — soft elevation on hover We animate transform + shadow so the theme's own hover transforms (where present) glide instead of snapping. --------------------------------------------------------------------- */ .feature-box, .icon-box, .de-team-list, .box-icon, .f-boxed, .de_modal .card, .card, .blog-tile, .service-card, .stat-card, .partnership-card, .process-step { transition: transform 0.35s var(--fw-ease-out), box-shadow 0.35s var(--fw-ease-out), border-color 0.3s var(--fw-ease), background-color 0.3s var(--fw-ease); } .feature-box:hover, .icon-box:hover, .de-team-list:hover, .box-icon:hover, .card:hover { box-shadow: var(--fw-shadow-md); } /* --------------------------------------------------------------------- 6. Forms — clear, branded focus feedback --------------------------------------------------------------------- */ input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select { transition: border-color 0.25s var(--fw-ease), box-shadow 0.25s var(--fw-ease), background-color 0.25s var(--fw-ease) !important; } input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, textarea:focus, select:focus { border-color: var(--fw-orange) !important; box-shadow: 0 0 0 3px var(--fw-orange-soft) !important; outline: none !important; } /* --------------------------------------------------------------------- 7. Navigation — refined dropdowns that fade in instead of snapping --------------------------------------------------------------------- */ #mainmenu li ul.submenu { border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); overflow: hidden; padding: 6px 0; border: 1px solid rgba(0, 0, 0, 0.05); } #mainmenu li:hover > ul.submenu { animation: fwMenuIn 0.22s var(--fw-ease-out); } #mainmenu li ul.submenu li a { transition: background-color 0.2s var(--fw-ease), color 0.2s var(--fw-ease), padding-left 0.2s var(--fw-ease) !important; } #mainmenu li ul.submenu li a:hover { padding-left: 20px !important; } @keyframes fwMenuIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* --------------------------------------------------------------------- 8. Floating / utility controls --------------------------------------------------------------------- */ .whatsapp-action, .footer-scroll-top, .scroll-down-modern { transition: transform 0.3s var(--fw-ease-out), box-shadow 0.3s var(--fw-ease-out); } .whatsapp-action:hover { transform: translateY(-3px) scale(1.04); } .footer-scroll-top:hover { transform: translateY(-3px); box-shadow: var(--fw-shadow-brand); } /* --------------------------------------------------------------------- 9. Refined, on-brand scrollbar (desktop) Inner scroll regions keep their own styling via higher specificity. --------------------------------------------------------------------- */ @media (min-width: 768px) { html { scrollbar-width: thin; scrollbar-color: rgba(226, 102, 10, 0.55) transparent; } body::-webkit-scrollbar { width: 12px; height: 12px; } body::-webkit-scrollbar-track { background: transparent; } body::-webkit-scrollbar-thumb { background: rgba(226, 102, 10, 0.55); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } body::-webkit-scrollbar-thumb:hover { background: rgba(226, 102, 10, 0.85); background-clip: padding-box; } } /* --------------------------------------------------------------------- 10. Responsive spacing & overflow safeguards Element-level rules only — utility classes (.no-top/.no-bottom) and component classes keep their higher specificity and win. --------------------------------------------------------------------- */ @media (max-width: 767px) { section { padding-top: 60px; padding-bottom: 60px; } /* Long words / URLs wrap instead of forcing a horizontal scroll */ p, li, a, span, h1, h2, h3, h4, h5 { overflow-wrap: break-word; word-wrap: break-word; } } @media (max-width: 480px) { section { padding-top: 48px; padding-bottom: 48px; } } /* --------------------------------------------------------------------- 11. Respect reduced-motion preferences --------------------------------------------------------------------- */ @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; } } /* ===================================================================== 12. Responsive hardening (tablet + mobile) Defensive rules so the layout can't break or overflow on smaller screens. The theme already swaps to a hamburger menu at <=993px; these target the spots most likely to overflow or crowd. ===================================================================== */ /* Wide content never forces horizontal scroll */ table, pre, blockquote { max-width: 100%; } /* Bootstrap columns must never exceed the viewport */ [class*="col-"], .row { max-width: 100%; } .row { /* Guards against negative-margin gutters poking past the viewport */ --bs-gutter-x: 1.5rem; } /* --- Tablet (<= 991px): the top contact bar carries a lot of items --- */ @media (max-width: 991px) { .top-contact-inner { justify-content: center; gap: 8px 16px; } .top-contact-group { justify-content: center; flex-wrap: wrap; } .top-contact-bar { font-size: 12.5px; } } /* --- Mobile (<= 767px) --- */ @media (max-width: 767px) { /* Embeds (maps, video) scale with the screen */ iframe, embed, object { max-width: 100%; } /* Wide tables scroll instead of breaking the page width */ table { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Comfortable tap targets for primary controls */ #menu-btn, .footer-scroll-top, .footer-language-selector { min-width: 44px; min-height: 44px; } /* Keep the floating WhatsApp button from crowding the edge */ .whatsapp-action { bottom: 14px; right: 14px; } /* Buttons and CTAs sit comfortably without overflowing their row */ .btn-main, a.btn-main, .btn-primary, a.btn-primary { max-width: 100%; white-space: normal; } } /* --- Small phones (<= 480px) --- */ @media (max-width: 480px) { /* Stacked grids of icon/feature tiles go single-column cleanly */ .hero-services-list, .hero-stats { gap: 0.75rem; } /* Prevent oversized fixed-width media from overflowing tiny screens */ img, .section-image { max-width: 100% !important; height: auto; } } /* ===================================================================== 13. Wholesale & Distribution preview (homepage) — mobile The heading used white-space:nowrap (clipped off-screen), and the CTA buttons were capped at 300px so they didn't line up with the full-width content. Let the heading wrap and make the buttons full-width and aligned. ===================================================================== */ @media (max-width: 767px) { .preview-title-single-line { white-space: normal !important; } .wholesale-preview-content .preview-cta { flex-direction: column; align-items: stretch; } .preview-cta .btn-modern-primary, .preview-cta .btn-modern-secondary { width: 100% !important; max-width: 100% !important; justify-content: center; } } /* ===================================================================== 14. Partnership "Journey" process (homepage) — responsive + contrast The process block had a fixed width:60rem (960px) that overflowed and clipped on phones/tablets, plus dark text colours intended for a light background that never renders (the section shows dark). Make it fit on any screen and readable. ===================================================================== */ .partnership-process { width: 100% !important; max-width: 60rem; } .partnerships-section .process-title { color: #ffffff; } .partnerships-section .process-subtitle { color: rgba(255, 255, 255, 0.75); } .partnerships-section .process-step h5 { color: #ffffff; } .partnerships-section .process-step p { color: rgba(255, 255, 255, 0.72); } @media (max-width: 991px) { /* Steps wrap to multiple rows below 992px (2-up, then 1-up). The -6rem bottom margin only makes sense for the single desktop row, so reset it here to stop the rows overlapping. */ .partnership-process .process-step { margin-bottom: 0; } } /* ===================================================================== 15. Quote section — stop the first line bleeding into the hero The theme pulls .v-center up 90px (translateY) for vertical centering. On the quote section that drags "Where Innovation Meets Excellence" up above its own section, so it shows as faint white marks just under the hero's "Scroll to explore". Keep the quote content inside its section. ===================================================================== */ @media (max-width: 768px) { .ultra-modern-quote .v-center { transform: none !important; } /* Tighten the gap between "Where Innovation Meets Excellence" and the "FRIENDSWARE SOLUTIONS" line so they read as one connected statement. */ .ultra-modern-quote .quote-main-text { margin-bottom: 0.4rem !important; line-height: 1.2; } .ultra-modern-quote .company-name { margin-top: 0 !important; } }