/* Theme Name: Switchblade Full Launch Theme URI: http://switchbladegame.com Description: Custom theme for Switchblade Game Version: 1.0 Author: Splinter Author URI: http://splinter.co.uk */ /* =========================== CONTENTS: 01 Sensible defaults 02 Typography 03 General layout stuff 04 Media queries =========================== */ @import "css/reset.css"; @font-face { font-family: 'SwitchRodusCut'; src: url('fonts/roduscut700-webfont.eot'); /* IE9 Compat Modes */ src: url('fonts/roduscut700-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/roduscut700-webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('fonts/roduscut700-webfont.woff') format('woff'), /* Pretty Modern Browsers */ url("fonts/RODUScut700.otf") format("opentype"), url('roduscut700-webfont.svg#roduscut700-webfont') format('svg'); /* Legacy iOS */ font-weight: 700; font-style: regular } /* ---------------------------------------------------------------------------------------------------------- 01 Sensible defaults ---------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ div, article, section, header, footer, nav, li { position:relative; /* For absolutely positioning elements within containers (add more to the list if need be) */ } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; /* Don't forget to style your body to avoid user overrides */ } ::-moz-selection { background-color: #ececec; color:#8b0e0e; } ::selection { background-color: #ececec; color:#8b0e0e; } .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* ---------------------------------------------------------------------------------------------------------- 02 Typography ----------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ /* 12 / 16 = 0.75em (12px equivalent) 14 / 16 = 0.875em (14px equivalent) 16 / 16 = 1em (16px equivalent) 18 / 16 = 1.125em (18px equivalent) 20 / 16 = 1.25em (20px equivalent) 21 / 16 = 1.3125em (21px equivalent) 22 / 16 = 1.375em (22px equivalent) 24 / 16 = 1.5em (24px equivalent) 26 / 16 = 1.625em (26px equivalent) 28 / 16 = 1.75em (28px equivalent) 30 / 16 = 1.875em (30px equivalent) 32 / 16 = 2em (32px equivalent) 36 / 16 = 2.25em (36px equivalent) 40 / 16 = 2.5em (40px equivalent) 42 / 16 = 2.625em (42px equivalent) 48 / 16 = 3em (48px equivalent) 60 / 16 = 3.75em (60px equivalent) 72 / 16 = 4.5em (72px equivalent) */ body, input, textarea { font-size: 16px; font-family: 'Roboto Condensed', Arial, sans-serif; } .font-rodus { font-weight: 700; font-family: 'SwitchRodusCut', Arial, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 1px; text-rendering: optimizeLegibility; } body { background: #000000; color: #ffffff; } h1, h2, h3, h4, h5, h6 { font-weight: 700; font-family: 'SwitchRodusCut', Arial, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #f8d507; text-rendering: optimizeLegibility; } h2 { font-size: 2.625em; line-height: 1em; } h2.block_bg { background: #efd00d; color: #2b2b2b; padding: 10px 13px 0 18px; margin: 0; line-height: 1em; display: inline-block; } h2.block_bg { -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); } h2 .the_title { -ms-transform: skewX(15deg); -webkit-transform: skewX(15deg); transform: skewX(15deg); display: inline-block; } .underlined-title-wrapper { text-align: center; } .underlined-title { text-align: center; padding: 0 150px 2px 150px; display: inline-block; } .underlined-title .underline { display: block; height: 3px; width: 100%; position: absolute; bottom: 0; left: 0; background: url(img/yellow-line.png) no-repeat 50% bottom; background-size: cover; } h3 { font-size: 1.875em; } h3.block_bg { background: #efd00d; color: #2b2b2b; padding: 10px 13px 0 18px; margin: 0; line-height: 1em; display: inline-block; } h3.block_bg { -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); } h3 .the_title { -ms-transform: skewX(15deg); -webkit-transform: skewX(15deg); transform: skewX(15deg); display: inline-block; } .patchnote-item h2, .archive-news-item h2, .featured-news-item h2 { font-size: 2em; font-family: 'Roboto Condensed', Arial, sans-serif; letter-spacing: 0; } .underlined-post-title { padding: 0 0 15px 0; margin: 0 0 15px 0; display: block; background: url(img/yellow-line-cropped-fixed.png) no-repeat bottom right; background-size: 800px 3px; } .underlined-pack-title { padding: 0 0 8px 0; margin: 0 0 20px 0; display: block; background: url(img/yellow-line-cropped-fixed.png) no-repeat bottom right; background-size: 500px 3px; } p { font-size: 1em; line-height: 1.5em; } .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 { font-family: 'Roboto Condensed', Arial, sans-serif; letter-spacing: 0; } .page-content h1 { font-size: 2.625em; } .page-content h2 { font-size: 2em; margin: 0 0 15px 0; } .page-content .underlined-post-title h2 { margin: 0; padding: 0 60px 0 0; } .page-content .underlined-post-title { margin: 0 0 40px 0; } .page-content h3 { font-size: 1.75em; margin: 40px 0 15px 0; } .page-content h4 { font-size: 1.5em; margin: 30px 0 15px 0; } .page-content h5 { font-size: 1.375em; margin: 30px 0 15px 0; } .page-content h6 { font-size: 1.2em; margin: 30px 0 15px 0; } .page-content p { margin: 0 0 20px 0; } .page-content ul { margin: 0 0 20px 0; } .page-content li { font-size: 1em; line-height: 1.5em; margin: 0 0 15px 30px; list-style: disc; } .page-content ul li ul { margin: 15px 0 15px 0; } a { color: #efd00d; text-decoration: none; outline: 0; } a:hover { color: #ffffff; text-decoration: underline; } a:active, a:focus { outline: 0; border: none; -moz-outline-style: none; } .time { text-transform: uppercase; font-size: 0.875em; color: #efd00d; } /* ---------------------------------------------------------------------------------------------------------- 03 General layout stuff ------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------- */ .col1 { width: 5.98%; } .col2 { width: 14.52%; } .col3 { width: 23.07%; } .col4 { width: 31.62%; } .col5 { width: 40.17%; } .col6 { width: 48.71%; } .col7 { width: 57.26%; } .col8 { width: 65.81%; } .col9 { width: 74.35%; } .col10 { width: 82.90%; } .col11 { width: 91.45%; } .col12 { width: 100%; } .col20 { width: 20%; } .col50 { width: 50%; } .gutter-left { margin-left: 2.56%; } .gutter-right { margin-right: 2.56%; } .col1-pad-left { padding-left: 5.98%; } .col1-pad-right { padding-right: 5.98%; } .outer { width: 100%; } .inner { width: 1170px; margin: 0 auto; } .left { float: left; } .right { float: right; } .centered { margin-left: auto; margin-right: auto; } .square { width: 100%; padding-top: 100%; } .sixteen-nine { width: 100%; padding-top: 56.25%; } .eleven-four { width: 100%; padding-top: 36.36%; } a.btn-lozenge { display: inline-block; font-size: 18px; line-height: 35px; text-transform: uppercase; color: #fff; font-weight: 700; margin-left: 0; } a.btn-lozenge.offset-margin { margin-left: -60px; } a.btn-lozenge:hover { text-decoration: none; } a.btn-lozenge > span { position: relative; top: 0px; left: 20px; height: 37px; padding: 0 20px; display: block; overflow: visible; background: url(img/btn-lozenge-mid.png) repeat-x top left; background-size: 20px 74px; } a.btn-lozenge > span:before { content: ""; width: 20px; height: 37px; position: absolute; left: -20px; top: 0; background: url(img/btn-lozenge-left.png) no-repeat top left; background-size: 20px 74px; } a.btn-lozenge > span:after { content: ""; width: 20px; height: 37px; position: absolute; right: -20px; top: 0; background: url(img/btn-lozenge-right.png) no-repeat top left; background-size: 20px 74px; } a.btn-lozenge:hover > span, a.btn-lozenge:hover > span:before, a.btn-lozenge:hover > span:after { background-position: bottom left; } a.btn-lozenge-lrg { display: inline-block; font-size: 18px; line-height: 35px; text-transform: uppercase; color: #fff; font-weight: 700; margin-left: 0; } a.btn-lozenge-lrg.offset-margin { margin-left: -50px; } a.btn-lozenge-lrg:hover { text-decoration: none; } a.btn-lozenge-lrg > span { position: relative; top: 0px; left: 22px; height: 46px; padding: 0 20px; display: block; overflow: visible; background: url(img/btn-lozenge-lrg-mid.png) repeat-x top left; background-size: 22px 92px; } a.btn-lozenge-lrg > span:before { content: ""; width: 22px; height: 46px; position: absolute; left: -22px; top: 0; background: url(img/btn-lozenge-lrg-left.png) no-repeat top left; background-size: 22px 92px; } a.btn-lozenge-lrg > span:after { content: ""; width: 22px; height: 46px; position: absolute; right: -22px; top: 0; background: url(img/btn-lozenge-lrg-right.png) no-repeat top left; background-size: 22px 92px; } a.btn-lozenge-lrg:hover > span, a.btn-lozenge-lrg:hover > span:before, a.btn-lozenge-lrg:hover > span:after { background-position: bottom left; } a.btn-prev { z-index: 10; display: block; width: 50px; height: 60px; background: url(img/arrow-left.png) 10px 50% #efd00d no-repeat; background-size: 26px auto; position: absolute; left: -4%; top: 50%; margin-top: -30px; text-indent: -2000px; cursor: pointer; } a.btn-next { z-index: 10; display: block; width: 50px; height: 60px; background: url(img/arrow-right.png) 14px 50% #efd00d no-repeat; background-size: 26px auto; position: absolute; right: -4%; top: 50%; margin-top: -30px; text-indent: -2000px; cursor: pointer; } a.btn-prev:hover, a.btn-next:hover { background-color: #ffde0e; } /* ---------------------------------------------------------------------------------------------------------- HEADER ---------------------------------------------------------------------------------------------------------- */ #header { position: fixed; top: 0; left: 0; width: 100%; z-index: 200; } .admin-bar #header { top: 32px; } #header h1 { width: 275px; height: 24px; position: absolute; top: 16px; left: 20px; z-index: 2; } #header h1 a { display: block; width: 275px; height: 24px; overflow: hidden; text-indent: -2000px; background: url(img/logo-sb-head.png) no-repeat; background-size: contain; } #header .buy-now { position: absolute; top: 10px; right: 60px; z-index: 2; } .desktop-menu-wrapper { background: #03151f; } .menu-header { font-size: 1.25em; text-transform: uppercase; font-style: italic; text-rendering: optimizeLegibility; } .menu-header ul { text-align: center; } .menu-header li { display: inline-block; } .menu-header li a { display: inline-block; padding: 15px 25px 10px 15px; color: #fff; transition: color 0.3s cubic-bezier(0,0,0.3,1); -webkit-transform: translateZ(0); } .menu-header li a:hover, .menu-header li.current-menu-item a, .post-type-archive-patch-notes .menu-header li.menu-item-9 a, .single-vehicles .menu-header li.menu-item-1200 a { color: #efd00d; text-decoration: none; } .menu-header li a span { display: block; padding: 0 0 5px 0; border-bottom: 3px solid #03151f; transition: border 0.3s cubic-bezier(0,0,0.3,1); } .menu-header li a:hover span, .menu-header li.current-menu-item a span, .post-type-archive-patch-notes .menu-header li.menu-item-9 a span, .single-vehicles .menu-header li.menu-item-1200 a span { border-bottom: 3px solid #efd00d; } .menu-header > ul > li > a { background: url(img/menu-divider.png) no-repeat right 50%; background-size: 11px 30px; } .menu-header > ul > li:last-child > a { background: none; } .menu-header li ul { position: absolute; display: none; text-align: left; padding: 0 0 10px 0; } .menu-header li:hover ul { display: block; background: #03151f; } .menu-header li ul li { display: block; white-space: nowrap; } .menu-header li ul li a { padding: 10px 25px 5px 15px; } .menu-toggle { display: none; width: 60px; height: 60px; background: #052536; float: right; text-indent: -2000px; overflow: hidden; } .btn-menu { display: none; background: #052536; width: 60px; height: 60px; padding: 10px 0 0 10px; overflow: hidden; text-indent: -2000px; float: right; outline: none; } .btn-menu .icon { display: block; background: transparent; height: 40px; width: 40px; border-radius: 50%; border: 3px solid #0a4465; cursor: pointer; position: relative; outline: none; } .btn-menu .icon span { display: block; height: 3px; width: 21px; background: #0a4465; position: absolute; left: 7px; -webkit-transition: -webkit-transform 0.3s; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .btn-menu .icon span:first-child { top: 8px; } .btn-menu .icon span:nth-child(2) { top: 15px; } .btn-menu .icon span:last-child { top: 22px; } .btn-menu .icon--active span:first-child { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 15px; } .btn-menu .icon--active span:last-child { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; top: 15px; } .btn-menu .icon--active span:nth-child(2) { opacity: 0; } .mobile-menu-wrapper { display: none; background: #052536; text-align: center; padding: 0 0 50px 0; width: 100%; /*max-width: 400px;*/ float: right; } .mobile-menu-wrapper.show { display: block; } .mobile-menu-wrapper .buy-now-mobile { margin: 0 0 0 -40px; } .menu-header-mobile { font-size: 1.4em; text-transform: uppercase; font-style: italic; text-rendering: optimizeLegibility; text-align: left; padding: 0 0 50px 0; } .menu-header-mobile li a { display: block; padding: 15px 20px 15px 20px; color: #fff; } .menu-header-mobile li a:hover, .menu-header-mobile li.current-menu-item a, .post-type-archive-patch-notes .menu-header-mobile li.menu-item-9 a { color: #efd00d; text-decoration: none; } .menu-header-mobile ul li { border-bottom: 1px solid #09405f; } .menu-header-mobile ul li ul li a { padding: 15px 20px 15px 20px; } .menu-header-mobile ul li.menu-item-has-children { border-bottom: none; } .menu-header-mobile .menu-item-has-children > a { display: none; } /* ---------------------------------------------------------------------------------------------------------- FOOTER ---------------------------------------------------------------------------------------------------------- */ #footer-join { background: url(img/bg-footer.jpg) no-repeat 50% top; background-size: cover; } .footer-join-title { width: 100%; padding: 4% 0 0 0; position: absolute; top: 0; text-align: center; } #footer-join .available-platforms { } #footer-join .available-platforms .col8 { max-width: 700px; padding: 2% 100px 1% 100px; } #footer-join .available-platforms ul { z-index: 2; position: relative; margin: 30px auto 0 auto; max-width: 400px; } #footer-join .available-platforms .angle-left { z-index: 0; display: block; width: 55%; height: 100%; position: absolute; top: 0; left: 0; background: url(img/bg-footer-buy-now.png) no-repeat left top; background-size: cover; } #footer-join .available-platforms .angle-right { z-index: 0; display: block; width: 55%; height: 100%; position: absolute; top: 0; right: 0; background: url(img/bg-footer-buy-now.png) no-repeat right top; background-size: cover; } #footer-social-links { background: #264f94; color: #fff; text-align: center; padding: 30px 0; text-transform: uppercase; font-style: italic; line-height: 30px; } #footer-social-links p, #footer-social-links ul, #footer-social-links ul li { display: inline-block; line-height: 30px; } #footer-social-links ul li { background: url(img/nav-seperator.png) no-repeat right 50%; background-size: 11px 30px; padding: 0 15px 0 0; float: left; } #footer-social-links ul li.label { background: none; } #footer-social-links ul li:last-child { background: none; padding: 0; } #footer-social-links ul li span { display: block; width: 60px; height: 30px; } #footer-social-links ul li a { display: block; width: 60px; height: 30px; background: yellow; overflow: hidden; text-indent: -2000px; } #footer-social-links ul li.tw a { background: url(img/icon-twitter.png) no-repeat 50% 50%; background-size: 25px 20px; } #footer-social-links ul li.fb a { background: url(img/icon-facebook.png) no-repeat 50% 50%; background-size: 24px 24px; } #footer-social-links ul li.dc a { background: url(img/icon-discord.png) no-repeat 50% 50%; background-size: 23px 26px; } #footer-social-links ul li.ti a { background: url(img/icon-twitch.png) no-repeat 50% 50%; background-size: 25px 25px; } #footer-social-links ul li.re a { background: url(img/icon-reddit.png) no-repeat 50% 50%; background-size: 25px 25px; } #footer-site-links { background: #03151f; color: #fff; text-align: center; padding: 30px 0; text-transform: uppercase; font-style: italic; line-height: 30px; } #footer-site-links ul li { display: inline-block; background: url(img/nav-seperator-white.png) no-repeat right 50%; background-size: 11px 30px; padding: 0 15px 0 0; } #footer-site-links ul li:last-child { background: none; padding: 0; } #footer-site-links ul li a { display: block; padding: 0 20px; color: #fff; } #footer-site-links ul li a:hover { color: #efd00d; } #footer-lucid { background: #fff; color: #999999; text-align: center; padding: 40px 0; text-transform: uppercase; } #footer-lucid a { color: #999; } #footer-lucid a:hover { color: #666; } #footer-lucid a#lucid-logo { display: inline-block; width: 169px; height: 45px; background: url(img/logo-lucid.png) no-repeat 50% 50%; background-size: contain; overflow: hidden; text-indent: -2000px; margin: 0 0 20px 0; } #footer-lucid span { display: inline-block; padding: 0 15px; } /* ---------------------------------------------------------------------------------------------------------- HOMEPAGE ---------------------------------------------------------------------------------------------------------- */ .home-hero-banner { height: 100vh; } .admin-bar .home-hero-banner { margin-top: -32px; } .home-hero-banner .video-bg { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #999; background-size: cover !important; background-position: 50% 50% !important; overflow: hidden; } @media only screen and (min-width:990px) { .home-hero-banner .video-bg { display: block; } } .home-hero-banner .video-bg>video { position: absolute; display: block; min-height: 100%; min-width: 100%; width: auto; height: auto; left: 50%; top: 50%; -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .home-hero-banner .chevron-overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url(img/chevron-overlay.jpg) no-repeat 50% 0; background-size: cover; opacity: 0.3; mix-blend-mode: multiply; } .home-hero-banner .inner { padding: 120px 0 0 0; height: 100%; } .admin-bar .home-hero-banner .inner { padding: 152px 0 0 0; } .hero-logo-wrapper { width: 100%; } .hero-logo { width: 100%; margin: 0; padding: 18% 0 0 0; display: block; background: url(img/logo-sb-large-f2p.png) no-repeat 50% 0; background-size: contain; } .hero-platform-buttons { text-align: center; margin: 50px 0 0 0; } .hero-platform-buttons ul li { display: inline-block; width: 186px; margin: 0 10px 20px 10px; } .hero-platform-buttons ul li.ps4 span.logo { display: block; overflow: hidden; text-indent: -2000px; width: 107px; height: 44px; background: url(img/logo-ps4.png) no-repeat 50% 50%; background-size: contain; } .hero-platform-buttons ul li.steam span.logo { display: block; overflow: hidden; text-indent: -2000px; width: 105px; height: 44px; background: url(img/logo-steam.png) no-repeat 50% 50%; background-size: contain; } .available-platforms { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; text-transform: uppercase; } .available-platforms span { display: block; padding: 20px 0; } .available-platforms ul { background: url(img/yellow-line.png) no-repeat top left; background-size: contain; } .available-platforms li { display: inline-block; padding: 20px; } .available-platforms li a { display: block; height: 33px; overflow: hidden; text-indent: -2000px; } .available-platforms li.steam a { width: 105px; background: url(img/logo-steam.png) no-repeat 50% 50%; background-size: contain; } .available-platforms li.ps4 a { width: 107px; background: url(img/logo-ps4.png) no-repeat 50% 50%; background-size: contain; } .available-social { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; text-transform: uppercase; } .available-social span { display: block; padding: 20px 0; } .available-social ul { background: url(img/yellow-line.png) no-repeat top left; background-size: contain; padding: 20px; } .available-social li { display: inline-block; } .available-social ul li { display: inline-block; line-height: 30px; } .available-social ul li { background: url(img/nav-seperator.png) no-repeat right 50%; background-size: 11px 30px; padding: 0 15px 0 0; } .available-social ul li.label { background: none; } .available-social ul li:last-child { background: none; padding: 0; } .available-social ul li span { display: block; width: 60px; height: 30px; } .available-social ul li a { display: block; width: 60px; height: 30px; background: yellow; overflow: hidden; text-indent: -2000px; } .available-social ul li.tw a { background: url(img/icon-twitter.png) no-repeat 50% 50%; background-size: 25px 20px; } .available-social ul li.fb a { background: url(img/icon-facebook.png) no-repeat 50% 50%; background-size: 24px 24px; } .available-social ul li.dc a { background: url(img/icon-discord.png) no-repeat 50% 50%; background-size: 23px 26px; } .available-social ul li.ti a { background: url(img/icon-twitch.png) no-repeat 50% 50%; background-size: 25px 25px; } .available-social ul li.re a { background: url(img/icon-reddit.png) no-repeat 50% 50%; background-size: 26px 26px; } .home-trailer-btn { width: 100%; position: absolute; top: 50%; } .home-latest-news { background: #fff; } .home-latest-news .section-title { text-align: center; padding: 100px 0 60px 0; } .home-latest-news .section-footer { text-align: center; padding: 60px 0 60px 0; background: url(img/yellow-line.png) no-repeat top left; background-size: contain; } .news-list { padding: 0 0 60px 0; } .news-list li { margin-top: 30px; } .news-list li:nth-child(odd) { padding: 0 15px 0 0; } .news-list li:nth-child(even) { padding: 0 0 0 15px; } .news-list li:nth-child(1), .news-list li:nth-child(2) { margin-top: 30px; } .news-list li a { display: block; width: 100%; height: 100%; padding-top: 0; position: relative; background-color: #000; cursor: pointer !important; } .news-list li a:hover { text-decoration: none; } .news-list li .post-summary { display: block; position: static; bottom: 10px; left: 10px; width: 100%; padding: 20px; background: #03151f; border-top: 3px solid #efd00d; } .news-list li .post-date { display: block; width: 65%; border-bottom: none; padding: 0; margin: 0; font-size: 0.9em; letter-spacing: 1px; font-weight: 600; } .news-list li .post-image { display: block; position: static; top: 0; left: 0; width: 100%; /*height: 100%;*/ padding-top: 56.25%; overflow: hidden; background-color: #333; background-size: cover !important; background-position: 50% 50% !important; opacity: 1; transition: opacity 0.3s cubic-bezier(0,0,0.3,1); } .news-list li a:hover .post-image { opacity: 0.5; } .news-list li .post-overlay { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .news-list li:nth-child(odd) .post-overlay { background: url(img/overlay-red.png) no-repeat 0 0; background-size: contain; } .news-list li:nth-child(even) .post-overlay { background: url(img/overlay-blue.png) no-repeat 0 0; background-size: contain; } .news-list li a .post-date { color: #ffffff; } .news-list li a h2 { font-family: 'Roboto Condensed', Arial, sans-serif; font-size: 1.6em; line-height: 1.2em; margin: 0 0 10px 0; color: #ffffff; } .news-list li a:hover .post-date, .news-list li a:hover h2 { color: #efd00d; } .home-about { background-position: 50% 50% !important; background-size: cover !important; } .home-about .section-title { padding: 100px 0 60px 0; } .home-about .section-footer { padding: 50px 0 130px 0; } .home-about .section-overlay { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(img/bg-home-about.png) no-repeat 50% 50%; } .home-about p { font-size: 1.625em; } .home-vehicles { background: #fff url(img/bg-home-vehicles.png) 50% 0 no-repeat; } .home-vehicles .section-title { text-align: center; padding: 80px 0 60px 0; } .home-vehicles .section-footer { text-align: center; } .home-vehicles .section-footer { text-align: center; padding: 60px 0 60px 0; background: url(img/yellow-line.png) no-repeat top left; background-size: contain; } .vehicle-image { width: 1024px; position: absolute; top: 0; left: -40px; } .vehicle-image-box { display: none; width: 100%; padding-top: 48%; background-size: contain; background-position: 50% bottom; background-repeat: no-repeat; } .vehicle-image-box:first-child { display: block; } .vehicle-image-box img { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; } .vehicle-factfile { width: 270px; min-height: 460px; padding: 35px 0; } .vehicle-badges { padding: 20px 0; } .vehicle-badges .vehicle-difficulty { display: block; width: 33%; font-style: italic; text-transform: uppercase; padding: 32px 0 0 0; } .vehicle-badges .vehicle-difficulty.difficulty-1 { background: url(img/difficulty-1.png) no-repeat; background-size: 59px 23px; } .vehicle-badges .vehicle-difficulty.difficulty-2 { background: url(img/difficulty-2.png) no-repeat; background-size: 59px 23px; } .vehicle-badges .vehicle-difficulty.difficulty-3 { background: url(img/difficulty-3.png) no-repeat; background-size: 59px 23px; } .vehicle-badges .vehicle-class { display: block; width: 67%; font-style: italic; text-transform: uppercase; color: #2b2b2b; font-weight: 700; text-align: center; } .vehicle-badges .vehicle-class-name { display: inline-block; padding: 0 0 0 20px; position: relative; } .vehicle-badges .vehicle-class-thename { display: block; background: #fff; padding: 8px 20px 8px 30px; } .vehicle-badges .vehicle-class-icon { display: block; width: 41px; height: 48px; background: #efd00d; position: absolute; left: 0; top: -6px; } .vehicle-badges .class-support .vehicle-class-icon { background: url(img/vehicle-class-armoured.png) no-repeat 0 0; background-size: cover; } .vehicle-badges .class-artillery .vehicle-class-icon { background: url(img/vehicle-class-artillery.png) no-repeat 0 0; background-size: cover; } .vehicle-badges .class-fighter .vehicle-class-icon { background: url(img/vehicle-class-fighter.png) no-repeat 0 0; background-size: cover; } .vehicle-badges .class-scout .vehicle-class-icon { background: url(img/vehicle-class-scout.png) no-repeat 0 0; background-size: cover; } .vehicle-badges .class-tank .vehicle-class-icon { background: url(img/vehicle-class-tank.png) no-repeat 0 0; background-size: cover; } .vehicle-stats { padding: 15px 0 12px 0; border-top: 3px solid #efd00d; } .vehicle-stats li { text-transform: uppercase; font-style: italic; margin: 0 0 5px 0; } .vehicle-stats li span.label { display: inline-block; width: 88px; } .vehicle-stats li span.score { display: inline-block; width: 26px; height: 10px; background: url(img/stat-score-sprite.png) no-repeat 0 0; background-size: 26px 20px; margin: 0 1px 0 0; } .vehicle-stats li span.score:last-child { margin: 0; } .vehicle-stats li.score-1 span.score:nth-child(2) { background-position: bottom left; } .vehicle-stats li.score-2 span.score:nth-child(2), .vehicle-stats li.score-2 span.score:nth-child(3) { background-position: bottom left; } .vehicle-stats li.score-3 span.score:nth-child(2), .vehicle-stats li.score-3 span.score:nth-child(3), .vehicle-stats li.score-3 span.score:nth-child(4) { background-position: bottom left; } .vehicle-stats li.score-4 span.score:nth-child(2), .vehicle-stats li.score-4 span.score:nth-child(3), .vehicle-stats li.score-4 span.score:nth-child(4), .vehicle-stats li.score-4 span.score:nth-child(5) { background-position: bottom left; } .vehicle-stats li.score-5 span.score:nth-child(2), .vehicle-stats li.score-5 span.score:nth-child(3), .vehicle-stats li.score-5 span.score:nth-child(4), .vehicle-stats li.score-5 span.score:nth-child(5), .vehicle-stats li.score-5 span.score:nth-child(6) { background-position: bottom left; } .vehicle-nav { text-align: center; padding: 0 0 60px 0; } .vehicle-nav li { display: inline-block; width: 14.52%; padding: 0 3px; } .vehicle-nav.wide li { width: 16.66%; } .vehicle-nav li.hide { display: none; } .vehicle-nav li a { display: block; background: url(img/bg-vehicle-nav.png) no-repeat left top; background-size: cover; font-weight: 700; color: #fff; text-transform: uppercase; padding-top: 94%; position: relative; } .vehicle-nav li a:hover, .vehicle-nav li a.selected { background-position: right top; } .vehicle-nav li a span.vehicle-name { display: block; width: 100%; position: absolute; bottom: 8%; left: 0; padding: 0 5px; } .vehicle-nav li a span.vehicle-image { display: block; width: 98%; padding-top: 44%; position: absolute; bottom: 30%; left: 1%; background-size: contain; background-repeat: no-repeat; background-position: left bottom; } .vehicle-nav li a:hover span.vehicle-image { width: 96%; left: 2%; } .home-vehicle-banner .btn-next, .home-vehicle-banner .btn-prev { display: none; } .vehicle-nav li a span.vehicle-class { display: block; width: 28px; height: 33px; background-size: cover !important; background-repeat: no-repeat; background-position: top left; position: absolute; top: 5%; right: 5%; text-indent: -2000px; overflow: hidden; } .vehicle-nav li a:hover span.vehicle-class, .vehicle-nav li a.selected span.vehicle-class { background-position: bottom left; } .vehicle-nav li a span.vehicle-class.support { background-image: url(img/vehicle-class-nav-armoured.png); } .vehicle-nav li a span.vehicle-class.artillery { background-image: url(img/vehicle-class-nav-artillery.png); } .vehicle-nav li a span.vehicle-class.fighter { background-image: url(img/vehicle-class-nav-fighter.png); } .vehicle-nav li a span.vehicle-class.scout { background-image: url(img/vehicle-class-nav-scout.png); } .vehicle-nav li a span.vehicle-class.tank { background-image: url(img/vehicle-class-nav-tank.png); } /* ---------------------------------------------------------------------------------------------------------- VEHICLES ARCHIVE ---------------------------------------------------------------------------------------------------------- */ #vehicles-selector { background: url(img/bg-white.jpg) no-repeat 50% 50% #fff; background-size: cover; color: #001219; padding: 120px 0 0 0; } .vehicle-class-selector { text-align: center; } .vehicle-class-selector ul { display: inline-block; padding: 90px 0 40px 0; } .vehicle-class-selector ul li { display: inline-block; margin: 0 10px 10px 0; text-transform: uppercase; } .vehicle-class-selector ul li a { background-color: #cbcbcb; color: #03161d; padding: 5px 30px; margin: 0; line-height: 35px; display: inline-block; } .vehicle-class-selector ul li a { -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); } .vehicle-class-selector ul li a span { -ms-transform: skewX(15deg); -webkit-transform: skewX(15deg); transform: skewX(15deg); display: inline-block; } .vehicle-class-selector ul li a:hover { background-color: #dedede; } .vehicle-class-selector ul li a.selected { background-color: #eed00c; } #archive-vehicle-wrapper { background: #fff; padding: 30px 0 0 0; } #single-vehicle-wrapper { background: #fff; background: url(img/bg-white.jpg) no-repeat 50% 0; background-size: cover; padding: 150px 0 50px 0; color: #2b2b2b; } .single-vehicle-wrapper-inner { } .single-vehicle-banner { margin: 30px 0 0 0; } .single-vehicle-banner .vehicle-image-box { padding-top: 56.3%; } .single-vehicle-banner .vehicle-factfile { min-height: 574px; } .single-vehicle-banner .vehicle-badges .vehicle-class-thename { background: #ececec; } .vehicle-extended-blurb { clear: both; padding: 60px 10% 40px 10%; text-align: center; } .vehicle-extended-blurb .underline { display: block; height: 3px; width: 100%; position: absolute; top: 0; left: 0; background: url(img/yellow-line.png) no-repeat 50% bottom; background-size: cover; } .vehicle-skins { border-top: 3px solid #efd00d; padding: 25px 0 0 0; } .vehicle-skins h3 { color: #03151f; margin: 0 0 25px 0; } .vehicle-skins li { width: 23.8%; padding-top: 23.8%; float: left; margin: 0 1.55% 1.55% 0; } .vehicle-skins li:nth-child(4), .vehicle-skins li:nth-child(8), .vehicle-skins li:nth-child(12) { margin-right: 0; } .vehicle-skins li a { width: 100%; height: 100%; display: block; overflow: hidden; position: absolute; top: 0; left: 0; background: #44afff; } .vehicle-skins li a.selected, .vehicle-skins li a:hover { background: #efd00d; } .vehicle-skins li a img { width: 100%; } .vehicle-weapons { margin: -50px 0 0 0; } .vehicle-weapons-content { background: #03151f; border-top: 3px solid #efd00d; border-bottom: 3px solid #efd00d; color: #fff; padding: 80px 0 0 0; } .vehicle-weapons-content ul li { padding: 0 0 0 16.15%; margin: 0 0 80px 0; min-height: 80px; } .vehicle-weapons-content ul li.centered { clear: both; margin: 0 auto 80px auto; } span.weapon-icon { position: absolute; top: 0; left: 0; width: 31%; height: 100%; background-size: 100px auto !important; background-position: 50% 0 !important; background-repeat: no-repeat !important; } span.weapon-group { display: block; text-transform: uppercase; color: #efd00d; font-weight: 700; line-height: 1em; } span.weapon-name { display: block; text-transform: uppercase; font-size: 1.375em; font-weight: 700; margin: 0 0 6px 0; } .vehicle-weapons-content ul li span.underline { display: block; height: 3px; width: 100%; background: url(img/yellow-line.png) no-repeat right bottom; background-size: cover; margin: 0 0 6px 0; } span.weapon-description { display: block; } /* ---------------------------------------------------------------------------------------------------------- PATCH NOTE ARCHIVE ---------------------------------------------------------------------------------------------------------- */ #archive-patchnote-wrapper { background: #001d34; padding: 150px 0 50px 0; } #platform-selector { background: #fff; color: #001219; padding: 120px 0 0 0; } .platform-selector { text-align: center; } .platform-selector ul { display: inline-block; padding: 90px 0 50px 0; } .platform-selector ul li { display: inline-block; margin: 0 10px 0 0; text-transform: uppercase; } .platform-selector ul li a { background-color: #cbcbcb; color: #03161d; padding: 5px 30px; margin: 0; line-height: 35px; display: inline-block; } .platform-selector ul li a { -ms-transform: skewX(-15deg); -webkit-transform: skewX(-15deg); transform: skewX(-15deg); } .platform-selector ul li a span { -ms-transform: skewX(15deg); -webkit-transform: skewX(15deg); transform: skewX(15deg); display: inline-block; } .platform-selector ul li a.selected, .platform-selector ul li a:hover { background-color: #eed00c; } .patchnote-list { margin: 0; } .patchnote-item { margin: 0 0 60px 0; } .patchnote-item p { font-weight: 300; padding: 0 5% 0 0; } .patchnote-pic-wrapper { display: block; border: 4px solid #3383c3; } .patchnote-pic-placeholder { display: block; background: url(img/placeholder.jpg) no-repeat 50% 50%; background-size: cover; } .patchnote-pic-wrapper img { width: 100%; height: auto; } .no-posts { text-align: center; background: rgba(255,255,255,0.05); padding: 60px; } /* ---------------------------------------------------------------------------------------------------------- NEWS ARCHIVE ---------------------------------------------------------------------------------------------------------- */ #archive-news-wrapper { background: #001d34; padding: 150px 0 50px 0; } .archive-news-list { margin: 60px 0 0 0; } .archive-news-item { margin: 0 0 60px 0; } .archive-news-item p { font-weight: 300; padding: 0 5% 0 0; } .archive-news-item:nth-child(odd) { float: left; clear: left; } .archive-news-item:nth-child(even) { float: right; } .archive-news-blurb { padding: 30px; } .archive-news-blurb > *:first-child { margin-top: 0; } .archive-news-pic-wrapper { position: relative; display: block; border: 4px solid #3383c3; } .archive-news-pic-placeholder { display: block; background: url(img/placeholder.jpg) no-repeat 50% 50%; background-size: cover; } .archive-news-pic-wrapper img { width: 100%; height: auto; } .featured-news-item { margin: 90px 0 0 0; } .featured-news-blurb { position: absolute; bottom: 15%; left: 5.98%; background: #03151f; padding: 30px; } .featured-news-item p { display: none; font-weight: 300; padding: 0 5% 0 0; } .featured-news-pic-wrapper { display: block; border: 4px solid #3383c3; } .featured-news-pic-placeholder { display: block; background: url(img/placeholder.jpg) no-repeat 50% 50%; background-size: cover; } .featured-news-pic { display: block; background: no-repeat 50% 50%; background-size: cover; } .featured-news-pic-wrapper img { width: 100%; height: auto; } .single-news-featured-image img { width: 100%; height: auto; } .single-news-featured-image { margin-top: 90px; } .single-news-footer { text-align: center; } .single-news-content img { width: 100%; height: auto; } .single-page-content { padding: 30px 0; } /* ---------------------------------------------------------------------------------------------------------- ABOUT PAGE ---------------------------------------------------------------------------------------------------------- */ .about-intro { background: #001d34; padding: 150px 0 60px 0; background-repeat: no-repeat !important; background-position: 50% bottom !important; background-size: cover !important; } .about-intro-blurb { padding: 60px 0; } .about-intro-blurb p { margin: 0; font-size: 1.6em; line-height: 1.3em; font-weight: 400; font-style: italic; text-align: center; } .about-intro-trailer { background: #001d34; border: 4px solid #fff; } .about-intro-trailer img { width: 100%; } .about-vehicles { overflow: hidden; background: url(img/bg-about-vehicles-new.jpg) no-repeat 50% 0; background-size: cover; } .about-vehicles-info { padding: 75px 0 320px; } .about-vehicles-blurb { padding: 45px 0; } .about-vehicles-blurb p { margin: 0; color: #03151f; font-size: 1.6em; line-height: 1.3em; font-weight: 400; font-style: italic; text-align: center; } .about-vehicles .section-footer { text-align: center; } .about-vehicles-image { width: 130%; height: 100%; position: absolute; bottom: 30px; left: -15%; background-repeat: no-repeat !important; background-position: 50% bottom !important; background-size: contain !important; } .about-vehicle-skill-summary > *:first-child { margin-top: 0; } .about-roles { background: #03151f; padding: 80px 0; } .about-roles ul { padding: 80px 0 20px 0; } .about-roles li { padding: 15px; text-align: center; font-size: 1.85em; text-transform: uppercase; font-weight: 700; } .about-roles li a { display: block; color: #fff; } .about-roles li a:hover, .about-roles li a.selected { color: #efd00d; text-decoration: none; } .role-icon { display: block; width: 100%; padding-top: 120%; background: #ccc; margin: 0 0 20px 0; } .about-roles li.support .role-icon, .about-roles li.armoured .role-icon { background: url(img/about-icon-armoured.png) no-repeat 0 0; background-size: cover; } .about-roles li.artillery .role-icon { background: url(img/about-icon-artillery.png) no-repeat 0 0; background-size: cover; } .about-roles li.fighter .role-icon { background: url(img/about-icon-fighter.png) no-repeat 0 0; background-size: cover; } .about-roles li.scout .role-icon { background: url(img/about-icon-scout.png) no-repeat 0 0; background-size: cover; } .about-roles li.tank .role-icon { background: url(img/about-icon-tank.png) no-repeat 0 0; background-size: cover; } .about-roles li a:hover .role-icon, .about-roles li a.selected .role-icon { background-position: 0 101%; } .about-roles .page-content { border-top: 1px solid #efd00d; padding: 30px 5.98% 0 5.98%; min-height: 200px; } .about-roles .page-content p:last-child { margin: 0; } .about-feature-image-holder { background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: cover !important; padding-top: 45%; } .about-maps { background: #03151f; padding: 90px 0 30px 0; } .about-maps ul { padding: 90px 0 90px 0; } .about-maps li { margin: 0 0 60px 0; } .about-maps li:last-child { margin: 0; } .about-maps-image { float: left; } .about-maps-blurb { float: right; padding: 60px 0 0 0; } .about-maps li:nth-child(even) .about-maps-image { float: right; } .about-maps li:nth-child(even) .about-maps-blurb { float: left; } .about-maps-blurb p { padding: 0 20% 0 0; } .about-maps-image { display: block; border: 4px solid #3383c3; } .about-maps-image-holder { display: block; background: #333; } .about-maps-image img { width: 100%; } .youtube-container { display: block; margin: auto; width: 100%; max-width: 600px; } .youtube-player { display: block; width: 100%; padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; } .youtube-player > div { position: static; } img.youtube-thumb { display: block; bottom: 0; left: 0; right: 0; top: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; height: auto; } div.play-button { height: 88px; width: 88px; left: 50%; top: 50%; margin-left: -44px; margin-top: -44px; position: absolute; background: url("img/btn-youtube.png") no-repeat; background-size: 88px 176px; } .youtube-player:hover div.play-button, a:hover div.play-button { background-position: 0 -88px; } #youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } /* ---------------------------------------------------------------------------------------------------------- BUY NOW PAGE ---------------------------------------------------------------------------------------------------------- */ #buy-now-wrapper { background: url(img/bg-buy-now-header.png) no-repeat 50% 50% #001d34; background-size: cover; padding: 120px 0 50px 0; } .buy-now-blurb { text-align: center; padding: 80px 30px 60px 30px; } .buy-now-blurb p { font-size: 1.4em; line-height: 1.4em; } .buy-now-option-wrapper { padding: 0 0 30px 0; } .buy-now-option { padding: 0 15px; margin-bottom: 30px; } .buy-now-option a { display: block; padding: 30px; background: #03151f; border: 1px solid #09405f; } .buy-now-option a:hover { border: 1px solid #fff; text-decoration: none; } .buy-now-option a:hover h4 { color: #fff; } /*.buy-now-option-wrapper .col50:nth-child(odd) { float: left; } .buy-now-option-wrapper .col50:nth-child(even) { float: right; }*/ .buy-now-option.ps4 a { background: url(img/logo-ps4.png) #03151f no-repeat 30px 50%; background-size: 100px auto; padding: 30px 30px 30px 150px; } .buy-now-option.steam a { background: url(img/logo-steam.png) #03151f no-repeat 30px 50%; background-size: 100px auto; padding: 30px 30px 30px 150px; } .buy-now-option h4 { font-size: 1.4em; margin: 0 0 5px 0; } .buy-now-option p { margin: 0; color: #fff; } #buy-now-packs-wrapper { padding: 100px 0; background: #001d34; } .buy-now-packs-list { padding: 60px 0 0 0; } .buy-now-packs-list li { padding: 0 5.13% 0 0; margin-bottom: 80px; } .buy-now-packs-list li:nth-child(3n+1) { padding: 0 2.56% 0 0; clear: left; } .buy-now-packs-list li:nth-child(3n+2) { padding: 0 1.28% 0 1.28%; } .buy-now-packs-list li:nth-child(3n+3) { padding: 0 0 0 2.56%; } .buy-now-packs-list li h3 { font-family: 'Roboto Condensed', Arial, sans-serif; } .buy-now-packs-list li h5 { font-family: 'Roboto Condensed', Arial, sans-serif; } .buy-now-packs-list li p { margin: 0 0 20px 0; } .buy-now-pic-wrapper { position: relative; display: block; border: 4px solid #3383c3; margin: 0 0 20px 0; } .buy-now-pic-placeholder { display: block; background: url(img/placeholder.jpg) #03151f no-repeat 50% 50%; background-size: contain; } .buy-now-pic { display: block; background: #03151f no-repeat 50% 50%; background-size: contain; } .buy-now-pic-wrapper img { width: 100%; height: auto; } .play-now-platform-buttons { text-align: left; margin: 0 0 0 0; } .play-now-platform-buttons ul li { display: inline-block; width: 150px; margin: 0 0; } .play-now-platform-buttons ul li.ps4 span.logo { display: block; overflow: hidden; text-indent: -2000px; width: 73px; height: 35px; background: url(img/logo-ps4.png) no-repeat 50% 50%; background-size: contain; } .play-now-platform-buttons ul li.steam span.logo { display: block; overflow: hidden; text-indent: -2000px; width: 72px; height: 35px; background: url(img/logo-steam.png) no-repeat 50% 50%; background-size: contain; } /* LANGUAGE SELECTOR */ .language-selector { clear: both; color: #03151f; padding: 30px; } .language-selector li[data-value*="EN"] { background: url(img/flag-EN.png) no-repeat right 50%; background-size: 40px 25px; } .language-selector li[data-value*="FR"] { background: url(img/flag-FR.png) no-repeat right 50%; background-size: 40px 25px; } .language-selector li[data-value*="DE"] { background: url(img/flag-DE.png) no-repeat right 50%; background-size: 40px 25px; } .language-selector li[data-value*="ES"] { background: url(img/flag-ES.png) no-repeat right 50%; background-size: 40px 25px; } .language-selector li[data-value*="IT"] { background: url(img/flag-IT.png) no-repeat right 50%; background-size: 40px 25px; } .language-selector li[data-value*="PO"] { background: url(img/flag-PO.png) no-repeat right 50%; background-size: 40px 25px; } .language-selector li[data-value*="RU"] { background: url(img/flag-RU.png) no-repeat right 50%; background-size: 40px 25px; } /* BATTLEPASS PAGE */ .battlepass-wrapper h1, .battlepass-wrapper h2, .battlepass-wrapper h3, .battlepass-wrapper h4, .battlepass-wrapper h5, .battlepass-wrapper h6 { font-weight: 700; font-family: 'Roboto Condensed', Arial, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; text-rendering: optimizeLegibility; } .battlepass-crest { display: inline-block; width: 135px; height: 135px; background: url(img/battlepass-crest.png) no-repeat 50% 50%; background-size: cover; } .battlepass-crest.white { background: url(img/battlepass-crest-white.png) no-repeat 50% 50%; background-size: cover; } .battlepass-packs { background-color: #fff; border-top: 4px solid #e8c808; padding: 10px 0 110px 0; } .battlepass-packs .section-title { text-align: center; margin: 0 0 5px 0; } .battlepass-packs h2 { background: url(img/battlepass-packs-title-bg.png) no-repeat 50% 50%; background-size: contain; padding: 10px 0; margin: -25px 0 0 0; font-size: 2em; font-style: italic; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); } .battlepass-packs li { } .battlepass-packs p { font-size: 1.25em; line-height: 1.3em; } .battlepass-packs .post-image { display: block; padding-top: 57.69%; background: #ececec; } .battlepass-packs .left .post-image { background: url(img/battlepass-packs-left-2.png) no-repeat 50% 50%; background-size: cover; } .battlepass-packs .right .post-image { background: url(img/battlepass-packs-right-2.png) no-repeat 50% 50%; background-size: cover; } .battlepass-packs .post-summary { background: #03151f; border-top: 2px solid #efd00d; padding: 20px; } .battlepass-how { background-color: #051623; border-top: 2px solid #e8c808; background-position: 50% 50% !important; background-size: cover !important; padding: 40px 0 180px 0; overflow: hidden; } .battlepass-how .battlepass-crest { float: left; margin-left: -45px; } .battlepass-how h2 { display: inline-block; font-size: 2em; font-style: italic; padding: 60px 0 0 0; } .battlepass-how h2 span { color: #efd00d; } .battlepass-how h3 { color: #0dc2ef; font-size: 2em; font-style: italic; margin: 0.5em 0; } .battlepass-how p { color: #fff; font-size: 1.625em; line-height: 1.3em; margin: 0 0 1em 0; } .battlepass-how p strong { color: #ffffff; font-weight: 400; } .battlepass-how-overlay { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 236px; background: url(img/battlepass-how-overlay.png) repeat-x; } .battlepass-how-fg-vehicle { display: block; position: absolute; bottom: 10px; right: 50%; margin-right: -800px; width: 988px; height: 422px; background: url(img/battlepass-how-fg-vehicle.png) no-repeat 50% 50%; background-size: contain; } .battlepass-how-fg-char { display: block; position: absolute; bottom: 0; right: 50%; margin-right: -650px; width: 255px; height: 535px; background: url(img/battlepass-how-fg-char.png) no-repeat 50% 50%; background-size: contain; } .battlepass-rewards { background: url(img/battlepass-rewards-bg.jpg) no-repeat #efd00d; background-size: cover; border-top: 2px solid #e8c808; padding: 60px 0 60px 0; overflow: hidden; } .battlepass-watermark { display: block; width: 368px; height: 346px; background: url(img/battlepass-watermark.png) no-repeat; background-size: contain; position: absolute; bottom: -30px; right: -130px; } .battlepass-rewards .section-title { text-align: center; } .battlepass-rewards h2 { font-size: 4.5em; font-style: italic; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); } .battlepass-rewards h3 { font-size: 2.25em; font-weight: 400; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); margin: 0 0 35px 0; } .battlepass-rewards p { font-size: 2em; font-weight: 700; font-style: italic; text-transform: uppercase; text-align: center; margin: 10px 0 0 0; } .battlepass-rewards li { float: left; width: 25%; padding: 5px; } .battlepass-reward-img { display: block; padding-top: 69%; background-position: 50% 50% !important; background-size: contain !important; } .battlepass-reward-name { display: none; } .battlepass-free { background: url(img/battlepass-free-bg.jpg) no-repeat #03151f; background-size: cover; background-position: 50% 50%; border-top: 2px solid #e8c808; border-bottom: 2px solid #e8c808; padding: 90px 0 90px 0; } .battlepass-free .battlepass-crest { float: left; margin-left: -45px; margin-right: 10px; } .battlepass-free h2 { display: inline-block; font-size: 4.5em; font-style: italic; padding: 0; margin: 0 0 30px 0; } .battlepass-free p { color: #bfbfbf; font-size: 1.625em; line-height: 1.3em; margin: 0 0 15px 0; } .battlepass-free .left ul { margin: 0 0 15px 0; text-transform: uppercase; } .battlepass-free .left li { font-size: 1.625em; list-style: disc; padding: 0 0 0 3px; margin: 0 0 2px 25px; text-transform: uppercase; } /*.battlepass-free-img { display: block; background-color: #cfcfcf; padding-top: 89%; background-position: 50% 50% !important; background-size: cover !important; }*/ .battlepass-free-pics-left { width: 51%; float: left; } .battlepass-free-pics-right { width: 47.2%; float: right; padding: 0; } .battlepass-free-pics-left li { float: left; width: 50%; padding: 0; } .battlepass-free-pics-left li .battlepass-free-img { margin: 7% 0 0 7%; display: block; padding-top: 127%; background-position: 50% bottom !important; background-size: contain !important; background-repeat: no-repeat !important; } .battlepass-free-pics-right .battlepass-free-img { display: block; padding-top: 144.2%; background-position: 50% bottom !important; background-size: contain !important; background-repeat: no-repeat !important; } /* ---------------------------------------------------------------------------------------------------------- 04 Media queries (using a mobile-first approach) ------------------------------------------------------------ ---------------------------------------------------------------------------------------------------------- */ @media screen and (max-width:1190px) { body, input, textarea { font-size: 13px; } .inner { width: 960px; } #header h1 { top: 12px; } #header .buy-now { top: 7px; } .home-vehicles { background-size: 1540px 517px; } .vehicle-image { width: 680px; left: 0; } .home-vehicles .section-title { padding: 50px 0 30px 0; } .home-vehicles .vehicle-blurb { display: none; } .home-vehicles .vehicle-factfile { padding: 30px 0; min-height: 300px; } .vehicle-nav li { width: 18.8%; } } @media screen and (max-width:1040px) { } @media screen and (max-width:990px) { /* MOBILE MENU */ .menu-header, #header .buy-now { display: none; } .btn-menu { display: block; } #header h1 { top: 17px; } .inner { width: 92%; } .home-vehicles { background: #fff; } .vehicle-image { width: 80%; position: relative; margin: 0 auto; } .home-vehicles .vehicle-factfile { display: none; } .vehicle-factfile h3 { text-align: center; color: #001419; } .vehicle-badges { display: none; } .vehicle-stats { display: none; } .home-vehicle-banner .btn-next, .home-vehicle-banner .btn-prev { display: block; } .buy-now-option { padding: 0 8px; } .buy-now-option a { display: block; padding: 20px 15px; } .buy-now-option.ps4 a { background-position: 20px 50%; background-size: 80px auto; padding: 20px 15px 20px 120px; } .buy-now-option.steam a { background-position: 20px 50%; background-size: 80px auto; padding: 20px 15px 20px 120px; } .buy-now-option-wrapper .col50:nth-child(odd) { float: none; } .buy-now-option-wrapper .col50:nth-child(even) { float: none; } .buy-now-packs-list li.col4 { width: 50%; } .buy-now-packs-list li:nth-child(odd) { padding: 0 2.56% 0 0; clear: left; } .buy-now-packs-list li:nth-child(even) { padding: 0 0 0 2.56%; } } @media screen and (max-width: 800px) { p, .page-content li { font-size: 1.2em; } .page-content li ul li { font-size: 1em; } h2 { font-size: 2em; line-height: 1em; } h2.block_bg { padding: 8px 13px 2px 18px; } h3 { font-size: 1.875em; } .patchnote-item h2, .archive-news-item h2, .featured-news-item h2 { font-size: 2em; } .page-content h1 { font-size: 2.625em; } .page-content h2 { font-size: 2em; } .page-content h3 { font-size: 1.875em; } .page-content h4 { font-size: 1.5em; } .page-content h5 { font-size: 1.375em; } .page-content h6 { font-size: 1.2em; } .col1 { width: 100%; } .col2 { width: 100%; } .col3 { width: 100%; } .col4 { width: 100%; } .col5 { width: 100%; } .col6 { width: 100%; } .col7 { width: 100%; } .col8 { width: 100%; } .col9 { width: 100%; } .col10 { width: 100%; } .col11 { width: 100%; } .col12 { width: 100%; } .col50 { width: 100%; } .home-latest-news .section-title { padding: 50px 0; } .home-latest-news .section-footer { padding: 30px 0; } .news-list li { } .news-list li:first-child { padding: 0; margin: 0 0 20px 0; } .news-list li:last-child { padding: 0; } .news-list li a { display: block; width: 100%; height: 100%; padding-top: 0; position: relative; } .home-about { background: #03151f !important; } .home-about .section-title { padding: 50px 0; } .home-about .section-footer { padding: 50px 0 50px 0; } .home-about .section-overlay { display: none; } /* .battlepass-wrapper h1, .battlepass-wrapper h2, .battlepass-wrapper h3, .battlepass-wrapper h4, .battlepass-wrapper h5, .battlepass-wrapper h6 { font-weight: 700; font-family: 'Roboto Condensed', Arial, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: 1px; color: #ffffff; text-rendering: optimizeLegibility; } .battlepass-crest { display: inline-block; width: 135px; height: 135px; background: url(img/battlepass-crest.png) no-repeat 50% 50%; background-size: cover; } .battlepass-crest.white { background: url(img/battlepass-crest-white.png) no-repeat 50% 50%; background-size: cover; } .battlepass-packs { background-color: #fff; border-top: 4px solid #e8c808; padding: 10px 0 110px 0; } .battlepass-packs .section-title { text-align: center; margin: 0 0 5px 0; } .battlepass-packs h2 { background: url(img/battlepass-packs-title-bg.png) no-repeat 50% 50%; background-size: contain; padding: 10px 0; margin: -25px 0 0 0; font-size: 2em; font-style: italic; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); } .battlepass-packs li { } .battlepass-packs p { font-size: 1.25em; line-height: 1.3em; } .battlepass-packs .post-image { display: block; padding-top: 57.69%; background: #ececec; } .battlepass-packs .left .post-image { background: url(img/battlepass-packs-left.png) no-repeat 50% 50%; background-size: cover; } .battlepass-packs .right .post-image { background: url(img/battlepass-packs-right.png) no-repeat 50% 50%; background-size: cover; } .battlepass-packs .post-summary { background: #03151f; border-top: 2px solid #efd00d; padding: 20px; } .battlepass-how { background-color: #051623; border-top: 2px solid #e8c808; background-position: 50% 50% !important; background-size: cover !important; padding: 40px 0 180px 0; overflow: hidden; } .battlepass-how .battlepass-crest { float: left; margin-left: -45px; } .battlepass-how h2 { display: inline-block; font-size: 2em; font-style: italic; padding: 60px 0 0 0; } .battlepass-how h2 span { color: #efd00d; } .battlepass-how h3 { color: #0dc2ef; font-size: 2em; font-style: italic; margin: 0.5em 0; } .battlepass-how p { color: #bfbfbf; font-size: 1.625em; line-height: 1.3em; margin: 0 0 1em 0; } .battlepass-how p strong { color: #ffffff; font-weight: 400; } .battlepass-how-overlay { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 236px; background: url(img/battlepass-how-overlay.png) repeat-x; } .battlepass-how-fg-vehicle { display: block; position: absolute; bottom: 10px; right: 50%; margin-right: -800px; width: 988px; height: 422px; background: url(img/battlepass-how-fg-vehicle.png) no-repeat 50% 50%; background-size: contain; } .battlepass-how-fg-char { display: block; position: absolute; bottom: 0; right: 50%; margin-right: -650px; width: 255px; height: 535px; background: url(img/battlepass-how-fg-char.png) no-repeat 50% 50%; background-size: contain; } .battlepass-rewards { background: url(img/battlepass-rewards-bg.jpg) no-repeat #efd00d; background-size: cover; border-top: 2px solid #e8c808; padding: 60px 0 60px 0; overflow: hidden; } .battlepass-watermark { display: block; width: 368px; height: 346px; background: url(img/battlepass-watermark.png) no-repeat; background-size: contain; position: absolute; bottom: -30px; right: -130px; } .battlepass-rewards .section-title { text-align: center; } .battlepass-rewards h2 { font-size: 4.5em; font-style: italic; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); } .battlepass-rewards h3 { font-size: 2.25em; font-weight: 400; text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25); margin: 0 0 35px 0; } .battlepass-rewards p { font-size: 2em; font-weight: 700; font-style: italic; text-transform: uppercase; text-align: center; margin: 10px 0 0 0; } .battlepass-rewards li { float: left; width: 25%; padding: 5px; } .battlepass-reward-img { display: block; padding-top: 69%; background-position: 50% 50% !important; background-size: contain !important; } .battlepass-reward-name { display: none; } .battlepass-free { background: url(img/battlepass-free-bg.jpg) no-repeat #03151f; background-size: cover; background-position: 50% 50%; border-top: 2px solid #e8c808; border-bottom: 2px solid #e8c808; padding: 90px 0 90px 0; } .battlepass-free .battlepass-crest { float: left; margin-left: -45px; margin-right: 10px; } .battlepass-free h2 { display: inline-block; font-size: 4.5em; font-style: italic; padding: 0; margin: 0 0 30px 0; } .battlepass-free p { color: #bfbfbf; font-size: 1.625em; line-height: 1.3em; margin: 0 0 15px 0; } .battlepass-free .left ul { margin: 0 0 15px 0; text-transform: uppercase; } .battlepass-free .left li { font-size: 1.625em; list-style: disc; padding: 0 0 0 3px; margin: 0 0 2px 25px; text-transform: uppercase; } .battlepass-free-pics-left { width: 51%; float: left; } .battlepass-free-pics-right { width: 47.2%; float: right; padding: 0; } .battlepass-free-pics-left li { float: left; width: 50%; padding: 0; } .battlepass-free-pics-left li .battlepass-free-img { margin: 7% 0 0 7%; display: block; padding-top: 127%; background-position: 50% bottom !important; background-size: contain !important; background-repeat: no-repeat !important; } .battlepass-free-pics-right .battlepass-free-img { display: block; padding-top: 144.2%; background-position: 50% bottom !important; background-size: contain !important; background-repeat: no-repeat !important; } */ .battlepass-how { padding: 40px 0 60px 0; background-position: 0 50% !important; } .battlepass-how .battlepass-crest { margin-left: 0; } .battlepass-how-fg-vehicle { display: none; } .battlepass-how-fg-char { display: none; } .battlepass-how .section-body { padding: 0 20px 0 45px; } .battlepass-rewards li { width: 50%; } .battlepass-free { background: #03151f; padding: 0; } .battlepass-free .battlepass-crest { margin-left: 0; } .battlepass-free .inner { width: 100%; } .battlepass-free .left { padding: 60px 3%; } .battlepass-free .left .section-body { padding: 0 20px 0 45px; } .battlepass-free h2 { padding: 0 40px 0 0; } .battlepass-free .right { background: #fff; padding: 60px 4% 60px 2%; } } @media screen and (max-width: 700px) { } @media screen and (max-width: 600px) { .home-hero-banner h2 { display: none; } .home-vehicles .vehicle-nav { display: none; } .home-vehicles .vehicle-factfile { display: block; float: none; width: 100%; min-height: 0; padding: 30px 0 30px 0; } .home-vehicles .section-footer { padding: 30px 0; } .vehicle-nav { padding: 0 0 30px 0; } .home-vehicle-banner .btn-next, .home-vehicle-banner .btn-prev { top: 35%; } .vehicle-image { width: 90%; } #single-vehicle-wrapper { padding: 100px 0 50px 0; } .single-vehicles .vehicle-image { width: 100%; } .single-vehicles .vehicle-image-box img { width: 130%; left: -15%; } .single-vehicle-banner .vehicle-image-box { padding-top: 70%; overflow: hidden; } .single-vehicle-banner .vehicle-factfile { width: 100%; padding-top: 0; min-height: 0; } .vehicle-extended-blurb { padding: 40px 5% 40px 5%; } .vehicle-weapons-content { padding: 40px 0 0 0; } .vehicle-weapons-content ul li { padding: 0 0 0 33%; margin: 0 0 30px 0; } .vehicle-weapons-content ul li.centered { margin: 0 auto 30px auto; } #vehicles-selector { padding: 60px 0 0 0; } .vehicle-class-selector ul { padding: 40px 0; } #header h1 { width: 240px; height: 21px; top: 19px; } #header h1 a { width: 240px; height: 21px; } #footer-social-links ul li a { width: 50px; } #footer-site-links ul li a { padding: 0 10px; } #footer-lucid span { padding: 0 5px; } #footer-join { } #footer-join .inner { width: 100%; } #footer-join .sixteen-nine, #footer-join .eleven-four { padding-top: 100%; } .footer-join-title { padding: 45px 0 0 0; } #footer-join .available-platforms { } #footer-join .available-platforms .col8 { max-width: none; padding: 15px 60px 15px 60px; } #footer-join .available-platforms ul { z-index: 2; position: relative; margin: 15px auto 0 auto; max-width: none; background-size: 90% auto; background-position: 50% 0; } #footer-join .available-platforms li { padding: 15px; } #footer-join .available-platforms li.steam a { width: 85px; background: url(img/logo-steam.png) no-repeat 50% 50%; background-size: contain; } #footer-join .available-platforms li.ps4 a { width: 87px; background: url(img/logo-ps4.png) no-repeat 50% 50%; background-size: contain; } .underlined-title { padding: 0 15px; display: block; } .underlined-title .underline { display: none; } .about-intro { padding: 100px 0 60px 0; } .about-intro-blurb { padding: 40px 0; } .about-vehicles { background: #fff; } .about-vehicles-blurb p { font-size: 1.4em; } .about-vehicles-info { padding: 60px 0 220px; } .about-vehicles-image { width: 200%; height: 100%; bottom: 20px; left: -50%; } .about-roles { padding: 60px 0; } .about-roles ul { padding: 40px 0 0 0; } .about-roles li span.role-name { display: none; } .about-roles .page-content { padding: 30px 10px 0 10px; } .about-maps-blurb { padding: 30px 0 0 0; } .about-maps-blurb p { padding: 0 5% 0 0; } .about-maps { padding: 60px 0 0 0; } .about-maps ul { padding: 60px 0 60px 0; } .archive-news-blurb { padding: 30px 0; } .featured-news-item { margin: 90px 0 60px 0; } .featured-news-blurb { position: static; background: none; padding: 30px 0; } .featured-news-item p { display: block; } .featured-news-pic-placeholder.eleven-four { padding-top: 56.25%; } .patchnote-blurb { padding: 30px 0; } .vehicle-nav li { display: inline-block; width: 50%; padding: 0 3px; } .vehicle-nav.wide li { width: 50%; } #archive-news-wrapper { padding: 100px 0 50px 0; } .featured-news-item { margin: 60px 0; } #archive-patchnote-wrapper { padding: 100px 0 50px 0; } .platform-selector ul { padding: 50px 0; } .buy-now-blurb { padding: 60px 0 40px 0; } .buy-now-packs-list li.col4 { width: 100%; } .buy-now-packs-list li:nth-child(odd) { padding: 0; } .buy-now-packs-list li:nth-child(even) { padding: 0; } #buy-now-packs-wrapper { padding: 60px 0 40px 0; } .hero-platform-buttons ul li.ps4 span.logo { width: 73px; height: 45px; background: url(img/logo-ps4.png) no-repeat 50% 50%; background-size: contain; } .hero-platform-buttons ul li.steam span.logo { width: 72px; height: 45px; background: url(img/logo-steam.png) no-repeat 50% 50%; background-size: contain; } }