| Barnardo's SENDIASS

/* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .accordion:not(:first-child) { margin-top: 56px; } @media screen and (min-width: 768px) { .accordion:not(:first-child) { margin-top: 64px; } } @media screen and (min-width: 1024px) { .accordion:not(:first-child) { margin-top: 72px; } } .accordion__title { padding-bottom: 16px; } @media screen and (min-width: 768px) { .accordion__title { padding-bottom: 24px; } } .accordion__item { background-color: #f7f6f1; cursor: pointer; margin-top: 16px; padding: 18px; } .accordion__item:not(:first-of-type) { margin-top: 8px; } .accordion__item summary h3 { display: flex; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-3); font-weight: 700; line-height: 1.2; justify-content: space-between; padding: 18px 18px 18px 0; } @media screen and (min-width: 768px) { .accordion__item { margin-top: 24px; } } .accordion__item summary h3::after { align-self: center; width: 35px; height: 21px; content: ""; background: url(./iconClosedHover.svg) center center no-repeat; background-size: contain; filter: drop-shadow(2px 0px 0px #0B463D); flex: 0 0 auto; } .accordion__item[open] summary h3::after { background-image: url(./iconOpenHover.svg); } .accordion__item summary h3:hover::after { filter: none; } .accordion__item summary::-webkit-details-marker { display: none; } .accordion__item summary { list-style: none; } /** @define cta */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define prominent-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .cta { padding-top: 24px; /* stylelint-disable plugin/selector-bem-pattern */ } .cta p { font-family: barnardos-speak, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; margin-bottom: 12px; } .cta a { appearance: none; background-color: #a5feae; border-radius: 0; box-shadow: 3px 3px #0B463D; color: #0B463D; display: inline-block; font-family: barnardos-speak, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 12px 12px; position: relative; text-align: center; user-select: none; white-space: break-spaces; } .cta a:hover, .cta a:focus { box-shadow: none; } .cta--left { text-align: left; width: fit-content; } .cta--centre { margin: 0 auto; width: fit-content; } .cta--small { width: fit-content; } .cta--large { width: fit-content; } .text-block .cta a { text-decoration: none; } .cta a { text-decoration: none; } /* Css for this is in the calloutBlockCard component as calloutBlock and calloutBlockCard both go together, so when copying css changes from main website, copy over to calloutBlockCard.scss file */ /* Make last calloutblock before footer with grey background and no spikes and touch footer */ #main .callout-block:last-child::before { background-color: #f7f6f1; content: ""; display: block; height: 0; padding: 36px 0 0; width: 100%; } #main .callout-block:last-child { background-color: #f7f6f1; margin-bottom: -72px; padding-top: 0; } #main .callout-block:last-child::after { background: none; height: 0; } /** @define callout-block */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define prominent-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define text-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ .callout-block__card-button { line-height: 0; padding: 8px 0; white-space: nowrap; } /* stylelint-disable plugin/selector-bem-pattern */ .breaking-margins { margin: 0 100px; } .callout-block { background-color: #ffeebd; margin: 0 -100px; margin-bottom: 0px; max-width: 87.5rem; padding: 54px 0 0; margin-top: 56px; } @media screen and (min-width: 768px) { .callout-block { margin-top: 64px; } } @media screen and (min-width: 1024px) { .callout-block { margin-top: 72px; } } @media screen and (min-width: 768px) { .callout-block { padding: 64px 0 0; } } @media screen and (min-width: 1024px) { .callout-block { padding: 72px 0 0; } } .callout-block__title { margin: 0 100px 24px; text-align: center; } @media screen and (min-width: 1440px) { .callout-block__cards { display: flex; } } @media screen and (min-width: 1440px) { .callout-block__card-container { margin-top: 0; } } @media screen and (min-width: 1440px) { .callout-block__card-container { flex-basis: 0; flex-grow: 1; } } .callout-block__card-container .callout-block__card-svg { background-color: #fff; border: 8px solid #0b463d; border-radius: 50%; height: 70px; left: 50%; margin-top: -75px; padding: 2.5rem; position: relative; transform: translateX(-50%); width: 70px; } .callout-block__card-container .callout-block__card-svgimage { height: 50px; transform: translateX(-50%) translateY(-50%); width: 50px; } .callout-block__card-container img:not(:root) { overflow: visible; } @media screen and (min-width: 1024px) { .callout-block--three .callout-block__card-container, .callout-block--two .callout-block__card-container, .callout-block--four .callout-block__card-container { margin-top: 0; } } .callout-block__card { background-color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); color: #1d1d1d; display: flex; flex-direction: column; height: 100%; margin-bottom: 24px; padding: 0 16px 24px; } .callout-block__card > * { flex: 0 0 auto; } @media screen and (min-width: 1300px) { .callout-block__card { padding: 0 32px 32px; } } @media screen and (min-width: 1440px) { .callout-block__card { margin-bottom: 8px; } } .callout-block__card-image { margin: 0 -16px; overflow: hidden; padding-top: 64.667%; position: relative; } @media screen and (min-width: 1300px) { .callout-block__card-image { margin: 0 -32px; } } .callout-block__card-image img { display: block; left: 0; min-height: 100%; min-width: 100%; position: absolute; top: 0; } .callout-block__card-title { overflow-wrap: break-word; padding: 24px 0 0; word-break: break-word; } @media screen and (min-width: 1300px) { .callout-block__card-title { padding: 32px 0 0; } } .callout-block__card-title a { text-decoration: underline; } .callout-block__card-title a:hover { text-decoration: none; } .callout-block__card-body { color: #1d1d1d; flex: 1 0 auto; margin-top: 16px; overflow-wrap: break-word; padding-bottom: 16px; word-break: break-word; } .callout-block__card-body a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ } .callout-block__card-body a:hover, .callout-block__card-body a:focus { text-decoration: none; } .callout-block__card-body strong { font-weight: bold; } .callout-block__card .ctaHint { font-family: barnardos-speak, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; margin-bottom: 12px; } .callout-block__card-button a { appearance: none; background-color: #0B463D; border-radius: 0; /* box-shadow:10px 5px 5px red; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); */ color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 0.4rem 2rem 0.5rem; position: relative; text-align: center; user-select: none; white-space: nowrap; /* stylelint-disable plugin/selector-bem-pattern */ /* &:after { content: ""; width: 100%; height: 4px; display: block; background-color: blue; position: absolute; bottom: -4px; } */ box-shadow: 3px 3px #1d1d1d; display: block; white-space: normal; } .callout-block__card-button a:hover, .callout-block__card-button a:focus { box-shadow: none; } .callout-block__card-button a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (min-width: 1024px) and (max-width: 1439px) { .callout-block__card-button a { display: inline-block; min-width: 27rem; } } .callout-block--three .callout-block__card-button a, .callout-block--two .callout-block__card-button a, .callout-block--four .callout-block__card-button a, .callout-block--five .callout-block__card-button a, .callout-block--six .callout-block__card-button a, .callout-block--seven .callout-block__card-button a, .callout-block--eight .callout-block__card-button a, .callout-block--nine .callout-block__card-button a { box-shadow: 3px 3px #1d1d1d; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; padding: 15px 12px; white-space: normal; } .callout-block--three .callout-block__card-button a:focus-visible, .callout-block--two .callout-block__card-button a:focus-visible, .callout-block--four .callout-block__card-button a:focus-visible, .callout-block--five .callout-block__card-button a:focus-visible, .callout-block--six .callout-block__card-button a:focus-visible, .callout-block--seven .callout-block__card-button a:focus-visible, .callout-block--eight .callout-block__card-button a:focus-visible, .callout-block--nine .callout-block__card-button a:focus-visible { outline: 0.2rem solid #e86c00; } .callout-block--three .callout-block__card-button a:hover, .callout-block--three .callout-block__card-button a:focus, .callout-block--two .callout-block__card-button a:hover, .callout-block--two .callout-block__card-button a:focus, .callout-block--four .callout-block__card-button a:hover, .callout-block--four .callout-block__card-button a:focus, .callout-block--five .callout-block__card-button a:hover, .callout-block--five .callout-block__card-button a:focus, .callout-block--six .callout-block__card-button a:hover, .callout-block--six .callout-block__card-button a:focus, .callout-block--seven .callout-block__card-button a:hover, .callout-block--seven .callout-block__card-button a:focus, .callout-block--eight .callout-block__card-button a:hover, .callout-block--eight .callout-block__card-button a:focus, .callout-block--nine .callout-block__card-button a:hover, .callout-block--nine .callout-block__card-button a:focus { box-shadow: none; } @media screen and (min-width: 1024px) and (max-width: 1439px) { .callout-block--three .callout-block__card-button a, .callout-block--two .callout-block__card-button a, .callout-block--four .callout-block__card-button a, .callout-block--five .callout-block__card-button a, .callout-block--six .callout-block__card-button a, .callout-block--seven .callout-block__card-button a, .callout-block--eight .callout-block__card-button a, .callout-block--nine .callout-block__card-button a { min-width: 100%; } } .callout-block__show-more { margin-top: 32px; padding-bottom: 24px; } .callout-block__show-more a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; margin: -0.6rem; padding: 0.6rem; } .callout-block__show-more a:hover, .callout-block__show-more a:focus { text-decoration: none; } .callout-block__show-more a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (min-width: 44rem) { .callout-block__show-more a { margin: -0.5rem; padding: 0.5rem; } } .callout-block__show-more a::after { content: "›"; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; margin-left: 8px; text-decoration: none; } .callout-block .callout-block__cards .callout-block__card-container:last-child .callout-block__card { margin-bottom: 0; } /* stylelint-disable */ /* The design that has been followed for the callout blocks is as follows. - If one callout block is being used and there is no other adjacent callout block sibling and not directly before footer, then show yellow background and bottom spikes - If there is a single callout block just before footer, show grey background and make it touch the footer - If there are 2 or more adjacent callout blocks being used, the 1st, 3rd, 5th and 7th callout blocks will show yellow background with bottom spikes and the 2nd, 4th and 6th will show grey background with no spikes. Two callout blocks will touch eachother followed by a gap of 72px for next single or couple calloutout block. - We had to use repetitive css below, as this is the only way we could make it follow this design and it covers upto 7 callout blocks. After that all will have grey background without spikes and no gaps. */ .callout-block::after, .callout-block + .callout-block + .callout-block::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::after { background-color: #f7f6f1; background-image: url("./zig-zag-small-down.svg"); background-position: center 99.5%; background-repeat: repeat-x; background-size: 75% auto; content: ""; display: block; height: 6rem; padding: 54px 0; width: 100%; } @media screen and (min-width: 1024px) { .callout-block::after, .callout-block + .callout-block + .callout-block::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::after { background-size: 40% auto; } } .callout-block:not(:has(+ .callout-block))::after, .callout-block + .callout-block + .callout-block:not(:has(+ .callout-block))::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block:not(:has(+ .callout-block))::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block:not(:has(+ .callout-block))::after { background-color: #fff; } .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::before, .main div .callout-block:last-child::before { background-color: #f7f6f1; background-position: center 99.5%; background-repeat: repeat-x; background-size: 75% auto; content: ""; display: block; height: 0; padding: 48px 0 0; width: 100%; transform: rotate(180deg); } @media screen and (min-width: 1024px) { .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::before, .main div .callout-block:last-child::before { background-size: 40% auto; } } .callout-block::before, .callout-block + .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::before, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::before { background: none; height: 0; padding: 0; } .callout-block, .callout-block + .callout-block + .callout-block, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block { background-color: #ffeebd; margin-top: 72px; padding-top: 36px; } .callout-block + .callout-block, .callout-block + .callout-block + .callout-block + .callout-block, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block { background-color: #f7f6f1; margin-top: 0; padding: 0; } .callout-block + .callout-block::after, .callout-block + .callout-block + .callout-block + .callout-block::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::after, .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block + .callout-block::after { background: none; height: 0; } main#main-content div[property="schema:text"]:not(:has(+ div)) .callout-block:last-child::before, .event-detail + div .callout-block:last-child::before { background-color: #f7f6f1; background-position: center 99.5%; background-repeat: repeat-x; background-size: 75% auto; content: ""; display: block; height: 0; width: 100%; transform: rotate(180deg); } @media screen and (min-width: 1024px) { main#main-content div[property="schema:text"]:not(:has(+ div)) .callout-block:last-child::before, .event-detail + div .callout-block:last-child::before { background-size: 40% auto; } } main#main-content div[property="schema:text"]:not(:has(+ div)) .callout-block:last-child, .event-detail + div .callout-block:last-child { background-color: #f7f6f1; } main#main-content div[property="schema:text"]:not(:has(+ div)) .callout-block:last-child::after, .event-detail + div .callout-block:last-child::after { background: none; height: 0; } .layout:has(+ .page__bottom) main#main-content div[property="schema:text"] .callout-block:last-child { margin-bottom: 0; } /* stylelint-enable */ @supports (object-fit: cover) { .callout-block__card-image img { height: 100%; object-fit: cover; width: 100%; } } .callout-blockImpact { background-color: #d2ffd7; clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%); margin: 0 -100px; margin-bottom: 0px; max-width: 87.5rem; padding: 36px 0 72px; margin-top: 56px; } @media screen and (min-width: 768px) { .callout-blockImpact { margin-top: 64px; } } @media screen and (min-width: 1024px) { .callout-blockImpact { margin-top: 72px; } } @media screen and (min-width: 1024px) { .callout-blockImpact { clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%); } } @media screen and (min-width: 1440px) { .callout-blockImpact { clip-path: polygon(0 0, 100% 0, 100% 95%, 0 100%); } } .callout-blockImpact__title { margin: 0 100px 24px; text-align: center; } .callout-blockImpact__title a { text-decoration: underline; } .callout-blockImpact__title a:hover { text-decoration: none; } .callout-blockImpact .ctaHint { text-align: center; } @media screen and (min-width: 1440px) { .callout-blockImpact__cards { display: flex; } } .callout-blockImpact .callout-blockImpact__cards .callout-block__card-container .callout-block__card { background-color: #d2ffd7; box-shadow: none; } .callout-blockImpact .callout-blockImpact__cards .callout-block__card-container .callout-block__card-title { text-align: center; } .callout-blockImpact .callout-blockImpact__cards .callout-block__card-container .callout-block__card-title a { text-decoration: underline; } .callout-blockImpact .callout-blockImpact__cards .callout-block__card-container .callout-block__card-title a:hover { text-decoration: none; } .callout-blockImpact .callout-blockImpact__cards .callout-block__card-container .callout-block__card-body { margin: 16px 20px 24px; } .callout-blockImpact .callout-blockImpact__cards .callout-block__card-container .callout-block__card-body strong { font-weight: bold; } .callout-blockImpact__card-container:not(:first-child) { margin-top: 0px; } @media screen and (min-width: 1440px) { .callout-blockImpact__card-container:not(:first-child) { margin-top: 0; } } @media screen and (min-width: 1440px) { .callout-blockImpact__card-container { flex-basis: 0; flex-grow: 1; } } @media screen and (min-width: 1024px) { .callout-blockImpact--three .callout-blockImpact__card-container, .callout-blockImpact--two .callout-blockImpact__card-container, .callout-blockImpact--four .callout-blockImpact__card-container { margin-top: 0; } } .callout-blockImpact__card { background-color: #a5feae; color: #1d1d1d; display: flex; flex-direction: column; height: 100%; margin-bottom: 24px; padding: 0 16px 24px; } .callout-blockImpact__card > * { flex: 0 0 auto; } @media screen and (min-width: 1440px) { .callout-blockImpact__card { padding: 0px 32px; } } @media screen and (min-width: 1300px) { .callout-blockImpact__card { padding: 0 32px 32px; } } @media screen and (min-width: 1440px) { .callout-blockImpact__card { margin-bottom: 8px; } } .callout-blockImpact__card-image { margin: 0 -16px; overflow: hidden; padding-top: 64.667%; position: relative; } @media screen and (min-width: 1300px) { .callout-blockImpact__card-image { margin: 0 -32px; } } .callout-blockImpact__card-image img { display: block; left: 0; min-height: 100%; min-width: 100%; position: absolute; top: 0; } .callout-blockImpact__card-title { overflow-wrap: break-word; padding: 24px 0 0; text-align: center; word-break: break-word; } @media screen and (min-width: 768px) { .callout-blockImpact__card-title { padding: 32px 0 0; } } .callout-blockImpact__card-body { color: #1d1d1d; flex: 1 0 auto; margin-top: 16px; overflow-wrap: break-word; padding-bottom: 16px; word-break: break-word; } .callout-blockImpact__card-body a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ } .callout-blockImpact__card-body a:hover, .callout-blockImpact__card-body a:focus { text-decoration: none; } .callout-blockImpact__card-button a { appearance: none; background-color: #0B463D; border-radius: 0; /* box-shadow:10px 5px 5px red; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); */ color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 0.4rem 2rem 0.5rem; position: relative; text-align: center; user-select: none; white-space: nowrap; /* stylelint-disable plugin/selector-bem-pattern */ /* &:after { content: ""; width: 100%; height: 4px; display: block; background-color: blue; position: absolute; bottom: -4px; } */ box-shadow: 3px 3px #1d1d1d; display: block; white-space: normal; } .callout-blockImpact__card-button a:hover, .callout-blockImpact__card-button a:focus { box-shadow: none; } .callout-blockImpact__card-button a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (min-width: 1024px) and (max-width: 1439px) { .callout-blockImpact__card-button a { display: inline-block; min-width: 27rem; } } .callout-blockImpact--three .callout-blockImpact__card-button a, .callout-blockImpact--two .callout-blockImpact__card-button a, .callout-blockImpact--four .callout-blockImpact__card-button a, .callout-blockImpact--five .callout-blockImpact__card-button a, .callout-blockImpact--six .callout-blockImpact__card-button a, .callout-blockImpact--seven .callout-blockImpact__card-button a, .callout-blockImpact--eight .callout-blockImpact__card-button a, .callout-blockImpact--nine .callout-blockImpact__card-button a { box-shadow: 3px 3px #1d1d1d; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; padding: 15px 12px; white-space: normal; } .callout-blockImpact--three .callout-blockImpact__card-button a:focus-visible, .callout-blockImpact--two .callout-blockImpact__card-button a:focus-visible, .callout-blockImpact--four .callout-blockImpact__card-button a:focus-visible, .callout-blockImpact--five .callout-blockImpact__card-button a:focus-visible, .callout-blockImpact--six .callout-blockImpact__card-button a:focus-visible, .callout-blockImpact--seven .callout-blockImpact__card-button a:focus-visible, .callout-blockImpact--eight .callout-blockImpact__card-button a:focus-visible, .callout-blockImpact--nine .callout-blockImpact__card-button a:focus-visible { outline: 0.2rem solid #e86c00; } .callout-blockImpact--three .callout-blockImpact__card-button a:hover, .callout-blockImpact--three .callout-blockImpact__card-button a:focus, .callout-blockImpact--two .callout-blockImpact__card-button a:hover, .callout-blockImpact--two .callout-blockImpact__card-button a:focus, .callout-blockImpact--four .callout-blockImpact__card-button a:hover, .callout-blockImpact--four .callout-blockImpact__card-button a:focus, .callout-blockImpact--five .callout-blockImpact__card-button a:hover, .callout-blockImpact--five .callout-blockImpact__card-button a:focus, .callout-blockImpact--six .callout-blockImpact__card-button a:hover, .callout-blockImpact--six .callout-blockImpact__card-button a:focus, .callout-blockImpact--seven .callout-blockImpact__card-button a:hover, .callout-blockImpact--seven .callout-blockImpact__card-button a:focus, .callout-blockImpact--eight .callout-blockImpact__card-button a:hover, .callout-blockImpact--eight .callout-blockImpact__card-button a:focus, .callout-blockImpact--nine .callout-blockImpact__card-button a:hover, .callout-blockImpact--nine .callout-blockImpact__card-button a:focus { box-shadow: none; } @media screen and (min-width: 1024px) and (max-width: 1439px) { .callout-blockImpact--three .callout-blockImpact__card-button a, .callout-blockImpact--two .callout-blockImpact__card-button a, .callout-blockImpact--four .callout-blockImpact__card-button a, .callout-blockImpact--five .callout-blockImpact__card-button a, .callout-blockImpact--six .callout-blockImpact__card-button a, .callout-blockImpact--seven .callout-blockImpact__card-button a, .callout-blockImpact--eight .callout-blockImpact__card-button a, .callout-blockImpact--nine .callout-blockImpact__card-button a { min-width: 100%; } } .callout-blockImpact__show-more { margin-top: 32px; padding-bottom: 24px; } .callout-blockImpact__show-more a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; margin: -0.6rem; padding: 0.6rem; } .callout-blockImpact__show-more a:hover, .callout-blockImpact__show-more a:focus { text-decoration: none; } .callout-blockImpact__show-more a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (min-width: 44rem) { .callout-blockImpact__show-more a { margin: -0.5rem; padding: 0.5rem; } } .callout-blockImpact__show-more a::after { content: "›"; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; margin-left: 8px; text-decoration: none; } .callout-blockImpact .callout-blockImpact__cards .callout-block__card-container:last-child .callout-block__card { margin-bottom: 0; } .callout-blockSteps { background-color: #fac5a7; clip-path: polygon(0 0, 100% 0, 100% 99%, 0 100%); margin: 0 -100px; margin-bottom: 0px; max-width: 87.5rem; padding: 36px 0 72px; margin-top: 56px; } @media screen and (min-width: 768px) { .callout-blockSteps { margin-top: 64px; } } @media screen and (min-width: 1024px) { .callout-blockSteps { margin-top: 72px; } } @media screen and (min-width: 1024px) { .callout-blockSteps { clip-path: polygon(0 0, 100% 0, 100% 99%, 0 100%); } } @media screen and (min-width: 1440px) { .callout-blockSteps { clip-path: polygon(0 0, 100% 0, 100% 98%, 0 100%); } } .callout-blockSteps__title { margin: 0 100px 24px; text-align: center; } .callout-blockSteps__title a { text-decoration: underline; } .callout-blockSteps__title a:hover { text-decoration: none; } .callout-blockSteps .ctaHint { text-align: center; } @media screen and (min-width: 1440px) { .callout-blockSteps__cards { display: flex; } } @media screen and (min-width: 1440px) { .callout-blockSteps .callout-block__card-container { flex-basis: 0; flex-grow: 1; } } @media screen and (min-width: 1024px) { .callout-blockSteps--three .callout-blockSteps__card-container, .callout-blockSteps--two .callout-blockSteps__card-container, .callout-blockSteps--four .callout-blockSteps__card-container { margin-top: 0; } } .callout-blockSteps__card { background-color: #a5feae; color: #1d1d1d; display: flex; flex-direction: column; height: 100%; margin-bottom: 24px; padding: 0 16px 24px; } .callout-blockSteps__card > * { flex: 0 0 auto; } @media screen and (min-width: 1440px) { .callout-blockSteps__card { padding: 0px 32px; } } @media screen and (min-width: 1300px) { .callout-blockSteps__card { padding: 0 32px 32px; } } @media screen and (min-width: 1440px) { .callout-blockSteps__card { margin-bottom: 8px; } } .callout-blockSteps__card-image { margin: 0 -16px; overflow: hidden; padding-top: 64.667%; position: relative; } @media screen and (min-width: 1300px) { .callout-blockSteps__card-image { margin: 0 -32px; } } .callout-blockSteps__card-image img { display: block; left: 0; min-height: 100%; min-width: 100%; position: absolute; top: 0; } .callout-blockSteps__card-title { overflow-wrap: break-word; padding: 24px 0 0; text-align: center; word-break: break-word; } @media screen and (min-width: 768px) { .callout-blockSteps__card-title { padding: 32px 0 0; } } .callout-blockSteps__card-body { color: #1d1d1d; flex: 1 0 auto; margin-top: 16px; overflow-wrap: break-word; padding-bottom: 16px; word-break: break-word; } .callout-blockSteps__card-body a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ } .callout-blockSteps__card-body a:hover, .callout-blockSteps__card-body a:focus { text-decoration: none; } .callout-blockSteps__card-button a { appearance: none; background-color: #0B463D; border-radius: 0; /* box-shadow:10px 5px 5px red; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); */ color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 0.4rem 2rem 0.5rem; position: relative; text-align: center; user-select: none; white-space: nowrap; /* stylelint-disable plugin/selector-bem-pattern */ /* &:after { content: ""; width: 100%; height: 4px; display: block; background-color: blue; position: absolute; bottom: -4px; } */ box-shadow: 3px 3px #1d1d1d; display: block; white-space: normal; } .callout-blockSteps__card-button a:hover, .callout-blockSteps__card-button a:focus { box-shadow: none; } .callout-blockSteps__card-button a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (min-width: 1024px) and (max-width: 1439px) { .callout-blockSteps__card-button a { display: inline-block; min-width: 27rem; } } .callout-blockSteps--three .callout-blockSteps__cards-button a, .callout-blockSteps--two .callout-blockSteps__cards-button a, .callout-blockSteps--four .callout-blockSteps__cards-button a, .callout-blockSteps--five .callout-blockSteps__cards-button a, .callout-blockSteps--six .callout-blockSteps__cards-button a, .callout-blockSteps--seven .callout-blockSteps__card-button a, .callout-blockSteps--eight .callout-blockSteps__card-button a, .callout-blockSteps--nine .callout-blockSteps__card-button a { box-shadow: 3px 3px #1d1d1d; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; padding: 15px 12px; white-space: normal; } .callout-blockSteps--three .callout-blockSteps__cards-button a:focus-visible, .callout-blockSteps--two .callout-blockSteps__cards-button a:focus-visible, .callout-blockSteps--four .callout-blockSteps__cards-button a:focus-visible, .callout-blockSteps--five .callout-blockSteps__cards-button a:focus-visible, .callout-blockSteps--six .callout-blockSteps__cards-button a:focus-visible, .callout-blockSteps--seven .callout-blockSteps__card-button a:focus-visible, .callout-blockSteps--eight .callout-blockSteps__card-button a:focus-visible, .callout-blockSteps--nine .callout-blockSteps__card-button a:focus-visible { outline: 0.2rem solid #e86c00; } .callout-blockSteps--three .callout-blockSteps__cards-button a:hover, .callout-blockSteps--three .callout-blockSteps__cards-button a:focus, .callout-blockSteps--two .callout-blockSteps__cards-button a:hover, .callout-blockSteps--two .callout-blockSteps__cards-button a:focus, .callout-blockSteps--four .callout-blockSteps__cards-button a:hover, .callout-blockSteps--four .callout-blockSteps__cards-button a:focus, .callout-blockSteps--five .callout-blockSteps__cards-button a:hover, .callout-blockSteps--five .callout-blockSteps__cards-button a:focus, .callout-blockSteps--six .callout-blockSteps__cards-button a:hover, .callout-blockSteps--six .callout-blockSteps__cards-button a:focus, .callout-blockSteps--seven .callout-blockSteps__card-button a:hover, .callout-blockSteps--seven .callout-blockSteps__card-button a:focus, .callout-blockSteps--eight .callout-blockSteps__card-button a:hover, .callout-blockSteps--eight .callout-blockSteps__card-button a:focus, .callout-blockSteps--nine .callout-blockSteps__card-button a:hover, .callout-blockSteps--nine .callout-blockSteps__card-button a:focus { box-shadow: none; } @media screen and (min-width: 1024px) and (max-width: 1439px) { .callout-blockSteps--three .callout-blockSteps__cards-button a, .callout-blockSteps--two .callout-blockSteps__cards-button a, .callout-blockSteps--four .callout-blockSteps__cards-button a, .callout-blockSteps--five .callout-blockSteps__cards-button a, .callout-blockSteps--six .callout-blockSteps__cards-button a, .callout-blockSteps--seven .callout-blockSteps__card-button a, .callout-blockSteps--eight .callout-blockSteps__card-button a, .callout-blockSteps--nine .callout-blockSteps__card-button a { min-width: 100%; } } .callout-blockSteps__show-more { margin-top: 32px; padding-bottom: 24px; } .callout-blockSteps__show-more a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; margin: -0.6rem; padding: 0.6rem; } .callout-blockSteps__show-more a:hover, .callout-blockSteps__show-more a:focus { text-decoration: none; } .callout-blockSteps__show-more a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (min-width: 44rem) { .callout-blockSteps__show-more a { margin: -0.5rem; padding: 0.5rem; } } .callout-blockSteps__show-more a::after { content: "›"; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; margin-left: 8px; text-decoration: none; } .callout-blockSteps .callout-blockSteps__cards .callout-block__card-container:last-child .callout-block__card { margin-bottom: 0; } .callout-blockSteps .callout-block__card { padding: 40px 32px 32px 32px; } .callout-blockSteps .callout-block__card:has(.callout-block__card-image) { padding: 55px 32px 32px 32px; } /* stylelint-disable */ .callout-blockSteps__cards .callout-block__card-container::before { font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 400; line-height: 1.2; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(1)::before { content: "Step 1"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(2)::before { content: "Step 2"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(3)::before { content: "Step 3"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(4)::before { content: "Step 4"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(5)::before { content: "Step 5"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(6)::before { content: "Step 6"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(7)::before { content: "Step 7"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(8)::before { content: "Step 8"; } .callout-blockSteps__cards .callout-block__card-container:nth-of-type(9)::before { content: "Step 9"; } .callout-blockSteps__cards .callout-block__card-container { margin-top: 4rem; position: relative; } .callout-blockSteps__cards .callout-block__card-container::before { align-items: center; aspect-ratio: 1/1; background: url(./step.svg) no-repeat center/contain; display: grid; font-weight: bold; justify-content: center; left: 50%; max-width: 200px; position: absolute; top: 0; transform: translateX(-50%) translateY(-50%); width: 65%; z-index: 100; } @media screen and (min-width: 1440px) { .callout-blockSteps__cards .callout-block__card-container { margin-top: 2rem; } } .callout-blockSteps__cards .callout-block__card-title { text-align: center; } .callout-block--six .callout-block__cards, .callout-block--nine .callout-block__cards, .callout-block--six .callout-blockImpact__cards, .callout-block--nine .callout-blockImpact__cards, .callout-block--six .callout-blockSteps__cards, .callout-block--nine .callout-blockSteps__cards, .callout-block--six .callout-blockSvg__cards, .callout-block--nine .callout-blockSvg__cards { display: block; } @media screen and (min-width: 1024px) { .callout-block--six .callout-block__cards, .callout-block--nine .callout-block__cards, .callout-block--six .callout-blockImpact__cards, .callout-block--nine .callout-blockImpact__cards, .callout-block--six .callout-blockSteps__cards, .callout-block--nine .callout-blockSteps__cards, .callout-block--six .callout-blockSvg__cards, .callout-block--nine .callout-blockSvg__cards { display: grid; grid-template-columns: 48% 48%; grid-template-rows: 1fr auto auto; justify-content: space-between; row-gap: 40px; } } @media screen and (min-width: 1440px) { .callout-block--six .callout-block__cards, .callout-block--nine .callout-block__cards, .callout-block--six .callout-blockImpact__cards, .callout-block--nine .callout-blockImpact__cards, .callout-block--six .callout-blockSteps__cards, .callout-block--nine .callout-blockSteps__cards, .callout-block--six .callout-blockSvg__cards, .callout-block--nine .callout-blockSvg__cards { display: grid; grid-template-columns: 31% 31% 31%; grid-template-rows: 1fr auto; justify-content: space-between; row-gap: 40px; } } .callout-block--six .callout-block__cards .callout-block__card-container, .callout-block--nine .callout-block__cards .callout-block__card-container, .callout-block--six .callout-blockImpact__cards .callout-block__card-container, .callout-block--nine .callout-blockImpact__cards .callout-block__card-container, .callout-block--six .callout-blockSteps__cards .callout-block__card-container, .callout-block--nine .callout-blockSteps__cards .callout-block__card-container, .callout-block--six .callout-blockSvg__cards .callout-block__card-container, .callout-block--nine .callout-blockSvg__cards .callout-block__card-container { flex-basis: 31%; flex-grow: 0; } .callout-block--five .callout-block__cards, .callout-block--seven .callout-block__cards, .callout-block--eight .callout-block__cards, .callout-block--five .callout-blockImpact__cards, .callout-block--seven .callout-blockImpact__cards, .callout-block--eight .callout-blockImpact__cards, .callout-block--five .callout-blockSteps__cards, .callout-block--seven .callout-blockSteps__cards, .callout-block--eight .callout-blockSteps__cards, .callout-block--five .callout-blockSvg__cards, .callout-block--seven .callout-blockSvg__cards, .callout-block--eight .callout-blockSvg__cards { display: block; } @media screen and (min-width: 1024px) { .callout-block--five .callout-block__cards, .callout-block--seven .callout-block__cards, .callout-block--eight .callout-block__cards, .callout-block--five .callout-blockImpact__cards, .callout-block--seven .callout-blockImpact__cards, .callout-block--eight .callout-blockImpact__cards, .callout-block--five .callout-blockSteps__cards, .callout-block--seven .callout-blockSteps__cards, .callout-block--eight .callout-blockSteps__cards, .callout-block--five .callout-blockSvg__cards, .callout-block--seven .callout-blockSvg__cards, .callout-block--eight .callout-blockSvg__cards { display: grid; grid-template-columns: 48% 48%; grid-template-rows: 1fr auto auto; justify-content: space-between; row-gap: 40px; } } @media screen and (min-width: 1440px) { .callout-block--five .callout-block__cards, .callout-block--seven .callout-block__cards, .callout-block--eight .callout-block__cards, .callout-block--five .callout-blockImpact__cards, .callout-block--seven .callout-blockImpact__cards, .callout-block--eight .callout-blockImpact__cards, .callout-block--five .callout-blockSteps__cards, .callout-block--seven .callout-blockSteps__cards, .callout-block--eight .callout-blockSteps__cards, .callout-block--five .callout-blockSvg__cards, .callout-block--seven .callout-blockSvg__cards, .callout-block--eight .callout-blockSvg__cards { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; } } .callout-block--five .callout-block__cards .callout-block__card-container, .callout-block--seven .callout-block__cards .callout-block__card-container, .callout-block--eight .callout-block__cards .callout-block__card-container, .callout-block--five .callout-blockImpact__cards .callout-block__card-container, .callout-block--seven .callout-blockImpact__cards .callout-block__card-container, .callout-block--eight .callout-blockImpact__cards .callout-block__card-container, .callout-block--five .callout-blockSteps__cards .callout-block__card-container, .callout-block--seven .callout-blockSteps__cards .callout-block__card-container, .callout-block--eight .callout-blockSteps__cards .callout-block__card-container, .callout-block--five .callout-blockSvg__cards .callout-block__card-container, .callout-block--seven .callout-blockSvg__cards .callout-block__card-container, .callout-block--eight .callout-blockSvg__cards .callout-block__card-container { flex-basis: 31%; flex-grow: 0; } @media screen and (min-width: 1024px) { .callout-block--four .callout-block__cards, .callout-block--four .callout-blockImpact__cards, .callout-block--four .callout-blockSteps__cards, .callout-block--four .callout-blockSvg__cards { display: grid; grid-template-columns: 48% 48%; grid-template-rows: 1fr auto; justify-content: space-between; row-gap: 40px; } } @media screen and (min-width: 1440px) { .callout-block--four .callout-block__cards, .callout-block--four .callout-blockImpact__cards, .callout-block--four .callout-blockSteps__cards, .callout-block--four .callout-blockSvg__cards { column-gap: 40px; display: grid; grid-template-columns: 31% 31%; grid-template-rows: 1fr auto; justify-content: center; row-gap: 40px; } } .callout-block--four .callout-block__cards .callout-block__card-container, .callout-block--four .callout-blockImpact__cards .callout-block__card-container, .callout-block--four .callout-blockSteps__cards .callout-block__card-container, .callout-block--four .callout-blockSvg__cards .callout-block__card-container { flex-basis: 31%; flex-grow: 0; } .callout-block--four .callout-block__cards .callout-block__card-container .callout-block__card-body strong, .callout-block--four .callout-blockImpact__cards .callout-block__card-container .callout-block__card-body strong, .callout-block--four .callout-blockSteps__cards .callout-block__card-container .callout-block__card-body strong, .callout-block--four .callout-blockSvg__cards .callout-block__card-container .callout-block__card-body strong { font-weight: bold; } @media screen and (min-width: 1024px) { .callout-block--three .callout-block__cards, .callout-block--three .callout-blockImpact__cards, .callout-block--three .callout-blockSteps__cards, .callout-block--three .callout-blockSvg__cards { display: flex; justify-content: space-between; } } .callout-block--three .callout-block__cards .callout-block__card-container, .callout-block--three .callout-blockImpact__cards .callout-block__card-container, .callout-block--three .callout-blockSteps__cards .callout-block__card-container, .callout-block--three .callout-blockSvg__cards .callout-block__card-container { flex-basis: 31%; flex-grow: 0; } @media screen and (min-width: 1024px) { .callout-block--two .callout-block__cards, .callout-block--two .callout-blockImpact__cards, .callout-block--two .callout-blockSteps__cards, .callout-block--two .callout-blockSvg__cards { display: grid; grid-template-columns: 48% 48%; grid-template-rows: 1fr; justify-content: space-between; row-gap: 40px; } } @media screen and (min-width: 1440px) { .callout-block--two .callout-block__cards, .callout-block--two .callout-blockImpact__cards, .callout-block--two .callout-blockSteps__cards, .callout-block--two .callout-blockSvg__cards { column-gap: 40px; display: grid; grid-template-columns: 31% 31%; grid-template-rows: 1fr; justify-content: center; row-gap: 40px; } } .callout-block--two .callout-block__cards .callout-block__card-container, .callout-block--two .callout-blockImpact__cards .callout-block__card-container, .callout-block--two .callout-blockSteps__cards .callout-block__card-container, .callout-block--two .callout-blockSvg__cards .callout-block__card-container { flex-basis: 31%; flex-grow: 0; } .callout-blockSvg { background-color: #ffeebd; margin: 0 -100px; margin-bottom: 0px; max-width: 87.5rem; padding-top: 36px; margin-top: 56px; } @media screen and (min-width: 768px) { .callout-blockSvg { margin-top: 64px; } } @media screen and (min-width: 1024px) { .callout-blockSvg { margin-top: 72px; } } .callout-blockSvg__title { margin: 0 100px 24px; text-align: center; } .callout-blockSvg__title a { text-decoration: underline; } .callout-blockSvg__title a:hover { text-decoration: none; } .callout-blockSvg .ctaHint { text-align: center; } @media screen and (min-width: 1440px) { .callout-blockSvg__cards { display: flex; } } .callout-blockSvg::after { background-color: #fff; background-image: url("./zig-zag-small-down.svg"); background-position: center 99.5%; background-repeat: repeat-x; background-size: 75% auto; content: ""; display: block; height: 6rem; padding: 54px 0; width: 100%; } @media screen and (min-width: 1024px) { .callout-blockSvg::after { background-size: 40% auto; } } .callout-blockSvg__cards .callout-block__card-container { border-top: 8px solid #bbb4e9; margin-top: 6rem; position: relative; } @media screen and (min-width: 1024px) { .callout-blockSvg__cards .callout-block__card-container { margin-top: 3rem; } } .callout-blockSvg__cards .callout-block__card-container::after { content: ""; background: url(./purple-splash.svg) no-repeat; position: absolute; right: -60px; bottom: -100px; width: 150px; height: 200px; clip-path: inset(0px 55px 100px 0 round 50px); } .callout-blockSvg__cards .callout-block__card-container .callout-block__card { background-color: #d7d2f9; } .callout-blockSvg__cards .callout-block__card-container .callout-block__card-title { text-align: center; } .callout-blockSvg__cards .callout-block__card-container .callout-block__card-title a { text-decoration: underline; } .callout-blockSvg__cards .callout-block__card-container .callout-block__card-title a:hover { text-decoration: none; } .callout-blockSvg .callout-blockSvg__cards .callout-block__card-container:last-child .callout-block__card { margin-bottom: 0; } /** @define callout-promo */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define prominent-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define lede */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-disable plugin/selector-bem-pattern */ .callout-promo { container-name: callout-promo; container-type: inline-size; margin-top: 56px; } @media screen and (min-width: 768px) { .callout-promo { margin-top: 64px; } } @media screen and (min-width: 1024px) { .callout-promo { margin-top: 72px; } } .callout-promo__container { /* most properties on the container so container queries can target it */ align-items: center; background-color: rgba(170, 158, 255, 0.6); box-sizing: border-box; display: grid; gap: 24px; grid-template-columns: repeat(12, 1fr) 100px; max-width: 87.5rem; min-height: 600px; padding: 0 0 0 100px; width: 100%; } .callout-promo__content { grid-column: 1/6; grid-row: 1; margin: 72px 0; } .callout-promo__image-wrapper { align-items: center; background: url(./barnardos-expression-shape-editable-18.svg) center center no-repeat; background-size: 96%; display: grid; grid-column: 6/14; grid-row: 1; height: 96%; justify-content: end; } .callout-promo__image-window { aspect-ratio: 533/467; clip-path: polygon(5% 5%, 95% 5%, 95% 95%, 11.26% 95%); display: block; margin: 0; margin-right: 100px; max-width: 500px; overflow: hidden; transform: translateY(0px) rotate(4.23deg); transform-origin: 0 0; width: 100%; } .callout-promo__image-window img { height: 100%; object-fit: cover; object-position: center; width: 100%; } .callout-promo__title, .callout-promo__subTitle { color: #0B463D; margin-bottom: 24px; } .callout-promo__heading { max-width: 50rem; padding-bottom: 24px; } @media screen and (min-width: 768px) { .callout-promo__heading { padding-bottom: 32px; } } .callout-promo__body { margin-bottom: 32px; margin-top: 24px; } .callout-promo__button a { background-color: #0B463D; box-shadow: 3px 3px 0 black; color: white; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: clamp(1.44rem, 1.404rem + 0.18vw, 1.62rem); line-height: 1.2; margin-bottom: 24px; padding: 15px 12px; } .callout-promo__button a:hover { box-shadow: none; } .callout-promo__button a:focus-visible { outline: 0.2rem solid #e86c00; } .callout-promo p.ctaHint { font-family: barnardos-speak, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; margin-bottom: 12px; } .callout-promo.callout-promo--right .callout-promo__container { grid-template-columns: 100px repeat(12, 1fr); padding: 0 100px 0 0; } .callout-promo.callout-promo--right .callout-promo__content { grid-column: 9/14; } .callout-promo.callout-promo--right .callout-promo__image-wrapper { grid-column: 1/9; justify-content: start; } .callout-promo.callout-promo--right .callout-promo__image-window { clip-path: polygon(5% 5%, 95% 5%, 88.74% 95%, 5% 95%); margin-left: 100px; margin-right: 0; transform: translateY(22px) rotate(-4.23deg); transform-origin: 0 0; } @container callout-promo (max-width: 1133px) { .callout-promo__container, .callout-promo.callout-promo--right .callout-promo__container { align-items: center; gap: 24px; grid-template-columns: none; grid-template-rows: none; min-height: auto; padding: 0; } .callout-promo__content, .callout-promo.callout-promo--right .callout-promo__content { grid-column: 1; grid-row: 1; margin: 72px 72px 0; } .callout-promo__image-wrapper, .callout-promo.callout-promo--right .callout-promo__image-wrapper { background-size: 105%; grid-column: 1; grid-row: 2; height: auto; justify-content: center; padding: 0 72px 72px; } .callout-promo__image-window, .callout-promo.callout-promo--right .callout-promo__image-window { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 11.26% 100%); margin-left: 0; margin-right: 0; transform: translateX(-3%) rotate(4.23deg); /* translation centres after tilting */ transform-origin: 50% 50%; } .callout-promo__title, .callout-promo__subTitle { margin-bottom: 16px; } .callout-promo__body { margin-bottom: 24px; margin-top: 16px; } } @container callout-promo (max-width: 767px) { .callout-promo__content, .callout-promo.callout-promo--right .callout-promo__content { margin: 56px 20px 0; } .callout-promo__image-wrapper, .callout-promo.callout-promo--right .callout-promo__image-wrapper { padding: 0 20px 56px; } } .callout-promo__image { height: 100%; object-fit: cover; object-position: center; width: 100%; } /** Blob design **/ .callout-promoBlob { container-name: callout-promo; container-type: inline-size; margin-top: 56px; } @media screen and (min-width: 768px) { .callout-promoBlob { margin-top: 64px; } } @media screen and (min-width: 1024px) { .callout-promoBlob { margin-top: 72px; } } .callout-promoBlob__container { align-items: center; background-color: rgba(170, 158, 255, 0.6); box-sizing: border-box; display: grid; grid-template-columns: repeat(12, 1fr); max-width: 87.5rem; width: 100%; } .callout-promoBlob__content { grid-column: 1/7; grid-row: 1; margin: 81px 55px; } .callout-promoBlob__image-wrapper { display: grid; grid-column: 7/14; grid-row: 1; height: 100%; position: relative; } .callout-promoBlob__image-wrapper::before { aspect-ratio: 1/1; background: url(./desktopBlob.svg) no-repeat left bottom/contain; bottom: 70px; content: ""; display: block; height: 196px; left: -55px; position: absolute; width: 196px; z-index: 100; } .callout-promoBlob__image-window { display: block; margin: 0; overflow: hidden; width: 100%; } .callout-promoBlob__image-window img { height: 100%; object-fit: cover; object-position: center; width: 100%; } .callout-promoBlob p.ctaHint { font-family: barnardos-speak, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; margin-bottom: 12px; } .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__content { grid-column: 7/14; } .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__image-wrapper { grid-column: 1/7; } .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__image-wrapper::before { left: auto; right: -55px; } @container callout-promo (max-width: 1024px) { .callout-promoBlob__container, .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__container { align-items: center; gap: 24px; grid-template-columns: none; grid-template-rows: none; min-height: auto; padding: 0; } .callout-promoBlob__content, .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__content { grid-column: 1; grid-row: 1; margin: 20px 20px 0; } .callout-promoBlob__image-wrapper, .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__image-wrapper { grid-column: 1; grid-row: 2; } .callout-promoBlob__image-wrapper::before, .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__image-wrapper::before { background: url(./desktopBlob.svg) no-repeat top right/contain; left: 50%; top: -75px; width: 50%; } } @container callout-promo (max-width: 768px) { .callout-promoBlob__image-wrapper::before, .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__image-wrapper::before { background: url(./mobileBlob.svg) no-repeat top right/contain; height: 141px; top: -50px; } } @container callout-promo (max-width: 500px) { .callout-promoBlob__image-wrapper::before, .callout-promoBlob.callout-promoBlob--right .callout-promoBlob__image-wrapper::before { left: 52%; } } /* stylelint-enable plugin/selector-bem-pattern */ /** @define contact-info */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define text-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ .contact-info { margin-top: 56px; background-color: #f7f6f1; color: #0B463D; max-width: 87.5rem; display: grid; grid-column-gap: 16px; grid-template-columns: repeat(4, 1fr); /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } @media screen and (min-width: 768px) { .contact-info { margin-top: 64px; } } @media screen and (min-width: 1024px) { .contact-info { margin-top: 72px; } } @media screen and (min-width: 768px) { .contact-info { grid-column-gap: 24px; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 1024px) { .contact-info { grid-column-gap: 24px; grid-template-columns: repeat(12, 1fr); } } .contact-info__grid { display: grid; grid-column-end: span 4; grid-column-start: 1; padding: 0 20px; } @media screen and (min-width: 768px) { .contact-info__grid { grid-column-end: span 8; grid-column-start: 1; padding: 0 80px; } } @media screen and (min-width: 1024px) { .contact-info__grid { grid-column-end: span 12; grid-column-start: 1; padding: 0 100px; } } .contact-info__title { color: #0B463D; padding: 20px 20px 56px; text-align: center; } @media screen and (min-width: 768px) { .contact-info__title { padding: 40px 20px 72px; } } .contact-info .contact-info__email.contact-info__wrapper h3 { background-image: url("./emailVector.png"); background-position: center; background-repeat: no-repeat; display: block; margin-top: -46.13px; padding: 30px 0; width: 100%; } .contact-info .contact-info__telephone.contact-info__wrapper h3 { background-image: url("./phoneVector.png"); background-position: center; background-repeat: no-repeat; display: block; margin-top: -46.13px; padding: 30px 0; width: 100%; } .contact-info .contact-info__address.contact-info__wrapper h3 { background-image: url("./addressVector.png"); background-position: center; background-repeat: no-repeat; display: block; margin-top: -46.13px; padding: 30px 0; width: 100%; } .contact-info__contain { column-gap: 40px; display: flex; flex-direction: column; justify-content: center; padding-bottom: 48px; } @media screen and (min-width: 1024px) { .contact-info__contain { flex-direction: row; } } .contact-info__description { padding: 0 20px; text-align: center; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } .contact-info__description:not(:first-child) { margin-top: 24px; } .contact-info__wrapper { /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ background-color: #fff; break-inside: avoid-column; container-type: inline-size; max-width: 40rem; padding: 0 24px 32px; page-break-inside: avoid; text-align: center; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } .contact-info__wrapper:not(:first-child) { margin-top: 56px; } @media screen and (min-width: 768px) { .contact-info__wrapper:not(:first-child) { margin-top: 56px; } } @media screen and (min-width: 1024px) { .contact-info__wrapper:not(:first-child) { margin-top: 0; } } @media screen and (min-width: 768px) { .contact-info__wrapper { padding: 0 18px 32px; } } @media screen and (min-width: 1024px) { .contact-info__wrapper { flex: 0.5; width: 100%; } } .contact-info__wrapper h3 { page-break-inside: avoid; } .contact-info__content { /* stylelint-disable plugin/selector-bem-pattern */ padding-top: 36.13px; /* stylelint-enable plugin/selector-bem-pattern */ } @media screen and (min-width: 768px) { .contact-info__content { padding-top: 46.13px; } } .contact-info__content a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ margin: -0.7rem; padding: 0.7rem; text-decoration: none; } .contact-info__content a:hover, .contact-info__content a:focus { text-decoration: none; } .contact-info__content a:hover { text-decoration: underline; } .contact-info__content a:focus-visible { display: block; outline: 0.2rem solid #e86c00; } @media screen and (min-width: 44rem) { .contact-info__content a { margin: -0.4rem; padding: 0.4rem; } } .contact-info__content p:last-of-type { padding-bottom: 0; } .contact-info__content p .text-link--normalText { display: inline-block; margin-bottom: 4px; text-decoration: none; word-break: break-all; } .contact-info__content p .text-link--normalText:hover { text-decoration: underline; } /* stylelint-disable plugin/selector-bem-pattern */ .contact-info > p { font-size: 19cqi; } /* stylelint-enable plugin/selector-bem-pattern */ /* Css for this is in the contentsMenuItem component as contentsMenu and contentsMenuItem both go together, so when copying css changes from main website, copy over to contentsMenuItem.scss file */ /** @define contentsMenu */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-disable plugin/selector-bem-pattern */ .contents__menu { display: none; margin: 0 -100px; margin-top: 56px; max-width: 87.5rem; } .contents__menu:not(:first-child) { margin-top: 56px; } @media screen and (min-width: 768px) { .contents__menu:not(:first-child) { margin-top: 64px; } } @media screen and (min-width: 1024px) { .contents__menu:not(:first-child) { margin-top: 72px; } } @media screen and (min-width: 768px) { .contents__menu { margin-top: 64px; } } @media screen and (min-width: 1024px) { .contents__menu { margin-top: 72px; } } .contents__menu-items { border-top: 1px solid #0b463d; margin: 0 -26px; padding: 34px 0; } @media screen and (min-width: 500px) { .contents__menu-items { border-top: none; padding: 0; } } .contents__menu-items li a { background-color: transparent; color: #1d1d1d; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-3); font-weight: 700; list-style-type: none; margin-top: 0; } @media screen and (min-width: 500px) { .contents__menu-items li a { background-color: #0B463D; box-shadow: 3px 3px 0 #1d1d1d; color: #fff; display: inline-block; font-size: var(--step-2); line-height: 1.2; padding: 15px 12px; } } .contents__menu-items li a:focus { cursor: pointer; outline: 0.2rem solid #e86c00; } .contents__menu-items li a:hover { box-shadow: none; outline: none; } .contents__menu .title { background-color: #c8c1fb; display: grid; padding: 26px 100px 26px; text-align: left; } @media screen and (min-width: 500px) { .contents__menu .title { display: block; padding: 28px 100px 14px; text-align: center; } } @media screen and (min-width: 500px) { .contents__menu { display: block; } .contents__menu.contents__menu.small-screen { display: none; } } .contents__menu.small-screen { display: block; } .contents__menu summary { align-items: center; display: grid; list-style: none; } details summary::-webkit-details-marker { display: none; } .contents__menu[open] summary h2::after { background-image: url(./downArrow.svg); } .contents__menu summary h2::after { align-self: center; background: url(./upArrow.svg) center center no-repeat; background-size: contain; content: ""; grid-column: 2/2; height: 21px; justify-self: anchor-center; width: 35px; } .contents__menu summary h2:hover::after { filter: none; } .anchor-list .title { background-color: #c8c1fb; padding: 28px 0; text-align: center; } .anchor-list { background-color: #c8c1fb; margin: 0 80px; overflow: hidden; padding: 0 26px; position: relative; text-align: left; } @media screen and (min-width: 500px) { .anchor-list { align-items: center; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 14px 120px 14px; } } .anchor-list li { font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-3); font-weight: 700; list-style-type: none; margin: 0 26px; } @media screen and (min-width: 500px) { .anchor-list li { padding: 0 28px 28px 0; } } /* stylelint-disable */ .contents__menu::after { background-color: #fff; background-image: url("./purpleShape.svg"); background-position: 90% 99.5%; background-repeat: no-repeat; background-size: 100% auto; content: ""; display: block; height: 30px; } /* stylelint-enable */ /** @define feature-image */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define lede */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-disable */ #block-barnardos-theme-content > article > div > div > .feature-image:first-child { margin-top: 26px; } @media screen and (min-width: 768px) { #block-barnardos-theme-content > article > div > div > .feature-image:first-child { margin-top: 46px; } } @media screen and (min-width: 1024px) { #block-barnardos-theme-content > article > div > div > .feature-image:first-child { margin-top: 56px; } } /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-enable */ .feature-image { display: grid; grid-column-gap: 16px; grid-template-columns: repeat(4, 1fr); max-width: 87.5rem; } .feature-image:not(:first-child) { margin-top: 56px; } @media screen and (min-width: 768px) { .feature-image:not(:first-child) { margin-top: 64px; } } @media screen and (min-width: 1024px) { .feature-image:not(:first-child) { margin-top: 72px; } } @media screen and (min-width: 768px) { .feature-image { grid-column-gap: 24px; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 1024px) { .feature-image { grid-column-gap: 24px; grid-template-columns: repeat(12, 1fr); } } .feature-image__sub-heading { font: 700 1.602rem/2rem arial, sans-serif; } .feature-image__spacing { padding-bottom: 40px; } @media screen and (min-width: 768px) { .feature-image__spacing { padding-bottom: 48px; } } @media screen and (min-width: 1024px) { .feature-image__spacing { padding-bottom: 56px; } } .feature-image__grid { grid-column-end: span 4; grid-column-start: 1; } @media screen and (min-width: 768px) { .feature-image__grid { grid-column-end: span 8; grid-column-start: 1; } } @media screen and (min-width: 1024px) { .feature-image__grid { grid-column-end: span 8; grid-column-start: 3; } } .feature-image__inner { max-width: 45rem; /* stylelint-disable plugin/selector-bem-pattern */ } .feature-image__inner img { aspect-ratio: 16/9; height: auto; object-fit: cover; width: 100%; } .feature-image__title { margin-top: 16px; } .feature-image__body { font-family: arial, sans-serif; font-size: var(--step-0); max-width: 45rem; } .feature-image__subtitle, .feature-image__body { margin-top: 16px; } .feature-image__line { margin-top: 16px; } .feature-image__line::after { border-bottom: 1px solid #0B463D; content: ""; display: block; } .feature-image__inner-wrapper { position: relative; } .feature-image__inner-wrapper::before { aspect-ratio: 1/1; content: ""; display: block; max-width: 60px; position: absolute; right: 0; top: 0; width: 50%; z-index: 100; } @media screen and (min-width: 768px) { .feature-image__inner-wrapper::before { max-width: 100px; } } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper::before { max-width: 150px; } } .feature-image__inner-wrapper::after { aspect-ratio: 1/1; content: ""; display: block; max-width: 60px; position: absolute; width: 50%; z-index: 100; } @media screen and (min-width: 768px) { .feature-image__inner-wrapper::after { max-width: 100px; } } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper::after { max-width: 150px; } } .feature-image__inner-wrapper-yp::before { background: url(./yellow.svg) no-repeat right/contain; transform: translateX(40%) translateY(-50%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-yp::before { transform: translateX(50%) translateY(-50%); } } .feature-image__inner-wrapper-yp::after { background: url(./purple.svg) no-repeat right/contain; left: 50%; transform: translateX(-50%) translateY(-60%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-yp::after { transform: translateX(-50%) translateY(-55%); } } .feature-image__inner-wrapper-yo::before { background: url(./yellow.svg) no-repeat right/contain; transform: translateX(40%) translateY(-50%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-yo::before { transform: translateX(50%) translateY(-50%); } } .feature-image__inner-wrapper-yo::after { background: url(./orange.svg) no-repeat left/contain; bottom: 0; left: 0; transform: translateX(-40%) translateY(45%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-yo::after { transform: translateX(-50%) translateY(50%); } } .feature-image__inner-wrapper-bp::before { background: url(./blue.svg) no-repeat center/contain; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(180deg); } .feature-image__inner-wrapper-bp::after { background: url(./purple.svg) no-repeat center/contain; left: 50%; transform: translateX(-50%) translateY(-60%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-bp::after { transform: translateX(-50%) translateY(-55%); } } .feature-image__inner-wrapper-bpk::before { background: url(./blue.svg) no-repeat center/contain; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(180deg); } .feature-image__inner-wrapper-bpk::after { background: url(./pink.svg) no-repeat right/contain; right: 0; transform: translateX(35%) translateY(-60%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-bpk::after { transform: translateX(45%) translateY(-55%); } } .feature-image__inner-wrapper-gp::before { background: url(./green.svg) no-repeat left/contain; left: 0; transform: translateX(-35%) translateY(-45%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-gp::before { transform: translateX(-45%) translateY(-45%); } } .feature-image__inner-wrapper-gp::after { background: url(./purple.svg) no-repeat center/contain; left: 50%; transform: translateX(-50%) translateY(-60%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-gp::after { transform: translateX(-50%) translateY(-55%); } } .feature-image__inner-wrapper-gpk::before { background: url(./green.svg) no-repeat left/contain; left: 0; transform: translateX(-35%) translateY(-45%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-gpk::before { transform: translateX(-45%) translateY(-45%); } } .feature-image__inner-wrapper-gpk::after { background: url(./pink.svg) no-repeat right/contain; right: 0; transform: translateX(35%) translateY(-60%); } @media screen and (min-width: 1024px) { .feature-image__inner-wrapper-gpk::after { transform: translateX(45%) translateY(-55%); } } /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .socialAccount { margin-top: 56px; background-color: #f7f6f1; margin-left: -20px; margin-right: -20px; text-align: center; } @media screen and (min-width: 768px) { .socialAccount { margin-top: 64px; } } @media screen and (min-width: 1024px) { .socialAccount { margin-top: 72px; } } @media screen and (min-width: 1024px) { .socialAccount { margin-left: 0; margin-right: 0; } } .socialAccount__items { display: block; margin: auto; max-width: fit-content; padding: 32px 20px 32px; } @media screen and (min-width: 1024px) { .socialAccount__items { padding: 40px 40px 48px; } } .socialAccount__items-title { color: #0B463D; } .socialAccount__items-inner { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; list-style: none; margin-top: 1.5rem; } @media screen and (min-width: 1024px) { .socialAccount__items-inner { gap: 24px; margin-top: 2rem; } } .socialAccount__items-inner-socials-account { align-items: center; display: flex; flex-direction: column; } .socialAccount__items-inner-socials-img { height: 3rem; width: 3rem; } .instagram:focus, .instagram:hover, .facebook:focus, .facebook:hover, .x-twitter:focus, .x-twitter:hover, .youtube:focus, .youtube:hover, .ticktok:focus, .ticktok:hover, .linkedin:focus, .linkedin:hover { background-color: #bbfec2; padding: 0.1rem; } /** @define form-stack */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define text-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ .form-stack { margin-top: 56px; display: grid; grid-column-gap: 16px; grid-template-columns: repeat(4, 1fr); max-width: 87.5rem; } @media screen and (min-width: 768px) { .form-stack { margin-top: 64px; } } @media screen and (min-width: 1024px) { .form-stack { margin-top: 72px; } } @media screen and (min-width: 768px) { .form-stack { grid-column-gap: 24px; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 1024px) { .form-stack { grid-column-gap: 24px; grid-template-columns: repeat(12, 1fr); } } .form-stack__grid { grid-column-end: span 4; grid-column-start: 1; } @media screen and (min-width: 768px) { .form-stack__grid { grid-column-end: span 8; grid-column-start: 1; } } @media screen and (min-width: 1024px) { .form-stack__grid { grid-column-end: span 8; grid-column-start: 3; } } /** @define hero-image */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define prominent-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .hero-image { margin: 0 auto; max-width: 87.5rem; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ } .hero-image .title, .hero-image .lede { color: #0B463D; } @media screen and (min-width: 1024px) { .hero-image { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); display: flex; margin: 0 auto 0; min-height: 372px; position: relative; } } @media screen and (min-width: 1024px) and (min-width: 768px) { .hero-image { margin: 0 auto 0; } } .hero-image__title, .hero-image__sensitiveContent { color: #0B463D; display: inline; padding: 8px 0; position: relative; } @media screen and (min-width: 1024px) { .hero-image__title, .hero-image__sensitiveContent { display: block; } } .hero-image h1.sensitiveContent { font-family: barnardos-speak, Impact, sans-serif; } .hero-image__small-screen-section { background-color: #a5feae; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); padding: 32px 20px 40px 20px; } @media screen and (min-width: 1024px) { .hero-image__small-screen-section { box-shadow: none; clip-path: none; display: flex; flex-basis: 50%; flex-flow: column; justify-content: center; margin: 0; min-height: 372px; order: -1; padding: 80px 100px; } } .hero-image__description { color: #0B463D; padding-top: 16px; } @media screen and (min-width: 1024px) { .hero-image__description { padding-top: 24px; } } .hero-image__lede { font-family: arial, sans-serif; font-size: var(--step-3); line-height: 1.2; } @media screen and (min-width: 500px) { .hero-image__small-screen-section .hero-image__description { line-height: 2.75rem; } } .hero-image__barred { color: #0B463D; } @media screen and (max-width: 1024px) { .hero-image__barred { margin: 8px 0; } } .hero-image__banner { display: flex; min-height: 210px; position: relative; } @media screen and (min-width: 500px) { .hero-image__banner { min-height: 290px; } } @media screen and (min-width: 1024px) { .hero-image__banner { flex-basis: 50%; min-height: 0; } } .hero-image__background { height: 100%; position: absolute; top: 0; width: 100%; } @media screen and (min-width: 1024px) { .hero-image__background { padding: 0; } } .hero-image__content { display: flex; flex-direction: column; justify-content: center; min-height: 20rem; } .hero-image__content > * { z-index: 1; } @media screen and (min-width: 500px) { .hero-image__content { min-height: 25rem; } } @media screen and (min-width: 768px) { .hero-image__content { min-height: 28rem; } } @media screen and (min-width: 1024px) { .hero-image__content { min-height: 30rem; } } @media screen and (min-width: 1440px) { .hero-image__content { min-height: 32rem; } } .hero-image__image { height: 100%; position: relative; top: 0; width: 100%; z-index: -1; } .hero-image__image img { height: 100%; object-fit: cover; object-position: 50% 50%; width: 100%; } .hero-image--focus-right .hero-image__image img { object-position: 75% 50%; } .hero-image--focus-topCenter .hero-image__image img { object-position: 50% 0; } .hero-image--focus-topRight .hero-image__image img { object-position: 75% 0; } .hero-image__cta { margin-top: 24px; } @media screen and (min-width: 1024px) { .hero-image__cta { margin-top: 32px; } } .hero-image__cta a { appearance: none; background-color: #0B463D; border-radius: 0; /* box-shadow:10px 5px 5px red; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); */ color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 0.4rem 2rem 0.5rem; position: relative; text-align: center; user-select: none; white-space: nowrap; /* stylelint-disable plugin/selector-bem-pattern */ /* &:after { content: ""; width: 100%; height: 4px; display: block; background-color: blue; position: absolute; bottom: -4px; } */ box-shadow: 3px 3px #1d1d1d; white-space: normal; } .hero-image__cta a:hover, .hero-image__cta a:focus { box-shadow: none; } .hero-image__cta a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (max-width: 44rem) { .hero-image__cta a { padding: 12px 24px; } } /** @define hero-text */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define prominent-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define lede */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .hero-text { margin: 0 auto; max-width: 87.5rem; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ } .hero-text .title, .hero-text .lede { color: #0B463D; } .hero-text__container { background-color: #a5feae; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); padding: 32px 20px 40px 20px; } @media screen and (min-width: 48rem) { .hero-text__container { padding: 40px 100px; } } .hero-text h1.sensitiveContent { font-family: barnardos-speak, Impact, sans-serif; } .hero-text__description { margin-top: 16px; } @media screen and (min-width: 1024px) { .hero-text__description { margin-top: 24px; } } .hero-text__cta { margin-top: 24px; } @media screen and (min-width: 1024px) { .hero-text__cta { margin: 32px 0 0; } } .hero-text__cta a { appearance: none; background-color: #0B463D; border-radius: 0; /* box-shadow:10px 5px 5px red; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); */ color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 0.4rem 2rem 0.5rem; position: relative; text-align: center; user-select: none; white-space: nowrap; /* stylelint-disable plugin/selector-bem-pattern */ /* &:after { content: ""; width: 100%; height: 4px; display: block; background-color: blue; position: absolute; bottom: -4px; } */ box-shadow: 3px 3px #1d1d1d; white-space: normal; } .hero-text__cta a:hover, .hero-text__cta a:focus { box-shadow: none; } .hero-text__cta a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (max-width: 44rem) { .hero-text__cta a { padding: 12px 24px; } } /* stylelint-enable plugin/selector-bem-pattern */ /** @define home-hero-image */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define lede */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .lede { color: #1d1d1d; font-family: arial, sans-serif; font-size: var(--step-3); line-height: 1.2; } .lede--max-width { max-width: 45rem; } /** @define prominent-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .prominent-link { appearance: none; background-color: #0B463D; border-radius: 0; /* box-shadow:10px 5px 5px red; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); */ color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 0.4rem 2rem 0.5rem; position: relative; text-align: center; user-select: none; white-space: nowrap; /* stylelint-disable plugin/selector-bem-pattern */ /* &:after { content: ""; width: 100%; height: 4px; display: block; background-color: blue; position: absolute; bottom: -4px; } */ } .prominent-link:hover, .prominent-link:focus { box-shadow: none; } .prominent-link:focus-visible { outline: 0.2rem solid #e86c00; } .prominent-link--teal { background-color: #007a87; } .prominent-link--pink { background-color: #cc0070; } .prominent-link--green { background-color: #0B463D; } .prominent-link--orange { background-color: #ff955a; } .prominent-link--yellow { background-color: #ffd45a; } .prominent-link--rebrand-light-green { background-color: #a5feae; } .prominent-link--rebrand-IB-pink { background-color: #f487fa; } .prominent-link--rebrand-IB-light-blue { background-color: #71abff; } .prominent-link--purple { background-color: #6e2066; } .prominent-link--black { background-color: #1d1d1d; } .prominent-link--white { background-color: #fff; } .prominent-link--tight { flex-basis: auto; padding: 0.4rem 0.75rem 0.5rem; } .home-hero-image { margin: 0 auto -50px; max-width: 87.5rem; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } .home-hero-image .title, .home-hero-image .lede { color: #0B463D; } @media screen and (min-width: 1024px) { .home-hero-image { margin: 0 auto -100px; } } .home-hero-image__row { background-color: #a5feae; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); padding: 24px 16px 40px 16px; } @media screen and (min-width: 1024px) { .home-hero-image__row { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); max-width: 57%; padding: 40px 32px 48px 32px; } } .home-hero-image__title, .home-hero-image__sensitiveContent { color: #0B463D; display: inline; position: relative; } .home-hero-image h1.sensitiveContent { font-family: barnardos-speak, Impact, sans-serif; } .home-hero-image__description { color: #0B463D; } .home-hero-image__barred { color: #0B463D; margin-top: 0.5rem; } .home-hero-image__content { padding: 0 20px; transform: translate(0, -40px); /* stylelint-enable plugin/selector-bem-pattern */ } @media screen and (min-width: 1024px) { .home-hero-image__content { padding: 0 100px; transform: translate(0, -50%); /* stylelint-disable plugin/selector-bem-pattern */ } .home-hero-image__content > * { z-index: 1; } } .home-hero-image__image { max-height: 540px; overflow: hidden; position: relative; width: 100%; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } .home-hero-image__image img { display: block; height: auto; width: 100%; } .home-hero-image--focus-right .home-hero-image__image img { object-position: 75% 50%; } .home-hero-image--focus-topCenter .home-hero-image__image img { object-position: 50% 0; } .home-hero-image--focus-topRight .home-hero-image__image img { object-position: 75% 0; } .home-hero-image__cta { padding-top: 24px; } @media screen and (min-width: 1024px) { .home-hero-image__cta { padding-top: 32px; } } .home-hero-image__cta a { appearance: none; background-color: #0B463D; border-radius: 0; /* box-shadow:10px 5px 5px red; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); */ color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding: 0.4rem 2rem 0.5rem; position: relative; text-align: center; user-select: none; white-space: nowrap; /* stylelint-disable plugin/selector-bem-pattern */ /* &:after { content: ""; width: 100%; height: 4px; display: block; background-color: blue; position: absolute; bottom: -4px; } */ box-shadow: 3px 3px #1d1d1d; white-space: normal; } .home-hero-image__cta a:hover, .home-hero-image__cta a:focus { box-shadow: none; } .home-hero-image__cta a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (max-width: 44rem) { .home-hero-image__cta a { padding: 0.6rem 1.5rem; } } /* stylelint-disable plugin/selector-bem-pattern */ @supports (object-fit: cover) and (object-position: 50% 50%) { .home-hero-image__image img { aspect-ratio: 16/9; height: 100%; object-fit: cover; object-position: 50% 50%; } } .contextual-region { position: static; } /* stylelint-enable plugin/selector-bem-pattern */ /** @define service-hero-image */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .service-hero-image { margin: 0 auto 0; max-width: 87.5rem; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } @media screen and (min-width: 1024px) { .service-hero-image { margin: 0 auto 0; } } .service-hero-image__row { display: block; margin-top: -2.5rem; max-width: 820px; min-width: 300px; padding: 0 40px; } @media screen and (min-width: 1024px) { .service-hero-image__row { margin-top: -3rem; padding-left: 100px; } } .service-hero-image__title, .service-hero-image__sensitiveContent { background-color: #a5feae; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); color: #0B463D; min-width: 300px; padding: 24px 16px 32px 16px; position: relative; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } @media screen and (min-width: 1024px) { .service-hero-image__title, .service-hero-image__sensitiveContent { clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); padding: 40px 32px 48px 40px; } } .service-hero-image__title .title, .service-hero-image__sensitiveContent .title { color: #0B463D; } .service-hero-image h1.sensitiveContent { font-family: barnardos-speak, Impact, sans-serif; } .service-hero-image__banner { min-height: 16rem; position: relative; } @media screen and (min-width: 1024px) { .service-hero-image__banner { min-height: 27.75rem; } } .service-hero-image__image { height: 100%; overflow: hidden; position: absolute; top: 0; width: 100%; /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } .service-hero-image__image img { height: auto; width: 100%; } .service-hero-image--focus-right .service-hero-image__image img { object-position: 75% 40%; } /* stylelint-disable plugin/selector-bem-pattern */ @supports (object-fit: cover) and (object-position: 50% 50%) { .service-hero-image__image img { height: 100%; object-fit: cover; object-position: 50% 50%; } } /* stylelint-enable plugin/selector-bem-pattern */ /** @define image-text-block */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define text-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ .image-text-block { margin-top: 56px; max-width: 87.5rem; /* stylelint-disable plugin/selector-bem-pattern */ } @media screen and (min-width: 768px) { .image-text-block { margin-top: 64px; } } @media screen and (min-width: 1024px) { .image-text-block { margin-top: 72px; } } .image-text-block .image-text-block__item:last-child { padding-top: 16px; } @media screen and (min-width: 768px) { .image-text-block .image-text-block__item--right { margin-left: 32px; margin-right: 0; order: 1; } .image-text-block .image-text-block__item--left { margin-right: 32px; } .image-text-block .image-text-block__item:last-child { padding-top: 0; } } @media screen and (min-width: 1024px) { .image-text-block .image-text-block__item--right { margin-left: 64px; margin-right: 0; order: 1; } .image-text-block .image-text-block__item--left { margin-right: 64px; } } .image-text-block .image-text-block__heading { max-width: 50rem; padding-bottom: 32px; } @media screen and (min-width: 500px) { .image-text-block .image-text-block__heading { padding-left: 0; } } .image-text-block .image-text-block__subheading { padding-bottom: 16px; } .image-text-block .image-text-block__subheading a { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ color: black; } .image-text-block .image-text-block__subheading a:hover, .image-text-block .image-text-block__subheading a:focus { text-decoration: none; } @media screen and (min-width: 768px) { .image-text-block__wrap { display: flex; justify-content: space-between; } } .image-text-block .ctaHint { font-family: barnardos-speak, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; margin: 16px 0 12px 0; } .image-text-block__item { /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-disable plugin/selector-bem-pattern */ } .image-text-block__item .video-block, .image-text-block__item .spotify-block, .image-text-block__item .feature-image { padding: 0; } @media screen and (min-width: 768px) { .image-text-block__item--columns-25-75:first-child { flex-basis: 25%; } .image-text-block__item--columns-25-75:last-child { flex-basis: 75%; } .image-text-block__item--columns-40-60:first-child { flex-basis: 40%; } .image-text-block__item--columns-40-60:last-child { flex-basis: 60%; } .image-text-block__item--columns-50-50 { flex-basis: 50%; } .image-text-block__item--columns-60-40:first-child { flex-basis: 60%; } .image-text-block__item--columns-60-40:last-child { flex-basis: 40%; } } .image-text-block__item img { display: block; height: auto; width: 100%; } .image-text-block__item .feature-image, .image-text-block__item .video-block, .image-text-block__item .quote-block, .image-text-block__item .spotify-block { display: block; } @media screen and (min-width: 768px) { .image-text-block__item .feature-image__inner-wrapper::before { max-width: 80px; } } @media screen and (min-width: 1024px) { .image-text-block__item .feature-image__inner-wrapper::before { max-width: 100px; } } @media screen and (min-width: 768px) { .image-text-block__item .feature-image__inner-wrapper::after { max-width: 80px; } } @media screen and (min-width: 1024px) { .image-text-block__item .feature-image__inner-wrapper::after { max-width: 100px; } } .image-text-block__item .feature-image__spacing { padding-bottom: 32px; } /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define quick-exit */ /* stylelint-disable plugin/selector-bem-pattern */ .quick-exit { background-color: #fac5a7; bottom: 0; min-width: 100%; position: fixed; right: 0; z-index: 1000; } @media screen and (min-width: 45rem) { .quick-exit { max-width: 390px; min-width: 390px; } } .quick-exit-button { align-items: center; display: flex; left: 50px; position: absolute; top: 0; width: 100%; } .quick-exit-button a { align-content: center; background: url("./arrow.svg") no-repeat right; color: #0B463D; display: block; font-family: barnardos-speak, sans-serif; font-size: var(--step-2); height: 50px; padding: 9px 16px; width: calc(100% - 60px); } .quick-exit-button a:hover, .quick-exit-button a:focus-visible { text-decoration: underline; } .quick-exit-button a:focus-visible { outline: 0.2rem solid #3b0a00; } details.quick-exit-info-button summary::-webkit-details-marker { display: none; } .quick-exit-info-button #quick-exit-info-btn { cursor: pointer; list-style: none; } #quick-exit-info-btn { background: center/contain no-repeat url("./info.svg"), #ff955a; height: 50px; width: 50px; } #quick-exit-info-btn:focus-visible { outline: 0.2rem solid #3b0a00; } #quick-exit-info-btn:hover, #quick-exit-info-btn:focus-visible, details.quick-exit-info-button[open] #quick-exit-info-btn:hover, details.quick-exit-info-button[open] #quick-exit-info-btn:focus-visible { background-color: #fce2d3; } details.quick-exit-info-button[open] #quick-exit-info-btn { background: center/contain no-repeat url("./close.svg"), #ff955a; background-size: 50%; } details.quick-exit-info-button[open] #quick-exit-info-btn:focus-visible { outline: 0.2rem solid #3b0a00; } .quick-exit-inner { position: relative; } .quick-exit-info { background-color: #fff; color: #0B463D; margin: 5px; padding: 1rem 0.5rem; } /* stylelint-enable plugin/selector-bem-pattern */ .quick-exit-button a { text-decoration: none; } .quick-exit-button a:hover { text-decoration: underline; } @charset "UTF-8"; /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .quote-block { color: #0B463D; max-width: 87.5rem; margin-top: 56px; display: grid; grid-column-gap: 16px; grid-template-columns: repeat(4, 1fr); } @media screen and (min-width: 768px) { .quote-block { margin-top: 64px; } } @media screen and (min-width: 1024px) { .quote-block { margin-top: 72px; } } @media screen and (min-width: 768px) { .quote-block { grid-column-gap: 24px; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 1024px) { .quote-block { grid-column-gap: 24px; grid-template-columns: repeat(12, 1fr); } } .quote-block__layout { container-name: quoteblock; container-type: inline-size; grid-column-end: span 4; grid-column-start: 1; } @media screen and (min-width: 768px) { .quote-block__layout { grid-column-end: span 8; grid-column-start: 1; } } @media screen and (min-width: 1024px) { .quote-block__layout { grid-column-end: span 8; grid-column-start: 3; } } .quote-block__inner { align-items: center; background: url("./smallShape.svg") no-repeat; background-color: #a5feae; background-position: -53px -22px; background-size: 48cqi auto; grid-template-columns: none; grid-template-rows: none; min-height: auto; padding: 0 24px; } .quote-block__image { padding-top: 20px; } .quote-block__image img { aspect-ratio: 1/1; border-radius: 50%; display: block; height: auto; margin: auto; width: 60%; } .quote-block__content { margin: 24px 0; } .quote-block__quote { background: url("./quotationMark.svg") no-repeat; color: #0B463D; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); font-weight: 700; line-height: 1.2; padding-top: 70px; position: relative; } .quote-block__quote::after { color: #0B463D; content: "”"; } .quote-block__cite { display: block; margin-top: 12px; } @media screen and (min-width: 1024px) { .quote-block__cite { margin-top: 24px; } } .quote-block__name { font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-3); font-weight: 700; line-height: 30px; } .quote-block__job-title { color: #0B463D; font-family: arial, sans-serif; font-size: var(--step-1); margin-top: 8px; } @media screen and (min-width: 1024px) { .quote-block__job-title { margin-top: 16px; } } .quote-block__content-theme-name, .quote-block__content-theme-quote::before { color: #0B463D; } .quote-block__inner--noimage { background-size: auto; padding: 186px 20px 20px; } @container quoteblock (min-inline-size: 44.333rem) { .quote-block__inner { background-size: 300px auto; box-sizing: border-box; display: grid; gap: 24px; grid-template-columns: 328px auto; max-width: 87.5rem; padding: 0 24px 0 0; width: 100%; } .quote-block__image { padding-bottom: 20px; } .quote-block img { margin-inline-start: 24px; min-inline-size: 274px; } .quote-block__inner--noimage { grid-template-columns: none; padding-left: 328px; } } /** @define spotify-block */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-disable plugin/selector-bem-pattern */ .image-text-block__item .spotify-block, .image-text-block__item .quote-block { margin-top: 0; } /* stylelint-enable plugin/selector-bem-pattern */ .spotify-block { margin-top: 56px; max-width: 87.5rem; display: grid; grid-column-gap: 16px; grid-template-columns: repeat(4, 1fr); /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-disable property-no-vendor-prefix */ /* stylelint-disable selector-type-no-unknown */ } @media screen and (min-width: 768px) { .spotify-block { margin-top: 64px; } } @media screen and (min-width: 1024px) { .spotify-block { margin-top: 72px; } } @media screen and (min-width: 768px) { .spotify-block { grid-column-gap: 24px; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 1024px) { .spotify-block { grid-column-gap: 24px; grid-template-columns: repeat(12, 1fr); } } .spotify-block [aria-hidden=true] { visibility: hidden; } .spotify-block__subtitle { margin-top: 12px; } .spotify-block__body { font-family: arial, sans-serif; font-size: var(--step-0); max-width: 45rem; } .spotify-block--no-image .spotify-block__title, .spotify-block--no-image .spotify-block__subtitle, .spotify-block__subtitle, .spotify-block--no-image .spotify-block__body, .spotify-block--no-image .spotify-block__line, .spotify-block--playing .spotify-block__subtitle, .spotify-block--playing .spotify-block__body, .spotify-block--playing .spotify-block__line, .spotify-block--playing .spotify-block__line--title-only { display: block; } .spotify-block__line::after { border-bottom: 1px solid #0B463D; content: ""; display: block; margin-top: 16px; } @media screen and (min-width: 768px) { .spotify-block__line::after { margin-top: 32px; } } .spotify-block .spotify-block__inner { grid-column-end: span 4; grid-column-start: 1; } @media screen and (min-width: 768px) { .spotify-block .spotify-block__inner { grid-column-end: span 8; grid-column-start: 1; } } @media screen and (min-width: 1024px) { .spotify-block .spotify-block__inner { grid-column-end: span 8; grid-column-start: 3; } } .spotify-block h2 { margin-bottom: 24px; } .text-block .spotify-block__inner { grid-column: 1/13; } /** @define teaser-card-list */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define teaser */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /** @define text-link */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-enable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ .text-link { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ margin: -0.55rem; padding: 0.55rem; } .text-link:hover, .text-link:focus { text-decoration: none; } @media screen and (min-width: 44rem) { .text-link { margin: -0.3rem; padding: 0.3rem; } } .text-link--normalText { color: #0B463D; text-decoration: underline; text-decoration-skip-ink: auto; /* stylelint-disable plugin/selector-bem-pattern */ } .text-link--normalText:hover, .text-link--normalText:focus { text-decoration: none; } .text-link--white { color: #fff; } .text-link--black { color: #1d1d1d; } /** @define topic */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ .topic { color: #616161; font-family: arial, sans-serif; } .teaser { height: 100%; position: relative; width: 100%; } .teaser__container { height: 100%; } .teaser__row { border-radius: 0.25rem; box-shadow: 0 0.25rem 0 0 #ccc, 0 0 0 1px #ccc; height: 100%; overflow: hidden; } @media screen and (min-width: 768px) { .teaser__row { display: flex; flex-direction: column; } .teaser__row--wide { flex-flow: row nowrap; } } .teaser__image { border: 1px solid #ccc; /* stylelint-disable plugin/selector-bem-pattern */ } @media screen and (min-width: 768px) { .teaser__image { border: 1px solid #ccc; flex: 0 0 auto; } .teaser__image--wide { flex-basis: 50%; padding-bottom: 0; } } @media screen and (min-width: 768px) and (min-width: 1024px) { .teaser__image--wide { flex-basis: 35%; } } .teaser__image img { display: block; width: 100%; } .teaser__type { background-color: #c8c1fb; clip-path: polygon(3px 0, 100% 4%, 100% 100%, 0 96%); color: #1d1d1d; left: 0; padding: 12.5px 15px; position: absolute; top: 0; } .teaser__type--wide { display: inline-block; margin-bottom: -16px; transform: translate(-13px, -13px); } .teaser__topic, .teaser__date { display: block; font-size: 18px; margin-bottom: -6px; order: 1; text-align: right; } .teaser__icon { display: inline-block; height: 1.2rem; margin-bottom: -4px; margin-left: 0; margin-right: 10px; padding-right: 11px; position: relative; top: 4px; width: 1.2rem; } .teaser .teaser__date_image { background-image: svg-load("./vector.svg"); background-position: right bottom; background-repeat: no-repeat; background-size: contain; display: block; height: 0.9rem; margin: 0 0 8px -34px; width: 100%; } @media screen and (min-width: 768px) { .teaser__col--wide { width: 50%; } } @media screen and (min-width: 1024px) { .teaser__col--wide { width: 65%; } } .teaser__col--wide-no-image { width: 100%; } .teaser__inner { height: 100%; padding: 48px 16px 16px 16px; position: relative; } @media screen and (min-width: 1024px) { .teaser__inner { padding: 48px 32px 32px 32px; } } .teaser__title { color: #1d1d1d; font-size: 1.602rem; max-width: 45rem; order: 2; } .teaser__title--wide { max-width: 45rem; } .teaser__title a { color: #0B463D; margin: -0.3rem; padding: 0.3rem; text-decoration: none; } .teaser__title a:hover { text-decoration: underline 3px; } .teaser__title a:focus-visible { outline: 0.2rem solid #e86c00; } @media screen and (min-width: 44rem) { .teaser__title a { margin: -0.1rem; padding: 0.1rem; } } .teaser__body { color: #1d1d1d; font-family: arial, sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.5rem; line-height: 1.5; /* stylelint-disable */ text-overflow: ellipsis; overflow: hidden; max-width: 45rem; } .teaser__body--wide { max-width: 45rem; order: 3; overflow: visible; padding-top: 30px; white-space: normal; } .teaser__body strong { font-weight: 700; } @supports (display: -webkit-box) and (-webkit-line-clamp: 3) and (-webkit-box-orient: vertical) { .teaser--promoted .teaser__body { display: -webkit-box; /* autoprefixer: ignore next */ -webkit-box-orient: vertical; -webkit-line-clamp: 3; text-overflow: ellipsis; white-space: normal; } } .teaser__type-page { color: #0b463d; display: flex; flex-flow: row wrap; font-family: arial, sans-serif; font-size: 14px; font-weight: bold; gap: 20px; order: 4; padding: 29px 0 7px; } @media screen and (min-width: 768px) { .teaser__type-page { font-size: 16px; } } .teaser__page, .teaser__page--wide { background-color: #ffe4fe; border-radius: 2rem; padding: 12px; } .o-media { box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2); overflow: visible; } .o-media__image { aspect-ratio: 5/2; border-right: 0; object-fit: cover; vertical-align: middle; width: 100%; } @media screen and (min-width: 64.125rem) { .o-media__image { border-bottom: 0; } } .o-media__image--contained { object-fit: contain; } .o-media__head + .o-media__body { padding: 30px 24px; } .o-media__body { padding: 70px 24px 30px; } @media screen and (min-width: 1440px) { .o-media__body { padding: 48px 24px 30px; } } @media (min-width: 64.125rem) { .o-media__head { float: left; max-width: 320px; width: 50%; } .o-media__body { border-width: 0 0 0 1px; flex: auto; overflow: auto; } @supports (display: contents) and (width: min(50%, 320px)) { .o-media { display: flex; } .o-media__head { display: contents; } .o-media__image { flex: none; width: min(50%, 320px); } .o-media__body { overflow: revert; } } } .teaser-card-list { margin: 2rem auto 0; max-width: 87.5rem; display: grid; grid-column-gap: 16px; grid-template-columns: repeat(4, 1fr); /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-enable plugin/selector-bem-pattern */ } .teaser-card-list:not(:first-child) { margin-top: 56px; } @media screen and (min-width: 768px) { .teaser-card-list:not(:first-child) { margin-top: 64px; } } @media screen and (min-width: 1024px) { .teaser-card-list:not(:first-child) { margin-top: 72px; } } @media screen and (min-width: 768px) { .teaser-card-list { grid-column-gap: 24px; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 1024px) { .teaser-card-list { grid-column-gap: 24px; grid-template-columns: repeat(12, 1fr); } } .teaser-card-list__grid { grid-column-end: span 4; grid-column-start: 1; } @media screen and (min-width: 768px) { .teaser-card-list__grid { grid-column-end: span 8; grid-column-start: 1; } } @media screen and (min-width: 1024px) { .teaser-card-list__grid { grid-column-end: span 8; grid-column-start: 3; } } .teaser-card-list__image img { aspect-ratio: 5/2; height: 100%; object-fit: cover; vertical-align: middle; width: 100%; } .teaser-card-list__body { color: #1d1d1d; font-family: arial, sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.5rem; line-height: 1.5; max-width: 45rem; overflow: hidden; text-overflow: ellipsis; /* stylelint-disable plugin/selector-bem-pattern */ } .teaser-card-list__body strong { font-weight: 700; } .teaser-card-list .o-media__body { display: flex; flex-direction: column; } .teaser-card-list h2 { line-height: 1.2; margin: 0; } .teaser-card-list .teaser__body { margin-bottom: 0; order: 4; padding-top: 30px; } .teaser-card-list__image + .o-media__body { padding: 30px 24px; } /** @define meetTeam */ .teaserGrid { margin-top: 56px; @media screen and (min-width: 1024px ) { margin-top: 72px } } .teaserGrid__Items { display: grid; grid-gap: 32px 20px; grid-template-columns: repeat(auto-fill, 240px); justify-content: center; margin-top: 32px; @media screen and (min-width: 520px) { justify-content: space-evenly; } } .teaserGridItem { max-width: 240px; position: relative; } .teaserGridItem img { display: block; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); height: 135px; max-width: 240px; object-fit: cover; object-position: center center; } .teaserGridItem__image-noImage { background-color: #f7f6f1; width: 100%; } .teaserGridItem__text { background-color: #0B463D; color: #fff; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)); margin: 0 -4px 0 -4px; padding: 10px; } .teaserGridItem__text .teaserGridItem__title { font-family: barnardos-speak; font-size: var(--step-1); font-weight: 400; text-decoration: underline; } .teaserGridItem:hover .teaserGridItem__title { text-decoration: none; } .teaserGridItem__contentType { background-color: #a5feae; font-family: barnardos-speak; line-height: 1; padding: 8px; position: absolute; top: -15px; right: -10px; z-index: 20; } .teaserGridItem__description { display: block; line-height: 1; margin-top: 8px; } /** @define video-block */ /* stylelint-enable */ /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ /* stylelint-disable plugin/selector-bem-pattern */ .image-text-block__item .video-block, .image-text-block__item .quote-block { margin-top: 0; } /* stylelint-enable plugin/selector-bem-pattern */ .video-block { margin-top: 56px; max-width: 87.5rem; display: grid; grid-column-gap: 16px; grid-template-columns: repeat(4, 1fr); /* stylelint-disable plugin/selector-bem-pattern */ /* stylelint-disable property-no-vendor-prefix */ /* stylelint-disable selector-type-no-unknown */ } @media screen and (min-width: 768px) { .video-block { margin-top: 64px; } } @media screen and (min-width: 1024px) { .video-block { margin-top: 72px; } } @media screen and (min-width: 768px) { .video-block { grid-column-gap: 24px; grid-template-columns: repeat(8, 1fr); } } @media screen and (min-width: 1024px) { .video-block { grid-column-gap: 24px; grid-template-columns: repeat(12, 1fr); } } .video-block [aria-hidden=true] { visibility: hidden; } .video-block__subtitle { margin-top: 12px; } .video-block__body { font-family: arial, sans-serif; font-size: var(--step-0); max-width: 45rem; } .video-block--no-image .video-block__title, .video-block--no-image .video-block__subtitle, .video-block__subtitle, .video-block--no-image .video-block__body, .video-block--no-image .video-block__line, .video-block--playing .video-block__subtitle, .video-block--playing .video-block__body, .video-block--playing .video-block__line, .video-block--playing .video-block__line--title-only { display: block; } .video-block__line::after { border-bottom: 1px solid #0B463D; content: ""; display: block; margin-top: 16px; } @media screen and (min-width: 768px) { .video-block__line::after { margin-top: 32px; } } .video-block .video-block__inner { grid-column-end: span 4; grid-column-start: 1; } @media screen and (min-width: 768px) { .video-block .video-block__inner { grid-column-end: span 8; grid-column-start: 1; } } @media screen and (min-width: 1024px) { .video-block .video-block__inner { grid-column-end: span 8; grid-column-start: 3; } } .video-block h2 { margin-bottom: 24px; } .video-block .ytvideo, .video-block lite-vimeo { max-width: 100%; } .video-block .ytvideo > .lty-playbtn { -webkit-filter: none; filter: none; } .video-block .ytvideo > .lty-playbtn:hover, .video-block .ytvideo > .lty-playbtn:focus, .video-block .ytvideo > .lty-playbtn:focus-visible, .video-block .ytvideo:hover .lty-playbtn { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .video-block .ytvideo::before { color: white; content: attr(data-value); font-weight: 700; padding: 1rem; } .text-block .video-block__inner { grid-column: 1/13; } .DownloadableResources ul { list-style: none; padding-left: 0; } .DownloadableResources ul li { margin-bottom: 4px; } .DownloadableResources ul li:last-of-type a { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%); margin-bottom: 0; padding: 16px 16px 30px; } .DownloadableResources ul:first-of-type { margin-top: 24px; } .DownloadableResources ul li a { align-items: center; background-color: #ccc5ff; display: flex; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); justify-content: space-between; line-height: 1.2; padding: 16px; text-decoration: none; } .DownloadableResources ul li a:focus-visible { outline: 0.2rem solid #e86c00; } .DownloadableResources ul li a:hover { background-color: #f7f6f1; } .DownloadableResources ul li a:active::after { filter: brightness(0) saturate(100%) invert(100%) sepia(86%) saturate(240%) hue-rotate(339deg) brightness(110%) contrast(93%); } .DownloadableResources ul li a:active { background-color: $green; color: #f7f6f1; } .DownloadableResources ul li a::after { align-self: stretch; background: url("download.svg") no-repeat; content: "."; display: inline-block; flex-shrink: 0; overflow: hidden; text-indent: 100%; width: 1.2rem; } /* * Font sizes are based on a a typographic scale of 1.125. Each font size should * be 1.125 times larger than the previous one. The base font size is 16px. * Use rems for all units because they are scaled for screen sizes. At 100% * scale 1rem = 16px. * All that being said, font sizes are ultimately defined by the Deeson design * which takes precedence over the design system. */ @media screen and (min-width: 1024px) { .inline-image { width: calc(50% + 1rem); } .inline-image--left { clear: both; float: left; } .inline-image--right { clear: both; direction: rtl; float: right; } .inline-image--left .inline-image__caption, .inline-image--right .inline-image__caption { margin: 0; max-width: 100%; width: 100%; } .inline-image--columns-two { width: calc(20% + 1rem); } .inline-image--columns-three { width: calc(30% + 1rem); } .inline-image--columns-four { width: calc(40% + 1rem); } .inline-image--columns-five { width: calc(50% + 1rem); } .inline-image--columns-six { width: calc(60% + 1rem); } .inline-image--columns-seven { width: calc(70% + 1rem); } } @media screen and (min-width: 500px) { .inline-image__row { margin-left: -0.5rem; margin-right: -0.5rem; } } @media screen and (min-width: 1024px) { .inline-image__row { margin-left: -1rem; margin-right: -1rem; } } .inline-image__row > * { padding-left: 1rem; padding-right: 1rem; } @media screen and (min-width: 500px) { .inline-image__row > * { padding-left: 0.5rem; padding-right: 0.5rem; } } @media screen and (min-width: 1024px) { .inline-image__row > * { padding-left: 1rem; padding-right: 1rem; } } @media screen and (min-width: 1024px) { .inline-image--left .inline-image__row { width: 100%; } .inline-image--right .inline-image__row { width: 100%; } } .inline-image__image-wrap { padding-bottom: 16px; } @media screen and (min-width: 500px) { .inline-image__image-wrap { margin: 0 0%; } } @media screen and (min-width: 1024px) { .inline-image__image-wrap { margin: 0; } } .inline-image__caption { font-family: arial, sans-serif; font-size: var(--step-0); padding-bottom: 16px; text-align: left; } .inline-image__caption::after { border-bottom: 1px solid #0b463d; content: ""; display: block; padding-top: 16px; } .inline-image--right .inline-image__caption { direction: ltr; } .inline-image__image { margin: 0 -16px; } @media screen and (min-width: 500px) { .inline-image__image { margin: 0; } } @media screen and (min-width: 1024px) { .inline-image__image { padding-top: 8px; } } .inline-image__image img { display: block; height: auto; width: 100%; } .inline-image__image-p-hide { height: 1px; left: -10000px; overflow: hidden; position: absolute; top: auto; width: 1px; } .inline-image .ytvideo > .lty-playbtn { -webkit-filter: none; filter: none; } .inline-image .ytvideo > .lty-playbtn:hover, .inline-image .ytvideo > .lty-playbtn:focus, .inline-image .ytvideo > .lty-playbtn:focus-visible, .inline-image .ytvideo:hover .lty-playbtn { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .inline-image .ytvideo::before { color: white; content: attr(data-value); font-weight: 700; padding: 16px; } .inline-image--has-video, .inline-image--youtube { margin-top: 0; padding-top: 16px; } .rich-text .inline-image__image blockquote { box-shadow: none; color: unset; font-family: none; font-size: unset; font-weight: unset; line-height: 0; margin-top: 0; padding-left: 0; padding-top: 0; position: unset; } .rich-text .inline-image__image blockquote::before { color: initial; content: ""; font-family: none; font-size: 0; font-weight: initial; left: 0; line-height: 0; position: initial; top: 0; } .rich-text .inline-image__image blockquote::after { color: initial; content: ""; } .inline-image--tiktok.inline-image--columns-two, .inline-image--tiktok.inline-image--columns-three, .inline-image--tiktok.inline-image--columns-four, .inline-image--tiktok.inline-image--columns-five, .inline-image--tiktok.inline-image--columns-six, .inline-image--tiktok.inline-image--columns-seven { direction: unset; margin-left: -1rem; margin-top: 1rem; width: 350px; } @media screen and (min-width: 500px) { .inline-image--tiktok.inline-image--columns-two, .inline-image--tiktok.inline-image--columns-three, .inline-image--tiktok.inline-image--columns-four, .inline-image--tiktok.inline-image--columns-five, .inline-image--tiktok.inline-image--columns-six, .inline-image--tiktok.inline-image--columns-seven { margin-left: 0; margin-right: 1rem; width: 325px; } } .inlineMediaAndText { @media screen and (min-width: 1024px) { grid-column: 3 / 11; } @media screen and (min-width: 500px) { margin: 16px 0 0; } } .StuartMultilineTexts { border: 5px solid red; } .StuartMultilineTexts pre { background: #bbb; padding: 1em; margin: 1em; } /* Bodge CSS. These CSS declarations are here to correct problems with the CSS in the components which have not yet been fixed in those components themselves in the website. */ .cta a { color: #0B463D; } .callout-promo__button a { background-color: #0B463D; box-shadow: 3px 3px 0 #000; color: #fff; display: inline-block; font-family: barnardos-speak, Impact, sans-serif; font-size: var(--step-2); line-height: 1.2; margin-bottom: 24px; padding: 15px 12px; text-decoration: none; } .callout-promo__button a:hover { box-shadow: none; } /* css for imagetextblock video title */ .image-text-block .ytvideo::before { color: #fff; content: attr(data-value); font-weight: 700; padding: 1rem; }