/** * Wilderings UI kit for any page of the site (loaded everywhere, small): the marketing PSD's banner, ribbons and * paper box, the game font and the animated picture cards. Meant for Elementor: put the class in a widget's * Advanced > CSS Classes (it also works on plain HTML elements). * * wenc-kit-banner Heading widget: teal banner behind the title. * wenc-ribbon-yellow Button widget: yellow ribbon (main call to action, e.g. "Wishlist on Steam"). * wenc-ribbon-teal Button widget: teal ribbon (secondary, e.g. "Xbox"). * wenc-kit-paper Container or Text widget: paper box (e.g. PC requirements). * wenc-fx-card Image Box (or any widget with a picture): framed picture that rises into view, drifts while * scrolling, tilts toward the mouse and gets a sweep of light on hover (wenc-kit.js). * wenc-on-video Any widget over a video or bright picture: dark text shadow so the text stays readable. * wenc-font Any widget: the game's font (Averia Libre; Marmelad in languages it cannot write). * wenc-video-hero Header container with a background video: the video fades into the page's night blue. * wenc-night Every top-level container of the page: one night-blue background for the whole page, light * texts; the book, banners, paper boxes and pictures are the objects on it. * * Kit pieces (tools/dev/web-kit) are cut into ends and middle: the ends are drawn over the stretched middle with a * 2px overlap, so no join shows at any device pixel ratio. */ @font-face { font-family: "Averia Libre"; src: url("../fonts/AveriaLibre-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Averia Libre"; src: url("../fonts/AveriaLibre-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; } /* Pages in a language with letters Averia Libre lacks (Polish, Turkish, Czech, Hungarian, Romanian, Cyrillic) use Marmelad, as the encyclopedia does (wenc.css): --wenc-kit-font holds the kit's font for the page's language. */ @font-face { font-family: "Marmelad"; src: url("../fonts/Marmelad-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; } @font-face { font-family: "Averia Numbers"; src: url("../fonts/AveriaLibre-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; unicode-range: U+0025, U+002B, U+0030-0039, U+2212; } @font-face { font-family: "Averia Numbers"; src: url("../fonts/AveriaLibre-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; unicode-range: U+0025, U+002B, U+0030-0039, U+2212; } :root { --wenc-kit-font: "Averia Libre", Georgia, serif; } :root:is(:lang(pl), :lang(tr), :lang(cs), :lang(hu), :lang(ro), :lang(ru), :lang(uk), :lang(bg)) { --wenc-kit-font: "Averia Numbers", "Marmelad", Georgia, serif; } .wenc-font, .wenc-font .elementor-heading-title, .wenc-font .elementor-widget-container { font-family: var(--wenc-kit-font) !important; } /* The kit does not rely on a widget's inner markup (Elementor 3 classic widgets and Elementor 4 elements differ): the class can sit on the heading / link itself or on any wrapper around it. */ /* Banner ---------------------------------------------------------------------------------------------------------- */ .wenc-kit-banner:not(:is(h1, h2, h3, h4, h5, h6)) { text-align: center; } .wenc-kit-banner:is(h1, h2, h3, h4, h5, h6), .wenc-kit-banner :is(h1, h2, h3, h4, h5, h6) { display: inline-flex !important; align-items: center; justify-content: center; height: 72px; padding: 0 90px !important; margin: 0; background: url("../web/kit/banner-teal-72-l.webp") left center / 74px 72px no-repeat, url("../web/kit/banner-teal-72-r.webp") right center / 74px 72px no-repeat, url("../web/kit/banner-teal-72-m.webp") 72px center / calc(100% - 144px) 72px no-repeat !important; color: #fdeec4 !important; font-family: var(--wenc-kit-font) !important; font-size: 26px !important; font-weight: 700 !important; line-height: 1.1 !important; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } /* Ribbons ---------------------------------------------------------------------------------------------------------- */ :is(a, button).wenc-ribbon-yellow, .wenc-ribbon-yellow :is(a, button), :is(a, button).wenc-ribbon-teal, .wenc-ribbon-teal :is(a, button) { display: inline-flex !important; align-items: center; justify-content: center; min-height: 56px; height: 56px; border: 0 !important; border-radius: 0 !important; font-family: var(--wenc-kit-font) !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.1 !important; text-align: center; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none !important; box-shadow: none !important; transition: transform 0.12s, filter 0.12s; } :is(a, button).wenc-ribbon-yellow, .wenc-ribbon-yellow :is(a, button) { padding: 0 52px 0 58px !important; color: #5a3410 !important; background: url("../web/kit/ribbon-yellow-56-l.webp") left center / 48px 56px no-repeat, url("../web/kit/ribbon-yellow-56-r.webp") right center / 42px 56px no-repeat, url("../web/kit/ribbon-yellow-56-m.webp") 46px center / calc(100% - 86px) 56px no-repeat !important; } :is(a, button).wenc-ribbon-teal, .wenc-ribbon-teal :is(a, button) { padding: 0 54px 0 51px !important; color: #ffe066 !important; text-shadow: 0 1px 2px rgba(10, 50, 50, 0.7); background: url("../web/kit/ribbon-teal-56-l.webp") left center / 41px 56px no-repeat, url("../web/kit/ribbon-teal-56-r.webp") right center / 44px 56px no-repeat, url("../web/kit/ribbon-teal-56-m.webp") 39px center / calc(100% - 81px) 56px no-repeat !important; } :is(a, button):is(.wenc-ribbon-yellow, .wenc-ribbon-teal):hover, :is(.wenc-ribbon-yellow, .wenc-ribbon-teal) :is(a, button):hover { filter: brightness(1.06); transform: translateY(-2px); } /* Paper box: nine pieces, corners (57/58 x 38/41px) over the edges, edges over the middle, 2px overlaps ------------- */ .wenc-kit-paper { padding: 38px 58px 41px 57px !important; color: #67482a; font-family: var(--wenc-kit-font); background: url("../web/kit/paper-tl.webp") left top / 57px 38px no-repeat, url("../web/kit/paper-tr.webp") right top / 58px 38px no-repeat, url("../web/kit/paper-bl.webp") left bottom / 57px 41px no-repeat, url("../web/kit/paper-br.webp") right bottom / 58px 41px no-repeat, url("../web/kit/paper-tm.webp") 55px top / calc(100% - 111px) 38px no-repeat, url("../web/kit/paper-bm.webp") 55px bottom / calc(100% - 111px) 41px no-repeat, url("../web/kit/paper-cl.webp") left 36px / 57px calc(100% - 75px) no-repeat, url("../web/kit/paper-cr.webp") right 36px / 58px calc(100% - 75px) no-repeat, url("../web/kit/paper-cm.webp") 55px 36px / calc(100% - 111px) calc(100% - 75px) no-repeat !important; } .wenc-kit-paper h1, .wenc-kit-paper h2, .wenc-kit-paper h3, .wenc-kit-paper h4 { color: #67482a; font-family: inherit; } .wenc-kit-paper strong, .wenc-kit-paper b { color: #67482a; } /* Texts over video ------------------------------------------------------------------------------------------------- */ .wenc-on-video, .wenc-on-video * { text-shadow: 0 1px 3px rgba(10, 14, 32, 0.9), 0 0 14px rgba(10, 14, 32, 0.6); } /* Header with a background video: fades into the night blue (on phones, where the text sits low over the video, the whole lower half darkens). The fade sits over the video and under the content. */ .wenc-video-hero { position: relative; } /* The trailer's sky is near white down to three quarters of the header, so a short fade at the bottom reads as a cut: the fade starts at 30% of the height, the corners away from the text darken a bit and the whole video is dimmed slightly. Solid well before the edge and 2px past it: on fractional pixel positions the video's last row would peek out as a bright line under a fade that ends exactly at the edge. */ .wenc-video-hero::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: -2px; z-index: 1; pointer-events: none; background: linear-gradient(rgba(18, 24, 48, 0) 30%, rgba(18, 24, 48, 0.55) 58%, rgba(18, 24, 48, 0.9) 82%, #121830 96%), radial-gradient(130% 100% at 28% 30%, rgba(18, 24, 48, 0) 50%, rgba(18, 24, 48, 0.55) 100%), linear-gradient(rgba(18, 24, 48, 0.18), rgba(18, 24, 48, 0.18)); } .wenc-video-hero > :not(.elementor-background-video-container):not(.elementor-background-overlay):not(.elementor-background-slideshow) { position: relative; z-index: 2; } /* Night page: one night-blue background for every section of the page (the colour the header video fades into). PlayerX paints its content area almost black; pages that use the class get the night blue instead. Containers lose their own background; headings and texts turn light, except inside the book (.wenc), banners and paper boxes. */ body:has(.wenc-night) :is(.edgtf-wrapper, .edgtf-content) { background-color: #121830 !important; } .wenc-night, .wenc-night > .e-con-inner, .wenc-night .e-con:not(.wenc-kit-paper) { background-color: transparent !important; box-shadow: none !important; } .wenc-night :is(.elementor-heading-title, .elementor-image-box-title, h1, h2, h3, h4):not(.wenc *, .wenc-kit-banner, .wenc-kit-banner *, .wenc-kit-paper *) { color: #f4e3b1 !important; } .wenc-night :is(.elementor-widget-text-editor, .elementor-widget-text-editor *, .elementor-image-box-description, p, li):not(.wenc *, .wenc-kit-paper, .wenc-kit-paper *, a, a *) { color: #d9cfb2 !important; } @media (max-width: 767px) { .wenc-video-hero::after { background:linear-gradient(rgba(18, 24, 48, 0) 25%, rgba(18, 24, 48, 0.72) 55%, #121830); } } /* Animated picture cards -------------------------------------------------------------------------------------------- * wenc-kit.js wraps the card's picture in .wenc-fx-art and drives --py (parallax) and --rx/--ry (tilt); .is-armed / * .is-in make the cards of a row rise one after another. Without the script the pictures just sit framed. */ .wenc-fx-card { --rx: 0deg; --ry: 0deg; --py: 0px; transform: rotateX(var(--rx)) rotateY(var(--ry)); translate: 0 0; transition: transform 0.35s ease, translate 0.35s ease, opacity 0.7s ease; } .wenc-fx-card.is-tilting { transition: transform 0.08s linear, translate 0.35s ease, opacity 0.7s ease; } .wenc-fx-card.is-armed:not(.is-in) { opacity: 0; translate: 0 30px; } .wenc-fx-card:hover { translate: 0 -6px; } .wenc-fx-art { position: relative; display: block; overflow: hidden; border-radius: 10px; aspect-ratio: 4 / 3; box-shadow: 0 0 0 3px #b48c5c, 0 6px 14px rgba(70, 48, 26, 0.25); transition: box-shadow 0.35s ease; } .wenc-fx-card:hover .wenc-fx-art { box-shadow: 0 0 0 3px #e3b86c, 0 16px 28px rgba(70, 48, 26, 0.35), 0 0 24px rgba(255, 214, 120, 0.5); } .wenc-fx-art img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; scale: 1.14; translate: 0 var(--py); transition: scale 0.6s ease; border-radius: 0 !important; } .wenc-fx-card:hover .wenc-fx-art img { scale: 1.22; } .wenc-fx-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; transform: translateX(-120%); background: linear-gradient(115deg, transparent 35%, rgba(255, 247, 220, 0.6) 50%, transparent 65%); } .wenc-fx-card:hover .wenc-fx-art::after { transform: translateX(120%); transition: transform 0.85s ease; } /* Elementor Image Box: the picture fills the card's width. */ .wenc-fx-card .elementor-image-box-img { width: 100% !important; margin: 0 0 14px !important; } @media (max-width: 640px) { .wenc-kit-banner:is(h1, h2, h3, h4, h5, h6), .wenc-kit-banner :is(h1, h2, h3, h4, h5, h6) { height: 54px; padding: 0 61px !important; font-size: 20px !important; background: url("../web/kit/banner-teal-54-l.webp") left center / 55px 54px no-repeat, url("../web/kit/banner-teal-54-r.webp") right center / 55px 54px no-repeat, url("../web/kit/banner-teal-54-m.webp") 53px center / calc(100% - 106px) 54px no-repeat !important; } :is(.wenc-ribbon-yellow, .wenc-ribbon-teal) :is(a, button), :is(a, button):is(.wenc-ribbon-yellow, .wenc-ribbon-teal) { font-size: 15px !important; } } @media (prefers-reduced-motion: reduce) { .wenc-fx-card, .wenc-fx-card:hover { transition: none; translate: none; transform: none; opacity: 1; } .wenc-fx-art img { translate: none; transition: none; } .wenc-fx-art::after { display: none; } }