A phased plan to expand the site from 1280px desktop-only to 320px–1440px responsive — preserving every brand decision, all links, and the full UX/UI design language.
The AMSYS website currently sets min-width:1280px on every page wrapper. Any device narrower than 1280px — every phone, most tablets — triggers horizontal scrolling and makes the content illegible and unusable.
This plan makes the site render correctly at every viewport from 320px to 1440px+ in 40 hours total. Zero content changes. Zero brand changes. All logos stay. All internal and external links continue to work. The UX/UI design language is preserved — the same colors, fonts, card patterns, and section structures appear at every screen size.
| Property | Current | After |
|---|---|---|
| Min viewport | 1280px | 320px |
| Mobile nav | None | Hamburger drawer |
| Content | Unchanged | Unchanged |
| Brand colors | Unchanged | Unchanged |
| Logos | Unchanged | Unchanged |
| Links | Unchanged | Unchanged |
| Design language | Unchanged | Unchanged |
| Page | File | Complexity | Key Mobile Issues | |
|---|---|---|---|---|
| Homepage | index.html |
High | 11-col seams diagram, 38 grid instances, 72px H1, mega-menu, 6-col solution row, industry tab panel | |
| Group Investor Site | group.html |
High | 1000px dropdown panel, 24 grid instances, Group dark-theme mega-menu, complex company sections | |
| Education | education.html |
High | 30 grid instances, 4-col dark sections, 7-pillar layout, multi-panel PDF cards, institution bar | |
| About | about.html |
High | 18 grid instances, city-hero canvas, 4-col leadership cards, in-page anchor nav bar | |
| Group About | group-about.html |
High | 21 grid instances, city-hero canvas, awards grid, in-page anchor nav, resources section | |
| 713 Product Studio | 713-product-studio.html |
High | Custom dark-blue theme, 713 animated field canvas hero, 18 grid instances, unique nav | |
| Managed Services | managed-services.html |
Medium | 2-col hero, 3-col solutions, 4-col process steps, 2-col group endorsement, 4-col footer | |
| AI Factory Services | ai-factory-services.html |
Medium | Same opco template + white-space:nowrap on stat labels |
|
| Enterprise Infrastructure | enterprise-infrastructure.html |
Medium | Same opco template | |
| Fiber Infrastructure | fiber-infrastructure.html |
Medium | Same opco template | 7h |
| Fluids Management | fluids-management.html |
Medium | Same opco template | |
| Hospitality Services | hospitality-services.html |
Medium | Same opco template | |
| Intelligent Buildings | intelligent-buildings.html |
Medium | Same opco template | |
| Technical Talent | technical-talent.html |
Medium | Same opco template | |
| Volarify Skilled Trades | volarify-skilled-trades.html |
Medium | Same opco template | |
| Industries | industries.html |
Medium | 8-col industry tab nav, 2-col per article, 60px H1 | |
| Solution Sets | solution-sets.html |
Medium | 5-col index nav, 3-col rows (240px + 1fr + 280px), 60px H1 | |
| Enterprise Applications | enterprise-applications.html |
Low | Partially responsive already (flex-wrap DS); needs CMDB diagram sizing polish |
These components are upgraded one time and propagate across the entire site automatically.
| # | Component | What changes |
|---|---|---|
| 3.1 | Outer wrapper min-width:1280px |
Add class am-page-wrap on all 18 pages; 1 CSS rule overrides the lock |
| 3.2 | Section container padding 0 64px |
Add class am-container; clamp(16px, 5vw, 64px) scales gracefully |
| 3.3 | AMSYS.com Navigation → hamburger drawer | New drawer HTML + CSS + JS state. Below 900px: hamburger replaces full nav. Accordion sub-nav inside drawer for Capabilities, Industries, Solutions, About. |
| 3.4 | AMSYS Group Navigation → hamburger drawer | Same approach, dark-theme variant. 1000px absolute dropdown → accordion drawer. |
| 3.5 | Footer grid collapse | 4–5 column → 2-col at tablet → 1-col at mobile. All links and copy unchanged. |
| 3.6 | Top information bar | Below 600px: hide right-side links, abbreviate left text. Brand statement stays. |
| 3.7 | 3-column card grid | Most common layout pattern. Class am-grid-3: 3-col → 2-col → 1-col at breakpoints. |
| 3.8 | 4-column grid | Class am-grid-4: 4-col → 2-col → 1-col at breakpoints. |
| 3.9 | 2-column editorial layout | Class am-editorial: stacks to 1-col below 768px; 72px gap removed on mobile. |
| 3.10 | Hero typography scaling | H1/H2 sizes use clamp() to scale down proportionally. Archivo variable font preserved. |
| Component | Mobile <600px | Tablet 600–900px | Desktop 900px+ |
|---|---|---|---|
| Navigation | Hamburger drawer | Hamburger drawer | Full mega-menu |
| 3-col cards | 1 col | 2 col | 3 col |
| 4-col grids | 1 col | 2 col | 4 col |
| 6-col icons | 2 col | 3 col | 6 col |
| Hero | Stacked, scaled heading | 2-col, smaller image | Current 2-col |
| Seams diagram | 3-col nodes, no connectors | 3+3 nodes | 11-col full |
| Industry tabs | Horizontal scroll pills | Horizontal scroll pills | 300px sidebar |
| Footer | 1 col | 2 col | 4–5 col |
| Contact form | 1-col inputs | 2-col inputs | 2-col inputs |
| AMSYS Difference | Stacked | Stacked | 4-col side-by-side |
The navigation is the highest-complexity single component (16h). Three 4–5 column hover-triggered dropdowns are replaced by an accordion drawer below 900px.
| Trigger | Hamburger ☰ button, 44×44px touch target, top-right of header |
| Animation | Slide in from right: transform:translateX(0) in 0.28s ease |
| Overlay | rgba(0,0,0,.5) behind drawer; tap to close |
| Scroll lock | overflow:hidden on body while open |
| Sub-nav | Accordion — tap heading to expand/collapse |
| External links | ↗ indicator preserved; target="_blank" unchanged |
| 713 links | Cyan #2BA3DC preserved inside drawer |
| State engine | Extends existing DCLogic.state pattern in support.js |
| Desktop | Drawer hidden; full mega-menu restored above 900px |
Font family, weight, and font-variation-settings are unchanged. Only font-size values scale via clamp() at mobile breakpoints.
| Element | Desktop | Tablet 600–900px | Mobile <600px |
|---|---|---|---|
| H1 hero (homepage) | 72px | 48px | 36px |
| H1 hero (713 studio) | 92px | 60px | 42px |
| H1 hero (about, group) | 64px | 44px | 34px |
| H1 hero (service pages) | 56px | 40px | 32px |
| H2 large | 56px | 38px | 30px |
| H2 mid | 48–52px | 34–36px | 28–30px |
| H2 small | 44px | 32px | 26px |
| H3 | 28–36px | 24–28px | 22–24px |
| Stat "ONE AMSYS" | 88px | 56px | 44px |
| Stat (hero strip) | 34px | 28px | 24px |
| Stat tile | 72px | 52px | 44px |
| Body large | 18–19px | 17px | 16px |
| Body standard | 15–16px | 15px | 15px |
| Eyebrow | 10.5px | 10.5px | 10px |
/* responsive.css — typography clamp example */
@media (max-width: 899px) {
.am-h1-hero { font-size: clamp(32px, 8vw, 48px) !important; }
.am-h2-large { font-size: clamp(28px, 6vw, 38px) !important; }
.am-h2-mid { font-size: clamp(26px, 5.5vw, 36px) !important; }
.am-h2-sm { font-size: clamp(24px, 5vw, 32px) !important; }
}
@media (max-width: 599px) {
.am-h1-hero { font-size: clamp(28px, 9vw, 36px) !important; }
.am-h2-large { font-size: clamp(26px, 8vw, 30px) !important; }
}| Phase | Scope | Hours |
|---|---|---|
| 1 — Foundation | responsive.css setup · Remove min-width lock · Container padding · Grid classes · Typography scale | 4h |
| 2 — Navigation | Hamburger drawer — AMSYS.com header · Group dark-theme header · Touch, accordion state | 8h |
| 3 — Homepage | All 38 grid instances · Seams diagram · AMSYS Difference · Industry tabs · AI section · Contact | 8h |
| 4 — Service Pages | 8 opco service pages · First page full treatment · Pattern reuse on remaining 7 | 6h |
| 5 — Complex Pages | Group investor site · Education · 713 Product Studio · About · Group About · Canvas components | 8h |
| 6 — Directory Pages | Industries (8-col scroll nav) · Solution Sets (5-col) · Enterprise Applications (DS polish) | 4h |
| 7 — QA & Verification | 5 viewports × 18 pages · Link audit · Desktop regression · Bug fixes | 2h |
| Total | 40h | |
Every phase can be approved, deployed, and tested before the next one starts. Desktop behavior is never broken mid-project.
!importantstyle="" attributes. Standard CSS cannot override these without !important. Mitigation: add CSS classes to layout containers only; keep all decorative/color/font styles inline and unchanged.sc-if / sc-for / x-dc runtime must handle drawer state correctlyDCLogic.state pattern in support.js. Incorrect integration could break existing hover-menu behavior. Mitigation: test nav open/close at all breakpoints before other work.mix-blend-mode:screen on GIFs may not render on all mobile browsers. Mitigation: test on physical devices before committing to the design.city-hero.js (about, group-about) and field-713.js (713 page) are absolutely positioned and cover 60%+ of hero width. Must inspect each for viewport-aware resizing. Added 2h per canvas to the estimate.dc-import propagation means a bug in the shared header breaks all pages simultaneouslyAMSYS.com Header.dc.html auto-propagates to all pages that import it. Phase 2 must be fully tested in isolation before merging to the shared component.animation:amsysMarquee 70s linear infinite on a width:max-content div. Mitigation: add will-change:transform and test on a real mid-tier Android device. Reduce animation distance if laggy.target="_blank" are unaffected by responsive changes. Zero risk of link breakage.amsys-ea-bundle.css/js instead of the main DS bundle. Its x-import components are isolated. Treat as a separate mini-project in Phase 6.borderRadius:2px (camelCase) instead of border-radius. Runtime handles both; CSS class overrides use standard CSS. No risk to functionality.responsive.css + targeted class additions.!important on every rule to override inline styles, making future maintenance fragile. Selectors would rely on nth-child chains that break when content is reordered.!important only for the single min-width override.| File | Change |
|---|---|
responsive.css | New file. ~250–350 lines of media-query rules. |
All 18 .html files | Class additions to layout containers only. Avg 10–20 class names per page. |
AMSYS.com Header.dc.html | Hamburger button + drawer markup added. |
AMSYS Group Header.dc.html | Same; dark-theme drawer variant. |
support.js or new mobile-nav.js | Hamburger open/close + accordion state. |
href link attributes — internal and externalamsys-ea-bundle.css/js and _ds/ directoryEvery visual decision made for the desktop site is preserved. The only thing that changes is how that design adapts when the viewport is narrower than 900px.
amsyshealth.com, amsyshospitality.com, nationwideitgroup.com, etc.) verified in QASign below to confirm acceptance of the scope and 40-hour estimate outlined in this document. Your electronic signature creates a timestamped audit record for both parties.