/** * * * * ..',;::ccclllooooooolllccc:;;,'.. * 'xKNNWMMMMMMWNXK000000KXWMMMMMWWNX0c * .xWMMMMMMMMKc'... ....,dNMMMMMMMK; * .,c'.xWMMMMMMM0, cNMMMMMWO' * .cxKWWo .dNMMMMMMMO. .lXMMMMMXo. * .ckXWMW0c. :KMMMMMMK, 'kNMMMMNk, * '0WMMMMNc .dXMMMXc ,dXMMMMNx; * ;xKWMMMXx:'. 'oOx, .,lONMMMNOl' * .;oOXWMWN0xoc:;;;;;:ldkKWMMWKxl' * .;ldk0XNWWWWWWWWNXKOxoc,. * .';:loooolc:,.. * * * * * ................... ... ................. ............... * ,x0KKOdodooooooooooo, cKK0o. ;0KKKKkdooooddk0KKOl. ;x0KKOdooooodkKK0k: * ,KMMMO,. dMMMX; cWMMMO' .oNMMWo ,KMMWk' .dWMMN: * cWMMWl . dMMMX; cWMMMo .cXMMWd.cWMMN: ,KMMMo * lWMMWl .x0o. dMMMX; cWMMMo ;dxk0Kklc;. lWMMN: ,KMMMd * cWMMWl oWMWKx: dMMMX; cWMMMo lNMMMX: lWMMN: ,KMMMd * :NMMWd ,KMMMMNo. dMMMX; cWMMMo .oNMMMK; :NMMWl cNMMWl * .dNMMNklcccccoKMMMMMNc lWMMX; cNMMNc ;0WMMXl. .dNMMXxlccccccdXMMWk. * .:xkkkkkkkkkkkkkkkkk; .lxkd. 'xkxc. 'dkkkd. .:xkkkkkkkkkkkkkxc. * * */ /** ____________________________________________________________________________ * ______________ _ __ ___ __ _ __ * _____________ / | / /__ _ _______ / | _____/ /_(_)____/ /__ _____ * ____________ / |/ / _ \ | /| / / ___/ / /| | / ___/ __/ / ___/ / _ \/ ___/ * ___________ / /| / __/ |/ |/ (__ ) / ___ |/ / / /_/ / /__/ / __(__ ) * __________ /_/ |_/\___/|__/|__/____/ /_/ |_/_/ \__/_/\___/_/\___/____/ * _____________________________________________________________________________ */ /** * container-news-blog (contains all html) * * Mirroring the .center rules from Bootstrap v4.3.1 used in the SFCC main site. * -Soleil Golden (2020-02-26) */ .blog-post-header-bottom.col-12, /* ^^ Title ^^ */ /* .blog-article .blog-related-products .product-tile-caro, */ /* ^^ Featured Products ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ /* .blog-article .blog-related-content, */ /* ^^ Related Articles ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ .blog-article .container-news-blog h2, .blog-article .container-news-blog h3, .blog-article .container-news-blog p, .blog-article .container-news-blog ul, .blog-article .container-news-blog ol, .container-news-blog .news-img-center, .container-news-blog .news-quote, .container-news-blog .news-credits { width: 100%; padding-left: 12px; padding-right: 12px; margin-right: auto; margin-left: auto; } .blog-post-header-bottom.col-12, /* ^^ Title ^^ */ /* .blog-article .blog-related-products .product-tile-caro, */ /* ^^ Featured Products ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ /* .blog-article .blog-related-content, */ /* ^^ Related Articles ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ .blog-article .container-news-blog h2, .blog-article .container-news-blog h3, .blog-article .container-news-blog p, .blog-article .container-news-blog ul, .blog-article .container-news-blog ol, .container-news-blog .news-img-center, .container-news-blog .news-credits { max-width: 100% !important; } @media (min-width: 1025px) { .blog-post-header-bottom.col-12{ padding: 0px; } } @media (min-width: 1025px) { .blog-post-header-bottom.col-12, /* ^^ Title ^^ */ /* .blog-related-products-title, */ /* ^^ Featured Products Title ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ /* .blog-article .blog-related-products .product-tile-caro, */ /* ^^ Featured Products ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ /* .blog-article .blog-related-content, */ /* ^^ Related Articles ^^ , commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ .blog-article .container-news-blog h2, .blog-article .container-news-blog h3, .blog-article .container-news-blog p, .blog-article .container-news-blog ul, .blog-article .container-news-blog ol, .container-news-blog .news-img-center, .container-news-blog .news-quote, .container-news-blog .news-credits { padding-left: 20%; padding-right: 20%; } } /* To pad out these elements a bit more for presentaton */ .blog-article .container-news-blog p ul, .blog-article .container-news-blog p ol { padding-left: 32px; } /* To prevent massive padding inside of p tags (even though that's invalid HTML) */ .blog-article .container-news-blog p ul, .blog-article .container-news-blog p ol { padding-left: 20px; padding-right: 0px; } @media (min-width: 1025px) { .blog-article .container-news-blog p ul, .blog-article .container-news-blog p ol { padding-left: 25%; padding-left: calc(20%+20px); padding-right: 0px; } } /** * h3, h2, h1, p (text) * * -Soleil Golden (2020-02-26) */ /* The blog entry title omg */ .blog-post-header-bottom.col-12 { margin-top: 100px; } @media (min-width: 1024px) { .blog-post-header-bottom.col-12 { margin-top: 30px; } } /* The blog entry sub-title */ .container-news-blog h2.sub-title, .container-news-blog h3.sub-title { font-family: NewsGothicBT-RomanCondensed, sans-serif; font-size: 1.125rem; /* 18px (where 1rem = 16px) */ line-height: 100%; margin-top: 25px; margin-bottom: 20px; color: #403f3a; } /* All p tags */ .blog-article .container-news-blog p { margin-block-start: 1em; margin-block-end: 2em; line-height: 26px; } /* THE FIRST P TAG Two elements of CSS styling with comments by Soleil Golden. 2020-02-27 */ .blog-article .container-news-blog p:first-of-type, /*** The announcer moves to announce the arrival of yet another string of classes supporting a simple paragraph element, with a special accompanying instructional class in tow. She clears her throat, preparing her very best neutral expression. The last thing she wanted was to attract the attention of such unruly elements. BLOG ARTICLE CONTAINER NEWS BLOG P, She pauses for just long enough to scan the accompanying class, to determine if they warranted further introduction, */ .blog-article .container-news-blog p.after-title { /* before determining that such would be neither necessary nor appropriate. FIRST OF HIS NAME, AND GUEST. It was the right call. */ margin-top: 30px; } /* Remove height-padding from title on blog posts */ .blog-article .header { height: auto; } /* Main headings */ .container-news-blog h2 { font-size: 38px; color: #777; } /** * news-img-center (images centered) * * -Soleil Golden (2020-02-26) */ .blog-article .container-news-blog .news-img-center { text-align: center; margin: 60px auto; width: 100%; height: auto; padding: 0px; } @media (min-width: 1024px) { .blog-article .container-news-blog .news-img-center { width: auto; margin: 112px auto; padding: 0 20%; } } .blog-article .container-news-blog .news-img-center img { max-width: 100%; } /** * news-quote (when there is a quote in center) * * -Soleil Golden (2020-02-26) */ .blog-article .container-news-blog .news-quote { color: #777777; font-family: 'NewsGothicBT-RomanCondensed', sans-serif; font-size: 1.875rem; /* 30px (where 1rem = 16px) */ line-height: 125%; text-transform: uppercase; text-align: center; margin: 110px auto; padding: 0; font-weight: 400; max-width: 60% !important; } @media (min-width: 1024px) { .blog-article .container-news-blog .news-quote { max-width: 560px !important; } } /** * news-img-w100 (when the image needed to be 100% edge to edge) * * -Soleil Golden (2020-02-26) */ .blog-article .container-news-blog .news-img-w100 { max-width: 100%; width: 100%; margin: 110px auto; padding: 0; display: block; } @media (min-width: 1024px) { .blog-article .container-news-blog .news-img-w100 { margin: 110px auto; } } .blog-article .container-news-blog .news-img-w100 img { width: 100%; height: auto; } /** * news-credits (when the photos have a list of credits at bottom) * * -Soleil Golden (2020-02-26) */ .container-news-blog .news-credits { display: block; } .container-news-blog .news-credits li { display: block; font-weight: normal; font-family: NewsGothicBT-Roman, sans-serif; margin: 0; } .container-news-blog .news-credits li a { text-transform: uppercase; } /** * Featured Products * - Soleil Golden (2020-02-26) */ /* Spacing above title */ /* .blog-article .blog-related-products.container, .blog-article .blog-related-content{ margin-top: 125px; } @media (min-width: 1024px) { /* Carousel (to prevent it from loading out of alignment - may be unnecessary) */ /* .blog-article .product-tile-caro .slick-list { margin-left: 0px; padding: 0px; } } /* commented out for cap-gemini to do in the main template ¯\_(ツ)_/¯ */ /** ____________________________________________________________________________ * ____________________ ______ __ __ ____ * ___________________ / ____/___ ____ / /____ ____ / /_ / __ \____ ______ * __________________ / / / __ \/ __ \/ __/ _ \/ __ \/ __/ / /_/ / __ `/ ___/ * _________________ / /___/ /_/ / / / / /_/ __/ / / / /_ / ____/ /_/ (__ ) * _________________ \____/\____/_/ /_/\__/\___/_/ /_/\__/ /_/ \__, /____/ * ______________________________________________________________ /____/ * _____________________________________________________________________________ */ /* Applying the same content spacing as with news articles */ .content-page .content-container-generic { width: 100%; padding-left: 12px; padding-right: 12px; margin-right: auto; margin-left: auto; max-width: 100% !important; } @media (min-width: 1025px) { .content-page .blog-post-header-bottom.col-12{ padding: 0px; } } @media (min-width: 1025px) { .content-page .content-container-generic { padding-left: 20%; padding-right: 20%; } } /* To make the header image full width */ .content-page img.header-img { width: 100%; } /* Breadcrumb active item */ .content-page .active-breadcrumb-item a { color: #403f3a; } /* Main headings */ .content-page h1{ margin-top: 80px; font-size: 38px; color: #777; } /* Sub-headings (and First sub-heading) */ .content-page h2{ font-family: NewsGothicBT-RomanCondensed, sans-serif; font-size: 1.125rem; /* 18px (where 1rem = 16px) */ line-height: 100%; margin-top: 60px; margin-bottom: 15px; color: #777; } /* Shortening the padding on the first sub-heading to match design */ .content-page h2:first-of-type { margin-top: 35px; } /* All p tags */ .content-container-generic p { margin-block-start: 1em; margin-block-end: 2em; line-height: 26px; } /* Overriding global CSS to keep all list entries from being bold */ .content-container-generic ol>li, .content-container-generic ul>li { font-family: NewsGothicBT-Roman,sans-serif; } /* Embiggening the H2s a little to match design */ .content-container-generic h2 { font-size: 22px; } /** ____________________________________________________________________________ * ____________________________ _____ _ ________ __ * ___________________________ / ___/(_)___ ___ / ____/ /_ ____ ______/ /_ * ___________________________ \__ \/ /_ / / _ \ / / / __ \/ __ `/ ___/ __/ * __________________________ ___/ / / / /_/ __/ / /___/ / / / /_/ / / / /_ * _________________________ /____/_/ /___/\___/ \____/_/ /_/\__,_/_/ \__/ * _____________________________________________________________________________ */ /* Main container for the size-chart pop-up - fixing desktop size */ @media (min-width: 768px) { .size-chart #sizechartModal { width: auto; height: auto; left: 50%; transform: translate(-50%, 0); } } /* Removing the padding from the header of the popup */ .size-chart #sizechartModal .modal-header, /* And the tabs below it */ .size-chart #sizechartModal ol>li+li, .size-chart #sizechartModal ul>li+li { padding: 0; margin: 0; } /* Making sure the modal header is on top so the popup can be closed */ .size-chart #sizechartModal .modal-header { z-index: 1200; } /* Removing the header text from the top of the window to match spec */ .size-chart #sizechartModal .modal-header div:first-child { display: none; } /* Getting rid of the iconography next to the Tabs */ .size-chart #sizechartModal a:before { display: none; } /* Setting the top tabs to the correct font and styling */ .size-chart #sizechartModal .nav-tabs.justify-content-center li, .size-chart #sizechartModal .nav-tabs.justify-content-center a { display: inline-block; font-family: NewsGothicBT-RomanCondensed,sans-serif; font-size: 20px; width: 50%; text-align: center; } /* Adding our signature underline to the tabs, fitting them to the style */ .size-chart #sizechartModal .nav-tabs.justify-content-center a { width: 100%; color: #bbb; padding-bottom: 10px; border-bottom: 1px solid #bbb; text-decoration: none; letter-spacing: 0.5px; } /* Darkening border on active and hover */ .size-chart #sizechartModal .nav-tabs.justify-content-center a.active, .size-chart #sizechartModal .nav-tabs.justify-content-center a:hover, .size-chart #sizechartModal .nav-tabs.justify-content-center a:active { color: #403F3D; text-decoration: none; border-bottom: 1px solid #403F3D; } /* Removing top padding from the image in the how to measure window */ .size-chart #sizechartModal .tab-pane img { padding-top: 15px !important; } /* How to Measure: Title */ .size-chart #sizechartModal h2 { font-size: 2rem; letter-spacing: 0px; } @media (min-width: 768px) { .size-chart #sizechartModal h2 { font-size: 18px; margin-top: 15px; margin-bottom: 10px } } /* Text body of how to measure section */ .size-chart #sizechartModal .modal-body p { line-height: 2.2; font-size: 100%; } /* Measurement Table */ .size-chart #sizechartModal table { width: 100%; } /* Every other row has a background color */ .size-chart #sizechartModal table tr:nth-of-type(even) { background-color: #eee; } /* and hover gets a darker background color */ .size-chart #sizechartModal table tr:hover { background-color: #ccc; } /* and everything is centered */ .size-chart #sizechartModal table tr th, .size-chart #sizechartModal table tr td { text-align: center; } /* Fixing padding on the second tab-set to match style */ .size-chart #sizechartModal .tab-content ul { padding: 0px; } /* Fixing padding on #pane2 */ .size-chart #sizechartModal #pane2 { padding-top: 20px !important; } /* Setting defalt font for the sub-tabs */ .size-chart #sizechartModal .tab-content .nav-tabs li, .size-chart #sizechartModal .tab-content .nav-tabs a { font-family: NewsGothicBT-Roman,sans-serif !important; padding: 0 2px } /* Darkening on active and hover */ .size-chart #sizechartModal .tab-content .nav-tabs a.active, .size-chart #sizechartModal .tab-content .nav-tabs a:hover, .size-chart #sizechartModal .tab-content .nav-tabs a:active { font-family: NewsGothicBT-Bold,sans-serif !important; text-decoration: none; }