/* Practice subnav mega-panel content — shared by every add-on/Millwork panel rendered through the [bec_mega_panel] / [bec_mega_panel_services] shortcodes (see bluent-millwork.php). Every value below is ported verbatim from bluentcad-navigation.html CSS §1/§3/§4 — .mega-wrap, .mcol, .col-hd, .mitem, .mtitle, .mdesc, .mcol-divider, .panel-foot, .pf-lbl, .aside-note, .fam/.fam-t/.fam-c, .l2head/.l2grid/.l2/.l2-none/.l2-pf, .teaser and its t-* children, and the .w-1/.w-2/.w-3/.w-svc column-width presets — just under bec-mp- prefixed class names so nothing here can collide with the reference's own unprefixed names or anything else already on the page (see the bec-mega--{practice} collision bug documented elsewhere in this plugin for why that matters). Loaded once, only on pages that print a subnav, instead of being duplicated inline per widget — so changing a link's destination no longer needs a CSS/HTML push at all: content comes from the WP menu the shortcode reads. */ /* padding stays a fixed 40px on both sides — the row's own left/right inset; --bec-align-x (a transform, set live in bluent_render_addon_subnav()'s sync()) is the separate, sometimes-negative nudge that lines this box up with the global nav's "Microsites" item above it. Padding can't go negative, which is why that nudge isn't folded into padding-left directly. */ .bec-mp-wrap{max-width:1200px;margin:0 auto;padding:34px 40px 38px;display:grid;transform:translateX(var(--bec-align-x,0px));} /* Column-count presets, matching the reference's .w-1/.w-2/.w-3/.w-svc -- every panel carries a teaser, so the trailing 320px track is constant. */ .bec-mp-wrap--w1{grid-template-columns:minmax(0,1fr) 320px;} .bec-mp-wrap--w2{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 320px;} .bec-mp-wrap--w3{grid-template-columns:repeat(3,minmax(0,1fr)) 320px;} /* 264px (the reference's own value) wraps longer family names like "Cut Lists & CNC-Ready Production Data" onto two lines; the middle detail column has room to spare, so widening this track to fit the longest name on one line reads cleaner without shrinking the teaser. */ .bec-mp-wrap--wsvc{grid-template-columns:380px minmax(0,1fr) 320px;} .bec-mp-col{padding:0 28px;border-right:1px solid var(--bec-mp-border);min-width:0;} .bec-mp-col:first-child{padding-left:0;} .bec-mp-col-last{border-right:none;} /* "mw-2col" (set on the top-level WP menu item's own CSS Classes field, same admin-only pattern as mw-divider/mw-subhead/mw-note/mw-no-heading) flows a long link list into two columns instead of one tall one -- first needed for BIM's Proof "Portfolio" column once it grew past a dozen links. Deliberately does NOT grid-column:span -- panel width presets (w1/w2/w3) size their content tracks to exactly the number of populated columns (e.g. Proof's own w2 = two 400px content tracks, no spare), so spanning a second track here eats the *next* column's only track, pushing it (and the teaser after it) onto a new grid row instead of sitting beside this one. Splitting the list within its own single track avoids that. */ .bec-mp-col--2up{column-count:2;column-gap:16px;} .bec-mp-col--2up .bec-mp-hd{column-span:all;} .bec-mp-col--2up .bec-mp-item{break-inside:avoid;} .bec-mp-hd{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--bec-mp-muted); padding-bottom:10px;margin-bottom:9px;border-bottom:1px solid var(--bec-mp-border);} .bec-mp-hd.bec-mp-sub{margin-top:16px;border-bottom:none;padding-bottom:4px;} .bec-mp-item{display:block;padding:9px 8px;border-radius:10px;text-decoration:none;transition:background .13s;margin-bottom:2px;} .bec-mp-item:hover{background:var(--bec-mp-surface);} .bec-mp-title{font-size:15px;font-weight:500;color:var(--bec-mp-text);letter-spacing:-.2px;display:block;margin-bottom:3px;} .bec-mp-desc{font-size:12px;color:var(--bec-mp-muted);line-height:1.45;display:block;} .bec-mp-divider{height:1px;background:var(--bec-mp-border);margin:11px 0;} .bec-mp-aside-note{font-size:13px;color:var(--bec-mp-muted);line-height:1.6;padding:9px 8px;} .bec-mp-aside-note b{color:var(--bec-mp-text);font-weight:600;} /* Services' family list (left column) */ .bec-mp-fam{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:9px 10px;border-radius:10px;text-decoration:none;margin-bottom:1px;transition:background .13s;} .bec-mp-fam:hover,.bec-mp-fam[aria-current="true"]{background:var(--bec-mp-surface);} .bec-mp-fam-t{font-size:15px;font-weight:500;color:var(--bec-mp-text);letter-spacing:-.2px;line-height:1.34;} .bec-mp-fam[aria-current="true"] .bec-mp-fam-t{color:var(--bec-mp-accent);font-weight:600;} .bec-mp-fam-c{font-size:15px;color:#c3c3c9;flex-shrink:0;} .bec-mp-fam:hover .bec-mp-fam-c,.bec-mp-fam[aria-current="true"] .bec-mp-fam-c{color:var(--bec-mp-accent);} /* Services' selected-family detail (middle column) */ .bec-mp-l2head{padding:0 0 13px;} .bec-mp-l2head a{font-size:16.5px;font-weight:600;color:var(--bec-mp-text);text-decoration:none; letter-spacing:-.3px;display:inline-flex;align-items:center;gap:4px;} .bec-mp-l2head a:hover{color:var(--bec-mp-accent);} .bec-mp-l2head a::after{content:"\203A";font-size:17px;line-height:1;} .bec-mp-l2head p{font-size:12.5px;color:var(--bec-mp-muted);line-height:1.55;margin-top:5px;max-width:48ch;} .bec-mp-l2grid{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px;} .bec-mp-l2{display:block;padding:8px 10px;border-radius:8px;text-decoration:none; font-size:14px;color:var(--bec-mp-text);letter-spacing:-.15px;transition:background .12s;} .bec-mp-l2:hover{background:var(--bec-mp-surface);} .bec-mp-l2-none{font-size:13px;color:var(--bec-mp-muted);line-height:1.6;padding:2px 0 2px 14px; border-left:1px solid var(--bec-mp-border);max-width:46ch;} .bec-mp-l2-pf{margin-top:12px;padding-top:11px;border-top:1px solid var(--bec-mp-border);} .bec-mp-l2-pf .bec-mp-hd{border-bottom:none;padding-bottom:4px;margin-bottom:2px;} .bec-mp-l2-pf .bec-mp-l2{color:var(--bec-mp-accent);font-weight:500;} .bec-mp-subservices[hidden]{display:none;} /* Contextual teaser (right column, every panel). Pinned to the trailing 320px track each .bec-mp-wrap--w* preset declares, by explicit column number (2 for w1, 3 for w2/wsvc, 4 for w3) rather than left to grid auto-placement -- a panel with fewer real .bec-mp-col elements than its width preset assumes otherwise drops the teaser into whichever content track is next after the last populated column instead of the trailing one, so it comes out both a different size and off to one side instead of "same size, same place" for every panel. Confirmed live on the 3D practice's "How We Work" (w2, 1 real column -> teaser landed in the first 400px track) and "Proof" (w3, 1 real column -> teaser landed in the 2nd ~267px track) panels, each a different size from Services' correctly-placed 320px. (grid-column:-1 does NOT reliably fix this -- tested first, it opened an extra implicit track instead of reusing the last explicit one when the auto-placed columns before it didn't fill the row, so it's the explicit per-preset number below, not a negative index.) */ .bec-mp-wrap--w1 .bec-mp-teaser{grid-column:2;} .bec-mp-wrap--w2 .bec-mp-teaser{grid-column:3;} .bec-mp-wrap--w3 .bec-mp-teaser{grid-column:4;} .bec-mp-wrap--wsvc .bec-mp-teaser{grid-column:3;} .bec-mp-teaser{padding-left:36px;display:flex;flex-direction:column;align-self:start;min-width:0;} .bec-mp-t-img{position:relative;width:100%;aspect-ratio:16/10;border-radius:12px;overflow:hidden; clip-path:inset(0 round 12px);margin-bottom:17px;background:var(--bec-mp-surface);} .bec-mp-t-img img{width:100%;height:100%;object-fit:cover;display:block;} .bec-mp-t-img.bec-mp-no-img img{display:none;} .bec-mp-t-ey{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--bec-mp-muted);margin-bottom:10px;} .bec-mp-t-h{font-size:clamp(20px,1.5vw,24px);font-weight:700;letter-spacing:-.5px;line-height:1.19;color:var(--bec-mp-text);margin-bottom:11px;} .bec-mp-t-p{font-size:14px;color:var(--bec-mp-muted);line-height:1.6;margin-bottom:17px;} .bec-mp-t-link{font:600 14px/1 inherit;color:var(--bec-mp-accent);text-decoration:none;display:inline-flex;align-items:center;gap:4px;transition:gap .15s;} .bec-mp-t-link:hover{gap:9px;} .bec-mp-t-link::after{content:"\203A";font-size:18px;line-height:1;} .bec-mp-t-credit{font-size:10.5px;color:#b0b0b6;margin-top:13px;line-height:1.5;} .bec-mp-t-img.bec-mp-no-img ~ .bec-mp-t-credit{display:none;} .bec-mp-foot{max-width:1200px;margin:0 auto;padding:0 40px 30px; display:flex;gap:22px;align-items:baseline;flex-wrap:wrap;transform:translateX(var(--bec-align-x,0px));} /* A bare
  • outside a