/* ============================================================ PEEPAL CONSULTING — DESIGN TOKENS Swap --orange for the exact brand hex; it propagates everywhere. ============================================================ */ :root{ --ink:#000000; --paper:#ffffff; --mist:#fafafa; --orange:#FF6B1A; /* Peepal orange (solid fills) — swap here */ --neon:#FF7A29; /* neon orange — thin accents, underlines, outlines */ --neon-glow:0 0 7px rgba(255,122,41,.55); --orange-soft:rgba(255,122,41,.14); --line-on-dark:rgba(255,255,255,.45); --line-on-dark-faint:rgba(255,255,255,.14); --grey:#9a9a9a; --grey-deep:#6b6b6b; --text-dim:rgba(255,255,255,.62); --display:"Playfair Display",serif; --body:"Geist",system-ui,-apple-system,sans-serif; --mono:"Geist Mono",ui-monospace,monospace; --maxw:1240px; --pad:clamp(20px,5vw,64px); /* ---- Header metrics ------------------------------------------------- * The nav is position:absolute over the hero, so nothing in normal flow * reserves room for it — every hero has to do that itself, and each one * used to carry its own hand-typed guess at how tall the bar is. Seven * different guesses across five files, all of them tuned against a logo * that does not measure what they assumed. * * These two are the bar. --nav-h is derived from them, so a hero asks for * "the header, plus room to breathe" and stays right when either changes. * Every breakpoint below overrides the two inputs and never --nav-h. */ --nav-pad-y:26px; --logo-h:56px; --nav-h:calc(var(--logo-h) + var(--nav-pad-y) * 2); /* Every eyebrow sits this far above its heading — see folds 3-6. */ --eyebrow-gap:18px; /* ---- Mono tracking -------------------------------------------------- * Geist Mono sets the uppercase labels — eyebrows, dates, CTAs, footer * headings, tags, chips, buttons — and it was drawn with wide tracking: * .28em on .eyebrow, down to .02em on a chip, across 99 declarations in * nine stylesheets. * * The client read that as too loose next to the navigation, which is Geist * sans at letter-spacing:normal. Matching the nav exactly would mean zero, * and zero on uppercase mono is cramped, so every value was scaled to 40% * of its drawn width instead — .28em became .112em — which tightens the * labels while keeping the spacing relationships the design intended * between an eyebrow, a date and a chip. * * This multiplies all of them at once, so the ratios hold whatever it is * set to. 1 is the tightened scale as it now stands in the stylesheets; * 2.5 is roughly the original drawing. Editable in the CMS under * Site settings → Typography, which emits it into :root — see * peepal_typography_css() in inc/typography.php. */ --mono-track:1; /* ============================================================ TYPE SCALE Every size below is a token so it can be overridden from the CMS (Appearance → Site settings → Typography, and the per-section size controls). The fallback in each var() is the design's own value, so an untouched site looks exactly as drawn. --type-scale multiplies every rem-based size on the site at once; the role tokens below set one role absolutely. ============================================================ */ --type-scale:1; /* * The role tokens --fs-h1 / --fs-h2 / --fs-h3 / --fs-body / --fs-eyebrow * and the hero's own --fs-hero-h1 / --fs-hero-sub / --fs-hero-eyebrow are * deliberately NOT given a value here. Every rule that uses one carries * the design's own size as the var() fallback, so an untouched site is * pixel-identical; the CMS defines the token only for the sizes an editor * actually changed. */ } *{box-sizing:border-box} /* One knob that resizes every rem-based size on the site. Set from Site settings → Typography. */ html{ scroll-behavior:smooth;font-size:calc(100% * var(--type-scale,1)); /* iOS enlarges text in landscape unless told not to, which breaks any layout tuned in portrait — the type grows but the boxes around it do not. */ -webkit-text-size-adjust:100%;text-size-adjust:100%; } /* Anchor landing point. The nav becomes position:fixed once the page is scrolled, so a browser that scrolls a section's top edge to the top of the window parks that edge behind the bar — the heading you followed the link for is the part that ends up hidden. scroll-margin-top tells the browser to stop short by the height of the bar and a little breathing room, so the section arrives under it. */ [id]{scroll-margin-top:clamp(84px,12vh,120px)} body{ margin:0; font-family:var(--body); font-size:var(--fs-body,1rem); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2{font-family:var(--display);font-weight:700;margin:0;line-height:1.05} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} button{font-family:var(--body);cursor:pointer} .eyebrow{ font-family:var(--mono); font-size:var(--fs-eyebrow,.72rem); letter-spacing:calc(.112em * var(--mono-track, 1)); text-transform:uppercase; color:var(--orange); display:inline-block; } .container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} /* ============================================================ TOP NAV (over hero) ============================================================ */ .nav{ position:absolute;top:0;left:0;right:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:var(--nav-pad-y) var(--pad); } .brand{display:flex;align-items:center;gap:12px;color:#fff;flex:0 0 auto;margin-right:auto;max-width:60%} .brand svg{width:26px;height:26px;flex:0 0 auto} .brand__mark{color:var(--orange)} /* An uploaded logo renders as a .peepal-media figure, which is width:100% by default — cap it here or it stretches across the nav and covers the hero. */ .brand__logo{width:auto;max-width:250px;flex:0 0 auto;overflow:visible} /* * height, not height:auto with a max. * * The uploaded mark is an SVG, and WordPress could not read a size out of it * — it writes the tag as width="1" height="1". Sized automatically against * that, the box measures 0: the figure collapses, .brand collapses with it, * and the bar ends up ~30px shorter than every hero's top padding was tuned * for. That is the headline "climbing too high". The mark itself still paints, * because this figure is overflow:visible — out of a zero-height box, over the * eyebrow below it and off the left edge of the screen. * * An explicit height ends both. The box is --logo-h tall whatever the browser * believes the file's intrinsic size to be, object-fit:contain keeps the * artwork's own proportions inside it, and object-position pins it left so a * mark narrower than the box does not drift to the middle. */ .brand__logo img,.brand__logo .peepal-media__img{ width:auto;height:var(--logo-h);max-width:100%; object-fit:contain;object-position:left center; } .brand .word{font-family:var(--display);font-size:1.28rem;font-weight:700;letter-spacing:.2px} .brand .word b{color:var(--orange);font-weight:700} .mainnav{display:flex;gap:38px;list-style:none;margin:0;padding:0} .mainnav li{position:relative} /* * The accordion's expand button is drawer-only furniture. On desktop the mega * panel opens on hover, so the button has no job — hidden here rather than in * the mobile block so it is also out of the tab order at desktop width. */ .mega-toggle{display:none} .navlink{ color:#fff;font-size:.95rem;font-weight:400;position:relative;padding-bottom:6px;display:inline-block;cursor:pointer; } .navlink::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:100%; background:var(--neon);box-shadow:var(--neon-glow);opacity:0; /* instant, no draw */ } .mainnav li:hover>.navlink::after,.navlink:focus-visible::after{opacity:1} /* Padding, not a bigger glyph: the mark stays 1.5rem and lands where it always did, but the hit area reaches the 44x44 WCAG 2.5.5 asks for. It was 33x26 — under a third of that, on the one control a phone has no way around. The negative margin keeps the right edge flush with the nav's own padding. */ .navtoggle{display:none;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;padding:10px;margin:-10px -10px -10px 0;min-width:44px;min-height:44px} /* ---------- MEGA MENU (primary nav expands vertically on hover) ---------- */ .has-mega{position:relative} .mega{ position:absolute;top:100%;right:0;padding-top:18px; /* padding = hover bridge */ opacity:0;visibility:hidden;transform:translateY(-6px);transform-origin:top; transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:90; } /* Three ways in, because hover is not one of them on a touch screen. A tablet wide enough to keep the desktop bar (over 960px) has no pointer to hover with, so without .open the panels there can be looked at and never opened. ui.js sets it on tap when the device reports (hover:none). */ .has-mega:hover .mega,.has-mega:focus-within .mega,.has-mega.open>.mega{opacity:1;visibility:visible;transform:translateY(0)} .mega-inner{ background:#0a0a0a;border:1px solid rgba(255,255,255,.1); border-radius:0 0 14px 14px;box-shadow:0 34px 70px rgba(0,0,0,.6);padding:20px; } /* generic menu row (Services + link lists) */ .mrow{ display:flex;justify-content:space-between;align-items:center;gap:28px; padding:12px 10px;color:#fff;font-size:1.02rem;border-radius:8px; transition:background .18s,color .18s;white-space:nowrap; } .mrow>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis} .mrow .arw{color:#fff;flex:0 0 auto;transition:transform .2s,color .2s} .mrow:hover,.mrow:focus-visible{background:rgba(255,255,255,.05);color:var(--neon)} .mrow:hover .arw{transform:translateX(4px);color:var(--neon)} .mega-svc .mega-inner{width:max-content;min-width:300px;max-width:min(460px,calc(100vw - 40px))} .mega-ins .mega-inner{width:380px} /* mega divider + hook (shared by Industries pane & Insights) */ .mega-divider{height:1px;background:var(--neon);box-shadow:var(--neon-glow);margin:14px 10px;border:0} .mega-eyebrow{font-family:var(--mono);font-size:.62rem;letter-spacing:calc(.08em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey);padding:0 10px;margin-bottom:8px} .mega-hook{ display:flex;gap:14px;align-items:flex-start;padding:6px 10px 4px;color:#fff; font-family:var(--display);font-size:1.02rem;line-height:1.35;font-weight:500;transition:opacity .2s,color .2s; } .mega-hook .arw{color:#fff;font-family:var(--body);margin-top:2px;transition:transform .2s,color .2s} .mega-hook:hover .arw,.mega-hook:focus-visible .arw{transform:translateX(4px);color:var(--neon)} .mega-hook:hover,.mega-hook:focus-visible{opacity:1;color:var(--neon)} /* Industries two-pane */ /* * 670 rather than 640, and the rail 240 rather than 210 — the same 30px, so * the right-hand pane is exactly the width it always was and only the list of * industries gained room. It needed it: the longest name runs to 171px and the * rail allowed 176px, which fitted until the hover arrow claimed its share and * pushed the last word onto a second line. */ .mega-ind .mega-inner{width:670px;padding:14px} .ind-mega{position:relative;display:flex;min-height:250px} .ind-left{width:240px;flex:0 0 240px;border-right:1px solid rgba(255,255,255,.1);padding-right:10px} .ind-item{ display:flex;justify-content:space-between;align-items:center;gap:10px; padding:10px 12px;color:#fff;font-size:.98rem;border-radius:8px;cursor:pointer;transition:background .16s,color .16s; } /* * Two different jobs used to share one class. `.active` marks which industry * the right-hand pane is showing, and the first item carries it from the * moment the menu opens so the pane is never blank — but it was also what * painted an item orange, so BFSI read as hovered before the pointer had gone * anywhere near it. Highlighting now follows the pointer only: a real hover, * or `.active` once the visitor has actually pointed at the column * (`.is-engaged`, set in ui.js). Same behaviour as the Services panel. */ .ind-item:hover,.ind-item:focus-visible, .ind-mega.is-engaged .ind-item.active{background:rgba(255,255,255,.06);color:var(--neon)} /* "Others" is a plain label — no link, no hover state. */ .ind-others,.ind-others:hover{background:none;color:#fff;cursor:default;pointer-events:none} /* * The arrow is always in the layout, and only its opacity changes. * * It used to be added by the hover rule itself, which meant the item's width * budget shrank at the moment of hovering: the longest name fitted on one line * until you pointed at it, then wrapped, and every industry below it jumped * down the list. Reserving the space costs nothing when it is invisible, and * hovering an item now changes how it looks rather than where things are. */ .ind-item::after{ content:"→";color:var(--neon);font-size:.85rem;flex:0 0 auto; opacity:0;transition:opacity .16s; } .ind-item:hover::after,.ind-item:focus-visible::after, .ind-mega.is-engaged .ind-item.active::after{opacity:1} /* "Others" is a label, not a destination — it has no arrow to reserve. */ .ind-others::after{content:none} /* * The panel's height is set by the left rail — seven industries — not by the * pane on the right, and no pane is that tall. So each pane ran out of content * partway down and left the rest as dead space under the highlight: about 18px * on a four-row pane, 55px on a three-row one. Every industry ended at a * different height inside a panel that is always the same height, which is * what read as the bottom edge wandering from pane to pane. * * Fixed by giving the pane the full height and pinning the highlight to the * foot of it, so the divider and its hook land on the same line whichever * industry is showing. The chips are untouched: they keep their own wrapping, * so a pane's rows and columns are exactly what they were and the slack simply * moves from below the highlight to above the rule, where it reads as the gap * between two blocks rather than as an unfinished panel. */ .ind-right{flex:1;padding:6px 6px 6px 26px;position:relative;display:flex;flex-direction:column} .ind-pane{display:none;animation:fadein .2s ease} .ind-pane.active{display:flex;flex-direction:column;flex:1} /* Pushes the rule — and the eyebrow and hook after it — to the bottom. A pane with no highlight has no divider and nothing to pin, so it is left as is. */ .ind-pane .mega-divider{margin-top:auto} @keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* Up to four rows an editor fills, plus "and more…". Rows run down; chips run across. The list takes the height the pane has going spare and spreads it between the rows it does have, rather than stacking them at the top and leaving the remainder as one hole above the highlight — which is what a panel using fewer than four rows used to look like. Panes still share a height, because the height was never theirs to set: the left-hand industry rail sets it. */ .ind-pane .roles{list-style:none;margin:0 0 2px;padding:0;display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:8px} .ind-pane .roles__row{display:flex;flex-wrap:wrap;gap:8px} .ind-pane .roles__chip{padding:6px 12px;color:rgba(255,255,255,.82);font-size:.8rem;font-family:var(--mono);letter-spacing:calc(.008em * var(--mono-track, 1));border-radius:30px;white-space:nowrap} /* * Same padding as every other chip, or its text hangs left of the column. * Grey, not orange: it is a "there are others" aside, not an action, and in * brand orange it read as the one clickable thing in a list of chips that are * all display-only. */ .ind-pane .roles__row.more .roles__chip{color:var(--grey)} /* ============================================================ FOLD 1 — HERO (black, sized so fold 2 always peeks) ============================================================ */ /* * The hero's vertical rhythm is measured in vh, not pixels. * * It used to be fixed — 120px of head room, 56px under, 34px between form * fields — which on a tall monitor left the logo marquee peeking exactly as * intended, and on a 13" laptop pushed it clean off the bottom of the screen. * min-height alone cannot prevent that: the form is taller than the hero's * min-height on a short screen, so the hero grows to fit it and the marquee * goes with it. * * So every vertical gap in this fold is a clamp with a vh middle value. Tall * screens get the original spacing to the pixel; short ones tighten smoothly, * with the floor set so nothing ever becomes cramped. The floors are what * guarantee the design still holds at the bottom of the range — this is not * a free-scaling layout that collapses on a phone. * * Budget: these clamps give back roughly 130px between a 1100px-tall screen * and a 750px-tall one, which is what the marquee band needs to clear the * fold. * * The clamps set the floor — how short the hero may get. --hero-peek below * sets the ceiling: how much of the next band is allowed to show. Both are * needed. Without the clamps the form overflows a laptop; without the peek a * roomy window shows the whole marquee and the white space beneath it, and * the fold reads as hiked up rather than as a deliberate crop. */ .hero{ background:var(--ink);color:#fff; display:flex;align-items:center; /* * How much of the marquee band shows under the fold, and therefore how * tall the hero is. The band is padding, then the caption, then a 44px * logo rail, so a peek of ~100px puts the fold line roughly halfway down * the logos — the brief is 40-50% of them visible, not the whole band. * * min-height is expressed as the peek rather than as a vh fraction because * the fraction was the bug: 82vh leaves 18vh showing, which is 130px on a * 720px laptop and 230px on a 1280px monitor. One is a sliver of logo, the * other is the entire band plus white space under it. The peek is a fixed * measurement, so the fold lands in the same place on every screen. * * svh, not vh: on the mobile browsers that shrink their chrome on scroll, * vh is the *tall* viewport, so the hero starts taller than the screen and * the peek is not visible at rest — which is the one thing it exists for. */ --hero-peek:100px; min-height:calc(100vh - var(--hero-peek)); min-height:calc(100svh - var(--hero-peek)); /* The top floor clears the header — the nav is absolutely positioned over this fold and stands 108px tall with a full-size logo, so anything less puts the form heading underneath the menu. The short-screen tier at the end of this file shrinks the header first, then lowers this to match. */ /* Named so the form column can subtract them — see .hero .lead below. */ --hero-pad-top:clamp(112px,13vh,120px); --hero-pad-bottom:clamp(26px,4vh,56px); padding:var(--hero-pad-top) 0 var(--hero-pad-bottom); } .hero-grid{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,90px); align-items:center;width:100%; } .hero-copy h1{ font-size:var(--fs-hero-h1,clamp(2.1rem,4.4vw,3.4rem));font-weight:800;letter-spacing:-.01em; } .hero-copy .eyebrow{font-size:var(--fs-hero-eyebrow,var(--fs-eyebrow,.72rem))} .hero-copy .sub{ font-family:var(--display);font-style:italic;font-weight:400; font-size:var(--fs-hero-sub,clamp(1rem,1.9vw,1.22rem));color:rgba(255,255,255,.82); margin-top:clamp(14px,2.6vh,24px);max-width:30ch;line-height:1.4; } /* The phone-only "open the form" button. It ships hidden: everywhere the form fits beside the copy, the form itself is the call to action. See the 640px tier below, which is the only place either of them changes. */ .hero-cta{display:none} .hero-cta__btn{width:100%;justify-content:center} /* Lead-gen form * * The form was written for the dark hero, so its ink was literally #fff. Drop * it on a light band — the About page contact fold — and it renders white text * on white with no way to correct it from the admin. The colours are variables * now, defaulting to exactly the previous values, so the dark hero is * untouched and the Components plugin can repaint the form for a light * section. Field metrics are variables for the same reason. */ .lead{ --peepal-field-fg:#fff; --peepal-field-line:rgba(255,255,255,.22); --peepal-field-hint:rgba(255,255,255,.58); --peepal-field-gap:clamp(20px,3vh,34px); --peepal-field-pad:10px 0; --peepal-field-bg:transparent; --peepal-field-radius:0; background:transparent;border:0;border-radius:0;padding:0; } .lead h2{font-family:var(--display);font-size:var(--fs-h2,clamp(1.7rem,3vw,2.2rem));font-weight:700;color:var(--peepal-field-fg,#fff);margin-bottom:clamp(22px,3.4vh,38px);letter-spacing:-.01em} /* * Four fields, so this gap is the biggest single lever on the hero's height — * it is worth ~48px between a tall screen and a short one. See .hero above. */ .field{position:relative;margin-bottom:var(--peepal-field-gap,clamp(20px,3vh,34px))} .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* a11y only */ .field input,.field select,.field textarea{ width:100%;padding:var(--peepal-field-pad,10px 0);border:0; border-bottom:1px solid var(--peepal-field-line,rgba(255,255,255,.22)); background:var(--peepal-field-bg,transparent);color:var(--peepal-field-fg,#fff); font-family:var(--body);font-size:1.18rem;font-weight:300; border-radius:var(--peepal-field-radius,0);transition:border-color .2s,box-shadow .2s; } .field input::placeholder,.field textarea::placeholder{color:var(--peepal-field-hint,rgba(255,255,255,.58))} /* * The prompt is dim; a chosen answer is not. `.is-empty` is set in * initLeadForm() — see the date field above it for why the state has to come * from JS rather than a selector. Without the second rule a chosen option kept * the hint colour for good, in every engine. */ .field select{color:var(--peepal-field-fg,#fff);-webkit-appearance:none;appearance:none} .field select.is-empty{color:var(--peepal-field-hint,rgba(255,255,255,.58))} .field select option{color:#111} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-bottom-color:var(--neon);box-shadow:0 1px 0 0 var(--neon),0 6px 10px -8px rgba(255,122,41,.6); } .field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:var(--neon)} .field .optional{ position:absolute;right:0;top:14px;font-family:var(--mono);font-size:.7rem;letter-spacing:calc(.096em * var(--mono-track, 1)); text-transform:uppercase;color:var(--grey);pointer-events:none; } .err{display:none;color:var(--orange);font-size:.74rem;margin-top:7px;font-family:var(--body)} .field.invalid .err{display:block} /* A tick added in Peepal → Settings → Forms. It is the one field whose label is the question rather than a caption, so the label comes out of the screen-reader-only box the others keep it in, and the row reads across instead of down. Sized in em so it tracks the form's own type. */ .field--check{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap} .field--check input[type="checkbox"]{ width:1.15em;height:1.15em;flex:0 0 auto;margin:.15em 0 0;padding:0; accent-color:var(--orange);border:0;cursor:pointer; } .field--check label{ position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal; font-size:.95rem;line-height:1.45;color:var(--peepal-field-fg,#fff);cursor:pointer; } .field--check .err{flex:0 0 100%;margin-top:2px} .field--check.invalid input[type="checkbox"]{outline:2px solid var(--orange);outline-offset:2px} /* * Choice groups — "choose one" and "choose several" — and section headings. * * Both groups are the same object: a question, its options, and a note about * whether it has to be answered. They share a shell so they line up with each * other and with the underline fields above them, and differ only in whether * the control is round or square, which is the one thing a visitor reads to * know how many they may pick. * * The legend is styled as the field's own label rather than hidden the way an * underline field's is: there is no placeholder inside a checkbox to carry the * question, so the question has to be visible above the options or the group * arrives with no idea what it is asking. That is what the native * opens. */ .lead, .peepal-form{color-scheme:dark} .field input[type="date"]::-webkit-datetime-edit{color:var(--peepal-field-fg,#fff)} /* * The browser draws the calendar button hard against the input's right edge, * which is exactly where the "Optional" marker sits — the two landed on top of * each other, and the icon was the one that lost. The padding keeps the * browser's own furniture inside the field and clear of the marker; it is * generous enough for the longest of the two words at this size. */ .field input[type="date"], .field input[type="number"]{padding-right:88px} /* * No invert here. `color-scheme: dark` above already makes the browser draw * this button light, and inverting a light icon paints it black again — which * on this fold is an invisible control sitting exactly where somebody would * click to open the calendar. */ .field input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer;opacity:.55;transition:opacity .2s; } .field input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1} /* * An empty date reads as "dd/mm/yyyy" in full-strength white, which looks like * an answer somebody has already given rather than a prompt. There is no * :placeholder-shown for a date field — the browser is showing its own format * hint, not a placeholder — so the empty state is marked in initLeadForm() and * dimmed here, to match every other field's hint. */ .field input[type="date"].is-empty::-webkit-datetime-edit{ color:var(--peepal-field-hint,rgba(255,255,255,.58)); } .btn-primary{ margin-top:16px;padding:17px 34px;border:0;border-radius:4px; background:var(--orange);color:#111;font-family:var(--mono);font-weight:600;font-size:.82rem; letter-spacing:calc(.088em * var(--mono-track, 1));text-transform:uppercase;display:inline-flex;align-items:center;gap:16px; transition:filter .2s,transform .05s; } .btn-primary .arw{font-size:1.05rem;font-family:var(--body)} .btn-primary:hover{filter:brightness(1.06)} .btn-primary:active{transform:translateY(1px)} .lead .success{display:none;color:var(--peepal-field-fg,#fff);font-size:1rem;margin-top:16px;font-family:var(--display)} .lead .success .dot{color:var(--neon)} /* ============================================================ FOLD 2 — LOGO MARQUEE (white) ============================================================ */ .fold2{ /* * Equal top and bottom. The band sat 34/14 and read bottom-cropped, the * logos pushed against the hairline. The top is the half that must not move: * the hero is sized as calc(100svh - var(--hero-peek)), so it is this * padding the peek is measured through, and raising the bottom to meet it * leaves where the fold cuts the logos untouched. */ background:var(--paper);padding:34px 0;border-bottom:1px solid #eee; /* Keep overflowed hover metrics above the section that follows. Without a * section-level stacking order, the later fold paints over the tooltip even * though vertical overflow is visible. */ position:relative;z-index:2;overflow-x:clip;overflow-y:visible; /* * The hover metric tints itself from the section it sits in rather than * assuming a white background. Flip these three on a dark marquee — the * Components plugin sets them automatically when an editor gives the * section a dark background. */ --tip-bg:var(--paper); --tip-fg:var(--ink); --tip-line:rgba(0,0,0,.09); } .fold2 .cap{ text-align:center;font-family:var(--mono);font-size:.68rem;letter-spacing:calc(.104em * var(--mono-track, 1)); text-transform:uppercase;color:var(--grey);margin-bottom:26px; } /* * The track is clipped horizontally but must stay open vertically, or the * hover tooltip is cut off. The edge fades are therefore pseudo-elements * rather than a mask, since a mask clips on both axes. */ .marquee{ position:relative;overflow:visible; /* * No reserved band under the rail. The metric opens outside the rail — * above it, or below it past the fold — but it is only ever visible one * hover at a time, and .fold2 keeps overflow-y visible so it is drawn * outside the section rather than paid for in layout. Kept as a variable, * and kept in the edge-fade height below, so a design that goes back to * holding space for it only changes this line. */ --tip-reserve:0px; padding-bottom:var(--tip-reserve); } .marquee::before,.marquee::after{ content:"";position:absolute;top:0;width:8%;height:calc(100% - var(--tip-reserve));z-index:10;pointer-events:none; } .marquee::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)} .marquee::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)} .track{display:flex;gap:0;width:max-content;animation:scroll var(--peepal-marquee-duration,34s) linear infinite} .marquee:hover .track{animation-play-state:paused} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(calc(-1 * var(--peepal-marquee-shift,50%)))}} .logo{ position:relative;font-family:var(--display);font-weight:600;font-size:1.5rem; color:var(--grey);white-space:nowrap;padding:8px 2px;transition:color .25s;cursor:default; } .logo:hover{color:var(--ink)} /* * Hovering one logo leaves the rest of the wall alone. * * The wall used to drop to .16 so the metric could be read over the logo it * belonged to. The metric has moved off the logo — it opens above or below the * rail now — so there is nothing to clear a backdrop for, and dimming eleven * client marks to answer a question about the twelfth read as the section * switching off. The logos are the proof; they stay lit. */ .logo__mark{display:flex;align-items:center} /* * The metric. Shaped like the site's buttons rather than as a pill, and it * opens clear of the logo instead of sitting on top of it. * * The corner radius and the 1.5px edge are .btn-outline's — the Contact Us * button in the footer — so the callout belongs to the same family as * everything else the visitor can act on. * * The edge is a moving orange gradient, not a hairline. It is painted as two * backgrounds on one box: the fill clipped to the padding box, the gradient * clipped to the border box, with the border itself transparent so the * gradient is what shows through it. Animating background-position slides the * gradient around the edge; the ramp starts and ends on the same orange, so a * full 200% cycle returns to where it began and the loop has no jump. * * The fill still comes from --tip-bg rather than being written as #fff, so a * dark marquee flips with the three variables on .fold2 and the Components * plugin keeps its hook. * * Which side it opens on is decided in ui.js and carried by .tip-below on the * rail — see "which side the metric opens on" there. Above is the default, * because the rail's first job is to peek under the hero, where there is no * room beneath it. */ .logo .tip{ position:absolute;left:50%;bottom:calc(100% + 12px); transform:translateX(-50%) translateY(5px) scale(.98); color:var(--tip-fg,var(--ink)); border:1.5px solid transparent; border-radius:11px; background: linear-gradient(var(--tip-bg,#fff),var(--tip-bg,#fff)) padding-box, linear-gradient(90deg,#ff7a29,#ffc08a,#ff5c00,#ff7a29) border-box; background-size:auto,200% auto; background-position:0 0,0 50%; padding:11px 20px; font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:calc(.02em * var(--mono-track, 1));line-height:1.35;white-space:nowrap; opacity:0;pointer-events:none;z-index:30; transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1); animation:tip-edge 3.2s linear infinite; /* Only travels while it is being read — an animation running behind an invisible box is work nobody sees. */ animation-play-state:paused; } .logo .tip .m{color:var(--orange);font-weight:600} .logo:hover .tip, .logo:focus-visible .tip{ opacity:1;transform:translateX(-50%) translateY(0) scale(1); animation-play-state:running; } /* Past the fold there is room underneath, and a callout that drops from the rail reads better than one that covers the caption above it. */ .marquee.tip-below .logo .tip{ bottom:auto;top:calc(100% + 12px); transform:translateX(-50%) translateY(-5px) scale(.98); } .marquee.tip-below .logo:hover .tip, .marquee.tip-below .logo:focus-visible .tip{transform:translateX(-50%) translateY(0) scale(1)} @keyframes tip-edge{ from{background-position:0 0,0 50%} to{background-position:0 0,200% 50%} } /* * No callout on touch. * * It is hover furniture with no gesture behind it on a phone — and worse than * absent, because :hover latches after a tap on most touch browsers, so the * card that was tapped keeps a panel open over the wall until something else * is tapped. The metric is a pointer nicety; the logos are the point, and on a * phone they are all of it. */ @media(hover:none){ .logo .tip{display:none} } /* ============================================================ FOLD 3 — WHO WE ARE (#fafafa) ============================================================ */ .fold3{background:var(--mist);padding:clamp(48px,7vw,80px) 0} .fold3 .eyebrow{margin-bottom:var(--eyebrow-gap)} .brick{ margin:0; font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3.2vw,2.6rem); line-height:1.24;max-width:24ch;letter-spacing:-.005em; } .brick .val{color:var(--orange)} .who-lead{max-width:58ch;margin-top:26px;color:#333;font-size:var(--fs-lead,1rem);line-height:1.6} /* One panel divided by hairlines, rather than three outlined cards: the borders carried more weight than the numbers inside them and fought the orange words in the heading directly above. White on the fold's near-white (--mist) reads as a raised sheet, and leaves the orange for the figures — which are the only thing here worth shouting. */ .stats{ display:grid;grid-template-columns:repeat(3,1fr);gap:0; /* One row for the figures, one for the labels — see .stat below. */ grid-template-rows:auto auto; margin-top:40px;max-width:900px; background:var(--paper);border:1px solid #ececec;border-radius:18px;overflow:hidden; } /* Each figure takes its two rows from the strip rather than sizing them itself, so a label that wraps to three lines cannot shove its own number out of line with the others. The figures then sit on the shared bottom edge of the first row, which keeps them on one baseline even where a value like "4 Weeks" runs to a second line. */ .stat{ position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid; padding:clamp(24px,3vw,34px) clamp(18px,2.4vw,30px); border-left:1px solid #ececec; transition:background .35s ease; } .stat:first-child{border-left:0} .stat:hover{background:rgba(255,122,41,.05)} /* A tick draws across the top of the column under the cursor. */ .stat::after{ content:"";position:absolute;top:0;left:0;width:0;height:2px; background:var(--neon);box-shadow:var(--neon-glow); transition:width .45s cubic-bezier(.22,.61,.36,1); } .stat:hover::after{width:100%} .stat .num{ align-self:end; color:var(--orange);font-family:var(--display);font-weight:800; font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.05;letter-spacing:-.015em; } /* "%" and "+" ride high — see peepal_stat_value(). */ .stat .num sup{font-size:.5em;font-weight:700;vertical-align:super;line-height:0;margin-left:1px} .stat .lbl{ font-family:var(--mono);font-size:.66rem;letter-spacing:calc(.064em * var(--mono-track, 1));text-transform:uppercase; color:var(--grey-deep);margin-top:12px;line-height:1.5;transition:color .35s ease; } .stat:hover .lbl{color:var(--ink)} /* The figures arrive one after another when the panel scrolls into view. .is-anim is added by ui.js, so with no JavaScript they are simply there. */ .stats.is-anim .stat{opacity:0;transform:translateY(16px)} .stats.is-anim.is-in .stat{ opacity:1;transform:none; transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1),background .35s ease; } .stats.is-anim.is-in .stat:nth-child(2){transition-delay:.13s} .stats.is-anim.is-in .stat:nth-child(3){transition-delay:.26s} /* ============================================================ FOLD 4 — OUR SERVICES (stacked open sections, scroll-through) ============================================================ */ .fold4{background:var(--paper);padding:clamp(56px,8vw,92px) 0 0} .fold4 .head{margin-bottom:10px} /* Same eyebrow→heading rhythm as .fold3; --head-gap is set from the CMS. */ .fold4 .head .eyebrow{margin-bottom:var(--head-gap,var(--eyebrow-gap))} .fold4 h2{font-size:var(--fs-h2,clamp(2rem,4.4vw,3rem));font-weight:700} .svc-list{margin-top:26px} .svc{ position:relative;border-top:1px solid #ececec; background:var(--paper);color:var(--ink); transition:background .45s ease,color .45s ease;cursor:pointer;overflow:hidden; } .svc:last-child{border-bottom:1px solid #ececec} .svc:hover{background:var(--ink);color:#fff} /* hover overlay → black */ .svc-inner{ max-width:var(--maxw);margin:0 auto;padding:clamp(38px,5.5vw,64px) var(--pad); display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,60px);align-items:center; } /* * The illustration column is as tall as the card, not as tall as the picture. * It used to be neither: the row was centre-aligned, so the box shrank to the * image's own height, and the image itself arrived pre-cropped to 2:1 — which * is what was cutting the artwork off. The box now stretches to the full row * and the picture is fitted inside it whole (`contain`), so nothing is lost * whatever shape the editor uploads. */ .svc-illus{ width:100%;align-self:stretch;display:flex;align-items:center;justify-content:center; /* The picture no longer carries its own intrinsic height (it is fitted to the box), so the box needs a floor or a card with two lines of copy would squash it to nothing. */ min-height:clamp(180px,22vw,320px); } .svc-illus svg{width:100%;height:auto;display:block} .svc-illus .peepal-media{height:100%;display:flex;align-items:center} .svc-illus__img, .svc-illus .peepal-media__img{ width:100%;height:100%;max-height:100%; object-fit:var(--peepal-fit,contain);object-position:var(--peepal-pos,center); } .svc-illus svg *{stroke:var(--ink);transition:stroke .45s ease} .svc:hover .svc-illus svg *{stroke:var(--neon)} .svc:hover .svc-illus svg{filter:drop-shadow(var(--neon-glow))} .svc .s-idx{font-family:var(--mono);font-size:.74rem;letter-spacing:calc(.088em * var(--mono-track, 1));color:var(--neon);margin-bottom:12px;display:block} .svc h3{font-family:var(--display);font-size:var(--fs-svc-title,clamp(1.9rem,4vw,2.9rem));font-weight:700;margin:0 0 14px;line-height:1.04} .svc .s-body{font-size:var(--fs-svc-body,1.02rem);line-height:1.6;color:#555;max-width:46ch;transition:color .45s} .svc:hover .s-body{color:rgba(255,255,255,.82)} /* The card's CTA reads as the card's affordance, so it is on screen at all times — it used to fade in on hover, which left it invisible on touch, where there is no hover at all. Hover now only brightens it. */ .svc .s-cta{margin-top:20px;font-family:var(--mono);font-size:var(--fs-svc-cta,.72rem);letter-spacing:calc(.064em * var(--mono-track, 1));text-transform:uppercase;color:var(--neon);opacity:.9;transition:opacity .4s} .svc:hover .s-cta,.svc:focus-visible .s-cta{opacity:1} /* Right-edge Get in Touch rail (fixed) */ .rail{ position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:60; background:var(--orange);color:#fff;border:0;border-radius:12px 0 0 12px; display:flex;align-items:center;gap:0;padding:0;overflow:hidden; box-shadow:-6px 0 24px rgba(0,0,0,.18);transition:padding .3s; } .rail .r-icon{padding:16px 14px;font-size:1.1rem} .rail .r-text{ writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--mono);font-size:.74rem;letter-spacing:calc(.088em * var(--mono-track, 1));text-transform:uppercase; max-width:0;opacity:0;transition:max-width .35s ease,opacity .3s ease,padding .3s;padding:0;white-space:nowrap; } .rail:hover .r-text{max-width:40px;opacity:1;padding:18px 4px 18px 0} /* ============================================================ FOLD 5 — TESTIMONIALS (#fafafa, masonry) ============================================================ */ .fold5{background:var(--mist);padding:clamp(64px,10vw,120px) 0} .fold5 .head{margin-bottom:44px} .fold5 .eyebrow{margin-bottom:var(--eyebrow-gap)} .fold5 h2{font-size:var(--fs-h2,clamp(2rem,4.4vw,3rem));font-weight:700;margin-top:0} /* The columns are dealt in PHP (see peepal_testimonials_columns): a portrait video sits in the column the editor picked, and the quotes are balanced around it so no column ends hundreds of pixels short of the others — that much bare section background reads as the rest of the section being dimmed behind the video, which is what it was being reported as. */ .masonry{display:flex;gap:22px;align-items:flex-start} /* `gap:inherit` rather than a repeat of the value, so the section's Gap control — which is compiled onto .peepal-items — moves both axes together. The cards' own margin is for the narrow-screen fallback below, where the columns dissolve and the browser flows them itself. */ .masonry__col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:inherit} .masonry__col>.tcard{margin-bottom:0} .tcard{ background:var(--paper);border-radius:16px;padding:26px;margin:0 0 22px; break-inside:avoid;border:1px solid #eee; } .tcard.quote p{font-family:var(--display);font-size:1.12rem;line-height:1.5;font-style:italic;margin:0 0 18px} .tcard .who{font-family:var(--mono);font-size:.72rem;letter-spacing:calc(.04em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep)} .tcard .who b{color:var(--ink);display:block;font-size:.82rem;letter-spacing:0;text-transform:none;font-family:var(--body);margin-bottom:2px} /* * The frame inside this card is taller than the card and overflows top and * bottom (see the crop rule below) — on the homepage's portrait clip, by 77px * at each end. overflow:hidden is the only thing cropping it. * * A desktop browser honours that. A mobile one often does not: the player is * an iframe on its own compositor layer, and a composited descendant is * routinely painted without its ancestor's overflow clip applied — the same * gap on every mobile engine, which is why this was reported on all of them * and reproduces on none of the desktop ones. What spills is an opaque player * rectangle across the full width of the card, over the quote cards above and * below it: "the rest of the page greys out around the video". * * contain:paint and overflow:hidden are not enough for cross-origin iframes * on mobile compositors. The fix is structural: the oversized height and the * centering transform are applied to .peepal-video (a regular div), not to * the iframe. The iframe fills its parent at 100%, so its compositor layer * never extends beyond the card. clip-path:inset(0) on the card provides a * hardware-backed clip that mobile WebKit/Blink honour even for composited * descendants — it creates an actual clip in the compositor tree rather than * asking the compositor to respect a CSS overflow it routinely ignores. */ .tcard.video{padding:0;overflow:hidden;contain:paint;position:relative;cursor:pointer;clip-path:inset(0);-webkit-clip-path:inset(0);isolation:isolate} .tcard.video .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#1a1a1a,#333);position:relative;display:flex;align-items:center;justify-content:center} .tcard.video .play{width:56px;height:56px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center} .tcard.video .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px} .tcard.video .dur{position:absolute;bottom:12px;right:12px;font-family:var(--mono);font-size:.7rem;color:#fff;background:rgba(0,0,0,.6);padding:3px 8px;border-radius:6px} .tcard.video .vmeta{padding:18px 22px} .tcard.video .vmeta .who{color:var(--grey-deep)} /* A clip taller than the card keeps its own shape and overflows top and bottom, cropped by the card's clip-path — see peepal_video_ratio_cap(). --tcard-video-crop is the frame's height as a share of the card's, set per card in PHP; without it the frame fills the card exactly as before. IMPORTANT: the oversizing is on .peepal-video (a regular div), not on the iframe. The iframe fills .peepal-video at inset:0, so its compositor layer is exactly the size of .peepal-video and never bleeds past the card's clip on any platform. The card's clip-path:inset(0) crops .peepal-video. */ .tcard.video .peepal-video{ height:var(--tcard-video-crop,100%);position:absolute;top:50%;left:0;width:100%;transform:translateY(-50%); } /* Override the component default: inside a tcard the .peepal-video is already absolutely positioned and sized by --tcard-video-crop, so the aspect-ratio the component sets would fight the explicit height. */ .tcard.video .peepal-video{aspect-ratio:auto} /* The embed slot and iframe/video fill .peepal-video edge-to-edge. No oversizing, no transform — they stay inside their parent's box. */ .tcard.video .peepal-embed{position:absolute;inset:0} .tcard.video .peepal-video>iframe, .tcard.video .peepal-video>video{position:absolute;inset:0;width:100%;height:100%} /* ============================================================ FOLD 6 — INSIGHTS (black carousel) ============================================================ */ .fold6{background:var(--ink);color:#fff;padding:clamp(48px,6.5vw,80px) 0;overflow:hidden} .fold6 .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;margin-bottom:30px} .fold6 .eyebrow{margin-bottom:var(--eyebrow-gap)} .fold6 h2{color:#fff;font-size:var(--fs-h2,clamp(2rem,4.4vw,3rem));font-weight:700;margin-top:0} .fold6 .arrows{display:flex;gap:10px} .fold6 .arrows button{width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid var(--line-on-dark);color:#fff;font-size:1.1rem;transition:background .2s,color .2s,box-shadow .2s} .fold6 .arrows button:hover{background:var(--orange);border-color:var(--neon);box-shadow:var(--neon-glow)} .itrack{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:none} .itrack::-webkit-scrollbar{display:none} .icard{ flex:0 0 420px;scroll-snap-align:start;background:var(--paper);color:var(--ink); border-radius:16px;overflow:hidden;display:flex;flex-direction:column; transition:transform .3s; } .icard:hover{transform:translateY(-6px)} .icard .cimg{aspect-ratio:16/8;width:100%;background:var(--mist);border-bottom:1px solid #eee;display:block} /* * :not() past the node, the same guard components.css uses on * .peepal-scene. * * `.icard .cimg svg` is (0,2,1) and the rule that is meant to keep the shared * gradient svg inert — `.peepal-scene > .peepal-scene__defs`, with * width:0;height:0 — is (0,2,0). This one wins, so the node that is supposed * to occupy nothing was being stretched to 100%/100% of the card: measured at * 390x780, absolutely positioned at left:var(--pad), right edge 410 against a * 390 viewport. * * That is where the page's 20px of phantom horizontal overflow came from — 18 * at 360, 20 at 390, 38 at 768, in Chromium, Gecko and WebKit alike. It never * scrolled or painted, because html/body carry overflow-x:clip, which is * exactly the problem: the safety net was hiding it rather than it not * existing. scrollWidth still reported it, and on an engine that sizes the * layout viewport to the content that is enough to shrink the page. */ .icard .cimg svg:not(.peepal-scene__defs){width:100%;height:100%;display:block} .icard .cimg .line{stroke:#242424;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .icard .cimg .acc{stroke:var(--neon);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .icard .cimg .dot{fill:#242424;stroke:none} .icard .cbody{padding:22px;display:flex;flex-direction:column;gap:14px;flex:1} /* * The chips are printed with no whitespace between them, so without a gap here * they touch — which is what they did in the article hero, where this wrapper * had no layout of its own and fell back to display:block. * * 10px rather than the 14px that separates this group from the read time * beside it, so the two chips still read as one set rather than as three * evenly spaced items. */ .tags{display:flex;gap:10px;flex-wrap:wrap;align-items:center} /* Cards run tighter: the chip row shares a 260px column with the headline. */ .icard .tags{display:flex;gap:8px;flex-wrap:wrap} /* inline-flex + line-height:1 so the chip box hugs the label evenly — with the default line-height the mono caps sat off-centre and the pill looked cramped. */ .tag{ font-family:var(--mono);font-size:.64rem;letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase; display:inline-flex;align-items:center;line-height:1;padding:7px 12px;border-radius:6px; } .tag.ind{background:var(--ink);color:#fff} .tag.top{background:var(--orange-soft);color:var(--orange)} .icard h3{font-family:var(--display);font-size:var(--fs-h3,1.35rem);font-weight:700;line-height:1.24;margin:0} .icard .ctype{margin-top:auto;font-family:var(--mono);font-size:.68rem;letter-spacing:calc(.056em * var(--mono-track, 1));text-transform:uppercase;color:var(--grey-deep)} /* ============================================================ FOLD 7 — FOOTER (black) ============================================================ */ .footer{background:var(--ink);color:rgba(255,255,255,.9);padding:clamp(56px,8vw,96px) 0 34px;border-top:1px solid rgba(255,255,255,.18)} .f-grid{display:grid;grid-template-columns:1.2fr 1.6fr 1.3fr;gap:clamp(28px,5vw,64px)} .f-brand h2{color:#fff;font-size:var(--fs-h2,1.8rem);font-weight:700;margin-bottom:14px} .f-brand p{color:var(--text-dim);font-size:.92rem;line-height:1.6;max-width:30ch;margin:0 0 24px} .btn-outline{ display:inline-block;padding:13px 26px;border:1.5px solid var(--neon);border-radius:11px; background:transparent;color:#fff;font-weight:500;font-size:.95rem; transition:background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease,transform .25s ease; } .btn-outline:hover,.btn-outline:focus-visible{ background:var(--orange);border-color:var(--orange);color:#fff; transform:translateY(-2px);box-shadow:0 10px 22px -10px rgba(255,122,41,.85),var(--neon-glow); } .btn-outline:active{transform:translateY(0);box-shadow:var(--neon-glow)} .f-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .f-col h4{font-family:var(--mono);font-size:.74rem;letter-spacing:calc(.072em * var(--mono-track, 1));text-transform:uppercase;color:#fff;margin:0 0 16px;font-weight:500;position:relative;display:inline-block;padding-bottom:5px;cursor:default} .f-col h4::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--neon);box-shadow:var(--neon-glow);transition:width .28s ease} .f-col h4:hover::after{width:100%} .f-col ul{list-style:none;padding:0;margin:0} .f-col li{margin-bottom:11px} /* Footer links measured 30x19 on a phone. The list is the site map, so these rows get real height rather than a tighter line of text. Applied by pointer type, not width: a touch laptop wants it too. */ @media(hover:none){ .f-col li{margin-bottom:4px} .f-col a,.f-cols .f-sub a{display:block;padding:9px 0;min-height:44px} } .f-col a,.f-cols .f-sub a{color:rgba(255,255,255,.72);font-size:.9rem} /* * Dim the rest of the column while one link is hovered. The column heading is * deliberately left alone — it labels the group rather than belonging to the * set being chosen between, so it holds still while the links resolve. */ .f-col a,.f-cols .f-sub a{transition:color .22s ease,opacity .22s ease} .f-col:hover a,.f-sub:hover a{opacity:.35} .f-col a:hover,.f-sub a:hover{opacity:1;color:#fff} .f-right .mapwrap{border-radius:14px;overflow:hidden;border:1px solid var(--line-on-dark-faint);margin-bottom:24px;background:#101010} .f-right .mapwrap svg,.f-right .mapwrap iframe{width:100%;height:170px;display:block;border:0} .f-news h4{font-family:var(--display);font-size:1.02rem;font-weight:600;color:#fff;margin:0 0 14px;letter-spacing:0;text-transform:none;line-height:1.35} .f-news .nrow{display:flex;gap:12px;align-items:center} .f-news input{ flex:1;padding:11px 2px;border:0;border-bottom:1px solid rgba(255,122,41,.5); background:transparent;color:#fff;font-size:.92rem;font-family:var(--body); transition:border-color .25s,box-shadow .25s;border-radius:0; } .f-news input:focus{outline:none;border-bottom-color:var(--neon);box-shadow:0 6px 8px -6px rgba(255,122,41,.5)} .f-news input::placeholder{color:rgba(255,255,255,.38)} .f-news button{padding:13px 4px;min-height:44px;border:0;background:transparent;color:var(--neon);font-weight:600;font-size:.8rem;font-family:var(--mono);letter-spacing:calc(.048em * var(--mono-track, 1));text-transform:uppercase} .f-news button:hover{text-shadow:var(--neon-glow)} .f-bottom{border-top:1px solid var(--line-on-dark-faint);margin-top:56px;padding-top:28px;display:flex;flex-direction:column;align-items:center;gap:18px} /* The glyph stays 20px; the tap area does not. Measured at 20x25, these were the smallest targets on the site — four of them, side by side, which is exactly the arrangement that produces mis-taps. The negative margin absorbs the padding so the row looks unchanged. */ .socials{display:flex;gap:8px;margin:0 -12px} .socials a{color:var(--grey);transition:color .2s;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px} .socials a:hover{color:var(--orange)} .socials svg{width:20px;height:20px} /* align-items:center on .f-bottom centres the box, not the text inside it — which looks centred only while the line fits. On a phone this wraps to two lines and they set ragged-left under a centred "Privacy Policy". */ .copyright{font-family:var(--mono);font-size:.72rem;letter-spacing:calc(.04em * var(--mono-track, 1));color:var(--grey);text-align:center} /* ============================================================ RESPONSIVE ============================================================ */ @media(max-width:900px){ /* Mobile sizes fall back to the desktop token when the CMS leaves the mobile field empty, so one field is enough for most edits. */ .hero-copy h1{font-size:var(--fs-hero-h1-m,var(--fs-hero-h1,clamp(2.1rem,4.4vw,3.4rem)))} .hero-copy .sub{font-size:var(--fs-hero-sub-m,var(--fs-hero-sub,clamp(1rem,1.9vw,1.22rem)))} .hero-grid{grid-template-columns:1fr} .lead{order:2} /* * The hero keeps its fold on a phone too. * * This used to be min-height:0, on the reasoning that "stacked, the hero is * taller than any phone screen no matter how tight the spacing". That was * true when the enquiry form was stacked underneath the headline. It is not * any more: below 640 the form is swapped for the single Get in Touch * button (see the block near the end of this file), which took roughly * three hundred pixels out of the fold. The hero then collapsed to its * content — measured 551px against an 844px screen — and the whole logo * band sat above the fold rather than peeking under it: 100% of the band * showing where the design asks for 40-50%. * * So the same mechanism the wider screens use comes back, with its own * peek: the band is ~129px tall here, and 64px of it under the fold is a * little under half, which is the proportion the design asks for and reads * as "there is more below" rather than as a finished section. */ .hero{ min-height:calc(100vh - var(--hero-peek)); min-height:calc(100svh - var(--hero-peek)); --hero-peek:64px; padding:120px 0 56px; } .hero-copy .sub{margin-top:24px} .lead h2{margin-bottom:38px} .field{margin-bottom:34px} .f-grid{grid-template-columns:1fr} .masonry{display:block;columns:2;column-gap:22px} .masonry__col{display:contents} .masonry__col>.tcard{margin-bottom:22px} .rail{display:none} .svc-inner{grid-template-columns:1fr;gap:22px} .svc-illus{max-width:420px} } @media(max-width:640px){ /* * Trade the open form for the button that opens it. * * Stacked, the five fields sit between the headline and the rest of the * page — the enquiry is asked before the page has said why anyone would * make one, and the first screenful of the site is an empty form. The * button puts the same form one tap away and gives the fold back to the * pitch. The dialog it opens is the one the rail and the footer CTA * already use, so there is no second form to keep in step with this one. */ .hero .lead{display:none} /* No margin of its own: the grid's 32px row gap already separates it from the standfirst, and the button carries 16px above it. */ .hero-cta{display:block;order:2} .mainnav{display:none} :root{--logo-h:44px} .brand__logo{max-width:185px} .navtoggle{display:block} /* Stacked, so the hairline moves to the top edge of each figure. */ .stats{grid-template-columns:1fr;max-width:none;grid-template-rows:none} .stat{border-left:0;border-top:1px solid #ececec;grid-row:auto;grid-template-rows:auto auto} .stat:first-child{border-top:0} .masonry{display:block;columns:1} .masonry__col{display:contents} .masonry__col>.tcard{margin-bottom:22px} .f-cols{grid-template-columns:1fr 1fr} .icard{flex:0 0 300px} } @media(prefers-reduced-motion:reduce){ .track{animation:none} /* The gradient edge holds still; the orange is the point, not the travel. */ .logo .tip{animation:none} .stat,.stat::after,.stats.is-anim.is-in .stat{transition:none} .stats.is-anim .stat{opacity:1;transform:none} *{scroll-behavior:auto} } /* ========================================================================= PLAIN PAGES (Careers, search, 404 — anything with no hero of its own) The nav is drawn white-on-transparent because it sits over the homepage's black hero. A page that opens on white therefore rendered no header at all: white text on white, only the logo's orange mark showing. The feed and article pages already answer this with a solid bar — these now do too. ========================================================================= */ .plain-page .nav{ position:sticky;background:#000;border-bottom:1px solid rgba(255,255,255,.08); } /* The deep top padding existed to clear a nav that floated over the page. The bar takes up its own room now, so that gap is just a gap. */ .plain-page .peepal-page__header{padding-top:clamp(48px,6vw,80px)} .plain-page .peepal-main{padding-top:clamp(40px,5vw,64px)} /* ========================================================================= INLINE SVG LOGO An uploaded logo is normally an , which CSS cannot see inside. When the editor asks for the logo to take a colour, the SVG is printed into the page instead and tinted here — so one file is white on the dark header and black wherever the header is light. ========================================================================= */ /* The height is set explicitly, not left to auto: an inline SVG carrying only a viewBox has no intrinsic size, and inside a flex wrapper `height:auto` collapses it to nothing. Width follows from the viewBox, so the drawing keeps its proportions. */ .peepal-svg{display:inline-flex;align-items:center;line-height:0} .peepal-svg svg{display:block;height:44px;width:auto;max-width:100%} /* currentColor comes from the nav (or from an inline style, for a fixed colour). !important because a logo exported from Illustrator usually carries its fills as inline styles, which a class alone cannot beat. Shapes drawn as outlines keep fill:none, or they would fill in solid. */ .peepal-svg--tint svg :not([fill="none"]){fill:currentColor!important} .peepal-svg--tint svg [stroke]:not([stroke="none"]){stroke:currentColor!important} /* Match the heights the logo already uses. */ .brand__logo.peepal-svg svg{height:var(--logo-h)} .f-brand__logo.peepal-svg svg{height:44px} /* ============================================================ SHORT VIEWPORTS — keep the logo marquee above the fold ============================================================ The client's requirement is that the marquee band is visible without scrolling on every screen. On a tall monitor the hero's own clamps already leave room; below roughly 900px of viewport height the margin thins to a couple of dozen pixels, which is not enough to survive a longer headline or a caption that wraps. This tier restores real headroom across the laptop range — a 1440x900 Mac lands near 790px of viewport once browser chrome is taken off, so this is the band most people actually see the site in. These rules buy that room back, in the order that costs the design least: 1. The header shrinks. It is 108px tall with a full-size logo and it is pure margin — the cheapest 35px on the page. 2. The hero's top padding follows it down, since its only job is to clear that header. 3. The form tightens: less air between fields, shorter inputs. 4. The marquee band's own padding tightens. Type sizes are deliberately left alone. Shrinking the headline to win vertical space is what makes a compressed layout look broken rather than compact — and the headline is not the column that overflows, the form is. ============================================================ */ @media (max-height:900px) and (min-width:901px){ /* 1 — header */ :root{--nav-pad-y:14px;--logo-h:42px} /* * 2 — hero shell. * * The peek comes down with the band's own padding (tightened in 4 below), * so the fold still lands mid-logo rather than under it. It is NOT set to * 0: letting the hero collapse to its content is what left the whole band * plus empty white showing on a laptop, and made the fold look hiked up. * * The top floor stays close to the tall-screen value even though the * header shrank to ~72px here. The gap between nav and headline is the * first thing that reads as cramped on a small window, and the room is * cheaper to find in the form below than above the headline. */ .hero{ --hero-peek:76px; --hero-pad-top:clamp(96px,11vh,112px); --hero-pad-bottom:clamp(18px,2.6vh,34px); padding:var(--hero-pad-top) 0 var(--hero-pad-bottom); } /* 3 — the form, which is the column that actually overflows */ .lead h2{margin-bottom:clamp(14px,2.2vh,24px)} .field{margin-bottom:clamp(15px,2.2vh,24px)} .field input,.field select,.field textarea{padding:7px 0;font-size:1.06rem} .field .optional{top:11px} /* 4 — the marquee band itself */ .fold2{padding:20px 0} .fold2 .cap{margin-bottom:14px} } /* Very short — small laptop windows. Still desktop-layout only. */ @media (max-height:660px) and (min-width:901px){ .hero{--hero-peek:64px;--hero-pad-top:clamp(84px,10vh,96px);--hero-pad-bottom:14px;padding:var(--hero-pad-top) 0 var(--hero-pad-bottom)} .field{margin-bottom:13px} .lead h2{margin-bottom:12px} .fold2{padding:14px 0} .fold2 .cap{margin-bottom:10px} } /* ============================================================ LANDING-PAGE HERO FORM — scrolls rather than pushing the fold down ============================================================ Resource landing pages keep the form inside their viewport-height pitch column. The homepage form deliberately does not use this cap: its hero grows to show every field and the page itself remains the only scroller. Bounded on .lead rather than on .hero on purpose: a max-height on the hero would clip the headline too, and the headline is not the part that grows. Desktop only. Below 901px the grid stacks, there is no fixed height to scroll within, and a scrolling panel inside a page that already scrolls is two scrollbars arguing — the phone layout lets the hero run long instead. */ @media (min-width: 901px) { /* * The eBook / webinar / podcast heroes are min-height:100vh and carry the * same form, so a long one runs past the bottom of the screen there too — * no fold rule to break, but the submit button still ends up somewhere the * visitor has to go looking for. They have no peek and their own padding, * declared here so the one calculation below serves both. */ .lp-hero { --hero-pad-top: 130px; --hero-pad-bottom: 70px; } /* * The landing heroes do not: the pitch — eyebrow, headline, standfirst — * sits above the form in the same column, and capping the form to the * whole column ignores it. Measured at 1280x700 that left the eBook hero * 936px tall in a 700px window, which is the overflow this block exists * to stop, just moved up one element. * * So the column takes the height and the form is the part of it that * gives: whatever the pitch needs, the form gets the rest and scrolls * inside it. min-height:0 because a flex item refuses to shrink below its * content otherwise, which is what would put the overflow back. */ .lp-hero .lp-pitch { display: flex; flex-direction: column; min-height: 0; max-height: calc(100vh - var(--hero-pad-top) - var(--hero-pad-bottom)); max-height: calc(100svh - var(--hero-pad-top) - var(--hero-pad-bottom)); } .lp-hero .lead { flex: 1 1 auto; min-height: 0; } .lp-hero .lead { overflow-y: auto; /* Reserve the gutter always, so gaining a scrollbar does not shift the fields left the moment a field is added. */ scrollbar-gutter: stable; /* * Deliberately NOT overscroll-behavior:contain. * * Containment stops the wheel chaining out of the form, so a visitor * whose pointer happens to be over the right-hand column reaches the * end of the fields and then the page refuses to move. From their * seat the hero is frozen, and the way out — move the mouse onto the * headline — is not something anybody thinks to try. Chaining is the * behaviour a capped column wants: scroll the form, then the page. */ /* Clear of the scrollbar, and of the focus ring on the last field. */ padding-right: 6px; } /* * The scrollbar has to be permanently visible, not an overlay. * * This is what made a capped form read as simply cut off. macOS hides * overlay scrollbars until something is already moving, so the column * showed a row of fields ending in mid-air with no indication that the * rest of them — and the submit button — were one scroll away. * * Styling ::-webkit-scrollbar is what opts a scroller out of overlay * behaviour in Chromium and Safari and gives it a classic, always-drawn * bar. That only holds while the standard scrollbar-width/scrollbar-color * are absent: Chromium honours those in preference and ignores every * ::-webkit-scrollbar rule the moment it sees them, which put the overlay * bar straight back. So they are scoped to Firefox, which is the only * engine that needs them and the one engine with no webkit pseudos. */ .lp-hero .lead::-webkit-scrollbar { width: 8px; } .lp-hero .lead::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .34); border-radius: 4px; } .lp-hero .lead::-webkit-scrollbar-thumb:hover { background: var(--neon); } /* The track is the other half of the affordance: a rail the eye can see at rest tells the visitor there is travel here before they touch it. */ .lp-hero .lead::-webkit-scrollbar-track { background: rgba(255, 255, 255, .08); border-radius: 4px; } @supports (-moz-appearance: none) { .lp-hero .lead { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .34) rgba(255, 255, 255, .08); } } /* * A visible edge, because the scrollbar is not one. * * macOS hides overlay scrollbars until something is actually scrolling, so * a form capped at the fold looks simply cut off — the fields below it are * reachable and there is nothing on screen saying so. The bottom of the * column fades while there is more under it, and stops fading at the end, * which is the whole affordance. * * A mask rather than a gradient overlay: the column scrolls, and anything * absolutely positioned inside it scrolls away with the content. */ .lp-hero .lead.is-scrollable { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent 100%); } .lp-hero .lead.is-scrollable.is-at-end { -webkit-mask-image: none; mask-image: none; } } /* ============================================================ LANDING-PAGE FORMS — one page scrollbar on every screen ============================================================ The desktop rule above historically capped the form column and introduced a second, nested scrollbar on shorter laptop viewports. Let the hero grow with its content instead: the document remains the only scroll container, every field stays visible in the natural reading flow, and the behaviour is now identical across desktop, tablet and phone sizes. These declarations intentionally override the legacy cap while keeping its rules harmless for older cached markup. */ .lp-hero .lp-pitch{ display:block; min-height:auto; max-height:none; } .lp-hero .lead, .lp-hero .lead.is-scrollable, .lp-hero .lead.is-scrollable.is-at-end{ min-height:auto; max-height:none; overflow:visible; scrollbar-gutter:auto; padding-right:0; -webkit-mask-image:none; mask-image:none; } /* The message field: the same underline field, given room to be written in. Resizable vertically only — horizontal resize would drag it out of the column it shares with every other field. */ .field--message textarea { display: block; min-height: 4.5em; resize: vertical; line-height: 1.5; font-size: 1.05rem; } /* ============================================================ PHONE LEGIBILITY FLOOR + LANDSCAPE HERO ============================================================ Both tiers live at the end of the file deliberately: they have the same specificity as the hero and label rules above and win by order. ============================================================ */ /* The mono micro-labels run 9.6-10.9px, which reads on a desktop and sits right at the edge on a phone — uppercase, 0.2em tracked, held at arm's length. The floor is raised here only, so the desktop treatment stays exactly as drawn. These are nudged to 11px, not restyled. */ @media(max-width:640px){ /* Written with the same selector shapes that set these sizes in the first place. A bare `.lbl` here loses to `.stat .lbl` on specificity and the floor silently does nothing — which is what happened the first time this was tried. Sizes are nudged to 11px, nothing is restyled. */ .tag, .mega-eyebrow, .hl-kicker, .fold2 .cap, .feed-chip, .replay, .filter-btn .cnt, .stat .lbl, .stats .lbl, .old .lbl, .mv-card .lbl, .csd-metrics .lbl, .icard .ctype, .card .c-type, .card .c-date, .card .c-eyebrow, .hl-slim .hs-type, .at-glance .gl, .pop .pm, .side-box h4, .testi-card cite, .peepal-media__caption, .csd-feature__caption, .csd-feature__role, .member .role, .leader .info a, .leader .info .role, .ab-leader__role, .ab-member__role, .val-card .vn, .v-caption, .video-inner .veyebrow, .found-tiles .tile span, .found-quote cite, .way-stat2 .l, .way-sep, .why-item .wnum, .lp-home-link, .lp-form-note, .lp-cta .cta-note, .promo-pop--corner .promo-pop__meta, .nl-rail, .nl-byline, .nl-strip .k, .nl-list .k{font-size:.69rem} } /* * A phone turned sideways. * * The hero form's scroll cap starts at 901px, so below that the hero runs * as long as its content — which on a 390px-tall landscape screen measured * 883px, better than two screens before the marquee band appears. The * stacking is what costs the height, so here the two columns go back side * by side and the padding comes in. * * Keyed to height and orientation rather than width: a tablet in portrait * is a different case and must not be caught by this. */ @media(max-height:560px) and (orientation:landscape) and (min-width:640px){ .hero{ --hero-peek:40px; --hero-pad-top:76px; --hero-pad-bottom:16px; padding:var(--hero-pad-top) 0 var(--hero-pad-bottom); } .hero-grid{grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,48px);align-items:center} .lead{order:0} .lead h2{margin-bottom:12px} .field{margin-bottom:12px} .field input,.field select,.field textarea{padding:6px 0;font-size:1rem} .field .optional{top:9px} .hero-copy .sub{margin-top:10px} }