.elementor-kit-5{--e-global-color-primary:#09BABA;--e-global-color-secondary:#19292F;--e-global-color-text:#FFFFFF;--e-global-color-accent:#141010;--e-global-color-swgblack:#000000;--e-global-color-swgbody:#141010;--e-global-color-swgfootlink:#F7F7F7;--e-global-color-swgswitch2:#122227;--e-global-typography-primary-font-family:"Bangers";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Lato";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Bangers";--e-global-typography-accent-font-weight:400;background-color:#141010;color:#FFFFFF;font-family:"Lato", Sans-serif;font-size:18px;line-height:27px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1264px;}.e-con{--container-max-width:1264px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}} /* Start custom CSS *//* ===== SteamWorld Games : fonts ===== */ @font-face{font-family:'Bangers';src:url(https://steamworldgames.com/wp-content/uploads/2026/08/Bangers-Regular.woff2) format('woff2'),url(https://steamworldgames.com/wp-content/uploads/2026/08/Bangers-Regular.woff) format('woff');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Lato';src:url(https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Regular.woff2) format('woff2'),url(https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Regular.woff) format('woff');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Lato';src:url(https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Bold.woff2) format('woff2'),url(https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Bold.woff) format('woff');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Lato';src:url(https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Italic.woff2) format('woff2'),url(https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Italic.woff) format('woff');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:'Permanent Marker';src:url(https://steamworldgames.com/wp-content/uploads/2026/08/PermanentMarker-Regular.woff2) format('woff2'),url(https://steamworldgames.com/wp-content/uploads/2026/08/PermanentMarker-Regular.woff) format('woff');font-weight:700;font-style:normal;font-display:swap} /* ===== design tokens (from source) ===== */ :root{--swgTransition:.1s;--swgTiming:ease-in-out;--swgOriole:#FFA501;--swgIndigo:#19292F;--swgHoverCream:#efefbb;} /* ===== base ===== */ html,body{background:#141010;} body{color:#fff;font-family:Lato,"Open Sans",sans-serif;font-size:18px;line-height:27px;overflow-x:clip;} body a{text-decoration:none;} h1,h2,h3,h4,h5,h6{font-family:Bangers,"Open Sans",sans-serif;font-weight:700;} /* ===== triangle (clip-path, matches source exactly) ===== */ .swg-tri{height:10px;width:15px;margin:0 12px;background:#fff;display:block;flex:none;-webkit-clip-path:polygon(0% 100%,50% 0%,100% 100%);clip-path:polygon(0% 100%,50% 0%,100% 100%);transition:transform .275s ease-in-out;} .swg-tri--left{transform:rotate(-90deg);} .swg-tri--down{transform:rotate(180deg);} .swg-tri:first-child{margin-left:0;} .swg-tri:last-child{margin-right:0;} /* ===== site switcher ===== */ .swg-switcher .elementor-widget-html,.swg-switcher .elementor-widget-html>.elementor-widget-container{width:100%;} .swg-switcher{background:linear-gradient(180deg,#19292F 75%,#122227 100%);min-height:50px;} .swg-switcher__bar{display:flex;flex-direction:row;justify-content:space-between;width:100%;font-family:Bangers,"Open Sans",sans-serif;font-style:normal;font-weight:700;font-size:20px;line-height:24px;} .swg-switcher__home,.swg-switcher__nav{display:flex;height:50px;position:relative;} .swg-switcher__home>a{padding:0;} .swg-switcher__home>a,.swg-switcher__nav>button{align-items:center;-webkit-appearance:none;appearance:none;border:none;display:flex;background:transparent;outline:none;color:#fff;cursor:pointer;font:inherit;padding:0;transition:color .1s ease-in-out;} .swg-switcher__home>a:hover,.swg-switcher__home>a:focus,.swg-switcher__nav>button:hover,.swg-switcher__nav>button:focus{color:#FFA501;} .swg-switcher__home>a:hover .swg-tri,.swg-switcher__home>a:focus .swg-tri,.swg-switcher__nav>button:hover .swg-tri,.swg-switcher__nav>button:focus .swg-tri{background:#FFA501;} .swg-switcher__nav>button.is-active .swg-tri--down{transform:rotate(0);} .swg-switcher__list{display:none;position:absolute;right:0;top:100%;background:#19292F;white-space:nowrap;margin:0;padding:0;list-style:none;z-index:200;} .swg-switcher__list.is-open{display:block;} .swg-switcher__item{align-items:flex-start;border-bottom:1px solid rgba(0,0,0,.3);display:flex;flex-direction:column;} .swg-switcher__item a{padding:15px 20px;line-height:40px;color:#fff;font-size:inherit;display:block;transition:color .1s ease-in-out;} .swg-switcher__item a:hover,.swg-switcher__item a:focus{color:#FFA501;} /* ===== social icons : CSS mask over SVG, matches source ===== */ .swg-social{display:flex;list-style:none;margin:0;padding:0;} .swg-social__item{display:flex;margin-right:6px;} .swg-social__link{display:block;height:40px;width:40px;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px;mask-size:24px;-webkit-mask-position:center;mask-position:center;transition:background-color .1s ease-in-out,opacity .1s ease-in-out;} .swg-social__link:hover,.swg-social__link:active{background-color:#efefbb;} .swg-social__link--facebook{-webkit-mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-facebook.svg);mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-facebook.svg);} .swg-social__link--x{-webkit-mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-x.svg);mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-x.svg);} .swg-social__link--instagram{-webkit-mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-instagram.svg);mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-instagram.svg);} .swg-social__link--youtube{-webkit-mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-youtube.svg);mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-youtube.svg);} .swg-social__link--tiktok{-webkit-mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-tiktok.svg);mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-tiktok.svg);} .swg-social__link--discord{-webkit-mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-discord.svg);mask-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/social-discord.svg);} /* ===== language picker ===== */ .swg-lang{position:relative;display:flex;} .swg-lang__list{display:none;position:absolute;left:0;top:100%;margin:0;padding:0;list-style:none;z-index:200;} .swg-lang__list.is-open{display:block;} .swg-lang__current,.swg-lang__link{align-items:center;display:flex;padding:0 8px;color:#fff;font-family:inherit;font-size:inherit;line-height:20.7px;font-weight:700;text-decoration:none;text-transform:uppercase;transition:color .1s ease-in-out;} .swg-lang__current:hover,.swg-lang__current:active,.swg-lang__link:hover,.swg-lang__link:active{color:#FFA501;} .swg-lang__current{border:0;height:40px;background-color:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;} .swg-lang__current.is-active{background-color:rgba(0,0,0,.4);} .swg-lang__link{height:40px;} .swg-lang__item{background:rgba(0,0,0,.4);} .swg-lang__flag{margin-bottom:0;margin-right:8px;width:32px;display:block;} /* ===== constrain / hero / footer ===== */ .swg-constrain > .e-con-inner{padding-left:32px;padding-right:32px;} .swg-hero .elementor-widget-image img{filter:none;box-shadow:none;} .swg-footer-nav ul{display:flex;gap:0;list-style:none;margin:0 0 0 16px;padding:0;flex-wrap:wrap;} .swg-footer-nav a,.swg-footer-nav button{text-decoration:underline;color:#F7F7F7;font-family:inherit;font-size:14px;line-height:27px;background:none;border:0;padding:0;cursor:pointer;} .swg-footer-copy{display:flex;flex-direction:row;align-items:center;gap:0;flex-wrap:wrap;} .swg-footer-copy .elementor-widget-text-editor{margin-bottom:0;} .swg-footer-copy p{margin:0;} @media(max-width:767px){.swg-footer-copy{flex-direction:column;align-items:flex-start;gap:8px;}.swg-foot-left,} .swg-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} /* ===== neutralise Hello Elementor reset.css button styling (#cc3366 bg on hover/focus) : theme reset overrides ===== */ .swg-switcher__nav>button,.swg-lang__current,.swg-footer-nav button{border:0;border-radius:0;background-color:transparent;} .swg-switcher__nav>button:hover,.swg-switcher__nav>button:focus,.swg-switcher__nav>button:active{background-color:transparent;border:0;color:#FFA501;} .swg-lang__current:hover,.swg-lang__current:focus,.swg-lang__current:active{background-color:transparent;border:0;color:#FFA501;} .swg-lang__current.is-active,.swg-lang__current.is-active:hover,.swg-lang__current.is-active:focus{background-color:rgba(0,0,0,.4);} .swg-footer-nav button:hover,.swg-footer-nav button:focus,.swg-footer-nav button:active{background-color:transparent;border:0;color:#FFFFFF;text-decoration:none;} .swg-switcher__nav>button:focus-visible,.swg-lang__current:focus-visible{outline:2px solid #FFA501;outline-offset:2px;} /* ===== logo overlap: source pushes logo down 25px so it overhangs the black bar ===== */ .swg-logo{position:relative;bottom:-25px;z-index:2;} .swg-logo img{display:block;margin-bottom:0;} .swg-header,.swg-header .e-con-inner,.swg-header .elementor-widget-image{overflow:visible;} /* ===== switcher button metrics: padding only on the button; source weight 400 / lh 23px ===== */ .swg-switcher__nav>button{padding:1px 6px;font-weight:400;line-height:23px;} .swg-switcher__home>a{padding:0;font-weight:700;line-height:24px;} /* ===== header drop band: hard 8px shadow, no blur (source --boxShadowVertical) ===== */ .elementor-location-header{position:sticky;top:-50px;z-index:100;} .swg-header{box-shadow:0 8px 0 0 rgba(0,0,0,.15);position:relative;z-index:1;} .swg-switcher{position:relative;z-index:101;} /* ===== hero overlay: Elementor defaults the overlay pseudo to opacity .5, source is a true 0.3 black ===== */ .swg-hero::before{opacity:1;} /* ===== hero button: hard offset shadow, no blur (source) : hero button shadow ===== */ .swg-hero .elementor-button{box-shadow:8px 8px 0 0 rgba(0,0,0,.15);} .swg-hero .elementor-widget-image img{filter:none;box-shadow:none;} .swg-hero .elementor-widget-image{line-height:27px;} /* ===== hero 12-col grid: source layout is 12 fluid cols, 32px gap, inside the 1264 constrain ===== */ .swg-hero .swg-constrain > .e-con-inner{display:grid;grid-template-columns:repeat(12,1fr);column-gap:32px;row-gap:0;align-content:start;} .swg-hero .swg-logo-cell{grid-column:5 / span 4;width:auto;max-width:none;} .swg-hero .swg-text-cell{grid-column:4 / span 6;width:auto;max-width:none;} .swg-hero .swg-logo-cell img{width:100%;height:auto;display:block;} @media(max-width:767px){.swg-hero .swg-logo-cell{grid-column:1 / span 12;}.swg-hero .swg-text-cell{grid-column:1 / span 12;}} /* ===== hero button type scales at the 80em/1280px breakpoint : hero button responsive ===== */ @media(max-width:1279px){.swg-hero .swg-text-cell .elementor-button,.swg-hero a.elementor-button{font-size:20px !important;line-height:24px !important;}} /* ===== footer geometry (measured from source) : footer geometry ===== */ .elementor-location-footer .swg-constrain > .e-con-inner{align-items:flex-end;min-height:108.333px;} .swg-footer-copy{width:auto !important;flex:0 0 auto;} .swg-foot-right{width:auto !important;flex:0 0 auto;margin-left:auto;} .swg-footer-nav li{margin:0 16px 0 0;} .swg-footer-nav a{line-height:27px;} .swg-footer-nav button{line-height:16.1px;} .swg-foot-right .elementor-widget-image{line-height:27px;} .swg-foot-right .elementor-widget-image img{display:inline;vertical-align:baseline;} /* switcher container inherits the bar type (cosmetic parity) */ .swg-switcher{font-family:Bangers,"Open Sans",sans-serif;font-size:20px;font-weight:700;line-height:24px;} /* ===== footer base font 14px (source sets it on .primary-footer; drives inline-image baseline) : footer base font ===== */ .elementor-location-footer > .e-con{font-size:14px;} /* ================= sub-1280 responsive (measured from source at 768) ================= */ @media(max-width:1279px){ body,body.elementor-kit-5{font-size:16px !important;line-height:27px;} /* header shrinks 90 -> 80; logo keeps its 25px overhang */ .swg-header{min-height:80px !important;} .swg-header > .e-con-inner,.swg-header .swg-constrain > .e-con-inner{min-height:80px;} /* social icons live in the off-canvas menu below this width, so they are not in the bar */ .swg-header .swg-social:not(.swg-menu__social){display:none;} /* language picker regains its 16px right margin */ .swg-lang{margin-right:16px;} /* footer stacks: copy block (p over nav), then centred brand */ } /* ===== sub-1280 overrides v2: beat Elementor element specificity ===== */ @media(max-width:1279px){ .swg-header,.swg-header.e-con,.swg-header > .e-con-inner{min-height:80px !important;} .swg-header .swg-constrain,.swg-header .swg-constrain.e-con{min-height:80px !important;} } /* ===== sub-1280: nav items gain 8px vertical margin (source) : nav li vertical margin ===== */ /* ===== sub-1280: brand block is 108.333px tall in source (100px img + strut) : brands block height ===== */ /* ===== button hover pop: scale(1.08) on a back-overshoot curve (source) : button hover pop ===== */ .swg-hero .elementor-button{transition:color .1s ease-in-out,transform .3s cubic-bezier(.68,-.55,.27,1.55);} .swg-hero .elementor-button:hover,.swg-hero .elementor-button:focus{transform:scale(1.08);color:#fff;} /* ===== footer links: underline at rest, removed on hover + brighten to #fff (source) : footer link hover ===== */ .swg-footer-nav a:hover,.swg-footer-nav a:focus,.swg-footer-nav a:active, .swg-footer-nav button:hover,.swg-footer-nav button:focus,.swg-footer-nav button:active{text-decoration:none;color:#FFFFFF;} /* ================= mobile <768 (measured from source at 375) : mobile 375 pass ================= */ @media(max-width:767px){ /* constrain keeps its 32px gutter */ .swg-constrain > .e-con-inner{padding-left:32px !important;padding-right:32px !important;} /* switcher shrinks: 0 10px padding, 14px type */ .swg-switcher{font-size:14px;font-weight:400;} .swg-switcher__bar{font-size:14px;font-weight:400;} .swg-switcher__home>a{font-size:14px;font-weight:400;} .swg-switcher__nav>button{font-size:14px;font-weight:400;} /* header must not wrap: logo + lang overflow slightly and that is intended */ .swg-header .swg-constrain > .e-con-inner{flex-wrap:nowrap !important;} /* the 12-col grid cannot fit (11x32px gaps = 352px); collapse to one column */ .swg-hero .swg-constrain > .e-con-inner{grid-template-columns:1fr !important;column-gap:0 !important;} .swg-hero .swg-logo-cell,.swg-hero .swg-text-cell{grid-column:1 / -1 !important;} } /* ===== mobile <768: logo must not shrink; hero spacing grows : mobile hero rhythm ===== */ @media(max-width:767px){ .swg-logo{flex-shrink:0;} .swg-logo img{max-width:none;} .swg-hero--1{padding-top:160px !important;padding-bottom:144px !important;} .swg-hero--2{padding-top:192px !important;padding-bottom:176px !important;} .swg-hero--2 .swg-logo-cell{margin-bottom:48px !important;} } /* ===== Elementor default row-gap:20px was adding to the copy margin in the stacked footer : stacked footer gap ===== */ @media(max-width:1279px){ .elementor-location-footer .swg-constrain > .e-con-inner{row-gap:0 !important;column-gap:0 !important;} } /* ===== mobile <768: language picker must not shrink; hero 1 gains a 16px logo gap ===== */ @media(max-width:767px){ .swg-lang{flex-shrink:0;} .swg-hero--1 .swg-logo-cell{margin-bottom:16px !important;} } /* ===== mobile: the html widget wrapping the language picker must not shrink : lang no shrink ===== */ @media(max-width:767px){ .swg-header .elementor-widget-html,.swg-header .elementor-widget-html > .elementor-widget-container{flex-shrink:0;} .swg-header .e-con-inner > .e-con{width:auto !important;flex:0 0 auto;} } /* ===== header inner carries Elementor default 20px column-gap; source has none : header gap zero ===== */ @media(max-width:767px){ } /* ================= footer stacks below 1024 (source breakpoint; header/type use 1280) ================= */ @media(max-width:1023px){ .elementor-location-footer .swg-constrain > .e-con-inner{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0 !important;height:auto !important;row-gap:0 !important;column-gap:0 !important;} .swg-footer-copy{flex-direction:column;align-items:stretch;gap:0;width:100% !important;margin:0 0 16px 0;text-align:center;} .swg-footer-copy p,.swg-footer-copy .elementor-widget-text-editor{text-align:center;} .swg-footer-copy > .elementor-element,.swg-footer-copy > .elementor-widget{width:100% !important;max-width:100% !important;} .swg-footer-nav{width:100%;} .swg-footer-nav ul{width:auto;justify-content:center;flex-wrap:wrap;margin:0 0 16px 16px;} .swg-footer-nav li{margin:8px 16px;} .swg-foot-right{width:100% !important;margin-left:0;justify-content:center;height:108.333px;flex:0 0 auto;} .swg-foot-right .elementor-widget-image{width:100%;text-align:center;line-height:0;} } /* ===== below 26.5625em/425px: switcher gutter shrinks, header contents overflow : below 425px ===== */ @media(max-width:424px){ .swg-switcher{padding-left:10px !important;padding-right:10px !important;} .swg-header .swg-constrain > .e-con-inner{column-gap:0 !important;} .swg-lang{margin-left:auto;margin-right:-16px;} } /* ===== terms page : terms page ===== */ .swg-terms-box{margin-bottom:16px;} .swg-terms-box h1,.swg-terms-box h2{color:#000;} .swg-terms-box ul{font-family:Lato,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#000;margin:0;padding-left:25px;list-style:disc;} .swg-terms-box li{margin:0 0 8px;} .swg-terms-box .elementor-widget-text-editor{color:#000;} /* ===== terms box: tiling paper texture + hard offset shadow (source) : terms paper texture ===== */ .swg-terms-box{background-color:#EFEFBB;background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/paper-bg-tile.jpg);background-repeat:repeat;background-size:auto;background-position:0 0;box-shadow:8px 8px 0 0 rgba(0,0,0,.15);} /* ===== terms box inner border: pseudo-element inset 8px, 2px solid black : terms inner rule ===== */ .swg-terms-box{position:relative;} .swg-terms-box::before{content:"";position:absolute;inset:8px;width:auto !important;height:auto !important;border:2px solid #000;background:none;z-index:1;pointer-events:none;} /* ===== terms page responsive (three different breakpoints in the source) : terms responsive ===== */ /* section padding 64 -> 32 at 64em/1024 */ @media(max-width:1023px){ .swg-terms-section{padding-top:32px !important;padding-bottom:32px !important;} } /* box padding, h2 and list type step down at 80em/1280 */ @media(max-width:1279px){ .swg-terms-box{padding:24px !important;} .swg-terms-box h2{font-size:24px !important;line-height:30px !important;} .swg-terms-box ul,.swg-terms-box li,.swg-terms-box .elementor-widget-text-editor{font-size:16px !important;line-height:27px !important;} } /* ===== per-game header: Heist 2 : heist 2 header ===== */ .swg-header--h2{box-shadow:none !important;} .swg-logo--h2{position:relative;bottom:-16px;z-index:2;flex-shrink:0;} .swg-logo--h2 img{display:block;width:162px;height:90px;object-fit:contain;} /* game nav: Oswald 20/27, 5px padding, 16px side margins */ .swg-gamenav ul{display:flex;list-style:none;margin:0 16px;padding:0;} .swg-gamenav li{display:flex;} .swg-gamenav a{font-family:Oswald,"Open Sans",sans-serif;font-size:20px;line-height:27px;font-weight:400;color:#fff;text-decoration:none;padding:5px;white-space:nowrap;transition:color .1s ease-in-out;} .swg-gamenav a:hover,.swg-gamenav a:focus{color:#FFA501;} .swg-gamenav-w,.swg-gamenav-w > .elementor-widget-container{flex-shrink:0;} @media(max-width:1279px){.swg-gamenav{display:none;}} /* ===== Heist 2 nav spacing + hero : heist 2 hero+nav ===== */ .swg-gamenav li{margin:0 10px;} .swg-gamenav li:first-child{margin-left:0;} .swg-gamenav li:last-child{margin-right:0;} /* hero slides under the translucent header (source section starts at y=115, header spans 50-140) */ .swg-h2-hero{margin-top:-25px;} /* hero heading is Oswald 48/60 on this page, not Bangers */ .swg-h2-hero h1{font-family:Oswald,"Open Sans",sans-serif !important;font-size:48px !important;line-height:60px !important;font-weight:400 !important;} /* ===== Heist 2 header packing: nav grows, social + lang pin right : heist 2 header packing ===== */ .swg-header--h2 .swg-constrain > .e-con-inner{justify-content:flex-start !important;column-gap:0 !important;} .swg-header--h2 .swg-gamenav-w{flex:1 1 auto;min-width:0;} .swg-header--h2 .swg-gamenav ul{justify-content:flex-start;} .swg-header--h2 .elementor-widget-html:not(.swg-gamenav-w){flex:0 0 auto;} .swg-header--h2 .swg-logo--h2{flex:0 0 auto;} /* ===== Heist 2 skin: the switcher bar is Oswald here, Bangers on the parent site. Scoped to the per-game body class so other games keep their own type : heist 2 switcher type ===== */ body.swg-game-steamworld-heist-2 .swg-switcher, body.swg-game-steamworld-heist-2 .swg-switcher__bar{font-family:Oswald,"Open Sans",sans-serif;font-size:20px;line-height:30px;font-weight:700;} body.swg-game-steamworld-heist-2 .swg-switcher__home>a{font-family:Oswald,"Open Sans",sans-serif;font-size:20px;line-height:30px;font-weight:700;} body.swg-game-steamworld-heist-2 .swg-switcher__nav>button{font-family:Oswald,"Open Sans",sans-serif;font-size:20px;line-height:23px;font-weight:400;} body.swg-game-steamworld-heist-2 .swg-switcher__item a{font-family:Oswald,"Open Sans",sans-serif;font-size:20px;line-height:40px;font-weight:700;} /* ================= Heist 2 page body, sections 2-10 : heist 2 body ================= */ /* The Heist 2 skin swaps the site pair (Lato / Permanent Marker, teal buttons) for Nunito / Oswald and the orange #DC5002 accent, and wraps its copy in a cream octagon-clipped box. Every number below is measured off the source at 1440. Scoped to this page's own section classes so the parent-site pages are untouched. Container layout is set through Elementor's own --flex-* / --width custom properties: the kit's custom CSS is enqueued before elementor-frontend.css, so a plain flex or width declaration here loses the cascade tie to .e-con. */ .swg-h2-video,.swg-h2-news,.swg-h2-adventure,.swg-h2-gallery,.swg-h2-features, .swg-h2-band,.swg-h2-characters,.swg-h2-kits,.swg-h2-form{ --h2Accent:#DC5002;--h2Box:#FFEAC4;--h2Deep:#1D59A5; font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#fff;} /* ===== the cream background box (source .background-box) : h2 box ===== */ .swg-h2-box{position:relative;padding:40px;color:#000;} .swg-h2-box::before{content:"";position:absolute;inset:0;background:var(--h2Box);z-index:0; clip-path:polygon(30px 0%,calc(100% - 30px) 0%,100% 30px,100% calc(100% - 30px),calc(100% - 30px) 100%,30px 100%,0% calc(100% - 30px),0px 30px);} .swg-h2-box > *{position:relative;z-index:2;} .swg-h2-box h1,.swg-h2-box h2,.swg-h2-box h3,.swg-h2-box h4{font-family:Oswald,"Open Sans",sans-serif;font-weight:700;letter-spacing:-1px;color:#000;} .swg-h2-box p,.swg-h2-box li,.swg-h2-box label{font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#000;} /* ===== section headings : h2 section headings ===== */ .swg-h2-news > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title, .swg-h2-gallery > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title{ font-family:Oswald,"Open Sans",sans-serif;font-size:48px;line-height:60px;font-weight:700;letter-spacing:-1px;color:#fff;margin:0 0 75px;} .swg-h2-characters > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title{ font-family:Oswald,"Open Sans",sans-serif;font-size:36px;line-height:45px;font-weight:700;letter-spacing:-1px;color:#fff;margin:0 0 75px;} .swg-h2-news > .swg-constrain > .e-con-inner,.swg-h2-gallery > .swg-constrain > .e-con-inner, .swg-h2-characters > .swg-constrain > .e-con-inner,.swg-h2-adventure > .swg-constrain > .e-con-inner, .swg-h2-kits > .swg-constrain > .e-con-inner,.swg-h2-form > .swg-constrain > .e-con-inner{--gap:0px;} /* ===== buttons: source is an orange pill in Nunito, not the site's teal Bangers : h2 buttons ===== */ .swg-h2-news .elementor-button,.swg-h2-kits .elementor-button,.swg-h2-form .elementor-button{ background-color:var(--h2Accent);color:#fff;border:0;border-radius:90px; font-family:Nunito,"Open Sans",sans-serif;font-size:20px;line-height:30px;font-weight:700; padding:14px 24px;fill:#fff;transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);} .swg-h2-news .elementor-button:hover,.swg-h2-news .elementor-button:focus, .swg-h2-kits .elementor-button:hover,.swg-h2-kits .elementor-button:focus, .swg-h2-form .elementor-button:hover,.swg-h2-form .elementor-button:focus{ background-color:var(--h2Accent);color:#fff;transform:scale(1.08);} /* ===== news feed: 2-column grid of 16:9 cards : h2 news ===== */ /* widgets must not shrink: .e-con-inner is height:100%, which squeezes the feed at narrow widths */ .swg-h2-news > .swg-constrain > .e-con-inner > .elementor-widget{flex-shrink:0;} .swg-h2-news .elementor-posts-container{display:grid;grid-template-columns:repeat(2,1fr);column-gap:32px;row-gap:32px;} .swg-h2-news .elementor-posts .elementor-post{display:block;margin:0 0 16px;padding:0;} .swg-h2-news .elementor-posts .elementor-post__thumbnail__link{display:block;margin:0 0 8px;} /* Elementor sizes the thumbnail with percentage padding and absolutely positions the image inside it. That percentage resolves against a width the flex column has not settled yet, so the widget ends up 11px short of its own content. Letting the image size itself in normal flow gives the row a definite height at every width. */ .swg-h2-news .elementor-posts .elementor-post__thumbnail{padding-bottom:0 !important;height:auto;background:var(--h2Deep);overflow:hidden;} .swg-h2-news .elementor-posts .elementor-post__thumbnail img{position:static !important;transform:none !important;display:block !important;width:100% !important;height:auto !important;max-width:100% !important;aspect-ratio:16/9 !important;object-fit:cover;} .swg-h2-news .elementor-posts .elementor-post__text{margin:0;} .swg-h2-news .elementor-posts .elementor-post__title{font-family:Oswald,"Open Sans",sans-serif;font-size:36px;line-height:45px;font-weight:700;letter-spacing:-1px;margin:0 0 8px;} .swg-h2-news .elementor-posts .elementor-post__title a{color:#fff;text-decoration:none;} .swg-h2-news .elementor-posts .elementor-post__meta-data{font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#fff;margin:0;} .swg-h2-news .elementor-posts .elementor-post__read-more{display:none;} .swg-h2-news > .swg-constrain > .e-con-inner > .elementor-widget-button{margin:32px 0 16px;} .swg-h2-news .elementor-widget-button .elementor-button-wrapper{text-align:center;} /* ===== adventure: full-bleed art with a narrow box 242px down the section : h2 adventure ===== */ .swg-h2-adventure{padding:242px 0 226px;} .swg-h2-adventure > .swg-constrain > .e-con-inner{--align-items:flex-start;} .swg-adv-box{flex:0 0 378.67px !important;max-width:100%;} .swg-adv-box .elementor-heading-title{font-size:36px;line-height:45px;margin:0 0 27px;text-align:left;} .swg-adv-box .elementor-heading-title strong{color:var(--h2Accent);font-weight:900;} .swg-adv-box p{margin:0;text-align:left;} /* ===== gallery: 4-column 16:9 grid. WordPress prints an id-scoped "#gallery-n .gallery-item{max-width:25%}" rule inline, hence the !important : h2 gallery ===== */ .swg-h2-gallery .elementor-image-gallery .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin:0;} .swg-h2-gallery .gallery .gallery-item{max-width:none !important;width:auto !important;margin:0 !important;padding:0;float:none;display:block;} .swg-h2-gallery .gallery .gallery-icon{display:block;margin:0;} .swg-h2-gallery .gallery .gallery-item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:0 !important;background:var(--h2Deep);} .swg-h2-gallery .gallery .gallery-caption{display:none;} /* ===== features: cream box beside the art, 6+6 of the 12-col grid : h2 features ===== */ .swg-h2-features > .swg-constrain > .e-con-inner{--flex-direction:row;--flex-wrap:nowrap;--align-items:flex-start;--gap:0px 32px;padding-bottom:16px;} .swg-feat-box{flex:0 0 584px !important;} .swg-feat-box .elementor-heading-title{font-size:36px;line-height:45px;margin:0 0 27px;} .swg-feat-box ul{margin:0;padding:0 0 0 25px;list-style:disc;} .swg-feat-box li{margin:0 0 8px;} .swg-h2-features > .swg-constrain > .e-con-inner > .elementor-widget-image{flex:0 0 584px;align-self:flex-start;} .swg-h2-features .elementor-widget-image img{display:block;width:100%;height:auto;} /* ===== characters: horizontal carousel, three of eleven cards visible : h2 characters ===== */ .swg-car{position:relative;width:100%;} .swg-char-grid{--flex-direction:row;--flex-wrap:nowrap;--align-items:stretch;--gap:0px 32px; padding:0 64px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory; scrollbar-width:none;-ms-overflow-style:none;} .swg-char-grid::-webkit-scrollbar{display:none;} .swg-char-card{flex:0 0 332px !important;position:relative;padding:16px 16px 32px;scroll-snap-align:center;} .swg-char-card::before{content:"";position:absolute;inset:0;background:var(--h2Box);z-index:0; clip-path:polygon(30px 0%,calc(100% - 30px) 0%,100% 30px,100% calc(100% - 30px),calc(100% - 30px) 100%,30px 100%,0% calc(100% - 30px),0px 30px);} .swg-char-card > *{position:relative;z-index:2;} .swg-char-card > .elementor-widget-image{margin:0 0 16px;} .swg-char-card .elementor-widget-image img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;} .swg-char-card .elementor-heading-title{font-family:Oswald,"Open Sans",sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-1px;color:#000;margin:0 0 16px;} .swg-char-card .elementor-widget-text-editor{font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#000;} .swg-char-card p{margin:0;} .swg-car-btn{position:absolute;top:50%;width:48px;height:48px;padding:0;border:0;border-radius:100%; background:var(--h2Accent);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2; transform:translateY(-50%);transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);} .swg-car-btn[hidden]{display:none;} .swg-car-btn--next{right:0;} .swg-car-btn--prev{left:0;transform:translateY(-50%) rotate(180deg);} .swg-car-btn--next:hover,.swg-car-btn--next:focus{transform:translateY(-50%) scale(1.08);} .swg-car-btn--prev:hover,.swg-car-btn--prev:focus{transform:translateY(-50%) rotate(180deg) scale(1.08);} .swg-car-btn__icon{width:29px;height:26px;fill:#fff;display:block;} /* ===== kits: art and box side by side, mirrored on the second row : h2 kits ===== */ .swg-h2-kits > .swg-constrain > .e-con-inner > .e-con{--flex-direction:column;--flex-wrap:nowrap;--gap:32px 0px;} .swg-kit-card{--flex-direction:row;--flex-wrap:nowrap;--align-items:flex-start;--gap:0px 32px;padding:0;} .swg-h2-kits .swg-kit-card:nth-of-type(2){--flex-direction:row-reverse;} .swg-kit-card > .elementor-widget-image{flex:0 0 584px;} .swg-kit-card > .elementor-widget-image img{display:block;width:100%;height:auto;} .swg-kit-box{flex:0 0 584px !important;} .swg-kit-box .elementor-heading-title{font-size:36px;line-height:45px;margin:0 0 27px;} .swg-kit-box p{margin:0 0 27px;} .swg-kit-box .elementor-widget-button .elementor-button-wrapper{text-align:left;} /* ===== newsletter: 704px thin constrain, cream box, orange-bordered fields : h2 form ===== */ .swg-h2-form > .swg-constrain > .e-con-inner{max-width:704px;} .swg-h2-form .swg-newsletter .elementor-form-fields-wrapper{margin:0;} .swg-h2-form .swg-newsletter .elementor-field-group{margin:0 0 16px;padding:0;width:100%;flex-wrap:wrap;} .swg-h2-form .swg-newsletter .elementor-field-label{font-family:Oswald,"Open Sans",sans-serif;font-size:24px;font-weight:400;line-height:normal;color:#000;width:50%;margin:0 0 4px;padding:0;} .swg-h2-form .swg-newsletter .elementor-field-type-email .elementor-field-label{order:1;} .swg-h2-form .swg-newsletter .elementor-field-type-email::after{order:2;width:50%;content:"You must be over 18"; font-family:Nunito,"Open Sans",sans-serif;font-size:14px;line-height:normal;font-weight:400;color:#000;margin:0 0 8px;} .swg-h2-form .swg-newsletter .elementor-field-type-email .elementor-field{order:3;width:100%;margin-top:8px;} .swg-h2-form .swg-newsletter input[type=email].elementor-field{background-color:#fff;border:2px solid var(--h2Accent);border-radius:0; padding:12px 16px;font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:20.7px;color:#000;height:auto;} .swg-h2-form .swg-newsletter .elementor-field-type-acceptance .elementor-field-subgroup{margin-top:8px;width:100%;} .swg-h2-form .swg-newsletter .elementor-field-option label{font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#000;} .swg-h2-form .swg-newsletter .elementor-field-type-submit{padding:16px 0 0;margin-bottom:0;justify-content:flex-start;} .swg-h2-form .swg-newsletter .elementor-field-type-submit .elementor-button{width:auto;} /* ===== sections 2-10, corrections after measuring against the source : h2 corrections ===== */ /* Elementor's frontend sheet is enqueued after the kit's custom CSS, so the rules below that contend with its own defaults carry the weight to win the tie. */ .swg-form-box .elementor-heading-title{font-size:36px;line-height:45px;margin:0 0 27px;} .swg-h2-news .elementor-posts .elementor-post__thumbnail__link{margin:0 0 8px !important;} .swg-char-card > .elementor-widget-image{margin:0 0 16px !important;} .swg-h2-form .swg-newsletter .elementor-field-type-submit .elementor-button{width:auto !important;flex:0 0 auto !important;} /* the adventure box sits in a column flex, so its 378.67px is a width, not a flex-basis */ .swg-adv-box{flex:0 0 auto !important;width:378.67px;align-self:flex-start;} /* the source's Umbraco markup leaves an empty validation line under each checkbox, which is what makes its acceptance rows 65px rather than 56px */ .swg-h2-form .swg-newsletter .elementor-field-type-acceptance .elementor-field-subgroup{min-height:65px;} /* ===== page backdrop and text alignment : h2 backdrop ===== */ /* The source tiles a painted backdrop behind every transparent section; without it the overlay sections read as flat navy. Scoped to the per-game body class. */ body.swg-game-steamworld-heist-2{background-color:#1D59A5; background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/h7b3dq1-page-bg-2560w.jpg); background-size:100%;background-position:50% 50%;background-repeat:repeat;background-attachment:scroll;} /* the source centres the news and character sections and the gallery heading; adventure, features, kits and the form stay left-aligned */ /* .e-con-boxed resets text-align to initial, so the inner wrapper needs it too */ .swg-h2-news,.swg-h2-news .e-con-inner,.swg-h2-characters,.swg-h2-characters .e-con-inner{text-align:center;} .swg-h2-gallery > .swg-constrain > .e-con-inner > .elementor-widget-heading{text-align:center;} /* ===== cream box edge: the source paints a 4-sided bevel with layered gradients rather than a border, so the octagon clip cuts through it cleanly : h2 box edge ===== */ .swg-h2-box::before,.swg-char-card::before{ background-color:#FFEAC4; background-image: linear-gradient(#DC5002 0px,#DC5002 6px,#FFCE6F 7px,#FFCE6F 10px,#FFEAC4 11px,rgba(0,0,0,0) 12px), linear-gradient(0deg,#DC5002 0px,#DC5002 6px,#AF3F00 7px,#AF3F00 12px,#FFCE6F 13px,#FFCE6F 15px,#FFEAC4 16px,rgba(0,0,0,0) 17px), linear-gradient(90deg,#DC5002 0px,#DC5002 4px,#FFCE6F 5px,#FFCE6F 8px,#FFEAC4 9px,rgba(0,0,0,0) 10px), linear-gradient(270deg,#DC5002 0px,#DC5002 4px,#FFCE6F 5px,#FFCE6F 8px,#FFEAC4 9px,rgba(0,0,0,0) 10px);} /* the source's carousel window is inset 64px, so the next card is hidden behind the control */ .swg-char-grid{clip-path:inset(0 64px);} /* ===== section dividers : h2 dividers ===== */ /* The source separates its sections with decorative strips that sit in the flow and bleed over their neighbours via negative margins: a 34px beam that nets 19px of gap, and a 125px water edge that nets 75px. Reproduced as a ::before on the section that follows each strip, with the same net gap carried by margin-top. */ .swg-h2-news,.swg-h2-adventure,.swg-h2-gallery,.swg-h2-features, .swg-h2-band,.swg-h2-characters,.swg-h2-kits,.swg-h2-form{position:relative;} .swg-h2-news::before,.swg-h2-adventure::before,.swg-h2-gallery::before,.swg-h2-features::before, .swg-h2-band::before,.swg-h2-characters::before,.swg-h2-kits::before,.swg-h2-form::before{ content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none; background-repeat:repeat-x;background-position:0 0;} /* beam: art runs from 10px above the gap to 5px into the section below it */ .swg-h2-adventure,.swg-h2-gallery,.swg-h2-band,.swg-h2-characters,.swg-h2-kits{margin-top:19px;} .swg-h2-adventure::before,.swg-h2-gallery::before,.swg-h2-band::before, .swg-h2-characters::before,.swg-h2-kits::before{ top:-29px;height:34px;background-size:auto; background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/divider-beam.png);} /* water: art runs the full 125px up from the section's top edge */ .swg-h2-news,.swg-h2-features,.swg-h2-form{margin-top:75px;} .swg-h2-news::before,.swg-h2-features::before,.swg-h2-form::before{ top:-125px;height:125px;background-size:auto 100%;} .swg-h2-news::before,.swg-h2-form::before{ background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/divider-water-lower-light-to-dark.png);} .swg-h2-features::before{ background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/divider-water-upper-dark-to-light.png);} /* the strip above the footer */ body.swg-game-steamworld-heist-2 .elementor-location-footer .e-con.e-parent:first-of-type{position:relative;margin-top:75px;} body.swg-game-steamworld-heist-2 .elementor-location-footer .e-con.e-parent:first-of-type::before{content:"";position:absolute;left:0;right:0;top:-125px;height:125px;z-index:2; pointer-events:none;background-repeat:repeat-x;background-position:0 0;background-size:auto 100%; background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/divider-water-lower-dark-to-dark.png);} /* ================= Heist 2 body, sub-1280 : h2 body sub-1280 ================= */ /* Below 1280 the source keeps its 12-column grid but drops a full type step: body copy goes 18 -> 16px (line-height stays 27), headings shed a size, and the fixed pixel spans above become fluid fractions of the grid (col = (100% - 11*32px)/12). */ @media(max-width:1279px){ .swg-h2-video,.swg-h2-news,.swg-h2-adventure,.swg-h2-gallery,.swg-h2-features, .swg-h2-band,.swg-h2-characters,.swg-h2-kits,.swg-h2-form{font-size:16px;} .swg-h2-box p,.swg-h2-box li,.swg-h2-box label, .swg-char-card .elementor-widget-text-editor,.swg-char-card p, .swg-h2-news .elementor-posts .elementor-post__meta-data{font-size:16px;line-height:27px;} .swg-h2-news > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title, .swg-h2-gallery > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title{font-size:36px;line-height:45px;margin:0 0 59px;} .swg-h2-characters > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title, .swg-adv-box .elementor-heading-title,.swg-feat-box .elementor-heading-title, .swg-kit-box .elementor-heading-title,.swg-form-box .elementor-heading-title{font-size:24px;line-height:30px;} .swg-h2-news .elementor-posts .elementor-post__title{font-size:24px;line-height:30px;} .swg-char-card .elementor-heading-title{font-size:20px;line-height:25px;} .swg-h2-news .elementor-button,.swg-h2-kits .elementor-button,.swg-h2-form .elementor-button{font-size:18px;line-height:27px;} /* the hero heading takes the same step down as the section headings */ .swg-h2-hero h1{font-size:36px !important;line-height:45px !important;} .swg-h2-form .swg-newsletter .elementor-field-label{font-size:20px;} .swg-h2-form .swg-newsletter input[type=email].elementor-field{font-size:16px;line-height:18.4px;} .swg-h2-form .swg-newsletter .elementor-field-option label{font-size:16px;line-height:normal;} .swg-h2-form .swg-newsletter .elementor-field-type-acceptance .elementor-field-subgroup{min-height:0;} /* six of twelve columns */ .swg-feat-box,.swg-kit-box, .swg-h2-features > .swg-constrain > .e-con-inner > .elementor-widget-image, .swg-kit-card > .elementor-widget-image{flex:0 0 calc((100% - 32px)/2) !important;} /* four of twelve columns */ .swg-adv-box{width:calc((100% - 352px)/3 + 96px);} /* two cards visible instead of three: one 32px gutter between them, like the six-of-twelve columns above. The old 192px allowance dated from when the side padding lived on this element and left the pair 80px short each. */ .swg-char-card{flex:0 0 calc((100% - 32px)/2) !important;} .swg-h2-gallery .elementor-image-gallery .gallery{grid-template-columns:repeat(3,1fr);} } @media(min-width:1024px) and (max-width:1279px){ .swg-h2-gallery .elementor-image-gallery .gallery{grid-template-columns:repeat(4,1fr);} } /* ================= Heist 2 body, mobile <768 : h2 body mobile ================= */ /* Under 768 every multi-column layout in the source stacks, the section padding halves and the carousel shows a single card. Measured from the source at 375. */ @media(max-width:767px){ .swg-h2-video{padding:32px 0 64px;} .swg-h2-news,.swg-h2-gallery,.swg-h2-features,.swg-h2-characters,.swg-h2-kits{padding:64px 0;} .swg-h2-form{padding:64px 0 32px;} .swg-h2-adventure{padding:192px 0 176px;} /* section headings lose the desktop gap: 27px of heading margin plus the block's 16px */ .swg-h2-news > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title, .swg-h2-gallery > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title, .swg-h2-characters > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title{margin:0 0 43px;} /* the news card's own type goes left while the section heading and button stay centred */ .swg-h2-news .elementor-posts .elementor-post__title, .swg-h2-news .elementor-posts .elementor-post__meta-data{text-align:start;} .swg-h2-news .elementor-posts-container{grid-template-columns:repeat(2,1fr);} .swg-h2-gallery .elementor-image-gallery .gallery{grid-template-columns:repeat(2,1fr);} /* everything side-by-side stacks */ .swg-h2-features > .swg-constrain > .e-con-inner{--flex-direction:column-reverse;padding-bottom:16px;} .swg-feat-box,.swg-kit-box, .swg-h2-features > .swg-constrain > .e-con-inner > .elementor-widget-image, .swg-kit-card > .elementor-widget-image{flex:0 0 auto !important;width:100%;} .swg-adv-box{width:100%;} .swg-h2-kits .e-con-inner > .e-con > .swg-kit-card{--flex-direction:column;} /* stacked, the source shows the art above the copy on BOTH rows; our markup already orders them art-first, so neither row reverses */ .swg-h2-kits .e-con-inner > .e-con > .swg-kit-card:nth-of-type(2){--flex-direction:column;} /* the stacked kit card carries the source's 16px block padding under its box */ .swg-kit-box{margin-bottom:16px;} /* one card per view */ .swg-char-grid{padding:0 32px;clip-path:inset(0 32px);} .swg-char-card{flex:0 0 100% !important;width:auto;} .swg-car-btn{width:40px;height:40px;} .swg-car-btn__icon{width:22px;height:20px;} } /* ===== cream box corners: the source draws the octagon's notched corners with four sprites on the element itself. The ::before gradients only bevel the straight edges, so without these the diagonals render bare. Copied verbatim from the source. : h2 box corners ===== */ .swg-h2-box::after,.swg-char-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-sizing:border-box;border:none;box-shadow:none;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAeCAYAAABTwyyaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAJASURBVHgBzZdNbtNAFMf/HjskVUhwqxBFKVItJIQKC7KhSLBIFmWDEBgWXUJuADcINyg36BE4Qu8BRb4DqJu2dvqe20Zt5sPT1OPkJ0WWZ57ln0bvw/FQMr9jf3z93sM0mo8R8Lbm16ZANPdcSGvhzTXM1jyURBKHYYr/v0hhhAooRTyJG1GGk8P5U3OJwB1J4tqgamnmTuLJJ/9rhrRyaWbhVEli8S0FfmJJLCT+Nxb7dMrfi+KCsI21rU0sgmjU8+drYQvBgzZ8uheNe/k6c2vxo1gc0GVcFMcv3fzyma4tuOBWOU4nPcEKSDPWJ/4nDkYessOiOK100JSDz46xKFbitn1aK91+Tr9nKJPAJijFKadIZIqp9zrok/RV8cxoRqVLM4U5fpHX07EpRitdo8+K9ZdwgTFVOEVSnCSmmLXoEXp772Rpn3K695beUIMLtKnCH00Z/hmLsfViG92Pu/IGS3eHzqQZbaqQ9MRUjIXSfhMuUYof0Te1aTJyTiul+YQ7r51LM5I45zV9xE90D1wVopKNnYuCrABJ3NSvuU/39t7LhciEA6rUPqrihji3PpO0dozzgLn/BFUya4emkV4o7WDAFJGfOOe1QHagDKC00Eo7moo25H2cRvo+FCnC0n2dtMOpaIO4HOmxapNbHncRibxXj7BMBBXjD9VG98Mumk8fyxsVTEUblANoffgKrcG2vFHRVLRBEmfpjeGOHMknvCLSjCSulGY6b1ZGmrH7z8lTsf4Qq0Sx+BKmog3nnOl6Lm5S5F8AAAAASUVORK5CYII=) top left no-repeat,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAeCAYAAABTwyyaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAKPSURBVHgBzZY9b9NAGMf/cWIlVUlwS1MqOpDyKmAIC1RiIEUqYkCCsDCi9hPwEYBPQmFkgDAwIJAIgoUFZUNIBcpAVRKQHKqIOE7s3mO3qa9+SdM45/yl6Ozn3n53+fvuia0WJRNDVAxQ2QQqK1dOloxHCEmxYYPvma4ch7w8V2quYUBJECpzwUDr3Y9iKocBJRicoQO5MOCFg5PCgI8EnDQofMz8fL/7cRpNjf1a1rNe/9dt1FbtZ13ddMXsfi0YmgbnODqrp7InAFCRYFybK0FFH+LAh6E2WyxtAi20/qkCbeOPq81B4IdulYSSxtjxWaTz5zBz9yZkJeNqw3buogGJ2QbKfscV6vEEgz52704o8DGz+jHYKu2GY3SdGVjn6zsN/7YdfbeNVtttxmyz/vSF9R24gPZpm97gYYgW+/sNt8ggeIa1cqrUWQ4aUoxVJBmYusKFgmzD/q6l1WL8MYKGhCjJzLqZ81xoEHixF1DmApDMciGCz95e9OngDy/+5py8xCwscyE6LicK8z4dvOHFg8fH7Z3fo8nCZYzlZn06mUvfitIDZySaXCV92mUZ0vStRR+/W+f8Qyd8ZEmWl2WkVBIp313n4ROISq0690rn+sazV565jFPb8IIuIG5mdhmpFaCx1g39//kLtZdvfS4jb4nf8WqZ8uPuK0GvP3mOfiXe43SD0smyLflw2soc+5V4q5AoZ6m+5xM02Lu/WfmCJit72SYacBIlXrUyZxunGl+/4+/rD74LiO44pMQru2DnMB4aP3siIBWIEtyancEfvc4oc57VlAocuXHVuytGQRPsMjp0xrNKmc8jOTPlio8GOEnJ29ZxnDg78tr10QEnUf4yXXBZhyxD6YBTWxThD5/U6MmpAAAAAElFTkSuQmCC) top right no-repeat,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAeCAYAAABTwyyaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMQSURBVHgBzVhNaxNRFD3vTZM2raa1aKW4sEULRRFcaRcusnLjJuDGbdeiBX+B/gMruBX/gDQLF4qLVnBhcaHgB8HWmkKlaiHfSZuPmee9M5k0kzExaeJMDiTvvfvuzJx359w7b0ZsRrUVQEVRg7FwBXPXr6KO8AX6XcSgQWrQFwWQtg0/V9cRf7l+6JH9AqTe0doqGCTI2RjSCmLRNowHBOIv3jrJFxK0oleAXsCgQOO/R3EVvzsvI9SdCUriqQO7X3cwOjmO8TOnLE+OeH7D6g9PwW9Iu9MomdMjwrR9jL1G5see8wiWTuYD/EadOEkmQc0D7o9olq2yX8Kbx8/c5HMU+b01+AnpHBhPudUo4CdrUWfy60+eo5jMOo8s0WKyn+EXHMQ5UalJcH86JDAWsMgzaY68izxr3qdqozUbKEm3ie4CdSfCRDxTpmKirMjvftrC9KVzCISGLWdlAEL6kqyi1cS3qEwR34kDqjBbOcMkzxidDOPa7Ztma0IG6PbcoDMF4CVkm7kE/3GiTo8eurlkY1R80brWaoIkU6LG3AqEyItEgWLVmnPJppy0JjyUjGg3+T2KGQPyPUuGx1t5hUJF1eddsvFwX6O1m1yOI31nXlB9QYTHjcnKcEWeS6ReBIK0ThmEb8QZ9+YVPSbFLepOSFpBOCiQLivYcXeRr6StMskLYP3zPdVG0G+ITpxo60taVyv2OEt8tvOGw8clm2YMjaErVNtv6DoiziDyq0Q+Yo9/Hyj82lcOn3+S7yM6Jr4RHYoIGKuNtp2CQqrcnnwxmUM/EQgFTUl2TJyxGZUPqVmyx5ykm1mFsqHgNWQ3zhqM+6L2YDLHNJg9LszWa3RFnDdhVNcXG2384nH2WFen6Qu6vuJcrLpGzXKjbWyIXj5C3ob9SKFqlgxjivbvJ4a9I3/kK/2tyjC4xnOlsZ+urP/GHGC73iKXy7rbVmmR+D2FqPmbjJfoKauav8l4iZ6IN3+T8RI917HzMT1GiovBY/SlALNkYEZerMEj9L1+8cuHDo0qjlqienAZ/wl/AAd7JDxvomIUAAAAAElFTkSuQmCC) bottom left no-repeat,url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAeCAYAAABTwyyaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAANxSURBVHgBzZjNThNRGIbf6e/QhgJaMQghViAx7MWlunLtJXAJ3oHcgS7cmu5YGZtojOLCQtAIEgSNUBUSYgAVCH8NP6W09ftmmHbmzEw7MzSlb3Jy2vnpPOc973fOgFTamCyhmVTKA1sfgNxm+dDq6wnkZuZ1F0npAJpJhQOC/gjkd8uHZkffoeVHBiFf5bISpBEfmkUMvTFugs7OLxqgScmB1GmTOM6x4HhwTM7E0H9nFpFolQyX+lEc4f584OzS6SEQvgLPyv4E9uYNhxj69/QCrsqSye1ECiv8wTu4NrXcS0FAJni5W+39UWe/sf+d2gKsoEM+CZ0t1m57B9dDs3iKj9bVxgq2AyFqkev2s7HzGThYgRU0S4SmpW9Ec9sbOEPqoa3EBcZNA2N4+Rq1TnoizcZG2lCEIjS73RGqnKMhrJDbj/XXuwNXoNPVoa3Excdtz/q0HprVFRHdlthtw0jdLYdc+YJTyxNz9NBF5HPe9jEROh6WEAtWztMQ5vpThaR4n3PHOZO63Yz1LTWB5fEv6pfRMcT7e9B7a5D6bkQuxWr+pAjNERHd9qH4wOre2uAci20jdP4oh6lnr7C1tGq4lL9rx3qHBnHz/m3bAVhBi2s26Ym+IPWSbN9VOM+8xmZ/GTaGw+19TD59rvROxAPouzuEtq42W2jWjVYfojobuSDJ7XvOwW2AWVtLa+T0S8Vxt+IY8QD+fM2YoHmjEZc/Qhu2ynYF/N/7Ek6o4E52gON1U441Zd5OIfPmE+qtDirGnogpIsn+VHG42n0BrKWqnVfczYzNYjk9jXpLKUbBafq269PtkHaqWpycYy7CvbVN1Ft+SS1Gv2B2kXbIPptc6xVgRw+3swqk0nbUnmGrFSA/OOiH8uDjU1p8Su7WcV72hBeoszXbuEPaSXpxBzWfyFMaoy1YJsoWgg36YHLquEBlQnYdFUrlz/mC9YCsi1F5iUokHLjNqhoVdjUuA5fD5ikVJfvVFguaVgdlIDQeZTDcx8Pm+8WXKM/gXO1cOLWAnYgHxLJ72eU1myLyCC5kAo+SYzyV0Qb+bcQbDVyqjMc57ok2FpjlNiKaAlqOO+U6ZMKlvEREU2CwvfHAmrxEpHLvBYki8tBLRDRdELiUHnC40dip4f9XUd9FCsM4pxrueNHjKiKq0eDJ80ZE039QrJGEkEPMywAAAABJRU5ErkJggg==) bottom right no-repeat} /* ===== framed media: the source hangs a hard 8px offset shadow (--boxShadow) on the video embed, the news thumbnail, the gallery tiles and the kit art. The full-bleed band images and the features art are --no-background variants and carry none. : h2 media shadow ===== */ .swg-h2-video .elementor-widget-video, .swg-h2-news .elementor-posts .elementor-post__thumbnail, .swg-h2-gallery .gallery .gallery-item, .swg-kit-card > .elementor-widget-image img{box-shadow:8px 8px 0 0 rgba(0,0,0,.15);} /* ===== hero heading: Oswald 700 with the transparent-box drop shadow, not 400 : hero h1 weight ===== */ .swg-h2-hero h1{font-weight:700 !important;letter-spacing:-1px;text-shadow:0 2px 10px rgb(12,24,28);} /* ===== the floating store bar the source pins to the bottom of every Heist 2 page. Markup comes from swg-core; 403px is the natural width of its wooden backdrop. : h2 fixed ctas ===== */ .swg-ctas{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:3; width:403px;max-width:100%;padding:8px;box-sizing:border-box; display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start; border-radius:35px 35px 0 0; background:url(https://steamworldgames.com/wp-content/uploads/2026/08/h7b3dq1-fixed-cta-bg.png) no-repeat 50% 0;} .swg-ctas__heading{width:100%;margin:0 0 8px;text-align:center; font-family:Oswald,"Open Sans",sans-serif;font-size:24px;line-height:40px;font-weight:700;letter-spacing:-1px;color:#fff;} .swg-ctas__links{display:flex;flex-direction:row;column-gap:24px;margin:0 0 8px;} .swg-ctas__item{display:flex;align-items:center;justify-content:center;width:40px;height:40px; background:#86370D;transition:background-color .1s ease-in-out;} .swg-ctas__item:hover,.swg-ctas__item:focus{background:#DC5002;} .swg-ctas__icon{display:block;width:40px;height:40px;fill:#fff;} .swg-ctas__addendum{width:100%;margin:0;text-align:center; font-family:Nunito,"Open Sans",sans-serif;font-size:14px;line-height:27px;font-weight:400;color:#fff;} .swg-ctas .screen-reader-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;} @media(max-width:767px){ .swg-ctas{left:0;transform:none;width:100%;padding:16px 8px;} .swg-ctas__heading{font-size:20px;line-height:20px;margin:0 0 16px;} } /* ===== interactive states : h2 hover states ===== Hello Elementor's reset.css paints every button #cc3366 and every link #333366 on hover. Those leak onto the carousel arrows, the news card and the email field, none of which had a hover style of their own. Restored to the source's behaviour. */ /* carousel: the source inverts the disc (white ground, orange arrow) and does not scale */ .swg-h2-characters .swg-car-btn:hover,.swg-h2-characters .swg-car-btn:focus{background:#fff;} .swg-h2-characters .swg-car-btn:hover .swg-car-btn__icon, .swg-h2-characters .swg-car-btn:focus .swg-car-btn__icon{fill:var(--h2Accent);} .swg-h2-characters .swg-car-btn--next:hover,.swg-h2-characters .swg-car-btn--next:focus{transform:translateY(-50%);} .swg-h2-characters .swg-car-btn--prev:hover,.swg-h2-characters .swg-car-btn--prev:focus{transform:translateY(-50%) rotate(180deg);} /* news card: copy stays white and the whole card lifts, matching the source's .summary */ .swg-h2-news .elementor-posts .elementor-post{transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);} .swg-h2-news .elementor-posts .elementor-post:hover{transform:scale(1.08);} .swg-h2-news .elementor-posts .elementor-post__title a:hover, .swg-h2-news .elementor-posts .elementor-post__title a:focus{color:#fff;} /* the email field keeps its orange border when focused */ .swg-h2-form .swg-newsletter input[type=email].elementor-field:focus{border-color:var(--h2Accent);} /* ===== gallery thumbnails fade on hover (source: a:hover .grid__image{opacity:.75}) : h2 gallery hover ===== */ .swg-h2-gallery .gallery .gallery-item img{transition:opacity .1s ease-in-out;} .swg-h2-gallery .gallery .gallery-item a:hover img, .swg-h2-gallery .gallery .gallery-item a:focus img{opacity:.75;} /* ===== footer geometry, per-game : h2 footer ===== The source's footer is 400px tall with 80px of top padding and its own art. Ours was 292px, which also threw the tiled page backdrop out of phase: background-position:50% makes the tile origin depend on total document height, so a short footer shifts every bokeh on the page. Scoped to the Heist 2 body class - these are per-game values (--primaryFooterMinimumHeight / --primaryFooterPaddingTop / --primaryFooterBackgroundImage). */ body.swg-game-steamworld-heist-2 .elementor-location-footer .e-con.e-parent:first-of-type{ min-height:400px;padding:80px 0 0;background-color:#0C181C; background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/h7b3dq1-footer-bg.jpg); background-position:50% 0;background-size:auto;background-repeat:no-repeat;} /* ===== header nav row: in the source the nav, the social icons and the language picker share one 40px-tall flex row (the picker sets that height), so the links centre at y=75 and each keeps 3px of room underneath for the hover underline. Ours were separate flex items, so the nav sized to its own 37px and sat 2px low. : h2 nav row ===== */ .swg-header .swg-gamenav,.swg-header .swg-gamenav > ul{min-height:40px;} .swg-header .swg-gamenav > ul > li{position:relative;} /* underline grows 0 -> 100%; the source only draws it at >=80em */ @media(min-width:1280px){ .swg-header .swg-gamenav > ul > li > a::before{content:"";display:block;position:absolute;left:0;bottom:0;width:0;height:2px;background-color:#fff;transition:width .2s ease-in-out;} .swg-header .swg-gamenav > ul > li > a:hover::before{background-color:#FFA501;width:100%;} } /* source keeps focus white with a dotted outline; only hover recolours */ .swg-header .swg-gamenav a:focus{color:#fff;outline:1px dotted #fff;} .swg-header .swg-gamenav a:focus:hover{color:#FFA501;} /* ===== character carousel motion: the source never scrolls. Its track translates by exactly one card per click over .3s ease-in-out, while every card outside the window collapses to scale(0) and fades out over the same .3s, keeping its layout space. Ours was paging a native smooth-scroll by a whole window of three, which reads as a completely different animation. : h2 carousel motion ===== */ .swg-h2-characters .swg-car{padding:0 64px;} .swg-h2-characters .swg-car__view{overflow:hidden;} .swg-h2-characters .swg-char-grid{padding:0 !important;clip-path:none !important;overflow:visible !important;scroll-snap-type:none !important;transform:translateX(0);} .swg-h2-characters .swg-char-card{scroll-snap-align:none;} .swg-h2-characters .swg-car--ready .swg-char-card{transform:scale(0);opacity:0;} .swg-h2-characters .swg-car--ready .swg-char-card.is-visible{transform:scale(1);opacity:1;} /* transitions arm only after the first window is painted, so nothing animates on load */ .swg-h2-characters .swg-car--animated .swg-char-grid{transition:transform .3s ease-in-out;} .swg-h2-characters .swg-car--animated .swg-char-card{transition:transform .3s ease-in-out,opacity .3s ease-in-out;} /* ===== carousel controls: the source resizes them at 425px, not at the mobile breakpoint. 48px button / 29x26 icon / 64px gutter down to 425px, then 24px / 15x13 / 32px below it. Ours had a single 40px size from 767px down. : h2 carousel controls ===== */ @media(max-width:767px){ .swg-h2-characters .swg-car{padding:0 64px;} .swg-h2-characters .swg-car-btn{width:48px;height:48px;} .swg-h2-characters .swg-car-btn__icon{width:29px;height:26px;} } @media(max-width:424px){ .swg-h2-characters .swg-car{padding:0 32px;} .swg-h2-characters .swg-car-btn{width:24px;height:24px;} .swg-h2-characters .swg-car-btn__icon{width:15px;height:13px;} } /* ===== Heist 2 social + store icons. The hover colour, the tile behind each social icon and its shadow are all per-game overrides in the source: the site default is #efefbb with no tile, Heist 2 is #FFA501 on a #0C181C tile with a hard 4px shadow. Scoped to the game body class so the homepage and terms headers keep the default. : h2 social + store hover ===== */ body.swg-game-steamworld-heist-2 .swg-social__item{background-image:linear-gradient(#0C181C,#0C181C);background-size:8.49px 8.49px;box-shadow:4px 4px 0 rgba(0,0,0,.5);} body.swg-game-steamworld-heist-2 .swg-social__link:hover, body.swg-game-steamworld-heist-2 .swg-social__link:active{background-color:#FFA501;} /* store pills: the source darkens the tile to 80% black and leaves the icon white, it does not go orange. The rest state carries the small 15% hard shadow. */ .swg-ctas__item{box-shadow:4px 4px 0 rgba(0,0,0,.15);} a.swg-ctas__item:hover,a.swg-ctas__item:focus{background:#000000cc;} a.swg-ctas__item:hover .swg-ctas__icon,a.swg-ctas__item:focus .swg-ctas__icon{fill:#fff;} /* ===== base font: the source sets --fontFamilyBase on the game body class, so everything that inherits - the footer row above all - is Nunito, not the site's Lato. : h2 base font ===== */ body.swg-game-steamworld-heist-2{font-family:Nunito,"Open Sans",sans-serif;--h2Accent:#DC5002;--h2Box:#FFEAC4;--h2Deep:#1D59A5;} /* ===== newsletter form details, measured against the source: - the "over 18" hint is right-aligned within its half of the label row - the native checkbox is moved off-screen and the visible control is a 32px orange-outlined box drawn on the label; checking it scales in a 48px sprite (copied out of the source stylesheet server-side rather than retyped) - focus paints #747459, on the field outline and on the checkbox border : h2 form details ===== */ .swg-h2-form .swg-newsletter .elementor-field-type-email::after{text-align:right;} .swg-h2-form .swg-newsletter .elementor-field-option{position:relative;display:block;} .swg-h2-form .swg-newsletter .elementor-field-option input[type=checkbox]{position:absolute;left:-100%;top:0;opacity:0;} .swg-h2-form .swg-newsletter .elementor-field-option label{position:relative;display:inline-block;margin:0 0 8px;padding:4px 0 4px 40px;line-height:normal;cursor:pointer;-webkit-user-select:none;user-select:none;} .swg-h2-form .swg-newsletter .elementor-field-option label::before{content:"";position:absolute;left:0;top:0;display:block;box-sizing:border-box;width:32px;height:32px;border:2px solid var(--h2Accent);background-color:#fff;} .swg-h2-form .swg-newsletter .elementor-field-option label::after{content:"";position:absolute;left:-8px;top:-8px;display:block;width:48px;height:48px;margin:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAiHSURBVHgB7Zh9cJRHHce/u89zz93l5XJJDgglLVpBEVu0xSKVNqQM0lqxdvoSdKq8VIpSrTI4tsFCyVitfVHHjlqKVhiQEZRiX2Q6lGInM4AgRYsCAUo6BHogyQWSXEhy9zzP7vrb5y7JEXJ3mNbhH34zyT7PPvvsfvb3us8Bl+WDFQOXWMJjxi8PlEeqEmdbd9CtyjbukoF+qLo6ADPwKJHVMqWmBcqHhQn29WzjL51GzYJH6X+dFQiY/oIgd217crB8WLCk8opdXc3NzsDhlwSUzF1HVq4LFhdh5iMP4vqZ03F0917YPcmbhCtHTZ5wzeampiaZ+Q7LNpl6KRxu6VCTOrqVz3YVxwckM1dW3NSeNB/2+S3ctXwxrp0x1euPHjiCNd9Zhp54p179L5YwH2g5dqA5P+im0iljlpQNO+cLPZfRPXC8yjOPynzmug6EEBUasubHtfh49Y3nDT4b/Q9+v2g5Yk3vgTHsNnjg7tYjb59CTtCXSiZOeKx4XEwNX9c18/NQPt/gozNR+67pRqnzxvt27YE6dgymZWHWExdC9sq5M21Y9c1atBw7oW+PSsVuj7/b0GgimwgjUVEseCwO9Nz4GQI1YXTEz08fbABsFuENh5jZ1ASDNvvlJ5dgXNXkrGOLyksxb8VP8PLjv8CRnW+N5QxbwmPH3pMd1BWJcr8UdCV5IsmDW94QgZ27pFKKkeRB6xchhY5owyTI2xcvyAnZK+2nmhE7cTJ1w7Q6LGQH9RnJ0mLpUzFIZie4NqdKJrkjXMPkXBqGKfItKKTkLo3nnOO2RfMx6Z4v5HsFjbv/iU3Lf4bOM2dpSbbDr/x3nW58O5Yd9JzTEw5423F5wjalbWtIT5UOATCu6F92zWpIvSluGpi+cDYm13wxJyBZCns2bsaWZ1+Ak7Rd6lrJlP2D040Ncf08O2gwkCzxC4umkObef4D/fY9HVXnNOJxseAe265h+n+UynoLV+as38QkhmYZkpMlpD9yHm2ffi3yy9ZersWPdJlqNwgdY2tZ46GlkeH+O/BjrKS1UXLiua/61HqynB1VzavCNVT+nNrWwhpWa1DAp9mjPuqU5HerXkNonq7/+FW3CrKt0t8exeuESbF+7UUOS9tidBPkUBoRoVlBWA3EgVnSL47pBRe9oyGkLvgriwue+NRfjqz/rmcuxk4YiKBgGXAo0J5k09JgZD87B5Fl3IJfovLmW8ua7b+3DqBLphoJqWntjw6uDjc0KWjbmE7du2F+oVeebtuA+zHhoHsjWfc91VfnolBu0Fpib6DEokXNqTa29O2q/jZvn1uTU5NGde/Hb+d+ninRYx0Fs/nVnFx1fZuzPNn5QUKrFX5JQGxyyaxUtWDVn1gVjAsWFHuzIsVdDui53u7sMzTV13ix8+s7bkEt2/+lVbFz2DDpbz4CVhGCZvtPXRewWVnPQvmjQuro63Xc/uUhYV5GPTPrUeZrMlKKyMO790cOIXHWFd19FQTOdTK79czDRrrLtuTXY/PQKdHd2QtwwEfjkhHThyJ3tLjg91dfXq0jBmFccMzFaCjHh31vqMfzqK+lv9KATFBLsqPEfQ0E4RO5xf9aFujvieO2nz+Nv61/xNmKESoRbXcWM9g5mnIhG7x7Xtn3NDvtQtvcH3Xo0uquHIu9r1490thKsu/6RJygqX/Q0Mphcee043JoDspPq99rvLsfel18Ho6Dj5eWCFRVSGlJgMpXU/MzI7tDImZ6Ax6ec/Y3BjMP6euuvVmEDATtJB/+LnDz4Dp6fsygVNFRG+YgRLgsEFLR7CIJ00vOp3CcGM9dDqpKM6qWNUZUQLTEcfHMH4rFWzH72hwiGipFP9m3ehi20wXOtbWDBoOKRiABnaSLmaZNJImRwVJ7zQ06NWlzvkyUQKYecfguYZan39h/GynmL0XaqOderqP/devyZTkAeZCgkSZMCVE49TXLDOwp6yEJ4UcZcNXTT08GO9i9s5rhgRcWKVVQIrZnW41GsWliLU4cbL3inp7MLLz72DLatWJs6NZeVSlZeJjWg0gcbxlPnVQ2s5xW6rFO3weSQQQNc+ZjiSea6uuQz6MOz1kxRkWw7eRprHlqKI9v39AWZjuyNS5/CvtfeTIGMGC5YaZlUpEENiTSkB0wqgA4kMj1dOfk+3nL7KNcHDZWkbwjPn5TuoAXYyAqJlhZ0tXXwdd+ro9PRXKpSE/HH2ifReiIK5vcDFSMEBY9Cujr1fpOojBumZCqglLdXOWRQizIJfXOnQJU+bhBlOp2QZhVFm1JtbeyNX69G/Qt/oIyQpDxDkJWjhNaoZOkiqtKALM3Y+6VCkMxNRb2pwIYM6uecSKStQbWJFOXAXlCPYFhEIhBkaD7NHZuqX0lIkSalGvgdxVNkimW0Hr1Mb0LZBnsf6QmW4jRvkgmVDoCUf/Wu781cXKhgVUrQMRAlJcqLZdbP2BvLWreZ5md9u005gxk0jCGDWoXCVHTM5tKLTOigIL+/cOt+v/JMjv5D5MAxff2sjzzVpi1kFrhDN70qYLbFle2KtF9aPvJR0b+qlzNY/6JIab0PhGU846zfDZDWLk+VTUr1DvOLoWtUWW7CNBWV+xQo//Do/nSWCfE+hUJeskKeJ6fnelgou4KGdOzubvj+dSAdrkgHQbqqaEm3zBWpfin7W9n7LG0VnUFoGoOyiMm8OgB/SJrFIeEbMigvEMlZU7srGk6xJOcd2jkpOpUudg4Zz6G0Sn3KMb2vENiWIWyfqVzLB2qlGzCk7aeN+n1KWKayg35hBy3pGvpXAyUSSfrkSjosedVw9zgLpA4/2SSf7VhlZWUgGo0GkfJIFQqFVDwepwAv8Ty1o6PDa8PhMNrb2/uSgW4jkYiOdhWLxYDzc35mrOlrN/2nhgp6sWPyyUX/snJZLstl+T/LfwEy8tTQFLD+KwAAAABJRU5ErkJggg==) no-repeat;background-size:cover;opacity:.1;transform:scale(0);transition:opacity .125s ease-in,transform .175s ease-in;} .swg-h2-form .swg-newsletter .elementor-field-option input[type=checkbox]:checked + label::after{opacity:1;transform:scale(1);} .swg-h2-form .swg-newsletter .elementor-field-option input[type=checkbox]:focus + label::before{border-color:#747459;} .swg-h2-form .swg-newsletter input[type=email].elementor-field:focus{outline:2px solid #747459;} /* ===== button face: every pill on this page is Nunito 700 *italic* in the source, and the two kit downloads are #3A2829 rather than the orange used elsewhere. : h2 button face ===== */ .swg-h2-news .elementor-button,.swg-h2-kits .elementor-button,.swg-h2-form .elementor-button{font-style:italic;} .swg-h2-kits .elementor-button, .swg-h2-kits .elementor-button:hover,.swg-h2-kits .elementor-button:focus{background-color:#3A2829;} /* ===== news article + archive pages. The theme renders these through swg-core's templates; sections are transparent so the tiled page backdrop shows, exactly as on the source. : h2 news pages ===== */ body.single-swg_news .site-main,body.tax-swg_game .site-main{max-width:none;width:100%;margin:0;padding:0;} body.single-swg_news .site-main > *,body.tax-swg_game .site-main > *{max-width:none;} /* the article sits on a solid panel: the source hides the tiled page backdrop behind the copy and only lets it show again under the divider and the More news panel. The panel also carries the 25px overhang under the translucent header. */ .swg-news-page{margin-top:-25px;background-color:#1D59A5;} .swg-news-intro{padding:64px 0 0;} .swg-news-intro__heading{font-family:Oswald,"Open Sans",sans-serif;font-size:48px;line-height:52.8px;font-weight:700;letter-spacing:-1px;color:#fff;margin:0 0 27px;} .swg-news-intro__date{display:block;font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#fff;} /* body blocks sit 64px apart; text keeps the thin 640px column, media runs to 1200 */ .swg-news-article{padding:64px 0;} .swg-news-article > *{margin:0 auto 64px;box-sizing:border-box;} .swg-news-article > *:last-child{margin-bottom:0;} .swg-news-text{max-width:704px;padding:0 32px 16px;} /* the source puts 8px between list items */ .swg-news-text li{margin:0 0 8px;} .swg-news-video,.swg-news-grid{max-width:1264px;padding:0 32px;} .swg-news-text h2{font-family:Oswald,"Open Sans",sans-serif;font-size:36px;line-height:45px;font-weight:700;letter-spacing:-1px;color:#fff;margin:0 0 27px;} .swg-news-text h3,.swg-news-text h4{font-family:Oswald,"Open Sans",sans-serif;font-size:24px;line-height:30px;font-weight:700;letter-spacing:-1px;color:#fff;margin:0 0 27px;} .swg-news-text p{font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#fff;margin:0 0 27px;} .swg-news-text ul,.swg-news-text ol{font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#fff;margin:0 0 16px;padding-left:25px;} .swg-news-text > *:last-child{margin-bottom:0;} .swg-news-text a{color:#fff;text-decoration:underline;} .swg-news-text a:hover,.swg-news-text a:focus{color:#FFA501;} .swg-news-text img{max-width:100%;height:auto;} .swg-news-video iframe{display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;} .swg-news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;} /* each tile is a lightbox link carrying the hard 8px shadow over a blue backing; the image fades to .75 on hover, same as the landing gallery : news grid tiles ===== */ .swg-news-grid__link{display:flex;background-color:#1D59A5;box-shadow:8px 8px 0 rgba(0,0,0,.15);cursor:pointer;} .swg-news-grid__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:opacity .1s ease-in-out;} .swg-news-grid__link:hover .swg-news-grid__img,.swg-news-grid__link:focus .swg-news-grid__img{opacity:.75;} /* back pill, then the water divider bleeding 50px over the panel below */ .swg-news-back{padding:0 0 64px;} .swg-news-divider{height:125px;margin:-50px 0 0;background:url(https://steamworldgames.com/wp-content/uploads/2026/08/divider-water-lower-solid-light-to-dark.png) repeat-x 0 0;background-size:auto 100%;} .swg-news-more{padding:64px 0;background-color:rgba(8,29,50,.5);} .swg-news-more__title{font-family:Oswald,"Open Sans",sans-serif;font-size:36px;line-height:45px;font-weight:700;color:#fff;text-align:center;margin:0 0 32px;} .swg-news-more__feed{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:start;} .swg-news-more__cta{margin-top:48px;text-align:center;} /* the summary card: same block on the archive feed and under an article */ .swg-summary{display:block;text-decoration:none;transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);} .swg-summary:hover,.swg-summary:focus{transform:scale(1.08);} .swg-summary__image-container{display:block;margin:0 0 8px;background-color:#1D59A5;box-shadow:8px 8px 0 rgba(0,0,0,.15);} .swg-summary__image{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;} .swg-summary__heading{font-family:Oswald,"Open Sans",sans-serif;font-size:36px;line-height:45px;font-weight:700;letter-spacing:-1px;color:#fff;margin:0 0 8px;} .swg-summary__meta{display:block;font-family:Nunito,"Open Sans",sans-serif;font-size:18px;line-height:27px;color:#fff;} /* pills: orange by default, #3A2829 for back/pagination, all Nunito 700 italic */ .swg-pill{display:inline-flex;align-items:center;justify-content:center;background:var(--h2Accent);color:#fff;border:0;border-radius:90px;padding:14px 24px;font-family:Nunito,"Open Sans",sans-serif;font-size:20px;line-height:30px;font-weight:700;font-style:italic;text-decoration:none;transition:color .1s ease-in-out,transform .3s cubic-bezier(.68,-.55,.27,1.55);} .swg-pill:hover,.swg-pill:focus{color:#fff;transform:scale(1.08);} .swg-pill--dark{background:#3A2829;} /* archive */ .swg-newsarch{margin-top:-25px;padding:64px 0;background-color:#1D59A5;background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/h7b3dq1-theme-shard.png);background-repeat:no-repeat;background-position:calc(100% + 450px) -300px;} .swg-newsarch__heading{font-family:Oswald,"Open Sans",sans-serif;font-size:48px;line-height:60px;font-weight:700;letter-spacing:-1px;color:#fff;text-align:center;margin:0 0 75px;text-shadow:0 2px 10px #0C181C;} .swg-newsarch__feed{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:start;} /* the archive feed's rows run 16px deeper than the card, as on the source */ .swg-newsarch__feed .swg-summary{padding-bottom:16px;} .swg-pager{display:flex;align-items:center;} .swg-pager__next{margin-left:auto;} /* .swg-constrain is an Elementor container class (its padding lives on .e-con-inner), so the plain markup in the news templates needs its own constrain. : news constrain ===== */ .swg-news-intro > .swg-constrain,.swg-news-back > .swg-constrain,.swg-news-more > .swg-constrain,.swg-newsarch > .swg-constrain{max-width:1264px;margin:0 auto;padding:0 32px;box-sizing:border-box;} .swg-news-intro > .swg-constrain--thin,.swg-news-back > .swg-constrain--thin{max-width:704px;} /* the logo anchor sits on a line box; without this the header measures 148px instead of 140px wherever the template is printed directly : logo line box ===== */ .swg-logo--h2,.swg-logo--h2 > .elementor-widget-container{line-height:0;} /* the source tracks every Oswald heading at -1px; the "More news" label is the one exception (it is a plain div, not a heading) : news heading tracking ===== */ /* ===== mobile navigation: below the source's 80em breakpoint the game nav is replaced by a burger and an off-canvas panel sliding in from the right. : mobile menu ===== */ .swg-menu-toggle,.swg-menu{display:none;} @media(max-width:1279px){ .swg-menu-toggle{display:flex;align-items:center;position:relative;z-index:2;margin-left:16px;padding:0;border:0;background:none;cursor:pointer;color:#fff;font-family:Oswald,"Open Sans",sans-serif;font-size:16px;line-height:27px;font-weight:400;} .swg-menu-toggle:hover,.swg-menu-toggle:focus{background:none;border:0;color:#fff;} /* three 20x3 bars; margins collapse to the 4px gaps that make the box 25px tall */ .swg-menu-toggle__burger{display:block;width:20px;height:25px;margin-right:8px;} .swg-menu-toggle__burger > span,.swg-menu-toggle__burger::before,.swg-menu-toggle__burger::after{content:"";display:block;width:20px;height:3px;margin:4px 0;border-radius:3px;background:#fff;transition:transform .5s,opacity .5s;} /* open: the middle bar collapses and the outer two cross */ .swg-menu-toggle.is-open .swg-menu-toggle__burger > span{transform:scale(0);} .swg-menu-toggle.is-open .swg-menu-toggle__burger::before{transform:translateY(7px) rotate(135deg);} .swg-menu-toggle.is-open .swg-menu-toggle__burger::after{transform:translateY(-7px) rotate(225deg);} .swg-menu-toggle__msg--open{display:none;} .swg-menu-toggle.is-open .swg-menu-toggle__msg--closed{display:none;} .swg-menu-toggle.is-open .swg-menu-toggle__msg--open{display:block;} .swg-menu{display:flex;flex-direction:column;justify-content:flex-start;position:fixed;top:60px;left:0;right:0;bottom:0;z-index:1;padding:40px 0;background-color:#293761;background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/blueprint-bg-tile.jpg);background-repeat:repeat;transform:translateX(100%);transition:transform .3s ease-in-out;} .swg-menu.is-open{transform:translateX(0);} .swg-menu__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0;} .swg-menu__list li{margin:0 10px;padding:0;text-align:right;} .swg-menu__list a{display:block;padding:10px;text-align:center;text-decoration:none;color:#fff;font-family:Oswald,"Open Sans",sans-serif;font-size:24px;line-height:27px;font-weight:400;white-space:nowrap;} .swg-menu__list a:hover,.swg-menu__list a:focus{color:#FFA501;} .swg-menu__social{display:flex;justify-content:center;margin:40px 0 0;padding:0;list-style:none;} } /* ===== mobile header spacing: the source sets the logo, language picker and burger 10px and 16px apart and lets the group overflow the 32px gutter, ending 3px from the screen edge. : mobile header spacing ===== */ @media(max-width:1279px){ /* the logo overhang shrinks from 16px to 6px below the desktop breakpoint */ .swg-logo--h2{bottom:-6px;} .swg-header--h2 .swg-lang-w{flex:0 0 auto;margin-left:10px;} .swg-header--h2 .swg-lang{margin-right:0;flex-shrink:0;} .swg-header--h2 .swg-menu-toggle{flex:0 0 auto;} } /* ===== the per-game switcher type is scoped to the body class, so it outranked the generic mobile rule and stayed at 20px/700 below 768 where the source drops to 14px/400. : switcher type at mobile ===== */ @media(max-width:767px){ body.swg-game-steamworld-heist-2 .swg-switcher__home > a{font-size:14px;line-height:21px;font-weight:400;} body.swg-game-steamworld-heist-2 .swg-switcher__nav > button{font-size:14px;line-height:16.1px;font-weight:400;} } /* ===== news pages below 768 (measured from the source at 375): sections halve their padding to 32px, the type steps down, and every grid collapses to one column. : news pages mobile ===== */ @media(max-width:767px){ /* archive */ .swg-newsarch{padding:32px 0;} .swg-newsarch__heading{font-size:36px;line-height:45px;margin:0 0 43px;} .swg-newsarch__feed{grid-template-columns:repeat(2,1fr);} /* summary cards, on the archive and under an article */ .swg-summary__heading{font-size:24px;line-height:30px;} .swg-summary__meta{font-size:16px;} /* pills step down from 20/30 to 18/27 */ .swg-pill{font-size:18px;line-height:27px;} /* article */ .swg-news-intro{padding:32px 0 0;} .swg-news-intro__heading{font-size:36px;line-height:39.6px;} .swg-news-intro__date{font-size:16px;} .swg-news-article{padding:32px 0;} .swg-news-article > *{margin-bottom:32px;} .swg-news-article > *:last-child{margin-bottom:0;} /* the thin column and the wide one are both the full width less 32px gutters */ .swg-news-text,.swg-news-video,.swg-news-grid{max-width:none;} .swg-news-text h2{font-size:24px;line-height:30px;} .swg-news-text h3,.swg-news-text h4{font-size:20px;line-height:25px;} .swg-news-text p,.swg-news-text ul,.swg-news-text ol,.swg-news-text li{font-size:16px;} .swg-news-grid{grid-template-columns:repeat(2,1fr);} .swg-news-back{padding:0 0 32px;} .swg-news-more{padding:32px 0;} .swg-news-more__title{font-size:24px;line-height:30px;margin:0;} .swg-news-more__feed{grid-template-columns:repeat(2,1fr);} .swg-news-more__feed .swg-summary{padding-bottom:16px;} .swg-news-more__cta{margin-top:0;} } /* ===== the terms heading keeps its 27px tail below 768; at desktop the gap already comes out right without it. : terms heading gap at mobile ===== */ @media(max-width:767px){ .swg-terms-box h1{margin-bottom:27px;} } /* ===== the source's image grids step 4 -> 3 -> 2 -> 1 columns at 1024, 768 and 425. Ours dropped straight to a single column at 768, which is what made the gallery look so different on a phone held in landscape or on a larger handset. : image grid ladder ===== */ @media(max-width:1023px){.swg-news-grid{grid-template-columns:repeat(3,1fr);}} @media(max-width:767px){.swg-news-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:424px){ .swg-h2-gallery .elementor-image-gallery .gallery, .swg-news-grid{grid-template-columns:1fr;} } /* ===== the source halves its section padding from 1024 down, not from 768: 128 -> 64 (and the half-padded video and form sections 64 -> 32). Ours only halved below 768, so every tablet width carried double the vertical rhythm. : tablet padding rung ===== */ @media(max-width:1023px){ .swg-h2-video{padding:32px 0 64px;} .swg-h2-news,.swg-h2-gallery,.swg-h2-features,.swg-h2-characters,.swg-h2-kits{padding:64px 0;} .swg-h2-form{padding:64px 0 32px;} } /* ===== the hero's height resolves to a fraction of a pixel (840.979 at 375), so the boundary with the video section antialiases into a visible hairline that the source does not have (its hero lands on a whole pixel). Bleed the gradient's opaque top colour 1px upward to cover the seam - no layout change. : hero seam ===== */ .swg-h2-video{box-shadow:0 -1px 0 rgb(11,40,74);} /* ===== the card feeds (landing news, archive, and the panel under an article) stay two columns down to 425 like the source, and only go single-column below it. : card feeds ladder ===== */ @media(max-width:424px){ .swg-h2-news .elementor-posts-container, .swg-newsarch__feed, .swg-news-more__feed{grid-template-columns:1fr;} } /* ===== the source's mobile hero is spaced in viewport-height units, so a taller phone gets a taller hero and the cover art is drawn larger. Measured on the source at vh 800 / 932 / 1100: top spacer = 16px + 13vh (120 / 137.16 / 159), bottom block = 104px + 35vh (384 / 430.2 / 489). Our fixed 152px/339px were exactly those two evaluated at vh 800, which is why the page matched a 375x800 emulator but left the art scaled down and the logo 17px high on a 932-tall handset. The width half of the height is still carried by the content (the accolade scales with the body), so only the vertical padding needs to move. : hero tracks viewport height ===== */ @media(max-width:767px){ .swg-h2-hero{padding:calc(48px + 13vh) 0 calc(59px + 35vh);} } /* ===== the same viewport-height spacing runs above the mobile band. Source spacer is 48px + 13vh at every width >= 768 (152 at vh800, 191 at vh1100), and the block under the tagline is 136px + 35vh on tablet, 151px + 35vh from 1024 up - so the whole hero is 754px + 48vh (768-1023) and 769px + 48vh (>=1024). Our single fixed block was those evaluated at vh 900, which is why a 1440x900 laptop matched and nothing else did; the tablet band was also carrying the desktop's 15px taller bottom. : hero tracks viewport height above mobile ===== */ @media(min-width:768px){ .swg-h2-hero{padding-top:calc(80px + 13vh);} } @media(min-width:768px) and (max-width:1023px){ .swg-h2-hero{min-height:calc(754px + 48vh);} } @media(min-width:1024px){ .swg-h2-hero{min-height:calc(769px + 48vh);} } /* ===== the adventure band is the only other section the source spaces in vh: its two spacers are 18vh each (top 16px+18vh mobile / 48px+18vh from 768, bottom the same shape), so the whole band is 409px+36vh on mobile and 503px+36vh on desktop. Its art is a cover background like the hero's, so a short box shrinks the art the same way. Our fixed 192/176 (mobile) and 242/226 (>=768) are those evaluated at vh 800 and vh 900 respectively - the conversion below is exact at those two heights and now tracks every other one. : adventure band tracks viewport height ===== */ @media(max-width:767px){ .swg-h2-adventure{padding:calc(48px + 18vh) 0 calc(32px + 18vh);} } @media(min-width:768px){ .swg-h2-adventure{padding-top:calc(80px + 18vh);padding-bottom:calc(64px + 18vh);} } /* ===== the picker's dropdown links are --languagePickerLinkHeight, which the source sets to 4.8rem and drops to 4rem only at 80em - so the list is 48px per row below 1280 and 40px above, while the toggle button stays 40px at every width. : lang list rung ===== */ @media(max-width:1279px){ .swg-lang__link{height:48px;} } /* ===== the over-18 hint is drawn from a content: rule rather than a form field, so the translated pages need it per language; body.swg-lang-* comes from swg_current_lang(). : newsletter hint per language ===== */ body.swg-lang-de .swg-h2-form .swg-newsletter .elementor-field-type-email::after{content:"Du musst älter als 18 sein";} body.swg-lang-fr .swg-h2-form .swg-newsletter .elementor-field-type-email::after{content:"Vous devez avoir plus de 18 ans";} body.swg-lang-es .swg-h2-form .swg-newsletter .elementor-field-type-email::after{content:"Debes tener 18 años o más";} /* ===== SteamWorld Build skin. Build keeps the site's own look where Heist 2 replaced it: Permanent Marker over Lato, navy #293761, and square cream boxes carrying a hard 8px offset shadow instead of Heist 2's octagon clip and notched corner sprites. Every rule here is scoped to the game body class, so Heist 2 is untouched. : steamworld build skin ===== */ body.swg-game-steamworld-build{--h2Accent:#293761;--h2Box:#efefbb;--h2Deep:#26637E;--swgShadow:8px 8px 0 rgba(0,0,0,.15); background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/page-bg-2560w-scaled.jpg');background-size:100%;background-position:50% 50%;background-repeat:repeat;background-color:#141010;} body.swg-game-steamworld-build h1,body.swg-game-steamworld-build h2,body.swg-game-steamworld-build h3,body.swg-game-steamworld-build h4,body.swg-game-steamworld-build .elementor-heading-title,body.swg-game-steamworld-build .swg-newsarch__heading,body.swg-game-steamworld-build .swg-news-intro__heading,body.swg-game-steamworld-build .swg-summary__heading,body.swg-game-steamworld-build .swg-news-more__title,body.swg-game-steamworld-build .swg-ctas__heading{font-family:'Permanent Marker',cursive;font-weight:700;letter-spacing:-1px;} body.swg-game-steamworld-build,body.swg-game-steamworld-build p,body.swg-game-steamworld-build li,body.swg-game-steamworld-build a,body.swg-game-steamworld-build .swg-summary__meta,body.swg-game-steamworld-build input,body.swg-game-steamworld-build label{font-family:Lato,'Open Sans',sans-serif;} body.swg-game-steamworld-build .swg-h2-hero h1,body.swg-game-steamworld-build .swg-h2-hero .elementor-heading-title{font-size:48px;line-height:60px;color:#fff;} body.swg-game-steamworld-build .elementor-heading-title{font-size:36px;line-height:45px;} body.swg-game-steamworld-build p,body.swg-game-steamworld-build li{font-size:18px;line-height:27px;} body.swg-game-steamworld-build .swg-gamenav a{font-family:Lato,'Open Sans',sans-serif;font-size:18px;line-height:27px;font-weight:700;text-transform:uppercase;} body.swg-game-steamworld-build .swg-gamenav a:hover,body.swg-game-steamworld-build .swg-gamenav a:focus{color:#efefbb;} body.swg-game-steamworld-build .swg-h2-box::before{background:url('https://steamworldgames.com/wp-content/uploads/2026/08/paper-bg-tile.jpg') 0 0 repeat #efefbb;-webkit-clip-path:none;clip-path:none;box-shadow:8px 8px 0 rgba(0,0,0,.15);} body.swg-game-steamworld-build .swg-h2-box::after{display:none;} body.swg-game-steamworld-build .swg-pill,body.swg-game-steamworld-build .elementor-button{border-radius:0;background:#293761;color:#fff;font-family:Lato,'Open Sans',sans-serif;font-weight:400;font-size:18px;line-height:27px;padding:14px 24px;box-shadow:8px 8px 0 rgba(0,0,0,.15);} body.swg-game-steamworld-build .swg-pill:hover,body.swg-game-steamworld-build .elementor-button:hover{background:#26637E;color:#fff;} body.swg-game-steamworld-build .swg-summary__image-container,body.swg-game-steamworld-build .elementor-post__thumbnail{border:8px solid #efefbb;background-color:#141010;box-shadow:8px 8px 0 rgba(0,0,0,.15);} body.swg-game-steamworld-build .swg-summary__heading,body.swg-game-steamworld-build .elementor-post__title,body.swg-game-steamworld-build .elementor-post__title a{font-size:36px;line-height:45px;color:#000;} body.swg-game-steamworld-build .swg-summary__meta,body.swg-game-steamworld-build .elementor-post-date{font-size:18px;line-height:27px;color:#000;} body.swg-game-steamworld-build .swg-h2-video{background:url('https://steamworldgames.com/wp-content/uploads/2026/08/blueprint-bg-tile-1.jpg') 0 0 repeat #26637E;background-size:1355px;padding:128px 0;} body.swg-game-steamworld-build .swg-h2-news{background:url('https://steamworldgames.com/wp-content/uploads/2026/08/brushed-metal-tile.jpg') 0 0 repeat #DDD5C7;background-size:auto;padding:64px 0;} body.swg-game-steamworld-build .swg-h2-gallery{background:url('https://steamworldgames.com/wp-content/uploads/2026/08/blueprint-bg-tile-1.jpg') 0 0 repeat #26637E;background-size:1355px;padding:64px 0;} body.swg-game-steamworld-build .swg-h2-news .elementor-heading-title,body.swg-game-steamworld-build .swg-h2-gallery .elementor-heading-title{color:#000;} body.swg-game-steamworld-build .swg-h2-gallery .elementor-heading-title{color:#fff;} body.swg-game-steamworld-build footer .elementor-element-populated,body.swg-game-steamworld-build .elementor-location-footer{background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/footer-bg-2560w.webp');background-size:cover;background-repeat:no-repeat;background-position:50% 0;} body.swg-game-steamworld-build .swg-ctas{background:url('https://steamworldgames.com/wp-content/uploads/2026/08/fixed-cta-bg.png') no-repeat 50% 0;} body.swg-game-steamworld-build .swg-ctas__heading{font-size:24px;line-height:40px;} /* ===== Build's hero is spaced with 15vh blocks rather than Heist 2's 13/35vh pair: 48px + 15vh above the logo, 32px + 15vh + 16px below the tagline, and no floor at all (measured 889 at vh 900). Its news row carries three cards, not one. : build hero and news row ===== */ body.swg-game-steamworld-build .swg-h2-hero{min-height:0;padding:calc(80px + 15vh) 0 calc(91px + 15vh);} body.swg-game-steamworld-build .swg-h2-hero .swg-h2-hero-inner{max-width:640px;margin:0 auto;text-align:center;} body.swg-game-steamworld-build .swg-h2-hero img{width:640px;max-width:100%;height:auto;} body.swg-game-steamworld-build .swg-h2-hero .elementor-heading-title{font-size:48px;line-height:60px;color:#fff;margin:0;} body.swg-game-steamworld-build .swg-h2-hero .swg-h2-hero-inner > .e-con-inner{--row-gap:32px;row-gap:32px;} body.swg-game-steamworld-build .swg-h2-hero .elementor-widget-image{margin:0;} body.swg-game-steamworld-build .swg-h2-news .elementor-posts-container{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;} body.swg-game-steamworld-build .swg-h2-news .elementor-post{margin:0;} body.swg-game-steamworld-build .swg-h2-news .elementor-post__text{margin-top:8px;} body.swg-game-steamworld-build .swg-h2-news .elementor-post__title{font-size:36px;line-height:45px;} body.swg-game-steamworld-build .swg-h2-news .elementor-post__read-more{display:none;} /* ===== The Heist 2 rules above are written three classes deep (.swg-h2-news .elementor-widget-heading .elementor-heading-title and friends), so a two-class Build .elementor-kit-5 loses the tie. These are the same declarations again, forced, rather than restating every Heist 2 .elementor-kit-5 with a game prefix. : build overrides win ===== */ body.swg-game-steamworld-build h1,body.swg-game-steamworld-build h2,body.swg-game-steamworld-build h3,body.swg-game-steamworld-build h4,body.swg-game-steamworld-build .elementor-heading-title,body.swg-game-steamworld-build .elementor-post__title,body.swg-game-steamworld-build .elementor-post__title a, body.swg-game-steamworld-build .swg-summary__heading,body.swg-game-steamworld-build .swg-news-more__title,body.swg-game-steamworld-build .swg-newsarch__heading,body.swg-game-steamworld-build .swg-news-intro__heading,body.swg-game-steamworld-build .swg-ctas__heading{ font-family:'Permanent Marker',cursive !important;font-weight:700 !important;letter-spacing:-1px !important;} body.swg-game-steamworld-build p,body.swg-game-steamworld-build li,body.swg-game-steamworld-build .swg-summary__meta,body.swg-game-steamworld-build .elementor-post-date,body.swg-game-steamworld-build .swg-gamenav a,body.swg-game-steamworld-build .elementor-button,body.swg-game-steamworld-build .swg-pill,body.swg-game-steamworld-build input,body.swg-game-steamworld-build label{font-family:Lato,'Open Sans',sans-serif !important;} body.swg-game-steamworld-build .elementor-heading-title{font-size:36px !important;line-height:45px !important;color:#fff !important;} body.swg-game-steamworld-build .swg-h2-hero .elementor-heading-title{font-size:48px !important;line-height:60px !important;} body.swg-game-steamworld-build .swg-h2-news .elementor-heading-title,body.swg-game-steamworld-build .swg-h2-news .elementor-post__title,body.swg-game-steamworld-build .swg-h2-news .elementor-post__title a,body.swg-game-steamworld-build .swg-h2-news .elementor-post-date{color:#000 !important;} body.swg-game-steamworld-build .swg-h2-news .elementor-post__title,body.swg-game-steamworld-build .swg-h2-news .elementor-post__title a{font-size:36px !important;line-height:45px !important;} body.swg-game-steamworld-build .swg-h2-features .elementor-heading-title,body.swg-game-steamworld-build .swg-h2-characters .elementor-heading-title,body.swg-game-steamworld-build .swg-h2-kits .elementor-heading-title,body.swg-game-steamworld-build .swg-h2-form .elementor-heading-title{color:#000 !important;} body.swg-game-steamworld-build .swg-pill,body.swg-game-steamworld-build .elementor-button,body.swg-game-steamworld-build .elementor-button-link{border-radius:0 !important;background-color:#293761 !important;background-image:none !important;color:#fff !important;font-weight:400 !important;font-size:18px !important;line-height:27px !important;padding:14px 24px !important;box-shadow:8px 8px 0 rgba(0,0,0,.15) !important;} body.swg-game-steamworld-build .swg-pill:hover,body.swg-game-steamworld-build .elementor-button:hover{background-color:#26637E !important;} body.swg-game-steamworld-build .swg-car-btn{background:#293761 !important;} body.swg-game-steamworld-build .swg-car-btn:hover,body.swg-game-steamworld-build .swg-car-btn:focus{background:#fff !important;} body.swg-game-steamworld-build .swg-car-btn:hover .swg-car-btn__icon,body.swg-game-steamworld-build .swg-car-btn:focus .swg-car-btn__icon{fill:#293761 !important;} /* ===== Build's header is set in Permanent Marker at 20px and is NOT uppercased - my earlier reading of 'header nav a' had matched the language link, which is the one Lato item in there. Its social icons and language toggle sit on a 135deg hatch tile, and the hero art carries a 30% black wash (.section__media-overlay on the source). : build header and hero wash ===== */ body.swg-game-steamworld-build .swg-gamenav a{font-family:'Permanent Marker',cursive !important;font-size:20px !important;line-height:27px !important;font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important;} body.swg-game-steamworld-build .swg-switcher__home a,body.swg-game-steamworld-build .swg-switcher__home span{font-family:'Permanent Marker',cursive !important;font-size:20px !important;line-height:27px !important;font-weight:700 !important;text-transform:none !important;font-style:normal !important;letter-spacing:0 !important;} body.swg-game-steamworld-build .swg-switcher__nav button,body.swg-game-steamworld-build .swg-switcher__nav button span,body.swg-game-steamworld-build .swg-switcher__item a{font-family:'Permanent Marker',cursive !important;font-size:20px !important;line-height:23px !important;font-weight:400 !important;text-transform:none !important;font-style:normal !important;letter-spacing:0 !important;} body.swg-game-steamworld-build .swg-social__item,body.swg-game-steamworld-build .swg-lang__current{background-image:linear-gradient(135deg,rgba(29,82,108,.4) 41.67%,rgba(255,255,255,.4) 41.67%,rgba(255,255,255,.4) 50%,rgba(29,82,108,.4) 50%,rgba(29,82,108,.4) 91.67%,rgba(255,255,255,.4) 91.67%,rgba(255,255,255,.4) 100%) !important;background-size:8.49px 8.49px !important;} body.swg-game-steamworld-build .swg-social__item{margin-right:6px;} body.swg-game-steamworld-build .swg-social__link{width:40px;height:40px;} body.swg-game-steamworld-build .swg-h2-hero{position:relative;} body.swg-game-steamworld-build .swg-h2-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.3);z-index:0;pointer-events:none;} body.swg-game-steamworld-build .swg-h2-hero > *{position:relative;z-index:1;} /* ===== the hero logo is 640x296 on the source; our container's own padding was squeezing it to 576 and dropping the tagline 50px with it. : build hero logo size ===== */ body.swg-game-steamworld-build .swg-h2-hero .swg-h2-hero-inner{max-width:640px;} body.swg-game-steamworld-build .swg-h2-hero .swg-h2-hero-inner > .e-con-inner{padding-left:0;padding-right:0;max-width:640px;} body.swg-game-steamworld-build .swg-h2-hero .elementor-widget-image{width:100%;} body.swg-game-steamworld-build .swg-h2-hero img{width:min(640px,100%) !important;max-width:100% !important;height:auto !important;} /* ===== Build's blue bar is 93px, not Heist 2's 90, and its logo keeps its natural 181x93 rather than being pinned to the bar height. Heist 2 also pulls its hero 25px up so the key art tucks under the bar; Build's hero starts exactly at the bar's bottom edge (header 50 + 93 = hero top 143). : build header bar height ===== */ body.swg-game-steamworld-build .elementor-location-header .swg-header{height:93px !important;min-height:93px !important;} body.swg-game-steamworld-build .elementor-location-header .swg-header > .e-con-inner{height:93px !important;} body.swg-game-steamworld-build .elementor-location-header .elementor-widget-image,body.swg-game-steamworld-build .elementor-location-header .elementor-widget-image img{height:93px !important;width:auto !important;max-width:none !important;} body.swg-game-steamworld-build .swg-h2-hero{margin-top:0 !important;} /* ===== the header boxes all measured identical to the source, but it was painting differently: the source covers the bar with the art anchored to its bottom edge (50% 100%) and drops a hard 8px shadow under it, which reads as part of the bar. : build header paint ===== */ body.swg-game-steamworld-build .elementor-location-header .swg-header{background-size:cover !important;background-position:50% 100% !important;background-repeat:no-repeat !important;box-shadow:0 8px 0 0 rgba(0,0,0,.15) !important;} body.swg-game-steamworld-build .elementor-location-header{position:sticky;top:-50px;z-index:100;} /* ===== the trailer sits on the decorated blueprint: four sketch overlays pinned to the section's corners at their natural sizes, and the video framed in an 8px cream border over #141010 with the same hard 8px shadow the rest of the page uses. The section clips them. Source: 1200x682 box inside 128px bands, section 938 tall. : build trailer frame ===== */ body.swg-game-steamworld-build .swg-h2-video{overflow:hidden;position:relative;} body.swg-game-steamworld-build .swg-h2-video > .e-con-inner{position:static;row-gap:0;} body.swg-game-steamworld-build .swg-h2-video .elementor-widget-video{position:relative;z-index:1;} body.swg-game-steamworld-build .swg-h2-video .elementor-widget-video{width:1200px;max-width:100%;margin:0 auto;border:8px solid #efefbb;background:#141010;box-shadow:8px 8px 0 rgba(0,0,0,.15);} body.swg-game-steamworld-build .swg-h2-video .elementor-wrapper{aspect-ratio:16/9;display:block;} body.swg-game-steamworld-build .swg-h2-video .elementor-wrapper iframe{width:100%;height:100%;display:block;border:0;} /* ===== the four blueprint sketches are corner decorations on the section; painting them as extra background layers keeps them pinned to the section's own corners (an element inside Elementor's inner container anchors to that instead) and clipped by it. : build trailer decorations as layers ===== */ body.swg-game-steamworld-build .swg-h2-video{ background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/top-left.png'),url('https://steamworldgames.com/wp-content/uploads/2026/08/top-right.png'),url('https://steamworldgames.com/wp-content/uploads/2026/08/bottom-left.png'),url('https://steamworldgames.com/wp-content/uploads/2026/08/bottom-right.webp'),url('https://steamworldgames.com/wp-content/uploads/2026/08/blueprint-bg-tile-1.jpg') !important; background-position:left top,right top,left bottom,right bottom,0 0 !important; background-size:530px 358px,706px 717px,209px 500px,1650px 249px,1355px !important; background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat !important; background-color:#26637E !important;overflow:hidden;} /* ===== the source separates every section with a decorative strip tiled on x: a 53px wooden beam that bleeds 10px up and 5px down over its neighbours, a 40px construction tape, and one 220px ground strip under the gallery. All sit above their neighbours (z-index 2). : build section dividers ===== */ body.swg-game-steamworld-build .swg-div{width:100%;position:relative;z-index:2;background-repeat:repeat-x;background-position:0 0;padding:0;} body.swg-game-steamworld-build .swg-div--wood{height:53px;background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/divider-wood-tile.png');margin:-10px 0 -5px;} body.swg-game-steamworld-build .swg-div--construction{height:40px;background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/divider-construction-tile.png');} body.swg-game-steamworld-build .swg-div--ground{height:220px;background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/divider-ground-tile.png');} body.swg-game-steamworld-build .swg-div > .e-con-inner{display:none;} /* ===== Heist 2 fakes its dividers with section margins (19px for the beam, 75px for the water strips). Build has real divider strips, and its sections sit flush at margin 0. : build sections carry no divider margins ===== */ body.swg-game-steamworld-build .swg-h2-hero,body.swg-game-steamworld-build .swg-h2-video,body.swg-game-steamworld-build .swg-h2-news,body.swg-game-steamworld-build .swg-h2-adventure,body.swg-game-steamworld-build .swg-h2-gallery, body.swg-game-steamworld-build .swg-h2-features,body.swg-game-steamworld-build .swg-h2-band,body.swg-game-steamworld-build .swg-h2-characters,body.swg-game-steamworld-build .swg-h2-kits,body.swg-game-steamworld-build .swg-h2-form{margin-top:0 !important;margin-bottom:0 !important;} /* ===== Heist 2 paints its beams and water strips as ::before on each section, so those were bleeding onto Build - which carries its own wood/construction/ground strips as real elements. Suppressed here for every section except the hero, whose ::before is Build's own 30% art wash. : build drops heist 2 divider pseudos ===== */ body.swg-game-steamworld-build .swg-h2-video::before,body.swg-game-steamworld-build .swg-h2-news::before,body.swg-game-steamworld-build .swg-h2-adventure::before, body.swg-game-steamworld-build .swg-h2-gallery::before,body.swg-game-steamworld-build .swg-h2-features::before,body.swg-game-steamworld-build .swg-h2-band::before, body.swg-game-steamworld-build .swg-h2-characters::before,body.swg-game-steamworld-build .swg-h2-kits::before,body.swg-game-steamworld-build .swg-h2-form::before, body.swg-game-steamworld-build .swg-h2-video::after,body.swg-game-steamworld-build .swg-h2-news::after,body.swg-game-steamworld-build .swg-h2-adventure::after, body.swg-game-steamworld-build .swg-h2-gallery::after,body.swg-game-steamworld-build .swg-h2-features::after,body.swg-game-steamworld-build .swg-h2-band::after, body.swg-game-steamworld-build .swg-h2-characters::after,body.swg-game-steamworld-build .swg-h2-kits::after,body.swg-game-steamworld-build .swg-h2-form::after{content:none !important;background-image:none !important;} /* ===== the full-width strips are their art's 16:9 aspect plus a constant 16px (measured 817.4 at 1425 wide and 1087.4 at 1905, both exactly 16 over the pure aspect), with the art covering the result. A percentage-padding box reproduces that at any width. : build strip height ===== */ body.swg-game-steamworld-build .swg-h2-band .elementor-widget-image{position:relative;width:100%;height:0;padding-bottom:calc(56.25% + 16px);overflow:hidden;} body.swg-game-steamworld-build .swg-h2-band .elementor-widget-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} /* ===== Build's adventure band is a plain 64px band, not Heist 2's vh-driven one: a 16px spacer, the 379x241 character cut-out, then the copy box, closing at 64. Source layout tops: 64 / 80 / 321, section 798. : build adventure band ===== */ body.swg-game-steamworld-build .swg-h2-adventure{padding:80px 0 64px !important;} body.swg-game-steamworld-build .swg-h2-adventure > .e-con-inner{row-gap:0;} body.swg-game-steamworld-build .swg-h2-adventure .elementor-widget-image img{width:379px !important;max-width:100% !important;height:auto !important;display:block;margin:0 auto;} /* ===== Build's cards are cream paper panels with the hard 8px shadow, not Heist 2's octagon boxes: character cards 332x545 with a 300x300 portrait and a 24/30 name (my global 36px heading rule was forcing three lines and 60px of extra card). The footer is a 640px band - 360 above the row, 172 below - over its own art. : build cards and footer ===== */ body.swg-game-steamworld-build .swg-char-card{background:url('https://steamworldgames.com/wp-content/uploads/2026/08/paper-bg-tile.jpg') 0 0 repeat #efefbb !important;box-shadow:8px 8px 0 rgba(0,0,0,.15) !important;color:#000;} body.swg-game-steamworld-build .swg-char-card h1,body.swg-game-steamworld-build .swg-char-card h2,body.swg-game-steamworld-build .swg-char-card h3,body.swg-game-steamworld-build .swg-char-card h4,body.swg-game-steamworld-build .swg-char-card h5, body.swg-game-steamworld-build .swg-char-card .elementor-heading-title{font-size:24px !important;line-height:30px !important;color:#000 !important;margin:0 0 16px !important;} body.swg-game-steamworld-build .swg-char-card p{font-size:18px !important;line-height:27px !important;color:#000 !important;} body.swg-game-steamworld-build .swg-char-card img{width:300px;height:300px;object-fit:cover;display:block;} body.swg-game-steamworld-build .swg-kit-box,body.swg-game-steamworld-build .swg-h2-box{color:#000;} body.swg-game-steamworld-build .elementor-location-footer{padding:25vw 0 172px !important;background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/footer-bg-2560w.webp') !important;background-size:cover !important;background-position:50% 0 !important;background-repeat:no-repeat !important;} @media(max-width:1279px){body.swg-game-steamworld-build .elementor-location-footer{padding-top:30vw !important;}} @media(max-width:1023px){body.swg-game-steamworld-build .elementor-location-footer{padding-top:300px !important;background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/footer-bg-768w.png') !important;}} @media(max-width:767px){body.swg-game-steamworld-build .elementor-location-footer{padding-top:200px !important;}} body.swg-game-steamworld-build .elementor-location-footer p,body.swg-game-steamworld-build .elementor-location-footer a{font-size:14px !important;line-height:27px !important;} /* ===== the footer row itself is right (108 tall, copy left, brands right); Heist 2's wrapper was adding 92px above and below, and The Station mark is 124 wide against Thunderful's 138. : build footer row ===== */ body.swg-game-steamworld-build .elementor-location-footer .e-con.e-parent{padding-top:0 !important;padding-bottom:0 !important;} body.swg-game-steamworld-build .swg-brand--station img{width:124px !important;height:100px !important;} /* ===== Build's panels are plain cream paper: the fill and the hard shadow sit on the element itself, ::before draws the source's 2px black rule inset 8px, and Heist 2's orange bevel gradient and notched corner sprites are switched off. Box padding is 32, not Heist 2's 40, and everything inside a panel is black. : build paper panels ===== */ body.swg-game-steamworld-build .swg-char-card::before,body.swg-game-steamworld-build .swg-char-card::after{content:none !important;background:none !important;} body.swg-game-steamworld-build .swg-h2-box{position:relative;padding:32px !important;background:url('https://steamworldgames.com/wp-content/uploads/2026/08/paper-bg-tile.jpg') 0 0 repeat #efefbb !important;box-shadow:8px 8px 0 rgba(0,0,0,.15) !important;color:#000 !important;} body.swg-game-steamworld-build .swg-h2-box::before{content:"" !important;position:absolute;inset:8px; /* Heist 2's own ::before sets width/height:100%, which with an 8px inset pushed the rule 8px past the panel's right and bottom edges - size it from the insets instead */ width:auto !important;height:auto !important;right:8px !important;bottom:8px !important; border:2px solid #000;background:none !important;box-shadow:none !important;z-index:1;pointer-events:none;} body.swg-game-steamworld-build .swg-h2-box::after{content:none !important;background:none !important;} body.swg-game-steamworld-build .swg-h2-box > *{position:relative;z-index:2;} body.swg-game-steamworld-build .swg-h2-box h1,body.swg-game-steamworld-build .swg-h2-box h2,body.swg-game-steamworld-build .swg-h2-box h3,body.swg-game-steamworld-build .swg-h2-box .elementor-heading-title, body.swg-game-steamworld-build .swg-h2-box p,body.swg-game-steamworld-build .swg-h2-box li,body.swg-game-steamworld-build .swg-char-card .elementor-heading-title,body.swg-game-steamworld-build .swg-char-card p{color:#000 !important;} /* ===== Section headings are not uniformly black: the ones over art or blueprint are white (hero, gallery, characters), the ones on a light ground or inside a paper panel are black (news, adventure, features, kits). My earlier blanket rule had painted the characters heading black. Links inside panels are black + underline - Hello Elementor was colouring them #cc3366. The newsletter fields are olive #d0d0a2 with a 2px #999976 rule and a Permanent Marker label. : build heading colours links and form ===== */ body.swg-game-steamworld-build .swg-h2-characters > .e-con-inner > .elementor-widget-heading .elementor-heading-title, body.swg-game-steamworld-build .swg-h2-characters .elementor-heading-title{color:#fff !important;} body.swg-game-steamworld-build .swg-h2-characters .swg-char-card .elementor-heading-title{color:#000 !important;} body.swg-game-steamworld-build .swg-h2-gallery .elementor-heading-title{color:#fff !important;} body.swg-game-steamworld-build .swg-h2-box a,body.swg-game-steamworld-build .swg-h2-box a:visited{color:#000 !important;text-decoration:underline !important;font-weight:400 !important;} body.swg-game-steamworld-build .swg-h2-box a:hover,body.swg-game-steamworld-build .swg-h2-box a:focus{color:#000 !important;} body.swg-game-steamworld-build .swg-h2-box .elementor-button,body.swg-game-steamworld-build .swg-h2-box .swg-pill{color:#fff !important;text-decoration:none !important;} body.swg-game-steamworld-build .swg-h2-form input[type=email],body.swg-game-steamworld-build .swg-h2-form input[type=text],body.swg-game-steamworld-build .swg-h2-form .elementor-field-textual{ background-color:#d0d0a2 !important;color:#000 !important;border:2px solid #999976 !important;border-radius:0 !important; padding:12px 16px !important;font-family:Lato,'Open Sans',sans-serif !important;font-size:18px !important;height:49px !important;box-shadow:none !important;} body.swg-game-steamworld-build .swg-h2-form label,body.swg-game-steamworld-build .swg-h2-form .elementor-field-label{font-family:'Permanent Marker',cursive !important;font-size:24px !important;line-height:30px !important;color:#000 !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-type-acceptance label,body.swg-game-steamworld-build .swg-h2-form .elementor-field-option label{font-family:Lato,'Open Sans',sans-serif !important;font-size:18px !important;line-height:27px !important;color:#000 !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-type-email::after{font-family:Lato,'Open Sans',sans-serif !important;font-size:14px !important;color:#000 !important;} /* ===== the store bar's plate is square on Build - the 35px rounded top is Heist 2's - and its store tiles are 50% black squares with white glyphs, going to 80% black with #efefbb glyphs on hover. Heist 2 uses its brown #86370D instead. : build store bar tiles ===== */ body.swg-game-steamworld-build .swg-ctas{border-radius:0 !important;} body.swg-game-steamworld-build .swg-ctas__item{background:rgba(0,0,0,.5) !important;border-radius:0 !important;box-shadow:4px 4px 0 rgba(0,0,0,.15) !important;transition:background .1s ease-in-out;} body.swg-game-steamworld-build .swg-ctas__item svg{fill:#fff !important;transition:fill .1s ease-in-out;} body.swg-game-steamworld-build .swg-ctas__item:hover,body.swg-game-steamworld-build .swg-ctas__item:focus{background:rgba(0,0,0,.8) !important;} body.swg-game-steamworld-build .swg-ctas__item:hover svg,body.swg-game-steamworld-build .swg-ctas__item:focus svg{fill:#efefbb !important;} /* ===== Build's button hover is not a colour swap: a dashed white outline fades in over .3s and marches around the button on an 8s loop (24x3 dashes across, 3x24 down), the navy fill lightens #293761 -> #516293 and the button scales 1.08. Each .elementor-kit-5 below is written out in full - appending :hover to a comma-joined list only binds it to the last .elementor-kit-5, which had left the buttons resting on the hover colour. : build button hover and checkbox ===== */ @keyframes swgBuildDashes{0%{background-position:100% 0%,0% 100%,0% 0%,100% 100%;}} body.swg-game-steamworld-build .swg-pill,body.swg-game-steamworld-build .elementor-button,body.swg-game-steamworld-build .elementor-button-link{position:relative;z-index:0;background-color:#293761 !important;transition:transform .3s ease-in-out,background-color .3s ease-in-out;} body.swg-game-steamworld-build .swg-pill::before,body.swg-game-steamworld-build .elementor-button::before,body.swg-game-steamworld-build .elementor-button-link::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;opacity:0; transition:opacity .3s ease-in-out; background:linear-gradient(90deg,#fff 50%,transparent 50%),linear-gradient(90deg,#fff 50%,transparent 50%),linear-gradient(0deg,#fff 50%,transparent 50%),linear-gradient(0deg,#fff 50%,transparent 50%); background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;background-size:24px 3px,24px 3px,3px 24px,3px 24px; background-position:0% 0%,100% 100%,0% 100%,100% 0;animation:swgBuildDashes 8s linear infinite;} body.swg-game-steamworld-build .swg-pill:hover::before,body.swg-game-steamworld-build .elementor-button:hover::before,body.swg-game-steamworld-build .elementor-button-link:hover::before,body.swg-game-steamworld-build .swg-pill:focus::before,body.swg-game-steamworld-build .elementor-button:focus::before,body.swg-game-steamworld-build .elementor-button-link:focus::before{opacity:1;} body.swg-game-steamworld-build .swg-pill:hover,body.swg-game-steamworld-build .elementor-button:hover,body.swg-game-steamworld-build .elementor-button-link:hover,body.swg-game-steamworld-build .swg-pill:focus,body.swg-game-steamworld-build .elementor-button:focus,body.swg-game-steamworld-build .elementor-button-link:focus{background-color:#516293 !important;color:#fff !important;transform:scale(1.08);} /* ===== Three leftovers from Heist 2: 1. its consent checkbox is drawn on the LABEL - the real input is opacity:0 and absolutely positioned, label::before is a 32px orange-bordered box and ::after a 48px sprite. Build just uses the native checkbox, so the input comes back and both pseudos go. 2. the panel link rule was repainting button labels black on hover; buttons keep #fff. 3. gallery thumbnails carry the same 8px cream frame over #141010 as the news cards. : build checkbox gallery frame ===== */ body.swg-game-steamworld-build .swg-h2-box a.elementor-button:hover,body.swg-game-steamworld-build .swg-h2-box a.elementor-button:focus, body.swg-game-steamworld-build .swg-h2-box .elementor-button:hover,body.swg-game-steamworld-build .swg-h2-box .elementor-button:focus, body.swg-game-steamworld-build .swg-h2-box .swg-pill:hover,body.swg-game-steamworld-build .swg-h2-box .swg-pill:focus{color:#fff !important;text-decoration:none !important;} body.swg-game-steamworld-build .swg-h2-gallery .gallery-item .gallery-icon{border:8px solid #efefbb !important;background-color:#141010 !important;box-shadow:8px 8px 0 rgba(0,0,0,.15) !important;box-sizing:border-box;display:block;line-height:0;} body.swg-game-steamworld-build .swg-h2-gallery .gallery-item img,body.swg-game-steamworld-build .swg-h2-gallery .elementor-image-gallery img,body.swg-game-steamworld-build .swg-h2-gallery .gallery-icon img{border:0 !important;box-shadow:none !important;background-color:transparent !important;box-sizing:border-box;display:block;} /* ===== the consent control is custom on both sites - the input is hidden and the box is drawn on the label. Build's is a 32px olive square (#d0d0a2 with a 2px #999976 rule, the same pair as the email field) with a 16px black square as the tick; Heist 2's is white with an orange border and a sprite. Text clears 40px. : build consent boxes ===== */ body.swg-game-steamworld-build .swg-h2-form .elementor-field-option input[type=checkbox]{position:absolute !important;left:0 !important;top:0 !important;opacity:0 !important;width:32px !important;height:32px !important;margin:0 !important;cursor:pointer;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-option{display:block !important;position:relative;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-option label{position:relative;display:inline-block;padding-left:40px !important;min-height:32px;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-option label::before{content:"" !important;position:absolute;left:0;top:0;width:32px !important;height:32px !important; background:#d0d0a2 !important;background-image:none !important;border:2px solid #999976 !important;border-radius:0 !important;box-sizing:border-box;box-shadow:none !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-option label::after{content:"" !important;position:absolute;left:8px;top:8px;width:16px !important;height:16px !important; background:#000 !important;background-image:none !important;border:0 !important;opacity:0;transition:opacity .1s ease-in-out;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-option input[type=checkbox]:checked + label::after{opacity:1;} /* ===== : build news pages ===== */ body.swg-game-steamworld-build .swg-news-page{margin-top:0 !important;padding:64px 0 !important;background-color:#26637E !important;background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/blueprint-bg-tile-1.jpg) !important;background-size:1355px !important;background-repeat:repeat !important;} body.swg-game-steamworld-build .swg-news-intro{padding:0 !important;} body.swg-game-steamworld-build .swg-news-intro__heading{font-size:48px !important;line-height:52.8px !important;letter-spacing:-1px !important;color:#fff !important;margin:0 0 27px !important;} body.swg-game-steamworld-build .swg-news-intro__date{font-family:Lato,'Open Sans',sans-serif !important;font-size:18px !important;line-height:27px !important;color:#fff !important;} body.swg-game-steamworld-build .swg-news-article{padding:0 !important;} body.swg-game-steamworld-build .swg-news-article > *{margin-top:64px !important;margin-bottom:64px !important;} body.swg-game-steamworld-build .swg-news-blk--npt{margin-top:0 !important;} body.swg-game-steamworld-build .swg-news-blk--npb{margin-bottom:0 !important;} body.swg-game-steamworld-build .swg-news-text{max-width:1264px !important;} body.swg-game-steamworld-build .swg-news-video{padding:0 40px 16px !important;} body.swg-game-steamworld-build .swg-news-image{max-width:1264px;padding:0 32px;box-sizing:border-box;} body.swg-game-steamworld-build .swg-news-text.swg-news-blk--thin,body.swg-game-steamworld-build .swg-news-video.swg-news-blk--thin,body.swg-game-steamworld-build .swg-news-grid.swg-news-blk--thin,body.swg-game-steamworld-build .swg-news-image.swg-news-blk--thin{max-width:704px !important;} body.swg-game-steamworld-build .swg-news-image__img{display:block;width:100%;height:auto;box-sizing:border-box;border:8px solid #efefbb;background-color:#141010;box-shadow:8px 8px 0 rgba(0,0,0,.15);} body.swg-game-steamworld-build .swg-news-text h1{font-size:48px !important;line-height:60px !important;letter-spacing:-1px !important;color:#fff !important;margin:0 0 27px !important;} body.swg-game-steamworld-build .swg-news-text h2{font-size:36px !important;line-height:45px !important;color:#fff !important;margin:0 0 27px !important;} body.swg-game-steamworld-build .swg-news-text h3,body.swg-game-steamworld-build .swg-news-text h4{font-size:24px !important;line-height:30px !important;color:#fff !important;margin:0 0 27px !important;} body.swg-game-steamworld-build .swg-news-text p{color:#fff !important;margin:0 0 27px !important;} body.swg-game-steamworld-build .swg-news-text > p:last-child{margin-bottom:0 !important;} body.swg-game-steamworld-build .swg-news-text li{color:#fff !important;} body.swg-game-steamworld-build .swg-news-text a{color:#fff !important;} body.swg-game-steamworld-build .swg-news-text a:hover,body.swg-game-steamworld-build .swg-news-text a:focus{color:#fff !important;} body.swg-game-steamworld-build .swg-news-grid__link{background-color:#141010 !important;border:8px solid #efefbb !important;box-shadow:8px 8px 0 rgba(0,0,0,.15) !important;} body.swg-game-steamworld-build .swg-news-divider{height:40px !important;margin:0 !important;background:url(https://steamworldgames.com/wp-content/uploads/2026/08/divider-construction-tile.png) repeat-x 0 0 !important;background-size:auto !important;} body.swg-game-steamworld-build .swg-news-more{padding:64px 0 !important;background-color:#DDD5C7 !important;background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/brushed-metal-tile.jpg) !important;background-repeat:repeat !important;} body.swg-game-steamworld-build .swg-news-more__title{font-size:36px !important;line-height:45px !important;color:#000 !important;margin:0 0 32px !important;} /* ===== : build news archive ===== */ body.swg-game-steamworld-build .swg-newsarch{margin-top:0 !important;padding:64px 0 !important;background-color:#DDD5C7 !important;background-image:url(https://steamworldgames.com/wp-content/uploads/2026/08/brushed-metal-tile.jpg) !important;background-repeat:repeat !important;background-size:auto !important;background-position:0 0 !important;} body.swg-game-steamworld-build .swg-newsarch__heading{font-size:48px !important;line-height:60px !important;letter-spacing:-1px !important;color:#000 !important;text-shadow:none !important;margin:0 0 75px !important;} /* ===== : build page backdrop ===== */ body.swg-game-steamworld-build{background-color:#141010 !important;background-size:100% !important;background-repeat:repeat-y !important;background-position:0 0 !important;} /* ===== : build footer gap ===== */ body.swg-game-steamworld-build .elementor-location-footer{margin-top:64px !important;} /* ===== : build news carousel ===== */ body.swg-game-steamworld-build .swg-news-article > .swg-car--news{max-width:1264px !important;margin-left:auto;margin-right:auto;padding:0 96px !important;box-sizing:border-box;} body.swg-game-steamworld-build .swg-car--news .swg-car__view{overflow:hidden;} body.swg-game-steamworld-build .swg-car--news .swg-news-grid{display:flex !important;grid-template-columns:none !important;gap:0 !important;column-gap:32px !important;width:calc(100% + 32px) !important;max-width:none !important;padding:0 !important;} body.swg-game-steamworld-build .swg-car--news .swg-news-grid__link{flex:0 0 calc(33% - 32px) !important;} body.swg-game-steamworld-build .swg-car--news.swg-car--ready .swg-news-grid__link{transform:scale(0);opacity:0;} body.swg-game-steamworld-build .swg-car--news.swg-car--ready .swg-news-grid__link.is-visible{transform:scale(1);opacity:1;} body.swg-game-steamworld-build .swg-car--news.swg-car--animated .swg-news-grid{transition:transform .3s ease-in-out;} body.swg-game-steamworld-build .swg-car--news.swg-car--animated .swg-news-grid__link{transition:transform .3s ease-in-out,opacity .3s ease-in-out;} @media(max-width:1023px){body.swg-game-steamworld-build .swg-news-article > .swg-car--news{padding:0 96px !important;}} @media(max-width:767px){body.swg-game-steamworld-build .swg-news-article > .swg-car--news{padding:0 64px !important;}body.swg-game-steamworld-build .swg-car--news .swg-news-grid__link{flex:0 0 calc(50% - 32px) !important;}} body.swg-game-steamworld-build .swg-news-back{padding:0 !important;} /* ===== : build news feed alignment ===== */ body.swg-game-steamworld-build .swg-news-feed .elementor-post,body.swg-game-steamworld-build .swg-news-feed .elementor-post__text,body.swg-game-steamworld-build .swg-news-feed .elementor-post__title,body.swg-game-steamworld-build .swg-news-feed .elementor-post__title a,body.swg-game-steamworld-build .swg-news-feed .elementor-post__meta-data,body.swg-game-steamworld-build .swg-news-feed .elementor-post-date{text-align:left !important;} /* ===== the source's gallery heading block is 88px: a 45px line, 27px of margin and the 16px the text block carries. Ours inherited Heist 2's 75px margin. : build gallery heading ===== */ body.swg-game-steamworld-build .swg-h2-gallery > .swg-constrain > .e-con-inner > .elementor-widget-heading .elementor-heading-title,body.swg-game-steamworld-build .swg-h2-gallery .elementor-widget-heading .elementor-heading-title{margin:0 0 43px !important;} /* ===== the hover bar takes the game's hover colour, not Heist 2's orange, and the current page's item goes bold and drops its bar entirely (source: .primary-navigation__list-item-actual--active{font-weight:bold} + ::before{content:none}) : nav underline and active ===== */ body.swg-game-steamworld-build .swg-header .swg-gamenav > ul > li > a:hover::before,body.swg-game-steamworld-build .swg-header .swg-gamenav > ul > li > a:focus::before{background-color:#efefbb !important;} .swg-header .swg-gamenav > ul > li > a.swg-gamenav__link--active{font-weight:700 !important;} .swg-header .swg-gamenav > ul > li > a.swg-gamenav__link--active::before{content:none !important;} /* ===== three text runs still wearing Heist 2's metrics: the CTA bar's addendum was Nunito where Build uses Lato, and the form's label and submit keep the browser's normal line-height on the source (35px label, 49px button) rather than a set one. : build stray fonts ===== */ body.swg-game-steamworld-build .swg-ctas__addendum{font-family:Lato,'Open Sans',sans-serif !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-label{line-height:normal !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-button,body.swg-game-steamworld-build .swg-h2-form button[type=submit]{line-height:normal !important;} /* ===== the article carousel's controls sit on the block's edge, not the frame's: our frame carries the block's own 32px gutter as well as the 64px control gutter, so the buttons come in by that 32px. And Build's article pages carry no language picker at all on the source - its landing page and news index still do. The picker was hidden here too, which was wrong: the source shows it on an article at 1440 and at 430 alike, and it is the only way to reach the article in another language. : build article carousel controls ===== */ body.swg-game-steamworld-build .swg-car--news .swg-car-btn--next{right:32px;} body.swg-game-steamworld-build .swg-car--news .swg-car-btn--prev{left:32px;} /* ===== Build was tuned at 1440 and kept its desktop chrome all the way down. The source steps the bar to 62px with a 120x62 logo from 1279 down, drops the switcher type to 14px and the hero tagline to 36/45 at 767, spaces the hero by 15vh a side, and swaps the CTA bar to a mobile plate stretched to its box. : build mobile chrome ===== */ @media(max-width:1279px){ body.swg-game-steamworld-build .elementor-location-header .swg-header{height:62px !important;min-height:62px !important;} body.swg-game-steamworld-build .elementor-location-header .swg-header > .e-con-inner{height:62px !important;} body.swg-game-steamworld-build .elementor-location-header .elementor-widget-image,body.swg-game-steamworld-build .elementor-location-header .elementor-widget-image img{height:62px !important;} } @media(max-width:767px){ body.swg-game-steamworld-build .swg-switcher a,body.swg-game-steamworld-build .swg-switcher button,body.swg-game-steamworld-build .swg-switcher a span,body.swg-game-steamworld-build .swg-switcher button span{font-size:14px !important;} body.swg-game-steamworld-build .swg-h2-hero{padding:calc(48px + 15vh) 0 !important;} body.swg-game-steamworld-build .swg-h2-hero .elementor-heading-title{font-size:36px !important;line-height:45px !important;} body.swg-game-steamworld-build .swg-h2-hero > .swg-h2-hero-inner > .e-con-inner,body.swg-game-steamworld-build .swg-h2-hero .e-con-inner{row-gap:0 !important;} body.swg-game-steamworld-build .swg-h2-hero .elementor-widget-heading{margin-bottom:43px !important;} body.swg-game-steamworld-build .swg-ctas{background-image:url('https://steamworldgames.com/wp-content/uploads/2026/08/fixed-cta-bg-mobile.png') !important;background-size:100% 100% !important;background-repeat:no-repeat !important;} body.swg-game-steamworld-build .swg-ctas__heading{font-size:20px !important;line-height:20px !important;margin:0 0 16px !important;} } /* ===== the bar is 62 but its constrain kept the shared 80px minimum, so the picker and the toggle centred in 80 and sat ~9px low. The source centres both in the bar and hangs the logo 6px from its top, and its toggle label is Lato, not Oswald - which is also why ours measured 11px narrow. : build mobile header parts ===== */ @media(max-width:1279px){ body.swg-game-steamworld-build .elementor-location-header .swg-header .swg-constrain,body.swg-game-steamworld-build .elementor-location-header .swg-header .swg-constrain > .e-con-inner,body.swg-game-steamworld-build .elementor-location-header .swg-header > .e-con-inner{height:62px !important;min-height:62px !important;} body.swg-game-steamworld-build .elementor-location-header .swg-logo{align-self:flex-start !important;margin-top:0 !important;} body.swg-game-steamworld-build .swg-menu-toggle,body.swg-game-steamworld-build .swg-menu-toggle__msg{font-family:'Permanent Marker',cursive !important;font-size:16px !important;line-height:27px !important;font-weight:400 !important;} body.swg-game-steamworld-build .swg-menu-toggle__burger > span,body.swg-game-steamworld-build .swg-menu-toggle__burger::before,body.swg-game-steamworld-build .swg-menu-toggle__burger::after{background:url('https://steamworldgames.com/wp-content/uploads/2026/08/dash.svg') 0 0 no-repeat !important;border-radius:0 !important;margin:4px 0 !important;} } /* ===== the shared mobile rule reverses the features row because Heist 2 authors the panel first; Build authors the art first, so reversing put the panel on top. And the news feed keeps its three desktop columns all the way down, where the source runs three from 768, two from 425 and one below that. : build mobile news and features ===== */ @media(max-width:767px){ body.swg-game-steamworld-build .swg-h2-features > .swg-constrain > .e-con-inner{--flex-direction:column !important;flex-direction:column !important;} body.swg-game-steamworld-build .swg-news-feed .elementor-posts{grid-template-columns:repeat(2,1fr) !important;--grid-columns:2 !important;} } @media(max-width:424px){ body.swg-game-steamworld-build .swg-news-feed .elementor-posts{grid-template-columns:1fr !important;--grid-columns:1 !important;} } /* ===== Build kept its desktop type all the way down. The source's mobile scale: section and card headings 24/30, character cards 20/25, body, links, dates and buttons 16, the form label 20. The hero tagline stays 36/45 and keeps its own rule. : build mobile type scale ===== */ @media(max-width:767px){ body.swg-game-steamworld-build .elementor-heading-title{font-size:24px !important;line-height:30px !important;} body.swg-game-steamworld-build .swg-summary__heading,body.swg-game-steamworld-build .elementor-post__title,body.swg-game-steamworld-build .elementor-post__title a,body.swg-game-steamworld-build .swg-h2-news .elementor-post__title,body.swg-game-steamworld-build .swg-h2-news .elementor-post__title a{font-size:24px !important;line-height:30px !important;} body.swg-game-steamworld-build .swg-char-card .elementor-heading-title{font-size:20px !important;line-height:25px !important;} body.swg-game-steamworld-build p,body.swg-game-steamworld-build li,body.swg-game-steamworld-build .swg-char-card p{font-size:16px !important;line-height:27px !important;} body.swg-game-steamworld-build .swg-summary__meta,body.swg-game-steamworld-build .elementor-post-date{font-size:16px !important;line-height:27px !important;} body.swg-game-steamworld-build .swg-pill,body.swg-game-steamworld-build .elementor-button,body.swg-game-steamworld-build .elementor-button-link{font-size:16px !important;line-height:27px !important;} body.swg-game-steamworld-build .swg-h2-form label,body.swg-game-steamworld-build .swg-h2-form .elementor-field-label{font-size:20px !important;line-height:normal !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-button{font-size:16px !important;line-height:normal !important;} body.swg-game-steamworld-build .swg-switcher__nav button,body.swg-game-steamworld-build .swg-switcher__nav button span{line-height:16.1px !important;} } /* ===== mobile leftovers: the newsletter panel keeps its 32px desktop padding and 18px type where the source uses 24px and 16px, and the footer's two brand logos stack because the shared mobile rule makes each image widget full width. The footer's top padding also steps again under 425 (150px, from 200px). : build mobile form and footer ===== */ @media(max-width:767px){ body.swg-game-steamworld-build .swg-h2-form .swg-h2-box{padding:24px !important;} body.swg-game-steamworld-build .swg-h2-form input[type=email].elementor-field,body.swg-game-steamworld-build .swg-h2-form .elementor-field-textual{font-size:16px !important;line-height:normal !important;height:auto !important;min-height:0 !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-field-type-acceptance label,body.swg-game-steamworld-build .swg-h2-form .elementor-field-option label{font-size:16px !important;line-height:normal !important;} body.swg-game-steamworld-build .swg-foot-right .elementor-widget-image{width:auto !important;} } @media(max-width:424px){ body.swg-game-steamworld-build .elementor-location-footer{padding-top:150px !important;} } /* ===== the source scales its decorative art down twice on the way to mobile - the blueprint tile halves at 1280 and the four corner sketches halve at 1280 and quarter again at 1024 - and halves every section's vertical padding at 1024. Ours kept the desktop values, which is why the sketches filled the phone. : build mobile section scale ===== */ @media(max-width:1439px){ body.swg-game-steamworld-build .swg-h2-video{background-size:265px 179px,353px 358.5px,104.5px 250px,825px 124.5px,677px !important;} body.swg-game-steamworld-build .swg-h2-gallery{background-size:677px !important;} body.swg-game-steamworld-build .swg-news-page{background-size:677px !important;} } @media(max-width:1023px){ body.swg-game-steamworld-build .swg-h2-video{background-size:132.5px 89.5px,176.5px 179.25px,52.25px 125px,412.5px 62.25px,677px !important;padding:64px 0 !important;} body.swg-game-steamworld-build .swg-h2-news{padding:32px 0 !important;} body.swg-game-steamworld-build .swg-h2-adventure{padding:32px 0 !important;} body.swg-game-steamworld-build .swg-h2-gallery{padding:32px 0 !important;} body.swg-game-steamworld-build .swg-h2-features{padding:32px 0 64px !important;} body.swg-game-steamworld-build .swg-h2-characters{padding:64px 0 !important;} body.swg-game-steamworld-build .swg-h2-kits{padding:64px 0 !important;} body.swg-game-steamworld-build .swg-h2-form{padding:64px 0 32px !important;} } /* ===== the character portraits are a fixed 300x300 on desktop; on mobile the card is narrower and the source keeps them square (191x191), while ours stayed 300 tall. : build mobile character art ===== */ @media(max-width:1023px){ body.swg-game-steamworld-build .swg-char-card img{width:100% !important;height:auto !important;aspect-ratio:1/1 !important;object-fit:cover !important;} } /* ===== every paper panel drops from 32px to 24px of padding on mobile. The 8px a side also decides whether the kit headings fit on one line, so this is worth 16px on the features panel and 85px on the kits row. : build mobile panel padding ===== */ @media(max-width:1023px){ body.swg-game-steamworld-build .swg-h2-box{padding:24px !important;} } /* ===== on mobile the gallery tiles wear a 4px frame rather than 8px (151px picture in a 159px tile), and the adventure section carries 16px above the art and under the panel - the source's empty text block and its block padding. : build mobile gallery frame ===== */ @media(max-width:1023px){ body.swg-game-steamworld-build .swg-h2-gallery .gallery-item .gallery-icon{border-width:4px !important;} body.swg-game-steamworld-build .swg-h2-adventure > .swg-constrain > .e-con-inner{padding-top:16px !important;} body.swg-game-steamworld-build .swg-h2-adventure .swg-h2-box{margin-bottom:16px !important;} } /* ===== the source's smaller type and 4px frames are not a phone thing: they run all the way up to 1279 (verified 1279 at 24/30 and 16px against 1280 at 36/45 and 18px). The earlier block stopped at 767, which left every 768-1279 layout oversized. : build type scale to 1279 ===== */ @media(max-width:1279px){ body.swg-game-steamworld-build .elementor-heading-title{font-size:24px !important;line-height:30px !important;} body.swg-game-steamworld-build .swg-h2-hero .elementor-heading-title{font-size:36px !important;line-height:45px !important;} body.swg-game-steamworld-build .swg-summary__heading,body.swg-game-steamworld-build .elementor-post__title,body.swg-game-steamworld-build .elementor-post__title a,body.swg-game-steamworld-build .swg-h2-news .elementor-post__title,body.swg-game-steamworld-build .swg-h2-news .elementor-post__title a{font-size:24px !important;line-height:30px !important;} body.swg-game-steamworld-build .swg-char-card .elementor-heading-title{font-size:20px !important;line-height:25px !important;} body.swg-game-steamworld-build p,body.swg-game-steamworld-build li,body.swg-game-steamworld-build .swg-char-card p{font-size:16px !important;line-height:27px !important;} body.swg-game-steamworld-build .swg-summary__meta,body.swg-game-steamworld-build .elementor-post-date{font-size:16px !important;line-height:27px !important;} body.swg-game-steamworld-build .swg-pill,body.swg-game-steamworld-build .elementor-button,body.swg-game-steamworld-build .elementor-button-link{font-size:16px !important;line-height:27px !important;} body.swg-game-steamworld-build .swg-h2-form label,body.swg-game-steamworld-build .swg-h2-form .elementor-field-label{font-size:20px !important;line-height:normal !important;} body.swg-game-steamworld-build .swg-h2-form .elementor-button{font-size:16px !important;line-height:normal !important;} body.swg-game-steamworld-build .swg-summary__image-container,body.swg-game-steamworld-build .elementor-post__thumbnail,body.swg-game-steamworld-build .swg-h2-gallery .gallery-item .gallery-icon{border-width:4px !important;} } /* ===== the archive panel halves its padding below 1024 and its heading drops to 36/45 with a 27px margin, matching the landing page's index heading. : build news archive mobile ===== */ @media(max-width:1023px){ body.swg-game-steamworld-build .swg-newsarch{padding:32px 0 !important;} body.swg-game-steamworld-build .swg-newsarch__heading{font-size:36px !important;line-height:45px !important;margin:0 0 27px !important;} } /* ===== article pages follow the same 1280 type step as the landing page - intro 36/39.6, body h1 36/45, h3 20/25, 16px date - and their image carousel shows three tiles above 1280, two down to 768 and one below that, on a 4px frame. The page's own padding halves at 1024. : build article mobile scale ===== */ @media(max-width:1279px){ body.swg-game-steamworld-build .swg-news-intro__heading{font-size:36px !important;line-height:39.6px !important;} body.swg-game-steamworld-build .swg-news-intro__date{font-size:16px !important;} body.swg-game-steamworld-build .swg-news-text h1{font-size:36px !important;line-height:45px !important;} body.swg-game-steamworld-build .swg-news-text h3,body.swg-game-steamworld-build .swg-news-text h4{font-size:20px !important;line-height:25px !important;} body.swg-game-steamworld-build .swg-news-grid__link{border-width:4px !important;} body.swg-game-steamworld-build .swg-news-image__img{border-width:4px !important;} body.swg-game-steamworld-build .swg-car--news .swg-news-grid__link{flex:0 0 calc(50% - 32px) !important;} } @media(max-width:1023px){ body.swg-game-steamworld-build .swg-news-page{padding:32px 0 !important;} } @media(max-width:767px){ body.swg-game-steamworld-build .swg-news-article > .swg-car--news{padding:0 96px !important;} body.swg-game-steamworld-build .swg-car--news .swg-news-grid__link{flex:0 0 calc(100% - 32px) !important;} } /* ===== the gap between article blocks halves with the page padding at 1024, same as every other section on the site. :not() keeps the npt/npb flags winning, since this block sits after them in the file and would otherwise put the margin back. : build article block gap ===== */ @media(max-width:1023px){ body.swg-game-steamworld-build .swg-news-article > *:not(.swg-news-blk--npt){margin-top:32px !important;} body.swg-game-steamworld-build .swg-news-article > *:not(.swg-news-blk--npb){margin-bottom:32px !important;} } /* ===== the source frames the embed in a real 8px #141010 border (4px from 1279 down), not in transparent padding - we were faking the width with padding and paying the height back at the bottom, which paints nothing and left the block 3px tall on mobile. content-box keeps aspect-ratio resolving on the picture, so the frame sits outside 16:9. : build article video frame ===== */ body.swg-game-steamworld-build .swg-news-video{padding:0 32px !important;} body.swg-game-steamworld-build .swg-news-video iframe{box-sizing:content-box !important;border:8px solid #141010 !important;width:calc(100% - 16px) !important;} @media(max-width:1279px){ body.swg-game-steamworld-build .swg-news-video iframe{border-width:4px !important;width:calc(100% - 8px) !important;} } /* ===== the source spaces article blocks with padding, which adds; ours uses margins, which collapse - so every media block sat 64px closer to its neighbour than it should and the run's first and last margins escaped the container entirely (384px on the one-year post). Flex items do not collapse, so a column here reproduces the padding model exactly. : build article block stacking ===== */ body.swg-game-steamworld-build .swg-news-article{display:flex !important;flex-direction:column !important;} body.swg-game-steamworld-build .swg-news-article > *{width:100% !important;} /* ===== the shared mobile rule shrinks every carousel control to 40px, but the source's news carousel keeps a 48px button with a 29x26 arrow at 430, 768 and 1440 alike. Scoped to --news so the character carousel keeps its own steps. : build article carousel button size ===== */ body.swg-game-steamworld-build .swg-car--news .swg-car-btn{width:48px !important;height:48px !important;} body.swg-game-steamworld-build .swg-car--news .swg-car-btn__icon{width:29px !important;height:26px !important;} /* ===== h5/h6 inside an article are Permanent Marker at body size on 1.25 line-height, with the same 27px gap a paragraph gets - not the theme's Bangers 20/24. Only the EULA post uses them, which is why it read 81px short. : build article small headings ===== */ body.swg-game-steamworld-build .swg-news-text h5,body.swg-game-steamworld-build .swg-news-text h6{font-family:'Permanent Marker',cursive !important;font-weight:700 !important;font-size:18px !important;line-height:22.5px !important;color:#fff !important;margin:0 0 27px !important;} @media(max-width:1279px){ body.swg-game-steamworld-build .swg-news-text h5,body.swg-game-steamworld-build .swg-news-text h6{font-size:16px !important;line-height:20px !important;} } /* ===== the source's nav list fills the row's free space but is clamped at its own content width, so a list too long for the space stops shrinking and pushes the social block and the picker past the container instead of letting them overlap - German and French labels are ~60-90px wider than English. Ours let the nav shrink freely, so the list ran underneath the social icons. min-width restores the clamp: it is inert while the labels fit (English keeps its 956 position) and takes over when they do not. : build header nav width ===== */ body.swg-game-steamworld-build .swg-header .swg-gamenav-w{min-width:max-content !important;} /* ===== Build hovers its language picker to the cream it uses everywhere else, not the site's orange - verified on the source's button and its list links, while the game switcher beside it stays orange in both games. : build picker hover ===== */ body.swg-game-steamworld-build .swg-lang__current:hover,body.swg-game-steamworld-build .swg-lang__current:focus,body.swg-game-steamworld-build .swg-lang__link:hover,body.swg-game-steamworld-build .swg-lang__link:focus{color:#efefbb !important;} /* ===== the Build skin sets the switcher's type in one rule covering the button and the items, but only the button is 23px - the dropdown's own links keep the 40px line the source gives them, which is what makes each row 71px instead of 54. Only visible once the dropdown opens. : build switcher item height ===== */ body.swg-game-steamworld-build .swg-switcher__item a{line-height:40px !important;} /* ===== the newsletter thank-you pages. The site-level one is spaced in vh like the game heroes (10vh above, 15vh below, plus the 16px block padding and, above 768, a 32px grid gap to an empty companion block); the game-level one is the Build skin's usual 128/64 section with the copy in the cream panel. The 80px lead above the heading is the source's 8rem on a 10px root, and it stays 80px at every width. : thank you pages ===== */ .swg-ty{display:flex;flex-direction:column;gap:32px;} .swg-ty__art img{display:block;width:100%;height:auto;} .swg-ty__lead{height:80px;} .swg-ty--site .swg-ty__spacer--top{height:calc(10vh + 48px);} .swg-ty--site .swg-ty__spacer--bottom{height:calc(15vh + 16px);} .swg-ty--site .swg-ty__row{display:flex;gap:32px;align-items:flex-start;} .swg-ty--site .swg-ty__text,.swg-ty--site .swg-ty__art{flex:0 0 calc(50% - 16px);} .swg-ty--site .swg-ty__text{padding-bottom:16px;} .swg-ty--site h2{font-family:Bangers,'Open Sans',sans-serif;font-size:36px;line-height:45px;font-weight:400;color:#fff;margin:0 0 27px;text-align:center;} .swg-ty--site p{font-size:18px;line-height:27px;color:#fff;margin:0 0 27px;text-align:center;} .swg-ty--site p:last-child{margin-bottom:0;} .swg-ty__btn{display:inline-block;padding:14px 24px;border-radius:90px;background-color:#DC5002;color:#fff;font-family:Bangers,'Open Sans',sans-serif;font-size:24px;line-height:28.8px;font-weight:400;text-decoration:none;transition:background-color .1s ease-in-out;} .swg-ty__btn:hover,.swg-ty__btn:focus{background-color:#C7371A;color:#fff;} .swg-ty--game{gap:0;} .swg-ty--game .swg-ty__art,.swg-ty--game .swg-ty__box{width:calc((100% - 352px)/3 + 96px);margin:0 auto;box-sizing:border-box;} .swg-ty--game .swg-ty__box{background-color:#EFEFBB;padding:32px;margin-bottom:16px;} .swg-ty--game h2{font-family:'Permanent Marker',cursive;font-size:36px;line-height:45px;font-weight:400;color:#000;margin:0 0 27px;} .swg-ty--game p{font-size:18px;line-height:27px;color:#000;margin:0;} @media(max-width:1279px){ .swg-ty--site h2{font-size:24px;line-height:30px;} .swg-ty--site p{font-size:16px;line-height:27px;} .swg-ty__btn{font-size:20px;line-height:24px;} } @media(max-width:979px){ .swg-ty-sec--site{padding-bottom:64px !important;} } @media(max-width:1023px){ .swg-ty-sec--game{padding:64px 0 32px !important;} .swg-ty--game .swg-ty__box{padding:24px;} .swg-ty--game h2{font-size:24px;line-height:30px;} .swg-ty--game p{font-size:16px;line-height:27px;} } @media(max-width:767px){ .swg-ty--site .swg-ty__spacer--top{height:calc(10vh + 16px);} .swg-ty--site .swg-ty__row{flex-direction:column-reverse;gap:0;} .swg-ty--site .swg-ty__text,.swg-ty--site .swg-ty__art{flex:0 0 auto;width:100%;} .swg-ty--site h2,.swg-ty--site p{text-align:left;} .swg-ty--game .swg-ty__art,.swg-ty--game .swg-ty__box{width:100%;} } /* ===== the site-level thank-you page paints its own backdrop: the source hangs a full-bleed media layer inside the section - a 2560 square grunge-metal texture, object-fit cover and centred, under a flat 30% black - over the #141010 body. The game-level pages have no such layer and simply show the game's body art. Served as WebP because the CDN downscales any PNG over 1600px, which would change the cover scale. : thank you backdrop ===== */ .swg-ty-sec--site{background-color:#141010;background-image:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(https://steamworldgames.com/wp-content/uploads/2026/08/theme-grunge-metal-2560.webp);background-size:cover;background-position:50% 50%;background-repeat:no-repeat;}/* End custom CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Bangers'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://steamworldgames.com/wp-content/uploads/2026/08/Bangers-Regular.woff2') format('woff2'), url('https://steamworldgames.com/wp-content/uploads/2026/08/Bangers-Regular.woff') format('woff'); } /* End Custom Fonts CSS */ /* Start Custom Fonts CSS */@font-face { font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: auto; src: url('https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Regular.woff2') format('woff2'), url('https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Regular.woff') format('woff'); } @font-face { font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: auto; src: url('https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Bold.woff2') format('woff2'), url('https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Bold.woff') format('woff'); } @font-face { font-family: 'Lato'; font-style: italic; font-weight: 400; font-display: auto; src: url('https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Italic.woff2') format('woff2'), url('https://steamworldgames.com/wp-content/uploads/2026/08/Lato-Italic.woff') format('woff'); } /* End Custom Fonts CSS */