/* Theme Name: Hållbarhetsteamet 2022 Author: Webbfröken AB Author URI: https://webbfroken.se Requires at least: 6.0 Version: 1.0 License: For Hållbarhetsteamet i Sverige AB use only */ /* ------------------------------------------- Wordpress original theme css ------------------------------------------- */ /* * Font smoothing. * This is a niche setting that will not be available via Global Styles. * https://github.com/WordPress/gutenberg/issues/35934 */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Text and navigation link styles. * Necessary until the following issue is resolved in Gutenberg: * https://github.com/WordPress/gutenberg/issues/27075 */ a { text-decoration-thickness: 1px; text-underline-offset: 0.25ch; } a:hover, a:focus { -webkit-text-decoration-style: dashed; text-decoration-style: dashed; } a:active { text-decoration: none; } .wp-block-navigation .wp-block-navigation-item a:hover, .wp-block-navigation .wp-block-navigation-item a:focus { text-decoration: underline; -webkit-text-decoration-style: solid; text-decoration-style: solid; } /* * Search and File Block button styles. * Necessary until the following issues are resolved in Gutenberg: * https://github.com/WordPress/gutenberg/issues/36444 * https://github.com/WordPress/gutenberg/issues/27760 */ .wp-block-search__button, .wp-block-file .wp-block-file__button { background-color: var(--wp--preset--color--smaragd); border: none; border-radius: 0; color: var(--wp--preset--color--sno); font-size: var(--wp--preset--font-size--medium); padding: calc(0.667em + 2px) calc(1.333em + 2px); } /* * Button hover styles. * Necessary until the following issue is resolved in Gutenberg: * https://github.com/WordPress/gutenberg/issues/27075 */ .wp-block-search__button:hover, .wp-block-file .wp-block-file__button:hover, .wp-block-button__link:hover { opacity: 0.90; } /* * Alignment styles. * These rules are temporary, and should not be relied on or * modified too heavily by themes or plugins that build on * Twenty Twenty-Two. These are meant to be a precursor to * a global solution provided by the Block Editor. * * Relevant issues: * https://github.com/WordPress/gutenberg/issues/35607 * https://github.com/WordPress/gutenberg/issues/35884 */ .wp-site-blocks, body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-block-cover.alignfull, .is-root-container .wp-block[data-align='full'] > .wp-block-group, .is-root-container .wp-block[data-align='full'] > .wp-block-cover { padding-left: var(--wp--custom--spacing--outer); padding-right: var(--wp--custom--spacing--outer); } .wp-site-blocks .alignfull, .wp-site-blocks > .wp-block-group.has-background, .wp-site-blocks > .wp-block-cover, .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background, .wp-site-blocks > .wp-block-template-part > .wp-block-cover, body > .is-root-container > .wp-block-cover, body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background, body > .is-root-container > .wp-block-template-part > .wp-block-cover, .is-root-container .wp-block[data-align='full'] { margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important; margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important; width: unset; } /* Blocks inside columns don't have negative margins. */ .wp-site-blocks .wp-block-columns .wp-block-column .alignfull, .is-root-container .wp-block-columns .wp-block-column .wp-block[data-align='full'], /* We also want to avoid stacking negative margins. */ .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull, .is-root-container .wp-block[data-align='full'] > *:not(.wp-block-group) .wp-block[data-align='full'] { margin-left: auto !important; margin-right: auto !important; width: inherit; } /* * Responsive menu container padding. * This ensures the responsive container inherits the same * spacing defined above. This behavior may be built into * the Block Editor in the future. */ .wp-block-navigation__responsive-container.is-menu-open { padding-bottom: var(--wp--custom--spacing--large); padding-left: var(--wp--custom--spacing--outer); padding-right: var(--wp--custom--spacing--outer); padding-top: var(--wp--custom--spacing--outer); } /* ------------------------------------------- Text ------------------------------------------- */ p { -webkit-margin-before: 0.9375rem !important; margin-block-start: 0.9375rem !important; } /* Fix för att sätta maxbredd på ingress men slippa kolumner */ main .entry-content > p.has-large-font-size { max-width: 1440px; } /* Fix för foto direkt under h1 i en Standardmall */ .page-template-default .entry-content > .wp-block-group > figure { margin-top: 1.25rem; } /* Justering av text för Startsida, Startsida nätverk och Bred sida */ .start h1, .page-template-service h1 { font-size: clamp(2.5rem, 8vw, 5rem); } .page-template-service h2 { font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.2; } .page-template-service h3 { font-size: 1.875rem; } .page-template-service h4 { font-size: 1.625rem; } /* ------------------------------------------- Knappar (som inte går att ställa in i theme.json) ------------------------------------------- */ .wp-block-search__button, .wp-block-file .wp-block-file__button, .wp-block-button__link { transition: transform .3s ease-in-out, background-color .3s ease-in-out; } .wp-block-button .wp-block-button__link:hover { background-color: #0a685f; opacity: 1; transform: scale(1.02); } .wp-block-button .wp-block-button__link.has-apelsin-background-color:hover { background-color: #D74A21 !important; } .is-style-outline.is-style-outline.wp-block-button .wp-block-button__link:hover { background-color: var(--wp--preset--color--smaragd-3); opacity: 1; } /* ------------------------------------------- Layout ------------------------------------------- */ html { scroll-behavior: smooth; } /* Fix av blockgap som ligger efter h1 */ .entry-content { margin-top: 0 !important; } /* Fix av sidmarginaler på breda mallar då alignfull inte funkar i två led */ @media screen and (max-width: 1600px) { .page-template-page-wide .wp-site-blocks main > .alignfull > .alignfull > div:not(.has-background), .page-template-service .wp-site-blocks main > .alignfull > .alignfull > div:not(.has-background) { margin-left: calc(1 * var(--wp--custom--spacing--outer)) !important; margin-right: calc(1 * var(--wp--custom--spacing--outer)) !important; } } /* Fix för att ge sektionen samma sidavstånd marginalen ovan */ @media screen and (max-width: 1600px) { .page-template-page-wide .wp-site-blocks main > .alignfull > .alignfull > .services, .page-template-page-wide .wp-site-blocks main > .alignfull > .alignfull > .section-sand, .page-template-service .wp-site-blocks main > .alignfull > .alignfull > .section-sand, .page-template-start .wp-site-blocks main > .alignfull > .section-sand { padding-left: calc(1 * var(--wp--custom--spacing--outer)) !important; padding-right: calc(1 * var(--wp--custom--spacing--outer)) !important; } } /* Korrigering av padding för alla helbreda sektioner med bakgrund */ @media all and (max-width: 768px) { .alignfull.has-background, .wf-start-kundcase-leveranser, .page-template-start div:has( > .quote-with-img), .single-verktyg .alignfull > .wp-block-group { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; } .page-template-start .wf-client-logos{ padding-top: 0 !important; padding-bottom: 0 !important; } } /* ------------------------------------------- Sidhuvud ------------------------------------------- */ header { padding: 2.5rem 0 5.625rem; } header .is-content-justification-right, header .wp-block-navigation ul { gap: 1.25rem 3.75rem; } header .wp-block-navigation .wp-block-navigation-item a { border-bottom: 4px solid transparent; transition: all 0.3s ease; } header .wp-block-navigation ul .wp-block-navigation-item.current-menu-item a { border-color: var(--wp--preset--color--apelsin); } header .wp-block-navigation .wp-block-navigation-item a:hover, header .wp-block-navigation .wp-block-navigation-item a:focus { text-decoration: none; } header .wp-block-navigation .wp-block-navigation-item a:hover { border-color: var(--wp--preset--color--apelsin); } /* Döljer språkväljare (lista) som vi endast önskar i mobilmenyn */ header nav .wpml-language-switcher-navigation-block { display: none; } /* Språkväljare (dropdown) */ header .is-content-justification-right > .wpml-language-switcher-block { width: unset !important; border: 1px solid var(--wp--preset--color--sand); border-radius: 20px; } header .is-content-justification-right > .wpml-language-switcher-block .current-language-item { min-height: auto; padding: .875em 1em; } /* Språkväljare - Label för språk */ header .is-content-justification-right > .wpml-language-switcher-block span.wp-block-navigation-item__label { line-height: 1; } /* Språkväljare - Lås flaggstorlek (WPML ändrar inline-stilar vid klick) */ header .is-content-justification-right > .wpml-language-switcher-block .wpml-ls-flag { width: 22px !important; height: 14px !important; margin-right: 4px !important; } /* Språkväljare - Pil */ header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation__submenu-icon { height: auto; } header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation__submenu-icon svg { margin-top: 0; } /* Språkväljare - Utfällande */ header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--sno) !important; border: transparent !important; border-radius: 5px; padding: .5em 1em !important; } header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation__container a { border: none; } header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation__container a:hover span { text-decoration: underline; } /* Språkväljare - Ta bort webbläsarens fokusring på toggle */ header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation-submenu__toggle:focus, header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation-submenu__toggle.wpml-ls-keyboard-focus { outline: none; } /* Språkväljare - Säkerställ vertikal layout och avstånd i dropdown (override isHorizontal) */ header .is-content-justification-right > .wpml-language-switcher-block .wp-block-navigation__submenu-container { flex-direction: column !important; row-gap: .5em !important; } /* Specifikt för Tjänst-mallen */ .page-template-service header { padding-bottom: 8.125rem; } /* För mindre skärmar */ @media all and (max-width: 1400px) { header .is-content-justification-right, header .wp-block-navigation ul { gap: 1.25rem 2.5rem; } } @media all and (max-width: 1280px) { header .is-content-justification-right { flex-direction: column-reverse; align-items: flex-end; } } /* Mobilanpassning */ @media all and (max-width: 1024px) { /* Visa mobilmenyn */ .wp-block-navigation__responsive-container-open { display: flex !important; } /* Visa språkväljare (lista) i mobilmenyn */ header nav .wpml-language-switcher-navigation-block { display: block; margin-top: 1.875rem; } header nav .wpml-language-switcher-navigation-block li[data-wpml="current-language-item"] { display: none !important; } /* Dölj huvudmenyn */ .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) { display: none !important; } /* Döjer språklistan med dropdown */ header .is-content-justification-right > .wpml-language-switcher-block { display: none; } header .wp-block-navigation__responsive-container-open { align-items: center; background-color: var(--wp--preset--color--smaragd); border-radius: 20px; color: var(--wp--preset--color--sno); display: flex; font-weight: 600; padding: 14px 18px; } header .wp-block-navigation__responsive-container-open:after { color: var(--wp--preset--color--sno); content: 'Meny'; display: block; font-size: 0.875rem; margin-left: 0.3125rem; } header .wp-block-navigation__responsive-container-close { margin-right: -0.625rem; padding: 0.625rem; } } @media all and (min-width: 769px) and (max-width: 1024px) { header, .page-template-service header { padding: var(--wp--custom--spacing--outer) 0 2.5rem; } } @media all and (max-width: 768px) { header, .page-template-service header { padding: var(--wp--custom--spacing--outer) 0 0; } header .wp-block-site-logo img { height: auto; max-width: 136px; } } /* ------------------------------------------- Sidfoten ------------------------------------------- */ footer { -webkit-margin-before: 0 !important; margin-block-start: 0 !important; } footer > .wp-block-group { background-color: var(--wp--preset--color--sten); color: var(--wp--preset--color--sno); margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important; margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important; padding: 7.5rem 1.25rem; } footer .wp-block-columns { gap: 2.5rem; } footer .wp-block-columns .wp-block-column { padding-top: 1.875rem; } footer .wp-block-columns .wp-block-column:first-child { min-width: 38%; padding-right: 1.25rem; padding-top: 0; } footer .wp-block-columns .wp-block-column:first-child p:first-of-type { margin-bottom: 1.875rem; } footer h2, .start footer h2, .page-template-service footer h2 { color: var(--wp--preset--color--sno); font-size: 1.5rem; margin-top: 1.875rem; } .footer-logo { margin-bottom: 1.875rem !important; } /* Länkar */ footer .wp-block-navigation { margin-top: 0.625rem !important; } footer .wp-block-navigation ul { gap: 0.625rem; } footer .wp-block-social-links .wp-social-link a, footer .wp-block-navigation a { text-decoration: underline; } footer .wp-block-social-links .wp-social-link a:hover, footer .wp-block-navigation .wp-block-navigation-item a:hover { text-decoration: none; } /* Sociala länkar */ footer .wp-block-social-links { margin-top: 3.125rem; gap: 0.9375rem; } footer .wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg { height: 1.25em; width: 1.25em; fill: var(--wp--preset--color--apelsin) !important; } footer .wp-block-social-link:hover { transform: scale(1); } footer section.subscribe_to_newsletter_promo{ position: relative; margin-bottom: calc(-3.5rem - 100px); } footer section.subscribe_to_newsletter_promo > div { width: clamp(300px, 50%, 900px); top: -100px; position: relative; z-index: 1; } /* Mobilanpassning */ @media all and (min-width: 1367px) and (max-width: 1536px) { footer .wp-block-columns .wp-block-column:first-child { min-width: 33%; } } @media all and (max-width: 1366px) { footer .wp-block-columns .wp-block-column:first-child { min-width: inherit; padding-right: 0; } } @media all and (max-width: 769px) { footer section.subscribe_to_newsletter_promo{ margin-bottom: calc(-3.5rem - 30px); } footer section.subscribe_to_newsletter_promo > div { width: auto; top: -30px; flex-direction: column; } } @media all and (min-width: 769px) and (max-width: 1024px) { footer .wp-block-columns { display: block; } } /* ------------------------------------------- Brödsmulor ------------------------------------------- */ .page-parent .fbc-page, .page-id-1691 .fbc-page, /* Aktuellt som saknar undersidor */ .page-id-2811 .fbc-page, /* Kundcase som saknar undersidor */ .page-id-3600 .fbc-page, /* Kundcase eng som saknar undersidor */ .page-id-5495 .fbc-page, /* Kundcase tyska som saknar undersidor */ .page-id-4171 .fbc-page, .post-type-archive-verktyg .fbc-page, .post-type-archive-evenemang .fbc-page { display: none; } .fbc-page .fbc-wrap ol.fbc-items { background-color: transparent; padding: 0; /* fix för fbc mobilcss*/ } .fbc-page .fbc-wrap .fbc-items li { margin: 0; padding: 0; } .fbc-page .fbc-wrap .fbc-items li:first-child, .fbc-page .fbc-wrap .fbc-items li:nth-child(2) { display: none; } .fbc-page .fbc-wrap .fbc-items li span { font-size: var(--wp--preset--font-size--small); margin-right: 0.3125rem; } .fbc-page .fbc-wrap ol.fbc-items li a { color: var(--wp--preset--color--smaragd); } @media all and (max-width: 768px) { .fbc-page { padding-top: 1.875rem; } } /* ------------------------------------------- Mall: Startsida (start) ------------------------------------------- */ .page-template-start header { padding-bottom: 0.625rem; } .page-template-start div:has(> .wf-client-logos){ background-color: var(--wp--preset--color--bomull) !important; } .start-hero { align-items: center; background-image: url('../../uploads/2022/07/bg-hero.png'); background-position: right -8% bottom 0; background-repeat: no-repeat; display: flex; margin-bottom: -104px !important; min-height: 800px; position: relative; z-index: 1; } .start-hero > .wp-block-group { padding-bottom: 5.625rem; width: 1440px; } .start-hero > .wp-block-group > .wp-block-group { max-width: 980px; } .start-hero .has-large-font-size { font-size: clamp(1.5rem, 3vw, 1.875rem) !important; } /* Kundcase/Leveranser på startsidan */ .wf-start-kundcase-leveranser .wf-kundcase-loop ul { grid-template-columns:1fr; } .wf-start-kundcase-leveranser h2.wp-block-heading { font-size: var(--wp--custom--typography--font-size--colossal); } .wf-start-kundcase-leveranser .wp-block-columns.is-layout-flex { gap: calc(1.875rem * 3); } .wf-start-kundcase-leveranser > div { display: grid; grid-template-columns: 1fr 2fr; gap: 3.875rem; } .wf-start-kundcase-leveranser > div > div:has(figure) { order:-1; } .wf-start-kundcase-leveranser > div > div { align-content: center; } /* Mobilanpassning */ @media all and (min-width: 1921px) { .start-hero { background-position: right 6% bottom 0; } } @media all and (min-width: 1367px) and (max-width: 1680px) { .start-hero { background-position: right -20% bottom 0; } } @media all and (min-width: 1025px) and (max-width: 1366px) { .start-hero { background-image: url('../../uploads/2022/07/bg-hero-ipad.png'); background-position: right -90% bottom 0; min-height: 600px; } } @media all and (min-width: 769px) and (max-width: 1024px) { .start-hero { padding-top: 0 !important; } } @media all and (max-width: 1024px) { .start-hero { background-image: url('../../uploads/2022/07/bg-hero-mobile.png'); background-position: right 0 bottom 0; } } @media all and (max-width: 768px) { .start-hero { background-size: 70% auto; margin-bottom: -40px !important; min-height: auto; padding-bottom: 1.875rem !important; padding-top: 2.5rem !important; } /* Kundcase/Leveranser på startsidan */ .page-template-start .wf-kundcase-loop ul { grid-template-columns: 1fr; } .wf-start-kundcase-leveranser > div { grid-template-columns: 1fr; } .wf-start-kundcase-leveranser > div >div:has(figure) { order:initial; } } /* ------------------------------------------- Mall: Enskild (single) ------------------------------------------- */ .single .wp-block-post-date time { font-size: var(--wp--preset--font-size--small); } /* ------------------------------------------- Block: Lista ------------------------------------------- */ main .entry-content ul { margin: 1.25rem 0 2.5rem !important; } main .entry-content ul li { margin-bottom: 0.3125rem; } main .entry-content ul li::marker { color: var(--wp--preset--color--apelsin); } @media all and (max-width: 768px) { main .entry-content ul { margin: .9375rem 0 1.875rem !important; } } /* ------------------------------------------- Block: Tabell ------------------------------------------- */ .wp-block-table { margin: 0.9375rem 0 2.5rem; border: 1px solid var(--wp--preset--color--apelsin-3); outline: 4px solid var(--wp--preset--color--sno); background-color: var(--wp--preset--color--sno); border-radius: 20px; } .wp-block-table thead { color: var(--wp--preset--color--apelsin); border-bottom: 3px solid var(--wp--preset--color--apelsin); text-align: left; } .wp-block-table td, .wp-block-table th { border: none; border: 1px solid var(--wp--preset--color--apelsin-3); padding: .5em 1.5em; } /* Specifikt för en viss bakgrund */ .has-sand-background-color .wp-block-table { outline: 4px solid var(--wp--preset--color--bomull); background-color: var(--wp--preset--color--bomull); } /* Mobilanpassning */ @media all and (max-width: 780px) { .wp-block-table td, .wp-block-table th { padding: .5em 1em; } } /* ------------------------------------------- Block: Distanselement ------------------------------------------- */ /* Mobilanpassning */ @media all and (min-width: 769px) and (max-width: 1024px) { .wp-block-spacer { height: 1px !important; } } @media all and (max-width: 768px) { .wp-block-spacer { height: 1px !important; } } /* ------------------------------------------- Block: Avgränsare ------------------------------------------- */ .wp-block-separator { border-width: 1px; } /* ------------------------------------------- Block: Media bild ------------------------------------------- */ @media all and (max-width: 768px) { .wp-block-media-text .wp-block-media-text__content { padding: 0; } } /* ------------------------------------------- Block: Blockcitat ------------------------------------------- */ .wp-block-quote { border: none; font-weight: 600; padding-left: 2.5rem; } .wp-block-quote p { font-size: 1.875rem; line-height: 1.6; } .wp-block-quote p:first-child:before { background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' viewBox=\'0 0 58 40\'%3E%3Cg fill=\'%23F0633A\'%3E%3Cpath d=\'M14.7 0h-.8C8.8.2 4.8 4.4 5 9.3v1.1c0 5 4 8.4 8.1 9.5.3 6.1-3.1 10.4-9.7 12.4-2 .5-3.4 1.8-3.5 3.8C0 38.3 1.6 40 4.6 40c4 0 9.5-2.2 13.4-6 4.4-4.3 7-10.9 7-20.3v-1.4C24.9 4.7 21 0 14.7 0zM47.8 0h-.9c-5.1.2-9 4.4-8.8 9.3v1.1c0 5 4 8.4 8.1 9.5.3 6.1-3.1 10.4-9.7 12.4-2 .5-3.4 1.8-3.5 3.8 0 2.2 1.4 3.9 4.4 3.9 4.1 0 9.7-2.2 13.4-6 4.6-4.3 7.2-10.9 7.2-20.3v-1.4C58 4.7 54 0 47.8 0z\'/%3E%3C/g%3E%3C/svg%3E%0A'); background-repeat: no-repeat; content: ''; display: block; height: 1.875rem; margin-bottom: 1.875rem; } .wp-block-quote cite { font-size: 1rem; } .wp-block-quote cite strong { font-size: 1.5rem; } .wp-block-quote cite strong:first-of-type { font-size: 1.25rem; } /* Mobilanpassning */ @media all and (max-width: 1366px) { .wp-block-quote p { font-size: 1.625rem; } } /* Mobilanpassning */ @media all and (max-width: 1366px) { .wp-block-quote p { font-size: 1.625rem; } } @media all and (max-width: 600px) { .wp-block-quote { padding-left:0; } .wp-block-quote p { font-size: 1rem; } } /* ------------------------------------------- Block: Senaste inläggen ------------------------------------------- */ .wp-block-latest-posts__list { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.875rem; margin: 0; } .wp-block-latest-posts__list li { margin-bottom: 0; } .wp-block-latest-posts__featured-image { margin-bottom: 1.875rem; max-height: 306px; transition: all .2s cubic-bezier(0.25,0.45,0.45,0.95); } .wp-block-latest-posts__featured-image:hover { transform: scale(1.05); } .wp-block-latest-posts__post-title { font-size: var(--wp--custom--typography--font-size--huge); line-height: var(--wp--custom--typography--line-height--small); font-weight: 600; color: var(--wp--preset--color--sten); } .wp-block-latest-posts__post-title:hover { text-decoration: none; } .wp-block-latest-posts__post-date { margin: .5rem 0 1rem; } /* Aktuellt */ ul.wf-aktuellt li { background-color: #fff; overflow:hidden; border-radius:20px 0; padding:20px 30px 40px; display:flex; flex-direction:column; transition:transform 0.3s ease; } ul.wf-aktuellt li:hover { transform:scale(1.05); } ul.wf-aktuellt li a:not(:has(img)) { color: var(--wp--preset--color--smaragd); text-decoration: none; position:relative; --wf-aktuellt-icon-size:26px; padding-right: var(--wf-aktuellt-icon-size); } ul.wf-aktuellt li .wp-block-latest-posts__featured-image { margin:-20px -30px 20px; order:-2; } ul.wf-aktuellt li .wp-block-latest-posts__featured-image img { aspect-ratio:16/9; object-fit: cover; } ul.wf-aktuellt li time{ margin:0 0 10px; order:-1; font-size:16px; font-weight:600; } ul.wf-aktuellt li a:not(:has(img)):after { content:""; width:var(--wf-aktuellt-icon-size); height:var(--wf-aktuellt-icon-size); display:inline-block; background-image: url('../../uploads/2022/07/arrow.png'); background-repeat:no-repeat; background-position:10px 10px; background-size:35%; } /* Mobilanpassning */ @media all and (max-width: 1024px) { .wp-block-latest-posts__list { grid-template-columns: repeat(2,1fr); } } @media all and (max-width: 780px) { .wp-block-latest-posts__post-title { font-size: var(--wp--preset--font-size--medium); } .wp-block-latest-posts__featured-image { margin-bottom: .9375rem; max-height: initial; } } @media all and (max-width: 600px) { .wp-block-latest-posts__list { grid-template-columns: repeat(1,1fr); } .wp-block-latest-posts__post-title { font-size: var(--wp--preset--font-size--large); } } /* ------------------------------------------- WP Event Manager - Evenemangslistning ------------------------------------------- */ /* Dölj rubrik för att kunna översätta */ .event_listings > .wpem-event-listings-header { display: none; } /* Fixar */ .event_listings_main .wpem-event-box-col > p, .event_listings_main .event_listing > p, .event_listings_main .wpem-event-banner > p { display: none; } .event_listings_main p { margin-block-start: 0 !important; margin: 0; } .event_listings_main .wpem-event-box-col .wpem-from-date > p { margin: 0; margin-block-start: 0 !important; } .event_listings_main .wpem-event-box-col .wpem-from-date > p > br { display: none; } /* Evenemangslistning */ .wpem-event-listings.wpem-event-listing-box-view { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 1.875rem; margin: 0; } .wpem-event-listings.wpem-event-listing-box-view > .wpem-event-box-col { max-width: unset; padding: 0 !important; background-color: var(--wp--preset--color--sno); border-radius: 0 0 20px; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper { border: none; border-radius: 0; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-banner-img { transition:all 0.3s ease; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper:hover .wpem-event-banner .wpem-event-banner-img { opacity: 0.75; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-date .wpem-event-date-type .wpem-from-date { padding: 1rem 1.8rem; bottom: 0; left: 0; box-shadow: none; border-radius:0; top:unset; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details p { line-height: 1.5; font-size: var(--wp--preset--font-size--medium); margin: 0; margin-block-start: 0 !important; } .wpem-event-listings.wpem-event-listing-box-view a h3.wpem-heading-text { text-decoration: underline; margin: .5em 0; } .wpem-event-listings-header .wpem-event-listing-header-title .wpem-heading-text { font-weight: 600; font-size: 30px; } /* Hover */ .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper:hover, .wpem-main-vmenu-dashboard-wrapper .wpem-main-vmenu-dashboard-content-wrap .wpem-dashboard-events-block-wrap .wpem-dashboard-event-list-wrapper .wpem-dashboard-event-list:hover { box-shadow: none; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper:hover .wpem-event-details p, .wpem-main-vmenu-dashboard-wrapper .wpem-main-vmenu-dashboard-content-wrap .wpem-dashboard-events-block-wrap .wpem-dashboard-event-list-wrapper .wpem-dashboard-event-list:hover { text-decoration: underline; } .wpem-event-listings .wpem-event-layout-wrapper .event_cancelled, .wpem-event-listings .wpem-event-layout-wrapper .event_cancelled:hover{ background: unset; } /* Om Featured event */ .event_summary_shortcode .wpem-single-event-widget .event_featured, .widget_featured_events .wpem-single-event-widget, .wpem-event-listings .wpem-event-layout-wrapper .event_featured, .wpem-event-listings .wpem-event-layout-wrapper .event_featured:hover { background: none; } /* Ruta på bild */ .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-date .wpem-event-date-type .wpem-from-date { background-color: var(--wp--preset--color--smaragd-3); color: var(--wp--preset--color--smaragd); } /* Detaljer */ .single-event_listing .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-infomation .wpem-event-details { padding: 0; } /* Om inga evenemang finns */ .no_event_listings_found.wpem-alert { background-color: var(--wp--preset--color--smaragd-3); border-color: var(--wp--preset--color--smaragd); color: var(--wp--preset--color--smaragd-3); font-size: 0; } .no_event_listings_found.wpem-alert:before { content: 'Just nu finns det inga pågående evenemang'; color: var(--wp--preset--color--smaragd); font-size: var(--wp--preset--font-size--large); } /* Färganpassningar för CSR Småland*/ .no_event_listings_found.wpem-alert { background-color: var(--wp--preset--color--druva-3); border-color: var(--wp--preset--color--druva); color: var(--wp--preset--color--druva-3); } .no_event_listings_found.wpem-alert:before { content: 'Just nu finns det inga pågående evenemang'; color: var(--wp--preset--color--druva); } .csr-network .event_listings_main .wpem-event-box-col > .wpem-event-layout-wrapper .wpem-event-details { background-color: transparent; padding: 0 !important; border-radius: 0; } /* Specifikt för startsidan */ .page-template-start .wpem-event-listings.wpem-event-listing-box-view > .wpem-event-box-col .wpem-event-details, .wpem-event-listing-box-view .wpem-event-details{ padding: 2rem 2rem 4rem !important; } .page-template-start .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper:hover .wpem-event-banner .wpem-event-banner-img { opacity: 1; } /* Animering på startsidan */ .page-template-start .wpem-event-listings.wpem-event-listing-box-view > .wpem-event-box-col { transition: transform 0.3s ease; } .page-template-start .wpem-event-listings.wpem-event-listing-box-view > .wpem-event-box-col:hover { transform: scale(1.05); } /* Logotyp för CSR Småland på startsidan */ .page-template-start .wpem-event-listings .wpem-event-layout-wrapper .event_listing_category-csr-smaland { position: relative; } .page-template-start .wpem-event-listings .wpem-event-layout-wrapper .event_listing_category-csr-smaland::before { background-image: url('../../uploads/2024/02/Rityta-16.png'); background-size: 100% 100%; content: ''; width: clamp(80px, 8vw, 110px); height: clamp(44px, 4.5vw, 60px); background-repeat: no-repeat; position: absolute; bottom: 1rem; right: 1rem; } /* Mobilanpassning */ @media only screen and (max-width: 1024px){ .wpem-event-listings.wpem-event-listing-box-view { grid-template-columns: 1fr 1fr; } } @media only screen and (max-width: 768px){ .wpem-event-listings.wpem-event-listing-box-view { grid-template-columns: 1fr; } .wpem-event-listings.wpem-event-listing-box-view .wpem-event-layout-wrapper .wpem-event-banner .wpem-event-banner-img { height: 150px; } } @media only screen and (max-width: 575px){ .wpem-event-listings-header .wpem-event-listing-header-title .wpem-heading-text { text-align: left !important; } } /* ------------------------------------------- WP Event Manager - Evenemangssida ------------------------------------------- */ /* Plocka bort Evenemangsmallens originaltitel */ .single-event_listing .wp-block-post-title { display: none; } /* Rensa */ .wpem-single-event-page .event-manager-info, .wpem-single-event-page .wpem-single-event-wrapper { border: none; } .wpem-single-event-page .wpem-single-event-wrapper .wpem-single-event-header-top, table.wpem-responsive-table-wrapper tbody tr:hover, table.wpem-responsive-table-wrapper thead { background: none; } /* Text */ .single_event_listing p { font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--typography--line-height--medium); color: var(--wp--preset--color--sten); margin: 0.9375rem 0 0; } /* Länkar */ .single_event_listing .wpem-main p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25ch; } .single_event_listing .wpem-main p a:hover { text-decoration: underline; text-decoration-style: dashed; } /* Listor */ .single_event_listing ul { margin-bottom: 1.875rem 0 2.5rem; } .single_event_listing ul li { margin-bottom: 0.3125rem; font-size: var(--wp--preset--font-size--medium); } /* Alert */ .single-event_listing .wpem-alert { max-width: var(--wp--style--global--content-size); margin: 0 auto 3.6rem; } .wpem-alert { position: relative; padding: 1.8rem; margin-bottom: 3.6rem; border-radius: 0; background: #ecd3db; border-left: 9px solid #9e224b; font-size: 26px; } /* Heron */ .wpem-single-event-header-top { display: flex; gap: 6rem; max-width: var(--wp--style--global--content-size); margin: 0 auto; } .wf-event-short-info { width: calc(60% - 6rem); } .wf-event-image-wrapper { width: 40%; } .wf-event-image-wrapper img { max-width: 100%; } .wpem-single-event-images { position: relative; } .wf-event-metadata { padding: 2.75rem; margin-top: 1.875rem; max-width: 480px; box-sizing: border-box; font-size: var(--wp--preset--font-size--large) !important; background-color: var(--wp--preset--color--smaragd-3); color: var(--wp--preset--color--sten); } .wf-event-metadata span { display: block; } .wf-event-metadata .wpem-alert { margin-top: 1.8rem; padding: 1rem 1.8rem; margin-bottom: 0; background: #fbf6f8; border-left-width: 3px; font-size: 18px; font-style:italic; } /* Knapp */ .wpem-theme-button, a.wpem-theme-button, button.wpem-theme-button, input.wpem-theme-button { border: none; border-radius: 20px; font-family: var(--wp--preset--font-family--poppins); font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: var(--wp--custom--typography--line-height--small); padding: 1.09375rem 2.5rem; height: auto; transition: all 0.3s ease; margin: 1.875rem 0 0; text-transform: none; background-color: var(--wp--preset--color--smaragd); color: var(--wp--preset--color--sno); } .wpem-theme-button:hover, a.wpem-theme-button:hover, button.wpem-theme-button:hover, input.wpem-theme-button:hover { background-color: var(--wp--preset--color--smaragd); opacity: 0.9; } .wpem-theme-button:focus, a.wpem-theme-button:focus, button.wpem-theme-button:focus, input.wpem-theme-button:focus { outline: 4px solid var(--wp--preset--color--sno); } /* Content */ .wpem-single-event-body { background-color: var(--wp--preset--color--sno); padding: 7.5rem 1.25rem; } .wf-event-body { max-width: 705px; margin: 0 auto; } /* Hitta hit */ .wf-event-location { padding: 2.75rem 2.75rem 4.125rem; margin-top: 3.75rem; background-color: var(--wp--preset--color--smaragd); color: var(--wp--preset--color--sno); } .wf-event-location h2, .wf-event-location p, .single_event_listing .wpem-main .wf-event-location a { margin: 0 0 .9375rem; color: var(--wp--preset--color--sno); } .single_event_listing .wpem-main .wf-event-location a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25ch; } .single_event_listing .wpem-main .wf-event-location a:hover { text-decoration: underline; text-decoration-style: dashed; } .single_event_listing .wpem-main .wf-event-location a:hover, .single_event_listing .wpem-main .wf-event-location a:focus { color: var(--wp--preset--color--sno); } .single_event_listing .wpem-main .wf-event-location a:focus { outline: 2px solid var(--wp--preset--color--sno); } /* Banner om nätverket */ .single-event_listing .wp-block-button .wp-block-button__link { background-color: var(--wp--preset--color--smaragd); color: var(--wp--preset--color--sno); } /* Färganpassningar för CSR Småland */ .csr-network .single-event_listing h1, .csr-network .single-event_listing h2, .csr-network .single-event_listing h3 { color: var(--wp--preset--color--druva); } .csr-network .single-event_listing footer h2 { color: var(--wp--preset--color--sno); } .csr-network .single_event_listing .wpem-main p a { color: var(--wp--preset--color--druva); } .csr-network .single_event_listing .wpem-main p a:hover { color: var(--wp--preset--color--druva); } .csr-network .single_event_listing ul li::marker { color: var(--wp--preset--color--druva); } .csr-network .wpem-single-event-images:before { background-image: url('../../uploads/2024/02/Rityta-16.png'); background-size: 100% 100%; content: ''; width: clamp(110px, 12vw, 180px); height: clamp(60px, 6.5vw, 98px); background-repeat: no-repeat; position: absolute; bottom: -49px; right: -30px; z-index: 1; } .csr-network .wf-event-metadata { background-color: var(--wp--preset--color--druva-3); color: var(--wp--preset--color--druva); } .csr-network .wpem-theme-button, .csr-network a.wpem-theme-button, .csr-network button.wpem-theme-button, .csr-network input.wpem-theme-button { background-color: var(--wp--preset--color--druva); } .csr-network .wpem-theme-button:hover, .csr-network a.wpem-theme-button:hover, .csr-network button.wpem-theme-button:hover, .csr-network input.wpem-theme-button:hover { background-color: var(--wp--preset--color--druva); } .csr-network .wpem-theme-button.wpem-active-button, .csr-network .wpem-theme-button.wpem-active-button:hover { background: var(--wp--preset--color--druva); } .csr-network .wf-event-location { background-color: var(--wp--preset--color--druva); } .csr-network .wf-event-location h2, .csr-network .wf-event-location p, .csr-network .single_event_listing .wpem-main .wf-event-location a { color: var(--wp--preset--color--sno); } .csr-network .single-event_listing .wp-block-button .wp-block-button__link { background-color: var(--wp--preset--color--druva); } @media all and (max-width: 1024px) { .wf-event-short-info { width: calc(80% - 3rem); } .wpem-single-event-header-top { gap: 3rem; } } /* Mobilanpassning */ @media all and (max-width: 780px) { .wpem-single-event-header-top { flex-flow: column; } .wf-event-short-info { width: 100%; } .wf-event-image-wrapper { width: 100%; order: -1; } .wf-event-metadata { max-width: unset; padding: 1.25rem; } .wpem-theme-button, a.wpem-theme-button, button.wpem-theme-button, input.wpem-theme-button { margin-top: 1.25rem; } .wpem-single-event-body { padding-top: 3.75rem; padding-bottom: 3.75rem; } .wf-event-location { padding: 1.25rem; } /* CSR */ .csr-network .wpem-single-event-images:before { right: 0; } } /* ------------------------------------------- Mönster - Blockcitat med foto ------------------------------------------- */ .quote-with-img > .wp-block-column:last-child { display: flex; margin-right: 18.75rem; } .quote-with-img-2 > .wp-block-column:last-child { /* Specifikt för högerställd bild*/ margin-right: 0; } .quote-with-img-2 > .wp-block-column:first-child { /* Specifikt för högerställd bild*/ display: flex; margin-left: 18.75rem; } .quote-with-img figure { padding-right: 1.875rem; } .quote-with-img-2 figure { padding-right: 0; padding-left: 1.875rem; } .quote-with-img .wp-block-quote { display: flex; flex-direction: column; padding-left: 0; justify-content: center; } .quote-with-img p { font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--typography--line-height--medium); font-weight: 500; } .quote-with-img p:before { height: 4rem; } .quote-with-img > .wp-block-column:last-child p:before { background-position: top right; /* Specifikt för citat med bild till vänster*/ } .quote-with-img .wp-block-quote cite { font-size: 1.125rem; color: var(--wp--preset--color--apelsin); } /* Specifikt för startsidan */ .start .quote-with-img p { font-size: var(--wp--preset--font-size--large); } /* Mobilanpassning */ @media all and (min-width: 1025px) and (max-width: 1536px) { .quote-with-img p, .start .quote-with-img p { font-size: var(--wp--preset--font-size--medium) } } @media all and (max-width: 1024px) { .quote-with-img > .wp-block-column:last-child { margin-right: 0; } } @media all and (max-width: 780px) { .quote-with-img > .wp-block-column:first-child, .start .quote-with-img > .wp-block-column:first-child { display: none; } .quote-with-img-2 > .wp-block-column:first-child { /* Specifikt för högerställd bild*/ display: block; margin-left: 0; } .quote-with-img-2 > .wp-block-column:last-child { /* Specifikt för högerställd bild*/ display: none; } .quote-with-img > .wp-block-column:last-child p:before { background-position: top left; /* Specifikt för citat med bild till vänster*/ } .quote-with-img figure { padding-left:0; } .quote-with-img figure img { width: 80px; } .quote-with-img p, .start .quote-with-img p { font-size: 1rem; } .quote-with-img p:before { height: 2rem; } .start .quote-with-img > .wp-block-column:last-child { margin-right: 0; } } /* ------------------------------------------- Mönster - Section Beige ------------------------------------------- */ .section-sand { background-image: url('../../uploads/2022/07/bg-circle.png'); background-position: left -20rem bottom; background-repeat: no-repeat; } .section-sand h2, .section-sand h3, .has-sand-background-color h2 { color: #e64112; } .section-sand .has-bomull-background-color h2, .section-sand .has-bomull-background-color h3, .section-sand .has-sno-background-color h2, .section-sand .has-sno-background-color h3 { color: var(--wp--preset--color--apelsin); } /* Mobilanpassning */ @media all and (min-width: 769px) and (max-width: 1024px) { /* Specifikt för startsidan ihop med heron */ .page-template-start .section-sand { padding-top: 10rem !important; } } @media all and (max-width: 768px) { /* Specifikt för startsidan ihop med heron */ .page-template-start .section-sand { padding-top: 7.5rem !important; } } /* ------------------------------------------- Mönster: Tre puffar ------------------------------------------- */ .boxes .wp-block-column > .wp-block-group { height: 100%; } /* Mobilanpassning */ @media all and (max-width: 1024px) { .boxes .wp-block-column > .wp-block-group { padding: 1.875rem !important; } } /* ------------------------------------------- Mönster: Höger och vänsterställt innehåll ------------------------------------------- */ .left-content h2, .right-content h2, .left-content h3, .right-content h3, .left-content p, .right-content p { max-width: 700px; } /* ------------------------------------------- Mönster: Logotyper ------------------------------------------- */ .wf-logos figure.wp-block-image { background-color: #fff; display: flex; align-items: center; height: 100%; justify-content: center; padding: 1.875rem; box-sizing: border-box; } /* ------------------------------------------- Återanvändbart innehåll: Våra tjänster ------------------------------------------- */ .services { margin-top: 24rem !important; } .services > .wp-block-group { margin-top: -44rem !important; padding-top: 12.5rem; } .services .wp-block-column { background-color: var(--wp--preset--color--sno); border-radius: 20px 20px 20px 0; padding: 2rem 2rem 4rem; transition: all .2s cubic-bezier(0.25,0.45,0.45,0.95); } /* Bilder */ .services .wp-block-column > figure { background-color: var(--wp--preset--color--smaragd-3); border-radius: 20px 20px 0 0; margin: -2rem -2rem 0; padding-top: clamp(0px, 80%, 200px); position: relative; } .services .wp-block-column > figure img { width: clamp(100px, 60%, 200px); position: absolute; bottom: -20px; right: 20px; transition: all .2s cubic-bezier(0.25,0.45,0.45,0.95); } /* Specifikt för admin där relative används på annat sätt */ .wp-admin .services .wp-block-column > figure img { position: static; } /* Bilder - Andra bakgrundsfärger */ .services > .wp-block-group > .wp-block-columns:nth-of-type(3n+1) .wp-block-column:nth-of-type(3) > figure, .services > .wp-block-group > .wp-block-columns:nth-of-type(3n+2) .wp-block-column:nth-of-type(2) > figure, .services > .wp-block-group > .wp-block-columns:nth-of-type(3n+3) .wp-block-column:nth-of-type(1) > figure, .services > .wp-block-group > .wp-block-columns:nth-of-type(3n+3) .wp-block-column:nth-of-type(4) > figure { background-color: var(--wp--preset--color--smaragd-2); } /* Text */ .services h2 { font-size: 1.625rem;; margin-top: 2.5rem; } .services h2 a { text-decoration: none; padding-right: 1.25rem; margin-right: -1.25rem; position: relative; } .services h2 a:after { background-image: url('../../uploads/2022/07/arrow.png'); background-repeat: no-repeat; background-size: 11px 17px; content: ''; height: 17px; margin-left: 0.625rem; width: 11px; position: absolute; bottom: 0.625rem; right: 0; } .services h2 a:hover { text-decoration: underline; } /* Hover */ .services .wp-block-column:hover { transform: scale(1.05); cursor: pointer; } .services .wp-block-column:hover figure img { max-width: 220px; } .services .wp-block-column:hover a { text-decoration: underline; } /* Mobilanpassning */ @media all and (max-width: 1400px) { .services h2 { font-size: 1.375rem; } .services h2 a:after { bottom: 0.4375rem; } } @media all and (max-width: 1080px) { .services h2 { font-size: var(--wp--preset--font-size--medium); } .services h2 a:after { background-size: 6px 12px; height: 12px; width: 6px; } .services p { font-size: var(--wp--preset--font-size--small); } .services .wp-block-column { padding: 1.25rem 1.25rem 2rem; } .services .wp-block-column > figure { margin: -1.25rem -1.25rem 0; } .services .wp-block-column > figure > a { height: 160px; } } @media all and (max-width: 780px) { .services { margin-top: 0 !important; } .services h2 a:after { bottom: 0.375rem; } .services p { margin-block-start: 0.375rem !important; } .services > .wp-block-group { margin-top: 0 !important; padding-top: 0; } .services .wp-block-column { padding: 1.25rem; } .services h2 { margin-top: 0; } .services .wp-block-column > figure { display: none; } } /* ------------------------------------------- Börja resan mot en hållbar framtid ------------------------------------------- */ .your-journey { margin-top: 9.375rem !important; } .your-journey > .wp-block-group { display: grid; margin-bottom: 5.625rem; gap: 2.5rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .your-journey > .wp-block-group > .wp-block-group { margin-top: 0; } .your-journey > .wp-block-group > .wp-block-group h4 { color: var(--wp--preset--color--sten); } .your-journey > .wp-block-group > .wp-block-group > figure { align-items: flex-end; display: flex; height: 200px; justify-content: center; } .your-journey > .wp-block-group > .wp-block-group:first-child > figure, .your-journey > .wp-block-group > .wp-block-group:nth-child(2) > figure, .your-journey > .wp-block-group > .wp-block-group:nth-child(3) > figure { margin-top: -120px; position: relative; } .your-journey > .wp-block-group > .wp-block-group > figure:before { background-color: var(--wp--preset--color--bomull); border-radius: 50%; content: ''; height: 180px; position: absolute; width: 180px; } .your-journey > .wp-block-group > .wp-block-group > figure > img { position: relative; z-index: 1; } /* Se alla våra tjänster */ .your-journey > p { margin-bottom: 3.75rem; } @media all and (max-width: 1479px) { .your-journey > .wp-block-group > .wp-block-group:nth-child(3) > figure { margin-top: 0; } } @media all and (min-width: 782px) and (max-width: 1029px) { .your-journey > .wp-block-group > .wp-block-group > figure { justify-content: flex-start; } .your-journey > .wp-block-group > .wp-block-group:nth-child(2) > figure { margin-top: 0; } } @media all and (max-width: 679px) { .your-journey > .wp-block-group > .wp-block-group > figure { justify-content: flex-start; } .your-journey > .wp-block-group > .wp-block-group:nth-child(2) > figure { margin-top: 0; } } /* ------------------------------------------- Återanvändbart innehåll: Har du frågor om hållbarhet? ------------------------------------------- */ .have-questions h2 { font-size: 1.875rem; position: relative; z-index: 1; } .have-questions .wp-block-buttons { position: relative; z-index: 2; } .have-questions > div { position: relative; } .have-questions > div figure { position: absolute; right: -2.5rem; top: -2.5rem; } /* Specifikt för standardmallen */ .page-template-default .have-questions, .post-template-default .have-questions { margin-top: 8.125rem; } /* Mobilanpassning */ @media all and (max-width: 1366px) { .have-questions > div figure { max-width: 380px; right: 0; top: 0; } } @media all and (max-width: 1024px) { /* Specifikt för standardmallen */ .page-template-default .have-questions, .post-template-default .have-questions { margin-top: 3.75rem; } } @media all and (min-width: 769px) and (max-width: 1024px) { .have-questions > div figure { max-width: 260px; top: 2.5rem; } .have-questions h2 { text-align: left; } .have-questions .wp-block-buttons { justify-content: left; } } @media all and (max-width: 768px) { .have-questions > div figure { display: none; } .have-questions .has-bomull-background-color { padding: 1.875rem !important; } } /* ------------------------------------------- Kundcase ------------------------------------------- */ /* Kundcase loop */ .wf-kundcase-loop ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap:30px; } .wf-kundcase-loop ul li { margin:0; position:relative; transition:transform 0.3s ease; } .wf-kundcase-loop ul li:hover { transform:scale(1.05); cursor: pointer; } .wf-kundcase-loop ul li figure { margin: 0; aspect-ratio: 9 / 16; } .wf-kundcase-loop ul li img { border-radius:20px 20px 0 30px; width: 100%; height: 100%; object-fit: cover; } .wf-kundcase-loop ul li > .wp-block-group { transform:translateY(calc(-100% - 50px)); background-color:#fff; width: calc(100% - 50px); padding: 30px 30px 60px; position: absolute; border-bottom-right-radius:30px; } .wf-kundcase-loop ul li > .wp-block-group h2 { font-size:30px; } .wf-kundcase-loop ul li > .wp-block-group h2 a { text-decoration:none; } .wf-kundcase-loop-client { margin-block-start: 0 !important; } .wf-kundcase-loop-client p { background-color: #DBE4E1; padding: .25em .5em; font-size: var(--wp--preset--font-size--small); border-radius: 3px; display: inline-block; } .wf-kundcase-loop ul li > .wp-block-group .wp-block-post-excerpt { margin: 0; position:relative; } .wf-kundcase-loop ul li > .wp-block-group .wp-block-post-excerpt:after { content:""; width:60px; height:60px; background-color:#DBE4E1; display:block; position:absolute; right:-30px; bottom: -60px; border-bottom-right-radius:30px; border-top-left-radius:10px; background-image: url('../../uploads/2022/07/arrow.png'); background-repeat:no-repeat; background-position:center center; background-size:1em; } @media all and (min-width: 1025px) and (max-width: 1366px) { .wf-kundcase-loop ul li > .wp-block-group h2 { font-size:20px; } .wf-kundcase-loop p.wp-block-post-excerpt__excerpt { font-size:16px; } } @media all and (max-width: 1024px) { .wf-kundcase-loop p.wp-block-post-excerpt__excerpt { display:none; } .wf-kundcase-loop ul li > .wp-block-group h2 { font-size:20px; } .wf-kundcase-loop ul li > .wp-block-group { padding:20px 40px 40px 20px; border-bottom-right-radius:20px; } .wf-kundcase-loop ul li > .wp-block-group .wp-block-post-excerpt:after { width:40px; height:40px; right:-40px; bottom: -40px; border-bottom-right-radius:20px; background-size:0.5em; } } @media all and (max-width: 768px) { .wf-kundcase-loop ul li figure { aspect-ratio:1 !important; } .wf-kundcase-loop ul{ grid-template-columns:1fr; } } /* Enskilt inlägg case */ .case-template-default .attachment-post-thumbnail{ border-radius: 0 0 20px 0; } .case-template-default .wf-kundcase-loop-client p { font-size: var(--wp--preset--font-size--medium); } /* Arkiv för kundcase */ .post-type-archive-case .wf-kundcase-loop ul { grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); list-style: none; /* temp */ margin: 0; /* temp */ padding: 0; /* temp */ } .post-type-archive-case .wf-kundcase-loop ul li { /*display: flex; flex-direction: column;*/ border-radius: 20px 20px 20px 0; background-color: #fff; } .post-type-archive-case .wf-kundcase-loop ul li figure { aspect-ratio: 1 / 1 !important; } .post-type-archive-case .wf-kundcase-loop ul li > .wp-block-group { position: static; transform: unset; width: 100%; /*height: 100%;*/ padding: 20px 40px 40px 20px; border-bottom-right-radius: 20px; } .post-type-archive-case .wf-kundcase-loop ul li > .wp-block-group h2 { font-size: 20px; /* temp */ } .post-type-archive-case .wf-kundcase-loop ul li img { border-radius: 20px 20px 0 0; } .post-type-archive-case .wf-kundcase-loop ul li .wp-block-group .wp-block-post-excerpt { display: none; } .post-type-archive-case .wf-kundcase-loop-client p { font-size: .875rem; } .post-type-archive-case .wf-kundcase-loop ul li > .wp-block-group::after { content: ""; width: 40px; height: 40px; background-color: #DBE4E1; display: block; position: absolute; right: 0; bottom: 0; border-bottom-right-radius: 20px; border-top-left-radius: 10px; background-image: url(../../uploads/2022/07/arrow.png); background-repeat: no-repeat; background-position: center center; background-size: 0.5em; width: 40px; height: 40px; right: 0; bottom: 0; border-bottom-right-radius: 20px; background-size: 0.5em; } /* ------------------------------------------- Leveranser ------------------------------------------- */ .wf-leveranser-loop ul { display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap:30px; } .wf-leveranser-loop ul li { margin-top:0; } .wf-leveranser-loop ul li h2 { font-size: 24px; color:#000000; margin: 0.3em 0; } .wf-leveranser-loop ul li .wp-block-post-date { color:#727679; font-size:16px; font-weight: 500; } .wf-leveranser-loop ul li .wp-block-post-excerpt, .wf-leveranser-loop ul li .wp-block-post-excerpt p.wp-block-post-excerpt__excerpt { margin:0; margin-block-start: 0 !important; } /* ------------------------------------------- Kundlogotyper ------------------------------------------- */ .wf-client-logos .wp-block-column{ padding: 40px; align-self:stretch; display: flex; align-items: center; justify-content: center; } .wf-client-logos .wp-block-column img{ max-height:100px; width:auto; } .wf-client-logos h2 + .wp-block-group{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); align-items:stretch; gap:1.875rem; } .wf-client-logos h2 + .wp-block-group > figure{ background-color:#fff; padding: 1.875rem; width:100%; box-sizing:border-box; display:flex; align-items:center; justify-items:center; justify-content:center; margin-bottom: 0; margin-block-start: 0; } .wf-client-logos img{ max-height:100px; width:auto; } /* ------------------------------------------- WP Forms & ActiveForms ------------------------------------------- */ div.wpforms-container-full, ._form-content { margin: 1.875rem 0; } div.wpforms-container-full .wpforms-form .wpforms-field, ._form-content > ._form_element { padding: 0; margin-bottom: 1.125rem; } /* Etiketter */ div.wpforms-container-full .wpforms-form .wpforms-field-label, div.wpforms-container-full .wpforms-form label.wpforms-error, ._form-content > ._form_element > label, ._form-content > ._form_element > ._field-wrapper > label { font-size: var(--wp--preset--font-size--small); font-weight: 400; display: block; margin-bottom: .5em; } /* Inputfält */ div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea, ._form-content > ._form_element input[type=date], ._form-content > ._form_element input[type=datetime], ._form-content > ._form_element input[type=email], ._form-content > ._form_element input[type=month], ._form-content > ._form_element input[type=number], ._form-content > ._form_element input[type=password], ._form-content > ._form_element input[type=range], ._form-content > ._form_element input[type=search], ._form-content > ._form_element input[type=tel], ._form-content > ._form_element input[type=text], ._form-content > ._form_element input[type=time], ._form-content > ._form_element input[type=url], ._form-content > ._form_element input[type=week], ._form-content > ._form_element select, ._form-content > ._form_element textarea { display: block; box-sizing: border-box; width: 100%; max-width: 60%; font-family: var(--wp--preset--font-family--poppins); font-size: var(--wp--preset--font-size--small); font-weight: 400; color: var(--wp--preset--color--sten); padding: 0.9375rem; border: 1px solid var(--wp--preset--color--apelsin-3); border-radius: 10px; margin-bottom: .75em; height: auto; outline: 4px solid var(--wp--preset--color--sno); transition: all .2s cubic-bezier(0.25,0.45,0.45,0.95); margin-left: 4px; } div.wpforms-container-full input[type=date]:focus, div.wpforms-container-full input[type=datetime]:focus, div.wpforms-container-full input[type=datetime-local]:focus, div.wpforms-container-full input[type=email]:focus, div.wpforms-container-full input[type=month]:focus, div.wpforms-container-full input[type=number]:focus, div.wpforms-container-full input[type=password]:focus, div.wpforms-container-full input[type=range]:focus, div.wpforms-container-full input[type=search]:focus, div.wpforms-container-full input[type=tel]:focus, div.wpforms-container-full input[type=text]:focus, div.wpforms-container-full input[type=time]:focus, div.wpforms-container-full input[type=url]:focus, div.wpforms-container-full input[type=week]:focus, div.wpforms-container-full select:focus, div.wpforms-container-full textarea:focus, ._form-content > ._form_element input[type=date]:focus, ._form-content > ._form_element input[type=datetime]:focus, ._form-content > ._form_element input[type=datetime-local]:focus, ._form-content > ._form_element input[type=email]:focus, ._form-content > ._form_element input[type=month]:focus, ._form-content > ._form_element input[type=number]:focus, ._form-content > ._form_element input[type=password]:focus, ._form-content > ._form_element input[type=range]:focus, ._form-content > ._form_element input[type=search]:focus, ._form-content > ._form_element input[type=tel]:focus, ._form-content > ._form_element input[type=text]:focus, ._form-content > ._form_element input[type=time]:focus, ._form-content > ._form_element input[type=url]:focus, ._form-content > ._form_element input[type=week]:focus, ._form-content > ._form_element select:focus, ._form-content > ._form_element textarea:focus { box-shadow: none; border-color: var(--wp--preset--color--smaragd); outline: 4px solid var(--wp--preset--color--smaragd-3); } div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field input.user-invalid, div.wpforms-container-full .wpforms-form .wpforms-field textarea.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field textarea.user-invalid, div.wpforms-container-full .wpforms-form .wpforms-field select.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field select.user-invalid, ._form-content > ._form_element ._error _below{ border: 1px solid var(--wp--preset--color--apelsin); outline: 4px solid var(--wp--preset--color--apelsin-3); } /* Detta fält är obligatoriskt */ div.wpforms-container-full .wpforms-form label.wpforms-error, div.wpforms-container-full .wpforms-form em.wpforms-error, ._form-content > ._form_element > label > .field-required { color: var(--wp--preset--color--apelsin); } ._form-content > ._form_element > label > .field-required { margin-left: .25em; } div.wpforms-container-full .wpforms-form label.wpforms-error:before, div.wpforms-container-full .wpforms-form em.wpforms-error:before { background-color: var(--wp--preset--color--apelsin); } /* Meddelande */ /* TODO*/ div.wpforms-container-full .wpforms-confirmation-container-full, div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) { background-color: var(--wp--preset--color--sno); border: none; color: var(--wp--preset--color--sten); padding: 1.875rem; } div.wpforms-container-full .wpforms-confirmation-container-full p:last-child, div[submit-success]>.wpforms-confirmation-container-full p:last-child { margin-block-start: 0 !important; } /* Knapp */ div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button, div.wpforms-container-full input[type=submit]:not(:hover):not(:active), div.wpforms-container-full button[type=submit]:not(:hover):not(:active), div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active), ._form-content > ._button-wrapper button[type=submit] { background-color: var(--wp--preset--color--smaragd); border: none; border-radius: 20px; color: var(--wp--preset--color--sno); font-family: var(--wp--preset--font-family--poppins); font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: var(--wp--custom--typography--line-height--small); padding: 1.09375rem 2.5rem; height: auto; transition: all 0.3s ease; margin-top: .9375rem; cursor: pointer; } div.wpforms-container-full .wpforms-form input[type=submit]:hover, div.wpforms-container-full .wpforms-form button[type=submit]:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, ._form-content > ._button-wrapper button[type=submit]:hover { opacity: 0.90; } /* Specifik för WP Forms*/ div.wpforms-container-full input[type=date]:focus:invalid, div.wpforms-container-full input[type=datetime]:focus:invalid, div.wpforms-container-full input[type=datetime-local]:focus:invalid, div.wpforms-container-full input[type=email]:focus:invalid, div.wpforms-container-full input[type=month]:focus:invalid, div.wpforms-container-full input[type=number]:focus:invalid, div.wpforms-container-full input[type=password]:focus:invalid, div.wpforms-container-full input[type=range]:focus:invalid, div.wpforms-container-full input[type=search]:focus:invalid, div.wpforms-container-full input[type=tel]:focus:invalid, div.wpforms-container-full input[type=text]:focus:invalid, div.wpforms-container-full input[type=time]:focus:invalid, div.wpforms-container-full input[type=url]:focus:invalid, div.wpforms-container-full input[type=week]:focus:invalid, div.wpforms-container-full select:focus:invalid, div.wpforms-container-full textarea:focus:invalid { box-shadow: none; border-color: var(--wp--preset--color--smaragd); outline: 4px solid var(--wp--preset--color--smaragd-3); } /* ReCaptcha */ div.wpforms-container-full .wpforms-form .wpforms-recaptcha-container { padding: 0; } /* Antal tecken-text */ .wpforms-field-limit-text { font-size: var(--wp--preset--font-size--small); } /* Specifik för ActiveCampaign Forms */ ._form_element fieldset { border: none; padding: 0; } ._form_element fieldset legend { font-size: var(--wp--preset--font-size--small); } ._form-content > ._form_element > fieldset > ._checkbox-radio { font-family: var(--wp--preset--font-family--poppins); font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--sten); } ._form-content > ._form_element input[type=datetime] { max-width: 30%; } ._form-content > ._form_element textarea { height: 8em; margin-bottom: .5em; } ._form-content > ._form_element .iti { display: block; } ._form-content > ._form_element .iti__selected-country .iti__selected-dial-code { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--sten); } ._form-content > .sms_consent_checkbox { display: flex; align-items: flex-start; gap: .5em; font-size: var(--wp--preset--font-size--small); } ._form-content > .sms_consent_checkbox > input[type="checkbox"] { margin-top: .75em; } ._form-content > ._button-wrapper button[type=submit]:focus-visible { outline: 4px solid var(--wp--preset--color--smaragd-3); } /* ------------------------------------------- Nätverket CSR Småland ------------------------------------------- */ /* Text / Länkar */ .csr-network h1, .csr-network h2, .csr-network h3, .csr-network h4, .csr-network h5, .csr-network a, .csr-network .fbc-page .fbc-wrap ol.fbc-items li a { color: var(--wp--preset--color--druva); } .csr-network .has-druva-background-color h1, .csr-network .has-druva-background-color h2, .csr-network .has-druva-background-color h3, .csr-network .has-druva-background-color h4, .csr-network .has-druva-background-color h5, .csr-network .has-druva-background-color p, .csr-network .has-druva-background-color a { color: var(--wp--preset--color--sno); } .csr-network footer h2 { color: var(--wp--preset--color--sno); } /* Huvudmenyn */ .csr-network header .wp-block-navigation ul .wp-block-navigation-item.current-menu-item a { border-color: var(--wp--preset--color--druva); } /* Knappar */ .csr-network .wp-block-button .wp-block-button__link { background-color: var(--wp--preset--color--druva); color: var(--wp--preset--color--sno); } .csr-network .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--druva); border-color: var(--wp--preset--color--druva); } .csr-network .wp-block-button .wp-block-button__link:hover { background-color: #52415b; } .csr-network .is-style-outline.is-style-outline.wp-block-button .wp-block-button__link:hover { background-color: var(--wp--preset--color--druva-3); } /* Punktlista */ .csr-network main .entry-content ul li::marker { color: var(--wp--preset--color--druva); } /* Citat */ .csr-network .wp-block-quote p:before { background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' xml:space=\'preserve\' viewBox=\'0 0 58 40\'%3E%3Cg fill=\'%2365506F\'%3E%3Cpath d=\'M14.7 0h-.8C8.8.2 4.8 4.4 5 9.3v1.1c0 5 4 8.4 8.1 9.5.3 6.1-3.1 10.4-9.7 12.4-2 .5-3.4 1.8-3.5 3.8C0 38.3 1.6 40 4.6 40c4 0 9.5-2.2 13.4-6 4.4-4.3 7-10.9 7-20.3v-1.4C24.9 4.7 21 0 14.7 0zM47.8 0h-.9c-5.1.2-9 4.4-8.8 9.3v1.1c0 5 4 8.4 8.1 9.5.3 6.1-3.1 10.4-9.7 12.4-2 .5-3.4 1.8-3.5 3.8 0 2.2 1.4 3.9 4.4 3.9 4.1 0 9.7-2.2 13.4-6 4.6-4.3 7.2-10.9 7.2-20.3v-1.4C58 4.7 54 0 47.8 0z\'/%3E%3C/g%3E%3C/svg%3E%0A'); } .csr-network .quote-with-img .wp-block-quote cite { color: var(--wp--preset--color--druva); } /* Avgränsare */ .has-druva-background-color .wp-block-separator { color: var(--wp--preset--color--sno); } /* Tabell */ .csr-network .wp-block-table { border-color: var(--wp--preset--color--druva); } .csr-network .wp-block-table thead { color: var(--wp--preset--color--druva); border-color: var(--wp--preset--color--druva) } .csr-network .wp-block-table td, .wp-block-table th { border-color: var(--wp--preset--color--druva-3) } /* Om CSR Småland på Nätverkets startsida */ .wf-network-logo figure { display: flex; justify-content: flex-end; margin-block-start: 5rem !important; } /* WPForms */ .csr-network div.wpforms-container-full .wpforms-form input[type=date], .csr-network div.wpforms-container-full .wpforms-form input[type=datetime], .csr-network div.wpforms-container-full .wpforms-form input[type=datetime-local], .csr-network div.wpforms-container-full .wpforms-form input[type=email], .csr-network div.wpforms-container-full .wpforms-form input[type=month], .csr-network div.wpforms-container-full .wpforms-form input[type=number], .csr-network div.wpforms-container-full .wpforms-form input[type=password], .csr-network div.wpforms-container-full .wpforms-form input[type=range], .csr-network div.wpforms-container-full .wpforms-form input[type=search], .csr-network div.wpforms-container-full .wpforms-form input[type=tel], .csr-network div.wpforms-container-full .wpforms-form input[type=text], .csr-network div.wpforms-container-full .wpforms-form input[type=time], .csr-network div.wpforms-container-full .wpforms-form input[type=url], .csr-network div.wpforms-container-full .wpforms-form input[type=week], .csr-network div.wpforms-container-full .wpforms-form select, .csr-network div.wpforms-container-full .wpforms-form textarea { border-color: var(--wp--preset--color--druva-3); } .csr-network div.wpforms-container-full input[type=date]:focus, .csr-network div.wpforms-container-full input[type=datetime]:focus, .csr-network div.wpforms-container-full input[type=datetime-local]:focus, .csr-network div.wpforms-container-full input[type=email]:focus, .csr-network div.wpforms-container-full input[type=month]:focus, .csr-network div.wpforms-container-full input[type=number]:focus, .csr-network div.wpforms-container-full input[type=password]:focus, .csr-network div.wpforms-container-full input[type=range]:focus, .csr-network div.wpforms-container-full input[type=search]:focus, .csr-network div.wpforms-container-full input[type=tel]:focus, .csr-network div.wpforms-container-full input[type=text]:focus, .csr-network div.wpforms-container-full input[type=time]:focus, .csr-network div.wpforms-container-full input[type=url]:focus, .csr-network div.wpforms-container-full input[type=week]:focus, .csr-network div.wpforms-container-full select:focus, .csr-network div.wpforms-container-full textarea:focus { border-color: var(--wp--preset--color--druva); outline: 4px solid var(--wp--preset--color--druva-3); } .csr-network div.wpforms-container-full input[type=date]:focus:invalid, .csr-network div.wpforms-container-full input[type=datetime]:focus:invalid, .csr-network div.wpforms-container-full input[type=datetime-local]:focus:invalid, .csr-network div.wpforms-container-full input[type=email]:focus:invalid, .csr-network div.wpforms-container-full input[type=month]:focus:invalid, .csr-network div.wpforms-container-full input[type=number]:focus:invalid, .csr-network div.wpforms-container-full input[type=password]:focus:invalid, .csr-network div.wpforms-container-full input[type=range]:focus:invalid, .csr-network div.wpforms-container-full input[type=search]:focus:invalid, .csr-network div.wpforms-container-full input[type=tel]:focus:invalid, .csr-network div.wpforms-container-full input[type=text]:focus:invalid, .csr-network div.wpforms-container-full input[type=time]:focus:invalid, .csr-network div.wpforms-container-full input[type=url]:focus:invalid, .csr-network div.wpforms-container-full input[type=week]:focus:invalid, .csr-network div.wpforms-container-full select:focus:invalid, .csr-network div.wpforms-container-full textarea:focus:invalid { border-color: var(--wp--preset--color--druva); outline: 4px solid var(--wp--preset--color--druva-3); } /* Knapp */ .csr-network div.wpforms-container-full .wpforms-form input[type=submit], .csr-network div.wpforms-container-full .wpforms-form button[type=submit], .csr-network div.wpforms-container-full .wpforms-form .wpforms-page-button, .csr-network div.wpforms-container-full input[type=submit]:not(:hover):not(:active), .csr-network div.wpforms-container-full button[type=submit]:not(:hover):not(:active), .csr-network div.wpforms-container-full .wpforms-page-button:not(:hover):not(:active) { background-color: var(--wp--preset--color--druva); } /* Mobilanpassning */ @media all and (max-width: 768px) { .wf-network-logo figure { justify-content: flex-start; margin-block-start: 3rem !important; } .wf-network-logo figure img { max-width: 50%; } } /* ------------------------------------------- Arkiv: Teammedlemmar (Kontakt-sidan) ------------------------------------------- */ .wf-team-members { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3.75rem 1.875rem; margin-top: 1.875rem; } .wf-team-members li { border-bottom: 3px solid var(--wp--preset--color--apelsin-3); padding-bottom: 1.875rem; } /* Utvald bild */ .wf-team-members .wp-block-post-featured-image { margin: 0; background-color: #DBE4E1; border-radius: 20px 0; transition: transform 0.3s ease, background-color 0.3s ease; } .wf-team-members:not(.wf-partners) .wp-block-post-featured-image { aspect-ratio: 2 / 3; } .wf-team-members .wp-block-post-featured-image img { display: block; object-fit: cover; width: 100%; height: 100%; border-radius: 20px 0; } /* Om foto saknas */ .wf-team-members .wp-block-post-featured-image a { display: block; height: 100%; } /* Text */ .wf-team-members .wp-block-heading { margin: 1.875rem 0 0; } .wf-team-members p { margin-block-start: 0.46875rem !important; margin-block-end: 0 !important; } .wf-team-members p a { padding: .25em 0; } .wf-team-members-title { display: block; } .wf-team-members .wf-team-members-more-info { display: inline-block; margin-bottom: .9375rem; } .wf-team-members .wf-team-members-phone, .wf-team-members .wf-team-members-mail { display: flex; align-items: center; } .wf-team-members .wf-team-members-phone::before, .wf-team-members .wf-team-members-mail::before { content: ''; display: block; background-size: cover; } .wf-team-members .wf-team-members-phone::before { height: 1.5em; width: 1.5em; margin-right: .25em; background-image: url('data:image/svg+xml,'); } .wf-team-members .wf-team-members-mail::before { height: 1.25em; width: 1.25em; margin-right: .5em; background-image: url('data:image/svg+xml,'); } /* Hover */ html[lang="sv-SE"] .wf-team-members .wp-block-post-featured-image:hover { transform: scale(1.02); background-color: #8FB0A6; } /* Specifikt för samarbetspartners */ .wf-partners .wp-block-post-featured-image { aspect-ratio: 3 / 2; } /* Temp, flytta efter lansering */ .post-type-archive-teammedlem .fbc-page { display: none; } /* Mobilanpassning - Teammedlemmar */ @media all and (max-width: 1024px) { .wf-team-members:not(.wf-partners) .wp-block-post-featured-image { aspect-ratio: 3 / 4; } } @media all and (max-width: 768px) { .wf-team-members { grid-template-columns: 1fr 1fr; } } /* ------------------------------------------- Enskilt objekt: Teammedlemm ------------------------------------------- */ .single-teammedlem .wp-block-post-featured-image img { border-radius: 50%; object-position: top; } /* ------------------------------------------- Arkiv: Verktyg ------------------------------------------- */ .wf-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; list-style: none; padding: 0; margin: 5rem 0 10rem !important; } .wf-tools li { background-color: #fff; /*padding: 5rem 2.5rem;*/ border-radius: 20px; } .wf-tools li .wf-tool-owner{ padding: 0 2.5rem; display: flex; justify-content: flex-end; min-height: 60px; box-sizing: border-box; align-items: center; } .wf-tools li .wf-tool-owner img { max-height: 40px !important; max-width: 90px !important; width: auto !important; } .wf-tools li .wf-tool-logo:not(.wf-tool-owner) { margin-bottom: 0.625rem; } .wf-tools li .wf-tool-logo img{ max-width: 200px; } .wf-tools li figure { aspect-ratio: 16 / 9; margin: 0; } .wf-tools li figure > img { width: 100%; height: 100%; object-fit: cover; display: block; } .wf-tools li figure + div { padding: 1.875rem 2.5rem 2.5rem; } .wf-tools li .wp-block-heading { margin: 0 0 1.875rem; line-height: 1.1; } .wf-tools li .wp-block-heading a { text-decoration: none; color:var(--wp--preset--color--sten); } .wf-tools li p { margin-block-start: 0 !important; margin-bottom: 2.5rem; } /* Featured verktyg (beror på antal verktyg totalt) */ li.wf-tool-featured { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 5rem; grid-column: span 3; padding-right: 0; display: flex; position: relative; background-color: transparent; } li.wf-tool-featured .wf-tool-owner { position: absolute; left: calc(70% - 90px - 2.5rem); /*70% som bredden på :before-element, 90px som maxbredden på logotypen, 2.5rem som paddingen i textbehållaren*/ top: 10px; padding: 0; } .wf-tool-featured::before { content: ''; background-color: #fff; padding: 5rem 2.5rem; border-radius: 20px; width: 70%; position: absolute; top: 0; bottom: 0; z-index: -1; box-sizing: border-box; } .wf-tool-featured > div { grid-column: span 1; display: flex; flex-direction: column; justify-content: center; padding: 5rem 2.5rem; } li.wf-tool-featured figure { grid-column: span 2; aspect-ratio: 2 / 1; margin: 5rem 0; align-self: center; } /* Temp då knappen inte fugnerar */ .wf-tools li .wp-block-button__link { background-color: var(--wp--preset--color--smaragd); border-radius: 20px; color: var(--wp--preset--color--sno); font-size: var(--wp--preset--font-size--medium); font-weight: 500; line-height: var(--wp--custom--typography--line-height--small); padding-top: 1.09375rem; padding-right: 2.5rem; padding-bottom: 1.09375rem; padding-left: 2.5rem; display: block; } /* Transition */ .wf-tools li { transition: transform 0.3s ease; } li.wf-tool-featured figure { transition: transform 0.5s ease; } /* Hover */ .wf-tools li:hover { cursor: pointer; transform: scale(1.05); } .wf-tools li:hover .wp-block-button__link { background-color: #0a685f; } /* Hover - Featured */ .wf-tools li.wf-tool-featured:hover { transform: scale(1.02); } .wf-tools li.wf-tool-featured:hover figure { transform: scale(1.05); } @media all and (max-width: 1200px) { .wf-tools, li.wf-tool-featured { grid-template-columns: repeat(2, 1fr); } li.wf-tool-featured, li.wf-tool-featured figure { grid-column: span 2; } li.wf-tool-featured figure { grid-column: span 1; } li.wf-tool-featured figure { aspect-ratio: 1 / 1; } } @media all and (max-width: 1024px) { li.wf-tool-featured { gap: 2.5rem; } .wf-tool-featured > div{ grid-column: span 1; } .wf-tool-featured::before { width: 75%; } } @media all and (max-width: 768px) { .wf-tools { grid-template-columns: 1fr; } li.wf-tool-featured { grid-template-columns: 1fr; background-color: #fff; padding-right: 0; gap:0; } li.wf-tool-featured .wf-tool-owner { right: 2.5rem; top: 0; } li.wf-tool-featured, .wf-tool-featured > div, li.wf-tool-featured figure { grid-column: unset; } .wf-tool-featured > div { order: 1; padding: 2.5rem; } .wf-tool-featured::before { display: none; } li.wf-tool-featured figure { margin: 60px 0 0 0; aspect-ratio: 16/9; } } /* ------------------------------------------- Inläggstyp: Verktyg ------------------------------------------- */ /* Ser till att innehållet i verktyg får padding även i mobil */ .single-verktyg .entry-content > .wp-block-group { padding-left: var(--wp--custom--spacing--outer); padding-right: var(--wp--custom--spacing--outer); } /* Hero */ .wp-block-group.wf-tool-hero { display: grid; grid-template-columns: 1fr 2fr; position:relative; align-items: center; margin-top:1.875rem; } .wp-block-group.wf-tool-hero .wp-block-cover, .wp-block-group.wf-tool-hero .wp-block-group:has(iframe) { width:100%; margin:2.5rem 0 !important; } .wp-block-group.wf-tool-hero > .wp-block-group{ padding:2.5rem; } .wp-block-group.wf-tool-hero > .wp-block-group h2.wp-block-heading{ /*font-size:var(--wp--custom--typography--font-size--colossal);*/ color:var(--wp--preset--color--sten); line-height: 1.1; } .wp-block-group.wf-tool-hero:after { position:absolute; z-index:-1; background-color:#fff; width:70%; height:100%; content:""; left:0; right:0; top:0; border-radius: 1.875rem; } @media (max-width: 1024px) { .wp-block-group.wf-tool-hero { grid-template-columns: 1fr; } .wp-block-group.wf-tool-hero:after { width: 100%; } .wp-block-group.wf-tool-hero .wp-block-cover, .wp-block-group.wf-tool-hero .wp-block-group:has(iframe) { margin-left: 1.875rem; margin-right: 1.875rem; margin-top: 0; width: auto; } } /* Puffar (Nyckelfunktioner och fördelar) */ .wf-verktyg-puffar { display: grid; gap:1.875rem; } .wf-verktyg-puffar > * { background:rgba(255,255,255,0.75); padding: 2.5rem; border-radius: 1.875rem 1.875rem 0 1.875rem; margin: 0 !important; } body .is-layout-constrained.wf-verktyg-puffar > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { margin: 0 !important; } .wf-verktyg-puffar h3.wp-block-heading { color: var(--wp--preset--color--smaragd); } .wf-nyckelfunktioner{ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .wf-fordelar{ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } /* Text och media */ .single-verktyg .wp-block-media-text .wp-block-media-text__content { padding-top: 7.5rem; padding-bottom: 7.5rem; } /* Demo */ .wf-verktyg-demo { display: grid; grid-template-columns: 1fr 1fr; background:rgba(255,255,255,0.75); border-radius: 1.875rem; width: clamp(300px, 100%, 1000px); display: none; /* Temp */ } .wf-verktyg-demo h2.wp-block-heading { font-size: var(--wp--custom--typography--font-size--colossal); } .wf-verktyg-demo > .wp-block-group { padding: 5rem 2.5rem; margin-top: 0; } .wf-verktyg-demo figure { aspect-ratio: auto; margin-bottom: 0; } .wf-verktyg-demo figure img { height: 100%; width: 100%; border-radius: 1.875rem 0 0 1.875rem; } @media (max-width: 1200px) { .single-verktyg .wp-block-cover { padding: 2.5rem; } .wf-verktyg-puffar { grid-template-columns: repeat(2, minmax(250px, 1fr)); /* Byt till 2 kolumner vid mindre utrymme */ } } @media (max-width: 768px) { .wf-verktyg-puffar { grid-template-columns: repeat(1, minmax(250px, 1fr)); /* Byt till 1 kolumn för små skärmar */ } .single-verktyg .wp-block-cover { padding: 1rem; } .single-verktyg .wp-block-media-text .wp-block-media-text__content { padding-left: var(--wp--custom--spacing--outer); padding-right: var(--wp--custom--spacing--outer); } .single-verktyg .wp-block-media-text .wp-block-media-text__content { padding-top: 1rem; padding-bottom: 1rem; } /* Demo */ .wf-verktyg-demo { grid-template-columns: 1fr; } .wf-verktyg-demo figure { display: none; } } /* ------------------------------------------- Evenemang - lista ------------------------------------------- */ .wf-events { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .wf-events li { margin: 0; background: var(--wp--preset--color--sno); border-radius: 0.75rem; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(240, 99, 58, 0.06); transition: transform 0.3s ease; cursor: pointer; } /* Bild + datum */ .wf-events li > div:first-child { background: var(--wp--preset--color--smaragd-3); aspect-ratio: 4 / 2; position: relative; } .wf-events figure { margin: 0; aspect-ratio: 4 / 2; height: 100%; } .wf-events figure img { width: 100%; height: 100%; object-fit: cover; display: block; } .wf-events-date-time { position: absolute; bottom: 0; left: 0; background-color: var(--wp--preset--color--smaragd-3); padding: 1rem 1.8rem; } .wf-events-date, .wf-events-time { color: var(--wp--preset--color--smaragd); display: block; line-height: 1.4; } .wf-events-date { font-weight: 600; } /* Datumplatta om bild saknas*/ .wf-events li > div:first-child > span:nth-child(1) { background-color: rgba(255,255,255,0.5); } /* Rubrik, ingress, ev. logotyp */ .wf-events li > div:last-child { padding: 2rem 2rem 3rem; flex: 1; display: flex; flex-direction: column; justify-content: space-between; } .wf-events li > div:last-child h3 { margin: 0; } .wf-events li > div:last-child h3 a { color: var(--wp--preset--color--apelsin); text-decoration: none; } .wf-events li > div:last-child h3 a:hover { text-decoration: underline; } .wf-events li > div:last-child p { margin-bottom: 0; } .wf-events-csr-logo { margin-top: 1em; max-width: 120px; align-self: flex-end; margin-bottom: -1em; } /* Hover */ .wf-events li:hover { transform: scale(1.05); box-shadow: 0 2px 8px rgba(240, 99, 58, 0.08); } .wf-events li:hover > div:last-child h3 a { text-decoration: underline; } /* Specifikt för CSR Småland events på där bakgrunden är vit */ .csr-network .has-sno-background-color .wf-events li { border: 1px solid var(--wp--preset--color--druva); box-shadow: 0 2px 6px rgba(101, 80, 111, 0.06); } /* Responsiva anpassningar */ @media (max-width: 1024px) { .wf-events { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } @media (max-width: 768px) { .wf-events { grid-template-columns: 1fr; gap: 1.25rem; } .wf-events li > div:last-child { padding: 1.5rem 1.5rem 2rem; } .wf-events li:hover { transform: none; } } /* Färganpassningar för CSR Småland */ .wf-events li.wf-event-item-csr > div:first-child, .wf-events li.wf-event-item-csr .wf-events-date-time { background-color: var(--wp--preset--color--druva-3); } .wf-events li.wf-event-item-csr .wf-events-date, .wf-events li.wf-event-item-csr .wf-events-time { color: var(--wp--preset--color--druva); } .wf-events li.wf-event-item-csr > div:last-child h3 a { color: var(--wp--preset--color--druva); } /* ------------------------------------------- Evenemang - enskilt ------------------------------------------- */ /* Allmänt */ .single-evenemang h2 { margin-bottom: .5em; max-width: 100%; } .single-evenemang .wp-block-post-title + .has-large-font-size { margin-bottom: 3em; } .single-evenemang .wp-block-post-featured-image { aspect-ratio: 3 / 2; } .single-evenemang .wp-block-post-featured-image > img { display: block; object-fit: cover; height: 100%; width: 100%; } .single-evenemang .wp-block-button__link { display: inline-flex; align-items: center; gap: .25em; } /* Eventet har passerat */ .wf-event-passed { font-size: var(--wp--preset--font-size--large); background-color: var(--wp--preset--color--sand); padding: 1rem 2rem; margin: 0 0 2em !important; } .wf-event-passed > a { display: block; font-size: var(--wp--preset--font-size--normal); color: var(--wp--preset--color--sten); } /* --- Datum, tid och anmälningsknapp --- */ .wf-event-date p { margin: 0 !important; } .wf-event-date p:first-child { margin-top: 0; } .wf-event-date time { font-size: var(--wp--preset--font-size--large); display: block; line-height: 1.6; } .wf-event-date time:first-child { font-weight: bold; } .wf-event-date > .wp-block-button:nth-child(2), .wf-event-date > p:nth-child(2) { margin-top: 1.25em !important; } .wf-event-date > p:nth-child(3) { margin-top: .75em !important; } /* --- Detaljer --- */ .wf-event-details { list-style: none; margin: 0; padding: 0; } .wf-event-details li { display: flex; align-items: center; gap: 2em; padding: 1.5rem 0; border-bottom: 1px solid rgba(48, 132, 115, 0.50); } .wf-event-details li:first-child { padding-top: 0; } .wf-event-details-icon { flex-shrink: 0; width: 40px; color: var(--wp--preset--color--smaragd); } .wf-event-details-icon svg { width: 40px; height: 40px; display: block; } .wf-event-details dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 2rem; margin: 0; flex: 1; } .wf-event-details dl > div:only-child { grid-column: 1 / -1; } .wf-event-details dt { font-size: var(--wp--preset--font-size--small); margin-bottom: .15em; } .wf-event-details dd { margin: 0; font-size: var(--wp--preset--font-size--large); font-weight: bold; line-height: 1.3; } .wf-event-details dd span { display: block; font-weight: normal; font-size: var(--wp--preset--font-size--small); margin-top: 0.75em; } .wf-event-details + .wp-block-button { margin-top: 2rem; } /* --- Talare --- */ .wf-event-speakers { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3rem; } .wf-event-speakers li { margin: 0; display: flex; gap: 2rem; align-items: flex-start; } .wf-event-speakers figure { flex-shrink: 0; height: 50%; width: 50%; margin: 0; aspect-ratio: 1 / 1; } .wf-event-speakers figure img { object-fit: cover; width: 100%; height: 100%; display: block; } .wf-event-speakers li > div { flex: 1; } .wf-event-speakers h3 { margin-top: 0; margin-bottom: 0.25rem; } .wf-event-speakers p:first-of-type { font-weight: 700; margin-top: 0 !important; margin-bottom: 0.5em; } .wf-event-speakers p:last-of-type { margin-top: 0 !important; } @media (max-width: 768px) { .wf-event-details li { gap: 1em; align-items: flex-start; } .wf-event-details-icon, .wf-event-details-icon svg { width: 28px; height: 28px; } .wf-event-speakers { gap: 2rem; } } @media (max-width: 600px) { .wf-event-details dl { grid-template-columns: 1fr; } .wf-event-speakers li { flex-direction: column; gap: 1.25rem; } } /* Anmälan - Active Campaign*/ .wf-event-form form { max-width: 705px; margin: 0 auto; } /* Färgsättning */ .has-smaragd-3-background-color h2 { color: var(--wp--preset--color--sten); } /* Färgsättning CSR Småland */ body.csr-network .has-smaragd-3-background-color { background-color: var(--wp--preset--color--druva-3) !important; } body.csr-network .has-smaragd-3-background-color .wp-block-button .wp-block-button__link, body.csr-network ._form-content > ._button-wrapper button[type=submit] { background-color: var(--wp--preset--color--druva); } body.csr-network .wf-event-details-icon { color: var(--wp--preset--color--druva); } body.csr-network .wf-event-details li { border-bottom-color: rgba(101, 80, 111, 0.50); } body.csr-network ._form_element input[type=text] { border-color: var(--wp--preset--color--druva-3); } body.csr-network .wp-block-post-featured-image { position: relative; } body.csr-network .wp-block-post-featured-image::after { content: ''; display: block; position: absolute; bottom: 1.5rem; right: 1.5rem; width: 120px; height: 65px; background-image: url('/wp-content/uploads/2024/02/Rityta-16.png'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* ------------------------------------------- Kakor - CookieYes ------------------------------------------- */ .cky-consent-container .cky-btn { border-radius: 20px; }