/* The MuniPro Family home (templates/marketing/family.html only), ported from design hub g24 frame_l15 (FAMILY 1440 / FAMILY_M 390) with the DL2 header and footer of frame_l14. Every rule is scoped under #lp-family, the page wrapper, so nothing else on the site changes. Colours are the DL2 2.0.3 tokens below, defined once (the frame writes them as rgb(); no hex). */ #lp-family { --dl-ink: rgb(12, 33, 64); --dl-text: rgb(30, 41, 59); --dl-muted: rgb(91, 107, 130); --dl-rule: rgb(226, 232, 240); --dl-surface: rgb(255, 255, 255); --dl-page: rgb(247, 249, 252); --dl-tint: rgb(241, 245, 249); --dl-action: rgb(2, 101, 217); --dl-action-hover: rgb(20, 94, 193); --dl-action-pressed: rgb(10, 75, 160); --dl-action-soft: rgb(226, 236, 250); --dl-on-action: rgb(255, 255, 255); --dl-focus-ring: rgb(61, 132, 234); --dl-sapphire: rgb(1, 42, 99); --dl-on-sapphire: rgba(255, 255, 255, 0.88); --dl-chart-hero-soft: rgb(162, 200, 240); --dl-on-sapphire-head: var(--dl-chart-hero-soft); --dl-on-sapphire-rule: color-mix(in srgb, var(--dl-surface) 16%, transparent); --dl-scrim: color-mix(in srgb, var(--dl-sapphire) 72%, transparent); --dl-e1: 0 6px 18px rgba(12,33,64,.12); --dl-font-ui: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --dl-r-tag: 4px; --dl-r-control: 6px; --dl-r-card: 8px; --dl-rule-strong: rgb(203, 213, 225); --dl-faint: rgb(148, 163, 184); --dl-action-line: rgb(198, 217, 246); --dl-gold: rgb(220, 193, 132); --dl-font-display: 'Source Serif 4', Georgia, serif; --dl-font-mono: 'JetBrains Mono', ui-monospace, Consolas, monospace; } /* shared */ #lp-family .dl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } #lp-family .dl-lockup { display: block; width: auto; flex: none; } #lp-family .dl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: var(--dl-r-control); font-family: var(--dl-font-ui); font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap; cursor: pointer; } #lp-family .dl-btn--primary { background: var(--dl-action); color: var(--dl-on-action); } #lp-family .dl-btn--primary:hover { background: var(--dl-action-hover); } #lp-family .dl-btn--primary:active { background: var(--dl-action-pressed); } #lp-family .dl-btn--on-dark { background: var(--dl-surface); color: var(--dl-sapphire); } #lp-family .dl-btn--on-dark:hover { background: var(--dl-action-soft); } #lp-family .dl-btn--block { display: flex; width: 100%; height: 44px; } #lp-family .dl-hdr a:focus-visible, #lp-family .dl-hdr summary:focus-visible, #lp-family .dl-ftr a:focus-visible, #lp-family .dl-ftr summary:focus-visible { outline: 2px solid var(--dl-focus-ring); outline-offset: 2px; } #lp-family .dl-chev { display: block; flex: none; } #lp-family .dl-hdr summary, #lp-family .dl-ftr summary { list-style: none; } #lp-family .dl-hdr summary::-webkit-details-marker, #lp-family .dl-ftr summary::-webkit-details-marker { display: none; } /* header, 1200 px and up: 64 tall, white, 1 px rule, sticky, no shrink */ #lp-family .dl-hdr { position: sticky; top: 0; z-index: 100; height: 64px; background: var(--dl-surface); border-bottom: 1px solid var(--dl-rule); font-family: var(--dl-font-ui); } #lp-family .dl-hdr[data-scrolled="true"] { box-shadow: var(--dl-e1); } #lp-family .dl-hdr__in { display: flex; align-items: center; height: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; } #lp-family .dl-hdr__home { display: flex; align-items: center; flex: none; margin-right: 48px; border-radius: var(--dl-r-control); } #lp-family .dl-hdr__home .dl-lockup { height: 28px; } #lp-family .dl-nav { align-self: stretch; min-width: 0; } #lp-family .dl-nav__list { display: flex; align-items: stretch; gap: 32px; height: 100%; margin: 0; padding: 0; list-style: none; } #lp-family .dl-nav__list > li { position: relative; display: flex; } #lp-family .dl-nav__a { position: relative; display: flex; align-items: center; gap: 4px; height: 100%; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dl-text); text-decoration: none; white-space: nowrap; cursor: pointer; } #lp-family .dl-nav__t { display: block; } #lp-family .dl-nav__a:hover { color: var(--dl-ink); } #lp-family .dl-nav__a:hover .dl-nav__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } #lp-family .dl-nav__a[aria-current="page"] { color: var(--dl-ink); } #lp-family .dl-nav__a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4.5px; height: 2px; background: var(--dl-action); } #lp-family .dl-dd { position: relative; display: flex; } #lp-family .dl-dd > summary { height: 63px; } #lp-family .dl-dd[open] > summary { color: var(--dl-ink); } #lp-family .dl-dd[open] > summary .dl-chev { transform: rotate(180deg); } #lp-family .dl-dd__list { position: absolute; top: 100%; left: -16px; z-index: 110; min-width: 224px; margin: 0; padding: 8px 0; list-style: none; background: var(--dl-surface); border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); box-shadow: var(--dl-e1); } #lp-family .dl-dd__list a { display: flex; align-items: center; height: 40px; padding: 0 16px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dl-text); text-decoration: none; white-space: nowrap; } #lp-family .dl-dd__list a:hover { background: var(--dl-tint); color: var(--dl-ink); text-decoration: underline; text-underline-offset: 4px; } #lp-family .dl-hdr__acts { display: flex; align-items: center; gap: 24px; flex: none; margin-left: auto; } #lp-family .dl-hdr__signin { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dl-text); text-decoration: none; border-radius: var(--dl-r-control); } #lp-family .dl-hdr__signin:hover { color: var(--dl-ink); text-decoration: underline; text-underline-offset: 4px; } /* quiet: the page hero carries its own filled button, so the header primary goes outline (one filled control per viewport) */ #lp-family .dl-hdr[data-cta="quiet"] .dl-hdr__acts .dl-btn--primary { background: transparent; color: var(--dl-action); box-shadow: inset 0 0 0 1px var(--dl-action); } #lp-family .dl-hdr[data-cta="quiet"] .dl-hdr__acts .dl-btn--primary:hover { background: var(--dl-action-soft); } /* the phone Menu (below 1200 px): a details element, so its expanded state is native and no script runs */ #lp-family .dl-mm { display: none; margin-left: auto; } #lp-family .dl-mm__btn { display: flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; margin-right: -12px; padding: 0 12px; border-radius: var(--dl-r-control); font-size: 14px; line-height: 20px; font-weight: 600; color: var(--dl-ink); cursor: pointer; } #lp-family .dl-mm__g { display: block; flex: none; } #lp-family .dl-mm__g--close, #lp-family .dl-mm[open] .dl-mm__g--open { display: none; } #lp-family .dl-mm[open] .dl-mm__g--close { display: block; } /* closed details content is contained (content-visibility), so it would lay out against the summary: keep it out of layout */ #lp-family .dl-mm:not([open]) .dl-sheet, #lp-family .dl-mm:not([open]) .dl-scrim, #lp-family .dl-dd:not([open]) > .dl-dd__list { display: none; } #lp-family .dl-scrim { position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 115; height: calc(100dvh - 56px); background: var(--dl-scrim); } #lp-family .dl-sheet { position: absolute; top: calc(100% + 1px); left: 0; right: 0; z-index: 120; display: flex; flex-direction: column; max-width: 420px; height: calc(100dvh - 56px); margin-left: auto; overflow-y: auto; background: var(--dl-surface); } #lp-family .dl-sheet__list, #lp-family .dl-sub ul { margin: 0; padding: 0; list-style: none; } #lp-family .dl-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--dl-rule); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--dl-text); text-decoration: none; cursor: pointer; } #lp-family .dl-row .dl-chev { color: var(--dl-muted); } #lp-family .dl-row:hover { background: var(--dl-tint); color: var(--dl-ink); } #lp-family .dl-hdr .dl-row:focus-visible { outline-offset: -2px; } #lp-family .dl-sub[open] > summary .dl-chev { transform: rotate(180deg); } #lp-family .dl-sub ul .dl-row { padding-left: 32px; } #lp-family .dl-sheet__fam { padding: 16px 16px 0; } #lp-family .dl-sheet__h { margin: 0 0 8px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-muted); } #lp-family .dl-sheet .dl-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lp-family .dl-sheet .dl-fam__lk { height: 44px; } #lp-family .dl-sheet .dl-fam__i.is-here .dl-fam__lk { height: 28px; } #lp-family .dl-sheet .dl-fam__here { color: var(--dl-muted); } #lp-family .dl-sheet__cta { position: sticky; bottom: 0; margin-top: auto; padding: 16px; background: var(--dl-surface); } /* the family row (footer and phone sheet) */ #lp-family .dl-fam { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } #lp-family .dl-fam__i { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; } #lp-family .dl-fam__lk { display: flex; align-items: center; height: 32px; border-radius: var(--dl-r-control); } #lp-family .dl-fam__lk .dl-lockup { height: 20px; } #lp-family .dl-fam__here { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-on-sapphire); } #lp-family .dl-fam__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } #lp-family .dl-chip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--dl-on-sapphire-head); border-radius: var(--dl-r-tag); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--dl-on-sapphire-head); white-space: nowrap; } /* footer: sapphire ground, four rows plus Talk to us, on the 12-column banker grid */ #lp-family .dl-ftr { background: var(--dl-sapphire); color: var(--dl-on-sapphire); font-family: var(--dl-font-ui); } #lp-family .dl-ftr__in { max-width: 1200px; margin: 0 auto; padding: 48px 24px 32px; } #lp-family .dl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; } #lp-family .dl-ftr__row + .dl-ftr__row { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--dl-on-sapphire-rule); } #lp-family .dl-ftr__lead { align-items: center; } #lp-family .dl-ftr__home { grid-column: 1 / span 3; justify-self: start; display: flex; align-items: center; border-radius: var(--dl-r-control); } #lp-family .dl-ftr__home .dl-lockup { height: 28px; } #lp-family .dl-ftr__promise { grid-column: 4 / span 6; margin: 0; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--dl-on-sapphire); } #lp-family .dl-ftr__lead .dl-btn { grid-column: 10 / span 3; justify-self: end; } #lp-family .dl-ast { font-size: 0.7em; line-height: 0; vertical-align: super; } #lp-family .dl-ftr__fn { display: block; margin-top: 4px; font-size: 12px; line-height: 16px; color: var(--dl-on-sapphire); } #lp-family .dl-ftr__col { grid-column: span 3; min-width: 0; } #lp-family .dl-ftr__head { margin: 0 0 12px; font-family: var(--dl-font-ui); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-on-sapphire-head); } #lp-family .dl-ftr__links { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; } #lp-family .dl-ftr__inline { font-size: 14px; line-height: 20px; } #lp-family .dl-ftr__links a, #lp-family .dl-ftr__links span, #lp-family .dl-ftr__inline a { font-size: 14px; line-height: 20px; color: var(--dl-on-sapphire); text-decoration: none; } #lp-family .dl-ftr a:hover { text-decoration: underline; text-underline-offset: 3px; } #lp-family .dl-ftr__colsm { display: none; } #lp-family .dl-ftr__inline { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; padding: 0; list-style: none; } #lp-family .dl-ftr__legal { display: grid; gap: 8px; font-size: 12px; line-height: 16px; color: var(--dl-on-sapphire); } #lp-family .dl-ftr__legal p { margin: 0; max-width: 960px; } #lp-family .dl-ftr__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; } #lp-family .dl-ftr__inline--legal { gap: 8px 24px; } #lp-family .dl-ftr__inline--legal a { font-size: 12px; line-height: 16px; text-decoration: underline; text-underline-offset: 2px; } /* below 1200 px (the full container): the 56 px bar and the Menu */ @media (max-width: 1199.98px) { #lp-family .dl-hdr { height: 56px; } #lp-family .dl-hdr__in { padding: 0 16px; } #lp-family .dl-hdr__home { margin-right: 16px; } #lp-family .dl-hdr__home .dl-lockup { height: 24px; } #lp-family .dl-nav, #lp-family .dl-hdr__acts { display: none; } #lp-family .dl-mm { display: block; } } /* below 1100 px: the footer on six columns */ @media (max-width: 1099.98px) { #lp-family .dl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } #lp-family .dl-ftr__home { grid-column: 1 / span 3; } #lp-family .dl-ftr__lead .dl-btn { grid-column: 4 / span 3; } #lp-family .dl-ftr__promise { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; } #lp-family .dl-ftr__col { grid-column: span 3; margin-bottom: 24px; } #lp-family .dl-fam { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* below 640 px: rows stack, link columns become disclosures, the family wraps two a row */ @media (max-width: 639.98px) { #lp-family .dl-ftr__in { padding: 32px 16px 24px; } #lp-family .dl-grid { grid-template-columns: minmax(0, 1fr); } #lp-family .dl-ftr__lead { row-gap: 16px; } #lp-family .dl-ftr__home, #lp-family .dl-ftr__promise, #lp-family .dl-ftr__lead .dl-btn { grid-column: 1; grid-row: auto; margin-top: 0; } #lp-family .dl-ftr__lead .dl-btn { justify-self: stretch; height: 44px; } #lp-family .dl-ftr__cols { display: none; } #lp-family .dl-ftr__colsm { display: block; } #lp-family .dl-ftr__row.dl-ftr__colsm { padding-top: 16px; } #lp-family .dl-ftr__colsm + .dl-ftr__row { border-top: 0; } #lp-family .dl-ftr__sum { display: flex; align-items: center; justify-content: space-between; min-height: 48px; border-bottom: 1px solid var(--dl-on-sapphire-rule); cursor: pointer; } #lp-family .dl-ftr__sum .dl-ftr__head { margin: 0; } #lp-family .dl-ftr__sum .dl-chev { color: var(--dl-on-sapphire-head); } #lp-family .dl-ftr__dis[open] > summary .dl-chev { transform: rotate(180deg); } #lp-family .dl-ftr__dis .dl-ftr__links { gap: 0; padding: 4px 0 12px; border-bottom: 1px solid var(--dl-on-sapphire-rule); } #lp-family .dl-ftr__dis .dl-ftr__links a, #lp-family .dl-ftr__dis .dl-ftr__links span { display: flex; align-items: center; min-height: 44px; } #lp-family .dl-ftr__inline { flex-direction: column; gap: 0; } #lp-family .dl-ftr__talk .dl-ftr__inline a { display: flex; align-items: center; min-height: 44px; } #lp-family .dl-fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lp-family .dl-fam__lk { height: 44px; } #lp-family .dl-fam__i.is-here .dl-fam__lk { height: 28px; } #lp-family .dl-ftr__inline--legal { flex-direction: row; gap: 8px 24px; } } #lp-family { background: var(--dl-surface); font-family: var(--dl-font-ui); color: var(--dl-text); } #lp-family .f-in { max-width: 1200px; margin: 0 auto; padding: 0 24px; } #lp-family .f-g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; } #lp-family .f-band { padding: 96px 0; background: var(--dl-surface); border-top: 1px solid var(--dl-rule); } #lp-family .f-band--page { background: var(--dl-page); } #lp-family .f-k { margin: 0; font-family: var(--dl-font-ui); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-muted); } #lp-family .f-head { max-width: 800px; margin-bottom: 48px; } #lp-family .f-head h2, #lp-family .fc h2 { margin: 12px 0 0; font-family: var(--dl-font-display); font-size: 36px; line-height: 44px; font-weight: 600; color: var(--dl-ink); } #lp-family .f-head h2 em, #lp-family .fc h2 em, #lp-family .fh h1 em { font-style: normal; color: var(--dl-action); } #lp-family .f-dek { margin: 16px 0 0; font-size: 16px; line-height: 26px; color: var(--dl-text); } #lp-family .f-gold { display: block; width: 48px; height: 3px; margin-bottom: 24px; background: var(--dl-gold); } #lp-family .f-btn { height: 44px; padding: 0 20px; font-size: 15px; } #lp-family .f-btn--2 { background: transparent; color: var(--dl-action); box-shadow: inset 0 0 0 1px var(--dl-action); } #lp-family .f-btn--2:hover { background: var(--dl-action-soft); } #lp-family .f-btn:focus-visible, #lp-family .f-go:focus-visible, #lp-family .fv__play:focus-visible, #lp-family .fw-tile:focus-visible, #lp-family .persona-card:focus-visible, #lp-family .fv3-lightbox button:focus-visible { outline: 2px solid var(--dl-focus-ring); outline-offset: 2px; } #lp-family .f-go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--dl-action); text-decoration: none; border-radius: var(--dl-r-control); } #lp-family .f-go:hover span { text-decoration: underline; text-underline-offset: 3px; } #lp-family .f-go__i { flex: none; } #lp-family .f-lock { display: inline-flex; align-items: center; } #lp-family .f-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--dl-r-tag); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; } #lp-family .f-chip.is-live { background: var(--dl-action-soft); color: var(--dl-ink); box-shadow: inset 0 0 0 1px var(--dl-action-line); } #lp-family .f-chip.is-soon { background: var(--dl-surface); color: var(--dl-ink); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .f-sample { display: inline-flex; padding: 2px 8px; border-radius: var(--dl-r-tag); background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--dl-ink); } #lp-family .f-ast { font-size: 0.6em; line-height: 0; vertical-align: super; } /* the video card: 16:9 here, 4:5 on the phone; a real poster fills it, else the drawn sapphire card */ #lp-family .fv { margin: 0; } #lp-family .fv__frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--dl-r-card); background: var(--dl-sapphire); } #lp-family .fv__v { display: block; width: 100%; height: 100%; object-fit: cover; } #lp-family .fv__poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding-bottom: 76px; background: radial-gradient(120% 90% at 50% 38%, color-mix(in srgb, var(--dl-action) 24%, var(--dl-sapphire)) 0%, var(--dl-sapphire) 72%); } #lp-family .fv__lock { display: flex; } #lp-family .fv__play { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 4px 0 0 -32px; padding: 0 0 0 3px; border: 0; border-radius: 9999px; background: var(--dl-surface); color: var(--dl-sapphire); cursor: pointer; } #lp-family .fv[data-poster="real"] .fv__play { margin-top: -32px; } #lp-family .fv__play:hover { background: var(--dl-action-soft); } #lp-family .fv__badge { position: absolute; left: 12px; bottom: 12px; } /* 1 hero: copy 5 columns, the V0 card 7; the stat strip under it on the same tracks */ #lp-family .fh { padding: 72px 0 0; background: var(--dl-surface); } #lp-family .fh__g { align-items: center; } #lp-family .fh__copy { grid-column: 1 / span 5; } #lp-family .fh__media { grid-column: 6 / span 7; } #lp-family .fh h1 { margin: 0; font-family: var(--dl-font-display); font-size: 52px; line-height: 60px; font-weight: 600; color: var(--dl-ink); } #lp-family .fh__ai { margin: 24px 0 0; font-family: var(--dl-font-display); font-size: 20px; line-height: 28px; font-weight: 400; color: var(--dl-text); } #lp-family .fh__acts, #lp-family .fc__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; } #lp-family .fs { margin-top: 64px; padding: 32px 0 40px; border-top: 1px solid var(--dl-rule); align-items: center; } #lp-family .fs__k { grid-column: 1 / span 3; margin: 0; font-family: var(--dl-font-display); font-size: 20px; line-height: 28px; color: var(--dl-ink); } /* words only (board v16): three phrases on span-3 tracks, each behind a 1px left rule */ #lp-family .fs__s { grid-column: span 3; margin: 0; padding-left: 20px; border-left: 1px solid var(--dl-rule); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--dl-ink); } /* 2 the family: two equal cards whose rows share tracks, the bridge line between them */ #lp-family .ff { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr auto; column-gap: 16px; } #lp-family .ff__card { grid-row: 1 / span 5; display: grid; grid-template-rows: subgrid; row-gap: 20px; padding: 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .ff__card:first-child { grid-column: 1 / span 6; } #lp-family .ff__card:last-child { grid-column: 7 / span 6; } #lp-family .ff__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #lp-family .ff__id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 36px; } #lp-family .ff__body { display: flex; flex-direction: column; gap: 8px; } #lp-family .ff__p { margin: 0; font-size: 16px; line-height: 26px; color: var(--dl-ink); } #lp-family .ff__fn { margin: 0; font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-family .ff__go { padding-top: 4px; border-top: 1px solid var(--dl-rule); } #lp-family .ff__bridge { grid-column: 1 / -1; grid-row: 6; display: flex; flex-direction: column; align-items: center; } #lp-family .ff__wires { position: relative; display: block; width: 50%; height: 32px; border: 2px solid var(--dl-action); border-top: 0; border-radius: 0 0 var(--dl-r-card) var(--dl-r-card); } #lp-family .ff__wires::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 2px; height: 16px; margin-left: -1px; background: var(--dl-action); } #lp-family .ff__line { max-width: 720px; margin: 16px 0 0; padding: 16px 24px; border: 1px solid var(--dl-action-line); border-radius: var(--dl-r-card); background: var(--dl-surface); font-size: 16px; line-height: 26px; color: var(--dl-ink); text-align: center; } #lp-family .ff__line b { font-weight: 600; color: var(--dl-action); } /* 3 one record: three verbs on 4-column tracks, the record and its sources on 6 */ #lp-family .fr, #lp-family .fr2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; } #lp-family .fr__c { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .fr__n { font-family: var(--dl-font-mono); font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-family .fr__v { margin: 4px 0 0; font-family: var(--dl-font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--dl-ink); } #lp-family .fr__p { margin: 0; font-size: 14px; line-height: 21px; color: var(--dl-text); } #lp-family .fr2 { margin-top: 16px; } #lp-family .fr__list { grid-column: span 6; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--dl-r-card); background: var(--dl-tint); } #lp-family .fr__dots { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } #lp-family .fr__dots li { padding: 4px 10px; border-radius: var(--dl-r-tag); background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule); font-size: 14px; line-height: 20px; color: var(--dl-ink); } #lp-family .fr__line { margin: 0; font-size: 15px; line-height: 26px; color: var(--dl-ink); } #lp-family .fr__dot { color: var(--dl-faint); } #lp-family .fr__line > span:not(.fr__dot) { white-space: nowrap; } #lp-family .fr__verb { font-family: var(--dl-font-display); font-style: italic; color: var(--dl-text); } #lp-family .fr__go { margin-top: 16px; } /* 4 the future: three equal cards whose rows share tracks */ #lp-family .fu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 16px; } #lp-family .fu__card { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 16px; padding: 16px 16px 20px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .fu__id { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 4px 4px 0; } #lp-family .fu__h { display: flex; margin: 0; } #lp-family .fu__body { display: flex; flex-direction: column; gap: 8px; } #lp-family .fu__t { margin: 0; padding: 0 4px; font-family: var(--dl-font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--dl-ink); } #lp-family .fu__p { margin: 0; padding: 0 4px; font-size: 15px; line-height: 24px; color: var(--dl-text); } #lp-family .fu__go { padding: 4px 4px 0; border-top: 1px solid var(--dl-rule); } /* 5 every role: v12's persona cards (site-v2 .persona-grid), groups of 3, 4 and 3 on one 12-track grid */ #lp-family .fp { display: flex; flex-direction: column; gap: 40px; } #lp-family .fp__h { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--dl-rule-strong); } #lp-family .fp__h h3 { margin: 0; font-family: var(--dl-font-ui); font-size: 20px; line-height: 28px; font-weight: 600; color: var(--dl-ink); } #lp-family .fp__h p { margin: 0; font-size: 14px; line-height: 21px; color: var(--dl-muted); } #lp-family .fp__grid.persona-grid { max-width: none; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--dl-rule); border-color: var(--dl-rule); border-radius: var(--dl-r-card); } #lp-family .fp .persona-card { grid-column: span 4; padding: 24px; background: var(--dl-surface); } #lp-family .fp .fp__grid--4 .persona-card { grid-column: span 3; } #lp-family .fp .persona-card:hover { background: var(--dl-tint); } #lp-family .fp .persona-card .persona-roman { color: var(--dl-action); } #lp-family .fp .persona-card .role { color: var(--dl-muted); } #lp-family .fp .persona-card h3 { margin: 0 0 8px; font-family: var(--dl-font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--dl-ink); } #lp-family .fp .persona-card p { margin: 0; font-size: 14px; line-height: 21px; color: var(--dl-text); } #lp-family .fp .persona-card .persona-cta { min-height: 44px; margin-top: 16px; padding-top: 12px; border-top-color: var(--dl-rule); font-size: 12px; color: var(--dl-action); } #lp-family .f-bchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } #lp-family .f-bchip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--dl-r-tag); background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--dl-ink); } #lp-family .f-bchip[data-brand="munipro"], #lp-family .f-bchip[data-brand="open"] { background: var(--dl-action-soft); box-shadow: inset 0 0 0 1px var(--dl-action-line); } /* 6 the workstation: six equal tiles, two columns each; v12's lightbox, its stage held inside the screen */ #lp-family .fw { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } #lp-family .fw--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } /* Bond Holders drops with C07 shut */ #lp-family .fw-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 196px; padding: 20px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); font-family: var(--dl-font-ui); text-align: left; color: var(--dl-text); cursor: pointer; } #lp-family .fw-tile:hover { border-color: var(--dl-action); background: var(--dl-tint); } #lp-family .fw-tile__n { font-family: var(--dl-font-mono); font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-family .fw-tile__t { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--dl-ink); } #lp-family .fw-tile__h { font-size: 14px; line-height: 21px; color: var(--dl-text); } #lp-family .fw-tile__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--dl-action); } #lp-family .fw__cap { margin: 32px 0 0; font-family: var(--dl-font-display); font-size: 24px; line-height: 30px; font-weight: 400; color: var(--dl-ink); text-align: center; } #lp-family .fv3-lightbox { background: color-mix(in srgb, var(--dl-sapphire) 88%, transparent); padding: 64px 24px; } #lp-family .fv3-lightbox-stage { width: min(1100px, 92vw, calc((100vh - 168px) * 1.6)); background: var(--dl-sapphire); border-radius: var(--dl-r-card); box-shadow: none; } #lp-family .fv3-lightbox-screen { border-radius: var(--dl-r-control); } #lp-family .fv3-lightbox-close, #lp-family .fv3-lightbox-nav button { min-height: 36px; border-radius: var(--dl-r-control); font-family: var(--dl-font-ui); font-size: 13px; letter-spacing: 0; text-transform: none; font-weight: 600; } #lp-family .fv3-lightbox-close:hover, #lp-family .fv3-lightbox-nav button:hover { border-color: var(--dl-surface); color: var(--dl-surface); } #lp-family .fv3-lightbox-nav .which { font-family: var(--dl-font-display); color: var(--dl-on-sapphire-head); } #lp-family .fw-s { display: flex; flex-direction: column; width: 100%; height: 100%; } #lp-family .fw-s__pic { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--dl-page); } #lp-family .fw-s__pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } #lp-family .fw-s__badge { position: absolute; right: 12px; top: 12px; } #lp-family .fw-s__pic--drawn { display: flex; align-items: center; padding: 32px 40px; background: var(--dl-tint); } #lp-family .fw-s__feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%; margin: 0; padding: 0; list-style: none; } #lp-family .fw-s__feats li { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); font-family: var(--dl-font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--dl-ink); } #lp-family .fw-s__feats li span { font-family: var(--dl-font-mono); font-size: 12px; line-height: 16px; font-weight: 400; color: var(--dl-muted); } #lp-family .fw-s__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: center; padding: 16px 24px; border-top: 1px solid var(--dl-rule); background: var(--dl-surface); } #lp-family .fw-s__h { grid-column: span 5; } #lp-family .fw-s__k { margin: 0; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-muted); } #lp-family .fw-s__t { margin: 4px 0 0; font-family: var(--dl-font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--dl-ink); } #lp-family .fw-s__u { grid-column: span 7; display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: 14px; line-height: 21px; color: var(--dl-text); } #lp-family .fw-s__u b { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dl-action); } /* 7 how we got here: three stops on 4-column tracks (two on 6 while step 2 waits on C61), the connector through their nodes */ #lp-family .fe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 16px; margin: 0; padding: 0; list-style: none; } #lp-family .fe--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lp-family .fe__stop { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 16px; min-width: 0; } #lp-family .fe__node { position: relative; display: block; height: 16px; } #lp-family .fe__node i { position: absolute; left: 0; top: 0; z-index: 1; width: 16px; height: 16px; border-radius: 9999px; background: var(--dl-surface); box-shadow: inset 0 0 0 2px var(--dl-ink); } #lp-family .fe__stop.is-last .fe__node i { background: var(--dl-action); box-shadow: none; } #lp-family .fe__node::before { content: ""; position: absolute; left: 8px; right: -16px; top: 7px; height: 2px; background: var(--dl-rule-strong); } #lp-family .fe__stop.is-last .fe__node::before { display: none; } #lp-family .fe__mark { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 96px; padding: 16px 20px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .fe__pair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } #lp-family .fe__plus { font-size: 18px; font-weight: 600; color: var(--dl-muted); } #lp-family .fe__three { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; } #lp-family .fe__p { margin: 0; font-size: 15px; line-height: 24px; color: var(--dl-text); } #lp-family .fe__p b { font-weight: 600; color: var(--dl-ink); } /* 8 close */ #lp-family .fc__card { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; align-items: center; padding: 48px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .fc__copy { grid-column: 1 / span 8; } #lp-family .fc h2 { margin: 0; } #lp-family .fc__acts { grid-column: 9 / span 4; justify-content: flex-end; margin-top: 0; } #lp-family .fc__quiet { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 32px; margin: 0; padding: 16px 0 0; border-top: 1px solid var(--dl-rule); list-style: none; } #lp-family .fc__quiet .f-go { font-size: 14px; font-weight: 500; } /* the footer's lead button goes outline: the close above carries the filled Book a demo (hub 10:02Z, dl-btn--ghost) */ #lp-family .dl-ftr__lead .dl-btn--on-dark { background: transparent; color: var(--dl-on-sapphire); box-shadow: inset 0 0 0 1px var(--dl-on-sapphire); } #lp-family .dl-ftr__lead .dl-btn--on-dark:hover { background: color-mix(in srgb, var(--dl-surface) 10%, transparent); } /* below 1100 px: six columns */ @media (max-width: 1099.98px) { #lp-family .fh__copy, #lp-family .fh__media, #lp-family .fc__copy, #lp-family .fc__acts { grid-column: 1 / -1; } #lp-family .fh__media { margin-top: 32px; } #lp-family .fc__acts { justify-content: flex-start; } #lp-family .fw { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* C07 shut, five tiles: 3 + 2 wide, equal within each row (hub 09:05Z) */ #lp-family .fw--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); } #lp-family .fw--5 > .fw-tile { grid-column: span 2; } #lp-family .fw--5 > .fw-tile:nth-child(n+4) { grid-column: span 3; } #lp-family .fp .fp__grid--4 .persona-card { grid-column: span 6; } } /* the phone: one column, the same order; the video cards go 4:5 */ @media (max-width: 639.98px) { #lp-family .f-in { padding: 0 16px; } #lp-family .f-g12, #lp-family .fc__card, #lp-family .ff, #lp-family .fr, #lp-family .fr2, #lp-family .fu, #lp-family .fe { grid-template-columns: minmax(0, 1fr); } #lp-family .f-band { padding: 64px 0; } #lp-family .fh { padding: 32px 0 0; } #lp-family .fh h1 { font-size: 36px; line-height: 44px; } #lp-family .fh__ai { margin-top: 16px; font-size: 18px; line-height: 26px; } #lp-family .fh__acts, #lp-family .fc__acts { flex-direction: column; align-items: stretch; margin-top: 24px; } #lp-family .fh__acts .f-btn, #lp-family .fc__acts .f-btn { width: 100%; } #lp-family .fh__media { margin-top: 24px; } #lp-family .f-head { margin-bottom: 32px; } #lp-family .f-head h2, #lp-family .fc h2 { font-size: 28px; line-height: 34px; } #lp-family .fv__frame { aspect-ratio: 4 / 5; } #lp-family .fv__v { object-fit: contain; } /* the 16:9 poster sits whole on the sapphire card until mobile.mp4 (4:5) plays */ #lp-family .fs { margin-top: 40px; padding: 24px 0 32px; row-gap: 16px; } #lp-family .fs__k, #lp-family .fs__s { grid-column: 1; } #lp-family .fs__s { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--dl-rule); font-size: 16px; } /* the family: MuniPro, the bridge, MuniOpen */ #lp-family .ff { grid-template-rows: none; row-gap: 0; } #lp-family .ff__card, #lp-family .ff__card:first-child, #lp-family .ff__card:last-child { grid-column: 1; grid-row: auto; display: flex; flex-direction: column; gap: 16px; padding: 20px; } #lp-family .ff__bridge { grid-column: 1; grid-row: auto; padding: 0 0 16px; } #lp-family .ff__wires { width: 2px; height: 24px; border: 0; border-radius: 0; background: var(--dl-action); } #lp-family .ff__wires::after { display: none; } #lp-family .ff__line { margin-top: 0; padding: 12px 16px; font-size: 15px; line-height: 24px; } #lp-family .ff__bridge::after { content: ""; display: block; width: 2px; height: 24px; background: var(--dl-action); } #lp-family .fr { row-gap: 12px; } #lp-family .fr2 { row-gap: 12px; margin-top: 12px; } #lp-family .fr__c, #lp-family .fr__list { grid-column: 1; padding: 20px; } #lp-family .fu { grid-template-rows: none; row-gap: 16px; } #lp-family .fu__card { grid-row: auto; display: flex; flex-direction: column; } #lp-family .fp__grid.persona-grid { grid-template-columns: minmax(0, 1fr); } #lp-family .fp .fp__grid .persona-card { grid-column: 1 / -1; } #lp-family .fp__h { flex-direction: column; gap: 4px; } #lp-family .fw { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* five tiles: 2 + 2 + 1, the last full width (no hole) */ #lp-family .fw--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lp-family .fw--5 > .fw-tile:nth-child(n) { grid-column: auto; } /* (1,3,0): beats the tablet nth-child(n+4) span 3 */ #lp-family .fw--5 > .fw-tile:last-child { grid-column: 1 / -1; } #lp-family .fw-tile { min-height: 172px; padding: 16px; } #lp-family .fw__cap { font-size: 20px; line-height: 28px; } #lp-family .fe { display: flex; flex-direction: column; gap: 0; } #lp-family .fe__stop { display: grid; grid-template-columns: 16px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 12px; padding-bottom: 32px; } #lp-family .fe__node { grid-column: 1; grid-row: 1 / span 2; height: auto; } #lp-family .fe__node::before { left: 7px; right: auto; top: 8px; width: 2px; height: calc(100% + 32px); } #lp-family .fe__mark, #lp-family .fe__p { grid-column: 2; } #lp-family .fc__card { padding: 24px; } #lp-family .fc__quiet { flex-direction: column; } } /* ---- port additions (not in the frame's board CSS) ---- */ /* the lockup sprite: symbols only, never drawn itself */ .lp-family .f-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } /* a loop or its poster (marketing/_launch_video.html) fills the 16:9 card, as the frame's video does */ #lp-family .fv__frame .lp-fv { position: absolute; inset: 0; } #lp-family .fv__frame .lp-fv__video, #lp-family .fv__frame .lp-fv__still { width: 100%; height: 100%; object-fit: cover; } /* the drawn card's play mark is decorative here: the loops autoplay muted, so nothing waits on a press */ #lp-family .fv__play { pointer-events: none; } /* a link whose page is still dark renders as its words, in the link's type with no affordance */ #lp-family .f-go--text { color: var(--dl-text); } #lp-family .f-go--text:hover span { text-decoration: none; } #lp-family .dl-nav__a--text, #lp-family .dl-nav__a--text:hover { color: var(--dl-text); cursor: default; } #lp-family .dl-nav__a--text:hover .dl-nav__t { text-decoration: none; } #lp-family .dl-row--text, #lp-family .dl-row--text:hover { background: none; color: var(--dl-text); cursor: default; } #lp-family .dl-fam__lk .dl-lockup { width: auto; } #lp-family div.persona-card { cursor: default; } /* launch-comms copy (24-family-page.md): the hero eyebrow, brand line and footnote, the visible video captions and the workstation's platform link, in the frame's type styles */ #lp-family .fh__k { margin-bottom: 12px; } #lp-family .fh__brand { margin: 12px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--dl-ink); } #lp-family .fh__fn { margin: 16px 0 0; font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-family .fv__cap { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-family .fw__go { margin-top: 16px; text-align: center; } @media (max-width: 639.98px) { #lp-family .fv__frame .lp-fv__video { object-fit: contain; } } /* the hero: FAMILY's, with the eyebrow over the gold rule and the session line under the actions */ #lp-family .u2-hero { padding-bottom: 96px; } #lp-family .u2-hero .f-k { margin-bottom: 16px; } #lp-family .u2-when { margin: 16px 0 0; font-size: 14px; line-height: 21px; color: var(--dl-muted); } /* the tools: four equal tracks, two rows of equal height */ #lp-family .u2-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; } #lp-family .u2-tool { display: flex; flex-direction: column; gap: 12px; padding: 0 0 8px; overflow: hidden; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .u2-tool:hover, #lp-family .u2-tool.is-hover, #lp-family .u2-tool:focus-within { border-color: var(--dl-action); } #lp-family .u2-tool:hover .u2-pic, #lp-family .u2-tool.is-hover .u2-pic { background: var(--dl-action-soft); } #lp-family .u2-tool__t { margin: 8px 20px 0; font-family: var(--dl-font-display); font-size: 20px; line-height: 26px; font-weight: 600; color: var(--dl-ink); } #lp-family .u2-tool__p { flex: 1; margin: 0 20px; font-size: 14px; line-height: 21px; color: var(--dl-text); } #lp-family .u2-tool__go { margin: 0 20px; border-top: 1px solid var(--dl-rule); } #lp-family .u2-open { font-size: 14px; } /* a poster: 16:10, a capture cover-cropped from the top, or the drawn app card */ #lp-family .u2-pic { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--dl-rule); background: var(--dl-tint); container-type: inline-size; } #lp-family .u2-pic img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; } #lp-family .u2-app { position: absolute; inset: 4.5cqi 3cqi 0; display: flex; flex-direction: column; overflow: hidden; background: var(--dl-surface); border: 1px solid var(--dl-rule); border-bottom: 0; border-radius: 2cqi 2cqi 0 0; } #lp-family .u2-nav { display: flex; justify-content: space-between; align-items: flex-end; flex: none; padding: 0 2.4cqi; border-bottom: 1px solid var(--dl-rule); font-family: var(--dl-font-ui); font-size: 3.05cqi; line-height: 1.2; white-space: nowrap; color: var(--dl-muted); } #lp-family .u2-nav span { padding: 2.1cqi 0 1.7cqi; border-bottom: 2px solid transparent; margin-bottom: -1px; } #lp-family .u2-nav.u2-r2, #lp-family .u2-nav.u2-r3, #lp-family .u2-nav.u2-nav--few { justify-content: flex-start; gap: 4.2cqi; } #lp-family .u2-nav.u2-r2 { background: var(--dl-page); } #lp-family .u2-r1 .is-on { font-weight: 600; color: var(--dl-ink); border-bottom-color: var(--dl-gold); } #lp-family .u2-r2 .is-on, #lp-family .u2-r3 .is-on { font-weight: 600; color: var(--dl-action); border-bottom-color: var(--dl-action); } #lp-family .u2-nav .u2-more { color: var(--dl-faint); letter-spacing: 0.1em; } #lp-family .u2-sk { flex: 1; min-height: 0; padding: 3cqi; } #lp-family .u2-b { display: block; height: 1.8cqi; border-radius: 1cqi; background: var(--dl-rule-strong); } /* calendar cells */ #lp-family .u2-sk--cal { display: flex; flex-direction: column; gap: 2cqi; } #lp-family .u2-cal__h { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.6cqi; } #lp-family .u2-cal__h i { height: 1.6cqi; border-radius: 1cqi; background: var(--dl-rule-strong); width: 50%; } #lp-family .u2-cal__g { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: 1.6cqi; } #lp-family .u2-cal__c { display: flex; flex-direction: column; gap: 1.2cqi; padding: 1.4cqi; border: 1px solid var(--dl-rule); border-radius: 1cqi; background: var(--dl-surface); } #lp-family .u2-cal__c i { height: 2.4cqi; border-radius: 1cqi; background: var(--dl-tint); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .u2-cal__c.is-open { border-color: var(--dl-action); background: var(--dl-action-soft); } #lp-family .u2-cal__c.is-open i { background: var(--dl-action-line); box-shadow: none; } /* table rows */ #lp-family .u2-sk--tbl { display: flex; flex-direction: column; justify-content: space-between; } #lp-family .u2-tr { display: flex; align-items: center; gap: 2.4cqi; padding-bottom: 1.6cqi; border-bottom: 1px solid var(--dl-rule); } #lp-family .u2-tr .u2-b { flex: none; background: var(--dl-rule); } #lp-family .u2-tr--h .u2-b { background: var(--dl-rule-strong); height: 1.4cqi; } #lp-family .u2-tr .u2-b--spread { height: 2.4cqi; margin-left: auto; background: var(--dl-faint); border-radius: 0.6cqi; } /* lines */ #lp-family .u2-sk--svg { display: flex; } #lp-family .u2-sk--svg svg { width: 100%; height: 100%; } #lp-family .u2-gl { stroke: var(--dl-rule); stroke-width: 1; vector-effect: non-scaling-stroke; } #lp-family .u2-c1, #lp-family .u2-c2, #lp-family .u2-c3, #lp-family .u2-cs, #lp-family .u2-saw, #lp-family .u2-idx { fill: none; vector-effect: non-scaling-stroke; } #lp-family .u2-c1 { stroke: var(--dl-rule-strong); stroke-width: 2; } #lp-family .u2-c2 { stroke: var(--dl-faint); stroke-width: 2; } #lp-family .u2-c3 { stroke: var(--dl-muted); stroke-width: 2; } #lp-family .u2-cs { stroke: var(--dl-ink); stroke-width: 1.5; stroke-dasharray: 4 3; } #lp-family .u2-dot { fill: var(--dl-surface); stroke: var(--dl-ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; } #lp-family .u2-saw { stroke: var(--dl-muted); stroke-width: 2; stroke-linejoin: round; } #lp-family .u2-idx { stroke: var(--dl-faint); stroke-width: 1.5; stroke-dasharray: 5 4; } #lp-family .u2-gold { fill: var(--dl-surface); stroke: var(--dl-gold); stroke-width: 3; vector-effect: non-scaling-stroke; } /* ranked lists */ #lp-family .u2-sk--list { display: flex; flex-direction: column; justify-content: space-between; gap: 1.4cqi; } #lp-family .u2-search { height: 5cqi; border: 1px solid var(--dl-rule-strong); border-radius: 1.2cqi; padding: 1.6cqi 2cqi; } #lp-family .u2-search i { display: block; width: 30%; height: 1.6cqi; border-radius: 1cqi; background: var(--dl-rule); } #lp-family .u2-pills { display: flex; gap: 1.6cqi; } #lp-family .u2-pills span { width: 14cqi; height: 4cqi; border-radius: 2cqi; box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .u2-pills span.is-on { background: var(--dl-tint); } #lp-family .u2-hr { display: flex; align-items: center; gap: 2.4cqi; } #lp-family .u2-hr .u2-b { flex: none; background: var(--dl-rule); } #lp-family .u2-av { flex: none; width: 3.4cqi; height: 3.4cqi; border-radius: 50%; background: var(--dl-rule-strong); } #lp-family .u2-rank { flex: none; width: 3.4cqi; height: 3.4cqi; border-radius: 0.8cqi; background: var(--dl-tint); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .u2-track { flex: 1; height: 2.6cqi; } #lp-family .u2-track i { display: block; height: 100%; border-radius: 0.6cqi; background: var(--dl-faint); } /* the month strip */ #lp-family .u2-sk--liq { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4cqi; } #lp-family .u2-m { display: flex; flex-direction: column; gap: 1.2cqi; min-height: 0; } #lp-family .u2-m__s { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.6cqi; border-bottom: 1px solid var(--dl-rule-strong); } #lp-family .u2-m__a { display: block; border-radius: 0.6cqi 0.6cqi 0 0; background: var(--dl-faint); } #lp-family .u2-m__b { display: block; border-radius: 0.6cqi; background: var(--dl-rule-strong); } #lp-family .u2-m__l { display: block; height: 1.4cqi; border-radius: 1cqi; background: var(--dl-rule); } /* the state tiles */ #lp-family .u2-sk--states { display: grid; grid-template-columns: 62fr 30fr; gap: 4cqi; align-items: center; } #lp-family .u2-map { display: grid; grid-template-columns: repeat(11, 1fr); grid-template-rows: repeat(8, 1fr); gap: 0.7cqi; aspect-ratio: 11 / 8; max-height: 100%; } #lp-family .u2-st { display: block; border-radius: 0.5cqi; } #lp-family .u2-st--0 { background: var(--dl-tint); box-shadow: inset 0 0 0 1px var(--dl-rule); } #lp-family .u2-st--1 { background: var(--dl-rule); } #lp-family .u2-st--2 { background: var(--dl-rule-strong); } #lp-family .u2-st--3 { background: var(--dl-faint); } #lp-family .u2-st.is-sel { background: var(--dl-action-soft); box-shadow: inset 0 0 0 1.5px var(--dl-action); } #lp-family .u2-side { display: flex; flex-direction: column; gap: 2.4cqi; } #lp-family .u2-side .u2-b { background: var(--dl-rule); } /* the AI band: frame_l6's connector band in DL2, copy 5 tracks, the figure 7 */ #lp-family .u2-ai { align-items: center; } #lp-family .u2-ai__copy { grid-column: 1 / span 5; } #lp-family .u2-ai__copy .f-head { margin-bottom: 24px; } #lp-family .u2-ai__fig { grid-column: 7 / span 6; display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.15fr); align-items: center; gap: 12px; } #lp-family .u2-ai__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } #lp-family .u2-ai__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 10px 14px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-control); background: var(--dl-surface); font-size: 14px; line-height: 20px; font-weight: 500; color: var(--dl-ink); } #lp-family .u2-ai__t small { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--dl-muted); } #lp-family .u2-ai__arrow { display: flex; justify-content: center; color: var(--dl-action); } #lp-family .u2-ai__mp { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--dl-action-line); border-radius: var(--dl-r-card); background: var(--dl-sky); } #lp-family .u2-ai__k { margin: 0; font-family: var(--dl-font-mono); font-size: 12px; line-height: 16px; color: var(--dl-ink); } #lp-family .u2-ai__c { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; } #lp-family .u2-ai__c li { position: relative; padding-left: 22px; font-size: 14px; line-height: 21px; color: var(--dl-text); } #lp-family .u2-ai__c li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 5px; border-left: 2px solid var(--dl-action); border-bottom: 2px solid var(--dl-action); transform: rotate(-45deg); } /* the record: two cards on 6 + 6 tracks */ #lp-family .u2-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } #lp-family .u2-rec { display: flex; flex-direction: column; gap: 12px; padding: 32px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .u2-rec__t { margin: 0; font-family: var(--dl-font-display); font-size: 24px; line-height: 30px; font-weight: 600; color: var(--dl-ink); } #lp-family .u2-rec__p { flex: 1; margin: 0; font-size: 16px; line-height: 26px; color: var(--dl-text); } #lp-family .u2-rec__chips { margin-top: 8px; } #lp-family .fr__dots .u2-par { display: inline-flex; align-items: baseline; gap: 8px; } #lp-family .u2-par span { font-size: 12px; color: var(--dl-muted); } #lp-family .u2-par b { font-family: var(--dl-font-mono); font-size: 14px; font-weight: 500; color: var(--dl-ink); } #lp-family .u2-par--x b { text-decoration: line-through; color: var(--dl-muted); } /* training: three equal cards on 4 + 4 + 4 tracks */ #lp-family .u2-train { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #lp-family .u2-train--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* no one-pager file yet: 6/6 */ #lp-family .u2-tr-card { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 8px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .u2-tr-card__pic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 176px; margin-bottom: 8px; border-radius: var(--dl-r-control); background: var(--dl-tint); } #lp-family .u2-tr-card .f-k { margin-top: 4px; padding: 0 4px; } #lp-family .u2-tr-card__t { margin: 0; padding: 0 4px; font-family: var(--dl-font-display); font-size: 22px; line-height: 28px; font-weight: 600; color: var(--dl-ink); } #lp-family .u2-tr-card__p { flex: 1; margin: 0; padding: 0 4px; font-size: 14px; line-height: 21px; color: var(--dl-text); } #lp-family .u2-tr-card__go { padding: 8px 4px; border-top: 1px solid var(--dl-rule); } #lp-family .u2-tr-card__go .f-btn { width: 100%; justify-content: center; } #lp-family .u2-date { display: grid; justify-items: center; width: 96px; padding: 8px 0 10px; border-radius: var(--dl-r-control); border-top: 4px solid var(--dl-action); background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule); } #lp-family .u2-date span { font-family: var(--dl-font-mono); font-size: 11px; line-height: 16px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--dl-muted); } #lp-family .u2-date b { font-family: var(--dl-font-display); font-size: 40px; line-height: 44px; font-weight: 600; color: var(--dl-ink); } #lp-family .u2-split { display: grid; grid-template-columns: 2fr 1fr; gap: 3px; width: 72%; } #lp-family .u2-split span { padding: 3px 6px; border-radius: var(--dl-r-tag); background: var(--dl-action-soft); font-size: 11px; line-height: 16px; color: var(--dl-ink); text-align: center; white-space: nowrap; } #lp-family .u2-split span + span { background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .u2-sheet { display: flex; flex-direction: column; gap: 5px; width: 104px; aspect-ratio: 816 / 1056; padding: 12px 10px; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .u2-sheet i { display: block; height: 4px; border-radius: 2px; background: var(--dl-rule); } #lp-family .u2-sheet i:first-child { height: 8px; width: 70%; background: var(--dl-ink); } #lp-family .u2-sheet i.s { width: 60%; } #lp-family .u2-sheet i.p { height: 22px; background: var(--dl-action-soft); } #lp-family .u2-acad { padding: 20px 28px; border-radius: var(--dl-r-control); background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule); } #lp-family .u2-disc { margin: 32px 0 0; font-size: 12px; line-height: 18px; color: var(--dl-muted); text-align: center; } @media (max-width: 1099.98px) { #lp-family .u2-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } #lp-family .u2-ai__copy, #lp-family .u2-ai__fig { grid-column: 1 / -1; } #lp-family .u2-ai__fig { margin-top: 32px; } } @media (max-width: 639.98px) { #lp-family .u2-hero { padding-bottom: 64px; } #lp-family .u2-tools, #lp-family .u2-recs, #lp-family .u2-train { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } #lp-family .u2-ai__fig { grid-template-columns: minmax(0, 1fr); } #lp-family .u2-ai__arrow { transform: rotate(90deg); } #lp-family .u2-rec { padding: 20px; } #lp-family .u2-rec__t { font-size: 22px; line-height: 28px; } } /* ---- r15: the ROLE template (role2.html), ported from frame_l16 PAGE_CSS above ---- */ /* the drawn posters' widths, heights and tile places as classes (the frame draws them as inline styles; CSP forbids those) */ #lp-family .u2-w10 { width: 10%; } #lp-family .u2-w12 { width: 12%; } #lp-family .u2-w16 { width: 16%; } #lp-family .u2-w22 { width: 22%; } #lp-family .u2-w24 { width: 24%; } #lp-family .u2-w26 { width: 26%; } #lp-family .u2-w27 { width: 27%; } #lp-family .u2-w28 { width: 28%; } #lp-family .u2-w30 { width: 30%; } #lp-family .u2-w32 { width: 32%; } #lp-family .u2-w33 { width: 33%; } #lp-family .u2-w34 { width: 34%; } #lp-family .u2-w38 { width: 38%; } #lp-family .u2-w40 { width: 40%; } #lp-family .u2-w46 { width: 46%; } #lp-family .u2-w47 { width: 47%; } #lp-family .u2-w52 { width: 52%; } #lp-family .u2-w58 { width: 58%; } #lp-family .u2-w60 { width: 60%; } #lp-family .u2-w66 { width: 66%; } #lp-family .u2-w70 { width: 70%; } #lp-family .u2-w74 { width: 74%; } #lp-family .u2-w81 { width: 81%; } #lp-family .u2-w92 { width: 92%; } #lp-family .u2-w96 { width: 96%; } #lp-family .u2-h12 { height: 12%; } #lp-family .u2-h14 { height: 14%; } #lp-family .u2-h16 { height: 16%; } #lp-family .u2-h18 { height: 18%; } #lp-family .u2-h20 { height: 20%; } #lp-family .u2-h22 { height: 22%; } #lp-family .u2-h24 { height: 24%; } #lp-family .u2-h26 { height: 26%; } #lp-family .u2-h28 { height: 28%; } #lp-family .u2-h30 { height: 30%; } #lp-family .u2-h34 { height: 34%; } #lp-family .u2-h36 { height: 36%; } #lp-family .u2-h38 { height: 38%; } #lp-family .u2-h44 { height: 44%; } #lp-family .u2-h46 { height: 46%; } #lp-family .u2-h52 { height: 52%; } #lp-family .u2-h60 { height: 60%; } #lp-family .u2-h70 { height: 70%; } #lp-family .u2-g1-1 { grid-row: 1; grid-column: 1; } #lp-family .u2-g1-11 { grid-row: 1; grid-column: 11; } #lp-family .u2-g2-11 { grid-row: 2; grid-column: 11; } #lp-family .u2-g3-1 { grid-row: 3; grid-column: 1; } #lp-family .u2-g3-2 { grid-row: 3; grid-column: 2; } #lp-family .u2-g3-3 { grid-row: 3; grid-column: 3; } #lp-family .u2-g3-4 { grid-row: 3; grid-column: 4; } #lp-family .u2-g3-5 { grid-row: 3; grid-column: 5; } #lp-family .u2-g3-7 { grid-row: 3; grid-column: 7; } #lp-family .u2-g3-9 { grid-row: 3; grid-column: 9; } #lp-family .u2-g3-10 { grid-row: 3; grid-column: 10; } #lp-family .u2-g3-11 { grid-row: 3; grid-column: 11; } #lp-family .u2-g4-1 { grid-row: 4; grid-column: 1; } #lp-family .u2-g4-2 { grid-row: 4; grid-column: 2; } #lp-family .u2-g4-3 { grid-row: 4; grid-column: 3; } #lp-family .u2-g4-4 { grid-row: 4; grid-column: 4; } #lp-family .u2-g4-5 { grid-row: 4; grid-column: 5; } #lp-family .u2-g4-6 { grid-row: 4; grid-column: 6; } #lp-family .u2-g4-7 { grid-row: 4; grid-column: 7; } #lp-family .u2-g4-8 { grid-row: 4; grid-column: 8; } #lp-family .u2-g4-9 { grid-row: 4; grid-column: 9; } #lp-family .u2-g4-10 { grid-row: 4; grid-column: 10; } #lp-family .u2-g4-11 { grid-row: 4; grid-column: 11; } #lp-family .u2-g5-1 { grid-row: 5; grid-column: 1; } #lp-family .u2-g5-2 { grid-row: 5; grid-column: 2; } #lp-family .u2-g5-3 { grid-row: 5; grid-column: 3; } #lp-family .u2-g5-4 { grid-row: 5; grid-column: 4; } #lp-family .u2-g5-5 { grid-row: 5; grid-column: 5; } #lp-family .u2-g5-6 { grid-row: 5; grid-column: 6; } #lp-family .u2-g5-7 { grid-row: 5; grid-column: 7; } #lp-family .u2-g5-8 { grid-row: 5; grid-column: 8; } #lp-family .u2-g5-9 { grid-row: 5; grid-column: 9; } #lp-family .u2-g5-10 { grid-row: 5; grid-column: 10; } #lp-family .u2-g6-2 { grid-row: 6; grid-column: 2; } #lp-family .u2-g6-3 { grid-row: 6; grid-column: 3; } #lp-family .u2-g6-4 { grid-row: 6; grid-column: 4; } #lp-family .u2-g6-5 { grid-row: 6; grid-column: 5; } #lp-family .u2-g6-6 { grid-row: 6; grid-column: 6; } #lp-family .u2-g6-7 { grid-row: 6; grid-column: 7; } #lp-family .u2-g6-8 { grid-row: 6; grid-column: 8; } #lp-family .u2-g6-9 { grid-row: 6; grid-column: 9; } #lp-family .u2-g6-10 { grid-row: 6; grid-column: 10; } #lp-family .u2-g7-4 { grid-row: 7; grid-column: 4; } #lp-family .u2-g7-5 { grid-row: 7; grid-column: 5; } #lp-family .u2-g7-6 { grid-row: 7; grid-column: 6; } #lp-family .u2-g7-7 { grid-row: 7; grid-column: 7; } #lp-family .u2-g7-8 { grid-row: 7; grid-column: 8; } #lp-family .u2-g7-9 { grid-row: 7; grid-column: 9; } #lp-family .u2-g8-1 { grid-row: 8; grid-column: 1; } #lp-family .u2-g8-4 { grid-row: 8; grid-column: 4; } #lp-family .u2-g8-9 { grid-row: 8; grid-column: 9; } /* the copy's screen path under each tool line, the "Coming" chip in the link row, the connector's C69 line */ #lp-family .u2-tool__path { margin: 0 20px; font-family: var(--dl-font-mono); font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-family .u2-tool__go .f-chip { margin: 12px 0 8px; } #lp-family .u2-pic .lp-fv { position: absolute; inset: 0; } #lp-family .u2-pic .lp-fv__video, #lp-family .u2-pic .lp-fv__still { width: 100%; height: 100%; object-fit: cover; object-position: top left; } #lp-family .u2-ai__added { margin-top: 12px; } /* one record row left (C07 uncleared): it takes the full width */ #lp-family .u2-recs--1 { grid-template-columns: minmax(0, 1fr); } /* the teach-in card's clock (the session card's date tile, in minutes) */ #lp-family .u2-date--clock b { order: -1; } /* ---- frame_l21: /for/bankers/ on the ROLE template (role2.html), ported from frame_l21 PAGE_CSS ---- */ /* production renders only the variant its gates pick, so the frame's data-b2="monday" rules have no port */ /* the issuer views: three equal tracks, rows of equal height */ #lp-family .b2-views { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; } #lp-family .b2-crumb { margin: -6px 20px 0; font-family: var(--dl-font-mono); font-size: 12px; line-height: 16px; color: var(--dl-muted); } #lp-family .b2-go { display: flex; align-items: center; min-height: 48px; } #lp-family .b2-quiet { background: var(--dl-page); } #lp-family .b2-quiet__pic { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; } #lp-family .b2-quiet:hover .u2-pic, #lp-family .b2-quiet.is-hover .u2-pic { background: var(--dl-tint); } /* skeleton rows */ #lp-family .b2-sk--rows { display: flex; flex-direction: column; gap: 1.6cqi; } #lp-family .b2-row { display: flex; align-items: center; gap: 2.4cqi; padding-bottom: 1.3cqi; border-bottom: 1px solid var(--dl-rule); } #lp-family .b2-row .u2-b { flex: none; background: var(--dl-rule); } #lp-family .b2-row .u2-b:first-of-type { margin-right: auto; } #lp-family .b2-row--h .u2-b { background: var(--dl-rule-strong); height: 1.4cqi; } #lp-family .b2-row--1, #lp-family .b2-tr--1 { padding-left: 3cqi; } #lp-family .b2-tr--2 { padding-left: 6cqi; } #lp-family .b2-row--0 .u2-b:first-of-type { background: var(--dl-faint); } #lp-family .b2-files { display: flex; gap: 1.6cqi; margin-top: auto; justify-content: flex-end; } #lp-family .b2-file { width: 7cqi; height: 3.6cqi; border-radius: 0.8cqi; box-shadow: inset 0 0 0 1px var(--dl-rule-strong); background: var(--dl-tint); } #lp-family .b2-file--x { background: var(--dl-action-soft); box-shadow: inset 0 0 0 1px var(--dl-action-line); } #lp-family .b2-caret { flex: none; width: 0; height: 0; border-left: 1cqi solid transparent; border-right: 1cqi solid transparent; border-top: 1.4cqi solid var(--dl-faint); } #lp-family .b2-tr--2 .b2-caret { border-top-color: transparent; } /* checked against the spreadsheet */ #lp-family .b2-sk--verify { display: grid; grid-template-columns: 1fr 6cqi 1fr; gap: 2cqi; } #lp-family .b2-sheet { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(5, 1fr); border: 1px solid var(--dl-rule-strong); border-radius: 0.8cqi; overflow: hidden; } #lp-family .b2-sheet i { border-right: 1px solid var(--dl-rule); border-bottom: 1px solid var(--dl-rule); } #lp-family .b2-sheet--x { background: var(--dl-tint); } #lp-family .b2-ticks { display: flex; flex-direction: column; justify-content: space-around; align-items: center; } #lp-family .b2-tick { width: 2.6cqi; height: 1.3cqi; border-left: 2px solid var(--dl-faint); border-bottom: 2px solid var(--dl-faint); transform: rotate(-45deg); } /* the file reader */ #lp-family .b2-sk--file { display: grid; grid-template-columns: 34fr 66fr; gap: 3cqi; } #lp-family .b2-tree { display: flex; flex-direction: column; gap: 2cqi; padding-right: 2cqi; border-right: 1px solid var(--dl-rule); } #lp-family .b2-tree .u2-b { background: var(--dl-rule); } #lp-family .b2-tree .u2-b:nth-child(2) { background: var(--dl-action-line); } #lp-family .b2-ind--1 { margin-left: 3cqi; } #lp-family .b2-tbl { display: flex; flex-direction: column; gap: 1.6cqi; } /* bars */ #lp-family .b2-sk--bars { display: flex; gap: 3cqi; } #lp-family .b2-plot { flex: 1; display: flex; align-items: flex-end; gap: 1.4cqi; border-bottom: 1px solid var(--dl-rule-strong); } #lp-family .b2-plot--s { flex: 0 0 26%; } #lp-family .b2-col { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; } #lp-family .b2-seg { display: block; } #lp-family .b2-seg--0 { background: var(--dl-faint); } #lp-family .b2-seg--1 { background: var(--dl-rule-strong); } #lp-family .b2-seg--2 { background: var(--dl-action-line); } #lp-family .b2-seg--3 { background: var(--dl-muted); } /* the two files */ #lp-family .b2-sk--pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4cqi; padding-right: 10cqi; } #lp-family .b2-doc { display: flex; flex-direction: column; gap: 1.6cqi; padding: 2cqi; border: 1px solid var(--dl-rule-strong); border-radius: 1cqi; background: var(--dl-surface); } #lp-family .b2-doc__h { height: 3cqi; border-radius: 0.6cqi; background: var(--dl-action-soft); box-shadow: inset 0 0 0 1px var(--dl-action-line); } #lp-family .b2-doc__r { display: flex; gap: 1.6cqi; } #lp-family .b2-doc__r .u2-b { flex: none; background: var(--dl-rule); } #lp-family .b2-dl { position: absolute; right: 3cqi; top: 50%; width: 5cqi; height: 5cqi; margin-top: -2.5cqi; border-radius: 1cqi; background: var(--dl-tint); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .b2-dl i { position: absolute; left: 50%; top: 20%; width: 1.6cqi; height: 1.6cqi; margin-left: -0.8cqi; border-right: 2px solid var(--dl-muted); border-bottom: 2px solid var(--dl-muted); transform: rotate(45deg); } /* trades and a curve */ #lp-family .b2-sk--trades { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqi; } #lp-family .b2-curve { display: flex; border-left: 1px solid var(--dl-rule); padding-left: 2cqi; } #lp-family .b2-curve svg { width: 100%; height: 100%; } #lp-family .b2-tdot { fill: var(--dl-faint); } /* the work: drawn documents */ #lp-family .b2-work .u2-tr-card__p { padding-bottom: 12px; } #lp-family .b2-deck { display: flex; flex-direction: column; gap: 10px; width: 176px; aspect-ratio: 16 / 9; padding: 12px; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .b2-deck__t { height: 8px; width: 60%; border-radius: 2px; background: var(--dl-ink); } #lp-family .b2-deck__g { flex: 1; display: flex; align-items: flex-end; gap: 6px; border-bottom: 1px solid var(--dl-rule-strong); } #lp-family .b2-deck__g i { flex: 1; background: var(--dl-action-line); } #lp-family .b2-hist { display: flex; flex-direction: column; gap: 10px; width: 176px; padding: 14px; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .b2-hist span { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #lp-family .b2-hist .u2-b { height: 6px; border-radius: 3px; background: var(--dl-rule); } #lp-family .b2-ok { flex: none; width: 10px; height: 5px; border-left: 2px solid var(--dl-action); border-bottom: 2px solid var(--dl-action); transform: rotate(-45deg); } #lp-family .b2-ai__go { display: flex; flex-wrap: wrap; gap: 8px 24px; } @media (max-width: 1099.98px) { #lp-family .b2-views { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639.98px) { #lp-family .b2-views { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } } /* the bankers posters' widths and heights the underwriter set lacks (posters.POSTER_CSS_CLASSES) */ #lp-family .u2-w14 { width: 14%; } #lp-family .u2-w18 { width: 18%; } #lp-family .u2-w20 { width: 20%; } #lp-family .u2-w48 { width: 48%; } #lp-family .u2-w50 { width: 50%; } #lp-family .u2-w56 { width: 56%; } #lp-family .u2-w62 { width: 62%; } #lp-family .u2-h1 { height: 1%; } #lp-family .u2-h2 { height: 2%; } #lp-family .u2-h4 { height: 4%; } #lp-family .u2-h6 { height: 6%; } #lp-family .u2-h7 { height: 7%; } #lp-family .u2-h8 { height: 8%; } #lp-family .u2-h10 { height: 10%; } #lp-family .u2-h32 { height: 32%; } #lp-family .u2-h40 { height: 40%; } #lp-family .u2-h42 { height: 42%; } #lp-family .u2-h48 { height: 48%; } #lp-family .u2-h50 { height: 50%; } #lp-family .u2-h54 { height: 54%; } #lp-family .u2-h56 { height: 56%; } #lp-family .u2-h58 { height: 58%; } #lp-family .u2-h62 { height: 62%; } #lp-family .u2-h64 { height: 64%; } #lp-family .u2-h80 { height: 80%; } /* ---- frame_l22: /for/rfp-response/ on the ROLE template (ROLE2_RFP / ROLE2_RFP_M), from its PAGE_CSS ---- */ /* the RFP pictures' bar widths the stylesheet lacked (posters.RFP_WIDTHS; CSP: classes, never inline styles) */ #lp-family .u2-w54 { width: 54%; } #lp-family .u2-w64 { width: 64%; } #lp-family .u2-w72 { width: 72%; } #lp-family .u2-w76 { width: 76%; } #lp-family .u2-w80 { width: 80%; } #lp-family .u2-w82 { width: 82%; } #lp-family .u2-w84 { width: 84%; } #lp-family .u2-w86 { width: 86%; } #lp-family .u2-w88 { width: 88%; } /* the flow: two rows under one head, numbered by a counter so a dropped card leaves no gap */ #lp-family .r2-flow { display: flex; flex-direction: column; gap: 40px; counter-reset: r2s; } #lp-family .r2-row { display: flex; flex-direction: column; gap: 16px; } #lp-family .r2-lab { margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--dl-rule); font-family: var(--dl-font-ui); font-size: 15px; line-height: 22px; font-weight: 600; color: var(--dl-ink); } #lp-family .r2-today { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } #lp-family .r2-today--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* C97 shut: card 2 drops, halves */ #lp-family .r2-next { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } #lp-family .r2-card { counter-increment: r2s; } #lp-family .r2-n { margin: 4px 20px -8px; } #lp-family .r2-n::before { content: counter(r2s, decimal-leading-zero); } #lp-family .r2-step .u2-tool__t { font-size: 18px; line-height: 24px; } #lp-family .r2-step .u2-tool__p { font-size: 13px; line-height: 20px; } #lp-family .r2-step .r2-n, #lp-family .r2-step .u2-tool__t, #lp-family .r2-step .u2-tool__p, #lp-family .r2-step .u2-tool__go { margin-left: 16px; margin-right: 16px; } /* card 2: a neutral exchange */ #lp-family .r2-chat { position: absolute; inset: 4.5cqi 6cqi 0; display: flex; flex-direction: column; gap: 3cqi; padding: 4cqi 4cqi 0; background: var(--dl-surface); border: 1px solid var(--dl-rule); border-bottom: 0; border-radius: 2cqi 2cqi 0 0; } #lp-family .r2-q { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 1.6cqi; width: 58%; padding: 2.6cqi 3cqi; border-radius: 3cqi 3cqi 0.8cqi 3cqi; background: var(--dl-tint); box-shadow: inset 0 0 0 1px var(--dl-rule); } #lp-family .r2-q .u2-b { background: var(--dl-rule-strong); } #lp-family .r2-a { display: flex; flex-direction: column; gap: 1.8cqi; width: 90%; } #lp-family .r2-a > .u2-b { background: var(--dl-rule); } #lp-family .r2-cites { display: flex; gap: 2cqi; margin-top: 1cqi; } #lp-family .r2-cite { display: flex; align-items: center; width: 20cqi; height: 4.4cqi; padding: 0 2cqi; border-radius: 2.2cqi; background: var(--dl-action-soft); box-shadow: inset 0 0 0 1px var(--dl-action-line); } #lp-family .r2-cite .u2-b { height: 1.2cqi; background: var(--dl-action-line); } #lp-family .r2-mcp { position: absolute; left: 4cqi; bottom: 3.4cqi; padding: 2px 8px; border-radius: var(--dl-r-tag); font-family: var(--dl-font-mono); font-size: 11px; line-height: 16px; color: var(--dl-ink); background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } /* card 3: the memo beside the deck */ #lp-family .r2-pair { display: flex; align-items: center; justify-content: center; gap: 20px; } /* MuniPro AI posters: the app card, a quiet top bar, one step, and the on-screen Coming label */ #lp-family .r2-app { inset: 6cqi 5cqi 0; } #lp-family .r2-bar { display: flex; align-items: center; gap: 3cqi; flex: none; height: 9cqi; padding: 0 4cqi; border-bottom: 1px solid var(--dl-rule); background: var(--dl-page); } #lp-family .r2-bar .u2-b { height: 2.4cqi; background: var(--dl-rule-strong); } #lp-family .r2-dot { flex: none; width: 4.4cqi; height: 4.4cqi; border-radius: 1.2cqi; background: var(--dl-action-line); } #lp-family .r2-soon { position: absolute; top: 8cqi; right: 7cqi; height: 20px; padding: 0 6px; font-size: 11px; } #lp-family .r2-sk { padding: 5cqi; } #lp-family .r2-sk .u2-b { height: 2.6cqi; border-radius: 1.3cqi; background: var(--dl-rule); } #lp-family .r2-sk--list { display: flex; flex-direction: column; justify-content: space-around; gap: 2.4cqi; } #lp-family .r2-sk--up { display: flex; } #lp-family .r2-drop { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqi; border: 2px dashed var(--dl-rule-strong); border-radius: 2.4cqi; background: var(--dl-tint); } #lp-family .r2-up { position: relative; width: 7cqi; height: 7cqi; } #lp-family .r2-up i { position: absolute; left: 50%; top: 25%; width: 4.6cqi; height: 4.6cqi; margin-left: -2.3cqi; border-left: 2px solid var(--dl-action); border-top: 2px solid var(--dl-action); transform: rotate(45deg); } #lp-family .r2-files { display: flex; justify-content: center; gap: 3cqi; } #lp-family .r2-f { width: 12cqi; height: 7cqi; border-radius: 1cqi; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .r2-f--w { background: var(--dl-action-soft); box-shadow: inset 0 0 0 1px var(--dl-action-line); } #lp-family .r2-qrow { display: flex; align-items: center; gap: 3cqi; padding: 1.4cqi 2cqi; border-radius: 1.4cqi; } #lp-family .r2-qrow.is-on { background: var(--dl-action-soft); } #lp-family .r2-num { flex: none; width: 4.6cqi; height: 4.6cqi; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--dl-faint); } #lp-family .r2-qrow.is-on .r2-num { box-shadow: inset 0 0 0 1.5px var(--dl-action); } #lp-family .r2-ans { display: flex; flex-direction: column; gap: 2cqi; padding: 2.6cqi; border: 1px solid var(--dl-rule); border-radius: 1.6cqi; } #lp-family .r2-src { display: flex; gap: 2cqi; } #lp-family .r2-src span { width: 14cqi; height: 3.6cqi; border-radius: 1.8cqi; background: var(--dl-action-soft); box-shadow: inset 0 0 0 1px var(--dl-action-line); } #lp-family .r2-edit { display: flex; align-items: center; gap: 1cqi; padding: 2cqi; margin: 0 -2cqi; border-radius: 1.2cqi; background: var(--dl-action-soft); box-shadow: inset 0 0 0 1.5px var(--dl-action); } #lp-family .r2-edit .u2-b { background: var(--dl-action-line); } #lp-family .r2-caret { flex: none; width: 2px; height: 5cqi; background: var(--dl-ink); } #lp-family .r2-sk--export { display: grid; grid-template-columns: 1fr 8cqi 1fr; align-items: center; gap: 2cqi; } #lp-family .r2-doc { display: flex; flex-direction: column; gap: 2.4cqi; height: 100%; padding: 3cqi; border-radius: 1.2cqi; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .r2-doc__h { height: 3.6cqi; width: 70%; border-radius: 0.8cqi; background: var(--dl-rule-strong); } #lp-family .r2-doc--w .r2-doc__h { width: 100%; background: var(--dl-action-line); } #lp-family .r2-arrow { display: flex; justify-content: center; color: var(--dl-action); } /* coming next: two quiet items on halves */ #lp-family .r2-soonlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; } #lp-family .r2-soonitem { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-page); } #lp-family .r2-soonitem .f-chip { margin: 0; flex: none; } #lp-family .r2-soonitem p { margin: 0; font-size: 16px; line-height: 24px; color: var(--dl-ink); } @media (max-width: 1099.98px) { #lp-family .r2-today, #lp-family .r2-today--2, #lp-family .r2-next { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 639.98px) { #lp-family .r2-soonlist { grid-template-columns: minmax(0, 1fr); } #lp-family .r2-soonitem { align-items: flex-start; flex-direction: column; gap: 10px; padding: 20px; } #lp-family .r2-flow { gap: 32px; } #lp-family .r2-live .b2-go:empty { display: none; } #lp-family .r2-live .u2-tool__p { margin-bottom: 12px; } } /* ---- frame_l23: /for/bond-modeling/ on the ROLE template (role2.html), ported from frame_l23 PAGE_CSS ---- */ /* production renders only the variant its gates pick, so the frame's data-m2 / data-m2free / data-c104 rules have no port; the suite rides on .b2-views (six cards, 3 + 3, as the frame's span-4 grid draws them) */ /* card 2: the real capture, top-left, with the page's own badge */ #lp-family .m2-pic--real img { object-position: left top; } #lp-family .m2-badge { position: absolute; left: 3cqi; bottom: 3cqi; } /* card 7: ROLE2_IB's memo and deck pair, scaled to the poster */ #lp-family .m2-pic--pair { display: flex; align-items: center; justify-content: center; gap: 6cqi; } #lp-family .m2-pic--pair .u2-sheet { width: 22cqi; padding: 2.4cqi 2cqi; gap: 1.2cqi; } #lp-family .m2-pic--pair .u2-sheet i { height: 0.9cqi; } #lp-family .m2-pic--pair .u2-sheet i:first-child { height: 1.8cqi; } #lp-family .m2-pic--pair .u2-sheet i.p { height: 4.4cqi; } #lp-family .m2-pic--pair .b2-deck { width: 44cqi; padding: 2.6cqi; gap: 2cqi; } #lp-family .m2-pic--pair .b2-deck__t { height: 1.8cqi; } #lp-family .m2-pic--pair .b2-deck__g { gap: 1.4cqi; } /* skeletons */ #lp-family .m2-toolbar { display: flex; align-items: center; gap: 2.4cqi; flex: none; height: 8.4cqi; padding: 0 3cqi; border-bottom: 1px solid var(--dl-rule); background: var(--dl-page); } #lp-family .m2-toolbar i { display: block; width: 9cqi; height: 1.6cqi; border-radius: 1cqi; background: var(--dl-rule); } #lp-family .m2-toolbar i.m2-toolbar__t { width: 22cqi; height: 2.2cqi; margin-right: auto; background: var(--dl-rule-strong); } #lp-family .m2-sk--split { display: grid; grid-template-columns: 50fr 50fr; gap: 4cqi; } #lp-family .m2-grid { display: flex; flex-direction: column; gap: 1.8cqi; } #lp-family .m2-plot { gap: 1.6cqi; } #lp-family .m2-sk--scale { display: flex; flex-direction: column; gap: 1.5cqi; } #lp-family .m2-st { display: grid; grid-template-columns: 0.7fr 1fr 1fr 1fr; gap: 3cqi; align-items: center; padding-bottom: 1.1cqi; border-bottom: 1px solid var(--dl-rule); } #lp-family .m2-st i { display: block; height: 1.6cqi; border-radius: 1cqi; background: var(--dl-rule); justify-self: end; } #lp-family .m2-st i:first-child { justify-self: start; background: var(--dl-rule-strong); } #lp-family .m2-st i.is-on { background: var(--dl-action-line); } #lp-family .m2-st--h i { width: 60%; height: 1.3cqi; background: var(--dl-rule-strong); } #lp-family .m2-sk--views { position: relative; display: flex; } #lp-family .m2-window { position: absolute; left: 22%; width: 30%; top: 3cqi; bottom: 3cqi; border-radius: 1cqi; background: var(--dl-tint); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .m2-sk--views .b2-plot { position: relative; } #lp-family .m2-onscreen { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); } #lp-family .m2-sk--option { display: grid; grid-template-columns: 34fr 66fr; gap: 3cqi; } #lp-family .m2-pair { display: flex; flex-direction: column; gap: 2.4cqi; } #lp-family .m2-tile { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqi; padding: 2cqi; border: 1px solid var(--dl-rule-strong); border-radius: 1cqi; background: var(--dl-tint); } #lp-family .m2-tile .u2-b { background: var(--dl-rule-strong); height: 1.3cqi; } #lp-family .m2-tile b { display: block; width: 70%; height: 3cqi; border-radius: 0.8cqi; background: var(--dl-faint); } #lp-family .m2-curve { display: flex; border-left: 1px solid var(--dl-rule); padding-left: 2cqi; } #lp-family .m2-curve svg { width: 100%; height: 100%; } /* the free section: copy 5 tracks, the drawn run 6 */ #lp-family .m2-free { align-items: center; } #lp-family .m2-free__copy { grid-column: 1 / span 5; } #lp-family .m2-free__copy .f-head { margin-bottom: 0; } #lp-family .m2-free__lim { margin: 12px 0 0; font-size: 14px; line-height: 21px; color: var(--dl-muted); } #lp-family .m2-free__note { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--dl-muted); } #lp-family .m2-free__soon { margin: 24px 0 0; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--dl-ink); } #lp-family .m2-free__fig { grid-column: 7 / span 6; } #lp-family .m2-run { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: stretch; gap: 12px; aspect-ratio: 16 / 9; padding: 24px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-tint); } #lp-family .m2-run__a, #lp-family .m2-run__b { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 16px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-control); background: var(--dl-surface); } #lp-family .m2-run__scales { flex: 1; display: flex; min-height: 0; } #lp-family .m2-run__scales svg { width: 100%; height: 100%; } #lp-family .m2-run__in { display: flex; flex-direction: column; gap: 8px; } #lp-family .m2-in { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .m2-in .u2-b { height: 6px; background: var(--dl-rule); } #lp-family .m2-in span { width: 22%; height: 8px; border-radius: 3px; background: var(--dl-action-line); } #lp-family .m2-run__b .b2-plot { gap: 6px; } #lp-family .m2-run__arrow { display: flex; align-items: center; justify-content: center; color: var(--dl-action); } /* training: one full-width card */ #lp-family .m2-train { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--dl-rule); border-radius: var(--dl-r-card); background: var(--dl-surface); } #lp-family .m2-train__pic { grid-column: 1 / span 4; display: flex; align-items: center; justify-content: center; height: 176px; border-radius: var(--dl-r-control); background: var(--dl-tint); } #lp-family .m2-train__copy { grid-column: 5 / span 8; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 0 16px; } #lp-family .m2-train__t { margin: 0; font-family: var(--dl-font-display); font-size: 26px; line-height: 32px; font-weight: 600; color: var(--dl-ink); } #lp-family .m2-teach { display: flex; flex-direction: column; align-items: center; gap: 10px; } #lp-family .m2-teach__screen { display: flex; flex-direction: column; gap: 6px; width: 150px; aspect-ratio: 16 / 9; padding: 10px; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .m2-teach__screen span { height: 8px; width: 55%; border-radius: 2px; background: var(--dl-ink); } #lp-family .m2-teach__screen i { display: block; height: 5px; border-radius: 3px; background: var(--dl-rule); } #lp-family .m2-teach__screen i.s { width: 60%; background: var(--dl-action-line); } #lp-family .m2-teach__desk { display: flex; gap: 10px; } #lp-family .m2-teach__desk b { width: 22px; height: 22px; border-radius: 50%; background: var(--dl-rule-strong); } @media (max-width: 1099.98px) { #lp-family .m2-free__copy, #lp-family .m2-free__fig { grid-column: 1 / -1; } #lp-family .m2-free__fig { margin-top: 32px; } } @media (max-width: 639.98px) { #lp-family .m2-run { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; padding: 16px; } #lp-family .m2-run__a { height: 260px; } #lp-family .m2-run__b { height: 180px; } #lp-family .m2-run__arrow { transform: rotate(90deg); } #lp-family .m2-train { grid-template-columns: minmax(0, 1fr); row-gap: 16px; } #lp-family .m2-train__pic, #lp-family .m2-train__copy { grid-column: 1 / -1; } #lp-family .m2-train__copy { padding: 0 4px 8px; } #lp-family .m2-train__t { font-size: 22px; line-height: 28px; } #lp-family .m2-train__go, #lp-family .m2-train__go .f-btn { width: 100%; justify-content: center; } } /* the bond-modeling posters' widths and heights the earlier sets lack (posters.POSTER_CSS_CLASSES) */ #lp-family .u2-w36 { width: 36%; } #lp-family .u2-w44 { width: 44%; } #lp-family .u2-w54 { width: 54%; } #lp-family .u2-w64 { width: 64%; } #lp-family .u2-w68 { width: 68%; } #lp-family .u2-w72 { width: 72%; } #lp-family .u2-w78 { width: 78%; } #lp-family .u2-w82 { width: 82%; } #lp-family .u2-h17 { height: 17%; } #lp-family .u2-h21 { height: 21%; } #lp-family .u2-h23 { height: 23%; } #lp-family .u2-h25 { height: 25%; } #lp-family .u2-h27 { height: 27%; } #lp-family .u2-h29 { height: 29%; } #lp-family .u2-h31 { height: 31%; } #lp-family .u2-h33 { height: 33%; } #lp-family .u2-h35 { height: 35%; } #lp-family .u2-h37 { height: 37%; } #lp-family .u2-h39 { height: 39%; } #lp-family .u2-h41 { height: 41%; } #lp-family .u2-h43 { height: 43%; } #lp-family .u2-h45 { height: 45%; } #lp-family .u2-h47 { height: 47%; } #lp-family .u2-h49 { height: 49%; } /* ---- frame_l24: /for/presentations/ on the ROLE template (role2.html), ported from frame_l24 PAGE_CSS ---- */ /* production renders only the variant its gates pick: the frame's data-p2="monday" rules become p2-cards--7 (card 2 dropped: cards 1, 3 and 4 on thirds over four on quarters); no ai-twin rules (no /munipro-ai/ twin in this tree) */ /* the slide families: twelve tracks, cards on quarters */ #lp-family .p2-cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 16px; } #lp-family .p2-card { grid-column: span 3; } #lp-family .p2-cards--7 { grid-auto-rows: auto; } #lp-family .p2-cards--7 .p2-card[data-row="1"] { grid-column: span 4; } #lp-family .p2-soon { position: absolute; top: 2.6cqi; right: 3cqi; margin: 0; } #lp-family .p2-body > .p2-tbl, #lp-family .p2-body--split2 > .p2-tbl { flex: 1; justify-content: space-between; } /* a house-deck slide, 16:9, centred on the tint */ #lp-family .p2-pic { display: flex; align-items: center; justify-content: center; } #lp-family .p2-slide { position: relative; width: 80%; aspect-ratio: 16 / 9; display: flex; flex-direction: column; gap: 1.4cqi; padding: 3.6cqi 4cqi 3cqi; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); container-type: inline-size; overflow: hidden; } #lp-family .p2-slide__t { flex: none; width: 46%; height: 3.4cqi; border-radius: 0.6cqi; background: var(--dl-ink); } #lp-family .p2-slide__s { flex: none; width: 30%; height: 2cqi; margin-bottom: 1.6cqi; border-radius: 0.6cqi; background: var(--dl-rule-strong); } #lp-family .p2-slide__f { position: absolute; left: 4cqi; right: 4cqi; bottom: 2cqi; border-top: 1px solid var(--dl-rule); } #lp-family .p2-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.2cqi; padding-bottom: 2.4cqi; } #lp-family .p2-b { display: block; height: 1.6cqi; border-radius: 0.6cqi; background: var(--dl-rule); } #lp-family .p2-tbl { display: flex; flex-direction: column; gap: 1.1cqi; } #lp-family .p2-tr { display: flex; align-items: center; justify-content: space-between; gap: 2cqi; padding-bottom: 1cqi; border-bottom: 1px solid var(--dl-rule); } #lp-family .p2-tr .p2-b { flex: none; } #lp-family .p2-tr--h .p2-b { background: var(--dl-rule-strong); } #lp-family .p2-tr--on { background: var(--dl-action-soft); box-shadow: 0 0 0 1cqi var(--dl-action-soft); } #lp-family .p2-tr--on .p2-b { background: var(--dl-action-line); } #lp-family .p2-tr--tot { border-bottom: 0; border-top: 2px solid var(--dl-rule-strong); padding: 1cqi 0 0; } #lp-family .p2-tr--tot .p2-b { background: var(--dl-muted); } #lp-family .p2-plot { flex: 1; gap: 1.6cqi; } #lp-family .p2-body--split { flex-direction: row; gap: 4cqi; } #lp-family .p2-body--split .p2-plot, #lp-family .p2-body--split .p2-chart { flex: 0 0 62%; display: flex; } #lp-family .p2-side { flex: 1; display: flex; flex-direction: column; gap: 2.4cqi; padding-top: 1cqi; } #lp-family .p2-li { display: flex; align-items: center; gap: 1.6cqi; } #lp-family .p2-li::before { content: ""; flex: none; width: 1.4cqi; height: 1.4cqi; border-radius: 50%; background: var(--dl-faint); } #lp-family .p2-li .p2-b { flex: none; } #lp-family .p2-chart { display: flex; border-left: 1px solid var(--dl-rule-strong); border-bottom: 1px solid var(--dl-rule-strong); } #lp-family .p2-chart svg { width: 100%; height: 100%; } #lp-family .p2-line { fill: none; stroke: var(--dl-action); stroke-width: 2; vector-effect: non-scaling-stroke; } #lp-family .p2-line--2 { stroke: var(--dl-faint); stroke-dasharray: 4 3; } #lp-family .p2-body--chart { position: relative; } #lp-family .p2-over { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 2.4cqi); } #lp-family .p2-body--split2 { flex-direction: row; gap: 4cqi; } #lp-family .p2-body--split2 > .p2-tbl { flex: 0 0 52%; } #lp-family .p2-body--split2 .p2-chart { flex: 1; } #lp-family .p2-body--pair { flex-direction: row; gap: 4cqi; } #lp-family .p2-panel { flex: 1; display: flex; flex-direction: column; gap: 1.6cqi; } #lp-family .p2-panel__h { flex: none; height: 2.6cqi; border-radius: 0.6cqi; background: var(--dl-action-soft); box-shadow: inset 0 0 0 1px var(--dl-action-line); } /* how it works */ #lp-family .p2-step .u2-tr-card__t { padding-bottom: 12px; } #lp-family .p2-pick { display: flex; flex-direction: column; gap: 6px; width: 176px; padding: 10px; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .p2-pick span { display: flex; align-items: center; padding: 6px 8px; border-radius: 4px; } #lp-family .p2-pick .p2-b { height: 6px; } #lp-family .p2-pick .is-on { background: var(--dl-action-soft); } #lp-family .p2-pick .is-on .p2-b { background: var(--dl-action-line); } #lp-family .p2-ask { display: flex; flex-direction: column; gap: 12px; width: 176px; } #lp-family .p2-ask__q { display: flex; align-items: center; height: 36px; padding: 0 12px; background: var(--dl-surface); border-radius: 18px; box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .p2-ask__q .p2-b { height: 6px; } #lp-family .p2-ask__row { display: flex; gap: 8px; justify-content: flex-end; } #lp-family .p2-ask__btn { width: 64px; height: 24px; border-radius: 4px; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .p2-ask__btn--on { background: var(--dl-action); box-shadow: none; } #lp-family .p2-tie { position: relative; } #lp-family .p2-tie__ok { position: absolute; right: 12px; top: 12px; } /* training: one card on the full track */ #lp-family .p2-teach { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 32px; align-items: center; padding: 16px; } #lp-family .p2-teach .u2-tr-card__pic { grid-column: span 4; margin: 0; } #lp-family .p2-teach__copy { grid-column: span 8; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } #lp-family .p2-cal { display: flex; flex-direction: column; gap: 8px; width: 150px; padding: 10px; background: var(--dl-surface); box-shadow: inset 0 0 0 1px var(--dl-rule-strong); } #lp-family .p2-cal__h { height: 8px; width: 50%; border-radius: 2px; background: var(--dl-ink); } #lp-family .p2-cal__g { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } #lp-family .p2-cal__g i { height: 16px; border-radius: 2px; background: var(--dl-tint); } #lp-family .p2-cal__g i.is-on { background: var(--dl-action); } @media (max-width: 1099.98px) { #lp-family .p2-card { grid-column: span 6; } } @media (max-width: 639.98px) { #lp-family .p2-cards { grid-auto-rows: auto; } #lp-family .p2-card, #lp-family .p2-cards--7 .p2-card[data-row="1"] { grid-column: 1 / -1; } #lp-family .p2-teach { grid-template-columns: minmax(0, 1fr); } #lp-family .p2-teach .u2-tr-card__pic, #lp-family .p2-teach__copy { grid-column: 1 / -1; } #lp-family .p2-teach__copy { align-items: stretch; } #lp-family .p2-teach__go .f-btn { width: 100%; justify-content: center; } } /* the slides' and steps' widths and heights (slides.SLIDE_CSS_CLASSES) */ #lp-family .p2-w14 { width: 14%; } #lp-family .p2-w16 { width: 16%; } #lp-family .p2-w18 { width: 18%; } #lp-family .p2-w22 { width: 22%; } #lp-family .p2-w24 { width: 24%; } #lp-family .p2-w32 { width: 32%; } #lp-family .p2-w44 { width: 44%; } #lp-family .p2-w48 { width: 48%; } #lp-family .p2-w54 { width: 54%; } #lp-family .p2-w62 { width: 62%; } #lp-family .p2-w64 { width: 64%; } #lp-family .p2-w66 { width: 66%; } #lp-family .p2-w70 { width: 70%; } #lp-family .p2-w72 { width: 72%; } #lp-family .p2-w76 { width: 76%; } #lp-family .p2-w80 { width: 80%; } #lp-family .p2-w84 { width: 84%; } #lp-family .p2-w88 { width: 88%; } #lp-family .p2-h10 { height: 10%; } #lp-family .p2-h12 { height: 12%; } #lp-family .p2-h14 { height: 14%; } #lp-family .p2-h16 { height: 16%; } #lp-family .p2-h18 { height: 18%; } #lp-family .p2-h20 { height: 20%; } #lp-family .p2-h22 { height: 22%; } #lp-family .p2-h24 { height: 24%; } #lp-family .p2-h26 { height: 26%; } #lp-family .p2-h28 { height: 28%; } #lp-family .p2-h30 { height: 30%; } #lp-family .p2-h36 { height: 36%; } #lp-family .p2-h40 { height: 40%; } #lp-family .p2-h46 { height: 46%; } #lp-family .p2-h48 { height: 48%; } #lp-family .p2-h50 { height: 50%; } #lp-family .p2-h52 { height: 52%; } #lp-family .p2-h54 { height: 54%; } #lp-family .p2-h62 { height: 62%; } #lp-family .p2-h70 { height: 70%; } #lp-family .p2-h80 { height: 80%; }