/* Copy of the shared responsive layer with one addition: every [style*="…"] selector is duplicated for React's style serialization (name:value, no space after the colon) so the breakpoint overrides keep firing in the port. Generated — edit site-responsive.css at the project root and re-run. */ /* Wrapped in a cascade layer on purpose: in the HTML designs these rules competed against INLINE styles, so the non-!important ones lost. In the port those same styles are Tailwind utilities (unlayered), and unlayered rules beat any layered rule regardless of specificity — which reproduces the designs' precedence exactly. The !important overrides here still win, as before. */ @layer dnResponsive { /* ============================================================ Dolphin Nexus — shared responsive layer One source of truth for how every page adapts below 1120px. Loaded from each page's ; de-duped by URL. Breakpoints 1120 secondary nav CTA drops out 1080 two-up grids collapse, display type steps down 900 nav becomes a sheet; product mocks stop being scroll traps 720 phone gutters + compressed vertical rhythm 560 button rows stack, footer goes single-file ============================================================ */ /* ---------------- 1120 ---------------- */ @media (max-width: 1120px) { [data-nav-secondary] { display: none !important; } [data-nav-links] { gap: 20px !important; } } [data-tabs]::-webkit-scrollbar { display: none; } /* ---------------- 1080 ---------------- */ @media (max-width: 1080px) { section > div[style*="grid-template-columns"], section > div > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } section > div > div[data-window-body][style*="grid-template-columns"] { grid-template-columns: 212px minmax(0, 1fr) !important; } [data-window] { overflow-x: auto !important; } /* Only the grid mocks need a hard floor + horizontal scroll; the flex-column mock reflows. */ [data-window-body][style*="grid-template-columns"] { min-width: 940px; } [style*="gap:80px"], [style*="gap: 80px"] { gap: 40px !important; } [data-flow] > div:first-child { padding-right: 0 !important; } [data-flow] > div:last-child { padding-left: 0 !important; border-left: 0 !important; min-height: 0 !important; } footer > div > div[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } section > div > div[style*="repeat(3, 1fr)"], section > div > div[style*="repeat(3,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } section > div > div[style*="repeat(4, 1fr)"], section > div > div[style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } h1 { font-size: 44px !important; letter-spacing: -0.6px !important; } h2 { font-size: 32px !important; } blockquote { font-size: 26px !important; } } /* ---------------- 900 ---------------- */ @media (max-width: 900px) { [data-nav-inner] { padding-left: 20px !important; padding-right: 20px !important; gap: 16px !important; } [data-nav-links], [data-nav-talent] { display: none !important; } [data-nav-burger] { display: inline-flex !important; } [data-owns] { grid-template-columns: minmax(0, 1fr) !important; } [data-acc-head] { min-height: 44px; } [data-form-footer] { flex-wrap: wrap; row-gap: 12px; } [data-form-footer] > div { margin-left: auto; } [data-promo] { height: auto !important; min-height: 44px; padding: 9px 20px; flex-wrap: wrap; row-gap: 2px; text-align: center; } [data-promo] a { min-height: 44px; display: inline-flex; align-items: center; } [data-nav-inner] > a:first-child { min-height: 44px; } /* the product mock becomes a phone-shaped view of itself rather than a scroll trap. Scoped to the GRID mocks (sidebar + content): on those, first-child is the sidebar. Flex-column mocks (Build a Team) must keep every child. */ [data-window] { overflow: hidden !important; } [data-window-body][style*="grid-template-columns"] { display: block !important; min-width: 0 !important; } [data-window-body][style*="grid-template-columns"] > div:first-child { display: none !important; } [data-window-body][style*="grid-template-columns"] > div:last-child { padding: 16px !important; min-width: 0 !important; } [data-dash-share] { display: none !important; } [data-window] [style*="grid-template-columns"] { min-width: 0 !important; } [data-window] [style*="repeat(4, 1fr)"], [data-window] [style*="repeat(4,1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [style*="0.95fr 1fr"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.9fr) !important; } [style*="0.95fr 1fr"] > div:nth-child(2), [style*="0.95fr 1fr"] > div:nth-child(3), [style*="0.95fr 1fr"] > div:nth-child(5) { display: none !important; } /* explainer panels */ [style*="1.5fr 0.8fr 1.2fr 1fr"] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr) !important; } [style*="1.5fr 0.8fr 1.2fr 1fr"] > div:nth-child(3), [style*="1.5fr 0.8fr 1.2fr 1fr"] > div:nth-child(4) { display: none !important; } [data-hstep-panel] [style*="1.15fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } [data-hstep-panel] [style*="border-right: 1px solid rgb(238, 239, 241)"], [data-hstep-panel] [style*="border-right:1px solid rgb(238, 239, 241)"], [data-hstep-panel] [style*="border-right:1px solid #eeeff1"], [data-hstep-panel] [style*="border-right: 1px solid #eeeff1"] { border-right: 0 !important; border-bottom: 1px solid #eeeff1 !important; } [data-hstep-panel] [style*="repeat(3, 1fr)"], [data-hstep-panel] [style*="repeat(3,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; } /* horizontal strips inside mocks scroll instead of bleeding */ [data-tabs] { padding-left: 16px !important; padding-right: 16px !important; } /* Touch sizing turns on at the same breakpoint the nav does — an iPad in portrait navigates with the burger, so its footer targets must be thumb-sized too. */ footer a, footer [role="button"] { min-height: 44px; display: flex !important; align-items: center; } /* the 44px targets already supply the rhythm — the authored gap would double it */ footer > div > div[style*="grid-template-columns"] > div[style*="gap: 10px"], /* the 44px targets already supply the rhythm — the authored gap would double it */ footer > div > div[style*="grid-template-columns"] > div[style*="gap:10px"] { gap: 0 !important; } /* team-shape panels: description above the role grid, nothing clipped */ [data-panel] { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } } /* ---------------- 720: phone ---------------- */ @media (max-width: 720px) { /* Gutters. Exactly one of these carries the section's horizontal padding, so targeting the 1440 wrapper handles both authoring shapes without doubling. */ section[style*="max-width: 1440px"], section[style*="max-width:1440px"], section > div[style*="max-width: 1440px"], section > div[style*="max-width:1440px"], footer > div[style*="max-width: 1440px"], footer > div[style*="max-width:1440px"], /* Gutters. Exactly one of these carries the section's horizontal padding, so targeting the 1440 wrapper handles both authoring shapes without doubling. */ section[style*="max-width:1440px"], section[style*="max-width:1440px"], section > div[style*="max-width:1440px"], section > div[style*="max-width:1440px"], footer > div[style*="max-width:1440px"], footer > div[style*="max-width:1440px"], /* Gutters. Exactly one of these carries the section's horizontal padding, so targeting the 1440 wrapper handles both authoring shapes without doubling. */ section[style*="max-width: 1440px"], section[style*="max-width: 1440px"], section > div[style*="max-width: 1440px"], section > div[style*="max-width: 1440px"], footer > div[style*="max-width: 1440px"], footer > div[style*="max-width: 1440px"] { padding-left: 20px !important; padding-right: 20px !important; } /* Vertical rhythm — long-form values come after so they win over their own prefix. */ [style*="padding: 120px 40px"], /* Vertical rhythm — long-form values come after so they win over their own prefix. */ [style*="padding:120px 40px"], [style*="padding:120px 40px"], [style*="padding: 120px 40px"] { padding-top: 64px !important; padding-bottom: 64px !important; } [style*="padding: 100px 40px"], [style*="padding:100px 40px"] { padding-top: 56px !important; padding-bottom: 56px !important; } [style*="padding: 80px 40px"], [style*="padding:80px 40px"] { padding-top: 48px !important; padding-bottom: 48px !important; } [style*="padding: 100px 40px 0"], [style*="padding:100px 40px 0"], [style*="padding: 100px 40px 0px"], [style*="padding:100px 40px 0px"] { padding-top: 52px !important; padding-bottom: 0 !important; } [style*="padding: 80px 40px 0"], [style*="padding:80px 40px 0"], [style*="padding: 80px 40px 0px"], [style*="padding:80px 40px 0px"] { padding-top: 44px !important; padding-bottom: 0 !important; } [style*="padding: 60px 40px 0"], [style*="padding:60px 40px 0"], [style*="padding: 60px 40px 0px"], [style*="padding:60px 40px 0px"] { padding-top: 32px !important; padding-bottom: 0 !important; } [style*="padding: 80px 40px 120px"], [style*="padding:80px 40px 120px"] { padding-top: 48px !important; padding-bottom: 64px !important; } [style*="padding: 0px 40px"], [style*="padding:0px 40px"], [style*="padding: 0 40px"], [style*="padding:0 40px"] { padding-left: 20px !important; padding-right: 20px !important; } /* Type scale */ h1 { font-size: 34px !important; letter-spacing: -0.5px !important; } h2 { font-size: 26px !important; letter-spacing: -0.3px !important; } blockquote { font-size: 21px !important; } [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 34px !important; } [style*="font-size:40px"], [style*="font-size: 40px"] { font-size: 26px !important; } /* nothing on a phone reads at 10px */ [style*="font-size:10px"], /* nothing on a phone reads at 10px */ [style*="font-size: 10px"], [style*="font-size: 10px"], [style*="font-size:10px"] { font-size: 11px !important; } [style*="gap: 56px"], [style*="gap:56px"] { gap: 24px 28px !important; } [style*="gap: 48px"], [style*="gap:48px"] { gap: 28px !important; } [style*="gap:40px 48px"], [style*="gap: 40px 48px"] { gap: 24px 28px !important; } section > div > div[style*="repeat(3, 1fr)"], section > div > div[style*="repeat(3,1fr)"], section > div > div[style*="repeat(4, 1fr)"], section > div > div[style*="repeat(4,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; } [data-hstep-copy] { font-size: 21px !important; } [data-hstep] { font-size: 21px !important; padding-top: 8px !important; padding-bottom: 8px !important; } /* "Run at any scale": on a wide screen the curve rises behind the copy; on a phone that same curve cuts straight through it. Give the copy the top of the frame and let the curve own the bottom, so the two never overlap. */ [data-curve-layer] { top: auto !important; bottom: 0 !important; height: 270px !important; } [data-scale-body] { padding: 56px 0 320px !important; } [data-scale-body] [style*="gap: 40px 48px"], [data-scale-body] [style*="gap:40px 48px"] { gap: 28px 24px !important; } /* mocks: trade internal luxury padding for legible content width */ [data-window-body][style*="grid-template-columns"] > div:last-child { padding: 14px !important; } [data-window-body] { padding: 16px !important; } /* Footer: brand full-bleed, links in two readable columns with real tap targets */ footer > div > div[style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px 20px !important; } footer > div > div[style*="grid-template-columns"] > div:first-child { grid-column: 1 / -1; } footer > div > div:last-child { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-top: 40px !important; } } /* ---------------- 560: single file ---------------- */ @media (max-width: 560px) { /* the scope tag and the role name can't share one line on a phone */ [data-acc-tag] { display: none !important; } [data-acc-panel] p { padding-left: 14px !important; } /* Two nowrap buttons never fit a phone line — stack them full width. */ [data-stack] { flex-direction: column !important; align-items: stretch !important; width: 100%; } [data-stack] > * { justify-content: center !important; width: 100% !important; } [data-nav-expert] { display: none !important; } h1 { font-size: 30px !important; } [data-hstep-copy] { font-size: 19px !important; } [data-panel] > div:last-child { grid-template-columns: minmax(0, 1fr) !important; } [data-panel] [style*="gap: 32px"], [data-panel] [style*="gap:32px"] { gap: 20px !important; } [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 30px !important; } } /* ---------------- request modal on phones ---------------- */ @media (max-width: 560px) { [data-modal-root] { padding: 12px 12px 24px !important; align-items: flex-start !important; } [data-modal-body] { padding: 18px 18px 20px !important; } [data-modal-body] [style*="grid-template-columns: 1fr 1fr"], [data-modal-body] [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; } [data-modal-card] [style*="padding: 12px 28px 0"], [data-modal-card] [style*="padding:12px 28px 0"], [data-modal-card] [style*="padding: 12px 28px 0px"], [data-modal-card] [style*="padding:12px 28px 0px"] { padding-left: 18px !important; padding-right: 18px !important; } } @media (max-width: 420px) { footer > div > div[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; } } }