/* Theme Name: Bare Minimum Author: David Greenwald Author URI: https://www.davidgreenwald.com Description: A minimum viable product WordPress starter theme with no styles and strictly basic functionality. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html The goal of this theme is to serve as an educational project to see what it takes to get started on WordPress theme building. */ /** * For the absolute bare minimum, WordPress can install a theme with a single * "Theme Name" comment header. A header must be provided before CSS begins. * * Above, this stylesheet has the practical minimum for non-Theme Directory use. * * I suggest getting started on your CSS with my reset/normalization stylesheet, * Setup. * https://github.com/davidegreenwald/css-setup */ ASSUMPTIONS / NOTES -------------------------------------------------------------------------------- - Parent theme is Astra (astra_primary_class(), astra_header_class() etc.), matching the archive template's get_header()/#primary/get_footer() structure. Selectors below target Astra's common markup (.site-header, .main-header-bar, .ast-footer, .site-footer) with plain-tag fallbacks (header, nav, footer) so the rules still degrade safely if a future theme swap changes the wrapper markup. - No CSS animations, transforms, or transitions anywhere in this file (house standard). - No third-party CDN frameworks — self-hosted DM Sans + Font Awesome, same as the archive template. - Mobile-first: every rule targets the narrowest viewport first, then is progressively enhanced with min-width media queries at the same 480 / 640 / 860px breakpoints used in the archive template, so header/footer/content and the archive grid all snap to the same layout changes together. -------------------------------------------------------------------------------- */ /* ══════════════════════════════════════════════════════════════ 1. DESIGN TOKENS — same palette/scale as the archive template, promoted to :root so every part of the site shares one source of truth (was previously local to .bc-archive only). ══════════════════════════════════════════════════════════════ */ :root{ --blue:#1c4597;--blue-dark:#122d6b;--red:#EA4335;--red-dark:#c9352a;--green:#25d366;--green-dark:#1fa851; --offwhite:#f8f9fc;--white:#fff;--text-dark:#0d1b38;--text-body:#374151; --text-muted:#6b7280;--border:#e5e9f0;--bg-alt:#f0f4ff;--gold:#f5a623; --hero-navy:#1d3461; --container-max:860px;--container-pad:clamp(16px,5vw,40px); --radius-sm:6px;--radius-md:10px;--radius-lg:12px;--radius-pill:999px; --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; } /* ══════════════════════════════════════════════════════════════ 2. RESET / BASE — sitewide, not scoped to .bc-archive ══════════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;padding:0; font-family:var(--font-body); background:var(--white);color:var(--text-body); line-height:1.6;font-size:15px; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } img{max-width:100%;height:auto;display:block} a{text-decoration:none;color:var(--blue)} a:hover{color:var(--blue-dark)} ul,ol{padding-left:1.25em} h1,h2,h3,h4,h5,h6{color:var(--text-dark);font-weight:900;line-height:1.25;letter-spacing:-.01em;margin:0 0 .5em} p{margin:0 0 1em} :focus-visible{outline:3px solid var(--blue);outline-offset:2px} @font-face{ font-family:'DM Sans';font-style:normal;font-weight:400 900;font-display:swap; src:url('fonts/dm-sans-v14-latin-regular.woff2') format('woff2'); } .container,.ast-container{max-width:var(--container-max);margin:0 auto;padding-left:var(--container-pad);padding-right:var(--container-pad)} /* ══════════════════════════════════════════════════════════════ 3. SITE HEADER + NAV — matches the hero-navy band from the archive template so header and hero read as one continuous surface as the user scrolls from menu into content. ══════════════════════════════════════════════════════════════ */ .site-header,.ast-header,header[role="banner"]{ background:var(--hero-navy); border-bottom:1px solid rgba(255,255,255,.08); } .site-header .site-title,.ast-header .site-title,.site-header h1{ color:#fff;font-weight:900;font-size:1.3rem;letter-spacing:-.01em; } .site-header .site-description,.ast-header .site-description{ color:rgba(255,255,255,.62);font-size:.85rem; } .site-header a,.ast-header a{color:#fff} .site-header a:hover,.ast-header a:hover{color:var(--gold)} .main-header-menu,.main-navigation ul,nav ul{ display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0; } .main-header-menu li a,.main-navigation li a,nav li a{ display:block;padding:12px 4px;font-size:.85rem;font-weight:700;color:rgba(255,255,255,.85); border-top:1px solid rgba(255,255,255,.08); } .main-header-menu li:first-child a{border-top:none} .main-header-menu li a:hover,.main-navigation li a:hover{color:var(--gold)} .main-header-menu li.current-menu-item > a,.current-menu-item > a{color:var(--gold)} /* Mobile menu toggle — vanilla, no JS-framework assumptions */ .menu-toggle,.ast-mobile-menu-trigger-minimal{ display:inline-flex;align-items:center;gap:8px; background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18); color:#fff;font-weight:700;font-size:.8rem; padding:9px 14px;border-radius:var(--radius-sm); } @media (min-width:640px){ .main-header-menu,.main-navigation ul,nav ul{flex-direction:row;flex-wrap:wrap;gap:4px} .main-header-menu li a,.main-navigation li a,nav li a{border-top:none;padding:10px 14px;border-radius:var(--radius-sm)} .main-header-menu li a:hover,.main-navigation li a:hover{background:rgba(255,255,255,.08)} } /* ══════════════════════════════════════════════════════════════ 4. BUTTONS — same two variants used across the CTA band on the archive template, promoted to reusable, unscoped classes. ══════════════════════════════════════════════════════════════ */ .btn,.wp-block-button__link,button[type="submit"],input[type="submit"]{ display:inline-flex;align-items:center;justify-content:center;gap:7px; padding:11px 20px;border-radius:var(--radius-md); font-family:var(--font-body);font-size:.85rem;font-weight:800; border:none;cursor:pointer; } .btn-primary,.wp-block-button__link,button[type="submit"],input[type="submit"]{background:var(--red);color:#fff} .btn-primary:hover,.wp-block-button__link:hover,button[type="submit"]:hover,input[type="submit"]:hover{background:var(--red-dark);color:#fff} .btn-outline{background:rgba(255,255,255,.1);color:#fff;border:2px solid rgba(255,255,255,.28)} .btn-outline:hover{background:rgba(255,255,255,.18);color:#fff} .btn-secondary{background:var(--blue);color:#fff} .btn-secondary:hover{background:var(--blue-dark);color:#fff} /* ══════════════════════════════════════════════════════════════ 5. CARDS — generalised version of .bc-item so widgets, related posts, and shortcode grids elsewhere on the site can reuse the exact same card language as the archive. ══════════════════════════════════════════════════════════════ */ .card,.bc-item{ background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg); overflow:hidden;display:flex;flex-direction:column;position:relative; } .card-accent{height:4px;background:var(--blue);flex-shrink:0} .card-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px} .card-icon{width:36px;height:36px;border-radius:9px;background:var(--bg-alt);border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0} .card-icon svg{width:16px;height:16px;fill:var(--blue)} .card-kicker{font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)} .card-title{font-size:.95rem;font-weight:800;color:var(--text-dark);line-height:1.3} .card-title a:hover{color:var(--blue)} .card-excerpt{font-size:.82rem;color:var(--text-muted);line-height:1.6} .card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;border-top:1px solid var(--border);background:var(--offwhite);flex-wrap:wrap} .card-grid{display:grid;grid-template-columns:1fr;gap:14px} @media (min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:860px){.card-grid{grid-template-columns:repeat(3,1fr)}} /* ══════════════════════════════════════════════════════════════ 6. SINGLE POST / PAGE CONTENT — typography for the.entry-content body rendered by index.php's article/the_content() block. ══════════════════════════════════════════════════════════════ */ .entry-content,article .content{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)} .entry-content h2{font-size:1.4rem;margin-top:1.5em} .entry-content h3{font-size:1.15rem;margin-top:1.25em} .entry-content p{font-size:.95rem;line-height:1.75;color:var(--text-body)} .entry-content a{border-bottom:1px solid currentColor} .entry-content ul,.entry-content ol{margin:0 0 1em;padding-left:1.4em} .entry-content li{margin-bottom:.4em} .entry-content blockquote{ margin:1.25em 0;padding:14px 18px;background:var(--bg-alt); border-left:4px solid var(--blue);border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-style:italic;color:var(--text-dark); } .entry-content table{width:100%;border-collapse:collapse;margin:1.25em 0;font-size:.85rem} .entry-content table th,.entry-content table td{border:1px solid var(--border);padding:9px 12px;text-align:left} .entry-content table th{background:var(--offwhite);font-weight:800;color:var(--text-dark)} .entry-content table tr:nth-child(even){background:var(--offwhite)} .entry-content figure{margin:1.25em 0} .entry-content figure img{border-radius:var(--radius-lg)} .entry-content figcaption,.wp-caption-text{font-size:.78rem;color:var(--text-muted);text-align:center;margin-top:6px} .entry-content code{background:var(--bg-alt);padding:2px 6px;border-radius:4px;font-size:.85em} .entry-content pre{background:var(--text-dark);color:#fff;padding:14px;border-radius:var(--radius-sm);overflow-x:auto} /* Post header meta (category / author / date) reused from the archive card kicker style */ article header .category,article header .author,article header .date, .entry-meta{font-size:.7rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em} /* ══════════════════════════════════════════════════════════════ 7. WORDPRESS CORE ALIGNMENT / GALLERY CLASSES ══════════════════════════════════════════════════════════════ */ .alignleft{float:left;margin:0 1.25em 1em 0} .alignright{float:right;margin:0 0 1em 1.25em} .aligncenter{display:block;margin:1em auto} .wp-caption{max-width:100%} .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:1.25em 0} .gallery-item img{border-radius:var(--radius-sm)} @media (min-width:640px){.gallery-columns-3{grid-template-columns:repeat(3,1fr)}.gallery-columns-4{grid-template-columns:repeat(4,1fr)}} /* ══════════════════════════════════════════════════════════════ 8. FORMS — comment form, search, contact forms; same input language as the archive template's .bc-search field. ══════════════════════════════════════════════════════════════ */ input[type="text"],input[type="email"],input[type="tel"],input[type="url"], input[type="search"],input[type="number"],textarea,select{ width:100%;background:var(--offwhite);border:1.5px solid var(--border); border-radius:var(--radius-sm);padding:10px 12px; font-family:var(--font-body);font-size:.87rem;font-weight:500;color:var(--text-dark); } input:focus,textarea:focus,select:focus{border-color:var(--blue);outline:none} label{display:block;font-size:.78rem;font-weight:700;color:var(--text-body);margin-bottom:6px} .form-row{margin-bottom:14px} /* ══════════════════════════════════════════════════════════════ 9. COMMENTS ══════════════════════════════════════════════════════════════ */ .comment-list{list-style:none;padding:0;margin:1.5em 0} .comment{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-md);padding:14px;margin-bottom:12px} .comment .comment-author{font-weight:800;color:var(--text-dark);font-size:.85rem} .comment .comment-metadata{font-size:.72rem;color:var(--text-muted);margin-bottom:6px} .comment-respond{background:var(--offwhite);border-radius:var(--radius-md);padding:16px;margin-top:1.5em} /* ══════════════════════════════════════════════════════════════ 10. SIDEBAR / WIDGETS — used on default sidebar templates (the universal archive itself is intentionally sidebar-free) ══════════════════════════════════════════════════════════════ */ .widget{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px} .widget-title{font-size:.95rem;font-weight:900;color:var(--text-dark);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)} .widget ul{list-style:none;padding:0;margin:0} .widget li{padding:7px 0;border-bottom:1px solid var(--border);font-size:.85rem} .widget li:last-child{border-bottom:none} /* ══════════════════════════════════════════════════════════════ 11. PAGINATION — identical rules to .bc-pagination, unscoped so single/blog listings outside the archive template match. ══════════════════════════════════════════════════════════════ */ .pagination,.page-links,.nav-links{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:24px} .pagination .page-numbers,.page-links a,.page-links span{ display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px; padding:0 8px;border-radius:8px;background:var(--white);border:1.5px solid var(--border); font-size:.8rem;font-weight:700;color:var(--text-body); } .pagination .page-numbers.current,.page-links span.current{background:var(--blue);color:#fff;border-color:var(--blue)} /* ══════════════════════════════════════════════════════════════ 12. FOOTER — dark band mirroring the CTA section styling on the archive template, plus footer widget areas. ══════════════════════════════════════════════════════════════ */ .site-footer,.ast-footer,footer[role="contentinfo"],footer{ background:var(--hero-navy);color:rgba(255,255,255,.62); padding-top:32px;padding-bottom:32px; } .site-footer a,.ast-footer a,footer a{color:rgba(255,255,255,.85)} .site-footer a:hover,.ast-footer a:hover,footer a:hover{color:var(--gold)} .site-footer .widget-title,.ast-footer .widget-title{color:#fff} .site-footer .widget,.ast-footer .widget{background:transparent;border:none;padding:0} .site-footer .widget li,.ast-footer .widget li{border-bottom:1px solid rgba(255,255,255,.1)} .footer-widgets{display:grid;grid-template-columns:1fr;gap:20px} @media (min-width:640px){.footer-widgets{grid-template-columns:repeat(2,1fr)}} @media (min-width:860px){.footer-widgets{grid-template-columns:repeat(4,1fr)}} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:24px;padding-top:16px;font-size:.72rem;text-align:center;color:rgba(255,255,255,.4)} /* ══════════════════════════════════════════════════════════════ 13. FLOATING SPLIT PILL + BACK-TO-TOP — sitewide versions of the same fixed elements the archive template renders, so templates that don't inline their own copy still get them. ══════════════════════════════════════════════════════════════ */ .site-float-pill{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:300;display:flex;align-items:stretch;border-radius:var(--radius-pill);overflow:hidden;box-shadow:0 6px 20px rgba(13,27,56,.28)} .site-float-pill a{display:flex;align-items:center;gap:8px;padding:13px 20px;color:#fff;font-size:.85rem;font-weight:800;white-space:nowrap} .site-pill-call{background:var(--blue)} .site-pill-wa{background:var(--green)} .site-pill-call:hover{background:var(--blue-dark);color:#fff} .site-pill-wa:hover{background:var(--green-dark);color:#fff} .site-back-to-top{position:fixed;right:18px;bottom:18px;z-index:300;width:44px;height:44px;border-radius:50%;background:var(--white);border:1.5px solid var(--border);color:var(--blue);display:none;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;box-shadow:0 4px 14px rgba(13,27,56,.18)} .site-back-to-top.visible{display:flex} .site-back-to-top:hover{border-color:var(--blue)} /* Keep fixed elements from covering page content */ body{padding-bottom:0} footer{padding-bottom:90px} /* ══════════════════════════════════════════════════════════════ 14. STAT PILLS / EYEBROWS / BREADCRUMBS — reusable outside the hero too (e.g. page-header on non-archive templates). ══════════════════════════════════════════════════════════════ */ .crumb{display:flex;flex-wrap:wrap;gap:6px;font-size:.74rem;font-weight:600;color:rgba(255,255,255,.5);margin-bottom:14px} .crumb a{color:rgba(255,255,255,.75)} .crumb a:hover{color:#fff} .crumb span[aria-hidden]{color:rgba(255,255,255,.3)} .eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(245,166,35,.16);border:1px solid rgba(245,166,35,.35);padding:4px 10px;border-radius:20px;margin-bottom:12px} .stat-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6);font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:20px} .stat-pill strong{color:#fff;font-weight:900} /* ══════════════════════════════════════════════════════════════ 15. UTILITIES ══════════════════════════════════════════════════════════════ */ .text-muted{color:var(--text-muted)} .text-center{text-align:center} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ══════════════════════════════════════════════════════════════ 16. RESPONSIVE — same three breakpoints as the archive template so the whole site reflows in lockstep. ══════════════════════════════════════════════════════════════ */ @media (min-width:480px){ .footer-widgets{gap:16px} } @media (min-width:640px){ h1{font-size:2rem} h2{font-size:1.6rem} .entry-content{padding:0 0} .card-grid{gap:16px} } @media (min-width:860px){ h1{font-size:2.4rem} } @media print{ .site-float-pill,.site-back-to-top,.menu-toggle,.comment-respond{display:none} }