/** * Don't edit this file. Find all style at ./sass folder. **/ /** * This is from the UNDRR Mangrove component library * https://github.com/unisdr/undrr-mangrove?tab=readme-ov-file * * _ _ _ _ ____ ____ ____ __ __ * | | | | \ | | _ \| _ \| _ \ | \/ | __ _ _ __ __ _ _ __ _____ _____ * | | | | \| | | | | |_) | |_) | | |\/| |/ _` | '_ \ / _` | '__/ _ \ \ / / _ \ * | |_| | |\ | |_| | _ <| _ < | | | | (_| | | | | (_| | | | (_) \ V / __/ * \___/|_| \_|____/|_| \_\_| \_\ |_| |_|\__,_|_| |_|\__, |_| \___/ \_/ \___| * |___/ */ /** * @tokens Colors - basic * @presenter Color * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Colors - neutral * @presenter Color * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Colors - accent * @presenter Color * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Colors - interactive * @presenter Color * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens UNDRR Colors * @presenter Color * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Sendai Framework Colors * @presenter Color * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Spacing * @presenter Spacing */ /** * @tokens Font sizes * @presenter FontSize * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Font families * @presenter FontFamily * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Widths * @presenter Spacing */ /** * @tokens Breakpoints * @presenter Spacing */ /** * @tokens Colors - component * @presenter Color * * https://github.com/UX-and-I/storybook-design-token */ /** * @tokens Component sizing * @presenter Spacing */ /** * @tokens-end */ /* variables end */ /* Roboto */ /* BEGIN Light */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Light/Roboto-Light.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Light/Roboto-Light.woff?v=2.137") format("woff"); font-weight: 300; font-style: normal; } /* END Light */ /* BEGIN Light Italic */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/LightItalic/Roboto-LightItalic.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/LightItalic/Roboto-LightItalic.woff?v=2.137") format("woff"); font-weight: 300; font-style: italic; } /* END Light Italic */ /* BEGIN Regular */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Regular/Roboto-Regular.woff?v=2.137") format("woff"); font-weight: 400; font-style: normal; } @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Regular/Roboto-Regular.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Regular/Roboto-Regular.woff?v=2.137") format("woff"); font-weight: normal; font-style: normal; } /* END Regular */ /* BEGIN Italic */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Italic/Roboto-Italic.woff?v=2.137") format("woff"); font-weight: 400; font-style: italic; } @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Italic/Roboto-Italic.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Italic/Roboto-Italic.woff?v=2.137") format("woff"); font-weight: normal; font-style: italic; } /* END Italic */ /* BEGIN Medium */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Medium/Roboto-Medium.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Medium/Roboto-Medium.woff?v=2.137") format("woff"); font-weight: 500; font-style: normal; } /* END Medium */ /* BEGIN Medium Italic */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/MediumItalic/Roboto-MediumItalic.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/MediumItalic/Roboto-MediumItalic.woff?v=2.137") format("woff"); font-weight: 500; font-style: italic; } /* END Medium Italic */ /* BEGIN Bold */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Bold/Roboto-Bold.woff?v=2.137") format("woff"); font-weight: 700; font-style: normal; } @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Bold/Roboto-Bold.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Bold/Roboto-Bold.woff?v=2.137") format("woff"); font-weight: bold; font-style: normal; } /* END Bold */ /* BEGIN Bold Italic */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff"); font-weight: 700; font-style: italic; } @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/BoldItalic/Roboto-BoldItalic.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/BoldItalic/Roboto-BoldItalic.woff?v=2.137") format("woff"); font-weight: bold; font-style: italic; } /* END Bold Italic */ /* BEGIN Black */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/Black/Roboto-Black.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/Black/Roboto-Black.woff?v=2.137") format("woff"); font-weight: 900; font-style: normal; } /* END Black */ /* BEGIN Black Italic */ @font-face { font-family: Roboto; src: url("../fonts/roboto/fonts/BlackItalic/Roboto-BlackItalic.woff2?v=2.137") format("woff2"), url("../fonts/roboto/fonts/BlackItalic/Roboto-BlackItalic.woff?v=2.137") format("woff"); font-weight: 900; font-style: italic; } /* END Black Italic */ /* Roboto Condensed */ /* BEGIN Light */ @font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed/fonts/Light/RobotoCondensed-Light.woff2?v=2.137") format("woff2"), url("../fonts/roboto-condensed/fonts/Light/RobotoCondensed-Light.woff?v=2.137") format("woff"); font-weight: 300; font-style: normal; font-display: fallback; } /* END Light */ /* BEGIN Light Italic */ @font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed/fonts/LightItalic/RobotoCondensed-LightItalic.woff2?v=2.137") format("woff2"), url("../fonts/roboto-condensed/fonts/LightItalic/RobotoCondensed-LightItalic.woff?v=2.137") format("woff"); font-weight: 300; font-style: italic; font-display: fallback; } /* END Light Italic */ /* BEGIN Regular */ @font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed/fonts/Regular/RobotoCondensed-Regular.woff2?v=2.137") format("woff2"), url("../fonts/roboto-condensed/fonts/Regular/RobotoCondensed-Regular.woff?v=2.137") format("woff"); font-weight: 400; font-style: normal; font-display: fallback; } /* END Regular */ /* BEGIN Italic */ @font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed/fonts/Italic/RobotoCondensed-Italic.woff2?v=2.137") format("woff2"), url("../fonts/roboto-condensed/fonts/Italic/RobotoCondensed-Italic.woff?v=2.137") format("woff"); font-weight: 400; font-style: italic; font-display: fallback; } /* END Italic */ /* BEGIN Bold */ @font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed/fonts/Bold/RobotoCondensed-Bold.woff2?v=2.137") format("woff2"), url("../fonts/roboto-condensed/fonts/Bold/RobotoCondensed-Bold.woff?v=2.137") format("woff"); font-weight: 700; font-style: normal; font-display: fallback; } /* END Bold */ /* BEGIN Bold Italic */ @font-face { font-family: "Roboto Condensed"; src: url("../fonts/roboto-condensed/fonts/BoldItalic/RobotoCondensed-BoldItalic.woff2?v=2.137") format("woff2"), url("../fonts/roboto-condensed/fonts/BoldItalic/RobotoCondensed-BoldItalic.woff?v=2.137") format("woff"); font-weight: 700; font-style: italic; font-display: fallback; } /* END Bold Italic */ body .wp-block-button__link { border-radius: 0; background: #004f91; border: 1px solid #fff; padding: 1rem 1.5rem; font-size: 1.4rem; color: #fff; } body .wp-block-columns { margin-bottom: unset; } .wp-block-button__link.has-text-color { border-color: inherit; } .wp-block-button__link.has-text-color:hover { color: inherit; } .page-node-type-landing_page_gutenberg { --mg-gutenberg-spacer: 1.5rem; } .page-node-type-landing_page_gutenberg .field--name-body .wp-block-column > *, .page-node-type-landing_page_gutenberg .field--name-body > * { margin-top: var(--mg-gutenberg-spacer); } .page-node-type-landing_page_gutenberg .field--name-body > .has-background + .mg-hero, .page-node-type-landing_page_gutenberg .field--name-body > .mg-hero + .has-background, .page-node-type-landing_page_gutenberg .field--name-body > .has-background + .has-background { --mg-gutenberg-spacer: 0 ; } .page-node-type-landing_page_gutenberg .field--name-body > .mg-u-sr-only:first-child ~ .mg-hero, .page-node-type-landing_page_gutenberg .field--name-body > .mg-hero:first-child { --mg-gutenberg-spacer: 0; } .undrr-view-columns .view-content { display: grid; grid-gap: 1em; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } @media (max-width: 900px) { .undrr-view-columns .view-content { grid-template-columns: repeat(auto-fit, minmax(240px, 350px)); } } .undrr-view-columns .view-content .layout-main { padding-left: 0; padding-right: 0; } figure.wp-block-embed { display: block; } .wp-block-embed__wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .wp-embed-aspect-4-3 .wp-block-embed__wrapper { padding-bottom: 100%; } .wp-block-embed__wrapper iframe, .wp-block-embed__wrapper object, .wp-block-embed__wrapper embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .editor-styles-wrapper .t-sz--16 { font-size: 1.6rem; } .wp-block-columns.has-background.mg-container-full-width { padding-left: 0; padding-right: 0; } .page-node-type-landing_page_gutenberg .mg-card header { position: unset; } .undrr_padding_bottom { padding-bottom: 15px !important; } .undrr_margin_bottom { margin-bottom: 20px !important; } .undrr_margin_top { margin-top: 10px !important; } @media (min-width: 600px) and (max-width: 781px) { [dir=rtl] .wp-block-column:nth-child(2n) { margin-left: 2em; } } @media (min-width: 782px) { [dir=rtl] .wp-block-column:not(:last-child) { margin-left: 2em; } } .mg-hero__title { line-height: 3.5rem; } .has-white-color h1, .has-white-color h1:after, .has-white-color h2, .has-white-color h2:after, .has-white-color h3, .has-white-color h3:after, .has-white-color a, .has-white-color a:link, .has-white-color a:hover, .has-white-color a:visited { color: #fff; } .has-black-color h1, .has-black-color h1:after, .has-black-color h2, .has-black-color h2:after, .has-black-color h3, .has-black-color h3:after, .has-black-color a, .has-black-color a:link, .has-black-color a:hover, .has-black-color a:visited { color: #222; } .wp-block-image figcaption { color: unset; font-size: unset; text-align: unset; } .wp-block-image figcaption a { color: unset; font-size: unset; } body .mg-share { margin-top: var(--layout-view-row-list-spacing); max-width: unset; width: fit-content; } body .mg-share__copy-text { height: unset; line-break: anywhere; } /* mixing end */ /* placeholder start */ *[data-viewport=true] { -webkit-transform: translateX(-100px); -moz-transform: translateX(-100px); -ms-transform: translateX(-100px); -o-transform: translateX(-100px); transition: translateX(-100px); -webkit-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1), opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -moz-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1), opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -ms-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1), opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -o-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1), opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1), opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); opacity: 0; visibility: hidden; } [dir=rtl] *[data-viewport=true].inviewport, *[data-viewport=true].inviewport { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transition: translateX(0); opacity: 1; visibility: visible; } [dir=rtl] *[data-viewport=true] { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transition: translateX(100px); } .scale-up { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transition: scale(0.9); -webkit-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -moz-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -ms-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -o-transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); transition: transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); } .opacity-only { -webkit-transition: opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -moz-transition: opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -ms-transition: opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); -o-transition: opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); transition: opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1); opacity: 0; } .opacity-only.inviewport { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transition: translateX(0); opacity: 1; } /* placeholder end */ /* base start */ .show-large { display: none; /* medium design */ } @media (width >= 48em) { .show-large { display: block; } } .show-small { display: block; /* medium design */ } @media (width >= 48em) { .show-small { display: none; } } /* animation start */ .delay-1 { transition-delay: 0.1s; } .delay-2 { transition-delay: 0.2s; } .delay-3 { transition-delay: 0.3s; } .delay-4 { transition-delay: 0.4s; } .delay-5 { transition-delay: 0.5s; } .scale-up.inviewport { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transition: scale(1); } .expand-to-size { max-width: calc(100% - 1rem); /* medium design */ } @media (width >= 48em) { .expand-to-size { max-width: calc(100% - 3rem); } } [dir=rtl] *[data-viewport=true] { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transition: translateX(100px); } .overflow-hidden { overflow: hidden; } .yellow .stats-card:hover { background-color: #ff0; } .yellow .progress-bar { background: #ff0; } .yellow .blockquote { background-color: #ff0; } .red .stats-card:hover { background-color: #c10920; } .red .progress-bar { background: #c10920; } .red .blockquote { background-color: #c10920; } .green .stats-card:hover { background-color: #008484; } .green .progress-bar { background: #008484; } .green .blockquote { background-color: #008484; } .blue .stats-card:hover { background-color: #f0ffff; } .blue .progress-bar { background: #f0ffff; } .blue .blockquote { background-color: #f0ffff; } .mg-u-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .mg-u-comma-between > *::after { content: ", "; } .mg-u-comma-between > *:last-child::after { content: ""; } /* base end */ @font-face { font-family: FontAwesome; font-weight: normal; src: url("../fonts/mangrove-icon-set/font/mangrove-icon-set.ttf") format("ttf"), url("../fonts/mangrove-icon-set/font/mangrove-icon-set.woff2") format("woff2"); } .mg-icon, .fa-before:before, .fab, .fas, .fa { font-family: FontAwesome, sans-serif; font-style: normal; } .fa-before:before { padding-right: 0.5em; } .fa-2x { font-size: 2em; } .fa-rss:before { content: "\f09e"; } .fa-file-alt:before { content: "\f15c"; } .fa-facebook:before { content: "\f230"; } .fa-x-social:before, .fa-twitter:before { content: "\f099"; } .fa-linkedin:before { content: "\f0e1"; } .fa-flickr:before { content: "\f16e"; } .fa-youtube:before { content: "\f16a"; } .fa-search:before { content: "\e808"; } .fa-envelope:before, .fa-envelope-o:before { content: "\e806"; } .fa-newspaper:before { content: "\f1ea"; } .fa-chart-bar:before { content: "\e80b"; } .fa-file:before { content: "\f15b"; } .fa-graduation-cap:before { content: "\f19d"; } .fa-calendar-alt:before { content: "\f133"; } .fa-building:before { content: "\f0f7"; } .fa-pen-nib:before { content: "\f0f6"; } .fa-business-time:before { content: "\e809"; } .fa-code-branch:before { content: "\f126"; } .fa-life-ring:before { content: "\f1cd"; } .fa-lightbulb:before { content: "\f0eb"; } .fa-cubes:before { content: "\f1b3"; } .fa-bar-chart:before { content: "\e80b"; } .fa-sort-alpha-down::before, .fa-tags:before { content: "\e800"; } .fa-landmark:before { content: "\f19c"; } .fa-power-off:before { content: "\f090"; } .fa-user:before { content: "\e805"; } .fa-times:before { content: "\f00d"; } .fa-link:before { content: "\e802"; } .fa-clone:before { content: "\f24d"; } .fa-globe:before { content: "\f0ac"; } .fa-share:before { content: "\f1e0"; } .mg-container { padding: 1rem; margin: 0 auto; max-width: 100%; } @media (min-width: 480px) { .mg-container { max-width: 480px; } } @media (min-width: 1024px) { .mg-container { max-width: 1024px; } } @media (min-width: 1164px) { .mg-container { max-width: 1164px; } } @media (min-width: 1440px) { .mg-container { max-width: 1440px; } } .mg-container--spacer { --mg-container-spacer: 1.5rem; } .mg-container--spacer > .mg-u-sr-only:first-child ~ .mg-hero, .mg-container--spacer > .mg-hero:first-child, .mg-container--spacer > .has-background + .mg-hero, .mg-container--spacer > .mg-hero + .has-background, .mg-container--spacer > .has-background + .has-background { --mg-container-spacer: 0; } .mg-container--spacer > * { margin-top: var(--mg-container-spacer); } /* Our custom css grid based on : https://stable.visual-framework.dev/components/vf-grid/ */ .mg-grid { display: flex; } .mg-grid > * { flex: 1; margin: 0 0 1rem 1.2292%; } .mg-grid > *:first-child { margin-left: 0; } [class*=mg-grid__] { flex-wrap: wrap; } .mg-grid__col-2 > * { flex: 0 0 49.38538%; max-width: 49.38538%; } .mg-grid__col-2 > *:nth-of-type(3n) { margin-left: 0; } .mg-grid__col-3 > * { flex: 0 0 32.51384%; max-width: 32.51384%; } .mg-grid__col-3 > *:nth-of-type(4n) { margin-left: 0; } .mg-grid__col-4 > * { flex: 0 0 24.078%; max-width: 24.078%; } .mg-grid__col-4 > *:nth-of-type(5n) { margin-left: 0; } .mg-grid__col-5 > * { flex: 0 0 19.01661%; max-width: 19.01661%; } .mg-grid__col-5 > *:nth-of-type(6n) { margin-left: 0; } .mg-grid__col-6 > * { flex: 0 0 15.6423%; max-width: 15.6423%; } .mg-grid__col-6 > *:nth-of-type(7n) { margin-left: 0; } @media (max-width: 1024px) { .mg-grid { flex-wrap: wrap; } .mg-grid > * { flex: 0 0 49.18305%; } } @supports (display: grid) { .mg-grid { display: grid; grid-column: main; column-gap: 2rem; row-gap: 2rem; } @media (min-width: 1024px) { .mg-grid { grid-auto-flow: column; } } @media (max-width: 1024px) { .embl-grid .mg-grid { grid-column: 1/-1; } } .mg-grid > * { margin: 0; max-width: unset; } [class*=grid__] { grid-auto-flow: unset; } .mg-grid__col-1 { grid-template-columns: repeat(1, 1fr); } @media (min-width: 1024px) { .mg-grid__col-2 { grid-template-columns: repeat(2, 1fr); } .mg-grid__col-3 { grid-template-columns: repeat(3, 1fr); } .mg-grid__col-4 { grid-template-columns: repeat(2, 1fr); } .mg-grid__col-5 { grid-template-columns: repeat(3, 1fr); } .mg-grid__col-6 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1164px) { .mg-grid__col-4 { grid-template-columns: repeat(4, 1fr); } .mg-grid__col-5 { grid-template-columns: repeat(5, 1fr); } .mg-grid__col-6 { grid-template-columns: repeat(6, 1fr); } } .mg-grid__col--span-2 { grid-column-end: span 2; } .mg-grid__col--span-3 { grid-column-end: span 3; } .mg-grid__col--span-4 { grid-column-end: span 4; } .mg-grid__col--span-5 { grid-column-end: span 5; } .mg-grid__col--span-6 { grid-column-end: span 6; } .mg-grid__col--span-all { grid-column: 1/-1; } .mg-grid__row--span-2 { grid-row-end: span 2; } .mg-grid__row--span-3 { grid-row-end: span 3; } .mg-grid__row--span-4 { grid-row-end: span 4; } .mg-grid__row--span-5 { grid-row-end: span 5; } .mg-grid__row--span-6 { grid-row-end: span 6; } .mg-grid__row--span-all { grid-row: 1/-1; } } .mg-button { align-items: center; background: transparent; display: flex; font-size: 1.4rem; font-weight: 600; line-height: 1; border-radius: 0; color: #fff; cursor: pointer; justify-content: center; padding: 1rem 1.5rem; border: 1px solid #fff; /* medium design */ } .mg-button:focus-visible { box-shadow: 0 0 4px #3372a7; outline: 0; } @media (width >= 48em) { .mg-button { display: inline-flex; } } .mg-button + .mg-button { margin-left: 1rem; } button:focus-visible { box-shadow: 0 0 4px #004f91; outline: 0; } .mg-button-primary { background-color: #004f91; } .mg-button-primary:hover { color: #fff; background-color: #3372a7; } .mg-button-secondary { background-color: #4d84b2; } .mg-button-secondary:hover { color: #fff; background-color: #80a7c8; } .mg-button.disabled { background-color: #808080; color: #999; pointer-events: none; } .mg-share { max-width: 400px; display: flex; flex-direction: column; gap: 1rem; } .mg-share__header { font-family: "Roboto", sans-serif; color: #1a1a1a; font-weight: 600; font-size: 1.6rem; display: flex; justify-content: start; } .mg-share__buttons { display: flex; gap: 0.5rem; flex-direction: row; justify-content: left; align-items: center; } .mg-share__button { width: 4rem; height: 4rem; padding: 1rem; border-radius: 0; background-color: #004f91; color: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid #fff; } .mg-share__button:hover { background-color: rgba(51, 114, 167, 0.8); } .mg-share__button:focus-visible { box-shadow: 0 0 4px #3372a7; outline: 0; } .mg-share__copy-button { display: flex; flex-direction: row; justify-content: space-between; align-items: center; cursor: pointer; border: 0 solid #fff; color: #fff; font-family: "Roboto", sans-serif; padding: 1rem; background-color: #004f91; } .mg-share__copy-button:hover .mg-share__copy-text { text-decoration: underline; } .mg-share__clip-icon { flex-shrink: 0; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; } .mg-share__clip-icon img { width: 18px; } .mg-share__copy-text { color: #fff; font-size: 1rem; overflow: hidden; scrollbar-width: 0; height: 17px; flex: auto; align-items: start; margin-right: 1em; margin-left: 1em; } .mg-share__stack-icon { flex-shrink: 0; width: 25px; height: 25px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 79, 145, 0.5); } .mg-share__stack-icon img { width: 18px; } /* content-card start */ .mg-card { display: inline-block; position: relative; margin-bottom: 1rem; } .mg-card__vc { display: grid; gap: 0.5rem; } .mg-card__vc .mg-card__visual { aspect-ratio: 16/9; overflow: hidden; } .mg-card__hc { color: #1a1a1a; display: grid; grid-template-columns: 1fr; grid-template-rows: 300px 1fr auto; gap: 1rem; } .mg-card__hc__content { grid-column: 1/3; grid-row: 2/3; } @media (min-width: 480px) { .mg-card__hc__content { grid-column: 2/4; grid-row: 1/2; } } @media (min-width: 480px) { .mg-card__hc { grid-template-columns: 160px repeat(2, 1fr); grid-template-rows: 1fr auto; } } @media (min-width: 1024px) { .mg-card__hc { grid-template-columns: 330px 1fr; } } .mg-card__hc.mg-card-book__hc { grid-template-rows: 200px 1fr auto; } .mg-card__hc.mg-card-book__hc .mg-card__visual { border: 1px solid rgba(77, 77, 77, 0.2); } @media (min-width: 480px) { .mg-card__hc.mg-card-book__hc { grid-template-columns: 160px repeat(2, 1fr); grid-template-rows: 1fr auto; } } .mg-card__visual { align-items: flex-end; display: flex; justify-content: flex-end; } .mg-card__image { object-fit: cover; width: 100%; align-self: center; } .mg-card__share { cursor: pointer; display: inline-block; padding: 0 0.5rem 0.25rem; position: absolute; z-index: 101; } .mg-card__label { color: #004f91; cursor: pointer; display: inline-block; font-size: 1.25rem; margin-right: 0.5rem; } .mg-card__label:hover { color: #004f91; } .mg-card__title { font-size: 2.3rem; font-weight: bold; line-height: 1.25em; padding-bottom: 0.75rem; padding-top: 1rem; } .mg-card__title a { color: #1a1a1a; cursor: pointer; display: inline-block; } .mg-card__title .active { background: #e6e6e6; font-weight: bold; } .mg-card__title a::after { bottom: 0; content: ""; left: 0; position: absolute; right: 0; top: 0; z-index: 100; } .mg-card__summary { padding-bottom: 0.5rem; } .mg-card__summary a, .mg-card__text-link { color: #004f91; } .mg-card__summary a, .mg-card__text-link, .mg-card__label, .mg-card .mg-button { position: relative; z-index: 101; } .mg-card__summary a:hover, .mg-card__text-link:hover { text-decoration: underline; } .mg-card__book { max-width: 200px; } .mg-card__book .mg-card__visual { aspect-ratio: 3/4; border: 1px solid rgba(77, 77, 77, 0.2); } .mg-card__book .mg-card__title { font-size: 1.6rem; padding-top: 0.25rem; } @media (min-width: 1164px) { .mg-card__book { max-width: 400px; } } /* content-card end */ .mg-hero { background-size: cover; background-position: center; color: #fff; display: grid; grid-template-columns: 1fr; position: relative; margin-left: calc(50% - 50vw); padding-left: 1rem; width: 100vw; } @media (min-width: 1024px) { .mg-hero { aspect-ratio: 16/4; padding-left: calc(50vw - 582px); } } @media (min-width: 1440px) { .mg-hero { padding-left: calc(50vw - 720px); } } .mg-hero a.mg-button-primary { background-color: #fff; } .mg-hero a.mg-button-secondary { background-color: rgba(255, 255, 255, 0.9); } .mg-hero a.mg-button, .mg-hero a.mg-button:hover, .mg-hero a.mg-button:visited { color: #004f91; } .mg-hero__overlay { align-items: center; background-color: rgba(0, 79, 145, 0.85); display: grid; margin: 0; max-width: 40rem; padding: 2rem; } .mg-hero__content { display: grid; margin-top: 0.25rem; row-gap: 1rem; } .mg-hero__meta { padding-bottom: 0.25rem; } .mg-hero__meta.meta-detail { display: flex; flex-direction: column; } .mg-hero__label { display: inline-block; font-size: 1.25rem; font-weight: bold; margin-right: 0.25rem; padding: 0.25rem 0; } .mg-hero__label.detail { font-weight: normal; } .mg-hero a, .mg-hero a:hover, .mg-hero a:visited { color: #fff; } .mg-hero__title { color: #fff; margin-bottom: 0.25rem; display: inline-block; line-height: 1; font-weight: bold; font-size: 3.2rem; } .mg-hero__title .text-xxl { font-size: 3.6rem; } @media (max-width: 480px) { .mg-hero__title .text-xxl { font-size: 3.2rem; } } .mg-hero__title .text-xl { font-size: 3.2rem; padding-top: 2.4rem; padding-bottom: 1.5rem; } @media (max-width: 480px) { .mg-hero__title .text-xl { font-size: 2.3rem; padding-top: 2.4rem; padding-bottom: 1.5rem; } } .mg-hero__title h1, .mg-hero__title h2, .mg-hero__title h3, .mg-hero__title h4, .mg-hero__title h5, .mg-hero__title h6 { color: #fff; font-weight: bold; font-size: 3.2rem; } .mg-hero__title h1.text-xxl, .mg-hero__title h2.text-xxl, .mg-hero__title h3.text-xxl, .mg-hero__title h4.text-xxl, .mg-hero__title h5.text-xxl, .mg-hero__title h6.text-xxl { font-size: 3.6rem; } @media (max-width: 480px) { .mg-hero__title h1.text-xxl, .mg-hero__title h2.text-xxl, .mg-hero__title h3.text-xxl, .mg-hero__title h4.text-xxl, .mg-hero__title h5.text-xxl, .mg-hero__title h6.text-xxl { font-size: 3.2rem; } } .mg-hero__title h1.text-xl, .mg-hero__title h2.text-xl, .mg-hero__title h3.text-xl, .mg-hero__title h4.text-xl, .mg-hero__title h5.text-xl, .mg-hero__title h6.text-xl { font-size: 3.2rem; padding-top: 2.4rem; padding-bottom: 1.5rem; } @media (max-width: 480px) { .mg-hero__title h1.text-xl, .mg-hero__title h2.text-xl, .mg-hero__title h3.text-xl, .mg-hero__title h4.text-xl, .mg-hero__title h5.text-xl, .mg-hero__title h6.text-xl { font-size: 2.3rem; padding-top: 2.4rem; padding-bottom: 1.5rem; } } .mg-hero__summaryText { font-size: 1.8rem; margin-bottom: 0.25rem; } .mg-hero__buttons { padding-top: 0.75rem; display: flex; padding-bottom: 0.5rem; } @media (max-width: 1024px) { .mg-hero--child .mg-hero__overlay { margin-left: 0; } } .mg-hero--secondary .mg-hero__overlay { background-color: rgba(237, 131, 63, 0.85); } .mg-hero--secondary .mg-hero__overlay a.mg-button, .mg-hero--secondary .mg-hero__overlay a.mg-button:hover, .mg-hero--secondary .mg-hero__overlay a.mg-button:visited { color: #ed833f; } .mg-hero--tertiary .mg-hero__overlay { background-color: rgba(0, 0, 0, 0.85); } .mg-hero--tertiary .mg-hero__overlay a.mg-button, .mg-hero--tertiary .mg-hero__overlay a.mg-button:hover, .mg-hero--tertiary .mg-hero__overlay a.mg-button:visited { color: #000; } .mg-hero--quaternary .mg-hero__overlay { background-color: rgba(199, 34, 54, 0.85); } .mg-hero--quaternary .mg-hero__overlay a.mg-button, .mg-hero--quaternary .mg-hero__overlay a.mg-button:hover, .mg-hero--quaternary .mg-hero__overlay a.mg-button:visited { color: #c72236; } [dir=rtl] .mg-hero { margin-right: calc(50% - 50vw); padding-right: 1rem; } @media (min-width: 1024px) { [dir=rtl] .mg-hero { padding-right: calc(50vw - 582px); } } @media (min-width: 1440px) { [dir=rtl] .mg-hero { padding-right: calc(50vw - 720px); } } .mg-tabs__list { background: #e6edf4; width: 100%; margin: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; position: relative; } .mg-tabs__item { display: inline-block; -ms-flex-preferred-size: max-content; flex-basis: max-content; padding: 0; } .mg-tabs--stacked .mg-tabs__list { display: flex; flex-direction: column; } .mg-tabs--stacked .mg-tabs__item { width: 100%; margin-bottom: 0.25rem; } .mg-tabs--stacked .mg-tabs-content, .mg-tabs--horizontal .mg-tabs-content { padding-left: 0; display: grid; } .mg-tabs--stacked .mg-tabs__link.is-active + .mg-tabs-content, .mg-tabs--horizontal .mg-tabs__link.is-active + .mg-tabs-content { display: block; } .mg-tabs--stacked .mg-tabs__list { display: grid; grid-template-areas: "tabs" "section"; grid-template-columns: 1fr; grid-template-rows: auto 1fr; position: relative; } .mg-tabs--stacked .mg-tabs__section { padding: 1.5rem; } @media (min-width: 480px) { .mg-tabs--horizontal .mg-tabs__list { display: grid; min-width: 800px; grid-template-areas: "a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a" "b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b b"; } .mg-tabs--horizontal .mg-tabs__item { grid-row: 1; display: flex; } .mg-tabs--horizontal .mg-tabs__link { width: max-content; display: flex; flex-grow: 1; } .mg-tabs--horizontal .mg-tabs-content { width: 100%; height: 100%; grid-row: 2; grid-column: 1/-1; grid-area: b; list-style-type: none; } } @media (max-width: 480px) { .mg-tabs--horizontal .mg-tabs--horizontal .mg-tabs-content { padding-left: 0; display: grid; } .mg-tabs--horizontal .mg-tabs--horizontal .mg-tabs__link.is-active + .mg-tabs-content { display: block; } } .mg-tabs--horizontal .mg-tabs-content:has([hidden]) { display: none; } .mg-tabs__link { border: none; border-radius: 0; color: #333; font-family: "Roboto", sans-serif; font-size: 1.8rem; font-weight: 600; line-height: 1.421; margin: 0; display: block; outline: 0; padding: 0.75rem 1.5rem; position: relative; text-decoration: none; } .mg-tabs__link:hover, .mg-tabs__link:focus { background: #004f91; border-bottom: 0.25rem solid #333; color: #fff; z-index: 1150; text-decoration: none; } .mg-tabs__link.is-active { color: #fff; background-color: #004f91; text-shadow: none; border-bottom: 0.25rem solid #004f91; } .mg-tabs__link.is-active:hover, .mg-tabs__link.is-active:focus { background: #004f91; border-bottom: 0.25rem solid #333; color: #fff; } .mg-tabs__section { background-color: #fff; box-shadow: none; padding: 1rem 0; border-radius: 0 0 0 0; } [dir=rtl] .mg-tabs > ul { padding-right: 0; /* medium design */ } @media (width >= 48em) { [dir=rtl] .mg-tabs > ul { padding-right: 3rem; } } [dir=rtl] .mg-tabs > ul li { margin-left: 1rem; margin-right: 0; padding-right: 0; } /* Tab end */ .mg-table-of-contents { background-color: #e6e6e6; padding: 1.5rem; margin-bottom: 0.5rem; width: 400px; max-width: 100%; } .mg-table-of-contents li { margin-left: 0.5rem; margin-bottom: 0.5rem; } .mg-on-this-page-header { font-size: 1.8rem; margin-bottom: 1rem; } .mg-container-full-width { position: relative; } .mg-container-full-width:before { background-color: inherit; background-image: inherit; background-position: inherit; background-repeat: inherit; background-size: cover; content: ""; grid-column: 1/-1; height: 100%; margin-left: calc(50% - 50vw); position: absolute; top: 0; width: 100vw; z-index: -1; } [dir=rtl] .mg-container-full-width::before { margin-right: calc(50% - 50vw); } :root { --mg-show-more-height: 200px; } .mg-show-more--collapsed { max-height: 200px; max-height: var(--mg-show-more-height); overflow: hidden; } .mg-show-more--collapsed { position: relative; margin-bottom: -1rem; } .mg-show-more--collapsed:before { content: ""; cursor: s-resize; display: block; position: absolute; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255)); height: 200px; width: 100%; z-index: 1; margin-top: calc(var(--mg-show-more-height) - 200px); } .mg-show-more--button { position: relative; z-index: 2; padding: 1rem 4rem; } /*# sourceMappingURL=style.css.map */