/* ========================================================================== L2Shield - theme overrides Loaded after app.css / addition.css. Purpose: - Global scale of the layout (see --site-scale right below). - Fill in background images that the base theme references but that are not shipped in the image pack (modern/inner-*.jpg, btn-action-bg.png). - Small L2Shield specific adjustments. ========================================================================== */ /* -------------------------------------------------------------------------- GLOBAL SCALE The base template was drawn for very wide screens, so everything reads as oversized. --site-scale shrinks the design to 75%, i.e. 25% "further away". 0.80 / 0.85 = milder 0.70 = stronger 1 = original size HOW THIS WORKS (and why it is not `zoom`) The first attempt used `zoom: 0.75` on . Do not go back to it: zoom divides the effective CSS viewport by the scale (a 3840px screen reports 5120px), while .container is capped at a fixed max-width. The layout then stops filling the screen and collapses into a narrow strip with the artwork stuck in the middle. Media queries also keep reading the real width, so the breakpoints stop matching the layout. Instead we scale the design tokens, which never touches the viewport: - the root font size, which drives every rem/clamp() size in the template (all section titles, mod titles, the files subtitle) - --fz, the body text size - the px values of the elements that dominate the page Everything is scoped to >= 1200px. Below that the template already has its own compact values in media queries, and overriding them here would flatten the mobile spacing. -------------------------------------------------------------------------- */ :root { --site-scale: 0.75; } @media (min-width: 1200px) { /* Type: rem based sizes follow the root, so all the big titles shrink */ :root { font-size: calc(16px * var(--site-scale)); --fz: calc(20px * var(--site-scale)); } /* Buttons */ .btn { font-size: calc(18px * var(--site-scale)); padding: calc(27px * var(--site-scale)) calc(40px * var(--site-scale)) calc(23px * var(--site-scale)); width: calc(270px * var(--site-scale)); } .btn--lg { font-size: calc(29px * var(--site-scale)); padding-block: calc(42px * var(--site-scale)) calc(37px * var(--site-scale)); width: calc(450px * var(--site-scale)); } .btn--action { padding-block: calc(26px * var(--site-scale)) calc(30px * var(--site-scale)); width: calc(254px * var(--site-scale)); } /* Re-assert: the rules above would otherwise beat .btn--full-width, which is declared earlier in app.css. */ .btn--full-width { width: 100%; } /* Section rhythm */ .section__inner { padding-block: calc(70px * var(--site-scale)); } .section__header { margin-bottom: calc(65px * var(--site-scale)); } .section__description { font-size: calc(20px * var(--site-scale)); margin-top: calc(32px * var(--site-scale)); } .section__description--sm { font-size: calc(16px * var(--site-scale)); } .section__title--sm { font-size: calc(34px * var(--site-scale)); } /* Header */ .header__inner { padding-block: calc(23px * var(--site-scale)); } .header__logo { margin-right: calc(80px * var(--site-scale)); } .header__language-selector { margin-left: calc(70px * var(--site-scale)); } /* Promo / hero */ .promo__description { font-size: calc(28px * var(--site-scale)); } .hero__inner { padding-block: max(15vh, calc(140px * var(--site-scale))) calc(45px * var(--site-scale)); } .hero__logo { margin-bottom: calc(45px * var(--site-scale)); } /* Mod + media sections */ .mod__inner, .media__inner { padding-block: calc(140px * var(--site-scale)) calc(150px * var(--site-scale)); } .mod-item__description { font-size: calc(18px * var(--site-scale)); } /* Download page */ .files__content { padding: calc(65px * var(--site-scale)) calc(55px * var(--site-scale)); } .files__header { margin-bottom: calc(55px * var(--site-scale)); } .file-item__icon { width: calc(76px * var(--site-scale)); } /* Information page */ .simple-category__inner { padding: calc(25px * var(--site-scale)) calc(31px * var(--site-scale)) calc(27px * var(--site-scale)); } .simple-category__title { font-size: calc(18px * var(--site-scale)); } .block__inner { padding: calc(37px * var(--site-scale)); } } /* -------------------------------------------------------------------------- MAIN BACKGROUND ARTWORK Single source of truth for the hero artwork: --bg-top-image is used by the home page (.top-sections) AND by the inner pages (.back), so swapping the art in one place updates the whole site. Current art: ../img/modern/newbg.jpg - 2600x2408, ratio 1.08. That ratio is close to the shape of the block it fills, so `cover` only trims a little off the bottom, which is what the template expects. --bg-top-fade fades the bottom of the artwork into --bg-primary-color (#375a80, the site background). It is only needed when the art is much wider than it is tall and cannot fill the block: set it to something like 58% in that case. 100% keeps it off. NOTE: the base template also references top.jpg / top.webp and inner-repeat / inner-top / inner-bottom. None of those files ship with the image pack, which is why every layer is redefined here. -------------------------------------------------------------------------- */ :root { --bg-top-image: url(../img/modern/newbg.jpg); --bg-top-size: cover; --bg-top-position: top center; /* Where the fade to the site background starts (100% = no fade) */ --bg-top-fade: 100%; } /* Home page: behind the promo + features block */ .top-sections:after { background-image: linear-gradient(to bottom, transparent var(--bg-top-fade), var(--bg-primary-color) 100%), var(--bg-top-image); background-position: top center, var(--bg-top-position); background-repeat: no-repeat, no-repeat; background-size: 100% 100%, var(--bg-top-size); } /* -------------------------------------------------------------------------- Inner pages background (info, download, privacy, terms). The base template builds this out of three layers, all pointing at inner-repeat / inner-top / inner-bottom, none of which exist in the image pack. So we rebuild it with the artwork we do have, keeping the template's own structure and its top/bottom fade masks: .back middle of the page -> just the site colour .back:before top 2504px -> the main artwork .back:after bottom 660px -> the footer artwork -------------------------------------------------------------------------- */ body:not(.home) .back { background-image: none; } body:not(.home) .back:before { background-image: var(--bg-top-image); background-position: top center; background-repeat: no-repeat; background-size: cover; } /* The footer block draws its own artwork (.bottom-sections:after further down), so this layer must stay empty. Painting bottom.webp here too meant the same image was drawn twice with two different crops, which is what produced the hard line under the footer. */ body:not(.home) .back:after { background-image: none; } /* -------------------------------------------------------------------------- Footer artwork blending (inner pages) .bottom-sections:after is the footer background. The base template gives it `cover` and no mask, so both of its edges cut abruptly: the top against the page colour and the bottom against the end of the page. Two gradient layers on top of the artwork fix that: 1. top -> dissolves into --bg-primary-color, so the footer fades in 2. bottom -> a soft shadow that grounds the last pixels Tuning: raise --bg-footer-fade-top for a longer transition, or lower --bg-footer-shadow opacity for a lighter bottom. -------------------------------------------------------------------------- */ :root { --bg-footer-fade-top: 32%; --bg-footer-fade-bottom: 38%; --bg-footer-shadow: rgba(0, 0, 0, .55); } body:not(.home) .bottom-sections:after { background-image: linear-gradient(to bottom, var(--bg-primary-color) 0%, transparent var(--bg-footer-fade-top)), linear-gradient(to top, var(--bg-footer-shadow) 0%, transparent var(--bg-footer-fade-bottom)), url(../img/modern/bottom.webp); background-position: top center, bottom center, bottom center; background-repeat: no-repeat, no-repeat, no-repeat; background-size: 100% 100%, 100% 100%, cover; } /* -------------------------------------------------------------------------- Action buttons (download page) - base theme uses btn-action-bg.png -------------------------------------------------------------------------- */ .btn--action { background-image: url(../img/btn-bg.png); } /* -------------------------------------------------------------------------- Server status pill on the promo block -------------------------------------------------------------------------- */ .servers--online .servers__status { background-image: linear-gradient(0deg, #0c5c22, #23c552); } .servers--online .servers__status:after { background-color: #23c552; } .servers--soon .servers__status { background-image: linear-gradient(0deg, #7a5406, #edb01d); } .servers--soon .servers__status:after { background-color: #edb01d; } /* -------------------------------------------------------------------------- Countdown to the server launch (promo block) -------------------------------------------------------------------------- */ .countdown { align-items: flex-start; display: flex; gap: 18px; justify-content: center; margin-top: 30px; } .countdown__item { align-items: center; display: flex; flex-direction: column; min-width: 74px; } .countdown__value { color: #ed9f4d; font-family: var(--font-secondary, inherit); font-size: 40px; line-height: 1.1; } .countdown__label { color: #e3e3e4; font-size: 12px; letter-spacing: .14em; opacity: .75; text-transform: uppercase; } .countdown__sep { color: #ed9f4d; font-size: 32px; line-height: 1.3; opacity: .5; } @media (max-width: 575px) { .countdown { gap: 10px; } .countdown__item { min-width: 56px; } .countdown__value { font-size: 28px; } .countdown__sep { display: none; } } /* -------------------------------------------------------------------------- Rates grid (information page helper) -------------------------------------------------------------------------- */ .rates { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 40px; } .rates__item { border: 1px solid hsla(0, 0%, 100%, .12); border-radius: var(--border-radius-md, 8px); padding: 22px 18px; text-align: center; } .rates__value { color: #ed9f4d; display: block; font-family: var(--font-secondary, inherit); font-size: 30px; line-height: 1.2; } .rates__label { color: #e3e3e4; font-size: 12px; letter-spacing: .14em; opacity: .75; text-transform: uppercase; } /* -------------------------------------------------------------------------- Language selector - text labels instead of flags (EN / PT / ES) -------------------------------------------------------------------------- */ .language-selector__label { align-items: center; color: #e3e3e4; display: inline-flex; font-size: 14px; font-weight: 600; justify-content: center; letter-spacing: .08em; line-height: 1; min-width: 28px; text-transform: uppercase; transition: color .3s ease; } .language-selector__btn:hover .language-selector__label, .language-selector__btn[aria-expanded="true"] .language-selector__label { color: #ed9f4d; } /* -------------------------------------------------------------------------- Footer additions (social row + copyright) -------------------------------------------------------------------------- */ .footer__social { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; } .footer__social-link { align-items: center; border: 1px solid hsla(0, 0%, 100%, .14); border-radius: 50%; color: #e3e3e4; display: inline-flex; font-size: 17px; height: 42px; justify-content: center; transition: border-color .3s ease, color .3s ease; width: 42px; } .footer__social-link:hover { border-color: #ed9f4d; color: #ed9f4d; } .footer__copyright { color: #e3e3e4; font-size: 13px; opacity: .6; } /* -------------------------------------------------------------------------- Pages without a hero: .header is absolute, so
takes the offset. -------------------------------------------------------------------------- */ .page__main--offset { padding-block-start: calc(150px * var(--site-scale)); } @media (max-width: 767px) { .page__main--offset { padding-block-start: 110px; } } /* -------------------------------------------------------------------------- Download page Uses the theme tokens (--accent-color, --font-secondary, --border-radius) and the theme button art (.btn / .btn--secondary / .btn--accent), so the page keeps exactly the same visual language as the rest of the site. -------------------------------------------------------------------------- */ /* Note block above the cards */ .files__note { border-bottom: 1px solid hsla(0, 0%, 100%, .1); margin-bottom: 45px; padding-bottom: 26px; text-align: center; } .files__note p { font-size: 16px; line-height: 1.6; margin: 0; opacity: .8; } .files__note p + p { margin-top: 6px; } .files__note a { color: var(--accent-color, #ed9f4d); transition: opacity var(--trans, .25s ease); } .files__note a:hover { opacity: .75; } /* Three cards side by side */ .files__grid { display: grid; gap: 30px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .files-card { background-color: rgba(19, 21, 27, .55); border: 1px solid rgba(55, 48, 43, .9); border-radius: var(--border-radius-md, 8px); display: flex; flex-direction: column; padding: 32px 26px 30px; text-align: center; } .files-card__title { color: var(--font-primary-color, #fff); font-family: var(--font-secondary, inherit); font-size: 22px; line-height: 1.35; margin: 0 0 14px; } .files-card__desc { font-size: 16px; line-height: 1.5; margin-bottom: 28px; opacity: .75; } .files-card__desc p { margin: 0; } /* The mirrors use the theme buttons, stacked so the button art stays legible */ .files-card__links { display: flex; flex-direction: column; gap: 14px; margin-top: auto; } .files-card__links .btn { font-size: calc(16px * var(--site-scale)); padding: calc(22px * var(--site-scale)) calc(20px * var(--site-scale)) calc(19px * var(--site-scale)); } @media (max-width: 991px) { .files__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575px) { .files__grid { grid-template-columns: minmax(0, 1fr); } .files__note { text-align: left; } } /* ========================================================================== Popup (Discord widget) Same visual language as .files__content: translucent dark panel with blur, accent colour and the theme fonts. ========================================================================== */ .popup { align-items: center; display: none; inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 200; } .popup.is-open { display: flex; } .popup__overlay { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); background-color: rgba(6, 7, 10, .72); cursor: pointer; inset: 0; position: absolute; } .popup__dialog { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: popup-in .28s ease both; background-color: rgba(19, 21, 27, .92); border: 1px solid rgba(55, 48, 43, .9); border-radius: var(--border-radius, 10px); box-shadow: 0 24px 70px rgba(0, 0, 0, .55); max-height: calc(100vh - 40px); max-width: 520px; overflow-y: auto; padding: 40px 38px 34px; position: relative; text-align: center; width: 100%; } @keyframes popup-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } /* Close button ------------------------------------------------------------ */ .popup__close { background-color: initial; border: none; cursor: pointer; height: 34px; padding: 0; position: absolute; right: 16px; top: 16px; width: 34px; z-index: 2; } .popup__close:before, .popup__close:after { background-color: var(--font-primary-color, #fff); content: ""; height: 2px; left: 50%; opacity: .7; position: absolute; top: 50%; transition: opacity var(--trans, .25s ease), background-color var(--trans, .25s ease); width: 18px; } .popup__close:before { transform: translate(-50%, -50%) rotate(45deg); } .popup__close:after { transform: translate(-50%, -50%) rotate(-45deg); } .popup__close:hover:before, .popup__close:hover:after { background-color: var(--accent-color, #ed9f4d); opacity: 1; } /* Header ------------------------------------------------------------------ */ .popup__icon { color: var(--accent-color, #ed9f4d); display: block; font-size: 42px; line-height: 1; margin-bottom: 16px; } .popup__title { font-family: var(--font-secondary, inherit); font-size: clamp(1.5rem, 1.6vw, 2rem); line-height: 1.3; margin: 0; } .popup__header .decor-line { margin-block: 14px; max-width: 100%; } .popup__description { font-size: 16px; line-height: 1.6; margin: 0; opacity: .8; } /* Widget ----------------------------------------------------------------- */ .popup__widget { border: 1px solid hsla(0, 0%, 100%, .08); border-radius: var(--border-radius-md, 8px); margin-top: 26px; overflow: hidden; } .popup__widget iframe { display: block; width: 100%; } /* Actions ---------------------------------------------------------------- */ .popup__actions { align-items: center; display: flex; flex-direction: column; gap: 14px; margin-top: 28px; } .popup__actions .btn { max-width: 100%; } .popup__later { background-color: initial; border: none; color: var(--font-primary-color, #fff); cursor: pointer; font-family: var(--font-primary, inherit); font-size: 14px; letter-spacing: .06em; opacity: .55; padding: 6px 10px; text-transform: uppercase; transition: opacity var(--trans, .25s ease); } .popup__later:hover { opacity: .9; } /* Scroll lock ------------------------------------------------------------ */ body.popup-open { overflow: hidden; } @media (max-width: 575px) { .popup__dialog { padding: 34px 20px 26px; } .popup__icon { font-size: 34px; } } /* ========================================================================== LOGO HOVER Two things only: a short scale pulse and a warm glow. Applies to all four logos of the site, which share .logo (header, promo, hero and footer). The particle burst that used to live here was removed on request. If it ever comes back, note that it needed position:relative + isolation on .logo and pointer-events:none on the pseudo elements, otherwise it would have swallowed the click on the header logo link. ========================================================================== */ .logo img { transition: filter .4s ease, transform .4s ease; } .logo:hover img, .logo:focus-visible img { animation: logo-hover-pulse .55s ease-out; filter: brightness(1.3) drop-shadow(0 0 10px rgba(237, 159, 77, .8)); } @keyframes logo-hover-pulse { 0% { transform: scale(1); } 28% { transform: scale(1.06); } 100% { transform: scale(1); } } /* Keep the glow, drop the motion for people who ask for less of it */ @media (prefers-reduced-motion: reduce) { .logo:hover img, .logo:focus-visible img { animation: none; } }