/* ============================================================ mobile.css — Cleantech NZ mobile layer (single-page pivot) Activates below 720px. Injected sitewide by nav-v2.js. Companion JS: mobile-shell.js. Provides: - Home ("/"): full landing (hero, personas, what-we-are, solutions taste, sign-up, contact, footer). - Everywhere else: "best on desktop" splash. The site's normal chrome (.site-header, .member-bar, .member-subnav, .site-footer) is hidden by JS-injected CSS. ============================================================ */ /* Design tokens (self-contained — don't depend on design-system.css because most portal pages are hidden underneath us and we want the mobile layer to render even if the underlying page CSS never loads). */ .m-layer { --m-bg: #ffffff; --m-surface: #ffffff; --m-surface-soft: #f1f5f1; --m-ink: #102017; --m-muted: #65736b; --m-line: #d8e1db; --m-line-2: #c6d2ca; --m-brand: #0b9a4a; --m-brand-2: #28b867; --m-brand-soft: #e9f7ef; --m-brand-ink: #06331a; --m-blue: #367cf5; --m-blue-soft: #edf3ff; --m-amber: #eaa525; --m-amber-soft: #fff6de; --m-purple: #7f63df; --m-purple-soft: #f1edff; --m-orange: #ef7d32; --m-orange-soft: #fff0e6; --m-teal: #258b83; --m-teal-soft: #e8f7f5; } /* Activate on phone-sized viewports (covers all phones + iPad-mini portrait). The mobile-shell.js only mounts .m-layer when it decides to render, so these styles are load-bearing exactly when they need to be. */ @media (max-width: 900px) { html.is-mobile, html.is-mobile body { background: var(--m-bg, #ffffff) !important; color: var(--m-ink, #102017); margin: 0 !important; padding: 0 !important; -webkit-font-smoothing: antialiased; width: 100% !important; max-width: 100% !important; overflow-x: hidden; zoom: 1 !important; /* design-system.css sets zoom:0.9 on — kill it on mobile */ } html.is-mobile .container { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .m-layer { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--m-ink); background: var(--m-bg); min-height: 100vh; width: 100vw !important; max-width: 100vw !important; margin: 0 !important; padding: 0 !important; overflow-x: hidden; } .m-layer > * { width: 100%; max-width: 100%; box-sizing: border-box; } .m-layer * { box-sizing: border-box; } /* ---------- HEADER ---------- */ .m-header { padding: 12px 20px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--m-line); } .m-brand-lockup { display: inline-flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; } .m-brand-l, .m-brand-r { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; flex: none; } .m-brand-cleantech { height: 26px; width: auto; display: block; } .m-brand-div { width: 1px; height: 22px; background: var(--m-line-2); flex: none; } .m-brand-sphere { height: 22px; width: 22px; display: block; object-fit: contain; } .m-brand-sphere-name { font-weight: 700; font-size: 8.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--m-brand); white-space: nowrap; margin-left: -1px; } /* ---------- HERO ---------- */ .m-hero { padding: 26px 20px 30px; } .m-eyebrow-pill { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--m-brand-soft); color: var(--m-brand); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; } .m-hero h1 { font-size: 34px; font-weight: 800; line-height: 1.06; letter-spacing: -.025em; margin: 0 0 14px; } .m-hero h1 span { color: var(--m-brand); } .m-hero p.lead { font-size: 15.5px; color: var(--m-muted); line-height: 1.55; margin: 0; } /* ---------- SECTION SHELL ---------- */ .m-section { padding: 32px 20px 30px; border-top: 1px solid var(--m-line); } .m-section.m-tint { background: #f6f9f7; } .m-eyebrow { display: inline-block; font-size: 10.5px; font-weight: 800; color: var(--m-brand); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 8px; } .m-section h2 { font-size: 22px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.02em; line-height: 1.2; } .m-section p.m-sub { font-size: 13.5px; color: var(--m-muted); margin: 0 0 20px; line-height: 1.55; } .m-section p.m-body-copy { font-size: 14px; color: #38483f; line-height: 1.6; margin: 0 0 14px; } .m-section p.m-body-copy b { color: var(--m-ink); } /* ---------- PERSONAS ---------- */ .m-persona-list { display: flex; flex-direction: column; gap: 10px; } .m-persona { display: flex; align-items: flex-start; gap: 12px; background: #f6f9f7; /* match the .m-tint section background — sleek, consistent */ border: 1px solid #dde7e0; border-radius: 12px; padding: 14px 12px; } .m-persona .p-ico { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; flex: none; background: transparent; overflow: hidden; } /* Icons are 8-bit RGB PNGs with a baked-in white background — mix-blend-mode: multiply lets the white blend into the card tint, so the icon reads as if it's on a transparent square. */ .m-persona .p-ico { overflow: visible; } .m-persona .p-ico img { width: 48px; height: 48px; object-fit: contain; display: block; mix-blend-mode: multiply; } /* Founders glyph runs small in the source PNG — bump ~20% to match the others. */ .m-persona.founders .p-ico img { width: 58px; height: 58px; } .m-persona .p-body { flex: 1; min-width: 0; } .m-persona .p-body h4 { margin: 0 0 5px; font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; color: var(--m-brand); } .m-persona .p-body p { font-size: 13px; color: #2c3a32; line-height: 1.5; margin: 0; } .m-persona .p-body p b { color: var(--m-ink); font-weight: 700; } /* ---------- WHAT WE ARE ---------- */ .m-whatwe-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 4px; } .m-whatwe-tile { background: var(--m-surface); border: 1px solid var(--m-line); border-radius: 12px; padding: 16px 8px 14px; text-align: center; } .m-whatwe-tile .w-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--m-brand-soft); color: var(--m-brand); display: grid; place-items: center; margin: 0 auto 10px; } .m-whatwe-tile .w-ico.w-ico-img { width: 68px; height: 68px; border-radius: 0; background: transparent; margin: 0 auto 10px; } .m-whatwe-tile .w-ico.w-ico-img img { width: 100%; height: 100%; object-fit: contain; display: block; } .m-whatwe-tile .w-t { font-size: 13px; font-weight: 800; letter-spacing: -.005em; margin: 0; } /* ---------- SOLUTIONS TASTE ---------- */ .m-sol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .m-sol-tile { aspect-ratio: 1 / 1; border-radius: 14px; padding: 14px 14px 12px; color: #fff; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; text-align: left; border: none; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .12s ease, filter .12s ease; } .m-sol-tile:active { transform: scale(.98); filter: brightness(1.05); } .m-sol-tile .s-ic { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; opacity: .95; } .m-sol-tile .s-ic svg { width: 100%; height: 100%; display: block; } .m-sol-tile .n { font-size: 20px; font-weight: 800; opacity: .55; letter-spacing: -.01em; } .m-sol-tile .t { font-size: 13.5px; font-weight: 800; line-height: 1.2; } .m-sol-tile .c { font-size: 11px; font-weight: 600; opacity: .85; margin-top: 3px; } .m-sol-tile.a { background: linear-gradient(160deg, #0b9a4a, #067a3a); } .m-sol-tile.b { background: linear-gradient(160deg, #258b83, #196861); } .m-sol-tile.c { background: linear-gradient(160deg, #367cf5, #275fc3); } .m-sol-tile.d { background: linear-gradient(160deg, #ef7d32, #c85d1d); } .m-sol-tile.e { background: linear-gradient(160deg, #7f63df, #5f47b3); } .m-sol-tile.f { background: linear-gradient(160deg, #eaa525, #b57b13); } .m-sol-more { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--m-muted); font-weight: 600; } .m-sol-more b { color: var(--m-ink); } /* --- solution modal --- */ .m-sol-overlay { position: fixed; inset: 0; z-index: 500; display: none; } .m-sol-overlay.open { display: block; } .m-sol-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 15, .55); opacity: 0; transition: opacity .18s ease; } .m-sol-overlay.show .m-sol-backdrop { opacity: 1; } .m-sol-modal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%) scale(.94); width: min(340px, calc(100vw - 32px)); background: #fff; border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.45); padding: 22px 20px 20px; opacity: 0; transition: transform .22s cubic-bezier(.2,.8,.25,1), opacity .18s ease; } .m-sol-overlay.show .m-sol-modal { transform: translate(-50%, -50%) scale(1); opacity: 1; } .m-sol-close { position: absolute; top: 8px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--m-muted); cursor: pointer; font-family: inherit; } .m-sol-close:hover { color: var(--m-ink); background: var(--m-surface-soft); } .m-sol-body .m-eyebrow { margin-bottom: 6px; } .m-sol-body h3 { font-size: 20px; font-weight: 800; margin: 0 0 10px; letter-spacing: -.015em; color: var(--m-ink); line-height: 1.2; } .m-sol-body p { font-size: 13.5px; color: #38483f; line-height: 1.55; margin: 0 0 16px; } .m-sol-cos-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--m-muted); margin-bottom: 8px; } .m-sol-cos { display: flex; flex-direction: column; gap: 6px; } .m-sol-co { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 10px; background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.05); text-decoration: none; transition: background .12s ease; } .m-sol-co:active { background: #fff; } .m-sol-co .n { font-size: 13.5px; font-weight: 700; color: var(--m-ink); } .m-sol-co .a { font-size: 11.5px; font-weight: 700; color: var(--m-brand); letter-spacing: .01em; } /* Higher specificity so this beats .m-sol-body p (font-size:13.5px). */ .m-sol-body p.m-sol-foot { font-size: 9.5px; color: var(--m-muted); line-height: 1.5; margin: 26px 0 0; text-align: left; font-style: italic; letter-spacing: .01em; } /* ---------- SIGN UP ---------- */ .m-signup-card { margin: 4px 0 0; padding: 22px 20px; background: linear-gradient(160deg, #ffffff 0%, #eef8f2 100%); border: 1.5px solid var(--m-brand); border-radius: 14px; box-shadow: 0 12px 30px -12px rgba(11,154,74,.35); } .m-field { margin-bottom: 10px; } .m-field label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--m-muted); margin-bottom: 5px; } .m-field input, .m-field select { width: 100%; font-size: 15px; padding: 12px 13px; border: 1px solid var(--m-line-2); border-radius: 10px; background: #fff; color: var(--m-ink); font-family: inherit; -webkit-appearance: none; appearance: none; } .m-field input:focus, .m-field select:focus { outline: none; border-color: var(--m-brand); box-shadow: 0 0 0 3px rgba(11,154,74,.12); } .m-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; } .m-field-row .m-field { margin-bottom: 0; } .m-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px 14px; margin-top: 12px; border-radius: 12px; font-weight: 700; font-size: 15px; border: none; background: linear-gradient(180deg, var(--m-brand-2), var(--m-brand)); color: #fff; cursor: pointer; text-decoration: none; box-shadow: 0 10px 24px -8px rgba(11,154,74,.55); font-family: inherit; } .m-btn-primary:active { transform: translateY(1px); } .m-btn-primary[disabled] { opacity: .7; cursor: default; } .m-signup-fine { font-size: 11.5px; color: var(--m-muted); text-align: center; margin: 10px 0 0; line-height: 1.45; } /* --- role-picker (segmented control) --- */ .m-role-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; } .m-role-pill { padding: 11px 4px; border-radius: 10px; border: 1.5px solid var(--m-line); background: #fff; color: var(--m-ink); font-size: 12.5px; font-weight: 700; text-align: center; cursor: pointer; transition: all .12s; font-family: inherit; } .m-role-pill:hover { border-color: var(--m-line-2); } .m-role-pill.on { background: var(--m-brand-soft); border-color: var(--m-brand); color: var(--m-brand); } .m-role-note { font-size: 11.5px; color: var(--m-muted); text-align: center; margin: -6px 0 12px; line-height: 1.4; } .m-role-note a { color: var(--m-brand); text-decoration: none; font-weight: 600; } /* --- entity picker: fades in after role chosen --- */ .m-entity-block { display: none; } .m-entity-block.on { display: block; animation: mfadein .18s ease-out; } @keyframes mfadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .m-entity-help { font-size: 11.5px; color: var(--m-muted); margin: 0 0 6px; line-height: 1.4; } .m-entity-toggle { font-size: 12px; color: var(--m-brand); font-weight: 700; background: none; border: none; padding: 6px 0; cursor: pointer; font-family: inherit; text-align: left; } .m-entity-toggle:hover { text-decoration: underline; } .m-loading { font-size: 12px; color: var(--m-muted); font-style: italic; padding: 4px 0; } .m-signup-ok { text-align: center; padding: 12px 0 4px; } .m-signup-ok .big { font-size: 40px; color: var(--m-brand); line-height: 1; margin-bottom: 8px; } .m-signup-ok .t { font-size: 17px; font-weight: 800; margin-bottom: 6px; color: var(--m-ink); } .m-signup-ok .s { font-size: 13.5px; color: var(--m-muted); line-height: 1.5; } .m-signup-ok .s b { color: var(--m-ink); } .m-desktop-note { margin: 14px 0 0; padding: 12px 14px; background: var(--m-surface-soft); border: 1px solid var(--m-line); border-radius: 12px; display: flex; align-items: flex-start; gap: 10px; } .m-desktop-note .ico { width: 30px; height: 30px; border-radius: 8px; background: #fff; display: grid; place-items: center; color: var(--m-brand); flex: none; } .m-desktop-note .txt { font-size: 12.5px; color: var(--m-muted); line-height: 1.5; } .m-desktop-note .txt b { color: var(--m-ink); } /* ---------- CONTACT ---------- */ .m-contact { padding: 32px 20px 30px; border-top: 1px solid var(--m-line); text-align: center; } .m-contact h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.015em; } .m-contact p { font-size: 13.5px; color: var(--m-muted); margin: 0 0 20px; line-height: 1.55; } .m-people { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .m-person { background: var(--m-surface-soft); border: 1px solid var(--m-line); border-radius: 14px; padding: 14px 10px 14px; text-align: center; } .m-person .av { width: 60px; height: 60px; border-radius: 14px; display: grid !important; place-items: center; margin: 0 auto 10px !important; background: #fff; border: 1px solid var(--m-line); overflow: hidden; text-decoration: none; transition: transform .12s ease; } .m-person .av:active { transform: scale(.96); } .m-person .av img { max-width: 44px; max-height: 44px; width: auto; height: auto; object-fit: contain; display: block; } .m-person .av.brendan { background: #fff; } .m-person .av.phil { background: #fff; } .m-person .n { font-size: 13.5px; font-weight: 800; margin: 0; color: var(--m-ink); } .m-person .r { font-size: 11.5px; color: var(--m-muted); margin: 2px 0 8px; } .m-person a:not(.av) { font-size: 10.5px; color: var(--m-brand); font-weight: 700; text-decoration: none; display: block; margin-top: 3px; white-space: nowrap; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; } /* ---------- FOOTER ---------- */ .m-footer { padding: 22px 22px 28px; border-top: 1px solid var(--m-line); text-align: center; color: var(--m-muted); font-size: 11.5px; background: #f5f8f5; } .m-footer a { color: var(--m-brand); text-decoration: none; font-weight: 600; } .m-footer .foot-brand { font-weight: 700; color: var(--m-ink); font-size: 12.5px; margin-bottom: 6px; } .m-footer.m-footer-thin { padding: 16px 22px 22px; font-size: 11px; } /* ---------- SPLASH (every non-home route) ---------- */ .m-splash-page { display: flex; flex-direction: column; min-height: 100vh; } .m-splash { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 24px 40px; max-width: 420px; margin: 0 auto; width: 100%; } .m-splash-ill { width: 120px; height: 120px; border-radius: 50%; background: var(--m-brand-soft); display: grid; place-items: center; margin: 20px 0 24px; color: var(--m-brand); } .m-splash .m-eyebrow { margin-bottom: 8px; } .m-splash h2 { font-size: 26px; font-weight: 800; margin: 0 0 12px; letter-spacing: -.02em; line-height: 1.15; color: var(--m-ink); } .m-splash p { font-size: 14.5px; color: var(--m-muted); line-height: 1.55; margin: 0 0 22px; } .m-splash .m-btn-primary { max-width: 320px; } .m-splash-note { background: var(--m-surface-soft); border: 1px solid var(--m-line); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; color: var(--m-muted); line-height: 1.55; text-align: left; width: 100%; max-width: 320px; margin-top: 20px; } .m-splash-note b { color: var(--m-ink); } } /* end @media max-width: 720px */ /* Desktop: keep the mobile layer hidden (defence-in-depth) UNLESS forced via ?mforce=1 → mobile-shell.js adds html.is-mobile-force and we let the layer render at any width for debugging. */ @media (min-width: 901px) { .m-layer { display: none; } html.is-mobile-force .m-layer { display: block; } html.is-mobile-force .site-header, html.is-mobile-force .member-bar, html.is-mobile-force .member-subnav, html.is-mobile-force .site-footer { display: none !important; } }