/* ============================================ TehoxMaps redesign — mockup CSS Bootstrap 5.3 + FontAwesome 6 + custom theme Light/dark via [data-theme] on ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&family=Prociono&display=swap'); :root { /* Fixed regardless of theme: text placed on top of the orange accent. The accent itself is always bright/saturated in both themes, so this always needs a dark ink, never white (see contrast note on the button rules). */ --ink-on-accent: #14170f; } :root, :root[data-theme="light"] { --bg: #ffffff; --bg-alt: #f6f5f1; --surface: #ffffff; --text: #201f1a; --text-muted: #6d6a60; --border: #e9e6dd; --accent-orange: #e7513b; --accent-orange-hover: #f16a53; --accent-green: #6c841a; --accent-green-dark: #4c5e12; --hero-grad-start: #7d952b; --hero-grad-end: #33400f; --shadow: 0 1px 2px rgba(20, 20, 10, 0.06); --radius: 16px; --radius-sm: 10px; color-scheme: light; } :root[data-theme="dark"] { --bg: #14170f; --bg-alt: #1a1e13; --surface: #1e2317; --text: #edf0e4; --text-muted: #a6ac99; --border: #2b3122; --accent-orange: #ff6b52; --accent-orange-hover: #ff8770; --accent-green: #93b53c; --accent-green-dark: #6c841a; --hero-grad-start: #3a4713; --hero-grad-end: #14170f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14170f; --bg-alt: #1a1e13; --surface: #1e2317; --text: #edf0e4; --text-muted: #a6ac99; --border: #2b3122; --accent-orange: #ff6b52; --accent-orange-hover: #ff8770; --accent-green: #93b53c; --accent-green-dark: #6c841a; --hero-grad-start: #3a4713; --hero-grad-end: #14170f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); color-scheme: dark; } } * { transition: background-color .2s ease, border-color .2s ease, color .2s ease; } .text-muted { color: var(--text-muted) !important; } .text-body { color: var(--text) !important; } html, body { background: var(--bg); color: var(--text); overflow-x: hidden; } body { font-family: 'Work Sans', sans-serif; } .font-display { font-family: 'Prociono', serif; } a { color: var(--accent-orange); text-decoration: none; } a:hover { color: var(--accent-orange-hover); } /* NAVBAR ------------------------------------------------- */ .navbar-tehox { background: var(--bg); border-bottom: 1px solid var(--border); /* min-height, not height: a fixed height clipped the expanded mobile menu, which then overflowed transparently onto the hero below it. */ min-height: 68px; } .navbar-tehox .navbar-collapse { /* Opaque on the mobile dropdown too, so the open menu doesn't bleed through onto whatever is behind/below it. */ background: var(--bg); } .navbar-tehox .navbar-toggler { /* Bootstrap's default renders under the 44x44pt touch-target minimum. */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .navbar-tehox .navbar-brand img { height: 34px; width: auto; } .logo-dark { display: none; } :root[data-theme="dark"] .logo-dark { display: inline-block; } :root[data-theme="dark"] .logo-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-dark { display: inline-block; } :root:not([data-theme="light"]) .logo-light { display: none; } } .navbar-tehox .nav-link { color: var(--text); font-weight: 500; font-size: .95rem; } .navbar-tehox .nav-link:hover { color: var(--accent-orange); } .navbar-tehox .nav-link.active { color: var(--accent-green); font-weight: 600; } .btn-theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-alt); color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .btn-theme-toggle:hover { border-color: var(--accent-green); color: var(--accent-green); } /* HERO ---------------------------------------------------- */ .hero-tehox { /* Full-bleed: break out of the parent .container so the band runs edge to edge instead of reading as a rounded card floating mid-page. The inner .container (see markup) re-aligns the actual content to the same left/right bounds as the rest of the page. */ width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -1.5rem; /* flush against the navbar, cancels the page container's py-4 top padding */ background: linear-gradient(135deg, var(--hero-grad-start), var(--hero-grad-end)); padding: 3.5rem 0; color: #fdfdf8; } .hero-tehox h1 { font-weight: 700; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; max-width: 18ch; } .hero-tehox p { color: rgba(253, 253, 248, 0.85); max-width: 52ch; font-size: 1.05rem; } .hero-tehox .hero-stats { color: rgba(253, 253, 248, 0.65); font-size: .9rem; } .hero-tehox .hero-panel { position: relative; isolation: isolate; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3 / 4; background: rgba(0,0,0,0.15); max-width: 320px; margin-left: auto; } .hero-tehox .hero-panel img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.8); transform-origin: center; filter: grayscale(1) contrast(1.05); } .hero-tehox .hero-panel-tint { position: absolute; inset: 0; background: var(--accent-green); filter: saturate(0.5); mix-blend-mode: color; pointer-events: none; } .btn-social { border-radius: 999px; border: 1px solid rgba(253, 253, 248, 0.35); color: #fdfdf8; background: rgba(253, 253, 248, 0.08); padding: .45rem 1rem; font-size: .9rem; font-weight: 500; } .btn-social:hover { background: rgba(253, 253, 248, 0.18); color: #fff; } /* CTA -------------------------------------------------------- */ .btn-patreon-cta { background: var(--accent-orange); border: none; /* Ember Signal is bright/saturated in both themes; white text fails WCAG AA here (as low as 2.35:1 in dark mode). Dark ink clears 4.5:1 in every base/hover x light/dark combination. */ color: var(--ink-on-accent); border-radius: 999px; font-weight: 600; font-size: .85rem; padding: .4rem 1rem; } .btn-patreon-cta:hover { background: var(--accent-orange-hover); color: var(--ink-on-accent); } .btn-outline-tehox { border-radius: 999px; border: 1px solid var(--border); color: var(--text); font-weight: 600; padding: .6rem 1.4rem; background: var(--surface); } .btn-outline-tehox:hover { border-color: var(--accent-green); color: var(--accent-green); } .btn-patreon-nav { background: var(--accent-orange); border: none; color: var(--ink-on-accent); border-radius: 999px; font-weight: 600; font-size: .9rem; padding: .5rem 1.1rem; display: inline-flex; align-items: center; gap: .4rem; } .btn-patreon-nav:hover { background: var(--accent-orange-hover); color: var(--ink-on-accent); } /* SECTION LABELS ------------------------------------------- */ .section-title { font-weight: 700; font-size: 1.3rem; color: var(--text); } .section-title a { color: var(--text-muted); font-size: .95rem; font-weight: 500; } .section-title a:hover { color: var(--accent-orange); } /* MAP CARD ---------------------------------------------------- */ .map-card { display: block; height: 100%; } .map-card .thumb { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; background: var(--bg-alt); position: relative; } .map-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.16,1,.3,1); } .map-card:hover .thumb img { transform: scale(1.04); } .map-card .pack-badge { position: absolute; top: .6rem; left: .6rem; background: rgba(20, 20, 10, 0.55); color: #fff; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; backdrop-filter: blur(4px); } .map-card .title { color: var(--text); font-weight: 600; font-size: 1rem; margin-top: .8rem; } .map-card:hover .title { color: var(--accent-orange); } .map-card .desc { color: var(--text-muted); font-size: .87rem; line-height: 1.4; } .map-card .meta { color: var(--text-muted); font-size: .82rem; display: flex; align-items: center; gap: .9rem; margin-top: .5rem; } .map-card .meta i { font-size: .8rem; } .tag-pill { display: inline-block; font-size: .75rem; font-weight: 500; color: var(--accent-green); background: var(--bg-alt); border: 1px solid var(--border); border-radius: 999px; padding: .18rem .65rem; margin: .15rem .3rem .15rem 0; } .tag-pill.active { background: var(--accent-green); border-color: var(--accent-green); color: #fff; } .tag-pill:hover { border-color: var(--accent-green); color: var(--accent-green); } /* FEATURED (latest map) ---------------------------------------- */ .featured-map .thumb { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 4; max-width: 380px; } .featured-map .thumb img { width: 100%; height: 100%; object-fit: cover; } /* MAP DETAIL --------------------------------------------------- */ .map-detail-thumb { border-radius: var(--radius); overflow: hidden; max-width: 440px; box-shadow: var(--shadow); } .map-detail-thumb img { width: 100%; height: auto; display: block; } /* FOOTER --------------------------------------------------- */ footer.site-footer { border-top: 1px solid var(--border); color: var(--text-muted); font-size: .85rem; } footer.site-footer a { color: var(--text-muted); } footer.site-footer a:hover { color: var(--accent-orange); } /* Backgrounds */ .bg-alt-section { background: var(--bg-alt); border-radius: var(--radius); } /* ADMIN TABLE / FORMS / MODAL / PAGINATION overrides ------------- */ .admin-table { background: transparent; color: var(--text); } .admin-table > :not(caption) > * > * { background: transparent; color: var(--text); border-color: var(--border); } .admin-table tbody tr:hover > * { background: var(--surface); } .form-control, .form-select { background: var(--surface); color: var(--text); border-color: var(--border); } .form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--accent-green); box-shadow: 0 0 0 .2rem rgba(108, 132, 26, 0.15); } .form-control::placeholder { color: var(--text-muted); opacity: .7; } :root[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } } .pagination .page-link { background: var(--surface); border-color: var(--border); color: var(--text); } .pagination .page-link:hover { color: var(--accent-orange); } .pagination .page-item.active .page-link { background: var(--accent-green); border-color: var(--accent-green); color: #fff; } .pagination .page-item.disabled .page-link { background: transparent; color: var(--text-muted); }