/* ===================================================================== Phones. Loaded last on every page. Every rule here sits inside a max-width: 767px query, so tablets and laptops are untouched. 27 Oct 2026. 0 Foundations: typing, tapping, screen height, anchors 1 Header and menu 2 Footer 3 Rows that scroll sideways 4 Buttons with long labels 5 Home 6 Campuses 7 Campus pages 8 Lease space 9 Contact 10 Careers 11 Legal pages, thank-you page ===================================================================== */ @media (max-width: 767px) { /* the line every piece of text starts on: 30px in on a phone held upright; on a wider phone or small tablet (576px to 767px) the page's text column is 540px wide and centred, so the line moves in with it */ :root { --mg: 30px; } /* ---------- 0. Foundations ---------- */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { -webkit-tap-highlight-color: transparent; } /* a jump to a section stops below the header, not under it */ [id] { scroll-margin-top: 78px; } /* typing into a field never zooms the page on an iPhone (Safari zooms anything under 16px) */ input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; } /* heroes are sized to the screen the browser actually shows, so nothing at their foot sits under Safari's toolbar */ .banner { height: 100vh; height: 100svh; } .cp-hero, .cx-hero { height: 86vh; height: 86svh; } .v3-pagehero { height: 68vh; height: 68svh; } .v3-pagehero.tall { height: 78vh; height: 78svh; } /* a tap answers at once: buttons and links dim for the moment the finger is down */ a, button, summary, label, [role=button], [role=tab] { touch-action: manipulation; } .v3-box:active, .v3-btn:active, .v3-nb:active, .cp-chip:active, .rsp-btn:active { opacity: .7; } .lnk:active { opacity: .55; } /* long addresses break rather than push the page sideways */ a[href^="mailto:"] { overflow-wrap: anywhere; } /* text links keep their look, but the area that answers a tap reaches above the words */ .lnk { padding-top: 10px; margin-top: -10px; } /* round arrow buttons answer a tap a little beyond their outline */ .cx-galnav button, .v3-nb { position: relative; } .cx-galnav button::before, .v3-nb::before { content: ''; position: absolute; inset: -6px; } /* ---------- 1. Header and menu ---------- */ /* the menu button keeps its look but answers a full fingertip */ nav.header .hamb .menu { padding: 15px 4px 15px 14px !important; margin: -3px -4px -3px -2px; } /* the open menu carries the RSP mark, top left, level with the close button */ .menufix::before { content: ''; position: absolute; left: 28px; top: 34px; width: 112px; height: 26px; background: url(/assets/img/logo-k.svg) no-repeat left center / contain; z-index: 2; } .menufix .sociallinks.m-moved { position: static; margin: 10px 0 0 !important; display: flex; gap: 10px; } .menufix .sociallinks.m-moved a { width: 44px; height: 44px; margin: 0 !important; } .menufix .sociallinks:not(.m-moved) { visibility: hidden; } .v3-menufoot a { padding: 6px 0; } /* ---------- 2. Footer ---------- */ /* every link answers a full fingertip, with the same spacing as before */ .v3-fcol ul { margin: -11px 0 11px; } .v3-fcol li { margin: 0 0 -10px; } .v3-fcol li a { display: inline-block; padding: 11px 0; } .v3-fcol li .v3-fhours { margin: -8px 0 12px; } .v3-social a { width: 44px; height: 44px; } .v3-fbot ul { gap: 0 22px; } .v3-fbot li a { display: inline-block; padding: 12px 0; } .v3-fbot { padding-top: 12px; } .v3-fcol h6 a { display: inline-block; padding: 14px 0; margin: -14px 0; } /* ---------- 3. Rows that scroll sideways ---------- */ /* mobile.js marks rows that hold more than the screen shows; a soft edge says where more is waiting */ .m-fade { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); } .m-fade[data-at=mid] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 48px), transparent); } .m-fade[data-at=end] { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); } /* ---------- 4. Buttons with long labels ---------- */ /* on the narrowest phones a long label wraps inside its box instead of widening the page */ .v3-box { max-width: 100%; } /* ---------- 5. Home ---------- */ /* testimonials: the arrows frame the one voice playing, its name in full */ .v3-vindex { overflow: visible; } .v3-vtab:not(.on) { display: none; } .v3-vtab.on { flex: 1 1 auto; min-width: 0; } /* the hero buttons share the page's 30px line */ .homebanner .v3-bannerlinks { left: var(--mg); right: var(--mg); } /* About: the timeline cards and the founder's message start on the same line as everything else */ .ab-timetrack { --pad: var(--mg); padding-left: var(--mg); scroll-padding-left: var(--mg); } .ab-timetrack::after { flex: 0 0 14px; } .ab-tcard { flex-basis: calc(100vw - var(--mg) * 2 - 16px); scroll-margin-left: var(--mg); } .ab-foundertext { padding-left: var(--mg); padding-right: var(--mg); } /* ---------- 6. Campuses ---------- */ /* the start points and the map controls each run on one line, swiped sideways */ .cp-in { padding-left: var(--mg); padding-right: var(--mg); } .cp-mapwrap { grid-template-columns: minmax(0, 1fr); } .cp-mappanel { min-width: 0; padding-left: var(--mg); padding-right: var(--mg); } .cp-studypanel { padding-left: var(--mg); padding-right: var(--mg); } .cp-chips, .cp-layers { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(var(--mg) * -1); padding-right: var(--mg); } .cp-chips::-webkit-scrollbar, .cp-layers::-webkit-scrollbar { display: none; } .cp-chips .cp-chip, .cp-layers .cp-chip { flex: 0 0 auto; white-space: nowrap; } .cp-layers .cp-sep { flex: 0 0 1px; } /* Turning Point: the two buttons share one width */ .cp-tpacts { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .cp-tpacts .v3-box { width: 100%; } /* ---------- 7. Campus pages ---------- */ /* the site plan: block letters read at a glance; labels too small to read on a phone are left out, and the block list below the plan carries what they said */ .cx .v3-plan .pin text, .cx .v3-plan .road-label, .cx .v3-plan .north text, .cx .v3-plan .gate text { display: none; } .cx .v3-plan[aria-label*="enovation"] .block text, .cx .v3-plan[aria-label*="envision"] .block text { font-size: 40px; } .cx .v3-plan[aria-label*="enovation"] .block.avail text { font-size: 28px; } .cx .v3-plan .pin circle { r: 9; } /* the leasing card ends with one tap to call or to message on WhatsApp */ .v3-cbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: -4px 0 32px; } .v3-cbtns .v3-box { width: 100%; padding: 0 10px; } .v3-contactcard.light .v3-cbtns .v3-box.light { background: #fff; color: #000; border-color: #fff; backdrop-filter: none; } .v3-contactcard.light .v3-cbtns .v3-box.light.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } /* the request sheet: the phone number and WhatsApp answer a full fingertip */ .v3-sheetfoot a { display: inline-block; padding: 10px 0; margin: -10px 0; } /* everything written sits on the same line, 30px in: travel lists, photo captions, gallery strips */ .cx-travel { padding-left: var(--mg); padding-right: var(--mg); } .cx-filmtxt { padding-left: var(--mg); padding-right: var(--mg); } .cx-wide figcaption { padding-left: var(--mg); padding-right: var(--mg); } .v3-strip { padding: 0 var(--mg); scroll-padding: 0 var(--mg); gap: 12px; } .v3-shot { width: calc(100vw - var(--mg) * 2 - 12px); } /* ---------- 8. Lease space ---------- */ /* the words on a card and on the managed-office panel line up with every other section (30px in) */ .ls-cardbody { padding-left: 15px; padding-right: 15px; } .ls-mpanel { padding-left: var(--mg); padding-right: var(--mg); } .ls-fittext .v3-box, .ls-tilecta .v3-box { width: 100%; } /* the three figures on a card sit side by side without their labels touching */ .ls-cardbody .v3-figs { grid-template-columns: auto auto auto; justify-content: space-between; gap: 0 12px; } .ls-cardbody .v3-fig .l { letter-spacing: .06em; } /* on a phone the three facts read as rows, label on the left and figure on the right, so no figure breaks across lines */ .ls-cardbody .v3-figs { display: block; border-top: 1px solid var(--rule); margin-bottom: 26px; } .ls-cardbody .v3-fig { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--rule); } .ls-cardbody .v3-fig .n { font-size: 18px; white-space: nowrap; } .ls-cardbody .v3-fig .l { letter-spacing: .14em; } /* all three at a glance: the column heads have room to breathe */ .ls-glrow { grid-template-columns: minmax(0, 1fr) 62px 74px 74px; } .ls-glrow.head span { letter-spacing: .03em; } /* ---------- 9. Contact ---------- */ .ct-direct a { flex-wrap: wrap; gap: 6px 20px; } .ct-place { padding-left: var(--mg); padding-right: var(--mg); } /* ---------- 10. Careers ---------- */ /* Apply: one short bar per step, in a row; under them, the step you are on, in full, and how far along you are */ .cr-progress { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border-top: 0; padding: 0 0 36px; margin: 0; counter-reset: crst; } .cr-progress li { counter-increment: crst; display: block; border-top: 2px solid var(--rule); padding: 0; font-size: 0; transition: border-color .4s ease; } .cr-progress li .t { display: none; } .cr-progress li.now .t, .cr-progress:not(:has(li.now)) li:last-child .t { display: block; position: absolute; left: 0; right: 0; top: 14px; font-family: 'Gotham'; font-size: 14px; line-height: 1.3; color: var(--ink); } .cr-progress li.now .t::after, .cr-progress:not(:has(li.now)) li:last-child .t::after { content: counter(crst) ' of 4'; position: absolute; right: 0; top: 1px; font-family: 'Gotham-m'; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .cr-progress li.now { border-top-color: var(--ink); } .cr-progress li.done { border-top-color: var(--ink); } /* the steps stay in sight under the header while the form is filled in */ .cr-agrid { display: block; } .cr-aside { position: sticky; top: 66px; z-index: 4; background: #fff; margin: 0 -15px 28px; padding: 14px 15px 2px; box-shadow: 0 1px 0 var(--rule-soft); } .cr-sum { display: none !important; } /* Internships: the photograph first, then the four facts as one block of tiles, then a clearly separate list of what an intern could work on */ .cr-intern > .container { display: flex; flex-direction: column; } .cr-intern .cr-igrid { display: contents; } .cr-intern .cr-iimg { order: 1; margin: 0 0 28px; } .cr-intern .cr-ifacts { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); } .cr-intern .cr-ifact, .cr-intern .cr-ifact + .cr-ifact, .cr-intern .cr-ifact:nth-child(n+3) { padding: 18px 14px 22px 0; border-left: 0; border-bottom: 1px solid var(--rule); } .cr-intern .cr-ifact:nth-child(2n) { padding: 18px 0 22px 16px; border-left: 1px solid var(--rule); } .cr-intern .cr-ifact .n { margin-bottom: 10px; } .cr-intern .cr-ifact b { font-size: 18px; line-height: 1.25; margin-bottom: 8px; } .cr-intern .cr-ifact p { font-size: 14px; line-height: 1.55; } .cr-intern .cr-ifields { order: 3; margin-top: 56px; } .cr-intern .cr-ifields > .cr-label:first-child { font-family: 'Georgia' !important; font-size: 26px; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--ink); margin: 0 0 6px; } /* Where the work happens: the campus logos on the tabs are large enough to read */ .cr-ctab img { height: 22px; } /* ---------- 11. Legal pages, thank-you page ---------- */ /* the header sits solid black on pages without a photograph */ body:has(.content-pages) nav.header { background: #000 !important; } .content-pages { padding-top: 112px !important; } /* the page-not-found screen: a square button without an arrow, like every other */ .error-page .rsp-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 30px; border-radius: 0; border: 1px solid var(--ink); background: var(--ink); color: #fff; font-family: 'Gotham-m'; font-size: 12px; letter-spacing: .18em; } .error-page .rsp-btn i { display: none; } .error-page .h2 { font-family: 'Georgia' !important; font-size: 28px; } /* buttons carry no arrow, as everywhere else on the site */ .thanks-actions { flex-direction: column; align-items: stretch; } .thanks-actions .rsp-btn { display: flex; justify-content: center; align-items: center; height: 50px; font-family: 'Gotham-m'; font-size: 12px; letter-spacing: .18em; border-radius: 0; } .thanks-actions .rsp-btn i { display: none; } } /* wider phones and small tablets: the text column is 540px wide, centred */ @media (min-width: 576px) and (max-width: 767px) { :root { --mg: calc((100vw - 540px) / 2 + 30px); } } /* the narrowest phones (360px and below) */ @media (max-width: 374px) { .v3-box { white-space: normal; height: auto; min-height: 48px; padding-top: 14px; padding-bottom: 14px; line-height: 1.5; text-align: center; } .ls-cardbody .v3-fig .n { font-size: 17px; } }