/* =========================================================================== Prime Partners — shared site chrome Header, navigation, newsletter block and footer. This file is loaded by every page. Individual pages keep their own inline styles for their own content, so anything in here should only ever describe the header, the nav, the newsletter block or the footer. Colours and type follow the Prime Partners design system: navy #000d40, blue #0645b9, light azure #b3d9f7, yellow #ffde59, Onest. =========================================================================== */ /* =========================================================================== THE PALETTE These are the Prime Partners colours, and this block is where they are settled. Every page also declares its own copy in its inline styles, because each page carries its own layout CSS, and they are checked against this list by: python3 tools/check-styles.py That reports any page whose colours have drifted. If you change a colour here, run the checker to see which pages still hold the old one. navy #000d40 headings, dark sections, body text blue #0645b9 links, primary buttons, eyebrow labels azure #1985c8 mid blue, used for accents on white light azure #b3d9f7 pale bands and section backgrounds yellow #ffde59 the one accent, used sparingly light yellow #fff6d4 soft yellow fills grey #5a6480 secondary body text body grey #3a4661 article body text line #e6eaf2 hairline rules and borders soft #f7f9fc the off white page ground Some pages use a second name for the same colour, inherited from whoever built them: --vivid is --blue, --paper is --white, --light-blue and --section-azure are --light-azure. The checker knows about these, so they are reported as aliases rather than as mistakes. =========================================================================== */ /* ========================================================================== Buttons One treatment, applied from here so every button on the site behaves the same. A button lifts, its fill deepens from the left, and the arrow steps forward. All of it stops under prefers-reduced-motion. ========================================================================== */ .pp-btn-primary, .pp-btn-blue, .pp-btn-white-box, .pp-btn-navy, .pp-btn-outline, .pp-header-cta, .btn, .ev-btn-register, .ev-btn-watch{ position:relative; overflow:hidden; isolation:isolate; transition:transform .32s cubic-bezier(.2,.7,.3,1), box-shadow .32s ease, background-color .32s ease, color .32s ease; } .pp-btn-primary::before, .pp-btn-blue::before, .pp-btn-navy::before, .pp-header-cta::before, .btn::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(255,255,255,.22); transform:scaleX(0); transform-origin:left; transition:transform .42s cubic-bezier(.2,.7,.3,1); } .pp-btn-primary:hover::before, .pp-btn-blue:hover::before, .pp-btn-navy:hover::before, .pp-header-cta:hover::before, .btn:hover::before{ transform:scaleX(1); } .pp-btn-primary:hover, .pp-btn-blue:hover, .pp-btn-white-box:hover, .pp-btn-navy:hover, .pp-btn-outline:hover, .pp-header-cta:hover, .btn:hover, .ev-btn-register:hover, .ev-btn-watch:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(0,13,64,.18); } .pp-btn-primary:active, .pp-btn-blue:active, .pp-header-cta:active, .btn:active{ transform:translateY(-1px); } /* the arrow steps forward with it */ .pp-btn-primary svg, .pp-btn-blue svg, .pp-btn-white-box svg, .pp-btn-navy svg, .pp-btn-outline svg, .btn svg, .btn .arr, .pp-btn-arrow{ transition:transform .32s cubic-bezier(.2,.7,.3,1); } .pp-btn-primary:hover svg, .pp-btn-blue:hover svg, .pp-btn-white-box:hover svg, .pp-btn-navy:hover svg, .pp-btn-outline:hover svg, .btn:hover svg, .btn:hover .arr, a:hover > .pp-btn-arrow{ transform:translateX(5px); } @media (prefers-reduced-motion: reduce){ .pp-btn-primary, .pp-btn-blue, .pp-btn-white-box, .pp-btn-navy, .pp-btn-outline, .pp-header-cta, .btn, .ev-btn-register, .ev-btn-watch, .pp-btn-primary::before, .pp-btn-blue::before, .pp-btn-navy::before, .pp-header-cta::before, .btn::before, .btn svg, .btn .arr, .pp-btn-arrow{ transition:none; } .pp-btn-primary:hover, .pp-btn-blue:hover, .pp-btn-white-box:hover, .pp-btn-navy:hover, .pp-btn-outline:hover, .pp-header-cta:hover, .btn:hover{ transform:none; } /* Two things on the site scroll by themselves, the Google reviews and the membership logos. Stopping them is right at this setting, but stopping them on their own leaves the reader looking at the first card with no way to reach the rest. So the frame they sit in becomes scrollable instead. The pages ask for this already, on the track rather than the frame, and that cannot work: the track sizes itself to its contents, so it never overflows and never gets a scrollbar. */ .pp-mm-track-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .pp-mm-track{animation:none;} } /* ========================================================================== Type and spacing scale The single source of truth. This file loads after each page's own styles, so what is set here wins, and a page only needs its own rule when it is doing something genuinely different. Six levels, two weights. Bold is 700, regular is 400, nothing in between. The rule underneath the whole thing: a heading is never lighter than the heading above it. ========================================================================== */ :root{ --pp-hero-h1:60px; /* a hub or service page opening over video or photo */ --pp-h1:54px; /* an article headline, or a page that is not a hero */ --pp-h2:36px; /* a section heading */ --pp-h3:22px; /* a card title, a question, a sub heading */ --pp-h4:18px; /* the deepest level, inside an article */ --pp-body:16px; --pp-eyebrow:13px; --pp-line-tight:1.05; --pp-line-heading:1.15; --pp-line-body:1.65; /* vertical rhythm for a section band */ --pp-section-sm:64px; --pp-section:88px; --pp-section-lg:120px; } /* The scale has to come down on a narrow screen, and it has to come down here. A page setting its own smaller heading inside a media query cannot win, because a media query adds no specificity and site.css is linked after the page, so the desktop size above would beat it. Sizing the scale itself is the only place that holds. */ @media(max-width:900px){ :root{ --pp-hero-h1:44px; --pp-h1:40px; --pp-h2:30px; --pp-h3:20px; } } @media(max-width:600px){ :root{ --pp-hero-h1:36px; --pp-h1:32px; --pp-h2:26px; --pp-h3:19px; } } /* ---- The typeface ---- */ /* Onest, set here so no page can drift off it. Seven job pages under /careers/ carried font-family:'Open Sans' on the body, and Open Sans is not a font this site loads, so those seven rendered in whatever sans the reader's system happens to use. Nothing else on the site said which font it wanted, and they were the only pages that looked wrong because of it. */ body, body.pp-anchor{ font-family:'Onest','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } .pp-hero-h1{ font-size:var(--pp-hero-h1); font-weight:700; line-height:var(--pp-line-tight); letter-spacing:-0.025em; } .pp-h1{ font-size:var(--pp-h1); font-weight:700; line-height:1.08; letter-spacing:-0.025em; } .pp-h2{ font-size:var(--pp-h2); font-weight:300; line-height:var(--pp-line-heading); letter-spacing:-0.03em; } /* A section heading is light. It sits under a bold eyebrow, and the contrast between the two is what opens a section. Weight only, never size, so a page that sets its own size for a heading keeps it. The :not() is there to carry enough specificity to beat a page's own `.something h2` rule, which is how most of them are written. */ h2:not(.pp-h2-bold){font-weight:300;} /* Two places keep the bold. Inside a piece of writing an H2 is signposting rather than announcing, so it has to hold its own against the body copy around it. And the author name under an article is a name, not the opening of a section. A job description was briefly in this list, on the reasoning that it is a piece of writing read the same way. It is not: the headings on a job page are opening sections of a page, the same as the ones on the careers page that lists the jobs, and those are light. It sits outside the exception again. */ .post-prose h2, .post-body h2, h2.author-name{font-weight:700;} .pp-h3{ font-size:var(--pp-h3); font-weight:700; line-height:1.3; letter-spacing:-0.01em; } .pp-h4{ font-size:var(--pp-h4); font-weight:700; line-height:1.35; } /* An eyebrow is always bold. At 400 it goes weak against the heading below. The list is long because the same thing was built under a different name on almost every page. They are all the small uppercase line that sits above a heading, so they are all one thing and they all sit at 13px and 700. */ .pp-eyebrow, .pp-divider-label, .pp-section-divider-label, .pp-hero-eyebrow, .pp-story-eyebrow, .pp-newsletter-label, .pp-pillar-eyebrow, .pp-stat-label, .pp-events-label, .pp-memberships-label{ font-size:var(--pp-eyebrow); font-weight:700; letter-spacing:2px; text-transform:uppercase; } :root{ --pp-navy:#000d40; --pp-navy-deep:#000a33; --pp-blue:#0645b9; --pp-azure:#bad8f4; --pp-light-azure:#b3d9f7; /* bright blue, the hover and focus state of the brand blue */ --pp-blue-bright:#0a5cf5; --pp-yellow:#ffde59; --pp-white:#ffffff; --pp-header-height:86px; /* The short names, available everywhere rather than only inside the footer block. A rule that reaches for one of these outside that block used to get nothing at all, and CSS says nothing when that happens: the property is simply dropped. That is how the hero lost its darkening for anyone with reduce motion turned on, and it looked plausible enough that it took a screenshot from a real phone to find. Every page already sets these to exactly these values. */ --navy:var(--pp-navy); --navy-deep:var(--pp-navy-deep); --blue:var(--pp-blue); --azure:var(--pp-azure); --light-azure:var(--pp-light-azure); --yellow:var(--pp-yellow); --white:var(--pp-white); } /* The footer block was written against these names, so keep them available on pages that do not define their own. */ .pp-anchor{ --navy:var(--pp-navy); --navy-deep:var(--pp-navy-deep); --blue:var(--pp-blue); --azure:var(--pp-azure); --light-azure:var(--pp-azure); --yellow:var(--pp-yellow); --white:var(--pp-white); } /* =========================================================================== IN PAGE JUMPS The header is sticky, so a link to a #section scrolls that section to the very top of the window and the header then sits on top of it. The heading you asked for is the part that disappears. scroll-margin-top stops the scroll short by the height of the header and a little more, so the section arrives just underneath it. =========================================================================== */ [id]{scroll-margin-top:112px;} @media(max-width:900px){ [id]{scroll-margin-top:100px;} } /* =========================================================================== HEADER =========================================================================== */ .pp-site-header{ position:sticky; top:0; z-index:1000; background:var(--pp-navy); color:var(--pp-white); font-family:'Onest','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; border-bottom:1px solid rgba(255,255,255,.08); } .pp-site-header *{box-sizing:border-box;} .pp-site-header-inner{ max-width:1280px; margin:0 auto; padding:0 48px; height:var(--pp-header-height); display:flex; align-items:center; gap:32px; } /* ---- Wordmark ---- */ .pp-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--pp-white); flex-shrink:0; } /* The supplied logo is the stacked lockup, three lines deep, so it needs more height than a single line wordmark would. It is dropped so its top edge lines up with the top of the menu text, rather than sitting above it. */ .pp-brand img{height:46px;width:auto;display:block;} .pp-brand-text{ font-size:20px; font-weight:700; letter-spacing:-0.02em; line-height:1; white-space:nowrap; } .pp-brand-dot{color:var(--pp-yellow);} /* ---- Desktop navigation ---- */ .pp-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; } .pp-nav-item{position:relative;} .pp-nav-link{ display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border-radius:4px; font-size:15px; font-weight:500; color:rgba(255,255,255,.86); text-decoration:none; white-space:nowrap; transition:color .18s ease,background .18s ease; } .pp-nav-link:hover, .pp-nav-item:focus-within > .pp-nav-link{ color:var(--pp-white); background:rgba(255,255,255,.07); } .pp-nav-link[aria-current="page"], .pp-nav-link.is-section{ color:var(--pp-yellow); } .pp-nav-caret{ width:11px; height:11px; flex-shrink:0; transition:transform .2s ease; } .pp-nav-item:hover .pp-nav-caret, .pp-nav-item:focus-within .pp-nav-caret{transform:rotate(180deg);} /* ---- Dropdown ---- */ .pp-dropdown{ position:absolute; top:100%; left:0; min-width:320px; background:var(--pp-white); border-radius:8px; box-shadow:0 18px 48px rgba(0,13,64,.22); padding:10px; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease,transform .18s ease,visibility .18s; } .pp-nav-item:hover .pp-dropdown, .pp-nav-item:focus-within .pp-dropdown{ opacity:1; visibility:visible; transform:translateY(0); } .pp-dropdown-link{ display:block; padding:11px 14px; border-radius:5px; font-size:14.5px; line-height:1.35; color:var(--pp-navy); text-decoration:none; transition:background .15s ease,color .15s ease; } .pp-dropdown-link:hover{background:#f2f6fd;color:var(--pp-blue);} .pp-dropdown-link[aria-current="page"]{color:var(--pp-blue);font-weight:600;} .pp-dropdown-divider{ height:1px; background:rgba(0,13,64,.1); margin:8px 12px; } .pp-dropdown-all{ display:block; padding:11px 14px; font-size:13px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--pp-blue); text-decoration:none; } .pp-dropdown-all:hover{text-decoration:underline;} /* The services menu is ten links, and ten links in a column is a list to read rather than a set of choices to scan. Three headings turn it into the same three groups the home page already uses, so somebody who read Advice for business there finds the same words here. The heading is a label rather than a link: every group already has a page of its own further down, and a heading that goes somewhere invites a click that lands on the wrong thing. */ /* The services menu has three branches and the pages hang off them, the way the live menu is built. The branch is a button rather than a link: it has no page of its own, and a link that goes nowhere is worse than a control that says what it does. The panel opens to the right, which is the direction a reader expects after a chevron pointing that way, and it clears the window edge from 1220px up with 28px to spare at 1280. Below that there is not enough room: measured at 1001px, the narrowest the desktop nav is shown at, a right hand panel ran 44px past the edge and gave the whole page a sideways scrollbar. So under 1220px it opens to the left instead, where there is nothing but the wordmark, and the chevron turns to match. */ .pp-dropdown-branch{position:relative;} .pp-dropdown-branch-label{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; padding:11px 14px; border:0; border-radius:5px; background:transparent; font-family:inherit; font-size:14.5px; font-weight:600; line-height:1.35; color:var(--pp-navy); text-align:left; cursor:pointer; transition:background .15s ease,color .15s ease; } .pp-branch-caret{width:14px;height:14px;flex-shrink:0;opacity:.45;transition:transform .18s ease,opacity .18s ease;} .pp-dropdown-branch:hover > .pp-dropdown-branch-label, .pp-dropdown-branch:focus-within > .pp-dropdown-branch-label{ background:#f2f6fd; color:var(--pp-blue); } .pp-dropdown-branch:hover .pp-branch-caret, .pp-dropdown-branch:focus-within .pp-branch-caret{opacity:1;transform:translateX(2px);} .pp-dropdown-sub{ position:absolute; left:100%; top:-10px; margin-left:6px; min-width:280px; background:var(--pp-white); border-radius:8px; box-shadow:0 18px 48px rgba(0,13,64,.22); padding:10px; opacity:0; visibility:hidden; transform:translateX(-8px); transition:opacity .16s ease,transform .16s ease,visibility .16s; } .pp-dropdown-branch:hover > .pp-dropdown-sub, .pp-dropdown-branch:focus-within > .pp-dropdown-sub{ opacity:1; visibility:visible; transform:translateX(0); } @media(max-width:1220px){ .pp-dropdown-sub{ left:auto; right:100%; margin-left:0; margin-right:6px; transform:translateX(8px); } .pp-branch-caret{transform:scaleX(-1);} .pp-dropdown-branch:hover .pp-branch-caret, .pp-dropdown-branch:focus-within .pp-branch-caret{transform:scaleX(-1) translateX(2px);} } /* ---- Header actions ---- */ .pp-header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .pp-header-cta{ display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:4px; background:var(--pp-yellow); color:var(--pp-navy); font-size:13px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; text-decoration:none; white-space:nowrap; transition:transform .18s ease,background .18s ease; } .pp-header-cta:hover{background:#ffe883;transform:translateY(-1px);} /* ---- Burger ---- */ .pp-burger{ display:none; width:44px; height:44px; margin-left:auto; padding:0; border:none; border-radius:4px; background:transparent; color:var(--pp-white); cursor:pointer; align-items:center; justify-content:center; } .pp-burger:hover{background:rgba(255,255,255,.08);} .pp-burger svg{width:24px;height:24px;} .pp-burger .pp-burger-close{display:none;} .pp-burger[aria-expanded="true"] .pp-burger-open{display:none;} .pp-burger[aria-expanded="true"] .pp-burger-close{display:block;} /* ---- Mobile panel ---- */ .pp-mobile-nav{ display:none; background:var(--pp-navy-deep); border-top:1px solid rgba(255,255,255,.08); max-height:calc(100vh - var(--pp-header-height)); overflow-y:auto; } .pp-mobile-nav.is-open{display:block;} .pp-mobile-nav-inner{padding:14px 24px 28px;} .pp-mobile-group{border-bottom:1px solid rgba(255,255,255,.09);} .pp-mobile-link{ display:block; padding:16px 2px; font-size:17px; font-weight:500; color:var(--pp-white); text-decoration:none; } .pp-mobile-toggle{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:16px 2px; border:none; background:none; font-family:inherit; font-size:17px; font-weight:500; color:var(--pp-white); cursor:pointer; text-align:left; } .pp-mobile-toggle svg{width:14px;height:14px;transition:transform .2s ease;} .pp-mobile-toggle[aria-expanded="true"] svg{transform:rotate(180deg);} .pp-mobile-sub{display:none;padding:0 0 12px 14px;} .pp-mobile-sub.is-open{display:block;} .pp-mobile-sub a{ display:block; padding:11px 0; font-size:15px; color:rgba(255,255,255,.78); text-decoration:none; } .pp-mobile-sub a:hover{color:var(--pp-yellow);} /* The same three groups in the phone panel. A heading rather than another thing to tap: a second accordion inside this one would put every service two taps away, which is worse than the long list it replaces. */ /* The same three branches on a phone, as a second accordion inside the first. It puts a service two taps away rather than one, which is the cost of the structure, and in exchange the panel opens at four rows instead of thirteen so the rest of the navigation is visible without scrolling. */ .pp-mobile-subtoggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:12px 0; border:0; background:transparent; font-family:inherit; font-size:15px; font-weight:600; color:rgba(255,255,255,.9); text-align:left; cursor:pointer; } .pp-mobile-subtoggle svg{width:16px;height:16px;flex-shrink:0;opacity:.6;transition:transform .2s ease;} .pp-mobile-subtoggle[aria-expanded="true"] svg{transform:rotate(180deg);opacity:1;} .pp-mobile-subtoggle[aria-expanded="true"]{color:var(--pp-yellow);} .pp-mobile-sub2{display:none;padding:0 0 8px 16px;} .pp-mobile-sub2.is-open{display:block;} .pp-mobile-sub2 a{ display:block; padding:10px 0; font-size:14.5px; color:rgba(255,255,255,.72); text-decoration:none; } .pp-mobile-sub2 a:hover{color:var(--pp-yellow);} .pp-mobile-actions{ display:flex; flex-direction:column; gap:12px; margin-top:24px; } .pp-mobile-actions .pp-header-cta{justify-content:center;padding:16px 22px;} @media(max-width:1180px){ .pp-site-header-inner{padding:0 28px;gap:20px;} .pp-nav-link{padding:10px 10px;font-size:14.5px;} } @media(max-width:1000px){ .pp-nav{display:none;} .pp-burger{display:flex;} /* Let's talk stays in the bar rather than hiding inside the menu. The header is sticky, so this is the one call to action that follows a reader down a long article on a phone. Every hub and service page opens with buttons in the hero, but an article does not, and before this a phone reader had nothing but a burger to work with. It sits with the burger on the right, not against the wordmark. On a wide screen .pp-nav carries the margin-left:auto that pushes everything after the wordmark over, and the nav is hidden here, so the button takes that job instead. The burger had an auto margin of its own from when it was the only thing out there, and two auto margins in one flex row share the free space between them, which is what split the pair apart. The space belongs in one place, in front of both. */ .pp-header-actions{display:flex;margin-left:auto;} .pp-burger{margin-left:0;} .pp-header-actions .pp-header-cta{padding:11px 17px;font-size:12px;letter-spacing:1px;} .pp-site-header-inner{gap:14px;} } @media(max-width:400px){ .pp-header-actions .pp-header-cta{padding:10px 13px;font-size:11px;letter-spacing:.8px;} .pp-site-header-inner{gap:10px;} } @media(max-width:1000px){ /* Once the nav collapses there is no menu to line up with, so the logo goes back to sitting centred in a shorter header. */ :root{--pp-header-height:76px;} .pp-brand img{height:42px;} } @media(max-width:560px){ .pp-site-header-inner{padding:0 20px;} .pp-mobile-nav-inner{padding:14px 20px 28px;} } /* Skip link, for keyboard and screen reader users */ .pp-skip{ position:absolute; left:-9999px; top:0; z-index:1100; background:var(--pp-yellow); color:var(--pp-navy); padding:14px 22px; font-weight:700; text-decoration:none; } .pp-skip:focus{left:12px;top:12px;} /* =========================================================================== NEWSLETTER + FOOTER Lifted unchanged from the original prime-footer.html so the published footer matches what was signed off. =========================================================================== */ .pp-anchor{ font-family:'Onest','Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; -webkit-font-smoothing:antialiased; } .pp-anchor *{box-sizing:border-box;} .pp-anchor img{max-width:100%;} /* ============ DARK ANCHOR (newsletter + footer share one navy zone) ============ */ .pp-anchor{ background:var(--navy); color:var(--white); } /* ---- Newsletter CTA ---- */ .pp-newsletter{ padding:56px 32px 48px; border-bottom:1px solid rgba(255,255,255,.1); } .pp-newsletter-inner{ max-width:1280px; margin:0 auto; } .pp-below-row{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-top:36px; padding-top:32px; border-top:1px solid rgba(255,255,255,.12); } .pp-newsletter-label{ /* Size, weight, tracking and case come from the eyebrow rule above. This one only says what is different about it: the colour and the gap under. */ color:var(--light-azure); margin-bottom:14px; } .pp-newsletter h2{ font-size:36px; /* weight comes from the section heading rule above */ line-height:1.1; letter-spacing:-0.03em; margin-bottom:12px; } .pp-newsletter p{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.82); margin-bottom:28px; } .pp-newsletter-form{ display:flex; flex-direction:column; gap:14px; } .pp-newsletter-row{ display:flex; gap:12px; } .pp-newsletter input[type="email"], .pp-newsletter input[type="text"]{ flex:1; min-width:0; background:var(--white); border:none; border-radius:8px; padding:17px 20px; font-family:inherit; font-size:16px; color:var(--navy); outline:none; } .pp-newsletter input::placeholder{color:#7a869a;} .pp-newsletter-btn{ background:var(--blue); color:var(--white); border:none; border-radius:4px; padding:0 34px; font-family:inherit; font-size:14px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; cursor:pointer; display:inline-flex; align-items:center; gap:10px; white-space:nowrap; transition:background .25s ease,transform .25s ease; } .pp-newsletter-btn:hover{background:#0a55de;transform:translateY(-2px);} .pp-newsletter-btn svg{transition:transform .25s ease;} .pp-newsletter-btn:hover svg{transform:translateX(3px);} .pp-newsletter-consent{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.66); } .pp-newsletter-consent a{color:var(--white);text-decoration:underline;} .pp-newsletter-social{ margin-top:0; padding-top:0; } .pp-newsletter-social-head{ font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; } .pp-newsletter-social-copy{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.78); margin-bottom:16px; } .pp-newsletter-social-icons{ display:flex; align-items:center; gap:14px; } .pp-newsletter-social-icons a{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.82); transition:color .22s ease,transform .22s ease; } .pp-newsletter-social-icons a svg{width:26px;height:26px;fill:currentColor;} .pp-newsletter-social-icons a:hover{color:var(--yellow);transform:translateY(-2px);} /* ---- EEAT trust signals (right column of below-row) ---- */ .pp-trust-inline{ display:flex; flex-direction:column; gap:16px; align-items:flex-start; width:100%; } .pp-trust-head{ font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--yellow); margin-bottom:14px; } /* The three accreditation marks are one object repeated three times. They used to be three different things sitting in a row: CPA on the solid blue and yellow block its artwork carries, Chartered Accountants in a white card because its wordmark is black and vanishes on navy, and Xero floating on the navy with nothing behind it. Three heights as well, 34, 42 and 48. Side by side that reads as three logos pasted in rather than a row of accreditations. So every one of them now gets the same white card at the same height, and the artwork sits inside it, centred and contained. The card is what is consistent; the logo inside keeps its own proportions. */ .pp-trust-marks{ display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin-top:8px; } .pp-trust-mark{ height:60px; min-width:124px; padding:10px 18px; background:var(--white); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; } .pp-trust-mark img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain; display:block; } .pp-trust-rating{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; text-decoration:none; transition:opacity .2s ease; } .pp-trust-rating:hover{opacity:.85;} .pp-trust-rating:hover .pp-trust-rating-arrow{transform:translate(2px,-2px);} .pp-trust-rating-arrow{ width:14px;height:14px; color:rgba(255,255,255,.7); transition:transform .2s ease; } /* The years of experience used to be separated from the Google rating by a hairline rule on its own left edge. That works only while the two sit on one line, and they do not: the right column narrows between 900 and 1100, and again under about 520, and at both the rule ends up as a stray vertical tick floating at the start of its own line. The space between them does the same job at every width. */ .pp-trust-experience{ font-size:13px; color:rgba(255,255,255,.72); white-space:nowrap; } .pp-trust-right{ display:flex; align-items:center; gap:10px 26px; flex-wrap:wrap; } .pp-trust-stars{ color:var(--yellow); font-size:15px; letter-spacing:2px; } .pp-trust-rating-text{ font-size:13px; color:rgba(255,255,255,.82); } .pp-trust-rating-text strong{font-weight:700;color:var(--white);} /* ---- Footer ---- */ .pp-footer{ padding:64px 32px 36px; } .pp-footer-inner{ max-width:1280px; margin:0 auto; } .pp-footer-acknowledgement{ padding-bottom:44px; margin-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12); } .pp-footer-acknowledgement-label{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:12px; } .pp-footer-acknowledgement p{ font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.78); } .pp-footer-grid{ display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.12); } .pp-footer-brand{ font-size:21px; font-weight:700; color:var(--white); margin-bottom:14px; } .pp-footer-brand-line{ font-size:15px; line-height:1.6; color:rgba(255,255,255,.82); margin-bottom:8px; } .pp-footer-tagline{ font-size:14px; line-height:1.6; color:rgba(255,255,255,.58); margin-bottom:22px; } .pp-footer-social{ display:flex; gap:12px; } .pp-footer-social a{ width:38px; height:38px; border-radius:8px; border:1px solid rgba(255,255,255,.2); display:inline-flex; align-items:center; justify-content:center; color:var(--white); transition:background .22s ease,border-color .22s ease,transform .22s ease; } .pp-footer-social a svg{ width:18px;height:18px; stroke:currentColor; transition:stroke .22s ease; } .pp-footer-social a:hover{ background:var(--blue); border-color:var(--blue); transform:translateY(-2px); } .pp-footer-col-title{ font-size:13px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:18px; } .pp-footer-col-link{ display:block; font-size:15px; color:rgba(255,255,255,.82); text-decoration:none; margin-bottom:13px; transition:color .2s ease,padding-left .2s ease; cursor:pointer; } .pp-footer-col-link:hover{color:var(--white);padding-left:4px;} .pp-footer-legal{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; padding-top:28px; } .pp-footer-legal-text{ font-size:13px; line-height:1.6; color:rgba(255,255,255,.58); max-width:680px; } .pp-footer-legal-copyright{ font-size:13px; color:rgba(255,255,255,.48); white-space:nowrap; } /* ========================================================================== THE HEADING FRAME The block at the top of a page, the one carrying the eyebrow, the headline and the buttons under it. The site was built a page at a time and this block was rebuilt each time. Thirteen names for the frame, six for the wrapper inside it, five for the small line above the heading and four sets of button classes that all painted the same yellow. Nothing was wrong on its own. But flicking from one page to the next the headline moved down the screen, changed size and changed weight, and that is the first thing a reader notices. Every hero now carries the same handful of names, added by tools/unify-heroes.py, and this is where they are set. A page keeps the classes it always had, so its own styles still work. These load after and are unlayered, so this is the version a reader sees. The frame fills what is left of the screen under the navigation, the words sit in the middle of it, and the eyebrow, the headline and the buttons are the same size and the same distance apart on all 184 pages. ========================================================================== */ .pp-hero{ position:relative; overflow:hidden; display:flex; align-items:flex-start; min-height:calc(100vh - var(--pp-header-height)); min-height:calc(100svh - var(--pp-header-height)); padding:160px 0 88px; background-color:var(--pp-navy); color:var(--pp-white); } /* Picture, then wash, then words, built upwards. Some pages put the photo and the wash on a negative level instead, which Safari on a phone does not paint reliably inside a section that isolates itself, and the wash simply disappears under white text. Same order, no negatives. */ .pp-hero::before, .pp-hero-video, .pp-hero-img, .pp-hero-bg, .role-hero-img{z-index:0;} .pp-hero::after, .pp-hero-video-overlay, .pp-hero-overlay, .hero-overlay, .role-hero-overlay{z-index:1;} .pp-hero-inner{position:relative;z-index:2;} /* The measure. Same 1280px and the same gutters as everything else on the page, so the headline starts on the same vertical line as the section headings underneath it. The words start at the top of the frame, and that is what puts the headline in the same place on every page. How much there is of them varies a lot: a service page opens with an eyebrow, a headline, a paragraph and two buttons, and an article opens with an eyebrow, a headline and a byline. Centring those two as they come drops the article's headline 246px further down the screen than the service page's, which is the jump you see flicking from one page to the next, and no amount of centring closes it while the words differ. Starting them on the same line does. What is left over falls below the words, where the picture or the film is. */ .pp-hero-inner{ width:100%; max-width:1280px; margin:0 auto; padding:0 48px; } /* The picture behind a hero, and the wash over it. Every page that has one wrote the same four rules for itself, so a page that wanted a picture and did not know to write them got a flat navy block instead. */ .pp-hero-bg, .pp-hero-img, .pp-hero-media, .role-hero-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .pp-hero-overlay, .hero-overlay, .role-hero-overlay, .pp-hero-video-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,13,64,.82) 0%, rgba(0,13,64,.74) 50%, rgba(0,13,64,.88) 100%); } /* The trail of links back up the site. It used to sit in a band of its own above the frame on twenty pages, which pushed the whole opening down the screen and stopped it filling the window. It now sits at the top of the frame, out of the flow, so it reads in the same place it always did and the headline underneath it does not move. */ .pp-hero-crumb{ position:absolute; top:0; left:0; right:0; z-index:3; padding:22px 0; background:transparent; border:0; font-size:12px; font-weight:400; letter-spacing:.3px; color:rgba(255,255,255,.62); } /* The two versions of it each carried a band of their own, a pale ground on a profile and a white one with a rule under it on a job. Neither reads on navy, and the rule cut the frame in half. */ .pp-hero-crumb .crumb{ padding:0; font-size:12px; font-weight:400; color:inherit; } .pp-hero-crumb .pp-crumb-current{color:rgba(255,255,255,.62);} .pp-hero-crumb-inner{ max-width:1280px; margin:0 auto; padding:0 48px; } .pp-hero-crumb a{ color:rgba(255,255,255,.78); text-decoration:none; } .pp-hero-crumb a:hover{color:var(--pp-yellow);} .pp-hero-crumb span{color:rgba(255,255,255,.45);} /* A profile puts the portrait beside the words. The portrait is the taller of the two, and centring the pair against it pushed the name a hundred pixels down the page. The words start at the top, where every other headline starts, and the portrait sits alongside. */ .pp-hero-grid{align-items:start;} /* The small line above the heading. Size, weight and tracking come from the eyebrow rule in the type scale. Here it picks up the yellow and the space under it. Where it sits inside a divider, the divider holds the space. */ .pp-hero-eyebrow{ display:block; color:var(--pp-yellow); /* The line height has to be set, not inherited. Some pages set 1.6 on the body and some leave it alone, which made this one line 17px tall on one page and 21px on the next, and that 4px moved every headline under it. */ line-height:1.3; margin:0 0 26px; } .pp-hero .pp-divider{margin:0 0 26px;} .pp-hero .pp-divider .pp-hero-eyebrow{margin:0;} /* A job opens with its tags where every other page has its eyebrow. The pills are taller than a line of type, so the space under them is smaller by the difference, and the headline lands on the same line as everywhere else. */ .pp-hero .tags{margin:0 0 11px;} /* The heading. Size and weight come from the scale, and it runs the full measure. It was held to 900px of the 1184 available, which left the words stopping short of the right hand side for no reason a reader could see. text-wrap:balance still evens the lines out, so a two line headline breaks near the middle rather than leaving one word on its own. */ .pp-hero-h1{ color:var(--pp-white); margin:0 0 26px; } /* The two lines under the heading. A service page opens with a lead line a size up and a weight heavier, then the paragraph proper underneath it. That pairing is how those pages are built, so it is set here rather than being flattened into one thing. Neither carries a measure. Both used to stop short of the right hand side, which read as though the copy had been cut off, and the pages that had it right ran the full width of the column. So they all do. The space under them belongs to the buttons, set once below, so the gap is the same whether a lead line sits above them, a paragraph, three paragraphs, a byline, or nothing at all. */ .pp-hero-sub{ font-size:21px; font-weight:600; line-height:1.4; color:var(--pp-white); margin:0 0 22px; max-width:none; } .pp-hero-lede{ font-size:var(--pp-body); font-weight:400; line-height:var(--pp-line-body); color:rgba(255,255,255,.85); margin:0 0 18px; max-width:none; } .pp-hero-sub:last-child, .pp-hero-lede:last-child{margin-bottom:0;} /* The buttons. One geometry and two fills, set here rather than on each page. Every page already painted these the same yellow and the same blue, but the geometry had drifted: on some pages 13px type inside 16px by 30px of padding, on others 14px inside 18px by 34px. The scale says the second, so that is what they all are now, in a hero and everywhere else. */ .pp-hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin:36px 0 0; } .pp-btn, .pp-btn-primary, .pp-btn-blue{ display:inline-flex; align-items:center; gap:9px; padding:18px 34px; border-radius:4px; font-size:14px; font-weight:700; line-height:1; text-transform:uppercase; letter-spacing:1.2px; text-decoration:none; border:1px solid transparent; font-family:inherit; cursor:pointer; } /* The arrow inside a button was a 24px inline SVG on one page, a 16px one on the next and a text arrow on a third, so buttons that were otherwise identical came out four pixels apart in height. */ .pp-btn svg, .pp-btn-primary svg, .pp-btn-blue svg{ width:16px; height:16px; flex:none; } .pp-btn .arr, .pp-btn-primary .arr, .pp-btn-blue .arr, .pp-btn-arrow{ font-size:16px; line-height:1; } /* Yellow leads, blue follows. */ .pp-btn-primary{ background:var(--pp-yellow); color:var(--pp-navy); box-shadow:none; } .pp-btn-blue{ background:var(--pp-blue); color:var(--pp-white); box-shadow:none; } @media(max-width:900px){ .pp-hero{padding:88px 0 64px;} .pp-hero-inner{padding:0 28px;} .pp-hero-sub{font-size:19px;} /* A profile on a phone reads name, then face, then what you can do about it. The portrait used to come first, which put the heading nearly three hundred pixels further down than on any other page, and the buttons used to sit above the portrait, a long way from the person. display:contents lets the four things inside the words column take their own place in the stack, so the portrait can slot between the tagline and the buttons without moving anything in the markup. Every rule below is scoped to .pp-hero-grid, which only a profile has. Unscoped, display:contents dissolved the measure on any other page carrying pp-hero-content, and /about-us/ is one: its wrapper is the 1280px column inside a flex .pp-hero, so the eyebrow, the headline, the paragraph and the buttons became flex items of the hero itself and laid out in a row. The headline came out 185px wide and 227px tall, sitting on top of the eyebrow. The gap goes to nothing, because the four things now stacking here carry their own spacing, and the two that need more say so below. */ .pp-hero-grid{display:flex;flex-direction:column;gap:0;} .pp-hero-grid .pp-hero-content{display:contents;} .pp-hero-grid .pp-hero-role{order:1;} .pp-hero-grid .pp-hero-name{order:2;} .pp-hero-grid .pp-hero-tagline{order:3;} .pp-hero-grid .pp-hero-photo-wrap{order:4;margin-top:2rem;} .pp-hero-grid .pp-hero-ctas{order:5;margin-top:2rem;} /* LinkedIn and Let's talk belong on the same line. A full width button is right where a hero has two of them stacked, and wrong next to a round one, which is why Let's talk had been pushed onto a line of its own. */ .pp-hero-grid .pp-hero-ctas .pp-btn{width:auto;} .pp-hero-crumb{padding:18px 0;} .pp-hero-crumb-inner{padding:0 28px;} } @media(max-width:600px){ .pp-hero{padding:64px 0;} .pp-hero-inner{padding:0 20px;} .pp-hero-crumb-inner{padding:0 20px;} .pp-hero-actions{gap:12px;} .pp-hero .pp-btn{width:100%;justify-content:center;} } /* ---- Hero video overlay ---- */ /* Every hero video carried its own overlay value, so the footage showed through more on some pages than others. One value now, dark enough that the headline sits on navy and the film reads as a glint behind it. Because site.css is linked after each page's own styles, this is what wins. */ .pp-hero-video-overlay, video ~ .pp-hero-overlay, video ~ .hero-overlay{ background:linear-gradient(180deg, rgba(0,13,64,.93) 0%, rgba(0,13,64,.90) 55%, rgba(0,13,64,.96) 100%); } /* ========================================================================== BOXES One radius, and two behaviours. The radius ranged from 3px to 14px depending on which page a box happened to be written on. The scale already settles a button at 4px, so that is what a box is too. The behaviour used to be one thing: every box lifted six pixels and threw a shadow when you pointed at it, whether or not there was anything to click, which is a promise half of them could not keep. A box you can click now behaves the way the two on the home page do, a wash fades in behind the words, the title picks up the blue and the arrow steps out. A box you cannot click does not move at all. ========================================================================== */ .pp-pillar,.pp-card,.hub-card,.card,.card-img,.card-img img, .pp-team-card,.pp-team-photo,.role,.pp-who,.pp-duo-card,.pp-next,.pp-tool, .pp-industry,.pp-personal-card,.pp-locate-map,.pp-table-wrap, .pp-insight-card,.pp-insight-img,.pp-insight-img img, .pp-spec-card,.pp-value-card, .pp-focus-card,.pp-industry-card,.pp-about-sidebar,.pp-form, .author-more-card,.pp-rev-card,.post-cta-band,.perk, .field,.search-input,.cat-select,.form-success{ border-radius:4px; } /* ---- A box you can click ---- */ a.pp-card, a.hub-card, a.pp-tool, a.pp-insight-card, a.pp-industry-card, a.author-more-card, a.pp-team-card, a.pp-who, a.role, article.card, .pp-pillar{ position:relative; overflow:hidden; isolation:isolate; transition:border-color .35s ease; } a.pp-card::before, a.hub-card::before, a.pp-tool::before, a.pp-insight-card::before, a.pp-industry-card::before, a.author-more-card::before, a.pp-team-card::before, a.pp-who::before, a.role::before, article.card::before, .pp-pillar::before{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(135deg,#eaf3fd 0%,#dbeafb 100%); opacity:0; transition:opacity .45s ease; } /* the wash goes behind the words, built upwards rather than on a negative level, which Safari on a phone does not paint reliably */ a.pp-card > *, a.hub-card > *, a.pp-tool > *, a.pp-insight-card > *, a.pp-industry-card > *, a.author-more-card > *, a.pp-team-card > *, a.pp-who > *, a.role > *, article.card > *, .pp-pillar > *{ position:relative; z-index:1; } a.pp-card:hover::before, a.hub-card:hover::before, a.pp-tool:hover::before, a.pp-insight-card:hover::before, a.pp-industry-card:hover::before, a.author-more-card:hover::before, a.pp-team-card:hover::before, a.pp-who:hover::before, a.role:hover::before, article.card:hover::before, .pp-pillar:hover::before{opacity:1;} a.pp-card:hover, a.hub-card:hover, a.pp-tool:hover, a.pp-insight-card:hover, a.pp-industry-card:hover, a.author-more-card:hover, a.pp-team-card:hover, a.pp-who:hover, a.role:hover, article.card:hover, .pp-pillar:hover{ transform:none; box-shadow:none; border-color:rgba(6,69,185,.3); } /* the title picks up the blue */ a.pp-card:hover .pp-card-title, a.pp-industry-card:hover .pp-industry-title, a.author-more-card:hover .author-more-title, a.role:hover h3, a.pp-who:hover h3, a.hub-card:hover h3, a.pp-tool:hover strong, a.pp-insight-card:hover .pp-insight-title, article.card:hover .card-body h3, article.card:hover .card-body h3 a, .pp-pillar:hover .pp-pillar-title, a.pp-team-card:hover .pp-team-name{ color:var(--pp-blue); } /* and the arrow steps out */ a.pp-card:hover .pp-arrow, a.hub-card:hover .arr, a.pp-tool:hover .pp-tool-arrow, a.pp-insight-card:hover .pp-insight-link svg, article.card:hover .card-link .arr, .pp-pillar:hover .pp-pillar-link, a.pp-team-card:hover .pp-team-profile svg{ transform:translateX(5px); } .pp-pillar:hover .pp-pillar-link{transform:none;gap:16px;} /* ---- An industry box that holds one link ---- */ /* Five of the six boxes under "R&D occurs in every sector" go to that industry's own page. The underline on the heading was the only thing saying so, and the box itself did nothing under the pointer, so the box is now the link and answers the way every other card does. The arrow after the heading says where it goes. The sixth box, food, beverage and mining, has no page to go to, so it stays a plain box with nothing to click and nothing that moves. */ a.pp-who{display:block;text-decoration:none;color:inherit;} a.pp-who h3{color:var(--pp-navy);transition:color .35s ease;} a.pp-who h3::after{ content:"\2192"; display:inline-block; margin-left:8px; font-weight:400; color:var(--pp-blue); transition:transform .35s ease; } a.pp-who:hover h3::after{transform:translateX(5px);} @media(prefers-reduced-motion:reduce){ a.pp-who h3,a.pp-who h3::after{transition:none;} } /* ---- A box that holds a link is the link, all of it ---- */ /* Clicking the picture on a profile card should go to the profile, not miss and land on the card. The anchor stays where it is and reaches out to cover the box, which keeps the markup valid: a link inside a link is what breaks a card apart. Anything in the box that goes somewhere different sits above the reach, so it still works. */ /* The article card is the one that cannot simply be an anchor: the byline inside it goes somewhere different. Its picture is already a link, and the reach below covers the body, so between them the whole card is live. */ article.card{cursor:pointer;} article.card .card-link::after{ content:""; position:absolute; inset:0; z-index:3; } article.card .card-byline a{ position:relative; z-index:4; } /* ---- A box you can click, on navy ---- */ /* A wash the colour of a pale sky does nothing against navy, so there the edge picks up the yellow and the ground lifts a little instead. */ a.pp-next, a.pp-personal-card{ transition:border-color .35s ease, background .35s ease; } a.pp-next:hover, a.pp-personal-card:hover{ transform:none; box-shadow:none; border-color:rgba(255,222,89,.45); background:rgba(255,255,255,.08); } /* ---- A box you cannot click ---- */ div.pp-card, div.pp-who, .pp-duo-card, .pp-industry, .pp-focus-card, .perk, .pp-rev-card, .pp-about-sidebar, .pp-locate-map, .pp-table-wrap, .pp-feat-item{ transition:none; } div.pp-card:hover, div.pp-who:hover, .pp-duo-card:hover, .pp-industry:hover, .pp-focus-card:hover, .perk:hover, .pp-rev-card:hover, .pp-about-sidebar:hover, .pp-locate-map:hover, .pp-table-wrap:hover{ transform:none; box-shadow:none; } /* Two of them changed colour under the pointer as well as lifting, so the ground and the edge are held at what they are at rest. There is nothing to click, so nothing should answer. */ div.pp-card:hover, div.pp-who:hover, .pp-duo-card:hover, .pp-focus-card:hover, .pp-rev-card:hover{ background:#fff; border-color:rgba(0,13,64,.1); } .pp-industry{cursor:default;} .pp-industry:hover{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.14); } /* ---- The picture on a profile's article card ---- */ .pp-insight-card{padding:0;} .pp-insight-img{ display:block; aspect-ratio:16/10; overflow:hidden; background:#e9eff8; border-radius:4px 4px 0 0; } .pp-insight-img img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:0; } .pp-insight-meta{margin:22px 24px 10px;} .pp-insight-title{margin:0 24px 14px;} .pp-insight-link{margin:0 24px 24px;} @media (prefers-reduced-motion: reduce){ .pp-pillar,.pp-card,.hub-card,.card,.pp-team-card,.role, .pp-industry,.pp-personal-card,.pp-next,.pp-tool,.pp-insight-card, a.pp-card::before, a.hub-card::before, a.pp-tool::before, a.pp-insight-card::before, article.card::before, .pp-pillar::before, .pp-team-card::before, a.pp-card:hover, a.hub-card:hover, a.pp-tool:hover, a.pp-insight-card:hover, article.card:hover, .pp-pillar:hover, .pp-team-card:hover{transform:none;transition:none;} } /* ---- Two bands of the same colour, one after the other ---- */ /* They put two full bands of padding between them, which on a profile left a long empty stretch between the last article and the closing band. The flush classes are meant to close that, but a page defines them before it defines the colours, and the colour sets padding as a shorthand, so the colour won the tie. Settled here instead. */ .pp-section-flush-bottom{padding-bottom:0;} .pp-section-flush-top{padding-top:40px;} /* ---- Reading an article ---- */ /* An article runs at the same measure as every other page, 1280px less the gutters, and is centred in it along with the block underneath saying who wrote the piece. It sat at 760px for a while, which reads better at 16px, but it was the only thing on the site at that width and the step down from the full width headline above it showed. Consistency won. */ .post-prose, .post-author .container, .post-more .container{ max-width:1280px; margin-left:auto; margin-right:auto; } /* ========================================================================== THE PILLBOX The small rounded label that carries a category on an article and a department on a job. Yellow ground, navy words, and the same geometry wherever it appears. It used to come out white on yellow, which is barely readable. The article hero sets .post-meta a to white for the byline links, and that beats .post-cat on its own, so the pill inherited a colour meant for something else. Naming it here, outside the page layer, keeps the pill its own colours whatever it sits inside. Careers used rectangles at a 5px radius for the same job. They are pills now too, because a small rounded label is what this site uses to say what something is filed under. ========================================================================== */ .pp-pill, .post-cat, .tag{ display:inline-block; font-size:12px; font-weight:700; line-height:1.4; letter-spacing:1.2px; text-transform:uppercase; padding:6px 15px; border:0; border-radius:100px; background:var(--pp-yellow); color:var(--pp-navy); } /* The quiet one. A job carries its department in yellow and everything else beside it in this, so the eye has one thing to land on first. */ .tag:not(.dept){ background:rgba(0,13,64,.07); color:rgba(0,13,64,.68); } .pp-hero .tag:not(.dept){ background:rgba(255,255,255,.16); color:var(--pp-white); } /* A pill you can press goes blue under the pointer, the way every other clickable thing on the site does. It used to hover to exactly what it already was, so nothing happened. */ a.pp-pill, a.post-cat, a.tag{ text-decoration:none; transition:background .25s ease, color .25s ease; } a.pp-pill:hover, a.post-cat:hover, a.tag:hover{ background:var(--pp-blue); color:var(--pp-white); } @media(prefers-reduced-motion:reduce){ a.pp-pill,a.post-cat,a.tag{transition:none;} } /* ---- No widows ---- */ /* A single word left stranded on the last line reads as a mistake, and the browser can prevent it. pretty does exactly that: it looks ahead at the last line and pulls a word back if one would be left on its own. Headings used balance instead, which is a stronger thing. Balance makes every line the same length, and on a heading that is a full sentence in a 1184px column that means two half width lines with the right hand half of both left empty, which reads as copy that has been cut off. A short heading looks the same under either, so pretty is what both get. */ h1,h2,h3,h4,h5,h6, .pp-hero-h1,.pp-h1,.pp-h2,.pp-h3,.pp-h4, .pp-eyebrow,.pp-divider-label,.pp-section-divider-label, blockquote,figcaption, .pp-card-title,.pp-pillar-title,.pp-article-title,.card-body h3{ text-wrap:pretty; } p,li,dd, .pp-prose,.pp-section-intro,.pp-lead{ text-wrap:pretty; } /* ---- Layering behind a hero or a photo band ---- */ /* These sections put a photo or a video behind the words and a navy wash over it, and they did it by pushing both to a negative level so they sat under the text. Safari on a phone does not paint a negative level reliably inside a section that isolates itself, and the wash disappears, which leaves white text sitting on an undarkened photograph and parts of the headline become unreadable. The order is the same, it is just built upwards instead: picture, then wash, then words. */ .pp-hero-video, .pp-parallax-bg{z-index:0;} .pp-hero-video-overlay, .pp-parallax-overlay-navy{z-index:1;} .pp-hero > .pp-inner, .pp-has-parallax > .pp-inner{position:relative;z-index:2;} .pp-pillar::before{z-index:0;} .pp-pillar > *{position:relative;z-index:1;} /* iOS hands a playing video to the system to draw, on a layer of its own, and that layer can end up painted over the top of things that are meant to sit above it. Giving the wash a layer of its own too keeps the two in the right order. */ .pp-hero-video-overlay, .pp-parallax-overlay-navy{ transform:translateZ(0); -webkit-transform:translateZ(0); } /* ---- Google reviews on a small screen ---- */ /* The cards are 420px wide, which is wider than a phone, so the first review was cut off mid sentence with the rest of it somewhere off the side. And a row of text sliding past on its own is hard to read on a phone even when it is moving. So a phone, and anyone with reduce motion turned on, gets a carousel they move themselves: one review at a time, sized to the screen, snapping into place as it is swiped. */ @media(max-width:600px){ .pp-rev-track{animation:none;} } @media(max-width:600px),(prefers-reduced-motion:reduce){ .pp-rev-track-wrap{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; mask-image:none; -webkit-mask-image:none; } .pp-rev-track{padding:0.5rem 1.25rem;gap:1rem;} .pp-rev-card{ flex:0 0 auto; width:calc(100vw - 3.5rem); max-width:420px; scroll-snap-align:center; } /* The second set of four exists only so the loop can join up seamlessly. With nothing looping, they are the same four reviews a second time. */ .pp-rev-card[aria-hidden="true"]{display:none;} } @media(max-width:880px){ .pp-newsletter{padding:60px 24px 52px;} .pp-below-row{grid-template-columns:1fr;gap:36px;} .pp-footer-grid{grid-template-columns:1fr 1fr;gap:36px;} } @media(max-width:560px){ .pp-newsletter-row{flex-direction:column;} .pp-newsletter-btn{padding:16px 30px;justify-content:center;} .pp-trust-marks{gap:10px;} .pp-trust-mark{height:54px;min-width:100px;padding:9px 12px;} .pp-footer-grid{grid-template-columns:1fr;} .pp-footer-legal{flex-direction:column;align-items:flex-start;} } /* =========================================================================== Call to action buttons Several hero and section buttons were plain