/* =========================================================================== Whisper — shared stylesheet Built to Whisper_Guide_021026.pdf (the 2 Oct refresh), NOT the previous brand system. Differences that matter: - body copy is Pilat Regular/Bold, NOT Pilat Extended Book (superseded) - three greys are now brand colours with defined roles (p20) - gradient is "big hits of colour", not a 10% accent (p20) - partnership lockups put the PARTNER first with a lowercase x (p14) - red and pink type are never used together (p23) =========================================================================== */ /* --- type --------------------------------------------------------------- .otf is what brand supplied. These want converting to .woff2 (roughly a third of the size) once the web licence with General Type is settled — all four files are DEVELOPMENT builds, see the handover. */ @font-face { font-family:"Pilat Extended"; src:url("../fonts/PilatExtended-Heavy.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap } @font-face { font-family:"Pilat Extended"; src:url("../fonts/PilatExtended-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap } @font-face { font-family:"Pilat"; src:url("../fonts/Pilat-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap } @font-face { font-family:"Pilat"; src:url("../fonts/Pilat-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap } :root{ --red:#ff000e; --pink:#ff0097; /* Taken from the brand artwork itself (Whisper_Logo_RGB_Gradient.svg), not from the guide, which gives the two end colours and no angle or stops. Horizontal, and five stops — it holds red far longer than a plain two-stop ramp, so a simple #ff000e -> #ff0097 does not match the logo sitting on it. NOTE: Maddie's build uses 142deg, which disagrees with the artwork. */ --grad:linear-gradient(90deg, #ff000e 0%, #ff000e .24%, #ff0038 25.64%, #ff006b 59.82%, #ff008b 85.68%, #ff0097 100%); --black:#000000; --white:#ffffff; --grey-01:#575752; /* type / backgrounds */ --grey-02:#b9b9b4; /* type / backgrounds */ --grey-03:#f5f5f1; /* backgrounds */ --display:"Pilat Extended",Arial,Helvetica,sans-serif; --body:"Pilat",Arial,Helvetica,sans-serif; --gutter:clamp(20px,4vw,64px); --maxw:1440px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--white); color:var(--black); font-family:var(--body); font-weight:400; font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block} a{color:inherit} .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter)} /* headlines: ALL CAPS, Pilat Extended Heavy (p22/p23) */ h1,h2,h3,.h{ font-family:var(--display); font-weight:900; text-transform:uppercase; margin:0; line-height:.98; letter-spacing:-.005em; text-wrap:balance; } h1{font-size:clamp(40px,7.4vw,104px); line-height:.92; letter-spacing:-.02em} h2{font-size:clamp(28px,4.4vw,56px)} /* subheads: Pilat Extended Regular, sentence case (p22) */ /* --fg, not --black. shell.css flips --fg to #fff in dark mode; a literal black stays black, and on the Careers page these four paragraphs were black on a black background - present, selectable, and invisible. Any text on a surface that follows the theme takes a theme token. */ /* Section intro paragraph. Pilat, not Pilat Extended: it set in the display face until 14 Oct, which left every intro in a different typeface from the body copy right under it. Still bigger than body at 22px. */ .sub{font-family:var(--body); font-weight:400; text-transform:none; font-size:clamp(17px,1.5vw,22px); line-height:1.35; color:var(--fg,var(--black)); max-width:46ch} .eyebrow{font-family:var(--body); font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:.16em; color:var(--muted,var(--grey-01))} /* The dodo mark sits inline in some eyebrows. v3.css sizes it, but v3.css is only linked on the home page - on the News page the same markup rendered the bird at its intrinsic size, about 500px tall, above the headline. Sized here so it holds wherever the eyebrow is used, and the flex row is what keeps the mark and the word on one baseline. */ .eyebrow:has(img){display:flex; align-items:center; gap:10px} .eyebrow img{height:13px; width:auto} /* --- top bar: gradient, full bleed ------------------------------------- */ /* TODO v1-REMOVAL: this whole block is the v1 bar. v3 pages use the floating pill in shell.css, which has to override four of these rules by force (.topbar colour, .topbar .wrap flex/max-width, .topbar nav a padding, and the specificity that kept .navgenre visible at every width). Delete this block once About and Sport are on the shell - and delete the overrides in shell.css at the same time, or the nav silently loses its responsive hides. */ .topbar{background:var(--grad); color:var(--white)} .topbar .wrap{display:flex; align-items:center; gap:24px; min-height:84px; /* The gradient bar runs edge to edge. Inside the 1440px content column it left roughly 300px of empty gradient each side on a wide screen, which is Lily's note: the logo belongs hard left, the nav hard right. The gutter is fluid, so this holds from a 390px phone to an ultrawide without a breakpoint. Everything BELOW the bar still uses --maxw. */ max-width:none; padding-inline:clamp(20px,3vw,80px)} .topbar .logo{height:22px; width:auto; margin-right:auto} /* min 16px on screen, p12 */ .topbar nav{display:flex; gap:22px; align-items:center} .topbar nav a{font-family:var(--body); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; padding-block:4px} .topbar nav a[aria-current]{border-bottom:2px solid var(--white)} .kickoff{background:var(--white); color:var(--black); border-radius:999px; padding:9px 22px; font-family:var(--body); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.08em; text-decoration:none; white-space:nowrap} /* --- section nav -------------------------------------------------------- */ /* Full-width rules run the gradient, red to pink, left to right (9 Oct). border-image is how a gradient gets onto a border: slice 1 stretches the ramp along the edge, and the sides with width 0 paint nothing. The solid colour stays in the shorthand as the fallback, so a browser that drops border-image still draws the hairline rather than nothing. Only rules that span the full content column change. A rule that spans one column of a grid keeps its neutral hairline, because a gradient restarted in every column reads as five short ramps rather than one. */ .sectionnav{border-bottom:1px solid var(--grey-03); border-image:var(--grad) 1} .sectionnav .wrap{display:flex; gap:30px; flex-wrap:wrap; padding-block:18px 12px} /* Measured off the artboard. The separation between selected and the rest is carried by WEIGHT as much as colour - 400 against 700 - which is why having them all bold made the active tab barely stand out. */ .sectionnav button{font-family:var(--body); font-weight:400; font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:rgba(0,0,0,.62); background:none; border:0; padding:0 0 6px; cursor:pointer; position:relative} .sectionnav button:hover{color:rgba(0,0,0,.82)} .sectionnav button.here{color:var(--black); font-weight:700} /* Centred under the tab, not pinned left: under a long label like HOW WE WORK a left-aligned arrow points at nothing. Lily's note, 4 Oct. */ .sectionnav button.here::after{content:"\2193"; position:absolute; left:50%; transform:translateX(-50%); top:100%; font-size:13px; line-height:1} .sectionnav button:focus-visible{outline:2px solid var(--pink); outline-offset:3px} /* All five panes share ONE grid cell, so the section is always as tall as the tallest and switching tabs never shifts the film hero below it. Hidden panes use visibility (still occupy space, still removed from the a11y tree) rather than display:none, which would collapse the box and reintroduce the jump. */ .intro{padding-block:clamp(40px,5vw,66px) clamp(30px,4vw,54px); display:grid} .intro > [role=tabpanel]{grid-area:1/1} .intro > [role=tabpanel][hidden]{display:block; visibility:hidden; pointer-events:none} .intro .sub{margin-top:20px} /* matched to Maddie's rendered metrics: 92px, -0.02em tracking, 0.92 leading */ .lede{font-family:var(--display); font-weight:900; text-transform:uppercase; font-size:clamp(34px,6.4vw,92px); line-height:.92; letter-spacing:-.02em; margin:0; text-wrap:balance; max-width:17ch} .values{list-style:none; margin:0; padding:0; display:grid; gap:26px; grid-template-columns:repeat(3,1fr)} .values h3{font-size:clamp(17px,1.7vw,22px); margin-bottom:8px} .values p{margin:0; font-size:15px; color:var(--muted,var(--grey-01)); max-width:34ch} /* The posters, on Join us. They carry their own headline in the artwork, so the li holds a picture and the line under it and no heading at all. The ratio is the artwork's own, 543x768, give or take a pixel across the three - stated here rather than left to the file, so a replacement at a different size cannot quietly change the row. */ /* Framed - Richard, 19 Oct: "some go to back before others so they don't look level". The posters themselves were always level (measured 19 Oct: all three images 614px tall, same top, same bottom at 1440). What was ragged is the caption: "Talent gets us in the room, teamwork keeps us there." runs to two lines where the other two run to one, so the third column finished 29px lower than its neighbours and the row read crooked. Two things fix it together. The li stretches to the tallest in the row and carries a frame, so the three boxes start and finish on the same lines whatever the copy does. And the caption gets the height of two lines whether it uses them or not, so the text block is the same size in all three and the poster tops stay level with it. The frame was 1px of --line (#242424 on the dark band) and Richard asked for it a hair wider and more defined. 2px, and the colour comes off currentColor rather than --line so it follows the theme: 34% of white over black lands on about #575757, which is Grey 01, and 34% of black over the light theme's ground gives the same weight of line the other way up. */ /* THE FRAME STOPS AT THE PICTURE - Richard, 20 Oct. It was on the li, so it went round the caption as well and the three boxes were really three cards. On its own span it holds the poster and nothing else, and the line under it sits outside, which is what he asked for. The levelling still works, and it was never the frame doing it. The li stretches to the tallest in the row, and the caption is given the height of two lines whether it uses them or not, so all three posters start and finish on the same lines whatever the copy does. Measured 19 Oct: the images were always 614px and level; it was the two-line caption on "Talent gets us in the room" that made the row read crooked. */ .values.posters li{display:grid; gap:14px; align-content:start} .values.posters .frame{display:block; border:2px solid color-mix(in srgb, currentColor 34%, transparent); border-radius:14px; padding:14px} /* clip-path, and it is doing a job the crop could not. The exported artwork carried a bright rim, and trimming two pixels off every file cleared it in the FILES - measured, every edge now within one level of its interior - but a hairline was still drawn around each poster on screen. Nothing in the cascade draws it: no border, outline or box-shadow on the img, the li, the section or the body, all checked in the rendered page. So it is the edge row itself at the rendered scale. inset(1px) drops that row on all four sides before it is painted, and `round 8px` keeps the corner the radius was giving us. The box ratio always follows the artwork, so the full height of each poster is shown and cover trims at most a pixel off a side rather than cutting the bottom back. That matters more here than on an ordinary photograph: each poster carries its own headline near its foot, and a box even slightly short of the file takes the words off. 16 Oct: the finished artwork landed and the placeholders went. All three are 1080x1521, so the box is 1080/1521. It was 539/754 for the set before it, which had ten pixels taken off the bottom on 14 Oct to kill a hairline that the inset above now handles properly. */ .values.posters img{width:100%; aspect-ratio:1080/1521; object-fit:cover; display:block; border-radius:8px; background:var(--black); clip-path:inset(1px round 8px)} /* The caption matches the copy above the posters rather than sitting at the 15px body size, and it is centred under its own poster - Richard, 14 Oct. */ /* var(--body), not var(--display). These match the .sub paragraphs above them by Richard's own instruction, and .sub moved to Pilat on 14 Oct - this was the last prose on the page still set in the display face. */ .values.posters p{max-width:none; text-align:center; font-family:var(--body); font-weight:400; font-size:clamp(17px,1.5vw,22px); line-height:1.35; color:var(--fg,var(--black)); min-height:calc(2 * 1.35em)} @media (max-width:820px){ .values{grid-template-columns:1fr} } /* --- film hero ---------------------------------------------------------- */ .filmhero{position:relative; background:var(--black); color:var(--white); overflow:hidden} /* Standing in for the brand film with the DodoWalk footage: clean, no burned-in headline, and 3:1 rather than the 5.21:1 letterbox the cropped still forced. Maddie's hero is nearer 2.25:1 — when the real film lands, this one value and the change together. */ /* No image until the film exists. Sized to the slot so the composition can still be judged; a video or image dropped in here inherits this box. */ .filmhero{min-height:clamp(300px,34vw,460px)} .filmhero video,.filmhero img{width:100%; height:100%; object-fit:cover; opacity:.85} .filmhero{display:grid} .filmhero video,.filmhero img{grid-area:1/1} .filmhero .inner{grid-area:1/1; align-self:end; padding:var(--gutter); max-width:var(--maxw); width:100%; margin:0 auto; /* The video carries opacity:.85, which gives it a stacking context and so paints it ABOVE a plain in-flow sibling. Without this the overlay is under the video and the play button cannot be clicked at all. */ position:relative; z-index:1} .filmhero .eyebrow{color:var(--white); display:flex; align-items:center; gap:9px} /* The floor was 40px, and IMPOSSIBLE in Pilat Extended Heavy is wider than a 390px screen at that size - it ran off the edge AND stretched the grid track, which is what pushed the video 19px wider than the viewport. */ .filmhero h1,.filmhero h2{font-size:clamp(28px,7.4vw,104px); margin-block:14px 22px} /* Pressing play: the overlay gets out of the way, the video comes up to full opacity and the box takes the film's own shape instead of the cropped slot. */ /* At rest: the silent loop fills the slot, the full film is not in the layout at all. On play they swap and the box takes the film's own shape. */ #brandfilm{display:none} .filmhero.playing #heroloop{display:none} .filmhero.playing #brandfilm{display:block} .filmhero.playing .inner{display:none} .filmhero.playing{min-height:0} .filmhero.playing video{height:auto; aspect-ratio:16/9; object-fit:contain; opacity:1} .pill{display:inline-flex; align-items:center; gap:11px; background:var(--grad); color:var(--white); border-radius:999px; padding:13px 26px; text-decoration:none; font-family:var(--body); font-weight:700; font-size:13px; letter-spacing:.09em; text-transform:uppercase; border:0; cursor:pointer} /* --- trusted by --------------------------------------------------------- */ .trusted{border-block:1px solid var(--grey-03); padding-block:24px} .trusted .eyebrow{margin-bottom:16px} /* TODO v1-REMOVAL: the v1 logo band. `.logos img{max-height:30px}` below survived v3's override (different property) and squashed every partner logo out of ratio until v3.css added max-height:none. Delete with the block above. */ .logos{display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:10px; margin:0; padding:0} .logos li{list-style:none; border:1px solid var(--grey-03); border-radius:3px; display:grid; place-items:center; padding:16px 10px; min-height:74px; background:var(--white)} .logos img{max-height:30px; width:auto; object-fit:contain} /* --- what we do --------------------------------------------------------- */ .whatwedo{padding-block:clamp(40px,5vw,72px)} .whatwedo h2{margin-block:10px 28px} .depts{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; list-style:none; padding:0; margin:0} .dept{display:flex; flex-direction:column} .dept .shot{position:relative; color:var(--white)} .dept .shot img{aspect-ratio:4/3; object-fit:cover; width:100%} .dept .shot .on{position:absolute; inset:auto 0 0 0; padding:16px 18px 18px; background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0))} .dept .shot h3{font-size:19px; letter-spacing:.02em} /* Reserve two lines on every card. The overlay is bottom-anchored, so a card whose copy wraps to two lines pushes its title up and the row stops aligning — "Branded" against the other three. */ .dept .shot p{margin:6px 0 10px; font-size:14px; line-height:1.35; min-height:2.7em} .dept .shot a{font-family:var(--body); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; text-decoration:none} .dept .who{display:flex; gap:11px; align-items:center; border:1px solid var(--grey-03); border-top:0; padding:12px 14px} .dept .who img,.dept .who .blank{width:34px; height:34px; border-radius:50%; object-fit:cover; background:var(--grey-03); flex:0 0 auto} .dept .who b{display:block; font-size:13px} .dept .who span{display:block; font-size:12px; color:var(--muted,var(--grey-01)); line-height:1.3} /* --- footer ------------------------------------------------------------- */ /* The