/* Media Release — detail page (Figma DOBCEL-DNA3 · 5943:13) Scope: title banner, article, image gallery, media contact. Header and footer come from the live site. The live header is position: fixed (84px desktop, 78px mobile header at <=991px). - >=1200px: app.js pushes down by the header height, so the banner starts below it. Figma's 224px label offset includes the header strip: 224 - 84 = 140px padding. - <=1199px: live dev.css forces #body { margin-top: 0 !important }, so the banner sits UNDER the header and its padding must include the header height. */ .media-release-detail { --mrd-navy: #040040; --mrd-purple: #391b76; --mrd-violet: #4d3384; --mrd-heading: #2a2671; --mrd-lavender: #d7d6e9; --mrd-link: #211eb6; --mrd-ink: #000; --mrd-column: 978px; --mrd-media: 1277px; --mrd-gutter: 24px; background: #fff; } .media-release-detail__column { width: 100%; max-width: calc(var(--mrd-column) + (var(--mrd-gutter) * 2)); margin: 0 auto; padding: 0 var(--mrd-gutter); } /* Title banner */ .media-release-hero { padding: 140px 0 85px; color: #fff; background: var(--mrd-navy); } .media-release-hero__label { margin: 0 0 14px; color: var(--mrd-lavender); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 1.12px; text-transform: uppercase; } .media-release-hero__title { margin: 0; color: #fff; font: 400 52px/1.173 "Tenor Sans", sans-serif; letter-spacing: 0; word-break: break-word; } /* Article */ .media-release-article__date { display: block; margin: 55px 0 0; color: var(--mrd-violet); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: 1.12px; text-transform: uppercase; } /* Content blocks (Content matrix: Full Text Editor + gallery modules, any order). Spacing lives on the block wrapper: 48px date -> first block, 74px between blocks (Figma body -> image), 77px last block -> Media Contact. */ .media-release-content { margin-top: 48px; } .media-release-block + .media-release-block { margin-top: 74px; } /* Rich text is plain CKEditor output inside .redactor-styles. Prefixed with .media-release-detail to outrank the live `.redactor-styles` rules (grey text, 35px gaps, blue links) whatever order the stylesheets load in. */ .media-release-detail .media-release-article__body { color: var(--mrd-ink); font-size: 16px; line-height: 1.665; letter-spacing: .56px; } .media-release-detail .media-release-article__body > * { margin: 0 0 1.665em; } .media-release-detail .media-release-article__body > :last-child { margin-bottom: 0; } .media-release-detail .media-release-article__body a { display: inline; color: var(--mrd-link); text-decoration: underline; word-break: break-word; } /* Gallery */ .media-release-gallery { position: relative; width: calc(100% - (var(--mrd-gutter) * 2)); max-width: var(--mrd-media); margin: 0 auto; } .media-release-gallery__stage { position: relative; overflow: hidden; aspect-ratio: 1277.35 / 852.83; background: var(--mrd-lavender); -ms-touch-action: pan-y; touch-action: pan-y; } .media-release-gallery__slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; -webkit-transition: opacity .6s ease, visibility 0s linear .6s; transition: opacity .6s ease, visibility 0s linear .6s; } .media-release-gallery__slide.is-active { opacity: 1; visibility: visible; -webkit-transition: opacity .6s ease, visibility 0s; transition: opacity .6s ease, visibility 0s; } .media-release-gallery__slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-user-drag: none; } /* Desktop: vertical controls in the right margin, as drawn */ .media-release-gallery__nav { position: absolute; top: 0; left: calc(100% + 67.5px); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 40px; } .media-release-gallery__nav[hidden] { display: none; } .media-release-gallery__line { display: block; border-left: .5px solid var(--mrd-lavender); } .media-release-gallery__line--before { height: 201.5px; } .media-release-gallery__line--after { height: 340px; } .media-release-gallery__counter { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 61.5px; margin: 0; color: var(--mrd-purple); font-size: 16px; font-weight: 300; line-height: 24px; letter-spacing: .8px; white-space: nowrap; } .media-release-gallery__arrows { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 7px; margin-top: 21px; } .media-release-gallery__arrow { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--mrd-lavender); border-radius: 50%; color: var(--mrd-purple); background: transparent; cursor: pointer; } .media-release-gallery__arrow svg { display: block; width: 7.364px; height: 18px; -webkit-transition: -webkit-transform .3s ease; transition: transform .3s ease; } .media-release-gallery__arrow--prev svg { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .media-release-gallery__arrow:hover, .media-release-gallery__arrow:focus-visible { border-color: var(--mrd-purple); } .media-release-gallery__arrow:focus-visible { outline: 2px solid var(--mrd-purple); outline-offset: 2px; } .media-release-gallery__caption { min-height: 24px; margin: 11px 0 0; color: var(--mrd-purple); font-size: 16px; font-weight: 300; line-height: 24px; letter-spacing: .8px; text-transform: uppercase; } /* Media contact */ .media-release-contact { margin-top: 77px; padding: 51.5px 0 66px; background: var(--mrd-lavender); } .media-release-contact__head { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 16px 24px; } .media-release-contact__title { margin: 0; color: var(--mrd-heading); font-family: "Poppins", sans-serif; font-size: 28px; font-weight: 400; line-height: 1.665; letter-spacing: .98px; } .media-release-contact__back { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-width: 186.5px; height: 37px; padding: 0 20px; border-radius: 18.5px; color: var(--mrd-lavender); background: var(--mrd-purple); font-size: 12px; line-height: 1; letter-spacing: .36px; text-transform: uppercase; white-space: nowrap; } .media-release-contact__back:hover, .media-release-contact__back:focus-visible { color: var(--mrd-purple); background: #fff; } .media-release-contact__details { margin: 20px 0 0; color: var(--mrd-ink); font-size: 16px; font-style: normal; line-height: 1.665; letter-spacing: .56px; } .media-release-contact__details p { margin: 0; } .media-release-contact__details a { display: inline; color: var(--mrd-link); word-break: break-word; } .media-release-contact__details a:hover, .media-release-contact__details a:focus-visible { text-decoration: underline; } .media-release-contact__download { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14.5px; margin-top: 41px; color: var(--mrd-navy); font-size: 16px; font-weight: 500; line-height: 24px; letter-spacing: .8px; } .media-release-contact__download-icon { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 53px; height: 53px; border-radius: 50%; background: var(--mrd-violet); -webkit-transition: background-color .3s ease; transition: background-color .3s ease; } .media-release-contact__download-icon svg { display: block; width: 25.1px; height: 30.87px; } .media-release-contact__download-label { word-break: break-word; } .media-release-contact__download:hover, .media-release-contact__download:focus-visible { color: var(--mrd-purple); } .media-release-contact__download:hover .media-release-contact__download-label, .media-release-contact__download:focus-visible .media-release-contact__download-label { text-decoration: underline; } .media-release-contact__download:hover .media-release-contact__download-icon, .media-release-contact__download:focus-visible .media-release-contact__download-icon { background: var(--mrd-purple); } /* Responsive — house breakpoints */ /* Below 1560 the right margin can no longer hold the vertical controls: they become a horizontal row under the image. */ @media (max-width: 1559px) { .media-release-gallery__nav { position: static; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: auto; margin-top: 16px; } .media-release-gallery__line { border-top: .5px solid var(--mrd-lavender); border-left: 0; } .media-release-gallery__line--before { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; height: 0; } .media-release-gallery__line--after { width: 40px; height: 0; } .media-release-gallery__counter { height: auto; padding: 0 20px; } .media-release-gallery__arrows { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; margin: 0 0 0 20px; } .media-release-gallery__arrow--prev svg { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .media-release-gallery__arrow--next svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .media-release-gallery__caption { margin-top: 12px; } } @media (max-width: 1199px) { .media-release-hero { padding: 184px 0 70px; /* 84px header + 100px */ } .media-release-hero__title { font-size: 44px; } .media-release-contact { margin-top: 64px; } } @media (max-width: 991px) { .media-release-hero { padding: 142px 0 56px; /* 78px mobile header + 64px */ } .media-release-hero__title { font-size: 36px; } .media-release-article__date { margin-top: 40px; } .media-release-content { margin-top: 32px; } .media-release-block + .media-release-block { margin-top: 56px; } .media-release-contact { padding: 44px 0 52px; } .media-release-contact__title { font-size: 24px; } } @media (max-width: 767px) { .media-release-detail { --mrd-gutter: 20px; } .media-release-hero { padding: 122px 0 44px; /* 78px mobile header + 44px */ } .media-release-hero__label { margin-bottom: 10px; font-size: 14px; } .media-release-hero__title { font-size: 30px; } .media-release-article__date { margin-top: 32px; font-size: 14px; } .media-release-content { margin-top: 24px; } .media-release-block + .media-release-block { margin-top: 44px; } .media-release-detail .media-release-article__body { font-size: 15px; letter-spacing: .3px; } .media-release-gallery__counter { padding: 0 14px; } .media-release-gallery__arrows { margin-left: 14px; } .media-release-gallery__line--after { width: 20px; } .media-release-gallery__caption { font-size: 14px; line-height: 22px; } .media-release-contact { margin-top: 52px; padding: 40px 0 48px; } .media-release-contact__details { font-size: 15px; } .media-release-contact__download { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-top: 32px; font-size: 15px; } .media-release-contact__download-label { -ms-flex-item-align: center; align-self: center; } } @media (max-width: 400px) { .media-release-hero__title { font-size: 26px; } .media-release-contact__title { font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .media-release-gallery__slide, .media-release-gallery__slide.is-active { -webkit-transition: none; transition: none; } }