/* ============================================================ GKS CONSULTING GROUP — RESPONSIVE MEDIA QUERIES File: gks-responsive.css Add to AFTER tooplate-strategic-style.css: Breakpoints: ├── Dell HiRes — 2560x1600 native 100% scaling ├── 1600px — Large desktop ceiling (wide monitors) ├── 1440px — Standard desktop / high-DPI laptop ceiling ├── 1280px — Medium laptop (MacBook Air, smaller laptops) ├── 1025px+ — Desktop / iPad landscape: full nav, no hamburger ├── 1024px — All iPad portraits: hamburger nav activates ├── 900px — Tablets landscape ├── 768px — iPad Mini portrait / Android tablet portrait ├── 600px — Large phones landscape / small tablets ├── 480px — iPhones (14, 13, 12, SE 3rd gen) └── 375px — iPhone SE / small Android ============================================================ */ /* ============================================================ DELL HIGH-RES LAPTOP Dell Pro 14 Plus reports 1427 x 726 to Edge browser. OS/display scaling reduces effective viewport to 1427px wide. max-height: 800px separates this from standard 1440px desktops html { font-size: 13px } scales all rem units proportionally. !important on hero values overrides base stylesheet -6rem margin-top which was hiding text behind the navbar. ============================================================ */ @media (max-width: 1440px) and (max-height: 800px) { /* Global base font reduction */ html { font-size: 13px; } /* --- Navbar: thinner vertically --- */ .navbar { padding: 0.7rem 5%; } .logo { font-size: 1.3rem; } .logo-icon img { width: 46px; } .nav-links { gap: 2rem; } .nav-links a { font-size: 0.9rem; } /* --- Hero --- margin-top: 2rem pushes content DOWN from navbar. Base stylesheet has -6rem which hides text at top. !important ensures this wins over base stylesheet. */ #hero-headline { font-size: 2.0rem !important; max-width: 55% !important; margin-left: auto; margin-right: auto; text-align: center; } .hero-content { margin-top: 2rem !important; } .hero p, #hero-paragraph { font-size: 0.9rem; } /* --- Section defaults --- Reduced padding suits the physically small screen height */ .section { padding: 3rem 5%; } .section-title { font-size: 1.6rem; margin-bottom: 1rem; } /* --- Services home grid --- 5 columns fits two rows of all 10 cards on screen. Reduced padding-top prevents title sliding under navbar. min-height: 0 on cards allows them to be vertically compact. */ .services-home { padding-top: 1rem; padding-bottom: 1.5rem; } .services-home .section-title { margin-top: 0; padding-top: 0; } .services-grid { grid-template-columns: repeat(5, 1fr); gap: 0.7rem; margin-top: 0.5rem; } .service-card { padding: 0.6rem 0.7rem; min-height: 0; } .service-card h3 { font-size: 0.78rem; margin-bottom: 0.15rem; line-height: 1.2; } .service-card p { font-size: 0.7rem; margin: 0; line-height: 1.2; } .service-icon { font-size: 1.3rem; margin-bottom: 0.3rem; } /* --- Services detail page (services.html) --- padding-top reduced on body.services-page moves title up ~5mm. services-header padding reduced keeps spacing tight under navbar. margin-top more negative pulls content up ~5mm under the title. */ body.services-page { padding-top: 75px !important; } body.services-page .services-header { padding: 30px 5% 10px !important; } .services-page-title { font-size: 3.2rem; } .services-layout { margin-top: -80px; } .service-details h3 { font-size: 1.2rem; } .service-details p { font-size: 0.88rem; } .service-tab .tab-content h4 { font-size: 0.82rem; } /* --- About section --- padding-top: 5rem clears the navbar (~60px) plus adds the 1.5-2cm gap needed to bring content down on laptop. */ .about-section { padding: 5rem 5% 2rem; } /* Explicit grid placement ensures about-detail-block sits in right column under image/Key Points title. display: grid !important prevents flex overrides from other breakpoints bleeding in. */ .about { display: grid !important; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; align-items: start; } /* Left column spans both rows so feature buttons stay visible without being cut off */ .about-content { grid-column: 1; grid-row: 1 / span 2; } /* Image + Key Points title in top of right column */ .about-visual { grid-column: 2; grid-row: 1; padding-top: 0.5rem; } .about-content .highlight { font-size: 0.88rem; margin-bottom: 0.5rem; } .about-content h3 { font-size: 1rem; margin-bottom: 0.5rem; line-height: 1.3; } .about-content p { font-size: 0.8rem; line-height: 1.5; margin-bottom: 0.5rem; } .about-features { grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0.6rem 0; } .feature-item { padding: 0.4rem 0.5rem; gap: 0.5rem; } .feature-icon { width: 24px; height: 24px; font-size: 0.8rem; } .feature-text { font-size: 0.78rem; line-height: 1.2; } /* Detail card in right column row 2 — below image/Key Points. grid-column: 2 and grid-row: 2 place it explicitly. display: block ensures it is visible (not hidden by other breakpoint rules). Card styling matches desktop. */ .about-detail-block { grid-column: 2; grid-row: 2; display: block; font-size: 0.8rem; padding: 0.8rem; min-height: 50px; margin-top: 0.3rem; background: #ffffff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); line-height: 1.6; color: #333; } /* Image constrained so right column doesn't overflow screen */ .about-image { height: 160px; width: 100%; object-fit: cover; border-radius: 12px; } .veteran-support { font-size: 0.75rem; margin-top: 0.4rem; line-height: 1.4; } /* --- Team section --- padding-top: 1.5rem brings title up ~1cm on Dell screen. margin-top on team-grid brings cards up under the title. */ .team { padding-top: 1.5rem; padding-bottom: 3rem; } .team-grid { gap: 1.5rem; margin-top: 0.8rem; } .member-card { padding: 1.2rem 1rem; } .member-avatar { width: 90px; height: 108px; } .member-avatar img { object-fit: cover; object-position: top; } .bio-avatar { width: 90px; height: 108px; } .bio-avatar img { object-fit: cover; object-position: top; } .member-info h3 { font-size: 0.95rem; } .member-role { font-size: 0.8rem; } .member-info p { font-size: 0.78rem; } /* --- Contact section --- */ .contact p { font-size: 0.95rem; } /* Contact two-column layout on Dell: narrower card column suits the smaller screen width */ .contact-content { max-width: 860px; } .contact-layout { display: grid; grid-template-columns: 1fr 240px; gap: 1.5rem; align-items: start; margin-top: 1.5rem; } .contact-joinus-card { position: sticky; padding: 1.5rem 1rem; top: 5rem; } .contact-joinus-card h3 { font-size: 1rem; } .contact-joinus-card p { font-size: 0.82rem; } .contact-form input, .contact-form textarea { padding: 1rem; font-size: 0.9rem; } /* Remove base stylesheet margin-top: 4rem so form top aligns with the Join Us card in the right column */ .contact-form { margin-top: 0; } /* --- Join Us section --- */ .join-us-form input, .join-us-form select, .join-us-form textarea { font-size: 0.9rem; padding: 0.9rem; } /* --- Bio pages --- */ .bio-card { padding: 1.2rem; } .bio-title h1 { font-size: 1.5rem; } .bio-grid p { font-size: 0.88rem; line-height: 1.6; } /* --- Footer --- */ .footer { padding: 1.5rem 5% 1rem; } .footer-copyright, .footer-design { font-size: 0.8rem; } } /* ============================================================ 0a. DESKTOP BASELINE (min-width: 1025px) Full horizontal nav, no hamburger, on all screens above 1024px. This includes ALL iPad landscape views. ============================================================ */ @media (min-width: 1025px) { .mobile-menu { display: none !important; } .nav-links { display: flex !important; position: static; flex-direction: row; background: none; padding: 0; box-shadow: none; border: none; gap: 3rem; width: auto; } .nav-links li { border-bottom: none; } .nav-links a { display: inline-block; padding: 0.5rem 0; font-size: 1rem; } /* --- About dropdown: hidden on desktop --- */ .about-dropdown { display: none; } .about-detail-mobile { display: none; } } /* ============================================================ 0b. LARGE DESKTOP CEILING (max-width: 1600px) Prevents over-scaling on very wide monitors. ============================================================ */ @media (max-width: 1600px) { #hero-headline { font-size: 3.8rem; max-width: 70%; margin-left: auto; margin-right: auto; text-align: center; } .hero-content { margin-top: -6rem; } } /* ============================================================ 0c. STANDARD DESKTOP / HIGH-DPI LAPTOP (max-width: 1440px) ============================================================ */ @media (max-width: 1440px) { #hero-headline { font-size: 3.4rem; max-width: 70%; margin-left: auto; margin-right: auto; text-align: center; } .hero-content { margin-top: -5rem; } .section-title { font-size: clamp(2rem, 4vw, 2.8rem); } .service-card h3 { font-size: 1.1rem; } .member-info h3 { font-size: 1.2rem; } .about-content h3 { font-size: 1.4rem; } } /* ============================================================ 0d. MEDIUM LAPTOP (max-width: 1280px) MacBook Air 13" at default scaling = 1280px. ============================================================ */ @media (max-width: 1280px) { #hero-headline { font-size: 2.8rem; max-width: 72%; margin-left: auto; margin-right: auto; text-align: center; } .hero-content { margin-top: -4rem; } .section-title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); } .service-card h3 { font-size: 1.05rem; } .about-content h3 { font-size: 1.3rem; } .member-info h3 { font-size: 1.15rem; } .contact-form input, .contact-form textarea, .join-us-form input, .join-us-form textarea, .join-us-form select { font-size: 0.95rem; } } /* ============================================================ 1. ALL iPAD PORTRAITS + PHONES (max-width: 1024px) iPad Pro 12.9" portrait = 1024px iPad Pro 11" portrait = 834px iPad Air portrait = 820px iPad Mini portrait = 768px ============================================================ */ @media (max-width: 1024px) { /* --- Hero --- */ #hero-headline { font-size: 2.2rem; max-width: 74%; margin-left: auto; margin-right: auto; text-align: center; } .hero-content { margin-top: -3rem; } /* --- Navigation: hamburger replaces full menu --- */ .navbar { padding: 1rem 4%; } .nav-links { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff; flex-direction: column; padding: 1.2rem 5%; gap: 0; border-top: 1px solid rgba(71, 85, 105, 0.15); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); z-index: 999; } .nav-links.active { display: flex; } .nav-links li { border-bottom: 1px solid rgba(71, 85, 105, 0.08); } .nav-links li:last-child { border-bottom: none; } .nav-links a { display: block; padding: 0.9rem 0; font-size: 1.05rem; } .mobile-menu { display: flex; } .logo { font-size: 1.4rem; } .logo-icon img { width: 52px; } /* --- About section --- */ .about { display: flex !important; flex-direction: column !important; gap: 2rem; } .about-visual { order: 1; } .about-visual .stats { display: none; } .about-content { order: 2; } .about-features { order: 3; } .about-detail-block { order: 4; background: #ffffff; padding: 1.5rem; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); font-size: 1rem; line-height: 1.7; color: #333; min-height: 80px; } .about-detail-prompt { display: block; color: #666; } .about-detail-mobile { display: none; } .about-dropdown { display: none; } .veteran-support { order: 5; max-width: 100% !important; width: 100% !important; } /* --- Services grid --- */ .services-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; } /* --- Services detail page --- */ body.services-page { padding-top: 60px !important; } body.services-page .services-header { padding: 10px 4% 6px !important; margin: 0 !important; } body.services-page .services-container .section-title { display: none !important; } body.services-page .services-layout { margin-top: 1rem !important; } /* --- Team grid --- */ .team-grid { gap: 2rem; } .team-member { width: 270px; } /* --- Contact: two-column layout for iPad landscape --- Form left, Join Us card right. contact-content widened to accommodate both columns. */ .contact-content { max-width: 900px; } .contact-layout { display: grid; grid-template-columns: 1fr 260px; gap: 2rem; align-items: start; margin-top: 2rem; } .contact-joinus-card { position: sticky; top: 5rem; } /* Remove base stylesheet margin-top: 4rem so form top aligns with the Join Us card in the right column */ .contact-form { margin-top: 0; } /* --- Footer --- */ .footer-content { gap: 1.5rem; } } /* ============================================================ 2. TABLETS LANDSCAPE (max-width: 900px) ============================================================ */ @media (max-width: 900px) { .navbar { padding: 0.9rem 4%; } .logo { font-size: 1.25rem; } .logo-icon img { width: 44px; } /* --- Hero --- */ #hero-headline { font-size: clamp(1.8rem, 5.5vw, 2.2rem); max-width: 76%; margin-left: auto; margin-right: auto; text-align: center; } #hero-paragraph { font-size: clamp(1rem, 2.8vw, 1.3rem); } .hero-content { padding: 0 1.5rem; margin-top: -2rem; } /* --- Services grid --- */ .services-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } /* --- About --- */ .about { grid-template-columns: 1fr 1fr; gap: 2rem; } .about-features { grid-template-columns: 1fr 1fr; gap: 1rem; } /* --- Services detail --- */ .services-layout { grid-template-columns: 1fr; margin-top: 0; gap: 1.5rem; } .services-column-left { order: 1; } .services-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; max-width: 100%; padding-right: 0; order: 2; } .service-tab { flex: 1 1 calc(50% - 0.25rem); min-width: 140px; } /* --- Team --- */ .team-grid { gap: 1.5rem; } .team-member { width: 260px; } /* --- Contact form --- */ .contact-form .form-group { grid-template-columns: 1fr 1fr; } /* --- Footer --- */ .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .footer-links { justify-content: center; gap: 1.5rem; } } /* ============================================================ 3. TABLETS PORTRAIT (max-width: 768px) iPad 10th gen / Air portrait = 820px iPad Mini portrait = 768px ============================================================ */ @media (max-width: 768px) { .hero { min-height: 90vh; } #hero-headline { font-size: clamp(1.6rem, 5.5vw, 2.0rem); letter-spacing: -0.25px; max-width: 80%; margin-left: auto; margin-right: auto; text-align: center; } #hero-paragraph { font-size: 1.05rem; min-height: 3.5em; } .hero-content { padding: 0 1.2rem; margin-top: -1rem; } .section { padding: 5rem 4%; } .section-title { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 2.5rem; } /* --- Services grid --- */ .services-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .service-card { padding: 20px 16px; } .service-icon { font-size: 32px; } /* --- About --- Reduced about-section padding pulls content up ~1cm on iPad Air 2. Single column layout is correct for portrait iPad. */ .about-section { padding-top: 3rem; padding-bottom: 3rem; } .about { grid-template-columns: 1fr; gap: 1.5rem; } .about-content::before { display: none; } .about-features { grid-template-columns: 1fr 1fr; } .about-image { height: 200px; max-width: 100%; } .about-visual { order: -1; } .veteran-support { order: 5; font-size: 0.95rem; max-width: 100% !important; width: 100% !important; } /* --- Services detail --- */ .services-layout { grid-template-columns: 1fr; gap: 1.5rem; } .services-column-left { order: 1; } .services-tabs { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.5rem; max-width: 100%; padding: 0; order: 2; } .service-tab { flex: 1 1 calc(50% - 0.25rem); padding: 8px 10px; font-size: 0.85rem; } .service-tab .tab-content h4 { font-size: 0.85rem; } .service-details { min-height: auto; } /* --- Team --- Default 8rem padding-top from base stylesheet pushes title too low on iPad Air 2. Reduced to bring title up ~1cm and cards closer under it. */ .team { padding-top: 3.5rem; padding-bottom: 3.5rem; } .team-grid { gap: 1.5rem; margin-top: 1rem; } .team-member { width: calc(50% - 0.75rem); min-width: 200px; } .member-card { padding: 1.8rem 1.2rem; } .member-avatar { width: 110px; height: 130px; } .member-avatar img { object-fit: cover; object-position: top; } /* --- Contact layout: stack on tablet portrait --- Join Us card moves below form on iPad portrait */ .contact-layout { grid-template-columns: 1fr; gap: 2rem; } .contact-joinus-card { position: static; width: 100%; max-width: 400px; margin: 0 auto; } .contact-form .form-group { grid-template-columns: 1fr 1fr; } /* --- Bio pages --- */ .bio-header { grid-template-columns: 90px 1fr; } .bio-avatar { width: 90px; height: 108px; } .bio-avatar img { object-fit: cover; object-position: top; } /* --- Footer --- */ .footer-content { flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .footer-links { flex-wrap: wrap; justify-content: center; gap: 1rem; } } /* ============================================================ 4. LARGE PHONES LANDSCAPE / SMALL TABLETS (max-width: 600px) ============================================================ */ @media (max-width: 600px) { .navbar { padding: 0.8rem 4%; } .logo { font-size: 1.1rem; gap: 0.5rem; } .logo-icon img { width: 38px; } .hero { min-height: 85vh; background-attachment: scroll !important; } #hero-headline { font-size: clamp(1.4rem, 6.5vw, 1.8rem); max-width: 88%; margin-left: auto; margin-right: auto; text-align: center; } #hero-paragraph { font-size: 1rem; min-height: 4em; } .hero-content { margin-top: 1rem; padding: 0 1rem; } .submit-btn { padding: 0.7rem 1.5rem; font-size: 1rem; } .section { padding: 4rem 4%; } .section-title { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-bottom: 2rem; letter-spacing: -0.5px; } /* --- Services grid --- */ .services-grid { grid-template-columns: 1fr; gap: 14px; } .service-card { display: flex; align-items: center; text-align: left; gap: 1rem; padding: 16px 20px; } .service-card .service-icon { font-size: 2rem; margin-bottom: 0; flex-shrink: 0; } .service-card h3 { font-size: 1rem; margin-bottom: 0.2rem; } .service-card p { font-size: 0.88rem; margin: 0; } /* --- About --- */ .about { display: flex !important; flex-direction: column !important; gap: 1rem; } .about-visual { order: 1; } .about-visual .stats { display: none; } .about-content { order: 2; } .about-features { display: none !important; } .about-dropdown { display: block; order: 3; width: 100%; padding: 0.9rem 1rem; font-size: 1rem; border: 2px solid rgba(0,0,0,0.15); border-radius: 12px; background: white; color: #1e293b; cursor: pointer; } .about-detail-block { order: 4; background: #ffffff; padding: 1.2rem; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); font-size: 0.95rem; line-height: 1.7; color: #333; min-height: 80px; margin-top: 0; } .about-detail-mobile { display: none; } .veteran-support { order: 5; max-width: 100% !important; width: 100% !important; } .service-tab { flex: 1 1 100%; font-size: 0.9rem; } .team-member { width: 100%; max-width: 340px; } /* --- Contact layout: single column on phone --- */ .contact-layout { grid-template-columns: 1fr; gap: 1.5rem; } .contact-joinus-card { position: static; width: 100%; } .contact-form .form-group { grid-template-columns: 1fr; gap: 1rem; } .contact-form textarea { min-height: 120px; } .join-us-form .form-group { grid-template-columns: 1fr; gap: 1rem; } .bio-header { grid-template-columns: 1fr; text-align: center; } .bio-avatar { margin: 0 auto; } .footer-links { flex-direction: column; align-items: center; gap: 0.8rem; } } /* ============================================================ 5. iPHONES + SMALL ANDROID PHONES (max-width: 480px) ============================================================ */ @media (max-width: 480px) { .navbar { padding: 0.75rem 4%; } .logo span { font-size: 1rem; } .logo-icon img { width: 34px; } .hero { min-height: 80vh; } #hero-headline { font-size: clamp(1.3rem, 7.5vw, 1.7rem); font-weight: 400; line-height: 1.25; max-width: 90%; margin-left: auto; margin-right: auto; text-align: center; } #hero-paragraph { font-size: 0.95rem; min-height: 4.5em; margin-bottom: 2rem; } .hero-content { margin-top: 2rem; padding: 0 0.8rem; } .submit-btn { padding: 0.65rem 1.4rem; font-size: 0.95rem; border-radius: 40px; } .section { padding: 3.5rem 4%; } .section-title { font-size: clamp(1.6rem, 7vw, 2rem); margin-bottom: 1.8rem; } .services-home { min-height: auto; padding-top: 4px; padding-bottom: 1rem; } .services-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; } .service-card { padding: 14px 16px; } /* --- About --- */ .about { display: flex !important; flex-direction: column !important; gap: 1rem; } .about-visual { order: 1; } .about-visual .stats { display: none; } .about-visual .about-detail-block { display: none; } .about-content { order: 2; } .about-features { display: none !important; } .about-dropdown { display: block; order: 3; width: 100%; padding: 0.9rem 1rem; font-size: 1rem; border: 2px solid rgba(0,0,0,0.15); border-radius: 12px; background: white; color: #1e293b; cursor: pointer; } .about-detail-mobile { display: block; order: 4; background: #ffffff; padding: 1.2rem; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); font-size: 0.95rem; line-height: 1.7; color: #333; min-height: 80px; } .veteran-support { order: 5; max-width: 100% !important; width: 100% !important; } .about-section { padding: 4rem 4% 3rem; } .about-content .highlight { font-size: 1.1rem; } .about-content p { font-size: 1rem; line-height: 1.7; } .about-image { height: 200px; } .about-detail-block { padding: 1.2rem; font-size: 0.95rem; } .feature-item { padding: 0.8rem; gap: 0.8rem; } .feature-icon { width: 34px; height: 34px; font-size: 1rem; } .team { padding-top: 4rem; padding-bottom: 4rem; } .team-grid { gap: 1.2rem; margin-top: 2rem; } .team-member { width: 100%; max-width: 100%; } .member-card { padding: 1.5rem 1rem; } .member-avatar { width: 96px; height: 96px; } .member-info h3 { font-size: 1.2rem; } .member-role { font-size: 0.9rem; } .member-info p { font-size: 0.88rem; } .contact { min-height: auto; padding-top: 0; padding-bottom: 0; } .contact p { font-size: 1rem; margin-bottom: 2rem; text-align: left; } .contact-form { margin-top: 2rem; gap: 1.2rem; } .contact-form input, .contact-form textarea { padding: 1rem; font-size: 1rem; border-radius: 14px; } .contact-form textarea { min-height: 100px; } .join-us-form input, .join-us-form select, .join-us-form textarea { font-size: 1rem; padding: 1rem; } .sean-container { padding: 0 0.8rem; width: 100%; } .bio-card { padding: 1rem; } .back-link { font-size: 0.95rem; } .footer { padding: 2rem 4% 1.5rem; } .footer-copyright { font-size: 0.85rem; } .footer-design { font-size: 0.85rem; } } /* ============================================================ 6. VERY SMALL PHONES (max-width: 375px) ============================================================ */ @media (max-width: 375px) { .logo span { display: none; } .logo-icon img { width: 32px; } #hero-headline { font-size: clamp(1.1rem, 8vw, 1.4rem); max-width: 95%; margin-left: auto; margin-right: auto; } #hero-paragraph { font-size: 0.9rem; } .hero-content { margin-top: 2.5rem; } .section-title { font-size: 1.6rem; } .member-avatar { width: 80px; height: 80px; } } /* ============================================================ 7. iOS-SPECIFIC FIXES ============================================================ */ @supports (-webkit-touch-callout: none) { input, select, textarea { font-size: 16px !important; } .hero { background-attachment: scroll !important; } html { -webkit-overflow-scrolling: touch; } } /* ============================================================ 8. RETINA / HIGH-DPI DISPLAYS ============================================================ */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo-icon img, .member-avatar img, .about-image img, .bio-avatar img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } } /* ============================================================ 9. TOUCH DEVICE IMPROVEMENTS ============================================================ */ @media (hover: none) and (pointer: coarse) { .service-card:hover { transform: none; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .member-card:hover { transform: none; box-shadow: none; } .feature-item:hover { transform: none; } .stat:hover { transform: none; } .nav-links a { padding: 0.75rem 0; min-height: 44px; display: flex; align-items: center; } .submit-btn, .page-nav-btn, .join-us-submit { min-height: 44px; min-width: 44px; } .mobile-menu { min-height: 44px; min-width: 44px; justify-content: center; align-items: center; } .feature-item { cursor: default; } } /* ============================================================ 10. PRINT ============================================================ */ @media print { .navbar, .mobile-menu, .hero, .contact-form, .submit-btn, .footer { display: none; } body { font-size: 12pt; color: #000; background: #fff; } .section { padding: 2rem 0; page-break-inside: avoid; } .about { grid-template-columns: 1fr; } .services-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(3, 1fr); } }