/** * Footer Redesign (DONI-362) * * Refinements on top of the Site Studio component layout. * Structure is handled in the component YAML (cpt_site_footer). * * Target spec: Figma Patient_DSE_Website_2026 v13 (node 4001:408). */ /* macOS users with "Show scroll bars: Always" get a classic scrollbar that takes width. `100vw` (used by the footer full-bleed rule below) includes that scrollbar width, so the footer ends up ~15px wider than and causes a horizontal scrollbar. Devtools docking masks the bug because it changes the viewport math. `overflow-x: clip` absorbs the overshoot without creating a scroll container (preserves position: sticky). */ html { overflow-x: hidden; overflow-x: clip; } /* Desktop: force 3-column row layout with flex overrides */ @media (min-width: 1024px) { /* Footer is full-bleed so the grey background reaches the viewport edges at any width. has max-width: 1920px (set by Cohesion's master template), and at viewports wider than 1920 the browser gives auto margins so it ends up centered inside the viewport. `width: 100vw` alone would still anchor the footer to 's offset (the auto margin), leaving white space on the left and overflowing on the right. The `calc(50% - 50vw)` trick pulls the footer's left edge back to viewport x=0 regardless of how far the centered is offset. Content is capped on the inner row below so the inner layout is unchanged. */ footer[class*="cpt_site_footer"] { padding: 24px 0 !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; max-width: none !important; } footer[class*="cpt_site_footer"] > .coh-row { max-width: 1920px !important; margin-left: auto !important; margin-right: auto !important; } /* Neutralize Cohesion's responsive-grid negative gutter on the inner row. At widths where the parent .coh-row matches the viewport (≈1024–1320px), those negative left/right margins push the row past the viewport edge and produce a horizontal scroll. The footer columns below already set their own padding, so removing the gutter does not affect spacing. */ footer[class*="cpt_site_footer"] .coh-row-inner { margin-left: 0 !important; margin-right: 0 !important; } footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } /* Center column: take remaining space (capped at 920px), stack nav over copyright */ footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column:nth-child(2) { flex: 1 1 0% !important; max-width: 920px !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; } /* IONIS logo: scale up to Figma size (198 x 65) */ footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column:first-child .coh-image, footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column:first-child img { width: auto !important; height: 65px !important; max-width: 198px !important; margin: 0 !important; transform: none !important; left: auto !important; position: static !important; } } /* Social icons: push right, 16px gap, 24x24 icons */ footer[class*="cpt_site_footer"] .social-links-custom > .coh-container { justify-content: flex-end !important; gap: 16px !important; align-items: center !important; } footer[class*="cpt_site_footer"] .social-links-custom .coh-link { width: 24px !important; height: 24px !important; font-size: 24px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* --------------------------------------------------------------- NAV MENU: horizontal links separated by 4px circular dots --------------------------------------------------------------- */ /* The two direct children of the footer nav (menu list + copyright wysiwyg) sit flush against each other by default. Put 24px between them only — no padding above the first or below the last. The adjacent-sibling selector applies the margin only to children that have a preceding sibling, so the first child is untouched. */ footer[class*="cpt_site_footer"] nav.coh-ce-cpt_site_footer-1ccf0744 > * + * { margin-top: 24px !important; } footer[class*="cpt_site_footer"] .coh-menu-list-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 4px 16px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } footer[class*="cpt_site_footer"] .coh-menu-list-item { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; position: relative; } /* 4x4 circular dot separator (Figma: #d9d9d9) */ footer[class*="cpt_site_footer"] .coh-menu-list-item + .coh-menu-list-item::before { content: "" !important; display: inline-block !important; width: 4px !important; height: 4px !important; margin: 0 16px 0 0 !important; background-color: #d9d9d9 !important; border-radius: 999px !important; flex-shrink: 0; } footer[class*="cpt_site_footer"] .coh-menu-list-container a, footer[class*="cpt_site_footer"] .coh-menu-list-container a[class*="coh-link"], footer[class*="cpt_site_footer"] .coh-menu-list-container .coh-link { color: white !important; font-family: "Proxima Nova", proxima-nova, sans-serif !important; font-size: 18px !important; line-height: 28px !important; text-decoration: none !important; font-weight: 400 !important; white-space: nowrap !important; width: auto !important; height: auto !important; display: inline !important; padding: 0 !important; margin: 0 !important; vertical-align: middle !important; } footer[class*="cpt_site_footer"] .coh-menu-list-container a:hover { text-decoration: underline !important; opacity: 0.9 !important; } /* CCPA / privacy-options icon (sits before "Your Privacy Choices") */ footer[class*="cpt_site_footer"] .coh-style-ccpa-icon::before { width: 30px !important; height: 14px !important; background-size: contain !important; background-repeat: no-repeat !important; margin-right: 8px !important; vertical-align: middle !important; } /* --------------------------------------------------------------- COPYRIGHT --------------------------------------------------------------- */ footer[class*="cpt_site_footer"] .coh-wysiwyg p { font-family: "Proxima Nova", proxima-nova, sans-serif !important; font-size: 14px !important; line-height: 18px !important; text-align: center !important; margin: 0 !important; color: #ffffff !important; } /* --------------------------------------------------------------- TABLET & MOBILE: stacked layout (Figma node 4001:417, 375px) --------------------------------------------------------------- */ @media (max-width: 1023px) { /* Footer: full width with 24px internal padding (Figma p-24) */ footer[class*="cpt_site_footer"] { padding: 24px !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* Switch row to column, 40px between sections */ footer[class*="cpt_site_footer"] .coh-row-inner { flex-direction: column !important; align-items: center !important; padding: 0 !important; margin: 0 !important; gap: 40px !important; } /* All columns: full width, centered */ footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column { width: 100% !important; max-width: 100% !important; text-align: center !important; flex: 0 0 auto !important; padding: 0 !important; } /* Logo: center, 198x65 (same as desktop) */ footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column:first-child { display: flex !important; justify-content: center !important; } footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column:first-child .coh-image, footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column:first-child img { width: auto !important; height: 65px !important; max-width: 198px !important; margin: 0 !important; transform: none !important; left: auto !important; position: static !important; } /* Center column: stack nav and copyright with 40px gap */ footer[class*="cpt_site_footer"] .coh-row-inner > .coh-column:nth-child(2) { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 40px !important; } /* Social row: centered with 16px gap, 24x24 icons */ footer[class*="cpt_site_footer"] .social-links-custom > .coh-container { justify-content: center !important; gap: 16px !important; } footer[class*="cpt_site_footer"] .social-links-custom .coh-link { width: 24px !important; height: 24px !important; font-size: 24px !important; line-height: 1 !important; } /* Nav links: stack vertically with full-width 1px dividers */ footer[class*="cpt_site_footer"] .coh-menu-list-container { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; width: 100% !important; } footer[class*="cpt_site_footer"] .coh-menu-list-item { padding: 0 0 8px 0 !important; margin: 0 !important; border-bottom: 1px solid #898a8f !important; width: 100% !important; justify-content: center !important; } footer[class*="cpt_site_footer"] .coh-menu-list-item:last-child { border-bottom: none !important; padding-bottom: 0 !important; } /* Hide dot separators on mobile (replaced by full-width borders) */ footer[class*="cpt_site_footer"] .coh-menu-list-item + .coh-menu-list-item::before { display: none !important; } footer[class*="cpt_site_footer"] .coh-menu-list-container a, footer[class*="cpt_site_footer"] .coh-menu-list-container a[class*="coh-link"], footer[class*="cpt_site_footer"] .coh-menu-list-container .coh-link { font-family: "Proxima Nova", proxima-nova, sans-serif !important; font-size: 16px !important; line-height: 22px !important; text-decoration: underline !important; text-decoration-style: solid !important; color: #ffffff !important; font-weight: 400 !important; display: inline-block !important; text-align: center !important; white-space: normal !important; } }