/* Theme Name: EVERSPACE 2 Theme URI: https://everspace-game.com Author: ROCKFISH Games Author URI: https://rockfishgames.com Description: Official standalone WordPress theme for EVERSPACE 2. Covers homepage, blog, and all inner pages. Classic editor compatible. All content managed via Customizer. Version: 1.6.6 Requires at least: 5.8 Tested up to: 6.5 Requires PHP: 7.4 License: Proprietary — All Rights Reserved Text Domain: es2 */ /* * ============================================================================= * EVERSPACE 2 — style.css * ============================================================================= * * This is the main stylesheet for the EVERSPACE 2 WordPress theme. * It covers every visual aspect of the site — layout, typography, colours, * animations, and responsive behaviour. * * HOW THIS FILE IS ORGANISED: * Sections follow the page top-to-bottom, then inner pages, then utilities. * * CSS VARIABLES — global design tokens (colours, fonts, spacing) * RESET & BASE — browser reset, typography defaults, accessibility * LAYOUT UTILITIES — .container, section titles, section dividers * BUTTONS — .btn-primary, .btn-outline, .btn-arrow * HEADER & NAVIGATION — sticky header, desktop nav, mobile drawer * HERO — full-screen homepage hero with video/image bg * LATEST NEWS — news card grid on homepage * ABOUT THE GAME — features, main cards, DLC sub-section * MEDIA — screenshot carousel + video thumbnails * BUY THE GAME — tabbed store section with edition cards * COMMUNITY — platform cards grid * FOOTER — social icons, store row, badges, legal bar * UTILITIES — image placeholder, back-to-top, scroll reveal * PAGE CONTENT — generic WordPress pages (Privacy, Legal, etc.) * 404 PAGE — error page layout * RESPONSIVE — TABLET — @media max-width: 1024px * RESPONSIVE — MOBILE — @media max-width: 768px * [inner pages follow inside the responsive sections] * * DESIGN SYSTEM QUICK REFERENCE: * Primary accent: #C8922A (gold) * Backgrounds: #09090d → #0d0e11 → #111318 → #17191f (deep → card) * Fonts: Josefin Sans ES (display) / Lato (body) * Container: 1200px max-width, 40px horizontal padding * Header height: 80px (used for scroll-padding-top and offset calculations) * * IMPORTANT — DO NOT USE transition: all: * All transitions must list specific properties (e.g. color, background). * Using "transition: all" causes performance issues and animation conflicts. * * IMPORTANT — NO JAVASCRIPT HASH CORRECTION: * Anchor link offsets are handled entirely by scroll-padding-top on . * Do not add JS that modifies window.location.hash on scroll — it causes * blank page issues on browser back navigation. * * ============================================================================= */ /* ============================================================ CSS VARIABLES ============================================================ All global design tokens live here. Changing a value here affects every element that uses it across the entire site. HOW TO USE: - In CSS rules, reference with: var(--variable-name) - Example: color: var(--color-gold); RGB COMPANION VARIABLES: Some colours have a matching -rgb variable containing just the red, green, blue numbers (no rgba() wrapper). This allows building rgba() values with custom opacity anywhere: rgba(var(--color-gold-rgb), 0.3) Do not add opacity to the -rgb variables themselves. ============================================================ */ :root { /* ── Fonts ─────────────────────────────────────────────── Josefin Sans ES is the proprietary display font used in the game's own UI. Place font files in /assets/fonts/ and they load automatically (see functions.php section 2). Falls back to Google Fonts Josefin Sans until then. Lato is the body copy font — loaded from Google Fonts. */ --font-display: 'Josefin Sans ES', 'Josefin Sans', 'Arial Narrow', sans-serif; --font-body: 'Lato', sans-serif; /* ── Brand colours ─────────────────────────────────────── Gold is the primary accent — used for headings, borders, CTAs, and all interactive highlights. */ --color-gold: #C8922A; /* Primary accent — premium amber gold */ --color-gold-rgb: 200,146,42; /* RGB channels — for rgba() usage only */ --color-gold-light: #E0A83A; /* Hover / lighter gold states */ --color-gold-dim: #7a540f; /* Subtle gold borders and lines */ --color-gold-glow: rgba(var(--color-gold-rgb),0.10); /* Hover bg tint */ --color-gold-glow-bright:rgba(var(--color-gold-rgb),0.20); /* Stronger hover tint */ /* Purple is used as a subtle atmospheric colour in radial gradients layered over section backgrounds. */ --color-purple-deep: #171145; /* Deep navy-purple */ --color-purple-deep-rgb: 23,17,69; /* RGB channels — for rgba() gradient usage */ --color-purple-mid: #1e1660; /* Mid purple for accents */ /* ── Background depth system ───────────────────────────── The site uses four background levels to create depth. Each level is slightly lighter than the one below it. Sections alternate between bg-section and bg-alt. Cards/panels sit on top using bg-card. deep → section → alt → card (darkest to lightest) */ --color-bg-deep: #09090d; /* Deepest — body background, near black */ --color-bg-deep-rgb: 9,9,13; /* RGB channels — for rgba() overlay usage */ --color-bg-section: #0d0e11; /* Standard section background */ --color-bg-alt: #111318; /* Alternating section background */ --color-bg-card: #17191f; /* Cards, panels, elevated surfaces */ --color-bg-overlay: rgba(0,0,0,0.78); /* Dark overlay on bg images */ /* ── Text ────────────────────────────────────────────────*/ --color-text-primary: #F9F9F9; /* Main body text */ --color-text-muted: #888b9a; /* Secondary / caption text */ --color-text-white: #ffffff; /* Headings and high-contrast text */ /* ── Borders ───────────────────────────────────────────── Gold borders at two opacity levels. The subtle one (0.18) is used for card borders and dividers. The bright one (0.45) is used for interactive hover states. */ --color-border: rgba(var(--color-gold-rgb),0.18); --color-border-bright: rgba(var(--color-gold-rgb),0.45); /* ── Spacing & layout ──────────────────────────────────── --header-height is used in multiple places: - scroll-padding-top on (anchor link offset) - padding-top on inner page wrappers - position calculations for fixed elements Change it here and all those places update automatically. */ --section-padding: 100px 0; --container-width: 1200px; --container-padding: 0 40px; --header-height: 80px; /* ── Transitions ───────────────────────────────────────── Use these on hover states. Always list specific properties, never "transition: all" — it causes performance issues. */ --transition-fast: 0.2s ease; /* Hover colour/opacity changes */ --transition-med: 0.4s ease; /* Nav overlays, panel slides */ /* ── Shorthand aliases ─────────────────────────────────── Some inner page templates and the archive page use these shorter names. They point to the same values above. */ --bg-deep: var(--color-bg-deep); --bg-section: var(--color-bg-section); --bg-alt: var(--color-bg-alt); --bg-card: var(--color-bg-card); } /* ============================================================ RESET & BASE ============================================================ Normalises browser defaults and sets global typography. KEY DECISIONS: - box-sizing: border-box on everything — padding and borders are included in an element's total width/height. This makes layout maths predictable. - scroll-padding-top matches --header-height so anchor links (e.g. #section-hero) scroll to the correct position below the fixed header. This replaces any JS hash correction. - overflow-x: hidden on both html and body prevents horizontal scroll from absolutely-positioned elements near the edge. - -webkit-font-smoothing: antialiased makes text look crisper on macOS/iOS (renders thinner, more print-like strokes). ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; max-width: 100%; } /* ── Accessibility ─────────────────────────────────────────── .screen-reader-text — visually hidden but readable by screen readers. Used for labels, button descriptions, and other text that sighted users don't need to see. .skip-link — hidden until keyboard-focused. Lets keyboard and screen reader users jump straight to the main content without tabbing through the entire navigation on every page load. It slides in from above when focused (transform animation). focus-visible — shows a gold outline on keyboard focus but NOT on mouse click (unlike :focus which shows on both). Some interactive elements use box-shadow instead of outline for a softer look that fits the brand style. */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 2000; padding: 0.9rem 1.2rem; background: rgba(13,14,26,0.98); border: 1px solid var(--color-border-bright); color: var(--color-text-white); text-decoration: none; transform: translateY(-150%); /* Hidden above viewport by default */ transition: transform var(--transition-fast); } .skip-link:focus-visible { transform: translateY(0); } /* Slides into view on focus */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--color-gold-light); outline-offset: 3px; } /* These elements use box-shadow instead — outline would look wrong on the gold button, hamburger icon, and nav links */ .btn:focus-visible, .btn-buy-nav:focus-visible, #menu-toggle:focus-visible, #main-nav a:focus-visible, #mobile-nav a:focus-visible, .footer-social-icon:focus-visible, .hero-pause-btn:focus-visible, .dlc-lightbox button:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--color-gold-rgb),0.22); } html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); /* Offset anchor links below fixed header */ font-size: 16px; overflow-x: hidden; } body { font-family: var(--font-body); background-color: var(--color-bg-deep); color: var(--color-text-primary); line-height: 1.7; overflow-x: hidden; max-width: 100vw; -webkit-font-smoothing: antialiased; /* Crisper text on macOS/iOS */ } a { color: var(--color-gold); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-gold-light); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-text-white); line-height: 1.1; letter-spacing: 0.2em; text-transform: uppercase; } p { margin-bottom: 1.2em; } p:last-child { margin-bottom: 0; } /* ============================================================ LAYOUT UTILITIES ============================================================ Reusable classes shared across all page sections. .container — centres content and caps width at 1200px .section-title — the main heading inside each section .section-subtitle — smaller muted eyebrow text .section-header — wrapper that groups title + subtitle + divider .section-divider — the animated twin-line + diamond separator .btn-arrow — text link with animated underline and arrow ============================================================ */ .container { max-width: var(--container-width); margin: 0 auto; padding: var(--container-padding); } .section-title { font-size: clamp(1.8rem, 3vw, 2.6rem); /* Scales between viewport sizes */ font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 0.4em; color: var(--color-text-white); line-height: 1; text-align: center; } .section-subtitle { font-size: 0.85rem; color: var(--color-text-muted); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 1.5rem; margin-bottom: 2.5rem; font-family: var(--font-display); font-weight: 400; text-align: center; } /* Small label above the section heading -- e.g. "From ROCKFISH Games". Sits inside .section-header, above .section-title. */ .section-eyebrow { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); margin: 0 0 1.1rem; display: block; } .section-header { margin-bottom: 3.5rem; text-align: center; } /* ── Section Divider ───────────────────────────────────────── A decorative separator used between section headers and content. Consists of two fading lines (via ::before and ::after pseudo- elements) flanking a small animated diamond. The diamond uses two layered elements: - ::after = solid inner diamond (bounces in/out) - ::before = outer ring border (pulses at larger scale) Both are squares rotated 45° with transform: rotate(45deg). The .divider-no-pulse body class (set by Customizer toggle) disables animations for reduced motion preference. See body_class filter in functions.php section 10. */ .section-divider { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0.8rem 0 0; } .section-divider::before, .section-divider::after { content: ''; width: 50px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-gold-dim)); } .section-divider::after { background: linear-gradient(90deg, var(--color-gold-dim), transparent); } .section-divider-diamond { position: relative; width: 7px; height: 7px; flex-shrink: 0; overflow: visible; /* Outer ring extends beyond the 7px box */ } /* Outer ring — same base size as inner, scaled up 1.85x */ .section-divider-diamond::before { content: ''; position: absolute; inset: 0; border: 0.8px solid rgba(var(--color-gold-rgb),0.38); transform: rotate(45deg) scale(1.85); animation: divider-ring-pulse 3s ease-in-out infinite; } /* Inner solid diamond */ .section-divider-diamond::after { content: ''; position: absolute; inset: 0; background: var(--color-gold); transform: rotate(45deg); animation: divider-diamond-bounce 3s ease-in-out infinite; } @keyframes divider-diamond-bounce { 0%, 100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.15); } } @keyframes divider-ring-pulse { 0%, 100% { transform: rotate(45deg) scale(1.85); opacity: 0.38; } 50% { transform: rotate(45deg) scale(2.05); opacity: 0.6; } } /* Static fallback when .divider-no-pulse body class is active */ .divider-no-pulse .section-divider-diamond::before, .divider-no-pulse .section-divider-diamond::after { animation: none; } .divider-no-pulse .section-divider-diamond::after { transform: rotate(45deg) scale(1); } .divider-no-pulse .section-divider-diamond::before { transform: rotate(45deg) scale(1.85); opacity: 0.38; } /* Arrow CTA link */ .btn-arrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-gold); position: relative; padding-bottom: 2px; text-decoration: none; } .btn-arrow::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--color-gold); transition: width 0.35s ease; } .btn-arrow:hover { color: var(--color-gold-light); } .btn-arrow:hover::after { width: 100%; } .btn-arrow .arrow-icon { display: inline-block; transition: transform 0.25s ease; } .btn-arrow:hover .arrow-icon { transform: translateX(4px); } /* ============================================================ BUTTONS ============================================================ Three button styles used across the site: .btn — base class (shared padding, font, radius) .btn-primary — gold filled, used for primary CTAs .btn-outline — transparent with white border, secondary CTAs .btn-arrow — text link with animated underline + arrow icon .btn-buy-nav — compact gold button in the header nav The padding-top/bottom asymmetry (+1px/-1px) on .btn and .btn-buy-nav compensates for Josefin Sans ES's optical vertical offset so the text appears visually centred within the button. ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85em 2.2em; font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); text-decoration: none; border-radius: 2px; line-height: 1; white-space: nowrap; padding-top: calc(0.85em + 1px); padding-bottom: calc(0.85em - 1px); } .btn-primary { background: var(--color-gold); color: var(--color-bg-deep); border: 1px solid var(--color-gold); } .btn-primary:hover { background: var(--color-gold-light); color: var(--color-bg-deep); border-color: var(--color-gold-light); box-shadow: 0 4px 24px rgba(var(--color-gold-rgb),0.35); } .btn-outline { background: transparent; color: var(--color-text-primary); border: 1px solid rgba(249,249,249,0.3); } .btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); background: var(--color-gold-glow); } /* ============================================================ HEADER & NAVIGATION ============================================================ The site header is fixed at the top of the viewport on all pages. It starts transparent on the homepage (sitting over the hero) and transitions to a solid frosted-glass background once the user scrolls down. JavaScript in main.js adds the .scrolled class when the page scrolls past the hero. LAYOUT: 3-column CSS Grid Col 1: Logo (left-aligned) grid-column: 1 Col 2: Nav links (centred) grid-column: 2 Col 3: CTA button / hamburger grid-column: 3 This explicit placement ensures the nav stays centred even when the logo or CTA is absent. Z-INDEX LAYERS (header area): 1000 — site header 1099 — mobile overlay (dim backdrop) 1100 — mobile nav drawer + hamburger button 2000 — skip link (must be above everything) MOBILE: Below 768px the desktop nav is hidden and replaced with a slide-in drawer (#mobile-nav) triggered by the hamburger button (#menu-toggle). The overlay (#mobile-overlay) dims the page behind the drawer and closes it on click. ============================================================ */ #site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--header-height); display: flex; align-items: center; transition: background var(--transition-med), box-shadow var(--transition-med); background: transparent; } #site-header.scrolled { background: rgba(13,14,26,0.97); box-shadow: 0 1px 0 var(--color-border), 0 4px 30px rgba(0,0,0,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Single post — always show solid header, no transparent phase */ .single-post #site-header { background: rgba(13,14,26,0.97); box-shadow: 0 1px 0 var(--color-border), 0 4px 30px rgba(0,0,0,0.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } #site-header .container { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; } /* Explicit column placement — nav stays in col 2 even when logo is absent */ #site-logo { grid-column: 1; justify-self: start; } #main-nav { grid-column: 2; justify-self: center; } .nav-cta { grid-column: 3; justify-self: end; } #menu-toggle { grid-column: 3; justify-self: end; } /* Logo — left */ #site-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; } #site-logo img { height: 44px; width: auto; max-width: 180px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(var(--color-gold-rgb),0.3)); } #site-logo .logo-text { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-text-white); } #site-logo .logo-text span { color: var(--color-gold); } /* Navigation — center */ #main-nav ul { display: flex; gap: 2rem; align-items: center; flex-wrap: nowrap; } #main-nav ul li { position: relative; } #main-nav ul li > a { font-family: var(--font-display); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); padding: 0.4em 0; position: relative; transition: color var(--transition-fast); display: block; white-space: nowrap; } #main-nav ul li > a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--color-gold); transition: width var(--transition-med); } #main-nav ul li > a:hover, #main-nav ul li > a.active { color: var(--color-gold); } #main-nav ul li > a:hover::after, #main-nav ul li > a.active::after { width: 100%; } /* Dropdown */ #main-nav ul li:hover > .sub-menu, #main-nav ul li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } #main-nav .sub-menu { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 240px; background: rgba(13,14,26,0.98); border: 1px solid var(--color-border); border-top: 2px solid var(--color-gold); opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast); z-index: 10; } #main-nav .sub-menu li a { display: block; padding: 0.65rem 1.2rem; border-bottom: 1px solid rgba(var(--color-gold-rgb),0.08); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--color-text-muted); } #main-nav .sub-menu li:last-child a { border-bottom: none; } #main-nav .sub-menu li a:hover { background: var(--color-gold-glow); color: var(--color-gold); } #main-nav .sub-menu li a::after { display: none; } /* Buy Now CTA — right */ .nav-cta { flex-shrink: 0; } /* Next Chapter badge pill — gold, sits inline after the nav label. font-size and padding kept small so it doesn't dominate the nav. border-radius: 3px matches the theme's standard pill shape. */ .nav-badge { display: inline-flex; align-items: center; margin-left: 7px; padding: 2px 7px; font-family: var(--font-display); font-size: 0.55rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-bg-deep); background: var(--color-gold); border-radius: 3px; vertical-align: middle; position: relative; top: -1px; /* Never wrap the badge text onto its own line */ white-space: nowrap; flex-shrink: 0; } /* Prevent the nav item containing a badge from wrapping to two lines */ #main-nav ul li > a:has(.nav-badge) { white-space: nowrap; display: inline-flex; align-items: center; } /* Mobile — flex row so badge sits inline with the label, never wraps */ .mobile-nav-list .nav-badge { font-size: 0.6rem; padding: 2px 8px; top: 0; flex-shrink: 0; } #mobile-nav a:has(.nav-badge) { display: flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; } .btn-buy-nav { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-bg-deep); background: var(--color-gold); border: 1px solid var(--color-gold); padding: 0.6em 1.6em; padding-top: calc(0.6em + 1px); padding-bottom: calc(0.6em - 1px); border-radius: 2px; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; line-height: 1; white-space: nowrap; } .btn-buy-nav:hover { background: var(--color-gold-light); color: var(--color-bg-deep); border-color: var(--color-gold-light); box-shadow: 0 4px 24px rgba(var(--color-gold-rgb),0.35); } /* Hamburger toggle */ #menu-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 1px solid transparent; cursor: pointer; padding: 8px; z-index: 1100; } #menu-toggle span { display: block; width: 26px; height: 2px; background: var(--color-gold); transition: transform var(--transition-fast), opacity var(--transition-fast); transform-origin: center; } #menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #menu-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } #menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile nav drawer */ #mobile-nav { position: fixed; top: 0; right: 0; width: min(300px, 85vw); height: 100vh; background: rgba(13,14,26,0.99); border-left: 1px solid var(--color-border); z-index: 1100; padding: 6rem 2rem 3rem; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); display: flex; flex-direction: column; overflow-y: auto; } #mobile-nav.open { transform: translateX(0); } #mobile-nav a { font-family: var(--font-display); font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); padding: 0.85rem 0; border-bottom: 1px solid rgba(var(--color-gold-rgb),0.1); display: block; transition: color var(--transition-fast); text-decoration: none; } #mobile-nav a:hover { color: var(--color-gold); } #mobile-nav .mobile-cta { margin-top: 2rem; display: block; background: var(--color-gold); color: var(--color-bg-deep); padding: 0.85em 2em; font-weight: 700; text-align: center; border-radius: 2px; font-size: 0.8rem; letter-spacing: 0.2em; border-bottom: none; } #mobile-nav .mobile-cta:hover { background: var(--color-gold-light); color: var(--color-bg-deep); } /* Mobile overlay */ #mobile-overlay { position: fixed; inset: 0; background: rgba(13,14,26,0.6); z-index: 1099; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; } #mobile-overlay.open { opacity: 1; visibility: visible; } /* ============================================================ HERO ============================================================ The full-screen opening section of the homepage. BACKGROUND LAYERING (back to front): 1. Background image (CSS background-image) 2. Looping