/* Apex Legends reference layout (Downloads/redeisgn.jpg). Shared tokens and components for every ax- page, then the home sections. Owner: lead -76. Helpers reuse these classes and put page CSS in their own site-apex-*.css file. */ :root { --ax-bg: #0c0c0e; --ax-panel: #141417; --ax-panel-2: #1b1b1f; --ax-line: #2e2e33; --ax-line-2: #46464d; --ax-red: #d42b2b; --ax-red-2: #ef3a3a; --ax-red-dark: #6e0f0f; --ax-ink: #f2f2f3; --ax-muted: #a3a3aa; --ax-dim: #6c6c74; --ax-wrap: min(1280px, calc(100% - 48px)); --ax-cut: 14px; /* Fonts (user, 2026-10-12): Anton for display (page and section headings, prices, big numbers, the hero), Oswald 700 for UI (nav, buttons, chips, labels, card titles, kickers, dropdowns, search, meta), Archivo for body copy at 500 (600 for ledes and short copy). Game, script, video and guide names use --ax-font-title (Archivo 700, sentence case, no tracking; user: a professional storefront). Oswald tracking stays at .04em or less. base.html loads only Oswald 600/700 and Archivo 500-700, so a lighter weight still in a rule resolves to the heavier face. --ax-font, --ax-semi and --ax-body are the older names, kept as aliases. */ --ax-font-display: "Anton", "Oswald", system-ui, sans-serif; --ax-font-ui: "Oswald", system-ui, sans-serif; --ax-font-body: "Archivo", system-ui, sans-serif; --ax-font-title: "Archivo", system-ui, sans-serif; --ax-font: var(--ax-font-ui); --ax-semi: var(--ax-font-ui); --ax-body: var(--ax-font-body); /* Shared hover and light-up (user, 2026-10-12): every interactive element uses these on :hover and :focus-visible: filter --ax-hover-fx, transform --ax-hover-lift, scale --ax-hover-scale, plus z-index 1 so the growth sits on top. Neighbours in a row move apart by --ax-hover-push on the translate property (pure CSS): .row > .item:is(:hover, :focus-visible) ~ .item { translate: var(--ax-hover-push) 0; } .row > .item:has(~ .item:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push)) 0; } scale and translate are their own properties, so they compose with the transform lift. Reduced motion drops scale, push and lift; the glow stays. On a clip-path element the drop-shadow is clipped, so it goes on an unclipped wrapper. */ --ax-hover-fx: brightness(1.2) drop-shadow(0 0 10px rgba(236, 20, 34, .55)); --ax-hover-lift: none; /* no upward lift (user): hovered items only scale from their centre and glow */ --ax-hover-scale: 1.06; --ax-hover-push: 14px; --ax-hover-t: filter .2s, transform .2s var(--ease), scale .2s var(--ease), translate .25s var(--ease); /* Picture hover (user, 2026-10-12): on :hover/:focus-visible of a card holding a picture, the picture layer zooms and turns inside its clipped frame or art window; frame and text stay put. Individual properties, so it composes with the reveal and the card lift. It runs under reduced motion too (user: Windows "Animation effects" is off on their PC). .card .art img { transition: scale var(--ax-art-t), rotate var(--ax-art-t); } .card:is(:hover, :focus-visible) .art img { scale: var(--ax-art-zoom); rotate: var(--ax-art-turn); } */ --ax-art-zoom: 1.1; --ax-art-turn: -3deg; --ax-art-t: .5s var(--ease); } body.ax { background: var(--ax-bg); font-family: var(--ax-font-body); } /* Page texture behind every ax page: a painted scene darkened to ~10% with grain, never flat black. Fixed, so it costs one composited layer. */ body.ax::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(40% 50% at 100% 60%, rgba(150, 20, 16, .16), transparent 70%), linear-gradient(rgba(11, 11, 13, .88), rgba(11, 11, 13, .93)), url("scenes/iron-chasm-siege/plate.webp") center / cover; pointer-events: none; } body.ax .bg-fx { display: none; } .ax-wrap { width: var(--ax-wrap); margin-inline: auto; } .ax-sec { padding-block: 22px; } /* Buttons: the user's kit art (kit/nav-05 red, nav-06 dark, nav-09 outline, nav-10 grey). The chevron is baked in, so template chevrons are hidden. Hover lights up the same art and lifts it (shared --ax-hover-* tokens); it never swaps to red. */ .ax-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 360px; max-width: 100%; height: 77px; padding: 0 94px 2px 50px; border: 0; background: url("kit/nav-06.webp") center / 100% 100% no-repeat; color: #fff; font: 700 23px/1 var(--ax-font); letter-spacing: 0; text-transform: uppercase; white-space: nowrap; transition: var(--ax-hover-t); } .ax-btn > svg { display: none; } .ax-btn-red { background-image: url("kit/nav-05.webp"); } .ax-btn-line { background-image: url("kit/nav-06.webp"); } .ax-btn-outline { background-image: url("kit/nav-09.webp"); } .ax-btn-dark { background-image: url("kit/nav-10.webp"); } .ax-btn:hover, .ax-btn:focus-visible { z-index: 1; filter: var(--ax-hover-fx); transform: var(--ax-hover-lift); scale: var(--ax-hover-scale); } /* The button's chevron nudges forward on hover, as the text links' do. */ .ax-btn svg { transition: translate .2s var(--ease); } .ax-btn:is(:hover, :focus-visible) svg { translate: 3px 0; } .ax-btn-sm { width: 326px; height: 70px; padding: 0 84px 2px 46px; font-size: 21px; } /* Section head: caps title with a red underline running off its end, red "view all" link on the right. */ .ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .ax-head h2 { position: relative; padding-bottom: 8px; color: #fff; font: 400 clamp(22px, 2vw, 28px)/1.1 var(--ax-font-display); letter-spacing: 0; text-transform: uppercase; } .ax-head h2::after { content: ""; position: absolute; left: 40%; right: -34px; bottom: 0; height: 2px; background: var(--ax-red); } .ax-more { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 8px; color: var(--ax-red-2); font: 700 17px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: color .2s; } .ax-more svg { width: 18px; height: 18px; transition: transform .2s var(--ease); } .ax-more:hover, .ax-more:focus-visible { color: #fff; } .ax-more:hover svg, .ax-more:focus-visible svg { transform: translateX(3px); } /* Card: dark plate, 1px frame, top-right and bottom-left corners cut. The frame is the element, the fill is ::before. */ .ax-card { position: relative; isolation: isolate; display: block; background: var(--ax-line-2); clip-path: polygon(0 0, calc(100% - var(--ax-cut)) 0, 100% var(--ax-cut), 100% 100%, var(--ax-cut) 100%, 0 calc(100% - var(--ax-cut))); } .ax-card::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: linear-gradient(180deg, #19191c, #0f0f11); clip-path: inherit; } /* Text links: white on hover (their own or their card's), chevron nudged right. */ .ax-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ax-red-2); font: 700 16px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; transition: color .2s; } .ax-link svg { width: 14px; height: 14px; transition: transform .2s var(--ease); } .ax-link:hover, .ax-link:focus-visible, a:hover > .ax-link, a:focus-visible > .ax-link { color: #fff; } .ax-link:hover svg, .ax-link:focus-visible svg, a:hover > .ax-link svg, a:focus-visible > .ax-link svg { transform: translateX(3px); } /* Inner page hero (games, scripts, free key, premium, guides): the home hero (user, 2026-10-12: "the home page will be the template"; "make sure it's like BARRAGE hub in the home page"). The same pieces at the same size: the scene behind the column with the red baseline, the home hero's padding, and the user's panel art (kit/hero-panel-scene.webp) at the home panel's scale --k = min(1120px, hero - 48px) / 1338 (cqw resolve against the panel, which is the hero - 24px wide), its left part (x 0-380) and right part (x 540-1338) at that scale and the plain dark middle (x 380-540) stretched, overhanging the column's left edge by the same --hang: 1256x472 at 1440, 1028x423 at 1100, as home. The panel's height comes from the art (in flow). Kicker, title, lede and optional buttons sit where the home copy sits (the home panel box's left 9% / top 7% / bottom 13%, 44% wide, text shifted right 4.2% onto the button group's centre), sized as the home copy, with its rise-in stagger. Markup (_tiles.html ax_page_hero; buttons through {% call %}): section.ax-page-hero > .ax-page-hero-scene (scene macro) + .ax-page-hero-panel > .ax-page-hero-copy > .ax-page-hero-title (p.ax-kicker + h1), p.ax-page-hero-lede, .ax-page-hero-actions (.ax-btn ...) */ .ax-page-hero { --hang: clamp(12px, 10.6vw - 96.6px, 56px); position: relative; isolation: isolate; overflow: visible clip; width: var(--ax-wrap); margin: 0 auto 6px; padding-block: clamp(32px, 3.4vw, 56px); border-bottom: 2px solid var(--ax-red); } .ax-page-hero-scene, .ax-page-hero-scene .scene { position: absolute; inset: 0; } .ax-page-hero-scene { z-index: -3; overflow: hidden; } .ax-page-hero-scene .sl-stage { inset: 0; width: 100%; } .ax-page-hero-scene .scene { --ax-art-zoom: 1.07; --ax-art-turn: -1deg; transition: scale var(--ax-art-t), rotate var(--ax-art-t); } .ax-page-hero:is(:hover, :focus-within) .ax-page-hero-scene .scene { scale: var(--ax-art-zoom); rotate: var(--ax-art-turn); } .ax-page-hero-panel { --k: calc(min(1120px, 100cqw - 24px) / 1338); position: relative; margin: 0 calc(24px + var(--hang)) 0 calc(-1 * var(--hang)); container-type: inline-size; } .ax-page-hero-panel::before { content: ""; position: relative; z-index: -1; display: block; height: calc(564 * var(--k)); box-sizing: border-box; border: solid transparent; border-width: 0 calc(798 * var(--k)) 0 calc(380 * var(--k)); border-image: url("kit/hero-panel-scene.webp") 0 798 0 380 fill / 0 calc(798 * var(--k)) 0 calc(380 * var(--k)) / 0 stretch; filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .6)); pointer-events: none; } /* Panel scene per tab (user): the same panel art with another scene in its picture (kit/panel, built from the home panel with only its picture swapped). The macro adds p- from its panel argument; without one the panel keeps the volcanic scene. */ .ax-page-hero-panel.p-infernal-fortress-under-siege { --ax-panel-art: url("kit/panel/infernal-fortress-under-siege.webp"); } .ax-page-hero-panel.p-infernal-siege-above-the-clouds { --ax-panel-art: url("kit/panel/infernal-siege-above-the-clouds.webp"); } .ax-page-hero-panel.p-infernal-jungle-river-battlefield { --ax-panel-art: url("kit/panel/infernal-jungle-river-battlefield.webp"); } .ax-page-hero-panel.p-blood-red-desert-barrage { --ax-panel-art: url("kit/panel/blood-red-desert-barrage.webp"); } .ax-page-hero-panel.p-crimson-mountain-siege { --ax-panel-art: url("kit/panel/crimson-mountain-siege.webp"); } .ax-page-hero-panel.p-iron-chasm-siege { --ax-panel-art: url("kit/panel/iron-chasm-siege.webp"); } .ax-page-hero-panel.p-infernal-artillery { --ax-panel-art: url("kit/panel/infernal-artillery.webp"); } .ax-page-hero-panel[class*=" p-"]::before { border-image-source: var(--ax-panel-art); } .ax-page-hero-copy { position: absolute; left: calc(120.4 * var(--k)); width: calc(588.7 * var(--k)); top: calc(39.5 * var(--k)); bottom: calc(73.3 * var(--k)); display: flex; flex-direction: column; justify-content: center; } .ax-page-hero-title, .ax-page-hero-lede { position: relative; left: calc(56.2 * var(--k)); } .ax-page-hero .ax-kicker { margin-bottom: calc(10 * var(--k)); font-size: max(13px, calc(26 * var(--k))); } /* Text titles (guides, documents) keep the size they had before the panel grew to the home size (124/564 of the old clamp(210px, 20.8vw, 300px) panel), so long titles still fit the copy field. */ .ax-page-hero h1 { color: #fff; font: 400 max(34px, calc(124 * clamp(210px, 20.8vw, 300px) / 564))/.95 var(--ax-font-display); letter-spacing: 0; text-transform: uppercase; } /* Banner title (ax_page_hero banner=...): the page's title art from static/banners, cleaned into kit/page-title (haze below 12 cleared, edge-cut flares faded, trimmed, padded so its letters fill .6956 of the file height, centred). Its letters are BARRAGE's height on the home hero at the same width: the home logo is .4048 x the home panel (min(1120px, this panel + 24px - 48px)) wide and its letters are .19283 of that width, so the file is .07806 x that / .6956 tall. Banner pages show no kicker or lede (user), so the art is 1.2921x that: the widest (premium, 3.6078:1) then just fits the two-button span of the home panel (.524 of it), and every banner (and the home logo) keeps the same letter height. The title spans that width and centres the art on it, as the home lockup centres on its buttons. */ .ax-page-hero-title:has(> .is-banner) { left: 0; width: calc(701.1 * var(--k)); } .ax-page-hero h1.is-banner { display: flex; justify-content: center; line-height: 0; } .ax-page-hero h1.is-banner img { width: auto; max-width: none; height: calc(.145 * min(1120px, 100cqw - 24px)); } /* Hover (user): the title art only grows evenly from its centre, with the site glow along its letters. */ .ax-page-hero h1.is-banner img { transition: var(--ax-hover-t); } .ax-page-hero h1.is-banner img:hover { filter: var(--ax-hover-fx); scale: var(--ax-hover-scale); } .ax-page-hero-lede { margin-top: calc(12 * var(--k)); color: #e2dcdc; font: 600 max(13px, calc(21.4 * var(--k)))/1.5 var(--ax-body); } .ax-page-hero-actions { display: flex; gap: calc(16 * var(--k)); margin-top: calc(29.4 * var(--k)); } .ax-page-hero-actions .ax-btn { flex: none; width: calc(342.5 * var(--k)); height: calc(87 * var(--k)); padding: 0 calc(89.6 * var(--k)) 2px calc(48.2 * var(--k)); font-size: max(14px, calc(28.9 * var(--k))); } .ax-page-hero-actions > .ax-btn:is(:hover, :focus-visible) ~ .ax-btn { translate: var(--ax-hover-push) 0; } .ax-page-hero-actions > .ax-btn:has(~ .ax-btn:is(:hover, :focus-visible)) { translate: calc(-1 * var(--ax-hover-push)) 0; } /* #01 card (every hero: home, ax_page_hero top=..., game pages): the user's Cyber Eden ASSET-0106 frame (SPECIAL EVENT / LIMITED TIME painted out, recoloured to the site red, haze below alpha 12 cleared) on ::before: its left part (x 0-262) and right end with the baked chevrons (x 280-370) stay native and its plain middle (x 262-280) is pre-stretched to the card's ratio in ASSET-0106-wide (one image, so no border-image slice seams show under the hover glow). ASSET-0007-wide (FEATURED painted out, middle x 124-138 pre-stretched) is the #01 Trending tag on the frame's top edge. The game's art sits in the frame's interior, faded dark toward the title. Sizes are in cqw of the card; one native pixel of the frame is .2395cqw. */ .ax-season { position: absolute; right: 24px; bottom: 24px; z-index: 1; isolation: isolate; display: block; width: clamp(270px, 35vw, 495px); box-sizing: border-box; aspect-ratio: 304 / 99; container-type: inline-size; transition: var(--ax-hover-t); } .ax-season::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url("kit/home/hero/ASSET-0106-wide.webp") 0 0 / 100% 100% no-repeat; } .ax-season-art { position: absolute; z-index: -1; left: 7.2cqw; right: 22.2cqw; top: 7.7cqw; bottom: 5.8cqw; overflow: hidden; } .ax-season-art img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--ax-art-t), rotate var(--ax-art-t); -webkit-mask: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .9) 48%, rgba(0, 0, 0, .55) 82%, transparent 100%); mask: linear-gradient(90deg, transparent 8%, rgba(0, 0, 0, .9) 48%, rgba(0, 0, 0, .55) 82%, transparent 100%); } .ax-season small { position: absolute; z-index: 1; left: 3cqw; top: -4.4cqw; width: 50cqw; height: 15cqw; box-sizing: border-box; padding-left: 9cqw; color: #fff; font: 700 max(11px, 4.1cqw)/15cqw var(--ax-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; } .ax-season small::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("kit/home/hero/ASSET-0007-wide.webp") 0 0 / 100% 100% no-repeat; } .ax-season strong { position: absolute; left: 8cqw; right: 24cqw; top: 10.5cqw; overflow: hidden; color: #fff; font: 700 max(14px, 5.6cqw)/1.05 var(--ax-font-title); text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); } .ax-season em { position: absolute; left: 8cqw; top: 20.5cqw; color: var(--ax-red-2); font: 700 max(11px, 3.9cqw)/1 var(--ax-font); font-style: normal; letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); transition: color .2s; } .ax-season em svg { display: none; } /* Plan card (/premium): the plan's prices on the Purchase line, right-aligned, silver. */ .ax-season-meta { position: absolute; right: 24cqw; top: 20.5cqw; color: var(--ax-muted); font: 700 max(11px, 3.9cqw)/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); } .ax-season:hover, .ax-season:focus-visible { z-index: 2; filter: var(--ax-hover-fx); transform: var(--ax-hover-lift); scale: var(--ax-hover-scale); } .ax-season:hover em, .ax-season:focus-visible em { color: #fff; } /* No white focus box or tap flash on the #01 card or the buttons (user): keyboard focus shows their red glow instead. */ .ax-btn, .ax-season { -webkit-tap-highlight-color: transparent; } .ax-btn:is(:focus, :focus-visible), .ax-season:is(:focus, :focus-visible) { outline: none; } .ax-season:is(:hover, :focus-visible) .ax-season-art img { scale: var(--ax-art-zoom); rotate: var(--ax-art-turn); } .ax-season { animation: slide-in .9s var(--ease) .1s backwards; } /* Phones: the card follows the panel, as on home. */ @media (max-width: 760px) { .ax-season { position: relative; right: auto; bottom: auto; width: auto; margin: 16px 16px 0 8%; } } /* Entrance: the home hero's (site-motion.css keyframes): the copy rises in with the .07s stagger, the panel art fades in. */ .ax-page-hero-copy > * { animation: rise-in .8s var(--ease) backwards; } .ax-page-hero-copy > :nth-child(2) { animation-delay: .07s; } .ax-page-hero-copy > :nth-child(3) { animation-delay: .14s; } .ax-page-hero-panel::before, .ax-page-hero-copy::before { animation: page-in .9s ease backwards; } /* Phones (as the home hero): the panel art at its own ratio holds the kicker and title in its dark field; lede and buttons follow. */ @media (max-width: 760px) { .ax-page-hero { padding: 0; overflow: hidden; } .ax-page-hero-panel { margin: 0; } .ax-page-hero-panel::before { display: none; } .ax-page-hero-copy { position: relative; inset: auto; width: auto; display: grid; grid-template-columns: minmax(0, 1fr); padding: 16px 16px 26px; } .ax-page-hero-copy::before { content: ""; grid-area: 1 / 1; z-index: -1; align-self: start; aspect-ratio: 1338 / 564; background: url("kit/hero-panel-scene.webp") 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); } .ax-page-hero-panel[class*=" p-"] .ax-page-hero-copy::before { background-image: var(--ax-panel-art); } .ax-page-hero-title, .ax-page-hero-lede { left: 0; } .ax-page-hero-title { grid-area: 1 / 1; align-self: center; width: 41%; margin: 0 0 3% 13%; } .ax-page-hero .ax-kicker { margin-bottom: 6px; font-size: 12px; } .ax-page-hero h1 { font-size: clamp(22px, 7.4vw, 34px); overflow-wrap: anywhere; } /* Home on phones: the logo's letters are the banner's (1.2921 x the old .41 x .19283 of the copy, 100cqw - 32px); the art starts where the home lockup does (9%). */ .ax-page-hero-title:has(> .is-banner) { width: auto; margin-left: 9%; } .ax-page-hero h1.is-banner { justify-content: flex-start; } .ax-page-hero h1.is-banner img { height: calc(.14686 * (100cqw - 32px)); } .ax-page-hero-lede { margin-top: 14px; font-size: 15px; } .ax-page-hero-actions { flex-wrap: wrap; gap: 12px; margin-top: 18px; } .ax-page-hero-actions .ax-btn { flex: 1 1 240px; width: auto; height: 70px; padding: 0 84px 2px 46px; font-size: 21px; } } .ax-kicker { margin-bottom: 10px; color: var(--ax-red-2); font: 700 16px/1 var(--ax-font); letter-spacing: .04em; text-transform: uppercase; } /* ---------- Home (/) ---------- */ /* Everything sits in the centered column (user, 2026-10-12). Hero, strip and feature cards stack with no empty band between them. */ .ax-home-col { padding-bottom: 8px; } @media (max-width: 760px) { .ax-head h2 { font-size: 22px; white-space: nowrap; } .ax-head h2::after { left: 30%; right: -18px; } .ax-more { font-size: 14px; } } /* Arrow buttons (every carousel): the user's cut-corner prev/next pair from Ragebite Sheet 05 (kit/rb/arrow-*.webp), at native size with their own chevrons; the inline SVG glyph is hidden. */ .car-btn { top: 50%; width: 76px; height: 63px; aspect-ratio: auto; margin-top: -32px; background: url("kit/rb/arrow-prev.webp") center / contain no-repeat; transition: var(--ax-hover-t); } .car-next { width: 71px; height: 62px; background-image: url("kit/rb/arrow-next.webp"); } .car-btn svg { display: none; } .car-btn:hover, .car-btn:focus-visible { filter: var(--ax-hover-fx); scale: var(--ax-hover-scale); } .car-prev:hover, .car-prev:focus-visible { transform: translateX(-2px); } .car-next:hover, .car-next:focus-visible { transform: translateX(2px); } /* Dropdown kit (user, 2026-10-12): ONE design for every dropdown and disclosure on the site, cut from the user's Apex 04_Dropdowns_Side_Menus/04_Dropdown_Large_Red_Slash (static/kit/dd, x 44-348 of the art, reds recoloured to the site red, placeholder lines painted out): head.webp (the header bar, its chevron painted out), chev.webp (that chevron, alone), row.webp / row-on.webp (an option row with its radio ring / the selected row with its red dot), body.webp (a row with the ring and arrow painted out, for disclosure text) and foot.webp (the panel's slashed foot). Every panel is the art's own stack: head, rows or body, foot. Users of it: .ax-dd site.js builds a button + listbox over a native