/* ============================================================ Headroom — Practitioner profile (2025 redesign) Two columns: main content + sticky booking sidebar ============================================================ */ /* Design tokens. Also declared on the add-to-home-screen sheet, the book bar and the available-dates popup, which are re-parented to at runtime and would otherwise fall outside this scope. */ .hrp-profile-2col, .hrp-a2hs-sheet, .hrp-bookbar, .hrp-dates { --hrp-primary: #006566; --hrp-teal: #123c34; --hrp-teal-soft: #1f5c52; --hrp-accent: #2f7d70; --hrp-ink: #1c2b27; --hrp-muted: #5f6f6a; --hrp-line: #e6ebe8; --hrp-card: #ffffff; --hrp-bg-soft: #f4f7f5; --hrp-star: #f5b301; --hrp-yellow: #FED84D; --hrp-yellow-deep: #f5c92e; --hrp-radius: 16px; /* One gap for the whole layout: between the two columns, between the blocks in the main column and between the cards in the side panel. */ --hrp-gap: 15px; --hrp-shadow: 0 2px 18px rgba(18, 60, 52, .07); } .hrp-profile-2col { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--hrp-gap); max-width: 1200px; margin: 0 auto; padding: 20px 0; align-items: start; color: var(--hrp-ink); font-family: inherit; } /* Shared icon sizing */ .hrp-profile-2col .hrp-ic { width: 20px; height: 20px; flex-shrink: 0; display: inline-block; vertical-align: middle; } /* Shared headings + links */ .hrp-h2 { font-size: 1.5rem; font-weight: 800; color: var(--hrp-ink); margin: 0 0 10px; letter-spacing: -0.01em; } .hrp-inline-link { color: var(--hrp-accent); font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: color .15s; } .hrp-inline-link:hover { text-decoration: underline; } /* Same green in every state: the theme's visited/hover/focus link colours must not repaint "View more" or "Learn more". */ .hrp-inline-link:link, .hrp-inline-link:visited, .hrp-inline-link:hover, .hrp-inline-link:focus, .hrp-inline-link:active { color: var(--hrp-accent) !important; } .hrp-block { margin-bottom: var(--hrp-gap); } /* Star glyphs (shared) */ .hrp-star { font-size: 15px; line-height: 1; color: #d5ddd9; } .hrp-star.filled { color: var(--hrp-star); } .hrp-star.half { position: relative; display: inline-block; color: #d5ddd9; } .hrp-star.half::after { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--hrp-star); } /* ============================================================ HERO CARD ============================================================ */ .hrp-hero { background: var(--hrp-primary); border-radius: var(--hrp-radius); overflow: hidden; margin-bottom: var(--hrp-gap); box-shadow: var(--hrp-shadow); color: #eaf3ef; background-image: radial-gradient(circle at 88% -10%, rgba(47, 125, 112, .55), transparent 42%), radial-gradient(circle at 6% 8%, rgba(31, 92, 82, .45), transparent 38%); } .hrp-hero-top-row { display: flex; gap: 26px; padding: 30px 34px; } .hrp-hero-photo { position: relative; flex-shrink: 0; width: 290px; /* Matches the 4:5 portrait crop practitioners make in the dashboard. */ aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: #0d2c26; } /* Absolutely fill the frame — theme-level `img { height: auto }` rules otherwise shrink the image and leave a dark band of the container's background under it. Scoped through .hrp-hero purely for specificity: a bare `.hrp-hero-photo img` loses to a later same-weight theme rule. */ .hrp-hero .hrp-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .hrp-hero-body { min-width: 0; flex: 1; /* Column that spans the photo's height: intro at the top, badges pinned to the bottom, so the text balances the photo instead of bunching up beside its top half. */ display: flex; flex-direction: column; padding: 28px 0 8px; } .hrp-hero-name { font-size: 2.35rem; font-weight: 800; color: #fff; margin: 0 0 12px; line-height: 1.1; letter-spacing: -0.015em; } /* The site's global CSS has `.elementor-kit-1495 p { margin-block-end: 0 }` (0,1,1), which beats a single-class rule and silently zeroes the bottom margin of every

. The hero paragraphs go through .hrp-hero (0,2,0). */ .hrp-hero .hrp-hero-role { font-size: 1.02rem; font-weight: 600; color: var(--hrp-yellow); line-height: 1.3; margin: 0 0 12px; } .hrp-hero .hrp-hero-tagline { font-size: 0.98rem; line-height: 1.55; color: #d4e6e0; margin: 0 0 28px; max-width: 52ch; } .hrp-hero-meta { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; /* Auto top margin here and on the badges: the column's spare height is split evenly, so the gap above this row always equals the gap below. The 28px margins are the floor when there is no spare height. */ margin-top: auto; margin-bottom: 28px; } .hrp-hero-rating { display: flex; align-items: center; gap: 8px; } .hrp-hero-stars .hrp-star { font-size: 18px; } .hrp-hero-rating-val { font-size: 1.1rem; font-weight: 800; color: #fff; } .hrp-hero-sessions { display: flex; align-items: center; gap: 10px; font-size: 0.8rem; line-height: 1.25; color: #d4e6e0; } /* Divider before every stat block that has something in front of it. */ .hrp-hero-meta > * + .hrp-hero-sessions { padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .28); } .hrp-hero-sessions .hrp-ic { width: 24px; height: 24px; color: #9fd3c6; } /* Count stacked over its label. */ .hrp-hero-sessions strong { display: block; color: #fff; font-size: 1.1rem; font-weight: 800; } /* All badges on one row: they share the width and shrink together, each label wrapping onto its second line rather than the row breaking. */ .hrp-hero-badges { display: flex; flex-wrap: nowrap; gap: 20px; margin-top: auto; /* bottom of the body column, level with the photo */ } /* Icon beside a two-line label. */ .hrp-hero-badge { display: inline-flex; align-items: center; gap: 9px; flex: 0 1 auto; min-width: 0; max-width: 170px; font-size: 0.82rem; line-height: 1.3; color: #eaf3ef; font-weight: 600; } .hrp-hero-badge .hrp-ic { flex-shrink: 0; width: 26px; height: 26px; color: var(--hrp-yellow); } /* Facts strip along the bottom of the hero */ .hrp-hero-facts { display: grid; /* One column per fact shown (3, or 4 with Session style). */ grid-template-columns: repeat(var(--hrp-facts, 3), minmax(0, 1fr)); gap: 20px; padding: 22px 34px; background: var(--hrp-bg-soft); } .hrp-hero-fact { display: flex; flex-direction: column; gap: 6px; } /* Heading one step above its value, so the label never reads smaller than the text under it. */ .hrp-hero-fact-head { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 700; color: var(--hrp-ink); } .hrp-hero-fact-head .hrp-ic { width: 17px; height: 17px; color: var(--hrp-accent); } .hrp-hero-fact-body { font-size: 0.84rem; font-weight: 500; color: #35443f; line-height: 1.4; } /* ============================================================ ADD TO HOME SCREEN Mobile only — a home screen shortcut means nothing on a desktop, so both the button and its sheet stay hidden until 680px. ============================================================ */ .hrp-a2hs, .hrp-a2hs-sheet { display: none; } .hrp-a2hs-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 48px; padding: 13px 18px; border: 1px solid var(--hrp-yellow); border-radius: 12px; background: var(--hrp-yellow); color: var(--hrp-teal); font-size: 0.9rem; font-weight: 700; font-family: inherit; line-height: 1.3; text-align: center; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background .15s, border-color .15s; } .hrp-a2hs-btn:hover, .hrp-a2hs-btn:active { background: var(--hrp-yellow-deep); border-color: var(--hrp-yellow-deep); color: var(--hrp-teal); } .hrp-a2hs-btn .hrp-ic { width: 18px; height: 18px; color: var(--hrp-teal); } /* ---- Sheet ---- */ .hrp-a2hs-sheet[hidden] { display: none; } .hrp-a2hs-backdrop { position: absolute; inset: 0; background: rgba(18, 60, 52, .55); } .hrp-a2hs-dialog { position: relative; width: 100%; background: var(--hrp-card); border-radius: 18px 18px 0 0; box-shadow: 0 -4px 30px rgba(18, 60, 52, .25); max-height: 85vh; max-height: 85dvh; display: flex; flex-direction: column; /* Clear the iOS home indicator. */ padding-bottom: env(safe-area-inset-bottom, 0px); } .hrp-a2hs-dialog::before { content: ""; flex-shrink: 0; width: 40px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: var(--hrp-line); } .hrp-a2hs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 14px; border-bottom: 1px solid var(--hrp-line); } .hrp-a2hs-sheet .hrp-a2hs-title { font-size: 1.15rem; font-weight: 800; line-height: 1.3; color: var(--hrp-ink); margin: 0; } /* The sheet is re-parented to , so the theme's generic button and paragraph rules reach it; the .hrp-a2hs-sheet prefix outranks them. */ .hrp-a2hs-sheet .hrp-a2hs-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 0; padding: 0; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--hrp-bg-soft); color: var(--hrp-teal); font-size: 1.6rem; font-weight: 400; font-family: inherit; line-height: 1; cursor: pointer; appearance: none; -webkit-appearance: none; } .hrp-a2hs-sheet .hrp-a2hs-close:hover, .hrp-a2hs-sheet .hrp-a2hs-close:focus { background: var(--hrp-line); color: var(--hrp-teal); } .hrp-a2hs-body { display: flex; flex-direction: column; gap: 18px; padding: 18px 20px 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Spacing comes from the gap above, not from margins the theme can override. */ .hrp-a2hs-sheet .hrp-a2hs-body > * { margin: 0; } .hrp-a2hs-intro { font-size: 0.9rem; line-height: 1.55; color: var(--hrp-muted); } .hrp-a2hs-sheet .hrp-a2hs-install { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 13px 18px; border: 1px solid var(--hrp-yellow); border-radius: 12px; background: var(--hrp-yellow); color: var(--hrp-teal); font-size: 0.95rem; font-weight: 700; font-family: inherit; line-height: 1.3; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background .15s, border-color .15s; } .hrp-a2hs-sheet .hrp-a2hs-install:hover, .hrp-a2hs-sheet .hrp-a2hs-install:active { background: var(--hrp-yellow-deep); border-color: var(--hrp-yellow-deep); color: var(--hrp-teal); } .hrp-a2hs-sheet .hrp-a2hs-install[hidden] { display: none; } .hrp-a2hs-steps-intro { font-size: 0.82rem; font-weight: 700; color: var(--hrp-muted); } .hrp-a2hs-steps-intro[hidden] { display: none; } .hrp-a2hs-install .hrp-ic { width: 18px; height: 18px; } /* Inline Share glyph inside a step. */ .hrp-a2hs-glyph { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; color: var(--hrp-primary); } /* Numbered badges instead of list markers, so the steps read as a sequence. */ .hrp-a2hs-sheet .hrp-a2hs-steps { padding: 0; list-style: none; counter-reset: hrp-a2hs-step; display: flex; flex-direction: column; gap: 12px; } .hrp-a2hs-sheet .hrp-a2hs-steps:empty { display: none; } .hrp-a2hs-sheet .hrp-a2hs-steps li { position: relative; margin: 0; padding-left: 36px; min-height: 24px; font-size: 0.9rem; line-height: 1.6; color: #35443f; counter-increment: hrp-a2hs-step; } .hrp-a2hs-sheet .hrp-a2hs-steps li::before { content: counter(hrp-a2hs-step); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #eaf5ee; color: var(--hrp-teal); font-size: 0.78rem; font-weight: 800; line-height: 24px; text-align: center; } .hrp-a2hs-steps strong { color: var(--hrp-teal); font-weight: 700; } .hrp-a2hs-url { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--hrp-line); border-radius: 12px; background: var(--hrp-bg-soft); } .hrp-a2hs-sheet .hrp-a2hs-url-text { flex: 1 1 auto; min-width: 0; padding: 0; font-size: 0.78rem; color: var(--hrp-muted); background: none; /* Long slugs must not push the Copy button off the sheet. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hrp-a2hs-sheet .hrp-a2hs-copy { flex-shrink: 0; min-height: 40px; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--hrp-teal); color: #fff; font-size: 0.82rem; font-weight: 700; font-family: inherit; line-height: 1.3; cursor: pointer; appearance: none; -webkit-appearance: none; } .hrp-a2hs-sheet .hrp-a2hs-copy:hover, .hrp-a2hs-sheet .hrp-a2hs-copy:focus { background: var(--hrp-teal-soft); color: #fff; } /* ============================================================ FLOATING BOOK BAR Single-column layouts only (900px and down), where the book card sits far below the fold. Re-parented to at runtime, hence the .hrp-bookbar prefix on rules the theme would otherwise win. ============================================================ */ .hrp-bookbar, .hrp-bookbar[hidden] { display: none; } @media (max-width: 900px) { .hrp-bookbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); /* Above page content, below the sheet and modals. */ z-index: 9990; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 10px 10px 18px; border-radius: 16px; background: var(--hrp-primary); box-shadow: 0 8px 28px rgba(0, 101, 102, .35); transition: transform .25s ease, opacity .25s ease; } .hrp-bookbar[hidden] { display: none; } .hrp-bookbar.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; pointer-events: none; } } .hrp-bookbar-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hrp-bookbar-info[hidden] { display: none; } .hrp-bookbar-label { font-size: 0.72rem; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, .72); } .hrp-bookbar-time { font-size: 0.92rem; font-weight: 700; line-height: 1.25; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hrp-bookbar .hrp-bookbar-btn { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto; min-height: 48px; padding: 12px 20px; border: 1px solid var(--hrp-yellow); border-radius: 12px; background: var(--hrp-yellow); color: var(--hrp-teal); font-size: 0.92rem; font-weight: 700; font-family: inherit; line-height: 1.3; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background .15s, border-color .15s; } /* No "Next slot" text to sit beside, so the button takes the full bar. */ .hrp-bookbar-info[hidden] + .hrp-bookbar-btn { flex: 1 1 auto; } .hrp-bookbar .hrp-bookbar-btn:hover, .hrp-bookbar .hrp-bookbar-btn:active { background: var(--hrp-yellow-deep); border-color: var(--hrp-yellow-deep); color: var(--hrp-teal); } .hrp-bookbar-btn .hrp-ic { width: 18px; height: 18px; } @media (prefers-reduced-motion: reduce) { .hrp-bookbar { transition: none; } } /* ============================================================ AREAS OF SUPPORT ============================================================ */ .hrp-areas-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } /* White tiles on the page background, styled like the home page's Areas of Support cards: a big icon over a short label, so the icon carries the tile and the text only names it. The label fills the space under the icon and centres in it, so tiles in a row with short and long labels share one layout. */ .hrp-area { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 6px; padding: 12px 8px 10px; border: 0; border-radius: 10px; background: var(--hrp-card); box-shadow: 0 4px 14px rgba(20, 30, 60, .06); color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; } .hrp-area:hover { transform: translateY(-2px); box-shadow: var(--hrp-shadow); border-color: #cfe0da; } .hrp-area-ic { color: var(--hrp-accent); } .hrp-area-ic { display: block; line-height: 0; } .hrp-area-ic .hrp-ic { width: 64px; height: 64px; } .hrp-area-label { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 600; color: var(--hrp-ink); line-height: 1.3; } /* Focus areas from the Areas of Support field carry that area's brand colour (--hrp-area-color) and its featured SVG icon. */ .hrp-area--themed .hrp-area-ic { color: var(--hrp-area-color); } /* Label in the theme's heading colour; black when none is set. */ .hrp-area-label { color: var(--hrp-area-heading, var(--hrp-ink)); } .hrp-area-svg, .hrp-area-img { width: 64px; height: 64px; display: block; object-fit: contain; } /* The area icons carry their own fills; repainting every shape with currentColor flattened them into solid blobs. Left as drawn. */ /* ============================================================ CARDS (Methods + Featured insight) ============================================================ */ .hrp-two-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hrp-gap); margin-bottom: var(--hrp-gap); } .hrp-card { background: var(--hrp-card); border: 1px solid var(--hrp-line); border-radius: var(--hrp-radius); padding: 24px 26px; box-shadow: var(--hrp-shadow); } .hrp-card-title { font-size: 1.02rem; font-weight: 800; color: var(--hrp-ink); margin: 0 0 18px; } .hrp-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .hrp-method { display: inline-block; padding: 6px 14px; border-radius: 999px; background: #eaf5ee; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: var(--hrp-teal-soft); text-decoration: none; transition: background .15s ease, color .15s ease; } .hrp-method:hover { background: #d6ebdf; color: var(--hrp-teal); } .hrp-card-note { font-size: 0.86rem; color: var(--hrp-muted); line-height: 1.55; margin: 0 0 12px; } /* Long-text clamp shared by the Methods write-up and insight quotes. */ .hrp-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .hrp-clamp--4 { -webkit-line-clamp: 4; } .hrp-clamp--6 { -webkit-line-clamp: 6; } /* Stays a -webkit-box when open so the clamped and unclamped heights are laid out the same way; a display switch shifts the big quote glyph's line box a few pixels and made short text look like it overflowed. */ .hrp-clamp.is-expanded { -webkit-line-clamp: 999; } .hrp-clamp-toggle { display: block; width: max-content; margin: 0 0 12px auto; padding: 0; border: 0; background: none; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--hrp-accent); cursor: pointer; } /* Inline variant (methods write-up): "›››" sits over the end of the last clamped line, on a fade of the card colour so it never overlaps text. */ /* The wrap owns the gap under the note, so the toggle's offset does not depend on the paragraph's own bottom margin (zeroed by the site's global `p` rule, see the hero). */ .hrp-clamp-wrap { position: relative; margin-bottom: 12px; } .hrp-clamp-wrap .hrp-card-note { margin-bottom: 0; } .hrp-clamp-toggle--inline { position: absolute; right: 0; bottom: 0; margin: 0; padding-left: 2.2em; line-height: 1.55; letter-spacing: 0.04em; background: linear-gradient(to right, transparent, var(--hrp-card) 1.8em) !important; } /* Open: nothing to cover, so it drops under the text, right-aligned. */ .hrp-clamp-toggle--inline[aria-expanded="true"] { position: static; margin: 4px 0 0 auto; padding-left: 0; background: none !important; } /* "›››" / "‹‹‹" toggles: same weight and tracking as the About section's. */ .hrp-clamp-toggle[data-more] { font-size: 1rem; font-weight: 700; letter-spacing: .05em; } /* display:block above would otherwise beat the browser's [hidden] rule. */ .hrp-clamp-toggle[hidden] { display: none; } .hrp-clamp-toggle:hover, .hrp-clamp-toggle:focus, .hrp-clamp-toggle:active { background: none !important; box-shadow: none !important; outline: none; color: var(--hrp-accent) !important; } /* Keep the fade while collapsed; the reset above would expose the text under it. */ .hrp-clamp-toggle--inline[aria-expanded="false"]:hover, .hrp-clamp-toggle--inline[aria-expanded="false"]:focus, .hrp-clamp-toggle--inline[aria-expanded="false"]:active { background: linear-gradient(to right, transparent, var(--hrp-card) 1.8em) !important; } /* Featured insight */ .hrp-insight { background: var(--hrp-bg-soft); /* Column, so the dots can sit on the card's bottom edge whatever the length of the quote above them. */ display: flex; flex-direction: column; } .hrp-insight-quote { position: relative; font-size: 0.95rem; line-height: 1.6; color: #2c3d38; margin: 0 0 14px; padding-left: 10px; font-style: italic; } .hrp-insight-mark { font-size: 2.4rem; font-weight: 800; color: var(--hrp-accent); line-height: 0; margin-right: 6px; vertical-align: -0.35em; font-style: normal; } .hrp-insight-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .hrp-insight-head .hrp-card-title { margin: 0; } .hrp-insight-nav { display: flex; align-items: center; gap: 4px; } .hrp-insight-arrow { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--hrp-line); border-radius: 50%; background: var(--hrp-card); color: var(--hrp-teal); cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; } .hrp-insight-arrow:hover { background: var(--hrp-accent); border-color: var(--hrp-accent); color: #fff; } .hrp-insight-arrow:active { transform: scale(.94); } .hrp-insight-arrow:focus-visible { outline: 2px solid var(--hrp-accent); outline-offset: 2px; } .hrp-insight-viewport { overflow: hidden; transition: height .35s cubic-bezier(.4, 0, .2, 1); } .hrp-insight-track { display: flex; align-items: flex-start; transition: transform .45s cubic-bezier(.4, 0, .2, 1); will-change: transform; } .hrp-insight-slide { flex: 0 0 100%; min-width: 0; opacity: .35; transition: opacity .45s ease; } .hrp-insight-slide.is-active { opacity: 1; } .hrp-insight-foot { margin-top: auto; /* the quote's own 14px margin already spaces it */ display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; } .hrp-insight-dots { display: flex; gap: 2px; } .hrp-insight-dot { width: 24px; height: 24px; padding: 8px; box-sizing: border-box; border: 0; appearance: none; -webkit-appearance: none; border-radius: 50%; background: #cfd8d4; background-clip: content-box; cursor: pointer; transition: background .15s, transform .15s; } .hrp-insight-dot.active { background: var(--hrp-accent); background-clip: content-box; transform: scale(1.15); } .hrp-insight-dot:focus-visible { outline: 2px solid var(--hrp-accent); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { .hrp-insight-track, .hrp-insight-viewport, .hrp-insight-slide { transition: none; } } /* ============================================================ ABOUT ============================================================ */ .hrp-about-text { font-size: 0.95rem; line-height: 1.75; color: #35443f; margin: 0 0 12px; } /* ============================================================ REVIEWS ============================================================ */ .hrp-reviews-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; } .hrp-reviews-head .hrp-h2 { margin: 0; } .hrp-reviews-nav { display: flex; align-items: center; gap: 4px; } .hrp-reviews-nav[hidden] { display: none; } .hrp-reviews-carousel { overflow: hidden; } /* Invite card fixed beside the carousel: it takes one card's width and the carousel pages the rest, so the row still reads as three (two below 1080px) equal cards while only the experiences slide. */ .hrp-reviews-body--split { display: flex; align-items: stretch; } .hrp-reviews-body--split > .hrp-review-card--invite { flex: 0 0 calc((100% - 12px) / 3); margin-right: 6px; } .hrp-reviews-body--split > .hrp-reviews-carousel { flex: 1 1 0; min-width: 0; } .hrp-reviews-body--split .hrp-reviews-track > .hrp-review-card { flex-basis: calc(50% - 3px); } @media (max-width: 1080px) { .hrp-reviews-body--split > .hrp-review-card--invite { flex-basis: calc(50% - 3px); } .hrp-reviews-body--split .hrp-reviews-track > .hrp-review-card { flex-basis: 100%; } } /* One card per page: the experiences come first and the invite card (with the form panel it opens) drops below them and their dots. The row is dissolved so its children order alongside the section's own. */ @media (max-width: 680px) { .hrp-reviews:has(> .hrp-reviews-body--split) { display: flex; flex-direction: column; } .hrp-reviews-body--split { display: contents; } .hrp-reviews-body--split > .hrp-review-card--invite { order: 1; flex: none; margin: 18px 0 0; } .hrp-reviews-body--split > .hrp-reviews-carousel { flex: none; } .hrp-reviews:has(> .hrp-reviews-body--split) > .hrp-reviews-invite { order: 1; } } /* "Share your experience" panel, opened from the invite card. */ .hrp-reviews-invite[hidden] { display: none; } .hrp-reviews-invite { margin: 18px 0 0; padding: 22px 24px; background: var(--hrp-card); border: 1px solid var(--hrp-line); border-radius: var(--hrp-radius); } .hrp-reviews-invite-title { font-size: 1.02rem; font-weight: 800; color: var(--hrp-ink); margin: 0 0 8px; } .hrp-reviews-invite-prompt { font-size: 0.92rem; line-height: 1.6; color: #35443f; margin: 0 0 14px; } .hrp-reviews-invite-note { font-size: 0.9rem; color: var(--hrp-muted); margin: 0; } /* The embedded UM Reviews block repeats a heading and average the section already shows, and its own chrome (open/close toggle, preview card, byline, pencil icon) is noise here: the form is shown open, restyled to match. */ .hrp-um-form .um-reviews-header, .hrp-um-form .um-reviews-avg-rating, .hrp-um-form .um-reviews-details, .hrp-um-form .um-reviews-prepost, .hrp-um-form .um-reviews-post.review-new, .hrp-um-form .um-reviews-cancel-add, .hrp-um-form #custom-um-reviews-meta, .hrp-um-form #add-edit-img img, .hrp-um-form .um-reviews-form br, .hrp-um-form .um-clear { display: none !important; } .hrp-um-form .um-reviews-item { margin: 0; padding: 0; border: 0; } .hrp-um-form .um-reviews-post.review-form { display: block !important; margin: 0; padding: 0; font-size: inherit; } /* Row layout: fields take a full row each; the two checkbox labels share one. */ .hrp-um-form .um-reviews-form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; } .hrp-um-form span.um-reviews-rate, .hrp-um-form .um-reviews-title, .hrp-um-form .um-reviews-content:not(:has(label)), .hrp-um-form .um-field-error, .hrp-um-form .um-reviews-send { flex: 0 0 100%; } .hrp-um-form .um-reviews-content:has(label) { flex: 0 0 auto; width: auto; } .hrp-um-form span.um-reviews-rate { display: block; margin: 6px 0 0; } .hrp-um-form span.um-reviews-rate i { font-size: 28px; width: 30px; color: var(--hrp-star); } .hrp-um-form .um-reviews-title, .hrp-um-form .um-reviews-content { display: block; width: 100%; margin: 0; padding: 0; } /* um-reviews.css strips these fields to bare text with !important rules at "div.um .um-form div.um-reviews-post" specificity; out-specify it here. */ div.um .um-form .hrp-um-form div.um-reviews-post input[type="text"], div.um .um-form .hrp-um-form div.um-reviews-post textarea { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: auto !important; box-sizing: border-box; margin: 0 !important; padding: 12px 16px !important; border: 1px solid #d5dfdb !important; border-radius: 14px !important; background: #fff; font: inherit; font-size: 0.92rem; font-weight: 400; line-height: 1.5; color: var(--hrp-ink); text-indent: 0; position: static; top: auto; } div.um .um-form .hrp-um-form div.um-reviews-post textarea { min-height: 140px; height: 140px !important; resize: vertical; } /* Placeholders: the browser default grey was too faint to read. Muted ink (#5f6f6a, ~5:1 on white) keeps them readable yet clearly a hint. */ div.um .um-form .hrp-um-form div.um-reviews-post input[type="text"]::placeholder, div.um .um-form .hrp-um-form div.um-reviews-post textarea::placeholder { color: var(--hrp-muted) !important; opacity: 1; } /* codingcafe custom.css pads the highlight input 34px for a pencil icon that is hidden here; an ID selector, so it needs one to be out-specified. */ .hrp-um-form #add-edit-img input[type="text"] { padding: 10px 12px !important; } div.um .um-form .hrp-um-form div.um-reviews-post input[type="text"]:focus, div.um .um-form .hrp-um-form div.um-reviews-post textarea:focus { outline: none !important; /* Full shorthand: the plugin's :focus rule sets border: none !important. */ border: 1px solid var(--hrp-accent) !important; box-shadow: 0 0 0 3px rgba(47, 125, 112, .15); } div.um .um-form .hrp-um-form div.um-reviews-post .um-reviews-title, div.um .um-form .hrp-um-form div.um-reviews-post .um-reviews-content { margin: 0 !important; padding: 0 !important; font-weight: 400; position: static; top: auto; } .hrp-um-form .um-reviews-form label { display: inline-flex !important; align-items: center; gap: 8px; margin: 0; font-size: 0.88rem; color: #35443f; cursor: pointer; } .hrp-um-form .um-reviews-form input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--hrp-accent); } /* UM paints this box solid red; with the red text set here it vanished. */ div.um .um-form .hrp-um-form .um-field-error { margin: 0 !important; padding: 10px 14px !important; border-radius: 8px; background: #fdecea !important; border: 1px solid #f5c2c0; font-size: 0.88rem; font-weight: 600; line-height: 1.4; color: #b42318 !important; } div.um .um-form .hrp-um-form .um-field-error::before, div.um .um-form .hrp-um-form .um-field-error .um-field-arrow { display: none !important; } .hrp-um-form .um-reviews-send { display: block; margin-top: 6px; } div.um .um-form .hrp-um-form div.um-reviews-post .um-reviews-send input, div.um .um-form .hrp-um-form div.um-reviews-post .um-reviews-send input[type="submit"].um-button, div.um .um-form .hrp-um-form div.um-reviews-post .um-reviews-send input[type="button"] { max-width: none !important; width: auto !important; height: auto !important; line-height: 1.2; background: var(--hrp-primary) !important; color: #fff !important; border: 0; /* UM's .um-button sets its own radius and caps with !important. 6px is the standard button radius. */ border-radius: 6px !important; text-transform: none !important; /* Same size and type as the invite card's "Share your experience". */ padding: 10px 20px !important; /* Forced: Ultimate Member's button styles were rendering this lighter than the invite card's "Share your experience". */ font-family: inherit !important; font-size: 0.86rem !important; font-weight: 700 !important; letter-spacing: normal !important; cursor: pointer; } div.um .um-form .hrp-um-form div.um-reviews-post .um-reviews-send input:hover { background: var(--hrp-teal-soft) !important; } .hrp-reviews-track { display: flex; transition: transform .35s ease; } /* Three to a page: (100% - two 6px gaps) / 3. The cards are one set, not separate sections, so they sit much closer than the layout gap. The JS measures the stride, so only this width decides the cards per page. */ .hrp-review-card { flex: 0 0 calc((100% - 12px) / 3); margin-right: 6px; background: var(--hrp-card); border: 1px solid var(--hrp-line); border-radius: var(--hrp-radius); padding: 20px 20px 18px; box-sizing: border-box; } /* Invite card: always first, tinted so it reads as an action, not a review. */ .hrp-review-card--invite { display: flex; flex-direction: column; align-items: flex-start; background: #eef6f3; border-color: #cfe0da; } .hrp-review-invite-ic { display: block; margin-bottom: 12px; } /* Pen-and-hand line drawing (transparent background, 451×156). */ .hrp-review-invite-ic img { display: block; width: 150px; height: auto; } .hrp-review-invite-body { width: 100%; } .hrp-review-card--invite .hrp-review-text { margin-bottom: 16px; } .hrp-review-invite-btn, .hrp-review-invite-btn:visited { display: inline-block; margin-top: auto; padding: 10px 20px; border: 0; border-radius: 6px; background: var(--hrp-primary); color: #fff; font: inherit; font-size: 0.86rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; } .hrp-review-invite-btn:hover, .hrp-review-invite-btn:focus { background: var(--hrp-teal-soft) !important; color: #fff !important; } .hrp-review-invite-note { margin: auto 0 0; font-size: 0.86rem; color: var(--hrp-muted); } /* No experiences yet: the invite card is the only card, so it spans the row with icon, message and action side by side. */ .hrp-review-card--solo { flex: 0 0 100%; margin-right: 0; flex-direction: row; align-items: center; gap: 18px; padding: 22px 26px; } .hrp-review-card--solo .hrp-review-invite-ic { flex-shrink: 0; margin-bottom: 0; } .hrp-review-card--solo .hrp-review-invite-body { flex: 1; min-width: 0; } .hrp-review-card--solo .hrp-review-text { margin-bottom: 0; } .hrp-review-card--solo .hrp-review-invite-btn, .hrp-review-card--solo .hrp-review-invite-note { flex-shrink: 0; margin: 0; } .hrp-review-stars { margin-bottom: 12px; letter-spacing: 1px; } .hrp-review-stars .hrp-star { font-size: 16px; } /* Rating-only cards have no paragraph to fill them; keep the stars and the byline apart so they do not sit level with the text cards' first line. */ .hrp-review-card--rating .hrp-review-by { margin-top: 18px; } .hrp-review-title { font-size: 0.95rem; font-weight: 700; color: var(--hrp-ink); line-height: 1.35; margin: 0 0 8px; } .hrp-review-text { font-size: 0.92rem; line-height: 1.6; color: #35443f; margin: 0 0 14px; } /* Client quotes in italics, as on the pre-redesign profile; the invite card's prompt is Headroom's own words, so it stays upright. */ .hrp-review-card:not(.hrp-review-card--invite) .hrp-review-text { font-style: italic; } /* Private experience: the rating shows, the words stay with the practitioner. */ .hrp-review-text--private { font-style: italic; color: #6b7a75; } .hrp-review-more { display: inline-flex; align-items: center; margin: -6px 0 12px; padding: 0; border: 0; background: none; font: inherit; font-size: 1rem; line-height: 1; font-weight: 700; letter-spacing: .05em; color: var(--hrp-accent); cursor: pointer; text-decoration: none; transition: color 0.15s ease, transform 0.15s ease; } .hrp-review-more:hover span, .hrp-review-more:focus-visible span { transform: translateX(2px); } .hrp-review-more span { display: inline-block; transition: transform 0.15s ease; } .hrp-review-more:hover, .hrp-review-more:focus, .hrp-review-more:active, .hrp-review-more[aria-expanded="true"] { background: none !important; box-shadow: none !important; text-decoration: none !important; color: var(--hrp-teal) !important; } .hrp-review-more:focus-visible { outline: 2px solid var(--hrp-accent); outline-offset: 3px; border-radius: 4px; } .hrp-review-more[aria-expanded="true"]:hover span, .hrp-review-more[aria-expanded="true"]:focus-visible span { transform: translateX(-2px); } .hrp-review-by { font-size: 0.82rem; font-weight: 600; color: var(--hrp-muted); margin: 0; } /* No dots until JS builds them (and none at all for a single page). */ .hrp-reviews-dots:empty { display: none; } /* The script puts the dots on a strip and slides it so at most seven are in view (7 × 24px dots + 6 × 2px gaps), windowed around the current page. */ .hrp-reviews-dots { max-width: 180px; margin: 12px auto 0; overflow: hidden; } .hrp-reviews-dots-strip { display: flex; justify-content: center; align-items: center; gap: 2px; width: max-content; min-width: 100%; transition: transform .3s ease; } .hrp-reviews-dots-strip:has(> :nth-child(8)) { justify-content: flex-start; } /* 24×24 tap target (WCAG 2.5.8) wrapped around an 8px visual dot: the padding is transparent and `background-clip` keeps the fill in the content box. The dots are the only carousel control on a phone. */ .hrp-reviews-dot { width: 24px; height: 24px; padding: 8px; box-sizing: border-box; border: 0; appearance: none; -webkit-appearance: none; border-radius: 50%; background: #cfd8d4; background-clip: content-box; cursor: pointer; transition: background .15s, transform .15s; } .hrp-reviews-dot.active { background: var(--hrp-accent); background-clip: content-box; transform: scale(1.15); } /* End of the window with more pages beyond it: a smaller dot. Dots sliding out of view shrink away. */ .hrp-reviews-dot.is-edge { transform: scale(.6); } .hrp-reviews-dot.is-out { transform: scale(.3); } .hrp-reviews-dot:focus-visible { outline: 2px solid var(--hrp-accent); outline-offset: -2px; } /* ---- Areas of support: bordered card + two-row collapse ---- */ /* No card: the white tiles sit straight on the page background, and only the heading row is inset, like About me and What clients say. */ .hrp-block.hrp-areas { background: none; border: 0; padding: 0; } .hrp-areas .hrp-areas-head { padding: 0 26px; } .hrp-areas-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 18px; } .hrp-areas .hrp-h2 { font-size: 1.02rem; letter-spacing: 0; margin: 0; } .hrp-areas-toggle { font-size: 0.9rem; white-space: nowrap; } /* Mobile: the script moves the toggle below the tiles, centred. */ .hrp-areas > .hrp-areas-toggle { display: block; width: fit-content; margin: 10px auto 0; } /* `overflow: hidden` alone does not hold on iOS Safari — the body is also pinned at a negative top offset, set by JS when the home-screen sheet opens. */ body.hrp-modal-open { overflow: hidden; position: fixed; width: 100%; } .hrp-review-date { font-weight: 400; color: var(--hrp-muted); margin-left: 8px; } /* ============================================================ SIDEBAR ============================================================ */ .hrp-2col-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: var(--hrp-gap); } /* Two columns: the main column runs the full row height and the reviews block (always last) takes up the slack, so the review cards end level with the side panel's last card instead of a few pixels short of it. */ @media (min-width: 901px) { .hrp-2col-main { align-self: stretch; display: flex; flex-direction: column; } .hrp-2col-main > .hrp-reviews { flex: 1 0 auto; display: flex; flex-direction: column; margin-bottom: 0; } .hrp-2col-main > .hrp-reviews > .hrp-reviews-body { flex: 1 0 auto; display: flex; } .hrp-2col-main > .hrp-reviews > .hrp-reviews-body > .hrp-reviews-carousel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; } .hrp-2col-main .hrp-reviews-track { flex: 1 0 auto; } } .hrp-side-card { background: var(--hrp-card); border: 1px solid var(--hrp-line); border-radius: var(--hrp-radius); padding: 22px 24px; box-shadow: var(--hrp-shadow); } /* Next available */ .hrp-next { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .hrp-next-info { display: flex; flex-direction: column; gap: 3px; } .hrp-next-label { font-size: 0.78rem; font-weight: 600; color: var(--hrp-muted); } .hrp-next-time { font-size: 1.2rem; font-weight: 800; color: var(--hrp-ink); } /* Preference carried over from the practitioner directory. */ .hrp-next-pref { font-size: 0.75rem; font-weight: 500; line-height: 1.35; color: var(--hrp-muted); } .hrp-next-ic { color: var(--hrp-accent); background: var(--hrp-bg-soft); border-radius: 10px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; border: 0; cursor: pointer; transition: background .15s, color .15s; } .hrp-next .hrp-next-ic:hover, .hrp-next .hrp-next-ic:focus, .hrp-next .hrp-next-ic:focus-visible { background: var(--hrp-teal); color: #fff; outline: none; } .hrp-next-ic .hrp-ic { width: 24px; height: 24px; } /* Available dates popup (calendar icon). */ .hrp-dates { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; } .hrp-dates[hidden] { display: none; } body.hrp-dates-open { overflow: hidden; } .hrp-dates-backdrop { position: absolute; inset: 0; background: rgba(18, 60, 52, .45); } .hrp-dates-dialog { position: relative; width: 100%; max-width: 360px; background: var(--hrp-card); border-radius: var(--hrp-radius); box-shadow: 0 20px 50px rgba(18, 60, 52, .25); padding: 20px; } .hrp-dates-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .hrp-dates-title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--hrp-ink); } .hrp-dates .hrp-dates-close, .hrp-dates .hrp-dates-prev, .hrp-dates .hrp-dates-next { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--hrp-bg-soft); color: var(--hrp-teal); font-size: 1.3rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .hrp-dates .hrp-dates-close:hover, .hrp-dates .hrp-dates-prev:hover:not(:disabled), .hrp-dates .hrp-dates-next:hover:not(:disabled), .hrp-dates .hrp-dates-close:focus-visible, .hrp-dates .hrp-dates-prev:focus-visible, .hrp-dates .hrp-dates-next:focus-visible { background: var(--hrp-teal); color: #fff; outline: none; } .hrp-dates .hrp-dates-prev:disabled, .hrp-dates .hrp-dates-next:disabled { opacity: .35; cursor: default; } .hrp-dates-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .hrp-dates-month { font-weight: 700; color: var(--hrp-ink); } .hrp-dates-week, .hrp-dates-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .hrp-dates-week span { text-align: center; font-size: 0.72rem; font-weight: 600; color: var(--hrp-muted); padding: 4px 0; } .hrp-dates-grid { min-height: 228px; align-content: start; } .hrp-dates-grid.is-loading { background: linear-gradient(90deg, var(--hrp-bg-soft) 25%, #fff 50%, var(--hrp-bg-soft) 75%) 0 0 / 200% 100%; border-radius: 10px; animation: hrp-dates-shimmer 1.2s linear infinite; } @keyframes hrp-dates-shimmer { to { background-position: -200% 0; } } .hrp-dates .hrp-dates-day { aspect-ratio: 1; width: 100%; padding: 0; border: 0; border-radius: 50%; background: rgba(26, 101, 99, .1); color: var(--hrp-teal); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s; } .hrp-dates .hrp-dates-day:hover, .hrp-dates .hrp-dates-day:focus-visible { background: var(--hrp-teal); color: #fff; outline: none; } .hrp-dates .hrp-dates-day:disabled { background: transparent; color: #b7c2bf; font-weight: 400; cursor: default; } .hrp-dates .hrp-dates-day.is-today { box-shadow: 0 0 0 1.5px var(--hrp-accent) inset; } .hrp-dates-msg, .hrp-dates-hint { margin: 12px 0 0; font-size: 0.8rem; color: var(--hrp-muted); text-align: center; } .hrp-dates-msg { color: var(--hrp-ink); } /* Book card nudge after a day is picked. */ .hrp-book.is-prompted { animation: hrp-book-prompt 1.6s ease-out; } @keyframes hrp-book-prompt { 0%, 60% { box-shadow: 0 0 0 3px var(--hrp-yellow); } 100% { box-shadow: 0 0 0 3px transparent; } } @media (prefers-reduced-motion: reduce) { .hrp-dates-grid.is-loading, .hrp-book.is-prompted { animation: none; } } /* Book card */ .hrp-book-title { font-size: 1.2rem; font-weight: 800; color: var(--hrp-ink); margin: 0 0 4px; } .hrp-book-step { font-size: 0.84rem; color: var(--hrp-muted); margin: 0 0 16px; } .hrp-book-form { margin-bottom: 14px; } .hrp-book-secure { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 0.82rem; color: var(--hrp-muted); margin: 0; } .hrp-book-secure .hrp-ic { width: 16px; height: 16px; } /* ---- Embedded [cc_profile_booking] booking form → PDF session picker ---- The shortcode renders the plugin's multi-step form; in the sidebar we show only the inline "Session Type" step and dress each option as a radio card. */ .hrp-book-form .ccbf-profile-booking, .hrp-book-form .cc-booking-form { max-width: 100% !important; box-shadow: none !important; border: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } /* Hide the shortcode's own progress stepper + "Session Type" heading — our card already shows "Step 1 of 4: Choose a service". */ .hrp-book-form .ccbf-progress, .hrp-book-form .ccbf-service-section-heading { display: none !important; } /* Stack the session options vertically as full-width rows. */ .hrp-book-form .ccbf-step[data-step="service"] .ccbf-service-sublabels, .hrp-book-form .ccbf-service-sublabels { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 10px !important; margin: 0 0 4px !important; } /* Each option = bordered radio card laid out on a two-line grid: ( ) Name ..................... ⓘ [60 min] R650 Radio spans both lines; name gets the flexible column so it wraps cleanly instead of pushing the price around. */ .hrp-book-form .ccbf-step[data-step="service"] .ccbf-service-sublabel-btn, .hrp-book-form .ccbf-service-sublabel-btn { position: relative; display: grid !important; grid-template-columns: 20px minmax(0, 1fr) auto !important; grid-template-areas: "radio name info" "radio duration price" !important; align-items: center !important; justify-content: stretch !important; column-gap: 12px !important; row-gap: 7px !important; text-align: left !important; width: 100% !important; min-height: 0 !important; background: #fff !important; border: 1.5px solid var(--hrp-line) !important; border-radius: 12px !important; padding: 14px 16px !important; cursor: pointer; box-shadow: none !important; transform: none !important; transition: border-color .15s, box-shadow .15s, background .15s; overflow: visible !important; } .hrp-book-form .ccbf-service-sublabel-btn:hover { border-color: #bcd3cc !important; background: #fbfdfc !important; } .hrp-book-form .ccbf-service-sublabel-btn:focus-visible { outline: none; border-color: var(--hrp-teal) !important; box-shadow: 0 0 0 3px rgba(26, 101, 99, .18) !important; } .hrp-book-form .ccbf-service-sublabel-btn.is-selected { border-color: var(--hrp-teal) !important; box-shadow: 0 0 0 1px var(--hrp-teal) inset !important; background: #f4f8f6 !important; } /* Radio indicator, centred against both lines. */ .hrp-book-form .ccbf-service-radio { grid-area: radio; display: inline-flex !important; align-self: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #c2d2cd; background: #fff !important; transition: border-color .15s; position: relative; } .hrp-book-form .ccbf-service-sublabel-btn.is-selected .ccbf-service-radio { border-color: var(--hrp-teal); background: #fff !important; } .hrp-book-form .ccbf-service-sublabel-btn.is-selected .ccbf-service-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--hrp-teal); } /* The plugin's wrappers are flattened so name / length / price land in their own grid cells. */ .hrp-book-form .ccbf-service-main, .hrp-book-form .ccbf-service-meta { display: contents !important; } .hrp-book-form .ccbf-service-meta-sep { display: none !important; } .hrp-book-form .ccbf-service-name { grid-area: name; min-width: 0; align-self: end; font-size: 0.95rem !important; font-weight: 500 !important; color: var(--hrp-ink) !important; line-height: 1.3; text-align: left !important; } .hrp-book-form .ccbf-service-sublabel-btn.is-selected .ccbf-service-name { color: var(--hrp-teal) !important; } /* Length chip, bottom-left. */ .hrp-book-form .ccbf-service-duration { grid-area: duration; justify-self: start; align-self: start; display: inline-flex !important; align-items: center; padding: 3px 9px; border-radius: 999px; background: #eef3f1 !important; color: #4a5553 !important; font-size: 0.76rem !important; font-weight: 500 !important; line-height: 1.4; white-space: nowrap; } .hrp-book-form .ccbf-service-sublabel-btn.is-selected .ccbf-service-duration { background: rgba(26, 101, 99, .14) !important; color: var(--hrp-teal) !important; } /* Price, bottom-right, tabular so amounts line up across cards. */ .hrp-book-form .ccbf-service-price { grid-area: price; justify-self: end; align-self: start; font-size: 1.05rem !important; font-weight: 500 !important; color: var(--hrp-teal) !important; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Info affordance, top-right on the name line. */ .hrp-book-form .ccbf-service-info { grid-area: info; justify-self: end; align-self: end; display: inline-flex !important; align-items: center; justify-content: center; width: 20px; height: 20px; margin: 0 !important; border-radius: 50%; border: 1.5px solid #c2d2cd; background: #fff; color: #6b8079; font-size: 12px; font-style: italic; font-weight: 500; cursor: help; transition: background .15s, color .15s, border-color .15s; } .hrp-book-form .ccbf-service-info:hover, .hrp-book-form .ccbf-service-info:focus-visible, .hrp-book-form .ccbf-service-info[aria-expanded="true"] { background: var(--hrp-teal); border-color: var(--hrp-teal); color: #fff; outline: none; } /* Keep the info tooltip anchored to the row (not the whole button). */ .hrp-book-form .ccbf-service-tooltip { left: auto; right: 0; transform: translateY(8px) scale(.96); transform-origin: bottom right; } .hrp-book-form .ccbf-service-tooltip::after { left: auto; right: 12px; transform: rotate(45deg); } /* Suppress the shared "whole button" trigger — otherwise selecting an option leaves it focused and the tooltip stays stuck open. */ .hrp-book-form .ccbf-service-sublabel-btn:hover .ccbf-service-tooltip, .hrp-book-form .ccbf-service-sublabel-btn:focus-within .ccbf-service-tooltip { opacity: 0; visibility: hidden; transform: translateY(8px) scale(.96); } /* Reveal the tooltip only when the ⓘ affordance itself is hovered/focused. */ .hrp-book-form .ccbf-service-info:hover + .ccbf-service-tooltip, .hrp-book-form .ccbf-service-info:focus + .ccbf-service-tooltip, .hrp-book-form .ccbf-service-tooltip.is-open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; } /* Primary action buttons inside the form. */ .hrp-book-form .ccbf-next-btn, .hrp-book-form button[type="submit"], .hrp-book-form .ccbf-submit-btn { background: var(--hrp-teal) !important; color: #fff !important; width: 100% !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; padding: 14px 16px !important; transition: background .18s ease !important; } .hrp-book-form .ccbf-next-btn:hover, .hrp-book-form button[type="submit"]:hover, .hrp-book-form .ccbf-submit-btn:hover { background: var(--hrp-teal-soft) !important; } /* Guidance promo */ .hrp-guidance { background: var(--hrp-bg-soft); border-color: #dbe6e1; } .hrp-guidance-title { font-size: 1rem; font-weight: 800; color: var(--hrp-ink); margin: 0 0 8px; } .hrp-guidance-text { font-size: 0.88rem; line-height: 1.55; color: var(--hrp-muted); margin: 0 0 12px; } /* Qualifications */ .hrp-quals-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 16px; } .hrp-quals-title { font-size: 1rem; font-weight: 800; color: var(--hrp-ink); margin: 0; } .hrp-quals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .hrp-quals-list li { display: flex; align-items: flex-start; gap: 12px; } /* Fixed 22px column, as tall as the label's first line (0.88rem x 1.35), with the icon centred in it: every icon sits on its label's line whatever its own shape. The svg is a block so no inline baseline gap shifts it. */ .hrp-quals-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; height: calc(0.88rem * 1.35); color: var(--hrp-accent); } .hrp-quals-ic .hrp-ic { display: block; flex-shrink: 0; width: 22px; height: 22px; } .hrp-quals-list li span:last-child { display: flex; flex-direction: column; line-height: 1.35; } .hrp-quals-list strong { font-size: 0.88rem; font-weight: 700; color: var(--hrp-ink); } .hrp-quals-list em { font-size: 0.8rem; font-style: normal; color: var(--hrp-muted); } /* Collapsible detail: animates height via grid rows, no JS measuring. */ .hrp-quals-details { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .25s ease; } .hrp-quals-details.is-open { grid-template-rows: 1fr; opacity: 1; } .hrp-quals-details-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 16px; /* same rhythm as the summary rows */ transition: margin-top .35s ease, padding-top .35s ease; } .hrp-quals-details.is-open .hrp-quals-details-inner { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hrp-line); } @media (prefers-reduced-motion: reduce) { .hrp-quals-details, .hrp-quals-details-inner { transition: none; } } /* Detail rows repeat the summary rows: icon, then a bold label over a muted line, on the same 22px icon + 12px gap grid. */ .hrp-quals-group { display: flex; align-items: flex-start; gap: 12px; } .hrp-quals-group-body { min-width: 0; display: flex; flex-direction: column; line-height: 1.35; } .hrp-quals-group-head { display: block; font-size: 0.88rem; font-weight: 700; line-height: 1.35; color: var(--hrp-ink); margin-bottom: 2px; } .hrp-quals-lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .hrp-quals-lines li { font-size: 0.8rem; line-height: 1.4; color: var(--hrp-muted); overflow-wrap: anywhere; } /* Bottom-right of the card, under whatever is showing. */ .hrp-quals-toggle { display: block; width: max-content; margin: 12px 0 0 auto; padding: 0; white-space: nowrap; border: 0; background: none; font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: .05em; color: var(--hrp-accent); cursor: pointer; } /* The ››› / ‹‹‹ chevrons: 1rem / 700 / .05em, like every other toggle. */ .hrp-quals-toggle span { font-size: inherit; font-weight: inherit; letter-spacing: inherit; } .hrp-quals-toggle:hover, .hrp-quals-toggle:focus, .hrp-quals-toggle:active { background: none !important; box-shadow: none !important; outline: none; color: var(--hrp-teal) !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1080px) { .hrp-profile-2col { grid-template-columns: minmax(0, 1fr) 320px; } .hrp-areas-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hrp-review-card { flex: 0 0 calc(50% - 3px); } } @media (max-width: 900px) { .hrp-profile-2col { grid-template-columns: minmax(0, 1fr); } .hrp-2col-side { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hrp-book { grid-column: 1 / -1; order: -1; /* The floating book bar scrolls here; clear the sticky site header. */ scroll-margin-top: 90px; } /* The next open slot leads, straight above the booking card it feeds. */ .hrp-next { grid-column: 1 / -1; order: -2; } .hrp-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .hrp-profile-2col { padding: 28px 14px; } .hrp-hero-top-row { flex-direction: column; padding: 22px 20px 20px; gap: 18px; } /* No fixed height or max-width here: the photo runs full width and takes its own natural height. `height: auto` is required to clear the base rule's 330px, which would otherwise leave a band of the container's background below the image. The image also drops out of absolute positioning so the container can size to it. */ .hrp-hero-photo { width: 100%; height: auto; aspect-ratio: auto; } .hrp-hero .hrp-hero-photo img { position: static; height: auto; } .hrp-hero-name { font-size: 1.85rem; } .hrp-hero-body { padding: 0; } .hrp-hero .hrp-hero-tagline { max-width: none; margin-bottom: 20px; } .hrp-hero-meta { margin-bottom: 20px; } /* Phones: the row is too narrow for three, so they may wrap again. */ .hrp-hero-badges { flex-wrap: wrap; gap: 12px 20px; } .hrp-hero-facts { grid-template-columns: minmax(0, 1fr); padding: 18px 20px 20px; gap: 14px; } /* Add to home screen: phone-only, sits under the facts strip and shares its background so the two read as one panel with no seam. */ .hrp-a2hs { display: block; padding: 24px 20px; background: var(--hrp-bg-soft); } /* The button wrapper owns the gap on both sides. The strip's last text line carries ~3px of line-height below its glyphs, so the top is pulled in by that much to look equal to the bottom. */ .hrp-hero-facts + .hrp-a2hs { padding-top: 21px; } .hrp-hero-facts:has(+ .hrp-a2hs) { padding-bottom: 0; } .hrp-a2hs-sheet { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 100100; display: flex; align-items: flex-end; justify-content: center; } .hrp-a2hs-sheet[hidden] { display: none; } .hrp-areas-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hrp-two-up { grid-template-columns: minmax(0, 1fr); } .hrp-review-card { flex: 0 0 100%; margin-right: 6px; } .hrp-review-card--solo { flex-direction: column; align-items: flex-start; gap: 12px; margin-right: 0; padding: 20px; } .hrp-2col-side { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 420px) { .hrp-areas-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hrp-hero-name { font-size: 1.6rem; } } /* About me + What clients say: match the "Methods I use" card's title size and inner padding so their headings line up with the card column beside them. */ #hrp-about { padding: 0 26px; } /* The reviews carousel keeps the full column width — only the heading row is inset, so it lines up with the card column beside it. */ .hrp-reviews-head { padding: 0 26px; } #hrp-about .hrp-h2, .hrp-reviews .hrp-h2 { font-size: 1.02rem; } .hrp-about-toggle { font-size: 1rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; } /* ============================================================ HEADING RHYTHM Every section / card heading gets the same space above it (24px from the card edge, or from the gap for the card-less About and testimonials blocks) and the same 18px under it. Prefixed with .hrp-profile-2col so these beat the Elementor kit's `.elementor-kit-1495 p` / `h2` rules (0,1,1), which otherwise override single-class margins. ============================================================ */ .hrp-profile-2col { --hrp-head-above: 24px; --hrp-head-below: 18px; } /* One line height and no stray top margin on every heading. */ .hrp-profile-2col .hrp-h2, .hrp-profile-2col .hrp-card-title, .hrp-profile-2col .hrp-book-title, .hrp-profile-2col .hrp-guidance-title, .hrp-profile-2col .hrp-quals-title { line-height: 1.25; margin-top: 0; } /* Space above: card padding. */ .hrp-profile-2col .hrp-card { padding-top: var(--hrp-head-above); padding-bottom: var(--hrp-head-above); } /* Focus areas are card-less too, and kept tight: half the usual space above the heading and under it, none under the tiles (they are cards themselves). */ .hrp-profile-2col .hrp-block.hrp-areas { padding-top: calc(var(--hrp-head-above) / 2); } .hrp-profile-2col .hrp-areas .hrp-areas-head { margin-bottom: 10px; } .hrp-profile-2col .hrp-side-card { padding-top: var(--hrp-head-above); padding-bottom: var(--hrp-head-above); } /* About me and What clients say sit on the page background, not in a card: inset them by the same amount a card pads its heading, so the gap from the card above to the heading matches every other heading's. */ .hrp-profile-2col #hrp-about { padding-top: var(--hrp-head-above); padding-bottom: var(--hrp-head-above); } .hrp-profile-2col .hrp-reviews { padding-top: var(--hrp-head-above); } /* Space below: one value for every heading or heading row. */ .hrp-profile-2col #hrp-about .hrp-h2, .hrp-profile-2col .hrp-card > .hrp-card-title, .hrp-profile-2col .hrp-guidance-title, .hrp-profile-2col .hrp-book-step { margin-bottom: var(--hrp-head-below); } .hrp-profile-2col .hrp-areas-head, .hrp-profile-2col .hrp-reviews-head, .hrp-profile-2col .hrp-insight-head, .hrp-profile-2col .hrp-quals-head { margin-bottom: var(--hrp-head-below); } /* The booking card's heading is a title plus its "Step 1 of 4" subtitle; the pair takes the shared space below. */ .hrp-profile-2col .hrp-book-title { margin-bottom: 4px; } /* The 32px carousel arrows beside a heading would stretch its row and push the heading off the shared spacing; let them overhang the row instead. */ .hrp-profile-2col .hrp-reviews-nav, .hrp-profile-2col .hrp-insight-nav { margin-block: -6px; } /* Text under a heading: its own margin, not the Elementor kit's paragraph spacing. The About text is the block's last line, so no bottom margin. */ .hrp-profile-2col #hrp-about .hrp-about-text { margin: 0; } .hrp-profile-2col .hrp-guidance-text { margin: 0 0 12px; } /* "View less" arrow: the → glyph turned down, so it matches "View more →" (the font's own ↓ renders tall and stretched). */ .hrp-arrow-down { display: inline-block; transform: rotate(90deg); }