/* ========================================================================== PMA service landing pages - shared styles (Europe, APAC, US, ...) Edit here once; every region page picks the change up. Scoped under .pmaPage with p*/hm* prefixes because main.css owns generic names such as .card, .table, .intro and .latest. ========================================================================== */ /* ========================================================================== Europe landing page - editorial layout. All rules are prefixed .pma / .p* and scoped inside .pmaPage, because main.css owns generic names such as .card, .table, .intro and .latest. ========================================================================== */ .pmaPage { float:left; width:100%; color:#1a1a1a; -webkit-font-smoothing:antialiased; } .pmaPage *, .pmaPage *:before, .pmaPage *:after { box-sizing:border-box; } .pmaPage a, .pmaPage a:visited { text-decoration:none; color:inherit; } .pmaPage img { max-width:100%; } /* ---------- page header: template's own .intro / h1.title styling ---------- .pmaPage .intro { float:left; width:100%; padding:0 0 20px 0; border-bottom:1px solid #ccc; } /* the announcements bar supplies its own top edge, and the title rule stops short of it because the bar is full-bleed - so drop the rule when one follows. main.css already ships .noBorder for this, which the markup now uses. .pmaPage .intro .title { float:left; width:auto; font-size:2.4rem; font-weight:700; color:#da0095; margin:0; } /* main.css colours this with .system .system-content .intro .title span, which outranks a .pmaPage-scoped rule - so match its specificity to win .system .system-content .pmaPage .intro .title span { font-weight:400; color:#1a1a1a; } .pIntroMeta { float:right; padding-top:6px; font-size:1.25rem; color:#8a8a8a; } */ /* ---------- section rules ---------- */ .pSec { float:left; width:100%; padding:44px 0 0 0; } .pSecHd { display:flex; align-items:baseline; gap:12px; padding:0 0 16px 0; } /* section marker: centred on its own so the row keeps align-items:baseline and the rule stays on the heading's baseline */ .pSecHd:before { content:''; flex:none; width:8px; height:15px; align-self:center; background:#DA0095; border-radius:1px; } .pSecHd h2 { margin:0; font-size:1.25rem; font-weight:600; text-transform:uppercase; letter-spacing:.14em; color:#1a1a1a; } .pSecHd .pRule { flex:1 1 auto; height:0; border-top:1px solid #4a4a4a; } /* a border, not a 1px background: borders snap to whole device pixels, so the rule stays one pixel thick under 125%/150% display scaling */ .pSecHd a.pMore { font-size:1.2rem; font-weight:500; color:#DA0095; white-space:nowrap; } .pSecHd a.pMore:hover { text-decoration:underline; } .pSecInsights {padding:26px 0 0 0 !important; } /* ---------- lead insight ---------- */ .pLeadWrap { display:grid; grid-template-columns:minmax(0,1fr) 316px; column-gap:34px; row-gap:0; align-items:stretch; } .pLead { display:grid; grid-template-columns:minmax(0,1fr) 408px; gap:18px; align-items:start; } .pLeadFig { display:block; order:2; } .pLeadFig img { display:block; width:100%; border:1px solid #ececec; border-radius:3px; } .pLeadTxt { display:block; } .pEyebrow { display:block; font-size:1.1rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#9a9a9a; padding-bottom:9px; } .pLeadHead { display:block; font-size:1.9rem; font-weight:600; line-height:1.24; letter-spacing:-.015em; color:#111; padding-bottom:12px; } .pLead:hover .pLeadHead { color:#DA0095; } .pLeadStand { font-size:1.25rem; line-height:1.65; color:#3f3f3f; font-weight:450; display:-webkit-box; -webkit-line-clamp:7; -webkit-box-orient:vertical; overflow:hidden; } .pBy { display:block; padding-top:14px; font-size:1.15rem; color:#9a9a9a; } .pBy i { font-style:normal; color:#DA0095; font-weight:500; padding-left:10px; margin-left:10px; border-left:1px solid #e4e4e4; } /* ---------- 'also this month' rail ---------- */ .pBrief { border-left:1px solid #ececec; padding-left:26px; } .pBrief h3 { margin:0 0 10px 0; font-size:1.15rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8a8a8a; } .pBrief ul { list-style:none; margin:0; padding:0; } .pBrief li { border-top:1px solid #f0f0f0; } .pBrief li:first-child { border-top:0; } .pBrief li a { display:block; padding:11px 0; } .pBriefDate { display:block; font-size:1.1rem; color:#a0a0a0; padding-bottom:3px; } .pBriefHead { display:block; font-size:1.35rem; font-weight:500; line-height:1.4; color:#222; } .pBrief li a:hover .pBriefHead { color:#DA0095; } /* ---------- browse-more action (sits at the foot of the rail) ---------- */ .pMoreRow { margin-top:14px; padding-top:14px; border-top:1px solid #ececec; } /* dashed edge + plus/minus: expands in place rather than opening a page */ .pBtn { display:flex; width:100%; align-items:center; gap:10px; font-family:inherit; font-size:1.3rem; font-weight:600; color:#DA0095; background:#fff; border:1px dashed #eab8da; border-radius:4px; padding:12px 14px; cursor:pointer; text-align:left; transition:background 160ms ease, border-color 160ms ease; } .pBtn .pBtnTxt { flex:1 1 auto; } .pBtn svg { fill:none; stroke:#DA0095; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; } .pBtn .pBtnPM { width:16px; height:16px; } .pBtn .pBtnCaret { width:14px; height:14px; opacity:.6; transition:transform 200ms ease; } .pBtn:hover { background:#fdf4f9; border-color:#DA0095; } .pBtn[aria-expanded="true"] { color:#555; border-style:solid; border-color:#e6e6e6; } .pBtn[aria-expanded="true"] svg { stroke:#888; } .pBtn[aria-expanded="true"] .pBtnBar { display:none; } /* plus becomes minus */ .pBtn[aria-expanded="true"] .pBtnCaret { transform:rotate(180deg); } /* ---------- insight cards ---------- */ .pCards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px; padding-top:24px; margin-top:24px; border-top:1px solid #ececec; } .pCards[hidden] { display:none; } .pCard { display:block; } .pCardFig { display:block; padding-bottom:11px; } .pCardFig img { display:block; width:100%; border:1px solid #ececec; border-radius:3px; transition:border-color 160ms ease; } .pCard:hover .pCardFig img { border-color:#f0cbe4; } .pCard .pEyebrow { color:#a0a0a0; letter-spacing:.08em; padding-bottom:6px; } .pCardHead { display:block; font-size:1.45rem; font-weight:600; line-height:1.35; color:#161616; padding-bottom:7px; } .pCard:hover .pCardHead { color:#DA0095; } .pCardStand { display:block; font-size:1.2rem; line-height:1.6; color:#6a6a6a; font-weight:400; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } /* ---------- house view: collapsed to a 150px peek ---------- */ .pViewBox { position:relative; } .pViewBox.shut { max-height:240px; overflow:hidden; } .pViewBox.shut:after { content:''; position:absolute; left:0; right:0; bottom:0; height:96px; pointer-events:none; border-radius:0 0 4px 4px; background:linear-gradient(to bottom, rgba(247,248,250,0), #f7f8fa 62%, #f7f8fa); } .pPeek { display:none; position:absolute; left:50%; bottom:14px; z-index:3; transform:translateX(-50%); font-family:inherit; font-size:1.2rem; font-weight:600; color:#DA0095; background:#fff; border:1px solid #f3cbe5; border-radius:20px; padding:7px 18px; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.06); } .pPeek:hover { background:#fdf4f9; border-color:#e9a9d3; } .pViewBox.shut .pPeek { display:block; } /* ---------- house view (heatmap) ---------- */ .pView { background:#f7f8fa; border:1px solid #edeff2; border-radius:4px; padding:22px 26px 20px 26px; display:grid; grid-template-columns:minmax(0,auto) minmax(190px,1fr); gap:34px; align-items:stretch; } .pView > * { min-width:0; } /* side column runs the full height of the card so 'other services' can sit on its floor */ .pViewSide { display:flex; flex-direction:column; } .pViewMain { min-width:0; } /* lock panel and matrix share one cell */ /* component display rules would otherwise override the hidden attribute */ .pmaPage [hidden] { display:none !important; } .pViewSide h3 { margin:0 0 10px 0; font-size:1.6rem; font-weight:600; line-height:1.3; color:#111; letter-spacing:-.01em; } .pViewSide p { margin:0 0 14px 0; font-size:1.25rem; line-height:1.65; color:#3f3f3f; font-weight:450; } /* key: swatches and caption on one line - the strip itself must never break, so it is a nowrap flex row and the caption takes whatever is left */ .pViewSide .pKeyRow { display:flex; align-items:center; flex-wrap:nowrap; gap:9px; font-size:1.1rem; color:#5a5a5a; font-weight:500; padding-top:2px; white-space:nowrap; } .pViewSide .pKey { display:flex; flex:none; } .pViewSide .pKey span { display:block; width:13px; height:9px; flex:none; } .pViewSide .pKey span:first-of-type { border-radius:2px 0 0 2px; } .pViewSide .pKey span:last-of-type { border-radius:0 2px 2px 0; } .pViewSrc { padding-top:14px; font-size:1.1rem; color:#6a6a6a; font-weight:450; line-height:1.55; } /* the source line belongs to the matrix: it lives in the same column, directly under the table, so its position follows the table's height and not the explainer's. pViewMain holds the two together. */ .pViewSrc span.pSrcName { color:#1a1a1a; font-weight:600; } .pViewMain > .pViewSrc { max-width:760px; } /* absolute vs required return: the one caveat a reader needs before comparing cells, so it sits with the key rather than down in the source note */ .pViewNote { margin-top:12px; padding:9px 11px; background:#fff; border:1px solid #eae3e9; border-left:3px solid #706084; border-radius:3px; /* ramp step 7 */ font-size:1.25rem; line-height:1.55; color:#3f3f3f; font-weight:450; } .pViewNote strong { font-weight:600; color:#1f1f1f; } /* ---------- releases ---------- */ .pRel { float:left; width:100%; } .pRelTools { display:flex; align-items:center; gap:9px; padding:0 0 12px 0; } .pRelTools select, .pRelTools input { font-family:inherit; font-size:1.15rem; font-weight:400; color:#333; background:#fff; border:1px solid #e0e0e0; border-radius:3px; padding:6px 9px; height:30px; outline:none; } .pRelTools select { cursor:pointer; } .pRelTools input { width:250px; } .pRelTools input:focus, .pRelTools select:focus { border-color:#bfbfbf; } /* main.css sets a global 1.8rem placeholder size; match the field instead */ .pRelTools input::placeholder { font-size:1.15rem; color:#9a9a9a; opacity:1; } .pRelTools input::-webkit-input-placeholder { font-size:1.15rem; color:#9a9a9a; } .pRelTools input::-moz-placeholder { font-size:1.15rem; color:#9a9a9a; opacity:1; } .pRelTools input:-ms-input-placeholder { font-size:1.15rem; color:#9a9a9a; } .pRelTools .pCount { margin-left:auto; font-size:1.15rem; color:#9a9a9a; } .pRelScroll { max-height:784px; overflow-y:auto; border-top:1px solid #1a1a1a; } /* ~20 rows before scrolling */ table.pRelTbl { width:100%; border-collapse:collapse; table-layout:fixed; } table.pRelTbl th { position:sticky; top:0; z-index:2; background:#fff; text-align:left; font-size:1.1rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8a8a8a; padding:9px 10px; border-bottom:1px solid #ececec; } table.pRelTbl td { font-size:1.3rem; font-weight:500; color:#2a2a2a; padding:11px 10px; border-bottom:1px solid #f2f2f2; vertical-align:middle; } table.pRelTbl tr:hover td { background:#fafafa; } table.pRelTbl .c1 { width:78px; color:#8a8a8a; font-weight:500; white-space:nowrap; } table.pRelTbl .c2 { width:25%; color:#2a2a2a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } table.pRelTbl .c3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } table.pRelTbl .c4 { width:130px; text-align:right; } /* state the colour on every link state, so the browser's :link / :visited never shows */ a.pFile, a.pFile:link, a.pFile:visited { color:#2a2a2a; } a.pFile:hover { color:#DA0095; } .pFile img { width:14px; margin:0 9px -2px 0; } .pFileOff { color:#bdbdbd; font-weight:500; } .mFOff { color:#bdbdbd; font-weight:500; font-size: 1.3rem; white-space:nowrap; overflow:hidden; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); } .pAcc { font-size:1.1rem; color:#8a8a8a; } .pAccNo { color:#c4c4c4; } table.pRelTbl .c3 a img { margin-right: 5px; position: relative; top: -1px; } /* ---------- responsive ---------- */ @media only screen and (max-width:1180px) { .pLeadWrap { grid-template-columns:minmax(0,1fr); row-gap:0; } .pBrief { border-left:0; border-top:1px solid #ececec; padding:20px 0 0 0; } .pLeadWrap { align-items:start; } .pLeadWrap .pBrief { background:none; border:0; padding:0; } .pLeadWrap .pBrief .pMiniAll { margin-top:14px; } .pCards { grid-template-columns:repeat(2,minmax(0,1fr)); } .pView { grid-template-columns:minmax(0,1fr); gap:20px; } .pViewSide { order:2; } } @media only screen and (max-width:720px) { .pLead { grid-template-columns:minmax(0,1fr); } .pLeadFig { order:0; } /* single column: keep the chart in column one under the eyebrow and stop it ballooning to full width above the text */ .pLeadCol .pLeadFig { grid-column:1; grid-row:2; max-width:360px; } .pLeadCol .pLeadTxt { grid-column:1; grid-row:3; } .pLeadHead { font-size:1.8rem; } .pCards { grid-template-columns:minmax(0,1fr); } table.pRelTbl .c2, table.pRelTbl .c4 { display:none; } .pRelTools input { width:100%; } } @media (prefers-reduced-motion:reduce) { .pmaPage * { transition:none !important; } } /* heatmap (kept from the previous build: ramp, icons, diagonal labels) */ .pHeat { display:block; } .pHeat table.hmTbl { border-collapse:separate; border-spacing:2px; table-layout:fixed; width:712px; } .pHeat table.hmTbl col.hmC1 { width:112px; } .pHeat table.hmTbl col.hmC { width:76px; } .pHeat table.hmTbl col.hmCr { width:88px; } .pHeat table.hmTbl tr { background:none; } .pHeat table.hmTbl th, .pHeat table.hmTbl td { text-align:center; vertical-align:bottom; } .pHeat table.hmTbl td { height:24px; line-height:24px; font-size:1.25rem; font-weight:500; border-radius:3px; padding:0; font-variant-numeric:tabular-nums; vertical-align:middle; } .pHeat table.hmTbl th.hmRow { text-align:left; font-weight:500; color:#444; font-size:1.25rem; line-height:24px; padding:0 9px 0 1px; white-space:nowrap; vertical-align:middle; } .pHeat table.hmTbl td.hmNA { background:none; color:#dcdcdc; font-weight:400; font-size:1.15rem; } /* uncoloured: the palest grey means 'weakest', not 'missing' */ .pHeat table.hmTbl tr.hmGap td { height:9px; padding:0; border-radius:0; border:0; background:none; } .pHeat table.hmTbl tr.hmTotal th, .pHeat table.hmTbl tr.hmTotal td { padding-top:0; } .pHeat table.hmGlobal tr.hmTotal th, .pHeat table.hmGlobal tr.hmTotal td { padding-top:0; padding-bottom:5px; } /* aggregate heads each regional block */ .pHeat table.hmTbl tr.hmTotal th.hmRow { color:#000; font-weight:700; } /* labels across the top, wrapping to two or three lines */ .pHeat table.hmTbl tr.hmLbl th { font-weight:600; color:#3a3a3a; font-size:1.2rem; line-height:1.3; padding:0 4px 8px 4px; border:0; background:none; vertical-align:bottom; text-align:center; } .pHeat table.hmTbl tr.hmLbl th > span { display:block; } /* columns are links */ .pHeat table.hmTbl td.hot, .pHeat table.hmTbl th.hot { cursor:pointer; } .pHeat table.hmTbl tr.hmLbl th.hot > span { color:#DA0095; font-weight:600; } .pHeatWrap { position:relative; } .hmCol { position:absolute; z-index:3; pointer-events:none; opacity:0; border:1px solid rgba(0,51,153,.55); border-radius:4px; background:rgba(0,51,153,.07); transition:opacity 120ms ease, left 120ms ease, width 120ms ease; } .hmCol.on { opacity:1; } /* launch badge: sits at the pointer while a linked column or region is hot */ .hmGo { position:fixed; z-index:150; pointer-events:none; opacity:0; width:26px; height:26px; border-radius:50%; background:#fff; border:1px solid #e6e6e6; box-shadow:0 2px 6px rgba(0,0,0,.14); transition:opacity 120ms ease; } .hmGo svg { display:block; width:14px; height:14px; margin:5px auto; fill:none; stroke:#DA0095; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } .hmGo.on { opacity:1; } /* the matrix has a fixed width, so give it its own scroll rather than letting it push the panel (and the page) wider at in-between window sizes */ .pHeatWrap { min-width:0; max-width:100%; overflow-x:auto; overflow-y:hidden; } /* ---------- global (grouped) heatmap ---------- */ .pHeat table.hmTbl tr.hmSpacer td { height:18px; padding:0; border:0; background:none; } .pHeat table.hmTbl tr.hmGrpRow th.hmGrp { font-size:1.05rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8a8a8a; text-align:left; padding:0 0 6px 1px; } .pHeat table.hmTbl tr.hmGrpRow td { background:none; border:0; padding:0; } .pHeat table.hmTbl th.hmCty { cursor:pointer; } .pHeat table.hmTbl th.hmCty.hot { color:#DA0095; } .pHeat table.hmTbl tr.hmTotal th.hmCty.hot { color:#DA0095; } /* ---------- announcements bar ------------------------------------------------ A navy strip hanging off the rule under the page title, running the full width of the content column. Two columns: new services on the left (there are rarely more than two, and they matter most), events on the right, each wrapping inside its own track. Render only what exists - no announcements, no bar. */ .pAnn { float:left; width:100%; display:grid; box-sizing:border-box; grid-template-columns:fit-content(50%) minmax(0,1fr); /* services capped at half */ margin:0 -30px 10px -30px; width:calc(100% + 60px); padding:10px 30px; background:#0F0A55; color:#eceaf6; } /* with only one kind to show, the bar is a single track: no empty column and no divider left hanging. The server adds .pAnnSingle when it renders one. */ .pAnn.pAnnSingle { grid-template-columns:minmax(0,1fr); } .pAnnCol { display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 11px; min-width:0; align-items:start; } .pAnnColEv { padding-left:22px; margin-left:22px; border-left:1px solid rgba(255,255,255,.16); } .pAnnSingle .pAnnColEv { padding-left:0; margin-left:0; border-left:0; } .pAnnLbl { display:inline-flex; align-items:center; height:19px; font-size:1rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; } .pAnnColNew .pAnnLbl { color:#F0BA5A; } .pAnnColEv .pAnnLbl { color:#9aa0d8; } .pAnnItems { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; min-height:19px; } .pAnnIc { width:13px; height:13px; flex:none; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } /* new services: an amber dot marks each one, the column label says the rest */ .pAnnNew { display:inline-flex; align-items:center; gap:8px; padding:2px 12px; border-radius:999px; font-size:1.25rem; font-weight:500; white-space:nowrap; background:rgba(240,186,90,.14); border:1px solid rgba(240,186,90,.45); color:#fdf1dc; transition:background 140ms ease; } .pAnnDot { width:6px; height:6px; border-radius:50%; background:#F0BA5A; flex:none; } .pAnnNew:hover { background:rgba(240,186,90,.26); } .pAnnEvent { display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:1.25rem; font-weight:500; white-space:nowrap; color:#eceaf6; transition:background 140ms ease; } .pAnnEvent .pAnnIc { stroke:#9aa0d8; } .pAnnDate { font-size:1.15rem; font-weight:600; color:#9b9ac4; } /* the separator trails its item, so a wrapped line never starts with a dot */ .pAnnEvent:not(:last-child):after { content:''; width:3px; height:3px; border-radius:50%; background:#4b4682; display:inline-block; margin-left:8px; } .pAnnEvent:hover { background:rgba(255,255,255,.1); } /* the bar belongs to the page header, so the first section tucks up under it */ .pAnn + .pSec { padding-top:26px; } @media only screen and (max-width:1080px) { /* stacked: services above events, the divider becomes a horizontal rule. 1080 rather than 900 because a single long event title clips well before the columns themselves run out of room. */ .pAnn { grid-template-columns:minmax(0,1fr); gap:8px; } .pAnnColEv { padding:8px 0 0 0; margin:0; border-left:0; border-top:1px solid rgba(255,255,255,.14); } .pAnnSingle .pAnnColEv { padding-top:0; border-top:0; } } @media only screen and (max-width:620px) { /* narrow: label above its items, one event per line, separators dropped */ .pAnnCol { grid-template-columns:minmax(0,1fr); gap:2px; } .pAnnItems { flex-direction:column; align-items:flex-start; } .pAnnEvent, .pAnnNew { white-space:normal; } .pAnnEvent:not(:last-child):after { display:none; } } /* ---------- notices: events + new services --------------------------------- Two cards, side by side above the page title. Each holds a LIST of headlines with its own link, so several announcements never mean several banners. No detail lines: headline + action only. Add/remove
  • rows; drop the whole .pNote block when there is nothing to announce and no space is used. */ .pNotes { float:left; width:100%; display:grid; gap:10px; padding:18px 0 0 0; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } .pNotes.pNotesTop { padding:0 0 18px 0; } /* above the page title */ .pNote { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:9px; background:#f7f8fa; border:1px solid #edeff2; border-left:3px solid #DA0095; border-radius:3px; padding:8px 10px 8px 11px; } .pNote.pNoteEvent { border-left-color:#003399; } .pNoteIcon { display:block; width:16px; height:16px; position:relative; top:-1px; } .pNoteIcon svg { display:block; width:16px; height:16px; fill:none; stroke:#DA0095; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .pNoteEvent .pNoteIcon svg { stroke:#003399; } .pNoteBody { min-width:0; } .pNoteKind { display:block; font-size:1rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:#DA0095; padding-bottom:3px; } .pNoteEvent .pNoteKind { color:#003399; } .pNoteList { list-style:none; margin:0; padding:0; } .pNoteList li { display:flex; align-items:flex-end; align-items:last baseline; gap:8px; padding:2px 0; border-top:1px solid #e6e9ee; } .pNoteList li:first-child { border-top:0; } .pNoteText { flex:1 1 auto; min-width:0; font-size:1.2rem; font-weight:500; color:#1f1f1f; line-height:1.45; } .pNoteText a {color: #DA0095;} .pNoteText a:hover {text-decoration: underline;} .pNotes .pNoteCta { flex:none; font-size:1.1rem; font-weight:600; color:#DA0095; white-space:nowrap; } .pNoteEvent .pNoteCta { color:#003399; } .pNoteCta:hover { text-decoration:underline; } .pNoteX { width:16px; height:16px; padding:0; background:none; border:0; cursor:pointer; font-family:inherit; color:#c9c9c9; font-size:1.4rem; line-height:1; position:relative; top:-5px; left: 7px;} .pNoteX:hover { color:#666; } @media only screen and (max-width:900px) { .pNotes { grid-template-columns:minmax(0,1fr); } } @media only screen and (max-width:560px) { .pNoteList li { flex-wrap:wrap; gap:2px 8px; } } /* ---------- my subscriptions (global page only) ---------------------------- Ticks / n/a come from the subscription database when wired: each cell carries data-region (or data-service-row) + data-service, and the class decides what is drawn - .pSubYes (tick), .pSubNo (n/a), .pSubPlus (PROMIS+). */ .pSubWrap { float:left; width:100%; display:grid; gap:14px; } .pSubCard { border:1px solid #ececec; border-radius:4px; padding:0; overflow-x:auto; } table.pSubTbl { width:100%; border-collapse:collapse; } table.pSubTbl th, table.pSubTbl td { text-align:center; vertical-align:middle; } table.pSubTbl tr.pSubGrp th { font-size:1.1rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#fff; background:#a9a9a9; padding:5px 8px; border-right:2px solid #fff; } table.pSubTbl tr.pSubGrp th.pSubBlank { background:none; border-right:0; } table.pSubTbl tr.pSubHd th { font-size:1.15rem; font-weight:600; color:#333; line-height:1.3; padding:9px 8px; border-bottom:1px solid #ececec; } table.pSubTbl tr.pSubHd th.pSubRowHd { text-align:left; } table.pSubTbl td.pSubRow, table.pSubTbl th.pSubRow { text-align:left; font-size:1.3rem; font-weight:600; color:#1f1f1f; padding:10px 8px 10px 16px; white-space:nowrap; } table.pSubTbl td.pSubRow em { font-style:normal; font-weight:400; font-size:1.1rem; color:#8a8a8a; padding-left:5px; } table.pSubTbl tbody tr + tr td { border-top:1px solid #f2f2f2; } table.pSubTbl td { padding:10px 8px; font-size:1.2rem; } table.pSubTbl td.pSubMod { background:#fafafa; } /* module block */ table.pSubTbl td.pSubNo { color:#c4c4c4; font-weight:400; } table.pSubTbl td.pSubPlus { color:#DA0095; font-weight:600; font-size:1.2rem; background: #fafafa;} table.pSubTbl svg.pSubTick { display:block; margin:0 auto; width:15px; height:15px; fill:none; stroke:#DA0095; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } table.pSubTbl svg.pSubCross { display:block; margin:0 auto; width:13px; height:13px; fill:none; stroke:#c4c4c4; stroke-width:2; stroke-linecap:round; } /* not held */ /* Other services: four equal-width service columns */ .pSubOther table.pSubTbl tr.pSubHd th:not(.pSubRowHd) { width:14%; } .pSubOrg { font-size:1.15rem; color:#9a9a9a; white-space:nowrap; } .pSubNote { float:left; width:100%; padding:10px 0 0 0; font-size:1.15rem; font-weight:450; color:#6a6a6a; } /* ---------- locked panel: shown when the viewer is entitled to nothing here ---- Carries no figures of any kind - it is safe to serve to anyone. */ .pLock { display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px; align-items:start; max-width:620px; } .pLockIcon svg { display:block; width:22px; height:22px; fill:none; stroke:#8a94a6; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .pLockBody b { display:block; font-size:1.5rem; font-weight:600; color:#1a1a1a; padding-bottom:6px; } .pLockBody p { margin:0 0 10px 0; font-size:1.25rem; font-weight:450; line-height:1.6; color:#4a4a4a; } .pLockCta { font-size:1.25rem; font-weight:600; color:#DA0095; } .pLockCta:hover { text-decoration:underline; } /* ---------- locked region block inside the global matrix ---------- Shown for regions the viewer does not subscribe to: no values, just the offer. */ .pHeat table.hmTbl tr.hmLockRow th.hmRow { color:#000; font-weight:700; } .pHeat table.hmTbl tr.hmLockRow td { background:#fbfbfc; border:1px dashed #dfe3ea; border-radius:3px; padding:9px 12px; text-align:left; } .hmLockIn { display:flex; align-items:center; gap:9px; font-size:1.2rem; color:#5a5a5a; } .hmLockIn svg { width:16px; height:16px; flex:none; fill:none; stroke:#8a94a6; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } .hmLockIn b { font-weight:600; color:#2a2a2a; } .hmLockIn a { margin-left:auto; font-weight:600; color:#DA0095; white-space:nowrap; } .hmLockIn a:hover { text-decoration:underline; } /* ---------- clients outside the three regional services ---------- The grid is still drawn, every block locked, with this line above it. */ .pLock.pLockSlim { max-width:none; padding:0 0 14px 0; align-items:center; } .pLock.pLockSlim .pLockBody b { font-size:1.35rem; } .pLock.pLockSlim .pLockBody p { margin-bottom:6px; } table.pRelTbl tr.pRelEmpty td { text-align:center; color:#8a8a8a; font-weight:450; padding:26px 10px; background:#fafafa; } /* ---------- other services: sectors we cover but do not forecast total returns for ---- Chips shaped like a heatmap cell, in a neutral grey that sits outside the blue ramp so they never read as a value. Region-specific ones appear on their own page; Net Zero and Data Centres are global and appear everywhere. */ .pOther { padding-top:18px; margin-top:auto; } /* pinned to the foot of the side column */ .pOtherLbl { font-size:1.05rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8a8a8a; padding-bottom:8px; } .pOtherRow { display:flex; flex-wrap:wrap; gap:5px; } /* a.pOtherChip, not .pOtherChip: main.css colours links inside .system-content with more specificity than a bare class would beat */ .pOtherRow a.pOtherChip { display:block; font-size:1.15rem; font-weight:500; color:#fff; background:#706084; border-radius:3px; padding:5px 11px; line-height:1.25; transition:background 150ms ease, color 150ms ease; } /* ramp step 7 */ .pOtherRow a.pOtherChip:hover { background:#55456F; color:#fff; } /* ramp step 8 */ /* ---------- blurred stand-in behind the locked message ---------- Decorative only: the teaser table carries no values and no real colours, so a non-subscriber's page contains nothing about our forecasts. */ .pTeaser { margin-top:16px; filter:blur(3.5px); opacity:.5; pointer-events:none; user-select:none; -webkit-user-select:none; -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%); mask-image:linear-gradient(to bottom, #000 62%, transparent 100%); } .pTeaser table.hmTeaser td { height:24px; } .pLock + .pTeaser { margin-top:20px; } @media (prefers-reduced-motion:reduce) { .pTeaser { filter:blur(3.5px); } } /* ---------- locked message sitting over the blurred stand-in ---------- */ .pLockStack { position:relative; } .pLock.pLockOver { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; grid-template-columns:none; padding:14px; max-width:none; } .pLock.pLockOver .pLockIcon { display:none; } .pLock.pLockOver .pLockBody { max-width:560px; background:rgba(255,255,255,.94); border:1px solid #e3e6ec; border-radius:4px; padding:18px 20px; box-shadow:0 2px 14px rgba(0,0,0,.06); } .pLockStack .pTeaser { margin-top:0; } /* ================= v3 only: publications in the rail, insights in the lead ========= */ /* each column carries its own section header, so the rule under 'Latest Insights' stops where the insight tile stops */ .pLeadWrap .pSecHdCol { padding:0 0 17px 0; align-self:end; } /* the 'show more' gallery lives inside the grid so it can sit above the mini publications rail once the columns stack */ .pLeadWrap .pCards { grid-column:1 / -1; } .pSecHd h2 em { font-style:normal; color:#DA0095; } .pMore em { font-style:italic; } .pLeadCol { min-width:0; } /* the chart aligns with the headline, not with the eyebrow: the eyebrow takes its own grid row in column one, and the figure starts on the second row */ .pLeadCol .pLead { grid-template-rows:auto 1fr; row-gap:3px; } .pLeadCol .pLead > .pEyebrow { grid-column:1; grid-row:1; padding-bottom:1px; } .pLeadCol .pLeadTxt { grid-column:1; grid-row:2; } /* the chart's top edge lines up with the date line, not the headline */ .pLeadCol .pLeadFig { grid-column:2; grid-row:1 / span 2; order:0; align-self:start; } /* 'also recently' as two blocks under the lead insight */ .pAlso { margin-top:20px; padding-top:16px; border-top:1px solid #ececec; } .pAlso h4 { margin:0 0 10px 0; font-size:1.15rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8a8a8a; } .pAlsoGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) 0.66fr; gap:12px; align-items:stretch; } /* two blocks, expander a shade wider than half a card */ .pAlsoCard { display:block; padding:0 14px 0 0; border-left:1px solid #ececec; padding-left:14px; transition:border-color 160ms ease; } .pAlsoCard:first-child { border-left:0; padding-left:0; } .pAlsoCard:hover { border-color:#f0cbe4; } .pAlsoCard:hover .pAlsoHead { color:#DA0095; } .pAlsoDate { display:block; font-size:1.05rem; font-weight:500; color:#9a9a9a; padding-bottom:5px; } .pAlsoHead { display:block; font-size:1.45rem; font-weight:600; color:#1f1f1f; line-height:1.38; transition:color 160ms ease; } .pAlsoCard:hover .pAlsoHead { color:#DA0095; } /* two actions occupy the last cell of the blocks row: one opens the library in a new view, the other expands the chart gallery in place */ .pAlsoActions { display:flex; flex-direction:row; gap:8px; height:100%;} .pAct { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; flex:1 1 0; min-width:0; padding:12px 6px; font-family:inherit; font-size:1.05rem; font-weight:600; line-height:1.3; text-align:center; cursor:pointer; border-radius:14px; background:#fff; transition:background 160ms ease, border-color 160ms ease, color 160ms ease; } .pAct svg { width:19px; height:19px; flex:none; fill:none; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; transition:stroke 160ms ease; } .pAct span { flex:none; white-space:nowrap; } .pAct em { font-style:italic; } /* side by side: the lead column runs to the height of the publications rail, and the 'also recently' row takes up any slack, so the two action buttons sit on the same baseline as the 'Jump to full list' button. Stacked, there is no slack to take. */ @media only screen and (min-width:1181px) { .pLeadCol { display:flex; flex-direction:column; } .pLeadCol .pAlso { flex:1 0 auto; display:flex; flex-direction:column; } .pLeadCol .pAlsoGrid { flex:1 0 auto; } .pLeadCol .pAlsoActions { align-self:end; height:auto; } } /* library: solid edge, it leaves the page */ .pActLib { border:1px solid #e0e0e0; color:#2a2a2a; } /* stated against the .pmaPage a / a:visited backstop, which otherwise outranks it */ .pmaPage a.pActLib, .pmaPage a.pActLib:visited { color:#2a2a2a; } .pActLib svg { stroke:#8a8a8a; } .pActLib:hover { border-color:#DA0095; } /* border and icon go magenta, text stays dark */ .pActLib:hover svg { stroke:#DA0095; } /* expander: dashed edge, it happens in place */ .pActMore { border:1px dashed #eab8da; color:#DA0095; } .pActMore svg { stroke:#DA0095; } .pActMore:hover { background:#fdf4f9; border-color:#DA0095; } .pActMore[aria-expanded="true"] { border-style:solid; border-color:#e6e6e6; color:#2a2a2a; } .pActMore[aria-expanded="true"] svg { stroke:#888; } /* expanded, it becomes a plain control: hover the same way as Full Library */ .pActMore[aria-expanded="true"]:hover { background:#fff; border-color:#DA0095; } .pActMore[aria-expanded="true"]:hover svg { stroke:#DA0095; } /* rail: runs to the height of the insight column, jump control pinned to its foot */ .pLeadWrap .pBrief { display:flex; flex-direction:column; border-left:0; background:none; border:0; padding:0; } .pLeadWrap .pBrief .pMiniAll { margin-top:14px; } /* rail: compact publications table */ table.pMiniTbl { width:100%; border-collapse:collapse; table-layout:fixed; } table.pMiniTbl td { vertical-align:top; padding:8px 0; border-top:1px solid #f0f0f0; } table.pMiniTbl tr:first-child td { border-top:0; padding-top:0; } /* one line each: long names run off the edge behind a short fade rather than wrapping and pushing the rail out of step with the insight column */ table.pMiniTbl td.mF a, table.pMiniTbl td.mF .mS { white-space:nowrap; overflow:hidden; -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); } table.pMiniTbl td.mF a { display:block; font-size:1.3rem; font-weight:500; color:#1a1a1a; line-height:1.45; } table.pMiniTbl td.mF a:link, table.pMiniTbl td.mF a:visited { color:#1a1a1a; } table.pMiniTbl td.mF a:hover { color:#DA0095; } /* after :visited - same weight, so order decides */ table.pMiniTbl td.mF img { width:14px; margin:0 8px -2px 0; } table.pMiniTbl td.mF .mS { display:block; font-size:1.15rem; font-weight:500; color:#7a7a7a; line-height:1.4; padding-top:2px; } /* link followed by a (T) marker: shrink the link so the marker sits beside it */ table.pMiniTbl td.mF a:has(+ .fileTemplate) { display:inline-block; max-width:calc(100% - 2.8em); vertical-align:bottom; text-overflow:ellipsis; -webkit-mask-image:none; mask-image:none; } table.pMiniTbl td.mF .fileTemplate { margin-left:4px; white-space:nowrap;font-size:1.05rem;top:-3px} /* myPMA marker kept on the title line: add class 'mypmaInline' alongside 'mypmadb'. The title link shrinks to leave room for the marker (and the (T) marker if present) */ table.pMiniTbl td.mF a:has(~ .mypmaInline) { display:inline-block; max-width:calc(100% - 5.5em); vertical-align:bottom; text-overflow:ellipsis; -webkit-mask-image:none; mask-image:none; } table.pMiniTbl td.mF a:has(+ .fileTemplate):has(~ .mypmaInline) { max-width:calc(100% - 8em); } table.pMiniTbl td.mF .mypmaInline { white-space:nowrap; font-size:1.05rem; } table.pMiniTbl td.mF .mypmaInline a { display:inline; overflow:visible; font-size:inherit; -webkit-mask-image:none; mask-image:none; } /* jump control: a full-width button closing the publications preview */ .pMiniAll { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; margin-top:14px; padding:10px 12px; background:#fafafa; border:1px solid #e6e6e6; border-radius:4px; font-size:1.15rem; font-weight:600; color:#2a2a2a; transition:color 160ms ease, background 160ms ease, border-color 160ms ease; } .pMiniAll svg { width:14px; height:14px; flex:none; fill:none; stroke:#8a8a8a; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:stroke 160ms ease, transform 180ms ease; } .pMiniAll:hover { background:#fdf4f9; border-color:#DA0095; color:#DA0095; } .pMiniAll:hover svg { stroke:#DA0095; } @media only screen and (max-width:1180px) { /* full-width lead column here, so keep previews + actions on one line */ /* stacked: keep each header with the block it belongs to */ .pLeadWrap .pSecHdCol:first-of-type { order:1; } .pLeadWrap .pLeadCol { order:2; } .pLeadWrap .pCards { order:3; margin-top:26px; } .pLeadWrap .pSecHdCol:nth-of-type(2) { order:4; margin-top:34px; } .pLeadWrap .pBrief { order:5; } } @media only screen and (max-width:720px) { .pAlsoGrid { grid-template-columns:minmax(0,1fr); } .pAlsoActions { flex-direction:row; height:auto; } /* stacked: divide with a rule above rather than beside */ .pAlsoCard { border-left:0; padding-left:0; border-top:1px solid #ececec; padding-top:12px; } .pAlsoCard:first-child { border-top:0; padding-top:0; } } /* ---------- in-page anchors clear the fixed site header ---------- main.css fixes .header once the page scrolls (body.moving gets 84px of padding), so a bare anchor would land underneath it and hide the section heading. */ .pmaPage [id] { scroll-margin-top:104px; } html { scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }