:root { --primary: #000; --malmo-red: #e14830; --malmo-blue: #005bc4; --malmo-yellow: #ffd400; --bg: #f5f5eb; --text: #030303; --muted: #666; --card-bg: #fff; --links-bg: #e0e0e0; --links-border: #cccccc; --popup-bg: #fff; --popup-text: #030303; --popup-content-substack-bg: #fafafa; --apple-style-table-bg: #fff; --apple-style-table-header-bg: #f8f9fa; --apple-style-table-header-text: #343a40; --apple-style-table-border: #dee2e6; --apple-style-table-td-border: #f1f3f5; --apple-style-table-row-even-bg: #fcfdff; --apple-style-table-row-hover-bg: #e9ecef; --apple-style-table-td-first-child-text: #1c2833; --skeleton-gradient-from: #eee; --skeleton-gradient-via: #f5f5f5; --skeleton-gradient-to: #eee; --card-image-fallback-bg: #e64e33; --saved-exhibitions-actions-bg: #ffe45c; --saved-exhibitions-actions-text: #3c352e; --saved-exhibitions-actions-link-text: #333; --prenumerera-h3-color: #787878; --prenumerera-bg: #fff; --info-column-statistik-bg: #ed9082; --info-column-lorum-ipsum-bg: #eb8170; --info-column-uppdateringar-bg: #e6614c; --info-column-text-color: #fff; --info-column-p-color: #444; --info-column-h2-color: #000; --simplebutton2-bg: #fff; --simplebutton2-text: #333; --scrolltotop-bg: #e0e0e0; --scrolltotop-text: #000; --card-content-h3-color: #474747; --card-meta-color: #4c4c4c; --card-days-left-color: #000; --card-days-left-before-bg: gray; --popup-info-h3-color: #2f2f2f; --popup-info-p-color: #000; --save-btn-bg: #ffffff; --save-btn-text: #000; --save-btn-saved-bg: var(--malmo-yellow); --save-btn-saved-text: #333; --save-btn-saved-border: #fec938; --index-p-color: #333; --index-view-placeholder-text-color: #777; --popup-overlay-bg: #00000080; --popup-index-list-h3-color: var(--primary); --popup-index-content-large-bg: #fdfdfd; --media-info-column-border: #0000000d; --no-saved-message-color: #555; --link-color: var(--malmo-blue); --link-hover-color: #c0392b; --transition-duration: .3s; --transition-timing-function: ease; --highlight: #d8d8d8; --controls-bg: #fafafa; --controls-border: #fff; --sort-btn-bg: #fff; --sort-btn-text: #222; --sort-btn-active-bg: var(--malmo-blue); --sort-btn-active-text: #fff; --focus-ring-color: #005bc44d; --bg-dark: #1a1a1a; --text-dark: #e0e0e0; --muted-dark: #888; --controls-bg-dark: #252525; --controls-border-dark: #383838; --sort-btn-bg-dark: #333; --sort-btn-text-dark: #e0e0e0; --highlight-dark: #4a4a4a; --focus-ring-color-dark: #007bff66; --sorting-div-border-radius: 12px; --control-element-border-radius: 10px; --control-padding-vertical: 10px; --control-padding-horizontal: 16px; --control-gap: 18px; --font-family-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --list-item-hover-bg: #f9f9f9 } body.dark-theme { --primary: #fff; --bg: #1B1C1D; --text: #e0e0e0; --muted: #a0a0a0; --card-bg: #272A2C; --links-bg: #282828; --links-border: #383838; --popup-bg: #222; --popup-text: #e0e0e0; --popup-content-substack-bg: #2a2a2a; --apple-style-table-bg: #1c1c1c; --apple-style-table-header-bg: #252525; --apple-style-table-header-text: silver; --apple-style-table-border: #303030; --apple-style-table-td-border: #303030; --apple-style-table-row-even-bg: #222; --apple-style-table-row-hover-bg: #333; --apple-style-table-td-first-child-text: var(--text); --skeleton-gradient-from: #333; --skeleton-gradient-via: #444; --skeleton-gradient-to: #333; --card-image-fallback-bg: #5a2015; --saved-exhibitions-actions-bg: #4d441c; --saved-exhibitions-actions-text: #e0e0e0; --saved-exhibitions-actions-link-text: #f0f0f0; --prenumerera-h3-color: var(--muted); --prenumerera-bg: var(--bg); --info-column-statistik-night-bg: #5c5c5c; --info-column-lorum-ipsum-night-bg: #525252; --info-column-uppdateringar-night-bg: #3d3d3d; --info-column-p-color: #bbb; --info-column-h2-color: var(--text); --simplebutton2-bg: #444; --simplebutton2-text: var(--text); --scrolltotop-bg: #555; --scrolltotop-text: var(--text); --card-content-h3-color: #b0b0b0; --card-meta-color: #a9a9a9; --card-days-left-color: var(--text); --card-days-left-before-bg: #555; --popup-info-h3-color: #d0d0d0; --popup-info-p-color: var(--text); --save-btn-bg: #555; --save-btn-text: var(--text); --save-btn-saved-bg: var(--malmo-yellow); --save-btn-saved-text: #000; --save-btn-saved-border: #715100; --index-p-color: var(--muted); --index-view-placeholder-text-color: var(--muted); --popup-overlay-bg: #000000b3; --popup-index-list-h3-color: var(--text); --popup-index-content-large-bg: var(--popup-bg); --media-info-column-border: #ffffff1a; --no-saved-message-color: var(--muted); --top-box-night-bg: #2D2D2D; --link-color: #fff; --link-hover-color: #f0f0f0; --bg: var(--bg-dark); --text: var(--text-dark); --muted: var(--muted-dark); --controls-bg: var(--controls-bg-dark); --controls-border: var(--controls-border-dark); --sort-btn-bg: var(--sort-btn-bg-dark); --sort-btn-text: var(--sort-btn-text-dark); --highlight: var(--highlight-dark); --focus-ring-color: var(--focus-ring-color-dark); --save-btn-saved-border: var(--malmo-yellow); --list-item-hover-bg: #2c2c2c } body.dark-theme .wavy, body.dark-theme .wavy:visited { color: #fff } body.dark-theme a { color: #fff } body.dark-theme a:hover { color: #f0f0f0 } body.dark-theme .vernissage-text a, body.dark-theme .vernissage-text-list a { color: #fff } body.dark-theme .site-footer a { color: #fff } body.dark-theme .popup-info a { color: #fff } body.dark-theme .apple-style-table td a { color: #fff } body.dark-theme .apple-style-table td a:hover { color: #f0f0f0 } body.dark-theme a.stat-display-link, body.dark-theme a.stat-display-link:link, body.dark-theme a.stat-display-link:visited, body.dark-theme a.stat-display-link:hover, body.dark-theme a.stat-display-link:active, body.dark-theme a.stat-display-link:focus { color: #fff } body.dark-theme #generateMapLinkBtn { color: #fff; text-decoration-color: #fff } body.dark-theme .read-more-link { background-color: var(--malmo-red); color: #fff } body.dark-theme .open-popup-btn { background-color: var(--malmo-blue); color: #fff } body.dark-theme .list-action-btn img { filter: brightness(0) invert(1) } body.dark-theme .free-admission-info img[src="assets/icons/unlock.svg"] { filter: invert(1) } body.dark-theme .paid-admission-info img[src="assets/icons/lock.svg"] { filter: invert(1) } body.dark-theme #popup-substack .popup-content-substack { background-color: #fff; color: #030303 } body.dark-theme #show-map-btn img { filter: brightness(0) invert(1); } #map-container { outline: none; } /* NY CSS FÖR ANPASSAD KARTMARKÖR (FÖR MAPLIBRE OCKSÅ) */ .my-custom-map-marker { background-color: var(--malmo-blue); border: 2px solid white; border-radius: 50%; width: 18px; height: 18px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); display: flex; justify-content: center; align-items: center; transition: transform 0.1s ease-out; cursor: pointer; } .my-custom-map-marker:hover { transform: scale(1.2); } .my-custom-map-marker::after { content: ''; width: 6px; height: 6px; background-color: white; border-radius: 50%; } body.dark-theme .my-custom-map-marker { background-color: var(--malmo-yellow); border-color: #333; } body.dark-theme .my-custom-map-marker::after { background-color: #333; } /* SLUT PÅ NY CSS */ /* MapLibre popup styling (optional, can be customized further) */ .maplibregl-popup-content { font-family: var(--font-family-main); padding: 10px 12px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); background-color: var(--popup-bg); color: var(--popup-text); font-size: 0.95rem; } .maplibregl-popup-content b { font-weight: 600; color: var(--text); } .maplibregl-popup-content a { color: var(--link-color); text-decoration: none; } .maplibregl-popup-content a:hover { text-decoration: underline; } .maplibregl-popup-close-button { color: var(--muted); font-size: 1.5rem; padding: 0 5px; } body.dark-theme .maplibregl-popup-content { background-color: var(--popup-bg); color: var(--popup-text); } body.dark-theme .maplibregl-popup-content b { color: var(--text); } body.dark-theme .maplibregl-popup-content a { color: var(--link-color); } body.dark-theme .maplibregl-popup-close-button { color: var(--muted); } body { font-family: var(--font-family-main); background-color: var(--bg); color: var(--text); margin: 0; padding: 0 20px; box-sizing: border-box; transition: background-color .3s ease, color .3s ease } .sorting-controls-container { width: 100%; max-width: 1250px; margin: 0 auto 3rem; background-color: #ed9082; border-bottom-left-radius: 33px; border-bottom-right-radius: 25px; padding: 5px 24px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--control-gap); box-sizing: border-box; transition: background-color .3s ease, border-color .3s ease } .controls-left-group, .controls-right-group { display: flex; align-items: center; gap: var(--control-gap); flex-wrap: wrap } .form-group { display: flex; align-items: center; gap: 10px } .form-group label { font-size: .95rem; color: var(--muted); white-space: nowrap; transition: color .3s ease } .custom-select-wrapper { position: relative; display: inline-block } #sort-by-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; background-color: var(--sort-btn-bg); color: var(--sort-btn-text); border: 0px solid var(--controls-border); border-radius: var(--control-element-border-radius); font-size: 1rem; font-family: var(--font-family-main); cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; min-width: 200px; box-sizing: border-box; padding: var(--control-padding-vertical) 40px var(--control-padding-vertical) var(--control-padding-horizontal) } .custom-select-wrapper::after { content: ''; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; pointer-events: none; transition: filter .3s ease } body.dark-theme .custom-select-wrapper::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbbbbb'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") } #sort-by-select:hover { background-color: var(--highlight); border-color: #bbb } body.dark-theme #sort-by-select:hover { border-color: #555 } #sort-by-select:focus { outline: 2px solid var(--malmo-blue); outline-offset: 1px; border-color: var(--malmo-blue); box-shadow: 0 0 0 2px var(--focus-ring-color) } .filter-chip-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 260px } .btn-chip { padding: 11px 18px; font-size: .9rem; font-family: var(--font-family-main); border-radius: 999px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--controls-border); background-color: var(--sort-btn-bg); color: var(--sort-btn-text); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px } .btn-chip .chip-check-icon { display: none } .btn-chip.active .chip-check-icon { display: inline-block } .btn-chip.active { background-color: var(--sort-btn-active-bg); color: var(--sort-btn-active-text); border-color: var(--sort-btn-active-bg) } .btn-chip:hover { background-color: var(--highlight); border-color: #bbb } .btn-chip.active { background-color: var(--sort-btn-active-bg); color: var(--sort-btn-active-text); border-color: var(--sort-btn-active-bg) } .btn-chip.active:hover { background-color: #004a9e; border-color: #004a9e } .btn-chip:focus { outline: 2px solid var(--malmo-blue); outline-offset: 1px; box-shadow: 0 0 0 2px var(--focus-ring-color) } .btn-chip.active:focus { box-shadow: 0 0 0 2px var(--focus-ring-color), inset 0 0 0 1px var(--sort-btn-active-text) } body.dark-theme .btn-chip { background-color: var(--sort-btn-bg-dark); color: var(--sort-btn-text-dark); border-color: var(--controls-border-dark) } body.dark-theme .btn-chip:hover { background-color: var(--highlight-dark); border-color: #555 } body.dark-theme .btn-chip.active { background-color: var(--sort-btn-active-bg); color: var(--sort-btn-active-text); border-color: var(--sort-btn-active-bg) } body.dark-theme .btn-chip.active:hover { background-color: #007bff; border-color: #007bff } .btn { padding: var(--control-padding-vertical) var(--control-padding-horizontal); font-size: 1rem; font-family: var(--font-family-main); border-radius: var(--control-element-border-radius); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--controls-border); background-color: var(--sort-btn-bg); color: var(--sort-btn-text); font-weight: 500 } .btn:hover { background-color: var(--highlight) } body.dark-theme .btn:hover { border-color: #555 } .btn:active { background-color: var(--highlight); filter: brightness(0.95); box-shadow: inset 0 1px 1px #0000000d } .btn:focus { outline: 2px solid var(--malmo-blue); outline-offset: 1px; border-color: var(--malmo-blue); box-shadow: 0 0 0 2px var(--focus-ring-color) } .btn-show-saved.active-saved { background-color: var(--malmo-yellow); color: var(--saved-exhibitions-actions-text); border-color: var(--save-btn-saved-border) } .btn-show-saved.active-saved:hover { filter: brightness(0.95) } body.dark-theme .btn-show-saved.active-saved { color: #3c352e; border-color: #bf8901 } .btn-icon { background-color: #fafafa; color: var(--sort-btn-text); border: 0 solid var(--controls-border); padding: calc(var(--control-padding-vertical) - 2px); border-radius: var(--control-element-border-radius); line-height: 0; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box } .btn-icon svg, .btn-icon img { width: 22px; height: 22px; display: block } .btn-icon svg { stroke: currentColor; fill: currentColor } .btn-icon:hover { background-color: var(--highlight) } body.dark-theme .btn-icon:hover { border-color: #555 } .btn-icon.active { background-color: #eee; color: var(--sort-btn-active-text); border: none } body.dark-theme .btn-icon.active { background-color: #333; color: #bbb } body.dark-theme .layout-btn img { filter: brightness(0) invert(1) } .btn-icon.active svg { stroke: var(--sort-btn-active-text); fill: var(--sort-btn-active-text) } .btn-icon.active:hover { filter: brightness(0.9) } body.dark-theme .btn-icon { background-color: #252525 } body.dark-theme .btn-icon.active { background-color: #333 } .theme-toggle-btn .theme-icon-moon { display: none } body.dark-theme .theme-toggle-btn .theme-icon-sun { display: none } body.dark-theme .theme-toggle-btn .theme-icon-moon { display: block } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0 } :root { --radio-switch-width: 290px; --radio-switch-height: 44px; --radio-switch-padding: 3px; --radio-switch-radius: var(--control-element-border-radius); --radio-switch-animation-duration: .2s; --radio-switch-bg-color-light: var(--controls-border); --radio-switch-marker-bg-color-light: var(--malmo-blue); --radio-switch-text-color-light: var(--sort-btn-text); --radio-switch-active-text-color-light: #fff; --radio-switch-focus-shadow-light: var(--focus-ring-color); --radio-switch-bg-color-dark: var(--controls-border-dark); --radio-switch-marker-bg-color-dark: var(--malmo-yellow); --radio-switch-text-color-dark: var(--sort-btn-text-dark); --radio-switch-active-text-color-dark: var(--saved-exhibitions-actions-text); --radio-switch-focus-shadow-dark: var(--focus-ring-color-dark) } .radio-switch { position: relative; display: inline-flex; padding: var(--radio-switch-padding); border-radius: calc(var(--radio-switch-radius) * 1.2); background-color: var(--radio-switch-bg-color-light); transition: background-color .3s ease; width: var(--radio-switch-width); box-sizing: border-box } body.dark-theme .radio-switch { background-color: var(--radio-switch-bg-color-dark) } .radio-switch:focus-within, .radio-switch:active { box-shadow: 0 0 0 2px var(--radio-switch-focus-shadow-light) } body.dark-theme .radio-switch:focus-within, body.dark-theme .radio-switch:active { box-shadow: 0 0 0 2px var(--radio-switch-focus-shadow-dark) } .radio-switch__item { position: relative; flex: 1; height: calc(var(--radio-switch-height) - 2 * var(--radio-switch-padding)); display: flex; align-items: center; justify-content: center } .radio-switch__label { position: relative; z-index: 2; display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; border-radius: var(--radio-switch-radius); cursor: pointer; font-size: .9rem; font-weight: 500; color: var(--radio-switch-text-color-light); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: color var(--radio-switch-animation-duration) ease; text-align: center; padding: 0 5px; box-sizing: border-box; line-height: 1.2 } body.dark-theme .radio-switch__label { color: var(--radio-switch-text-color-dark) } .radio-switch__input:checked+.radio-switch__label { color: var(--radio-switch-active-text-color-light) } body.dark-theme .radio-switch__input:checked+.radio-switch__label { color: var(--radio-switch-active-text-color-dark) } .radio-switch__input:focus-visible+.radio-switch__label {} .radio-switch__marker { position: absolute; z-index: 1; top: 0; left: -100%; border-radius: var(--radio-switch-radius); background-color: var(--radio-switch-marker-bg-color-light); height: 100%; width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.08); transition: transform var(--radio-switch-animation-duration) ease, background-color .3s ease } body.dark-theme .radio-switch__marker { background-color: var(--radio-switch-marker-bg-color-dark) } .radio-switch__item:nth-child(2)>.radio-switch__input:checked~.radio-switch__marker { transform: translateX(100%) } .mobile-saved-toggle-container { display: flex; justify-content: center; width: auto } @media (max-width: 1150px) { .sorting-controls-container { flex-direction: column; align-items: stretch; padding: 16px } .controls-left-group { flex-direction: column; align-items: stretch; width: 100% } .controls-left-group>.form-group, .controls-left-group>.filter-chip-group, .custom-select-wrapper, #sort-by-select { width: 100%; box-sizing: border-box } .mobile-saved-toggle-container { width: 100% } .filter-chip-group { justify-content: flex-start } .controls-right-group { width: 100%; justify-content: flex-end; margin-top: var(--control-gap) } } @media (max-width: 480px) { .filter-chip-group { flex-direction: column; align-items: stretch; gap: 10px } .btn-chip { width: 100%; box-sizing: border-box } .controls-left-group, .controls-right-group { gap: 14px } } body { margin: 0; font-family: var(--font-family-main); background-color: var(--bg); color: var(--text); padding-left: 1rem; padding-right: 1rem; box-sizing: border-box; transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function) } .section { padding: 0; max-width: 1200px; margin: 0 auto } .section-info { max-width: 1250px; margin: 0 auto } .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; grid-auto-rows: minmax(420px, auto) } .card { border-radius: 1.5rem; background-color: var(--card-bg); box-shadow: 0 8px 24px #0000000d; transition: background-color var(--transition-duration) var(--transition-timing-function), transform .2s ease, box-shadow .2s ease; overflow: hidden; min-height: 420px; display: flex; flex-direction: column; height: 100%; box-sizing: border-box } body.dark-theme .card { box-shadow: 0 8px 24px #0003 } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px #00000014 } body.dark-theme .card:hover { box-shadow: 0 12px 32px #0000004d } .card-image { position: relative; width: 100%; height: 180px; background-color: var(--card-image-fallback-bg) } .card-image::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #0000; z-index: 1; pointer-events: none; transition: background-color var(--transition-duration) var(--transition-timing-function) } body.dark-theme .card-image::after { background-color: #0003 } .card-content { padding: 2rem 2rem 0; display: flex; flex-direction: column; flex-grow: 1; box-sizing: border-box; min-height: 0 } .card-content .days-left { margin-top: 2rem; margin-bottom: 1rem } .card-content .image-credit { margin-bottom: 1rem } .card-content h3 { margin-top: 0; font-size: 1.25rem; margin-bottom: .25rem; color: var(--card-content-h3-color); transition: color var(--transition-duration) var(--transition-timing-function) } .exhibition-title { font-size: 1.35rem; font-weight: 600; margin: .5rem 0; color: var(--text); transition: color var(--transition-duration) var(--transition-timing-function) } .artists { font-size: 1.35rem; font-weight: 400; margin: .25rem 0; padding-bottom: 0; color: var(--card-meta-color); transition: color var(--transition-duration) var(--transition-timing-function) } .card-content p { margin: .2rem 0 } .adress { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 400; margin-top: .25rem; padding-bottom: 1rem; color: var(--card-meta-color); transition: color var(--transition-duration) var(--transition-timing-function) } .date-range-display { display: flex; align-items: center; gap: .5rem; font-size: 1.35rem; font-weight: 400; margin-top: .25rem; color: var(--card-meta-color); transition: color var(--transition-duration) var(--transition-timing-function) } .days-left, .vernissage-info { display: flex; align-items: flex-start } .days-left::before, .vernissage-info::before { flex-shrink: 0; width: 20px; margin-right: .5rem; display: flex; align-items: center; justify-content: center } .days-left::before { content: ""; height: 20px; background-color: var(--card-days-left-before-bg); border-radius: 50%; transition: background-color var(--transition-duration) var(--transition-timing-function) } .vernissage-info::before { content: "→"; font-size: 1.3em; color: inherit; height: 1.2em } .days-left { display: flex; width: 100%; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 500; margin-top: 1rem; color: var(--card-days-left-color); transition: color var(--transition-duration) var(--transition-timing-function) } .days-left.open::before { background-color: #4caf50 } .days-left.upcoming::before { background-color: #fbc02d } .days-left.closed::before { background-color: var(--malmo-red) } .vernissage-info { margin-top: 1rem; font-size: 1.1rem; color: var(--text); display: flex; align-items: center; gap: .5rem; font-weight: 500; align-items: flex-start; transition: color var(--transition-duration) var(--transition-timing-function) } .vernissage-text { line-height: 1.6 } .vernissage-text a { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--link-color) } .links { margin-top: auto; background-color: var(--links-bg); border-top: 1px solid var(--links-border); margin-left: -2rem; margin-right: -2rem; padding: 1.5rem 2rem; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; transition: background-color var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function) } .links a, .links button { white-space: nowrap; flex-shrink: 0 } .card-content .links { min-width: 0 } .wavy { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; color: var(--link-color) } .wavy:visited { color: var(--link-color) } p.capitalize { text-transform: capitalize } .site-footer { background-color: var(--malmo-red); width: 100%; max-width: 1250px; padding: 100px 20px; box-sizing: border-box; color: #fff; border-radius: 1.5rem; transition: background-color var(--transition-duration) var(--transition-timing-function); margin: 4rem auto 2rem } .site-footer span { text-underline-offset: 3px } .site-footer a { color: #fff; text-underline-offset: 3px } .site-footer p { margin: 0 } body.dark-theme .site-footer { background-color: var(--top-box-night-bg) } .popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--popup-overlay-bg); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; box-sizing: border-box; transition: background-color var(--transition-duration) var(--transition-timing-function) } .popup-content, .popup-content-substack { background: var(--popup-bg); padding: 2rem; border-radius: 1rem; max-width: 500px; width: auto; margin: 1.5rem; text-align: left; position: relative; color: var(--popup-text); transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function) } .popup-content-substack { background: var(--popup-content-substack-bg); padding: 1rem; max-width: calc(100% - 3rem) } .popup-card { background-color: var(--card-bg); border-radius: 2rem; box-shadow: 0 12px 32px #00000026; max-width: 600px; width: 100%; display: flex; /* Behålls för vertikal layout av karta + info */ flex-direction: column; /* Behålls */ transition: background-color var(--transition-duration) var(--transition-timing-function); max-height: 85vh; /* NYTT: Begränsa maxhöjden */ overflow-y: auto; /* NYTT: Tillåt scrollning för hela kortet */ } body.dark-theme .popup-card { box-shadow: 0 12px 32px #0006 } .popup-map-placeholder, .popup-map { width: 100%; height: 200px; display: block; border: 0; flex-shrink: 0; } /* flex-shrink: 0 så kartan inte krymper */ .popup-info { padding: 2rem; /* overflow-y, flex-grow, min-height borttagna för scrollning */ } .popup-info a { text-underline-offset: 3px; color: var(--link-color) } .popup-info h3 { margin-top: 0; font-size: 1.5rem; font-weight: 600; color: var(--popup-info-h3-color); transition: color var(--transition-duration) var(--transition-timing-function) } .popup-info p { margin: 1rem 0; font-size: 1.1rem; color: var(--popup-info-p-color); transition: color var(--transition-duration) var(--transition-timing-function) } .popup-about-text-style { font-size: 1.15rem; line-height: 1.5; margin-top: 0.5rem; margin-bottom: 1.5rem; color: var(--popup-info-p-color); transition: color var(--transition-duration) var(--transition-timing-function); } .popup-info hr { border: none; height: 1px; background-color: var(--links-border); margin: 0 0 1.5rem 0; transition: background-color var(--transition-duration) var(--transition-timing-function); } body.dark-theme .popup-info hr { background-color: var(--links-border); } .close-btn { position: absolute; top: 1rem; right: 1.5rem; font-size: 2rem; color: var(--malmo-red); cursor: pointer; background: none; border: none } .close-popup-btn, .open-popup-btn { background-color: var(--malmo-blue); color: #fff; border: none; padding: .75rem 1.5rem; border-radius: 10px; font-size: 1rem; cursor: pointer; transition: background-color .2s ease; text-decoration: none; } .close-popup-btn { width: 100%; margin-top: 1rem } .open-popup-btn { padding: .75rem 1rem; margin-right: .75rem } .save-btn { background-color: var(--save-btn-bg); color: var(--save-btn-text); border: 0 solid #aaa; border-radius: 10px; padding: .75rem 1.25rem; font-size: 1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function); margin: 0 .75rem 0 0 } .save-btn.saved { background-color: var(--save-btn-saved-bg); border-color: var(--save-btn-saved-border); color: var(--save-btn-saved-text) } .image-credit { font-size: .8rem; color: var(--muted); transition: color var(--transition-duration) var(--transition-timing-function) } .read-more-link { display: inline-block; padding: .75rem; border-radius: 10px; background-color: var(--malmo-red); color: #fff; font-size: 1rem; text-decoration: none; max-width: 100%; overflow-wrap: break-word; white-space: normal; text-align: center; border: none; cursor: pointer; transition: background-color var(--transition-duration) var(--transition-timing-function) } .skeleton { background: linear-gradient(90deg, var(--skeleton-gradient-from), var(--skeleton-gradient-via), var(--skeleton-gradient-to)); background-size: 400% 400%; animation: shimmer 1.5s infinite; min-height: 420px; border-radius: 1.5rem } .apple-style-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 1rem; color: var(--text); background-color: var(--apple-style-table-bg); transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function) } .apple-style-table thead th { background-color: var(--apple-style-table-header-bg); color: var(--apple-style-table-header-text); font-weight: 600; padding: 14px 16px; text-align: left; border-bottom: 2px solid var(--apple-style-table-border); white-space: nowrap; transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function) } .apple-style-table td { padding: 12px 16px; border-bottom: 1px solid var(--apple-style-table-td-border); vertical-align: middle; white-space: nowrap; transition: border-color var(--transition-duration) var(--transition-timing-function) } .apple-style-table tbody tr:last-child td { border-bottom: none } .apple-style-table tbody tr:nth-child(even) { background-color: var(--apple-style-table-row-even-bg); transition: background-color var(--transition-duration) var(--transition-timing-function) } .apple-style-table tbody tr:hover { background-color: var(--apple-style-table-row-hover-bg); transition: background-color var(--transition-duration) var(--transition-timing-function) } .apple-style-table tbody td:first-child { font-weight: 500; color: var(--apple-style-table-td-first-child-text); transition: color var(--transition-duration) var(--transition-timing-function) } .apple-style-table td a { color: var(--link-color); text-decoration: underline; font-weight: 500; transition: color .15s ease } .apple-style-table td a:hover { text-decoration: underline; color: var(--link-hover-color) } #popup-index-list .popup-content-large { background-color: var(--popup-index-content-large-bg); box-shadow: 0 10px 40px #0000001f; border-radius: 12px; transition: background-color var(--transition-duration) var(--transition-timing-function), box-shadow var(--transition-duration) var(--transition-timing-function) } body.dark-theme #popup-index-list .popup-content-large { box-shadow: 0 10px 40px #00000080 } #popup-index-list h3 { font-size: 1.7rem; color: var(--popup-index-list-h3-color); font-weight: 600; padding-bottom: .8rem; margin-bottom: 1.8rem; transition: color var(--transition-duration) var(--transition-timing-function); text-align: center } @keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } } .index-p { font-size: 1.2em; color: var(--index-p-color); font-weight: 500; margin: 2rem 0 3rem; transition: color var(--transition-duration) var(--transition-timing-function) } @media (max-width:880px) { .links { flex-direction: column; align-items: stretch; gap: 1.25rem; padding: 2rem 1.5rem } .links .save-btn, .links .links-right-group { width: 100% } .links-right-group { flex-direction: column; align-items: stretch; gap: 1rem } .links .open-popup-btn, .links .read-more-link { width: 100%; text-align: center; margin: 0 0 .5rem } } @media (max-width:700px) { .site-footer { font-size: .9rem } .grid { grid-template-columns: 1fr } .section:first-of-type { padding-bottom: 1rem } .section:nth-of-type(2) { padding-top: 1rem } .popup-content { margin: 0.5rem; padding: 1rem } #popup-map-view .popup-content.popup-content-large { margin: 0.5rem; } } @media (max-width:600px) { .popup-content { max-width: calc(100% - 3rem) } .popup-card { max-width: 100% } /* Ändrad: hela .popup-card ska kunna scrolla, inte bara .popup-info */ .links button { width: 100% } } .info-columns-container { display: flex; gap: 0; margin-bottom: 1rem } .info-column { flex: 1; padding: 2.5rem 2.5rem 2rem; box-sizing: border-box; border: none; display: flex; flex-direction: column; color: var(--info-column-text-color); transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function) } .prenumerera { background-color: var(--prenumerera-bg); padding: 1rem 0; margin-bottom: 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; align-items: stretch; transition: background-color var(--transition-duration) var(--transition-timing-function) } .prenumerera h3 { width: 100%; text-align: center; margin-bottom: 1rem; font-weight: 400; font-size: 1.2em; color: var(--prenumerera-h3-color); transition: color var(--transition-duration) var(--transition-timing-function) } .info-column.uppdateringar { background-color: var(--info-column-uppdateringar-bg); border-radius: 0 0 1.5rem 0 } .info-column.statistik { background-color: var(--info-column-statistik-bg); border-radius: 0 0 0 1.5rem } .info-column.lorum-ipsum { background-color: var(--info-column-lorum-ipsum-bg) } body.dark-theme .info-column.statistik { background-color: var(--info-column-statistik-night-bg) } body.dark-theme .info-column.lorum-ipsum { background-color: var(--info-column-lorum-ipsum-night-bg) } body.dark-theme .info-column.uppdateringar { background-color: var(--info-column-uppdateringar-night-bg) } .info-column h2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 1.2rem; font-weight: 400; color: var(--info-column-h2-color); line-height: 1.25; margin-top: 0; text-align: left; transition: color var(--transition-duration) var(--transition-timing-function) } .info-column p { font-size: .95rem; line-height: 1.65; color: var(--info-column-p-color); margin-bottom: 2rem; text-align: left; transition: color var(--transition-duration) var(--transition-timing-function) } .info-column p:last-of-type { margin-bottom: 0 } .info-column a { color: var(--link-color); text-decoration: none; font-weight: 500 } .card.keyboard-active, .list-item.keyboard-active { outline: 3px solid var(--malmo-blue); outline-offset: 2px; box-shadow: 0 10px 25px #00000026 } body.dark-theme .card.keyboard-active, body.dark-theme .list-item.keyboard-active { box-shadow: 0 10px 25px #0006 } @media (max-width:768px) { .info-columns-container { flex-direction: column; gap: 1.5rem } .info-column { width: 100%; padding: 2rem; border-bottom: 1px solid var(--media-info-column-border) } .info-column h2 { font-size: 1.8rem } .info-column.uppdateringar { border-bottom-left-radius: 1.5rem !important; border-bottom-right-radius: 1.5rem !important; border-bottom: none } .popup-content-substack { padding: 1rem; max-width: calc(100% - 2rem); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box } .popup-overlay#popup-substack { padding: 1rem } } .red-top-box { background-color: var(--malmo-red); width: 100%; max-width: 1250px; padding: 30px; box-sizing: border-box; color: #fff; border-radius: 1.5rem 1.5rem 0 0; display: flex; align-items: center; justify-content: space-between; transition: background-color var(--transition-duration) var(--transition-timing-function); margin: 2rem auto 0 } body.dark-theme .red-top-box { background-color: var(--top-box-night-bg) } @media (max-width:1024px) { .red-top-box { padding: 25px 1.5rem; margin-top: 1.5rem; border-radius: 1rem 1rem 0 0 } .box-content-wrapper { gap: 15px } .box-logo { max-height: 120px } .box-text { font-size: 1.7rem; line-height: 1.25; max-width: 600px } .info-column { padding: 1.25rem; min-height: 80px } .stat-display { gap: .6em } .info-column.statistik .stat-display-number { font-size: 3.8rem } .info-column.statistik .stat-display-line1, .info-column.statistik .stat-display-line2 { font-size: 1.3rem } .info-column.lorum-ipsum .stat-display-number, .info-column.uppdateringar .stat-display-number { font-size: 3.2rem } .info-column.lorum-ipsum .stat-display-line1, .info-column.lorum-ipsum .stat-display-line2 { font-size: 1.1rem } .info-column.uppdateringar .stat-display-line1, .info-column.uppdateringar .stat-display-line2 { font-size: 1rem } } @media (max-width:768px) { .red-top-box { margin-left: 0; margin-right: 0; max-width: none; padding: 1.5rem 1rem; margin-top: 1rem; border-radius: 1rem 1rem 0 0 } .box-content-wrapper { flex-direction: column; align-items: center; text-align: center; gap: 10px } .box-logo { max-height: 100px; margin-bottom: .5rem } .box-text { font-size: 1.4rem; line-height: 1.3; margin-left: 0; max-width: 90% } .section-info { padding: 0 } .info-columns-container { flex-direction: column; gap: 0; margin-bottom: 0 } .info-column { width: 100%; padding: 1rem; min-height: auto; border-radius: 0 !important; border-bottom: 1px solid var(--media-info-column-border) } .info-column:last-child { border-bottom: none } .prenumerera { margin-bottom: 0; font-size: .9em; line-height: 200% } .stat-display { gap: .5em; padding: .5rem 0 } .info-column.statistik .stat-display-number, .info-column.lorum-ipsum .stat-display-number, .info-column.uppdateringar .stat-display-number { font-size: 2.8rem } .info-column.statistik .stat-display-line1, .info-column.statistik .stat-display-line2 { font-size: 1.1rem } .info-column.lorum-ipsum .stat-display-line1, .info-column.lorum-ipsum .stat-display-line2 { font-size: 1rem } .info-column.uppdateringar .stat-display-line1, .info-column.uppdateringar .stat-display-line2 { font-size: .9rem } } .box-content-wrapper { display: flex; align-items: center; gap: 20px; width: 100%; margin-left: auto; margin-right: auto } .box-logo { display: block; width: auto; height: auto; max-height: 120px; max-width: 120px; flex-shrink: 0; padding: 30px; box-sizing: content-box } .box-text { font-size: 1.9rem; font-weight: 300; line-height: 1.1; max-width: 700px; margin: 0 0 0 auto } .simplebutton2 { background-color: var(--simplebutton2-bg); color: var(--simplebutton2-text); border: 0 solid #333; padding: .75rem 1rem; border-radius: 999px; font-size: .8rem; cursor: pointer; transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function); margin-top: 20px } .popup-content-large { max-width: 900px; width: 90%; max-height: 80vh; overflow-y: auto } #popup-index-table-container .table-responsive-wrapper { max-height: 60vh; overflow-y: auto } .info-column { flex: 1; padding: 1.5rem; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; min-height: 90px; color: var(--info-column-text-color); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif } .stat-display { display: flex; align-items: center; gap: .7em; width: auto } .stat-display-number { font-weight: 600; line-height: .9; color: var(--info-column-text-color); font-size: 3.8rem } .stat-display-text { display: flex; flex-direction: column; line-height: 1.2 } .stat-display-line1, .stat-display-line2 { font-weight: 500; color: var(--info-column-text-color); display: block; font-size: 1.3rem } a.stat-display-link, a.stat-display-link:link, a.stat-display-link:visited, a.stat-display-link:hover, a.stat-display-link:active, a.stat-display-link:focus { color: var(--info-column-text-color); text-decoration: underline; font-weight: 500 } .info-column>h2 { display: none } .info-column.statistik .stat-display-number { font-size: 3.8rem } .info-column.statistik .stat-display-line1, .info-column.statistik .stat-display-line2 { font-size: 1.3rem } .info-column.lorum-ipsum .stat-display-number { font-size: 3.8rem } .info-column.lorum-ipsum .stat-display-line1, .info-column.lorum-ipsum .stat-display-line2 { font-size: 1.3rem } .info-column.uppdateringar .stat-display-number { font-size: 3.8rem } .info-column.uppdateringar .stat-display-line1, .info-column.uppdateringar .stat-display-line2 { font-size: 1.3rem } .info-column.uppdateringar .stat-display-line2 { line-height: 1.35 } #scrollToTopBtn { background-color: var(--malmo-blue); color: #fff; border: none; padding: .75rem 1.5rem; border-radius: 999px; font-size: 1rem; font-weight: 400; cursor: pointer; display: inline-block; transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function) } .prenumerera h3 { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } #saved-exhibitions-actions { padding: 1.1rem 1.5rem; background-color: var(--saved-exhibitions-actions-bg); border-radius: 16px; box-sizing: border-box; width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; transition: background-color var(--transition-duration) var(--transition-timing-function); margin: 1.5rem auto 2.5rem } #saved-exhibitions-actions h2 { font-size: 1.1rem; text-align: center; font-weight: 400; color: var(--saved-exhibitions-actions-text); margin: 0; line-height: 1.4; flex-shrink: 1; min-width: 0; transition: color var(--transition-duration) var(--transition-timing-function) } #generateMapLinkBtn { color: var(--saved-exhibitions-actions-link-text); font-weight: 500; border-radius: 10px; cursor: pointer; text-decoration: underline; text-decoration-color: var(--saved-exhibitions-actions-link-text); border: none; transition: color var(--transition-duration) var(--transition-timing-function), text-decoration-color var(--transition-duration) var(--transition-timing-function); flex-shrink: 0; white-space: nowrap; margin: 0; display: inline-block } body.dark-theme #generateMapLinkBtn { text-decoration-color: var(--saved-exhibitions-actions-link-text) } @media (max-width:680px) { #saved-exhibitions-actions { flex-direction: column; align-items: center; padding-left: 1rem; padding-right: 1rem } #saved-exhibitions-actions h2 { text-align: center; white-space: normal; width: 100% } #generateMapLinkBtn { width: 100%; text-align: center; display: block } } #no-saved-message { color: var(--no-saved-message-color); transition: color var(--transition-duration) var(--transition-timing-function) } .list-view { display: flex; flex-direction: column; gap: 0; margin-top: 1rem } .list-item { display: grid; grid-template-columns: 50px 2.5fr 1.5fr 1.5fr auto; gap: 1rem; align-items: center; padding: .8rem 1rem; background-color: var(--bg); border-bottom: 1px solid var(--controls-border); transition: background-color var(--transition-duration) var(--transition-timing-function); font-size: 1rem; min-height: 70px } .list-item:last-child { border-bottom: none } .list-item:hover { background-color: var(--list-item-hover-bg) } .list-item-image-container { width: 40px; height: 40px; flex-shrink: 0; background-color: var(--card-image-fallback-bg); border-radius: .3rem; overflow: hidden; display: flex; align-items: center; justify-content: center } .list-item-image-container img { width: 100%; height: 100%; object-fit: cover } .list-item-details-main { display: flex; flex-direction: column; justify-content: center; min-width: 0 } .list-item-details-main .exhibition-title-list { font-size: 1.05rem; font-weight: 500; color: var(--text); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .list-item-details-main .artists-list { font-size: 1rem; color: var(--muted); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px } .list-item-gallery-name { display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-right: .5rem; } .list-item-gallery-name-text { font-size: 1rem; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list-item-gallery-address { font-size: 0.9rem; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } .list-item-dates { display: flex; flex-direction: column; justify-content: center; font-size: .95rem; color: var(--text); min-width: 0 } .list-item-interval, .list-item-days-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 } .list-item-days-left { font-size: .9rem; margin-top: 2px; color: var(--card-days-left-color); display: flex; align-items: center } .list-item-days-left::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; flex-shrink: 0; background-color: var(--card-days-left-before-bg); transition: background-color var(--transition-duration) var(--transition-timing-function) } .list-item-days-left.open::before { background-color: #4caf50 } .list-item-days-left.upcoming::before { background-color: #fbc02d } .list-item-days-left.closed::before { background-color: var(--malmo-red) } .list-item-days-left.closing-today::before { background-color: #fbc02d } .list-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: .3rem } .list-action-btn { background-color: transparent; color: var(--muted); border: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: background-color .2s ease, color .2s ease } .list-action-btn:hover { background-color: #0000000d; color: var(--text) } body.dark-theme .list-action-btn:hover { background-color: #ffffff1a; color: var(--primary) } .list-action-btn svg { width: 20px; height: 20px; fill: currentColor } .list-action-btn.save-btn-list.saved svg { fill: var(--malmo-yellow) } body.dark-theme .list-action-btn.save-btn-list.saved svg { fill: var(--malmo-yellow) } .list-action-btn.open-popup-btn-list, .list-action-btn.read-more-link-list { background-color: transparent; color: var(--muted) } .list-action-btn.open-popup-btn-list:hover, .list-action-btn.read-more-link-list:hover { background-color: #0000000d; color: var(--text) } body.dark-theme .list-action-btn.open-popup-btn-list, body.dark-theme .list-action-btn.read-more-link-list { color: var(--muted) } body.dark-theme .list-action-btn.open-popup-btn-list:hover, body.dark-theme .list-action-btn.read-more-link-list:hover { background-color: #ffffff1a; color: var(--primary) } @media (max-width: 1024px) { .list-item { grid-template-columns: 40px 2fr 1.5fr 1.5fr auto; gap: .8rem; padding: .7rem .9rem; font-size: .98rem } .list-item-image-container { width: 35px; height: 35px } .list-item-details-main .exhibition-title-list { font-size: 1.02rem } .list-item-details-main .artists-list { font-size: .88rem } .list-item-gallery-name-text { font-size: .98rem } .list-item-gallery-address { font-size: 0.88rem; } .list-item-dates { font-size: .92rem } .list-item-days-left { font-size: .88rem } } @media (max-width: 700px) { .list-item { grid-template-columns: 40px 1fr auto; padding: .75rem; min-height: 60px } .list-item-gallery-name, .list-item-dates { display: none } .list-item-details-main { text-align: left } .list-item-actions { justify-content: flex-end; gap: .2rem } .list-action-btn { width: 30px; height: 30px } .list-action-btn svg { width: 18px; height: 18px } } /* NY CSS FÖR GALLERIETS UNDERSIDA */ .gallery-detail-page { max-width: 1200px; margin: 0 auto; padding: 1rem 20px 3rem; /* Justera padding vid behov */ } .breadcrumb-container { padding: 1rem; margin-bottom: 0rem; font-size: 1.1rem; } .breadcrumb { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; /* Tillåter brytning på små skärmar */ gap: 0.3rem 0.5rem; /* Radgap och kolumngap */ color: var(--muted); } .breadcrumb-item a { color: var(--link-color); text-decoration: none; } .breadcrumb-item a:hover { text-decoration: underline; } .breadcrumb-item.active { color: var(--text); font-weight: 500; } .breadcrumb-item+.breadcrumb-item::before { content: "›"; /* Smalare chevron */ padding-left: 0.2rem; /* Lite utrymme före */ padding-right: 0.5rem; /* Lite utrymme efter */ color: var(--muted); font-weight: normal; /* Behåll normal vikt eller justera */ } .gallery-info-section { margin-bottom: 3rem; } .gallery-header h1 { font-size: clamp(2.16rem, 6vw, 2.64rem); font-weight: 600; margin-bottom: 1.5rem; color: var(--text); } .gallery-content-grid { display: grid; grid-template-columns: 1fr; /* ÄNDRAD: Staplar .gallery-main-content och .gallery-map */ gap: 2.5rem; /* Behåller vertikalt gap */ } /* Nytt: Stilar för .gallery-details för att arrangera beskrivning och metallista sida vid sida */ .gallery-details { display: grid; grid-template-columns: 2fr 1.2fr; /* Proportioner för beskrivning vs. metallista */ gap: 2.5rem; /* Gap mellan beskrivning och metallista */ align-items: start; /* Ser till att toppen av båda kolumnerna linjerar */ } .gallery-details .gallery-description { font-size: 1.3rem; line-height: 1.7; margin-top: 0; /* ADDED: Removes default top margin from paragraph */ margin-bottom: 2rem; color: var(--text); } .gallery-meta-list { list-style: none; padding: 0; margin: 0; font-size: 1rem; } .gallery-meta-list li { display: flex; align-items: flex-start; /* MODIFIED: Was 'center', now 'flex-start' for top alignment */ gap: 0.8rem; margin-bottom: 1rem; color: var(--text); font-size: 1.05rem; } .gallery-meta-list li .gallery-icon { /* För Unicode-ikonerna */ font-size: 1.3em; /* Justera storlek för Unicode-ikoner */ min-width: 24px; /* Säkerställ lite utrymme */ text-align: center; opacity: 0.8; } /* Om du använder för ikoner istället för span: */ .gallery-meta-list li img.gallery-icon-img { width: 22px; height: 22px; opacity: 0.8; /* flex-shrink: 0; Might be useful if icons vary in size and affect wrapping */ } body.dark-theme .gallery-meta-list li img.gallery-icon-img { filter: brightness(0) invert(1); /* Standard invertering för mörkt tema */ } .gallery-meta-list li a { color: var(--link-color); text-decoration: none; font-weight: 500; } .gallery-meta-list li a:hover { text-decoration: underline; } /* ÄNDRAD: Kartan på undersidan */ .gallery-map { /* Klassen för containern som nu är en fullbreddsrad */ width: 100%; } .gallery-map #gallery-detail-map { width: 100%; height: 350px; /* Explicit höjd för kartan */ /* min-height, max-height, height:100% borttagna för tydligare kontroll */ margin-top: 0; /* Tas bort, förälderns grid-gap hanterar avstånd */ border-radius: 0.5rem; background-color: var(--controls-border); border: 1px solid var(--controls-border); display: flex; align-items: center; justify-content: center; color: var(--muted); } .indexed-exhibitions-section h2 { font-size: clamp(1.5rem, 4vw, 1.8rem); /* Responsiv fontstorlek */ font-weight: 600; margin-bottom: 1.5rem; color: var(--text); padding-top: 1.5rem; margin-top: 2rem; } /* Anpassningar för mindre skärmar */ @media (max-width: 900px) { .gallery-content-grid { /* grid-template-columns: 1fr; Redan 1fr som standard */ gap: 2rem; /* Justera gapet för den yttre staplingen */ } /* Nytt: .gallery-details (beskrivning och metallista) staplas också */ .gallery-details { grid-template-columns: 1fr; gap: 1.5rem; /* Mindre gap när de är staplade */ } .gallery-details .gallery-description { margin-bottom: 0; /* Förlita dig på gapet i .gallery-details när staplat */ } .gallery-map #gallery-detail-map { height: 250px; /* Justera karthöjden för staplad layout, min-height kan också användas */ } } @media (max-width: 768px) { .gallery-info-section { margin-bottom: 2rem; } .indexed-exhibitions-section { margin-top: 1rem; } .indexed-exhibitions-section h2 { padding-top: 1rem; } } /* NYA OCH UPPDATERADE STILAR FÖR LISTVY */ .list-item { display: grid; /* Fyra kolumner: Titel, Artist, Datum, Status (dagar kvar) */ grid-template-columns: 3fr 2.5fr 2fr 2fr; /* Justera proportionerna efter behov */ gap: 1rem; /* Behåll eller justera gap */ align-items: center; /* Centrera innehållet vertikalt i varje cell */ padding: .8rem 1rem; background-color: var(--bg); border-bottom: 1px solid var(--controls-border); transition: background-color var(--transition-duration) var(--transition-timing-function); font-size: 1rem; min-height: auto; /* Ta bort eller minska fast min-height då bilden är borta */ } .list-item:last-child { border-bottom: none; } .list-item:hover { background-color: var(--list-item-hover-bg); } /* Ta bort eller sätt display:none för gamla element om de finns kvar i HTML av misstag */ .list-item-image-container, .list-item-details-main, /* Denna container-div togs bort från JS */ .list-item-gallery-name, .list-item-dates, /* Denna container-div togs bort från JS */ .list-item-actions { display: none; } /* Stilar för de nya direkta kolumnelementen */ .list-item-exhibition-title, .list-item-artists, .list-item-interval, .list-item-days-left { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; /* En gemensam radhöjd */ padding: 0.1rem 0; /* Lite vertikal padding inuti cellerna */ } .list-item-exhibition-title { font-size: 1.05rem; font-weight: 500; color: var(--text); } .list-item-artists { font-size: 0.95rem; color: var(--muted); } .list-item-interval { font-size: 0.9rem; color: var(--text); } .list-item-days-left { font-size: 0.9rem; color: var(--card-days-left-color); /* Säkerställ att denna variabel är korrekt */ display: flex; /* För att status-pricken ska linjera korrekt */ align-items: center; } /* Status-pricken (::before) bör fortfarande fungera som den är kopplad till .list-item-days-left */ .list-item-days-left::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; flex-shrink: 0; background-color: var(--card-days-left-before-bg); transition: background-color var(--transition-duration) var(--transition-timing-function); } .list-item-days-left.open::before { background-color: #4caf50; } .list-item-days-left.upcoming::before { background-color: #fbc02d; } .list-item-days-left.closed::before { background-color: var(--malmo-red); } .list-item-days-left.closing-today::before { background-color: #fbc02d; } /* Anpassningar för mindre skärmar */ @media (max-width: 1024px) { .list-item { /* Kan använda samma kolumn-setup eller justera fr-enheter något */ grid-template-columns: 3fr 2.5fr 1.8fr 1.8fr; gap: 0.8rem; padding: .7rem .9rem; font-size: 0.98rem; } .list-item-exhibition-title { font-size: 1rem; } .list-item-artists { font-size: 0.9rem; } .list-item-interval { font-size: 0.88rem; } .list-item-days-left { font-size: 0.88rem; } } @media (max-width: 950px) { .list-item { /* Ändrat till enkolumnslayout: varje direkt underordnat element blir en rad */ grid-template-columns: 1fr; padding: .75rem .85rem; /* Justerad padding */ gap: 0.4rem; /* Vertikalt mellanrum mellan staplade element */ min-height: auto; } .list-item-exhibition-title, .list-item-artists, .list-item-interval, .list-item-days-left { /* Tillåt texten att brytas och vara fullt synlig */ white-space: normal; /* Tillåt brytning */ overflow: visible; /* Visa allt innehåll */ text-overflow: clip; /* Ingen ellipsis */ } .list-item-exhibition-title { font-size: 0.95rem; font-weight: 500; } /* Något större typsnitt för titel */ .list-item-artists { font-size: 0.9rem; } .list-item-interval { font-size: 0.9rem; } .list-item-days-left { font-size: 0.9rem; } .list-item-days-left::before { margin-right: 5px; width: 7px; height: 7px; } /* Behåll styling för statusprick */ } /* SLUT PÅ NY CSS FÖR GALLERIETS UNDERSIDA */ .main-nav { display: flex; justify-content: center; margin: 1rem 0; } .main-nav ul { display: flex; gap: 2rem; list-style: none; padding: 0; margin: 2rem 0; justify-content: center; align-items: center; } .main-nav a { position: relative; padding: 0.5rem 1.5rem; text-decoration: none; color: var(--text-color); font-weight: 500; font-size: 1.1rem; /* ← justera denna rad */ border-radius: 2rem; transition: background-color 0.3s ease, color 0.3s ease; } .main-nav a::before { content: ''; position: absolute; top: -4px; bottom: -4px; left: -8px; right: -8px; background-color: #D6453A; /* röd färg */ border-radius: 2rem; z-index: -1; opacity: 0; transform: scale(0.8); transition: opacity 0.3s ease, transform 0.3s ease; } .main-nav a.active::before { opacity: 1; transform: scale(1); } .main-nav a.active { color: white; } .dropdown-filter-toggle { display: flex; align-items: center; width: 100%; justify-content: flex-start; /* Standard, men ändras nedan */ position: relative; background-color: var(--sort-btn-bg); color: var(--sort-btn-text); border: 0px solid var(--controls-border); border-radius: var(--control-element-border-radius); font-size: 1rem; font-family: var(--font-family-main); cursor: pointer; min-width: 200px; box-sizing: border-box; padding: var(--control-padding-vertical) 40px var(--control-padding-vertical) var(--control-padding-horizontal); transition: background-color .2s, border-color .2s, box-shadow .2s, color .2s; /* ↓ Denna gör att text och pil hamnar i varsin ände */ justify-content: space-between; } /* .dropdown-arrow ska ha ingen/mindre margin och positioneras automatiskt av flexbox */ .dropdown-arrow { display: inline-block; width: 14px; height: 14px; margin-left: 0; /* Ingen extra vänstermarginal behövs nu! */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; pointer-events: none; transition: filter .3s ease; } /* (om dark theme) */ body.dark-theme .dropdown-arrow { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bbbbbb'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E"); } /* Hover och focus */ .dropdown-filter-toggle:hover { background-color: var(--highlight); border-color: #bbb; } body.dark-theme .dropdown-filter-toggle:hover { border-color: #555; } .dropdown-filter-toggle:focus { outline: 2px solid var(--malmo-blue); outline-offset: 1px; border-color: var(--malmo-blue); box-shadow: 0 0 0 2px var(--focus-ring-color); } /* Dropdown-innehåll: styling, skugga, rundning – inspirerat av andra popup/droplists */ .dropdown-content { display: none; position: absolute; top: 110%; left: 0; z-index: 20; min-width: 220px; background: var(--controls-bg); border: 1px solid var(--controls-border); border-radius: var(--control-element-border-radius); box-shadow: 0 4px 24px #0001; padding: 10px 0; margin-top: 3px; font-size: 1rem; } .custom-select-wrapper.open .dropdown-content, .dropdown-content.show { display: block; } body.dark-theme .dropdown-content { background: var(--controls-bg-dark); border-color: var(--controls-border-dark); box-shadow: 0 4px 24px #0006; } /* Checkbox-listan i dropdown */ .dropdown-checkbox-label { display: flex; align-items: center; gap: 0.5em; padding: 6px 18px 6px 18px; font-size: 1rem; color: var(--text); cursor: pointer; transition: background 0.2s; } .dropdown-checkbox-label:hover { background: var(--highlight); } .city-filter-checkbox { accent-color: var(--malmo-blue); margin-right: 0.5em; } /* Responsivt fix */ @media (max-width: 600px) { .dropdown-content { min-width: 90vw; left: 50%; transform: translateX(-50%); } } /* Dölj pseudo-pil på custom-dropdown-filter-wrapper */ .custom-dropdown-filter-wrapper::after { display: none !important; } /* ----------- HEADER ----------- */ .malmo-header { width: 100%; background: var(--bg); padding-top: 3rem; padding-bottom: 1.3rem; } .malmo-header-inner { max-width: 1250px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2.6rem; padding: 0 20px; } .malmo-header-logo { display: flex; align-items: center; margin-right: 2.3rem; flex-shrink: 0; } .malmo-header-logo img { display: block; height: 110px; width: auto; max-width: 110px; } .malmo-header-nav { flex: 1 1 auto; display: flex; justify-content: flex-start; } .malmo-header-nav ul { display: flex; align-items: center; gap: 1.7rem; list-style: none; margin: 0; padding: 0; } .malmo-header-link { font-size: 1.08rem; font-weight: 400; color: var(--text); background: none; border: none; padding: 0.8em 1.4em; border-radius: 999px; text-decoration: none; transition: background 0.18s, color 0.18s; display: inline-block; line-height: 1; } /* ENDAST EN STYRANDE KLASS FÖR "AKTIV" LÄNK */ .malmo-header-link.malmo-header-link-active, .malmo-header-link.active, .malmo-header-link:focus { background: var(--malmo-blue); color: #fff !important; outline: none; padding: 0.8em 1.4em; } .malmo-header-link:hover { background: var(--malmo-blue); color: #fff !important; outline: none; padding: 0.8em 1.4em; } .malmo-header-action { margin-left: 2.2rem; display: flex; align-items: center; flex-shrink: 0; } .malmo-header-button { background: #ece3d2; color: var(--text); font-size: 1.05rem; font-weight: 400; border: none; border-radius: 999px; padding: 0.75em 1.5em; text-decoration: none; box-shadow: none; transition: background 0.18s, color 0.18s; display: inline-block; cursor: pointer; } .malmo-header-button:hover, .malmo-header-button:focus { background: #e2d4ba; color: var(--text); outline: none; } /* ----------- HEADER RESPONSIVITET ----------- */ @media (max-width: 950px) { .malmo-header-inner { gap: 1.2rem; padding: 0 5px; } .malmo-header-logo img { height: 55px; max-width: 72px; } .malmo-header-logo { margin-right: 1.2rem; } .malmo-header-nav ul { gap: 0.7rem; } .malmo-header-action { margin-left: 1rem; } .malmo-header-link { font-size: 0.97rem; padding: 0.37em 0.75em; } .malmo-header-link.malmo-header-link-active, .malmo-header-link.active, .malmo-header-link:hover, .malmo-header-link:focus { padding: 0.37em 1.2em; } .malmo-header-button { font-size: 0.98rem; padding: 0.6em 1.1em; } } @media (max-width: 650px) { .malmo-header-inner { flex-wrap: wrap; gap: 0.4rem; padding: 0 2px; } .malmo-header-logo { margin-right: 0.5rem; } .malmo-header-nav ul { gap: 0.3rem; } .malmo-header-link { font-size: 0.93rem; padding: 0.28em 0.65em; } .malmo-header-link.malmo-header-link-active, .malmo-header-link.active, .malmo-header-link:hover, .malmo-header-link:focus { padding: 0.28em 1em; } .malmo-header-button { font-size: 0.93rem; padding: 0.4em 0.95em; } .malmo-header-logo img { height: 38px; max-width: 48px; } } /* ----------- MALMO GUIDE TOPBOX ----------- */ .malmo-guide-topbox { position: relative; background-color: var(--malmo-red); /* Eller den färg du vill ha */ width: 100%; max-width: 1250px; min-height: 300px; padding: 30px; box-sizing: border-box; color: #fff; border-radius: 1.5rem 1.5rem 0 0; display: flex; align-items: center; justify-content: space-between; margin: 2rem auto 0; overflow: hidden; /* transition: background-color var(--transition-duration) var(--transition-timing-function); */ } .malmo-guide-topbox::after { content: ""; position: absolute; top: 2rem; right: 3rem; bottom: 0; width: 55%; /* Hur stor del av boxen som täcks till höger */ background-image: url('gas-3.png'); background-repeat: no-repeat; background-size: auto 100%; /* Alltid 100% höjd, anpassad bredd */ background-position: right center; opacity: 1; /* Justera t.ex. till 0.4 om du vill ha diskret bakgrund */ pointer-events: none; z-index: 1; } .malmo-guide-topbox > * { position: relative; z-index: 2; } .malmo-guide-text { color: #fff; font-size: 3.2rem; font-weight: 400; line-height: 1.14; text-align: left; max-width: 700px; margin: 1rem 0 0 4rem; flex: 1 1 0; } .malmo-guide-text h1 { color: #fff; font-size: 3.2rem; font-weight: 400; line-height: 1.14; text-align: left; max-width: 700px; margin: 1rem 0 0 4rem; flex: 1 1 0; } .malmo-guide-goose { display: flex; align-items: flex-end; justify-content: flex-end; min-width: 170px; margin-left: 40px; padding-bottom: 12px; } .malmo-guide-goose img { max-height: 250px; width: auto; display: block; } /* ----------- GUIDE TOPBOX RESPONSIVITET ----------- */ @media (max-width: 1024px) { .malmo-guide-topbox { padding: 100px 1.5rem; margin-top: 1.5rem; border-radius: 1rem 1rem 0 0; flex-direction: column; align-items: flex-start; } .malmo-guide-topbox::after { width: 65%; /* Lite bredare för mindre skärmar om du vill */ background-size: auto 100%; opacity: .6; } .malmo-guide-text { font-size: 3rem; max-width: 80vw; } .malmo-guide-text h1 { font-size: 3rem; max-width: 80vw; } .malmo-guide-goose { min-width: 70px; margin-left: 14px; padding-bottom: 5px; } .malmo-guide-goose img { max-height: 60px; } } @media (max-width: 700px) { .malmo-guide-topbox { padding: 1.5rem 1rem; margin-top: 1rem; border-radius: 1rem 1rem 0 0; flex-direction: column; align-items: flex-start; } .malmo-guide-topbox::after { width: 100%; /* Bilden fyller hela boxen horisontellt */ background-size: cover; /* Bilden fyller hela ytan (kan beskäras) */ } .malmo-guide-goose { margin-left: 0; padding-bottom: 0; min-width: 0; align-items: flex-start; justify-content: flex-start; } .malmo-guide-goose img { max-height: 38px; } } /* Extra styling för statistikboxen i headern */ .header-stat-li { list-style: none; margin-left: 1rem; display: flex; align-items: center; } .header-stat-box { background: #ede6da; border-radius: 12px; padding: 1.4rem; box-shadow: none; display: flex; align-items: center; gap: 0rem; } .header-stat-box .stat-display-number { font-size: 2.5rem; font-weight: 600; color: #222; margin-right: 0.5rem; } .header-stat-box .stat-display-text { display: flex; flex-direction: column; line-height: 1.12; } .header-stat-box .stat-display-line1, .header-stat-box .stat-display-line2 { font-size: 1rem; color: #222; font-weight: 500; } @media (max-width: 900px) { .header-stat-li { margin-left: 1.2rem; } .header-stat-box { padding: 1.2rem 1.2rem 0.9rem 1.2rem; gap: 0.7rem; } .header-stat-box .stat-display-number { font-size: 2.2rem; } .header-stat-box .stat-display-line1, .header-stat-box .stat-display-line2 { font-size: 1.03rem; } } @media (max-width: 600px) { .header-stat-li { margin-left: 0.5rem; } .header-stat-box { padding: 0.8rem 0.7rem; gap: 0.5rem; } .header-stat-box .stat-display-number { font-size: 1.4rem; } .header-stat-box .stat-display-line1, .header-stat-box .stat-display-line2 { font-size: 0.87rem; } } .read-more-link svg { width: 1.25em; height: 1.25em; margin-left: 0em; vertical-align: -0.30em; /* ↓ SÄNKT en aning */ display: inline-block; } .about-image { position: relative; } .image-credit-om { position: absolute; bottom: 12px; right: 18px; background: rgba(255,255,255,0.84); color: #444; font-size: 0.92em; padding: 4px 12px; border-radius: 16px; box-shadow: 0 2px 8px #0002; pointer-events: none; font-style: italic; letter-spacing: 0.01em; } .about-container { display: flex; align-items: flex-start; gap: 3rem; max-width: 1200px; margin: 2rem auto 4rem auto; } .about-text { flex: 1 1 0%; } .about-image img { width: 450px; height: 500px; object-fit: cover; border-radius: 28px; box-shadow: 0 4px 32px #0001; background: #eee; display: block; } @media (max-width: 900px) { .about-container { flex-direction: column; gap: 1.5rem; } .about-image img { width: 100%; max-width: 450px; height: auto; margin: 0 auto; } } .gallery-cards { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 5.3rem; /* extra stort rad-gab */ column-gap: 1.2rem; /* lite mindre mellan kolumner */ max-width: 1200px; margin: 0 auto; padding: 2.5rem 0; } .gallery-card { display: flex; flex-direction: column; background: #fff; border-radius: 2rem; box-shadow: 0 4px 24px #0001; padding: 2rem; height: 100%; min-width: 0; } .gallery-desc { flex: 1 1 auto; margin-bottom: 1em; font-size: 1.2em; } .gallery-detail-row { display: flex; align-items: center; gap: 0.8em; color: #1A1A1A; margin-bottom: 1em; } .gallery-icon { width: 2em; height: 2em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .gallery-icon img { width: 22px; height: 22px; display: block; } .gallery-button { background: #0366df; color: #fff; text-align: center; font-size: 1em; padding: 0.9em 1em; border-radius: 0.8em; text-decoration: none; font-weight: 500; margin-top: auto; /* ← detta trycker knappen till botten */ margin-bottom: 0.3em; /* ← detta skapar extra luft mot botten */ box-shadow: 0 2px 10px #0366df12; border: none; display: block; transition: background .18s; } .gallery-button:hover, .gallery-button:focus { background: #1a40b3; color: #fff; } /* Två kort i rad på mellan-skärm */ @media (max-width: 1200px) { .gallery-cards { grid-template-columns: 1fr 1fr; max-width: 800px; } } /* Ett kort i rad på mobil */ @media (max-width: 700px) { .gallery-cards { grid-template-columns: 1fr; max-width: 97vw; gap: 4rem; } .gallery-card { padding: 1.4rem; } } .gashero--bg { background: #e14830 url('gas-3.png') no-repeat right bottom; background-size: auto 100%; border-radius: 2rem; background-position: right 100px bottom -20px; display: flex; align-items: flex-start; justify-content: flex-start; max-width: 1250px; width: 100%; box-sizing: border-box; margin: 3rem auto; padding: 3rem 4rem; min-height: 180px; color: #fff; position: relative; overflow: hidden; } .gashero-text { flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; z-index: 1; /* säkerställer att texten ligger över */ } .gashero-text h2 { font-size: 2rem; font-weight: 400; margin: 0 0 2rem 0; color: #fff; line-height: 1.22; letter-spacing: 0.01em; } .gashero-link { font-size: 1.22rem; color: #fff; text-decoration: underline; font-weight: 400; margin-top: 0.7rem; transition: color .15s; } .gashero-link:hover, .gashero-link:focus { color: #ffe6dc; } /* Responsivt: Mindre bild på mobil */ @media (max-width: 800px) { .gashero { display: none; } .gashero--bg { background-size: auto 90%; background-position: right 0% bottom 0%; padding: 2rem 1.1rem 2rem 1.1rem; } .gashero-text h2 { font-size: 1.25rem; } } .place-container { display: flex; gap: 3.5rem; align-items: flex-start; max-width: 1350px; margin: 1rem auto 3rem auto; background: #fff; border-radius: 2.2rem; box-shadow: 0 4px 22px #0001; padding: 2.6rem; } .place-info { flex: 1 1 0; min-width: 0; } .place-info h1 { font-size: 2.8rem; font-weight: 700; margin: 0 0 1.3rem 0; } .place-lead { font-size: 1.32rem; margin-bottom: 2.2rem; line-height: 1.4; } .place-details { font-size: 1.13rem; list-style: disc inside; padding-left: 0.5em; color: #121212; margin-bottom: 0; } .place-details li { margin-bottom: 0.6em; } .place-details a { color: #121212; text-decoration: underline; font-weight: 500; } .place-map-wrap { flex: none; width: 500px; max-width: 48vw; min-width: 320px; border-radius: 2rem; overflow: hidden; box-shadow: 0 4px 22px #0001; } .place-map { width: 100%; height: 390px; min-height: 290px; border-radius: 2rem; } @media (max-width: 1100px) { .place-container { flex-direction: column; gap: 2.2rem; } .place-map-wrap { width: 100%; max-width: 100%; } .place-map { height: 320px; min-height: 220px; } } .admission-group { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; font-weight: 500; margin-top: 0.5rem; color: var(--card-days-left-color); transition: color var(--transition-duration) var(--transition-timing-function); } .admission-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: .5rem; /* Samma mellanrum som days-left ikon och text */ } .admission-text { font-size: inherit; } /* === MKX Mobile Header === */ .mkx-mobile-header, .mkx-menu-panel { display: none; } @media (max-width: 1150px) { /* Dölj desktop-headern i mobilläge */ .malmo-header .malmo-header-inner { display: none !important; } .mkx-mobile-header { display: flex; align-items: center; gap: 20px; padding: 10px 12px; margin: 10px 12px 6px; } .mkx-logo img { height: 60px; width: auto; display: block; } .mkx-stat { flex: 1; height: 3rem; max-width: 195px; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #eadfce; } .mkx-stat-num { font-size: 2.5rem; font-weight: 500; line-height: 1; } .mkx-stat-text { font-size: 1.1rem; font-weight: 500; line-height: 1; } .mkx-menu-btn { background: var(--malmo-blue); color: #fff; height: 4.5rem; border: 1px solid #eadfce; border-radius: 16px; padding: 12px 24px; font-size: 1.1rem; cursor: pointer; } .mkx-menu-panel[hidden] { display: none; } .mkx-menu-panel { display: block; margin: 6px 0px 12px 0px; padding: 0 0 0.5rem 0; background: #fff; border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.08); overflow: visible; position: relative; /* NY: Krävs för att z-index ska fungera korrekt */ z-index: 10000; /* NY: Säkerställer att panelen (och resultaten) ligger överst */ } .mkx-nav { padding: 6px; } .mkx-nav-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .mkx-nav-list li a { display: block; padding: 12px 14px; text-decoration: none; color: inherit; border-radius: 10px; } .mkx-nav-list li a:hover { background: var(--malmo-blue); color:#fff; } } /* === Overrides för .malmo-guide-topbox i mobilläge === */ @media (max-width: 700px) { /* 1) Större text + längre ut mot kanterna */ .malmo-guide-topbox { padding: 1.25rem 0.75rem; /* lite mindre sidopadding än 1rem */ } .malmo-guide-text { font-size: clamp(1rem, 5.6vw, 2rem); /* större än 1.04rem */ line-height: 1.2; margin: 0 0 0.6rem 0; /* ta bort vänstermarginalen */ max-width: 100%; text-align: left; } .malmo-guide-text h1 { font-size: clamp(1rem, 5.6vw, 2rem); /* större än 1.04rem */ line-height: 1.2; margin: 0 0 0.6rem 0; /* ta bort vänstermarginalen */ max-width: 100%; text-align: left; } /* 2) Gåsen: inte transparent, och längre åt höger */ .malmo-guide-topbox::after { opacity: 1; /* var 0.3 i befintlig CSS */ width: 68%; /* inte 100% över hela, lämna plats för texten */ right: 0; /* håll den helt till höger */ background-size: auto 100%; /* mer som desktop-känsla än 'cover' */ background-position: 100% center; /* pressa motivet längst åt höger */ opacity: 0.5; } } /* Fixa "Om galleriet/museet" i mobil: fullbredd + mer avstånd nedåt */ @media (max-width: 880px) { .links .open-popup-btn { display: block; /* gör att width:100% faktiskt gäller */ width: 100%; box-sizing: border-box; margin: 0 0 1rem 0; /* större avstånd till "Läs mer" */ text-align: center; /* samma centrering som de andra knapparna */ } } @media (max-width:1150px){ .mkx-mobile-header{ display:grid; grid-template-columns: auto 1fr auto; align-items:center; padding:10px 12px; } .mkx-logo{ justify-self:start; } .mkx-menu-btn{ justify-self:end; } .mkx-stat{ justify-self:center; text-align:left; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } } /* Tajtare avstånd mellan mobilheadern och topboxen */ @media (max-width: 700px) { .mkx-mobile-header { margin-bottom: 0; /* ta bort ev. bottenmarginal */ padding-bottom: 0px; /* lite padding så marginalerna inte kollapsar */ } .malmo-guide-topbox { margin-top: 0px; /* var högre – sänk till exakt det du vill ha */ } } /* Mobil: centrera texten i höjdled + minska höjden på topboxen */ @media (max-width: 700px) { .malmo-guide-topbox { /* lägre totalhöjd i mobil */ min-height: clamp(100px, 36vh, 1.02rem); /* lite tajtare padding än desktop */ padding: 50px; /* centrera innehållet vertikalt */ display: flex; flex-direction: column; justify-content: center; } /* se till att själva textblocket ligger mitt i och inte skjuts ned av marginaler */ .malmo-guide-text { margin: 0; /* nollställ ev. toppmarginal */ line-height: 1.2; position: relative; /* så att texten ligger över gåsen */ z-index: 2; } } .introtext p { font-size: 1.2em; } .place-details { list-style: none; /* Tar bort punkterna */ margin: 0; padding: 0; } .place-details li { display: flex; /* Gör ikon + text till en horisontell rad */ align-items: center; /* Vertikalcentrerar ikonen mot texten */ margin-bottom: 1em; /* Lite luft mellan raderna */ } .place-details li img.icon { width: 1.4em; /* Anpassa storlek på ikonen */ height: auto; margin-right: 1em; /* Avstånd mellan ikon och text */ } .place-details a { color: #0000EE; /* Klassisk blå */ text-decoration: underline; /* Behåll understrykning */ } .place-details a:visited { color: #551A8B; /* Klassisk lila för besökta länkar */ } /* Override: press mobile header closer to screen edges */ @media (max-width: 1150px) { .mkx-mobile-header { margin: 6px 6px 0px; /* was 10px 12px 6px */ padding: 8px 6px 0px 6px; /* was 10px 12px */ gap: 12px; /* was 20px */ } .mkx-menu-btn { padding-left: 18px; /* slightly tighter button */ padding-right: 18px; } } @media (max-width: 700px) { .mkx-mobile-header { margin-left: 4px; margin-right: 4px; padding-left: 4px; padding-right: 4px; } } .plats-title { margin-top: 2em; font-size: 1.8em; } /* ===== OM (kort-layout) ===== */ .om-page { max-width: 750px; margin: 0 auto; padding: 1rem 0 3rem; } .om-hero-title { text-align: center; font-size: 2.8em; line-height: 1.2; margin: 1.5rem 0 2rem; } .om-card { background: #fff; border-radius: 22px; padding: clamp(1.2rem, 4vw, 5rem); box-shadow: 0 12px 30px rgba(0,0,0,.06); } .om-card-block h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3.5vw, 2rem); line-height: 1.2; } .om-text { font-size: 1.2rem; line-height: 1.7; color: var(--text); } .om-text p { margin: 0 0 1rem; } .om-text p:last-child { margin-bottom: 0; } .om-card-divider { border: none; height: 1px; background: #e6e6e6; margin: clamp(1.2rem, 3vw, 2rem) 0; } /* Notice bar – full width */ .notice-bar { background: #eadfce; color: #333; text-align: center; font-weight: 400; font-size: 0.9rem; padding: 12px; /* full-bleed */ width: 100%; box-sizing: border-box; border-radius: 0 0 10px 10px; /* top-left, top-right, bottom-right, bottom-left */ } /* vita länkar i notice-baren */ .notice-bar a, .notice-bar a:link, .notice-bar a:visited { color: #333; text-decoration: underline; text-underline-offset: 2px; } .notice-bar a:hover, .notice-bar a:focus { color: #333; text-decoration-color: #333; opacity: .95; } .notice-bar a:focus { outline: 2px solid #333; outline-offset: 2px; } @media (max-width: 700px) { .notice-bar { font-size: 0.9rem; padding: 10px 16px; } } /* === Tiny phones (iPhone SE m.fl.) — gör toppens tre element mindre === */ @media (max-width: 400px) { .mkx-mobile-header { gap: 10px; /* var 20px */ /* :contentReference[oaicite:0]{index=0} */ padding: 6px 0px; /* var 10px 12px */ margin: 6px 8px 4px; /* var 10px 12px 6px */ } .mkx-logo img { height: 46px; /* var 60px */ /* :contentReference[oaicite:1]{index=1} */ } .mkx-stat { max-width: 160px; /* var 195px */ /* :contentReference[oaicite:2]{index=2} */ padding: 8px 10px; /* var 12px */ gap: 8px; /* var 12px */ border-radius: 12px; height: auto; /* var 3rem — släpp låsningen */ } .mkx-stat-num { font-size: 2rem; } /* var 2.5rem */ .mkx-stat-text { font-size: .95rem; line-height: 1.1; } /* var 1.1rem */ .mkx-menu-btn { height: 44px; /* var 4.5rem */ /* :contentReference[oaicite:3]{index=3} */ padding: 8px 12px; /* var 12px 24px */ font-size: .95rem; /* var 1.1rem */ border-radius: 12px; } } /* Extra kompakt om det är ännu smalare */ @media (max-width: 340px) { .mkx-logo img { height: 40px; } .mkx-stat { max-width: 148px; padding: 6px 8px; gap: 6px; } .mkx-stat-num { font-size: 1.85rem; } .mkx-stat-text { font-size: .9rem; } .mkx-menu-btn { height: 40px; font-size: .9rem; padding: 6px 10px; } } /* ==== Pressa ihop gapet mellan mobilheadern och röda topboxen ==== */ @media (max-width: 700px) { /* 1) Headern: minimera bottenmarginalen */ .mkx-mobile-header { margin-bottom: 40px !important; padding-bottom: 0 !important; } /* 2) Nollställ extra top-padding som läggs på sektion 2 i mobil */ .section:nth-of-type(2) { padding-top: 0 !important; /* var 1rem */ } /* 3) Topboxen: sänk egen top-marginal */ .malmo-guide-topbox, .red-top-box { } /* (valfritt) lite mindre luft under notice-baren */ .notice-bar { margin-bottom: 6px !important; } .place-info h1 { font-size: 1.8rem; font-weight: 700; margin: 0 0 1.3rem 0; } .place-container { padding: 1.5rem; } .place-lead { font-size: 1.1rem; margin-bottom: 2.2rem; line-height: 1.4; } .om-hero-title { text-align: center; font-weight: 500; font-size: 1.7em; line-height: 1.2; margin: 1.5rem 0 2rem; } .om-page { margin: -50px auto 0 auto; } } /* Mörklägg plats-bilden på mobil */ @media (max-width: 700px) { .place-main-image { position: relative; overflow: hidden; /* så overlayen inte sticker ut */ } .place-main-image::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); /* motsvarar ca opacity 0.6 på bilden */ z-index: 1; } /* innehållet ovanpå bilden ska fortfarande synas över overlayen */ .place-main-image > * { position: relative; z-index: 2; } } /* Mobil: håll kartan smalare än full bredd */ @media (max-width: 700px) { .place-map-wrap { max-width: calc(100% - 4rem); /* alltid minst 1rem marginal per sida */ margin: 0 auto; /* centrera inom skärmen */ } .place-map { width: 95%; max-width: 95%; } .malmo-header { display: none; } } #map-container { width:1250px; max-width:100%; height:390px; margin:2rem auto 2rem auto; border-radius:14px; overflow:hidden; box-shadow:0 2px 24px #0001; } .underline { text-decoration: underline; cursor: pointer; } /* ====== new_container: responsiv layout (desktop/tablet/mobil) ====== */ .new_container { width: 100%; max-width: 1200px; min-height: 450px; background: #fff; border-radius: 2.2rem; display: flex; flex-direction: column; overflow: hidden; padding: 0; box-sizing: border-box; margin: 15px 0 0 0; box-shadow: 0 4px 22px #0001; } .new_content { display: flex; flex: 1; padding: 20px; box-sizing: border-box; gap: 0; } .new_left { flex: 1; padding: 40px; color: #000; font-family: var(--font-family-main); line-height: 1.2; } .new_left h1, .new_left h2, .new_left .date-range { font-size: 28px; margin: 8px 0; line-height: 1.3; } .new_left h1 { font-weight: 700; color:#000} .new_left h2, .new_left .date-range { font-weight: 400; color: var(--card-meta-color); } .new_left ul { margin: 30px 0 20px; padding-left: 0; list-style: none; font-size: 1.1rem; font-weight: 500; line-height: 2.2; } .new_left ul li { display: flex; align-items: center; gap: 0.7em; } .new_photo-credit { font-size: 14px; color: #888; margin-top: 30px; display: block; } .icon-circle { width: 24px; height: 24px; border-radius: 50%; background: #4caf50; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; } .new_right { width: 450px; /* desktop */ display: flex; justify-content: center; align-items: center; background: #fff; padding-right: 0; } .new_right img { width: 450px; /* desktop */ height: 450px; /* desktop */ object-fit: cover; border-radius: 30px; background: #eee; display: block; } /* knappraden */ .new_buttons { width: 100%; display: flex; gap: 20px; background: #e0e0e0; border-top: 1px solid #cccccc; padding: 30px 40px; border-radius: 0; box-sizing: border-box; } .new_buttons button, .new_buttons a { color: #fff; border: 0; border-radius: 10px; padding: .75rem 1.25rem; font-size: 1.1rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-decoration: none; transition: background-color var(--transition-duration) var(--transition-timing-function), color var(--transition-duration) var(--transition-timing-function), border-color var(--transition-duration) var(--transition-timing-function); margin: 0 .75rem 0 0; } .new_btn-about { background: #005bc4; } .new_btn-readmore{ background: #e14830; } .new_btn-readmore svg {height:20px; margin-top: 2px;} .new_vernissage-info { margin-top: 3rem; font-size: 1.1rem; color: var(--text); display: flex; align-items: center; gap: .5rem; font-weight: 500; align-items: flex-start; transition: color var(--transition-duration) var(--transition-timing-function) } .new_vernissage-info { display: flex; align-items: flex-start } .new_vernissage-info::before { flex-shrink: 0; width: 20px; margin-right: .5rem; display: flex; align-items: center; justify-content: center } .new_vernissage-info::before { content: "→"; font-size: 1.3em; color: inherit; height: 1.2em } /* ====== Tablet (≤1024px) ====== */ @media (max-width: 1024px) { .new_content { gap: 16px; } .new_right { width: 360px; } .new_right img { width: 100%; height: auto; aspect-ratio: 1 / 1; max-width: 360px; } .new_left h1, .new_left h2, .new_left .date-range { margin-top: 0; font-size: 1.30rem; margin-bottom: .25rem; } .new_left ul { margin: 25px 0 20px; padding-left: 0; list-style: none; font-size: 1.1rem; font-weight: 600; line-height: 1.3; } .new_left li { margin-bottom: 10px; } } /* ====== Mobil (≤700px): bilden överst, full bredd ====== */ @media (max-width: 700px) { .new_content { flex-direction: column; padding: 14px; gap: 14px; } .new_left { padding: 12px; } .new_right { width: 100%; order: -1; /* lägg bilden överst */ } .new_right img { width: 100%; max-width: none; height: auto; border-radius: 22px; } .new_buttons { flex-direction: column; gap: 12px; padding: 16px; } .new_buttons a, .new_buttons button { width: 100%; margin: 0; } } /* ===== Mobilanpassa redan vid 1140px (bild överst) ===== */ @media (max-width: 800px) { .new_content { flex-direction: column; /* stapla */ padding: 16px; gap: 16px; } .new_right { width: 100%; order: -1; /* lägg bilden överst */ } .new_right img { width: 100%; height: auto; /* behåll proportioner */ max-width: none; border-radius: 22px; display: block; } .new_left { padding: 16px; } /* valfritt: gör knappraden mer mobilvänlig från 1140px */ .new_buttons { flex-direction: column; gap: 12px; padding: 16px; } .new_buttons a, .new_buttons button { width: 100%; margin: 0; } .breadcrumb-container { padding: 1rem; margin-bottom: 0rem; font-size: 0.9rem; } } /* === Fix: knappar i .new_buttons ska aldrig spilla ut i mobil === */ @media (max-width: 800px) { .new_buttons { max-width: 100%; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; } /* Gör varje knapp/länk 100% av innerytan, utan sidomarginaler */ .new_buttons > a, .new_buttons > button { display: inline-flex; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0 !important; /* trumfar tidigare margin-right */ } } /* Endast sista breadcrumb ska trunkeras i mobilläge */ @media (max-width: 700px) { .breadcrumb { flex-wrap: nowrap; /* en rad */ overflow: hidden; /* klipp överflöd */ } /* Första + mellanliggande crumbs: visa full text, ingen ellipsis */ .breadcrumb-item { flex: 0 0 auto; } /* krymp inte */ .breadcrumb-item a { display: inline; white-space: nowrap; overflow: visible; text-overflow: clip; max-width: none; } /* Sista crumb (din aktiva sida): tillåt att krympa och ellipsa */ .breadcrumb-item:last-child, .breadcrumb-item.active { flex: 1 1 auto; min-width: 0; /* viktigt för att ellipsis ska funka i flex */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* … endast här */ max-width: 100%; } } /* Placera ikonen */ .site-search { position: relative; } .site-search .search-icon { position: absolute; left: 12px; /* ikonens vänsterposition */ top: 50%; transform: translateY(-50%); width: 20px; /* ikonbredd */ height: 20px; pointer-events: none; } /* *** VIKTIGT: denna regel måste ligga sist och inte “överköras” *** */ .site-search input[type="search"] { width: 100%; padding: .6rem .8rem; /* topp/höger/botten */ padding-left: 20rem; /* 12px (left) + 20px (ikon) + 12px (luft) */ border: 1px solid #ddd; border-radius: .5rem; font-size: 16px; } /* Wrappern staplar sök + text och centrerar dem */ .mkx-search-block{ display:flex; flex-direction:column; align-items:center; /* centrerar horisontellt */ max-width: 720px; margin-top: 0rem; } /* Själva texten under */ .mkx-search-count{ margin-top:.75rem; text-align:center; font-size:0.9rem; color:#333; font-weight: 500; } /* Sök i mobilpanelen */ .mkx-menu-search{ display:none; /* dolt på desktop */ margin-top:1rem; padding:0 1rem; } @media (max-width: 768px){ .mkx-menu-search{ display:block; } } .mkx-menu-search .mkx-search{ max-width:100%; width:100%; } /* Lägg till detta i din befintliga