/* ========================================================= ODYSSEY VIRTUAL TREATMENT Page-specific section styles extracted from 11-general-page-sections.css. Global typography, eyebrow styling, spacing tokens, and shared utilities remain in 01-foundation.css, 02-content.css, and 03-components.css. ========================================================= */ /* ========================================================= VIRTUAL EYEBROW SPACING STANDARD Eyebrow appearance is owned globally by .obh-eyebrow in 02-content.css. This stylesheet does not recreate its gradient, typography, icon, or color. For stacked eyebrow relationships, the parent wrapper owns vertical rhythm with: gap: var(--obh-section-eyebrow-gap); The eyebrow itself remains margin: 0. ========================================================= */ /* ========================================================== VIRTUAL: SHARED GRADIENT COMPOSITION Editorial lead section + Conditions section ========================================================== */ .obh-virtual-composition { --virtual-inner-width: 80%; --virtual-inner-max: 1440px; --virtual-column-gap: 56px; --virtual-row-gap: 56px; --virtual-section-gap: 112px; --virtual-lead-width: 50%; --virtual-list-columns: 1; width: 100%; margin: 0; padding: var(--obh-section-space) 0 72px; box-sizing: border-box; color: var(--obh-navy); background: radial-gradient( circle at 88% 16%, rgba(176, 90, 203, 0.14) 0%, rgba(176, 90, 203, 0) 31% ), linear-gradient(135deg, #edf6fc 0%, #f7f3fb 100%); } .obh-virtual-composition > .obh-virtual-section { border-radius: var(--obh-section-radius); width: min(var(--virtual-inner-width), var(--virtual-inner-max)); margin: 0 auto; padding: 0; background: transparent; box-sizing: border-box; } .obh-virtual-composition .obh-virtual-section__inner { width: 100%; min-width: 0; margin: 0; } .obh-virtual-composition .obh-virtual-section__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--obh-section-eyebrow-gap); } /* Remove internal dividers */ .obh-virtual-composition .obh-virtual-section--sets-apart .obh-divider, .obh-virtual-composition .obh-virtual-section--conditions .obh-divider { display: none; } body .obh-virtual-composition .obh-virtual-section__heading { margin: 0; } /* ========================================================== WHAT SETS ODYSSEY VIRTUAL APART ========================================================== */ .obh-virtual-composition .obh-virtual-section--sets-apart .obh-virtual-section__inner { display: flex; flex-direction: column; gap: 36px; } /* Virtual lead layout and color */ body .obh-virtual-composition .obh-virtual-section__lead { width: var(--virtual-lead-width) !important; max-width: none; margin: 0; color: var(--obh-navy) !important; } /* Two body-copy columns */ .obh-virtual-composition .obh-virtual-section__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--obh-content-gap) var(--virtual-column-gap); width: 100%; min-width: 0; } body .obh-virtual-composition .obh-virtual-section__content p { width: 100%; max-width: none; margin: 0 !important; color: var(--obh-navy); } body .obh-virtual-composition .obh-virtual-section__content p + p { margin-top: 0; } /* ========================================================== CONDITIONS TREATED ========================================================== */ .obh-virtual-composition .obh-virtual-section--conditions { margin-top: var(--virtual-section-gap) !important; } .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; column-gap: var(--virtual-column-gap); row-gap: var(--virtual-row-gap); } /* Left Conditions column */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: start; gap: var(--obh-section-eyebrow-gap); width: 100%; min-width: 0; padding-top: 0; text-align: left; } /* Conditions eyebrow */ body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__heading { margin: 0; text-align: left; } /* Conditions introductory sentence */ body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__intro, body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__intro p { width: 100%; max-width: 100%; margin: 0; text-align: left; color: var(--obh-navy) !important; font-family: var(--obh-type-shippori-subhead-family) !important; font-size: clamp(2rem, 2vw, 2.1rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -1.2px !important; } /* ========================================================== CONDITIONS LIST — EDITORIAL CONSTELLATION Desktop / large tablet: - readable two-column list - constellation artwork remains decorative - staggered entrance animation remains intact - no radial / clock placement of individual labels ========================================================== */ .obh-virtual-composition .obh-virtual-section__list { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; align-items: start; column-gap: clamp(44px, 5vw, 72px); row-gap: 36px; width: 100%; min-width: 0; min-height: clamp(500px, 36vw, 620px); margin: 0; padding: clamp(64px, 7vw, 96px) clamp(28px, 4vw, 54px); box-sizing: border-box; columns: 1; } /* ---------------------------------------------------------- ATMOSPHERIC CENTER ORB Decorative only. Content remains above it. ---------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section__list::before { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: clamp(170px, 31%, 240px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 50%; background: linear-gradient( 145deg, rgba(37, 143, 232, 0.16) 0%, rgba(111, 211, 255, 0.10) 38%, rgba(176, 90, 203, 0.17) 100% ); box-shadow: 0 0 0 34px rgba(37, 143, 232, 0.025), 0 0 0 68px rgba(176, 90, 203, 0.018), 0 24px 70px rgba(23, 54, 95, 0.08); pointer-events: none; } /* ---------------------------------------------------------- SEGMENTED CONSTELLATION ORBIT ---------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section__list::after { content: ""; position: absolute; z-index: 0; top: 50%; left: 50%; width: clamp(330px, 62%, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient( from -72deg, rgba(37, 143, 232, 0.34) 0deg 52deg, transparent 52deg 76deg, rgba(86, 149, 230, 0.24) 76deg 145deg, transparent 145deg 172deg, rgba(176, 90, 203, 0.30) 172deg 236deg, transparent 236deg 265deg, rgba(111, 134, 235, 0.25) 265deg 330deg, transparent 330deg 360deg ); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1px) ); mask: radial-gradient( farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1px) ); opacity: 0.8; pointer-events: none; } /* ---------------------------------------------------------- CONDITION NODES Override JS-generated radial clock coordinates. ---------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section__list > li { position: relative !important; z-index: 2; top: auto !important; left: auto !important; display: grid !important; grid-template-columns: 34px minmax(0, 1fr); align-items: start; width: 100% !important; max-width: none !important; gap: 14px; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: left !important; list-style: none; } /* ---------------------------------------------------------- CIRCULAR + MARKER ---------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section__list > li::before { content: "+" !important; position: static !important; top: auto !important; left: auto !important; display: grid !important; place-items: center; grid-column: 1; width: 34px !important; height: 34px !important; margin: 0 !important; border: 1px solid rgba(74, 126, 214, 0.20); border-radius: 50%; background: rgba(255, 255, 255, 0.86) !important; -webkit-mask: none !important; mask: none !important; color: #258FE8 !important; font-family: var(--obh-font-body); font-size: 1.35rem; font-weight: 400; line-height: 1; box-shadow: 0 8px 24px rgba(23, 54, 95, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.45); } /* ---------------------------------------------------------- CONDITION LABEL Keep this exact class because the existing JS animation targets .obh-condition-label. ---------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section__list .obh-condition-label { grid-column: 2; display: block; width: 100%; max-width: none; padding-top: 2px; color: var(--obh-navy); font-family: var(--obh-font-heading); font-size: clamp(1.05rem, 1.15vw, 1.24rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.55px; text-align: left; overflow-wrap: normal; word-break: normal; } /* ---------------------------------------------------------- CLOCK RUNTIME COMPATIBILITY JS can continue adding: - .obh-clock-ready - .is-clock - --clock-x - --clock-y - --condition-delay The visual layout no longer depends on radial coordinates. ---------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section__list.is-clock { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; height: auto; columns: 1; isolation: isolate; } /* Prevent radial positioning from returning when JS adds .is-clock. */ .obh-virtual-composition .obh-virtual-section__list.is-clock > li { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; transform: none !important; } /* ---------------------------------------------------------- STAGGERED ENTRANCE MOTION Preserve --condition-delay values already assigned by JS. ---------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .obh-virtual-composition .obh-virtual-section__list.obh-clock-ready.is-entering > li > .obh-condition-label { animation: obh-clock-label-enter 550ms ease-out both; animation-delay: var(--condition-delay, 0ms); } } @media (max-width: 1024px) { .obh-virtual-composition { --virtual-row-gap: 44px; --virtual-lead-width: 90%; } .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__inner { grid-template-columns: minmax(0, 1fr); } .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__copy { align-self: auto; justify-content: center; } body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__intro p { width: 100%; } /* The JavaScript disables the clock below 1025px */ .obh-virtual-composition .obh-virtual-section__list.is-clock { position: static; height: auto; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .obh-virtual-composition { --virtual-row-gap: 36px; --virtual-section-gap: 80px; --virtual-lead-width: 100%; } } /* ========================================================== VIRTUAL SETS APART — MOBILE STACK ========================================================== */ @media (max-width: 767px) { .obh-virtual-composition .obh-virtual-section--sets-apart .obh-virtual-section__content { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: var(--obh-content-gap); } } /* ========================================================== VIRTUAL CONDITIONS — MOBILE CONSTELLATION Desktop constellation is intentionally not forced onto small screens. Mobile uses a readable editorial stack with atmospheric constellation artwork behind the list. ========================================================== */ @media (max-width: 767px) { /* Conditions section spacing */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__inner { row-gap: 44px; } /* Keep the editorial introduction readable on mobile */ body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__intro, body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__intro p { font-size: clamp(2.1rem, 2vw, 2.2rem) !important; line-height: 1.3 !important; letter-spacing: -1.1px !important; } /* -------------------------------------------------------- MOBILE CONSTELLATION CANVAS -------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 36px; width: calc(100% + 64px); min-height: 0; margin-left: -32px; margin-right: -32px; padding: 42px 32px 24px; overflow: visible; } /* * Atmospheric central orb. * Decorative only; content stays above it. */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list::before { content: ""; position: absolute; z-index: -2; top: 50%; left: 50%; width: clamp(220px, 74vw, 310px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 50%; background: linear-gradient( 145deg, rgba(37, 143, 232, 0.13) 0%, rgba(111, 211, 255, 0.08) 38%, rgba(176, 90, 203, 0.15) 100% ); box-shadow: 0 0 0 32px rgba(37, 143, 232, 0.025), 0 0 0 64px rgba(176, 90, 203, 0.018), 0 24px 70px rgba(23, 54, 95, 0.07); pointer-events: none; } /* * Broken orbital line. * Keeps the constellation visual without creating * a literal clock face. */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list::after { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: clamp(285px, 94vw, 390px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: conic-gradient( from -55deg, rgba(37, 143, 232, 0.32) 0deg 48deg, transparent 48deg 82deg, rgba(86, 149, 230, 0.20) 82deg 142deg, transparent 142deg 184deg, rgba(176, 90, 203, 0.28) 184deg 242deg, transparent 242deg 278deg, rgba(111, 134, 235, 0.22) 278deg 334deg, transparent 334deg 360deg ); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1px) ); mask: radial-gradient( farthest-side, transparent calc(100% - 1.25px), #000 calc(100% - 1px) ); opacity: 0.8; pointer-events: none; } /* -------------------------------------------------------- MOBILE CONDITION NODES -------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list > li { position: relative !important; z-index: 2; top: auto !important; left: auto !important; display: grid !important; grid-template-columns: 32px minmax(0, 1fr); align-items: start; width: calc(100% - 18px) !important; max-width: none !important; gap: 12px; margin: 0 !important; padding: 0 !important; transform: none !important; text-align: left; list-style: none; } /* * Slight alternating movement gives the nodes a * constellation rhythm without compromising scanning. */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list > li:nth-child(even) { margin-left: 18px !important; } /* Refined mobile plus marker */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list > li::before { content: "+" !important; position: static !important; top: auto !important; left: auto !important; display: grid !important; place-items: center; width: 32px !important; height: 32px !important; margin: 0 !important; border: 1px solid rgba(74, 126, 214, 0.22); border-radius: 50%; background: rgba(255, 255, 255, 0.88) !important; -webkit-mask: none !important; mask: none !important; color: #258FE8 !important; font-family: var(--obh-font-body); font-size: 1.2rem; font-weight: 400; line-height: 1; box-shadow: 0 6px 20px rgba(23, 54, 95, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.55); } /* Condition label */ .obh-virtual-composition .obh-virtual-section--conditions .obh-condition-label { padding-top: 3px; color: var(--obh-navy); font-family: var(--obh-font-heading); font-size: 1.18rem; font-weight: 600; line-height: 1.28; letter-spacing: -0.55px; text-align: left; overflow-wrap: normal; word-break: normal; } } /* ========================================================== VIRTUAL HOW WE TREAT — EDITORIAL SECTION Shortcode: [obh_virtual_how_we_treat] ========================================================== */ .obh-virtual-how-we-treat { border-radius: var(--obh-section-radius); position: relative; width: 100%; margin: 0; padding: 36px; overflow: hidden; color: var(--obh-navy); background: radial-gradient( circle at 92% 12%, rgba(176, 90, 203, 0.09) 0%, rgba(176, 90, 203, 0) 30% ), linear-gradient( 180deg, #ffffff 0%, #f8fbfe 100% ); } .obh-virtual-how-we-treat__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; column-gap: 56px; row-gap: 56px; width: 100%; max-width: none; margin: 0; } /* ---------------------------------------------------------- LEFT EDITORIAL COPY ---------------------------------------------------------- */ .obh-virtual-how-we-treat__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--obh-section-eyebrow-gap); } body .obh-virtual-how-we-treat__heading { width: 75%; max-width: none; margin: 0; } /* Tablet */ @media (min-width: 768px) and (max-width: 1024px) { body .obh-virtual-how-we-treat__heading { width: 85%; } } /* Mobile */ @media (max-width: 767px) { body .obh-virtual-how-we-treat__heading { width: 90%; } } body .obh-virtual-how-we-treat__subhead { max-width: 590px; margin: 0; color: var(--obh-navy); } /* ---------------------------------------------------------- RIGHT MODALITIES ---------------------------------------------------------- */ .obh-virtual-how-we-treat__modalities { min-width: 0; padding-top: 8px; } .obh-virtual-how-we-treat__label { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; color: var(--obh-navy); } .obh-virtual-how-we-treat__label::before { content: ""; display: block; flex: 0 0 32px; width: 32px; height: 2px; background: linear-gradient( 90deg, #258FE8 0%, #B05ACB 100% ); } .obh-virtual-how-we-treat__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; width: 100%; margin: 0; padding: 0; list-style: none; } .obh-virtual-how-we-treat__list > li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr); align-items: start; gap: 12px; margin: 0; padding: 18px 0; border-top: 1px solid rgba(23, 54, 95, 0.16); color: var(--obh-navy); font-family: var(--obh-font-body); font-size: 1.12rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.15px; } .obh-virtual-how-we-treat__list > li::before { content: "+"; display: block; padding-top: 0.08em; color: #258FE8; font-family: var(--obh-font-body); font-size: 1.28rem; font-weight: 500; line-height: 1; } .obh-virtual-how-we-treat__list > li:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(23, 54, 95, 0.16); } /* Elementor shortcode host */ .obh-virtual-how-we-treat-host, .obh-virtual-how-we-treat-host .elementor-widget-container, .obh-virtual-how-we-treat-host .elementor-shortcode { width: 100%; } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1024px) { .obh-virtual-how-we-treat__inner { grid-template-columns: minmax(0, 1fr); row-gap: 44px; } body .obh-virtual-how-we-treat__heading { max-width: 760px; } body .obh-virtual-how-we-treat__subhead { max-width: 760px; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .obh-virtual-how-we-treat__inner { width: calc(100% - 40px); row-gap: 36px; } .obh-virtual-how-we-treat__modalities { padding-top: 0; } .obh-virtual-how-we-treat__list { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .obh-virtual-how-we-treat__list > li:nth-last-child(-n + 2) { border-bottom: 0; } .obh-virtual-how-we-treat__list > li:last-child { border-bottom: 1px solid rgba(23, 54, 95, 0.16); } } /* ========================================================== VIRTUAL TREATMENT — PROGRAM STRUCTURE Shortcode: [obh_virtual_program_structure] Layout system: - Outer decorative section: 100% width - Inner content panel: var(--obh-content-width) - Desktop panel width: 90% - Mobile panel width: 93% - Panel padding controlled globally in 01-foundation.css Eyebrow styling remains controlled globally by .obh-eyebrow in 02-content.css. ========================================================== */ /* ---------------------------------------------------------- OUTER DECORATIVE SECTION Full-width background only. ---------------------------------------------------------- */ .obh-virtual-program-structure { position: relative; isolation: isolate; width: 100%; margin: 0; /* * Vertical section breathing room only. * Horizontal sizing belongs to the inner panel. */ padding: var(--obh-section-padding-block) 0; overflow: hidden; box-sizing: border-box; color: var(--obh-navy); background: radial-gradient( circle at 12% 18%, rgba(111, 211, 255, 0.16) 0%, rgba(111, 211, 255, 0) 34% ), radial-gradient( circle at 88% 78%, rgba(176, 90, 203, 0.14) 0%, rgba(176, 90, 203, 0) 38% ), linear-gradient( 135deg, #f2f9fd 0%, #f7f5fb 52%, #f8f2fb 100% ); } /* ---------------------------------------------------------- DESIGNER LINE ART Transparent PNGs act as masks. Their visible color comes from the Odyssey blue-to-purple gradient below. ---------------------------------------------------------- */ .obh-virtual-program-structure::before, .obh-virtual-program-structure::after { content: ""; position: absolute; z-index: 0; width: min(31vw, 430px); height: 78%; opacity: 0.34; background: linear-gradient( 145deg, #6fd3ff 0%, #9ba8ff 48%, #d9a6ff 100% ); pointer-events: none; } /* Upper-left designer lines */ .obh-virtual-program-structure::before { top: -20%; left: -7%; -webkit-mask: url("../images/obh-virtual-lines-left.png") center / contain no-repeat; mask: url("../images/obh-virtual-lines-left.png") center / contain no-repeat; } /* Lower-right designer lines */ .obh-virtual-program-structure::after { right: -6%; bottom: -25%; -webkit-mask: url("../images/obh-virtual-lines-right.png") center / contain no-repeat; mask: url("../images/obh-virtual-lines-right.png") center / contain no-repeat; } /* ---------------------------------------------------------- INNER CONTENT PANEL Desktop: - 90% total width - 36px internal padding Mobile: - 93% total width - 44px top/bottom - 28px left/right Padding is INCLUDED inside the declared width because this element uses border-box. ---------------------------------------------------------- */ .obh-virtual-program-structure__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; width: var(--obh-content-width); max-width: none; margin: 0 auto; padding: var(--obh-section-padding-block) var(--obh-section-padding-inline); box-sizing: border-box; column-gap: 56px; row-gap: 56px; background: rgba(255, 255, 255, 0.68); border: 1px solid rgba(32, 78, 136, 0.12); border-radius: var(--obh-section-radius); box-shadow: 0 18px 50px rgba(23, 54, 95, 0.045); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .obh-virtual-program-structure__intro, .obh-virtual-program-structure__details { min-width: 0; } .obh-virtual-program-structure__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--obh-section-eyebrow-gap); } /* ---------------------------------------------------------- LEFT COLUMN ---------------------------------------------------------- */ .obh-virtual-program-structure__heading { margin: 0; } /* * Supporting serif typography comes from the global * .obh-type-shippori-subhead utility. */ .obh-virtual-program-structure__subhead { width: 90%; max-width: 620px; margin: 0; color: var(--obh-navy); } /* ---------------------------------------------------------- RIGHT COLUMN — WEEKLY SCHEDULE ---------------------------------------------------------- */ .obh-virtual-program-structure__weekly-schedule { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; margin: 0 0 36px; padding: 0 0 28px; border-bottom: 1px solid rgba(32, 78, 136, 0.14); color: var(--obh-navy); } .obh-virtual-program-structure__label { width: 100%; margin: 0 0 18px; color: var(--obh-navy); } /* Weekly Schedule / Weekly Programming labels */ .obh-virtual-program-structure__weekly-schedule strong, .obh-virtual-program-structure__label strong { color: var(--obh-navy); } /* ---------------------------------------------------------- WEEKLY PROGRAMMING LIST ---------------------------------------------------------- */ .obh-virtual-program-structure__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; margin: 0; padding: 0; column-gap: 36px; row-gap: 0; list-style: none; } .obh-virtual-program-structure__list > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: 12px; min-width: 0; margin: 0; padding: 18px 0; border-top: 1px solid rgba(32, 78, 136, 0.14); color: var(--obh-navy); font-family: var(--obh-font-body); font-size: 1.03rem; font-weight: 500; line-height: 1.35; letter-spacing: -0.15px; } /* Gradient circular plus marker */ .obh-virtual-program-structure__list > li::before { content: "+"; position: static; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border: 1px solid rgba(111, 134, 235, 0.14); border-radius: 50%; background: linear-gradient( 135deg, rgba(111, 211, 255, 0.18) 0%, rgba(217, 166, 255, 0.26) 100% ); color: #258fe8; font-family: var(--obh-font-body); font-size: 1.2rem; font-weight: 500; line-height: 1; box-shadow: 0 5px 18px rgba(23, 54, 95, 0.055); } /* Bottom rule on final desktop row */ .obh-virtual-program-structure__list > li:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(32, 78, 136, 0.14); } /* ========================================================== VIRTUAL TREATMENT — SCHEDULE OPTIONS Shortcode: [obh_virtual_schedule_options] Spacing system: - Desktop: 36px top/bottom + 36px left/right - Mobile: 44px top/bottom + 28px left/right - Values controlled globally in 01-foundation.css Eyebrow styling remains controlled globally by .obh-eyebrow in 02-content.css. ========================================================== */ .obh-virtual-schedule-options { border-radius: var(--obh-section-radius); position: relative; width: 100%; margin: 0; padding: var(--obh-section-padding-block) var(--obh-section-padding-inline); box-sizing: border-box; overflow: hidden; color: var(--obh-navy); background: var(--obh-off-white); } /* ---------------------------------------------------------- MAIN TWO-COLUMN LAYOUT ---------------------------------------------------------- */ .obh-virtual-schedule-options__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; width: 100%; max-width: none; margin: 0; column-gap: 56px; row-gap: 56px; } .obh-virtual-schedule-options__intro, .obh-virtual-schedule-options__details { min-width: 0; } .obh-virtual-schedule-options__intro { display: flex; flex-direction: column; align-items: flex-start; gap: var(--obh-section-eyebrow-gap); } /* ---------------------------------------------------------- LEFT COLUMN Eyebrow typography comes from the existing global .obh-eyebrow rule in 02-content.css. Supporting serif typography comes from the existing .obh-type-shippori-subhead utility. ---------------------------------------------------------- */ .obh-virtual-schedule-options__heading { margin: 0; } .obh-virtual-schedule-options__subhead { width: 85%; max-width: none; margin: 0; } /* ---------------------------------------------------------- RIGHT COLUMN — CURRENT SCHEDULE ---------------------------------------------------------- */ .obh-virtual-schedule-options__label { width: 100%; margin: 0 0 16px; color: var(--obh-navy); font-family: var(--obh-font-body); font-size: 0.96rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.5px; text-transform: uppercase; } .obh-virtual-schedule-options__label strong { font-weight: 600 !important; } /* ---------------------------------------------------------- SCHEDULE CARDS ---------------------------------------------------------- */ .obh-virtual-schedule-options__schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0 0 28px; gap: 16px; } .obh-virtual-schedule-options__row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; margin: 0; padding: 24px; border: 1px solid rgba(32, 78, 136, 0.16); background: #ffffff; } /* Schedule period: Afternoon / Evening */ .obh-virtual-schedule-options__row dt { margin: 0; color: var(--obh-primary); font-family: var(--obh-font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.8px; } /* Schedule time */ .obh-virtual-schedule-options__row dd { margin: 0; color: var(--obh-navy); font-family: var(--obh-font-body); font-size: 1.08rem; font-weight: 600; line-height: 1.35; } /* ---------------------------------------------------------- CLOSING AVAILABILITY NOTE ---------------------------------------------------------- */ .obh-virtual-schedule-options__closing { width: 100%; margin: 0; color: var(--obh-navy); } /* ========================================================== ELEMENTOR SHORTCODE HOSTS Each shortcode widget has its own semantic host class in Elementor. Shared width behavior is intentionally grouped here without coupling one section to another. ========================================================== */ .obh-virtual-program-structure-host, .obh-virtual-program-structure-host .elementor-widget-container, .obh-virtual-program-structure-host .elementor-shortcode, .obh-virtual-schedule-options-host, .obh-virtual-schedule-options-host .elementor-widget-container, .obh-virtual-schedule-options-host .elementor-shortcode, .obh-virtual-availability-host, .obh-virtual-availability-host .elementor-widget-container, .obh-virtual-availability-host .elementor-shortcode, .obh-virtual-fit-host, .obh-virtual-fit-host .elementor-widget-container, .obh-virtual-fit-host .elementor-shortcode { width: 100%; } /* ========================================================== PROGRAM STRUCTURE + SCHEDULE OPTIONS — TABLET 768px–1024px ========================================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* * PROGRAM STRUCTURE */ .obh-virtual-program-structure__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 44px; } .obh-virtual-program-structure__subhead { width: 85%; max-width: 760px; } .obh-virtual-program-structure__list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* * SCHEDULE OPTIONS */ .obh-virtual-schedule-options__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 44px; } .obh-virtual-schedule-options__subhead { width: 85%; } .obh-virtual-schedule-options__schedule { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ========================================================== PROGRAM STRUCTURE + SCHEDULE OPTIONS — MOBILE 767px and below ========================================================== */ @media (max-width: 767px) { /* * PROGRAM STRUCTURE * * Width and padding come from Foundation: * * --obh-content-width: 93%; * --obh-section-padding-block: 44px; * --obh-section-padding-inline: 28px; */ .obh-virtual-program-structure__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 36px; } .obh-virtual-program-structure__subhead { width: 100%; max-width: none; } .obh-virtual-program-structure__list { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .obh-virtual-program-structure__list > li:nth-last-child(-n + 2) { border-bottom: 0; } .obh-virtual-program-structure__list > li:last-child { border-bottom: 1px solid rgba(32, 78, 136, 0.14); } /* * PROGRAM STRUCTURE DESIGNER ARTWORK */ .obh-virtual-program-structure::before, .obh-virtual-program-structure::after { width: 65vw; height: 48%; opacity: 0.22; } .obh-virtual-program-structure::before { top: -11%; left: -30%; } .obh-virtual-program-structure::after { right: -28%; bottom: -13%; } /* * SCHEDULE OPTIONS * * Outer padding comes entirely from Foundation: * * --obh-section-padding-block: 44px; * --obh-section-padding-inline: 28px; */ .obh-virtual-schedule-options__inner { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; margin: 0; column-gap: 0; row-gap: 36px; } .obh-virtual-schedule-options__subhead { width: 90%; } .obh-virtual-schedule-options__schedule { grid-template-columns: minmax(0, 1fr); } .obh-virtual-schedule-options__row { padding: 20px; } } /* ========================================================== VIRTUAL TREATMENT — AVAILABILITY Shortcode: [obh_virtual_availability] ========================================================== */ /* ---------------------------------------------------------- OUTER SECTION ---------------------------------------------------------- */ .obh-virtual-availability { border-radius: var(--obh-section-radius); position: relative; width: 100%; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; color: var(--obh-navy); background: var(--obh-white); } /* ---------------------------------------------------------- INNER TWO-COLUMN LAYOUT ---------------------------------------------------------- */ /* Availability content container */ .obh-virtual-availability__inner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); /* Align the text and map containers at their top edges */ align-items: start; width: 100%; max-width: none; margin: 0 auto; padding: var(--obh-section-padding-block) var(--obh-section-padding-inline); box-sizing: border-box; column-gap: var(--obh-section-column-gap); row-gap: var(--obh-section-row-gap); } /* ---------------------------------------------------------- LEFT COLUMN ---------------------------------------------------------- */ .obh-virtual-availability__copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; gap: var(--obh-section-eyebrow-gap); } .obh-virtual-availability__heading { width: 100%; margin: 0; } .obh-virtual-availability__text { width: 100%; max-width: 640px; margin: 0; color: var(--obh-navy); } /* ---------------------------------------------------------- RIGHT COLUMN — MAP ---------------------------------------------------------- */ .obh-virtual-availability__map { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; } /* * JavaScript rewrites the SVG viewBox around the * contiguous 48 states. The browser can therefore * scale the entire map naturally inside this column. */ .obh-virtual-availability__map svg { display: block; width: 100% !important; max-width: 100%; height: auto !important; max-height: 430px; margin: 0 auto; box-sizing: border-box; } /* ---------------------------------------------------------- NON-VIRTUAL STATES Original soft blue-gray treatment. ---------------------------------------------------------- */ .obh-virtual-availability__map svg .obh-virtual-availability__state { fill: rgba(32, 78, 136, 0.10) !important; stroke: rgba(32, 78, 136, 0.26) !important; stroke-width: 1 !important; transition: fill var(--obh-transition-fast), stroke var(--obh-transition-fast); } /* ---------------------------------------------------------- ODYSSEY VIRTUAL TREATMENT STATES Pale blue → pale purple gradient. No state outline. ---------------------------------------------------------- */ .obh-virtual-availability__map svg .obh-virtual-availability__state.is-available { fill: url("#obh-virtual-availability-gradient") !important; stroke: none !important; stroke-width: 0 !important; } /* ---------------------------------------------------------- ODYSSEY STATE MARKERS ---------------------------------------------------------- */ .obh-virtual-availability__marker { pointer-events: none; filter: drop-shadow( 0 4px 8px rgba(23, 54, 95, 0.18) ); } /* ========================================================== TABLET ========================================================== */ @media (min-width: 768px) and (max-width: 1024px) { .obh-virtual-availability__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 44px; } .obh-virtual-availability__text { max-width: 760px; } .obh-virtual-availability__map svg { width: min(100%, 760px) !important; max-height: none; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 767px) { .obh-virtual-availability__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 36px; } .obh-virtual-availability__text { max-width: none; } .obh-virtual-availability__map svg { width: 100% !important; max-height: none; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .obh-virtual-availability__state { transition: none; } } /* ========================================================== VIRTUAL — WHO'S IT FOR + PROGRAM REQUIREMENTS Shortcode: [obh_virtual_fit_requirements] Editorial split-panel treatment. Uses the existing OBH typography + spacing system. Eyebrow styling remains controlled globally by .obh-eyebrow. ========================================================== */ /* --------------------------------------------------------- SECTION WRAPPER --------------------------------------------------------- */ .obh-virtual-fit { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); width: 100%; margin: 0; padding: clamp(48px, 5vw, 72px) clamp(32px, 4.5vw, 72px); box-sizing: border-box; border-radius: var(--obh-section-radius, 3px); background: radial-gradient( circle at 8% 12%, rgba(39, 153, 222, 0.12) 0%, rgba(39, 153, 222, 0) 34% ), radial-gradient( circle at 96% 88%, rgba(159, 109, 169, 0.11) 0%, rgba(159, 109, 169, 0) 32% ), linear-gradient( 135deg, #f3f9fd 0%, #fbf8fc 100% ); color: var(--obh-navy); overflow: hidden; } /* --------------------------------------------------------- COLUMNS --------------------------------------------------------- */ .obh-virtual-fit__column { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: 0; gap: var(--obh-section-eyebrow-gap); } /* Left column */ .obh-virtual-fit__column:first-child { padding-right: clamp(32px, 4vw, 64px); } /* Right column */ .obh-virtual-fit__column:last-child { padding-left: clamp(32px, 4vw, 64px); border-left: 1px solid rgba(32, 78, 136, 0.16); } /* --------------------------------------------------------- EYEBROWS IMPORTANT: Do not recreate typography, gradient, color, etc. here. Global .obh-eyebrow remains the source of truth. --------------------------------------------------------- */ body .obh-virtual-fit h2.obh-virtual-fit__eyebrow { margin: 0; } /* --------------------------------------------------------- SMALLER H2 / SERIF SUBHEAD --------------------------------------------------------- */ body .obh-virtual-fit .obh-virtual-fit__subhead { width: 100%; max-width: 24ch; margin: 0; color: var(--obh-navy); } /* --------------------------------------------------------- BODY COPY Typography and paragraph rhythm are provided globally by .obh-body-copy in 02-content.css. --------------------------------------------------------- */ .obh-virtual-fit__body { width: 100%; min-width: 0; color: var(--obh-navy); } /* --------------------------------------------------------- REQUIREMENTS LIST --------------------------------------------------------- */ body .obh-virtual-fit__requirements ul { list-style: none !important; margin: 0 0 30px !important; padding: 0 !important; } /* * Preserve the existing icon system. * This only controls layout + typography. */ body .obh-virtual-fit__requirements ul > li { position: relative !important; display: block !important; list-style: none !important; margin: 0 !important; font-family: var(--obh-font-heading) !important; font-size: clamp(1.17rem, 1.5vw, 1.2rem) !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: -0.8px !important; } /* Space between requirement items */ body .obh-virtual-fit__requirements ul > li:not(:last-child) { margin-bottom: 16px !important; } /* * The shortcode wraps the list copy in * .elementor-icon-list-text. * Make sure Elementor cannot reset its typography. */ body .obh-virtual-fit__requirements .elementor-icon-list-text { color: inherit !important; font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } /* Parenthetical notes remain visually secondary */ body .obh-virtual-fit__requirements .elementor-icon-list-text em { font-family: var(--obh-font-body) !important; font-size: 0.9em !important; font-weight: 400 !important; line-height: inherit !important; letter-spacing: 0 !important; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 980px) { .obh-virtual-fit { grid-template-columns: minmax(0, 1fr); padding: clamp(42px, 7vw, 60px) clamp(28px, 6vw, 48px); } .obh-virtual-fit__column:first-child { padding-right: 0; padding-bottom: 42px; } .obh-virtual-fit__column:last-child { padding-left: 0; padding-top: 42px; border-left: 0; border-top: 1px solid rgba(32, 78, 136, 0.16); } body .obh-virtual-fit .obh-virtual-fit__subhead { max-width: 30ch; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 767px) { .obh-virtual-fit { padding: 36px 24px; } .obh-virtual-fit__column:first-child { padding-bottom: 36px; } .obh-virtual-fit__column:last-child { padding-top: 36px; } body .obh-virtual-fit .obh-virtual-fit__subhead { max-width: none; } } /* ========================================================== CONDITIONS TREATED — STACKED DESKTOP COMPOSITION Desktop / laptop: - overall Conditions section = 75% width - eyebrow + serif heading centered above constellation - heading group = 60% of section width - two-column conditions grid centered over constellation ========================================================== */ @media (min-width: 1025px) { /* -------------------------------------------------------- SECTION WIDTH -------------------------------------------------------- */ .obh-virtual-composition > .obh-virtual-section--conditions { width: min(75%, var(--virtual-inner-max)) !important; } /* -------------------------------------------------------- STACK INTRO ABOVE CONSTELLATION -------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__inner { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; column-gap: 0; row-gap: 56px; } /* -------------------------------------------------------- CENTERED HEADING GROUP 60% of the 75%-wide Conditions section -------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__copy { width: 60%; min-width: 0; margin-left: auto; margin-right: auto; align-items: center; justify-content: flex-start; text-align: center; } /* Eyebrow remains the existing semantic H2 and reuses the global .obh-eyebrow styling. */ body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__heading { width: 100%; margin: 0; text-align: center; } /* Serif supporting heading */ body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__intro, body .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__intro p { width: 100%; max-width: none; margin-left: auto; margin-right: auto; text-align: center; } /* -------------------------------------------------------- CONSTELLATION / LIST Full width of the 75% Conditions container. -------------------------------------------------------- */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list { width: 100%; margin-left: auto; margin-right: auto; } } /* ========================================================== CONDITIONS TREATED — CENTERED DESKTOP LIST GRID Two equal columns with exactly 80px between them. ========================================================== */ @media (min-width: 1025px) { .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 80px; width: min(100%, 800px); margin-left: auto; margin-right: auto; } } /* CONDITIONS TREATED — CENTER CONSTELLATION CANVAS */ @media (min-width: 1025px) { .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list { justify-self: center !important; margin-left: auto !important; margin-right: auto !important; } } /* ========================================================== CONDITIONS TREATED — DESKTOP VERTICAL SPACING Tighten heading-to-constellation relationship. ========================================================== */ @media (min-width: 1025px) { /* Heading group -> constellation canvas */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__inner { row-gap: 24px; } /* Reduce excess empty vertical canvas surrounding the centered constellation artwork. */ .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list { min-height: 520px; } } /* ========================================================== ODYSSEY VIRTUAL — CONDITIONS TREATED FEATURE STAGE Rising editorial circle / curved panel experiment Page ID: 1813 Decorative only. Existing Conditions markup, constellation, typography, and animation remain unchanged. ========================================================== */ @media (min-width: 1025px) { /* -------------------------------------------------------- CONDITIONS FEATURE STAGE -------------------------------------------------------- */ .page-id-1813 .obh-virtual-composition .obh-virtual-section--conditions { position: relative; isolation: isolate; /* Allow the decorative circle to extend beyond the 75%-wide content section without being clipped. */ overflow: visible; } /* -------------------------------------------------------- LARGE RISING CIRCLE This creates the visual chapter break between "What Sets Odyssey Virtual Apart" and Conditions Treated. -------------------------------------------------------- */ .page-id-1813 .obh-virtual-composition .obh-virtual-section--conditions::before { content: ""; position: absolute; z-index: -1; top: -95px; left: 50%; width: min(1180px, 94vw); aspect-ratio: 1 / 1; height: auto; transform: translateX(-50%); border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 50%; background: radial-gradient( circle at 50% 50%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.18) 38%, rgba(255, 255, 255, 0.06) 68%, rgba(255, 255, 255, 0) 100% ), linear-gradient( 145deg, rgba(255, 255, 255, 0.48) 0%, rgba(235, 246, 255, 0.32) 48%, rgba(244, 235, 249, 0.38) 100% ); box-shadow: 0 -18px 70px rgba(32, 78, 136, 0.035), inset 0 1px 0 rgba(255, 255, 255, 0.72); pointer-events: none; } /* -------------------------------------------------------- KEEP CONTENT ABOVE THE FEATURE PANEL -------------------------------------------------------- */ .page-id-1813 .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__inner { position: relative; z-index: 1; } } /* ========================================================== ODYSSEY VIRTUAL — CONDITIONS FEATURE REFINEMENT More breathing room + softer blue circular field ========================================================== */ @media (min-width: 1025px) { /* Create a deliberate chapter break before Conditions. */ .page-id-1813 .obh-virtual-composition .obh-virtual-section--conditions { margin-top: calc(var(--virtual-section-gap) + 64px) !important; } /* Softer atmospheric circular field. */ .page-id-1813 .obh-virtual-composition .obh-virtual-section--conditions::before { background: radial-gradient( circle at 50% 46%, rgba(255, 255, 255, 0.28) 0%, rgba(224, 242, 253, 0.34) 30%, rgba(205, 232, 250, 0.27) 52%, rgba(225, 218, 246, 0.20) 72%, rgba(244, 235, 249, 0.10) 88%, rgba(244, 235, 249, 0) 100% ), linear-gradient( 145deg, rgba(224, 242, 253, 0.44) 0%, rgba(236, 247, 253, 0.34) 42%, rgba(237, 226, 248, 0.30) 100% ); border-color: transparent; box-shadow: 0 -12px 60px rgba(37, 143, 232, 0.035), 0 24px 90px rgba(135, 73, 147, 0.025), inset 0 1px 0 rgba(255, 255, 255, 0.58); } } /* ========================================================== ODYSSEY VIRTUAL — CONDITIONS TREATED Reduce excess space below the final list row ========================================================== */ @media (min-width: 1025px) { .page-id-1813 .obh-virtual-composition .obh-virtual-section--conditions .obh-virtual-section__list { min-height: 440px; } } /* ========================================================== ODYSSEY VIRTUAL — CONDITIONS TREATED List item typography ========================================================== */ .page-id-1813 .obh-virtual-composition .obh-virtual-section--conditions .obh-condition-label { font-family: var(--obh-font-body) !important; font-size: 1.25rem !important; font-weight: 400 !important; line-height: 1.25em !important; letter-spacing: -0.3px !important; } /* ========================================================== VIRTUAL TREATMENT — GRADIENT BUTTON VARIANT Advanced > CSS Classes: obh-virtual-gradient-btn ========================================================== */ .page-id-1813 .obh-virtual-gradient-btn .elementor-button { background: linear-gradient( 90deg, #204e88 0%, #874993 100% ) !important; border: 0 !important; box-shadow: none !important; } .page-id-1813 .obh-virtual-gradient-btn .elementor-button:hover, .page-id-1813 .obh-virtual-gradient-btn .elementor-button:focus-visible { background: linear-gradient( 90deg, var(--obh-navy) 0%, var(--obh-purple-deep) 100% ) !important; } /* ========================================================== VIRTUAL TREATMENT — ALLOW ELEMENTOR LOCAL FONT WEIGHT Overrides inline font-weight values stored in ACF WYSIWYG while preserving all other inline formatting. ========================================================== */ .page-id-1813 .obh-inherit-widget-weight span[style*="font-weight"] { font-weight: inherit !important; }