/* * PatientWing design system. * * Every value here was read out of the Figma file "For Hamza's Team" * (OgbV8fQYBTjnPl1Y7Dx5Hd) with get_design_context, not measured off a * screenshot. The custom property names match the Figma style names so a * later change in the file can be found here by searching for the token. */ :root { /* Lavender */ --pw-primary: #7A44EC; /* Lavender/Primary/600 */ --pw-lav-50: #F7F4FE; /* Lavender/Secondary/50 */ --pw-lav-200: #E1D5FB; /* Lavender/Secondary/200 */ --pw-lav-700: #6833D2; /* Neutrals */ --pw-dark: #181628; /* Neutral/Dark */ --pw-grey-1: #595F6B; /* Neutral/Grey 1 - body copy */ --pw-grey-2: #9498A1; /* Neutral/Grey 2 - labels, placeholders */ --pw-white: #FFFFFF; --pw-stroke: #E4E7EC; /* Strokes/Gray/1 */ --pw-stroke-soft: #D8DCE6; /* Effects */ --pw-shadow: 0 4px 16px 0 rgba(28, 24, 40, 0.05); /* gray/5 */ --pw-btn-shadow: 0 1.5px 0.75px rgba(0, 0, 0, 0.16); --pw-gradient: linear-gradient(114.94deg, #7A44EC 5.44%, #6833D2 83.86%); /* Gradient/1 */ /* Sampled off the Figma frame itself. Both are flat fills, not gradients. */ --pw-page-bg: #FAF9FC; --pw-band-bg: #F5F2FC; /* the newsletter band */ --pw-lav-100: #EFE8FD; /* Lavender/Secondary/100 - navbar top bar */ --pw-fade: #FAF9FD; /* the colour the hero image fades into */ --pw-nav-shadow: 0 8px 12px rgba(28, 24, 40, 0.11); /* Metrics */ --pw-shell: 1240px; --pw-radius: 16px; --pw-radius-lg: 24px; --pw-gutter: clamp(16px, 5vw, 100px); } /* --- scoped reset -------------------------------------------------------- Divi wraps module output in a section, row and column that each carry their own padding and an 80% content width. A screen laid out against a 1240px shell has to start from a container that really is 1240 wide, so those wrappers are neutralised here once rather than in every page's Custom CSS. */ .pwd-screen, .pwd-newsletter { box-sizing: border-box; width: 100%; } .pwd-screen *, .pwd-screen *::before, .pwd-screen *::after, .pwd-newsletter *, .pwd-newsletter *::before, .pwd-newsletter *::after { box-sizing: border-box; } .et_pb_module .pwd-screen, .et_pb_module .pwd-newsletter { margin: 0; } .pwd-screen, .pwd-newsletter { font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--pw-dark); -webkit-font-smoothing: antialiased; } .pwd-screen p, .pwd-screen h1, .pwd-screen h2, .pwd-screen h3, .pwd-newsletter p, .pwd-newsletter h2 { margin: 0; padding: 0; } /* The design is a 1440 frame with 100px margins, so the content column is exactly 1240. The gutter has to be added to the max-width rather than taken out of it -- capping at 1240 and then padding inside leaves 1096 of content and every measurement downstream is 12% narrow. */ .pwd-shell { max-width: calc(var(--pw-shell) + (2 * var(--pw-gutter))); margin-left: auto; margin-right: auto; padding-left: var(--pw-gutter); padding-right: var(--pw-gutter); width: 100%; } .pwd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .pwd-i { display: block; flex: none; } /* The UA rule for [hidden] is display:none, which any author `display` on the same element beats. Every card here is display:flex, so hiding one from the script did nothing at all: the seventh card and the Load More button were both on screen at once. */ .pwd-screen [hidden] { display: none !important; } /* --- buttons ------------------------------------------------------------- One 36px pill in three styles, as the Button component defines them: Primary is the gradient with a 1px light top edge, Surface is the Lavender/200 outline the "Load More Profiles" button uses. */ .pwd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-width: 112px; padding: 0 16px; border-radius: 100px; border: 0; cursor: pointer; /* `inherit` reaches Divi's body font, not the design's. 135:777 and every other button in 1:3795 is Plus Jakarta Sans. */ font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; text-decoration: none; white-space: nowrap; } .pwd-btn--primary { background-image: var(--pw-gradient); border-top: 1px solid rgba(255, 255, 255, 0.2); filter: drop-shadow(var(--pw-btn-shadow)); color: var(--pw-white); font-weight: 500; font-size: 14px; line-height: normal; } .pwd-btn--primary:hover, .pwd-btn--primary:focus-visible { color: var(--pw-white); opacity: 0.94; } .pwd-btn--surface { background: transparent; border: 1px solid var(--pw-lav-200); color: var(--pw-primary); font-weight: 700; font-size: 16px; line-height: 1.5; } .pwd-btn--surface:hover, .pwd-btn--surface:focus-visible { background: var(--pw-lav-50); color: var(--pw-primary); } .pwd-btn--outline { background: var(--pw-white); border: 1px solid var(--pw-stroke); color: var(--pw-dark); font-weight: 600; font-size: 14px; } .pwd-screen a:focus-visible, .pwd-screen button:focus-visible, .pwd-newsletter a:focus-visible, .pwd-newsletter button:focus-visible { outline: 2px solid var(--pw-primary); outline-offset: 2px; } /* --- page shell ---------------------------------------------------------- */ .pwd-screen { background: var(--pw-page-bg); padding-bottom: 40px; } .pwd-screen--flush { padding-bottom: 0; } /* --- hero ---------------------------------------------------------------- Read straight off the frame, because this is the part a screenshot cannot tell you and the part that was wrong: navbar y 24 .. 130 (1240 wide, 106 tall) title y 200 .. 313 in a 611-wide column at x=100 image y 200 .. 483 628 wide, its right edge on the shell's at 1340 panel y 353 .. so the panel covers the bottom 130px of the image The image is therefore NOT a grid cell beside the text -- it is behind, and the panel is lifted over it. Laying it out as two grid columns with a 40px gap made the image 20px narrow and pushed the panel 170px too far down, which is why the whole photograph was visible where the design shows only its top. */ .pwd-hero { position: relative; box-sizing: content-box; padding-top: 200px; /* the frame's own y for the title */ height: 153px; /* title top 200 -> panel top 353 */ } .pwd-hero__text { max-width: 49.28%; } /* 611 of 1240 */ .pwd-hero__title { font-size: 48px; font-weight: 700; line-height: 1.2; color: var(--pw-dark); text-transform: capitalize; } .pwd-hero__sub { margin-top: 28px !important; font-size: 18px; font-weight: 400; line-height: 1.5; color: var(--pw-grey-1); } /* Only the top-right corner is rounded, and the image fades out along its left edge into the page colour, so it reads as bleeding off the corner of the layout rather than as a photograph in a box. Both come straight from the Hero-Right node and neither is visible in a screenshot. */ .pwd-hero__media { position: absolute; z-index: 0; top: 200px; right: 0; width: 50.65%; /* 628 of 1240 */ aspect-ratio: 628 / 283; border-radius: 0 var(--pw-radius-lg) 0 0; overflow: hidden; } .pwd-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .pwd-hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient( -89.96deg, rgba(250, 249, 253, 0) 76.78%, rgba(250, 249, 253, 0.535) 85.94%, var(--pw-fade) 100.11% ); } /* --- the white panel a listing sits in ----------------------------------- */ .pwd-panel { position: relative; z-index: 1; background: var(--pw-white); border-radius: var(--pw-radius-lg); box-shadow: var(--pw-shadow); padding: 40px; } /* --- filter row ---------------------------------------------------------- */ .pwd-filters { display: flex; gap: 16px; align-items: flex-end; } .pwd-field { display: flex; flex-direction: column; gap: 6px; flex: 1 0 0; min-width: 0; } .pwd-field--narrow { flex: 0 0 400px; } .pwd-label { font-size: 13px; font-weight: 600; line-height: normal; color: var(--pw-dark); } .pwd-label--muted { font-size: 12px; line-height: 1.5; color: var(--pw-grey-2); text-transform: uppercase; } .pwd-label--tight { line-height: normal; } .pwd-input { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; background: var(--pw-white); border: 1px solid var(--pw-stroke); border-radius: 8px; } .pwd-input:focus-within { border-color: var(--pw-primary); } .pwd-input input, .pwd-input select { flex: 1 0 0; min-width: 0; height: 100%; border: 0; background: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; font-family: inherit; font-size: 14px; font-weight: 400; color: var(--pw-dark); } .pwd-input input::placeholder { color: var(--pw-grey-2); } .pwd-input--select { justify-content: space-between; cursor: pointer; position: relative; } .pwd-input--select .pwd-i { color: var(--pw-grey-1); } /* --- the dropdown -------------------------------------------------------- The closed control is the design's own 40px field. The open panel is not in the Figma file at all -- there is no open state for it -- so it is built from the vocabulary the rest of the file uses: the field's 8px radius and Strokes/Gray/1 border, the menu shadow the DropdownItem component carries, and the field's own 14px type. It replaces the native on the page's own background -- so the browser drew its own control, and on Windows its popup is a serif face on a blue highlight beside a screen that is otherwise entirely the design's. Check 76 again: a component's own look belongs on the component. */ .pwd-ch-sort { position: relative; /* the enhanced menu hangs off this */ display: inline-flex; align-items: center; gap: 6px; min-width: 128px; height: 37px; padding: 8px 12px; background: #fff; border: 1px solid #E4E7EC; border-radius: 8px; cursor: pointer; font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; line-height: 1.5; } .pwd-ch-sort__lead { flex: none; font-weight: 400; color: #595F6B; } .pwd-ch-sort select { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: 600; color: #181628; cursor: pointer; } .pwd-ch-sort select:focus { outline: none; } .pwd-ch-sort:focus-within { border-color: #7A44EC; } .pwd-ch-sort__chev { flex: none; display: inline-flex; color: #595F6B; } /* Once the script has replaced the native popup, the button IS the control and the lead sits beside it. */ .pwd-ch-sort.is-enhanced .pwd-select__btn { flex: 1 1 auto; font-weight: 600; color: #181628; } .pwd-ch-sort.is-enhanced .pwd-ch-sort__chev { display: none; } .pwd-ch-sort .pwd-select__menu { /* Divi gives every row its own stacking context, so a menu that only competes inside its own row opens behind the cards below it. */ z-index: 60; left: auto; right: 0; min-width: 160px; } /* This control is not inside .pwd-screen, so the option reset that lives there never reached it -- Divi puts a disc and a 1em indent on every li on the site. Stated on the component, which is where it belongs. */ .pwd-ch-sort .pwd-select__menu, .pwd-ch-sort .pwd-select__opt { list-style: none !important; list-style-type: none !important; } .pwd-ch-sort .pwd-select__opt::marker { content: none; } .pwd-ch-sort .pwd-select__opt::before { content: none !important; display: none !important; } .pwd-ch-sort .pwd-select__opt { margin: 0 !important; padding: 9px 12px !important; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 1.5; color: #595F6B; } /* 1:2784 -- the line under the heading is a live count, not a slogan. */ .pwd-ch-count { font-size: 14px; font-weight: 400; color: #595F6B; } /* --- Diagnosis Journey 171:1277 ----------------------------------------- The designer replaced this band: it was a heading over the entry's prose and it is now a seven-step timeline -- numbered circles on a purple line, each over a white 167 x 160 card. (The node id changed with it, 57:441 -> 171:1277, which is why nothing noticed: every OTHER section on the frame kept its id and its height.) It is one Divi Text module, so the client edits the words in the Visual Builder the way they already edit At A Glance. Two things make it safe for them to add or remove a step: the number is a CSS counter, not typed -- delete step 3 and 4 becomes 3; the connector is drawn by each step to the NEXT one, so it is always exactly as long as there are steps, whatever the client leaves. */ .pwd-sc-journey .et_pb_text_inner { display: flex; align-items: flex-start; gap: var(--pwd-step-gap, 12px); counter-reset: pwd-step; } .pwd-sc-step { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; counter-increment: pwd-step; } /* 171:1281 -- one line, from this circle's centre to the next one's. */ .pwd-sc-step:not(:last-child)::after { content: ""; position: absolute; top: 17px; /* the circle's own centre */ left: 50%; width: calc(100% + var(--pwd-step-gap, 12px)); height: 2px; background: #7A44EC; z-index: 0; } /* 171:1285 -- 36px, white, a 2px Lavender/600 ring, the number inside it. */ .pwd-sc-step::before { content: counter(pwd-step); position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid #7A44EC; display: flex; align-items: center; justify-content: center; font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; font-weight: 700; line-height: 1; color: #7A44EC; } /* 171:1513 -- the card starts 52 down, which is 36 of circle and 16 of gap. */ .pwd-sc-stepcard { position: relative; z-index: 1; margin-top: 16px; width: 100%; min-height: 160px; padding: 20px 14px; background: #fff; border: 1.5px solid #EFE8FD; border-radius: 16px; text-align: center; } .pwd-sc-steptitle { display: block; font-size: 16px; font-weight: 500; line-height: 1.5; color: #181628; margin-bottom: 12px; } .pwd-sc-stepcopy { display: block; font-size: 14px; font-weight: 500; line-height: 1.5; color: #595F6B; } /* 171:1279 -- Heading/3, and 48 above the timeline. */ .pwd-sc-journeyhead h2 { font-size: 40px !important; line-height: 1.2em !important; padding-bottom: 0; } /* Seven 167s need the frame's own 1240. Below it the row scrolls rather than wrapping: a timeline broken onto two lines stops reading as a sequence, and the frame draws no tablet to copy. */ @media (max-width: 1239px) { .pwd-sc-journey .et_pb_text_inner { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .pwd-sc-journey .et_pb_text_inner::-webkit-scrollbar { display: none; } .pwd-sc-step { flex: 0 0 167px; } } /* 171:1285 is 36 including its 2px ring: without border-box the circle is 40 and every card sits 4 low. The frame puts the card at 52 -- 36 of circle and the container's own 16. */ .pwd-sc-step::before { box-sizing: border-box; } .pwd-sc-stepcard { box-sizing: border-box; } /* ========================================================================= THE BLOG, a post with no picture yet. Somebody writes the article before they choose the photograph, so this is the ordinary state of a new post and not an edge case. src="" resolves to the page's own URL -- the browser fetches the whole document as an image and draws a broken-image glyph in the middle of the card -- so the token hands back a transparent pixel and the card says so instead. A flat lavender tile, which reads as a card waiting for a picture rather than a card that has failed. The card keeps its size either way, so a picture-less post does not knock the row it is in out of line. ========================================================================= */ .pwd-blogcard--nophoto .et_pb_image .et_pb_image_wrap { background: var(--pw-lav-50); box-shadow: inset 0 0 0 1px var(--pw-stroke); } .pwd-blogcard--nophoto .et_pb_image img { opacity: 0; } /* The article's own hero is a 331 circle; empty, it is the same tile. */ .pwd-bs__photo .et_pb_image_wrap:has(img[src^="data:image/gif"]) { background: var(--pw-lav-50); box-shadow: inset 0 0 0 1px var(--pw-stroke); } /* ============================================================================= THE NAVBAR DROPDOWN OVERLAYS THE PAGE. Marker: pwd-nav-overlay-20260903 This SUPERSEDES the decision recorded a few thousand lines above, where `.pwd-nav__panel` is introduced with the comment "inside the navbar card so the card grows". The card did grow -- and it took the whole page with it. Hovering any menu item moved the hero down 197px, and 227px on Products, on every route on the site; the document's own height moved with it. A dropdown is an overlay, and an overlay does not occupy space. ========================================================================= */ /* `.pwd-nav` already carries a drop-shadow filter, which is enough to make it the containing block for an absolute child -- but a layout that depends on a filter side-effect is a layout nobody can read, so say it. */ .pwd-nav { position: relative; } /* A direct child of `.pwd-nav`, so 100% is the bottom of the whole card: the panel hangs under the bar exactly where it did, and the bar keeps its own 106px whatever the panel holds. The filter above draws one shadow round the union of the two, which is what makes them read as a single card. */ .pwd-nav__panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 3; } /* 161:2501's open states draw the bar and the panel as one card, so the seam between them is square. Neither selector names a dropdown key -- the keys are slugs of the client's own words, and one they add tomorrow has a key no stylesheet could know. The click path sets aria-expanded on the trigger; the hover path is CSS only, and has to hold the panel open while the pointer is inside it too. */ .pwd-nav:has(.pwd-nav__trigger[aria-expanded="true"]) .pwd-nav__main { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /* nav-click 2026-09-10: squared only while a panel is really open (aria-expanded, above). */ /* Below the frame's own width the panel can be taller than what is left of the screen, and an overlay that runs off the bottom cannot be read. It scrolls inside itself rather than growing the page. */ @media (max-width: 980px) { .pwd-nav__panel { max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; } } /* --- the timeline, now drawn from the entry's own field ------------------- PW Journey renders its own row rather than living inside a Text module, so the rules that named `.pwd-sc-journey .et_pb_text_inner` are stated for `.pwd-sc-steps` as well. Everything else -- the counter, the connector, the card -- is unchanged and already adapts to however many steps there are. */ .pwd-sc-steps { display: flex; align-items: stretch; gap: var(--pwd-step-gap, 12px); counter-reset: pwd-step; } .pwd-sc-steps .pwd-sc-step { justify-content: flex-start; } /* A condition's own steps are not all the same length, and the frame's cards are one height per row -- so the card grows and every card in the row grows with it rather than the copy being clipped. */ .pwd-sc-steps .pwd-sc-stepcard { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; } .pwd-sc-jhead { margin: 0 0 48px; padding: 0; font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 40px; font-weight: 700; line-height: 1.2; color: #181628; } /* The sentence that introduces the list, and anything written after it. */ .pwd-sc-jintro, .pwd-sc-joutro { font-size: 18px; font-weight: 400; line-height: 1.5; color: #595F6B; } .pwd-sc-jintro { margin: -24px 0 32px; } .pwd-sc-joutro { margin: 32px 0 0; } .pwd-sc-jintro p:last-child, .pwd-sc-joutro p:last-child { margin-bottom: 0; padding-bottom: 0; } @media (max-width: 1239px) { .pwd-sc-steps { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .pwd-sc-steps::-webkit-scrollbar { display: none; } .pwd-sc-steps .pwd-sc-step { flex: 0 0 167px; } } /* A condition draws as many steps as its own field holds -- six on ANCA, four on CIDP -- and the frame's 167 is simply what SEVEN of them come to across the 1240. Letting four take a quarter of the row each puts a 300-wide card on one condition beside a 167 one on the next, so the step is capped and the row centred: every timeline on the site then reads the same shape whatever the entry holds, which is the point of reading it from the CMS in the first place. */ .pwd-sc-steps { justify-content: center; } .pwd-sc-steps .pwd-sc-step { max-width: 280px; } /* Epilepsy's field holds TEN steps and Eosinophilic Esophagitis three, so the row has to hold both without squashing one or stranding the other. Each step keeps a floor of 150 and the row scrolls past it -- and the centring is auto margins on the first and last rather than justify-content, because a centred flex row that overflows is clipped at its left edge and the first step's circle disappears behind it. */ .pwd-sc-steps { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .pwd-sc-steps::-webkit-scrollbar { display: none; } .pwd-sc-steps .pwd-sc-step { flex: 1 1 150px; min-width: 150px; } .pwd-sc-steps .pwd-sc-step:first-child { margin-left: auto; } .pwd-sc-steps .pwd-sc-step:last-child { margin-right: auto; } /* ========================================================================== Single investigator profile -- Figma 211:1294, in the SECOND file key 14oEdpytJKMVIJv3CXSJcJ. Every rule below carries the node it was read from. What is in here is only what a Divi module cannot say about itself: how a photograph is cropped, what a card does about the card beside it, and the three-stop wash Divi's own gradient control cannot express. Every colour, word, link, size and spacing a person would go looking for is a module or column setting in the Visual Builder -- see mk-single-inv.php. ========================================================================== */ /* ------------------------------------------------------------- hero --- */ /* 211:1297 -- 1240 wide, 694 of text beside 506 of card, 40 apart. Divi's own 1_2,1_2 is 48.5/48.5, so the split is stated here. */ .pwd-iv-herorow { display: grid !important; grid-template-columns: 694px 506px; gap: 40px; align-items: center; } /* Divi clears a row with ::before and ::after. In a flex or grid row each becomes an item and takes a gap -- check 50. */ .pwd-iv-herorow::before, .pwd-iv-herorow::after { display: none !important; } .pwd-iv-herorow > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; } /* 211:1298 -- the 48 the frame puts under the text is the COLUMN's, not the section's: on the section it would have pushed the meta band down. */ .pwd-iv-heroleft { align-self: start; } /* 211:1300 -- a module's text colour never reaches its links, and Divi writes its own a{} after this file. The third time this project has met it. */ .pwd-iv-back a, .pwd-iv-back a:hover { color: var(--pw-primary) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .pwd-iv-back a .pwd-i { transform: rotate(180deg); } /* 211:1302 -- Accent/2: Spectral Bold 48 at 1.2, tracking -2. */ .pwd-iv-title h1 { letter-spacing: -2px; padding-bottom: 0 !important; /* 211:1302 is TITLE case. It has to be a text-transform rather than the module's own words, because the words are the entry's title -- the client's data -- and Divi's font control has no capitalize in it (check 105). The stories hub and the blog h1 both do the same. */ text-transform: capitalize; } /* ---------------------------------------------------- the hero card --- */ /* 211:1311 -- the card IS the column, so its fill, hairline, corners and shadow are Divi column settings. What cannot be a setting is the two-up shape: 135 of photograph, 24, then the four lines, 8 apart. */ .pwd-iv-heroright { display: grid !important; grid-template-columns: 135px minmax(0, 1fr); column-gap: 24px; row-gap: 8px; align-content: center; padding: 24px !important; overflow: hidden; } .pwd-iv-heroright > .pwd-iv-photo { grid-column: 1; grid-row: 1 / span 4; align-self: center; margin: 0 !important; } /* 211:1313 -- 135 x 163, corners 16. The crop has to reach the WRAPPER and not only the : Divi gives both an explicit height taken from the file's own proportions, so cropping the image alone leaves the wrapper at the photograph's natural height and the column follows it (check 63). */ .pwd-iv-photo .et_pb_image_wrap, .pwd-iv-photo a, .pwd-iv-photo img { display: block !important; width: 135px !important; height: 163px !important; max-width: 135px !important; border-radius: 16px !important; overflow: hidden; } .pwd-iv-photo img { object-fit: cover; object-position: center 30%; } .pwd-iv-heroright > .et_pb_module { margin: 0 !important; } .pwd-iv-name h3, .pwd-iv-name h2 { padding-bottom: 0 !important; } /* 211:1322 -- the institution line: a 16px mark, 8 from its words. */ .pwd-iv-inst .et_pb_text_inner { display: flex; align-items: center; gap: 8px; } .pwd-iv-inst .pwd-i { flex: 0 0 16px; width: 16px; height: 16px; color: var(--pw-primary); } /* Three of the nine have no institution in the export and one has no short specialty. A line with nothing in it is not drawn, rather than leaving a gap where the frame has a value. One :has(), no nesting -- check 96. */ .pwd-iv-heroright .et_pb_text:has(.pwd-iv-v:empty) { display: none !important; } /* --------------------------------------------------------- meta bar --- */ /* 211:1326 -- 68 tall: 16 of padding over a 36 row, white, a hairline under it and the frame's own purple shadow. */ .pwd-iv-metaband { border-bottom: 1px solid var(--pw-stroke); box-shadow: 0 2px 10px -4px rgba(107, 51, 235, 0.15); } .pwd-iv-meta .et_pb_text_inner > .pwd-iv-metarow, .pwd-iv-metarow { display: flex; align-items: center; gap: 16px; min-height: 36px; } .pwd-iv-metaitem { display: flex; align-items: flex-start; gap: 8px; } /* 211:1329 -- a 32 x 30 tile, corners 10, holding a 20px glyph. */ .pwd-iv-metaicon { flex: 0 0 32px; width: 32px; height: 30px; border-radius: 10px; background: var(--pw-lav-10, #F7F5FA); display: flex; align-items: center; justify-content: center; color: var(--pw-grey-2); } .pwd-iv-metaicon .pwd-i { width: 20px; height: 20px; } .pwd-iv-metatext { display: flex; flex-direction: column; gap: 2px; } /* 211:1333 / 211:1334 -- 11 Regular grey over 14 SemiBold dark, both at the frame's automatic leading rather than at a token line height. */ .pwd-iv-metalabel { font: 400 11px/1.27 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-2); } .pwd-iv-metaval, .pwd-iv-metaval a { font: 600 14px/1.27 'Plus Jakarta Sans', sans-serif; color: var(--pw-dark) !important; text-decoration: none; } /* 211:1335 -- 1 x 36. */ .pwd-iv-metarule { flex: 0 0 1px; width: 1px; align-self: stretch; min-height: 36px; background: var(--pw-stroke); } /* Two of the nine investigators carry no condition and none of them is missing a date, so only the first item can be empty -- and when it is, the rule beside it would be a hairline against nothing. */ .pwd-iv-metaitem:has(> .pwd-iv-metatext > .pwd-iv-metaval:empty) { display: none !important; } .pwd-iv-metarow:has(> .pwd-iv-metaitem:first-child > .pwd-iv-metatext > .pwd-iv-metaval:empty) .pwd-iv-metarule { display: none !important; } /* ----------------------------------------------------------- article --- */ /* 211:1344 -- an 856 article beside a 320 card, 64 apart. */ .pwd-iv-storyrow { display: grid !important; grid-template-columns: 856px 320px; gap: 64px; align-items: start; } .pwd-iv-storyrow::before, .pwd-iv-storyrow::after { display: none !important; } .pwd-iv-storyrow > .et_pb_column { width: auto !important; margin: 0 !important; float: none !important; } /* 211:1347 / 211:1348 -- the client's own article, under the frame's own type. The prose is one wysiwyg field, so the headings inside it are the client's and their level varies by entry (h4 on some, h5 on others) -- every level is given the frame's Heading/6. Divi gives every heading `padding-bottom: 10px` and every paragraph `padding-bottom: 1em`, both from selectors carrying an id, so both have to be said with !important or the band runs 10px long per heading. */ .pwd-iv-prose .et_pb_text_inner > h1, .pwd-iv-prose .et_pb_text_inner > h2, .pwd-iv-prose .et_pb_text_inner > h3, .pwd-iv-prose .et_pb_text_inner > h4, .pwd-iv-prose .et_pb_text_inner > h5, .pwd-iv-prose .et_pb_text_inner > h6 { font: 700 24px/1.4 'Plus Jakarta Sans', sans-serif; color: var(--pw-dark); margin: 40px 0 16px !important; padding: 0 !important; letter-spacing: 0; } .pwd-iv-prose .et_pb_text_inner > *:first-child { margin-top: 0 !important; } .pwd-iv-prose .et_pb_text_inner > p { font: 500 18px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-1); margin: 0 0 16px !important; padding: 0 !important; } .pwd-iv-prose .et_pb_text_inner > p:last-child { margin-bottom: 0 !important; } .pwd-iv-prose .et_pb_text_inner a { color: var(--pw-primary) !important; } .pwd-iv-prose .et_pb_text_inner ul, .pwd-iv-prose .et_pb_text_inner ol { margin: 0 0 16px; padding: 0 0 0 1.25em; list-style-position: outside; } .pwd-iv-prose .et_pb_text_inner li { font: 500 18px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-1); padding-bottom: 0 !important; } .pwd-iv-prose .et_pb_text_inner sup { font-size: 60%; } .pwd-iv-prose .et_pb_text_inner img { border-radius: 16px; height: auto; } /* -------------------------------------------------------- pull quote --- */ /* 211:1355 -- corners 24, a 1px #EFE8FD edge, 32 of padding. Those three are the module's own settings. The wash is here because it is a three-stop gradient and Divi's own control expresses two. */ .pwd-iv-quote { background: linear-gradient(90deg, rgba(245, 243, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 55%, rgba(245, 243, 255, 0.7) 100%); margin: 40px 0 !important; } .pwd-iv-quote .et_pb_text_inner { display: flex; flex-direction: column; gap: 12px; } .pwd-iv-quote .et_pb_text_inner > p { margin: 0 !important; padding: 0 !important; } /* 211:1357 -- the mark is 24 and it is the frame's own purple. */ .pwd-iv-qmark { display: block; color: var(--pw-primary); line-height: 0; } .pwd-iv-qmark .pwd-i { width: 24px; height: 24px; } /* 211:1359 -- Accent/5: Spectral SemiBold Italic 24 at 1.4. */ .pwd-iv-qtext { font: italic 600 24px/1.4 'Spectral', Georgia, serif; color: var(--pw-dark); margin: 0 !important; padding: 0 !important; } /* 211:1362 -- 14 Regular grey, at the frame's automatic leading. */ .pwd-iv-qby { display: block; font: 400 14px/1.29 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-2); } /* No collection on this site has a quote column, so the quote is the first sentence the person is quoted saying in their own article -- and four of the nine articles contain no quotation at all. An empty quote card is worse than none, so it is not drawn. */ .pwd-iv-quote:has(.pwd-iv-qtext:empty) { display: none !important; } /* -------------------------------------------------------- about card --- */ /* 211:1369 -- 320 x 310, white, a hairline, corners 16, 24 of padding, its parts 16 apart. All of that is the COLUMN's own Divi settings; what is here is the header's shape and the avatar's crop. */ .pwd-iv-about > .et_pb_module { margin: 0 0 16px !important; } .pwd-iv-about > .et_pb_module:last-child { margin-bottom: 0 !important; } .pwd-iv-abouthead .et_pb_text_inner { display: flex; align-items: center; gap: 12px; } /* 211:1372 -- a 64 circle on a 0.8px hairline. */ .pwd-iv-aboutpic { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 64px; border: 0.8px solid var(--pw-stroke); overflow: hidden; display: block; } .pwd-iv-aboutpic img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; border-radius: 64px; } .pwd-iv-aboutwho { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* 211:1374 / 211:1375 -- 16 Bold dark over 12 SemiBold purple. */ .pwd-iv-aboutname { font: 700 16px/1.25 'Plus Jakarta Sans', sans-serif; color: var(--pw-dark); } .pwd-iv-aboutkind { font: 600 12px/1.25 'Plus Jakarta Sans', sans-serif; color: var(--pw-primary); } /* 211:1376 -- 14 Regular at 1.6. */ .pwd-iv-aboutbio .et_pb_text_inner, .pwd-iv-aboutbio .et_pb_text_inner p { font: 400 14px/1.6 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-1); margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------- the two big cards --- */ /* 211:1378 and 211:1403 -- 1240 wide, corners 24, a 1px edge, 32 of padding. Those are the ROW's settings. The wash is the same three-stop one, at 0.2 on the conditions card and 0.7 on the stories card. */ .pwd-iv-condcard, .pwd-iv-storiescard { background: linear-gradient(90deg, rgba(245, 243, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 55%, rgba(245, 243, 255, 0.7) 100%) !important; } .pwd-iv-condcard { background: linear-gradient(90deg, rgba(245, 243, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 55%, rgba(245, 243, 255, 0.2) 100%) !important; } .pwd-iv-condcard > .et_pb_column, .pwd-iv-storiescard > .et_pb_column { width: 100% !important; margin: 0 !important; } /* 211:1379 / 211:1405 -- an 18px mark, 8 from an 18 SemiBold purple label. */ .pwd-iv-eyebrow .et_pb_text_inner { display: flex; align-items: center; gap: 8px; } .pwd-iv-eyebrow .pwd-i { flex: 0 0 18px; width: 18px; height: 18px; color: var(--pw-primary); } .pwd-iv-eyebrow .et_pb_text_inner, .pwd-iv-eyebrow .et_pb_text_inner span { font: 600 18px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-primary); } /* 211:1386 / 211:1387 -- the condition's own name and its own summary. */ .pwd-iv-condname .et_pb_text_inner { font: 700 18px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-dark); } .pwd-iv-condsum .et_pb_text_inner { font: 400 16px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-1); } .pwd-iv-condname .et_pb_text_inner *, .pwd-iv-condsum .et_pb_text_inner * { padding-bottom: 0 !important; margin: 0 !important; } /* The gaps the frame states between the eyebrow, the pair of lines and the rows: 24 / 12 / 24. Each is also the module's own margin setting, which is where a person looks for it -- but Divi writes no CSS at all for a module inside a Library layout and its margins on a row's children are rewritten as a shorthand, so these are stated (check 79 and check 67). */ .pwd-iv-condcard .pwd-iv-eyebrow { margin: 0 0 24px !important; } .pwd-iv-condcard .pwd-iv-condname { margin: 0 0 12px !important; } .pwd-iv-condcard .pwd-iv-condsum { margin: 0 0 24px !important; } .pwd-iv-storiescard .pwd-iv-eyebrow { margin: 0 0 24px !important; } .pwd-iv-storiescard .pwd-iv-storygrid { margin: 0 0 24px !important; } /* The condition's name and summary are the referenced entry's own fields, so an investigator with no condition draws neither -- and then the pair of lines would be 36px of nothing above the rows. */ .pwd-iv-condname:has(.et_pb_text_inner:empty), .pwd-iv-condsum:has(.et_pb_text_inner:empty) { display: none !important; } /* ------------------------------------------- the repeated card, twice --- */ /* Both of the grids below draw a Divi Library layout once per entry, so every word, photograph, colour and link inside a card is the client's in the Visual Builder and "two cards or three" is one number on the module. What a module cannot say is what a card does about the card beside it. */ .pwd-iv-condgrid .cms-list, .pwd-iv-storygrid .cms-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; margin: 0 !important; } /* 211:1389 -- Support Item Row: 580 x 105, white, a 1px #EFE8FD edge, corners 16, 20 of padding; a 40 badge, the words, and a 14 arrow held to the top-right. */ .pwd-iv-condgrid .cms-card { background: var(--pw-white); border: 1px solid var(--pw-lav-100); border-radius: 16px; padding: 20px; min-height: 105px; box-sizing: border-box; } /* Divi's front-end script wraps every rendered layout in
AFTER the page loads, so a rule written against the response stops matching the moment the page finishes -- check 31. */ .pwd-iv-condgrid .cms-card > div, .pwd-iv-condgrid .cms-card .et_pb_section, .pwd-iv-condgrid .cms-card .et_pb_row, .pwd-iv-condgrid .cms-card .et_pb_row > .et_pb_column { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; } .pwd-iv-condgrid .cms-card .et_pb_row > .et_pb_column { display: grid; grid-template-columns: 40px minmax(0, 1fr) 14px; column-gap: 16px; row-gap: 2px; align-items: start; } .pwd-iv-condgrid .cms-card .et_pb_module { margin: 0 !important; } .pwd-ivcr-badge { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; background: var(--pw-lav-50); display: flex !important; align-items: center; justify-content: center; color: var(--pw-primary); } .pwd-ivcr-badge .et_pb_text_inner { line-height: 0; } .pwd-ivcr-badge .pwd-i { width: 20px; height: 20px; } .pwd-ivcr-title { grid-column: 2; grid-row: 1; } .pwd-ivcr-title .et_pb_text_inner, .pwd-ivcr-title a { font: 700 14px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-dark) !important; text-decoration: none; } .pwd-ivcr-sum { grid-column: 2; grid-row: 2; } .pwd-ivcr-sum .et_pb_text_inner { font: 500 14px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pwd-ivcr-arrow { grid-column: 3; grid-row: 1; } .pwd-ivcr-arrow a { display: block; color: var(--pw-primary) !important; line-height: 0; } .pwd-ivcr-arrow .pwd-i { width: 14px; height: 14px; } /* 211:1410 -- Story Card: 580 x 116, white, a 1px #F7F5FA edge, corners 16, 16 of padding; an 80 portrait with corners 12, then the words 16 from it. */ .pwd-iv-storygrid .cms-card { background: var(--pw-white); border: 1px solid #F7F5FA; border-radius: 16px; padding: 16px; min-height: 116px; box-sizing: border-box; } .pwd-iv-storygrid .cms-card > div, .pwd-iv-storygrid .cms-card .et_pb_section, .pwd-iv-storygrid .cms-card .et_pb_row, .pwd-iv-storygrid .cms-card .et_pb_row > .et_pb_column { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: none !important; } .pwd-iv-storygrid .cms-card .et_pb_row > .et_pb_column { display: grid; grid-template-columns: 80px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; } .pwd-iv-storygrid .cms-card .et_pb_module { margin: 0 !important; } .pwd-ivsr-pic { grid-column: 1; grid-row: 1 / span 3; } .pwd-ivsr-pic .et_pb_image_wrap, .pwd-ivsr-pic a, .pwd-ivsr-pic img { display: block !important; width: 80px !important; height: 80px !important; max-width: 80px !important; border-radius: 12px !important; overflow: hidden; } .pwd-ivsr-pic img { object-fit: cover; object-position: center 30%; } .pwd-ivsr-title { grid-column: 2; grid-row: 1; } .pwd-ivsr-title .et_pb_text_inner, .pwd-ivsr-title a { font: 700 14px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-dark) !important; text-decoration: none; } .pwd-ivsr-sum { grid-column: 2; grid-row: 2; } .pwd-ivsr-sum .et_pb_text_inner { font: 400 14px/1.5 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* 211:1416 -- the link is 8 under the summary and names the patient. */ .pwd-ivsr-link { grid-column: 2; grid-row: 3; margin-top: 2px !important; } .pwd-ivsr-link a { display: inline-flex; align-items: center; gap: 8px; font: 700 14px/1.2 'Plus Jakarta Sans', sans-serif; color: var(--pw-primary) !important; text-transform: capitalize; text-decoration: none; } .pwd-ivsr-link .pwd-i { width: 16px; height: 16px; } /* 211:1424 -- "view all patient stories": 16 Bold, grey, capitalised. */ .pwd-iv-viewall a { display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1.2 'Plus Jakarta Sans', sans-serif; color: var(--pw-grey-1) !important; text-transform: capitalize; text-decoration: none; } .pwd-iv-viewall .pwd-i { width: 16px; height: 16px; } .pwd-iv-viewall { margin: 0 !important; } /* A control the script hides must not be given a display by this file -- check 82. */ .pwd-iv-hero [hidden], .pwd-iv-story [hidden], .pwd-iv-related [hidden] { display: none !important; } /* --------------------------------------------------------- narrower --- */ /* The frame draws no tablet and no phone, so everything below 1240 is a decision. The rule each time is the frame's own reading order: the text before the portrait, the article before the card beside it. */ @media (max-width: 1279px) { .pwd-iv-herorow, .pwd-iv-storyrow { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); } .pwd-iv-storyrow { gap: 40px; } } @media (max-width: 1023px) { .pwd-iv-herorow, .pwd-iv-storyrow { grid-template-columns: minmax(0, 1fr); gap: 32px; } .pwd-iv-heroleft { padding-bottom: 0 !important; } .pwd-iv-metarow { flex-wrap: wrap; row-gap: 12px; } .pwd-iv-metarule { display: none !important; } } @media (max-width: 899px) { .pwd-iv-condgrid .cms-list, .pwd-iv-storygrid .cms-list { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 599px) { .pwd-iv-heroright { grid-template-columns: minmax(0, 1fr); row-gap: 12px; justify-items: start; } .pwd-iv-heroright > .pwd-iv-photo { grid-row: auto; grid-column: 1; } .pwd-iv-title h1 { font-size: 32px !important; } .pwd-iv-prose .et_pb_text_inner > h1, .pwd-iv-prose .et_pb_text_inner > h2, .pwd-iv-prose .et_pb_text_inner > h3, .pwd-iv-prose .et_pb_text_inner > h4, .pwd-iv-prose .et_pb_text_inner > h5, .pwd-iv-prose .et_pb_text_inner > h6 { font-size: 20px; } .pwd-iv-prose .et_pb_text_inner > p { font-size: 16px; } .pwd-iv-qtext { font-size: 20px; } } /* pwd-iv-end */ /* Divi writes every h2 on the site from a selector carrying an id, so the journey heading computed 32/20 against 171:1279's 40 and the 48 the container leaves under it. One class cannot reach that, and this heading is the module's own rather than a Text module the client sets in the builder -- so it says so outright. */ .pwd-sc-journeyband .pwd-sc-jhead { font-size: 40px !important; line-height: 1.2 !important; margin: 0 0 48px !important; padding-bottom: 0 !important; } .pwd-sc-journeyband .pwd-sc-jintro { margin-top: -24px; } /* ------------------------------------------- Symptom cards + At A Glance */ /* Added 2026-09-03, from 57:354 (SymptomsSection) and 57:331 (AtAGlanceBox). Both bands used to be the same words on all twenty-five conditions -- one because the grid was not built at all and the prose behind it is filled on sixteen of them, the other because four hard-coded lines sat in the Theme Builder body that draws every condition. */ .pwd-symcards { display: grid; grid-template-columns: repeat(var(--pwd-symcols, 4), minmax(0, 1fr)); gap: 16px; /* 57:357 / 57:358 */ margin: 0; padding: 0; list-style: none; } .pwd-symcard { display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 172px; /* 57:359 -- a fixed height in the frame, a floor here: the client's own symptom names run longer than the designer's and a clipped word is worse than a taller card. */ padding: 16px 28px; background: #fff; border: 1px solid #e4e7ec; border-radius: 16px; box-shadow: 0 4px 16px rgba( 28, 24, 40, 0.05 ); text-align: center; } .pwd-symcard__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 8px; border-radius: 12px; background: #f7f4fe; /* Lavender/Secondary/50 */ color: #7a44ec; /* the glyph is stroke-drawn, so this is it */ box-sizing: border-box; } .pwd-symcard__icon svg { display: block; width: 24px; height: 24px; } .pwd-symcard__label { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 500; line-height: 1.5; color: #181628; } @media ( max-width: 1100px ) { .pwd-symcards { grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); } } @media ( max-width: 820px ) { .pwd-symcards { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 520px ) { .pwd-symcards { grid-template-columns: 1fr; } .pwd-symcard { min-height: 0; } } /* At A Glance: the box is a Divi column, and the lines inside it are now the entry's own. An entry with none leaves the module empty, and a heading over a hole is worse than no box. */ .pwd-sc-glance:not( :has( .pwd-sc-gitem ) ) { display: none !important; } /* The lines came out of a Text module until now, so the grid was stated on Divi's .et_pb_text_inner. The module renders the grid element itself. */ .pwd-sc-glancegrid { display: grid; grid-template-columns: repeat( var( --pwd-glancecols, 2 ), minmax( 0, 1fr ) ); gap: 16px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; color: #181628; } @media ( max-width: 640px ) { .pwd-sc-glancegrid { grid-template-columns: 1fr; } } /* A Related band with nothing to relate does not paint. The module returns '' when no tab has a card behind it -- which is now the honest answer on the two conditions the client's own export gives no related stories and no related profiles -- and the Divi section around it still drew its 60px of padding and its fill. Check 49: a module that renders nothing still leaves a section that paints. The row is the tell: .pwd-sc-related is the Related band's own row, and a band that really drew something always has a panel in it. */ .pwd-sc-band:has( > .et_pb_row.pwd-sc-related ):not( :has( .pwd-rel__panel ) ) { display: none !important; } /* 57:356 -- the Symptoms heading is Heading/3, where the other bands on this page are Heading/4. It belongs to the card module now: it used to be the heading argument on [cms_field field="symptoms_summary"], which prints nothing at all on the nine conditions that do not fill that field -- so those pages drew ten cards under no heading. */ .pwd-sc-band .pwd-symh { font-size: 40px; line-height: 1.2; text-transform: capitalize; margin: 0 0 32px !important; } /* pwd-block: cond-tidy-1 */ /* ---------------------------------------------- the condition page, tidied */ /* Added 2026-09-04, from the client reading the live pages beside the frame. */ /* 171:1517 -- the words start at the TOP of a step card. They were centred, so on a condition whose steps are not all the same length the titles sat at six different heights across one row, which is the first thing the eye catches. The card still grows to the tallest in the row. */ .pwd-sc-steps .pwd-sc-stepcard { justify-content: flex-start; } /* The hero search pill drew a second box inside itself: the input's own border is off, but nothing turned off the browser's FOCUS ring, so typing in it put a dark rounded rectangle around the text with the magnifier outside it. The ring is what tells a keyboard user where they are, so it moves to the pill rather than being deleted. */ .pwd-ch-search .cms-filters input[type="search"] { outline: none !important; box-shadow: none !important; } .pwd-ch-search .cms-filters__search:focus-within { border-color: var( --pw-primary ); box-shadow: 0 0 0 3px rgba( 122, 68, 236, 0.15 ); } /* pwd-block: content-cards */ /* -------------------------------------------- PW Content Cards (57:411 / 57:490) */ /* The Types and Treatment bands. The frame draws three cards and two numbered ones; the client's own content runs from two items to thirteen, in groups under their own sub-headings, so the grid wraps and every group starts a new row. Card, icon tile, number and tick are the frame's own values. */ .pwd-cc__h { margin: 0 0 32px !important; padding: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 40px; /* 57:413 / 57:492 Heading/3 */ font-weight: 700; line-height: 1.2; color: #181628; } .pwd-cc__sub { margin: 32px 0 16px !important; padding: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.4; color: #181628; } .pwd-cc > .pwd-cc__sub:first-of-type { margin-top: 0 !important; } .pwd-cc__note { margin: 0 0 20px !important; padding: 0 !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 18px; font-weight: 400; line-height: 1.5; color: #595f6b; } .pwd-cc__grid { display: grid; grid-template-columns: repeat( var( --pwd-cc-cols, 3 ), minmax( 0, 1fr ) ); gap: 16px; /* 57:414 */ margin: 0 0 24px; padding: 0; list-style: none; } .pwd-cc__card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; /* 57:415 */ background: #fff; border: 1px solid #e4e7ec; border-radius: 16px; box-shadow: 0 4px 16px rgba( 28, 24, 40, 0.05 ); } .pwd-cc__icon { display: flex; align-items: center; justify-content: center; width: 48px; /* 57:416 */ height: 48px; margin-bottom: 8px; padding: 12px; border-radius: 12px; background: #f7f4fe; color: #7a44ec; box-sizing: border-box; } .pwd-cc__icon svg, .pwd-cc__icon img { display: block; width: 24px; height: 24px; object-fit: contain; } /* 57:496 -- the numbered card leads with 01 in Lavender/600, 48 tall. */ .pwd-cc__num { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 48px; font-weight: 700; line-height: 1.1; color: #7a44ec; margin-bottom: 16px; } .pwd-cc__title { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 20px; /* 57:420 */ font-weight: 700; line-height: 1.4; color: #181628; } .pwd-cc__sublabel { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; /* 57:421 */ font-weight: 500; line-height: 1.5; color: #7a44ec; } .pwd-cc__body { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; /* 57:422 */ font-weight: 400; line-height: 1.5; color: #595f6b; } /* 57:506 -- "Other supportive care may include", each line on a ticked disc. */ .pwd-cc__ticks { display: grid; grid-template-columns: repeat( auto-fit, minmax( 320px, 1fr ) ); gap: 12px 24px; margin: 0 0 24px; padding: 0; list-style: none; } .pwd-cc__ticks li { display: flex; align-items: flex-start; gap: 12px; margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; color: #595f6b; } .pwd-cc__ticks svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; padding: 4px; border-radius: 50%; background: #efe8fd; color: #7a44ec; box-sizing: border-box; } /* The field that carries no bold-led item keeps the prose it always had, and the prose rules on this page already style it. */ .pwd-cc--prose .cms-block__heading { display: none; /* the module's own heading is above it */ } @media ( max-width: 1100px ) { .pwd-cc__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 720px ) { .pwd-cc__grid { grid-template-columns: 1fr; } .pwd-cc__h { font-size: 32px; } } /* ========================================================================== pwd-full-summary -- 2026-09-09, asked for. The client wrote a 235-character Short Summary and the card showed two lines of four. 229:571 IS a 164-tall card with a two-line summary, so this is a departure from the frame rather than a repair of one, and it is a setting -- PW Blog Grid and PW Blog Featured both carry "Show the whole summary", default on, and turning it off restores the frame. The frame's numbers survive as MINIMA, so a short summary still lines up with 229:571 and only a long one grows. Nothing here pins a height: the grid stretches the cards in a row to the tallest of them, and the footer keeps its own `margin-top: auto`, so the date and the arrow still sit on the card's bottom edge -- which is what the clamp was protecting. The title is here too. It was cut on the same cards (2 lines of 3) and a headline broken mid-word is worse than a summary that stops early; there is no reason to free one and not the other. ========================================================================== */ .pwd-bfull .pwd-blogcard { height: auto !important; min-height: var(--pwd-b-card-h, 164px); } .pwd-bfull .pwd-bc__sum, .pwd-bfull .pwd-bf__sum, .pwd-bfull .pwd-bc__title { display: block !important; -webkit-line-clamp: none !important; line-clamp: none !important; overflow: visible !important; height: auto !important; } /* ========================================================================== pwd-hero-wave -- 2026-09-09, the client's design-QA note on the stories hero: "adjust hero image to match design with static wave". 115:2495 is drawn BETWEEN the photograph and a cut-out of the two women, so it crosses the trees and the ground and the people stand in front of it. It was on the page as the section's background image, which paints under its own children -- and the exported file had no alpha, so raising it would have laid a white rectangle over the photograph. The file is Figma's own render of that node with the people taken out of it, so this is one overlay and not three layers. The placement is the one the section background already had -- `contain` at 100% 0% puts a 924-wide image at x=516 of 1440, which is where 115:2495 sits. Only the layer moved. z-index 3 because the photograph's column is 2. pointer-events: none, or an overlay across the band would swallow every click under it. */ .pwd-sh-hero::after { content: ""; position: absolute; inset: 0; /* INHERIT: the image is the Divi SECTION's own background setting, so one file and one control serve both copies. Naming the URL here as well would mean a wave the client changes in the builder moves the copy behind the photograph, which nobody sees, and leaves this one. */ background-image: inherit; background-repeat: inherit; background-position: inherit; background-size: inherit; z-index: 3; pointer-events: none; } /* Below 1240 the hero stacks and the photograph is back in the flow, so an overlay pinned to the band's top-right corner no longer sits over it -- it lands on the words instead. The frame draws no tablet, so it is not drawn. */ @media (max-width: 1239px) { .pwd-sh-hero::after { content: none; } } /* pwd-block: cards-band-empty */ /* A card band with nothing in it does not paint. PW Content Cards returns nothing where the field renders nothing -- eleven conditions have no Types at all -- and the Divi section around it would otherwise draw its 60px and its fill, which is check 49. The row carries the class because a row always renders and the module does not. */ /* .pwd-vb is named here because the Visual Builder is the OTHER render of this module: entry data deliberately does not resolve there, so it draws the grey summary panel rather than cards. Without it, this rule matched and took the whole Types and Treatment sections off the builder on all twenty-five condition pages -- the client could not see the band, let alone edit it. */ .pwd-sc-band:has( > .et_pb_row.pwd-sc-cardsrow ):not( :has( .pwd-cc, .pwd-vb ) ) { display: none !important; } /* pwd-block: cards-headings */ /* Divi styles every h2 and h3 inside a .pwd-sc-band at 32px with !important on its margins, and it wins on one class. A group heading inside a card band is 20 -- it is a label over a row of cards, not a band title. */ .pwd-sc-band .pwd-cc .pwd-cc__sub, .pwd-sc-band .pwd-cc__sub { font-size: 20px !important; font-weight: 700; line-height: 1.4; margin: 32px 0 16px !important; } .pwd-sc-band .pwd-cc > .pwd-cc__sub:first-child { margin-top: 0 !important; } /* pwd-iv-condlink -- the single investigator profile, 2026-09-04. * * 211:1389's condition rows carry an arrow and are links into the condition; * the name above them (211:1386) is not. Those rows drew the SAME condition a * second time on every profile -- an investigator names one condition and the * grid below narrowed to it -- so they are gone, and with them the only way * from this card into the condition's own page. The name is the link now. * * Both declarations are here rather than in the module because a module's own * text colour does not reach its anchors, and Divi writes its a{} after this * file: the third time this project has met it. */ .pwd-iv-condname a.pwd-iv-condlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .pwd-iv-condname a.pwd-iv-condlink .pwd-i { color: #7A44EC; flex: 0 0 auto; transition: transform .15s ease; } .pwd-iv-condname a.pwd-iv-condlink:hover, .pwd-iv-condname a.pwd-iv-condlink:focus-visible { color: #7A44EC; } .pwd-iv-condname a.pwd-iv-condlink:hover .pwd-i { transform: translateX(3px); } /* pwd-iv-condsolo -- the Related Conditions card with no rows under it. * * The summary carries 24 of bottom margin because 211:1388's row grid used * to follow it. The grid drew the same condition the name above it already * states, so it is gone -- and the margin was left holding open 24px of * nothing at the bottom of the card. It is only a gap while there is * something under it to be a gap from. * * The :has() is inside :not() at the top level, which is legal; a :has() * inside another :has() is the one a browser drops in silence (check 96). */ .pwd-iv-condcard:not(:has(.cms-card)) .pwd-iv-condsum { margin-bottom: 0 !important; } /* ------------------------------------------------------------------ The featured card's details column, against 278:1929. Its padding was 40 top and bottom where the frame's is 34, so on the three articles that carry an author -- the only case the frame draws -- the title sat at 590 against the frame's 574, the summary at 679 against 662, and Read Article at 815 against 830. The card itself was the frame's 1240 x 360 the whole time and the error was inside it, which is why nothing that measured the band could see it. 34 is arithmetic rather than a guess: 34 + 72 title + 16 + 72 summary + 16 + 56 author row + 16 + 44 button + 34 comes to exactly 360, the card's own height. So with an author there is no slack at all and the column's justify-content: center is a no-op. It only does anything on the fifty articles that name no author, where the frame has nothing to say and a centred stack reads better than 35px dumped under the button. ------------------------------------------------------------------ */ .pwd-bfeat .et_pb_column:last-child { padding: 34px 40px 34px 0 !important; /* 278:1929 */ } /* marker: pwd-bfeat-pad34 */ /* pwd-block: curated-empty-column */ /* The hub's curated band is three columns: a Featured Condition, two stories, and the support rows. The first is a card and the other two are written on the page, so when the card draws nothing -- a search that matched none of the collection -- the column stayed, a heading over a hole. The module marks itself empty and the column folds away; the other two then share the row rather than leaving a third of it blank. */ .pwd-ch-curated > .et_pb_column:has( .pwd-featured-none ) { display: none !important; } .pwd-ch-curated:has( .pwd-featured-none ) { display: flex !important; gap: 24px; } .pwd-ch-curated:has( .pwd-featured-none ) > .et_pb_column { flex: 1 1 0 !important; width: auto !important; max-width: none !important; margin: 0 !important; } /* ------------------------------------------------------------------ Read Article sits 24 under the author row, not 16. [278:1942, 278:1943] The frame does it in two pieces: cta-read-row starts 16 after the author row and is 44 tall, and the button is 36 tall at y=8 INSIDE it. Built as one 16px gap the stack came to 285 where the frame's is 292, and because the column is centred those 7 pixels split -- so the title, the summary and the button each landed 3 to 4 out with every box on the card the right size. 8px here is the row's own inset, and it makes the stack 292, which is 360 minus the 34 of padding top and bottom exactly. marker: pwd-bfeat-cta8 ------------------------------------------------------------------ */ .pwd-blogcard .et_pb_button.pwd-bf__cta { margin-top: 8px !important; } /* pwd-block: featured-resource */ /* The Featured Resource above the resource tabs (130:805, drawn from the Clinical Study Resources collection). Two of the fourteen resources name the condition they are about, so on every other condition the module draws its "nothing here" marker and the whole block folds away. */ .pwd-sc-featres:has( .pwd-featured-none ) { display: none !important; } .pwd-sc-featres { display: block; margin: 0 0 32px; } /* The card is the story page's wide study card, which the carousel sizes with its own variables. Standing on its own it takes the band's width and its own natural height. */ .pwd-sc-featres .cms-list { --pwd-card-min: 0px; --pwd-rel-vis: 1; display: block; margin: 0; } .pwd-sc-featres .cms-card { width: 100%; min-height: 0; } /* ------------------------------------------------------------------ pwd-chrome-linkcolour -- the chrome states its own link colours, so Divi's customizer cannot take them. Divi ships `a, .et-db #et-boc .et-l a { color: #6a2b7f }` -- ONE id and three classes -- and it ships it in et-divi-customizer-CPT-global.min.css, which is enqueued only on custom-post-type routes. Every colour in this file is written at one or two classes, so on those routes Divi wins and on every other route it does not. Measured: /stories/ rendered 55 of 55 chrome links in #6a2b7f -- the Get Started button's label, all 21 footer links, "Elevate Sign In" and all sixteen "Explore" links in the dropdowns -- while the same navbar on the other 30 routes was correct. One page's button a different colour from every other page's, with no error anywhere, which is exactly what a status code cannot see. These restate the values already in this file, so nothing changes on a page that is already right. Colour only, and every selector names a chrome class -- none of this can reach a page's own content. ------------------------------------------------------------------ */ .pwd-nav__cta, .pwd-nav__cta:hover, .pwd-nav__cta:focus-visible { color: var(--pw-white) !important; } .pwd-nav__explore, .pwd-nav__sub, .pwd-nav__pill--link { color: var(--pw-grey-1) !important; } .pwd-nav__explore:hover, .pwd-nav__sub:hover, .pwd-nav__pill--link:hover, .pwd-nav__card:hover .pwd-nav__explore { color: var(--pw-primary) !important; } .pwd-footer__item a { color: var(--pw-white) !important; } .pwd-footer__item a:hover { color: var(--pw-lav-200) !important; } .pwd-footer__item.is-sub a { color: var(--pw-grey-2) !important; } .pwd-footer__legal a { color: var(--pw-grey-2) !important; } .pwd-footer__legal a:hover { color: var(--pw-white) !important; } /* pwd-block: journey-one-size */ /* 171:1513 is 167 x 160, and it is that for all seven steps whatever each one says. The built row let every card take its own copy's height, so Epilepsy's ten steps came out at three different heights with the last one cut off at the page edge -- the client photographed it beside the frame. One size, the frame's own, and the row scrolls when there are more steps than fit. These rules sit at the end of the file deliberately: they are the last word on a component several passes have edited. */ .pwd-sc-steps .pwd-sc-step { flex: 0 0 167px !important; /* 171:1284 -- 1240 over seven, gaps out */ min-width: 167px !important; max-width: 167px !important; } .pwd-sc-steps .pwd-sc-stepcard { flex: 0 0 auto !important; height: 160px !important; /* 171:1513 */ min-height: 160px !important; justify-content: flex-start !important; gap: 12px; /* 171:1517 */ padding: 20px 14px !important; border: 1.5px solid #efe8fd !important; border-radius: 16px !important; background: #fff; overflow: hidden; } /* The words are clamped rather than the card stretched, because a row of cards that are each as tall as their own sentence is the thing that looked broken. Nothing is lost from the page: the entry's own Diagnosis prose is printed under the timeline. */ .pwd-sc-steps .pwd-sc-steptitle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; /* 171:1518 Text/16 Medium */ font-weight: 500; line-height: 1.5; color: #181628; } .pwd-sc-steps .pwd-sc-stepcopy { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; /* 171:1519 Text/14 Medium */ font-weight: 500; line-height: 1.5; color: #595f6b; } /* A row that fits is centred; one that does not scrolls from its first step, because a centred flex row that overflows is clipped at its left edge and the first circle disappears behind it. */ .pwd-sc-steps { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; } .pwd-sc-steps .pwd-sc-step { scroll-snap-align: start; } @media ( max-width: 560px ) { .pwd-sc-steps .pwd-sc-step { flex: 0 0 150px !important; min-width: 150px !important; max-width: 150px !important; } } /* pwd-block: featured-study-card */ /* 130:805 exactly: the words on the left, a 420-wide photograph on the right at the card's full height. The band was borrowing the story page's carousel card, whose photograph is on the left and whose title is 24px Spectral, and at 1240 wide that read as a huge picture with a stripe of text under it. */ .pwd-sc-featres .cms-card { padding: 28px; /* 130:805 */ background: #fff; border: 1px solid #e4e7ec; border-radius: 24px; box-shadow: 0 8px 12px rgba( 107, 51, 235, 0.06 ); overflow: hidden; } .pwd-sc-featres .pwd-fs2-row { display: flex !important; align-items: stretch; gap: 28px; width: 100% !important; max-width: 100% !important; padding: 0 !important; } .pwd-sc-featres .pwd-fs2-row::before, .pwd-sc-featres .pwd-fs2-row::after { display: none !important; } .pwd-sc-featres .pwd-fs2-body { flex: 1 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; display: flex; flex-direction: column; justify-content: space-between; /* 130:806 -- eyebrow, block, button */ } .pwd-sc-featres .pwd-fs2-photocol { flex: 0 0 420px !important; /* 130:822 */ width: 420px !important; max-width: 420px !important; margin: 0 !important; } .pwd-sc-featres .pwd-fs2-photo, .pwd-sc-featres .pwd-fs2-photo .et_pb_image_wrap, .pwd-sc-featres .pwd-fs2-photo a { display: block; height: 100% !important; width: 100% !important; } .pwd-sc-featres .pwd-fs2-photo img { width: 100% !important; height: 100% !important; min-height: 224px; object-fit: cover; border-radius: 16px !important; /* 130:822 */ } .pwd-sc-featres .pwd-fs2-eyebrow .et_pb_text_inner { text-transform: uppercase; letter-spacing: 0.04em; } .pwd-sc-featres .pwd-fs2-title .et_pb_text_inner { text-transform: capitalize; /* 130:809 */ } .pwd-sc-featres .pwd-fs2-title a, .pwd-sc-featres .pwd-fs2-link a { color: inherit; text-decoration: none; } .pwd-sc-featres .pwd-fs2-title a:hover { color: #7a44ec; } .pwd-sc-featres .pwd-fs2-link a { display: inline-flex; align-items: center; gap: 8px; /* 130:821 */ } .pwd-sc-featres .pwd-fs2-link svg { width: 16px; height: 16px; } /* 130:813-820 -- the phase pills. The Recruiting badge and the trial phases belong to the Studies collection nobody exported, so the card carries the one tag this collection really has: the condition it is about. */ .pwd-sc-featres .pwd-fs2-tags .et_pb_text_inner { display: flex; flex-wrap: wrap; gap: 8px; } .pwd-sc-featres .pwd-fs2-tag a, .pwd-sc-featres .pwd-fs2-tag span, .pwd-sc-featres .pwd-fs2-tag { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 100px; background: #efe8fd; border: 1px solid #e1d5fb; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 600; line-height: 1.5; color: #7a44ec; text-decoration: none; } /* A tag that is itself a link renders its own anchor inside the span, so only the outer one carries the pill. */ .pwd-sc-featres .pwd-fs2-tag a { padding: 0; border: 0; background: none; } @media ( max-width: 900px ) { .pwd-sc-featres .pwd-fs2-row { flex-direction: column-reverse; } .pwd-sc-featres .pwd-fs2-photocol { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; } .pwd-sc-featres .pwd-fs2-photo img { min-height: 200px; max-height: 260px; } } /* pwd-block: featured-study-row-direction */ /* The card grid states `flex-direction: column` on every element inside a card -- `.cms-list--carded .cms-card > div, .et-l, .et_pb_column ...` -- so the two halves of this card stacked and the photograph landed under the words at 420 square. That rule exists to make a stacked card fill its column and it reaches anything a card contains, which is check 76 again. The row says which way it runs. */ .pwd-sc-featres .pwd-fs2-row { flex-direction: row !important; } .pwd-sc-featres .pwd-fs2-body { width: auto !important; max-width: none !important; min-width: 0 !important; } .pwd-sc-featres .pwd-fs2-photo img { max-height: 300px; } @media ( max-width: 900px ) { .pwd-sc-featres .pwd-fs2-row { flex-direction: column-reverse !important; } } /* pwd-block: journey-clamp-fit */ /* Three clamped lines of copy under a two-line title does not fit inside 171:1513's 160, so the last line was cut through the middle of the letters. The card is the frame's height, so the words fit it: two lines of title and two of copy is 48 + 12 + 42 inside 120 of content box, whatever the step says. The full sentence stays in the markup -- it is on the page in the entry's own Diagnosis prose, and a screen reader still reads it. */ .pwd-sc-steps .pwd-sc-stepcopy { -webkit-line-clamp: 2; margin: 0; } .pwd-sc-steps .pwd-sc-steptitle { margin: 0; } /* Anything the clamp does not catch -- a long unbroken word -- breaks rather than pushing the card out of shape. */ .pwd-sc-steps .pwd-sc-stepcard { overflow-wrap: anywhere; } /* pwd-block: resource-list */ /* The five resource tabs (130:834). The frame draws a card per resource with a round purple icon beside the name; the page drew a row of grey pills, because the values were slugs with no picture to draw. They are rows with a picture of their own now, so the card is what the frame says. The description and the Learn More the frame also draws are not built: the Condition Resources collection was never exported, so a name is all the data there is, and a button that goes nowhere is worse than none. */ .pwd-rl { display: grid; grid-template-columns: repeat( var( --pwd-rl-cols, 2 ), minmax( 0, 1fr ) ); gap: 16px; margin: 0; padding: 0; list-style: none; } .pwd-rl__item { display: flex; align-items: center; gap: 16px; margin: 0; padding: 20px; background: #fff; border: 1px solid #e4e7ec; border-radius: 16px; box-shadow: 0 4px 16px rgba( 28, 24, 40, 0.05 ); } .pwd-rl__icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: var( --pw-gradient, linear-gradient( 135deg, #9163ee, #7a44ec ) ); background-color: #7a44ec; color: #fff; overflow: hidden; } .pwd-rl__icon svg { width: 22px; height: 22px; } .pwd-rl__icon img { width: 100%; height: 100%; object-fit: cover; } .pwd-rl__name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.5; color: #181628; overflow-wrap: anywhere; } .pwd-rl__none { margin: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: #595f6b; } /* Divi's own tab panel padding is the band's, and the cards bring their own. */ .pwd-sc-restabs .et_pb_tab_content > .pwd-rl { margin: 0; } @media ( max-width: 780px ) { .pwd-rl { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ pwd-relbox -- the Related Resources band is not a card. 115:1690 "Container" is a plain `flex flex-col gap-[32px]` frame: no fill, no stroke, no radius, no shadow. Only the two StoryCards inside it carry `border border-[#e4e7ec] rounded-[24px] shadow`. `.pwd-rel` had been given the CARD's own rule -- white, 24px corners, a purple shadow and a 1px #E4E7EC edge -- and a later line already undid the fill, the radius and the shadow with !important and MISSED the border. So a hairline rectangle was drawn around the whole band on all seventy story pages and all twenty-five condition pages, and it cost 2px besides: the 1240 head measured 1238, the viewport 1164 and each card 570 against the frame's 571. qa-story.py asserted the band's own top rule and the CARD's border and passed on both throughout -- nothing had ever read the container's. ------------------------------------------------------------------ */ .pwd-rel { border: 0 !important; } /* pwd-block: journey-left-align */ /* 171:1283 StepsRow sits at x=0 inside 171:1278's 1240 -- the first step's card starts on the container's own left edge, level with the "Diagnosis Journey" heading above it (171:1279, also x=0). The row had `margin-left: auto` on its first step and `margin-right: auto` on its last, which centres it -- written when the step was allowed to grow, so that four steps did not read as a quarter-width card each. The step is pinned to the frame's 167 now (journey-one-size), so those auto margins only ever inset the row: six steps came out 89px in from the left on both sides, with the heading flush and the timeline under it indented. The client photographed exactly that beside the frame. Left-aligned, so a condition with two steps and one with ten both start where the frame starts them. The row still scrolls when there are more steps than fit, which is what the auto margins were being careful about. */ .pwd-sc-steps { justify-content: flex-start !important; } .pwd-sc-steps .pwd-sc-step:first-child { margin-left: 0 !important; } .pwd-sc-steps .pwd-sc-step:last-child { margin-right: 0 !important; } /* ========================================================================= pwd-ss-below1440-fix -- the story page between 1288 and 1439, read beside 115:1610 on 2026-09-04 after the client opened it at 1366. Two faults, and both are a rule of ours that was present, matched, served and LOSING (check 52). qa-story.py passed 171/171 throughout, because it has only ever run at 1440 -- check 66, met again on the one screen that was said to be finished. 1. "Under 1440 the margins are what gives first" was written as `max-width: calc(100vw - 48px)`, which does not shrink the margins -- it REMOVES the 1240 cap. Between 1288 and 1439 the row is therefore WIDER than the frame's content column: at 1366 the hero, the article and the Related band measured 1318 at x=24 while the navbar above them was 1229 at x=68, so the page had three different left edges (24, 63 and 68) and the article ran 934 where 115:1647 gives it 856. min() is the whole repair: it keeps the shrink below 1288 byte for byte and restores the cap above it. --pw-shell is the 1240 the design already states, so the number lives in one place. 2. The photograph was 2px tall on every width below 1280, on all seventy story pages. Both halves of the stack rule had been dead since they were written: Divi's own `#et-boc .et-l .et_pb_column { min-height: 1px }` carries an id and beat `.pwd-ss-heropic.et_pb_column` (0,2,0), and the unconditional `.pwd-ss-photo img { min-height: 0 !important }` twelve hundred lines above beat the block's own `min-height: 320px`. Stating the column's height with !important wins both -- Divi's rule has none -- and the absolutely positioned photograph then fills it, so the img's min-height: 0 no longer matters and is left alone. 320 is not a frame number: the file draws no tablet at all. It is the height whoever wrote the stack block already chose, now applying. ========================================================================= */ @media (max-width: 1439px) { .pwd-sh-herorow, .pwd-ss-herorow, .pwd-sh-controlrow, .pwd-sh-workspace, .pwd-sh-morerow, .pwd-fs-card, .pwd-ss-bodyrow, .pwd-ss-relrow { max-width: min(var(--pw-shell), calc(100vw - 48px)) !important; } } @media (max-width: 1279px) { .pwd-ss-heropic.et_pb_column { min-height: 320px !important; } } /* ========================================================================= pwd-rc-card-fit -- the Related Resources card, read against 115:5211 on 2026-09-04. The card is a fixed 563 with overflow:hidden, and on any story whose summary took two lines "Read Story" ran to 571 and was CLIPPED IN HALF. Three of the seventy were checked and one clipped, which is why it read as a one-off rather than a defect. The mechanism that was supposed to prevent it has never worked: the wrapper's `margin-top: auto !important` computes 16px, because Divi writes the module's own margin from a selector carrying an id and wins at equal importance (check 71). Rather than fight that, the frame's own arithmetic is stated, so nothing needs pinning: photo 0 - 320 badge 348 - 377 (28 of padding) title 393 - 451 (2 lines, already clamped) summ 463 - 487 115:5218 is ONE line, 24 tall button 503 - 535 117:7479 is 120 x 32 card 563 = 535 + 28 of padding The summary was clamped to two lines but never given a height, so it was 24 on a short teaser and 48 on a long one and the button moved with it. One line at 24 is what the frame draws and what makes every card's button land on the same y -- which is the whole reason a card grid states a height at all. ========================================================================= */ .pwd-rc-sum .et_pb_text_inner { -webkit-line-clamp: 1; height: 24px; } .et_pb_button.pwd-rc-link { height: 32px; padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================================= pwd-rc-title-fit -- the Related Resources card, read against 115:5211 on 2026-09-04, after the client put two story cards side by side and found "Read Story" at a different height in each. The summary was pinned to one line the same day (pwd-rc-card-fit) and the TITLE was not: it is clamped to two lines and given no height, so it is 29 tall on a short title and 58 on a long one, and everything under it moves with it. Measured on /stories/an-ulcerative-colitis-.../ at 1440: card 11142 card 11143 title 394 - 452 394 - 423 <- 29 short summary 464 - 488 435 - 459 <- 29 high Read Story 504 - 536 502 - 534 The two buttons happen to land 2px apart there only because the wrapper's `margin-top: auto` absorbs 27 of the 29 -- and at 768 nothing absorbs it and they land 29 apart (520 against 491). Either way the summary line is 29 out in every card whose title is one line, which is what the eye reads as two cards that do not line up. 115:5217 gives the title 393 - 451, which is two lines of 24px at 1.2. Said as a HEIGHT as well as a clamp, every row under it lands on the same y in every card and nothing has to be pinned -- the same move the story grid card already makes for its summary (check 71). Nothing is lost to it: the clamp was already two lines, so a title that took one still takes one and simply reserves the second. photo 0 - 320 badge 348 - 377 title 393 - 451 <- stated summ 463 - 487 button 503 - 535 card 563 ========================================================================= */ .pwd-rel__viewport .cms-card .pwd-rc-title .et_pb_text_inner { height: 58px; } /* The photograph, the badge and the summary are each a fixed box already, so with the title stated the column's content is exactly the frame's 563 and the auto margin has nothing left to absorb. It stays, harmlessly, as the backstop for a card the client adds a module to. */ /* --- pwd-who-fix-4 --------------------------------------------------------- The rule between two of the values columns. -------------------------------------------------------------------------- */ /* 135:3011 centres each rule in the 48 between two columns of text. Divi draws it as `border-left` on the column, which puts it ON the column's own left edge -- 1px from the words to its right and 41 from the words to its left. The client saw the text touching the line. The gutter between two column boxes is 24 and each column holds 242 of text in a 259 box, so the middle of the gap BETWEEN THE WORDS is 20 to the left of the box edge, which is where the frame puts the line. */ body.pwd-designed .pwd-a-valuesgrid > .et_pb_column { position: relative; } body.pwd-designed .pwd-a-valuesgrid > .et_pb_column + .et_pb_column { border-left: 0 !important; } body.pwd-designed .pwd-a-valuesgrid > .et_pb_column + .et_pb_column::after { content: ""; position: absolute; left: -20px; top: 0; bottom: 0; width: 1px; background: #E4D5F5; pointer-events: none; } /* Below the frame's own width the columns stack, and a vertical rule between two things that are one above the other is nonsense. */ @media (max-width: 980px) { body.pwd-designed .pwd-a-valuesgrid > .et_pb_column + .et_pb_column::after { display: none; } } /* ========================================================================== THE VALUES CARD, READ AGAIN Figma 135:3656 / 135:3664 -------------------------------------------------------------------------- pwd-about3-values The client read this band beside the frame and said the design has a wave behind it and the content's padding is wrong. Both were true, and qa_who.py passed 100/100 the whole time -- it measures the boxes that were already asserted, and not one of these is a box. The wave, and the rule between two columns, were fixed the same afternoon by another session (`pwd-who-fix-4` above, and the section's own background image). Nothing here touches either: two rules drawing one divider is two dividers. What is left is the card itself and the alignment of the four columns. The wash and the gaps are Divi settings now (fix-who-values.php), because they are what the client would want to change. What is here is only what a module cannot say about itself. ========================================================================== */ /* 135:3656 is a three-stop wash, and both halves of the card were a flat rgba(255,255,255,0.72) -- which is also what was hiding the wave the other session had just put behind it, because an opaque-ish white sits between the two. This supersedes the fill under "the values card: two rows that read as one" further up this file. It has to say the wash as a background-IMAGE and the colour as transparent, because that rule's `background` shorthand is `!important` and would otherwise go on painting white underneath. The rows carry the same wash as their own Divi gradient, which outranks this and is where the client can change it (check 79); this is the half that applies if that setting is ever cleared. The border is Lavender/Secondary/200, and the frame's Glass Effect is a 20 radius, not the 12 that was there. */ .pwd-a-valuestop, .pwd-a-valuesgrid { background-color: transparent !important; background-image: linear-gradient( 90deg, rgba(245, 243, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 55%, rgba(245, 243, 255, 0.7) 100% ) !important; border-color: #E1D5FB !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } /* 135:3664 -- every title reserves two lines, so all four descriptions start at the same y. The frame states it twice: "Resourceful" and "Lifetime Learner" each carry a second, empty paragraph so their box is 54 like the two titles that really do wrap. Without it the row is as tall as whatever is in it -- 32 for a one-line title, because the icon tile is 32, and 54 for a two-line one -- so the four descriptions started at 2039, 2020, 2020 and 2039. That 19px stagger is the thing the client photographed. A module has no way to say "as tall as the title beside me", which is why this is not a module setting: two 18px lines at 1.5 is 54, and the module now sets the 1.5. */ .pwd-a-valueshead .et_pb_text_inner { min-height: 54px; } /* Below 980 the grid wraps to two columns and then to one. The frame draws no tablet or phone at all, so this is a decision rather than a measurement: a title stops reserving a second line once there is nothing beside it to line up with. */ @media (max-width: 980px) { .pwd-a-valueshead .et_pb_text_inner { min-height: 0; } } /* ========================================================================= pwd-ss-meta-gutter -- the story's meta band below 1288, found while screenshotting the hero repair at 1024 rather than by any measurement. 115:1628 is a full-bleed band whose CONTENT sits on the same 1240 column as the hero above it and the article below it. The band's section is full-bleed correctly; its inner row carries only Divi's own max-width: 1240px, which below 1240 + 48 resolves to the viewport and leaves NO side gutter at all -- so "Condition:", the read time and Share were flush against the left edge of the screen at 1024, 768 and 480 while everything above and below them kept 24. At 1279 it was 4px out (20 against 24), which is the same fault too small to see. The newsletter row is full-bleed for the same reason and is NOT listed here: it carries its own .pwd-shell, so its content is already inset by --pw-gutter and adding a cap would inset it twice (check 86). ========================================================================= */ @media (max-width: 1439px) { .pwd-ss-metarow { max-width: min(var(--pw-shell), calc(100vw - 48px)) !important; } } /* pwd-block: cards-supportive-aside */ /* -------------------------------- PW Content Cards: the row (57:493 / 57:527) * * 57:493 is a ROW of three children, not a stack: Step 01 Card (408.67), * Step 02 Card (408.67) and the Supportive Care Column (57:504, 374.67) -- * 408.67 + 24 + 408.67 + 24 + 374.67 is the band's own 1240. Under it, at the * full 1240, 57:527 draws a Banner: a #F1F3F7 bar with a bordered info mark * and one 14px line, 32 below the grid. * * The page had all three stacked, with a hole in the third grid column where * the frame puts the list. Every box on it was already the frame's; the shape * was not (check 62). The module decides what goes in the aside -- see * split_aside() -- so a band whose content has no list after its cards keeps * the flat layout it has always had and none of these rules match it. */ .pwd-cc__row { display: flex; align-items: flex-start; gap: 24px; /* 57:493 */ } .pwd-cc__main { flex: 1 1 auto; min-width: 0; } /* 57:504 -- 374.67 of the 1240, with its own 16 of left padding. A percentage rather than the pixels, so the column keeps its share of a narrower shell. */ .pwd-cc__aside { flex: 0 0 30.2151%; min-width: 0; box-sizing: border-box; padding-left: 16px; display: flex; flex-direction: column; gap: 16px; /* 57:504 */ } /* 57:505 -- "Other supportive care may include:" is 18 SemiBold, not the 20 Bold a group heading takes in the main column. Divi styles every h3 in a .pwd-sc-band at 20 with !important and wins on one class, so this says it at two and later in the file. */ .pwd-cc__aside .pwd-cc__sub { margin: 0 !important; font-size: 18px !important; font-weight: 600; line-height: 1.5; color: #181628; } .pwd-cc__aside .pwd-cc__note { margin: 0 !important; font-size: 16px; } /* 57:506 -- one line per row, 12 apart, and each line is Medium rather than Regular (57:511). The disc is 20 with a 10px check inside it (85:392 / 85:393), and its row carries 4 of its own padding (85:408). */ .pwd-cc__aside .pwd-cc__ticks { grid-template-columns: 1fr; gap: 12px; margin: 0; } .pwd-cc__aside .pwd-cc__ticks li { gap: 12px; /* 57:507 */ font-weight: 500; } .pwd-cc__aside .pwd-cc__ticks svg { margin-top: 4px; padding: 5px; border-radius: 10px; } /* The cards share what is left of the row. auto-fit rather than a fixed count: two cards collapse the empty track and come out at the frame's own 408.67 each, three fill three tracks, and a fourth wraps -- which is what the client asked for when they said the cards may become three or four. */ .pwd-cc--aside .pwd-cc__grid { grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) ); gap: 24px; /* 57:493 */ } .pwd-cc__main > .pwd-cc__sub:first-of-type, .pwd-sc-band .pwd-cc__main > .pwd-cc__sub:first-child { margin-top: 0 !important; } /* The column ends where its content ends: the grid's own 24 of bottom margin is a gap from what follows it, and in the row nothing follows it. */ .pwd-cc__row > * > *:last-child { margin-bottom: 0 !important; } /* 57:527 -- the Banner. */ .pwd-cc__banner { display: flex; align-items: center; gap: 12px; margin: 32px 0 0 !important; padding: 14px 20px !important; border: 1px solid #f1f3f7; border-radius: 12px; background: #f1f3f7; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 14px; font-weight: 500; line-height: 1.5; color: #181628; } /* I57:527;430:537 -- a 16px bordered square with an "i" in it. It is a border and a letter in the frame rather than an exported glyph, so it is drawn the same way here. */ .pwd-cc__i { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 16px; height: 16px; border: 1px solid #7a44ec; border-radius: 8px; font-family: 'Inter', 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 700; line-height: 1; color: #7a44ec; } /* The frame draws no tablet. Below the width where three cards and a 374 column stop fitting, the list goes under the cards and spreads out again. Both card rules are restated at this specificity or the earlier media query, which names one class, would lose to .pwd-cc--aside (check 88). */ @media ( max-width: 1100px ) { .pwd-cc__row { display: block; } .pwd-cc__aside { flex: none; padding-left: 0; margin-top: 32px; } .pwd-cc__aside .pwd-cc__ticks { grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); gap: 12px 24px; } .pwd-cc--aside .pwd-cc__grid { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); } } @media ( max-width: 720px ) { .pwd-cc--aside .pwd-cc__grid { grid-template-columns: 1fr; } } /* pwd-block: cards-list-reset */ /* ------------------------------------- PW Content Cards: two rules that lost * * 1. Divi styles every `ul` on this site `padding: 0 0 23px 1em` from a * selector carrying an id, so `.pwd-cc__grid { padding: 0 }` -- in the * file since the band was built -- had never once applied. Measured on * /conditions/anca-av/: the card grid computed `0px 0px 23px 14px`, so * every card row on all 42 bands sat 14px right of the heading above it * (57:493 is x=0 of the 1240) with 23px of dead space under it, and two * cards came out 401.7 where the frame's are 408.67. The ticked list had * it too, on top of the aside's own 16 of padding. Third time this exact * rule has cost a measurement -- check 76 -- and the same shape as the * footer's own reset at line 5061. * * 2. `.pwd-sc-band .pwd-cc .pwd-cc__sub` says 20px/700 at three classes, so * the aside's own 18px/600 (57:505) lost on two. Stated at four. */ body #page-container .pwd-cc ul.pwd-cc__grid, body #page-container .pwd-cc ul.pwd-cc__ticks { padding: 0 !important; } .pwd-sc-band .pwd-cc .pwd-cc__aside .pwd-cc__sub, .pwd-cc .pwd-cc__aside .pwd-cc__sub { margin: 0 !important; padding: 0 !important; font-size: 18px !important; /* 57:505 Text/18px/Semi Bold */ font-weight: 600 !important; line-height: 1.5 !important; color: #181628; } /* -------------------------------------------------------------------------- 135:779 -- the closing quote, drawn from the collection. The band was on the page as five hand-filled Divi modules until 2026-09-04, when it was removed because every word in it was the designer's own. It is a PW Featured Entry through the `pw-quote-investigator` Divi Library card now, so the portrait, the words and the attribution are one investigator's own fields -- and it follows the directory's filter, so narrowing to MDS gives an MDS investigator's quotation. The card's own look is still `.pwd-p-quotecard` above; what is here is only what moving it inside a card costs. Two of this project's own traps: - check 79. Divi writes a page's design CSS by scanning that page, and a card rendered through [cms] from the Divi Library was never on the page it scanned -- so the row's `custom_padding` of 32 never reaches the browser and `.pwd-p-quoterow { padding: 0 !important }` is left to win. The setting stays in the module, where the client looks for it; this is the half that applies. - check 63. The crop has to reach the WRAPPER. front.css puts every card image in a `3 / 2` frame with the absolutely positioned over it, which is right for a listing tile and not for a 170px round portrait. -------------------------------------------------------------------------- */ /* The wrapper's own card look belongs to the featured investigator above, not to this one -- the quote card carries its own wash and edge. */ .pwd-featured-wrap:has( .pwd-p-quotecard ) .cms-card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .pwd-featured-wrap .pwd-p-quoterow { padding: 32px !important; margin: 0 !important; width: 100% !important; max-width: 100% !important; } /* 135:781 -- 170 round, and every box in the chain has to say so. */ .pwd-featured-wrap .pwd-p-qimg, .pwd-featured-wrap .pwd-p-qimg a, .pwd-featured-wrap .pwd-p-qimg .et_pb_image_wrap { position: static !important; display: block !important; width: 170px !important; height: 170px !important; max-width: 170px !important; aspect-ratio: auto !important; margin: 0 !important; border-radius: 999px !important; overflow: hidden; } .pwd-featured-wrap .pwd-p-qimg .et_pb_image_wrap img { position: static !important; width: 170px !important; height: 170px !important; max-width: none !important; object-fit: cover; /* These are portraits and a face sits in the upper half of the frame. */ object-position: center 30%; border-radius: 999px !important; } /* 135:789-790 -- the name, the role, the institution, each on its own line. Spans rather than
s so that an entry naming no institution loses that line instead of leaving a blank one: two of the nine name none, and a gap under a doctor's name reads as something that failed to load. */ .pwd-q-by .pwd-q-line { display: block; } .pwd-q-by .pwd-q-line:empty { display: none !important; } /* One role runs to 150 characters -- the client's own writing, not a fault. Two lines is what the frame's 234-tall card has room for. */ .pwd-q-by .pwd-q-role { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Nothing eligible survived the visitor's filter. The row is the client's own and carries no heading, so there is nothing to leave stranded -- but an empty 32px card with a border would still paint. `:has()` is flat here on purpose: nested inside another `:has()` the whole rule is dropped at parse time, in silence (check 96). */ .pwd-p-quoteband:has( .pwd-featured-none ) { display: none !important; } /* --- pwd-who-fix-5 --------------------------------------------------------- Divi's `.et_pb_text > :last-child { padding-bottom: 0 }` and the rules it silently beat. -------------------------------------------------------------------------- */ /* The client photographed the Get Involved callouts on Community Service and asked about their padding-bottom. There is none: the callout is written `padding: 18px 20px` on `.pwd-cs-callout .et_pb_text_inner` and the browser computes `18px 20px 0px`. Divi ships `.et_pb_text > :last-child { padding-bottom: 0 }`, and `:last-child` is a pseudo-CLASS -- it counts as a class -- so that selector is (0,2,0) and ours is (0,2,0) too. A TIE, decided by source order, and style-static.min.css is enqueued AFTER pw-design.css. So Divi wins every time, on any two-class rule that gives an `.et_pb_text_inner` a bottom padding. Naming the module's own `.et_pb_text` alongside our class makes it (0,3,0), which wins on specificity and needs no !important. Two components were losing their bottom padding this way: this callout, and the Condition Hub's At A Glance box. */ .pwd-cs-callout.et_pb_text .et_pb_text_inner { padding-bottom: 18px; } .pwd-ch-glance.et_pb_text .et_pb_text_inner { padding-bottom: 16px; } /* pwd-block: cards-num-spectral */ /* ----------------------------------- The numbered card, against 57:494/57:496 * * 57:496 is the style guide's "accent 2": Spectral Bold 48 at 100% leading, * and the number was drawing in Plus Jakarta Sans -- the most visible thing * on the band, and the one the client's own screenshot of the frame shows as * a serif. Its "Header Row" (57:495) is 73 tall and the title sits 16 under * it, so the leading is Spectral's own normal (48 x ~1.52) and the number * carries 8 of margin on top of the card's 8 of gap. * * 57:494 also outlines the numbered card in Lavender/Secondary/200 where the * Types card (57:415) is Strokes/Gray/1, and sets its sentence in Medium * where the Types card's is Regular. The Types card is not touched: it is a * different card in the file and 37 of the 42 bands draw it. */ .pwd-cc__num { font-family: Spectral, Georgia, serif; line-height: normal; margin-bottom: 8px; } .pwd-cc__grid--num .pwd-cc__card { border-color: #e1d5fb; /* 57:494 Lavender/Secondary/200 */ } .pwd-cc__grid--num .pwd-cc__body { font-weight: 500; /* 57:498 Text/16px/Medium */ } /* -------------------------------------------------------------------------- pwd-quote-gap -- 135:780, the 24 between the portrait and the words. The frame's content row is 1096 wide and holds a 170 portrait and a 902 text column, so the gap between them is 24. `.pwd-p-quoterow` was flexed with no gap at all and line 1602 zeroes every column margin, so the two sat flush: the portrait's right edge at 343 and the quotation mark at 343. Measured on the live card, which is otherwise the frame exactly -- card 1160 x 236 at 32 of padding, portrait 170. Stated on the row rather than as a padding on the text column, so that below 900 -- where the row wraps and the portrait goes full width -- the same 24 becomes the vertical gap instead of an indent on nothing. -------------------------------------------------------------------------- */ .pwd-p-quoterow { gap: 24px !important; } /* -------------------------------------------------------------------------- pwd-quote-clearfix -- the two invisible flex items the gap above pays for. `.pwd-p-quoterow` is an `.et_pb_row`, and Divi clears a row with ::before and ::after. In a flex row each of those is a flex item: zero wide, and each still takes a `gap`. So stating the frame's 24 cost the text column 48 -- it measured 876 where the frame gives it 902, with the portrait and the gap both correct. Turned off, exactly as every other flexed row in this stylesheet does. -------------------------------------------------------------------------- */ .pwd-p-quoterow::before, .pwd-p-quoterow::after { display: none !important; } /* ========================================================================== pwd-wave-drift -- THE DECORATIVE WAVES MOVE Eight sections across six layouts carry one of the design's waves as their Divi background image: the investigator, story and blog article heroes, the blog listing hero, both bands on Who We Are, and the Community Service hero and contact strip. They were static. Each drifts along its OWN background-position, because the eight do not share one: measured in the browser they sit at 100% 0%, 100% 85px, 0% 50%, 50% 50% and 50% 100%. An animation written from the wrong start does not nudge a wave, it MOVES it -- so the variant class names the position it begins from and every keyframe run returns to it exactly. Three things this deliberately does not do: - it does not animate a transform on a pseudo-element, which would composite on the GPU and be cheaper. That needs the image in CSS, and these are Divi background settings on purpose so the client can change them in the builder. Position it is. - it does not move a wave along an axis it has no room on. Four of the eight are `contain` or a fixed size fitted to the section's height, so their vertical percentage resolves to zero whatever it says; those drift sideways only. The bottom-pinned pair stays pinned, or a strip of ground opens under it. - it does not run at all for a visitor who has asked for less motion. Every loop starts and ends on the same value and wanders in between, so it reads as a slow current rather than something sliding back and forth. The durations are deliberately not equal: two waves share a page on Who We Are and on Community Service, and matching periods would have them moving in step, which reads as a mechanism. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { .pwd-wave--tr { animation: pwd-wave-tr 34s ease-in-out infinite; } .pwd-wave--tr85 { animation: pwd-wave-tr85 39s ease-in-out infinite; } .pwd-wave--l { animation: pwd-wave-l 30s ease-in-out infinite; } .pwd-wave--c { animation: pwd-wave-c 43s ease-in-out infinite; } .pwd-wave--b { animation: pwd-wave-b 37s ease-in-out infinite; } /* 100% 0% -- the investigator, story and blog article heroes. `contain` against the section's height, so the wave already touches top and bottom and only the horizontal has anywhere to go. */ @keyframes pwd-wave-tr { 0% { background-position: 100% 0%; } 34% { background-position: 95.4% 0%; } 67% { background-position: 98.2% 0%; } 100% { background-position: 100% 0%; } } /* 100% 85px -- the blog listing hero, whose size is stated in pixels, so here the vertical really does have room. */ @keyframes pwd-wave-tr85 { 0% { background-position: 100% 85px; } 34% { background-position: 95.6% 96px; } 67% { background-position: 98.3% 88px; } 100% { background-position: 100% 85px; } } /* 0% 50% -- the Who We Are hero. `cover`, so there is overflow on both axes and the wave can wander without an edge ever showing. */ @keyframes pwd-wave-l { 0% { background-position: 0% 50%; } 34% { background-position: 4.6% 46.5%; } 67% { background-position: 1.8% 51.8%; } 100% { background-position: 0% 50%; } } /* 50% 50% -- the Who We Are values band, also `cover`. */ @keyframes pwd-wave-c { 0% { background-position: 50% 50%; } 34% { background-position: 45.4% 53.4%; } 67% { background-position: 52.6% 47.8%; } 100% { background-position: 50% 50%; } } /* 50% 100% -- the two Community Service waves. Both are `contain` and sit on the section's bottom edge; lifting one opens a strip of ground under it, so the vertical stays at 100%. */ @keyframes pwd-wave-b { 0% { background-position: 50% 100%; } 34% { background-position: 45.2% 100%; } 67% { background-position: 52.4% 100%; } 100% { background-position: 50% 100%; } } } /* ========================================================================== pwd-wave-drift-2 -- THE TWO BLOG WAVES, which the first pass could not move Six of the eight waves drifted as soon as they had a class. These two did not, and the reason is worth writing down: this stylesheet positions them ITSELF, with !important -- .pwd-bl-hero { background-position: right top 85px !important } .pwd-bs-hero { background-position: right top !important } -- because both are drawn 1:1 against their own exported file and Divi's own rule carries an id. An !important author declaration is the ONE thing that beats a CSS animation, whatever the animation's specificity, so `animation: ... background-position` was running (playState "running", currentTime ticking) and computing to the same value for ever. The other six have no such rule, which is exactly why they worked. So the position stays an !important declaration and the ANIMATION MOVES A VARIABLE INSIDE IT. --pwd-drift is registered with @property so it interpolates as a length rather than flipping between keyframes, and every var() carries a 0px fallback so a browser without @property still places both waves exactly where the design puts them -- it simply does not move them. These selectors are two classes where the blocking rules are one, and they come later in the file, so they win without needing anything new. ========================================================================== */ @property --pwd-drift { syntax: ""; inherits: false; initial-value: 0px; } @keyframes pwd-wave-drift { 0% { --pwd-drift: 0px; } 34% { --pwd-drift: 34px; } 67% { --pwd-drift: 13px; } 100% { --pwd-drift: 0px; } } @media (prefers-reduced-motion: no-preference) { /* 278:1924 -- the listing hero, flush right and 85 down. */ .pwd-bl-hero.pwd-wave { background-position: right var(--pwd-drift, 0px) top 85px !important; animation: pwd-wave-drift 39s ease-in-out infinite; } /* 278:2056 -- the article hero, flush to the top right corner. */ .pwd-bs-hero.pwd-wave { background-position: right var(--pwd-drift, 0px) top !important; animation: pwd-wave-drift 33s ease-in-out infinite; } } /* Below 900 the listing's wave is smaller and sits lower, and the article's keeps the desktop corner. Written as a sibling condition rather than a nested @media so the oldest parser still reads it. */ @media (prefers-reduced-motion: no-preference) and (max-width: 900px) { .pwd-bl-hero.pwd-wave { background-position: right var(--pwd-drift, 0px) top 120px !important; } } /* ========================================================================== pwd-wave-drift-3 -- THE WAVES ACTUALLY MOVE NOW, and far enough to see The first two passes animated background-position as a PERCENTAGE and the check asserted that the computed string changed. That is not the same thing as movement. A percentage position resolves to offset = (container size - rendered image size) x percentage so when an image renders exactly as wide as its container -- which `contain` and `cover` both do whenever the image is proportionally wider than the box -- every percentage lands on the same pixel and the wave cannot move at all, however much the declared value changes. Measured: investigator hero 647 wide in 1440 free 793px was travelling 36px story hero 465 wide in 1440 free 975px was travelling 45px blog article 733 wide in 1440 free 707px was travelling 34px blog listing 714 wide in 1440 free 726px was travelling 34px who we are hero 1440 wide in 1440 free 0px COULD NOT MOVE values band 1444 wide in 1440 free -4px COULD NOT MOVE cs hero 1440 wide in 1440 free 0px COULD NOT MOVE cs contact 1440 wide in 1440 free 0px COULD NOT MOVE So two things change here. 1. Every wave is positioned in PIXELS, through the registered custom property the two blog heroes already used. A length says how far a thing moves; a percentage says how far it moves through a gap whose size you have to know. 88px over 20-26s is a glide the eye follows without the page feeling busy -- the previous 34-45px over 34-43s was about 1px a second, which is why it read as static. 2. The four with no room are given some: a background-size a touch over 100% so the wave overflows its section and has somewhere to go. They render about a tenth larger than before. That is a real change to what the frame states, and it is the price of the design's own decoration being able to move at all -- a wave laid exactly edge to edge has no slack in it by definition. Positions stay !important because Divi writes its own with an id, and the animation moves the variable INSIDE the declaration rather than fighting it. Every var() carries a 0px fallback, so a browser without @property places every wave exactly where the design puts it and simply does not move it. ========================================================================== */ @keyframes pwd-wave-glide { 0% { --pwd-drift: 0px; } 38% { --pwd-drift: 88px; } 71% { --pwd-drift: 32px; } 100% { --pwd-drift: 0px; } } @media (prefers-reduced-motion: no-preference) { /* --- the four that already had room: same placement, bigger travel --- */ /* 115:1627 / 211:1296 / 278:2056 -- pinned to the top right, so the drift is an offset INWARDS from the right edge. */ .pwd-wave.pwd-wave--tr { background-position: right var(--pwd-drift, 0px) top !important; animation: pwd-wave-glide 21s ease-in-out infinite; } /* 278:1924 -- the same, dropped 85. */ .pwd-wave.pwd-wave--tr85 { background-position: right var(--pwd-drift, 0px) top 85px !important; animation: pwd-wave-glide 24s ease-in-out infinite; } /* --- the four that had none: a little overflow, then the same glide --- */ /* 135:1638 -- the Who We Are hero. `cover` rendered it 1440 in 1440, so it had nothing to move through. */ .pwd-wave.pwd-wave--l { background-size: auto 112% !important; background-position: left var(--pwd-drift, 0px) center !important; animation: pwd-wave-glide 23s ease-in-out infinite; } /* 135:3011 -- the values band, centred, same story. Width-driven, not height-driven. Sized by height its width was a constant ~1620 whatever the screen, so it covered 106% of the band at 1440 and 61% at 2560 -- the client saw the wave stop short with plain ground either side. This is what --b below already does, and for the same reason. At 1440 the two differ by ten pixels, so the one width every check opens is untouched, and the glide still has overflow to drift through at every width. The CARD is not touched: 135:3656 states its 1240 and the ask was about the wave. */ .pwd-wave.pwd-wave--c { background-size: 112% auto !important; background-position: calc(50% + var(--pwd-drift, 0px)) center !important; animation: pwd-wave-glide 26s ease-in-out infinite; } /* 135:3968 and Group 135:4788 -- both Community Service waves sit on their section's bottom edge and must stay there, so only the horizontal moves. Widened rather than heightened for the same reason. */ .pwd-wave.pwd-wave--b { background-size: 112% auto !important; background-position: calc(50% + var(--pwd-drift, 0px)) 100% !important; animation: pwd-wave-glide 20s ease-in-out infinite; } } /* Below 900 the blog listing's wave is smaller and sits lower. */ @media (prefers-reduced-motion: no-preference) and (max-width: 900px) { .pwd-wave.pwd-wave--tr85 { background-position: right var(--pwd-drift, 0px) top 120px !important; } } /* ========================================================================== pwd-about4 -- what the client read off the frames on 2026-09-07 Two things, both measured rather than judged. 1. THE WAVES WERE TOO SLOW TO NOTICE. 88px over 20-26s is about 4px a second at its fastest, which the eye does not pick up on a page it is reading. 110px over 11-14s is roughly three times that: still a drift and not a slide, but a drift somebody sees. The keyframes are redefined under the same name, so every wave picks the new amount up at once and nothing has to be re-pointed. 2. THE PARTNER ROW STARTS IN THE WRONG PLACE. 135:4685 PartnerCardsRow is x=24 width=1392 -- 24px in from each edge of the 1440 page, NOT on the 1240 content shell the heading above it sits on. It was built on the shell (x=100, w=1240) so that it lined up with that heading, and this file has carried that as a deliberate departure since the band was made. The client has now read the frame and asked for the frame, which settles it. Six 360-wide cards 24 apart still overflow and still scroll; what changes is where the window onto them begins. ========================================================================== */ @keyframes pwd-wave-glide { 0% { --pwd-drift: 0px; } 38% { --pwd-drift: 110px; } 71% { --pwd-drift: 40px; } 100% { --pwd-drift: 0px; } } @media (prefers-reduced-motion: no-preference) { .pwd-wave.pwd-wave--tr { animation-duration: 12s; } .pwd-wave.pwd-wave--tr85 { animation-duration: 14s; } .pwd-wave.pwd-wave--l { animation-duration: 13s; } .pwd-wave.pwd-wave--c { animation-duration: 15s; } .pwd-wave.pwd-wave--b { animation-duration: 11s; } } /* The row scrolls, and a row that scrolls should not show a Windows scrollbar under six logos -- the pills on the listings already made that decision. */ .pwd-cs-partners { scrollbar-width: none; } .pwd-cs-partners::-webkit-scrollbar { height: 0; width: 0; } /* ========================================================================== pwd-wave-breathe -- the four pinned waves go back to the frame's placement Giving these four a background-size of 112% was how they were made to move at all: `cover` and `contain` rendered each of them exactly as wide as its section, which is zero free space, and a percentage position cannot move something with nowhere to go. It worked, and it cost the thing it was not supposed to. Rendering the wave a tenth larger moves which part of the ribbon is in view, and the values band had been matched to 135:3011 pixel by pixel in an earlier pass -- mean error 8.04 against the frame. Compared again after the size bump, the live band's ribbon sits in a different place from the frame's and reads fainter on the left, which is what the client saw and called an opacity problem. So these four stop drifting and BREATHE instead: the size animates between 100% and 107%, and 100% is `cover`/`contain` to the pixel for all four -- each of these images has its section's own aspect, which is why they had no free space in the first place. At rest the wave is exactly where the frame puts it; the movement is a slow swell rather than a slide. The other four are untouched. The story, investigator and blog heroes are corner tiles with 700-975px of room, their placement is unaffected by the drift, and they keep it. ========================================================================== */ @keyframes pwd-wave-breathe { 0% { background-size: 100% auto; } 50% { background-size: 107% auto; } 100% { background-size: 100% auto; } } /* The height-driven pair: their natural aspect is their section's, so `auto 100%` and `100% auto` render identically -- stated as height because that is the axis `cover` was fitting. */ @keyframes pwd-wave-breathe-h { 0% { background-size: auto 100%; } 50% { background-size: auto 107%; } 100% { background-size: auto 100%; } } @media (prefers-reduced-motion: no-preference) { /* 135:1638 -- the Who We Are hero. Back to `cover`'s own placement. */ .pwd-wave.pwd-wave--l { background-size: auto 100% !important; background-position: left center !important; animation: pwd-wave-breathe-h 11s ease-in-out infinite; } /* 135:3011 -- the values band, the one that was matched to the frame. */ .pwd-wave.pwd-wave--c { background-size: auto 100% !important; background-position: center center !important; animation: pwd-wave-breathe-h 13s ease-in-out infinite; } /* 135:3968 and Group 135:4788 -- both Community Service waves are fitted to their section's WIDTH and sit on its bottom edge. */ .pwd-wave.pwd-wave--b { background-size: 100% auto !important; background-position: center bottom !important; animation: pwd-wave-breathe 12s ease-in-out infinite; } } /* With the animation off, every one of the four is exactly what the frame states -- no leftover 112%, no leftover drift. */ @media (prefers-reduced-motion: reduce) { .pwd-wave.pwd-wave--l { background-size: auto 100% !important; } /* --c is measured from its width here too, or a visitor who asks for less motion is the one person still shown a wave that stops at 61% of a wide screen. */ .pwd-wave.pwd-wave--c, .pwd-wave.pwd-wave--b { background-size: 100% auto !important; } } /* ========================================================================== pwd-about5 -- 2026-09-07, read off the frames after the client put both About Us pages beside them. Every number below is quoted from the node it came from. Nothing here is a judgement about what looks better. ========================================================================== */ /* --- the hero mission card is GLASS, not a plate (135:2304) -------------- The frame's quote-box is a linear gradient whose PAINT opacity is 0.40, over three stops that are themselves 0.70 / 0.40 / 0.65 alpha -- so the card is between 16% and 28% opaque -- with a 20px glass blur behind it and a #E1D5FB hairline. Its gradient transform is the identity, which is a left-to-right 90deg ramp. The hero swoosh (135:1638) is a group at 20% opacity rotated 33deg whose render bounds are the whole 1440x771 band, so the ribbon is MEANT to carry on through the card. It was built as a flat #FAF8FD plate instead, and the difference is measurable rather than a matter of taste: sampled across the card against the frame's own render, the pixels inside it varied by 0 levels where Figma varies by 20. A ribbon that stops dead at a card's edge is what the client meant by "card mein opacity honi chahiye, peechay wave nazar aati rahe". Why this is CSS and not the column's Divi settings: Divi's colour picker holds one colour and this is three stops, and backdrop-filter is not a Divi setting at all. The column's own opaque background and its hairline colour ARE settings and are changed there, so the client still owns them -- see about5/patch-content.php. This file only states the two things a module cannot say about itself. ------------------------------------------------------------------------ */ .pwd-a-herorow > .et_pb_column.pwd-a-card { background-color: transparent !important; background-image: linear-gradient( 90deg, rgba( 242, 237, 255, 0.28 ) 0%, rgba( 250, 247, 255, 0.16 ) 50%, rgba( 245, 240, 255, 0.26 ) 100% ) !important; -webkit-backdrop-filter: blur( 20px ); backdrop-filter: blur( 20px ); } /* --- the partner row goes back on the 1240 shell ------------------------ 135:4685 PartnerCardsRow really is x=24 w=1392, and the row was moved onto those numbers earlier today. On the frame that reads as a deliberate full-bleed strip because the frame's own render is 2320 wide and shows all six cards; on a 1440 browser it shows three and a half, starting 76px to the left of every other band on the page, which reads as a mistake. The client asked where it starts and how wide it is within the hour, so it goes back. The width itself is the ROW'S OWN Divi setting (max_width 1240px), so the about4 block that overrode it with !important is deleted rather than overridden again -- layering a second !important on top would take the width away from the builder for good. See about5/patch-css.php. What actually made the row start on the wrong card was the auto-scroll: it had already advanced 384px by the time the page settled, so the first partner was off the left edge. That is removed in pw-design.js. ------------------------------------------------------------------------ */ /* --- the chosen tab's tick is white (135:4735) -------------------------- 135:4734 is a 22px disc filled Lavender/Primary/600 holding a 10x8 check in Neutral/White. The disc had been given the purple and the glyph left at the card's own #595F6B, so the tick was grey on purple -- which at 12px reads as no tick at all. This is the client's "scroll par activate button ka tick colour check karo". ------------------------------------------------------------------------ */ .pwd-cs-tabs > .et_pb_column.pwd-cs-tab--on .pwd-cs-tabmark, .pwd-cs-tabs > .et_pb_column.pwd-cs-tab--on .pwd-cs-tabmark svg, .pwd-cs-tabs > .et_pb_column.pwd-cs-tab--on .pwd-cs-tabmark .pwd-inline-icon { color: #FFFFFF; } /* --- and the leadership row keeps no controls --------------------------- The chevrons and the dots are built by pw-design.js, so a row that is not to have them is simply not given them: the row carries pwd-a-nonav and the script skips it. It stays the native scroller it has always been -- finger, trackpad and touch all still move it -- and taking that one word off the row's CSS Class in the builder brings the arrows and dots straight back. Nothing is needed here for that. What IS needed is the gap the dots used to hold open: with no .pwd-a-carousel-wrap under the row the band would otherwise close up by the dots' own 10px and their 24px of margin. ------------------------------------------------------------------------ */ .pwd-a-teamrow.pwd-a-carousel.pwd-a-nonav { margin-bottom: 34px !important; } /* ========================================================================== pwd-wave-swell -- the breathing four, with the !important taken account of The previous block animated `background-size` and pinned it with !important in the same rule, so the declaration beat its own animation and all four sat at 100% for ever. That is the third time on this page: an !important author declaration is the one thing a CSS animation cannot override, whatever its specificity. The !important has to stay -- Divi writes `cover` and `contain` for these sections from a selector carrying an id -- so the animation moves a registered custom property INSIDE the declaration, exactly as the two blog heroes already do for their position. --pwd-swell rests at 100%, which is `cover`/`contain` to the pixel for all four of these images: each has its own section's aspect, which is why they had no room to slide in the first place. A browser without @property gets the 100% fallback and a wave that is exactly where the frame puts it. ========================================================================== */ @property --pwd-swell { syntax: ""; inherits: false; initial-value: 100%; } @keyframes pwd-wave-swell { 0% { --pwd-swell: 100%; } 50% { --pwd-swell: 107%; } 100% { --pwd-swell: 100%; } } @media (prefers-reduced-motion: no-preference) { /* 135:1638 -- the hero, fitted to its section's HEIGHT by `cover`. */ .pwd-wave.pwd-wave--l { background-size: auto var(--pwd-swell, 100%) !important; animation: pwd-wave-swell 11s ease-in-out infinite; } /* 135:3011 -- the values band is fitted to its WIDTH, like --b below and unlike the hero above it. Sized from its height the wave's width was a constant ~1620 whatever the screen: it covered 106% of the band at 1440, 80% at 1920 and 61% at 2560, so on a wide screen it stopped short with plain ground either side, which is what the client read as the band not being full width. The swell still breathes; what changed is which side it is measured from. The CARD is untouched -- 135:3656 states its 1240. */ .pwd-wave.pwd-wave--c { background-size: var(--pwd-swell, 100%) auto !important; animation: pwd-wave-swell 13s ease-in-out infinite; } /* 135:3968 and Group 135:4788 -- fitted to their section's WIDTH. */ .pwd-wave.pwd-wave--b { background-size: var(--pwd-swell, 100%) auto !important; animation: pwd-wave-swell 12s ease-in-out infinite; } } /* ========================================================================== pwd-wave-origin -- WHERE THE WHO WE ARE WAVE STARTS Figma 135:1638 The client put the page beside the frame and asked where the wave is meant to start, and said the card needed opacity so the wave carries on behind it. The card was made glass earlier today (pwd-about5 above, 135:2304) and is correct -- and there was still nothing to see through it, because the half of the ribbon the card sits on had been cropped off the page. 135:1638 is a GROUP at opacity 0.2 rotated 33.09deg. Its bounding box is 2024.7 x 1558.9 at (-243, 178) -- so the geometry begins 57px ABOVE the hero's own top edge -- and because the hero clips it, its absoluteRenderBounds are the hero exactly: 1440 x 771 at (0, 235). The export is that render, 1440x771 to the pixel, which is the section's own box. So the frame's placement is the image at 1:1, and the ribbon ENTERS AT THE TOP RIGHT and sweeps down to the left. The section was pinned `background-position: left center !important` (pwd-wave-drift-4, line ~9860) under the reading that this was "cover's own placement". It is not: an image whose aspect equals its container's has no crop under `cover`, so at rest left and centre are the same picture and the pin looked harmless. It stops being harmless the moment the wave breathes. `pwd-wave-swell` takes the size to 107%, the image becomes 1535 wide in a 1440 box, and anchored left the whole of that 95px comes off the RIGHT -- which is the top-right corner the ribbon enters through, and the side the mission card sits on (135:2303 is at x=820). Measured on the live page before this: background-size `auto 106.6%`, background-position `0% 50%`. So for all but an instant of each 11s cycle the wave started somewhere the frame does not start it, and the card -- correctly transparent, correctly blurred -- had a blank white hero behind it. Centre is not a preference here, it is the only anchor that swells about the frame's own placement: 100% is the frame exactly, and every percent above it gives equally at both edges instead of eating one of them. It is what `pwd-wave--c` next door already does, for the same reason. The section's own Divi setting is moved to `center_center` with it (wave-origin/patch-content.php), so the builder and the stylesheet say the same thing and the client can still change it. This declaration has to carry !important only because the one it supersedes does. ========================================================================== */ .pwd-wave.pwd-wave--l { background-position: center center !important; } /* ========================================================================== pwd-partners-width -- 135:4685's own width PartnerCardsRow is x=24 width=1392 in the frame: 24px in from each edge of the 1440 page, NOT on the 1240 content shell the heading above it sits on. The band was built on the shell so the first card lined up with that heading, and this file carried that as a deliberate departure. The client has now read the frame and asked for the frame. Re-applied 2026-09-07 after it went missing from this stylesheet -- the scrollbar rule that used to sit directly under it survived, which is how it was noticed. Nothing else in this block, and nothing else touched. Six 360-wide cards 24 apart still overflow and still scroll; what changes is where the window onto them begins. The firstpaint block caps every row on a designed page at the shell from a seven-class selector, so this has to say !important to be the width the frame states. ========================================================================== */ /* 135:4685 sits at x=24 in a 1440 frame, which is 24 from each page EDGE and not a 1392 box. Written as min(1392px, ...) the row froze at 1392 and the auto margins centred it, so a 2560 screen showed 584 of gutter either side -- and 1440 could not see it, because there the two say the same 1392. Below 1439 the responsive ladder governs this row, so this only decides what happens above the one width the frame draws. */ .pwd-cs-partners { width: calc(100vw - 48px) !important; max-width: calc(100vw - 48px) !important; margin-left: auto !important; margin-right: auto !important; } /* ========================================================================== pwd-values-card-opacity -- asked for, and a departure from the frame 135:3656's wash is a gradient at paint opacity 0.70 and the pwd-about3 block above states it as such. The client asked for the card to be a little more transparent so the band's own ribbon (135:3011's video fill) carries through it, so both rows are 0.55 now. Safe rather than assumed: over the darkest pixel of the wave that falls under the card -- (215,206,221) -- the card reads (232,226,240), which is 5.07:1 for the body copy #5F5D6B and 13.99:1 for the headings. Both clear AA, and the wave is faint enough that even 0.30 would hold 4.67:1, so the number is a look and not a legibility floor. The rows carry the same wash as their own Divi gradient (card-opacity.php) and that outranks this -- which is where the client changes it. This is the half that applies if the setting is ever cleared, and it supersedes the 0.7 stated in pwd-about3 above rather than editing it, because more than one session is in this file. ========================================================================== */ .pwd-a-valuestop, .pwd-a-valuesgrid { background-image: linear-gradient( 90deg, rgba( 245, 243, 255, 0.55 ) 0%, rgba( 255, 255, 255, 0.55 ) 55%, rgba( 245, 243, 255, 0.55 ) 100% ) !important; } /* ========================================================================== pwd-values-card-opacity-2 -- the second step down, asked for again 135:3656's wash is a gradient at paint opacity 0.70. It went to 0.55 earlier today (pwd-values-card-opacity above) because the client asked for the band's ribbon to read through the card; they asked for less again, so both rows are 0.35 now. This is a deliberate departure from the frame, requested, and recorded as one. Measured rather than assumed. Over the DARKEST pixel of the band's wave that falls under the card -- (215,206,221) -- the card reads (226,219,233), which is 4.76:1 for the body copy #5F5D6B and 13.12:1 for the headings. Both clear AA. The floor over THIS wave is 0.20 (4.51:1); below that the body copy fails AA. So there is room left, and 0.35 is a look rather than a limit -- but the floor is tied to this artwork and moves if the band's image is ever replaced with a darker one. The rows carry the same wash as their own Divi gradient (card-opacity2.php) and that outranks this, which is where the client changes it. This is the half that applies if the setting is ever cleared, and it supersedes the 0.55 above rather than editing it, because more than one session is in this file. ========================================================================== */ .pwd-a-valuestop, .pwd-a-valuesgrid { background-image: linear-gradient( 90deg, rgba( 245, 243, 255, 0.35 ) 0%, rgba( 255, 255, 255, 0.35 ) 55%, rgba( 245, 243, 255, 0.35 ) 100% ) !important; } /* ========================================================================== pwd-team-snap -- the team row lands ON a card, not 19px short of one The row is 1640 wide in 1240, so it can scroll 400. One card is 413 (389 and a 24 gap), and the second card's own boundary is at 419 -- past the end. So the auto-scroll asked for 419, was clamped to 400, and the card it moved to arrived at x=119 with the one before it sliced down the left edge, instead of sitting flush at x=100 like every other band on the page. The shortfall is the row's own padding: 6px each side so a card's shadow is not clipped, plus the gap. Giving the row 40 of scrollable room on the right makes 419 reachable, so each shift now rests exactly on a card's left edge. Nothing else moves -- the padding is inside the scroller, so the cards, the heading above them and the shell they sit on are all where they were. ========================================================================== */ .pwd-a-teamrow.pwd-a-carousel { padding-right: 40px; } /* ========================================================================== pwd-team-snap-2 -- the spacer has to be a flex ITEM, not padding The previous block gave the row 40px of padding-right so its second card's boundary at 419 would be reachable. It changed nothing: Chrome does not count a flex container's padding-right in scrollWidth, so max travel stayed at 400 and the row still rested 19px short, with the card before it sliced down the left edge. A margin on the LAST card is counted, because that is a flex item's own box. Divi writes column margins itself from a selector carrying an id, so this has to say !important to be there at all. 40 rather than 19 so the boundary is comfortably inside the travel and the arithmetic does not have to be exact at every width. ========================================================================== */ .pwd-a-teamrow.pwd-a-carousel { padding-right: 0; } .pwd-a-teamrow.pwd-a-carousel > .et_pb_column:last-child { margin-right: 40px !important; } /* ========================================================================== pwd-team-leftonly -- one chevron, on the left 135:2963's carousel-row is 1748 wide inside a 1240 frame and carries a Chevron Slider at each end, x=0 and x=1698. The frame clips it, so the right one is outside what the design shows -- "only back navigation", in the client's words, and it is the frame's own arrangement rather than a preference. The dots (135:3004) stay off: the frame draws six of them for four people, which is a placeholder, and the row moves on its own now anyway. Hidden rather than not built, so the carousel keeps one code path and putting pwd-a-nonav back on the row still turns everything off at once. ========================================================================== */ .pwd-a-teamrow.pwd-a-carousel ~ .pwd-a-cbtn--next, .pwd-a-carousel-wrap .pwd-a-cbtn--next, .pwd-a-carousel-wrap .pwd-a-cdots { display: none !important; } /* ========================================================================== pwd-team-nosnap -- snap and a per-frame glide cannot both have the row The team row carries scroll-snap-type: x mandatory. That was fine while the auto-scroll moved a whole card and stopped: the snap agreed with where it landed. It is not fine now that the row is moved every frame -- Chrome snapped it straight back to the first card on each one, and the row sat perfectly still while the partner row beside it glided at 62px/s. Measured: 28 of 28 samples identical on the team row, 0 of 25 on the partners. This was tried once before, on a wrong diagnosis, and reverted -- correctly, because nothing then needed it. The glide does. ========================================================================== */ .pwd-a-teamrow.pwd-a-carousel { scroll-snap-type: none; } /* ========================================================================== pwd-team-noscrollsmooth -- the glide provides its own smoothness The team row also carries scroll-behavior: smooth, which was right while the auto-scroll jumped a whole card at a time. Against a per-frame glide it is the thing that stalls it: every frame sets a target a fraction of a pixel away, and the browser starts a fresh smooth animation towards each one, so the row creeps at 5px/s instead of 138. Measured after turning snap off: 19 of 26 samples still, ~5px/s, against the partner row's 72px/s. Snap was not the cause; this is. The chevron still animates, because that goes through scrollTo({behavior: 'smooth'}) which asks for it explicitly rather than relying on the property. ========================================================================== */ .pwd-a-teamrow.pwd-a-carousel { scroll-behavior: auto; } /* ========================================================================== pwd-team-chev -- the back button sits at the start, and shows it is off 135:2963 puts its Chevron Slider at x=0 of the carousel and the first team card at x=74 -- the button is BESIDE the cards, not over them. Ours sat at left:-25px, overlapping card one, and at rest it was opacity:0, so on the first card there was simply nothing there. The client asked for it to be present at the start and plainly disabled, which is what the frame draws. Three things: * the button moves to the carousel's own left edge (left: 0) * the row is padded 74 so card one starts after it, as 135:2966 does * disabled is 0.35 opacity rather than 0 -- visible, obviously not usable, and still pointer-events: none so it cannot be clicked ========================================================================== */ .pwd-a-carousel-wrap .pwd-a-cbtn--prev { left: 0 !important; } .pwd-a-teamrow.pwd-a-carousel { padding-left: 74px; } .pwd-a-carousel-wrap .pwd-a-cbtn--prev:disabled, .pwd-a-carousel-wrap .pwd-a-cbtn--prev[disabled] { opacity: 0.35 !important; pointer-events: none; cursor: default; } /* ========================================================================== pwd-team-chev-2 -- the padding has to beat an !important The row states `padding: 12px 6px 14px !important`, so the 74 of left room the chevron needs could not be written at the same specificity. 135:2966 puts card one at x=74 of the carousel, with the Chevron Slider in the 0-50 before it -- the button is beside the cards, not over them. ========================================================================== */ .pwd-a-teamrow.pwd-a-carousel { padding-left: 74px !important; } /* ========================================================================== pwd-team-threefit -- three whole cards in the window 135:2963's own arithmetic does not quite close. The carousel frame is 1240, the Chevron Slider takes 0-50 and card one starts at 74, and the cards are 389.33 with 24 between them: 74 + 389 + 24 + 389 + 24 + 389 = 1289 which is 49 past the frame, so the third card is clipped in the frame too -- by about 21 there and 49 here, because ours makes card one 389 where the frame makes it 360. Either way the band shows two cards and most of a third, and the client asked for three. The room for the chevron is the frame's (74) and the gap is the frame's (24), so the card is what gives: (1240 - 74 - 48) / 3 = 372.67 372 leaves 2px of slack, which is what keeps the third card's shadow inside the scroller rather than clipped by it. ========================================================================== */ .pwd-a-teamrow.pwd-a-carousel > .et_pb_column { flex: 0 0 372px !important; width: 372px !important; max-width: 372px !important; } /* ==== PWRESP:shell ==== */ /* ------------------------------------------------------------------------- THE SIDE GUTTER -- every designed page has been without one below 1240 since the screens were built. The client put the site on a phone and said the content was touching both edges. It was: at 768 every band measured x=0 w=768, at 390 x=0 w=390. Ten screens, every width under 1240. And it is OUR rule that removed it. Divi's own default is `.et_pb_row { width: 80% }`, which would have given a 10% gutter; the first-paint block (checks 73, 94) states `width: min(1240px, 100%)`, and 100% at 768 is 768. That rule exists to REPRODUCE what Divi's page CSS says one frame later -- and Divi's page CSS says `width: 100%` too, so both halves of the cascade agreed on no gutter and neither looked wrong. Meanwhile the NAVBAR has had a gutter all along: .pwd-shell pads by --pw-gutter, clamp(16px, 5vw, 100px). So the bar and the content under it have never shared a left edge below 1440 -- 1152 against 1240 at 1280, 691 against 768 at 768, 351 against 390 at 390. The "navbar ka issue" in the report is this same fault seen from the other side, not a second one. --------------------------------------------------------------------- WHY width, AND NOT max-width, AND NOT padding ON THE SECTION. Two wrong answers were tried and measured first, and each is worth keeping because each looked right. PADDING ON THE SECTION took the client's own settings away. Divi writes a section's padding from `.et_pb_section_1.et_pb_section` -- an inline