/* Theme Name: Kvutis Description: Ett bloggtema för Svedala kommun. Version: 1.0 Author: Tobias Hassgård Author URI: https://hillsidepeak.com/ Copyright: Svedala kommun */ /* ================================ INDEX: 01 Defaults 02 Commons 03 Navigations 04 Layouts and contents 05 Misc 06 Overriding styles ================================ ------------------------------------------------------------------------------------------------------------- 01 Defaults ------------------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ /*** Imports and varibles ***/ @import url('css/reset.css'); @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'); @import url('css/fonts/lsr.css'); @import url('css/color-palette.css'); :root { color-scheme:light dark; } :root { --filter-light: brightness(0) saturate(100%) invert(99%) sepia(3%) saturate(1418%) hue-rotate(233deg) brightness(113%) contrast(73%); } html[data-theme-size="small"] { font-size: 75%; } html[data-theme-size="normal"] { font-size: 100%; } html[data-theme-size="large"] { font-size: 125%; } /*** Elements ***/ input, button, .button, select, textarea { font-family:'Lato', sans-serif; font-weight:400; font-size:1rem; text-decoration:none; width:100%; border:1px solid; padding:0.75rem 1.25rem; margin-top:0.5rem; box-sizing:border-box; } button, button[type="reset"], input[type="submit"], .button, input[type="reset"] { font-size:0.75rem; line-height:normal; text-transform:uppercase; text-decoration:none; letter-spacing:1px; border-radius:2rem; position:relative; -webkit-appearance:none; appearance:none; -webkit-transition: all 250ms ease-in-out; -moz-transition: all 250ms ease-in-out; -o-transition: all 250ms ease-in-out; -ms-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } .button { display:flex; flex:1 1 content; justify-content:center; align-items:center; column-gap:0.75rem; width:auto; font-size:0.75rem; letter-spacing:1px; border-radius:3px; margin:0; min-width:2.625rem; min-height:2.625rem; text-decoration:none; } input[type="submit"], .button.submit { border:1px solid !important; } input[disabled], button[disabled] { cursor:not-allowed; } input[disabled]:hover, input[disabled]:active, input[disabled]:focus { opacity:0.8; } .post-password-form { max-width:32rem; } .post-password-form p { margin-bottom:1rem; } .post-password-form label { display:block; font-weight:700; } .post-password-form input[type="password"]:focus { outline:3px solid; outline-offset:2px; } .post-password-form input[type="submit"] { margin-top:1rem; } *[data-button-role="favorite"]::before { content:'\2606' !important; font-size:1.125rem; } *[data-button-role="favorite"][aria-pressed="true"]::before { content:'\2605' !important; } *[data-button-role="back"], *[data-button-role="prev"] { /*padding-left:2.5rem;*/ } *[data-button-role="back"]::before { content:'\21B2'; font-size:1.125rem; display:inline-block; width:1rem; height:1rem; transform:rotate(90deg); } *[data-button-role="prev"]::before { display:inline-block; width:0.95rem; height:0.95rem; content:url(https://assets.svedala.se/img/iconArrowcircle.svg); background-size:cover; position:absolute; left:1.25rem; top:0.65rem; transform:rotate(180deg); } *[data-button-role="edit"]::before { content:'\22EE' !important; font-size:1.125rem; } *[data-button-role="save"]::before { content:'\1F5AB'; font-size:1.125rem; } *[data-button-role="new"]::before { content:'\002B'; } *[data-button-role="cancel"]::before{ content:'\2A2F'; font-size:1.125rem; } *[data-button-role="close"] { width:0; height:0; padding:1rem; font-size:1rem; } *[data-button-role="close"]::before { content:'\2A2F'; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } *[aria-expanded="false"].iconAfter::after, *[aria-selected="false"].iconAfter::after, *[aria-expanded="true"].iconAfter::after, *[aria-selected="true"].iconAfter::after { width:1rem; height:1rem; } *[aria-expanded="false"].iconAfter::after, *[aria-selected="false"].iconAfter::after { content:'+'; vertical-align:text-top; } *[aria-expanded="true"].iconAfter::after, *[aria-selected="true"].iconAfter::after { content:'-'; vertical-align:text-top; } *[data-editor-tag="strong"] { font-weight:700; } *[data-editor-tag="u"] { text-decoration:underline; } *[data-editor-tag="i"] { font-style:italic; } *[contenteditable="true"] { border:1px dotted; } select { display:block; padding:0.75rem 4.25rem 0.75rem 1.25rem; cursor:pointer; line-height:normal; appearance:none; -webkit-appearance:none; overflow:hidden; background-image:url(https://assets.svedala.se/img/dropdownArrow.svg); background-repeat:no-repeat; background-position:100% 50%; } label { display:block; } label[data-required="true"]::after { content:'*'; margin-left:0.25rem; } mark { padding:0 0.25rem 0 0.125rem; } figure { box-sizing:border-box; } img { transition:transform 300ms; } img:is([sizes="auto" i], [sizes^="auto," i]) { content-visibility:auto; contain-intrinsic-size:auto none; } article, .article { line-height:1.5; border:1px solid; box-shadow:0 3px 5px rgba(0,0,0,0.05); } article img, .article img { padding:1rem; } article ul, article ol, .article ul, .article ol { margin:0.5rem 0; } article ul li, .article ul li, footer ul li { margin-left:2rem; } article ol li, .article ol li { margin:0 0 0.25em 2.5em; } article ol li ul, .article ol li ul { margin-bottom:1em; } article ol.alphalist li, .article ol.alphalist li { list-style-type:upper-alpha; margin-bottom:0; } article ul.circlelist li, .article ul.circlelist li { list-style-type:circle; } article ul.dashlist li, .article ul.dashlist li { list-style-type:none; } article ul.dashlist li::before, .article ul.dashlist li::before { display:inline-block; content:'-'; width:1rem; margin-left:-1rem; } article table th, article td, .article table th, .article td { padding:0.5rem 1rem; } dialog { width:40rem; max-width:90%; flex-direction:column; row-gap:1rem; box-sizing:border-box; padding:0; border:1px solid; box-shadow:0 3px 7px rgba(0,0,0,0.05); } dialog[open] { display:flex; } dialog button[data-button-role="close"] { position:absolute; top:-1rem; right:0; margin-top:0; } dialog label { text-align:left; } dialog .description { text-align:left; } dialog textarea { min-height:7rem; } dialog input[type="submit"] { margin-top:auto; } *[role="note"], *[role="alert"], .errorMessage, .successMessage, .infoMessage, .warningMessage { border-style:solid; border-width:1px; border-radius:0; padding:0.5rem 0.75rem; box-sizing:border-box; text-align:left; } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } /*** Typography ***/ body { font-family:'Lato', sans-serif; background-image:none; background-repeat:repeat; background-size:cover; background-attachment:fixed; background-position:center; } h1, h2, h3, h4, h5, h6 { font-family:'Lato', serif; font-weight:700; } h1 { font-family:'lsr'; font-size:3.5rem; font-weight:300; text-transform:none; line-height:1.25; text-align:left; margin:auto auto 2rem auto; } h2 { font-size:1.5rem; margin-bottom:0.5rem; } h3 { font-size:1.25rem; margin-bottom:0.5rem; } h4 { font-family:'Lato', sans-serif; font-size:1rem; font-weight:700; font-style:italic; margin-bottom:0.25rem; } p + h2 { margin-top:1.5rem; } p + h3 { margin-top:1rem; } p + h4 { margin-top:0.5rem; } .lsr { font-family:'lsr'; font-size:3rem; text-align:center; position:relative; z-index:5; text-shadow:0 3px 7px rgba(0,0,0,0.5); } blockquote { border-left:3px solid; font-style:italic; margin:1.25rem auto; padding:1.5rem; position:relative; } .article blockquote.lsr { text-shadow:none; font-size:1.75rem; } .article blockquote::before, .article blockquote::after { content:''; mask:url('media/icons/iconQuotation.svg'); mask-image:url('media/icons/iconQuotation.svg'); width:3rem; height:3rem; display:block; position:absolute; background-color:var(--light-level-7); } .article blockquote::before { top:-1.25rem; left:0.5rem; transform:rotate(180deg); } .article blockquote::after { bottom:-1.25rem; right:0.5rem; } a { text-decoration:underline; font-weight:normal; display:inline-block; -webkit-transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; -ms-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; } a:focus, button:focus { outline:3px solid; outline-offset:2px; } a span.button, a:has(> span.button) { text-decoration:none; } a[target="_blank"]:not(:empty)::after, .anchor::after, a[href$=".pdf"]::after, a[href$=".pptx"]::after, a[href$=".docx"]::after, a[href$=".xlsx"]::after { content:''; display:inline-block; position:relative; width:0.625rem; height:0.625rem; background-size:0.625rem; margin-right:0.625rem; left:0.25rem; top:0; } a[target="_blank"]:not(:empty)::after { mask-image:url('media/icons/iconNewWindow.svg'); mask-image:url('media/icons/iconNewWindow.svg'); } .anchor::after { mask-image:url('media/icons/iconAnchorLink.svg'); mask-image:url('media/icons/iconAnchorLink.svg'); } a[href$=".pdf"]::after { mask-image:url('media/icons/iconPdf_simple.svg'); mask-image:url('media/icons/iconPdf_simple.svg'); width:0.875rem; height:0.875rem; background-size:0.875rem; } a[href$=".pptx"]::after { background-image:url('media/icons/iconPowerpoint.svg'); width:1rem; height:1rem; background-size:cover; } a[href$=".docx"]::after { background-image:url('media/icons/iconWord.svg'); width:1rem; height:1rem; background-size:cover; } a[href$=".xlsx"]::after { background-image:url('media/icons/iconExcel.svg'); width:1rem; height:1rem; background-size:cover; } ::backdrop { opacity:1; } /* ---------------------------------------------------------------------------------------------------------- 02 Commons ------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /*** Animations ***/ @keyframes fadein { from { opacity:0; } to { opacity:1; } } @keyframes fadeinUp { from { transform:translate3d(0,40px,0); } to { transform:translate3d(0,0,0); opacity:1; } } @keyframes fadeinLeft { from { transform:translate3d(100px,0,0); opacity:0; } to { transform:translate3d(0,0,0); opacity:1; } } @keyframes spin { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } *[data-animation="fade-up"] { transition-duration:1s; transition-timing-function:ease; transition-property:opacity, transform; opacity:0; transform:translate3d(0,100px,0); } *[data-animation="fade-up"].animated { opacity:1; transform:translateZ(0); } /*** Joint elements ***/ main, #mainHeaderCover { -webkit-animation:fadein 1s; -moz-animation:fadein 1s; -o-animation:fadein 1s; -ms-animation:fadein 1s; animation:fadein 1s; } .sectionRow, .section, article { width:100%; display:block; height:auto; margin:auto; box-sizing:border-box; } .wp-caption-text { margin:0; padding:0; position:relative; top:-1.25em; left:1.25em; font-size:0.875em; font-style:italic; } a img:hover, article img:hover, a:link:hover { transform:scale(1.05); } header img:hover, footer img:hover { transform:none; } #headerBanner button:focus, #metaInformation button:focus, #mainSidebar li a, .boxButtonContainer li a, #pageSidebar > button, .utilities button { outline-offset:-3px; } .wp-video, .wp-video-shortcode { width:auto !important; max-width:100%; height:auto !important; } .mejs-mediaelement { position:relative !important; } .mejs-layers { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:6.25em; height:6.25em; } .mejs-controls { top:0; } /* .section { max-width:87.5rem; } footer .content{ text-align:left; line-height:1.5; display:flex; flex-wrap:wrap; justify-content:space-between; align-content:flex-start; align-items:stretch; } */ /*** Common classes ***/ .cover { } .ingress { font-size:1.125rem; display:block; padding-bottom:2rem; margin-bottom:2rem; border-bottom:1px solid; } .factbox { width:fit-content; font-size:0.875rem; border:0; padding:1rem; margin:1rem; position:relative; } .factbox::before { content:''; width:2px; height:100%; position:absolute; left:-1rem; top:0; bottom:0; display:block; } .alignleft { float:left; } .alignright { float:right; } .aligncenter { display:block; margin:auto; text-align:center; clear:both; } .clear { clear:both; margin:0; padding:0; } .fixed { position:fixed !important; } .filterWhite { filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); } .visible { visibility:visible !important; opacity:1; transition:opacity 250ms linear; } .invisible { visibility:hidden; opacity:0; height:0; padding:0; margin:0; transition:visibility 0s 250ms, opacity 250ms linear; } #backToTop.invisible { display:none; } .home .fixed { position:absolute !important; } /* Style fix for headerbanner on homepage */ .loadingSpinner { border:10px solid; border-top:10px solid; border-radius:50%; width:3.75rem; height:3.75rem; animation:spin 1s linear infinite; } button .loadingSpinner { width:1em; height:1em; border-width:2px; display:inline-block; margin-right:0.5rem; } .iconBefore { margin-left:0.5rem; } .iconAfter { margin-right:0.5rem; vertical-align:baseline; } .iconBefore::before, .iconAfter::after { content:''; display:inline-block; width:1rem; height:1rem; position:relative; vertical-align:text-bottom; background-size:cover; } .iconBefore::before { margin-right:0.375rem; } .iconAfter::after { margin-left:0.375rem; } /* ---------------------------------------------------------------------------------------------------------- 03 Navigations --------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ #headerBanner { width:100%; height:auto; display:flex; border-bottom:1px solid; box-shadow:0 3px 7px rgba(0,0,0,0.05); z-index:10; position:sticky; top:0; } #userControls { display:flex; justify-content:flex-end; align-items:stretch; margin:auto 0 auto auto; } #logoBox { height:auto; padding:1rem; position:absolute; left:0; top:0; border-style:solid; border-width:0 1px 1px 1px; } .logo { width:auto; text-align:center; display:block; position:relative; margin:auto; } .logo img { width:100%; max-width:100%; height:100%; object-fit:contain; } #siteLogo { height:3.375em; margin:auto 2rem auto 0.125rem; } #headerBanner .button { display:block; border-style:solid; border-width:0 0 0 1px; position:relative; border-radius:0; padding:1.25rem 1.75rem; transition:none; } #mainSidebar { height:100%; text-align:left; transition:all 250ms ease-in-out; row-gap:1rem; position:fixed; top:0; right:0; bottom:0; z-index:10; border-style:solid; border-width:0 0 0 1px; overflow:hidden auto; } #mainSidebar .column { flex:0 0 auto; row-gap:1rem; } #mainSidebar .widget { width:100%; } #mainSidebar header { padding:1rem; text-align:center; } #mainSidebar h2, #mainSidebar h3 { font-weight:normal; text-align:center; margin:auto; } #mainSidebar h2 { font-size:1.125rem; } #mainSidebar h3 { font-size:1rem; margin-bottom:1rem; } #mainSidebar ul { display:flex; flex-direction:column; row-gap:1px; width:100%; } #mainSidebar ul ul li { padding-left:0.5rem; } #mainSidebar ul li { display:flex; flex-direction:column; margin:0; list-style-type:none; font-size:0.875rem; } #mainSidebar a { flex:auto; padding:0.75rem 1.25rem; text-decoration:none; } #mainSidebar ul ul a::before { content:'-'; margin-right:0.375rem; } #mainSidebar .logo { width:5rem; max-width:80%; max-height:4rem; display:flex; } #mainSidebar[data-collapsed="false"] { width:15.625rem; visibility:visible; opacity:100%; padding:2rem 0; } #mainSidebar[data-collapsed="true"] { width:0; visibility:hidden; opacity:0; padding:0; } #mainSidebar button[data-button-role="close"] { width:auto; height:auto; font-size:0.75rem; left:50%; transform:translateX(-50%); padding:0.5rem 0.75rem; margin:0.5rem 0; } #mainSidebar button[data-button-role="close"]::before { position:relative; top:auto; left:auto; font-size:1rem; transform:none; margin-right:0.25rem; } #headerBanner #toggleBtnMenu { flex:0 1 content; font-size:0.75rem; text-indent:1.75rem; } #headerBanner #toggleBtnMenu .icon { position:absolute; left:25%; top:50%; transform:translate(-25%, 0); } #headerBanner #toggleBtnMenu .icon, #headerBanner #toggleBtnMenu .icon::before, #headerBanner #toggleBtnMenu .icon::after { content:''; width:1.25rem; height:1px; display:block; } #headerBanner #toggleBtnMenu .icon::before { position:relative; top:-5px; transform:rotate(0deg); transition:all 0.2s ease; } #headerBanner #toggleBtnMenu .icon::after { position:relative; top:4px; transform:rotate(0deg); transition:all 0.2s ease; } #headerBanner #toggleBtnMenu[aria-expanded="true"] .icon::before{ position:absolute; top:0; right:0; transform:rotate(45deg); } #headerBanner #toggleBtnMenu[aria-expanded="true"] .icon::after { position:absolute; top:0; right:0; transform:rotate(-45deg); } #headerBanner #toggleBtnNotifications::before { mask:url('media/icons/iconBell.svg'); mask-image:url('media/icons/iconBell.svg'); } #headerBanner #toggleBtnFeedback::before { mask:url('media/icons/iconBug.svg'); mask-image:url('media/icons/iconBug.svg'); } .logged-in #headerBanner #toggleBtnNotifications::before { mask:url('media/icons/iconBellActive.svg'); mask-image:url('media/icons/iconBellActive.svg'); } #headerBanner #toggleBtnProfile::before { mask:url('media/icons/iconProfile.svg'); mask-image:url('media/icons/iconProfile.svg'); } .logged-in #headerBanner #toggleBtnProfile::before { mask:url('media/icons/iconProfileActive.svg'); mask-image:url('media/icons/iconProfileActive.svg'); } #headerBanner #searchPage:hover { transform:none; } #headerBanner #searchPage::before { mask:url('media/icons/iconSearch.svg'); mask-image:url('media/icons/iconSearch.svg'); } #headerBanner .iconBefore { padding:1.25rem 1.75rem !important; margin-left:auto; } #headerBanner .iconBefore::before { content:''; left:auto; position:relative; width:1.75rem; height:1.75rem; margin-right:auto; } #headerBanner #toggleBtnNotifications .indicator { font-size:0.75rem; text-indent:0; line-height:normal; width:auto; min-width:1rem; height:1rem; padding:0.125rem; border-radius:50%; position:absolute; top:20%; right:25%; } .topMenu { margin-left:0; font-size:0.875rem; } .topMenu ul { display:flex; flex-direction:row; column-gap:1.25rem; } .topMenu ul li { list-style-type:none; } .topMenu a { color:inherit; text-decoration:none; text-transform:uppercase; letter-spacing:1px; } .topMenu a:hover { text-decoration:underline; } #mainSidebar .topMenu { display:none; } #mainSidebar .topMenu a { text-transform:none; letter-spacing:0; } #userControls section { width:auto; min-width:20rem; position:absolute; top:100%; right:0; left:auto; transition:all 150ms; border:1px solid; text-align:left; } #userControls .row { padding:1rem; display:block; box-sizing:border-box; border-top:1px solid; } #userControls header { display:grid !important; grid-template-columns:10% calc(90% - 1rem); column-gap:1rem; justify-content:start; border-top:0 !important; } #userControls header > div { margin:auto; margin-left:0; } #userControls header h1 { font-size:1rem !important; font-weight:700; margin-bottom:0; position:relative; } #userControls header h2 { font-size:1rem !important; font-weight:400; margin-bottom:0.25rem; } #userControls li { margin-left:1rem; } #userControls li a { padding:0.125rem 0; } #userControls > button { font-size:0; } #userControls dialog header { grid-template-columns:2.5rem calc(100% - 2.5rem - 1rem - 1px); padding:1rem; } #userControls dialog header > div { width:100%; } #profileMenu header { grid-template-columns:15% calc(85% - 1rem); } #profileMenu header h1 { font-family:'Lato', serif; padding-bottom:0.25rem; top:0; } #themeFontSizeSelection .buttonGroup { display: flex; flex-direction: row; justify-content: flex-start; margin-top: 0.5rem; } #themeFontSizeSelection .buttonGroup label { display: flex; align-items: center; width: auto; padding: 0.25rem 1rem; text-align: center; font-weight: 400; border-style: solid; border-width: 1px 0 1px 0; background-color: transparent; border-color: var(--blue-level-6); color: inherit; } #themeFontSizeSelection .buttonGroup label:first-of-type { border-left-width: 1px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } #themeFontSizeSelection .buttonGroup label:last-of-type { border-right-width: 1px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } #themeFontSizeSelection .buttonGroup input { display: none; } #themeFontSizeSelection .buttonGroup input:checked + label { background-color: var(--blue-level-6); color:var(--light-level-1); } #themeFontSizeSelection .buttonGroup .small { font-size: 75%; } #themeFontSizeSelection .buttonGroup .medium { font-size: 100%; } #themeFontSizeSelection .buttonGroup .large { font-size: 125%; } .userControlMenu[aria-hidden="false"] { opacity:100%; z-index:5; visibility:visible; } .userControlMenu[aria-hidden="true"] { opacity:0; z-index:-1; visibility:hidden; } #headerBanner .userControlMenu .button { display:flex; width:100%; padding:0.75rem; font-size:0.75rem; font-weight:300; border:0; transition:all 200ms ease-in-out; } button[role="switch"] { width:3.5rem; padding:0.25rem; transition:all 200ms ease-in-out; } button[role="switch"] span { display:block; width:1rem; height:1rem; border-radius:50%; transition:all 100ms ease-in-out; } button[role="switch"][aria-checked="false"] span { margin:0 auto 0 0; } button[role="switch"][aria-checked="true"] span { margin:0 0 0 auto; outline:5px solid; outline-offset:-10px; } .toggleBtnText { padding:1.75rem; display:block; } #mainBreadcrumbs { padding:1rem; border-style:solid; border-width:0 0 1px 0; } .breadcrumbs { width:auto; font-size:0.875em; text-align:left; justify-content:flex-start !important; } .breadcrumbs span { font-weight:normal; word-break:break-word; hyphens:auto; } .breadcrumbs .separator { margin:auto 0.25rem; } #gotoMain { position:absolute; top:0; left:-100vw; z-index:9999; padding:1em; border:1px solid; } #gotoMain:focus { left:10%; top:3em; } #backToTop { position:fixed; right:1rem; bottom:1rem; z-index:5; border:1px solid; } #backToTop a { padding:1rem; text-decoration:none; } /* ---------------------------------------------------------------------------------------------------------- 04 Layouts and contents ------------------------------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ .row { display:flex; flex:1 1 100%; flex-wrap:wrap; flex-direction:row; justify-content:center; align-items:stretch; width:100%; margin:auto; } .column { display:flex; flex:1 1 25%; flex-direction:column; align-items:flex-start; margin:0; width:100%; max-width:100%; row-gap:2rem; } .content { width:100%; height:100%; min-height:10rem; padding:5rem; align-content:center; line-height:1.5; } .content * { max-width:100% !important; } .banner { } .banner h2 { font-size:2rem; font-weight:300; } .cover { position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; background-size:cover; background-position:center; background-repeat:no-repeat; } .flag { position:absolute; left:0; bottom:1rem; z-index:10; text-transform:uppercase; border:0; line-height:1; padding:0.75rem 1rem; font-size:0.75rem; } .flag::after { content:''; position:absolute; left:100%; top:0; bottom:0; border-left:1.5rem solid; border-top:1.125rem solid; border-bottom:1.125rem solid; height:auto; } .categoryList { display:flex; justify-content: flex-start; width:100%; flex-wrap:wrap; column-gap:0.25rem; row-gap:0.25rem; margin-top:1rem; } .categoryList a { text-decoration:none; } .categoryList a:focus { outline-offset: 5px; } .categoryList .category, .categoryList .tag { font-size:0.75rem; padding:0.125rem 0.375rem; border:1px solid; border-radius:3px; } .categoryStripe { display:block; width:100%; height:10px; } .buttonGroup { display: flex; } .postMetaInfo { justify-content:flex-start; column-gap:0.25rem; row-gap:0.25rem !important; } .postMetaInfo p { margin-bottom:auto; } .details { margin:0; } .rowIndicator { position:absolute; right:1.25rem; top:0.75rem; font-size:0.75rem; } .wp-caption { width:auto !important; } *[data-width-limit-row="true"], *[data-width-limit-content="true"] * { max-width:85rem; } *[data-padding-gap="false"] { padding:0 !important; row-gap:0 !important; column-gap:0 !important; } main { text-align:left; } section { text-align:center; } article, .article { text-align:left; padding:5rem; column-gap:5rem; } .home .banner .article { padding:4rem; column-gap:4rem; } .home .banner h2 { text-align:center; } section[data-section-type="module"] .row.featured { column-gap:0; } section[data-section-type="module"] article { padding:0; margin:0; } section[data-section-type="module"] .column { row-gap:0; } .article .column { row-gap:0; } .article .content { padding:0; align-content:flex-start; } .home .banner .article .content { align-content:center; } /*** Section specific ***/ #mainWrapper { height:100%; } #pageHeader { border-bottom:1px solid; } #pageHeader header { display:flex; flex-direction:column; row-gap:2rem; position:relative; z-index:5; } #pageHeader h1 { margin-bottom:auto; } .home #pageHeader { border-bottom:0; } .home #pageHeader header { text-align:center; row-gap:0; } .home #pageHeader .slideshow header { } .single #pageHeader h1 { margin:0; font-size:3vw; } #pageHeader nav { position:absolute; top:1rem; } .home #pageHeader *[role="separator"] { width:6rem; height:6px; margin:0 auto 3rem 0; } #pageHeader figure { display:flex; justify-content:flex-end; margin:0; border:0; min-height:25rem; } #pageHeader picture { position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; } #pageHeader picture img { object-fit:cover; width:100%; max-width:100%; height:100%; } #pageHeader .categoryList { margin-top:0; } #pageHeader .column { row-gap:0; max-width:85rem; } #pageHeader .content { padding:4rem; } .single #pageHeader .content { padding:1rem 4rem; } .single #pageHeader .content:first-of-type { padding:0; } #metaInformation { border-style:solid; border-width:0 0 1px 0; } #metaInformation > div { width:100%; } #metaInformation div[role="tablist"] { width:fit-content; display:flex; column-gap:1px; row-gap:1px; } #metaInformation div[role="tablist"] button:first-child { margin-left:1px; } #metaInformation div[role="tablist"] button:last-child { margin-right:1px; } #metaInformation button { width:auto; margin:0; border-radius:0; font-size:0.875rem; text-transform:none; font-weight:700; letter-spacing:0; border:0; } .metaSectionContainer { flex-direction:row; border-bottom:1px solid; transition:all 150ms ease 0s; } .metaSectionContainer[data-collapsed="false"] { visibility:visible; height:auto; opacity:1; padding-top:1.5rem; padding-bottom:1.5rem; } .metaSectionContainer[data-collapsed="true"] { visibility:hidden; height:0; opacity:0; border:0; } #metaBanner .categoryList { width:auto; margin-top:0; justify-content:flex-start; column-gap:0.5rem; row-gap:0.5rem; } #metaBanner .categoryList li { list-style-type:none; margin:0; } #metaBanner .categoryList a { font-size:0.75rem; padding:0.75rem 1.25rem; border-radius:2rem; border:1px solid; text-transform:uppercase; text-decoration:none; letter-spacing:1px; } #pageCategoryList { border-top:1px solid; } #pageCategoryList .categoryList { width:auto; margin-top:0; justify-content:flex-start; column-gap:0.5rem; row-gap:0.5rem; } #pageCategoryList li { list-style-type:none; margin:0; } #pageCategoryList li a { font-size:0.75rem; padding:0.75rem 1.25rem; border-radius:3px; border:1px solid; text-transform:uppercase; text-decoration:none; letter-spacing:1px; } #pageContent { padding:2.5rem; row-gap:2rem; column-gap:1rem; } .home #pageContent .column { row-gap:0; } .home #pageContent > .column > .row { margin-top:4rem; } .home #pageContent > .column > .row.banner { margin-top:0; } .home #pageContent > .column > .row:last-child, .home #pageContent > .column > .row[data-width-limit-content="true"] { margin-top:0; } #pageContent > .row { align-items:flex-start; } #pageContent header { display:flex; row-gap:0.5rem; flex-direction:column; justify-content:flex-start; align-items:flex-start; justify-items:flex-start; } #pageContent header h1 { padding:1rem; margin:0; position:relative; text-transform:none; } #pageContent header h1::after { content:''; height:auto; position:absolute; left:100%; top:0; bottom:0; border-bottom:3rem solid; border-left:3.25rem solid; } #postContainer { padding-bottom:0; border-bottom:0; } #postContainer article.column { flex:1 1 18rem; } #loadMore { width:auto; } #pageSidebar { flex-grow:0; align-self:baseline; position:sticky; top:5.25rem; row-gap:1px; padding:1px; border-style:solid; } #pageSidebar .article { max-height:50vh; padding:2rem; border:0; overflow-y:auto; } #pageSidebar section { text-align:left; } #pageSidebar header { font-size:1.125rem; font-weight:bold; } #pageSidebar header a { text-decoration:none; font-weight:inherit; } #pageSidebar .eventDateTime { display:flex; flex-direction:column; margin-bottom:1rem; } #pageSidebar .contact { font-size:0.875rem; display:flex; flex-direction:column; row-gap:0.5rem; } #pageSidebar address { display:flex; flex-direction:column; width:100%; } #pageSidebar nav a { vertical-align:top; } #pageSidebar h3 { font-size:1rem; } #pageSidebar > button { position:absolute; border-radius:0 3px 3px 0; left:100%; top:0; width:1rem; height:1rem; padding:1rem; margin-right:1px; } #pageSidebar > button::before { width:1rem; height:1rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } #pageSidebar > button[aria-expanded="false"]::before { content:'+'; } #pageSidebar > button[aria-expanded="true"]::before { content:'-'; } #pageSidebar[data-collapsed="true"] { position:absolute; right:2.5rem; width:0; padding:0; top:2.5rem; } #pageSidebar[data-collapsed="true"] > #pageSidebarContent { position:absolute; right:-100vw; z-index:-10; overflow:hidden; } #pageSidebarContent { row-gap:0; } #pageSidebarContent div { width:100%; } #pageToc ul li { list-style-type:none; margin-left:0; } #pageToc ul li ul li { padding-left:1.5rem; } #pageToc a { text-decoration:none; } #pageToc a:hover { text-decoration:underline; } #pageUtilities.article { padding:0; } .utilities { display:flex; width:100%; column-gap:1px; row-gap:1px; align-items:stretch; } .utilities button { margin:0; border:0; border-radius:0; } .utilities button.iconBefore::before { filter:brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%); margin-right:auto; width:1.25rem; height:1.25rem; } .utilities button span { transition-property:all; transition-timing-function:ease-out; opacity:1; visibility:visible; width:0; display:inline-block; font-size:0.625rem; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); } .utilities button.iconCopyUrl::before { width:1.5rem; height:1.5rem; } .utilities #copyUrlMessage { position:absolute; font-size:0.625rem; padding:0.25rem 0.5rem; top:50%; left:50%; opacity:1; transform:translate(-50%, -50%); transition-property:all; transition-timing-function:ease-in-out; } /*** Search section ***/ #searchSection { flex-wrap:nowrap; } #searchSection input { margin-top:auto; border-radius:3px 0 0 3px; } #searchSection button[type="submit"] { width:auto; font-size:1rem; border-radius:0 3px 3px 0; text-transform:none; } #searchSection button.iconBefore { display:flex; margin-left:0; } #searchResults ul { row-gap:1rem; } #searchResults ul li { width:100%; list-style-type:none; } #searchResults h2 { font-size:1.25rem; } #searchResults article { padding:1rem; } #searchResults .content { min-height:6rem; padding:0; } #searchResults *[data-table-type="results"] { } .indicator[data-post-type] { display:flex; flex-direction:row; align-items:center; column-gap:0.25rem; font-size:0.6875rem; text-transform:uppercase; letter-spacing:1px; margin:0; } .indicator[data-post-type]::before { content:''; display:block; width:1.25em; height:1.25em; border-radius:50%; } .pagination .nav-links { display:flex; justify-content:flex-start; flex-wrap:wrap; text-align:center; } .pagination .page-numbers { flex:0 0 1rem; font-size:0.875rem; border:1px solid; padding:0.675rem; margin:0.25rem; } .pagination a { text-decoration:none; } .pagination h2, .pagination label { font-size:1rem !important; margin-bottom:0.25rem; } .pagination select { display:inline-block; width:auto; } #table_page_controllers { display:flex; column-gap:2rem; row-gap:2rem; width:100%; margin-top:3rem; } #table_page_controllers nav { margin:0; } #table_page_navigation { text-align:left; } #table_rows_per_page { text-align:right; } /*** HeaderCover and Slideshow ***/ #headerCover { } #headerCover .overlay { position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; } #headerCover ul { margin:0; } #headerCover .controls { position:absolute; left:1.5rem; bottom:1rem; z-index:10; } .slideshow { position:absolute; top:0; left:0; right:0; bottom:0; z-index:1; max-width:160em; } .slideshow li { margin-left:auto !important; opacity:0; position:absolute; transition:opacity 1.5s; } .slideshow li:first-child { opacity:1; } /*.slideshowHeading { visibility:hidden; width:0; height:0; padding:0; margin:0; }*/ .slide { width:100%; height:100%; list-style-type:none; position:absolute; margin:0; background-size:cover; background-repeat:no-repeat; background-position:center; } /* .slideshow img { position:absolute; top:0; left:0; object-fit:cover; width:100%; height:100%; box-sizing:border-box; z-index:1; padding:0; } .slide header { width:fit-content; max-width:60%; display:flex; text-transform:uppercase; flex-direction:column-reverse; position:absolute; bottom:5px; right:0; z-index:2; background-color:var(--dark-level-1); color:var(--light-level-1); padding:0.5rem 1rem; } */ .slide header { width:auto; max-width:60% !important; display:flex; text-transform:uppercase; flex-direction:column-reverse; row-gap:0.25rem !important; position:absolute !important; top:auto !important; left:auto !important; bottom:8px; right:0; transform:none !important; padding:0.75rem 1.5rem; } .slide .category { text-align:right; margin-right:0; padding:0; border:0; } .slide a { text-align:right; font-size:0.75rem; font-weight:bold; text-decoration:none; } video.slideshow { width:100%; height:100%; object-fit:cover; z-index:0; left:50%; top:50%; transform:translate(-50%, -50%); } .nextSlide, .prevSlide { width:4em; height:100%; padding:0.25em; text-align:left; position:absolute; z-index:99999; cursor:pointer; display:inline; background-size:2em 3.75em; background-repeat:no-repeat; } .nextSlide { right:0; background-position:50% 50%; background-image:url(images/slideArrowRight.svg); } .prevSlide { left:0; background-position:50% 50%; background-image:url(images/slideArrowLeft.svg); } /*** Box buttons ***/ .boxButtonContainer ul { display:flex; width:100%; justify-content:flex-start; flex-wrap:wrap; flex-direction:row; margin:0; padding:1px; column-gap:1px; row-gap:1px; text-transform:uppercase; } .boxButtonContainer li { display:flex; flex:1 1 10%; flex-direction:column; justify-content:center; text-align:center; margin:0 !important; list-style-type:none; } .boxButtonContainer li a { font-size:0.875rem; text-decoration:none; padding:3rem; height:100%; align-content:center; } .boxButtonContainer li a:hover { z-index:2; } .boxButtonContainer li a img { display:block; width:1.5rem; height:1.5rem; margin-bottom:0.25rem; padding:0; } /*** Icon styles ***/ .postMetaInfo .iconBefore { font-size:0.875rem; } .postMetaInfo .iconBefore:first-child { margin-left:0; } .postMetaInfo .iconBefore::before { /*width:0.875rem; height:0.875rem;*/ } .banner .postMetaInfo .iconBefore::before, #searchSection .iconSearch::before { filter:var(--filter-light); } .iconClock::before { background-image:url('media/icons/iconClock.svg'); } .iconDate::before { background-image:url('media/icons/iconDate.svg'); } .iconMap::before { background-image:url('media/icons/iconMap.svg'); } .iconGlobe::before { background-image:url('media/icons/iconGlobe.svg'); } .iconCopyUrl::before { background-image:url('media/icons/iconCopyUrl.svg'); } .iconBookmark::before { background-image:url('media/icons/iconBookmark.svg'); } .iconCategory::before { background-image:url('media/icons/iconCategory.svg'); } .iconArchive::before { background-image:url('media/icons/iconArchive2.svg'); } .iconFacebook::before { background-image:url('media/icons/iconFacebook.png'); } .iconLinkedin::before { background-image:url('media/icons/iconLinkedin.png'); } .iconSearch::before { background-image:url('media/icons/iconSearch.svg'); } .iconTags::before { background-image:url('media/icons/iconTag.svg'); } /*** Module types ***/ *[data-module-style*="-style"] { display:flex; flex-wrap:wrap; row-gap:2rem; } *[data-module-style*="-style"] header { text-align:left; } *[data-module-style*="-style"] nav { flex:1 0 100%; text-align:left; } *[data-module-style*="-style"] nav.column { flex-basis:content; } *[data-module-style*="-style"] .listing { row-gap:2rem; column-gap:2rem; padding-bottom:2rem; border-bottom:1px solid; } .relatedContent[data-module-style*="-style"] .listing { padding-bottom:0; border-bottom:0; } *[data-module-style*="-style"] article { border-width:0 0 1px 0; border-style:solid; } *[data-module-style*="-style"] article .content { padding:1.5rem 2rem 2rem 2rem; } *[data-module-style*="-style"] article .heading { font-size:1.25rem; margin:0 0 0.375rem 0; text-align:left; } *[data-module-style*="-style"] article .heading a { font-weight:700; text-decoration:none; } .banner *[data-module-style*="-style"] article .heading a { font-weight:normal; text-decoration:underline; } *[data-module-style*="-style"] article .content .button { width:fit-content; margin:2rem auto auto auto; border-radius:2rem; } *[data-module-style*="-style"] article header { display:flex; flex-direction:column; row-gap:0.5rem; margin-bottom:0.75rem; padding-bottom:1rem; border-bottom:1px solid; } *[data-module-style*="-style"] header .categoryList { margin:0; } /*** Module types: Latest posts ***/ *[data-module-style="Box-style"] .coverImageContainer { height:11.25rem; min-height:11.25rem; max-height:11.25rem; } /*** Module types: Events ***/ *[data-module-style="List-style"] { display:flex; flex-wrap:wrap; column-gap:4rem; row-gap:2rem; } *[data-module-style="List-style"] header { flex:1 0 100%; } .banner *[data-module-style="List-style"] .listing article { box-shadow:none; } *[data-module-style="List-style"] .listing article { align-self:flex-start; } *[data-module-style="List-style"] .listing article:first-of-type { border-width:1px 0; } *[data-module-style="List-style"] .listing article header { border:0; margin-bottom:0; padding-bottom:0; } *[data-module-style="List-style"] article.featured { flex:1 1 25%; margin:0; flex-wrap:nowrap; flex-direction:column; } *[data-module-style="List-style"] article .content { height:auto; min-height:5rem; } *[data-module-style="List-style"] article.featured .content { min-height:10rem; } .banner *[data-module-style="List-style"] article h3 a { font-weight:normal; text-decoration:underline; } *[data-module-style="List-style"] .listing { flex:1 1 25%; flex-direction:column; justify-content:flex-start; row-gap:0; margin:0; padding:0; border:0; } .banner *[data-module-style="List-style"] .listing article .content { padding:1.5rem 0; } /*** Footer ***/ #mainFooter { border-top:1px solid; row-gap:1px; line-height:1.5; } #mainFooter nav ul { display:flex; flex-wrap:wrap; flex-direction:row; column-gap:1rem; } #mainFooter nav ul li { list-style-type:none; display:inline-block; margin:0; } #mainFooter h3 { margin:0 0 0.5rem 0; } #mainFooter a { flex:1 1 auto; } /*#mainFooter .heading { visibility:hidden; width:0; height:0; margin:0; padding:0; }*/ #mainFooter .row { column-gap:1px; row-gap:1px; } #mainFooter .row .column:last-child { border-right:0; } #mainFooter .row .content { display:flex; flex-wrap:wrap; padding:3rem; text-align:left; min-height:auto; } #mainFooter .logo { max-height:5rem; object-fit:fill; } #mainFooter .row:first-of-type .column:nth-child(1) { flex:1 1 40%; } #mainFooter .row:first-of-type .column:nth-child(2) { flex:1 1 10%; } #mainFooter .row:first-of-type .column:nth-child(3) { flex:1 1 10%; } #mainFooter .row:last-of-type { column-gap:0; row-gap:0; } #mainFooter .row:last-of-type .column { flex:1 1 25%; } #mainFooter .row:last-of-type .content { padding:2rem 3rem; } #mainFooter .row:last-of-type .column:last-child .content { justify-content:flex-end; } /* ---------------------------------------------------------------------------------------------------------- 05 Misc ---------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /*** Login page ***/ body.login { background-position:center center; background-repeat:no-repeat; background-size:cover; background-attachment:fixed; text-align:left; font-family:'Lato', sans-serif; } body.login #login, body.login .language-switcher { width:100%; max-width:31.25rem; height:100%; position:absolute; right:0; padding:3rem 2rem; box-shadow:-5px 0 15px rgba(0,0,0,0.15); } body.login .language-switcher { height:auto; padding:1.5rem 2rem; bottom:0; box-shadow:none; border-top:1px solid; } body.login .language-switcher form { margin-top:0; } body.login .language-switcher label { margin-right:0.25rem; } body.login .language-switcher select { width:auto; display:inline-block; } body.login form { padding:0; margin-top:3rem; box-shadow:none; border:0; } body.login .privacy-policy-page-link { text-align:left; margin:2rem 0 0 0; } body.login label { font-weight:bold; font-size:1rem; } body.login #loginform input { font-size:1rem; font-family:'Lato', sans-serif; padding:0.875rem 1.2rem; border:1px solid; border-radius:0; font-weight:400; box-sizing:border-box; line-height:1; } body.login #backtoblog { display:none; } body.login #login h1 a { background-size:contain; padding-bottom:0px; width:100%; height:14rem; } body.login .button-primary { float:none; } body.login #mo_saml_button { height:auto !important; margin-bottom:2rem; } body.login #mo_saml_button::after { content:''; display:block; padding-bottom:1rem; border-bottom:1px solid; } body.login #mo_saml_button div { display:none; } body.login #mo_saml_login_sso_button { border:1px solid; font-size:0.75rem !important; letter-spacing:1px; border-radius:0.25rem; padding:0.75rem 1.25rem; } body.login input[type="submit"] { width:auto; border:1px solid; } body.login #loginform { border-radius:0; } body.login #loginform input[type="submit"] { width:100%; font-size:0.875em; padding:1rem 2rem; text-transform:uppercase; letter-spacing:1px; border:none; border-radius:2rem; line-height:1.5; transition:all 250ms ease-in-out; margin-top:1rem; } #miniorange-saml-sp-sso-login-form a.anchor::after { display:none; } /*** System information ***/ #systemInfo { font-size:0.75rem; padding:0.25rem; }