/* ───────────────────────────────────────────────────────────────────────────── Accordion Container ───────────────────────────────────────────────────────────────────────────── */ .Accordion-module_accordion__p9Q-k { display: flex; flex-direction: column; width: 100%; } /* ───────────────────────────────────────────────────────────────────────────── Item (each collapsible panel) ───────────────────────────────────────────────────────────────────────────── */ .Accordion-module_item__9WgNe { border-bottom: 1px solid var(--color-border-default); } .Accordion-module_item__9WgNe:last-child { border-bottom: none; } /* ───────────────────────────────────────────────────────────────────────────── Heading (h2 wrapper) ───────────────────────────────────────────────────────────────────────────── */ .Accordion-module_heading__n3twI { margin: 0; } /* ───────────────────────────────────────────────────────────────────────────── Header Button (inside h2) ───────────────────────────────────────────────────────────────────────────── */ .Accordion-module_header__W7xpB { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--spacing-3); padding: var(--spacing-4) 0; border: none; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; transition: color var(--duration-15) var(--ease-smooth); } .Accordion-module_header__W7xpB:hover { color: var(--color-active); } /* ───────────────────────────────────────────────────────────────────────────── Chevron Icon ───────────────────────────────────────────────────────────────────────────── */ .Accordion-module_chevron__8JLen { flex-shrink: 0; width: var(--spacing-4); height: var(--spacing-4); transition: transform var(--duration-20) var(--ease-smooth); } .Accordion-module_chevronOpen__2D9aM { transform: rotate(180deg); } /* ───────────────────────────────────────────────────────────────────────────── Content Panel (Expandable via grid-template-rows animation) ───────────────────────────────────────────────────────────────────────────── */ .Accordion-module_content__2AtZB { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows var(--duration-25) var(--ease-smooth); } .Accordion-module_contentOpen__A0Pds { grid-template-rows: 1fr; } .Accordion-module_contentInner__PcC3V { min-height: 0; padding-bottom: 0; transition: padding-bottom var(--duration-25) var(--ease-smooth); } .Accordion-module_contentOpen__A0Pds .Accordion-module_contentInner__PcC3V { padding-bottom: var(--spacing-4); } /* * RichTextRenderer CSS Module * * Scoped styles for Lexical rich text content. * Each class is applied directly to HTML elements via renderLexicalContent(). */ /* ========================= CONTAINER ========================= */ .RichTextRenderer-module_container__MYPS- { /* Inherits: font-family, font-size, line-height from body */ color: var(--color-text-secondary); } /* ========================= HEADINGS ========================= */ /* Remove top margin for first heading in content */ :is(.RichTextRenderer-module_h1__SS-0v, .RichTextRenderer-module_h2__32IAE, .RichTextRenderer-module_h3__jWhoH, .RichTextRenderer-module_h4__QooSV, .RichTextRenderer-module_h5__-ouZZ, .RichTextRenderer-module_h6__o5Y6o, .RichTextRenderer-module_p__FJ4oi):first-child { margin-top: 0; } :is(.RichTextRenderer-module_h1__SS-0v, .RichTextRenderer-module_h2__32IAE, .RichTextRenderer-module_h3__jWhoH, .RichTextRenderer-module_h4__QooSV, .RichTextRenderer-module_h5__-ouZZ, .RichTextRenderer-module_h6__o5Y6o, .RichTextRenderer-module_p__FJ4oi):last-child { margin-bottom: var(--spacing-2); } :is(.RichTextRenderer-module_p__FJ4oi, .RichTextRenderer-module_ul__NkJAr, .RichTextRenderer-module_ol__AdWa2):has(+ :is(.RichTextRenderer-module_h1__SS-0v, .RichTextRenderer-module_h2__32IAE, .RichTextRenderer-module_h3__jWhoH, .RichTextRenderer-module_h4__QooSV, .RichTextRenderer-module_h5__-ouZZ, .RichTextRenderer-module_h6__o5Y6o, .RichTextRenderer-module_code__yyw57, .RichTextRenderer-module_blockquote__scEDW, .RichTextRenderer-module_figure__42TK7, .RichTextRenderer-module_pre__OaWMp)) { margin-bottom: var(--spacing-8); } .RichTextRenderer-module_p__FJ4oi:has(+ :is(.RichTextRenderer-module_ul__NkJAr, .RichTextRenderer-module_ol__AdWa2)) { margin-bottom: var(--spacing-2); } .RichTextRenderer-module_h1__SS-0v { font-family: var(--font-headline); font-weight: var(--font-weight-regular); font-size: var(--text-h1); line-height: var(--text-h1-line-height); color: var(--color-text-secondary); margin-bottom: var(--spacing-6); } .RichTextRenderer-module_h2__32IAE { font-family: var(--font-headline); font-weight: var(--font-weight-regular); font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--color-text-secondary); margin-top: var(--spacing-8); margin-bottom: var(--spacing-4); } .RichTextRenderer-module_h3__jWhoH { font-family: var(--font-headline); font-weight: var(--font-weight-bold); font-size: var(--text-h3); line-height: var(--text-h3-line-height); color: var(--color-text-secondary); margin-top: var(--spacing-6); margin-bottom: var(--spacing-2_5); } .RichTextRenderer-module_h4__QooSV { font-family: var(--font-headline); font-weight: var(--font-weight-regular); font-size: var(--text-h4); line-height: var(--text-h4-line-height); color: var(--color-text-secondary); margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); } .RichTextRenderer-module_h5__-ouZZ { font-family: var(--font-headline); font-weight: var(--font-weight-regular); font-size: var(--text-h5); line-height: var(--text-h5-line-height); color: var(--color-text-secondary); margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); } .RichTextRenderer-module_h6__o5Y6o { font-family: var(--font-headline); font-weight: var(--font-weight-regular); font-size: var(--text-h6); line-height: var(--text-h6-line-height); color: var(--color-text-secondary); margin-top: var(--spacing-4); margin-bottom: var(--spacing-2); } /* ========================= PARAGRAPHS ========================= */ .RichTextRenderer-module_p__FJ4oi { margin-bottom: var(--spacing-5); line-height: var(--text-body-line-height); } /* ========================= LINKS ========================= */ .RichTextRenderer-module_a__Qcpd8 { color: var(--color-active); text-decoration: underline; transition: color var(--duration-20); } .RichTextRenderer-module_a__Qcpd8:hover { color: var(--color-active); } /* ========================= LISTS ========================= */ .RichTextRenderer-module_ul__NkJAr { list-style-type: disc; } .RichTextRenderer-module_ol__AdWa2 { list-style-type: decimal; } .RichTextRenderer-module_ul__NkJAr, .RichTextRenderer-module_ol__AdWa2 { margin-left: var(--spacing-8); margin-bottom: var(--spacing-4); } .RichTextRenderer-module_li__GM0OU { margin-bottom: 0; } /* ========================= TEXT FORMATTING ========================= */ .RichTextRenderer-module_strong__mAUHO { font-weight: var(--font-weight-semibold); } .RichTextRenderer-module_em__e8Rb- { font-style: italic; } .RichTextRenderer-module_s__mYtTI { text-decoration: line-through; } .RichTextRenderer-module_u__5DVcY { text-decoration: underline; } .RichTextRenderer-module_code__yyw57 { font-family: monospace; background-color: var(--color-placeholder-background); padding: 0.125em 0.25em; border-radius: var(--radius-sm); font-size: 0.9em; } .RichTextRenderer-module_sub__1gFaQ { vertical-align: sub; font-size: 0.75em; } .RichTextRenderer-module_sup__u5I6V { vertical-align: super; font-size: 0.75em; } /* Headlines with bold/strong — override to regular weight */ .RichTextRenderer-module_h1__SS-0v .RichTextRenderer-module_strong__mAUHO, .RichTextRenderer-module_h1__SS-0v .RichTextRenderer-module_b__M6OOk, .RichTextRenderer-module_h2__32IAE .RichTextRenderer-module_strong__mAUHO, .RichTextRenderer-module_h2__32IAE .RichTextRenderer-module_b__M6OOk, .RichTextRenderer-module_h3__jWhoH .RichTextRenderer-module_strong__mAUHO, .RichTextRenderer-module_h3__jWhoH .RichTextRenderer-module_b__M6OOk, .RichTextRenderer-module_h4__QooSV .RichTextRenderer-module_strong__mAUHO, .RichTextRenderer-module_h4__QooSV .RichTextRenderer-module_b__M6OOk, .RichTextRenderer-module_h5__-ouZZ .RichTextRenderer-module_strong__mAUHO, .RichTextRenderer-module_h5__-ouZZ .RichTextRenderer-module_b__M6OOk, .RichTextRenderer-module_h6__o5Y6o .RichTextRenderer-module_strong__mAUHO, .RichTextRenderer-module_h6__o5Y6o .RichTextRenderer-module_b__M6OOk { font-weight: var(--font-weight-regular); } /* ========================= HORIZONTAL RULE ========================= */ .RichTextRenderer-module_hr__mB9dL { border: none; border-top: 2px solid var(--color-gray-700); margin: var(--spacing-6) 0; } /* ========================= BLOCKQUOTES ========================= */ .RichTextRenderer-module_blockquote__scEDW { border-left: 4px solid var(--color-active); padding-left: var(--spacing-4); margin-left: 0; margin-right: 0; margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); font-style: italic; color: var(--color-text-secondary); } /* ========================= TABLES ========================= */ .RichTextRenderer-module_tableWrapper__h-oIc { overflow: hidden; overflow-x: auto; margin: var(--spacing-6) 0; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .RichTextRenderer-module_table__mtnOI { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: 1.5; } .RichTextRenderer-module_th__GCIU5, .RichTextRenderer-module_td__TOEOj { padding: var(--spacing-2_5) var(--spacing-4); text-align: left; vertical-align: top; border: 1px solid var(--color-border); } /* Header row cells — strong background */ .RichTextRenderer-module_table__mtnOI thead .RichTextRenderer-module_th__GCIU5 { background-color: var(--color-surface-hover); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } /* Column-header cells in data rows — subtle, no heavy background */ .RichTextRenderer-module_table__mtnOI tbody .RichTextRenderer-module_th__GCIU5 { font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); background-color: transparent; } .RichTextRenderer-module_td__TOEOj { color: var(--color-text-muted); } /* Zebra striping for data rows */ .RichTextRenderer-module_table__mtnOI tbody .RichTextRenderer-module_tr__GRjI4:nth-child(even) .RichTextRenderer-module_td__TOEOj { background-color: var(--color-placeholder-background); } /* Collapse double-borders at wrapper edges */ .RichTextRenderer-module_table__mtnOI thead .RichTextRenderer-module_tr__GRjI4:first-child .RichTextRenderer-module_th__GCIU5, .RichTextRenderer-module_table__mtnOI thead .RichTextRenderer-module_tr__GRjI4:first-child .RichTextRenderer-module_td__TOEOj { border-top: none; } .RichTextRenderer-module_table__mtnOI .RichTextRenderer-module_tr__GRjI4:last-child .RichTextRenderer-module_th__GCIU5, .RichTextRenderer-module_table__mtnOI .RichTextRenderer-module_tr__GRjI4:last-child .RichTextRenderer-module_td__TOEOj { border-bottom: none; } .RichTextRenderer-module_table__mtnOI .RichTextRenderer-module_tr__GRjI4 .RichTextRenderer-module_th__GCIU5:first-child, .RichTextRenderer-module_table__mtnOI .RichTextRenderer-module_tr__GRjI4 .RichTextRenderer-module_td__TOEOj:first-child { border-left: none; } .RichTextRenderer-module_table__mtnOI .RichTextRenderer-module_tr__GRjI4 .RichTextRenderer-module_th__GCIU5:last-child, .RichTextRenderer-module_table__mtnOI .RichTextRenderer-module_tr__GRjI4 .RichTextRenderer-module_td__TOEOj:last-child { border-right: none; } /* ========================= CODE BLOCKS ========================= */ .RichTextRenderer-module_pre__OaWMp { background-color: var(--color-placeholder-background); padding: var(--spacing-4); border-radius: var(--radius-md); overflow-x: auto; margin: var(--spacing-4) 0; } .RichTextRenderer-module_pre__OaWMp code { background: none; padding: 0; font-size: var(--text-small); line-height: 1.5; } /* ========================= MEDIA - IMAGES ========================= */ .RichTextRenderer-module_img__ZW2Fy { display: block; max-width: 100%; height: auto; margin: var(--spacing-6) 0; border-radius: var(--radius-md); } /* Image size variants (controlled from CMS) */ .RichTextRenderer-module_imgSmall__vTaEh { max-width: 25%; } .RichTextRenderer-module_imgMedium__Cz-6O { max-width: 50%; } .RichTextRenderer-module_imgLarge__vG6MS { max-width: 75%; } .RichTextRenderer-module_imgFull__FQ1sG { max-width: 100%; width: 100%; } /* ========================= MEDIA - FIGURES ========================= */ .RichTextRenderer-module_figure__42TK7 { margin: var(--spacing-6) 0; padding: 0; } .RichTextRenderer-module_figure__42TK7 img { display: block; height: auto; border-radius: var(--radius-md); /* Note: max-width is controlled by .imgSmall/.imgMedium/.imgLarge/.imgFull classes */ } .RichTextRenderer-module_figcaption__iPdPa { margin-top: var(--spacing-2); font-size: var(--text-small); color: var(--color-text-muted); line-height: 1.5; } .RichTextRenderer-module_figcaption__iPdPa p { margin: 0; } /* ========================= VARIANT: LIGHT ON DARK ========================= */ .RichTextRenderer-module_lightOnDark__VlopS { color: var(--color-white); } .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h1__SS-0v, .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h2__32IAE, .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h3__jWhoH, .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h4__QooSV, .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h5__-ouZZ, .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h6__o5Y6o { color: var(--color-white); } /* Article title (h1) in dark card: bold + tight spacing to date */ .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h1__SS-0v { font-weight: var(--font-weight-bold); color: var(--color-text-primary); margin-bottom: var(--spacing-2); } /* Article date (h6) in dark card: muted, no top margin */ .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h6__o5Y6o { color: var(--color-text-muted); margin-top: 0; } @media (max-width: 767px) { .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_h1__SS-0v { font-size: var(--text-h2); line-height: var(--text-h2-line-height); } } .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_a__Qcpd8 { color: var(--color-active); } .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_blockquote__scEDW { color: var(--color-white); border-left-color: var(--color-on-surface); } .RichTextRenderer-module_lightOnDark__VlopS .RichTextRenderer-module_figcaption__iPdPa { color: color-mix(in srgb, var(--color-white) 70%, transparent); } /* ========================= VARIANT: ON ACCENT For text on colored backgrounds (station colors, CMS custom colors). Uses fixed light text that does NOT change with theme mode. ========================= */ .RichTextRenderer-module_onAccent__5VlkA { color: var(--color-text-on-accent); } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_h1__SS-0v, .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_h2__32IAE, .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_h3__jWhoH, .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_h4__QooSV, .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_h5__-ouZZ, .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_h6__o5Y6o { color: var(--color-text-on-accent); } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_p__FJ4oi { color: var(--color-text-on-accent); } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_a__Qcpd8 { color: var(--color-text-on-accent); text-decoration: underline; } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_a__Qcpd8:hover { opacity: 0.85; } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_blockquote__scEDW { color: var(--color-text-on-accent); border-left-color: color-mix(in srgb, var(--color-white) 50%, transparent); } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_figcaption__iPdPa { color: color-mix(in srgb, var(--color-white) 70%, transparent); } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_code__yyw57 { background-color: color-mix(in srgb, var(--color-black) 20%, transparent); color: var(--color-text-on-accent); } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_pre__OaWMp { background-color: color-mix(in srgb, var(--color-black) 20%, transparent); } .RichTextRenderer-module_onAccent__5VlkA .RichTextRenderer-module_pre__OaWMp code { color: var(--color-text-on-accent); } /* ========================= VARIANT: COMPACT ========================= */ .RichTextRenderer-module_compact__-xpe- .RichTextRenderer-module_p__FJ4oi { margin-bottom: var(--spacing-3); } .RichTextRenderer-module_compact__-xpe- .RichTextRenderer-module_h2__32IAE { margin-top: var(--spacing-5); margin-bottom: var(--spacing-2); } .RichTextRenderer-module_compact__-xpe- .RichTextRenderer-module_ul__NkJAr, .RichTextRenderer-module_compact__-xpe- .RichTextRenderer-module_ol__AdWa2 { margin-bottom: var(--spacing-2); } /* ========================= VARIANT: HERO ========================= */ .RichTextRenderer-module_hero__LwPcQ .RichTextRenderer-module_h1__SS-0v { font-size: var(--text-h1); line-height: var(--text-h1-line-height); } .RichTextRenderer-module_hero__LwPcQ .RichTextRenderer-module_p__FJ4oi { font-size: var(--text-body); line-height: var(--text-body-line-height); } /* ========================= SOCIAL EMBEDS Note: These use :global() because the classes are generated by renderSocialEmbed() in lexical.ts ========================= */ .RichTextRenderer-module_container__MYPS- .social-embed { margin: var(--spacing-6) 0; max-width: 100%; } .RichTextRenderer-module_container__MYPS- .social-embed iframe { max-width: 100%; } /* YouTube responsive wrapper */ .RichTextRenderer-module_container__MYPS- .social-embed--youtube { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; } .RichTextRenderer-module_container__MYPS- .social-embed--youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Instagram embeds */ .RichTextRenderer-module_container__MYPS- .social-embed--instagram { display: flex; justify-content: center; } .RichTextRenderer-module_container__MYPS- .social-embed--instagram .instagram-media { margin: 0 auto !important; } /* Twitter/X embeds */ .RichTextRenderer-module_container__MYPS- .social-embed--twitter { display: flex; justify-content: center; } .RichTextRenderer-module_container__MYPS- .social-embed--twitter .twitter-tweet { margin: 0 auto !important; } /* TikTok embeds */ .RichTextRenderer-module_container__MYPS- .social-embed--tiktok { display: flex; justify-content: center; } /* Facebook embeds */ .RichTextRenderer-module_container__MYPS- .social-embed--facebook { display: flex; justify-content: center; } /* Spotify embeds */ .RichTextRenderer-module_container__MYPS- .social-embed--spotify { max-width: 400px; } /* LinkedIn embeds */ .RichTextRenderer-module_container__MYPS- .social-embed--linkedin { display: flex; justify-content: center; } .RichTextRenderer-module_container__MYPS- .social-embed--linkedin iframe { max-width: 100%; } /* Fallback link styling */ .RichTextRenderer-module_container__MYPS- .social-embed__link { display: inline-flex; align-items: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); background: var(--color-surface-hover); border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; transition: background-color var(--duration-20); } .RichTextRenderer-module_container__MYPS- .social-embed__link:hover { background: var(--color-surface-hover); text-decoration: none; } /* Mobile adjustments for social embeds */ @media (max-width: 767px) { .RichTextRenderer-module_container__MYPS- .social-embed--facebook iframe, .RichTextRenderer-module_container__MYPS- .social-embed--linkedin iframe { width: 100%; max-width: 100%; } } /* ========================= GDPR CONSENT OVERLAY Note: These use :global() because the classes are generated by renderConsentOverlay() in lexical.ts ========================= */ .RichTextRenderer-module_container__MYPS- .embed-consent-overlay { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 280px; padding: var(--spacing-6); margin: var(--spacing-6) 0; background-color: var(--color-black-light); border-radius: var(--radius-lg); text-align: center; font-family: var(--font-body); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__icon-wrapper { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--radius-lg); margin-bottom: var(--spacing-4); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__icon { display: flex; align-items: center; justify-content: center; color: var(--color-text-on-accent); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__icon svg { width: 32px; height: 32px; } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__title { font-family: var(--font-headline); font-size: var(--text-h4); font-weight: var(--font-weight-regular); color: var(--color-white) !important; margin: 0 0 var(--spacing-2) 0; line-height: var(--text-h4-line-height); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__description { font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--font-weight-regular); color: color-mix(in srgb, var(--color-white) 70%, transparent); max-width: 360px; margin: 0 0 var(--spacing-3) 0; line-height: 1.5; } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__privacy-link { display: inline-block; font-family: var(--font-body); font-size: var(--text-small); font-weight: var(--font-weight-regular); color: color-mix(in srgb, var(--color-white) 70%, transparent); text-decoration: underline; text-underline-offset: 2px; margin-bottom: var(--spacing-5); transition: color var(--duration-20) ease; } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__privacy-link:hover { color: var(--color-text-on-accent); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__actions { display: flex; flex-direction: row; gap: var(--spacing-3); width: 100%; max-width: 480px; justify-content: center; } /* Base button — matches Button component (.button) */ .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); border: none; border-radius: var(--radius-lg); cursor: pointer; font-size: var(--text-h6); font-weight: var(--font-weight-semibold); line-height: var(--text-h6-line-height); transition: background-color var(--duration-20) ease, transform var(--duration-15) ease, opacity var(--duration-20) ease; } /* Primary — matches Button "onAccent" variant (light bg on dark surface) */ .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button--primary { background-color: var(--color-text-on-accent); color: var(--color-text-persistent-dark); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button--primary:hover { background-color: color-mix(in srgb, var(--color-text-on-accent) 85%, black); transform: scale(1.02); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button--primary:active { transform: scale(0.98); } /* Secondary — matches Button "ghostOnDark" variant (transparent with light border) */ .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button--secondary { background-color: transparent; color: var(--color-text-on-accent); border: 1px solid var(--color-text-on-accent); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button--secondary:hover { background-color: color-mix(in srgb, var(--color-white) 10%, transparent); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button--secondary:active { transform: scale(0.98); } /* Hide the actual embed content initially */ .RichTextRenderer-module_container__MYPS- .embed-consent-wrapper .embed-consent-content { display: none; } .RichTextRenderer-module_container__MYPS- .embed-consent-wrapper.consent-given .embed-consent-overlay { display: none; } .RichTextRenderer-module_container__MYPS- .embed-consent-wrapper.consent-given .embed-consent-content { display: block; } /* Responsive adjustments for consent overlay */ @media (max-width: 767px) { .RichTextRenderer-module_container__MYPS- .embed-consent-overlay { min-height: 240px; padding: var(--spacing-5); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__icon-wrapper { width: 56px; height: 56px; border-radius: var(--radius-lg); margin-bottom: var(--spacing-3); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__icon svg { width: 28px; height: 28px; } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__title { font-size: var(--text-h5); line-height: var(--text-h5-line-height); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__description { font-size: var(--text-small); max-width: 280px; } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__actions { flex-direction: column; gap: var(--spacing-2); } .RichTextRenderer-module_container__MYPS- .embed-consent-overlay__button { width: 100%; } } /* Full-width wrapper — handles centering and container padding */ .AccordionBlock-module_blockWrapper__RT4d- { width: 100%; max-width: var(--max-width-container); margin-left: auto; margin-right: auto; padding-left: var(--spacing-container); padding-right: var(--spacing-container); } /* Card surface — dark background with rounded corners */ .AccordionBlock-module_innerContainer__zuJJz { background-color: var(--color-card-bg); border-radius: var(--radius-lg); padding: var(--spacing-5) var(--spacing-5) var(--spacing-2); } @media (min-width: 768px) { .AccordionBlock-module_innerContainer__zuJJz { padding: var(--spacing-8) var(--spacing-8) var(--spacing-4); } } /* Full-width wrapper — handles centering and container padding */ .RichTextBlock-module_blockWrapper__HNXzF { width: 100%; max-width: var(--max-width-container); margin-left: auto; margin-right: auto; padding-left: var(--spacing-container); padding-right: var(--spacing-container); } /* Card surface — dark background with rounded corners */ .RichTextBlock-module_innerContainer__YwEm- { background-color: var(--color-card-bg); border-radius: var(--radius-lg); padding: var(--spacing-5); } @media (min-width: 768px) { .RichTextBlock-module_innerContainer__YwEm- { padding: var(--spacing-8); } } /* ========================= COLUMN LAYOUT ========================= */ .RichTextBlock-module_columns__l3-NN { display: grid; grid-template-columns: 1fr; gap: var(--spacing-6); } /* Base column styles - ensure content adapts to container */ .RichTextBlock-module_column__i8WKb { min-width: 0; /* Allow shrinking below content size */ max-width: 100%; /* Never exceed container */ overflow-wrap: break-word; /* Break long words */ word-wrap: break-word; /* Fallback */ } /* Column Size Variants - Mobile (single column) */ .RichTextBlock-module_column__i8WKb[data-size="oneThird"], .RichTextBlock-module_column__i8WKb[data-size="half"], .RichTextBlock-module_column__i8WKb[data-size="twoThirds"], .RichTextBlock-module_column__i8WKb[data-size="full"] { grid-column: span 1; } /* Multi-column layout on larger screens */ /* @media (min-width: 768px) { .columns { grid-template-columns: repeat(12, 1fr); } .column[data-size="oneThird"] { grid-column: span 4; } .column[data-size="half"] { grid-column: span 6; } .column[data-size="twoThirds"] { grid-column: span 8; } .column[data-size="full"] { grid-column: span 12; } } */ /* Scroll target wrapper — accounts for sticky header */ .CMSForm-module_formContainer__nrInh { scroll-margin-top: 88px; } /* CMS Form Container - Main orchestrator styles */ .CMSForm-module_cmsForm__EEL2Q { display: flex; flex-direction: column; gap: var(--spacing-10); border-radius: var(--radius-2xl); background-color: var(--color-bg-secondary); padding: var(--spacing-8); } @media (max-width: 767px) { .CMSForm-module_cmsForm__EEL2Q { padding: var(--spacing-5); } } /* Form Content */ .CMSForm-module_formContent__s2Al4 { display: flex; flex-direction: column; gap: var(--spacing-8); } /* Form Fields Grid */ .CMSForm-module_formFields__i-3Ku { display: flex; flex-direction: column; gap: var(--spacing-5); } /* Submit Error */ .CMSForm-module_submitError__ouRjx { border-radius: var(--radius-md); border: 1px solid var(--color-error-light); background-color: var(--color-error-bg); padding: var(--spacing-4); } .CMSForm-module_submitError__ouRjx p { font-size: var(--text-small); line-height: 16px; color: var(--color-error); } /* Form Group Container */ .FormField-shared-module_formGroup__8WpsN { position: relative; display: flex; flex-direction: column; gap: var(--spacing-2); } /* Grid column spans for different field widths */ /* Desktop only - mobile is always full width via flexbox */ @media (min-width: 768px) { /* 33% width = 2 columns in 6-column grid */ .FormField-shared-module_fieldWidth33__0BoGY { grid-column: span 2; } /* 50% width = 3 columns in 6-column grid */ .FormField-shared-module_fieldWidth50__IkbrB { grid-column: span 3; } /* 100% width = 6 columns in 6-column grid */ .FormField-shared-module_fieldWidth100__kBD2W { grid-column: span 6; } } /* Input Field Container */ .FormField-shared-module_inputFieldContainer__e38On { display: flex; flex-direction: column; gap: var(--spacing-3); } /* Labels */ .FormField-shared-module_formLabel__i0evH { display: flex; gap: 4px; font-family: var(--font-headline); font-size: var(--text-body); line-height: var(--text-small-line-height); font-weight: var(--font-weight-bold); color: var(--color-white); } @media (min-width: 768px) { .FormField-shared-module_formLabel__i0evH { font-size: var(--text-h4); line-height: var(--text-body-line-height); } } .FormField-shared-module_required__O-clZ { color: var(--color-highlight); } /* Base Input Styles */ .FormField-shared-module_formInput__NdIbV { min-height: 48px; width: 100%; border-radius: var(--radius-md); border: 2px solid transparent; background-color: var(--color-bg-main); padding: var(--spacing-3) var(--spacing-4); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-white); outline: none; transition: border-color var(--duration-15) ease, box-shadow var(--duration-15) ease; } .FormField-shared-module_formInput__NdIbV::placeholder { color: var(--color-white); opacity: 0.5; } .FormField-shared-module_formInput__NdIbV:focus { border-color: var(--color-highlight); box-shadow: 0 0 4px #5d2de6; } /* Error State */ .FormField-shared-module_formInputError__xCZGy { border-color: var(--color-error); } /* Error Message */ .FormField-shared-module_errorMessage__rBY-G { position: absolute; top: 44px; right: 12px; margin-top: var(--spacing-1); margin-left: var(--spacing-1); display: block; min-height: 16px; font-size: var(--text-small); line-height: 16px; color: var(--color-error); } /* Error Message Container - reserves space to prevent layout shift */ .FormField-shared-module_errorContainer__JFle5 { display: flex; min-height: 24px; align-items: flex-start; } /* Error Message for Select - positioned to the left to avoid dropdown arrow */ .FormField-shared-module_errorMessageSelect__nWwHL { right: 40px; } /* Error Message for Date - positioned to the left to avoid calendar icon */ .FormField-shared-module_errorMessageDate__lKZ07 { right: 40px; } .FormField-shared-module_errorMessageCheckbox__b5o-f { top: -4px; left: -4px; } /* FormTextArea Styles */ /* Extends shared field styles with textarea-specific properties */ .FormTextArea-module_formTextarea__Qt0M- { min-height: 194px; width: 100%; resize: vertical; border-radius: var(--radius-md); border: 2px solid transparent; background-color: var(--color-bg-main); padding: var(--spacing-3) var(--spacing-4); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-white); outline: none; transition: border-color var(--duration-15) ease, box-shadow var(--duration-15) ease; } .FormTextArea-module_formTextarea__Qt0M-::placeholder { color: var(--color-white); opacity: 0.5; } .FormTextArea-module_formTextarea__Qt0M-:focus { border-color: var(--color-highlight); box-shadow: 0 0 4px #5d2de6; } .FormTextArea-module_formTextareaError__-C3mt { border-color: var(--color-error); } @media (min-width: 768px) { .FormTextArea-module_formTextarea__Qt0M- { min-height: 220px; } } @media (min-width: 1024px) { .FormTextArea-module_formTextarea__Qt0M- { min-height: 257px; } } /* ───────────────────────────────────────────────────────────────────────────── Select Component Styles ───────────────────────────────────────────────────────────────────────────── */ .Select-module_select__gHdcQ { position: relative; width: 100%; } /* ───────────────────────────────────────────────────────────────────────────── Trigger Button ───────────────────────────────────────────────────────────────────────────── */ .Select-module_trigger__G0Qz5 { width: 100%; cursor: pointer; display: flex; align-items: center; justify-content: space-between; text-align: left; font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); } .Select-module_value__G9jLv { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .Select-module_arrow__I5xdC { margin-left: var(--spacing-2); display: flex; width: 24px; height: 24px; flex-shrink: 0; align-items: center; justify-content: center; transition: transform var(--duration-20); } .Select-module_open__BNzFF .Select-module_arrow__I5xdC { transform: rotate(180deg); } .Select-module_arrow__I5xdC svg { width: 100%; height: 100%; } .Select-module_disabled__EOekZ .Select-module_trigger__G0Qz5 { cursor: not-allowed; opacity: 0.6; } /* ───────────────────────────────────────────────────────────────────────────── Dropdown ───────────────────────────────────────────────────────────────────────────── */ .Select-module_dropdown__8JgQX { position: absolute; z-index: var(--z-modal); margin-top: var(--spacing-2); width: 100%; max-height: 240px; overflow-y: auto; animation: Select-module_slideDown__cvgdg var(--duration-20) ease-out; } @keyframes Select-module_slideDown__cvgdg { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Scrollbar */ .Select-module_dropdown__8JgQX::-webkit-scrollbar { width: 8px; } .Select-module_dropdown__8JgQX::-webkit-scrollbar-track { border-radius: 0 var(--radius-md) var(--radius-md) 0; } .Select-module_dropdown__8JgQX::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); } /* ───────────────────────────────────────────────────────────────────────────── Options ───────────────────────────────────────────────────────────────────────────── */ .Select-module_option__MjhFC { cursor: pointer; padding: var(--spacing-3); font-size: var(--text-body); line-height: var(--text-body-line-height); } .Select-module_option__MjhFC:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; } .Select-module_option__MjhFC:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); } /* ───────────────────────────────────────────────────────────────────────────── Variant: default — themed colors for standard backgrounds ───────────────────────────────────────────────────────────────────────────── */ .Select-module_default__SDpK5 .Select-module_trigger__G0Qz5 { height: 50px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--color-text-secondary) 30%, transparent); background-color: var(--color-bg-main); padding: var(--spacing-4) var(--spacing-3); color: var(--color-text-secondary); transition: border-color var(--duration-20), background-color var(--duration-20), outline var(--duration-20); } .Select-module_default__SDpK5 .Select-module_trigger__G0Qz5:focus { border-color: var(--color-active); outline: 1px solid var(--color-active); outline-offset: 0; } .Select-module_default__SDpK5 .Select-module_trigger__G0Qz5:focus-visible { border-color: var(--color-active); outline: 2px solid var(--color-active); outline-offset: 0; } .Select-module_default__SDpK5 .Select-module_trigger__G0Qz5:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent); } .Select-module_default__SDpK5 .Select-module_triggerPlaceholder__sKwC3 { color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent); } .Select-module_default__SDpK5 .Select-module_arrow__I5xdC { color: var(--color-text-secondary); } .Select-module_default__SDpK5.Select-module_error__9z7Pv .Select-module_trigger__G0Qz5 { border-color: var(--color-error); outline: 1px solid var(--color-error); outline-offset: 0; } .Select-module_default__SDpK5 .Select-module_dropdown__8JgQX { border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--color-text-secondary) 30%, transparent); background-color: var(--color-bg-main); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .Select-module_default__SDpK5 .Select-module_dropdown__8JgQX::-webkit-scrollbar-track { background-color: color-mix(in srgb, var(--color-text-secondary) 10%, transparent); } .Select-module_default__SDpK5 .Select-module_dropdown__8JgQX::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--color-text-secondary) 30%, transparent); } .Select-module_default__SDpK5 .Select-module_dropdown__8JgQX::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-text-secondary) 50%, transparent); } .Select-module_default__SDpK5 .Select-module_option__MjhFC { color: var(--color-text-secondary); transition: background-color var(--duration-15), color var(--duration-15); } .Select-module_default__SDpK5 .Select-module_optionHighlighted__1guuu { background-color: color-mix(in srgb, var(--color-active) 10%, transparent); } .Select-module_default__SDpK5 .Select-module_optionSelected__5WeKe { background-color: color-mix(in srgb, var(--color-active) 20%, transparent); font-weight: var(--font-weight-semibold); color: var(--color-active); } .Select-module_default__SDpK5 .Select-module_optionSelected__5WeKe.Select-module_optionHighlighted__1guuu { background-color: color-mix(in srgb, var(--color-active) 30%, transparent); } /* ───────────────────────────────────────────────────────────────────────────── Variant: onAccent — persistent colors for accent-colored sections ───────────────────────────────────────────────────────────────────────────── */ .Select-module_onAccent__SwjxA .Select-module_trigger__G0Qz5 { height: 52px; border-radius: var(--radius-lg); border: none; background-color: var(--color-white-persistent); padding: var(--spacing-3) var(--spacing-4); color: var(--color-text-persistent-dark); transition: outline var(--duration-20); } .Select-module_onAccent__SwjxA .Select-module_trigger__G0Qz5:focus { outline: 2px solid var(--color-white-persistent); outline-offset: 2px; } .Select-module_onAccent__SwjxA .Select-module_trigger__G0Qz5:focus-visible { outline: 2px solid var(--color-white-persistent); outline-offset: 2px; } .Select-module_onAccent__SwjxA .Select-module_triggerPlaceholder__sKwC3 { color: var(--color-text-persistent-dark); } .Select-module_onAccent__SwjxA .Select-module_arrow__I5xdC { color: var(--color-text-persistent-dark); } .Select-module_onAccent__SwjxA .Select-module_dropdown__8JgQX { border-radius: var(--radius-lg); border: none; background-color: var(--color-white-persistent); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .Select-module_onAccent__SwjxA .Select-module_dropdown__8JgQX::-webkit-scrollbar-track { background-color: color-mix(in srgb, var(--color-text-persistent-dark) 8%, transparent); } .Select-module_onAccent__SwjxA .Select-module_dropdown__8JgQX::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--color-text-persistent-dark) 20%, transparent); } .Select-module_onAccent__SwjxA .Select-module_dropdown__8JgQX::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-text-persistent-dark) 35%, transparent); } .Select-module_onAccent__SwjxA .Select-module_option__MjhFC { color: var(--color-text-persistent-dark); transition: background-color var(--duration-15), color var(--duration-15); } .Select-module_onAccent__SwjxA .Select-module_optionHighlighted__1guuu { background-color: color-mix(in srgb, var(--color-text-persistent-dark) 8%, transparent); } .Select-module_onAccent__SwjxA .Select-module_optionSelected__5WeKe { background-color: color-mix(in srgb, var(--color-text-persistent-dark) 14%, transparent); font-weight: var(--font-weight-semibold); } .Select-module_onAccent__SwjxA .Select-module_optionSelected__5WeKe.Select-module_optionHighlighted__1guuu { background-color: color-mix(in srgb, var(--color-text-persistent-dark) 20%, transparent); } /* ───────────────────────────────────────────────────────────────────────────── Responsive ───────────────────────────────────────────────────────────────────────────── */ @media (max-width: 767px) { .Select-module_dropdown__8JgQX { max-height: 192px; } } /* Multi-Select Container */ .FormMultiSelect-module_multiSelect__isk5K { position: relative; width: 100%; } /* Select Button - Matches Input Field Styles */ .FormMultiSelect-module_selectButton__PgKGF { min-height: 48px; width: 100%; cursor: pointer; border-radius: var(--radius-md); border: 2px solid transparent; background-color: var(--color-bg-main); padding: var(--spacing-2) var(--spacing-4); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-white); display: flex; align-items: center; justify-content: space-between; text-align: left; outline: none; transition: border-color var(--duration-15) ease, box-shadow var(--duration-15) ease; } .FormMultiSelect-module_selectButton__PgKGF:focus { border-color: var(--color-highlight); box-shadow: 0 0 4px #5d2de6; } .FormMultiSelect-module_selectButton__PgKGF:hover:not(:disabled) { border-color: color-mix(in srgb, var(--color-white) 30%, transparent); } /* Placeholder State */ .FormMultiSelect-module_selectButtonPlaceholder__x-5bx { color: var(--color-white); opacity: 0.5; } /* Error State */ .FormMultiSelect-module_multiSelectError__M2yPz .FormMultiSelect-module_selectButton__PgKGF { border-color: var(--color-error); } /* Select Value Container */ .FormMultiSelect-module_selectValue__T-QgJ { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); } /* Placeholder text */ .FormMultiSelect-module_placeholder__4w7BG { color: var(--color-white); opacity: 0.5; } /* Badge styles for selected items */ .FormMultiSelect-module_badge__eYtd1 { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent); background-color: color-mix(in srgb, var(--color-white) 10%, transparent); padding: var(--spacing-1) var(--spacing-2); font-size: var(--text-small); color: var(--color-white); transition: border-color var(--duration-15), background-color var(--duration-15); } .FormMultiSelect-module_badge__eYtd1:hover { border-color: color-mix(in srgb, var(--color-white) 50%, transparent); background-color: color-mix(in srgb, var(--color-white) 20%, transparent); } .FormMultiSelect-module_badgeLabel__9ki5b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .FormMultiSelect-module_badgeRemove__EgPb4 { display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: color-mix(in srgb, var(--color-white) 70%, transparent); transition: background-color var(--duration-15), color var(--duration-15); } .FormMultiSelect-module_badgeRemove__EgPb4:hover { background-color: color-mix(in srgb, var(--color-white) 20%, transparent); color: var(--color-white); } .FormMultiSelect-module_badgeRemove__EgPb4 svg { width: 12px; height: 12px; } /* Arrow Icon */ .FormMultiSelect-module_selectArrow__1em-0 { margin-left: var(--spacing-2); display: flex; width: 24px; height: 24px; flex-shrink: 0; align-items: center; justify-content: center; color: var(--color-white); transition: transform var(--duration-20); } .FormMultiSelect-module_multiSelectOpen__i1wrc .FormMultiSelect-module_selectArrow__1em-0 { transform: rotate(180deg); } .FormMultiSelect-module_selectArrow__1em-0 svg { width: 100%; height: 100%; } /* Dropdown Menu */ .FormMultiSelect-module_dropdown__VY2a6 { position: absolute; z-index: var(--z-modal); margin-top: var(--spacing-2); width: 100%; border-radius: var(--radius-md); border: 2px solid color-mix(in srgb, var(--color-white) 20%, transparent); background-color: var(--color-bg-main); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2); max-height: 240px; overflow-y: auto; animation: FormMultiSelect-module_slideDown__QgwvO var(--duration-20) ease-out; } @keyframes FormMultiSelect-module_slideDown__QgwvO { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Custom Scrollbar for Dropdown */ .FormMultiSelect-module_dropdown__VY2a6::-webkit-scrollbar { width: 8px; } .FormMultiSelect-module_dropdown__VY2a6::-webkit-scrollbar-track { border-radius: 0 var(--radius-md) var(--radius-md) 0; background-color: color-mix(in srgb, var(--color-white) 10%, transparent); } .FormMultiSelect-module_dropdown__VY2a6::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background-color: color-mix(in srgb, var(--color-white) 30%, transparent); } .FormMultiSelect-module_dropdown__VY2a6::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, var(--color-white) 50%, transparent); } /* Options */ .FormMultiSelect-module_option__RQ--2 { display: flex; cursor: pointer; align-items: center; gap: var(--spacing-3); padding: var(--spacing-3); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-white); transition: background-color var(--duration-15), color var(--duration-15); } .FormMultiSelect-module_option__RQ--2:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; } .FormMultiSelect-module_option__RQ--2:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); } /* Checkbox indicator */ .FormMultiSelect-module_checkbox__dxlIy { display: flex; width: 20px; height: 20px; flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--radius-sm); border: 2px solid color-mix(in srgb, var(--color-white) 40%, transparent); transition: all var(--duration-15); } .FormMultiSelect-module_optionSelected__E0KJa .FormMultiSelect-module_checkbox__dxlIy { border-color: var(--color-highlight); background-color: var(--color-highlight); color: white; } .FormMultiSelect-module_checkbox__dxlIy svg { width: 12px; height: 12px; } /* Option label */ .FormMultiSelect-module_optionLabel__XMa-m { flex: 1; } /* Option Hover State */ .FormMultiSelect-module_optionHighlighted__zUdJo { background-color: color-mix(in srgb, var(--color-highlight) 10%, transparent); } /* Option Selected State */ .FormMultiSelect-module_optionSelected__E0KJa { background-color: color-mix(in srgb, var(--color-highlight) 5%, transparent); } .FormMultiSelect-module_optionSelected__E0KJa.FormMultiSelect-module_optionHighlighted__zUdJo { background-color: color-mix(in srgb, var(--color-highlight) 15%, transparent); } /* Focus visible for accessibility */ .FormMultiSelect-module_selectButton__PgKGF:focus-visible { border-color: var(--color-highlight); outline: 2px solid var(--color-highlight); outline-offset: 0; } /* Responsive adjustments */ @media (max-width: 767px) { .FormMultiSelect-module_dropdown__VY2a6 { max-height: 192px; } } /* Checkbox wrapper */ .FormCheckbox-module_wrapper__8PJ0d { margin-top: var(--spacing-6); display: flex; width: 100%; flex-direction: column; } .FormCheckbox-module_checkboxLabel__QUmgd { margin-bottom: var(--spacing-2); display: flex; flex: 1; cursor: pointer; align-items: center; gap: var(--spacing-2); } .FormCheckbox-module_formCheckbox__rxcQB { appearance: none; width: 16px; height: 16px; min-width: 16px; border: 1.5px solid var(--color-white); border-radius: 2px; cursor: pointer; position: relative; background: transparent; } .FormCheckbox-module_formCheckbox__rxcQB:checked { background-color: var(--color-highlight); border-color: var(--color-highlight); } .FormCheckbox-module_formCheckbox__rxcQB:checked::after { content: ''; position: absolute; left: 3.5px; top: 0.5px; width: 5px; height: 9px; border: solid var(--color-white); border-width: 0 2px 2px 0; transform: rotate(45deg); } .FormCheckbox-module_formCheckbox__rxcQB:focus { border-color: var(--color-highlight); outline: 1px solid var(--color-highlight); outline-offset: 0; } .FormCheckbox-module_checkboxText__E8oMK { flex: 1; font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); color: var(--color-white); overflow-wrap: break-word; word-wrap: break-word; } .FormCheckbox-module_checkboxText__E8oMK a { color: var(--color-white); text-decoration: underline; transition: color var(--duration-20); } .FormCheckbox-module_checkboxText__E8oMK a:hover { color: var(--color-highlight); } .FormCheckbox-module_required__Ae2PJ { color: var(--color-highlight); } .FormCheckbox-module_error__zOylo { border-color: var(--color-error); } /* FormMessage Styles */ .FormMessage-module_formGroup__3DjG8 { display: flex; flex-direction: column; gap: var(--spacing-2); flex: 1; } .FormMessage-module_formMessage__-Jw9r { font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-white); } /* FormSuccessMessage Styles */ .FormSuccessMessage-module_cmsForm__f5W5f { border-radius: var(--radius-2xl); background-color: var(--color-bg-secondary); padding: var(--spacing-14); display: flex; flex-direction: column; gap: var(--spacing-14); } .FormSuccessMessage-module_successMessage__JLapm { display: flex; flex-direction: column; gap: var(--spacing-2); text-transform: uppercase; } .FormSuccessMessage-module_successIcon__kxq6p { font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-white); } .FormSuccessMessage-module_successTitle__04mQO { font-family: var(--font-headline); font-weight: var(--font-weight-regular); font-size: 36px; line-height: 36px; color: var(--color-white); text-transform: uppercase; } .FormSuccessMessage-module_successTitle__04mQO h2 { font-size: var(--text-h2); line-height: var(--text-h2-line-height); padding-bottom: var(--spacing-6); } .FormSuccessMessage-module_successTitle__04mQO p { text-transform: none; font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); padding-bottom: var(--spacing-6); } .FormSuccessMessage-module_successContent__-lJdw { font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-white); text-transform: none; margin-top: var(--spacing-6); } .FormSuccessMessage-module_successContent__-lJdw a { text-decoration: underline; } /* Responsive */ @media (max-width: 767px) { .FormSuccessMessage-module_cmsForm__f5W5f { padding: var(--spacing-8) var(--spacing-6); gap: var(--spacing-8); } } /* FormExpiredMessage Styles */ .FormExpiredMessage-module_cmsForm__xXzIV { border-radius: var(--radius-2xl); background-color: var(--color-bg-secondary); padding: var(--spacing-14); display: flex; flex-direction: column; gap: var(--spacing-14); } .FormExpiredMessage-module_expiredMessage__QWmG5 { display: flex; flex-direction: column; gap: var(--spacing-2); text-transform: uppercase; } .FormExpiredMessage-module_expiredIcon__ZLs6j { /* Inherits: font-size from body */ line-height: 20px; color: var(--color-white); } .FormExpiredMessage-module_expiredContent__MK1Tq { font-family: var(--font-headline); font-weight: var(--font-weight-regular); font-size: var(--text-h2); line-height: var(--text-h2-line-height); color: var(--color-white); text-transform: uppercase; } .FormExpiredMessage-module_expiredContent__MK1Tq p { /* Inherits: font-family, font-weight, font-size, line-height from body */ color: var(--color-white); text-transform: none; margin-top: var(--spacing-6); } .FormExpiredMessage-module_expiredContent__MK1Tq a { text-decoration: underline; color: var(--color-white); } /* Responsive */ @media (max-width: 767px) { .FormExpiredMessage-module_cmsForm__xXzIV { padding: var(--spacing-8) var(--spacing-6); gap: var(--spacing-8); } } /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */ .FormHeader-module_formHeader__QyLw4 { gap: var(--spacing-2); text-transform: uppercase; flex-direction: column; display: flex; } /* FormRow Styles */ /* Form field row - uses CSS Grid for proper width handling with gaps */ .FormRow-module_formFieldRow__kvIl8 { display: flex; flex-direction: column; gap: var(--spacing-5); } /* Desktop: Use grid for proper percentage handling */ @media (min-width: 768px) { .FormRow-module_formFieldRow__kvIl8 { display: grid; grid-template-columns: repeat(6, 1fr); /* 6-column grid for 33%, 50%, 100% support */ gap: var(--spacing-4); align-items: start; } } /* Submit action row with checkbox and button */ .FormRow-module_submitActionRow__u3-nX { position: relative; display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--spacing-4); } @media (min-width: 768px) { .FormRow-module_submitActionRow__u3-nX { flex-direction: row; align-items: center; justify-content: space-between; } } .FormRow-module_submitButtonRow__wHiY0 { margin-top: var(--spacing-4); display: flex; justify-content: flex-end; } /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */ .Button-module_button__tszEO { justify-content: center; align-items: center; gap: var(--spacing-2); width: fit-content; padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-body); font-weight: var(--font-weight-semibold); line-height: var(--text-body-line-height); text-transform: uppercase; transition: background-color var(--duration-20) ease, transform var(--duration-15) ease, opacity var(--duration-20) ease; border: none; display: flex; } .Button-module_button__tszEO:disabled { opacity: .5; cursor: not-allowed; } .Button-module_icon__FlpIS { justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; display: flex; } .Button-module_icon__FlpIS > svg { width: 100%; height: 100%; } .Button-module_label__CHNW7 { letter-spacing: var(--tracking-normal); overflow-wrap: break-word; word-break: break-word; -webkit-hyphens: auto; hyphens: auto; } .Button-module_primary__QqUUr { background-color: var(--color-button-primary); color: var(--color-on-surface); } .Button-module_primary__QqUUr:hover:not(:disabled) { opacity: .9; transform: scale(1.02); } .Button-module_primary__QqUUr:active:not(:disabled) { transform: scale(.98); } .Button-module_primaryOutline__SZg0E { background-color: var(--color-button-primary); color: var(--color-on-surface); border: 2px solid var(--color-button-primary); } .Button-module_primaryOutline__SZg0E:hover:not(:disabled) { color: var(--color-text-secondary); background-color: #0000; } .Button-module_primaryOutline__SZg0E:active:not(:disabled) { transform: scale(.98); } .Button-module_primaryFixed__11Lyl { background-color: var(--color-text-persistent-dark); color: var(--color-text-on-accent); } .Button-module_primaryFixed__11Lyl:hover:not(:disabled) { opacity: .9; transform: scale(1.02); } .Button-module_primaryFixed__11Lyl:active:not(:disabled) { transform: scale(.98); } .Button-module_onAccent__i6aVo { background-color: var(--color-text-on-accent); color: var(--color-text-persistent-dark); } .Button-module_onAccent__i6aVo:hover:not(:disabled) { background-color: var(--color-text-on-accent); } @supports (color: color-mix(in lab, red, red)) { .Button-module_onAccent__i6aVo:hover:not(:disabled) { background-color: color-mix(in srgb, var(--color-text-on-accent) 85%, black); } } .Button-module_onAccent__i6aVo:hover:not(:disabled) { transform: scale(1.02); } .Button-module_onAccent__i6aVo:active:not(:disabled) { transform: scale(.98); } .Button-module_accent__c52rd { background-color: var(--button-accent-color, var(--color-hot)); color: var(--color-text-on-accent); } .Button-module_accent__c52rd:hover:not(:disabled) { opacity: .9; } .Button-module_accent__c52rd:active:not(:disabled) { transform: scale(.98); } .Button-module_ghost__Pk0wm { color: var(--color-text-secondary); border: 1px solid var(--color-border); background-color: #0000; } .Button-module_ghost__Pk0wm:hover:not(:disabled) { background-color: var(--color-surface-hover, #0000000d); } .Button-module_ghost__Pk0wm:active:not(:disabled) { transform: scale(.98); } .Button-module_ghostOnDark__FBUp6 { color: var(--color-text-tertiary); border: 1px solid var(--color-outline); font-size: var(--text-small); line-height: var(--text-small-line-height); text-transform: none; background-color: #0000; } .Button-module_ghostOnDark__FBUp6:hover:not(:disabled) { background-color: var(--color-surface-hover); color: var(--color-text-secondary); border-color: var(--color-text-secondary); } .Button-module_ghostOnDark__FBUp6:active:not(:disabled) { transform: scale(.98); } .Button-module_text__AeStm { color: var(--color-text-secondary); padding: var(--spacing-2, .5rem) 0; background-color: #0000; } .Button-module_text__AeStm:hover:not(:disabled) { opacity: .8; } .Button-module_text__AeStm:active:not(:disabled) { opacity: .6; } .Button-module_textOnDark__X-hyy { color: var(--color-text-on-accent); padding: var(--spacing-2, .5rem) 0; background-color: #0000; } .Button-module_textOnDark__X-hyy:hover:not(:disabled) { opacity: .8; } .Button-module_textOnDark__X-hyy:active:not(:disabled) { opacity: .6; } .Button-module_highlight__PGTm6 { background-color: var(--color-highlight); color: var(--color-text-persistent-dark); } .Button-module_highlight__PGTm6:hover:not(:disabled) { opacity: .9; transform: scale(1.02); } .Button-module_highlight__PGTm6:active:not(:disabled) { transform: scale(.98); } /* FormSubmitButton Styles - layout only, visual styles handled by Button component */ .FormSubmitButton-module_submitButton__ulBVq { width: 100%; white-space: nowrap; } @media (min-width: 768px) { .FormSubmitButton-module_submitButton__ulBVq { width: auto; } } /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */ .FormBlock-module_blockWrapper__yN9SL { width: 100%; } .FormBlock-module_innerContainer__-aGWZ { width: 100%; max-width: var(--max-width-container); padding-left: var(--spacing-container); padding-right: var(--spacing-container); gap: var(--spacing-6); flex-direction: column; margin-left: auto; margin-right: auto; display: flex; } .FormBlock-module_formIntro__jPAht, .FormBlock-module_formIntro__jPAht h1, .FormBlock-module_formIntro__jPAht h2, .FormBlock-module_formIntro__jPAht h3, .FormBlock-module_formIntro__jPAht h4, .FormBlock-module_formIntro__jPAht h5, .FormBlock-module_formIntro__jPAht h6, .FormBlock-module_formIntro__jPAht p { color: var(--color-white); } .FormBlock-module_formIntro__jPAht a { color: var(--color-highlight); } .FormBlock-module_formIntro__jPAht ul, .FormBlock-module_formIntro__jPAht ol, .FormBlock-module_formIntro__jPAht blockquote { color: var(--color-white); } .VideoBadge-module_badge__TS9LN { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-2); background-color: var(--color-highlight); color: var(--color-text-primary); border-radius: var(--radius-md); font-family: var(--font-headline); font-size: var(--text-h6); font-weight: var(--font-weight-semibold); line-height: var(--label-button-line-height); white-space: nowrap; } .VideoBadge-module_icon__QUQi8 { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════════ * TeaserCard — Multi-variant teaser card * * Variants: large, half, third, small, noImage * All share dark card bg with rounded corners and hover lift. * ═══════════════════════════════════════════════════════════════════════════ */ .TeaserCard-module_card__2l3PT { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-card-bg); cursor: pointer; transition: transform var(--duration-30) ease-in-out, box-shadow var(--duration-30) ease-in-out; } .TeaserCard-module_card__2l3PT:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .TeaserCard-module_cardLink__RDrOV { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; } /* ─── Image Container (shared) ────────────────────────────────────────── */ .TeaserCard-module_imageContainer__G9rqb { position: relative; width: 100%; flex-shrink: 0; overflow: hidden; background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: TeaserCard-module_imageShimmer__V5PF8 1.5s ease-in-out infinite; } .TeaserCard-module_image__8T1Fz { width: 100%; height: 100%; object-fit: cover; display: block; } .TeaserCard-module_imageGradient__4Azsk { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-card-bg) 0%, transparent 50%); pointer-events: none; } .TeaserCard-module_imagePlaceholder__1CsSH { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--color-placeholder-background); } .TeaserCard-module_placeholderLogo__FIfhj { width: 64px; height: 64px; object-fit: contain; opacity: 0.4; } .TeaserCard-module_videoBadge__4sgJA { position: absolute; bottom: var(--spacing-3); left: var(--spacing-3); z-index: 1; } .TeaserCard-module_durationBadge__oLb8a { position: absolute; bottom: var(--spacing-3); right: var(--spacing-3); z-index: 1; padding: var(--spacing-1) var(--spacing-2); background-color: rgba(15, 23, 42, 0.75); color: var(--color-text-secondary); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); white-space: nowrap; } /* Transparent overlay — captures clicks on the image area for video autoplay */ .TeaserCard-module_imagePlayButton__hIXaR { position: absolute; inset: 0; z-index: 2; background: transparent; border: none; cursor: pointer; } /* ─── Content Area ────────────────────────────────────────────────────── */ .TeaserCard-module_content__QkHlF { display: flex; flex-direction: column; gap: var(--spacing-2); padding: var(--spacing-4); flex: 1; } .TeaserCard-module_title__bUPyJ { font-family: var(--font-headline); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; } .TeaserCard-module_publishedAt__6rYs3 { font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); color: var(--color-text-muted); margin-top: auto; } /* ═══════════════════════════════════════════════════════════════════════════ * Variant: large (single-column hero card — 16:9 image, h3 title) * ═══════════════════════════════════════════════════════════════════════════ */ .TeaserCard-module_large__-IL2O .TeaserCard-module_imageContainer__G9rqb { aspect-ratio: 16 / 9; } .TeaserCard-module_large__-IL2O .TeaserCard-module_title__bUPyJ { font-size: var(--text-h3); line-height: var(--text-h3-line-height); -webkit-line-clamp: 4; line-clamp: 4; } /* ═══════════════════════════════════════════════════════════════════════════ * Variant: half (two-column card — 16:9 image, h4 title) * ═══════════════════════════════════════════════════════════════════════════ */ .TeaserCard-module_half__Qz26I .TeaserCard-module_imageContainer__G9rqb { aspect-ratio: 16 / 9; } .TeaserCard-module_half__Qz26I .TeaserCard-module_title__bUPyJ { font-size: var(--text-h4); line-height: var(--text-h4-line-height); -webkit-line-clamp: 3; line-clamp: 3; } /* ═══════════════════════════════════════════════════════════════════════════ * Variant: third (three-column card — 16:9 image, h4 title to match .half) * ═══════════════════════════════════════════════════════════════════════════ */ .TeaserCard-module_third__w4df- .TeaserCard-module_imageContainer__G9rqb { aspect-ratio: 16 / 9; } .TeaserCard-module_third__w4df- .TeaserCard-module_title__bUPyJ { font-size: var(--text-h4); line-height: var(--text-h4-line-height); -webkit-line-clamp: 3; line-clamp: 3; } /* ═══════════════════════════════════════════════════════════════════════════ * Variant: small (horizontal — 120px thumbnail + text) * ═══════════════════════════════════════════════════════════════════════════ */ .TeaserCard-module_small__3qsz7 { flex-direction: row; } .TeaserCard-module_small__3qsz7 .TeaserCard-module_cardLink__RDrOV { flex-direction: row; } .TeaserCard-module_small__3qsz7 .TeaserCard-module_imageContainer__G9rqb { width: 120px; min-width: 120px; height: 120px; aspect-ratio: 1 / 1; border-radius: var(--radius-lg) 0 0 var(--radius-lg); } .TeaserCard-module_small__3qsz7 .TeaserCard-module_imageGradient__4Azsk { background: linear-gradient(to left, var(--color-card-bg) 0%, transparent 40%); } .TeaserCard-module_small__3qsz7 .TeaserCard-module_content__QkHlF { justify-content: center; } .TeaserCard-module_small__3qsz7 .TeaserCard-module_title__bUPyJ { font-size: var(--text-body); line-height: var(--text-body-line-height); -webkit-line-clamp: 3; line-clamp: 3; } /* ═══════════════════════════════════════════════════════════════════════════ * Variant: noImage (text-only card with optional badge) * ═══════════════════════════════════════════════════════════════════════════ */ .TeaserCard-module_noImage__yV2OP { border: 1px solid var(--color-border-card); } .TeaserCard-module_noImage__yV2OP .TeaserCard-module_content__QkHlF { padding: var(--spacing-5); } .TeaserCard-module_noImage__yV2OP .TeaserCard-module_title__bUPyJ { font-size: var(--text-h5); line-height: var(--text-h5-line-height); -webkit-line-clamp: 4; line-clamp: 4; } /* ═══════════════════════════════════════════════════════════════════════════ * Responsive * ═══════════════════════════════════════════════════════════════════════════ */ @keyframes TeaserCard-module_imageShimmer__V5PF8 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @media (max-width: 767px) { .TeaserCard-module_large__-IL2O .TeaserCard-module_title__bUPyJ { font-size: var(--text-h4); line-height: var(--text-h4-line-height); } .TeaserCard-module_small__3qsz7 .TeaserCard-module_imageContainer__G9rqb { width: 100px; min-width: 100px; height: 100px; } } .CarouselBlock-module_carouselSection__rI7dF { background-color: var(--color-bg-main); width: 100%; padding-top: var(--spacing-block-y); padding-bottom: var(--spacing-block-y); } .CarouselBlock-module_innerContainer__bHBrj { width: 100%; max-width: var(--max-width-container); margin-left: auto; margin-right: auto; padding-left: var(--spacing-container); padding-right: var(--spacing-container); } .CarouselBlock-module_sectionHeader__a8H9e { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-2); } .CarouselBlock-module_scrollButtons__H1BHk { display: flex; gap: var(--spacing-3); } .CarouselBlock-module_arrowButton__-MnvT { display: flex; align-items: center; justify-content: center; width: var(--button-icon-size); height: var(--button-icon-size); border: none; background: transparent; color: var(--color-black); padding: 0; transform: translateY(-25%); transition: opacity var(--duration-20) ease, transform var(--duration-20) ease; flex-shrink: 0; } .CarouselBlock-module_arrowButton__-MnvT:hover:not(.CarouselBlock-module_disabled__YzMQG) { transform: translateY(-25%) scale(1.1); } .CarouselBlock-module_arrowButton__-MnvT:active:not(.CarouselBlock-module_disabled__YzMQG) { transform: translateY(-25%) scale(0.95); } .CarouselBlock-module_arrowButton__-MnvT.CarouselBlock-module_disabled__YzMQG { opacity: 0.3; cursor: not-allowed; } .CarouselBlock-module_arrowButton__-MnvT.CarouselBlock-module_loading__oNabT { cursor: wait; } /* Loading spinner for right arrow */ .CarouselBlock-module_spinner__Hk6CQ { width: 20px; height: 20px; border: 2px solid var(--color-border-default, #e5e7eb); border-top-color: var(--color-black); border-radius: var(--radius-circle); animation: CarouselBlock-module_spin__mh3U6 0.8s linear infinite; } @keyframes CarouselBlock-module_spin__mh3U6 { to { transform: rotate(360deg); } } .CarouselBlock-module_arrowButton__-MnvT svg { width: 100%; height: 100%; } .CarouselBlock-module_carousel__krxhR { display: flex; gap: var(--spacing-6); scroll-behavior: smooth; /* Always scroll horizontally -NO wrap */ overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; flex-wrap: nowrap; padding: var(--spacing-1) 0; } .CarouselBlock-module_carousel__krxhR::-webkit-scrollbar { display: none; } .CarouselBlock-module_carousel__krxhR > * { scroll-snap-align: start; } /* ─── Overlay (on-track) Arrows ──────────────────────────────────────── */ .CarouselBlock-module_carouselTrack__CoU53 { position: relative; } .CarouselBlock-module_overlayArrow__IoG-V { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; padding: var(--spacing-1); background: var(--color-gray-500); border: none; border-radius: var(--radius-2xl); color: var(--color-white); cursor: pointer; z-index: 1; transition: opacity var(--duration-20) ease; } .CarouselBlock-module_overlayArrow__IoG-V:hover { opacity: 0.85; } .CarouselBlock-module_overlayArrow__IoG-V:active { opacity: 0.7; } .CarouselBlock-module_overlayArrowLeft__dOcc6 { left: var(--spacing-2); } .CarouselBlock-module_overlayArrowRight__dweGT { right: var(--spacing-2); } .CarouselBlock-module_overlayArrow__IoG-V.CarouselBlock-module_hidden__KtkPX { display: none; } .CarouselBlock-module_overlayArrow__IoG-V svg { width: 24px; height: 24px; } /* ==================== RESPONSIVE STYLES ==================== */ /* Tablet (768px and below) */ @media (max-width: 767px) { .CarouselBlock-module_arrowButton__-MnvT { width: var(--button-icon-size-sm); height: var(--button-icon-size-sm); } } .ArticleStoryBlock-module_card__VeTsM { background: var(--color-card-bg); border-radius: var(--radius-2xl); padding: var(--spacing-8); display: flex; flex-direction: column; gap: var(--spacing-6); } /* ─── Credit Line ────────────────────────────────────────────────────── */ .ArticleStoryBlock-module_creditLine__OEPdE { margin: 0; } /* ─── Social Share Row ────────────────────────────────────────────────── */ .ArticleStoryBlock-module_shareRow__HduRb { display: flex; gap: var(--spacing-2); align-items: center; flex-wrap: wrap; } /* Base: icon-only social buttons (Instagram, WhatsApp, Facebook) */ .ArticleStoryBlock-module_shareButton__1weZE { display: inline-flex; align-items: center; border: none; border-radius: var(--radius-md); padding: var(--spacing-2_5); color: var(--color-white); cursor: pointer; transition: opacity var(--duration-20) ease; } .ArticleStoryBlock-module_shareButton__1weZE:hover { opacity: 0.85; } /* Share (generic) — light button with dark text */ .ArticleStoryBlock-module_shareButton__1weZE[data-variant="share"] { background-color: var(--color-gray-50); color: var(--color-gray-900); gap: var(--spacing-2); padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-3); font-family: var(--font-headline); font-size: var(--label-button); line-height: var(--label-button-line-height); font-weight: var(--font-weight-bold); } /* Instagram — brand purple */ .ArticleStoryBlock-module_shareButton__1weZE[data-variant="instagram"] { background-color: var(--color-social-instagram); } /* WhatsApp — brand green */ .ArticleStoryBlock-module_shareButton__1weZE[data-variant="whatsapp"] { background-color: var(--color-social-whatsapp); } /* Facebook — brand blue */ .ArticleStoryBlock-module_shareButton__1weZE[data-variant="facebook"] { background-color: var(--color-social-facebook); } /* ─── Related Articles Carousel ───────────────────────────────────────── */ .ArticleStoryBlock-module_related__8iYl- { padding-top: var(--spacing-4); } /* * Reset CarouselBlock's section wrapper padding/max-width when embedded * inside the story card. CarouselBlock normally adds its own section * padding and container max-width — we strip those since the card * already provides the layout context. * Element selectors work across CSS Module boundaries (only classes are hashed). */ .ArticleStoryBlock-module_carouselWrapper__qySDh section { padding: 0; background: transparent; } .ArticleStoryBlock-module_carouselWrapper__qySDh section > div { max-width: none; padding: 0; } /* Override sectionTitle heading style for the article context: * Figma uses serif/h6 at normal case, not the default uppercase Inter. */ .ArticleStoryBlock-module_carouselWrapper__qySDh h2 { font-family: var(--font-headline); font-size: var(--text-h6); line-height: var(--text-h6-line-height); font-weight: var(--font-weight-bold); letter-spacing: normal; text-transform: none; color: var(--color-text-tertiary); } .ArticleStoryBlock-module_carouselItem__a2IH6 { flex: 0 0 280px; scroll-snap-align: start; } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 767px) { .ArticleStoryBlock-module_card__VeTsM { padding: var(--spacing-5); gap: var(--spacing-4); } .ArticleStoryBlock-module_carouselItem__a2IH6 { flex: 0 0 220px; } } /* FullWidthImageBlock — uncropped image, same width constraint as LivestreamBlock */ .FullWidthImageBlock-module_section__UM3Q6 { width: 100%; } .FullWidthImageBlock-module_inner__uwwrb { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--spacing-container); } .FullWidthImageBlock-module_frame__6-tae { display: block; width: 100%; border-radius: var(--radius-2xl); overflow: hidden; } .FullWidthImageBlock-module_image__CX5K5 { display: block; width: 100%; height: auto; } /* ─── Mobile: smaller border-radius (matches FullWidthVideoBlock) ──────── */ @media (max-width: 767px) { .FullWidthImageBlock-module_frame__6-tae { border-radius: var(--radius-lg); } } /* ─── Playing: Bunny iframe, in-flow, fills the block's aspect box ────── */ .VideoBlockOverlay-module_iframe__uiccc { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; } /* ─── Playback error: shown when embed URL is invalid ───────────────── */ .VideoBlockOverlay-module_playbackError__WxLBn { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3); color: var(--color-gray-300); font-size: var(--text-body); background-color: var(--color-card-bg); } .VideoBlockOverlay-module_retryButton__-94sZ { font-family: var(--font-body); font-size: var(--text-small); color: var(--color-white); background-color: var(--color-active); border: none; border-radius: var(--radius-md); padding: var(--spacing-2) var(--spacing-4); cursor: pointer; transition: opacity var(--duration-15) ease; } .VideoBlockOverlay-module_retryButton__-94sZ:hover { opacity: 0.85; } /* ─── Poster idle state: thumbnail + play button + duration badge ─────── */ .VideoBlockOverlay-module_poster__I7QtE { width: 100%; height: 100%; object-fit: cover; display: block; } .VideoBlockOverlay-module_gradient__tZrYB { position: absolute; bottom: 0; left: 0; right: 0; top: 50%; background: linear-gradient(to top, var(--color-gray-900), transparent); pointer-events: none; } .VideoBlockOverlay-module_playButton__0FaSa { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 50%; border: none; background-color: var(--color-active); color: var(--color-white); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--duration-20) ease, opacity var(--duration-20) ease; } .VideoBlockOverlay-module_playButton__0FaSa:hover { transform: translate(-50%, -50%) scale(1.08); opacity: 0.9; } .VideoBlockOverlay-module_duration__OQJFv { position: absolute; bottom: var(--spacing-4); right: var(--spacing-4); font-family: var(--font-headline); font-size: var(--text-h6); line-height: var(--text-h6-line-height); font-weight: var(--font-weight-semibold); color: var(--color-gray-50); background-color: rgba(0, 0, 0, 0.6); padding: var(--spacing-1) var(--spacing-2); border-radius: var(--radius-md); } .FullWidthVideoBlock-module_container__jywnc { position: relative; border-radius: var(--radius-2xl); overflow: hidden; width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-card-bg); } /* ─── Mobile: smaller border-radius ──────────────────────────────────── */ @media (max-width: 767px) { .FullWidthVideoBlock-module_container__jywnc { border-radius: var(--radius-lg); } } .ImageCredit-module_credit__O4ddk { position: absolute; bottom: 0; left: 0; z-index: 1; padding: var(--spacing-2) var(--spacing-3); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); font-weight: var(--font-weight-regular); color: var(--color-text-tertiary); } /* HeroContentBlock — full-width hero image banner with gradient overlay */ .HeroContentBlock-module_container__aqySM { position: relative; border-radius: var(--radius-2xl); overflow: hidden; width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: HeroContentBlock-module_imageShimmer__a-dro 1.5s ease-in-out infinite; } .HeroContentBlock-module_image__MSxoB { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .HeroContentBlock-module_gradient__oZKNM { position: absolute; bottom: 0; left: 0; right: 0; height: 35%; background: linear-gradient( to top, var(--color-gray-900) 0%, color-mix(in srgb, var(--color-gray-900) 90%, transparent) 15%, color-mix(in srgb, var(--color-gray-900) 20%, transparent) 60%, transparent 100% ); pointer-events: none; } @keyframes HeroContentBlock-module_imageShimmer__a-dro { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Mobile: smaller border-radius ──────────────────────────────────── */ @media (max-width: 767px) { .HeroContentBlock-module_container__aqySM { border-radius: var(--radius-lg); } } .FeaturedArticleBlock-module_hero__tsK3F { position: relative; width: 100%; padding-top: var(--featured-hero-top, var(--spacing-hero-top)); } .FeaturedArticleBlock-module_inner__ssRXm { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--block-container-padding, var(--spacing-container)); } /* ─── Hero Grid (main hero + optional side teasers) ──────────────────── */ .FeaturedArticleBlock-module_heroGrid__UfZ-8 { display: grid; gap: var(--spacing-5); } .FeaturedArticleBlock-module_heroGrid__UfZ-8.FeaturedArticleBlock-module_withSideTeasers__7XOu0 { grid-template-columns: 1fr; } /* ─── Main Hero Link ─────────────────────────────────────────────────── */ .FeaturedArticleBlock-module_heroLink__0MBaC { display: flex; flex-direction: column; height: 560px; text-decoration: none; color: inherit; } .FeaturedArticleBlock-module_heroPlaceholder__naHsZ { height: 560px; } /* ─── Image Section (top of hero, flex-grow) ─────────────────────────── */ .FeaturedArticleBlock-module_imageSection__NFOFu { position: relative; flex: 1 1 0; min-height: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; overflow: hidden; background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: FeaturedArticleBlock-module_imageShimmer__dM6oE 1.5s ease-in-out infinite; } .FeaturedArticleBlock-module_image__AiXk5 { width: 100%; height: 100%; object-fit: cover; } .FeaturedArticleBlock-module_gradient__mLb-v { position: absolute; bottom: 0; left: 0; right: 0; height: 212px; background: linear-gradient(to top, var(--color-card-bg) 0%, transparent 100%); } /* Bottom overlay bar inside image: badge (left) + duration (right) */ .FeaturedArticleBlock-module_imageOverlay__boFDp { position: absolute; bottom: 0; left: 0; right: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-6); } .FeaturedArticleBlock-module_heroDuration__ghuZe { font-family: var(--font-headline); font-size: var(--text-h6); line-height: var(--text-h6-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); } /* ─── Title Bar (bottom of hero, dark background) ────────────────────── */ .FeaturedArticleBlock-module_titleBar__0gJuG { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-3); padding: var(--spacing-8); background-color: var(--color-card-bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .FeaturedArticleBlock-module_breakingBanner__4YLIO { display: inline-block; padding: var(--spacing-1) var(--spacing-3); background-color: var(--color-highlight); color: var(--color-text-persistent-dark); border-radius: var(--radius-md); font-family: var(--font-headline); font-size: var(--text-small); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); } .FeaturedArticleBlock-module_title__GNQq3 { font-family: var(--font-headline); font-size: var(--text-h3); line-height: var(--text-h3-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } /* ─── Side Teasers ───────────────────────────────────────────────────── */ .FeaturedArticleBlock-module_sideTeasers__O7wxP { display: flex; flex-direction: column; gap: var(--spacing-4); } .FeaturedArticleBlock-module_sideTeaser__ZT1TL { display: flex; align-items: stretch; text-decoration: none; color: inherit; background-color: var(--color-card-bg); border-radius: var(--radius-lg); overflow: hidden; transition: transform var(--duration-30) ease-in-out; } .FeaturedArticleBlock-module_sideTeaser__ZT1TL:hover { transform: translateY(-2px); } /* Side teaser thumbnail: square, with gradient + badge */ .FeaturedArticleBlock-module_sideThumbnail__WjyRO { position: relative; width: 160px; min-width: 160px; height: 160px; flex-shrink: 0; overflow: hidden; border-radius: var(--radius-lg); background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: FeaturedArticleBlock-module_imageShimmer__dM6oE 1.5s ease-in-out infinite; } .FeaturedArticleBlock-module_sideThumbnailImage__TnGYA { width: 100%; height: 100%; object-fit: cover; display: block; } .FeaturedArticleBlock-module_sideThumbnailGradient__qdIsS { position: absolute; bottom: 0; left: 0; right: 0; height: 52%; background: linear-gradient(to top, var(--color-card-bg) 0%, transparent 100%); } .FeaturedArticleBlock-module_sideBadgeOverlay__z3xV- { position: absolute; bottom: var(--spacing-2); left: var(--spacing-2); right: var(--spacing-2); z-index: 1; display: flex; align-items: center; justify-content: space-between; } .FeaturedArticleBlock-module_sideDuration__Ov93- { font-family: var(--font-headline); font-size: var(--text-small); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); } /* Transparent overlay — captures clicks on the image area for video autoplay */ .FeaturedArticleBlock-module_imagePlayButton__zCVBX { position: absolute; inset: 0; z-index: 2; background: transparent; border: none; cursor: pointer; } /* Side teaser text content */ .FeaturedArticleBlock-module_sideContent__RNdEb { display: flex; flex-direction: column; gap: var(--spacing-2); justify-content: center; padding: var(--spacing-4); min-width: 0; } .FeaturedArticleBlock-module_sideTitle__Y3trY { font-family: var(--font-headline); font-size: var(--text-h4); line-height: var(--text-h4-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; } /* ─── Single Side Teaser (vertical: image top, text below) ──────────── */ .FeaturedArticleBlock-module_sideTeasers__O7wxP.FeaturedArticleBlock-module_singleTeaser__8Z0GP .FeaturedArticleBlock-module_sideTeaser__ZT1TL { flex-direction: column; } .FeaturedArticleBlock-module_sideTeasers__O7wxP.FeaturedArticleBlock-module_singleTeaser__8Z0GP .FeaturedArticleBlock-module_sideThumbnail__WjyRO { width: 100%; min-width: unset; height: auto; aspect-ratio: 16 / 10; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .FeaturedArticleBlock-module_sideTeasers__O7wxP.FeaturedArticleBlock-module_singleTeaser__8Z0GP .FeaturedArticleBlock-module_sideContent__RNdEb { border-radius: 0 0 var(--radius-lg) var(--radius-lg); } @keyframes FeaturedArticleBlock-module_imageShimmer__dM6oE { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Responsive ─────────────────────────────────────────────────────── */ @media (min-width: 1024px) { .FeaturedArticleBlock-module_heroGrid__UfZ-8.FeaturedArticleBlock-module_withSideTeasers__7XOu0 { grid-template-columns: 2fr 1fr; } .FeaturedArticleBlock-module_sideTeasers__O7wxP { justify-content: stretch; height: 100%; } .FeaturedArticleBlock-module_sideTeaser__ZT1TL { flex: 1; } .FeaturedArticleBlock-module_sideThumbnail__WjyRO { height: auto; } /* Single teaser: image fills available height above text card */ .FeaturedArticleBlock-module_sideTeasers__O7wxP.FeaturedArticleBlock-module_singleTeaser__8Z0GP .FeaturedArticleBlock-module_sideThumbnail__WjyRO { aspect-ratio: unset; flex: 1 1 0; min-height: 0; } .FeaturedArticleBlock-module_sideTeasers__O7wxP.FeaturedArticleBlock-module_singleTeaser__8Z0GP .FeaturedArticleBlock-module_sideContent__RNdEb { flex: none; } } @media (max-width: 1535px) { .FeaturedArticleBlock-module_heroLink__0MBaC, .FeaturedArticleBlock-module_heroPlaceholder__naHsZ { height: 480px; } .FeaturedArticleBlock-module_title__GNQq3 { font-size: var(--text-h4); line-height: var(--text-h4-line-height); } .FeaturedArticleBlock-module_sideThumbnail__WjyRO { width: 140px; min-width: 140px; } .FeaturedArticleBlock-module_sideTitle__Y3trY { font-size: var(--text-body); line-height: var(--text-body-line-height); } } @media (max-width: 1023px) { .FeaturedArticleBlock-module_sideTeasers__O7wxP { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); } .FeaturedArticleBlock-module_sideTeasers__O7wxP.FeaturedArticleBlock-module_singleTeaser__8Z0GP { grid-template-columns: 1fr; } .FeaturedArticleBlock-module_sideTeaser__ZT1TL { flex-direction: column; } .FeaturedArticleBlock-module_sideThumbnail__WjyRO { width: 100%; min-width: unset; height: 120px; border-radius: 0; } .FeaturedArticleBlock-module_sideContent__RNdEb { padding: var(--spacing-4); } } @media (max-width: 767px) { .FeaturedArticleBlock-module_heroLink__0MBaC, .FeaturedArticleBlock-module_heroPlaceholder__naHsZ { height: 420px; } .FeaturedArticleBlock-module_titleBar__0gJuG { padding: var(--spacing-5); } .FeaturedArticleBlock-module_sideTeasers__O7wxP { grid-template-columns: 1fr; } .FeaturedArticleBlock-module_sideTeaser__ZT1TL { flex-direction: row; } .FeaturedArticleBlock-module_sideThumbnail__WjyRO { width: 120px; min-width: 120px; height: 120px; border-radius: var(--radius-lg); } } .SectionHeader-module_sectionHeader__kHfmp { font-family: var(--font-headline); font-size: var(--text-h6); line-height: var(--text-h6-line-height); font-weight: var(--font-weight-semibold); color: var(--color-section-label); padding-bottom: var(--spacing-5); margin: 0; } .LinkCTA-module_link__v6a-b { display: inline-flex; align-items: center; gap: var(--spacing-2); color: var(--color-highlight); font-family: var(--font-headline); font-size: var(--text-h4); font-weight: var(--font-weight-bold); text-decoration: none; transition: opacity var(--duration-20) ease; } .LinkCTA-module_link__v6a-b:hover { opacity: 0.8; } .LinkCTA-module_icon__PI6Ia { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .TeaserGridBlock-module_section__VYzWb { width: 100%; /* padding: var(--spacing-block-y) 0; */ } .TeaserGridBlock-module_inner__aNjdJ { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--block-container-padding, var(--spacing-container)); } /* ─── Grid Container (stacks rows vertically) ─────────────────────────── */ .TeaserGridBlock-module_grid__kTfuz { display: flex; flex-direction: column; gap: var(--spacing-5); } /* ─── Row Layouts ─────────────────────────────────────────────────────── */ .TeaserGridBlock-module_row__euqtw { display: grid; gap: var(--spacing-5); } .TeaserGridBlock-module_cols1__4UzQk { grid-template-columns: 1fr; } .TeaserGridBlock-module_cols2__oG24X { grid-template-columns: repeat(2, 1fr); } .TeaserGridBlock-module_cols3__euthz { grid-template-columns: repeat(3, 1fr); } /* ─── CTA Button ──────────────────────────────────────────────────────── */ .TeaserGridBlock-module_buttonWrapper__s45so { display: flex; justify-content: center; padding-top: var(--spacing-8); } /* ─── Load More ──────────────────────────────────────────────────────── */ .TeaserGridBlock-module_loadMoreContainer__gdRhf { display: flex; justify-content: center; padding-top: var(--spacing-8); } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1023px) { .TeaserGridBlock-module_cols3__euthz { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .TeaserGridBlock-module_cols2__oG24X { grid-template-columns: 1fr; } .TeaserGridBlock-module_cols3__euthz { grid-template-columns: 1fr; } } .MostClickedBlock-module_section__f5qbu { width: 100%; padding: var(--spacing-block-y) 0; } .MostClickedBlock-module_inner__ktXxU { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--spacing-container); } /* ─── 3-Column Layout with Dividers ──────────────────────────────────── */ .MostClickedBlock-module_grid__c5Nuc { display: flex; gap: var(--spacing-2); align-items: stretch; } .MostClickedBlock-module_column__j9VJM { flex: 1; display: flex; flex-direction: column; gap: var(--spacing-2); min-width: 0; } .MostClickedBlock-module_divider__-VRTP { width: 2px; align-self: stretch; background: linear-gradient( to bottom, transparent, var(--color-border-card) 15%, var(--color-border-card) 85%, transparent ); } /* ─── Primary Card (#1) ──────────────────────────────────────────────── */ .MostClickedBlock-module_primaryCard__Vp-vs { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-card-bg); text-decoration: none; color: inherit; flex: 1; transition: opacity var(--duration-20, 200ms) ease; } .MostClickedBlock-module_primaryCard__Vp-vs:hover { opacity: 0.85; } .MostClickedBlock-module_primaryImageWrapper__6-ruu { position: relative; flex: 1; min-height: 0; overflow: hidden; background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: MostClickedBlock-module_imageShimmer__0C7wt 1.5s ease-in-out infinite; } .MostClickedBlock-module_primaryImage__cjeyO { width: 100%; height: 100%; object-fit: cover; display: block; } /* ─── Card Content (shared layout for primary bottom + secondary) ──── */ .MostClickedBlock-module_cardContent__1Y0aW { display: flex; align-items: flex-start; gap: var(--spacing-2); padding: var(--spacing-8) var(--spacing-6); } /* ─── Secondary Cards (#2–5) ─────────────────────────────────────────── */ .MostClickedBlock-module_secondaryCard__QdKjz { display: flex; align-items: flex-start; gap: var(--spacing-2); padding: var(--spacing-8) var(--spacing-6); background: var(--color-card-bg); border-radius: var(--radius-lg); text-decoration: none; color: inherit; flex: 1; transition: opacity var(--duration-20, 200ms) ease; } .MostClickedBlock-module_secondaryCard__QdKjz:hover { opacity: 0.85; } /* ─── Rank Number ────────────────────────────────────────────────────── */ .MostClickedBlock-module_rank__H1Jgv { font-family: var(--font-headline); font-size: var(--text-h1); line-height: 0.9; font-weight: var(--font-weight-bold); color: var(--color-highlight); flex-shrink: 0; width: 40px; } /* ─── Title ──────────────────────────────────────────────────────────── */ .MostClickedBlock-module_title__AH7yY { font-family: var(--font-headline); font-size: var(--text-h4); line-height: var(--text-h4-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* ─── Sidebar Variant (vertical stacked layout) ─────────────────────── */ .MostClickedBlock-module_sidebarVariant__Uwiay { /* Sidebar separation comes from the .sidebar gap; no per-block padding. */ padding: 0; } .MostClickedBlock-module_sidebarVariant__Uwiay .MostClickedBlock-module_inner__ktXxU { max-width: none; padding: 0; } .MostClickedBlock-module_sidebarVariant__Uwiay .MostClickedBlock-module_rank__H1Jgv { font-size: var(--text-h3); width: 24px; } .MostClickedBlock-module_sidebarVariant__Uwiay .MostClickedBlock-module_title__AH7yY { font-size: var(--text-body); line-height: var(--text-body-line-height); } .MostClickedBlock-module_sidebarVariant__Uwiay .MostClickedBlock-module_cardContent__1Y0aW, .MostClickedBlock-module_sidebarVariant__Uwiay .MostClickedBlock-module_secondaryCard__QdKjz { padding: var(--spacing-3) var(--spacing-3); gap: var(--spacing-2); } /* The 3-column grid is stacked vertically in the sidebar, so cards get spaced by two different gaps (outer grid between columns, inner column between cards). Force both to one value for an even card-to-card rhythm. */ .MostClickedBlock-module_sidebarVariant__Uwiay .MostClickedBlock-module_grid__c5Nuc, .MostClickedBlock-module_sidebarVariant__Uwiay .MostClickedBlock-module_column__j9VJM { gap: var(--spacing-3); /* 12px */ } .MostClickedBlock-module_gridVertical__pjc7W { flex-direction: column; gap: var(--spacing-3); } .MostClickedBlock-module_gridVertical__pjc7W .MostClickedBlock-module_divider__-VRTP { display: none; } .MostClickedBlock-module_gridVertical__pjc7W .MostClickedBlock-module_column__j9VJM { flex: none; } .MostClickedBlock-module_gridVertical__pjc7W .MostClickedBlock-module_primaryCard__Vp-vs { flex: none; } .MostClickedBlock-module_gridVertical__pjc7W .MostClickedBlock-module_column__j9VJM:not(:first-child) { flex-direction: column; } /* ─── Skeleton (auto-mode loading state) ─────────────────────────────── */ .MostClickedBlock-module_skeletonCard__SNlnW { background: var(--color-card-bg); border-radius: var(--radius-lg); min-height: 280px; animation: MostClickedBlock-module_skeleton-pulse__rZK-i 1.5s ease-in-out infinite; } .MostClickedBlock-module_skeletonItem__zhlph { background: var(--color-card-bg); border-radius: var(--radius-lg); height: 80px; flex: 1; animation: MostClickedBlock-module_skeleton-pulse__rZK-i 1.5s ease-in-out infinite; } @keyframes MostClickedBlock-module_imageShimmer__0C7wt { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes MostClickedBlock-module_skeleton-pulse__rZK-i { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.3; } } /* ─── Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 1535px) { .MostClickedBlock-module_rank__H1Jgv { font-size: var(--text-h2); line-height: var(--text-h2-line-height); width: 36px; } .MostClickedBlock-module_cardContent__1Y0aW, .MostClickedBlock-module_secondaryCard__QdKjz { padding: var(--spacing-6) var(--spacing-4); } } @media (max-width: 1023px) { .MostClickedBlock-module_grid__c5Nuc { flex-direction: column; gap: var(--spacing-4); } .MostClickedBlock-module_divider__-VRTP { display: none; } .MostClickedBlock-module_column__j9VJM { flex: none; } .MostClickedBlock-module_primaryCard__Vp-vs { flex: none; min-height: 320px; } .MostClickedBlock-module_column__j9VJM:not(:first-child) { flex-direction: row; } } @media (max-width: 767px) { .MostClickedBlock-module_column__j9VJM:not(:first-child) { flex-direction: column; } .MostClickedBlock-module_primaryCard__Vp-vs { min-height: 260px; } .MostClickedBlock-module_rank__H1Jgv { font-size: var(--text-h2); line-height: var(--text-h2-line-height); width: 32px; } } .NewstickerBlock-module_section__b2Ncy { width: 100%; padding: var(--spacing-block-y) 0; } .NewstickerBlock-module_inner__f-apX { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--spacing-container); } .NewstickerBlock-module_container__L7Dnk { background-color: var(--color-card-bg); border-radius: var(--radius-lg); padding: var(--spacing-8) var(--spacing-6); display: flex; flex-direction: column; gap: var(--spacing-8); } /* 2-column grid: 32px row gap, 40px column gap (matches Figma) */ .NewstickerBlock-module_grid__TYHnl { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-8) var(--spacing-10); } /* ─── Individual Item ─────────────────────────────────────────────────── */ .NewstickerBlock-module_item__pr3eD { display: flex; gap: var(--spacing-4); text-decoration: none; color: inherit; transition: opacity var(--duration-20, 200ms) ease; min-width: 0; overflow: hidden; } .NewstickerBlock-module_item__pr3eD:hover { opacity: 0.8; } /* ─── Thumbnail with gradient overlay ────────────────────────────────── */ .NewstickerBlock-module_thumbnail__v1U53 { position: relative; width: 120px; min-width: 120px; height: 120px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: NewstickerBlock-module_imageShimmer__-PihD 1.5s ease-in-out infinite; } .NewstickerBlock-module_thumbnailImage__COwAu { width: 100%; height: 100%; object-fit: cover; } .NewstickerBlock-module_thumbnailGradient__R479S { position: absolute; bottom: 0; left: 0; width: 100%; height: 60px; background: linear-gradient(to top, var(--color-card-bg), transparent); pointer-events: none; } /* ─── Item Content ───────────────────────────────────────────────────── */ .NewstickerBlock-module_itemContent__7O1zY { display: flex; flex-direction: column; gap: var(--spacing-2); min-width: 0; } .NewstickerBlock-module_itemTitle__wpklo { font-family: var(--font-headline); font-size: var(--text-h4); line-height: var(--text-h4-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .NewstickerBlock-module_itemExcerpt__J6sfi { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } /* ─── "Weitere Meldungen" Link ────────────────────────────────────────── */ .NewstickerBlock-module_linkWrapper__fbVeQ { display: flex; justify-content: flex-start; } /* ─── Sidebar Variant (vertical compact layout) ─────────────────────── */ .NewstickerBlock-module_sidebarVariant__Hp-RN { /* Sidebar separation comes from the .sidebar gap; no per-block padding. */ padding: 0; } .NewstickerBlock-module_sidebarVariant__Hp-RN .NewstickerBlock-module_inner__f-apX { max-width: none; padding: 0; } .NewstickerBlock-module_sidebarVariant__Hp-RN .NewstickerBlock-module_grid__TYHnl { grid-template-columns: 1fr; } .NewstickerBlock-module_sidebarVariant__Hp-RN .NewstickerBlock-module_container__L7Dnk { padding: var(--spacing-5) var(--spacing-4); gap: var(--spacing-5); } .NewstickerBlock-module_sidebarVariant__Hp-RN .NewstickerBlock-module_itemTitle__wpklo { font-size: var(--text-small); line-height: var(--text-small-line-height); -webkit-line-clamp: 4; line-clamp: 4; } .NewstickerBlock-module_sidebarVariant__Hp-RN .NewstickerBlock-module_itemExcerpt__J6sfi { font-size: var(--text-small); line-height: var(--text-small-line-height); } .NewstickerBlock-module_sidebarVariant__Hp-RN .NewstickerBlock-module_thumbnail__v1U53 { width: 80px; min-width: 80px; height: 80px; } /* ─── Full-Width Variant (compact home page mode) ────────────────────── */ .NewstickerBlock-module_fullWidthVariant__UCIYe .NewstickerBlock-module_container__L7Dnk { padding: 0; background-color: transparent; gap: var(--spacing-6); } /* Reset FeaturedArticleBlock's wrapper padding/centering when embedded as the prominent first item inside the full-width newsticker */ .NewstickerBlock-module_featuredWrapper__MQtGt > section { padding: 0; max-width: none; margin: 0; } .NewstickerBlock-module_fullWidthList__6QODw { display: flex; flex-direction: column; gap: var(--spacing-6); background-color: var(--color-card-bg); border-radius: var(--radius-lg); padding: var(--spacing-8) var(--spacing-6); } .NewstickerBlock-module_fullWidthItem__eYe8M { display: flex; gap: var(--spacing-5); text-decoration: none; color: inherit; transition: opacity var(--duration-20, 200ms) ease; } .NewstickerBlock-module_fullWidthItem__eYe8M:hover { opacity: 0.8; } .NewstickerBlock-module_fullWidthThumbnail__ircuL { position: relative; width: 317px; min-width: 317px; height: 200px; border-radius: var(--radius-lg); overflow: hidden; flex-shrink: 0; background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: NewstickerBlock-module_imageShimmer__-PihD 1.5s ease-in-out infinite; } .NewstickerBlock-module_fullWidthContent__8V3pQ { display: flex; flex-direction: column; gap: var(--spacing-3); min-width: 0; justify-content: center; } .NewstickerBlock-module_fullWidthTitle__F3nku { font-family: var(--font-headline); font-size: var(--text-h3); line-height: var(--text-h3-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .NewstickerBlock-module_fullWidthExcerpt__Qf5WY { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } @keyframes NewstickerBlock-module_imageShimmer__-PihD { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 1535px) { .NewstickerBlock-module_container__L7Dnk { padding: var(--spacing-6) var(--spacing-5); gap: var(--spacing-6); } .NewstickerBlock-module_grid__TYHnl { gap: var(--spacing-6) var(--spacing-8); } .NewstickerBlock-module_thumbnail__v1U53 { width: 100px; min-width: 100px; height: 100px; } .NewstickerBlock-module_fullWidthThumbnail__ircuL { width: 240px; min-width: 240px; height: 152px; } .NewstickerBlock-module_fullWidthTitle__F3nku { font-size: var(--text-h4); line-height: var(--text-h4-line-height); } } @media (max-width: 767px) { .NewstickerBlock-module_grid__TYHnl { grid-template-columns: 1fr; } .NewstickerBlock-module_thumbnail__v1U53 { width: 100px; min-width: 100px; height: 100px; } .NewstickerBlock-module_fullWidthItem__eYe8M { flex-direction: column; gap: var(--spacing-3); } .NewstickerBlock-module_fullWidthThumbnail__ircuL { width: 100%; min-width: unset; height: 200px; } .NewstickerBlock-module_fullWidthList__6QODw { padding: var(--spacing-6) var(--spacing-4); } } .AdBlock-module_section__jVNbl { width: 100%; padding: var(--spacing-block-y) 0; } .AdBlock-module_inner__2NpUO { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--spacing-container); } .AdBlock-module_placeholder__6bTCe { display: flex; align-items: center; justify-content: center; background-color: var(--color-card-bg); border: 1px dashed var(--color-border-card); border-radius: var(--radius-lg); } .AdBlock-module_label__u15-O { font-family: var(--font-body); font-size: var(--text-small); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); } /* Size variants */ .AdBlock-module_fullWidth__c6IFM { width: 100%; min-height: 120px; } .AdBlock-module_rectangle__xI0JO { width: 300px; height: 250px; margin: 0 auto; } .AdBlock-module_leaderboard__tV7WP { width: 100%; max-width: 728px; height: 90px; margin: 0 auto; } .TeaserBlock-module_section__ViYl2 { width: 100%; /* padding: var(--spacing-block-y) 0; */ } .TeaserBlock-module_inner__xuYMt { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--block-container-padding, var(--spacing-container)); } /* ─── Card Container ─────────────────────────────────────────────────── */ .TeaserBlock-module_card__nMPdu, .TeaserBlock-module_cardSide__gviRr { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--block-container-padding, var(--spacing-container)); display: flex; flex-direction: column; text-decoration: none; color: inherit; } /* ─── Media Wrapper (clips image + banner) ───────────────────────────── */ .TeaserBlock-module_mediaWrapper__QIgrH { position: relative; border-radius: var(--radius-lg); overflow: hidden; } /* ─── Breaking News Banner ───────────────────────────────────────────── */ .TeaserBlock-module_breakingBanner__GYDip { padding: var(--spacing-3); background-color: var(--color-highlight); color: var(--color-text-primary); font-family: var(--font-headline); font-size: var(--text-large); line-height: var(--text-large-line-height); font-weight: var(--font-weight-regular); text-transform: uppercase; } /* ─── Image + Gradient ───────────────────────────────────────────────── */ .TeaserBlock-module_imageWrapper__4DBa3 { position: relative; width: 100%; aspect-ratio: 16 / 9; background-color: var(--color-placeholder-background); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0) 100% ); background-size: 200% 100%; animation: TeaserBlock-module_imageShimmer__uMdCf 1.5s ease-in-out infinite; } .TeaserBlock-module_image__xz311 { width: 100%; height: 100%; object-fit: cover; } .TeaserBlock-module_gradient__wPM4q { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to top, var(--color-gradient-dark) 0%, transparent 100%); } /* ─── Image-overlay badges ───────────────────────────────────────────── */ .TeaserBlock-module_durationBadge__vN5I0 { position: absolute; bottom: var(--spacing-4); right: var(--spacing-4); z-index: 1; padding: var(--spacing-1) var(--spacing-2); background-color: rgba(15, 23, 42, 0.75); color: var(--color-text-secondary); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); white-space: nowrap; } /* ─── Centered Play Button ───────────────────────────────────────────── */ .TeaserBlock-module_playButton__keNnb { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background-color: var(--color-highlight); border: none; border-radius: var(--radius-pill); color: var(--color-text-primary); cursor: pointer; transition: transform var(--duration-30) ease-in-out; } .TeaserBlock-module_playButton__keNnb svg { width: 32px; height: 32px; margin-left: 3px; /* optical center for play triangle */ } .TeaserBlock-module_card__nMPdu:hover .TeaserBlock-module_playButton__keNnb, .TeaserBlock-module_cardSide__gviRr:hover .TeaserBlock-module_playButton__keNnb { transform: translate(-50%, -50%) scale(1.1); } /* ─── Info Card (overlaps media via negative margin) ─────────────────── */ .TeaserBlock-module_infoCard__Ts3HR { position: relative; z-index: 1; /* 75% of parent on typical desktops, capped at 960px on ultrawide, never below 20rem so very narrow viewports still produce a readable card. */ width: clamp(20rem, 75%, 60rem); /* Proportional overlap that tracks viewport width instead of staying visually thin on wider screens. Range: 112px (1024px vp) → 160px (~1920px vp). */ margin-top: clamp(-10rem, -9vw, -7rem); margin-left: var(--spacing-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-4); padding: var(--spacing-8); background-color: var(--color-card-bg); border-radius: var(--radius-lg); } .TeaserBlock-module_titleGroup__cELEE { display: flex; flex-direction: column; gap: var(--spacing-6); width: 100%; } .TeaserBlock-module_titleBlock__1zgSY { width: 100%; padding-bottom: var(--spacing-8); border-bottom: 2px solid var(--color-border-card); } .TeaserBlock-module_title__iaySH { font-family: var(--font-headline); font-size: var(--text-h1); line-height: var(--text-h1-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; } .TeaserBlock-module_publishedAt__XXdZ6 { font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); color: var(--color-text-muted); } /* ─── Desktop: cap image height to keep headline above the fold ─────── */ @media (min-width: 1024px) { .TeaserBlock-module_card__nMPdu .TeaserBlock-module_imageWrapper__4DBa3 { max-height: 480px; } } /* ─── Side Variant (desktop only) ────────────────────────────────────── * * * Card keeps container padding so media aligns with the content grid. * Info card is absolutely positioned and inset from the padding edge, * creating visible breathing room on the right. * ──────────────────────────────────────────────────────────────────────── */ @media (min-width: 1024px) { .TeaserBlock-module_cardSide__gviRr { position: relative; } .TeaserBlock-module_cardSide__gviRr .TeaserBlock-module_mediaWrapper__QIgrH { width: 68%; } .TeaserBlock-module_cardSide__gviRr .TeaserBlock-module_imageWrapper__4DBa3 { aspect-ratio: 16 / 9; } .TeaserBlock-module_cardSide__gviRr .TeaserBlock-module_infoCard__Ts3HR { position: absolute; top: 50%; right: var(--spacing-container); transform: translateY(-50%); margin: 0; max-width: 40%; width: 40%; } } @keyframes TeaserBlock-module_imageShimmer__uMdCf { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ─── Responsive ─────────────────────────────────────────────────────── */ @media (max-width: 1535px) { .TeaserBlock-module_title__iaySH { font-size: var(--text-h2); line-height: var(--text-h2-line-height); } } @media (max-width: 1023px) { .TeaserBlock-module_mediaWrapper__QIgrH { border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .TeaserBlock-module_imageWrapper__4DBa3 { aspect-ratio: 16 / 9; } .TeaserBlock-module_infoCard__Ts3HR { margin-top: 0; margin-left: 0; width: 100%; /* override desktop clamp so card flows full-width under media */ padding: var(--spacing-6); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .TeaserBlock-module_title__iaySH { font-size: var(--text-h3); line-height: var(--text-h3-line-height); } .TeaserBlock-module_titleBlock__1zgSY { padding-bottom: var(--spacing-6); } .TeaserBlock-module_durationBadge__vN5I0 { bottom: var(--spacing-3); right: var(--spacing-3); } .TeaserBlock-module_playButton__keNnb { width: 48px; height: 48px; } .TeaserBlock-module_playButton__keNnb svg { width: 24px; height: 24px; margin-left: 2px; } } .LivestreamBlock-module_section__q4ckz { width: 100%; padding: var(--spacing-block-y) 0; } .LivestreamBlock-module_inner__R6qLL { max-width: var(--max-width-container); margin: 0 auto; padding: 0 var(--spacing-container); } /* ─── Full-width Banner ───────────────────────────────────────────────── */ .LivestreamBlock-module_bannerLink__5FIrl { display: block; text-decoration: none; border-radius: var(--radius-lg); overflow: hidden; transition: opacity var(--duration-20) ease; } .LivestreamBlock-module_bannerLink__5FIrl:hover { opacity: 0.9; } .LivestreamBlock-module_banner__2pB6S { position: relative; width: 100%; height: 120px; border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-card-bg); } .LivestreamBlock-module_image__Bp8sm { width: 100%; height: 100%; display: block; object-fit: cover; } /* TeamHeader — title + hero banner */ .TeamHeader-module_header__MUuny { display: flex; flex-direction: column; align-content: start; gap: var(--spacing-4); } .TeamHeader-module_title__yV2Xu { font-family: var(--font-headline); font-weight: var(--font-weight-bold); font-size: var(--text-h1); line-height: var(--text-h1-line-height); color: var(--color-text-primary); margin: 0; text-box-trim: trim-both; } .TeamHeader-module_banner__2lcO1 { width: 100%; height: 200px; border-radius: var(--radius-lg); overflow: hidden; position: relative; } .TeamHeader-module_bannerImage__3iOGs { width: 100%; height: 100%; object-fit: cover; } /* Tablet+ — taller banner */ @media (min-width: 768px) { .TeamHeader-module_banner__2lcO1 { height: 0; padding-bottom: 43.5%; /* ~410/943 aspect ratio from Figma 2xl */ } .TeamHeader-module_bannerImage__3iOGs { position: absolute; inset: 0; } } /* TeamMemberCard — responsive team member card */ /* ─── Card container ─────────────────────────────────────────────────── */ .TeamMemberCard-module_card__BGI-b { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; } /* ─── Photo ──────────────────────────────────────────────────────────── */ .TeamMemberCard-module_photoWrapper__858mP { width: 100%; height: 360px; flex-shrink: 0; } .TeamMemberCard-module_photo__PKu2I { width: 100%; height: 100%; object-fit: cover; } /* ─── Content area ───────────────────────────────────────────────────── */ .TeamMemberCard-module_content__PLOR1 { display: flex; flex-direction: column; gap: var(--spacing-8); padding: var(--spacing-5); background: var(--color-bg-secondary); } .TeamMemberCard-module_textGroup__AyXGy { display: flex; flex-direction: column; gap: var(--spacing-2); } .TeamMemberCard-module_name__CL7Wn { font-family: var(--font-headline); font-weight: var(--font-weight-bold); font-size: var(--text-h3); line-height: var(--text-h3-line-height); color: var(--color-text-primary); margin: 0; } .TeamMemberCard-module_bio__4x9l3 { margin: 0; } /* ─── Link ───────────────────────────────────────────────────────────── */ .TeamMemberCard-module_link__7HtXz { display: flex; align-items: center; gap: var(--spacing-2); color: var(--color-active); text-decoration: none; font-family: var(--font-headline); font-weight: var(--font-weight-bold); font-size: var(--label-button); line-height: var(--label-button-line-height); } .TeamMemberCard-module_link__7HtXz:hover { opacity: 0.85; } .TeamMemberCard-module_linkIcon__A2j28 { width: 24px; height: 24px; flex-shrink: 0; } /* ─── Tablet+ — horizontal layout ────────────────────────────────────── */ @media (min-width: 768px) { .TeamMemberCard-module_card__BGI-b { flex-direction: row; } .TeamMemberCard-module_photoWrapper__858mP { width: 280px; height: auto; } .TeamMemberCard-module_content__PLOR1 { flex: 1 1 0%; min-width: 0; padding: var(--spacing-10); justify-content: space-between; } .TeamMemberCard-module_textGroup__AyXGy { gap: var(--spacing-4); } } /* TeamGridBlock — team member card grid layout */ .TeamGridBlock-module_container__aqOQ9 { display: flex; flex-direction: column; gap: var(--spacing-8); } .TeamGridBlock-module_membersList__aU9Ca { display: flex; flex-direction: column; gap: var(--spacing-5); } /* Empty state — shown when no team members exist */ .TeamGridBlock-module_emptyState__TCFP6 { text-align: center; padding: var(--spacing-12) var(--spacing-4); color: var(--color-text-secondary); } .TeamGridBlock-module_emptyMessage__rTsKH { font-size: var(--text-h5); line-height: var(--text-h5-line-height); margin-top: var(--spacing-4); color: var(--color-text-tertiary); } /* TeamMemberProfileBlock — single team member profile */ .TeamMemberProfileBlock-module_detail__p4yk1 { display: flex; flex-direction: column; gap: var(--spacing-8); } /* ─── Photo ──────────────────────────────────────────────────────────── */ .TeamMemberProfileBlock-module_photoWrapper__7d8S7 { width: 100%; border-radius: var(--radius-lg); overflow: hidden; } .TeamMemberProfileBlock-module_photo__uaASA { width: 100%; height: 100%; display: block; /* aspect-ratio: 4 / 3; */ object-fit: cover; object-position: center center; } @media (min-width: 768px) { /* .photo { aspect-ratio: 16 / 9; } */ } /* ─── Profile content ────────────────────────────────────────────────── */ .TeamMemberProfileBlock-module_profile__KGer4 { display: flex; flex-direction: column; gap: var(--spacing-6); } .TeamMemberProfileBlock-module_nameGroup__Qu3RY { display: flex; flex-direction: column; gap: var(--spacing-2); } .TeamMemberProfileBlock-module_name__yEFtt { font-family: var(--font-headline); font-weight: var(--font-weight-bold); font-size: var(--text-h1); line-height: var(--text-h1-line-height); color: var(--color-text-primary); margin: 0; } .TeamMemberProfileBlock-module_role__0Qrb5 { font-family: var(--font-body); font-weight: var(--font-weight-regular); font-size: var(--text-large); line-height: var(--text-large-line-height); color: var(--color-active); } .TeamMemberProfileBlock-module_bio__-7dmG { margin: 0; } /* ─── Back link ──────────────────────────────────────────────────────── */ .TeamMemberProfileBlock-module_backLink__XH-2X { display: inline-flex; align-items: center; gap: var(--spacing-2); color: var(--color-active); text-decoration: none; font-family: var(--font-headline); font-weight: var(--font-weight-bold); font-size: var(--label-button); line-height: var(--label-button-line-height); } .TeamMemberProfileBlock-module_backLink__XH-2X:hover { opacity: 0.85; } .TeamMemberProfileBlock-module_backIcon__rf83O { width: 24px; height: 24px; flex-shrink: 0; transform: rotate(180deg); } /* SidebarLayout — two-column grid (main + sidebar) */ .SidebarLayout-module_layout__QlGZN { display: grid; grid-template-columns: 1fr; gap: var(--spacing-block-gap); width: 100%; max-width: var(--max-width-content, var(--max-width-container)); margin: 0 auto; padding: var(--spacing-5) var(--spacing-container) 0; } /* Bleed hero — first content item rendered full content width above the split. Wraps in the same container as .layout so content stays gridded, but the contained block's own inner padding is zeroed (parent provides it). */ .SidebarLayout-module_heroBleed__ojr2C { width: 100%; max-width: var(--max-width-content, var(--max-width-container)); margin: 0 auto; padding: var(--spacing-5) var(--spacing-container) 0; --block-container-padding: 0px; } .SidebarLayout-module_main__JFiV1 { display: flex; flex-direction: column; gap: var(--spacing-block-gap); min-width: 0; /* Layout already provides horizontal padding via .layout. Tell child blocks to skip their own inner-container padding. */ --block-container-padding: 0px; /* Layout already provides top padding via .layout, so non-CMS section wrappers (e.g. BroadcastsPage) should align with the sidebar's first block instead of doubling up. FullWidth context lets this fall through. */ --section-wrapper-top: 0px; /* In rail mode the BroadcastNav lives inside the main column and should align with the column edge; in bleed + fullWidth it sits in a centered container and reads better when centered itself. */ --broadcast-nav-justify: flex-start; /* When FeaturedArticleBlock renders inline (not extracted as hero), reduce its top padding to match the surrounding flow. */ --featured-hero-top: 0px; } .SidebarLayout-module_sidebar__9LJhs { display: flex; flex-direction: column; /* Stacked (< 1024px): normalised 20px gap, matching main column + teaser↔sidebar. Desktop column gap is restored below. */ gap: var(--spacing-block-gap); } /* ─── Sidebar resets ──────────────────────────────────────────────────── */ /* When MostClicked / Newsticker render inside the sidebar, strip their section wrapper padding + inner container constraints so they fill the sidebar column naturally. */ .SidebarLayout-module_sidebar__9LJhs .section { padding: 0; } .SidebarLayout-module_sidebar__9LJhs .inner { max-width: none; padding: 0; margin: 0; } /* ─── Desktop: two-column layout ──────────────────────────────────────── */ @media (min-width: 1024px) { .SidebarLayout-module_layout__QlGZN { grid-template-columns: minmax(0, 1fr) 291px; } /* Real side column — roomier internal gap than the stacked-mobile rhythm. */ .SidebarLayout-module_sidebar__9LJhs { gap: var(--spacing-8); } } /** * VideoCard Styles * * Dark card with 16:9 video thumbnail, badge overlays, and info panel. * Follows the ArticleCard/TeaserCard design language. */ /* ═══════════════════════════════════════════════════════════════════════════ * Card Container * ═══════════════════════════════════════════════════════════════════════════ */ .VideoCard-module_card__SnOLl { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background-color: transparent; cursor: pointer; transition: transform var(--duration-30) ease-in-out, box-shadow var(--duration-30) ease-in-out; /* Mobile: 1 card per row */ width: 100%; } /* Tablet (md): 2 cards per row */ @media (min-width: 768px) { .VideoCard-module_card__SnOLl { width: calc((100% - var(--spacing-5)) / 2); } } .VideoCard-module_card__SnOLl:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); } .VideoCard-module_cardLink__heb2x { display: flex; flex-direction: column; height: 100%; flex: 1; text-decoration: none; color: inherit; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════════ * Thumbnail Section * ═══════════════════════════════════════════════════════════════════════════ */ .VideoCard-module_thumbnailContainer__E3LBU { position: relative; width: 100%; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background-color: var(--color-placeholder-background); border-radius: var(--radius-lg) var(--radius-lg) 0 0; aspect-ratio: 16 / 9; } .VideoCard-module_thumbnail__GIfhr { width: 100%; height: 100%; object-fit: cover; display: block; } .VideoCard-module_thumbnailGradient__HTRND { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-card-bg) 0%, transparent 40%); pointer-events: none; } .VideoCard-module_thumbnailPlaceholder__-gM0g { width: 100%; height: 100%; background: var(--color-placeholder-background); display: flex; align-items: center; justify-content: center; } .VideoCard-module_placeholderIcon__r3Haq { width: 48px; height: 48px; color: var(--color-placeholder-text); } /* ─── Badge Overlays ──────────────────────────────────────────────────── */ .VideoCard-module_videoBadge__0Sjqx { position: absolute; bottom: var(--spacing-3); left: var(--spacing-3); z-index: 1; } .VideoCard-module_durationBadge__lzBTE { position: absolute; bottom: var(--spacing-3); right: var(--spacing-3); z-index: 1; padding: var(--spacing-1) var(--spacing-2); background: rgba(15, 23, 42, 0.8); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } /* ═══════════════════════════════════════════════════════════════════════════ * Info Panel * ═══════════════════════════════════════════════════════════════════════════ */ .VideoCard-module_info__qELdv { padding: var(--spacing-5) var(--spacing-4); background-color: var(--color-card-bg); border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex: 1; display: flex; flex-direction: column; gap: var(--spacing-2); } .VideoCard-module_title__6Qphs { font-family: var(--font-headline); font-size: var(--text-h5); line-height: var(--text-h5-line-height); font-weight: var(--font-weight-bold); color: var(--color-text-primary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; } .VideoCard-module_meta__lJwmE { display: flex; align-items: center; gap: var(--spacing-2); font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); color: var(--color-text-tertiary); } .VideoCard-module_categoryPill__JCBqF { display: inline-flex; padding: 2px var(--spacing-2); background-color: var(--color-primary-alpha-10); color: var(--color-primary); border-radius: var(--radius-sm); font-size: var(--text-small); line-height: var(--text-small-line-height); font-weight: var(--font-weight-semibold); white-space: nowrap; } .VideoCard-module_publishedAt__Suz6k { font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); color: var(--color-text-muted); margin-top: auto; } /* ═══════════════════════════════════════════════════════════════════════════ * Responsive * ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .VideoCard-module_info__qELdv { padding: var(--spacing-4) var(--spacing-3); } .VideoCard-module_title__6Qphs { font-size: var(--text-h6); line-height: var(--text-h6-line-height); } } @media (min-width: 1024px) { .VideoCard-module_title__6Qphs { font-size: var(--text-h4); line-height: var(--text-h4-line-height); -webkit-line-clamp: 2; } } /** * EmptyState Styles * * Dark card matching NotFoundPage's errorContainer pattern: * card-bg background, border, rounded corners, centered content. */ .EmptyState-module_card__3L9oB { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-3); background: var(--color-card-bg); border: 1px solid var(--color-border-card); border-radius: var(--radius-lg); padding: var(--spacing-12) var(--spacing-6); text-align: center; } .EmptyState-module_icon__-zZe5 { color: var(--color-text-muted); width: 48px; height: 48px; margin-bottom: var(--spacing-2); } .EmptyState-module_icon__-zZe5 > svg { width: 100%; height: 100%; } .EmptyState-module_title__ojFWr { font-family: var(--font-headline); font-size: var(--text-h4); line-height: var(--text-h4-line-height); font-weight: var(--font-weight-bold); color: var(--color-text-secondary); margin: 0; } .EmptyState-module_message__QFBpp { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--text-body-line-height); color: var(--color-text-tertiary); max-width: 400px; margin: 0; } .EmptyState-module_actions__vU-br { margin-top: var(--spacing-2); } @media (max-width: 767px) { .EmptyState-module_card__3L9oB { padding: var(--spacing-8) var(--spacing-4); } .EmptyState-module_title__ojFWr { font-size: var(--text-h5); line-height: var(--text-h5-line-height); } .EmptyState-module_icon__-zZe5 { width: 40px; height: 40px; } } /** * VideosPage Styles * * Labeled filter dropdowns + active filter pills + paginated video grid. * Renders inside SidebarLayout's main column via emptyFallback. */ /* ═══════════════════════════════════════════════════════════════════════════ * Header * ═══════════════════════════════════════════════════════════════════════════ */ .VideosPage-module_header__G9M1C { margin-bottom: var(--spacing-4); } /* ═══════════════════════════════════════════════════════════════════════════ * Filter Bar * ═══════════════════════════════════════════════════════════════════════════ */ .VideosPage-module_filterBar__1oSQW { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--spacing-3); } .VideosPage-module_filterGroup__uskxm { flex: 1 1 140px; max-width: 220px; } .VideosPage-module_resetGroup__tbIUc { flex: 1 1 140px; } .VideosPage-module_resetGroup__tbIUc > button { width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ * Active Filter Pills — reserved slot below dropdowns * * Always rendered with a fixed min-height so the grid never shifts * when pills appear or disappear. * ═══════════════════════════════════════════════════════════════════════════ */ .VideosPage-module_pillSlot__P-HTu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2); min-height: 28px; margin-top: var(--spacing-5); margin-bottom: var(--spacing-4); } .VideosPage-module_pill__xOal8 { display: inline-flex; align-items: center; gap: var(--spacing-1); padding: var(--spacing-1) var(--spacing-2) var(--spacing-1) var(--spacing-3); background-color: var(--color-primary-alpha-10); color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-small); line-height: var(--text-small-line-height); font-weight: var(--font-weight-semibold); white-space: nowrap; } .VideosPage-module_pillDismiss__tXgLy { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: var(--color-primary); cursor: pointer; padding: 0; transition: background-color var(--duration-15) var(--ease-default); } .VideosPage-module_pillDismiss__tXgLy:hover { background-color: var(--color-primary-alpha-10); } .VideosPage-module_pillDismiss__tXgLy svg { width: 12px; height: 12px; } /* ═══════════════════════════════════════════════════════════════════════════ * Video Grid * ═══════════════════════════════════════════════════════════════════════════ */ .VideosPage-module_grid__aIogn { display: flex; flex-wrap: wrap; gap: var(--spacing-5); width: 100%; } /* ═══════════════════════════════════════════════════════════════════════════ * Load More + Summary * ═══════════════════════════════════════════════════════════════════════════ */ .VideosPage-module_loadMoreContainer__x7kUv { display: flex; justify-content: center; margin-top: var(--spacing-8); margin-bottom: var(--spacing-6); } .VideosPage-module_loadMoreError__lKcsY { text-align: center; color: var(--color-error, #dc2626); font-size: var(--text-small); line-height: var(--text-small-line-height); margin-top: var(--spacing-4); } .VideosPage-module_resultsSummary__HskFJ { text-align: center; color: var(--color-text-muted); font-size: var(--text-small); line-height: var(--text-small-line-height); margin-top: var(--spacing-2); opacity: 0.7; } /* ═══════════════════════════════════════════════════════════════════════════ * Responsive * ═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 767px) { .VideosPage-module_header__G9M1C { margin-bottom: var(--spacing-3); } .VideosPage-module_filterBar__1oSQW { gap: var(--spacing-2); } .VideosPage-module_filterGroup__uskxm, .VideosPage-module_resetGroup__tbIUc { flex: 1 1 calc(50% - var(--spacing-2) / 2); max-width: none; } .VideosPage-module_pillSlot__P-HTu { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); } }