/* This code should never be published as a seperate file. It needs to be minified and inlined into the homepage . BT 20/12/14. */ /*==================================== VARIABLES & MIXINS ====================================*/ /* Prefixes ============================================*/ /* Colors ============================================*/ /* Fonts */ /* Media Queries ============================================*/ /*Placeholders ============================================*/ .logo, .nav-toggle, .nav-toggle__label { text-indent: 100%; white-space: nowrap; overflow: hidden; } /* Mixins ============================================*/ /* apply a natural box layout model to all elements, but allowing components to change */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } header { position: relative; min-height: 122px; overflow: hidden; } header ul.utilities { visibility: hidden; opacity: 0; } .logo { background: url("/health/assets-public/images/ui-elements/slimming-world.gif") center center no-repeat; background-size: contain; width: 180px; height: 112px; float: left; } @media (max-width: 640px) { .logo { width: 140px; height: 80px; margin: 2em auto 0.25em auto; float: none; display: block; } } .js .utilities #regionSelectionButton, .skip { display: none; } .utilities-login { display: none; } .utilities-sitewide { max-width: 960px; margin: 6px auto 12px auto; font-size: 0.8em; text-align: right; padding: 2px; } .utilities-sitewide li { display: inline; margin: 0px; } .utilities-sitewide a { color: #fff; text-decoration: none; border-right: 1px solid gray; padding: 0px 7px 0px 6px; text-align: center; line-height: 1; } .hp-section, .video-holder, .quote-panel.margaret-panel, .bolognese-link { visibility: hidden; } #joining-a-group, #joining-online { float: right !important; } body { margin: 0; padding: 0; background-color: #272626; font-family: sans-serif; } header, .nav-wrapper { background-color: #fff; text-align: left; } div.find-a-group { text-align: center; color: #fff; background-color: #222120; padding: 0 0.5em; float: right; margin: 38px 0px 18px 18px; border-radius: 0px; width: 100%; } @media (min-width: 480px) { div.find-a-group { border-radius: 10px 0px 0px 10px; width: 260px; } } div.find-a-group .btn-small, div.find-a-group .sw-input { width: 30% !important; position: relative; left: 2px; padding: 8px 6px !important; clear: none; display: inline-block; float: left; margin-left: 8px; font-size: 1em; } div.find-a-group .btn-small:last-child, div.find-a-group .sw-input:last-child { line-height: 21px; } div.find-a-group .sw-input { font-weight: bold; color: #333; border-radius: 3px; border: 1px solid transparent; } div.find-a-group .btn-small { background-color: #e3a52f; color: #fff; letter-spacing: 1px; border-radius: 2px; cursor: pointer; } div.find-a-group a.btn-small { width: 100% !important; display: block !important; left: 0; text-decoration: none; margin: 1.25em 0; } div.find-a-group label { font-size: 1em; font-weight: normal; display: block; margin-bottom: 0.5em; } div.find-a-group h2 { font: 1.05em "Source Sans Pro", sans-serif; margin: 0.8em; line-height: 23px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); color: #fff; } div.find-a-group .header__slimmingworld-online { border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 1em; } div.find-a-group p { font: 0.8em "Source Sans Pro", sans-serif; line-height: 1.6; } div.find-a-group .swo__cta-desc { margin: 0 2em; } div.find-a-group em { color: #e0c42c; font-style: normal; } div.find-a-group .group--cta__telephone { display: block; clear: both; font-size: 18px; line-height: 37px; } div.find-a-group .group--cta__telephone a { color: #fff; text-decoration: none; } #mainNav { margin-bottom: 0; margin-top: 0; } .nav-wrapper { margin: 0; padding: 5px 0px 0px 0px; overflow: hidden; } .sml-screen--nav .nav-wrapper { padding: 0; } #navigation { background-color: #1f1e1e; } #navigation ul { display: block; overflow: hidden; font-size: 14px; padding: 0 !important; } #navigation li { margin: 0px; padding: 0; float: left; text-align: center; line-height: 15px; font-size: .91667em; border-right: 1px dashed #242424; } #navigation li a { display: block; color: #fff; text-decoration: none; } @media screen and (min-width: 640px) { .navigation a { padding: 8px 13px; } } @media screen and (min-width: 640px) and (max-width: 830px) { #home { display: none; } } @media screen and (min-width: 830px) { .navigation a { padding: 8px 20px; } } .sml-screen--nav .navigation a { display: block; float: none; padding: 14px 0 14px 22px; text-align: left; } div.wrapper__home { padding: 0; border: none; max-width: 948px; margin: 0 auto; } ul { list-style: none; } .homepage-hero { position: relative; margin: -10px auto 0 auto; height: 481px; display: block; /* border: 1px solid #fff; border-width: 1px 5px 6px 5px; // a bit hacky to make sure the bg image is the same size exactly, when next to the nav & padding*/ background: #fff none right center no-repeat; background-size: cover; } /* h1 */ .love-slimming-world { display: none; } @media screen and (min-width: 480px) { .love-slimming-world { display: block; position: absolute; right: 420px; width: 195px; height: 165px; margin: 0; margin-left: -125px; top: 30px; text-indent: -300%; white-space: nowrap; overflow: hidden; background: transparent url("/health/assets-public/images/hp-2015/autumn/love-life-love-slimming-world.png") center center no-repeat; background-size: contain; } } @media screen and (min-width: 480px) and (max-width: 880px) { .love-slimming-world { right: 31%; width: 119px; } } @media screen and (min-width: 480px) and (max-width: 695px) { .love-slimming-world { display: none; } } @media screen and (min-width: 800px) { .love-slimming-world { left: 48%; min-width: 318px; height: 274px; } } @media screen and (max-width: 900px) { .love-slimming-world { min-width: 268px; height: 150px; } } .hp-section { margin: 0; background-color: #fff; } .quote-panel--campaign { padding: 3em 0; } @media (min-width: 640px) { .quote-panel--campaign { min-height: 461px; } } /* section.hp-section */ .margaret-panel blockquote { background: transparent url("data:image/gif;base64,R0lGODlhGgASALMAAP///1NJS6+qq15VV/Tz87q2t93b24F6e9HOz3Vtb5iSk2phY6Oen4yGh8bCw+jn5yH5BAAAAAAALAAAAAAaABIAAASGEMhJq73WIEwdN0dQcICwDJgQJAZHJAFDXEqgkK+Y2iQQjpfHYDDjFAIHTu1GWugwg4CAZAgENpdqjKQKeC4I64ABWwAn3QXDyZqErXArVtKNBwYPCcEOb3T4VlMSDYBJFFF8ggBCiRVHfC0TBohWCUUUj3CKEwQCBwcClxUICgcNcz2pExEAOw==") left 0 top 4px no-repeat; } .quote-panel { visibility: visible; opacity: 1; position: relative; } .quote-panel blockquote { position: relative; z-index: 999; text-align: center; margin: auto; width: 90%; max-width: 538px; padding-left: 26px; color: #b9aaaa; margin-top: 2em; } .quote-panel p.quote-body { font: normal 1.35em/1.4 "Sorts Mill Goudy", georgia, serif !important; text-shadow: 1px 1px 5px #fff; color: #585757; margin-top: 0; padding-right: 26px; } @media (min-width: 640px) { .quote-panel p.quote-body { font: normal 1.7em/1.4 "Sorts Mill Goudy", georgia, serif !important; } } .quote-panel .contained-cite { font: 0.9em "Source Sans Pro", sans-serif; background-image: none; width: 100%; color: #130105; } .quote-panel a { color: #547692; text-decoration: underline; } .quote-panel a:hover, .quote-panel a :active, .quote-panel a :focus { text-decoration: none; } cite { font-size: 100% !important; font-weight: bold; font-style: normal; } header a.btn { display: none; } @media (min-width: 640px) { header a.btn { position: absolute; right: 0.5em; padding-top: 0.3em; padding-bottom: 0.35em; font: 1em "Source Sans Pro", sans-serif; text-decoration: none; text-align: center; color: #fff; width: 172px; background-color: #94C069; } } .nav-toggle, .nav-toggle__label { display: none; } .small-screen--additional-nav { display: none; } @media screen and (max-width: 640px) { .nav-toggle__label { display: block; left: 0; top: 0; width: 100%; height: 52px; background: #1E1E1E url("data:image/gif;base64,R0lGODlhIABIAJECAJGRkf///////wAAACH5BAEAAAIALAAAAAAgAEgAAAJrlI+py+0Po5y0RoCz3vzxD1riSJYLiGpempruCzds68xojOf6zvf+DwwKh8Si8YhMKpfMpvMJjUqnxEAAYqVYr41txbsAf7MJscVsFoHToy2b5MbFYW6yaW1v598SNv/B98cgKKiQN8glVAAAOw==") left 8px top 14px no-repeat; padding: 4px; z-index: 9; } .nav-toggle:checked + label { position: fixed; top: 0; left: 0; z-index: 99999999; } } @media screen and (max-width: 640px) and (max-width: 352px) { .nav-toggle:checked + label { margin-left: -52px; } } @media screen and (max-width: 640px) { .nav-toggle:checked + label, .nav-toggle:checked + label + .navigation, .nav-toggle:focus + label + .navigation { transform: translateX(300px); transition: transform 215ms cubic-bezier(0, 0.98, 0.58, 1); } .navigation { display: block; min-height: 100%; -webkit-backface-visibility: hidden; position: fixed; top: 0px; left: -300px; width: 100%; max-width: 300px; z-index: 9999999; overflow-y: auto; transition: transform 115ms cubic-bezier(0, 0.98, 0.58, 1); } .navigation li { display: block; float: none; clear: both; width: 100%; border-right: none; } .navigation li br { display: none; } .navigation a { display: block; float: none; padding: 18px 0 18px 22px; text-align: left; } .navigation a:hover, .navigation a:focus, .navigation a:active { background-color: #900; color: #fff; } }