/* Theme Name: Rosen Dental Recruiting Theme URI: https://rosendentalrecruiting.com Author: 898 Marketing Author URI: https://898marketing.com Description: Full Site Editing (block) theme for Rosen Dental Recruiting — a permanent-placement dental recruiting firm. Clean, white, professional; subtle texture and motion. Built on theme.json tokens with editable block patterns. Requires at least: 6.6 Tested up to: 7.0 Requires PHP: 8.0 Version: 0.11.1 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: rosen-dental-recruiting Tags: full-site-editing, block-patterns, custom-colors, custom-logo, one-column, two-columns, block-styles */ /* ============================================================ Rosen Dental Recruiting — theme CSS Adapted from design-reference/styles/rdr-custom-css.css. Elementor-specific selectors from the handoff have been rewritten to target core block markup. Palette/type/spacing tokens live in theme.json. ============================================================ */ /* --- Global niceties --- */ ::selection { background:rgba(70,124,191,0.22); } /* Even out multi-line heading rag ("Two paths, one direct line to / Rosen.") */ .wp-block-heading { text-wrap:balance; } /* --- Section textures (applied to section/pattern Group blocks) --- */ .rdr-hero { background-image:radial-gradient(rgba(11,35,67,0.04) 1px,transparent 1px),linear-gradient(180deg,#F4F8FD 0%,#ffffff 100%); background-size:24px 24px,100% 100%; } .rdr-white { background-color:#ffffff; background-image:radial-gradient(rgba(11,35,67,0.04) 1px,transparent 1px); background-size:24px 24px; } .rdr-pale { background-color:#EEF4FB; background-image:radial-gradient(rgba(11,35,67,0.055) 1px,transparent 1px); background-size:24px 24px; } .rdr-navy { background-color:#0B2343; background-image:radial-gradient(rgba(126,176,232,0.06) 1px,transparent 1px),radial-gradient(115% 90% at 50% -10%,#15335E 0%,#0B2343 62%); background-size:26px 26px,100% 100%; } /* --- Card hover lift --- */ .rdr-card { transition:transform .45s cubic-bezier(.16,.74,.28,1),box-shadow .4s ease; box-shadow:0 12px 32px rgba(11,35,67,0.05); } .rdr-card:hover { transform:translateY(-6px); box-shadow:0 22px 48px rgba(11,35,67,0.16); } .rdr-card-navy { box-shadow:0 12px 32px rgba(11,35,67,0.18); } .rdr-card-navy:hover { box-shadow:0 22px 48px rgba(11,35,67,0.30); } /* Audience cards: pin the CTA to the bottom edge so the two buttons align even when the checklists run different lengths (matches the handoff's margin-top:auto treatment). */ .wp-block-column.rdr-card { display:flex; flex-direction:column; } .wp-block-column.rdr-card > .wp-block-buttons { margin-top:auto; } /* Quieter lift for bordered feature tiles and step cards */ .rdr-tile, .rdr-step { transition:transform .4s cubic-bezier(.16,.74,.28,1), box-shadow .35s ease; } .rdr-tile:hover, .rdr-step:hover { transform:translateY(-4px); box-shadow:0 14px 34px rgba(11,35,67,0.09); } /* --- Hero image + floating badge --- */ .rdr-hero-media { position:relative; } .rdr-hero-img img { border-radius:24px; box-shadow:0 24px 60px rgba(11,35,67,0.16); } .rdr-shadow img { box-shadow:0 16px 40px rgba(11,35,67,0.10); border-radius:12px; } /* --- Empty image slots (photos not yet uploaded) --- WordPress drops an Image block with no file from front-end output entirely, so the media column collapses and the floating hero badge ends up overlapping the text (worst on mobile). Until real photos are added, paint a soft branded panel where each photo belongs; the :not(:has(img)) guard removes the panel the moment a photo lands. */ .rdr-hero-media:not(:has(.rdr-hero-img))::before, .wp-block-column.rdr-card:not(:has(figure))::before, .rdr-white .wp-block-column:has(> .rdr-fam):not(:has(figure))::before { content:""; display:block; flex:none; border:1px dashed #B9CBE4; border-radius:14px; background-image: url("data:image/svg+xml;utf8,"), radial-gradient(rgba(11,35,67,0.05) 1px,transparent 1px), linear-gradient(135deg,#E8F0FA 0%,#F4F8FD 55%,#EEF4FB 100%); background-repeat:no-repeat,repeat,no-repeat; background-position:center,0 0,0 0; background-size:34px 34px,22px 22px,100% 100%; } .rdr-hero-media:not(:has(.rdr-hero-img))::before { aspect-ratio:540/470; border-radius:24px; } .wp-block-column.rdr-card:not(:has(figure))::before { aspect-ratio:16/9; margin-bottom:24px; } .wp-block-column.rdr-card-navy:not(:has(figure))::before { border-color:rgba(126,176,232,0.35); background-image: url("data:image/svg+xml;utf8,"), radial-gradient(rgba(126,176,232,0.08) 1px,transparent 1px), linear-gradient(135deg,rgba(126,176,232,0.10) 0%,rgba(126,176,232,0.04) 100%); } .rdr-white .wp-block-column:has(> .rdr-fam):not(:has(figure))::before { aspect-ratio:4/3; border-radius:12px; margin-bottom:24px; } .rdr-badge { position:absolute; left:22px; bottom:22px; z-index:2; box-shadow:0 12px 30px rgba(11,35,67,0.18); animation:rdrfloat 4.5s ease-in-out infinite; } @keyframes rdrfloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} } /* --- Eyebrow label --- */ .rdr-eyebrow { text-transform:uppercase; letter-spacing:1.6px; font-weight:700; } /* 13px text in Primary (#467CBF) is ~4.3:1 on white — under the 4.5:1 AA floor for small text. Render brand-blue eyebrows with the Primary Dark token instead (5.8:1); needs !important to beat the preset color class. */ .rdr-eyebrow.has-primary-color { color:var(--wp--preset--color--primary-dark) !important; } /* --- Pill chips (landing hero) --- */ .rdr-chip { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid #D6E2F2; border-radius:999px; padding:8px 15px; font-weight:600; } .rdr-chip::before { content:""; width:15px; height:15px; flex:none; background-image:url("data:image/svg+xml;utf8,"); background-size:contain; background-repeat:no-repeat; background-position:center; } /* --- Landing form card + Gravity Forms placeholder --- */ .rdr-formcard { box-shadow:0 20px 50px rgba(11,35,67,0.1); scroll-margin-top:100px; } .rdr-form-ph { border:1px dashed #B9CBE4; border-radius:10px; } /* Card padding is set per-block in the editor (34px, desktop default) as an inline style, which beats a plain class rule — !important is required to override it here. 781px matches the theme's other "columns have stacked" breakpoint (see .rdr-founder-media), since that's when this card goes full-width on mobile. */ @media (max-width: 781px) { .rdr-formcard { padding:15px !important; } } /* Landing hero phone link (plain link in a navy paragraph beside the CTA) — render in the paragraph's navy, shifting to primary on hover, per the handoff, instead of the default underlined link blue. */ .rdr-hero p.has-navy-color a { color:inherit; text-decoration:none; transition:color .2s ease; } .rdr-hero p.has-navy-color a:hover, .rdr-hero p.has-navy-color a:focus-visible { color:#467CBF; } /* ============================================================ GRAVITY FORMS — branded to the landing-page inquiry cards ============================================================ Scoped to .rdr-formcard so ONLY the two inquiry forms are affected. Verified against the live forms (GF 2.10, the legacy "gravity-theme", default CSS on): candidate form (Find a Practice) and hiring form (Find a Professional). Fields keep GF's own 12-col grid (full/half widths set in the form builder); this only restyles the field chrome and button to match the theme. */ .rdr-formcard .gform_wrapper.gravity-theme .gform_heading { display:none; } /* card supplies its own H3 + intro */ .rdr-formcard .gform_wrapper.gravity-theme .gform_fields { row-gap:16px; } /* Field labels. Shown for any field WITHOUT a placeholder. When a field has a placeholder set in the Gravity Forms builder, the placeholder acts as the in-field label and the real is moved off-screen — kept in the DOM for screen readers, not removed. The :has() guard means this condensed, in-field look only switches on once placeholders are configured in the form builder, so shipping this stylesheet on its own changes nothing until then. */ .rdr-formcard .gform_wrapper.gravity-theme .gfield_label { font-size:14px; font-weight:600; color:#0B2343; margin-bottom:8px; } .rdr-formcard .gform_wrapper.gravity-theme .gfield_required { color:#467CBF; } .rdr-formcard .gform_wrapper.gravity-theme .gfield:has(input[placeholder]:not([placeholder=""])) .gfield_label, .rdr-formcard .gform_wrapper.gravity-theme .gfield:has(textarea[placeholder]:not([placeholder=""])) .gfield_label, .rdr-formcard .gform_wrapper.gravity-theme .gfield:has(select option[value=""]) .gfield_label { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .rdr-formcard .gform_wrapper.gravity-theme input, .rdr-formcard .gform_wrapper.gravity-theme select, .rdr-formcard .gform_wrapper.gravity-theme textarea { width:100%; box-sizing:border-box; border:1px solid #E1EAF5; border-radius:10px; padding:15px 16px; font-size:15px; line-height:1.4; color:#0B2343; background-color:#fff; font-family:inherit; transition:border-color .2s ease, box-shadow .2s ease; } /* Cap the paragraph field: Gravity Forms renders it at rows="10" (~290px), and that row-based height overrides a plain CSS height — only !important wins. !important also out-ranks the inline height a drag-to-resize would write, so the box becomes a fixed, tidy height (resize handle off). Bump this value if you want a taller default. */ .rdr-formcard .gform_wrapper.gravity-theme textarea { height:132px !important; resize:none; } .rdr-formcard .gform_wrapper.gravity-theme input::placeholder, .rdr-formcard .gform_wrapper.gravity-theme textarea::placeholder { color:#8A96A6; opacity:1; } .rdr-formcard .gform_wrapper.gravity-theme input:focus, .rdr-formcard .gform_wrapper.gravity-theme select:focus, .rdr-formcard .gform_wrapper.gravity-theme textarea:focus { outline:none; border-color:#467CBF; box-shadow:0 0 0 3px rgba(70,124,191,0.15); } /* Native select arrow → branded chevron */ .rdr-formcard .gform_wrapper.gravity-theme select { -webkit-appearance:none; appearance:none; padding-right:44px; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px; } /* When a dropdown uses a placeholder choice (empty value), show it muted like a text placeholder until a real option is selected. */ .rdr-formcard .gform_wrapper.gravity-theme select:has(option[value=""]:checked) { color:#8A96A6; } /* Submit — matches the site's primary button (full width in the card). Note: this is an , so no ::after arrow is possible; set the button label itself in the Gravity Forms builder. */ .rdr-formcard .gform_wrapper.gravity-theme .gform_footer { margin-top:20px; padding:0; } .rdr-formcard .gform_wrapper.gravity-theme .gform_button { display:inline-flex; align-items:center; justify-content:center; width:100%; background-color:var(--wp--preset--color--primary); color:#fff; border:none; border-radius:10px; padding:15px 26px; font-size:16px; font-weight:600; line-height:1.2; font-family:inherit; cursor:pointer; transition:background-color .25s ease, transform .15s ease; } .rdr-formcard .gform_wrapper.gravity-theme .gform_button:hover, .rdr-formcard .gform_wrapper.gravity-theme .gform_button:focus-visible { background-color:color-mix(in srgb, var(--wp--preset--color--primary) 86%, #000000); } .rdr-formcard .gform_wrapper.gravity-theme .gform_button:active { transform:translateY(1px); } /* Validation + confirmation states (standard GF classes; styled to match but not exercised in preview — worth one live submit to confirm). */ .rdr-formcard .gform_wrapper.gravity-theme .gfield_error input, .rdr-formcard .gform_wrapper.gravity-theme .gfield_error select, .rdr-formcard .gform_wrapper.gravity-theme .gfield_error textarea { border-color:#D14343; } .rdr-formcard .gform_wrapper.gravity-theme .validation_message { color:#D14343; font-size:13px; margin-top:6px; } .rdr-formcard .gform_wrapper.gravity-theme .gform_validation_errors { border:1px solid #E7B4B4; background:#FCEDED; border-radius:10px; box-shadow:none; } .rdr-formcard .gform_confirmation_message { color:#0B2343; font-size:16px; line-height:1.6; background:#EEF4FB; border:1px solid #D6E2F2; border-radius:10px; padding:20px 22px; } /* --- Card checkmark lists (was .elementor-widget-text-editor) --- */ .rdr-check-list { list-style:none; padding:0; margin:0; } .rdr-check-list li { position:relative; padding-left:29px; margin-bottom:12px; line-height:1.5; } .rdr-check-list li:last-child { margin-bottom:0; } .rdr-check-list li::before { content:""; position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; background-color:rgba(70,124,191,0.12); background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center; background-size:13px; } .rdr-card-navy .rdr-check-list li { color:#C5D3E6; } .rdr-card-navy .rdr-check-list li::before { background-color:rgba(126,176,232,0.22); background-image:url("data:image/svg+xml;utf8,"); } /* --- CTA buttons (core Button block + optional trailing arrow) --- */ .rdr-btn .wp-block-button__link { display:inline-flex; align-items:center; gap:10px; font-size:16px; font-weight:600; padding:15px 26px; line-height:1.2; transition:background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .15s ease; } .rdr-btn .wp-block-button__link:active { transform:translateY(1px); } .rdr-btn.rdr-btn--arrow .wp-block-button__link::after { content:""; width:18px; height:18px; flex:none; background:currentColor; transition:transform .25s cubic-bezier(.16,.74,.28,1); -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .rdr-btn.rdr-btn--arrow .wp-block-button__link:hover::after, .rdr-btn.rdr-btn--arrow .wp-block-button__link:focus-visible::after { transform:translateX(3px); } /* Filled buttons — hover shades derive from the palette tokens via color-mix (per the handoff), so no new hex values enter the system. !important is required to beat the preset background utilities. */ .rdr-btn .wp-block-button__link.has-primary-background-color:hover, .rdr-btn .wp-block-button__link.has-primary-background-color:focus-visible { background-color:color-mix(in srgb, var(--wp--preset--color--primary) 86%, #000000) !important; } /* On navy sections a darker hover would sink into the background — lighten instead. */ .rdr-navy .rdr-btn .wp-block-button__link.has-primary-background-color:hover, .rdr-navy .rdr-btn .wp-block-button__link.has-primary-background-color:focus-visible { background-color:color-mix(in srgb, var(--wp--preset--color--primary) 84%, #ffffff) !important; } .rdr-btn .wp-block-button__link.has-white-background-color:hover, .rdr-btn .wp-block-button__link.has-white-background-color:focus-visible { background-color:var(--wp--preset--color--ice-blue) !important; } /* Outline (navy) button — fills navy on hover, per the hero secondary CTA */ .rdr-btn.is-style-outline .wp-block-button__link { border-width:1.6px; } /* color needs !important to beat WordPress's has-navy-color utility (which is !important) */ .rdr-btn.is-style-outline .wp-block-button__link:hover, .rdr-btn.is-style-outline .wp-block-button__link:focus { background-color:#0B2343; color:#ffffff !important; } /* Ghost button — transparent with white outline, for use on navy sections */ .rdr-btn--ghost .wp-block-button__link { background-color:transparent; color:#ffffff; border:1.6px solid rgba(255,255,255,0.4); } .rdr-btn--ghost .wp-block-button__link:hover, .rdr-btn--ghost .wp-block-button__link:focus { background-color:transparent; color:#ffffff; border-color:#ffffff; } /* Keyboard focus — one consistent ring across interactive elements */ :where(.wp-block-button__link, .rdr-nav a, .rdr-faq summary, .rdr-flink a, .rdr-fc a, .rdr-main a):focus-visible { outline:2px solid #467CBF; outline-offset:2px; } .rdr-navy :where(.wp-block-button__link, a):focus-visible, .rdr-footer :where(a, .wp-block-button__link):focus-visible { outline-color:#7EB0E8; } /* --- Feature icon tiles (50x50 ice-blue square, primary glyph via mask) --- */ .rdr-icontile { width:50px; height:50px; border-radius:12px; background:#E8F0FA; position:relative; } /* The tiles sit inside constrained-layout cards, whose auto margins center any fixed-width child — the handoff has them flush left with the text. */ .is-layout-constrained > .rdr-icontile { margin-left:0 !important; margin-right:auto !important; } .rdr-icontile::before { content:""; position:absolute; inset:0; margin:auto; width:26px; height:26px; background:#467CBF; } .rdr-icon--cost::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .rdr-icon--access::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .rdr-icon--personal::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .rdr-icon--guarantee::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* --- Numbered step index --- */ .rdr-step-num { font-weight:700; color:#467CBF; } /* ============================================================ "How it works" / "Our process" — horizontal step flow ============================================================ CSS-only restyle of the existing .rdr-step grid (Find a Practice & Find a Professional) into a connected, numbered stepper: circular nodes joined by a line, labels beneath. It reads as a sequence and no longer mirrors the boxed feature grid above it. Scoped to step grids via :has() — the homepage has no steps section, so nothing else is touched. No page content, copy, or block structure is changed. Falls back to the original card grid where :has() is unsupported. */ @supports selector(:has(*)) { .rdr-pale .wp-block-group.is-layout-grid:has(> .rdr-step) { --rdr-step-gap:28px; display:flex !important; gap:var(--rdr-step-gap); align-items:flex-start; } /* Each step: strip the card chrome; centre a node above its label. */ .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step { position:relative; flex:1 1 0; display:flex; flex-direction:column; align-items:center; text-align:center; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:0 10px !important; } /* Neutralise the card-style hover lift for the now-borderless node. */ .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step:hover { transform:none; box-shadow:none; } /* Connector: runs from this node's centre to the next node's centre, behind the badges (each badge's own fill "cuts" the line). */ .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step::before { content:""; position:absolute; top:27px; /* vertical centre of the 54px badge */ left:50%; width:calc(100% + var(--rdr-step-gap)); height:2px; background:#D6E2F2; z-index:0; } .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step:last-child::before { display:none; } /* Number badge (was the plain "01" paragraph) — a circle, so it can't be mistaken for the rounded-square icon tiles in the section above. */ .rdr-pale .is-layout-grid:has(> .rdr-step) .rdr-step-num { position:relative; z-index:1; width:54px; height:54px; margin:0 0 22px !important; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#ffffff; border:2px solid #7EB0E8; color:#3A66A0 !important; font-size:17px !important; line-height:1; box-shadow:0 6px 16px rgba(11,35,67,0.08); transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.16,.74,.28,1); } /* Fill the node on hover so the sequence feels alive. */ .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step:hover .rdr-step-num { background:#467CBF; border-color:#467CBF; color:#ffffff !important; transform:translateY(-3px); } .rdr-pale .is-layout-grid:has(> .rdr-step) .rdr-step h3 { margin-top:0 !important; } /* Mobile: fold into a vertical timeline — badge on the left, spine down, heading + text stacked in a single content column to its right. A grid (not flex-row) lets the 54px badge span both text rows so the heading gets the full column width instead of being squeezed into its own cell. */ @media (max-width: 860px) { .rdr-pale .wp-block-group.is-layout-grid:has(> .rdr-step) { flex-direction:column; gap:0; } .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step { display:grid; grid-template-columns:54px 1fr; column-gap:20px; text-align:left; padding:0 0 34px !important; } .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step:last-child { padding-bottom:0 !important; } .rdr-pale .is-layout-grid:has(> .rdr-step) .rdr-step-num { grid-column:1; grid-row:1 / span 2; align-self:start; margin:0 !important; } /* margin-inline:0 defeats the constrained-layout auto-margins that would otherwise centre each shrink-wrapped heading in its column. */ .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step > :not(.rdr-step-num) { grid-column:2; margin-inline:0 !important; } /* Vertical connector down the badge centre to the next node. */ .rdr-pale .is-layout-grid:has(> .rdr-step) > .rdr-step::before { top:54px; left:27px; width:2px; height:calc(100% - 54px); } } } /* --- Testimonial quote mark (decorative) --- */ .rdr-quote-mark { width:40px; height:40px; margin:0 auto 18px; background:#467CBF; opacity:0.25; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* --- Testimonial cards (2-up grid on the homepage) --- */ .rdr-tcard { height:100%; } /* Smaller, left-aligned, fully-opaque quote mark for the card corner (the big centred .rdr-quote-mark stays the faint watermark variant). */ .rdr-tcard .rdr-quote-mark--sm { width:30px; height:30px; margin:0 0 2px; opacity:1; } /* Pin the name/role block to the card's bottom so attributions line up across a row even when quotes differ in length. */ .rdr-tcard-meta { margin-top:auto; } .rdr-tcard .rdr-tquote { max-width:42ch; } /* keep quote lines comfortable to read */ /* ============================================================ FOUNDER / TEAM BIO ("Meet the Founder") — patterns/team-bio.php ============================================================ A cut-out (transparent-PNG) portrait seated on a soft, textured pale panel — same rounded-panel + dot-grid language as the hero media, reused here so the section reads as part of the family. */ .rdr-founder-media { position:relative; border-radius:24px; overflow:hidden; background-color:#EEF4FB; background-image: radial-gradient(rgba(11,35,67,0.06) 1px,transparent 1px), linear-gradient(160deg,#E8F0FA 0%,#F4F8FD 58%,#EEF4FB 100%); background-size:22px 22px,100% 100%; box-shadow:0 24px 60px rgba(11,35,67,0.12); display:flex; align-items:flex-end; /* seat the portrait on the panel's base */ justify-content:center; } /* The portrait itself — a cut-out, so no radius/shadow of its own; it bleeds to the bottom edge of the panel. */ .rdr-founder-img { margin:0; width:100%; align-self:flex-end; } .rdr-founder-img img { display:block; width:100%; height:auto; } /* Float the credential badge over the panel's lower-left, matching the hero badge (position + drift animation come from .rdr-badge). */ .rdr-founder-media .rdr-badge { position:absolute; left:22px; bottom:22px; z-index:2; } /* Signature line: a short brand rule to the left, like a quote attribution. */ .rdr-signature { position:relative; } .rdr-signature::before { content:""; position:absolute; left:0; top:3px; bottom:3px; width:3px; border-radius:2px; background:#467CBF; } @media (max-width: 781px) { /* When the columns stack, keep the portrait from ballooning to full width and cap the panel to a portrait-friendly height. */ .rdr-founder-media { max-width:420px; margin-inline:auto; min-height:0; } } /* --- About "family of companies" card rows --- */ .rdr-famrow { position:relative; padding:14px 0 14px 21px; border-bottom:1px solid #E1EAF5; } .rdr-famrow:last-child { border-bottom:0; padding-bottom:0; } .rdr-famrow::before { content:""; position:absolute; left:0; top:20px; width:8px; height:8px; border-radius:50%; background:#467CBF; } /* ============================================================ HEADER (parts/header.html) ============================================================ */ /* Sticky lives on the template-part

wrapper (a direct child of .wp-site-blocks, i.e. full page height) so it stays stuck while scrolling. The visual chrome (blur, border, bg) stays on the inner .rdr-header. */ .wp-site-blocks > header.wp-block-template-part { position:sticky; top:0; z-index:100; } /* Remove the root block-gap so page sections butt cleanly against the header. */ .wp-site-blocks > * { margin-block-start:0; } .rdr-header { background:rgba(255,255,255,0.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid #E6EDF6; } .rdr-header-bar { min-height:78px; } .rdr-logo img { height:32px; width:auto; display:block; } /* header nav links */ .rdr-nav { font-weight:600; } .rdr-nav .wp-block-navigation-item__content { color:#0B2343; transition:color .2s; } .rdr-nav .wp-block-navigation-item__content:hover { color:#467CBF; } /* mark the page you're on (kicks in when nav items are Page links or otherwise resolve as current; custom-URL links don't get marked by WP) */ .rdr-nav .current-menu-item > .wp-block-navigation-item__content, .rdr-nav .wp-block-navigation-item__content[aria-current="page"] { color:#3A66A0; text-underline-offset:6px; text-decoration:underline; text-decoration-thickness:2px; text-decoration-color:#7EB0E8; } /* header phone button (core Button + injected phone icon) */ .rdr-phone-btn .wp-block-button__link { display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; padding:11px 20px; line-height:1; transition:background-color .25s ease; } .rdr-phone-btn .wp-block-button__link:hover, .rdr-phone-btn .wp-block-button__link:focus-visible { background-color:color-mix(in srgb, var(--wp--preset--color--primary) 86%, #000000) !important; } .rdr-phone-btn .wp-block-button__link::before { content:""; width:17px; height:17px; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* Mobile header: keep logo + hamburger + phone CTA on one tidy line. Below the nav overlay breakpoint (600px) the phone button becomes icon-only so it can't overflow narrow screens. */ @media (max-width: 600px) { /* Header bar on mobile: logo + hamburger only. The phone CTA moves into the menu. */ .rdr-header-actions { gap:14px; flex-wrap:nowrap; } .rdr-header-actions .wp-block-buttons { display:none; } /* IMPORTANT: backdrop-filter creates a containing block that traps the mobile nav overlay's position:fixed inside the header. Disable it on mobile so the overlay covers the full viewport. (Desktop keeps the frosted-glass effect.) */ .rdr-header { -webkit-backdrop-filter:none; backdrop-filter:none; background:#ffffff; } /* Cleaner 3-bar hamburger (WordPress renders a 2-bar icon by default). */ .rdr-nav .wp-block-navigation__responsive-container-open { width:44px; height:44px; justify-content:center; } .rdr-nav .wp-block-navigation__responsive-container-open svg { display:none; } .rdr-nav .wp-block-navigation__responsive-container-open::before { content:""; width:26px; height:26px; background:#0B2343; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* ===== Mobile menu overlay — styled to match the approved mockup ===== */ .rdr-nav .wp-block-navigation__responsive-container.is-menu-open { padding:0; background:#ffffff; } .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { position:relative; margin-top:0; padding:20px 24px 28px; } /* logo, top-left */ .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before { content:""; display:block; height:32px; margin:0 0 20px; background:url("/wp-content/themes/rosen-dental-recruiting/assets/logo-horizontal-blue.png") left center / auto 32px no-repeat; } /* close (×) as a bordered rounded square, top-right */ .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { position:absolute; top:15px; right:24px; margin:0; padding:0; width:44px; height:44px; display:flex; align-items:center; justify-content:center; border:1px solid #E1EAF5; border-radius:10px; color:#0B2343; } .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg { width:20px; height:20px; } /* vertical, full-width list */ .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display:block; width:100%; } .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { display:block; } .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { display:block; } .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content { display:block; padding:18px 2px; font-size:18px; font-weight:700; color:#0B2343 !important; border-bottom:1px solid #E1EAF5; } .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content { border-top:1px solid #E1EAF5; } /* phone number as a full-width primary button */ .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .rdr-menu-call > .wp-block-navigation-item__content { border:0 !important; margin-top:24px; padding:17px 24px !important; border-radius:10px; background:#467CBF; color:#ffffff !important; font-weight:600; font-size:16px; display:flex; align-items:center; justify-content:center; gap:10px; } .rdr-nav .wp-block-navigation__responsive-container.is-menu-open .rdr-menu-call > .wp-block-navigation-item__content::before { content:""; width:18px; height:18px; flex:none; background:#ffffff; -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } } /* The phone menu-link only belongs in the mobile overlay; hide it in the desktop inline nav. */ @media (min-width: 601px) { .rdr-nav .rdr-menu-call { display:none !important; } } /* ============================================================ FOOTER (parts/footer.html) ============================================================ */ .rdr-footer { border-top:1px solid rgba(255,255,255,0.08); } .rdr-logo-white img { height:34px; width:auto; display:block; } .rdr-flabel { text-transform:uppercase; letter-spacing:1.2px; font-weight:700; } /* dynamic-year copyright (shortcode block auto-wraps its output in

) */ .rdr-copyright p { margin:0; } /* footer bottom-bar legal links (Privacy Policy, Sitemap) — subtle, matches the dim bar */ .rdr-legal a { color:#9FB1CB; text-decoration:none; transition:color .2s; } .rdr-legal a:hover, .rdr-legal a:focus-visible { color:#ffffff; } /* footer bottom bar on mobile: stack + center copyright and legal links */ @media (max-width: 600px) { .rdr-footer-bar { flex-direction:column !important; justify-content:center !important; align-items:center !important; text-align:center; gap:16px; } .rdr-footer-bar .rdr-copyright { text-align:center; } .rdr-footer-links { justify-content:center !important; width:100%; } } /* footer link lists (legacy List-block markup, kept for any manual lists) */ .rdr-flink { list-style:none; margin:0; padding:0; } .rdr-flink li { margin:0 0 12px; } .rdr-flink a { color:#C5D3E6; text-decoration:none; transition:color .2s; } .rdr-flink a:hover { color:#ffffff; } /* Footer nav — the "Explore" list is now the dashboard-managed Footer menu (a Navigation block). Match the old link look: vertical, dim blue → white. */ .rdr-fnav { --wp--style--block-gap:12px; } .rdr-fnav.wp-block-navigation .wp-block-navigation__container { gap:12px; } /* !important beats WordPress core's navigation color rule (same specificity, loaded after ours), which otherwise leaves the links navy-on-navy. */ .rdr-fnav.wp-block-navigation .wp-block-navigation-item__content { color:#C5D3E6 !important; text-decoration:none; transition:color .2s; padding:0; } .rdr-fnav.wp-block-navigation .wp-block-navigation-item__content:hover, .rdr-fnav.wp-block-navigation .wp-block-navigation-item__content:focus { color:#ffffff !important; } /* footer contact rows (icon injected via CSS mask, text stays editable) */ .rdr-fc { position:relative; padding-left:29px; color:#C5D3E6; line-height:1.5; } .rdr-fc a { color:#C5D3E6; text-decoration:none; transition:color .2s; } .rdr-fc a:hover { color:#ffffff; } .rdr-fc::before { content:""; position:absolute; left:0; top:2px; width:18px; height:18px; background:#7EB0E8; } .rdr-fc--phone::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .rdr-fc--mail::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .rdr-fc--pin::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } .rdr-fc--clock::before { -webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; mask:url("data:image/svg+xml;utf8,") center/contain no-repeat; } /* ============================================================ FAQ accordion (native

) — used by patterns ============================================================ */ .rdr-faq details { border:1px solid #E1EAF5; border-radius:10px; margin-bottom:14px; overflow:hidden; background:#fff; transition:border-color .25s ease, box-shadow .25s ease; } .rdr-faq details:last-child { margin-bottom:0; } .rdr-faq details:hover { border-color:#B9CBE4; } .rdr-faq details[open] { border-color:#B9CBE4; box-shadow:0 10px 26px rgba(11,35,67,0.06); } .rdr-faq summary { padding:20px 24px; cursor:pointer; list-style:none; font-weight:600; font-size:17px; color:#0B2343; display:flex; justify-content:space-between; align-items:center; gap:16px; transition:color .2s ease; } .rdr-faq summary:hover { color:#3A66A0; } .rdr-faq summary::-webkit-details-marker { display:none; } .rdr-faq summary::after { content:"+"; color:#467CBF; font-size:22px; line-height:1; flex:none; } .rdr-faq details[open] summary::after { content:"\2013"; } .rdr-faq details > *:not(summary) { padding:0 24px 22px; line-height:1.65; margin:0; color:#6B7688; font-size:16px; } /* --- Entrance animation: subtle fade-in-up (JS-gated, per section) --- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } .rdr-reveal-on .rdr-reveal { opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,.74,.28,1), transform .7s cubic-bezier(.16,.74,.28,1); } .rdr-reveal-on .rdr-reveal.rdr-in { opacity:1; transform:none; } /* Cards and columns inside a revealed section rise in with a short stagger (mirrors the handoff's per-card delays). Uses an animation, not a transition, so hover transitions on the cards stay delay-free. */ .rdr-reveal-on .rdr-reveal:not(.rdr-in) :is(.is-layout-grid, .wp-block-columns) > * { opacity:0; } .rdr-reveal-on .rdr-reveal.rdr-in :is(.is-layout-grid, .wp-block-columns) > * { animation:rdr-rise .65s cubic-bezier(.16,.74,.28,1) backwards; } .rdr-reveal-on .rdr-reveal.rdr-in :is(.is-layout-grid, .wp-block-columns) > :nth-child(2) { animation-delay:.09s; } .rdr-reveal-on .rdr-reveal.rdr-in :is(.is-layout-grid, .wp-block-columns) > :nth-child(3) { animation-delay:.18s; } .rdr-reveal-on .rdr-reveal.rdr-in :is(.is-layout-grid, .wp-block-columns) > :nth-child(n+4) { animation-delay:.27s; } } @keyframes rdr-rise { from { opacity:0; transform:translateY(22px); } } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .rdr-card, .rdr-badge, .rdr-tile, .rdr-step { animation:none !important; transition:none !important; } .rdr-reveal, .rdr-reveal :is(.is-layout-grid, .wp-block-columns) > * { opacity:1 !important; transform:none !important; animation:none !important; } }