/* Theme Name: West Blount Station Template: astra Author: West Blount Station Description: Community news, directory, history & classifieds child theme for westblount.com. Karst limestone, moss, and spring-water palette used as flavor on a plain, conventional news-site layout. Version: 1.0.0 Text Domain: westblount */ :root { /* Palette — West Blount karst geology */ --wb-limestone: #E9E4D6; --wb-limestone-dim: #DCD5C2; --wb-cave: #1E211B; --wb-cave-soft: #262A21; --wb-moss: #43593C; --wb-moss-dark: #344530; --wb-bluehole: #2F6E68; --wb-gold: #B9872E; --wb-ink: #282A22; --wb-paper: #FCFBF6; --wb-line: rgba(40, 42, 34, 0.16); /* Type */ --wb-font-display: 'Fraunces', Georgia, serif; --wb-font-body: 'Public Sans', -apple-system, Segoe UI, Helvetica, Arial, sans-serif; --wb-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Reskin Astra's own global color vars so the stock header/nav/buttons pick up the palette even before bespoke templates are built out. NOTE: color-5 is Astra's "secondary background" alias and is what .ast-separate-container uses for the background itself — it must stay a light neutral, never the teal accent, or the whole site repaints with low-contrast text on top of it. */ --ast-global-color-0: var(--wb-moss); --ast-global-color-1: var(--wb-cave); --ast-global-color-2: var(--wb-cave); --ast-global-color-3: var(--wb-ink); --ast-global-color-4: var(--wb-paper); --ast-global-color-5: var(--wb-paper); --ast-global-color-6: var(--wb-limestone-dim); --ast-global-color-7: var(--wb-ink); --ast-global-color-8: var(--wb-cave); } body, button, input, select, textarea { font-family: var(--wb-font-body); color: var(--wb-ink); background: var(--wb-paper); } h1, h2, h3, h4, h5, h6, .site-title, .entry-title { font-family: var(--wb-font-display); color: var(--wb-cave); text-wrap: balance; } a { color: var(--wb-moss); } a:hover, a:focus { color: var(--wb-moss-dark); } a:focus-visible { outline: 2px solid var(--wb-gold); outline-offset: 2px; } .ast-button, button[type="submit"], input[type="submit"] { background: var(--wb-moss); border-color: var(--wb-moss); font-family: var(--wb-font-body); font-weight: 600; } .ast-button:hover, button[type="submit"]:hover { background: var(--wb-moss-dark); } ::selection { background: var(--wb-gold); color: var(--wb-cave); } /* Site-wide masthead + footer (header.php / footer.php) */ .wb-mast { background: var(--wb-limestone); border-bottom: 2px solid var(--wb-ink); } .wb-mast__inner { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.5rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; } .wb-brand { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none !important; } .wb-brand__mark { width: 56px; height: 56px; border-radius: 3px; border: 1px solid var(--wb-ink); object-fit: cover; flex-shrink: 0; } .wb-wordmark { font-family: var(--wb-font-display); font-weight: 600; font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: 0.01em; color: var(--wb-cave) !important; } .wb-tagline { font-family: var(--wb-font-mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--wb-moss); margin: 0; order: 3; flex-basis: 100%; } .wb-trailnav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.75rem; margin: 0; padding: 0; } .wb-trailnav a { font-family: var(--wb-font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--wb-ink) !important; text-decoration: none; padding-bottom: 0.2rem; border-bottom: 2px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .wb-trailnav a:hover { color: var(--wb-moss) !important; border-bottom-color: var(--wb-gold); } .wb-footer { background: var(--wb-cave); color: var(--wb-limestone-dim); padding: 2.5rem 1.5rem; } .wb-footer * { color: var(--wb-limestone-dim); } .wb-communities { max-width: 1180px; margin: 0 auto 1.25rem; display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--wb-font-display); } .wb-communities a { text-decoration: none; } .wb-communities a:hover { color: var(--wb-gold) !important; } .wb-footer-meta { max-width: 1180px; margin: 0 auto; font-family: var(--wb-font-mono); font-size: 0.78rem; opacity: 0.75; } @media (max-width: 640px) { .wb-trailnav ul { gap: 1rem; } .wb-trailnav a { font-size: 0.85rem; } } /* Shared components: eyebrow label, ledger/specimen cards, empty states. Used on the homepage, archive listings, and (eyebrow only) articles. */ .wb-eyebrow { font-family: var(--wb-font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wb-moss); } .wb-ledger-grid, .wb-specimen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .wb-ledger-card, .wb-specimen-card { background: var(--wb-limestone); border: 1px solid var(--wb-line); border-left: 3px solid var(--wb-gold); padding: 1.25rem 1.4rem; } .wb-specimen-card { border-left-color: var(--wb-bluehole); } .wb-ledger-card__media, .wb-specimen-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; margin: -1.25rem -1.4rem 1rem; } .wb-ledger-card__media img, .wb-specimen-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .wb-ledger-card h3, .wb-specimen-card h3 { font-size: 1.05rem; margin: 0 0 0.5rem; } .wb-meta { font-family: var(--wb-font-mono); font-size: 0.82rem; color: var(--wb-moss); font-variant-numeric: tabular-nums; display: block; margin: 0.15rem 0; } .wb-ledger-card p, .wb-specimen-card p { margin: 0.6rem 0 0; font-size: 0.95rem; } .wb-coming-soon { background: var(--wb-limestone); border: 1px dashed var(--wb-line); padding: 1.75rem; text-align: left; } .wb-coming-soon .wb-eyebrow { color: var(--wb-gold); } .wb-coming-soon p { margin: 0.5rem 0 0; max-width: 55ch; } /* Submission form */ .wb-submit-form { max-width: 640px; display: flex; flex-direction: column; gap: 1.1rem; } .wb-submit-form p { margin: 0; display: flex; flex-direction: column; gap: 0.35rem; } .wb-submit-form label { font-family: var(--wb-font-mono); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--wb-moss); } .wb-submit-form input[type="text"], .wb-submit-form input[type="email"], .wb-submit-form input[type="file"], .wb-submit-form select, .wb-submit-form textarea { font-family: var(--wb-font-body); font-size: 1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--wb-line); background: var(--wb-paper); color: var(--wb-ink); } .wb-submit-form textarea { resize: vertical; } .wb-form-hint { font-family: var(--wb-font-body); font-size: 0.82rem; color: var(--wb-ink); text-transform: none; letter-spacing: normal; opacity: 0.75; } .wb-hp-field { position: absolute; left: -9999px; } .wb-form-success { max-width: 640px; background: var(--wb-limestone); border-left: 3px solid var(--wb-moss); padding: 1.5rem; } /* Ad slots — base rules shared by homepage, in-article, and events placements */ .wb-ad { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; } .wb-ad__label { font-family: var(--wb-font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wb-moss); opacity: 0.65; align-self: center; } .wb-ad img { display: block; max-width: 100%; height: auto; } .wb-ad--leaderboard .wb-ad__mobile { display: none; } @media (max-width: 480px) { .wb-ad--leaderboard .wb-ad__desktop { display: none; } .wb-ad--leaderboard .wb-ad__mobile { display: block; } } /* Sticky sidebar wrapper — shared by article pages and archive/listing pages */ .wb-sidebar__sticky { position: sticky; top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } @media (max-width: 860px) { .wb-sidebar__sticky { position: static; } } /* Ads in the sidebar render at their true 300x250 size — the base .wb-ad padding/max-width is meant for full-width homepage/in-content placement and otherwise shrinks the ad inside this narrow column. */ .wb-sidebar .wb-ad { max-width: none; margin: 0; padding: 0; }