/* Shared mobile menu — one definition for every page. Moved verbatim out of home.css so index, demo and contact render the same menu from the same rules. Edit here and it changes everywhere. */ body.dd-on-trust-light:not(.dd-menu-open) .dd-menu-button{ color:#123746 !important; background:rgba(244,250,251,.76) !important; border-color:rgba(26,78,95,.11) !important; } /* ===== dd-footer-reference-structure-v2 ===== *//* Footer structural correction: closely follows the supplied reference geometry. *//* ===== dd-hamburger-minimalist-patch ===== *//* Premium minimalist hamburger: keep the hit area, remove the visible box. */.dd-menu-button{ border-color:transparent !important; background:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } .dd-menu-button:hover{ transform:scale(1.03); } .dd-menu-button:focus-visible{ outline:2px solid rgba(123,215,241,.72); outline-offset:4px; } .dd-menu-button__icon i{ width:20px; margin-left:-10px; } body.dd-menu-open .dd-menu-button, html body[data-dd-chrome-theme="light"]:not(.dd-menu-open) .dd-menu-button, html body[data-dd-chrome-theme="dark"]:not(.dd-menu-open) .dd-menu-button{ border-color:transparent !important; background:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } /* ===== dd-hamburger-hover-microinteraction-patch ===== *//* Refined stroke-only hover interaction. Keeps the button visually unboxed. */@media (hover:hover) and (pointer:fine) { .dd-menu-button:not([aria-expanded="true"]) .dd-menu-button__icon i{ transition: top .34s cubic-bezier(.22,.8,.2,1), transform .34s cubic-bezier(.22,.8,.2,1), opacity .18s ease, width .34s ease, margin-left .34s cubic-bezier(.22,.8,.2,1); } .dd-menu-button:not([aria-expanded="true"]):hover .dd-menu-button__icon i:nth-child(1){ transform:translateX(2px); } .dd-menu-button:not([aria-expanded="true"]):hover .dd-menu-button__icon i:nth-child(2){ transform:translateX(-2px); } .dd-menu-button:not([aria-expanded="true"]):hover .dd-menu-button__icon i:nth-child(3){ transform:translateX(1px); } } @media (prefers-reduced-motion: reduce) { .dd-menu-button__icon i{ transition:none !important; } } /* ===== dd-menu-link-hover-polish-v1 ===== *//* Premium menu-link hover: restrained cyan lift/glow,no heavy decoration. */.dd-menu-nav a{ transition: opacity .42s ease, transform .56s cubic-bezier(.22,.8,.2,1), filter .46s ease, color .24s ease, text-shadow .28s ease !important; } body.dd-menu-open .dd-menu-nav__primary a:hover{ color:#d7f5fc; transform:translate3d(5px,0,0); text-shadow: 0 0 14px rgba(126,220,244,.20), 0 0 30px rgba(126,220,244,.08); } body.dd-menu-open .dd-menu-nav__primary a:focus-visible{ color:#d7f5fc; text-shadow:0 0 16px rgba(126,220,244,.18); outline:1px solid rgba(159,229,251,.42); outline-offset:6px; border-radius:8px; } /* Utility actions keep their existing fills; add only a restrained depth cue. */body.dd-menu-open .dd-menu-nav .dd-menu-nav__utility-link{ transition: opacity .42s ease, transform .30s cubic-bezier(.22,.8,.2,1), filter .46s ease, color .22s ease, background-color .22s ease, border-color .22s ease, box-shadow .28s ease !important; } body.dd-menu-open .dd-menu-nav .dd-menu-nav__utility-link:hover{ transform:translateY(-2px); } body.dd-menu-open .dd-menu-nav .dd-menu-nav__utility-link--login:hover{ box-shadow:0 10px 28px -18px rgba(177,236,252,.38); } body.dd-menu-open .dd-menu-nav .dd-menu-nav__utility-link--demo:hover{ box-shadow:0 12px 30px -16px rgba(159,229,251,.34); } @media (prefers-reduced-motion: reduce) { body.dd-menu-open .dd-menu-nav__primary a:hover, body.dd-menu-open .dd-menu-nav .dd-menu-nav__utility-link:hover{ transform:none; } } /* ===== dd-practice-pulse-market-spider-patch ===== *//* Competitive / Market position — benchmark vs practice spider chart *//* ===== dd-hero-lede-single-line-and-brand-trademark-v1 ===== *//* Hero support line is intentionally one unbroken sentence at every viewport width. *//* ===== dd-trust-reference-and-mobile-hero-v1 ===== *//* Hero: editorial single line on desktop/tablet, readable wrapping on phones. *//* Built for Trust: reference-led proof layer. *//* ===== dd-trust-compliance-logo-replacement-v1 ===== *//* ===== homepage-inline-style-11 ===== *//* ---------- Persistent site chrome ---------- *//* The menu button is always visible. Its geometry stays quiet and compact, while the three strokes morph into a precise close icon. */.dd-menu-button{ position:relative; z-index:2; width:44px; height:44px; flex:0 0 44px; border:1px solid rgba(16,48,63,.12); border-radius:12px; background:rgba(255,255,255,.82); color:#123544; cursor:pointer; pointer-events:auto; -webkit-backdrop-filter:blur(14px) saturate(125%); backdrop-filter:blur(14px) saturate(125%); box-shadow:0 10px 30px -20px rgba(10,39,53,.55); transition:background .28s ease,border-color .28s ease,color .28s ease,transform .25s ease; } .dd-menu-button:hover{ transform:scale(1.03); } .dd-menu-button:focus-visible{ outline:2px solid var(--dd-teal); outline-offset:3px; } .dd-menu-button__icon{ position:absolute; inset:0; display:block; } .dd-menu-button__icon i{ position:absolute; left:50%; width:18px; height:1.6px; margin-left:-9px; border-radius:2px; background:currentColor; transform-origin:50% 50%; transition:top .34s cubic-bezier(.22,.8,.2,1), transform .34s cubic-bezier(.22,.8,.2,1), opacity .18s ease, width .34s ease; } .dd-menu-button__icon i:nth-child(1){top:14px} .dd-menu-button__icon i:nth-child(2){top:21px} .dd-menu-button__icon i:nth-child(3){top:28px} .dd-menu-button[aria-expanded="true"] .dd-menu-button__icon i:nth-child(1){top:21px;transform:rotate(45deg)} .dd-menu-button[aria-expanded="true"] .dd-menu-button__icon i:nth-child(2){opacity:0;width:0;margin-left:0} .dd-menu-button[aria-expanded="true"] .dd-menu-button__icon i:nth-child(3){top:21px;transform:rotate(-45deg)} /* Reference-inspired menu: a full-screen radial reveal grows from the hamburger itself. No side drawer and no rectangular slide-in panel. */.dd-menu-overlay{ --dd-menu-x: calc(100% - 44px); --dd-menu-y: 40px; position:fixed; inset:0; z-index:160; min-width:100%; min-height:100%; overflow:hidden; pointer-events:none; visibility:hidden; color:#fff; background:var(--dd-menu-background); -webkit-clip-path:circle(0 at var(--dd-menu-x) var(--dd-menu-y)); clip-path:circle(0 at var(--dd-menu-x) var(--dd-menu-y)); transition: -webkit-clip-path .72s cubic-bezier(.76,0,.18,1), clip-path .72s cubic-bezier(.76,0,.18,1), visibility 0s linear .72s; } body.dd-menu-open .dd-menu-overlay{ pointer-events:auto; visibility:visible; -webkit-clip-path:circle(165vmax at var(--dd-menu-x) var(--dd-menu-y)); clip-path:circle(165vmax at var(--dd-menu-x) var(--dd-menu-y)); transition: -webkit-clip-path .76s cubic-bezier(.76,0,.18,1), clip-path .76s cubic-bezier(.76,0,.18,1), visibility 0s linear 0s; } body.dd-menu-open{ overflow:hidden; } /* Inner pages use .dd-page-logo, so the original .dd-site-logo-only rule left their navy logo sitting unreadable on the dark overlay. */ body.dd-menu-open .dd-site-logo img, body.dd-menu-open .dd-page-logo img{ filter:brightness(0) invert(1); } body.dd-menu-open .dd-site-nav__links{ opacity:0 !important; pointer-events:none !important; } body.dd-menu-open .dd-menu-button{ color:#fff; background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.25); } .dd-menu-overlay__inner{ width:100%; height:100%; min-height:100svh; display:grid; place-items:center; padding:88px 24px 48px; } .dd-menu-nav{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:0; } .dd-menu-nav a{ position:relative; display:block; text-decoration:none; color:#fff; font-family:var(--dd-sans); font-weight:520; font-size:clamp(32px,5.1vw,72px); line-height:.98; letter-spacing:-.045em; padding:.12em .2em; opacity:0; transform:translateY(25px); filter:blur(7px); transition:opacity .42s ease,transform .56s cubic-bezier(.22,.8,.2,1),filter .46s ease,color .22s ease; } .dd-menu-nav a:hover{ color:#bfeaf6; } body.dd-menu-open .dd-menu-nav a{ opacity:1; transform:translateY(0); filter:blur(0); } body.dd-menu-open .dd-menu-nav a:nth-child(1){transition-delay:.24s} body.dd-menu-open .dd-menu-nav a:nth-child(2){transition-delay:.31s} body.dd-menu-open .dd-menu-nav a:nth-child(3){transition-delay:.38s} body.dd-menu-open .dd-menu-nav a:nth-child(4){transition-delay:.45s} body.dd-menu-open .dd-menu-nav a:nth-child(5){transition-delay:.52s} body.dd-menu-open .dd-menu-nav a:nth-child(6){transition-delay:.59s} .dd-menu-overlay:not([aria-hidden="false"]) .dd-menu-nav a{ transition-delay:0s; } @media (max-width:700px) { .dd-menu-button{ width:42px;height:42px;flex-basis:42px;border-radius:11px; opacity:0; filter:blur(10px); transform:translate3d(0,-24px,0) scale(.97); transition: opacity .58s cubic-bezier(.22,.8,.2,1) .10s, transform .78s cubic-bezier(.22,.8,.2,1) .10s, filter .68s cubic-bezier(.22,.8,.2,1) .10s, background .28s ease,border-color .28s ease,color .28s ease; pointer-events:none; } body.dd-mobile-chrome-ready .dd-menu-button{ opacity:1; filter:blur(0); transform:translate3d(0,0,0) scale(1); pointer-events:auto; } body.dd-mobile-chrome-ready .dd-menu-button:hover{ transform:translate3d(0,0,0) scale(1.03); } .dd-menu-button__icon i:nth-child(1){top:13px} .dd-menu-button__icon i:nth-child(2){top:20px} .dd-menu-button__icon i:nth-child(3){top:27px} .dd-menu-button[aria-expanded="true"] .dd-menu-button__icon i:nth-child(1), .dd-menu-button[aria-expanded="true"] .dd-menu-button__icon i:nth-child(3){top:20px} .dd-menu-overlay{ --dd-menu-x:calc(100% - 33px);--dd-menu-y:33px; } .dd-menu-overlay__inner{ padding:74px 18px 34px; } .dd-menu-nav a{ font-size:clamp(34px,11vw,54px); padding:.16em .1em; } } @media (max-width:700px) and (prefers-reduced-motion: reduce) { .dd-site-logo, .dd-menu-button{ transition:none !important; filter:none !important; transform:none !important; } } /* ---------- Section ---------- *//* Mobile uses the same full-screen composition as desktop. The 16:9 frames cover the portrait viewport and crop symmetrically at the sides, keeping the patient/portal centred while preserving the sky area for the hero copy. *//* ---------- Hero copy ---------- *//* Kept inside the open sky above the glass portal and the clinics. *//* ---------- Annotations ---------- *//* Safari and Firefox without backdrop-filter get a denser panel instead, so the text never lands on bare scene. *//* Final moment: a plain, very round call to action centred in the viewport. *//* ---------- Preloader ---------- *//* ---------- Recognition section: uncertainty after the handoff ---------- *//* Timing rule across all narrative sections: reveal content fully -> hold it cleanly -> only then allow the next layer to cover. *//* ---------- Recognition -> Reframe foreground transition ---------- *//* Reframe is deliberately a new visual world: the light Recognition page stays pinned while this dark foreground sheet rises over it. *//* ---------- Reframe -> Future Possibility foreground transition ---------- *//* Once the light Future Possibility layer reaches the top, restore the persistent chrome to its light-page treatment even though Reframe remains underneath it in the document. */body.dd-on-future-light:not(.dd-menu-open) .dd-menu-button{ color:#123544; background:rgba(255,255,255,.82); border-color:rgba(16,48,63,.12); } /* ---------- Future Possibility -> Support Model foreground transition ---------- */body.dd-on-support-dark:not(.dd-menu-open) .dd-menu-button{ color:#f0fbfd; background:rgba(8,29,39,.58); border-color:rgba(220,244,250,.18); } /* ---------- Support Model -> Trust Reinforcement foreground transition ---------- */body.dd-on-trust-light:not(.dd-menu-open) .dd-menu-button{ color:#123746; background:rgba(244,250,251,.76); border-color:rgba(26,78,95,.11); } /* Persistent chrome changes tone only when the dark page has essentially reached the top edge,avoiding a premature white logo over the light page. *//* ---------- Trust Reinforcement -> Demonstration Invitation foreground transition ---------- */body.dd-on-demo-dark:not(.dd-menu-open) .dd-menu-button{ color:#effbfe; background:rgba(5,27,36,.56); border-color:rgba(219,244,250,.18); } body.dd-on-dark:not(.dd-menu-open) .dd-menu-button{ color:#f0fbfd; background:rgba(8,29,39,.58); border-color:rgba(220,244,250,.18); } /* ---------- Demonstration Invitation -> FAQ foreground transition ---------- */body.dd-on-faq-light:not(.dd-menu-open) .dd-menu-button{ color:#123746 !important; background:rgba(247,250,251,.80) !important; border-color:rgba(26,78,95,.11) !important; } /* ---------- FAQ -> Footer foreground transition ---------- */body.dd-on-footer-dark:not(.dd-menu-open) .dd-menu-button{ color:#eefbfe !important; background:rgba(4,27,35,.58) !important; border-color:rgba(216,242,247,.18) !important; } /* ---------- Reduced motion ---------- *//* ===== dd-footer-final-structure-v3 ===== *//* Final footer geometry: reference-led and intentionally placed after all base CSS. *//* No idle white slab. The only resting dividers are the same 1px as top/bottom. *//* ===== dd-footer-character-reveal-v1 ===== *//* ===== dd-reframe-premium-redesign ===== *//* ===== DentalDoor Reframe: premium three-zone storytelling composition ===== *//* Centre storytelling visual *//* Right journey stack *//* Curved scroll-driven connector system *//* Refine dark world without changing the existing transition geometry. *//* ===== dd-reframe-depth-fix-v2 ===== *//* Global depth order: atmospheric background -> connector -> handoff/reflection -> glossy cards/text. *//* A real floor reflection: the same transparent PNG, mirrored from the platform baseline. *//* ===== dd-chrome-theme-system-fix ===== *//* ----- Unified persistent chrome theme system ----- Use one deterministic theme source so the logo / nav cannot inherit the wrong treatment when multiple section-state classes overlap. */body:not(.dd-menu-open) .dd-menu-button{ background:var(--dd-chrome-menu-bg) !important; border-color:var(--dd-chrome-menu-border) !important; color:var(--dd-chrome-menu-color) !important; } /* ----- Future Possibility / connected referral illustration polish ----- *//* ===== dd-reframe-conclusion-restyle-patch ===== *//* Reframe conclusion refinement: lighter,support-inspired editorial treatment *//* ===== dd-reframe-connector-readability-patch ===== *//* Keep the connector behind the icons while protecting a dedicated readability lane for copy. *//* ===== dd-header-approved-two-state-system ===== *//* ================================================================ LOCKED DentalDoor persistent-header colour system Approved states only: LIGHT and DARK. Individual sections are no longer allowed to invent header colours. ================================================================ *//* Smoothly switch the full chrome as one atomic component. */.dd-site-logo img,.dd-site-nav__link,.dd-menu-button{ transition: filter var(--dd-header-transition), color var(--dd-header-transition), background-color var(--dd-header-transition), border-color var(--dd-header-transition), box-shadow var(--dd-header-transition), opacity .28s ease !important; } /* ---------- LIGHT background: approved reference ---------- */html body[data-dd-chrome-theme="light"]:not(.dd-menu-open) .dd-menu-button{ color:var(--dd-header-light-menu-text) !important; background:var(--dd-header-light-menu-bg) !important; border-color:var(--dd-header-light-menu-border) !important; box-shadow:0 10px 30px -20px rgba(10,39,53,.42) !important; } /* ---------- DARK background: approved reference ---------- */html body[data-dd-chrome-theme="dark"]:not(.dd-menu-open) .dd-menu-button{ color:var(--dd-header-dark-menu-text) !important; background:var(--dd-header-dark-menu-bg) !important; border-color:var(--dd-header-dark-menu-border) !important; box-shadow:0 10px 30px -20px rgba(0,0,0,.45) !important; } /* Preserve the deliberate dark-surface logo treatment while the menu is open. */html body.dd-menu-open .dd-site-logo img{content:url('/assets/dd-for-dark-bg.svg');filter:none !important;} /* ===== dd-executive-copy-system ===== *//* Public-facing copy discipline: three-line section headlines and concise supporting text. *//* ===== dd-menu-cleanup-v1 ===== *//* Deliberately compact public-facing menu: core navigation first, utilities second. */.dd-menu-nav{ width:min(760px,100%); display:grid; justify-items:center; gap:clamp(28px,4vh,44px); } .dd-menu-nav__primary{ width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; } .dd-menu-nav__primary a{ font-size:clamp(34px,4.6vw,66px); line-height:1; padding:.13em .2em; } .dd-menu-nav__utility{ display:flex; align-items:center; justify-content:center; gap:10px; padding-top:clamp(18px,2.5vh,28px); border-top:1px solid rgba(220,242,247,.13); width:min(480px,88%); } .dd-menu-nav .dd-menu-nav__utility-link{ display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 18px; border-radius:999px; font-size:13px; line-height:1; letter-spacing:-.01em; font-weight:650; border:1px solid rgba(225,245,252,.18); color:#f3fbff; background:rgba(255,255,255,.055); } .dd-menu-nav .dd-menu-nav__utility-link--demo{ color:#103444; background:#9fe5fb; border-color:rgba(109,218,247,.28); } .dd-menu-nav .dd-menu-nav__utility-link--login:hover{background:rgba(255,255,255,.10);color:#fff;} .dd-menu-nav .dd-menu-nav__utility-link--demo:hover{background:#b1ecfc;color:#103444;} /* One coherent reveal order after reducing the menu. */body.dd-menu-open .dd-menu-nav__primary a:nth-child(1){transition-delay:.22s;} body.dd-menu-open .dd-menu-nav__primary a:nth-child(2){transition-delay:.29s;} body.dd-menu-open .dd-menu-nav__primary a:nth-child(3){transition-delay:.36s;} body.dd-menu-open .dd-menu-nav__primary a:nth-child(4){transition-delay:.43s;} body.dd-menu-open .dd-menu-nav__utility a:nth-child(1){transition-delay:.50s;} body.dd-menu-open .dd-menu-nav__utility a:nth-child(2){transition-delay:.57s;} @media(max-width:600px) { .dd-menu-overlay__inner{padding:82px 18px 30px;} .dd-menu-nav{gap:28px;} .dd-menu-nav__primary a{font-size:clamp(34px,10.4vw,48px);padding:.14em .1em;} .dd-menu-nav__utility{width:100%;max-width:340px;padding-top:22px;} .dd-menu-nav .dd-menu-nav__utility-link{min-height:42px;padding:11px 16px;font-size:12px;} } /* ===== dd-support-layout-protection-v1 ===== *//* Protect the executive three-line Support headline from colliding with the product visual. *//* ===== dd-footer-wordmark-fit-lock ===== *//* Footer wordmark safe-area lock: oversized, but never cropped at the viewport edges. *//* ===== dd-support-four-line-hero-two-line-lock ===== *//* Preserve site-wide editorial scale while allowing Support to use its approved four-line exception. *//* Hero is intentionally two lines on all breakpoints. *//* ===== dd-hamburger-shell-removal-final-fix ===== *//* FINAL CASCADE OVERRIDE — deliberately placed last. The hamburger keeps its full 44/42px hit area but has no visible CTA shell. */html body .dd-menu-button, html body.dd-menu-open .dd-menu-button, html body[data-dd-chrome-theme="light"] .dd-menu-button, html body[data-dd-chrome-theme="dark"] .dd-menu-button, html body[data-dd-chrome-theme="light"]:not(.dd-menu-open) .dd-menu-button, html body[data-dd-chrome-theme="dark"]:not(.dd-menu-open) .dd-menu-button, html body.dd-mobile-chrome-ready .dd-menu-button{ -webkit-appearance:none !important; appearance:none !important; background:none !important; background-color:transparent !important; background-image:none !important; border:0 !important; border-color:transparent !important; border-radius:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:0 !important; } /* Theme only the strokes; never the button shell. */html body[data-dd-chrome-theme="light"]:not(.dd-menu-open) .dd-menu-button{ color:var(--dd-header-light-menu-text,#123544) !important; } html body[data-dd-chrome-theme="dark"]:not(.dd-menu-open) .dd-menu-button, html body.dd-menu-open .dd-menu-button{ color:var(--dd-header-dark-menu-text,#f5fbfd) !important; } /* Retain the invisible 44px interaction target. */.dd-menu-button{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; flex:0 0 44px !important; } .dd-menu-button__icon i{ width:20px; margin-left:-10px; } /* Premium microinteraction: movement lives only in the strokes. */@media (hover:hover) and (pointer:fine) { .dd-menu-button:not([aria-expanded="true"]):hover{ background:transparent !important; border-color:transparent !important; box-shadow:none !important; } .dd-menu-button:not([aria-expanded="true"]):hover .dd-menu-button__icon i:nth-child(1){ transform:translateX(2px); } .dd-menu-button:not([aria-expanded="true"]):hover .dd-menu-button__icon i:nth-child(2){ transform:translateX(-2px); } .dd-menu-button:not([aria-expanded="true"]):hover .dd-menu-button__icon i:nth-child(3){ transform:translateX(1px); } } /* Keyboard accessibility without recreating a permanent box. */.dd-menu-button:focus{outline:none;} .dd-menu-button:focus-visible{ outline:1.5px solid rgba(123,215,241,.82) !important; outline-offset:4px !important; border-radius:4px !important; } @media (max-width:700px) { html body .dd-menu-button, html body.dd-mobile-chrome-ready .dd-menu-button{ width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; flex-basis:42px !important; } } @media (prefers-reduced-motion:reduce) { .dd-menu-button__icon i{transition:none !important;} } /* ===== dd-typography-consistency-lock-v1 ===== *//* Final typography hierarchy lock: editorial serif for narrative; restrained sans for navigation/UI. */.dd-menu-nav__primary a{ font-family:var(--dd-sans) !important; font-weight:520 !important; } .dd-menu-nav .dd-menu-nav__utility-link, .dd-site-nav__link{ font-family:var(--dd-sans) !important; font-weight:650 !important; } /* ===== dd-support-interactive-tabs-graph-fix-v1 ===== *//* Interactive support tabs: preserve the cinematic scroll narrative,add direct exploration. *//* Graph containment: eight fixed tracks,never allowed to invade Trend / Pattern. *//* ===== dd-practice-pulse-six-view-v1 ===== *//* ================================================================ PRACTICE PULSE — six-view product intelligence experience ================================================================ *//* Revenue funnel *//* Performance *//* Relationships *//* Competitive *//* Marketing *//* Forecast *//* ===== dd-practice-pulse-cleanup-v2 ===== *//* Practice Pulse cleanup: stable readability first,motion lives inside the data visualisations. *//* ===== dd-practice-pulse-forecast-columns-v1 ===== *//* Forecasting refinement: columns embedded beneath the forecast line so both read as one system. *//* Intentionally no keyframes/animation on the column chart: it is a stable comparison layer. *//* ===== dd-practice-pulse-forecast-baseline-and-analytics-palette-v1 ===== *//* Practice Pulse refinement layer - Forecast columns lowered so the projected bars originate from the same analytical baseline as the path chart. - Video-inspired chart accents applied only to visualisation primitives for easy rollback. *//* Forecast baseline alignment *//* Forecast chart accents *//* Radar / market position *//* Revenue / relationships / marketing chart primitives *//* ===== dd-practice-pulse-forecast-space-utilisation-v1 ===== *//* Forecasting should use the full available analytics stage instead of leaving a dead lower third. *//* Keep the integrated columns anchored to the visual plotting region as the card grows. *//* ===== dd-practice-pulse-forecast-svg-and-revenue-cleanup-v1 ===== *//* Forecast: one coordinate system for bars,line,cone and baseline. *//* Kill the obsolete HTML-column layer and its pseudo baseline if any older rule survives. *//* Revenue funnel: tighter,more deliberate internal typography. *//* ===== dd-practice-pulse-reference-violet-palette-v1 ===== *//* ================================================================ PRACTICE PULSE — REFERENCE VIOLET CHART PALETTE Derived from the supplied competitive benchmark reference. Only data visualisation primitives are recoloured; product/background surfaces remain unchanged. Remove this single block to roll back. ================================================================ *//* Revenue *//* Referral performance *//* Relationships *//* Competitive: practice violet,benchmark neutral slate *//* Marketing *//* Forecasting — same reference family,with the line still readable over bars *//* ===== dd-practice-pulse-surface-nav-cleanup-v1 ===== *//* ================================================================ PRACTICE PULSE — LOCKED CARD SURFACE + NUMBERLESS NAV This block is intentionally isolated for easy rollback. ================================================================ *//* Apply the approved teal-to-plum treatment consistently to all Practice Pulse data cards without altering the section background. *//* The tab number is no longer part of the navigation hierarchy. *//* ===== dd-persistent-logo-stability-fix-v1 ===== *//* Persistent desktop brand must never leave the top-left chrome. These !important guards intentionally override stale inline geometry from older hero-logo choreography while preserving the existing mobile entrance. *//* ===== dd-mobile-polish-v1 ===================================================== Appended last on purpose. The footer and Practice Pulse rules above are layered from several earlier passes (the same selectors are redefined in three or four places),so winning by specificity alone is unreliable here. Scope: phones. Three findings from the layout audit: 1. the footer wordmark was stranded under a ~270px void,2. the legal links were 7.5px text in a 9px-high hit area,3. body copy in several sections had dropped to 8-10px. Deliberately NOT touched: the Practice Pulse dashboard mock (.pp-*). Its 6-8px labels are a simulated product screenshot; enlarging that chrome would break the composition rather than improve legibility. ----------------------------------------------------------------------- *//* Legal row: readable,and tappable without moving the baseline. Keyed to touch devices rather than a width breakpoint - a phone in landscape is 844px wide and would miss every phone breakpoint,while the finger doing the tapping is exactly the same size. The 44px target comes from a pseudo-element,so the text stays precisely where the design puts it. *//* ===== dd-recognition-timeline-v2 ============================================== The Recognition timeline used to introduce its four nodes one at a time as you scrolled,and the rail fill was scrubbed by scroll position. It now does two distinct things: 1. ENTRANCE - the whole block (lede,caption,all four nodes,closing line) arrives on a single beat,so the section reads as one composed state instead of a list assembling itself. 2. LOOP - once it has arrived,a travelling head runs the rail from node 1 to node 4,pulsing at each stop,glides on past the last node to the open end of the rail,then retracts and repeats. Endless,time-based,and independent of scroll. Every per-frame value below is written by js/home.js as a custom property. That is deliberate: CSS keyframes cannot be retimed,restarted mid-flight,or held in sync with a rail whose length is measured at runtime and differs between the horizontal (desktop) and vertical (<=600px) layouts. --------------------------------------------------------------------------- *//* The pulse ring. Sits outside the dot's edge,expands and fades on arrival. *//* A node the head has already visited. Rides the dot's existing .25s transition,so reaching and resetting are both eased for free. *//* The travelling head. Positioned at the rail's origin and moved with a transform only - never left/top - so the loop never triggers layout. *//* ===== dd-mobile-polish-v2 ===================================================== Second mobile pass,from a device review. Appended last for the same reason as v1: these selectors are redefined across several earlier layers. --------------------------------------------------------------------------- */@media (max-width: 600px){ .dd-menu-nav__utility{ flex-wrap: wrap; row-gap: 10px; width: min(480px, 92%); } .dd-menu-nav .dd-menu-nav__utility-link{ white-space: nowrap; padding: 12px 16px; } .dd-menu-nav .dd-menu-nav__utility-link--demo{ flex: 1 0 100%; } } /* --- Practice Pulse two-up cards on very narrow screens ---------------------- The split panels are "content column + 112px sidecar". Below ~360px the content column collapses to 83px and the figures ($62 / $118 / $196) run past their own card edge. There is no width left to take from the sidecar,so on the narrowest phones the pair stacks instead. 375px and up is unchanged. *//* --- Practice Pulse panel must fit the fold ---------------------------------- The section is a pinned stage: anything taller than the viewport is simply cut,because you cannot scroll inside it. At 320x785 the copy block plus the 529px panel came to 855px - 70px too tall - so the chart ran off the bottom. Reclaimed from the copy block's padding and rhythm rather than the panel,which is the content. *//* The panel's stage reserves a flat 430px. Its scenes are layered (only one is visible at a time),so the reserve is what gives the panel its height - it cannot simply be removed or the charts collapse. On short phones it instead scales with the viewport,which is the difference between the chart fitting the fold and being cut off by the pinned stage. *//* The chart blocks inside the panel carry hard min-heights (radar 230px,forecast 215px,pipeline 165px...). Those stop the cards shrinking with the stage,so on short phones the charts overflowed their own cards even after the stage scaled. Here they scale too,floored at a size that is still readable. *//* ===== dd-future-respiration-v1 ================================================= "Keep confidence" as a living system rather than a static diagram. One loop,time-based,driven entirely from js/home.js as custom properties: inhale - the hub draws light in along the three connectors and swells hold - a beat at the top of the breath exhale - it settles,and the light travels back out; each party responds as its pulse arrives rest - a pause before the next breath The connectors only exist in the desktop layout,so on phones the same loop drives the hub,the spine and the three cards instead. Nothing here animates a layout property. --------------------------------------------------------------------------- *//* Light travelling along a connector. Cloned from the base strokes by JS so the static line stays underneath it. *//* The hub. Scale is owned by the loop once the section has settled. *//* Each party lights up as the breath reaches it. *//* Mobile has a spine instead of connectors; it brightens with the same wave. *//* ===== dd-hero-ambient-video =================================================== A short loop that plays over the hero's first frame before the visitor scrolls,then hands back to the scroll sequence the moment they do. It sits ABOVE the canvas rather than below it. The canvas is the element that has to survive - it is what scrubs - so it cannot be the layer that fades. The perceived result is the one we want either way: the canvas paints frame 1 immediately (one 25KB still),and the video dissolves in on top of an identical picture,so the swap is invisible. Stacking: canvas (auto,earlier in DOM) < video (0) < copy (auto,later in DOM) < loader (3) < hero dim (8). ----------------------------------------------------------------------------- *//* ── dd-hero-actions ───────────────────────────────────────────────────── Login moved out of the header nav (where it was invisible until the logo settled) and sits beside the demo CTA in the hero. The demo action was a