/* ========================================================= 2A CLASSIFIEDS — Newspaper classifieds page aesthetic ========================================================= */ :root { --paper: #f4f0e6; --paper-dark: #e8e1d0; --ink: #1c1a15; --ink-soft: #3a362c; --rule: #1c1a15; --accent: #7a1f1f; --accent-dark: #5c1616; --pending: #a06a12; --approved: #2d5a2d; --rejected: #7a1f1f; --paper-shadow: rgba(0,0,0,0.15); /* Advertisement-box accent color. Blaze orange on the classifieds site (default here); overridden to lime green within .forum-body (see forum.css) so every ad box on the forum "pops" in a different, on-brand color without duplicating every ad selector -- elements below reference var(--ad-accent) and the whole subtree just re-themes when the custom property is redefined on . */ --ad-accent: #ff6a00; } * { box-sizing: border-box; } body { margin: 0; background: #e4d9bd; color: var(--ink); font-family: 'Old Standard TT', Georgia, serif; background-image: linear-gradient(rgba(228,217,189,0.42), rgba(228,217,189,0.55)), url('/static/constitution-bg.jpg'); background-repeat: repeat-y; background-position: top center; background-size: 1100px auto; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Masthead ---------- */ #masthead { background: var(--paper); border-bottom: 4px double var(--ink); padding: 10px 16px 0; } .masthead-inner { max-width: 1200px; margin: 0 auto; padding: 0 8px; overflow: hidden; } .masthead-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); border-bottom: 1px solid var(--ink); padding-bottom: 6px; } .masthead-tagline { text-align: center; flex: 1 1 auto; } @media (max-width: 640px) { .masthead-top { justify-content: center; text-align: center; font-size: 0.68rem; } .masthead-title { font-size: 2.3rem; } } .masthead-title-link { display: block; text-align: center; } .masthead-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 3.4rem; letter-spacing: 0.04em; margin: 8px 0 4px; color: var(--ink); text-align: center; max-width: 100%; white-space: normal; } @media (max-width: 480px) { .masthead-title { font-size: 1.85rem; letter-spacing: 0.02em; } } .masthead-rule { border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); height: 4px; margin-bottom: 4px; } .masthead-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; padding: 10px 8px 14px; font-family: 'Special Elite', monospace; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .masthead-nav a { display: inline-block; color: var(--ink); border: 1px solid var(--ink); padding: 5px 12px; white-space: nowrap; line-height: 1.2; } .masthead-nav a:hover { color: #fff; background: var(--accent); border-color: var(--accent); text-decoration: none; } .nav-cta { color: #ffffff !important; background: #ffd400; border-color: #ffd400 !important; font-weight: bold; } .nav-cta-alt { color: #ffe600 !important; background: #32cd32; border-color: #32cd32 !important; font-weight: bold; } @media (max-width: 640px) { .masthead-nav { gap: 6px 8px; font-size: 0.72rem; } .masthead-nav a { padding: 5px 9px; } } /* ---------- Disclaimer dropdown ---------- Small click-to-expand box (was previously an always-visible text strip). Collapsed by default; clicking the summary row reveals the full platform disclaimer text. */ .disclaimer-dropdown { background: #2a2620; color: #e8e1d0; max-width: 1200px; margin: 8px auto 0; font-size: 0.78rem; } .disclaimer-dropdown summary { cursor: pointer; padding: 7px 24px; text-align: center; list-style: none; user-select: none; } .disclaimer-dropdown summary::-webkit-details-marker { display: none; } .disclaimer-dropdown summary i { color: #d4a017; margin-right: 6px; } .disclaimer-dropdown-hint { color: #a89f8a; font-size: 0.68rem; margin-left: 4px; } .disclaimer-dropdown-body { padding: 4px 24px 12px; line-height: 1.5; border-top: 1px solid #4a4436; margin-top: 2px; } @media (max-width: 640px) { .disclaimer-dropdown summary, .disclaimer-dropdown-body { padding-left: 14px; padding-right: 14px; } } /* ---------- Header ad banner (shown on every page, directly under the masthead nav) ---------- Taller fixed-height box (was a thin single-line strip) so it reads as real ad inventory rather than a caption. Content is vertically centered within the fixed height. */ .header-ad-banner { max-width: 1200px; min-height: 110px; margin: 10px auto 0; padding: 14px 20px; border: 3px dashed var(--ad-accent); background: #fffaf0; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .header-ad-link { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: inherit; } .header-ad-link:hover { text-decoration: none; } .header-ad-banner .rail-ad-label { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ad-accent); font-weight: bold; margin-bottom: 6px; } .header-ad-image { max-height: 56px; width: auto; margin-bottom: 8px; border: 1px solid var(--ink); } .header-ad-headline { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.3rem; color: var(--accent-dark); margin-bottom: 4px; } .header-ad-body { font-size: 0.92rem; color: var(--ink-soft); max-width: 640px; } @media (max-width: 640px) { .header-ad-banner { margin: 8px 10px 0; padding: 12px 14px; min-height: 90px; } .header-ad-headline { font-size: 1.1rem; } } /* ---------- Fixed page-border ad rails (left/right) ---------- Deliberately position: fixed (not sticky/absolute) so the ad stack stays pinned to the viewport and does NOT scroll/float with the page content as the visitor scrolls -- it never moves, on every page of every category, classifieds and forum alike. Main content columns (#content and #forum-content) were narrowed to a shared 1000px max-width specifically to open up border space for these rails. Rails are 130px wide, anchored 14px from each edge (occupying the outer ~144px of each border), so they need a >=170px gutter on both sides of the centered 1000px column: 1000 + 2*170 = 1340px. Below that width there isn't room beside the content, so the rails are hidden rather than overlapping it -- this covers phones/tablets/small laptops; a normal 1366px+ desktop or laptop screen shows them on every page. */ .page-ad-rail { position: fixed; top: 210px; width: 130px; max-height: calc(100vh - 230px); overflow: hidden; display: flex; flex-direction: column; gap: 10px; z-index: 5; } .page-ad-rail-left { left: 14px; } .page-ad-rail-right { right: 14px; } @media (max-width: 1340px) { .page-ad-rail { display: none; } } .rail-ad-card { border: 2px solid var(--ad-accent); background: #fffaf0; padding: 8px; box-shadow: 2px 2px 0 rgba(0,0,0,0.08); } .rail-ad-link { display: block; color: inherit; } .rail-ad-link:hover { text-decoration: none; } .rail-ad-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ad-accent); font-weight: bold; margin-bottom: 4px; } .rail-ad-image { width: 100%; height: auto; margin-bottom: 4px; border: 1px solid var(--ink); } .rail-ad-headline { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 0.8rem; line-height: 1.2; color: var(--accent-dark); margin-bottom: 3px; } .rail-ad-body { font-size: 0.68rem; line-height: 1.3; color: var(--ink-soft); } /* ---------- Content wrapper ---------- */ #content { /* Narrowed from 1200px (increased page border) so the fixed ad rails have room beside the content column on common desktop widths -- see .page-ad-rail below for the breakpoint math. */ max-width: 1000px; margin: 0 auto; padding: 24px 24px 60px; min-height: 60vh; } @media (max-width: 640px) { #content { padding: 18px 14px 50px; } } .page-heading { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 1.9rem; border-bottom: 3px double var(--ink); padding-bottom: 8px; margin-bottom: 18px; } .section-label { font-family: 'Special Elite', monospace; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; background: var(--ink); color: var(--paper); display: inline-block; padding: 3px 10px; margin: 24px 0 12px; } /* ---------- Category filter chips ---------- */ .category-bar { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 24px; padding: 16px; background: var(--paper-dark); border: 1px solid var(--ink); } .category-chip { font-family: 'Special Elite', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; padding: 7px 14px; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); white-space: nowrap; line-height: 1.3; } .category-chip.active { background: var(--ink); color: var(--paper); } .category-chip:hover { text-decoration: none; background: var(--accent); color: #fff; border-color: var(--accent); } @media (max-width: 640px) { .category-bar { padding: 12px; gap: 8px 10px; } .category-chip { font-size: 0.7rem; padding: 6px 11px; } } /* ---------- Clickable category boxes (home page + category drill-down) ---------- */ .category-box-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-bottom: 8px; } .category-box-grid > a { flex: 0 1 calc(25% - 12px); } @media (max-width: 900px) { .category-box-grid > a { flex: 0 1 calc(33.333% - 11px); } } @media (max-width: 640px) { .category-box-grid > a { flex: 0 1 calc(50% - 8px); } } @media (max-width: 420px) { .category-box-grid > a { flex: 0 1 100%; } } .category-box { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: var(--paper); border: 2px solid var(--ink); padding: 12px 10px; color: var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,0.08); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease; } .category-box:hover { text-decoration: none; background: var(--ink); color: var(--paper); transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(0,0,0,0.15); } .category-box-icon { font-size: 1.3rem; color: #ffffff; background: var(--accent); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 2px; } .category-box:hover .category-box-icon { background: var(--paper); color: var(--accent); } .category-box-icon-img { width: 20px; height: 20px; object-fit: contain; /* Icon art is drawn as dark line-art on transparent bg; force it white to match request. */ filter: brightness(0) invert(1); } .category-box-label { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 0.9rem; letter-spacing: 0.02em; } .category-box-desc { font-size: 0.68rem; color: var(--ink-soft); font-style: italic; } .category-box:hover .category-box-desc { color: #d8d2c2; } .category-box-count { margin-top: 2px; font-family: 'Special Elite', monospace; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 8px; border: 1px solid currentColor; border-radius: 2px; } /* Sub-option boxes are a bit more compact (action types / subcategories) */ .sub-option-grid > a { flex: 0 1 calc(25% - 12px); } @media (max-width: 900px) { .sub-option-grid > a { flex: 0 1 calc(33.333% - 11px); } } @media (max-width: 640px) { .sub-option-grid > a { flex: 0 1 calc(50% - 8px); } } .sub-option-box { padding: 16px 12px; } .sub-option-box.all-option { border-style: double; border-width: 4px; } .sub-option-box .category-box-label { font-size: 0.95rem; } /* ---------- Breadcrumb ---------- */ .breadcrumb { font-family: 'Special Elite', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 14px; color: var(--ink-soft); } .breadcrumb a { color: var(--ink-soft); } .breadcrumb-sep { margin: 0 4px; } .breadcrumb-current { color: var(--accent); font-weight: bold; } /* ---------- Classifieds grid (newspaper columns feel) ---------- */ .classifieds-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .ad-tile { background: var(--paper); border: 1px solid var(--ink); padding: 10px; display: flex; flex-direction: column; position: relative; box-shadow: 2px 2px 0 rgba(0,0,0,0.06); } .ad-tile.size-small { flex: 0 1 calc(25% - 10.5px); min-height: 160px; } .ad-tile.size-medium { flex: 0 1 calc(50% - 7px); min-height: 160px; } .ad-tile.size-large { flex: 0 1 calc(50% - 7px); min-height: 340px; } @media (max-width: 900px) { .ad-tile.size-small, .ad-tile.size-medium, .ad-tile.size-large { flex: 0 1 calc(50% - 7px); } } @media (max-width: 520px) { .ad-tile.size-small, .ad-tile.size-medium, .ad-tile.size-large { flex: 0 1 100%; } } .ad-tile .ad-photo { width: 100%; height: 110px; object-fit: cover; border: 1px solid var(--ink); margin-bottom: 6px; background: #d8d2c2; } .ad-tile.size-large .ad-photo { height: 200px; } /* Ad creative photos (advertiser-submitted images, as opposed to real classifieds listing photos above which intentionally crop with `cover`) must always be shown in FULL, uncropped -- an advertiser paid for their ad space and their creative should render exactly as they submitted it. object-fit: contain letterboxes the image inside the fixed box instead of cropping it, with a neutral background filling any leftover space. */ .ad-tile .ad-creative-tile-photo { width: 100%; height: 110px; object-fit: contain; border: 1px solid var(--ink); margin-bottom: 6px; background: #d8d2c2; } .ad-tile.size-large .ad-creative-tile-photo { height: 200px; } .ad-tile .ad-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1rem; line-height: 1.2; margin: 0 0 4px; } .ad-tile.size-large .ad-title { font-size: 1.25rem; } .ad-tile .ad-meta { font-size: 0.72rem; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 4px; letter-spacing: 0.03em; } .ad-tile .ad-price { font-family: 'Special Elite', monospace; font-weight: bold; color: var(--accent); font-size: 1rem; margin-bottom: 4px; } .ad-tile .ad-desc { font-size: 0.82rem; line-height: 1.35; flex: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .ad-tile.size-large .ad-desc { -webkit-line-clamp: 6; } .ad-tile .ad-footer { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #999; font-size: 0.75rem; } .ad-tile .ad-location { color: var(--ink-soft); } .empty-state { text-align: center; padding: 60px 20px; color: var(--ink-soft); font-style: italic; } /* ---------- Sponsor / advertiser tiles ---------- */ .sponsor-tile { border: 2px solid var(--ad-accent); background: #fffaf0; } .sponsor-tile .sponsor-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ad-accent); font-weight: bold; margin-bottom: 4px; } .sponsor-tile .ad-title { color: var(--accent-dark); } .sponsor-tile a.sponsor-link { display:block; height:100%; color: inherit; } .sponsor-tile a.sponsor-link:hover { text-decoration: none; } /* ---------- Forms ---------- */ .form-wrap { max-width: 720px; margin: 0 auto; background: var(--paper-dark); border: 1px solid var(--ink); padding: 24px; } .form-wrap h2 { font-family: 'Playfair Display', Georgia, serif; margin-top: 0; } .form-row { margin-bottom: 16px; } .form-row label { display: block; font-weight: bold; margin-bottom: 4px; font-size: 0.9rem; } .form-row .hint { font-size: 0.75rem; color: var(--ink-soft); font-weight: normal; } .form-row input[type=text], .form-row input[type=email], .form-row input[type=tel], .form-row input[type=password], .form-row input[type=file], .form-row select, .form-row textarea { width: 100%; padding: 8px; border: 1px solid var(--ink); background: var(--paper); font-family: inherit; font-size: 0.95rem; } .form-row textarea { min-height: 110px; resize: vertical; } .form-row-inline { display: flex; gap: 12px; } .form-row-inline .form-row { flex: 1; } .checkbox-block { background: #fff8e8; border: 1px solid var(--pending); padding: 14px; margin-bottom: 16px; } .checkbox-block .checkbox-item { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; } .checkbox-block .checkbox-item input { margin-top: 3px; } .btn { display: inline-block; background: var(--ink); color: var(--paper); border: none; padding: 10px 22px; font-family: 'Special Elite', monospace; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; font-size: 0.9rem; } .btn:hover { background: var(--accent); text-decoration: none; } .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn-danger { background: var(--rejected); } .btn-approve { background: var(--approved); } .alert { padding: 12px 16px; border: 1px solid; margin-bottom: 16px; font-size: 0.9rem; } .alert-success { background: #eaf5ea; border-color: var(--approved); color: #1e3d1e; } .alert-error { background: #fbeaea; border-color: var(--rejected); color: var(--accent-dark); } .alert-info { background: #fff8e8; border-color: var(--pending); color: #5c3d09; } /* ---------- Install app banner (PWA "Add to Home Screen" prompt) ---------- */ .install-app-banner { background: var(--ink); border-bottom: 3px solid var(--ad-accent); } .install-app-banner-inner { max-width: 1200px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .install-app-icon { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; } .install-app-text { display: flex; flex-direction: column; gap: 1px; color: #f4f0e6; flex: 1 1 220px; min-width: 0; } .install-app-text strong { font-size: 0.92rem; } .install-app-text span { font-size: 0.78rem; color: #cfc7b3; } .install-app-btn { background: var(--ad-accent); color: #fff; border: none; padding: 8px 16px; font-weight: bold; font-size: 0.85rem; border-radius: 3px; cursor: pointer; white-space: nowrap; font-family: inherit; } .install-app-btn:hover { filter: brightness(1.08); } .install-app-dismiss { background: transparent; border: none; color: #cfc7b3; font-size: 1rem; cursor: pointer; padding: 4px 8px; line-height: 1; } .install-app-dismiss:hover { color: #fff; } @media (max-width: 480px) { .install-app-text span { display: none; } } /* ---------- Size picker (advertiser form) ---------- */ .size-picker { display: flex; gap: 12px; flex-wrap: wrap; } .size-option { border: 1px solid var(--ink); padding: 12px; flex: 1; min-width: 140px; cursor: pointer; text-align: center; background: var(--paper); } .size-option input { margin-right: 6px; } .size-option.selected { background: var(--ink); color: var(--paper); } .size-swatch { margin: 8px auto; border: 1px solid currentColor; } .size-swatch.small { width: 30px; height: 30px; } .size-swatch.medium { width: 60px; height: 30px; } .size-swatch.large { width: 60px; height: 60px; } .size-swatch.premium { width: 60px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--accent-dark); } .size-price { margin-top: 8px; font-size: 0.8rem; font-weight: bold; } .billing-picker .size-option { min-width: 160px; } .premium-header-option { border-color: var(--accent-dark); border-width: 2px; } .size-option-disabled { opacity: 0.55; cursor: not-allowed; } .size-option-disabled input { cursor: not-allowed; } .premium-only-option { display: none; } /* ---------- Ad pricing table (advertiser form) ---------- */ .ad-pricing-table { margin: 18px 0; } .ad-pricing-grid { margin-bottom: 8px; } .ad-pricing-grid td:first-child { font-weight: bold; } .premium-pricing-grid { border: 2px solid var(--accent-dark); } /* ---------- Admin: ad billing / expiration controls ---------- */ .expiry-soon { color: var(--accent-dark); font-weight: bold; } .admin-expiry-form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; } .admin-expiry-date { font-family: inherit; font-size: 0.78rem; padding: 4px 6px; border: 1px solid #ccc; background: var(--paper); } .admin-expiry-buttons { display: flex; flex-wrap: wrap; gap: 4px; } .admin-expiry-buttons .btn { padding: 4px 7px; font-size: 0.7rem; white-space: nowrap; } /* ---------- Admin ---------- */ .admin-wrap { max-width: 1100px; margin: 0 auto; } .admin-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); } .admin-nav a { margin-right: 16px; font-family: 'Special Elite', monospace; text-transform: uppercase; font-size: 0.85rem; } .admin-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; background: var(--paper); } .admin-table th, .admin-table td { border: 1px solid #ccc; padding: 8px 10px; font-size: 0.85rem; text-align: left; vertical-align: top; } .admin-table th { background: var(--paper-dark); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.04em; } .status-badge { display: inline-block; padding: 2px 8px; font-size: 0.7rem; text-transform: uppercase; border-radius: 2px; font-weight: bold; } .status-pending { background: #fff3d6; color: var(--pending); } .status-approved { background: #e2f3e2; color: var(--approved); } .status-rejected { background: #fbe2e2; color: var(--rejected); } .admin-actions form { display: inline-block; margin-right: 6px; } .admin-actions .btn { padding: 5px 10px; font-size: 0.75rem; } .admin-placement-form { display: flex; gap: 6px; align-items: center; white-space: nowrap; } .admin-placement-select { font-family: inherit; font-size: 0.78rem; padding: 4px 6px; border: 1px solid #ccc; background: var(--paper); } .admin-placement-form .btn { padding: 4px 8px; font-size: 0.72rem; } .admin-password-panel { background: var(--paper-dark); border: 1px solid #ccc; border-radius: 3px; padding: 4px 16px 16px; margin-bottom: 24px; max-width: 480px; } .admin-password-panel summary { cursor: pointer; font-family: 'Special Elite', monospace; padding: 12px 0; font-size: 0.95rem; } .admin-password-form { margin-top: 8px; } .login-wrap { max-width: 380px; margin: 60px auto; } .text-muted { color: var(--ink-soft); } .mb-0 { margin-bottom: 0; } /* ---------- Admin: Phase 3 renewal reminders + renewal link tooling ---------- */ .expiring-soon-panel { background: #fff8e8; border: 2px solid var(--pending); border-radius: 3px; padding: 4px 16px 16px; margin-bottom: 24px; } .expiring-soon-panel .section-label { background: var(--pending); } .expiring-bucket { margin-bottom: 14px; } .expiring-bucket:last-child { margin-bottom: 0; } .expiring-bucket-title { font-family: 'Special Elite', monospace; text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; margin-bottom: 6px; color: var(--ink); } .expiring-bucket-urgent .expiring-bucket-title { color: var(--rejected); } .expiring-list { list-style: none; margin: 0; padding: 0; } .expiring-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #e4d9b8; font-size: 0.85rem; } .expiring-list li:last-child { border-bottom: none; } .expiring-item-premium { color: var(--accent-dark); } .expiring-renew-form { display: flex; gap: 6px; align-items: center; white-space: nowrap; } .expiring-renew-form .btn { padding: 4px 9px; font-size: 0.72rem; } .renew-link-box { max-width: 640px; } .renew-link-row { display: flex; gap: 6px; margin: 8px 0; } .renew-link-input { flex: 1; font-family: inherit; font-size: 0.8rem; padding: 6px 8px; border: 1px solid #ccc; background: var(--paper); } .renew-link-row .btn { padding: 6px 12px; font-size: 0.75rem; white-space: nowrap; } .admin-renew-details { display: inline-block; vertical-align: top; margin-right: 6px; } .admin-renew-details summary { list-style: none; cursor: pointer; } .admin-renew-details summary::-webkit-details-marker { display: none; } .admin-renew-form { display: flex; gap: 6px; align-items: center; margin-top: 6px; white-space: nowrap; } .admin-renew-form .btn { padding: 4px 8px; font-size: 0.72rem; } /* ---------- Site footer (centered) ---------- */ #site-footer { background: #2a2620; color: #e8e1d0; padding: 28px 24px 10px; text-align: center; } .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; gap: 24px 40px; padding-bottom: 16px; border-bottom: 1px solid #4a4436; } .footer-col { flex: 1 1 220px; max-width: 320px; } .footer-col h4 { font-family: 'Playfair Display', Georgia, serif; color: #e8dcae; margin: 0 0 8px; } .footer-col p { font-size: 0.85rem; margin: 4px 0; } .footer-col a { color: #e8dcae; } .footer-bottom { text-align: center; font-size: 0.72rem; padding: 12px 0 4px; color: #a89f88; } /* ---------- Site-wide centering ---------- */ .page-heading { text-align: center; } .breadcrumb { text-align: center; } .category-bar { justify-content: center; } .masthead-nav { justify-content: center; } .empty-state { margin-left: auto; margin-right: auto; text-align: center; } .forum-entry-box { justify-content: center; text-align: center; } /* ---------- Forum entry box (links to Dark Hollow Outdoor Society) ---------- */ .forum-entry-box { display: flex; flex-direction: column; align-items: center; gap: 10px; background: #14110c; border: 2px solid var(--ink); padding: 20px 22px; margin: 0 auto 28px; max-width: 420px; box-shadow: 3px 3px 0 rgba(0,0,0,0.15); transition: transform 0.12s ease, box-shadow 0.12s ease; } .forum-entry-box:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 5px 5px 0 rgba(0,0,0,0.25); } .forum-entry-logo { width: 180px; height: 180px; object-fit: contain; border-radius: 50%; background: #fff; border: 2px solid #d4a017; } .forum-entry-box-text { font-family: 'Special Elite', monospace; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1rem; color: #e8dcae; font-weight: bold; } /* ---------- State selection gate & state-scoped browsing ---------- */ .state-select-wrap { max-width: 560px; } .nav-state-link { background: var(--ink); color: #fff !important; font-weight: bold; } .nav-state-link:hover { background: var(--accent); text-decoration: none; } .state-scope-banner { background: var(--paper); border: 1px solid var(--ink); padding: 8px 14px; margin-bottom: 16px; font-size: 0.85rem; color: var(--ink-soft); } .state-scope-banner strong { color: var(--ink); } .restricted-state-banner { margin-bottom: 20px; } .category-box-restricted { opacity: 0.72; } .category-box-restricted .category-box-icon { filter: grayscale(1); } .category-box-restricted-badge { color: var(--rejected) !important; border-color: var(--rejected) !important; font-weight: bold; } .category-box:hover.category-box-restricted .category-box-restricted-badge { color: #ffb3b3 !important; border-color: #ffb3b3 !important; } .restricted-state-notice { max-width: 640px; } .restricted-state-icon { font-size: 2.4rem; color: var(--rejected); display: block; margin-bottom: 8px; } /* ========================================================= One-time age-verification / legal-disclaimer interstitial (/age-verify, /age-denied) Standalone page (not using the site renderer) so it works identically for both the classifieds side and the forum side, before either layout has rendered. ========================================================= */ .age-gate-body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #16130d; background-image: linear-gradient(rgba(22,19,13,0.75), rgba(22,19,13,0.85)), url('/static/constitution-bg.jpg'); background-repeat: repeat-y; background-position: top center; background-size: 1100px auto; font-family: 'Old Standard TT', Georgia, serif; color: var(--ink); padding: 20px; box-sizing: border-box; } .age-gate-overlay { width: 100%; display: flex; justify-content: center; } .age-gate-modal { background: var(--paper); border: 3px solid var(--ink); box-shadow: 8px 8px 0 rgba(0,0,0,0.35); max-width: 560px; width: 100%; padding: 28px 32px 24px; } .age-gate-title { font-family: 'Playfair Display', Georgia, serif; font-weight: 900; font-size: 2.1rem; text-align: center; margin: 0 0 2px; } .age-gate-subtitle { text-align: center; font-family: 'Special Elite', monospace; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin-bottom: 16px; } .age-gate-disclaimer { max-height: 260px; overflow-y: auto; border: 1px solid var(--ink-soft); background: #fffaf0; padding: 12px 16px; font-size: 0.85rem; line-height: 1.55; margin-bottom: 4px; } .age-gate-disclaimer p { margin: 0 0 10px; } .age-gate-disclaimer p:last-child { margin-bottom: 0; } .age-gate-footer { margin-top: 20px; padding-top: 16px; border-top: 3px double var(--ink); text-align: center; } .age-gate-question { font-family: 'Playfair Display', Georgia, serif; font-weight: 700; font-size: 1.15rem; margin-bottom: 14px; } .age-gate-choice-form { display: flex; gap: 16px; justify-content: center; } .age-gate-btn { flex: 1 1 0; max-width: 180px; font-family: 'Special Elite', monospace; font-size: 1.1rem; letter-spacing: 0.06em; padding: 14px 0; border: 2px solid var(--ink); cursor: pointer; text-transform: uppercase; transition: transform 0.1s ease, box-shadow 0.1s ease; } .age-gate-btn:hover { transform: translateY(-2px); box-shadow: 3px 3px 0 rgba(0,0,0,0.25); } .age-gate-yes { background: var(--approved); color: #ffffff; } .age-gate-yes:hover { background: #244a24; } .age-gate-no { background: var(--rejected); color: #ffffff; } .age-gate-no:hover { background: #4a1414; } @media (max-width: 480px) { .age-gate-modal { padding: 20px 18px 18px; } .age-gate-choice-form { flex-direction: column; } .age-gate-btn { max-width: none; } } .age-gate-denied-modal { text-align: center; } .age-gate-denied-icon { font-size: 2.6rem; color: var(--rejected); margin-bottom: 8px; } .age-gate-denied-text { font-size: 0.92rem; line-height: 1.6; } /* ---------- Document-type ad creative badge (Word/PDF uploads, shown wherever an ad image would otherwise render) ---------- */ .ad-doc-creative { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: bold; color: var(--accent-dark); background: #fff3d6; border: 1px solid var(--ad-accent); padding: 6px 10px; border-radius: 3px; margin-bottom: 6px; } .ad-doc-creative i { font-size: 1rem; } /* ---------- Venmo / Cash App payment buttons (shared: forum donations + advertiser ad-space payments; used on both the classifieds site and the forum via payment-links.tsx). Forum-specific color/contrast tweaks live in forum.css under .forum-body. ---------- */ .payment-buttons { margin: 10px 0; } .payment-buttons-label { font-size: 0.8rem; font-weight: bold; margin-bottom: 6px; } .payment-buttons-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .payment-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 4px; font-size: 0.82rem; font-weight: bold; color: #ffffff !important; text-decoration: none; border: 1px solid rgba(0,0,0,0.15); } .payment-btn:hover { text-decoration: none; filter: brightness(1.08); } .payment-btn-venmo { background: #3d95ce; } .payment-btn-cashapp { background: #00d632; color: #073b0f !important; } /* ---------- "House ad" fallback shown in ad slots when no paid advertiser is available yet, so every ad box always carries a way to pay for the space (Venmo/Cash App). ---------- */ .house-ad { text-align: center; } .house-ad .payment-buttons-row { justify-content: center; } .rail-ad-card.house-ad .payment-btn { padding: 5px 8px; font-size: 0.68rem; } /* ---------- Advertiser payment box on the /advertise page ---------- */ .advertiser-payment-box { margin-top: 20px; padding: 16px; border: 2px solid var(--ad-accent); background: var(--paper-dark); text-align: center; } .advertiser-payment-box-title { font-weight: bold; margin-bottom: 6px; } /* ---------- Premium Header advertiser's "Featured Sponsor" tile (Phase 2) ---------- Always the first tile in every classifieds grid while a Premium Header ad is active (see src/routes/listings.tsx). Same ad as the exclusive header banner + forum row, styled distinctly (gold border, crown label) from a regular rotating sponsor tile. */ .premium-sponsor-tile { flex: 0 1 100%; border: 2px solid var(--accent-dark); background: #fff7e0; } .premium-tile-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-dark); font-weight: bold; margin-bottom: 4px; } .premium-tile-label i { margin-right: 3px; }