/* ============================================================ TEACOSY FESTIVAL - CUSTOM CSS (rewritten & commented) ============================================================ This is a full rewrite of your Additional CSS, with: - Genuine syntax errors fixed (marked FIXED below) - Rules that were unintentionally global now scoped to the page(s) they were originally meant for (marked SCOPED) - Anything I'm genuinely guessing at is marked GUESS - Anything I don't recognise from our work together is marked UNKNOWN ORIGIN - presumably your own addition; I've kept it as-is unless it was broken Please read through the flagged comments before replacing your live CSS with this - a few of these change real, currently-broken behaviour, not just tidy-up. ============================================================ */ /* ------------------------------------------------------------ NAVIGATION ------------------------------------------------------------ */ /* UNKNOWN ORIGIN. FIXED two real bugs: 1. "alignment-adjust right;" is not valid CSS at all (no colon, and alignment-adjust isn't a real supported property) - removed. 2. "font-size: 52vw" is enormous - 52% of the viewport width. On a 1000px-wide screen that's a 520px font size for your whole nav menu. This looks like a typo (maybe meant a much smaller value, e.g. 1.2vw?) - I've commented it out rather than guess at a replacement number. Uncomment and adjust once you decide. */ .main-navigation { padding-left: 0em; padding-right: 0em; opacity: 100%; background: white; /* font-size: 52vw; -- FIXED: removed, almost certainly a typo. See comment above. */ } /* ------------------------------------------------------------ BROWSER CHROME / SCROLLBAR (from our session on this) ------------------------------------------------------------ */ html { background-color: transparent; background-image: none; scrollbar-color: #999999 var(--teacosy-page-bg, transparent); } html::-webkit-scrollbar-track { background-color: var(--teacosy-page-bg, transparent); } /* UNKNOWN ORIGIN - not something we discussed. Presumably your own addition for a specific search menu somewhere. Left as-is. */ .astm-search-menu { padding-top: 1vh !important; padding-left: 3vh !important; } /* ------------------------------------------------------------ EVENTS CALENDAR LIST PAGE (from our session on this) ------------------------------------------------------------ */ /* This rule appeared twice, identically, in your file - removed the duplicate, kept one copy. */ .tribe-events-view--list { max-width: 95vw !important; margin-left: calc(50% - 47.5vw) !important; margin-right: calc(50% - 47.5vw) !important; } .tribe-events-calendar-latest-past__event { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; } /* FIXED: there was a stray, unmatched closing brace "}" right after this rule in your file, with nothing for it to close. Browsers usually just ignore an orphaned "}" like this and carry on, but it's incorrect CSS and worth having removed for cleanliness. */ /* ------------------------------------------------------------ GLOBAL RESET ------------------------------------------------------------ FLAGGING THIS ONE SPECIFICALLY: this looks like a standard boilerplate "CSS reset" snippet that ended up placed in the middle of your file rather than at the very top (its own comment says to put it at the top!). Because it uses the universal "*" selector, its specificity is very low, so most of your other rules will still win over it - but it CAN strip default spacing from things that have no other rule touching them (e.g. default WordPress widgets, or plugin content that assumes normal browser spacing), which could cause small, hard-to-trace layout surprises elsewhere on the site. I've left it in since removing it might change things you're relying on - but wanted to flag it clearly rather than have you discover this by accident later. */ * { margin: 0; padding: 0; box-sizing: border-box; } /* GUESS/FIXED: your original had "margin-bottom:1px;!important;" - the stray semicolon BEFORE !important breaks the declaration, so !important was actually being silently ignored (the browser reads it as two declarations: a valid "margin-bottom:1px" and then an invalid, ignored "!important" on its own). Fixed the syntax below; let me know if you actually wanted !important here specifically. */ .teacosy-print-details { margin-bottom: 1px !important; margin-top: 1px !important; } /* ------------------------------------------------------------ MOBILE OFFCANVAS MENU (from our session on this) ------------------------------------------------------------ */ .sydney-offcanvas-menu { background-color: white !important; color: black; } .sydney-offcanvas-menu li a { background-color: white !important; } /* GUESS, and very likely DEAD CODE: these were an early guess at what controlled the dropdown arrow, before we confirmed (via DevTools) that the arrow is actually a real SVG icon, not a ::before/::after pseudo-element - the JS-based fix later in your PHP replaced FooGallery's actual SVG shape directly instead. This CSS block almost certainly matches nothing at all now. Safe to delete, but harmless to leave since it just never fires. */ .sydney-dropdown-toggle, .dropdown-toggle, .sub-menu-toggle, .menu-item-has-children > .dropdown-toggle, .menu-item-has-children > span.icon, .menu-item-has-children .dd-trigger { background-color: white !important; } .sydney-offcanvas-menu ul.sub-menu { background-color: white !important; } .sydney-offcanvas-menu .dropdown-toggle { background-color: white !important; } /* GUESS/DEAD CODE - same as above, superseded by the JS fix. */ .sydney-dropdown-li.menu-item-has-children > a.sydney-dropdown-link::before, .sydney-dropdown-li.menu-item-has-children > a.sydney-dropdown-link::after { background-color: white !important; } /* UNKNOWN ORIGIN - not something we discussed, but the comment explains its own purpose clearly, so left as-is. */ .sydney-hero-area + .main-content .foogallery, .page-wrap .foogallery, .foogallery-container { margin-bottom: 50px !important; /* Creates buffer space for dots */ } /* UNKNOWN ORIGIN - presumably hides a native search widget on your custom 404 page. Left as-is. */ .page-404 .widget_search { display: none; } /* ------------------------------------------------------------ ATTACHMENT DETAILS PAGE - TEXT STYLING (from our session) ------------------------------------------------------------ */ .single-attachment .teacosy-attachment-details { text-align: left; } .teacosy-print-details { font-size: 1rem !important; } /* This duplicates/conflicts with the fuller .teacosy-search-slot rule further down (which sets margin-top:13vh, then OVERWRITES it with a shorthand "margin: 2em auto 0" later in the same rule - see the note down there). Because this shorter rule appears EARLIER in the file, the later, fuller rule wins for anything they both set. This one's margin-top:14em is currently NOT the value actually applied. */ .teacosy-search-slot { margin-top: 14em; } .teacosy-details-footer a { color: #b5651d; text-decoration: underline; } /* ------------------------------------------------------------ SEARCH RESULTS PAGE SPACING (from our session) ------------------------------------------------------------ SCOPED: all of the rules in this section were originally written only with the search results page in mind, but were left unscoped in your file - meaning they applied to EVERY page on the site. This is what was causing the Details page (and other normal pages) to have their tops cut off/pulled up on mobile. I've added "body.search-results" in front of each one so they only affect the actual search results page, matching what they were built for. */ body.search-results .page-header { margin-bottom: 0px !important; /* FIXED: original was "padding-bottom: -200 !important;" - this has no unit and padding can't be negative anyway, so it was being silently ignored by the browser either way. Removed. */ } /* Search Results heading spacing - DESKTOP */ @media (min-width: 768px) { body.search-results .page-header h3{ margin-top: 160px !important; margin-bottom: 20px !important; } } /* Search Results heading spacing - MOBILE/TABLET */ @media (max-width: 767px) { body.search-results .page-header h3{ margin-top: -150px !important; margin-bottom: -70px !important; } } body.search-results .posts-layout { margin-top: 0 !important; padding-top: 0 !important; } body.search-results #primary, body.search-results .post-wrap { margin-top: 0 !important; padding-top: 0 !important; } @media (max-width: 480px) { body.search-results #content.page-wrap, body.search-results .content-wrapper.container, body.search-results .row, body.search-results .search-header, body.search-results #primary, body.search-results .post-wrap, body.search-results .page-header { margin-top: 30px !important; padding-top: 0 !important; } } @media (max-width: 767px) { body.search-results #content.page-wrap, body.search-results .content-wrapper.container, body.search-results .row, body.search-results .search-header, body.search-results #primary, body.search-results .post-wrap, body.search-results .page-header { margin-top: 50px !important; padding-top: 0 !important; } } /* FIXED: this @media block was missing its own closing brace in your file - everything below it (the grid variables, .posts-layout .row, the article-width rules, and the 992px/767px breakpoints that follow) had accidentally been trapped INSIDE this mobile-only media query, meaning your search results grid's desktop column count was likely never actually being applied. Adding the missing brace here fixes that. */ /* ------------------------------------------------------------ SEARCH RESULTS GRID (from our session) ------------------------------------------------------------ */ :root { --search-grid-columns-desktop: 3; --search-grid-columns-tablet: 2; --search-grid-columns-mobile: 1; --search-grid-gap: 24px; } .posts-layout .row { display: flex !important; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--search-grid-gap); margin-top: 0px; } .posts-layout .row > .teacosy-back-link, .posts-layout .row > .teacosy-search-slot { flex: 1 0 100%; } .posts-layout .row > article { flex: 0 0 auto; width: calc((100% - (var(--search-grid-columns-desktop) - 1) * var(--search-grid-gap)) / var(--search-grid-columns-desktop)); } @media (max-width: 992px) { .posts-layout .row > article { width: calc((100% - (var(--search-grid-columns-tablet) - 1) * var(--search-grid-gap)) / var(--search-grid-columns-tablet)); } } @media (max-width: 767px) { .posts-layout .row > article { width: calc((100% - (var(--search-grid-columns-mobile) - 1) * var(--search-grid-gap)) / var(--search-grid-columns-mobile)); } } /* ------------------------------------------------------------ ⚠️ CONTENT-INNER - LIKELY THE ACTUAL CAUSE OF THE DETAILS PAGE BEING CUT OFF ------------------------------------------------------------ GUESS: ".content-inner" wraps the title/content area on the Details (attachment) page. This was completely unscoped in your file, applying a large negative bottom margin to ANY element with this class, anywhere on the site. I've scoped it to the Details page specifically, since that's where I believe it was intended - please double check this is the only place ".content-inner" is used before trusting this fully. */ .single-attachment .content-inner { margin-bottom: 0vh !important; } /* UNKNOWN ORIGIN - forces FooGallery's pagination dots to stay visible/laid out even if something else tries to hide them. Not something we built together, but looks like a reasonable defensive fix; left as-is. */ .fg-paging-dots, .fg-paging-dots * { display: inline-block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; z-index: 9999 !important; } #content.page-wrap { min-height: 100vh; } /* UNKNOWN ORIGIN - not something we discussed, presumably your own styling for something called "my-pic". Left as-is. */ .my-pic { background-color: #f4f4f4; border: 2px solid #333; padding: 20px; border-radius: 8px; } /* ------------------------------------------------------------ ⚠️ GALLERY 34734 ARROW COLOUR - REAL BUGS FOUND ------------------------------------------------------------ FIXED several things here: 1. "background-color: #F4EBC03D);" had a stray, unmatched ")" character with no opening "(" anywhere - this made the whole declaration invalid, so the colour was never actually being applied at all. Removed the stray ")". 2. The second rule's selector was missing a space: "#foogallery-gallery-34734.fg-carousel-next" (no space) asks for ONE element that has BOTH that exact ID AND that exact class at once - which almost certainly matches nothing. I've added the missing space so it reads as two separate, nested selectors instead, matching the pattern of the first rule. 3. IMPORTANT: both rules also had a second, completely unscoped selector tacked on at the end - plain ".fg-icon" with no gallery ID in front of it at all. This means these rules were applying to EVERY gallery's icons on your entire site, not just gallery 34734. I suspect this wasn't intentional, so I've removed the unscoped part below - let me know if you actually wanted this to affect every gallery, and I'll add it back deliberately instead. */ #foogallery-gallery-34734 .fg-carousel-prev .fg-icon { background-color: #F4EBC03D; margin-right: -40% !important; margin-left: 2% !important; } #foogallery-gallery-34734 .fg-carousel-next .fg-icon { background-color: #F4EBC03D; margin-left: -40% !important; margin-right: 2% !important; } /* FIXED: "rgba(205, 216, 212)" only has 3 values - rgba() requires 4 (red, green, blue, alpha). Changed to rgb() since there's no transparency value here anyway. */ .foogallery.fg-caption-always .fg-item.fg-loaded .fg-caption { background-color: rgb(205, 216, 212); } /* FIXED: this comment was missing its opening "/*" - it started with a bare "*" instead, which meant the browser tried to read "* Background for the caption container */" as an actual CSS rule (using the universal selector), rather than as a comment. Fixed below. */ /* Background for the caption container */ .foogallery:not(.fg-preset) .fg-caption { background-color: #F5EBC1 !important; padding: 1px; } /* FIXED: "line-height:/.6em!important;" has a stray "/" character before the value, making the whole declaration invalid (so line-height was never actually being set here). Removed the stray slash - assuming you meant 0.6em. */ .foogallery:not(.fg-preset) .fg-caption-title, .foogallery:not(.fg-preset) .fg-caption-desc { color: black; font-size: 0.9em; line-height: 0.6em !important; font-family: aptos-mono; } /* FIXED: "opacity:transparent;" isn't valid - opacity only accepts a number (0-1) or a percentage, not a colour keyword. Removed, since I can't guess whether you wanted 0 (invisible) or something else - let me know and I'll add the right value back in. */ .fg-caption-inner { padding: 0px 0px; } ul li a { font-family: "Aptos", Lato, sans-serif; text-shadow: 0px 0px 0px gray; /* GUESS: looks like this may be deliberately cancelling out a theme text-shadow elsewhere, rather than a mistake - a shadow with 0 blur/offset is invisible either way */ font-kerning: normal; } body { overflow-x: hidden; font-kerning: normal; } /* These two ".container" rules were separate in your file - merged into one, nothing lost. The "left: calc(...)" part is a standard technique for breaking an element out to full viewport width despite a parent container's max-width constraint - looks intentional and consistent with other width-related work we did. */ .container { -webkit-transform: translate3d(0, 0, 0); /* GUESS: possibly an older fix for a mobile Safari rendering/flicker issue - unclear if still needed, but harmless to keep */ position: relative; left: calc((100vw - 100%) / 2); } /* UNKNOWN ORIGIN - not discussed, presumably your own nav styling. */ .nav-menu { background-color: rgba(0, 0, 0, 0); font-size: 22px; } /* UNKNOWN ORIGIN - not discussed, presumably your own icon sizing. */ .sydney-svg-icon { width: 3.5vw; height: 3.7vw; } .sydney-svg-icon svg { max-height: 23px; } .sydney-hero-area { display: flex; justify-content: right; } .sydney-hero-area .slide-inner { top: calc(77%); left: calc(-13%); } /* FIXED: removed a stray, unmatched closing brace that was here in the original file, with nothing for it to close. */ /* UNKNOWN ORIGIN - not discussed, presumably your own logo styling. */ .mylogoimg { float: left; display: inline-block; padding-right: 20%; } /* UNKNOWN ORIGIN (PMPro button styling), FIXED one real bug: "font-size:2.1emm;" - "emm" isn't a valid CSS unit (valid units are em, rem, px, %, vh, vw, etc.), so this was being silently ignored by the browser entirely, and the button's font-size was just falling back to whatever it inherited instead. Assuming you meant "2.1em" - fixed below. */ .pmpro_btn, .pmpro_btn:link { color: black !important; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); vertical-align: middle !important; padding-right: 1px; padding-left: 1px; padding-bottom: 4px; align-content: bottom; width: 100%; float: left; font-size: 2.1em; /* FIXED: was "2.1emm" - invalid unit, silently ignored before */ font-weight: bold; overflow-wrap: break-word; word-break: keep-all; border: 2px solid gray; } .pmpro_btn:hover, a.pmpro_btn:hover { color: green !important; border: 2px solid gray; box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } /* UNKNOWN ORIGIN - PMPro form field styling, not discussed, left as-is. */ .myredfield { width: 250px; } .mytextarea { max-height: 370px; min-height: 270px; } .myfooter { font-size: 0.7em; line-height: 0.8; color: black; } .myentryform { font-size: 12px; color: black; line-height: 1.3; margin: 1% auto 1% !important; width: 100% !important; } /* --- 2024 Entries page (ID 14452): pull heading close to top of page, all breakpoints --- */ .elementor-14452 > .elementor-element:first-child { margin-top: 1% !important; padding-top: 1% !important; } /* ------------------------------------------------------------ ATTACHMENT "DETAILS" PAGE LAYOUT (from our session) ------------------------------------------------------------ */ /* --- Attachment "Details" page: container capped at a readable width, image and text separately constrained --- */ .single-attachment .teacosy-attachment-page-box { max-width: 450px; width: 100%; margin: 0 auto; box-sizing: border-box; padding-bottom: 0px; } .single-attachment .teacosy-image-container { width: 100%; position: relative; } .single-attachment .teacosy-image-container img { width: 100% !important; height: auto !important; max-width: 100% !important; display: block; margin: 0 auto; } .single-attachment .teacosy-attachment-details { max-width: 450px; margin: 0 auto; text-align: justify; } .single-attachment .teacosy-details-footer { max-width: 450px; margin: 0 auto; text-align: center; } /* ⚠️ This is the FULLER, LATER version of .teacosy-search-slot - note it sets margin-top:13vh FIRST, then immediately overwrites it with the shorthand "margin: 2em auto 0" a few lines later in this SAME rule - shorthand always wins over an earlier longhand property within one rule, so the actual applied top margin is 2em, not 13vh, and the 13vh line is dead. Also "vertical-align: middle" has no effect here since this isn't an inline or table-cell element. Left both as-is since I'm not sure which value you actually want - let me know and I'll clean this up properly. */ .teacosy-search-slot { max-width: 450px; width: 100%; margin: 2em auto 0; padding-left: 3%; padding-right: 3%; padding-top: 22%; vertical-align: middle; /* likely has no effect - see flag above */ text-align: center; box-sizing: border-box; position: static; bottom: 0; right: 0; } .epta-title-date { position: static !important; bottom: auto !important; } .epta-image-area:empty + .epta-title-date, .epta-image-area:empty ~ .epta-title-date { max-width: 100% !important; width: 100% !important; } /* FIXED: "padding-top: -3vh !important;" is invalid (padding can't be negative), so it was being silently ignored - only the margin-top:-3vh line was ever actually doing anything. Removed the invalid padding line. */ .single-attachment #content, .single-attachment .site-content, .single-attachment .content-area, .search-results #content, .search-results .site-content, .search-results .content-area, .search-no-results #content, .search-no-results .site-content, .search-no-results .content-area { margin-top: 20px!important; } /* --- Search results thumbnails: explicit small display width --- */ .search-results .attachment img, .search-results article.attachment img, .search-results .type-attachment img, .search-no-results .attachment img, .search-no-results article.attachment img, .search-no-results .type-attachment img { width: 150px !important; height: auto !important; max-width: 150px !important; padding-bottom: 6px !important; margin-bottom: 6px !important; padding-top: 3px !important; margin-top: 3px !important; } /* --- "Back to Search" link styling --- */ .teacosy-back-link a { font-weight: bold; text-decoration: none; } .teacosy-back-link a:hover { text-decoration: underline; } /* --- Close (x) button for the Details page zoom feature --- */ .teacosy-zoom-close { position: fixed; top: 15px; right: 15px; z-index: 99999; background: rgba(0, 0, 0, 0.65); color: #fff; border: none; border-radius: 50%; width: 42px; height: 42px; font-size: 26px; line-height: 1; cursor: pointer; } .teacosy-zoom-close:hover { background: rgba(0, 0, 0, 0.85); } /* --- Photographer credit line inside FooBox overlays --- */ .teacosy-photo-credit { font-size: 0.7em; display: inline-block; margin-left: 0.3em; } .teacosy-photo-credit strong { font-weight: bold; } .teacosy-photo-credit a { color: inherit; text-decoration: underline; } .teacosy-event-item { display: flex; flex-direction: column; gap: 12px; margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid #eee; } .teacosy-event-image { width: 100%; } .teacosy-event-image img { width: 100%; height: auto; max-width: 300px; border-radius: 8px; } html body .media-modal, html body .media-modal * { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important; font-size: 15px !important; line-height: 1.5 !important; letter-spacing:normal!important; word-spacing:normal!important; } .teacosy-event-details { width: 100%; font-family:aptos-display; size:12vh; line-height:1em; } .epta-title-date.no-image { max-width: 100% !important; float: none !important; text-align: left !important; display: block !important; } .teacosy-event-image { flex: 0 0 auto; width: 250px; } .teacosy-event-date { font-weight: bold; color: #666; margin-bottom: 4px; font-size: 1em; } .teacosy-event-title { margin-top: 0; margin-bottom: 8px; } .teacosy-event-title a { color: var(--tec-color-text-event-title, #222); text-decoration: none; letter-spacing: 0.05rem; word-spacing:0.1rem; font-size: 34px; line-height:.8em; } .teacosy-event-venue { background: #e5e5e5; border: 1px solid #eee; padding: 10px 15px; margin-bottom: 15px; font-size: 0.9em; border-radius: 3px; } .teacosy-event-description a { color: var(--tec-color-link-primary, #21759b); line-height:1.6vh; } .teacosy-event-description p img { float: left; margin: 0 20px 15px 0; max-width: 220px; height: auto; } .teacosy-events-pagination { display: flex; justify-content: space-between; margin-top: 20px; } @media (max-width: 600px) { .teacosy-event-item { flex-direction: column; } .teacosy-event-image { width: 100%; } } .tribe-events-c-subscribe-dropdown__container, .tribe-block__events-link { display: none !important; } .teacosy-event-quotes { display: flex; flex-wrap: wrap; gap: 20px; margin: 30px 0; } .teacosy-event-quote { flex: 1 1 260px; background: #f6f0e3; border-left: 4px solid #b5651d; padding: 20px; font-style: italic; margin: 0; } .teacosy-event-quote cite { display: block; margin-top: 10px; font-style: normal; font-weight: bold; text-align: right; } .teacosy-event-photos { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; } .teacosy-event-photo { width: 200px; height: 150px; object-fit: cover; border-radius: 6px; } .teacosy-event-photos-placeholder { color: #888; } a[href*="ical=1"], a[href*="calendar/event?action=TEMPLATE"] { display: none !important; } /* Aged-paper look - strengthened with !important since our earlier attempt likely lost a specificity fight with the theme's own CSS */ .tribe-events-single { position: relative !important; background: #f4ecd8 !important; padding: 30px !important; box-shadow: inset 0 0 60px rgba(139, 115, 85, 0.15) !important; } .tribe-events-single::before, .tribe-events-single::after { content: "" !important; position: absolute !important; width: 40px !important; height: 40px !important; pointer-events: none !important; } .tribe-events-single::before { top: 0 !important; right: 0 !important; background: linear-gradient(225deg, rgba(0,0,0,0.18) 50%, transparent 50%) !important; } .tribe-events-single::after { bottom: 0 !important; left: 0 !important; background: linear-gradient(45deg, rgba(0,0,0,0.18) 50%, transparent 50%) !important; } /* Quotes/photos section - plain white, no aged tint at all */ .teacosy-event-extras, .teacosy-event-quote { background: #fff !important; } .teacosy-event-quote { border-left: 4px solid #b5651d; padding: 20px; font-style: italic; margin: 0; } /* Make embedded content images responsive - prevents oversized images (e.g. 2048px wide) from squeezing description text into a narrow column beside them */ .teacosy-event-description img, #tribe-events-content img, .tribe-events-single img { max-width: 100% !important; height: auto !important; } .teacosy-event-description .alignleft, #tribe-events-content .alignleft { float: left; margin: 0 20px 20px 0; max-width: 45%; } .teacosy-event-description .alignright, #tribe-events-content .alignright { float: right; margin: 0 0 20px 20px; max-width: 45%; } .teacosy-event-description .aligncenter, #tribe-events-content .aligncenter { display: block; margin: 0 auto 20px; }