@charset "UTF-8"; /* * -------------------------------------------------------------------------- * MOBILE & TABLET TOUCH CONTROLLER LAYOUT * Target: html.is-touch (Activated via JS Detection) * Concept: Fluid Ratio Scaling (Adaptive Layout) * Note: This CSS overrides Tailwind's responsive utilities to maintain desktop-like structure * -------------------------------------------------------------------------- */ /* [Fluid Typography & Base Scale] - Instead of fixed PX, we use Viewport Width (vw) to scale everything proportionally. - Base font-size on determines 'rem' units. - Desktop 16px @ 1920px width ~= 0.83vw - Mobile 16px @ 375px width ~= 4.2vw - We aim for a middle ground where elements shrink but remain readable. */ html.is-touch { /* Dynamic Base Font Size: Minimum 12px to prevent illegibility. Scales with width (2vw + 6px) -> e.g., 375px = 13.5px, 768px = 21px */ font-size: clamp(12px, 2.5vw, 16px); overflow-x: hidden; } /* Force body to take full width without horizontal scroll */ html.is-touch body { width: 100%; min-width: 0; overflow-x: hidden; word-break: keep-all; } /* [Container Ratio Reset] - Tailwind containers have fixed max-widths (sm, md, lg, xl). - We remove these fixed steps and make it fluid (90% width). */ html.is-touch .container { max-width: 100% !important; padding-left: 5vw !important; padding-right: 5vw !important; margin-left: auto !important; margin-right: auto !important; } /* [Grid & Flex Structure Preservation] - Prevent stacking into 1 column (vertical block). - Maintain 2-column or multi-column layout even on small screens. */ /* Force Flex items to stay in row (don't wrap to column) unless explicitly needed */ html.is-touch .md\:flex-row { flex-direction: row !important; } /* Force Hidden Desktop Elements to Show */ html.is-touch .hidden.md\:block:not(.group-hover\:visible):not(svg) { display: block !important; } html.is-touch .hidden.md\:flex { display: flex !important; } html.is-touch .hidden.lg\:block { display: block !important; } /* [Grid Columns Ratio] - Override single column mobile default */ html.is-touch .grid-cols-1 { /* Minimum 2 columns for better ratio usage */ /* Exception: About page main grid should be 1 column for readability */ } /* Special Case: Service Items (Usually 4 or 6 cols on desktop) */ /* If it was lg:grid-cols-6, make it 3 cols on mobile (2 rows) */ html.is-touch .lg\:grid-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } /* If it was md:grid-cols-4, make it 2 cols on mobile */ html.is-touch .md\:grid-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } /* [Navigation & Header] - Keep header menu visible (don't hide behind hamburger) - Scale down spacing */ html.is-touch nav a, html.is-touch header a { font-size: 0.9rem !important; /* Relative to fluid root */ padding: 0.5rem 0.8rem !important; } /* Force Header Menu Items Visible */ /* Header Right Menu Container */ html.is-touch div.absolute.right-8.flex { top: 4rem !important; /* Pull down below the logo (4-point grid: 64px) */ right: 1.25rem !important; /* 20px */ gap: 0.75rem !important; /* Reduce gap to fit horizontally (12px) */ justify-content: flex-end !important; width: auto !important; /* Shrink to fit */ padding-right: 0 !important; } /* Hide Dropdown thoroughly on mobile */ html.is-touch .group-hover\:visible { display: none !important; visibility: hidden !important; opacity: 0 !important; } html.is-touch .relative.group svg { display: none !important; } /* Header Right Menu Items Adjustment */ html.is-touch div.absolute.right-8.flex a, html.is-touch div.absolute.right-8.flex button { font-size: 0.85rem !important; padding: 0.35rem 0.6rem !important; } /* Header Left Logo Container */ html.is-touch div.absolute.left-4, html.is-touch div.absolute.md\:left-8 { top: 1.25rem !important; /* 20px */ left: 1.25rem !important; /* 20px */ } /* Bigger Logo for Mobile */ html.is-touch div.absolute.left-4 img, html.is-touch div.absolute.md\:left-8 img { height: 2rem !important; /* Increased from 1.5rem to 2rem (32px) */ width: auto !important; } /* [Touch Target Optimization] - Ensure tappable areas are distinct */ html.is-touch a, html.is-touch button { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* [Hero Section Text Scaling] */ html.is-touch h1 { font-size: 2.5rem !important; /* Will scale with vw */ line-height: 1.2 !important; } /* [Banner Widget] - If it's fixed/absolute, ensure it doesn't cover content */ html.is-touch #rightSideBanner { display: none !important; /* Usually banners are annoying on mobile touch */ } /* [Projects Scroll Snap] - Enhance horizontal scrolling experience */ html.is-touch #projectsContainer { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 4vw !important; padding-left: 5vw !important; padding-right: 5vw !important; } html.is-touch #projectsContainer > div { min-width: 70vw !important; /* Show part of next item to encourage scroll */ scroll-snap-align: center; } /* [About Page Specifics] */ /* Force 1 column for About Main Section on Mobile for Readability */ html.is-touch .md\:grid-cols-12 { grid-template-columns: 1fr !important; gap: 2rem !important; } html.is-touch .md\:col-span-4, html.is-touch .md\:col-span-8 { grid-column: span 1 / span 1 !important; padding-left: 0 !important; } /* Reduce Hero Height on Mobile */ html.is-touch header.h-\[60vh\] { height: 50vh !important; } /* Adjust About Title Position */ html.is-touch .md\:pl-24 { padding-left: 0 !important; } html.is-touch h2.text-6xl { font-size: 3rem !important; top: -3rem !important; } /* [Footer Fixes] */ html.is-touch footer .container { flex-direction: column !important; text-align: center !important; gap: 1rem !important; } html.is-touch footer .text-right { text-align: center !important; } /* Partner Logos Ratio Fix */ html.is-touch .partner-logos-img { max-width: 100% !important; width: auto !important; /* Maintain intrinsic width up to 100% */ height: auto !important; /* Maintain aspect ratio */ object-fit: contain !important; padding: 1rem 0 !important; /* Give it some breathing room */ } /* Footer Text Wrapping */ html.is-touch footer p { word-break: break-word !important; /* Allow wrapping for long addresses */ white-space: normal !important; } html.is-touch footer .break-keep { word-break: break-word !important; /* Override keep-all for footer */ } @media (max-width: 767px) { html, body { max-width: 100%; overflow-x: hidden; overscroll-behavior-x: none; } body { word-break: keep-all; } body > a.fixed.top-8.left-8.z-50 { display: none !important; } .container { padding-left: 16px !important; padding-right: 16px !important; } body > div.absolute.top-8.left-8.z-40 { top: calc(env(safe-area-inset-top) + 16px) !important; left: 16px !important; right: 96px !important; } body > div.absolute.top-8.left-8.z-40 img { height: 28px !important; max-width: min(144px, calc(100vw - 128px)) !important; width: auto !important; } body > div.absolute.top-8.right-8.z-50.flex.items-center.gap-6 { top: calc(env(safe-area-inset-top) + 16px) !important; right: 16px !important; left: auto !important; gap: 8px !important; } #sitemapTrigger { min-width: 44px; min-height: 44px; padding: 8px 12px; border-radius: 9999px; background: rgba(15, 58, 104, 0.28); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } #sitemapTrigger span { font-size: 12px; } #closeSitemap { top: calc(env(safe-area-inset-top) + 16px) !important; right: 16px !important; } #sitemapOverlay .container { padding-top: calc(env(safe-area-inset-top) + 72px) !important; } #projectsContainer { padding-left: 16px !important; padding-right: 16px !important; gap: 16px !important; } #projectsContainer > div { min-width: min(280px, calc(100vw - 48px)) !important; } .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } .overflow-x-auto > table { width: 100%; } .overflow-x-auto table th, .overflow-x-auto table td { min-width: 88px; padding: 12px 12px !important; vertical-align: top; } .overflow-x-auto table th { white-space: nowrap; } .overflow-x-auto table td { white-space: normal; } [data-table-layout="wide"] table, table[data-table-layout="wide"] { min-width: 960px !important; } [data-table-layout="adjacent-survey"] table, table[data-table-layout="adjacent-survey"] { min-width: 720px !important; } [data-table-layout="adjacent-survey"] th:nth-child(1), [data-table-layout="adjacent-survey"] td:nth-child(1) { min-width: 72px; } [data-table-layout="adjacent-survey"] th:nth-child(2), [data-table-layout="adjacent-survey"] td:nth-child(2) { min-width: 92px; } [data-table-layout="adjacent-survey"] th:nth-child(3), [data-table-layout="adjacent-survey"] td:nth-child(3) { min-width: 320px; } [data-table-layout="adjacent-survey"] th:nth-child(4), [data-table-layout="adjacent-survey"] td:nth-child(4) { min-width: 160px; } [data-table-layout="adjacent-survey"] ul { min-width: 0; } main section [class*="bg-white"][class*="rounded-2xl"][class*="border"][class*="border-gray-100"] { padding: 24px !important; } main section [class*="bg-gray-50/50"][class*="rounded-xl"][class*="border"][class*="border-gray-100"][class*="shadow-sm"] { background: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } main section .md\:w-1\/3, main section .md\:w-2\/3, main section .md\:w-48, main section .md\:w-40 { width: 100% !important; } main section .md\:p-8, main section .md\:p-10 { padding: 24px !important; } }