/* ========================================================================== Dr Esh — generic templates: single post, archive, search, 404 -------------------------------------------------------------------------- The design files cover no blog, archive, search or 404 view, so these are built from the existing design language rather than ported: the page-hero rhythm, the offset-shadow card from the homepage directory, the clay rule, the eyebrow label and the sliding arrow. Tokens are declared here on :root as a fallback only. Elementor's kit declares the same names on , which is a closer ancestor, so the kit wins wherever it is present and stays the editable source of truth. The fallbacks matter only if Elementor is ever switched off. ========================================================================== */ :root { --sand-line: #CFC7B8; --fs-body: 1.125rem; --fs-small: 0.95rem; --fs-label: 0.78rem; --fs-h2: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.65rem); --fs-lede: clamp(1.2rem, 1.06rem + 0.7vw, 1.5rem); --fs-hero: clamp(2.15rem, 1.15rem + 4.6vw, 5.1rem); --fs-post-title: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); --section-y: clamp(3.75rem, 2.2rem + 6vw, 7.5rem); --measure: 34em; } .t-main { display: block; } .t-wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--gutter); } /* Matches the tablet gutter the Elementor wrap class uses, so these templates line up with the header and footer at the same widths. */ @media (min-width: 768px) and (max-width: 1024px) { .t-wrap { padding-inline: var(--gutter-tablet, 2.75rem); } } .t-section { padding-block: var(--section-y); } .t-section--tight { padding-block: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem); } .t-section--sand { background: var(--sand); --hairline: var(--sand-line); } /* ---------------- hero ---------------- */ .t-hero { padding-block: clamp(3rem, 2rem + 5vw, 6rem); } .t-hero__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 1rem; display: block; } .t-title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-post-title); letter-spacing: -0.02em; line-height: 1.04; color: var(--ink); margin: 0; max-width: 22ch; text-wrap: pretty; } /* Page-hero scale. The Elementor-built pages set their h1 from --fs-hero with a 16ch measure, so the 404, search and archive headings use the same values and read as part of the same site. A post title keeps the smaller .t-title scale, because a sentence-length title at hero size dominates the page. */ .t-title--hero { font-size: var(--fs-hero); line-height: 1.02; letter-spacing: -0.02em; max-width: 16ch; } .t-lede { font-family: var(--font-body); font-size: var(--fs-lede); line-height: 1.45; color: var(--ink-muted); margin: 1.5rem 0 0; max-width: 46ch; } .t-rule { width: 2.5rem; height: 3px; border-radius: 2px; background: var(--clay); margin-bottom: clamp(0.9rem, 0.6rem + 0.6vw, 1.35rem); } /* ---------------- post meta ---------------- */ .t-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 1.75rem; font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink-muted); } .t-meta__sep { color: var(--sand-line); } .t-meta a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid var(--hairline); } .t-meta a:hover { color: var(--clay-deep); border-bottom-color: currentColor; } .t-featured { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline); background: var(--paper-warm); } .t-featured img { display: block; width: 100%; height: auto; } /* ---------------- article body ---------------- the_content() emits arbitrary markup, so this styles by element rather than by class. Held to a reading measure and left-aligned, per the design. */ .t-prose { max-width: var(--measure); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--ink); } .t-prose > * { margin-block: 0 1.25em; } .t-prose > *:last-child { margin-bottom: 0; } .t-prose h2, .t-prose h3, .t-prose h4 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); margin-block: 2em 0.6em; } .t-prose h2 { font-size: var(--fs-h3); } .t-prose h3 { font-size: 1.2rem; font-weight: 500; } .t-prose h4 { font-size: 1.05rem; font-weight: 500; } .t-prose a { color: var(--clay-deep); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; } .t-prose a:hover { color: var(--clay-darkest); } .t-prose strong { font-weight: 600; } .t-prose ul, .t-prose ol { padding-inline-start: 1.35rem; } .t-prose li { margin-block: 0.4em; } .t-prose ul { list-style: none; padding-inline-start: 0; } .t-prose ul > li { position: relative; padding-inline-start: 1.35rem; } /* clay dash marker, the same device the surgery pages use for their lists */ .t-prose ul > li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 0.7rem; height: 2px; background: var(--clay); } .t-prose ol { list-style: decimal; } .t-prose blockquote { margin-inline: 0; padding-inline-start: 1.35rem; border-inline-start: 3px solid var(--clay); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; color: var(--ink); } .t-prose blockquote p:last-child { margin-bottom: 0; } .t-prose img, .t-prose figure { max-width: 100%; } .t-prose img { display: block; height: auto; border-radius: 12px; } .t-prose figcaption { margin-top: 0.6rem; font-size: var(--fs-small); color: var(--ink-muted); } .t-prose code { font-size: 0.92em; padding: 0.15em 0.4em; border-radius: 4px; background: var(--paper-warm); border: 1px solid var(--hairline); } .t-prose pre { padding: 1rem 1.15rem; border-radius: 12px; background: var(--paper-warm); border: 1px solid var(--hairline); overflow-x: auto; } .t-prose pre code { border: 0; background: none; padding: 0; } .t-prose hr { border: 0; border-top: 1px solid var(--hairline); margin-block: 2.5em; } /* hello-elementor's theme.css and Elementor's frontend both style bare tables, with side borders and grey striped rows. Everything is zeroed so the table reads as the hairline list the rest of the site uses, matching the design's credentials list rather than introducing a grey that is not in the palette. */ .t-prose table { width: 100%; border: 0; border-collapse: collapse; background: none; font-size: var(--fs-small); } .t-prose th, .t-prose td { text-align: start; padding: 0.7rem 0.6rem; border: 0; border-bottom: 1px solid var(--hairline); } .t-prose thead th { border-bottom-color: var(--ink-muted); } .t-prose th { font-weight: 600; } /* Elementor stripes rows with `table tbody > tr:nth-child(2n+1) > td`, which is specificity (0,1,4) and so outranks a plain `.t-prose td`. A doubled class is (0,2,1), which wins on class count alone and does not depend on which stylesheet happens to load last. */ .t-prose.t-prose tr, .t-prose.t-prose th, .t-prose.t-prose td { background-color: transparent; } /* wide content scrolls inside itself rather than pushing the page sideways */ .t-prose > .wp-block-table, .t-prose > figure.wp-block-table { overflow-x: auto; } /* ---------------- post list ---------------- Reuses the offset-shadow card from the homepage directory. */ .t-list { display: grid; /* Three across, not auto-fill. These cards carry an excerpt, so auto-fill's four narrow columns at desktop left the prose too cramped to read. The breakpoints are the site's own (1024 and 767), not a third set. */ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.2vw, 1.25rem); margin: 0; padding: 0; list-style: none; } @media (max-width: 1024px) { .t-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .t-list { grid-template-columns: minmax(0, 1fr); } } .t-card { display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem); background: var(--paper); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 6px 7px 0 var(--sand-line); transition: box-shadow .3s var(--ease), transform .3s var(--ease); } .t-card:hover, .t-card:focus-within { transform: translate(-2px, -2px); box-shadow: 9px 11px 0 var(--sand-line); } .t-card__eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); } .t-card__title { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.15; margin: 0; } .t-card__title a { color: var(--ink); text-decoration: none; } .t-card:hover .t-card__title a { background-image: linear-gradient(var(--clay), var(--clay)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; } .t-card__desc { color: var(--ink-muted); font-size: 1rem; line-height: 1.55; margin: 0; max-width: 40ch; } .t-card__go { margin-top: auto; display: inline-flex; align-items: baseline; gap: 0.5rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); color: var(--ink); text-decoration: none; } .t-card__go .t-arw { color: var(--clay); /* Figtree has no U+2192, so the arrow needs a real fallback stack */ font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: transform .35s var(--ease); } .t-card:hover .t-card__go { color: var(--clay-deep); } .t-card:hover .t-card__go .t-arw { transform: translateX(0.4rem); } /* ---------------- buttons ---------------- */ .t-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.8rem 1.4rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); line-height: 1.2; border-radius: 2px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .t-btn--clay { background: var(--clay); color: var(--paper); } .t-btn--clay:hover { background: var(--clay-deep); color: var(--paper); } .t-btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline); } .t-btn--ghost:hover { border-color: var(--ink); color: var(--clay-deep); } .t-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } /* ---------------- search form ---------------- */ .t-search { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 2rem; max-width: 34rem; } .t-search__field { flex: 1 1 14rem; min-width: 0; min-height: 44px; padding: 0.7rem 0.9rem; font-family: var(--font-body); font-size: var(--fs-small); color: var(--ink); background: var(--paper); border: 1px solid var(--hairline); border-radius: 2px; } .t-search__field:focus-visible { outline: 2px solid var(--eucalypt); outline-offset: 1px; } /* ---------------- pagination ---------------- */ .t-pagination { margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); } .t-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .t-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0.55rem 0.85rem; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); color: var(--ink); text-decoration: none; background: var(--paper); border: 1px solid var(--hairline); transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease); } .t-pagination .page-numbers:hover { border-color: var(--ink); color: var(--clay-deep); } .t-pagination .page-numbers.current { background: var(--eucalypt); border-color: var(--eucalypt); color: var(--paper-warm); } .t-pagination .page-numbers.dots { border-color: transparent; background: none; min-width: 0; } /* .screen-reader-text is styled by the parent theme; nothing needed here. */ /* ---------------- empty state ---------------- */ .t-empty { font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-muted); max-width: 46ch; } /* ---------------- helpful links (404) ---------------- */ .t-links { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--hairline); max-width: 34rem; } .t-links li { border-bottom: 1px solid var(--hairline); } .t-links a { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.05rem 0; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); color: var(--ink); text-decoration: none; } .t-links a:hover { color: var(--clay-deep); } .t-links .t-arw { color: var(--clay); font-family: var(--font-body), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: transform .35s var(--ease); } .t-links a:hover .t-arw { transform: translateX(0.4rem); } /* ---------------- comments ---------------- Minimal on purpose. There is no comment design, and a clinical site should normally have them off under Settings > Discussion. Styled just enough that the view is not broken if they are ever enabled. */ .t-comments { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--hairline); max-width: var(--measure); } .t-comments h2, .t-comments h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: -0.015em; margin: 0 0 1rem; } .t-comments ol, .t-comments ul { list-style: none; margin: 0; padding: 0; } .t-comments .comment-body { padding-block: 1.1rem; border-bottom: 1px solid var(--hairline); font-size: 1rem; line-height: 1.6; } .t-comments input:not([type="submit"]), .t-comments textarea { width: 100%; min-height: 44px; padding: 0.7rem 0.9rem; font-family: var(--font-body); font-size: var(--fs-small); background: var(--paper); border: 1px solid var(--hairline); border-radius: 2px; } .t-comments textarea { min-height: 8rem; } @media (prefers-reduced-motion: reduce) { .t-card, .t-card__go .t-arw, .t-links .t-arw { transition-duration: .01ms; } .t-card:hover { transform: none; } }