/* ============================================================================= HauntedHouseLocator.com — dark Halloween theme Layered on top of Bootstrap 5 (loaded via CDN in inc/header.php). Bootstrap is told to use its dark theme via data-bs-theme="dark" on ; the variables below override Bootstrap's defaults with our orange palette. ============================================================================= */ /* ----------------------------------------------------------------------------- Design tokens ----------------------------------------------------------------------------- */ :root, [data-bs-theme="dark"] { /* Background layers */ --hhl-bg: #0a0a0c; --hhl-surface: #14141a; --hhl-surface-2: #1e1e26; --hhl-border: #2a2a35; /* Brand */ --hhl-orange: #ec6b1e; --hhl-orange-hover: #d05a14; --hhl-orange-soft: rgba(236, 107, 30, 0.15); --hhl-yellow: #f4d03f; --hhl-yellow-warm: #e8b923; /* Text */ --hhl-text: #e6e6ec; --hhl-text-muted: #8a8a96; --hhl-text-soft: #b0b0bb; /* Override Bootstrap variables so the framework matches the theme */ --bs-body-bg: var(--hhl-bg); --bs-body-color: var(--hhl-text); --bs-border-color: var(--hhl-border); --bs-primary: var(--hhl-orange); --bs-primary-rgb: 236, 107, 30; --bs-link-color: var(--hhl-orange); --bs-link-hover-color: var(--hhl-orange-hover); } /* ----------------------------------------------------------------------------- Typography Rye — saloon/western display, closest free match to the comp's headlines Inter — clean modern sans for body copy ----------------------------------------------------------------------------- */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-weight: 400; background-color: var(--hhl-bg); color: var(--hhl-text); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, .hhl-display { font-family: 'Rye', 'Bowlby One', Georgia, serif; font-weight: 400; letter-spacing: 0.02em; color: var(--hhl-yellow); text-transform: uppercase; } h4, h5, h6 { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--hhl-text); } a { text-decoration: none; transition: color 120ms ease; } a:hover { text-decoration: underline; } .hhl-eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 600; color: var(--hhl-orange); } /* ----------------------------------------------------------------------------- Navbar ----------------------------------------------------------------------------- */ .hhl-navbar { background-color: rgba(10, 10, 12, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hhl-border); padding-top: 0.6rem; padding-bottom: 0.6rem; } .hhl-navbar .navbar-brand img { height: 44px; width: auto; } .hhl-navbar .nav-link { color: var(--hhl-text-soft); font-weight: 500; padding-left: 1rem; padding-right: 1rem; } .hhl-navbar .nav-link:hover, .hhl-navbar .nav-link:focus, .hhl-navbar .nav-link.active { color: var(--hhl-orange); } /* Push page content below the fixed navbar */ .hhl-main { padding-top: 5.5rem; min-height: calc(100vh - 220px); } /* ----------------------------------------------------------------------------- Buttons ----------------------------------------------------------------------------- */ .btn-hhl-primary { background-color: var(--hhl-orange); border: 1px solid var(--hhl-orange); color: #ffffff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 1.25rem; border-radius: 4px; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .btn-hhl-primary:hover, .btn-hhl-primary:focus { background-color: var(--hhl-orange-hover); border-color: var(--hhl-orange-hover); color: #ffffff; text-decoration: none; } .btn-hhl-outline { background-color: transparent; border: 1px solid var(--hhl-orange); color: var(--hhl-orange); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.55rem 1.25rem; border-radius: 4px; } .btn-hhl-outline:hover, .btn-hhl-outline:focus { background-color: var(--hhl-orange); color: #ffffff; text-decoration: none; } /* ----------------------------------------------------------------------------- Cards / surfaces ----------------------------------------------------------------------------- */ .hhl-card { background-color: var(--hhl-surface); border: 1px solid var(--hhl-border); border-radius: 6px; padding: 1.5rem; } .hhl-card a { color: var(--hhl-orange); } .hhl-card a:hover { color: var(--hhl-orange-hover); } /* ----------------------------------------------------------------------------- Sections ----------------------------------------------------------------------------- */ .hhl-section { padding-top: 3rem; padding-bottom: 3rem; } .hhl-section-heading { text-align: center; margin-bottom: 2rem; } .hhl-section-heading h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); } /* ----------------------------------------------------------------------------- Sidenav (interior pages keep a sidebar listing) ----------------------------------------------------------------------------- */ .hhl-sidenav { background-color: var(--hhl-surface); border: 1px solid var(--hhl-border); border-radius: 6px; padding: 1.25rem; } .hhl-sidenav .sidenav-title { font-family: 'Rye', serif; color: var(--hhl-yellow); font-size: 1.1rem; margin-bottom: 0.75rem; } .hhl-sidenav a { display: block; color: var(--hhl-text-soft); padding: 0.25rem 0; } .hhl-sidenav a:hover { color: var(--hhl-orange); text-decoration: none; } /* ----------------------------------------------------------------------------- Footer ----------------------------------------------------------------------------- */ .hhl-footer { background-color: #060608; border-top: 1px solid var(--hhl-border); color: var(--hhl-text-soft); padding-top: 2.5rem; padding-bottom: 1.5rem; margin-top: 4rem; } .hhl-footer a { color: var(--hhl-text-soft); } .hhl-footer a:hover { color: var(--hhl-orange); } .hhl-footer .footer-brand img { height: 50px; margin-bottom: 0.75rem; } .hhl-footer .footer-copyright { font-size: 0.85rem; color: var(--hhl-text-muted); border-top: 1px solid var(--hhl-border); padding-top: 1rem; margin-top: 2rem; text-align: center; } /* ----------------------------------------------------------------------------- Breadcrumb / crumb path ----------------------------------------------------------------------------- */ .hhl-crumb { color: var(--hhl-text-muted); font-size: 0.875rem; padding: 0.75rem 0 1.25rem; } .hhl-crumb a { color: var(--hhl-text-soft); } .hhl-crumb a:hover { color: var(--hhl-orange); } /* ----------------------------------------------------------------------------- Content body helpers ----------------------------------------------------------------------------- */ .hhl-prose p, .hhl-prose li { color: var(--hhl-text-soft); line-height: 1.65; } .hhl-prose strong { color: var(--hhl-text); } /* ----------------------------------------------------------------------------- Legacy element shims — preserve old markup that still appears in some page templates (.clear divs, .contenthr separators, etc.) so the chrome migration doesn't visually break content we haven't touched yet. ----------------------------------------------------------------------------- */ .clear { clear: both; } .vert15 { height: 15px; } .vert30 { height: 30px; } .contenthr { border-top: 1px solid var(--hhl-border); margin: 1.25rem 0; height: 0; } .headingsub { margin-bottom: 1.5rem; } .headingsub h2, .headingsub h3, .headingsub h4, .headingsub h5 { color: var(--hhl-yellow); font-family: 'Rye', serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.5rem; } .bullet { padding-left: 1.25rem; } .bullet li { margin-bottom: 0.5rem; } .makelist_wide { list-style: none; padding: 0; columns: 2; column-gap: 1.5rem; } .makelist_wide li { margin-bottom: 0.4rem; } @media (max-width: 575.98px) { .makelist_wide { columns: 1; } } /* ----------------------------------------------------------------------------- Form controls — keep them on theme without per-input boilerplate ----------------------------------------------------------------------------- */ .hhl-form .form-control, .hhl-form .form-select { background-color: var(--hhl-surface); border-color: var(--hhl-border); color: var(--hhl-text); } .hhl-form .form-control:focus, .hhl-form .form-select:focus { background-color: var(--hhl-surface); border-color: var(--hhl-orange); box-shadow: 0 0 0 0.2rem var(--hhl-orange-soft); color: var(--hhl-text); } .hhl-form label { color: var(--hhl-text-soft); font-weight: 500; margin-top: 0.75rem; } .MsgSent, .MsgError { border-radius: 6px; padding: 1.25rem; margin-bottom: 1.5rem; } .MsgSent { background-color: rgba(40, 167, 69, 0.1); border: 1px solid rgba(40, 167, 69, 0.35); } .MsgError { background-color: rgba(220, 53, 69, 0.1); border: 1px solid rgba(220, 53, 69, 0.35); } /* ============================================================================= Homepage sections (matches comps/Haunted-House-Locator.png) ============================================================================= */ /* ----------------------------------------------------------------------------- Hero — dark map background with search form overlay ----------------------------------------------------------------------------- */ .hhl-hero { background-color: #0a0a0c; background-image: linear-gradient(rgba(10, 10, 12, 0.45), rgba(10, 10, 12, 0.75)), url('/images/v2/Hero-Background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; padding: 4.5rem 0 5rem; text-align: center; /* Visually flush with the fixed navbar above */ margin-top: -5.5rem; padding-top: 9rem; } .hhl-hero .hero-eyebrow { color: var(--hhl-yellow); font-family: 'Rye', serif; font-size: clamp(1.1rem, 2vw, 1.4rem); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .hhl-hero h1 { font-family: 'Rye', serif; font-size: clamp(2.3rem, 6.5vw, 4.6rem); line-height: 1.05; color: var(--hhl-yellow); margin-bottom: 1.25rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75); } .hhl-hero p.lead { color: var(--hhl-text); font-size: 1.05rem; max-width: 680px; margin-left: auto; margin-right: auto; } .hhl-hero-search { max-width: 580px; margin: 2rem auto 0; display: flex; gap: 0.5rem; flex-wrap: wrap; } .hhl-hero-search input[type="text"], .hhl-hero-search input[type="search"] { flex: 1 1 220px; min-width: 0; background-color: rgba(255, 255, 255, 0.95); border: 1px solid var(--hhl-border); color: #1a1a1a; padding: 0.7rem 1rem; border-radius: 4px; font-size: 1rem; } .hhl-hero-search input::placeholder { color: #8a8a96; } .hhl-hero-search .btn-hhl-primary { padding: 0.7rem 1.75rem; font-size: 0.95rem; } /* ----------------------------------------------------------------------------- Category tiles — full-bleed dark photo cards with label overlay ----------------------------------------------------------------------------- */ .hhl-categories { padding: 2.5rem 0 1rem; background-color: var(--hhl-bg); } .category-card { position: relative; display: block; aspect-ratio: 3 / 4; background-color: var(--hhl-surface-2); background-size: cover; background-position: center; border-radius: 8px; overflow: hidden; text-decoration: none; color: #fff; transition: transform 200ms ease, box-shadow 200ms ease; border: 1px solid var(--hhl-border); } .category-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.9) 100%); } .category-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6); text-decoration: none; color: #fff; } .category-card .label { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 2; text-align: center; font-family: 'Rye', serif; font-size: clamp(1.15rem, 2vw, 1.6rem); color: var(--hhl-yellow); text-transform: uppercase; letter-spacing: 0.04em; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85); } /* ----------------------------------------------------------------------------- Why HHL — left copy, right 2x2 icon grid ----------------------------------------------------------------------------- */ .hhl-why { padding: 4rem 0; background-color: var(--hhl-surface); border-top: 1px solid var(--hhl-border); border-bottom: 1px solid var(--hhl-border); } .hhl-why h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .hhl-why .icon-tile { background-color: var(--hhl-surface-2); border: 1px solid var(--hhl-border); border-radius: 6px; padding: 1.25rem 0.75rem; text-align: center; height: 100%; } .hhl-why .icon-tile img { height: 48px; width: auto; margin-bottom: 0.6rem; } .hhl-why .icon-tile .tile-label { color: var(--hhl-text); font-weight: 600; font-size: 0.92rem; line-height: 1.2; } /* ----------------------------------------------------------------------------- Featured haunts — grid of photo cards with name+meta overlay ----------------------------------------------------------------------------- */ .hhl-featured { padding: 4rem 0; background-color: var(--hhl-bg); } .haunt-card { position: relative; display: block; aspect-ratio: 3 / 4; background-color: var(--hhl-surface-2); background-size: cover; background-position: center; border-radius: 6px; overflow: hidden; text-decoration: none; border: 1px solid var(--hhl-border); transition: transform 200ms ease, box-shadow 200ms ease; } .haunt-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 35%, rgba(0, 0, 0, 0.55) 65%, rgba(0, 0, 0, 0.95) 100%); } .haunt-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6); } .haunt-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.85rem 1rem 1rem; z-index: 2; color: #fff; } .haunt-card .meta .name { font-family: 'Rye', serif; color: var(--hhl-yellow); font-size: 1.05rem; line-height: 1.2; margin: 0 0 0.2rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9); } .haunt-card .meta .where { font-size: 0.78rem; color: var(--hhl-text-soft); text-transform: uppercase; letter-spacing: 0.06em; } /* ----------------------------------------------------------------------------- How It Works — 3 centered icon columns inside a CSS ticket-stub frame ----------------------------------------------------------------------------- */ .hhl-how-section { padding: 5rem 0; background-color: var(--hhl-bg); } .hhl-how-section .container { max-width: 1100px; } /* Ticket frame: rounded rect with perforated top + bottom edges (circles cut out of the shape using radial-gradient backgrounds that match the page bg) and a right-hand stub with a vertical barcode + dashed-line separator. */ .hhl-ticket { position: relative; background-color: var(--hhl-surface); border: 1px solid var(--hhl-border); border-radius: 14px; padding: 3rem 6.5rem 3rem 2.5rem; overflow: visible; } /* Top + bottom perforations — small circles in the page background color sitting on the ticket's outer edge */ .hhl-ticket::before, .hhl-ticket::after { content: ''; position: absolute; left: 1.5rem; right: 1.5rem; height: 14px; background: radial-gradient(circle at 12px 7px, var(--hhl-bg) 6px, transparent 6.5px) 0 0 / 24px 14px repeat-x; pointer-events: none; } .hhl-ticket::before { top: -7px; } .hhl-ticket::after { bottom: -7px; } /* Right-side ticket stub: dashed separator + vertical barcode pattern */ .hhl-ticket .ticket-stub { position: absolute; top: 1.5rem; right: 1rem; bottom: 1.5rem; width: 4.5rem; border-left: 2px dashed rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; pointer-events: none; } .hhl-ticket .ticket-stub::before { content: ''; display: block; width: 38px; height: 70%; background: repeating-linear-gradient( to right, var(--hhl-text-soft) 0 2px, transparent 2px 4px, var(--hhl-text-soft) 4px 5px, transparent 5px 9px, var(--hhl-text-soft) 9px 12px, transparent 12px 14px, var(--hhl-text-soft) 14px 17px, transparent 17px 20px ); opacity: 0.7; } @media (max-width: 767.98px) { .hhl-ticket { padding: 2.5rem 1.5rem; } .hhl-ticket .ticket-stub { display: none; } } .hhl-how-section .step { text-align: center; padding: 0 0.75rem; } .hhl-how-section .step img { height: 72px; width: auto; margin-bottom: 1.25rem; } .hhl-how-section .step h4 { font-family: 'Rye', serif; color: var(--hhl-yellow); text-transform: uppercase; font-size: 1.1rem; margin-bottom: 0.5rem; } .hhl-how-section .step p { color: var(--hhl-text-soft); font-size: 0.92rem; line-height: 1.5; } /* ----------------------------------------------------------------------------- Scream Local — single centered column. The Scream-Local_icon.png is a wide 520x77 banner containing both the haunted-house glyph AND the "SCREAM LOCAL" wordmark, so we use it directly as the section heading instead of adding a separate

. ----------------------------------------------------------------------------- */ .hhl-scream { padding: 4rem 0; background-color: var(--hhl-bg); text-align: center; } .hhl-scream .scream-banner { display: block; max-width: 520px; width: 100%; height: auto; margin: 0 auto 1.5rem; } .hhl-scream p.subhead { color: var(--hhl-text-soft); max-width: 720px; margin: 0 auto 1.75rem; font-size: 1.05rem; line-height: 1.6; } /* ----------------------------------------------------------------------------- Terrifying Deals — image on left, copy + email signup on right ----------------------------------------------------------------------------- */ .hhl-deals { padding: 4rem 0; background-color: var(--hhl-surface); border-top: 1px solid var(--hhl-border); } .hhl-deals .deals-image img { max-width: 100%; height: auto; } .hhl-deals h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); } .hhl-deals p { color: var(--hhl-text-soft); } .hhl-deals .deals-signup { display: flex; gap: 0.5rem; margin-top: 1.25rem; max-width: 480px; flex-wrap: wrap; } .hhl-deals .deals-signup input { flex: 1 1 200px; min-width: 0; background-color: rgba(255, 255, 255, 0.95); border: 1px solid var(--hhl-border); color: #1a1a1a; padding: 0.65rem 1rem; border-radius: 4px; } /* ----------------------------------------------------------------------------- Footer accent — Top-Footer.png (1920x278) is a horizontal cemetery silhouette that sits above the main footer block. Rendered as a real so it stretches edge to edge at any viewport width while keeping its aspect ratio. ----------------------------------------------------------------------------- */ .hhl-footer-top { display: block; width: 100%; height: auto; margin-top: 2rem; } /* ============================================================================= Interior pages (state listings, city listings, haunt detail, contact, 404) ============================================================================= */ /* ----------------------------------------------------------------------------- Page hero — slimmer than the homepage hero, reuses the Hero-Background map for visual continuity. Sits flush with the fixed navbar via negative margin (matches the chrome offset header.php sets up via .hhl-main). ----------------------------------------------------------------------------- */ .hhl-page-hero { background-color: #0a0a0c; background-image: linear-gradient(rgba(10, 10, 12, 0.45), rgba(10, 10, 12, 0.8)), url('/images/v2/Hero-Background.png'); background-size: cover; background-position: center; background-repeat: no-repeat; margin-top: -5.5rem; padding: 7.5rem 0 3rem; text-align: center; } .hhl-page-hero .hero-eyebrow { color: var(--hhl-orange); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; } .hhl-page-hero h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); margin-bottom: 0.5rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); } .hhl-page-hero p.lead { color: var(--hhl-text); max-width: 720px; margin: 0.5rem auto 0; font-size: 1.05rem; } .hhl-page-hero .hhl-crumb { color: var(--hhl-text-muted); margin-bottom: 0.75rem; padding: 0; font-size: 0.85rem; } /* Main page body container — used by all interior pages below the hero */ .hhl-page-body { padding: 3rem 0 4rem; } /* ----------------------------------------------------------------------------- Themed link grid — used for state / city catalogs (lots of links, no per- item imagery). Replaces the legacy .makelist_wide on listing pages. ----------------------------------------------------------------------------- */ .hhl-grid-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.5rem; } .hhl-grid-list a { display: block; padding: 0.7rem 1rem; background-color: var(--hhl-surface); border: 1px solid var(--hhl-border); border-radius: 4px; color: var(--hhl-text-soft); text-decoration: none; transition: border-color 150ms ease, color 150ms ease, transform 150ms ease; } .hhl-grid-list a:hover, .hhl-grid-list a:focus { border-color: var(--hhl-orange); color: var(--hhl-orange); text-decoration: none; transform: translateY(-1px); } /* ----------------------------------------------------------------------------- Haunt listing card — used on city pages where each row is a real haunt (no per-haunt imagery in the DB so we use a generic dark card with the name in Rye + city/state eyebrow + truncated description). ----------------------------------------------------------------------------- */ .haunt-list-card { display: block; background-color: var(--hhl-surface); border: 1px solid var(--hhl-border); border-radius: 6px; padding: 1.25rem; height: 100%; text-decoration: none; transition: transform 200ms ease, border-color 200ms ease; position: relative; } .haunt-list-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 60%, rgba(236, 107, 30, 0.06)); border-radius: 6px; pointer-events: none; } .haunt-list-card:hover, .haunt-list-card:focus { transform: translateY(-2px); border-color: var(--hhl-orange); text-decoration: none; } .haunt-list-card .name { font-family: 'Rye', serif; color: var(--hhl-yellow); font-size: 1.05rem; line-height: 1.2; margin: 0 0 0.4rem; } .haunt-list-card .where { font-size: 0.75rem; color: var(--hhl-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.6rem; } .haunt-list-card .blurb { color: var(--hhl-text-soft); font-size: 0.92rem; line-height: 1.5; margin: 0; } /* ----------------------------------------------------------------------------- Haunt detail layout — left column for narrative + map, right column for the info dl + sidenav. ----------------------------------------------------------------------------- */ .hhl-haunt-detail h2 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: 0.75rem; } .hhl-haunt-detail h2:first-of-type { margin-top: 0; } .hhl-haunt-detail .haunt-desc { color: var(--hhl-text-soft); line-height: 1.7; font-size: 1.02rem; } .hhl-haunt-detail .map-wrap { border: 1px solid var(--hhl-border); border-radius: 6px; overflow: hidden; } .hhl-haunt-detail dl.info-dl { background-color: var(--hhl-surface); border: 1px solid var(--hhl-border); border-radius: 6px; padding: 1.25rem; margin: 0; } .hhl-haunt-detail dl.info-dl dt { font-size: 0.72rem; color: var(--hhl-text-muted); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-top: 0.85rem; } .hhl-haunt-detail dl.info-dl dt:first-child { margin-top: 0; } .hhl-haunt-detail dl.info-dl dd { color: var(--hhl-text); margin: 0.25rem 0 0; word-break: break-word; font-size: 0.95rem; } .hhl-haunt-detail dl.info-dl a { color: var(--hhl-orange); } .hhl-haunt-detail dl.info-dl a:hover { color: var(--hhl-orange-hover); } /* ============================================================================= /admin area ============================================================================= */ .hhl-admin .hhl-card { background-color: var(--hhl-surface); } .hhl-admin .table { --bs-table-bg: transparent; --bs-table-color: var(--hhl-text); --bs-table-border-color: var(--hhl-border); margin: 0; } .hhl-admin .table > thead { border-bottom: 1px solid var(--hhl-border); } .hhl-admin .table > thead th { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--hhl-text-muted); font-weight: 600; padding: 0.75rem 1rem; } .hhl-admin .table > tbody > tr { border-bottom: 1px solid var(--hhl-border); } .hhl-admin .table > tbody > tr:last-child { border-bottom: none; } .hhl-admin .table > tbody > tr > td { padding: 0.75rem 1rem; vertical-align: middle; } .hhl-admin .text-soft { color: var(--hhl-text-soft); } .hhl-admin-footer { background-color: #060608; border-top: 1px solid var(--hhl-border); margin-top: 3rem; } .hhl-admin .hhl-form label { color: var(--hhl-text); font-weight: 500; margin-top: 0; margin-bottom: 0.35rem; display: block; } .hhl-admin .input-group .btn { border-radius: 0 4px 4px 0; } .hhl-admin .pagination .page-link { background-color: var(--hhl-surface); border-color: var(--hhl-border); color: var(--hhl-text-soft); } .hhl-admin .pagination .page-item.disabled .page-link { color: var(--hhl-text-muted); } .hhl-footer .footer-logo img { max-height: 60px; width: auto; }