/* * Heartland Expedition — website styles * * The palette is lifted directly from the game so the site and the app read as one thing: * values come from MainMenuScene.swift (parchment, logo banner) and EventBannerRenderer.swift * (HUD card, gold stroke, mint body text). */ :root { --bg: #0a0e0e; /* MainMenuScene backgroundColor */ --bg-deep: #050809; /* map viewport backdrop */ --card: #0f1414; /* event banner card fill */ --parchment: #b89e6b; /* menu paper */ --parchment-ink: #21140a; --brown: #2e1c0e; /* logo banner fill */ --brown-line: #382414; --gold: #f5bd57; /* route / stroke gold */ --gold-bright: #fad66b; /* logo "Heartland" */ --cream: #f0e8b8; /* logo "EXPEDITION" */ --mint: #d4f0de; /* banner body text */ --green: #42855c; /* menu buttons */ --red: #c7472e; /* logo flag */ --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --serif: Georgia, "Times New Roman", serif; --measure: 62ch; --radius: 10px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; position: relative; /* containing block for .lang-switch */ background: var(--bg); color: var(--mint); font-family: var(--mono); font-size: 16px; line-height: 1.65; /* Faint sand-coloured glow behind the fold, echoing the desert map. */ background-image: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(245, 189, 87, 0.10), transparent 70%); background-repeat: no-repeat; } /* ---- language toggle -------------------------------------------------- */ /* Both languages ship in the markup; the attribute picks one. Without JS the document still renders exactly one language (the default). */ [data-lang="en"] [lang="de"] { display: none; } [data-lang="de"] [lang="en"] { display: none; } /* Absolute, not fixed: a pinned switch sits over body copy once the page scrolls, and on narrow viewports the text runs right under it. Language is a set-once choice (it persists), so letting it scroll away costs nothing. */ .lang-switch { position: absolute; top: 12px; right: max(12px, calc((100vw - 1080px) / 2)); z-index: 10; display: flex; gap: 2px; padding: 3px; background: rgba(15, 20, 20, 0.9); border: 1.5px solid var(--gold); border-radius: 6px; backdrop-filter: blur(6px); } .lang-switch button { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 5px 10px; color: var(--mint); background: transparent; border: 0; border-radius: 4px; cursor: pointer; } .lang-switch button[aria-pressed="true"] { background: var(--gold); color: var(--parchment-ink); } .lang-switch button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* ---- layout ----------------------------------------------------------- */ .wrap { width: min(100% - 2.5rem, 1080px); margin-inline: auto; } .narrow { max-width: var(--measure); } section { padding-block: clamp(3rem, 8vw, 5.5rem); } /* ---- logo ------------------------------------------------------------- */ /* Mirrors the in-game title plate: gold-bordered brown banner, serif wordmark over a spaced monospace subtitle. */ .logo { display: inline-block; padding: 0.9rem 2.2rem 1rem; background: var(--brown); border: 3px solid var(--gold); border-radius: var(--radius); text-align: center; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35), 0 14px 40px rgba(0, 0, 0, 0.5); } .logo b { display: block; font-family: var(--serif); font-weight: 700; font-size: clamp(2rem, 7vw, 3.4rem); line-height: 1; color: var(--gold-bright); text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45); } .logo span { display: block; margin-top: 0.15em; font-size: clamp(0.9rem, 2.6vw, 1.4rem); font-weight: 700; letter-spacing: 0.22em; color: var(--cream); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45); } /* ---- hero ------------------------------------------------------------- */ .hero { text-align: center; padding-top: clamp(3.5rem, 10vw, 6rem); } .hero .tagline { margin: 1.8rem auto 0; max-width: 34ch; font-size: clamp(1.05rem, 2.6vw, 1.3rem); color: var(--gold); } .hero .lede { margin: 1.1rem auto 0; max-width: 56ch; color: var(--mint); opacity: 0.85; } .badge { display: inline-block; margin-top: 2.2rem; padding: 0.7rem 1.5rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--parchment-ink); background: var(--gold); border-radius: 6px; } .badge-link { text-decoration: none; transition: background-color 0.15s, transform 0.15s; } .badge-link:hover, .badge-link:focus-visible { background: var(--gold-bright); color: var(--parchment-ink); transform: translateY(-1px); } .badge-note { max-width: 46ch; margin: 0.9rem auto 0; font-size: 0.78rem; line-height: 1.5; color: var(--mint); opacity: 0.65; } /* ---- stats ------------------------------------------------------------ */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-top: 3.5rem; padding: 0; list-style: none; } .stats li { padding: 1.2rem 0.75rem; background: var(--card); border: 2px solid rgba(245, 189, 87, 0.4); border-radius: var(--radius); } .stats strong { display: block; font-size: 1.9rem; line-height: 1.1; color: var(--gold-bright); } .stats small { display: block; margin-top: 0.35rem; font-size: 0.8rem; letter-spacing: 0.05em; opacity: 0.8; overflow-wrap: break-word; /* tiles are narrow in the 2-up phone grid */ } /* ---- headings --------------------------------------------------------- */ h1 { margin: 0; } /* German compounds like DATENSCHUTZERKLÄRUNG are a single 20-character word: at a 1.5rem floor it overflows a phone-width card and gets clipped. Lower floor plus break-word keeps every heading inside its container. */ .page-title { margin: 0 0 0.5rem; font-size: clamp(1.2rem, 5.5vw, 1.9rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright); overflow-wrap: break-word; } h2 { margin: 0 0 1.5rem; font-size: clamp(1.15rem, 4.5vw, 1.9rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--gold-bright); overflow-wrap: break-word; } h3 { margin: 0 0 0.4rem; font-size: 1rem; letter-spacing: 0.04em; color: var(--gold); } /* ---- shots ------------------------------------------------------------ */ .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; } .shots figure { margin: 0; } .shots img { display: block; width: 100%; height: auto; border: 2px solid rgba(245, 189, 87, 0.45); border-radius: var(--radius); background: var(--bg-deep); } .shots figcaption { margin-top: 0.6rem; font-size: 0.82rem; text-align: center; opacity: 0.75; } /* ---- feature list ----------------------------------------------------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem 2rem; padding: 0; list-style: none; } .features li { padding-left: 1.5rem; border-left: 3px solid var(--green); } .features p { margin: 0; font-size: 0.92rem; opacity: 0.85; } /* ---- paper (legal / support pages) ------------------------------------ */ .paper { margin-block: 2.5rem; padding: clamp(1.5rem, 5vw, 3rem); background: var(--card); border: 2px solid rgba(245, 189, 87, 0.45); border-radius: var(--radius); } .paper h2:not(:first-child) { margin-top: 2.5rem; } .paper ul { padding-left: 1.2rem; } .paper li { margin-bottom: 0.4rem; } .callout { margin: 1.5rem 0; padding: 1rem 1.25rem; background: rgba(66, 133, 92, 0.16); border-left: 4px solid var(--green); border-radius: 4px; } .callout p { margin: 0; } .meta { font-size: 0.85rem; opacity: 0.7; } /* ---- links ------------------------------------------------------------ */ a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--gold-bright); } .backlink { display: inline-block; margin-bottom: 1.5rem; font-size: 0.85rem; } /* ---- footer ----------------------------------------------------------- */ footer { padding-block: 3rem; border-top: 2px solid rgba(245, 189, 87, 0.25); font-size: 0.85rem; } .footer-inner { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between; } .footer-inner nav { display: flex; flex-wrap: wrap; gap: 1.5rem; } footer .meta { margin: 0; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }