/* Edmonds School HOA — Content Block Styles ========================================== Drop this file into your site and link it in the of any page where you paste the CMS-generated HTML blocks. Usage: Works with the HTML output from the HOA Content Manager for: - Notices & Announcements (.hoa-notices) - Events (.hoa-events) - Community News (.hoa-news) */ /* ── Shared variables ──────────────────────────────────────────── */ :root { --hoa-navy: #1a3557; --hoa-navy-dark: #122440; --hoa-accent: #c8a84b; /* warm gold, like the building's brick tone */ --hoa-text: #222222; --hoa-muted: #5a6270; --hoa-border: #d8dde6; --hoa-bg: #f4f6f9; --hoa-white: #ffffff; --hoa-urgent-bg: #fff4f4; --hoa-urgent-bdr: #d94040; --hoa-urgent-txt: #a82020; --hoa-radius: 6px; --hoa-font: Georgia, 'Times New Roman', serif; --hoa-sans: 'Helvetica Neue', Arial, sans-serif; } /* ── Section wrapper shared styles ────────────────────────────── */ .hoa-notices, .hoa-events, .hoa-news { font-family: var(--hoa-sans); color: var(--hoa-text); max-width: 860px; margin: 2rem auto; padding: 0 1rem; } /* Section headings */ .hoa-notices h2, .hoa-events h2, .hoa-news h2 { font-family: var(--hoa-font); font-size: 1.6rem; font-weight: normal; color: var(--hoa-navy); margin: 0 0 1.25rem; padding-bottom: 0.6rem; border-bottom: 3px solid var(--hoa-accent); letter-spacing: -0.01em; } /* ── Article cards (shared) ────────────────────────────────────── */ .hoa-notices article, .hoa-events article, .hoa-news article { background: var(--hoa-white); border: 1px solid var(--hoa-border); border-radius: var(--hoa-radius); padding: 1.1rem 1.25rem; margin-bottom: 0.85rem; border-left: 4px solid var(--hoa-navy); transition: box-shadow 0.15s ease; } .hoa-notices article:hover, .hoa-events article:hover, .hoa-news article:hover { box-shadow: 0 2px 10px rgba(26, 53, 87, 0.1); } /* Article headings */ .hoa-notices article h3, .hoa-events article h3, .hoa-news article h3 { font-family: var(--hoa-font); font-size: 1.05rem; font-weight: bold; color: var(--hoa-navy-dark); margin: 0 0 0.3rem; } /* Date / time element */ .hoa-notices article time, .hoa-events article time, .hoa-news article time { display: block; font-size: 0.78rem; color: var(--hoa-muted); margin-bottom: 0.5rem; font-family: var(--hoa-sans); letter-spacing: 0.02em; text-transform: uppercase; } /* Body paragraphs */ .hoa-notices article p, .hoa-events article p, .hoa-news article p { font-size: 0.92rem; line-height: 1.65; color: var(--hoa-text); margin: 0; } /* Byline / meta paragraph in news */ .hoa-news article p.meta { font-size: 0.78rem; color: var(--hoa-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.02em; } /* ── Notices: urgent variant ───────────────────────────────────── */ .hoa-notices article.urgent { background: var(--hoa-urgent-bg); border-color: var(--hoa-border); border-left: 4px solid var(--hoa-urgent-bdr); } .hoa-notices article.urgent::before { content: "⚠ Urgent Notice"; display: block; font-family: var(--hoa-sans); font-size: 0.72rem; font-weight: bold; color: var(--hoa-urgent-txt); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.45rem; } .hoa-notices article.urgent h3 { color: var(--hoa-urgent-txt); } /* ── Events: location line ─────────────────────────────────────── */ .hoa-events article p.location { font-size: 0.82rem; color: var(--hoa-muted); margin-bottom: 0.4rem; font-style: italic; } /* ── Empty state (when no items) ───────────────────────────────── */ .hoa-notices:empty::after, .hoa-events:empty::after, .hoa-news:empty::after { content: "No items to display at this time."; display: block; color: var(--hoa-muted); font-size: 0.9rem; font-family: var(--hoa-sans); padding: 1rem 0; } /* ── Responsive tweaks ─────────────────────────────────────────── */ @media (max-width: 600px) { .hoa-notices article, .hoa-events article, .hoa-news article { padding: 0.9rem 1rem; } .hoa-notices h2, .hoa-events h2, .hoa-news h2 { font-size: 1.3rem; } }