/* Theme Name: Music By Norman Child Theme URI: [Your Site URL Here] Description: Custom child theme for the Cultural Festival parent theme. Author: [Your Name Here] Template: cultural-festival Version: 1.0.0 */ /* ----------------------------------------------------------------------------------- */ /* 1. STICKY FOOTER FIXES (Keep these to fix layout) */ /* ----------------------------------------------------------------------------------- */ /* 1. Set HTML and BODY to minimum viewport height and establish the Flex context. */ html, body { height: 100%; } /* 2. Target the main site wrapper */ #page, .site, .site-wrapper { display: flex; flex-direction: column; min-height: 100vh; /* Anchor to bottom of viewport */ } /* 3. Make the entire content area grow to push the footer down. */ #primary, #content, .site-content, main { flex: 1 1 auto; } /* 4. Account for WP admin bar when logged in (desktop) */ .admin-bar #page, .admin-bar .site, .admin-bar .site-wrapper { min-height: calc(100vh - 32px); /* Subtract admin bar height */ } /* 5. Cleanup for Mobile Admin Bar */ @media (max-width: 782px) { .admin-bar #page, .admin-bar .site, .admin-bar .site-wrapper { min-height: 100vh; /* Reset on mobile */ } } /* ----------------------------------------------------------------------------------- */ /* 2. CUSTOM LAYOUT/SIDEBAR FIXES (Keep if this is still needed) */ /* ----------------------------------------------------------------------------------- */ .global-layout-no-sidebar #primary { width: 100%; min-height: 80vh; } /* ----------------------------------------------------------------------------------- */ /* 3. IMPORTANT: REMOVE CONFLICTING HEADER CSS */ /* ----------------------------------------------------------------------------------- */ /* All previous styles like .header-image-wrapper and .custom-header-wrapper and complex video styles MUST BE REMOVED to prevent conflict with the inline CSS injected by functions.php (using selectors like .cfc-header). */ /* --- FIX: RESTORE SPACE ABOVE MAIN NAVIGATION --- */ /* 1. Target the site header wrapper. Use this if the menu is inside the header element. */ .site-header, #masthead { padding-top: 10px !important; /* Adds vertical space above the entire header section */ } /* 2. Target the menu bar itself, in case the previous fix doesn't work. */ /* This targets the container holding your HOME, SHOP, FORUMS links. */ .main-navigation-holder, .main-navigation { margin-top: 5px !important; } /* 3. FINAL RESCUE: If the main header bar itself is the issue, add margin to the menu list. */ /* This is a common final step */ .main-navigation ul { margin-top: 0; padding-top: 0; } /* --- FIX: RESTORE SPACE ABOVE MAIN NAVIGATION --- */ /* 1. TARGET THE ABSOLUTE TOP OF THE PAGE */ /* The html element is the highest selector and should force space at the top. */ html { padding-top: 15px !important; /* Adjust '15px' for the desired gap */ /* Ensure no vertical offset is applied */ top: auto !important; } /* 2. COMPENSATE FOR ADMIN BAR (if you are logged in) */ /* This is often the culprit. It pushes the body content down by the admin bar height. */ .admin-bar .site-header, .admin-bar #masthead { /* If the admin bar is present, the space needs to be added *below* the admin bar */ padding-top: 5px !important; } /* 3. TARGET THE MENU CONTAINER ITSELF (Highest priority check) */ /* This ensures the specific menu wrapper is not set to top:0; */ .site-header, #masthead, .main-navigation-holder { margin-top: 0 !important; /* Ensure no negative margin is pulling it up */ position: relative !important; /* Ensure it respects the normal flow */ } /* --- FIX: RESTORE SPACE ABOVE MAIN NAVIGATION --- */ /* This targets the tag *when the Admin Bar is active* and adds padding */ /* This is often necessary because the Admin Bar applies a CSS 'top: 0;' rule that overrides padding on the body/header. */ .admin-bar html { padding-top: 0 !important; /* Reset any bad padding */ } /* This targets the main content body when the Admin Bar is active */ .admin-bar body { /* Set padding/margin to account for the Admin Bar and add extra space */ padding-top: 0 !important; margin-top: 32px !important; /* Standard Admin Bar height */ } /* Now, push the header *below* the admin bar and restore your custom spacing */ .site-header, #masthead, .main-navigation-holder { /* Ensure the menu starts right where the Admin Bar ends */ top: 0 !important; /* Add your desired spacing ABOVE the menu bar */ padding-top: 15px !important; position: relative !important; } /* Final Fallback if the Admin Bar is NOT the issue */ html { padding-top: 15px !important; } /* Grid */ .bbp-forums-card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:22px; margin-top:18px; } /* Card */ .bbp-card{ background:#fff; border-radius:18px; box-shadow:0 8px 24px rgba(0,0,0,.08); overflow:hidden; display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease; border:1px solid rgba(0,0,0,.06); } .bbp-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.12); } /* Media */ .bbp-card-media{ width:100%; height:140px; background-size:cover; background-position:center; } /* Body */ .bbp-card-body{ padding:18px; display:flex; flex-direction:column; gap:10px; } .bbp-card-title{ font-size:1.05rem; margin:0; } .bbp-card-title a{ text-decoration:none; } .bbp-card-text{ margin:0; color:#444; line-height:1.45; } /* Meta */ .bbp-card-meta{ display:flex; flex-wrap:wrap; gap:12px; font-size:.9rem; color:#666; } .bbp-card-meta .bbp-card-freshness a{ text-decoration:none; } /* Actions */ .bbp-card-actions{ margin-top:auto; display:flex; gap:10px; } .bbp-btn{ display:inline-block; padding:10px 14px; border-radius:10px; text-decoration:none; border:1px solid transparent; } .bbp-btn-primary{ background:#ff007f; color:#fff; } .bbp-btn-primary:hover{ filter:brightness(.95); } .bbp-btn-ghost{ background:transparent; border-color:#ff007f; color:#ff007f; } .bbp-btn-ghost:hover{ background:rgba(255,0,127,.06); } /* UM GROUPS NEW LAYOUT */ /* ============================================================ POSIVRA – UM GROUP SINGLE LAYOUT Works with: your-child-theme/ultimate-member/um-groups/single.php ============================================================ */ /* Outer wrapper */ .posivra-group-page.um-groups-single { max-width: 1120px; margin: 30px auto 40px; background: #ffffff; border-radius: 18px; box-shadow: 0 14px 40px rgba(15, 23, 42, 0.15); overflow: hidden; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* ===== HEADER / COVER ====================================== */ .posivra-group-header { background: #f9fafb; } /* cover container */ .posivra-group-cover-wrapper { position: relative; } /* cover itself */ .posivra-group-cover { height: 230px; background: linear-gradient(135deg, #293b7a, #7b48c5); background-size: cover; background-position: center center; position: relative; } /* when no image uploaded */ .posivra-group-cover.no-image { display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.8); font-size: 13px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); } .posivra-group-cover-placeholder { padding: 10px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.3); } /* dark gradient overlay for readability */ .posivra-group-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.55) ); } /* ===== HEADER INNER: AVATAR + TITLE + ACTIONS ============== */ .posivra-group-header-inner { position: relative; padding: 0 32px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: -70px; /* pull up over the cover */ z-index: 2; } /* LEFT: avatar / mini directory card */ .posivra-group-avatar-wrap { flex-shrink: 0; } /* The directory template inside header – strip it down */ .posivra-group-directory-mini .um-groups-list, .posivra-group-directory-mini .um-groups-single { margin: 0; } /* Make sure the avatar is a big round circle */ .posivra-group-directory-mini .um-group-item, .posivra-group-directory-mini .um-group-single-header, .posivra-group-directory-mini .um-groups-card { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } /* Try to hit the avatar image */ .posivra-group-directory-mini img, .posivra-group-directory-mini .um-group-avatar img, .posivra-group-directory-mini .um-group-avatar { width: 120px !important; height: 120px !important; border-radius: 999px !important; border: 4px solid #ffffff !important; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.55); object-fit: cover; } /* Hide directory text we don’t need in the avatar slot */ .posivra-group-directory-mini .um-group-name, .posivra-group-directory-mini .um-group-meta, .posivra-group-directory-mini .um-group-description, .posivra-group-directory-mini .um-group-actions { display: none !important; } /* RIGHT: title & actions */ .posivra-group-header-meta { flex: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; color: #f9fafb; } /* group name and meta */ .posivra-group-title-block { display: flex; flex-direction: column; gap: 6px; } .posivra-group-name { margin: 0; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: 0.015em; color: #ffffff; } .posivra-group-meta-line { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: rgba(249, 250, 251, 0.9); } /* privacy pill */ .posivra-group-privacy-pill { padding: 4px 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.7); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .posivra-group-members-count { font-size: 13px; } /* actions (join / invite etc.) */ .posivra-group-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } .posivra-group-actions .um-button, .posivra-group-actions a.button, .posivra-group-actions button { border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.35); } /* if UM outputs "primary" class use blue; otherwise keep white */ .posivra-group-actions .um-button, .posivra-group-actions .button-primary { background: #2563eb; color: #ffffff; } .posivra-group-actions .button-secondary, .posivra-group-actions .um-alt { background: rgba(15, 23, 42, 0.28); color: #f9fafb; } /* ===== TABS NAV ============================================ */ .posivra-group-tabs-nav { padding: 0 32px; border-bottom: 1px solid #e5e7eb; background: #ffffff; } /* Try to catch the tab list output by UM */ .posivra-group-tabs-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 28px; } .posivra-group-tabs-nav li { margin: 0; } .posivra-group-tabs-nav a { display: inline-block; padding: 14px 0; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #6b7280; text-decoration: none; position: relative; } .posivra-group-tabs-nav a:hover { color: #111827; } /* active state – UM usually adds .current or .active */ .posivra-group-tabs-nav .current a, .posivra-group-tabs-nav a.current, .posivra-group-tabs-nav .active a, .posivra-group-tabs-nav a.active { color: #111827; } .posivra-group-tabs-nav .current a::after, .posivra-group-tabs-nav a.current::after, .posivra-group-tabs-nav .active a::after, .posivra-group-tabs-nav a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 999px 999px 0 0; background: #2563eb; /* blue underline like FB */ } /* ===== BODY – TWO COLUMN LAYOUT =========================== */ .posivra-group-body { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(260px, 1fr); gap: 28px; padding: 24px 32px 32px; background: #f3f4f8; } /* LEFT column */ .posivra-group-main { min-width: 0; } /* RIGHT column – sidebar */ .posivra-group-sidebar { display: flex; flex-direction: column; gap: 16px; } /* ===== SIDEBAR CARDS ====================================== */ .posivra-group-card { background: #ffffff; border-radius: 16px; padding: 14px 16px 16px; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07); font-size: 14px; } .posivra-group-card-title { margin: 0 0 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #4b5563; } .posivra-group-card-text { font-size: 14px; line-height: 1.5; color: #374151; } /* rules list formatting */ .posivra-group-rules-list { margin: 6px 0 0 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #374151; } .posivra-group-rules-list li + li { margin-top: 4px; } /* ===== TAB CONTENT STYLING HOOK =========================== */ /* give discussion / content area a bit of separation */ .posivra-group-main .um-group-tab-content-wrap { background: transparent; box-shadow: none; } /* if UM outputs activity items, you can start from this: */ .posivra-group-main .um-activity-item, .posivra-group-main .um-groups-discussion-single { background: #ffffff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06); margin-bottom: 14px; } /* ===== LOGGED OUT MESSAGE ================================= */ .posivra-group-logged-out { padding: 32px; } /* ===== RESPONSIVE / MOBILE ================================ */ @media (max-width: 768px) { .posivra-group-page.um-groups-single { border-radius: 0; box-shadow: none; margin: 0; } .posivra-group-header-inner { flex-direction: column; align-items: flex-start; margin-top: -60px; padding: 0 16px 16px; gap: 14px; } .posivra-group-directory-mini img, .posivra-group-directory-mini .um-group-avatar img, .posivra-group-directory-mini .um-group-avatar { width: 90px !important; height: 90px !important; } .posivra-group-header-meta { flex-direction: column; align-items: flex-start; gap: 10px; } .posivra-group-actions { justify-content: flex-start; } .posivra-group-tabs-nav { padding: 0 16px; overflow-x: auto; } .posivra-group-tabs-nav ul { gap: 18px; } .posivra-group-body { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 24px; } .posivra-group-sidebar { order: -1; /* sidebar above or below as you like */ } }