/* * Include SCSS Imports */ @import "general/import"; @import 'general/_global-colors'; //general styles /* 100% gradient for home */ body { background: none; } /* stage reset to full width */ #main-wrapper { width: 100%; padding-bottom: 0; } #content-area { margin: 0 auto; width: 100%; overflow: visible; } #headContainer { position: absolute; left: 0; top: 0; width: 100%; border-bottom: 1px solid rgba(255,255,255, 0.4); background-color: rgba(25, 34, 79, 0.7); z-index: 153; } #headContainer > #header { margin: 0 auto; } #footerContainer { padding-bottom: 90px; width: 100%; position: static; background-color: $color-grey-19; } #footer { width: 100%; padding-bottom: 24px; margin-bottom: 0; } #footer #navigation-footer, #footer .navigation-breadcrumbs { overflow: hidden; background: none; } #footerContainer #footer .footer-logo, #footerContainer #footer .footer-legalnote { position: absolute; float: none; width: auto; } #footerContainer #footer .footer-logo { left: 50%; right: auto; margin-left: -480px; } #footerContainer #footer .footer-legalnote { position: inherit; float: right; } /* ========================================================================== * Homepage Rebrush (08.04.2014) * ========================================================================*/ #content-area { padding-top: 0; } //#content-area .home{ // display: none; //} #header { height: 92px; } #mainStage { width: 100%; height: 680px; overflow: hidden; background: $color-bg-white url("../img/bg-grad-o2-150.png") repeat-x scroll center top ; border-bottom: 6px solid $color-grey-19; } .segmentContainer { height: 100%; position: relative; } .giantCaroussel { position: relative; } .giantCaroussel-c-item { width: 100%; height: 588px; background-size: cover; background-position: center bottom; float: left; padding-top: 92px; } .giantCaroussel-c-navi { left: 50%; margin-left: -472px; display: table; z-index: 100; } .segmentSwitcher { left: auto; right: 0; } .giantCaroussel-c-navi { position: absolute; bottom: 12px; margin-left: -481px; width: 948px; } .segmentSwitcher > li, .giantCaroussel-c-navi > li { display: table-cell; width: 200px; text-align: center; // Fix Safari vertical-align: top; } .segmentSwitcher > li a, .giantCaroussel-c-navi > li a { display: block; } .segmentSwitcher-c-navi { border-bottom: 1px solid $color-white; top: 110px; position: absolute; width: 948px; height: 39px; z-index: 100; left: 50%; margin-left: -474px; } .segmentSwitcher li a{ margin-left: 5px; } .segmentSwitcher li:first-child a { margin-left: 0; } .segmentSwitcher a { background-color: rgba(97, 103, 103, 0.3); padding-top: 4px; } .segmentSwitcher span { display: inline-block; padding-left: 22px; padding-right: 8px; line-height: 32px; font-family: $font-FrutigerThin; font-size: 18px; } .segmentSwitcher > .active a { border-bottom: 4px solid; position: relative; } .segmentSwitcher > .active span { padding-left: 0; background: none; font-family: $font-FrutigerRoman; box-shadow: none; } .segmentSwitcher > .active { width: 45%; position: relative; } .segmentContainer-e-blue .segmentSwitcher > .active a { border-bottom-color: $color-blue-1; } .segmentContainer-e-violet .segmentSwitcher > .active a { border-bottom-color: $color-violet; } .segmentContainer-e-turkis .segmentSwitcher > .active a { border-bottom-color: $color-turkis; } .segmentContainer-e-grey .segmentSwitcher > .active a { border-bottom-color: $color-grey-20; } .segmentSwitcher, .segmentSwitcherContainer:before { width: 948px; position: absolute; } .segmentSwitcher-c-navi { border-bottom: 0; top: 110px; padding-left: 42px; left: 50%; position: absolute; width: 911px; height: 40px; overflow: hidden; } .segmentSwitcher-c-naviBar { background: $color-white url('../img/bg-segment-switcher-ico.png') 8px 13px no-repeat; width: 29px; height: 40px; display: block; position: absolute; top: 0; left: 0; z-index: 101; } .segmentSwitcher-c-naviBar:after { content: ' '; position: absolute; right: -22px; top: 0; border-width: 20px 11px; border-style: solid; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } .segmentContainer-e-grey .segmentSwitcher-c-naviBar { background-color: $color-grey-20; transition: background-color 500ms ease; } .segmentContainer-e-violet .segmentSwitcher-c-naviBar { background-color: $color-violet; transition: background-color 500ms ease; } .segmentContainer-e-blue .segmentSwitcher-c-naviBar { background-color: $color-blue-1; transition: background-color 500ms ease; } .segmentContainer-e-turkis .segmentSwitcher-c-naviBar { background-color: $color-turkis; transition: background-color 500ms ease; } .segmentContainer-e-grey .segmentSwitcher-c-naviBar:after { border-left-color: $color-grey-20; transition: border-left-color 500ms ease; } .segmentContainer-e-violet .segmentSwitcher-c-naviBar:after { border-left-color: $color-violet; transition: border-left-color 500ms ease; } .segmentContainer-e-blue .segmentSwitcher-c-naviBar:after { border-left-color: $color-blue-1; transition: border-left-color 500ms ease; } .segmentContainer-e-turkis .segmentSwitcher-c-naviBar:after { border-left-color: $color-turkis; transition: border-left-color 500ms ease; } /* Set following nav bars to hidden, avoid problems with calculating dynamic width of slider elements */ /* Note: The following 2 nav bar elements will be shown by "visibility:visible" from the o2Cms.stageHome.affinityTeaser.showNavBars() function */ .js-giantCaroussel-navi:first-child, .segmentSwitcher-c-navi{ visibility: hidden; } .segmentSwitcherContainer { overflow: hidden; position: relative; height: 100%; width: 100%; } .segmentSwitcherContainer:before { content: " "; border-bottom: 1px solid $color-white; display: block; bottom: 0; } .giantCaroussel-c-navi > li { border-left: 11px solid transparent; overflow: hidden; } .giantCaroussel-c-navi > li .progress { display: none; } .giantCaroussel-c-navi > .active .progress { display: block; position: relative; } .giantCaroussel-c-navi > .active .progress > span { position: absolute; left: 0; bottom: 0; display: block; text-indent: -9999px; width: 0; height: 4px; } .segmentContainer-e-blue .progress > span { background-color: $color-blue-1; } .segmentContainer-e-violet .progress > span { background-color: $color-violet; } .segmentContainer-e-turkis .progress > span { background-color: $color-turkis; } .segmentContainer-e-grey .progress > span { background-color: $color-grey-20; } .giantCaroussel-c-navi > li a { padding: 12px 6px; display: block; font-family: $font-FrutigerThin; font-size: 20px; line-height: 22px; white-space: nowrap; } .giantCaroussel-c-thumbImg { float: left; height: 35px; padding-left: 6px; left: -6px; position: relative; top: -6px; } .segmentContainer-e-blue .giantCaroussel-c-navi > li.active a { border: 1px solid $color-bg-blue-13; } .segmentContainer-e-blue .giantCaroussel-c-navi > li a { background-color: rgba(0, 134, 195, 0.9); outline: 1px solid rgba(0, 134, 195, 0.9); } .segmentContainer-e-violet .giantCaroussel-c-navi > li a { background-color: rgba(149, 45, 152, 0.9); outline: 1px solid rgba(149, 45, 152, 0.9); } .segmentContainer-e-turkis .giantCaroussel-c-navi > li a { background-color: rgba(1, 183, 180, 0.9); outline: 1px solid rgba(1, 183, 180, 0.9); } .segmentContainer-e-grey .giantCaroussel-c-navi > li a { background-color: rgba(136, 136, 136, 0.9); outline: 1px solid rgba (136, 136, 136, 0.9); } .giantCaroussel-c-navi > li:first-child { border-left: 0; } .giantCaroussel-c-navi > li.active a { background-color: #fff; font-family: $font-FrutigerRoman; } .segmentContainer-e-blue .giantCaroussel-c-navi > li.active a { color: $color-link-blue-1; } .segmentContainer-e-violet .giantCaroussel-c-navi > li.active a { color: $color-violet; border: 1px solid $color-violet; } .segmentContainer-e-turkis .giantCaroussel-c-navi > li.active a { color: $color-turkis; border: 1px solid $color-turkis; } .segmentContainer-e-grey .giantCaroussel-c-navi > li.active a { color: $color-grey-20; border: 1px solid $color-grey-20; } .giantTsr-c-copy .feature-list ul li, .giantTsr-c-copy ul li { z-index: 0; background-image: url('../img/ico-check-white.png'); background-repeat: no-repeat; margin-bottom: 1em; color: $color-shopnew-white; padding-left: 30px; display: block; } .giantTsr-c-copy .feature-list ul li { font-size: 13px; /* 1.1818em * base font size 11 = 13 px */ line-height: 16px; } .giantTsr-c-copy ul li { text-align: left; font-size: 15px; line-height: 18px; } .giantTsr-c-copy ul li:first-child + li + li ~ li { display: none; } #content-area .giantTsr .wmInfoIcon, #content-area .giantTsr .wmTooltip.wmInfoIcon, #content-area .giantTsr .lnk.wmInfoIcon { z-index: 12; } .giantCaroussel, .giantCaroussel-c-itemStrip { height: 100%; } .giantCaroussel-c-itemStrip { position: relative; } .giantCaroussel-c-item .content { margin: 60px auto; float: none; position: relative; color: #fff; } .giantTsr { overflow: hidden; position: relative; } .giantTsr > img, .giantTsrLnk { display: block; position: absolute; top: 0; right: 0; } .giantTsr-c-headline1-blue span.small, .giantTsr-c-headline1-blue { color: $color-blue-18; text-shadow: none; } .giantTsr-c-headline1 { position: relative; z-index: 10; font-family: $font-FrutigerThin; font-weight: normal; font-size: 75px; line-height: 78px; margin: 12px auto 6px auto; } .giantTsr-c-headline1 .small { font-size: 24px; display: block; line-height: 30px; margin-top: 20px; font-weight: bold; font-family: $font-FrutigerThin; } .giantTsr .giantTsr-c-headline1.giantTsr-c-headline1-blue { text-shadow: none; } .giantTsr-c-headline1, .giantTsr-c-copy { text-align: center; width: 75%; text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); -moz-text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); -webkit-text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); } .giantTsr-c-headline1.giantTsr-c-headline1-e-hlfSize { font-size: 75px; line-height: 78px; } .giantTsr-c-headline1.giantTsr-c-headline1-e-hlfSize, .giantTsr-c-copy.giantTsr-c-copy-e-hflSize { width: 50%; float: left; } .giantTsr-c-copy { font-family: $font-FrutigerThin; margin: 20px auto 0; text-weight: bold; } .giantTsr-c-copy p { font-size: 24px; font-weight: bold; line-height: 30px; text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); -moz-text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); -webkit-text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); } .giantTsr-c-copy ul { display: inline-block; margin: 48px auto 0 auto; } .giantTsr-c-copy .productTable.productTable-e-hardware, .giantTsr-c-copy .productTable.productTable-e-bundle { margin-top: 0; } .giantTsr-c-copy table.productTable.productTable-e-tarif { margin-top: 100px; } .giantTsr-c-copy .productTable td { vertical-align: bottom; } .giantTsr-c-copy.giantTsr-c-copy-e-hflSize .productTable { float: right; margin-top: 16px; } .giantTsr-c-copy .productTable .btn { position: relative; } .giantTsr-c-copy .productTable .teaserProduct { position: relative; } .giantTsr-c-copy .productTable .teaserProductBundle { position: absolute; right: 0; top: 20px; z-index: 1; } .giantTsr-c-copy .productTable.productTable-e-hardware .teaserProductBundle, .giantTsr-c-copy .productTable.productTable-e-tarif .teaserProductBundle { display: none; } .giantTsr-c-copy .productTable .teaserProductBundle + .teaserProduct { left: -36px; } .giantTsr .disturber { display: block; position: absolute; } .giantTsrLnk { width: 100%; height: 100%; z-index: 11; text-indent: -9999px; } .segmentArticle { margin-top: 6px; } .segmentArticle .article-headline1 { font-family: $font-FrutigerThin; font-size: 26px; } .segmentArticle-e-blue .article-headline1, .segmentArticle-e-blue .article-headline2 { color: $color-link-blue-1; } .segmentArticle-e-violet .article-headline1, .segmentArticle-e-violet .article-headline2 { color: $color-violet; } .segmentArticle-e-turkis .article-headline1, .segmentArticle-e-turkis .article-headline2 { color: $color-turkis; } .segmentArticle-e-grey .article-headline1, .segmentArticle-e-grey .article-headline2 { color: $color-grey-20; } .tsr.tsr-e-noBorder .tsr-c-border { display: none; } /* Main Background */ #navigation-main { background: none; } .giantTsr-c-containerBottom { position: absolute; bottom: 110px; left: 0; width: 60%; font-size: 14px; text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); -moz-text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); -webkit-text-shadow: 0 0 5px rgba(0, 59, 109, 0.6), 0 0 5px rgba(0, 59, 109, 0.6), 0 0 0.5px rgba(0, 59, 109, 0.6); } .giantTsr-c-copy-blue .feature-list ul { margin-top: 0; } .giantTsr-c-copy-blue .feature-list li { color: $color-blue-18; text-shadow: none; font-weight: bold; } .giantTsr-c-copy .feature-list li:first-child + li + li ~ li { display: block; } .giantTsr-c-copy-blue p { color: $color-blue-18; text-shadow: none; font-weight: bold; } .giantTsr-c-copy.giantTsr-c-copy-blue .feature-list li { color: $color-blue-18; } .giantTsr-c-headline1-rt { float: right; width: 60%; } .giantCaroussel .giantTsr a.btn { position: absolute; top: 0; right: 0; text-shadow: none; font-weight: normal; } .giantCaroussel .giantTsr .btn.big span { font-size: 15px; } html.o2mobilePage { overflow-y: none; } .opacityCarouselHidden { filter: alpha(opacity=0); // Fallback IE 7 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; // Fallback IE 8 opacity: 0; } .opacityCarouselVisible { filter: alpha(opacity=100); // Fallback IE 7 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; // Fallback IE 8 opacity: 1; } /* Firefox */ @-moz-document url-prefix() { .giantCaroussel-c-navi-bullet { top: -6px; } } .sm-box-a a { color: #0086C3 } #footerContainer .tsr-c-bottomContainer .related-links a.lnk{ background-position: 0 -194px; color: #0086c3; } #js-Affinity-Teaser, #js-Basket-Teaser { height: 460px; display: none; margin-left: -6px; margin-right: 8px; } .js-Affinity-Preloader { width: 100%; height: 460px; margin-left: -6px; margin-right: 8px; background-image: url('../img/affinity-preloader.gif'); background-repeat: no-repeat; background-position: 50% 47%; opacity: 0.8; display: inline-block; } /* ========================================================================== * Content-Modules * ========================================================================*/ @import 'partials/_home-m-widget'; // (brand) icon bar /* Sitemap //========================================================================*/ #footerContainer #footer .sitemap { width: 100%; } .sitemap > .grid12 { float: none; margin: 0 auto; } .sitemap-c-headline, .sitemap a.lnk { color: $color-white; } /* Dividing Lines //========================================================================*/ @import "home-dividing-lines"; /* Button Styles //========================================================================*/ @import 'partials/_home-m-buttons.scss'; // new button styles /* Trustbar Styles //========================================================================*/ @import 'partials/_styles-m-trustbar.scss'; // trustbar styles /* Styles to insert new widgets in old startpage //========================================================================*/ @import 'partials/_home-m-new-for-old.scss'; // styles to insert elements in old Startpage