/* PD Modules storefront. Deliberately restrained and theme-agnostic: it inherits the site's fonts and sits inside the theme's header and footer, so it reads as part of the site rather than an embedded app. Colours are defined once at the top so a designer can retune the whole store without hunting through rules. */ /* TOKENS ON :root, not on .pdmm-wrap. They were scoped to the page wrapper, so the mega-menu panel — which renders inside the theme's own menu markup and never sees .pdmm-wrap — resolved var(--pdmm-accent) to nothing. An invalid background is transparent, so its button was white text on white, invisible and still clickable. Every name here is prefixed, so defining them globally cannot collide with the theme's. */ :root { --pdmm-ink: #1f2430; /* used only on surfaces this stylesheet paints */ --pdmm-dim: #5b6472; --pdmm-line: #e3e6ec; --pdmm-bg: #f6f7f9; --pdmm-accent: #d32027; /* PD Hosting red, so buttons match the rest of the site */ --pdmm-accent-dark: #b01a20; --pdmm-radius: 10px; } .pdmm-wrap { max-width: 1180px; margin: 0 auto; padding: 42px 20px 72px; /* No `color` here on purpose. Setting it made every heading and paragraph use OUR palette over the THEME's background — and on a light theme viewed with a dark OS preference that was light text on white. The wrapper is transparent; only painted surfaces below state a colour. */ } /* Headings and running text INHERIT the theme's own colour. Setting them from our palette guessed at the page's background and guessed wrong: a light theme whose visitor had a dark OS preference got our light-on-light text, invisible. We only colour the surfaces we paint ourselves. */ .pdmm-head h1 { margin: 0 0 8px; line-height: 1.15; } .pdmm-intro { color: var(--pdmm-dim); margin: 0 0 26px; max-width: 62ch; } /* Search ------------------------------------------------------------------------------------------ */ .pdmm-search { display: flex; gap: 8px; margin: 0 0 22px; max-width: 620px; } .pdmm-search input[type="search"] { flex: 1; padding: 11px 14px; border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); font-size: 15px; background: #fff; color: var(--pdmm-ink); } .pdmm-search button { padding: 11px 20px; border: 0; border-radius: var(--pdmm-radius); cursor: pointer; background: var(--pdmm-ink); color: #fff; font-size: 15px; } .pdmm-search button:hover { background: #000; } /* Facets ------------------------------------------------------------------------------------------ */ .pdmm-facets { border-top: 1px solid var(--pdmm-line); border-bottom: 1px solid var(--pdmm-line); padding: 16px 0; margin-bottom: 22px; } /* Each group gets its own row with its label in a fixed left column. Inline, the words EXTENSIONS and PROVISIONING read as two stray chips that do nothing when clicked — they are headings, and they have to look like headings. */ .pdmm-chips { display: grid; grid-template-columns: 104px 1fr; gap: 9px 10px; align-items: start; } .pdmm-chips > .pdmm-all { grid-column: 1 / -1; justify-self: start; } .pdmm-group { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--pdmm-dim); user-select: none; padding-top: 7px; grid-column: 1; } .pdmm-chipset { grid-column: 2; display: flex; flex-wrap: wrap; gap: 7px; } @media (max-width: 620px) { .pdmm-chips { grid-template-columns: 1fr; } .pdmm-group { grid-column: 1; padding-top: 4px; } .pdmm-chipset { grid-column: 1; } } .pdmm-chip { display: inline-block; padding: 6px 13px; border: 1px solid var(--pdmm-line); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--pdmm-ink); background: #fff; line-height: 1.4; } .pdmm-chip:hover { border-color: #c9cfda; } .pdmm-chip.on { background: var(--pdmm-ink); border-color: var(--pdmm-ink); color: #fff; } .pdmm-selects { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .pdmm-selects select { /* Room on the right for the arrow the THEME paints into the padding. Without it the browser sizes the select to its widest option plus our 12px, the arrow lands on top of the last few characters, and "Integrates with anything" renders as "Integrates with anythi". A select cannot ellipsise its own value, so the reader just loses the end of the word. */ padding: 9px 36px 9px 13px; border: 1px solid var(--pdmm-line); border-radius: 8px; background: #fff; font-size: 14px; color: var(--pdmm-ink); max-width: 100%; } .pdmm-count { color: var(--pdmm-dim); font-size: 14px; margin: 0 0 14px; } /* Grid — the card the marketplaces taught us ------------------------------------------------------- Product image on top, roughly a third of the card. WHMCS's marketplace and Blesta's both do this, because it is what a buyer scans first; a small icon beside a title reads as a file list. */ .pdmm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 18px; } .pdmm-card { border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); background: #fff; color: var(--pdmm-ink); display: flex; flex-direction: column; overflow: hidden; transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .pdmm-card:hover { border-color: #c9cfda; box-shadow: 0 6px 20px rgba(20, 26, 40, .08); transform: translateY(-2px); } .pdmm-shot { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--pdmm-bg); border-bottom: 1px solid var(--pdmm-line); overflow: hidden; text-decoration: none; } /* Positioned rather than sized with height:100%. A percentage height needs a definite parent height, and `aspect-ratio` alone does not always give one — the box reserved its space and the logo inside it was simply not drawn. */ .pdmm-shot img { position: absolute; inset: 18px; width: auto; height: auto; max-width: calc(100% - 36px); max-height: calc(100% - 36px); margin: auto; object-fit: contain; display: block; } .pdmm-shot-letter { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 54px; letter-spacing: -.02em; } .pdmm-ribbon { position: absolute; top: 10px; left: 10px; background: var(--pdmm-accent); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; } .pdmm-card-body { padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } /* The selling name is a phrase, not a word — "Advanced Automatic Discounts, Bundles & Free Trials for WHMCS" — so a card gives it three lines and clamps, keeping every card the same height. */ .pdmm-card-name { font-weight: 650; font-size: 15.5px; line-height: 1.3; text-decoration: none; color: inherit; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pdmm-card-name:hover { color: var(--pdmm-accent); } .pdmm-tagline { color: var(--pdmm-dim); font-size: 13.5px; margin: 0; flex: 1; line-height: 1.5; } .pdmm-cats { display: flex; flex-wrap: wrap; gap: 5px; } .pdmm-tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--pdmm-bg); color: var(--pdmm-dim); border: 1px solid var(--pdmm-line); } .pdmm-tag--provider { background: #eef3ff; border-color: #d9e4ff; color: #2c4d9b; } .pdmm-tag--beta { background: #fff6e5; border-color: #ffe1ab; color: #9a6400; font-weight: 700; letter-spacing: .04em; } .pdmm-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--pdmm-line); padding-top: 12px; margin-top: 2px; } .pdmm-price { font-weight: 700; font-size: 15px; } .pdmm-price--free { color: #046b2d; } .pdmm-btn { display: inline-block; padding: 8px 16px; border-radius: 8px; text-decoration: none; background: var(--pdmm-accent); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; } .pdmm-btn:hover { background: var(--pdmm-accent-dark); color: #fff; } .pdmm-btn--big { padding: 13px 26px; font-size: 16px; width: 100%; text-align: center; box-sizing: border-box; } /* Rating — drawn only when there is one. An empty five-star rail advertises that nobody rated it. */ .pdmm-stars { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; line-height: 1; } .pdmm-star { color: #d7dbe3; } .pdmm-star.on { color: #f0a500; } .pdmm-star.half { background: linear-gradient(90deg, #f0a500 50%, #d7dbe3 50%); -webkit-background-clip: text; background-clip: text; color: transparent; } .pdmm-stars-n { color: var(--pdmm-dim); font-size: 12px; margin-left: 5px; } .pdmm-featured { margin-bottom: 34px; } .pdmm-featured h2 { margin: 0 0 14px; font-size: 19px; } .pdmm-pager { margin-top: 30px; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; } .pdmm-pager .page-numbers { padding: 8px 14px; border: 1px solid var(--pdmm-line); border-radius: 8px; text-decoration: none; color: var(--pdmm-ink); background: #fff; } .pdmm-pager .page-numbers.current { background: var(--pdmm-ink); border-color: var(--pdmm-ink); color: #fff; } .pdmm-empty { padding: 40px 0; color: var(--pdmm-dim); } .pdmm-bundles { margin-top: 54px; border-top: 1px solid var(--pdmm-line); padding-top: 32px; } .pdmm-bundles h2 { margin: 0 0 16px; font-size: 21px; } .pdmm-bundle { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; align-items: center; border: 1px solid #d9e0f5; border-radius: var(--pdmm-radius); padding: 26px 28px; background: linear-gradient(135deg, #f4f6ff, #fbfcff); color: var(--pdmm-ink); } .pdmm-bundle + .pdmm-bundle { margin-top: 14px; } .pdmm-bundle-text h3 { margin: 0 0 7px; font-size: 21px; line-height: 1.2; } .pdmm-bundle-text p { margin: 0; color: var(--pdmm-dim); font-size: 14.5px; line-height: 1.55; } .pdmm-bundle-count { margin-top: 7px !important; font-weight: 600; color: #2c4d9b !important; } .pdmm-bundle-buy { text-align: right; } .pdmm-bundle-price { display: block; font-size: 30px; font-weight: 700; line-height: 1.1; } .pdmm-bundle-price small { font-size: 15px; font-weight: 600; color: var(--pdmm-dim); } .pdmm-bundle-saving { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; background: #e7f6ec; color: #046b2d; border-radius: 999px; padding: 3px 10px; } .pdmm-bundle-buy .pdmm-btn--big { margin-top: 12px; } @media (max-width: 760px) { .pdmm-bundle { grid-template-columns: minmax(0, 1fr); } .pdmm-bundle-buy { text-align: left; } } /* Single ------------------------------------------------------------------------------------------ */ .pdmm-crumbs { font-size: 13px; color: var(--pdmm-dim); margin-bottom: 18px; display: flex; gap: 6px; flex-wrap: wrap; } .pdmm-crumbs a { color: var(--pdmm-dim); } .pdmm-notice { background: #fff6e5; border: 1px solid #ffe1ab; color: #7a5200; padding: 13px 16px; border-radius: var(--pdmm-radius); margin-bottom: 22px; } /* The product image leads, at the size a marketplace gives it — WHMCS's and Blesta's product pages both run about 180px, and it is the first thing a buyer looks at. */ .pdmm-hero { display: grid; grid-template-columns: 190px 1fr 310px; gap: 26px; align-items: start; margin-bottom: 34px; } .pdmm-hero-logo { width: 190px; height: 130px; border-radius: var(--pdmm-radius); object-fit: contain; background: var(--pdmm-bg); border: 1px solid var(--pdmm-line); padding: 14px; box-sizing: border-box; font-size: 46px; } span.pdmm-hero-logo { display: flex; align-items: center; justify-content: center; padding: 0; } .pdmm-hero-text h1, .pdmm-hero-text .pdmm-hero-title { margin: 0 0 8px; line-height: 1.14; font-size: clamp(26px, 3.2vw, 38px); font-weight: 700; } .pdmm-hero-text .pdmm-tagline { font-size: 16px; margin-bottom: 10px; } .pdmm-maker { color: var(--pdmm-dim); font-size: 13.5px; margin: 6px 0 10px; } .pdmm-maker a { font-weight: 600; } .pdmm-buybox { border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); padding: 20px; background: #fff; color: var(--pdmm-ink); } .pdmm-buybox .pdmm-price { display: block; font-size: 26px; margin-bottom: 14px; } .pdmm-buy-note, .pdmm-pro-note, .pdmm-meta { font-size: 12.5px; color: var(--pdmm-dim); margin: 12px 0 0; line-height: 1.5; } /* Gallery. Without JavaScript every slide is visible and stacked — a worse gallery but a complete page. `is-interactive` is added by the script, and only then does anything get hidden. */ .pdmm-gallery { margin-bottom: 38px; outline: none; } .pdmm-gallery-main { position: relative; } .pdmm-gallery-slide { margin: 0 0 16px; } .pdmm-gallery.is-interactive .pdmm-gallery-slide { display: none; margin: 0; } .pdmm-gallery.is-interactive .pdmm-gallery-slide.on { display: block; } .pdmm-gallery-slide img { width: 100%; border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); display: block; background: var(--pdmm-bg); } /* Room for the counter, which is pinned bottom-right of the frame and was sitting on top of the last words of the caption. */ .pdmm-gallery-slide figcaption { font-size: 13.5px; color: var(--pdmm-dim); margin-top: 10px; padding-right: 74px; } .pdmm-gallery-nav { position: absolute; top: 38%; transform: translateY(-50%); border: 0; cursor: pointer; width: 42px; height: 42px; border-radius: 50%; background: rgba(20, 26, 40, .62); color: #fff; font-size: 24px; line-height: 1; display: none; } .pdmm-gallery.is-interactive .pdmm-gallery-nav { display: block; } .pdmm-gallery-nav:hover { background: rgba(20, 26, 40, .82); } .pdmm-gallery-prev { left: 12px; } .pdmm-gallery-next { right: 12px; } .pdmm-gallery-count { position: absolute; right: 12px; bottom: 12px; background: rgba(20, 26, 40, .62); color: #fff; font-size: 12px; padding: 3px 9px; border-radius: 999px; display: none; } .pdmm-gallery.is-interactive .pdmm-gallery-count { display: block; } .pdmm-gallery-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .pdmm-thumb { flex: none; width: 108px; height: 68px; padding: 0; cursor: pointer; background: var(--pdmm-bg); border: 2px solid var(--pdmm-line); border-radius: 7px; overflow: hidden; } .pdmm-thumb.on { border-color: var(--pdmm-accent); } .pdmm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pdmm-compat { font-size: 13px; color: #046b2d; margin: 0 0 12px; font-weight: 600; } /* ONE measure for the whole body. The prose was capped at 72ch for readability while the FAQ and the what's-new block spanned the full container, so paragraphs stopped mid-page against an empty gutter and read as cut off — the measure was fine, the inconsistency was not. Everything below the hero now shares the same column, wide enough to look deliberate and narrow enough to read. */ /* ONE measure, set ONCE, on the container. There was a second cap on the paragraphs themselves — max-width: 78ch — and `ch` is the width of the font's "0" glyph, so in this theme's narrow face 78ch came out at 613px inside an 860px column. Every paragraph stopped 247px short of the FAQ boxes beside it, which is what read as text being cut off. The container is in px for that reason: it is the one number, and it does not change meaning when the theme's font does. */ /* Prose at a readable width, facts beside it. 760px is the reading column — 1110 would be 140 characters a line — and the space that leaves is now the "At a glance" panel rather than nothing. The prose, the FAQ and the what's-new block share the first column, so they all end on the same line; only the panel sits outside it. */ .pdmm-body { display: grid; grid-template-columns: 760px minmax(0, 1fr); gap: 34px 40px; align-items: start; max-width: none; } .pdmm-body > .pdmm-prose, .pdmm-body > .pdmm-faq, .pdmm-body > .pdmm-whatsnew { grid-column: 1; } .pdmm-prose { line-height: 1.65; } .pdmm-facts { /* 96px, not 24: the theme's navbar is position:fixed and 72px tall, so a smaller offset slid the panel's first rows underneath it. Measured on the page rather than guessed — and the admin bar adds another 32px for a signed-in editor, which is what body.admin-bar accounts for below. */ grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 96px; border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); background: #fff; color: var(--pdmm-ink); padding: 20px; } .pdmm-facts h2 { margin: 0 0 12px; font-size: 15px; letter-spacing: .01em; } .pdmm-facts dl { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; font-size: 13.5px; } .pdmm-facts dt { color: var(--pdmm-dim); } .pdmm-facts dd { margin: 0; font-weight: 600; } .pdmm-facts dd a { color: inherit; } .pdmm-trademark { margin: 14px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--pdmm-dim); border-top: 1px solid var(--pdmm-line); padding-top: 12px; } @media (max-width: 1080px) { /* Below this the two columns stop fitting; the panel drops under the prose rather than squeezing it. */ .pdmm-body { grid-template-columns: minmax(0, 1fr); max-width: 760px; } .pdmm-facts { grid-column: 1; grid-row: auto; position: static; } } .pdmm-prose h3 { margin-top: 22px; } /* The website sales page: sections breathe, steps read as steps, screenshots sit beside what they show. */ .pdmm-prose h2 { margin-top: 40px; } .pdmm-prose ol { padding-left: 22px; } .pdmm-prose ol li, .pdmm-prose ul li { margin-bottom: 6px; } .pdmm-figure { margin: 22px 0 28px; } .pdmm-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); box-shadow: 0 6px 22px rgba(20, 28, 45, .08); background: #fff; } .pdmm-figure figcaption { margin-top: 9px; font-size: 13px; line-height: 1.5; color: var(--pdmm-dim); } .pdmm-faq details { border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); padding: 13px 16px; margin-bottom: 9px; background: #fff; } .pdmm-faq summary { cursor: pointer; font-weight: 600; } .pdmm-related { margin-top: 52px; max-width: none; border-top: 1px solid var(--pdmm-line); padding-top: 30px; } @media (max-width: 980px) { .pdmm-hero { grid-template-columns: 130px 1fr; } .pdmm-hero-logo { width: 130px; height: 96px; } .pdmm-buybox { grid-column: 1 / -1; } } /* NO prefers-color-scheme block. There was one, and it was wrong in the way that is easy to miss: prefers-color-scheme reports the VIEWER'S OS preference, not the PAGE'S background. On a light site it turned the cards dark navy for anyone whose laptop is in dark mode and left them white for everyone else — the same page, two different designs, neither of them chosen. A plugin dropping content into somebody else's theme cannot know what colour the page behind it is, so it paints one set of surfaces and stops guessing. */ /* Landing ------------------------------------------------------------------------------------------ Sits inside an existing page, below whatever hero that page already has, so it opens with a statement rather than a second banner. */ .pdmm-home { padding-top: 26px; } /* THE ENTRY POINT, SIZED LIKE ONE. 62ch is a good measure for a paragraph and a bad one for a page opening: the heading wrapped after three words and the whole introduction sat in the left half of the screen with the right half empty, which reads as a section that ran out rather than the front of a product line. The heading now runs full width and only the body text keeps a readable measure. */ .pdmm-home-lead { margin-bottom: 34px; } .pdmm-home-lead h2 { margin: 0 0 12px; line-height: 1.12; font-size: clamp(28px, 3.6vw, 42px); max-width: 22ch; } .pdmm-home-lead p { color: var(--pdmm-dim); font-size: 16.5px; line-height: 1.6; margin: 0 0 10px; max-width: 78ch; } .pdmm-home-lead .pdmm-home-lede { font-size: 18.5px; color: var(--pdmm-ink); } .pdmm-home-scope { display: block; margin-top: 4px; font-size: 13.5px; } .pdmm-home-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* Platform is the first question, so it gets the first and largest choice on the page. */ .pdmm-home-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 46px; } .pdmm-platform { display: flex; flex-direction: column; gap: 5px; padding: 26px 26px 22px; text-decoration: none; border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); background: #fff; color: var(--pdmm-ink); transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease; } .pdmm-platform:hover { border-color: var(--pdmm-accent); box-shadow: 0 6px 20px rgba(20,26,40,.08); transform: translateY(-2px); color: var(--pdmm-ink); } .pdmm-platform-name { font-size: 25px; font-weight: 700; line-height: 1.1; } .pdmm-platform-count { color: var(--pdmm-dim); font-size: 14px; } .pdmm-platform-go { color: var(--pdmm-accent); font-weight: 600; font-size: 14px; margin-top: 10px; } .pdmm-home-group { margin-bottom: 38px; } .pdmm-home-group h3 { margin: 0 0 4px; font-size: 19px; } .pdmm-home-blurb { color: var(--pdmm-dim); margin: 0 0 16px; font-size: 14.5px; } .pdmm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 11px; } .pdmm-tile { display: flex; align-items: center; gap: 11px; padding: 14px 16px; text-decoration: none; border: 1px solid var(--pdmm-line); border-radius: var(--pdmm-radius); background: #fff; color: var(--pdmm-ink); font-size: 14.5px; } .pdmm-tile:hover { border-color: var(--pdmm-accent); color: var(--pdmm-ink); } .pdmm-tile-icon { font-size: 20px; line-height: 1; } .pdmm-tile-name { flex: 1; font-weight: 600; line-height: 1.3; } .pdmm-tile-count { color: var(--pdmm-dim); font-size: 12px; font-weight: 700; background: var(--pdmm-bg); border-radius: 999px; padding: 3px 9px; min-width: 20px; text-align: center; } .pdmm-home-featured { margin-bottom: 46px; } .pdmm-home-featured h3 { margin: 0 0 14px; font-size: 19px; } .pdmm-home-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin: 8px 0 40px; padding-top: 32px; border-top: 1px solid var(--pdmm-line); } .pdmm-why h4 { margin: 0 0 7px; font-size: 16px; } .pdmm-why p { color: var(--pdmm-dim); margin: 0; font-size: 14.5px; line-height: 1.6; } .pdmm-home-cta { text-align: center; margin: 0; } .pdmm-home-cta .pdmm-btn--big { width: auto; display: inline-block; } /* The theme's page-title band STAYS. Hiding it removed the page header and the breadcrumb along with it, so module pages stopped matching every other page on the site — a worse problem than the one it solved. The duplicate heading is dealt with by giving the band the right text and dropping our own repeat of it, not by deleting the site's furniture. */ /* WordPress's admin bar pushes the whole page down for a signed-in editor, so the sticky offset has to follow it — otherwise the panel is correct for visitors and wrong for whoever is editing the site. */ body.admin-bar .pdmm-facts { top: 128px; } /* Mega menu ---------------------------------------------------------------------------------------- Sits inside the theme's own .mega-menu-content, which supplies the drop animation but NOT a surface — it is transparent, and each of the site's own mega templates paints its own background inside its Elementor container. So this panel paints its own; without it the hero text read straight through the menu. */ /* The 8px is the house measurement, not a guess: each of the site's own mega templates carries a top margin that drops its panel clear of the header, and this one was flush against it — the reason it read as opening higher than the others. The shadow went with it. At 40px of blur behind an 18px offset it spread some 22px ABOVE the panel, painting a smudge up into the header beside the logo, and the theme's own panels cast none. */ .pdmm-menu-panel { background: #fff; margin-top: 8px; } /* The panel is rendered INSIDE the theme's