/* ============================================================================ nahoftapp.com — MAIN STYLESHEET (the only CSS file on the site) ============================================================================ Replaces: bootstrap.min.css, animate.css, owl.carousel.css, owl.theme.css, nivo-lightbox css, font-awesome css and the old style.css. HOW THIS FILE IS ORGANISED (search for the numbers to jump around) 01. Design tokens ........ colours, fonts, sizes — change the look here 02. Base / reset ......... sensible defaults for every element 03. Layout helpers ....... .container, .pin-ltr, .visually-hidden … 04. Accessibility ........ skip link, focus rings 05. Icons 06. Header / top bar 07. Full-screen menu 08. Back-to-top button 09. Hero 10. Section titles (line + circle ornament) 11. Video 12. Feature list 13. Highlights 14. Privacy policy 15. Screenshot carousel 16. Lightbox 17. Footer 18. Scroll-in animations 19. Responsive adjustments (component and carousel breakpoints) 20. Reduced motion MAINTENANCE NOTES This is a replacement stylesheet, not an override to append. Class names and JS state hooks are preserved. Physical left/right values are intentional where the original layout stays left-to-right. Colour values are preserved; comments do not certify WCAG compliance. RIGHT-TO-LEFT (Persian) NOTE The Persian page uses , which is correct for Persian text. The old site, however, kept its layout left-to-right (logo on the left, phone image on the left, etc.). Any block marked with class "pin-ltr" keeps that original left-to-right arrangement, while the text inside it still reads right-to-left. Remove "pin-ltr" from a block in the HTML if you ever want that block to mirror for Persian. ========================================================================= */ /* ============================================================================ 01. DESIGN TOKENS — edit these to change colours/fonts across the site ========================================================================= */ :root { /* Brand colours (taken from the original design) */ --teal: rgb(3, 206, 164); /* gradient start */ --navy: rgb(0, 32, 102); /* gradient end, footer */ --blue: rgb(0, 109, 241); /* sticky top bar */ --sky: #4093ff; /* hover states, focus rings and carousel arrows */ --mint: #e3fcb1; /* menu link hover */ --text: #333; --muted: #888; --muted-2: #999; --link: #2a6aa3; /* original #337ab7 was below WCAG 4.5:1 on grey */ --bg-light: #eee; /* Highlights background */ --bg-gallery: #e7e7e7; /* Screenshots background */ --footer-link: #9cc6ff; /* light blue: readable on navy */ --teal-ui: #02a684; /* back-to-top button background */ --brand-gradient: linear-gradient(50deg, var(--teal), var(--navy)); /* Typography */ --font-latin: "Raleway", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-persian: "Vazirmatn", system-ui, Tahoma, Arial, sans-serif; --font: var(--font-latin); --weight-thin: 100; /* large headings and logo */ --weight-light: 300; /* Layout */ --gutter: 15px; /* half of the gap between columns */ --header-pad: 45px; /* space above the top bar */ --bar-h: 130px; /* height of the top bar */ --bar-h-fixed: 90px; /* height once it sticks to the top */ } /* Persian page: switch to Vazirmatn. Persian "thin" weights are hard to read, so headings use Light (300) instead of Thin (100). */ :root:lang(fa) { --font: var(--font-persian); --weight-thin: 300; } /* ============================================================================ 02. BASE / RESET ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* Clip horizontal overflow, including off-screen reveal animations. This does not correct oversized content; keep component widths bounded. */ overflow-x: clip; } /* Smooth scrolling for menu links — only if the visitor hasn't asked their device to reduce motion. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.42857; color: var(--text); background: #fff; overflow-x: clip; } img, svg, video { vertical-align: middle; } img, video { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: inherit; font-weight: 500; line-height: 1.1; margin: 20px 0 10px; } h3 { font-size: 24px; } h4 { font-size: 18px; margin-block: 10px; } /* Large display headings (logo-style, thin and uppercase) */ h1, h2 { font-size: 40px; font-weight: var(--weight-thin); text-transform: uppercase; color: #fff; } h1 { letter-spacing: 10px; } p { margin: 0 0 10px; font-size: 16px; } ul { list-style: none; margin: 0 0 10px; } a { color: var(--link); text-decoration: none; } a:hover, a:focus-visible { color: inherit; /* original design: links take the text colour on hover */ transition: color 0.8s; } button { font: inherit; color: inherit; } /* Underline body-text and copyright links. The more specific footer rule in section 17 intentionally removes the copyright underline in the footer. */ main p a, .copyright a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; } strong, b { font-weight: 700; } /* Letter-spacing breaks the joined letters of Persian script. */ :lang(fa) h1, :lang(fa) .logo, :lang(fa) .footer-logo { letter-spacing: 0; } /* ============================================================================ 03. LAYOUT HELPERS ========================================================================= */ /* Centred page column — same widths as the old Bootstrap 3 grid. */ .container { width: 100%; margin-inline: auto; padding-inline: var(--gutter); } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } /* Keep a block's layout left-to-right on the Persian page (see top note). */ [dir="rtl"] .pin-ltr { direction: ltr; } [dir="rtl"] .pin-ltr > * { direction: rtl; } .text-center { text-align: center; } /* Standard vertical spacing for page sections */ .wrapper { padding-block: 75px; } /* Hidden visually but still read by screen readers */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Wrapper used around animated headings and the phone image */ .animation-box { display: inline-block; position: relative; } /* Sections reached from the menu stop below the sticky top bar. */ main [id] { scroll-margin-top: var(--bar-h-fixed); } #header { scroll-margin-top: 0; } /*
gets focus from the skip link; don't draw a box around all of it. */ main:focus { outline: none; } /* ============================================================================ 04. ACCESSIBILITY — skip link and visible keyboard focus ========================================================================= */ .skip-link { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 10000; padding: 10px 16px; background: #fff; color: var(--navy); font-weight: 700; border-radius: 4px; transform: translateY(-150%); transition: transform 0.2s; } .skip-link:focus { transform: none; } /* A clear ring for keyboard users only (mouse clicks don't show it). */ :focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; } /* On the dark gradient areas, a white ring is easier to see. */ .site-header :focus-visible, .hero :focus-visible, .overlay :focus-visible, .site-footer :focus-visible, .lightbox :focus-visible { outline-color: #fff; } /* ============================================================================ 05. ICONS — inline SVGs from img/icons.svg (printed by icon() in PHP) ========================================================================= */ .icon { display: inline-block; height: 1em; fill: currentColor; flex-shrink: 0; overflow: visible; } /* ============================================================================ 06. HEADER / TOP BAR ---------------------------------------------------------------------------- The bar floats over the hero (position: absolute). When the visitor scrolls past 700px, js/main.js adds .is-fixed and it sticks to the top in blue. ========================================================================= */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 99; padding-top: var(--header-pad); } .site-header.is-fixed { position: fixed; padding-top: 0; background: var(--blue); transition: background-color 1s; } .top-bar { display: flex; justify-content: space-between; align-items: flex-start; height: var(--bar-h); } .site-header.is-fixed .top-bar { height: var(--bar-h-fixed); } /* Logo: "NAHOFT" / "نهفت" */ .logo { display: inline-block; /* 80px on most screens; on narrow phones it shrinks with the screen width so the logo and the menu button always fit on one line. */ font-size: min(80px, (100vw - 140px) * 0.18); font-weight: var(--weight-thin); letter-spacing: min(10px, 0.18em); color: #fff; white-space: nowrap; } .logo:hover, .logo:focus-visible { color: #fff; } .site-header.is-fixed .logo { font-size: min(60px, (100vw - 140px) * 0.18); } .strong { font-weight: 400; } /* Right-hand group: language link + menu button */ .nav-button { display: flex; align-items: flex-start; gap: 10px; margin-block: 35px; } .site-header.is-fixed .nav-button { margin-block: 15px; } .lang-switch { min-width: 24px; /* minimum width; padding increases the clickable area */ padding-inline: 4px; text-align: center; margin-top: 15px; color: #fff; font-weight: 700; font-size: 20px; line-height: 1.42857; } .lang-switch:hover { color: #fff; opacity: 0.8; } .menu-toggle { display: inline-flex; align-items: center; justify-content: center; height: 60px; padding: 0 12px; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: 42px; cursor: pointer; transition: color 0.8s, background-color 0.8s; } .menu-toggle:hover { color: var(--sky); background: #fff; } /* ============================================================================ 07. FULL-SCREEN MENU (a native ) ========================================================================= */ .overlay { /* Reset the browser's default dialog box */ position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; z-index: 9999; background: var(--brand-gradient); color: #fff; /* Fade in/out (the .is-open class is added/removed by js/main.js) */ opacity: 0; transition: opacity 0.5s; } .overlay::backdrop { background: transparent; } .overlay.is-open { opacity: 1; } /* Close "X" button, top right */ .overlay-close { position: absolute; top: 85px; right: 110px; z-index: 100; width: 50px; height: 50px; display: grid; place-items: center; border: 0; background: transparent; color: #fff; font-size: 40px; cursor: pointer; } .overlay-close:hover { color: var(--mint); } .overlay nav { position: relative; top: 50%; height: 60%; text-align: center; font-size: 54px; transform: translateY(-50%); perspective: 1200px; } .overlay ul { display: inline-block; height: 100%; margin: 0 auto; padding: 0; position: relative; /* The original 3D "tilt in" effect */ opacity: 0.4; transform: translateY(-25%) rotateX(35deg); transition: transform 0.5s, opacity 0.5s; } .overlay.is-open ul { opacity: 1; transform: rotateX(0deg); } .overlay.is-closing ul { transform: translateY(25%) rotateX(-35deg); } .overlay li { display: block; height: calc(100% / 5); min-height: 54px; } .overlay li a { display: block; font-weight: var(--weight-light); color: #fff; transition: color 0.2s; } .overlay li a:hover, .overlay li a:focus-visible { color: var(--mint); } /* ============================================================================ 08. BACK-TO-TOP BUTTON (shown by js/main.js after scrolling) ========================================================================= */ .back-to-top { position: fixed; right: 35px; bottom: 45px; z-index: 99; display: none; padding: 5px 10px; font-size: 22px; line-height: 1.42857; background: var(--teal-ui); color: #fff; } .back-to-top.is-visible { display: block; } .back-to-top:hover, .back-to-top:focus-visible { background: var(--sky); color: #fff; } /* ============================================================================ 09. HERO (first screen: phone image, intro text, download buttons) ========================================================================= */ .hero { min-height: 100vh; padding-top: calc(var(--header-pad) + var(--bar-h)); padding-bottom: 45px; background: var(--brand-gradient); color: #fff; } /* Shared single-column foundation; section 19 expands each grid separately. */ .hero-grid, .features-grid { display: grid; grid-template-columns: 1fr; column-gap: calc(var(--gutter) * 2); } .hero-media img { display: block; width: 100%; margin-top: 110px; } .banner-text { margin-top: 100px; } /* The main page heading, styled like the other large headings */ .hero-title { color: #fff; letter-spacing: 0; } .banner-text p { padding-block: 20px; margin: 0; color: #fff; line-height: 30px; } /* Download buttons (Google Play, App Store, APK, guide) */ .btn-download { display: inline-flex; align-items: center; width: 180px; margin-top: 10px; margin-right: 10px; padding: 10px; border: 1px solid #fff; border-radius: 50px; background: #fff; color: #333; font-size: 14px; line-height: 1.42857; text-align: left; vertical-align: middle; white-space: nowrap; cursor: pointer; transition: color 0.8s, background-color 0.8s; } .btn-download:hover, .btn-download:focus-visible { color: #fff; background: transparent; } .btn-download .icon { font-size: 36px; margin-left: 10px; margin-right: 9px; } .btn-download strong { font-weight: 800; } /* ============================================================================ 10. SECTION TITLES — heading + thin vertical line + small circle ========================================================================= */ .section-title { color: #333; } /* Existing HTML uses this spelling; do not rename without updating markup. */ .virticle-line { width: 1px; height: 40px; margin: 15px auto 5px; background: var(--muted); } .circle { width: 15px; height: 15px; margin: 0 auto 50px; border: 1px solid var(--muted); border-radius: 50%; } /* ============================================================================ 11. VIDEO ========================================================================= */ #video { text-align: center; color: #333; } #video video { display: block; width: 100%; margin-bottom: 30px; background: #000; } .section-intro { margin-top: 40px; } /* ============================================================================ 12. FEATURE LIST — two lists either side of a phone ========================================================================= */ .item-list-big { margin: 0 0 10px; padding: 0 0 0 40px; } .item-list-big li { position: relative; } /* Left column: text right-aligned, icon on the right */ .item-list-right li { padding: 0 70px 20px 0; text-align: right; } /* Right column: text left-aligned, icon on the left */ .item-list-left li { padding: 0 0 20px 70px; text-align: left; } .item-list-big li:last-child { padding-bottom: 0; } .item-list-big h3 { margin: 0 0 25px; font-weight: var(--weight-light); } /* Round outlined icon */ .feature-icon { position: absolute; top: 0; box-sizing: content-box; width: 24px; /* fixed box so all circles are identical */ height: 24px; padding: 12px; font-size: 24px; border: 1px solid var(--muted-2); border-radius: 50%; color: var(--muted-2); } .item-list-right .feature-icon { right: 0; } .item-list-left .feature-icon { left: 0; } /* Centre column: phone with two animated "sparks" */ .features-phone { text-align: center; } .features-phone .screen { width: 400px; max-width: 100%; height: auto; } .highlight-left, .highlight-right { position: absolute; margin-top: -100px; } .highlight-left { left: -5px; animation: highlight-left 2s ease-in infinite; } .highlight-right { right: -5px; animation: highlight-right 2s ease-in infinite; } @keyframes highlight-left { 0% { opacity: 0; top: 100%; transform: scale(0); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; top: 0; transform: scale(0); } } @keyframes highlight-right { 0% { opacity: 0; top: 0; transform: scale(0); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; top: 100%; transform: scale(0); } } /* ============================================================================ 13. HIGHLIGHTS (Free / Safe / Open Source) ========================================================================= */ #speciality { background: var(--bg-light); text-align: center; color: #333; } .speciality-grid { display: grid; grid-template-columns: 1fr; margin-inline: calc(var(--gutter) * -1); /* columns span the full container, as before */ } .speciality-item { padding-inline: var(--gutter); } #speciality h3 { text-transform: uppercase; } /* Add vertical space to the source links without changing their line layout. */ .source-link { display: inline-block; padding-block: 3px; } .special-icon { display: inline-grid; place-items: center; width: 50px; height: 50px; margin: 15px 0; border: 1px solid var(--muted); border-radius: 50%; color: var(--muted); font-size: 14px; } /* ============================================================================ 14. PRIVACY POLICY ---------------------------------------------------------------------------- Body text, h3/h4 headings and links inherit section 02 styles. Section spacing comes from .wrapper, and the anchor offset from main [id]. Keep this override limited to the title to preserve the existing design. ========================================================================= */ .privacy-title { margin-bottom: 20px; color: #000; text-align: center; } /* ============================================================================ 15. SCREENSHOT CAROUSEL ---------------------------------------------------------------------------- A native horizontal scroll strip with "snap" points (works with touch, mouse wheel, trackpad and keyboard). The arrow buttons scroll it by one screenshot (js/main.js). The number of screenshots visible at once is set with --per-view in section 19, matching the old carousel. ========================================================================= */ #gallery { position: relative; background: var(--bg-gallery); } /* The title, line and circle are only shown on smaller screens (as before), but the title stays available to screen readers on large screens. */ #gallery .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #gallery .virticle-line, #gallery .circle { display: none; } .carousel { --per-view: 5; position: relative; } .carousel-track { display: flex; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; /* hide the scrollbar (Firefox) */ } .carousel-track::-webkit-scrollbar { display: none; } /* (Chrome/Safari) */ .carousel-item { flex: 0 0 calc(100% / var(--per-view)); scroll-snap-align: start; } .shot { display: block; margin: 10px; border-radius: 3px; text-align: center; } .img_res { width: 100%; max-width: 200px; } /* Round arrow buttons over the left and right edges */ .carousel-nav { position: absolute; top: 40%; inset-inline: calc(var(--gutter) * -1); /* arrows sit just outside the strip, as before */ display: flex; justify-content: space-between; pointer-events: none; /* let clicks pass between the arrows */ direction: ltr; /* prev is always on the left */ } .gallery-nav { pointer-events: auto; display: grid; place-items: center; width: 42px; height: 42px; margin-inline: 10px; padding: 0; border: 2px solid; border-radius: 50%; background: #fff; color: var(--sky); font-size: 28px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color 0.3s, background-color 0.3s, border-color 0.3s; } .gallery-nav:hover, .gallery-nav:focus-visible, .gallery-nav:active { color: #fff; background: var(--sky); border-color: var(--sky); } /* ============================================================================ 16. LIGHTBOX (full-size screenshot viewer, a native ) ========================================================================= */ .lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; } .lightbox::backdrop { background: rgba(0, 0, 0, 0.6); } .lightbox[open] { display: grid; place-items: center; animation: lightbox-in 0.3s ease-out; } @keyframes lightbox-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: none; } } .lightbox-figure { margin: 0; } .lightbox-img { display: block; max-width: 90vw; max-height: 90vh; width: auto; height: auto; box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); } .lightbox-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 26px; cursor: pointer; transition: background-color 0.2s; } .lightbox-btn:hover { background: rgba(0, 0, 0, 0.7); } .lightbox-prev { left: 2vw; top: 50%; translate: 0 -50%; } .lightbox-next { right: 2vw; top: 50%; translate: 0 -50%; } .lightbox-close { right: 2vw; top: 2vh; } /* ============================================================================ 17. FOOTER — one sleek line: brand · e-mail · copyright ---------------------------------------------------------------------------- On wide screens the three items sit on a single row (brand on the left, e-mail in the middle, copyright on the right). On narrow screens they wrap and centre, one under the other. ========================================================================= */ .site-footer { padding-block: 28px; background: var(--navy); color: #fff; font-size: 14px; } .site-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px; } /* Brand name, kept in the logo's thin style but at a smaller size */ .footer-logo { margin: 0; font-size: 26px; font-weight: var(--weight-thin); line-height: 1; letter-spacing: 8px; text-transform: uppercase; color: #fff; } .footer-email, .copyright { margin: 0; font-size: 14px; } .site-footer a { color: var(--footer-link); text-decoration: none;} .site-footer a:hover, .site-footer a:focus-visible { color: #fff; } /* Keep copyright unboxed if the class is reused on another element. */ .copyright { padding: 0; border: 0; } /* ============================================================================ 18. SCROLL-IN ANIMATIONS ---------------------------------------------------------------------------- Elements with data-reveal="animationName" stay hidden until they scroll into view; js/main.js then adds .is-revealed and the animation plays once. Keyframes are the exact ones from animate.css v3 that the site used. (Only applies when JavaScript runs — the "js" class is set in .) ========================================================================= */ .js [data-reveal]:not(.is-revealed) { visibility: hidden; } [data-reveal].is-revealed { animation-duration: 1s; animation-fill-mode: both; } [data-reveal="bounceIn"].is-revealed { animation-name: bounceIn; animation-duration: 0.75s; } [data-reveal="flipInY"].is-revealed { animation-name: flipInY; backface-visibility: visible; } [data-reveal="fadeInLeft"].is-revealed { animation-name: fadeInLeft; } [data-reveal="fadeInRight"].is-revealed { animation-name: fadeInRight; } [data-reveal="fadeInUp"].is-revealed { animation-name: fadeInUp; } [data-reveal="zoomIn"].is-revealed { animation-name: zoomIn; } [data-reveal="bounceInLeft"].is-revealed { animation-name: bounceInLeft; } [data-reveal="bounceInRight"].is-revealed { animation-name: bounceInRight; } @keyframes bounceIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; transform: scale3d(1, 1, 1); } } @keyframes flipInY { 0% { opacity: 0; transform: perspective(400px) rotate3d(0, 1, 0, 90deg); } 40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); } 60% { opacity: 1; transform: perspective(400px) rotate3d(0, 1, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { transform: perspective(400px); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; transform: translate3d(100%, 0, 0); } 100% { opacity: 1; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 100%, 0); } 100% { opacity: 1; transform: none; } } @keyframes zoomIn { 0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(25px, 0, 0); } 75% { transform: translate3d(-10px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } 100% { transform: none; } } @keyframes bounceInRight { 0% { opacity: 0; transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; transform: translate3d(-25px, 0, 0); } 75% { transform: translate3d(10px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } 100% { transform: none; } } /* ============================================================================ 19. RESPONSIVE ADJUSTMENTS — component layouts ---------------------------------------------------------------------------- Mixed min-width and max-width queries preserve the original layout. Container widths remain beside .container in section 03. Keep the exact boundaries: overlapping rules at 768px/992px are intentional for compatibility with the supplied stylesheet; later rules win ties. ========================================================================= */ /* ---- 768px and wider: three-column Feature list and Highlights ---------- */ @media (min-width: 768px) { .features-grid { grid-template-columns: repeat(3, 1fr); grid-template-areas: "left phone right"; } .features-grid > .item-list-right { grid-area: left; } .features-grid > .features-phone { grid-area: phone; } .features-grid > .item-list-left { grid-area: right; } .speciality-grid { grid-template-columns: repeat(3, 1fr); } /* thin dividers either side of the middle column */ .speciality-grid > :nth-child(2) { border-inline: 1px solid var(--muted); } } /* ---- 992px and wider: hero becomes two columns ------------------------- */ @media (min-width: 992px) { .hero-grid { grid-template-columns: 1fr 1fr; } } /* ---- Carousel: screenshots visible at once (same as the old carousel) --- */ @media (max-width: 1199px) { .carousel { --per-view: 4; } } @media (max-width: 979px) { .carousel { --per-view: 3; } } @media (max-width: 768px) { .carousel { --per-view: 2; } } @media (max-width: 479px) { .carousel { --per-view: 1; } } /* ---- 1200px and narrower: hide feature icons, tighten list spacing ------ */ @media (max-width: 1200px) { .feature-icon { display: none; } .item-list-right li, .item-list-left li { padding: 0 0 40px 0; } } /* ---- 768–992px: slightly smaller feature text -------------------------- */ @media (min-width: 768px) and (max-width: 992px) { .item-list-big li { font-size: 14px; } .item-list-big h3 { font-size: 22px; } } /* ---- 966px and narrower: tablet / phone -------------------------------- */ @media (max-width: 966px) { .hero { min-height: 0; } .hero-media { display: none; } /* hero phone image hidden (as before) */ /* Retain !important: this overrides the more specific feature heading rule. */ h3 { font-weight: 500 !important; } /* Screenshot title, line and circle become visible */ #gallery .section-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; color: #000; } #gallery .virticle-line, #gallery .circle { display: block; } #gallery .container { text-align: center; } } /* ---- Below 768px: Feature list and Highlights stack in one column ------- */ @media (max-width: 767px) { /* Footer items stack and centre; extra space below keeps the fixed back-to-top button from covering the text. */ .site-footer { padding-bottom: 95px; } .site-footer .container { flex-direction: column; justify-content: center; text-align: center; gap: 14px; } .item-list-right li, .item-list-left li { text-align: start; } .item-list-left li:last-child { margin-bottom: 60px; } .speciality-item + .speciality-item { margin-top: 20px; } } /* ---- 480px and narrower: phones --------------------------------------- */ @media (max-width: 480px) { :root { --header-pad: 10px; --bar-h: 100px; } h2 { font-size: 35px; } .wrapper { padding-block: 35px; } .hero { text-align: center; } /* Persian page kept its hero text right-aligned on phones (as before). */ [dir="rtl"] .hero { text-align: right; } .banner-text { margin-top: 50px; } .logo { font-size: min(56px, (100vw - 140px) * 0.18); } .menu-toggle { font-size: 36px; height: 51px; } .nav-button { margin-top: 15px; } .btn-download { width: 150px; margin: 5px 3px 25px; white-space: normal; } .btn-download .icon { margin-left: 0; margin-right: 12px; } .item-list-right li, .item-list-left li { margin: 0; padding: 0 0 60px 0; } .overlay-close { right: 45px; top: 30px; } } /* ---- Very short screens (landscape phones): smaller menu text ---------- */ @media (max-height: 30.5em) { .overlay nav { height: 70%; font-size: 34px; } .overlay li { min-height: 34px; } } /* ---- Very narrow phones (≤ 360px) ------------------------------------- */ @media (max-width: 360px) { .overlay nav { font-size: 40px; } .btn-download { width: 140px; } } /* ============================================================================ 20. REDUCED MOTION — respect the visitor's device setting ========================================================================= */ @media (prefers-reduced-motion: reduce) { .js [data-reveal]:not(.is-revealed) { visibility: visible; } [data-reveal].is-revealed, .highlight-left, .highlight-right, .lightbox[open] { animation: none; } .highlight-left, .highlight-right { display: none; } .overlay, .overlay ul { transition: none; } .carousel-track { scroll-behavior: auto; } }