/* ============================================================ MyVegina – Restored & Redesigned Stylesheet Targets Kale theme HTML structure + Bootstrap classes ============================================================ */ /* ── Google Fonts (already linked in ) ── */ /* Montserrat · Lato · Raleway · Caveat */ /* ============================================================ 1. RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; scroll-behavior: smooth; } body { font-family: 'Lato', sans-serif; font-size: 1.5rem; font-weight: 400; line-height: 1.75; color: #3a3a3a; /* leaf background comes from WordPress inline style – body.custom-background already sets it */ background-color: #c8dfc0; /* fallback if image not loaded */ } a { color: #4a8a5a; text-decoration: none; transition: color .2s; } a:hover { color: #2d6640; } img { max-width: 100%; height: auto; display: block; } p { margin: 0 0 1.6rem; } ul { margin: 0; padding: 0; list-style: none; } h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.25; color: #2a2a2a; margin: 0 0 1.2rem; } /* ============================================================ 2. BOOTSTRAP GRID (minimal restore) ============================================================ */ .container { max-width: 980px; width: 100%; margin: 0 auto; padding: 0; } .row { display: flex; flex-wrap: wrap; margin: 0 -1.5rem; } .row::after { content: ''; display: table; clear: both; } [class*="col-"] { padding: 0 1.5rem; width: 100%; } @media (min-width: 768px) { .col-sm-6 { width: 50%; } } @media (min-width: 992px) { .col-md-4 { width: 33.333%; } .col-md-6 { width: 50%; } .col-md-8 { width: 66.666%; } .col-md-12 { width: 100%; } } /* ============================================================ 3. MAIN WRAPPER – white card over the leaf bg ============================================================ */ .main-wrapper { background: transparent; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 0; } .main-wrapper > .container { background: #fff; box-shadow: 0 0 60px rgba(0, 0, 0, .15), 0 0 0 1px rgba(255,255,255,.6); position: relative; min-height: 100vh; } /* ============================================================ 4. HEADER ============================================================ */ /* Top utility bar – hide it, it's empty */ .header-row-1, .header-row-1-toggle { display: none; } /* Logo row */ .header-row-2 { padding: 3.5rem 4rem 2rem; text-align: center; border-bottom: 1px solid #eee; } .header-row-2 .logo { display: inline-block; } /* Logo image (custom-logo-link wraps an img) */ .header-row-2 .logo .custom-logo-link img { max-height: 12rem; width: auto; margin: 0 auto; } /* Fallback text logo if image is missing */ .header-row-2 .logo a:not([class]) { display: block; } /* Site title fallback (if logo image doesn't load) */ .site-title, .site-title a { font-family: 'Caveat', cursive; font-size: 5rem; font-weight: 700; color: #2d6640; letter-spacing: .05em; text-decoration: none; } /* ============================================================ 5. NAVIGATION ============================================================ */ .header-row-3 { background: #fff; border-top: 1px solid #eee; border-bottom: 2px solid #e8f0e4; position: sticky; top: 0; z-index: 100; } .navbar { margin: 0; padding: 0; border: none; background: transparent; } .navbar-header { display: none; } .navbar-collapse { display: block !important; } .nav.navbar-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; } .nav.navbar-nav > li > a { display: block; padding: 1.6rem 2rem; font-family: 'Montserrat', sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #555; text-decoration: none; transition: color .2s, background .2s; white-space: nowrap; border-bottom: 3px solid transparent; } .nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active > a, .nav.navbar-nav > li.current-menu-item > a { color: #2d6640; border-bottom-color: #2d6640; background: #f7fbf5; } /* Search in nav */ .nav.navbar-nav > li.search > a { font-size: 1.4rem; color: #888; border-bottom: none; } .nav.navbar-nav > li.search > a:hover { color: #2d6640; background: transparent; } .dropdown-menu.main_search { position: absolute; right: 0; top: 100%; background: #fff; border: 1px solid #e0e8dc; padding: 1.2rem; min-width: 24rem; box-shadow: 0 6px 20px rgba(0,0,0,.1); display: none; } .dropdown-menu.main_search input { width: 100%; padding: 1rem 1.4rem; border: 1px solid #c8dfc0; border-radius: 2rem; font-size: 1.4rem; outline: none; } .dropdown-menu.main_search input:focus { border-color: #4a8a5a; } /* Mobile toggle */ @media (max-width: 767px) { .navbar-header { display: block; text-align: right; padding: 1rem 2rem; } .navbar-toggle { background: none; border: 1.5px solid #2d6640; border-radius: 3px; padding: .6rem .9rem; cursor: pointer; } .navbar-toggle .icon-bar { display: block; width: 2.2rem; height: 2px; background: #2d6640; margin: .4rem 0; } .navbar-collapse { display: none !important; } .navbar-collapse.in { display: block !important; } .nav.navbar-nav { flex-direction: column; align-items: flex-start; padding: 1rem 0; } .nav.navbar-nav > li { width: 100%; } .nav.navbar-nav > li > a { padding: 1.1rem 2.5rem; border-bottom: 1px solid #f0f4ee; } .nav.navbar-nav > li > a:hover { border-bottom-color: #f0f4ee; } } /* ============================================================ 6. PAGE BANNER / HERO (frontpage or page header) ============================================================ */ .frontpage-banner, .page-header-banner { position: relative; overflow: hidden; max-height: 45rem; } .frontpage-banner img, .page-header-banner img { width: 100%; object-fit: cover; } .frontpage-banner .banner-text, .page-header-banner .banner-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 3rem 4rem; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); } .frontpage-banner .banner-text h2, .page-header-banner .banner-text h2 { font-family: 'Montserrat', sans-serif; font-size: 2.8rem; font-weight: 700; color: #fff; letter-spacing: .15em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.4); margin: 0; } /* Owl carousel restore */ .owl-carousel { display: block; position: relative; } .owl-carousel-item { position: relative; } .owl-carousel-item img { width: 100%; } .owl-carousel-item .frontpage-banner-text { position: absolute; bottom: 3rem; left: 4rem; right: 4rem; font-family: 'Montserrat', sans-serif; font-size: 2.2rem; font-weight: 700; color: #fff; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 2px 8px rgba(0,0,0,.4); } /* ============================================================ 7. MAIN CONTENT AREA ============================================================ */ .two-columns { padding: 4rem; } .main-column { min-height: 40rem; } /* ============================================================ 8. ENTRY / PAGE CONTENT ============================================================ */ .entry { padding: 0; } .entry-title { font-family: 'Montserrat', sans-serif; font-size: 2.6rem; font-weight: 700; color: #2d6640; letter-spacing: .05em; margin: 0 0 2.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid #e8f0e4; position: relative; } .entry-title::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 5rem; height: 2px; background: #4a8a5a; } .page-content { font-size: 1.55rem; line-height: 1.8; color: #444; } .page-content p { margin-bottom: 1.6rem; } .page-content strong { color: #2d6640; font-weight: 700; } /* Highlighted text (green bg used on social media page) */ .page-content span[style*="background-color: #ccffcc"], .page-content span[style*="background-color:#ccffcc"] { background: #e8f6e4 !important; color: #2d6640; padding: .2rem .6rem; border-radius: 3px; font-weight: 600; font-size: 1.45rem; } /* Instagram / social handles */ .page-content p:has(strong) { padding: .8rem 0; border-bottom: 1px solid #f5f5f5; } /* ============================================================ 9. SIDEBAR (if used) ============================================================ */ .widget { margin-bottom: 3rem; padding: 2rem 2.5rem; background: #f7fbf5; border-left: 3px solid #4a8a5a; } .widget-title { font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #2d6640; margin-bottom: 1.5rem; padding-bottom: .8rem; border-bottom: 1px solid #d8ecd4; } /* ============================================================ 10. FOOTER WIDGETS ============================================================ */ .footer-widgets { padding: 3rem 4rem 0; background: #f7fbf5; border-top: 2px solid #e8f0e4; } .footer-widgets hr { border: none; border-top: 1px solid #e0ead8; margin: 2rem 0 0; } .footer-row-2 { padding-bottom: 2rem; } /* ============================================================ 11. FOOTER ============================================================ */ .footer { padding: 2.5rem 4rem; background: #2d4a35; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copyright { font-size: 1.25rem; color: rgba(255,255,255,.6); margin: 0; } .footer-copyright a { color: rgba(255,255,255,.85); } .footer-copyright a:hover { color: #fff; } .footer-copyright .credit { display: flex; gap: 1.5rem; flex-wrap: wrap; list-style: none; } .footer-copyright .credit li { color: rgba(255,255,255,.4); font-size: 1.1rem; } /* ============================================================ 12. FRONTPAGE-SPECIFIC (Welcome page) ============================================================ */ .frontpage-welcome { padding: 4rem; background: linear-gradient(135deg, #f7fbf5 0%, #fff 100%); border-bottom: 1px solid #e8f0e4; } .frontpage-welcome h1 { font-family: 'Caveat', cursive; font-size: 4rem; color: #2d6640; font-weight: 700; margin-bottom: 1.5rem; } .frontpage-welcome p { font-size: 1.65rem; color: #555; } /* Info pills (hours, location) */ .info-pill { display: inline-flex; align-items: center; gap: .8rem; background: #e8f6e4; border: 1px solid #b8ddb8; border-radius: 2rem; padding: .6rem 1.6rem; font-size: 1.3rem; font-weight: 600; color: #2d6640; margin: .4rem .3rem; } /* ============================================================ 13. SOCIAL MEDIA PAGE STYLES ============================================================ */ .social-handle-list { margin: 2rem 0; } .social-handle-list p { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f0f4ee; font-size: 1.45rem; } .social-handle-list p strong { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #2d6640; font-size: 1.35rem; background: #e8f6e4; padding: .25rem .8rem; border-radius: .3rem; } /* Instagram feed placeholder */ #sbi_images, .sbi_follow_btn, [id^="sbg_"] { /* Instagram feed plugin */ } /* ============================================================ 14. BUTTONS ============================================================ */ .btn, a.btn { display: inline-block; padding: 1.1rem 2.8rem; font-family: 'Montserrat', sans-serif; font-size: 1.25rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: 3rem; cursor: pointer; transition: all .2s; text-decoration: none; } .btn-primary, a.btn-primary { background: #2d6640; color: #fff; border: 2px solid #2d6640; } .btn-primary:hover, a.btn-primary:hover { background: #1e4d2c; border-color: #1e4d2c; color: #fff; } .btn-outline, a.btn-outline { background: transparent; color: #2d6640; border: 2px solid #2d6640; } .btn-outline:hover, a.btn-outline:hover { background: #2d6640; color: #fff; } /* ============================================================ 15. SKIP LINK ============================================================ */ .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus { position: fixed; top: 0; left: 0; width: auto; height: auto; padding: 1rem 2rem; background: #2d6640; color: #fff; z-index: 9999; font-size: 1.4rem; } /* ============================================================ 16. SCREEN-READER / ACCESSIBILITY ============================================================ */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute; overflow: hidden; height: 1px; width: 1px; word-wrap: normal; } /* ============================================================ 17. RESPONSIVE ============================================================ */ @media (max-width: 992px) { .main-wrapper > .container { max-width: 100%; } .two-columns { padding: 3rem 2.5rem; } .footer-widgets { padding: 2.5rem 2.5rem 0; } .footer { padding: 2rem 2.5rem; } } @media (max-width: 767px) { .header-row-2 { padding: 2rem; } .two-columns { padding: 2rem 1.8rem; } .entry-title { font-size: 2.2rem; } .footer { flex-direction: column; align-items: center; text-align: center; padding: 2rem; } .footer-copyright .credit { justify-content: center; } .two-columns .row { flex-direction: column; } .two-columns .row [class*="col-"] { padding: 0; } } /* ============================================================ 18. NICE EXTRAS (beyond the original) ============================================================ */ /* Smooth hover on nav links */ .nav.navbar-nav > li { position: relative; } .nav.navbar-nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 3px; background: #2d6640; transition: left .2s, right .2s; } .nav.navbar-nav > li > a:hover::after, .nav.navbar-nav > li.active > a::after { left: 0; right: 0; } /* Pull-quote style for highlighted paragraphs */ .page-content blockquote { border-left: 3px solid #4a8a5a; padding: 1.5rem 2rem; background: #f7fbf5; font-size: 1.7rem; font-style: italic; color: #2d6640; margin: 2.5rem 0; } /* Green dot bullet list style */ .page-content ul { list-style: none; padding: 0; } .page-content ul li { padding: .4rem 0 .4rem 2rem; position: relative; color: #555; } .page-content ul li::before { content: '✿'; position: absolute; left: 0; color: #4a8a5a; font-size: 1.2rem; top: .5rem; } /* Divider line */ hr { border: none; border-top: 1px solid #e8f0e4; margin: 3rem 0; } /* Entry image caption */ .wp-caption-text { font-size: 1.2rem; color: #888; text-align: center; font-style: italic; margin-top: .5rem; } /* Page content images */ .page-content img { border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.08); } /* ============================================================ END OF STYLESHEET ============================================================ */