/* ============================================================================ * responsive.css — SIL Website * * Responsive override layer. * * Architecture * ------------ * The page components in variation-a.jsx, variation-b.jsx and subpage-*.jsx * were originally designed at a fixed 1440 px width for the design canvas * (index.html). They are heavily styled with inline React style objects * (style={{ ... }}) so they remain directly editable in design review. * * This stylesheet adds responsive behavior on top of those inline styles, * activated by adding class="r" to the on the per-page HTML entry * files (startseite.html, hubspot.html, vertrieb.html, gtm.html, team.html, * ki.html). * * The design canvas (index.html) does NOT load this stylesheet — its * artboards stay at design-time 1440 sizing for review. * * Strategy * -------- * Because the inline styles win on specificity, this layer uses: * 1. Attribute selectors ([style*="font-size: 104px"], etc.) to match * the inline values produced by React. * 2. !important to override the inline declarations. * 3. A handful of explicit class hooks (.r-page, .r-hero-stack, * .r-only-mobile, .r-only-desktop, .r-burger, .r-drawer-*) * added to the JSX where attribute selectors are too fragile. * * When migrating to a real CSS architecture (e.g. CSS Modules, Tailwind, or * vanilla extract), the breakpoints and stack rules below are the spec to * port. See HANDOFF.md. * * Breakpoints * ----------- * Mobile: < 640 px * Tablet: 640 — 1024 px * Desktop: >= 1024 px * ============================================================================ */ /* ---------- Base reset ---------------------------------------------------- */ html, body { margin: 0; padding: 0; } body.r { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #F4F4F8; color: #0F1729; overflow-x: hidden; } body.r * { box-sizing: border-box; } body.r a { color: inherit; text-decoration: none; } body.r button { font: inherit; cursor: pointer; } body.r img, body.r svg { max-width: 100%; } /* The page roots get `r-page` so we can scope safely. */ body.r .r-page { width: 100%; min-height: 100vh; } /* ---------- Mobile/Desktop visibility helpers ----------------------------- */ .r-only-mobile { display: none !important; } .r-only-desktop { /* default: visible (uses element's natural display) */ } /* Generic hide-on-tablet-and-mobile (≤1024). For decorative bits inside * hero compositions that don't translate to small viewports. */ .r-hide-tablet { /* default: visible */ } @media (max-width: 1024px) { body.r .r-only-mobile { display: inline-flex !important; } body.r .r-only-desktop { display: none !important; } body.r .r-hide-tablet { display: none !important; } } /* ---------- Section paddings ---------------------------------------------- */ @media (max-width: 1024px) { body.r section[style*="padding: 160px 64px"], body.r section[style*="padding: 140px 64px"], body.r section[style*="padding: 120px 64px"], body.r section[style*="padding: 100px 64px"], body.r section[style*="padding: 80px 64px"], body.r footer[style*="padding: 72px 64px"] { padding-left: 40px !important; padding-right: 40px !important; } body.r section[style*="padding: 160px 64px"] { padding-top: 120px !important; padding-bottom: 80px !important; } body.r section[style*="padding: 140px 64px"] { padding-top: 100px !important; padding-bottom: 100px !important; } } @media (max-width: 640px) { body.r section, body.r footer { padding-left: 20px !important; padding-right: 20px !important; } body.r section[style*="padding: 160px"] { padding-top: 100px !important; padding-bottom: 56px !important; } body.r section[style*="padding: 140px"] { padding-top: 64px !important; padding-bottom: 64px !important; } body.r section[style*="padding: 120px"] { padding-top: 56px !important; padding-bottom: 56px !important; } body.r section[style*="padding: 100px"] { padding-top: 56px !important; padding-bottom: 56px !important; } body.r footer { padding-top: 56px !important; padding-bottom: 24px !important; } } /* ---------- Nav padding & inner spacing ----------------------------------- */ @media (max-width: 1024px) { body.r [style*="padding: 24px 64px"], body.r [style*="padding: 28px 56px"] { padding-left: 24px !important; padding-right: 24px !important; } } @media (max-width: 640px) { body.r [style*="padding: 24px 64px"], body.r [style*="padding: 28px 56px"] { padding: 16px 20px !important; } } /* ---------- Headline clamps ----------------------------------------------- */ /* These are inline font-size: NNpx values used across hero/section H1+H2. * Clamp them on tablet & mobile so they don't break the layout. */ @media (max-width: 1024px) { body.r [style*="font-size: 104px"] { font-size: clamp(44px, 7vw, 88px) !important; line-height: 1.02 !important; } body.r [style*="font-size: 96px"] { font-size: clamp(42px, 6.5vw, 80px) !important; line-height: 1.04 !important; } body.r [style*="font-size: 88px"] { font-size: clamp(40px, 6vw, 72px) !important; line-height: 1.04 !important; } body.r [style*="font-size: 80px"] { font-size: clamp(38px, 5.5vw, 68px) !important; line-height: 1.05 !important; } body.r [style*="font-size: 72px"] { font-size: clamp(36px, 5vw, 60px) !important; line-height: 1.06 !important; } body.r [style*="font-size: 64px"] { font-size: clamp(32px, 4.5vw, 56px) !important; line-height: 1.08 !important; } body.r [style*="font-size: 56px"] { font-size: clamp(28px, 4vw, 48px) !important; line-height: 1.1 !important; } } @media (max-width: 640px) { body.r [style*="font-size: 104px"] { font-size: 44px !important; } body.r [style*="font-size: 96px"] { font-size: 42px !important; } body.r [style*="font-size: 88px"] { font-size: 40px !important; } body.r [style*="font-size: 80px"] { font-size: 38px !important; } body.r [style*="font-size: 72px"] { font-size: 34px !important; } body.r [style*="font-size: 64px"] { font-size: 32px !important; } body.r [style*="font-size: 56px"] { font-size: 28px !important; } body.r [style*="font-size: 48px"] { font-size: 30px !important; line-height: 1.1 !important; } body.r [style*="font-size: 40px"] { font-size: 26px !important; } body.r [style*="font-size: 36px"] { font-size: 24px !important; } body.r [style*="font-size: 32px"] { font-size: 22px !important; } body.r [style*="font-size: 30px"] { font-size: 22px !important; } body.r [style*="font-size: 28px"] { font-size: 20px !important; } body.r [style*="font-size: 26px"] { font-size: 19px !important; } body.r [style*="font-size: 24px"] { font-size: 18px !important; } body.r [style*="font-size: 22px"] { font-size: 17px !important; } body.r [style*="font-size: 20px"] { font-size: 16px !important; } body.r [style*="font-size: 19px"] { font-size: 16px !important; } body.r [style*="font-size: 18px"] { font-size: 15px !important; } } /* ---------- Grid layouts -------------------------------------------------- */ /* All 2-col asymmetric & symmetric grids → single column on tablet/mobile. */ @media (max-width: 1024px) { body.r [style*="grid-template-columns: 1fr 1fr"], body.r [style*="grid-template-columns: 1fr 1fr 1fr"], body.r [style*="grid-template-columns: 1.05fr 1fr"], body.r [style*="grid-template-columns: 1fr 1.05fr"], body.r [style*="grid-template-columns: 1.1fr 1fr"], body.r [style*="grid-template-columns: 1fr 1.1fr"], body.r [style*="grid-template-columns: 1.15fr 1fr"], body.r [style*="grid-template-columns: 1fr 1.15fr"], body.r [style*="grid-template-columns: 1.2fr 1fr"], body.r [style*="grid-template-columns: 1fr 1.2fr"], body.r [style*="grid-template-columns: 1.4fr 1fr"], body.r [style*="grid-template-columns: 1fr 1.4fr"], body.r [style*="grid-template-columns: 1.5fr 1fr"], body.r [style*="grid-template-columns: 1fr 1.5fr"], body.r [style*="grid-template-columns: 2fr 1fr"], body.r [style*="grid-template-columns: 1fr 2fr"], body.r [style*="grid-template-columns: 0.85fr 1.15fr"], body.r [style*="grid-template-columns: 1.15fr 0.85fr"] { grid-template-columns: 1fr !important; gap: 40px !important; } /* Nav 3-col (logo · links · cta) collapses to 2-col (logo · burger) — */ body.r [style*="grid-template-columns: 1fr auto 1fr"], body.r [style*="grid-template-columns: 1fr auto"] { grid-template-columns: 1fr auto !important; gap: 16px !important; } /* Three-col w/ middle connector */ body.r [style*="grid-template-columns: 1fr 80px 1fr"] { grid-template-columns: 1fr !important; gap: 32px !important; } } /* 3 & 4-col card grids: → 2-col at tablet, 1-col at mobile. */ @media (max-width: 1024px) { body.r [style*="grid-template-columns: repeat(3, 1fr)"], body.r [style*="grid-template-columns: repeat(4, 1fr)"], body.r [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: repeat(2, 1fr) !important; } /* 1fr 1fr 1fr (literal three-col) → repeat(2,1fr) on tablet */ body.r [style*="grid-template-columns: 1fr 1fr 1fr"]:not([style*="1fr 1fr 1fr 1fr"]) { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 640px) { body.r [style*="grid-template-columns: repeat(2, 1fr)"], body.r [style*="grid-template-columns: repeat(3, 1fr)"], body.r [style*="grid-template-columns: repeat(4, 1fr)"], body.r [style*="grid-template-columns: 1fr 1fr 1fr"], body.r [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } } /* Comparison tables (`2fr repeat(5, 1fr)` & similar) — these are data tables * with too many columns for a phone. We let them scroll horizontally inside * a wrapping container rather than stacking. The wrapper is whatever ancestor * has `overflow: hidden` — we make the inline-styled table card scrollable. */ @media (max-width: 900px) { body.r [style*="grid-template-columns: 2fr repeat(5, 1fr)"], body.r [style*="grid-template-columns: 1.6fr repeat(5, 1fr) 80px"] { min-width: 720px !important; } /* Their containing card gets horizontal scroll. */ body.r section [style*="border-radius: 24px"]:has([style*="grid-template-columns: 2fr repeat(5, 1fr)"]), body.r section [style*="border-radius: 28px"]:has([style*="grid-template-columns: 2fr repeat(5, 1fr)"]) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } /* ---------- Fixed-width cards → fluid ------------------------------------ */ @media (max-width: 1024px) { body.r [style*="width: 520px"], body.r [style*="width: 500px"], body.r [style*="width: 480px"], body.r [style*="width: 460px"], body.r [style*="width: 440px"], body.r [style*="width: 420px"], body.r [style*="width: 400px"], body.r [style*="width: 380px"], body.r [style*="width: 360px"] { width: 100% !important; max-width: 480px !important; } } @media (max-width: 640px) { body.r [style*="width: 340px"], body.r [style*="width: 320px"], body.r [style*="width: 300px"], body.r [style*="width: 280px"] { width: 100% !important; max-width: 100% !important; } } /* max-width containers — let them breathe to viewport on small screens. */ @media (max-width: 1024px) { body.r [style*="max-width: 1280px"], body.r [style*="max-width: 1200px"], body.r [style*="max-width: 1080px"], body.r [style*="max-width: 1000px"], body.r [style*="max-width: 980px"], body.r [style*="max-width: 900px"] { max-width: 100% !important; } } /* ---------- Hero "floating composition" containers ----------------------- */ /* Heroes use `position: relative; height: 480/540/560/600/620` with * absolutely-positioned cards inside. On tablet/mobile we tag these * containers with .r-hero-stack so they collapse from absolute-floats * to a wrapping flex row. Decorative halos hide; rotations clear; cards * flow inline with center alignment. */ @media (max-width: 1024px) { body.r .r-hero-stack { height: auto !important; min-height: 0 !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important; gap: 20px !important; position: relative !important; } body.r .r-hero-stack > * { position: relative !important; /* keep nested absolute pins anchored */ transform: none !important; inset: auto !important; margin: 0 !important; max-width: 100% !important; white-space: normal; } /* Keep large display numbers (badges like "6 Monate") on one line so * they don't wrap and overlap their own caption. */ body.r .r-hero-stack [style*="font-size: 44px"], body.r .r-hero-stack [style*="font-size: 40px"] { white-space: nowrap !important; } /* Pills inside hero compositions (name labels on portraits, caption * pills) — stay on one line. */ body.r .r-hero-stack [style*="border-radius: 999px"] { white-space: nowrap !important; } body.r .r-hero-stack [style*="border-radius: 999px"] > * { flex-shrink: 0 !important; } /* Decorative halos inside hero compositions — radial blurs serve as * backgrounds, not standalone elements. Hide them when their parent * collapses. */ body.r .r-hero-stack > [style*="radial-gradient"][style*="filter: blur"], body.r .r-hero-stack > [style*="radial-gradient"][style*="pointer-events: none"] { display: none !important; } } /* ---------- Stat strips / inline metric rows ----------------------------- */ @media (max-width: 640px) { body.r [style*="display: flex"][style*="gap: 28px"][style*="border-top"], body.r [style*="display: flex"][style*="gap: 48px"][style*="border-top"], body.r [style*="display: flex"][style*="gap: 56px"][style*="border-top"] { flex-wrap: wrap !important; gap: 20px 32px !important; } } /* CTA button rows should wrap on narrow screens. */ @media (max-width: 640px) { body.r [style*="display: flex"][style*="gap: 16px"][style*="margin-top: 40"], body.r [style*="display: flex"][style*="gap: 12px"][style*="margin-top: 40"] { flex-wrap: wrap !important; } } /* ---------- Burger button + mobile drawer -------------------------------- */ .r-burger { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(15, 23, 41, 0.12); color: #0F1729; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); align-items: center; justify-content: center; padding: 0; cursor: pointer; } .r-burger svg { display: block; } .r-drawer { position: fixed; inset: 0; background: rgba(14, 26, 51, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); z-index: 100; padding: 20px; display: flex; flex-direction: column; color: #F2F2F7; } .r-drawer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; } .r-drawer-close { width: 44px; height: 44px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .r-drawer-links { display: flex; flex-direction: column; gap: 0; } .r-drawer-links a { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #F2F2F7; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: block; } .r-drawer-cta { margin-top: auto; display: flex; flex-direction: column; gap: 12px; } .r-drawer-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(242, 242, 247, 0.5); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 16px; } /* Lock scroll while drawer is open. */ body.r-no-scroll { overflow: hidden; }