/* Publication transcript - toggle button + dialog */ .pub-transcript { margin-top: 12px; } /* Toggle button */ .pub-transcript__toggle { display: flex; align-items: stretch; width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; background: #fff; border: 2px solid #D53B20; border-radius: 0; cursor: pointer; text-align: left; font-family: inherit; } .pub-transcript__toggle:hover, .pub-transcript__toggle:focus-visible { background: #f2f7fa; } .pub-transcript__toggle:focus-visible { outline: 3px solid #005f86; outline-offset: 2px; } .pub-transcript__label { flex: 1 1 auto; min-width: 0; padding: 12px 18px; color: #005f86; font-size: 20px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; } .pub-transcript__chevron { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 56px; background: #D53B20; } .pub-transcript__chevron::before { content: ""; width: 16px; height: 16px; margin-top: -6px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; transform: rotate(45deg); } .pub-transcript__chevron--up::before { margin-top: 6px; transform: rotate(-135deg); } /* Dialog */ .pub-transcript__dialog { width: min(1028px, calc(100vw - 32px)); max-height: calc(100vh - 64px); max-width: none; padding: 0; border: 0; background: #fff; color: #333; overflow: hidden; } .pub-transcript__dialog::backdrop { background: rgba(0, 0, 0, 0.55); } /* Fallback for browsers without dialog support: the script sets [open] only. */ .pub-transcript__dialog[open] { display: flex; flex-direction: column; } .pub-transcript__header { flex: 0 0 auto; display: flex; align-items: stretch; background: #D53B20; } .pub-transcript__title { flex: 1 1 auto; margin: 0; padding: 12px 18px 12px 62px; color: #fff !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; line-height: 1.3; } .pub-transcript__close { flex: 0 0 auto; width: 50px; margin: 2px; padding: 0; background: #fff; border: 0; cursor: pointer; } .pub-transcript__close .pub-transcript__chevron { width: 100%; height: 100%; background: transparent; } .pub-transcript__close .pub-transcript__chevron::before { width: 12px; height: 12px; border-color: #D53B20; border-width: 3px; } .pub-transcript__close:focus-visible { outline: 3px solid #fff; outline-offset: -3px; } .pub-transcript__body { flex: 1 1 auto; padding: 28px; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-x: hidden; color: #005F86 } .pub-transcript__body strong, .pub-transcript__body a { color: inherit !important; } .pub-transcript__body a { text-decoration: underline !important; } .pub-transcript__body ul, .pub-transcript__body ol { margin-bottom: 1.4em !important; margin-left: 20px !important; } .pub-transcript__body p, .pub-transcript__body li { margin: 0 0 1.4em; font-size: 22px !important; line-height: 1.65; } .pub-transcript__body p:last-child { margin-bottom: 0; } .pub-transcript__body h2, .pub-transcript__body h3, .pub-transcript__body h4 { margin: 1.6em 0 0.5em; color: #005f86; } .pub-transcript__body h2:first-child, .pub-transcript__body h3:first-child, .pub-transcript__body h4:first-child { margin-top: 0; } .pub-transcript__body img { max-width: 100%; height: auto; } /* Stops the page behind the dialog from scrolling while it is open. The class goes on as well as because which of the two is the scroll container varies, and the script also pins with position:fixed - iOS Safari ignores overflow:hidden on the body by itself. */ html.pub-transcript-open, body.pub-transcript-open { overflow: hidden; } body.pub-transcript-open { position: fixed; left: 0; right: 0; width: 100%; } /* The grid starts squeezing the cards well before tablet widths - the button overflows its card from about 1300px down, so the step-down starts here. The dialog itself is fine at this width and is left alone. */ @media only screen and (max-width: 1300px) { .pub-transcript__label { padding: 11px 14px; font-size: 17px; letter-spacing: 0; } .pub-transcript__chevron { width: 48px; } .pub-transcript__chevron::before { width: 14px; height: 14px; } } /* The covers sit several-up on a much narrower card here, so the button text and chevron have to come down or they push the card out of the grid. */ @media only screen and (max-width: 1024px) { .pub-transcript__label { padding: 10px 12px; font-size: 15px; letter-spacing: 0; } .pub-transcript__chevron { width: 40px; } .pub-transcript__chevron::before { width: 12px; height: 12px; border-width: 3px; } .pub-transcript__title { padding: 10px 12px 10px 54px; font-size: 18px !important; } .pub-transcript__body p, .pub-transcript__body li { font-size: 18px !important; } } @media only screen and (max-width: 767px) { .pub-transcript__label { padding: 9px 10px; font-size: 14px; } .pub-transcript__chevron { width: 36px; } .pub-transcript__title { padding: 10px 8px 10px 46px; font-size: 16px !important; } .pub-transcript__close { width: 40px; } .pub-transcript__body { padding: 20px; } /* Overrides the 22px !important on the desktop rule. */ .pub-transcript__body p, .pub-transcript__body li { font-size: 17px !important; } } /* --------------------------------------------------------------------------- Publication cover - hover state The cover links out to the Heyzine flipbook, so hovering it washes the whole box green and shows an arrow, marking it as clickable. Built from pseudo elements on the existing so the widget markup stays untouched. --------------------------------------------------------------------------- */ .publication-item .thumb a { position: relative; display: block; overflow: hidden; } .publication-item .thumb a::before, .publication-item .thumb a::after { content: ""; position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } /* Green wash across the whole cover. */ .publication-item .thumb a::before { top: 0; right: 0; bottom: 0; left: 0; background: rgba(114, 162, 16, 0.55); } /* Centred circle with an arrow. */ .publication-item .thumb a::after { top: 50%; left: 50%; width: 38%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(76, 110, 12, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 36% auto; } /* Guarded so the overlay does not stick after a tap on touch devices. */ @media (hover: hover) { .publication-item .thumb a:hover::before, .publication-item .thumb a:hover::after { opacity: 1; } } /* Keyboard users get the same affordance. */ .publication-item .thumb a:focus-visible::before, .publication-item .thumb a:focus-visible::after { opacity: 1; }