/**! * marineart.css * * @version 0.9.2 2019-03-12 * @author R. Serradeil, WebMechanic.biz */ @supports (display:grid) and (display:flex) and (object-fit:cover) { /* * wrap it all to safe repetition */ @media screen { /* schicker verlauf */ html {background:hsl(202,100%,24%) var(--bodybg) fixed} body {background:hsl(202,100%,24%) var(--bodybg) fixed} /* .content--wrapper: Seiten mit ZEILEN-layout ~ DARK THEME ~ statische Seiten (bislang, Jan 2019) */ .is--fullscreen .content--wrapper {background-color:transparent;background-image:none;} /* like default of `.content-main.is--fullscreen` */ section.content-main {margin-top:0; margin-bottom:1.34rem;} img,svg,video,iframe {transition-property:width, height; transition-duration:.5s;} p,ol,ul,li,dl,dt,dd,blockquote,address,figure,figcaption {color:inherit} dt {padding:.25rem .3125rem} figure,figcaption {margin:0} /* landscape videos on smartphones */ article iframe {max-width:100%;} /*a, a:any-link, p a, p a[class], li a, li a:link {color:inherit}*/ a.is--primary {color:var(--txtcolor-inv)} /* is--primary button with btn-secondary-text-color */ a.btn {border:1px solid transparent;} /* #a11y 'high contrast windows' */ aside.off-canvas .is--display-button {color:inherit} h1, h2, h3, h4, h5, h6, [class*=-headline], [class*=-title], th {color:inherit; color:var(--txtcolor);} h1 a:any-link, h2 a:any-link, h3 a:any-link, h4 a:any-link {color:inherit} .hd h1, .hd h2, .hd h3, .hd h4 {color:var(--txtcolor-inv)} /* Tabellen */ table tbody td {color:#000} tr:nth-child(odd) {background-color:var(--calcit)} tr:nth-child(even) {background-color:var(--calcium)} /* @todo Pseudo-Tabelle dt:Label (15ch), dd:Daten (1fr) */ .product-legend dl { display:grid; grid-template-columns:15ch 1fr; } ::selection {text-shadow:none; color:var(--txtcolor-inv); background-color:var(--algenexit)} *:focus::placeholder {color:#ccc} header.header-main .top-bar {display:none} header.header-main .logo-main::before {display:none;} header.logo-main .block-group, header.header-main .logo-main, header.header-main .logo--shop, header.header-main .logo--link img { all:unset; padding:0; margin:0; width:auto; height:100%; font-size:1rem; line-height:1; } header.header-main .logo--link img { display:inline-block; position:absolute; top:0; right:1rem; z-index:1277; } /* @media tty and (max-width:700px) { .wenn-das-menu-zu-lang-wird header.header-main .logo--link img { height:2.6rem; top:.5ex; } } */ @media (min-width:700px) { header.header-main {top:0} header.header-main .logo--link img {top:0;height:7rem;} } @media (max-width:48em) { .shop--navigation {position:absolute; top:.5rem;} header.header-main .logo--link img {top:0;height:3rem;} } nav.navigation-main {position:sticky; top:-1px; z-index:1027; box-shadow:8px 16px 8px -8px rgba(0,0,0,.42)} .shop--navigation .entry--menu-left .btn {} @media (min-width:48em) {/* all but the hamburger */ /* top menu */ .navigation-main .navigation--list {padding-top:.5ex;} /* make room 4 box-shadow */ .navigation-main li {border-top-left-radius:4px;border-top-right-radius:4px;} .navigation-main li:hover {background-image:linear-gradient(to bottom, var(--marineart-lite) 0%, var(--marineart) 75%);} .navigation-main li.is--active {margin-left:.25ex;margin-right:.25ex;} .navigation-main li.is--active:hover {background:var(--marineart)} .navigation-main li:hover span {color:var(--txtcolor-inv)} .navigation-main li a:focus {box-shadow:0 -1px 3px #999;} .navigation-main li a:hover {box-shadow:0 -1px 3px #999;color:var(--txtcolor-inv);} /* breadcrumbs */ nav.content--breadcrumb {padding:0} .content--breadcrumb .breadcrumb--list {padding:0 0.8rem 0 1.25rem} .breadcrumb--list li.breadcrumb--separator {display:none} .breadcrumb--list .breadcrumb--entry:last-of-type {pointer-events:none; cursor:default; color:#555} /* aufwändigere varianten * @link https://catalin.red/css3-breadcrumbs/ * @link https://css-tricks.com/triangle-breadcrumbs/ * @link https://codepen.io/team/css-tricks/pen/xRmmdr */ .breadcrumb--list > .breadcrumb--entry {border-right:solid 2px var(--txtcolor);} .breadcrumb--list > .breadcrumb--entry { border-radius:0 1.5em 1.5em 0; margin-left:-1.34em; padding-left:1.34em; } /* left navi + sub categories */ .sidebar--navigation .navigation--entry {font-size:1rem} } /* footer - #ma-logo #fish, #ma-logo #marineart */ .footer--logo {height:5rem;margin:0 auto;width:50%;text-align:center} .footer--logo img {margin:0 auto;} .footer--logo #ma-logo {color:var(--txtcolor-inv);fill:currentColor;} /* FF ghost scrollbar */ .is--gecko .js--menu-scroller--list {overflow-x:auto} /* no bg so body linear-gradient can shine thru */ .page-wrap .footer-main, .footer-main .container {background:none;color:var(--calcium)} .footer-main .container::after, .footer-main .block-group::before, .footer-main .block-group::after {display:none; /* disable inherited value, makes un-flexy item */} .footer-main .container .footer--bottom {clear:both} .footer-main .footer--logo img, .footer-main a, .footer-main .navigation--link, .footer-main .column--headline::after, .footer-main .column--headline {color:var(--calcium)} .footer-main .column--headline {padding:1ex 0} /* inline SVG */ p.social-icons a.svg--icon, p.social-icons a.svg--icon:hover, p.social-icons a.svg--icon:active, p.social-icons a.svg--icon:focus {background:none;fill:#fff;outline-color:#004A78;padding:0;} p.social-icons a.svg--icon:active, p.social-icons a.svg--icon:hover {fill:#004A78} #YouTube {fill:inherit; width:1.5em; height:1.5em;} p.social-icons a.youtube #circle {fill:transparent;} p.social-icons a.youtube:active #circle, p.social-icons a.youtube:hover #circle {fill:#fff} /* invert and reverse inverts ... */ table th, table thead td, dt, .sitemap--content .sitemap--navigation-head ::selection {background:var(--marineart)} table th, table thead td, dt {color:var(--txtcolor-inv)} .footer-main ::selection, .footer-main a:active, .footer-main a.navigation--link:active, .footer-main a.navigation--link:focus {background-color:var(--calcium);color:var(--marineart)} .footer-main a:hover, .footer-main a.navigation--link:hover {background-color:transparent;color:var(--txtcolor-inv)} /* btn-secondary-text-color */ div.hbcom-cookiepanel {background:var(--aquaclean); border-top:1px solid currentColor;opacity:.8} .hbcom-cookiepanel .hbcom-cookiepanel-learn-more {color:inherit;text-decoration:underline} /* container .banner-slider--title um h2>span, h3>span aus alt und title Attributen der Images. * Eingabe des Bannertitel in .banner-slider--title "über" .banner-slider--container.image-slider--container * @see widgets/emotion/components/component_banner_slider.tpl */ div.banner-slider--alttext { position:absolute; bottom:3.7rem; left:2vw; width:auto; width:intrinsic; /* Safari non-standard name */ width:-moz-max-content; /* Firefox/Gecko */ width:-webkit-max-content; /* Chrome */ width:max-content; /* eventually */ max-width:60vw; height:auto; z-index:127; } div.banner-slider--title, div.banner-slider--alttext {color:var(--txtcolor-inv);} /* h2>span, h3>span aus alt und title Attributen */ div.banner-slider--item div.banner-slider--alttext h2 {margin:0 auto;color:inherit;} div.banner-slider--item div.banner-slider--alttext h3 {margin:0 auto;color:inherit;} .banner-slider--title, .banner-slider--alttext span {background-color:var(--hdbg)} /* "image cards" .emotion--html panel has--border */ .panel--body.is--wide {padding:.75rem;} .panel--body h2, .panel--body h3 {margin-top:0;min-height:2.5em;} /* Seiten ohne sidebar @see themes/Frontend/Responsive/frontend/_public/src/less/_modules/sidebar.less line 332+ body.is--ctl-custom {} -- Shopseite (s. shopseiten.css) body.is--ctl-blog {} -- Blog body.is--ctl-forms {} -- Kontakform body.is--ctl-newsletter {} -- Newsletterabo-Form body.is--act-index {} -- eine IndexAction (Einstiegseite einer Seitenserie wie z.B. Login, Order etc) body.is--ctl-sitemap body.is--ctl-note.is--user body.is--ctl-address body.is--ctl-account.is--user body.is--no-sidebar {} -- Seitenkonfig (Theme) unabh. von `is--fullscreen` body.is--no-sidebar.js--overlay-relative {} -- off-canvas menu offen */ /* hamburger menu off */ body.is--no-sidebar:not(.js--overlay-relative) aside.off-canvas {width:0;display:none;} body.is--no-sidebar div.sidebar-filter {width:0;display:none;} /* reclaim freedup space */ body.is--no-sidebar .content--wrapper {margin-left:0} body.is--ctl-forms.is--act-index .sidebar-main, body.is--ctl-newsletter .sidebar-main {width:0;display:none;} body.is--ctl-forms .sidebar-main + .content--wrapper, body.is--ctl-newsletter .sidebar-main + .content--wrapper {margin-left:0;} .blog--detail .blog--detail-image-container {float:right;margin-left:1em;} .blog--detail .blog--detail-images {float:none} /* s. 'TinyMCE editor helper classes' */ .blog--detail img.blog--image {width:auto;max-width:100%;} @media (min-width:30em) { /* * Einkaufswelt mit Zeilen-Layout .emotion--mode-rows * - section.emotion--container.emotion--mode-rows.home :Zeilen-Layout 6-col * - section.emotion--container.emotion--mode-rows.vor-ort :HTML-Block .tpl_component_html_code * - section.emotion--container.emotion--mode-rows.service :HTML-Block .tpl_component_html_code * - section.emotion--container.emotion--mode-rows.aquarienbau :HTML-Block .tpl_component_html_code * - section.emotion--container.emotion--mode-rows.ueber-uns :HTML-Block .tpl_component_html_code section.emotion--mode-rows {} section.emotion--mode-rows.emotion--column-4 {} section.emotion--mode-rows.emotion--column-6 {} section.emotion--mode-rows.emotion--column-8 {} */ @media (max-width:48em) { /* the hamburger + breadcrumbs */ .content--breadcrumb {margin-top:2rem} /* this somehow got lost */ .shop--navigation {height:2.5rem;} /* footer items separator line */ .column--hotline .ma-flex--item:last-of-type {border-top:1px solid currentColor} .footer-main .navigation--link {padding:.25em 0;} .footer-main .is--last {width:100%;} /* move padding inside so bg-col can cover all */ .footer-main .footer--column {padding:0} .footer-main .column--headline {padding:.5ex .62ex} .footer-main .column--content {padding:0 1em} } @media (orientation:portrait) {} @media (orientation:landscape) {} } @media (min-width:48em) { .listing--sidebar {display:none} .listing--sidebar + .content--wrapper {margin-left:0} /* blog übersicht body.is--ctl-blog.is--act-index {} */ /* blog beitrag body.is--ctl-blog.is--act-detail {} */ .content--wrapper article.no-teaser .blog--detail-image-container, .content--wrapper article.no-teaser .blog--detail-image-container img {display:none} article.blog--detail-description > blockquote { margin:0 auto; padding:1rem; text-align:center; max-width:1000px; } /* https://developers.google.com/youtube/player_parameters */ article.blog--detail-description iframe[src*=youtube] { width:660px; height:calc(660px * 9 / 16); } /* work around for 2 portrait images side by side */ article.blog--detail-description > blockquote.portrait { flex-flow: row nowrap; display: flex; height: 70vh; justify-items: start; place-content: space-between; } article.blog--detail-description > blockquote.portrait img { height:auto; } article.blog--detail-description > blockquote img.portrait {} /* 'cos they just belong together */ article.blog--detail-description > blockquote img { float:none; } article.blog--detail-description > blockquote > p { margin:0 auto; width:auto; max-width:100%; } article.blog--detail-description > blockquote + p {} /* align gap value with flexbox call-outs on homepage et al. */ .page-wrap .footer-main {margin:1.62rem auto 0} /* core varies for larger viewports, makes page jumpy */ .footer-main .container .footer--columns {padding:0 1.875rem} .footer-main .footer--columns { display:grid; gap:0 1rem; grid-template-columns:3fr 1fr; grid-template-rows:auto auto; border-bottom:none; } .footer-main .footer--column {grid-row:1; grid-column:auto; width:unset;} .footer-main .column--headline {margin:.62em 0 0 0;padding-bottom:.62ex} .footer-main .is--first {display:flex; flex-direction:row; gap:1rem;} /* adresse mit 2 unterblöcken */ .is--first .ma-flex--item {flex:1} .footer-main .is--last {grid-row:2; grid-column:1 / -1} /* anschrift + links abstände */ .footer-main .navigation--entry {height:1.5rem} /* same as ul:line-height */ .footer-main p.column--desc {padding-top:0.35ex} } @media (min-width:64em) { section.content-main {box-shadow:none} section.is--fullscreen .content--wrapper {box-shadow:0 0 2ex 0.5ex rgba(0,0,0,.65);} .blog--detail .blog--detail-image-container {max-width:32.5%;/*height:auto*/} /* for some unknow reason there's a margin in the responsive .less file */ .image-slider .image-slider--container {margin-bottom:0} .page-wrap .footer-main {max-width:78.75em;} @media (orientation:portrait) {} @media (orientation:landscape) { .footer-main .footer--columns {grid-template-columns:2.5fr 1fr 1fr;} .footer-main .footer--column {grid-column:auto;} .footer-main .is--last {grid-row:1} } } @media (min-width:78.75em) { .page-wrap .footer-main {padding:0;} } /* marine art pflegesystem */ .maps {font-weight:700; font-family:"Arial Black", Oswald, Impact, Arial, sans-serif;} .strontium, .magnesium, .aquaclean, .elements, .carbonat, .calcmix, .floras, .flakes, .carbon {color:#fff} .halogene, .calcium, .calcit, .algenexit {color:#000} /* Farben der Pflegeprodukte */ .marineart {background-color:var(--marineart) } /* #004A78 rgb( 0, 79,124 ) hsl( 202,86%,24% ) */ .marineart.dark {background-color:var(--marineart-dark)} /* #00263D rgb( 0, 79,124 ) hsl( 202,86%,12% ) */ .marineart.lite {background-color:var(--marineart-lite)} /* #0076B8 rgb( 0, 79,124 ) hsl( 202,86%,36% ) */ .calcmix {background-color:var(--calcmix )} /* #ef4023 rgb( 239, 64, 35 ) hsl( 9, 86%,54% ) */ .marinphos {background-color:var(--marinphos)} /* #8c301d rgb( 140, 48, 29 ) hsl( 11, 66%,33% ) */ .flakes {background-color:var(--flakes )} /* #b56112 rgb( 181, 97, 18 ) hsl( 29, 82%,39% ) */ .algenexit {background-color:var(--algenexit)} /* #eda221 rgb( 237,162, 33 ) hsl( 38, 85%,53% ) */ .halogene {background-color:var(--halogene )} /* #fff200 rgb( 255,242, 0 ) hsl( 57,100%,50% ) */ .magnesium {background-color:var(--magnesium)} /* #00a76d rgb( 0,167,109 ) hsl( 159,100%,33% ) */ .floras {background-color:var(--floras )} /* #008177 rgb( 0,129,119 ) hsl( 175,100%,25% ) */ .carbonat {background-color:var(--carbonat )} /* #00aeef rgb( 0,174,239 ) hsl( 196,100%,47% ) */ .strontium {background-color:var(--strontium)} /* #005AAA rgb( 0, 90,170 ) hsl( 208,100%,33% ) */ .aquaclean {background-color:var(--aquaclean)} /* #942972 rgb( 148, 41,114 ) hsl( 319, 56%,37% ) */ .elements {background-color:var(--elements )} /* #ed1651 rgb( 237, 22, 81 ) hsl( 344, 86%,51% ) */ .calcium {background-color:var(--calcium )} /* #e9e9e9 rgb( 233,233,233 ) hsl( 0, 0%,91% ) */ .calcit {background-color:var(--calcit )} /* #fafafa rgb( 250,250,250 ) hsl( 0, 0%,98% ) */ .carbon {background-color:var(--carbon )} /* #000000 rgb( 0, 0, 0 ) hsl( 0, 0%, 0% ) */ .oceandry {background-color:var(--oceandry )} /* #000080 rgb( 0, 0,128 ) hsl( 240,100%,25% ) */ .f-calcmix {color:var(--calcmix )} .f-marinphos {color:var(--marinphos)} .f-flakes {color:var(--flakes )} .f-algenexit {color:var(--algenexit)} .f-halogene {color:var(--halogene )} .f-magnesium {color:var(--magnesium)} .f-floras {color:var(--floras )} .f-carbonat {color:var(--carbonat )} .f-strontium {color:var(--strontium)} .f-aquaclean {color:var(--aquaclean)} .f-elements {color:var(--elements )} .f-calcium {color:var(--calcium )} .f-calcit {color:var(--calcit )} .f-carbon {color:var(--carbon )} .f-oceandry {color:var(--oceandry )} } /* Gecko Hacks */ html.is--firefox {margin-bottom:1px;min-height:100%;} } /* @supports (display:grid) and (display:flex) and (object-fit:cover) */ /**! * TinyMCE editor helper classes from backend `marineart-editor.css` * .left und .right sind schon im core + werden hier nur ergänzt */ @media all { img.blog--image, p > img:first-child, p > img:only-child { border:none; outline:1px solid #999; /* margin-top:1.35em; */ /* mit akt. absatzschrift gleichkommen */ margin-bottom:.62em; box-shadow:4px 4px 12px 1px #999; } /* helper classes - IMG only!! */ img.left, img.right {margin-bottom:.62em;} .left-30, .left-50, .left-60 {float:left;margin-right:1em;} .right-30, .right-50, .right-60 {float:right;margin-left:1em;} .left-30, .right-30 {width:32%;height:auto;} .left-50, .right-50 {width:49%;height:auto;} .left-60, .right-60 {width:60%;height:auto;} } /* .eof */