/* ============================================================ law25_section5_responsive.css FULL responsive control of the Law 25 obligations section (.how-to-setup5) so it matches the HIPAA / EU AI Act layout at every screen size — desktop, iPad Pro/Air/mini, phones. WHY THIS FILE EXISTS -------------------- law25_v2_desktop.css (loaded at min-width:769px) still defines the OLD .how-to-setup5 collage: .how-to-setup5 .law-25-promo-image-2-parent { width:731px; height:744px } .how-to-setup5 .law-25-promo-image-2 { top:143px; ... } (etc.) The new markup reuses those same class names, so on every screen >=769px the stale rules override new_law25_description.css and the section breaks (cramped column + overflowing collage). This file overrides all of that with !important and adds the missing 769–1200px tablet behaviour. ⚠ LOAD ORDER: add this as the LAST stylesheet in , with NO media attribute, e.g.: Place it AFTER law25_v2_desktop.css and new_law25_description.css. ============================================================ */ /* ============================================================ A) DESKTOP (>=1201px) — two columns, fixed collage canvas Re-asserts the correct 560×660 collage over v2's old 731×744. ============================================================ */ @media (min-width: 1201px) { .how-to-setup5 .law25-body { flex-direction: row !important; align-items: flex-start !important; justify-content: center !important; gap: 48px !important; } .how-to-setup5 .aiact-obligations-col { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; } /* Collage canvas — override v2's 731×744 */ .how-to-setup5 .law-25-promo-image-2-parent { position: relative !important; flex: 0 0 560px !important; width: 560px !important; height: 660px !important; max-width: 560px !important; margin: 0 !important; display: block !important; } .how-to-setup5 .law-25-promo-image-2 { position: absolute !important; top: 152px !important; left: 0 !important; width: 250px !important; height: 178px !important; border-radius: 7px !important; object-fit: cover !important; } .how-to-setup5 .smart-questionnaire-2 { position: absolute !important; top: 36px !important; left: 288px !important; width: 272px !important; height: 190px !important; border-radius: 7px !important; object-fit: cover !important; } .how-to-setup5 .smart-questionnaire-2-2 { position: absolute !important; top: 436px !important; left: 266px !important; width: 283px !important; height: 197px !important; border-radius: 7px !important; object-fit: cover !important; } .how-to-setup5 .text-area-to { position: absolute !important; top: 108px !important; left: 4px !important; width: 250px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 130% !important; color: #000319 !important; padding: 0 0 8px !important; } .how-to-setup5 .text-area-to2 { position: absolute !important; top: 0 !important; left: 292px !important; width: 268px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 130% !important; color: #000319 !important; padding: 0 0 8px !important; } .how-to-setup5 .text-area-to3 { position: absolute !important; top: 402px !important; left: 270px !important; width: 279px !important; font-size: 13px !important; font-weight: 600 !important; line-height: 130% !important; color: #000319 !important; padding: 0 0 8px !important; } .how-to-setup5 .rectangle-group { position: absolute !important; top: 348px !important; left: 214px !important; width: 124px !important; height: 44px !important; display: block !important; } .how-to-setup5 .group-child { position: absolute !important; inset: 0 !important; border-radius: 6px !important; background-color: #fff !important; border: 1px solid #dfe5ed !important; box-sizing: border-box !important; width: auto !important; height: auto !important; } .how-to-setup5 .image-30-icon { position: absolute !important; top: 13px !important; left: 6px !important; width: 112px !important; height: 16px !important; object-fit: cover !important; } .how-to-setup5 .group-item { position: absolute !important; top: 324px !important; left: 146px !important; width: 68px !important; height: 50px !important; border-radius: 12px !important; display: block !important; } .how-to-setup5 .group-inner { position: absolute !important; top: 404px !important; left: 257px !important; width: 23px !important; height: 122px !important; border-radius: 12px !important; display: block !important; } .how-to-setup5 .group-child2 { position: absolute !important; top: 218px !important; left: 339px !important; width: 68px !important; height: 153px !important; border-radius: 12px !important; object-fit: contain !important; display: block !important; } } /* ============================================================ B) TABLET + MOBILE (<=1200px) — STACK everything Covers iPad Pro (1024), iPad Air (820), iPad mini (768), small laptops and all phones. ============================================================ */ @media (max-width: 1200px) { /* Big centered title scales down so it stops dominating */ .how-to-setup5 .what-is-quebecs { font-size: clamp(26px, 4.5vw, 40px) !important; line-height: 1.2 !important; } /* Stack the two columns */ .how-to-setup5 .law25-body { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 40px !important; width: 100% !important; } .how-to-setup5 .aiact-obligations-col { width: 100% !important; flex: 1 1 auto !important; min-width: 0 !important; } .how-to-setup5 .aiact-card { width: 100% !important; } .how-to-setup5 .iso27-col-title { font-size: clamp(22px, 4vw, 30px) !important; } .how-to-setup5 .iso27-col-subtitle { font-size: 15px !important; } .how-to-setup5 .iso27-tooltip { width: 190px !important; } /* -------- Collage: kill absolute layout, stack fluidly -------- */ .how-to-setup5 .law-25-promo-image-2-parent { position: static !important; width: 100% !important; max-width: 560px !important; height: auto !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; flex: 0 0 auto !important; } /* Each label ABOVE the image it describes (DOM is image-first) */ .how-to-setup5 .text-area-to { order: 1 !important; } .how-to-setup5 .law-25-promo-image-2 { order: 2 !important; } .how-to-setup5 .text-area-to2 { order: 3 !important; } .how-to-setup5 .smart-questionnaire-2 { order: 4 !important; } .how-to-setup5 .text-area-to3 { order: 5 !important; } .how-to-setup5 .smart-questionnaire-2-2{ order: 6 !important; } /* Decorative blobs + logo pill only work in the absolute layout */ .how-to-setup5 .group-item, .how-to-setup5 .group-inner, .how-to-setup5 .group-child2, .how-to-setup5 .rectangle-group { display: none !important; } /* Labels: static, full width, heading spacing above each image */ .how-to-setup5 .text-area-to, .how-to-setup5 .text-area-to2, .how-to-setup5 .text-area-to3 { position: static !important; top: auto !important; left: auto !important; width: 100% !important; margin: 0 !important; padding: 24px 0 8px !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #000319 !important; } .how-to-setup5 .text-area-to { padding-top: 0 !important; } /* Images: static, full width, rounded */ .how-to-setup5 .law-25-promo-image-2, .how-to-setup5 .smart-questionnaire-2, .how-to-setup5 .smart-questionnaire-2-2 { position: static !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; border-radius: 10px !important; object-fit: cover !important; } } /* ============================================================ C) PADDING for tablet / small-laptop range (phones <=768px keep the base file's tighter padding) ============================================================ */ @media (min-width: 769px) and (max-width: 1200px) { .how-to-setup5 { padding-left: 40px !important; padding-right: 40px !important; } } /* ============================================================ D) SMALL PHONES ============================================================ */ @media (max-width: 480px) { .how-to-setup5 { padding-left: 16px !important; padding-right: 16px !important; } .how-to-setup5 .iso27-col-title { font-size: 21px !important; } .how-to-setup5 .iso27-tooltip { width: 170px !important; } }