@import url("https://use.typekit.net/ncs2zxe.css"); /* ────────────────────────────────────────────────────────────────── NAMESPACE NOTE Every class is prefixed with `tr-` (Tri-Cities/RiverWood). CSS variables are prefixed with `--tr-`. The whole document is wrapped in `.tr-page` so the universal reset only affects this site, not anything Komwolf renders alongside it. ────────────────────────────────────────────────────────────────── */ :root { --tr-navy: #1B3A5C; --tr-navy-deep: #0F2740; --tr-navy-soft: #2A5174; /* slightly lighter navy for overlays */ --tr-sage: #5BAE9E; --tr-sage-light: #7ECABB; --tr-cream: #FAF6F0; --tr-honey: #C8A96E; --tr-honey-light: #E8D5AE; --tr-warm-white: #FFFDF9; --tr-text-dark: #1a1a1a; --tr-text-muted: #5a5a5a; /* ── WAVY UNDERLINE ── A single sine-wave cycle in SVG, encoded as a data URL. When applied as background-image with `background-repeat: repeat-x`, it tiles seamlessly across however wide the link text is, creating a wavy underline that's much friendlier than the default straight underline. The SVG: viewBox is 24×6. Path goes from (0,3) → up to (6,0) → back through (12,3) → down to (18,6) → back to (24,3). The end point matches the start point's Y so tiling is seamless. Two color variants because url() data URLs can't use `currentColor` (the SVG is parsed in isolation from the surrounding CSS): - sage variant for prose links and nav hover/active - honey variant for the hero "Dr. Leah Montgomery" accent link */ --tr-wave-sage: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' stroke='%237ECABB' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); --tr-wave-honey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q6 0 12 3 T24 3' stroke='%23C8A96E' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Scoped reset — only resets elements *inside* .tr-page, so we won't blow away margins/padding on Komwolf blocks. */ .tr-page, .tr-page *, .tr-page *::before, .tr-page *::after { margin: 0; padding: 0; box-sizing: border-box; } /* ── FULL-BLEED ESCAPE ────────────────────────────────────────────── Komwolf's page wrapper is `

` which caps content at 1280px wide with side padding. That would trap our hero photo inside a narrow column instead of letting it reach the viewport edges. This trick pops .tr-page OUT of any constrained parent and stretches it to the full viewport width. How it works: - width: 100vw → element becomes as wide as the viewport - left: 50% → shifts it right by half the parent's width - margin-left: -50vw → pulls it back left by half the viewport - Net result: element re-anchors to the viewport's left edge, 100vw wide The matching `html, body { overflow-x: hidden }` below prevents the sideways scrollbar that would otherwise appear when the page is wider than the viewport allows. */ html, body { overflow-x: hidden; } .tr-page { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; font-family: "museo-sans", sans-serif; color: var(--tr-text-dark); background: var(--tr-warm-white); overflow-x: hidden; } /* Subtle seigaiha wave texture (used as an underlay on dark sections) */ .tr-wave-texture { position: absolute; inset: 0; opacity: 0.04; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M0 60 Q30 30 60 60 Q90 90 120 60' fill='none' stroke='%231B3A5C' stroke-width='1.2'/%3E%3Cpath d='M0 80 Q30 50 60 80 Q90 110 120 80' fill='none' stroke='%231B3A5C' stroke-width='1.2'/%3E%3Cpath d='M0 40 Q30 10 60 40 Q90 70 120 40' fill='none' stroke='%231B3A5C' stroke-width='1.2'/%3E%3Cpath d='M0 100 Q30 70 60 100 Q90 130 120 100' fill='none' stroke='%231B3A5C' stroke-width='1.2'/%3E%3Cpath d='M0 20 Q30 -10 60 20 Q90 50 120 20' fill='none' stroke='%231B3A5C' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 120px 120px; } /* ────────────────────────────────────────────────────────────────── TOP UTILITY BAR ← NEW The thin navy strip at the very top of your screenshot with "Order Food" and "Prescription Refill" right-aligned. ────────────────────────────────────────────────────────────────── */ .tr-topbar { background: var(--tr-navy-deep); color: var(--tr-cream); font-size: 13px; position: relative; z-index: 101; /* sits above the nav so the shadow looks right */ } .tr-topbar-inner { max-width: 1400px; margin: 0 auto; padding: 10px 40px; display: flex; justify-content: flex-end; /* push links to the right */ gap: 32px; } .tr-topbar-link { display: inline-flex; align-items: center; gap: 8px; color: rgba(250, 246, 240, 0.85); text-decoration: none; font-weight: 500; letter-spacing: 0.01em; transition: color 0.2s ease; } .tr-topbar-link:hover { color: var(--tr-sage-light); } .tr-topbar-icon { width: 16px; height: 16px; stroke: currentColor; /* inherits color from .tr-topbar-link */ fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* ────────────────────────────────────────────────────────────────── MAIN NAV Now a cream background (was rgba over navy), with a two-line logo: - "Riverwood" in green italic serif - "VETERINARY CLINIC" small uppercase navy ────────────────────────────────────────────────────────────────── */ .tr-nav { background: var(--tr-cream); border-bottom: 1px solid rgba(27, 58, 92, 0.06); position: relative; z-index: 100; } .tr-nav-inner { max-width: 1400px; margin: 0 auto; padding: 18px 40px; display: flex; align-items: center; justify-content: space-between; } /* Logo cluster: circular icon + two-line wordmark */ .tr-logo { display: flex; align-items: center; gap: 14px; text-decoration: none; } /* The navy circular badge with the cat illustration inside. Everything renders via CSS (no inline so the dot is also sage. */ .tr-hero-content h1 em { font-style: italic; color: var(--tr-sage-light); font-weight: 400; } .tr-hero-content p { font-size: 17px; color: rgba(250, 246, 240, 0.85); line-height: 1.7; max-width: 540px; margin-bottom: 40px; } /* The "Dr. Leah Montgomery" link inside the hero subtitle: honey color + wavy honey underline. Uses the honey wave variant (--tr-wave-honey) to color-match the link text. */ .tr-hero-content p a { color: var(--tr-honey) !important; text-decoration: none; background-image: var(--tr-wave-honey); background-repeat: repeat-x; background-position: 0 100%; background-size: 24px 6px; padding-bottom: 7px; transition: color 0.2s; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .tr-hero-content p a:hover { color: var(--tr-honey-light); } /* Hero buttons — now PILL-SHAPED (was 8px radius). The trick is border-radius: 999px which forces a full pill regardless of button height. */ .tr-hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .tr-btn { display: inline-flex; align-items: center; justify-content: center; padding: 18px 44px; border-radius: 999px; /* ← pill shape */ font-family: "museo-sans", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: all 0.25s ease; min-width: 220px; /* keeps both buttons visually balanced */ } /* Primary = filled sage green, navy text */ .tr-btn-primary { background: var(--tr-sage); color: var(--tr-navy-deep); border-color: var(--tr-sage); } .tr-btn-primary:hover { background: var(--tr-sage-light); border-color: var(--tr-sage-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(91, 174, 158, 0.35); } /* Secondary = transparent with sage border + sage text */ .tr-btn-outline { background: transparent; color: var(--tr-sage-light); border-color: var(--tr-sage-light); } .tr-btn-outline:hover { background: rgba(126, 202, 187, 0.1); color: var(--tr-cream); border-color: var(--tr-cream); } /* ── HERO WAVE DIVIDER ────────────────────────────────────────────── The cream wave at the bottom of the hero. Originally this was an inline
with class="tr-list-cols-2" to split into 2 columns on wider screens. CSS columns handle this elegantly — no need to manually split the list in half. `break-inside: avoid` prevents an item from splitting across columns mid-line. */ .tr-prose ul.tr-list-cols-2 { column-count: 2; column-gap: 36px; } .tr-prose ul.tr-list-cols-2 li { break-inside: avoid; } @media (max-width: 640px) { .tr-prose ul.tr-list-cols-2 { column-count: 1; } } /* ════════════════════════════════════════════════════════════════════ BREADCRUMBS (service detail pages) ────────────────────────────────────────────────────────────────── "Services / Wellness & Preventative Care" trail at the top of each service detail page. Sits between the page hero and the prose body. The negative margin-bottom pulls the prose up so they read as one visual unit instead of having extra whitespace between them. ════════════════════════════════════════════════════════════════════ */ .tr-breadcrumb { max-width: 720px; margin: 32px auto -50px; padding: 0 40px; font-size: 14px; color: var(--tr-text-muted); display: flex; align-items: center; flex-wrap: wrap; } .tr-breadcrumb a { color: var(--tr-sage); text-decoration: none; transition: color 0.2s ease; } .tr-breadcrumb a:hover { color: var(--tr-navy); } .tr-breadcrumb-sep { margin: 0 10px; color: var(--tr-text-muted); opacity: 0.5; } .tr-breadcrumb-current { color: var(--tr-text-dark); font-weight: 500; } /* ════════════════════════════════════════════════════════════════════ ACCORDION (homepage "What We Offer" section) ────────────────────────────────────────────────────────────────── Uses native
/
elements for click-to-expand behavior — no JavaScript required, fully keyboard-accessible. Falls back gracefully if browser support is poor (everything just stays open). Layout: photo on the left, accordion list on the right. ════════════════════════════════════════════════════════════════════ */ .tr-accordion-section { background: var(--tr-warm-white); padding: 100px 40px; } .tr-accordion-inner { max-width: 1200px; margin: 0 auto; } .tr-accordion-header { margin-bottom: 56px; max-width: 720px; } .tr-accordion-header h2 { font-family: 'alverata', serif; font-size: clamp(36px, 4vw, 48px); font-weight: 400; color: var(--tr-navy); letter-spacing: -0.02em; line-height: 1.1; } .tr-accordion-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } /* Left column: photo + small caption underneath */ .tr-accordion-media { position: sticky; top: 24px; /* sticks while user scrolls the accordion list */ } .tr-accordion-photo { width: 100%; aspect-ratio: 4/5; background: linear-gradient(135deg, rgba(91,174,158,0.15), rgba(200,169,110,0.1)); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: var(--tr-text-muted); font-family: 'alverata', serif; font-style: italic; font-size: 14px; text-align: center; padding: 24px; margin-bottom: 24px; } .tr-accordion-caption { font-size: 15px; line-height: 1.7; color: var(--tr-text-muted); max-width: 440px; } /* Right column: the accordion items themselves */ .tr-accordion-list { display: flex; flex-direction: column; gap: 0; } .tr-accordion-item { border-bottom: 1px solid rgba(27, 58, 92, 0.1); } .tr-accordion-item:first-child { border-top: 1px solid rgba(27, 58, 92, 0.1); } /* The clickable header of each item — uses
, which by default shows a browser-native disclosure triangle. We hide that and provide our own chevron at the right. */ .tr-accordion-summary { list-style: none; /* hide default arrow (Firefox) */ display: flex; align-items: center; gap: 16px; padding: 22px 0; cursor: pointer; user-select: none; } .tr-accordion-summary::-webkit-details-marker { display: none; /* hide default arrow (Chrome/Safari) */ } /* The light-sage rounded square that holds each icon */ .tr-accordion-icon { width: 44px; height: 44px; flex-shrink: 0; background-color: rgba(126, 202, 187, 0.22); /* light sage tint */ border-radius: 10px; background-repeat: no-repeat; background-position: center; background-size: 24px 24px; } .tr-accordion-title { flex: 1; font-family: "museo-sans", sans-serif; font-weight: 600; font-size: 17px; color: var(--tr-navy); letter-spacing: -0.01em; } /* The chevron at the right side — pure-CSS triangle made from two borders. Rotates 180° when the
is open. */ .tr-accordion-chevron { width: 10px; height: 10px; border-right: 2px solid var(--tr-sage); border-bottom: 2px solid var(--tr-sage); transform: rotate(45deg); transition: transform 0.25s ease; margin-right: 4px; margin-top: -4px; /* visually center against the title */ } details[open] .tr-accordion-chevron { transform: rotate(-135deg); margin-top: 2px; } /* The expanded body content — description + "Learn more" link */ .tr-accordion-body { padding: 0 0 24px 60px; /* left padding aligns with title (icon width + gap) */ font-size: 15px; line-height: 1.7; color: var(--tr-text-muted); } .tr-accordion-body p { margin-bottom: 12px; } .tr-accordion-body a { color: var(--tr-sage); font-weight: 500; text-decoration: none; background-image: var(--tr-wave-sage); /* reuse the wavy underline */ background-repeat: repeat-x; background-position: 0 100%; background-size: 24px 6px; padding-bottom: 4px; display: inline-block; } /* Centered "Browse All Services" button below the accordion */ .tr-accordion-cta { text-align: center; margin-top: 56px; } /* ── Navy outline button variant ── Existing .tr-btn-outline is designed for dark backgrounds (cream text). This new variant is for light backgrounds: navy text + navy border. Used by "Browse All Services" and other light-bg CTAs. */ .tr-btn-outline-navy { background: transparent; color: var(--tr-navy); border-color: var(--tr-navy); } .tr-btn-outline-navy:hover { background: var(--tr-navy); color: var(--tr-cream); border-color: var(--tr-navy); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(27, 58, 92, 0.15); } /* Responsive: stack the two columns on narrow viewports */ @media (max-width: 900px) { .tr-accordion-section { padding: 60px 24px; } .tr-accordion-layout { grid-template-columns: 1fr; gap: 40px; } .tr-accordion-media { position: static; } .tr-accordion-photo { aspect-ratio: 4/3; } } /* ── Accordion icons (9 service-specific SVGs as data URLs) ── */ .tr-acc-icon--wellness { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='4' width='12' height='17' rx='1.5'/%3E %3Crect x='9' y='2' width='6' height='3' rx='1'/%3E %3Cpath d='M9 13l2 2 4-4'/%3E%3C/svg%3E"); } .tr-acc-icon--surgery { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6-9 9-5 1 1-5z'/%3E %3Cpath d='M13 5l6 6'/%3E%3C/svg%3E"); } .tr-acc-icon--sick-emergency { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='14' rx='2'/%3E %3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E %3Cpath d='M12 11v6'/%3E %3Cpath d='M9 14h6'/%3E%3C/svg%3E"); } .tr-acc-icon--senior { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='14' r='4'/%3E %3Cpath d='M3 19h18'/%3E %3Cpath d='M12 8V5'/%3E %3Cpath d='M5 12L3 10'/%3E %3Cpath d='M19 12l2-2'/%3E%3C/svg%3E"); } .tr-acc-icon--reactive-fearful { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12.572L12 20l-7.5-7.428a5 5 0 1 1 7.5-6.566 5 5 0 1 1 7.5 6.572z'/%3E%3C/svg%3E"); } .tr-acc-icon--exotics { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h-1'/%3E %3Cpath d='M3 19l4-8'/%3E %3Cpath d='M3 19h9l9-9'/%3E %3Cpath d='M21 10h-1.5'/%3E %3Cpath d='M12 19v-4l-4-4 7-4 4-3'/%3E%3C/svg%3E"); } .tr-acc-icon--end-of-life { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19.2 2.96a1 1 0 0 1 1.8.61c0 4.5-3.5 12.5-10 12.5'/%3E %3Cpath d='M2 21c0-3 1.85-5.36 5.08-6'/%3E%3C/svg%3E"); } .tr-acc-icon--diagnostics { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v7a5 5 0 0 0 10 0V3'/%3E %3Cline x1='4' y1='3' x2='8' y2='3'/%3E %3Cline x1='14' y1='3' x2='18' y2='3'/%3E %3Cpath d='M11 17a5 5 0 0 0 10 0v-1.5'/%3E %3Ccircle cx='21' cy='13.5' r='2.5'/%3E%3C/svg%3E"); } .tr-acc-icon--pain-management { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B3A5C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E %3Ccircle cx='12' cy='12' r='6'/%3E %3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E"); } /* ── About page: two-column photo + blurb layout ── */ .tr-about-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; align-items: start; max-width: 1100px; margin: 48px auto; padding: 0 40px; } .tr-about-figure { margin: 0; } .tr-about-figure img { width: 100%; height: auto; border-radius: 18px; display: block; } .tr-about-figure figcaption { margin-top: 14px; font-style: italic; color: var(--tr-text-muted, #5a5a5a); text-align: center; font-size: 14px; } .tr-about-layout .tr-prose { max-width: none; } /* ── Section-scoped helpers for imported custom_html content ── Mirrors the existing convention (.tr-hero-content p a, .tr-prose a, etc.) — descendant selectors per section, no utility classes on the elements. */ /* Wavy sage underline for links inside the home Story section (same feel as .tr-prose a, scoped to the .tr-story-content surface). */ .tr-story-content p a { color: var(--tr-sage-light); text-decoration: none; background-image: var(--tr-wave-honey); background-repeat: repeat-x; background-position: 0 100%; background-size: 24px 6px; padding-bottom: 7px; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: color 0.2s; } .tr-story-content p a:hover { color: var(--tr-honey); } /* Photo placeholders that hold an rather than text now: fill the rounded container, no inline width/height needed on the . */ .tr-accordion-photo img, .tr-story-image-box img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } /* Header logo image. */ .tr-logo img { display: block; height: 48px; width: auto; } /* ── Stats row inside .tr-story-content (home page) ── */ .tr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 40px 72px; margin-top: 32px; margin-bottom: 8px; } .tr-stat-number { font-family: "museo-sans", sans-serif; font-weight: 700; font-size: 56px; line-height: 1; color: var(--tr-honey); letter-spacing: -0.02em; } .tr-stat-label { margin-top: 10px; font-family: "museo-sans", sans-serif; font-weight: 400; font-size: 18px; line-height: 1.35; color: rgba(250, 246, 240, 0.75); } @media (max-width: 640px) { .tr-stat-number { font-size: 44px; } .tr-stat-label { font-size: 16px; } .tr-stats { gap: 28px 48px; } } /* ── Google Reviews testimonial section (home) ── */ .tr-reviews { position: relative; background: var(--tr-cream); padding: 100px 40px; overflow: hidden; } .tr-reviews .tr-wave-texture { opacity: 0.04; } .tr-reviews-inner { position: relative; max-width: 1200px; margin: 0 auto; } .tr-reviews-header { text-align: center; margin-bottom: 64px; } .tr-reviews-header .tr-kicker { color: var(--tr-sage); } .tr-reviews-header h2 { font-family: "alverata", serif; font-size: 38px; font-weight: 400; color: var(--tr-navy); margin: 12px 0; line-height: 1.15; } .tr-reviews-header h2 em { font-style: italic; color: var(--tr-sage); } .tr-reviews-subhead { font-size: 16px; color: var(--tr-text-muted); max-width: 540px; margin: 0 auto; line-height: 1.6; } .tr-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 900px) { .tr-reviews-grid { grid-template-columns: 1fr; gap: 48px; } } .tr-review-card { position: relative; background: var(--tr-warm-white); border-radius: 18px; padding: 56px 28px 28px; box-shadow: 0 10px 28px rgba(15, 39, 64, 0.06); } .tr-review-quote-icon { position: absolute; top: -22px; left: 24px; width: 48px; height: 48px; background: var(--tr-sage); color: var(--tr-cream); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "alverata", serif; font-style: italic; font-size: 38px; line-height: 1; padding-top: 14px; box-shadow: 0 6px 14px rgba(91, 174, 158, 0.35); } .tr-review-stars { color: var(--tr-honey); letter-spacing: 3px; font-size: 18px; margin-bottom: 16px; line-height: 1; } .tr-review-text { font-family: "museo-sans", sans-serif; font-size: 15px; color: var(--tr-text-dark); line-height: 1.7; margin: 0 0 24px; } .tr-review-meta { display: flex; flex-direction: column; gap: 3px; padding-top: 16px; border-top: 1px solid rgba(15, 39, 64, 0.08); } .tr-review-author { font-family: "museo-sans", sans-serif; font-weight: 700; color: var(--tr-navy); font-size: 15px; letter-spacing: 0.4px; } .tr-review-source { font-size: 13px; color: var(--tr-sage); } .tr-reviews-cta-wrap { text-align: center; margin-top: 56px; } .tr-reviews-cta { display: inline-block; color: var(--tr-sage-light); text-decoration: none; background-image: var(--tr-wave-sage); background-repeat: repeat-x; background-position: 0 100%; background-size: 24px 6px; padding-bottom: 6px; font-size: 16px; transition: color 0.2s; } .tr-reviews-cta:hover { color: var(--tr-sage); } /* ── Reviews:
expand + alignment polish ── */ .tr-review-text { display: block; } .tr-review-card { display: flex; flex-direction: column; } .tr-review-card .tr-review-text { flex: 1 1 auto; } .tr-review-more { display: inline; } .tr-review-more summary { display: inline; cursor: pointer; list-style: none; } .tr-review-more summary::-webkit-details-marker { display: none; } .tr-review-more summary::after { content: " […] read more"; color: var(--tr-sage); font-weight: 600; font-size: 14px; } .tr-review-more[open] summary::after { content: " show less"; color: var(--tr-sage); } .tr-review-more[open] { display: inline; } /* ── Announcement topbar (single-line phone CTA) ── */ .tr-topbar-announcement { justify-content: center; text-align: center; gap: 6px; } .tr-topbar-text { font-size: 13px; letter-spacing: 0.3px; color: var(--tr-cream); } .tr-topbar-announcement .tr-topbar-link { font-weight: 700; margin: 0 2px; }