/* * Cosmos Versions — Clinic mega-menu layout polish. * Loaded only while an alternate version is active; the main Cosmos 2026 menu * is never affected. * * The theme's .mega__inner reserves a right-hand grid track (220–280px) for a * blog/promo tile. The Clinic menu has none, so that track would sit empty and * squeeze the link columns (wrapped headings, misaligned columns). When a * panel has no feature/promo/post tile, let the link columns span the full * panel width with roomier columns — matching the live clinic site's layout. */ .mega:not(.mega--compact) .mega__inner:not(.mega__inner--cards):not(:has(.mega__feature, .mega__promo, .mega__post)) { grid-template-columns: 1fr; } .mega:not(.mega--compact) .mega__inner:not(.mega__inner--cards):not(:has(.mega__feature, .mega__promo, .mega__post)) .mega__cols { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } /* * "Your surgeon" card (Clinic-only section on procedure pages): a single * practitioner card at a comfortable width, full-width on small screens. */ #your-surgeon .cosmos-your-surgeon__card { max-width: 360px; margin-top: 1.25rem; } #your-surgeon .cosmos-your-surgeon__card .team-card { width: 100%; } /* * Clinic hello bar: one long line like the live site. The MED prefix makes * the sentence longer than the theme's container width at its default size, * so span the full width and drop one type step. (Narrow screens keep the * theme's own mobile behaviour.) */ .hello-bar__inner { max-width: none; font-size: var(--step--2); } /* * Live-parity results grid (results-grid.php): two-column grid of album cards; * the theme's own single album card directly after it is hidden — the grid * replaces it, keeping the disclaimer row below intact. */ .cosmos-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 1rem; } .cosmos-results-grid ~ .result-album-wrap { display: none; } /* Grid covers fill their frame (the theme's square 'contain' mat letterboxes wide before/after composites); uniform wide ratio like the live cards. */ .cosmos-results-grid .result-album__media { /* Live card frame: aspect-ratio 11/5 with a thin mat (their .cm-card__media). */ aspect-ratio: 11 / 5; --album-pad: 10px; } .cosmos-results-grid .result-album__media > img { object-fit: cover; } @media (max-width: 700px) { .cosmos-results-grid { grid-template-columns: 1fr; } } /* Live-parity results disclaimer replaces the theme's one-liner. */ .cosmos-results-grid ~ .disclaimer--note { display: none; } .cosmos-results-disclaimer { margin-top: 1.5rem; font-size: 0.92em; color: var(--text-muted, #555); } .cosmos-results-disclaimer ol { margin: 0.25rem 0 0; padding-left: 1.25rem; } .cosmos-results-disclaimer li { margin-bottom: 0.35rem; } /* Show more toggle: first 6 grid cards visible while collapsed, like live. */ .cosmos-results-grid[data-collapsed="1"] > .result-album:nth-child(n+7) { display: none; } .cosmos-results-toggle { display: block; margin: 1.5rem auto 0; background: none; border: 0; padding: 0.25rem 0.5rem; font: inherit; font-size: 1.05rem; color: var(--accent, #DF8097); cursor: pointer; } .cosmos-results-toggle:hover { text-decoration: underline; } /* Prose between the results gallery and the disclaimer (cosmos_results_after_html): breathing room after the album card, and between its own blocks. */ .cosmos-results-after { margin-top: 2rem; } .cosmos-results-after p, .cosmos-results-after ul { margin: 0 0 1rem; } .cosmos-results-after h3 { margin: 1.75rem 0 0.75rem; } /* The theme's proc-block adds 40px padding-top above the results section — with the tab nav right there it reads as a hole (Jesus 2026-07-31). */ section#results.proc-block { padding-top: 0; } /* Appended end-of-article sections (cosmos_content_end_html): same rhythm as the surrounding recovery blocks. */ .cosmos-content-end h3 { margin: 2.25rem 0 0.9rem; } .cosmos-content-end p { margin: 0 0 1.1rem; } /* Live-parity experience stats block (whyus-stats.php): three cards with a big figure + caption, then plain links. Live shows no heading above it. */ .cosmos-stats { padding: 0 0 3rem; } .cosmos-stats__inner { max-width: var(--wrap, 1200px); margin: 0 auto; padding: 0 var(--gutter, 24px); } .cosmos-stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .cosmos-stat { background: #f4f2f2; border-radius: 8px; padding: 1.5rem 1.75rem; } .cosmos-stat__figure { margin: 0 0 .6rem; font-size: 1.9rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; } .cosmos-stat__desc { margin: 0; color: var(--text-muted, #555); line-height: 1.5; } .cosmos-stats__links { margin: 1.5rem 0 0; display: flex; gap: 2rem; flex-wrap: wrap; } .cosmos-stat-link { color: var(--accent, #DF8097); text-decoration: none; } .cosmos-stat-link:hover { text-decoration: underline; } @media (max-width: 800px) { .cosmos-stats__grid { grid-template-columns: 1fr; } } /* Hero link list (hero-links.php) — live's chevron links at the end of the hero. */ .cosmos-hero-links { display: flex; flex-direction: column; gap: .55rem; margin: 1.5rem 0 0; } .cosmos-hero-link { display: inline-flex; align-items: baseline; gap: .6rem; color: inherit; text-decoration: none; font-size: 1.05rem; } .cosmos-hero-link__chevron { color: var(--accent, #DF8097); font-weight: 700; } .cosmos-hero-link:hover { text-decoration: underline; } /* Hub cards with an image (hub-layout.php) — live shows a round illustration. */ .cosmos-card__media { display: block; padding: 1.25rem 1.25rem 0; } .cosmos-card__media img { width: 92px; height: 92px; object-fit: cover; border-radius: 50%; background: #f7eaec; display: block; } /* Hub galleries mirror live's card exactly (from live's own markup/CSS): square frame, image CONTAINED on a soft pad (their .cm-card__media has padding + object-fit:contain, so the whole before/after composite shows), and a single body row of title + arrow — live has no "View photos" label. */ .cosmos-results-grid--uniform .result-album__media { aspect-ratio: 1 / 1 !important; background: #F8F5F5; padding: 12px; box-sizing: border-box; } .cosmos-results-grid--uniform .result-album__media > img { object-fit: contain !important; } /* Live's album card, on every Compliant gallery (Jesus: drop the stacked white frames behind the photo and match live). One body row: title + arrow, no "View photos" strip, no paper stack. */ /* Applies to every album card in this version, including pages where the theme renders its own card rather than our grid. This stylesheet is Compliant-only, so the 2026 build keeps its stacked-paper look. */ .result-album .case-card__stack { display: none; } .result-album .card__foot { display: none !important; } .result-album__body { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 14px 16px; } .result-album__body::after { content: "\2192"; flex: none; color: #3E3E3E; font-size: 1.1rem; line-height: 1; } .result-album__title { margin: 0; font-size: 1rem; line-height: 1.3; } .cosmos-results-grid .result-album__media { padding: 0; background: #fff; } /* Hub results band: live puts the heading in a left column and the gallery grid on the right. Two markup shapes exist — the theme's band (.band__inner) and our synthesized section (.section-head + grid as direct children) — so both are handled. Single column below 900px. */ @media (min-width: 900px) { /* The results section always has the theme's .band__inner container, so the two columns live there — the section keeps the band's own padding. */ .cosmos-hub-results > .band__inner { display: grid; grid-template-columns: minmax(220px, 0.8fr) 2fr; gap: 2rem 3rem; align-items: start; } .cosmos-hub-results .section-head { grid-column: 1; grid-row: 1; text-align: left; margin: 0; max-width: 26ch; } .cosmos-hub-results .cosmos-results-grid { grid-column: 2; grid-row: 1; margin-top: 0; } .cosmos-hub-results .cosmos-results-toggle { grid-column: 2; } } /* The cards themselves stay a 2-up grid inside their column. */ .cosmos-hub-results .cosmos-results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 620px) { .cosmos-hub-results .cosmos-results-grid { grid-template-columns: 1fr; } } /* Results heading in the hub band: the display serif, like the hero title, at the size Jesus asked for (24px, easing down on small screens). */ .cosmos-hub-results .section-head h2 { font-family: var(--font-display, "Libre Baskerville", Georgia, serif); font-size: clamp(1.25rem, 2.2vw, 24px); line-height: 1.2; } /* Section photos brought across from live sit full width at the top of their section (Jesus's call — floating them beside the copy fought the text). The images themselves now carry WordPress's own alignnone/size-full classes. */ .prose img.size-full, .prose--rich img.size-full { display: block; width: 100%; height: auto; margin: 0 0 1.5rem; border-radius: 4px; } /* Patient-results disclaimer (patient-disclaimer.php). Live's own #f9f0f2 is invisible on our blush hero band, so the note is a few shades deeper with a hairline border to read as its own block. */ .cosmos-patient-disclaimer { background: #F2DCE1; color: #1D181C; border: 1px solid rgba(29, 24, 28, .10); border-radius: 6px; padding: 1rem 1.15rem; margin: 1.25rem 0 0; max-width: 66ch; } .cosmos-patient-disclaimer p { margin: 0 0 .7em; font-size: 14px; line-height: 1.55; } .cosmos-patient-disclaimer p:last-child { margin-bottom: 0; } /* The note's first line is usually a heading-style line ("COMPLIMENTARY FIRST CONSULTATION"), so give it a little weight. */ .cosmos-patient-disclaimer p:first-child { font-weight: 600; } /* Hub hero: live puts the enquiry form beside the intro. */ @media (min-width: 1000px) { .cosmos-hub-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: start; } .cosmos-hub-hero > .hero__solo { text-align: left; margin: 0; } } .cosmos-hub-hero__form { margin-top: 2rem; } @media (min-width: 1000px) { .cosmos-hub-hero__form { margin-top: 0; } } /* FAQ answers keep their paragraph structure but the theme gives .faq__a no rhythm (it isn't a .prose block), so multi-paragraph answers ran together. */ .faq__a > p, .faq__a > ul, .faq__a > ol { margin: 0 0 1em; } .faq__a > p:last-child, .faq__a > ul:last-child, .faq__a > ol:last-child { margin-bottom: 0; } .faq__a > ul, .faq__a > ol { padding-left: 1.25em; } .faq__a li { margin-bottom: .35em; } .faq__a > p > strong:only-child { display: inline-block; margin-top: .25em; } /* Hub results band: live keeps the heading AND its supporting copy in the left column, with the gallery filling the right. Ours was letting the prose take a grid cell of its own, which squeezed the cards into a narrow strip. */ @media (min-width: 900px) { .cosmos-hub-results > .band__inner { grid-template-columns: minmax(260px, .9fr) 2.1fr; } .cosmos-hub-results .section-head { grid-column: 1; grid-row: 1; } .cosmos-hub-results .cosmos-results-after { grid-column: 1; grid-row: 2; margin-top: 1.25rem; max-width: 42ch; } .cosmos-hub-results .cosmos-results-grid { grid-column: 2; grid-row: 1 / span 2; } .cosmos-hub-results .cosmos-results-disclaimer { grid-column: 1 / -1; } } /* Two columns, every direct child placed EXPLICITLY (a *:not() catch-all has higher specificity than the named rules and steals the prose — learned the hard way). Left: heading + copy. Right: the gallery, whether it arrives as our grid or inside the theme's wrapper. */ @media (min-width: 900px) { .cosmos-hub-results > .band__inner > .section-head { grid-column: 1; grid-row: 1; text-align: left; margin: 0; } .cosmos-hub-results > .band__inner > .prose, .cosmos-hub-results > .band__inner > .cosmos-results-after { grid-column: 1; grid-row: 2; text-align: left; margin: 1.25rem 0 0; max-width: 46ch; } .cosmos-hub-results > .band__inner > .result-album-wrap--center, .cosmos-hub-results > .band__inner > .result-album-wrap, .cosmos-hub-results > .band__inner > .cosmos-results-grid { grid-column: 2; grid-row: 1 / span 3; width: 100%; margin: 0; } .cosmos-hub-results > .band__inner > .cosmos-results-toggle { grid-column: 2; } .cosmos-hub-results > .band__inner > .cosmos-results-disclaimer { grid-column: 1 / -1; grid-row: auto; } .cosmos-hub-results .cosmos-results-grid { width: 100%; } } /* FINAL word on the hub results band: hub-layout.php now builds the two columns in the DOM, so every earlier grid-placement rule is retired by turning the container back into a normal block. */ .cosmos-hub-results > .band__inner { display: block; } .cosmos-results-cols { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 900px) { .cosmos-results-cols { grid-template-columns: minmax(260px, 0.9fr) 2.1fr; gap: 2rem 3rem; align-items: start; } } .cosmos-results-cols__left .section-head { text-align: left; margin: 0 0 1.25rem; max-width: none; } .cosmos-results-cols__left .prose, .cosmos-results-cols__left .cosmos-results-after { text-align: left; margin: 0; max-width: 46ch; } .cosmos-results-cols__right .cosmos-results-grid { margin-top: 0; width: 100%; } /* Team group labels (team-page.php) — live's Doctors / Nurses / Support rows. Full-width row inside the card grid. */ .cosmos-team-group { grid-column: 1 / -1; width: 100%; font-family: var(--font-display, "Libre Baskerville", Georgia, serif); font-size: 1.35rem; margin: 1.5rem 0 0; } /* Clinic location pages (/sydney/) — rebuilt to match the original live layout. */ .cosmos-loc-hero { background: rgba(255, 222, 222, 0.3); } .cosmos-loc-hero__cols { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 40px; padding-block: clamp(24px, 5vw, 64px); } .cosmos-loc-hero__intro { flex: 1 1 460px; max-width: 560px; } .cosmos-loc-hero__intro h1 { margin: 0 0 16px; } .cosmos-loc-hero__desc { color: #666; font-size: 18px; line-height: 1.5; margin: 0; } .cosmos-loc-hero__side { flex: 0 1 377px; } .cosmos-loc-hero__features { display: flex; flex-wrap: wrap; justify-content: space-between; } .cosmos-loc-feature { width: calc(50% - 3.5px); margin-bottom: 7px; background: #fff; border: 1px solid #f6eeee; padding: 12px; text-decoration: none; font-size: 12px; line-height: 1.2; color: #7b7b7b; transition: 0.25s ease; } .cosmos-loc-feature:hover { border-color: #dccdcd; color: #333; } .cosmos-loc-contact { background: #fff; border: 1px solid #f6eeee; padding: 16px; text-align: center; margin-top: 9px; } .cosmos-loc-contact__call { display: block; letter-spacing: 0.1em; color: #4f4f4f; font-weight: 500; font-size: 12px; margin: 8px 0 16px; text-decoration: none; } .cosmos-loc-contact__buttons { display: flex; flex-wrap: wrap; justify-content: space-between; } .cosmos-loc-contact__buttons > * { width: calc(50% - 3.5px); } .cosmos-loc-btn { padding: 15px; letter-spacing: 0.1em; font-weight: 500; font-size: 12px; line-height: 1; border: 1px solid #f1ebeb; text-align: center; text-decoration: none; transition: 0.3s ease; } .cosmos-loc-btn--directions { background: #fff; color: #7b7b7b; } .cosmos-loc-btn--directions:hover { border-color: #dccdcd; color: #333; } .cosmos-loc-btn--contact { background: #df8097; color: #fff; } .cosmos-loc-btn--contact:hover { background: #da6c86; color: #fff; } .cosmos-loc-procs__wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: clamp(24px, 4vw, 64px); } .cosmos-loc-box { background: #fffefe; border: 1px solid #eaeaea; box-shadow: 0 2px 4px #ececec; padding: 32px 16px 24px; margin-bottom: 32px; } .cosmos-loc-box:last-child { margin-bottom: 0; } .cosmos-loc-box__title { font-weight: 500; font-size: 18px; line-height: 1.3; color: #474747; padding: 0 8px; margin: 0 0 12px; } .cosmos-loc-box__link { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; font-size: 13px; line-height: 1.4; color: #7b7b7b; text-decoration: none; transition: 0.25s ease; border-radius: 4px; } .cosmos-loc-box__link svg { flex: 0 0 auto; color: #c9c9c9; } .cosmos-loc-box__link:hover { background: #fbeff2; font-weight: 500; color: #474747; } .cosmos-loc-box__link:hover svg { color: #df8097; } .cosmos-loc-entry { background: #f8f5f5; } .cosmos-loc-entry h2 { text-align: center; margin-bottom: 24px; } .cosmos-loc-team { text-align: center; } .cosmos-loc-team__desc { color: #868686; font-size: 18px; line-height: 1.5; max-width: 545px; margin: 0 auto 24px; } .cosmos-loc-team__link { font-weight: 500; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #df8097; text-decoration: none; } .cosmos-loc-team__link:hover { color: #da6c86; } @media (max-width: 900px) { .cosmos-loc-procs__wrap { grid-template-columns: repeat(2, 1fr); } .cosmos-loc-hero__cols { text-align: center; } .cosmos-loc-hero__intro, .cosmos-loc-hero__side { flex-basis: 100%; max-width: 100%; } } @media (max-width: 600px) { .cosmos-loc-procs__wrap { grid-template-columns: 1fr; gap: 12px; } .cosmos-loc-box { padding: 16px; margin-bottom: 12px; } }